*{
	margin:0;
	padding: 0;
	
}

html{
	scroll-behavior: smooth;
}

body{
	font-family: 'Montserrat';
	background-color: #f2f5fc;
}


/*	------------------------------ NAV         -----------------*/



nav{
	font-family: 'Montserrat';
  	width: 100%;
	position: sticky;
	background-color: white;
}

nav ul{
	margin: auto;
	height: 90px;
	width: 1158px;
	list-style: none;
}

nav .logo_con{
	margin: 0;
	float: left;
}

nav li{
	float: right;
	width: 100px;
	height: 90px;
	margin-left: 20px;
}

nav li a{
	color: #000000;
	font-size: 20px;
	width: 100%;
	text-align: center;
	height: 100%;
	display: block;
	line-height: 90px;
	text-decoration: none;
	transition: all 0.3s ease-out;
	border-radius: 0 0 20px 20px;
	transition: all 0.5s;

}

nav li a:hover{
	transition: all 0.5s;
	transform: translateY(0) scale(1.1);
}

nav ul li img{
	float: left;
	margin-left: 4px;
	width: 250px;
	margin-top: 25%;
}

.exten{
	width: 240px;
}



.pptn a{
	padding-top: 22px;
	height: 100%;
}
.pptn a:hover{
}


.logo_con{
	width: 90px;
	transition: all 0.5s;
}

.logo_con a{
	padding-top: 8px;
}

.logo_con a:hover{
	background-color: rgba(225,47,32,0.0);

}

.logo_con:hover{
	transition: all 0.5s;
	transform: translateY(0) scale(1.1);
}

#menu{
    display: none;
    z-index: 10;
}

#logomenu{
	display: none;
}

/*--------------------------- HEADER ------------------------*/
header{
	width: 100%;
	height: 800px;
	background-image: url(../imagenes/Background.svg);
	background-repeat: no-repeat;
	background-color: white;
	background-size: cover;
	background-position: 0 -200px;
}

header section{
	position: relative;
	width: 1158px;
	height: 280px;
	margin: auto;
	z-index: 0;
}

header section article{
	float: right;
	width: 458px;
	height: 390px;
	margin-top: 150px;
}

header section a{
	text-decoration: none;
	text-align: center;
	width: 160px;
	line-height: 30px;
	height: 30px;
	float: right;
	color: white;
	margin-right: 75px;
	box-shadow: ;
	display: block;
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	border-radius: 50px;
	font-weight: bold;
}

header section video{
	float: left;
	width: 696px;
	margin-top: 150px;
	border: solid 2px, gray;
}

header h2{
	font-family: 'Montserrat';font-size: 30px;
	margin-left: 30px;
	margin-top: 80px;
}

header p{
	font-family: 'Montserrat';font-size: 18px;
	width: 300px;
	margin-left: 30px;
	margin-top: 30px;
}


/*--------------
.empz{
	float: left;
	margin: 0;
	margin-top: 50px;
	width: 200px;
	height: 50px;
	float: left;
	line-height: 50px;
	margin-left: 300px;
}
---------------*/


.empz{
	float: left;
	margin: 0;
	margin-top: 50px;
	width: 200px;
	height: 50px;
	line-height: 50px;
	color: black;
	background: white;
	border: solid 2px #5a0171;
	margin-left: 300px;
	pointer-events: auto;
	transition: all 0.5s;


}

.empz:hover{
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	color: white;
	transition: all 0.5s;
	border: 0px ;
	scale: 1.15;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;

}

.hazd{
	float: right;
	margin: 0;
	margin-top: 50px;
	width: 200px;
	height: 50px;
	line-height: 50px;
	color: black;
	background: white;
	pointer-events: auto;
	border: solid 2px #5a0171;
	margin-right: 300px;
	transition: all 0.5s;

}

.hazd:hover{
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
	color: white;
	transition: all 0.5s;
	border: 0px ;
	scale: 1.15;

}



/*--------     QUE   -----------*/

#que{
	width: 100%;
	background-color: white;
}

#que article{
	position: relative;
	width: 1158px;
	height: 600px;
	margin: auto;
}

#que article .lef{
	width: 500px;
	height: 465px;
	float: left;
}

#que article .lef h3{
	font-size: 45px;
	margin-bottom: 10px;
}

#que article a{
	display: block;
	width: 250px;
	line-height: 80px;
	text-decoration: none;
	height: 80px;
	color: black;
	float: left;
}


#que article a img{
	width: 50px;
	display: block;
	margin-top: 20px;
	margin-left: 12px;
	margin-right: 15px;
	float: left;
	border-radius: 50px;
}


.rig{
	width: 258px;
	float: left;
	height: 350px;
	padding-top: 50px;
}

.rig .celm{
	width: 100px;
	position: relative;
	float: left;
	top: -470px;
	left: 10px;
	z-index: 0;
	animation: rotarcel 4s infinite;
	transition: all 0.5s;
}

@keyframes rotarcel{;
	10%{
		transform: scale(1.05) rotate(-5deg);
	}

	200%{
		transform: scale(0.95) rotate(5deg);
	}

	30%{
		transform: scale(1.2) rotate(-5deg);
	}

	50%{
		transform: scale(1.0) rotate(0deg);
	}
}


.rig .celm:hover{
	transition: all 0.5s;
	transform: scale(1.5) rotate(5deg);
}

.rig .tabletm{
	width: 240px;
	position: relative;
	float: left;
	top: -840px;
	left: 120px;
	z-index: 4;
	animation: rotartabletm 7s infinite;
	transition: all 0.5s;
}

@keyframes rotartabletm{;
	10%{
		transform: scale(1.01) rotate(-5deg);
	}

	200%{
		transform: scale(0.95) rotate(5deg);
	}

	30%{
		transform: scale(1.2) rotate(-5deg);
	}

	50%{
		transform: scale(1.0) rotate(0deg);
	}
}

.rig .tabletm:hover{
	transition: all 0.5s;
	transform: scale(1.5) rotate(5deg);
}

.rig .pcm{
	width: 470px;
	position: relative;
	float: left;
	top: -990px;
	left: 190px;
	z-index: 0;
	animation: rotarpc 5s infinite;
	transition: all 0.5s;
}



