@charset "utf-8";

@font-face {
  font-family: gothicb;
	src:url("../fonts/gothicb.ttf");}

@font-face {
  font-family:arvin_r;
  src:url("../fonts/Arvin_Regular.ttf");
}

::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {background-color: transparent;;
	border-radius: 10px;} 

::-webkit-scrollbar-thumb { background-color:#00A7C1 ;
	border-radius: 10px;
	box-shadow: inset 0 0 6px rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb:hover { background-color:dimgrey;}
::-webkit-scrollbar-corner{ background-color:dimgrey;}

html{scroll-behavior: smooth;}

body{
	width: 100%;
	height: auto;
	margin: 0%;
}
main{
	padding-top: 3%;
	width:1366px ;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
header{
	position: fixed;
	z-index: 1000;
	background-color: #fff;
	float: left;
	width:100%;
	height:auto;

	  }

#logoini{ width: 20%;
	height: auto;
	opacity:1;
	animation: logo 3s;
	transform:scale(1);

	
}
@keyframes logo{
	
	0%{opacity:0;transform:scale(0);}
	40%{opacity:1;}
	60%{opacity:0.5;}
	100%{opacity:1;transform:scale(1);}
}
#logoresponsive{display: none;}

.fixed{
	position: fixed;
	width: 100%;
	height:50px;
	z-index: 1000;	
}

 


nav{	
margin-bottom: 25%;
	padding-top: 0.5%;
    margin-top: 4.9%;
    text-align: center;
	background-color: white;
   }

nav ul{ 
	
	list-style: none;
	transform: translateX(0%);
	opacity:1; 
	animation-name: menu;
	animation-duration: 2s;	
    
  
}
nav ul li{ 
	width: 100%;
	height: auto;
	font-family: gothicb;
	text-decoration: none;
	display: inline;
	font-size: 22px;
	list-style:none;
	margin-right:3%;
	color:#000000;
	
}


@keyframes menu{
	
	from {transform: translateX(100%);opacity:0;}
	to {transform: translateX(0%);opacity:1;}
	
}

nav ul li a:link{
	
	color:#000000;
	text-decoration: none;
}

 nav ul li a:hover{
	
	color:#5DA6BE;
	text-decoration: none;
	
}

 nav ul li a:active{
	
	color:#009C81;
	text-decoration: none;
}

 nav ul li a:visited{
	
	color:gray;
	text-decoration: none;
}

.caja_adorno{
	float:none; 
	width: 350px;
	height: 25px;
	text-align: left
	
}
.adorno{
	float: left;
	width: 325px;
	height: auto;
	text-align: left;
}
.principal{
	float: left;
	width: 100%;
	height: auto;
	clear: both;
	margin-bottom: 2%;
}

.principal_acerca{
	float: left;
	width: 100%;
	height: auto;
	clear: both;
	margin-bottom: 2%;
}

.principal_servicios{
	float: left;
	width: 100%;
	height: auto;
	clear: both;
	margin-bottom: 5%;}


#slider{
	clear: both;
	float: left;
	width: 100%;
	height: auto;
	margin-top:3%;
	margin-bottom: 5%;
}

article{
	float: left;
	width: 100%;
	height: auto;
	background-color: #FFFFFF;
	
}
article h1{
	font-family: gothicb;
	float: left;
	color: #000000;
	font-size: 32px;
	margin-top: 10%;
}



.img_prin{
	float: left;
	background-color: transparent;
	width: 35%;
	height: 350px;
	margin-top: 5%;
	margin-left: 10%;
	clear: both;
	
}

.solo {
	
		
}

.ts {
	color: #00A7C1;	
	text-align:center;
	width:100%;
	height: auto;
	float: 	left;
	margin-top: 20%;
	
}
.txt_servicio{
	
	margin: 10% 0% 25% 0%;
	
	
}
.txtsrv  {
	width: 80%;
	text-align-last: center;
	margin-right: 2%; 
	margin-left: 10%;
	margin-top: 10%;
	
		
}
.img_servicios{
	width: 100%;
	height:auto;
	background-color: aqua;
	clear: both;
	
}
.parrafos{
	
	
	width:40%;
	 margin-left:10%;
	margin-bottom: 10%;
	margin-top: 10%;
	font-family: arvin_r;
	float: left;
	
	
	
   }

.parrafos_servicios{
	float: left;
	width:22%;
	height: 22px;
	font-family: arvin_r;
	margin: 0%1%0%1%;
	text-align: center;	
   }

article p {
	text-align:justify;
	font-size: 18px;
	line-height: 1.8rem;
	letter-spacing: 0.04rem;
	clear: both;	
}

