/* 
     RRRRRR    EEEEEEE  BBBBBB   EEEEEEE   CCCCCC,       AA                    CCCCCC,
     RR   RR   EE       BB   BB  EE       CCC   C       AAAA                  CCC   C
     RR  RR    EE       BB  BB   EE      CC            AA  AA       WITH     CC
     RRRRRR    EEEE     BBBBBB   EEEE    CC           AAAAAAAA               CC
     RR  RR    EE       BB  BB   EE      CC          AA      AA      ONE     CC
     RR   RR   EE       BB   BB  EE       CCC   C,  AA        AA              CCC   C,
     RR    RR  EEEEEEE  BBBBB    EEEEEEE   CCCCCC  AA          AA              CCCCCC

      ^'^
                    ^'^                                        ^'^
                                                 ^'^                                      ^'^
      //`                                                                    /          
     ///``      /      //`         /                    ``                 ///```         
    //////``   //``  /////``      ///`    //`        ////```     //`     /////```    /`  
 ///////////`/////``///////``   //////`` ///``    //////////```  ////`   ///////```` //``  /
////////////``/////``///////``/////////`///////``///////////````//////``/////////````///````/
/////////////````///////////```/////////`////````////////////````////````/////////````///````
////////////////``````////`````````/////`////`````/////````````````/``````/////////````////``
=============================================================================================
~~~~~~~~~~~~~~ * ~~~~~~~~~~~~~~~~~ * ***** *** ~~~~~~~~ * ~~~~~~~~~~~~~~~~ *** ~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~ * ~~~~~ ********** ~~~~ * ~~ * ~~~~~~~~~~~ * ~~~ WEB ~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~***************** ~~~~~~~~~~~~~~~~~~~~~~~~ PAGE ~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~************ **** ~~~~~~~~~~~~~~~~~~~~~ & ~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~~~~ * ~~~~~~ ** **************** ** ~~~~~ * * ~~~~~~~~~ SEA ~~ * ~~~~~~~
~~~~~~~~~~~~~~~~~~~ * ~~~~~~~~ *************************** ~~~~~~~~~~ * * ~~~~~~~ CREATED ~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~ ************************ ** * ~~~~~~~~~~~~~~~~ BY ~~~~~~~~
~~~~~~~~~~~~~~ * ~~~~~~~ ************************************** ~~~~~~~~~~~~~~~~~ REBECA ~~~~
~~~~~~~~~~~~~~~~~~~********** ******************** ******************** ~~~~~~~~~~~~~~~~~~~~~
*/

*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
}

body#canvas {
	height: 100vh;
	width: 100vh;
}
	body{
		position: fixed;
		height: 100%;
		width: 100%;
	}

video {
	position: fixed;
}

#video {
	position: absolute;
	top: 0;
	object-fit: cover;
	height: 100vh;
	left: -83%;
	z-index: -1;
	opacity: 85%;
}

section#overlay {
	background-size: cover;
	background-color: #EA332340;
}

header {
	width: 100vw;
	height: 10%;
}

button#hamburger-button {
	position: fixed;
	z-index: 1;
	font-size: 2.75em;
	line-height: 1em;
	padding:  0.1em 0.2em 0.2em 0.2em;
	color: #F4BA40;
	background-color: #ffffff00;
	border: none;
	filter: drop-shadow(-1px 2px 1px #000000BF);
}
	button#hamburger-button:hover {
		color: #E3323;
	}

