@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'heineken';
    src: url('../fonts/heinekenserif18-bold-webfont.woff2') format('wofsf2'),
         url('../fonts/heinekenserif18-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
html{overflow-x: hidden;}
*{font-family: 'heineken'; margin:0; padding:0; list-style:none; color:white; font-size:20px}
li{font-family: 'heineken'}
body{ background:#FFCC00; background-image:url(../images/bg.jpg); background-position:top center; background-repeat:no-repeat}
#container{ width:877px; height:auto; margin:0 auto; }

.enjoy{ background:url(../images/enjoy.png) no-repeat; width:132px; height:132px;margin-left:20px; padding-bottom:0px; text-indent:-4000px; margin-top:20px}
h1{ width:877px; height:742px; background:url(../images/header.png) no-repeat;  margin:0 auto; text-indent:-4000px;float:left}


.wrapper{width:677px; padding:0 100px; height:auto; margin:0 auto; background:url(../images/body-bg.png) repeat; float:left}

.paso1::before{background:white; border-radius: 50%; width:20px; height:20px; padding:10px; text-align:center; position:absolute; content:"1"; color:#00A53D; margin-left:-50px; margin-top:-10px}

.paso2::before{background:white; border-radius: 50%; width:20px; height:20px; padding:10px; text-align:center; position:absolute; content:"2"; color:#00A53D; margin-left:-50px; margin-top:-10px}

.paso3::before{background:white; border-radius: 50%; width:20px; height:20px; padding:10px; text-align:center; position:absolute; content:"3"; color:#00A53D; margin-left:-50px; margin-top:-10px}

.paso4::before{}

.paso4::after{position:absolute; content:url("../images/palmera.png"); width:234px; height:382px; right:calc(40% - 234px); margin-top:-140px; z-index:0}
.paso4 p{ z-index:1000}
.paso5::before{background:white; border-radius: 50%; width:20px; height:20px; padding:10px; text-align:center; position:absolute; content:"5"; color:#00A53D; margin-left:-50px; margin-top:-10px}


.alerta{ width:400px; height:auto; background:white; padding:20px; border-radius:15px; color:#757575; transform: rotate(-3deg);}
.alerta p{color:#757575}
.alerta::after{width:50px; height:50px; position:absolute; content:url("../images/alert.png"); margin-left:300px; margin-top:-150px}


button {padding: 0.7rem 2rem;margin-top: 1rem;background: #4CAF50;color: white;border: none;border-radius: 20px;cursor: pointer;font-size: 1rem;}
button:hover {background: #45a049}

.button {padding: 0.7rem 2rem;margin-top: 1rem;background: #4CAF50;color: white;border: none;border-radius: 20px;cursor: pointer;font-size: 1rem;}
.button:hover {background: #45a049}

.error { color: red; }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; }
input[type="text"], 
input[type="email"], 
input[type="tel"] {
	width: calc(100% - 30px);
	padding: 10px 15px; border-radius:8px; border:none;
}
input{ color:#01723A}

.bottom{ width:1080px; height:auto; margin:0 auto}

.desk{ display:block}
.mobile{ display:none}


@media only screen and (max-width: 900px){
	
	.enjoy{width:70px; height:70px; background-size:cover; margin-left:33px;margin-top:10px}
	#container{ width:96%; height:auto; margin:0 auto; }
	h1{ width:100%; height:auto}
	.headertop{ width:100% !important; height:auto !important}
	.wrapper{width:80% !important; padding:0 10%; background-size:contain}
	.paso1::before, .paso2::before, .paso3::before, .paso4::before, .paso5::before{width:22px; height:22px; padding:5px;margin-left:-35px; margin-top:0px; font-size:16px;}
	.alerta{width:90% !important; height:auto; background:white; padding:20px; border-radius:15px;}
	.alerta::after{ position:absolute; margin-top:inherit; margin-right:inherit; position:relative; right:0; top:-20px; }
	.alerta br{ display:none; }
	.desk{ display:none}
.mobile{ display:block}
	.bottom{ width:100%; height:auto}
	.bottom img{ width:96%; height:auto; margin:0 auto}
	}