/*
    Document   : style.css
    Created on : Jun 27, 2013, 5:14:15 PM
    Author     : senol
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/* Layout
 ------------ */
@font-face {
                font-family: 'ScenePro-Medium';
                src: url('../../assets/fonts/scenepromedium.eot');
                src: local('ScenePro-Medium'), url('../../assets/fonts/scenepromedium.woff') format('woff'), url('../../assets/fonts/scenepromedium.ttf') format('truetype'), url('../../assets/fonts/scenepromedium.svg') format('svg');
                font-weight: normal;
                font-style: normal;
}



@font-face {
                font-family: 'ScenePro-Light';
                src: url('../../assets/fonts/sceneprolight.eot');
                src: local('ScenePro-Light'), url('../../assets/fonts/sceneprolight.woff') format('woff'), url('../../assets/fonts/sceneprolight.ttf') format('truetype'), url('../../assets/fonts/sceneprolight.svg') format('svg');
                font-weight: normal;
                font-style: normal;
}

@font-face {font-family: 'AvenirLTStd-Medium';src: url('../../assets/fonts/28941F_0_0.eot');src: url('../../assets/fonts/28941F_0_0.eot?#iefix') format('embedded-opentype'),url('../../assets/fonts/28941F_0_0.woff') format('woff'),url('../../assetsfonts/28941F_0_0.ttf') format('truetype');}
 

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
  video {
    display: none;
  }
  #on-mobile-fallback {
    display: block;
  }
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  video {
    display: none;
  }
  #on-mobile-fallback {
    display: block;
  }
}


/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
    .gamescom_content_wrapper{
        height:auto !important;
    }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
    .gamescom_content_wrapper{
        height:auto !important;
    }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
    .gamescom_content_wrapper{
        height:auto !important;

    }
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}


body {
    font: 16px/24px "AvenirLTStd-Medium", Arial, sans-serif;
    padding: 0;
    margin: 0;
      background-color:#000;
     color: #fff;
    visibility:visible;
    -webkit-background-size: 2000px 1400px;
    min-width: 1260px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased; 
}
a {
    outline: none !important;
    text-decoration: none;
}

h1 {
      font-size: 120px;
      text-transform: uppercase;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    text-align: center;
    margin-bottom:0;
    text-shadow: 0 6px 0 #4A265F;
    line-height: 100%;
    

}

h2 {
    font-size: 72px;
    line-height: 1em;
    margin: 10px auto;
    padding-top: 50px;
    position: relative;
    text-align: center;
    text-shadow: 0 4px 0 #4A265F;
    text-transform: uppercase;
}

h3 {
    font-size: 26px;
    letter-spacing: 16px;
    line-height: 1.5em;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
    color:#121325;
    text-transform: uppercase;
    font-weight: normal;

}

