body {
  background: none;
  padding-bottom: 600px;
}

* {
  font-family: 'AntiqueOliTCon';
}

p, ul, li {
  font-family: 'Raleway';
  font-weight: 500;
}

section {
  position: relative;
  background: #fff;
  z-index: 1;
}

#mob {
  z-index: 4;
  background: #fff;
}

#mob .navbar-brand {
  width: 155px;
}

button[data-toggle] {
  background: #fff;
  outline: none;
  box-shadow: none;
}

.navigation-clean .navbar-toggler {
  border-color: #fff;
}

#side-menu .nav-link {
  color: #777;
}

#side-menu .nav-link:hover, .dropdown-item:hover, #side-menu .nav-link.active {
  color: #08254f;
}

.dropdown-menu {
  border: none;
}

.dropdown-item {
  color: #444;
}

#to-top {
  width: 35px;
  height: 35px;
  background: rgba(59, 115, 184, 100%);
  border: solid 1px rgb(255 255 255 / 45%);
  position: fixed;
  right: 30px;
  bottom: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 4;
  cursor: pointer;
  opacity: 0;
  transform: translateY(50px);
  transform-origin: bottom;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  font-size: 13px;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .15s;
}

@media (min-width: 992px) {
  #to-top {
    bottom: 60px;
  }
}

@media (min-width: 1200px) {
  #to-top {
    bottom: 16px;
  }
}

#to-top:hover {
  background: rgb(11 70 112 / 100%);
  border: solid 1px rgb(255 255 255 / 45%);
}

#to-top.anim {
  opacity: 1;
  transform: translateY(0);
}

#to-top i {
  color: #fff;
  margin: 0;
  padding: 0;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .15s;
  animation: Down 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate;
}

.logo-wrapper {
  position: relative;
  flex-basis: 55%;
}

@media (min-width: 1200px) {
  .logo-wrapper {
    position: relative;
    flex-basis: 62%;
  }
}

.logo {
  position: relative;
}

#mainNav {
  padding: 0;
  margin: 0;
}

#mainNav .navbar-brand:after {
  content: "";
  position: absolute;
  width: 34%;
  height: 100%;
  background: #fff;
  left: -22px;
  top: 0;
  z-index: -1;
  transform: skewX(30deg);
}

@media (min-width: 992px) {
  #mainNav .navbar-brand:after {
    width: 43%;
  }
}

@media (min-width: 1200px) {
  #mainNav .navbar-brand:after {
    width: 34%;
  }
}

#mainNav:after {
  content: "";
  position: absolute;
  background: url(../../assets/img//Shadow.png) no-repeat center center / 100%;
  left: 0;
  z-index: -1;
  bottom: -31%;
  right: 0;
  width: 100%;
  opacity: .75;
  height: 30%;
}

.logo-wrapper:after, .logo-wrapper:before {
  content: "";
  width: 20%;
  height: 5px;
  background: #3b73b8;
  position: absolute;
  bottom: -3px;
  top: auto;
  left: 0;
  z-index: 1;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .15s;
}

#side-menu ul.social {
  display: flex;
  padding: 0;
  margin: 3rem auto 2rem;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}

#side-menu ul.social li a {
  color: #21599d;
}

.logo-wrapper:before {
  height: 1px;
  bottom: -1px;
  width: 40%;
}

.navbar-brand img {
  display: block;
  width: 175px !important;
  position: relative;
}

#mainNav .navbar-brand {
  margin: 0;
}

.navbar .container {
  flex-wrap: wrap;
}

.nav-trigger {
  position: absolute;
  bottom: calc(50% - 14px);
  right: 3%;
  width: 35px;
  height: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transform: scaleX(0);
  pointer-events: none;
  transform-origin: right;
  cursor: pointer;
  transition: all .3s cubic-bezier(0.8, 0, .5, 1) .35s;
  z-index: 11;
  opacity: 0;
}

#mainNav.navbar-shrink .nav-trigger {
  transform: scaleX(1);
  pointer-events: auto;
  opacity: 1;
}

.nav-trigger span {
  position: absolute;
  height: 3px;
  width: 90%;
  left: 0;
  background: #08254f;
  border-radius: 35%;
  transform: scaleX(1) rotate(0);
  transform-origin: right;
}

.nav-trigger .line-1 {
  top: 5px;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
}

.nav-trigger .line-2 {
  width: 60%;
  margin: 0 auto;
  left: 0;
  right: 0;
  opacity: 1;
  transition: opacity .2s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .1s;
}

.nav-trigger .line-3 {
  bottom: 5px;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
}

.nav-trigger.fired .line-2 {
  transform: scaleX(0);
  transform-origin: left;
  margin: 0;
  opacity: 0;
}

.nav-trigger.fired .line-1 {
  top: 27px;
  transform: rotate(45deg);
}

.nav-trigger.fired .line-3 {
  bottom: 27px;
  transform: rotate(-45deg);
}

.multi-language {
  display: flex;
  width: auto;
  height: auto;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  right: 4%;
}

@media (min-width: 1200px) {
  .multi-language {
    display: flex;
    width: auto;
    height: auto;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    right: 0;
  }
}

.multi-language select {
  border: none;
  background: none;
  outline: none;
  color: #fff;
  cursor: pointer;
}

.multi-language:hover select, .multi-language select:hover {
  color: #fff !important;
}

.multi-language select option {
  background: rgba(255, 255, 255, .25);
  color: #3b73b8;
  text-align: center;
}

.fixed-bottom, .fixed-top {
  z-index: 10;
}

#navbarResponsive {
  border-top: 1px solid rgba(255, 255, 255, .35);
  position: relative;
  flex-basis: 100%;
  padding-top: 2px;
  padding-top: 2px;
  transform: scaleY(1);
  height: 55px;
  transform-origin: top;
  opacity: 1;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .15s, opacity .3s cubic-bezier(0.250, 0.460, 0.450, 0.940);
}

#mainNav.navbar-shrink #navbarResponsive {
  height: 0;
  transform: scaleY(0);
  opacity: 0;
}

#mainNav.navbar-shrink #navbarResponsive.fired {
  height: 55px;
  transform: scaleY(1);
  opacity: 1;
}

#mainNav.navbar-shrink .logo-wrapper:after {
  bottom: -7px;
}

#mainNav.navbar-shrink .logo-wrapper:before {
  bottom: -5px;
}

#mainNav .navbar-nav {
  margin: 0 auto;
  width: 100%;
  justify-content: space-between;
}

#mainNav li.nav-item {
  flex-grow: 1;
  position: relative;
  border-left: solid 1px rgba(255, 255, 255, .45);
}

#mainNav li.nav-item > div {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
}

#mainNav li.nav-item > div:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(59, 115, 184, 1);
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .35s;
  transform: scaleY(0);
  transform-origin: bottom;
}

#mainNav li.nav-item > div:hover:before {
  transform: scaleY(1);
  transform-origin: top;
}

#mainNav li.nav-item > div:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 60px;
  height: 60px;
  background: radial-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%);
  transition: all .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) .39s;
  transform: scaleX(0) translateX(-20%);
  transform-origin: left;
  mix-blend-mode: overlay;
}

#mainNav li.nav-item > div:hover:after {
  transform: scaleX(1) translateX(190%);
  transform-origin: right;
}

#mainNav .navbar-nav > li.nav-item a.nav-link {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #fff;
  margin: 0;
  padding: 0;
}

#mainNav.navbar-shrink .navbar-nav > li.nav-item:hover a.nav-link, #mainNav.navbar-shrink .navbar-nav > li.nav-item:hover a.nav-link span {
  color: #fff;
}

#mainNav.navbar-shrink .navbar-nav > li.nav-item a.nav-link, #mainNav.navbar-shrink .navbar-nav > li.nav-item a.nav-link span, #mainNav.navbar-shrink .navbar-nav > li.nav-item a.nav-link:focus, #mainNav.navbar-shrink ul.social li a i {
  color: #17335b;
}

#mainNav.navbar-shrink .multi-language select, #mainNav.navbar-shrink .multi-language select:hover, #mainNav.navbar-shrink .multi-language:hover select {
  color: #17335b;
}

#mainNav.navbar-shrink .multi-language select {
  color: #17335b !important;
}

#mainNav .navbar-nav > li.nav-item a.nav-link.active span, #mainNav .navbar-nav > li.nav-item a.nav-link.active, #mainNav .navbar-nav > li.nav-item a.nav-link:focus.active {
  color: #fff;
}

#mainNav .navbar-nav > li.nav-item a.nav-link:after {
  content: "";
  position: absolute;
  width: 0;
  height: 100%;
  right: 0;
  top: 0;
  background: #3873b8;
  transition: all cubic-bezier(.9, 0, .33, 1) .3s;
  z-index: -1;
}

#mainNav .navbar-nav > li.nav-item a.nav-link.active:after {
  width: 100%;
  left: 0;
}

#mainNav li.nav-item:first-of-type {
  border-left: none;
}

#mainNav li.nav-item span {
  text-align: center;
  position: absolute;
  color: #fff;
}

#mainNav li.nav-item#sub-menu {
  position: relative;
}

#mainNav li.nav-item#sub-menu:before {
  width: auto;
  height: auto;
  top: 33%;
  position: absolute;
  color: #fff;
  right: 20px;
  z-index: 1;
  text-align: center;
}

#mainNav li.nav-item#sub-menu ul.sub {
  position: absolute;
  width: 40.7vw;
  min-height: 150px;
  top: 52px;
  left: 0;
  right: 0;
  background: #fff;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .3s, opacity .35s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
  pointer-events: none;
}

#mainNav li.nav-item#sub-menu:hover ul.sub {
  transform: scaleY(1);
  opacity: 1;
  pointer-events: auto;
}

#mainNav li.nav-item#sub-menu ul.sub li {
  margin: 0 auto;
  position: relative;
  padding: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  background: #fff;
  overflow: hidden;
  border-right: solid 1px #eee;
  transition: all .3s ease-in-out .2s;
}

#mainNav li.nav-item#sub-menu ul.sub li:last-of-type {
  border-right: none;
}

#mainNav li.nav-item#sub-menu ul.sub li a {
  color: #676767;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  flex-direction: column-reverse;
  width: 100%;
  text-decoration: none;
  transition: all .3s ease-in-out .2s;
  margin: 0;
  padding: 0;
  z-index: 1;
}

#mainNav li.nav-item#sub-menu ul.sub li a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5%;
  width: 100%;
  background: #3689c9;
  z-index: -1;
  margin: 0 auto;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .35s;
}

#mainNav li.nav-item#sub-menu ul.sub li:hover {
  border-right: solid 1px #3689c9;
}

#mainNav li.nav-item#sub-menu ul.sub li:hover a:before {
  height: 50%;
}

#mainNav li.nav-item#sub-menu ul.sub li a img {
  width: 100px;
  height: auto;
  position: relative;
  margin-top: 0px;
  margin-bottom: 25%;
  transition: all .3s ease-in-out .2s;
}

#mainNav li.nav-item#sub-menu ul.sub li:hover a {
  color: #fff;
}

#mainNav li.nav-item#sub-menu ul.sub li:hover a img {
  margin-bottom: 40%;
}

#mainNav li.nav-item span.first {
  transform: translateY(0);
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
}

#mainNav li.nav-item:hover span.first {
  transform: translateY(40px);
}

#mainNav li.nav-item span.second {
  transform: translateY(-40px);
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
}

#mainNav li.nav-item:hover span.second {
  transform: translateY(0);
}

#mainNav ul.social {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-basis: 25%;
  margin: 0;
}

#mainNav ul.social li {
  position: relative;
}

#mainNav ul.social li a {
  color: #fff;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
}

#mainNav ul.social li:hover a {
  color: #3689c9;
}

@media (min-width: 300px) {
  header.masthead {
    height: 400px;
    padding: 0;
  }
}

@media (min-width: 992px) {
  header.masthead {
    min-height: inherit;
    height: 80vh;
  }
}

@media (min-width: 1200px) {
  header.masthead {
    min-height: inherit;
    height: 100vh;
  }
}

header.masthead .col {
  padding: 0;
}

.swiper-container {
  height: 400px;
}

@media (min-width: 992px) {
  .swiper-container {
    height: 80vh;
  }
}

@media (min-width: 1200px) {
  .swiper-container {
    height: 100vh;
  }
}

.simple-slider .swiper-slide {
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

header.masthead img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  z-index: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
}

@media (min-width: 1200px) {
  header.masthead img {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
  }
}

.swiper-slide img.slide-logo {
  position: relative;
  z-index: 2;
  left: 0%;
  height: auto;
  width: 175px;
  bottom: 0;
  top: auto;
  transform: translateY(-25px);
  opacity: 0;
}

.swiper-slide .img-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgb(11 70 112 / 50%);
  z-index: 1;
}

header.masthead h2 {
  text-align: center;
  position: relative;
  margin: 0 auto;
  font-weight: bold;
  font-size: 35px;
  letter-spacing: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  z-index: 2;
  font-family: 'AntiqueOliTCon';
  transform: translateY(-25px);
  opacity: 0;
}

@media (min-width: 768px) {
  header.masthead h2 {
    text-align: center;
    position: relative;
    margin: 0 auto;
    font-weight: bold;
    font-size: 50px;
    letter-spacing: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    z-index: 2;
    font-family: 'AntiqueOliTCon';
    transform: translateY(-25px);
    opacity: 0;
  }
}

header.masthead p {
  position: relative;
  text-align: center;
  font-size: 19px;
  z-index: 2;
  letter-spacing: 2px;
  top: 10px;
  font-family: 'raleway';
  transform: translateY(-25px);
  opacity: 0;
  width: 75%;
}

@media (min-width: 768px) {
  header.masthead p {
    position: relative;
    text-align: center;
    font-size: 22px;
    z-index: 2;
    letter-spacing: 2px;
    top: 10px;
    font-family: 'raleway';
    transform: translateY(-25px);
    opacity: 0;
  }
}

.swiper-slide.swiper-slide-active h2 {
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .50s;
  transform: translateY(0);
  opacity: 1;
}

.swiper-slide.swiper-slide-active h2.glitch {
  animation: glitch 500ms 3;
}

.swiper-slide.swiper-slide-active h2.glitch.glitched {
  animation: glitch-b 500ms 3;
}

.swiper-slide.swiper-slide-active h2.glitch span:first-child {
  animation: glitch 650ms 3;
}

.swiper-slide.swiper-slide-active h2.glitch.glitched span:first-child {
  animation: glitch-b 650ms 3;
}

.swiper-slide.swiper-slide-active h2.glitch span:last-child {
  animation: glitch 375ms 3;
}

.swiper-slide.swiper-slide-active h2.glitch.glitched span:last-child {
  animation: glitch-b 375ms 3;
}

.swiper-slide.swiper-slide-active p {
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .80s;
  transform: translateY(0);
  opacity: 1;
}

.swiper-slide.swiper-slide-active img.slide-logo {
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .65s;
  transform: translateY(0);
  opacity: 1;
}

.simple-slider .swiper-slide div.cta {
  background: #fff;
  width: 150px;
  height: 45px;
  border-radius: 25px;
  top: 20px;
  position: relative;
  overflow: hidden;
  transform: translateY(-25px);
  opacity: 0;
  z-index: 2;
}

.simple-slider .swiper-slide div.cta:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #3b73b8;
  z-index: -1;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
}

.swiper-slide.swiper-slide-active div.cta {
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .95s;
  transform: translateY(0);
  opacity: 1;
}

.simple-slider .swiper-slide div.cta a {
  line-height: 45px;
  color: #3b73b8;
  z-index: 1;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
  display: block;
}

.simple-slider .swiper-slide div.cta:hover a {
  color: #fff;
  letter-spacing: 2px;
}

.simple-slider .swiper-slide div.cta:hover:before {
  width: 100%;
}

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  width: 5%;
  height: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0;
  bottom: 0;
  left: 2%;
}

.swiper-pagination-bullet {
  width: 26px;
  height: 26px;
  border-radius: 0;
  border: solid 1px rgba(59, 115, 184, 1);
  background: rgba(59, 115, 184, .45);
  mix-blend-mode: color-burn;
  opacity: 1;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
  position: relative;
}

