/*! HTML5 Boilerplate v7.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
 
 @font-face {
    font-family: 'open_sansbold';
    src: url('OpenSans-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*@font-face {
  font-family: "bubbleboddyneue_bold";

  src: url("BubbleboddyNeue-BoldUNLICENSED.woff") format("woff"); 
  font-weight: normal;
  font-style: normal;
}*/

 
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: white;
    font-size: 1em;
    line-height: 1.6;
        height: 100%;
    width: 100%;
    
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::selection {
    background: #663399;
    text-shadow: none;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}


 /* ==========================================================================
   Author's custom styles
   ========================================================================== */
   

hr {
    display: block;
    height: 0px;
    border: 0;
    border-top: 10px solid #993399;
    border-bottom: 2px solid rgba(50, 0, 87, 0.2);;
    margin: 0;
    padding: 0;
}
   

body {
	background: #993399; 
    font-family: 'open_sansbold', sans-serif;
    margin: 0;
    position: relative;
    overflow-x: hidden;
    z-index: -50;    
}

body.index p a {
	text-decoration: none;
    font-weight:bold;
}

body.index a {
    color: #ffcc33;
	text-decoration: none;
    text-transform: uppercase;
 	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.19);
}

body.index a:hover {
	transition: 0.3s;
	color: #993399;
	text-decoration: none;
}

.topbar {
    background-color: #993399;
    height: 26px;
    position: relative;
    width: 100%;
    z-index: 0;
    margin-bottom: 1%;
}


.darkcolor {
    color: #993399;
}

.halfsize {
    -moz-transform:scale(0.5);
    -webkit-transform:scale(0.5);
    transform:scale(0.5);
}

.logo a {
	display: block;
    //height: 30px;
	width: 40px;
	background: transparent url('img/logo_younghorses_small.png') no-repeat center;
	text-indent: -10000px;
	background-size: contain;
	float: right;
	margin-right: 8px;
    margin-top: 0px;
}

.maincolumn {
	width: 80%;
    max-width: 900px;
	padding: 0;
	margin: 0 auto;
	background-size: contain;
    position: relative;
}

.background_wrap .maincolumn {
    max-width: 800px;
}

.maincolumn a {
    text-transform: uppercase;
    color: #ffcc33;
    
}

a.presskit {   
    float: right; 
    margin-top:0;
    font-size: 1.45em;
}

body.index a.presskit {
    text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.19), 1px -1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.19);
}

p.releasedate {
    font-size:2em;  
    margin-bottom:-2em;
    display: block;    
    text-align: center;

    text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.19), 1px -1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.19);
}

p.releasedatemobile {
    visibility: hidden;
    font-size:1.6em; 
    margin: 0;
    text-align: center;
    text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, 0.19);
}

header h1 {
	display: block;
	clear: both;
	width: 100%;
	min-height: 160px; /*220px;*/
	background: transparent url('img/logo_bugsnax.png') no-repeat center;
	text-indent: -1000px;
    overflow:hidden;
	padding: 0;
	margin: 0 auto;
	background-size: contain;
    margin-bottom: 2%;
	
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) scale(1.0);
    animation-timing-function: ease-in-out;
    z-index: -1;
  }
  
  50% {
    transform: rotate(5deg) scale(1.05);
    animation-timing-function: ease-in-out;
    z-index: -1;
  }

}

.filbo img {
    position: relative;
    margin: -32% -12%; /* -30% -12%; */
    float: left;
	width: 40%;
    z-index: -1;
    transition: transform 2s;
}



.filbo img:hover {
    transform: rotate(5deg) scale(1.05);
}

@keyframes flee {
  0%, 100% {
    transform: rotate(0deg) translate(0, -2%);
    animation-timing-function: ease-in-out;
    z-index: 1;
  }
  50% {
    transform: rotate(2.5deg) translate(15%, 2%);
    animation-timing-function: ease-in-out;
    z-index: 1;
  }
}

.dust {
    margin: 0;
    padding: 0;
    height: 0;
    position: relative;
    z-index: -100;
}

.dust img {
    width: 40%;
    min-width: 200px;
    margin: -20% 100% 0% 40%;
}

