/*

Theme Name: Lavva
Theme URI: https://lovvelavva.com/
Author: Jen Yuan
Author URI: http://jenyuan.com

Description: Custom WordPress theme developed by Jen Yuan for Lavva

Version: 1.0
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html

*/

/*

/*

2.0 SITEWIDE
    2.1 HEADER
    2.2 FOOTER
3.0 FRONTPAGE
    3.1 LEAVES
    3.2 NEWSLETTER
4.0 PRODUCTS
    4.1 PRODUCT INDEX
    4.2 MOLTEN PAGE
    4.3 MILK PAGE
5.0 BLOG
    5.1 BLOG INDEX
    5.2 BLOG SINGLE
6.0 PAGES
    6.1 GENERAL
    6.2 ABOUT
    6.3 FIND LAVVA
    6.4 CONTACT
    6.5 FAQ
    6.6 MISC
7.0 ANIMATION

*/

/*  2.0 SITEWIDE  */

    /*  2.1 HEADER  */

    #header{
        position:relative;
        width:100%;
        margin:50px 0 0;
        z-index:100
        }

    #header-logo{
        width:40%;
        line-height:0
        }

    #header-logo svg{
        display:block;
        width:190px;
        margin:auto
        }

    #header-logo .header-logo-path{
        fill:#096655;
        transition:.3s
        }

    .header-links{
        width: 30%;
        margin: 0;
        padding: 0;
        white-space: nowrap;
        list-style: none;
        text-align: center;
    }

    .header-links > li{
        position:relative;
        display:inline-block;
        margin-right:60px;
        white-space: nowrap;
        }

    .header-links > li a[href="#"] {
        pointer-events: none;
        z-index: 110;
    }

    .header-links > li > a {
        position: relative;
        z-index: 110;
    }

    .header-links > li .sub-menu {
        position: absolute;
        top: -10px;
        min-width: calc(100% + 15px*2);
        left: 50%;
        margin: 0;
        padding: 55px 30px 20px;
        list-style: none;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        background-color: #f6f2ed;
        opacity: 0;
        pointer-events: none;
        border-radius: 3px;
        transition: 0.3s;
    }

    .header-links > li:hover .sub-menu {
        opacity: 1;
        pointer-events: auto;
    }

    .header-links > li.current-menu-item > a:after,
    .header-links > li.current-menu-ancestor > a:after {
        content:"";
        display:block;
        position:absolute;
        width:100%;
        left:0;
        bottom:-9px;
        border-bottom:2px solid
        }

    .header-links li:last-of-type{
        margin-right:0
        }

    .header-links li a{
        text-transform:uppercase;
        letter-spacing:.03em;
        font:17px/1em "Pitch Sans",Helvetica,sans-serif;
        color:#096655
        }

    body#blog #header,
    body#page-products #header,
    body#page-molten #header,
    body#page-milk #header,
    body#page-plant-milk #header,
    body#page-lavva-plant-milk #header,
    body#page-about #header,
    body#page-hero-ingredient #header {
        position:absolute
        }

    body#blog #header .header-links li a,
    body#page-products #header .header-links li a,
    body#page-molten #header .header-links li a,
    body#page-milk #header .header-links li a,
    body#page-plant-milk #header .header-links li a,
    body#page-lavva-plant-milk #header .header-links li a,
    body#page-about #header .header-links li a,
    body#page-hero-ingredient #header .header-links li a {
        color:#fff
        }

    body#blog #header .header-logo-path,
    body#page-products #header .header-logo-path,
    body#page-molten #header .header-logo-path,
    body#page-milk #header .header-logo-path,
    body#page-plant-milk #header .header-logo-path,
    body#page-lavva-plant-milk #header .header-logo-path,
    body#page-about #header .header-logo-path,
    body#page-hero-ingredient #header .header-logo-path {
        fill:#fff
    }

    body#blog #header .header-links > li .sub-menu,
    body#page-products .header-links > li .sub-menu,
    body#page-molten .header-links > li .sub-menu,
    body#page-milk .header-links > li .sub-menu,
    body#page-plant-milk .header-links > li .sub-menu,
    body#page-lavva-plant-milk .header-links > li .sub-menu,
    body#page-about .header-links > li .sub-menu,
    body#page-hero-ingredient .header-links > li .sub-menu {
        background-color: #096655;
    }

    body#blog #mobile-find-lavva svg path,
    body#page-products #mobile-find-lavva svg path,
    body#page-molten #mobile-find-lavva svg path,
    body#page-milk #mobile-find-lavva svg path,
    body#page-plant-milk #mobile-find-lavva svg path,
    body#page-lavva-plant-milk #mobile-find-lavva svg path,
    body#page-about #mobile-find-lavva svg path,
    body#page-hero-ingredient #mobile-find-lavva svg path {
        fill: #fff;
        }

    body#blog #mobile-links_toggle hr,
    body#page-products #mobile-links_toggle hr,
    body#page-molten #mobile-links_toggle hr,
    body#page-milk #mobile-links_toggle hr,
    body#page-plant-milk #mobile-links_toggle hr,
    body#page-lavva-plant-milk #mobile-links_toggle hr,
    body#page-about #mobile-links_toggle hr,
    body#page-hero-ingredient #mobile-links_toggle hr {
        background: #fff;
    }

    /*  2.1 HEADER - END  */

    /*  2.2 FOOTER  */

    #footer{
        padding:70px 0 20px;
        background:#fff
        }

    #footer-connect{
        flex:1
        }   

        #footer-connect svg{
            width:130px
            }

        .footer-logo-path{
            fill:#2c6456
            }

        #connect-social{
            margin:60px 0 0
            }

        #connect-social a{
            display:inline-block;
            margin:0 25px 0 0;
            vertical-align:middle
            }

        #connect-social a:last-of-type{
            margin:0
            }

        #connect-social a svg{
            width:auto;
            height:20px !important
            }

        #connect-social a:last-of-type svg{
            height:22px !important
            }

        #connect-social a svg path{
            fill:#2c6456;
            transition:.3s
            }

        #connect-social a:hover svg path{
            fill:#18d594
            }

    #footer-newsletter {
        width: 510px;
        margin: 0 60px;
    }

        #footer-newsletter form {
            white-space: nowrap;
        }

        #footer-newsletter .field {
            display: inline-block;
            width: calc(100% - 215px);
            margin: 0 10px 0 0;
        }

        #footer-newsletter .field label {
            padding: 0 25px;
        }

        #footer-newsletter .field input {
            padding-left: 25px;
            padding-right: 25px;
        }


    #footer-links{
        width:360px;
        -webkit-column-count:2;
        -moz-column-count:2;
        column-count:2;
        -webkit-column-gap:30px;
        -moz-column-gap:30px;
        column-gap:30px;
        margin:0;
        padding:0;
        list-style:none
        }

        #footer-links li{
            display:inline-block;
            width:100%;
            -webkit-column-break-inside:avoid;
            page-break-inside:avoid;
            break-inside:avoid;
            padding:0 0 15px;
            line-height:0
            }

        #footer-links li a{
            display:inline-block;
            text-transform:uppercase;
            letter-spacing:.03em;
            font:17px/1em "Pitch Sans",Helvetica,sans-serif;
            color:#096655
            }

    /*  2.2 FOOTER - END  */

/*  2.0 SITEWIDE - END  */

/*  3.0 FRONTPAGE  */

body#frontpage{
    background:#fff
    }

#frontpage-hero{
    position: relative;
    margin: 120px auto 60px;
    line-height: 0;
    }

#frontpage-hero .width{
    position:relative;
    min-height:calc(100vh - 360px);
    z-index: 5;
    }

#hero-product-container {
    position:relative;
    width: calc(50% - 60px);
    margin-right: 60px;
}