.swiper-pagination-bullet:after {
  content: "";
  position: absolute;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0);
  height: 100%;
  width: 100%;
  z-index: -1;
  border-radius: 0;
  border: solid 1px rgba(255, 255, 255, 1);
  left: 0;
  right: 0;
  transform: scale(0);
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-bullet-active {
  margin-bottom: 5px;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
  outline: none;
  box-shadow: none;
}

.swiper-pagination-bullet-active:after {
  animation: 3s cubic-bezier(0.8, 0, .5, 1) .2s both infinite son-eff;
}

.swiper-pagination-bullet-active {
  background: #fff !important;
  border: solid 1px #fff;
}

.swiper-pagination-bullet-active {
  transform: scale(1.1);
  margin-bottom: 15px !important;
  background: rgba(59, 115, 184, 1);
  margin-top: 15px !important;
}

.swiper-slide.swiper-slide-active {
  position: relative;
  overflow: hidden;
}

.simple-slider .swiper-slide:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background: #ffffff;
  top: 0;
  z-index: 12;
  left: 0;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .30s;
}

.simple-slider .swiper-slide:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background: #ffffff;
  bottom: 0;
  z-index: 12;
  right: 0;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .35s;
}

.simple-slider .swiper-slide.swiper-slide.swiper-slide-active:after, .simple-slider .swiper-slide.swiper-slide.swiper-slide-active:before {
  height: 0;
}

.swiper-slide .tend {
  position: absolute;
  width: 50%;
  height: 100%;
  display: block;
  background: rgba(255, 255, 255, 0);
  bottom: -135px;
  z-index: 1;
  mix-blend-mode: overlay;
  transform: skew(-31deg, 0deg) scaleY(0);
  right: 5%;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .55s;
  transform-origin: left bottom;
  top: auto;
  border-right: solid 1px rgba(255, 255, 255, 1);
  border-left: solid 1px rgba(255, 255, 255, .45);
}

.swiper-slide.swiper-slide-active .tend {
  background: rgba(255, 255, 255, .35);
  transform: skew(-31deg, 0deg) scaleY(1);
}

.scroll-wrapper {
  position: absolute;
  left: 6%;
  width: 10%;
  height: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

span.scroll-txt {
  font-size: 16px;
  color: #fff;
  text-transform: capitalize;
  transform: rotate(90deg);
  position: relative;
  left: 0;
  bottom: -80px;
  z-index: 1;
  letter-spacing: 5px;
  width: 200px;
  height: auto;
}

span.scroll {
  width: 3px;
  height: 25%;
  bottom: 0;
  top: auto;
  overflow: hidden;
  position: relative;
}

span.scroll:after {
  position: absolute;
  right: 0;
  top: -15rem;
  content: "";
  width: 3px;
  height: 100%;
  background: rgba(255, 255, 255, 0.55);
  animation: 3s ease 0s forwards infinite running animHomeHeaderLine;
}

.down-arrow {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border: solid 1px rgba(255, 255, 255, .55);
  background: #3b73b8;
  margin-top: 10px;
  position: relative;
}

.down-arrow a {
  text-decoration: none;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.down-arrow a i {
  animation: Down 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate;
}

.down-arrow:before {
  content: "";
  position: absolute;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0);
  height: 0;
  width: 0;
  z-index: -1;
  border-radius: 50%;
  animation: 3s cubic-bezier(0.8, 0, .5, 1) 1.5s both infinite expand;
  border: solid 1px rgba(255, 255, 255, 0);
}

.nav-bottom, .nav-side {
  position: absolute;
  width: 65%;
  height: auto;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -75px;
  z-index: 2;
}

.nav-side {
  bottom: 0;
  top: 19%;
  background: red;
  position: fixed;
  left: auto;
  right: 0;
  width: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  height: 75%;
  transform: translateX(100px);
  opacity: 0;
  transform-origin: right;
  pointer-events: none;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .35s;
}

@media (min-width: 768px) {
  .nav-side {
    top: 14%;
  }
}

@media (min-width: 1200px) {
  .nav-side {
    top: 19%;
  }
}

.nav-side.anim {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.nav-bottom ul, .nav-side ul {
  list-style: none;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.nav-side ul {
  flex-direction: column;
  width: 100%;
}

.nav-bottom ul li, .nav-side ul li {
  margin: 0 1px 0 0;
  padding: 0;
  flex-basis: 25%;
  background: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.nav-side ul li {
  width: 100%;
}

.nav-bottom ul li:before, .nav-side ul li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(59, 115, 184, 1);
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .35s;
  transform: scaleY(0);
  transform-origin: bottom;
}

.nav-side ul li:before {
  transform: scaleX(0);
  transform-origin: right;
  left: auto;
  right: 0;
  margin: 0;
}

.nav-side ul li:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-bottom ul li:hover:before {
  transform: scaleY(1);
  transform-origin: top;
}

.nav-bottom ul li:after, .nav-side ul li:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%);
  transition: all .2s cubic-bezier(0.175, 0.885, 0.32, 1.275) .39s;
  transform: scaleY(0) translateY(-50%);
  transform-origin: top;
  mix-blend-mode: overlay;
  right: 0;
  margin: 0 auto;
}

.nav-bottom ul li:hover:after, .nav-side ul li:hover:after {
  transform: scaleY(1) translateY(75%);
  transform-origin: bottom;
}

.nav-bottom ul li a, .nav-side ul li a {
  display: flex;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 150px;
  text-align: center;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}

.nav-side ul li a {
  width: 100px;
  height: 116px;
}

.nav-bottom ul li.active, .nav-side ul li.active {
  background: #3873b8;
}

.nav-bottom ul li.active:after, .nav-side ul li.active:after {
  transform: scaleY(1) translateY(75%);
  transform-origin: bottom;
}

.nav-bottom ul li.active a span.first, .nav-bottom ul li.active a span.second, .nav-bottom ul li.active a span.nav-txt, .nav-side ul li.active a span.first, .nav-side ul li.active a span.second, .nav-side ul li.active a span.nav-txt {
  color: #fff;
}

.nav-bottom ul li a span, .nav-side ul li a span {
  position: absolute;
  left: 0;
  right: 0;
}

.nav-bottom ul li a span.first, .nav-side ul li a span.first {
  transform: translateY(0);
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .2s;
  color: #3873b8;
  font-size: 30px;
  opacity: 1;
  transform: translateY(-27px);
}

.nav-side ul li a span.first {
  transform: translateX(0);
  font-size: 20px;
  top: 20px;
}

.nav-side ul li:hover a span.first {
  transform: translateX(100px);
  opacity: 0;
}

.nav-bottom ul li:hover a span.first {
  transform: translateY(100px);
  opacity: 0;
}

.nav-bottom ul li a span.second, .nav-side ul li a span.second {
  transform: translateY(-100px);
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
  font-size: 30px;
  opacity: 0;
}

.nav-side ul li a span.second {
  transform: translateX(-100px);
  font-size: 20px;
  opacity: 0;
  top: 20px;
}

.nav-side ul li:hover a span.second {
  transform: translateX(0);
  opacity: 1;
}

.nav-bottom ul li:hover a span.second {
  transform: translateY(-27px);
  opacity: 1;
}

.nav-bottom ul li a span.nav-txt, .nav-side ul li a span.nav-txt {
  text-align: center;
  font-weight: bolder;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 20px;
  transform: translateY(30px);
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
  color: #757575;
}

.nav-side ul li a span.nav-txt {
  font-size: 16px;
  top: 30px;
}

.nav-side ul li:hover a span.nav-txt {
  color: #fff;
}

.nav-bottom ul li:hover a span.nav-txt {
  color: #fff;
  letter-spacing: 4px;
}

section#about {
  background: #fff;
  color: #676767;
  padding: 2rem 0 2em;
  overflow: hidden;
  position: relative;
}

@media (min-width: 768px) {
  section#about {
    background: #fff;
    color: #676767;
    padding: 8rem 0 2em;
    overflow: hidden;
    position: relative;
  }
}

section#about .row {
  position: relative;
  z-index: 3;
}

section#about:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -1%;
  right: -35%;
  background: url(../../assets/img//tri-texture.svg) no-repeat center right / 52%;
  opacity: .15;
  z-index: 0;
  display: none;
}

@media (min-width: 768px) {
  section#about:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -1%;
    right: -35%;
    background: url(../../assets/img//tri-texture.svg) no-repeat center right / 52%;
    opacity: .15;
    z-index: 0;
    display: block;
  }
}

section#strategy {
  padding: 2rem 0 9rem;
  background: #fff;
  overflow: hidden;
  position: relative;
}

#strategy h2 {
  color: #17335b;
  font-weight: bold;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  text-align: center;
}

@media (min-width: 576px) {
  #strategy h2 {
    color: #17335b;
    font-weight: bold;
    font-family: 'AntiqueOliTCon';
    font-size: 26px;
    text-align: left;
  }
}

#strategy .col {
  padding: 5% 2%;
}

@media (min-width: 576px) {
  #strategy .col {
    padding: 5% 5% 0 6%;
  }
}

@media (min-width: 992px) {
  #strategy .col {
    padding: 5% 0;
  }
}

@media (min-width: 1200px) {
  #strategy .col {
    padding: 5% 5% 0 6%;
  }
}

#strategy .col.description {
  padding-left: 0;
  text-align: center;
}

@media (min-width: 576px) {
  #strategy .col.description {
    padding-left: 0;
  }
}

@media (min-width: 992px) {
  #strategy .col.description {
    padding-right: 3%;
  }
}

#strategy .blue-block {
  right: auto;
  left: 5%;
  top: 10%;
  width: 80%;
}

#strategy ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  width: 90%;
}

@media (min-width: 576px) {
  #strategy ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
  }
}

#strategy ul li {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  text-align: center;
}

@media (min-width: 576px) {
  #strategy ul li {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    text-align: left;
  }
}

#strategy ul li span {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #17335b;
  margin-top: .5em;
  position: relative;
}

@media (min-width: 576px) {
  #strategy ul li span {
    display: block;
    text-align: left;
    font-weight: bold;
    color: #17335b;
    margin-top: .5em;
    position: relative;
  }
}

section#overview {
  background: #fff;
  color: #676767;
  padding: 2rem 0 4rem;
  position: relative;
  overflow: hidden;
}

section#overview .container {
  position: relative;
  z-index: 1;
}

section#overview .col {
  padding: 5% 5% 0 6%;
  text-align: center;
}

@media (min-width: 576px) {
  section#overview .col {
    padding: 5% 5% 0 6%;
    text-align: left;
  }
}

@media (min-width: 992px) {
  section#overview .col {
    padding: 5% 3%;
    text-align: left;
  }
}

@media (min-width: 1200px) {
  section#overview .col {
    padding: 5% 5% 0 6%;
  }
}

section#overview h2 {
  color: #17335b;
  font-weight: bold;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  padding-bottom: 1em;
}

section#overview p {
  width: auto;
  margin: 0 auto;
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 576px) {
  section#overview p {
    width: auto;
    margin: 0 auto;
    line-height: 1.5;
    text-align: left;
  }
}

section#overview span {
  text-align: center;
  font-weight: bold;
  color: #555555;
  margin-top: 1em;
  position: relative;
  display: block;
}

@media (min-width: 576px) {
  section#overview span {
    text-align: left;
    font-weight: bold;
    color: #555555;
    margin-top: 1em;
    position: relative;
    display: block;
  }
}

.right-img-wrapper {
  position: relative;
  padding-left: 5rem;
}

.right-img-wrapper:before {
  content: "";
  position: absolute;
  width: 110%;
  height: 130%;
  bottom: -15%;
  left: -32%;
  background: url(../../assets/img//tri-texture.svg) no-repeat center left / 100%;
  opacity: .15;
  z-index: 0;
}

.right-img-wrapper .img-wrapper {
  position: relative;
  overflow: hidden;
  width: 363px;
  height: 349px;
}

.img-wrapper:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  transition: all .3s cubic-bezier(.2, .02, .9, .67) .3s;
  background: rgba(255, 255, 255, 1);
  z-index: 1;
  transform: scaleX(1);
  transform-origin: right;
}

.img-wrapper.scrolled:before {
  transform: scaleX(0);
}

.img-wrapper img {
  position: absolute;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .3s;
  transform: scale(1);
  width: 100%;
  height: 100%;
  transform-origin: center;
  z-index: 0;
}

.img-wrapper:hover img {
  transform: scale(1.2);
}

.blue-block {
  position: absolute;
  right: 5%;
  top: -10%;
  z-index: 0;
  background: #3b73b8;
  width: 90%;
  height: 100%;
  transform: scaleX(0);
  transition: all .3s cubic-bezier(0.8, 0, .5, 1);
  transform-origin: left;
  display: block;
}

.blue-block.scrolled {
  transform: scaleX(1);
}

section#approach {
  background: #fff;
  color: #676767;
  padding: 4rem 0 8rem;
  position: relative;
  overflow: hidden;
  text-align: center;
  background: url("../../assets/img//approach.jpg") no-repeat 50% 50% / cover fixed;
}

section#approach:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(59,115,184,0.65);
  z-index: 0;
}

section#approach div#trans-bg {
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 19%);
  padding: 2rem 0;
}

@media (min-width: 576px) {
  section#approach div#trans-bg {
    background: rgb(255 255 255 / 90%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 19%);
    padding: 2rem;
  }
}

section#approach .col {
  padding: 0 2em;
  position: relative;
  z-index: 1;
}

section#approach #bord-bg.col {
  border: solid 1px #3b73b8;
}

section#approach #bord-bg.col:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(59, 115, 184, 0.45);
}

section#approach h2 {
  color: #17335b;
  font-weight: bold;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  text-align: center;
  margin: 2rem auto;
}

section#approach span {
  font-weight: bold;
  font-size: 22px;
  position: relative;
  display: block;
  color: #3b73b8;
  margin: 1rem auto;
}

section#approach p {
  line-height: 1.5;
  margin-top: 1rem;
  width: 95%;
  margin: 0 auto 2rem;
}

@media (min-width: 576px) {
  section#approach p {
    line-height: 1.5;
    margin-top: 1rem;
    width: 75%;
    margin: 0 auto 2rem;
  }
}

section#digitization {
  padding: 4rem 0;
  background: #08254f;
  position: relative;
  overflow: hidden;
}

section#digitization:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -1%;
  left: -35%;
  background: url(../../assets/img//tri-texture.svg) no-repeat center left / 52%;
  opacity: .15;
  z-index: 0;
}

section#digitization .container {
  z-index: 1;
  position: relative;
}

section#digitization h2 {
  font-weight: bold;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  color: #fff;
  text-align: center;
}

section#digitization p {
  color: #fff;
  margin: 3% auto 2%;
  text-align: center;
  width: 100%;
  font-weight: 100;
}

@media (min-width: 576px) {
  section#digitization p {
    color: #fff;
    margin: 3% auto 2%;
    text-align: center;
    width: 75%;
    font-weight: 100;
  }
}

section#about h2 {
  color: #17335b;
  font-weight: bold;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
}

section#about p {
  color: #676767;
}

#quality {
  background: #17335b;
  color: #676767;
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

#quality .col {
  position: relative;
  z-index: 1;
}

section#quality h2 {
  color: #fff;
  font-weight: bold;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  text-align: center;
  margin-bottom: 2rem;
}

section#quality p {
  color: #fff;
  width: auto;
  margin: 3% auto;
  text-align: center;
  width: 100%;
}

@media (min-width: 576px) {
  section#quality p {
    color: #fff;
    width: auto;
    margin: 3% auto 2%;
    text-align: center;
    width: 75%;
  }
}

section#quality span {
  font-weight: bold;
  font-size: 22px;
  color: #fff;
  position: relative;
  top: 0;
  display: block;
  margin-bottom: 2rem;
  text-align: center;
}

section#quality ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 6% auto 0;
  position: relative;
  z-index: 2;
  padding: 0;
}

@media (min-width: 576px) {
  section#quality ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin: 6% auto 0;
    position: relative;
    z-index: 2;
  }
}

section#quality ul li {
  position: relative;
  margin: 0;
  flex-basis: 50%;
}

