/***    
    Flux: Thomas Trinca
    Matrix: Nick Matantsev
    Clip: Melodysheep
    Frames: Unkown Artist
***/

.date {
  display:block;
  color: #303030;
  font-size: 20px;
}

.title{
  color: #1377BD;
  font-size: 16px;
  margin: 4px;
  font-weight:500;
  animation: fadeInUp 5s alternate-reverse ;
}

@keyframes fadeInUp {
  to {
      opacity: 1;
      transform: translateY(-40vh) ;
  }
}

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

.good{
  position: absolute;	
  left: 500px;
  top: 2000px;
  width: 40px;
  height: auto;
  animation: fly 5s linear infinite ;
}
.bad{
  position: absolute;	
  left: 10px;
  top: 2500px;
  width: 40px;
  height: auto;
  animation: fly 4s linear infinite ;
}

.ugly{
  position: absolute;	
  left: 10px;
  top: 3000px;
  width: 40px;
  height: auto;
  animation: fly 3s linear infinite ;
}

.kill{
  position: absolute;	
  left: 700px;
  top: 4000px;
  width: 40px;
  height: auto;
  animation: fly 3s linear infinite;
}

.jets{
  position: absolute;	
  left: 1500px;
  top: 3800px;
  width: 40px;
  height: auto;
  animation: moveBottomToTop 100s linear infinite;
}

.j1{
  position: absolute;	
  left: 1500px;
  top: 3300px;
  width: 40px;
  height: auto;
  animation: moveDiagonal 20s linear infinite;
}

.j2{
  position: absolute;	
  left: 2000px;
  top: 3500px;
  width: 40px;
  height: auto;
  animation: moveDiagonal 15s linear infinite;
}

.j3{
  position: absolute;	
  left: 3500px;
  top: 3800px;
  width: 40px;
  height: auto;
  animation: moveDiagonal 17s linear infinite;
}

