#sticky-footer .row .col p {
  min-width: 185px;
}

.darkened-image {
  filter: brightness(50%);
}

.gray-img {
  filter: grayscale(1);
}

/* 
  {
    border:  solid 0.5px;
  } 
*/

.text-footer-bold {
  font-family: "Rawson";
  font-style: normal;
  font-weight: 600;
  font-size: 25px;
  line-height: 30px;
  color: #191649;
}

.text-footer-light {
  font-family: "RawsonLight";
  font-style: normal;
  /* font-weight: 100; */
  font-size: 20px;
  line-height: 26px;
}
.text-footer-light a {
  color: #000;
}
.text-footer-light a:hover {
  color: rgb(40, 0, 115);
  font-weight: 500;
}

/* @import url("https://fonts.googleapis.com/css2?family=Merriweather&display=swap"); */

@font-face {
  font-family: "Rawson";
  font-style: normal;
  font-weight: normal;
  src: url("/font/RawsonAltRegular.woff") format("woff");
}
@font-face {
  font-family: "RawsonBold";
  src: url("/font/RawsonExtraBold.woff") format("woff");
}
@font-face {
  font-family: "RawsonAltRegular";
  font-style: normal;
  font-weight: normal;
  src: url("/font/RawsonAltRegular.woff") format("woff");
}

@font-face {
  font-family: "RawsonLight";
  font-style: normal;
  font-weight: normal;
  src: url("/font/RawsonLight.woff") format("woff");
}


/* définition des étapes */
@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  6.67% {
    opacity: 1;
  }
  20% {
    opacity: 1;
  }
  26.67% {
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}



#diaporama > div {
    opacity: .50; /* Initialiser l'opacité à 0 */
    visibility: hidden; /* Cacher l'élément */
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out; /* Ajouter la transition pour opacity et visibility */
}

#diaporama > div.active {
    opacity: 1; /* Changer l'opacité à 1 pour afficher l'élément */
    visibility: visible; /* Rendre l'élément visible */
    animation: fade-in-out 30s ease infinite 0s;
}






.slider-img {
  max-height: 379.16px !important;
}
#diapo > * + * {    /* tous les enfants directs sauf le 1st */
  display: none !important;
  transition: opacity 1s;
}

#diapo img {
  animation: fade-in-out 40s ease infinite 0s;
  opacity: 1;
}


/* @keyframes fadeinout {
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
  }
} */

/* ------------------ */

#diapo2 > * + * {    /* tous les enfants directs sauf le 1st */
  display: none !important;
  opacity: 0; /* Par défaut, les diapositives sont transparentes */
  transition: opacity 1s ease; /* Ajoute une transition d'opacité en douceur */
}

#diapo2 div {
  animation: fade-in-out 35s ease infinite 0s;
  opacity: 1; /* La première diapositive est visible dès le départ */
}

/* ------------------ */



.rawsonLight {
  font-family: RawsonLight !important;
}

body {
  /* background-color: #3a5988; */
  color: #fff;
}

.bg-orange {
  background-color: #fe8f3c;
}

.bg-orange:hover {
  background-color: #a3571d;
}

.bg-blue {
  background-color: #00acdd;
}

.bg-blue:hover {
  background-color: #03607a;
}

/*    #form .shadom-text {
        text-shadow: 1px 1px 2px rgb(27 27 27);
    } */

.iconStyle {
  height: 177px;
  width: 156px;
}

.iconStyle:hover > a {
  color: rgba(172, 168, 168, 0.937);
}
.font-87 {
 font-size: 70px;
}

.iconStyle:hover {
  border: solid 0.5px #fff;
  background-color: #0000006f;
}

.service-name {
  font-size: 14pt;
  text-align: center;
  font-family: RawsonLight;
  line-height: 1.2rem !important;
}

.service-icon {
  width: 74px;
  height: auto;
}

.trunca-text-height {
  overflow: hidden;
  line-height: 1rem;
  max-height: 2.3rem;
  min-height: 2rem;
  -webkit-box-orient: vertical;
  display: block;
  display: -webkit-box;
  overflow: hidden !important;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
}

.modal a {
  color: rgb(0, 0, 0);
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  color: rgb(172, 168, 168);
  text-decoration: none;
}

.font-oo1,
body {
  font-family: "RawsonLight", serif;
}

ul {
  list-style-type: none;
  overflow: hidden;
}

li {
  float: right;
}