p {
    position:relative;
}

  .box{
    -webkit-animation:rotate 600ms 1s linear infinite;
     animation: rotate 600ms 1s linear infinite;
    -o-animation: rotate 600ms 1s linear infinite;
    -moz-animation: rotate 600ms 1s linear infinite;
  }


   @-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }

  @keyframes rotate {
    0% { transform: rotate(0deg);}
    100% { transform: rotate(360deg);}
  }

  @-moz-keyframes rotate{
    0%{
        -moz-transform:scale(1) rotate(0deg);
    }
    100%{
        -moz-transform:scale(1) rotate(360deg);
    }
  }
 .characters{
    width:100%;
    height:1001px;
     background-image: url(/assets/img/aof_characters_bg.jpg);
     background-position: center top;
     background-repeat: no-repeat;
     position:relative;

 }


  .card > #inner:hover{
    background-position:0% 300%;
    -webkit-transition: all 300ms ease;
   -o-transition: all 300ms ease;
   -moz-transition: all 300ms ease;
   transition: all 300ms ease;

  }

  #inner .character{
    margin-top:20px;
    margin-left:20px;
    border-radius: 5px;
    position: absolute;
    background-color: #000;
   
    background-repeat:no-repeat;
      width:293px;
    height:440px;
     position:relative;
    background-size:cover;
    box-shadow: inset 0px 80px 80px rgba(0,0,0,0.7),
                inset 0px -80px 80px rgba(0,0,0,0.7);
   -webkit-transition: all 300ms ease;
   -o-transition: all 300ms ease;
   -moz-transition: all 300ms ease;
   transition: all 300ms ease;
   overflow:hidden;
   
  }
  #inner .character:hover{

    box-shadow: inset 0px 80px 80px rgba(0,0,0,0.1),
                inset 0px -80px 80px rgba(0,0,0,0.1);

  }


  /*button nav*/
  .button_nav{
    position:relative;
    float:right;
    width:221px;
    height:75px;
    margin-left: -150px; /*-150px*/
    display: table;
    box-sizing:border-box;
    background-image: url(/assets/img/buttonbg_new.jpg);
    background-size:cover;
    text-transform: uppercase;
    cursor: pointer;
  }

   .button_nav a {
   display: table-cell;
   vertical-align: middle;
   text-align:center;
   height:100%;
   width:100%;
   color:#fff;
   font-size: 20px;
   }

   button_nav a:hover {
   color:#fff !important;

   }

   button_nav a:active {
   color:#fff !important;

   }
   button_nav a:link {
   color:#fff !important;

   }

  .button_nav:hover{
      box-shadow: inset 0px 40px 80px rgba(255,255,255,0.1);
  }
  .button_nav:after{
    position:absolute;
    width:100%;
    height:100%;
    content: "";
    pointer-events: none;
    top:0;
    left:0;
    background-image: url("/assets/img/buttonhover_nav.png");
    background-repeat: no-repeat;
    background-position: 350% 0;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
  }

  .button_nav:hover:after{
    background-position: -350% 0;
  }

  .button_nav:active{
     box-shadow: inset 40px 80px rgba(0,0,0,0.1);
     margin-bottom: -2px;
     -webkit-transition: all 0ms linear;
     -moz-transition: all 0ms linear;
     -o-transition: all 0ms linear;
     transition: all 0ms linear;
  }



 /*buton header */

  .button{
    position:relative;
    width:278px;
    height:64px;
    display:table;
    background-size:cover;
    text-transform: uppercase;
    margin-bottom: 20px;
    cursor: pointer;
    float:left;
    margin-right:20px;

  }
  .button-orange {
          background-image: url(/assets/img/button-orange.png);
  }
   .button a {
   display:table-cell;
   vertical-align: middle;
   text-align: center;
   height:100%;
   width:100%;
   color:#fff;
   font-size: 20px;
   }


   .button a:hover {
   color:#fff !important;

   }

   .button a:active {
   color:#fff !important;

   }
   .button a:link {
   color:#fff !important;

   }

  .button:hover{
/*      box-shadow: inset 0px 1px 0px #991399,
                0px 3px 5px rgba(0,0,0,0.5),
                inset 0px 40px 80px rgba(153, 19, 153, 0.5);
*/
      box-shadow: inset 0px 40px 80px rgba(255,255,255,0.1);
  }
  .button::after{
    position:absolute;
    width:100%;
    height:64px;
    content: '';
    pointer-events: none;
    top:0;
    left:0;
    background-image: url("/assets/img/buttonhover.png");
    background-repeat: no-repeat;
    background-position: 435% 0;
    -webkit-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    transition: all 400ms ease;
    margin-bottom: 20px;
  }

  .button:hover::after{
    background-position: -435% 0;
  }

  .button:active{
   /*   box-shadow: inset 0px 1px 0px rgba(153, 19, 153, 0.5),
                  inset 0px 40px 80px rgba(82,10,82, 0.5);*/
      box-shadow: inset 40px 80px rgba(0,0,0,0.1);
     -webkit-transition: all 0ms linear;
     -moz-transition: all 0ms linear;
     -o-transition: all 0ms linear;
     transition: all 0ms linear;
     margin-bottom: 20px;
  }




  #cardwrapper{
    height:600px;
    padding-top:180px;
  }

  .card{
    position:absolute;
    width:332px;
    height:479px;
    border-radius:20px;
    background-image:url("/assets/img/cardtexture.png");
    box-shadow: 0 0px 10px rgba(0,0,0,0.5);
    background-color:transparent; /*#1b1435;*/
    -webkit-transition: all 300ms ease;
    -webkit-transform: scale(0.7);
    -moz-transition: all 300ms ease;
    -moz-transform: scale(0.7);
    -o-transition: all 300ms ease;
    -o-transform: scale(0.7);
    transition: all 300ms ease;
    transform: scale(0.7);

  }

  #inner{
    width:332px;;
    height:480px;
    position:absolute;
    background-image: url("/assets/img/cardhover.png");
    background-repeat: no-repeat;
    background-position: 0% -200%;
    border-radius: 20px;
    overflow:hidden;
    z-index: 3;
  }




  #card-1{
    -webkit-transform: translate(-30px) scale(0.75) rotate(-3deg);
    -moz-transform: translate(-30px) scale(0.75) rotate(-3deg);
    -o-transform: translate(-30px) scale(0.75) rotate(-3deg);
    transform: translate(-30px) scale(0.75) rotate(-3deg);
    z-index:98;
   }

  #card-1:hover{
    -webkit-transform: translateX(0px) scale(1);
    -moz-transform: translateX(0px) scale(1);
    -o-transform: translate(0px) scale(1);
    transform: translate(0px) scale(1);

   }

  #card-2{
    -webkit-transform: translate(210px) scale(0.75) rotate(1deg);
    -moz-transform: translate(210px) scale(0.75) rotate(1deg);
    -o-transform: translate(210px) scale(0.75) rotate(1deg);
    transform: translate(210px) scale(0.75) rotate(1deg);
    z-index:99;
   }
  #card-2:hover{
    -webkit-transform: translateX(230px) scale(1);
    -moz-transform: translateX(230px) scale(1);
    -o-transform: translate(230px) scale(1);
    transform: translate(230px) scale(1);
   }

  #card-3{
    -webkit-transform: translate(460px) scale(0.75) rotate(-3deg);
    -moz-transform: translate(460px) scale(0.75) rotate(-3deg);
    -o-transform: translate(460px) scale(0.75) rotate(-3deg);
    transform: translate(460px) scale(0.75) rotate(-3deg);
    z-index:100;
   }
  #card-3:hover{
    -webkit-transform: translateX(460px) scale(1);
    -moz-transform: translateX(460px) scale(1);
    -o-transform: translate(460px) scale(1);
    transform: translate(460px) scale(1);
   }

  #card-4{
    -webkit-transform: translate(700px) scale(0.75) rotate(3deg);
    -moz-transform: translate(700px) scale(0.75) rotate(3deg);
    -o-transform: translate(700px) scale(0.75) rotate(3deg);
    transform: translate(700px) scale(0.75) rotate(3deg);
    z-index:99;
   }
  #card-4:hover{
    -webkit-transform: translateX(700px) scale(1);
    -moz-transform: translateX(700px) scale(1);
    -o-transform: translate(700px) scale(1);
    transform: translate(700px) scale(1);
   }


  #card-5{
    -webkit-transform: translate(950px) scale(0.75) rotate(-4deg);
    -moz-transform: translate(950px) scale(0.75) rotate(-4deg);
    -o-transform: translate(950px) scale(0.75) rotate(-4deg);
    transform: translate(950px) scale(0.75) rotate(-4deg);
    z-index:98;
   }
  #card-5:hover{
    -webkit-transform: translateX(920px) scale(1);
    -moz-transform: translateX(920px) scale(1);
    -o-transform: translate(920px) scale(1);
    transform: translate(920px) scale(1);
   }


