/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 2 déc. 2018, 14:52:49
    Author     : Admin
*/

.testimonial-slider {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 100px;
    color: #333;
    margin-bottom: 9%;
}

.testimonial-slider ul.slider-tes {
   display: block;
   list-style: none;
   padding: 0;
   position: relative;
   display: inline-block;
   width: 100%;
   height: 350px;
   overflow: hidden;
   margin: 0 auto;
      color: #333 ;

}

.testimonial-slider ul.slider-tes li {
    position: absolute;
    display: block;
    width: 100%;
    opacity: 0;
    margin: 0 auto;
       color: #333 ;

}
.testimonial-slider ul.slider-tes li:nth-child(1) {
    opacity: 1;

    -webkit-animation: fade-animation-1 25s infinite;
            animation: fade-animation-1 25s infinite;
}
.testimonial-slider ul.slider-tes li:nth-child(2) {
    -webkit-animation: fade-animation-2 25s infinite;
            animation: fade-animation-2 25s infinite;
}
.testimonial-slider ul.slider-tes li:nth-child(3) {
    -webkit-animation: fade-animation-3 25s infinite;
            animation: fade-animation-3 25s infinite;
}


.testimonial-slider q {
    display: inline-block;
    letter-spacing: .5pt;
    text-shadow: 0 5px 10px rgba(0,0,0,.1);
    /* max-width: 35ch; */
    font-size: 140%;
    width: 71%;
    text-align: center;
}
.testimonial-slider-content {
    text-align: center;
}
.testimonial-slider .source {
    margin-top: 25px;
    color: #d9e0f9;
    font: italic 400 30px / 1.35 "Raleway", Helvetica, Arial, Verdana, sans-serif;
}

/* KEYFRAME DECLARATIONS */
@keyframes fade-animation-1 {
    0%, 25%, 100% {
        opacity:0
    }
    3%, 22% {
        opacity: 1;
    }
}
@keyframes fade-animation-2 {
    0%, 25%, 50%, 100% {
        opacity:0
    }
    28%, 47% {
        opacity: 1;
    }
}
@keyframes fade-animation-3 {
    0%, 100%, 50%, 100% {
        opacity:0
    }
    53%, 100% {
        opacity: 1;
    }
}


@-webkit-keyframes fade-animation-1 {
    0%, 25%, 100% {
        opacity:0
    }
    3%, 22% {
        opacity: 1;
    }
}
@-webkit-keyframes fade-animation-2 {
    0%, 25%, 50%, 100% {
        opacity:0
    }
    28%, 47% {
        opacity: 1;
    }
}
@-webkit-keyframes fade-animation-3 {
    0%, 50%, 75%, 100% {
        opacity:0
    }
    53%, 72% {
        opacity: 1;
    }
}



.none{
    display: none;
}
























* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/********* bebas *******/

p.title {
    font-size: 261%;
    text-align: center;
}

/********** body ***********/

body, .categories a {
    color: #fff;
    font-size: 0.875rem;
    text-transform: none;
    font-family: 'Abel', sans-serif;

}

/********** header **********/

