/* RESET CSS ////////////////////////////////////////// */

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

/* FONTS /////////////////////////////////////////////// */

/* app font */

@font-face {
    font-family:"MyAppFont";
    src: url(fonts/Verdana-Bold.ttf);
}

/* restaurant 1 fonts */
@font-face {
    font-family: "Rest1FontTitle";
    src: url(fonts/AlegreyaSansSC-Black.ttf);
}

@font-face {
    font-family: "Rest1FontBody";
    src: url(fonts/Raleway-Light.ttf);
}

@font-face{
    font-family: "Rest1FontBodyBoldSm";
    src: url(fonts/Raleway-Bold.ttf);
}

@font-face {
    font-family: "Rest1FontBodyBold";
    src: url(fonts/AlegreyaSansSC-Bold.ttf);
}

/* restaurant 2 fonts */

@font-face {
    font-family: "Rest2FontBodyBold";
    src: url(fonts/theboldfont.ttf);
}

@font-face {
    font-family: "Rest2FontBody";
    src: url(fonts/cafe_brewery.ttf);
}

/* restaurant 3 fonts */

@font-face {
    font-family: "Rest3FontBodyBold";
    src: url(fonts/aubrey1_.ttf);
}

@font-face {
    font-family: "Rest3FontBody";
    src: url(fonts/ModernSans-Light.otf);
}


/* GENRAL APP STYLES /////////////////////////////////// */

body {
    font-size: 14px;
    overflow: hidden;
}

main {
    position: absolute;
    width: 375px;
    height: 667px;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.5);
}


header {
    width: 375px;
    height: 60px;
    position: absolute;
    top: 0;
    padding: 15px;
}

section {
    position: absolute;
    top: 60px;
    width: 375px;
    height: 547px;
    background: #FFF;
    overflow: auto;
    padding: 20px;
}

footer {
    width: 375px;
    height: 60px;
    position: absolute;
    bottom: 0;
}

/* SPLASH SCREEN ////////////////////////////////////////// */

#splash {
    background-image: url(../images/foeBg.jpg);
    background-size: cover;
}



#splash img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: auto;
}



/* LANDING SCREEN ///////////////////////////////////////// */

#landing {
    font-family: "MyAppFont", sans-serif;
    padding-top: 130px;
}

#landing header {
    border-bottom: solid 5px #FFF;
    background: #a44b52;
    color: #FFF;
    height: 80px;
    padding: 7px;
    font-size: 30px;
    line-height: 100%;
    text-align: right;
}

#landing header img {
    width: 57px;
    height: auto;
}

#landing header p {
    text-align: center;
}

.landingLogos {
    position: relative;
    text-align: center;
    width: 80%;
    margin-top: -30px;
    margin-left: 37px;
    margin-bottom: 45px;
    border: solid 1px #000000;
}

.landingLogos:nth-child(2) {
    padding: 22px 40px;
}

.landingLogos:nth-child(3) {
    padding: 17px 40px;
}

.landingLogos:nth-child(4) {
    padding: 15px 40px;
}

.fineDining {
    position: absolute;
    width: 125px;
    height: auto;
    right: -8px;
    top: 15px;
}

.casualDining {
    position: absolute;
    width: 150px;
    height: auto;
    left: -8px;
    top: 15px;
}

.fastFoodDining {
    position: absolute;
    width: 172px;
    height: auto;
    right: -8px;
    top: 15px;
}

.crispy {
    width: 250px;
    height: auto;
}

#landing footer {
    height: 65px;
    background: #a44b52;
    color: #fff;
}

#landing footer img {
    float: right;
    display: inline-block;
    margin-top: -16px;
    margin-right: 20px;
    height: 50px;
}

#landing footer h5 {
    margin-left: 50px;
    margin right: 100px;
    margin-top: 10px;
    text-align: center;
    float: left;
    font-family: Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 300;
}