.card-hover:hover{
    cursor: pointer;
/*    box-shadow: 0 5px 15px rgba(0,0,0,0.5);*/
    z-index:103 !important;
  }

.opencard{
    
    -webkit-transform: translateX(460px) scale(1.3)rotate(0deg)!important;
    -moz-transform: translateX(460px) scale(1.3)rotate(0deg)!important;
    -o-transform: translateX(460px) scale(1.3)rotate(0deg)!important;
    transform: translateX(460px) scale(1.3)rotate(0deg)!important;
    z-index:999999 !important;
    margin-top: -240px;
    position: fixed !important;
    top: 50%;

  }

  .remove_char_name{
  display: none;
  }


  /*OPEN CARD*/
  .showcaption h4 {
    text-transform: uppercase;
    color:#da973e;
    font-size:20px;
    text-align: left;
    font-weight: normal;
}

.char_prop {
    font-size:11px;
    padding-top:20px;
    line-height: 20px;
}

.prop_name {
        min-height: 130px;
}

.prop_name dt {
    float: left;
    text-align: left;
    text-transform: uppercase;
    color: #DA973E;
}

.prop_name dd {
    margin-left: 90px;
    text-align: left;
    width: 180px;
}

.prop_spec {
    text-align: left;

}

.prop_desc {
    text-align: left;
    float: left;
    padding-top: 5px;
    width:280px;
    padding-right:10px;
    
    
}

.dark-bg{
  display:none;
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:105;
  background: rgba(0,0,0,0.7);
  }
.show{
  display:block;
}
.caption{
    background: -moz-linear-gradient(top,  rgba(0,0,0,0.6) 0%, rgba(0,0,0,1) 40%, rgba(0,0,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(40%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1)));
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 100%);
    background: -o-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 100%);
    background: -ms-linear-gradient(top,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom,  rgba(0,0,0,0.6) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99000000', endColorstr='#000000',GradientType=0 );

  height:100%;
  top:120%;
  position:absolute;
  opacity:0;
   width:100%;
   padding:20px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.showcaption{
  opacity:1;
  height:100%;
  top:13%;

}

.opencard #inner .character{
  box-shadow:none;
}


.opencard #inner{
  background:none;
}
.opencard #inner:hover{
    background:none;
  }



/* CAHNGE BG IMAGES OF CARDS */
   #card-1 .character{
    background-image:url(/assets/img/fenrir.jpg);
   }
  #card-2 .character{
    background-image:url(/assets/img/robin.jpg);
   }

   #card-3 .character{
    background-image:url(/assets/img/tesla.jpg);
   }

   #card-4 .character{
    background-image:url(/assets/img/cleopatra.jpg);
   }

   #card-5 .character{
    background-image:url(/assets/img/ridinghood.jpg);
   }


/* ALWAYS POSITION THE FACE OF THE CHARACTER IN THE UPPER PART OF THE CARD SO ITS VISIBLE */

  #card-1.opencard #inner .character{
      background-position: 0px -140px;
   }

   #card-2.opencard #inner .character{
      background-position: 0px -120px;
   }

   #card-3.opencard #inner .character{
      background-position: 0px -80px;
   }


  #card-4.opencard #inner .character{
      background-position: 0px -65px;
   }


  #card-5.opencard #inner .character{
      background-position: 0px -120px;
   }

   #inner .char_name {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: -380px;
    height: 60px;
    left: 0;
    position: relative;
    text-transform: uppercase;
    padding-top:18px;
    color:#da973e;
    font-size:22px;
}



/* VIDEO CONTAINER */
/* VIDEO CONTAINER */
#video-container {
  height: 796px;
  max-height: 796px;
  position: relative;
  min-height:500px; /*350*/
  max-height: 796px !important;
}
#video-container > .sub-container {
  overflow: hidden;
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  min-width: 894px;
  min-height: 350px;
}
#video-container > .sub-container > .overlay {
  bottom: 0;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  background: url("/data/media/video/aof-video-bg.jpg") center center no-repeat;
}
#video-container > .sub-container > .overlay > video {
  width:100%;
  position: relative;
  
}

#video-container > .sub-container > #logo_container {
  height: 100%;
  width: 100%;
  z-index: 104;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

#video-container > .sub-container .hero {
    height: 320px;
    background: transparent url(/assets/img/aof_logo_header.png?v=1) center center no-repeat;
    position: relative;
    top:50%;
    margin-top:-258px;
}

