@import url(fonts.css);

body {
  width: 100%;
  max-width: 1900px;
  min-width: 320px;
  min-height: 320px;
  margin: 0;
  padding: 0;
  font-family: 'NotoSans', 'Arial', sans-serif;
  background-color: #F2F0F0;
}

/* 
==========================================================
header
==========================================================
*/

.top-line,
.bottom-line { 
  width: 100%;
  height: 3vh;
  background-color: #EB6C10;
  transition: all linear 0.2s ;
}

.top-line.line-scrolled {
  height: 0;
  transition: none ;
}

header {
  position: fixed;
  z-index: 1;
  width: 60%;
  height: 123px;
  padding: 0 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #F2F0F0;
}

header.scrolled {
  border-bottom: 2px solid #555;
  border-radius: 0 0 50px 50px;
}

.header-logo {
  margin-left: -4%;
  -ms-transform: scale(0.75, 0.75);
  -webkit-transform: scale(0.75, 0.75);
  transform: scale(0.75, 0.75);
}

.navigation.desktop  a {
  padding: 6px 14px;
  font: 18px 'NotoSans', 'Arial', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #85423f;
  border-radius: 7px;
  transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out;
}

.navigation.desktop  a:hover {
  color: white;
  background-color: #EB6C10;
}

#menuTrigger { display: none; }

.banner {
  height: 97vh;
  background-image: url(../img/wrapper_bg.jpg);
  background-size: cover;
}

/* 
==========================================================
Main content wrapper
about-us
==========================================================
*/

.main-content-wrapper {
  width: 60%;
  padding: 0 20%;
}

#aboutUs,
.best-choice,
.news {
  display: flex;
  justify-content: space-between;
  margin-top: 50px;
}

.welcome,
.features,
.garnish,
.dessert {
  width: 48%;
  border-top: 2px dotted #B3ADAD;
  border-bottom: 2px dotted #B3ADAD;
}

h4 {
  width: 100%;
  margin: 40px 0 30px 0;
  font: 25px 'Times New Roman', serif;
  color: #5d0400;
}


.cheaf {
  float: left;
  width: 152px;
  height: 152px;
  margin: 0 40px 40px 0;
  background-image: url(../img/cheaf.jpg);
  background-position: top;
  border: 7px solid white;
  border-radius: 50%;
  box-shadow: 0 0 2px grey;
}


.welcome p,
.features ul li {
  font: 14px 'Arial', sans-serif;
  line-height: 20px;
  list-style-type: none;
  color: black;
}


.welcome p a {
  text-decoration: none;
  color: #E6A7A5;
}

.welcome p a:hover {
  color: #85423f;
}

