/* You can type here any CSS code that will be loaded both on your admin and front-end pages.
Let us help you by giving a few example CSS classes: */

/* Front-end sliders & preview */

.ls-container { /* The slider itself */

}

.ls-slide { 

}

.ls-slide a:hover {
	color: blue;
	text-decoration: underline;
}

.ls-slide #yourID {

}

.ls-slide .yourClass {

}

/* Side color of 3D objects */
.ls-3d-box div { background: #777; }

.ceramic-slide-container {
	position: relative;
	float: left;
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
}

.ceramic-slide-container .slide-price-block {
	position:absolute; 
	top: 15%;
    left: 20%;
	width: 300px;
	height: 175px;
	margin: 0;
	padding:0;
	
}

.ceramic-slide-container .slide-price-block .big-price{
	margin: 0;
	padding:0;
	font-size: 12em;
	font-family: "helvetica", "arial";
    font-weight: 400;
	line-height: 1;
}	

.ceramic-slide-container .slide-price-block .big-price .dollar-sign {
	color:#4d4d4d;
	font-size: 0.4em;
	vertical-align: super;
}
.ceramic-slide-container > .red {
	color: #c31718;
}

.ceramic-slide-container .slide-price-block .price-regular-striked {
	color: #4d4d4d;
	text-decoration: line-through;
	font-size:4em;
}

.ceramic-slide-container .white-bg {
	position: absolute;
    width: 80%;
	left: 10%;
    height: 70%;
    background-color: rgb(255,255,255,0.8);
    top: 65px;
}

.ceramic-slide-container .ceramique {
	background: url(/img/cms/slider/ensemble_de_ceramiques.png) center center no-repeat fixed;
	background-size: 100%;
	position: absolute;
    width: 150px;
    height: 300px;
    top: 80px;
    left: 65%;
}

.ceramic-slide-container .slide-ceramic-badge { 
	background: url(/img/cms/slider/badge_bottom.png) center center no-repeat fixed;
    position: absolute;
    width: 500px;
    top: 57%;
    left: 55%;
    height: 500px;
    background-size: 100%;
}

.ceramic-slide-container .slide-title-block {
	position:absolute; 
	top: 50%;
	left: 20%;
	width: 565px;
	height: 300px;
	margin: 0;
	padding:0;
}

.ceramic-slide-container .slide-title-block .main-title{
	margin: 0;
	padding:0;
	font-size: 10em;
	font-family: "Charter", "Georgia";
	color: #262626;
    font-weight: 100;
	line-height: 1;
}

.ceramic-slide-container .slide-title-block .sub-title{
	color: #4d4d4d;
	font-size:4em;
}

@media (max-width: 800px) {
	
	.ceramic-slide-container .ceramique {
    	width: 90px;
    	height: 200px;
    	top: 22px;
	}
	
	.ceramic-slide-container .slide-ceramic-badge {
		width: 300px;
		top: 20%;
		height: 500px;
	}
	
	.ceramic-slide-container .white-bg {
    	top: 35px;
	}
}

@media (max-width: 1300px) and (min-width:1050px) {
	
	.ceramic-slide-container .ceramique {
    	top: 0px;
	}
	
	.ceramic-slide-container .slide-ceramic-badge {
		top: 51%;
	}
	
	.ceramic-slide-container .white-bg {
    	top: 30px;
	}
}

@media (max-width: 1050px) and (min-width:800px) {
	
	.ceramic-slide-container .ceramique {
    	width: 115px;
		top:0;
	}
	
	.ceramic-slide-container .slide-ceramic-badge {
		top: 46%;
		width: 400px;
	}
	
	.ceramic-slide-container .white-bg {
    	top: 30px;
		height: 75%;
	}
}