html {
    box-sizing: border-box; 
    background-color: #14151b;
    font-family: 'Blender Pro', sans-serif;
    font-size: 16px;
    height: 100%;
}

*, *::after, *::before {
  box-sizing: inherit; }

/* -------------------------------- 

Primary style

-------------------------------- */


body {
  background-color: #e1e4e6;  
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  line-height: 1.45;
}

/* Typography
--------------------------------------------- */
body {
  color: darkgray;
  font-family: "Blender Pro",sans-serif;
  font-size: 1em;
  line-height: 2;
}

h1,h2,h3,h4,h5,h6 {
   margin: 1.414rem 0 0.5rem;
  font-weight: bold; }

h1 {
    margin-top: 0;
  font-size: 3.1573345183em; }

h2 {
  font-size: 2.368593037em; }

h3 {
  font-size: 1.776889em; }

p {
  margin: 0 0 1.3rem;
  font-weight: 400;
color: darkgray;}


a {
  color: #ff4333;
  text-decoration: none;
  transition: color 200ms ease-in-out-quad; }

a:active, a:focus, a:hover {
    color: #bf4243; }


.align-center{
    text-align: center;
}

button{
    font-family: 'Blender Pro';
}


.live{
    color: forestgreen
}

img {
    max-width: 100%;
}

.error, .alert-danger {
  color: #ff0000;
}

/* Header Nav
--------------------------------------------- */

#banner{
    overflow: hidden;
    background: #fff;
    z-index: 100;
    height: 4.375rem;
    
    -webkit-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 10px 25px 0px rgba(0,0,0,0.1);
}

#banner .logo{
    float: left;
    height: 100%;
    padding: .625rem 2rem .625rem 2rem;
    
}

#banner .logo span{
    display: none;
}


#banner.dark{
    background: #21242A;
}



.logo img{
	height: 90%;
	padding: 0 20px;
}



#main-nav, #second-nav{
    display: block;
    margin: auto 2em;
    padding-top: .5rem;
}

#main-nav{
    float: left;
}

#main-nav ul {
	height: 100%;
	
}
#main-nav ul li, #footer-nav ul li{
	display: inline-block;
    
}

#second-nav{
    float: right;
}

#second-nav #social {
    float: left;
    padding-right: 1.5em;
}

#second-nav #account {
    float: right;
}


#main-nav ul li a, #second-nav ul li a{
	display: block;
	padding:  .5em 2em;
/*	height: 100%;*/
    font-size: 1em;
	border-bottom-width: 0;
	letter-spacing: 0.5px;
	text-transform: uppercase;
    text-align: center;
}

.updates #updates{
    border-bottom: 1px solid #fff;
}

.btn_sign-up {
	box-shadow:inset 0px 1px 8px 0px #ff542e;
	background:linear-gradient(to bottom, #ff0d1d 5%, #9f0c1b 100%);
	background-color:#ff0d1d;
	border-radius:8px;
	border:2px solid #1f1918;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:24px;
	padding:16px 36px;
	text-decoration:none;
	text-shadow:0px 2px 2px #8a111b;
}
.btn_sign-up:hover {
	background:linear-gradient(to bottom, #9f0c1b 5%, #ff0d1d 100%);
	background-color:#9f0c1b;
    color:#ffffff;
}
.btn_sign-up:active {
	position:relative;
	top:1px;
    color:#eee;
}

.btn_sign-up:focus{
    color:#eee;
}

.account_btn {
	box-shadow: 0px 3px 0px 0px #dedede;
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	background-color:#ffffff;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-size:1em;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
 }
.account_btn:hover {
	background:linear-gradient(to bottom, #f6f6f6 5%, #ffffff 100%);
	background-color:#f6f6f6;
}
.account_btn:active {
	position:relative;
	top:1px;
}


.popup-trigger {
  z-index: 10;
  width: 180px;
  margin: auto;
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.05);
}


a.play_now{
    color: #fff;
    font-size: 2rem;
    padding: 20px;
    text-align: center;
}

.play_now{
    display: block;
    width: 306px;
    height: 108px;
    background: transparent url(../images/btn_red.png)  no-repeat  0px 10px ;
    border: none;
    outline: none;
    cursor: pointer;
    transition: opacity 0.3s;
}

.play_now:hover, .play_now:focus{
    background-position: 0 -100px;
    
}

.glow-on-hover {
    width: 306px;
    height: 108px;
    border: none;
    outline: none;
    color: #fff;
    background: transparent url(../images/btn_red.png)  no-repeat  0px 10px ;
    cursor: pointer;
    position: relative;
    z-index: 0;
    border-radius: 16px;
}

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #E33627, #7E1C11, #421814, #DE3D2B, #F05648, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: 6px;
    left:10px;
    background-size: 300%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% - 20px);
    height: calc(100% - 12px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 16px;
}

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
    background: transparent url(../images/btn_red.png)  no-repeat  0px -100px ;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
  background: transparent url(../images/btn_red.png)  no-repeat  0px 10px ;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}

