@charset "utf-8";

/* CSS Document */



@font-face {

    font-family: 'heineken_serif_18bold';

    src: url('../fonts/heinekenserif18-bold-webfont.woff2') format('woff2'),

         url('../fonts/heinekenserif18-bold-webfont.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'Roboto-Thin';

    src: url('../fonts/Roboto-Thin.woff2') format('woff2'),

         url('../fonts/Roboto-Thin.woff') format('woff');

    font-weight: normal;

    font-style: normal;

}

@font-face {

    font-family: 'Roboto-Regular';

    src: url('../fonts/Roboto-Regular.woff2') format('woff2'),

         url('../fonts/hRoboto-Regular.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'Roboto-Light';

    src: url('../fonts/Roboto-Light.woff2') format('woff2'),

         url('../fonts/Roboto-Light.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}

@font-face {

    font-family: 'Roboto-Bold';

    src: url('../fonts/Roboto-Bold.woff2') format('woff2'),

         url('../fonts/Roboto-Bold.woff') format('woff');

    font-weight: normal;

    font-style: normal;



}







*{ font-family: 'Roboto-Regular'; margin:0;  padding:0;  outline:none}

.verification-box h2{font-family: 'heineken_serif_18bold'; color:#090}

#verify-btn{ font-family: 'heineken_serif_18bold'; background-color: rgb(133, 199, 41); background-image: linear-gradient(90deg, rgb(55, 156, 95) 0%, rgba(0, 0, 0, 0) 100%); background-origin: padding-box; border-radius:20px}





#age-verification {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.8);display: flex;justify-content: center;align-items: center;z-index: 1000;color: white;}

.verification-box {background: #222;padding: 2rem;border-radius: 10px;text-align: center;max-width: 500px;}

select {padding: 0.5rem;margin: 0.5rem;border-radius: 10px;}

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:#84C62A; margin-top:1rem; display:none; font-family:'heineken_serif_18bold';}



body{ background: url(../images/Bg-Desk.jpg) top right no-repeat; background-color:#036228; background-attachment: fixed; background-size: cover}



.col-lg-4{ background:none ; --bs-body-bg: none !important; width:750px; background:url(../images/bg-content.png) repeat; margin-top:20px; border-top-left-radius: 150px; border-top-right-radius: 150px}

.card{ box-shadow:none; --bs-card-border-color:none; --bs-border-color-translucent:none; color:white}



.container input[type='text'], .container input[type='email'], .container input[type='tel']{ background:white; color:#036228; font-family: 'Roboto-Regular';}

.titutlos{font-family: 'heineken_serif_18bold'; font-size:22px}
.botones{ width:80%; padding-top:20px; padding-bottom:20px; margin:0 auto 30px auto}
.botones li{ width:50%; float:left; text-align:center; list-style:none}
.Desk{display: block;}
.Mobile{display:none}

#enjoy{ width:50px; height:50px; position:fixed; top:10px; right:10px}
#UB-enjoy{width:20px; height:291px; position:fixed; bottom:20px; right:17px}


@media only screen and (max-width: 620px){
body{ background:url(../images/Bg-Mob.jpg) top right no-repeat;background-attachment: fixed; background-size: cover; padding-top:20px}	
.col-lg-4{ width:85% !important; margin:0 auto !important; border-radius:150px}
.botones{ width:100%;}
.botones li a{ font-size:14px}
.Desk{display: none;}
.Mobile{display:block}
#UB-enjoy{right:7px}
#enjoy{ width:40px; height:40px; right:0px !important}
#enjoy  img{ width:30px !important; height:30px !important}
.bottom-mob{ padding-bottom:50px}
}