/* Body */
body{ background:$white; font-family:$sans; font-weight:300; font-size:15px; color:$grey; line-height:1.4;}


/* Header */
#header{ background: $white; position: sticky; top: 0; left: 0; right: 0; z-index:99; backface-visibility:hidden; color: $black; @include transition();

    .header{padding: 20px 0;
        &-inner{display: flex; justify-content: space-between; align-items: center;}
        &-left{flex-shrink: 0;}
        &-right{display: flex; align-items: center; flex-shrink: 0;
            .btn{margin-left: 30px;}
        }
    }
    .logo{ display: inline-block; position: relative;
        img{max-height:70px; width:auto;}
    }
    .btn-phone, .btn-menu{display: none;}

    .btn-search{margin-left: 15px; font-size: 22px; color: $blue; line-height: 1;
        &.open{color: $black;}
    }
    .searchbox{position: absolute; top: 10px; right: 245px; width: 500px; pointer-events: none; visibility: hidden; opacity: 0; @include transition();
        .form-control{border-color: transparent; padding-left: 40px; padding-right: 5px; font-size: 18px; border-radius: 0;}
        button{color: $blue; position:absolute; left:0; top:15px; font-weight: 400; font-size: 22px; line-height: 1; padding: 0; border: none; background: none;}
        &.open{pointer-events: auto; visibility: visible; opacity: 1;}
    }

    &.sticky{ box-shadow: 0 0 10px rgba($pureblack,0.1);}

    @media only screen and (min-width : 1300px) {
        .container{width: 100%; padding: 0 40px;}
    }

}