/*===================================================================================*/
/*  TABLET PORTRAIT                                                                  */ 
/*===================================================================================*/

    @media only screen and (min-width : 690px) and (max-width : 1000px) { 

        #header .menu { display: none; }
        #header .mobile-btn { display: inline; }

        .stats { width: 49.7%; margin-bottom: 30px; }

        .portfolio-items article { width: 49.5%; }

        .pricetable { width: 100% !important; margin-bottom: 60px; }
        .pricetable:last-child { margin-bottom: 0 !important; }
        
        .contact-form [class*="btn-"] { width: 100%; }

        .bg-section [class*="span"], 
        .bg-section [class*="zt-span"]{ margin-bottom: 30px; }

        .section [class*="span"]:last-child,
        .section [class*="zt-span"]:last-child,
        .bg-section [class*="span"]:last-child,
        .bg-section [class*="zt-span"]:last-child,
        .contact-form [class*="span"],
        .comment-form [class*="span"] { margin-bottom: 0; }

        .section .container, .bg-section .container { padding: 50px 0; }

        .zt-space { height: 10px !important; }

        .project-details li { width: 50%; margin-bottom: 30px; }
        .single-portfolio .container { padding-bottom: 30px; }


        .blog-items, .blog-single { margin: 0 0 60px 0 !important;  }
        .blog-items, .blog-single, .sidebar,
        .entry-tags, .entry-share { float: none; width: 100% !important;  }

        .entry-tags {  margin-bottom: 15px;}

        .entry-wrapper, 
        .author-info, 
        .comm-wrapper { margin-bottom: 30px; padding-bottom: 30px; }

        #footer { padding: 30px 3%; line-height: 1 !important; }
        #footer .footer-logo { float: none; display: block; margin-bottom: 20px; }
        #footer p { display: block; margin-bottom: 20px; }
        #footer .social { float: none; margin-top: -10px; display: inline-block; }
        #footer .social li { padding: 0 10px; }


    }


    
/*===================================================================================*/
/*  MOBILE LANDSCAPE                                                                 */ 
/*===================================================================================*/

    @media only screen and (max-width : 690px) { 

        #header.header-boxed { padding: 0 3%; }
        #header .menu { display: none; }
        #header .mobile-btn { display: inline; }

        .portfolio-items article { width: 100%; }


        .section .container, .bg-section .container { padding: 50px 0; }

        .titles { margin-bottom: 60px; }

        #filtrable a { margin-bottom: 5px; }

        .stats { width: 100%; margin-bottom: 30px; }

        .bg-section [class*="span"], .bg-section [class*="zt-span"] { margin-bottom: 30px; }

        .section [class*="span"]:last-child,
        .section [class*="zt-span"]:last-child,
        .bg-section [class*="span"]:last-child,
        .bg-section [class*="zt-span"]:last-child,
        .contact-form [class*="span"],
        .comment-form [class*="span"] { margin-bottom: 0; }

        .pricetable { width: 100% !important; margin-bottom: 60px; }
        .pricetable:last-child { margin-bottom: 0 !important; }

        .zt-space { height: 10px !important; }

        .project-details li { width: 100%; margin-bottom: 30px; }
        .single-portfolio .container { padding-bottom: 30px; }

        .clients a { margin-left: 0px; margin-right: 0px;  width: 100%; }

        .contact-form [class*="btn-"] { width: 100%; }

        .commentlist .children {  padding: 30px 30px 30px 0;  }
        .commentlist .children .children { padding: 0; }

        .zt-clients a { width: 100% !important; }

        .blog-items, .blog-single { margin: 0 0 60px 0 !important;  }
        .blog-items, .blog-single, .sidebar,
        .entry-tags, .entry-share { float: none; width: 100% !important;  }

        .entry-tags {  margin-bottom: 15px;}

        .entry-wrapper, 
        .author-info, 
        .comm-wrapper { margin-bottom: 30px; padding-bottom: 30px; }


        #footer { padding: 30px 3%; line-height: 1 !important; }
        #footer .footer-logo { float: none; display: block; margin-bottom: 20px; }
        #footer p { display: block; margin-bottom: 20px; }
        #footer .social { float: none; margin-top: -10px; display: inline-block; }
        #footer .social li { padding: 0 5px; }

    }