/* [project]/src/views/website/home/style.scss.css [app-client] (css) */
#home {
  color: #a9a9a9;
  background: #0c0c0c;
  position: relative;
}

#home p.text-sm {
  font-size: 1.2rem;
  line-height: 1.6rem;
}

#home p.text-xs {
  font-size: 1rem;
  line-height: 1.6rem;
}

#home .pill {
  padding: 2px 10px;
}

@media screen and (min-width: 1024px) {
  #home .pill {
    font-size: 1rem;
  }
}

@media screen and (min-width: 1920px) {
  #home .pill {
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 1280px) and (min-height: 1000px) {
  #home .pad-right {
    padding-right: 12.5rem;
  }
}

#home .overlay {
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

#home .overlay-left {
  background: linear-gradient(-90deg, #0009 100%, #000c 0%);
}

@media (min-width: 1280px) {
  #home .overlay-left {
    background: linear-gradient(-90deg, #0009 100%, #0006 50%, #0000 0%);
  }
}

#home .overlay-right {
  background: linear-gradient(-90deg, #0009 100%, #000c 0%);
}

@media (min-width: 1280px) {
  #home .overlay-right {
    background: linear-gradient(-90deg, #0000 0%, #000000b3 50%, #000000a6 100%);
  }
}

@keyframes fadeInOut {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

#home .logo-sub-title {
  letter-spacing: 10px;
  padding: 11px 0 25px;
  font-size: 37px;
  font-weight: 300;
}

#home .content-wrapper {
  max-width: 1920px;
  margin: 0 auto;
}

#home .btn-container {
  height: 100px;
  padding: 25px 0;
}

#home .btm-divider {
  border-bottom: 1px solid #0000;
  border-image: linear-gradient(to right, #e9e9e900, #b0b8bb2e, #e9e9e900) 1;
}

#home .banner {
  width: 100vw;
  height: 45vh;
}

@media only screen and (min-width: 390px) and (min-width: 800px) {
  #home .banner {
    height: 40vh;
  }
}

@media only screen and (min-width: 768px) {
  #home .banner {
    height: 60vh;
  }
}

@media only screen and (min-width: 1024px) {
  #home .banner {
    height: 125vh;
  }
}

@media only screen and (min-width: 1024px) and (min-height: 1300px) {
  #home .banner {
    height: 60vh;
  }
}

@media only screen and (min-width: 1280px) {
  #home .banner {
    height: 117vh;
  }
}

@media only screen and (min-width: 2500px) {
  #home .banner {
    height: 110vh;
  }
}

#home .banner svg {
  height: 145vh;
  margin-top: -52vh;
}

@media only screen and (min-width: 1024px) {
  #home .banner svg {
    height: 150vh;
    margin-top: -26vh;
  }
}

@media only screen and (min-width: 1024px) and (min-height: 1300px) {
  #home .banner svg {
    zoom: 1;
    margin-top: -50vh;
  }
}

@media only screen and (min-width: 2500px) {
  #home .banner svg {
    height: 122vh;
    margin-top: -12vh;
  }
}

#home .banner foreignObject {
  height: 40vh;
}

#home .banner foreignObject video {
  opacity: 1;
  width: 200vw;
  max-width: 300%;
  height: auto;
}

@media only screen and (min-width: 1024px) {
  #home .banner foreignObject {
    height: 160vh;
  }

  #home .banner foreignObject video {
    width: 115vw;
    max-width: 210%;
    height: auto;
  }
}

@media only screen and (min-width: 1280px) {
  #home .banner foreignObject video {
    width: 115vw;
    max-width: 100%;
    height: auto;
  }
}

@media only screen and (min-width: 1920px) {
  #home .banner foreignObject video {
    width: 115vw;
    max-width: 100%;
    height: auto;
  }
}

#home #hero {
  z-index: 50;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  #home #hero {
    position: absolute;
    top: 100vh;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 1200px) {
  #home #hero {
    top: 50vh;
  }
}

@media only screen and (min-width: 1024px) {
  #home #hero {
    top: 100vh;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) and (min-height: 1200px) {
  #home #hero {
    top: 50vh;
  }
}

#home #hero .hero-txt-holder {
  height: 120px;
  padding-top: 50px;
}

@media only screen and (max-width: 480px) {
  #home #hero .hero-txt-holder {
    padding-top: 25px;
  }
}

