@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/*====================
    * CONFIGURACION *
==================== */
/* Se utiliza after y before para poner margenes automaticos*/
*,
*::after,
*::before {
    box-sizing: border-box;
}

/*====================
    * VARIABLES *
==================== */
:root{
    --fuente: 'Open Sans', sans-serif;
    --fondo: url("../img/fondo2.jpg");  /*Puede incluirse una imagen como fondo de Pantalla*/
/*    --fondo: rgb(204, 204, 204); */
    --ancho-contenedor: 100%;
}

/*=======================
    * BOTON REDES SOCIALES *
======================= */

.social-icons {
/*	background: rgb(230, 233, 53);
	border-radius: 10px; */
    vertical-align: top;
    display: inline;
/*    font-size: 1.2em;
    padding: 0.5em; */
    font-size: 30px;
    padding: 2px 3px;
  }

.social-icons:hover{
	background: rgb(183, 181, 233);
}

/*=======================
    * ESTILOS GENERALES *
======================= */
body {
    background: var(--fondo);
    font-family: var(--fuente);
    font-size: 18px;
}

p {
    line-height: 27px;
}

/*
img {
	padding: 10px;
    vertical-align:top;
*/

.float-left {
	float: left;
}

.float-right {
	float: right;
}


/*=======================
    * HEADERS *
======================= */
header{
/*	background: radial-gradient(rgb(160, 159, 159), rgb(231, 229, 67), rgb(202, 191, 191), rgb(92, 92, 243));*/
	background: radial-gradient(rgb(160, 159, 159), rgb(231, 229, 67), rgb(202, 191, 191), rgb(104, 89, 89));
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20px 0px;
	border-bottom: 5px solid #353538;
	border-radius: 8px;
	/*box-shadow: 1px 1px 30px rgba(221, 213, 211, 0.3);*/
	margin-bottom: 80px;
}

li{
	display: inline-block;
	padding: 0px 5px;
	list-style: none;
}

.logo {
	padding-top:1px;
	width: 200px;
	cursor:pointer;
}


/*=======================
    * Ventana Emergente *
======================= */
.modal {
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.8) ;

    position: absolute;
    top: 0;
    left: 0;

    display: flex;

    /*La propiedad animacion lleva una funcion mas dos tipos de tiempos
      2s es el tiempo que demora en aparecer la ventana -> Primer tiempo
      2s es el tiempo que demora la pagina para mostrar la ventana -> Segundo tiempo
      forwards es el que deja fijo a la ventana hasta que se presiona
      la cruz (checked) */
    animation: modal 2s .6s forwards;
    visibility: hidden;
    opacity: 0;
}

/*Cuadro emergente*/
.contenido {
    margin: auto;
    width: 25%;
    height: 40%;
/*    background: white; */
	background: radial-gradient(rgb(160, 159, 159), rgb(231, 229, 67), rgb(202, 191, 191), rgb(104, 89, 89));
    border-radius: 10px;
}

#cerrar {
    display: none;
}

#cerrar + label {
/*  position: absolute; */
    position: absolute;
    color: #fff;
    font-size: 20px;
    z-index: 30;
    background:darkred;
    height: 35px;
    width: 35px;
    line-height: 35px;
    border-radius: 50%;
    right: 10px;
    cursor:pointer;

    /*La propiedad animacion lleva una funcion mas dos tipos de tiempos
      2s es el tiempo que demora en aparecer la ventana
      3s es el tiempo que demora la pagina para mostrar la ventana
      forwards es el que deja fijo a la ventana hasta que se presiona
      la cruz (checked) */
    animation: modal 2s .6s forwards;
    visibility: hidden;
    opacity: 0;

}

/*Se detecta el checked cuando se activa y se cierra
  la ventana emergente o modal */
#cerrar:checked + label, #cerrar:checked ~ .modal {
    display: none;
}

@keyframes modal {
    100% {
        visibility: visible;
        opacity: 1;
    }
}


/*=======================
    * CONTENEDORES *
======================= */
.contenedor {
    max-width: 85%;
    width: var(--ancho-contenedor);
    margin: 20px auto;
    overflow: hidden;
}

.contenedor-ancho {
	width: 100%;
	padding: 0 15px;
	margin: 20px auto;
}

