/************************************Importamos fuentes de google***************************/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital@1&family=Roboto+Slab:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');


/********************************************************Dimensiones del contenedor**********************************************************************/
#contenedor{
	margin: 0 auto;
	width: 1200px;
	height: 2000px;
	
	position: relative;
}
/********************************************************Dimensiones del header************************************************************************************/
header{
	width: 1200px;
	height: 200px;
	background: white;
	overflow: hidden;
	position: relative;
	z-index: 1000;
	background: cover;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
/******************************************************Dimensiones del fondo en el header****************************************************************************/
.fondo{
	width: 1000px;
	}
header .fondo{
	float: left;
	width: 1000px;
	height: 150px;
}
.fondo img{
	width: 1200px;
	height: 200px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}
/******************************************************Estilo del menú con la posición sticky*********************************************************************/
nav{
	position: sticky;
	width: 780px;
	height: 70px;
	background: white;
	top: -0px;
	margin: 0 auto;
	z-index: 2000;
	box-shadow:0 0  0 2px rgb(255,255,255),0.0em 0.7em 1em rgba(0,0,0,0.3);;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;
}
nav li{
	height: 50px;
	float: left;
	list-style: none;
}
/******************************************************Estilo del  menú desplegable tienda**************************************************************************************/

#submenu2  li{
	margin-top: 2px;
}

#submenu li{
	margin-top: 9px;
}
nav .lista{
	text-align: center;
	margin: 10px;
	font-size: 20pt;
	display: block;
	width: 160px;
	height: 55px;
	text-decoration: none;
	color: black;
	padding-top: 20px;
	margin-top: -2px;
	transition: 0.2s;
	font-family: 'Merriweather', serif;
}
/*****************************************************Estilo  menú desplegable de robótica***************************************************************************************/
#submenu li{
	clear: left;
	margin-bottom: 20px;
	transition: 0.2s;
}
#submenu2 li{

	clear: left;
	margin-bottom:15px;
	transition: 0.22s;
}
nav .lista1 .submenu1{
	margin-bottom: 10px;
	position: absolute;
	width: 160px;
	height: 41px;
	font-size: 15pt;
 	margin-top: -4px;
 	text-decoration: none;
 	padding-bottom: 20px;
 	padding:19px;
 	box-shadow:  0 0  0 0px rgb(255,255,255),0.0em 0.7em 1em rgba(0,0,0,0.0);;
  border-radius: 2px;   
  background: white;
  color: black;
  transition: 0.2s;
	font-family: 'Merriweather', serif;
}
/****************************************************Estilo del menú desplegable tienda****************************************************************************************/

nav .submenu3{
	margin-bottom: 10px;
	position: absolute;
	width: 150px;
	height:50px;
	font-size: 16pt;
 	margin-top:3px;
 	text-decoration: none;
 	padding:12px;
 	padding-top:9px;
 	padding-bottom: 8px;
 	box-shadow:  0 0  0 0px rgb(255,255,255),0.0em 0.7em 1em rgba(0,0,0,0.0);;
   border-radius: 2px;
  transition: 0.2s;
	font-family: 'Merriweather', serif;
   background: white;
   color: black;
}
.menutienda2{
	z-index: 2000;
	display: none;
	background: white !important;
	margin-left: 130px;
	margin-top: -221px;
}
 ul li:hover > a{
	display: block;
	color: white;
 	background: #7A86B6;	

}
 ul li:hover > ul{
	display: block;		
}


#submenu2{

	display: none;
	margin-left: -30px;
}
ul{

	margin-top: -15px;
}



li:hover #submenu2{
 	transition: 0.5s;
 	display: block;

 }
nav #submenu{
	margin-left: -30px;
	transition: 1s;
	display: none;
}
/**************************************************Hover para cambiar el color y el fondo al pasar por encima de cada sección del menú******************************************************************************************/
 li:hover .lista{	
 	background: #495C83;
 	color: white;
 	font-size: 22pt;
 	box-shadow: 0 0  0 0px rgb(255,255,255),0.0em 0.7em 1em rgba(0,0,0,0.0);;
  transition: 0.2s; 

 }

 li:hover #submenu{
 	transition: 0.5s;
 	display: block;
 }
 .lista1:hover .submenu1{
 	width: 190px;
 	background: #7A86B6;
 	color: white;
 	font-size: 15pt;
 }
 /**************.lista1:hover .submenu3{
 	width: 175px;
 	
 }*********/
 /**********************************************************Dimensiones del main**********************************************************************************/