#landing footer h4 {
    margin-left: 50px;
    margin right: 200px;
    margin-top: 2px;
    text-align: center;
    float: left;
    font-family: Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 300;    
}


/* MENU ////////////////////////////////////////////// */

#menu {
    font-family: "MyAppFont", sans-serif;
    background: #f7921e;
    padding-top: 80px;
    font-size: 25px;
}

#menu header {
    padding: 15px;
    border-bottom: solid 5px #c94548;
    background: #a44b52;
    color: #FFF;
    font-size: 24px;
    line-height: 100%;
}

.menuBtn {
    padding: 20px;
    padding-left: 10px;
    background: #f7efe7;
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 100%;
}

.menuBtn img {
    width: 25px;
    height: auto;
    float: left;
    margin-right: 7px;
}

.menuBtn span {
    display: block;
    margin-top: 2px;
}

.contactIcon {
    margin-top: 3px;
}

/* SHARED RESTAURANT /////////////////////////////////// */

/* header/footer */

header img {
    width: 35px;
    height: auto;
    float: left;
    margin-right: 85px;
}

header h1 {
    color: #000000;
}

footer div {
    float: left;
    text-align: center;
    overflow: auto;
    font-size: 12px;
    padding: 10px;
    color: #FFF;
}

footer img {
    height: 25px;
    width: auto;
}

footer p {
    color: #000000;
    font-weight: 600;
}

/* general section */
.sectionContainer {
    text-align: center;
    overflow: auto;
    color: #000;
}

/* home section */
.photoAddress {
    padding: 0 15px;
    text-align: left;
}

.homeImg {
    width: 100%;
    height: auto;
    margin-top: 0px;
}

.photoAddress h2 {
    line-height: 80%;
    margin-bottom: 5px;
}

.photoAddress p {
    font-size: 14px;
    line-height: 130%;
}

.rating {
    width: 180px;
    height: auto;
    margin-top: 5px;
}

.photoCount {
    float: right;
    width: 148px;
    margin-top: -80px;
    text-align: right;
    line-height: 100px;    
}

.hours {
    margin-top: 20px;
}

.hours h2 {
    margin-left: 60px;
    border-bottom: solid 1px #000;
    width: 210px;
}

.hours h4 {
    font-family: "Rest1FontBodyBoldSm", sans-serif;
    letter-spacing: 1px;
    font-weight: 700;
}

.hours p {
    margin-top: 5px;
    color: #000000;
    font-family: "Rest1FontBody", sans-serif;
    font-weight: 200;
}

.location123 {
    width: 150px;
    height: 60px;
    padding: 0px;
    margin-top: -20px;
}

.greenLantern {
    width: 4px;
    height: 50px;
    background-color: #a4c477;
    margin-left: 160px;
    margin-top: -60px;
}

.hoursOper {
    width: 150px;
    height: 60px;
    padding: 0px;
    float: right;
    margin-top: -50px;
}
.contactsss {
    width: 320px;
    height: 60px;
    text-align: center;
    margin-top: 20px;
}

