@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans+Condensed:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i|IBM+Plex+Serif:400,400i");
 

/* swiper */

.swiper-container {
   padding: 0;
   height: 75vh;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
}

.swiper-slide {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: left;
   transition: all 0.3s ease;
   background-position: fixed;
}

.swiper-item {
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.3s ease;
   position: absolute;
}

.swiper-slide .number {
   width: auto;
   height: auto;
   position: absolute;
   right: 10px;
   bottom: -40px;
   font-size: 120px;
   -webkit-text-stroke: 1px white;
   color: transparent;
   font-weight: 600;
   opacity: 0.3;
}

@media screen and (max-width: 512px) {
   .swiper-slide .number {
      display: none;
   }

   .swiper-item {
      width: 100%;
   }
}

.swiper-item:after {
   content: "";
   background-color: black;
   position: absolute;
   width: 100%;
   height: inherit;
   bottom: 0;
   z-index: 1;
   opacity: 0.1;
}

.swiper-item:before {
   content: "";
   //background-image: linear-gradient(to bottom, black 0%, transparent 100%);
   position: absolute;
   width: 100%;
   height: 30%;
   top: 0;
   z-index: 1;
   opacity: 0.2;
}

/* swiper arrows */

.swiper-arrows {
   width: 85px;
   height: 80px;
   position: absolute;
   display: flex;
   justify-content: center;
   align-items: center;
   bottom: 0px;
   right: 20%;
}

@media screen and (max-width: 512px) {
   .swiper-arrows {
      right: 10%;
   }
}

.swiper-button-prev,
.swiper-button-next {
   width: 80px;
   height: 80px;
   background-image: none;
   display: flex;
   align-items: center;
   justify-content: center;
   top: 0;
   bottom: 0;
   margin: 0;
   transition: all 0.3s ease;
}

.swiper-button-prev {
   right: 80px;
   left: auto;
   background-color: rgba(255, 255, 255, 0.7);
}

.swiper-button-next {
   right: 0px;
   background-color: rgba(255, 255, 255, 0.8);
}

.swiper-button-prev span,
.swiper-button-next span {
   width: 10px;
   height: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: transparent;
   position: absolute;
   border: solid 2px #666666;
   border-left: 0;
   border-bottom: 0;
   transition: all 0.1s ease;
}

.swiper-button-prev span {
   transform: rotate(-135deg);
   left: 49%;
}

.swiper-button-next span {
   transform: rotate(45deg);
   right: 49%;
}

.swiper-button-prev:hover span,
.swiper-button-next:hover span {
   width: 5px;
   height: 5px;
}

.swiper-button-prev:after,
.swiper-button-next:after {
   width: 0px;
   height: inherit;
   content: "";
   position: absolute;
   background-color: white;
   transition: all 0.4s ease-in-out;
   z-index: -1;
   opacity: 0.8;
}

.swiper-button-prev:after {
   right: 0;
}