main{
	width: 1200px;
	height: 1800px;
	background: white;
}
/************************************************************dimensiones del footer********************************************************************************/

footer{
	width: 1200px;
	height: 200px;
	background: url(fondo10.jpg);
	position: absolute;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.menu1{
	width: 200px;
	height: 1760px;	
	float: left;
}
/*********************************************************estilo del menú de la derecha de la pagina con la publicidad***********************************************************************************/

#menu2 img{
	
	width: 200px;
	height: 400px;
	border-radius: 5px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
.contenido{
	width: 1000px;
	height: 1500px;
	float: left;
}
#menu2{
	margin-top: 50px;
	width: 200px;
	height:480px;
	float: left;
}
#menu3{
	margin-top:-40px;
	width: 200px;
	height: 480px;
	float: left;
}
#menu3 img{
	
	width: 200px;
	height: 400px;
	border-radius: 5px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
#social{
	margin-top: -40px;
	width: 200px;
	height: 400px;
	float: left;
	overflow: hidden;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
#social img{
	
	width: 200px;
	height: 400px;
	border-radius: 5px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
#social2{
	margin-top: 40px;
	width: 200px;
	height: 400px;
	float: left;
	overflow: hidden;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
#social2 img{
	
	width: 200px;
	height: 400px;
	border-radius: 5px;
	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
}
/**********************************************************Estilo del pequeño formulario de la derecha de la pagina**********************************************************************************/

#formulario{
	margin-top:80px;
	float: left;
	width: 200px;
	height: 480px;
}
#formulario form{
	border-radius: 10px;
	background: white;
	color:black;
	padding: 10px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
form .corto{
	border-top: 1px solid white;
	background: white;
	border-left:1px solid white;
	border-right:1px solid white;
}
#formulario p{
	margin-top: 0px;
	margin-left: 20px;
}
#formulario a{
	margin-left: 22px;
	text-decoration: none;
	color: blue;
}
/**************************************************************Estilo de los iconos del footer con hover******************************************************************************/
footer i{
	font-size: 25pt;
	margin:5px;
	padding-bottom: 10px;
	color: white;
}
a:hover i{
	color: lightblue;
}
.linea {
  margin:0px 20px;
  width:430px;    
  border-top:1px solid white;
  position: relative;
  top:18px;
  float:left;
  }
.leyenda {
  font-weight:bold;
  float:left;
 }
 .redes{
 	padding-top:30px;
 	padding-left: 40px;
 	width:1200px;
 	height: 200px;
 	margin:auto;
 }
 .pie{
 	top: 150px;
 	left:330px;
 	position: absolute;
 	color: white;
 }