@media (min-width: 576px) {
  section#quality ul li {
    position: relative;
    margin: 0;
    flex-basis: 25%;
  }
}

section#quality ul li > div {
  position: relative;
  width: 130px;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  border-radius: 50%;
  border: solid 1px #fff;
  margin: 0 auto;
}

section#quality ul li span {
  font-weight: 100;
  font-size: 16px;
  text-align: center;
  position: relative;
  z-index: 2;
  width: auto;
  height: 100px;
  padding: 5px;
  top: 25px;
  align-items: center;
  color: #fff;
  transition: all .3s cubic-bezier(.2, .02, .9, .67);
  transform-origin: top;
  left: 0;
  right: 0;
  opacity: 1;
}

section#quality ul li span.line {
  position: relative;
  overflow: hidden;
  width: 4px;
  height: 120px;
  margin: 0 auto;
  top: 10px;
  display: none;
}

@media (min-width: 576px) {
  section#quality ul li span.line {
    position: relative;
    overflow: hidden;
    width: 4px;
    height: 120px;
    margin: 0 auto;
    top: 10px;
    display: flex;
  }
}

section#quality ul li span.line:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 120px;
  background: rgba(255, 255, 255, 0);
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-left: dashed 1px rgba(255, 255, 255, .45);
  animation: 2s ease-in-out 0s forwards infinite running animHomeHeaderLine;
}

section#quality ul li:nth-child(1) span.line:after {
  animation-delay: .2s;
}

section#quality ul li:nth-child(2) span.line:after {
  animation-delay: .4s;
}

section#quality ul li:nth-child(3) span.line:after {
  animation-delay: .6s;
}

section#quality ul li:nth-child(4) span.line:after {
  animation-delay: .8s;
}

section#quality ul li img {
  position: relative;
  width: 125px;
  height: 125px;
  z-index: 1;
  left: 0;
  right: 0;
  display: block;
  padding: 0;
  margin: 0;
}

#quality:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  background: url(../../assets/img//global-3.svg) no-repeat right top / 40%;
  opacity: .10;
  animation: cell 35s linear infinite;
  mix-blend-mode: color-dodge;
  z-index: 0;
  display: none;
}

@media (min-width: 576px) {
  #quality:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    right: 0;
    background: url(../../assets/img//global-3.svg) no-repeat right top / 40%;
    opacity: .10;
    animation: cell 35s linear infinite;
    mix-blend-mode: color-dodge;
    z-index: 0;
    display: block;
  }
}

/* --- Start progress bar --- */

.process-wrapper {
  margin: auto;
  max-width: 1080px;
  margin-top: 75px;
  font-family: 'AntiqueOliTCon';
}

#progress-bar-container {
  position: relative;
  width: 100%;
  margin: auto;
  height: 100px;
  margin-top: 0;
}

@media (min-width: 768px) {
  #progress-bar-container {
    position: relative;
    width: 90%;
    margin: auto;
    height: 100px;
    margin-top: 0;
  }
}

#progress-bar-container ul {
  padding: 0;
  margin: 0;
  padding-top: 0;
  z-index: 4;
  position: relative;
  width: 100%;
  margin-top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#progress-bar-container li:before {
  content: " ";
  display: block;
  margin: auto;
  width: 2px;
  height: 15px;
  border-radius: 0;
  transition: all ease 0.3s;
  background: #aaa;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
}

#progress-bar-container li:hover:before {
  height: 35px;
}

#progress-bar-container li.active:before {
  background: linear-gradient(to right, #3b73b8 0%, #3b73b8 100%);
  height: 35px;
}

#progress-bar-container li {
  list-style: none;
  width: 33.3%;
  text-align: center;
  color: #aaa;
  text-transform: capitalize;
  font-size: 11px;
  cursor: pointer;
  font-weight: 700;
  transition: all ease 0.2s;
  vertical-align: bottom;
  height: 60px;
  position: relative;
  bottom: 0;
}

@media (min-width: 768px) {
  #progress-bar-container li {
    list-style: none;
    width: 20%;
    text-align: center;
    color: #aaa;
    text-transform: capitalize;
    font-size: 11px;
    cursor: pointer;
    font-weight: 700;
    transition: all ease 0.2s;
    vertical-align: bottom;
    height: 60px;
    position: relative;
    bottom: 0;
  }
}

#progress-bar-container li .step-inner {
  position: absolute;
  width: 100%;
  bottom: 80px;
  font-size: 14px;
}

#progress-bar-container li.active, #progress-bar-container li:hover {
  color: #17335b;
}

#progress-bar-container li:after {
  content: " ";
  display: block;
  width: 6px;
  height: 6px;
  background: #777;
  margin: auto;
  border: solid 7px #fff;
  border-radius: 50%;
  margin-top: 0;
  box-shadow: 0 2px 13px -1px rgba(0, 0, 0, 0.3);
  transition: all ease 0.2s;
  box-sizing: content-box;
  position: relative;
  top: 25px;
}

#progress-bar-container li:hover:after {
  background: #555;
}

#progress-bar-container li.active:after {
  background: #207893;
}

#progress-bar-container #line {
  width: 85%;
  margin: auto;
  background: #eee;
  height: 6px;
  position: absolute;
  left: 0;
  top: 33px;
  z-index: 1;
  border-radius: 50px;
  transition: all ease 0.9s;
  right: 0;
}

@media (min-width: 768px) {
  #progress-bar-container #line {
    width: 50%;
    margin: auto;
    background: #eee;
    height: 6px;
    position: absolute;
    left: 0;
    top: 33px;
    z-index: 1;
    border-radius: 50px;
    transition: all ease 0.9s;
    right: 0;
  }
}

#progress-bar-container #line-progress {
  content: " ";
  width: 10%;
  height: 100%;
  background: #3b73b8;
  background: linear-gradient(to right, #21599d 0%, #3b73b8 100%);
  position: absolute;
  z-index: 2;
  border-radius: 50px;
  transition: all cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.9s;
}

#progress-content-section {
  width: 100%;
  margin: auto;
  background: #fff;
  border-radius: 4px;
}

@media (min-width: 768px) {
  #progress-content-section {
    width: 90%;
    margin: auto;
    background: #fff;
    border-radius: 4px;
  }
}

#progress-content-section .section-content {
  padding: 5px 40px;
  text-align: center;
  font-family: 'AntiqueOliTCon';
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.section-content .left-content {
  flex-basis: 45%;
  position: relative;
}

.left-content .img-wrapper {
  width: 90%;
  position: relative;
  margin: 0 auto;
  border: solid 5px rgba(255, 255, 255, 0);
}

.left-content .img-wrapper:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  background: #fff;
  width: 100%;
  height: 100%;
  transition: all .3s ease-in-out .25s;
  transform: scaleX(0);
  transform-origin: bottom left;
}

.left-content .img-wrapper:after {
  content: "";
  position: absolute;
  left: -10%;
  top: -10%;
  z-index: -1;
  background: #3b73b8;
  width: 100%;
  height: 100%;
  transition: all .3s ease-in-out .5s;
  transform: scaleX(1);
  transform-origin: left;
}

.left-content .img-wrapper img {
  width: 100%;
  height: 100%;
  transform: translateX(0);
  transform-origin: left;
  position: relative;
  left: 0;
  top: 0;
  bottom: 0;
}

.co-message .img-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  z-index: 2;
  justify-content: center;
  align-items: center;
  mix-blend-mode: overlay;
}

.co-message .img-mask .tend {
  position: relative;
  width: 90%;
  height: 100%;
  left: -64%;
  top: 0;
  mix-blend-mode: overlay;
  transform: skew(-20deg, 0deg) scaleX(0);
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) .55s;
  transform-origin: left bottom;
  border-right: solid 1px rgba(59, 115, 184, .85);
  border-left: solid 1px rgba(59, 115, 184, .75);
  background: rgba(59, 115, 184, 1);
}

.co-message .img-mask .tend:before {
  content: "";
  position: absolute;
  width: 10px;
  height: 0;
  right: -2%;
  top: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(54 137 201 / 50%), rgb(54 137 201 / 26%));
  mix-blend-mode: color-dodge;
  box-shadow: 0 0 11px rgb(54 137 201 / 74%);
}

.co-message .img-mask .tend:after {
  content: "";
  position: absolute;
  width: 115px;
  height: 39px;
  right: 3%;
  bottom: 7%;
  background: url(../../assets/img//bus3s-white.png) no-repeat center center / 100%;
  transform: skew(20deg, 0deg) translateX(-25px);
  opacity: 0;
}

.left-content .img-wrapper img.lens {
  position: absolute;
  width: 180px;
  height: 230px;
  top: -26%;
  right: -27%;
  transform: rotate(0);
  transform-origin: center;
  mix-blend-mode: screen;
  left: auto;
}

.section-content .description {
  flex-basis: 100%;
  padding-left: 0;
  text-align: center;
}

@media (min-width: 576px) {
  .section-content .description {
    flex-basis: 55%;
    padding-left: 0;
    text-align: left;
  }
}

#progress-content-section .section-content h1 {
  font-family: 'AntiqueOliTCon';
  text-align: center;
  margin-bottom: 2rem;
}

@media (min-width: 576px) {
  #progress-content-section .section-content h1 {
    font-family: 'AntiqueOliTCon';
    text-align: left;
  }
}

#progress-content-section .section-content h2 {
  font-size: 17px;
  text-transform: uppercase;
  color: #333;
  letter-spacing: 1px;
}

#progress-content-section .section-content p {
  font-size: 16px;
  line-height: 1.8em;
  color: #777;
  text-align: center;
  transform-origin: bottom;
  transform: translateY(20px);
  opacity: 0;
  margin: 0;
}

@media (min-width: 576px) {
  #progress-content-section .section-content p {
    font-size: 16px;
    line-height: 1.8em;
    color: #777;
    text-align: left;
    transform-origin: bottom;
    transform: translateY(20px);
    opacity: 0;
    margin: 0;
  }
}

#progress-content-section .section-content span {
  font-weight: bold;
  color: #08254f;
  font-size: 19px;
  transform-origin: bottom;
  transform: translateY(20px);
  opacity: 0;
  position: relative;
  display: block;
}

#progress-content-section .section-content a {
  position: relative;
  text-decoration: none;
  color: #3b73b8;
  width: 100px;
  text-align: left;
  margin-top: 2rem;
  display: block;
  text-transform: capitalize;
  font-family: 'AntiqueOliTCon';
  transform-origin: bottom;
  transform: translateY(20px);
  opacity: 0;
  overflow: hidden;
  z-index: 1;
  transition: all .3s cubic-bezier(0.8, 0, .5, 1) .1s;
}

#progress-content-section .section-content a:hover {
  letter-spacing: 2px;
}

#progress-content-section .section-content a:before, #progress-content-section .section-content a:after {
  content: "\f30b";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  right: 0;
  display: block;
  top: 0;
  transform-origin: left;
  transform: translateX(0);
  opacity: 1;
  transition: all .3s cubic-bezier(0.8, 0, .5, 1);
  z-index: 0;
}

#progress-content-section .section-content a:hover:before {
  transform: translateX(100px);
  opacity: 0;
  transform-origin: right;
}

#progress-content-section .section-content a:after {
  transform: translateX(-100px);
  opacity: 0;
}

#progress-content-section .section-content a:hover:after {
  transform: translateX(0);
  opacity: 1;
}

#progress-content-section .section-content {
  display: none;
  animation: FadeInUp 350ms cubic-bezier(0.8, 0, .5, 1) 1;
  animation-fill-mode: forwards;
  transform: translateY(15px);
  opacity: 0;
}

#progress-content-section .section-content ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;
  padding: 0;
}

#progress-content-section .section-content ul li {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  text-align: left;
  border-bottom: 1px dashed #dbdbdb;
  margin: 5px auto;
  padding: 10px 0;
}

#progress-content-section .section-content ul li:last-of-type {
  border: none;
}

#progress-content-section .section-content ul li img {
  width: 100px;
  height: 100px;
}

#progress-content-section .section-content ul li span {
  margin-left: 0;
  line-height: 1.5;
  font-size: 16px;
}

#progress-content-section .section-content ul li span b {
  color: #21599d;
}

.avatar {
  position: relative;
  border: solid 1px #dbdbdb;
}

.avatar:after {
  content: "";
  width: 100%;
  height: 100%;
  background: none;
  border: solid 1px #3b73b8;
  left: -7px;
  top: -7px;
  z-index: -1;
  position: absolute;
}

.avatar:before {
  content: "";
  width: 20px;
  height: 20px;
  background: #3b73b8;
  border: solid 5px #fff;
  left: -18px;
  top: calc(50% - 20px);
  z-index: 0;
  position: absolute;
}

#progress-content-section .section-content.active {
  display: flex;
}

.section-content.active ul li {
  animation: mask-4 400ms ease-in-out 500ms both;
  animation-delay: .25s;
}

.section-content.active ul li:nth-child(2) {
  animation-delay: .30s;
}

.section-content.active ul li:nth-child(3) {
  animation-delay: .35s;
}

.section-content.active .left-content .img-wrapper {
  animation: mask-3 800ms ease-in-out 500ms both 1;
}

.section-content.active .left-content .img-wrapper:before {
  animation: mask-1 800ms cubic-bezier(0.8, 0, .5, 1) .45s both 1;
}

.section-content.active .left-content .img-wrapper:after {
  animation: mask-0 550ms cubic-bezier(0.8, 0, .5, 1) .2s both 1;
}

.section-content.active .left-content .img-wrapper img {
  animation: mask-2 400ms cubic-bezier(0.8, 0, .5, 1) 800ms both 1;
}

.section-content.active .left-content .img-mask .tend {
  animation: from-left 750ms cubic-bezier(0.8, 0, .5, 1) alternate 950ms both 1;
}

#progress-content-section .section-content.active.fired .tend {
  animation: from-left-b 750ms cubic-bezier(0.8, 0, .5, 1) alternate 50ms both 1;
}

.section-content.active .left-content .img-wrapper img.lens {
  animation: flare 750ms cubic-bezier(0.8, 0, .5, 1) alternate 1100ms both 1;
}

#progress-content-section .section-content.active.fired img.lens {
  animation: flare-b 750ms cubic-bezier(0.8, 0, .5, 1) alternate 200ms both 1;
}

.section-content.active .left-content .img-mask .tend:before {
  animation: from-top 750ms cubic-bezier(0.8, 0, .5, 1) alternate running 1350ms both 1;
}

#progress-content-section .section-content.active.fired .tend:before {
  animation: from-top-b 750ms cubic-bezier(0.8, 0, .5, 1) alternate running 350ms both 1;
}

.section-content.active .CEO span:first-child {
  animation: ceo-txt 750ms cubic-bezier(0.8, 0, .5, 1) alternate running 1600ms both 1;
}

#progress-content-section .section-content.active.fired .CEO span:first-child {
  animation: ceo-txt-2 750ms cubic-bezier(0.8, 0, .5, 1) alternate running 500ms both 1;
}

.section-content.active .CEO span:nth-child(2) {
  animation: ceo-txt 750ms cubic-bezier(0.8, 0, .5, 1) alternate running 1800ms both 1;
}

#progress-content-section .section-content.active.fired .CEO span:nth-child(2) {
  animation: ceo-txt-2 750ms cubic-bezier(0.8, 0, .5, 1) alternate running 650ms both 1;
}

.section-content.active .img-mask .tend:after {
  animation: mask-2-b-co 500ms cubic-bezier(0.8, 0, .5, 1) running 2000ms forwards 1;
}

#progress-content-section .section-content.active.fired .tend:after {
  animation: mask-2-c-co 500ms cubic-bezier(0.8, 0, .5, 1) running 800ms forwards 1;
}

.section-content.active p {
  animation: mask-4 300ms cubic-bezier(0.8, 0, .5, 1) 300ms both 1;
}

.section-content.active a {
  animation: mask-4 300ms cubic-bezier(0.8, 0, .5, 1) 400ms both 1;
}

.section-content.active span {
  animation: mask-4 350ms cubic-bezier(0.8, 0, .5, 1) 350ms both 1;
}

