html{
    overflow-x:hidden
}
body{
    background-color: #f8f9fa;
    font-size:15px;
    font-weight:400;
    font-family: 'Lato', sans-serif;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-font-smoothing:subpixel-antialiased;
      color: #22397d; 
      line-height: 1.4;
      margin-top: 0px;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    overflow-x:hidden;
}
h1,h2,h3,h4,.h1,.h2,.h3,.h4{
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
}
a{
    -webkit-transition:all .2s linear;
    -moz-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear
}
a:hover{
    text-decoration:none
}
a a:focus{
    outline:none
}
option{
	max-width: 600px;
}
p{
    /*font-weight:400;font-family:lato,sans-serif;margin:0;font-size:18px*/
}
/*ul,ol{
    list-style:outside none none;margin:0;padding:0
}
ul li,ol li{
    list-style:none
}*/

.loading-shield {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  z-index: 100000;
}
.spinner{
    padding:10px;
    background:rgba(255,255,255,1);
    border-radius: 20px;  
    display: flex;
    flex-direction: column;  
    position: relative;
}
#result-shield-body{
    padding:50px;
    background:rgba(255,255,255,1);
    border-radius: 20px;  
    display: flex;
    flex-direction: column;  
    position: relative;
}
.spinner small{
    bottom: 50px;
  position: absolute;
  display: block;
  left: 0;
  right: 0;
}
#navbar_top {
    transition: all 0.5s;
	z-index: 2;
}
.logofixe{
	position: absolute;
    transition: all 0.2s;
    left: 20px;
    top: 20px;
	height:50px;
	z-index: 3;
}
.linkedinfixe{
	position: absolute;
    right: 20px;
    top: 20px;
	height:50px;
	z-index: 3;
}
.logoutfixe{
	position: fixed;
    transition: all 0.5s;
    right: 100px;
    top: 20px;
	height:50px;
	z-index: 1000;
}
.mailfixe{
	position: absolute;
    right: 60px;
    top: 20px;
	height:50px;
	z-index: 3;
}
.logofixe.mini{ 
	height:30px; 
    top: 15px;
}
.mailfixe.mini{ 
	height:30px; 
}
.linkedinfixe.mini{ 
	height:30px; 
}
.logoutfixe.mini{ 
	height:30px;  
	right: 20px;
  	top: 7px; 
}
.home .videocontainer {
  position: relative;
  overflow: hidden;
  background-color: black;
  margin-top: 0px;
  min-height: 250px;
  height: 250px;
}
.videocontainer video {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.7;
}
.middle {
  transition: .5s ease;
  opacity: 0.6;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.section-padding{
    padding-top: 20px;
margin-top: 40px;
}
.shadow-md{
    box-shadow: 0 0 10px #ccc;
}
.highlight{
  background: yellow;
}
.video_thumb{
	position: relative;
display: flex;
flex-direction: column;
	text-decoration: none;
}
select.form-control {
-webkit-appearance: button-arrow-down;
-moz-appearance: button-arrow-down;
appearance: button-arrow-down;
}
.text-orange{
    color:orange;
}
.bg-orange{
    background-color:orange;
}
.video_thumb:hover .image {
  opacity: 0.3;
}

.video_thumb:hover .middle {
  opacity: 1;
}
.video h5{
	color:#2daae2;
	font-weight: 500;
	margin-bottom: 0;
}
.bg-pattern::before {   
      content: "";
      /*background-image: url('/assets/images/background/18410.jpg');*/
      background-image: url('/assets/images/background/906582.jpg');
      background-size: cover;
    background-repeat: repeat-y;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.45;
	z-index: 0;
}
.bg-pattern .card-body { 
  z-index: 1;
}

.equipe .card{
	margin: 20px;
	transition: all 0.3s;
	
}
.equipe .card:hover{
	transform: rotate(0deg) !important;
	
}
.equipe .card:hover img{ 
  filter: grayscale(0%);
	
}
.equipe img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: all 1.0s;
}
.video .date{
	font-size: 0.8rem;
}
.bottom-overflow-fade {
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
.bottom-overflow-fade-short {
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
    max-height: 250px;
}
.btn-voir-plus {
    position: absolute;
    bottom: 0;
    left: calc(100%/2 - 50px);
    width: 100px;
    box-shadow: 0 0 10px #ccc;
    border: 1px solid #999;
}
.videoxl .duration{
	font-size: 0.75rem;
	bottom:  3%;
  margin-top: 0;
  position: absolute;
  right: 2%;
  width: auto;
  height: 18px;
  background: #000;
  border-radius: 5px;
  padding: 0px 7px 0 5px;
  font-weight: bold;
}
.video .duration{
	font-size: 0.7rem;
	bottom: 5%;
  margin-top: 0;
	position: absolute;
	right: 4%;
	width: auto;
	height: 18px;
	background: #000;
	border-radius: 5px;
	padding: 0px 7px 0 5px;
  font-weight: bold;
}
.video .card-body {
    padding-top: 0.35rem;
}
.card-text {
    font-size: 0.8rem;
}
.cp h5{
	color:#0d6efd;
	font-weight: 700;
	margin-bottom: 0;
	font-size: 1.15rem;
}
.cp .date{
	font-size: 0.8rem;
}
.cp .card-body {
    padding-top: 0.35rem;
}
.container, .container-sm, .container-md, .container-lg, .container-xl{
	/*background: #fff;*/
	position: relative;
}
.jumbotron {
    padding-top: 5rem;
    padding-bottom: 6rem;
	margin-bottom: 0;
	background-color: #fff;
}

.jumbotron .container {
    max-width: 40rem;
}
.navbar-white .navbar-nav .nav-link {
    color: rgba(0,0,0,.5);
}
.navbar-white .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
hr.dotted{
    border-top:1px dotted #ccc;
    box-sizing: border-box;
}
hr.dashed{
    border-top:1px dashed #ccc;
    box-sizing: border-box;
}
.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

.hero-heading{
    font-size:40px;font-weight:700;color:#fff;text-transform:capitalize;line-height:70px;letter-spacing:.1rem
}
.hero-sub-heading{font-size:20px;font-weight:400;color:#e6e6e6;line-height:45px;letter-spacing:.1rem}
.section-titile-bg{display:inline;font-size:115px;font-weight:700;height:100%;left:-173px;opacity:.1;position:absolute;top:-14px;width:100%;text-align:center}
.section-title-header p{text:center;font-weight:400;line-height:26px;padding-bottom:36px}
.section-title{font-size:36px;color:#212121;line-height:52px;padding-bottom:20px;font-weight:700;text-align:center;/*text-transform:uppercase;*/position:relative;margin-bottom:15px} 
.section-subcontent{font-size:16px;text:center;font-weight:400;line-height:26px;padding-bottom:36px}
.section-sub{text-transform:uppercase;font-size:24px;line-height:52px;padding-bottom:15px;margin-bottom:30px;position:relative}
.section-sub:before{position:absolute;content:'';height:1px;width:45px;left:50%;bottom:10px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#e0004d}
.subtitle{font-size:15px;margin-top:20px;font-weight:500;margin-bottom:10px}
.inner-title{font-size:24px;font-weight:700;text-tranform:capitalize}
.page-tagline{font-size:24px;font-weight:400;color:#ddd}
.page-title{font-size:62px;font-weight:700;color:#fff}
.btn{ /*border-radius:4px;cursor:pointer;font-weight:400;color:#fff;text-transform:uppercase;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;display:inline-block*/}
.btn i{margin-right:0px}.btn:focus,.btn:active{box-shadow:none;outline:none;/*color:#fff*/}
.btn-common{background-color:#e0004d;position:relative;z-index:1}
.btn-common:hover{color:#fff;background:#f50057;box-shadow:0 6px 22px rgba(0,0,0,.1);transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out}
.btn-border{color:#fff;background-color:transparent;border:1px solid #fff}
.btn-border:hover{color:#fff;background-color:rgba(255,255,255,.2)}
.btn-lg{padding:12px 34px;text-transform:uppercase;font-size:14px}
.btn-rm{padding:7px 10px;text-transform:capitalize}
button:focus{outline:none!important}
.icon-close,.icon-check{color:#e0004d}
.bg-drack{background:#f1f1f1}
.bg-white{background:#fff}
.mb-30{margin-bottom:30px}
.mt-30{margin-top:30px}

a.back-to-top{display:none;position:fixed;bottom:18px;right:15px;text-decoration:none}
a.back-to-top i{
    display:block;font-size:22px;
    width:40px;height:40px;
    line-height:40px;
    color:#fff;
    background:#e0004d;
    border-radius:0;
    text-align:center;
    transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28)
}
a.back-to-top:hover,a.back-to-top:focus{
    text-decoration:none
}



#preloader1,#preloader {
  position: fixed;
  background: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999999;
}
@keyframes animation-loader {
   0% {
    top: 8px;
    left: 70px;
  }

  3.13% {
    top: 18.0px;
    left: 100.0px;
  }

  6.25% {
    top: 30.0px;
    left: 120.0px;
  }

  9.38% {
    top: 46.0px;
    left: 150.0px;
  }

  12.5% {
    top: 80.0px;
    left: 180.0px;
  }

  15.63% {
    top: 100.0px;
    left: 200.0px;
  }

  18.75% {
    top: 120.0px;
    left: 220.0px;
  }

  21.88% {
    top: 138.0px;
    left: 260.0px;
  }

  25% {
    top: 140.0px;
    left: 280.0px;
  }

  28.13% {
    top: 130.0px;
    left: 320.0px;
  }

  31.25% {
    top: 120.0px;
    left: 330.0px;
  }

  34.38% {
    top: 80.0px;
    left: 352.0px;
  }

  37.5% {
    top: 70.0px;
    left: 350.0px;
  }

  40.63% {
    top: 60.0px;
    left: 350.0px;
  }

  43.75% {
    top: 30.0px;
    left: 335.0px;
  }

  46.88% {
    top: 12.0px;
    left: 310.0px;
  }

  50% {
    top: 10px;
    left: 280px;
  }

  53.13% {
    top: 15.0px;
    left: 260.0px;
  }

  56.25% {
    top: 40.0px;
    left: 210.0px;
  }

  59.38% {
    top: 70.0px;
    left: 180.0px;
  }

  62.5% {
    top: 80.0px;
    left: 180.0px;
  }

  65.63% {
    top: 86.0px;
    left: 170.0px;
  }

  68.75% {
    top: 90.0px;
    left: 162.0px;
  }

  71.88% {
    top: 130.0px;
    left: 110.0px;
  }

  75% {
    top: 140.0px;
    left: 60.0px;
  }

  78.13% {
    top: 120.0px;
    left: 20.0px;
  }

  81.25% {
    top: 100.0px;
    left: 2.0px;
  }

  84.38% {
    top: 58.0px;
    left: 5.0px;
  }

  87.5% {
    top: 40.0px;
    left: 10.0px;
  }

  90.63% {
    top: 25.0px;
    left: 20.0px;
  }

  100% {
    top: 12.0px;
    left: 40.0px;
  }

}
@keyframes revealCircle {
  to {
    transform: rotate(180deg);
  }
}
.parent-loader {
  width: 356px;
  height: 200px;
  position: relative;
  z-index: 900;
}
.parent-loader .div {
  position: relative;
  width: 356px;
  height: 200px;    
  z-index: 900;
}
.parent-loader .div:before,
.parent-loader .div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: 154px;
  height: 154px;
  border: 10px solid black;
  border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  transform: rotate(45deg);
}
.parent-loader .div:after {
  left: auto;
  right: 0;
  transform: rotate(-135deg);
}
.parent-loader .div1, .parent-loader .div2, .parent-loader .div3 {
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background: red;
  z-index: 900;
  position: absolute;
  animation-name: animation-loader;
  animation-timing-function: linear;
  animation-duration: 10s;
  animation-iteration-count: infinite;
    box-shadow: 0 0 10px red;
}
.parent-loader .div1 {   
  transition-timing-function: cubic-bezier(0.75, 1.1, 0.25, 0.1);
  transform-origin: center left;
    opacity: 1; 
  z-index: 901;
}
.parent-loader .div2 { 
  animation-delay: 0.08s;  
  transition-timing-function: cubic-bezier(0.75, 1.1, 0.25, 0.1);
  transform-origin: center left;
    opacity: 0.8;
  filter: blur(4px);
}
.parent-loader .div3 { 
  animation-delay: 0.12s;  
  transition-timing-function: cubic-bezier(0.75, 1.1, 0.25, 0.1);
  transform-origin: center left;
    opacity: 0.7;
  filter: blur(4px);
}

.form-control-sm { 
  display: inline-block;
    width: auto;
}
.card-header { 
  background-color: rgba(0,0,0,.0); 
}
.form-group {
    margin-bottom: 1rem;
}
a.linkSource:hover{
  cursor:pointer;
}
h1{
    font-size: 1.2rem;
    font-weight: normal;
}
.darker{
    filter: brightness(0.85);
}

a.printBtn{
  top: 8px;
  right: 32px;
    position: absolute;
    z-index: 2;
    text-decoration: none;
    color: white !important;
    font-weight: normal;
    font-size: 12px;
}
#chartContainerYEAR{
    border-bottom: 1px dashed #ccc;
}
.ripple{position:relative; transform:translate3d(0,0,0)}
.ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s}
.ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s}
.category-name-photo{
    padding: 5px 20px 7px 20px;
    background: #FFF;
    width: auto;
    font-size:16px;
    border-radius: 5px;
    border: 1px solid #CCC;
    font-weight: 400;
    font-family: 'Oswald', sans-serif;
    /*border-bottom:0;*/
    box-shadow: 0 0 5px rgba(0,0,0,.15) !important;
    /*margin-top: -40px;*/
    margin-bottom: 15px;
}
/*.bg-pattern::after {    
      content: "";
      background-image: url('/2023/assets/img/background/18410.jpg');
      background-size: cover;
    background-repeat: repeat-y;
      position: absolute;
	z-index: -1;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.45;
}*/
.category-name-border:not(:first-child){
    border-top: 1px dashed #AAA;
}
.creator-body{
    background: #EEE;
    border-radius: 10px 0px 0px 10px;
    position: relative;
    border: 1px solid #CCC; 
	box-shadow: 0 6px 15px rgba(0,0,0,.15) !important;
    /*
	position: absolute;
	top: 25px;*/
    border-right: 0;
	width: 270px;
}
.btn, .btn-img {
  font-family: 'Oswald', sans-serif;
}
.shadow {
  box-shadow: 0px 5px 5px rgba(0,0,0,.15) !important;
}
.h2.notlogged {
  font-size: 1.6em;
  font-family: 'Oswald', sans-serif;
  color: #EE7B30;
  font-weight: bold;
  text-transform: uppercase;
}
.content{
    /*padding-bottom: 25px;*/
}
.navbar-dark .navbar-text {
  color: rgb(255, 255, 255);
}
.badge{
    /*color:#0C3450;*/
    padding: .35em .35em;
} 
.social h3 .badge{
    font-size:2rem;
    padding: .35em .35em .35em 0;
}
.pink{
    color: #e43879;
}
.category-item{
    background: #013450;
    color: #fff;
    width:100%;
    display: inline-block;
}
.category-item:not(:first-child){
    margin-top:1rem;
}
.floating-menu{
    border-radius: 50px;
	z-index: 999;
	padding: 2px 5px;
	left: 0px;
	width: 64px;
	position: fixed;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

.photos-menu{
	padding-left: 0;
}

.photos-menu li a{display: block;
padding: 16px 16px;
color: #fff;
border-radius: 35px;
position: relative;
-webkit-transition: none;
-o-transition: none;
transition: none;
text-align: center;}
.photos-menu li a:hover, .photos-menu li a:active, .photos-menu li a.active{background:rgba(244,244,244,.3)}
.float-title{display: none;left: 75px;color: #333;position: fixed;background: #fff;padding: 5px;}
.photos-menu li a:hover .float-title{display: inline-block;}
.photos-menu li{
	list-style: none; 
}
.photos-menu li.first{
    font-size:12px;
    text-align: center;
    padding-top: 5px;
    color:#fff;
    margin-bottom:5px;
}
.menu-bg{
    background-image:-webkit-linear-gradient(top,#e43879 0,#0396dc 100%);
    background-image:-o-linear-gradient(top,#e43879 0,#0396dc 100%);
    background-image:-webkit-gradient(linear,left top,left bottom,from(#e43879),to(#0396dc));
    background-image:linear-gradient(to bottom,#e43879 0,#0396dc 100%);
    background-repeat:repeat-x;
    position:absolute;
    width:100%;
    height:100%;
    border-radius:0 30px 30px 0;
    z-index:-1;
    top:0;
    left:0;
    -webkit-transition:.1s;
    -o-transition:.1s;
    transition:.1s
}
#dropC{
    /*max-height: 500px;
    overflow-y: scroll;
    right: 0;
    left: auto;*/
}
.logo-customer-hover {
	max-width: 120px;
	max-height: 120px;
	position: absolute;
	top: -35%;
	left: 20px;
	z-index: 1;
	box-shadow: 2px 2px 10px #999;
}
.customer-banner {
	  font-size: 24px;
	  font-weight: normal;
	  margin-bottom: 0px;
	  color: #EE7B30;
	height: 100px;
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
    padding: 0;
	position: relative;
} 
.customer-banner-inner {
	position: absolute;
	overflow: hidden;
    right: 0;
    left: 0;
    top: 0; 
    bottom: 0;
} 
.customer-banner-inner img{
	position: absolute;
	overflow: hidden;
    right: 0;
    left: 0;
    top: -50%; 
    /*animation-duration: 20s; 
	opacity: 0.4;
    animation-delay: 0s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite;
    animation-direction: alternate;
	animation-name: customer-banner-anim;
	animation-fill-mode: both; 
	transform-origin: center;*/
} 
.customer-banner h1{
    padding: 11px 15px 14px 15px;
	position: absolute;
	/*height: 100%;
	text-shadow: 1px 1px #ddd;
	background-color: rgba(255,255,255,0.3);*/
	text-transform: uppercase;
}

@-webkit-keyframes customer-banner-anim{
	0% { 
		top: -250%;
	}
	100% { 
		top: -50%;
	}
}  
#customerTab .nav-link:focus, #customerTab .nav-link:hover {
  color: #EE7B30;
    background: #EFEFEF;
}

.bg-dark {
  background-color: #013450 !important;
}
.text-justify{
    text-align: justify !important;
}
.navbar-nav a.nav-link, .navbar-nav a.dropdown-item{
font-family: 'Oswald', sans-serif;
font-size: 14px;
}
.navbar a:not(.navbar-brand):hover, .navbar a:not(.navbar-brand) i:hover, .navbar .active, .navbar li:hover > a:not(.navbar-brand) {
    /*color: #FFF;*/
    border-color: #FFFFFF;
}
.navbar a:not(.navbar-brand) i{
    color: rgba(255,255,255,.55);
}

.navbar-nav .nav-item:hover a.nav-link,.navbar-nav .nav-item.active a:first-child{
    color:#FFF;
}
.navbar-dark #navbarId.navbar-nav a:not(.navbar-brand):hover, .navbar a:not(.navbar-brand) i:hover, .navbar .active, .navbar li:hover > a:not(.navbar-brand) {
    /*color: #FFF;*/
    border-color: #FFFFFF;
}
.navbar-dark #navbarId.navbar-nav a:not(.navbar-brand) i{
    color: rgba(255,255,255,.95);
}
.navbar-dark .navbar-nav .nav-link{
    color: rgba(255,255,255,.95);
}
.navbar-dark #navbarId.navbar-nav .nav-item:hover a.nav-link,.navbar-nav .nav-item.active a:first-child{
    color:#EEE;
}

.navbar-nav .nav-item:hover a::before,.navbar-nav .nav-item.active a::before{
    -webkit-transform:scale3d(1,1,1);
    -moz-transform:scale3d(1,1,1);
    -ms-transform:scale3d(1,1,1);
    -o-transform:scale3d(1,1,1);
    transform:scale3d(1,1,1);
}
.navbar-nav .nav-item a.nav-link {
    padding: 5px 0;
    text-transform: uppercase;
    background: 0 0;
    -webkit-transition: all .3s ease-out 0s;
    -moz-transition: all .3s ease-out 0s;
    -ms-transition: all .3s ease-out 0s;
    -o-transition: all .3s ease-out 0s;
    transition: all .3s ease-out 0s;
    position: relative;
}
.navbar a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    color: #2c4964;
    white-space: nowrap;
    transition: 0.3s;
    border-bottom: 2px solid transparent;
        border-bottom-color: rgba(255, 255, 255,0);
    padding: 5px 10px;
}
.big{
font-size:40px;
}
.form-wrapper{
  border-radius: 7px;
}
.form-wrapper label{
  font-weight: bold;
}
.membre .programme-item, .schedule .programme-item{
background : #FFF;
}
#map{
  height: 450px;
}
.bg-white{
background : #ffffff;
}
.schedule  .schedule-tab-title{
  padding-right: 0px;
}
.card.cart-box{
  min-height:300px;
}

.sample {
  position: relative;
}

.ribbonFake {
  width: 36px;
  height: 36px;
padding: 0;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.ribbonFake > .content {
  color: white;
  font-size: 0.8rem;
  text-align: center;
  font-weight: 400;
padding: 3px;
    border-radius: 30px;
  width: 28px;
  height: 28px;
line-height: 22px;
}
.ribbon {
  position: absolute;
  right: -16px;
  top: -16px;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.ribbon > .content {
  color: white;
  font-size: 1rem;
  text-align: center;
  font-weight: 400;
  background: var(--color, #2ca7d8) linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%);
  padding: 3px;
  border-radius: 30px;
  width: 32px;
  min-height: 32px;
}

.ribbon.slant-up > .content {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% calc(100% - 6px), 0 100%);
}
.ribbon.slant-down > .content {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 calc(100% - 12px));
}
.ribbon.down > .content {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px));
}
.ribbon.up > .content {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
}
.ribbon.check > .content {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 40% 100%, 0 calc(100% - 12px));
}
 
.slick-no-slide .inner {
  display: inline-block;
}
 
.block-creator{
	position: absolute;
top: 30px;
right: 0;
display: block;
height: 105px;
width: 270px;
}

#navbarId .navbar-dark .navbar-nav .nav-link {
  color: #EEE;
}
#navbarId .navbar-nav .nav-item:hover a.nav-link, #navbarId .navbar-nav .nav-item.active a:first-child {
  color: rgba(255,255,255,.65);
}
#navbarId .navbar a:not(.navbar-brand):hover, #navbarId .navbar a:not(.navbar-brand) i:hover, #navbarId .navbar .active, #navbarId .navbar li:hover > a:not(.navbar-brand) {
  color: rgba(255,255,255,.65);
    border-color: #EEE;
}

main{
    padding-top:1px;
    background-color: #f8f9fa;
    min-height: 85vh;
}
.membre .programme-item .btn-light, .schedule .programme-item .btn-light {
    background-color: #e8e9ea;
    border-color: #e8e9ea;
}
.membre .programme-item .card-body, .schedule .programme-item .card-body {
    padding: 0.8rem;
}
.schedule .programme-item .card-body:first-child {
  background: #ffffff;
}
.membre .card.theme-item, .schedule .card.theme-item{
margin-top: 1rem;
}
.membre .text-muted, .schedule .text-muted{
font-size:14px;
}
label:not(.form-check-label):not(.custom-file-label) {
    font-weight: 700;
}
label {
    display: inline-block;
    margin-bottom: .5rem;
} 
.badge-blue{ background: rgba(31,170,225,1); }
.badge-orange{ background: rgba(224,0,77,1); }
.badge-green{ background: rgba(224,0,77,1); }

.alert-green{

color: #fff;
background-color: #8dc63f;
border-color: #badbcc;
}
 
.img-hover{
  width: 150px;
  height: 150px;
  vertical-align: middle;
  position: absolute;
  background: rgba(0,0,0,0.2);
  border-radius: 100px;
  opacity: 0;
}
.img-hover:hover{
opacity: 1;
cursor: pointer;
}

.img-hover a {
    background: rgba(255,255,255,0.9);
    padding: 10px;
    color: black;
}
select.form-control{
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
} 
.section-bg {
    background-color: #f1f7fd;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}
.category {
  font-size: 11px;
  font-weight: normal;
  font-style: italic;
}
.category a{
    text-decoration: none;
}
.section-title h2, .section-title h3, .section-title .h2, .section-title .h3, .section-title h1 {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
text-transform:uppercase;
  color: #2c4964;
}
.section-title h3,.section-title .h3 {
  font-size: 28px;
}

.section-title h2::before, .section-title h3::before, .section-title h1::before{
  content: '';
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after, .section-title h3::after, .section-title h1::after {
  content: '';
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #1977cc;
  bottom: 0;
  left: calc(50% - 20px);
}

.section-title p {
  margin-bottom: 0;
  font-weight: normal;
  line-height:normal;
  margin: 0;
  font-size: 16px;
}
/*--------------------------------------------------------------
# Top Bar
--------------------------------------------------------------*/
#topbar {
  /*background: #fff;*/
  height: 75px;
  font-size: 14px;
  transition: all 0.5s;
  z-index: 996;
}

#topbar.topbar-scrolled {
  top: -40px;
}

#topbar .contact-info a {
  line-height: 1;
  color: #FFF;
  transition: 0.3s;
    text-decoration: none;
}

#topbar .contact-info a:hover {
  color: #999;
}