/******************************************************************Estilo de la pagina principal , parrafos e imagenes**************************************************************************/
.entrada{
	padding-top: 30px;
	margin-right: 35px;
	font-size: 14pt;
	font-family: 'Roboto Slab', serif;
	text-align: justify;
 }

 .entrada img{
 	border-radius: 5px;
 	width: 610px;
 	height: 310px;
 	margin-right: 20px;
 	margin-left: 0px;
 box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 }

 .entrada2{
	margin-top: -15px;
	margin-right: 30px;
	font-size: 14pt;
	font-family: 'Roboto Slab', serif;
	text-align: justify;
 }
 .fotos img{
 	width: 250px;
 	height: 240px;
 	margin-top:20px;
 	margin-left: 40px;
 	margin-bottom: 40px;
 	float: left;
 	border-radius: 150px;
 		box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
 }
 .entrada3{

	margin-right: 17px;
	font-size: 14pt;
	font-family: 'Roboto Slab', serif;
	text-align: justify;
	margin-right: 30px;
 }
  .patro1{
 	margin-left:180px;
 }
 .patro{
 	margin-left: 230px;
 }
 .h21{
 	border:1px solid black;
 
 	padding:10px;
 	width: 345px;

 	font-family: 'Roboto Slab', serif;
 	margin-top: 120px;
 	margin-left:320px;

 }
 .h21:hover{
 	color: white;
 	background: black;
 	cursor: pointer;
 }
 /********************************************************Estilo del mensaje de cookies en la primera pagina************************************************************************************/
 #mensaje{
 	position: absolute;
 	background: white;
 	z-index: 1000;
 	width: 400px;
 	height: 360px;
 	bottom: 0px;
 	right: 0px;
 	border-radius: 20px;
 	border: 1px solid black;
 	box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
 }
 #mensaje i{
 	font-size: 40pt;
 	float: left;
 	margin-top:20px;
 	margin-left: 35px;

 }
 #mensaje h1{
 	margin-left: 20px;
 	margin-top: 35px;
 	font-size: 20pt;
 	font-family: 'Roboto', sans-serif;
 	float: left;
 }
 #mensaje p{
 	font-size: 18pt;
 	margin: 40px;
 	clear: left;
 	text-align: left;
 }
 #mensaje .aceptar{
 	text-decoration: none;
 	font-size: 20pt;
 	display: block;
 	position: absolute;
 	background: blue;
 	margin-left: 90px;
 	width: 110px;
 	height: 30px;
 	text-align: center;
 	background: white;
 	border-radius: 10px;
 	border: 1px solid black;
 }
 .aceptar:hover{
 	color: grey;
 	background: black;
 }
 #mensaje .rechazar{
 	display: block;
 	position: absolute;
	text-decoration: none;
 	font-size: 20pt;
 	background: blue;
 	width: 110px;
 	height: 30px;
 	text-align: center;
 	margin-left: 220px;
 	background: #FF3355;
 	border-radius: 10px;
 	border: 1px solid black;
 	color: black;
 }
 .rechazar:hover{
 	color: grey;
 }
 .polit {
 	font-size: 30pt;
 	margin-top: 50px;
 	margin-left: 200px;
 }
 .ppolit{
 	font-size: 14pt;
 	text-align:left;
 	margin-right: 40px;
 	font-family: 'Roboto Slab', serif;
 }
ol li{
 	font-size: 14pt;
 	margin-right: 30px;
 	font-family: 'Roboto Slab', serif;
 }
 /******************************************************Estilo para la sección de la tienda**************************************************************************************/
#tienda1 img{
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda2 img{
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda3 img{
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda4 img{
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda5 img{ 
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda6 img{
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda7 img{
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda8 img{ 
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda9 img{
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda10 img{ 
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda11 img{
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda12 img{ 
 	cursor: pointer;
	border-radius: 5px;
	width: 250px;
	height: 220px;
	margin-right: 0px;
	position: absolute;
	transition: 0.2s;
	top: 80px;
	left: 10px;
	z-index: 1000;
}
#tienda1,#tienda2,#tienda3,#tienda4,#tienda5,#tienda6,#tienda7,#tienda8,#tienda9,#tienda10,#tienda11,#tienda12{
	margin-top: 50px;
	margin-left: 30px;
	margin-right:10px;
	width: 270px;
	height: 320px;
	float: left;
	position: relative;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
#tienda1:hover img{
	top: -10px;
	transition: 0.2s;
}
#tienda2:hover img{
	top: -10px;
	transition: 0.2s;
}
#tienda3:hover img{
	top: -10px;
	transition: 0.2s;
}
#tienda4:hover img{
	top: -10px;
	transition: 0.2s;
}#tienda5:hover img{
	top: -10px;
	transition: 0.2s;
}#tienda6:hover img{
	top: -10px;
	transition: 0.2s;
}#tienda7:hover img{
	top: -10px;
	transition: 0.2s;
}#tienda8:hover img{
	top: -10px;
	transition: 0.2s;
}#tienda9:hover img{
	top: -10px;
	transition: 0.2s;
}#tienda10:hover img{
	top: -10px;
	transition: 0.2s;
}#tienda11:hover img{
	top: -10px;
	transition: 0.2s;
}#tienda12:hover img{
	top: -10px;
	transition: 0.2s;
}
/******************************************************Estilo para la opción de mostrar mas en los articulos de la tienda**************************************************************************************/
.oculto1{
	position: absolute;
	padding-top: 10px;
	bottom: 30px;
	left: 33px;
	text-decoration: none;
	display: block;
	text-align: center;
	font-size: 16pt;
	width: 200px;
	height: 40px;
	color: black;
	border:1px solid black;
	border-radius: 20px;
	background: white;
	transition: 0.2s;
	font-family: 'Roboto Slab', serif;
}
.oculto1:hover{
	background: #495C83;
	color: white;
	font-size: 17pt;
}
.h4tienda{
	margin-top: 30px;
	margin-bottom: 0px;
	font-size: 20pt;
	width:1000px;
	margin-left: 50px;
	
	font-family: 'Roboto Slab', serif;
}
.activo .lista{
	background: #495C83;
	color: white;
	font-size: 25pt;
}
.r1{
	width: 270px;
	height: 350px;
	background: red;
	float: left;
	margin-top: 100px;
	margin-right: 60px;
	
	box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
	
}
.r1 img{
	width: 270px;
	height: 350px;
	cursor: pointer;
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}
.r2{
	width: 935px;
	height: 950px;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
	float: left;
	margin-top: 50px;
	position: relative;

}
#t1{
	width: 935px;
	height: 350px;
	
	float: left;
}
#t1 img{
	 width: 935px;
	height: 350px;
}

