.right-span {
    float: right !important;
    margin-right: 11px;
}

.hidden {
  display: none;
}

.cus-image-container {
    position: relative;
    display: inline-block;
}

.cus-image-container img {
    display: block;
    width: 100%;
    height: auto;
}

.cus-overlay-text {
  position: relative;
  top: 50%;
  left: 83%;
    border-radius: 50%;
    padding-bottom: 50%;
    width: 30vw;
    height: 30vw;
    transform: translate(-50%, -110%);
    background-color: rgba(106, 172, 110, 0.5);
    color: #fff;
    padding: 4.2% 0.25%;
    font-size: 2rem;
    text-align: center;
}

@media all and (max-width: 399px)  {  
  .cus-overlay-text  { 
    padding: 1.5% 0.25%;
  } 
  .cus-overlay-text h4  { 
    font-size: 0.25em;  
    line-height: 7px;
  } 
}
@media all and (min-width: 400px)  {  
  .cus-overlay-text  { 
    padding: 5.5% 0.25%;
  } 
  .cus-overlay-text h4  { 
    font-size: 0.4em;  
    line-height: 7px;
  }
}
@media all and (min-width: 500px)  { 
  .cus-overlay-text  { 
    padding: 5.5% 0.5%;
  } 
  .cus-overlay-text h4  { 
    font-size: 0.5em;  
    line-height: 9px;
  } 
}
@media all and (min-width: 600px)  { 
  .cus-overlay-text  { 
    padding: 5.5% 0.8%;
  } 
  .cus-overlay-text h4  { 
    font-size: 0.6em;  
    line-height: 11px;
  } 
}
@media all and (min-width: 700px)  { 
  .cus-overlay-text  { 
    padding: 7.5% 0.8%;
  } 
  .cus-overlay-text h4  { 
    font-size: 0.7em;  
    line-height: 13px;
  } 
}

@media all and (min-width: 900px)  { 
  .cus-overlay-text  { 
    padding: 9% 1%;
  } 
  .cus-overlay-text h4  { 
    font-size: 0.8em;  
    line-height: 15px;
  } 
}

@media all and (min-width: 1000px) { 
  .cus-overlay-text  { 
    padding: 7% 1%;
  } 
  .cus-overlay-text h4  { 
    font-size: 1em;  
    line-height: 19px;
  } 
}
@media all and (min-width: 1200px) { 
  .cus-overlay-text  { 
    padding: 8% 1%;
  } 
  .cus-overlay-text h4  { 
    font-size: 1.25em;  
    line-height: 22px;
  } 
}
@media all and (min-width: 1300px) { 
  .cus-overlay-text h4  { 
    line-height: 25px;
  } 
}
@media all and (min-width: 1400px) { 
  .cus-overlay-text h4  {  
    line-height: 27px;
  } 
}
@media all and (min-width: 1500px) { 
  .cus-overlay-text h4  {  
    line-height: 30px;
  } 
}

@media all and (min-width: 1700px) { 
  .cus-overlay-text h4  { 
    font-size: 1.7em;  
    line-height: 38px;
  } 
}

@media all and (min-width: 1700px) { 
  .cus-overlay-text h4  { 
    font-size: 2em;  
    line-height: 48px;
  } 
}

.cus-overlay-text a {
    color: #fff;
    top: 25%;
    position: relative;
}

.cus-bn {
    border: 2px solid black;
    background-color: white;
    color: black;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
}

.cus-warning {
  border-color: #ff9800;
  color: orange;
}

.cus-warning:hover {
  background: #ff9800;
  color: white;
}

/** Pense Bête **/

.pense-bete ul, .pense-bete li{
  list-style:none; /*Suppression des puces de la liste */
}
.pense-bete ul{
  display: flex; /* Flex pour la mise en place des éléments */
  flex-wrap: wrap; 
  justify-content: center;
}
.pense-bete ul li a{
  text-decoration:none; /* Suppression du surlignage sur les liens */
  color:#000; /* Couleur des textes */
  background:#ffc; /*Couleur jaune */
  display:block;
  height:10em; /* Hauteur d'une note */
  width:10em; /* Largeur d'une note */
  padding:1em; 
}
.pense-bete ul li{
  margin:1em;
}

.pense-bete h2 {
  font-weight: 700;
  font-size: 2rem;
}
.pense-bete p {
  font-size: 1.5rem;
}

.pense-bete ul li a{
  transform: rotate(-6deg);
}

.pense-bete ul li:nth-child(even) a{
  transform:rotate(4deg); /* Inclinaison de 5° vers la droite */
  position:relative;
  top:7px;
}
.pense-bete ul li:nth-child(3n) a{
  transform:rotate(-4deg); /* Inclinaison de 4° vers la gauche */
  position:relative;
  top:-3px;
}
.pense-bete ul li:nth-child(5n) a{
  transform:rotate(3deg); /* Inclinaison de 3° vers la droite */
  position:relative;
  top:-10px;
}

.pense-bete ul li a:hover, .pense-bete ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7); /* Assombrissement et agrandissement de l'ombre portée */
  transform: scale(1.25); /* Agrandissement de 25% */
  position:relative;
  z-index:5; /* Pour que la note survolée s'affiche au dessus des autres notes */ 
}

