body{ min-width: 100%; overflow-x: auto !important; }
.row-fluid{ min-width: 100%; }

.row-fluid [class*="span"], .row-fluid [class*="span"]:first-child{ margin-left: auto; }

div, a, li, span{ font-family: Borda-Light, bordademibold, Arial; color: #f7f7f7; text-transform: uppercase; }
h2, .homepage_join_the_division a{ font-size: 63px; width: 634px; height: 91px;line-height: 91px; padding: 0 35px; position: relative; font-family: bordamedium, bordademibold, bordaregular, Arial; font-weight: normal; text-shadow: 4px 3px 4px #303030; }
h2:before, h2:after, .homepage_join_the_division a:before, .homepage_join_the_division a:after{ content: ''; display: block; width: 23px; height: 106px; position: absolute; top: -7px; height: 106px; }

.homepage_join_the_division{ text-align: center; }
.homepage_join_the_division a{ width: auto; font-family: bordamedium, bordademibold, bordaregular, Arial; display: inline-block; height: 106px; line-height: 106px; }
.homepage_join_the_division a span{ width: auto; font-family: bordabold, bordademibold, bordaregular, Arial; }
.row_top_page .AspNet-Menu-Horizontal{ 
    position: absolute;
    display: table-cell;
    margin: 0 auto;
    width: 100%; }
/* MENU FLOTTANT */
.homepage_overlay_menu{ position: fixed; left: 0; z-index: 1000; top: 0px; width: 400px;
    opacity: 0.15; 
    filter: alpha(opacity=15);
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    }
.homepage_overlay_menu .overlay_menu{ position: absolute; padding: 0px; width: 160px; height: 400px; opacity: 0; display: none;}
.homepage_overlay_menu .overlay_menu .list{ position: absolute; left: -155px; top: -390px; padding:0px; width: 160px; height: 400x; }
.homepage_overlay_menu .overlay_menu .list .item{ padding:0px; text-align:left; width: 152px; height: 48px; background:url("menu_item_little.png") no-repeat; color: white; text-shadow: rgba(0,0,0,1) 0 0 5px; line-height:37px; cursor:pointer; position: relative; z-index: 10000; }
.homepage_overlay_menu .overlay_menu .carre{ position: absolute; left:300px; top:855px; background-color:#d19711; width:15px; height:15px; }
.homepage_overlay_menu .overlay_preorder{ position:absolute; padding:0px; width:300px; height:100px; opacity:0; display: none; }
.homepage_overlay_menu .overlay_preorder .list{ position:absolute; left:0px; top:-85px; padding:0px; width:300px; height:100px; }
.homepage_overlay_menu .list .item span{ font-family: bordademibold, bordaregular, Arial; display: inline-block; vertical-align: middle; }
.homepage_overlay_menu  .overlay_menu .list .item span{ font-size: 14px; line-height: 13px; }
.homepage_overlay_menu  .overlay_preorder .list .item span{ font-size: 30px; line-height: 28px; }
canvas{ pointer-events: none; }
canvas#line{ position: absolute; left: 0px; width: 530px; bottom: -220px; z-index: 10; }
.homepage_overlay_menu .overlay_preorder .list .item{ padding:0px; text-align:left; width:300px; height:98px; background:url("menu_item_pre_order.png") no-repeat; color: white; font-family: bordamedium, sans-serif; font-size: 40px ; text-shadow: rgba(0,0,0,1) 0 0 5px; /*line-height:98px;*/ cursor:pointer; }
.homepage_overlay_menu .menu_off{ width: 156px; height: 156px; background: url('menu_off.png') no-repeat; cursor: pointer; position:relative; z-index:200; display: block; margin: 0 auto; margin-top: 42px; }
.homepage_overlay_menu .menu_on{ width: 240px; height: 240px; background: url('circle.png') no-repeat center center;    position: absolute; left: 0; top: 0px; opacity: 0; margin: 0 auto; display: block; z-index: 11; }
.homepage_overlay_menu .overlay_preorder .carre{ position: absolute; left:0px; top:75px; background-color:#d19711; width:10px; height:10px; }
.homepage_overlay_menu .overlay_menu .list .item .rover{ display: block; width: 50px; background-color:#d19711; height:50px;
    -webkit-transition: width 0.25s ease-in-out;
    -moz-transition: width 0.25s ease-in-out;
    -ms-transition: width 0.25s ease-in-out;
    -o-transition: width 0.25s ease-in-out;
    transition: width 0.25s ease-in-out;
    opacity:0.25
}
.homepage_overlay_menu .overlay_menu .item .rover:hover {   width: 100%; }
/****************/

/* MENU */
.homepage_preorder{ 
    opacity: 0.15; 
    filter: alpha(opacity=15);
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
.packshot-preorder{ position: absolute; top: -35px; left: -45px; }

.beta span{position: relative;}

.homepage_preorder:hover, .homepage_preorder.hover, .homepage_overlay_menu:hover, .homepage_overlay_menu.hover{ opacity: 1; filter: alpha(opacity=100); }

.AspNet-Menu-Horizontal:hover, .AspNet-Menu-Horizontal.hover{ opacity: 1; filter: alpha(opacity=100); }

.header_container.mobileMenu{ position: fixed; top: 0; z-index: 10000; pointer-events: none; }
.header_container.mobileMenu .right{ margin-top: -35px; }
.header_container.mobileMenu .AspNet-Menu-Horizontal{ z-index: 100; pointer-events: auto; }
.header_container.mobileMenu .logo, .header_container.mobileMenu .homepage_preorder{ visibility: hidden; }

.cn-nav{ width: 240px; height: 240px; position: absolute; left: calc(50% - 120px); }


    
.cn-nav.actifMenu + .homepage_overlay_menu{ display: block; }
.homepage_overlay_menu a{ text-decoration: none; text-transform: uppercase; color: white; display: inline-block; position: relative; z-index: 100000; }
.homepage_overlay_menu .overlay_preorder a{ padding: 7px 9px; height: 70px; line-height: 70px; }
.homepage_overlay_menu .overlay_menu a{ padding: 5px 9px; height: 30px; line-height: 34px; }

.homepage_overlay_menu  .container_link .loader-menu{ display: block; background: url('bg_orange.png') repeat-y; position: absolute; top: 0; left: 0;
    -webkit-transition: width 0.25s ease-in-out;
    -moz-transition: width 0.25s ease-in-out;
    -ms-transition: width 0.25s ease-in-out;
    -o-transition: width 0.25s ease-in-out;
    transition: width 0.25s ease-in-out;
    z-index: -1; }
.homepage_overlay_menu .overlay_menu .container_link .loader-menu{ width: 10px; margin-left: 5px;  height: 31px; margin-top: 9px; }
.homepage_overlay_menu .overlay_preorder .container_link .loader-menu{ width: 20px; margin-left: 7px;  height: 63px; margin-top: 16px; }

.homepage_overlay_menu  .overlay_preorder .container_link .loader-menu{ margin-left: 31px; }
.homepage_overlay_menu .overlay_preorder a{ margin-left: 20px; }
.homepage_overlay_menu .overlay_menu .container_link:hover .loader-menu{ width: 130px; }
.homepage_overlay_menu .overlay_preorder .container_link:hover .loader-menu{ width: 263px; }
.homepage_overlay_menu .overlay_preorder  a span{ padding: 0 15px; }
.overlay_menu a{ width: 95%; }

.third_panel{margin-top: 90px;}
.third_panel, .main{float: left;}
.second_panel{width: 100%;position: relative;}
.first_panel.addbg{background: url('ny_vista.jpg') no-repeat;background-size: cover;}
.second_panel.addbg{background: url('fond-breakdown.png')no-repeat;background-size: cover;}
.secondpart_container{max-width:1280px;margin: 0 auto;width: calc(100% - 40px);padding: 0 20px;padding-top: 100px;}
.first_panel, .second_panel{width: 100%; padding-bottom: 35px;}
.first_panel { background: url('background_keyvisual_tctd.jpg') no-repeat center center; background-size: cover; top: 60px;}
.second_panel{ background: url('tctd_bg_bloc3_hp.jpg') no-repeat center center; background-size: cover; }

/* Video */
video#Video1{ position: fixed; right: 0; top: 0; min-width: 1280px; /*min-height: 100%;*/ width: 100%; height: auto; z-index: -100; background: url(picture_video_1.jpg) no-repeat; background-size: cover; }
#VideoLoop{ width: 100%; }
.play_pause_video, .reload_video, .yt_link{ width: 52px; height: 52px; display: block; cursor: pointer; position: absolute; bottom: 50px; z-index: 1000; }
.play_pause_video{ left: calc(50% - 575px); background: url('pause_little.png') no-repeat; }
.pause_video{ background: url('play_little.png') no-repeat; }
.reload_video{ background: url('reload_little.png') no-repeat; left: calc(50% - 620px); }
.yt_link{ background: url('youtube_little.png') no-repeat; left: calc(50% - 530px); }
.yt_link a{ display: block; text-indent: -90000px; color: transparent; width: 52px; height: 52px; }
.CB-cta-home{text-align: center;  padding: 24% 0 10%;width: 100%;top: 45%;z-index: 1;}
.cta-home{  display: inline-block;  position: relative; margin: 0 auto 76px; width: 406px;}
.first_panel .release-date{   line-height: normal;  max-width: 1280px;  margin: 0 auto;  width: calc(100% - 40px);}
.first_panel .release-date p{width: calc(100% * 2/3);}
.first_panel .release-date span{width: 50%;  float: right;  text-align: center;margin-top: -25px;}
.release-date{  width: 100%;    text-align: center; cursor: normal;  text-align: left;}
.release-date p{font-size: 48px;    color: transparent; text-shadow: 0 0 3px rgba(255,255,255,0.6);width: 100%;  text-shadow: 0 -1px 3px rgba(255,255,255,0.6);  text-align: right;}
.release-date span{ border-top: 1px solid #fff; font-size: 76px; }
.cta-home a{    background: rgba(0,0,0,0.8); color: #fff; width: 406px;   height: 102px;  display: inline-block;  text-align: center; font-family: bordamedium;   font-size: 28px;    line-height: 102px; vertical-align: middle;}
/*.cta-home:nth-child(2) a{ line-height: 44px;}*/
/*.cta-home a:before{ content: ''; position: absolute; height: 1px;    width: 406px;    background: #ff6a13;    left: 0;
}*/
.cta-home span, .CB-order-bar .cta-order a{ 
    padding: 20px 0px; 
    font-size:16px; 
    position: absolute; 
    top: 100%;  
    margin-top: 10px; 
    border:1px solid #ff6a13;
    left: 0; 
    width:100%; 
    color: #ff6a13; 
    opacity: 0; 
    font-weight: bold;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}


.cta-home span{ color: #fff; background: #ff6a13;}

.cta-home:hover span{   opacity: 1;}

.preorder{  opacity: 1; position: relative; width: 190px;   float: left;    text-align: center; display: inline-block;}

.row_gameplay_trailer .yt_link{ position: relative !important; display: inline-block; bottom: auto; left: auto; margin-left: 10px; }

/* BLOCK 1 VIDEO */
.c_top_page{ position: relative;}
#homepage_bgvideo{ clear: both; width: 1280px; margin: 0 auto; }

/* TITLE */
.tagline{ font-size: 36px; color: #ff6a18; text-transform: uppercase; line-height: 90px; padding: 0px 30px 0px 20px; background: url('bg_menu.png') repeat; display: inline-block; position: relative; text-align: right; height: 100px;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; }
.tagline .content-tagline{ line-height: normal; vertical-align: middle; line-height: 36px; color: #ff6a18; display: inline-block;
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; }
.row_gameplay_trailer .tagline .content-tagline{ line-height: 52px; }
.row_top_page .tagline:before, .row_boxshot .tagline:before, .row_gameplay_trailer .tagline:before, .row_snowdrop_engine .tagline:before{ content: ''; background: url('bg_menu.png') repeat; width: 1000px; height: 100%; position: absolute; left: -1000px; top: 0;
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; }
.tagline .content-tagline span{ font-family: bordamedium, bordademibold, Borda-Light, Arial; color: #ff6a18;
-webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out; }
.row_we_are_agents .tagline{ text-align: left; float: right; padding: 0px 20px 0px 30px; margin-top: -330px; }

.row_we_are_agents .tagline .content-tagline:before{ content: ''; background: url('info.png') no-repeat; width: 20px; height: 20px; position: absolute; bottom: 20px; left: 10px; }
.row_snowdrop_engine .tagline .content-tagline:after{ content: ''; background: url('info.png') no-repeat; width: 20px; height: 20px; position: absolute; bottom: 15px; right: 10px; }

/* BLOC TEXTE */
.description, .tagline_description{ font-size: 16px; font-family: bordaregular, Borda-Light, Arial;position: relative; text-align: justify;  line-height: 17px;  letter-spacing: 2px;}
.row_videoloop_block .description, .row_videoloop_block .tagline_description{ padding: 36px 30px 48px 43px;  }
.content-description{ width: 100%; line-height: normal;position: relative; }
.content-description .title{ font-size: 36px; font-family: bordamedium, bordademibold, bordaregular, Arial; color: #ff6a18; height: auto; background: none; line-height: normal; padding: 0; text-shadow: none; width: auto; }
.content-description .title:before, .content-description .title:after{ content: none; width: 0; height: 0; }
.content-description p{ font-size: 14px; font-family: bordaregular, bordademibold, Arial; }
.tagline_description .content-description{ padding-top: 5px; }


/********** Bloc Animation **********/
@-webkit-keyframes example-three-anim-one{  
    0% {
    clip: rect(669px, 1920px, 730px, 0);
    }
    6.66667% {
    clip: rect(88px, 1920px, 280px, 0px);
    }
    13.33333% {
    clip: rect(534px, 1920px, 986px, 0);
    }
    20% {
    clip: rect(203px, 1920px, 73px, 0);
    }
    26.66667% {
    clip: rect(93px, 1920px, 582px, 0);
    }
    33.33333% {
    clip: rect(286px, 1920px, 1000px, 0);
    }
    40% {
    clip: rect(269px, 1920px, 221px, 0);
    }
    46.66667% {
    clip: rect(54px, 1920px, 817px, 0);
    }
    53.33333% {
    clip: rect(1027px, 1920px, 661px, 0);
    }
    60% {
    clip: rect(177px, 1920px, 110px, 0);
    }
    66.66667% {
    clip: rect(484px, 1920px, 575px, 0);
    }
    73.33333% {
    clip: rect(703px, 1920px, 321px, 0);
    }
    80% {
    clip: rect(799px, 1920px, 304px, 0);
    }
    86.66667% {
    clip: rect(500px, 1920px, 876px, 0);
    }
    93.33333% {
    clip: rect(1006px, 1920px, 700px, 0);
    }
    100% {
    clip: rect(293px, 1920px, 354px, 0);
    }
}
@-moz-keyframes example-three-anim-one{  
    0% {
    clip: rect(669px, 1920px, 730px, 0);
    }
    6.66667% {
    clip: rect(88px, 1920px, 280px, 0px);
    }
    13.33333% {
    clip: rect(534px, 1920px, 986px, 0);
    }
    20% {
    clip: rect(203px, 1920px, 73px, 0);
    }
    26.66667% {
    clip: rect(93px, 1920px, 582px, 0);
    }
    33.33333% {
    clip: rect(286px, 1920px, 1000px, 0);
    }
    40% {
    clip: rect(269px, 1920px, 221px, 0);
    }
    46.66667% {
    clip: rect(54px, 1920px, 817px, 0);
    }
    53.33333% {
    clip: rect(1027px, 1920px, 661px, 0);
    }
    60% {
    clip: rect(177px, 1920px, 110px, 0);
    }
    66.66667% {
    clip: rect(484px, 1920px, 575px, 0);
    }
    73.33333% {
    clip: rect(703px, 1920px, 321px, 0);
    }
    80% {
    clip: rect(799px, 1920px, 304px, 0);
    }
    86.66667% {
    clip: rect(500px, 1920px, 876px, 0);
    }
    93.33333% {
    clip: rect(1006px, 1920px, 700px, 0);
    }
    100% {
    clip: rect(293px, 1920px, 354px, 0);
    }
}
@keyframes example-three-anim-one{
    0%{
    clip: rect(669px, 1920px, 730px, 0);
    }
    6.66667% {
    clip: rect(88px, 1920px, 280px, 0px);
    }
    13.33333% {
    clip: rect(534px, 1920px, 986px, 0);
    }
    20% {
    clip: rect(203px, 1920px, 73px, 0);
    }
    26.66667% {
    clip: rect(93px, 1920px, 582px, 0);
    }
    33.33333% {
    clip: rect(286px, 1920px, 1000px, 0);
    }
    40% {
    clip: rect(269px, 1920px, 221px, 0);
    }
    46.66667% {
    clip: rect(54px, 1920px, 817px, 0);
    }
    53.33333% {
    clip: rect(1027px, 1920px, 661px, 0);
    }
    60% {
    clip: rect(177px, 1920px, 110px, 0);
    }
    66.66667% {
    clip: rect(484px, 1920px, 575px, 0);
    }
    73.33333% {
    clip: rect(703px, 1920px, 321px, 0);
    }
    80% {
    clip: rect(799px, 1920px, 304px, 0);
    }
    86.66667% {
    clip: rect(500px, 1920px, 876px, 0);
    }
    93.33333% {
    clip: rect(1006px, 1920px, 700px, 0);
    }
    100% {
    clip: rect(293px, 1920px, 354px, 0);
    }
}
@-webkit-keyframes example-three-anim-two{  
    0% {
    clip: rect(738px, 1920px, 105px, 0);
    }
    6.66667% {
    clip: rect(958px, 1920px, 530px, 0);
    }
    13.33333% {
    clip: rect(577px, 1920px, 659px, 0);
    }
    20% {
    clip: rect(137px, 1920px, 256px, 0);
    }
    26.66667% {
    clip: rect(564px, 1920px, 690px, 0);
    }
    33.33333% {
    clip: rect(107px, 1920px, 168px, 0);
    }
    40% {
    clip: rect(728px, 1920px, 681px, 0);
    }
    46.66667% {
    clip: rect(561px, 1920px, 177px, 0);
    }
    53.33333% {
    clip: rect(110px, 1920px, 932px, 0);
    }
    60% {
    clip: rect(201px, 1920px, 51px, 0);
    }
    66.66667% {
    clip: rect(347px, 1920px, 37px, 0);
    }
    73.33333% {
    clip: rect(365px, 1920px, 961px, 0);
    }
    80% {
    clip: rect(339px, 1920px, 610px, 0);
    left: 50px;
    }
    86.66667% {
    clip: rect(519px, 1920px, 330px, 0);
    }
    93.33333% {
    clip: rect(467px, 1920px, 451px, 0);
    }
    100% {
    clip: rect(508px, 1920px, 329px, 0);
    }
}
@-moz-keyframes example-three-anim-two{  
    0% {
    clip: rect(738px, 1920px, 105px, 0);
    }
    6.66667% {
    clip: rect(958px, 1920px, 530px, 0);
    }
    13.33333% {
    clip: rect(577px, 1920px, 659px, 0);
    }
    20% {
    clip: rect(137px, 1920px, 256px, 0);
    }
    26.66667% {
    clip: rect(564px, 1920px, 690px, 0);
    }
    33.33333% {
    clip: rect(107px, 1920px, 168px, 0);
    }
    40% {
    clip: rect(728px, 1920px, 681px, 0);
    }
    46.66667% {
    clip: rect(561px, 1920px, 177px, 0);
    }
    53.33333% {
    clip: rect(110px, 1920px, 932px, 0);
    }
    60% {
    clip: rect(201px, 1920px, 51px, 0);
    }
    66.66667% {
    clip: rect(347px, 1920px, 37px, 0);
    }
    73.33333% {
    clip: rect(365px, 1920px, 961px, 0);
    }
    80% {
    clip: rect(339px, 1920px, 610px, 0);
    left: 50px;
    }
    86.66667% {
    clip: rect(519px, 1920px, 330px, 0);
    }
    93.33333% {
    clip: rect(467px, 1920px, 451px, 0);
    }
    100% {
    clip: rect(508px, 1920px, 329px, 0);
    }
}
@keyframes example-three-anim-two{
    0% {
    clip: rect(738px, 1920px, 105px, 0);
    }
    6.66667% {
    clip: rect(958px, 1920px, 530px, 0);
    }
    13.33333% {
    clip: rect(577px, 1920px, 659px, 0);
    }
    20% {
    clip: rect(137px, 1920px, 256px, 0);
    }
    26.66667% {
    clip: rect(564px, 1920px, 690px, 0);
    }
    33.33333% {
    clip: rect(107px, 1920px, 168px, 0);
    }
    40% {
    clip: rect(728px, 1920px, 681px, 0);
    }
    46.66667% {
    clip: rect(561px, 1920px, 177px, 0);
    }
    53.33333% {
    clip: rect(110px, 1920px, 932px, 0);
    }
    60% {
    clip: rect(201px, 1920px, 51px, 0);
    }
    66.66667% {
    clip: rect(347px, 1920px, 37px, 0);
    }
    73.33333% {
    clip: rect(365px, 1920px, 961px, 0);
    }
    80% {
    clip: rect(339px, 1920px, 610px, 0);
    left: 50px;
    }
    86.66667% {
    clip: rect(519px, 1920px, 330px, 0);
    }
    93.33333% {
    clip: rect(467px, 1920px, 451px, 0);
    }
    100% {
    clip: rect(508px, 1920px, 329px, 0);
    }
}
#rolls-wrapper{
    width: 100%;
    height: 100%;
    text-align: center;
    position: absolute;
    top:0;
  overflow: hidden;
  z-index: -1;
}
.three > img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}
.three > img:nth-child(1){
  opacity: 0.5;
}

.three > img:nth-child(2),
.three > img:nth-child(3) {
  clip: rect(0, 0, 0, 0);
}

.three > img:nth-child(2) {
  left: -15px;
  -webkit-animation:example-three-anim-one 2s infinite linear alternate-reverse;
  -moz-animation:example-three-anim-one 2s infinite linear alternate-reverse;
  -ms-animation:example-three-anim-one 2s infinite linear alternate-reverse;
  -o-animation:example-three-anim-one 2s infinite linear alternate-reverse;
  animation: example-three-anim-one 2s infinite linear alternate-reverse;
}
.three > img:nth-child(3) {
  left: 15px;
  -webkit-animation:example-three-anim-two 2s infinite linear alternate-reverse;
  -moz-animation:example-three-anim-two 2s infinite linear alternate-reverse;
  -ms-animation:example-three-anim-two 2s infinite linear alternate-reverse;
  -o-animation:example-three-anim-two 2s infinite linear alternate-reverse;
  animation: example-three-anim-two 3s infinite linear alternate-reverse;
}


/* BLOC NEWS */
.row_news, .row_boxshot, .row_gameplay_trailer, .row_screens, .row_videoloop_block, .row_snowdrop_engine, .row_e3_video, .row_join_now, .row_flags, .row_footer{ background: black!important; }
.row_screens{ position: relative; }
.homepage_screens{ display: none; }
.row_screens:before{ content: ''; display: block; position: absolute; left: 0; width: 100%; top: 0; background: url('cache_top_screenshot.png') no-repeat; height: 118px; z-index: 100; }
.c_news{ width: 1020px !important; margin: 0 auto; float: none !important; position: relative; }
.homepage_news_title{ display: inline-block; position: relative;float: left; width: 100%;}
#news{float: left; width: 100%;}
#news h2{width: 100%;  line-height: normal; height: auto;}
#fragile_society .description .title{color: #fff;font-size: 50px; float: left; width: 100%; line-height: normal;}
#news h2, #fragile_society .description .title{font-family: 'borda-Light';  padding: 0;  text-shadow: none;  font-size: 50px;  border-top: 1px solid;margin-bottom: 20px; text-align: left;}
#news:before, #news:after{ content: ''; background: url('border_20.png') repeat-x; height: 1px; width: calc(100% + 2px); position: absolute; left: -1px; }
#news:before{ top: 0px }
#news:after{ bottom: -1px; }


.contentsummary .vertical{ border: none; width: auto; min-height: 390px; height: auto!important}
.contentsummary .item{ border: none; margin: 0; padding: 0; height: auto; clear: both; line-height: 20px; margin-bottom: 10px; background: rgba(0,0,0,0.3);  float: right;  width: 100%;}
.contentsummary .item h3{display: inline-block;  vertical-align: middle;  margin: 0;line-height: normal;  max-width: calc(100% - 300px);}
.homepage_news_list{ font-weight: normal; clear: both; overflow: hidden; }
.homepage_news_list a{ font-size: 22px; height: 120px;  display: inline-block;  vertical-align: middle;}
.homepage_news_list strong{ margin-bottom: 15px; display: none;font-size:16px; }
.homepage_news_list h3 a{ font-family: bordabold, bordademibold, bordaregular, Arial;height: auto; }
.wrap_content_new{ display: inline; }
.contentsummary .item .wrap_content_new:before, .contentsummary .item .wrap_content_new:after{ content: ''; position: absolute; top: 0; }
.contentsummary .item .wrap_content_new:before{ width: 5px; height: 100%; background: #EC8F1E; left: -42px; }
.contentsummary .item .wrap_content_new:after{ width: 10px; height: 10px; background: #f7f7f7; left: -18px; }
p.text_new > a{ font-size: 14px; color: black; font-family: bordamedium, bordademibold, bordaregular, Arial; background: #ec8f1e; height: 20px; line-height: 20px; display: inline-block; padding: 0 13px; }
p.news_date{ color: #ec8f1e; font-size: 16px; position: absolute; top: 0; right: 0; display: none!important;}
p.news_date span{ color: #ec8f1e; }
p.news_date span:before{ content: ' - '; }
.item p a{display: none;}
.seeAll, .read-more{  float: right;  background: rgba(255,255,255,0.1);  border: 1px solid rgba(255,255,255,0.2);  font-size: 16px!important;  padding: 10px 25px;  margin: 10px 0;height:  auto!important;}
.contentsummary .item img{ float: left;  margin-right: 20px;  height:120px;  width: 253px;}

.actions-news{ position: absolute; bottom: 0; right: -80px; }
.actions-news > div{ width: 52px; height: 52px; display: inline-block; cursor: pointer; }
.actions-news .more-news{ background: url('more.png') no-repeat; }
.actions-news .less-news{ background: url('less.png') no-repeat; }
.homepage_news_list .actions{ display: none; }
.contentsummary .items{ height: auto !important; }
.row_news .page{ height: auto !important; }


.play_bt{ position: absolute; left: 0%; top: 250px; pointer: cursor; z-index: 10000; }

.CB-order-bar{width: 100%; text-align: center;min-height: 188px;}

.CB-order-bar .packshot{display: none;  vertical-align: middle;  background: url('THE_DIVISION_PC_NORATING_3D.png'); background-size: cover;  width: 70px;  height: 100px}

.CB-order-bar .packshot img{ display: none;}

.CB-order-bar .release-date{  display: inline-block; width: auto;   vertical-align: middle;  margin: 0 20px;}

.CB-order-bar .release-date p {text-align: center;}
.CB-order-bar .release-date p span{display: inline-block;min-width:160px;position: relative;border-top: none; font-size:48px;line-height: normal;}

.CB-order-bar .cta-order{display:inline-block;  vertical-align: middle;}

.CB-order-bar .cta-order a{width: 145px;padding: 20px 0;  font-family: bordamedium; margin-top: 0;  opacity: 1;  position: relative;  display: inline-block;font-size: 17px;font-weight: lighter;position: relative;}

.CB-order-bar .release-date p span:before{content: '';  position: absolute;  background: url('Phoenix_FinalLogo_White_RGB.png')no-repeat center;  width: 100%;  height: 233%;  left: 0;  top: -55px;  background-size: 160px auto;  border: none!important;  opacity: 0.1;}

.community a span{  background: url('logo_CI_blanc.png') no-repeat;  color: transparent;  background-position: 50%;  width: 196px;  display: inline-block;}
.newsleft{float: left!important;}
.societyright{float: right!important;}

/*Media vid�o Youtube*/
.second_panel .societyright .tctd_playlist_yt { position: relative; }

.second_panel .societyright .tctd_playlist_yt .carousel_wrap-rq { 
    width: initial; 
    width: 100%; 
    padding: 0; 
    border: 0; 
    background: transparent; 
    outline: none; 
}
.second_panel .societyright .tctd_playlist_yt .carousel_wrap-rq body,
.second_panel .societyright .tctd_playlist_yt .carousel_wrap-rq .html5-video-player 
{ background: none; }

.carousel_thumbnails { width: 100%; }
.youtube-playlist .scrollable-rq .boxgrid { width: 18%; }
.youtube-playlist .scrollable-rq .carousel-item > img { width: 100%; height: initial; }


.second_panel .societyright .youtube-playlist .scrollable-rq { width: 520px; background: none; border: 0; }
.second_panel .societyright .youtube-playlist .boxgrid { margin: 10px 2px;}
.second_panel .societyright .youtube-playlist a.rq {margin-top: 40px; margin-bottom: 30px;}
.second_panel .societyright .youtube-playlist a.thumbnails-rq {display:none;}
.second_panel .societyright .youtube-playlist a.browse { background-image: url('hori_large.png');}

.youtube-playlist div.popup-box { width: 545px; background: #000; }
.youtube-playlist .popup-box-close-button {color: #ff6a13}

@media screen and (min-width: 320px) and (max-width: 780px){
     /* second part*/
    .newsleft, .societyright{width: 100%!important;}
    .contentsummary .item img{  height:120px;  width: 162px;}
    .contentsummary .item h3{max-width: calc(100% - 200px);} 
    .homepage_news_list h3 a{font-size: 4vw;}
    .news_container, #fragile_society{  width: 98%!important;  padding: 1%;margin: 0;}
    #news h2, #fragile_society .description .title{text-align: left;font-size: 9vw;  margin-bottom: 0;}       
}

@media screen and (min-width: 320px) and (max-width: 992px){
    /* first part*/    
    .CB-cta-home{position: relative;margin-top: 100px;}
    .first_panel .release-date{position: relative;  margin-bottom: 20px;  float: left;  width: 100%;  background: rgba(0,0,0,0.5);  line-height: normal;}
    .first_panel .release-date p{font-size: 6vw;border-top: 1px solid rgba(255,255,255,0.5);  line-height: inherit;text-shadow: 0 0 2px rgba(255,255,255,1);  margin: 5px 0;width: 100%;padding-top: 10px;}
    .first_panel .release-date p span{font-size: 9vw;border-top: none; margin-top: 0px;}
    .CB-cta-home .cta-home{margin: 10px 0; float: left;width: 100%;}
    .CB-cta-home .cta-home a{font-size: 6vw;width: 100%;}
    .CB-cta-home .cta-home a:before{opacity: 1;top: -10px;}
    .CB-cta-home .cta-home span{display: none;}
    .newsleft, .societyright{width: 100%!important;}    
   

    /* third part */
    .CB-order-bar .release-date{margin: 0 auto; width: 100%;}
    .CB-order-bar .release-date p{font-size: 5vw;  line-height: normal;text-align: center;}
    .CB-order-bar .release-date p span{  font-size: 10vw;  width: 100%;  float: left;  border-top: none;}
    .CB-order-bar .cta-order{ max-width: 98%;}
    .CB-order-bar .cta-order .preorder{max-width: 100%;}     
    
}

@media screen and (max-width: 545px){
    .youtube-playlist div.popup-box { 
        height: 360px;
        margin: -96px 0 0 -141px;
        width: 88.5%;
        background: #000; 
    }
    .second_panel .societyright div.popup-box .scrollable-rq { width: 100%; }
    .second_panel .societyright div.popup-box .overlay-thumbnails-spacers-rq { height: initial; margin: 0; }
    .second_panel .societyright div.popup-box .boxgrid { width: 30%; height: 50px; }
    .second_panel .societyright div.popup-box .boxgrid img { height: initial; }
}
@media screen and (max-width: 648px){
    .second_panel .societyright .youtube-playlist .scrollable-rq { width: 236px;  }
}
@media screen and (max-width: 1024px){
    .second_panel .societyright .youtube-playlist .scrollable-rq { width: 396px;  }
}
@media screen and (max-width: 980px){
    .second_panel .societyright .youtube-playlist .carousel_wrap-rq { height: 534px  }
}
@media screen and (max-width: 800px){
    .second_panel .societyright .youtube-playlist .carousel_wrap-rq { height: 434px  }
}

@media screen and (max-width: 360px){
    .second_panel .societyright .youtube-playlist .carousel_wrap-rq {height: 186px;}
    .second_panel .societyright .youtube-playlist .scrollable-rq { width: 129px; }
    
    .second_panel .societyright .youtube-playlist a.left {margin-left: 40px;}
}