@font-face { font-family: 'Linux Libertine Capitals'; src: url('LinLibertineCapitals.eot'); src: url('LinLibertineCapitals.eot?#iefix') format('embedded-opentype'), url('LinLibertineCapitals.woff2') format('woff2'), url('LinLibertineCapitals.woff') format('woff'), url('LinLibertineCapitals.ttf') format('truetype'); font-weight: normal; font-style: normal; }


* { box-sizing: border-box;  }
#divFormulario *{font-family: 'Linux Libertine Capitals', serif;}
.fa:before{font-family:FontAwesome}
html, body { margin: 0; padding: 0; height: 100%; }

body { background: linear-gradient( #fff 50%, #eeeeee 90%, #fff 90.01%, #fff 100% ); }

iframe{display:none}



#divMapaExt {  background: #003b65;  overflow: hidden; }
#divMapaExt.activo #map { transform: scale(1); }

#map { width: 100%; height: 100%; opacity: 0; transform: scale(1.2);  }
#map.cargado { opacity: 1; }

#btnVolver { position: absolute; width: 4rem; height: 4rem; line-height: 4rem; display: block; top: 10px; left: 10px; z-index: 1; background: #fff; color: #7f113c; font-size: 1.8rem; border-radius: 50%; text-align: center; border: solid 3px #7f113c; }
#btnVolver:hover { background: #7f113c; color: #fff; }
#btnVolver:active { transform: scale(.9); }







#divFondo { background-image: url(../img/botellas.png); background-repeat: no-repeat; background-position: right bottom; height: 100%; background-size: 40%; }

header { display: table; width: 100%; }
header > div { display: table-cell; padding-top: 2rem; padding-bottom: 1rem; vertical-align: top; }
header > div > img { max-width: 100%; display: inline-block; }
header > div:last-child { text-align: right; }

input[type="search"] { font-size: 1.5rem; padding: .5rem; width: 100%; border: none; border-bottom: solid 2px #7e7350; outline: none; margin: 1rem 0; }
input[type="search"]:focus { border-bottom-color: #7f113c; }



input[type="submit"], #divBotones>div> a,.btnBrinda {text-decoration:none; border: solid 2px #7f113c; background: #fff; text-align: center; width: 100%; display: block; padding: .5rem; color: #7f113c; font-size: 2rem; outline: none; border-radius: 2px; cursor: pointer; transition: all .2s; }
input[type="submit"]:hover, #divBotones>div> a:hover,.btnBrinda:hover { background: #7f113c; color: #fff; }
input[type="submit"]:active, #divBotones>div> a:active,.btnBrinda:active { transform: translateY(3px); }
#secFormulario { font-size: 2rem; padding-top: 4rem; opacity: 0; }

/*#secFormulario.activo { animation: pixel-aparecer; animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
                         animation-duration: 1s; animation-fill-mode: forwards; }*/

#secFormulario.activo{transform: scale(1); transform-origin: bottom; bottom: -1px; opacity: 1;}

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

#divResultados { text-align: center; font-size: 1.5rem; line-height: 3rem; padding-top: 1rem; display: none; }
/*#divResultados.activo { display: block; animation: pixel-aparecer-2;  animation-duration: .6s; animation-fill-mode: forwards; }*/

#divResultados.activo{transform: scale(1);  opacity: 1;display:block}
#divResultados strong { display: block; line-height: 4rem; text-transform: uppercase; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

#divBotones{display:table; width:100%; margin-top:1rem}
#divBotones>div{display:table-cell; width:50%; }
#divBotones>div:first-child{padding-right:.5rem}
#divBotones>div:last-child{padding-left:.5rem}

    #divExt, #divFormulario {height: 100%; }

    .divCompartir{position:relative}
    .divCompartir>div{position:absolute; background:#fff;padding:1rem; box-shadow:0 0 20px rgba(0,0,0,.1); display:none}


    .btnBrinda{
margin-top:1rem;
    font-size: 1.6rem;

}

@media only screen and (max-width:999px) {
    #divMapaExt {  transition: height  .7s ease-in;height:0  }
    #divMapaExt.activo { height: 100%; }
#map { transition: opacity .5s ease-in, transform 2.5s 1s ease-out; }
}

@media only screen and (min-width:1000px) {

    #divExt { display: table; width: 100%; height: 100%; }
    #divExt > div { display: table-cell; height: 100%; vertical-align: top; }
    #divMapaExt { width: 0%;  transition: width .7s ease-in;  height: 100%; }
    #divMapaExt.activo { width: 50%; }
#map { transition: opacity .5s ease-in, transform 2.5s ease-out; }
}

@media only screen and (max-width:1199px) {
    .divColumna { padding: 0 2rem; }
    #divResultados strong { font-size: 3rem; }
}

@media only screen and (min-width:1200px) {
    .divColumna { padding: 0 4rem; }
    #divResultados strong { font-size: 4rem; }
}


@media only screen and (max-height:750px) {
    #divFondo { background-size: 25%; }
}

@media only screen and (max-height:850px) {
    #divFondo { background-size: 35%; }
}

@keyframes pixel-aparecer {
    0% {  transform: scale(.5); transform-origin: bottom; bottom: -1px; }

    100% { transform: scale(1); transform-origin: bottom; bottom: -1px; opacity: 1; }
}

@keyframes pixel-aparecer-2 {
    0% { transform: scale(.6); opacity:0 }

    100% {  transform: scale(1);  opacity: 1; }
}