@keyframes rotarpc{;
	10%{
		transform: scale(1.01) rotate(-5deg);
	}

	200%{
		transform: scale(0.95) rotate(5deg);
	}

	30%{
		transform: scale(1.2) rotate(-5deg);
	}

	50%{
		transform: scale(1.0) rotate(0deg);
	}
}


.rig .pcm:hover{
	transition: all 0.5s;
	transform: scale(1.3) rotate(5deg);
}

.rig .tromp1{
	width: 130px;
	position: relative;
	top: -370px;
	left: 220px;
	z-index: 0;
}

.rig .tromp2{
	width: 100px;
	position: relative;
	top: -1200px;
	left: 80px;
	z-index: 1;
}


.rig .sentadam{
	width: 350px;
	position: relative;
	top: -1325px;
	left: 51px;
	z-index: 1;
}

.rig .cirrr{
	width: 700px;
	position: relative;
	top: -100px;
	left: -150px;
	z-index: 0;
	transition: all 0.5s;
}



.rig .cirrr:hover{
}




.no{
	width: 750px;
	height: 35px;
	text-align: center;
	float: left;
	
}

.aniii{
	display: none;
}





/*-------------     Beneficios   ---------------*/



#bene{
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	width: 100%;
	height: 900px;
}

#ben{
	position: relative;
	width: 1158px;
	height: 740px;
	margin: auto;
	padding-top: 40px;
	border-radius: 30px;
}


#ben h2{
	width: 100%;
	text-align: center;
	font-size: 70px;
 	color: white;
 	margin-bottom: 50px;
}


#ben p{
	color: white;
	font-size: 30px;
	text-align: center;
	height: 25px;
	position: relative;
	font-family: sans-serif;
	font-weight: 700;
}

#ben article{
	width: 28%;
	height: 600px;
	float: left;
	margin-left: 4%;
}

#ben article div{
	width: 100%;
	height: 400px;
	border-radius: 30px;
	background-color: white;
}

#ben article h3{
	color: white;
	line-height: 50px;
	width: 100%;
	height: 50px;
	margin-top: 20px;
	margin-bottom: 15px;
	border-bottom: solid 2px white;
}


#ben article p{
	font-size: 18px;
	font-weight: 50;
	text-align: left;
}

#ben a{
	text-decoration: none;
	text-align: center;
	width: 500px;
	line-height: 50px;
	height: 50px;
	display: block;
	float: left;
	color: #9612aa;
	background-color: white;
	border-radius: 50px;
	font-weight: bold;
	margin-left: 329px;
	transition: all 0.5s;
}

#ben a:hover{
	transition: all 0.5s;
	border: 0px ;
	scale: 1.15;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.auto{
	background-image: url(../imagenes/tableta.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-size: 650px;
	background-position: 60% -30px;
	transition: all 0.8s;
}

.auto:hover{
	scale: 1.10;
	transform: rotate(-3deg);
	transition: all 0.8s;
}

.alll{
	width: 150px;
	position: relative;
	top: 150px;
	left: 210px;
	animation: zoom 2s infinite;
}

@keyframes zoom{;
	10%{
		transform: scale(1.1) rotate(10deg);
	}

	200%{
		transform: scale(0.8) rotate(-10deg);
	}

	30%{
		transform: scale(1.1) rotate(10deg);
	}

	50%{
		transform: scale(1.0) rotate(0deg);
	}
}

.dis{
	background-image: url(../imagenes/todo.png);
	background-repeat: no-repeat;
	background-size:100%;
	background-position: 50% 10px;
	transition: all 0.8s;
}

.dis:hover{
	scale: 1.10;
	transition: all 0.8s;
}


.gest{
	background-image: url(../imagenes/mac.png);
	background-repeat: no-repeat;
	background-size: 80%;
	background-position: 50% 50px;
	transition: all 0.8s;
}

.gest:hover{
	scale: 1.10;
	transform: rotate(3deg);
	transition: all 0.8s;
}


/*--------------------     PQEMP   ----------------------*/

#pub{
	position: relative;
	width: 1158px;
	height: 750px;
	margin: auto;
	margin-top: 150px;
}

#pub h3{
	font-size: 3em;
	margin-bottom: 30px;
}

.imag{
	width: 700px;
	height: 700px;
	float: left;
}

.imag img{
	width: 600px;
}


.imag .lin{
	width: 2500px;
	display: block;
	position: relative;
	top: -509px;
	left: -1850px;
	z-index: -1;

}


.textt{
	float: right;
	width: 458px;
	margin-top: 250px;
	
}


#pub .yy{
	text-align: center;
	width: 190px;
	line-height: 40px;
	height: 45px;
	float: left;
	color: white;
	font-size: 30px;
	margin-right: 75px;
	display: block;
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	border-radius: 50px;
	font-weight: bold;
	margin-left: 15px;
	transition: all 0.5s;
}

#pub .yy:hover{
	transition: all 0.5s;
	transform: scale(1.2);
	box-shadow: rgba(239, 190, 41, 0.5) 0px 0px 40px;
}


#pub p{
	width: 100%;
	height: 60px;
	margin-left: 40px;
	transition: all 0.5s;
}

#pub p:hover{
	transition: all 0.5s;
	transform: scale(1.1);
}



.punto{
	width: 15px;
	height: 15px;
	background-color: purple;
	float: left;
	border-radius: 50px;
	margin-right: 10px;
}


.mirrr{
	display: none;
}




/*----------------------------- Marketing de Lealtad ------------------------------*/


#mary{

	width: 100%;
	height: 840px;
}


#mary article{
	position: relative;
	width: 1158px;
	height: 740px;
	margin: auto;
	padding-top: 40px;
	border-radius: 30px;
}


#mary h2{

	height: 500px;
	margin-left: 20px;
	margin-bottom: 50px;
	color: #9d00a5;
	font-weight: Black 1200;
	font-size: 370px;

}

#mary h3{
	width: 80%;
	font-size: 45px;
	position: relative;
	top: 80px;
	margin-left: 30px;
	display: block;
	font-weight: 600;
}