/* ====================
	* GRID *
==================== */
.grid {
	display: grid;
	gap: 20px;
	margin-bottom: 20px;
}

/* Tamaño Grande - Computadoras y TV */
.col-1 { grid-template-columns: repeat(1, 1fr); }
.col-2 { grid-template-columns: repeat(2, 1fr); }
.col-3 { grid-template-columns: repeat(3, 1fr); }
.col-4 { grid-template-columns: repeat(4, 1fr); }
.col-5 { grid-template-columns: repeat(5, 1fr); }
.col-6 { grid-template-columns: repeat(6, 1fr); }
.col-7 { grid-template-columns: repeat(7, 1fr); }
.col-8 { grid-template-columns: repeat(8, 1fr); }
.col-9 { grid-template-columns: repeat(9, 1fr); }
.col-10 { grid-template-columns: repeat(10, 1fr); }
.col-11 { grid-template-columns: repeat(11, 1fr); }
.col-12 { grid-template-columns: repeat(12, 1fr); }

.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-10 { grid-column: span 10; }
.span-11 { grid-column: span 11; }
.span-12 { grid-column: span 12; }


/* Ajuste de Tamaño para el Menu Principal*/
@media screen and (max-width: 1083px) {
	.social-icons {
/*		background: rgb(230, 233, 53);
		border-radius: 20px; */
	    vertical-align:top;
	    display: inline;
/*	    font-size: 1.2em;
	    padding: 0.2em; */
	    font-size: 20px;
	    padding: 2px 2px;
	  }

	.social-icons:hover{
		background: rgb(183, 181, 233);
	}
}

@media screen and (max-width: 900px) {
	.social-icons {
/*		background: rgb(230, 233, 53);
		border-radius: 20px; */
	    vertical-align:none;
	    display:inline;
/*	    font-size: 0.6em;
	    padding: 0.2em; */
	    font-size: 18px;
	    padding: 2px 2px;
	  }

	.social-icons:hover{
		background: rgb(183, 181, 233);
	}
}

/* Tamaño Mediano - Tablets */
@media screen and (max-width: 992px) {
	.med-col-1 { grid-template-columns: repeat(1, 1fr); }
	.med-col-2 { grid-template-columns: repeat(2, 1fr); }
	.med-col-3 { grid-template-columns: repeat(3, 1fr); }
	.med-col-4 { grid-template-columns: repeat(4, 1fr); }
	.med-col-5 { grid-template-columns: repeat(5, 1fr); }
	.med-col-6 { grid-template-columns: repeat(6, 1fr); }
	.med-col-7 { grid-template-columns: repeat(7, 1fr); }
	.med-col-8 { grid-template-columns: repeat(8, 1fr); }
	.med-col-9 { grid-template-columns: repeat(9, 1fr); }
	.med-col-10 { grid-template-columns: repeat(10, 1fr); }
	.med-col-11 { grid-template-columns: repeat(11, 1fr); }
	.med-col-12 { grid-template-columns: repeat(12, 1fr); }

	.med-span-1 { grid-column: span 1; }
	.med-span-2 { grid-column: span 2; }
	.med-span-3 { grid-column: span 3; }
	.med-span-4 { grid-column: span 4; }
	.med-span-5 { grid-column: span 5; }
	.med-span-6 { grid-column: span 6; }
	.med-span-7 { grid-column: span 7; }
	.med-span-8 { grid-column: span 8; }
	.med-span-9 { grid-column: span 9; }
	.med-span-10 { grid-column: span 10; }
	.med-span-11 { grid-column: span 11; }
	.med-span-12 { grid-column: span 12; }
}

/* Tamaño Pequeño - Celulares */
@media screen and (max-width: 576px) {
	.peq-col-1 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-2 { grid-template-columns: repeat(2, 1fr); }
	.peq-col-3 { grid-template-columns: repeat(3, 1fr); }
	.peq-col-4 { grid-template-columns: repeat(4, 1fr); }
	.peq-col-5 { grid-template-columns: repeat(5, 1fr); }
	.peq-col-6 { grid-template-columns: repeat(6, 1fr); }
	.peq-col-7 { grid-template-columns: repeat(7, 1fr); }
	.peq-col-8 { grid-template-columns: repeat(8, 1fr); }
	.peq-col-9 { grid-template-columns: repeat(9, 1fr); }
	.peq-col-10 { grid-template-columns: repeat(10, 1fr); }
	.peq-col-11 { grid-template-columns: repeat(11, 1fr); }
	.peq-col-12 { grid-template-columns: repeat(12, 1fr); }
}


