/* =============================================================================
   SHOP BLOODBOWL 2
   ========================================================================== */
#main {
}
#shop {
	
	width: 100%;
	margin:0px;
	padding:10px 0px 0px 0px;
	font-family: 'helioscondbold', Arial, "Helvetica CY", Helvetica, sans-serif;
	color:#fff;	
}
#shop_platform,
#shop_pack,
#shop_retailer, 
#shop_footer {
	position: relative;
	float: left;	
	overflow: hidden;
}
.shop_txt {
	height:20px;
	font-family: 'helioscondbold', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-align: center;
	text-transform: uppercase;
	font-size: 18px;
	margin-bottom: 10px;
	opacity:1;
	transition: all 0.4s ease-out;
}

.shop_comingsoon{
	height:auto;
	text-align: center;
	text-transform: uppercase;
	font-size:20px;
	margin-top:10px;
	color:#aaa;
}

/* =============================================================================
   TITLE
   ========================================================================== */
	 
#shop_title{
    text-align: center;
    text-transform: uppercase;
		min-height:50px;
		margin-bottom:15px;
}
#shop_title h2{
  font-size: 34px;
  margin-bottom: 0px;
}
#shop_title h3{
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 5px;
    color: #BC1F04;
}


/* =============================================================================
   COUNTRY
   ========================================================================== */
#shop_country {
	width:70%;
	height:auto;
	margin:0px auto 15px auto;
}
#shop_country_nav {
	position: relative;
	overflow: hidden;
	width:100%;
	height:100%;
	text-align:center;
} 
#shop_country_nav ul {	
	position: relative;
	display:block;
	margin:0;
	padding:0;
}
#shop_country_nav ul:before, #shop_country_nav ul:after {
  content: "";
  display: table;
}
#shop_country_nav ul:after {
  clear: both;
}
#shop_country_nav li {
	position: relative;
	display:inline-block;
	padding: 0;
	list-style: none;
	opacity: 0.4;
	transition: all 0.2s ease-out;
	cursor:pointer;
	width: 40px;
} 
#shop_country_nav li img{
	width: 90%;
}
#shop_country_nav li.active {
	opacity: 1;
} 
#shop_country_nav li:hover {
	opacity: 0.8;
} 

/* =============================================================================
   BTN PLATEFORMES
   ========================================================================== */
#shop_platform {
	width:100%;
	text-align: center;
	/*height:405px;*/
}
.packs_content{
	width: 50%;
	float: left;
    min-height: 100px;
    position: relative;
    padding: 15px;
    text-align: center;
}
.packs_content #shop_pack,.packs_content #shop_retailer{
	display: inline-block;	
	float: none;
}
#shop_btn_pc, 
#shop_btn_pcdigital,
#shop_btn_ps4,
#shop_btn_xone,
#shop_btn_ps3, 
#shop_btn_x360 {
	display:inline-block;
	padding: 0px 10px;
	text-align: center;
	width: 25%;
	margin: 0px 10px 12px 10px;
	cursor: pointer;
	transition: all 0.3s ease-out;
	background: #000;
	border: 1px solid #333;
}
#shop_btn_pc:hover,
#shop_btn_pc.active {
	background: #5a5752;
}
#shop_btn_pcdigital:hover,
#shop_btn_pcdigital.active  {
	background: #7c7f83;
}
#shop_btn_ps4:hover,
#shop_btn_ps4.active  {
	background: #0070C7;
}
#shop_btn_xone:hover,
#shop_btn_xone.active {
	background: #107C10;
}
#shop_btn_ps3:hover,
#shop_btn_ps3.active {
	background: #0054C3;
}
#shop_btn_x360:hover,
#shop_btn_x360.active {
	background: #5CC21F;
}
#shop_btn_pc:hover, 
#shop_btn_pcdigital:hover,
#shop_btn_ps4:hover,
#shop_btn_xone:hover,
#shop_btn_ps3:hover,
#shop_btn_x360:hover {
	transition: all 0.3s ease-out;
}

#shop_btn_comingsoon div {
	padding: 0px 10px;
	text-align: center;
	width: 65%;
	margin: 0px auto 10px auto;
	transition: all 0.3s ease-out;
	background: #dedede;
}

/* =============================================================================
   PACKS
   ========================================================================== */
