/* reset css */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* FONTS */
@font-face {
    font-family: 'GSbold';
    src: url('./fonts/GillSans-Bold.woff2') format('woff2'),
        url('./fonts/GillSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GSlight';
    src: url('./fonts/GillSans-Light.woff2') format('woff2'),
        url('./fonts/GillSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GSsemi';
    src: url('./fonts/GillSans-Medium.woff2') format('woff2'),
        url('./fonts/GillSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'GSregular';
    src: url('./fonts/GillSans.woff2') format('woff2'),
        url('./fonts/GillSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rest1title';
    src: url('./fonts/TheCastleElizah.woff2') format('woff2'),
        url('./fonts/TheCastleElizah.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rest2title';
    src: url('./fonts/Mermaid-Bold.woff2') format('woff2'),
        url('./fonts/Mermaid-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rest3title';
    src: url('./fonts/Bebas-Regular.woff2') format('woff2'),
        url('./fonts/Bebas-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* general app styles */
body {
    background-color: #999;
}

main {
    background-color: #fff;
    position: absolute;
    width: 375px;
    height: 667px;
    overflow: hidden;
}

header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 74px;
    background-color: #666;
    color: #fff;
}

.rest {
    box-shadow: -5px 0px 8px #011630;
}

section {
    position: absolute;
    top: 74px;
    background-color: #aaa;
    width: 100%;
    height: 533px;
    overflow: auto;
    overflow-x: hidden;
}

footer {
    position:absolute;
    bottom: 0;
    width: 375px;
    height: 60px;
    background-color: #666;
    color: #fff;
}

/* SPLASH SCREEN ///////////////////////////////////////// */
#splash {
    background-color: #011E41;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.splashicon {
    width: 112px;
    margin-top: -100px;
    margin-bottom: 10px;
    height: auto;
}

.splashtext {
    width: 199px;
    height: auto;
}

/* LANDING SCREEN ///////////////////////////////////////// */
#landing {
    background-color: #011E41;
}

#landing header {
    height: 116px;
    padding-top: 20px; 
    text-align: center;
    background-color: transparent;
    font-family: 'GSsemi', sans-serif;
    font-size: 12pt;
}

.landing-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#landing header img {
    width: 49px;
    height: auto;
    margin-bottom: 23px;
}

#rest1tab {
    display: flex;
    justify-content: center;
}

#rest1tab img {
    width: 314px;
    height: auto;
    margin-top: 125px;
}

#rest2tab img {
    width: 314px;
    height: auto;
    margin-top: 18px;
}

#rest3tab img {
    width: 314px;
    height: auto;
    margin-top: 18px;
}

.btmtext {
    width: 314px;
    height: auto;
    display: flex;
    justify-content:space-between;
    color: #fff;
    margin-top: 5px;
    letter-spacing: .5px;
}

.btmtext #restname {
    font-family: 'GSsemi', sans-serif;
    font-size: 11pt;
}

.btmtext p {
    font-family: 'GSlight', sans-serif;
    font-size: 9pt;
}

/* SHARED RESTAURANT STYLE ///////////////////////////////////////// */
/* header & footer */
#rest1 header, #rest2 header, #rest3 header {
    filter: drop-shadow(0 0 5px #000);
    z-index: 1;
}

footer div {
    float: left;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.5px;
    padding: 10px;
    color: #FFF;
    font-family: 'GSsemi', sans-serif;
}

.home-icon {
    margin-left: 35px;
    padding-top: 13.5px;
    height: 60px;
}

.specials-icon {
    margin-left: 55px;
    margin-right: 55px;
    padding-top: 11.5px;
    height: 60px;
}

.reservations-icon {
    padding-top: 12.5px;
    height: 60px;
}

/* HOME - sharing among 3 restrautants */
.hamburger {
    height: 30px;
    width: auto;
    float: left;
    margin-top: 23px;
    margin-left: 30px;
}

.featuredimage {
    width: 375px;
    height: auto;
}

.homelogo img {
    width: 80px;
    height: auto;
    margin-top: -30px;
    left: 270px;
    position: relative;
    z-index:1;
}

.topinfo {
    padding: 15px 30px 30px 30px;
    margin-top: -55px;
}

.topinfo h1 {
    font-family: 'GSsemi', sans-serif;
    color: #fff;
    font-size: 34px;
    letter-spacing: 1.5px;
}

.stars {
    width: auto;
    height: 16px;
    float: left;
    margin-right: 2px;
    margin-bottom: 20px;
}

hr {
    width: 311px;
    height: 1px;
    border: none;
    margin: 0 auto -8px auto;
}

.topinfo p {
    font-family: 'GSregular', sans-serif;
    color: #fff;
}

.topinfo span {
    font-family: 'GSbold', sans-serif;
    margin-left: 8px;
}