#topbar .contact-info i {
  color: #FFF;
  padding-right: 4px;
  margin-left: 15px;
  line-height: 0;
}

#topbar .contact-info i:first-child {
  margin-left: 0;
}

#topbar .social-links a {
  color: #FFF;
  padding-left: 15px;
  display: inline-block;
  line-height: 1px;
  transition: 0.3s;
}

#topbar .social-links a:hover {
  color: #999;
}

#topbar .social-links a:first-child {
  border-left: 0;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
	position: relative;
  background: #fff;
  transition: all 0.5s;
  z-index: 997;
  padding: 0;
  top: 0px;
  box-shadow: 0px 2px 15px rgba(25, 119, 204, 0.1);
}
#header.header-scrolled {
  top: 0;
} 

 


.stick {
    position: fixed;
    width: 26.7%;
    top: 00px;
}

.abs {
    position: absolute;
    bottom: 0px;
    width: 92.5%;
}
.errors li{
  list-style: none;
  width: 100%;
  text-align: center;
}
.errors ul{
  padding-left: 0;
  margin-bottom: 0;
}
.schedule-tab-title{
  box-shadow:0 0 10px #ccc;
}
.btn-light{
    border: 1px solid #dee2e6 !important;
}
.btn.btn-light:focus, .btn.btn-light:active {
    box-shadow: none;
    outline: none;
    color: #333;
}
.border {
    border: 1px solid #dee2e6 !important;
}
.card-body p.lead {
    font-size: 1rem;
    text-decoration: underline;
}
.schedule-tab-title h4.text-muted{
  border-bottom: 1px solid #ddd;
}
@media (max-width: 768px){
  .form-wrapper .text-right{
    text-align: center !important;
  }

  .form-wrapper .btn-primary{
    display: block;
    margin: 0 auto;
  }
}   
 


