/* Responsive Styles
================================================== */


/* All size smaller than 1301 */

@media only screen and (max-width: 1300px) {
    .container,
    .boxed-layout #page,
    .boxed-layout-small #page {
        #max-width: 1023px;
    }
    .boxed-layout .container,
    .boxed-layout-small .container {
        max-width: 904px;
    }
    .four-column-full-width {
        width: 33.33%;
    }
}


/* All size smaller than 1024
================================================== */

@media only screen and (max-width: 1023px) {
    .container,
    .boxed-layout #page,
    .boxed-layout-small #page,
    #site-title a img {
        width: 767px;
    }
    .boxed-layout #page,
    .boxed-layout-small #page {
        overflow: hidden;
    }
    .boxed-layout .container,
    .boxed-layout-small .container,
    .boxed-layout #site-title a img {
        width: 668px;
    }
    .widget-title {
        font-size: 22px;
        line-height: 30px;
    }
    .slider-content .slider-title a {
        font-size: 24px;
        line-height: 31px;
    }
    .slider-content .slider-text h3 {
        font-size: 15px;
        line-height: 22px;
    }
    #primary,
    #primary-c,
    #secondary {
        margin-left: 0px;
        margin-bottom: 50px;
        width: 100%!important;
        border: none;
    }
    #secondary {
        float: none;
        padding: 0 1%;
    }
    .left-sidebar-layout #secondary {
        float: none;
        padding-right: 0px;
        border: none;
    }
    /* ----- Column ----- */
    .column {
        margin: 0 -15px;
    }
    .two-column,
    .three-column,
    .four-column {
        padding: 0 15px 40px;
    }
    .two-column,
    .four-column,
    .three-column,
    .four-column-full-width,
    .business-sidebar .three-column,
    .boxed-layout-small .four-column-full-width {
        width: 50%;
    }
    .widget_about_us .two-column,
    .widget_latest_blog .two-column {
        padding: 0 0 30px;
        width: 100%;
    }
    .three-column:nth-child(3n+4),
    .four-column:nth-child(4n+5),
    .column-2:nth-child(2n+3),
    .column-3:nth-child(3n+4),
    .column-4:nth-child(4n+5) {
        clear: none;
    }
    .three-column:nth-child(2n+3),
    .four-column:nth-child(2n+3) {
        clear: both;
    }
    #colophon .widget-area {
        margin: 0;
        display: block;
    }
    #colophon .column-1,
    #colophon .column-2,
    #colophon .column-3,
    #colophon .column-4 {
        border-right: none;
        width: 100%;
        float: none;
        padding: 0;
        display: block;
    }
}


/* All Mobile Screen ( smaller than 1024px )
================================================== */