footer{
   float: left;
    width: 100%;
    height: auto;
    background-image: -webkit-linear-gradient(270deg,rgba(255,255,255,0.00) 33.17%,rgba(66,158,189,0.79) 81.35%,rgba(42,89,105,1.00) 100%);
    background-image: -moz-linear-gradient(270deg,rgba(255,255,255,0.00) 33.17%,rgba(66,158,189,0.79) 81.35%,rgba(42,89,105,1.00) 100%);
    background-image: -o-linear-gradient(270deg,rgba(255,255,255,0.00) 33.17%,rgba(66,158,189,0.79) 81.35%,rgba(42,89,105,1.00) 100%);
    background-image: linear-gradient(180deg,rgba(255,255,255,0.00) 33.17%,rgba(66,158,189,0.79) 81.35%,rgba(42,89,105,1.00) 100%);
	
}

#copyright p{
	color:#000000;
	font-size: 1rem;
	text-align: center;
	margin-top: 6%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

/*empieza productos index*/
.principal_productos{

	width: 100%;
	height: auto;
	clear: both;
	margin-bottom: 2%;
	
	
}
#titulo_productos{	
	float: left;
	color: #000000;
	margin-left: 8%;
	margin-top: 5%;
	font-size: 40px;
	
}

.adorno_individual{ 
	float: left;
    width: 450px;
	
}

#grilla{
	float: left;
	width: 80%;
	margin: 5% 10%;

}

.grilla{
	margin:0.3%;
	float: left;
	width: 32.7%;
	height:auto;
	background-color:transparent;
	
}	

.sub_productos{
	clear: both;
	float: left;
	margin: 5% 0% 0% 22%; 
	
}
.img_prin_pr{
	float: left;
	width:100%;
	height: 350px;
	margin-top: 5%;
}

.img_productos{
	width:100%;
	height: auto;
}

.img_prin_producto{
	float: left;
	width: 33%;
	height: 350px;
	margin-top: 5%;
	margin-left: 0%;
	margin-bottom: 5%;
}
.parrafos_producto{
	
	width:100%;
	margin-bottom: 0%;
	margin-top: 10%;
	font-family: arvin_r;
	float: left;
	
}
.txt_productos{
	
	width:100%;
	margin-bottom: 10%;
	margin-top: 0%;
	font-family: arvin_r;
}




.catalogo_completo h1 {
	font-size: 18px;
	margin-left: 5px;
	margin-right: 5px;
	
}
/*termina productos index*/

/*empieza products*/
.products{
	float: left;
	width:100%;
	height: auto;
	
	
}
.subtitulo{
	clear: both;
	font-family: gothicb;
	font-size: 30px;
	width: 75%x;
	float: left;
	color: #00A7C1;
	
}

.img_products{
	
	clear: both;
	width: 100%;
	height: auto;
	margin-top:5%;
	float: left;
	
}

.imagenes_productos{
	
	
	height: auto;
	width: 33.3%;
	float: left;
}

.txt2_products{
	
	clear: both;
	width: 75%;
	height: auto;
	margin-top:5%;
	float: left;
	font-family: arvin_r;
	font-size: 20px;
	text-align: justify;
}

.txt_papel{
	
	
	width: 29%;
	margin: 0% 3% 0% 1.2%;
	height: auto;
	margin-top:5%;
	float: left;
	font-family: arvin_r;
	font-size: 20px;
	text-align: justify;
}

.subtitulos_papel{

	font-family: gothicb;
	font-size: 30px;
	width: 100%;
	float: left;
	color: #00A7C1;
	text-align: center;
	
}

/*seccion acerca*/

#tit_acerca{margin-top: 5%;}
#art_acerca{ 
	width: 100%;
	height: 750px;

}

/*seccion contacto*/


#tit_contactos{
	
	font-family: gothicb;
	float: left;
	color: #000000;
	margin-left: 0%;
	font-size: 32px;
	margin-bottom: 2%;
	margin-top: 25%;
	
	
}

#txt_contacto{
	float: left;
	width: 100%;
	height: auto;
	margin-right: 0%;
	clear: both;
	margin-top: 5%;
	margin-left: 0%;
	margin-bottom: 5%;
	text-align: center;
	
}
.interno{
	width: 33%;
	height:auto;
	float: left;
	text-align: center;
	
}


 #txt_contacto h3{
	 
	font-family: arvin_r;
    text-align:center;
	font-size: 18px;
	line-height: 1.8rem;
	letter-spacing: 0.04rem;
			 
}

#txt_contacto h3 ul li{
	 
	list-style: none;
			 
}


#contenedor_mapa {
	float: left;
	width: 100% ;
	height: auto;
	
}
#mapa 
{
	width:100% !important;
	height: 350px !important;
}

#respo{display: none;}

@media screen and (max-width:1300px)and (min-width:601px) and (orientation:landscape)
{	
	main{
		width:80%;
		height: auto;
		margin-left: auto;
		margin-right: auto;
	
	}

	
	
	.principal{
	width: 100%;
	height: 350px;
}
	.img_prin{
	
	width: 30%;
	height: 250px;
	margin-top: 5%;
	
	}
	.parrafos{
	
	width:50%;
	height: 200px;
	overflow:auto;
	 
	margin-bottom: 10%;
	margin-top: 7%;
	font-family: arvin_r;
	
	
	
	
   }

	
}