#mary h4{
		width: 100%;
	text-align: center;
	font-size: 45px;
}


#mary p{
	width: 73%;
	margin: auto;
}

#mary a{
	text-decoration: none;
	text-align: center;
	width: 420px;
	line-height: 20px;
	height: 20px;
	float: right;
	color: white;
	margin-right: 20px;
	box-shadow: ;
	display: block;
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	border-radius: 50px;
	font-weight: bold;
}

#mary img{
	width: 400px;
	position: absolute;
    z-index: 2;
    top: 170px;
    right: 350px;
}

#mary .minfo{
	text-decoration: none;
	text-align: center;
	width: 300px;
	line-height: 50px;
	height: 50px;
	display: block;
	float: left;
	color: black;
	background: #f2f5fc;
	border: solid 2px #5a0171;
	border-radius: 50px;
	font-weight: bold;
	margin-left: 429px;
	margin-top: 50px;
	transition: all 0.5s;

}

#mary .minfo:hover{
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	color: white;
	transition: all 0.5s;
	border: 0px ;
	scale: 1.15;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}




@keyframes appear{
	from{
		opacity: 0;
		scale: 0.2;
	}
	to{
		opacity: 1;
		scale: 1;
	}
}


.block{
	animation: appear 5s linear;
	animation-timeline: view();
	animation-range: entry 0% cover 35%;
}





/*-------------------------- Testimonios ------------------------------*/

.test{
	width: 100%;
	height: 700px;
}

.test h2{
	width: 100%;
	text-align: center;
	font-size: 45px;
	margin-bottom: 50px;
}

.test article{
	position: relative;
	width: 100%;
	height: 740px;
	margin: auto;
	padding-top: 40px;
	border-radius: 30px;
}







/*-------------------------- articulo ------------------------------*/


.slider{
	width: 100%;
	height:  var(--height);
	overflow: hidden;
	margin-bottom: 50px;
}


.slider .list{
	display: flex;
	width: 100%;
	min-width: calc(var(--width) * var(--quantity));
	position: relative;
}


.slider .list .item{
	width: var(--width);
	height: var(--height);
	position: absolute;
	left: 100%;
	animation: lineaanda 10s linear infinite;
	transition: filter 0.5s;
	animation-delay: calc( (10s / var(--quantity)) * (var(--position) - 1))!important;
}

.slider .list .item img{
	
}

@keyframes lineaanda{
	from{
		left: 100%;
	}

	to{
		left: calc(var(--width) * -1) ;
	}
}

.slider:hover .item{
	animation-play-state: paused!important;
	filter: grayscale(1);
}

.slider .item:hover{
	filter: grayscale(0);
}

.slider[reverse="deuna"] .item{
	animation: volveraen 10s linear infinite;
}

@keyframes volveraen{
	from{
		left: calc(var(--width) * -1) ;
	}
	to{
		left: 100%;
	}

}


/*-------------------------- articulo ------------------------------*/

.articulo{
	width: 500px;
	height: 200px;
	margin-top: 2px;
	margin-bottom: 5px;
	margin-right: 30px;
	background: linear-gradient(70deg, #5a0171, 10%, #ffffff, 95%  , #faf303 );
	border-radius: 20px;
	border: solid 2px #5a0171;
}

.articulo h3{
	width: 70%;
	display: block;
	float: left;
	margin-top: 30px;
	margin-left: 10px;
}

.articulo h4{
	width: 70%;
	display: block;
	float: left;
	margin-left: 10px;
	font-weight: 300;
}

.articulo p{
	color: linear-gradient(to right,#5a0171, #d238c5, #faf303);;
	width: 70%;
	display: block;
	white-space: normal;
	float: left;
	margin-left: 10px;
}

.articulo img{
	display: block;
	width: 100px;
	height: 100px;
	margin-top: 45px;
	float: left;
	margin-left: 20px;
	background-color: skyblue;
	border-radius: 50px;
}

.articulo .ra{
	width: 60%;
	height: 5px;
	margin: 10px;
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
}

/*-------------------------- articulo fin------------------------------*/



/*----------------------------- tabla ------------------------------*/


.tabla{
	position: relative;
	width: 1158px;
	height: 750px;
	margin: auto;
	margin-top: 150px;
	margin-bottom: 150px;
}

tbody{
	width: 100%;
}

table{
	border-collapse: collapse;
	border: solid 3px #5a0171;
	border-radius: 20px;
	display: block;
}


tr th{
	width: 200px;
	height: 45px;
	border:none;
	
}

tr div{
	width: 30px;
	height: 30px;
	margin-left: 10px;
	float: left;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 2px 2px, rgba(0, 0, 0, 0.22) 0px 2px 2px;
	transition: all 1s;	
}

tr div img{
	width: 100%;
	border-radius: 10px;
}

tr div:hover{
	transition: all 1s;
	transform: scale(1.5);
}

td img{
	transition: all 1s;
}

td img:hover{
	transform: scale(1.2);
	transition: all 1s;
}

tr:nth-of-type(2) > th,
tr:nth-of-type(3) > th,
tr:nth-of-type(4) > th,
tr:nth-of-type(5) > th,
tr:nth-of-type(6) > th,
tr:nth-of-type(7) > th,
tr:nth-of-type(8) > th,
tr:nth-of-type(9) > th,
tr:nth-of-type(10) > th,
tr:nth-of-type(11) > th,
tr:nth-of-type(12) > th,
tr:nth-of-type(13) > th {
	text-align: left;
	padding-left: 15px;
}

tr td{
	text-align: center;
	border:none;
}

.cabe{
	width: 332px;
	text-align: center;
	
}
.like{
	width: 140px;
	height: 70px;
}

.toot{
	border-top: solid 3px #5a0171;
	height: 70px;
}

#enun{
	border-bottom: solid 3px #5a0171;
}

.purple{
	background-color: #e1dbec;
}

.remplazo_cuadro{
	display: none;
}


/*------------------- organiza ------------------------*/

#orga{
	width: 100%;
	height: 500px;
}

#orga article{
	width: 1158px;
	height: 500px;
	margin: auto;
}


