/* Box Model Hack */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  background-size:cover;
  border: none;
}
button{
  cursor: pointer;
}

/* Clear fix hack */
.clearfix:after {
     content: ".";
     display: block;
     clear: both;
     visibility: hidden;
     line-height: 0;
     height: 0;
}

.clear {
	clear: both;
}

/******************************************
/* BASE STYLES
/*******************************************/
.promo{
  display: flex;
  justify-content: space-around;
  background: #C4D1F9;
  padding: 1% 0;
  align-self: center;
}
.promo span{
  font-weight: bold;
}
nav{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1%;
  padding:1.5% 0;
  background: #FFFFFF;
  width: 100%;
}

.nav-left{
  margin-left: 5%;
}
.nav-left a{
  justify-content: space-around;
}
.nav-right{
  margin-right: 5%;
  width: 33%;
  justify-content: space-between;
}
.nav-right a{
  border-bottom: #35383D solid 1px; 
}

nav a{
  text-decoration: none;
  color: #35383D;
}
.header{
  width: 100%;
  position: relative;
}
.order{
  background: #4c753f;
  border-radius: 20px;
  cursor: pointer;
  padding: 2% 5%;
}

nav, .main{
  background-image:url(/assets/mainbg.jpg);
}
nav{
  background: white;
}
.nav-right{
  display: flex;
  align-items: center;
}
.search-box{
  display: inline-block;
  background: #efefef;
  width: 200px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 0 15px;

}
.search-box input{
  /* width: 100%; */
  background: transparent;
  padding: 10px;
  outline: none;
  border: 0;
}
.main{
  height: 525px;
}
.yp2{
  display: flex;
  background: rgba(0, 0, 0, .3);
  width: 30%;
  height: 480px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.yp3{
  display: flex;
  width: 30%;
  height: 480px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.yp2text {
  color: white;
  width: 60%;
}
.yp2-order{
  width: 60%;
  padding: 5% 10%;
  color: #4C753F;
  background: white;
  border-radius: 50px;
  font-size: 20px;
}
.yp2-img img{
height: 250px;
width: 300px;
}
.main-buttons{
  display: flex;
  align-items: center;
  justify-content: center;

}

.main-buttons button{
  background: #4C753F;
  color: white;
  padding: 1% 3%;
}

.food-option{
  display:flex;
  border-radius: 10px;
  height: 150px;
  width: 35%;
  margin-right: 15px;
  padding-top: 10px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  background-color: black;
}
.food-option section{
  display: flex;
  justify-content: start;
  color: white;
  margin-left: 2%;
  font-size: 14px;
}
.food-option span{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #4C753F;
  color: white;
  font-size: 15px;
  padding: 10px 0;
  cursor: pointer;
}
.love{
  margin-left: 5%;
  padding-bottom: 2%;
  margin-bottom: 1%;
}
.love h2{
  display: flex;
  width: 100%;
  height: 15px;
  margin: 2% 0;
}
.food-row{
  display: flex;
}
.soup{
  background-image: linear-gradient(transparent,rgba(0,0,0,1)),url(/assets/soup.jpg);
}
.burger{
  background-image: linear-gradient(transparent,rgba(0,0,0,1)),url(/assets/salad.jpg);

}
.salad{
  background-image: linear-gradient(transparent,rgba(0,0,0,1)),url(/assets/burger.jpg);

}
.mc{
  background-image: linear-gradient(transparent,rgba(0,0,0,1)),url(/assets/mac&cheese.jpg);
}


.black{
  background-color: black;
  height: 1000px;
}
.nav-btn{
  display: flex;
  border-radius: 50%;
  padding: .5% .5%;
  position: static;
  background: transparent;
  height: 30px;
  margin: 5% 0;
  color: #4C753F;
  border: #4c753f solid 2px;
}

.ads span{
  font-size: 10px;
}
.ads h3{
  font-size: 25px;
}

/* .ads div{
  display: flex;
  background: rgba(0, 0, 0, .3);
  height: 480px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}
.ads span,p {
  color: white;
  width: 60%;
}

.ads button{
  width: 60%;
  padding: 5% 10%;
  color: #4C753F;
  background: white;
  border-radius: 50px;
  font-size: 20px;
} */

.bg1{
  background-image: url(/assets/exlusivebg.jpg)!important;
  height: 500px;
}
.ads-sec{
  display: flex;
  background: rgba(0, 0, 0, .3);
  width: 30%;
  height: 500px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.adstext {
  color: white;
  width: 60%;
}
.ads-order{
  width: 60%;
  padding: 5% 10%;
  color: #4C753F;
  background: white;
  border-radius: 50px;
  font-size: 20px;
}
.bg2{
  background-image: url(/assets/bg2.jpg);
}
.bg3{
  background-image: url(/assets/bg3.jpg);
}
.bg4{
  background-image: url(/assets/bg4.jpg);
}
.bg5{
  background-image: url(/assets/bg5.jpg);
}
.bg6{
  background-image: url(/assets/bg6.jpg);
}
.bg7{
  background-image: url(/assets/bg7.jpg);
}
.stuff{
  display: flex;
  width: 33%;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  margin: 5% 0;
}
.stuff div{
  width: 25%;
}
.stuff h3{
  font-size: 25px;
  color: #35383D;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stuff p{
  color: #6F6F74;
  display: flex;
  align-items: center;
  justify-content: center;  
  text-align: center;
}

.stuff img{
  border-radius: 50%;
  width: 250px;
  height: 250px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.footer-top{
  display: flex;
  height: 400px;
  justify-content: space-around;
  width: 80%;
  margin-left: 3%;
  padding-top: 1%;
  border-bottom: 2px solid darkgreen;
}
.footer-top a{
  display: flex;
}
.footer-left a{
  height:50px;
  font-size: 30px;
  text-decoration: none;
}

.footer-center a ,.footer-right a{
  height: 30px;
  text-decoration: none;
}
.footer-left a,.footer-center a,.footer-right a{
  margin-bottom: 10%;
  color: #F4FFFF;
}
.footer-bg{
  background-color: #4C753F;
}

.footer-bottom{
  display: flex;
  font-size: 15px;
  color: #FFFFFF;
  background: #4c753f;
  justify-content: space-between;
}
.footer-bottom div{
  margin: 10%;
}
.footer-bottom-left,.footer-bottom-right{
  margin: 5% 0;
}
.footer-bottom a{
  color: #FFFFFF;
}
.copyright{
width: 100%;
background-color: #4C753F;
color: #FFFFFF;
padding-left: 10%;
padding-bottom: 5%;
}
.footer-bottom-left p,.footer-bottom-right p{
  margin-bottom: 50px;
}
.footer-bottom-left a{
  text-decoration: none;
  font-size: 30px;
}
.main h3{
  font-size: 40px;
}
.copyright a{
  color: #FFFFFF;
}