/*
0px - 600px : Phone
600px - 900px : Tablet Porrtrait
900px - 1200px : Tablet landscape
1200px - 1800px : is where normal styles apply
1800px + : BIG screen desktop
*/
/*@mixin responded-phone {
    @media (max-width: 600px) { @content };}*/
/*$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

Order; Base + typograph > general layout + grid > page layout.

NOTE! In media query rem & em units will not get effected by font-size set up in html.(in this case is 10px = 62% of the standard web default) Beside em unit is prove to be the most affective when it comes to media query. So we use em here to set up instead of px or rem!
1rem = 1em = 16px So the calc below is px divided by em
*/
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-10rem);
  }
  80% {
    transform: translateX(1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(10rem);
  }
  80% {
    transform: translateX(-1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes moveInBottom {
  0% {
    opacity: 0;
    transform: translateY(3rem);
  }
  100% {
    opacity: 1;
    transform: translate(0);
  }
}
@keyframes floatingFox {
  0% {
    transform: translate(0);
  }
  50% {
    transform: translateY(0.5rem);
  }
  100% {
    transform: translate(0);
  }
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  /*the normal way of writing media query
    @media (max-width) {
        fon-size: bla bla;
        and the rest of the world.
        you can set up mixing instead and come back to set up with
        @include
    */
}
@media only screen and (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media only screen and (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}
@media only screen and (max-width: 37.5em) {
  html {
    font-size: 37.5%;
  }
}
@media only screen and (min-width: 112.5em) {
  html {
    font-size: 75%;
  }
}

body {
  box-sizing: border-box;
  padding: 3rem;
}
@media only screen and (max-width: 56.25em) {
  body {
    padding: 0;
  }
}

::selection {
  background-color: #9e841c;
  color: #fff;
}

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #25231b;
}

.heading-primary {
  color: #fff;
  text-transform: uppercase;
  /*using magin-bottom from h1 (heading prime) to create space betwen heading and the button below */
  margin-bottom: 6rem;
  backface-visibility: hidden;
}
.heading-primary--main {
  display: block;
  font-size: 6rem;
  font-weight: 550;
  letter-spacing: 3.7rem;
  animation: moveInLeft 5s ease-out;
}
@media only screen and (max-width: 37.5em) {
  .heading-primary--main {
    letter-spacing: 1rem;
    font-family: 5rem;
  }
}
.heading-primary--sub {
  display: block;
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: 1.1rem;
  animation: moveInRight 5s ease-out;
}
@media only screen and (max-width: 37.5em) {
  .heading-primary--sub {
    letter-spacing: 1rem;
  }
}

.heading-secondary {
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  background-image: linear-gradient(to left, #9e841c, #777);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 0.2rem;
  transition: all 0.5s;
}
@media only screen and (max-width: 56.25em) {
  .heading-secondary {
    font-size: 3rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .heading-secondary {
    font-size: 2.5rem;
  }
}
.heading-secondary:hover {
  transform: skewY(1deg) skewX(15deg) scale(1.1);
  text-shadow: 0.5rem 1rem 2rem rgba(9, 9, 9, 0.2);
}

.heading-tertiary {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
}

.paragraph {
  font-size: 1.6rem;
}
.paragraph:not(:last-child) {
  margin-bottom: 3rem;
}

.u-center-text {
  text-align: center;
}

.u-margin-bottom-small {
  margin-bottom: 1.5rem;
}

.u-margin-bottom-medium {
  margin-bottom: 4rem;
}
@media only screen and (max-width: 56.25em) {
  .u-margin-bottom-medium {
    margin-bottom: 3rem;
  }
}

.u-margin-bottom-big {
  margin-bottom: 8rem;
}
@media only screen and (max-width: 56.25em) {
  .u-margin-bottom-big {
    margin-bottom: 5rem;
  }
}

.u-margin-top-big {
  margin-top: 8rem;
}

.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  filter: opacity(0.2);
  overflow: hidden;
}
.bg-video__content {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.btn, .btn:link, .btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 3rem;
  display: inline-block;
  border-radius: 10rem;
  transition: all 0.2s;
  position: relative;
  font-size: 1.5rem;
  border: none;
  cursor: pointer;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(9, 9, 9, 0.3);
}
.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
}
.btn:active {
  transform: translateY(-1px);
  box-shadow: 0 0.5rem 1rem rgba(9, 9, 9, 0.7);
}
.btn--white {
  background-color: #fff;
  color: #25231b;
}
.btn--white::after {
  background-color: #fff;
}
.btn--green {
  background-color: #28b485;
  color: #fff;
}
.btn--green::after {
  background-color: #7ed56f;
}
.btn::after, .btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  /*z-index is sued to declear a property of stacking contexts
  below is to solve the layer on the same absolute spot
  in this case 1 means it lays on top by 1 layer
  putting -1 will put it on 1 layer below*/
  z-index: -1;
  transition: all 0.5s;
}
.btn--animated {
  animation: moveInBottom 5s ease-in-out 2s, floatingFox 4s 2s ease-in-out infinite;
  animation-fill-mode: backwards;
}

.btn-text:link, .btn-text:visited {
  font-size: 1.6rem;
  color: #25231b;
  display: inline-block;
  text-decoration: none;
  border-bottom: 1px solid #9e841c;
  padding: 3px;
}
.btn-text:hover {
  background-image: linear-gradient(to left, #9e841c, #5f510e);
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(9, 9, 9, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 1rem 2rem rgba(9, 9, 9, 0.3);
}
.btn-text:active {
  transform: translateY(1px);
  box-shadow: 0 0.5rem 1rem rgba(9, 9, 9, 0.8);
}

.card {
  perspective: 150rem;
  position: relative;
  height: 52rem;
}
.card__side {
  height: 52rem;
  transition: all 0.8s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(9, 9, 9, 0.15);
  backface-visibility: hidden;
}
.card__side--front {
  background-color: #f7f7f7;
}
.card__side--back {
  transform: rotateY(180deg);
}
.card__side--back-1 {
  background-image: linear-gradient(to right bottom, #ffb900, #ff7730);
}
.card__side--back-2 {
  background-image: linear-gradient(to right bottom, #7ed56f, #28b485);
}
.card__side--back-3 {
  background-image: linear-gradient(to right bottom, #2998ff, #5643fa);
}
.card:hover .card__side--front {
  transform: rotateY(-180deg);
}
.card:hover .card__side--back {
  transform: rotateY(0deg);
}
.card__picture {
  background-size: cover;
  height: 23rem;
  background-blend-mode: color;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 83%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 83%, 0 100%);
}
.card__picture--1 {
  background-image: linear-gradient(to right bottom, #ffb900, #ff7730), url(../img/nat-5.jpg);
}
.card__picture--2 {
  background-image: linear-gradient(to right bottom, #7ed56f, #28b485), url(../img/nat-6.jpg);
}
.card__picture--3 {
  background-image: linear-gradient(to right bottom, #2998ff, #5643fa), url(../img/nat-7.jpg);
}
.card__heading {
  font-size: 2.8rem;
  font-weight: 350;
  text-transform: uppercase;
  text-align: right;
  color: #fff;
  position: absolute;
  top: 15rem;
  right: 0;
  width: 75%;
}
.card__heading-span--1 {
  background-image: linear-gradient(to left bottom, rgba(255, 185, 0, 0.85), #ff7730);
}
.card__heading-span--2 {
  background-image: linear-gradient(to left bottom, rgba(126, 213, 111, 0.85), #28b485);
}
.card__heading-span--3 {
  background-image: linear-gradient(to left bottom, rgba(41, 152, 255, 0.85), #5643fa);
}
.card__details {
  padding: 1rem 3rem;
}
.card__details ul {
  list-style: none;
  width: 80%;
  margin: 0 auto;
}
.card__details ul li {
  text-align: center;
  font-size: 1.5rem;
  padding: 1rem;
}
.card__details ul li:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.card__cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
}
.card__price-box {
  text-align: center;
  color: #fff;
  margin-bottom: 8rem;
}
.card__price-only {
  font-size: 1.4rem;
  text-transform: uppercase;
}
.card__price-value {
  font-size: 6rem;
  font-weight: 100;
}
@media only screen and (max-width: 56.25em) {
  .card {
    height: auto;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 1.5rem 4rem rgba(9, 9, 9, 0.15);
  }
  .card__side {
    height: auto;
    transition: all 0.8s ease;
    position: relative;
    box-shadow: none;
  }
  .card__side--back {
    transform: rotateY(0);
    clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  }
  .card:hover .card__side--front {
    transform: rotateY(0);
  }
  .card__cta {
    position: relative;
    top: 0;
    left: 0;
    transform: translate(0);
    width: 100%;
    padding: 7rem 4rem 4rem 4rem;
  }
  .card__price-box {
    margin-bottom: 3rem;
  }
  .card__price-value {
    font-size: 4rem;
  }
}

.composition {
  position: relative;
}
.composition__photo {
  width: 55%;
  box-shadow: 0 1.5rem 4rem rgba(9, 9, 9, 0.7);
  border-radius: 2px;
  position: absolute;
  z-index: 10;
  transition: all 0.5s;
}
@media only screen and (max-width: 56.25em) {
  .composition__photo {
    float: left;
    position: relative;
    width: 33.333333%;
    box-shadow: 0 1.5rem 3rem rgba(9, 9, 9, 0.4);
  }
}
.composition__photo--p1 {
  left: 0;
  top: -2rem;
}
@media only screen and (max-width: 56.25em) {
  .composition__photo--p1 {
    top: 0;
    transform: scale(1.2);
  }
}
.composition__photo--p2 {
  right: 0;
  top: 2rem;
}
@media only screen and (max-width: 56.25em) {
  .composition__photo--p2 {
    top: -1rem;
    transform: scale(1.3);
    z-index: 100;
  }
}
.composition__photo--p3 {
  left: 20%;
  top: 10rem;
}
@media only screen and (max-width: 56.25em) {
  .composition__photo--p3 {
    top: 1rem;
    left: 0;
    transform: scale(1.1);
  }
}
.composition__photo:hover {
  outline: 0.2rem solid #9e841c;
  transform: scale(1.5) translateY(-0.5rem);
  box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.6);
  z-index: 20;
}
.composition:hover .composition__photo:not(:hover) {
  transform: scale(0.95);
}

.feature-box {
  background-color: rgba(255, 255, 255, 0.9);
  font-size: 1.5rem;
  padding: 2.5rem;
  text-align: center;
  border-radius: 0.3rem;
  box-shadow: 0 1.5rem 4rem rgba(9, 9, 9, 0.25);
  transition: transform 0.8s;
}
@media only screen and (max-width: 56.25em) {
  .feature-box {
    padding: 2rem;
  }
}
.feature-box__icon {
  font-size: 6rem;
  margin-bottom: 0.5rem;
  background-image: linear-gradient(to left, #9e841c, #777);
  -webkit-background-clip: text;
  color: transparent;
}
@media only screen and (max-width: 56.25em) {
  .feature-box {
    margin-bottom: 0;
  }
}
.feature-box:hover {
  outline: 0.2rem solid #9e841c;
  transform: translateY(-1.5rem) scale(1.15);
}

.form__group {
  margin: 0.5rem;
}
.form__input {
  font-size: 1.5rem;
  font-family: inherit;
  color: inherit;
  padding: 1rem 2rem;
  border-radius: 2px;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-bottom: 3px solid transparent;
  width: 90%;
  display: block;
  transition: all 0.5s;
}
@media only screen and (max-width: 56.25em) {
  .form__input {
    width: 90%;
  }
}
.form__input:focus {
  outline: none;
  box-shadow: 0 1rem 2rem rgba(9, 9, 9, 0.3);
  border-bottom: 5px solid #7ed56f;
}
.form__input:focus:invalid {
  border-bottom: 5px solid #ff7730;
}
.form__input::-webkit-input-placeholder {
  color: #999;
}
.form__label {
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 0.5rem;
  margin-top: 0.7rem;
  display: block;
  transition: all 0.3s;
}
.form__input:placeholder-shown + .form__label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4rem);
}
.form__radio-group {
  width: 50%;
  display: inline-block;
  margin-top: 1rem;
}
@media only screen and (max-width: 56.25em) {
  .form__radio-group {
    width: 90%;
    margin-bottom: 1rem;
  }
}
.form__radio-input {
  display: none;
}
.form__radio-label {
  font-size: 1.6rem;
  cursor: pointer;
  position: relative;
  padding-left: 4.5rem;
}
.form__radio-button {
  height: 3rem;
  width: 3rem;
  border: 5px solid #7ed56f;
  border-radius: 50%;
  display: inline-block;
  position: absolute;
  left: 0;
  top: -0.4rem;
}
.form__radio-button::after {
  content: "";
  display: block;
  height: 1.3rem;
  width: 1.3rem;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #55c57a;
  opacity: 0;
  transition: opacity 0.2s;
}
.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
  opacity: 1;
}
.form__btn {
  width: 50%;
  margin-top: 2rem;
}

.story {
  width: 75%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem rgba(9, 9, 9, 0.2);
  background-color: #fff;
  border-radius: 0.3rem;
  padding: 6rem;
  padding-left: 9rem;
  font-size: 1.6rem;
  transform: skewX(-12deg);
}
@media only screen and (max-width: 56.25em) {
  .story {
    width: 100%;
    padding: 4rem;
    padding-left: 6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .story {
    transform: skewX(0);
  }
}
.story__shape {
  width: 15rem;
  height: 15rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transform: translateX(-3rem) skewX(12deg);
  position: relative;
}
@media only screen and (max-width: 37.5em) {
  .story__shape {
    transform: translateX(-3rem) skewY(0);
  }
}
.story__img {
  height: 100%;
}
.story__text {
  transform: skewX(12deg);
}
@media only screen and (max-width: 37.5em) {
  .story__text {
    transform: skewY(0);
  }
}
.story__caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 20%);
  color: #fff;
  text-transform: uppercase;
  font-size: 1.7rem;
  text-align: center;
  opacity: 0;
  transition: all 0.5s;
  backface-visibility: hidden;
}
.story:hover .story__caption {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.story:hover .story__img {
  filter: blur(5px) brightness(75%);
}

.popup {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(9, 9, 9, 0.3);
  z-index: 5000;
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s;
}
.popup__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  background-color: #fff;
  box-shadow: 0 2rem 4rem rgba(9, 9, 9, 0.8);
  border-radius: 3px;
  display: table;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.25);
  transition: all 0.4s 0.2s;
}
@media only screen and (max-width: 75em) {
  .popup__content {
    width: 90%;
    padding: 10rem 0 0 5rem;
    background-color: rgba(255, 185, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    transition: all 0.4s 0.2s;
  }
}
@media only screen and (max-width: 56.25em) {
  .popup__content {
    width: 90%;
    padding: 10rem 0 0 5rem;
    background-color: rgba(126, 213, 111, 0.5);
    overflow: hidden;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
    transition: all 0.4s 0.2s;
  }
}
.popup__left {
  width: 33.333333%;
  display: table-cell;
}
@media only screen and (max-width: 75em) {
  .popup__left {
    width: 33.333333%;
    display: table-cell;
  }
}
@media only screen and (max-width: 56.25em) {
  .popup__left {
    width: 33.333333%;
    display: table-cell;
  }
}
.popup__right {
  width: 66.6666667%;
  display: table-cell;
  vertical-align: middle;
  padding: 1.5rem 6rem;
}
@media only screen and (max-width: 75em) {
  .popup__right {
    width: 66.6666667%;
    display: table-cell;
    vertical-align: middle;
    padding: 2rem 4rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .popup__right {
    width: 66.6666667%;
    display: table-cell;
    vertical-align: middle;
    padding: 2rem 4rem;
  }
}
.popup__img {
  display: block;
  width: 100%;
}
.popup__text {
  font-size: 1.4rem;
  margin-bottom: 4rem;
  column-count: 2;
  column-gap: 6rem;
  column-rule: 1px solid #777;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.popup:target {
  opacity: 1;
  visibility: visible;
}
.popup:target .popup__content {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.popup__close:link, .popup__close:visited {
  color: #25231b;
  position: absolute;
  top: 2.5rem;
  right: 6rem;
  font-size: 3rem;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s;
  line-height: 1;
}
.popup__close:hover {
  color: #55c57a;
}

.row {
  max-width: 114rem;
  margin: 0 auto;
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
@media only screen and (max-width: 56.25em) {
  .row:not(:last-child) {
    margin-bottom: 6rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .row {
    max-width: 50rem;
    padding: 0 3rem;
  }
}
.row::after {
  content: "";
  display: table;
  clear: both;
}
.row [class^=col-] {
  float: left;
}
.row [class^=col-]:not(:last-child) {
  margin-right: 6rem;
}
@media only screen and (max-width: 56.25em) {
  .row [class^=col-]:not(:last-child) {
    margin-right: 0;
    margin-bottom: 6rem;
  }
}
@media only screen and (max-width: 56.25em) {
  .row [class^=col-] {
    width: 100% !important;
  }
}
.row .col-1-of-2 {
  width: calc((100% - 6rem) / 2);
}
.row .col-1-of-3 {
  width: calc(1 * (100% - 2 * 6rem) / 3);
}
.row .col-2-of-3 {
  width: calc(2 * (100% - 2 * 6rem) / 3 + 6rem);
}
.row .col-1-of-4 {
  width: calc((100% - 3 * 6rem) / 4);
}
.row .col-2-of-4 {
  width: calc(2 * (100% - 3 * 6rem) / 4 + 6rem);
}
.row .col-3-of-4 {
  width: calc(3 * (100% - 3 * 6rem) / 4 + 2 * 6rem);
}

.navigation__checkbox {
  display: none;
}
.navigation__button {
  background-image: radial-gradient(#e4bf2c, #9e841c);
  height: 7rem;
  width: 7rem;
  position: fixed;
  top: 6rem;
  right: 8rem;
  border-radius: 50%;
  z-index: 1000;
  box-shadow: 0 1rem 3rem rgba(9, 9, 9, 0.3);
  text-align: center;
  cursor: pointer;
}
@media only screen and (max-width: 56.25em) {
  .navigation__button {
    top: 4rem;
    right: 6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .navigation__button {
    top: 3rem;
    right: 6rem;
  }
}
.navigation__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 6.5rem;
  right: 8rem;
  background-image: radial-gradient(#e4bf2c, #ffb900, #9e841c);
  z-index: 500;
  transition: all 0.8s cubic-bezier(0.5, 1, 0.89, 1);
}
@media only screen and (max-width: 56.25em) {
  .navigation__background {
    top: 4rem;
    right: 6rem;
  }
}
@media only screen and (max-width: 37.5em) {
  .navigation__background {
    top: 3rem;
    right: 6rem;
  }
}
.navigation__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 501;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.34, 0.265, 0.265, 1.88);
}
.navigation__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%;
}
.navigation__item {
  margin: 1rem;
}
.navigation__link:link, .navigation__link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 400;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 0%, transparent 50%, #9e841c 50%);
  background-size: 220%;
  transition: all 0.4s;
}
.navigation__link:link span, .navigation__link:visited span {
  margin-right: 1rem;
  display: inline-block;
  font-weight: 400;
}
.navigation__link:hover, .navigation__link:active {
  background-position: 100%;
  transform: translateX(4rem);
  color: #eee;
}
.navigation__checkbox:checked ~ .navigation__background {
  transform: scale(80);
}
.navigation__checkbox:checked ~ .navigation__nav {
  opacity: 1;
  width: 100%;
}
.navigation__icon {
  position: relative;
  margin-top: 3.3rem;
}
.navigation__icon, .navigation__icon::before, .navigation__icon::after {
  width: 3rem;
  height: 2px;
  background-color: #fff;
  display: inline-block;
}
.navigation__icon::before, .navigation__icon::after {
  content: "";
  position: absolute;
  left: 0;
  transition: all 0.6s;
}
.navigation__icon::before {
  top: -0.8rem;
}
.navigation__icon::after {
  top: 0.8rem;
}
.navigation__button:hover .navigation__icon::before {
  top: -1.1rem;
}
.navigation__button:hover .navigation__icon::after {
  top: 1.1rem;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon {
  background-color: transparent;
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::before {
  top: 0;
  transform: rotate(315deg);
}
.navigation__checkbox:checked + .navigation__button .navigation__icon::after {
  top: 0;
  transform: rotate(-315deg);
}

.header {
  height: 95vh;
  background-image: linear-gradient(to left bottom, rgba(158, 132, 28, 0.7), rgba(37, 35, 27, 0.2), rgba(9, 9, 9, 0)), url(../img/hero-small.jpg);
  background-size: cover;
  background-position: top;
  position: relative;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 80vh, 0 100%);
}
@media only screen and (min-resolution: 192dpi) and (min-width: 37.5em), (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em), (min-width: 125em) {
  .header {
    background-image: linear-gradient(to left bottom, rgba(85, 197, 122, 0.7), rgba(126, 213, 111, 0.2), rgba(9, 9, 9, 0)), url(../img/hero.jpg);
  }
}
.header {
  /*@media (min-width: 2000px) { since the set of property is the same, in order to use less code, the media query below can be moved to the set above by using a comma , as or,

        background-image: linear-gradient(to left bottom,
    rgba($color-primary, 0.7),
    rgba($color-primary-light, 0.2),
    rgba($color-black, 0)),
    url(../img/hero.jpg);
    }*/
}
@media only screen and (max-width: 37.5em) {
  .header {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 90vh, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 90vh, 0 100%);
    width: 100%;
  }
}
.header_logo-box {
  position: absolute;
  top: 4rem;
  left: 4rem;
  align-content: center;
}
@media only screen and (max-width: 56.25em) {
  .header_logo-box {
    position: relative;
    top: 4rem;
    left: 6rem;
  }
}
.header_logo {
  height: 3.5rem;
  animation: moveInLeft 5s ease-out;
}
.header_text-box {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.footer {
  background-color: #25231b;
  padding: 10rem 0;
  color: #999;
  font-size: 1.4rem;
}
@media only screen and (max-width: 56.25em) {
  .footer {
    padding: 8rem 0;
  }
}
.footer__logo-box {
  text-align: center;
  margin-bottom: 8rem;
}
@media only screen and (max-width: 56.25em) {
  .footer__logo-box {
    margin-bottom: 6rem;
  }
}
.footer__logo {
  width: 15rem;
  height: auto;
}
.footer__navigation {
  border-top: 1px solid #eee;
  padding: 2rem;
  display: inline-block;
}
@media only screen and (max-width: 56.25em) {
  .footer__navigation {
    width: 100%;
    text-align: center;
  }
}
.footer__list {
  list-style: none;
}
.footer__item {
  display: inline-block;
}
.footer__item:not(:last-child) {
  margin-right: 1.5rem;
}
.footer__link:link, .footer__link:visited {
  color: #f7f7f7;
  background-color: #25231b;
  text-decoration: none;
  text-transform: uppercase;
  display: inline-block;
  transition: all 0.3s;
}
.footer__link:hover, .footer__link:active {
  color: #55c57a;
  box-shadow: 0 1rem 2rem #090909;
  transform: rotate(5deg) scale(1.3);
}
.footer__copyright {
  border-top: 1px solid #eee;
  padding: 2rem;
  width: 80%;
  float: right;
}
@media only screen and (max-width: 56.25em) {
  .footer__copyright {
    width: 100%;
    float: none;
  }
}

.section-about {
  background-color: #f7f7f7;
  padding: 25rem 0;
  margin-top: -15vh;
}

.section-features {
  padding: 23rem 0;
  background-image: linear-gradient(to left bottom, rgba(228, 191, 44, 0.8), rgba(158, 132, 28, 0.3), rgba(158, 132, 28, 0.1)), url(/starter/img/nat-4.jpg);
  background-size: cover;
  margin-top: -10rem;
  transform: skewY(-7deg);
}
.section-features > * {
  transform: skewY(7deg);
}
@media only screen and (max-width: 56.25em) {
  .section-features {
    padding: 10rem 0;
  }
}

.section-tours {
  background-color: #f7f7f7;
  padding: 25rem 0 15rem 0;
  margin-top: -9rem;
}
@media only screen and (max-width: 56.25em) {
  .section-tours {
    padding: 18rem 0 10rem 0;
  }
}

.section-stories {
  position: relative;
  padding: 15rem 0;
}
@media only screen and (max-width: 56.25em) {
  .section-stories {
    padding: 8rem 0;
  }
}

.section-book {
  padding: 15rem 0;
  background-image: linear-gradient(to right bottom, rgba(255, 255, 255, 0.9), rgba(119, 119, 119, 0.9)), url(/starter/img/nat-10.jpg);
}

.book {
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(/starter/img/nat-10.jpg);
  background-size: 100%;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba(9, 9, 9, 0.75);
}
@media only screen and (max-width: 75em) {
  .book {
    background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 60%, transparent 50%), url(/starter/img/nat-10.jpg);
    background-size: cover;
  }
}
@media only screen and (max-width: 56.25em) {
  .book {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%, transparent 50%), url(/starter/img/nat-10.jpg);
    background-size: cover;
  }
}
.book__form {
  width: 50%;
  padding: 6rem;
}
@media only screen and (max-width: 75em) {
  .book__form {
    width: 65%;
  }
}
@media only screen and (max-width: 56.25em) {
  .book__form {
    width: 100%;
  }
}

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