/* Structure
--------------------------------------------- */

main {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.section {
  position: relative;
  height: 100vh;
   
}

.section-90 {
  position: relative;
  height: 90vh;
   
}

.section-3q-vh {
  position: relative;
  height: 75vh;
   
}

.section-half-vh {
  position: relative;
  height: 50vh; 
}


.section_bg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
}

.section .content, .feature .content{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    color: white;
}

.feature{position: relative;}
.feature_info{padding: 80px 0}
.feature_img{}
.feature_info p{
    color: white;
    text-shadow: -1px -1px 0 rgba(0, 0, 35, 0.8), -1px 1px 0 rgba(0, 0, 35, 0.8), 1px -1px 0 rgba(0, 0, 35, 0.8), 1px 1px 0 rgba(0, 0, 35, 0.8);
    line-height: 1.5rem; 
    font-size: 1.375rem;
    margin-top: 2em
}

.flex-container{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.flex-container.content_bottom {
    align-items: flex-end;
}

.flex-end{
    justify-content: flex-end;
}

.content_stack{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}

.content_stack_left .section_title{
    text-align: left;
    margin-bottom: 2em;
}

.content_bottom {
    position: absolute;
    bottom: 0;
    color: #f1f1f1;
    width: 100%;
    padding: 20px;
    text-align: center;
    z-index: 1;
   
}

.section_title{
    display: block;
    text-align: center;
    width: 100%;
    align-items: center;
    justify-content: center; 
    color: white;
    text-shadow: -1px 2px 4px rgba(0, 0, 35, 0.8);
    text-transform: uppercase;
}

.feature_info h3, .feature_info h2{
   color: white;
    text-shadow: -1px 2px 4px rgba(0, 0, 35, 0.8); 
    text-transform: uppercase;
    margin: 0;
} 

.section_title h3, .feature_info h3{
    font-size: 1.675rem;
    line-height: 2rem;
}
.section_title h2, .feature_info h2{
    font-size: 4rem;
    text-transform: uppercase;
    line-height: 4rem;
}

.feature_info .hero-caption {
    font-size: 3rem;
    margin-bottom: 3rem;
    text-align: center;
}

.left_align{
    text-align: left;
}

.right_align{
    text-align: right;
}

.right_align .section_title{
    text-align: right
}

.dark-theme{ background: url(../images/bg.jpg);}

#iw_hero_main {
    background: #35383d url(../images/iw_hero_main.jpg)  no-repeat  top/cover;
    
}

#iw_base {
    background: #14151b url(../images/iw_bg_mecha.jpg)  no-repeat  top/cover ;
}

#iw_battles {
    background: #14151b url(../images/iw_bg_battles.jpg)  no-repeat  top/cover ;
}

#iw_heroes {
    background: #14151b url(../images/iw_bg_hero_infiltrate.jpg)  no-repeat  top/cover ;
}

#iw_units {
    background: #14151b url(../images/iw_bg_hero_faceoff.jpg)  no-repeat  top/cover ;
}

#iw_updates {
    background: #14151b url(../images/iw_bg_update22.jpg)  no-repeat  top/cover ;
}

#iw_vs {
    background: #14151b url(../images/iw_hero_versus.jpg)  no-repeat  top/cover ;
}

#iw_404 {
    background: #14151b url(../images/blur_bg.jpg)  no-repeat  top/cover ;
}

#iw_heroes .flex-container{
    align-items: flex-start;
    justify-content: flex-start;
}

