.navbar {
    background: #444;
    -o-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s;
    -ms-transition: all .6s;
    transition: all .6s;
    backface-visibility: hidden;
}

.navbar {
    background: #444;
    background: rgba(0, 0, 0, 0.2);
}

.navbar-dark .navbar-nav {
    font-size: 15px;
    color: #fff;
    font-weight: 400;
}

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    color: rgba(255, 255, 255, 0.8);
    border: 0;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff;
}

.navbar-dark .navbar-nav .nav-link:focus {
    color: #fff;
    outline: 0;
}

.navbar-expand-md .navbar-nav .nav-link {
    padding-left: 1rem;
    padding-right: 1rem;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #363637;
    line-height: 30px;
    text-align: center;
    margin-top: top;
}

.strong {
    font-weight: 600;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    transition: all .3s;
}

h1,
h2 {
    margin-top: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 38px;
    font-weight: 400;
    color: #555;
    line-height: 50px;
}

/* Style all font awesome icons */
.fa {
    padding: 10px;
    font-size: 30px;
    text-align: center;
    text-decoration: none;
    color: white;
    margin: 0px;
}

/* hover effect  */
.fa:hover {
    color: gray;
    text-decoration: none;
}

/***** Top content *****/
.top-content {
    background-image: url('../images/background/background1_sketch.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.top-content {
    padding: 210px 0;
}

.top-content .text {
    color: #ffffff;
    text-align: left;
}

.top-content .text h1 {
    margin-top: 220px;
    color: #ffffff;
}

.top-content .description {
    margin: 30px 0 10px 0;
}

.top-content .description p {
    opacity: 0.8;
}

.top-content .top-big-link {
    margin-top: 40px;
}

/***** section 1 reservation *****/
.section-1 {
    background-image: url('../images/background/plant_detail.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.section-1 {
    padding: 110px 0;
}

.section-1_quandoobox {
    background-color: rgba(247, 250, 251, 0.7);
}

/***** section 2 sample menu and form ordering *****/
.section-2 {
    background-image: url('../images/background/picture_light.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.section-2 {
    padding: 210px 0;
}

p.menu_sm_rufus {
    font-size: 12px;
}

.samplemenu {
    background-color: rgba(247, 250, 251, 0.7);
    margin: 0px 50px;
    text-align: left;
}

.samplemenu_form {
    margin: 0px 50px;
    text-align: left;
}

.vertical_padding_sec2 {
    padding-top: 10px;
    padding-bottom: 0px;
}

.menucontent_pad_sec2 {
    padding-top: 30px;
    padding-bottom: 40px;
}

.sample_menu_imgs {
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: space-between;
}

.sec2_foodshots {
    margin-top: 5px;
    margin-bottom: 25px;
    margin-left: 1px;
}

.sec2_groupphotos {
    margin: 0px 50px;
}

/***** section 3 news *****/
.section-3 {
    background-image: url('../images/background/interior-back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.card {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    background-color: rgba(247, 250, 251, 0.4);
}

.card-img-top {
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
}

.section-3 {
    padding: 110px 0;
}

.sec3_news_items {
    margin: 0px 50px;
}

/***** section 4 gallery *****/
.section-4 {
    background-image: url('../images/background/grey_back.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.section-4 {
    padding: 110px 0;
}

/* drop shadow: offset-x | offset-y | blur-radius | spread-radius | color */
.carousel-inner {
    -webkit-box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 5px 5px 10px 5px rgba(0, 0, 0, 0.5);
}

.gallery_item {
    margin: 0px 50px;
}

/***** section 5 about *****/
.section-5 {
    background-image: url('../images/background/interior_front.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.section-5 {
    padding: 210px 0;
}

.vertical_padding_sec5 {
    padding-top: 10px;
    padding-bottom: 1px;
}

.about_box {
    background-color: rgba(247, 250, 251, 0.7);
    margin: 0px 50px;
    text-align: left;
    line-height: 25px;
}

/***** section 6 contact *****/
.section-6 {
    background-image: url('../images/background/bar_area.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}

.section-6 {
    padding: 210px 0;
}

.contact_box {
    margin: 0px 50px;
    text-align: left;
    line-height: 25px;
    font-size: 17px;
    font-weight: 500;
}

.contact_box_inner a {
    color: #363637;
    text-decoration: none;
}

.contact_box_inner {
    background-color: rgba(247, 250, 251, 0.7);
    display: inline-block;
    margin-top: 23px;
}

.contact_heading {
    font-weight: 700;
    padding-top: 15px;
}

/***** footer notes: if we chose position: fixed in would at the bottom of 
the viewport all the time but static shoves at the bottom of the page *****/
.footer {
    position: static;
    left: 0;
    bottom: 0px;
    right: 0px;
    width: 100%;
    background-color: #333333;
    color: #979797;
    text-align: center;
    font-size: 11px;
    text-decoration: none;
}

.footer a {
    color: #979797;
    text-decoration: none;
}

/***** Media Queries *****/
/***** iphone 5 upwards *****/
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
{
    .logo_large {
        display: none;
    }

    .logo_small {
        display: block;
    }

    button.navbar-toggler {
        position: absolute !important;
        right: 10px !important;
        top: 14px !important;
    }

    .h1 {
        font-size: 10px;
    }

    .top-content .text h1 {
        margin-top: 10px;
        color: #fff;
    }

    .top-content {
        padding: 100px 0;
    }

    .section-2 {
        padding: 100px 0;
    }

    .samplemenu {
        margin: 0px 10px;
    }

    .sec3_news_items {
        margin: 0px 10px;
    }

    .card {
        background-color: rgba(255, 255, 255, 0.9);
    }

    .gallery_item {
        margin: 0px 10px;
    }

    .section-5 {
        padding: 100px 0;
    }

    .about_box {
        margin: 0px 10px;
        background-color: rgba(255, 255, 255, 0.9);
    }

    .section-6 {
        padding: 100px 0;
    }

    .contact_box {
        margin: 0px 10px;
    }
}

/***** everything above iphone *****/
@media only screen 
and (min-device-width : 569px) 
and (max-device-width : 3000px) 
{
    .logo_small {
        display: none;
    }

    .logo_large {
        display: block;
    }
}

/* STYLES GO HERE */}