#hero-content-container {
    position:relative;
    width: 50%;
}

    #hero-product {
        position: relative;
    }

    #hero-product > img {
        border-radius: 50%;
        width: 100%;
        max-width: 70%;
        margin: 70px 0 0 230px;
    }

    #hero-product .leaves:nth-of-type(1) {
        z-index: -1;
    }

    #hero-product .leaves:nth-of-type(2) {
        z-index: 10;
    }

    #hero-product .leaves:nth-of-type(1) .leaf:nth-of-type(1) {
        width: 58%;
        max-width: 350px;
        top: -29%;
        left: 24%;
    }

    #hero-product .leaves:nth-of-type(1) .leaf:nth-of-type(2)  {
        width: 60%;
        max-width: 350px;
        top: 22%;
        left: 20%;
        z-index: -2;
    }

    #hero-product .leaves:nth-of-type(1) .leaf:nth-of-type(3) {
        width: 12.5%;
        max-width: 60px;
        top: 85%;
        left: 32%
    }

    #hero-product .leaves:nth-of-type(2) .leaf:nth-of-type(1) {
        width: 40%;
        max-width: 200px;
        top: -13%;
        left: 85%;
    }

    #hero-product .unfurl .leaf:nth-of-type(1) {
        -webkit-animation:unfurlBR 2.4s ease-out both;
        animation:unfurlBR 2.4s ease-out both
    }

    #hero-product .unfurl .leaf:nth-of-type(2) {
        -webkit-animation:unfurlBR 2.4s ease-out both;
        animation:unfurlBR 2.4s ease-out both
    }

    #hero-product .unfurl .leaf:nth-of-type(3) {
        -webkit-animation:fadein 1s 1s both;
        animation:fadein 1s 1s both
    }

    #hero-product .leaves:nth-of-type(2) .leaf:nth-of-type(1) {
        -webkit-animation:fadein 1s 1s both;
        animation:fadein 1s 1s both
    }

    #hero-product .product{
        position:-webkit-sticky;
        position:sticky;
        padding:90px 0 60px;
        top:0;
    }
    
    @media screen and (max-width: 1180px) {
        #hero-content-container {
			margin-top: 30px;
		}
        #hero-product {
            text-align: center;
            margin: 0 auto;
            max-width: 350px;
        }

        #hero-product-container {
            margin: 0;
        }

        #hero-product > img {
            max-width: none;
            margin: 0;   
        }

        #hero-product .leaves:nth-of-type(1) .leaf:nth-of-type(1) {
            top: 4%;
            left: -18%;
            max-width: 350px;
        }
    
        #hero-product .leaves:nth-of-type(1) .leaf:nth-of-type(2)  {
            top: 45%;
            left: -20%;
        }
    
        #hero-product .leaves:nth-of-type(1) .leaf:nth-of-type(3) {
            top: 88%;
            left: 0%;
        }
    
        #hero-product .leaves:nth-of-type(2) .leaf:nth-of-type(1) {
            top: -6%;
            left: 65%;
        }

    }

    @media screen and (max-width: 600px) {
        
        #hero-product {
            max-width: 250px;
            margin: 0 auto;
        }

    }

    #hero-content{
        max-width: 430px;
        margin: auto;
        }

    #hero-content-pillar {
        margin: 30px 0 0;
    }

    #hero-content-pillars .pillar {}

    #hero-content-pillars .pillar:not(:last-child) {
        margin: 0 0 10px;
    }

    #hero-content-pillars .pillar-icon {
        display: inline-block;
        margin: 0 15px 3px 0;
    }

    #hero-content-pillars .pillar-icon svg {
        height: 30px;
        width: 30px;
    }

    #hero-content-pillars .pillar p {
        display: inline-block;
        margin: 0;
    }

    #hero-content-cta{
        margin: 60px 0 0;
        }

    #hero-content-cta .cta-sub{
        float:right
        }

#hero-tile-container{
    margin:300px auto 0;
    white-space:nowrap;
    overflow:hidden;
    font-size:0
    }

    #hero-tile{
        white-space:nowrap
        }

    #hero-tile .product{
        display:inline-block;
        padding:60px 0
        }

    #tile-holder{
        display:inline-block;
        width:450px;
        vertical-align:top
        }

#frontpage-leaves-1{
    position:absolute;
    width:100%;
    height:calc(100vh + 500px);
    top:0;
    overflow: hidden;
    pointer-events: none;
    left:0;
    z-index:1;
    }

.product{
    position:relative
    }

    .product .product-shadow{
        content:"";
        display:block;
        position:absolute;
        width:80%;
        height:80%;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        -webkit-filter:blur(20px);
        filter:blur(20px);
        border-radius:30%;
        background:#000;
        opacity:.2
        }

.product img{
    position:relative;
    width:100%;
    max-width:450px;
    margin:auto;
    z-index:10
    }

#frontpage-leaves-2{
    position:relative;
    height:500px
    }


#frontpage-find{
    position: relative;
    padding: 180px 0;
}

    #frontpage-find > svg {
        position: absolute;
        width: 100%;
        top: -1px;
        left: 50%;
        -webkit-transform: translate(-50%,0);
        transform: translate(-50%,0);
    }

    #frontpage-find > svg path {
        fill: #fff;
    }

    #find-lavva-module{
        text-align: center;
    }

        #find-lavva-module img#find-icon{
            width: 180px;
            margin: 0 auto 30px;
        }

        #find-lavva-module h2{
            margin: 0 0 50px;
        }

        #find-lavva-module p{
            margin: 0 0 40px;
        }


    @media screen and (min-width: 901px) {

        #frontpage-find .leaves:nth-of-type(1) {
            display: none;
        }

    }

    #frontpage-find .leaves:nth-of-type(1) .leaf:nth-of-type(1){
        width: 54%;
        max-width: 780px;
        top: 60%;
        left: -18%;
    }

        #frontpage-find .leaves:nth-of-type(2) .leaf:nth-of-type(1){
            width:32%;
            max-width:470px;
            bottom:-170%;
            right:-8%
            }

        #frontpage-find .leaves:nth-of-type(2) .leaf:nth-of-type(2){
            width:50%;
            max-width:730px;
            bottom:-185%;
            right:-15%
            }

        #frontpage-find .leaves:nth-of-type(1).unfurl .leaf:nth-of-type(1) img{
            -webkit-animation:unfurlBL 2.6s ease-out both;
            animation:unfurlBR 2.6s ease-out both
            }

        #frontpage-find .leaves:nth-of-type(2).unfurl .leaf:nth-of-type(1) img{
            -webkit-animation:unfurlBR 2.8s ease-out both;
            animation:unfurlBR 2.8s ease-out both
            }

        #frontpage-find .leaves:nth-of-type(2).unfurl .leaf:nth-of-type(2) img{
            -webkit-animation:unfurlBR 3s ease-out both;
            animation:unfurlBR 3s ease-out both
            }

#frontpage-instagram-feed{
    margin:0 auto 300px;
    text-align:center
    }

    #frontpage-instagram-feed .post{
        display:none;
        position:relative;
        width:calc(33.33% - 12px);
        margin:0 18px 0 0
        }

    #frontpage-instagram-feed .post:after{
        content:"";
        display:block;
        padding-top:100%
        }

    #frontpage-instagram-feed .post:nth-of-type(3n){
        margin:0
        }

    #frontpage-instagram-feed .post:nth-of-type(1),
    #frontpage-instagram-feed .post:nth-of-type(2),
    #frontpage-instagram-feed .post:nth-of-type(3){
        display:block
        }

#frontpage-testimonials {
    position: relative;
    margin:0 0 150px;
    text-align:center;
    }

    .testimonial{
        position:relative;
        margin:0 18px 0 0;
        padding:70px 40px;
        background:#fff
        }

    .testimonial q{
        display:block;
        margin-bottom:25px;
        quotes: '\201c' '\201d';
        }

/*    .testimonial q::before{
        content: open-quote;
        }

    .testimonial q::after{
        content: ”;
        }*/

    .testimonial-portrait{
        position:relative;
        display:block;
        width:auto !important;
        max-width:175px;
        margin:0 auto 30px;
        overflow:hidden;
        border-radius:100%;
        }

    .testimonial-portrait:after{
        content:"";
        display:block;
        padding-top:100%;
        }

    .testimonial h3{
        margin-bottom:10px;
        font-weight:700
        }

    .testimonial .t-ant {
        line-height: 1.5em;
        }

    #frontpage-testimonials .leaves .leaf:nth-of-type(1){
        width:6%;
        max-width:100px;
        top:80%;
        left:-2%
        }

        #frontpage-testimonials .leaves .leaf:nth-of-type(2){
            width:30%;
            max-width:420px;
            top:42%;
            left:-10%
            }

        #frontpage-testimonials .leaves .leaf:nth-of-type(3){
            width:20%;
            max-width:240px;
            top:-20%;
            left:4%
            }

        #frontpage-testimonials .leaves .leaf:nth-of-type(4){
            width:290px;
            max-width:20%;
            top:-50%;
            left:-7%
            }

        #frontpage-testimonials .leaves .leaf:nth-of-type(5){
            width:62.5%;
            max-width:895px;
            top:-20%;
            left:-20%
            }

        #frontpage-testimonials .leaves.unfurl .leaf:nth-of-type(1) img{
            -webkit-animation:unfurlBL 2.2s ease-out both;
            animation:unfurlBL 2.2s ease-out both
            }

        #frontpage-testimonials .leaves.unfurl .leaf:nth-of-type(2) img{
            -webkit-animation:unfurlBL 2.4s ease-out both;
            animation:unfurlBL 2.4s ease-out both
            }

        #frontpage-testimonials .leaves.unfurl .leaf:nth-of-type(3) img{
            -webkit-animation:unfurlBL 2.6s ease-out both;
            animation:unfurlBL 2.6s ease-out both
            }

        #frontpage-testimonials .leaves.unfurl .leaf:nth-of-type(4) img{
            -webkit-animation:unfurlBL 2.8s ease-out both;
            animation:unfurlBL 2.8s ease-out both
            }

        #frontpage-testimonials .leaves.unfurl .leaf:nth-of-type(5) img{
            -webkit-animation:unfurlBL 3s ease-out both;
            animation:unfurlBL 3s ease-out both
            }