#shop_pack {
	width: 44%;
	height:405px;
}
#shop_pack_pc, 
#shop_pack_pcdigital,
#shop_pack_ps4,
#shop_pack_xone, 
#shop_pack_ps3,
#shop_pack_x360 {
	width: 100%;
	position: absolute;
	top: 20px;
	left: 0px;
	text-align:left;	
	z-index: 1;
	opacity: 0;
	transition: all 0.3s ease-out;	
}
#shop_pack .active {
	z-index: 2;
	opacity: 1;
	transition: all 0.8s ease-in-out;
}

/* =============================================================================
   RETAILERS
   ========================================================================== */
#shop_retailer {
	width: 50%;
	height:385px;
	padding-bottom: 20px;	
}
#shop_retailer_pc, 
#shop_retailer_pcdigital, 
#shop_retailer_ps4, 
#shop_retailer_ps3, 
#shop_retailer_xone, 
#shop_retailer_x360 {
	position: absolute;
	top: 30px;
	left: 0px;
	width:100%;
	height:325px;
	padding-right:20px;
	overflow:hidden;
	transition: all 0.8s ease-in-out;
	z-index: 1;
	opacity: 0;
}
#shop_retailer_pc.active, 
#shop_retailer_pcdigital.active, 
#shop_retailer_ps4.active, 
#shop_retailer_ps3.active, 
#shop_retailer_xone.active, 
#shop_retailer_x360.active {
	z-index: 2;
	opacity: 1;
}
#shop_retailer a , #shop_retailer span.soon{
	font-size: 17px;
	text-transform: uppercase;
	display: block;
	margin-bottom: 10px;
	padding: 7px 10px;
	width:100%;
	background:#000;
	color:#fff;
	text-align:left;
	border: 1px solid #333;
	transition: all 0.3s ease-out;
}
#shop_retailer a:hover {
	background:#085d8f;
}
#shop_retailer_pc a:hover, .shop_dlc_platforms a:hover {
	background: #5a5752;
}
#shop_retailer_pcdigital a:hover  {
	background: #7c7f83;
}
/*
#shop_retailer_ps4:hover  {
	background: #0070C7;
}*/
#shop_retailer_xone a:hover {
	background: #107C10;
}
/*#shop_retailer_ps3:hover {
	background: #0054C3;
}
#shop_retailer_x360:hover {
	background: #5CC21F;
}*/



/* ICONES STEAM, XBOXLIVE et PSN */
#shop_retailer a .icone-steam {
	float:left;
	margin-right:7px;
}
#shop_retailer a .icone-psn {
	float:left;
	margin-right:7px;
}
#shop_retailer a .icone-xbla {
	float:left;
	margin-right:7px;
}

#shop_retailer a i {
	margin-right:4px;
}
.pob, .pobby{
	/*float: right;*/
    background-color: #FFAB00;
    color: black;
    font-size: 12px;
    padding: 2px 5px;
    margin: 0 0 0 25px;
}
span.pob{
	float: right;
}
.pobby{
    background-color: transparent;
    color: white;
}

/* =============================================================================
   FOOTER
   ========================================================================== */
#shop_footer {
	position: relative;
	float:left;
	width:100%;
	margin:15px 0px 40px 0px;
}
#shop_text {
	position: relative;
	/*height:260px;*/
	overflow:hidden;
	font-family: 'helioscondregular', Arial, "Helvetica CY", Helvetica, sans-serif;	
	text-align: justify;
	font-size: 15px;
	line-height: 18px;
	font-weight:normal;	
	color:#ccc;
	padding:0px 20px 0px 0px;
	margin-right:5px;
}
#shop_text p{
	margin: 0;
	line-height:15px;
	font-size: 0.9em;
}
#shop_text span{
	color: #fff;
}

#shop_trailer {
	position: relative;
	float:left;
	display:inline-block;
	width:100%;	
	text-align:right;
	margin-top: 34px;
}
#shop_player {
	width: 100%;
	height: 0px;
	padding-bottom:56.25%;
	height: 0px;
	overflow: hidden;
}
#shop_player iframe,
#shop_player object,
#shop_player embed {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

/* =============================================================================
   DLC
   ========================================================================== */