.logo {
	display: block;
	padding: 2.5%;
	width: 25%;
	margin-left: auto;
	margin-right: auto;
	filter: drop-shadow(-1px 2px 1px #000000BF);
}

nav {
	position: fixed;
	top: 0;
	padding: 20vh 5vw 0 5vw;
	font-size: 3em;
	background-color: white;
	left: -79vw;
	transition: transform 1s;
		-moz-transition: transform 1s;
		-ms-transition: transform 1s;
		-o-transition: transform 1s;
		-webkit-transition: transform 1s;
	height: 100vh;
}
	.slide-the-drawer {
		transform: translateX(77vw);
			-moz-transform: translateX(77vw);
			-ms-transform: translateX(77vw);
			-o-transform: translateX(77vw);
			-webkit-transform: translateX(77vw);
		width: 93vw;
	}

main {
	margin-top: 5%;
	margin-left: 5%;
}

nav a {
	font-family: semplicitapro, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: #F4BA40;
}
	nav a:hover {
		width: 100vw;
		color: #419340;
		background-color: #41934080;
	}
		nav a:active {
			color: #EA3323;
		}

h1 {
	font-family: kansasnew, serif;
	font-weight: 700;
	font-style: normal;
	font-size: 19pt;
	color: #F4BA40;
	line-height: 1em;
	text-shadow: -1px 2px 1px #0000007A;
}
h2 {
	font-family: semplicitapro, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: white;
	font-size: 7pt;
}

p {
	font-family: semplicitapro, sans-serif;
	font-weight: 400;
	font-style: normal;
	color: white;
	font-size: 7pt;
	    text-shadow: -0.5px 1.5px 1px #0000007a;
}

b {
	font-family: kansasnew, serif;
	font-weight: 600;
	font-style: normal;
	font-size: 10.5pt;
	color: #419340;

}

footer {
	position: fixed;
	bottom: 0;
	height: 10%;
	width: 100%;
}
.location {
	float: left;
	display: inline-block;
	margin-top: 2%;
	margin-left: 2%;
	text-align: center;
}
.hours {
	margin-top: 2%;
	margin-left: 68%;
	text-align: center;
}
 h5{
 	margin-bottom: 1%;
 	font-family: semplicitapro, sans-serif;
	font-weight: 500;
	font-style: normal;
	color: #F4BA40;
	font-size: 7pt;
	text-shadow: -1px 2px 1px #0000007A;
 }
 	h6 {
 		font-family: semplicitapro, sans-serif;
		font-weight: 300;
		font-style: normal;
		color: #ffffff;
		font-size: 6pt;
 	}
#footerinfo {
	margin-top: 2vh;
}
#socialmedia {
	float: left;
	margin: 1vh;
	margin-top: 4vh;
}
	.yelp {
		width: 5vw;
		margin-left: 1.5%;
		filter: drop-shadow(-1px 2px 1px #000000BF);
	}
	.face {
		width: 5vw;
		margin-left: -.5%;
		filter: drop-shadow(-1px 2px 1px #000000BF);
	}
	.youtube {
		width: 5vw;
		margin-left: 1%;
		filter: drop-shadow(-1px 2px 1px #000000BF);
	}
	.twitter {
		width: 5vw;
		margin-left: 2%;
		filter: drop-shadow(-1px 2px 1px #000000BF);
	}
	.insta {
		width: 5vw;
		margin-left: .5%;
		filter: drop-shadow(-1px 2px 1px #000000BF);
	}

	img {
		max-width: 100%;
	}

/* @media Breakpoints */

/* mobile */
@media screen and (max-width: 479px) {
	body {
		width: 375px;
		height: 627px;
	}
}

/* tablet */
@media screen and (min-width: 768px) and (max-width: 1365px) {
	body#canvas {
		width: 768px;
		height: 1024px;
	}
		body {
			width: 100%;
			height: 100%;
		}

	#video {
	position: fixed;
	left: -90%;
	}
	button#hamburger-button {
		display: none;
	}
	header {
		height: 14.5%;
		width: 100vw;
	}
	a.menu {
		display: inline-block;
		position: fixed;
		float: left;
    	top: 0;
    	padding-top: 6vh;
    	margin-left: 40vw;

    	font-size: 16pt;
    	left: 0;
    	background-color: none;
	}
	a.about {
		display: inline-block;
		position: fixed;
		
    	top: 0;
    	padding-top: 6vh;
    	margin-left: 49vw;

    	font-size: 16pt;
    	left: 0;
    	background-color: none;
	}
	a.community {
		display: inline-block;
		position: fixed;

    	top: 0;
    	padding-top: 6vh;
    	margin-left: 58.5vw;

    	font-size: 16pt;
    	left: 0;
    	background-color: none;
	}
	a.merch {
		display: inline-block;
		position: fixed;
    	top: 0;
    	padding-top: 6vh;
    	margin-left: 75vw;


    	font-size: 16pt;
    	left: 0;
    	background-color: none;
	}
	a.contactus {
		display: inline-block;
		position: fixed;
    	top: 0;
    	padding-top: 6vh;
    	margin-left:85vw;
    	width: 30%;

    	font-size: 16pt;
    	left: 0;
    	background-color: none;
	}
	nav a:hover {
		width: 0vw;
		color: #419340;
		background-color: none;
	}

	.logo {
		float: left;
		width: 25%;
		margin-left: 2%;
		padding-left: 0%;
		margin-top: 2%;
		filter drop-shadow: 0px 3px 10px;
	}

	h1 {
		font-size: 36pt;
	}
	h2 {
		font-size: 14.5pt;
	}
	b {
		font-size: 17.5pt;
	}
	footer {
		height: 14%;
	}
	#footerinfo {
		margin-top: 3vh;
	}
	#socialmedia {
	margin: 1.6vh;
	margin-top: 6vh;
	}
	h5,h6 {
		font-size: 1em;
	}	
}