#frontpage-press{
    position:relative;
    margin:0 0 150px;
    text-align:center;
    font-size:0;
    }

    .press{
        position:relative;
        display:inline-block;
        width:calc(18.66% - 30px);
        height:90px;
        margin:0 15px 30px;
        }

    .press a,
    .press > img{
        display:block;
        position:absolute;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
		width: 100%;
        }

    .press img{
        width:100%;
        max-width:180px;
        max-height:90px;
		margin: auto;
        }

    /*  3.1 LEAVES  */

    .leaves{
        position:absolute;
        width:100%;
        min-height:100%;
        top:0;
        left:0;
        opacity:0;
        pointer-events:none
        }

        .leaves.unfurl{
            -webkit-animation:fadein 1s both;
            animation:fadein 1s both
            }

    .leaf{
        position:absolute;
        pointer-events:none
        }

        .leaf img{
            width:100%
            }

        .leaf.r-bl img{
            -webkit-transform-origin:bottom left;
            transform-origin:bottom left;
            -webkit-transform:rotate(30deg);
            transform:rotate(30deg)
            }

        .leaf.r-br img{
            -webkit-transform-origin:bottom right;
            transform-origin:bottom right;
            -webkit-transform:rotate(-30deg);
            transform:rotate(-30deg)
            }

    #frontpage-leaves-1{
        overflow-x:hidden
        }

        #frontpage-leaves-1 .leaf:nth-of-type(1){
            width: 58%;
            max-width: 400px;
            top: 20%;
            left: 10%;
            }

        #frontpage-leaves-1 .leaf:nth-of-type(2){
            width: 80%;
            max-width: 300px;
            top: 38%;
            left: 14%;
            z-index: -2;
            }

        #frontpage-leaves-1 .leaf:nth-of-type(3){
            width: 12.5%;
            max-width: 80px;
            top: 51%;
            left: 20%;
            }

        #frontpage-leaves-1 .leaf:nth-of-type(4){
            width: 13%;
            max-width: 190px;
            top: 20%;
            left: 40%;
            }

        #frontpage-leaves-1 .leaf:nth-of-type(5){
            width:15%;
            max-width:220px;
            top:25%;
            left:-9%
            }

        #frontpage-leaves-1 .leaf:nth-of-type(6){
            width:38%;
            max-width:545px;
            top:67%;
            left:-16%
            }

        #frontpage-leaves-1 .leaf:nth-of-type(7){
            width:35%;
            max-width:650px;
            top:7%;
            left:-10%
            }

        #frontpage-leaves-1 .leaf:nth-of-type(8){
            width:26%;
            max-width:380px;
            top:35%;
            left:-9%
            }

        #frontpage-leaves-1 .leaf:nth-of-type(9){
            width:5%;
            max-width:75px;
            top:10%;
            left:15%;
            z-index:-2
            }

        #frontpage-leaves-1 .leaf:nth-of-type(10){
            width:25%;
            max-width:320px;
            top:10%;
            left:-9%;
            z-index:-2
            }

        #frontpage-leaves-1 .leaf:nth-of-type(11){
            width:12.5%;
            max-width:360px;
            top:72%;
            right:20%;
            z-index:-2
            }

        #frontpage-leaves-1 .leaf:nth-of-type(12){
            width:15%;
            max-width:240px;
            top:0%;
            right:-2%;
            z-index:-2
            }

    #frontpage-leaves-1 .unfurl{
        -webkit-animation:fadein 1s both;
        animation:fadein 1s both
        }

        #frontpage-leaves-1 .unfurl .l-f{
            -webkit-animation:fadein 1s 1s both;
            animation:fadein 1s 1s both
            }

        #frontpage-leaves-1 .unfurl .leaf:nth-of-type(1) img{
            -webkit-animation:unfurlBL 1.5s ease-out both;
            animation:unfurlBL 1.5s ease-out both
            }

        #frontpage-leaves-1 .unfurl .leaf:nth-of-type(2) img{
            -webkit-animation:unfurlBL 1.8s ease-out both;
            animation:unfurlBL 1.8s ease-out both
            }

        #frontpage-leaves-1 .unfurl .leaf:nth-of-type(3) img{
            -webkit-animation:unfurlBL 2s ease-out both;
            animation:unfurlBL 2s ease-out both
            }

        #frontpage-leaves-1 .unfurl .leaf:nth-of-type(4) img{
            -webkit-animation:unfurlBL 2.2s ease-out both;
            animation:unfurlBL 2.2s ease-out both
            }

        #frontpage-leaves-1 .unfurl .leaf:nth-of-type(5) img{
            -webkit-animation:unfurlBL 2.4s ease-out both;
            animation:unfurlBL 2.4s ease-out both
            }

        #frontpage-leaves-1 .unfurl .leaf:nth-of-type(6) img{
            -webkit-animation:unfurlBL 2.6s ease-out both;
            animation:unfurlBL 2.6s ease-out both
            }

        #frontpage-leaves-1 .unfurl .leaf:nth-of-type(7) img{
            -webkit-animation:unfurlBL 2.8s ease-out both;
            animation:unfurlBL 2.8s ease-out both
            }

        #frontpage-leaves-1 .unfurl .leaf:nth-of-type(8) img{
            -webkit-animation:unfurlBL 3s ease-out both;
            animation:unfurlBL 3s ease-out both
            }

        #frontpage-leaves-1 .unfurl .leaf:nth-of-type(10) img,  #frontpage-leaves-1 .unfurl .leaf:nth-of-type(13) img{
            -webkit-animation:unfurlBL 3.3s ease-out both;
            animation:unfurlBL 3.3s ease-out both
            }

    #frontpage-leaves-2{
        }

        #frontpage-leaves-2 .leaf:nth-of-type(1){
            width:26%;
            max-width:385px;
            top:-20%;
            right:-10%
            }

        #frontpage-leaves-2 .leaf:nth-of-type(2){
            width:57%;
            max-width:835px;
            top:20%;
            right:-10%
            }

        #frontpage-leaves-2 .leaf:nth-of-type(3){
            width:10%;
            max-width:150px;
            top:45%;
            right:10%
            }

        #frontpage-leaves-2 .leaf:nth-of-type(4){
            width:12%;
            max-width:165px;
            top:50%;
            right:24%
            }

        #frontpage-leaves-2 .leaf:nth-of-type(5){
            width:12%;
            max-width:165px;
            top:85%;
            right:-3%
            }

        #frontpage-leaves-2 .leaf:nth-of-type(6){
            width:20%;
            max-width:280px;
            top:90%;
            right:1%
            }

        #frontpage-leaves-2 .leaf:nth-of-type(7){
            width:40%;
            max-width:580px;
            top:105%;
            right:-10%
            }

        #frontpage-leaves-2 .leaf:nth-of-type(8){
            width:33%;
            max-width:485px;
            top:2%;
            right:-10%
            }

        #frontpage-leaves-2 .leaf:nth-of-type(9){
            width:20%;
            max-width:300px;
            top:30%;
            right:70%
            }

    #frontpage-leaves-2 .unfurl{
        -webkit-animation:fadein 1s both;
        animation:fadein 1s both
        }

        #frontpage-leaves-2 .unfurl .leaf:nth-of-type(1) img{
            -webkit-animation:unfurlBR 1.6s ease-out both;
            animation:unfurlBR 1.6s ease-out both
            }

        #frontpage-leaves-2 .unfurl .leaf:nth-of-type(2) img{
            -webkit-animation:unfurlBR 1.8s ease-out both;
            animation:unfurlBR 1.8s ease-out both
            }

        #frontpage-leaves-2 .unfurl .leaf:nth-of-type(3) img{
            -webkit-animation:unfurlBR 2s ease-out both;
            animation:unfurlBR 2s ease-out both
            }

        #frontpage-leaves-2 .unfurl .leaf:nth-of-type(4) img{
            -webkit-animation:unfurlBR 2.2s ease-out both;
            animation:unfurlBR 2.2s ease-out both
            }

        #frontpage-leaves-2 .unfurl .leaf:nth-of-type(5) img{
            -webkit-animation:unfurlBR 2.4s ease-out both;
            animation:unfurlBR 2.4s ease-out both
            }

        #frontpage-leaves-2 .unfurl .leaf:nth-of-type(6) img{
            -webkit-animation:unfurlBR 2.6s ease-out both;
            animation:unfurlBR 2.6s ease-out both
            }

        #frontpage-leaves-2 .unfurl .leaf:nth-of-type(7) img{
            -webkit-animation:unfurlBR 2.8s ease-out both;
            animation:unfurlBR 2.8s ease-out both
            }

        #frontpage-leaves-2 .unfurl .leaf:nth-of-type(8) img{
            -webkit-animation:unfurlBR 3s ease-out both;
            animation:unfurlBR 3s ease-out both
            }

       #frontpage-leaves-2 .unfurl .l-f{
            -webkit-animation:fadein 1s .5s both;
            animation:fadein 1s .5s both
            }

    @-webkit-keyframes unfurlBL{
        0%{
            -webkit-transform:rotate(30deg);
            transform:rotate(30deg)
        }
        100%{
            -webkit-transform:rotate(5deg);
            transform:rotate(5deg)
        }
    }

    @keyframes unfurlBL{
        0%{
            -webkit-transform:rotate(30deg);
            transform:rotate(30deg)
        }
        100%{
            -webkit-transform:rotate(5deg);
            transform:rotate(5deg)
        }
    }

    @-webkit-keyframes unfurlBR{
        0%{
            -webkit-transform:rotate(-30deg);
            transform:rotate(-30deg)
        }
        100%{
            -webkit-transform:rotate(5deg);
            transform:rotate(5deg)
        }
    }

    @keyframes unfurlBR{
        0%{
            -webkit-transform:rotate(-30deg);
            transform:rotate(-30deg)
        }
        100%{
            -webkit-transform:rotate(5deg);
            transform:rotate(5deg)
        }
    }

    /*  3.1 LEAVES - END  */

    /*  3.2 NEWSLETTER  */

    .pop-slides {
        position:fixed;
        width: 50%;
        max-width: 630px;
        left: 0;
        bottom:0;
        -webkit-transform:translateY(200%);
        transform:translateY(200%);
        transition:.6s;
        z-index:200
        }

        .pop-slides.show {
            -webkit-transform:translateY(0%);
            transform:translateY(0%);
            }

        .pop-slides > svg {
            position: absolute;
            width: 120%;
            bottom: -10px;
            left: 0;
            }

        .pop-slides-content {
            position: relative;
            padding: 60px 30px;
            z-index: 210;
            }

        .pop-slides-content-text {
            width: calc(100% - 210px);
            }

        .pop-slides-content-text h2 {
            font-size: 50px;
            }

        .pop-slides-content svg {
            display: inline-block;
            width: 180px;
            margin-left: 30px;
            }

        .pop-slides_close{
            position:absolute;
            width:12px;
            height:12px;
            top:20px;
            left:35px;
            cursor:pointer;
            z-index: 215;
            }

        #cibo-express h2 {
            margin: 0;
        }

        #cibo-express.pop-slides > svg {
            bottom: -40px;
        }

    #newsletter{
        position:fixed;
        width:100%;
        bottom:0;
        -webkit-transform:translateY(150%);
        transform:translateY(150%);
        padding:80px 0 40px;
        background:#ffb4be;
        transition:.6s;
        z-index:200
        }

        #newsletter.show{
            -webkit-transform:translateY(0);
            transform:translateY(0)
            }

        #newsletter > svg{
            position:absolute;
            top:1px;
            left:50%;
            -webkit-transform:translate(-50%,-100%);
            transform:translate(-50%,-100%)
            }

        #newsletter > svg path{
            fill:#ffb4be
            }

    #newsletter_close{
        position:absolute;
        width:12px;
        height:12px;
        top:-80px;
        right:0;
        cursor:pointer
        }

        #newsletter_close svg path{
            fill:#096655
            }

    #newsletter .t-title-small{
        display:inline-block;
        width:calc(33.33% - 75px);
        margin:0 75px 0 0;
        font-weight:700
        }

    #newsletter p{
        display:inline-block;
        width:calc(25% - 45px);
        margin:0 45px 0 0;
        color:#096655
        }

    #newsletter form{
        width:41%
        }

        #newsletter .field{
            width:calc(50% - 55px)
            }

        #newsletter .field label{
            padding:0 35px;
            color:#096655
            }
            
        #newsletter .field input:not(:focus) ~ label{
            font-size:14px;
            line-height:18px
            }

        #newsletter .field input{
            padding:18px 35px 10px;
            background:transparent !important
            }

        #newsletter input[type="email"]{
            border:1px solid #096655;
            border-bottom-left-radius:27.5px;
            border-top-left-radius:27.5px
            }

        #newsletter input[type="text"]{
            border-top:1px solid #096655;
            border-bottom:1px solid #096655;
            }

        #newsletter input[type="submit"]{
            width:110px;
            height:56px;
            text-align:center;
            text-transform:uppercase;
            letter-spacing:.05em;
            font:700 14px/60px "Larsseit",Helvetica,san-serif;
            color:#fff;
            background:#096655;
            border:1px solid #096655;
            border-radius:27.5px;
            border-bottom-left-radius:0 !important;
            border-top-left-radius:0 !important;
            }

    /*  3.2 NEWSLETTER - END  */