.button_trailer {
    top:65%;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

.trailer_link {
    position: relative;
    text-align: center;
    margin-top:20px;
    text-shadow: 0 1px 0 #4a265f

}

.trailer_link a {
    color:#da973e;
}

.trailer_link a:hover {
    color:#f2a744 !important;
    cursor:pointer;
}
/* NAVIGATION */
.navi_container {
    width:1260px;
    height:78px;
    margin:0 auto;

}

#navigation_wrapper { width:100%;  }
#navigation { 
    width:100%;
    height:75px;
    background-image: url(/assets/img/aof_nav_bar.jpg?v=1);
    z-index:104;
    -webkit-box-shadow: 0 0 8px 1px #130E26;
       -moz-box-shadow: 0 0 8px 1px #130E26;
            box-shadow: 0 0 8px 1px #130E26;
} /*99999*/
#navigation ul { list-style:none; margin:0 auto 0 50px; height:100%; float:left; } /*50px*/
#navigation ul li { margin:0; padding:0; display:inline-block;  }

#navigation ul li a {
display: block;
float: left;
padding: 28px 8px 0;
margin-right:20px;
font-size: 18px;
color: white;
text-decoration: none;

}

#navigation ul li.active a {
color:#da973e !important;

}

#navigation ul li a:hover {
color:#da973e !important;

}


/*scrolling changing menu*/
#navigation ul li.navi_active {
color:#da973e !important;

}


#navigation ul li a .navi_active {
color:#da973e !important;

}



#navigation ul li a:hover, #navigation ul li a.selected { color:#fff; }

.navigation_logo {
   width: 212px;
    height:36px;
    background: transparent url(/assets/img/aof_logo_nav.png?v=1);
    cursor: pointer;
    float:left;
    margin-top:22px;
    margin-right:20px;
    background-repeat: no-repeat;
}

.navigation_logo a {
    display:inline-block;
    height:100%;
    width:100%;
}


.nav_social {
    float: left;
    padding-left: 10px;
    padding-top: 24px;
}

.nav_social > div {
    float:left;
    margin-right: 35px;
}

.nav_gface {
    background: transparent url(/assets/img/aof_nav_gface.png?v=1);
    width:28px;
    height:29px;
    background-repeat: no-repeat;
    background-position: 0 0;

    
}

.nav_gface:hover {
    background-position: 0 -29px;
    cursor:pointer;
}

.nav_tw {
    background: transparent url(/assets/img/aof_nav_twitter.png?v=1);
    width:30px;
    height:29px;
    background-repeat: no-repeat;
    background-position: 0 0;


}

.nav_tw:hover {
    background-position: 0 -29px;
    cursor:pointer;
}

.nav_fb {
    background: transparent url(/assets/img/aof_nav_fb.png?v=1);
    width:16px;
    height:29px;
    background-repeat: no-repeat;
    background-position: 0 0;


}

.nav_fb:hover {
    background-position: 0 -29px;
    cursor:pointer;
}

.navigation_play_free {
   width: 222px;
    height: 90px;
    position:relative;
    left:13px;
    background: transparent url(/assets/img/button-nav-play.png?v=1);
    float:right;
    cursor: pointer;
}
.navigation_play_free a {
    display: inline-block;
    height: 100%;
    width: 100%;
}
.navigation_play_free:hover {
    background-position:  0 90px !important;
    cursor: pointer;
}

.fb-like {
    float: left;
    height: 20px;
    padding-top: 30px;
    width: 100px;
    
}
.twitter-share {
    padding-left: 70px;
    padding-right: 20px;
    padding-top: 30px;
    width: 100px;
    float: left;
    height:20px;
}

/* CONTENT */

.clear {
    clear: both;
}

.aof_hr_bg {
   width: 100%;
   height: 136px;
   background: transparent url(/assets/img/aof_hr.png?v=1);
   background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: -84px;
    z-index:90;
}

.aof_hr_center {
   width: 118px;
   height: 118px;
   background: transparent url(/assets/img/aof_hr_center.png?v=1);
   position:relative;
   margin-left:auto;
   margin-right:auto;
}
.bg_opa::before {
    background-color: rgba(20, 22, 31, 0.7);
    bottom: 0;
    content: "";
    /*height: 460px;*/
    left: 0;
    position: absolute;
    right: 0;
    top: 320px;
    width: 100%;
    z-index: 0;
}
.bg_opa {
   
    padding: 50px 10px;
}
.bg_opa::after {
    position: relative;
    z-index: 3;
}
/* BLOCK 1 - INTRO */


.block_1_text {
    padding-top: 4px;
    width: 641px;
    font-size:18px;
    text-align: center;

}


