@font-face{
   font-family: "allura";
   font-style: normal;
   font-weight: normal;
   src: url(Allura-Regular.ttf);
}

@font-face{
   font-family: "open-sans";
   font-style: normal;
   font-weight: normal;
   src: url(OpenSans-Regular.ttf);
}

img{
    width: 100%;
    height: auto;
}

#envoltorio{
    width: 100%;
    height: auto;
    //border:1px solid red;
    margin: 0 auto;
    
    color: #fdd17b;
}

#botones{
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 5%;
}

#mas_info,  #contactanos{
    width: 12%;
    height: auto;
    margin-left: 10%;
    position: relative;
}

#comprar{
    width: 15%;
    height: auto;
    float: right;
    margin-right: 20%;
    z-index: 999;
    position: relative;
}

#mas_info{
    float: left;
    z-index: 999;
}

#contactanos{
    clear: both;
    z-index: 999;
}

#comprar:hover, #mas_info:hover, #contactanos:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

#certificado{
    width: 15%;
    height: auto;
    position: absolute;
    margin-left: 42.5%;
    margin-top: 20.5%;
    z-index: 999; 
}

#pie{
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 3%;
    text-align: center;
    color: #fff;
    font-family: "open-sans";
    clear: both;
}

a{
  text-decoration: none;
  color: #fff;
  font-family: "open-sans";
}

#cafe_fondo{
    width: 100%;
    height: 4%;
    position: relative;
    margin-top: 84%;
    z-index: 998; 
    background: url('../imagenes/fondo_slid.png') no-repeat top center ;
    background-size: 100% 100%;
    padding-bottom: 15%;
    padding-top: 15%;        
}

#parrafos{
    width: 55%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    text-align: center;
}

#parrafos p{
    font-size: 150%;
    font-family: "open-sans";
    margin: 0;
    padding: 0;
}

#parrafos h2{
    font-family: "allura";
    font-size: 500%;
    margin: 0;
    padding: 0;
    color: #f5b02b;
}

#contactenos{
    width: 40%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 21%;
    text-align: center;
}

#captcha{
    width: 8%;
    height: auto;
    vertical-align: middle;
}

#captchaImg{
    width: 30%;
    height: auto;
    vertical-align: middle;
}

#nombre, #email, #tema, #mensaje{
    width:80%; 
    border:0;
    background-color:transparent;
    font-size: 150%;
    padding-left: 2%;
    padding-bottom: 1%;
    padding-top: 1%;
    font-weight:lighter;
    font-family: "open-sans";
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
    color: white;
    padding-right: 2%;
    height: auto;
    background-size: 100% 100% !important;
}

#nombre, #email, #tema{
    background: url('../imagenes/fondo_txt.png') no-repeat;
}

#mensaje{
    background: url('../imagenes/fondo_txtarea.png') no-repeat;
    resize: none;
}

#code{
    width:29%; 
    border:0;
    background-color:transparent;
    font-size: 120%;
    padding-left: 2%;
    font-weight:lighter;
    font-family: "open-sans";
    margin-left: auto;
    margin-right: auto;
    color: white;
    height: auto;
    background: url('../imagenes/fondo_captcha.png') no-repeat;
    padding-bottom: 1%;
    padding-top: 1%;
    vertical-align: middle;
}

#contactenos h1{
    font-family: "allura";
    font-size: 500%;
    margin: 0;
    padding: 0;
    color: white;
}

#btn_submit{
    width: 160px;
    height: 60px;
    border:0; 
    background-color:transparent;
    background: url('../imagenes/boton.png') no-repeat;
    margin-left: 200px;
    margin-top: 20px;
}

#btn_submit:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1)
}

#captcha_todo{
    display: table;
    //border: 1px solid red;
    height: auto;
    margin: 0 auto;
    width: 100%;
}

.invalid{
    border: 1px solid red !important;
}

#form-content-error{
    display: none !important;
}

.invisible{
    display: none !important;
}

#fondo_cafe{
    width: 70%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 27.05%;
}

#cafe{
    position: absolute;
    background: url('../imagenes/fondo_slid.png') no-repeat top center ;
    background-size: 100% 90%;
    z-index: 999;
    padding-bottom: 13%;
    padding-top: 13%;
    width: 73.6%;
    height: auto;
    margin-left: 14%;
    margin-top: 28.3%;
}