/*  3.0 FRONTPAGE - END  */

/*  4.0 PRODUCTS  */

    /*  4.1 PRODUCT INDEX  */

    #products{
        position:relative;
        padding:60px 0 110px;
        text-align:center;
        transition:.6s;
        z-index:20
        }

        #products > svg{
            position:absolute;
            width:100%;
            top:1px;
            left:0;
            -webkit-transform:translateY(-100%);
            transform:translateY(-100%)
            }

        #products > svg path{
            transition:.6s
            }

    #product-slides{
        position:relative;
        margin:0 auto 90px
        }

        #product-slides .slick-prev,
        #product-slides .slick-next{
            display:none !important
            }

.slick-dots li button:before {
	content: none !important;
}
#product-slides .slick-dots {
	bottom: unset !important;
}
    #product-slides_toggle{
        display:inline-block;
        overflow:hidden;
        margin:0 auto 140px;
        white-space:nowrap;
        border-radius:27.5px;
        transition:.3s
        }

        #product-slides_toggle button{
            display:inline-block;
            height:55px;
            padding:0 60px;
            text-transform:uppercase;
            letter-spacing:.05em;
            font:700 14px/60px "Larsseit",Helvetica,san-serif;
            color:#fff;
            transition:.3s
            }

        #product-slides_toggle button:not(.active){
            opacity:.3
            }

        #product-slides_toggle button:not(.active):hover{
            }

        #product-slides .slick-dots{
            position:absolute;
            top:0;
            left:50%;
            -webkit-transform:translate(-50%,(-100% - 60px));
            transform:translate(-50%,calc(-100% - 60px))
            }

        #product-slides .slider-container{
            position:absolute;
            width:100%;
            top:0;
            opacity:0;
            pointer-events:none;
            -webkit-animation-duration:.3s;
            animation-duration:.3s;
            transition:.3s
            }

        #product-slides .slider-container.active{
            position:relative;
            opacity:1;
            pointer-events:auto
            }

        #product-slides .slick-list li{
            position:relative;
            width:600px;
            padding:0 50px;
            cursor:pointer
            }

        #product-slides .slick-list li .product{
            -webkit-transform:translateX(-6%) scale(1,1);
            transform:translateX(-6%) scale(1,1);
            transition:.3s
            }

        #product-slides .slick-list li .product img{
            max-width:500px
            }

        html:not(.show_product_info) #product-slides-info [data-hide],
        html.show_product_info #product-slides-info [data-show]{
            display: none;
			opacity: 1 !important;
        }

        @media screen and (min-width:601px){

            #product-info{
                height:calc(100% + 4px);
                }

            html.show_product_info #product-slides #product-info {
                opacity: 1;
                pointer-events: auto;
                }

            html.show_product_info #product-slides_toggle,
            html.show_product_info #products-header,
            html.show_product_info #product-slides .slider-container {
                opacity: 0;
            }

        }

        #product-slides li:not(.slick-center) .product{
            -webkit-transform:translateX(-6%) scale(.8,.8);
            transform:translateX(-6%) scale(.8,.8)
            }

    #product-info{
        position:absolute;
        width:100%;
        top:-2px;
        opacity:0;
        pointer-events:none;
        transition:.3s;
        z-index:50
        }

        #product-info [data-product]{
            position:absolute;
            bottom:0;
            left:50%;
            -webkit-transform:translate(-50%,0);
            transform:translate(-50%,0);
            opacity:0;
            pointer-events:none
            }

        #product-info [data-product].active{
            opacity:1;
            pointer-events:auto
            }

        .product-info-features{
            width:calc(25% - 30px);
            margin:0 45px 0 0
            }

        .product-info-features .feature{
            max-width:135px;
            margin:0 auto 40px
            }

        .product-info-features .feature:last-of-type{
            margin:auto
            }

        .product-info-features .feature svg{
            height:70px !important;
            margin:0 0 15px
            }

        .product-info-features .feature svg path,
        .product-info-features .feature svg polygon{
            /*fill:#fff*/
            }

        .product-info-nutrient{
            width:calc(30% - 30px);
            margin:0 45px 0 0
            }

        .product-info-content{
            width:calc(45% - 30px);
            text-align:left
            }

        .product-info-content .t-heading,
        .product-info-content p {
            color: inherit;
        }

        .product-info-content p {
            font-size: 14px;
        }

    #products-header {
        max-width: 600px;
        margin: 0 auto 60px;
        transition: 0.3s;
    }

    #product-slides-info{
        opacity:0;
        -webkit-animation:fadein .6s 1s ease-out both;
        animation:fadein .6s 1s ease-out both
        }

        #product-slides-info #nutrient-label_click{
            margin:0 0 30px;
            text-transform:uppercase;
            letter-spacing:.15em;
            font:700 14px/1em "Larsseit",Helvetica,san-serif;
            }

        #product-slides-info .cta{
            color:#fff
            }

        #product-slides-info .cta:hover{
            opacity:.8
            }

    #product-intro{
        position:relative;
        padding:120px 0 150px;
        z-index:30
        }

        #product-intro svg{
            position:absolute;
            width:100%;
            top:5px;
            left:0;
            -webkit-transform:translateY(-100%);
            transform:translateY(-100%)
            }

        #product-intro #intro-heading {
            max-width: 900px;
            margin:0 auto 60px;
            text-align:center;
            }

        #product-intro #intro-heading h2{
            margin:0 0 45px
            }

        #product-intro #intro-heading-paragraph {
            -webkit-column-count: 2;
            -moz-column-count: 2;
            -o-column-count: 2;
            column-count: 2;
            text-align: left;
        }

        #product-intro #intro-heading-paragraph p {
            margin: 0;
            break-inside: avoid;
        }

        #product-intro-icons {
            -webkit-justify-content:space-between;
            justify-content:space-between
        }

        #product-intro-icons .icon{
            position:relative;
            width:300px;
            opacity:0
            }

        #product-intro-icons.scrolled .icon{
            -webkit-animation:fadeinup .6s ease-out both;
            animation:fadeinup .6s ease-out both
            }

        #product-intro-icons.scrolled .icon:nth-of-type(2){
            -webkit-animation-delay:.2s;
            animation-delay:.2s
            }

        #product-intro-icons.scrolled .icon:nth-of-type(3){
            -webkit-animation-delay:.4s;
            animation-delay:.4s
            }

        #product-intro-icons.scrolled .icon:nth-of-type(4){
            -webkit-animation-delay:.6s;
            animation-delay:.6s
            }

        #product-intro-icons.scrolled .icon:nth-of-type(5){
            -webkit-animation-delay:.8s;
            animation-delay:.8s
            }

        #product-intro-icons.scrolled .icon:nth-of-type(6){
            -webkit-animation-delay:1s;
            animation-delay:1s
            }

        #product-intro-icons.scrolled .icon:nth-of-type(7){
            -webkit-animation-delay:1.2s;
            animation-delay:1.2s
            }

        #product-intro-icons.scrolled .icon:nth-of-type(8){
            -webkit-animation-delay:1.4s;
            animation-delay:1.4s
            }

        #product-intro-icons .icon:after{
            content:"";
            display:block;
            padding-top:75%
            }

        #product-intro-icons .icon .icon-image,
        #product-intro-icons .icon .icon-content{
            position:absolute;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
            transition:.3s
            }

        #product-intro-icons .icon .icon-image img{
            max-width:120px;
            max-height:100px
            }

        #product-intro-icons .icon .icon-content{
            width:200px;
            text-align:center
            }

        #product-intro-icons .icon .icon-content h3{
            font-size:30px
            }

        #product-intro-icons .icon .icon-content p{
            margin-bottom:0;
            font-size:14px
            }

        #product-intro-icons .icon:hover .icon-image,
        #product-intro-icons .icon:not(:hover) .icon-content,
        #product-intro-icons .icon.hover .icon-image{
            opacity:0
            }

        #product-intro-icons .icon.hover .icon-content{
            opacity:1
            }

    #product-steps{
        position: relative;
        margin: 0 0 -10px;
        padding: 1px 0 150px;
        z-index: 40;
    }

        #product-steps > svg{
            position: absolute;
            width: 101%;
            top: 2px;
            left: -0.5%;
            -webkit-transform: translateY(-52%);
            transform: translateY(-52%);
        }

        #product-steps > svg path{
            fill:#096655
            }

        #product-steps-header {
            margin: 120px 0 90px;
            text-align: center;
        }

        #product-steps-content {
            position: relative;
        }

        .step{
            position: absolute;
            opacity: 0;
        }

        .step-content{
            max-width: 220px;
        }

        .step:nth-of-type(1) {
            top: -2%;
            left: 30%;
        }

        .step:nth-of-type(1) img {
            max-width: 120px;
            margin: 0 0 20px;
        }

        .step:nth-of-type(2) {
            top: 15%;
            left: 5%;
        }

        .step:nth-of-type(2) img {
            max-width: 90px;
            margin: 0 0 20px 30px;
        }

        .step:nth-of-type(3) {
            top: 17%;
            left: 55%;
        }

        .step:nth-of-type(3) img {
            max-width: 120px;
            margin: 0;
        }

        .step:nth-of-type(4) {
            top: 37%;
            left: 88%;
        }

        .step:nth-of-type(4) img {
            max-width: 90px;
            margin: 0 0 25px 15px;
        }

        .step:nth-of-type(5) {
            top: 50%;
            left: 25%;
        }

        .step:nth-of-type(5) img {
            max-width: 120px;
            margin: 0 0 0 20px;
        }

        .step:nth-of-type(6) {
            top: 70%;
            left: -3%;
        }

        .step:nth-of-type(6) img {
            max-width: 120px;
            margin: 0 0 20px 20px;
        }

        .step:nth-of-type(7) {
            top: 85%;
            left: 50%;
        }

        .step:nth-of-type(7) img {
            max-width: 120px;
            margin: 0 0 20px 20px;
        }

        @media screen and (min-width: 1001px){

            .step.scrolled{
                -webkit-animation:fadeinup .6s ease-out both;
                animation:fadeinup .6s ease-out both
            }

        }

    #product-special{
        position: relative;
        padding: 120px 0;
    }

        #special-heading{
            margin: 0 auto 90px;
            text-align: center;
        }

        #special-certifications {
            margin: 90px auto 60px;
        }

    #products-faq{
        position:relative;
        padding:90px 0;
        z-index:50
        }

        #products-faq svg{
            position:absolute;
            width:100%;
            top:2px;
            -webkit-transform:translateY(-100%);
            transform:translateY(-100%)
            }

        #products-faq svg path{
            fill:#fff
            }

        #products-faq #faq-link{
            flex:1;
            text-align:right
            }

        #products-faq #faq-link .cta-sub{
            line-height:1em
            }

    #products-find{
        position:relative;
        padding:360px 0 300px;
        overflow:hidden
        }

        #products-find svg{
            position:absolute;
            width:100%;
            top:-1px;
            z-index:20
            }

        #products-find svg path{
            fill:#fff
            }

        #products-find .leaves:nth-of-type(1) .leaf:nth-of-type(1){
            width:60%;
            max-width:850px;
            top:-8%;
            left:-35%
            }

        #products-find .leaves:nth-of-type(2) .leaf:nth-of-type(1){
            width:100%;
            max-width:1440px;
            bottom:-50%;
            right:-40%
            }
        #products-find .leaves:nth-of-type(2) .leaf:nth-of-type(2){
            width:31%;
            max-width:460px;
            bottom:-12%;
            right:-10%
            }

        #products-find .leaves:nth-of-type(2) .leaf:nth-of-type(3){
            width:37.5%;
            max-width:535px;
            bottom:-25%;
            right:-8%
            }

        #products-find .leaves:nth-of-type(1).unfurl .leaf:nth-of-type(1) img{
            -webkit-animation:unfurlBL 2.2s ease-out both;
            animation:unfurlBL 2.2s ease-out both
            }

        #products-find .leaves:nth-of-type(2).unfurl .leaf:nth-of-type(1) img{
            -webkit-animation:unfurlBR 2.4s ease-out both;
            animation:unfurlBR 2.4s ease-out both
            }

        #products-find .leaves:nth-of-type(2).unfurl .leaf:nth-of-type(2) img{
            -webkit-animation:unfurlBR 2.6s ease-out both;
            animation:unfurlBR 2.6s ease-out both
            }

        #products-find .leaves:nth-of-type(2).unfurl .leaf:nth-of-type(3) img{
            -webkit-animation:unfurlBR 2.8s ease-out both;
            animation:unfurlBR 2.8s ease-out both
            }

    /*  4.1 PRODUCT INDEX  */

    /*  4.2 MOLTEN PAGE  */

    body#page-molten #products-header .t-lp,
    body#page-molten #molten-about .story,
    body#page-molten #molten-about .story h2,
    body#page-molten #molten-about .story .story-content-left,
    body#page-molten #molten-about .story .story-content-right p,
    body#page-molten #molten-about .story .story-content-right ul,
    body#page-molten #molten-about .story .story-content-right ol {
        color: #38200B;
    }

    body#page-molten #products-header {
        margin-bottom: 140px;
    }

    #molten-about {
        position: relative;
        padding: 120px 0;
    }

        #molten-about > .width {
            max-width: 750px;
        }

        #molten-about svg{
            position: absolute;
            width: 100%;
            top: 1px;
            -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
            z-index: 30;
        }

        #molten-about svg path{
            fill: #ffffff;
        }

        #molten-about.about-story .story:not(:last-of-type) {
            margin-bottom: 120px;
        }

    body#page-molten #find-lavva-module .field {
        margin-bottom: 20px;
    }

        body#page-molten #find-lavva-module input[type="submit"] {
            width: 100%;
        }

    /*  4.2 MOLTEN PAGE - END  */

    /*  4.3 MILK PAGE  */

    #milk-product {
        position: relative;
        padding: 60px 0 0;
        text-align: center;
    }

        #milk-product > svg{
            position: absolute;
            width: 101%;
            top: 1px;
            left: 50%;
            -webkit-transform: translate(-50%, -100%);
            transform: translate(-50%, -100%);
        }

        #milk-product > svg path,
        body#page-milk #products-find svg path,
        body#page-plant-milk #products-find svg path,
        body#page-lavva-plant-milk #products-find svg path {
            fill: #f6f2ed;
        }

        #milk-product img {
            display: block;
            width: 750px;
            margin: 60px auto 0;
			z-index: 2;
			position: relative;
        }

        #milk-product #nutrient-label_open {
            margin: 60px auto 0;
            text-transform:uppercase;
            letter-spacing:.15em;
            font:700 14px/1em "Larsseit",Helvetica,san-serif;
        }
    
        #nutrient-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: 0.3s;
        }

        #nutrient-label_close {
            position: fixed;
            width: 40px;
            height: 40px;
            top: 0;
            right: 0;
        }

        #nutrient-overlay-content {
            max-width: 900px;
            margin: 60px auto;
        }

        #nutrient-overlay-content .t-ant {
            margin: 15px 0 0;
            color: #fff;
        }

        #nutrient-overlay-content img {
            margin: 60px auto 0;
        }

        #nutrient-label_close:before,
        #nutrient-label_close:after {
            content: '';
            position: absolute;
            display: block;
            height: 2px;
            width: 25px;
            top: 50%;
            left: 50%;
            background-color: #ffffff;
        }

        #nutrient-label_close:before {
            content: '';
            -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
        }

        #nutrient-label_close:after {
            content: '';
            -webkit-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
        }

        html.nutrient_overlay_active #nutrient-overlay {
            opacity: 1;
            pointer-events: auto;
        }

        #milk-product .leaf:nth-of-type(1){
            max-width: 720px;
            width: 60vw;
            left: -35%;
            bottom: -5%;
            -webkit-transform: rotate(-40deg);
            transform: rotate(-40deg);
        }

        #milk-product .leaf:nth-of-type(2) {
            width: 30%;
            max-width: 360px;
            bottom: -25%;
            right: -25%;
            -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
        }

        #milk-product .leaf:nth-of-type(3){
            width: 37.5%;
            max-width: 420px;
            bottom: -35%;
            right: -25%;
        }

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

            #milk-product .leaf:nth-of-type(1){
                left: -55%;
                bottom: 0%;
            }

            #milk-product .leaf:nth-of-type(2) {
                right: -35%;
                bottom: -25%;
            }

            #milk-product .leaf:nth-of-type(3){
                right: -25%;
                bottom: -35%;
            }

        }

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

            #milk-product {
                padding: 60px 0 0;
            }

            #milk-product .leaf {
                display: none;
            }

        }

        body#page-milk #special-certifications,
        body#page-plant-milk #special-certifications, 
        body#page-lavva-plant-milk #special-certifications  {
            margin-bottom: 0;
        }

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

        body#page-milk #product-special,
        body#page-plant-milk #product-special,
        body#page-lavva-plant-milk #product-special {
            padding: 60px 0 0.1px;
        }

    }

    /*  4.3 MILK PAGE - END  */

