@media screen and (max-width: 1300px){
    .room-div, .room-div2{
        padding: 100px 100px 0 100px;
    }
    /*.room{
        width:45%;
    }
    .room img{
        width:500px;
    }
    .room-div .txt-div, .room-div2 .txt-div{
        width:40%;
        color:#191613;
    }*/
}
@media screen and (max-width: 1024px){
    .hero .nav{
        padding: 20px 50px 0 50px;
    }
    .nav .menu a{
        font-size: 12px;
    }
    .footer-div{
        padding:40px 100px;
    }
    .home{
        padding: 10px 20px;
    }
    .home a img{
        width:80px;
    }
    .search-divv{
        width:100%;
        height: auto;
        padding: 50px 50px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .book{
        width:100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .check-divvv{
        width:350px;
        height: 350px;
        background-color: #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
    }
    .check-divvv .check{
        background-color: #242424;
        width:120px;
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .check-divvv .check label{
        font-size: 16px;
        font-family: 'Open Sans', sans-serif;
        display: block;
        color:#fff;
        width:100%;
        text-align: center;
    }
    .check-divvv .check form{
        display: block;
    }
    input[type="date"]{
        border:none;
        font-size: 14px;
        margin-top: 10px;
        color:#D7A829;
        background-color: transparent;
        width: 60px;
    }
    input[type="date"]:focus{
        outline:none;
    }
    ::-webkit-calendar-picker-indicator{ 
       background-color:#D7A829;
       border-radius: 50%;
       cursor: pointer;
    }
    .check-divvv select{
        margin-top: 10px;
        border:none;
        font-size: 30px;
        outline: none;
        font-weight: bold;
        color:#D7A829;
        cursor: pointer;
        background-color: transparent;
    }
    .search-divv .reservation-div{
        width:100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .search-divv{
        padding: 50px 20px;
        justify-content: space-around;
    }
    .check-div{
        width:350px;
        height: 350px;
        background-color: #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
    }
    .check-div .check{
        background-color: #242424;
        width:120px;
        height: 120px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .check label{
        font-size: 16px;
        font-family: 'Open Sans', sans-serif;
        display: block;
        color:#fff;
        width:100%;
        text-align: center;
    }
    input[type="date"]{
        border:none;
        font-size: 14px;
        margin-top: 10px;
        color:#D7A829;
        background-color: transparent;
        width: 60px;
    }
    .check-div select{
        margin-top: 10px;
        border:none;
        font-size: 30px;
        outline: none;
        font-weight: bold;
        color:#D7A829;
        cursor: pointer;
        background-color: transparent;
    }
    .roomr{
        width:300px;
        height: 540px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        transition-duration: .5s;
        margin-bottom: 40px;
        border:1px solid #e0dfdf;
        margin-top: 0;
    }
    .roomr img{
        width:300px;
        height: 240px;
    }
    .roomr p{
        color:#212121;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 20px;
        margin-top: 10px;
        margin-right: 10px;
        text-align: center;
    }
    .roomr b{
        color:#184891;
        font-family: 'Open Sans', sans-serif;
        font-size: 22px;
        margin-top: 20px;
        text-align: center;
    }
    .roomr a{
        padding: 8px 20px;
        background-color: #D7A829;
        border-radius: 20px;
        text-decoration: none;
        font-size: 12px;
        color:#fff;
        transition-duration: .5s;
    }
    .roomr a:hover{
        background-color: #000;
        color:#fff;
    }
    .roomr .icon{
        width:100%;
        margin-top: 20px;
        padding: 20px 0;
        border-top:1px solid #e0dfdf
    }
    .roomr .icon img{
        width:250px;
        height: auto;
    }
    .availability a{
        padding: 8px 22px;
        font-size: 6px;
    }
    .room-div, .room-div2{
        padding: 100px 60px 0 60px;
    }
    .room{
        width:45%;
    }
    .room img{
        width:400px;
    }
    .room-div .txt-div, .room-div2 .txt-div{
        width:40%;
        color:#191613;
    }
    .room-div .txt-div .txt, .room-div2 .txt-div .txt{
        font-size:25px;
        margin-bottom: 30px;
    }
    .room-div .txt-div a, .room-div2 .txt-div a{
        padding: 16px 22px;
    }
    .discover-div{
        padding: 160px  100px 20px 100px;
    }
    .discover-div .txt-div{
        width:40%;
    }
    .discover-div .txt-div .txt{
        font-size:25px;
        margin-bottom: 30px;
    }
    .discover-div .img{
        width:60%;
    }
    .discover-div .img img{
        width:300px;
    }
    .discover-div .txt:before{
        width:80px;
        height: 3px;
        top:-30px;
    }
    .catering{
        height: 400px;
    }
    .catering img{
        width:800px;
        height: 400px;
        transition-duration: .5s;
    }
    .footer-div{
        padding:40px 100px;
    }
}
@media screen and (max-width: 768px){
    .hero .nav{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background-color: #fff;
        padding-top: 0px;
    }
    .nav .box{
        display: block;
    }
    .logo{
        margin-top: 20px;
    }
    .logo img{
        width:120px;
    }
    .nav .menu{
        width:100%;
        height: 80vh;
        padding:30px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items:center ;
        background-color: #fff;
        position: absolute;
        top:50px;
        border-top:1px solid #D7A829;
        transform: translateX(200%);
    }
    .nav .menu a{
        color:#D7A829;
    }
    .toggle .line1{
        transform: rotate(45deg) translateY(10px);
        left:10px;
        top:4px;
    }
    .toggle .line3{
        transform: rotate(-45deg) translateY(-10px);
        left:10px;
    }
    .toggle .line2{
        opacity: 0;
    }
    .showMenu.menu{
        transform: translateX(0);
    }
    .hero-txt{
       padding: 0 50px;
    }
    .hero-heading{
        font-size: 40px;
    }
    .footer{
        justify-content: center;
    }
        .logo-div{
            width:300px;
            align-items: center;
        }
        .link{
            width:300px;
            align-items: center;
        }
        .home{
            padding: 10px 20px;
        }
        .home a img{
            width:80px;
        }
        .search-div{
            padding: 50px 20px;
            justify-content: space-around;
        }
        .check-div{
            width:350px;
            height: 350px;
            background-color: #333333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            padding: 10px;
            margin-bottom: 40px;
        }
        .check-div .check{
            background-color: #242424;
            width:120px;
            height: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }
        .check label{
            font-size: 16px;
            font-family: 'Open Sans', sans-serif;
            display: block;
            color:#fff;
            width:100%;
            text-align: center;
        }
        input[type="date"]{
            border:none;
            font-size: 14px;
            margin-top: 10px;
            color:#D7A829;
            background-color: transparent;
            width: 60px;
        }
        .check-div select{
            margin-top: 10px;
            border:none;
            font-size: 30px;
            outline: none;
            font-weight: bold;
            color:#D7A829;
            cursor: pointer;
            background-color: transparent;
        }
        .rooma{
            width:300px;
            height: 540px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-wrap: wrap;
            transition-duration: .5s;
            margin-bottom: 40px;
            border:1px solid #e0dfdf;
        }
        .rooma img{
            width:300px;
            height: 240px;
        }
        .rooma p{
            color:#212121;
            font-family: 'Montserrat', sans-serif;
            font-weight: 300;
            font-size: 12px;
            line-height: 20px;
            margin-bottom: 20px;
            margin-top: 10px;
            margin-right: 10px;
            text-align: center;
        }
        .rooma b{
            color:#184891;
            font-family: 'Open Sans', sans-serif;
            font-size: 22px;
            margin-top: 20px;
            text-align: center;
        }
        .rooma a{
            padding: 8px 20px;
            background-color: #D7A829;
            border-radius: 20px;
            text-decoration: none;
            font-size: 12px;
            color:#fff;
            transition-duration: .5s;
        }
        .rooma a:hover{
            background-color: #000;
            color:#fff;
        }
        .rooma .icon{
            width:100%;
            margin-top: 20px;
            padding: 20px 0;
            border-top:1px solid #e0dfdf
        }
        .rooma .icon img{
            width:250px;
            height: auto;
        }
        .search-divv{
            width:100%;
            height: auto;
            padding: 50px 50px;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .book{
            width:100%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            flex-wrap: wrap;
        }
        .check-divvv{
            width:350px;
            height: 350px;
            background-color: #333333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            padding: 10px;
        }
        .check-divvv .check{
            background-color: #242424;
            width:120px;
            height: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }
        .check-divvv .check label{
            font-size: 16px;
            font-family: 'Open Sans', sans-serif;
            display: block;
            color:#fff;
            width:100%;
            text-align: center;
        }
        .check-divvv .check form{
            display: block;
        }
        input[type="date"]{
            border:none;
            font-size: 14px;
            margin-top: 10px;
            color:#D7A829;
            background-color: transparent;
            width: 60px;
        }
        input[type="date"]:focus{
            outline:none;
        }
        ::-webkit-calendar-picker-indicator{ 
           background-color:#D7A829;
           border-radius: 50%;
           cursor: pointer;
        }
        .check-divvv select{
            margin-top: 10px;
            border:none;
            font-size: 30px;
            outline: none;
            font-weight: bold;
            color:#D7A829;
            cursor: pointer;
            background-color: transparent;
        }
        .search-divv .reservation-div{
            width:100%;
            height: auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        .search-divv{
            padding: 50px 20px;
            justify-content: space-around;
        }
        .check-div{
            width:350px;
            height: 350px;
            background-color: #333333;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            padding: 10px;
        }
        .check-div .check{
            background-color: #242424;
            width:120px;
            height: 120px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-direction: column;
        }
        .check label{
            font-size: 16px;
            font-family: 'Open Sans', sans-serif;
            display: block;
            color:#fff;
            width:100%;
            text-align: center;
        }
        input[type="date"]{
            border:none;
            font-size: 14px;
            margin-top: 10px;
            color:#D7A829;
            background-color: transparent;
            width: 60px;
        }
        .check-div select{
            margin-top: 10px;
            border:none;
            font-size: 30px;
            outline: none;
            font-weight: bold;
            color:#D7A829;
            cursor: pointer;
            background-color: transparent;
        }
        .roomr{
            width:380px;
            height: 540px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-wrap: wrap;
            transition-duration: .5s;
            margin-bottom: 40px;
            border:1px solid #e0dfdf;
            margin-top: 40px;
        }
        .roomr img{
            width:300px;
            height: 240px;
        }
        .roomr p{
            color:#212121;
            font-family: 'Montserrat', sans-serif;
            font-weight: 300;
            font-size: 12px;
            line-height: 20px;
            margin-bottom: 20px;
            margin-top: 10px;
            margin-right: 10px;
            text-align: center;
        }
        .roomr b{
            color:#184891;
            font-family: 'Open Sans', sans-serif;
            font-size: 22px;
            margin-top: 20px;
            text-align: center;
        }
        .roomr a{
            padding: 8px 20px;
            background-color: #D7A829;
            border-radius: 20px;
            text-decoration: none;
            font-size: 12px;
            color:#fff;
            transition-duration: .5s;
        }
        .roomr a:hover{
            background-color: #000;
            color:#fff;
        }
        .roomr .icon{
            width:100%;
            margin-top: 20px;
            padding: 20px 0;
            border-top:1px solid #e0dfdf
        }
        .roomr .icon img{
            width:250px;
            height: auto;
        }
        .reservation .reservation-txt{
            font-size:16px;
        }
        .book .roomz{
            width:50%;
        }
        .special{
            padding-top:0px;
        }
        .special .txt, .guest .txt{
            width:50%;
            text-align: center;
        }
        .special textarea{
            width:100%;
            height: 150px;
            border:1px solid #dbd5d5;
            margin-top: 20px;
        }
        .special{
            padding:20px 20px 30px 20px;
        }
        .guest-info{
            
            border-top:2px solid #e0dddd;
        }
        .guest-info .guest, .guest2{
            width:100%;
            text-align: center;
            padding: 50px 30px 80px 30px;   
        }
        .guest form{
            width:50%;
            font-family: 'Montserrat', sans-serif;
            color:#807777;
            font-size: 12px;
            line-height: 20px;
            margin-top: 30px;
        }
        .guest form label{
            display: block;
            font-weight: 600;
            margin-bottom: 10px;
            margin-top: 20px;
            color:#807777;
        }
        .guest form input{
            width:0x;
            height: 30px;
            border:2px solid #e0dddd;
            border-radius: 4px;
            outline:none;
        }
        .guest .tab-con{
            justify-content: center;
        }
        .guest .tab{
            width:160px;
            display: flex;
        }
        
        .guest form img{
            margin-top: 30px;
        }
        .info{
            padding: 100px 20px;
        }
        .guest2{
            border-left:none;
        }
        .success{
            width:60%;
            height: 40%;
            background-color: #fff;
        }
        .check-divv{
            width:90%;
            top:450px;
            left:5%; 
            display: flex;
            justify-content: space-between;
            align-items: center;   
        }
        .check-divv .check-in, .check-out{
            padding: 5px; 
        }
        .check-divv .availability{
            padding: 5px; 
            display:flex;
        }
        .check-divv label{
            font-size: 8px;
        }
        .check-divv form{
            display: block;
        }
        input[type="date"]{
            border:none;
            font-size: 10px;
            margin-top: 10px;
            width:60px;
        }
        .check-divv select{
            margin-top: 10px;
            border:none;
            font-size: 16px;
        }
        .room-div, .room-div2{
            padding: 50px 50px 20px 50px;
            justify-content: center;
            flex-wrap: wrap;
            flex-direction: column-reverse;
        }
        .room{
            width:100%;
            display: flex;
            justify-content: center;
            flex-direction: row;
        }
        
        .room-div .txt-div, .room-div2 .txt-div{
            width:100%;
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            align-items: center;
            
        }
        .room img{
            margin-bottom: 20px;
        }
        .room-div .txt-div .txt, .room-div2 .txt-div .txt{
            font-size:25px;
            margin-bottom: 25px;
        }
        .room-div .txt-div .price, .room-div2 .txt-div .price{
            margin-top: 20px;
            margin-bottom: 30px;
            font-size: 12px;
        }
        .room-div .txt-div .price, .room-div2 .txt-div .price{
            margin-bottom: 10px;
        }
        .room-div .txt-div .txt, .room-div2 .txt-div .txt{
            margin-bottom: 0px;
        }
        .discover-div{
            padding: 160px  50px 20px 50px;
            justify-content: center;
        }
        .discover-div .txt-div{
            width:100%;
            text-align: center;
        }
        .discover-div .txt-div .txt{
            font-size:25px;
            margin: 0 10px 30px 0px;
        }
        .discover-div .img{
            width:100%;
            display: flex;
            justify-content: center;
        }
        .discover-div .img img{
            width:300px;
            top:0px;
        }
        .discover-div .txt:before{
            display: none;
        }
        .catering{
            height: 350px;
        }
        .catering img{
            width:600px;
            height: 350px;
            transition-duration: .5s;
        }
        .catering img:hover{
            margin-left: 80px;
        }
        .food-div{
            padding:100px 50px;
        }
        .food-div .food-divv{
            justify-content: center;
        }
        .food-div .txt{
            font-size:26px;
        }
        .taste .txt-heading{
            font-size:22px;
            margin-bottom: 20px;
            margin-top: 20px;
        }
        .opening{
            width:100%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            
            margin-top: 50px;
            font-family: 'Open Sans', sans-serif;
            color:#191613;
            font-size: 12px;
        }
        .check-out{
            transform: scale(0.8);
            left:-15px;
            top:180px;
        }
}
@media screen and (max-width: 480px){
    .hero-txt{
        padding: 0 20px;
    }
    .hero-heading{
        font-size: 28px;
        margin-bottom: 20px;
    }
    .check-div{
        width:290px;
        height: 290px;
        background-color: #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
        margin-bottom: 40px;
    }
    .check-div .check{
        background-color: #242424;
        width:100px;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .check label{
        font-size: 14px;
        font-family: 'Open Sans', sans-serif;
        display: block;
        color:#fff;
        width:100%;
        text-align: center;
    }
    .check-divvv{
        width:290px;
        height: 290px;
        background-color: #333333;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
        margin-bottom: 40px;
    }
    .check-divvv .check{
        background-color: #242424;
        width:100px;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-direction: column;
    }
    .rooma{
        width:280px;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        transition-duration: .5s;
        margin-bottom: 40px;
        border:1px solid #e0dfdf;
    }
    .rooma img{
        width:280px;
        height: 200px;
    }
    .rooma p{
        color:#212121;
        font-family: 'Montserrat', sans-serif;
        font-weight: 300;
        font-size: 12px;
        line-height: 20px;
        margin-bottom: 20px;
        margin-top: 10px;
        margin-right: 10px;
        text-align: center;
    }
    .rooma b{
        color:#184891;
        font-family: 'Open Sans', sans-serif;
        font-size: 20px;
        margin-top: 20px;
        text-align: center;
    }
    .rooma a{
        padding: 8px 20px;
        background-color: #D7A829;
        border-radius: 20px;
        text-decoration: none;
        font-size: 12px;
        color:#fff;
        transition-duration: .5s;
    }
    .rooma a:hover{
        background-color: #000;
        color:#fff;
    }
    .rooma .icon{
        width:100%;
        margin-top: 20px;
        padding: 20px 0;
        border-top:1px solid #e0dfdf
    }
    .rooma .icon img{
        width:250px;
        height: auto;
    }
    .roomz{
        width:85%;
        margin-bottom: 50px;
    }
    .reservation .reservation-txt{
        font-size:14px;
    }
    .guest form input{
        width:230px;
    }
    .guest form img{
        margin-top: 30px;
    }
    .success{
        width:80%;
        height: 30%;
    }
    .check-divv{
        width:98%;
        top:400px;
        left:1%; 
        display: flex;
        justify-content: space-between;
        align-items: center;   
    }
    .check-divv .check-in, .check-out{
        padding: 5px; 
    }
    .check-divv .availability{
        padding: 5px; 
        float:clear;
    }
    .check-divv label{
        font-size: 8px;
    }
    .check-divv form{
        display: block;
    }
    input[type="date"]{
        border:none;
        font-size: 10px;
        margin-top: 10px;
        width:40px;
    }
    .check-divv select{
        margin-top: 10px;
        border:none;
        font-size: 16px;
    }*/
    .room-div, .room-div2{
        padding: 80px 20px 0 20px;
    }
    .discover-div{
        padding: 160px  20px 20px 20px;
        justify-content: center;
    }
    .discover-div .txt-div .txt{
        font-size:22px;
        margin: 0 10px 20px 0px;
    }
    .discover-div .img{
        width:100%;
    }
    .discover-div .img img{
        width:300px;
        top:0px;
    }
    .catering{
        height: 260px;
    }
    .catering img{
        width:400px;
        height: 260px;
        transition-duration: .5s;
    }
    .catering img:hover{
        margin-left: 80px;
    }
    .food-div{
        padding:100px 20px;
    }
    .food-div .txt{
        font-size:24px;
    }
    .taste .txt-heading{
        font-size:20px;
    }
    .open{
        width:250px;
        height: 250px;
         display: flex;
         justify-content: center;
         align-items: center;
         flex-direction: column;
         box-shadow: 0 0 8px 0 rgba(0,0,0,.1);
         position: relative;
     }
     .rest-opening{
         width:250px;
         height: 250px;
     }
}
@media screen and (max-width: 320px){
    .success{
        width:90%;
        height: 30%;
    }
    .rooma{
        width:260px;
        height: 500px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-wrap: wrap;
        transition-duration: .5s;
        margin-bottom: 40px;
        border:1px solid #e0dfdf;
    }
    .rooma img{
        width:260px;
        height: 200px;
    }
    .rooma .icon{
        width:80%;
        margin-top: 20px;
        padding: 20px 0;
        border-top:1px solid #e0dfdf
    }
    .check-divv{
        transform:scale(0.8)
    }
    .check-divv .check-in, .check-out{
        padding: 2px; 
    }
    .check-divv .availability{
        padding: 5px; 
    }
    .check-divv select{
        font-size: 14px;
    }
    .check-divv a{
        font-size: 3px;
    }
}