@font-face {
  font-family: "Nohemi Light";
  src: url('../fonts/Nohemi-Light.ttf');
}

@font-face {
  font-family: "Nohemi";
  src: url('../fonts/Nohemi-Regular.ttf');
}

@font-face {
  font-family: "Nohemi SemiBold";
  src: url('../fonts/Nohemi-SemiBold.ttf');
}

@font-face {
  font-family: "Nohemi Bold";
  src: url('../fonts/Nohemi-Bold.ttf');
}

@font-face {
  font-family: "Nohemi Thin";
  src: url('../fonts/Nohemi-Thin.ttf');
}

@font-face {
  font-family: "icon";
  src: url('../fonts/la-solid-900.ttf');
}

@font-face {
  font-family: "Mango Grotesque Bold";
  src: url('../fonts/MangoGrotesque-SemiBold.ttf');
}

#desktop {
  display: block;
}
#mobile {
  display: none;
}

body {
  background: #050505;
  color: white;
}

a {
  text-decoration: none;
  color: inherit;
}

.container {
  position: absolute;
  display: flex;
  width: 60%;
  height: 50vh;
  top: 25vh;
  left: 50%;
  transform: translateX(-50%);
  justify-content: space-between;
}

.logo {
  position: relative;
  display: inline-block;
  background: right / contain no-repeat url(../img/Napp.png);
  width: 30%;
  height: 100%;
  vertical-align: middle;
}

.contact {
  position: relative;
  top: calc(50% - 8vw);
  left: 9vw;
  transform: translateY(-50%);
}

#available {
  font-family: "Nohemi Light";
  text-transform: uppercase;
  font-size: 0.6vw;
  animation: rotating 10s linear infinite;
}

.cta
{
  display: block;
  position: absolute;
  margin-left: 50%;
  /* top: 1.3vw; */
  width: 5.5vw;
  height: 5.5vw;
  background: -webkit-linear-gradient(45deg, rgb(196, 231, 177), rgb(186, 166, 229), rgb(196, 231, 177), rgb(186, 166, 229));
  background: -moz-linear-gradient(45deg, rgb(196, 231, 177), rgb(186, 166, 229), rgb(196, 231, 177), rgb(186, 166, 229));
  background: -ms-linear-gradient(45deg, rgb(196, 231, 177), rgb(186, 166, 229), rgb(196, 231, 177), rgb(186, 166, 229));
  background: -o-linear-gradient(45deg, rgb(196, 231, 177), rgb(186, 166, 229), rgb(196, 231, 177), rgb(186, 166, 229));
  background: linear-gradient(45deg, rgb(196, 231, 177), rgb(186, 166, 229), rgb(196, 231, 177), rgb(186, 166, 229));
  background-size: 400% 400%;
  -webkit-animation: gradient 3s linear infinite;
  -moz-animation: gradient 3s linear infinite;
  animation: gradient 3s linear infinite;
  color: black;
  border-radius: 150px;
  transform: translateX(-50%) rotate(-15deg);
  font-family: "Mango Grotesque Bold";
  text-transform: uppercase;
  font-size: 1.4vw;
  line-height: 1.2vw;
  transition: 5s;
}

.cta-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 150px;
  background: white;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.cta:hover .cta-hover {
  opacity: 1;
}

.cta p
{
  margin: 0px;
  position: relative;
  top: 50%;
  transform: translate(0,-50%);
  text-align: center;
}

@-webkit-keyframes gradient {
    0% {
        background-position: 100% 0%
    }
    100% {
        background-position: 15% 100%
    }
}

@-moz-keyframes gradient {
    0% {
        background-position: 100% 0%
    }
    100% {
        background-position: 15% 100%
    }
}

@keyframes gradient {
    0% {
        background-position: 100% 0%
    }
    100% {
        background-position: 15% 100%
    }
}

.content {
  position: relative;
  display: inline-block;
  width: 65%;
  height: 100%;
  vertical-align: middle;
}

.section {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-family: "Nohemi Light";
}

.lang {
  position: absolute;
  bottom: 15vh;
  right: 0;
  font-size: 0.7vw;
  text-align: right;
  letter-spacing: 0.1vw;
  line-height: 1vw;
  opacity: 0.5;
}

.lang > div:first-child {
  font-family: "Nohemi Bold";
  text-transform: uppercase;
  opacity: 0.5;
}

.lang a :not(.icon) {
  display: inline-block;
  transition: 0.5s;
}

.lang a:hover :not(.icon) {
  transform: skewX(-15deg);
}

.title {
  font-family: "Nohemi Bold";
  font-size: 2.28vw;
  text-transform: uppercase;
}

.title span:nth-child(2) {
  position: relative;
  top: -5px;
}

.info {
  font-size: 0.75vw;
  margin-top: 30px;
  line-height: 20px;
  letter-spacing: 0.5px;
}

.website {
  position: absolute;
  right: 0;
  text-align: right;
  opacity: 0.5;
}

.website a :not(.icon) {
  display: inline-block;
  transition: 0.5s;
}

.website a:hover :not(.icon) {
  transform: skewX(-15deg);
}

.newsite .icon {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.name {
  position: absolute;
  line-height: 23px;
}

.name span:nth-child(2) {
  font-variant-caps: all-small-caps;
}

.files {
  position: absolute;
}

.files a span:nth-child(3), .files a.portfolio {
  font-family: "Nohemi SemiBold";
}

.files a :not(.icon) {
  display: inline-block;
  transition: 0.5s;
}

.files a:hover :not(.icon) {
  transform: skewX(-15deg);
}

.icon {
  display: inline-block;
  font-family: "icon";
  margin-right: 5px;
}

.bar {
  display: inline-block;
  margin-left: 8px;
  margin-right: 5px;
}

@media (max-width: 640px) {

  #desktop {
    display: none;
  }
  #mobile {
    display: block;
  }

  .container {
    display: block;
    width: 70%;
    top: 0;
    height: 90vh;
  }

  .logo {
    background-position: bottom;
    width: 70%;
    height: 50%;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .contact {
    position: absolute;
    top: auto !important;
    bottom: 17vh !important;
    left: 50vw;
    transform: none !important;
  }

  #available {
    font-size: 1.7vw;
  }

  .cta
  {
    position: absolute;
    top: 3.7vw !important;
    width: 15vw;
    height: 15vw;
    border-radius: 150px;
    transform: translateX(-50%) rotate(-10deg);
    font-size: 4vw;
    line-height: 3.5vw;
  }

  .content {
    width: 100%;
    height: 50%;
  }

  .section {
    top: 20px;
    transform: none;
    height: 80%;
  }

  .lang {
    position: absolute;
    width: 70%;
    top: -40vh;
    bottom: auto;
    right: auto;
    font-size: 3vw;
    text-align: center;
    letter-spacing: 0.1vw;
    line-height: 3vw;
    left: 50%;
    transform: translateX(-50%);
  }

  .lang > div:first-child {
    display: none;
  }

  .title {
    font-size: 7.2vw;
    text-align: center;
    margin-left: 0 !important;
    line-height: 30px;
  }

  .info {
    font-size: 3vw;
    margin-top: 10px;
    line-height: 15px;
  }

  .files {
    right: 0;
    text-align: right;
  }

  .name {
    position: absolute;
    line-height: inherit;
  }

  .website {
    width: 100%;
    position: absolute;
    bottom: 0;
    right: auto;
    text-align: left;
  }

  .newsite {
    display: inline-block;
  }

  .website a {
    position: absolute;
    display: inline-block;
    right: 0;
  }

}