/*  4.0 PRODUCTS - END  */

/*  5.0 BLOG  */

    .blog-stamp{
        position: absolute;
        width: 230px;
        top: 0;
        right: 0;
        -webkit-transform: translate(60px,-50px);
        transform: translate(60px,-50px);
        pointer-events: none;
    }

    /*  5.1 BLOG INDEX  */

    #blog-categories{
        margin:30px auto 50px
        }

        #blog-categories .width{
            max-width: 550px;
        }

        #blog-categories .g-flex{
            -webkit-justify-content:space-between;
            justify-content:space-between
            }

        #blog-categories .category{
            position:relative
            }

        #blog-categories .category span{
            transition:.3s
            }

        #blog-categories .category:after{
            content:"";
            position:absolute;
            width:1px;
            height:0;
            top:24px;
            left:50%;
            -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
            background:#18d594;
            pointer-events:none;
            transition:.15s
            }

        #blog-categories .category p{
            position:absolute;
            width:150px;
            top:50px;
            left:50%;
            -webkit-transform:translateX(-50%);
            transform:translateX(-50%);
            margin:0;
            text-align:center;
            font-size:14px;
            pointer-events:none;
            opacity:0;
            transition:.2s
            }

        @media screen and (min-width:601px){

            #blog-categories .category:hover span{
                color:#18d594
                }

            #blog-categories .category:hover::after{
                height:20px
                }

            #blog-categories .category:hover p{
                opacity:1;
                transition:.3s .1s
                }

        }

    #blog-search {
        margin: 0 auto 60px;
    }

        #blog-search .width {
            max-width: 750px;
        }

        #blog-search form {
            width: 100%;
            border-radius: 25px;
            background-color: #fff;
			flex-wrap: initial;
        }

        #blog-search form input[type="text"] {
            flex: auto;
            padding: 0 25px;
            line-height: 50px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        #blog-search form input[type="submit"] {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
			width: 25%;
			display: flex;
			justify-content: center;
        }

        #search-header {
            text-align: center;
        }

    .article{
        position:relative;
        width:calc(50vw + 650px);
        margin:0 auto 50px
        }

        .article-container.article-right .article{
            float:right
            }

        .article-container.article-left .article{
/*             float:left */
			float: none;
            }