@media only screen and (max-width: 1024px) {
    .container,
    .boxed-layout #page,
    .boxed-layout-small #page {
        width: 100%;
    }
    .boxed-layout .container,
    .boxed-layout-small .container {
        width: 440px;
    }
    .comments-title,
    #respond h3#reply-title {
        font-size: 26px;
        line-height: 32px;
    }
    #main h1,
    #main h2,
    #main h3,
    #main h4,
    #main h5,
    #main h6 {
        padding-bottom: 10px;
    }
    hr {
        margin-bottom: 30px;
    }
    input[type="text"],
    input[type="email"],
    input[type="search"],
    input[type="password"],
    textarea,
    input[type="reset"],
    input[type="button"],
    input[type="submit"] {
        margin-bottom: 20px;
    }
    input.s {
        margin: 0;
    }
    .boxed-layout #colophon,
    .boxed-layout-small #colophon {
        margin-bottom: 20px;
    }
    #site-branding {
        width: 100%;
    }
    #site-title {
        font-size: 34px;
    }
    #site-title a img {
        max-width: 420px;
        margin: 0 auto;
    }
    .boxed-layout #site-branding,
    .boxed-layout #site-title a img,
    .boxed-layout-small #site-branding,
    .boxed-layout-small #site-title a img {
        max-width: 400px;
    }
    .header-search,
    .header-search-x {
        display: none;
    }
    /* ----- Responsive Navigation ----- */
    #sticky_header-sticky-wrapper {
        height: auto !important;
    }
    #sticky_header {
        #position: relative !important;
    }
    .is-sticky #sticky_header {
        top: 0 !important;
    }
    .nav-site-title {
        width: 179px!important;
    }
    .menu-toggle {
        background-color: rgba(0, 0, 0, 0);
        border: 0 none;
        color: #666;
        cursor: pointer;
        display: block;
        float: right;
        font-size: 0;
        padding: 10px 0;
        text-align: center;
        width: 32px;
        z-index: 1000;
        margin: 0 15px;
    }
    .line-one,
    .line-two,
    .line-three {
        backface-visibility: hidden;
        display: block;
        height: 3px;
        margin: 5px auto;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
        width: 100%;
    }
    .menu-toggle.on .line-one {
        -moz-transform: rotate(-45deg) translate(-5px, 5px);
        -o-transform: rotate(-45deg) translate(-5px, 5px);
        -webkit-transform: rotate(-45deg) translate(-5px, 5px);
        transform: rotate(-45deg) translate(-5px, 5px);
    }
    .menu-toggle.on .line-two {
        opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
    }
    .menu-toggle.on .line-three {
        -moz-transform: rotate(45deg) translate(-6px, -6px);
        -o-transform: rotate(45deg) translate(-6px, -6px);
        -webkit-transform: rotate(45deg) translate(-6px, -6px);
        transform: rotate(45deg) translate(-6px, -6px);
    }
    .menu {
        display: none;
    }
    .widget_nav_menu .menu {
        display: block;
    }
    .toggled-on .menu {
        display: block;
    }
    .main-navigation {
        float: none;
        padding: 0;
    }
    .main-navigation>ul>li {
        position: inherit;
        width: 88%;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        margin-left: 0;
    }
    .main-navigation>ul>li::before {
        visibility: hidden;
    }
    .main-navigation a {
        float: none;
        width: 235px;
        padding: 10px 0;
        height: inherit;
    }
    /* ----- Dropdown ----- */
    .main-navigation ul li:hover ul {
        top: auto;
    }
    .main-navigation ul li ul {
        background-color: transparent;
        top: auto;
        width: 100%;
        left: 40px;
        display: block;
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        visibility: visible;
        position: static;
        box-shadow: none;
    }
    .main-navigation ul li ul li {
        float: none;
        margin: 0;
        position: relative;
        text-align: left;
        width: 100%;
        z-index: 1;
        display: block;
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        visibility: visible;
    }
    .main-navigation ul li ul li {
        border-top: 1px solid rgba(0, 0, 0, 0.1);
    }
    .main-navigation ul li ul li:before {
        position: static;
    }
    .main-navigation ul li ul li ul {
        left: 160px;
        display: block;
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        visibility: visible;
    }
    #site-navigation ul ul ul a {
        padding-left: 40px;
    }
    .main-navigation ul ul li:hover ul {
        top: 0;
        display: block;
        opacity: 1;
        -moz-opacity: 1;
        filter: alpha(opacity=100);
        visibility: visible;
    }
    .main-navigation li li.menu-item-has-children>a:after,
    .main-navigation li li.page_item_has_children>a:after {
        content: "\f107";
    }
    .main-slider .image-slider {
        min-height: 400px;
    }
    .slider-content {
        width: 90%;
    }
    .slider-content .btn-default {
        font-size: 12px;
        margin: 10px 5px 20px;
        padding: 4px 12px;
    }
    /* ----- Column ----- */
    .column {
        margin: 0;
    }
    .two-column,
    .three-column {
        padding: 0 0 30px;
        width: 100%;
    }
    .four-column-full-width,
    .boxed-layout-small .four-column-full-width,
    #primary,
    #primary-c .three-column,
    #primary,
    #primary-c .four-column-full-width,
    #primary,
    #primary-c .four-column {
        margin: 0;
        width: 100%;
    }
    .four-column {
        padding: 0 10px 30px;
        width: 50%;
    }
    .three-column:nth-child(2n+3) {
        clear: none;
    }
    .three-column-post .post-container,
    .four-column-post .post-container {
        width: 50%;
    }
    #main .post {
        padding-bottom: 10px;
    }
    .small_image_blog .post-featured-image {
        width: 100%;
    }
    .header-social-block,
    .top-header .widget_contact {
        display: none;
    }
    #primary,
    #primary-c .post:not(:nth-child(1)) {
        padding: 0;
        width: 100%;
    }
    #main .sticky {
        padding: 20px 20px 30px;
    }
    #primary,
    #primary-c .post.sticky:not(:nth-child(1)) {
        margin: 0 0 50px;
        width: 100%;
    }
    #wp_page_numbers,
    .wp-pagenavi,
    #main ul.default-wp-page,
    .pagination {
        margin-bottom: 40px;
    }
    #wp_page_numbers ul li.page_info,
    .wp-pagenavi .pages {
        display: none;
    }
    .widget {
        margin-bottom: 40px;
    }
    .widget_custom-tagcloud {
        margin-bottom: 32px;
    }
    .widget_posts {
        margin-bottom: 20px;
    }
    #colophon .widget_posts {
        margin-bottom: 20px;
    }
    .site-info #site-branding {
        max-width: 100%;
    }
    .topb {
        font-size: 18px;
        margin: 20px;
    }
    .blog-l {
        width: 26%;
    }
    .blog-r {
        width: 70%;
        margin-left: 10px;
    }
    .entry-title {
        font-size: 16px;
    }
    .top-ent-hidden {
        display: none;
    }
}


