:root{
    --grey1:#767f82;
    --grey2: #C72443;
    --green1: #90c22b;
    --green2: #FDC40F;
    --pink1: #f188b1;
    --pink2: #995D7B;
    --mint1: #80c6ac;
    --mint2: #50BFD0;
    --berry1: #5b81c0;
    --berry2: #6E6E6E;
    --nostalgic1: #e08435;
    --nostalgic2: #895a2e;

    --fullheight: 100vh;
}


/* keyframes for animation;  simple 0 to 360 */
@keyframes spin {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}

html{
    font-family: 'rockwell';
    font-weight: 700;
    text-transform: uppercase;
    font-size: 16px;
    height: 100%;
    min-height: 100%;
}

body{
    background-color:var(--grey1); /* grey */ 
    transition: background-color .5s linear;
    animation: rainbow 20s infinite linear;
    height: 100%;
    min-height: 100%;
}
@keyframes rainbow {
    0%, 90%    { background: var(--grey1); }
    10%, 20%    { background: var(--green1); }
    30%, 40%    { background: var(--pink1); }
    50%, 60%    { background: var(--mint1); }
    70%, 80%     { background: var(--berry1); }
}

body[class^="theme-"], body[class*=" theme-"]{
    animation: none;
    transition: background-color .5s linear;
}


body.fp-viewing-footer #logoBg {    background-color: var(--grey2); }

body.theme-grey{             background-color: var(--grey1); }
body.theme-grey .bg2,
body.theme-grey #logoBg {    background-color: var(--grey2); }
#menu a.grey:hover{          color: var(--grey2); }

body.theme-green{           background-color: var(--green1); }
body.theme-green .bg2,
body.theme-green #logoBg {  background-color: var(--green2); }
#menu a.green:hover{        color: var(--green2); }

body.theme-pink{            background-color: var(--pink1); }
body.theme-pink .bg2,
body.theme-pink #logoBg {   background-color: var(--pink2); }
#menu a.pink:hover{         color: var(--pink2); }

body.theme-mint{            background-color: var(--mint1); }
body.theme-mint .bg2,
body.theme-mint #logoBg {   background-color: var(--mint2) }
#menu a.mint:hover{         color: var(--mint2); }

body.theme-berry {          background-color: var(--berry1) }
body.theme-berry .bg2,
body.theme-berry #logoBg {  background-color: var(--berry2) }
#menu a.berry:hover{        color: var(--berry1); }

body.theme-nostalgic{             background-color: var(--nostalgic1); }
body.theme-nostalgic .bg2,
body.theme-nostalgic #logoBg {    background-color: var(--nostalgic2); }
#menu a.nostalgic:hover{          color: var(--nostalgic2); }




#fp-nav.fp-right {
    right: 8px;
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
    background: #fff;
}


* {
    
    margin-block-start: 0px;
    margin-block-end: 0px;
}

h1{ font-size: 2.5rem; }
h2{ font-size: 2rem; }
h3{ font-size: 1.5rem; }
h4{ font-size: 1.25rem; }
h5{ font-size: 1.125rem; }
p{ margin-bottom: 10px; line-height: 1.4;}
em{ font-style: italic; }
strong{ font-weight: bold; }
a{ text-decoration: none; color: inherit }

.huge { 
    font-size: 3rem; 
    font-weight: 700;
}

.textLight{
    font-family: proxima-nova-extra-condensed, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

.textRight{
    text-align: right;
}


#raycontainer{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#raycontainer::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 0  10vw 0 rgba(0,0,0,.3);
    z-index: 0;
}
#rays	{ /* with animation properties */
    position: absolute;
    width: 10000px;
    height: 10000px;
    top: -5000px;
    left: -5000px;
    margin-left: 50%;
    margin-top: calc( var(--fullheight) * .7);
    animation: spin 70s infinite linear;
    
    
}



#rays svg{
    width: 100%;
    height: 100%;
}

.ray{
    opacity: .15;
    fill: #fff;
    
}