.article-container:not(:first-of-type), .article-tout:nth-of-type(13), .article-tout:nth-of-type(14), .article-tout:nth-of-type(15) {
	display: none !important;
}
    .article .article-image{
        position:relative;
        max-width:calc(50vw + 75px);
        width:calc(100vw - 575px);
        z-index:20
        }

        .article .article-image:after{
            content:"";
            display:block;
            padding-top:70%
            }

        .article-image-overlay{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            background:rgba(0,0,0,0.2);
            transition:.6s;
            z-index:30
            }

        .article:hover .article-image-overlay{
            opacity:0
            }

/*     .article .article-content-container{
        position:relative;
        width:575px;
        -webkit-transform:translate(-55px,40px);
        transform:translate(-55px,40px);
        padding:60px 120px;
        background:#fff
        } */

/* new styles for featured article  */

		.article {
			position: relative;
			width: 100vw;
			max-width: unset;
			margin: 0 auto;
			justify-content: center;
		}
		#blog-latest .t-lant {
			transition: opacity .2s ease !important;
		}
		.hide {
			opacity: 0 !important;
		}
		.article .article-content-container{
			position: relative;
			width: 500px;
			padding: 75px;
			background: #fff;
			height: 420px;
			transform: translateX(-25px);
			-webkit-transform: translateX(-25px);
			z-index: 20;
			margin: auto 0;
		}
		.article .article-image {
			width: 60%;
			transform: translateX(25px);
			-webkit-transform: translateX(25px);
		}
		.article .article-content-slide {
			display: -webkit-box;
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
			overflow: hidden;
			margin: auto;
			top: 0;
			bottom: 0 !important;
			max-height: 175px;
			height: fit-content;
			height: -moz-fit-content;
		}

        .article.d-rtl > .article-content-container{
            -webkit-transform:translate(55px,40px);
            transform:translate(55px,40px)
            }

        .article-content-overlay{
            position:absolute;
            width:100%;
            height:100%;
            top:0;
            left:0;
            z-index:30
            }

        .article-content-slide{
            position:absolute
            }

            .article .article-content{
                position:relative;
                height:100%
                }

            .article .article-content-slide{
                bottom:90px
                }

        .article-content .t-title-small{
            margin:0;
            }

        .article-content-slide p{
            display:none;
            margin:0;
            padding:40px 0 0
            }

        .article-content .cta-sub{
            position:absolute;
            bottom:0;
            line-height:1em
            }
	article.article-tout:hover {
		transform: translateY(-3px) !important;
		-webkit-transform: translateY(-3px) !important;
		-moz-transform: translateY(-3px) !important;
	}
	.article-tout{
        -webkit-animation-delay:.3s !important;
        animation-delay:.3s !important;
		transition: .3s ease !important;
	}
    #blog-grid{
        padding:50px 0 0;
        margin:50px auto 150px;
        border-top:1px solid #d3cec9
        }

        #blog-grid .t-lant{
            margin:0 auto 50px
            }

        article.article-tout{
            opacity:0
            }

        .article-tout:hover .article-image-overlay{
            opacity:0
            }

        .article-tout .article-image{
            position:relative;
			max-height: 300px;
            }

        .article-tout .article-image:after,
        .article-tout .article-content:after{
            content:"";
            display:block;
            padding-top:60%
            }

        .article-tout .article-content{
            position:relative;
            padding:30px 40px;
            background:#fff
            }

        .article-tout .article-category{
            position:absolute;
            width:calc(100% - 80px);
            top:30px;
            left:40px;
            }

        .article-tout .article-content-slide{
            position:absolute;
            max-width:450px;
            width:calc(100% - 80px);
            bottom:30px;
            left:40px;
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
            }

        .article-tout .article-content-slide p{
            padding:20px 0 0
            }

    #blog-grid-rows .article-tout:nth-of-type(1),
    #blog-grid-rows .article-tout:nth-of-type(4){
        width:calc(66.66% - 9px) !important
        }

        #blog-grid-rows .article-tout:nth-of-type(2),
        #blog-grid-rows .article-tout:nth-of-type(3){
            width:calc(33.33% - 9px);
            margin:0 0 70px
            }

        #blog-grid-rows .article-tout:nth-of-type(1){
            margin:0 18px 70px 0
            }

        #blog-grid-rows .article-tout:nth-of-type(4){
            margin:0 0 70px 18px
            }

        #blog-grid-rows .article-tout:nth-of-type(1) .article-image:after,
        #blog-grid-rows .article-tout:nth-of-type(4) .article-image:after{
            padding-top:calc(48.5% - 3px);
            }

        #blog-grid-rows .article-tout:nth-of-type(1) .article-content:after,
        #blog-grid-rows .article-tout:nth-of-type(4) .article-content:after{
            padding-top:calc(48.5% - 41px)
            }

    #blog-grid-content .article-tout{
        display:inline-block;
        width:calc(33.33% - 12px);
        margin:0 18px 70px 0
        }

        #blog-grid-content .article-tout:nth-of-type(3n){
            margin:0 0 70px
            }

        #infscr-loading,
        #infintite-next{
            display:none
            }

        html.blog_loading #load_more,
        html.blog_end #load_more,
        html:not(.blog_end) #load_end,
        html:not(.blog_loading) #load_progress{
            display:none
            }

        html.blog_end #blog_load{
            opacity:.3;
            transition:1s;
            pointer-events:none
            }

    #blog-grid-load{
        text-align:center
        }

    /*  5.1 BLOG INDEX - END  */

    /*  5.2 BLOG SINGLE  */

    #blog-single-hero{
        margin:120px auto 75px;
        text-align:center
        }

        #blog-single-hero .t-ant{
            margin:0 0 15px
            }

        #blog-single-hero .t-heading{
            margin:0 auto 100px
            }

        #single-hero-image{
            position:relative
            }

        #single-hero-image .blog-stamp{
            -webkit-transform:translate(-35px,-60px);
            transform:translate(-35px,-60px);
            pointer-events:none
            }

    #blog-share-container{
        width:30px
        }

        #blog-share-container #share-module{
            transform-origin:top left;
            -webkit-transform:translate(100%,0) rotate(90deg);
            transform:translate(100%,0) rotate(90deg);
            white-space:nowrap
            }

        #share-module span{
            position:relative;
            display:inline-block
            }

        #share-module span:after{
            content:"";
            display:inline-block;
            width:120px;
            height:1px;
            background:#d3cec9;
            vertical-align:4px;
            margin:0 15px
            }

        #share-module a{
            position:relative;
            display:inline-block;
            width:30px;
            height:30px;
            vertical-align:middle;
            margin:0 15px 0 0
            }

        #share-module a:last-of-type{
            margin:0
            }

        #share-module a img{
            position:absolute;
            height:19px !important;
            top:50%;
            left:50%;
            -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%)
            }

        #blog-share-container #share-module a img{
            -webkit-transform:translate(-50%,-50%) rotate(-90deg);
            transform:translate(-50%,-50%) rotate(-90deg)
            }

        #blog-share-container #share-module a:last-of-type img{
            top:40%
            }

    #blog-content-container{
        width:calc(100% - 30px)
        }

        #blog-content-container #content{
            float:right;
            width:100%;
            max-width:900px;
            margin:auto;
            padding:0 90px
            }

        #content div,
        #content iframe,
        #content figure{
            max-width:100%
            }

        #content h1,
        #content h2{
            font-weight:400;
            font-size:36px;
            line-height:1.25em
            }

        #content h3,
        #content h4,
        #content h5,
        #content h6{
            margin:60px 0 30px;
            font-size:18px;
            line-height:1.5em
            }

        #content.blog-content h3,
        #content.blog-content h4,
        #content.blog-content h5,
        #content.blog-content h6{
            -webkit-transform:translateX(-15px);
            transform:translateX(-15px)
            }

        .alignleft,
        .alignright{
            max-width:200%;
            margin:110px 0
            }

        .alignleft{
            width:calc(100% + 100px) !important;
            -webkit-transform:translateX(-390px);
            transform:translateX(-390px)
            }

        .alignright{
            width:100% !important;
            -webkit-transform:translateX(90px);
            transform:translateX(90px)
            }

        .wp-caption-text{
            font-size:14px
            }

        #content #share-module{
            margin:150px auto;
            padding:0 30px
            }

        #blog-single-related{
            margin:0 auto 50px;
            padding:50px 0 0;
            border-top:1px solid #d3cec9
            }

    /*  5.2 BLOG SINGLE - END  */

