/* Mobile Portrait View */
@media screen and (max-width:767px) {
    *{
        box-sizing:border-box;
    }
    
    .left, .right, .copyright-txt, .design-by{ 
        float:none;
    }
    
    .container {
        width:auto; 
        padding:0 20px;
    }
        
    .wrap_one{
        width:auto; 
        text-align:center;
    }
    
    .header { 
        width:100%; 
        padding:0; 
        position:relative;
    }
    
    .logo{ 
        float:none; 
        text-align:center; 
        margin:0 auto; 
        padding:8px 15px; 
        position:relative; 
        width: auto; 
        display:table;
    }
    
    /*coloumn css*/
    .post-thumb{ 
        width:100%; 
        float:none; 
        margin:0 0 10px;
    }
    
    /*sidebar css*/
    #sidebar{ 
        width:100%; 
        float:none;
    }
    
    #FrontBlogPost, #wrapfirst, #wrapsecond{ 
        padding:40px 0;
    }
    
    /* --------- Pages ------- */
    .content-area{ 
        width:auto; 
        margin:0; 
        padding:50px 20px;
    }
    
    .site-main{ 
        width:auto; 
        margin:0; 
        padding:0; 
        float:none;
    }
    
    h2.section-title{ 
        font-size:22px; 
        line-height:26px;
    }
    
    /*slider css*/
    #slider{ 
        top:0; 
        margin:0;
    }
    
    .nivo-directionNav a{ 
        top:39% !important;
    }
        
    .nivo-caption, .nivo-controlNav{ 
        display:none !important;
    }
    
    /*footer css */
    .copyright-wrapper{ 
        text-align:center;
    }
    
    .cols-4{ 
        width:100% !important; 
        display:block; 
        margin-right:0; 
        margin-bottom:15%;
    }
    
    /*custom css*/
    h2.section_title{ 
        text-align:center;
    }
    
    /*front blog post*/
    .BlogPosts{ 
        float:none; 
        width:auto; 
        margin:0 0 10% 0;
    }
        
    .wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea{ 
        width:100%;
    }
    
    .welcomecontent, .welcomethumb{ 
        width:auto; 
        float:none; 
        margin:0 0 35px;
    }
    
    .fourbox{ 
        float:none; 
        width:100%; 
        margin:0 0 25px;
    }
    
    .column-3-bx{ 
        float:none; 
        width:100%; 
        margin:0 0 20px; 
    }
    
    #pageholder{ 
        width:100%;
    }
}

/* Mobile Landscape View */
@media screen and (min-width: 481px) and (max-width: 767px){
    *{
        box-sizing:border-box;
    }
    
    .container, .content-area{ 
        width:440px; 
        margin:0 auto;
    }

    .nivo-caption, .nivo-controlNav{ 
        display:none !important;
    }

    .nivo-caption{ 
        width:65%; 
    }

    .slide_info h2{ 
        font-size:20px !important; 
        line-height:30px; 
        text-shadow:1px 0 0 #333;
    }

    .slide_info h2 span{
        font-size:30px !important;
    }

    .slide_info p{ 
        padding:5px 0 !important;  
        font-size:13px !important; 
        display:none;
    }

    .post-thumb{ 
        width:50%; 
        float:left; 
        margin:5px 20px 10px 0;
    }
}

@media screen and (min-width:768px) and (max-width: 980px){
    .fourbox .thumbbx{ 
        height:100px;
    }
    
    .column-3-bx .imagebox{ 
        height:100px;
    }
    
    .header{
        position:relative;
    }
    
    .fourbox{ 
        margin-right:12px;
    }
}

/* Tablet View */
@media screen and (max-width:1169px) and (min-width:768px) { 
    *{
        box-sizing:border-box;
    }
    
    .social-icons a{ 
        box-sizing:content-box; 
        margin-bottom:5px; 
    }
    
    .container { 
        width:auto; 
        padding:0 20px;
    }
    
    .logo{ 
        float:none; 
        text-align:center; 
        margin:0 auto; 
        padding:8px 15px; 
        position:relative; 
        width: auto; 
        display:table;
    }
    
    /*slider css*/
    .nivo-caption{ 
        width:60%; 
        bottom:15%;
    }
    
    .slide_info h2{ 
        font-size:24px !important; 
        line-height:30px; 
    }
    
    .content-area{ 
        width:auto; 
        margin:0; 
        padding:50px 20px;
    }
    
    #sidebar{ 
        width:30%;
    }
    
    .site-main{ 
        width:65%;
    }
    
    .cols-4 h5{ 
        font-size:16px;
    }
    
    /*custom  css*/
    #pageholder{ 
        width:100%;
    }
}

@media screen and (max-width:1169px) and (min-width:981px) { 
    html{
        overflow-x:hidden; 
    }
    
    .logo{ 
        float:left; 
        text-align:left;
    }
    
    .nivo-caption{ 
        bottom:20%;
    }
}

@media screen and (max-width: 980px){
    .toggleMenu{
        display: block;
    }
    
    .sitenav{
        float:none; 
        margin:0; 
        position:relative; 
        overflow-x:hidden; 
        background-color:#fff; 
        border-radius:0; 
        top:0; 
        border-bottom:none; 
    }
    
    .sitenav ul{
        color:#000; 
        width:100% !important; 
        float:none !important; 
        margin:0; 
        padding:0;
    }
    
    .sitenav ul li{
        border-top:1px #cccccc solid; 
        display:block; 
        float:none; 
        text-align:left; 
        border-bottom:none !important
    }
    
    .sitenav ul li a{
        padding:5px 10px !important; 
        display:block; 
        color:#000; 
        border:none;
    }
    
    .sitenav ul li a:hover, .sitenav ul li.current_page_item a{
        color:#fff;  
        border:none !important; 
        border-radius:0;
    }
    
    .sitenav ul li ul, .sitenav ul li ul ul{ 
        display:block !important;
    }
    
    .sitenav ul li ul li a:before{
        content:"\00BB \00a0";
    }
    
    .sitenav ul li ul li a{
        padding-left:20px !important; 
    }
    
    .sitenav ul li ul li a, .sitenav ul li.current-menu-ancestor a.parent{ 
        border:none; 
        border-radius:0;
    }
    
    .sitenav ul li ul li ul li a{
        padding-left:30px !important;
    }
    
    .sitenav ul li ul li ul li ul li a{
        padding-left:40px !important;
    }
    
    .sitenav ul li:hover > ul{ 
        background:none !important; 
        box-shadow:none;
    }
    
    .sitenav ul li:hover > ul{ 
        background: transparent !important; 
        width:auto !important; 
        display:block; 
        position: relative !important; 
        left:0; 
        right:0; 
        top:0; 
        padding:0;
    }
    
    .sitenav ul li:hover ul li ul, .sitenav ul li:hover ul li:hover > ul, .sitenav ul li:hover ul li:hover > ul li ul{  
        background: transparent !important; 
        display:block; 
        position:relative !important;  
        right:0; 
        left:0; 
        top:0;
    }
    
    .sitenav ul li:hover ul li:hover ul, .sitenav ul li:hover ul li:hover ul li:hover ul{ 
        left:0 !important;
    }
}