/* All Mobile Screen ( smaller than 769px )
================================================== */


/****** media query  */

@media screen and (max-width:769px) {
    p {
        font-size: 14px;
    }
    .main-navigation a {
        color: #f58686;
    }
    .sp-only {
        display: block;
    }
    .pc-hide {
        display: none;
    }
    .fl-txt {
        margin: 10px 5px 30px;
    }
    .st-ch02 {
        font-size: 20px;
    }
    .btn-l,
    .btn-r {
        text-align: center;
    }
    #primary,
    #primary-c,
    #secondary {
        padding: 35px 10px 10px!important;
    }
}

@media screen and (max-width:602px) {
    .st-ch {
        font-size: 23px;
    }
    .st-ch03 {
        font-size: 16px;
    }
    .st-ch,
    .st-ch02,
    .st-ch03 {
        background: linear-gradient(transparent 50%, #fffda1 50%);
    }
    .top-btn {
        width: 100%;
        padding: 10px;
    }
    .sp-menu {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
        z-index: 200;
        opacity: 0.95;
    }
    .spm {
        margin: 0px;
        justify-content: flex-start;
    }
    .spm li {
        max-width: 37%;
        padding: 5px;
        z-index: 40;
    }
    .bread {
        font-size: 12px;
    }
    .breadcrumbs .home:before {
        font-size: 12px;
    }
}


/* All Mobile Screen ( smaller than 481px )
================================================== */

@media only screen and (max-width: 480px) {
    .container,
    .boxed-layout #page,
    .boxed-layout-small #page {
        #width: 300px;
    }
    .boxed-layout .container,
    .boxed-layout-small .container {
        width: 280px;
    }
    .boxed-layout #colophon,
    .boxed-layout-small #colophon {
        margin-bottom: 10px;
    }
    #site-branding {
        margin: 0 auto;
        max-width: 265px;
    }
    #site-title a img {
        max-width: 265px;
    }
    .boxed-layout #site-branding,
    .boxed-layout #site-title a img,
    .boxed-layout-small #site-branding,
    .boxed-layout-small #site-title a img {
        max-width: 240px;
    }
    /* ----- Column ----- */
    .column {
        margin: 0;
    }
    .four-column {
        padding: 0 0 30px;
        width: 100%;
    }
    .four-column:nth-child(2n+3) {
        clear: none;
    }
    .two-column-post .post-container,
    .three-column-post .post-container,
    .four-column-post .post-container {
        width: 100%;
    }
    .btn-default {
        padding: 6px 18px;
        font-size: 13px;
    }
}


/* All Mobile ( smaller than 320px )
================================================== */

@media only screen and (max-width: 319px) {
    .container,
    .boxed-layout #page,
    .boxed-layout .container,
    .boxed-layout-small #page,
    .boxed-layout-small .container {
        width: 96%;
    }
}