#t2{
	width: 935px;
	height: 100px;

	font-size: 15pt;
	
	float: left;

}
	#t2 h2{
		margin-left: 30px;
	margin-top: 40px;
	font-family: 'Roboto Slab', serif;

}
#t3{
	width: 935px;
	height: 460px;
	
	float: left;
	
}
#t3 p{
	font-size: 15pt;
	text-align: justify;
	margin-bottom: 0px;
	margin-left: 30px;
	margin-right: 30px;
	font-family: 'Roboto Slab', serif;

}
/*********************************************************Estilo para el mensaje al hacer click en un producto***********************************************************************************/
.aviso{
	font-size: 15pt;
	width: 860px;
	padding-left: 10px;
	margin-left: 50px;
	margin-right: 20px;
	background: red;
	color: white;
	box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.producto{
	margin-top: 6px;
	text-align: center;
	font-size: 20pt;
	font-family: 'Roboto Slab', serif;
}
.producto1{
	width: 300px;
	height: 300px;
	float: left;
	margin-top: 50px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;	
	position: relative;
	overflow: hidden;
}
.producto1 p{
	margin-left: 10px;
}
.producto1 img{
	width: 300px;
	height: 200px;


}
/* CSS */
.button-92 {
  --c: #fff;
  /* text color */
  background: linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p,100%)/300% no-repeat,
    #495C83;
  /* background color */
  color: #0000;
  border: none;
  transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
  text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0   var(--c),
    calc(var(--_i,-1)*-0.08em)  .01em 2px #0004;
  outline-offset: .1em;
  transition: 0.3s;
}

.button-92:hover,
.button-92:focus-visible {
  --_p: 0%;
  --_i: 1;
}

.button-92:active {
  text-shadow: none;
  color: var(--c);
  box-shadow: inset 0 0 9e9q #0005;
  transition: 0s;
  
}

.button-92 {
  font-weight: bold;
  font-size: 2rem;
  margin: 0;
  cursor: pointer;
  padding: .1em .3em;
  border-radius: 5px;
}
.cons{
	width: 100px;
	height: 100px;
	position: absolute;
	z-index: 1010;
	bottom: -110px;
	right: 80px;
	
	color: white;
	border-radius: 100px;
	transition: 0.2s;
	cursor: pointer;
	

}
.producto1:hover .cons{
	right: 80px;
	bottom:10px;
}
.producto1:hover img{
	filter: blur(1.5px);
}
.producto1 .prec{
	font-size: 12pt;
	margin-left: 0px;
	margin-top: 25px;
	text-align: center;
	font-family: 'Roboto Slab', serif;
}
/***********************************************************Estilo para la Ventana con las distintas opciones de contacto*********************************************************************************/
#ventana{
	width: 290px;
	height: 180px;
	position: absolute;
	background: white;
	top: 50%;
	left:40%;
	z-index: 2000;
	border-radius: 10px;
	position: fixed;
	border: 1px solid black;
	display: none;

}
#ventana p{
	padding-top: -5px;
	text-align: center;
	font-family: 'Roboto Slab', serif;
}
#ventana a{
	display: block;
	margin-top: 10px;
	width: 200px;
	height: 20px;
	margin-left: 40px;
	text-decoration: none;
	color: white;
	text-align: center;
	font-family: 'Roboto Slab', serif;
	font-size: 10pt;
	border: 1px solid black;
	background: #3C3C3C;
	border-radius: 10px;
}
#ventana .cancel{
	margin-left: 100px;
	margin-top: 10px;
	display: block;
	width: 80px;
	background: red;
	border-radius: 10px;
	color: white;
}
#contenedor{
	z-index: 100;
	filter: blur(0px);
}
#ventana #info{
	background: white;
	color: black;
		display: none;
	border: 0px;
	text-decoration: underline;
}
/******************************************************************Estilo para el formulario de la pagina de contacto**************************************************************************/
#form fieldset{
	margin-top: 100px;
	margin-left: 200px;
	border-radius: 10px;
	border: 0px;
	font-family: 'Roboto Slab', serif;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
