@charset "UTF-8";

.clear{
	clear: both;
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
}

body{
	margin: 0;
	padding: 0;
	font-family: Arial, "sans-serif";
	font-size: 20px;
	color: #fff;
}

body3{
	fonts-effect-three-dimensional;
	font-family: 'TR Heavy', Arial;
	font-size: 40px;
	color: #aaa;
}

body4{
	fonts-effect-neon;
	font-family: 'TR Heavy', Arial;
	font-size: 30px;
	color: #fff;
}

h1{
	margin: 0;
	padding: 0;
}

h2{
	margin: 0;
	padding: 0;
}

h3{
	margin: 0;
	padding: 0;
	text-align: right;
	font-size: 18pt;
}

h4{
	margin: 0;
	padding: 0;
	text-align: right;
}

.header{
	background-color: rgba(26,26,26,0.7);
	height: auto;
	width: 100%;
	float: center;
	position: fixed;
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-backdrop-filter: saturate(60%) blur(15px);
    -moz-backdrop-filter: saturate(60%) blur(15px);
	-ms-backdrop-filter: saturate(60%) blur(15px);
	z-index: 800;
}

.inner{
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
}

.logo{
	padding: 5px 0px 2px 2px;
	float: left;
}

.titulo{
	padding: 5px 0px 0px 0px;
}

.fecha{
	padding: 0px 0px 0px 0px;
	float: right;
}

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

.background{
	width: 100%;
	height: auto;
	background: url(assets/background.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.area{
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
}

.card{
	padding: 300px 23px 23px 23px;
	width: 42%;
}

.slogan{
	padding: 400px 0px 80px 0px;
	width: 100%;
	margin: 0 auto;
}

.slogan h1{
	text-shadow: 0px 0px 30px rgba(0,0,0,1);
	text-align: center;
	padding: 0px 23px 0px 23px;
	font-size: 30pt;
}

.voblogo{
	position: relative;
	top: 70px;
	float: right;
	margin: 0;
	padding: 0;
}

.extra{
	width: 42%;
	float: right;
	padding: 23px;
	position: relative;
	top: -120px;
}

.info{
	background: #0ABBB8;
	padding: 23px;
}

.info h2{
	font-weight: normal;
	font-size: 16pt;
}

.content{
	margin: 0 auto;
	padding: 60px 0px 60px 0px;
	max-width: 800px;
}

.area2{
	width: 100%;
}

.area2 h2{
	color: #4d4d4d;
	font-weight: bold;
	margin: 0 auto;
	padding: 0px 23px 0px 23px;
	font-size: 20pt;
}

.area2 p{
	color: #4d4d4d;
	font-weight: normal;
	font-size: 15pt;
	margin: 0 auto;
	padding: 10px 23px 5px 23px;
}

ul{
	color: #4d4d4d;
	font-size: 5pt;
}

ol{
	color: #4d4d4d;
	font-size: 5pt;
}

li{
	font-size: 15pt;
	padding-bottom: 10px;
}

.list{
	width: 100%;
	margin: 0 auto;
}

.pic{
	float: left;
	width: 18%;
	text-align: center;
	padding: 0px 0px 0px 23px
}

.tarjeta{
	padding: 140px 23px 0px 23px
}

.text{
	width: 75%;
	float: left;
}

.text h2{
	color: #4d4d4d;
	font-weight: bold;
	margin: 0 auto;
	padding: 0px 23px 0px 23px;
	font-size: 17pt;
}

.text p{
	color: #4d4d4d;
	font-weight: normal;
	font-size: 15pt;
	margin: 0 auto;
	padding: 10px 23px 70px 23px;
}

.footer{
	width: 100%;
	height: auto;
	background: #000;
	margin: 0 auto;
	padding: 0;
}

.credits{
	padding: 23px;
	max-width: 960px;
	margin: 0 auto;
}

.media{
	padding-left: 7px;
	text-align: center;
	float: left;
}

.www{
	float: right;
}

.www h2{
	font-weight: normal;
	color: #000;
}

.www a{
	text-decoration: none;
}

.extra2{
	width: 100%;
	margin: 0 auto;
	padding: 0;
	background: #fff;
	height: auto;
}

.center3{
	max-width: 1000px;
	padding: 50px 23px 50px 23px;
	margin: 0 auto;
}

.area3{
	max-width: 960px;
	margin: 0 auto;
	float: left;
	width: 60%;
}

.area3 h2{
	font-weight: normal;
	font-size: 16pt;
	padding-left: 23px;
	color: #4d4d4d;
}

.cta{
	width: 30%;
	float: right;
	padding: 10px 30px 10px 30px;
	background: #f15a29;
	transition: all ease-in-out 200ms;
	margin-top: 25px;
}

.cta h2{
	font-size: 16pt;
	color: #fff;
	overflow: visible;
	text-align: center;
}

.cta:hover{
	box-shadow: 0px 20px 20px -20px rgba(0, 0, 0, 0.3);
	transform: translate(0px, -2px) scale(1.05);
}

.bg{
	background-color: #fff;
}

.bg1{
	background-color: #CFF9FB; 
}

.col{
	width: 67.5%;
	float: left;
	padding-top: 10px;
}

.divi{
	width: 5%;
	float: center;
	height: 5px;
}

.note{
	background: #1A8BAA;
	padding: 0;
	margin: 20px 20px 20px 20px;
}

.note p{
	padding: 20px;
	margin: 0;
	color: #fff;
}

.col1{
	width: 100%;
	float: center;
}

.space{
	height: 68px;
}
.slider {
	width: 60%;
	margin: auto;
	overflow: hidden;
}

.slider ul {
	display: flex;
	padding: 0;
	width: 400%;
	animation: cambio 20s infinite alternate linear;
}

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

.slider img {
	width: 100%;
	height: 250px;
}

@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%;}
}


