/*//////////////////////////////////
////  laila tandori resto menu /////
////// custom build v1.01 //////////
////// last edit: 2020/10/07 ///////
////////   rogez.design™    ////////
///////////////////////////////////*

/* COLOURS */
/*
almostblack: rgb(41,40,41);
red: rgb(239,65,69);
green:  rgb(10,188,28);
*/

@keyframes fadein{ from{ opacity:0; } to{ opacity:1;} }
@keyframes fadeout{ from{ opacity:1; } to{ opacity:0;} }

@font-face { font-family: BentonSans-Bold_1j; src: url("assets/fonts/BentonSans-Bold_1j.woff") format("woff"); }
@font-face { font-family: BentonSans-Bold_1n; src: url("assets/fonts/BentonSans-Bold_1n.woff") format("woff"); }
@font-face { font-family: BentonSans-Book_1d; src: url("assets/fonts/BentonSans-Book_1d.woff") format("woff"); }
@font-face { font-family: BentonSans-Medium_1o;	src: url("assets/fonts/BentonSans-Medium_1o.woff") format("woff"); }
@font-face { font-family: SoireeW00-Regular_1g;	src: url("assets/fonts/SoireeW00-Regular_1g.woff") format("woff"); }

*{ margin:0; padding:0; box-sizing:border-box; }
html{ background-color:rgb(41,40,41); }
body{ font-family:"BentonSans-Book_1d", sans-serif; font-size:16px; overflow-y:scroll; }

a{text-decoration:none; color: tomato;}
a:visited{ color:tomato; }
a:hover{ text-decoration: underline; }

