* {
	margin: 0;
	padding: 0;
}
body {
	background: #282828;
	height: 100%;
	width: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


.clearfix:after {
  content: "";
  display: table;
  clear: both;
}


h1 {
	color: #fff;
	font-family: "Oswald", Impact, "Franklin Gothic Bold", sans-serif;
	font-size: 35px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

h2 {
	color: #282828;
	font-family: "Oswald", Impact, "Franklin Gothic Bold", sans-serif;
	font-size: 25px;
	font-weight: bold;
	line-height: 1.2;
	margin: 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}


h3 {
	color: #fff;
	font-family: "Karla", sans-serif;
	font-size: 18px;
	font-weight: normal;
	line-height: 1.2;
	margin: 1vh;
	padding: 0;
}
p {
	color: #282828;
	font-family: "Karla", sans-serif;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.25;
}
a {
	color: #fff;
	font-family: "Karla", sans-serif;
	font-size: 15px;
	font-weight: normal;
}
.bold {
	font-weight: bold;
}
.red {
	color: #db493a;
}
@media (min-width: 768px) {
	h1 {
		font-size: 50px;
	}
	h2 {
		font-size: 30px;
	}
	h3 {
		font-size: 20px;
	}
}
@media (min-width: 960px) {
	h1 {
		font-size: 60px;
	}
	h3 {
		font-size: 24px;
	}
}


/* RESPONSIVE */
.container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 300px) {
  .container {
    width: 85%;
    padding: 0; }

    .one.column,
    .two.columns,
    .three.columns,
    .four.columns.
    .five.columns,
    .six.columns,
    .seven.columns,
    .eight.columns,
    .nine.columns,
    .ten.columns,
    .eleven.columns,
    .twelve.columns {
    	width: 100%;
    }
}

/* For devices larger than 550px */
@media (min-width: 768px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }


  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }
}



/*
NAVIGATION
*/
header {
  position: fixed;
  width: 100vw;
  padding: 2em 0 2em 0;
  z-index: 5;
}
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}

.home_header {
	background-color: #fff;
	height: 70px;
}


.one {
  width: 50vw;
  float: left;
  color: #000;
}
.one a {
  margin-left: 10%;
  color: #fff;
  text-transform: uppercase;
  font-size: 1.5em;
  font-family: "Oswald", sans-serif;
  font-weight: bold;
}
.hamburger {
  width: 50vw;
  float: left;
  cursor: pointer;
  text-align: right;
}
.hamburger p:hover {
	animation-name: flip;
	animation-duration: 1000ms;
}
@keyframes flip {
	from {
		transform: rotateX(0deg);
	}
	to {
		transform: rotateX(180deg);
	}
}
.hamburger-ul {
  position: absolute;
  top: 0;
  left: -100vw;
  height: 100vh;
  width: 30vw;
  z-index: 5;
  list-style: none;
  background: #db493a;
  padding: 3em;
}
.hamburger-ul li a {
  color: #000;
  font-size: 2em;
  line-height: 1.4;
}
.hamburger-ul li a:hover {
	color: #ddd;
}
.hamburger p {
  margin-right: 10%;
  color: #000;
  font-size: 2em;
}
.hamburger-display {
  left: 0;
  transition: all 400ms ease-in-out;
}
.two,
.three {
  width: 33.33333333333333333vw;
  float: right;
  list-style: none;
  text-align: center;
  display: none;

}

.three_nav{
 	border-radius: 6px;
    border: 2px solid red;
    padding: 1px ;

}


.two li,
.three li {
  display: inline-block;
  margin-right: .5em;
}
.two a,
.three a {
  color: red;
  /*navigation color text*/
  font-family: "Karla", sans-serif;
  line-height: 3em;
}
.two a:hover,
.three a:hover {
	color: black;
}
.three {
  text-align: right;
}
.three ul {
  margin-right: 10%;
}
@media screen and (min-width:768px) {
	.one {
		width: 33.333333333vw;
	}
	.one a {
		font-size: 2em;
	}
  .hamburger {
    display: none;
  }
  .two,
  .three {
    display: inline-block;
  }
}
/*
BUTTON
*/
.button-wrapper {
	text-align: center;
}
button {
	background: #db493a;
	border: 1px solid #db493a;
	color: #fff;
	cursor: pointer;
	font-family: "Oswald", Impact, "Franklin Gothic Bold", sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	padding: 1.25em 3em;
	margin: 1em;
	text-transform: uppercase;
}
button:hover {
	border: 1px solid #db493a;
	background: transparent;
	color: #282828;
	transition: all 400ms ease;
}
#home button:hover {
	color: #fff;
}
button:focus {
	outline: none;
}