#form{
		margin-left: 100px;
		width: 600px;
	height: 700px;
}
#form label{
	margin-top: 20px;
	margin-left: 0px;
	margin-right: 5px;
	width: 110px;
	position: absolute;
	color: white;
	font-family: 'Roboto Slab', serif;
} 
#form input{
	margin-top: 40px;
			margin-left: 30px;
			width: 300px;
			height: 20px;
			border: 0px;
			border-bottom: 1px solid black;
			border-top: 0px;
			border-right: 0px;
			border-left: 0px;
			background-color: white;
			outline: none;
			color: black;
			font-family: 'Roboto Slab', serif;
			float: left;
			margin-bottom: 15px;
}
#form .meto{
			margin-left: 30px;
			font-family: 'Roboto Slab', serif;
			padding-top: 40px;
}
.contenido #form .punto{
			font-family: 'Roboto Slab', serif;
			margin-top: 5px;
			margin-left: 10px;
			width: 100px;
			height: 20px;
			border: 0px;
			border-bottom: 1px solid black;
			border-top: 0px;
			border-right: 0px;
			border-left: 0px;
			background-color: white;
			outline: none;
			color: grey;
}
.contenido #form #enviar{
			color: grey;
			margin-bottom: 20px;
			margin-left:130px;
			border-bottom: 0px;
			font-size: 15px;
			height: 30px;							
			width: 100px;
			border-radius: 10px;
			border: 1px solid grey;
			margin-top: 0px;
			cursor: pointer;
}
.contenido #form .validar{
	color: grey;
	margin-bottom: 20px;
	margin-left:105px;
	border-bottom: 0px;
	font-size: 15px;
	height: 30px;							
	width: 150px;
	border-radius: 10px;
	border: 1px solid grey;
	margin-top: 10px;
	cursor: pointer;
}
#valid:hover{
	background: #C8B6E2;
	
}
.validar:hover{
	
	color: white;
}
#enviar:hover{
	background: #C8B6E2;
}


/*********************************************************estilo para el final y el iframe de la pagina de contacto***********************************************************************************/
.punto p{
	margin-left: 0px;
	float: left;
	font-family: 'Roboto Slab', serif;
}
#text{
	display: none;
}
#text p{
	margin-left: 20px;
	font-size: 11pt;
	margin-left: 25px;
}
.circulo{
	margin-top: 4px;
}
textarea{
	margin-left: 30px;
	width: 300px;
	height: 100px;
	resize: none;
}
#text2{	
	display: none;
}
#text2 p{
	margin-top: 10px;
	margin-left: 90px;
}
.mapa{
	margin-top: 30px;
	margin-left: 80px;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}