.ib{ display: inline-block; }
.clearfix{ clear: both; }
.left{ text-align: left; align-self: flex-start; }
.center{ text-align: center; align-self: center; }
.right{ text-align: right; align-self: flex-end; }
.justify{ text-align: justify; }
.grey{ color: #3D3D3C; }
.yellow{ color: rgb(242,230,25); }
.blue{ color:blue; }
.red{color: rgb(239,65,69);}

main { display:flex; flex-flow:column nowrap; animation:fadein 1200ms; max-width:1280px; margin:0 auto; left:0; right:0; }
section.menu{ width: 910px; margin: 0 auto; }

article{ padding:2vh 5vh; }
table{ width:100%; }
ul, ol{list-style-position: outside;}
li{ margin: 0.5vh 1vw; }

h1{ font-size: 1.5rem; text-transform: uppercase; margin:3vh 0; padding-bottom:5px; color:#3D3D3C; display: inline-block;}
h2{ font-size: 3rem; color:white; text-transform: uppercase; font-family: SoireeW00-Regular_1g; margin-bottom: 1vh; text-align: center;}
h3{ font-size: 1.6rem; margin-bottom:1vh; margin-top:2vh; border-bottom: 3px dashed rgb(242,230,25); display: inline-block; }
h4{ font-size: 1.4rem; background-color: rgb(242,230,25); display: inline-block;  }
h5{ font-size: 1.2rem; line-height: 1.6rem; font-weight: bold; display: inline-block; }
h5::before{ content:"-> "; }
h6{ font-size: 1.6rem; padding:0.5vh 0 0.5vh 0; margin-top:1.5vh;}
p{ line-height: 1.6rem;}
q{ font-weight: normal; font-style:italic; font-size: 1.4rem; }


/* HEADER */
header{ max-width: 920px; }
header section{ color: white; text-align: center; padding:1vh; border: 3px solid rgb(95,94,95); }

/* FOOTER */
footer{ display:flex; justify-content:space-around; color:white; position:fixed; bottom:0; background-color:rgb(80,80,80); width:100%; z-index: 10; }
footer div{ font-size:1rem;padding:0.2vh;}
footer a{ color:white !important; text-decoration: none; }

/* NAV */
nav{ position:relative; z-index:5; display:flex; flex-flow:row wrap; justify-content:center; margin:0.5vh 0 5vh 0;}
nav a{ margin:0.2vw; color:#222;  padding:5px;}
nav a:hover{  color: black; text-decoration: none; }
nav a:visited{ color:#222; }
button{ font-family:"BentonSans-Book_1d", sans-serif; color:white; width: 60vw; height: 8vh; padding: 0vh 2vh; font-size: 2rem; border:1px solid rgb(255,255,255); border-width:1px 0px; background-color: rgba(255,255,255,0.1); transition:background-color 500ms, border 500ms; }
button:hover{ background-color: rgba(255,255,255,0.8); color:black; border:0px; }
button:active{ background-color: tomato; border:1px solid #3D3D3C; }

/* RCMS */
div.rcms{ padding:1vh;}
div.rcms figure{ height: 100px; }
div.rcms figure img{height: 100%;}
div.rcms section{ margin:5vh auto; padding:20px 35px 15px 35px; background-color: rgba(255,255,255,0.6); }
div.rcms section form{ width:80%; margin:5vh auto; }
div.rcms section.dialog{ display:none; width:60vw; margin:5vh auto; padding:20px 35px 15px 35px; background-color: rgba(255,255,255,0.6); }
div.rcms section#editcontent{ display:none; }

/* PHOTOS */
div#photos{ background-color: rgb(41,40,41); padding:1vh; }
div#photos div.gallery { display:flex; flex-flow:row wrap; justify-content: center; padding:0; }
div#photos div.gallery a{ display: inline-block; }
div#photos div.gallery figure { filter:grayscale(0%); width:100%; margin-bottom:5vh; transition: filter 500ms; }
div#photos div.gallery figure:hover { filter:grayscale(20%);}
div#photos div.gallery figure img { width:100%; }
div#photos div.gallery figure figcaption{ background-color:#F5F0EB; padding:0.5vh 1vh;  }

/* CONTACT */
div#contact{ background-color: rgba(255,255,255,0.8); }

/* FORM */
form#order{width:50%; margin:0 auto;}
form#upload{ width:50%; margin:5vh auto; }
label{display:inline-block; padding:0}
legend{ margin-left:3%; }
input, textarea, select, fieldset{ display:block; padding:5px; margin:5px auto; text-align:center; transition: border 1s; background-color:rgba(255,255,255,0.8); border:1px solid grey; font-family:"Raleway";}
input:focus, textarea:focus, select:focus{ border: 1px solid tomato;}
select{width:150px; text-align:center;}
textarea, input{width:100%; font-size:1.2rem;}
textarea{ min-height:10vh; resize: vertical;}
input[type=radio],input[type=checkbox]{ display:inline-block; margin:10px 1vh; width:auto;}
input[type=number]{ display:inline-block; text-align:center; width:100px;}
input[type=file]{width:auto;}
input[type=submit]{padding:0 10px; margin-top:20px; border:1px solid #333; height:5rem; font-size:2rem;}
input[type=submit]:hover{color:white; background-color:tomato; border-color:black; color:black;}
input[type=submit]:focus{color:black; background-color:rgb(242,230,25); border-color:black; color:black;}
label.switch{ position: relative; display: inline-block; width: 60px; height: 34px; }
label.switch input{ opacity: 0; width: 0; height: 0; }
label.switch span{ position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px;}
label.switch span:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px;  background-color: white; transition: .4s; border-radius: 50%;}
label.switch input:checked + span{ background-color: #2196F3; }
label.switch input:focus + span{ box-shadow: 0 0 1px #2196F3; }
label.switch input:checked + span:before { transform: translateX(26px); }
::-moz-placeholder{text-align:center;}

/* GALLERY */
section#gallery figure { width:40vh; height:20vh; background-color:transparent; margin: 0.5vh 0; display: inline-block; border-radius: 1vh; overflow:hidden; }
section#gallery figure:hover { background-color: white; }
section#gallery figure.blur{ filter:blur(20px) grayscale(80%); }
section#gallery figure img { display:flex; width:100%; margin:auto; }

@media screen and (orientation:landscape){ figure img{ width:100%;} }
@media screen and (orientation:portrait){  
	footer *{ font-size: 1rem; }
	footer div:nth-child(3){ display:none;}
	footer div:nth-child(4){ display:none;}
	}