/*
 * IMPORTANT NOTE: This file is licensed only for use in providing the MyView Studio service,
 * or any part thereof, and is subject to the MyView Studio Terms and Conditions. You may not
 * copy this file to another platform without MyView Studio's written consent.
*/


html {
    -webkit-font-smoothing: antialiased;
    background-color: #FCF17C;
    scroll-behavior: smooth;
}


/* Basics */


img {
    outline: 0;
    border: none;
    display: block;
    height: auto;
}

p {
    line-height: 20px;
    font-size: 16px;
}

h1, h2, h3, p {
    padding: 0;
    margin: 0;
    color: #1F1C1A;
}

/* Fonts */

@font-face {
    font-family: 'Druk Heavy';
    src: url('./fonts/Druk-Heavy.eot');
    src: url('./fonts/Druk-Heavy.eot?#iefix') format('embedded-opentype'),
         url('./fonts/Druk-Heavy.woff2') format('woff2'),
         url('./fonts/Druk-Heavy.woff') format('woff'),
         url('./fonts/Druk-Heavy.ttf') format('truetype'),
         url('./fonts/Druk-Heavy.otf') format('otf'),
         url('./fonts/Druk-Heavy.svg#Druk') format('svg');
}

/* Containers */

html, body {
    width: 100%;
    margin: 0 auto;
    text-align: left;
    font-family: Georgia, serif;
    font-weight: normal;
}

a {
    text-decoration: none;
    color: #1F1C1A;
}

a[href=""], a:hover, a:visited, a:active {
    color:inherit!important; 
    text-decoration:none!important;
}

.clear {
    clear: both;
}


/* Header */