.sectionContainer h1 {
    font-family: "Rest1FontBodyBold", sans-serif;
    color: #ffffff;
    margin-top: -30px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.photoAddress h4 {
    font-family: "Rest1FontBodyBoldSm", sans-serif;
    font-size: 17px;
}

.photoAddress h3 {
    font-family: "Rest1FontBody", sans-serif;
    font-size: 20px;
    font-weight: 700;   
}


/*
.reviews {
    margin: 20px;
}

.profile {
    text-align: left;
    border-bottom: solid 1px #000;
    overflow: auto;
    padding-bottom: 15px;
}

.profile img {
    width: 50px;
    height: auto;
    float: left;
    margin-right: 15px;
}

.profile p:last-child {
    margin-top: 5px;
}

.reviews p:last-child {
    text-align: left;
    margin-top: 10px;   
}*/

/* general specials/reservations */
.sectionBanner {
    width: 359px;
    height: 67px;
    background-size: 359px auto;
    margin-left: -12px;
    text-align: center;
    font-size: 50px;
    padding-top: 10px;
   margin-bottom: 15px;
}

/* specials section */
.specials .sectionContainer {
    border-top: none;
    text-align: left;
}

.nightContainer {
    padding: 10px;
    padding-bottom: 20px;
    margin: 10px 0;
    overflow: auto;
}

.nightContainer:first-child {
    margin-top: 0;
}

.nightContainer:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.nightContainer img {
    width: 335px;
    height: auto;
    float: left;
    margin-right: 10px;
}

.nightContainer div {
    float: left;
    width: 335px;
}

.nightContainer h2 {
    font-size: 22px;
    margin-bottom: 15px;
    margin-top: 40px;
}

.nightContainer h3 {
    font-size: 22px;
    font-family: "Rest1FontBodyBoldSm", sans-serif;
    margin-top: -60px; 
    margin-left: 10px;
    color: #ffffff;
}

.nightContainer p {
    margin-top: 20px;
    margin: 0 !important;
}

.sub {
    font-size: 20px;
    margin: 0 !important;
}


.altImg {
    float: right !important;
    margin: 0 !important;
    margin-left: 10px !important;
}

/* reservations section */
.reservations .sectionContainer {
    border-top: none;
    text-align: left;
    padding: 10px;
    padding-top: 0;
}

.reservations h2 {
    margin-top: 10px;
}

label {
    display: block;
    font-size: 16px;
    margin-bottom: 5px;
    margin-top: 10px;
}

input, select, textarea {
    padding: 5px;
    border: solid 1px;
    width: 100%;
    font-size: 14px;
    border-radius: 5px;
    color: #666;
    background: #FFF;
}

.reserve {
    border-color: #FFF !important;
    color: #FFF;
    font-size: 18px;
    margin-top: 15px;
}

.reserveThanks img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    margin-bottom: 50px;
}

.reserveThanks .checkMrk {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%
} 

.reserveThanks h2 {
    font-family: "Rest1FontBodyBold", sans-serif;
    line-height: 30px; 
    margin-bottom: 30px;
}

.submission img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    margin-bottom: 50px;
}

.submission .checkMrk {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%
} 

.submission h2 {
    font-family: "Rest1FontBodyBold", sans-serif;
    line-height: 30px; 
    margin-bottom: 30px;
    font-size: 22px;
}

/* RESTAURANT 1 ////////////////////////////////////// */

/* general The styles below has # infront of the .selectpr because, you are only dealing with the category in that section*/
#rest1 {
    font-family: "Rest1FontBody", sans-serif;
}

/* general section */


#rest1 .profileBold {
    font-family: "Rest1FontBodyBold", sans-serif;
}

/* header/footer */
#rest1 header {
    font-family: "Rest1FontTitle", sans-serif;
    background: #a4c477;
    border-bottom: solid 5px #94b566;
}

#rest1 footer {
    background: #a4c477;
}

/* footer subnav */
#rest1 .homeIcon {
    margin-left: 55px;
}

#rest1 .specialsIcon {
    margin-left: 30px;
    margin-right: 25px;
}

#rest1 .logo {
    width: 80%;
    height: auto;
    margin: 15px 0;
}

/* home */


#rest1 h2 {
    font-family: "Rest1FontBodyBold", sans-serif;
    font-size: 25px;
    line-height: 13px;
}

#rest1 .photoCount {
    border-color: #569772;
}

#rest1 .hours h2 {
    color: #177535;
    border-bottom-color: #177535;
}

#rest1 .hours p {
    color: #000000;
}

#rest1 .profile {
    border-bottom-color: #177535;
}

/* general specials/reservations */
#rest1 .sectionBanner {
    font-family: "Rest1FontTitle", sans-serif;
    color: #000000;
}

/* ////////Specials/////////// */


#rest1 form {
    border: solid 1px #000000;
    width: 335px;
    height: auto;
    margin: auto;
    padding: 10px;
    
}