#header{
    position: fixed;
    z-index: 5;
    top: 0;
    left: 0;
    height: 70px;
    width: 100%;
}


#logoContainer{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 5;
    top: 0px;
    left: 50%;
    line-height: 0;
    transition: .5s;
    margin-left: -50px;
    margin-top: 20px;
    height: 109px;
    width: 100px;
}


#logoBg{
    position: relative;
    width: 100%;   
    z-index: -1;
    transition: background-color 1s;
}
#logoContainer img{
    width: 100%;
}


.socials{
    display: flex;
}
.socials a{
    width: 40px;
    padding: 10px;
    margin-right: 10px;
    text-align: center;
    fill: #fff;
}
.socials svg{
    height: 22px;
}
.socials a:hover{
    fill: #000;
}
.socialIcon{
    display: inline-block;
    height: 100px;
    fill: inherit;
}




#topNav{
    position: absolute;
    top: 10px;
    right: 60px;
    padding: 0px;
    fill: #ffF;
    display: flex;
}



#menuButton{
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 10px;
    z-index: 10;
    background: none;
    border: none;
    cursor: pointer;
}

#menuButton svg{
    height: 22px;
}


#menuButton:hover path{
    pointer-events: none;
    stroke:black;
    box-shadow: 0 0 10px #000;
}


#menu{
    position: absolute;
    top:0;
    right: 0;
    bottom: 0;
    width: 80%;
    max-width: 0px;
    background: #000;
    overflow: hidden;
    z-index: 11;
    transition-duration: .2s;
}

body.showMenu #menu {
    max-width: 300px;
    transition-duration: .3s;
}


#menu ul{
    padding: 70px 50px 0px;

    font-family:"proxima-nova-extra-condensed";
    font-weight: normal;
    font-size: 1.7rem ;
    
    max-height: 80%;
    
    
}

#menu li {
    margin-bottom: 20px;
}

#menu a{
    display: block;
    color: #fff;
    text-decoration: none;
    line-height: .8;
    word-spacing:9999px;
}
#menu a:hover{
    color: #aaa;
    fill: #aaa;
}


#menu li{
    transform: translateX(1000px);
    transition-timing-function: ease-out;
}

#menu li:nth-child(1){ transition-duration: 0.3s; }
#menu li:nth-child(2){ transition-duration: 0.4s; }
#menu li:nth-child(3){ transition-duration: 0.5s; }
#menu li:nth-child(4){ transition-duration: 0.6s; }
#menu li:nth-child(5){ transition-duration: 0.7s; }
#menu li:nth-child(6){ transition-duration: 0.8s; }
#menu li:nth-child(7){ transition-duration: 0.9s; }
#menu li:nth-child(8){ transition-duration: 1.0s; }

body.showMenu #menu li{
    transform: translateX(0);
}



#menu .socials {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 40px 20px;
}
/* FOOTER - START */

#footerSection{
    background: #222;
    color: #fff;
}

#productCarousel {
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
    padding-top: 100px;
}
#productCarousel > h5 {
    width:50%;
    max-width: 250px;
    margin: 0 auto 50px;
    line-height: 1.0;
    font-size: 1.5rem;
    transform-origin: center center;
    transform: scale(0);
    text-align: center;
}
.section.active #productCarousel > h5{
    animation: spinIn .5s 1s forwards ease-out;
}
@keyframes spinIn{
    from{   transform: scale(0) rotate(0turn);    }
    to{     transform: scale(1) rotate(2.02turn);  }
}
#productOwl{
    height: 50%;
}


#footerBottom{
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-align: center;
    padding-bottom: 50px;
}

#footerBottom button{
    border: 3px solid #fff;
    color: #fff;
    background: transparent;
    text-decoration: none;
    letter-spacing: 2px;
    line-height: 1.2;
    font-size: 1.2rem;
    padding: 5px 15px;
    cursor: pointer;
}

#footerBottom button:hover{
    background: #000;
}