.ubi{
	margin-left: 80px;
	font-size: 16pt;
	margin-top: 100px;
	font-family: 'Roboto Slab', serif;
}
}
.contenedor3{
	margin-top:60px;
	
	width: 980px;
	height: 600px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.contenedor4,.contenedor5,.contenedor6{
	
	width: 980px;
	height: 300px;
	margin-top: 25px;
		border-radius: 10px;
	float: left;
	margin-bottom: 30px;
	box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;

}

.contenedor4{
	margin-top: 50px;
	background: #7D869C;
}
.contenedor6{
	background: #7D869C;
}
.comp1,.comp2,.comp3{
	width: 300px;
	height: 300px;
	margin-left: 15px;
	margin-top: 50px;
	margin-right: 10px;
	float: left;
}
.comp4,.comp5,.comp6{
	width: 300px;
	height: 300px; 
	float: left;
	margin-left: 15px;
	margin-right: 10px;

}

.comp7,.comp8,.comp9,.comp10,.comp11,.comp12{
	width: 400px;
	height: 300px;
	float: left;
	margin-right: 50px;
	margin-left: 30px;
	
}
.comp1 img,.comp3 img,.comp5 img{
 width: 300px;
}

.contenedor3 h2{
	text-align: center;
	color:#495C83;
	font-family: 'Merriweather', serif;
}
.contenedor3 p{
	font-size: 15pt;
	text-align: center;
		font-family: 'Roboto Slab', serif;
}
.comp7 img{
	width: 300px;
	margin-top: 40px;
	margin-left: 40px;

}
.comp10 img{
	width: 300px;
	margin-top: 30px;
	margin-left: 30px;
}
.comp11 img{
	width: 200px;
	margin-left: 100px;
	margin-top: 30px;
}
.contenedor4 h2,.contenedor5 h2,.contenedor6 h2{
	margin-top: 40px;
text-align: center;
	color:#2D3B56;
	font-family: 'Merriweather', serif;
}
.contenedor4 p,.contenedor6 p{
	padding-left: 4px;
	text-align: justify;
		font-family: 'Roboto Slab', serif;
		color: white;
		margin-top: 20px;
		margin-left: 45px;
}
.contenedor5 p{
	padding-left: 4px;
	text-align: justify;
		font-family: 'Roboto Slab', serif;
		color: #2D3B56;
		margin-top: 20px;
		margin-left: 45px;
}
.contenedor4 a{
	text-decoration: none;
	color: white;

}
.comp12 p{
	margin-top: 20px;
 margin-bottom: 40px;
}




/* CSS */
.button-57 {
  position: relative;
  margin-left: 140px;
  overflow: hidden;
  border: 1px solid #18181a;
  color: white;
  display: inline-block;
  font-size: 15px;
  line-height: 15px;
  padding: 18px 18px 17px;
  text-decoration: none;
  cursor: pointer;
  background: #495C83;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  border-radius: 5px;
  font-family: 'Roboto Slab', serif;
}

.button-57 span:first-child {
  position: relative;
  transition: color 600ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 10;
}

.button-57 span:last-child {
  color: black;
  display: block;
  position: absolute;
  bottom: 0;
  transition: all 500ms cubic-bezier(0.48, 0, 0.12, 1);
  z-index: 100;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translateY(225%) translateX(-50%);
  height: 14px;
  line-height: 13px;
}

.button-57:after {
  content: "";
  position: absolute;
  bottom: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:white;
  transform-origin: bottom center;
  transition: transform 600ms cubic-bezier(0.48, 0, 0.12, 1);
  transform: skewY(9.3deg) scaleY(0);
  z-index: 50;
}

.button-57:hover:after {
  transform-origin: bottom center;
  transform: skewY(9.3deg) scaleY(2);
}

.button-57:hover span:last-child {
  transform: translateX(-50%) translateY(-50%);
  opacity: 1;
  transition: all 900ms cubic-bezier(0.48, 0, 0.12, 1);
}
.pagina1{
	width: 30px;
	height: 30px;
	display: block;
	float: left;
	margin-left: 450px;
	margin-top: -100px;
}

.pagina2{
	width: 30px;
	height: 30px;
	display: block;
	float: left;
	margin-left: 520px;
	margin-top: -100px
}
.pagina3{
	width: 30px;
	height: 30px;
	display: block;
	float: left;
	margin-left: 590px;
	margin-top: -100px
}


.pagina1 a,.pagina2 a,.pagina3 a{
	display: block;
	width: 50px;
	height: 35px;
	text-decoration: none;
	color: black;
	background: white;
	text-align: center;
	border-radius: 100px;
	float: left;
	padding-top: 10px;
	font-size: 15pt;
	box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

}
.activo2 {

	background: #495C83 !important;
 	color: white !important;
}

 .pagina1:hover a{
 	background: #495C83;
 	color: white;
 }
  .pagina2:hover a{
 	background: #495C83;
 	color: white;
 }
  .pagina3:hover a{
 	background: #495C83;
 	color: white;
 }
 .subida{
 	margin-left: 950px;
 	margin-top: -30px;
 	float: left;
 }
 .subida i{
 	font-size: 20pt;
 }
.migas {
	text-decoration: none;
	color: black;
}
#activo3{
	text-decoration: none;
	color: black;
	padding: 5px;
	border-radius: 10px;
	
box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
	
}