/*coloressssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss*/

#colores{ width: 100%;
		  background:url(../img/servicios/pintado/fondo-polvo2.png);
		  background-size: cover;
		  background-position: center center;
		  padding: 70px 20px 0px 20px}

/*textooooooooooooooooooooooooooooooo*/
.colores{ width: 50%;
		  float: left;
		  height: 500px;
		  position: relative;}

.colores-centro{ width: 100%;
				 position: absolute;
				 top: 50%;
				 left: 0;
				 transform: translateY(-50%);
				 padding: 0px 20px 0px 0px}

.colores-centro h1{  font-family: "Montserrat";
					 font-size: 30px;
					 color: #4B5863;
					 margin: 0 }

.colores-centro h2{  font-family: "Montserrat";
					 font-size: 30px;
					 color: #4B5863;
					 margin: 0 }

.colores-centro h2 span{ color: #111 }

.colores-centro p{  font-family: "Montserrat";
					font-size: 13.5px;
					color: #222;
					margin: 5px 0px 0px 0px;
					line-height: 18px }

.colores-centro h3{  font-family: "Montserrat";
					 font-size: 13px;
					 color: #5D6975;
					 margin: 20px 0px 10px 0px }

.colores-centro a{ text-decoration: none; }

.colores-btn{ width: 150px;
			  height: 40px;
			  background: #ff0000;
			  position: relative;
			  border-radius: 40px;
			  text-align: center;
			  margin: 5px 0px 0px 0px;
			  cursor: pointer;}

.colores-btn h4{ font-family: ebrima;
				 font-size: 13px;
				 color: #fff;
				 margin: 0;
				 line-height: 40px;
				 position: relative;
				 z-index: 1}

.colores-btn:hover{ background: #222;}


/*animacionnn resplandor*/
.colores-btn span{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: inherit;
	border-radius: inherit;
	opacity: .8;
	animation:pulseanimation  2s ease-out infinite;
	animation-delay: calc(1s * var(--i));
}

@keyframes pulseanimation{

	100%{
		opacity: 0;
		transform: scale(1.2)
	}


}









/*cartaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.colores-carta{ width: 50%;
		        float: left;
		        position: relative;
		        height: 500px}













/*mediooo centrooo*/
.sb-container {
	position: relative;
	width: 150px;
	height: 400px;
	margin: 0 auto;
}

.sb-container div {
    position: absolute;
	top: 0;
	left: 50px; 
	width: 110px;
	height: 400px;
	border-radius: 5px;
	cursor: pointer;
	text-align: center;
	background-image: url(../colores/img/fabric.png);
	
	-webkit-transform-origin: 25% 90%;
	-moz-transform-origin: 25% 90%;
	-o-transform-origin: 25% 90%;
	-ms-transform-origin: 25% 90%;
	transform-origin: 25% 90%;
	
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
	
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

.sb-container div:nth-child(1){
	background-color: #fff;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}

.sb-container div:nth-child(2){
	background-color: #F6F6F6;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}

.sb-container div:nth-child(3){
	background-color: #C4C7C4;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}

.sb-container div:nth-child(4){
	background-color: #99A0A8;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);
}

.sb-container div:nth-child(5){
	background:url(../colores/img/acero-lacado.png);
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);
}

.sb-container div:nth-child(6){
	background-color: #8D9290;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);
}

.sb-container div:nth-child(7){
	background-color: #45555b;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}

.sb-container div:nth-child(8){
	background-color: #484B52;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}


.sb-container div:nth-child(9){
	background-color: #f8ea47;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}

.sb-container div:nth-child(10){
	background-color: #e0a5ae;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}

.sb-container div:nth-child(11){
	background-color: #cc1517;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}

.sb-container div:nth-child(12){
	background-color: #29416e;
	box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}

.sb-container div:last-child{
	background: #645b5c url(../colores/img/cover.jpg) repeat center center;
	box-shadow: 
		-1px -1px 3px rgba(0,0,0,0.2),
		12px 12px 20px rgba(0,0,0,0.6),
		inset 2px 2px 0 rgba(255, 255, 255, 0.1);
}

.sb-container div:hover{ border: 1px solid#222 }

.sb-container div h4{ color: #222;
	                  font-family: Montserrat;
	                  margin: 40px 0px 0px 0px;
	                  font-size: 13px;}

.sb-container div h4 span{ color: #000 }


.sb-container div:last-child h4{
}


.sb-container div h5{ color: #fff;
	                  font-family: sans-serif;
	                  margin: 40px 0px 0px 0px;
	                  font-size: 15px}



@media screen and (max-width: 1000px){

/*textooooooooooooooooooooooooooooooo*/
.colores{ width: 100%;
		  float: left;
		  height:auto;}

.colores-centro{ width: 100%;
				 position: relative;
				 top: 0;
				 left: 0;
				 transform: translateY(0);
				 text-align: center;
				 padding: 0px 0px 0px 0px}

.colores-btn{ width: 150px;
	          margin: 5px auto 0px auto}




/*cartaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa*/
.colores-carta{ width: 100%;
		        float: left;
		        position: relative;
		        height: auto;
		        padding: 50px 0px 50px 0px}



}











@media screen and (max-width: 800px){

/*textoooooooooooooooooooooooooooo*/

.colores-centro h1{  font-size: 25px; }

.colores-centro h2{  font-size: 25px; }





/*mediooo centrooo*/
.sb-container { width: 150px;
	            height: 300px;
	            margin: 0 auto;
}

.sb-container div { position: absolute;
		            top: 0;
		            left: 50px; 
		            width:100px;
		            height: 300px;}

.sb-container div h4{ font-size: 10px}

.sb-container div h5{ font-size: 10px;}


}






@media screen and (max-width: 500px){



/*mediooo centrooo*/
.sb-container { width: 150px;
	            height: 300px;
	            margin: 0 auto;
}

.sb-container div { position: absolute;
		            top: 0;
		            left: 50px; 
		            width:80px;
		            height: 300px;}




}