@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300;400;500;600;700;800;900&display=swap');

html{
    scroll-padding-top: 3.1rem;
}

header{
    min-height: 100vh;
    background: #afe9ff;
    display: flex;
    justify-content: center;
}
header .row *{
    padding: 0 !important;
}
header .col-lg-12{
    padding: 0;
}
header .my-btn {
    background-color: transparent;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 5px;
    border: 3px solid #000;
    display: inline-block;
    cursor: pointer;
    color: #000;
    font-family: Verdana;
    font-size: 1.2rem;
    padding: 8px 28px !important;
    text-decoration: none;
    transition: all 0.3s ease 0s;
}
header .my-btn:hover {
    color: #000;
    background-color: #F7A706;
}
header .my-btn:active {
    position: relative;
}
@media only screen and (max-width: 1070px) {

    header{
        min-height: 100vh;
        align-items: center;
    }

}
@media only screen and (max-width: 991px) {

    html{
        scroll-padding-top: 0;
    }

}
@media only screen and (max-width: 575px) {

    header{
        min-height: 100vh;
        align-items: baseline;
    }

}

.callout{
    z-index: 2;
    text-align: center;
    margin: 120px 0 0 0;
}
@media only screen and (max-width: 1680px) {

    .callout{
        margin: 100px 0 0 0;
    }

}
@media only screen and (max-width: 1440px) {

    .callout{
        margin: 90px 0 0 0;
    }
    .callout img{
        width: 500px;
    }

}
@media only screen and (max-width: 1350px) {

    .callout img{
        width: 450px;
    }

}
@media only screen and (max-width: 1070px) {

    .callout{
        margin: 0 0 0 0;
    }

}
@media only screen and (max-width: 575px) {

    .callout{
        margin: 120px 0 0 0;
    }
    .callout img{
        width: auto;
        max-width: 100%;
    }

}

.cloud1 img{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 15%;
    left: 8%;
}
.cloud2 img{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 5%;
    right: 6%;
}
.cloud3 img{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 24%;
    left: 13.5%;
}
.cloud4 img{
    max-width: 100%;
    height: auto;
    position: absolute;
    top: 40%;
    right: 20%;
}
@media only screen and (max-width: 1680px) {

    .cloud1 img{
        left: 6%;
    }
    .cloud2 img{
        top: 6%;
        right: 6%;
    }
    .cloud3 img{
        top: 25%;
        left: 12.5%;
    }
    .cloud4 img{
        top: 35%;
        right: 17%;
    }

}
@media only screen and (max-width: 1440px) {

    .cloud1 img{
        width: 240px;
    }
    .cloud2 img{
        width: 390px;
    }
    .cloud3 img{
        top: 26%;
        width: 390px;
    }
    .cloud4 img{
        top: 33%;
        width: 220px;
    }

}
@media only screen and (max-width: 1350px) {

    .cloud1 img{
        top: 10%;
        left: 3%;
        width: 200px;
    }
    .cloud2 img{
        right: 0;
        width: 330px;
    }
    .cloud3 img{
        top: 20%;
        left: 5%;
    }
    .cloud4 img{
        right: 10%;
        width: 200px;
    }

}
@media only screen and (max-width: 1070px) {

    .cloud1 img{
        top: 20%;
        left: 3%;
        width: 200px;
    }
    .cloud2 img{
        right: 20%;
        width: 330px;
    }
    .cloud3 img{
        top: 50%;
        left: 0;
    }
    .cloud4 img{
        top: 44%;
        right: 3%;
        width: 200px;
    }

}
@media only screen and (max-width: 750px) {

    .cloud1 img{
        top: 20%;
        left: 3%;
        width: 140px;
    }
    .cloud2 img{
        top: 10%;
        right: 20%;
        width: 230px;
    }
    .cloud3 img{
        top: 50%;
        left: 0;
        width: 230px;
    }
    .cloud4 img{
        top: 44%;
        right: 3%;
        width: 140px;
    }

}
@media only screen and (max-width: 575px) {

    .cloud1 img{
        display: none;
    }
    .cloud2 img{
        display: none;
    }
    .cloud3 img{
        display: none;
    }
    .cloud4 img{
        display: none;
    }

}

