h1, h2, h3, h4, h5, h6 {
  font-family: "Exo 2", sans-serif;
}

p, span, a, button, input {
  font-family: "Open Sans", sans-serif;
}

/*menu*/
.menu-container a {
  font-family: 'Anonymous Pro', monospace;
}


.menu-container {
  position: fixed;
  padding: 10px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100vw;
  border: 1px solid rgba(255, 255, 255, 0.19);
  background-color: rgba(51, 51, 51, 0.56);
  z-index: 11;

}
.menu-container a {
  color: #ffffff;
  text-decoration: none;
  font-size: 22px;
  margin: 0 10px;
}
/*end menu*/



.rub {
  border-bottom: 1px solid;
  line-height: 5px;
  display: inline-block;
  width: 0.4em;
}

#section0 {
  background: url("../images/pexels-jaymantri-5049_result.webp") no-repeat 50% 50% wheat;
}

.hero-info {
  display: flex;
  flex-flow: column nowrap;
  justify-items: center;
  align-items: center;
  justify-content: center;
  color: #fff;
  height: 100vh;
}
.hero-info h1 {
  font-size: 14em;
  margin: 10px;
  mix-blend-mode: overlay;
  border: 1px solid gray;
}
.hero-info p {
  mix-blend-mode: exclusion;
  font-size: 4em;
  margin: 40px;
}
.hero-info a {
  padding: 14px 44px;
  background-color: #fc7758;
  color: white;
  text-decoration: none;
  font-size: 1.9em;
  border-radius: 30px;
}
.hero-info a:hover {
  background-color: #d55f3e;
}

.first-tour {
  height: 100vh;
  background: url("../images/pexels-vincent-albos-2771470.webp") 50% 50% no-repeat;
  background-size: cover;
}

.tour-container {
  width: 40vw;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  flex-flow: column wrap;
  background-color: rgba(50, 51, 51, 0.22);
  color: white;
  padding: 20px;
  text-align: center;
}
.tour-container h2 {
  margin: 10px;
}
.tour-container h1 {
  margin: 10px;
}

.tour-icon {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding-top: 5%;
}
.tour-icon div {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  text-align: center;
}

.two-tour {
  height: 100vh;
  background: url("../images/pexels-anna-shvets-4015184.webp") 50% 50% no-repeat;
  background-size: cover;
}

.three-tour {
  height: 100vh;
  background: url("../images/pexels-anna-shvets-4014882.webp") 50% 90% no-repeat;
  background-size: cover;
}

.tours-info-container {
  height: 100vh;
  color: #484747;
}

.tours-info {
  display: grid;
  grid-template-columns: 3fr 5fr;
  grid-template-rows: 80vh;
}
.tours-info .contact {
  background: url("../images/contact.webp") no-repeat;
  background-size: cover;
  padding: 50px;
}
.tours-info .contact h1 {
  border-bottom: 5px solid #fa3e3e;
  display: inline;
  padding-right: 25px;
}
.tours-info .contact .lorem {
  margin-top: 50px;
}
.tours-info .contact div {
  margin-top: 50px;
}
.tours-info .contact form {
  margin-top: 50px;
}
.tours-info .contact form input {
  border: none;
  border-bottom: 1px solid #757575;
  padding: 10px 15px;
  background-color: #ffefe9;
}
.tours-info .contact form input:focus {
  border: none;
  outline: none;
}
.tours-info .contact form button {
  background-color: #fa3e3e;
  color: white;
  border: 0;
  padding: 10px 15px;
}
.tours-info .maps {
  background: url("../images/maps.webp") 70% 50% no-repeat;
}

@-webkit-keyframes pound {
  to {
    transform: scale(1.1);
  }
}
@keyframes pound {
  to {
    transform: scale(1.1);
  }
}
footer {
  color: #484747;
  text-align: center;
}
footer a {
  color: #484747;
}
footer > p > .heart {
  fill: #fa3e3e;
  margin: 0 0.5rem;
  width: 1rem;
  animation: pound 0.35s infinite alternate;
  -webkit-animation: pound 0.35s infinite alternate;
}

@media (max-width: 1240px) {
  .tour-container {
    width: 60vw;
  }

  .contact form {
    display: flex;
  }
  .contact form input {
    padding: 0 0;
    width: 160px;
  }
}
@media (max-width: 860px) {
  .hero-info h1 {
    font-size: 11em;
  }
  .hero-info p {
    font-size: 2.5em;
  }

  .tour-container {
    width: 70vw;
  }
}
@media (max-width: 640px) {
  .hero-info h1 {
    font-size: 8em;
  }
  .hero-info p {
    font-size: 1.5em;
  }

  .tour-container {
    width: 95vw;
  }

  .tour-icon {
    display: none;
  }
  .tour-icon div img {
    display: none;
  }

  .tours-info {
    grid-template-columns: 1fr;
  }
  .tours-info .contact form {
    display: flex;
  }
  .tours-info .contact form input {
    padding: 0 0;
    width: 160px;
  }
  .tours-info .maps {
    display: none;
  }
}
@media (max-width: 400px) {
  .tour-container {
    padding: 5px;
  }
  .tour-container h1 {
    margin: 5px 0;
    font-size: 1.5em;
  }
  .tour-container p {
    margin: 5px 0;
  }

  .hero-info h1 {
    font-size: 6em;
  }
  .hero-info p {
    font-size: 1.2em;
  }
}

/*# sourceMappingURL=main.css.map */