.elipse {
  position: absolute;
  border-radius: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-animation: cell 20s linear infinite;
  animation: cell 20s linear infinite;
  border: 16rem solid rgb(255 255 255 / 25%);
  height: 15rem;
  left: 1%;
  top: -20rem;
  width: 15rem;
  z-index: 3;
  mix-blend-mode: overlay;
}

#portfolio {
  background: #fff;
  color: #FFF;
  padding: 4em 0;
  position: relative;
  overflow: hidden;
}

#portfolio:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -42%;
  left: 0;
  background: url(../../assets/img//tri-texture.svg) no-repeat center top / 52%;
  opacity: .15;
  z-index: 0;
  right: 0;
}

#portfolio .title-logo {
  left: 6.6%;
  top: -75px;
  height: auto;
}

.title:after {
  content: "";
  width: 100%;
  height: 100%;
  background: none;
  border: solid 1px #3b73b8;
  left: -7px;
  top: -7px;
  z-index: -1;
  position: absolute;
}

.title:before {
  content: "";
  width: 20px;
  height: 20px;
  background: #3b73b8;
  border: solid 5px #fff;
  left: -18px;
  top: calc(50% - 20px);
  z-index: 0;
  position: absolute;
}

#portfolio h2 {
  text-align: center;
  font-family: 'AntiqueOliTCon';
  font-size: 30px;
  color: #fff;
  font-weight: bold;
  background: #3b73b8;
  margin: 0;
  padding: 0;
  position: relative;
  display: block;
  z-index: 2;
  line-height: 70px;
}

#progress-content-section .section-content .CEO {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  z-index: 1;
  overflow: hidden;
}

#progress-content-section .section-content .CEO span {
  position: relative;
  font-size: 40px;
  text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
  font-weight: bold;
  flex-grow: 1;
  transform: translateY(0) !important;
  height: 80px;
  line-height: 80px;
  opacity: 0;
}

#progress-content-section .section-content .CEO span:first-child {
  left: -4%;
  text-align: right;
  color: #fff;
  padding-right: 8%;
  -webkit-text-stroke: 1px #3689c9;
  top: -18%;
  padding-left: 8%;
}

#progress-content-section .section-content .CEO span:nth-child(2) {
  padding-left: 12.5%;
  left: -1%;
  padding-right: 13.5%;
}

#progress-content-section .section-content .CEO span:after {
  content: "";
  position: absolute;
  width: 110%;
  height: 100%;
  left: 0;
  top: 0;
  transform: skew(-20deg, 0deg);
  z-index: -1;
}

#progress-content-section .section-content .CEO span:first-child:after {
  background: #3689c9 url(../../assets/img//tri-texture.svg) no-repeat 50% 50% / 133%;
}

#progress-content-section .section-content .CEO span:nth-child(2):after {
  background: rgb(255 255 255 / 100%);
}

.bus-symbol {
  position: absolute;
  width: 50px;
  height: auto;
  left: 10px;
  top: -1px;
  display: block;
}

.bus-symbol > svg path.st0 {
  fill: #fff;
  animation: none;
}

#portfolio ul li div.title {
  position: absolute;
  border: solid 1px #fff;
  background: #fff;
  height: auto;
  z-index: 1;
  padding: 0;
  width: 75%;
  top: 0;
}

@media (min-width: 576px) {
  #portfolio ul li div.title {
    position: absolute;
    border: solid 1px #fff;
    background: #fff;
    height: auto;
    z-index: 1;
    padding: 0;
    width: 100%;
    top: 0;
  }
}

.lighting-wrapper {
  overflow: hidden;
  position: absolute;
  left: 0;
  top: -51%;
  width: 97%;
  height: auto;
}

#portfolio ul li div.lighting {
  width: 100%;
  position: relative;
  height: 56px;
  background: url(../../assets/img//blue-lighting.png) no-repeat center center / 100%;
  z-index: 3;
  border: none;
  transform: scaleX(0) translateX(-75%);
  opacity: 0;
  transform-origin: left;
}

#portfolio ul li div.lighting.fired {
  animation: lighting 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) .95s both running 1;
}

#portfolio ul li:hover div.lighting.fired {
  animation: lighting-b .75s cubic-bezier(0.52, 1.64, 0.37, 0.66) .3s both running 1;
}

#portfolio ul li div.lighting .lighting-wrapper > img {
  position: absolute;
  width: auto;
  height: 65px;
  left: 0;
  top: -8%;
  transform: scale(.5) translateX(-100%);
  transform-origin: left;
  animation: 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) .1s both infinite running lighting-min;
  z-index: 3;
}

#portfolio ul {
  list-style: none;
  display: flex;
  margin: 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 40px;
  width: 100%;
  background: rgb(255 255 255 / 50%);
  padding: 0;
}

@media (min-width: 576px) {
  #portfolio ul {
    list-style: none;
    display: flex;
    margin: 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: 40px;
    width: 80%;
    background: rgb(255 255 255 / 50%);
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

#portfolio ul li {
  flex-grow: 1;
  flex-basis: 100%;
  min-height: 150px;
  position: relative;
  margin: 15px 1px 1px 1px;
  box-sizing: border-box;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 576px) {
  #portfolio ul li {
    flex-grow: 1;
    flex-basis: calc(33.3% - 40px);
    min-height: 150px;
    position: relative;
    margin: 15px 1px 1px 1px;
    box-sizing: border-box;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

#portfolio ul li:first-of-type img {
  position: absolute;
  width: 100%;
  left: 0;
  top: 20px;
}

#portfolio ul li div.logo-wrapper-2 {
  position: absolute;
  top: -30%;
}

#portfolio ul li div.text-box {
  box-sizing: border-box;
  border: 1px solid rgb(219 219 219 / 50%);
  position: relative;
  width: 100%;
  height: 100%;
  padding: 1rem;
  text-align: center;
}

@media (min-width: 576px) {
  #portfolio ul li div.text-box {
    box-sizing: border-box;
    border: 1px solid rgb(219 219 219 / 50%);
    position: relative;
    width: 100%;
    height: 100%;
    padding: 1rem;
  }
}

#portfolio ul li div.logo-wrapper-2 img {
  position: relative;
  left: 0;
  width: 100%;
}

#portfolio ul li div.text-box span {
  width: 75px;
  height: 50px;
  background: #fff;
  position: absolute;
  left: 0;
  top: -8%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  right: 0;
  margin: 0 auto;
}

@media (min-width: 576px) {
  #portfolio ul li div.text-box span {
    width: 75px;
    height: 50px;
    background: #fff;
    position: absolute;
    left: 5%;
    top: -8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    right: auto;
  }
}

#portfolio ul li:last-child div.text-box span, #portfolio ul li:nth-child(4) div.text-box span {
  top: -6.5%;
}

#portfolio ul li div.text-box span i {
  font-size: 35px;
  color: #3b73b8;
}

#portfolio ul li div.text-box h5 {
  position: relative;
  z-index: 1;
  margin: 10px 0;
  color: #08254f;
  font-weight: bold;
}

#portfolio ul li div.text-box p {
  font-size: 16px;
  font-weight: normal;
  color: #777;
}

#portfolio ul li ul.products {
  list-style: none;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

#portfolio ul li ul.products > li {
  flex-basis: 24%;
  position: relative;
  background: #fff;
  min-height: auto;
}

#portfolio ul li ul.products > li > div {
  border: solid 1px #fff;
}

#portfolio ul li ul.products > li > div img {
  position: absolute;
  width: auto;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
}

.popup-gallery > div {
  border: solid 1px rgb(219 219 219 / 50%);
  position: relative;
  perspective: 400px;
  overflow: hidden;
}

.popup-gallery > div a {
  height: 250px;
}

.popup-gallery > div a .bus3s-sympol {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(12) rotate(-25deg);
  opacity: 0;
  transition: all .3s cubic-bezier(0.8, 0, .5, 1);
}

.popup-gallery > div:hover a .bus3s-sympol {
  transform: translate(-60%, 11%) scale(2) rotate(-5deg);
  opacity: .3;
}

.popup-gallery > div a .bus3s-sympol .st0 {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(255, 255, 255, 1);
  stroke-miterlimit: 10;
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
}

.popup-gallery > div:hover a .bus3s-sympol .st0 {
  animation: outline-x-1-sympol 1.5s cubic-bezier(0.8, 0, .5, 1) both 1, bg-x-1-sympol 1.3s cubic-bezier(0.8, 0, .5, 1) both 1;
}

.popup-gallery > div a img {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  height: 100%;
  transform: scale(1.2);
  transition: all .3s cubic-bezier(0.8, 0, .5, 1);
}

.popup-gallery > div:hover a img {
  transform: scale(1);
}

#reseller {
  position: relative;
  color: #ffffff;
  padding: 4rem 0;
  text-align: center;
  overflow: hidden;
}

#synergy {
  position: relative;
  overflow: hidden;
  padding: 4rem 0;
}

#synergy:before {
  content: "";
  position: absolute;
  width: 55%;
  height: 100%;
  top: -50%;
  right: 0;
  left: 0;
  background: url(../../assets/img//tri-texture.svg) no-repeat center center / 100%;
  opacity: .15;
  z-index: 0;
  margin: 0 auto;
}

#synergy .row > div {
  background: rgb(255 255 255 / 50%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 19%);
  padding: 1rem 0;
  position: relative;
  overflow: hidden;
}

#synergy .row > div:before {
  content: "";
  position: absolute;
  width: 70%;
  height: 100%;
  bottom: -25%;
  left: 0%;
  background: url(../../assets/img//tri-texture.svg) no-repeat center bottom / 75%;
  opacity: .15;
  z-index: 0;
  margin: 0 auto;
  display: none;
}

@media (min-width: 576px) {
  #synergy .row > div:before {
    content: "";
    position: absolute;
    width: 70%;
    height: 100%;
    bottom: -25%;
    left: 0%;
    background: url(../../assets/img//tri-texture.svg) no-repeat center bottom / 75%;
    opacity: .15;
    z-index: 0;
    margin: 0 auto;
    display: block;
  }
}

#synergy h2 {
  color: #17335b;
  font-weight: bold;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  text-align: center;
  margin: 1rem auto 2rem;
  height: 65px;
  line-height: 65px;
  width: 300px;
  position: relative;
}

#synergy p {
  font-size: 16px;
  font-weight: normal;
  color: #777;
  text-align: center;
  width: 90%;
  margin: 0 auto;
}

@media (min-width: 576px) {
  #synergy p {
    font-size: 16px;
    font-weight: normal;
    color: #777;
    text-align: center;
    width: 75%;
    margin: 0 auto;
  }
}

#synergy span {
  font-weight: bold;
  text-align: center;
  position: relative;
  display: block;
  color: #777;
  margin: 2rem 0;
  font-size: 18px;
}

@media (min-width: 576px) {
  #synergy span {
    font-weight: bold;
    text-align: center;
    position: relative;
    display: block;
    color: #777;
    margin: 2rem 0;
    font-size: 19px;
  }
}

#synergy .avatar {
  position: relative;
  margin: 3rem auto;
  width: 400px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .20);
}

#synergy .avatar img {
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  display: block;
}

#synergy .avatar:after {
  content: "";
  position: absolute;
  width: 610px;
  height: 100%;
  left: -105px;
  top: 75px;
  background: url(../../assets/img//pro-img-bg.svg) no-repeat center center / 100%;
  opacity: 1;
  margin: 0 auto;
  border: none;
  z-index: 0;
  display: none;
}

@media (min-width: 576px) {
  #synergy .avatar:after {
    content: "";
    position: absolute;
    width: 610px;
    height: 100%;
    left: -105px;
    top: 75px;
    background: url(../../assets/img//pro-img-bg.svg) no-repeat center center / 100%;
    opacity: 1;
    margin: 0 auto;
    border: none;
    z-index: 0;
    display: block;
  }
}

#synergy .avatar:before {
  content: "";
  width: 20px;
  height: 20px;
  background: #3b73b8;
  border: solid 5px #fff;
  left: 0;
  top: auto;
  bottom: -8px;
  z-index: 0;
  position: absolute;
  right: 0;
  margin: 0 auto;
  z-index: 1;
  display: none;
}

@media (min-width: 576px) {
  #synergy .avatar:before {
    content: "";
    width: 20px;
    height: 20px;
    background: #3b73b8;
    border: solid 5px #fff;
    left: 0;
    top: auto;
    bottom: -8px;
    z-index: 0;
    position: absolute;
    right: 0;
    margin: 0 auto;
    z-index: 1;
    display: block;
  }
}

#reseller:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  background: url(../../assets/img//global-3.svg) no-repeat left top / 40%;
  opacity: .10;
  animation: cell 35s linear infinite;
  mix-blend-mode: luminosity;
  z-index: 0;
}

#reseller h2 {
  font-weight: bold;
}

#reseller p {
  color: #fff;
  width: 70%;
  margin: 3% auto 2%;
}

#reseller span {
  display: block;
  font-size: 20px;
  font-weight: bold;
  margin-top: 3%;
}

#reseller div.cta {
  background: #fff;
  width: 150px;
  height: 45px;
  border-radius: 25px;
  top: 20px;
  position: relative;
  overflow: hidden;
  z-index: 1;
  margin: 3% auto;
}

#reseller div .cta:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: #3b73b8;
  z-index: -1;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .25s;
}

#reseller div.cta:hover:before {
  width: 100%;
}

#reseller div.cta:hover a {
  color: #fff;
  letter-spacing: 2px;
}

#reseller div.cta a {
  line-height: 45px;
  color: #3b73b8;
  z-index: 1;
  width: 100%;
  height: 100%;
  text-decoration: none;
  position: relative;
  display: block;
  text-transform: capitalize;
}

#success, #posiflex, #kiosk, #portwell, #comp-solutions, #contact-us {
  padding: 0;
  position: relative;
}

@media (min-width: 576px) {
  #success, #posiflex, #kiosk, #portwell, #comp-solutions, #contact-us {
    padding: 5em 0;
    position: relative;
  }
}

#success {
  background: #fff;
}

#success .service-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

#success #success h2, #posiflex h2, #kiosk h2, #portwell h2, #comp-solutions h2, #contact-us-desc h2 {
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  color: #17335b;
  font-weight: bold;
  text-align: center;
  text-transform: capitalize;
}

#contact-us-desc #title h2, #contact-us-desc #physical-locations h2 {
  text-align: center;
}

#contact-us-desc h2 {
  margin: 3rem auto;
}

#contact-us-desc p {
  width: 75%;
  margin: 1rem auto;
  font-size: 16px;
  line-height: 1.8em;
  color: #777;
}

#success hr {
  border-color: #3b73b8;
}

#success a, #posiflex a, #kiosik a {
  position: relative;
  bottom: 0;
  display: block;
  color: #3b73b8;
  text-decoration: none;
}

.text-primary {
  color: #3b73b8 !important;
}

.portfolio-box .portfolio-box-caption {
  background: rgba(59, 115, 184, .9);
  transition: all cubic-bezier(.9, 0, .33, 1) .3s;
}

.portfolio-box:hover .portfolio-box-caption, .popup-gallery > div:hover .portfolio-box-caption {
  opacity: 1;
}

#social-responsibility {
  padding: 0 0 4em;
  position: relative;
  background: #fff;
  z-index: 1;
}

#social-responsibility:after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -8%;
  left: 1%;
  background: url(../../assets/img//social-responsiblity.jpg) no-repeat bottom left / 100%;
  z-index: 1;
  right: 0;
  border-radius: 50%;
  border: solid 1px rgb(103 188 71 / 50%);
  box-shadow: 0 0 30px rgb(255 255 255 / 62%);
  transform: rotate(0);
  display: none;
}

@media (min-width: 576px) {
  #social-responsibility:after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    bottom: -8%;
    left: 1%;
    background: url(../../assets/img//social-responsiblity.jpg) no-repeat bottom left / 100%;
    z-index: 1;
    right: 0;
    border-radius: 50%;
    border: solid 1px rgb(103 188 71 / 50%);
    box-shadow: 0 0 30px rgb(255 255 255 / 62%);
    transform: rotate(0);
    display: block;
  }
}