.dropdown-menu.menu-right[data-bs-popper] {
    right: 0;
  left:auto;
}



.login-logo,
.register-logo {
  font-size: 2.1rem;
  font-weight: 300;
  margin-bottom: .9rem;
  text-align: center;
}

.login-logo a,
.register-logo a {
  color: #495057;
}

.login-page,
.register-page {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: #e9ecef;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100vh;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.login-box,
.register-box {
  width: 360px;
}

@media (max-width: 576px) {
  .login-box,
  .register-box {
    margin-top: .5rem;
    width: 90%;
  }
}

.login-box .card,
.register-box .card {
  margin-bottom: 0;
}

.login-card-body,
.register-card-body {
  background-color: #fff;
  border-top: 0;
  color: #666;
  padding: 20px;
}

.login-card-body .input-group .form-control,
.register-card-body .input-group .form-control {
  border-right: 0;
}

.login-card-body .input-group .form-control:focus,
.register-card-body .input-group .form-control:focus {
  box-shadow: none;
}

.login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text,
.register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text {
  border-color: #80bdff;
}

.login-card-body .input-group .form-control.is-valid:focus,
.register-card-body .input-group .form-control.is-valid:focus {
  box-shadow: none;
}

.login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
.login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text,
.register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text {
  border-color: #28a745;
}

.login-card-body .input-group .form-control.is-invalid:focus,
.register-card-body .input-group .form-control.is-invalid:focus {
  box-shadow: none;
}

.login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text,
.register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
  border-color: #dc3545;
}