li a {
  color: #000;
  display: block;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-size: 14px;
}

li a:hover {
  text-decoration: underline;
}

.grid {
  height: 23px;
  position: relative;
  bottom: 4px;
}

.signbutton {
  background-color: #4885ed;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  padding: 7px 10px;
  position: relative;
  bottom: 7px;
  font-weight: bold;
}

.signbutton:hover {
  background-color: rgb(68, 68, 68);
}

.logo {
  margin-top: 50px;
  margin-bottom: 20px;
}

.bar {
  margin: 0 auto;
  border-radius: 30px;
  border: 1px solid #dcdcdc;
  /* background-color: #fff; */
  color: #000;
  background: rgba(255, 255, 255, 0.37);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.7px);
  -webkit-backdrop-filter: blur(4.7px);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.bar:hover {
  box-shadow: 1px 1px 8px 1px #dcdcdc;
}

.bar:focus-within {
  box-shadow: 1px 1px 8px 1px #dcdcdc;
  outline: none;
}

.searchbar {
  height: 45px;
  border: none;
  font-size: 16px;
  outline: none;
  border-radius: 30px 0px 0px 30px;
  padding-left: 20px;
  margin-left: auto;
  margin-right: auto;
}

.voice {
  height: 20px;
  position: relative;
  top: 5px;
  left: 10px;
}

[role="button"],
.pointer {
  transition: all 0.3s cubic-bezier(0, 0.01, 0.27, 1);
  cursor: pointer;
}

.buttons {
  margin-top: 30px;
}

.button {
  background-color: #f5f5f5;
  border: none;
  /* color: #707070; */
  font-size: 15px;
  padding: 10px 20px;
  margin: 5px;
  border-radius: 4px;
  outline: none;
}

.button:hover {
  border: 1px solid #c8c8c8;
  padding: 9px 19px;
  /* color: #808080; */
}

.button:focus {
  border: 1px solid #4885ed;
  padding: 9px 19px;
}

.sizeStyle {
  font-size: 18px;
}

.promo-ize {
  width: 45px;
  height: 45px;
  position: absolute;
  top: -10px;
}

/* sm general*/
@media only screen and (min-width: 300px) and (max-width: 600px) {
  .sizeStyle {
    font-size: 15px;
  }

  .logo {
    margin-top: 20px;
  }
  .font-87 {
    font-size: 40px;
  }
   .navbar {
    zoom: 60%;
  }
}

.modal-dialog-centered {
  display: -webkit-box !important;
  /*  display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; */
  min-height: calc(100% - (0.5rem * 2)) !important;
}

/* ##############"" */
/* Base styling*/

/* Popover styling */

/*   .popover__title {
        font-size: 24px;
        line-height: 36px;
        text-decoration: none;
        text-align: center;
        padding: 15px 0;
    } */

.popover__wrapper_Plesk {
  position: relative;
  display: inline-block;
}

.popover__content {
  /* opacity:1; */
  visibility: hidden;
  position: absolute;
  left: -4px;
  transform: translate(10rem, -12rem);
  padding: 1rem;
  /* box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); */
  width: 44rem;
  min-height: 20rem;
}

.popover__content:before {
  position: absolute;
  z-index: -1;
  content: "";
  right: calc(50% - 10px);
  top: -8px;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #ffffff transparent;
  transition-duration: 0.3s;
  transition-property: transform;
}

.popover__wrapper_Plesk:hover .popover__content {
  z-index: 10;
  /* opacity: 1; */
  visibility: visible;
  transform: translate(11rem, -25rem);
  /* translate(0, -30px); */
  transition: all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
  /* text-shadow: 0 0 black; */
}

.popover__content a {
  color: rgb(0, 0, 0);
  text-decoration: none;
  /* text-shadow: 0 0 black; */
}

.popover__content a:hover {
  color: rgb(117, 117, 117);
  text-decoration: none;
}