.swiper-button-next:after {
   left: 0;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after {
   width: inherit;
}
.swiper-button-disabled {
   opacity: 1 !important;
}
.swiper-button-disabled.swiper-button-prev span,
.swiper-button-disabled.swiper-button-next span {
   opacity: 0.2;
}

/* swiper arrows mobile */

@media screen and (max-width: 512px) {
   .swiper-button-prev,
   .swiper-button-next {
      width: 60px;
      height: 60px;
      bottom: 0;
   }
   .swiper-arrows {
      height: 60px;
   }

   .swiper-button-prev {
      right: 60px;
   }
   .swiper-button-prev span {
      left: 45%;
   }

   .swiper-button-next span {
      right: 45%;
   }
}

/* swiper pagination */

.swiper-pagination {
   height: 3px;
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 60px !important;
   right: calc(20% - 60px);
   top: 20px;
   float: right;
   position: absolute;
   left: auto !important;
}

.swiper-container-horizontal
   > .swiper-pagination-bullets
   .swiper-pagination-bullet {
   margin: 10px 0px;
}

.swiper-pagination-bullet {
   background-color: white;
   opacity: 1;
   transition: all 0.3s ease-in-out;
   width: 30px;
   height: 3px;
   border-radius: 0px;
   opacity: 0.5;
}

.swiper-pagination-bullet:hover {
   width: 50px;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active:hover {
   width: 60px;
   transition: all 0.3s ease-in-out;
   left: 0;
   background-color: white;
   opacity: 1;
}

/* swiper pagination mobile */

@media screen and (max-width: 512px) {
   .swiper-pagination {
      right: calc(10% - 60px);
   }

   .swiper-pagination-bullet,
   .swiper-pagination-bullet:hover {
      width: 15px;
   }

   .swiper-container-horizontal
      > .swiper-pagination-bullets
      .swiper-pagination-bullet {
      margin: 8px 0px;
   }

   .swiper-pagination-bullet-active,
   .swiper-pagination-bullet-active:hover {
      width: 25px;
   }
}

/* text content */

.slide-text {
   text-align: left;
   color: white;
   opacity: 1;
   z-index: 2;
   width: 40%;
   max-width: 550px;
   padding: 30px;
   margin: 0px auto 0 10%;
   animation: transitionText 2s ease;
}
.slide-text.playText {
   display:block;
   animation: transitionText 2s ease;
}

@keyframes transitionText {
   0% {
      right: -100%;
   }
   100% {
      right: 5%;
   }
}

.slide-text h1 {
   font-size: 20px;
   line-height: 30px;
   letter-spacing: 0.03em;
   margin: 0;
   padding: 0;
   font-weight: 900;
}

.slide-text p {
   margin: 10px 0 0 0;
   font-size: 15px; 
}

/* text content mobile */

@media screen and (max-width: 512px) {
   .slide-text {
      width: 60%;
   }

   .slide-text h1 {
      font-size: 15px;
      letter-spacing: 0.02em;
   }

   .slide-text p {
      font-size: 14px;
   }
}

/* button */

.slide-text .btn {
   background-color: transparent;
   font-size: 14px;
   letter-spacing: 2px;
   color: white;
   position: relative;
   transition: all 0.3s ease-in-out;
   cursor: pointer;
   margin-top: 20px;
   border: 0;
   padding: 0 15px;
   left: 0;
}

.slide-text .btn:before {
   content: "";
   background-color: white;
   width: 2px;
   height: 20px;
   position: absolute;
   z-index: 2;
   left: -1px;
   top: -1px;
   border-radius: inherit;
   transition: all 0.3s ease-in-out;
}

.slide-text .btn:after {
   content: "";
   width: 0px;
   height: 0px;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: transparent;
   position: absolute;
   border: solid 2px transparent;
   border-left: 0;
   border-bottom: 0;
   transform: rotate(45deg);
   top: 3px;
   left: -10px;
   transition: all 0.3s ease-in-out;
}

.slide-text .btn:hover::before {
   left: 11px;
   transform: rotate(90deg);
}
.slide-text .btn:hover::after {
   border: solid 2px white;
   border-left: 0;
   border-bottom: 0;
   left: 10px;
   width: 10px;
   height: 10px;
   opacity: 1;
}

.slide-text .btn:hover {
   padding-left: 35px;
}

button:focus {
   outline: 0;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
   background-image: none !important;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {  
   background-image: none !important;
}


@media (max-width: 992px) {
  header {
      padding-bottom: 0px !important;
  }
  #full-slider-wrapper {
      margin-top: 0px !important;
  }
  #layerslider {
      margin-top: 0px !important;
  }
  .text-slider{
      width: 760px !important;
      margin: 15% auto 0 !important;
  }
  .slide-text {
     width: 70%;
     max-width: 550px;
     padding: 30px;
     margin: 0px auto;
  }
}