/*                                                                   
     .*   `MICHELLE.                      .MICHELLE'    .*             
	       888888888.               	.888888888                  
	       888888'  `888.           .888'  `888888                    
	        88888!  .88.  88.   .88  .88.  88888!                    
	*     `888  	      `8 ( ) 8'           888'                  
	         8888  '"        |U|        "'  8888       .*             
	        888888888888"'   |U|  `888888888888                           
	                .8'     8|U|8     '8.                              
	               .8' 88   8|U|8  88 '8.         .*                 
	            888  `'     8|U|8  `' 888                               
	             88888   .88 |U| 88.   88888                      
	            :8888888888' (U) '8888888888:        *           
	            '! 8888888'       '8888888 !'                     
	      .*        ERAZO          ERAZO                          
	               8                    8                          
	              8                      8                                 
		                       
	.  .._. __ .  ..___.   .   .___  .___.__ .__..___..__.
	|\/| | /  `|__|[__ |   |   [__   [__ [__)[__]  _/ |  |
	|  |_|_\__.|  |[___|___|___[___  [___|  \|  |./__.|__.
*/

* {
	margin: 0;
	padding: 0;
	font-family: "Proxima Nova", "Futura", "Arial","Helvetica", "Sans-Serif";
	text-decoration: none;
	list-style-type: none;

}

@font-face {
	font-family: Ganache;
	src: url("https://use.typekit.net/wvt3cxs.css")
}

@font-face {
	font-family: Proxima Nova;
	src: url("https://use.typekit.net/wvt3cxs.css")
}
	
li, a, button {
	font-weight: 500;
	color: white;	
}

.header-bar {
	position: fixed;
	padding: 30%, 10%;
	background-color:#5BC2C4; /*TEAL*/
	height: 20vh;
	width: 100%;
	z-index: 997;
}

.logo {
	float:left;
	height: 12vh;
	width: auto;
	position: inline-block;
	padding-left: 0%;
	cursor: pointer;
	margin-top:2%;
	margin-left: 2%;
	margin-right: -2%; /*PUSHES LOGO TO MIDDLE*/
}

/*--------------
 🌸  NAV LINKS 
--------------*/

nav#top-nav ul {
	float: right;
}
.nav-links {
	list-style: none;
}
.nav-links li {
	display: inline-block;
	padding: 0% 2%;
	margin-top: 5%;
	margin-left: 2%;
}
.nav-links li a {
	transition: all 0.3s ease 0s;
	font-weight: 800;
	font-size: 1.2em;
}
.nav-links li a:hover {
	color: orange; 
}


/*--------------
 🌸 BUTTON CSS 
--------------*/

button#top-button {
	background-color: #F3D35B; /*DARK YELLOW*/
	padding: 0.6% 3%;
	border:none;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.3s ease 0s;
}

button#top-button:hover {
	background-color: orange;
}

.order {
	margin-left: 10%;
}

.locations {
	margin-left: 1%;
}

/*------------------
 🌸   MAIN & BODY
-------------------*/

body {
	height: 100vh;
	width: 100vw;
}
main#canvas {
	height: 100vh;
	width: 100vw;
	padding-bottom: 60%;
	scroll-behavior: smooth;
}

h1 {
	color:black;
	font-size: 20em;
}

.fotorama {
		width: 100vw;
		height: 80vw;
		margin: -2vh 5vw -5vh 5vw; /*HEIGHT FROM THE TOP*/
	}

/*------------------
 🌸   ABOUT 
-------------------*/

	.about-img {
		width:80%; 
		height:auto;  
		float:left; 
		margin-left: 2em;
		
		margin-top: 10em;
		background-color:none;
		padding: 2%;
	}
		.about-img img{
			height: auto;
			width: 100%;
		}
		.about-desc:last-child {
			margin-right:0px;
		}

	.about-desc {
		width:auto; 
		height:auto; 

		float:left; 
		text-align: center;

		border-radius: 5%;
		padding: 5%;
		margin-left: 1.5em;
		margin-right: 1.5em;

		background-color:#5BC2C4; 
		color:white;
	

	}

		.about-desc-par {
			width:70vw; 
			height:auto; 

			text-align: left;
			margin:0em 1.2em 0em 1.2em;
			padding-bottom: 0.5em;

			font-size: 1em;
			font-weight: 600;		
		}