@media only screen and (max-width: 480px) and (min-height: 800px) {
  #home #hero .hero-txt-holder {
    padding-top: 50px;
  }
}

@media only screen and (min-width: 768px) {
  #home #hero .hero-txt-holder {
    height: 180px;
  }
}

@media only screen and (max-width: 767px) {
  #home #hero .hero-txt-holder {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: auto;
    min-height: 80px;
    display: flex;
  }
}

#home #hero .hero-txt-holder p {
  font-size: 1.8em;
  font-weight: 600;
}

@media only screen and (max-width: 767px) {
  #home #hero .hero-txt-holder p {
    font-size: .85em;
  }
}

@media only screen and (max-width: 380px) {
  #home #hero .hero-txt-holder p {
    font-size: .75em;
  }
}

#home #hero .hero-txt-holder div {
  text-align: center;
  opacity: 0;
  width: fit-content;
  padding-top: 50px;
  transition: all .4s ease-in-out;
  position: absolute;
}

@media only screen and (max-width: 767px) {
  #home #hero .hero-txt-holder div {
    opacity: 1;
    position: static;
    padding-top: 0 !important;
  }
}

#home #hero .hero-txt-holder div:first-child {
  padding-top: 100px;
  transition-delay: .1s;
  left: calc(50% - 356px);
}

#home #hero .hero-txt-holder div:nth-child(2) {
  padding-top: 100px;
  transition-delay: .2s;
  left: calc(50% - 154px);
}

#home #hero .hero-txt-holder div:nth-child(3) {
  padding-top: 100px;
  transition-delay: .3s;
  left: calc(50% - 100px);
}

#home #hero .hero-txt-holder div:nth-child(4) {
  padding-top: 100px;
  transition-delay: .4s;
  left: calc(50% + 155px);
}

#home #hero .hero-txt-holder div:nth-child(5) {
  padding-top: 100px;
  transition-delay: .5s;
  left: calc(50% + 205px);
}

#home #hero .hero-txt-holder.active div {
  opacity: 1;
  padding-top: 0;
}

#home #xrdna-stack {
  background-color: #080808;
}

#home #xrdna-stack .round-xpand-btn {
  left: 0;
  transform: none;
}

#home #xrdna-stack .stack-wrapper {
  height: 230px;
  position: relative;
}

@media (min-width: 640px) {
  #home #xrdna-stack .stack-wrapper {
    height: 400px;
  }
}

#home #xrdna-stack .stack-ani {
  zoom: .4;
}

@media (min-width: 640px) {
  #home #xrdna-stack .stack-ani {
    zoom: .5;
  }
}

@media (min-width: 1024px) {
  #home #xrdna-stack .stack-ani {
    zoom: .75;
  }
}

@media (min-width: 1024px) and (min-height: 1300px) {
  #home #xrdna-stack .stack-ani {
    zoom: .5;
  }
}

@media (min-width: 1280px) and (max-height: 800px) {
  #home #xrdna-stack .stack-ani {
    zoom: .65;
  }
}

#home #xrdna-stack .stack-ani .icon-logo {
  z-index: 2;
  opacity: .2;
  position: absolute;
}

#home #xrdna-stack .stack-ani .stack-1 {
  z-index: 5;
  width: 350px;
  position: absolute;
  top: -50px;
  right: 102px;
}

#home #xrdna-stack .stack-ani .stack-1 .stack-img {
  opacity: .8;
  z-index: 1;
  position: absolute;
  top: -50px;
}

#home #xrdna-stack .stack-ani .stack-1 .icon-logo {
  width: 55px;
  top: -10px;
  right: 148px;
}

#home #xrdna-stack .stack-ani .stack-1 .brand-logo {
  height: 58px;
  position: absolute;
  top: 11px;
  left: -370px;
}

#home #xrdna-stack .stack-ani .stack-2 {
  z-index: 4;
  width: 300px;
  position: absolute;
  top: 147px;
  right: 128px;
}

#home #xrdna-stack .stack-ani .stack-2 .stack-img {
  opacity: .8;
  z-index: 1;
  position: absolute;
}

#home #xrdna-stack .stack-ani .stack-2 .icon-logo {
  width: 52px;
  top: 39px;
  right: 124px;
}

#home #xrdna-stack .stack-ani .stack-2 .brand-logo {
  height: 58px;
  position: absolute;
  top: 48px;
  left: -300px;
}

