/* Fonts to be used */
/* font-family: 'Alata', sans-serif; - Headers  */
/* font-family: 'Lato', sans-serif; ///// */

html, body{
    height: 100%;
    weight: 100%;
    color: #222;
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
}
.navbar{
    background-color: #073F26 !important;
    padding: .8rem;
    font-family: 'Lato', sans-serif;
}
.navbar-brand{
    padding-left: 3rem;
}
.navbar li{
    padding-right: .3rem;
}
.nav-link{
    font-size: 1.2em;
}
.reserve-table{
    background-color: #6E8180;
    border-radius: 5px;
}
.carousel-inner img{
    width: 100%;
    height: 85vh;
    background-size: cover;
}
.carousel-caption{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.carousel-indicators{
    position: absolute;
    top:90%;
}
.col-overlay:after{
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: #477755;
    opacity: .2;
}
.carousel-caption h1{
    font-size: 500%;
    font-family: 'Roboto Slab', serif;
    /* text-transform: uppercase; */
    text-shadow: 1px 1px 15px #000;
}
.carousel-caption h3{
    font-size: 200%;
    padding-bottom: 1rem;
    text-shadow: 1px 1px 15px #000;
}
.btn-outline-light{
    font-family: 'Roboto Slab', serif;
    font-weight: 100;
    background-color: #8B7996;
}
.btn-outline-light:hover{
    background-color: #a1a79c;
}
.padding{
    padding-bottom: 2rem;
}
.our-food{
    margin: 0 auto;
    padding-top: 2rem;
}
.our-food hr{
    border-top: 2px solid #b4b4b4;
    margin-top: .3rem;
    margin-bottom: 3.4rem;
}
.our-food-text{
    font-size: 1.20rem;
}
.main-message{
    color: #dea335;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    letter-spacing: .2rem;
}
.roundhouse{
    font-family: 'Roboto Slab', serif;
    font-weight: 600;
    letter-spacing: .2rem;
}
span.lead.roundhouse{
    text-decoration: none;
    color: #A46060;
}
.partners{
    margin: 4rem 0 1rem 0;
}
.video-card{
    margin-top: 2rem;
    padding: 7rem 2rem 7rem 2rem;
    background-color: #073F26;
}
.our-restaurant{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
}
footer{
    padding: 3rem 3rem 1rem 3rem;
}
.back-to-top{
    display: block;
}
.back-to-top a{
    color: #dea335;
}
.back-to-top a:hover{
    color: #253631;
}
.error{
    color: red;
}
.success{
    color: green;
}
.map{
    margin: 1.3rem 0 0 0;
}
/* Social Networking Icons */
.fab{
    color: #073F26;
}
.fab:active{
    color: #073F26;
}




/* About Page */
.about-jumbo{
    background-image: url("../img/food/thai-prawn.jpg");
    background-size: cover;
    background-position: center;
    color: #f8f9fa;
    font-size: 500%;
    font-family: 'Roboto Slab', serif;
    text-shadow: 1px 1px 15px #000;

}

.welcome-head{
    padding: 2rem 0 1rem 15px;
    color: #073F26;
}
.welcome-text{
    font-size: 1.20rem;
    line-height: 2rem;
}
.about-info{
    color: #fff;
    text-align: center;
}
.header-our-restaurant{
    padding-bottom: 1rem;
    color: #8BB184;
}
.about-us{
    padding: 2rem 1rem 2rem 1rem;
    background-color: #073F26;
}

/* Contact Page */
.contact-jumbo{
    background-image: url("../img/food/shrimp-soup.jpg");
    background-size: cover;
    background-position: center;
    color: #f8f9fa;
    font-size: 500%;
    font-family: 'Roboto Slab', serif;
    text-shadow: 1px 1px 15px #000;
}
.card-header{
    background-color: rgba(7, 63, 38, 0.8);
    color: #fff;
}

.form-title{
    padding: 1rem 0 2rem 0;
    /* text-align: center; */ 
}

label{
    background-color: #6B9581;
    color: #fff;

}
.sent-btn{
    background-color: #6B9581;
    border: 0;
    padding: 1rem 2rem 1rem 2rem;
}

/* Reserve Table */
.reseve-jumbo{
    background-image: url("../img/food/toast.png");
    background-size: cover;
    background-position: center;
    color: #f8f9fa;
    font-size: 500%;
    font-family: 'Roboto Slab', serif;
    text-shadow: 1px 1px 15px #000;
}

.reserve-card{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #477755 !important;
    height: 100%;
}
/* Menu */
.menu-jumbo{
    background-image: url("../img/food/cooked-seafoods.jpg");
    background-size: cover;
    background-position: center;
    color: #f8f9fa;
    font-size: 500%;
    font-family: 'Roboto Slab', serif;
    text-shadow: 1px 1px 15px #000;
}
.menu-display img{
    width: 100%;
    height: 30rem;
    border: 1px green solid;
    box-shadow: 1px 1px 15px #000;
}
.menu-title{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #477755 !important;
    color: #fff;
}
.click{
    padding-top: 1rem;
}
.notice{
    margin: 3rem 0 2rem 0;
    background-color:#477755;
    padding: 5%;
    font-size: 1.20rem;
    line-height: 2rem;
    text-align: center;
}
.notice p{
    color: #F7F3EE;
}
/* --- Media Queries --- */
@media (max-width: 992px){    
}

@media (max-width: 768px){  
    .our-restaurant{
        display: flex;
        justify-content: center;
        align-items: center;
        /* text-align: center; */
        color: #fff;
        /* background-color: #dea335; */
        text-shadow: 1px 1px 3px #000;
    }
    form{
        background-color:#89797D;
    } 

    .form-title{
        padding: .5rem 0 0 0;
        font-size: 1.4rem;
        /* text-align: center; */ 
    }
    .form-group label{
        background-color: transparent;
    }
    .contact-form{
        padding: 1.5rem;
    }
    .sent-btn{
        background-color: #fff;
        padding: 1rem 2rem 1rem 2rem;
        color: #89797D;
    }

}

@media (max-width: 576px){
    a.navbar-brand {
        margin: 0 auto;
    }
    li.nav-item.reserve-table {
        padding-left: 10%;
        margin-left: 10%;
        width:80%;
    }
    .carousel-inner img{
        height: 60vh;
        background-size: cover;
    }
    .carousel-caption{
        position: absolute;
        top: 40%;
        transform: translateY(-40%);
    }
    .carousel-caption h1{
        font-size: 270%;
        font-family: 'Roboto Slab', serif;
        text-shadow: 1px 1px 15px #000;
    }
    .carousel-caption h3{
        font-size: 100%;
        text-shadow: 1px 1px 15px #000;
    }
    .carousel-indicators{
        position: absolute;
        top:85%;
    }
    .partner-logo{
        padding: 2rem 0 2rem 0;
    }
    .video-card{
        margin-top: 1rem;
        padding: 2rem .5rem 2rem .5rem;
        background-color: #253631;
    }
    .header-our-restaurant{
        font-size: 2rem;
    }
    .our-restaurant{
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        text-shadow: 1px 1px 3px #000;
    }
    .menu-title{
        width: 70%;
        color: #333;
        background-color: transparent !important;
    }
    .menu-display{
        text-align: center;
    }
    .menu-display img{
        width: 50%;
        height: 10rem;
        box-shadow: 1px 1px 15px #000;
    }
    .address, .contact-us, .opening-hours{
        margin-top: 2rem;
        color: #222;
    } 
    .address hr, .contact-us hr, .opening-hours hr{
        width: 70%;
        border: 1px solid #253631;
    }
}