/* Media Queries
-------------------------------------------------------------- */
@media only screen and (max-width: 1368px) {
    .mail-chimp h3 {
        font-size: 20px;
    }
    .content-main {
        min-height: 332px !important;
    }
}

/* Smaller than standard 1200 */
@media only screen and (max-width: 1199px) {
    #mainnav > ul > li > a {
        padding: 0 6px 0 6px;
    }
}

/* Smaller than standard 992 */
@media only screen and (max-width: 991px) {
    .btn-menu {
        display: block ;
    }

    .flat-row.row-container-icontop {
        padding-top: 80px !important;
    }

    .iconbox.style2 .box-content {
        top: 190px;
    }

    .mainnav {
        display: none;
    }

    .flat-information > li > a {
        padding: 5px 0 5px 28px;
    }

    .flat-information > li:before {
        top: 5px;
    }

    .header .logo {
        float: left;
        margin: 0px 50px 0 0;
    }

    .social-links,
    .flat-information {
        text-align: center;
    }

    .flat-row.about,
    .flat-row.blog,
    footer,
    .page-title,
    .main-content,
    .flat-row.offer {
        padding: 40px 0 30px;
    }

    .iconbox,
    .flat-testimonials-images,
    .footer-widgets .widget  {
        margin-bottom: 30px;
    }

    .flat-portfolio .item,
    .flat-portfolio.grid-3columns .item,
    .flat-on-four {
        width: 50%;
    }

    .comment-respond .comment-notes, .comment-respond .comment-form-email,
    .comment-respond .comment-notes, .comment-respond .comment-form-email,
    .mail-chimp input[type="email"],
    .page-single .page-content,
    .page-single .page-sidebar,
    .flat-one-half,
    .flat-promobox.style1 .promobox-group-content,
    .flat-promobox.style1 .promobox-group-btn {
        width: 100%;
    }

    .comment-respond .comment-notes {
        padding-right: 0;
    }

    .comment-respond .comment-form-email {
        padding-left: 0;
    }

    .go-top {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .flat-row {
        padding: 40px 0;
    }

    .widget.widget_instagram ul li {
        width: 80px;
    }

    .tp-leftarrow.square, .tp-rightarrow.square {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
    }

    .tp-leftarrow.square:before, .tp-rightarrow.square:before {
        left: 10px;
        top: 0;
        font-size: 22px;
    }

    .page-title-heading h1,
    .flat-qoute p {
        font-size: 30px;
    }

    .sidebar {
        padding-top: 30px;
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }

    .blog-single .direction ul li ul.social-icons {
        margin-top: 0;
        padding: 20px 0;
    }

    .testimonials {
        margin-bottom: 30px;
    }

    .mail-chimp .subscribe {
        text-align: left;
    }

    .subscribe label {
        display: block;
    }

    .mail-chimp input[type="submit"] {
        right: 0;
    }

    .page-single .page-content,
    .page-single .page-sidebar {
        padding: 0 15px;
    }

    .flat-contact-info {
        margin-left: 0;
        margin-top: 30px;
    }

    .tp-leftarrow.square, .tp-rightarrow.square {
        background-color: transparent;
    }

    .flat-promobox.style1 .promobox-group-content {
        padding: 0 15px;
    }

    .flat-promobox.style1 .promobox-group-btn {
        text-align: left;
    }

    .imgaes-single-accordion,
    .imgaes-progress-home7 {
        height: 300px;
    }

    .flat-accordion.style5,
    .wrap-progress-home7 {
        padding: 0 15px 0 15px;
    }

    .testimonials.style2 .message {
        padding: 0 15px;
    }

    .imgaes-progress-home7 {
        margin-bottom: 15px;
    }
    .about-list {
        padding-top: 7px;
        padding-bottom:1px;


    }

    .diet_section h4 {

        font-size: 16px;
        line-height:26px;
    }

    .mail-chimp h3 {
        font-size: 20px;
    }
    .content-main {
        min-height: 452px !important;
    }
    .class-content-right {

        padding-top:50px !important;
    }



}

/* Tablet Landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
    .pos-static .nav-wrap{

        margin-left:0px !important;
    }
    .pos-static .nav-wrap {
        margin-left: 10px;
    }


}

@media (min-width: 992px){
    .pos-static .nav-wrap{
        margin-left:0px !important;
    }



}
/* Tablet Portrait Size */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .pos-static .nav-wrap{

        margin-left:0px;

    }
    .error-area .error-thumb {
        opacity: 0.2;
    }

}