#orga article a{
	text-decoration: none;
	text-align: center;
	color: #5a0171;
	line-height: 50px;
	height: 50px;
	float: left;
	box-shadow: ;
	display: block;
	border-radius: 50px;
	font-weight: bold;
	margin-top: 70px;
	margin-left: 119.5px;

	
}


.cy{
	width: 200px;
	height: 50px;
	line-height: 50px;
	background: #f2f5fc;
	border: solid 2px #5a0171;
	transition: all 0.5s;
}

.cee{
	width: 280px;
	height: 50px;
	line-height: 50px;
	background: #f2f5fc;
	border: solid 2px #5a0171;
	transition: all 0.5s;
}

.mcf{
	width: 200px;
	height: 50px;
	line-height: 50px;
	background: #f2f5fc;
	border: solid 2px #5a0171;
	transition: all 0.5s;
}



#orga article h2{
	width: 570px;
	font-size: 50px;
	font-weight: 400;
}

#orga article h2 a{
	margin: 0;
	text-decoration: none;
	text-align: center;
	line-height: 20px;
	float: right;
	color: white;
	margin-right: 5px;
	box-shadow: ;
	display: block;
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	border-radius: 50px;
	font-weight: bold;
	width: 570px;
	height: 70px;
	line-height: 70px;
	font-size: 50px;
}

.cy:hover{
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	color: white;
	transition: all 0.5s;
	scale: 1.15;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.cee:hover{
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	color: white;
	transition: all 0.5s;
	scale: 1.15;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

.mcf:hover{
	color: white;
	background: linear-gradient(to right,#5a0171, #d238c5, #faf303);
	transition: all 0.5s;
	scale: 1.15;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}



/*-------------------------- planes ------------------------------*/

#planes{
	width: 1158px;
	height: 800px;
	margin: auto;
}

#planes article{
	width: 340px;
	height: 650px;
	float: left;
	margin-left: 34.5px;
	border-radius: 30px;
	box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;

	transition: all 0.5s;
}

#planes article:hover{
	transition: all 0.5s;
	transform: translateY(-50px);
}

.ven{
	background-color: black;
	color: white;
	background-image: url(../imagenes/f_ven.png);
}

.cua{
	background-color: white;
	background-image: url(../imagenes/f_cua.png);
	background-size: 150%;
	background-repeat: no-repeat;
	background-position: -80px -180px;
}

.oche{
	background-color: white;
	background-image: url(../imagenes/f_oche.png);
	background-size: 480%;
	background-repeat: no-repeat;
	background-position: -600px -600px;
}



#planes article h2{
	float: left;
	margin-top: 50px;
	width: 80px;
	margin-left: 5px;
	font-size: 60px;
}

#planes article h4{
	float: left;
	margin-top: 50px;
	width: 80px;
	height: 23px;
	padding-top: 50px;
	padding-left: 10px;
}

#planes article h5{
	float: left;
	margin-top: 50px;
	margin-left: 40px;
	width: 50px;
	font-size: 60px;
}



#planes article a{
	text-decoration: none;
	width: 250px;
	text-align: center;
	line-height: 50px;
	height: 50px;
	float: left;
	color: black;
	box-shadow: ;
	display: block;
	border-radius: 50px;
	font-weight: bold;
	margin-top: 30px;
	color: black;
	background: #f2f5fc;
	border: solid 1px #5a0171;
	margin-left: 45px;
	transition: all 0.5s;
}

#planes .ven a:hover{
	color: black;
	background-color: white;
	transition: all 0.5s;
	border: 0,1px;
	scale: 1.15;
}

#planes .cua a:hover{
	color: black;
	background-color: #e9e9e9;
	transition: all 0.5s;
	border: 0,1px;
	scale: 1.15;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 5px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
}

#planes .oche a:hover{
	color: white;
	background-color: #efb529;
	transition: all 0.5s;
	border: 0,1px;
	scale: 1.15;
	box-shadow: rgba(239, 190, 41, 0.5) 0px 0px 40px;
}

#planes article h3{
	width: 300px;
	height: 50px;
	display: block;
	float: left;
	margin-left: 30px;
	margin-top: 50px;
}

#planes article p{
	margin-left: 12%;
	font-size: 30px;
	font-weight: 500;
	width: 280px;
	display: block;
	float: left;
}

#planes article ul{
	margin-left: 40px;
	width: 230px;
	display: block;
	float: left;
}

#planes article ul li{
	margin-bottom: 5px;
}

#planes .oche a{
	background-color: transparent;
	border: solid 2px #e19c5e;
}

.oche img{
	width: 80%;
	margin-left: 10%;
	margin-top: 5%;
}

#planes .cua a{
	background-color: #fdfdfd;
	border: solid 2px black;
}



.cua img{
	width: 80%;
	margin-left: 10%;
	margin-top: 5%;
}



#planes .ven a{
	background-color: black;
	border: solid 2px white;
	color: white;
}

.ven img{
	width: 80%;
	margin-left: 10%;
	margin-top: 5%;
}

.ocultar{
	opacity: 0;
}

.animar{
	animation: muestreme 1.3s;
}

@keyframes muestreme{
	0%{
		opacity: 0;
		transform: translateY(50px);
	}

	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
/*-------------------------- imagen f ------------------------------*/

#fondo{
	width: 1158px;
	height: 850px;
	margin: auto;
	background-image: url(../imagenes/logfon.png);
	background-repeat: no-repeat;
	background-size: cover;
	background-size: 100%;
	background-position: 20% 0px;
}

#fondo img{
	width: 90%;
}

#fondo h2{
	width: 45%;
	font-size: 40px;
	margin-left: 80px;
	color: #2bd4d9;
	float: left;
	margin-top: 35px;
}

#fondo h3{
	width: 45%;
	font-size: 40px;
	margin-left: 80px;
	float: left;
}


#fondo a{
	text-decoration: none;
	width: 350px;
	text-align: center;
	line-height: 80px;
	height: 80px;
	float: right;
	color: black;
	box-shadow: ;
	display: block;
	border-radius: 50px;
	font-size: 25px;
	font-weight: bold;
	margin-top: 50px;
	margin-right: 120px;
	color: black;
	background: #f2f5fc;
	border: solid 1px #2bd4d9;
	margin-left: 45px;
	transition: all 0.5s;
}