/*  5.0 BLOG - END  */

/*  6.0 PAGES  */

body#faq-archive #container,
body#page-contact #container,
body#blog-archive #container,
body#page-find-lavva #container,
body#page-online-ordering #container,
body#page-press #container,
body#page #container{
    margin:150px auto 
    }

    #container{
        overflow:hidden;
        min-height:calc(100vh - 660px)
        }

    body#page-error #container{
        min-height:calc(100vh - 360px)
        }

    /*  6.1 GENERAL  */

    body#page .t-heading{
        margin:0 0 90px
        }

    /*  6.1 GENERAL - END  */

    /*  6.2 ABOUT  */

    #about-hero {}

        #about-hero svg,
        #hero-ingredient-hero svg {
            position: absolute;
            width: 100%;
            bottom: -2px;
            z-index: 30;
        }

        #about-hero svg path,
        #hero-ingredient-hero svg path {
            fill: #f6f2ed;
        }

    #about-story-opening {
        margin: 0 0 90px;
        padding: 120px 0 175px;
    }

        #about-story-opening svg {
            position: absolute;
            width: 100%;
            top: auto;
            bottom: 0;
        }

        #about-story-opening svg path {
            fill: #f6f2ed;
        }

        #about-story-closing{
            margin-bottom:240px;
            }

    .about-story{
        position:relative;
        padding:240px 0 0;
        }

        .about-story svg{
            position:absolute;
            width:100%;
            top:0
            }

        .about-story svg path{
            fill:#fff
            }

        .about-story .story{
            margin:0 auto 250px
            }

        .about-story .story:last-of-type{
            margin:auto
            }

        .about-story .story h2{
            margin:0 0 45px;
            text-align:center
            }

        .about-story .story-content{
            max-width:1000px;
            margin:60px auto 0
            }

        .about-story .story-content-left{
            width:calc(50% - 60px);
            margin:0 60px 0 0
            }

        .about-story .story-content-right{
            width:50%
            }

        .about-story .story-content-right p:first-of-type{
            margin-top:0
            }

        #about-product #hero-product-cta{
            width:100%;
            margin:180px auto 0;
            text-align:center
            }

        #about-product #hero-product-cta .cta-sub{
            margin-left:60px
            }

        #about-share{
            text-align:center;
            -webkit-filter:grayscale(100%);
            filter:grayscale(100%);
            opacity:.6
            }

    #about-product{
        margin: 150px auto;
    }

        #about-product #hero-content-container {
            margin-top: 90px;
        }

    #about-share{
        margin:0 auto 180px
        }

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

        #about-product #hero-content-container {
            margin-top: 0;
        }

    }

    #story-content {
        margin: 120px auto;
    }

        #story-content-interior {
            padding: 60px 90px;
        }

    #about-intro {}

        #founder-portrait {
            position: relative;
            max-width: 240px;
            margin: 30px auto 90px;
        }

        #founder-portrait .object-fit {
            border-radius: 100%;
            overflow: hidden;
            z-index: 20
        }

        #founder-portrait:after {
            content: "";
            display: block;
            padding-top: 100%
        }

        #founder-portrait .leaves:nth-of-type(1) {
            z-index: 10
        }

        #founder-portrait .leaves:nth-of-type(2) {
            z-index: 30
        }

        #founder-portrait .leaves:nth-of-type(1) .leaf:nth-of-type(1) {
            width: 30%;
            max-width: 120px;
            bottom: 55%;
            left: -10%
        }

        #founder-portrait .leaves:nth-of-type(1) .leaf:nth-of-type(2) {
            width: 75%;
            max-width: 300px;
            bottom: 9%;
            left: -28%
        }

        #founder-portrait .leaves:nth-of-type(2) .leaf:nth-of-type(1) {
            width: 38%;
            max-width: 150px;
            bottom: -15%;
            left: 5%
        }

        #founder-portrait .leaves:nth-of-type(2) .leaf:nth-of-type(2) {
            width: 51%;
            max-width: 200px;
            bottom: -10%;
            right: -12%
        }

        #founder-portrait .leaves:nth-of-type(1).unfurl .leaf:nth-of-type(1) img {
            -webkit-animation: unfurlBL 2.4s ease-out both;
            animation: unfurlBR 2.4s ease-out both
        }

        #founder-portrait .leaves:nth-of-type(1).unfurl .leaf:nth-of-type(2) img {
            -webkit-animation: unfurlBL 2.6s ease-out both;
            animation: unfurlBR 2.6s ease-out both
        }

        #founder-portrait .leaves:nth-of-type(2).unfurl .leaf:nth-of-type(1) img {
            -webkit-animation: unfurlBR 2.8s ease-out both;
            animation: unfurlBR 2.8s ease-out both
        }

        #founder-portrait .leaves:nth-of-type(2).unfurl .leaf:nth-of-type(2) img {
            -webkit-animation: unfurlBL 3s ease-out both;
            animation: unfurlBL 3s ease-out both
        }

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

        #story-content {
            margin: 60px auto;
        }

        #story-content-interior {
            padding: 5vw;
        }

        #founder-portrait {
            max-width: 180px;
            margin: 0 auto 60px;
        }

    }

    /*  6.2 ABOUT - END  */

    /*  6.3 FIND LAVVA  */

    #find-lavva-hero {
        margin:0 auto 70px;
        text-align:center
    }

    #find-lavva-hero__subheading {
        max-width: 700px;
        margin: 0 auto;
    }

    #find-lavva-online {
        height: 100%;
    }
    
    #find-lavva-online > .g-flex {
        -webkit-justify-content: space-around;
        justify-content: space-around;
        align-items: center;
    }
    
    .find-lavva-online__link--img {
        max-height: 75px;
        max-width: 200px;
        transition: .3s ease-in-out;
        overflow: visible;
		margin: 0 10px 10px 10px;
    }
    
    .find-lavva-online__link--img:hover {
        -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    #find-lavva-content {
        margin: 3em 0;
        text-align: center;
    }

    #find-lavva-klaviyo-form {
        margin: 0 auto 60px;
    }

    #find-lavva-klaviyo-form button {
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
    }

    #find-lavva-plugin {
        margin: 0 auto 90px;
    }

        #find-lavva-plugin #destini{
            max-height:750px
            }

    #find-lavva-bottom{
        margin:0 auto 90px;
        text-align:center
        }

        #find-lavva-bottom .t-title-small{
            font-weight:700
            }

    #find-lavva-form form{
        font-size:0
        }

        #find-lavva-form .field{
            display:inline-block;
            width:calc(25% - 13.5px);
            margin:0 18px 0 0
            }

        #find-lavva-form .field:nth-of-type(5){
            margin:0
            }

        #find-lavva-form .field input[type="submit"]{
            display:block;
            width:200px;
            margin:auto
            }

    /*  6.3 FIND LAVVA - END  */

    /*  6.4 ONLINE ORDERING  */

    /*  6.4 ONLINE ORDERING - END  */

    /*  6.5 CONTACT  */

    #contact-hero{
        margin:0 auto 80px;
        text-align:center
        }

    #contact-form{
        margin:0 auto 75px
        }

        #contact-form input[type="submit"]{
            display:block;
            width:200px;
            margin:75px auto 0
            }

        #contact-form form.success{
            /*max-height:360px;*/
            /*transition:.6s*/
            }

        #contact-form form.success .wpcf7-response-output{
            position:absolute;
            width:100%;
            top:45%;
            left:0;
            }

        #contact-form form.success .field,
        #contact-form form.success .field-group{
            opacity:0;
            pointer-events:none;
            transition:.6s
            }

    #contact-links{
        text-align:center
        }

    .ajax-loader{
        display:none !important
        }

    .wpcf7-response-output{
        margin:30px 0 0 !important;
        padding:0 !important;
        text-align:center;
        text-transform:uppercase;
        letter-spacing:.03em;
        font:17px/1em "Pitch Sans",Helvetica,sans-serif;
        border:none !important
        }

    /*  6.5 CONTACT - END  */

    /*  6.6 FAQ  */

    #faq{
        width:100%;
        max-width:580px;
        margin:auto
        }

    .faq{
        border-bottom:1px solid #d3cec9
        }

    .faq:last-of-type{
        border-bottom:none
        }

    .faq .faq-title{
        position:relative;
        padding:40px 0;
        cursor:pointer;
        }

    .faq .faq-title b{
        display:block;
        padding-right:30px;
        line-height:1.5em
        }

    .faq .faq-expand{
        position:absolute;
        display:inline-block;
        width:15px;
        height:15px;
        top:45px;
        right:0;
        }

    .faq .faq-expand:before,
    .faq .faq-expand:after{
        content:"";
        display:block;
        position:absolute;
        width:15px;
        height:1px;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%) rotate(90deg);
        transform:translate(-50%,-50%) rotate(90deg);
        -webkit-transform-origin:center;
        transform-origin:center;
        background:#d3cec9;
        transition:.2s
        }

    .faq .faq-expand:after,
    .faq.active .faq-expand:before{
        -webkit-transform:translate(-50%,-50%) rotate(0deg);
        transform:translate(-50%,-50%) rotate(0deg)
        }

    .faq .faq-content{
        display:none;
        padding:0 0 25px
        }

    .faq .faq-content p{
        margin:0
        }

    /*  6.6 FAQ - END  */

    /*  6.7 PRESS  */
    .press-featured {
        -webkit-justify-content: space-around;
        justify-content: space-around;
        align-items: center;
        padding: 0px 3em 2em 3em;
    }

    .press-featured--content {
        width: 30%;
        height: 80%;
    }

    .press-featured--press {
        font-weight: 700;
    }
    .press-featured--img {
        max-width: 550px;
        width: 100%;
    }

    .press-featured--title {
        font-size: 1.8em;
    }

    .press-featured--link {
        text-decoration: underline;
        text-decoration-color: rgba(9, 102, 85, .3)
    }

    .press-featured--link:hover {
        text-decoration-color: #096655;
    }
    .press-articles {
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    .press-articles__container {
        width: 360px;
        height: 196px;
        display: flex;
        display: -webkit-flex;
        flex-direction: column;
        align-items: center;
        margin-top: 2.5em;
    }

    .press-articles-img__wrap {
        position: relative;
        height: 90px;
    }

    .press-articles__container:hover {
        text-decoration: underline;
    }

    @media screen and (max-width: 600px) {
        .press-featured {
            flex-direction: column;
            padding: 0;
        }

        .press-featured--content {
            width: 100%;
        }
    }

    /*  6.6 PRESS - END  */


    /*  6.7 MISC  */

    #error{
        margin:150px auto;
        text-align:center
        }

    /*  6.7 MISC - END  */