.login-card-body .input-group .input-group-text,
.register-card-body .input-group .input-group-text {
  background-color: transparent;
  border-bottom-right-radius: 0.25rem;
  border-left: 0;
  border-top-right-radius: 0.25rem;
  color: #777;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.login-box-msg,
.register-box-msg {
  margin: 0;
  padding: 0 20px 20px;
  text-align: center;
}

.social-auth-links {
  margin: 10px 0;
}

.dark-mode .login-card-body,
.dark-mode .register-card-body {
  background-color: #343a40;
  border-color: #6c757d;
  color: #fff;
}

.dark-mode .login-logo a,
.dark-mode .register-logo a {
  color: #fff;
}
.home-item h2 {
    margin-bottom: 0;
}
h2 {
    font-size: 18px;
    font-weight: normal;
    color: #EE7B30;
}

h2 a {
  color: #EE7B30;
    text-decoration: none;
}
a, a:hover {
  color: #0C3450;
  text-decoration: none;
}
.published {
  font-size: 11px;
  font-weight: normal;
  font-style: italic;
}
.published a{
    text-decoration: none;
}
.home-item {
  padding-bottom: 20px;
  padding-top: 30px;
  border-top: 1px dashed #ccc;
}
.btn-group-xs > .btn, .btn-xs {
  padding: .15rem .2rem;
  font-size: .675rem;
  border-radius: .2rem;
}
h5.photo-card-title
{
    font-size: 14px;
    font-family: 'Oswald', sans-serif;
}
.a_propos{
    text-align:justify;
}
.hover-zoom {
    /*transform: scale(1.1);
    transition: all 0.3s linear;  */
}
.bg-image {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
}
.hover-zoom img, .hover-zoom video {
  transition: all 0.2s ease-out;
}
.hover-zoom:hover img, .hover-zoom:hover video {
  transform: scale(1.1);
}
.cp_titre{
    background: #EEE;
    font-size:12px;
    /*position: absolute;
    right: 30px;
    top: -14px;
    padding: 2px 10px 4px 10px;
    width: auto;
    border-radius: 5px;
    border: 1px solid #ccc; 
    box-shadow: 0 0 10px rgba(0,0,0,.15) !important;*/
}
.creator-avatar{	
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1); 
} 
.social i{
    font-size: 1.5em;
    padding: 3px;
}
.chapeau {
  font-size: 14px;
  font-weight: 400; 
  text-align: justify;
  color: #215176;
  text-decoration: none;
  font-family: 'Lato', sans-serif;
}
#communique .chapeau {
  font-weight: 700; 
  font-size: 14px;
}
#communique .body {
  color: #215176;
}
.img-block{
    width: 55px; 
    background: #fff;
    text-align: center;
}
.communique-item .chapeau { 
  font-weight: normal;
}
.communique-customer-home {
  font-size: 11px;
  font-weight: normal;
  padding: .4em;
}
.content.home .jumbotron {
  position: relative;
  overflow: hidden;
  background-color:black;
  /*margin-top: 80px;*/
  max-height: 550px;
  height: 550px;
}
footer .footer-top {
  background: none repeat scroll 0 0 #0D4564;
  border-top: 0 solid #CCCCCC;
  color: #FFFFFF;
  display: block;
  font-size: 0.8em;
  margin: 0;
  padding: 10px 0;
  text-align: center;
}
footer .footer-bottom {
  background-color: #013450;
  clear: both;
  color: #CCC;
  display: block;
  font-size: 10px;
  line-height: 24px;
  margin: 0;
  text-align: center;
}
.jumbotron video {
  position: absolute;
  z-index: 1;
  top: 0;
  width:100%;
  height:100%;
  /*  object-fit is not supported on IE  */
  object-fit: cover;
  object-position: center;
  opacity:0.5;
}
.container {
    /*background: #fff;*/
}
.section-padding{
    padding-top:100px;
    padding-bottom:100px;
}
.jumbotron.middle{
margin-bottom: 0;
background: transparent;
}
#contact-map .card{
  box-shadow: 0 0 20px rgba(0,0,0,.2);
}
i.one{
color:#fff;
padding:10px;
font-size:20px;
}
.one_container{
height: 45px;
width: 45px;
padding: 3px;
margin-right: 10px;
margin-bottom: 20px;
display: inline-block;
text-align: center;
border-radius: 50px;
background: #0095da;
}
a {
    color: #0C3450;
    text-decoration: underline;
}
.progress-bar{
font-size: 0.8rem;
} 
.edito-section div.box{
  padding:20px;
  box-shadow: 0px 0px 10px #ccc;
background: #fff;
} 
.googlemap-wrapper iframe{
  width:100%;
}
.slick-slide .inner {
  margin: 0 15px;
  padding: 5px;
}