#home #xrdna-stack .stack-ani .stack-3 {
  z-index: 3;
  width: 350px;
  position: absolute;
  top: 384px;
  right: 103px;
}

#home #xrdna-stack .stack-ani .stack-3 .stack-img {
  opacity: .8;
  z-index: 1;
  position: absolute;
}

#home #xrdna-stack .stack-ani .stack-3 .icon-logo {
  width: 55px;
  top: 45px;
  right: 148px;
}

#home #xrdna-stack .stack-ani .stack-3 .brand-logo {
  height: 58px;
  position: absolute;
  top: 57px;
  left: -326px;
}

#home #xrdna-stack img {
  max-width: unset;
}

#home .banner {
  background: #0c0c0c;
}

@media screen and (min-width: 1024px) and (min-height: 1300px) {
  #home #eva-banner {
    min-height: 650px;
  }

  #home #eva-banner img {
    max-width: 125%;
  }
}

#home .banner-content {
  background: #0c0c0c;
  position: relative;
  overflow: hidden;
}

@media screen and (min-width: 1280px) {
  #home .banner-content {
    margin: auto 0;
  }
}

#home .banner-content .human {
  max-width: none;
  position: relative;
  right: 50%;
}

@media screen and (min-width: 768px) {
  #home .banner-content .human {
    right: 25%;
  }
}

@media screen and (min-width: 1280px) {
  #home .banner-content .human {
    right: 15%;
  }
}

@media screen and (min-width: 1920px) {
  #home .banner-content .human {
    right: -20%;
  }
}

@media screen and (min-width: 2500px) {
  #home .banner-content .human {
    right: -45%;
  }
}

@media screen and (max-width: 1024px) {
  #home .m-height {
    min-height: 580px;
  }
}

#home .txt-content {
  z-index: 3;
}

#home .txt-content .desc-block {
  width: 70%;
  margin-top: 4%;
}

@media screen and (max-width: 1280px) {
  #home .txt-content .desc-block {
    width: 80%;
  }
}

#home #mission, #home .capabilities-hero, #home .mission-section, #home #nv-bullets {
  background: #101010fc;
  padding: 5% 13%;
  position: relative;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  #home #mission, #home .capabilities-hero, #home .mission-section, #home #nv-bullets {
    padding: 5% 2%;
  }
}

#home #mission .animated-text, #home .capabilities-hero .animated-text, #home .mission-section .animated-text, #home #nv-bullets .animated-text {
  float: right;
}

#home #mission .content-block, #home .capabilities-hero .content-block, #home .mission-section .content-block, #home #nv-bullets .content-block {
  z-index: 5;
  background-color: #0c0c0cc2;
  position: relative;
}

#home #mission .content-block .desc-holder, #home .capabilities-hero .content-block .desc-holder, #home .mission-section .content-block .desc-holder, #home #nv-bullets .content-block .desc-holder {
  background-image: linear-gradient(to right, #060606b8, #0000);
  border-image: linear-gradient(to right, #7f7f7f70, #7b848721, #a1b2b900) 1;
}

#home #mission .parallax-bg, #home .capabilities-hero .parallax-bg, #home .mission-section .parallax-bg, #home #nv-bullets .parallax-bg {
  z-index: 3;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
}

#home #mission .parallax-bg {
  background-image: url("/website/img/parallax/xrdna-orchestration-2.webp");
  height: 1200px;
}

@media only screen and (max-width: 1280px) {
  #home #mission .txt-content {
    padding: 0;
  }

  #home #mission .animated-text {
    float: left;
  }
}

#home #mission .desc-holder {
  margin: 50px 0;
}

@media only screen and (max-width: 1280px) {
  #home #mission .desc-holder {
    margin: 0;
    padding: 0;
    background-image: none !important;
  }
}

@media screen and (max-width: 768px) {
  #home #capabilities {
    padding: 5% 2%;
  }
}

@media only screen and (max-width: 1280px) {
  #home #capabilities .animated-text {
    float: left;
    padding-left: 5%;
  }
}

#home #capabilities .parallax-bg {
  opacity: .2;
  background-image: url("/website/img/tmp/xrdna-capability-bg-5.webp");
  height: 1800px;
}

#home #capabilities h2 {
  line-height: 6rem;
}

#home #capabilities .card-title {
  line-height: 28px;
}

@media only screen and (max-width: 1280px) {
  #home #capabilities .desc-holder {
    background-image: none !important;
  }
}