#rest1 h5 {
    color: #000000;
    font-size: 23px;
}

#rest1 .pleaseRightText {
    color: #000000;
    font-family: "Rest1FontBody", sans-serif;
    text-align: left;
    font-size: 25px;
}

#rest1 .pleaseCenterText {
    line-height: 1.2em;
    text-align: center;
    font-size: 23px
}

#rest1 .reallyComeOn {
    padding-top: 70px;
}

#rest1 .finePrint {
    font-size: 10px;
    text-align: center;
    padding-top: 15px;
}

#rest1 .sub {
    color: #607f17;
}

#rest1 .greenLine1 {
    height: 6px;
    width: 250px;
    background-color: #a4c477;
    margin: auto;
}

#rest1 .greenLine2 {
    height: 6px;
    width: 125px;
    background-color: #a4c477;
    margin: auto;
    margin-top: 14px;
}

#rest1 .greenLine3 {
    height: 6px;
    width: 35px;
    background-color: #a4c477;
    margin: auto;
    margin-top: 14px;
}

/* reservations */
#rest1 .reservations .sectionContainer {
    color: #607f17;
}


#rest1 input, #rest1 select, #rest1 textarea {
    border-color: #afd35a;
    font-family: "Rest1FontBody", sans-serif;
}

#rest1 input:focus, #rest1 select:focus, #rest1 textarea:focus {
    outline: none;
    background: rgba(175, 211, 90, 0.05);
}

#rest1 .submit {
    border-color: #FFF !important;
    color: #000000;
    background: #a4c477;
    font-family: "Rest1FontBodyBold", sans-serif;
}

#rest1 .submit:hover {
    border-color: #afd35a !important;
    color: #afd35a;
    background: #FFF;
}
#rest1 .reserve {
    border-color: #FFF !important;
    color: #000000;
    background: #a4c477;
    font-family: "Rest1FontBodyBold", sans-serif;
}

#rest1 .reserve:hover {
    border-color: #afd35a !important;
    color: #afd35a;
    background: #FFF;
}

/* RESTAURANT 2 ////////////////////////////////////// */

/* general */
#rest2 {
    font-family: "Rest2FontBody", sans-serif;
}

/* general section */
#rest2 .sectionContainer {
    border-bottom-color: #d1bb25;
}

#rest2 .profileBold {
    font-family: "Rest2FontBodyBold", sans-serif;
}

/* header/footer */
#rest2 header {
    font-family: "Rest1FontTitle", sans-serif;
    background: #e7cf2e;
    border-bottom: solid 5px #d1bb25;
}

#rest2 footer {
    background: #e7cf2e;
}

/* footer subnav */
#rest2 .homeIcon {
    margin-left: 55px;
}

#rest2 .specialsIcon {
    margin-left: 30px;
    margin-right: 25px;
}

#rest2 .logo {
    width: 50%;
    height: auto;
    margin: auto;
}

/* home */
#rest2 h2 {
    font-family: "Rest2FontBodyBold", sans-serif;
    font-size: 20px;
    line-height: 13px;
    letter-spacing: 2px; 
}
#rest2 h1 {
    font-family: "Rest2FontBodyBold", sans-serif;
}
#rest2 h4 {
    font-family: "Rest2FontBodyBold", sans-serif;
    letter-spacing: 1px;
}
#rest2 p {
    font-family: "Rest2FontBody", sans-serif;
    margin-top: 10px;
}

#rest2 footer p{
    margin-top: 0px;
}

#rest2 .photoCount {
    border-color: #569772;
}

#rest2 .photoAddress h3 {
    font-family: "Rest2FontBodyBold", sans-serif;
    font-size: 14px;
    margin-top: 10px;
}

#rest2 .hours h2 {
    color: #177535;
    border-bottom-color: #177535;
    letter-spacing: 1px;
    font-family: "Rest2FontBodyBold", sans-serif;
}

