/*==================================================*/

/*    RESPONSIVE                                    */

/*==================================================*/

@media all and (min-width: 900px){

    .mobile{
        display: none !important;
    }

    .desktop{
        display: block !important;
    }

    .desktopContent{
        display: contents !important;
    }

    .desktopFlex{
        display: flex !important;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .desktopGrid{
      display: grid;
      grid-template-columns: 32% 32% 32%;
      grid-gap: 0 2%;
    }

    .gridWideLeft{
      grid-area: auto / 1 / auto / span 2;
    }

    .gridLeft{
      grid-area: auto / 1 / auto / auto;
    }

    .gridRight{
      grid-area: auto / 3 / auto / auto;
    }

    .gridWideRight{
      grid-area: auto / 2 / auto / span 2;
    }

    .gridFull{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        grid-area: auto / 1 / auto / span 3;
    }

    header.homepage{
        background-size: 103% auto;
    }

    header.homepage.sceneA{
        background-image: url("/assets/hero/hero-scene-a.jpg");
    }

    header.homepage .hero #heroText{
        width: 50vw;
        height: 50vw;
    }

    .flex-container.productCards > *{
      order: 1 !important;
      flex-basis: 24%;
    }

    .productCards::after{
      content: "";
      flex: 0 0 49.33%;
      order: 1;
    }

    .product-card .content h4{
      font-size: 24px;
      line-height: 32px;
    }

    .product-card .content h4 sup{
      font-size: 10px;
    }

    .pageSection{
      padding: 0 8.33%;
    }

    .featureSection{
      background: none;
    }

    .featureSection .container{
      position: relative;
      background-color: #00B965;
      background-image: url("/images/illustration/lines-homepage-desktop.jpg");
      background-size: cover;
      background-position: center;
      padding: 64px 0;
      color: #fff;
      margin-top: 0;
      border-radius: 16px;
    }

    .featureSection .container::after{
      content: "";
      display: block;
      clear: both;
    }

    .featureSection video{
      width: 60%;
      margin: 0;
      float: right;
      border-radius: 16px 0 0 16px;
    }

    .featureSection .text{
      position: absolute;
      top: 45%;
      left: 8%;
      transform: translateY(-50%);
      width: 50%;
    }

    .featureSection .text p{
      width: 60%;
    }

    .featureIllustration{
      background-position: top left;
      background-size: cover;
    }

    .featureIllustration::after{
      content: "";
      display: none;
      clear: both;
    }

    .featureIllustration .background{
      display: none;
    }

    .featureIllustration.TreiHamac{
      background-image: url("/images/illustration/tree-two.jpg");
    }

    .featureIllustration.IatiHamac{
      background-image: url("/images/illustration/tree-one.jpg");
    }

    .featureIllustration .foreground{
      position: relative;
      width: 60%;
      float: right;
      top: 0;
      left: 50px;
    }

    .featureIllustration.IatiHamac .foreground{
      float: left;
      left: -50px;
    }

    .featureIllustration .text{
      width: 40%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      padding-left: 8%;
      box-sizing: border-box;
    }

    .featureIllustration.IatiHamac .text{
      right: 0;
      padding-right: 8%;
      padding-left: 0;
    }

    .featureIllustration .text h1{
      font-size: 72px;
      line-height: 72px;
    }

    .featureIllustration .text p{
      font-size: 21px;
      line-height: 32px;
    }

    .featureIllustration .text button{
      font-size: 21px;
      margin-top: 16px;
    }

    .featureIllustration .text button:hover{
      text-decoration: underline;
    }

    .featureIllustration button .icon{
      width: 32px;
      height: 32px;
    }

    .flex-container,
    .info-page .compare.flex-container{
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
    }

    .info-page .videos.flex-container > *{
      flex: 1;
      flex-basis: 0;
    }

    .one-col{flex: 1;}

    .two-col{flex: 2;}

    .four-col{flex: 4;}

    h3{
        font-size: 56px;
        line-height: 56px;
    }

    h4{
        font-size: 36px;
        line-height: 40px;
    }

    h5{
        font-size: 24px;
        line-height: 32px;
    }

    header{
        padding-left: 8.33%;
        padding-right: 8.33%;
        height: 500px;
    }

    header.homepage{
        height: var(--size-homepage-header);
        padding-top: 30px;
    }

    header .menu,
    .mobile-navigation{
        display: none !important;
    }

    .main-navigation{
        display: flex;
    }

    .logo{
        width: 90px;
        height: 130px;
    }

    .logo.homepage{
        width: 160px;
        height: 160px;
    }


    footer{
        padding: 24px 8.33% 0 8.33%;
    }

    footer .flex-container > *{
      flex: 1;
    }

    footer .info{
        margin-right: 16px;
    }

    footer .info:last-child{
        margin-right: 0px;
    }

    footer ul{
        flex-basis: auto !important;
        order: 2;
        flex: 1;
        margin-bottom: 0px;
    }

    footer .logo{
        flex: 1;
        order: 1;
        display: block;
        height: 128px !important;
    }

    footer .social{
        order: 3;
        flex: 3;
    }

    footer .anpc{    
        text-align: right;
    }

    .anti-fixed-container{
        padding: 0px 8.33%;
    }

    .anti-fixed-container.default{
        padding: 0px 8.33%;
        margin-top: var(--size-homepage-header);
    }

    .anti-fixed-container.short{
        margin-top: 500px;
    }

    .page-title{
        height: 130px;
        margin-bottom: 90px;
    }

    .page-title h4{
        margin-top: 64px;
    }

    .page-title h4.long{
        margin-top: 36px;
    }

    .explainer{
        display: flex;
        margin-top: 100px;
    }

    .explainer .title{
        width: 320px;
        font-size: 36px;
        line-height: 36px;
    }

    .explainer .text{
        flex: 1;
        font-size: 16px;
        line-height: 26px;
    }

    .explainer .text li{
        padding: 15px 0;
    }

    .explainer .text li:first-child{
        padding-top: 0;
    }

    .legal-page article{

        font-size: 18px;
        line-height: 28px;

    }

    #askForCookieConsent .container{
        padding: 16px 8.33%;
    }

    #askForCookieConsent button{
        float: right;
        width: 128px;
    }

    .modal.fullscreen{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 999;
    }

    .modal.fullscreen .container{
        display: inline-block;
        position: absolute;
        width: 480px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 32px;
        border-radius: 8px;
        background-color: #fff;
        z-index: 99;
        opacity: 0;
    }

    .modal.fullscreen .container.on{
        opacity: 1;
    }

    .modal.fullscreen .icon{
        float: right;
    }

    .modal.fullscreen .body{
        margin-top: 8px;
        width: 75%;
    }

    .modal.fullscreen button{
        margin-top: 24px;
        width: 100%;
    }



    /*==================================================*/

    /*  CART TOPBAR                                     */

    /*==================================================*/

    body.cartvisible .cart-topbar{
        top: 0px;
    }

    body.cartvisible header{
        top: 60px;
    }

    body.cartvisible footer{
        margin-bottom: 0;
    }

    body:not(.multumim).cartvisible .anti-fixed-container:not(.product-related){
        margin-top: 560px;
    }

    body:not(.multumim).cartvisible .anti-fixed-container.default{
        margin-top: calc(var(--size-homepage-header) + 60px);
    }

    body:not(.multumim).cartvisible .anti-fixed-container.short{
        margin-top: 560px;
    }

    body.cartvisible .product-page{
        margin-top: calc(50vh + 60px) !important;
    }

    body:not(.instant) .cart-topbar,
    body:not(.instant) header{
        transition: top 0.2s;
        -webkit-transition: top 0.2s;
        -moz-transition: top 0.2s;
        -o-transition: top 0.2s;
    }

    body:not(.instant) .anti-fixed-container,
    body:not(.instant) .product-page{
        transition: margin-top 0.2s;
        -webkit-transition: margin-top 0.2s;
        -moz-transition: margin-top 0.2s;
        -o-transition: margin-top 0.2s;

    }


    /*==================================================*/

    /*  PRODUCT                                         */

    /*==================================================*/


    header.product{
        height: 50vh;
    }

    .product-page{
        margin-top: 50vh;
        background-color: #e9e9df;
        border-color: #e9e9df;
    }

    .product-page h1{
        font-size: 72px;
    }

    .product-page .six-col{
        flex: none;
        width: 50vw;
        margin-right: 25%;
    }

    .product-page .three-col{
        position: absolute;
        left: 66.66%;
        margin-right: 20px;
    }

    .product-page .info{
        margin-top: -20px;
        z-index: 9;
    }

    .product-page .info .title{
        padding: 60px 40px 0 40px;
        box-sizing: border-box;
        font-size: 72px !important;
        background-color: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .product-page .info .description{
        padding: 20px 40px 0 40px;
        box-sizing: border-box;
        background-color: #fff;
        font-size: 14px;
        line-height: 22px;
    }

    .product-page .info .controls{
        padding: 20px 40px 40px 40px;
        box-sizing: border-box;
        background-color: #fff;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }

    .product-page .info .controls .add-to-cart{
        margin-top: 20px;
        font-size: 16px;
        height: 50px;
        cursor: pointer;
    }

    .product-page .info .controls .add-to-cart > *{
        padding-top: 18px;
    }

    .product-page .info .controls .add-to-cart .button{
        width: 70%;
    }

    .product-page .info .controls .add-to-cart .price{
        font-size: 18px;
        width: 30%;
    }

    .product-page .info .controls .add-to-cart .price .currency{
        font-size: 11px;
        line-height: 11px;
        margin-top: -2px;
    }

    .product-page .controls .add-to-cart:hover .button{
        background-color: #ffc000;
        border-color: #ffd249;
        color: #32004b;
    }

    .product-page .controls .add-to-cart:hover .price{
        background-color: #fba70d;
        color: #32004b;
    }

    .product-page .controls .add-to-cart:hover .price .currency{
        border-color: #32004b;
    }

    .product-page .gallery img,
    .product-page .avatar{
        margin-top: 40px;
    }


    /*----------------------------------*/


    .controls .add-to-cart.confirmation::after,
    .controls .add-to-cart.outofstock::after{
        margin-top: 18px;
    }

    .controls .add-to-cart.outofstock{
        pointer-events: none;
    }


    /*==================================================*/

    /*  COLOR AND QUANTITY                              */

    /*==================================================*/


    .color-and-quantity{
        border: 1px solid #E6E6E6;
        border-left: none;
        border-radius: 5px;
        display: flex;
        cursor: pointer;
    }

    .color-and-quantity .dropdown{
        width: 70%;
    }

    .color-and-quantity .dropdown div{
      border-radius: 0;
      border-right: 1px solid #E6E6E6;
    }

    .color-and-quantity .dropdown.expanded a:last-child div.current{
        border-bottom-left-radius: 0px;
    }

    .color-and-quantity .dropdown a:nth-last-child(2) div.beforeCurrent{
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-bottom: 1px solid #E6E6E6;
    }

    /*----------------------------------*/

    .color-and-quantity .number{
        width: 30%;
        float: right;
    }

    .color-and-quantity .number .change{
        flex: 0 0 30px;
    }

    .color-and-quantity .number .change > *{
        float: none;
        width: 100%;
        height: 50%;
        padding-top: 0;
        cursor: pointer;
    }

    .color-and-quantity .number .change > *:last-child{
        border-right: 0;
    }


    /*==================================================*/

    /*  INFO                                            */

    /*==================================================*/

    .hammock-details .content{
        padding: 32px;
    }

    .hammock-details.maac{
        margin-top: 0;
        margin-left: 16px;
    }

    .hammock-details .advantage{
        text-align: left;
    }

    .hammock-details .advantage .title{
        font-size: 18px;
    }

    .hammock-details .advantage .icon{
        width: 64px;
        height: 64px;
        margin-top: -8px;
    }

    .hammock-details .advantage .left{
        float: left;
        width: 25%;
    }

    .hammock-details .advantage .right{
        float: right;
        width: 75%;
    }

    .info-page .videos > .video{
        padding-bottom: 28.12%;
    }

    .info-page .videos > .video:first-child{
        margin-right: 16px;
    }


    /*==================================================*/

    /*  CONTACT                                         */

    /*==================================================*/

    .contact-page .contact-info{
        padding-left: 48px;
        padding-right: 48px;
    }

    .contact-page .info,
    .return-page .info{
        padding: 48px;
    }

    .form .container{
        padding: 48px;
    }

    .form .container::after{
        content: "";
        display: block;
        clear: both;
    }

    .form input,
    .form textarea{
        font-size: 16px;
    }

    .form button{
        width: 20%;
        font-size: 18px;
        float: right;
    }


    /*==================================================*/

    /*  CHECKOUT                                        */

    /*==================================================*/

    .checkout-page .product{
        padding: 8px 16px;
        height: 112px;
    }

    .checkout-page .product .image{
        border: none;
        width: 112px;
    }

    .checkout-page .product .info h4{
        font-size: 28px;
        line-height: 28px;
    }

    .checkout-page .product .info .price{
        float: right;
        margin: -21px 16px 0 0;
        font-size: 21px;
    }

    .checkout-page .product .info .price sup{
        vertical-align: super;
    }

    .checkout-page .product .controls{
        display: flex;
    }

    .checkout-page .product .controls div.delete{
        cursor: pointer;
        display: block;
        width: 40px;
        height: 40px;
        margin-left: 16px;
        text-align: center;
        border: 1px solid #EBEBEB;
        border-radius: 20px;
        background-color: #FFFFFF;
    }

    .checkout-page .product .controls .delete .icon{
        width: 20px;
        height: 20px;
        margin-top: 23px;
    }

    .checkout-page .product .controls div.delete:hover{
        background-color: #FFE9E9;
        border-color: #FFE9E9;
    }

    .checkout-page .product .controls .delete:hover .icon.delete{
        background-image: url("/assets/delete-red.svg");
    }

    .checkout-page .product .controls .delete .icon{
        margin-top: 10px;
    }




    .checkout-page .formWrapper{
        display: flex;
    }


    .checkout-page .form{
        flex: 7;
        border-right: 2px solid #F2F2F2;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .checkout-page .form:not(.extended) .destination .left{
        width: 50%;
        float: left;
        box-sizing: border-box;
        padding-right: 20px;
    }

    .checkout-page .form:not(.extended) .destination .right{
        width: 50%;
        float: left;
    }

    .checkout-page .form .billing{
        width: 50%;
        float: left;
        margin-top: 0;
    }

    .checkout-page .form.extended .destination{
            width: 50%;
            float: left;
            box-sizing: border-box;
            padding-right: 20px;
    }

    .checkout-page .extender{
        position: relative;
        left: 50%;
    }

    .checkout-page .total{
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        margin-top: 0px;
    }

    .checkout-page .total ul{
        flex: 1;
    }

    .checkout-page button.primary{
        margin-top: 16px;
    }




    /*==================================================*/

    /*  RECEIPT                                         */

    /*==================================================*/

    
    .receipt .deliveryPostponed{
        margin-left: 32px;
        margin-right: 32px;
        padding: 8px;
        display: flex;
        justify-content: space-between;    
        align-items: center;
    }

    .receipt .deliveryPostponed img{
        display: none;
    }

    .receipt .deliveryPostponed .left{
        background-image: url("../assets/leave-blue-1.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top;
        width: 50%;
        padding: 32px 0;
    }

    .receipt .deliveryPostponed .calendar{
        margin: 0;
    }

    .receipt .deliveryPostponed .right{
        text-align: left;
        padding: 32px;

    }

    .receipt .deliveryPostponed .highlight{
        display: inherit;
        color:  #00B964;
        font-weight: bold;
        margin-bottom: 8px;
    }

    .receipt ul{
        padding: 0 32px;
    }

    .receipt ul li .image{
        width: 56px;
        height: 56px;
        margin-left: 0;
    }

    .receipt ul li h5{
        margin-left: 24px;
    }

    .receipt ul li .subtotal{
        margin-top: 12px;
    }

    .receipt .client-info{
        margin: 40px 32px 0 32px;
        border-bottom: none;
    }

    .receipt .status br{
        display: block;
    }

    .receipt div.barcode{
        order: 2;
        margin: 40px 24px 0 24px;
        padding-bottom: 40px;
    }

    .receipt .barcode .icon{
        display: block;
        height: 100%;
        width: 20%;
        float: right;
    }

    .receipt ul.total .total-icon-container{
        width: 56px;
        height: 56px;
        border-radius: 28px;
        background-color: #ffffff;

    }

    .receipt ul.total .icon.cart-black{
        margin: 15px;
        width: 26px;
        height: 26px;
    }

    .disclaimer{
        font-size: 12px;
        line-height: 16px;
    }

    .receipt .survey p{
        font-size: 24px;
        margin-top: 16px;
    }



    /*==================================================*/

    /*  TRANSPORT                                       */

    /*==================================================*/

    .transport-page .info > div:first-child{
        border: none;
        border-right: 1px solid #E6E6E6;
    }

    .transport-page .info > div{
        padding-left: 48px;
        padding-right: 48px;
    }

    .transport-page .map{
        padding: 160px 0;
    }

    .transport-page .map button{
        padding: 0 48px;
    }

    .transport-page .icon-container{
        width: 56px;
        height: 56px;
        border-radius: 28px;
    }

    .transport-page .icon-container .icon{
        margin: 9px;
        width: 40px;
        height: 40px;
    }

    .transport-page .receipt .icon.plus{
        margin: 18px;
        width: 20px;
        height: 20px;
    }

    .transport-page .receipt .subtotal,
    .multumim .receipt .subtotal{
        font-size: 24px;
    }




    /*==================================================*/

    /*  MULTUMIM                                       */

    /*==================================================*/

    body.multumim .header .container{
        height: 320px;
        padding-top: 128px;
    }

    body.multumim .header p{
        font-size: 20px;
    }

    body.multumim .header .logo{
        height: 120px;
        top: 40px;
        left: 40px;
    }

    body.multumim .header .butterfly{
      height: 250px;
    }

    body.multumim .receipt div.transport{
        margin-left: 24px;
    }

    body.multumim .receipt .transport a{
        font-size: 16px;
    }

    body.multumim .receipt .icon-container{
        width: 56px;
        height: 56px;
        border-radius: 28px;
    }

    body.multumim .receipt .icon.transport{
        margin: 9px;
        width: 40px;
        height: 40px;
    }




    /*==================================================*/

    /*  POPUP                                           */

    /*==================================================*/

    .popup article{
        width: 800px;
        height: 550px;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }

    .popup button{
        width: calc(33% - 20px);
        box-sizing: border-box;
        margin: 0px;
    }

    .popup button.primary{
        left: 66%;
    }

    .popup button.tertiary{
        left: 33%;
        bottom: 20px;
    }

    .popup article .container{
        bottom: 80px;
        padding: 40px 20px;
    }

    .popup article .title{
        font-size: 30px;
        line-height: 30px;
        float: left;
        height: 200px;
        width: 33%;
        margin-bottom: 0px;
        text-align: center;
    }

    .popup article .subtitle{
        font-size: 20px;
        line-height: 26px;
    }

    .popup article .subtitle span{
        display: block;
    }

    .popup article p{
        font-size: 14px;
        line-height: 18px;
    }



    /*==================================================*/

    /*  THANK YOU                                       */

    /*==================================================*/

    .thank-you .message h1{
        color: #fff;
        font-size: 56px;
        line-height: 56px;
    }

    .thank-you .message p{
        font-size: 18px;
        line-height: 24px;
    }




    /*==================================================*/

    /*  TOPBAR CART                                     */

    /*==================================================*/

    .cart-topbar{
        background-color: #191919;
        width: 100%;
        height: 60px;
        position: fixed;
        top: -60px;
        left: 0;
        z-index: 9999;
        color: #fff;
        font-size: 16px;
    }

    .cart-topbar .container{
        padding: 15px 8.33% 0 8.33%;
    }

    .cart-topbar .cart-title{
        width: 200px;
        height: 18px;
        padding-top: 2px;
        font-family: 'Overpass', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        float: left;
        text-transform: capitalize;
    }

    .cart-topbar .cart-title .icon{
        margin: -5px 10px 0 0;
    }

    .cart-topbar button.tertiary{
        padding: 0 20px;
        height: 40px;
        font-size: 16px;
        float: right;
        margin-top: -5px;
    }

    .cart-topbar ul.cart-items{
        float: right;
    }

    .cart-topbar ul.cart-items > li{
        display: inline-block;
        float: right;
        border-right: 1px solid #474747;
        margin-right: 8px;
        padding-right: 8px;
    }

    .cart-topbar ul.cart-items > li:first-child{
        border: none;
    }

    .cart-topbar ul.cart-items > li > *{
        float: left;
    }

    .cart-item-count{
        color: #b2b2b2;
        padding-right: 16px;
        text-align: right;
        background: url(/assets/x-white.png) right 5px no-repeat;
        margin-top: 5px;
    }

    .cart-item-type{
        color: #b2b2b2;
        margin: 5px 4px 0 4px;
    }

    .cart-item-color{
        width: 15px;
        height: 15px;
        margin-top: 7px;
        border-radius: 8px;
    }


    .cart-item-price{
        text-align: right;
        font-family: 'Overpass', sans-serif;
        font-weight: 900;
        color: #fff;
        margin-left: 4px;
    }

    .cart-item-price u{
        text-decoration: none;
        border-bottom: 1px solid #d8d8c7;
        text-transform: uppercase;
        font-size: 9px;
        vertical-align: super;
        margin-left: 3px;
    }

    .cart-item-remove{
        width: 30px;
        height: 30px;
        background: url(/assets/close-white.png) center no-repeat;
        margin: -2px 20px 0 10px;
        cursor: pointer;
    }

    .cart-item-remove:hover{
        background-image: url(/assets/close-white-over.png);
    }

    .cart-topbar.compact .cart-item-price,
    .cart-topbar.compact .cart-item-remove{
        display: none;
    }

    .cart-topbar.compact .cart-item-count{
        background: none;
        padding: 0;
    }

    .cart-topbar.compact li{
        padding-right: 20px;
    }


} /* END MIN-WIDTH: 900PX */


@media all and (min-width: 1400px){


    .product-related{
        display: flex;
        justify-content: space-around;
    }

    .info-page.anti-fixed-container.short > .background{
        top: 300px;
        height: calc(100% - 300px);
    }

    .hammock-details .image{
        height: 300px;
    }

    .hammock-details.maac{
        margin-left: 48px;
    }

    .hammock-details .content{
        padding: 48px;
    }

    .info-page .videos > .video:first-child{
        margin-right: 48px;
    }

    .product-page .logo{
        width: 120px;
        height: 250px;
    }

    .product-page .three-col{
        position: absolute;
        left: 66.66%;
        width: 25vw;
        margin-right: 0px;
    }

    .receipt .status{
        margin: 96px auto;
    }

    body.multumim .anti-fixed-container{
        padding: 0 25%;
    }


} /* END MIN-WIDTH: 1400PX */


@media all and (min-width: 1600px){


  .anti-fixed-container.default{
      margin-top: var(--size-homepage-header)
  }
}