/* Genreal Styles */ * { padding: 0; margin: 0; } html { overflow-x: hidden; height: 100%; } body { font-family: "apercu", -apple-system, system, sans-serif; background-color: #fff; color: #000; padding: 0; border: none; font-size: 5vw; position: relative; min-height: calc(100% - 200px); } @media (min-width: 668px) { body { font-size: 2.5vw; } } @media (min-width: 820px) { body { font-size: 1.67vw; padding-bottom: 170px; } } @media (min-width: 1200px) { body { font-size: 22px; } } input, textarea, button, select { font-family: "apercu", -apple-system, system, sans-serif; box-sizing: border-box; } .site_wrapper { overflow-x:hidden } a, a:hover, a:visited, a:active { color: #f74843; text-decoration: none; } a:hover { border: none; } hr { border: none; height: 1px; background-color: #000; } h1 { font-size: 9vw; font-weight: 900; margin-bottom: 40px; line-height: 1.2; } @media (min-width: 820px) { h1 { font-size: 6vw; } } @media (min-width: 1200px) { h1 { font-size: 70px; } } h2 { font-size: 7.5vw; font-weight: 900; margin-bottom: 20px; } @media (min-width: 820px) { h2 { font-size: 6vw; } } @media (min-width: 1200px) { h2 { font-size: 60px; } } h3 { font-size: 6vw; font-weight: 900; margin-bottom: 0; line-height: 1.3; } @media (min-width: 820px) { h3 { font-size: 3vw; } } @media (min-width: 1200px) { h3 { font-size: 38px; } } h4 { font-weight: 900; font-size: 6vw; margin-bottom: 20px; } @media (min-width: 820px) { h4 { font-size: 2.5vw; line-height: 1.2; } } @media (min-width: 1200px) { h4 { font-size: 32px; } } h4.second_call_to_action { margin-top: 30px; } h5 { font-weight: 700; font-size: 24px; margin-top: 10px; margin-bottom: 20px; } p, ul, ol, div { font-weight: 200; line-height: 1.4; } @media (min-width: 820px) { p, ul, ol, div { line-height: 1.6; } } p { margin: 20px 0; } li { margin-top: 10px; } sup { vertical-align: baseline; position: relative; top: -0.7em; font-size: 0.5em; } /* Grid styles */ #grid_example { font-size: 12px; } section img { max-width: 100%; width: 100%; } section.image { width: calc(100% + 10vw); max-width: none; margin: 0 -80px; } @media (min-width: 1360px) { #content > section.image + section.full_bleed { margin-top: 100px; } } section.image .row { margin-top: 0; margin-bottom: 0; } section.image img { width: 100%; height: auto; } .row { width: 100%; margin: 25px 0; } .row:after, .row:before { content: ''; clear:both; display: table; } .row.collapsed_row { margin: 0; } .col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 { padding: 10px 0; display: block; float: left; /* background-color: rgba(0,50,50, 0.2); */ margin-right: 5.75%; } @media (max-width: 819px) { .col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 { padding: 10px 0; display: block; /* background-color: rgba(0,50,50, 0.2); */ margin-right: 0; width: 100% !important; } } .col_1 { width: 3.062%; } .col_2 { width: 11.874%; } .col_3 { width: 20.686%; } .col_4 { width: 29.498% } .col_5 { width: 38.31% } .col_6 { width: 47.122% } .col_7 { width: 55.934% } .col_8 { width: 64.746% } .col_9 { width: 73.558% } .col_10 { width: 82.37% } .col_11 { width: 91.182% } .col_offset_7 { margin-left: 61.69%; } .col_offset_9 { margin-left: 79.308%; } .col_offset_6 { margin-left: 47.122%; } .col_offset_4 { margin-left: 35.248%; } .col_offset_3 { margin-left: 26.436%; } .col_offset_2 { margin-left: 17.624%; } .col_offset_1 { margin-left: 8.812%; } @media ( max-width: 819px ) { .col_offset_1, .col_offset_2, .col_offset_3, .col_offset_4, .col_offset_6, .col_offset_7, .col_offset_9 { margin-left: 0; } } .col_12 { width: 100%; margin-right: 0; } .row > *:last-child { margin-right: 0; } @media (max-width: 819px) { .sm_hidden { display: none; } } /* Content editable CSS */ [contenteditable]:focus { outline: 0px solid transparent; } /* Header Styles */ header.main_header { position: relative; width: 100%; margin: 0; padding: 0; overflow: hidden; min-height: 75px; } @media (min-width: 668px) { header.main_header { min-height: 150px; } } @media (min-width: 820px) { header.main_header { min-height: none; } } header.main_header .header_inner_wrapper { width: 100%; margin: 0 auto; max-width: 1360px; position: relative; } header.main_header .top_nav { position: relative; margin: 40px 5vw 0; } @media (min-width: 820px) { header.main_header .top_nav { margin: 40px 80px 0; } } header.main_header .logo { width: 140px; } @media (min-width: 668px) { header.main_header .logo { width: 18vw; } } @media (min-width: 820px) { header.main_header .logo { width: 9.5vw; max-width: 112px; position: static; } } header.main_header .logo a { border: none; } header.main_header .logo img { max-width: 100%; } header.main_header .logo .cls-2 { fill: #f74843; transition: fill 500ms linear; } footer.content_footer .content_footer_inner_wrapper, footer.main_footer .main_footer_inner_wrapper { width: 100%; margin: 0 auto; max-width: 1360px; } footer.main_footer { background: #f74843; color: #fff; } @media (min-width: 820px) { footer.main_footer { overflow: hidden; position: absolute; bottom: 0; left: 0; right: 0; } } footer.main_footer .main_footer_inner_wrapper { width: calc(100% - 10vw); margin: 0 auto; max-width: 1200px; position: relative; padding: 0 5vw; display: table; clear: both; } footer.main_footer .main_footer_inner_wrapper .row { margin-bottom: 0; } footer.main_footer .footer_steam_logos { text-align: center; margin: 50px auto; max-width: 300px } @media (min-width: 820px) { footer.main_footer .footer_steam_logos { max-width: 50%; margin: 0 auto; } } footer.main_footer .footer_steam_logos > div { float: left; } footer.main_footer .footer_steam_logos > div.steam_logo { width: 34%; position: relative; margin-right: 5%; } footer.main_footer .footer_steam_logos > div.steam_logo:after { content: ""; border-right: 1px #fff solid; height: 60%; position: absolute; right: -15%; top: 0; margin-top: 10%; } footer.main_footer .footer_steam_logos > div.steamworks_logo { width: 48%; margin-left: 5%; } footer.main_footer .footer_steam_logos img { width: 100%; } @media (min-width: 820px) { footer.main_footer .footer_steam_logos { max-width: none; margin: 0; } } footer.main_footer .steam_logo_footer img { width: 100%; margin-top: 0; } footer.main_footer .business_name { font-size: 16px; text-align: left; } @media (min-width: 820px) { footer.main_footer .business_name { margin-top: 0; } } footer.main_footer .business_name a { color: #fff; } footer.main_footer .business_description { color: #000; } footer.main_footer .business_description:hover { color: #fff; } @media (min-width: 820px) { .footer_nav_wrapper { margin-bottom: 25px; } } footer nav { font-size: 6vw; } @media (min-width: 668px) { footer nav { font-size: 3vw; } } @media (min-width: 820px) { footer nav { font-size: 12px; } } footer nav ul { list-style: none; text-align: left; margin-top: 20px; } @media (min-width: 820px) { footer nav ul { margin-top: 0; text-align: left; } } footer nav ul li { line-height: 1; font-weight: 700; vertical-align: top; display: block; } footer nav > ul > li { margin-bottom: 40px; } footer nav > ul > li:last-of-type { margin-bottom: 0; } @media (min-width: 820px) { footer nav ul li { float: left; width: 30%; margin-right: 5%; margin-bottom: 0; } footer nav > ul > li:last-of-type { margin-right: 0; margin-bottom: 0; } } footer nav ul li ul li { display: block; margin: 10px 0; float: none; width: auto; padding: 0; font-weight: 300; } footer nav ul li:last-of-type { border: none; } footer nav a, footer nav a:visited, footer nav a:active { color: #000; } footer nav a:hover { color: #fff; } body[data-vsapp-context='contact'] { background-color: #d9d8da; } #content_outer_wrapper { margin: 0 auto; width: 100%; } #content_inner_wrapper { margin: 0; opacity: 1; transition: opacity 500ms linear; } #content_inner_wrapper.is-loading { opacity: 0; } #content > section, #content > header { width: calc(100% - 10vw); max-width: 1200px; margin: 80px auto; padding: 0 5vw; } @media (min-width: 820px) { #content > section, #content > header { width: calc(100% - 160px); padding: 0 80px; } } #content > header { margin-top: 200px; } #content > section.image { padding: 0; width: 100%; margin: 0 auto; } .caption_wrapper { width: 80%; max-width: 1200px; margin: 0 auto; } @media (min-width: 1200px) { #content > section.image { max-width: 1360px; } } #content > .image img { display: block; } #content video { max-width: 100%; } #content > section.full_bleed { width: 100%; max-width: calc(100% - 10vw); padding: 40px 5vw; margin: 0; } @media (min-width: 820px) { #content > section.full_bleed { width: 100%; max-width: calc(100% - 160px); padding: 80px 80px; margin: 0; } } #content > section.full_bleed .section_inner_wrapper { width: 100%; max-width: 1200px; margin: 0 auto; } #content ul { padding-left: 30px; margin: 20px 0; } a.footnoted { text-decoration: none; color: #000; } .footnote, .caption, .requirements { font-size: 14px; color: #4c4c4c; position: relative; line-height:1.6; } @media (max-width: 819px) { .footnotes { display: none; padding: 0 5vw; margin: 0 -5vw; } } .caption { font-style: italic; position: relative; } .caption:before { font-family: Monaco, "Courier New", Courier, monospace; font-style: normal; font-size: 16px; content:"▲"; position: absolute; top: -5px; left: -15px; width: 10px; height: auto; } .footnote sup { position: absolute; left: -10px; font-size: 0.6em; top: 0; } .footnote:not(:first-of-type) { margin-top: 40px; } #page_background_videos { position: fixed; top: 0; bottom: 0; height: 100%; width: 100%; z-index: -1; overflow:hidden; } #page_background_videos:after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #000; opacity: 0.6; } #page_background_videos video { opacity: 0; min-width: 100%; min-height: 100%; max-width: none; max-height: none; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #page_background_videos video:first-of-type { opacity: 1; } /* Modals */ .modals > * { display: none; } .modal_outer_wrapper { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: rgba(255,255,255, 0.5); overflow: hidden; z-index: 99; } .modal { position: absolute; top: 0; bottom: 0; right: 0; left: 0; overflow: auto; } @media (min-width: 820px) { .modal { width: 700px; margin: 5vh auto 0; } } .modal_inner_wrapper { background: #fff; padding: 30px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } @media (min-width: 820px) { .modal_inner_wrapper { position: relative; top: auto; bottom: auto; left: auto; right: auto; } } /* page creepers */ .creeper { position: fixed; z-index: 9999; top: -400px; left: -400px; } #balloonicorn { width: 200px; } #headcrab { width: 350px; } .creeper img { width: 100%; height: auto; } #balloonicorn img { animation-name: spin; animation-duration: 30s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .grid_example .col_1, .grid_example .col_2, .grid_example .col_3, .grid_example .col_4, .grid_example .col_5, .grid_example .col_6, .grid_example .col_7, .grid_example .col_8, .grid_example .col_9, .grid_example .col_10, .grid_example .col_11, .grid_example .col_12 { background: rgba(255,0,0,0.3); }