#fondo a:hover{
	background-color: #2bd4d9;
	color: white;
	transform: scale(1.3);
	transition: all 0.5s;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, 
	rgba(0, 0, 0, 0.22) 0px 15px 12px;
}


/*-------------------------- FOOTER ------------------------------*/
footer{
	height: 200px;
	font-family: sans-serif;
    font-weight: 700;
	color: white;
	border-radius: 100px 100px 0 0;
}

footer article{
	width: 1158px;
	margin: auto;
}

footer article img{
	width: 100%;
}

footer a{
	text-decoration: none;
	width: 30%;
	font-size: 20px;
	float: left;
	margin-left: 2.5%;
	margin-top: 50px;
	text-align: center;
	color: #9612aa;
	transition: all 0.3s;
}

footer a:hover{
	transition: all 0.5s;
	transform: scale(1.3);
}

footer article p{
	padding: 10px 0;
	text-align: center;
}

.tx{
	 pointer-events: none;
}



/*<------------------------- FIN TAMAÑO PC------------------------------>*/


/*<---------------------------- TAMAÑO LAPTOP---------------------------->*/

@media screen and (min-width: 1141px) and (max-width: 1300px) {



/*---------- NAV -------------*/


nav ul{
	width: 90%;
}

nav li{
	width: 10%;
	margin-left: 16px;
}

.logo_con img{
	width: 180%;
	margin-top: 30px;
}


/* ------------------- HEADER ------------------*/

header{
	width: 100%;
	height: 1200px;
	background-repeat: no-repeat;
	background-size: 120%;
}

header section{
	width: 90%;
}

header section article{
	float: left;
	width: 70%;
	height: ;
	margin-left: 15%;
}

header section article h2{
	font-size: 3.5em;
}

header section article p{
	width: 80%;
	font-size: 1.5em;
}

header section article p a{
	margin: 0;
	float: none;
	width: 50%;
	margin-top: 20px;
}


header section video{
	width: 50%;
	margin-left: 25%;
	margin-top: 100px;
}


/*----------- Que --------------*/

#que{
	height: 1100px;
}

#que article{
	width: 100%;
}

#que article .lef{
	width: 80%;
	margin-left: 10%;
}

#que article .rig{
	margin-left: 25%;
	margin-bottom: 80px;

}

#que article p{
	margin-left: 2%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 1.5em;
}

#que article .no{
	font-size: 1.2em;
	width: 80%;
}

/*----------- PQEMP --------------*/

#ben{
	width: 100%;
}

/*----------- PQEMP --------------*/

#pub{
	width: 100%;
}



#pub .imag{
	width: 50%;
}

#pub .imag img{
	width: 500px;
}

#pub .imag .lin{
	width: 2400px;
	top: -489px;
	left: -1830px;
}

.textt{
	float: left;
	margin-top: 150px;
}

/*----------- Marketing de Lealtad --------------*/

#mary {
	height: 930px;
}

#mary article {
	width: 100%;
	height: 890px;
}
#mary h3{
	margin-left: 10%;
	top: 5%;
}

#mary h2{
	text-align: center;
	font-size: 350px;
}

#mary img{
	right: 37%;
}

#mary p{
	width: 75%;
}

#mary p a{
	margin-right: 3%;
}

/*----------- Tabla --------------*/

.tabla{
	width: 90%;
}

/*----------- Organiza --------------*/

#orga article{
	width: 80%;
	margin-left: 10%;
}

#orga article .cy{
	margin-left: 7.5%;
	width: 20%;
}

#orga article .cee{
	margin-left: 7.5%;
	width: 30%;
}

#orga article .mcf{
	width: 20%;
	margin-left: 7.5%;
}

/*----------- planes --------------*/

#planes{
	width: 100%;
}

/*----------- imagen f --------------*/

#fondo{
	width: 100%;
}

/*----------- FOOTER --------------*/

footer{
	width: 100%;
}

footer article{
	width: 100%;
}

}

@media screen and (min-width: 1025px) and (max-width: 1140px) {



/*---------- NAV -------------*/


nav ul{
	width: 90%;
}

nav li{
	width: 10%;
	font-size: 1vw;
	margin-left: 16px;
}

.logo_con{
	width: 5%;
}

.logo_con img{
	width: 300%;
	margin-top: 30px;
}

.exten{
	width: 23%;
}



/* ------------ HEADER ---------*/

header{
	width: 100%;
	height: 1200px;
	background-repeat: no-repeat;
	background-size: 120%;
}

header section{
	width: 100%;
}

header section article{
	float: left;
	width: 70%;
	height: ;
	margin-left: 15%;
}

header section article h2{
	font-size: 3.5em;
}

header section article p{
	width: 80%;
	font-size: 1.5em;
}

header section article p a{
	margin: 0;
	float: none;
	width: 50%;
	margin-top: 20px;
}


header section video{
	width: 50%;
	margin-left: 25%;
	margin-top: 100px;
}



/*----------- Que --------------*/

#que{
	height: 1100px;
}

#que article{
	width: 100%;
}

#que article .lef{
	width: 80%;
	margin-left: 10%;
}

#que article .rig{
	margin-left: 25%;
	margin-bottom: 80px;

}

#que article p{
	margin-left: 2%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 1.5em;
}

#que article .no{
	font-size: 1.2em;
	width: 80%;
}




/*----------- beneficios --------------*/

#ben{
	width: 100%;
}

/*----------- PQEMP --------------*/

#pub{
	width: 100%;
	height: 1400px;
}


#pub .imag{
	width: 70%;
	top: 500px;
	position: relative;
}

#pub .imag img{
	width: 700px;
	margin-left: 50px;
}

#pub .imag .lin{
	width: 2700px;
	top: -548px;
	left: -1965px;
}

.textt{
	position: relative;
	margin-top: 150px;
	width: 80%;
	margin-left: 10%;
	top: -850px;
}

