/*
0 - 600px:    Phone
600 - 900px:  Tablet portrait
900 - 1200px: Tablet landscape
1200 - 1800:  where our normal styles apply
1800px + :    Desktop
*/
/*
BREAKPOINT ARGUMENTS
- big-desktop
- tab-land
- tab-port
- phone

ORDER: Base + typography > general layout > page layout > componente

1em = 16px
*/
/* rem and ems NOT affected by root font size setting in media queries
1rem or em ALWAYS equal to font size comin from browser (16px)
If user changes that font size it will change, no matter what we have in our code.*/
@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);
    /*x dimension from left to right*/ }
  100% {
    opacity: 1;
    transform: translate(0); } }

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  /* this will automatically inherit whatever box sizing values are set to all parts of the page */ }

html {
  font-size: 62.5%;
  /* font-size: 10px; */
  /* Change to 10px to make it easier to convert all pixel units to rem,. 10px is 1 rem. This is the root font size
  Because users CANNOT change font size in their browser if we set it in px,  convert to % */
  overflow-x: hidden; }
  @media only screen and (min-width: 112.5em) {
    html {
      font-size: 75%; } }
  @media only screen and (max-width: 75em) {
    html {
      font-size: 56.25%; } }
  @media only screen and (max-width: 56.25em) {
    html {
      font-size: 50%; } }

body {
  box-sizing: border-box;
  /* changes the box model so borders and paddings are no longer added to total height or width */
  padding: 3rem; }
  @media only screen and (max-width: 56.25em) {
    body {
      padding: 0; } }

::selection {
  background-color: #ff9633;
  color: #fff; }

body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  /* font-size: 16px; */
  line-height: 1.7;
  color: #777;
  /* padding: 30px; will give the nice white border around the whole webpage*/ }

.heading-primary {
  color: #fff;
  text-transform: uppercase;
  backface-visibility: hidden;
  /*prevents animation looking shaky in the end*/
  margin-bottom: 4rem; }
  .heading-primary__text--main {
    display: block;
    /* because span element is inline element by default*/
    font-size: 5.5rem;
    font-weight: 400;
    letter-spacing: 1.5rem;
    animation-name: moveInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    /*animation faster in the beginning then slower */
    /* animation-iteration-count: 3;  will do 3 times*/
    /* animation-delay: 3s; */ }
    @media only screen and (max-width: 37.5em) {
      .heading-primary__text--main {
        letter-spacing: 1rem;
        font-size: 3rem; } }
  .heading-primary__text--sub {
    display: block;
    font-size: 1.9rem;
    font-weight: 700;
    letter-spacing: 0.26rem;
    animation: moveInRight 1s ease-out; }
    @media only screen and (max-width: 37.5em) {
      .heading-primary__text--sub {
        letter-spacing: 0.5rem;
        font-size: 1.5rem; } }