/* ***************************** */
.image {
  /* https://cdn.pixabay.com/photo/2020/05/28/15/56/digitization-5231610_960_720.jpg */
  background: url("../images/netconneion.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 80%;
 /*  -moz-box-shadow: inset -5000px 500px 850px 0px rgb(0 0 0 / 57%);
  -webkit-box-shadow: inset -5000px 500px 850px 0px rgb(0 0 0 / 57%);
  -o-box-shadow: inset -5000px 500px 850px 0px rgb(0 0 0 / 57%);  */
  box-shadow: inset -5000px 500px 850px 0px rgba(0, 0, 0, 0.275);
}

.image:before,
.image:after {
  content: "";
  left: 5%;
  opacity: 0.3;
}

.image:before {
  top: 0;
  -moz-box-shadow: inset 0px 850px 500px -500px #000;
  -webkit-box-shadow: inset 0px 850px 500px -500px #000;
  -o-box-shadow: inset 0px 850px 500px -500px #000;
  box-shadow: inset 0px 850px 500px -500px #000;
}

.image:after {
  top: 100%;
  background: #000;
}

.btn-voir {
  background: linear-gradient(to bottom, #4a92b7 0%, #006699 100%);
  color: #fff;
  border: unset !important;
}

.btn-voir:hover {
  background: linear-gradient(to bottom, #58acd6 0%, #10a5f0 100%);
  color: #000;
  border: unset !important;
}

.modal-header {
  background: linear-gradient(to bottom, #4a92b7 0%, #006699 100%);
  color: #fff;
}

.btn-org {
  background: linear-gradient(to bottom, #e2992a 0%, #e2992a 100%);
  color: #fff;
  border: unset !important;
}
.btn-org:hover {
  background: linear-gradient(to bottom, #bd9861 0%, #a06d20 100%);
}

label.btn:hover {
  background: linear-gradient(to bottom, #e2992a 0%, #e2992a 100%) !important;
}

.modal-content {
  height: auto;
}

.effet-glass {
  background: rgba(255, 255, 255, 0.37);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4.7px);
  -webkit-backdrop-filter: blur(4.7px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

::placeholder {
  color: rgb(0, 0, 0);
}

.tab-flow {
  position: sticky; top: 200px;
  z-index: 1;
 }

.top {
  --offset: 50px; 
  position: sticky;
  bottom: 20px;      
  margin-right:10px; 
  place-self: end;
  margin-top: calc(100vh + var(--offset));
  opacity: 0.6;
  /* visual styling */
  text-decoration: none;
  padding: 7px 20px 14px 20px;
  font-family: sans-serif;
  color: #fff;
  background: #000;
  border-radius: 100px;
  white-space: nowrap;
}

.float-position {
  float: left;
  left: 15px;
  z-index: 9999;
}

@media (min-width: 768px)
{
#back-to-top {
    display: block;
}}

@media only screen and (max-width: 920px) {
  .modal-content {
    height: 65vh;
  }
  /*  .head-text
 .head-paragrap {
    font-size: ;
 } */
}

@media only screen and (max-width: 820px) {
  .modal-content {
    height: 65vh;
  }
  /* .head-text {
    font-size: ;
 } */
}

@media only screen and (max-width: 768px) {
  .modal-content {
    height: 85vh;
  }
  /*  .head-text  {
    font-size: ;
 } */
 .tab-flow {
  position: initial !important; top: 0px !important;
 }

}

@media only screen and (min-width: 460px) and (max-width: 600px) {
  .modal-content {
    height: 90vh;
  }
  .head-text {
    font-size: 45px !important;
  }
   .tab-flow {
  position: initial !important; top: 0px !important;
 }
  /*  .head-paragrap {
  font-size: 25px !important;
 } */
}

@media only screen and (min-width: 200px) and (max-width: 460px) {
  .modal-content {
    height: 120vh;
  }
  .head-text {
    font-size: 45px !important;
    margin-top: 3rem;
  }
  #apropos .head-text {
    font-size: 45px !important;
    margin-top: 10rem;
  }
  .size-sm {
    font-size: 10px;
  }
  /* #trophee .navbar, */
  #partenaire .navbar,
  #accreditation .navbar,
  #apropos .navbar {
    margin-left: 1.2rem !important;
  }

   .tab-flow {
  position: initial !important; top: 0px !important;
 }
}

/* ******* */

/* card:hover */
/*  .card-effet:hover {
        background-image: linear-gradient(270deg,rgba(0, 0, 0, 0.26),rgba(0, 0, 0, 0.26)) !important;
    } */

.card:hover .details {
  opacity: 0.95;
}
.card .details {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%; /*100%*/
  height: 100%;
  /* background: #ffc107; */
  transition: 0.5s;
  transform-origin: left;
  transform: perspective(2000px) rotateY(-90deg);
}
.card:hover .details {
  transform: perspective(2000px) rotateY(0deg);
}
.card .details .center {
  padding: 21px 13px 16px 10px;
  text-align: center;
  background: #fff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.card .details .center p {
  margin: 0px 0;
  padding: 0;
  color: #262626;
}

/* ######## bg-apropos ######### */
.bg-apropos {
  background: linear-gradient(
      82.07deg,
      #191649 8.64%,
      rgba(25, 22, 73, 0.9) 36.76%,
      rgba(25, 22, 73, 0.7) 60.69%,
      rgba(25, 22, 73, 0) 84.04%
    ),
    url(/homeImages/bd-tigre-it-mun.png);
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}
/* ######## bg-hebergement ######### */
.bg-hebergement {
  background: linear-gradient(
      82.07deg,
      #191649 8.64%,
      rgba(25, 22, 73, 0.9) 36.76%,
      rgba(25, 22, 73, 0.7) 60.69%,
      rgba(25, 22, 73, 0) 84.04%
    ),
    url(/homeImages/heb-background.svg);
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}
.truncate-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 1;
}
.truncate-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}
.truncate-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

.truncate-4 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 4;
}

.truncate-5 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 5;
}

*::-webkit-scrollbar-thumb {
  background-image: linear-gradient(180deg, #ffbbe0 0%, #edf1fa 99%);
  box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
  border-radius: 100px;
  outline: 1px solid slategrey;
}
*::-webkit-scrollbar {
  width: 0.5em;
}

*::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

#dropdownMenuButton:hover > .dropdown-menu {
  display: block;
}

.dropdown-item:focus,
.dropdown-item:hover {
  background-color: #dae0e5 !important;
}

/* #dropdownMenuButton:hover> .dropdown-menu {
    display: block !important;
    margin-top: 0; /* remove the gap so it doesn't close */


.paragraph-style {
  font-style: normal; font-weight: 300; font-size: 25px; line-height: 35px; text-align: justify;
}

.paragraph-flow{
  height: 45rem; overflow-y: auto;
}
.tab-flow{
  height: 30rem; overflow-y: auto;
}

/* .paragraph-flow *[id]:before { 
  display: block; 
  content: " "; 
  margin-top: 75px; 
  height: 10px; 
  visibility: hidden; 
} */







/* unvisited link grey */
.navbar a:link {
	color: #777;
}
/* visited link grey */
.navbar a:visited {
	color: #777;
}
/* mouse over link blue */
.navbar a:hover {
	color: #0CF;
}
/* selected link blue */
.navbar a:active {
	color: #0CF;
}
/* !IMPORTANT ONLY ADD THIS CLASS TO YOUR ACTIVE PAGE LINK ( Color Blue )*/
.activePage a {
	color: #0CF !important
}

.text-footer-bold {
  font-size: 18px;
}

.text-footer-light {
  font-size: 15px;
}


/* #### ANIMATION */

.glow-on-hover:before {
    content: '';
    background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
    position: absolute;
    top: -2px;
    left:-2px;
    background-size: 400%;
    z-index: -1;
    filter: blur(5px);
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    animation: glowing 20s linear infinite;
    opacity: 0;
    transition: opacity .3s ease-in-out;
    border-radius: 10px;
}


.glow-on-hover:hover:before {
    opacity: 1;
}

.glow-on-hover:after {
    z-index: -1;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 10px;
}

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}


