@charset "utf-8";
/*@import url("../js/scroll.js.css");*/
/* CSS Document */

/**{
font-family: 'Oswald', sans-serif;
margin:0px;
}*/

/*header{
 background-color:#FFF;
 max-width:1000px;
 min-height:128px;
 margin:0 auto;	
 overflow:hidden;Cuando hay cajas flotando a la derecha e izquierda
}*/

#icon-redes{
    width: 40px;
    height: 50px;
    font-size: 30px;
    color: #969696;
    padding-left: 13px;
    cursor: pointer;
	float: right;
    margin-left: -16px;
}

#ws-icon-detalle{
background-color: rgb(255,255,255,0.8);
    width: 170px;
    height: 200px;
    position: fixed;
    z-index: 9;
    right: 9px;
    bottom: 121px;
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 8px;
    padding-bottom: 177px;
    border-radius: 20px 20px 10px 10px;
    border: solid 2px rgb(74,218,128);
    color: #000;
    
	display:none;
	animation:1s entradac2 1;
}




@keyframes entradac2{
0%{
   opacity:0;
}
30%{
	opacity:0;
	transform:translateY(100px);
	}
}

#icon-text{
width: 80%;
    height: 30px;
    font-size: 11px;
    margin: 0 auto;
    padding: 5px;
    
}

#icon-text p{
text-align: justify;
}

#ima-contacto{
background-color:#0C0;
width:70px;
height:70px;
border-radius: 35px;
margin:0 auto;
}

#ws-icon{
background-color: rgb(74,218,128,0.8);;
    /*width: 80px;*/
    height: 64px;
    position: fixed;
    z-index: 9;
    right: 60px;
    bottom: 50px;
    padding: 7px;
    border-radius: 20px;
}



#hori{
background-color:#0d6efd;
min-height:50px;
}

#horizontal{
max-width:1000px;
min-height:50px;
margin:0 auto;
}

#contenedor{
background-color:#FFF;
max-width:1000px;
min-height:20px;
margin:0 auto;
overflow:hidden;
}

#li-border{
border-bottom:solid #000000 1px !important;
}

#lateral{
margin:22px;
padding:4px;
color:#00F;
font-size:20px;
}

#centra{
width:230px;
min-height:20px;
text-align:center;
margin:0 auto;
overflow:hidden;
}

#idio{
float:left;
}

#cajas{
background-color:#FFF;
max-width: 701px;
min-height:180px;
margin: 0 auto;
overflow:hidden;
}







.contenido{
background-color:#FFF;
min-height:500px;
overflow: hidden;
}

#titulo{
text-align:center;
padding:25px 0 0 0;
font-size:24px;
color:#03F;
}

#titulo-principal{
text-align:center;
padding:45px 0 40px 0;
font-size:40px;
color:#03F;
}

#titulo-Menu{
background: #696969;
    text-align: center;
    padding: 200px 0 200px 0;
    color: #fff;
    font-size: 70px;
}


#conte{
font-family:Arial, Helvetica, sans-serif;
text-align:justify;
font-size:18px;
overflow:hidden;
}

.classervi{
transition: 1.5s ease;
 		-moz-transition: 1.5s ease; /* Firefox */
 		-webkit-transition: 1.5s ease; /* Chrome - Safari */
 		-o-transition: 1.5s ease; /* Opera */
}

#servi center{
color:#696969;
}

#servi p{
text-align:justify;
}


#servi:hover a{
color:#03F;
}

#servi:hover, #servi-all:hover{
transform : scale(1.03);
		-moz-transform : scale(1.03); /* Firefox */
		-webkit-transform : scale(1.03); /* Chrome - Safari */
		-o-transform : scale(1.03); /* Opera */
		-ms-transform : scale(1.03); /* IE9 */
}

/*PRODUCTOS*/
#gale{
background-color:#696969;	
width:165px;
min-height:230px;
padding:12px;
margin:8px 8px 8px 20px;
float:left;
border-radius:8px;
overflow:hidden;
}

#fotogale{
margin:0 auto;
width:164px;
height:50px;
}

#titulogale{
width:100%;
text-align:center;
float:left;
padding:8px 0 0 0;
}

#precio{
width:100%;
text-align:center;
color:#ffffff;
float:left;
padding:8px 0 0 0;
}

#comprar{
margin:0 auto;
padding:12px 0 0 0;
float:left;
width:164px;
height:50px;
}

/*PRODUCTOS*/


/*FORMULARIO*/

.botonformu{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+99,d1d1d1+100,fefefe+100 */
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 99%, rgba(209,209,209,1) 100%, rgba(254,254,254,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 99%,rgba(209,209,209,1) 100%,rgba(254,254,254,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 99%,rgba(209,209,209,1) 100%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */

border:solid 4px #666666;
padding:8px 35px 8px 35px;
margin:4px 0 4px 0;
color:#06F;
font-size:12px;
border-radius:7px;
}


.formu{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e2e2e2+0,dbdbdb+99,d1d1d1+100,fefefe+100 */
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 99%, rgba(209,209,209,1) 100%, rgba(254,254,254,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 99%,rgba(209,209,209,1) 100%,rgba(254,254,254,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 99%,rgba(209,209,209,1) 100%,rgba(254,254,254,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
	
 border:solido 1px #666666;
 width:90%;
 padding:8px 28px 8px 2%;
 margin:4px 0 4px 3px;
 border-radius:7px;
}
/*FORMULARIO*/


#boton a{
color:#000;
text-decoration:none;
}

#boton:hover{
background-color:#00F;	
}

#c1:hover img{
animation:1s rotacion 1;
}

@keyframes rotacion{
0%{
	opacity:0;
	transform:rotate(270deg) scale(2.4);
	}
}

#t1, #t2, #t3{
padding:5px;
margin:2px;
}

.claseconte{
padding:30px;
}
.claseconte2{
padding:15px;
}
.claseconte3{
max-width: 603px;
min-height: 40px;
margin: 0 auto;
padding:30px 5px 5px 5px;

}


#conte p{
font-family:Arial, Helvetica, sans-serif;
}