@media (min-width: 992px) {
  #social-responsibility:after {
    bottom: -4%;
    width: 200px;
    height: 200px;
    left: 5.65%;
  }
}

#social-responsibility:before, section#social-responsibility.fired:after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  bottom: -13%;
  left: -3%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 50%), rgb(255 255 255 / 0));
  z-index: -1;
  right: 0;
  border-radius: 50%;
  border: solid 1px rgb(123 204 185 / 23%);
  box-shadow: inset 0 0 30px rgb(255 255 255 / 65%);
  display: none;
}

@media (min-width: 576px) {
  #social-responsibility:before, section#social-responsibility.fired:after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    bottom: -13%;
    left: -3%;
    background: radial-gradient(closest-side, rgb(255 255 255 / 50%), rgb(255 255 255 / 0));
    z-index: -1;
    right: 0;
    border-radius: 50%;
    border: solid 1px rgb(123 204 185 / 23%);
    box-shadow: inset 0 0 30px rgb(255 255 255 / 65%);
    display: block;
  }
}

@media (min-width: 992px) {
  #social-responsibility:before, section#social-responsibility.fired:after {
    width: 300px;
    height: 300px;
    bottom: -9%;
    left: 1%;
  }
}

@media (min-width: 1200px) {
  #social-responsibility:before, section#social-responsibility.fired:after {
    width: 300px;
    height: 300px;
    bottom: -9%;
    left: 2%;
  }
}

section#social-responsibility.fired:after {
  animation: 5s linear 1.75s both infinite running rotation;
}

#social-responsibility .row > div {
  background: rgb(255 255 255 / 50%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 19%);
  padding: 1rem 0;
  position: relative;
  overflow: hidden;
  padding: 0rem 0 3rem;
  margin: 2rem auto;
}

#social-responsibility .row > div:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0%;
  right: -35%;
  background: url(../../assets/img//tri-texture.svg) no-repeat top right / 50%;
  opacity: .15;
  z-index: 0;
  left: auto;
}

#social-responsibility h2 {
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  color: #17335b;
  position: relative;
  margin: 2rem 0;
}

#social-responsibility span {
  font-weight: bold;
  text-align: center;
  position: relative;
  display: block;
  color: #777;
  margin: 2rem 0;
  font-size: 19px;
}

#social-responsibility p {
  width: 80%;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8em;
  color: #777;
}

#social-responsibility p b {
  font-weight: bold;
  color: #002060;
}

#social-responsibility h3 {
  font-weight: bold;
  text-align: center;
  position: relative;
  display: block;
  color: #3873b8;
  margin: 2rem 0;
  font-size: 19px;
}

#social-responsibility ul {
  width: 75%;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

#social-responsibility ul li {
  margin: .5rem 0;
  text-align: center;
}

#social-responsibility a {
  text-decoration: none;
  color: #3873b8;
  position: relative;
  transition: all cubic-bezier(.9, 0, .33, 1) .3s;
  top: 15px;
}

#social-responsibility a:hover {
  letter-spacing: 3px;
}

.seperate {
  height: 71vh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (min-width: 576px) {
  .seperate {
    height: 100vh;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
}

@media (min-width: 992px) {
  .seperate {
    height: 80vh;
  }
}

@media (min-width: 1200px) {
  .seperate {
    height: 100vh;
  }
}

.seperate:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgb(0 0 0 / 45%);
}

#kiosk.seperate:before {
  background: rgb(11 70 112 / 45%);
}

#posiflex.seperate:before {
  background: rgb(0 0 0 / 45%);
}

.seperate#success {
  background: url(../../assets/img//success-bg.jpg) no-repeat 0 0 / cover;
}

.seperate#posiflex {
  background: url(../../assets/img//posiflex-banner.jpg) no-repeat 0 0 / cover;
}

.seperate#kiosk {
  background: url(../../assets/img//kiosk-banner.jpg) no-repeat 0 0 / cover;
}

.seperate#portwell {
  background: url(../../assets/img//banner-portwell.jpg) no-repeat 0 0 / cover;
}

.seperate#comp-solutions {
  background: url(../../assets/img//comprehensive-solutions-banner.jpg) no-repeat 0 0 / cover;
}

.seperate#contact-us {
  background: #fff url(../../assets/img//banner-contact-us.jpg) no-repeat 0 0 / cover;
}

.seperate#solutions {
  background: url(../../assets/img//solutions-bg.jpg) no-repeat 0 0 / cover;
}

.seperate#solutions:before, .seperate#portwell:before, .seperate#contact-us:before {
  background: rgb(23 51 91 / 55%);
}

.seperate#comp-solutions:before {
  background: rgb(15 44 84 / 55%);
}

header.masthead .seperate h1 {
  text-align: center;
  font-family: 'AntiqueOliTCon';
  position: relative;
  margin-left: 0;
  font-weight: bold;
  font-size: 50px;
  letter-spacing: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  z-index: 1;
  opacity: 1;
}

@media (min-width: 576px) {
  header.masthead .seperate h1 {
    text-align: left;
    font-family: 'AntiqueOliTCon';
    position: relative;
    margin-left: 18%;
    font-weight: bold;
    font-size: 60px;
    letter-spacing: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    z-index: 1;
    opacity: 1;
  }
}

header.masthead .seperate span {
  text-align: center;
  font-family: 'AntiqueOliTCon';
  position: relative;
  margin-left: 0;
  font-weight: bold;
  font-size: 35px;
  letter-spacing: 4px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  z-index: 1;
  opacity: 1;
}

@media (min-width: 576px) {
  header.masthead .seperate span {
    text-align: left;
    font-family: 'AntiqueOliTCon';
    position: relative;
    margin-left: 18%;
    font-weight: bold;
    font-size: 45px;
    letter-spacing: 4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
    z-index: 1;
    opacity: 1;
  }
}

.content {
  position: relative;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

#success-desc.content, #bus3s-solutions.content, #posiflex-desc.content, #kiosk-desc.content, #portwell-desc.content, #comp-solutions-desc.content, #contact-us-desc.content {
  overflow: hidden;
  text-align: center;
  padding: 4rem 1rem;
}

@media (min-width: 576px) {
  #success-desc.content, #bus3s-solutions.content, #posiflex-desc.content, #kiosk-desc.content, #portwell-desc.content, #comp-solutions-desc.content, #contact-us-desc.content {
    overflow: hidden;
    text-align: center;
    padding: 8rem 4rem;
  }
}

section.content span {
  color: #17335b;
}

#success-desc.content:before, #bus3s-solutions.content:before, #posiflex-desc.content:before, #kiosk-desc.content:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -11%;
  right: -2%;
  background: url(../../assets/img//success-arrow.jpg) no-repeat bottom right / 55%;
  opacity: 1;
  z-index: 0;
  display: none;
}

@media (min-width: 768px) {
  #success-desc.content:before, #bus3s-solutions.content:before, #posiflex-desc.content:before, #kiosk-desc.content:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: -11%;
    right: -2%;
    background: url(../../assets/img//success-arrow.jpg) no-repeat bottom right / 55%;
    opacity: 1;
    z-index: 0;
    display: block;
  }
}

#posiflex-desc.content:before {
  background: url(../../assets/img//tri-texture.svg) no-repeat bottom center / 60%;
  bottom: -54%;
  right: 0;
  opacity: .15;
}

#kiosk-desc.content:before {
  bottom: -54%;
  right: 0;
  opacity: .15;
}

#portwell-desc.content:before, #comp-solutions-desc.content:before, #contact-us-desc.content:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -50%;
  left: 0;
  background: url(../../assets/img//tri-texture.svg) no-repeat bottom center / 52%;
  opacity: .15;
  z-index: 0;
  right: 0;
}

#contact-us-desc.content:before {
  background: url(../../assets/img//contact-us-hand.png) no-repeat bottom left / 75%;
  bottom: 0;
  opacity: 1;
  right: auto;
  left: -24%;
  height: 400px;
  width: 400px;
  transform: scaleX(-1);
}

@media (min-width: 576px) {
  #contact-us-desc.content:before {
    background: url(../../assets/img//contact-us-hand.png) no-repeat bottom left / 100%;
    bottom: 10%;
    opacity: 1;
    right: auto;
    left: -1.5%;
    height: 400px;
    width: 400px;
    transform: scaleX(-1);
  }
}

#bus3s-solutions.content:before {
  background: url(../../assets/img//digital-running.jpg) no-repeat bottom right / 40%;
  bottom: 0;
  right: 0;
}

#success-desc.content .row > div, #bus3s-solutions.content .row > div, #posiflex-desc.content .row > div, #kiosk-desc.content .row > div, #portwell-desc.content .row > div, #comp-solutions-desc.content .row > div, #contact-us-desc.content .row > div {
  padding-bottom: 5%;
  padding-top: 5%;
  background: rgb(255 255 255 / 50%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
}

#posiflex-desc.content .row > div.col, #kiosk-desc.content .row > div.col, #portwell-desc.content .row > div.col, #comp-solutions-desc.content .row > div.col, #contact-us-desc.content .row > div.col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  #posiflex-desc.content .row > div.col, #kiosk-desc.content .row > div.col, #portwell-desc.content .row > div.col, #comp-solutions-desc.content .row > div.col, #contact-us-desc.content .row > div.col {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
}

#contact-us-desc.content .row > div.col {
  flex-wrap: wrap;
  padding-top: 2rem;
  padding-bottom: 2rem;
  pointer-events: inherit;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

#contact-us-desc.content .row > div.col > div#contact-form {
  flex-basis: 100%;
  text-align: center;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

div#contact-form {
  position: relative;
  overflow: hidden;
}

div#contact-form:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 5%;
  right: -55%;
  background: url(../../assets/img//tri-texture.svg) no-repeat center right / 75%;
  opacity: .11;
  z-index: 0;
  left: auto;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 4%;
  right: auto;
  background: url(../../assets/img//tri-texture.svg) no-repeat left center / 75%;
  opacity: .11;
  z-index: 0;
  left: -52%;
}

div#contact-form form {
  width: 100%;
  position: relative;
  margin: 3rem auto 1rem;
  z-index: 1;
}

@media (min-width: 576px) {
  div#contact-form form {
    width: 60%;
    position: relative;
    margin: 3rem auto 1rem;
    z-index: 1;
  }
}

div#contact-form .form-control {
  outline: none;
  box-shadow: none;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

div#contact-form .form-control:focus {
  border: solid 1px rgb(95 140 202 / 50%);
}

div#contact-form form button {
  width: 200px;
  height: 50px;
  background: #3b8cca;
  outline: none;
  color: #fff;
  border: solid 1px #fff;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .1s;
}

div#contact-form form button:hover {
  background: #fff !important;
  color: #3b8cca;
  border: solid 1px #3b8cca;
  opacity: 1;
}

#contact-us-desc.content .row > div.col > div#title {
  flex-basis: 100%;
  text-align: center;
  border-right: dashed 1px #ced4da;
}

@media (min-width: 576px) {
  #contact-us-desc.content .row > div.col > div#title {
    flex-basis: 50%;
    text-align: center;
    border-right: dashed 1px #ced4da;
  }
}

div#title ul {
  list-style: none;
  text-align: left;
  margin: 0 auto;
  padding-left: 14%;
}

div#title ul li {
  position: relative;
  margin: 1rem 0;
}

div#title ul li a {
  text-decoration: none;
  color: #717171;
  margin-left: .5rem;
  margin-right: .5rem;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .3s;
}

div#title ul li:hover a {
  color: #3b8cca;
}

div#title ul li:before {
  color: #3b8cca;
  margin-right: 15px;
  transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) .3s;
}

div#title ul li:hover:before {
  margin-right: 22px;
}

#contact-us-desc.content .row > div.col > div#physical-locations {
  flex-basis: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  align-items: center;
}

@media (min-width: 576px) {
  #contact-us-desc.content .row > div.col > div#physical-locations {
    flex-basis: 50%;
    text-align: left;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
    align-items: center;
  }
}

div#physical-locations img {
  width: 80%;
  position: relative;
  -webkit-box-reflect: below 1% linear-gradient(transparent 23%, white 500%);
}

#map {
  padding: 0;
}

#map .container-fluid {
  padding: 0 0 4rem 0;
}

#comp-solutions-desc.content .row > div.col {
  background: url(../../assets/img//comp-solutions-bg.jpg) no-repeat center center / cover;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

#kiosk-desc.content .row > div.col img, #portwell-desc.content .row > div.col img {
  position: relative;
  margin: 0 auto;
}

#comp-solutions-desc.content .row > div.col img.comp-solutions {
  position: absolute;
  right: -161px;
  top: 210px;
  width: 230px;
  height: auto;
  z-index: 1;
}

#kiosk-desc.content .row > div.col > div:first-of-type, #portwell-desc.content .row > div.col > div:first-of-type {
  flex-direction: column;
  display: flex;
}

#posiflex-desc.content .row > div.col > div:first-of-type, #kiosk-desc.content .row > div.col > div:first-of-type, #portwell-desc.content .row > div.col > div:first-of-type {
  flex-basis: 40%;
  padding: 1rem;
  text-align: center;
}

#kiosk-desc.content .row > div.col:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: -70%;
  left: 0;
  background: url(../../assets/img//tri-texture.svg) no-repeat bottom center / 52%;
  opacity: .15;
  z-index: -1;
  right: 0;
  display: none;
}

@media (min-width: 768px) {
  #kiosk-desc.content .row > div.col:before {
    display: block;
  }
}

#posiflex-desc .posiflex-logo, #kiosk-desc .kiosk-logo, #portwell-desc .portwell-logo {
  width: 200px !important;
  left: 0 !important;
  right: 0;
  margin: 0 auto 1rem;
}

#success-desc.content h2, #staff.content h2, #bus3s-solutions h2, #mecloudy-solutions.content h2, #posiflex-desc.content h2, #kiosk-desc.content h2#portwell-desc.content h2 {
  text-align: center;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  color: #17335b;
  font-weight: bold;
  margin-bottom: 3rem;
  text-transform: capitalize;
  position: relative;
}

#posiflex-desc.content span.top4 {
  font-size: 22px;
  color: #6b6b6b;
  display: block;
  letter-spacing: 2px;
  margin: 1rem auto;
  position: relative;
  width: 160px;
}

#posiflex-desc.content span.top4:after {
  content: "";
  position: absolute;
  width: 30px;
  height: 60px;
  right: -25px;
  background: url(../../assets/img//top4.jpg) no-repeat center center / 100%;
  top: -16px;
}

#posiflex-desc.content span.top4 b {
  color: #f80400;
  font-weight: bold;
}

#mecloudy-solutions.content h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  z-index: 2;
}

#mecloudy-solutions.content h2 b {
  text-transform: uppercase;
}

#posiflex-desc.content p.posiflex {
  color: #e51c14;
  font-weight: bolder;
  text-transform: capitalize;
}

#kiosk-desc.content p.kiosk, #portwell-desc.content p.portwell, {
  color: #a1af12;
  font-weight: bolder;
  text-transform: capitalize;
}

#posiflex-desc.content a.posiflex, #kiosk-desc.content a.kiosk, #portwell-desc.content a.portwell {
  display: block;
  text-decoration: none;
  color: #6b6b6b;
  margin: .3rem auto;
  letter-spacing: 2px;
}

#posiflex-desc.content h3 {
  color: #000;
  margin: 1rem auto;
}

#posiflex-desc.content h3 strong {
  color: #e51c14;
}

#posiflex-desc.content ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 768px) {
  #posiflex-desc.content ul {
    width: 75%;
    margin: 0 auto;
  }
}

#posiflex-desc.content ul li {
  position: relative;
  text-align: left;
  padding-left: 10px;
  color: #6b6b6b;
  margin: .5rem 0;
}

#posiflex-desc.content ul li span {
  display: block;
  font-family: raleway;
  font-weight: 100;
  color: #6b6b6b;
  margin: .1rem;
  width: auto;
  left: 20px;
  position: relative;
}

#posiflex-desc.content ul li span:after, #posiflex-desc.content ul li span:before {
  left: -10px;
  position: relative;
  font-weight: 100;
  font-size: 14px;
  color: #6b6b6b;
}

