/* RESET */
HTML, BODY { 
    font-family: 'Oswald', sans-serif;
    box-sizing: border-box;
    margin:0; padding:0;
    width:100vw; height:100vh;
    overflow: hidden !important;
    position: fixed; 
}
UL, OL { margin: 0; padding:0 }

* {
    user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
}

#HAMMER { position: fixed; width:100vw; height:100vh; z-index:1000000; display:none } 
#SOCIAL, #NAV { z-index:1000001 }
#HEADER { position: relative; z-index:1000002 }

/* HEADER */
#HEADER * { transform: translateY(0)}
#HEADER .introAnim {
    transform: translateY(-500%);
    transition: transform 0.5s ease;
}
#HEADER .introAnim.show { 
    transform: translateY(0);
}

#LOGO { text-align:center; margin-top:2vh; }
#LOGO IMG { height:20vh; width:auto; max-height:140px }

#FOOTER * { transform: translateY(0)}
#FOOTER .introAnim {
    transform: translateY(500%);
    transition: transform 0.5s ease;
}
#FOOTER .introAnim.show { 
    transform: translateY(0);
}

#NAV { position:absolute; bottom:1.5vh; text-align:center; width:100%; }
#NAV LI, #SOCIAL LI  {
    display: inline-block;
    margin:0 10px;
    color: #FFF;
    /* -webkit-text-shadow: -1px 0 1px #222,0 1px 1px #222,3px 3px 6px rgba(0,0,0,.4),-3px -3px 6px rgba(0,0,0,.4);
    text-shadow: -1px 0 1px #222, 0 1px 1px #222, 3px 3px 6px rgba(0,0,0,.4), -3px -3px 6px rgba(0,0,0,.4); */
}
#NAV LI.sep { font-weight:bold}
#NAV LI A, #SOCIAL LI A {
    color: #FFF;
    text-decoration: none;
    line-height:24px;
    font-size:14px
}

#SOCIAL { position:absolute; top:9vh; right:4vw }
#SOCIAL LI A { font-size:24px}
#SOCIAL LI:last-child A { font-size:21px;}

/* BULLETS */
/* #SLIDER_NAV { position: absolute; bottom:3vh; left:9vw }
#SLIDER_NAV:before { left:110% }
#SLIDER_NAV:after { right:110% }
#SLIDER_NAV:before, #SLIDER_NAV:after { 
    position:absolute; display: block; top:15px;
    content:""; 
    width:20px; height:1px; 
    background:#000
}
#bullets li { 
    position: relative;
    display: inline-block; 
    width:6px; height: 6px;
    margin:0 12px;
    border-radius: 50%;
    background: rgba(0,0,0,0);
    transition: background 0.5s;
    cursor: pointer;
}
#bullets li:after {
    content: '';
    position: absolute;
    top: -4px; left: -4px; right: -4px; bottom: -4px;
    border-radius: 50%; border: 1px solid #000;
}
#bullets li:hover, #bullets li.current {
    background: rgba(0,0,0,0.8);
} */


/* BGS */
#BGS { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10 }
.bg { 
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-repeat:no-repeat; background-size: cover; background-position: center center;
    opacity:0;
}
#bg_1 { background-image: url(../../resources/images/bg_red.jpg) }
#bg_2 { background-image: url(../../resources/images/bg_yellow.jpg) }
#bg_3 { background-image: url(../../resources/images/bg_orange.jpg) }


/* BOTTLES */
#BOTTLES { display: none }
.bottle { 
    position: absolute; top:15vh;
    z-index:1000001;
    transform-origin:top center;
    opacity:0;
    pointer-events: none;
}
.bottle.left { left:0 }
.bottle.center { left:50% }
.bottle.right { left:100% }

.bottle_img { position: absolute; transform: translateX(-50%); cursor: pointer; pointer-events: auto; }
.bottle_img IMG { height:80vh; width:auto }
.bottle.center .bottle_img { cursor: default;}

.bottle_bg { 
    position: absolute; 
    z-index:-2;
    top:3vh; left:50%; transform: translateX(-50%);
    height:80vh; 
}
.bottle_bg IMG { width: inherit; height: inherit }
.bubbles { height:0%; width:auto; opacity:0 }
.bubbles IMG { opacity:0.7;}
.curves {
    position: absolute;
    height:100%; width:auto;
    opacity:0;
}
.curves.left { left:0 }
.curves.right { right:0 }

.speakers { position: absolute; top:-100vh; left:50%; transform: translateX(-50%); opacity:0;}
.speakers IMG { height:45vh; width:auto }

.lines { position: absolute; width:100%; opacity:0.3; pointer-events: none; z-index:-10}
.lines IMG { height:80vh; width:auto }

/* TEXTS */
#TEXTS { position: absolute; width:45vw; right:10vw; top:18vh; height:80vh  }
.playsign { position: absolute; top:8vh; width: 100%}
.playsign > * { opacity: 0 }
.playsign IMG {  width: 100%; height:auto }

.play_sign { position:absolute; top:0; width:100% }
.play_text {
    opacity: 0;
    color:#FFF; font-size: 18px; text-align:center;
    width:80%; margin:5vh auto 0;
}

/* INFO */
#INFO { display: none }

/* AGE GATE */
#AGE_GATE {
    display: none; opacity:0;
    position:absolute; z-index:1000002;
    top:55%; left:50%; transform: translate(-50%, -50%);
    width:600px; max-width:90%;
    color:#FFF;text-align:center;font-size:120%;
}
.age_btn { padding:20px; margin:20px; font-size:150%; cursor: pointer}

/* COOKIES CONSENT */
#COOKIES_CONSENT { 
    display: none; opacity:0;
    position:absolute; z-index:1000002;
    bottom:2vw; left:2vw;
    width:360px; max-width:calc(96vw - 40px);
    text-align:center;
    background:rgba(0,0,0,0.8);
    border-radius:8px;
    padding:0 20px 15px;
    color:#FFF;
}
#COOKIES_CONSENT a { cursor: pointer; font-weight:bold }
#COOKIES_CONSENT i.fa { font-size:20px; position: absolute; right:8px; top:8px; color:#FFF; cursor: pointer;}

/* POPUP */
#POPUP {
    position: fixed; z-index: 1000009;
    top:0; left:0; width:100%; height:100%; 
    pointer-events: all;
    display:none; opacity:0;  
}
#popup_overlay {
    position: fixed; z-index: -1;
    top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6);   
}
#popup_wrapper {
    position:fixed;
    width:700px; height:90%; max-width:90%;
    top:50%; left:50%; transform: translate(-50%, -50%);
    background:rgba(255, 255, 255, 0.95);
    box-shadow:0px 0px 10px rgba(0,0,0,0.8);
    border-radius: 8px; border:0 none;
    overflow: hidden;
}
#popup_title { 
    position: absolute;
    width:100%; top:-2px; left:-2px;
    background:#990E25;
    font-weight: 600; color:#FFF; font-size:22px; text-align:center; text-transform: uppercase;
    padding:15px 4px;
}
#popup_content { 
    position: relative;
    width:90%; height:85%;
    top:12%; left:5%; 
    padding-right:10px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal; color:#222; font-size:13px; text-align:justify;
    overflow-x: hidden;
    overflow-y: scroll;
}
#popup_btn { cursor: pointer;}
#popup_btn i.fa { font-size:24px; position: absolute; right:16px; top:16px; color:#FFF}