/* ===============================
   Phones (max-width: 576px)
================================= */
@media (max-width: 576px) {
    .custom-container {
        width: 100% !important;
    }

    .expand-social-menu li a {
        font-size: 6vw;
    }

    .timeline li,
    .timeline>li>.timeline-panel {
        width: 100% !important;
    }

    .timeline>li>.timeline-panel:before,
    .timeline>li>.timeline-badge,
    .timeline:before {
        display: none !important;
    }

    .timeline>li:nth-child(2) {
        margin-top: 0 !important;
    }

    .page-search-result-heading {
        font-size: 5.5vw !important;
    }

    .result-close {
        width: 8vw !important;
        height: 8vw !important;
        font-size: 8vw !important;
        line-height: 6.1vw !important;
        top: 10px;
        right: 10px;
    }

    .carousel-caption .text-top {
        font-size: 5vw !important;
    }

    .carousel-caption .text-bottom {
        font-size: 7vw !important;
    }

    .text-heart {
        width: 4vw !important;
        height: 4vw !important;
        left: 33vw !important;
    }

    span.carousel-control-prev-icon:before,
    span.carousel-control-next-icon:before {
        font-size: 20px;
    }

    .mobile-custom-logo {
        height: 13vw;
        width: 24vw;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .custom-container {
        width: 720px;
    }
}

@media (max-width: 768px) {
    .hide-until-768 {
        display: none !important;
    }

    .block-until-768 {
        display: block !important;
    }

    .col-12-until-768 {
        width: 100% !important;
    }

    .col-6-until-768 {
        width: 50% !important;
    }
    
    .mobile-header {
        display: block;
    }

    .mobile-header.scroll {
        display: inline-block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 100px;
        z-index: 1100;
    }

    .mobile-header.scroll nav {
        border-radius: 0 0 1rem 1rem;
    }

    .page-search-result-heading {
        font-size: 35px;
    }

    .result-close {
        width: 40px;
        height: 40px;
        font-size: 40px;
        line-height: 30px;
    }

    .certificate a img {
        width: 90%;
    }

    /* Product Item Layout */
    .product-item {
        display: table;
        width: 100%;
        height: 43vw;
        margin-bottom: 0;
        position: relative;
    }

    .product-item::before,
    .product-item::after {
        content: "";
        display: block;
    }

    .product-item-left,
    .product-item-right {
        width: 50%;
        display: table-cell;
        vertical-align: middle;
        text-align: right;
    }

    .product-item-right {
        text-align: left;
    }

    /* Product Text */
    .product-text {
        position: relative;
        text-align: center;
        display: inline-block;
        opacity: 1;
        transform: none;
    }

    .product-text a {
        font-size: 4vw;
        font-family: 'Myriad Pro', sans-serif;
        color: #b30a21;
        font-weight: 600;
        line-height: 1.2em;
    }

    .product-text.wafer-text-4::before,
    .product-text.chocolate-text-1::before,
    .product-text.miniki::before,
    .product-text.miniki::after,
    .product-text.cheese-text-1::before,
    .product-text.cheese-text-1::after,
    .product-text.cheese-text-2::before,
    .product-text.splash span::before,
    .product-text.splash span::after {
        display: none;
    }

    /* Top and Bottom Decorative Effects */
    .product-text.mobile-splash span::before,
    .product-text.mobile-splash span::after {
        content: "";
        background-position: 0 25px;
        background-repeat: no-repeat;
        background-size: contain;
        display: block;
        position: absolute;
        width: 23.5vw;
        height: 3.25vw;
        left: 50%;
        margin-left: -11.72vw;
        transition: all 0.4s ease-out;
    }

    .product-text.mobile-splash span::before {
        background-image: url(../media/img/effect-one-top.png);
        top: -3.25vw;
    }

    .product-text.mobile-splash span::after {
        background-image: url(../media/img/effect-one-bottom.png);
        bottom: -3.25vw;
        background-position: 0 -25px;
    }

    .product-text.mobile-splash span.open::before,
    .product-text.mobile-splash span.open::after {
        background-position: 0 0;
    }

    .wafer-1 {
        top: 10%;
        left: 10%;
        width: 90%;
    }

    .wafer-2 {
        bottom: 8%;
        left: 0;
        width: 80%;
    }

    .wafer-3 {
        top: 5%;
        left: 15%;
        width: 100%;
    }

    .wafer-4 {
        bottom: 0;
        left: 0;
        width: 110%;
    }

    .chocolate-1 {
        top: 7%;
        left: 19%;
        width: 85%;
    }

    .chocolate-2 {
        top: 4%;
        left: -6%;
        width: 85%;
    }

    .product-miniki {
        top: -3%;
        right: 23%;
        width: 80%;
    }

    .product-toffee {
        top: 0;
        left: 10%;
        width: 95%;
    }

    .safe-food-1 {
        top: 32%;
        left: 23%;
        width: 90%;
    }

    .safe-food-2 {
        width: 85%;
        top: 33%;
        left: -5%;
    }

    .traditional-1 {
        top: 50%;
        right: -4%;
        width: 100%;
    }

    .traditional-2 {
        top: 30%;
        left: 0;
        width: 95%;
    }

    .cheese-1 {
        bottom: -30%;
        left: 13%;
        width: 95%;
    }

    .cheese-2 {
        top: 15%;
        right: 8%;
        width: 100%;
    }

    .naturalness-3 {
        top: 15%;
        right: 0;
        width: 80%;
    }

    .product-insatiable-taste {
        bottom: 0;
        left: -5%;
        width: 90%;
    }

    /* Product Text Positioning */
    .product-text.wafer-text-1 {
        top: 0;
        right: 30%;
    }

    .product-text.wafer-text-2 {
        bottom: 0;
        left: 0;
    }

    .product-text.wafer-text-3 {
        top: 10%;
        right: 30%;
    }

    .product-text.wafer-text-4 {
        bottom: 0;
        left: 20%;
    }

    .product-text.chocolate-text-1 {
        left: -25%;
        bottom: -5%;
    }

    .product-text.chocolate-text-2 {
        right: -10%;
        top: 0;
    }

    .product-text.miniki {
        top: 10%;
        right: -15%;
    }

    .product-text.toffee {
        top: 0;
        left: -25%;
    }

    .product-text.safe-food {
        top: 30%;
        left: -20%;
    }

    .product-text.safe-food-text-2 {
        top: 30%;
        right: 5%;
    }


    .product-text.traditional {
        top: 35;
        right: 20%;
    }

    .product-text.traditional-text-2 {
        bottom: -35%;
        left: 25%;
    }

    .product-text.cheese-text-1 {
        top: 25%;
        left: -20%;
    }

    .product-text.cheese-text-2 {
        top: 20%;
        left: 15%;
    }

    .product-text.naturalness-text-3 {
        top: 10%;
        right: 15%;
    }

    .product-text.insatiable-taste {
        top: 15%;
        left: 10%;
    }

    /* Header and Hero */
    #header {
        display: none;
    }

    #hero-slider {
        position: relative;
    }

    /* Footer */
    .footer-social {
        border: none;
    }

    /* Product Section Container */
    #products {
        background: url(../media/img/product-pattern.jpg);
        padding: 10% 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        overflow: hidden;
    }

    #products::before {
        content: "";
        background: url(../media/img/Mobile-svg.png) no-repeat;
        background-size: contain;
        height: 98%;
        width: 100%;
        display: block;
        position: absolute;
        background-position: center;
    }

    .product-section-1,
    .product-section-2,
    .product-section-3,
    .product-section-4,
    .product-section-5,
    .product-section-6 {
        height: 100%;
    }

    .product-item-left img,
    .product-item-right img {
        height: auto;
        display: block;
        object-fit: cover;
    }

    .error-404 {
        flex-direction: column;
        height: 150vh;
    }
}


