/* Laptop :1200px. */
@media (min-width: 1200px) and (max-width: 1500px) {

.call-back-content {
	padding-left: 30px;
	padding-right: 60px;
}
.wrapper-box {
	padding: 0 40px;
}
.coll-back-form {
	padding: 120px 60px;
}
.slider-content.slider-two h2 {
	font-size: 95px;
}

}


/* LG :992px. */
@media (max-width: 1200px) {
    
    .btn{
        font-size: 16px;
        line-height: 40px;
        padding: 10px 50px;
    }
    
    header .header-top{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        font-size: 14px;
    }
    
    
    
    header .header-top .header-top-start{
        display: inline-flex;
        align-items: center;
    }
    
    header .header-top .header-top-middle{
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
    }
    
    header .header-top .header-top-end{
        display: inline-flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    
    header .header-top ul.blocks li:not(:last-child){
        margin-right: 30px
    }
    
 
    
    header.sticky .logo{
        margin: 0;
    }
    
    header .logo img{
        width:200px
    }
    
    
    
    header .contact-info .phone-number{
        font-size: 18px;
    }
    
    header .main-menu nav{
        margin-right: 0;
    }
    
    header .main-menu nav ul li a{
        font-size: 13px;
    }
    
    header .main-menu-area .top-right-icons .icon{
        margin: 0 15px 0 5px 
    }
    
    
    header .main-menu-area .menu-icon,
    header .header-top ul.blocks li a span{
        display: none
    }
    
    
    .section-group .banner-overlay{
        margin: -60px 0 0 0;
    }
    
    .section-title{
        margin-bottom: 20px;
    }
    
    .section-title h1.section-title-text{
        font-size: 20px;
    }
    
    .inner-hero .heading{
        font-size: 34px
    }
    
    
    .backyard-story-brief{
        margin: 60px 0 0 0
    }
    
    .contact-card,
    .contact-form .form-container{
        width: 100%
    }
    
    .contact-number, 
    .email-address{
        font-size: 16px;
    }
    
    .contact-info .basic-form{
        padding-left: 30px
    }
    
    .contact-card ul.contact-info .dividers{
        margin: 0 10px
    }
    
    .contact-card ul.contact-info li small{
        font-size: 11px
    }
    
    footer .opening-hours p span{
        display: block
    }


}


/* MD :768px. */
@media (min-width: 768px) and (max-width: 991px) {
    
    header .hamburger-icon{
        display: inline-block
    }
    
    header .our-brands .brand-logo span,
    header .social-block p,
    header .main-menu-area{
        display: none
    }
    
    header .our-brands{
        margin: 0 0 0 15px
    }
    
    header .our-brands .divider{
        margin: 0 10px
    }
    
    .main-menu ul li {
        margin-right: 19px;
    }
    .main-menu ul li a {
        font-size: 12px;
    }
    .menu-area {
        margin-bottom: -72px;
    }

    .main-menu .home-two li:last-child {
        margin: 0;
    }
    
    .hero{
        padding: 200px 0 120px 0
    }
    
    .hero .heading{
        font-size: 40px
    }
    
    .slider-content.slider-two h2 {
        font-size: 50px;
    }
    .slider-content.slider-two p {
        font-size: 14px;
    }
    .section-title p {
        padding: 0;
    }
    .main-menu-area.home-two-area {
        padding-top: 20px;
    }
    
    .backyard-story-brief{
        flex-direction: column
    }
    
    .backyard-story-brief .img-block{
        display: none
    }
    
    .experts-brief .content-block{
        padding: 30px
    }
    
    .experts-brief .chef-photo img{
        width: 100%
    }
    
    
    .catering-menu-list{
        grid-template-columns: 1fr
    }
    
    footer .footer-head{
        display: grid;
        grid-template-columns: 1fr;
    }
    
    footer .footer-head .reach-us{
        display: block;
    }
    
    footer .opening-hours{
        margin: 30px 0;
        border-left: none;
        padding-left: 0
    }
    
    footer .footer-head .reach-us .info-col{
        margin: 0 0 40px 0
    }
    
    footer .footer-head .info-col a{
        margin: 0 20px 0 0 
    }
    
    .footer-menu .fb-last{
        margin-left: 15px;
    }
    

}


/* XS  :320px. */
@media (max-width: 767px) {
    
    
    .btn{
        font-size: 14px;
        line-height: 24px;
        padding: 10px 40px;
    }
    
    

    header .logo img{
        width: 180px;
    }
    
    header .lang-select>span,
    header .main-menu nav,
    header .header-top ul.blocks li.reviews-badge,
    header .header-top ul.blocks li.social-icons,
    header .contact-info .phone-number span,
    header .contact-info .email{
        display: none;
    }
    
    header .contact-info .icon,
    header .contact-info .phone-number,
    header .hamburger-icon{
        display: inline-flex
    }
    
    
    
    
    header .contact-info .icon{
        padding: 0 5px;
        font-size: 20px;
    }
    
    header .contact-info{
        flex-direction: row
    }
    
    header .lang-select .btn{
        font-size: 16px;
    }
    
    header .main-menu-area{
        padding: 0;
        margin: 0
    }
    
    header .lang-select .selected-lang{
        font-size: 16px
    }
    
        
    header .main-menu-area .top-right-icons .icon{
        margin: 0 10px;
        width: 30px;
        height: 30px;
        font-size: 14px
    }
    
    header .main-menu-area .top-right-icons .icon:last-child{
        margin-right: 0;
    }
    
    header.header::after{
        background-size: 50px
    }
    
    
    header .our-brands,
    header .social-block{
        display: none
    }
    
    .hero,
    .inner-hero{
        padding: 200px 0 100px 0
    }
    
    .hero .heading,
    .inner-hero .heading{
        font-size: 20px
    }
    
    main{
        padding-top: 0;
    }
    
    section.section{
        padding: 40px 0
    }
    
    .section-title h2 {
        font-size: 20px;
    }
    
    .page-title-area {
        padding-top: 100px;
        padding-bottom: 100px;
    }
    .page-title h2 {
        font-size: 20px;
    }
    
    .page-hero{
        padding: 40px 0;
        margin-bottom: 0
    }
    
    .page-hero-content figure{
        margin-top: 40px
    }
    
    .page-hero-content figure img{
        width: 100%
    }
    
    
    .page-hero .page-hero-content .lead{
        font-size: 16px
    }
    
    
    
    .inner-banner.banner-content{
        min-height: 60vh;
    }
    
    .inner-banner h1{
        font-size: 30px
    }
    
    .inner-banner .page-banner-text{
        font-size: 30px;
    }
    
    
    .nav-col{
        grid-template-columns: 1fr;
    }
    
    
    
    
    .main-banner .main-banner-content, 
    .inner-banner-content.page .page-banner-content,
    .page .page-banner-content{
        padding: 100px 0 80px 0
    }
    
    
    .main-banner,
    .inner-banner.banner-content{
        background-position: 0 0;
        background-size: auto;
        height: auto;
        min-height: 80vh;
    }
    
    .main-banner .main-banner-content h1{
        font-size: 30px;
        padding: 0;
    }
    
    .section-group .banner-overlay{
        margin: 0;
    }
    
    section.menu{
        padding: 40px 0 0 0
    }
    
    .flex-items{
        display: flex;
        flex-direction: column
    }
    
    .flex-items .search-types{
        order: 1;
    }
    
    .flex-items .about-owner-teaser{
        order: 2;
    }

    
    .page-hero.gallery-hero{
        padding: 40px 0 0 0
    }
    
    
    .primary-contact-info-card{
        float: inherit;
    }
    
    .backyard-story-brief .img-block,
    .menu .menu-brief .img-block{
        display: none
    }
    
    .backyard-story-brief .content-block,
    .menu-brief .content-block,
    .experts-brief .content-block{
        padding: 50px
    }
    
    
    .experts .experts-brief{
        flex-direction: column
    }
    
    .experts-brief .content-block .block-align{
        width: 100%
    }
    
    .experts  .chef-photo img{
        width: 100%
    }
    
    
    
    
    .categories .categories-list{
        grid-template-columns: 45% 45%;
        grid-column-gap: 10%;
        padding: 0 30px
    }
    
    .full-menu .category-details .cat-head .title{
        margin: 0 0 30px 0
    }
    
    .full-menu .category-details{
        padding:30px 0px
    }
    
    .full-menu .category-details .cat-head .title .title-text{
        font-size: 20px
    }
    
    .full-menu .category-list .category-menu .list-item .item-price{
        width: 140px;
        flex: 100%;
    }
    
    .full-menu .category-list .category-menu .menu-thumb img{
        width: 60px
    }
    
    .full-menu .category-list .category-menu .menu-thumb{
        margin: 0 20px 0 0
    }
    
    .full-menu .category-list .category-menu .list-item{
        font-size: 14px
    }
    
    .full-menu .category-list .category-menu .item-des,
    .catering-menu-list .item-type span{
        font-size: 11px;
        line-height: 14px
    }
    
    .catering-menu-list .item-type span::before{
        top: 6px
    }
    
    .full-menu .category-list .category-menu .list-item .qty-price-label span,
    .full-menu .category-list .category-menu .list-item .qty-price span{
        width: 64px
    }
    
    .full-menu .reservation-info{
        margin: 15px 30px
    }
    
    .catering-brief-card .card-body{
        padding: 30px
    }
    
    .catering-menu-list{
        grid-template-columns: 1fr
    }
    
    .categories .list-small{
        grid-template-columns: 30% 30% 30%;
        grid-column-gap: 5%;
        margin: 0;
        padding:0 0 80px 0 
    }
    
    .categories .categories-list a .heading{
        font-size: 12px;
        padding: 10px 0
    }
    
    .contact-card .card-body{
        padding: 30px 0
    }
    
    .contact-card ul.contact-info{
        flex-direction: column
    }
    
    .contact-card ul.contact-info li{
        padding: 5px 0
    }
    
    .contact-card ul.contact-info .dividers{
        margin: 0;
        border: none
    }
    
    .contact-us .content-overlay{
        width: 90%
    }
    
    .contact-form .form-container{
        padding: 30px
    }
    
    .contact-info, .contact-form{
        padding-left: 0;
        padding-right: 0;
    }
    
    .location-info .icon-box .icon{
        margin-right: 20px
    }
    
    .contact-number, .email-address{
        font-size: 16px
    }
    
    .contact-info .basic-form{
        margin: 0 0 0 0;
        padding:40px 0 0 0;
        border-top: solid 1px rgba(0,0,0,0.10);
        border-left: none
    }
    
    


    ul.list-features{
        display: block;
        margin:40px 0 0;
    }

    .product-tech .achievement{
        margin-left: 0;
    }
    
    .product-head ul.list-dot{
        margin-left: 0;
    }
    
    .profile-modal .btn-close{
        right: 20px;
    }
    
    .profile-wrapper .profile-content{
        top: 400px;
        padding: 40px;
    }
    
    footer .site-nav,
    footer .footer-head,
    footer .footer-head .reach-us{
        display: block;
    }
    
    footer::before{
        width: 250px;
        height: 250px;
        right: -100px
    }
    
    footer nav{
        margin-bottom: 40px
    }
    
    
    footer .opening-hours{
        margin: 30px 0;
        border-left: none;
        border-right: none;
        padding-left: 0;
        
    }
    
    
    footer nav.services{
        padding: 0;
        border-left: none;
        border-right: none
    }
    
    
    footer .footer-head .reach-us .info-col{
        margin: 0 0 30px 0;
    }
    
    footer .footer-head .info-col p{
        margin-bottom: 0
    }
    
    footer .footer-head .info-col a{
        font-size: 20px;
        margin: 0 10px 0 0
    }
    
    footer .footer-head .reach-us{
        width: auto;
    }
    
    footer .footer-menu,
    footer .footer-menu .fb-middle{
        display: block;
    }
    
    footer .footer-menu .fb-middle,
    footer .copyright{
        margin: 15px 0;
    }
    
    
    
    footer .site-links,
    footer .site-links a:first-child{
        margin: 0;
    }
    
    footer .footer-bottom{
        margin: 20px 0 0 0
    }


}



/* SM :550px. */
@media  (max-width: 550px) {

    .project-photos{
        grid-template-columns:1fr
    }

}