.strabby img {
    margin: -17% 10%;
    float: right;
	width: 20%;
	min-width: 120px;
    animation:  flee 9s 0s alternate infinite;
    position: relative;
    z-index: 1;
}

@media screen and (max-width: 1000px){
    .strabby img  { margin: -16% 5%; }
    .dust img { margin: -19% 95% 0% 40%; }
}

.background_wrap {
	width: 100%;
	position: relative;
	overflow: hidden;
	background-color: #1f9099;
	z-index: -100;	
}

.background img{
	position: absolute;
	top: 0px;
	background-size: 100%;
	min-width: 1440px; 
	width: 100%;
	z-index: -100;
}

.trailer {
	//max-width: 900px;
	margin: 20px 0px 0px 0px;
	float: none;
    clear: both;
    position: relative;
    padding: 25px 0px 51.5% 0px;
    height: 0;
    margin-bottom: -20px;
    z-index: 5;
    
    border-radius: 25px;
    border: 10px solid white;
    
    overflow: hidden;   
    //-webkit-mask-image: -webkit-radial-gradient(white, black);
    
    box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.2), 0 6px 30px 0 rgba(0, 0, 0, 0.19);
}

.trailer iframe {
	position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    
    left: -9px;
    top: -9px;
    z-index: 4;
    
    border-radius: 25px;
    border: 10px solid white;

}

#yt_thumb img{
    position: absolute;
        top: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}



p, label {
	color: #fff;
	clear: both;
	margin-bottom: 10px;
}

p.legal {
	font-size: .9em;
	margin: 0px;// 20px 0px 20px;	
}

label {
	display: block;
	margin-top: 30px;
}

h1  {
	color: #ffffff;

	text-align: left;
    //text-transform: uppercase;
	font-size: 2.7em;
}

h2, h3 {
	color: #ffffff;
	font-weight: normal;
	text-align: left;
    text-transform: uppercase;
	font-size: 2em;
	margin: 40px 0px 20px 0px;
	padding-top: 0;
}

h3 {
	margin: 20px 0px 0px 0px;
	font-size: 1.2em;
}

ul.downloads {
	list-style: none;
	display: block;
	width: 100%;
	margin: 0;// auto;
	padding: 0;
	text-align: center;
}