/*=======================
    * COMPONENTES *
======================= */
.card {
	padding: 40px;
/*	background: rgb(212, 212, 212);*/
	background-image: url(../img/fondo3.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);

	border-radius: 3px;
	box-shadow: 0px 0px 30px rgba(221, 213, 211, 0.3);
}

.card2 {
	padding: 20px;
	background: rgb(141, 211, 84);
	border-radius: 30px;
	box-shadow: 0px 0px 30px rgb(90, 112, 50);
}

/*********************************/
/***** Inicio Girar Imagen ******/
/******************************/
/**/
/* - Agregando animacion a las imagenes, girando ne 180ª para que - */
/* - muestre un texto al girar - */

.card-img1 {
	position: relative;
	overflow: hidden;
  
	padding: 20px 10px;
	vertical-align:top;
}

.card-img1 figure {
	margin: 0;
	padding: 0;
	position: relative;
	cursor: pointer;
}
 
.card-img1 figure img {
	width:300px;
	height: 200px;
	display: block;
	position: relative;
	z-index: 10;
	margin: -15px 0
}
 
.card-img1 figure figcaption {
	display: block;
	position: absolute;
	z-index: 5;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box
}
  
.card-img1 img {
	width: 100%;
	height: 110%;
/*	background-image: url(../img/Inf1.jpg); */
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
	transition: all .5s;
}

.card-img1:hover img{
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
	transition: all .5s;
}


.card-img1 figure h2 {
	font-family: 'Fira Sans', sans-serif;
	color: #fff;
	font-size: 20px;
	text-align: left;
	padding-bottom: 15px;
  }
  
  .card-img1 figure p {
	display: block;
	line-height: 18px;
	margin: 0;
	color: #fff;
	text-align: left
  }
  
  .card-img1 figure figcaption {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 59px 30px;
	border-radius: 15px;
	background-color: #40aecf;
	backface-visibility: hidden;
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
	text-align: center;
  }
  
  .card-img1 figure img {
	backface-visibility: hidden;
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s
  }
  
  .card-img1 figure:hover img, figure.hover img {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg)
  }
  
  .card-img1 figure:hover figcaption, figure.hover figcaption {
	-webkit-transform: rotateY(0);
	-moz-transform: rotateY(0);
	transform: rotateY(0)
  }
  
/*****************************/
/***** Fin Girar Imagen ******/
/*****************************/