/*------------------
 🌸 MEDIA QUERIES 
 	  🖥️💻📱📲 
-------------------*/
/*--------------
   📱 MOBILE 📱 / TESTED WITH IPHONE 12 PRO
----------------*/

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

	body {
		width: 100%;
		height: auto;
	}
	button#top-button {
		display: none;
	}
	
	nav#top-nav ul {
		display: none;
	}

	.nav-links {
		display: none;
	}

	.logo {
		float: left;
		margin-left: 15%;
		margin-right: -15%;
		margin-top: 10%;
		position: fixed;
		height: 10vh;
		width: auto;
	}

	.fotorama {
		width: 100vw;
		height: 80vw;
		margin: 0vh 5vw 0vh 5vw; 
		padding-top: 20vh;/*HEIGHT FROM THE TOP*/
	}


	/*----------------
  	MOBILE: BURGER ICON
	------------------*/

	button#hamburger-icon {
		position: fixed;
		top: 20px;
		left:10px;
		font-size: 2em;
		line-height: 0;
		padding: 18px 5px 28px 5px;
		border-radius: 20%;
		background-color: #F3D35B;
		z-index: 999;
	}

		button#hamburger-icon:hover {
			background-color: orange;
			color:white;
	}

	.mobile-nav { /* MOBILE NAV */
		position: fixed;
		font-size: 2.5em;
		line-height: 1.5em;
		transition: left 0.5s;
			-moz-transition:left 0.5s;
			-ms-transition:left 0.5s;
			-o-transition:left 0.5s;
			-webkit-transition:left 0.5s;
		background-color: #81E5EF;/*LIGHT BLUE*/
		padding: 40px;
		margin-top:3.1em; /* from the top */
		height: 100vh;
		width: 100vw;
		left:-1000px;
		z-index: 998;
		}

		.mobile-nav li a { /*TEXT COLOR: OF MENU ITEMS*/
			color:white;
		}

		.slide-the-drawer { 
			left:0px;
		}

		.mobile-nav li a:hover{
		background-color:#F3D35B; /*DARK YELLOW*/
		}

}


/*--------------
   📲 TABLET
----------------*/

@media screen and (min-width: 511px) and (max-width: 1365px) {

body {
		width: 100%;
		height: auto;
	}
	button#top-button {
		display: none;
	}
	
	nav#top-nav ul {
		display: none;
	}

	.nav-links {
		display: none;
	}

	.logo {
		float:left;
		position: static;

		height: 12vh;
		width: auto;
		
		padding-left: 0%;
		cursor: pointer;
		margin-top:2%;
		margin-left: 25%;
		margin-right: -15%;
	}

	.fotorama {
		width: 100vw;
		height: 80vw;
		margin: 0vh 5vw -5vh 5vw; 
		padding-top: 20vh;/*HEIGHT FROM THE TOP*/
	}


	/*----------------
  	TABLET: BOTTOM NAV 
	------------------*/

	.main-image {
		width: 100%;
		height: 100vh;
		display: inline;
		margin-left: 6em;	
		padding-right: 2em;
	}

 	.main-image img {
 		height: 10em;
 		width: 10em;
 		border-radius: 50%;
 		margin-bottom:6%;
 		margin-top: 4%;
 	}

 	.main-image figcaption{
 		display: inline;
		color: black;  
		margin-left: -6.5em;

	}

	/*----------------
  	TABLET: BURGER ICON
	------------------*/

	button#hamburger-icon {
		position: fixed;
		top: 40px;
		left:30px;
		font-size: 4em;
		line-height: 0;
		padding: 35px 5px 45px 5px;
		border-radius: 20%;
		background-color: #F3D35B;
		z-index: 999; /* In front of other items */
	}

		button#hamburger-icon:hover {
			background-color: orange;
			color:white;
	}

	.mobile-nav { /* MOBILE NAV */
		position: fixed;
		font-size: 3em;
		line-height: 1.5em;
		transition: left 0.5s;
			-moz-transition:left 0.5s;
			-ms-transition:left 0.5s;
			-o-transition:left 0.5s;
			-webkit-transition:left 0.5s;
		background-color: #81E5EF;/*LIGHT BLUE*/
		padding: 70px;
		margin-top:2.7em; /* from the top */
		height: 100vh;
		width: 100vw;
		left:-2000%;
		z-index: 998;
		}

		.mobile-nav li a { /*TEXT COLOR: OF MENU ITEMS*/
		color:white;
		}

		.slide-the-drawer { 
			left:0px;
		}

		.mobile-nav li a:hover {
		background-color:#F3D35B; /*DARK YELLOW*/
		}

}

/*--------------
   💻 LAPTOP
----------------*/

@media screen and (min-width: 1366px) and (max-width: 1920px) {

	.mobile-nav {
		display: none;
	}

	button#hamburger-icon {
		display: none;
	}

		.fotorama {
			width: 100vw;
			height: 80vw;
			margin: 0vh 5vw -5vh 5vw; 
			padding-top: 20vh;/*HEIGHT FROM THE TOP*/
		}

/*------------------
 🌸   ABOUT 
-------------------*/

		.about-img {
			width:60%; 
			margin-left: 14em;
		}

			.about-img img{
				height: auto;
				width: 100%;
			}

		.about-desc {
	
			margin-left: 4em;
			margin-right: 2em;
		}

			.desc-title {
				font-size: 3em;
			}

			.about-desc-par {
				margin:0em 2em 0em 2em;
				padding-bottom: 0.5em;

				font-size: 2em;
				font-weight: 600;		
			}


}