.more-button {
  width: 63px;
  height: 27px;
  font: 12px 'Arial', sans-serif;
  text-transform: uppercase;
  color: white;
  background-color: #EB6C10;
  border: none;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

.more-button:hover,
.subscribe:hover {
  background: #ff7b00;
  transition: 0.2s;
}

.features ul {
  padding: 0;
  margin-bottom: 40px;
}

.features ul li:before {
  padding-right: 7px;
  color: #6E0400;
  content: "▪";
}

/* 
==========================================================
best-choice
==========================================================
*/

.garnish,
.dessert {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border-top: none;
}

.dish-block,
.follow-us,
.email-updates {
  width: 48%;
  text-decoration: none;
  padding-bottom: 15px;
}

.dish {
  width: 94%;
  height: 141px;
  border: 7px solid white;
  box-shadow: 0 0 2px lightgrey;
}

.image-dish {
  width: 100%;
  height: 100%;
  border: 1px solid rgb(235, 235, 235);
  margin: -1px 0 0 -1px
}

.dish-block p {
  text-decoration: none;
  font: 12px 'Arial', sans-serif;
  text-transform: uppercase;
  text-align: left;
  line-height: 20px;
  color: #000000;
}

.dish-block p span {
  text-transform: none;
}

.price {
  width: 42px;
  height: 34px;
  background-color: #EB6C10;
  border-radius: 4px;
  font: 20px 'Lobster';
  color: white;
  text-align: center;
  padding: 5px;
  margin-bottom: 40px;
}

/* 
==========================================================
news
==========================================================
*/

.news {
  display: flex;
  justify-content: space-between;
}

h5 {
  width: 100%;
  margin: 40px 0 30px 0;
  font: 20px 'Times New Roman', serif;
  color: #5d0400;
}

.faa {
  display: inline-block;
  width: 30px;
  height: 25px;
  margin: 0 6px 25px 0;
  padding-top: 5px;
  font: 20px 'Times New Roman', serif;
  text-align: center;
  color: white;
  background-color: #EB6C10;
  border-radius: 4px;
}

.fa-wifi {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-right: 3px;
  z-index: 0;
}

.follow-us .second-menu  {
  display: flex;
  justify-content: space-between;
  padding: 0;
  width: 100%;
  list-style: none;
  margin-bottom: 40px;
}

.follow-us .second-menu a {
  font: 12px 'NotoSans', 'Arial', sans-serif;
  text-transform: uppercase;
  text-decoration: none;
  color: #85423f;
}

.follow-us .second-menu a:hover,
.bottom-line p a:hover {
  text-decoration: underline;
}

.email-updates {
  margin-bottom: 40px;
}

.email-updates p {
  margin-bottom: 28px;
  font: 12px 'Arial', sans-serif;
  line-height: 16px;
  color: black;
}

#email {
  width: 210px;
  height: 30px;
  padding-left: 10px;
  font: 12px 'Arial', sans-serif;
  color: #D9D8D8;
  background-color: white;
  border: 1px solid #D9D8D8;
  border-radius: 4px;
}

#email:-webkit-input-placeholder {
  color: #D9D8D8;
}

#email:focus {
  color: black;
  border: 1px solid #D9D8D8;
  outline: none;
}

.subscribe {
  width: 85px;
  height: 34px;
  margin: 2px 0 0 11px;
  font: 12px 'Arial', sans-serif;
  color: white;
  background-color: #EB6C10;
  border: none;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}

.bottom-line {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 108px;
}

.bottom-line p {
  font: 12px 'Arial', sans-serif;
  color: white;
}

.bottom-line p a {
  text-decoration: none;
  color: white;
}

/* 
==========================================================
Properties for the pop-up  'MORE' and 'Sub' windows
==========================================================
*/

.popup-window-wrapper {
  display: none;
}

.popup-window-wrapper.more,
.popup-window-wrapper.sub {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

.popup-window-wrapper.more .popup-window,
.popup-window-wrapper.sub .popup-window {
  position: fixed;
  bottom: 0;
  width: 100%;
  font: 16px 'Arial', serif;
  line-height: 20px;
  text-align: justify;
  color: #85423f;
  background-color: #F2F0F0;
  -webkit-animation-name: slideIn;
  -webkit-animation-duration: 0.4s;
  animation-name: slideIn;
  animation-duration: 0.4s;
  overflow: auto;
}

.popup-window-wrapper.sub .popup-window {
  font: 35px 'Arial', serif;
}

.sub-p {
  display: none;
}


.popup-window-wrapper.sub .popup-window .top-border h3 { display: none; }

@-webkit-keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0
  }
  to {
    bottom: 0;
    opacity: 1
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

.top-border,
.bottom-border {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 98%;
  height: 30px;
  padding: 1%;
  font: 20px 'Arial', serif;
  color: white;
  text-transform: uppercase;
  background-color: #EB6C10;
}

.popup-window-wrapper.sub .popup-window .top-border{
  justify-content: flex-end;
}

.btn-close {
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.btn-close:hover {
  color: rgb(80, 80, 80);
}

.popup-window-wrapper.more .popup-window p {
  width: 98%;
  margin: 0;
  padding: 1%;
}

.popup-window-wrapper.sub .popup-window p {
  text-align: center;
  text-transform: uppercase;
}