/*lg laptop and desktop size*/
@media (min-width: 992px) and (max-width: 1199px) {
}

/*md small laptop- ipad pro*/
@media (min-width: 768px) and (max-width: 991px) {
    .page-header-left {
        margin-right: 20px !important;
    }
    .page-header-wrapper {
        padding: 5px;
    }
    .page-header-nav .dropdown, .page-header-nav .dropdown:last-child {
        margin-right: 10px;
    }
    .offer-title-wrapper, .index-number-wrapper {
        padding-top: 3em;
    }
    .page-shop, .page-indexes, .coffee-style-img-wrapper {
        padding: 3em 0;
    }
    .offer-title {
        font-size: 35px;
    }
    .offer-intro {
        padding: 0 1em;
    }
    .offer-product-wrapper, .coffee-style-title-wrapper .offer-title-wrapper {
        padding-top: 2em;
    }
    .shop-product-name-wrapper a {
        font-size: 24px;
    }
    .page-coffee-style, .page-shop, .page-action {
        margin-top: 0;
    }
    .coffee-style-title-wrapper {
        padding-top: 1em;
    }
    .coffee-style-title-wrapper h5{ font-size: 1rem;}
    .offer-subtitle{ font-size: 13px;}
    .footer-subscribe-title{ margin-top: 1.5em;}
    .footer-logo-img {
        padding-top: 0;
    }
    .fb-container {
        text-align: center;
    }
    .page-coffee-style, .page-shop, .page-action {
        background-image: url(images/background-coffee-tree-icon-md.jpg);
        margin-top: 1em;
    }
    .our-menus .our-menu:nth-child(even) {
        background-image: url(images/background-coffee-tree-icon-md.jpg);
    }
    .page-banner {
        width: 100%;
        height: 500px;
        background-image: url("images/h1-bacground-img-2-md.jpg");
        background-position: 50% 217px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        -moz-transform: none;
        position: static;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        text-align: center;
        background-color: transparent;
    }
    .content-block-padding {
        padding: 1em 0 !important;
    }
    .simple-banner {
        height: 300px;
    }
    .simple-banner-inner {
        font-size: 35px;
    }
    .founder-word p, .founder-item h5 {
        font-size: 14px;
        margin-bottom: 10px;
    }
    .founder-item h4 {
        font-size: 15px;
        font-weight: bold;
    }
    .our-spirit-text .offer-subtitle {
        text-align: justify;
        line-height: 21px;
    }
    .offer-name {
        font-size: 16px;
        font-weight: bold;
    }
    .our-menus .our-menu {
        padding: 2em 0;
    }
    .our-menus .our-menu-name {
        font-size: 35px;
    }
    .our-menus .our-menu-products {
        margin-top: 20px;
    }
    .footer-top {
        background-image: url(images/footer-top-img-md.jpg);
    }
    .location-text {
        font-size: 14px;
    }
    .widget-container-title{ font-size: 16px;font-weight: bold;}
    .latest-blog-item .media{flex-wrap: wrap;}
    ul li.latest-blog-item{ margin-bottom: 10px;}
    ul li.latest-blog-item img{ width: 100%;margin-right: 0 !important}
    .widget-container ul li a{ font-size: 13px;}
    .blog-container{ padding: 2em 0;}
        .blog-container .blog-post-title h2{ font-size: 18px;}
    #selfMadeCoffee a.nav-link{ font-size: 14px;}
}

