.body {
  background-color: #0f212d;
}

@media only screen and (min-width: 1200px) {
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 200px;
      width: 300px;
      opacity: 0;
      transition: .5s ease;
      background-color: black;
    }
    
    .image-container {
      position: relative;
      width: 50%;
        padding-bottom: 30px;
    }
    .keyart, .keyart_layer {
        height: 840px;
    }

    #parallax {
        display: block;
    }

    .keyart {
        position: relative;
        z-index: 10;
      background-color: #0f212d;
    }

    .keyart_layer {
        background-position: bottom center;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }
    .keyart_layer.parallax {
        position: fixed;
    }
    #keyart-0 {
		background-image: url('./images/bgwidevtp2.png');
		background-color: #0f212d;
	}
	#keyart-1 {
		background-image: url('./images/enemies.png');
	}
	#keyart-2 {
		background-image: url('./images/title.png');
	}
	#keyart-3 {
		background-image: url('./images/char.png');
	}
	/*#keyart-4 {
		background-image: url('./images/char.png');
	}*/
	/*#keyart-logo {
		background-image: url('https://www.waryards.com/wp-content/uploads/2018/09/Logo.png');
	}*/
	#keyart-scrim {
		background-color: #0f212d;
		opacity: 0;
	}
    .main_content {
        font-family: 'Raleway', sans-serif;
        color:white;
        font-size: 20pt;
        text-align: center;
        padding: 90px;
        line-height: 30pt;
    }
    h1, h2, p {
      padding: 0 5%;
    }
    .iframe-container {
      overflow: hidden;
      padding-top: 30%;
      position: relative;
    }
}

@media only screen and (min-width: 650px) and (max-width: 1199px) {
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100px;
      width: 150px;
      opacity: 0;
      transition: .5s ease;
      background-color: black;
        margin: 0 auto;
        display: block;
    }
    
    .preview-image {
        width: 150px;
        height: 100px;
        margin: 0 auto;
        display: block;
    }
    
    
    .image-container {
      position: relative;
      width: 100%;
        padding-bottom: 30px;
    }
    .keyart, .keyart_layer {
        height: 840px;
    }

    #parallax {
        display: block;
    }

    .keyart {
        position: relative;
        z-index: 10;
      background-color: #0f212d;
    }

    .keyart_layer {
        background-position: bottom center;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }
    .keyart_layer.parallax {
        position: fixed;
    }
    #keyart-0 {
		background-image: url('./images/bgwidevtp2.png');
		background-color: #0f212d;
	}
	#keyart-1 {
		background-image: url('./images/enemies.png');
	}
	#keyart-2 {
		background-image: url('./images/title.png');
	}
	#keyart-3 {
		background-image: url('./images/char.png');
	}
	/*#keyart-4 {
		background-image: url('./images/char.png');
	}*/
	/*#keyart-logo {
		background-image: url('https://www.waryards.com/wp-content/uploads/2018/09/Logo.png');
	}*/
	#keyart-scrim {
		background-color: #0f212d;
		opacity: 0;
	}
    .main_content {
        font-family: 'Raleway', sans-serif;
        color:white;
        font-size: 20pt;
        text-align: center;
        padding: 90px;
        line-height: 30pt;
    }
    h1, h2, p {
      padding: 0 5%;
    }
    .iframe-container {
      overflow: hidden;
      padding-top: 30%;
      position: relative;
    }
}

@media only screen and (max-width: 649px) {
    
    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 160px;
      width: 250px;
      opacity: 0;
      transition: .5s ease;
      background-color: black;
        margin: 0 auto;
        display: block;
    }
    
    .preview-image {
        width: 250px;
        height: 160px;
        margin: 0 auto;
        display: block;
    }
    
    .image-container {
      position: relative;
      width: 100%;

        padding-bottom: 30px;
    }
    .keyart, .keyart_layer {
        height: 840px;
    }

    #parallax {
        display: block;
    }

    .keyart {
        position: relative;
        z-index: 10;
      background-color: #0f212d;
    }

    .keyart_layer {
        background-position: bottom center;
        background-repeat: no-repeat;
        width: 100%;
        position: absolute;
    }
    .keyart_layer.parallax {
        position: fixed;
    }
    #keyart-0 {
		background-image: url('./images/mobilebg.jpg');
		background-color: #0f212d;
        background-size: 600px;
	}
	#keyart-1 {
		background-image: url('./images/enemiesmobile.png');
        background-size: 600px;
	}
	#keyart-2 {
		background-image: url('./images/title-smallest.png');
        background-size: 600px;
	}
	#keyart-3 {
		background-image: url('./images/charmobile.png');
        background-size: 600px;
	}
	/*#keyart-4 {
		background-image: url('./images/char.png');
	}*/
	/*#keyart-logo {
		background-image: url('https://www.waryards.com/wp-content/uploads/2018/09/Logo.png');
	}*/
	#keyart-scrim {
		background-color: #0f212d;
		opacity: 0;
	}
    .main_content {
        font-family: 'Raleway', sans-serif;
        color:white;
        font-size: 13pt;
        text-align: center;
        padding: 40px;
        line-height: 20pt;
    }
    h1, h2, p {
      padding: 0;
    }
    .iframe-container {
      overflow: hidden;
      padding-top: 50%;
      position: relative;
    }
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){ 
   	#keyart-0 {
		background-image: url($baseurl + 'images/parallax/parallax0@2x.png');
		background-color: #ffaf1b;
	}
	#keyart-1 {
		background-image: url($baseurl + 'images/parallax/parallax1@2x.png');
	}
	#keyart-2 {
		background-image: url($baseurl + 'images/parallax/parallax2@2x.png');
	}
	#keyart-3 {
		background-image: url($baseurl + 'images/parallax/parallax3@2x.png');
	}
	#keyart-4 {
		background-image: url($baseurl + 'images/parallax/parallax4@2x.png');
	}
	#keyart-5 {
		background-image: url($baseurl + 'images/parallax/parallax5@2x.png');
	}
	#keyart-6 {
		background-image: url($baseurl + 'images/parallax/parallax6@2x.png');
	}
	#keyart-7 {
		background-image: url($baseurl + 'images/parallax/parallax7@2x.png');
	}
	#keyart-8 {
		background-image: url($baseurl + 'images/parallax/parallax8@2x.png');
	}
}

