@charset "utf-8";
/* CSS Document */
html, body {
  height: 100%;
  min-height: -webkit-fill-available;

}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family:Arial, Helvetica, sans-serif;
	    font-size: 13px;
 	margin: 0;
    padding:0;
	min-height: -webkit-fill-available;
}
 

a{    color: #3b9796;

}
#myDIV{
	display:none;
	    position: fixed;
    top: 35%;
    left: 40%;
    max-width: 400px;
    width: 100%;
	z-index:20;
}
h1{
    font-size: 3em;
    color: #fff;
    clear: both;
    padding-top: 1em;
	font-weight: initial;
	}
h2{
    font-size: 1.8em;
    color: #fff;
	font-weight: initial;
	margin: 0px;
	padding-bottom: 1em;
}
h3{
	    font-size:1.6em;
    color: #fff;
}

.box {
    float: left;
    width: 28.3%;
    text-align: center;
    padding: 2%;
    /* min-height: 44%; */
    background-color: #fff;
    margin-right: 1%;
    /* margin-right: 0%; */
    border-radius: 2%;
    box-shadow: 2px 2px 10px grey;
}
.box img{
	width:100%;
	height:auto;
	max-width:120px;
	padding:4%;
	text-align: center;
}

.box-tabla {
    float: left;
    width: 45%;
    text-align: center;
    display: table-row-group;
    padding: 2%;
	font-size:1.2em;
}
.box-tabla  p {
    display: block;
    margin-block-start: 0.2em;
    margin-block-end: 0.2em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
.box-tabla-row {
    width: 100%;
    text-align: center;
	display: table-row;
}
.box-tabla-grande {
    width: 65%;
	text-align:left;
	display: table-cell;
    padding-right: 2%;
}
.box-tabla-chica {
    width: 30%;
	display: table-cell;
	font-size:0.9em;
	
}

.box-texto-azul{
	background-color: #424d58;
    color: #fff;
    padding: 0.8em;
    font-weight: bold;
    border-radius: 20px 0px;
}
.box-texto-blanco{
	border: 1px solid #424d58;
    border-radius: 0px 30px;
    padding: 0.8em;

}
.cierre-dos{
	background-image:url(../image/verde-under.png);
	background-color: #fff; /* Used if the image is unavailable */
	background-position: top right; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
}

.cierre-flecha{
	position: relative;
    text-align: center;
    width: 100%;
    background-color: #009393;
    margin: 0px;
    overflow: hidden;
}


.cierre-under{
	width: 100%;
    overflow: hidden;
	text-align: center;
	background-image:url(../image/under-azul.png);
	background-color: #fff; /* Used if the image is unavailable */
	background-position: bottom right; /* Center the image */
	background-repeat: no-repeat; /* Do not repeat the image */
	background-size: cover; /* Resize the background image to cover the entire container */
    margin-top: 5%;
}

.cierre-under img{
	width:100%;
	height:auto;
	max-width: 614px;
	}
.cierre-under-texto{
	color:#fff;
	margin:4%;
	text-align:justify;
	max-width:1200px;
	/*font-size:0.8em;*/
	
}
.cierre-foto-diagonal{
	overflow: hidden;
}
.cierre-logo{
    text-align: right;
	padding-right: 2%;
}
.cierre-logo img{
	width:90%;
	max-width:300px;
	height:auto;
	margin-right:1em;
}
.cierre-foto{
    position: absolute;
    bottom: 20%;
	    float: right;
    overflow: hidden;
    width: 100%;
}
.cierre-foto img{
	width: 100%; 
   height: auto;
}

.contenido-seccion{
	position: relative;
	padding-top: 0em;
	display: flex;
    width: 100%;
    margin: 0 auto;
    list-style-image: url(../image/listitem.png);
	background-image: url(../image/verde-under.png);
    background-color: #fff;
    background-position: top right;
    background-repeat: no-repeat;
    background-size: cover;
}

.contenido{
	position: relative;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    list-style-image: url(../image/listitem.png);
}

.condiciones{
	font-size:0.9em;
}

.contacto img{
	    vertical-align: middle;
}
.claim {
	clear:both;
	padding-bottom: 2em;
    padding-top: 2em;
	}
	
.claim img{
    max-width: 600px;
	width:100%;
	height:auto;
	}

.cuenta-smart{
    position: absolute;
	width:100%;
    z-index: 10;
    left: 50%;
    top: 50%;
	text-align: center;
	transform: translate(-50%,-50%);
	}
	
.cuenta-smart p{
	font-size: 2.1em;
    color: #fff;
	font-weight: initial;
}

.cuenta-smart-iconos{
	background-color:#009393;
	margin:0 auto;
	text-align:center;
	padding-top:2em;
}

.cuenta-smart-iconos p{
    clear: both;
    padding: 0px;
    padding-top: 2em;
    margin: 0px;
    color: #fff;

}
.cuenta-smart-iconos img{
	width:100%;
	height:auto;
	max-width:300px;
}
.foto{
	background-image:url(../image/foto.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	height:80%;
}

li{
	margin-block-end: 0.5em;
}
.logo-top{
	position:absolute;
	width:100%;
    margin: 0 auto;
    text-align: center;
	margin-top: 2em;

}
.logo-top img{
    max-width: 400px;
    width: 100%;
    height: auto;
}

.logos {
	width:90%;
	margin: 0 auto;
	text-align:center;
}

.logos img{
    max-width: 250px;
    width: 50%;
    height: auto;
}

.mas-info{
    position: absolute;
    right: 10%;
    bottom: 50px;
}

.mas-info img{
vertical-align: middle;
	width:100%;
	height:auto;
	max-width:170px;

}
ul{
	text-align: left;
}

@media screen and (max-width: 1280px) {
	h1{
		font-size: 2em;
	}
	.contenido{
		max-width: 900px;
	}

	.logo-top{
		padding-top: 3em;
	}
}

@media screen and (max-width: 980px) and (orientation: landscape){

	.cuenta-smart {
		top: 70%;

	}
	.logo-top {
		margin-top: 1em;
	}
}

@media screen and (max-width: 992px) {
	
	.contenido-seccion{
    background-size: auto;
	}

	.cierre-foto {
		bottom: 0%;
	}

	.cierre-foto img{
		width: 100%; 
	   height: auto;
	}

	.foto{
		height:100%;
	}
	

	.box-tabla {
		width: 90%;
		text-align: center;
		font-size:1em;
	}

	h1{
		font-size: 2em;
	}

	h3{
	    font-size: 1.5em;
	}
	.mas-info img{
		max-width:150px;
	}
	.logo-top img{
		max-width: 300px;
	}
}

@media screen and (max-width: 650px) and (orientation: landscape){
	.mas-info {
    right: 10px;
    bottom: 50px;
	}
	.foto{
		height:100%;
	}
	.cierre-foto {
		bottom: 0%;
	}
	.cuenta-smart {
		top: 70%;
	}
	.logo-top {
		padding-top: 1em;
	}
}

@media screen and (max-width: 650px) {
	#myDIV {
		left: 1%;
		top: 105px;
	}
	.box-tabla {
		font-size:0.8em;
	
	}
	.box-tabla-grande {
    width: 60%;
	}
	.box-tabla-chica {
		width: 35%;
	}
	.box {
	width: 80%;
    margin: 10%;
    margin-bottom: 1%;	}

	h3{
		font-size: 0.8em;
	}
	.mas-info{
		right: 10px;
		bottom: 100px;
	}
	.mas-info img{
		max-width:100px;
	}
	.cierre-logo img {
		max-width: 250px;
	
	}
	

}



@media screen and (max-width: 480px) and (orientation: landscape){

	
	.foto{
		height:100%;
	}
		#myDIV {
    left: 1%;
    top: 10px;
	z-index:999;
	}

	}