/* Responsive Design Style
------------------------------------------------------------ */

@media only screen and (max-width: 980px) { 
    #wrap {
        width: 98%;
        min-width: 98%;
        margin: 5px auto;
    }

    #slider-wrap,
    .flex-container { height: auto }
}

@media only screen and (max-width: 768px) { 
    body,
    h1,
    h2,
    h2 a,
    h2 a:visited,
    h3,
    h4,
    h5,
    h6,
    p,
    select,
    textarea {
        font-size: 13px;
        line-height: 1.5em;
    }

    #branding{
        float: none;
        margin: 0 auto;
    }

    #content-sidebar-wrap,
    .sidebar-content-sidebar #content-sidebar-wrap,
    .sidebar-sidebar-content #content-sidebar-wrap,
    #footer-widgets .wrap {
        float: none;
        margin: 0 auto;
        width: 100%;
    }


    .menu-primary,
    .menu-secondary,
    #header ul.menu { display: none }

    .menu-primary-mobile,
    .menu-secondary-mobile,
    .menu-header-mobile,
    .no-js .menu-primary,
    .no-js .menu-secondary{ display: block }

    .no-js #nav .wrap { margin: 0 }

    .no-js #nav ul,
    .no-js #nav li,
    .no-js #subnav ul,
    .no-js #subnav li   {
        float: none;
        display: block;
        width: 100%;
    }

    .no-js #nav li li a,
    .no-js #nav li li a:link,
    .no-js #nav li li a:visited,
    .no-js #subnav li li a,
    .no-js #subnav li li a:link,
    .no-js #subnav li li a:visited  {
        border: none;
        width: 160px;
    }

    .no-js #nav li ul,
    .no-js #subnav li ul    {
        border: none;
        position: inherit;
        padding: 5px 0;
        width: 200px;
        z-index: 9999;
    }

    .no-js #nav li ul a,
    .no-js #subnav li ul a { width: 100% }

    .no-js #nav li ul li ul,
    .no-js #subnav li ul li ul  { margin: 0 }

    .no-js #nav li:hover>ul,
    .no-js #subnav li.sfHover ul { left: auto }    

    .post-image {
        max-width: 96%!important;
        height: auto;
    }

    #header { padding: 20px 0 10px; text-align: center }

    #title-area,
    #header .widget-area,
    #homepage-hero,
    #homepage-intro,
    .homepage-widget-left,
    .homepage-widget-center,
    .homepage-widget-right,
    .sc-widget .primary-widget-left,
    .sc-widget .primary-widget-right,
    .scl-widget .primary-widget-left,
    .scl-widget .primary-widget-right,
    .scr-widget .primary-widget-right,
    .scr-widget .primary-widget-left,
    .sss-widget .homepage-widget-left,
    .sss-widget .homepage-widget-center,
    .sss-widget .homepage-widget-right,
    .ssl-widget .homepage-widget-left,
    .ssl-widget .homepage-widget-center,
    .ssl-widget .homepage-widget-right
    .sls-widget .homepage-widget-left,
    .sls-widget .homepage-widget-center,
    .sls-widget .homepage-widget-right,
    .lss-widget .homepage-widget-left,
    .lss-widget .homepage-widget-center,
    .lss-widget .homepage-widget-right,
    #content,
    .content-sidebar #content,
    .sidebar-content #content,
    .sidebar-sidebar-content #content,
    .sidebar-content-sidebar #content,
    .content-sidebar-sidebar #content,
    #sidebar,
    .sidebar-content #sidebar,
    .sidebar-sidebar-content #sidebar,
    .sidebar-content-sidebar #sidebar,
    .content-sidebar-sidebar #sidebar,
    .full-width-content #content,
    #sidebar-alt,
    .content-sidebar-sidebar #sidebar-alt,
    #footer-widgets .widget-area,
    #footer .gototop,
    #footer .creds {
        float: none;
        display: block;
        width: 90%!important;
        margin: 0 auto 20px;
        padding: 0;
        word-wrap: break-word;
    }

    #contact-information{
        float: none;
        width: 100%;
        text-align: center;
    }

    #contact-information li{
        float: none;
        margin: 10px 0;
        display: inline-block;
        *display: inline;
        zoom: 1;
        text-align: left
    }

    #homepage-intro{
        font-size: 16px!important;
        padding: 0 0 20px
    }

    #primary-widgets .widget h4,
    #homepage-widgets .widget h4{
        font-size: 16px!important;
    }

    .five-sixths,
    .four-fifths,
    .four-sixths,
    .one-fifth,
    .one-fourth,
    .one-half,
    .one-sixth,
    .one-third,
    .three-fifths,
    .three-fourths,
    .three-sixths,
    .two-fifths,
    .two-fourths,
    .two-sixths,
    .two-thirds {
        display: block;
        float: none;
        padding: 10px 0;
        margin: 0;
        width: 100%;
    }

    #title-area,
    #description,
    #header .widget-area,
    #footer .gototop,
    #footer .creds {
        text-align: center;
        margin-bottom: 10px;
    }

    .portfolio{
        width: 180px
    }
}