.heading-secondary {
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 700;
  display: inline-block;
  background-image: linear-gradient(to right, #ffb570, #ff7a00);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 0.2rem;
  transition: all 0.2s; }
  @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(2deg) skewX(15deg) scale(1.1);
    text-shadow: 0.5rem 1rem 2rem rgba(0, 0, 0, 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 !important; }

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

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

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

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

.u-margin-top-huge {
  margin-bottom: 10rem !important; }

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

.btn, .btn:link, .btn:visited {
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.5rem 4rem;
  display: inline-block;
  border-radius: 10rem;
  transition: all 0.2s;
  position: relative;
  font-size: 1.6rem;
  border: none;
  cursor: pointer; }

.btn:hover {
  transform: translateY(-0.3rem);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
  /* 1: x direction 2: y direction 3: blur 4: color*/ }

.btn:active, .btn:focus {
  outline: none;
  transform: translateY(-0.1rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); }

.btn--white {
  background-color: #fff;
  color: #777; }
  .btn--white::after {
    background-color: #fff; }

.btn--orange {
  background-color: #ff9633;
  color: #fff; }
  .btn--orange::after {
    background-color: #ff9633; }

.btn::after {
  content: "";
  /*to make the element appear we need to specify a content property*/
  display: inline-block;
  /*Also needs to be specified for it to appear on the page*/
  height: 100%;
  width: 100%;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  /* negative index will position element behind the button*/
  transition: all 0.4s; }

.btn:hover::after {
  transform: scaleX(1.4) scaleY(1.6);
  /* scale increases the element */
  opacity: 0; }

.btn--animated {
  animation: moveInBottom 0.5s ease-out;
  animation-fill-mode: backwards; }

.btn-text:link, .btn-text:visited {
  font-size: 1.6rem;
  color: #ff9633;
  display: inline-block;
  text-decoration: none;
  border-bottom: 0.1rem solid #ff9633;
  padding: 0.3rem; }

.btn-text:hover {
  background-color: #ff9633;
  color: #fff;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  transform: translateY(-0.2rem); }

.btn-text:active {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  transform: translateY(-0.2rem); }

.card {
  position: relative;
  perspective: 150rem;
  -moz-perspective: 150rem;
  height: 52rem; }
  .card__side {
    position: absolute;
    top: 0;
    left: 0;
    height: 52rem;
    transition: all 0.8s ease;
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 50rem;
    border-radius: 0.3rem;
    overflow: hidden;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
    .card__side--front {
      background-color: #fff; }
    .card__side--back {
      transform: rotateY(180deg); }
      .card__side--back-1 {
        background-image: linear-gradient(to right bottom, #2cb52c, #228b22); }
      .card__side--back-2 {
        background-image: linear-gradient(to right bottom, #ffb570, #ff7a00); }
      .card__side--back-3 {
        background-image: linear-gradient(to right bottom, #2f5fb1, #274e91); }
  .card:hover .card__side--front {
    transform: rotateY(-180deg); }
  .card:hover .card__side--back {
    transform: rotateY(0); }
  .card__picture {
    background-size: cover;
    height: 23rem;
    background-blend-mode: screen;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem; }
    .card__picture--1 {
      background-image: linear-gradient(to right bottom, #2cb52c, #228b22), url(../img/nat-5.jpg); }
    .card__picture--2 {
      background-image: linear-gradient(to right bottom, #ffb570, #ff7a00), url(../img/nat-6.jpg); }
    .card__picture--3 {
      background-image: linear-gradient(to right bottom, #2f5fb1, #274e91), url(../img/nat-7.jpg); }
  .card__heading {
    font-size: 2.8rem;
    font-weight: 300;
    text-transform: uppercase;
    text-align: right;
    color: #fff;
    position: absolute;
    top: 12rem;
    right: 2rem;
    width: 75%; }
  .card__heading-span {
    padding: 1rem 1.5rem;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone; }
    .card__heading-span--1 {
      background-image: linear-gradient(to right bottom, rgba(44, 181, 44, 0.85), rgba(34, 139, 34, 0.85)); }
    .card__heading-span--2 {
      background-image: linear-gradient(to right bottom, rgba(255, 181, 112, 0.85), rgba(255, 122, 0, 0.85)); }
    .card__heading-span--3 {
      background-image: linear-gradient(to right bottom, rgba(47, 95, 177, 0.85), rgba(39, 78, 145, 0.85)); }
  .card__details {
    padding: 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: 0.1rem 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;
    margin-bottom: 8rem;
    color: #fff; }
  .card__price-current {
    font-size: 1.4rem;
    text-transform: uppercase; }
  .card__price-value {
    font-size: 6rem;
    font-weight: 100; }
  @media only screen and (max-width: 56.25em), only screen and (hover: none) {
    .card {
      height: auto;
      border-radius: 0.3rem;
      background-color: #fff;
      box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }
      .card__side {
        position: relative;
        height: auto;
        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__details {
        padding: 1rem 3rem; }
      .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 {
    position: absolute;
    width: 55%;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
    border: 0.2rem;
    z-index: 10;
    transition: all 0.2s;
    outline-offset: 2rem; }
    @media only screen and (max-width: 56.25em) {
      .composition__photo {
        float: left;
        position: relative;
        width: 33.33333%;
        box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2); } }
    .composition__photo--p1 {
      left: 0;
      top: -2rem; }
      @media only screen and (max-width: 56.25em) {
        .composition__photo--p1 {
          top: 0.9rem;
          transform: scale(1.2); } }
    .composition__photo--p2 {
      right: -1rem;
      top: 2rem; }
      @media only screen and (max-width: 56.25em) {
        .composition__photo--p2 {
          top: 0;
          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.2); } }
    .composition__photo:hover {
      outline: 1.5rem solid #ff9633;
      transform: scale(1.05);
      box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
      z-index: 20; }
  .composition:hover .composition__photo:not(:hover) {
    transform: scale(0.95); }

.feature-box {
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  padding: 2.5rem;
  text-align: center;
  border-radius: 0.3rem;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
  transition: transform 0.3s; }
  @media only screen and (max-width: 56.25em) {
    .feature-box {
      padding: 2rem; } }
  .feature-box__icon {
    font-size: 6rem;
    margin-bottom: 0.5rem;
    color: #ff9633;
    display: inline-block;
    background-image: linear-gradient(to right, #ffb570, #ff7a00);
    -webkit-background-clip: text;
    color: transparent; }
    @media only screen and (max-width: 56.25em) {
      .feature-box__icon {
        margin-bottom: 0; } }
  .feature-box:hover {
    transform: translateY(-1.5rem) scale(1.03); }

.form__group:not(:last-child) {
  margin-bottom: 2rem; }

.form__input {
  font-family: inherit;
  color: inherit;
  font-size: 1.5rem;
  padding: 1.5rem 2rem;
  border-radius: 0.2rem;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  border-bottom: 0.3rem solid transparent;
  width: 90%;
  display: block;
  transition: all 0.3; }
  @media only screen and (max-width: 56.25em) {
    .form__input {
      width: 100%; } }
  .form__input:focus {
    outline: none;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
    border-bottom: 0.3rem solid #2cb52c; }
  .form__input:focus:invalid {
    border-bottom: 0.3rem solid #ff7a00; }
  .form__input::-webkit-input-placeholder {
    color: #999; }

.form__label {
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 2rem;
  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: 49%;
  display: inline-block; }
  @media only screen and (max-width: 56.25em) {
    .form__radio-group {
      width: 100%;
      margin-bottom: 2rem; } }

.form__radio-input {
  visibility: hidden; }

.form__radio-label {
  font-size: 1.6rem;
  cursor: pointer;
  position: relative;
  padding-left: 4.5rem; }

.form__radio-button {
  height: 3rem;
  width: 3rem;
  border: 0.5rem solid #ff9633;
  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: #ff9633;
    opacity: 0;
    transition: opacity 0.2s; }

.form__radio-input:checked ~ .form__radio-label .form__radio-button::after {
  opacity: 1; }

.story {
  width: 75%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.6);
  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: 7rem; } }
  @media only screen and (max-width: 37.5em) {
    .story {
      transform: skewX(0); } }
  .story__shape {
    width: 15rem;
    height: 15rem;
    float: left;
    border-radius: 50%;
    transform: translateX(-3rem) skewX(12deg);
    position: relative;
    overflow: hidden; }
    @supports (clip-path: polygon(0, 0)) or (-webkit-clip-path: polygon(0, 0)) {
      .story__shape {
        -webkit-clip-path: circle(50%);
        clip-path: circle(50%);
        -webkit-shape-outside: circle(50%);
        shape-outside: circle(50%);
        border-radius: none; } }
    @media only screen and (max-width: 37.5em) {
      .story__shape {
        transform: translateX(-3rem) skewX(0); } }
  .story__img {
    height: 100%;
    transform: translateX(-4rem) scale(1.2);
    backface-visibility: hidden;
    transition: all 0.5s; }
  .story__text {
    transform: skewX(12deg); }
    @media only screen and (max-width: 37.5em) {
      .story__text {
        transform: skewX(0); } }
  .story__caption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    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 {
    transform: translateX(-4rem) scale(1);
    filter: blur(0.3rem) brightness(80%); }

.footer {
  background-color: #333;
  padding: 4rem 0; }
  @media only screen and (max-width: 56.25em) {
    .footer {
      padding-bottom: 0;
      padding-top: 5rem; } }
  .footer__logo-box {
    text-align: center;
    margin: 4rem; }
    @media only screen and (max-width: 56.25em) {
      .footer__logo-box {
        margin: 0; } }
    .footer__logo-box--img {
      height: 10rem;
      width: 13rem; }
  .footer__logo {
    width: 15rem;
    height: auto; }
  .footer__navigation {
    display: inline-block;
    margin-top: 8rem; }
    @media only screen and (max-width: 56.25em) {
      .footer__navigation {
        width: 100%;
        margin-top: 0; } }
  .footer__list {
    list-style: none;
    font-size: 1.6rem; }
    @media only screen and (max-width: 75em) {
      .footer__list {
        padding-left: 6rem; } }
    @media only screen and (max-width: 56.25em) {
      .footer__list {
        padding-left: 0;
        text-align: center; } }
  .footer__item {
    display: inline-block; }
    .footer__item:not(:last-child) {
      margin-right: 1.5rem; }
  .footer__icon-list {
    padding-left: 15rem;
    font-size: 2.3rem;
    letter-spacing: 1.1rem; }
    @media only screen and (max-width: 75em) {
      .footer__icon-list {
        padding-left: 13rem;
        letter-spacing: 0.2rem; } }
    @media only screen and (max-width: 56.25em) {
      .footer__icon-list {
        padding-left: 0;
        text-align: center; } }
  .footer__icon-link:link, .footer__icon-link:visited {
    text-decoration: none;
    color: #f7f7f7;
    background-color: #333;
    transition: all 0.2s; }
    .footer__icon-link:link:hover, .footer__icon-link:link:active, .footer__icon-link:visited:hover, .footer__icon-link:visited:active {
      color: #ff9633;
      box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4); }
  .footer__link:link, .footer__link:visited {
    color: #f7f7f7;
    background-color: #333;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
    transition: all 0.2s; }
  .footer__link:hover, .footer__link:active {
    color: #ff9633;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4); }

.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-"] {
        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((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); }

.header {
  height: 85vh;
  background-image: linear-gradient(to right bottom, rgba(255, 181, 112, 0.8), rgba(255, 122, 0, 0.8)), url(../img/banner-small.jpg);
  background-size: cover;
  background-position: top;
  position: relative; }
  @supports (clip-path: polygon(0, 0)) or (-webkit-clip-path: polygon(0, 0)) {
    .header {
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
      height: 95vh; } }
  @media only screen and (min-resolution: 192dpi) and (min-width: 37.5em), only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em), only screen and (min-width: 125em) {
    .header {
      background-image: linear-gradient(to right bottom, rgba(255, 181, 112, 0.8), rgba(255, 122, 0, 0.8)), url(../img/banner.jpg); } }
  @media only screen and (max-width: 37.5em) {
    .header {
      -webkit-clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
      clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%); } }
  .header__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem; }
  .header__logo {
    height: 5.5rem; }
  .header__text-box {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center; }

.navbar__checkbox {
  display: none; }

.navbar__button {
  background-color: #fff;
  height: 7rem;
  width: 7rem;
  position: fixed;
  top: 6rem;
  right: 6rem;
  border-radius: 50%;
  z-index: 2000;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);
  text-align: center;
  cursor: pointer; }
  @media only screen and (max-width: 56.25em) {
    .navbar__button {
      top: 4rem;
      right: 4rem; } }
  @media only screen and (max-width: 56.25em) {
    .navbar__button {
      top: 3rem;
      right: 3rem; } }

.navbar__background {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  position: fixed;
  top: 6.5rem;
  right: 6.5rem;
  background-image: radial-gradient(#ffb570, #ff7a00);
  z-index: 1000;
  transition: transform 0.8s cubic-bezier(0.83, 0, 0.17, 1); }
  @media only screen and (max-width: 56.25em) {
    .navbar__background {
      top: 4.5rem;
      right: 4.5rem; } }
  @media only screen and (max-width: 56.25em) {
    .navbar__background {
      top: 3.5rem;
      right: 3.5rem; } }

.navbar__nav {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1500;
  opacity: 0;
  width: 0;
  transition: all 0.8s cubic-bezier(0.68, -0.6, 0.32, 1.6); }

.navbar__list {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
  width: 100%; }

.navbar__item {
  margin: 1rem; }

.navbar__link:link, .navbar__link:visited {
  display: inline-block;
  font-size: 3rem;
  font-weight: 300;
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
  background-size: 220%;
  transition: all 0.4s; }
  .navbar__link:link span, .navbar__link:visited span {
    margin-right: 1.5rem;
    display: inline-block; }

.navbar__link:hover, .navbar__link:active {
  background-position: 100%;
  color: #ff9633;
  transform: translateX(1rem); }

.navbar__checkbox:checked ~ .navbar__background {
  transform: scale(80); }

.navbar__checkbox:checked ~ .navbar__nav {
  opacity: 1;
  width: 100%; }

.navbar__icon {
  position: relative;
  margin-top: 3.5rem; }
  .navbar__icon, .navbar__icon::before, .navbar__icon::after {
    width: 3rem;
    height: 2px;
    background-color: #333;
    display: inline-block; }
  .navbar__icon::before, .navbar__icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all 0.2s; }
  .navbar__icon::before {
    top: -0.8rem; }
  .navbar__icon::after {
    top: 0.8rem; }

.navbar__button:hover .navbar__icon::before {
  top: -1rem; }

.navbar__button:hover .navbar__icon::after {
  top: 1rem; }

.navbar__checkbox:checked + .navbar__button .navbar__icon {
  background-color: transparent; }

.navbar__checkbox:checked + .navbar__button .navbar__icon::before {
  top: 0;
  transform: rotate(135deg); }

.navbar__checkbox:checked + .navbar__button .navbar__icon::after {
  top: 0;
  transform: rotate(-135deg); }

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

.section-features {
  padding: 20rem 0;
  background-image: linear-gradient(to right bottom, rgba(255, 181, 112, 0.8), rgba(255, 122, 0, 0.8)), url(../../img/nat-4.jpg);
  background-size: cover;
  transform: skewY(-7deg);
  margin-top: -10rem; }
  .section-features > * {
    transform: skewY(7deg); }
  @media only screen and (max-width: 56.25em) {
    .section-features {
      padding: 10rem 0 5rem 0; } }

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

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

.section-booking {
  padding: 15rem 0;
  background-image: linear-gradient(to right bottom, #ffb570, #ff7a00); }
  @media only screen and (max-width: 56.25em) {
    .section-booking {
      padding: 10rem 0; } }
  .section-booking .booking {
    background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 50%, transparent 50%), url(../img/nat-10.jpg);
    background-size: 100%;
    border-radius: 0.3rem;
    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2); }
    @media only screen and (max-width: 75em) {
      .section-booking .booking {
        background-image: linear-gradient(105deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 65%, transparent 65%), url(../img/nat-10.jpg);
        background-size: cover; } }
    @media only screen and (max-width: 56.25em) {
      .section-booking .booking {
        background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%), url(../img/nat-10.jpg); } }
    .section-booking .booking__form {
      width: 50%;
      padding: 6rem; }
      @media only screen and (max-width: 75em) {
        .section-booking .booking__form {
          width: 65%; } }
      @media only screen and (max-width: 56.25em) {
        .section-booking .booking__form {
          width: 100%; } }