a {
  color: $color-default;
  &:hover, &:focus, &:active {
    color: $color-default; outline: none !important;
  }
}
body, html {
  height: 100%; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; overflow: hidden; perspective: 2000px; position: relative;
  &.has-loading-screen {
    & #page:after {
      background-color: $color-black; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; content: ""; opacity: 1; transition: .3s ease;
    }
    & .side-panel {
      & .nav-btn {
        opacity: 0;
      }
    }
    & .animate {
      opacity: 0; transition: 1s cubic-bezier(.19,.11,0,1.02); top: 30px !important;
      &.show-it {
        opacity: 1; top: 0 !important;;
      }
    }
  }
  &.loading-done {
    & #page:after, & .loader {
      opacity: 0;
    }
    & .side-panel {
      & .nav-btn {
        opacity: 1;
      }
    }
  }
  &.hide-loading-screen {
    & #page:after, & .loader{
      display: none;
    }
  }
}
h1 {
  font-size: 60px; display: inline-block; text-shadow: 0 5px 16px rgba(0,0,0,.4); text-align: left; font-weight: 600;
}
h2 {
  font-size: 36px; font-weight: 700; margin-bottom: 40px;
}
h3 {
  font-size: 20px; font-weight: 700; margin-bottom: 30px;
}
h4 {
  font-size: 16px; font-weight: 700;
}
p {
  color: $text-color; opacity: .7; font-size: 16px; line-height: 24px; font-weight: 500;
}