/* 
    Document   : responsive
    Created on : Mar 13, 2014, 11:37:23 AM
    Author     : Husen
    Description:
        Purpose of the stylesheet follows.
*/
@media all and (max-width:1156px){
    .grid{
        width: 1024px;
    }
    .widgets .widget{
        width: 321px;
    }
    .external{
        width: 256px;
    }
}
@media all and (max-width:1080px){
    .grid{
        /*border: 1px red solid;*/
        width: 960px;
    }
    .widgets .widget{
        width: 300px;
    }
    .slides .caption{
        /*left: 16%;*/
        width: 600px;
        padding: 25px;
        top: 34%;
    }
    .caption p{
        margin-top: 15px;
        font-size: 15px;
    }
    .external{
        width: 240px;
        height: 300px;
    }
    .external span{
        padding: 19px;
    }
    .external span:before{
        left: 22px;
    }
    .product-left{
        width: 500px;
    }
    .productview-thumb-holder{
        width: 500px;
    }

    .grids{
        width: 960px;
    }
    /*content*/
    .column-left{
        width: 400px;
    }
    .column-right{
        width: 540px;
    }
    .form input[type="text"], .form textarea{
        width: 358px;
    }

    /*products*/
    .product{
        width: 460px;
    }
    .product .des{
        width: 420px;
    }
    /*blogs*/
    .blog .text-blog{
        width: 354px;
        padding: 20px;
    }
    .blog .text-blog.full{
        width: 498px;
    }
}

@media all and (max-width:980px){
    .grid{
        /*border: 1px red solid;*/
        width: 768px;
    }
    .main-nav li a{
        padding: 60px 7px 20px;
    }
    .main-nav{
        margin: 0px;
    }
    .widgets .widget{
        margin: 25px 10px;
        width: 236px;
    }
    .external{
        height: auto;
        width: 192px;
    }
    .external img{
        height: 200px;
        min-height: 200px;
    }

    .slides .caption {
        /*left: 23%;*/
        padding: 18px;
        top: 34%;
        width: 500px;
    }
    .caption h1{
        font-size: 36px;
        line-height: 50px;
    }
    /*content*/
    .grids{
        width: 768px;
    }
    .column-left{
        width: 350px;
    }
    .column-right{
        width: 398px;
    }
    .form input[type="text"], .form textarea{
        width: 376px;
    }
    .select-form{
        width: 396px;
    }
    .select-form select{
        width: 410px;
    }
    .product_wrapper{
        float: none;
        width: 100%;
    }    
    .product{
        width: 368px;
        margin-right: 32px;
        height: 222px;
    }
    .product .des{
        width: 95%;
    }

    /*blogs*/
    .blog .text-blog{
        width: 222px;
        padding: 15px;
    }

    .blog .text-blog.full{
        width: 366px;
        padding: 15px;
    }
    .product-left{
        width: 384px;
    }
    .product-right{
        width: 340px;
    }
}
@media all and (max-width:788px){
    .grids,
    .grid {
        width: 489px;
    }
    .logo{
        width: 90px;
    }
    .main-nav li a{
        font-size: 14px;
        padding: 60px 7px 9px;
    }
    .main-nav li:hover ul{
        width: 180px; 
    }
    .main-nav li li a{
        font-size: 14px;
    }
    .slides .caption{
        padding: 15px;
        top: 52%;
        width: 450px;
    }
    .caption h1{
        font-size: 30px;
        line-height: 37px;
    }
    .caption p{
        margin-top: 10px;
        font-size: 12px;
        margin-bottom: 0px;
    }
    .widgets .widget{
        margin: 20px 10px;
        width: 143px;
    }
    .widget h2{
        margin-bottom: 10px;
    }
    .external{
        height: 150px;
        width: 122px;
    }
    .external span{
        padding: 10px;
    }
    .external img{
        height: auto;
        min-height: initial;
    }
    .external span:before{
        left: 10px;
    }
    .footer *{
        text-align:center;
    }
    .footer .left,
    .footer .right{
        float: none !important;
    }
    .footer ul{
        display: inline-block;
    }
    .column-left,
    .column-right{
        width: 100%;
        /*margin: 0px;*/
    }
    .product_wrapper{
        float: none;
        width: 100%;
    }   
    .product{
        width: 100%;
        margin-right: 0px;
    }
    .product-left,
    .product-right{
        width: 100%;
    }
    .pagination{
        float: none;
    }
    .blog .text-blog{
        width: 323px;
        padding: 10px;
    }
}

@media all and (max-width:510px){

    .grid{
        /*border: 1px red solid;*/
        /*width: 480px;*/
        width: 96%;
        margin: 0 2%;
    }
    .header{
        padding: 0px;
    }
    .header .grid{
        width: 100%;
        margin: 0px;
    }
    .header .grid >*{
        width: 96%;
        margin: 10px 2%;
    }
    .logo{
        width: 100%;
        float: none;
    }
    .slides{
        top: 0px;
        margin-bottom: 0px;
    }
    .slides .caption {
        left: 0px;
        padding: 10px 0px;
        bottom: 0px;
        width: 100%;
        top: initial;
        height: auto;
        border-radius: 0px;
    }
    .caption h1{
        font-size: 28px;
        line-height: 40px;
    }
    .caption p{
        margin-top: 7px;
        font-size: 14px;
        padding: 8px;
        margin-bottom: 0px;
    }
    .main-nav{
        display: none;
    }
    .main-nav.responsive-menu{
        display: block;
    }
    .img-menu{
        display: none;
    }
    .widgets .widget{
        width: 100%;
        margin: 10px 0px;
    }
    .external{
        height: 100%;
        width: 100%;
    }
    .external-wrapper{
        padding: 20px 0px;
    }
    .external img{
        min-width: 100%;
        height: auto;
    }
    .external span{
        padding: 12px;
        width: 100%;
    }
    .footer{
        float: none;
        clear: both;
    }
    .footer .grid > *{
        text-align: center;
        width: 100%;
        float: none;
        margin:  0 auto;
    }
    .after{
        height: auto;
    }
    /*content*/
    .grids{
        width: 96%;
        margin: 0 2%;
    }
    [class^='column-'],
    [class*='column-']{
        width: 96%;
        width: 100%;
    }
    .form input[type="text"], .form textarea{
        width: 100%;
        padding: 10px 0px;
    }
    .select-form{
        width: 100%;
    }
    .select-form select{
        width: 105%;   
    }
    .form{
        margin: 0px;
    }

    .product-wrapper{
        width: 100%;
    }
    .product{
        width: 100%;
        margin-right: 0px;
        margin-bottom: 25px;
        /*height: auto;*/
    }
    .product .des{
        width: 89%;
/*        margin: 2%;
        padding: 0px;*/
    }

    /*blogs*/
    .blog .text-blog.full,
    .blog .text-blog{
        width: 98%;
        padding: 1%;
    }
    .product-right,
    .product-left{
        width: 100%;
        margin: 5px 0px;
    }

}