﻿.header
{
    width:100%;
    height:137px;
    padding-top:30px;
    padding-left:30px;
    background-color: white;
-webkit-box-shadow: 2px 2px 15px 0px rgba(50, 50, 50, 0.67);
-moz-box-shadow: 2px 2px 15px 0px rgba(50, 50, 50, 0.67);
box-shadow: 2px 2px 15px 0px rgba(50, 50, 50, 0.67);
z-index: 33;
position: relative;
}

.header .links{
    float:right;
    width:auto;
    margin-top:50px;

}

.header .links li{
    box-sizing:border-box;
    float:left;
    width:auto;
    margin-right:20px;
    border-left:1px solid gray;
    padding-left:20px;


}
.header .links li:first-child{
    border-left:0px solid gray;

}

.titleBar
{
    background-color:#1f9bde;
    height:77px;
    color:white;
    padding-top:20px;
    padding-left:35px;
    font-size:28px;
    
}


  @media only screen and (min-width: 751px) {
    .mobileMenu {
        display: none;
    }
    .pushmenu {
        display: none;
    }
}

@media only screen and (max-width: 750px) {
    body {
     box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.67);

    }
    .header {
        box-shadow:none;
        height:  90.42px; /*67% of header height 137px;*/
        padding-top:19.63610208322238px; /* 30px / 137px * new header height */
        padding-left:19.63610208322238px;
    }
    .header a .logo {
        height: 85.04672897196262%;  /* 91px logo / 107px header height*/
    }
    .titleBar {
        height:53.9px;
        color:white;
        padding-left:19.63610208322238px; /* matches logo padding */
        padding-top:16px;
        font-size:18px;
    }
    .removeText {
        display: none;
    }
    
    .mobileMenu {
        width: 100px;
        float: right;
        display: block;
        padding: 10px 10px 0 0;

    }
        .mobileMenu .mobileIcon {
            width: 40px;
            height: 40px;
            float: right;
            background-image: url(/Content/images/mobileMenuIcon.png);
            background-size: 40px 40px;
            /*margin-left: 15px;*/
        }
        .mobileMenu .searchIcon {
            width: 40px;
            height: 40px;
            float: left;
            background-image: url(/Content/images/searchIcon.png);
            background-size: 40px 40px;
            background-repeat: no-repeat;
            background-position: 0px 0px;
            /*margin-left: 15px;*/
            /*border: 1px solid red;*/
        }
    .pushmenu {
        display: block;
        position: absolute;
        width: 240px;
        height: 100%;
        top: 0;
        z-index: 100000;
        font-size: 14px;
        bottom: 0;
    }
    .pushmenu {
        display: block;
    }
        .pushmenu li {
            border-top: 1px solid #6A6A6A;
            height: auto;
            color: #1f9bde;
            padding: 24px 0 24px 15px;
        }
        .pushmenu li:first-child{
            font-weight: 700;
        }
        .pushmenu li a{
            color: #1f9bde;
            text-decoration:none;
            font-size: 20px;
        }
    .pushmenu-left {
       right: -240px;
    }
    .pushmenu-left.pushmenu-open{
        right: -240px;
    }
    .pushmenu-push.pushmenu-push-toleft{
        right: 240px;
    }
    .pushmenu-push{
        overflow-x: hidden;
        position: relative;
        right: 0;
    }
    /*Transition*/
    .pushmenu, .pushmenu-push
    {
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        transition: all 0.4s ease;
    
    }
    #userDisplay{
        display: none;
    }
    
} 