/* 
    Document   : responsive
    Created on : 20-Nov-2014, 14:21:34
    Author     : joe.towner
    Description:
        Stylesheet for responsive
*/

@media only screen and ( max-width: 1124px ) {
    .quote_banner .wrapper {
        padding: 0 10%;
        width: 80%;
    }
}

@media only screen and ( max-width: 1060px ) {
    #logo {
        padding-left: 12px;
    }
    .wrapper, #carousel {
        width: auto;
    }
    #content {
        padding: 0 2% 2%;
    }
    #banner, #banner #social {
/*        height: 77px;*/
    }
    #banner #social {
        padding-right: 12px;
    }
    #banner {
        padding: 12px 0;
    }
    #nav > ul {
        /*width: 100%;*/
        font-size: 15px;
    }
    #nav li {
        height: 100%;
    }
    .quote_banner .wrapper {
        background-image: none;
        padding: 0;
        width: 96%;
        padding: 2%;
    }
    .quote_banner h2 {
        font-size: 25px;
    }
    .message, #notice {
        margin-left: -30%;
        width: 60%;
    }
    .divTd {
        width: 75%;
    }

}

@media only screen and ( max-width: 850px ) {
    #logo {
        padding-left: 2%;
    }
    #nav > ul {
        display: none;
    }
    #nav > ul > li {
        background: rgba(209,212,211,0.9);
    }
    #nav ul a {
        display: block;
    }
    .bg #title {
        position: relative;
        top: 0;
    }
    #carousel.bg {
        height: auto;
    }
    #content {
        padding: 0 2%;
    }
    
    #showNav {
        display: inline-block;
        margin-left: 11px;
    }
    #banner form input[type="text"] {
        width: 150px;
        line-height: 38px;
        height: 38px;
        font-size: 20px;
    }
    #banner form input[type="submit"] {
        height: 38px;
        background-position: center;
    }
    #banner #social {
        text-align: right;
        padding-right: 2%;
        height: auto;
    }
    #facebook, #twitter, #linkedin, #youtube {
        height: 40px;
        width: 40px;
        background-size: contain;
        border-radius: 7px;
    }
    #twitter {
        margin-right: 4px;
    }

    #nav {
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        background: rgba(209,212,211,0.95);
        font-family: Helvetica;
    }
        #nav a {
            color: #FFF;
            font-weight: bold;
        }
        #nav li {
            border-top: 1px solid #FFF;
        }
/*        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type {
            display: block;
        }*/
 
    /* first level */
    #nav > ul {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
        #nav:target > a, #nav:target > ul {
            display: block;
        }
        #nav > ul > li {
            width: 100%;
            float: none;
        }
        #nav li li a {
            border: none;
        }
 
    /* second level */
    #nav li ul {
        position: static;
    }
    #nav ul ul {
        width: auto;
    }
    #nav ul ul ul li:first-child, #nav ul ul li {
        margin-left: 20px;
    }
    #nav ul ul ul, #nav ul ul ul li:first-child {
        border-left: none;
    }
    .quote_banner {
        margin-bottom: 0;
    }
    .message, #notice {
        margin-left: -40%;
        width: 80%;
    }
    #gelly {
        display: none;
    }
    .divTd {
        width: 70%;
    }
    /*ROWS AND COLUMNS*/
    .row_col2:first-child {
        padding: 0;
    }
    .row_col2 {
        width: 100%;
    }
    .row_col4 {
        width: 100%;
    }
    .cifas_contact_row {
        border-bottom: 1px solid #cccccc;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .cifas_contact_row .row_col4 p {
        margin: 0;
    }
}
@media only screen and ( max-width: 640px ) {
    #banner #social {
        text-align: center;
        padding-right: 0;
    }
    #banner, #banner #social {
        height: auto;
    }
    #nav {
        width: 100%;
    }
    #nav a#hideNav {
        padding: 10px 0px;
        width: 98%;
    }
    #showNav {
        position: absolute;
        right: 2%;
        top: 12px;
    }
    #banner form {
        margin-right: 30px;
    }
    #logo {
        display: none;
    }
    #logo2 {
        display: block;
    }
    #login form[name=cifas_form] {
        width: 100%;
    }
    #newsFilter {
        float: none;
    }
    #newsFilter div {
        display: block;
        margin: 5px 0;
    }
    #newsFilter div label {
        display: inline-block;
        width: 70px;
    }
    .divTd {
        width: 100%;
        padding: 5px;
    }
    #content .row2 .col {
        width: 100%;
        float: none;
    }
    #content .row2 .col:first-child,
    #content .row2 .col:last-child {
        padding: 0;
    }

}