#iw_battles .flex-container{
    align-items: flex-end;
    flex-direction: row;
    height: 100%;
}


#iw_heroes .feature_info{
    text-align: left;
    align-items: flex-start;
}

#iw_heroes .content_stack{
    align-items: flex-start;
}

#iw_heroes .section_title{
    text-align: left;
    margin-bottom: 2em;
}

#iw_hero_main::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0px;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, rgb(36, 72, 98) 1%, rgba(0, 9, 19, 0) 100%);
    z-index: 0;
}

#iw_hero_main .feature_info{
    padding: 200px 0 100px;
    height: 100%;
    justify-content: flex-end;
    z-index: 2;
}

article{
    padding: 20px;
    font-size: 1.25em;
}

article ul{
    list-style: disc;
    margin: 30px;
}

ul.feature-updates span{
    color: white;
    font-weight: 700;
    
}

.deco-title {
    padding: 10px 0;
    color: darkgray;
    display: table;
    font-size: 1.2rem;
}
.deco-title:after,
.deco-title:before {
    background-image: -webkit-linear-gradient(transparent 50%, darkgray 45%, darkgray 55%, transparent 50%);
    background-image:    -moz-linear-gradient(transparent 50%, darkgray 45%, darkgray 55%, transparent 50%);
    background-image:     -ms-linear-gradient(transparent 50%, darkgray 45%, darkgray 55%, transparent 50%);
    background-image:      -o-linear-gradient(transparent 50%, darkgray 45%, darkgray 55%, transparent 50%);
    background-image:         linear-gradient(transparent 50%, darkgray 45%, darkgray 55%, transparent 50%);
    content: '';
    display: table-cell;
    width: 50%;
/* Everything below allows us to have a little bit of space between the title and the decoration */
    -webkit-background-clip: padding;
       -moz-background-clip: padding;
            background-clip: padding;
}
.deco-title:after {
    border-left: 1em solid transparent;
}
.deco-title:before {
    border-right: 1em solid transparent;
}

/* Column Classes
--------------------------------------------- */
.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 2.564102564102564%; }

.one-half,
.three-sixths,
.two-fourths {
  width: 48.717948717948715%; }

.one-third,
.two-sixths {
  width: 31.623931623931625%; }

.four-sixths,
.two-thirds {
  width: 65.81196581196582%; }

.one-fourth {
  width: 23.076923076923077%; }

.three-fourths {
  width: 74.35897435897436%; }

.one-sixth {
  width: 14.52991452991453%; }

.five-sixths {
  width: 82.90598290598291%; }

.first {
  clear: both;
  margin-left: 0; }

@media screen and (max-width: 63.825em) {
  .five-sixths,
  .four-sixths,
  .one-fourth,
  .one-half,
  .one-sixth,
  .one-third,
  .three-fourths,
  .three-sixths,
  .two-fourths,
  .two-sixths,
  .two-thirds {
    float: none;
    margin-left: 0;
    width: 100%; } }


/* Video Section
---------------------------------------------------------------------------------------------------- */

.video{
    overflow: hidden;
}
.feature_video{
    padding: 0 0 10em 6em;
}

.feature_video video{
    width: 100%;
}

.content_shade {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

.playpause_btn {
    position: absolute;
    display: block;
    margin: 0 auto;
    background: transparent;
    box-sizing: border-box;
    width: 0;
    height: 42px;
    border-color: transparent transparent transparent #eee;
    transition: 100ms all ease;
   
    transform-origin: center;
    transform: translate(50%, 40%) scale(1);
    cursor: pointer;
    border-style: solid;
    border-width: 20px 0 20px 30px;
}
.playpause_btn.paused {
  border-style: double;
  border-width: 0 0 0 30px;
}
.playpause_btn:hover {
  border-color: transparent transparent transparent #dbdbdb;
    transform: translate(50%, 40%) scale(.95);
}
.playpause_btn:focus{
    outline: none;
    box-shadow: 0
}
.pp_btn{
    position: relative;
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 100%;
    border: 4px solid #fff;
    transform-origin: center;
    transform: translate(0, 0) scale(1);
    cursor: pointer;
}

 .rc{
 width: 640px;
 height: 640px;
 border-radius: 100%;
 -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
 -webkit-transform: rotate(0.000001deg); 
 -webkit-border-radius: 100%; 
 -moz-border-radius: 100%;
}

.video-circle {
border-radius: 50%;
object-fit: cover;
}

.vid_controls video{
    border: 2px solid #fff;
    
}

/* Site Footer
---------------------------------------------------------------------------------------------------- */
.site-footer {
    background-color: #14151b;
    display: block;
}

.site-footer a {
  border-bottom-width: 0;
  color: #ff4333; }

.site-footer a:focus,
.site-footer a:hover {
  color: #FF5859;
  }

.site-footer p {
  font-size: 14px;
  font-size: .875em;
  margin-bottom: 0; }


#footer-nav{
    height: 80px;
}

#footer-nav ul li a{
    display: block;
	padding:  .5em 2em;
	height: 100%;
    color: #ff4333;
    font-size: 1em;
	border-bottom-width: 0;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}



