/*                                                                   
     .*   `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: 100vw; /*%*/
	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*/
	}


/*--------------------
 🌸 BOTTOM NAV (CIRCLE)
----------------------*/

.main-image {
	width: 100%;
	height: 100vh;
	display: inline;
	margin-left: 10%;	
	padding-right: 5em;
}
.main-image img {
 	height: 10em;
 	width: 10em;
 	border-radius: 50%;
 	margin-bottom:2%;
}

.main-image figcaption{
 	display: inline;
	color: black;  
	margin-left: -6.7em;
	font-weight: 800;
	font-size: 1em;
}



/*--------------------
 🌸 FOOTER
----------------------*/

footer{
    color: white;
    background-color: #F3D35B;
    height: 50%;
    margin: 40vh 0 -50vh;
}
#footertxt, #photocred{
    display: flex;
    justify-content: center;
    text-align: center;
    font-style: normal;
    font-size: 1em;
    padding: 2% 0 1%;
}
.footinfo{
    margin: 0 5% 0;
}
footer h4{
    font-weight: 600;
    text-transform: uppercase;
}
#footmedia{
    display: flex;
    justify-content: center;
    align-items: center;
}
	#footmedia a{
	    margin: 1% 1% 1%;
	}
	#footmedia img{
	    height: 2.5em;
	}
#message{
    display: flex;
    justify-content: center;
    font-size: .8em;
    padding: 0 0 1%;

}




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

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

	body {
		width: 100vw; /*CHANGED*/
		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: BOTTOM NAV 
	------------------*/

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

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

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

	}

	/*----------------
  	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: 60vw;
		height: 80vw;
		margin: 0vh 5vw -60vh 22vw; 
		padding-top: 20vh;/*HEIGHT FROM THE TOP*/
	}


}