#shop_dlc {
	position:relative;
	overflow:hidden;
	float:left;
	width: 100%;
	min-height:230px;
	/*margin-left:20px;*/
	text-align:left;
/*	border-left: rgba(255,255,255,0.5) 1px solid;
	border-right: rgba(255,255,255,0.5) 1px solid;
	border-bottom: rgba(255,255,255,0.5) 1px solid;*/
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.3+0,0+100 */
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0.3+1,0+100 */

	/*background: transparent url(../img/pattern/pattern_grey.gif) repeat;*/
}
.shop_dlc_titre {
	background: url(../img/shop/title.png) left top no-repeat;
	width: 100%;
	margin: 0px 0px -3px 0px;
	font-family: 'trump_town_proregular', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 22px;
	color: #fff;
	padding: 6px 6px 6px 50px;
	text-align:left;
}
.shop_dlc_titre:before {
	content: url(../img/shop/puce_title.png);
	position: absolute;
	left: 0;
	top: 0;

}
.shop_dlc_content {
	width: 100%;
	min-height: 100px;
	position: relative;
	padding:15px;
	text-align: center;
}
.shop_dlc_bloc {
	display: inline-block;
	position:relative;
	text-align: center;
	/*background: transparent url(../img/pattern/pattern_greylight.gif);*/
	width:100%;
	height:200px;
	/*float:left;*/
	margin:15px;
}
.bloc-title {
	position:relative;
	height:38px;
	padding:6px 0px 0px 27px;
	font-family: 'dark11', Arial, "Helvetica CY", Helvetica, sans-serif;
	font-size:20px;
	line-height:1.1em;
	font-weight: normal;
  font-style: normal;	
  margin-top: 20px;	
	text-transform:uppercase;		
	/* background: transparent url(../img/community/title.jpg) top left repeat-x; */
	background: url(../img/shop/title_shop.png) top left no-repeat;
	
}
.bloc-title h1{
	font-size: 22px;
	margin-left: 30px;
}
.bloc-title h2{
	font-size: 18px;
	margin-left: 30px;
}
/*.shop_dlc_bloc:nth-child(2n) {
	background: transparent url(../img/pattern/pattern_greyextralight.gif);
}
.shop_dlc_bloc:nth-child(2n+1) {
	background: transparent url(../img/pattern/pattern_greylightlight.gif);
}*/
/*#dlc1{
	background:url(../img/shop/lmbg.jpg) right top no-repeat;	
	background-size: cover;
	border: 1px solid #009de0; 
	    min-height: 145px;
}
#dlc2{
	background:url(../img/shop/webg.jpg) right top no-repeat;	
	background-size: cover;
	border: 1px solid #69a840; 
	    min-height: 145px;
}*/
#dlc1{
	background-size: 100%;
	/*border: 1px solid #009de0; */
	    min-height: 100%;
}
#shop.en #dlc1{
	background:url(../img/shop/dlc/spacemarines_wide_en.png) right top no-repeat;	
}
#shop.de #dlc1{
	background:url(../img/shop/dlc/spacemarines_wide_de.png) right top no-repeat;	
}
#shop.fr #dlc1{
	background:url(../img/shop/dlc/spacemarines_wide_fr.png) right top no-repeat;	
}
#shop.es #dlc1{
	background:url(../img/shop/dlc/spacemarines_wide_es.png) right top no-repeat;	
}
#dlc2{
	background:url(../img/shop/dlc/wood-elves1.jpg) right top no-repeat;	
	background-size: 100%;
	/*border: 1px solid #69a840; */
	    min-height: 100%;
}
#dlc3{
	background:url(../img/shop/dlc/norse1.jpg) right top no-repeat;	
	background-size: 100%;
	/*border: 1px solid #71a0c9; */
	    min-height: 100%;
}
.shop_dlc_bloc:hover .shop_dlc_platforms,.shop_dlc_bloc:focus .shop_dlc_platforms,
.shop_dlc_bloc:hover .shop_dlc_btn,.shop_dlc_bloc:focus .shop_dlc_btn{
	display: block;
	/*position: absolute;*/
}
.shop_dlc_bloc:hover .shop_dlc_platforms,.shop_dlc_bloc:focus .shop_dlc_platforms{
	position: absolute;
}
.shop_dlc_logo {
	position:relative;
	display:inline-block;
	float:left;
	width:31%;
	padding-left:10px;
	padding-top:5px;
}
.shop_dlc_name {
	position: relative;
    display: block;
    width: 268px;
    float: right;
    height: 54px;
    /* left: 30%; */
    margin-top: 45px;
    margin-right: 45px;
	/*padding-left:15px;*/
	/*padding-top:35px;*/
}
.shop_dlc_platforms {
	position: relative;
    width: 100%;
    height: 100%;
    /*float: right;*/
    display: none;
    background-color: rgba(0,0,0,0.7);
/*    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;*/
}
.shop_dlc_btn:nth-child(2) {
	padding-top: 17px;
}
.shop_dlc_btn {
	width:80%;
	/*float:right;*/
    display: none;
	height:50px;
	padding-top:7px;
	margin: auto;
	text-align:center;
}
.dlc_btn_xbla, .dlc_btn_psn {
	/*border-bottom:2px solid #53535a;*/
}
.shop_dlc_platformlogo {
	width:190px;
	float:left;
}
.shop_dlc_btn_download,
.shop_dlc_btn_comingsoon {
	position:relative;
	float:right;
	margin-top:3px;
	margin-right:10px;
	font-size:18px;
	background: #234159;
	padding: 7px 12px 5px 10px;	
	color: #fff;
	-webkit-border-radius: 5px;
  border-radius: 5px;
	font-family: 'helioscondbold', Arial, "Helvetica CY", Helvetica, sans-serif;
	text-transform: uppercase;
}
.shop_dlc_btn_download {
	cursor: pointer;
}
.shop_dlc_btn_download:hover {
	background: rgba(0,0,0,0.3);
	color: #fff;
	border: none;
}
.shop_dlc_btn_comingsoon {
	background: rgba(0,0,0,0.3);
	color: #ccc;
}

