main{
    position: relative;
    top: 0;
    margin-top: 0;
}
/* Banner */
main #banner{
    background: url("/Lobeubeu_website/_images/EVENT.png") center; 
    height: 200px;
}
/* Section carousel */
#carouselContainer{
    margin-bottom: 10%;
}
.carousel {
  position: relative;
  top: 100%;
  left: 50%;
  bottom: 100%;
  width: 400px;
  height: 300px;
  margin: 0;
  -webkit-perspective: 800px;
  perspective: 800px;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.carousel-content {
  position: relative;
  top: 65%;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-182px) rotateY(0);
  transform: translateZ(-182px) rotateY(0);
  -webkit-animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
  animation: carousel 10s infinite cubic-bezier(1, 0.015, 0.295, 1.225) forwards;
}
.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 6px;
}
.carousel-item:nth-child(1) {
  background: rgba(252, 192, 77, 0.9);
  -webkit-transform: rotateY(0) translateZ(182px);
  transform: rotateY(0) translateZ(182px);
}
.carousel-item:nth-child(2) {
  background: rgba(49, 192, 204, 0.9);
  -webkit-transform: rotateY(120deg) translateZ(182px);
  transform: rotateY(120deg) translateZ(182px);
}
.carousel-item:nth-child(3) {
  background: rgba(236, 233, 242, 0.9);
  -webkit-transform: rotateY(240deg) translateZ(182px);
  transform: rotateY(240deg) translateZ(182px);
}
@-webkit-keyframes 
    carousel {  0%, 17.5% {
    -webkit-transform: translateZ(-182px) rotateY(0);
    transform: translateZ(-182px) rotateY(0);
    }
    27.5%, 45% {
    -webkit-transform: translateZ(-182px) rotateY(-120deg);
    transform: translateZ(-182px) rotateY(-120deg);
    }
    55%, 72.5% {
    -webkit-transform: translateZ(-182px) rotateY(-240deg);
    transform: translateZ(-182px) rotateY(-240deg);
    }
    82.5%, 100% {
    -webkit-transform: translateZ(-182px) rotateY(-360deg);
    transform: translateZ(-182px) rotateY(-360deg);
    }
}
 @keyframes 
    carousel {  0%, 17.5% {
    -webkit-transform: translateZ(-182px) rotateY(0);
    transform: translateZ(-182px) rotateY(0);
    }
    27.5%, 45% {
    -webkit-transform: translateZ(-182px) rotateY(-120deg);
    transform: translateZ(-182px) rotateY(-120deg);
    }
    55%, 72.5% {
    -webkit-transform: translateZ(-182px) rotateY(-240deg);
    transform: translateZ(-182px) rotateY(-240deg);
    }
    82.5%, 100% {
    -webkit-transform: translateZ(-182px) rotateY(-360deg);
    transform: translateZ(-182px) rotateY(-360deg);
    }
}
/* Section services */
main #services{
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(350px,1fr));
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    max-width: fit-content;
    margin: auto;
}
/* sections intro services */
body .intro{
    display: flex;
    flex-direction: column;
    padding: 1rem;
    justify-items: center;
    align-items: center;
}
body .intro h1{
    flex-shrink: 0;
    color: var(--matisse);
}
body .intro p{
    text-align: justify;
}
body .intro p .ctaWords{
    color: var(--matisse);
    font-size: bold;
}
/* Sections video from about.php */
body .events{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    align-items: center;
    margin: auto;

}
body .events video{
    height: auto;
    width: 100%;
}
body .events .banDj{
    background: url('./../../_images/bannerdj.jpg') center;
    background-size: cover ;
    width: 100%;
    height: 100%;

}
/* Section services */
main #services .card{
    background-color: var(--valentino);
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 1fr auto auto;
    margin: 10px;
    padding: 10px;
}
main #services .card figure{
    grid-column: 1/-1;
    grid-row: 1/2;
}
main #services .card figure h1{
    font-size: 1em;
    color: var(--lilac)
}
main #services .card .body{
    grid-column: 1/-1;
    grid-row: 2/3;
}
main #services .card button{
    grid-column: 2/-1;
    height: 35px;
    background-color: var(--lilac);
    color: white;
    border: none;
    border-radius: 5px;
}
main #services .card button:hover{
    background-color: var(--valentino);
    transition: 0.30s ease-in-out;
    border: 1px solid white;
}
/* Style for about.php page */
.AboutBanner{
    background: url(../../_images/aboutBanner.jpg) top;
    width: 100%;
    height: 300px;
    background-size: cover;
}
/* Style for contact.php page */
.contactBanner{
    background-image: url(../../_images/contactBanner.jpg);
    width: 100%;
    height: 250px;
    background-size: cover;
}
@media screen and (min-width:700px) {
    body .intro{
        display: flex;
        flex-direction: row;
        padding:0 3rem 0 3rem;
        justify-content: center;
    }
    body .intro p{
        max-width: 800px;
        margin-left: 50px;
        border-left: 5px solid var(--matisse);
        padding-left: 2em;
    }
    body .intro.revers{
        flex-direction: row-reverse;
    }
    body .intro.revers p {
        border-left: none;
        border-right: 5px solid var(--matisse) ;
        padding-right: 2em;
        padding-left: 0;
    }
    body .intro.revers h1{
        padding-left: 2rem;
    }
    body .events{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: auto;
    }
    body .events video{
        height: 100%;
        width: 100%;
    }
    /* Section carousel */
    #carouselContainer{
        margin-top: 0;
        margin-bottom: 15%;
    }
    .carousel{
        width: 650px;
        -webkit-perspective: 800px;
        perspective: 800px;
    }

    /* Style for about.php page */
    .AboutBanner{      
        height: 400px;
    }
    /* Style for contact.php page */
    .contactBanner{
        background-position: top;
        height: 500px;
    }
}
@media screen and (min-width:1500px) {
    /* Section services */
    main{
        font-size: 1.2rem;
    }
    main #services{
        display: flex;
        /*grid-template-columns: repeat(auto-fill,minmax(350px,1fr));*/
        /*max-width: 1200px;*/
        /*margin: auto;*/
    }
    body .intro{
        margin-bottom: 2rem;
    }
    body .intro p{
        max-width: 1200px;
    }
}