/*
SUPERSLIDES
*/
.slide-content {
	position: relative;
	text-align: center;
	transform: translateY(40vh);
}
.next {
	border: 1px solid #fff;
	padding: 1em 0;
	position: absolute;
	right: 37.7%;
	text-decoration: none;
	text-align: center;
	width: 12%;
}
.prev {
	border: 1px solid #fff;
	left: 37.7%;
	padding: 1em 0;
	position: absolute;
	text-decoration: none;
	text-align: center;
	width: 12%;
}
@media screen and (min-width: 768px) {
	.next {
		right: 42.8%;
		width: 7%;
	}
	.prev {
		left: 42.8%;
		width: 7%;
	}
}
@media screen and (min-width: 1024px) {
	.next {
		right: 0;
		width: 5%;
	}
	.prev {
		left:89.7%;
		width: 5%;
	}
}
/*
ABOUT
*/
#about {
	background: #fff;
}
#about button {
	margin-top: 2em;
}
#about footer {
	margin-top: 10vh;
}
/*
TOP-IMG
*/
.about-top-img {
	background-size: cover;
	background-image: url("../img/about-1.jpg");
	background-position: center;
	margin: 0;
	padding: 0;
	height: 80vh;
	width: 100%;
}
.menu-top-img {
	background-size: cover;
	background-image: url("../img/menu-1.jpg");
	background-position: center;
	margin: 0;
	padding: 0;
	height: 80vh;
	width: 100%;
}
.contact-top-img {
	background-size: cover;
	background-image: url("../img/contact.jpg");
	background-position: center;
	margin: 0;
	padding: 0;
	height: 80vh;
	width: 100%;
}
.services-top-img {
	background-size: cover;
	background-image: url("../img/service.jpg");
	background-position: center;
	margin: 0;
	padding: 0;
	height: 80vh;
	width: 100%;
}
.top-img-text {
	position: absolute;
	z-index: 2;
	display: inline-block;
	text-align: center;
	width: 100%;
	top: 38vh;
}

/*
MENU STYLES
*/
#menu {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #fff;
}

.menu-items {
	display: block;
	margin-top: 10vw;
}
.menu-items article {
	margin-bottom: 2em;
}

.menu-items h2 {
	margin-bottom: .2em;
}
.menu-h2 {
	padding-bottom: 1em;
}
.arepas {
	padding-top: 1em;

}

.menu_p1{

	height: 23px;

}


.red {
	text-align: left;
	color: #db493a;
	line-height: 1;
}
.menu-items p {
	line-height: 1.4;
	margin: 0;
	padding: 0;
}
@media screen and (min-width: 768px) {
	.menu-items {
		margin-top: 5vw;
	}
	.menu-items article {
		margin-bottom: 2em;
	}
	.menu-items h2 {
		margin-bottom: .2em;
	}
}
.image-block {
	position: relative;
	width: 100vw;
	display: block;
}
.one-image-block {
	line-height: 0;
	float: left;
	box-sizing: border-box;
}
.outline:focus {
	outline: none;
}
.one-image-block img {
	width: 50vw;
	height: auto;
	box-sizing: border-box;
}
.contact-call {
	background: #f9f9f9;
	display: block;
	padding: 20vw 0;
	width: 100vw;
}
@media screen and (min-width: 768px) {
	.one-image-block img {
		width: 33.3333333vw;
	}
	.contact-call {
		padding: 10vw 0;
	}
}



/*
CONTACT
*/
.contact-info {
	padding: 10vw 0;
}
.contact-info h2 {
	text-align: left;
}
.contact-info article {
	padding-bottom: 5vw;
}

#map {
   width: 100%;
   height: 400px;
   background-color: grey;
}
@media screen and (min-width: 768px) {
	.contact-info {
		padding: 3vw 0;
		margin-left: 15%;
		height: 70vh;
		width: 30%;
		float: left;
	}
	.contact-info article {
		padding-bottom: 3vw;
	}
  #map {
  	float: right;
	  width: 50vw;
	  height: 70vh;
	  background-color: grey;
	}
}
input {
	width: 100%;
	padding: 1em 0;
	margin-bottom: 1vw;
	border: 1px solid #ddd;
}
textarea {
	width: 100%;
	margin-bottom: 1vw;
	padding: 1em 0;
	border: 1px solid #ddd;
}
.contact-form h2 {
	margin-bottom: 2vw;
}
.contact-form {
	padding: 10vw 0;
}
.contact-form button {
	width: 100%;
	margin: 0;
}
::-webkit-input-placeholder { 
	padding-left: 1em;
    color: gray; text-overflow: ellipsis; 
    font-family: "Karla", sans-serif;
    font-size: 12px;
}
:-moz-placeholder { 
    color: gray; text-overflow: ellipsis; 
    font-family: "Karla", sans-serif;
    font-size: 12px;
    padding: 1em;
}
::-moz-placeholder { 
    color: gray; text-overflow: ellipsis; 
    font-family: "Karla", sans-serif;
    font-size: 12px;
    padding: 1em;
} /* For the future */
:-ms-input-placeholder { 
    color: gray; text-overflow: ellipsis; 
    font-family: "Karla", sans-serif;
    font-size: 12px;
    padding: 1em;
}
/*
CATERING
*/
.catering-info {
	padding: 2em 0 8em 0;
}
@media screen and (min-width: 768px) {
	.catering-info {
		padding: 2em 0 4em 0;
	}
}

/*
FOOTER
*/
footer {
	background: #282828;
	margin: 0;
	color: #fff;
	padding: 8em 0 8em 0;
	text-align: center;
}
footer h3 {
	margin: 0;
	padding: 0;
	line-height: 1;
}
footer ul {
	margin-top: 1em;
	list-style: none;
	padding: 0;
}
footer ul li a {
	opacity: .7;
	text-decoration: none;
}
footer ul li a:hover {
	opacity: 1;
}
@media screen and (min-width: 960px) {
	footer {
		width: 100%;
		padding: 4em 0 12em 0;
	}
	footer h1 {
		margin-top: 1rem;
		float: left;
		margin-left: 3rem;
	}
	footer h3 {
		margin: 0;
		padding: 0;
		line-height: 1;
	}
	footer ul {
		text-align: left;
		margin-right: 3em;
		float: right;
		vertical-align: top;
		list-style: none;
		padding: 0;
	}

}