/*
 * University of Houston
 * Style sheet to make UH header and footer responsive
 * Created Fall 2013 by the UH Marketing & Communication Web Team
 *
 * Table of Contents:
 * ------------------
 * Global Styles
 * Media Queries
 *
 */

body {
    /*max-width: 1170px;*/
    min-width: 0;
}

@media (min-width: 768px) {
    .container {
        max-width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 970px;
    }
}
@media (min-width: 1170px) {
    .container {
        max-width: 1170px;
    }
}

/* ========================================================================
   Global Styles
   ======================================================================== */

img {
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    width: auto\9;
    -ms-interpolation-mode: bicubic;
}

/*
 * Apply a natural box layout model to all elements:
 * http://paulirish.com/2012/box-sizing-border-box-ftw/
 */

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


/* ========================================================================
   Media Queries
   ======================================================================== */

/* new stuff */

@media (max-width: 1169px) {
    html {
        /*background: #960C22;*/
    }
}

#content-info .social-media {
    padding: 0;
}


#banner .top-bar .home,
#banner .top-bar .apply,
#banner .top-bar .give,
#banner .top-bar .login {
    background: none;
    padding-left: 0;
}


@media (min-width: 768px) {
    .nav-primary .parents {
        padding: 0 5px;
    }
    .nav-primary .parents > li > a {
        font-size: 16px;
        padding: 10px;
    }
    .nav-primary .parents > li > .caret {
        display: none;
    }
    .nav-primary .children a {
        /*padding: 7px 25px 8px 10px;*/
        padding-left: 10px;
    }
    #content-info .social-media {
        float: none;
        padding: 0 15px;
    }
    #banner .top-bar .home {
        background: transparent url('../_img/icon-uh-light.svg') no-repeat left center;
        background-size: 19px;
        padding-left: 25px;
    }
    #banner .top-bar .apply {
        background: transparent url('../_img/icon-apply-light.svg') no-repeat left center;
        background-size: 18px;
        padding-left: 25px;
    }
    #banner .top-bar .give {
        background: transparent url('../_img/icon-giving-light.svg') no-repeat left center;
        background-size: 18px;
        padding-left: 25px;
    }
    #banner .top-bar .login {
        background: transparent url('../_img/icon-accessuh-light.svg') no-repeat left center;
        background-size: 18px;
        padding-left: 25px;
    }
}

@media (min-width: 992px) {
    .nav-primary .parents {
        padding: 0;
    }
    .nav-primary .parents > li > a {
        font-size: 18px;
        padding: 10px 24px 10px 15px;
    }
    .nav-primary .parents > li > .caret {
        display: inline-block;
    }
    .nav-primary .children a {
        padding: 7px 30px 8px 15px;
    }
    #content-info .social-media {
        float: right;
    }
}

@media only screen and (min-width: 768px) {
    .menu-button {
        display: none;
    }
}