.scene{
    background: url(../images/scene/oven-belt.png) repeat-y 50% 50%;
    background-attachment: scroll;
    background-size: cover;
    height: 269px;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

.desktop{
    display: block;
}
.mobile{
    display: none;
}
@media only screen and (max-width: 1070px) {

    .desktop{
        display: none !important;
    }
    .mobile{
        display: block !important;
    }

}

#top .slider{
    position: absolute;
    bottom: 0;
    left: 0;
    height: auto;
}
@media only screen and (max-width: 599px) {

    .item img{
        max-width: 250px;
        margin: auto;
    }

}

.sign{
    display: flex;
    justify-content: center;
}
.sign img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 33%;
    z-index: 4;
    margin: 0 10px 0 0;
}
.smoke{
    display: flex;
    justify-content: center;
}
.smoke img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 84%;
    margin: 0 8px 0 0;
}
@media only screen and (max-width: 1350px) {

    .smoke img{
        width: 90px;
    }

}
.oven{
    display: flex;
    justify-content: center;
}
.oven img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    z-index: 3;
}
.oven2{
    display: flex;
    justify-content: left;
}
.oven2 img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 3;
}

.sign-smile{
    display: flex;
    justify-content: left;
}
.sign-smile img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 54%;
    left: 20%;
    z-index: 1;
}

/**** BLANK CUPZ ****/
.cupsBlank1 img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 26%;
    left: -140px;
    animation: cupFirst 12s 25;
    animation-direction: forwards;
    animation-timing-function: linear;
    animation-delay: 2s;
    z-index: 2;
}
.cupsBlank2 img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 26%;
    left: -140px;
    animation: cupFirst 12s 25;
    animation-direction: forwards;
    animation-timing-function: linear;
    animation-delay: 6s;
    z-index: 2;
}
.cupsBlank3 img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 26%;
    left: -140px;
    animation: cupFirst 12s 24;
    animation-direction: forwards;
    animation-timing-function: linear;
    animation-delay: 10s;
    z-index: 2;
}
@keyframes cupFirst {
    0%  {left: 0; opacity: 0;}
    2%  {opacity: 1;}
    99% {opacity: 1;}
    100% {left: 49%; opacity: 0;}
}

/**** DECORATED CUPZ ****/
.decorated-cups img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 20.3%;
    left: 49%;
    animation: cupLast 12s;
    animation-direction: forwards;
    animation-timing-function: linear;
}
.cups1 img{
    animation-delay: 12s !important;
}
.cups2 img{
    animation-delay: 18s !important;
}
.cups3 img{
    animation-delay: 24s !important;
}
.cups4 img{
    animation-delay: 30s !important;
}
.cups5 img{
    animation-delay: 36s !important;
}
.cups6 img{
    animation-delay: 42s !important;
}
.cups7 img{
    animation-delay: 48s !important;
}
.cups8 img{
    animation-delay: 54s !important;
}
.cups9 img{
    animation-delay: 60s !important;
}
.cups10 img{
    animation-delay: 66s !important;
}
.cups11 img{
    animation-delay: 72s !important;
}
.cups12 img{
    animation-delay: 78s !important;
}
.cups13 img{
    animation-delay: 84s !important;
}
.cups14 img{
    animation-delay: 90s !important;
}
.cups15 img{
    animation-delay: 96s !important;
}
.cups16 img{
    animation-delay: 102s !important;
}
.cups17 img{
    animation-delay: 108s !important;
}
.cups18 img{
    animation-delay: 114s !important;
}
.cups19 img{
    animation-delay: 120s !important;
}
.cups20 img{
    animation-delay: 126s !important;
}
.cups21 img{
    animation-delay: 132s !important;
}
.cups22 img{
    animation-delay: 138s !important;
}
.cups23 img{
    animation-delay: 144s !important;
}
.cups24 img{
    animation-delay: 150s !important;
}
.cups25 img{
    animation-delay: 156s !important;
}
.cups26 img{
    animation-delay: 162s !important;
}
.cups27 img{
    animation-delay: 168s !important;
}
.cups28 img{
    animation-delay: 174s !important;
}
.cups29 img{
    animation-delay: 180s !important;
}
.cups30 img{
    animation-delay: 186s !important;
}
.cups31 img{
    animation-delay: 192s !important;
}
.cups32 img{
    animation-delay: 198s !important;
}
.cups33 img{
    animation-delay: 204s !important;
}
.cups34 img{
    animation-delay: 210s !important;
}
.cups35 img{
    animation-delay: 216s !important;
}
.cups36 img{
    animation-delay: 222s !important;
}
.cups37 img{
    animation-delay: 228s !important;
}
.cups38 img{
    animation-delay: 234s !important;
}
.cups39 img{
    animation-delay: 240s !important;
}
.cups40 img{
    animation-delay: 246s !important;
}
.cups41 img{
    animation-delay: 252s !important;
}
.cups42 img{
    animation-delay: 258s !important;
}
.cups43 img{
    animation-delay: 264s !important;
}
.cups44 img{
    animation-delay: 270s !important;
}
.cups45 img{
    animation-delay: 276s !important;
}
.cups46 img{
    animation-delay: 282s !important;
}
.cups47 img{
    animation-delay: 288s !important;
}
.cups48 img{
    animation-delay: 294s !important;
}
.cups49 img{
    animation-delay: 300s !important;
}
.cups50 img{
    animation-delay: 306s !important;
}
.cups51 img{
    animation-delay: 314s !important;
}
@keyframes cupLast {
    0%  {left: 49%; opacity: 0;}
    2%  {opacity: 1;}
    99% {opacity: 1;}
    100% {left: 93%; opacity: 0;}
}