.textshadow{
text-shadow: 1px 1px 2px #000;
}
li.nav-item {
    list-style: none;
}

.slick-slide .inner {
  background: #ffffff;
  box-shadow: 0 0 10px #ccc;
}
.slick-track {
  padding: 10px 0 40px 0;
}

#dropzone:before {
content: 'Cliquez-ici ou Déposez votre fichier ici';
}
#dropzone {
  width: 100%;
  min-height: 70px;
  height: 100%;
  border: 2px dashed blue;
  border-radius: 3px;
  background-color: white;
  color: gray;
  font-family: sans-serif;
  font-size: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 400ms;
}
#dropzone:hover {
  cursor: pointer;
}
fieldset{
  padding: 30px 20px 15px 20px;
  border:1px solid #ccc;
  margin-top: 20px;
  margin-bottom: 40px;
display: block;
position: relative;
background: #f8f9fa;
}
fieldset legend{
padding: 2px 8px;
position: absolute;
background: #fff;
top: -15px;
left: 10px;
border: 1px solid #ccc;
font-size: 1rem;
width: auto;
text-transform: uppercase;
color: #666;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}

.action {
	padding:10px 10px 10px 10px;
}
.dataTables_length{
	text-align: right;
}
.corner-top{
	/*border: 1px solid #ccc;
	border-bottom: 0;
	border-radius: 10px 10px 0 0;*/ 
	padding: 5px 20px ;
	color: #999;
}
.green{
 color:#8dc63f;
}
.btn.btn-green {
    background-color: #8dc63f;
  color:#FFF;
    position: relative;
    z-index: 1;
}
.btn-green:hover {
    color:#FFFFFF;
    background-color: #8dc63f;
}
.badge-green{
    color:#FFFFFF;
    background-color: #8dc63f;
}
.btn.btn-blue{
    background-color: #0095da;
  color:#FFF;
    position: relative;
    z-index: 1;
}
.btn-blue:hover{
    color:#FFFFFF;
    background-color: #1977cc;
}
.badge-blue{
    color:#FFFFFF;
    background-color: #0095da;
}
.orange{
 color:#f7941e;
}
.btn.btn-orange{
    background-color: #f7941e;
  color:#FFF;
    position: relative;
    z-index: 1;
}
.btn.btn-orange:hover{
    color:#FFFFFF;
    background-color: #f08200;
}
.badge-orange{
    color:#FFFFFF;
    background-color: #f7941e;
}
#edito {
    /*background: #f3f4f3;*/
}

#toast-container .toast {
  background-color: #007bff;
}

#toast-container .toast-success {
  background-color: #28a745;
}

#toast-container .toast-error {
  background-color: #dc3545;
}

#toast-container .toast-info {
  background-color: #17a2b8;
}

#toast-container .toast-warning {
  background-color: #ffc107;
}

.toast-bottom-full-width .toast,
.toast-top-full-width .toast {
  max-width: inherit;
}
.offcanvas { 
  z-index: 1065;
}
.offcanvas, .offcanvas-end { 
  width: 600px;
}
.offcanvas-btn {  
	z-index: 10;
	position: fixed;
	top: auto;
	bottom: 14px;
	right: 0px;
	width: auto;
	border-radius: 5px 0 0 5px;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #0095da;
}
p[data-type="component-text"] {
  margin-bottom: 20px;
}
h3[data-type="component-text"] {
  margin-bottom: 30px;
}

.equipe img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
} 
 
        @keyframes slide{
          0% {
            transform: translate3d(0, 0, 0);
          }
          100% {
            transform: translate3d(-1692px, 0, 0);
          }
        }
