@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@1,200;1,400;1,600;1,700;1,900&family=Sriracha&display=swap");

/* --------------------------------------------------------------------Colors */

.ui-menu-color-home,
.home-footer {
    background-color: #2c89a5;
}

.ui-menu-color-order,
.order-footer {
    background-color: #638f21;
}

.ui-menu-color-reservation,
.reservation-footer {
    background-color: #aa58aa;
}

.ui-menu-color-rate-us,
.rate-us-footer {
    background-color: #bb6363;
}

body {
    background-color: #fafafa;
}

/* -------------------------------------------------------------------general */
body,
html {
    max-height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

footer {
    overflow-y: hidden;
    max-height: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.inline {
    display: inline;
}

.block {
    display: block;
}

.center {
    text-align: center;
}

.uppercase {
    text-transform: uppercase;
}

h1,
h2,
h3 {
    font-family: "Sriracha", cursive;
    text-align: center;
    margin-bottom: 20px;
    color: #fafafa;
}

label,
h4 {
    font-family: "Sriracha", cursive;
    text-align: center;
    margin-bottom: 20px;
    color: #000000;
}

h5,
h6,
input {
    font-family: "Sriracha", cursive;
    text-align: left;
}

.btn {
    font-family: "Sriracha", cursive;
    text-align: center;
    margin-bottom: 20px;
}

p {
    font-family: "Source Sans Pro", sans-serif;
}

ul {
    list-style-type: none;
}

ul li:hover {
    opacity: 1;
}

a {
    color: #fafafa;
}

strong {
    font-family: "Source Sans Pro";
}

em,
.small {
    font-family: "Source Sans Pro", sans-serif;
}

/* --------------------------------------------------------------------header */

header {
    min-height: 120px;
    margin: 0 auto;
}

.list-inline-item:not(:last-child) {
    margin: 0;
}

.list-inline-item {
    margin-top: 0;
    padding-left: 0px;
}

.menucontainer {
    font-size: 0;
}

#nav {
    margin: 0;
}

#nav li {
    padding: 0;
    font-size: 14px;
}

.menuitem {
    height: 120px;
    text-align: center;
    padding: 0;
}

.menuitem a {
    width: 100%;
    text-decoration: none;
    color: #fafafa;
    height: 120px;
}

.menuitem a i {
    padding-top: 22px;
    display: block;
    color: #fafafa;
    font-size: 26px;
}

.menuitem span {
    display: block;
    width: 100%;
    padding-top: 50px;
    text-align: center;
    text-transform: uppercase;
    font-size: 17px;
    font-weight: 600;
    font-family: "Sriracha", cursive;
    word-spacing: 4px;
}

.hvr-sweep-to-bottom:before {
    background: #00000033;
    height: 120px;
}

/* --------------------------------------------------------------------footer */

footer {
    color: #fafafa;
}

.footer-parts {
    margin-bottom: 5px;
}

.sign-in-note {
    font-family: "Source Sans Pro", sans-serif;
}

.sign-in-btn {
    border-radius: 50px;
    background-color: #daa520;
    height: 60px;
    min-width: 120px;
    border-color: #c5a34b;
    margin: 0 auto;
    margin-top: -5px;
    bottom: 30px;
    font-size: 17px;
}

#sign-in-passworld,
#sign-in-email {
    background-color: #faf5e4;
    border-width: 3px;
    text-align: center;
}

#sign-in-passworld:focus,
#sign-in-email:focus {
    border-color: #daa520;
    border-width: 3px;
    background-color: #fafafa;
}

.btn-primary:hover {
    color: #fafafa;
    background-color: #c5a34b;
    border-color: #daa520;
}

.contacts {
    height: 100%;
}

.contact-items {
    height: 60%;
}

.contacts p {
    font-family: "Source Sans Pro", sans-serif;
    width: 350px;
    height: 40px;
    padding-left: 17px;
}

.contacts i {
    width: 1px;
    height: 35px;
    font-size: 25px;
    padding-left: 0px;
}

.social-links {
    margin: 0 auto;
}

.social-links li {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-right: 15px;
}

