@-webkit-keyframes showwindow {
  0% {
    object-position: top;
  }
  50% {
    object-position: bottom;
  }
  100% {
    object-position: top;
  }
}
html {
  scroll-behavior: smooth;
}

@keyframes showwindow {
  0% {
    -o-object-position: top;
       object-position: top;
  }
  50% {
    -o-object-position: bottom;
       object-position: bottom;
  }
  100% {
    -o-object-position: top;
       object-position: top;
  }
}

.dot-effect {
  position: relative;
  display: inline-block;
  z-index: 10;
}

.dot-effect::before {
  content: "";
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dot" viewBox="0 0 16 16"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>');
  background-position: 0% 0%;
  position: absolute;
  z-index: -1;
  opacity: 0.2;
  top: 40px;
  right: 40px;
  height: 100%;
  width: 100%;
}

h1.magenta {
  /* magneta */
  color: $FF00FF;
}


h2.dot-effect {
  position: relative;
  display: inline-block;
  z-index: 10;
}

h2.dot-effect::before {
  content: "";
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dot" viewBox="0 0 16 16"><path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/></svg>');
  background-position: top;
  position: absolute;
  z-index: -1;
  opacity: 0.2;
  top: 20px;
  right: 20px;
  height: 80%;
  width: 100%;
}

.carousel .carousel-item {
  /* position: relative;
  z-index: 15; */
  background-size: cover;
}

.carousel .carousel-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 16;
  /* background-color: rgba(0, 0, 0, 0.3); */
}

.carousel * {
  z-index: 17;
}

.carousel-item h1 {
    margin: 0;
    vertical-align: middle;
}

/* CAROUSEL 2 */
/* Image pleine page */
/* @media screen and (orientation: landscape)
{
  .carousel img {
    height: 100vh;
    }
}
*/

.img-cover {
  -o-object-fit: cover;
     object-fit: cover;
  height: 250px;
}

.card img.card-img-top {
  -o-object-fit: cover;
     object-fit: cover;
  height: 400px;
  -o-object-position: top;
     object-position: top;
}

.card img.card-img-top:hover {
  -webkit-animation: showwindow 3s infinite;
          animation: showwindow 3s infinite;
}

.card img.card-img-top:hover.mobile-view {
  -webkit-animation: showwindow 12s infinite;
          animation: showwindow 12s infinite;
}


/* RDV */

#rdv

{
    padding: 60px 0;
    /* text-align: center */
}


/* TITRE SECTION */
#theatre, #contact, #affiche-theatre, #puzzle
{
    padding: 60px 0;
    text-align: center
}

#accueil h2, #activites h2, #planning h2, #calendrier h2, #theatre h2, #rdv h2, #puzzle h2, #contact h2
{
    /*width: 400px;*/
    /*text-transform: uppercase;*/
    margin: 0  auto 10px  auto;
    border-bottom:  1px solid #02b8dd;
    padding-bottom: 20px;
    color: #333399;
    font-family: 'Tahoma','sans-serif';
    font-weight: bold;
}

/* OCTOBRE */

#octobrerose
{
    padding: 60px 0;
    text-align: center;
    background-color: #F5D2E6
}

#octobrerose h1
{
    margin: 0  auto 10px  auto;
    border-bottom:  1px solid #ff00ff;
    padding-bottom: 20px;
    color: #ff00ff;
    font-family: 'Tahoma','sans-serif';
    font-weight: bold;
}
#octobrerose h4
{
    color: #ff00ff;
    font-family: 'Tahoma','sans-serif';
}


/* CONTACT */

#contact h3, #theatre h3, #puzzles h3
{
    /*width: 400px;*/
    /*text-transform: uppercase;*/
    margin: 0  auto 10px  auto;
    border-bottom:  1px solid #02b8dd;
    padding-bottom: 20px;
    color: #333399;
    font-family: 'Tahoma','sans-serif';
    font-weight: bold;
}
form
{
    margin: 60px 0 16px 0;
}
label
{
    font-weight: bold;
    font-size: 16px;
    margin-right: 10px;
    color: #777;
}
input[type="text"]
{
    padding:10px;
    font-size: 16px;
    margin-right: 20px;
    border: 2px solid #ddd;
    border-radius: 3px;
}
.button-3
{
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    padding: 11px;
    background-color: #02b8dd;
    border-style: none;
    border-radius: 3px;
}
.button-3:hover
{
    color: #fff;
    background-color: #444;
}