@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/fondo-pant2.jpg");  /*Puede incluirse una imagen como fondo de Pantalla*/
/*    --fondo: rgb(240, 231, 231); */
    --ancho-contenedor: 100%;

/* Variables Texto Animado */
	--fuente2: 'Bebas Neue', cursive;
	--fondo2: url('../img/bg.jpg');
	--logotipo: #1a1a1a;
	--profesion: #f2f2f2;
	--primario: #2e5fff;
}


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

p {
    line-height: 27px;
}

a {
	text-decoration: none;
	color: #fff;
	outline: none;
}

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

.float-left {
	float: left;
}

.float-right {
	float: right;
}

/*================================
    * HEADERS y Menu de NAvegacion*
================================= */
header{
	/*background: rgb(235, 232, 50);*/
	/*background: linear-gradient(90deg, red, blue); */
	background: radial-gradient(rgb(160, 159, 159), rgb(158, 141, 141), rgb(202, 191, 191), rgb(35, 35, 39));
	/*background: radial-gradient(rgb(160, 159, 159), rgb(231, 229, 67), rgb(202, 191, 191), rgb(92, 92, 243)); */
/*	background: rgb(204, 223, 241); */
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20px 0px;
	border-bottom: 1px solid #dedede;
	border-radius: 8px;
	/*box-shadow: 1px 1px 30px rgba(221, 213, 211, 0.3);*/
	margin-bottom: 100px;
}

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

.logo {
	padding-top:4px;
	width: 120px;
}

/*=======================
    * 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;
}


/* ====================
	* VIDEO *
==================== */
/* Y así se adaptaría al 100% del ancho de página (para webs móviles sería útil) */
video{
	width:100%;
}


/* 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; }

/* 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); }
}


/* Tamaño Pequeño - Celulares -- LOGO ANIMADO*/
@media screen and (max-width: 600px){
	.display-21 {
		font-weight: 100;
		font-style: italic;
		font-size: 64px;
	}
	}

/*=======================
    * COMPONENTES *
======================= */
.card {
	padding: 40px;
	background: rgb(179, 179, 179);
	border-radius: 3px;
	box-shadow: 0px 0px 30px rgba(221, 213, 211, 0.3);
}

.card2 {
	padding: 20px;
	background: rgb(221, 199, 125);
	border-radius: 30px;
	box-shadow: 0px 0px 30px rgb(199, 196, 36);
}

.card-img1 {
	padding: 30px;
	background-image: url(../img/fondo-pant6.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(189, 190, 185);
}


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

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

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

.display-21 {
	font-weight: 500;
	font-style: italic;
	font-size: 54px;
}

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

/* ====================
	* HELPERS *
==================== */
.btn_enlace {
	display: block;
	margin: auto;
	margin-top: 50px;
	width: 15%;
	background-color: rgb(207, 207, 207);
	padding: 20px;
	text-align: center;
	color: rgb(49, 134, 184);
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	text-decoration: none;
	letter-spacing: 1px;
	border-radius: 50px;
	box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.50);
	transition: all 0.3s;
}


.btn_enlace:hover{
	background-color: rgb(180, 180, 180);
}

/* ====================
	* 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-justif {text-align: justify;}

.texto-color0 {color: #FFF;}
.texto-color1 {color: rgb(27, 59, 240);}
.texto-color2 {color: rgb(53, 199, 119);}
.texto-color3 {color: rgb(32, 204, 69);}
.texto-color4 {color: rgb(204, 120, 23);}
.texto-color5 {color: rgb(102, 101, 112);}
.texto-color6 {color: rgb(40, 98, 224);}

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