/*  6.0 PAGES - END  */

/*  7.0 ANIMATION  */

/*  7.0 ANIMATION - END  */

/*  5.0 ANIMATION  */

@-webkit-keyframes fadein{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}

@keyframes fadein{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}

.css_fadein{
    opacity:1;
    pointer-events:auto;
    -webkit-animation:fadein .6s ease-out both;
    animation:fadein .6s ease-out both
    }

@-webkit-keyframes fadeinup{
    0%{
        opacity:0;
        -webkit-transform:translateY(60px);
        transform:translateY(60px)
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}

@keyframes fadeinup{
    0%{
        opacity:0;
        -webkit-transform:translateY(60px);
        transform:translateY(60px)
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}

.css_fadeinup{
    pointer-events:auto;
    -webkit-animation:fadeinup .6s ease-out both;
    animation:fadeinup .6s ease-out both
    }

@-webkit-keyframes fadeoutup{
    0%{
        opacity:1;
        -webkit-transform:translateY(30px);
        transform:translateY(30px)
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}

@keyframes fadeoutup{
    0%{
        opacity:1;
        -webkit-transform:translateY(30px);
        transform:translateY(30px)
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(0);
        transform:translateY(0)
    }
}

.css_fadeoutup{
    -webkit-animation:fadeoutup .6s ease-out both;
    animation:fadeoutup .6s ease-out both
    }

@-webkit-keyframes fadeoutdown{
    0%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(30px);
        transform:translateY(30px)
    }
}

@keyframes fadeoutdown{
    0%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    100%{
        opacity:0;
        -webkit-transform:translateY(30px);
        transform:translateY(30px)
    }
}

.css_fadeoutdown{
    -webkit-animation:fadeoutdown .6s ease-out both;
    animation:fadeoutdown .6s ease-out both
    }

/*  5.0 ANIMATION - END  */

.woocommerce-cart .cart-collaterals .cart_totals table {
    display: block!important;
}