.social-links a i {
    width: 50px;
    height: 50px;
    padding: 20px 2px 0px 2px;
    border-radius: 50%;
    font-size: 25px;
    text-align: center;
    color: #fafafa;
}

.social-links li a i:hover {
    background: #686464;
}

.general-sub {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
}

form,
.form-control {
    max-width: 80%;
}

/* --------------------------------------------------------------------index */

.logo,
.carousel-item img {
    background-position: center;
    background-size: cover;
    padding-left: 0;
    padding-right: 0;
    height: 675px;
}

.carousel-item h3 {
    background-color: rgba(39, 39, 39, 0.5);
    border-radius: 50px;
    margin-bottom: 0px;
    max-width: 350px;
    text-align: center;
    margin: 0 auto;
    color: #fafafa;
}

.jumbotron-fluid {
    margin: 0 auto;
    background-color: #7e7e7e;
    color: #fafafa;
    padding: 10px;
    width: 100%;
}

.footer-content {
    padding-top: 10px;
}

.page-heading {
    padding-top: 30px;
    padding-bottom: 10px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 5px;
    color: #000;
}

.jumbotron-fluid p,
.index-note {
    font-family: "Source Sans Pro", sans-serif;
    text-align: justify;
    text-align-last: center;
    -webkit-transform: translateZ(0px);
}

.jumbotron-fluid p {
    margin-bottom: 0;
    text-align: center;
}

.food-guide h6 {
    margin-top: 20px;
    text-align: center;
    font-family: "Source Sans Pro";
}

/* -----------------------------------------------------------------food-menu */

.food-menu-header {
    margin-top: 40px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 20px;
    border-radius: 30px;
    padding: 15px;
    color: #000000;
}

.food-menu ul {
    padding-left: 0;
}

.food-menu-header li {
    text-align: center;
}

.food-menu-header:hover {
    background-color: #547522;
    color: #fafafa;
}

.active-btn {
    background-color: #638f21;
    border-color: #547522;
    color: #fafafa;
}

.drinks-header {
    font-family: "Source Sans Pro", sans-serif;
    background-color: #638f21;
    color: #fafafa;
    margin: 0 auto;
    border-radius: 50px;
    padding: 10px;
}

.guide-span {
    float: right;
}

.food-menu-images {
    height: 200px;
}

/*-----------------------------------------------------------------reservation*/

.validity {
    padding-left: 0;
    padding-right: 30px;
}

input:invalid + span:after {
    position: absolute;
    content: "✖";
    padding-left: 5px;
}

input:valid + span:after {
    position: absolute;
    content: "✓";
    padding-left: 5px;
}

.views {
    margin: 0 auto;
}

.reservation-submit-btn {
    background-color: #aa58aa;
    border-radius: 50px;
    padding: 0px;
    margin: 0 auto;
    margin-bottom: 20px;
    text-align: center;
    height: 90px;
}

.reservation-submit-btn:hover {
    background-color: #804580;
}

.reservation-info input {
    border-width: 2px;
    border-color: #e0e0e0;
    border-radius: 20px;
    background-color: #f5eaf5;
    height: 45px;
    text-align: center;
    color: #808080;
}

.reservation-info label {
    margin-bottom: 0;
    margin-top: 15px;
    color: #000;
}

.reservation-info input:active {
    background-color: #aa58aa;
}

.views label {
    padding-left: 5px;
    font-weight: 400;
    color: #000;
}

form {
    margin: 0 auto;
    text-align: center;
}

.form-p {
    margin: 0 auto;
    margin-bottom: 20px;
    font-family: "Source Sans Pro", sans-serif;
    font-weight: 600;
}

small {
    text-align: center;
    padding-top: 0;
    margin: 0 auto;
}

.page-questions {
    padding-top: 30px;
    padding-bottom: 10px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 5px;
}

/* -------------------------------------------------------------------rate-us */

.form-check {
    margin-bottom: 20px;
    margin-top: 10px;
}

.radio-questions label {
    margin-top: 0px;
    margin-left: 5px;
    vertical-align: -webkit-baseline-middle;
    font-weight: 400;
    color: #000000;
}