#pub h3{
	font-size: 5em;
}

#pub p{
	width: 80%;
	font-size: 1.5em;
}

/*----------- Marketing de Lealtad --------------*/

#mary {
	height: 1100px;
}

#mary article {
	width: 100%;
	height: 890px;
}
#mary h3{
	margin-left: 10%;
	top: 5%;
}

#mary h2{
	text-align: center;
	font-size: 19.5em;
}

#mary img{
	right: 32%;
}

#mary p{
	width: 75%;
	font-size: 1.5em;
}

#mary p a{
	margin-right: 3%;
	margin-top: 30px;
	line-height: 50px;
	height: 50px;
	width: 650px;
}


/*----------- Tabla --------------*/

.tabla{
	width: 90%;
}

.like{
	width: 10%;
}

.cabe{
	width: 15%;
}

/*----------- Organiza --------------*/

#orga article{
	width: 80%;
	margin-left: 10%;
}

#orga article .cy{
	margin-left: 7.5%;
	width: 20%;
}

#orga article .cee{
	margin-left: 7.5%;
	width: 30%;
}

#orga article .mcf{
	width: 25%;
	margin-left: 7.5%;
}

/*----------- planes --------------*/

#planes{
	width: 100%;
	height: 700px;
}

#planes article{
	width: 31%;
	margin-left: 1.5%;
}





/*----------- imagen f --------------*/

#fondo{
	width: 100%;
}

#fondo a{
	width: 27%;
}

/*----------- FOOTER --------------*/

footer{
	width: 100%;
}

footer article{
	width: 100%;
}

footer article a{
	width: 30%;
}


}
/*----------------- FINAL LAPTOP----------------*/

/*------------------ TABLET------------------------*/

@media screen and (min-width: 768px) and (max-width: 1024px) {



/*---------- NAV -------------*/

#menu{
	margin-top: 25px;
	width: 120px;
	height: 120px;
	float: right;
	display: block;
	}

#logomenu{
		display: block;
		margin-top: 40px;
		margin-left: 30px;
		width: 140px;
		float: left;
	}

#logomenu img{
		width: 140px;
}

nav{
	width: 100%;
	height: 100px;
	position: relative;
}


nav ul{
	 width: 100%;
        height: auto;
        transition: .4s;
        position: absolute;
        background-color: black;
        color: white;
        top: 100px;
        z-index: 7;
}

nav img{
	width: 80px;

}

    .abierto{ left: 0%;}
    .cerrado{ left: -120%;}



	nav ul li{
        float: none;
        width: 100%;
        margin: 0;
    }

	nav ul li a{
	color: white;
	line-height: 80px;
	padding: 0;    
    }



	

.pptn a{
	padding: 0;
}

     nav ul li a:hover{
    	color: white;
		background-color: rgba(197,194,214);

	}




.neg{
	display: block;
	margin-top: 3%;
	width: 70%;
	float: left;
	margin-left: 15%;
}


.logo_con{
	display: none;
}

.exten {
	width: 100%;
}



/* ------------ HEADER ---------*/

header{
	width: 100%;
	height: 1500px;
	background-repeat: no-repeat;
	background-size: 120%;
}

header section{
	width: 100%;
}

header section article{
	float: left;
	width: 70%;
	height: ;
	margin-left: 15%;
}

header section article h2{
	font-size: 3.5em;
}

header section article p{
	width: 80%;
	font-size: 1.5em;
}

header section article p a{
	margin: 0;
	float: none;
	width: 60%;
	margin-top: 20px;
}


header section video{
	width: 80%;
	margin-left: 10%;
	margin-top: 150px;
}

.empz{
	float: left;
	margin: 0;
	width: 40%;
	height: 80px;
	line-height: 80px;
	margin-top: 50px;
	font-size: 1.5em;
	margin-left: 30%;
}

.hazd{
	float: left;
	margin: 0;
	width: 40%;
	height: 80px;
	line-height: 80px;
	margin-top: 50px;
	font-size: 1.5em;
	margin-left: 30%;
}

/*--     BANNER   ---*/



/*----------- Que --------------*/

#que{
	width: 100%;
	height: 1300px;
}

#que article{
	width: 100%;
}

#que article .lef{
	width: 80%;
	height: 600px;
	margin-left: 10%;
}

#que article .rig{
	margin-left: 20%;
	margin-bottom: 80px;

}


#que article p{
	margin-left: 2%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 1.5em;
}

#que article .no{
	margin-top: 80px;
	font-size: 1.3em;
	width: 80%;
	margin-left: 10%;
}

.rig .pcm{
	width: 200px ;
	left: 357px;
	top: -903px;
}

.rig .tromp2{
	top: -1023px;
    left: 62px;
}

.rig .sentadam{
	top: -1126px;
    left: 49px;
}

.rig .cirrr{
	display: block;
}



/*----------- beneficios --------------*/

#bene{
	width: 100%;
	height: 2500px;
}

#ben{
	width: 100%;
	height: 1500px;
}

#ben article{
	width: 70%;
	margin-left: 15%;
	height: 700px;
}

#ben article h3{
	font-size: 1.8em;
}

#ben article p{
	font-size: 1.8em;
}


#ben article div{
	width: 80%;
	margin-left: 10%;
}

#ben a{
	width: 70%;
	margin-left: 15%;
}

.alll{
	margin-left: 15%;
}

#ben article .dis{
	background-size: 30vh;
    background-position: 50% 50%;
}

#ben article .gest{
	background-size: 30vh;
    background-position: 50% 50%;
}

/*----------- PQEMP --------------*/

#pub{
	width: 100%;
	height: 1400px;
}


#pub .imag{
	width: 70%;
	top: 500px;
	position: relative;
}

#pub .imag img{
	width: 600px;
	margin-left: 50px;
}

#pub .imag .lin{
	width: 2600px;
	top: -528px;
	left: -1949px;
}

.textt{
	position: relative;
	margin-top: 150px;
	width: 85%;
	margin-left: 10%;
	top: -850px;
}

#pub h3{
	font-size: 5em;
}

#pub p{
	width: 80%;
	font-size: 1.5em;
}