@keyframes moveDiagonal {
  0% {
    left: 3500px;
    top: 4000px;
    transform: translate(0%, 0%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(20deg);
  }
  100% {
    left: 0;
    top: 1700px;
    transform: translate(-100%, -100%) rotate(-20deg);
  }
}

@keyframes moveBottomToTop {
  0% {
    top: 100%;
  }
  100% {
    top: -100%;
  }
}

.tarkan{
  position: absolute;	
  left: 750px;
  top: 4500px;
  width: 40px;
  height: auto;
  animation: fly 5s linear infinite ;
}

.huxley{
  position: absolute;	
  left: 750px;
  top: 3500px;
  width: 40px;
  height: auto;
  animation: fly 7s linear infinite ;
}

.sisyphos{
  position: absolute;	
  left: 750px;
  top: 4000px;
  width: 40px;
  height: auto;
  animation: fly 8s linear infinite ;
}
.lee{
  position: absolute;	
  left: 150px;
  top: 5000px;
  width: 40px;
  height: auto;
  animation: fly 4s linear infinite ;
}
@keyframes fly {
      0% {
        transform: translate(var(--x-start, 0), var(--y-start, 0));
      }
      100% {
        transform: translate(var(--x-end, 1000px), var(--y-end, 1000px));
      }
    }

@keyframes rotateStar {
  0%{
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.title:hover {
  text-decoration: none !important;
}

.content{
  display:block;
  color: #303030;
  margin:4px;
  font-weight:300;
}

.container{
  max-width: 100;
  /* animation: fadeOut 100s infinite; */
}

@keyframes moveNavbar {
  0% { transform: translateX(0); } 
  50% { transform: translateX(300px); } 
  100% { transform: translateX(-300px); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.icon-title{
    display: flex;
    align-items: center;
}

.list {
  list-style-type:none;
}

@keyframes moveContainerUp {
  from {
      top: 1100px;
  }
  to {
      top: 0;
  }
}

@keyframes moveContainerBottom {
  from {
      top: 0;
  }
  to {
      top: 1100px; 
  }
}

@keyframes moveContainerRight {
  from {
      left: 0;
  }
  to {
      left: 1769px; 
  }
}

@keyframes moveContainerLeft {
  from {
      right: 0;
  }
  to {
      right: 1769px;
  }
}

.image-container-bottom-right {
  position: relative;
  width: 900px; 
  height: 850px; 
  /* animation: moveContainerLeft 4s infinite alternate,  rotateAnimation 4s infinite; */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  ; 
}

.image-container-left {
  position: relative;
  width: 1300px; 
  height: 150px;
  /* animation: rotateAnimation 6s infinite, moveContainerUp 6s infinite alternate; */
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}


.rotate-image {
  transform-origin: center; 
  animation: rotateAnimation 10s linear infinite; 
}


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

.image-container-street {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-street img {
  display: block; 
  width: 213%; 
  height: auto; 
}

.image-container-esther {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-esther img {
  display: block; 
  width: 213%; 
  height: auto; 
}

.image-container-kapa {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-kapa img {
  display: block; 
  width: 213%; 
  height: auto; 
}

.image-container-pers {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-pers img {
  display: block; 
  width: 213%; 
  height: auto; 
}

.image-container-magic {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-magic img {
  display: block; 
  width: 213%; 
  height: auto; 
}

.image-container-race {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-race img {
  display: block; 
  width: 133%; 
  height: auto; 
}

.image-container-tour {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-tour img {
  display: block; 
  width: 120%; 
  height: auto; 
}

.image-container-itu {
  display: inline-block;
}
.image-container-itu img {
  display: block; 
  width: 224%; 
  height: auto; 
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}

.image-container-kuleli {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-kuleli img {
  display: block; 
  width: 120%; 
  height: auto; 
}

.image-container-ski {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-ski img {
  display: block; 
  width: 120%; 
  height: auto; 
}

.image-container-kuleli {
  display: inline-block;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
}
.image-container-kuleli img {
  display: block; 
  width: 120%; 
  height: auto; 
}

@keyframes fadeInUp {
  to {
      opacity: 1;
      transform: translateY(-40vh) ;
  }
}

@keyframes moveRightToLeft {
  0% {
    left: 90%;
    transform: rotate(360deg);
  }
  100% {
    left: 0;
    transform: rotate(0deg);
  }
}

@font-face {
  font-family: neon;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/neon.ttf);
}

.neon1 {
  position: absolute;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  top: 10px;
  right: 10px;
}

.neon {
  font-family: neon;
  color: #FB4264;
  font-size: 9vw;
  line-height: 9vw;
  text-shadow: 0 0 3vw #F40A35;
}

.flux {
  font-family: neon;
  color: #426DFB;
  font-size: 9vw;
  line-height: 9vw;
  text-shadow: 0 0 3vw #2356FF;
}

.neon {
  animation: neon 1s ease infinite;
  -moz-animation: neon 2s ease infinite;
  -webkit-animation: neon 3s ease infinite;
}

@keyframes neon {
  0%,
  100% {
    text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #FED128;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    color: #806914;
  }
}

.flux {
  animation: flux 1s linear infinite;
  -moz-animation: flux 2s linear infinite;
  -webkit-animation: flux 3s linear infinite;
  -o-animation: flux 4s linear infinite;
}

@keyframes flux {
  0%,
  100% {
    text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
    color: #28D7FE;
  }
  50% {
    text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
    color: #146C80;
  }
}

#video {
  position: fixed;
  top: 50%;
  left: 50%;
  object-fit: cover; 
  filter: brightness(100%);
  opacity: 0.5; 
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
}

.referral {
  position: fixed;
  bottom: 10px; /* Distance from the top of the page */
  left: 10px; /* Distance from the right edge of the page */
  text-align: right; /* Align text to the right */
  background-color: rgba(26, 47, 131, 0.335); /* Optional: semi-transparent background */
  padding: 5px; /* Optional: add some padding */
  font-size: 14px; /* Adjust font size as needed */
  color: #000; /* Set text color */
}