.pense-bete ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:15em;
  width:15em;
  padding:1em;
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  transition: transform .15s linear; /* On applique une transformation progressive pendant un quart de seconde à l'élément */ 
}

.pense-bete ul li:nth-child(even) a{
  position:relative;
  top:7px;
  background:#cfc; /* Couleur verte */
}
.pense-bete ul li:nth-child(3n) a{
  position:relative;
  top:-5px;
  background:#ccf; /* Couleur mauve */
}

/** End Pense Bête **/

/** Circles Slider **/

.container-circles {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
  top: 50%;
  left: 83%;
  transform: translate(-32%, -50%);
  position: absolute;
  width: 32vw;
  height: 30vw;
  margin-left: -10%;
  z-index: 1;
}

.big-circle {
  position: relative;
  width: 95%;
  height: 100%;
  border-radius: 50%;
  background-color: #7cc51a;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  padding: 20px;
}

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

.small-circle, .small-circle2, .small-circle3 {
  width: 25%;
  height: 25%;
  border-radius: 50%;
  background-color: #fefefe;
  margin: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.small-circle2, .small-circle3, .small-circle {
  position: absolute;
}

.small-circle2 {
  top: 67%;
  left: 19%;
}

.small-circle3 {
  top: 8%;
  left: 20%;
}

.big-circle-right {
  width: 97%;
  height: 65%;
  border-radius: 50%;
  background-color: #fefefe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translate(7%, 1%);
}
.big-circle-right .text-box {
  /* font-size: 100%;
  padding: 3%; */
  text-align: center;
  width: 50%;
  border: 1px solid #fff;
  color: #337ab7;
  font-weight: bold;
  margin: 5px 0;
  border-radius: 5px;
}

@media all and (min-width: 1090px)  { 
  .big-circle-right .text-box {
    font-size: 180%;
    width: 65%;
    padding: 2%;
  }
}

@media all and (min-width: 835px) and (max-width: 1090px)  { 
  .big-circle-right .text-box {
    font-size: 100%;
    padding: 3%;
    width: 50%;
  } 
}

@media all and (min-width: 745px) and (max-width: 835px)  { 
  .big-circle-right .text-box {
    font-size: 80%;
    padding: 2%;
    width: 45%;
  } 
}

@media all and (min-width: 654px) and (max-width: 745px)  { 
  .big-circle-right .text-box {
    font-size: 60%;
    width: 40%;
  } 
}

@media all and (max-width: 654px)  { 
  .small-circles {
    display: none;
  }

  .big-circle {
    position: relative;
    transform: translate(5%, -10%);
    width: 80%;
    height: 85%;
    border-radius: 50%;
    background-color: #7cc51a;
    display: flex;
    align-items: center;
  }

  .big-circle-right {
    width: 110%;
    height: 110%;
    position: absolute;
    border-radius: 50%;
    background-color: #fefefe;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translate(-18%, 0%);
  }
}

@media all and (max-width: 435px)  {
  .big-circle {
    transform: translate(5%, -25%);
  }
  .big-circle-right .text-box {
    font-size: xx-small;
  }
}

@media all and (max-width: 365px)  {
  .big-circle-right .text-box {
    font-size: xx-small;
  }
}

.hd-1 {
  display: inline-block;
}

@media all and (max-width: 632px)  {
  li.hd-1 {
    display: none;
  }
}


/** End Circles Slider **/

.cs-top-bar .lang-top.aligne {
  position: absolute;
  right: 0;
}

/* right side menu */
/* Custom CSS for the sidebar */
.container-fluid {
  padding: 0;
}

.col-md-9 {
  padding: 0;
}

.col-md-3 {
  padding: 0;
}

.card {
  width: 100%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px;
}

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.card-body {
  padding: 2px 16px;
}

/* Customize editor font */
#art-p.cs-text p {
  font-weight: 500;
}

#art-p.cs-text strong {
  display: unset;
  font-size: inherit;
  color: inherit;
  margin-bottom: inherit;
  font-style: normal;
  font-weight: bold;
}

.fc-scroller {
  overflow-y: hidden !important;
}

/* Hide scrollbar for IE, Edge and Firefox */
.fc-scroller::-webkit-scrollbar {
  display: none !important;
}

.fc-scroller {
  -ms-overflow-style: none !important; /* IE and Edge */
  scrollbar-width: none !important; /* Firefox */
}

/* Datatable style update */
.v2 div.row.mt-2.justify-content-between {
  margin: 8px -2px 0 -2px;
}

.v2 div.dt-length, .v2 div.dt-search {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 2%;
  align-items: center;
}

.v2 div.col-md-auto.ms-auto {
  float: right;
  padding-right: 1%;
}

ul.cs-widget-event.v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5%;
}

@media all and (max-width: 600px)  {
  ul.cs-widget-event.v2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5%;
  }
}

@media all and (max-width: 375px)  {
  ul.cs-widget-event.v2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
}

.custom-joinus {
  color: white;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  align-items: center;
  display: flex !important;
  margin-top: 8%;
}