.trailer {

    width: 100%;
    padding-bottom: 20px;
}
.parallax__cover{
  background: #0f212d;
  display: block;
  position: absolute;
  left: 0;
  right: 0;
    margin-top: -20px;
  z-index: 2;
    box-shadow: 0px -2px 2px rgba(34,34,34,0.6);
    width: 100%;
}

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.ticker-wrap {
  width: 100%;
  overflow: hidden;
  height: 2.5rem;
  background-color: #d54141;
  box-sizing: content-box;
}
.ticker-wrap .ticker {
  display: inline-block;
  height: 4rem;
  line-height: 2.5rem;
  white-space: nowrap;
  padding-right: 100%;
  box-sizing: content-box;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: 35s;
  animation-duration: 35s;
}
.ticker-wrap .ticker__item {
  display: inline-block;
  padding: 0 2rem;
  font-size: 1.5rem;
  color: white;
  font-family: 'ethnocentric';
}

.header {
    font-family: 'ethnocentric';
    color:white;
    font-size: 25pt;
    text-align: center
}

.block2 {
    background-color: #d54141;
}

.footer-content {
    background-color: #d54141;
    padding: 20px
}

.image_block {
    width:100%;
    max-height: 500px;
    margin-top: -25px;
    background-color: black;
    object-fit: cover;
}
 
iframe {
   border: 0;
   height: 100%;
   position: absolute;
   top: 0;
   width: 90%;
    text-align: center;
    display: block;
    margin: 0 auto;
}

.sitemap {
    width: 100%;
    text-align: center;
}

body {
    font-family: 'Lato', sans-serif;
    color: #FFF;
    background: #322f30;
    -webkit-font-smoothing: antialiased;
}
a {
    text-decoration: none;
    color: #fff;
}
p > a:hover{
    color: #d9d9d9;
    text-decoration:  underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin:  1% 0 1% 0;
}
._12 {
    font-size: 1.2em;
}
._14 {
    font-size: 1.4em;
}
ul {
    padding:0;
    list-style: none;
}
.footer-social-icons {
    width: 350px;
    display:block;
    margin: 0 auto;
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
    font-size: 30pt;
    text-align: center;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-facebook {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #d54141;
}
.fa-facebook:hover {
    background-color: #3d5b99;
}
.fa-twitter {
    padding:10px 12px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #d54141;
}
.fa-twitter:hover {
    background-color: #00aced;
}
.fa-rss {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #d54141;
}
.fa-rss:hover {
    background-color: #eb8231;
}

.fa-instagram {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #d54141;
}
.fa-instagram:hover {
    background-color: #eb8231;
}
.fa-youtube {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #d54141;
}
.fa-youtube:hover {
    background-color: #e64a41;
}
.fa-linkedin {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #d54141;
}
.fa-linkedin:hover {
    background-color: #0073a4;
}
.fa-github {
    padding:10px 14px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #d54141;
}
.fa-github:hover {
    background-color: #5a32a3;
}

#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 input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif;font-size: 15px;border: 1px solid #ABB0B2;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: #343434;background-color: #fff;box-sizing:border-box;height:32px;padding: 0px 0.4em;display: inline-block;margin: 0;width:350px;vertical-align:top;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */

	#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
            #mc_embed_signup .custom-button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #d54141; 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;-webkit-appearance: none;}
#mc_embed_signup .custom-button:hover {background-color:#80222b; cursor:pointer;}
            #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;}

@media (max-width: 768px) {
    #mc_embed_signup input.email {width:70%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}

/*Media Kit Overlay*/

.overlay-text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.image-container:hover .overlay {
  opacity: 0.8;
}