#rest2 .hours p {
    color: #000000;
    letter-spacing: 1px;
}

#rest2 .profile {
    border-bottom-color: #e7cf2e;
}

#rest2 .greenLantern {
    width: 4px;
    height: 50px;
    background-color: #e7cf2e;
    margin-left: 160px;
    margin-top: -60px;
}

/* general specials/reservations */
#rest2 .sectionBanner {
    font-family: "Rest2FontBodyBold", sans-serif;
    font-size: 45px;  
}

/* specials */

#rest2 form {
    border: solid 1px #000000;
    width: 335px;
    height: auto;
    margin: auto;
    padding: 10px; 
}

#rest2 h5 {
    color: #000000;
    font-size: 22px;
    text-align: center;
}

#rest2 .pleaseRightText {
    color: #000000;
    font-family: "Rest2FontBody", sans-serif;
    text-align: left;
    font-size: 22px;
}

#rest2 .pleaseCenterText {
    line-height: 1.2em;
    text-align: center;
    font-size: 15px
}

#rest2 .reallyComeOn {
    padding-top: 70px;
}

#rest2 .finePrint {
    font-size: 10px;
    text-align: center;
    padding-top: 15px;
}

#rest1 .sub {
    color: #607f17;
}

#rest2 .greenLine1 {
    height: 6px;
    width: 250px;
    background-color: #e7cf2e;
    margin: auto;
}

#rest2 .greenLine2 {
    height: 6px;
    width: 125px;
    background-color: #e7cf2e;
    margin: auto;
    margin-top: 14px;
}

#rest2 .greenLine3 {
    height: 6px;
    width: 35px;
    background-color: #e7cf2e;
    margin: auto;
    margin-top: 14px;
}


/* reservations */
#rest2 .reservations .sectionContainer {
    color: #d1bb25;
}


#rest2 input, #rest2 select, #rest2 textarea {
    border-color: #e7cf2e;
    font-family: "Rest2FontBody", sans-serif;
}

#rest2 input:focus, #rest2 select:focus, #rest2 textarea:focus {
    outline: none;
    background: rgba(250, 235, 137, 0.05);
}

#rest2 .reserve {
    border-color: #FFF !important;
    color: #000;
    background: #e7cf2e;
}
#rest2 .reserve {
    font-family: "Rest2FontBodyBold", sans-serif;
    letter-spacing: 2px;
    font-weight: 900;
    font-size: 15px;
}

#rest2 .reserve:hover {
    border-color: #e7cf2e !important;
    color: #e7cf2e;
    background: #FFF;
}

#rest2 .reserveThanks h2 {
    font-family: "Rest2FontBodyBold", sans-serif;
    line-height: 20px; 
    font-size: 19px;
    margin-bottom: 30px;
}

#rest2 .submit {
    border-color: #FFF !important;
    color: #000;
    background: #e7cf2e;
}
#rest2 .submit {
    font-family: "Rest2FontBodyBold", sans-serif;
    letter-spacing: 2px;
    font-weight: 900;
    font-size: 15px;
}

#rest2 .submit:hover {
    border-color: #e7cf2e !important;
    color: #e7cf2e;
    background: #FFF;
}

#rest2 .submit h2 {
    font-family: "Rest2FontBodyBold", sans-serif;
    line-height: 20px; 
    font-size: 19px;
    margin-bottom: 30px;
}

/* RESTAURANT 3 ////////////////////////////////////// */

/* general */
#rest3 {
    font-family: "Rest3FontBody", sans-serif;
}

/* general section */
#rest3 .sectionContainer {
    border-bottom-color: #e0e8f6;
}

#rest3 .profileBold {
    font-family: "Rest3FontBodyBold", sans-serif;
}

/* header/footer */
#rest3 header {
    font-family: "Rest3FontTitle", sans-serif;
    background: #e0e8f6;
    border-bottom: solid 5px #b9c9e4;
}

