/* Products */
.product_container{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}

.pack_shot_container{
    flex: 1;
}

.pack_shot{
    margin-right: 20px;
    height: 50vh;
    background: no-repeat center;
    background-size: contain;
}

.product_description{
    flex: 1;
}

.product_taster{
    font-weight: 400;
}

.ingredients{
    text-align: left;
    margin-bottom: 30px;
}

.ingredients p{
    margin: 0px;
    padding: 0px;
}

.nutritional_info_container{
    text-align: left;
}

.nutritional_info{
    margin-bottom: 10px;
    width: 100%;
    clear: both;
}

.nutritional_title{
    float: left;
    width: 70%;
}

.nutritional_number{
    float: right;
    width: 30%;
    text-align: right;
}

/* Coconut Leaves */
#small_screen_product_leaves{
    display: none;
}

.border_leaf{
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    max-height: 60vw;
}

.border_leaf.category_selected{
    visibility: visible;
}

.top_left_coconut_leaf{
    position: fixed;
    left: 0;
    height: 60vh;
    top: 8vh;
    max-height: 40vw;
    transform: rotate(-33deg) translate(-45%);
    transform-origin: bottom left;
    transition: 800ms;
}

.top_left_coconut_leaf.leaf_in{
    transform: rotate(0deg) translate(-40%);
}

.bottom_left_coconut_leaf{
    position: fixed;
    left: 0px;
    height: 60vh;
    top: 100vh;
    max-height: 40vw;
    transform: rotate(-25deg) translate(-70%, -100%);
    transform-origin: bottom left;
    transition: 1s 100ms;
}

.bottom_left_coconut_leaf.leaf_in{
    transform: rotate(0deg) translate(-40%, -100%);
}

.top_right_coconut_leaf{
    position: fixed;
    right: 0px;
    height: 50vh;
    top: 8vh;
    max-height: 40vw;
    transform: rotate(40deg) translate(48%);
    transform-origin: bottom right;
    transition: 900ms;
}

.top_right_coconut_leaf.leaf_in{
    transform: rotate(10deg) translate(25%);
}

.bottom_right_coconut_leaf{
    position: fixed;
    right: 0px;
    height: 50vh;
    top: 90vh;
    max-height: 40vw;
    transform: rotate(40deg) translate(48%, -100%);
    transform-origin: bottom right;
    transition: 700ms 300ms;
}

.bottom_right_coconut_leaf.leaf_in{
    transform: rotate(-10deg) translate(55%, -100%);
}

.left_leaf{
    position: fixed;
    left: 0;
    top: 50%;
    height: 90vh;
    transform: translate(-100%, -50%);
    transition: 800ms;
}

.right_leaf{
    position: fixed;
    right: 0px;
    top: 50%;
    height: 100vh;
    transform: translate(100%, -50%);
    transition: 800ms;
}

.left_leaf.leaf_in{
    transform: translate(0%, -50%);
}

.right_leaf.leaf_in{
    transform: translate(0%, -50%);
}

/* Garden Border Leaves */
.in_garden .top_left_coconut_leaf.leaf_in{
    transform: rotate(-33deg) translate(-45%);
}

.in_garden .bottom_left_coconut_leaf.leaf_in{
    transform: rotate(-25deg) translate(-70%, -100%);
}

.in_garden .top_right_coconut_leaf.leaf_in{
    transform: rotate(40deg) translate(48%);
}

.in_garden .bottom_right_coconut_leaf.leaf_in{
    transform: rotate(40deg) translate(48%, -100%);
}

.in_garden .left_leaf.leaf_in{
    transform: translate(-100%, -50%);
}

.in_garden .right_leaf.leaf_in{
    transform: translate(100%, -50%);
}

/* Product backgrounds */
.backdrop_container.product_in{
    opacity: 1;
}

#lightbox .backdrop_container{
    position: absolute;
}

.coconut_background{
    background-image: url("../images/coconut_background.jpg");
}

.cashew_background{
    background-image: url("../images/cashew_background.jpg");
}

.juice_background{
    background-image: url("../images/juice_background.jpg");
}

.product_backdrop_fade{
    position: absolute;
    top: 100vh;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: url("../images/product_backdrop_fade.png");
    background-size: 100% 100%;
}