.shadow-md {
  box-shadow: 0 10px 10px rgba(0,0,0,.3) !important;
} 
.content.home, .container.top{
	  min-height: 84vh;
 
}
        /* ............................................................... */ 


        /* ............................................................... */

		#bloc1{
			position: sticky;
			height: 232px;
		}
        #retrobg {
            position: absolute;
			top: 0px;
			left: 0;
			right: 0;
			height: 25vh;
			bottom: 80vh;
			overflow: hidden;
			transition: all 0.5s ease-in-out;
			display: block;
        }
        .scrolled #retrobg {
            bottom: 80vh;
            height: 20vh;
        }
        #retrobg-sky {
          position: absolute;
          display: flex;
          align-items: flex-end;
          justify-content: center;
          top: 0;
          width: 100%;
          height: 25vh;
          /*bottom: 80vh;
          background: url('../img/bg_sky.png') repeat-x;
          background:linear-gradient(#2184c7, #bad9e7);*/
            background-size: cover;
          transition: all  0.5s ease-in-out;
          /*background: linear-gradient(#c0e9fa, #87CEEB);*/
        }
        .scrolled #retrobg-sky {
            bottom: 80vh;
            height: 20vh;
        }

 		#retrobg-sky {
            background: linear-gradient(#FFF, #FFF);
        }
        .morning #retrobg-sky {
          background: linear-gradient(#FFF, #D4F4FF 30%, #8ed8f3 100%);
        }
        .day #retrobg-sky {
          /*background:linear-gradient(#2184c7, #bad9e7 50%);*/
        }
        .evening #retrobg-sky {
          /*background: linear-gradient(#FFF, #2184c7 30%, #CD7941 100%);*/
        }
        .night #retrobg-sky {
          background:linear-gradient(#01152b, #032a54 50%);
        }
           
        /* ............................................................... */
	:root {
	  --animation-time: 20s; 
	  --animation-delay: 5s; 
	  --animation-top: 10px; 
	  --animation-left: 0px; 
	  --scale-logo: 0.2; 
	  --scale-logo-round: 0.15; 
	  --scale-fleche: 0.9; 
	  --scale-coeur: 0.9;
	  --opacity-coeur: 0.9;
	  --duration-plane: 3s;
	  --scale-plane: 0.4;
	  --scale-client: 0.3;
	  --translate-client: 400px;
	}

        #retrobg-megaphones {
          	position: absolute;
			width: 100%;
			height: 100%;
			opacity: 1; 
			/*transition: all 0.5s ease-in-out;*/
			top: 0;
        }
        #retrobg-megaphones .megaphone {
          	position: absolute;  
			opacity: 0; 
			bottom:-210px;
			left:32%; 
			animation-timing-function: ease-in; 
          	animation-iteration-count: 1;
			animation-duration: 5s;
			animation-delay:1s;
    		animation-fill-mode: forwards;
            transform:scale(0.2) translateY(0px);
          animation-name: megaphone-anim;
          /*transition: all  0.5s ease-in-out;*/
        }
        @-webkit-keyframes megaphone-anim {
          0% { 
            opacity: 0; 
            transform:scale(0.2) translateY(0px);
          }
          5% {
            opacity: 1;
            transform:scale(0.2) translateY(0px);
          }
          10% {            
            transform:scale(0.2) translateY(-240px) rotate(0deg);
          }
          30% {
            transform:scale(0.2) translateY(-240px) rotate(0deg);
          } 
          35% {
            transform:scale(0.3) translateY(-245px) rotate(-20deg);
          } 
          40% {
            transform:scale(0.2) translateY(-240px) rotate(0deg);
          } 
          95% { 
            opacity: 1;
            transform:scale(0.2) translateY(-240px);
          }
          100% { 
            opacity: 0;
            transform:scale(0.2) translateY(0px);
          }
        }  

        #retrobg-clients {
          	position: absolute;
			width: 100%;
			height: 100%;
			opacity: 1; 
			/*transition: all 0.5s ease-in-out;*/
			top: 0;
        }
        #retrobg-clients .client-fixe {
          position: absolute;  
          opacity: 0;  
          animation-timing-function: ease-in-out; 
          animation-iteration-count: 1;
			animation-name: clients-fixe-anim;
    	  animation-fill-mode: forwards;
          transform:scale(var(--scale-client)) translateY(0) rotate(0deg);
			transform-origin: center;
          
          /*transition: all  0.5s ease-in-out;*/
        }
        #retrobg-clients .client-fixe img{
			border-radius: 50px;
			padding: 0px;
			border: 1px solid #ddd;
			box-shadow: 0 0 20px #ccc;
        }
        @-webkit-keyframes clients-fixe-anim {
          0% { 
			  opacity: 0;
            transform:scale(var(--scale-client)) translateY(0) rotate(-10deg);
          }
          10% { 
			  opacity: 1;
            transform:scale(calc(var(--scale-client))) translateY(0px) rotate(-10deg);
          }
          90% { 
			  opacity: 1;
            transform:scale(calc(var(--scale-client) - 0.1)) translateY(-18px) rotate(-10deg);
          }
          100% { 
			  opacity: 0;
            transform:scale(calc(var(--scale-client) - 0.1)) translateY(-20px) rotate(-10deg);
          }
        }  
        #retrobg-clients .client {
          position: absolute;  
          opacity: 1; 
		  top: -50px; 
          animation-timing-function: linear; 
          animation-iteration-count: 1;
			animation-name: clients-anim;
    	  animation-fill-mode: forwards;
          transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg);
			transform-origin: center;
          
          /*transition: all  0.5s ease-in-out;*/
        }
        #retrobg-clients .client img{
			border-radius: 50px;
			padding: 0px;
			border: 1px solid #ddd;
			box-shadow: 0 0 20px #ccc;
        }

        @-webkit-keyframes clients-anim {
          0% { 
            transform:scale(var(--scale-client)) translateY(-50px) translateX(0px) rotate(0deg);
          }
          100% { 
            transform:scale(calc(var(--scale-client) - 0.1)) translateY(calc( ( 1.5 / var(--scale-client) ) * 250px )) translateX(var(--translate-client)) rotate(-220deg);
          }
        }  

        @-webkit-keyframes clients-anim-1 {
          0% { 
            transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg);
          }
          100% { 
            transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(400px) rotate(-220deg);
          }
        }  
        @-webkit-keyframes clients-anim-2 {
          0% { 
            transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg);
          }
          100% { 
            transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(250px) rotate(-420deg);
          }
        }  
        @-webkit-keyframes clients-anim-3 {
          0% {  
            transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg);
          }
          100% { 
            transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(-350px) rotate(320deg);
          }
        }  
        @-webkit-keyframes clients-anim-4 {
          0% {  
            transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg);
          }
          100% { 
            transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(300px) rotate(420deg);
          }
        }  
        @-webkit-keyframes clients-anim-5 {
          0% { 
            transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg);
          }
          100% { 
            transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(-400px) rotate(600deg);
          }
        }  

        #retrobg-words {
          	position: absolute;
			width: 100%;
			height: 100%;
			opacity: 1; 
			/*transition: all 0.5s ease-in-out;*/
			top: 0;
        }
        #retrobg-words .word {
          	position: absolute;  
          	opacity: 0;
			font-size: 30px;
		  	font-family: 'Amatic SC', cursive;
          	animation-timing-function: ease-in-out; 
          	animation-iteration-count: 1;
    		animation-fill-mode: forwards;
            transform:scale(0.9);
          	animation-name: words-anim;
			text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
          /*transition: all  0.5s ease-in-out;*/
        }
		.night #retrobg-words .word {
			color:#eeeeee;
			text-shadow: none;
        }
        @-webkit-keyframes words-anim {
          0% { 
            opacity: 0; 
            transform:scale(0.9);
          }
          5% {
            opacity: 1;
          }
          50% {
            opacity: 0.8; 
          } 
          95% { 
            opacity: 1;
          }
          100% { 
            opacity: 0;
            transform:scale(1); 
          }
        }  

        #retrobg-clouds {
          	position: absolute;
			width: 100%;
			height: 100%;
			opacity: 1;
			transition: all 0.5s ease-in-out;
			top: 0px;
        }
        #retrobg-clouds .cloud {
          position: absolute;  
            opacity: 0;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-name: clouds-anim;
          transition: all  0.5s ease-in-out;
            left:0;
        }
        @-webkit-keyframes clouds-anim {
          0% { 
            opacity: 0;
            left:0;
          }
          5% {
            opacity: 1;
          }
          50% {
            opacity: 1;
          }
          90% {
            opacity: 1;
          }
          95% { 
            opacity: 1;
            left:100%;
          }
          100% { 
            opacity: 0;
            left:100%;
          }
        }  


		#retrobg-all {
          	position: absolute;
			width: 100%;
			height: 100%;
			opacity: 1; 
			top: 0px;
			bottom: 0px;
        }

		#retrobg-all #fleche{
          position: absolute;  
            opacity: 1; 
			left:30%;
			top:100%; 
			transform: translateX(0px) scale(var(--scale-fleche));
  			animation: fleche-anim 6s 1 linear;
        }
		@keyframes fleche-anim {
		  0% {
			top:100%;
			transform: translateX(0px) scale(var(--scale-fleche));
		  }
		  100% {
			top:-130%;
			transform: translateX(250px) scale(0); 
		  }
		}
		@keyframes fleche-anim-back {
		  0% {
			top:100%;
			transform: translateX(0px) rotate(-60deg) scale(var(--scale-fleche));
		  }
		  100% {
			top:-100%;
			transform: translateX(-250px) rotate(-60deg) scale(0); 
		  }
		}
		#retrobg-all #coeur{
          position: absolute;  
            opacity: 0; 
			left:60%;
			transform: scale(var(--scale-coeur));
  			animation: coeur-anim  6s 1 ease-in-out;
        } 
		@keyframes coeur-anim {
		  0% {
            opacity: 0; 
		  }
		  20% {
            opacity: var(--opacity-coeur);  
		  }
		  80% {
            opacity: var(--opacity-coeur); 
		  }
		  100% { 
            opacity: 0; 
		  }
		}

		#retrobg-all .planeWrapper {
          	position: absolute;
			opacity: 1;
			left:-100px;
			top:100px;
			width: 20px; 
			height: 20px;
		  	animation-fill-mode: forwards;
			offset-path: path("M 0 -93 Q 105 -45 256 -26 Q 344 -16 424 -32 Q 530 -54 662 -51 Q 776 -51 865 -72 Q 940 -88 1019 -70 Q 1104 -53 1236 -70 Q 1437 -103 1661 -84");
			animation: move-wrapper calc(var(--duration-plane) * 4) ease-in-out 1;
        }
		@keyframes move-wrapper {
			0% {offset-distance: 0%;}
			100% {offset-distance: 100%;}
		}
		/*@keyframes move-wrapper {
		  0% {left:-100px;transform: translateY(0px);}
		  20% {transform: translateY(-50px);}
		  30% {transform: translateY(-30px);}
		  40% {transform: translateY(-50px);}
		  60% {transform: translateY(-40px);}
		  80% {transform: translateY(-60px);}
		  100% {left:1450px;transform:  translateY(-100px);}
		}*/

		#retrobg-all .plane {
          position: absolute;  
            opacity: 1; 
			top: 0px;
			right:0px;
			transform: scale(var(--scale-plane));
  			animation: plane-anim calc(var(--duration-plane) + 1s) cubic-bezier(.45,.05,.55,.95) infinite;
  			/*animation: x-axis 6s 1 linear;*/
		}
		@keyframes plane-anim {
		  0% {transform: scale(var(--scale-plane)) translateY(0) rotateX(0) rotateZ(-20deg);}
		  25% {transform: scale(var(--scale-plane)) translateY(-30px) rotateX(40deg) rotateZ(0);}
		  50% {transform: scale(var(--scale-plane)) translateY(0) rotateX(0) rotateZ(20deg);}
		  75% {transform: scale(var(--scale-plane)) translateY(30px) rotateX(-40deg) rotateZ(0);}
		  100% {transform: scale(var(--scale-plane)) translateY(0) rotateX(0) rotateZ(-20deg);}
		} 
		.plane .wingRight {
		  position: absolute;
		  width: 0;
		  height: 0;
		  border-left: 22.5px solid transparent;
		  border-right: 12.5px solid transparent;
		  border-bottom: 115px solid #facfe4;
		  transform: rotate(61deg); 
		  z-index:4;
		}
		.plane .bottom {
		  position: relative;
		  width: 0;
		  height: 0;
		  border-left: 12.5px solid transparent;
		  border-right: 12.5px solid transparent;
		  border-bottom: 25.5px solid #e82e8a;
		  top: 71px;
		  transform: rotate(-5deg);
		  left:-52.5px;
		  z-index:3;
		}
		.plane .top {
		  position:absolute;
		  width: 0;
		  height: 0;
		  border-left: 10px solid transparent;
		  border-right: 10px solid transparent;
		  border-top: 30px solid #f79bc9;
		  top: 65px;
		  transform: rotate(5deg);
		  left:-60px;
		  z-index:1;
		}
		.plane .middle {
		  position: absolute;
		  width: 0;
		  height: 0;
		  border-left: 15px solid transparent;
		  border-right: 15px solid transparent;
		  border-bottom: 135px solid #f79bc9;
		  top: -13.5px;
		  transform: rotate(72deg);
		  left:-7.5px;
		  z-index:2;
		}
		.plane .wingLeft {
		  position: absolute; 
		  width: 0;
		  height: 0;
		  border-left: 25px solid transparent;
		  border-bottom: 135px solid #facfe4;
		  transform: rotate(78deg) skewY(-35deg); 
		  left:-18.5px;
		  z-index:3;
		  top:-30px;
		}

		@keyframes x-axis {
		  0% {
			transform: scale(0.1) translateX(0px);
			opacity:0;
		  }
			
		  5% {
			opacity:1;			  
			} 
		  50% {	
			  transform: scale(0.4) translateX(600px);	  
			} 
		  95% {
			opacity:1;  
		  }
			
		  100% {
			opacity:0;
			transform: scale(0.1) translateX(1200px);
		  }
		}
		@keyframes y-axis {
		  0% {
			transform: translateY(0px);
		  }
		  100% {
			transform: translateY(-150px);
		  }
		}


		#retrobg-verticalLogos {
          	position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0; 
			top: 0;
          animation-timing-function:ease-out;
          animation-iteration-count: 1;
		  animation-delay: 1s; 
    		animation-fill-mode: forwards;
		  animation-duration: 1s;
           animation-name: verticalLogos-anim;  
        }
        @-webkit-keyframes verticalLogos-anim {
			0% {
				top: 35%;
				opacity:0;
			  }    
			50% {
				top: 17%;
				opacity:0;
			  }    

			  100% {
				top: 0%;
				opacity:1;
			  }
		} 
        #retrobg-verticalLogos #verticalLogo {
          position: absolute;  
          opacity: 1;
          animation-timing-function:linear;
          animation-iteration-count: 1;
		  animation-delay: 2s; 
		  animation-duration: 3s;
          animation-name: verticalLogo-anim; 
          /*transition: all  0.5s ease-in-out;*/
          bottom:-40px;
		  right: -115px;
		  transform: scale( var(--scale-logo) );
		  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1));  
        }
		.night #retrobg-verticalLogos #verticalLogo {
         /*animation-name: verticalLogo-night-anim; */
		  filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.5)); 
        }
        @-webkit-keyframes verticalLogo-night-anim {
			0% {
				transform: scale(0.25);
				opacity:1;
				/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);*/
				/*filter: drop-shadow(0 0 0 0 rgba(0, 0, 0, 0.7));*/
				filter: drop-shadow(0 0 transparent); 
			  }  
			  5% {
				transform: scale(0.26); 
				/*box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);*/
				filter: drop-shadow(0 0 transparent);
			  }

			  10% {
				transform: scale(0.25); 
				opacity:1;
				/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/
				filter: drop-shadow(0 0 transparent);
			  } 
			  100% {
				transform: scale(0.25); 
				opacity:1;
				/*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/
				filter: drop-shadow(0 0 transparent);
			  } 
        }  
        @-webkit-keyframes verticalLogo-anim {
			0% {
				opacity:1;
				/*transform: scale(0.25);
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);*/
				/*filter: drop-shadow(0 0 0 0 rgba(0, 0, 0, 0.7));
				filter: drop-shadow(0px 0px 3pxrgba(255, 255, 255, 1)); */
			  }   
			  100% {
				opacity:1;
				/*transform: scale(0.25); 
				box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
				filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1));*/
			  } 
        }  
        #retrobg-verticalLogos #verticalRoundLogo {
          position: absolute;  
          opacity: 1;
          animation-timing-function:ease-in-out;
          animation-iteration-count: infinite;
		  animation-delay: 2s; 
		  animation-duration: 12s;
           animation-name: verticalRoundLogo-anim; 
          /*transition: all  0.5s ease-in-out;*/
          bottom:-90px;
		  right: -10px;
		  transform: scale( var(--scale-logo-round) ) rotate(0deg);
		  filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.7)); 
        }
		.night #retrobg-verticalLogos #verticalRoundLogo {
		  filter: drop-shadow(0px 10px 10px rgba(255, 255, 255, 0.5)); 
		  filter: drop-shadow(none); 
        }
        @-webkit-keyframes verticalRoundLogo-anim {
			0% {
				transform: scale( var(--scale-logo-round) ) rotate(0deg);
				opacity:1;
			  }  
			70% {
				transform: scale( var(--scale-logo-round) ) rotate(200deg); 
			  }

			100% {
				transform: scale( var(--scale-logo-round) ) rotate(360deg); 
				opacity:1;
			  } 
        }  

        #retrobg-lines {
          	position: absolute;
			width: 100%;
			height: 100%;
			opacity: 1;
			transition: all 0.5s ease-in-out;
			top: 0px;
        }
        #retrobg-lines .line {
          	position: absolute;  
          	opacity: 0; 
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            /*animation-name: clouds-anim;*/
          	transition: all  0.5s ease-in-out;
            left:0;
        }
		#retrobg-sky #retrobg-lines .line {
		  	width: 1320px; 
		  	height: 100px; 
		  	mask-image: url('../img/banner/Mask.png'); 
		  	mask-position: -700% center;
		  	mask-repeat: no-repeat;
		  	animation: mask-play-forward 5s linear 1 ; /*cubic-bezier(.5,0,.5,1) alternate*/
		  	animation-fill-mode: both;
		}
		@-webkit-keyframes mask-play {
		  from {
			-webkit-mask-position: -1500% center;
			mask-position: -1500% center;
		  }
		  to {
			-webkit-mask-position: 1500% center;
			mask-position: 1500% center;
		  }
		}
		@-webkit-keyframes mask-play-forward {
		  0% { 
			-webkit-mask-position: -700% center;
			mask-position: -700% center;
		  }
		  1% { 
			-webkit-mask-position: -700% center;
			mask-position: -700% center;
		  }
		  20% { 
			-webkit-mask-position: 50% center;
			mask-position: 50% center;
		  }
		  80% { 
			-webkit-mask-position: 50% center;
			mask-position: 50% center;
		  }
		  99% { 
			-webkit-mask-position: 800% center;
			mask-position: 800% center;
		  }
		  100% { 
			-webkit-mask-position: 800% center;
			mask-position: 800% center;
		  }
		}
		@-webkit-keyframes mask-play-backward {
		  0% { 
			-webkit-mask-position: 800% center;
			mask-position: 800% center;
		  }
		  1% { 
			-webkit-mask-position: 800% center;
			mask-position: 800% center;
		  }
		  20% { 
			-webkit-mask-position: 50% center;
			mask-position: 50% center;
		  }
		  80% { 
			-webkit-mask-position: 50% center;
			mask-position: 50% center;
		  }
		  99% { 
			-webkit-mask-position: -700% center;
			mask-position: -700% center;
		  }
		  100% { 
			-webkit-mask-position: -700% center;
			mask-position: -700% center;
		  }
		}

		/*@keyframes mask-play {
		  from {
			-webkit-mask-position: -1500% center;
			mask-position: -1500% center;
		  }
		  to {
			-webkit-mask-position: 1500% center;
			mask-position: 1500% center;
		  }
		}*/

        /* ............................................................... */ 
        #retrobg-mountains-left {
          left: 0;
          clip-path: polygon(0% 100%, 0% 55%, 5% 60%, 10% 55%, 20% 50%, 25% 42%, 30% 38%, 33% 35%, 40% 45%, 50% 50%, 60% 70%, 70% 85%, 75% 82%, 80% 91%, 85% 90%, 90% 95%, 95% 98%, 100% 100%);
        }

        #retrobg-mountains-right {
          right: 0;
          clip-path: polygon(0% 100%, 5% 95%, 10% 85%, 15% 87%, 20% 80%, 25% 78%, 30% 65%, 40% 70%, 50% 57%, 60% 53%, 67% 68%, 70% 70%, 75% 66%, 80% 55%, 90% 50%, 95% 60%, 100% 57%, 100% 100%);
        }

        /* ............................................................... */

        #retrobg-ground {
            position: absolute;
            overflow: hidden;
            bottom: 80vh;
            width: 100%;
            margin: 0 auto;
            height: 20vh;
            left: 0;
            transform-origin: center left;
          transition: all  0.3s ease-in-out;
        }
 
        /* ............................................................... */
        
        #retrobg-stars {
          position: absolute;
          width: 100%;
          height: 60vh;
          opacity: 0;
          animation: rotate 500s infinite linear;
        }
        .night #retrobg-stars { 
            opacity: 1;
        } 

        .retrobg-star {
          position: absolute;
          border-radius: 50%;
          width: 2px;
          height: 2px;
          background-color: #fff;
          transition: all 2s ease-in-out;
          animation: 6s ease-in-out infinite alternate retrobg-star-glow-anim;
          box-shadow: 0 0 5px 2px rgba(200, 200, 200, 0.4);
        }

        .retrobg-star:nth-child(1n+0) {
            animation-delay: 0.1s;
            opacity: .1;
        }
        .retrobg-star:nth-child(2n+0) {
            animation-delay: 0.2s;
            opacity: .3;
        }
        .retrobg-star:nth-child(3n+0) {
            animation-delay: 0.3s;
            opacity: .5;
        }
        .retrobg-star:nth-child(4n+0) {
            animation-delay: 0.4s;
            opacity: .3;
        }
        .retrobg-star:nth-child(5n+0) {
            animation-delay: 0.5s;
            opacity: .2;
        }
        .retrobg-star:nth-child(6n+0) {
            animation-delay: 0.6s;
            opacity: .4;
        }
        .retrobg-star:nth-child(7n+0) {
            animation-delay: 0.7s;
            opacity: .1;
        }
        .retrobg-star:nth-child(8n+0) {
            animation-delay: 0.8s;
            opacity: .5;
        }
        .retrobg-star:nth-child(9n+0) {
            animation-delay: 0.9s;
            opacity: .4;
        }
        .retrobg-star:nth-child(10n+0) {
            animation-delay: 1.0s;
            opacity: .2;
        }

        @keyframes retrobg-star-glow-anim {
          from {
            box-shadow: 0 0 5px 2px rgba(200, 200, 200, 0.2);
          }
          to {
            box-shadow: 0 0 10px 5px rgba(240, 240, 240, 0.4);
          }
        }
        @keyframes rotate {
          0% {
            -webkit-transform: rotate(0deg);
          }
          100% {
            -webkit-transform: rotate(360deg);
          }
        }  
        #status{
            color:#333;
            background:#FFF;
            padding:10px;
        }   


.connexion-text{
    font-size:14px;
    font-family: 'Oswald', sans-serif;
    color:rgba(0,0,0,.55);
    font-weight: 400;
}


@-webkit-keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}

@keyframes pulsate-btn {
  0% {
    transform: scale(0.6, 0.6);
    opacity: 1;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
  
@media (max-width: 767.98px){
    .section{padding-top:3rem;padding-bottom:3rem}
    .navbar-dark .navbar-nav .nav-link {
      color: rgba(0,0,0,.55);
    }
    .navbar-nav .nav-item:hover a.nav-link,.navbar-nav .nav-item.active a:first-child{
        color:rgba(0,0,0,.95);
    }
    .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
      color: rgba(0,0,0,.75);
    }
    .navbar a:not(.navbar-brand) i {
      color: rgba(0,0,0,.55);
    }
	.block-creator{
		position: relative;
		top: 0;
		right: 0;
		display: block; 
		width: 100%;
		clear: both;
	}
	.offcanvas-btn {   
		top: auto; 
		bottom: 14px; 
	}
	.offcanvas, .offcanvas-end { 
	  width: 100%;
	}
}