/* BLOCK 2 - team up */
.block_2 {
    width:100%;
    height:1000px;
    background-image: url(/assets/img/aof_coop_bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    position:relative;
    z-index:79;
}

.block_2_title {
    margin-left: auto;
    margin-right: auto;
    padding-top: 75px;
    padding-bottom:40px;
    position: relative;
    text-align: center;
    width: 980px;

}

.block_2_content {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 760px;
    padding-top: 320px;
}

.block_2_content_left {
    width:768px;
    height:256px;
    background-image: url();
    background-position: top center;
    background-repeat: no-repeat;
    margin-bottom:50px;
    float:left;
}

.block_2_content_right {
    width:502px;
    height:256px;
    background-image: url();
    background-position: top center;
    margin-bottom:50px;
    float: right;
}


.block_2_text {
    padding-top: 20px;
    width: 651px;
    font-size:18px;
    text-align: center;
}
.block_2_text b {
    line-height:40px;
}
/* BLOCK 5 NEWS */
.news_container {
    padding-top:20px;
}

.block_5 {
    width:100%;
    height:943px;
    background-image: url(/assets/img/aof_news_bg.jpg);
    background-repeat: no-repeat;
    position:relative;
}
.block_5_content {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 1240px; /*1260px;*/
    padding-top: 70px;
}
.news-block {
    margin-left:auto;
    margin-right:auto;
    height:511px; /*525*/
    padding-top:50px;
    font-family:'AvenirLTStd-Medium', sans-serif, arial;
    overflow:hidden;
}
.news-block article {
        background-color: rgba(20, 22, 31, 0.3);
        padding:20px 10px;
        width: 339px; /*398*/
        height: 270px;
        
}
.news_bg {
    background-color:#000000;
    opacity:0.6;
    height:100%;
    position: relative;
}

.news-block article h4 {
    font-weight: normal;
    color: #c78938;
    font-size:17px;
}
.news-block article .news_date {
    font-size:11px;
    color:#676767;
}
.news-block article .news_text {
    padding-top:20px;
    line-height: 30px;
    color:#fff;
}
.news-block article .news_link {
    padding-top:10px;
}
.news-block article .news_link a {
    
    font-size:12px;
    font-family: arial, sans-serif;
    color:#e27500;
}
.news-block .header {
    float:none;
    width:1260px;
    height: 280px;
}
.header > .header-img {
    float:left;
}
.header > article {
    float: right;
    height: 223px;
    width: 862px;
}
.news {
   float:left;
   margin-left:40px;
}
.news img {
    max-width: 340px;
}

.news-block li {
    float:left;
    height:100%;
    width:398px;
    margin-right:33px;
    transition:transform 100ms ease 0s;
}

.news-block .slick-slide:hover article {
    background-color: rgba(20, 22, 31, 0.6);
    transition:transform 100ms ease 0s;
}

.news-block li:last-child {
    margin-right:0;
}
.news_1 {
    position:relative;
}
.news_2 {
    position:relative;
}
.news_3 {
    position:relative;
}

.news_chrome {
    background-image: url(/assets/img/aof_news_chrome.png);
    background-position: center center;
    height: 76px;
    width: 100%;
    background-repeat: no-repeat;
    margin-top:15px;
}

/* BLOCK 3 ARENA */
.block_3 {
    width:100%;
    height:1000px;
    background-image: url(/assets/img/aof_versus_bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    position:relative;
}

.block_3_title {
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 30px;
    padding-top: 10px;
    position: relative;
    text-align: center;
    width: 980px;

}

.block_3_content {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 760px;
    padding-top: 320px;
}


.block_3_text {
    width: 660px;
    padding-top:20px;
    font-size:18px;
    text-align: center;
    position: relative;
}
.block_3_text b {
    line-height:30px;
}

/* BLOCK - MEDIA */
.block_4 {
    width:100%;
    height:1114px; /*1524*/
    background-image: url(/assets/img/aof_media_bg.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    padding-top:110px;
}

.block_4_video {
    width:940px; /*940*/
    height:479px; /*492*/
    position:relative;
    margin-left: auto;
    margin-right:auto;
    cursor:pointer;
    background: url('/assets/img/loading.gif?v=2') no-repeat center center #000;
}
.block_4_video_image {
    position:relative;
    top:-13px;
    left:-13px;
    z-index:3;
    width:100%;
    height:100%;
    background-image: url(/assets/img/aof_media_trailer_img.png);
    margin-left: auto;
    margin-right:auto;
}

.video-container {
  width:1260px;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  padding-top:100px;
}

.block-video-thumb {
  width: 615px;
  height: 314px;
  margin-right: 30px;
  border-radius: 3px;
  box-shadow: inset 0px 1px 0px rgba(255,255,255,0.15), 0px 1px 10px rgba(0,0,0,0.75);
  position: relative;
  cursor:pointer;
  /*background-image: url("/assets/img/aof_video_thumb.jpg");*/
}
.video-title {
  background: rgba(0,0,0,0.6);
  height: 40px;
  width:100%;
  bottom: 0;
  left: 0;
  position: absolute;
  text-align: center;
  text-transform: uppercase;
  padding-top:10px;
  border-radius: 0 0 3px 3px;
    
}
.video1 {
  background-image: url("/assets/img/video-gameplaytrailer.jpg");
  background-repeat: no-repeat;
  float: left;
}
.video2 {
  background-image: url("/assets/img/video-announceteaser.jpg");
  background-repeat: no-repeat;
  margin-right: 0;
  float: right;
}

.block_4_video_button {
    width:59px;
    height:58px;
    background-image: url(/assets/img/block-1-play.png?v=1);
    position:absolute;
    z-index:4;
    margin-left: auto;
    margin-right:auto;
    top:40%;
    left:48%;

}

.block_4_video:hover, .block-video-thumb:hover .block_4_video_button{
    background-position: 0 -58px;
    cursor:pointer;

}


/* Screenshots thumbs */
.img1 {
    background-image: url(/assets/img/screenshots/01.png?v=1);
    background-repeat: no-repeat;
}

.img2 {
    background-image: url(/assets/img/screenshots/02.png?v=1);
    background-repeat: no-repeat;
}

.img3 {
    background-image: url(/assets/img/screenshots/03.png?v=1);
    background-repeat: no-repeat;
}

.img4 {
    background-image: url(/assets/img/screenshots/04.png?v=1);
    background-repeat: no-repeat;
}

.img5 {
    background-image: url(/assets/img/screenshots/05.png?v=1);
    background-repeat: no-repeat;
}


/* BLOCK 12 - SOCIAL */
.block_12 {
    width:100%;
    height:255px;
    position:relative;
    top:80px;
    clear: both;
}


.block_12_header {
    padding-bottom: 60px;
    padding-top: 10px;
}

.block_12_social {
    height: 183px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px; /* 50 */
    padding-bottom: 13px;
    padding-left: 0;
    width: 760px; /*760*/ /*520*/
}



.block_12_social li {
    width:252px;
    height:243px;
    background-repeat: no-repeat;
    float:left;
    list-style-type:none;
    display:inline;
}

.block_12_social li a {
    display:inline-block;
    width:100%;
    height:100%;
}

.block_12_social .playfor_free {
    background-image: url(/assets/img/aof_social_beta.png?v=1);
    background-position: top center;
    background-repeat: no-repeat;
    width:251px !important;
}

.block_12_social .playfor_free:hover {
     background-position: 0 -243px;
     cursor:pointer;
}

.block_12_social .gface {
    background-image: url(/assets/img/aof_social_gface.png?v=1);
    background-position: top center;
    background-repeat: no-repeat;
}

.block_12_social .gface:hover {
     background-position: 0 -243px;
     cursor:pointer;
}

.block_12_social .fb {
    background-image: url(/assets/img/aof_social_fb.png?v=1);
    background-position: top center;
    background-repeat: no-repeat;
    width:253px !important;
}
.block_12_social .fb:hover {
    background-position: 0 -243px;
    cursor:pointer;
}

.block_12_social .twitter {
    background-image: url(/assets/img/aof_social_twitter.png?v=1);
    background-position: top center;
    background-repeat: no-repeat;
}
.block_12_social .twitter:hover {
     background-position: 0 -243px;
     cursor:pointer;
}

.block_12_social .youtube{
    background-image: url(/assets/img/aof_social_youtube.png?v=1);
    background-position: top center;
    background-repeat: no-repeat;
}

.block_12_social .youtube:hover {
     background-position: 0 -243px;
     cursor:pointer;
}



/* FOOTER */
.footer {
    background-color:#1b1b1b;
    width:100%;
    height:600px;
    font-family: "AvenirMedium", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color:white;
    border-top:1px solid #292929
}


.footer_top {
    width:1260px;
    height:87px;
    background-image: url(/assets/img/footer-bg.png?v=1);
    position:relative;margin-left:auto;margin-right:auto;
    margin-top:200px;
}

.footer_logos {
    position:relative;
    width:410px; /*550*/
    margin-left:auto;
    margin-right:auto;
    padding-top: 15px;

}

.crytek_logo {
    width:110px;
    height:50px;
    background-image: url(/assets/img/footer-crytek.png?v=1);
    margin-right:50px;
    float:left;

}
.crytek_logo a {
    display: inline-block;
    height: 100%;
    width: 100%;
}

.cryengine_logo {
    width:200px;
    height:50px;
    background-image: url(/assets/img/footer-cryengine.png?v=1);
    margin-right:50px;
    margin-top:6px;
    float:left;
}

.cryengine_logo a {
    display: inline-block;
    height: 100%;
    width: 100%;
}
.gface_logo {
    width:126px;
    height:50px;
    background-image: url(/assets/img/footer-gface.png?v=1);
    float:left;
    margin-top:5px;
}

.gface_logo a {
    display: inline-block;
    height: 100%;
    width: 100%;
}

.select_lang {
    color: #b83600;
    float:right;
    font-size:11px;
    margin-right:10px;
    display:none;
}

.footer_bottom  {
    width:1260px;
    position:relative;
    margin-left:auto;
    margin-right:auto;
    padding-top:35px;
}

.footer_left_menu {
    list-style:none; 
    margin:0;
    padding: 0;
}
.footer_left_menu li { margin:0; padding:0; display:inline; }

.footer_left_menu li a  {
display: block;
float: left;
padding-right: 20px;
font-size: 11px;
color: #2D6DA0;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;

}
.footer_left_menu li a:hover {
text-decoration: underline;

}

.footer_copyr {
    width:1260px;
    margin-right:auto;
    margin-left:auto;
}


.copyright {
    float: left;
    color:#959595;
    font-size: 11px;
    /*margin-right:auto;*/
    padding-top:20px;
}

.copyright_title {
    float:left;
    width:100%;
    text-transform: uppercase;

}
.copyright_text {
    text-align:left;
    line-height: 20px;
    text-transform: uppercase;
}


.usk_logo {
    width:70px;
    height:70px;
    background-image: url(/assets/img/usk-16.png?v=1);
    margin-left: 20px;
    margin-top: 60px;

}
/* MODAL BOX */

/*############*/
.float-page {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
    display:none;
    font-family: "AvenirMedium", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.float-page .sticky {
    display: none;
    position: relative;
}
.float-page.sticky-on .sticky {
    display: block;
}
.float-page.sticky-on .text {
    padding-top: 120px;
}
.float-page.sticky-on .page-header {
    display: none;
}
.float-page .underlay {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 101;
}


.float-page .is-centered {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #1B1B1B;
    border-color: #1B1B1B;
    border-image: none;
    border-style: solid;
    border-width: 40px 40px 40px 10px;
    bottom: 0;
    left: 0;
    margin: auto;
    position: fixed;
    right: 0;
    top: 0;
    width: 80%;
    z-index: 1002;
    min-height: 250px;
    /*min-width: 500px;*/
    max-width:1260px; /*990px*/
    max-height: 72%; /*80%;*/

}
#gface_login .is-centered {
    border: none;
    max-height: 560px;
    width: 300px;
}

/*youtube modal */
#youtube .is-centered {
  border-width: 0;
}

.is-centered {
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.float-page .icon-close {
   background: url("/assets/img/close-icon.png?v=1") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    height: 45px;
    position: absolute;
    right: -60px;
    top: -60px;
    width: 45px;
    z-index: 1003;
}
#gface_login .icon-close {
    right: -20px;
    top: -20px;

}

#youtube .icon-close {
  right: -20px !important;
    top: -20px !important;
}
.float-page .is-centered .container {
    -moz-box-sizing: border-box;
    box-sizing:border-box;
    background-color: #1b1b1b;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
    min-height: 250px;
    min-width: 270px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    background-image: url("/assets/img/loading.gif?v=1");
}

#gface_login .is-centered .container {
    height:560px !important;
    width:300px !important;
    overflow:hidden;
    background-color: #000000 !important;
    
}
/*seperate*/
#youthp .is-centered {
    height:300px;
}
#youthp .is-centered .container {
    overflow: hidden;
}