@media only screen and (min-width: 1280px) {
  #home #capabilities .desc-holder {
    padding: 20px;
  }
}

#home .info-card {
  background-color: #0c0c0cd6;
  border: 1px solid #939db833;
  border-radius: 10px;
  height: 600px;
  position: relative;
  overflow: hidden;
}

@media only screen and (min-width: 640px) {
  #home .info-card {
    height: 540px;
  }
}

@media only screen and (min-width: 1024px) and (min-height: 1200px) {
  #home .info-card {
    height: 680px;
  }
}

@media only screen and (min-width: 1280px) {
  #home .info-card {
    height: 830px;
  }
}

@media only screen and (min-width: 1280px) and (max-height: 900px) {
  #home .info-card {
    height: 680px;
  }

  #home .info-card .container {
    height: 580px;
  }
}

@media only screen and (min-width: 1920px) {
  #home .info-card {
    height: 750px;
  }
}

#home .info-card .card-title {
  border-bottom: 1px solid #181818;
  padding: 15px 50px;
  font-size: 25px;
}

#home .info-card .btn-holder {
  margin-left: 50%;
  display: block;
}

#home #solution {
  background-color: #080808;
  padding: 5% 0 10%;
}

@media only screen and (max-width: 768px) {
  #home #solution {
    height: 925px;
  }
}

#home #solution .text2 {
  position: relative;
}

@media only screen and (max-width: 1280px) {
  #home #solution .text2 {
    max-width: 70%;
    left: 20%;
  }
}

@media only screen and (max-width: 768px) {
  #home #solution .text2 {
    max-width: 90%;
    left: 35%;
  }
}

#home #solution .round-xpand-btn {
  left: 0;
  transform: none;
}

#home #solution .nmp-panels {
  position: relative;
}

@media only screen and (max-width: 1280px) {
  #home #solution .nmp-panels {
    zoom: .7;
  }
}

@media only screen and (max-width: 768px) {
  #home #solution .nmp-panels {
    zoom: .5;
    padding-bottom: 100px;
    position: relative;
    left: 200px;
  }
}

#home #solution .nmp-panel-1 {
  position: absolute;
  right: 60%;
}

#home #solution .nmp-panel-1 img {
  opacity: .3;
  transform: perspective(1000px)rotateY(60deg);
}

#home #solution .nmp-panel-2 {
  position: absolute;
  right: 40%;
}

#home #solution .nmp-panel-2 img {
  opacity: .5;
  transform: perspective(1000px)rotateY(60deg);
}

#home #solution .nmp-panel-3 {
  position: absolute;
  right: 20%;
}

#home #solution .nmp-panel-3 img {
  opacity: .8;
  transform: perspective(1000px)rotateY(60deg);
}

#home #solution .nmp-panel-4 {
  position: absolute;
  right: -5%;
}

#home #solution .nmp-panel-4 img {
  transform: perspective(1000px)rotateY(60deg);
}

#home #solution img {
  max-width: unset;
}

#home #knowledge {
  background: #0e0e0e;
  overflow: hidden;
}

@media screen and (min-width: 768px) {
  #home #knowledge h2 {
    margin-bottom: 20px;
  }
}

@media screen and (min-width: 1024px) {
  #home #knowledge {
    min-height: 550px;
  }
}

@media screen and (min-width: 1280px) {
  #home #knowledge {
    min-height: 750px;
  }
}

#home #knowledge .nv-logo {
  width: 350px;
  position: absolute;
  right: -60px;
}

#home #knowledge .text2 {
  position: relative;
}

@media screen and (max-width: 1280px) {
  #home #knowledge .text2 {
    z-index: 10;
  }
}

@media screen and (min-width: 768px) {
  #home #knowledge .text2 {
    margin-top: 100px;
  }
}

#home #knowledge .nv-bullet {
  color: #717171;
  margin-bottom: 31px;
}

#home #knowledge .nv-bullet .nv-icon {
  opacity: .6;
  height: 44px;
  margin-top: -39px;
  position: absolute;
  right: -64px;
}

#home #knowledge .round-xpand-btn {
  bottom: -31px;
  right: -67px;
  transform: none;
}

@media screen and (max-width: 1280px) {
  #home #knowledge .round-xpand-btn {
    right: 15%;
  }
}

#home #knowledge .knowledge-panels {
  z-index: 0;
  zoom: .25;
  height: 700px;
  margin-top: 250px;
  position: relative;
}