.midinfo {
    padding: 0 30px 0 30px;
    color: #fff;
    font-family: 'GSsemi', sans-serif;
    font-size: 15px;
}

.midinfo img {
    float: left;
    margin-right: 18px;
}

.midinfo p {
    width: 300px;
    margin-bottom: 20px;
    letter-spacing: .5px;
}

.midinfo #hour {
    margin-right: 13px;
}

.midinfo #dinetype {
    margin-right: 12px;
}

.chefsec {
    padding: 10px 30px 25px 30px;
    position: absolute;
}

.chefsec img {
    width: 87px;
    height: auto;
    float: left;
    margin-right: 20px;
}

.chefsec h2 {
    color: #fff;
    font-family: 'GSbold', sans-serif;
    font-size: 15px;
    position: relative;
    margin-top: 50px;
    line-height: 22px;
}

.chefsec p {
    color: #fff;
    font-family: 'GSregular', sans-serif;
    font-size: 15px;
    line-height: 22px;
}

.chefsec #writeup {
    margin-top: 10px;
}

/* HOME - Ceviche (Restaurant 1) */
#rest1 {
    background-color: #1A3C34;
}

#rest1 header {
    background-color: #05271E;
    text-align: center;
}

#rest1 footer {
    background-color: #05271E;
}

#rest1 .home {
    background-color: #1A3C34;
}

#rest1logo {
    margin-top: 29px;
    margin-right: 60px;
}

#rest1 hr {
    background-color: #957835;
}

/* HOME - Five Vines (Restaurant 2) */
#rest2 {
    background-color: #79242F;
}

#rest2 header {
    background-color: #4A1118;
    text-align: center;
}

#rest2 footer {
    background-color: #4A1118;
}

#rest2 .home {
    background-color: #79242F;
}

#rest2logo {
    margin-top: 32px;
    margin-right: 60px;
}

#rest2 hr {
    background-color: #B89546;
}

#rest2 p {
    margin-top: 1px;
}

/* HOME - crispy's (Restaurant 3) */
#rest3 {
    background-color: #673621;
}

#rest3 header {
    background-color: #B94C12;
    text-align: center;
}

#rest3 footer {
    background-color: #B94C12;
}

#rest3 .home {
    background-color: #673621;
}

#rest3logo {
    margin-top: 24px;
    margin-right: 60px;
}

#rest3 hr {
    background-color: #D9B45D;
}

/* SPECIALS - sharing among 3 restrautants */
.specialimage {
    width: 375px;
    height: auto;
}

.specials p {
    color: #fff;
    font-family: 'GSregular', sans-serif;
    font-size: 15px;
    line-height: 22px;
    padding: 28px;
    text-align:left;
    margin-top:  -15px;
    padding-bottom: 10px;
}

.nightlyspecials {
    padding: 10px;
    padding-top: 15px;
    margin-bottom: 20px;
}

.specialsrow1, .specialsrow2, .specialsrow3 {
    display: flex;
    margin-left: 18px;
    margin-bottom: 5px;
}

.specials1, .specials2, .specials3, .specials4, .specials5, .specials6 {
    width: 150px;
    height: 206px;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    margin-top: 10px;
    margin-right: 25px;
}

/* SPECIALS - Ceviche Restaurant 1 */
#rest1 .specials {
    background-color: #1A3C34;
}

#rest1 .nightlyspecials {
    margin-top: -5px;
}

#rest1 .specials h1 {
    font-family: 'Rest1title';
    font-size: 22px;
    color: #957835;
    margin-left: 30px;
    letter-spacing: 1px;
    margin-top: 20px;
}

#rest1 .nightlyspecials h4 {
    color: #fff;
    font-family: 'GSbold', sans-serif;
    font-size: 15px;
    text-align: center;
    margin-top: -5px;
}

#rest1 .nightlyspecials h3 {
    color: #fff;
    font-family: 'GSsemi', sans-serif;
    font-size: 15px;
    letter-spacing: .6px;
    text-align: center;
    padding-top: 118px;
    margin-bottom: 3px;
}

#rest1 .nightlyspecials p {
    color: #fff;
    font-family: 'GSregular', sans-serif;
    font-size: 13px;
    text-align: center;
    line-height: 15px;
    letter-spacing: .6px;
    padding: 13px;
}

#rest1 .specials1 {
    background-image: url(../img/rest1_specials1.png);
}

#rest1 .specials2 {
    background-image: url(../img/rest1_specials2.png);
}

#rest1 .specials3 {
    background-image: url(../img/rest1_specials3.png);
}

#rest1 .specials4 {
    background-image: url(../img/rest1_specials4.png);
}

#rest1 .specials5 {
    background-image: url(../img/rest1_specials5.png);
}

#rest1 .specials6 {
    background-image: url(../img/rest1_specials6.png);
}

