* {
	margin:0;
	padding:0;
	box-sizing:border-box;
}

html,
body {
	background-color: #ffff; /*limegreen*/
	text-rendering:optimizeLegibility;
	font-size:16px;
	font-family:'Open Sans','Arial',sans-serif;

}


.row {
	max-width:100%;
	margin:0 auto;
}

/*****CLEARFIX****/

.clearfix {
	zoom:1.5;
}


.clearfix:after {
	content:"";
	display:table;
	clear:both;
	visibility:hidden;
}

/**** BUTTONS*****/

.btn:link,
.btn:visited,
input[type=submit] 
 {
	text-decoration:none;
	padding:10px 30px;
	border-radius:200px;
	display:inline-block;
}


.btn-full:link,
.btn-full:visited,
input[type=submit] {
	background-color: green; /*#ed07b7*/
	color:#ffff;
}

.btn-full:hover,
.btn-full:active,
input[type=submit]:hover {
	background-color:orange; /*#BD0592*/
}

.btn-ghost:link,
.btn-ghost:visited {
	border:2px solid yellow; /*#ed07b7*/
	color:yellow; /*#ed07b7*/
}

.btn-ghost:hover,
.btn-ghost:active {
	background-color: red; /*#ed07b7*/
	color:#fff;
}

/*** HEADING SECTION ****/

h1 {

	font-size:500%;
	color: #fff;
	font-weight:400;
}


h2 {
	font-size:200%;
	color:#fff;
	font-weight:400;
}

/*** HEADER SECTION ****/

header {
	background-image:-webkit-linear-gradient(rgba(0,0,0,.1),rgb(0,0,0,.3)),url(../img/m3.jpg); 
	background-image:linear-gradient(rgba(0,0,0,.1),rgb(0,0,0,.3)),url(../img/m3.jpg);
	height:80vh;
	background-size:cover;
	background-position:center;
	position:relative;
}

.header-box {
	position:absolute;
	top:50%;
	left:50%;
	-webkit-transform:translate(-50%,-50%);
	        transform:translate(-50%,-50%);
	text-align:center;
}

.header-text-box {
	margin-bottom:100px;
}

.ul{
    list-style: none;
    padding: 0;
}

.li ul {
    display: inline;
    margin-right: 20px;
}


/***** NAVIGATION ******/


.main-nav {
	list-style:none;
	float:right;
	margin-top:50px;
}

.main-nav li {
	display:inline-block;
	margin-right:20px;
	text-transform:uppercase;
}