.card-img2 {
	padding: 40px;
	background-image: url(../img/Inf19.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.card-img3 {
	padding: 80px;
	background-image: url(../img/2.jpeg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.card-img4 {
	padding: 80px;
	background-image: url(../img/Inf10.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.card-img5 {
	padding: 80px;
	background-image: url(../img/Inf13.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.card-img6 {
	padding: 80px;
	background-image: url(../img/Inf01.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	/*background-position-x: center;*/
	/*background: rgb(144, 211, 113); */
	border-radius: 15px;
	box-shadow: 0px 0px 5px rgb(90, 112, 50);
}

.nav {
	background: rgb(207, 204, 32);
	border-radius: 20px;
	display: flex;
	flex-wrap: wrap;
}

.nav .contenedor {
	display:flex;
	flex-wrap: wrap;
	margin: 1px auto;
}

.nav a {
	color: rgb(50, 121, 9);
	border-radius: 20px;
	text-decoration:none;
	display: flex;
	align-items: center;
	text-align: center;
	padding: 15px 25px;
	transition: .3s ease all;
	font-size: 18px;
	display: inline-block;
	list-style: none;
	text-transform: uppercase;
	font-weight: 700;
	transition: all 0.3s;
}

.nav a.activo,
.nav a:hover {
	background: rgb(182, 179, 21);
}

/* ====================
	* 	SLIDERS IMAGENES *
==================== */
.slider{
	width: 1000px;
	height: 400px;
	margin: auto;
	overflow: hidden;
	vertical-align:top;
}

.slider ul{
	display: flex;
	padding: 0px;
	width: 400%;

	animation: cambio 13s infinite alternate;
	animation-timing-function: linear;
}

.slider li{
	width: 100%;
	list-style: none;
}

.slider img{
	width: 100%;
}

@keyframes cambio{
	0% {margin-left: 0;}
	20% {margin-left: 0;}

	25% {margin-left: -100%;}
	45% {margin-left: -100%;}

	50% {margin-left: -200%;}
	70% {margin-left: -200%;}

	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}

/* ====================
	* FUENTES *
==================== */
h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
}

.display-1 {
	font-weight: 600;
	font-size: 54px;
}

.display-2 {
	font-weight: 500;
	font-size: 34px;
}

.display-3 {
	font-weight: 300;
	font-size: 44px;
}

.display-4 {
	font-weight: 150;
	font-size: 24px;
}

.display-5 {
	font-family: 'Fira Sans', sans-serif;
	font-weight: bolder;
	font-size: 14px;
}

/* ====================
	* FORMULARIOS *
==================== */
form * {
	font-family: var(--fuente);

}

form .input {
/*	padding: 10px 15px; */
	border-radius: 10px;
/*	border: 1px solid #d6d6d6; */
	transition: .3s ease all;
	width: 100%;
	margin-bottom: 20px;
/* nuevas asignaciones */	
	padding: 12px 20px 12px 40px;
	border: none;
	color: #0c37c7;
	box-shadow: none;
	background: #ffffff url(../img/icon-right.png) no-repeat 20px center;
	text-decoration: #0d1ad4;
}

form .input:focus {
	border: 1px solid #641ee7;
	outline: none;
}

.boton {
	background: #641ee7;
	border: none;
	cursor: pointer;
	color: #fff;
	display: inline-block;
	padding: 10px 15px;
	border-radius: 3px;
	text-align: center;
	line-height: 22px;
	transition: .3s ease all;
}

.boton:hover {
	background: #5114c2;
}

.boton.verde {
	background: #00a04a;
}

.boton.verde:hover {
	background: #00833d; 
}

.boton.formu {
	background: #239b13;
}

.boton.formu:hover {
	background: #108301;
}

/* ====================
	* FOOTERS *
==================== */
.footer {
	padding: 1px;
	width:30rem;
/*	float:none;
	clear:both;*/
	box-shadow: 0px 2px 2px #000;
	-moz-box-shadow:0px;
	height: 3rem;
/*	background-color: #c9c9c9;*/
	background-color: radial-gradient(rgb(160, 159, 159), rgb(231, 229, 67), rgb(202, 191, 191), rgb(104, 89, 89));
  }

.footer a {
	color: rgb(32, 32, 32);
}

/* ====================
	* BOTON WHATSAPP *
==================== */
.btn-wsp{
    position:fixed;
    width:60px;
    height:60px;
    line-height: 63px;
    bottom:25px;
    right:25px;
    background:#25d366;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:35px;
    box-shadow: 0px 1px 10px rgba(0,0,0,0.3);
    z-index:100;
    transition: all 300ms ease;
}
.btn-wsp:hover{
    background: #20ba5a;
}
@media only screen and (min-width:320px) and (max-width:768px){
    .btn-wsp{
        width:63px;
        height:63px;
        line-height: 66px;
	}
}

/* ====================
	* HELPERS *
==================== */
.no-margen { margin: 0 }
.no-margen-superior { margin-top: 0 }
.no-margen-inferior { margin-bottom: 0 }
.no-margen-izquierdo { margin-left: 0 }
.no-margen-derecho { margin-right: 0 }

.margen-inferior {margin-bottom: 20px;}
.margen-superior {margin-top: 20px;}

.texto-centrado {text-align: center;}
.texto-izquierda {text-align: left;}
.texto-derecha {text-align: right;}

.texto-color0 {color: #fff;}
.texto-color1 {color: rgb(27, 59, 240);}
.texto-color2 {color: rgb(28, 107, 224);}
.texto-color3 {color: rgb(32, 204, 69);}
.texto-color4 {color: rgb(204, 120, 23);}
.texto-color5 {color: #239b13;}
.texto-color6 {color: rgb(32, 32, 32);}

.boton-centrado {text-align: center;}