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

@font-face {
			font-family: "Durango Western Eroded";
			src: url('../fonts/Durango-Western-Eroded-Demo.otf')
}

@font-face {
			font-family: "American Typewriter";
			
}

@font-face {
			font-family: "Gill Sans";
			
}

@keyframes fade-in {
		0% {opacity: 0}
		100% {opacity: 1}
	}

/* DESKTOP SCREEN DISPLAY */
@media screen and (min-width: 1269px) and (max-width: 1919px) {
		#button-1 {
			display: none;}

		article {
			display: none;}
}

/* TABLET SCREEN DISPLAY */
@media screen and (max-width: 1269px) {
		.nav-ul {
			display: none;}
	}

body {
	background-image: url("../img/bg.png");
    background-color:  #F7EDCE;
}


/* NAV STARTS */
nav {
    margin: 0;
    padding: 3vh;
    background-color: #64380F;
    top: 0;
    width: 100%;
    position: fixed;
}

.nav-ul {
	margin: 0 26vw;
}

#logo {
	border-radius: 60px;
	box-shadow: 0vw 0vw 1vw #F7EDCE;
}

nav li {
	float: left;
}

li a {
	font-family: "American Typewriter";
	font-size: 25px;
    color: #F7EDCE; 
}

nav li a {
	font-family: "American Typewriter";
	font-size: 25px;
    display: block;
    color: #F7EDCE;
    text-align: center; 
    margin: 2vw;
}

ul li a:hover {
    color: #482600;
    transform: scale(1.2);
    transition-duration: 0.30s;
}

nav ul li a:active {
    background-color: #F7EDCE;
    color: #8E221B;
	border-radius: 25px;
	padding: 7px 16px;
	margin:  7px 8px;
	transform: scale(1.2);
    transition-duration: 0.30s;
    color: #82291b;
}

#button-1 {
	font-family: "Impact", sans-serif;
	line-height: 1.4em;
	font-size: 4vw;
	border-color: #F7EDCE;
	border-radius: 20px;
	margin: 0.5vw 0 0 2vw;
	padding: 0 1vw 0 1vw;
	box-shadow: 0.5vw 0.5vw 0.5vw black;
	color: #64380F;
	background-color: #F7EDCE;
	outline: none;
}

button:hover {
	transform: scale(1.2);
	transition-duration: 0.30s;
	cursor: pointer;
}

.slide-the-drawer {
	transform: translateX(50vw);
	transition: transform 0.8s;
}

article {
	position: fixed;
	margin-top: 10vw;
	left: -50vw;
}

.art-ul {
	display: block;
	padding: 0.5vw;
	background-color: #64380F;
}

article ul li {
	margin: 2vw;
}

/* NAV ENDS */


/* MAIN STARTS */
figure {
		width: 50vw;
		height: 50vw;
		margin: 10vh auto;
}

.fotorama {
	position: relative;
	margin-top: 30vh;
	z-index: -2;
	height: 5%; 
	width: 100%;
}

.pipestacos {
	position: absolute;
   	top: 0;
   	right: 0;
   	margin: 40vh 25vw;
   	animation-name: fade-in;
	animation-duration: 3s;
	animation-fill-mode: backwards;
	z-index: -1;
}

.home-p {
	list-style-type: none;
	float: left;
	display: block;
	padding-bottom: 100px;
}

.text-visit {
	margin: 15vh 25vw 0 25vw;
}

.menu {
	margin: 15vh;
}

#order {
	font-family: "American Typewriter";
	text-align: center;
	font-size: 4vw;
    color: #64380F; 
    background-color: #F7EDCE;
    border-radius: 50px;
    margin: 0 20vw 20vh 20vw; 
    padding: 3vw;
}
form p {
	display: block;
	float: left;
	margin: 0 4vw 0 4vw; 
}

input[type=text], select {
    width: 50%;
    font-family: "Gill Sans";
    color: gray;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
 }

 input[type=submit] {
    width: 50%;
    font-family: "American Typewriter";
    font-size: 4vw;
    background-color: #8e221b;
    color: #F7EDCE;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 25px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #482600;
}
/* MAIN ENDS */


/* FOOTER STARTS */
footer {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #64380F;
    position: fixed;
    bottom: 0;
    width: 100%;
}

footer ul li {
	float: left;
}

.foot-ul {
	list-style-type: none;
	display: block;
    color: #F7EDCE;
    text-align: center;
    margin: 5px 8px;
    float: right;
}

ul li .foot-icon {
	float: right;
	margin: 8px 8px;
}

.copyright {
	text-align: right;
	padding: 12px 8px;
	font-family: "Gill Sans";
	font-size: 15px;
}
/* FOOTER ENDS */