.main-nav li a:link,
.main-nav li a:visited {
	text-decoration: none;
	color:#fff;
	-webkit-transition:border-bottom 0.2s;
	transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active {
	border-bottom:2px solid #3f3f3f; /*#ed07b7 */
}

.logo {
	height:80px;
	width:auto;
	float:left;
}

.sticky-nav {
	position:fixed;
	left:0;
	top:0;
	background-color:rgba(255,255,255,.8);
	width:100%;
	box-shadow: 0 2px 2px #efefef;
	z-index:999;
}

.sticky-nav .logo {
	height:60px;
	margin-top:3px;
}

.sticky-nav .main-nav {
	margin-top:18px;
}

.sticky-nav .main-nav li a:link,
.sticky-nav .main-nav li a:visited {
	color:#555;
	padding:5px 0;
}

/* ====================
	* CONFIGURACION *
==================== */
/***,
*::after,
*::before {
	box-sizing: border-box;
}*/

/* ====================
	* VARIABLES *
==================== */
/*:root {
	--fuente: 'Open Sans', sans-serif;
	--fondo: #3F3F3F; 
	--ancho-contenedor: 1200px;
}
*/

/* ====================
	* CONTENEDORES *
==================== */

.contenedor {
	max-width: 100%;
	width: 100%; /*var(--ancho-contenedor)*/
	margin: 5px auto;
	overflow: hidden;
}

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

/* ====================
	* GRID *
==================== */
.grid {
	display: grid;
    grid-template-columns: auto auto;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	width:100%;
	margin-bottom: 20px;
}

/* ====================
	* COMPONENTES *
==================== */
.card {
	padding: 10px;
	background: #2f2f2f2f;
	color: orange;
	border-radius: 3px;
	box-shadow: 0px 0px 30px rgba(221,221,211,0.7);
}


/* Tamaño Grande - Computadoras y TV */
.col-1 { grid-template-columns: repeat(2, 1fr); }
.col-2 { grid-template-columns: repeat(2, 1fr); }
.col-3 { grid-template-columns: repeat(2, 1fr); }
.col-4 { grid-template-columns: repeat(2, 1fr); }
.col-5 { grid-template-columns: repeat(2, 1fr); }
.col-6 { grid-template-columns: repeat(2, 1fr); }
.col-7 { grid-template-columns: repeat(2, 1fr); }
.col-8 { grid-template-columns: repeat(2, 1fr); }
.col-9 { grid-template-columns: repeat(2, 1fr); }
.col-10 { grid-template-columns: repeat(2, 1fr); }
.col-11 { grid-template-columns: repeat(2, 1fr); }
.col-12 { grid-template-columns: repeat(2, 1fr); }
.col-13 { grid-template-columns: repeat(2, 1fr); }
.col-14 { grid-template-columns: repeat(2, 1fr); }
.col-15 { grid-template-columns: repeat(2, 1fr); }
.col-16 { grid-template-columns: repeat(2, 1fr); }
.col-17 { grid-template-columns: repeat(2, 1fr); }
.col-18 { grid-template-columns: repeat(2, 1fr); }
.col-19 { grid-template-columns: repeat(2, 1fr); }
.col-20 { grid-template-columns: repeat(2, 1fr); }
.col-21 { grid-template-columns: repeat(2, 1fr); }
.col-22 { grid-template-columns: repeat(2, 1fr); }
.col-23 { grid-template-columns: repeat(2, 1fr); }
.col-24 { grid-template-columns: repeat(2, 1fr); }
.col-25 { grid-template-columns: repeat(2, 1fr); }
.col-26 { grid-template-columns: repeat(2, 1fr); }
.col-27 { grid-template-columns: repeat(2, 1fr); }
.col-28 { grid-template-columns: repeat(2, 1fr); }
.col-29 { grid-template-columns: repeat(2, 1fr); }


 /*Tamaño Mediano - Tablets */
@media screen and (max-width: 992px) {
	.med-col-1 { grid-template-columns: repeat(2, 1fr); }
	.med-col-2 { grid-template-columns: repeat(2, 1fr); }
	.med-col-3 { grid-template-columns: repeat(2, 1fr); }
	.med-col-4 { grid-template-columns: repeat(2, 1fr); }
	.med-col-5 { grid-template-columns: repeat(2, 1fr); }
	.med-col-6 { grid-template-columns: repeat(2, 1fr); }
	.med-col-7 { grid-template-columns: repeat(2, 1fr); }
	.med-col-8 { grid-template-columns: repeat(2, 1fr); }
	.med-col-9 { grid-template-columns: repeat(2, 1fr); }
	.med-col-10 { grid-template-columns: repeat(2, 1fr); }
	.med-col-11 { grid-template-columns: repeat(2, 1fr); }
	.med-col-12 { grid-template-columns: repeat(2, 1fr); }
	.med-col-13 { grid-template-columns: repeat(2, 1fr); }
	.med-col-14 { grid-template-columns: repeat(2, 1fr); }
	.med-col-15 { grid-template-columns: repeat(2, 1fr); }
	.med-col-16 { grid-template-columns: repeat(2, 1fr); }
	.med-col-17 { grid-template-columns: repeat(2, 1fr); }
	.med-col-18 { grid-template-columns: repeat(2, 1fr); }
	.med-col-19 { grid-template-columns: repeat(2, 1fr); }
	.med-col-20 { grid-template-columns: repeat(2, 1fr); }
	.med-col-21 { grid-template-columns: repeat(2, 1fr); }
	.med-col-22 { grid-template-columns: repeat(2, 1fr); }
	.med-col-23 { grid-template-columns: repeat(2, 1fr); }
	.med-col-24 { grid-template-columns: repeat(2, 1fr); }
	.med-col-25 { grid-template-columns: repeat(2, 1fr); }
	.med-col-26 { grid-template-columns: repeat(2, 1fr); }
	.med-col-27 { grid-template-columns: repeat(2, 1fr); }
	.med-col-28 { grid-template-columns: repeat(2, 1fr); }
	.med-col-29 { grid-template-columns: repeat(2, 1fr); }


 /*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(1, 1fr); }
	.peq-col-3 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-4 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-5 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-6 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-7 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-8 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-9 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-10 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-11 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-12 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-13 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-14 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-15 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-16 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-17 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-18 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-19 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-20 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-21 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-22 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-23 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-24 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-25 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-26 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-27 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-28 { grid-template-columns: repeat(1, 1fr); }
	.peq-col-29 { grid-template-columns: repeat(1, 1fr); }
}