/* ========================================================================== 
    RESPONSIVE STYLES - DEVICES RESOLUTION
============================================================================= */

@media only screen and (min-width: 320px) and (max-width: 479px){
    .container{
        max-width: 300px;
    }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11, 
    .grid_12{
        float: left;
        width: 270px;
    }
    
    .page-content .row{
        margin-bottom: 0px;
    }

    .page-content *[class*="grid_"]{
        margin-bottom: 80px;
    }

    *[class*="grid_"] *[class*="grid_"]:last-child{
        margin-bottom: 0;
    }

    *[class*="grid_"] *[class*="grid_"]{
        margin-left: 0 !important;
    }
  
    
    
    .tp-caption.list-left , 
    .tp-caption.list-right {
       display: none;
    }
    
    .grid_3 .numbers-counter li, 
    .grid_4 .numbers-counter li, 
    .grid_5 .numbers-counter li, 
    .grid_6 .numbers-counter li, 
    .grid_8 .numbers-counter li, 
    .grid_7 .numbers-counter li, 
    .grid_9 .numbers-counter li, 
    .grid_12 .numbers-counter li{
        width: 134px;
        height: 134px;
    }
    
    .grid_3 .numbers-counter li span, 
    .grid_4 .numbers-counter li span, 
    .grid_5 .numbers-counter li span, 
    .grid_6 .numbers-counter li span, 
    .grid_7 .numbers-counter li span, 
    .grid_8 .numbers-counter li span, 
    .grid_9 .numbers-counter li span, 
    .grid_12 .numbers-counter li span{
        padding-top: 35px;
    }
    
    .latest-posts li.post{
        width: 100%;
    }
    
    .tabs li{
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    
    .tabs.vertical, 
    .tab-content-wrap.vertical{
        width: 100%;
    }
    
    .tab-content-wrap.vertical .tab-content{
        padding-left: 0;
        padding-top: 30px;
    }
   
    
    .tabs.vertical.services-tabs, 
    .tab-content-wrap.vertical.services-tab-content-wrap{
        width: 100%;
    }

 
    
    .portfolio-items-holder .grid_6{
        width: 100% !important;
        margin-bottom: 2px;
    }
    
    .portfolio-items-holder .grid_4{
        width: 100% !important;
        margin-bottom: 2px;
    }
    
    .portfolio-items-holder .grid_3{
        width: 100% !important;
        margin-bottom: 2px;
    }
    
    .container.full .portfolio-items-holder .isotope-item{
        width: 100%;
        margin-bottom: 2px;
    }
    
    
    #post-slider.nivoSlider{
        min-height: 142px;
    }
    
    .post-body{
        padding-left: 0;
        float: left;
        width: 100%;
    }
    
    #respond .name-container input, #respond .email-container input{
        width: 100%;
    }
    
   
    .grid_12.blog-posts .blog-post.isotope-item .post-media-container iframe{
        min-height: 125px;
    }
    
    
}