.stage{
    display: block;
    position: relative;
    height: 100%;
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}
.stageWidth{
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
}
.stage.full{
    max-width: none;
}
.stage.noMargin{
    width: 100%;
}

/* home - ontdek - start */
#ntkc{
    position: relative
}
#nuTeKoop{
    position: absolute;
    bottom: 50%;
    right: 0%;
    left: 0%;
    font-size: 1.5rem;
    line-height: 1.2;
    text-align: right;
    transform: scale(0);
    z-index: 0;
    opacity: 0;
}

.section.active #nuTeKoop{
    opacity: 1;
    bottom: 100%;
    transform: scale(1);
    transition-duration: .3s;
    transition-delay: 2s;
    transition-easing: cubic-bezier(.1,.67,.1,10);
}


#nuTeKoop img{
    width: 40%;
    transform: rotate(10deg);
    transform-origin: center right;
}
#nuTeKoop a:hover img{
    transform: scale(1.2) rotate(10deg);
    transition-duration: .1s;

}

#scroll4more{
    position: absolute;
    bottom: 0px;
    height: auto;
    max-height: 0px;
    width: 100%;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
    z-index: 10;
}

#scrollHand{
    display: block;
    height: 80px;
    width: 80px;
    margin: 20px auto;
    border-radius: 50%;
    padding:10px;
    animation: handBounce 1s linear 1s forwards infinite;
    text-align: center;
}

#scrollHand img{
    display: block;
    height: 100%;
    width: 100%;
}

#scrollHand:hover{
    cursor: pointer;
    animation-play-state: paused;
    background-color: #000;
}

@keyframes handBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50%{
        transform: translateY(-15px);
    }
}

/* home - ontdek - active */
.section.active #scroll4more{
    max-height: 50%;
    transition-duration: .5s;
    transition-delay: 1s;
}

#homeLogo{
    position: relative;
    z-index: 1;
    width: 80%;
    margin: 0 auto -20px;
}
/* home - ontdek - end */












/* home - product - start */

.homeSplitTop{
    position: relative;
    height: 70%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    margin-bottom: 20px;
}
.package{
    position: absolute;
    bottom:100%;
    right: 50%;
    width: 100px;
    margin-right: -100px;
    margin-bottom: -5px;
    transform: scale(0)
}
.package img{
    width: 100%;
}
.dude{
    display: block;
    margin-top: auto;
    height: 85%;
    max-height: 768px;
}


.productHomeText{
    transform: scale(0);
    margin: 10px 0 30px;
    text-transform: uppercase;
    font-weight: bold;
}
.productLabel{
    text-align: center;
    display: block;
    padding: 10px 10px 5px;
    color: #fff;
    line-height: 1;
    margin: 0 0 10px;
}
body.isMac .productLabel{
    padding: 10px;
}

.productLabel img{
    display: none;
    height: 22px;
}


.subLabel{
    font-size: 2rem;
}


.pGo{
    position: relative;
    display: inline-block;
    padding: 5px 15px;
    border: 3px solid #fff;
    color: #fff;
    text-decoration: none;
    letter-spacing: 2px;
    line-height: 1.2;
    font-size: 1.2rem;
    animation: pulse 10s 1s infinite forwards;
}
@keyframes pulse{
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2, 1);
    }
}

.pGoBG{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: -1;
}
a:hover .pGo{
    animation-play-state: paused;
}
a:hover .pGo .pGoBG{
    width: 100%;
    transition-duration: .2s;
}