.radio-questions input {
    height: 30px;
}

.rate-us-submit-btn {
    background-color: #bb6363;
    border-color: #945757;
    border-radius: 50px;
    padding: 0px;
    margin: 0 auto;
    margin-bottom: 30px;
    text-align: center;
    height: 90px;
}

.rate-us-submit-btn:hover {
    background-color: #945757;
}

.rate-us-info {
    margin: 0 auto;
}

.rate-us-questions {
    margin: 0 auto;
    margin-top: 10px;
}

.text-area {
    margin: 0 auto;
}

.votes {
    margin: 0 auto;
    margin-top: 15px;
    padding: 0;
}

.form-group {
    padding-left: 0px;
    padding-right: 0px;
}

label.custom-control-label {
    outline-color: #fafafa;
}

.form-control {
    border-width: 3px;
    border-radius: 60px;
    background-color: #e7d8d8;
    width: 80%;
    margin: 0 auto;
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle:focus {
    color: #fafafa;
    background-color: #8880809f;
    border-color: #e0e0e0;
    box-shadow: 0 0 0 0.2rem #ffffff80;
}

.btn-primary.focus,
.btn-primary:focus {
    box-shadow: none;
}

.form-control:focus {
    box-shadow: none;
    border-color: #e0e0e0;
}

/* --------------------------------------------------------------------@media */
@media only screen and (max-width: 300px) {
    .drinks-header {
        width: 210px;
    }

    .contact-items div {
        margin-left: 15px;
    }

    .page-heading {
        font-weight: bold;
    }

}

@media only screen and (min-width: 599px) {
    .sign-in-btn {
        margin-right: 10px;
        height: 60px;
    }

    .drinks-header {
        width: 65%;
        margin-left: 15px;
    }
    .contacts{
        margin: 7px;
        line-height: 10px;
    }
}

@media only screen and (min-width: 801px) {

    form {
        width: 75%;
    }
}

@media only screen and (min-width: 1200px) {

    .contacts p {
        font-family: "Source Sans Pro";
        margin-left: 10px;
    }

    .guide-span {
        font-weight: 400;
    }

    em,
    h4,
    h5,
    h6,
    .btn,
    input,
    .general-sub,
    .menuitem span {
        font-family: "Sriracha", cursive;
    }

    .contacts i,
    .social-links a i {
        font-size: 25px;
    }

    strong,
    .food-menu-header {
        color: #000;
    }

    .active-btn {
        color: #fafafa;
    }

    .drinks-header {
        margin-left: 10px;
        width: 75%;
    }

    .views label,
    .form-p {
        color: #000000;
    }

    .reservation-info label {
        color: #000000;
    }

    .radio-questions label {
        color: #000000;
        margin-left: 20px;
        padding-left: 10px;
    }

    .radio-input {
        width: 30px;
        margin-right: 20px;
        padding-right: 10px;
    }

    .reservation-info input {
        height: 75px;
    }

    .views input {
        width: 30px;
        margin-right: 20px;
        padding-right: 10px;
    }

    .views label {
        margin-left: 20px;
        padding-left: 10px;
    }

}

@media only screen and (min-width: 599px) and (max-width: 1199px) {
    .logo,
    .carousel-item img {
        height: 460px;
    }

    .page-heading {
        padding-top: 10px;
    }
}

@media only screen and (min-height: 955px) and (max-height: 1300px) {
    .page-heading {
        padding-top: 5px;
        margin-top: 5px;
    }
}

@media only screen and (min-height: 1000px) and (max-height: 1500px){
    html,
    body {
        height: 100%;
    }

    .general-sub {
        padding-bottom: 5px;
        padding-top: 15px;
    }

    .social-links {
        height: 75%;
    }

    .drinks-header {
        width: 75%;
    }
    .lead,
    .food-guide,
    .footer-row{
        margin-top: 27px;
        margin-bottom: 27px;
        line-height: 40px;
    }
    .sign-in-note{
        line-height: 25px;
    }
}

@media only screen and (min-height: 1200px) and (max-height: 1400px) {
    .logo,
    .carousel-item img {
        height: 565px;
    }
}