#rest3 footer {
    background: #e0e8f6;
}

/* footer subnav */
#rest3 .homeIcon {
    margin-left: 55px;
}

#rest3 .specialsIcon {
    margin-left: 30px;
    margin-right: 25px;
}

#rest3 .logo {
    width: 80%;
    height: auto;
    margin: 15px 0;
}

#rest3 .greenLantern {
    width: 4px;
    height: 50px;
    background-color: #e0e8f6;
    margin-left: 160px;
    margin-top: -60px;
}

/* home */

#rest3 h1 {
    font-family: "Rest3FontBodyBold", sans-serif;
    letter-spacing: 1px;
}
#rest3 h2 {
    font-family: "Rest3FontBodyBold", sans-serif;
    letter-spacing: 1px;
}
#rest3 h3 {
    font-family: "Rest3FontBodyBold", sans-serif;
    letter-spacing: 1px;
    font-size: 16px;
    margin-top: 15px;  
}
#rest3 h4 {
    font-family: "Rest3FontBodyBold", sans-serif;
    letter-spacing: 1px;
}


#rest3 .photoCount {
    border-color: #e0e8f6;
}


#rest3 .hours p {
    color: #000000;
}

#rest3 .profile {
    border-bottom-color: #000000;
}

/* general specials/reservations */
#rest3 .sectionBanner {
    font-family: "Rest3FontBodyBold", sans-serif;
    font-size: 45px;
    
}

/* specials */
#rest3 form {
    border: solid 1px #000000;
    width: 335px;
    height: auto;
    margin: auto;
    padding: 10px;
    
}

#rest3 h5 {
    color: #000000;
    font-size: 22px;
    text-align: center;
}

#rest3 .pleaseRightText {
    color: #000000;
    font-family: "Rest3FontBody", sans-serif;
    text-align: left;
    font-size: 22px;
    margin-top: -50px
}

#rest3 .pleaseCenterText {
    line-height: 1.5em;
    text-align: center;
    font-size: 15px
}

#rest3 .reallyComeOn {
    padding-top: 70px;
}

#rest3 .finePrint {
    font-size: 10px;
    text-align: center;
    padding-top: 15px;
}

#rest3 .sub {
    color: #607f17;
}

#rest3 .greenLine1 {
    height: 6px;
    width: 250px;
    background-color: #e0e8f6;
    margin: auto;
}

#rest3 .greenLine2 {
    height: 6px;
    width: 125px;
    background-color: #e0e8f6;
    margin: auto;
    margin-top: 14px;
}

#rest3 .greenLine3 {
    height: 6px;
    width: 35px;
    background-color: #e0e8f6;
    margin: auto;
    margin-top: 14px;
}

/* reservations */
#rest3 .reservations .sectionContainer {
    color: #b9c9e4;
}


#rest3 input, #rest3 select, #rest3 textarea {
    border-color: #b9c9e4;
    font-family: "Rest3FontBody", sans-serif;
}

#rest3 input:focus, #rest3 select:focus, #rest3 textarea:focus {
    outline: none;
    background: rgba(255, 193, 5, 0.05);
}

#rest3 .reserve {
    border-color: #FFF !important;
    color: #000000;
    background: #e0e8f6;
}
#rest3 .reserve {
    font-family: "Rest3FontBodyBold", sans-serif;
    letter-spacing: 2px;
    font-weight: 900;
}

#rest3 .reserve:hover {
    border-color: #b9c9e4 !important;
    color: #b9c9e4;
    background: #FFF;
}

#rest3 .submit {
    border-color: #FFF !important;
    color: #000000;
    background: #e0e8f6;
}

#rest3 .submit {
    font-family: "Rest3FontBodyBold", sans-serif;
    letter-spacing: 2px;
    font-weight: 900;
}

#rest3 .submit:hover {
    border-color: #b9c9e4 !important;
    color: #b9c9e4;
    background: #FFF;
}