/* All Mobile Sizes */
@media only screen and (max-width: 767px) {
    .requestform p,
    .item-two-column {
        width: 100%;
    }

    .testimonials .avatar,
    .blog-shortcode.style1 article .featured-post {
        max-width: 100%;
    }

    .testimonials .avatar,
    .blog-shortcode.style1 article .featured-post {
        margin-right: 0;
    }

    .testimonials .avatar,
    .blog-shortcode.style1 article .featured-post,
    .flat-button.medium.button-radius {
        margin-bottom: 15px;
    }

    .requestform {
        padding-left: 0;
    }

    .flat-contact-form .input-wrap.name, .flat-contact-form .input-wrap.email {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .blog-shortcode.style1.one-halft article {
        width: 100%;
    }

    .testimonials .avatar {
        float: none;
    }

    .flat-promobox.style1 .promobox-group-btn {
        text-align: center;
    }
    .title-page h3 {

        font-size: 19px;

        line-height: 30px;
        font-weight: 600;

    }
    .class-content-right {
        padding-left:0px;
        padding-top: 50px;

    }
    .class-content-text p {
        margin-bottom: 25px;
        text-align: justify;
    }
    .about-list {
        padding-top: 7px;
        padding-bottom:1px;
    }
    .content-main {
        min-height: 390px !important;
        position: relative !important;
    }

    .diet_p1 p {
        font-size: 15px;
        line-height: 26px;
        font-family: 'Poppins', sans-serif;
        text-align: justify;
    }

    .start_your_business h4 {
        margin: 0;
        padding: 0;
        margin-bottom:20px;
        margin-top: 5px;
    }

}

/* Mobile Landscape Size */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .flat-title {
        font-size: 27px;
        line-height: 3px;
    }
    .diet_p1 p {
        font-size: 15px;
        line-height: 26px;
        font-family: 'Poppins', sans-serif;
        text-align: justify;
    }



}

/* Mobile Portrait Size */
@media only screen and (max-width: 479px) {
    .flat-portfolio .item,
    .flat-portfolio.grid-3columns .item {
        width: 100%;
    }

    .tp-leftarrow.square, .tp-rightarrow.square {
        display: none;
    }

    .flat-portfolio.style1 .item:hover .project-title {
        top: 35%;
        left: 20px;
    }

    .flat-portfolio.style1 .view-detail {
        left: 20px;
    }

    .flat-portfolio.style1 .project-title {
        padding-right: 15px;
    }
    .flat-title {
        font-size: 27px;

    }

    .diet_p1 p {
        font-size: 15px;
        line-height: 26px;
        font-family: 'Poppins', sans-serif;
        text-align: justify;
    }


}
@media (max-width: 320px) {
    .diet_p1 p {
        font-size: 15px;
        line-height: 26px;
        font-family: 'Poppins', sans-serif;
        text-align: justify;
    }
    .flat-title {
        font-size: 25px;
        /* line-height: 3px; */
    }

}

@media only screen and (max-width: 1368px) {
    .mail-chimp h3 {
        font-size: 20px;
    }
    .content-main {
        min-height: 332px !important;

    }
    .content-main img {

    }
    .item {
        background-color: white;
        position: relative;
        display: block;
    }
    .item img{
        width:100%;
    }


}

/* Mobile Landscape Size */
@media only screen and (min-width: 393px) and (max-width: 851px) {
    .flat-title {
        font-size: 27px;
        line-height: 3px;
    }
    .diet_p1 p {
        font-size: 14px;
        line-height: 26px;
        font-family: 'Poppins', sans-serif;
        text-align: justify;
    }
    .ch-info-wrap {

        top: 27px;
        border:1px solid red;

    }
}


/* Mobile Landscape Size */
@media only screen and (min-width: 360px) and (max-width: 740px) {
    .flat-title {
        font-size: 25px !important;

    }
    .ch-info-wrap {

        top: 107px;


    }
    .diet_section h4 {
        font-size: 15px;

    }
}

/* ipads and desktops */
@media (min-width: 768px) {
    .testi_sec .row {
        flex-wrap: nowrap; /* this makes the boxes span across without wrapping to a new line */
    }
    .testi_sec .col {
        /* these two keep them all at 50% side and the -2rem is to account for the margins i set for spacing on the cols */
        flex: 0 0 calc(50% - 2rem);
        max-width: calc(50% - 2rem);
    }

    /* when button is clicked, add an active class to the row */
    &.box-active {
        .col {
            transform: translateX(calc(-100% - 2rem));
            &:last-of-type {
                transform: translateX(calc(-100% - 2rem));
            }
            /* the -2rem in the calc is accounting for the column margins for spacing. You wouldn't need those if you want your boxes without spacers */
        }
    }
    /* this stuff is just to show you a fun way to switch the order of the columns without actually doing it in HTML. if you look at the html the two rows are exactly the same structure but a fun "order:" with flex-box allows you to change that. */
    &:nth-child(even) {
        .col {
            transform: translateX(calc(-100% - 2rem));
            &:nth-child(1) {
                order: 3;
            }
            &:nth-child(2) {
                order: 2;
            }
            &:last-of-type {
                transform: translateX(calc(-100% - 2rem));
                order: 1;
            }
        }
        &.box-active {
            .col {
                transform: translateX(0);
                &:last-of-type {
                    transform: translateX(0);
                }
            }
        }
    }
    /* end order stuff */
}
}


@media (max-width: 767.98px) {
    .testi_sec .row {
        height: calc(600px + 6rem);
    }
    .testi_sec .col {
        margin-bottom: 2rem;
        height: 300px;
    }

}

@media only screen and (min-width: 768px) and (max-width: 1024px){
    #myModal .modal-content img{
        display:none;
    }
}