/* Reserveringsmodule */
.reserve::before{position: absolute; content: ""; border: 1px solid #F4E8DE;   left: 2.5em; top:2.5em; right: 2.5em; bottom: 2.5em;}

.close{position: absolute;text-align: right; color: #F4E8DE; font-size: 2em; display: block; cursor: pointer; transition: transform 0.3s ease;}
.open .close{transform: rotate(-90deg); transition: transform 0s ease;}
.reserve article{position: absolute;width: 100%; height: 100%;  }
.reserve h2{top: 33%; text-align: center; color: #F4E8DE; font-size: 4.6em;}
.reserve p{position: absolute; width: 100%; text-align: center; top:70%; color:#F4E8DE; line-height: 2em; box-sizing: border-box; padding: 0 5.5em;}
.reserve p a{color:#F4E8DE; text-decoration: none; border-bottom: 1px solid; display: inline-block; position: relative; width: auto;}
.reserve p span, .reserve p a{}


/* open table */

#OT_searchWrapperAll{width:100%;height:3.6em;position:absolute; top:50%; margin:0;padding:0; transform: translateY(-50%); z-index: 10;}
#OT_searchWrapper{border:0;font-family: "mars-extendedregular"; font-size: 1em; font-weight: 400;font-size:1em;width:100%;height:auto;position:relative;margin:0}

#OT_searchWrapper dl{position: relative; float: left; margin: 0 15%; width: 70%;}
#OT_searchWrapper dd{position: relative; float: left; width: 25%; height: 4.3em; line-height: 4.3em;}



#OT_empty{position:absolute;width:0;height:0;padding:0;margin:0;top:0;left:0}
#OT_submitWrap{z-index:5; box-sizing:border-box;}

#OT_searchWrapper form{margin:0;padding:0; color: F4E8DE;}

#OT_searchWrapper input.hidden{display:none}
#OT_searchWrapper .feedFormField option{padding:1em 1em; border: none;}

#OT_partySize::before{position: absolute; z-index: 10; right:4em; text-align: right;width: auto; height: 4.3em; line-height: 4.3em; text-transform: uppercase; content: "Guests"; color: #F4E8DE; pointer-events:none; font-family: "mars-extendedregular"; font-size: 1em; font-weight: 400;}
.lang-nl #OT_partySize::before{content: "Gasten"; }

.dutch #OT_partySize::before{position: absolute; z-index: 10; right:4em; text-align: right;width: auto; height: 3.6em; line-height: 3.6em; text-transform: uppercase; content: "Pers."; color: #F4E8DE; pointer-events:none; font-family: "mars-extendedregular"; font-size: 1em; font-weight: 400;}

#OT_partySize::after, #OT_date::after, #OT_time::after{position: absolute; z-index:100;content: "\e90a";  right: 1px; top:1px; width: 2.5em; pointer-events:none; height: 3.55em; content: "\e900"; color: #F4E8DE; background-color: #1E1E1E; font-family: 'founders' !important;}
#OT_submitWrap input{border:none; background-color: #F4E8DE;  }
#OT_submitWrap::before {
   z-index: 50;
    border: 3px solid #48331B;
    box-sizing:border-box;
    bottom: 0px;
    content: "";
    left: 1px;
    position: absolute;
    right: 1px;
    top: 1px;
    pointer-events:none;
    transition: border 0.5s ease;
}

#OT_submitWrap input:hover::before{border:1px solid #F4E8DE; transition: border 0.3s ease;}
#OT_submitWrap input:hover{background-color: #F4E8DE; transition: background-color 0.3s ease;}


#OT_submitWrap input[type="IMAGE"]{opacity: 0;}
#OT_submitWrap::after{position:absolute; left: 0; top:0; width:100%; pointer-events:none; z-index: 49; height: 3.75em; text-align: center; content: "Find a table";font-family: "mars-extendedregular"; font-size: 1em; font-weight: 400; font-weight: 400; letter-spacing: 0.15em; background-color: #F4E8DE; text-transform: uppercase; color:#1B1919;box-sizing:border-box;}
.lang-nl #OT_submitWrap::after{content: "Zoek een tafel";}

.dutch #OT_submitWrap::after{ content: "Zoek een tafel";}
#OT_searchWrapper .imgCal{position:absolute;display:none;z-index:200}
#OT_searchWrapper #imageCal table{width:18em;background:#fff; color: #fff;}
#OT_searchWrapper #imageCal td{padding:0;text-align:center}
#OT_searchWrapper .clickableDays{color:#000;text-decoration:none;height:2.4em; line-height: 2.4em;}
#OT_searchWrapper .nonclickableDays{color:#ccc;height:2.4em; line-height: 2.4em;}
#OT_searchWrapper .months{color:#fff;text-decoration:none}
#OT_searchWrapper .weekdays{color:#000;text-decoration:none;color:#666;background-color:#efefef;width:14%}
.partOfCal img.partOfCal.spacer{display:block;height:1px;margin:0;padding:0}

/* Form */

form{position: relative; width: 100%; font-family: "mars-extendedregular"; font-size: 1em; font-weight: 400; }

.OT_searchWrapperAll{}

.OT_feedTitle{display: none;}
#OT_restaurantLbl,
#OT_partySizeLbl,
#OT_dateLbl,
#OT_timeLbl,
#OT_searchWrapper #dateDisplay
{display: none;}

input, select{
   position:relative; float:left; width: 100%; background: none; background-color: transparent; height: 4.4em; line-height: 4.4em;font-family: "mars-extendedregular"; font-size: 1em; font-weight: 400; box-sizing:border-box; color: #F4E8DE; padding: 0 1.2em; border: 1px solid #F4E8DE; border-right: none; cursor: pointer;
   -webkit-appearance: none; 
   -webkit-border-radius: 0px; 
   -moz-border-radius: 0px;
   border-radius: 0px;
}


input:focus {
    background-color: #1B1919;  border:1px solid #F4E8DE;
} 


::-webkit-input-placeholder { /* WebKit browsers */
    color:    #F4E8DE;
    
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #F4E8DE;
   opacity:  1;

}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #F4E8DE;
   opacity:  1;
  
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    #F4E8DE;
   
}

@media screen and (max-width: 800px) {

   .reserve h1{top: 2em; font-size:2.8em; margin-bottom: 1.4em;}
   .reserve h2{top: 2em; font-size:2.8em; margin-bottom: 1.4em; margin-top: 2rem;}
   #OT_searchWrapperAll{top:16em;}
   #OT_searchWrapper dd{width: 100%; margin-bottom: 2em; }  
   input, select{border-right: 1px solid #F4E8DE;  box-sizing:border-box;}
   .reserve p{top:40em; width: 100%; left:0;transform:translateX(0); text-align: center; text-wrap: pretty;}
   .reserve p a, .reserve p span{position: relative; float: left; clear: both; display: inline-block; text-align: center; font-size: 0.75rem; width: 100%; padding: 0; margin: 0px 0px 0.4em 0px; border-bottom: 0;}
   .reserve p a{text-decoration: underline;}
   #OT_searchWrapper dl{margin: 0 6%; width: 88%;}
   #OT_searchWrapper dd:last-child, #OT_searchWrapper dl:last-child{margin-bottom: 0;}
   .reserve::before {display: none;}
   .reserve p{padding: 0 2.2em;}

}

@media screen and (max-width: 500px) {

   .close{ top:0.7em; right:0.7em; font-size: 2em;}
   .reserve h1 {font-size:1.6em;top: 4em;}

}

@media screen and (max-height:650px){
   
   .reserve{overflow: scroll;}
  
}