.float-page .is-centered .container .page-header {
    background-color: #1b1b1b;
    margin: 0;
    position: relative;
}

.float-page .is-centered .container header h2 {
    margin: 0;
}
.float-page h1, .float-page header.module h1, header.module .float-page h1 {
    color: #2D6DA0;
    font-size: 50px;
    line-height: 82%;
    margin: 18px 0;
    text-align: left;
}
.float-page h2, .float-page header.module h2, header.module .float-page h2 {
    font-size: 22px;
    text-align: left;
    text-shadow: none;
    font-weight: normal;
    padding-bottom:5px;
}
.float-page h3, .float-page header.module h3, header.module .float-page h3 {
    font-size:26px;
    color: #2D6DA0;
    letter-spacing: normal;
    text-align: left;
}
.float-page .is-centered .container figure.teaser {
    margin: 0 0 34px;
}
.float-page .is-centered .container article {
    background-color: #1b1b1b;
    font-size: 12px;
    line-height: 150%;
    position: relative;
    padding-left:60px;
    padding-right:60px;
    min-height:150px;
    /*height:100%*/
}

#gface_login .is-centered .container article {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: #000 !important
}

.float-page .is-centered article {
    margin: 0 auto;
}

.float-page .is-centered .text {
   position: relative;
    display: block;
    font-size: 14px;
    line-height: 1.7em;
    color:#fff;
}