/*----------- Marketing de Lealtad --------------*/

#mary {
	height: 1100px;
}

#mary article {
	width: 100%;
	height: 890px;
}
#mary h3{
	margin-left: 10%;
	top: 5%;
}

#mary h2{
	margin: 0;
	width: 100%;
	text-align: center;
	font-size: 12.5em;
	line-height: 450px;
}

#mary img{
	width: 300px;
	right: 32%;
}

#mary p{
	width: 75%;
	font-size: 1.5em;
}

#mary p a{
	margin: 0;
	margin-top: 30px;
	line-height: 50px;
	font-size: 0.9em;
	height: 50px;
	width: 100%;
}

#mary .minfo{
	margin: 0;
	margin-left: 10%;
	height: 80px;
	line-height: 80px;
	font-size: 1.8em;
	margin-top: 50px;
	width: 80%;
}


/*----------- Tabla --------------*/

.tabla{
	width: 97%;
}

.like{
	width: 5%;
}

.like img{
	width: 50px;
}

.cabe{
	width: 15%;
}

/*----------- Organiza --------------*/

#orga article{
	width: 90%;
	margin-left: 10%;
}

#orga article .cy{
	margin-left: 0;
	width: 20%;
}

#orga article .cee{
	margin-left: 3.5%;
	width: 40%;
}

#orga article .mcf{
	width: 25%;
	margin-left: 3.5%;
}

/*----------- planes --------------*/

#planes{
	width: 100%;
	height: 2500px;
}

#planes .ven a{
	width: 80%;
	margin-left: 10%;
}

#planes .cua a{
	width: 80%;
	margin-left: 10%;
}

#planes .oche a{
	width: 80%;
	margin-left: 10%;
}

#planes article h2{
	width: 20%;
	margin-left: 2%;
	margin-top: 5%;
}

#planes article p{
	
	margin-left: 20%;
	
}

#planes article h4 {
	margin-top: 5%;
}

#planes article h5 {
	margin-left: 20%;
	margin-top: 5%;
}

#planes article h3{
	margin-left: 20%;
}

#planes article ul{
	margin-left: 20%;
}

#planes article{
	width: 50%;
	margin-left: 25%;
	margin-bottom: 10%;
}


#planes .cua img{

	top: -570px;


}

#planes .oche img{

	top: -520px;


}

.ven{
	background-size: cover;
}





/*----------- imagen f --------------*/

#fondo{
	width: 100%;
}

#fondo a{
	width: 40%;
	float: left;
	margin-left: 30%;
}



/*----------- FOOTER --------------*/

footer{
	width: 100%;
	height: auto;
	padding-bottom: 280px;
}

footer article{
	width: 100%;
}


footer article a{
	width: 90%;
	margin-left: 2.5%;
}

}

/*---------------------------FINAL TABLET---------------*/


/*------------------------- CELULAR ------------------*/

@media screen and (min-width: 340px) and (max-width: 767px) {


/*---------- NAV -------------*/

#menu{
	margin-top: 25px;
	width: 120px;
	height: 120px;
	float: right;
	display: block;
	}

#logomenu{
		display: block;
		margin-top: 40px;
		margin-left: 30px;
		width: 140px;
		float: left;
	}

#logomenu img{
		width: 80%;
}

nav{
	width: 100%;
	height: 100px;
	position: relative;
}


nav ul{
	 width: 100%;
        height: auto;
        transition: .4s;
        position: absolute;
        background-color: black;
        color: white;
        top: 100px;
        z-index: 7;
}

nav img{
	width: 60%;
	float: right;
	margin-right: 10%;

}

    .abierto{ left: 0%;}
    .cerrado{ left: -120%;}



	nav ul li{
        float: none;
        width: 100%;
        margin: 0;
    }

	nav ul li a{
	color: white;
	line-height: 80px;
	padding: 0;    
    }

.pptn a{
	padding: 0;
}

     nav ul li a:hover{
    	color: white;
		background-color: rgba(197,194,214);

	}




.neg{
	display: block;
	margin-top: 3%;
	width: 70%;
	float: left;
	margin-left: 15%;
}


.logo_con{
	display: none;
}


.exten {
	width: 100%;
}


/* ------------ HEADER ---------*/

header{
	width: 100%;
	height: 1500px;
	background-repeat: no-repeat;
	background-size: 110%;
	background-position: 0px 0px;
}

header section{
	width: 100%;
	height: 100%;
}

header section article{
	float: left;
	width: 80%;
	margin-top: 0;
	height: auto;
	margin-left: 10%;
}

header section article h2{
	font-size: 45px;
	margin-left: 0;

}

header section article p{
	width: 80%;
	font-size: 1.5em;
	margin-left: 0;
}

header section article p a{
	margin: 0;
	float: none;
	width: 100%;
	margin-top: 20px;
}


header section video{
	width: 90%;
	margin-left: 5%;
	margin-top: 15%;
}

.empz{
	float: left;
	margin: 0;
	width: 80%;
	height: 80px;
	line-height: 80px;
	margin-top: 50px;
	font-size: 1.5em;
	margin-left: 10%;
}

.hazd{
	float: left;
	margin: 0;
	width: 80%;
	height: 80px;
	line-height: 80px;
	margin-top: 50px;
	font-size: 1.5em;
	margin-left: 10%;
}

/*--     BANNER   ---*/



/*----------- Que --------------*/

#que{
	height: 1350px;
}

#que article{
	width: 100%;
}

#que article .lef{
	width: 90%;
	height: auto;
	margin-left: 5%;
}

#que article .rig{
	width: 100%;
	height: auto;
}



#que article p{
	margin-left: 2%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 1.5em;
}

#que article .rig .cirrr{
	display: none;
}


#que article .rig .celm{
	display: none;
}


#que article .rig .tabletm{
	display: none;
}


#que article .rig .pcm{
	display: none;
}



#que article .rig .tromp1{
	display: none;
}

#que article .rig .tromp2{
	display: none;
}


#que article .rig .sentadam{
	display: none;
}

#que article .no{
	margin-top: 80px;
	font-size: 1.3em;
	width: 90%;
	margin-left: 5%;
}