/* SPECIALS - Five Vines Restaurant 2 */
#rest2 .specials {
    background-color: #79242F;
}

#rest2 .nightlyspecials {
    margin-top: -10px;
}

#rest2 .specials h1 {
    font-family: 'Rest2title';
    font-size: 22px;
    color: #BE9434;
    margin-left: 30px;
    letter-spacing: 1px;
    margin-top: 20px;
}

#rest2 .specials p {
    margin-top:  -15px;
}

#rest2 .nightlyspecials h4 {
    color: #fff;
    font-family: 'GSbold', sans-serif;
    font-size: 15px;
    text-align: center;
    margin-top: -5px;
}

#rest2 .nightlyspecials h3 {
    color: #fff;
    font-family: 'GSsemi', sans-serif;
    font-size: 15px;
    letter-spacing: .6px;
    text-align: center;
    padding-top: 122px;
    margin-bottom: 3px;
}

#rest2 .nightlyspecials p {
    color: #fff;
    font-family: 'GSregular', sans-serif;
    font-size: 13px;
    text-align: center;
    line-height: 15px;
    letter-spacing: .6px;
    padding: 13px;
    padding-top: 12px;
}

#rest2 .specials1 {
    background-image: url(../img/rest2_specials1.png);
}

#rest2 .specials2 {
    background-image: url(../img/rest2_specials2.png);
}

#rest2 .specials3 {
    background-image: url(../img/rest2_specials3.png);
}

#rest2 .specials4 {
    background-image: url(../img/rest2_specials4.png);
}

#rest2 .specials5 {
    background-image: url(../img/rest2_specials5.png);
}

#rest2 .specials6 {
    background-image: url(../img/rest2_specials6.png);
}

/* SPECIALS - crispy's Restaurant 3 */
#rest3 .specials {
    background-color: #673621;
}

#rest3 .nightlyspecials {
    margin-top: 15px;
}

#rest3 .specials h1 {
    font-family: 'Rest3title';
    font-size: 22px;
    color: #E0B34B;
    margin-left: 30px;
    letter-spacing: 1px;
    margin-top: 20px;
}

#rest3 .specials p {
    margin-top:  -15px;
}

#rest3 .specials h1:last-of-type {
    margin-bottom:  -25px;
}

#rest3 .nightlyspecials h4 {
    color: #fff;
    font-family: 'GSbold', sans-serif;
    font-size: 15px;
    text-align: center;
    margin-top: -5px;
}

#rest3 .nightlyspecials h3 {
    color: #fff;
    font-family: 'GSsemi', sans-serif;
    font-size: 15px;
    letter-spacing: .6px;
    text-align: center;
    padding-top: 118px;
}

#rest3 .nightlyspecials p {
    color: #fff;
    font-family: 'GSregular', sans-serif;
    font-size: 13px;
    text-align: center;
    line-height: 15px;
    letter-spacing: .6px;
    padding: 13px;
    padding-top: 16px;
}

#rest3 .specials1 {
    background-image: url(../img/rest3_specials1.png);
}

#rest3 .specials2 {
    background-image: url(../img/rest3_specials2.png);
}

#rest3 .specials3 {
    background-image: url(../img/rest3_specials3.png);
}

#rest3 .specials4 {
    background-image: url(../img/rest3_specials4.png);
}

#rest3 .specials5 {
    background-image: url(../img/rest3_specials5.png);
}

#rest3 .specials6 {
    background-image: url(../img/rest3_specials6.png);
}

/* RESERVATIONS - sharing among 3 restrautants */
.reservations .section-container {
    text-align: left;
    padding: 25px;
    padding-top: 20px;
}

.reservations h2 {
    text-align: center;
    font-family: 'GSsemi', sans-serif;
    margin-top: 35px;
    margin-bottom: -10px;
    font-size: 18px;
    letter-spacing: .6px;
}

.reservations #required {
    text-align: left;
    margin-top: 5px;
    font-family: 'GSlight', sans-serif;
    font-size: 12px;
    letter-spacing: .6px;
    color: #fff;
}

label {
    display: block;
    font-size: 14px;
    margin-top: 15px;
    margin-bottom: 5px;
    color: #fff;
    font-family: 'GSregular', sans-serif;
    letter-spacing: .6px;
}

input, select, textarea {
    padding: 8px;
    border: solid 1px;
    border-radius: 5px;
    font-family: "GSregular", sans-serif;
    width: 100%;
    transition: all 1s;
    color: rgba(255, 255, 255, 0.74);
    letter-spacing: .6px;
}

::placeholder {
    color: rgba(255, 255, 255, 0.74);
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: .5;
}

.reserve {
    color: #fff;
    height: 35px;
    font-size: 15px;
    margin-top: 15px;
    border-radius: 50px;
    padding-top: 9px;
    font-family: "GSsemi", sans-serif;
    letter-spacing: .6px;
}

