/*-- h4 are the same as h1 just in white --*/

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

section {
	width: 100vw;
	height: 100vh;
}

#header {
	background-color: red;
}

.header-logo {
	background-color: transparent;
	outline: none;
	padding: 15px;
}
 

button {
	position:fixed;
	top: 20px;
	right: 40px;
	font-size: 3em;
	line-height: 0;
	padding: 25px 10px 30px 10px;
	border: 4px solid #000;
	border-radius: 10%;
	background-color: #fff;
}

	button:hover {
		color: #fff;
		background-color: #000;
	}

nav {
	position: fixed;
	top: 120px;
	right: 20px;
	font-size: 3em;
	transition: right 0.5s;
	padding: 5px;
	background-color: rgba(255,255,255,0.7);
	
} 

	.slide-the-drawer {
		transform: translateX(35vw);
	}

		

	a:hover {
		background-color: yellow;
	}

 

footer {
	background-color: white;
	text-align: center;
	margin: 20px;

}


figure {
	width: 2vw;
	height: 2vw;
	border: 0.2vw solid white;
	background-color: black;
	border-radius: 50%;
	margin-bottom: 1vh;
}

	figure:hover	{
		background-color: white;
		border-color: black;
	}

h1, h3, h5 {
	font-size: 8vw;
	text-align: center;
	font-family: 'Amatic SC', cursive;
	padding-top: 20px;

}

h2 {
	font-size: 3vw;
	text-align: center;
	color: blue;
	font-family: 'Montserrat', sans-serif;
}

h3 {
	color: white;
}

h4 {
	font-size: 8vw;
	text-align: center;
	font-family: 'Amatic SC', cursive;
	padding-top: 20px;
	color: white;
}

h5 {
	font-size: 6vw;
	text-align: center;
	font-family: 'Amatic SC', cursive;
	padding-top: 20px;
	color: black;
}


/*----------
	h1 {
		transition: transform 2s;
			-moz-transition: transform 2s;
			-ms-transition: transform 2s;
			-o-transition: transform 2s;
			-webkit-transition: transform 2s}

		h1:hover {
			transform: rotate(90deg);
				-moz-transform: rotate(90deg);
				-ms-transform: rotate(90deg);
				-o-transform: rotate(90deg);
				-webkit-transform: rotate(90deg);
		}

h4 {
	transition: transform 1s;
}

h4:hover {
	transform: translate(20vw,40vh);
}
-------------*/





p {
	font-family: sans-serif;
	padding-top: 15px;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 34px;
	

}

.hero-image {
	width: 100vw;
	height: 100vh;
}


.about-portrait {
	
	width: 100vw;
	height: 70vh;
}




/*-----
section#four {
	transition: background-color 1s;
}

	section#four:hover {
		background-color: pink;
	}
---------*/

.container {
  position: relative;
  width: 50%;
}

.container .hero-logo {
	position: absolute;
	top: 10%;
	left: 65%;
	width: 60%;
	transition: transform 3s;
}
		.container .hero-logo:hover {
				transform: scale(2);
		}

.container .btn-one {
  position: absolute;
  top: 70%;
  left: 55%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: blue;
  color: white;
  font-size:40px;
  padding: 25px 30px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

		.container .btn-one:hover {
			background-color: red;
		}

.container .btn-two {
  position: absolute;
  top: 70%;
  left: 135%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: blue;
  color: white;
  font-size: 40px;
  padding: 25px 30px;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

		.container .btn-two:hover {
			background-color: red;
		}











.pre-order-text {
	padding-top: 15%;
	padding-bottom: 6%;
	color: white;
}

.tap-room-text {
	padding-top: 15%;
	padding-bottom: 6%;
	color: white;
}


#section-three {
	text-decoration-color: white;
}




/*-- PHOTO CAROSEL FIGURE --*/

.figure {
	width: 90vw;
	height: 90vh;
	margin: 10vh auto;
}

.fotorama {
	padding: 352px;
	max-width: 52%;
	height: auto;
	padding-top: 50px;
	padding-bottom: 10px;

}


/* CSS COLOR CLASSES */

.red {
	background-color: red;
}

.white {
	background-color: white;
}

.blue {
	background-color: blue;
}




input {
	display: block;
	margin: auto;
	padding: 0.5vh;
	color: black;
	font-weight: bold;
	border: 3px solid black;
	background-color: white;
}
	
	input:hover {
		color: gray;
		border: 3px solid gray;
		border-color: black;
	}

	input:focus {
		background-color: yellow;
	}



.contact-submit {
	display: block;
	margin: auto;
	padding: 0.8vh;
	color: black;
	font-weight: bold;
	border: 3px solid black;

}


.btn-submit {

}




/* HERE IS THE BREAKPOINT FOR SMART PHONES */

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

	figure {
		width: 475px;
		height: 627px;
		background-color: none;
			}

	h2, h3, h4, h5 {
		display: none;
	}
}

/* HERE IS THE BREAKPOINT FOR LARGE SMART PHONES */

@media screen and (min-width: 480px) and (max-width: 766px) {

	figure {
		width: 475px;
		height: 768px;
		background-color: none;
	}

	h1, h3, h4, h5 {
		display: none;
	}
}


/* HERE IS THE BREAKPOINT FOR TABLETS */

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

	figure {
		width: 1366px;
		height: 768px;
		background-color: none;
	}

	h1, h2, h4, h5 {
		display: none;
	}
}

/* HERE IS THE BREAKPOINT FOR MOST DESKTOP SCREENS */

@media screen and (min-width: 3220px) and (max-width: 3820px) {

	figure {
		width: 4220px;
		height: 2080px;
		background-color: none;
	}

	h1, h2, h3, h5 {
		display: none;
	}
}

.menu {
	padding-top: 47px;
}



/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
  padding-top: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}



.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}