header {
    width: 1156px;
    height: auto;
    margin: 0 auto;
}

    .h-box {
        width: 100%;
        padding-top: 60px;
        padding-bottom: 250px;
    }

    .logo {
        width: 1156px;
        height: 806px;

        background-image: url(../images/logo.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }


/* Section */

section {
    width: 1156px;
    height: auto;
    margin: 0 auto;
}

    .s-box {
        width: 100%;
    }

    .links {
        margin: 0 auto;
        text-align: center;
        padding-top: 150px;
        padding-bottom: 250px;
        width: 420px;
    }

    .link-box {
        display: table-cell;
    }

        .links-bg {
            background-image: url(../images/hive-bg_btm.png);
            background-position: center -340px;
            background-repeat: no-repeat;
            background-size: cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-origin: content-box;
            animation: bg-move 30s ease infinite;
        }

        @keyframes bg-move {
          0% {
            background-position: center 340px;
          }
          50% {
            background-position: center 160px;
          }
          100% {
            background-position: center 340px;
          }
}

        .links img {
            display: inline-block;
        }

        .pR-50 {
            padding-right: 50px;
        }

        .pL-50 {
            padding-left: 50px;
        }

    .hover-section {
        width: 466px;
        height: 466px;
        margin: 0 auto 360px auto;

        background-image: url(../images/order-now_oval.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }

        .order-now {
            padding-top: 100px;
            padding-bottom: 160px;
            padding-left: 80px;
            padding-right: 80px;
            display: block;
        }

            .bold-text {
                font-weight: bold;
            }

        .jar {
            position: relative;
            top: -100px;
        }

            .jar img {
                margin: 0 auto;
            }

        .hover-section:hover {
            background-image: url(../images/order-now_oval-2.png);
        }

        .hover-section:hover > .order-now h1, .hover-section:hover > .order-now p {
            color: #ffffff !important;
        }

    h1, h2, h3 {
        font-family: 'Druk Heavy';
    }

    h1 {
        line-height: 66px;
        font-size: 64px;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 3px;
    }

    h2 {
        line-height: 118px;
        font-size: 134px;
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 0px;
    }

    h3 {
        line-height: 26px;
        font-size: 26px;
        text-transform: uppercase;
        letter-spacing: 1px;
        padding-bottom: 16px;
    }

    .s-box p {
        line-height: 24px;
    }

        .pT-16 {
            padding-top: 16px;
        }

        .center {
            text-align: center;
        }

    .box-center {
        width: 910px;
        margin: 0 auto;
    }

    .image-box, .text-box {
        display: table-cell;
    }

    .text-box {
        width: 370px;
        vertical-align: middle;
    }

        .pB-150 {
            padding-bottom: 150px;
        }

        .pL-120 {
            padding-left: 120px;
        }

        .pR-120 {
            padding-right: 120px;
        }

        .img-show {
            display: none;
        }

    .map {
        padding-top: 150px;
        padding-bottom: 150px;
    }

        .map img {
            margin: 0 auto;
        }


/* Footer */

footer {
    width: 1156px;
    height: auto;
    margin: 0 auto;
}

    .f-box-1, .f-box-2 {
        float: left;
    }

    .f-box-2 {
        width: 764px;
    }

        .f-col-1, .f-col-2 {
            float: left;
            display: block;
            padding-top: 90px;
            padding-bottom: 89px;
        }

        .f-col-1 {
            width: 196px;
        }

        .f-col-2 {
            width: 274px;
        }

        .f-col-3 {
            width: 118px;
            float: right;
            display: block;
            padding-top: 90px;
        }

        .f-col-3 img {
            float: right;
        }

    .f-name {
        padding-bottom: 16px;
        font-weight: bold;
    }


/* Media Queries */

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

    footer {
        padding-left: 5% !important;
        padding-right: 5% !important;
        width: 90% !important;
    }

    .f-box-2 {
        width: calc(100% - 392px) !important;
    }
}

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

    section, header, .text-box, .h-box img {
        width: 100% !important;
    }

    .s-box, .h-box, .box-center {
        padding-left: 5% !important;
        padding-right: 5% !important;
        width: 90% !important;
        display: block !important;
        float: none !important;
        margin: 0 auto;
    }

    .logo {
        width: 100% !important;
        height: auto;
    }

}

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

    .f-box-1, .f-box-2 {
        width: 100%!important;
    }

    .pT-0 {
        padding-top: 0px !important;
    }
}


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

    .image-box {
        display: block !important;
    }

        .image-box img {
            width: 100% !important;
        }

    .text-box {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .pT-50-TBm {
        padding-top: 50px;
    }

    .img-hide {
        display: none !important
    }

    .img-show {
        display: block!important;
    }
}


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

    .box-center h2 {
        font-size: 100px !important;
        line-height: 86px !important;
    }
}


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

    .link-box {
        display: block !important;
        width: 100% !important;
    }

        .pL-50 {
            padding-left: 0px!important;
        }

        .pR-50 {
            padding-right: 0px!important;
        }

        .pT-50-mobile {
            padding-top: 50px;
        }

    .box-center h2 {
        font-size: 76px !important;
        line-height: 68px !important;
    }

    .map {
        padding-top: 70px;
        padding-bottom: 70px;
    }

        .map img {
            width: 100% !important;
        }

    .show-logo {
        display: block !important;
        width: 100% !important;
        height: auto !important;

        background-image: url(../images/logo-mb.png);
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
    }

    .hide-logo {
        display: none !important;
    }

    .order-now {
        padding-bottom: 170px !important;
    }

    .jar img {
        width: 46% !important;
    }

}

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

    .full-width {
        width: 100% !important;
        height: auto !important;
        padding-left: 0% !important;
        padding-right: 0% !important;
    }

    .order-now {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .hover-section {
        width: 100% !important;
        height: 100% !important;

        background-size: 106% auto;
        -webkit-background-size: 106% auto;
        -moz-background-size: 106% auto;
        -o-background-size: 106% auto;

        margin: 0 auto 40px auto !important;
    }

    .links {
        width: 100% !important;
    }

}

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

    .f-col-1,  .f-col-2, .f-col-3 {
        width: 50% !important;
    }

    .f-col-1 p, .f-col-2 p {
        font-size: 14px !important;
        line-height: 18px !important;
    }


    .lh-24 {
        line-height: 24px!important
    }

}

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

    .box-center h2 {
        font-size: 56px !important;
        line-height: 48px !important;
    }

    .hover-section {
        margin: 0 auto 0px auto !important;
    }

    .order-now {
        padding-bottom: 166px !important;
    }

    .jar {
        top: -120px !important;
    }

}

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

    .order-now {
        padding-top: 80px !important;
    }

    .order-now h1 {
        font-size: 46px !important;
        line-height: 38px !important;
        padding-bottom: 6px !important;
    }

    .jar {
        top: -126px !important;
    }

}

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

    .box-center h2 {
        font-size: 48px !important;
        line-height: 42px !important;
    }

    .breakLine-300 {
        display:block!important; 
        width:100%!important; 
        height:1px!important; 
        line-height:1px!important; 
        min-height:1px!important; 
        max-height:1px!important;
    }


    .hide-300 {
        display: none !important;
    }

    .order-now {
        padding-top: 72px !important;
        padding-bottom: 142px !important;
    }

    .order-now h1 {
        font-size: 42px !important;
        line-height: 38px !important;
    }


    .s-box p {
        font-size: 14px !important;
        line-height: 18px !important
    }


    .jar {
        top: -100px !important;
    }


}