.aniii{
	width: 100%;
	display: block;
}




/*----------- beneficios --------------*/

#bene{
	width: 100%;
	height: 2500px;
}

#ben{
	width: 100%;
	height: 1500px;
}

#ben article{
	width: 100%;
	height: 700px;
	margin-left: 0;
}

#ben h2{
	font-size: 3.1em;
}



#ben article h3{
	width: 90%;
	font-size: 1.5em;
	margin-left: 5%;
}

#ben article p{
	width: 93%;
	font-size: 1.8em;
	margin-left: 5%;
}


#ben article div{
	width: 85%;
	margin-left: 5%;
}

#ben a{
	width: 70%;
	margin-left: 15%;
}

.auto{
	background-image: url(../imagenes/tabletare.png);
	background-size: 50%;
	background-color: white;
}

.alll{
	display: none;
}

#ben article .auto{
	background-size: 40vh;
    background-position: 50% 50%;
}

#ben article .dis{
	background-size: 40vh;
    background-position: 50% 50%;
    background-color: white;
}

#ben article .gest{
	background-size: 40vh;
    background-position: 50% 50%;
    background-color: white;
}

/*----------- PQEMP --------------*/

#pub{
	width: 100%;
	height: 1200px;
	margin-top: 0;
}


#pub .imag{
	display: none;
		}


.textt{
	margin-top: 150px;
	width: 90%;
	margin-left: 5%;
}

#pub h3{
	font-size: 12vw;
	margin-left: 1px;
}

#pub p{
	width: 80%;
	font-size: 1.5em;
	height: auto;
	margin-bottom: 10px;
}


.mirrr{
	width: 150%;
	position: relative;
	left: -55%;
	display: block;
	margin-top: 25%;
}

.yy{
	margin-top: 10px;
}

/*----------- Marketing de Lealtad --------------*/

#mary {
	height: 1300px;
}

#mary article {
	width: 100%;
	height: auto;
	height: 1250px;
}
#mary h3{
	margin-left: 10%;
	top: 5%;
	font-size: 1.7em;
}

#mary h2{
	margin: 0;
	width: 100%;
	margin-top: 1%;
	text-align: center;
	font-size: 5.5em;
	line-height: 450px;
}

#mary img{
	width: 40%;
	right: 30%;
	top: 22%;
}

#mary p{
	width: 75%;
	font-size: 1.5em;
}

#mary p a{
	margin: 0;
	margin-top: 30px;
	line-height: 50px;
	font-size: 0.9em;
	height: 50px;
	width: 100%;
}

#mary .minfo{
	margin: 0;
	margin-left: 10%;
	height: auto;
	line-height: 50px;
	font-size: 6.8vw;
	margin-top: 50px;
	width: 80%;
}

#mary p .tx{
	width: 98%;
	padding-left: 1%;
	font-size: 5vw;
	line-height: 25px;
	height: auto;
}


/*----------- Tabla --------------*/

.tabla{
	width: 100%;
	font-size: 1em;
	height: 100%;
}

.tabla table{
	display: none;
}

.remplazo_cuadro{
	display: block;
	width: 100%;
}

/*----

.like{
	width: 11%;
}

.like img{
	width: 80%;
}


.otapp{
	display: none;
}

table tr .cabe{
}

tbody tr td img{
	width: 60%;
}

.precioso{
	display: none;
}

.toot1{
	display: none;
}

/*----------- Organiza --------------*/

#orga{
	height: 800px;
}



#orga article{
	width: 90%;
	margin-left: 10%;
}

#orga article h2{
	font-size: 3em;
	width: 100%;
}

#orga article .cy{
	margin-left: 0;
	width: 90%;
}

#orga article .cee{
	margin-left: 0;
	width: 90%;
}

#orga article .mcf{
	margin-left: 0;
	width: 90%;
}

#orga article h2 a{
	width: 95%;
	float: left;
	height: auto;
	line-height: 60px;
	font-size: 0.7em;
}

/*----------- planes --------------*/

#planes{
	width: 100%;
	height: 2200px;
}

#planes img{
	margin-top: 15%;
}

#planes article{
	height: auto;
	padding-bottom: 10%;
}

#planes article h2{
	width: 20%;
	margin-top: 5%;
	margin-left: 0;
}

#planes article h5{
	margin-top: 5%;
	width: 13%;
	text-align: right;
}

#planes article h4 {
	margin-top: 5%;
	width: 48%;
}

#planes article h3{
	margin-left: 20%;
	width: 70%;
}

#planes article ul{
	width: 60%;
	margin-left: 20%;
}

#planes article{
	width: 80%;
	margin-left: 10%;
	margin-bottom: 10%;
}

#planes article p{
	width: 70%;
}

.ven{
	background-size: fixed;
	background-repeat: no-repeat;
	background-size: 150%;
}

.cua{
	background-size: fixed;
	background-repeat: no-repeat;
	background-size: 200%;
}

.oche{
	background-size: fixed;
	background-repeat: no-repeat;
	background-size: 800%;
}


#planes .ven a{
	margin: 0;
	margin-top: 50px;
	width: 80%;
	margin-left: 10%;
}

#planes .cua a{
	margin: 0;
	margin-top: 50px;
	width: 80%;
	margin-left: 10%;
}

#planes .oche a{
	margin: 0;
	margin-top: 50px;
	width: 80%;
	margin-left: 10%;
}




/*----------- imagen f --------------*/

#fondo{
	width: 100%;
	height: 575px;
	padding-bottom: 5%;
}

#fondo a{
	width: 80%;
	float: left;
	margin-left: 10%;
}




/*----------- FOOTER --------------*/

footer{
	width: 100%;
}

footer article{
	width: 100%;
}


footer article a{
	width: 80%;
	float: left;
	height: 50px;
	font-size: 3vw;
	margin-left: 10%;
	margin-top: 8%;
  }
/* ------------ HEADER ---------*/


/*--     BANNER   ---*/



/*----------- PUB --------------*/



/*----------- PAY --------------*/


/*----------- FOOTER --------------*/

/*--------- Whatsapp -----------*/


}