@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* .fnc {
  you can add color names and their values here
  and then simply add classes like .m--blend-$colorName to .fnc-slide 
  to apply specific color for mask blend mode 
  
    $bgColors: (
      dark: lighten(#242424, 20%),
      green: #42605E,
      red: lighten(#6A0A0D, 10%),
      blue: #2D7791
    );
  
} */
.fnc-slider {
  overflow: hidden;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  height: 100vh;
}
.fnc-slider *, .fnc-slider *:before, .fnc-slider *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.fnc-slider__slides {
  position: relative;
  height: 100%;
  -webkit-transition: -webkit-transform 1s 0.6666666667s;
  transition: -webkit-transform 1s 0.6666666667s;
  transition: transform 1s 0.6666666667s;
  transition: transform 1s 0.6666666667s, -webkit-transform 1s 0.6666666667s;
}
.fnc-slider .m--blend-dark .fnc-slide__inner {
  background-color: #8a8a8a;
}
.fnc-slider .m--blend-dark .fnc-slide__mask-inner {
  background-color: #575757;
}
.fnc-slider .m--navbg-dark {
  background-color: #575757;
}
.fnc-slider .m--blend-green .fnc-slide__inner {
  background-color: #6d9b98;
}
.fnc-slider .m--blend-green .fnc-slide__mask-inner {
  background-color: #42605E;
}
.fnc-slider .m--navbg-green {
  background-color: #42605E;
}
.fnc-slider .m--blend-red .fnc-slide__inner {
  background-color: #717171;
}
.fnc-slider .m--blend-red .fnc-slide__mask-inner {
  background-color: #3e3e3e;
}
.fnc-slider .m--navbg-red {
  background-color: #3e3e3e;
}
.fnc-slider .m--blend-blue .fnc-slide__inner {
  background-color: #59aecb;
}
.fnc-slider .m--blend-blue .fnc-slide__mask-inner {
  background-color: #2D7791;
}
.fnc-slider .m--navbg-blue {
  background-color: #2D7791;
}
.fnc-slide {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.fnc-slide.m--before-sliding {
  z-index: 2 !important;
  -webkit-transform: translate3d(100%, 0, 0);
          transform: translate3d(100%, 0, 0);
}
.fnc-slide.m--active-slide {
  z-index: 1;
  -webkit-transition: -webkit-transform 1s 0.6666666667s ease-in-out;
  transition: -webkit-transform 1s 0.6666666667s ease-in-out;
  transition: transform 1s 0.6666666667s ease-in-out;
  transition: transform 1s 0.6666666667s ease-in-out, -webkit-transform 1s 0.6666666667s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.fnc-slide__inner {
  position: relative;
  height: 100%;
  background-size: cover;
  background-position: center top;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.m--global-blending-active .fnc-slide__inner, .m--blend-bg-active .fnc-slide__inner {
  background-blend-mode: luminosity;
}
.m--before-sliding .fnc-slide__inner {
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
}
.m--active-slide .fnc-slide__inner {
  -webkit-transition: -webkit-transform 1s 0.6666666667s ease-in-out;
  transition: -webkit-transform 1s 0.6666666667s ease-in-out;
  transition: transform 1s 0.6666666667s ease-in-out;
  transition: transform 1s 0.6666666667s ease-in-out, -webkit-transform 1s 0.6666666667s ease-in-out;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.fnc-slide__mask {
  overflow: hidden;
  z-index: 1;
  position: absolute;
  right: 60%;
  top: 15%;
  width: 50.25vh;
  height: 67vh;
  margin-right: -90px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
.m--before-sliding .fnc-slide__mask {
  -webkit-transform: rotate(-10deg) translate3d(200px, 0, 0);
          transform: rotate(-10deg) translate3d(200px, 0, 0);
  opacity: 0;
}
.m--active-slide .fnc-slide__mask {
  -webkit-transition: opacity 0.35s 1.2222222222s, -webkit-transform 0.7s 1.2222222222s;
  transition: opacity 0.35s 1.2222222222s, -webkit-transform 0.7s 1.2222222222s;
  transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s;
  transition: transform 0.7s 1.2222222222s, opacity 0.35s 1.2222222222s, -webkit-transform 0.7s 1.2222222222s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  opacity: 1;
}
.m--previous-slide .fnc-slide__mask {
  -webkit-transition: opacity 0.35s 0.6833333333s, -webkit-transform 0.7s 0.3333333333s;
  transition: opacity 0.35s 0.6833333333s, -webkit-transform 0.7s 0.3333333333s;
  transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s;
  transition: transform 0.7s 0.3333333333s, opacity 0.35s 0.6833333333s, -webkit-transform 0.7s 0.3333333333s;
  -webkit-transform: rotate(10deg) translate3d(-200px, 0, 0);
          transform: rotate(10deg) translate3d(-200px, 0, 0);
  opacity: 0;
}
.fnc-slide__mask-inner {
  z-index: -1;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  margin-left: -50vw;
  margin-top: -50vh;
  background-size: cover;
  background-position: center center;
  background-blend-mode: luminosity;
  -webkit-transform-origin: 50% 16.5vh;
          transform-origin: 50% 16.5vh;
  -webkit-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
}
.m--before-sliding .fnc-slide__mask-inner {
  -webkit-transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);
          transform: translateY(0) rotate(10deg) translateX(-200px) translateZ(0);
}
.m--active-slide .fnc-slide__mask-inner {
  -webkit-transition: -webkit-transform 0.7s 1.2222222222s;
  transition: -webkit-transform 0.7s 1.2222222222s;
  transition: transform 0.7s 1.2222222222s;
  transition: transform 0.7s 1.2222222222s, -webkit-transform 0.7s 1.2222222222s;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.m--previous-slide .fnc-slide__mask-inner {
  -webkit-transition: -webkit-transform 0.7s 0.3333333333s;
  transition: -webkit-transform 0.7s 0.3333333333s;
  transition: transform 0.7s 0.3333333333s;
  transition: transform 0.7s 0.3333333333s, -webkit-transform 0.7s 0.3333333333s;
  -webkit-transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);
          transform: translateY(0) rotate(-10deg) translateX(200px) translateZ(0);
}
.fnc-slide__content {
  z-index: 2;
  position: absolute;
  left: 40%;
  top: 40%;
}
.fnc-slide__heading {
  margin-bottom: 10px;
  text-transform: uppercase;
}
.fnc-slide__heading-line {
  overflow: hidden;
  position: relative;
  padding-right: 20px;
  font-size: 100px;
  color: #fff;
  word-spacing: 10px;
}
.fnc-slide__heading-line:nth-child(2) {
  padding-left: 30px;
}
.m--before-sliding .fnc-slide__heading-line {
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.m--active-slide .fnc-slide__heading-line {
  -webkit-transition: -webkit-transform 1.5s 1s;
  transition: -webkit-transform 1.5s 1s;
  transition: transform 1.5s 1s;
  transition: transform 1.5s 1s, -webkit-transform 1.5s 1s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.m--previous-slide .fnc-slide__heading-line {
  -webkit-transition: -webkit-transform 1.5s;
  transition: -webkit-transform 1.5s;
  transition: transform 1.5s;
  transition: transform 1.5s, -webkit-transform 1.5s;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.fnc-slide__heading-line span {
  display: block;
}
.m--before-sliding .fnc-slide__heading-line span {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.m--active-slide .fnc-slide__heading-line span {
  -webkit-transition: -webkit-transform 1.5s 1s;
  transition: -webkit-transform 1.5s 1s;
  transition: transform 1.5s 1s;
  transition: transform 1.5s 1s, -webkit-transform 1.5s 1s;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.m--previous-slide .fnc-slide__heading-line span {
  -webkit-transition: -webkit-transform 1.5s;
  transition: -webkit-transform 1.5s;
  transition: transform 1.5s;
  transition: transform 1.5s, -webkit-transform 1.5s;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
}
.fnc-slide__action-btn {
  position: relative;
  margin-left: 200px;
  padding: 5px 15px;
  font-size: 20px;
  line-height: 1;
  color: transparent;
  border: none;
  text-transform: uppercase;
  background: transparent;
  cursor: pointer;
  text-align: center;
  outline: none;
}
.fnc-slide__action-btn span {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-perspective: 1000px;
          perspective: 1000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  line-height: 30px;
  color: #fff;
}
.fnc-slide__action-btn span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 2px solid #fff;
  border-top: none;
  border-bottom: none;
}
.fnc-slide__action-btn span:after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 30px;
  background: #1F2833;
  opacity: 0;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform: translateY(100%) rotateX(-90deg);
          transform: translateY(100%) rotateX(-90deg);
  -webkit-transition: opacity 0.15s 0.15s;
  transition: opacity 0.15s 0.15s;
}
.fnc-slide__action-btn:hover span {
  -webkit-transform: rotateX(90deg);
          transform: rotateX(90deg);
}
.fnc-slide__action-btn:hover span:after {
  opacity: 1;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}
.fnc-nav {
  z-index: 5;
  position: absolute;
  right: 0;
  bottom: 0;
}
.fnc-nav__bgs {
  z-index: -1;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.fnc-nav__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.fnc-nav__bg.m--nav-bg-before {
  z-index: 2 !important;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}
.fnc-nav__bg.m--active-nav-bg {
  z-index: 1;
  -webkit-transition: -webkit-transform 1s 0.6666666667s;
  transition: -webkit-transform 1s 0.6666666667s;
  transition: transform 1s 0.6666666667s;
  transition: transform 1s 0.6666666667s, -webkit-transform 1s 0.6666666667s;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.fnc-nav__controls {
  font-size: 0;
}
.fnc-nav__control {
  overflow: hidden;
  position: relative;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 50px;
  font-size: 14px;
  color: #fff;
  text-transform: uppercase;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-transition: background-color 0.5s;
  transition: background-color 0.5s;
}
.fnc-nav__control.m--active-control {
  background: #1F2833;
}
.fnc-nav__control-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #fff;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition-timing-function: linear !important;
          transition-timing-function: linear !important;
}
.m--with-autosliding .m--active-control .fnc-nav__control-progress {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.m--prev-control .fnc-nav__control-progress {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.5s !important;
  transition: -webkit-transform 0.5s !important;
  transition: transform 0.5s !important;
  transition: transform 0.5s, -webkit-transform 0.5s !important;
}
.m--reset-progress .fnc-nav__control-progress {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: -webkit-transform 0s 0s !important;
  transition: -webkit-transform 0s 0s !important;
  transition: transform 0s 0s !important;
  transition: transform 0s 0s, -webkit-transform 0s 0s !important;
}
.m--autosliding-blocked .fnc-nav__control-progress {
  -webkit-transition: all 0s 0s !important;
  transition: all 0s 0s !important;
  -webkit-transform: scaleX(0) !important;
          transform: scaleX(0) !important;
}

/* NOT PART OF COMMON SLIDER STYLES */
body {
  margin: 0;
}

.demo-cont {
  overflow: hidden;
  position: relative;
  height: 100vh;
  -webkit-perspective: 1500px;
          perspective: 1500px;
  background: #000;
}
.demo-cont__credits {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-y: auto;
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  padding: 20px 10px 30px;
  background: #303030;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  color: #fff;
  text-align: center;
  -webkit-transition: -webkit-transform 0.7s;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
  -webkit-transform: translate3d(100%, 0, 0) rotateY(-45deg);
          transform: translate3d(100%, 0, 0) rotateY(-45deg);
  will-change: transform;
}
.credits-active .demo-cont__credits {
  -webkit-transition: -webkit-transform 0.7s 0.2333333333s;
  transition: -webkit-transform 0.7s 0.2333333333s;
  transition: transform 0.7s 0.2333333333s;
  transition: transform 0.7s 0.2333333333s, -webkit-transform 0.7s 0.2333333333s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.demo-cont__credits *, .demo-cont__credits *:before, .demo-cont__credits *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.demo-cont__credits-close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.demo-cont__credits-close:before, .demo-cont__credits-close:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: #fff;
}
.demo-cont__credits-close:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.demo-cont__credits-close:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.demo-cont__credits-heading {
  text-transform: uppercase;
  font-size: 40px;
  margin-bottom: 20px;
}
.demo-cont__credits-img {
  display: block;
  width: 60%;
  margin: 0 auto 30px;
  border-radius: 10px;
}
.demo-cont__credits-name {
  margin-bottom: 20px;
  font-size: 30px;
}
.demo-cont__credits-link {
  display: block;
  margin-bottom: 10px;
  font-size: 24px;
  color: #fff;
}
.demo-cont__credits-blend {
  font-size: 30px;
  margin-bottom: 10px;
}

.example-slider {
  z-index: 2;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 0.7s;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
}
.credits-active .example-slider {
  -webkit-transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9);
          transform: translate3d(-400px, 0, 0) rotateY(10deg) scale(0.9);
}
.example-slider .fnc-slide-1 .fnc-slide__inner,
.example-slider .fnc-slide-1 .fnc-slide__mask-inner {
  background-image: url("./../img/slider/slider-1.jpg");
  background-position: center center;
}
.example-slider .fnc-slide-2 .fnc-slide__inner,
.example-slider .fnc-slide-2 .fnc-slide__mask-inner {
  background-image: url("./../img/slider/slider-2.jpg");
  background-position: center center;
}
.example-slider .fnc-slide-3 .fnc-slide__inner,
.example-slider .fnc-slide-3 .fnc-slide__mask-inner {
  background-image: url("./../img/slider/slider-3.jpg");
  background-position: center center;
}
.example-slider .fnc-slide-3 .fnc-slide__inner:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
}
.example-slider .fnc-slide-4 .fnc-slide__inner,
.example-slider .fnc-slide-4 .fnc-slide__mask-inner {
  background-image: url("./../img/slider/slider-4.jpg");
  background-position: center center;
}
.example-slider .fnc-slide-4 .fnc-slide__inner:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
.example-slider .fnc-slide__heading,
.example-slider .fnc-slide__action-btn,
.example-slider .fnc-nav__control {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

/* COLORFUL SWITCH STYLES 
   ORIGINAL DEMO - https://codepen.io/suez/pen/WQjwOb */
.colorful-switch {
  position: relative;
  width: 180px;
  height: 77.1428571429px;
  margin: 0 auto;
  border-radius: 32.1428571429px;
  background: #cfcfcf;
}
.colorful-switch:before {
  content: "";
  z-index: -1;
  position: absolute;
  left: -5px;
  top: -5px;
  width: 190px;
  height: 87.1428571429px;
  border-radius: 37.1428571429px;
  background: #314239;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
}
.colorful-switch:hover:before {
  background: #4C735F;
}
.colorful-switch__checkbox {
  z-index: -10;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.colorful-switch__label {
  z-index: 1;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 32.1428571429px;
  cursor: pointer;
}
.colorful-switch__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 540px;
  height: 100%;
  background: linear-gradient(90deg, #14DCD6 0, #10E7BD 180px, #EF9C29 360px, #E76339 100%);
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(-360px, 0, 0);
          transform: translate3d(-360px, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__bg {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__dot {
  position: absolute;
  left: 131.1428571429px;
  top: 50%;
  width: 5.1428571429px;
  height: 5.1428571429px;
  margin-left: -2.5714285714px;
  margin-top: -2.5714285714px;
  border-radius: 50%;
  background: #fff;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__dot {
  -webkit-transform: translate3d(-80.3571428571px, 0, 0);
          transform: translate3d(-80.3571428571px, 0, 0);
}
.colorful-switch__on {
  position: absolute;
  left: 104.1428571429px;
  top: 22.5px;
  width: 19.2857142857px;
  height: 36px;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on {
  -webkit-transform: translate3d(-80.3571428571px, 0, 0);
          transform: translate3d(-80.3571428571px, 0, 0);
}
.colorful-switch__on__inner {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transition: -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  transition: transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28), -webkit-transform 0.25s 0s cubic-bezier(0.52, -0.96, 0.51, 1.28);
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
  -webkit-transform: rotate(45deg) scale(0) translateZ(0);
          transform: rotate(45deg) scale(0) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__on__inner {
  -webkit-transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transition: -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  transition: transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61), -webkit-transform 0.25s 0.25s cubic-bezier(0.67, -0.16, 0.47, 1.61);
  -webkit-transform: rotate(45deg) scale(1) translateZ(0);
          transform: rotate(45deg) scale(1) translateZ(0);
}
.colorful-switch__on__inner:before, .colorful-switch__on__inner:after {
  content: "";
  position: absolute;
  border-radius: 2.5714285714px;
  background: #fff;
}
.colorful-switch__on__inner:before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6.1428571429px;
}
.colorful-switch__on__inner:after {
  right: 0;
  top: 0;
  width: 6.1428571429px;
  height: 100%;
}
.colorful-switch__off {
  position: absolute;
  left: 131.1428571429px;
  top: 50%;
  width: 41.1428571429px;
  height: 41.1428571429px;
  margin-left: -20.5714285714px;
  margin-top: -20.5714285714px;
  -webkit-transition: -webkit-transform 0.5s;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s;
  transition: transform 0.5s, -webkit-transform 0.5s;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off {
  -webkit-transform: translate3d(-80.3571428571px, 0, 0);
          transform: translate3d(-80.3571428571px, 0, 0);
}
.colorful-switch__off:before, .colorful-switch__off:after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 5.1428571429px;
  margin-top: -2.5714285714px;
  border-radius: 2.5714285714px;
  background: #fff;
  -webkit-transition: -webkit-transform 0.25s 0.25s;
  transition: -webkit-transform 0.25s 0.25s;
  transition: transform 0.25s 0.25s;
  transition: transform 0.25s 0.25s, -webkit-transform 0.25s 0.25s;
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before, .colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}
.colorful-switch__off:before {
  -webkit-transform: rotate(45deg) scaleX(1) translateZ(0);
          transform: rotate(45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:before {
  -webkit-transform: rotate(45deg) scaleX(0) translateZ(0);
          transform: rotate(45deg) scaleX(0) translateZ(0);
}
.colorful-switch__off:after {
  -webkit-transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
          transition-timing-function: cubic-bezier(0.67, -0.16, 0.47, 1.61);
  -webkit-transform: rotate(-45deg) scaleX(1) translateZ(0);
          transform: rotate(-45deg) scaleX(1) translateZ(0);
}
.colorful-switch__checkbox:checked ~ .colorful-switch__label .colorful-switch__off:after {
  -webkit-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transform: rotate(-45deg) scaleX(0) translateZ(0);
          transform: rotate(-45deg) scaleX(0) translateZ(0);
}

@font-face {
  font-family: TrajanProRegular;
  src: url(./../fonts/trajan-pro-cufonfonts-webfont/TrajanPro-Regular.woff);
}
@font-face {
  font-family: TrajanProBold;
  src: url(./../fonts/trajan-pro-cufonfonts-webfont/TrajanPro-Bold.woff);
}
@font-face {
  font-family: OpenSansRegular;
  src: url(./../fonts/Open_Sans//static/OpenSans-Regular.ttf);
}
@font-face {
  font-family: OpenSansBold;
  src: url(./../fonts/Open_Sans//static/OpenSans-Bold.ttf);
}
@font-face {
  font-family: OpenSansLight;
  src: url(./../fonts/Open_Sans//static/OpenSans-Light.ttf);
}
* {
  --font-family-trajan-pro-sans-regular: TrajanProRegular;
  --font-family-trajan-pro-sans-bold: TrajanProBold;
  --font-family-open-sans-regular: OpenSansRegular;
  --font-family-open-sans-bold: OpenSansBold;
  --font-family-open-sans-light: OpenSansLight;
  --primary: #001489;
  --secondry: #babed0;
  --white: #ffffff;
  --black: #000000;
  --font-color: #111108;
  --dropdown-hover-color: #f3f1f1;
}

.cursor_pointer {
  cursor: pointer;
}

body {
  font-family: var(--font-family-open-sans-regular);
}

a {
  text-decoration: none;
  color: var(--primary);
}

h1,
h2,
h3,
h4,
h5
 {
  font-family: var(--font-family-trajan-pro-sans-regular);
}

.search_container {
  position: relative;
}
.updated-btn-btn-light{
  background-color: #06D028 !important;
  color: white;
}
.search_container::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100vh;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), color-stop(35%, rgba(0, 0, 0, 0)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 35%);
  z-index: 1;
}
.search_container .slider_content {
  position: relative;
  margin: 0 auto;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 767px;
  overflow: hidden;
  visibility: hidden;
}
.search_container .slider_content .slider_spin {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  text-align: center;
  background: rgba(0, 0, 0, 0.15);
}
.search_container .slider_content .slider_spin img {
  margin-top: -19px;
  position: relative;
  top: 50%;
  width: 38px;
  height: 38px;
}
.search_container .slider_content .slider_div {
  cursor: default;
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 767px;
  overflow: hidden;
}
.search-box-heading{
  font-family: var(--font-family-open-sans-bold);
  color: white;
}
.search_container .search_on_slider_container {
  position: absolute;
  width: 100%;
  top: 65%;
  z-index: 2;
}
.search_container .search_on_slider_container h1 {
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.9);
}
/* .search_container .search_on_slider_container .search_box_content {
   background-color: rgba(0, 0, 0, 0.6); 
} */

.top_header .nav {
  z-index: 9;
}
.top_header img {
  height: 24px;
}

.sita_header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.sita_header .sita_nav {
  background: rgba(0, 0, 0, 0) !important;
}
.sita_header .logo_and_toll_free {
  height: 170px;
}
.sita_header .logo_and_toll_free .navbar_brand {
  position: relative;
  top: 0px;
  left: 0px;
}
.sita_header .logo_and_toll_free .navbar_brand img {
  height: 85px;
}
.sita_header .nav_link {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 1px;
  text-shadow: 0px 0px 2px rgb(0, 0, 0);
  font-family: var(--font-family-open-sans-bold);
}
.sita_header .nav_link.active, .sita_header .nav_link.show {
  color: var(--white);
  text-shadow: 0px 0px 2px rgb(0, 0, 0);
}
.sita_header .dropdown_item {
  height: 45px;
  line-height: 45px;
  padding-top: 0;
}
.sita_header .dropdown_item:hover, .sita_header .dropdown_item:focus, .sita_header .dropdown_item:active {
  color: var(--font-color);
  background-color: var(--dropdown-hover-color);
}
.sita_header .country_flag_dropdown img {
  height: 20px;
}
.sita_header .toll_free {
  text-shadow: 0px 0px 2px rgb(0, 0, 0);
}

.nav_link_off_canvas {
  font-size: 90%;
}
.nav_link_off_canvas i {
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
}

.top_header,
.promotional_section {
  color: var(--white) !important;
  background-image: -webkit-gradient(linear, left top, right top, from(var(--primary)), to(#9035f9));
  background-image: linear-gradient(to right, var(--primary), #001489);
  position: relative;
  height: 75px !important;
  
}
.top_header::before,
.promotional_section::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 67px !important;
  /* background: rgba(0, 0, 0, 0.7); */
  z-index: 1;
}
.top_header .owl_carousel_for_promotion,
.promotional_section .owl_carousel_for_promotion {
  height: 75px;
  font-size: 14px;
  padding-top: 10px;
  padding-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 0.25rem;
  z-index: 9;
}

.main_heading, .main_title {
  text-align: center;
}
.main_heading p, .main_title p {
  background-image: -webkit-gradient(linear, left top, right top, from(var(--primary)), to(#9035f9));
  background-image: linear-gradient(to right, var(--primary), #9035f9);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 14px;
}
.main_heading h1, .main_title h1 {
  color: var(--white);
  /* background: url("./../img/bg_img_for_header.png"); */
  background-repeat: no-repeat;
  background-size: 112% 90%;
  padding: 4px 0 0;
  height: 70px;
  color: #001489;
  font-family:var(--font-family-trajan-pro-sans-bold);
}
.text-sita-world{
font-family: var(--font-family-open-sans-regular);
color: #000000;
font-size: 16px;
font-weight: 500;
}
.country-card-1{
  width: 320px;
  border-radius: 7px;
  box-shadow: 5px 5px 0px 5px;
  background-color: #fdfdfd;
}
.country-img{
  width: 320px !important;
  border-radius:7px;
}
.main-heading{
  color: white !important;
  font-size: 25px;
  background-image:url('../img/bg_img_for_header.png') !important ;
    background-repeat: no-repeat;
    background-size: 112% 90%;
    padding: 8px 0;
    padding-left: 50px;
    padding-bottom: 20px;
}





/* .main_heading .airplane_icon i, .main_title .airplane_icon i {
  background-image: -webkit-gradient(linear, left top, right top, from(var(--primary)), to(#9035f9));
  background-image: linear-gradient(to right, var(--primary), #9035f9);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
} */

.main_heading .title-widget-bg, .main_title .title-widget-bg {
  background: #efefef;
}
@media screen and (max-width: 1367px) {
  .main_heading h1, .main_title h1 {
    padding: 6px 0 0;
  }
}
@media screen and (max-width: 992px) {
  .main_heading h1, .main_title h1 {
    padding: 8px 0 0;
  }
}
@media screen and (max-width: 768px) {
  .main_heading h1, .main_title h1 {
    background-size: 119% 90%;
    padding: 10px 0 0;
  }
}
@media screen and (max-width: 500px) {
  .main_heading h1, .main_title h1 {
    padding: 12px 0 0;
  }
}
@media screen and (max-width: 441px) {
  .main_heading h1, .main_title h1 {
    background-size: 118% 85%;
  }
}
@media screen and (max-width: 361px) {
  .main_heading h1, .main_title h1 {
    background-size: 120% 85%;
    padding: 13px 0 0;
  }
}
@media screen and (max-width: 300px) {
  .main_heading h1, .main_title h1 {
    background-size: 120% 75%;
    padding: 12px 0 0;
  }
}
.main_heading p, .main_title p {
  display: inline-block;
  font-weight: 400;
  margin-bottom: 0px;
  text-transform: uppercase;
  margin: 0px;
  letter-spacing: 1px;
}
.main_heading .header-divider, .main_title .header-divider {
  position: relative;
  top: -5px;
}
.main_heading .airplane_icon i, .main_title .airplane_icon i {
  position: relative;
  top: 0px;
  -webkit-transform: rotate(40deg) !important;
          transform: rotate(40deg) !important;
}
.main_heading .title-widget-bg, .main_title .title-widget-bg {
  display: inline-block;
  height: 2px;
  width: 100px;
}

.main_heading_for_white p, .main_title_for_white p {
  color: var(--white);
}
.main_heading_for_white h1, .main_title_for_white h1 {
  color: var(--white);
  background: none;
}
.main_heading_for_white .airplane_icon i, .main_title_for_white .airplane_icon i {
  color: var(--white);
}
.main_heading_for_white .title-widget-bg, .main_title_for_white .title-widget-bg {
  background: #efefef;
}

.primary_btn {
  border-color: var(--primary);
  color: var(--primary);
}
.primary_btn:hover, .primary_btn:focus, .primary_btn:active {
  background-image: -webkit-gradient(linear, left top, right top, from(#9035f9), to(var(--primary)));
  background-image: linear-gradient(to right, #9035f9, var(--primary));
  color: var(--white);
}

.light_btn {
  background-color: var(--white);
  color: var(--font-color);
}
.light_btn:hover, .light_btn:focus, .light_btn:active {
  border-color: var(--white);
}

.he_sita_experience iframe {
  width: 100%;
  height: 200px;
  border-radius: 8px;
 
}
.he_sita_experience .ytp-button:not([aria-disabled=true]):not([disabled]):not([aria-hidden=true]) {
  border: solid 10px;
}
.he_sita_experience .ytp-large-play-button {
  width: 68px;
  height: 30px !important;
}
.he_sita_experience button {
  position: absolute;
  top: 106px;
  padding: 12px;
  left: 174px;
}
.updated-award-card{
border: none;
}
.updated-request-btn{
  border: 1px solid #00c41c;
  background-color:#00c41c ;
  color: white;
}
.group_and_customize_section {
  background: url(./../img/slider/slider-2.jpg) no-repeat;
  background-position: center center;
  background-attachment: fixed;
  position: relative;
}
.group_and_customize_section::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.group_and_customize_section .group_and_customize_container {
  position: relative;
  z-index: 9;
  color: var(--white);
}

.other_card_action {
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06) !important;
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06) !important;
  border-color: #e9e9e9 !important;
}
.other_card_action:hover, .other_card_action:focus, .other_card_action:active {
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
}
.other_card_action:hover i, .other_card_action:focus i, .other_card_action:active i {
  background-image: -webkit-gradient(linear, left top, right top, from(var(--primary)), to(#9035f9));
  background-image: linear-gradient(to right, var(--primary), #9035f9);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.health_and_safety_protocols_container_fluid {
  background: url("./../img/slider/slider-6.jpg") no-repeat;
  background-position: center;
  background-attachment: fixed;
  position: relative;
}
.health_and_safety_protocols_container_fluid::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.health_and_safety_protocols_container_fluid .health_and_safety_protocols_container {
  z-index: 2;
  position: relative;
}
.health_and_safety_protocols_container_fluid .health_and_safety_protocols_container img {
  height: 85px;
}
.health_and_safety_protocols_container_fluid .health_and_safety_protocols_container a {
  text-decoration: none;
  color: var(--white);
}
.health_and_safety_protocols_container_fluid .health_and_safety_protocols_container .self_traverl_div, .health_and_safety_protocols_container_fluid .health_and_safety_protocols_container .self_tc_div {
  height: 130px;
  color: var(--white);
}

.country_spotlight_container .country_spotlight_blog_row {
  background-color: var(--white);
}
.country_spotlight_container .country_spotlight_blog_row h2 {
  font-size: 22px;
  margin-bottom: 20px;
}
.country_spotlight_container .country_spotlight_blog_row .meta {
  color: #ccc;
}
.country_spotlight_container .country_spotlight_blog_row img {
  width: 80% !important;
}
.country_spotlight_container .country_spotlight_ifream_video {
  width: 90%;
  height: 300px;
  margin: auto;
}

footer {
  background-color: var(--dropdown-hover-color) !important;
}

.ustoa_col img {
  width: auto;
  height: auto;
}

.owl-nav {
  display: none;
}

.owl-theme .owl-dots {
  margin-top: 20px;
}

.owl-theme .owl-nav.disabled + .owl-dots,
.owl-theme .owl-dots {
  margin-top: 10px;
}

.arrow-container {
  position: fixed;
  bottom: 0;
  right: 15px;
}

.arrow {
  width: 0;
  height: 40px;
  border: 1px solid #333;
  position: relative;
  animation: scroll 1.5s infinite;
  -webkit-animation: scroll 1.5s infinite;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: -5px;
  width: 1px;
  height: 10px;
  border-top: 10px solid #333;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

@keyframes scroll {
  0% {
    height: 30px;
  }
  30% {
    height: 40px;
  }
  60% {
    height: 30px;
  }
}
@-webkit-keyframes scroll {
  0% {
    height: 30px;
  }
  30% {
    height: 40px;
  }
  60% {
    height: 30px;
  }
}

.updated-destination-img{
  height: auto;
    width: 500px;
    max-width: 100%;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 0px;
}
.updated-destination-card{
width: 512px;

border-radius: 0px;
min-height: 650px;
margin-top: 80px;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
}

.updated-heading{
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
font-weight: 900;
color: #001489 !important;
}
.updated-destination-text{
  font-size: 14px;
  margin-top: 30px;
  text-align: center;
}
.updated-btn-destination{
  width: 100% !important;
  background-color: #001489 !important;
  border: 1px solid #001489 !important;
  border-radius: 2px !important;
  color: white;
  margin-top: 20px;
}