@import url('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap');


header {

}

section {


}

h1 {
  text-align: center;
  padding-top: 3em;
  font-size: 2.5em;
  font-weight: 500;
  color: #FFF;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: 0.2s;
  transition-delay: 1s;
  z-index: 2;
  visibility: hidden;
}

#overlay.nav-is-active {
  background: rgba(40, 44, 53, 0.8);
  pointer-events: all;
  transition-delay: 0.45s;
  visibility: visible;
}

nav {
  font-weight: 500;
  padding: 2em;
  position: fixed;
  top: -9px;
  right: 0;
  transform: translate(-25px, 25px);
  z-index: 2;
}

.hamburger {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  cursor: pointer;
  background: rgba(0,0,0,0);
  border-radius: 50px;
  transition: 0.3s;
  transition-delay: 0.6s;
  z-index: 3;
}

.burger-bar {
  width: 30px;
  height: 4px;
  background: #333;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  transition: 0.3s;
}

.burger-bar:before,
.burger-bar:after {
  content: '';
  width: 30px;
  height: 4px;
  background: #333;
  position: absolute;
  transition: 0.3s;
}

.burger-bar::before {
  top: -9px;
}

.burger-bar::after {
  top: 9px;
}

.hamburger.active {
  border-radius: 5px;
  transition: 0.3s;
}

.hamburger.active .burger-bar {
  background: rgba(0,0,0,0);
}

.hamburger.active .burger-bar::before {
  top: 0;
  transform: rotate(-45deg);
}

.hamburger.active .burger-bar::after {
  top: 0;
  transform: rotate(45deg);
}

.navigation-list {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  border-radius: 50px;
  box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.4);
  list-style: none;
  text-align: center;
  font-size: 15px;
  background:#efb61c;
  margin: 0;
  font-family: 'dinmediumalternate';
}

.navigation-list.active {
  padding-left: 0;
  animation-name: openNav;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transition: 0.3s;
  transition-delay: 0.45s;
}

.close-nav {
  animation-name: closeNav;
  animation-duration: 0.9s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

.navigation-list ul {
  margin-top: 15px;
  list-style:none;
}

.navigation-list li:not(:first-child) {
     float: left;
    padding: 0 1em
}

.nav-links {
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
  transition-delay: 0;
}

.nav-links.active {
  visibility: visible;
  opacity: 1;
  transition: 0.3s;
  transition-delay: 0.7s;
      float: left;
    padding: 0 1em
}

.navigation-list a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s;
  
}

.navigation-list a:hover {
  color: #262b39;
}

#social-links {
  visibility: hidden;
  opacity: 0;
  transition: 0.2s;
  transition-delay: 0;
  font-size: 1.8em;
  padding-top: 2em;
}

#social-links.active {
  visibility: visible;
  opacity: 1;
  transition: 0.3s;
  transition-delay: 0.7s;
}

.fab {
  padding: 0 8px;
}

@keyframes closeNav {
  0% {
      width: 530px;
    height: 60px;
    border-radius: 5px;
  }
  25% {
    width: 530px;
    height: 60px;
    border-radius: 5px;
  }
  50% {
    width: 530px;
    height: 60px;
    border-radius: 5px;
  }
  75% {
    width: 60px;
    height: 60px;
    border-radius: 5px;
  }
  100% {
    width: 60px;
    height: 60px;
    border-radius: 50px;
  }
}

@keyframes openNav {
  0% {
     width: 530px;
    height: 60px;
  }
  25% {
      width: 530px;
    height: 60px;
    border-radius: 5px;
  }
  50% {
      width: 530px;
    height: 60px;
    border-radius: 5px;
  }
  75% {
    width: 530px;
    height: 60px;
    border-radius: 5px;
  }
  100% {
    width: 530px;
    height: 60px;
    border-radius: 5px;
  }
}

