/* --------------------------------
------ FONTS-----------------------
---------------------------------*/


@import url('https://fonts.googleapis.com/css?family=Josefin+Sans|Special+Elite&display=swap');


/* --------------------------------
------ CSS RESET ------------------
---------------------------------*/

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

/* --------------------------------
------ General ------------------
---------------------------------*/


	h1 {
		font-family: 'Special Elite', cursive;
		font-size: 3em;
	}

	h2 {

		font-family: 'Special Elite', cursive;
		font-size: 2em;

	}


	h3 {

		font-family: 'Josefin Sans', sans-serif;
		font-size: 1em;
	}


	p {
		font-family: 'Josefin Sans', sans-serif;
		font-size: ;
	}

	button {
		background-color: none;
		border: none;
		cursor: pointer;
	}

	a {
		color: black;
		text-decoration: none;
	}

	html {
		scroll-behavior: smooth;
	}

/* --------------------------------
------ Responsive ------------------
---------------------------------*/

	@media (min-width: 992px) {
	  .container {
	    width: 970px;
	  }
	}
	@media (min-width: 1200px) {
	  .container {
	    width: 1170px;
	  }
	}

/* --------------------------------
------ Colors ------------------
---------------------------------*/


	.red {
		color: #E53F27;
	}

	.orange {
		color: #F28121;
	}

	.grey {
		color: #707070;
	}

	.black {
		color: black;
	}

	.white {
		color: white;
	}

/* --------------------------------
------ Layout ------------------
---------------------------------*/
	.img-container img{
		width:100%;
		display:block;
	}

	.text-container {
		margin-top:20px;
	}

	.responsiveimg {
	    width:100%;
	    height:auto;
	}

	.center {
	    margin:auto;
	}

	.border {
	    border:solid 2px #333;
	}

	.W1920 {
	    max-width:1920px;
	}

	.W1023 {
	    max-width:1023px;
	}

	.W412 {
	    max-width:412px;
	}

	.W200 {
		max-width:200px;
	}

/* --------------------------------
------ Header ------------------
---------------------------------*/

	header {
		position: fixed;
		background-color: white;
		width: 100%;
	}

	.button-container {
		width: 100%;
		text-align: center;
	}

	.nav-fix {
    	height: 26vh;
	}

	.main-nav-button {
		padding: 10px 46px;
 		text-align: center;
    	font-size: 2em;
    	cursor: pointer;
    	font-family:'Special Elite', cursive;
    	margin: 1vh 3vw 1vh 0;
	}

	#menu_button {
		background-color: #F28121;
		box-shadow: -5px 5px #F28121;
		border: 2px solid white;
		border-radius: 10px;
		color: white;
	}

	#about_button {
		background-color: white;
		box-shadow: -5px 5px #707070;
		border: 2px solid #707070;
		border-radius: 10px;
		color: #707070;
	}

	#order_button {
		background-color: #E53F27;
		box-shadow: -5px 5px #E53F27;
		border: 2px solid white;
		border-radius: 10px;
		color: white;
	}

/*---------------------------
----------homepage----------
----------------------------*/

	#home-page-right-section {
		position: relative;
    	top: 20vh;
    	left: 50vw;
	}

/*---------------------------
----------menu---------------
----------------------------*/

	.menu-nav {
		width: 100%;
		text-align: center;
	}

	.menu-button a {
		color: #F28121;
	}

	.menu-button a:hover {
		color: white;
	}

	.menu-button {
		padding: 5px 10px;
		font-family:'Special Elite', cursive;
		font-size: 1.5em;
    	margin: 1vh 1vw 1vh 0;
    	background-color: white;
    	border: 2px solid #F28121;
    	border-radius: 10px;
    	display: inline-block;
	}

	.menu-button:hover {
		background-color: #F28121;
		border: 2px solid white;

	}

	.menu-section {
		margin-left: 10vw;
	}

	.menu-item h3 {
		margin-top: 1vh;
	}

	.row {
	  display: -ms-flexbox; /* IE10 */
	  display: flex;
	  -ms-flex-wrap: wrap; /* IE10 */
	  flex-wrap: wrap;
	  padding: 0 4px;
	}

	/* Create four equal columns that sits next to each other */
	.column {
	  -ms-flex: 20%; /* IE10 */
	  flex: 20%;
	  max-width: 20%;
	  padding: 0 4px;
	}

	.column img {
		margin-top: 30px;
		margin-bottom: 15px;
		vertical-align: middle;
		width: 79%;
	}

	.photo-grid {
		margin-bottom: 5vh;
	}

/*---------------------------
----------GRIDCOLORS---------
----------------------------*/

	.photo-grid p {
		color: #F28121;
	}