/* =============================================================================
    16. RESPONSIVE - MEDIA QUERIES
============================================================================= */
@media only screen and (min-width: 320px) and (max-width: 959px){
    #content-wrapper{
        width: 728px;
    }

    #header-wrapper{
        z-index: 900;
    }
    #header{
        width: 688px;
    }

    #contact-info-container{
        width: 406px;
    }

    #nav{
        width: 100% !important;
        float: none;
        margin-right: 0;
    }

    #search-box{
        display: none;
    }

    .top-shadow{
        width: 100%;
        float: left;
        z-index: 200; 
    }

    #nav{
        float: none;
        margin: 0 auto;
        display: table;
    }

    iframe{
        max-width: 100%;
        height: auto;
    }

    img{
        max-width: 100%;
    }

    /* GRIDS */
    .container_12{
        width: 708px !important;
    }

    .grid_1{
        width: 39px !important;
    }
    .grid_2{
        width: 98px !important;
    }
    .grid_3{
        width: 157px !important;
    }
    .grid_4{
        width: 216px !important;
    }
    .grid_5{
        width: 275px !important;
    }
    .grid_6{
        width: 334px !important;
    }
    .grid_7{
        width: 393px !important;
    }
    .grid_8{
        width: 452px !important;
    }
    .grid_9{
        width: 511px !important;
    }
    .grid_10{
        width: 570px !important;
    }
    .grid_11{
        width: 629px !important;
    }
    .grid_12{
        width: 688px !important;
    }

    .arrow-list li{
        background-position: 0 2px !important;
    }

    /* ENTRY NOTE
    ------------------------------------------------------------------------- */
    .entry-note p{
        padding: 0;
    }

    /* NOTE
    ------------------------------------------------------------------------- */
    .grid_12 .note-container .note-content .note{
        max-width: 508px;
    }

    /* CLIENT CAROUSEL
    --------------------------------------------------------------------------*/
    #client-carousel li{
        width: 135px !important;
        min-height: 70px !important;
    }

    .client-carousel .caroufredsel_wrapper{
        width: 688px !important;
        min-height: 72px !important;
    }

    #client-carousel li img{
        width: 120px;
    }

    /* TABS HORISONTAL
    -------------------------------------------------------------------------- */
    .tabs li{
        width: 100%;
        border-right: 1px solid #eee;
        border-left: 1px solid #eee;

        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
    }

    .tabs li.active{
        border-right: 1px solid #eee;
    }

    /* TESTIMONIAL CAROUSEL
    ------------------------------------------------------------------------- */
    .grid_4.aside-right .carousel-testimonial .caroufredsel_wrapper, 
    .grid_4.aside-left .carousel-testimonial .caroufredsel_wrapper,
    .grid_4.aside-right .carousel-testimonial .carousel-li > li, .grid_4.aside-left .carousel-testimonial .carousel-li > li{
        width: 196px !important;
    }

    .grid_3 .carousel-testimonial .carousel-li > li, 
    .grid_3 .carousel-testimonial .caroufredsel_wrapper{width: 157px !important;}
    .grid_4 .carousel-testimonial .carousel-li > li, 
    .grid_4 .carousel-testimonial .caroufredsel_wrapper{width: 216px !important;}
    .grid_5 .carousel-testimonial .carousel-li > li, 
    .grid_5 .carousel-testimonial .caroufredsel_wrapper{width: 275px !important;}
    .grid_6 .carousel-testimonial .carousel-li > li, 
    .grid_6 .carousel-testimonial .caroufredsel_wrapper{width: 334px !important;}
    .grid_7 .carousel-testimonial .carousel-li > li, 
    .grid_7 .carousel-testimonial .caroufredsel_wrapper{width: 393px !important;}
    .grid_8 .carousel-testimonial .carousel-li > li, 
    .grid_8 .carousel-testimonial .caroufredsel_wrapper{width: 452px !important;}
    .grid_9 .carousel-testimonial .carousel-li > li, 
    .grid_9 .carousel-testimonial .caroufredsel_wrapper{width: 511px !important;}
    .grid_12 .carousel-testimonial .carousel-li > li, 
    .grid_12 .carousel-testimonial .caroufredsel_wrapper{width: 688px !important;}

    /* TESTIMONIALS ALTERNATIVE
    -------------------------------------------------------------------------- */
    .testimonials-alternative-nav li{
        width: 39px;
    }

    /* NIVO SLIDER
    --------------------------------------------------------------------------*/
    .nivoSlider.image-slider, 
    .nivoSlider.image-slider img{
        width: 100%;
    }
    
    /* CAROUSEL ARTICLE
    -------------------------------------------------------------------------- */
    .carousel-article .caroufredsel_wrapper{
        width: 100% !important;
    }

    .carousel-article{
        float: left;
        width: 100%;
    }

    .grid_3 .carousel-article .caroufredsel_wrapper{
        width: 157px !important;
    }
    .grid_3 .carousel-article .carousel-li > li{
        width: 157px !important;
        margin-right: 0;
    }

    .grid_4 .carousel-article .caroufredsel_wrapper{
        width: 216px !important;
    }
    
    .grid_4 .carousel-article .carousel-li > li{
        width: 216px !important;
        margin-right: 0;
    }

    .grid_4.aside-left .carousel-article .carousel-li > li, 
    .grid_4.aside-right .carousel-article .carousel-li > li{
        width: 196px !important;
    }
    
    .grid_4.aside-left .carousel-article .caroufredsel_wrapper, 
    .grid_4.aside-right .carousel-article .caroufredsel_wrapper{
        width: 196px !important;
    }

    .grid_5 .carousel-article .caroufredsel_wrapper{
        width: 275px !important;
    }
    .grid_5 .carousel-article .carousel-li > li{
        width: 275px !important;
        margin-right: 0;
    }

    .grid_6 .carousel-article .caroufredsel_wrapper{
        width: 334px !important;
    }
    .grid_6 .carousel-article .carousel-li > li{
        width: 334px !important;
        margin-right: 0;
    }

    .grid_7 .carousel-article .caroufredsel_wrapper{
        width: 393px !important;
    }
    .grid_7 .carousel-article .carousel-li > li{
        width: 393px !important;
        margin-right: 0;
    }

    .grid_8 .carousel-article .caroufredsel_wrapper{
        width: 452px !important;
    }
    .grid_8 .carousel-article .carousel-li > li{
        width: 452px !important;
        margin-right: 0;
    }

    .grid_9 .caroufredsel_wrapper .caroufredsel_wrapper{
        width: 511px !important;
    }
    .grid_9 .carousel-article .carousel-li > li{
        width: 511px !important;
        margin-right: 0;
    }

    .grid_12 .carousel-article .caroufredsel_wrapper{
        width: 688px !important;
    }
    .grid_12 .carousel-article .carousel-li > li{
        width: 688px !important;
        margin-right: 0;
    }

    /* HOME PAGE RECENT POSTS WIDGET 
    ------------------------------------------------------------------------- */
    .latest-blog-posts .post-info{
        width: 98px;    
    }

    .latest-blog-posts .post-body{
        width: 216px;
    }

    .latest-blog-posts .post-body .post-meta .title-date{
        width: 156px;
    }
    
    /* ABOUT  
    --------------------------------------------------------------------------*/   
    .team-info .title-position{
        width: 100%;
        left: 0;
        position: relative;
    }


    /* SERVICES
    ------------------------------------------------------------------------- */
    .grid_3 .service-box-1 .icon, 
    .grid_4 .service-box-1 .icon{
        margin: 0 auto 20px;
        float: none;
    }

    .grid_3 .service-box-1 .content, 
    .grid_4 .service-box-1 .content{
        width: 100%;
    }

    .grid_3 .service-box-1 .content .title, 
    .grid_4 .service-box-1 .content .title{
        text-align: center;
    }

    .grid_5 .service-box-1 .content{width: 203px;}
    .grid_6 .service-box-1 .content{width: 262px;}
    .grid_7 .service-box-1 .content{width: 321px;}
    .grid_8 .service-box-1 .content{width: 380px;}
    .grid_9 .service-box-1 .content{width: 439px;}
    .grid_12 .service-box-1 .content{width: 616px;}

    /* PAGES WITH SIDEBAR 
    ------------------------------------------------------------------------- */
    .aside-right, 
    .aside-left{
        width: 196px !important;
    }

    /* PRICING TABLES 
    ------------------------------------------------------------------------- */
    .pricing-table-col.labels{
        margin-top: 51px;
    }
    
    /* PORTFOLIO
    --------------------------------------------------------------------------*/
    .portfolio img{
        width: 100%;
    }
    .carousel-portfolio .carousel-li > li{
        width: 157px !important;
        min-height: 173px !important;
    }
    
    .carousel-portfolio .caroufredsel_wrapper{
        width: 688px !important;
        min-height: 173px !important;
    }

    .grid_12.portfolio-style-1 .portfolio{
        width: 393px;
    }

    .grid_12.portfolio-style-1 .portfolio-info{
        width: 275px;
    }

    .portfolio-pagination .pager{
        width: 548px;
    }

    .grid_3.portfolio-style-1 .portfolio, 
    .grid_4.portfolio-style-1 .portfolio, 
    .grid_6.portfolio-style-1 .portfolio{
        width: 100%;
    }

    .gallery .grid_4.portfolio-style-gallery{
        width: 228px !important;
    }

    /* BLOG 
   --------------------------------------------------------------------------*/
    .post-body, .post-body-container{
        width: 322px;
    }

    .post-body .nivoSlider.blog-slider, 
    .post-body .nivoSlider.blog-slider img{
        width: 322px;
        height: auto;
        min-height: 160px;
    }

    .nivoSlider.blog-slider, 
    .nivoSlider.blog-slider img{
        width: 100%;
    }

    .post-author .info{
        width: 216px;
    }

    #respond .name-container input, #respond .email-container input{
        width: 200px;
    }

    /* CONTACT 
    ------------------------------------------------------------------------- */
    .wpcf7-text{
        width: 220px;
    }

    /* FOOTER
    ------------------------------------------------------------------------- */
    .container_12.copyright-container .grid_6.alpha,
    .container_12.copyright-container .grid_6.omega{
        margin-right: 0px !important;
        margin-left: 0px !important;
        margin-bottom: 10px;
        width: 100% !important;
        text-align: center;
    }

    .footer-breadcrumbs{
        float: none;
        margin: 0 auto;
        text-align: center;
        display: table;
    }
}