/************************** MOBILE ****************************/
@media screen and (max-width: 991px) { 
    #node-6{
        width: initial;
    }
    body{
        background-image: none;
    }
    .title-section, #page-header {
        display: none;
    }
    body > .container{
        width: 100%;
        border-radius: 0;
    }
    table, tbody, table img, td, tr, th{
        width: 100% !important;
        height: initial !important;
    }
    tr, td, th{
        display: block;
    }

    .mobile-search {
        background: #002B46;
        display: block;
        margin-bottom: 50px;
        margin-left: -15px;
        margin-right: -15px;
    }
    .mobile-search .form-control{
        color: white;
    }
    .mobile-search .btn {
        border: none;
        background: transparent;
        opacity: .5;
    }
  .mobile-search ::-webkit-input-placeholder {
        padding-left: 10px;
        letter-spacing: 1px;
        color: rgba(255,255,255, .9) !important;
        font-size: 14px;
        text-transform: Capitalize;
  }
  .mobile-search :-moz-placeholder {
    /* Firefox 18- */
        padding-left: 10px;
        color: rgba(255,255,255, .9)!important;
        letter-spacing: 1px;
        font-size: 14px;
        text-transform: Capitalize;
  }
  .mobile-search ::-moz-placeholder {
    /* Firefox 19+ */
        padding-left: 10px;
        color: rgba(255, 255, 255, .9) !important;
        letter-spacing: 1px;
        font-size: 14px;
        text-transform: Capitalize;
  }
  .mobile-search :-ms-input-placeholder {
        padding-left: 10px;
        color: rgba(255,255,255, .9) !important;
        letter-spacing: 1px;
        font-size: 14px;
        text-transform: Capitalize;
  }
    

    /* suppress these on mobile */
    .dept-footer{
        display: none;
    }

    /************

      NAV 

    *************/
    .navbar-wrapper{
        height: 250px;
        background: url(images/background_tablet.jpg);
        background-size: 1024px;
        background-position: 70% 100%;
        margin-left: -15px;
        margin-right: -15px; 
    }
    .navbar-wrapper #navbar{
        margin: 0px;
        border: none;
        background: rgba(0,0,0,0);
        width: 100%;
        max-width: 100%;
        filter: none;
    }
    #navbar .navbar-toggle{
    	z-index: 1000;
        height: 47px;
        position: relative;
        left: 40px;
        top: 20px;
        padding: 9px 9px;
        border: 2px solid rgba(200,200,200,.2);
        background-color: rgba(0,0,0,.1);
    }
    #navbar .icon-bar{
        width: 26px;
        background-color: rgba(255, 255, 255, .5);
    }
    .navbar-toggle .icon-bar + .icon-bar{
        margin-top: 5.25px;
    }
    #navbar .navbar-toggle.close{
        background: url(images/close_icon2.png);
        opacity: 1;
        width: 124px;
        height: 54px;
        border: none;
        
    }
    #navbar .navbar-toggle.close .icon-bar{
        position: relative;
        right: -9999px;
    }
    #navbar .navbar-collapse{
    	background: #002136;
        position: absolute;
        top: 0px;
        width: 100%;
        text-align: center;
        margin: 0;
        padding: 0;
        padding-bottom: 60px;
        z-index: 999;
        min-height: 460px;
        opacity: 0;
        height: initial !important;
        transition: initial !important;
    }
    #navbar .navbar-collapse.open{
        opacity: 1;
    }
    #navbar .navbar-collapse nav > ul.menu{
        margin-top: 100px;
        padding-left: 20px;
        padding-right: 20px;
    }
    #navbar .navbar-collapse nav > ul.menu > li{
        text-align: left;
        display: block;
        border-bottom: 1px solid #003150;
        max-width: initial;
        margin: 0 20px;
    }
    #navbar .navbar-collapse nav > ul.menu > li a:active, #navbar .navbar-collapse nav > ul.menu > li a:focus,
    #navbar .navbar-collapse nav > ul.menu > li:active, #navbar .navbar-collapse nav > ul.menu > li:focus,
    #navbar .navbar-collapse nav ul.menu > li a{
        background: transparent !important;
    }
    #navbar .navbar-collapse nav > ul.menu > li > a:hover {
        color: white !important;
    }
    #navbar .navbar-collapse nav > ul.menu > li.open a{
        color: white; 
    }
    #navbar .navbar-collapse nav > ul.menu > li.dropdown:after {
        content: "";
        background: url(images/down.png);
        background-size: 100%;
        width: 15px;
        height: 8px;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translateY(-50%);
    }
    #navbar .navbar-collapse nav > ul.menu > li.dropdown.opened:after {
        content: none;
    }
    #navbar .navbar-collapse nav > ul.menu > li.dropdown.open:after {
        content: "";
        background: url(images/up.png);
        background-size: 100%;
        width: 15px;
        height: 8px;
        position: absolute;
        top: 31px;
        right: 10px;
        transform: translateY(-20px);
    }
    #navbar .navbar-collapse nav > ul.menu > li > a{
        padding: 10px 0px;
        text-shadow: initial;
        color: #7f8f99;
        text-transform: uppercase;
        letter-spacing: 2px; 
        font-size: 15px;
    }
    #navbar .navbar-collapse nav > ul.menu > li.active > a{
        color: #00619f;
        padding-left: 0px;
    }
    #navbar .navbar-collapse nav ul.menu li.first > a{
        text-indent: 0;
        background: initial;
    }
    #navbar .navbar-collapse nav > ul.menu > li ul.dropdown-menu{
        position: initial;
        float: none;
        box-shadow: none;
        background: transparent;
        border: initial;
    }
    #navbar .navbar-collapse nav > ul.menu > li ul.dropdown-menu li{
        background: transparent;
    }
    #navbar .navbar-collapse nav > ul.menu > li ul.dropdown-menu li a{
        color: white;
        font-size: 13px;
        letter-spacing: 1.5px;
        text-shadow: initial;
        padding: 5px 0px 10px 30px;
        width: 75%;
        font-weight: bold;
        font-family: Arial;
        line-height: 20px;
    } 
    .navbar-wrapper #navbar .navbar-toggle{
        float: left;
    }


    /************

       SIDEBAR

    *************/
    .sidebar{
    	display: none;
    }
    .col-sm-9{
        width: 100%;
    }


	
    /************

      CONTENT 

    *************/
    .main-container .row.main{
        margin-top: 50px;
    }
    .breadcrumb{
    	display: none;
    }
    .mobile-search .form-group{
        margin-bottom: 0px;
    }
    .mobile-search .form-text{
        border-radius: 0;
        border: 3px solid rgba(255, 255, 255, 0.5);
    }
    .mobile-logo{
        display: block;
        position: absolute;
        top: 30px;
        right: 40px;
    }
    .mobile-logo a{
        color: #a7b7d0;
        font-size: 1.2em;
        margin-right: 20px;
    }
    .mobile-logo a:last-child {
        margin-right: 0;
    }
    .mobile-logo a:hover {
        text-decoration: none; 
        color: white;
    }
    .mobile-heading{
        display: block;
        position: relative;
        bottom: 30px;
        text-align: center;
    }
    .mobile-heading img{
        opacity: .5;
        width: 56px; 
    }
    .mobile-heading .site-title{
        margin-top: 20px;
    }
    .mobile-heading a.navbar-brand{
        color: white;
    	display: inline-block;
    	float: none;
    	font-family: "Open Sans",sans-serif;
    	font-size: 20px;
    	font-weight: bold;
    	height: initial;
		letter-spacing: 2px;
		line-height: 24px;
		min-height: 50px;
		padding: 0 50px;
		text-shadow: 1px 1px 1px #444;
    	text-transform: uppercase;
    }
    #mainpage-accordion{
        padding-left: 0;

    }
    #mainpage-accordion ul li{
        list-style-type: none;
    }
    #mainpage-accordion .btn-default,#mainpage-accordion .btn-default:hover, #mainpage-accordion .btn-default:focus, #mainpage-accordion .btn-default:active {
        outline: initial;
        box-shadow: none;
    }
    
    #mainpage-accordion .mainpage-button{
        white-space: initial;
        padding: 35px 50px;
        font-family: Arial;
        font-size: 1.25em;
        font-weight: 100;
        text-align: left;
        letter-spacing: 3px;
        color: rgb(115, 115, 115);
        width: 100%;
        background: white !important;
        border: none;
    }
    #mainpage-accordion .sub-accordion button.collapsed{
        border-bottom: 1px solid rgb(230, 230, 230);
        color: rgb(69, 69, 69);
        font-size: 1.2em;
        font-weight: initial;
        text-align: left;

    }
    #mainpage-accordion .sub-accordion button, #mainpage-accordion .nores-accordion button{
        border-bottom: 7px double #e3e3e3;
        border-radius: 0;
        color: #000;
        font-family: "open sans",serif;
        font-size: 2.5em;
        font-weight: bold;
        text-align: center;

    }
    #mainpage-accordion > li > .mainpage-button.collapsed{
        transition: all .5s ease 0s;
        -webkit-transition: all .5s ease 0s;
        -o-transition: all .5s ease 0s;
        -ie-transition: all .5s ease 0s;
        -moz-transition: all .5s ease 0s;
        background: white none repeat scroll 0 0;
        color: rgb(0, 0, 0);

    }
    #mainpage-accordion > li > .mainpage-button{
        color: rgb(242, 0, 0);
        transition: all .5s;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        -ie-transition: all .5s;
        -moz-transition: all .5s;
    }
    #mainpage-accordion > li > .mainpage-button:after {
        transform: rotate(90deg); 
        content: "\e258";
        font-family: 'Glyphicons Halflings';
        color: rgb(242, 0, 0);
        position: absolute;
        right: 30px;
        transition: all .5s;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        -ie-transition: all .5s;
        -moz-transition: all .5s;
    }
    #mainpage-accordion > li > .mainpage-button.collapsed:after {
        content: "\e258";
        font-family: 'Glyphicons Halflings';
        color: rgb(242, 0, 0);
        position: absolute;
        right: 30px;
        transform: initial;
        transition: all .5s;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        -ie-transition: all .5s;
        -moz-transition: all .5s;
    }
    /* borders */
    #mainpage-accordion .mainpage-button{
        border-bottom: 1px solid rgb(230, 230, 230);
    }
    #mainpage-accordion > li:first-child > button{
        border-top: 1px solid rgb(230,230,230);
    }
    #mainpage-accordion .sub-accordion-body{
        border-bottom: 1px solid rgb(230, 230, 230);
        color: rgb(103, 103, 103);
        font-family: "open sans",serif;
        font-size: 1.5em;
        letter-spacing: 1px;
        line-height: 2em;
        padding: 55px 40px 65px;
        text-align: center;
    }
    #mainpage-accordion .sub-accordion-img{
        width: 200px;
        margin: 0 auto 60px auto;
        display: block;
        
    }
    #mainpage-accordion .btn-view-more{
        background: rgb(56, 128, 177);
        color: white;
        width: 200px;
        white-space: initial;
        display: block;
        margin: 50px auto 0 auto;
        font-size: .85em;
        letter-spacing: 5px;
        padding: 15px 0;
    }
    .mainpage .col-sm-9, .mainpage .col-sm-9 .region{
        padding: 0;
    }
    .mainpage .panel{
        margin-bottom: 0px;
    }
    .mainpage .page-header{
        color: #357fb8;
        letter-spacing: 1px; 
        padding-bottom: 15px;
        margin: 0 0 20px;
        border-bottom: 1px solid rgb(230, 230, 230);
        padding-left: 0;
        padding-right: 0;
        margin-left: 25px;
        margin-right: 25px;
    }
    .mainpage .mobile-search{
        margin-bottom: 35px;
    } 
    .input-group .btn-primary{
        padding-right: 0px;
    }
    .mainpage .content-header{
        padding: 0 25px;
    }
    .mainpage ul#mainpage-accordion li{
        border: none;
    }
    .mainpage .mainpage-title{
        color: rgb(93, 164, 205);
        font-weight: bold;
        letter-spacing: .5px;
        margin-top: 10px;
    }
    .mainpage .callout{
        text-align: center;
        margin: 30px 0px 50px;
        font-family: Helvetica;
    }
    .mainpage .callout .img-res-wrap{
        position: relative;
        margin-top: 55px;
    }
    .mainpage .callout .img-res-but{
        cursor: initial;
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        border: 2px solid white;
        color: white;
        background: transparent;
        font-size: 1em;
        font-family: Helvetica;
        letter-spacing: 4px;
        opacity: .8;
        padding: 10px 20px;
    }
    .mainpage .callout .img-res{
        width: 100%;
    }
    .mainpage .callout h2{
        color: black;
        font-family: "Open Sans",sans-serif;
        font-size: 3em;
        font-weight: bold;
        letter-spacing: 4px;
        line-height: 45px;
        margin-bottom: 10px;
        padding-left: 0;
        text-transform: uppercase;

    }
    .mainpage .callout p{
        color: rgb(125, 125, 125);
        font-size: 1.8em;
        font-weight: 100;
        letter-spacing: 3px;
        line-height: 45px;
        margin-top: 20px;

    }
    .mainpage .list-header{
        padding: 35px 50px 12px;
        font-size: 1.45em;
        letter-spacing: 3px;
        color: #357fb8; 
    }
    .mainpage .sub-accordion{
        padding: 0 25px;
    }
    .mainpage .sub-accordion li button{
        border-top: none;
        font-size: 1em;
    }
    .mainpage .sub-accordion li:last-child button{
        border-bottom: none;
    }
    
    /************

      FOOTER 

    *************/
    .connect_div{
        margin: 60px auto 0 auto;
        text-align: center;
    }
    .connect_div .connect{
        font-size: 16px;
        color: #2F7FB4;
        padding-bottom: 5px;
        text-transform: uppercase;
        font-weight: bold;
        border-bottom: none;
        margin-bottom: 10px;
        min-width: 100px;
        margin-right: auto;
        margin-left: auto;
        letter-spacing: 1px;
        display: inline-block;
    }
    .connect_div ul{
        list-style-type: none;
        padding-left: 0;
        width: 200px;
        margin: 0 auto;
    }
    .connect_div ul li{
        display: inline-block;
        padding: 0 8px;
        margin-bottom: 10px;
    }
    .connect_div ul li img{
        width: 30px !important;
        height: 30px !important;
    }

    .site-logo{
        padding-top: 0px;
    }
    .site-logo img{
        width: 50px;
    }
    .site-logo a, .site-logo p{
        position: relative;
        top: 30px;
    }
    .dept-footer .container{
        width: 100%;
    }
    .footer{
        background-size: cover;
        background-position: 100% 50%;
    }
}

@media screen and (max-width: 767px){
    .navbar-wrapper{
        background-position: 70% 100%;
    }
}