/* home - product - active */
.section.active .package{
    animation-delay: .5s;
    animation-duration: .8s;
    animation-iteration-count: 1;
    animation-name: bounce-7;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
@keyframes bounce-7 {
    0% {    bottom: 100%;   transform: scale(.6); }
    60% {   bottom: 0;      transform: scale(1);  }
    60% {   bottom: 0;      transform: scale(1.1, .9);}
    75% {   bottom: 30px;   transform: scale(.95, 1.05);  }
    90% {   bottom: 0px;   transform: scale(1);  }
    93% {   bottom: 5px;   transform: scale(1.1, 1.05 );  }
    100% {   bottom: 0px;    transform: scale(1);  }
}
.section.active .productHomeText{
    animation-name: showProductLabel;
    animation-duration: .25s;
    animation-delay: .80s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}
@keyframes showProductLabel {
    0% { transform:     scale(0) }
    85% { transform:    scale(1.2) }
    100% { transform:   scale(1) }
}

/* home - product - end */







.stageTop{
    position: relative;
    height: calc( var(--fullheight) * .7);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-align: center;
}
.stageFromTop{
    position: relative;
    margin-top: 150px;
}





#staticPackage{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--fullheight);
}
#spContainer{
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    transition-duration: .5s;
}
#spImageContainer{
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    text-align: center;    
}

#spImage{
    width: 250px;
    height: auto;
    transform-origin: bottom;
}

#staticPackage.slideIn2 #spContainer{
    transition-duration: .8s;
    transition-timing-function: ease-in;
    top: 125%;
}

body.fp-viewing-intro #spImage {
    animation: explode .7s forwards 2.0s;
}

@keyframes explode {
    0%, 100% {
        transform: scale3d(1,1,1);
    }
    40%{
        transform: scale3d(1.4,0.6,1);
    }
    50%{
        transform: scale3d(1,1.2,1);
    }
}

#explosion{
    position: relative;
    height: calc(100% - 375px);
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    z-index: -1;
    overflow:hidden;
    transform-origin: bottom center;
    transform: scale(1);
}
body.fp-viewing-intro #explosion{
    animation: zoomOut 100s 0s linear forwards;
}
@keyframes zoomOut {
    from{
        transform: scale(1);    
    } to {
        transform: scale(3);    
    }
}



#explosion::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 5%;
    right: 0;
    top: 0;
    background-image: url('../img/bubbles.svg');
    background-position: bottom center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    z-index: -3;
    transform-origin: center bottom;
    transform: scale(0)
}

body.fp-viewing-intro #explosion::after{
    transition-delay: 2.3s;
    transition-duration: .5s;
    transform: scale(1);
}

#explosion > div{
    position: absolute;
    width: 8vh;
    height: auto;
    bottom: -120px;
    left: 50%;
    transform: rotate(0) scale(.2);
}
#explosion > div img{
    display: block;
    width: 100%;
    max-height: auto;
}
body.fp-viewing-intro  #explosion > div{
    transform-origin: center center;
    transition-duration: .5s;
    transition-delay: 2.3s;
    transition-timing-function:  cubic-bezier(0, 0.999, 0.999, 1);
}


body.fp-viewing-intro  #candy1{
    bottom: 32%;
    left: 5%;
    transform: rotate(-1830deg) scale(.65);
}
body.fp-viewing-intro #candy2{
    bottom: 55%;
    left: 45%;
    transform: rotate(1100deg) scale(.9);
}   
body.fp-viewing-intro #candy3{
    bottom: 20%;
    left: calc( 100% - 100px);
    transform: rotate(1600deg) scale(.75);
}   


body.fp-viewing-intro #candy1 img{
    animation: spinOutLeft 100s 0s forwards linear;
}
body.fp-viewing-intro  #candy2 img{
    animation: spinOutRight 100s -20s forwards linear;
}
body.fp-viewing-intro #candy3 img{
    animation: spinOutRight 100s -10s forwards linear;
}
    

@keyframes spinOutRight{
    from{ 
        transform: rotate(0deg) scale(1);
    }
    to{
        transform: rotate(360deg) scale(0.5);
    }
}
@keyframes spinOutLeft{
    from{ 
        transform: rotate(0deg) scale(1);
    }
    to{
        transform: rotate(-360deg) scale(0.5);
    }
}


body.fp-viewing-intro .pVector{
    transition-timing-function: linear;
    z-index: -1;
}