#gface_login .is-centered .text {
  top:0;
  background-color: black;
}

.news .is-centered .text {
  font-size:18px;
}

.news .is-centered .text img {
    float: left;
    margin-right: 50px;
    max-width: 50%;
    padding-bottom: 20px;
    padding-top: 20px;
  }
  .news .is-centered .text p {
      margin-top:13px;
      margin-left:595px;
  }
.float-page .is-centered .text p {
   
}
.float-page .is-centered .text a {
    color: #DA973E;
    text-decoration: none;
}
.float-page .is-centered .text a:hover {
   color: #feb049;
}
.float-page .is-centered ul  {
    margin-left: 40px;
    padding: 0;
}
.float-page .is-centered ul li {
    list-style: disc;
}
div#text-shadow {
    background-color: #000000;
    bottom: 0;
    left: 0;
    opacity: 0.9;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 101;
}


.loading {
    background-image: url("/assets/img/loading.gif?v=1");
    height: 32px;
    left: 50%;
    margin-left: -16px;
    margin-right: auto;
    margin-top: -16px;
    position: fixed; /*absolute*/
    top: 50%;
    width: 32px;
    z-index:100001;
}

*:focus {
    outline: none;
}

 .close{
    background: url("/assets/img/close-icon.png?v=1") no-repeat scroll 0 0 transparent;
    float: right;
    height: 45px;
    position: absolute;
    right: -19px;
    top: -15px;
    width: 45px;
    z-index: 9999;
 }

 #gface_login > div > .close {
     
    height: 45px;
    right: -15px;
    top: -267px;
    width: 45px;
    z-index: 100002;
}

