@font-face{
    font-family:"Trade Gothic LT W05 Cond No-_1";
    src:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/TradeGothic/28a6da92-8a64-42a5-9565-914caf257538.woff2) format("woff2"),url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/TradeGothic/6e6d9ee8-cbc5-4670-b243-c90a93b3a8d2.woff) format("woff")
}
@font-face{
    font-family:'Trade Gothic LT W05 Bd Cn No-2';
    src:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/TradeGothic/67fc974b-bcc7-48aa-bff0-15c824085f7d.woff2) format('woff2'),url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/TradeGothic/30bc8000-1637-4079-9dd6-d93c7c1d8245.woff) format('woff')
}
@font-face{
    font-family:'Trade Gothic LT W05BdCnNo-20Ob';
    src:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/TradeGothic/3725dafd-be55-4433-8e45-71211a195633.woff2) format('woff2'),url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/TradeGothic/0b0ac421-f0b9-45bc-82d1-45320b9301cb.woff) format('woff')
}
@font-face{
    font-family:Georgia;
    src:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/Georgia/Georgia.ttf) format('opentype')
}
@font-face{
    font-family:Georgia-Bold;
    src:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/Georgia/Georgia-Bold.ttf) format('opentype')
}
@font-face{
    font-family:Georgia-Italic;
    src:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/Georgia/Georgia-Italic.ttf) format('opentype')
}
@font-face{
    font-family:Georgia-Bold-Italic;
    src:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/fonts/Georgia/Georgia-Bold-Italic.ttf) format('opentype')
}
a{
    text-decoration:none
}
html{
    height:100%;
    font-size: 62.5%; /* 1rem = 10px */
}
body {
  font-size: 1.6rem; /* 1.6 × 10px = 16px */
  height: calc(var(--vh, 1vh) * 100);
  overflow-x: hidden;
}
.tgbc-1{
    font-family:'Trade Gothic LT W05 Cond No-_1'!important;
    font-size:inherit
}
.tgbc-2{
    font-family:'Trade Gothic LT W05 Bd Cn No-2'!important
}
.text-dusk{
    color:#e3d3bd
}
h1,h2,h3{
    font-family:Georgia-Bold
}
.georgia,p{
    font-family:Georgia
}
.georgia-bold{
    font-family:Georgia,Georgia-Bold,serif;
    font-weight:700
}
img{
    max-width:100%
}
a:hover{
    text-decoration:none!important
}
.f20{
    font-size:1.2em
}
@media (max-width:767px){
    .f8-mob{
        font-size:.8em
    }
}
@media (min-width:992px){
    .f11-lg{
        font-size:1.1em
    }
}
.text-dark{
    color:#3a4f58!important
}
.bar{
    background:#fff;
    height:2px;
    width:40px;
    margin-top:40px;
    margin-bottom:40px
}
.bg-red{
    background:#b42132
}
.text-red{
    color:#b42132!important
}
a.text-yellow:hover{
    color:#b42132!important
}
a.text-dusk:hover,a.text-red:hover{
    color:#ffc000!important
}
h2.text-dark.tgbc-2.text-uppercase.line-height-135 {
    font-size: 1.8em;
}
.pt-24{
    font-size:1.2em
}
.pt-30{
    font-size:1.5em;
    line-height:1.35
}
.pt-35{
    font-size:2em;
    line-height:1.35
}
.pt-40{
    font-size:2em;
    line-height:1.35
}
.pt-50{
    font-size:2.3em
}
.pt-60{
    font-size:3em;
    line-height:1.35
}
.pt-120{
    font-size:8em
}
.close.pt-30 span{
    font-size:1.5em;
    margin-right:10px
}
.pt-100{
    font-size:4.5em;
    line-height:.9
}
.pt-250{
    font-size:18em;
    line-height:1
}
.pt-300{
    font-size:14em!important;
    line-height:1!important
}
.line-height-135{
    line-height:1.35!important
}
p span{
    font-size:inherit
}
.offcanvas{
    background-color:#f5f5f5;
    color:#3a4f58
}
.offcanvas a{
    color:#3a4f58;
    text-transform:uppercase;
    font-family:'Trade Gothic LT W05 Cond No-_1'
}
.offcanvas .navigation a{
    padding:8px 0;
    text-decoration:none;
    font-size:1.2em;
    color:#3a4f58;
    display:block;
    transition:.3s;
    border-bottom:1px solid rgba(58,79,88,.25)
}
.navigation-footer{
    font-size:.8em
}
.navigation-credits{
    font-size:.9em;
    font-family:'Trade Gothic LT W05 Cond No-_1'
}
.offcanvas a:hover{
    color:#b42132
}
.offcanvas .closebtn{
    position:absolute;
    top:0;
    right:25px;
    font-size:36px;
    margin-left:50px
}
@media (max-height:450px){
    .offcanvas{
        padding-top:15px
    }
    .offcanvas a{
        font-size:18px
    }
}
.menu-btn{
    font-size:40px;
    cursor:pointer;
    top:70px;
    right:30px;
    z-index:5;
    color:#fff
}
@media (max-width:767px){
    .menu-btn{
        top:18px;
        right:20px
    }
}
.walk-with-us,.we-pair-legacy{
    background:rgba(227,211,189,.8)
}
.walk-with-us{
    backdrop-filter:blur(3px);
    -webkit-backdrop-filter:blur(3px)
}
.vh-100{
    height:100vh;
    height:calc(var(--vh,1vh) * 100)!important
}
.bg-white{
    background:#fff
}
.certified-california{
    position:absolute;
    bottom:0;
    background:#fff;
    width:100%
}
.pt-24percentage{
    font-size:5em;
    line-height:.9
}
.certified-percentage span{
    font-size:10em
}
.certified-percentage sup{
    top:-.6em;
    color:#ffc000;
    font-size:5em
}
.bg-yellow{
    background:#ffc000
}
.text-yellow{
    color:#ffc000
}
.aos-overlay,.aqua-overlay,.white-overlay{
    transform:none!important;
    position:relative;
    overflow:hidden
}
.aos-overlay::after,.aos-overlay::before,.aqua-overlay::before,.white-overlay::before{
    transform:none!important;
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    z-index:0;
    transition:background 1s
}
.black-overlay::before{
    background:rgba(0,0,0,.6);
    backdrop-filter:blur(3px) opacity(1);
    -webkit-backdrop-filter:blur(3px) opacity(1);
    transition:background 1s,backdrop-filter 4s linear
}
.water .aos-overlay:not(.text-white)::before{
    height:325vh;
    height:calc(var(--vh,1vh) * 325)
}
.carbon.aos-overlay::before,.energy.aos-overlay::before{
    height:400vh;
    height:calc(var(--vh,1vh) * 400)
}
.aqua-overlay::before{
    background:linear-gradient(#fff,#beeaf8);
    opacity:.8
}
.white-overlay::before{
    background:rgba(255,255,255,.8)
}
.no-blur::before{
    backdrop-filter:none;
    -webkit-backdrop-filter:none
}
#scene1::before{
    transform:none!important;
    content:'';
    position:absolute;
    width:100%;
    height:200vh;
    height:calc(var(--vh,1vh) * 200);
    z-index:0;
    background:linear-gradient(0deg,rgba(0,0,0,.7),rgba(0,0,0,0))
}
.mix-difference{
    mix-blend-mode:difference
}
.text-dark-shadow{
    color:#fff;
    text-shadow:3px 3px 5px #222
}
.text-light-shadow{
    color:#000;
    text-shadow:3px 3px 5px #ddd
}
.png-dark-shadow{
    -webkit-filter:drop-shadow(3px 3px 5px #222);
    filter:drop-shadow(3px 3px 5px #222)
}
.png-light-shadow{
    -webkit-filter:drop-shadow(3px 3px 5px #ddd);
    filter:drop-shadow(3px 3px 5px #ddd)
}
a.redlink{
    text-decoration:underline!important
}
a.redlink:hover{
    color:#b42132!important
}
a.outlink{
    padding-right:.55em
}
a.outlink::after{
    content:'';
    background:no-repeat center url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23333%22%20stroke-dasharray%3D%221.1%22%20d%3D%22M.5.5h9v9h-9z%22%2F%3E%3Cpath%20stroke%3D%22%23333%22%20stroke-linecap%3D%22round%22%20d%3D%22M7.6%202.33L2.33%207.6M7.6%202.33V7m0-4.67H3%22%2F%3E%3C%2Fsvg%3E);
    vertical-align:middle;
    width:.55em;
    height:.55em;
    min-width:10px;
    min-height:10px;
    display:inline-block;
    margin:0 -.55em .05em .2em
}
.z2{
    z-index:2
}
.header-logo{
    left:100px;
    top:80px;
    z-index:5;
    width:100px;
    transition:all .3s
}
.header-logo img{
    width:100%;
    height:auto
}
@media (max-width:767px){
    .overflow-sm-hidden{
        overflow:hidden
    }
    .header-logo{
        left:20px;
        top:20px;
        transition:all .3s;
        width:50px
    }
}
@media (min-width:768px){
    .award-listing .col-md-6:first-child{
        border-right:1px solid #fff!important
    }
    .award-listing .col-md-6:last-child{
        border-left:1px solid #fff!important
    }
    .carbon .left,.regenerative-farming-explore .left,.water .left{
        border-right:1px solid #b42132!important;
        padding-right:60px
    }
    .carbon .right,.regenerative-farming-explore .right,.water .right{
        border-left:1px solid #b42132!important;
        padding-left:60px
    }
    .energy .left{
        border-right:2px solid #b42132!important;
        padding-right:60px
    }
    .energy .right{
        padding-left:60px
    }
}
.barrel-container{
    position:relative
}
.barrel1{
    position:absolute;
    top:-290px;
    left:40%
}
.barrel2{
    position:absolute;
    top:-160px;
    left:170px
}
.barrel3{
    position:absolute;
    top:-95px;
    left:320px
}
.barrel4{
    position:absolute;
    top:60px;
    left:90px
}
.barrel5{
    position:absolute;
    top:130px;
    right:0
}
.barrel{
    max-width:300px
}
svg.radial-progress{
    height:auto;
    max-width:600px;
    padding:1em;
    transform:rotate(-90deg);
    width:100%;
    position:relative
}
.progess-bar-inner{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%)
}
svg.radial-progress circle{
    fill:transparent;
    stroke:#ffc000;
    stroke-dashoffset:219.91148575129;
    stroke-width:3
}
svg.radial-progress circle.incomplete{
    opacity:0
}
svg.radial-progress circle.complete{
    stroke-dasharray:219.91148575129
}
svg.radial-progress text{
    fill:#fff;
    text-anchor:middle
}
.big-footsteps-container{
    position:relative;
    overflow:hidden
}
.intro-footstep1{
    position:absolute;
    top:0;
    right:35%
}
.intro-footstep2{
    position:absolute;
    top:740px;
    right:37.6%
}
.intro-footstep3{
    position:absolute;
    top:1480px;
    right:40.3%
}
.intro-footstep4{
    position:absolute;
    top:2217px;
    right:49.8%
}
.white-bg-footsteps{
    position:relative;
    overflow:hidden
}
.short-footsteps{
    position:absolute;
    top:-434px;
    right:17%
}
.long-footsteps{
    position:absolute;
    top:380px;
    right:12%;
    transform:rotateY(180deg)
}
.extra-footsteps1{
    position:absolute;
    top:1060px;
    right:18.5%;
    transform:rotateY(180deg)
}
.extra-footsteps2{
    position:absolute;
    top:1615px;
    right:20.6%;
    transform:rotateY(180deg)
}
.energy-41-animaion{
    position:relative
}
.energy-footstep1{
    position:absolute;
    top:68vh;
    right:45%;
    transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
    -o-transform:rotate(-15deg)
}
.energy-medium,.energy-mobile{
    display:none
}
.carbon-50-animaion{
    position:relative
}
.carbon-footstep1{
    position:absolute;
    top:68vh;
    right:43%;
    transform:rotate(-15deg);
    -webkit-transform:rotate(-15deg);
    -moz-transform:rotate(-15deg);
    -ms-transform:rotate(-15deg);
    -o-transform:rotate(-15deg)
}
.carbon-medium,.carbon-mobile{
    display:none
}
@media (min-width:768px){
    .water-pool-center,.water-pool-left,.water-pool-right{
        display:none
    }
}
@media (max-width:767px){
    .water-pool-center,.water-pool-left,.water-pool-right{
        height:100vh;
        height:calc(var(--vh,1vh) * 100);
        width:5px;
        position:absolute;
        top:0;
        z-index:-1
    }
    .water-pool-left{
        left:5%
    }
    .water-pool-center{
        left:calc(50% - 2px)
    }
    .water-pool-right{
        left:95%
    }
    .water-pool-bottom,.water-pool-top{
        display:none
    }
    .hero>video+.container>.mb-5 img{
        max-width:200px;
        height:auto
    }
    .certified-california img{
        max-width:220px!important
    }
    .award-listing .col-md-6:nth-of-type(2){
        margin-top:270px
    }
    .certified-california .col-md-6:nth-of-type(1){
        bottom:550px;
        position:absolute;
        left:0;
        background:#fff;
        padding:20px 0
    }
    .certified-california .col-md-6:nth-of-type(2){
        bottom:0;
        position:absolute;
        left:0;
        background:#fff;
        padding:10px 0
    }
    .award-listing.mt-5{
        margin-top:0!important
    }
    .award-wrapper{
        height:1100px!important
    }
    .award-listing .col-md-6:nth-of-type(1){
        position:absolute;
        left:0;
        top:100px
    }
    .award-listing .col-md-6:nth-of-type(2){
        position:absolute;
        left:0;
        top:370px
    }
    .award-wrapper>.container-fluid{
        padding-bottom:150px!important
    }
    .footer .col-md-4 a{
        margin-top:7px;
        margin-bottom:7px!important;
        display:block
    }
    .water .d-flex.relative.text-white.vh-100.bg-white *{
        text-align:left
    }
    .water p.tgbc-2.pt-100{
        margin-bottom:15px!important;
        display:block
    }
    .water-pool-bottom,.water-pool-top{
        height:5px
    }
    .hero .justify-content-center.align-self-center,.intro-stat .justify-content-center.align-self-center,.land-preservation-grow .justify-content-center.align-self-center,.regenerative-farming .justify-content-center.align-self-center,.tgbc-2.pt-40.text-uppercase{
        max-width:80%;
        margin:0 auto;
        padding-left:0;
        padding-right:0
    }
    .water .justify-content-center.align-self-center{
        text-align:center
    }
    .water .justify-content-center.align-self-center .pt-300{
        font-size:20em!important;
        margin-bottom:35px;
        margin-top:22px!important
    }
    .water .justify-content-center.align-self-center .pt-100{
        font-size:5em
    }
    .water .aqua-overlay h2.pt-300{
        margin-top:12px!important
    }
    .water div[data-aos=fade-up] .certified-percentage{
        margin-top:25px
    }
    .certified-percentage,.counter{
        letter-spacing:-2px
    }
    .energy .justify-content-center.align-self-center .pt-60{
        font-size:3.5em
    }
    .justify-content-center.align-self-center .pt-60{
        font-size:4em
    }
    .row>*{
        padding-left:30px;
        padding-right:30px
    }
    .region-modal .row>*,.row.region-modal>*{
        padding:0
    }
    .barrels h2:first-child{
        margin-top:30px!important
    }
    .barrels h2{
        text-align:right;
        max-width:100%!important
    }
    .barrels p{
        text-align:right;
        margin:15px 0 0 0!important
    }
    .years *{
        text-align:center
    }
    .regenerative-farming p.georgia.pt-60::after,.years .text-md-end p:last-child::after{
        background:#b42132;
        content:'';
        display:block;
        height:2px;
        width:56px;
        margin:40px auto
    }
    .reduced .pt-100{
        font-size:5em
    }
    .reduced .pt-100::after{
        background:#b42132;
        content:' ';
        display:block;
        height:2px;
        width:40px;
        margin:25px 0
    }
    .reduced .text-white{
        max-width:100%!important
    }
    .by2030 .pt-100,.by2050 .pt-100{
        font-size:5em
    }
    .by2030 .pt-40,.by2050 .pt-40{
        font-size:3em;
        max-width:100%!important
    }
    .by2030 .pt-100::after,.by2050 .pt-100::after{
        background:#b42132;
        content:' ';
        display:block;
        height:2px;
        width:40px;
        margin:25px 0
    }
    .by2030 .text-center.mt-10.row,.by2050 .text-center.mt-10.row{
        margin:0!important;
        text-align:left!important;
        max-width:100%!important
    }
    .by2030 .col-md-8.mx-auto,.by2050 .col-md-8.mx-auto{
        padding-left:20px!important;
        padding-right:20px!important
    }
    .by2030 p.text-dark.georgia,.by2050 p.text-dark.georgia{
        margin:20px 0 0 0!important
    }
    .award-wrapper .certified-california.bg-white{
        background:0 0!important
    }
    .pt-300{
        font-size:12em!important;
        line-height:1!important
    }
    .pt-60{
        font-size:3em;
        line-height:1.35
    }
    .award-wrapper .certified-percentage span{
        font-size:1.2em
    }
    .aqua-overlay .col-auto{
        width:100%;
        display:block;
        float:none;
        clear:both
    }
    .barrel{
        max-width:200px
    }
}
.land-preservation-grow{
    background:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/images/bg-mobile/land-preservation.jpg)
}
.lprf-modal .modal-header{
    border:none
}
.lprf-modal .modal-header button{
    margin-left:0;
    color:#b42132!important;
    opacity:1
}
.lprf-modal .modal-body{
    padding:20px 80px
}
@media (max-width:991px){
    .lprf-modal .modal-body{
        padding:20px
    }
    .modal-dialog{
        max-width:600px!important
    }
    .modal-dialog .slick-slide .col-md-4,.modal-dialog .slick-slide .col-md-8{
        width:100%!important;
        float:none!important;
        clear:both!important;
        border:none!important;
        padding:0 12px!important
    }
}
ul.lprf-slick{
    padding-left:0
}
.slick-slide{
    outline:0
}
.slick-dots{
    bottom:-25px;
    left:0
}
.slick-dots li button,.slick-dots li button::before{
    width:15px!important;
    height:15px!important;
    padding:0!important;
    border-radius:50%
}
.slick-dots li button::before{
    border:2px solid #b42132;
    opacity:1;
    color:#fff;
    font-size:0
}
.slick-dots li.slick-active button::before{
    background:#b42132
}
.lprf-modal .right{
    border-left:2px solid #b42132;
    padding-left:30px
}
.lprf-modal .right p{
    margin-bottom:0
}
#yellow-box{
    position:relative;
    overflow:hidden
}
#regenerative-farming{
    z-index:1
}
#yellow-stats{
    z-index:3
}
.yellow-box{
    position:absolute;
    z-index:2
}
.yellow-bottom-box1 img,.yellow-top-box1 img{
    width:100%
}
.yellow-top-box1{
    top:-1388px;
    left:0;
    width:100%;
    height:1384px
}
.yellow-bottom-box1{
    bottom:-1388px;
    left:0;
    width:100%;
    height:1384px
}
.full-yellow{
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#ffc000
}
.water-pool-top{
    margin-bottom:80px
}
.water-pool-bottom{
    margin-top:80px
}
.mt-10,.my-10{
    margin-top:6rem!important
}
.mt-20,.my-20{
    margin-top:12rem!important
}
.cars{
    text-align:center
}
.cars img{
    max-width:none;
    height:1.7rem
}
.car-line-top{
    margin-bottom:5rem
}
.car-line-bottom{
    margin-top:5rem
}
.car-line-bottom,.car-line-top{
    overflow:hidden
}
.car-line-bottom>div:nth-child(even),.car-line-top>div:nth-child(even){
    width:105%!important;
    transform:translateX(-25px)
}
.car-line-bottom>div:nth-child(odd),.car-line-top>div:nth-child(odd){
    width:105%!important
}
.emission .percentage{
    color:#a41126;
    font-weight:700;
    position:absolute;
    left:-10px;
    font-family:'Trade Gothic LT W05 Bd Cn No-2'!important;
    font-size:1.2em;
    line-height:1.2
}
.emission p{
    padding-left:40px;
    position:relative;
    margin-top:1.3rem;
    margin-bottom:15px;
    font-size:2.1em
}
@media (max-width:576px){
    .emission p{
        margin-top:1rem;
        margin-bottom:.2rem;
        font-size:1.8em
    }
}
.closing-bottle{
    position:absolute;
    top:-30%;
    left:0
}
@media (max-width:768px){
    .closing-bottle{
        left:50%;
        width:70%
    }
}
@media (min-width:768px){
    .closing-bottle{
        top:-35%;
        max-width:110%
    }
}
.footer{
    background:#1d2224
}
.offcanvas-header .btn-close{
    font-size:20px;
    color:#3a4f58;
    box-shadow:none!important;
    position:absolute;
    top:25px;
    right:25px
}
.vh-75{
    min-height:75vh
}
.lprf-modal .modal-header button{
    background:0 0!important;
    border:none
}
.water .certified-percentage{
    line-height:.7!important
}
#title-video{
    position:fixed;
    z-index:-999;
    overflow:hidden;
    background-size:cover;
    min-width:100%;
    min-height:100vh;
    min-height:calc(var(--vh,1vh) * 100)
}
.bg-fixed{
    background-size:cover;
    background-position:center
}
@media (min-width:768px){
    body:not(.safari) .bg-fixed{
        background-attachment:fixed
    }
}
@media (min-width:992px){
    .bg-fixed{
        background-attachment:fixed
    }
}
body.no-backdrop .modal-backdrop{
    display:none!important
}
.modal-backdrop:nth-child(2n-1){
    opacity:0
}
.autohide{
    position:fixed;
    z-index:1030
}
.scrolled-down{
    transform:translateY(-200px);
    transition:all .3s ease-in-out
}
.scrolled-up{
    transform:translateY(0);
    transition:all .3s ease-in-out
}
@media (max-width:768px){
    .pt-mb-22{
        font-size:1.85em!important;
        line-height:1.35
    }
    .pt-mb-36{
        font-size:3em!important;
        line-height:1.35
    }
    .pt-mb-45{
        font-size:3.75em!important;
        line-height:1.35
    }
    .mt-mb-5{
        margin-top:3rem!important
    }
    .mb-text-center{
        text-align:center!important;
        max-width:100%!important
    }
}
@media (max-width:768px){
    .bottle{
        position:absolute;
        top:20%;
        width:35%;
        left:53%;
        z-index:5
    }
}
@media (min-width:2100px){
    .short-footsteps{
        right:28%
    }
    .long-footsteps{
        top:280px;
        right:26%
    }
    .extra-footsteps1{
        right:31%;
        top:965px
    }
    .extra-footsteps2{
        right:32.5%;
        top:1515px
    }
}
@media (max-width:1699px){
    .intro-footstep2{
        right:38%
    }
    .intro-footstep3{
        right:41%
    }
    .long-footsteps{
        top:100px
    }
    .extra-footsteps1{
        right:20%;
        top:785px
    }
    .extra-footsteps2{
        right:22.6%;
        top:1342px
    }
    .energy-footstep1{
        top:73vh
    }
    .energy-desktop{
        display:none
    }
    .energy-mobile{
        display:none
    }
    .energy-medium{
        display:block
    }
    .carbon-desktop,.carbon-mobile{
        display:none
    }
    .carbon-medium{
        display:block
    }
    .carbon-footstep1{
        top:77vh
    }
}
@media (max-width:1399px){
    .barrel{
        max-width:220px
    }
    .barrel4{
        left:140px
    }
    .barrel5{
        right:20px;
        top:140px
    }
    .yellow-top-box1{
        top:-1388px;
        height:884px
    }
    .intro-footstep2{
        right:38.5%
    }
    .intro-footstep3{
        right:42%
    }
    .extra-footsteps1{
        right:20.5%
    }
    .extra-footsteps2{
        right:23.6%
    }
    .energy-desktop,.energy-medium{
        display:none
    }
    .energy-mobile{
        display:block
    }
    .energy-footstep1{
        top:72vh
    }
    .carbon-desktop,.carbon-medium{
        display:none
    }
    .carbon-mobile{
        display:block
    }
    .carbon-footstep1{
        top:74vh
    }
}
@media (max-width:1300px){
    .intro-footstep2{
        right:39%
    }
    .intro-footstep3{
        right:43%
    }
    .extra-footsteps1{
        right:22%
    }
    .extra-footsteps2{
        right:25%
    }
    .energy-desktop,.energy-medium{
        display:none
    }
    .energy-mobile{
        display:block
    }
    .energy-footstep1{
        top:73vh
    }
    .carbon-desktop{
        display:none
    }
    .carbon-medium{
        display:none
    }
    .carbon-mobile{
        display:block
    }
    .carbon-footstep1{
        top:75vh
    }
}
@media (max-width:1199px){
    .barrel{
        max-width:150px
    }
    .barrel1{
        left:55%;
        top:-155px;
        max-width:80px
    }
    .barrel2{
        top:-55px;
        left:155px;
        max-width:120px
    }
    .barrel3{
        left:255px;
        top:10px;
        max-width:120px
    }
    .barrel4{
        top:160px;
        max-width:150px
    }
    .barrel5{
        top:220px;
        max-width:170px
    }
    .yellow-top-box1{
        top:-870px;
        height:950px
    }
    .yellow-bottom-box1{
        bottom:-865px;
        height:950px
    }
    .intro-footstep2{
        right:40%
    }
    .intro-footstep3{
        right:45%
    }
    .extra-footsteps1{
        right:23%
    }
    .extra-footsteps2{
        right:26.5%
    }
    .energy-desktop{
        display:none
    }
    .energy-mobile{
        display:block
    }
    .carbon-desktop{
        display:none
    }
    .carbon-medium{
        display:none
    }
    .carbon-mobile{
        display:block
    }
    .carbon-footstep1{
        top:75vh
    }
}
@media (max-width:991px){
    .barrel5{
        top:300px;
        right:-21px
    }
    .yellow-top-box1{
        top:-580px;
        height:750px
    }
    .yellow-bottom-box1{
        bottom:-850px;
        height:850px
    }
    .short-footsteps{
        top:-370px
    }
    .intro-footstep2{
        right:41%
    }
    .intro-footstep3{
        right:47%
    }
    .extra-footsteps1{
        right:28%
    }
    .extra-footsteps2{
        right:33%
    }
    .energy-footstep1{
        top:80vh
    }
    .carbon-footstep1{
        top:72vh
    }
    .energy-desktop{
        display:none
    }
    .energy-mobile{
        display:none
    }
    .energy-medium{
        display:block
    }
    .carbon-desktop,.carbon-mobile{
        display:none
    }
    .carbon-medium{
        display:block
    }
    .carbon-footstep1{
        top:74vh
    }
}
@media screen and (max-width:767px){
    .barrel1{
        top:-340px;
        max-width:60px
    }
    .barrel2{
        top:-305px;
        max-width:100px
    }
    .barrel3{
        top:-265px;
        max-width:100px
    }
    .barrel4{
        top:-170px;
        left:100px
    }
    .barrel5{
        top:-100px;
        right:-5px
    }
    .car-line-bottom,.car-line-top{
        transform:scale(1.4)
    }
    .intro-footstep2{
        right:43%
    }
    .intro-footstep3{
        right:51%
    }
    .long-footsteps{
        top:300px
    }
    .extra-footsteps1{
        right:29%;
        top:986px
    }
    .extra-footsteps2{
        right:34%;
        top:1550px
    }
    .energy-desktop,.energy-medium{
        display:none
    }
    .energy-mobile{
        display:block
    }
}
@media (max-width:575px){
    .land-preservation-grow .certified-percentage span{
        font-size:1.3em;
        line-height:70%
    }
    .land-preservation-grow .certified-percentage sup{
        font-size:70%
    }
    .intro-stat .certified-percentage span{
        font-size:1.7em
    }
    .intro-stat .certified-percentage sup{
        font-size:90%
    }
    .progess-bar-inner .certified-percentage{
        margin-bottom:5px
    }
    svg.radial-progress{
        max-width:350px
    }
    .progess-bar-inner{
        top:47%
    }
    .barrel1{
        left:25%;
        top:-330px;
        max-width:60px
    }
    .barrel2{
        top:-290px;
        left:-15px;
        max-width:100px
    }
    .barrel3{
        top:-260px;
        left:26%;
        max-width:100px
    }
    .barrel4{
        top:-140px;
        left:-50px;
        max-width:170px
    }
    .barrel5{
        max-width:200px;
        right:-45px
    }
    .yellow-top-box1{
        top:-480px;
        height:400px
    }
    .yellow-bottom-box1{
        bottom:-780px;
        height:550px
    }
    .intro-footstep2{
        right:46%
    }
    .intro-footstep3{
        right:57%
    }
    .extra-footsteps1{
        right:33%
    }
    .extra-footsteps2{
        right:40%
    }
    .energy-desktop{
        display:none
    }
    .energy-mobile{
        display:block
    }
    .carbon-desktop,.carbon-medium{
        display:none
    }
    .carbon-mobile{
        display:block
    }
}
@media (max-width:420px){
    .yellow-top-box1{
        top:-330px;
        height:100px
    }
    .yellow-bottom-box1{
        bottom:-1850px;
        height:1000px
    }
    .intro-footstep2{
        right:47%
    }
    .intro-footstep3{
        right:60%
    }
    .long-footsteps{
        right:-15%
    }
    .extra-footsteps1{
        right:15%
    }
    .extra-footsteps2{
        right:24%
    }
    .energy-footstep1{
        right:38%;
        top:83vh;
        transform:rotate(-7deg);
        -webkit-transform:rotate(-7deg);
        -moz-transform:rotate(-7deg);
        -ms-transform:rotate(-7deg);
        -o-transform:rotate(-7deg)
    }
    .carbon-footstep1{
        right:32%;
        top:77vh;
        transform:rotate(-7deg);
        -webkit-transform:rotate(-7deg);
        -moz-transform:rotate(-7deg);
        -ms-transform:rotate(-7deg);
        -o-transform:rotate(-7deg)
    }
}
@media (max-width:380px){
    .extra-footsteps1{
        right:33%
    }
    .extra-footsteps2{
        right:40%
    }
    .yellow-top-box1{
        top:-330px;
        height:30px
    }
    .yellow-bottom-box1{
        bottom:-2100px;
        height:1100px
    }
}
.big-water{
    position:absolute;
    left:70%;
    z-index:-1;
    top:10%
}
.small-water-1{
    position:absolute;
    left:20%;
    z-index:-1;
    max-width:90px!important;
    top:35%;
    opacity:.5
}
.small-water-2{
    position:absolute;
    left:48%;
    z-index:-1;
    max-width:90px!important;
    top:80%;
    opacity:.5
}
.small-tree-1{
    position:absolute;
    left:5%;
    z-index:-1;
    max-width:80px!important;
    top:25%;
    opacity:.5
}
.small-tree-2{
    position:absolute;
    left:85%;
    z-index:-1;
    max-width:90px!important;
    top:10%;
    opacity:.5
}
.big-tree{
    position:absolute;
    left:60%;
    z-index:-1;
    max-width:150px!important;
    bottom:0;
    opacity:.5
}
.bird-2{
    position:absolute;
    left:40%;
    z-index:-1;
    max-width:70px!important;
    top:40%
}
.bird-1{
    position:absolute;
    left:10%;
    z-index:-1;
    max-width:150px!important;
    top:65%
}
.forest,.forest-overlay{
    opacity:.8;
    overflow:hidden;
    position:absolute;
    bottom:0;
    max-width:120%;
    margin:0 10% 0 -10%
}
.forest-overlay{
    opacity:1;
    mix-blend-mode:overlay
}
.forest{
    filter:drop-shadow(3px 4px 6px #006400)
}
@media (max-width:576px){
    .forest,.forest-overlay{
        max-width:none;
        margin:0;
        width:500%;
        left:-200%;
        bottom:-70px
    }
}
#intro-splash .modal-content{
    border-radius:0;
    background-color:rgba(255,255,255,.9);
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
    padding:10px
}
@media (min-width:768px){
    #intro-splash .modal-content{
        padding:50px 20px
    }
}
#intro-splash .modal-content .text-dark a{
    color:#3a4f58;
    font-size:inherit
}
#intro-splash .modal-content .close{
    background:#3a4f58;
    border:none;
    color:#fff;
    font-size:22px;
    text-decoration:none;
    padding:18px 60px;
    font-weight:700;
    letter-spacing:2px;
    transition:background .3s
}
@media (max-width:767px){
    #intro-splash .modal-content .close{
        font-size:18px;
        padding:15px 48px
    }
}
#intro-splash .modal-content .close:hover{
    background:#b42132;
    transition:background .3s
}
.iuyu{
    width:250px;
    height:450px;
    display:flex;
    margin:17vh auto 0;
    position:relative
}
.wind{
    width:250px;
    height:200px;
    display:flex;
    overflow:hidden
}
.anim{
    width:70px;
    height:70px;
    position:absolute;
    top:34px;
    left:94px;
    background:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/images/loader/wind.png)!important;
    background-size:100% 100%!important;
    overflow:hidden;
    display:flex;
    text-align:center;
    -webkit-animation:rotation 1.5s infinite linear;
    -moz-animation:rotation 1.5s infinite linear;
    animation:rotation 1.5s infinite linear
}
@keyframes rotation{
    from{
        -webkit-transform:rotate(0)
    }
    to{
        -webkit-transform:rotate(359deg)
    }
}
@-webkit-keyframes rotation{
    from{
        -webkit-transform:rotate(0)
    }
    to{
        -webkit-transform:rotate(359deg)
    }
}
@-moz-keyframes rotation{
    from{
        -webkit-transform:rotate(0)
    }
    to{
        -webkit-transform:rotate(359deg)
    }
}
@-o-keyframes rotation{
    from{
        -webkit-transform:rotate(0)
    }
    to{
        -webkit-transform:rotate(359deg)
    }
}
.brand_svg{
    overflow:hidden;
    width:100%;
    position:absolute;
    top:162px;
    text-align:center
}
.brand_svg h3{
    color:#777;
    font-size:20px;
    font-family:Georgia
}
.brand_svg img{
    width:100%;
    margin-top:7rem;
    opacity:.6
}
.page-loader{
    width:100%;
    height:100vh;
    height:calc(var(--vh,1vh) * 100);
    position:fixed;
    background:#f5f5f5;
    z-index:9999
}
body.page-loading{
    overflow:hidden
}
body.page-loading,body.page-loading *{
    pointer-events:auto;
    touch-action:auto
}
body.page-loading video{
    visibility:hidden
}
#vine_animation{
    margin-bottom:-290px
}
#vine_animation .vine{
    fill:none;
    stroke:#fff;
    stroke-width:1;
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    animation:vine 10s linear infinite
}
#vine_animation .leaf{
    fill:none;
    stroke:#fff;
    stroke-width:1;
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    animation:leaf 10s linear infinite
}
@keyframes vine{
    from{
        stroke-dashoffset:1000
    }
    60%{
        stroke-dashoffset:0
    }
    to{
        stroke-dashoffset:0
    }
}
@keyframes leaf{
    from{
        stroke-dashoffset:1000
    }
    15%{
        stroke-dashoffset:1000
    }
    50%{
        stroke-dashoffset:950
    }
    to{
        stroke-dashoffset:950
    }
}
#glass_animation{
    width:67px;
    height:600px;
    position:relative;
    margin:-180px auto -180px;
    text-align:center;
    overflow:hidden
}
#glass_animation img{
    height:100%
}
#glass_animation .cup{
    position:absolute;
    left:14px;
    bottom:7px;
    transform:translate(-50%,-50%);
    width:23px;
    height:28px;
    border-top:2px solid transparent;
    border-radius:15px;
    background:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/images/wine/wave.png);
    background-position:0 10px;
    background-repeat:repeat-x;
    animation:filling 8s linear infinite
}
@keyframes filling{
    25%{
        background-position:50px 1px
    }
    50%{
        background-position:75px -1px
    }
    80%{
        background-position:55px -4px
    }
    100%{
        background-position:150px 10px
    }
}
.line_drop{
    position:absolute;
    left:0;
    top:49px;
    width:27px;
    height:502px;
    opacity:.4;
    background:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/images/wine/line_drop.png)
}
.bottol{
    position:absolute;
    left:18px;
    top:13px;
    transform:rotate(3deg);
    width:49px;
    height:45px;
    background:url(https://video-content-delivery.s3-us-west-1.amazonaws.com/sfcc/kj/future/assets/images/wine/bottle.png);
    background-position:0 -10px;
    background-repeat:repeat-x
}
.drop_lines{
    position:absolute;
    margin:0;
    left:-8px;
    width:42px
}
.drop_lines svg{
    height:600px;
    opacity:.5
}
.drop_lines .mask{
    fill:none;
    stroke:#fff;
    stroke-width:4;
    stroke-dasharray:1000;
    stroke-dashoffset:1000;
    animation:dash 8s linear infinite
}
@keyframes dash{
    from{
        stroke-dashoffset:3000
    }
    20%{
        stroke-dashoffset:2000
    }
    70%{
        stroke-dashoffset:2000
    }
    90%{
        stroke-dashoffset:1000
    }
    to{
        stroke-dashoffset:1000
    }
}
@-moz-document url-prefix(){
    .bottol{
        top:16px
    }
    .line_drop{
        top:52px
    }
    .cup{
        bottom:10px
    }
}
@media (max-width:812px){
    #glass_animation{
        margin-top:-85px;
        margin-bottom:-80px
    }
    .line_drop{
        left:0
    }
    .bottol{
        left:18px;
        transform:rotate(359deg)
    }
    .cup{
        width:24px;
        height:28px;
        left:14px
    }
    .drop_lines{
        left:-8px
    }
}
.animation-stop *{
    animation:none!important
}
.toolbar a{
    font-size:1em!important
}
.dialog-off-canvas-main-canvas{
    overflow-x:hidden
}
.modal img{
    height:auto!important
}