/*sm tablet*/
@media (min-width: 480px) and (max-width: 767px) {
    .page-header-left {
        margin-right: 10px !important;
    }
    .logo-light{ height: 50px;}

    .page-header-wrapper {
        padding: 5px;
    }

    .page-header-nav .dropdown, .page-header-nav .dropdown:last-child {
        margin-right: 5px;
    }
    .page-header-nav a.dropdown-btn{ font-size: 13px;}
    .offer-title-wrapper, .index-number-wrapper {
        padding-top: 3em;
    }
    .banner-text-right{ left: 0;}
    .banner-text-wrapper{width: 100%}
    .page-shop, .page-indexes, .coffee-style-img-wrapper {
        padding: 3em 0;
    }

    .offer-title {
        font-size: 32px;
    }

    .offer-intro {
        padding: 0 1em;
    }

    .offer-product-wrapper, .coffee-style-title-wrapper .offer-title-wrapper {
        padding-top: 2em;
    }

    .shop-product-name-wrapper a {
        font-size: 24px;
    }

    .page-coffee-style, .page-shop, .page-action {
        margin-top: 0;
    }

    .coffee-style-title-wrapper {
        padding-top: 1em;
    }

        .coffee-style-title-wrapper h5 {
            font-size: 15px;
        }

    .offer-subtitle {
        font-size: 13px;
    }
    .footer-store-title, .footer-subscribe-title {
        margin-top: 1.5em;
    }
    .footer-subscribe-title {
        margin-top: 1.5em;
    }

    .footer-logo-img {
        padding-top: 0;
    }

    .fb-container {
        text-align: center;
    }

    .page-coffee-style, .page-shop, .page-action {
        background-image: url(images/background-coffee-tree-icon-sm.jpg);
        margin-top: 1em;
    }

    .our-menus .our-menu:nth-child(even) {
        background-image: url(images/background-coffee-tree-icon-sm.jpg);
    }

    .page-banner {
        width: 100%;
        height: 500px;
        background-image: url("images/h1-bacground-img-2-sm.jpg");
        background-position: 50% 217px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        -moz-transform: none;
        position: static;
        background-repeat: no-repeat;
        background-size: cover;
        background-attachment: fixed;
        text-align: center;
        background-color: transparent;
    }

    .content-block-padding {
        padding: 1em 0 !important;
    }

    .simple-banner {
        background-size: cover;
    }

    .simple-banner-inner {
        font-size: 32px;
    }
    .founder-word {
        margin-top: 5px;
    }
    .founder-word p, .founder-item h5 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .founder-item h4 {
        font-size: 16px;
        font-weight: bold;
    }

    .our-spirit-text .offer-subtitle {
        text-align: justify;
        line-height: 21px;
    }

    .offer-name {
        font-size: 16px;
    }

    .our-menus .our-menu {
        padding: 2em 0;
    }

    .our-menus .our-menu-name {
        font-size: 32px;
    }

    .our-menus .our-menu-products {
        margin-top: 20px;
    }

    .footer-top {
        background-image: url(images/footer-top-img-sm.jpg);
    }

    .location-text {
        font-size: 14px;
    }
    .blog-index-wrapper .blog-post-item {
        margin-bottom: 20px;
    }
    .widget-container-title {
        font-size: 16px;
        font-weight: bold;
    }
    .founder-item img {
        margin-right: 0 !important;
        width: 100%;
    }
    .latest-blog-item .media {
        flex-wrap: wrap;
    }

    ul li.latest-blog-item {
        margin-bottom: 10px;
    }

        ul li.latest-blog-item img {
            width: 100%;
            margin-right: 0 !important
        }

    .widget-container ul li a {
        font-size: 13px;
    }

    .blog-container {
        padding: 2em 0;
    }

        .blog-container .blog-post-title h2 {
            font-size: 18px;
        }

    #selfMadeCoffee a.nav-link {
        font-size: 14px;
    }
}

