@import "menu";

.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index:100;
    height:135px;
    .top-header-content{      
        background: #ffffff;
        min-height:135px;
        @include  transform(translate(0px, -100%));
        @include  transition(opacity 500ms ease, transform 500ms ease);
        @include transform-style(preserve-3d);
        width:100%;
        .top-content{  
            padding: 19px 50px;

        }
    }
    &:hover{
        .top-header-content{ 
            @include transform(translate(0,0));
        }
    }
    .header-logo  img{
        max-height: 95px;
    }
    .site-logo{
        position: absolute;
        top: 19px;
        left: 50px;
        max-width: 200px;
        z-index: 1;
    }
    .menu-icon{
        background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
        color: #ffffff; 
        cursor: pointer; 
        display: block; 
        font-size: 24px;
        height: 60px; 
        line-height: 60px; 
        padding: 0; 
        position: absolute; 
        right: 50px;
        text-align: center;
        top: 30px;
        width: 60px; 
    }
}

.admin-bar{
    .top-header {
        top: 32px; 
    }
}

.site-header{
    background: #ffffff;
    text-align: center;    
    padding: 185px 0 145px;
    .site-tagline{
        color:$headerColor;
        font-size: 26px;  
        background: #ffffff;
        display: inline-block;
        margin: -11px 0 0;
        position: relative;
        bottom: -21px;
        padding: 0 19px;
        letter-spacing: 1.5px;
    }
    .site-title {
        font-size: 90px;
        margin: 34px -35px 0;
        padding: 20px 40px 8px;
        background: #ffffff;
        line-height: 1;

    }
    .header-logo{
        margin-bottom: -4px;
        z-index: 1;
        position: relative;
        background: #ffffff;
        display: inline-block;
        padding: 0 8px;
        max-width:470px;
    }
    .site-description{
        display: table;
        margin: 0 auto;
        padding:0 20px;
        text-transform: uppercase;
        border:4px solid $brandColorBlack;
    }
}
@media (max-width: 1366px){ 
    .site-header {
        padding: 100px 0 140px;
    }
}
@media (max-width: 991px){ 
    .top-header {
        position: relative;
        height: auto;
    }
    .artwork-custom-home .top-header-content .site-logo{
        display: none;
    }
    .top-header .site-logo {
        position: relative;
        top: 0;
        left: 0;
    }
    .top-header .top-header-content{
        @include transform(translateX(0px) translateY(0));
    }
    .admin-bar .top-header{
        top:0;
    }    
    .navbar {        
        display: none;
        float:none;
        margin: 0;
        padding: 0;
        text-align: center;
        margin: 15px 0 0;
        min-height: 0;
    }
    .artwork-custom-home .navbar {  
        margin:0;
    }
    .top-header .top-header-content {
        min-height: 0;        
    }
    .top-header .top-header-content .top-content {
        padding: 15px 15px 15px;
    }
    .artwork-custom-home .top-header .top-header-content .top-content{
        padding: 125px 15px 0;
    }

    .top-header .menu-icon{
        right: 15px;
       top: 22.5px;
        z-index: 10;
          font-size: 31px;
        height: 80px;
        line-height: 80px;
        width: 80px;
    }
    .site-header {
        padding: 40px 0 60px;
    }
    .site-header .site-title {
        font-size: 55px!important; 
        margin: 27px -35px 0;
        padding: 7px 40px 8px;
    }
    .site-header .site-tagline {
        font-size: 16px;
    }
   
}
@media (max-width: 767px){ 
    .site-header .site-title {
        font-size: 35px!important; 
    }
}