ul.socials {
	list-style: none;
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

ul.downloads li, ul.socials li {
	display: inline-block;
	margin: 2%;	
    /*margin: 4% -2% 4% -2%; */
}

ul.downloads li {
    margin-top: 0%;
    margin-bottom: 0%;
}

ul.downloads li a {
	display: block;
	/*width: 100px;
	height: 72px;*/
    width: 84px;
    height: 60px;
	text-indent: -10000px;
    
    transition: all .1s ease-in-out;

	/* transition: 0.3s;
	-o-transition: 0.3s;
    -ms-transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;*/
}

.grow {
  
    transition: all .1s ease-in-out;
}

.grow:hover {
    transform: scale(1.1);
}

ul.downloads li a:hover, ul.socials li a:hover {
    transform: scale(1.2);
}

ul.downloads li a.fangamer {
	background: transparent url('img/merch_fangamer.png') no-repeat;
	background-size: contain;
    background-position: center;
    animation: none;
}

ul.downloads li a.fangamer:hover {
	background: transparent url('img/merch_fangamer.png') no-repeat;
	background-size: contain;
    background-position: center;
    animation: strabby 1.4s ease-in-out;
}


ul.downloads li a.epic {
	background: transparent url('img/platform_epic.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.downloads li a.epic:hover {
	background: transparent url('img/platform_epic.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.downloads li a.playstation {
	background: transparent url('img/platform_playstation.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.downloads li a.playstation:hover {
	background: transparent url('img/platform_playstation.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.downloads li a.steam {
	background: transparent url('img/platform_steam.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.downloads li a.steam:hover {
	background: transparent url('img/platform_steam.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.downloads li a.switch {
	background: transparent url('img/platform_switch.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.downloads li a.switch:hover {
	background: transparent url('img/platform_switch.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.downloads li a.xbox {
	background: transparent url('img/platform_xbox.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.downloads li a.xbox:hover {
	background: transparent url('img/platform_xbox.png') no-repeat;
	background-size: contain;
    background-position: center;
}



ul.socials li {
	margin: 1%;
	margin-bottom: 0px;
}

ul.socials li a {
	display: block;
    
	width: 36px; /* 42px*/
	height: 36px; /* 42px */
	text-indent: -10000px;
}

ul.socials li a.facebook {
	background: transparent url('img/social_facebook.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.socials li a.twitter {
	background: transparent url('img/social_twitter.png') no-repeat;
	background-size: contain;
    background-position: center;
}

ul.socials li a.discord {
	background: transparent url('img/social_discord.png') no-repeat;
	background-size: contain;
    background-position: center;
    width: 37px;
}


/* ==========================================================================
   Mailchimp styles
   ========================================================================== */

.mc_embed_signup_wrapper {
    background-color: rgba(153,51,153,0.48);
    background: linear-gradient(180deg, rgba(153,51,153,0.48)78%, transparent 22%);
    position: relative;
    z-index: -2;
}
#mc_embed_signup {

    width: 100%;
	margin: 0 auto;
    margin-top: 0px; /*60px;*/
	text-align: center;
	padding-bottom: 40px;
    margin-bottom: 60px;
    position: relative;
    z-index: -2;
}

#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
#mc_embed_signup label { font-size: 1.45em; }





input {
	color: #9e9e9e;
	background: white;
	padding: 10px;
	border: 5px solid #ffcc33;
	-webkit-appearance:none;
    z-index: 1;
    border-top-left-radius: 30px;
	border-bottom-left-radius: 30px; 
}

input.email {
    height:40px;
    padding: 0px 0.4em;
    display: inline-block;
    margin: 0;
    width:350px;
    vertical-align:top;
    z-index: 1;
}



/* 
input:focus {
	border-color: #663399;
}
*/

input.submit {
	color: #993399;
	text-transform: uppercase;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px; 
    border-top-left-radius: 0px;
	border-bottom-left-radius: 0px; 
	font-size: 1.2em;
    background: #ffcc33;
    height: 50px;
}

input.submit:hover {
	transition: 0.3s;
    border-color: #993399;
    color: white;
    background: #993399;;
}



.infobox_first, .infobox_second {
    margin: 20px 0px 20px 0px;
    padding: 30px 50px 30px 50px;
}

.infobox_first, .infobox_second {
    background-color: rgba(50, 0, 87, 0.7);
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 25px;
    border:6px solid white;
    color: white;
}

.infobox_second {
	background-color: rgba(153, 51, 153, 0.7);
}

.screenshots li {
    margin-bottom: 1em;
}

.info {
    width: 80%;
    overflow: hidden;
    color: rgba(50, 0, 87, 1.0);
}

.infobox_first, .infobox_second p {
    color: rgba(50, 0, 87, 1.0);
}

.infobox_first, .infobox_second p {
    color: white;
}

.info h1, .info h2, .infobox_first p {
    margin-top: 0px;
}


@keyframes fly {
  0%, 100% {
    transform: rotate(0deg) translate(-2%, -8%);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: rotate(5deg) translate(0, 0);
    animation-timing-function: ease-in-out;
  }
}

.honey_bee img {
    position: absolute;
    left: -11%;
    top: 6%;
    z-index: 0;
    float: left;
	width: 35%;
    animation:  fly 10s 0s alternate infinite;
}

@keyframes claw {
  0%, 100% {
    transform: rotate(0deg) translate(0, 0);
    animation-timing-function: ease-in-out;
  }
  35% {
    transform: rotate(-10deg) translate(-1%, 10%);
    animation-timing-function: ease-in-out;
  }
}

.mantis img {
    position: absolute;
    right: -8%;
    top: 800px;
    z-index: 0;
    float: left;
	width: 35%;
    transition: transform 0.4s;
}    

.mantis img:hover {
    transform: rotate(-3deg) translate(-7%, 8%);
    //animation:  claw 1s 0s alternate;
}


.screenshots {
	background: transparent url('img/bg_stickers.png') repeat;
    width: 100%;
    background-size: 576px 544px;
    //background-position: center;
    padding:0px;
    margin-bottom: 0px;
    //z-index: -1;
    position: relative;
    //overflow-x: hidden;
    text-align: left;
    font-size: 1.2em;
    line-height: 1.6;
    color: white;
    overflow: hidden;
}

.perfundo__link { 
    width: 46.25%; 
    float: left;
    margin: 2.7% 0 0 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
    border-radius: 25px;
    border: 10px solid white;
    overflow:hidden;
    position: relative;
    
    z-index: 1;
	//position: absolute;
}

.half_width {
    width: 46.25%; 
    float: right;
}

.third_width{
    width: 28%;   
}

.two_third_width {
    width: 64.5%; 
    float: right;
}


.perfundo__link img { 
    width: 100%;
    transition: all .1s ease-in-out;
    position: relative;
}

.perfundo__link img:hover {
  transform: scale(1.1); 
}

.perfundo__image {
    width: 1920px; 
    padding-top: 56%; 
}

.perfundo__figure {
margin: 0;
}

.perfundo__content {
  overflow: hidden;
}

.perfundo__overlay {
  background-color: rgba(50, 0, 87, 0.9);
}

.perfundo__next, .perfundo__control, .perfundo__control:visited {
  color: #ffcc33;
  opacity: 1.0; 
}

.perfundo__close
{
    font-size: 40px;
    top: 0px;
    right: 20px;
}

.perfundo__next {
  font-size: 4em;
    right: 8%; 
      margin-top: -0.5em;
}

.perfundo__prev{
  font-size: 4em;
  left: 8%; 
  margin-top: -0.5em;
}

.pineapple img {
    margin: -28% 0%  0 -58%;
    position: relative;
    z-index: 0;
    float: left;
	width: 35%;
    transform: rotate(-8deg);
    transition: transform 2s;
}

.pineapple img:hover {
    transform: rotate(-8deg) translate(10%, 0%);
    z-index: 0;
}

@keyframes breathe {
  0%, 100% {
    transform: scale(1.005, 1.0);
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: scale(0.995, 1.0);
    animation-timing-function: ease-in-out;
  }
}

.screenshots_grumpus img {
    margin: -25% -90%  0 0;
    position: relative;
    z-index: 2;
    float: right;
	width: 40%;
    /* animation:  breathe 4s 0s alternate infinite; */
}

@keyframes dance {
  0%, 100% {
    transform: rotate(0deg) translate(0, 1%) scale(1.0);
    animation-timing-function: ease-in-out;
  }

  50% {
    transform: rotate(2deg) translate(1%, 1%) scale(0.99);;
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: rotate(0deg) translate(0, 1%);
    animation-timing-function: ease-in-out;
  }
}

@keyframes dance_shadow_01 {
  0%, 100% {
    transform: rotate(0deg) translate(0, 1%) scale(1.0);
    animation-timing-function: ease-in-out;
  }

  50% {
    transform: rotate(2deg) translate(15%, 1%) scale(0.99);;
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: rotate(0deg) translate(0, 1%);
    animation-timing-function: ease-in-out;
  }
}

@keyframes dance_shadow_02 {
  0%, 100% {
    transform: rotate(0deg) translate(0, 1%) scale(1.0);
    animation-timing-function: ease-in-out;
  }

  50% {
    transform: rotate(2deg) translate(8%, 1%) scale(0.99);;
    animation-timing-function: ease-in-out;
  }
  90% {
    transform: rotate(0deg) translate(0, 1%);
    animation-timing-function: ease-in-out;
  }
}

@keyframes strabby {
  0% { 
    transform: rotate(0) translate(0, 0) scale(1.0); 
  }
  15% {
    transform: rotate(-3deg) translate(-2%, 8%) scale(1.05);
  }
  30% {
    transform: rotate(0) translate(0, 0) scale(1.1);
  } 
  50% { 
    transform: rotate(2deg) translate(2%, 4%) scale(1.1);
  }
  65% {
    transform: rotate(0) translate(0, 0) scale(1.15);
  }
  80% {
    transform: rotate(-2deg) translate(-1%, 2%) scale(1.2);
  }
  100% { 
    transform: rotate(0) translate(0, 0) scale(1.2);
  }
}


.footer_grumpus, .footer_grumpus_shadow_01, .footer_grumpus_shadow_02 {
    overflow: hidden;
}

.footer_grumpus img, .footer_grumpus_shadow_01 img, .footer_grumpus_shadow_02 img {
    position: absolute;
    bottom: 0;
	width: 40%;
    left: -100px;
    transform-origin: 50% 100%;
    transform: rotate(0deg) translate(0, 1%) scale(1.0);   
}

.footer_grumpus img {
    animation:  dance 3s 0s infinite;
}

.footer_grumpus_shadow_01 img {
    animation:  dance_shadow_01 3s 0.2s infinite;
}

.footer_grumpus_shadow_02 img {
    animation:  dance_shadow_02 3s 0.1s infinite;
}

.old_footer_bugsnax img {
    float: right;
    width: 30%;
    z-index: 1;
    margin: -25% -5% 0% 0%;
    transform: rotate(20deg);
}

.footer_bugsnax img {
    float: right;
    position: absolute;
    bottom: 0;
    right: -8%;
    width: 50%;
    z-index: 1;
}


#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
	background: #1f9099 url('img/bg_net.png') repeat;
    width: 100%;
    background-size: 45px 47px;
    padding: 0;
    margin-bottom: 0px;
    text-align: center;       
}

.footer_wrap {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    z-index: 0;
}


.esrb {
	width:246; 
	height:120px; 
	margin: 60px 0 100px 0; 
}

.overlay {
	position: absolute;
	top: 0;
	bottom: 0;
    left: 0;
    right: 0;
    //background: rgba(0,0,0,0.5);
    transition: opacity 200ms;
    visibility: hidden;
    opacity: 0;
    z-index: 9998;
}

:target {
    visibility: visible;
    opacity: 1;
}
  
.light {
    //background: rgba(255,255,255,0.5);
  }

.cancel {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: default;
    z-index: 9997;
  }

.popup {
	margin: 75px auto;
	padding: 20px;
	//background: #fff;
    background-color: rgba(50, 0, 87, 0.9);
	border: 6px solid white;
    border-radius: 25px;
	width: 85%;
	box-shadow: 0 0 50px rgba(0,0,0,0.5);
	position: relative;
}

.content p {
    //max-height: 400px;
    //overflow: auto;
    font-size: 1em;
    text-align: left;
  }
  
.close {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 0px;
    right: 20px;
    font-size: 40px;
    text-decoration: none;
  }

.popup.light  {
    border-color: #aaa;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
  }

  
  

@media screen and (max-width: 1400px){
    .filbo img  { margin: -20% -12%; }
}


@media screen and (max-width: 1280px){
    .screenshots_grumpus img  { visibility: hidden; display: none; }
    .pineapple img  { visibility: hidden; display: none; }
    ul.socials li { margin-bottom: 50px; }
    #mc_embed_signup { margin-top: 30px; }
}
    


@media screen and (max-width: 1100px){
    input.email  { width: 220px; }
    #mc_embed_signup label  { font-size: 1.2em; }
}


@media screen and (max-width: 1000px){
   input.email  { width: 200px; }
}


@media screen and (max-width: 900px){
    .honey_bee img  { visibility: hidden;}
    .mantis img  { visibility: hidden; display: none; }
    .footer_grumpus img , .footer_grumpus_shadow_01 img, .footer_grumpus_shadow_02 img   { visibility: hidden;}
    .footer_bugsnax img  { visibility: hidden; display: none; }
    #footer { padding-bottom: 120px; }
    .footer_wrap  { min-height: 700px; }
    
    .perfundo__link  { border: 6px solid white; margin-top: 2%; }
    .trailer { border-width: 6px; }
    .trailer iframe{ border-width: 6px; left: -6px; top: -6px;}
    .info { width: 100%; }
        
    .esrb { margin: 60px 0 0px 0; }
    .infobox_first, .infobox_second { border:4px solid white; }
    .info ul { padding-left: 20px; }
    

    #mc_embed_signup label  { font-size: 1.0em; }
    input.email  { width: 180px; }
}


@media screen and (max-width: 800px){
    p.releasedate  {  visibility: hidden; height: 32px;}
    p.releasedatemobile { display: block; visibility: visible; }

    
    .trailer {    margin-bottom: 0px; }    
    header h1	{ min-height: 90px; }
    ul.downloads li { margin: 4% -2% 4% -2%; }
    .topbar {  
    	margin-top: -26px;
    	margin-bottom: 5%;
    }


    ul.downloads li a { height: 50px;  }
    ul.socials li a { height: 30px; }
    a.presskit { font-size: 1.2em; }   
    .background img{ width: 100%; min-width: 1100px; }
    
    #mc_embed_signup label  { font-size: 1.0em; }
    input.email  { width: 160px; }
    #mc_embed_signup { margin-top: 60px; }
}



@media screen and (max-width: 768px) {
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}


@media screen and (max-width: 720px){
    .screenshots { background-size: 384px 363px;}
}


@media screen and (max-width: 700px){
    .filbo img  { margin: -31% -12%; }

    h1 {	font-size: 1.8em; }
    h2, h3 { font-size: 1.5em; }
    .screenshots { font-size: 1em; }
    
    .infobox_first, .infobox_second  {
        margin: 20px 0px 20px 0px;
        padding: 15px 25px 15px 25px;
    }
    
    .infobox_first, .infobox_first p {
		background-color: transparent;
		box-shadow: none;
		border: none;
		color: rgb(50, 0, 87);
		padding: 0px 3px 0px 3px;
	}



}

@media screen and (max-width: 600px){

    .perfundo__link { 
        width: 85%;  
        margin-top: 5%;
        /*cursor: default;*/
    }
    .half_width {

           width: 85%; 
        float: right;
    }

    .third_width{
        width: 85%; 
        float: left;
    }

    .two_third_width {
        width: 85%;  
        float: right;
    }
    

    
    .maincolumn { width: 92%; }

    
    /*.perfundo__overlay:target, .perfundo__overlay.is-active {
    visibility: hidden;
    
    }*/
}

@media screen and (max-width: 360px){
    input.email  { width: 160px; }
    #mc_embed_signup label  { font-size: 0.95em; }
        h1 {	font-size: 1.8em; }
}


    
 /* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

 .hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap; /* 1 */
}

/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: inherit;
}

/*
* Hide visually and from screen readers, but maintain layout
*/

.invisible {
  visibility: hidden;
}

/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
*    `contenteditable` attribute is included anywhere else in the document.
*    Otherwise it causes space to appear at the top and bottom of elements
*    that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
*    `:before` to contain the top-margins of child elements.
*/

.clearfix:before,
.clearfix:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

.clearfix:after {
  clear: both;
}

 
/* ==========================================================================
   Media Queries 
   ========================================================================== */

   .yt-hd-thumbnail-inner-container{height:0;padding-top:56.25%;position:relative}.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail,.yt-hd-thumbnail-inner-container>iframe{display:block;position:absolute;top:0;left:0;right:0;bottom:0;border-width:0}.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail{z-index:2}.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail img{max-width:100%}.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail.yt-hd-thumbnail-darken:before{display:block;position:absolute;content:'';top:0;left:0;right:0;bottom:0;background-color:#000;opacity:.3;-webkit-transition:opacity .3s ease;-moz-transition:opacity .3s ease;transition:opacity .3s ease}.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail.yt-hd-thumbnail-darken:hover:before{opacity:0}.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail:after{display:block;position:absolute;content:'';background-image:url(youtube-play.svg);background-size:contain;background-repeat:no-repeat;background-position:center center;width:80px;height:80px;top:50%;left:50%;margin-left:-40px;margin-top:-40px;opacity:.5;-webkit-transition:opacity .3s ease;-moz-transition:opacity .3s ease;transition:opacity .3s ease}.yt-hd-thumbnail-inner-container>a.yt-hd-thumbnail:hover:after{opacity:.8}.yt-hd-thumbnail-inner-container>iframe{max-width:100%;opacity:0;-webkit-transition:opacity .3s ease .3s;-moz-transition:opacity .3s ease .3s;transition:opacity .3s ease .3s}.yt-hd-thumbnail-inner-container.yt-hd-thumbnail-clicked>a.yt-hd-thumbnail{display:none}.yt-hd-thumbnail-inner-container.yt-hd-thumbnail-clicked>iframe{opacity:1}


 
#yt_thumb {
 
    opacity: 1;
}
#yt_thumb:target {

    opacity: 0;
}