/*! HTML5 Boilerplate v7.0.1 | MIT License | https://html5boilerplate.com/ */
/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */

 @font-face {
    font-family: 'open_sansbold';
    src: url('OpenSans-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

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

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

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

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

textarea {
    resize: vertical;
}

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 {
    min-height: 220px;
}

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

//.imagecontainer{text-align:center;background:wheat;width:100%;}
img.card01 {
    width: 5%; 
    float: left;
    transform: 
    z-index: 9;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-725%, 100%) rotate(-20deg);

}
img.card02 {
    width: 5%; 
    transform: rotate(20deg); 
    float: right;
    z-index: 9;
    position: absolute;
    bottom: 0;
    right: 20%;
}


a.fill-div {
    display: block;
    min-height: 220px;
    height: 100%;
    width: 100%;
    text-decoration: none;
}


@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;
    //padding-top: 220px;
}

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: 0%;
}

ul.downloads li a {
    display: block;
    /*width: 100px;
    height: 72px;*/
    width: 90px;
    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.ios {
    background: transparent url('img/platform_ios.svg') no-repeat;
    background-size: contain;
    background-position: center;
    width: 80px;
}

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

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

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.downloads li a.cardgame {
    background: transparent url('img/platform_cardgame.png') no-repeat;
    background-size: contain;
    background-position: center;
}

ul.downloads li a.cardgame:hover {
    background: transparent url('img/platform_cardgame.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;
}

.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.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%;   
}

.third_width_right {
    width: 28%;  
    float: right;
}

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

.two_third_width_left {
    width: 64.5%; 
    float: left;
}


.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;
    }
    
    .third_width_right {
        display: none !important; 
    }


    .two_third_width_left {
        width: 100%;
        box-sizing: border-box;        
    }
    
    .maincolumn { width: 92%; }
}

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

 .hidden {
  display: none !important;
}

.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 */
}

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

.invisible {
  visibility: hidden;
}

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

.clearfix:after {
  clear: both;
}

.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.html);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;
}