body.fp-viewing-intro  #flavor1{ bottom: 35%; left: 30%; transform: rotate(-150deg) scale(0.6);  transition-duration: 0.7s !important;}
body.fp-viewing-intro  #flavor2{ bottom: 45%; left: 40%; transform: rotate(-25deg) scale(0.5);  transition-duration: 0.7s !important;}
body.fp-viewing-intro  #flavor3{ bottom: 30%; left: 50%; transform: rotate(25deg)  scale(0.5);  transition-duration: 0.7s !important;}


body.fp-viewing-intro  #flavor6{ bottom: 5%;  left: 45%; transform: rotate(-45deg) scale(0.8);  transition-duration: 0.5s !important;}
body.fp-viewing-intro  #flavor7{ bottom: 10%; left: 15%; transform: rotate(150deg)   scale(1.0);  transition-duration: 0.5s !important;}
body.fp-viewing-intro  #flavor9{ bottom: 13%; left: 65%; transform: rotate(65deg)  scale(0.9);  transition-duration: 0.5s !important;}


body.fp-viewing-intro  #flavor4{ bottom: 110%; left: -10%;  transform: rotate(-15deg) scale(1.1);  transition-duration: 0.8s !important; }
body.fp-viewing-intro  #flavor5{ bottom: 110%; left: 50%; transform: rotate(45deg)  scale(0.8);  transition-duration: 0.5s !important; }
body.fp-viewing-intro  #flavor8{ bottom: 110%; left: 95%; transform: rotate(-165deg)scale(0.7);  transition-duration: 0.7s !important; }

body.fp-viewing-intro  #twirl1{ bottom: 45%; left: 65%; z-index: -2; transform: rotate(65deg) scale(1);}
body.fp-viewing-intro  #twirl2{ bottom: 25%; left: 20%; z-index: -2; transform: rotate(0deg) scale(1);}
body.fp-viewing-intro  #twirl3{ bottom: 50%; left: 30%; z-index: -2; transform: rotate(0deg) scale(.8);}



.curtains {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
}
.curtains > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    transition-duration: .5s;
    transition-delay: .6s;
    z-index: 1;
    overflow: hidden;;
}
.curtains > div:nth-child(2) {
    left: auto;
    right:0;
}

#animationSection.active .curtains > div,
body.fp-viewing-intro #productIntro .curtains > div {
    transition-duration: .5s;
    transition-delay: 1.0s;
    transition-timing-function: ease-in;
    transform: translateX(-101%);

}
#animationSection.active .curtains > div.curtainRight,
body.fp-viewing-intro #productIntro .curtains > div.curtainRight {
    transform: translateX(101%);
}

#animationSection.active .curtains > div {
    transition-delay: .6s;
}




.curtainContent{
    width: 200%;
    font-size: 3rem;
    padding: 20%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.curtainRight .curtainContent{
    margin-left: -100%;
}




#output{
    display: block;
    max-height: 100%;
    margin: 0 auto;
}


#gameContainer{
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: calc( var(--fullheight) * -0.25) auto 0; /* 1/5 from height*/
    height: calc( var(--fullheight) * 1.25);
    text-align: center;
    display: flex;
    flex-direction: column;
}


#transPlayer{
    margin: 0 -10%;
    height: 100%; 
    max-height: 768px; 
    z-index: -1;
    /* background-color: red; */
}

 


#stageLogo{
    width: 80%;
    max-width: 500px;
    margin: 0 auto;
}
#stageLogo::before{
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    bottom: 100%;
    height: calc( var(--fullheight) * .12);
    transform: perspective(20px) rotateX(5deg);
    transform-origin: bottom center;
    background:#333;
    z-index: -5;
}

#stageLogo::after{
    content: '';
    position: absolute;
    top: -1px;
    left: 10%;
    width: 80%;
    height: 1px;
    background:#000;
}

#stageLogo img{
    display: block;
    width: 100%;
}

body.fp-viewing-ontdek #logoContainer{
    opacity: 0;
    transition-duration: 0s;
}
body.fp-viewing-animation #logoContainer,
body.fp-viewing-game #logoContainer{
    opacity: 0;
    transition-duration: 0.5s;
}