/*xs mobile*/
@media (max-width: 479px) {
    .page-header {
        display: none;
    }

    .page-header-mobile {
        display: block;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10;
    }

        .page-header-mobile .card {
            border: 0;
            border-radius: 0;
        }

        .page-header-mobile .card-header {
            border-radius: 0;
            background-color: #6F1236;
        }

    .banner-text-right {
        left: 0;
    }

    .banner-text-wrapper {
        width: 100%;
    }

    .subtitle-text {
        font-size: 14px;
    }

    .shop-button {
        padding: 10px;
    }

    .page-middle-wrapper .container {
        padding-right: 5px;
        padding-left: 5px;
    }

        .page-middle-wrapper .container .row {
            margin-right: -5px;
            margin-left: -5px;
        }

            .page-middle-wrapper .container .row .col-3,
            .page-middle-wrapper .container .row .col-4,
            .page-middle-wrapper .container .row .col-6,
            .page-middle-wrapper .container .row .col-12 {
                padding-right: 5px;
                padding-left: 5px;
            }

    .offer-title-wrapper {
        padding-top: 15px;
    }

    .offer-title {
        font-size: 18px;
    }

    .offer-intro {
        padding: 0 10px;
        font-size: 14px;
    }

    .offer-product-wrapper, .shop-product-wrapper, .index-number-wrapper,
    .coffee-style-title-wrapper .offer-title-wrapper, .index-title-wrapper,
    .offer-wrapper {
        padding-top: 1em;
    }

    .offer-name {
        font-size: 15px;
    }

    .offer-name-wrapper {
        padding: 5px 0;
    }

    .offer-subtitle {
        font-size: 13px;
    }

    .shop-product-name-wrapper {
        margin-top: 5px;
    }

        .shop-product-name-wrapper a {
            font-size: 14px;
        }

    .page-shop {
        padding-bottom: 10px;
    }

    .page-coffee-style, .page-shop, .page-action {
        background-image: url(images/background-coffee-tree-icon-xs.jpg);
        margin-top: 1em;
    }

    .page-coffee-style {
        margin-top: 0;
    }

    .coffee-style-title-wrapper {
        padding-top: 5px;
    }

    .coffee-style-img-wrapper {
        padding: 5px 0;
    }

    .coffee-style-title-wrapper h5 {
        font-size: 13px;
    }

    .offer-intro-wrapper {
        padding-top: 0;
    }

    .footer-top {
        background-image: url(images/footer-top-img-xs.jpg);
        padding: 1em 0;
    }


    .footer-store-title, .footer-subscribe-title {
        margin-top: 5px;
        font-size: 18px;
    }

    .footer-bottom, .content-block-padding {
        padding: 1em 0 !important;
    }

    ul.page-footer-nav {
        margin-top: 5px;
    }

    .footer-nav-link {
        font-size: 13px;
        text-transform: capitalize
    }

    .copyright-text {
        font-size: 13px;
    }

    .index-number {
        font-size: 35px;
    }

    .index-title, .location-text {
        font-size: 14px;
    }

    .offer-subtitle {
        font-size: 12px;
    }

    .simple-banner {
        background-size: cover;
    }

    .simple-banner-inner {
        font-size: 35px;
    }

    .our-menus .our-menu-name {
        font-size: 18px;
        font-weight: bold;
    }

    .our-menus .our-menu {
        padding: 1em 0;
    }

    .our-menus .our-menu-products {
        margin-top: 5px;
    }

    .our-menu-product-order {
        margin-left: 0;
        display: block;
    }

    .our-menu-product-name h5 {
        font-size: 14px;
    }

    .our-menus .our-menu:nth-child(even) {
        background-image: url(/Content/images/background-coffee-tree-icon-xs.jpg);
    }

    .page-banner {
        max-height: 260px;
        background-image: url("images/h1-bacground-img-2-xs.jpg");
    }

    .page-offer-pb {
        padding-bottom: 1em;
    }

    .offer-subtitle {
        line-height: 20px;
    }

    .coffee-office-item {
        margin-top: 20px;
    }

        .coffee-office-item .short-desc-mobile {
            -webkit-line-clamp: 2;
        }

    .founder-item {
        font-size: 14px;
    }

        .founder-item .founder-word {
            font-style: italic;
            padding: 10px 0;
        }

        .founder-item h4, .founder-item h5 {
            font-size: 14px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .founder-item h5 {
            font-size: 13px;
        }

    .blog-container {
        padding: 1em 0;
    }

    .blog-index-wrapper .blog-post-item {
        margin-bottom: 10px;
    }

    .blog-post-title h2, h3.blog-post-comments-title, h3.blog-related-post-related {
        font-size: 16px;
        font-weight: bold;
    }

    .blog-post-info {
        font-size: 15px;
    }

    .blog-post-content {
        font-size: 14px !important;
    }

    #selfMadeCoffeeContent {
        margin-top: 20px;
    }

    ul#selfMadeCoffee li {
        display: block;
        width: 100%;
        margin-bottom: 3px;
    }

        ul#selfMadeCoffee li a {
            color: #262626;
            background-color: #f3f3f3;
            border-radius: 0;
            text-transform: uppercase;
        }

            ul#selfMadeCoffee li a.active {
                background-color: #6F1236;
                color: #fff;
            }

    .btn-xs-block {
        font-size: 14px;
        padding: .175rem;
    }

    .user-login-form, .user-register-form {
        width: 90%;
    }

    .user-request-form-inner .editor-field input[type="text"], .user-request-form-inner .editor-field input[type="password"] {
        padding: 10px;
    }

    .user-request-form-inner .editor-field-small,
    .user-request-form-inner .editor-field {
        margin-top: 10px;
    }

    .have-not-account {
        margin-top: 20px;
    }

    .user-request-form-inner .editor-field input[type="text"], .user-request-form-inner .editor-field input[type="password"] {
        padding: 3px 0 3px 19px;
    }

    .our-spirit-text .offer-subtitle {
        font-size: 14px;
        text-align: justify;
    }
    .subscription-item-text {
        font-size: 14px;
    }
    .subscription-item-title {
        font-size: 15px;
        font-weight: bold;
        margin-top: 10px;
        color: #6F1236;
    }
    .subscription-item-mt, .subscription-section {
        margin-top: 2rem !important;
    }
    .subscription-select-coffee {
        font-size: 15px;
    }
    ul#duration-selection {
        padding-left: 0;
    }
    ul#duration-selection li {
        width: 80%;
        display: block;
        margin: 0 auto 10px;
    }
    .subscription-order-title {
        color: #6F1236;
        padding-top: 15px;
        font-size: 18px;
    }
    .product-addToCart, .btn-contact, .btn-kafela2 {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 10px;
    }
    .a-cart {
        font-size: 14px;
        font-weight: bold;
    }
    .img-in-cart{
        max-width:70px;
        max-height:70px;
    }
    .woocommerce-billing-fields{
        font-size:14px;
        
    }
    .h3-in-cart {
        font-size: 16px;
        text-transform: uppercase;
        font-weight: bold;
    }
}