#mecloudy-solutions.content .carousel-item h2 {
  text-transform: uppercase;
  color: #fff;
  transform: translateY(20px);
  opacity: 0;
}

#mecloudy-solutions.content .carousel-item h2 b {
  text-transform: capitalize;
  color: #17335b;
}

#mecloudy-solutions.content h2 strong {
  color: #3b73b8;
}

.mecloudy-logo {
  position: absolute;
  right: 52.5%;
  top: 13%;
  width: 100px;
  height: 100px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 3;
  border: solid 1px rgb(59 115 184 / 50%);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition: all .3s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.70s;
}

.mecloudy-logo > div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(0);
  opacity: 0;
  border-radius: 50%;
}

.mecloudy-logo > div:after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  left: -8%;
  bottom: 42%;
  background: #3b73b8;
  z-index: 0;
  border-radius: 50%;
}

.mecloudy-logo > div:before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  right: -8%;
  bottom: 42%;
  background: #3b73b8;
  z-index: 0;
  border-radius: 50%;
}

.mecloudy-logo img {
  width: 75%;
  position: relative;
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transition: all .35s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.95s;
}

.title-logo {
  position: absolute;
  left: 2%;
  width: 120px;
  top: 20px;
  height: 80px;
}

#mecloudy-solutions.content .title-logo {
  top: -20px;
}

.title-logo span.scroll {
  height: 245%;
  width: 2px;
  bottom: -183px;
  left: 11px;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
  position: absolute !important;
}

.title-logo span.scroll:after {
  position: absolute;
  right: 0;
  top: -15rem;
  content: "";
  width: 2px;
  height: 100%;
  background: rgba(59, 115, 184, 1);
  animation: 3s ease 0s forwards infinite running animHomeHeaderLine;
}

.title-logo span.scroll-horizon {
  height: 2px;
  width: 100%;
  top: 18px;
  left: 145px;
  overflow: hidden;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  display: block;
  position: absolute !important;
}

.title-logo span.scroll-horizon:after {
  position: absolute;
  right: -15rem;
  top: 0;
  content: "";
  width: 100%;
  height: 2px;
  background: rgba(59, 115, 184, 1);
  animation: 3s ease 0s forwards infinite running HorizonLine;
}

.title-logo:before {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  bottom: 69%;
  left: 108%;
  background: #3b73b8;
  z-index: 0;
  right: 0;
}

.title-logo:after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  left: 4.4%;
  bottom: 20%;
  background: #3b73b8;
  z-index: 0;
  right: 0;
}

#portfolio .title-logo:before {
  bottom: 41%;
}

#portfolio .title-logo:after {
  left: 4.4%;
  bottom: -50%;
}

#portfolio .title-logo span.scroll {
  bottom: -129px;
  left: 11px;
}

#clients {
  position: relative;
  padding: 0;
}

#clients h4 {
  color: #17335b;
  font-weight: bold;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
  text-align: center;
  margin: 2rem auto;
}

#success-desc.content span, #staff.content span, #bus3s-solutions.content span, #mecloudy-solutions.content span {
  display: block;
  text-align: center;
  font-weight: bold;
  color: #17335b;
  margin-top: 1rem;
  margin-bottom: .5rem;
  text-transform: capitalize;
  position: relative;
  font-size: 18px;
}

#mecloudy-solutions.content span b {
  color: #3b73b8;
  font-weight: bolder;
}

#success-desc.content p, #staff.content p, #bus3s-solutions.content p, #mecloudy-solutions.content p {
  line-height: 1.5;
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  #success-desc.content p, #staff.content p, #bus3s-solutions.content p, #mecloudy-solutions.content p {
    line-height: 1.5;
    text-align: center;
    width: 70%;
    margin: 0 auto;
  }
}

#success-desc.content span {
  color: #17335b;
}

#mecloudy-solutions.content div.desc p {
  opacity: 0;
  transform: translateY(35px);
}

#mecloudy-solutions.content .mecloudy-facilities p {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  font-size: 14.5px;
}

@media (min-width: 768px) {
  #mecloudy-solutions.content .mecloudy-facilities p {
    text-align: left;
    width: 90%;
    margin: 0;
  }
}

#bus3s-solutions.content img {
  position: relative;
  display: block;
  margin: 2rem auto;
  width: 100%;
}

@media (min-width: 768px) {
  #bus3s-solutions.content img {
    position: relative;
    display: block;
    margin: 4rem auto 0;
    width: auto;
  }
}

.mecloudy-facilities {
  position: relative;
  margin: 0 auto;
}

.carousel-item {
  position: relative;
}

/* .carousel-item:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  background: url(../../assets/img//net-bg.svg) no-repeat center right / 55%;
  opacity: 1;
  z-index: 0;
  right: 0;
  mix-blend-mode: overlay;
} */

div.desc {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 350px;
  z-index: 1;
  border: solid 1px #efefef;
  padding: 1rem;
  flex-basis: 100%;
  background: #3b73b8 url(../../assets/img//net-bg.svg) no-repeat center right / 73%;
  padding-top: 2%;
  padding-bottom: 2%;
}

@media (min-width: 768px) {
  div.desc {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    min-height: 350px;
    z-index: 1;
    border: solid 1px #efefef;
    padding: 1rem 1rem 1rem 5rem;
    flex-basis: 66%;
    background: #3b73b8 url(../../assets/img//net-bg.svg) no-repeat center right / 73%;
    padding-top: 2%;
    padding-bottom: 2%;
  }
}

div.desc img.vert-light {
  position: absolute;
  right: -25.75%;
  top: 0;
  width: 160px;
  height: 56px;
  transform-origin: top center;
  opacity: 0;
  transform: rotate(90deg) translateX(-50%) scaleX(0);
  mix-blend-mode: screen;
}

@media (min-width: 768px) {
  div.desc img.vert-light {
    position: absolute;
    right: -12.75%;
    top: 0;
    width: 160px;
    height: 56px;
    transform-origin: top center;
    opacity: 0;
    transform: rotate(90deg) translateX(-50%) scaleX(0);
    mix-blend-mode: screen;
  }
}

div.desc:before {
  content: "";
  position: absolute;
  width: 95%;
  height: 85%;
  right: 0;
  left: 0;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .15);
  top: 7.5%;
  margin: 0 auto;
}

div.desc:after {
  content: "";
  position: absolute;
  width: 160px;
  height: 55px;
  right: 0;
  left: 0;
  z-index: 1;
  background: #3b73b8 url(../../assets/img//mecloudy-white.png) no-repeat top center / 65%;
  top: 2%;
  margin: 0 auto;
  opacity: 0;
  transform: translateX(-25px);
  transform-origin: left;
}

@media (min-width: 768px) {
  div.desc:after {
    content: "";
    position: absolute;
    width: 160px;
    height: 55px;
    right: auto;
    left: 5%;
    z-index: 1;
    background: #3b73b8 url(../../assets/img//mecloudy-white.png) no-repeat top center / 65%;
    top: 2%;
    margin: 0;
    opacity: 0;
    transform: translateX(-25px);
    transform-origin: left;
  }
}

#staff.content, #mecloudy-solutions.content {
  overflow: hidden;
}

#mecloudy-solutions.content {
  padding-top: 0;
}

#staff.content:before, #mecloudy-solutions.content:before {
  content: "";
  position: absolute;
  width: 55%;
  height: 100%;
  top: -50%;
  right: 0;
  left: 0;
  background: url(../../assets/img//tri-texture.svg) no-repeat center center / 100%;
  opacity: .15;
  z-index: 0;
  margin: 0 auto;
}

#mecloudy-solutions.content:before {
  bottom: -55%;
  width: 60%;
  opacity: .12;
  top: auto;
}

#staff.content .row > div, #mecloudy-solutions.content .row > div {
  padding-bottom: 5%;
  padding-top: 5%;
  background: rgb(255 255 255 / 50%);
  box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  display: flex;
  flex-direction: column;
}

@media (min-width: 768px) {
  #staff.content .row > div, #mecloudy-solutions.content .row > div {
    padding-bottom: 5%;
    padding-top: 5%;
    background: rgb(255 255 255 / 50%);
    box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
    display: flex;
    flex-direction: row;
  }
}

#mecloudy-solutions.content .row > div {
  position: relative;
  overflow: hidden;
}

#mecloudy-solutions.content ul {
  list-style: none;
  margin: .5rem auto;
  text-align: left;
  width: 100%;
}

@media (min-width: 768px) {
  #mecloudy-solutions.content ul {
    list-style: none;
    margin: .5rem auto;
    text-align: left;
    width: 60%;
  }
}

#mecloudy-solutions.content ul li {
  margin-top: .25rem;
  margin-bottom: .25rem;
  font-weight: 600;
  position: relative;
}

#mecloudy-solutions.content ul li:before {
  margin-right: 20px;
}

#mecloudy-solutions.content a.more {
  position: relative;
  text-decoration: none;
  color: #3b73b8;
  width: 185px;
  text-align: center;
  margin: 2rem auto 0;
  display: block;
  text-transform: capitalize;
  font-family: 'AntiqueOliTCon';
  transform-origin: bottom;
  overflow: hidden;
  z-index: 1;
  transition: all .3s cubic-bezier(.9, 0, .33, 1);
}

#mecloudy-solutions.content a.more:hover {
  letter-spacing: 2px;
}

#mecloudy-solutions.content a.more:before, #mecloudy-solutions.content a.more:after {
  content: "\f309";
  font-family: "Font Awesome 5 Free";
  position: absolute;
  right: 0;
  display: block;
  top: 0;
  transform-origin: top;
  transform: translateY(0);
  opacity: 0;
  transition: opacity .15s cubic-bezier(0.8, 0, .5, 1), transform .3s cubic-bezier(0.8, 0, .5, 1);
  z-index: 0;
}

#mecloudy-solutions.content a.more:before {
  transform: translateY(0);
  opacity: 1;
  transition-delay: .3;
}

#mecloudy-solutions.content a.more:hover:before {
  transform: translateY(150px);
  opacity: 0;
}

#mecloudy-solutions.content a.more:hover:after {
  transform: translateY(0);
  opacity: 1;
}

#mecloudy-solutions.content a.more:after {
  transform: translateY(-150px);
  opacity: 0;
}

#mecloudy-solutions.content a.carousel-control-prev, #mecloudy-solutions.content a.carousel-control-next {
  position: absolute;
  bottom: -12%;
  right: 0;
  top: auto;
  left: 0;
  opacity: 1;
  margin: 0;
  width: 45px;
  height: 45px;
  border: solid 1px #3b73b8;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 6;
  transition: all .3s cubic-bezier(.9, 0, .33, 1);
}

@media (min-width: 768px) {
  #mecloudy-solutions.content a.carousel-control-prev, #mecloudy-solutions.content a.carousel-control-next {
    position: absolute;
    bottom: 13%;
    right: 460px;
    top: auto;
    left: auto;
    opacity: 1;
    margin: 0;
    width: 45px;
    height: 45px;
    border: solid 1px #3b73b8;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    z-index: 3;
    transition: all .3s cubic-bezier(.9, 0, .33, 1);
  }
}

#mecloudy-solutions.content a.carousel-control-next {
  right: 0;
  left: auto;
}

@media (min-width: 768px) {
  #mecloudy-solutions.content a.carousel-control-next {
    right: 411px;
  }
}

#mecloudy-solutions.content a.carousel-control-prev span, #mecloudy-solutions.content a.carousel-control-next span {
  color: #3b73b8;
  margin: 0;
  transition: all .3s cubic-bezier(.9, 0, .33, 1);
}

#mecloudy-solutions.content a.carousel-control-prev:hover span, #mecloudy-solutions.content a.carousel-control-next:hover span {
  color: #fff;
}

#mecloudy-solutions.content a.carousel-control-prev:before, #mecloudy-solutions.content a.carousel-control-next:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  right: 0;
  background: #3b73b8;
  border: solid 1px #fff;
  z-index: -1;
  transform-origin: right;
  transform: scaleX(0);
  transition: all .3s cubic-bezier(.9, 0, .33, 1);
}

#mecloudy-solutions.content a.carousel-control-next:before {
  transform-origin: left;
}

#mecloudy-solutions.content a.carousel-control-next:hover:before {
  transform: scaleX(1);
  transform-origin: right;
}

#mecloudy-solutions.content a.carousel-control-prev:hover:before {
  transform: scaleX(1);
  transform-origin: left;
}

.carousel-indicators {
  bottom: -11%;
  right: 0;
  left: 0;
  margin: 0 auto;
  z-index: 5;
}

@media (min-width: 768px) {
  .carousel-indicators {
    bottom: 3%;
    right: auto;
    left: 1.5%;
    margin: 0;
    z-index: 5;
  }
}

.carousel-indicators li {
  background: #3b73b8;
  width: 50px;
  height: 20px;
}

@media (min-width: 768px) {
  .carousel-indicators li {
    background: #3b73b8;
    width: 30px;
    height: 3px;
  }
}

.slide-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 5;
  right: 0;
  top: 0;
  transform-origin: right;
  transform: scaleX(0);
}

.slide-mask:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #003259;
  z-index: 5;
  right: 0;
  top: 0;
  transform-origin: right;
  transform: scaleX(0);
}

.carousel-item.active .slide-mask {
  animation: .75s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s both 1 running shrink-x;
}

.carousel-item.active .slide-mask:after {
  animation: .95s cubic-bezier(0.175, 0.885, 0.32, 1.275) .3s both 1 running shrink-x;
}

.carousel-item.active .facility-img-wrapper .slide-mask {
  animation: .75s cubic-bezier(0.175, 0.885, 0.32, 1.275) .6s both 1 running shrink-x;
}

.facility-img-wrapper .slide-mask:after {
  background: #3b73b8;
}

.carousel-item.active .facility-img-wrapper .slide-mask:after {
  animation: .95s cubic-bezier(0.175, 0.885, 0.32, 1.275) .9s both 1 running shrink-x;
}

.carousel-item.active h2 {
  animation: mask-4 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 750ms both 1;
}

.carousel-item.active p {
  animation: mask-4 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 850ms both 1;
}

.carousel-item.active div.desc:after {
  animation: mask-2 300ms ease-in-out 600ms both 1;
}

.carousel-item.active .facility-img-wrapper > img {
  animation: mask-2-b 300ms ease-in-out 1200ms both 1;
}

.carousel-item.active .tech-effect > img {
  animation: 25s linear 1.75s both infinite running rotation;
  opacity: 1;
  transition: opacity .3s ease 1.5s;
}

.carousel-item.active .mecloudy-logo > div {
  animation: 15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.7s both infinite running back-rotation;
  opacity: 1;
  transition: opacity .35s ease 1.5s;
}

.carousel-item.active .mecloudy-logo {
  opacity: 1;
  transform: scale(1);
}

.carousel-item.active .mecloudy-logo img {
  opacity: 1;
  transform: scale(1);
}

.carousel-item.active .flash-square {
  animation: square-expand .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) both .5s 1;
}

.carousel-item.active .flash-square:before {
  animation: square-bord-x .75s cubic-bezier(0.250, 0.460, 0.450, 0.940) both .80s 1;
}

.carousel-item.active .flash-square:after {
  animation: square-flare-x 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both 1s 1;
}

.carousel-item.active .flash-square svg .st0 {
  animation: outline-x-1 1s cubic-bezier(0.8, 0, .5, 1) forwards 1.2s, bg-x-1-sympol-b .75s cubic-bezier(.9, 0, .33, 1) forwards 1.5s;
}

.carousel-item.active div.desc img.vert-light {
  animation: flare-mecl 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.95s 1;
}

.facility-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.facility-img-wrapper {
  position: relative;
  height: 455px;
  flex-basis: 34%;
  bottom: 0;
  right: 0;
  background: rgb(255 255 255 / 100%);
  border: solid 1px rgb(59 115 184 / 50%);
  opacity: 1;
  z-index: 1;
  overflow: hidden;
}

.facility-img-wrapper > img {
  width: 300px;
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0;
  left: auto;
  top: auto;
  transform: translateX(-25px);
  transform-origin: right;
  opacity: 0;
}

.facility-img-wrapper > img.centered {
  width: 283px;
  height: auto;
  left: 0;
  margin: 0 auto;
}

