.header-container {

  width: 70%  !important; }



.navigation-container {

  width: 80%  !important;

  margin: 0 auto   !important; }



.navigation__checkbox {

  display: none; }



.navigation__button {

  background-color: #fff;

  height: 7rem;

  width: 7rem;

  position: fixed;

  top: 4rem;

  right: 4rem;

  border-radius: 50%;

  z-index: 2000;

  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.1);

  text-align: center;

  cursor: pointer; }



.navigation__background {

  height: 6rem;

  width: 6rem;

  border-radius: 50%;

  position: fixed;

  top: 4.5rem;

  right: 4.5rem;

  background-image: radial-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8));

  z-index: 1000;

  transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); }



.navigation__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.55, 0.265, 1.55); }



.navigation__list {

  position: absolute;

  top: 60%;

  left: 50%;

  transform: translate(-70%, -70%);

  list-style: none;

  text-align: center;

  width: 100%; }





  /* **************************Media Queries ****************************** */

  /* @media only screen and (min-width:800px){

    

  } */



.navigation__item {

  margin: 1rem; }



.navigation__link:link, .navigation__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 .4s; }

  .navigation__link:link span, .navigation__link:visited span {

    margin-right: 1.5rem;

    display: inline-block; }



.navigation__link:hover, .navigation__link:active {

  color: #e74c3c; }



.navigation__checkbox:checked ~ .navigation__background {

  transform: scale(80); }



.navigation__checkbox:checked ~ .navigation__nav {

  opacity: 1;

  width: 100%; }



.navigation__icon {

  position: relative;

  margin-top: 3.5rem; }

  .navigation__icon, .navigation__icon::before, .navigation__icon::after {

    width: 3rem;

    height: 2px;

    background-color: #333;

    display: inline-block; }

  .navigation__icon::before, .navigation__icon::after {

    content: "";

    position: absolute;

    left: 0;

    transition: all .2s; }

  .navigation__icon::before {

    top: -.8rem; }

  .navigation__icon::after {

    top: .8rem; }



.navigation__button:hover .navigation__icon::before {

  top: -1rem; }



.navigation__button:hover .navigation__icon::after {

  top: 1rem; }



.navigation__checkbox:checked + .navigation__button .navigation__icon {

  background-color: transparent; }



.navigation__checkbox:checked + .navigation__button .navigation__icon::before {

  top: 0;

  transform: rotate(135deg); }



.navigation__checkbox:checked + .navigation__button .navigation__icon::after {

  top: 0;

  transform: rotate(-135deg); }



* {

  padding: 0;

  margin: 0;

  box-sizing: border-box; }



html {

  font-family: 'Exo 2', sans-serif;

  font-size: 62.5%; }