#gameStage{
    flex: 1;
    position: relative;
    width: 80%;
    margin: 0 10%;
    z-index: -1;
}


#grijper{
    position: absolute;
    left: 0;
    width: 200px;
    top: 0;
    left: 0;
    animation: linkrechts linear infinite 2s;
    overflow: hidden;

    height: 200px;
    background-image: url('../img/hand.svg');
    background-repeat: no-repeat;
    background-size: 200px auto;
    background-position: center bottom 10px;

    transition: height .3s;
}



@keyframes linkrechts {
    0%, 100% {
        left: -120px;
    }
    50%{
        left: calc( 100% - 180px );
    }
}


#dropButton{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    box-shadow: none;
    

    display: flex;
    justify-content: center;
    flex-direction: column;
}

#dbPill{
    display: block;
    margin: 35% auto 0;
    padding: 10px 30px;
    background: rgba(0,0,0,.1);
    border-radius: 50px;
    font-size: 1.5rem;
    color: #fff;
}
#dropButton:hover{
    cursor: pointer;
}
#dbPill:hover{
    
    background-color: rgba(0,0,0,.2);
}


#gameSection.drop #grijper{
    animation-play-state: paused;
}
#gameSection.drop #dropButton{
    display: none;
}


#endZone{
    position: absolute;
    bottom: 20px;
    left: 110px;
    right: 61px;
    height: 40px;
}

#candyBottom{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:0;
    display: flex;
    justify-content: space-evenly;
    z-index: -1;
}

body.fp-viewing-game #candyBottom{
    height: 50px;
    transition: height .5s .7s;
}

#candyBottom > div{
    position: relative;
    width: 43px;
    height: 93px;
    transition: .3s;
    /*filter:brightness(1.2);*/
    opacity: .8;
}

#candyBottom > div.score{
    opacity: 1;
}

#candyBottom div.touchdown{
    margin-top: calc( var(--fullheight) * -0.35);
    transform: scale(2);
}

.touchdownBG{
    position: absolute;
    bottom: 0;
    left: 50%;
    z-index: -2;
    background: url('../img/bubbles.svg') no-repeat top center;
    background-size: contain;
    overflow: hidden;
}

div.touchdown .touchdownBG{
    width: 50vw;
    margin-left: -25vw;

    height: calc( var(--fullheight) * .25);
    animation: bubbleIn 3s ease-out 0s forwards;
    transform: scale(0);
    transform-origin: bottom center;
}

.touchdownBG img{
    position:absolute;
    width: 2.5vh;
    transform-origin: center center;
    
}

.touchdownBG img:nth-child(1){  width: 3vh; left: 25%; bottom: 40%;  animation: spin 35s -10s infinite linear reverse; }
.touchdownBG img:nth-child(2){  width: 4vh; left: 35%; bottom: 20%;  animation: spin 40s -5s  infinite linear reverse; }
.touchdownBG img:nth-child(3){  width: 3.5vh; left: 35%; bottom: 65%;  animation: spin 30s -26s infinite linear reverse; }
.touchdownBG img:nth-child(4){  width: 4vh; left: 60%; bottom: 30%;  animation: spin 50s -14s infinite linear ; }
.touchdownBG img:nth-child(5){  width: 3.5vh; left: 80%; bottom: 60%;  animation: spin 35s -20s infinite linear; }

.touchdownBG img:nth-child(6){ left: 20%; bottom: 25%; transform: rotate(155deg); } /*twirl-1*/
.touchdownBG img:nth-child(7){ left: 40%; bottom: 50%; transform: rotate(-20deg); } /*twirl-2*/
.touchdownBG img:nth-child(8){ left: 70%; bottom: 55%; transform: rotate(-35deg); } /*twirl-3*/





@keyframes bubbleIn {
    0%{
        transform: scale(0);
    }
    10%{
        transform: scale(.9);
    }
    100% {
        transform: scale(1);
    }
}


.cbImage{
    display: block;
    width: 43px;
}