@media (min-width:769px) {
    .hide-from-769 {
        display: none !important;
    }

    .block-from-769 {
        display: block !important;
    }

    .flex-from-769 {
        display: flex !important;
    }

    .col-6-from-769 {
        width: 50% !important;
    }
}

@media (max-width: 1024px) {
    .svg-container {
        top: 33vw;
    }

    .about-section-left {
        width: 100%;
    }

    .about-section-right {
        display: none;
    }

    .about-section-left h2 {
        font-size: 1.4vw;
    }

    .about-section-left h1 {
        font-size: 2vw;
    }

    .page-search a i {
        font-size: 18px;
    }
}

@media (min-width:769px) and (max-width: 1024px) {
    .header-copyright {
        display: none;
    }

    .header-social {
        margin: 7px 18px 0 0;
    }

    .header-social li a {
        width: 25px;
        height: 25px;
        margin-left: 15px;
    }

    .header-social li a i {
        font-size: 18px;
    }

    .custom-logo {
        position: absolute;
        top: 25px;
        width: 140px;
        height: 70px;
    }

    .menu-toggle {
        width: 130px;
        height: 35px;
        line-height: 32px;
        padding: 0 10px;
        font-size: 16px;
    }

    .menu-toggle span svg {
        right: 20px;
        top: 9px;
        height: 15px;
    }

    .menu-toggle-wrapper {
        top: 40px;
    }

    .menu-toggle-wrapper .open {
        width: 250px;
    }

    .menu-list-link {
        padding: 8px 30px;
        color: var(--light-color);
        font-size: 13px;
    }

    .menu-list-link .panels-list-plus {
        font-size: 20px;
        line-height: 10px;
    }

    .page-language {
        right: 60px;
        top: 40px;
    }

    .language-toggle {
        height: 35px;
        line-height: 35px;
        padding: 0 10px;
        font-size: 14px;
    }

    .page-search {
        top: 40px;
        width: 35px;
        height: 35px;
    }

    .page-search {
        top: 40px;
        width: 35px;
        height: 35px;
    }

    .page-search-opened {
        width: 170px;
    }

    .page-search .search-text {
        right: 25px;
        font-size: 15px;
    }

    .page-search .search-text.visible {
        width: 145px;
    }

    .page-search .search-toggle {
        right: 7px;
        top: 8px;
    }

    .page-search .icon {
        width: 19px;
        height: 17px;
    }

    /*=====================
    FOOTER STYLE
    =====================*/
    #footer {
        width: 100%;
        position: absolute;
        background-image: url(../media/img/bg-banner.jpg);
        background-repeat: repeat;
        background-position: top;
        background-size: 100%;
    }

    .footer-social-wrapper {
        padding: 15px 0;
        background: rgba(83, 51, 6, 0.2);
    }

    .contact-image img {
        width: 160px;
    }

    .footer-social {
        font-size: 12px;
        width: 200px;
    }

    .footer-social>h3 {
        margin-bottom: 0;
    }

    .footer-social-list {
        margin-left: 10px;
        color: #fff;
        display: inline-block;
        list-style-type: none;
        padding: 0;
    }

    .footer-social-list li {
        float: left;
    }

    .footer-social-list li a {
        color: #332c25;
        width: 25px;
        height: 30px;
        line-height: 45px;
        margin-right: 10px;
    }

    .footer-social-list li a i {
        font-size: 23px;
    }

    .copyright {
        background: #f1ece4;
        position: relative;
        height: 45px;
        clear: both;
    }


    .copyright a {
        line-height: 45px;
    }

    .copyright p {
        line-height: 45px;
    }

    .back_to_top {
        width: 30px;
        height: 30px;
        line-height: 40px;
    }

    ion-icon {
        font-size: 20px;
        margin-top: 4px;
    }

    /*=====================
    SINGLE PRODUCT PAGE*/

    .product-list-nav-alternative {
        top: 80px !important;
    }

    .product-type {
        top: 100px !important;
    }

    .dl-menuwrapper {
        width: 17vw !important;
    }

    .product-list-nav-toggle {
        font-size: 1vw !important;
    }

    .dl-menuwrapper li a {
        font-size: 0.9vw !important;
    }
}

@media (min-width: 768px) {
    .page-container {
        width: 750px;
    }
}

@media (min-width: 991px) {
    .page-container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .page-container {
        width: 1170px;
    }
}

@media (max-width: 1339px) {
    .product-list-item-body .pl-text h2 {
        font-size: 2vw !important;
    }

    .product-list-item-body .pl-text span {
        width: 15.3vw !important;
        font-size: 1.5vw !important;
    }
}

@media (max-width: 991px) {
    .product-list-item-body .pl-text h2 {
        font-size: 4vw !important;
    }

    .product-list-item-body .pl-text span {
        width: 27.3vw !important;
        font-size: 2.5vw !important;
    }

    .pages-banner-image {
        height: 44vw !important;
        background-size: cover;
    }
}