.claset1{
	  text-align:center;
	  border-bottom:solid 1px #000000;
	}
	
#ico{
 text-align:center;
 padding:15px;
}

#textoico{
font-size:22px;
padding:15px;
text-align:center;
}
	
#boton{
	width:100px;
	margin:8px auto 1px auto ;
	text-align:center;
	background-color:#06F;
	padding:12px 25px 12px 25px;
	border-radius:12px 12px 0 0;
}

 #conte img{
		max-width:100%; 
        float:left;
        margin:0 10px 0 0;
       }
@keyframes catalogo{
0%{
transform:translateY(-300px)
}	
}

@keyframes menu{
0%{
opacity:0;
transform:translateY(500px)
}	
}

footer{
background:#696969;
min-height:128px;
overflow:hidden;
}

#foo{
background:#696969;
max-width:1000px;
min-height:128px;
margin:0 auto;
overflow:hidden;
}

/*PANTALLA DE ESCRITORIO*/
@media screen and (min-width:1200px)
{
	#logo{
		width:190px;
       padding:18px 0 0 10px;
       float:left;
	   animation:1s catalogo 1;
      }
	  
	  #logo img{
	    width:100%;
	}

    #telefono{
        
        width:140px;
        float:right;
        padding:12px;
        margin:8px;
    }
	
	#vertical{
         /*CUANDO HAY FLOAT OBLIGA A QUE SEA SOLO WIDTH*/
         width:300px;
         min-height:700px;	
         float:left;
		 animation:1s menu 1;
    }

    #derecho{
         width:700px;
         min-height:700px;
         float:right;
     }
	
	
	
	#c1{
        background-image:url(../imagenes/jpg/fondocaja.jpg);
        width:220px;
        min-height:180px;
        margin:5px 6px 12px 7px;
        float:left;
        border-radius:12px;
       }
	   
	 #direccion{
		 color:#FFF;
        width:400px;
        min-height:50px;
        margin:22px;
        float:left;
     }
	 
	 #redes{
        width:200px;
        min-height:50px;
        margin:22px;
        float:right;	
      }
	
	#desa{
     width:600px;
	 min-height:100px;
	 margin:0 auto;
	}
	
	#desa img{
	 width:100%;
	 height:100%
	}
	
	#servi{
	  background-color:#FFF;
	  width: 545px;
      min-height:100px;
      float:left;
      margin: 5px 20px 5px 20px;
	  padding:15px;
      border:solid 2px #696969;
	  
	}
	
	#servi-all{
	  background-color:#FFF;
	  width: 100%;
      min-height:100px;
	  padding:15px;
      border:solid 2px #696969;
	  box-sizing:border-box;
	}
	
	
}
/*PANTALLA DE ESCRITORIO*/



/*PANTALLA DE CELULAR*/
@media screen and (max-width:1200px)
{
	#logo{
		width:190px;
        padding:15px 0 0 0;
		margin:0 auto;
		text-align:center;
		animation:1s catalogo 1;
    }
	
	#logo img{
	    max-width:100%;
	}
	
	#telefono{
        
        width:240px;
        padding:12px;
        margin:8px auto;
		overflow:hidden;
    }
	
    #vertical, #desa{
         display:none;	 
    }

    #derecho{
         background-color:#FF6;
         min-height:700px;
     }
	 
	
	
	.claset2{
	float:left;
	}
	
	.claset3{
	float:right;
	}
	
	#c1{
        background-image:url(../imagenes/jpg/fondocaja.jpg);
        min-height:180px;
        margin:15px;
        border-radius:12px;
		
       }
	 
	#direccion{
		 color:#FFF;
        min-height:50px;
        margin:22px;
        text-align:center;
     }
	 
	 #redes{
        text-align:center;
        min-height:50px;
        margin:22px;
       }
	   
	   #servi{
      background-color:#FFF;
      min-height:306px;
      margin:5px;
	  padding:15px;
      border:solid 2px #696969;
	} 
	
	#servi-all{
	  background-color:#FFF;
	  margin:5px;
	  padding:15px;
      border:solid 2px #696969;
	  box-sizing:border-box;
	}
	
	#ws-icon-detalle{		
    height: 211px;    
    }
		 
}
/*PANTALLA DE CELULAR*/
.menu{}

/*SCROOL PARA MENU*/
.menu-fixed {
	background-color:#0d6efd;
	margin:0 auto;
	position:fixed;
	z-index:1000;
	top:0;	
	width:100%;
	box-shadow:0px 4px 3px rgba(0,0,0,.5);
}
/*SCROOL PARA MENU*/