@charset "utf-8";
/* CSS Document */


.product_contain{
	position:relative;
	overflow:hidden;
	width:100%;
	height:100%;
	width:98%;
	height:70%;
	right:1%;
	left:1%;
	top:2%;
	background-color:black;
	border-top:solid 3px #ffd62a;
	border-bottom:solid 3px #ffd62a;
	}

#background_gallery{
	position:absolute;
	width:100%;
	height:auto;
	min-width:800px;
	margin:auto auto -4% auto;
	left:0;
	right:0;
	top:-60px;
	bottom:0;
	}

.up_body{
	position:relative;
	overflow:hidden;
	width:100%;
	height:17%;
	background-color:transparent;
	}
	
.product_title{
	position:relative;
	float:left;
	width:25%;
	height:66px;
	min-width:230px;
	margin-top:10px;
	margin-left:20px;
	background-image:url(../images_main/TTL_banner.png);
	background-size:100%;
	background-repeat:no-repeat;
	background-color:transparent;
	}
	
.product_title h3{
	margin-left:12%;
	font-family:"exo-regular";
	font-size:22px;
	line-height:48px;
	font-weight:normal;
	font-style:normal;
	color:white;
	}

/*==== The slider ====*/
.product_slider{
	position:relative;
	overflow-x:auto;
	overflow-y:hidden;
	white-space:nowrap;
	width:100%;
	height:77%;
	max-width:1440px;
	background-color:transparent;
	}

/*===== the single product =====*/
/* IMPORTANTE: per gestire la responsività di ogni singolo
div PRODOTTO è necessario fissare prima una dimensione MINIMA
ed una dim. MASSIMA ed usare l'unità vw invece della percentuale:
Mcustomscrollbar non accetta parametri in percentuale*/
.single_product{
	position:relative;
	display:inline-block;
	width:40vw;
	height:47vh;
	min-width:230px;
	max-width:345px;
	margin-top:10px;
	margin-left:45px;
	margin-right:45px;
	background-color:white;
	}	
	
.head_prod{
	position:relative;
	overflow:hidden;
	width:90%;
	height:50%;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	background-color:#fff;
	}

.head_prod img{
	position:absolute;
	width:100%;
	height:auto;
	margin:auto auto -20px auto; /* per averle alla stessa altezza crossbrowser*/
	top:0;
	left:0;
	right:0;
	bottom:0;
	border:0;
	background-color:#CCC;
	}


.head_prod a{
	position:absolute;
	width:100%;
	height:100%;
	background-color:white;
	}
	
.name_prod{
	position:absolute;
	width:110%;
	height:30px;
	margin-left:-5%;
	margin-top:-3%;
	-moz-transform:skew(-25deg);
	-webkit-transform:skew(-25deg);
	-o-transform:skew(-25deg);
	-ms-transform:skew(-25deg);
	transform:skew(-25deg);
	background-color:#323e50;
	}
	
.name_prod h3{
	font-family:"orbitron-regular";
	font-size:18px;
	line-height:27px;
	text-align:center;
	letter-spacing:1px;
	color:#ffd62a;
	-moz-transform:skew(25deg);
	-webkit-transform:skew(25deg);
	-o-transform:skew(25deg);
	-ms-transform:skew(25deg);
	transform:skew(25deg);
	}

.downPRD_body{
	position:absolute;
	width:100%;
	height:33%;
	bottom:0;
	background-color:transparent;
	}

.short_DSCRPT{
	position:relative;
	display:block;
	white-space:normal; /*Per annullare il white-space della div contenitore*/
	overflow:hidden;
	width:76%;
	height:84%;
	left:12%;
	top:0;
	color:#555;
	background-color:transparent;
	}

.short_DSCRPT p{
	font-family:"exo-regular";
	font-size:15px;
	text-align:justify;	
	line-height:16px;
	}

.downBTN{
	position:absolute;
	width:96px;
	height:35px;
	bottom:0;
	right:-26px;
	-moz-transform:skew(-25deg);
	-webkit-transform:skew(-25deg);
	-o-transform:skew(-25deg);
	-ms-transform:skew(-25deg);
	transform:skew(-25deg);
	background-color:#25a9e7;
	}

.downBTN a{
	position:absolute;
	width:100%;
	height:100%;
	background-color:transparent;
	font-family:"exo-regular";
	font-size:15px;
	line-height:35px;
	text-align:center;
	text-decoration:none;
	color:white;
	}

.downBTN p{
	-moz-transform:skew(25deg);
	-webkit-transform:skew(25deg);
	-o-transform:skew(25deg);
	-ms-transform:skew(25deg);
	transform:skew(25deg);
	}


@media screen and (max-width:779px){
	.product_title h3{
	font-size:17px;
	line-height:35px;
	}
	.short_DSCRPT p{
	font-size:13px;
	line-height:14px;
	}
}



@media screen and (min-width:780px){
	.product_title h3{
	font-size:20px;
	line-height:40px;
	}
	
	.single_product{
	width:35vw;
	height:48vh;
	margin-top:5px;
	margin-left:45px;
	margin-right:45px;
	}	

	.short_DSCRPT{
	width:90%;
	left:5%;
	}

	.short_DSCRPT p{
	font-size:15px;
	line-height:16px;
	}
}


@media screen and (min-width:1000px){
	.product_title h3{
	font-size:23px;
	line-height:45px;
	}
}


@media screen and (orientation:portrait){
	.product_title{
		width:33%;
	}
	.single_product{
		max-height:400px;
	}
}