#candyBottom > div span{
    position: absolute;
    top: 100%;
    padding-top: 10px;
    left: -50px;
    right: -50px;
    text-align: center;
    color: #fff;
    font-weight: bold;
}



#itsSection{
    background-size: cover;
}



#productMix{
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}


#veggie{
    height: 50%;
    width: auto;
    animation: spin infinite 70s forwards;
}



.alterFont{
    font-family: "proxima-nova-condensed";
    font-weight: normal;
}

#nutritions{
    padding: 20px;
    background: #000;
    color: #fff;
    text-transform: none;
    text-align: left;
    line-height: 1.2;
}

#nutritions table{
    width: 100%;
}

#nutritions td{
    text-align: right;
}
#nutritions td:first-child{
    text-align: left;
}

.em{
    font-style: italic;
}


#contactOverlay{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background:rgba(0,0,0,1);
    max-height: 0px;
    transition-duration: .5s;
}

body.showContact #contactOverlay{
    max-height: 100%;
}

#coContent{
    font-family:"proxima-nova-condensed";
    width: 100%;
    max-width: 500px;
    
    color: #fff;
    margin: 0 auto 0;
    padding: 50px 20px;
    font-weight: normal;
    text-transform: none;
    font-size: 1.5rem;
}
#closeMenuButton,
#closeContactButton{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: url('../img/times.svg') no-repeat center;
    background-size: 20px;
    border: 0;
    text-decoration: none;
    padding: 2px 8px;
    cursor: pointer;
}
#closeMenuButton:hover,
#closeContactButton:hover{
    background-size: 25px;
}


#locales{
    position: absolute;
    top: 25px;
    left: 50px;
    display: flex;
    flex-direction: row;
    color: #fff;
    line-height: .8;
    gap: .5rem;
}
#locales span{
    text-decoration: underline;
}
#locales a:hover{
    color: inherit;
    text-decoration: underline;
}



/* MEDIA QUERIES */


@media ( max-width:700px ) and (orientation: portrait){
    html{
        font-size: min( 3vw, 16px);
    }
    
}
@media ( max-height:500px ) and (orientation: landscape){
    html{
        font-size: 3vh;
    }

    #nutritionsSection .productLabel{
        display: none;
    }
}


@media (max-height:700px ){
    #logoContainer{
        height: 55px;
        width: 50px;
        margin-left: -25px;
    }
    
    .stageFromTop{
        margin-top: 90px;
    }

    #spImage{
        height: 250px;
        width: auto;
    }
    
    #explosion{
        height: calc( 100% -  250px );
    }

}


@media (max-width:500px ){

    #topNav{
        display:none;
    }

    #transPlayer{
        height: auto;
        max-height: 100%;
    }
}



#agegateOverlay{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1001;
    backdrop-filter: blur(10px);
    background-color: rgba(0,0,0,0.5);
    transition-duration: 1s;
    transition-delay: 2s;
    opacity: 1;
}

body.agegate-hidden #agegateOverlay{
    opacity: 0;
    display: none;
}


#agegate{
    position: relative;
    width: 100%;
    max-width: 500px;
    
    color: #fff;
    background: #000;

    margin: 10vh auto 0;
    padding: 50px 20px;

    text-align: center;
    text-transform: none;


}


#agegateLogo{
    display: block;
    width: 100%;
    max-width: 250px;
    margin: 0 auto 50px;
    background-color: var(--grey1);
}

#agegate .textLight{
    font-size: 200%;
    text-transform: none;
}

#agegate button{
    border: 2px solid #ccc;
    color: #ccc;
    background: transparent;
    text-decoration: none;
    
    line-height: 1.2;
    font-size: inherit;
    padding: 8px 0;
    width: 125px;
    text-align: center;
    cursor: pointer;
    margin: 10px 10px 0;
    font-family: inherit;
    
    text-transform: uppercase;
}

#agegate button:hover{
    border-color: #fff;
    color: #fff
}

#agegateAlert{
    display: none;
    margin: 40px 0 0;
    color: var(--grey2);
}