.facility-img-wrapper > img.side {
  width: 283px;
  height: auto;
}

.tech-effect {
  position: relative;
  width: 350px;
  height: 350px;
  left: 0;
  top: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tech-effect > img {
  position: absolute;
  width: 134%;
  height: auto;
  border-radius: 50%;
  left: -31.5%;
  top: -33.25%;
  bottom: 0;
  margin: 0;
  transform: rotate(0);
  opacity: 0;
  transform-origin: center center;
}

.tech-effect .mecloudy-logo {
  right: 50.2%;
  top: 16.8%;
}

.flash-square {
  position: absolute;
  z-index: 0;
  left: 8.5%;
  top: 2%;
  width: 45px;
  height: 45px;
  background: #3b73b8;
  transform-origin: bottom;
  transform: scaleY(0);
}

.flash-square:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  left: 45px;
  top: 0;
  border-top: solid 1px #3689c9;
  border-right: solid 1px #3689c9;
}

.flash-square:after {
  content: "";
  position: absolute;
  background: url(../../assets/img//blue-lighting.png) no-repeat center center / 100%;
  height: 20px;
  width: 150px;
  left: -20px;
  opacity: 0;
  top: -10px;
}

#staff.content .col.avatar:after {
  content: "";
  position: absolute;
  width: 700px;
  height: 100%;
  left: -119px;
  top: 118px;
  background: url(../../assets/img//pro-img-bg.svg) no-repeat center center / 100%;
  opacity: 1;
  margin: 0 auto;
  border: none;
  z-index: 0;
}

#staff.content .row > div img {
  margin: 0 auto;
  display: block;
  position: relative;
  margin-top: 2rem;
  z-index: 1;
}

.posiflex-logo, .kiosk-logo, .portwell-logo {
  position: relative !important;
  display: block;
  left: 0 !important;
  margin: 0 auto !important;
  width: 200px !important;
  height: auto !important;
}

@media (min-width: 768px) {
  .posiflex-logo, .kiosk-logo, .portwell-logo {
    position: relative !important;
    display: block;
    left: 18% !important;
    margin: 0 !important;
    width: 350px !important;
  }
}

#posiflex .posiflex-logo {
  margin: 0;
}

.seperate#kiosk .kiosk-logo {
  margin-left: 0;
  left: 18%;
}

.posiflex-img-wrapper, .kiosk-img-wrapper, .portwell-img-wrapper, .comp-solutions-img-wrapper {
  position: relative;
  flex-basis: 60%;
}

.comp-solutions-img-wrapper {
  text-align: center;
}

.posiflex-img-wrapper .carousel-inner, .kiosk-img-wrapper .carousel-inner, .portwell-img-wrapper .carousel-inner, .comp-solutions-img-wrapper .carousel-inner {
  border: solid 1px #3b8cca;
  box-shadow: 0px 4px 9px 2px rgba(0, 0, 0, .25);
}

.posiflex-img-wrapper .carousel-control-next, .posiflex-img-wrapper .carousel-control-prev, .kiosk-img-wrapper .carousel-control-next, .kiosk-img-wrapper .carousel-control-prev, .portwell-img-wrapper .carousel-control-next, .portwell-img-wrapper .carousel-control-prev, .comp-solutions-img-wrapper .carousel-control-next, .comp-solutions-img-wrapper .carousel-control-prev {
  top: calc(50% - 22.5px);
  left: auto;
  opacity: 1;
  width: 45px;
  height: 45px;
  border: solid 1px #3b73b8;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  z-index: 3;
  transition: all .3s cubic-bezier(.9, 0, .33, 1);
}

.posiflex-img-wrapper .carousel-control-next:hover, .posiflex-img-wrapper .carousel-control-prev:hover, .kiosk-img-wrapper .carousel-control-next:hover, .kiosk-img-wrapper .carousel-control-prev:hover, .portwell-img-wrapper .carousel-control-prev:hover, .portwell-img-wrapper .carousel-control-next:hover, .comp-solutions-img-wrapper .carousel-control-prev:hover, .comp-solutions-img-wrapper .carousel-control-next:hover {
  background: #3b73b8;
  border: solid 1px #3b73b8;
}

.posiflex-img-wrapper .carousel-control-next span, .posiflex-img-wrapper .carousel-control-prev span, .kiosk-img-wrapper .carousel-control-next span, .kiosk-img-wrapper .carousel-control-prev span, .portwell-img-wrapper .carousel-control-next span, .portwell-img-wrapper .carousel-control-prev span, .comp-solutions-img-wrapper .carousel-control-next span, .comp-solutions-img-wrapper .carousel-control-prev span {
  color: #3b73b8;
  transition: all .3s cubic-bezier(.9, 0, .33, 1);
}

.posiflex-img-wrapper .carousel-control-next:hover span, .posiflex-img-wrapper .carousel-control-prev:hover span, .kiosk-img-wrapper .carousel-control-next:hover span, .kiosk-img-wrapper .carousel-control-prev:hover span, .portwell-img-wrapper .carousel-control-next:hover span, .portwell-img-wrapper .carousel-control-prev:hover span, .comp-solutions-img-wrapper .carousel-control-next:hover span, .comp-solutions-img-wrapper .carousel-control-prev:hover span {
  color: #fff;
}

.comp-solutions-img-wrapper h2 {
  color: #17335b;
  font-weight: bold;
  font-family: 'AntiqueOliTCon';
  font-size: 26px;
}

.comp-solutions-img-wrapper span.comp-solutions {
  font-weight: bold;
  font-size: 23px;
  margin: 1rem auto 2rem;
  display: block;
}

.comp-solutions-img-wrapper .solutions-brands {
  height: 65px;
  display: flex;
  position: relative;
  flex-direction: row;
  background: #002060;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
}

.comp-solutions-img-wrapper .solutions-brands img {
  height: 45px;
}

#footer-clear {
  height: 90vh;
  position: relative;
  display: block;
  background: transparent;
  z-index: -1;
}

footer.mob-footer {
  position: relative;
  height: auto;
  text-align: center;
  z-index: 1;
}

footer {
  background: #000f26 url(../../assets/img//footer-global.png) no-repeat right bottom / 39%;
  padding: 5em 0 0;
  position: fixed;
  z-index: -1;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90vh;
}

footer img {
  position: relative;
  width: 35%;
}

@media (min-width: 576px) {
  footer img {
    position: relative;
    width: 65%;
  }
}

footer p {
  color: #fff;
  font-size: 16px;
  line-height: 1.8em;
  font-weight: normal;
  margin: 12% auto;
  text-align: center;
}

@media (min-width: 576px) {
  footer p {
    color: #fff;
    font-size: 16px;
    line-height: 1.8em;
    font-weight: normal;
    margin: 12% auto;
    text-align: left;
  }
}

footer ul.social {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  width: 100%;
}

footer ul.social li a {
  margin: 0;
}

footer ul.social li {
  flex-basis: 20%;
  margin: 0;
}

footer ul.social li a i {
  color: #fff;
}

footer ul {
  list-style: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 4rem auto;
  padding: 0;
  width: 100%;
  flex-wrap: wrap;
}

@media (min-width: 576px) {
  footer ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
    width: 50%;
  }
}

footer ul li {
  position: relative;
  padding: 0;
  margin: 2% auto;
  height: 100%;
  width: 100%;
  flex-basis: 50%;
}

@media (min-width: 576px) {
  footer ul li {
    position: relative;
    padding: 0;
    margin: 10% auto;
    height: 100%;
    width: 100%;
  }
}

footer ul li a {
  text-decoration: none;
  width: 100%;
  height: 100%;
  position: relative;
  color: #fff;
  text-align: center;
  transition: all ease-in-out .3s;
  text-transform: capitalize;
}

footer ul li a:hover {
  color: #fff;
  text-decoration: none;
}

.keepNTouch {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media (min-width: 992px) {
  .keepNTouch {
    align-items: flex-start;
  }
}

@media (min-width: 1200px) {
  .keepNTouch {
    align-items: center;
  }
}

.keepNTouch h6 {
  color: #fff;
  font-family: 'AntiqueOliTCon';
}

.keepNTouch a {
  color: #fff;
  text-decoration: none;
  margin: 1em auto;
}

@media (min-width: 992px) {
  .keepNTouch a {
    margin: 1em 0;
  }
}

@media (min-width: 1200px) {
  .keepNTouch a {
    color: #fff;
    margin: 1em auto;
  }
}

.subscribe {
  position: relative;
  margin: 1em auto;
}

.keepNTouch .form-inline {
  display: flex;
  flex-direction: row-reverse;
}

.keepNTouch .form-control {
  border-radius: 0;
  height: 40px;
  font-family: 'AntiqueOliTCon';
  font-size: 14px;
  font-weight: 100;
}

.keepNTouch .btn.btn-primary {
  border-radius: 0;
  font-size: 14px;
  font-weight: 100;
  font-family: 'AntiqueOliTCon';
  height: 40px;
  background: #3b73b8;
  transition: all linear .3s;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
  background: #3b73b8 !important;
}

.row.copyrights {
  position: relative;
  text-align: center;
  color: #fff;
}

.row.copyrights span {
  margin: 3em auto 2em;
  position: relative;
  display: block;
  font-size: 14px;
  font-weight: 100;
  font-family: sans-serif;
}

.preloader, .preloader-sub {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100vh;
  background: #3b73b8;
  z-index: 55;
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000) .60s;
  bottom: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.preloader-sub {
  height: 0;
  background: rgb(59 115 184 / 1);
}

.preloader-sub.is-active {
  height: 100vh;
  background: rgb(59 115 184 / 1);
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000) .4s;
}

.preloader:after, .preloader-sub:after {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background: #ffffff;
  top: 0;
  z-index: 12;
  left: 0;
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000) .3s;
}

.preloader:before, .preloader-sub:before {
  content: "";
  position: absolute;
  width: 50%;
  height: 100%;
  background: #ffffff;
  bottom: 0;
  z-index: 12;
  right: 0;
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000) .3s;
}

.preloader-sub:after, .preloader-sub:before {
  height: 0;
}

.preloader-sub.is-active:after, .preloader-sub.is-active:before {
  height: 100%;
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.preloader .logo {
  width: 250px;
  height: 150px;
  background: #fff;
  position: relative;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 56;
  transform: translateY(0);
  transform-origin: bottom;
  opacity: 1;
  transition: all .25s cubic-bezier(0.645, 0.045, 0.355, 1.000) .1s;
}

@media (min-width: 768px) {
  .preloader .logo {
    width: 450px;
    height: 150px;
    background: #fff;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 56;
    transform: translateY(0);
    transform-origin: bottom;
    opacity: 1;
    transition: all .25s cubic-bezier(0.645, 0.045, 0.355, 1.000) .1s;
  }
}

.progress-wrapper {
  position: absolute;
  display: flex;
  width: 5px;
  height: 90vh;
  right: 5vh;
  opacity: 1;
  background: #dbdbdb;
  z-index: 56;
  border-radius: 50%;
  border: solid 1px #d5d5d5;
  overflow: hidden;
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}

.progress-line {
  position: relative;
  width: 100%;
  height: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
  background: #055ada;
  animation: progress-bar 4.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) forwards .5s;
}