@media only screen and (min-width: 480px) and (max-width: 767px){
    .container{
        max-width: 460px;
    }

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11, 
    .grid_12{
        float: left;
        width: 430px;
    }
    
    .page-content .row{
        margin-bottom: 0px;
    }

    .page-content *[class*="grid_"]{
        margin-bottom: 80px;
    }

    *[class*="grid_"] *[class*="grid_"]:last-child{
        margin-bottom: 0;
    }

    *[class*="grid_"] *[class*="grid_"]{
        margin-left: 0 !important;
    }
    

    
    .tp-caption.list-left , 
    .tp-caption.list-right {
       display: none;
    }
    
    .grid_3 .numbers-counter li, 
    .grid_4 .numbers-counter li, 
    .grid_5 .numbers-counter li, 
    .grid_6 .numbers-counter li, 
    .grid_8 .numbers-counter li, 
    .grid_7 .numbers-counter li, 
    .grid_9 .numbers-counter li, 
    .grid_12 .numbers-counter li{
        width: 142px;
        height: 142px;
    }
    
    .grid_3 .numbers-counter li span, 
    .grid_4 .numbers-counter li span, 
    .grid_5 .numbers-counter li span, 
    .grid_6 .numbers-counter li span, 
    .grid_7 .numbers-counter li span, 
    .grid_8 .numbers-counter li span, 
    .grid_9 .numbers-counter li span, 
    .grid_12 .numbers-counter li span{
        padding-top: 35px;
    }
    
    .latest-posts li.post{
        width: 100%;
    }
    
    .tabs li{
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    
    .tabs.vertical, 
    .tab-content-wrap.vertical{
        width: 100%;
    }
    
    .tab-content-wrap.vertical .tab-content{
        padding-left: 0;
        padding-top: 30px;
    }
    


    
    .tabs.vertical.services-tabs, 
    .tab-content-wrap.vertical.services-tab-content-wrap{
        width: 100%;
    }


    
    .portfolio-items-holder .grid_6{
        width: 100% !important;
        margin-bottom: 2px;
    }
    
    .portfolio-items-holder .grid_4{
        width: 100% !important;
        margin-bottom: 2px;
    }
    
    .portfolio-items-holder .grid_3{
        width: 100% !important;
        margin-bottom: 2px;
    }
    
    .container.full .portfolio-items-holder .isotope-item{
        width: 100%;
        margin-bottom: 2px;
    }


    

}

@media only screen and (min-width: 768px) and (max-width: 991px){
    .container {
        max-width: 756px;
    }
    .grid_1 {
        width: 33px !important;
    }
    .grid_2 {
        width: 96px !important;
    }
    .grid_3 {
        width: 159px !important;
    }
    .grid_4 {
        width: 222px !important;
    }
    .grid_5 {
        width: 285px !important;
    }
    .grid_6 {
        width: 348px !important;
    }
    .grid_7 {
        width: 411px !important;
    }
    .grid_8 {
        width: 474px !important;
    }
    .grid_9 {
        width: 537px !important;
    }
    .grid_10 {
        width: 600px !important;
    }
    .grid_11 {
        width: 663px !important;
    }
    .grid_12 {
        width: 726px !important;
    }
    

    .tp-caption.list-left p, 
    .tp-caption.list-right p{
        font-size: 14px !important;
    }
    
    .grid_3 .numbers-counter li{
        width: 159px;
        height: 159px;
    }
    
    .grid_3 .numbers-counter li span{
        padding-top: 45px;
    }
    
    .grid_4 .numbers-counter li{
        width: 110px;
        height: 110px;
    }
    
    .grid_4 .numbers-counter li span{
        padding-top: 25px;
    }
    
    .grid_5 .numbers-counter li{
        width: 141px;
        height: 141px;
    }
    
    .grid_5 .numbers-counter li span{
        padding-top: 35px;
    }
    
    .grid_6 .numbers-counter li{
        width: 115px;
        height: 115px;
    }
    
    .grid_6 .numbers-counter li span{
        padding-top: 27px;
    }
    
    .grid_7 .numbers-counter li{
        width: 136px;
        height: 136px;
    }
    
    .grid_7 .numbers-counter li span{
        padding-top: 32px;
    }
    
    .grid_8 .numbers-counter li{
        width: 117px;
        height: 117px;
    }
    
    .grid_8 .numbers-counter li span{
        padding-top: 28px;
    }
    
    .grid_9 .numbers-counter li{
        width: 133px;
        height: 133px;
    }
    
    .grid_9 .numbers-counter li span{
        padding-top: 30px;
    }
    
    .grid_12 .numbers-counter li{
        width: 144px;
        height: 144px;
    }
    
    .grid_12 .numbers-counter li span{
        padding-top: 37px;
    }
       
    
    .latest-posts li.post{
        width: 159px;
    }
    
    .tabs li{
        width: 100%;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    }
    
    .tabs.vertical, 
    .tab-content-wrap.vertical{
        width: 100%;
    }
    
    .tab-content-wrap.vertical .tab-content{
        padding-left: 0;
        padding-top: 30px;
    }
    

    
    .chart{
        width: 51px;
        height: 51px;
        min-height: 120px;
        margin-bottom: 20px;
    }
    
    .skills-circular.big .chart{
        width: 96px;
        height: 96px;
    }
    
    .skills-circular.big .percent{
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
    
    .skills-circular.big canvas{
        height: 72px !important;
        width: 72px !important;
    }
    
    .skills-circular.big li{
        margin-right: 0;
        margin-left: 25px;
    }
    
    .widget.social-feed li:nth-child(2n){
        margin-right: 0;
    }
    
    .widget.social-feed li:nth-child(3n){
        margin-right: 1px;
    }
    
    .portfolio-items-holder .grid_6{
        width: 361px !important;
    }
    
    .portfolio-items-holder .grid_4{
        width: 240px !important;
    }
    
    .portfolio-items-holder .grid_3{
        width: 180px !important;
    }
    
    .portfolio-img-container figcaption .portfolio-item-like{
        float: none;
    }
    
    .container.full .portfolio-items-holder .isotope-item{
        width: 33%;
    }
    
    .blog-posts.blog-post-small-image .post-info-container .date-category{
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .blog-posts.blog-post-small-image .post-info-container .post-info{
        padding-left: 0;
    }
    
    .blog-posts.isotope.cols li.blog-post.isotope-item{
        width: 100%;
    }
    
    #post-slider.nivoSlider{
        min-height: 142px;
    }
    
    .blog-post.isotope-item iframe{
        min-height: 142px;
    }
    
    .blog-posts.isotope.full li.blog-post.isotope-item{
        width: 348px;
    }
    
    .grid_12.blog-posts .blog-post.isotope-item .post-media-container iframe{
        min-height: 125px;
    }
    
    .blog-posts.isotope.full li.blog-post.isotope-item .nivoSlider{
        min-height: 125px;
    }
    
    .map_canvas{
        height: 300px;
    }
       
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 972px;
    }
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11 {
        float: left;
    }
    .grid_1 {
        width: 51px;
    }
    .grid_2 {
        width: 132px;
    }
    .grid_3 {
        width: 213px;
    }
    .grid_4 {
        width: 294px;
    }
    .grid_5 {
        width: 375px;
    }
    .grid_6 {
        width: 456px;
    }
    .grid_7 {
        width: 537px;
    }
    .grid_8 {
        width: 618px;
    }
    .grid_9 {
        width: 699px;
    }
    .grid_10 {
        width: 780px;
    }
    .grid_11 {
        width: 861px;
    }
    .grid_12 {
        width: 942px;
    }


    
    .grid_3 .numbers-counter li{
        width: 105px;
        height: 105px;
    }
    
    .grid_3 .numbers-counter li span{
        padding-top: 15px;
    }
    
    .grid_4 .numbers-counter li{
        width: 146px;
        height: 146px;
    }
    
    .grid_4 .numbers-counter li span{
        padding-top: 35px;
    }
    
    .grid_5 .numbers-counter li{
        width: 124px;
        height: 124px;
    }
    
    .grid_5 .numbers-counter li span{
        padding-top: 23px;
    }
    
    .grid_6 .numbers-counter li{
        width: 151px;
        height: 151px;
    }
    
    .grid_6 .numbers-counter li span{
        padding-top: 37px;
    }
    
    .grid_7 .numbers-counter li{
        width: 133px;
        height: 133px;
    }
    
    .grid_7 .numbers-counter li span{
        padding-top: 31px;
    }
    
    .grid_8 .numbers-counter li{
        width: 153px;
        height: 153px;
    }
    
    .grid_8 .numbers-counter li span{
        padding-top: 38px;
    }
    
    .grid_9 .numbers-counter li{
        width: 138px;
        height: 138px;
    }
    
    .grid_9 .numbers-counter li span{
        padding-top: 34px;
    }
    
    .grid_12 .numbers-counter li{
        width: 156px;
        height: 156px;
    }
    
    .grid_12 .numbers-counter li span{
        padding-top: 40px;
    }
    
    .latest-posts li.post{
        width: 213px;
    }
    
    .team-alternative li{
        width: 227px;
    }
    
    .team-member-hover .btn-medium{
        left: 65px;
    }
    
    .team-member-hover .team-member-info h5{
        padding-top: 40px;
    }
    
    .chart{
        width: 51px;
        height: 51px;
    }
    
    .skills-circular.big .chart{
        width: 72px;
        height: 72px;
    }
    
    .skills-circular.big .percent{
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
    
    .skills-circular.big canvas{
        height: 72px;
        width: 72px;
    }
    
    .widget.social-feed li:nth-child(4n){
        margin-right: 1px;
    }
    
    .widget.social-feed li:nth-child(3n){
        margin-right: 0;
    }
    
    .portfolio-items-holder .grid_6{
        width: 470px;
    }
    
    .portfolio-items-holder .grid_4{
        width: 312px;
    }
    
    .portfolio-items-holder .grid_3{
        width: 234px;
    }
    
    .container.full .portfolio-items-holder .isotope-item{
        width: 33%;
    }
    
    .blog-posts.isotope.cols li.blog-post.isotope-item{
        width: 334px;
    }
    
    #post-slider.nivoSlider{
        min-height: 142px;
    }
    
    .blog-post.isotope-item iframe{
        min-height: 142px;
    }
    
    .blog-posts.isotope.full li.blog-post.isotope-item{
        width: 294px;
    }
    
    .grid_12.blog-posts .blog-post.isotope-item .post-media-container iframe{
        min-height: 125px;
    }
    
    .blog-posts.isotope.full li.blog-post.isotope-item .nivoSlider{
        min-height: 125px;
    }
    
    .map_canvas{
        height: 300px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }
    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11, 
    .grid_12{
        float: left;
    }
    .grid_1 {
        width: 70px;
    }
    .grid_2 {
        width: 170px;
    }
    .grid_3 {
        width: 270px;
    }
    .grid_4 {
        width: 370px;
    }
    .grid_5 {
        width: 470px;
    }
    .grid_6 {
        width: 570px;
    }
    .grid_7 {
        width: 670px;
    }
    .grid_8 {
        width: 770px;
    }
    .grid_9 {
        width: 870px;
    }
    .grid_10 {
        width: 970px;
    }
    .grid_11 {
        width: 1070px;
    }
    .grid_12 {
        width: 1170px;
    }
}


@media (min-width: 1340px){
    .container.full .portfolio-items-holder .isotope-item{
        width: 16.5%;
    }
}