/***************
    Generic
***************/

.right-bg {
    position: absolute;
    right: 100%;
    transform-origin: right;
    width: 100%;
    height: 100%;
    background-color: #9F6714;
    float: right;
    transition: 0.7s right .5s, 0.7s transform 1.2s, 0.7s background-color 1.2s;
    will-change: right, transform;
}

.loading-complete .right-bg {
    right: 0;
	transform: scaleX(.5);
    background-color: #91D2E3;
}


/** for navbar **/

:root {
    --navbar-delay: 1.9s;
}

.show-later, #above-fold-left, #above-fold-center, #above-fold-right {
    opacity: 0;
    transform: translate(-15px, 0) rotate(-0.7deg);
    transform-origin: left;
    will-change: transform;
}

.show-later.show-now {
    opacity: 1;
    transform: rotate(0);
    transition: all 1.3s;
}

.logo-holder, .desktop-links, .right-menu-holder {
    opacity: 0;
    transform: rotate(-3deg);
    transform-origin: left;
}

.logo-holder {
    transition: 0.8s opacity var(--navbar-delay), 0.8s transform var(--navbar-delay);
}

.desktop-links {
    transition: 0.8s opacity 2s, 0.8s transform 2s;
}

.right-menu-holder {
    transition: 0.8s opacity 2.3s, 0.8s transform 2.3s;
}

#above-fold-left {
    transition: 0.8s opacity 2.5s, 0.8s transform 2.5s;
}

#above-fold-center {
    transition: 0.8s opacity 2.7s, 0.8s transform 2.7s;
}

#above-fold-right {
    transition: 0.8s opacity 2.9s, 0.8s transform 2.9s;
}

.loading-complete .logo-holder, 
.loading-complete .desktop-links, 
.loading-complete .right-menu-holder,
.loading-complete #above-fold-left, 
.loading-complete #above-fold-center, 
.loading-complete #above-fold-right {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
}

.product-of-month {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bs-lt-blue {
    box-shadow: -70px -70px #91E0F3;
    background-color: #91E0F3;
}

.bs-rt-white {
    box-shadow: 70px -70px #ffffff;
    background-color: #ffffff;
}

.mt-aa-negative {
    margin-top: -150px;
}

.mt-bb-negative {
    margin-top: -100px;
}

.mb-aa-negative {
    margin-bottom: -150px;
}

.mb-bb-negative {
    margin-bottom: -100px;
}

@media (max-width: 768px) {
    .bs-lt-blue {
        box-shadow: -30px -30px #91E0F3;
    }

    .bs-rt-white {
        box-shadow: 30px -30px #ffffff; 
    }

	.mt-aa-negative {
        margin-top: -99px;
    }

    .mt-bb-negative {
        margin-top: -66px;
    }
    .mb-aa-negative {
        margin-bottom: -99px;
    }
    
    .mb-bb-negative {
        margin-bottom: -66px;
    }

    .product-link-holder {
        max-width: 250px;
        margin: auto;
    }
}


/** Images **/

#coffee-pour {
    background-image: url("../../assets/img/home/coffee-pour.png");
}

#three-coffee-in-rack {
    background-image: url("../../assets/img/home/three-coffee.png");
}

#hot-choco {
    background-image: url("../../assets/img/home/hot-choco.png");
}

#water-melon-shake {
    background-image: url("../../assets/img/home/water-melon-shake.png");
}

#section-3-image-divider {
    background-image: url("../../assets/img/home/section-3-image-divider.png");
}

#section-5-image-divider {
    background-image: url("../../assets/img/home/section-5-image-divider.png");
}

#section-7-image-divider {
    background-image: url("../../assets/img/home/section-7-image-divider.png");
}

/** end **/