header {
    align-items: flex-start;
    background-image: url("../img/fond-header.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
    padding: 1rem;
    position: fixed;
    width: 12.5rem;
}

/**** menu ****/

.menu, label.burger {
    display: none;
}



header a, .adresse {
    font-size: 1.125rem;
}

header li {
    display: block;
    list-style: none;
    margin-bottom: 1rem;
}

/**** sous menu ****/

header li ul {
    margin-top: 1rem;
}

header li ul a {
    font-size: 1rem;
}

header li ul li {
    list-style: initial;
    margin-left: 1rem;
}

/**** address ****/

header address {
    font-style: normal;
    font-size: 0.875rem;
    margin-top: 1rem;
}

.adresse {
    text-align: center;
}

/**** reaseaux sociaux ****/

.reseaux-sociaux {
    padding: 0 2rem;
    width: 100%;
}



/************** footer *************/

footer.row {
    background-color: rgba(179, 179, 26, 0.9);
    justify-content: center;
    padding: 1rem;
    /* position: fixed; */
    width: 100%;
    bottom: 0%;
    /* top: auto; */
    /* opacity: 1.1; */
}

footer a {
    font-size: 1rem;
    margin-left: 2rem;
}

/********* lien ********/

a, .bouton-form {
    color: #fff;
    font-size: 1.125rem;
    text-decoration: none;
    transition: 0.5s color ease;
}
a:hover, .texte-bleu, .texte-bleu a {
    color: #2c8399;
}

.texte-bleu a:hover {
    color: #fff;
}

/**** bouton ****/


/********** titre *******/

h1, h2, h3, h4, h5, h6, .title, .title-event, .next-event,.gros-title {
    font-size: 1.250rem;
    font-weight: normal;
}

/********** mise en page *************/

/**** row ****/

.row {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    margin-right: auto;
    max-width: 100%;
}

/**** row row ****/

.row .row {
    margin: 0;
}

/**** flex ****/

.block-categorie a, .text, .events figure, .localisation, .contact form, .bouton-envoyer {
    display: flex;
    flex-wrap: wrap;
}

.events.row, .contact form, .block-categorie a, a .text, .categories, .call-to-action.row, .contact.row {
    align-items: flex-start;
    justify-content: center;
}

figure.row {
    align-items: flex-end;
}

.bouton-envoyer {
    justify-content: flex-end;
}

/**** titres ****/

.title-event, .call-to-action h1, a h3, .events p, .contact .title, .telephone {
    width: 100%;
    text-align: center;
}

/**** largeur ****/

.large-1 {
    max-width: 8.333%;
    width: 8.333%;
}
.large-2 {
    max-width: 16.666%;
    width: 16.666%;
}
.large-3 {
    max-width: 25%;
    width: 25%;
}
.large-4 {
    max-width: 33.333%;
    width: 33.333%;
}
.large-5 {
    max-width: 41.666%;
    width: 41.666%;
}
.large-6 {
    max-width: 50%;
    width: 50%;
}
.large-7 {
    max-width: 58.333%;
    width: 58.333%;
}
.large-8 {
    max-width: 66.666%;
    width: 66.666%;
}
.large-9 {
    max-width: 75%;
    width: 75%;
}
.large-10 {
    max-width: 83.333%;
    width: 83.333%;
}
.large-11 {
    max-width: 91.666%;
    width: 91.666%;
}
.large-12 {
    max-width: 100%;
    width: 100%;
}

/********** slider *********/

.slider {
    background-image: url("7 (1).png");
    background-repeat: no-repeat;
    background-size: cover;
}

/********** categories **********/

.categories {
    text-align: justify;
}

/**** img ****/

.categories img {
    height: 100%;
    width: 100%;
    max-height: 260px;
    max-width: 260px;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.categories img:hover {
 
    filter: none;
}
/**** transition ****/

.text {
    transition: 0.5s opacity ease;
}
.text {
    opacity: 0;
    padding: 1rem;
}
.block-categorie h3 {
    letter-spacing: 3px;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    font-size: 221%;
    font-weight: bold;
}
.disco:hover .text, .terrasse:hover .text, .restaurant:hover .text, .club:hover .text{
    opacity: 1;
}

.disco, .terrasse, .restaurant, .club {
    transition: 0.5s background-color ease;
}

.disco:hover {
    background-color: rgba(8,124,217,0.50);
}
.terrasse:hover {
    background-color: rgba(173,76,35,0.50);
}
.restaurant:hover {
    background-color: rgba(254,66,160,0.50);
}
.club:hover {
    background-color: rgba(235,58,17,0.50);
}

.block-categorie a:hover {
    color: #fff;
}

/**** block ****/

.block-categorie {
    padding-top: 1rem;
    margin-left: 1rem;
    text-align: center;
}

/****************** call-to-action **************/

.call-to-action {
    padding: 1% 1% 1% 1%;
    width: 100%;
}

.call-to-action h1 {
    padding-bottom: 1rem;
    padding-top: 4px;
    font-size: 221%;
}
call-to-action .title {
    /* border-bottom: 1px #fff solid; */
    font-size: 151%;
    /* letter-spacing: 4px; */
    text-align: center;

}
/********************* events ***************/

.events {
    padding-top: 2rem;
    padding-bottom: 8rem;
}

.fond-imager {
    background-image: url("../img/fond-evenement-nautilus-club-discotheque.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}

.non-affiche {
    display: none;
}

.oui-affiche {
    display: block;
    position: fixed;
    background-color: #fff;
    padding: 2rem;
    top: 50%;
    left: 50%;
    width: initial;
    transform: translate(-50%,-50%);
    z-index: 12;
}

.oui-affiche img{
    height: 100%;
    width: 100%;
}

/**** titre ****/

.title-event {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/**** figure ****/

.next-event {
    color: #2c8399;
    font-size: 3rem;
    padding-top: 1rem;
}
img.next-event {
    transition: 0.5s box-shadow ease;
}
img.next-event:hover {
    box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, .2);
}

.events img {
    padding-top: 1rem;
    margin-left: 1rem;
}

.events figure {
    padding-top: 2rem;
}

/****** transition ******/

.soon-event {
    opacity: 0.40;
    transition: 0.5s opacity;
}

.soon-event:hover {
    opacity: 1;
}
/**** p ****/

.events p {
    margin-bottom: 0.5rem;
}

/************* contact **********/

.contact {
    background-color: #333;
}

/**** form ****/

.contact form, .localisation {
    padding: 2rem;
}

form p, .localisation .title {
    padding-bottom: 1rem;
    max-width: 35.5rem;
    text-align: center;
}
.contact input, .contact textarea {
    margin-bottom: 1rem;
}

.contact textarea {
    width: 100%;
    max-width: 35.5rem;
}

.message {
    display: block;
}

.contact input {
    padding: 0.5rem;
    max-width: 9rem;
}

.contact textarea {
    height: 9rem;
    padding: 1rem;
}

.contact .bouton-form {
  width: 6rem;
}

.etoile {
    color: #d44739;
}

/**** list ****/

form li {
    list-style: none;
}

/************ hidden *********/ 

.hidden {
    display: none;
}

/************* autres **********/

.bold {
    font-weight: bold;
}
.texte-rouge {
    color: #ff0033;
    padding: 0;
}
.text-center {
    text-align: center;
}
.merci {
    padding: 4rem 0;
}



/******************************** media ******************/

@media all and (max-width: 1024px) and (min-width: 681px) {
    
    /*********** categorie **********/
    .slider {
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
p.title {
    font-size: 261%;
    text-align: center;
}
    .block-categorie h3 {
        letter-spacing: 0;
    }
    
    .categories img {
        height: 70%;
        width: 70%;
    }
        .none{
        display: block;
        text-align: center;
    }
    .none2{
        display: none;
    }
footer.row {
    background-color: rgba(179, 179, 26, 0.9);
    justify-content: center;
    padding: 1rem;
    position: fixed;
    width: 100%;
    bottom: 0%;
    /* top: auto; */
    /* opacity: 1.1; */
    max-height: 119px;
}
    img.tel {
    width: 48%;
    text-align: center;
    }
    .testimonial-slider q {
    display: inline-block;
    letter-spacing: .5pt;
    text-shadow: 0 5px 10px rgba(0,0,0,.1);
    /* max-width: 35ch; */
    font-size: 116%;
    width: 71%;
    text-align: center;
}
    /********* hidden *********/
    
    .medium-hidden {
    }
    
    /********** largeur *******/
    
    .medium-1 {
        max-width: 8.333%;
        width: 8.333%;
    }
    .medium-2 {
        max-width: 16.666%;
        width: 16.666%;
    }
    .medium-3 {
        max-width: 25%;
        width: 25%;
    }
    .medium-4 {
        max-width: 33.333%;
        width: 33.333%;
    }
    .medium-5 {
    max-width: 16.666%;
    width: 16.666%;
    }
    .medium-6 {
        max-width: 50%;
        width: 50%;
    }
    .medium-7 {
        max-width: 58.333%;
        width: 58.333%;
    }
    .medium-8 {
        max-width: 66.666%;
        width: 66.666%;
    }
    .medium-9 {
        max-width: 75%;
        width: 75%;
    }
    .medium-10 {
        max-width: 83.333%;
        width: 83.333%;
    }
    .medium-11 {
        max-width: 91.666%;
        width: 91.666%;
    }
    .medium-12 {
        max-width: 100%;
        width: 100%;
    }
}

@media all and (max-width: 680px) {
    
    /******** header **********/
    
    header {
        height: auto;
        width: 100%;
        position: static;
    }
    
    /**** menu *****/
    
    label.burger {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        z-index: 12;
    }
    
    input.menu:checked ~ nav {
        display: flex;
    }
    
    header nav {
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 1rem;
        width: 100%;
    }
    
    /**** addresse ****/
    
    .adresse, .adresse .bouton-haut {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 1rem 0;
        width: 100%;
    }
    
    .adresse .bouton-haut {
        padding: 0;
    }
    
    .adresse {
        text-align: center;
    }
    
    .adresse .bouton {
        max-width: 8rem;
        min-width: 8rem;
    }
     footer.row {
    background-color: rgba(179, 179, 26, 0.9);
    justify-content: center;
    padding: 1rem;
     position: fixed; 
    width: 100%;
    bottom: 0%;
    /* top: auto; */
    /* opacity: 1.1; */
}
    /******** footer *********/
    
    footer a {
        display: block;
        margin-left: 1rem;
        margin-bottom: 1rem;
        padding: 1rem 1rem 0 1rem;
        text-align: center;
    }
    
    
    /********* row ***********/
    
    .row {
        margin: 0;
    }
    /******** hidden ********/
    
    .small-hidden {
    }
    .row.call-to-action.small-hidden {
        width: 94%;
        text-align: center;
        font-size: 101%;
        margin-left: 10px !important;
    }
    .small-like {
        display: block;
    }
    p.title {
    font-size: 177%;
    text-align: center;
    }
    /********* form *********/
    
    .contact input {
        padding: 0.5rem;
        max-width: 100%;
    }
    .call-to-action h1 {
        padding-bottom: 1rem;
        padding-top: 54px;
        font-size: 163%;
    }
    img.tel {
    width: 100%;
    margin-top: 0%;
    } 
    /******* largeur *******/
    
    .small-1 {
        max-width: 8.333%;
        width: 8.333%;
    }
    .small-2 {
        max-width: 16.666%;
        width: 16.666%;
    }
    .small-3 {
        max-width: 25%;
        width: 25%;
    }
    .small-4 {
        max-width: 33.333%;
        width: 33.333%;
    }
    .small-5 {
        max-width: 41.666%;
        width: 41.666%;
    }
    .small-6 {
        max-width: 50%;
        width: 50%;
    }
    .small-7 {
        max-width: 58.333%;
        width: 58.333%;
    }
    .small-8 {
        max-width: 66.666%;
        width: 66.666%;
    }
    .small-9 {
        max-width: 75%;
        width: 75%;
    }
    .small-10 {
        max-width: 83.333%;
        width: 83.333%;
    }
    .small-11 {
        max-width: 91.666%;
        width: 91.666%;
    }
    .small-12 {
        max-width: 100%;
        width: 76%;
    }
    .testimonial-slider {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 100px;
    color: #333;
    padding-bottom: 36%;
}
.testimonial-slider q {
    display: inline-block;
    letter-spacing: .5pt;
    text-shadow: 0 5px 10px rgba(0,0,0,.1);
    /* max-width: 35ch; */
    font-size: 98%;
    width: 90%;
    text-align: center;
    
}

    .none{
        display: block;
    }
    .none2{
        display: none;
    }
    .none{
    .footer2 {
    display: none;
    width: 100%;
    color: white;
    margin-top: -42% !important;
    background-color: #333;
    text-align: center;
    display: block;
    }
footer.row {
    background-color: rgba(179, 179, 26, 0.9);
    justify-content: center;
    padding: 1rem;
     position: fixed; 
    width: 100%;
    bottom: 0%;
    /* top: auto; */
    /* opacity: 1.1; */
}
}
.img_tesi {
    margin-bottom: 2%;
}
.footer2{
    display: none;
    width: 100%;
    color: white;
    margin-top: -35%;
    background-color: #333;
    text-align: center;
    display: block;
}


@media all and (max-width: 680px) {

    .footer2 {
    display: none;
    width: 100%;
    color: white;
    margin-top: -42% !important;
    background-color: #333;
    text-align: center;
    display: block;
    }
}