/* Large phones */
@media only screen and (max-width: 500px) {

  .navigation-list li {
    font-size: 22px;
    padding-top: 2em;
  }

  #social-links {
    padding-top: 4em;
  }
  
  @keyframes closeNav {
    0% {
      width: 88vw;
      height: 60vh;
      border-radius: 5px;
    }
    25% {
      width: 88vw;
      height: 60vh;
      border-radius: 5px;
    }
    50% {
      width: 88vw;
      height: 60vh;
      border-radius: 5px;
    }
    75% {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
    100% {
      width: 60px;
      height: 60px;
      border-radius: 50px;
    }
  }

  @keyframes openNav {
    0% {
      width: 60px;
      height: 60px;
    }
    25% {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
    50% {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
    75% {
      width: 88vw;
      height: 60vh;
      border-radius: 5px;
    }
    100% {
      width: 88vw;
      height: 60vh;
      border-radius: 5px;
    }
  }
}

/* Medium phones */
@media only screen and (max-width: 377px) {

  #social-links {
    padding-top: 3em;
  }
  
  @keyframes closeNav {
    0% {
      width: 86vw;
      height: 60vh;
      border-radius: 5px;
    }
    25% {
      width: 86vw;
      height: 60vh;
      border-radius: 5px;
    }
    50% {
      width: 86vw;
      height: 60vh;
      border-radius: 5px;
    }
    75% {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
    100% {
      width: 60px;
      height: 60px;
      border-radius: 50px;
    }
  }

  @keyframes openNav {
    0% {
      width: 60px;
      height: 60px;
    }
    25% {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
    50% {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
    75% {
      width: 86vw;
      height: 60vh;
      border-radius: 5px;
    }
    100% {
      width: 76vw;
      height: 60vh;
      border-radius: 5px;
    }
  }
}

/* Small phones */
@media only screen and (max-width: 322px) {

  .navigation-list li {
    font-size: 20px;
    padding-top: 1em;
  }

  #social-links {
    padding-top: 2em;
  }
  
  @keyframes closeNav {
    0% {
      width: 85vw;
      height: 20vh;
      border-radius: 5px;
    }
    25% {
      width: 85vw;
      height: 90vh;
      border-radius: 5px;
    }
    50% {
      width: 85vw;
      height: 90vh;
      border-radius: 5px;
    }
    75% {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
    100% {
      width: 60px;
      height: 60px;
      border-radius: 50px;
    }
  }

  @keyframes openNav {
    0% {
      width: 60px;
      height: 60px;
    }
    25% {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
    50% {
      width: 60px;
      height: 60px;
      border-radius: 5px;
    }
    75% {
      width: 85vw;
      height: 60vh;
      border-radius: 5px;
    }
    100% {
      width: 85vw;
      height: 90vh;
      border-radius: 5px;
    }
  }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
    nav{font-weight: 500;
    padding: 2em;
    position: fixed;
    top: -9px !important;
    right: -5px;
    transform: translate(-25px, 25px);
    z-index: 2;}
	#about .yellow{height:auto !important}
	.hide{display:none}
	.icon-box {
    width: 100%;
    float: left;
   
    text-align: center;
}
.logotop {
    width: 200px;
    margin: 0px 13px;
    float: left;
}
.navigation-list ul {
    margin-top: 15px;
    list-style: none;
    display: grid !important;
}
.navigation-list li:not(:first-child) {
    float: left;
    padding: 1em 1em;
}
.nav-links.active {
    visibility: visible;
    opacity: 1;
    transition: 0.3s;
    transition-delay: 0.7s;
    float: left;
    padding: 1em 1em;
    background:#efb61c;
}
nav {
    font-weight: 500;
    padding: 2em;
    position: fixed;
    top: -11px !important;
    right: -20px  !important;
    transform: translate(-25px, 25px);
    z-index: 2;
}
.navigation-list {
    position: absolute;
    top: 0;
    right: 9px;
    width: 60px;
    height: 60px;
    border-radius: 0px !important;;
    box-shadow:none  !important;
    list-style: none;
    text-align: center;
    font-size: 14px  !important;
    background: none  !important;
    margin: 0;
    font-family: 'dinmediumalternate';
}
}