@media screen and (min-width: 768px) {
  #home #knowledge .knowledge-panels {
    zoom: .6;
  }
}

@media screen and (min-width: 1024px) {
  #home #knowledge .knowledge-panels {
    zoom: .45;
  }
}

@media screen and (min-width: 1280px) {
  #home #knowledge .knowledge-panels {
    zoom: .6;
    margin-top: 0;
  }
}

#home #knowledge .animated-text {
  height: auto;
}

#home #knowledge .nmp-panel-1 {
  z-index: 7;
  opacity: .61;
  margin-top: -148px;
  right: calc(50% + 305px);
}

#home #knowledge .nmp-panel-2 {
  z-index: 6;
  opacity: .7;
  margin-top: 341px;
  right: calc(50% + 208px);
}

#home #knowledge .nmp-panel-3 {
  z-index: 5;
  opacity: .22;
  margin-top: -177px;
  right: calc(50% - 652px);
}

#home #knowledge .fade-element {
  animation: 4s infinite alternate fadeInOut;
}

#home #knowledge .nmp-panel-4 {
  z-index: 6;
  opacity: .6;
  margin-top: -93px;
  right: calc(50% - 709px);
}

#home #knowledge .nmp-panel-5 {
  z-index: 7;
  opacity: .5;
  margin-top: 327px;
  right: calc(50% - 657px);
}

#home #knowledge .nmp-panel-6 {
  z-index: 8;
  opacity: .6;
  margin-top: 557px;
  right: calc(50% - 593px);
}

#home #nv-bullets {
  background: none;
  padding: 0%;
}

#home #nv-bullets .content-block {
  z-index: 2;
  padding: 5% 8%;
}

@media (min-width: 1024px) {
  #home #nv-bullets .content-block {
    padding: 5% 13%;
  }
}

#home #nv-bullets .content-block .text-title-xl2 {
  font-size: 33px;
  line-height: 35px;
}

#home #nv-bullets .parallax-bg {
  z-index: 1;
  opacity: .3;
  background-image: url("/website/img/parallax/nv-bg-1.webp");
  height: 1200px;
}

#home #nv-bullets .btn-container {
  width: 150px;
  position: absolute;
  left: 50%;
}

#home #nv-bullets .round-xpand-btn {
  margin-top: 50px;
  position: relative;
  transform: none;
}

#home #human .right {
  position: relative;
}

@media screen and (min-width: 1280px) {
  #home #human .txt-content {
    width: 70%;
  }
}

#home #calltoaction .round-xpand-btn {
  right: calc(50% - 60px);
  transform: none;
}

#home #modularized {
  padding: 0 8% 10%;
}

@media screen and (min-width: 1280px) {
  #home #modularized {
    height: 650px;
    padding: 0 8%;
  }
}

@media screen and (max-width: 1280px) {
  #home #modularized .txt-content {
    padding-left: 15%;
  }
}

@media screen and (min-width: 1280px) {
  #home #modularized .txt-content {
    padding: 0 5% 0 20%;
  }
}

@media screen and (max-width: 768px) {
  #home #modularized .txt-content {
    position: relative;
    left: 35%;
  }
}

#home #modularized .main-container {
  align-items: center;
  height: 560px;
  min-height: 500px;
  display: -webkit-flex;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  #home #modularized .main-container {
    height: 350px;
    min-height: 350px;
  }
}

#home #modularized .main {
  width: 480px;
  height: 480px;
  margin: 0 auto;
  position: relative;
}

@media screen and (max-width: 768px) {
  #home #modularized .main {
    zoom: .6;
  }
}

#home #modularized .big-circle {
  border: 3px solid #7b7b7b;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  animation: 20s linear infinite Rotate;
  display: -webkit-flex;
  position: relative;
}

#home #modularized .icon-block {
  background: radial-gradient(circle, #3b3b3b 0%, #000 100%);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: -webkit-flex;
  position: absolute;
  box-shadow: 0 2px 4px #000;
}

#home #modularized .icon-block img {
  width: 70%;
  margin: 0 auto;
  animation: 20s linear infinite Rotate-reverse;
}

#home #modularized .icon-block:first-child {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

#home #modularized .icon-block:nth-child(2) {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
}

#home #modularized .icon-block:nth-child(3) {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
}

#home #modularized .icon-block:nth-child(4) {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}

