/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (min-width: 959px) {

}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
        #bodychild{width:100%; margin:0}
        #logo h1{font-size:20px; line-height:20px;}

        .sf-menu a{padding:0px 22.3px 0px 17.5px!important;}


        /*============================================== CONTENT SECTION ==============================================*/
        .rp-widget li h3{ font-size:11px;}

        .box .three.columns{ width: 220px;}

        /* pricing box */
        ul.list-box .price{font-size:20px !important;}
        ul.list-box > li{width:185px !important;}

        ul#col5.list-box > li{
                width:148px !important;
        }
        ul#col5.list-box li.current{width:150px !important;}

        /* list cservices */
        ul.services li{ width:170px;}


        /*============================================== PORTFOLIO SECTION ==============================================*/

        #frame-filter{ width:50%;}

        /* Portfolio 2 Column */
        .ts-display-pf-col-2 li{width:364px;}
        .ts-display-pf-col-2 .ts-display-pf-img{
                width:364px;
        }


        /* Portfolio 3 Column */
        .ts-display-pf-col-3 li{width:242px;}
        .ts-display-pf-col-3 .ts-display-pf-img{
                width:242px;
        }


        /* Portfolio 4 Column */
        .ts-display-pf-col-4 li{width:179px;}
        .ts-display-pf-col-4 .ts-display-pf-img{
                width:179px;
        }



}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
        #bodychild{width:100%; margin:0}
        #outerheader{height:auto;}

        /*============================================== HEADER SECTION ==============================================*/
        #logo{text-align:center; float:none; display:block}
        #logo img{ max-width:100%}

        #sn{ float:none;}

        #navigation{text-align:center; clear:both; height:auto; background:transparent}
        .sf-menu a{background:transparent !important; border:0 !important;}
        .sf-menu > li{border:0 !important; display:none;}
        nav{margin:0 0 20px 0; float:none; }
        .js .tinynav { display: block; display: inline-block; text-align:left ; margin:0 0 0 0; width:100%}/* mobile dropdown */
    .js #topnav { display: none }

        #topright{float:none; padding:0 0 20px 0; text-align:center !important; font-size:12px; width:100%; clear:both; display:block}


        /*============================================== SLIDER SECTION ==============================================*/
        #slidercontainer{ margin-top:0px;}
        #slider{ background:transparent}
        .flexslider .slides img{position:static; right:0;}
        .flex-caption{width:50%; top:10%;}
        .flex-caption h1{font-size:16px; line-height:20px; margin-bottom:5px;}
        .flex-caption p{ font-size:11px;}
        .flex-control-nav{ bottom:0px;}

        /*============================================== CONTENT SECTION ==============================================*/
        #outermain{padding:20px 0 20px 0;}
        #content.positionright, #content.positionleft{background:transparent;}
        .padcontent{padding-right:0;}
        #content.positionright .padcontent{padding-left:0; padding-right:0}

        .box{ padding:38px 20px 38px 20px;}
        .box .seven.columns, .box .three.columns{ width:100%;}

        .tabcontainer{margin-bottom:20px;}
        ul.tabs{height:auto;}
        ul.tabs li{font-size:12px; display:block; float:none; overflow:visible; height:auto; border:1px solid #eaeaea; border-width:0px 1px 1px 1px}
        ul.tabs li:first-child{ border-top:1px solid #eaeaea;}
        ul.tabs li.active{border-bottom:1px solid #eaeaea;}
        ul.tabs li a{text-transform:capitalize;}
        h2.trigger{font-size:12px;}

        /* pricing box */
        ul.list-box > li{margin-bottom:20px; width:100% !important; border-width:1px; border-radius:3px;}
        ul.list-box li.current{margin-top:0;}
        ul.list-box li.last{border-width:1px}

        /* list client */
        ul.services li{ width:190px; margin-bottom:15px;}
        ul.services li:nth-child(3) { border-left:0px; padding-left:0px;}


        /*============================================== BLOG SECTION ==============================================*/
        .post{padding-bottom:30px; margin-bottom:30px;}
        .posttitle{margin-bottom:5px;}
        .wp-pagenavi{margin-bottom:30px;}

        /*============================================== SIDEBAR SECTION ==============================================*/
        #sidebar .widget-container{margin-bottom:20px; padding-bottom:20px;}
        .testimonial-widget .quote{padding:15px 0 0 0;}


        /*============================================== PORTFOLIO SECTION ==============================================*/
        #frame-filter{ width:90%; margin-top:-10px;}


        /* Portfolio 2 Column */
        .ts-display-pf-col-2 li{width:300px;}
        .ts-display-pf-col-2 .ts-display-pf-img{
                width:300px;
        }


        /* Portfolio 3 Column */
        .ts-display-pf-col-3 li{width:300px;}
        .ts-display-pf-col-3 .ts-display-pf-img{
                width:300px;
        }


        /* Portfolio 4 Column */
        .ts-display-pf-col-4 li{width:300px;}
        .ts-display-pf-col-4 .ts-display-pf-img{
                width:300px;
        }

        #contactform textarea{ width:100%;}

}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
        #bodychild{width:100%;}


        /*============================================== PORTFOLIO SECTION ==============================================*/

        /* Portfolio 2 Column */
        .ts-display-pf-col-2 li{width:420px;}
        .ts-display-pf-col-2 .ts-display-pf-img{
                width:420px;
        }


        /* Portfolio 3 Column */
        .ts-display-pf-col-3 li{width:420px;}
        .ts-display-pf-col-3 .ts-display-pf-img{
                width:420px;
        }



        /* Portfolio 4 Column */
        .ts-display-pf-col-4 li{width:420px;}
        .ts-display-pf-col-4 .ts-display-pf-img{
                width:420px;
        }




}


/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
        #bodychild{width:100%;}

        /*============================================== SLIDER SECTION ==============================================*/

        .flex-caption{ display:none;}


        /*============================================== BLOG SECTION ==============================================*/
        .commentlist ol{padding-left:20px;}
        .comment-body{margin:0;}

        /* list cservices */
        ul.services li{ width:300px; border:0px; padding:0px;}

        /*============================================== PORTFOLIO SECTION ==============================================*/
        #frame-filter{ width:100%; margin-top:0px;}
        #filter{ border:0px; float:none;}
        #filter li{ border:1px solid #eaeaea; float:none; display:inline-block; margin:0px 1px 5px 1px;}
        #filter li:first-child{border-left:1px solid #eaeaea;}
        #filter li:last-child{border-right:1px solid #eaeaea;}
}