/*responsive*/


txt2_products{
	
	clear: both;
	width: 75%;
	height: auto;
	margin-top:5%;
	float: left;
	font-family: arvin_r;
	font-size: 20px;
	text-align: justify;
}

@media screen and (max-width:600px) and (orientation:portrait){
	
	
	#respo{ 
		width: 100%;
		display: block;
		position: fixed;
	z-index: 10000000000000;
    background-color: white;
		
	}
	

	.img_prin{
		width: 100%;
		height: auto;
	}


	.img_prin_pr{
	
		width: 80%;
		height: auto;
		
	}
	
	.img_prin_producto{
		width:  33%;
		height: auto;
		
	}
	.parrafos_producto{
	
	width:100%;
	margin-bottom: 0%;
	margin-top: 10%;
	font-family: arvin_r;
	float: left;
	
}
	.txt_productos{
	margin:auto;
	width:100%;
	margin-bottom: 10%;
	margin-top: 0%;
	font-family: arvin_r;
	text-align: justify;
}
	
	.principal_servicios{
	text-align: center;
	float: left;
	width: 100%;
	height: auto;
	clear: both;
	margin-bottom:10%;
	}
	

	
	.parrafos_servicios{
	text-align: center;
	width:100%;
	height:auto;
	font-family: arvin_r;
	margin: 0%0%10%0%;
	text-align: center;	
   }



	#respo img{
		width: 40%;
		height: auto;
		margin: 0%;
		
	}
	.ts {
	color: #00A7C1;	
	width:100%;
	height: auto;
	margin-top: 20%;
	
}
.txt_servicio{
	width: 100%;
	height: auto;
	text-align: center;
	margin: auto;
	
	
}
	.imagenes_productos{
	
	
	height: auto;
	width: 33.3%;
	float: left;
}
	
.txtsrv  {
	width: 80%;
	text-align: center;
	margin-right: auto; 
		
}
.img_servicios{
	text-align: center;
	width: 50%;
	height:auto;
	background-color: aqua;
	margin: auto;
	
	
}
	
	#slider{
	margin-top: 20%;
	width: 100%;
	height: auto!important; 
	margin-bottom: 12%;
}
		#responsive{
	
	display: block;

}
	main{
	
	width: 360px;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}
	
	header{
	display: none;
	}
	
	#logoini{
		
		width: 40%;
	}
	 
	nav{
		background-color:#5DA6BE;
		
		
		
	}
	.fixed{
		display: none;
	}
	
	nav ul{text-align:center;background-color:#5DA6BE; }
	
	nav ul li { 
		display:grid;
		font-size: 18px;
		margin-bottom: 10px;
	}
	
	
	
	::-webkit-scrollbar {
		display: none;
}
	
	
	
	article h1{
	font-family: gothicb;
	font-size: 24px;
	
}

.adorno{
	float: left;
	width: 210px;
	height: auto;
	text-align: left;
	
	
	}
	
	.txt_papel{
		text-align:justify;
		font-size: 14px;
	}
	
	.subtitulos_papel{

	font-family: gothicb;
	font-size: 16px;
	width: 100%;
	float: left;
	color: #00A7C1;
	text-align: center;
	
}
	
	.img_prin{
	
	width: 100%;
	height: 350px;
	margin-top: 5%;
	
}
.parrafos {
	text-align: center;
	width:100%;
	height: 150px;
	overflow:visible;
	 margin-left:0%;
	margin-bottom: 80%;
	margin-top: 7%;
	font-family: arvin_r;
	
   }
	
.parrafos p{
	text-align: justify;
	font-family: arvin_r;
	height: 150px;
	
   }

	.txt2_products{
	
	clear: both;
	width: 75%;
	height: auto;
	margin-top:5%;
	float: left;
	font-family: arvin_r;
	font-size: 20px;
	text-align: justify;
}

	
article p {
	text-align:left;
	font-size: 18px;
	line-height:1.5rem;
	letter-spacing: 0.04rem;	
}
	
	
	#tit_contactos{
	
	font-size: 24px;
	margin-left:  0%;
		margin-bottom: 20%;

	
}

#txt_contacto{
	width: 100%;
	height: auto;
	
	
}
 #txt_contacto h3{
	font-family: arvin_r;
	font-size: 18px;
	line-height: 1.8rem;
	letter-spacing: 0.04rem;
	 text-decoration: none;
	 
	 
}
	
	#txt_contacto ul  {
		text-align: center;
		list-style: none;
		text-decoration: none; }

#contenedor_mapa {
	width: 100% ;
	height: auto;
	margin-top: 15%;
	margin-bottom: 5%;
	
}
#mapa 
{
	width:100% !important;
	height: 350px !important;
}

	
	
	
	footer{
  
    width: 100%;
    height: 100px;
    
}

#copyright p{
	color:#000000;
	font-size: 0.6rem;
	margin-top: 10.5%;
	}

	
	
}