/* Device version: Desktop + Mobile */

/* Fonts */

@font-face {
    font-family: baskerville;
    src: url(baskerville.ttf);
}

/* Animations */

@keyframes scaleDown {
    from { transform: scale(1); }
    to { transform: scale(0.8); }
}

@keyframes scale-up {
    from {transform: scale(1); }
    to { transform: scale(1.2); }
}

@keyframes move-in-x {
    from { transform: translateX(20%); }
    to { transform: translateX(0%); }
}

/* Transitions */

.sharp {
    filter: blur(0px);
    transition: filter 1s;
}

.blur {
    filter: blur(10px);
    transition: filter 1s;
}

.fade-in {
    opacity: 1;
    transition: opacity 1s;
}

.fade-out {
    opacity: 0;
    transition: opacity 1s;
}

.btn {
    transition: 0.3s;
    transform: scale(1);
}

.btn:active {
    transform: scale(.8);
}

/* Page scope: Global */

.scale-bottle-elements-down {
    animation-duration: 10s;
    animation-name: scaleDown;
    /* animation-iteration-count: infinite; -> INTERESTING TO KEEP */
    /* animation-direction: alternate; -> INTERESTING TO KEEP */
    animation-fill-mode: forwards;
}
  
.scale-bottle-up {
    animation-duration: 10s;
    animation-name: scale-up;
    animation-fill-mode: forwards;
}
  
.move-curtain {
    animation-duration: 10s;
    animation-name: move-in-x;
    animation-fill-mode: forwards;
}

.page-container {
    position: absolute;
    top: 0%; left: 0%;
    width: 100%; height: 100%;
    background: url("./images/bg-desktop.jpg") no-repeat;
    background-size: cover;
}

.bg {
    position: absolute;
    top: 0%; left: 0%;
    width: 100%; height: 100%;
    background: url("./images/bg-mobile.jpg") no-repeat;
    background-size: cover;
}

.rivet {
    position: absolute;
    width: 3vh; height: 3vh;
    background: url("./images/rivet.png") no-repeat;
    background-size: cover;
}

.curtain {
    position: absolute;
    bottom: 0%; right: 0%;
    width: 300px; height: 100%;
    background-size: contain;
}

.share-btn {
    display: block;
    position: absolute;
    top: 2%; right: 5%;
    height: 7vh; width: 7vh;
    background: url("./images/share-btn.png") no-repeat;
    background-size: contain;
    z-index: 1;
}

.left-elements-list {
    position: absolute;
    top: 10%; left: 2%;
    width: 50%; height: 90%;
}

.bottle-collage-container {
    position: absolute;
    bottom: 0%; right: 0%;
    width: 85vh; height: 100vh;
}

#bottle-collage {
    position: absolute; 
    bottom: 0%; right: 0%; 
    height: 100%; width: 100%;
}

.top-elements-list {
    position: absolute;
    top: 5%; left: 0%;
    width: 100%; height: 65%;
}

.bottom-elements-list {
    display: block;
    position: absolute;
    bottom: 0%; left: 0%;
    width: 100%; height: 25%;
}

.launch-btn-container {
    position: relative;
    left: 50%;
    height: 9vh; width: 32vh;
    transform: translateX(-50%);
    display: none;
}

#launch-btn {
    position: absolute;
    height: 9vh; width: 32vh;
    content: url("./images/launch-btn.png");
}

#video-container {
    display: none; 
    position: absolute;
    top: 0%; left: 0%;
    width: 100%; height: 100%;
}

#video {
    position: absolute; 
    top: 50%; left: 50%;
    width: 100%; height: 60vw;
    transform: translate(-50%, -50%)
}

.buttons {
    position: relative;
    left: 50%;
    width: 30vh; height: 7vh;
    transform: translateX(-50%);
}

.master-blender-btn-container {
    position: absolute;
    left: 0%; top: 50%;
    height: 7vh; width: 15vh;
    transform: translateY(-50%);
}

#master-blender-btn {
    position: absolute;
    height: 6vh; width: 100%;
    content: url("./images/master-blender-btn.png");
}

.tutorial-btn-container {
    position: absolute;
    right: 0%; top: 50%;
    height: 7vh; width: 15vh;
    transform: translateY(-50%);
}

#tutorial-btn {
    position: absolute;
    height: 6vh; width: 100%;
    content: url("./images/tutorial-btn.png");
}

.back-btn-container {
    position: relative;
    top: 0%; left: 50%;
    width: 20vh; height: 6vh;
    transform: translateX(-50%);
}

.back-btn {
    position: absolute;
    width: 20vh; height: 6vh;
}

.cookies {
    display: none;
    position: relative;
    left: 50%;
    height: 2vh; width: 5vh;
    transform: translateX(-50%);
    font-size: 1.5vh;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

/* Page scope: Landscape warning */

#landscape-msg {
    display: none;
}