#download-nav li {
    display: inline-block;
    margin-left: 10px;
}

#download-nav li .first{
    margin-left: 0;
}

#download-nav, #footer-nav, .social-nav, .pw-logo {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#download-nav {
    padding: 2.5em 0;
}

.social-nav {
    padding: 0 1em;
}

.social-nav p {
    padding: 0.3em 1em 0 0;
    color: #ff4333;
    text-transform: uppercase;
}


/* Social Media  */

ul#sm{
    margin: 0 auto;
    display: inline-block;
}

ul#sm li {
    display: inline;
    float: left;
    padding: 0;
}

ul#sm li a {
    padding: 0.2em 0;
}

.sm-ico {
    width: 50px;
}


.pw-logo{
height: 80px
}

.pw-logo img{
max-width: 250px;
    height: auto
}

.toc{
    background-color: #000;
    padding: 20px;
    
}


.section_title::before, .section_title::after {
    content: "";
    flex: 1 1 100%;
    height: 1px;
    background-color: rgb(36, 44, 54);
}

.fade_end::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0px;
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, rgb(20, 21, 27) 1%, rgba(0, 9, 19, 0) 100%);
}



/* Tablet (iPad) 768 - 1024
--------------------------------------------- */ 
@media only screen and (min-device-width : 48em) and (max-device-width : 64em)  {
    
    #main-nav, #second-nav{
    display: block;
    margin: 0;
    padding-top: 0.75rem;
    }
    
    #second-nav{
        margin-right: 10px;
        padding-top: 0.5rem;
    }

  
  #iw_heroes .flex-container{
    align-items: flex-end;
    flex-direction: column;
    height: 100%;
    background: linear-gradient(to top, rgb(20, 21, 27) 1%, rgba(0, 9, 19, 0) 100%);
    }


    #iw_heroes .feature_info{
        padding: 100px 40px;
        align-self: flex-end;
        text-align: center;
    }
    
    #iw_heroes .content_stack{
    align-items: center;
    }
    
}


/* Mobile < 768
--------------------------------------------- */ 
@media screen and (max-width: 47.938em) /* Mobile 767 */{
    #banner .logo{
        margin: 0 auto;
        display: block;
        text-align: center;
        margin-left: 25%;
    }
    .feature_info .hero-caption{
        line-height:3rem;
        font-size: 2.5rem;
        z-index: 2;
    }
    
    .section_title h2, .feature_info h2{
        font-size: 2.75rem; 
        margin-top: 0;
        line-height: 2.75rem}
    .section_title h3, .feature_info h3{font-size: 1.275rem}
    .feature_info p{margin-top: 1em}
    .feature_video{display: none;}
    
    #iw_hero_main .feature_info, #iw_base .feature_info, #iw_battles .feature_info{
    padding: 30px 0px;
}   
    #iw_heroes .play_now{
        display: none;
    }
    
    #footer-nav ul li a{
	padding:  .75em;
    font-size: 1em;
}
    #footer-nav{
    padding: 20px 0;    
    }
    
    #download-nav li {
    display: inline-block;
    margin-left: 0px;
}
}

.feature-updates{
    margin: 10px 0;
        line-height: 1.75rem;
    
    
}

article {
    padding-top: 0;
}

#playerframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
}

/* Large screen 1024+
--------------------------------------------- */ 
@media only screen and (min-device-width : 64.025em)  {


}