/* Mobile Portrait View */
@media screen and (max-width: 767px) {
    .left, .right, .copyright-txt, .design-by {
        float: none;
    }

    .container {
        width: auto;
        padding: 0 20px;
    }

    .header {
        width: 100%;
        padding: 10px 0;
    }

    .header_right {
        float: none;
        text-align: center;
        width: auto;
        padding: 15px 0;
    }

    .logo {
        width: auto;
        float: none;
        text-align: center;
        padding: 0;
    }

    .logo h1 {
        font-size: 34px;
    }

    .site-topbar {
        height: 35px;
    }

    .headline {
        height: 35px;
        line-height: 35px;
        width: 25%;
    }

    .headline span {
        font-size: 10px;
        display: block;
        padding: 0 15px;
        background-position: 0 11px;
    }

    .site-topbar-wrap::before {
        height: 35px;
    }

    .headline span::before {
        border-left: 25px solid #111;
        border-top: 35px solid transparent;
    }

    .topright {
        width: 67%;
    }

    .newsticker {
        width: 80%;
        padding: 7px 0;
    }

    .togglediv {
        line-height: 35px;
    }

    .cat-3-col {
        float: none;
        width: 100%;
        margin: 0 0 5px;
        margin-bottom: 60px;
    }

    .catleft-1 img {
        display: table;
    }

    .lists_cats {
        float: none;
        width: 100%;
        margin: 0 0 40px;
    }

    /*sidebar css*/
    #sidebar {
        width: 100%;
        float: none;
    }

    #sidebar.left {
        float: none;
    }

    /* --------- Pages ------- */
    .content-area {
        width: auto;
        margin: 0;
        padding: 50px 20px 0 0;
    }

    .site-main {
        width: auto;
        margin: 0 0 30px;
        padding: 0;
        float: none;
    }

    h2.section-title {
        font-size: 22px;
        line-height: 26px;
    }

    /*footer css */
    .copyright-wrapper {
        text-align: center;
    }

    .cols-4 {
        width: 100% !important;
        display: block;
        margin-right: 0;
        margin-bottom: 30px;
    }

    .widget-column-4 {
        margin-bottom: 0;
    }

    .footerlogo {
        width: 170px;
        padding: 15px 20px;
    }

    /*custom css*/
    h2.section_title {
        text-align: center;
    }

    /*front blog post*/
    .BlogPosts {
        float: none;
        width: auto;
        margin: 0 0 10% 0;
    }

    .post-thumb {
        width: 30%;
        float: left;
        margin: 0 25px 15px 0;
    }

    .wpcf7 input[type="text"], .wpcf7 input[type="tel"], .wpcf7 input[type="email"], .wpcf7 textarea {
        width: 100%;
    }

    #menubar {
        background-color: transparent !important;
    }
}

@media screen and (min-width: 300px) and (max-width: 480px) {
    .post-thumb {
        width: 100%;
        float: none;
        margin: 0 0 15px;
    }

}

/* Mobile Landscape View */
@media screen and (min-width: 481px) and (max-width: 767px) {
    .container {
        width: 440px;
    }

}

/* Tablet View */
@media screen and (max-width: 1299px) and (min-width: 768px) {
    .social-icons a {
        box-sizing: content-box;
        margin-bottom: 5px;
    }

    .container {
        width: auto;
        padding: 0 20px;
    }

    .owl-carousel {
        margin: 0;
        z-index: 0 !important;
    }

    .logo {
        width: 45%;
        padding: 10px 0;
    }

    .header_right {
        width: 63%;
    }

    .logo h1 {
        font-size: 30px;
    }

    .content-area {
        width: auto;
        margin: 0;
        padding: 50px 20px 0 0;
    }

    #sidebar {
        width: 23%;
    }

    .site-main {
        width: 45.5%;
    }

    .cols-4 {
        margin: 0 18px 0 0;
    }

    .footer-col-4 {
        min-height: 355px;
    }

    .cols-4 h5 {
        font-size: 16px;
    }

    ul.footer-cats {
        -moz-column-count: 1;
    }

    .togglediv {
        line-height: 50px;
    }

    .cat-3-col {
        width: 23%;
    }

    .cat-3-col h3 {
        text-transform: none;
    }

    .catleft-1 {
        margin-bottom: 30px;
    }

    .catleft-1 img {
        display: table;
    }

    .catwrapslider {
        width: 50%;
    }

}

@media screen and (min-width: 768px) and (max-width: 980px) {
    .newsticker {
        width: 90%;
    }

    .lists_cats {
        float: none;
        width: 100%;
        margin: 0 0 40px;
    }

    #menubar {
        background-color: transparent !important;
    }
}

@media screen and (max-width: 1299px) and (min-width: 981px) {
    html {
        overflow-x: hidden;
    }

    .leftwrap {
        width: 40%;
        margin-right: 0;
        float: left;
    }

    .leftwrap .leftthumbbx {
        width: 160px;
    }

    .leftwrap h2 {
        font-size: 20px;
    }

    .rightwrap {
        width: 60%;
        float: right;
    }

    .logo h1 {
        font-size: 40px;
    }

    .lists_cats {
        float: left;
        margin: 0 30px 30px 0;
        width: 46%;
    }

    .lists_cats .catThumb {
        height: 115px;
    }

    .site-main {
        width: 47.5%;
    }
}

@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;
    }

    .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 {
        border: none;
    }

    .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;
    }

    /*top menu*/
    .TopMenu {
        display: block;
    }

    .shortingmenu {
        margin: 0;
        top: 0;
        position: relative;
        overflow-x: hidden;
        width: 100%;
    }

    .shortingmenu ul {
        color: #000;
        width: 100% !important;
        float: none !important;
        margin: 0;
        padding: 0;
    }

    .shortingmenu ul li {
        border-top: 1px #d3d3d3 solid;
        display: block;
        float: none;
        text-align: left;
        border-right: none;
    }

    .shortingmenu ul li a {
        display: block;
        color: #000;
        text-align: left;
        border: none;
    }

    .shortingmenu ul li a:hover {
        color: #ffffff;
    }

    .shortingmenu ul li ul, .shortingmenu ul li ul ul {
        display: block !important;
    }

    .shortingmenu ul li ul li a:before {
        content: "\00BB \00a0";
    }

    .shortingmenu ul li ul li {
        border-bottom: 1px solid transparent !important;
    }

    .shortingmenu ul li ul li a {
        padding-left: 20px !important;
    }

    .shortingmenu ul li ul li ul li a {
        padding-left: 30px !important;
    }

    .shortingmenu ul li ul li ul li ul li a {
        padding-left: 40px !important;
    }

    .shortingmenu ul li:hover > ul {
        background: none !important;
    }

    .shortingmenu ul li:hover > ul {
        background: transparent !important;
        width: auto !important;
        display: block;
        position: relative !important;
        left: 0;
        right: 0;
        top: 0;
    }

    .shortingmenu ul li:hover ul li ul, .shortingmenu ul li:hover ul li:hover > ul, .shortingmenu ul li:hover ul li:hover > ul li ul {
        background: transparent !important;
        display: block;
        position: relative !important;
        right: 0;
        left: 0;
        top: 0;
    }

    .shortingmenu ul li:hover ul li:hover ul, .shortingmenu ul li:hover ul li:hover ul li:hover ul {
        left: 0 !important;
    }

    .logo img {
        height: auto;
    }

}