.landscape-text-msg {
    position: absolute;
    top: 50%; left: 50%;
    font-size: 5vh;
    text-align: center;
    transform: translate(-50%, -50%);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    font-family: Baskerville;
    font-weight: 600;
    font-size: 8vh;
}

/* Page scope: Main */

.logo {
    position: relative;
    left: 50%;
    height: 13vh; width: 28vh;
    background: url("./images/logo.png") no-repeat;
    background-size: contain;
    transform: translateX(-50%);
}

.slogan {
    position: relative;
    left: 50%;
    height: 30vh; width: 52vh;
    background: url("./images/slogan.png") no-repeat;
    background-size: contain;
    transform: translateX(-50%);
}

.scan-the-qr-code {
    position: relative;
    left: 50%;
    height: 10vh; width: 40vh;
    background: url("./images/scan-the-qr-code.png") no-repeat;
    background-size: contain;
    transform: translateX(-50%);
}

.product-group {
    position: relative;
    left: 50%;
    height: 40%; width: 100%;
    transform: translateX(-50%);
}

.chinese-text-container {
    position: absolute;
    top: 0%; left: 20%;
    height: 25vh; width: 15vh;
    transform: translateX(-50%);
}

.chinese-text {
    position: absolute;
    top: 0%; left: 0%;
    height: 100%; width: 100%;
}

.bottle-container {
    position: absolute;
    top: 5%; left: 52%;
    height: 40vh; width: 20vh;
    transform: translateX(-50%);
}

.bottle {
    position: absolute;
    top: 0%; left: 0%;
    height: 100%; width: 100%;
}

.limited-edition-container {
    position: absolute;
    top: -15%; right: 24%;
    height: 16vh; width: 20vh;
    transform: translateX(50%);
}

.limited-edition {
    position: absolute;
    top: 5%; left: 5%;
    height: 80%; width: 80%;
}

.qr-bg {
    position: relative;
    left: 50%;
    height: 32vh; width: 30vh;
    background: url("./images/qr-bg.png") no-repeat;
    background-size: contain;
    transform: translateX(-50%);
}

.qr-code {
    position: absolute;
    top: 50%; left: 50%;
    height: 70%; width: 70%;
    background: url("./images/qr-code.png") no-repeat;
    background-size: contain;
    transform: translate(-50%, -50%);
}

.legal {
    position: absolute;
    left:0px;
    bottom: 1vh;
    width: 100vw;
    text-align: center;
    font-size: .7rem;
    font-weight: bold;
    font-family:Arial, Helvetica, sans-serif;
}

.coming-soon-text {
    position: relative;
    left: 50%;
    height: 10vh; width: 40vh;
    background: url("./images/coming-soon.png") no-repeat;
    background-size: contain;
    transform: translateX(-50%);
}

.ended-text {
    position: relative;
    left: 50%;
    height: 15vh; width: 40vh;
    background: url("./images/experience-ended.png") no-repeat;
    background-size: contain;
    transform: translateX(-50%);
}

/* .tutorial-btn-container {
    display: block;
    position: relative;
    left: 50%;
    height: 6vh; width: 20vh;
    transform: translateX(-50%);
}

#tutorial-btn {
    position: absolute;
    height: 6vh; width: 20vh;
    content: url("./images/tutorial-btn.png");
} */

.cookies {
    display: block;
    position: relative;
    left: 50%;
    height: 2vh; width: 5vh;
    transform: translateX(-50%);
    font-size: 1.5vh;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

/* Page scope: Tutorial */

.tutorial-steps {
    position: relative;
    left: 50%;
    height: 60vh; width: 40vh;
    background: url("./images/tutorial-steps.png") no-repeat;
    background-size: contain;
    transform: translateX(-50%);
}

/* Page scope: Cookies */

.text-container {
    position: absolute;
    overflow-y: scroll;
    top: 5%; left: 5%;
    width: 90%; height: 80%;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    font-family: Baskerville;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
}

/* Page scope: Coming soon */

.text-container {
    position: absolute;
    overflow-y: scroll;
    top: 5%; left: 5%;
    width: 90%; height: 80%;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
    font-family: Baskerville;
    font-style: normal;
    font-weight: 600;
    font-size: 12px;
    line-height: 14px;
}

/* Device version: Mobile */

.coming-soon-text-mobile {
    position: relative;
    top:30px;
    left: 50%;
    height: 10vh; width: 30vh;
    background: url("./images/coming-soon.png") no-repeat;
    background-size: contain;
    transform: translateX(-50%);
}

.legal-mobile {
    position: absolute;
    left:5vw;
    bottom: 5px;
    width: 90vw;
    text-align: center;
    font-size: .4rem;
    font-weight: bold;
    font-family:Arial, Helvetica, sans-serif;
}

/* @media only screen and (max-width: 640px) { */


/* } */