/* laptop */
@media screen and (min-width: 1366px) and (max-width: 1919px) {
	body {
		width: 1366px;
		height: 768px;
	}
	body {
			width: 100%;
			height: 100%;
		}

	#video {
	left: 0%;
	width: 100vw;
	}
	button#hamburger-button {
		display: none;
	}
	header {
		height: 19.5%;
		width: 100vw;
	}
	a.menu {
		display: inline-block;
		position: fixed;
		float: left;
    	top: 0;
    	padding-top: 7vh;
    	margin-left: 50vw;

    	font-size: 21pt;
    	left: 0;
    	background-color: none;
	}
	a.about {
		display: inline-block;
		position: fixed;
		
    	top: 0;
    	padding-top: 7vh;
    	margin-left: 58vw;

    	font-size: 21pt;
    	left: 0;
    	background-color: none;
	}
	a.community {
		display: inline-block;
		position: fixed;

    	top: 0;
    	padding-top: 7vh;
    	margin-left: 66vw;

    	font-size: 21pt;
    	left: 0;
    	background-color: none;
	}
	a.merch {
		display: inline-block;
		position: fixed;
    	top: 0;
    	padding-top: 7vh;
    	margin-left: 79vw;


    	font-size: 21pt;
    	left: 0;
    	background-color: none;
	}
	a.contactus {
		display: inline-block;
		position: fixed;
    	top: 0;
    	padding-top: 7vh;
    	margin-left: 87vw;
    	width: 30%;

    	font-size: 22pt;
    	left: 0;
    	background-color: none;
	}
	nav a:hover {
		width: 0vw;
		color: #419340;
		background-color: none;
	}

	.logo {
		float: left;
		width: 17%;
		margin-left: 2%;
		padding-left: 0%;
		padding-top: 1.5%;
		filter drop-shadow: 0px 3px 10px;
	}

	h1 {
		font-size: 48pt;
	}
	h2 {
		font-size: 20.5pt;
	}
	b {
		font-size: 22.5pt;
	}
	footer {
		height: 20%;
	}
	#footerinfo {
	margin-top: 3.5vh;
	}
	#socialmedia {
	margin: 9.5vh;
	margin-top: 7vh;
	}
	h5 {
		margin-top: 2.5%;
	}
	h5,h6 {
		font-size: 1em;
	}

	.hours {
		margin-left: 68%;
	}
	.yelp {
		width: 3vw;
	}
	.face {
		width: 3vw;
	}
	.youtube {
		width: 3vw;
	}
	.twitter {
		width: 3vw;
	}
	.insta {
		width: 3vw;
	}

}

/* desktop */
@media screen and (min-width: 1920px) {
	body {
		width: 1920px;
		height: 1080px;
	}
	body {
			width: 100vw;
			height: 100vh;
		}

	#video {
	left: 0%;
	width: 100vw;
	}
	button#hamburger-button {
		display: none;
	}
	header {
		height: 19.5%;
		width: 100vw;
	}
	a.menu {
		display: inline-block;
		position: fixed;
		float: left;
    	top: 0;
    	padding-top: 6vh;
    	margin-left: 50vw;

    	font-size: 0.8em;
    	left: 0;
    	background-color: none;
	}
	a.about {
		display: inline-block;
		position: fixed;
		
    	top: 0;
    	padding-top: 6vh;
    	margin-left: 58vw;

    	font-size: 0.8em;
    	left: 0;
    	background-color: none;
	}
	a.community {
		display: inline-block;
		position: fixed;

    	top: 0;
    	padding-top: 6vh;
    	margin-left: 66vw;

    	font-size: 0.8em;
    	left: 0;
    	background-color: none;
	}
	a.merch {
		display: inline-block;
		position: fixed;
    	top: 0;
    	padding-top: 6vh;
    	margin-left: 79vw;


    	font-size: 0.8em;
    	left: 0;
    	background-color: none;
	}
	a.contactus {
		display: inline-block;
		position: fixed;
    	top: 0;
    	padding-top: 6vh;
    	margin-left: 87vw;
    	width: 30%;

    	font-size: 0.8em;
    	left: 0;
    	background-color: none;
	}
	nav a:hover {
		width: 0vw;
		color: #419340;
		background-color: none;
	}

	.logo {
		float: left;
		width: 17%;
		margin-left: 2%;
		padding-left: 0%;
		padding-top: 1%;
		filter drop-shadow: 0px 3px 10px;
	}

	h1 {
		font-size: 68pt;
	}
	h2 {
		font-size: 28.5pt;
	}
	b {
		font-size: 30.5pt;
	}
	footer {
		height: 21%;
	}
	figure#footerinfo {
	margin-top: 3.5vh;
	}
	figure#socialmedia {
	margin: 9.3vh;
	margin-top: 7vh;
	}
	h5 {
		margin-top: 2.5%;
	}
	h5,h6 {
		font-size: 1.5em;
	}

	.hours {
		margin-left: 68%;
	}
	.yelp {
		width: 3vw;
	}
	.face {
		width: 3vw;
	}
	.youtube {
		width: 3vw;
	}
	.twitter {
		width: 3vw;
	}
	.insta {
		width: 3vw;
	}
#socialmedia {
    float: left;
    margin: 8.4vh;
    margin-top: 7vh;
}

}


/* CSS COLOR CLASSES */

.red {
	background-color: #EA3323;
}

.yellow {
	background-color: #F4BA40;
}

.green {
	background-color: #419340;
}

.greent50 {
	background-color: #41934080;
}

.greent75 {
	background-color: #419340BF;
}

.white {
	background-color: white;
}

.black {
	background-color: black;
}