/* RESERVATIONS - Ceviche Restaurant 1 */
#rest1 .reservations {
    background-color: #1A3C34;
}

#rest1 .reservations h2 {
    color: #957835;
}

#rest1 input, #rest1 select, #rest1 textarea {
    background-color: #1A3C34;
    border-color: #957835;
}

#rest1 .reserve {
    background-color: #957835;
}

#rest1 input:focus, #rest1 select:focus, #rest1 textarea:focus {
    outline: none;
    background-color: #285e51;
}

#rest1 #firstname:focus, #rest1 #phonefocus:focus, #rest1 #dateinput:focus {
    background-color: #285e51;
}

#rest1 input:last-of-type:focus {
    outline: none;
    border-color: #635025;
    background-color: #635025;
}

/* RESERVATIONS - Five Vines Restaurant 2 */
#rest2 .reservations {
    background-color: #79242F;
}

#rest2 .reservations h2 {
    color: #BE9434;
}

#rest2 input, #rest2 select, #rest2 textarea {
    background-color: #79242F;
    border-color: #BE9434;
}

#rest2 .reserve {
    background-color: #BE9434;
}

#rest2 input:focus, #rest2 select:focus, #rest2 textarea:focus {
    outline: none;
    background-color: #9b3442;
}

#rest2 #firstname:focus, #rest2 #phonefocus:focus, #rest2 #dateinput2:focus {
    background-color: #9b3442;
}

#rest2 input:last-of-type:focus {
    outline: none;
    border-color: #886d2e;
    background-color: #886d2e;
}

/* RESERVATIONS - crispy's Restaurant 3 */
#rest3 .reservations {
    background-color: #673621;
}

#rest3 .reservations h2 {
    color: #E0B34B;
}

#rest3 input, #rest3 select, #rest3 textarea {
    background-color: #673621;
    border-color: #E0B34B;
}

#rest3 .reserve {
    background-color: #E0B34B;
}

#rest3 input:focus, #rest3 select:focus, #rest3 textarea:focus {
    outline: none;
    background-color: #755127;
}

#rest3 input:last-of-type:focus {
    outline: none;
    border-color: #755627;
    background-color: #755627;
}


/* THANK YOU POP UP - SHARED */

.confirmation {
    width: 375px;
    height: 667px;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    z-index: 1;
    display: none;
}

.popup {
    width: 306px;
    height: 420px;
    background-color: #31554C;
    margin-left: 35px;
    margin-top: 180px;
    border-radius: 18px ;
}

.confirm {
    margin-left: 65px;
    margin-top: 60px;
}

#rest1 .confirmation p, #rest2 .confirmation p, #rest3 .confirmation p {
    width: 270px;
    margin-top: 25px;
    color: #fff;
    text-align: center;
    font-family: 'GSregular', sans-serif;
    font-size: 15px;
    text-align: center;
    line-height: 22px;
    letter-spacing: .6px;
    margin-left: 15px;
}

.confirmation span {
    font-family: 'GSbold', sans-serif;
}

.confirmbtn {
    width: 150px;
    height: 30px;
    border-radius: 18px;
    color: #fff;
    text-align: center;
    font-family: 'GSsemi', sans-serif;
    font-size: 15px;
    padding: 7px;
    letter-spacing: .6px;
    margin-left: 78px;
    margin-top: 36px;
}

/* THANK YOU POP UP - Ceviche Restaurant 1 */

#rest1 .popup {
    background-color: #31554C;
}

#rest1 .confirmbtn {
    background-color: #957835;
}

/* THANK YOU POP UP - Five Vines Restaurant 2 */

#rest2 .popup {
    background-color: #79242F;
}

#rest2 .confirmbtn {
    background-color: #BE9434;
}

/* THANK YOU POP UP - crispy's Restaurant 3 */

#rest3 .popup {
    background-color: #673621;
}

#rest3 .confirmbtn {
    background-color: #E0B34B;
}


/* MENU */
#menu {
    background-color: #011E41;
    padding: 30px;
}

.menulogo {
    margin-left: 59px;
    margin-top: 10px;
}

#back-to-landing, #about, #contact {
    width: 201px;
    height: 27px;
    border: 1px solid #FFCD00;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    font-family: 'GSsemi', sans-serif;
    font-size: 15px;
    padding: 5px;
    letter-spacing: .6;
    margin-top: 15px;
}

#back-to-landing {
    margin-top: 50px;
}

#aboutinfo, #contactinfo {
    width: 200px;
    font-family: 'GSsemi', sans-serif;
    font-size: 15px;
    color: #fff;
    margin-top: 30px;
    position: absolute;
    display: none;
}

#aboutinfo p, #contactinfo p {
    font-family: 'GSregular', sans-serif;
    margin-top: 10px;
}