/*                                                                   
     .*   `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")
}

	h1 {
		font-family: ganache,sans-serif;
		font-weight: 400;
		font-style: normal;
		font-size: 60px;
		text-align: center;
		}

	
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; 
}

.current-page  {
	text-decoration: underline;
	color: black;
}

/*--------------
 🌸 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%;
}

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


/*-----------------------------
 🌸 	MERCH ITEM SECTION 
-------------------------------*/
	.merch-h3 /* H3 */ {
		font-family: ganache,sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: 4em;
			text-align: center; 
	 
		padding-left: 1em; 
		padding-top: 18vh; 

		display: block; 
		position: absolute;
		clear: both; 

		background-color: none; 
		color: orange;
}

	section#merch-items {
	
		width:100vw;  /*WIDTH AND HEIGHT OF THE SECTION*/
		height: auto;

		display:flex;
		flex-direction:row; 
		flex-wrap:wrap;
		justify-content: flex-start;

		padding-left:12vh; 
		padding-bottom:10vh; 
		padding-top: 35vh;

		overflow:hidden;
}

	.merch-item {
		width:17em;
		margin-right:12%; /* SPACE IN THE MIDDLE */
		float:left;
		/* TO MAKE SPACE FOR THE PAGINATION MENU */
		width: 14em;
		margin-left: 2%;
	}

	.food-item:last-child {
		margin-right:0em;
	}

		.merch-item-img {
			height:276px; 
			margin-bottom: 10%;
			background-color:#D5CAFF;
		}


			.product-desc {
				padding-top: 1em;
				height:14em;
				width:23em;
				color:white;
				font-family: proxima-nova;
				
				font-size: 0.8em;
				background-color:#5BC2C4;
				float:left;
				text-align: center;

				padding: 1em;
			}


			.product-name {
				color: #F3D35B; /*DARK YELLOW*/;
				font-weight: 800;
				font-size: 2em;
			}
			.product-price {
				color: white;
				font-weight: 800;
				font-size: 1.5em;
			}
			.merch-item-btn {
				background-color: #F3D35B; /*DARK YELLOW*/
				padding: 0 5% 0 5%;
				margin-top: 5%;
				border:none;
				border-radius: 50em;
				cursor: pointer;
				transition: all 0.3s ease 0s;
					-moz-transition:all 0.3s ease 0s;
					-ms-transition:all 0.3s ease 0s;
					-o-transition:all 0.3s ease 0s;
					-webkit-transition:all 0.3s ease 0s;
				font-size: 2em;
				font-weight: 800;
			}
				.merch-item-btn:hover {
					background-color: orange;
					transform: scale(1.2);
						-moz-transition:scale(1.2);
						-ms-transform: scale(1.2);
						-o-transition:scale(1.2);
						-webkit-transform: scale(1.2);
				}

/*------------------------------------------
 			🌸 MEDIA QUERIES 
 			   🖥️ 💻 📱 📲 
--------------------------------------------*/

/*------------------
--------------------
    📱 MOBILE 📱
--------------------
------------------*/

@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;
	}

	#pagination-nav {
		display: none;
	}

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

	/*----------------
  	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: SLIDE OUT NAVIGATION
	---------------------------*/

	.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*/
		}


	/*-----------------------------
	 🌸 FOOD ITEM SECTION [SQUARES]
	-------------------------------*/
	.merch-h3 /* H3 */ {
		font-family: ganache,sans-serif;
			font-weight: 400;
			font-style: normal;
			font-size: 4em;
			text-align: center; 
	 
		padding-left: 1.5em; 
		padding-top: 18vh; 

		display: block; 
		position: absolute;
		clear: both; 

		background-color: none; 
		color: orange;
	}

		section#merch-items {
	
		width:100vw;  /*WIDTH AND HEIGHT OF THE SECTION*/
		height: auto;

		display:flex;
		flex-direction:row; 
		flex-wrap:wrap;
		justify-content: flex-start;

		padding-left:4vw; 
		padding-bottom:10vh; 
		padding-top: 30vh;

		overflow:hidden;
		}
}
/*------------------
--------------------
    📲 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: 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*/
		}


}