/*Dispositivos*/

@media (max-width:768px){
	.card{
		padding: 200px 23px 23px 23px;
		width: 38%;
	}
	
	.slogan{
		width: 100%;
	}
	
	.background{
		height: auto;
	}
	
	.voblogo{
		position: relative;
		top: 70px;
		float: none;
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}
	
	.area2 p{
		padding: 30px 50px 30px 50px;
	}
	
	.area3{
		max-width: 960px;
		margin: 0 auto;
		float: none;
		width: 100%;
		text-align: center;
		padding-bottom: 23px;
	}
	
	.cta{
		width: 200px;
		float: none;
		margin: 0 auto;
		clear: both;
	}
	
	.cta h2{
		font-size: 15pt;
	}
	
	.area3 h2{
		padding-left: 50px;
		padding-right: 50px;
	}
	
	.col1{
	width: 100%;
	}
	
	.tarjeta{
	padding-top: 23px;
	}
	
	.col{
		width: 100%;
		float: left;
		padding-top: 10px;
	}

	.divi{
		width: 5%;
		float: left;
		height: 10px;
		display: none;
	}
	
	.img{
		padding: 0px 50px 50px 50px;
	}
	
	.space{
		display: none;
	}
}

@media (max-width:485px){
	h3{
		text-align: center;
	}
	
	h4{
		text-align: center;
	}
	
	.logo{
		margin: 0 auto;
		width: 100%;
		text-align: center;
		padding: 23px 0px 23px 0px;
	}
	
	.titulo{
		display: none;
	}

	.fecha{
		display: none;
	}
	
	.background{
		height: auto;
	}
	
	.card{
		padding: 350px 0px 23px 0px;
		width: 100%;
		text-align: center;
		margin: 0 auto;
	}

	.slogan{
		padding: 250px 0px 0px 0px;
		width: 100%;
		text-align: center;
		margin: 0 auto;
		height: auto;
	}

	.slogan h1{
		text-shadow: 0px 0px 30px rgba(0,0,0,1);
		padding: 0px 23px 50px 23px;
		
	}

	.extra{
		width: 100%;
		float: right;
		padding: 0px 0px 23px 0px;
		position: none;
		top: 0px;
		margin: 0 auto;
	}

	.info{
		padding: 23px;
		margin: 0px 23px 23px 23px;
	}

	.info h2{
		font-size: 15pt;
	}
	
	.area3 h2{
		padding: 0px 20px 0px 20px;
	}
	
	.list{
		width: 100%;
		margin: 0 auto;
	}

	.pic{
		width: 100%;
		text-align: center;
		padding: 0px 0px 13px 0px
	}

	.text{
		width: 100%;
	}
	
	.text h2{
		padding: 0px 50px 0px 50px;
	}

	.text p{
		padding: 10px 50px 50px 50px;
	}
	
	.center1{
		width: 169px;
		margin: 0 auto;
		height: 27px;
		clear: both;
		position: relative;
		right: 5px;
		
	}
	
	.center1 > .media{
		margin: 0 auto;
	}
	
	.center2{
		width: 100%;
		margin: 0 auto;
		height: 27px;
		clear: both;
		
	}
		
	.center2 > .www{
		float: none;
		text-align: center;
	}
}

@media (max-width:360px){
	
	
	
	.background{
		height: auto;
	}
	
	.card{
		padding-top: 400px;
	}
}
elemento {
}
#main-menu, 
#main-menu ul, 
#main-menu ul li, 
#main-menu ul li i {    height: 30px;
}