/* ------------------- */
/* @import url("https://fonts.googleapis.com/css?family=Lato:700");
* {
  box-sizing: border-box;
} */
/* body {
  font-family: 'Lato', sans-serif;
  background: #111;
  min-height: 100vh;
  overflow-x: hidden;
} */
/* .page {
  height: 100vh;
  width: 100vw;
  scroll-snap-align: center;
  font-size: calc(var(--font-size) * 1px);
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.container {
  height: 100vh;
  overflow: auto;
  overflow-x: hidden;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
} */


.page .char {
  display: inline-block;
  -webkit-animation-delay: calc(0.25s + var(--char-index) * 0.1s);
          animation-delay: calc(0.25s + var(--char-index) * 0.1s);
  transition: all 0.25s calc(0.25s + var(--char-index) * 0.1s);
}
.text--enter [data-scroll='out'] .char {
  opacity: 0;
  transform: translate(0, -150%);
}
.text--enter .char {
  opacity: 1;
  transform: translate(0, 0);
}
.text--random [data-scroll='out'] .char:nth-of-type(1) {
  transform: translateX(-39%) translateY(128%);
}
.text--random [data-scroll='out'] .char:nth-of-type(2) {
  transform: translateX(198%) translateY(160%);
}
.text--random [data-scroll='out'] .char:nth-of-type(3) {
  transform: translateX(66%) translateY(-79%);
}
.text--random [data-scroll='out'] .char:nth-of-type(4) {
  transform: translateX(134%) translateY(-155%);
}
.text--random [data-scroll='out'] .char:nth-of-type(5) {
  transform: translateX(30%) translateY(-39%);
}
.text--random [data-scroll='out'] .char:nth-of-type(6) {
  transform: translateX(-219%) translateY(-241%);
}
.text--swapsies [data-scroll='in'] .char:nth-of-type(odd),
.text--swapsies [data-scroll='out'] .char:nth-of-type(odd) {
  transform: translateX(100%);
}
.text--swapsies [data-scroll='in'] .char:nth-of-type(even),
.text--swapsies [data-scroll='out'] .char:nth-of-type(even) {
  transform: translateX(-100%);
}
.text--swapsies [data-scroll='in'] .char {
  -webkit-animation-duration: 0.5s;
          animation-duration: 0.5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.text--swapsies [data-scroll='in'] .char:nth-of-type(odd) {
  -webkit-animation-name: swap-left;
          animation-name: swap-left;
}
.text--swapsies [data-scroll='in'] .char:nth-of-type(even) {
  -webkit-animation-name: swap-right;
          animation-name: swap-right;
}
@-webkit-keyframes swap-right {
  25% {
    transform: translateX(-100%) translateY(-100%);
  }
  75% {
    transform: translateX(0) translateY(-100%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes swap-right {
  25% {
    transform: translateX(-100%) translateY(-100%);
  }
  75% {
    transform: translateX(0) translateY(-100%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@-webkit-keyframes swap-left {
  25% {
    transform: translateX(100%) translateY(100%);
  }
  75% {
    transform: translateX(0) translateY(100%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
@keyframes swap-left {
  25% {
    transform: translateX(100%) translateY(100%);
  }
  75% {
    transform: translateX(0) translateY(100%);
  }
  100% {
    transform: translateX(0) translateY(0);
  }
}
.text--fading [data-scroll='out'] .char {
  opacity: 0;
}
.text--flipping [data-scroll='out'] .char {
  transform: rotateY(180deg);
}
.text--slide .char {
  transition-delay: calc((var(--char-total) - var(--char-index)) * 0.1s);
}
.text--slide [data-scroll='out'] .char {
  opacity: 0;
  transform: translate(-300%, 0) skewX(20deg);
}
.text--karaoke .char {
  color: rgba(255,255,255,0.15);
  transition-duration: 0.1s;
}
.text--karaoke .char:after {
  color: #fff;
  visibility: visible;
}
.text--karaoke [data-scroll='in'] .char:after {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.text--karaoke [data-scroll='out'] .char:after {
  -webkit-clip-path: inset(0 100% 0 0);
          clip-path: inset(0 100% 0 0);
}
.text--filling .char {
  color: rgba(255,255,255,0.15);
}
.text--filling .char:after {
  color: #fff;
  visibility: visible;
}
.text--filling [data-scroll='in'] .char:after {
  -webkit-clip-path: inset(0 0 0 0);
          clip-path: inset(0 0 0 0);
}
.text--filling [data-scroll='out'] .char:after {
  -webkit-clip-path: inset(100% 0 0 0);
          clip-path: inset(100% 0 0 0);
}
.text--blocks [data-scroll='out'] .char {
  visibility: hidden;
}
.text--blocks [data-scroll='in'] {
  overflow: hidden;
  position: relative;
}
.text--blocks [data-scroll='in'] .char {
  transition-delay: 0.5s;
}
.text--blocks [data-scroll='in']:after {
  content: '';
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  -webkit-animation: block 0.5s 0.25s both;
          animation: block 0.5s 0.25s both;
}
@-webkit-keyframes block {
  0% {
    transform: translate(-110%, 0);
  }
  45%, 55% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(110%, 0);
  }
}
@keyframes block {
  0% {
    transform: translate(-110%, 0);
  }
  45%, 55% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(110%, 0);
  }
}
.text--scaling [data-scroll='out'] .char {
  transform: scale(0);
}
.text--turning [data-scroll='out'] .char {
  transform: rotateY(90deg);
}
.text--folding [data-scroll='out'] .char {
  transform: rotateX(90deg);
  transform-origin: bottom;
}
.text--bulge [data-scroll='in'] .char {
  -webkit-animation-name: bulge;
          animation-name: bulge;
  -webkit-animation-duration: 0.25s;
          animation-duration: 0.25s;
}
@-webkit-keyframes bulge {
  50% {
    transform: scale(1.5);
  }
}
@keyframes bulge {
  50% {
    transform: scale(1.5);
  }
}
.text--perspective {
  perspective: 1000px;
}
.text--perspective .char {
  transition: transform 0.25s calc(0.25s + var(--char-index) * 0.1s), opacity 0.05s calc(0.25s + var(--char-index) * 0.1s);
}
.text--perspective [data-scroll='out'] .char {
  opacity: 0;
  transform: translate3d(-25px, -20px, -800px);
}
.text--zipping .char {
  transition: transform 0.25s calc(0.25s + var(--char-index) * 0.1s), opacity 0.05s calc(0.25s + var(--char-index) * 0.1s);
}
.text--zipping [data-scroll='out'] .char {
  opacity: 0;
}
.text--zipping [data-scroll='out'] .char:nth-of-type(odd) {
  transform: translate(0, -100%);
}
.text--zipping [data-scroll='out'] .char:nth-of-type(even) {
  transform: translate(0, 100%);
}
.text--spinning [data-scroll='out'] .char {
  transform: rotateY(-360deg);
}
.text--tumbling .char {
  transition-delay: calc((var(--char-total) - var(--char-index)) * 0.1s);
}
.text--tumbling [data-scroll='out'] .char {
  opacity: 0;
  transform: translate(-300%, -50%) rotate(1080deg) scale(0);
}
.text--bubbling .char {
  transition-timing-function: cubic-bezier(0.75, -2, 0.75, 2);
}
.text--bubbling .char:nth-of-type(1) {
  transition-delay: 0.5s;
}
.text--bubbling .char:nth-of-type(2) {
  transition-delay: 0.7s;
}
.text--bubbling .char:nth-of-type(3) {
  transition-delay: 0.2s;
}
.text--bubbling .char:nth-of-type(4) {
  transition-delay: 0.5s;
}
.text--bubbling .char:nth-of-type(5) {
  transition-delay: 0.7s;
}
.text--bubbling .char:nth-of-type(6) {
  transition-delay: 0.5s;
}
.text--bubbling .char:nth-of-type(7) {
  transition-delay: 0.5s;
}
.text--bubbling .char:nth-of-type(8) {
  transition-delay: 0.5s;
}
.text--bubbling [data-scroll='out'] .char {
  transform: scale(0.5);
}
.text--swinging .char {
  transform-origin: calc((var(--char-total) - var(--char-index)) * 100%) -100%;
  transition-delay: calc((var(--char-total) - var(--char-index)) * 0.1s);
}
.text--swinging [data-scroll='out'] .char {
  opacity: 0;
  transform: rotate(90deg);
}
.text--rolling .char {
  transition: transform 1s, opacity 0.2s;
  transition-delay: calc((var(--char-total) - var(--char-index)) * 0.1s);
}
.text--rolling [data-scroll='out'] .char {
  opacity: 0;
  transform: translate(-500%, 0) scale(0) rotate(-1440deg);
}
.text--blowing .char {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  transform-origin: left bottom;
  -webkit-animation-delay: calc(var(--char-index) * 0.025s);
          animation-delay: calc(var(--char-index) * 0.025s);
}
.text--blowing [data-scroll='in'] .char {
  -webkit-animation-name: blowing;
          animation-name: blowing;
}
@-webkit-keyframes blowing {
  50%, 60%, 70% {
    transform: skewX(-35deg);
  }
  55%, 65%, 75% {
    transform: skewX(-40deg);
  }
}
@keyframes blowing {
  50%, 60%, 70% {
    transform: skewX(-35deg);
  }
  55%, 65%, 75% {
    transform: skewX(-40deg);
  }
}
.text--meeting .char {
  transition-delay: calc((var(--char-total) - var(--char-index)) * 0.1s);
}
.text--meeting .char:nth-of-type(even) {
  transform-origin: top right;
}
.text--meeting .char:nth-of-type(odd) {
  transform-origin: bottom left;
}
.text--meeting [data-scroll='out'] .char {
  transform: rotate(180deg);
}
.text--conveyor [data-scroll='in'] .char {
  transform-origin: left bottom;
  -webkit-animation: convey 1s both linear;
          animation: convey 1s both linear;
  -webkit-animation-delay: calc((var(--char-total) - var(--char-index)) * 0.15s);
          animation-delay: calc((var(--char-total) - var(--char-index)) * 0.15s);
  transition: none;
}
@-webkit-keyframes convey {
  0% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(-180deg) translate(calc((var(--char-total) - var(--char-index)) * -100%), 0);
  }
  40% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(-180deg) translate(0, 0);
  }
  50% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(0deg) translate(0, 0);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
}
@keyframes convey {
  0% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(-180deg) translate(calc((var(--char-total) - var(--char-index)) * -100%), 0);
  }
  40% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(-180deg) translate(0, 0);
  }
  50% {
    transform: translate(calc((var(--char-total) - (var(--char-total) - var(--char-index))) * -100%), 0) rotate(0deg) translate(0, 0);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) translate(0, 0);
  }
}

/* -------------------- */

@keyframes jump {
  0% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
  40% {
    transform: translate3d(0, 30%, 0) scale3d(0.7, 1.5, 1);
  }
  100% {
    transform: translate3d(0, 100%, 0) scale3d(1.5, 0.7, 1);
  }
}

/* For demo: */

.jump {
 /*  transform-origin: 30% 30%; */
  animation: jump 3s linear alternate infinite;
}

/* End animation */


.btn_popupBox {
  position: fixed;
  top: 170px;
  right: 15px;
  z-index: 10;
  width: 80px;
  cursor: pointer;
}


  @media only screen and (max-width: 400px) {
    .respon-disp {
     zoom: 75%;}
}

.carousel-fade {
    .carousel-inner {
        .item {
            transition-property: opacity;
        }

        .item,
        .active.left,
        .active.right {
            opacity: 0;
        }

        .active,
        .next.left,
        .prev.right {
            opacity: 1;
        }

        .next,
        .prev,
        .active.left,
        .active.right {
            left: 0;
            transform: translate3d(0, 0, 0);
        }
    }

    .carousel-control {
        z-index: 2;
    }
}

.carousel-inner .item {
    height: 100%;
}

.item:nth-child(1) {
    background: #74c390;
}

.item:nth-child(2) {
    background: #51bce8;
}

.item:nth-child(3) {
    background: #e46653;
}




.popupBox {
  position: fixed;
  /* top: 50%;
  left: 50%; */
  top: 150px;
  right: 15px;
  /* transform: translate(-50%, -50%); */
  display: none;
  /* zoom: 54%; */
  z-index: 100;
}

.popupBox__content {
  position: relative;
  width: 335px;
  height: 150px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.popupBox__img {
  position: relative;
  display: flex;
 /*  justify-content: center;
  align-items: center; */
}


/* .popupBox__img::before {
  content: "";
  position: absolute;
  width: 250px;
  height: 250px;
  background: #e7ffe0;
  border-radius: 50%;
} */

.popupBox__img img {
  position: relative;
  max-width: 160px;
  z-index: 1;
}

.popupBox__contentTwo {
  position: relative;
 /*  width: 300px;
  height: 400px; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.popupBox__title {
  color: #333;
  font-family: Rawson;
  font-size: 13px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: -0.02em;
  text-align: left;

}

.popupBox__titleTwo {
  /* font-size: 4em; */
  color: #887fff;
  line-height: 1em;
}

.popupBox__titleTwo span {
  color: #333;
 /*  font-size: 0.75em; */
  text-transform: uppercase;
}

.popupBox__description {
  font-weight: 300;
}

.popupBox__btn {
  display: inline-block;
  padding: 10px 20px;
  background: #887fff;
  text-decoration: none;
  color: #000;
  margin-top: 15px;
  border-radius: 10px;
}

.closeoff {
    position: absolute;
    top: 4px;
    right: 6px;
    width: 20px;
    height: 20px;
    background: #f3f3f3 url("/images/cross-circle.svg");
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center;
    z-index: 10;
    cursor: pointer;
    border-radius: 50%;
}
@media (max-width: 768px) {
 .popupBox {
  top: 350px;
  right: 15px;
}
} 
.credit a{
  text-decoration: none;
  color: #887fff;
}
.credit {
    margin-top: 10px;
    font-size: 1.8rem;
}