/* ============================== */
/* ! Layout for desktop version   */
/* ============================== */

html {scroll-behavior: smooth;}
body {width:100%; margin:0;}
a {text-decoration: none;}
h1 {font-family: "diazo-mvb-cond", sans-serif; font-weight: 700; font-size: 36px; line-height:42px; padding-top:5px; padding-bottom:5px; text-align:left;}
h2 {font-family: "effra-cc", sans-serif;font-weight:bold; line-height: inherit; padding-top:7.5px; padding-bottom:2.5px; text-align: left;}
p {font-family: "effra-cc", sans-serif;font-weight: 400;font-style: normal;margin:0; line-height:inherit; text-align:left;}

/*HEADER*/
div.header {position: fixed; top: 0; height:150px; width:100%; background-color: #ffe1b5; z-index:9;}
div.header a.nav {display:block; margin-top: 60px; font-family: "diazo-mvb-cond", sans-serif; font-weight: 700; color:#442813; font-style: normal; font-size: 36px; text-align: right;}
div.header div.threecol a.nav {text-align: center;}
div.header a:hover {color: #00a669;} 
.icon a {display:block; background: url("../images/Rise-Icon-Transparent.png") center right no-repeat;background-size:90%;width:90%; padding-top: 10px; aspect-ratio: 1 / 1;}
.icon a:hover {background:url("../images/Rise-Icon-GIF.gif") center no-repeat; background-size:100%;}
.logoType {display:block; background: url("../images/Rise-Logotype-Transparent.png") center center no-repeat;background-size:100%; aspect-ratio: 1/1;width:75%; margin-top:30px;}
div.header div.twocol {padding-right:0; padding-left:5px;}

/*CALL TO ACTION*/
div.callToAction {display:block;background:url("../images/BG-Texture.jpg") top center no-repeat; background-size:cover; margin-top: 150px; padding:15px 0;}
div.callToImage img{display:block; width:90%; padding:0; margin:5px auto;}
div.callToImage img.eggy{display:none; margin:5px auto;}
div.callToImage:hover img.eggy{display:block;}
div.callToImage:hover img.empty{display:none;}

/*MENU*/
div.menu {color:#442813; width:cover; text-shadow: 1px 1px 2px #e4d3b2; padding:25px 0;}
#food {scroll-margin-top:150px;}

/*SPECIALS*/
div.callToSpecial {color:#442813; width:cover; text-shadow: 1px 1px 2px #e4d3b2; padding:25px 0;}
div.callToSpecial h1 {text-align:center;}
#specials {scroll-margin-top:150px;}
#myBtn {font-family: "diazo-mvb-cond", sans-serif; font-size:18px; border: 5px solid #00a669; border-radius: 15px; height: 50px; width:200px;margin:15px auto; color:#442813; display:block; text-align:center; filter: drop-shadow(4px 4px 5px #e4d3b2)}
/* The Modal (background) */
.modal {  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #f1f1f1; /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
  background-color: #f1f1f1;
  margin: 10% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 5px solid #00a669; border-radius: 15px;
  width: 50%; /* Could be more or less, depending on screen size */
	height:425px;
	position:relative;
}
/* The Close Button */
.close {font-family: "diazo-mvb-cond", sans-serif; color: #aaa; float: right; font-size: 28px; font-weight: bold; margin-top: 8%;margin-right: 22%;}
.close:hover,.close:focus { color: black; text-decoration: none; cursor: pointer;}

/*FORM*/
div.form {display:block; color:#442813; width:cover; height:cover;}
div.form input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 5px 0;
	border-width: 2px;
	border-color: #442813;
	border-radius: 4px;
  box-sizing: border-box;
	font-family: "effra-cc", sans-serif;
}
div.form #descript {height:200px; overflow:scroll;}
/*flipping the form*/
.flip-card {
  background-color: transparent;
  width: 100%;
  height: 100%;
  perspective: 1000px;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.flip-card-back { transform: rotateY(180deg);}
.flipped .flip-card-inner {transform: rotateY(180deg);}

/*ABOUT*/
div.about {display:block; background:url("../images/BG-Texture.jpg") top center no-repeat; background-size:cover; color:#f1f1f1; text-shadow: 1px 1px 2px #442813; padding:25px 0;}
div.owner img {width:95%; border: 5px solid #00a669; border-radius: 15px; margin:2.5px 25px 25px 2.5px; filter: drop-shadow(8px 8px 10px #442813)}
div.ownerInfo {display:block;}
	div.ownerInfo div {column-count:2;}
#aboutUs {scroll-margin-top:150px;}

/*CONTACT*/
div.contact {display:block; /*background:url("../images/BG-Texture.jpg") top center no-repeat;*/ background-size:cover; margin-bottom:75px; color:#442813; text-shadow: 1px 1px 2px #e4d3b2; padding:25px 0;}
div.contact iframe {width:95%; border:5px solid #00a669; border-radius: 15px; margin:2.5px 25px 25px 2.5px; filter:drop-shadow(8px 8px 10px #e4d3b2)}
#contactUs {scroll-margin-top:150px;}

/*FOOTER*/
div.footer {display:block; position: fixed; width:100%; bottom: 0; height:75px; background-color: #ffe1b5; text-align:center;}	
div.footer div.footerInfo p {margin-top:25px; text-align:center;}

/*MOBILE HAMBURGER*/
div.header span {display:none; margin-top: 55px; font-family: "diazo-mvb-cond", sans-serif; margin-left:175px;}
.overlay {
	margin-top: 75px;
  height: 0;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #442813;
	opacity: 0.8;
  overflow-y: hidden;
  transition: 0.5s;
}
.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay a {
  padding: 12px;
	font-family: "diazo-mvb-cond", sans-serif;
  text-decoration: none;
  font-size: 36px;
  color: #f1f1f1;
  display: block;
  transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {color: #00a669;}
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
	font-family: "diazo-mvb-cond", sans-serif;
}

/* ============================= */
/* ! Layout for mobile version   */
/* ============================= */
@media handheld, only screen and (max-width: 767px) {
h1, h2, p {text-align:center;}
	h2 {padding-top:15px; padding-bottom:5px;}
	br {margin:0;}
/*MOBILE header*/
div.header {position: fixed; top: 0; height:100px; width:100%; background-color: #ffe1b5; z-index:10; display:inline;}
	div.header div.twocol, div.header div.threecol {float:left; width:20%;} 
	div.header div.threecol {text-align:right;}
div.header span {display:block; font-size: 36px; font-family: "diazo-mvb-cond", sans-serif; color: #442813;}
div.header a.nav {display:none; margin-top: 10px; font-family: "diazo-mvb-cond", sans-serif; font-weight: 700; color:#442813; font-style: normal; font-size: 36px; text-align: center; background:white; border-radius:5px; padding: 10px;}	
	div.desktop {display:none;}
.icon a {display:block; background: url("../images/Rise-Icon-Transparent.png") center right no-repeat;background-size:90%;width:90%; padding-top: 10px; aspect-ratio: 1 / 1;}
.icon a:hover {background:url("../images/Rise-Icon-GIF.gif") center right no-repeat; background-size:100%;}
.logoType {display:block; background: url("../images/Rise-Logotype-Transparent.png") center left no-repeat;background-size:100%; aspect-ratio: 1/1; width:90%; margin-top:15px;}

/*MOBILE cta*/
div.callToAction {display:block;background:url("../images/BG-Texture.jpg") top center no-repeat; background-size:cover; margin-top: 100px; padding:20px 0;height:500px;}
	div.callToImage img{display:block; width:100%; padding: 50px 0; margin:0 auto; transform: rotate(30deg);}
	div.callToImage img.eggy{display:none; margin:0 auto;}

/*MOBILE menu*/
#food {scroll-margin-top:100px;}
	#specials {scroll-margin-top:100px;}
.close {margin-top: 5%;margin-right: 17%;}

/*MOBILE about*/
#aboutUs {scroll-margin-top:100px;}
div.owner {text-align:center;}
div.ownerInfo p {text-align: left; }
	div.ownerInfo div {column-count:1;}

/*MOBILE contact*/
#contactUs {scroll-margin-top:100px;}

/*MOBILE footer*/
div.footer {display:block; position: fixed; width: 100%; bottom: 0; height:100px; background-color: #ffe1b5;z-index:5; text-align:center;}		
div.footer div.footerInfo p {margin-top:0;}

	
/*NO TOUCHY!!!*/}