/* Video */
.index .videobox {
  width: 100%;
  background-color: #1EE6FA;
}
  .no-js .videobox { height: 450px; }
  .index .videobox .mejs-container {
    margin: 0 auto;
  }
  .index .videobox .logo-overlay {
    display: none;
    position: absolute;
	  top: 0;
	  left: 0;
    /*background: #1EE6FA url(../images/layout/trailer-logo.png) no-repeat center center;*/
  }
  .index .videobox .claim-overlay {
    display: none;
    position: absolute;
	  top: 0;
	  left: 0;
    /*background: url(../images/layout/trailer-claim.png) no-repeat center center;*/
  }
  .index .videobox .ended-overlay {
    display: none;
    position: absolute;
	  top: 50%;
	  left: 50%;
    padding: 20px 0 0 20px;
	  margin: -70px 0 0 100px;
    width: 260px;
    font-family: "ff-kievit-web-pro", Arial, Helvetica, sans-serif;
  }
    .index .videobox .mejs-iphone .ended-overlay {
      position: absolute;
	    top: 0;
	    left: 0;
      margin: 0;
      padding: 150px 0 0 500px;
      width: 500px;
      height: 401px;
      background-color: #1EE6FA;
    }


 /*SCREENSHOT*/
 .screen-container {
     width:1010px;
     position: relative;
     margin-left:auto;
     margin-right:auto;
     clear: both;
     padding-top:140px;
}
 .screen-container li {
    width:240px;
    height: 135px;
    float:left;
    box-shadow: inset 0px 1px 0px rgba(255,255,255,0.15), 0px 1px 10px rgba(0,0,0,0.75);
    margin-right:15px;
    -webkit-transition: all 300ms ease;
    -webkit-transform: scale(1);
    -moz-transition: all 300ms ease;
    -moz-transform: scale(1);
    -o-transition: all 300ms ease;
    -o-transform: scale(1);
    transition: all 300ms ease;
    transform: scale(1);
    
 }
 .screen-container li:hover {
    -webkit-transition: all 300ms ease;
    -webkit-transform: scale(1.08);
    -moz-transition: all 300ms ease;
    -moz-transform: scale(1.08);
    -o-transition: all 300ms ease;
    -o-transform: scale(1.08);
    transition: all 300ms ease;
    transform: scale(1.08);
 }
  .screen-container li a{
    height:100%;
    width:100%;
    display:inline-block;
  }
  .screen-container li:last-child {
    margin-right: 0 !important
  }

  .thumb-second-row {
    padding-top:30px !important;
  }  
  
.screen1 {
      background: url("/assets/img/screenshots/thumb1.jpg") no-repeat;
}
.screen2 {
      background: url("/assets/img/screenshots/thumb2.jpg") no-repeat;
}
.screen3 {
      background: url("/assets/img/screenshots/thumb3.jpg") no-repeat;
}
.screen4 {
      background: url("/assets/img/screenshots/thumb4.jpg") no-repeat;
}

.screen5 {
      background: url("/assets/img/screenshots/thumb5.jpg") no-repeat;
}
.screen6 {
      background: url("/assets/img/screenshots/thumb6.jpg") no-repeat;
}

.screen7 {
      background: url("/assets/img/screenshots/thumb7.jpg") no-repeat;
}

.screen8 {
      background: url("/assets/img/screenshots/thumb8.jpg") no-repeat;
}



/*REGISTER*/

.register_succes {
    padding-top: 50px;
    width: 100%;
    border: 1px solid #FFFFFF;
    height: 560px;

}
.reg_success_img {
    background-image: url("/assets/img/success.png?v=1");
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    height: 120px;
    width: 120px;
        margin-left: auto;
    margin-right: auto;
}
.reg_login_img {
    background-image: url("/assets/img/login.png?v=1");
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    height: 120px;
    width: 120px;
        margin-left: auto;
    margin-right: auto;
}
.reg_success_title {
    color: #FFFFFF;
    font-size: 18px;
    padding-top: 60px;
    text-align: center;
    text-transform: uppercase;
}

.reg_success_desc{
    width:250px;
    color: #da973e;
    font-size: 14px;
    line-height: 18px;
    padding-top: 30px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.youtube_frame {
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}
.youtube_video {
    display: inline-block;
    float: left;
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 5;
}

@media screen {
	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader img {
		display: block;
		}
	}
@media print {
	div#preloader,
	div#preloader img {
		visibility: hidden;
		display: none;
		}
	}

  .clickable {
    cursor: pointer;
}

/*login and redeem */

.header-small-button {
  display: table;
 position:relative;
  width:278px;
  height:64px;
  background-size:cover;
  text-transform: uppercase;
  cursor: pointer;
  float: left;
  
}

 .redeem-button{
  background-image: url(/assets/img/redeem_bg.jpg);
  margin-right: 15px;
    }

.login-button{
  background-image: url(/assets/img/button-blue.png);

}

 .header-small-button a {
 display:table-cell;
 vertical-align: middle;
 text-align: center;
 height:100%;
 width:100%;
 color:#fff;
 font-size: 22px;
 position: relative;
 z-index: 999;
 }

 .eula-button {
     float: left ;
    margin-right: 10px !important;
    width: 47% !important;
 }
 
 .decline-button {
    background-image: url("/assets/img/decline-button.png");
    background-size: cover;
    box-sizing: border-box;
    color: #fff !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    height: 48px;
    letter-spacing: 1px;
    line-height: 1;
    margin: 14px 0;
    padding: 17px 0;
    text-align: center;
    text-transform: uppercase;
    border: 0 none;
    outline: medium none;
    float: left;
    width: 47%;
 }
 
 .arena-ul {
     margin-left: 100px;
    margin-top: 20px;
    position: relative;
    width: 100%;


 }
 .arena-ul li {
     line-height:30px;
     list-style: disc;
 }
 
 .slick-counter{
  position:absolute;
  top:5px;
  left:5px;
  background:yellow;
  padding:5px;
  opacity:0.8;
  border-radius:5px;
}

.hidden_desc {
    display:none;
}