/**** ENDING SIGN ****/
.end img{
    max-width: 100%;
    height: auto;
    position: absolute;
    bottom: 27.3%;
    left: 48%;
    animation: cupLast 12s;
    animation-direction: forwards;
    animation-timing-function: linear;
}
@keyframes cupLast {
    0%  {left: 48%; opacity: 0;}
    2%  {opacity: 1;}
    99% {opacity: 1;}
    100% {left: 92%; opacity: 0;}
}

@media only screen and (max-width: 1680px) {

    @keyframes cupLast {
        0%  {left: 49%; opacity: 0;}
        2%  {opacity: 1;}
        99% {opacity: 1;}
        100% {left: 92%; opacity: 0;}
    }

}
@media only screen and (max-width: 1440px) {

    @keyframes cupLast {
        0%  {left: 49%; opacity: 0;}
        2%  {opacity: 1;}
        99% {opacity: 1;}
        100% {left: 91%; opacity: 0;}
    }

}
@media only screen and (max-width: 1400px) {

    @keyframes cupLast {
        0%  {left: 49%; opacity: 0;}
        2%  {opacity: 1;}
        99% {opacity: 1;}
        100% {left: 90%; opacity: 0;}
    }

}
@media only screen and (max-width: 1200px) {

    @keyframes cupLast {
        0%  {left: 49%; opacity: 0;}
        2%  {opacity: 1;}
        99% {opacity: 1;}
        100% {left: 89%; opacity: 0;}
    }

}
@media only screen and (max-width: 1128px) {

    @keyframes cupLast {
        0%  {left: 49%; opacity: 0;}
        2%  {opacity: 1;}
        99% {opacity: 1;}
        100% {left: 88%; opacity: 0;}
    }

}
/*****************************/

footer{
    background: #bfb9ff;
    position: relative;
    min-height: 15vh;
    padding: 20px 0;
}
footer .container{
    max-width: 100% !important;
}
footer .col-sm-6{
    padding: 0 20px
}

footer .opensea{
    margin-left: auto;
}

footer .opensea{
    float: right;
}
footer .nft-cal{
    float: right;
}

footer p{
  font-family: 'Lato', Arial, sans-serif;
  font-size: 1.00rem;
  font-weight: 400;
  line-height: 145%;
  padding: 4px 0;
}
footer a{
  color: #f2f2f2;
}
footer a:hover{
  text-decoration: underline;
  color: #f2f2f2;
}
footer a:visited{
  color: #f2f2f2;
}
footer a:active{
  color: #f2f2f2;
}
@media only screen and (max-width: 800px) {

    footer .cupz img{
        width: 250px;
    }
    footer .opensea img{
        width: 70px;
    }
    footer .nft-cal img{
        width: 70px;
    }

}
@media only screen and (max-width: 768px) {

    footer .container{
        max-width: 96% !important;
    }
    footer .col-sm-6{
        padding: 0px
    }

}
@media only screen and (max-width: 575px) {

    footer{
        text-align: center;
    }
    footer .container{
        max-width: 95% !important;
    }
    footer .opensea{
        float: none;
    }
    footer .nft-cal{
        float: none;
    }

}

/**** PRELOADER ****/
.flex-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    flex-direction: column;
}
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #fff;
    z-index: 2000;
}
.preheating{
  font-family: 'Lato', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #e54a6e;
}