#home #modularized .circle {
  border: 3px solid #7b7b7b;
  border-radius: 50%;
  width: 75%;
  height: 75%;
  animation: 20s linear infinite circle-rotate;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)rotate(45deg);
}

#home #modularized .circle .icon-block img, #home #modularized .circle .icon-block .icon, #home #modularized .circle .icon-block .icon {
  animation: 20s linear infinite img-rotate;
}

#home #modularized .circle .icon-block .icon {
  width: 35px;
}

#home #modularized .center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#home #modularized .center-logo img {
  max-width: 200px;
}

@keyframes Rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

@-webkit-keyframes Rotate {
  from {
    -webkit-transform: rotate(0);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes Rotate-reverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0);
  }
}

@-webkit-keyframes Rotate-reverse {
  from {
    -webkit-transform: rotate(360deg);
  }

  to {
    -webkit-transform: rotate(0);
  }
}

@keyframes circle-rotate {
  from {
    transform: translate(-50%, -50%)rotate(45deg);
  }

  to {
    transform: translate(-50%, -50%)rotate(405deg);
  }
}

@-webkit-keyframes circle-rotate {
  from {
    -webkit-transform: translate(-50%, -50%)rotate(45deg);
  }

  to {
    -webkit-transform: translate(-50%, -50%)rotate(405deg);
  }
}

@keyframes img-rotate {
  from {
    transform: rotate(-45deg);
  }

  to {
    transform: rotate(-405deg);
  }
}

@-webkit-keyframes img-rotate {
  from {
    -webkit-transform: rotate(-45deg);
  }

  to {
    -webkit-transform: rotate(-405deg);
  }
}

#home .animated-text span {
  float: left;
  text-transform: uppercase;
  text-align: center;
  font-size: 1.6em;
}

#home .animated-text span:first-child {
  -ms-animation: one 2s infinite;
  animation: 2s infinite one;
}

#home .animated-text span:nth-child(2) {
  -ms-animation: two 2s infinite;
  animation: 2s infinite two;
}

#home .animated-text span:nth-child(3) {
  -ms-animation: three 2s infinite;
  animation: 2s infinite three;
}

#home .animated-text span:nth-child(4) {
  -ms-animation: four 2s infinite;
  animation: 2s infinite four;
}

#home .animated-text span:nth-child(5) {
  -ms-animation: five 2s infinite;
  animation: 2s infinite five;
}

#home .animated-text span:nth-child(6) {
  -ms-animation: six 2s infinite;
  animation: 2s infinite six;
}

#home .animated-text span:nth-child(7) {
  -ms-animation: seven 2s infinite;
  animation: 2s infinite seven;
}

#home .animated-text span:nth-child(8) {
  -ms-animation: eight 2s infinite;
  animation: 2s infinite eight;
}

#home .animated-text span:nth-child(9) {
  -ms-animation: nine 2s infinite;
  animation: 2s infinite nine;
}

#home .animated-text span:nth-child(10) {
  -ms-animation: ten 2s infinite;
  animation: 2s infinite ten;
}

#home .animated-text span:nth-child(11) {
  -ms-animation: eleven 2s infinite;
  animation: 2s infinite eleven;
}

#home .animated-text span:nth-child(12), #home .animated-text span:nth-child(13) {
  -ms-animation: twelve 2s infinite;
  animation: 2s infinite twelve;
}

@keyframes one {
  0% {
    opacity: 1;
  }

  7.69% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes two {
  0% {
    opacity: 1;
  }

  15.38% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes three {
  0% {
    opacity: 1;
  }

  23.08% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes four {
  0% {
    opacity: 1;
  }

  30.77% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes five {
  0% {
    opacity: 1;
  }

  38.46% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes six {
  0% {
    opacity: 1;
  }

  46.15% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes seven {
  0% {
    opacity: 1;
  }

  53.85% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes eight {
  0% {
    opacity: 1;
  }

  61.54% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes nine {
  0% {
    opacity: 1;
  }

  69.23% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes ten {
  0% {
    opacity: 1;
  }

  76.92% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes eleven {
  0% {
    opacity: 1;
  }

  84.62% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes twelve {
  0% {
    opacity: 1;
  }

  92.31% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#home .profile-nav {
  width: 68px;
}

#home .profile-nav ul {
  border-radius: 7px;
  width: 150px;
  overflow: hidden;
}

#home .profile-nav ul li {
  background-color: #191919;
  width: 150px;
}