@media (max-width: 577px) {
    #banner .logo img {
        width: auto;
        height: auto;
    }
}

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

    /*
     * Global styles
     */

    html,
    body {
        /*background: #333;*/
        /*background: white;*/
        /*margin: 0;*/
        /*position: relative;*/
        /*width: 100%;*/
        /*-webkit-overflow-scrolling: touch;*/
    }

    a:hover {
        /*text-decoration: none !important;*/
    }

    /*
     * Document structure
     */



    /*
     * Header
     */

    #banner {

    }

    #banner .container,
    #banner .nav-primary,
    #banner .nav-primary ul,
    #banner .nav-primary li {
        display: block;
        float: none;
        height: auto;
        left: 0;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        top: 0;
        width: 100%;
        border-radius: 0;
    }

    #banner ul {
        list-style: none;
        padding: 0;
    }

    #banner li {
        position: relative;
    }

    #banner .nav-primary li a {
        /*border-bottom: 1px solid rgba(0,0,0,.25);*/
        /*color: #fff;*/
        /*display: block;*/
        /*font-family: 'TexGyreAdventor', sans-serif;*/
        /*font-size: 16px;*/
        /*line-height: 21px;*/
        line-height: 25px;
        margin: 0;
        padding: 10px 15px 10px;
        position: relative;
        text-decoration: none;
        /*text-shadow: 0 1px 0 rgba(0,0,0,.5);*/
        /*-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
           -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
                box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);*/
    }

    #banner .nav-primary li a

    #banner .nav-primary li a:hover {
        /*background: rgba(0,0,0,.25);*/
    }

    #banner .caret {
        background: rgba(0,0,0,.125) url('https://https://uh.edu/css/backgrounds/caret.svg') no-repeat center center;
        border: 0;
        border-radius: 4px;
        cursor: pointer;
        display: block;
        height: 35px;
        margin: 0;
        opacity: 1;
        position: absolute;
        right: 10px;
        top: 5px;
        width: 44px;
        -webkit-box-shadow: inset 6px 6px 6px rgba(0,0,0,0);
           -moz-box-shadow: inset 6px 6px 6px rgba(0,0,0,0);
                box-shadow: inset 6px 6px 6px rgba(0,0,0,0);
    }

    #banner .caret:hover {
        background-color: rgba(0,0,0,.25);
    }

    .no-inlinesvg #banner .caret {
        background: transparent url('https://https://uh.edu/css/backgrounds/caret.png') no-repeat center center;
    }

    #banner .opened > .caret {
        background-color: rgba(0,0,0,.25);
        -webkit-box-shadow: inset 6px 6px 6px rgba(0,0,0,.0625);
           -moz-box-shadow: inset 6px 6px 6px rgba(0,0,0,.0625);
                box-shadow: inset 6px 6px 6px rgba(0,0,0,.0625);
    }

    /*
     * Top-bar navigation
     */

    #banner .top-bar {
        /*background: none;*/
        /*caption-side: bottom;*/
        /*display: table-caption;*/
        /*width: 272px;*/
        /*-webkit-box-shadow: none;*/
           /*-moz-box-shadow: none;*/
                /*box-shadow: none;*/
    }

    #banner .top-bar nav {
        padding-right: 0;
        width: 61%;
    }

    #banner .top-bar nav > ul:after {
        display: none !important;
    }

    #banner .top-bar nav > ul > li {
        margin-right: 12px;
    }

    #banner .top-bar li a {
        /*-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset;
           -moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset;
                box-shadow: 0 1px 0 rgba(255,255,255,.1) inset;*/
    }

    /*
     * Primary navigation
     */

    #banner .nav-primary {
        /*background: #c8102e;*/
        /*float: none;*/
        padding: 0;
        /*width: 272px;*/
        /*-webkit-box-shadow: inset -6px 0 6px rgba(0,0,0,.25);*/
           /*-moz-box-shadow: inset -6px 0 6px rgba(0,0,0,.25);*/
                /*box-shadow: inset -6px 0 6px rgba(0,0,0,.25);*/
    }

    #banner .nav-primary .parents {
        background: rgba(0,0,0,.0625);
        -webkit-box-shadow: inset 0 -6px 6px rgba(0,0,0,.0625);
           -moz-box-shadow: inset 0 -6px 6px rgba(0,0,0,.0625);
                box-shadow: inset 0 -6px 6px rgba(0,0,0,.0625);
    }

    #banner .nav-primary.alt {
        background: #7d7d7d;
    }

    #banner .nav-primary ul ul {
        display: none;
    }

    #banner .nav-primary li {
        border-right: none;
        border-left: none;
    }

    #banner .nav-primary li:hover {
        background: none;
    }

    #banner .nav-primary li a {
        border-right: none;
        border-left: none;
        /*-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
           -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
                box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);*/
    }

    #banner .nav-primary li a:hover {
        background: rgba(0,0,0,.125);
        /*-webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;*/
    }

    /*
     * UH Home navigation
     */

    #banner .nav-uh-home,
    #banner .nav-uh-home:hover {
        background: #c8102e;
        -webkit-box-shadow: inset -6px 0 6px rgba(0,0,0,.125);
           -moz-box-shadow: inset -6px 0 6px rgba(0,0,0,.125);
                box-shadow: inset -6px 0 6px rgba(0,0,0,.125);
    }

    #banner .nav-uh-home > a {
        height: auto;
    }

    #banner .top-bar .children,
    #banner .nav-primary .children {
        background: #eee;
        border: none;
        display: block;
        font-weight: normal;
        height: auto;
        max-height: 0px;
        overflow: hidden;
        position: relative;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
        -webkit-transition: .5s max-height ease;
           -moz-transition: .5s max-height ease;
            -ms-transition: .5s max-height ease;
             -o-transition: .5s max-height ease;
                transition: .5s max-height ease;
    }

    #banner .nav-primary .children a {
        line-height: 25px;
    }

    #banner .nav-primary .children .opened .caret {
        background-color: rgba(0,0,0,.25);
    }

    #banner .nav-primary .grandchildren {
        background: white;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }

    /*
     * Shared navigation styles
     */

    .nav-primary .children,
    .nav-primary .grandchildren,
    .nav-primary .children li .grandchildren,
    .nav-uh-home .children,
    .nav-uh-home .grandchildren {
        opacity: 1;
    }

    #banner .top-bar .opened > .children,
    #banner .top-bar .opened > .grandchildren,
    #banner .nav-primary .opened > .children,
    #banner .nav-primary .opened > .grandchildren {
        max-height: 125em;
    }

    /*#banner .top-bar .opened + .children li:first-child a,
    #banner .nav-primary .opened + .children li:first-child a {
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }*/

    /*
     * Header logo
     */



    #banner .logo {

    }

    #banner .logo .logo-link {
        display: table-cell;
        float: none;
        /*height: 72px;*/
        /*padding: 0 14px;*/
        vertical-align: middle;
        width: auto;
    }

    /*
     * Menu Button
     */

    #banner .menu-button {
        background: transparent url('https://https://uh.edu/css/backgrounds/menu-icon.svg') no-repeat 15px center;
        border: none;
        border-radius: 0;
        color: white;
        cursor: pointer;
        display: block;
        font-size: 18px;
        line-height: 30px;
        margin: 0;
        padding: 10px 15px 10px 48px;
        width: auto;

        position: relative;
        text-decoration: none;
        /*text-shadow: 0 1px 0 rgba(0,0,0,.5);*/
        z-index: 1;
        -webkit-transition: 0 .5s box-shadow linear;
           -moz-transition: 0 .5s box-shadow linear;
            -ms-transition: 0 .5s box-shadow linear;
             -o-transition: 0 .5s box-shadow linear;
                transition: 0 .5s box-shadow linear;
    }

    #banner .menu-button:hover {
        text-decoration: none;
    }

    .no-inlinesvg #banner .menu-button {
        background: white url('https://https://uh.edu/css/backgrounds/icon-menu.png') no-repeat 0 0;
    }

    #banner .menu-button.active-button {
        /*background-color: rgba(0,0,0,.125);*/
        -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.125), 0 6px 6px rgba(0,0,0,.0625);
           -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.125), 0 6px 6px rgba(0,0,0,.0625);
                box-shadow: inset 0 -1px 0 rgba(0,0,0,.125), 0 6px 6px rgba(0,0,0,.0625);
        -webkit-transition: 0 0 box-shadow linear;
           -moz-transition: 0 0 box-shadow linear;
            -ms-transition: 0 0 box-shadow linear;
             -o-transition: 0 0 box-shadow linear;
                transition: 0 0 box-shadow linear;

    }

    .nav-primary .parents {
        max-height: 0;
        overflow: hidden;
        -webkit-transition: .5s max-height ease;
           -moz-transition: .5s max-height ease;
            -ms-transition: .5s max-height ease;
             -o-transition: .5s max-height ease;
                transition: .5s max-height ease;
    }

    .active-nav .nav-primary .parents {
        max-height: 100em;
    }

    /*
     * AccessUH Button
     */


    /*
     * Search Box
     */

    #banner .search {
        float: right;
        width: 39%;
    }

    /*
     * Document wrapper
     */

    #wrap {

    }



    /*
     * Footer
     */

    #content-info {
        /*background: none;*/
        /*margin-top: 24px;*/
        z-index: 2;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }

    #content-info div,
    #content-info [class*="span"] {
        margin: 0;
        width: 100%;
    }

    /*
     * Footer links
     */

    #content-info .footer-links {
        /*background: #c8102e;*/
        padding: 0;
    }

    #content-info .footer-links figure {
        display: none;
    }

    #content-info .footer-links a {
        line-height: inherit;
    }

    #content-info .footer-links dl {
        float: none;
        margin: 0;
        max-height: 45px;
        overflow: hidden;
        padding: 0;
        width: auto;
        -webkit-transition: .5s max-height ease;
           -moz-transition: .5s max-height ease;
            -ms-transition: .5s max-height ease;
             -o-transition: .5s max-height ease;
                transition: .5s max-height ease;
    }

    #content-info .footer-links dt,
    #content-info .footer-links dd {
        /*border-bottom: 1px solid rgba(0,0,0,.25);*/
        border: none;
        color: #fff;
        display: block;
        /*font-family: 'TexGyreAdventor', sans-serif;*/
        /*font-size: 17px;*/
        line-height: 25px;
        position: relative;
        text-decoration: none;
        /*text-shadow: 0 1px 0 rgba(0,0,0,.5);*/
        /*-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
           -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;
                box-shadow: 0 1px 0 rgba(255,255,255,.2) inset;*/
    }

    #content-info .footer-links dt {
        background: none;
        cursor: pointer;
        margin: 0;
        padding: 10px 15px;
        /*-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
           -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
                box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);*/
        -webkit-transition: .2s all ease;
           -moz-transition: .2s all ease;
            -ms-transition: .2s all ease;
             -o-transition: .2s all ease;
                transition: .2s all ease;
    }


    #content-info .footer-links dt:after {
        background: transparent url('https://https://uh.edu/css/backgrounds/caret.svg') no-repeat center center;
        /*border-radius: 4px;*/
        content: '';
        height: 45px;
        position: absolute;
        right: 0;
        top: 0;
        width: 45px;
    }

    .no-inlinesvg #content-info .footer-links dt:after {
        background: transparent url('https://https://uh.edu/css/backgrounds/caret.png') no-repeat center center;
    }

    /*#content-info .footer-links dt:hover:after {
        background-color: rgba(0,0,0,.1875);
    }*/

    /*#content-info .footer-links dl.opened dt:after {
        background-color: rgba(0,0,0,.25);
        -webkit-box-shadow: inset 6px 6px 6px rgba(0,0,0,.0625);
           -moz-box-shadow: inset 6px 6px 6px rgba(0,0,0,.0625);
                box-shadow: inset 6px 6px 6px rgba(0,0,0,.0625);
    }*/

    #content-info .footer-links dd {
        background: rgba(0,0,0,.0625);
    }

    #content-info .footer-links dd a {
        display: block;
        padding: 10px 15px;
        /*-webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
           -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
                box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);*/
    }

    #content-info .footer-links dd a:hover {
        background: rgba(0,0,0,.125);
        text-decoration: none;
        /*-webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;*/
    }

    #content-info .footer-links dt + dd {
        -webkit-box-shadow: inset 0 6px 6px rgba(0,0,0,.0625);
           -moz-box-shadow: inset 0 6px 6px rgba(0,0,0,.0625);
                box-shadow: inset 0 6px 6px rgba(0,0,0,.0625);
    }

    #content-info .footer-links dl dd:last-child {
        /*-webkit-box-shadow: inset 0 -6px 6px rgba(0,0,0,.0625);
           -moz-box-shadow: inset 0 -6px 6px rgba(0,0,0,.0625);
                box-shadow: inset 0 -6px 6px rgba(0,0,0,.0625);*/
    }

    #content-info .footer-links dl.opened {
        max-height: 999px;
    }

    #content-info .footer-links dl.opened dt {
        /*background: rgba(0,0,0,.125);*/
        /*-webkit-box-shadow: inset 0 6px 6px rgba(0,0,0,.0625);
           -moz-box-shadow: inset 0 6px 6px rgba(0,0,0,.0625);
                box-shadow: inset 0 6px 6px rgba(0,0,0,.0625);*/
        /*-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.125) inset;
           -moz-box-shadow: 2px 2px 2px rgba(0,0,0,.125) inset;
                box-shadow: 2px 2px 2px rgba(0,0,0,.125) inset;*/
    }

    #content-info .footer-links dl dd:last-child {
        -webkit-box-shadow: inset 0 -6px 6px rgba(0,0,0,.0625);
           -moz-box-shadow: inset 0 -6px 6px rgba(0,0,0,.0625);
                box-shadow: inset 0 -6px 6px rgba(0,0,0,.0625);
    }

    /*
     * Bottom bar
     */

    #content-info .bottom-bar {
        /*background: none;*/
        margin: 0;
        padding: 0 15px;
        -webkit-box-shadow: none;
           -moz-box-shadow: none;
                box-shadow: none;
    }

    #content-info .social-media {
        float: none !important;
        height: 32px;
        margin: 10px 0 0;
    }

    #content-info .social-media li {
        margin: 0 10px 0 0;
    }

    #content-info .copyright {
        /*font-size: 12px;*/
        /*line-height: 21px;*/
        /*margin: 0 0 9px;*/
        float: none;
        padding: 0;
        width: auto;
    }

    #content-info .copyright .problem-link {
        border-bottom: none;
        clear: left;
        display: inline-block;
        margin: 0;
    }

    #content-info .copyright .problem-link:hover {
        border-bottom: none;
        /*text-decoration: underline;*/
    }

    #content-info .adr {
        display: block;
    }

    #content-info .vcard .org,
    #content-info .vcard .adr,
    #content-info .vcard .tel,
    #content-info .problem-link {
        display: inline-block;
    }

}

/* Retina social media icons */

@media only screen and (-webkit-min-device-pixel-ratio : 1.25), only screen and (min-device-pixel-ratio : 1.25) {

    .backgroundsize #content-info .social-media .email {
        background: transparent url('https://https://uh.edu/images/social-64/email.png') no-repeat;
        background-size: 100%
    }

    .backgroundsize #content-info .social-media .twitter {
        background: transparent url('https://https://uh.edu/images/social-64/twitter.png') no-repeat;
        background-size: 100%
    }

    .backgroundsize #content-info .social-media .facebook {
        background: transparent url('https://https://uh.edu/images/social-64/facebook.png') no-repeat;
        background-size: 100%
    }

    .backgroundsize #content-info .social-media .youtube {
        background: transparent url('https://https://uh.edu/images/social-64/youtube.png') no-repeat;
        background-size: 100%
    }

    .backgroundsize #content-info .social-media .google-plus {
        background: transparent url('https://https://uh.edu/images/social-64/google-plus.png') no-repeat;
        background-size: 100%
    }

    .backgroundsize #content-info .social-media .instagram {
        background: transparent url('https://https://uh.edu/images/social-64/instagram.png') no-repeat;
        background-size: 100%
    }
}