#condition{
	position: absolute;
	bottom:12px;
	right: 0;
	z-index: 100;
	color: #ccc;
	font-size: 12px; 
}
.discount{
	float: right;
    color: red;
}
#condition .discountDeal{
	color: red;
}

#footer{
	position: relative;
}

#shop_trailer iframe{
	width: 100%;
}
#shop_pack_pc img{
	height: 100%;
}


/* =============================================================================
   MEDIA QUERIES
   ========================================================================== */
@media screen and (max-width: 1000px) {
	#shop_country {
		width:90%;
	}
	.packs_content{
		width: 100%;
	}
}

@media screen and (max-width: 768px) {
	#shop_dlc{
		width: 100%;
		margin-left:0; 
	}
	.shop_dlc_bloc{
		width:195px;
		height:166px;
	}
	#dlc1{
		background:url(../img/shop/dlc/spacemarines.jpg) right top no-repeat;	
		background-size: cover;
		/*border: 1px solid #009de0; */
		    min-height: 100%;
	}
	#shop_pack {
		width: 50%;
	}
	#shop_retailer_pc, #shop_retailer_pcdigital, #shop_retailer_ps4, #shop_retailer_ps3, #shop_retailer_xone, #shop_retailer_x360{
		padding-right: 0;
	}
}

@media screen and (max-width: 577px) {
	#shop_dlc{
		width: 98%;
		margin-left:0; 
	}
	.shop_dlc_content {
		padding:0px;
	}
	.shop_dlc_platforms {
	   /* width: 92%;
		margin: 70px 4% 0 4%;*/
	}
	.shop_dlc_name{
	    width: 94%;
	    margin-left: 4%;
		margin-top: 10px;
		position: absolute;
	}
	.shop_dlc_name img{
		display: block;
		margin: 0 auto;
	}
	.shop_dlc_titre{
		font-size: 17px;
		margin-bottom: 10px;
	}
}
@media screen and (max-width: 500px) {
	#shop_dlc{
		margin-top:50px; 
	}
	#shop_btn div{
		display: block;
		max-width: 178px;
		margin: 5px auto; 
	}
	#shop_btn_pc, #shop_btn_pcdigital, #shop_btn_ps4, #shop_btn_xone, #shop_btn_ps3, #shop_btn_x360{
		width: 69%;
	}
}
@media screen and (max-width: 400px) {
	.shop_dlc_name img{
		width: 100%;
	}
}