.up-down {
  position: relative;
  margin: 0 auto;
  width: 350px;
  color: white;
  text-transform: capitalize;
  font-size: 20px;
  background: linear-gradient(180deg, #3b73b8 0, #3b73b8 100%);
  box-shadow: inset 0 5px 20px black;
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  z-index: 57;
  top: 15%;
  font-family: 'AntiqueOliTCon';
  opacity: 1;
  transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
  transform: scale(.8);
}

@media (min-width: 768px) {
  .up-down {
    position: relative;
    margin: 0 auto;
    width: 350px;
    color: white;
    text-transform: capitalize;
    font-size: 20px;
    background: linear-gradient(180deg, #3b73b8 0, #3b73b8 100%);
    box-shadow: inset 0 5px 20px black;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    z-index: 57;
    top: 15%;
    font-family: 'AntiqueOliTCon';
    opacity: 1;
    transition: all .3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
    transform: scale(1);
  }
}

.up-down span {
  float: left;
  height: 100px;
  line-height: 120px;
  width: 50px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  text-align: center;
}

.covers {
  position: absolute;
  height: 100%;
  width: 100%;
}

.covers span {
  background: #fff;
  animation: up 2s infinite;
  text-align: center;
}

.covers span:nth-child(2) {
  animation-delay: .142857s;
}

.covers span:nth-child(3) {
  animation-delay: .285714s;
}

.covers span:nth-child(4) {
  animation-delay: .428571s;
}

.covers span:nth-child(5) {
  animation-delay: .571428s;
}

.covers span:nth-child(6) {
  animation-delay: .714285s;
}

.covers span:nth-child(7) {
  animation-delay: .857142s;
}

body.loaded .progress-wrapper {
  right: -1vh;
  opacity: 0;
}

body.loaded .up-down {
  top: 45%;
  opacity: 0;
}

body.loaded .preloader {
  height: 0;
}

/* body.loaded .progress-line
{
    height: 100%;
} */

body.loaded .preloader .logo {
  transform: translateY(100px);
  transform-origin: bottom;
  opacity: 0;
}

body.loaded .preloader:before, body.loaded .preloader:after {
  height: 0;
}

/* ** START SVG LOGO STYLING * */

.st0 {
  fill: rgba(59, 115, 184, 0);
  stroke: rgba(59, 115, 184, 1);
  stroke-miterlimit: 10;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: outline-x-1 1.5s cubic-bezier(0.8, 0, .5, 1) forwards, bg-x-1 .75s cubic-bezier(.9, 0, .33, 1) forwards .95s;
}

.x-1 {
  stroke: rgba(59, 115, 184, 1);
  stroke-miterlimit: 10;
  stroke-dasharray: 800;
  stroke-dashoffset: 0;
  fill: rgba(59, 115, 184, 0);
  opacity: 0;
  transform: translateX(-5px);
  position: relative;
  transform-origin: center left;
  animation: move-x .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) running forwards 1s;
}

.y-1 {
  transform: translateY(-5px);
  opacity: 0;
  transform-origin: center top;
  animation: move-y .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 2.85s;
}

.del-1 {
  animation-delay: 1.1s;
}

.del-2 {
  animation-delay: 1.2s;
}

.del-3 {
  animation-delay: 1.3s;
}

.del-4 {
  animation-delay: 1.4s;
}

.del-5 {
  animation-delay: 1.5s;
}

.del-6 {
  animation-delay: 1.6s;
}

.del-7 {
  animation-delay: 1.7s;
}

.del-8 {
  animation-delay: 1.8s;
}

.del-9 {
  animation-delay: 1.9s;
}

.del-10 {
  animation-delay: 2s;
}

.del-11 {
  animation-delay: 2.1s;
}

.del-12 {
  animation-delay: 2.2s;
}

.del-13 {
  animation-delay: 2.3s;
}

.del-14 {
  fill: rgba(59, 115, 184, 0);
  stroke: rgba(59, 115, 184, 1);
  stroke-miterlimit: 10;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: outline-x-1 1.5s cubic-bezier(.9, 0, .33, 1) forwards 2.4s, bg-x-1 .55s cubic-bezier(.9, 0, .33, 1) forwards 2.6s;
}

/* *Start Logo fired anim * */

.logo .st1, .st1 {
  fill: #17335B;
  stroke: #17335B;
  stroke-miterlimit: 10;
}

.logo .st2, .st2 {
  fill: #17335B;
}

.logo.fired .st0 {
  animation: outline-x-1-b 1.5s cubic-bezier(0.8, 0, .5, 1) forwards, bg-x-1-b .75s cubic-bezier(.9, 0, .33, 1) forwards .95s;
}

.logo.fired .x-1 {
  animation: move-x-b .5s cubic-bezier(0.250, 0.460, 0.450, 0.940) forwards 1.5s;
}

.logo.fired .y-1 {
  animation: move-y-b .5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 3.25s;
}

.logo.fired .del-1 {
  animation-delay: 1.1s;
}

.logo.fired .del-2 {
  animation-delay: 1.2s;
}

.logo.fired .del-3 {
  animation-delay: 1.3s;
}

.logo.fired .del-4 {
  animation-delay: 1.4s;
}

.logo.fired .del-5 {
  animation-delay: 1.5s;
}

.logo.fired .del-6 {
  animation-delay: 1.6s;
}

.logo.fired .del-7 {
  animation-delay: 1.7s;
}

.logo.fired .del-8 {
  animation-delay: 1.8s;
}

.logo.fired .del-9 {
  animation-delay: 1.9s;
}

.logo.fired .del-10 {
  animation-delay: 2s;
}

.logo.fired .del-11 {
  animation-delay: 2.1s;
}

.logo.fired .del-12 {
  animation-delay: 2.2s;
}

.logo.fired .del-13 {
  animation-delay: 2.3s;
}

.logo.fired .del-14 {
  fill: rgba(59, 115, 184, 0);
  stroke: rgba(59, 115, 184, 1);
  stroke-miterlimit: 10;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: outline-x-1-b 1.5s cubic-bezier(.9, 0, .33, 1) forwards 2.4s, bg-x-1-b .55s cubic-bezier(.9, 0, .33, 1) forwards 2.6s;
  animation-play-state: running;
}

.logo.fired .del-15 {
  animation-delay: 2.5s;
  animation-play-state: running;
}

.logo.fired .del-16 {
  animation-delay: 2.6s;
}

.logo.fired .del-17 {
  animation-delay: 2.7s;
}

.logo.fired .st1 {
  fill: #17335B;
  stroke: #17335B;
  stroke-miterlimit: 10;
}

.logo.fired .st2 {
  fill: #17335B;
}

@keyframes outline-x-1-b {
  from {
    stroke-dashoffset: 800;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes outline-x-1 {
  from {
    stroke-dashoffset: 800;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes bg-x-1-b {
  from {
    fill: rgba(59, 115, 184, 0);
  }
  to {
    fill: rgba(59, 115, 184, 1);
  }
}

@keyframes move-x-b {
  from {
    transform: translateX(-5px);
    opacity: 0;
    transform-origin: center left;
  }
  to {
    transform: translateX(0);
    opacity: 1;
    transform-origin: center left;
  }
}

@keyframes move-y-b {
  from {
    transform: translateY(-5px);
    opacity: 0;
    transform-origin: center top;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    transform-origin: center top;
  }
}

.flash-square .bus3s-sympol {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.flash-square .bus3s-sympol svg {
  width: 75%;
}

.flash-square .bus3s-sympol svg .st0 {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(255, 255, 255, 1);
  stroke-miterlimit: 10;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: none;
}

/* *End Logo fired anim * */

.del-15 {
  animation-delay: 2.5s;
}

.del-16 {
  animation-delay: 2.6s;
}

.del-17 {
  animation-delay: 2.7s;
}

@keyframes bg-x-1 {
  from {
    fill: rgba(59, 115, 184, 0);
  }
  to {
    fill: rgba(59, 115, 184, 1);
  }
}

@keyframes move-x {
  from {
    transform: translateX(-5px);
    opacity: 0;
    transform-origin: center left;
  }
  to {
    transform: translateX(0);
    opacity: 1;
    transform-origin: center left;
  }
}

@keyframes move-y {
  from {
    transform: translateY(-5px);
    opacity: 0;
    transform-origin: center top;
  }
  to {
    transform: translateY(0);
    opacity: 1;
    transform-origin: center top;
  }
}

@keyframes progress-bar {
  0 {
    height: 0;
  }
  25% {
    height: 20%;
  }
  50% {
    height: 45%;
  }
  60% {
    height: 50%;
  }
  75% {
    height: 65%;
  }
  85% {
    height: 75%;
  }
  90% {
    height: 90%;
  }
  100% {
    height: 100%;
  }
}

/* ** END SVG LOGO STYLING * */

@keyframes up {
  0% {
    margin-bottom: 0;
  }
  16% {
    margin-bottom: 100%;
    height: 20px;
  }
  50% {
    margin-bottom: 0;
  }
  100% {
    margin-bottom: 0;
  }
}

@keyframes cell {
  0% {
    transform: translate(0, 0) scale(1);
  }
  20% {
    transform: translate(50px, -50px) scale(1.05);
  }
  40% {
    transform: translate(100px, -50px) scale(.9);
  }
  60% {
    transform: translate(150px, 0) scale(1);
  }
  80% {
    transform: translate(100px, 50px) scale(1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes mask-4 {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes mask-3 {
  0% {
    border: solid 5px rgba(255, 255, 255, 0);
  }
  33.3% {
    border: solid 5px rgba(255, 255, 255, 0);
  }
  66.6% {
    border: solid 5px rgba(255, 255, 255, 0);
  }
  100% {
    border: solid 5px rgba(255, 255, 255, 1);
  }
}

@keyframes mask-2 {
  0% {
    opacity: 0;
    transform: translateX(-10px);
    transform-origin: left;
  }
  33.3% {
    opacity: 0;
    transform: translateX(-10px);
    transform-origin: left;
  }
  66.6% {
    opacity: 1;
    transform: translateX(-5px);
    transform-origin: left;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    transform-origin: left;
  }
}

@keyframes mask-2-b {
  0% {
    opacity: 0;
    transform: translateX(25px);
  }
  33.3% {
    opacity: 0;
    transform: translateX(25px);
  }
  66.6% {
    opacity: 1;
    transform: translateX(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mask-2-b-co {
  0% {
    opacity: 0;
    transform: skew(20deg, 0deg) translateX(-25px);
  }
  100% {
    opacity: 1;
    transform: skew(20deg, 0deg) translateX(0);
  }
}

@keyframes mask-2-c-co {
  0% {
    opacity: 0;
    transform: skew(20deg, 0deg) translateX(-25px);
  }
  100% {
    opacity: 1;
    transform: skew(20deg, 0deg) translateX(0);
  }
}

@keyframes mask-0 {
  0% {
    transform: scaleX(0);
    opacity: 0;
    transform-origin: bottom left;
  }
  33.3% {
    transform-origin: bottom left;
    transform: scaleX(1);
    opacity: 1;
  }
  66.6% {
    transform: scaleX(1);
    opacity: 1;
    transform-origin: bottom right;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
    transform-origin: bottom right;
  }
}

@keyframes mask-1 {
  0% {
    transform: scaleX(0);
    opacity: 0;
    transform-origin: bottom left;
  }
  33.3% {
    transform-origin: bottom left;
    transform: scaleX(1);
    opacity: 1;
  }
  66.6% {
    transform: scaleX(1);
    opacity: 1;
    transform-origin: bottom right;
  }
  100% {
    transform: scaleX(0);
    opacity: 1;
    transform-origin: bottom right;
  }
}

@keyframes FadeInUp {
  0% {
    transform: translateY(15px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes ceo-txt {
  0% {
    transform: translateY(75px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes ceo-txt-2 {
  0% {
    transform: translateY(75px);
    opacity: 0;
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
  }
}

@keyframes animHomeHeaderLine {
  0% {
    top: -15rem;
  }
  50% {
    top: 0rem;
  }
  100% {
    top: 15rem;
  }
}

@keyframes HorizonLine {
  0% {
    left: -15rem;
  }
  50% {
    left: 0rem;
  }
  100% {
    left: 15rem;
  }
}

@keyframes flare {
  0% {
    opacity: 0;
    transform: translateY(170%) scale(0);
    transform-origin: bottom;
  }
  33.3% {
    opacity: 0;
    transform: translateY(120%) scale(.25);
    transform-origin: bottom;
  }
  66.6% {
    opacity: 1;
    transform: translateY(120%) scale(.35);
    transform-origin: bottom;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: bottom;
  }
}

@keyframes flare-b {
  0% {
    opacity: 0;
    transform: translateY(170%) scale(0);
    transform-origin: bottom;
  }
  33.3% {
    opacity: 0;
    transform: translateY(120%) scale(.25);
    transform-origin: bottom;
  }
  66.6% {
    opacity: 1;
    transform: translateY(120%) scale(.35);
    transform-origin: bottom;
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: bottom;
  }
}

@keyframes flare-mecl {
  0% {
    opacity: 0;
    transform: rotate(90deg) translateX(15%) scaleX(1);
  }
  33.3% {
    opacity: 1;
    transform: rotate(90deg) translateX(100%) scaleX(1);
  }
  66.6% {
    opacity: 1;
    transform: rotate(90deg) translateX(175%) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: rotate(90deg) translateX(190%) scaleX(1);
  }
}

@keyframes expand {
  0% {
    width: 0;
    height: 0;
    border: solid 1px rgba(255, 255, 255, 0);
    background: rgba(255, 255, 255, 0);
  }
  50% {
    width: 100%;
    height: 100%;
    border: solid 1px rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .15);
  }
  100% {
    width: 250%;
    height: 250%;
    border: solid 1px rgba(255, 255, 255, 0);
    background: rgba(255, 255, 255, 0);
  }
}

@keyframes son-eff {
  0% {
    border: solid 1px rgba(255, 255, 255, 0);
    background: rgba(255, 255, 255, 0);
    transform: scale(0);
  }
  50% {
    border: solid 1px rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .15);
    transform: scale(1);
  }
  100% {
    transform: scale(1.75);
    border: solid 1px rgba(255, 255, 255, 0);
    background: rgba(255, 255, 255, 0);
  }
}

@keyframes from-top {
  0 {
    height: 0;
    box-shadow: 0 0 10px rgb(54 137 201 / 54%);
  }
  100% {
    height: 100%;
    box-shadow: 0 0 30px rgb(54 137 201 / 85%);
  }
}

@keyframes from-top-b {
  0 {
    height: 0;
    box-shadow: 0 0 10px rgb(54 137 201 / 54%);
  }
  100% {
    height: 100%;
    box-shadow: 0 0 30px rgb(54 137 201 / 85%);
  }
}

@keyframes from-left {
  0 {
    transform: skew(0deg, 0deg) scaleX(0);
  }
  100% {
    transform: skew(-20deg, 0deg) scaleX(1);
  }
}

@keyframes from-left-b {
  0 {
    transform: skew(0deg, 0deg) scaleX(0);
  }
  100% {
    transform: skew(-20deg, 0deg) scaleX(1);
  }
}

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

@keyframes back-rotation {
  0 {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes shrink-x {
  0 {
    transform: scaleX(0);
    transform-origin: right;
  }
  30% {
    transform: scaleX(1);
    transform-origin: right;
  }
  65% {
    transform: scaleX(1);
    transform-origin: left;
  }
  100% {
    transform: scaleX(0);
    transform-origin: left;
  }
}

@keyframes square-expand {
  0 {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes square-bord-x {
  0 {
    height: 0;
    width: 0;
  }
  50% {
    height: 0;
    width: 557px;
  }
  100% {
    height: 44px;
    width: 557px;
  }
}

@keyframes square-flare-x {
  0 {
    opacity: 0;
    left: -20px;
  }
  50% {
    opacity: 1;
    left: 0;
  }
  100% {
    opacity: 0;
    left: 548px;
  }
}

@keyframes lighting {
  0 {
    transform: scaleX(0) translateX(-75%);
    opacity: 0;
    transform-origin: left;
  }
  50% {
    transform: scaleX(1) translateX(0);
    opacity: 1;
    transform-origin: left;
  }
  100% {
    transform: scaleX(0) translateX(100%);
    opacity: 0;
    transform-origin: right;
  }
}

@keyframes lighting-b {
  0 {
    transform: scaleX(0) translateX(-75%);
    opacity: 0;
    transform-origin: left;
  }
  50% {
    transform: scaleX(1) translateX(0);
    opacity: 1;
    transform-origin: left;
  }
  100% {
    transform: scaleX(0) translateX(100%);
    opacity: 0;
    transform-origin: right;
  }
}

@keyframes lighting-min {
  0 {
    transform: scale(.5) translateX(-100%);
  }
  100% {
    transform: scale(.5) translateX(500%);
  }
}

@keyframes Down {
  from {
    transform: translateY(-4px);
  }
  to {
    transform: translateY(4px);
  }
}

@keyframes bg-x-1-sympol {
  from {
    fill: rgba(255, 255, 255, 0);
  }
  to {
    fill: rgba(255, 255, 255, .45);
  }
}

@keyframes bg-x-1-sympol-b {
  from {
    fill: rgba(255, 255, 255, 0);
  }
  to {
    fill: rgba(255, 255, 255, 1);
  }
}

@keyframes outline-x-1-sympol {
  from {
    stroke-dashoffset: 460;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* * START TEXT GLITCH EFFECT * */

.glitch {
  font-size: 8rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
        0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
}

.glitch span {
  position: absolute;
  top: 0;
  left: 0;
}

.glitch span:first-child {
  clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  transform: translate(-0.025em, -0.0125em);
  opacity: 0.8;
}

.glitch span:last-child {
  clip-path: polygon(0 80%, 100% 20%, 100% 100%, 0 100%);
  transform: translate(0.0125em, 0.025em);
  opacity: 0.8;
}

/* https://web.dev/prefers-reduced-motion/#(bonus)-forcing-reduced-motion-on-all-websites */

@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                                                            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                                                            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                                                            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                                                            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                                                            0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                                                            0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
                                                            -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

@keyframes glitch-b {
  0% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                                                            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 rgba(255, 0, 0, 0.75),
                                                            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                                                            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
                                                            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                                                            0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
                                                            0.05em 0 0 rgba(0, 255, 0, 0.75), 0 -0.05em 0 rgba(0, 0, 255, 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 rgba(255, 0, 0, 0.75),
                                                            -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
                                                            -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
  }
}

/* * END TEXT GLITCH EFFECT * */

/* * flteration * */

/* Controls
---------------------------------------------------------------------- */

.controls {
  padding: 2rem 1rem 3rem;
  font-size: 0.1px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

@media (min-width: 576px) {
  .controls {
    padding: 2rem 1rem 3rem;
    font-size: 0.1px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
}

.control {
  position: relative;
  display: inline-block;
  width: auto;
  height: 50px;
  background: rgb(255 255 255 / 100%);
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
  font-family: 'raleway';
  color: #777;
  border: solid 1px rgb(219 219 219 / 50%);
  border-radius: 1px;
  text-transform: capitalize;
  transition: all ease-in-out .25s;
  flex-grow: 1;
}

@media (min-width: 576px) {
  .control {
    position: relative;
    display: inline-block;
    width: auto;
    height: 50px;
    background: rgb(255 255 255 / 100%);
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    font-family: 'raleway';
    color: #777;
    border: solid 1px rgb(219 219 219 / 50%);
    border-radius: 1px;
    text-transform: capitalize;
    transition: all ease-in-out .25s;
    flex-grow: unset;
  }
}

.control:hover {
  background: #3873b8;
  color: #fff;
}

.mixitup-control-active {
  background: #3873b8;
  box-shadow: none;
  color: #fff;
}

.control[data-filter] + .control[data-sort] {
  margin-left: .75rem;
}

.btn.focus, .btn:focus {
  box-shadow: none;
}

/* Target Elements
---------------------------------------------------------------------- */

.mix, .gap {
  display: inline-block;
  vertical-align: top;
}

.mix {
  background: #fff;
  border-top: .5rem solid currentColor;
  border-radius: 2px;
  margin-bottom: 0;
  position: relative;
}

.btn-primary.focus, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show > .btn-primary.dropdown-toggle:focus {
  border: none;
  box-shadow: none !important;
  outline: none;
}

/* Grid Breakpoints
---------------------------------------------------------------------- */

/* 2 Columns */

.mix, .gap {
  width: calc(100%/2 - (((2 - 1) * 1rem) / 2));
}

/* 3 Columns */

@media screen and (min-width: 541px) {
  .mix, .gap {
    width: calc(100%/3 - (((3 - 1) * 1rem) / 3));
  }
}

/* 4 Columns */

@media screen and (min-width: 961px) {
  .mix, .gap {
    width: calc(100%/4 - (((4 - 1) * 1rem) / 4));
  }
}

/* 5 Columns */

@media screen and (min-width: 1281px) {
  .mix, .gap {
    width: calc(100%/5 - (((5 - 1) * 1rem) / 5));
  }
}

/* * start media query * */

/* * end media query * */