/* Global elements 
    */
    
    html{
        /* width:100vw; */
        width: auto;
        
    };
    

    @media all and (max-width:768px){
        .row.card{
            margin-top: 50px;
        };
    };


     
   
    @media all and (max-width:440px){
        .row.card{
            margin-top: 70px;
        };
    };

    .container{
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        
    };

    /*Non Reconnu*/
    /*
    row {
        display:-webkit-box;
    }
    */
    
    /*1 - Titles*/
    h1{
        margin: 1em;
    }
    
    /* 2- Elements */
    /* A - Buttons*/
    /* B - Textes*/
    .justifyTexte *{text-align: justify !important;}
    .card-body{position: relative;}
    .card-body iframe{width:100% !important; height:100% !important; }
    /* */
    iframe {height:400px !important}
    /* */
    
    header {
        /* background-color: lightsteelblue !important; */
        background-color: #BEB6B0 !important;
        font-size: 26px!important;
        margin-bottom: 20px!important;
        padding: 15px 0!important;
    }
    
    /*Couleurs
    Gris clair : gainsboro : rgb (220, 220, 220)
    Gris (side bar) : #BEB6B0;
    Gris foncé (fond bouton):  #707070;
    Gris texte : bootstrap text-dark (out ext-body ?) ou #222222
    Vert (fond bouton) : #009688
    Fushia (fond bouton) : #E51881;
    Bleu clair (fond bouton) : #3C93D5;
    Bleu foncé : Navy : 044B76;
    */
    
    .palegrey {
        background-color: gainsboro;
    }
    
    .grayside {
        background-color:#BEB6B0;
    }
    .strongGray {
        background-color: #707070;
    }
    
    .greenMorning {
        background-color: #009688;
    }
    
    .fushia {
        background-color: #E51881;
    }
    
    .blueCool {
        background-color: #3C93D5;
    }
    
    .navy {
        background-color:  #044B76;
    }
    
    
    
    
    
    .footerList a {
        color: #343A40;
        /* même couleur que bootstrap : text-dark*/
        margin-left: 0px;
    }
    
    .footerList >li a:hover {
        color:#E51881;
        font-weight: bold;
        font-style: italic;
        background-color: transparent;
        ;
    }
    .container {
        min-height: 92%;
    }
    
    .headerSiteTitle {
        min-height: 100px;
    }
    
    .headerMenuButton,
    .headerMenuButton:hover {
        color: black;
        text-decoration: none;
    }
    
    .headerMenuButtonBox {
        border: 3px black solid;
        background-color: aliceblue;
        width: -webkit-fill-available;
        text-align-last: center;
        margin-bottom: 5px;
    }
    
    .headerMenuButtonBox:hover {
        background-color: rgb(212, 229, 245);
    }
    
    
    
    /* DEFAULT LAYOUT */
    /* navbar */
    
    .navbar-mobile {
        position: fixed !important;
        z-index: 999 !important;
        width: 100% !important;
        /* background-color: white !important; */
        background-color:#E51881;
    }

    #NavbarMobile {
        background-color: white;
        margin: 10px;
    }

    .mobile_mainTitle {
        color:white;
        font-weight: 700;
        font-size: 2.2em;
        font-style: italic;
        text-align: -webkit-center;
        text-align: center;
        display: contents;
        line-height: initial;
    }
   
    
    /* Icon animé du menu*/
    
    .animated-icon1,
    .animated-icon2,
    .animated-icon3 {
        width: 30px;
        height: 20px;
        position: relative;
        margin: 0px;
        margin-left: 35px;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .5s ease-in-out;
        -moz-transition: .5s ease-in-out;
        -o-transition: .5s ease-in-out;
        transition: .5s ease-in-out;
        cursor: pointer;
    }
    
    .animated-icon1 span,
    .animated-icon2 span,
    .animated-icon3 span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: .25s ease-in-out;
        -moz-transition: .25s ease-in-out;
        -o-transition: .25s ease-in-out;
        transition: .25s ease-in-out;
    }
    
    .animated-icon3 span {
        /* background: #000000; */
        background: white;
    }
    
    .animated-icon3 span:nth-child(1) {
        top: 0px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    
    .animated-icon3 span:nth-child(2) {
        top: 10px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    
    .animated-icon3 span:nth-child(3) {
        top: 20px;
        -webkit-transform-origin: left center;
        -moz-transform-origin: left center;
        -o-transform-origin: left center;
        transform-origin: left center;
    }
    
    .animated-icon3.open span:nth-child(1) {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 0px;
        left: 8px;
    }
    
    .animated-icon3.open span:nth-child(2) {
        width: 0%;
        opacity: 0;
    }
    
    .animated-icon3.open span:nth-child(3) {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 21px;
        left: 8px;
    }

    /* Bouton Connexion Adhérent*/
    .modal-dialog {
        padding: 10px;
    }

    #exampleModalLabel{
        font-size: large;
        font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    }

    .inputstyleformBase {
        -moz-appearance: none;
        border-radius: 0;
        background-color: #fff;
        border-style: solid;
        border-width: 1px;
        border-color: #ccc;
        box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
        color: #000;
        display: block;
        font-family: inherit;
        height: 2.3125rem;
        margin: 0 0 1rem 0;
        padding: 1.5rem;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: border-color 0.15s linear,background 0.15s linear;
        -moz-transition: border-color 0.15s linear,background 0.15s linear;
        -ms-transition: border-color 0.15s linear,background 0.15s linear;
        -o-transition: border-color 0.15s linear,background 0.15s linear;
        transition: border-color 0.15s linear,background 0.15s linear;
    }
    #validateConnexionAdhButton {
        font-size: medium;
    }

    .closeButton {
        position: relative;
        text-align: center;
        text-decoration: none;
        font-size: x-large;
    }

    /* Navbar Buttons */
    
    .btn-navbar {
        border-radius: 5px;
        border:none;
        padding: 5px 30px;
        font-size: 22px;
        text-decoration: none;
        margin-bottom: 10px;
        margin-top: 5px;
        color: #fff;
        position: relative;
        display: inline-block;
        text-decoration: none !important;
        text-align: center;
        word-break: break-word;
    }

    .btnNavBar_Adherent {
        padding: 5px 23px;
    }
    
    .btn-navbar:active {
        transform: translate(0px, 5px);
        -webkit-transform: translate(0px, 5px);
        box-shadow: 0px 1px 0px 0px;
    }
    
    .admin {
        background-color: #707070 !important;
        border: solid 3px#044B76 !important;
        border-radius: 5px !important;
        box-shadow: 0px 6px 0px 0px #044B76 !important;
    }

    .connexion_button {
        margin-left: auto;
        margin-top: 5px;
    }
    
    .adherent {
        background-color: #E51881;
        border: solid 3px#044B76;
        border-radius: 5px;
        box-shadow: 0px 6px 0px 0px #044B76;
    }
    
    .activAdherent {
        background-color: #009688;
        border: solid 3px #044B76;
    }
    
    .utiles {
        border: solid 3px#3C93D5;
        border-radius: 5px;   
    }

    .utiles h4 {
        text-align: center;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        color: #044B76;
        font-size: 12pt;
        line-height: 18px;
        margin-top: 10px;
        font-weight: bold;
    }

    .display_forSafari {
        display:-webkit-box;
    }
    
    .blue:hover {
        background-color: #6FC6FF;
    }
    
    .jour {
        background-color:#707070;
        border: solid 3px#044B76;
        border-radius: 5px;
    }
    
    .mainTitle {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        
        color: #E51881;
        font-size: 2.705em;
        margin: 0 !important;
        font-style: italic;
        text-align: center;
        font-weight: bold;
    }

    .sousligne {

        margin-top: 5px;
        height:3px;
        width:100%;
        background-color:#E51881;
    }
    
    
    .textTitle {
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        text-transform: uppercase;
        /* font-size: 1rem; */
        font-weight: bold;
        background-color: #E51881;
        color: #fff;
        padding: 8px;
        height: 45px;
        align-items: center;
        white-space: nowrap;
        display: inline-flex;
    }

    .textPageTitle {
       
        position: relative;
        color: #E51881;
        background-color: white;
        font-size: 2.4rem;
        text-align: center;
        display: inline-block;
        padding: 12px;
        font-weight: bold;
    }
    .homePageTitle {
        position: relative;
        color: white;
        background-color: #E51881;
        font-size: 2.4rem;
        text-align: center;
        display: block;
        padding: 12px;
        font-weight: bold;
    }
    

    .btnMenu {
        font-size: 13px !important;
        
    }
    
    .bannerPanoImg {
        
        height: 210px;
        background-size: cover;
        background-repeat: no-repeat;
        background-image: url("/img/images/pano3_resized.jpg");
    }
    /* .imgHome {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 85% 75%;
        border-radius: 0 5px 0 0;
        height: 680px;
        background-image: url("/img/images/tapis_resized.jpg");
    } */

    .imgEnSalle {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 85% 75%;
        border-radius: 5px 5px 0 0;
        height: 500px;
        background-image: url("/img/images/personnes-agees-salle-gym_23-2147776995.jpg");
        margin-bottom: inherit;
        margin-top: inherit;
        
    }

    

    .imgPleinAir{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 12% 75%;
        border-radius: 5px 5px 0 0;
        height: 500px;
        background-image: url("/img/images/amateurs-trekking_1098-15179.jpg");
        margin-bottom: inherit;
        margin-top: inherit;
        
    }

    .imgMultiActiv {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 05% 75%;
        border-radius: 5px 5px 0 0;
        height: 500px;
        background-image: url("/img/images/multi_activitreverse_resized.jpg");
        margin-bottom: inherit;
        margin-top: inherit;
    }

    .imgSortie {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 52% 75%;
        border-radius: 5px 5px 0 0;
        height: 500px;
        background-image: url("/img/images/sortieVoyagesresized.jpg");
        margin-bottom: inherit;
        margin-top: inherit;
    }

    .imgQSN {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 05% 75%;
        border-radius: 5px 5px 0 0;
        height: 500px;
        background-image: url("/img/images/qs-n_resized.jpg");
        margin-bottom: inherit;
        margin-top: inherit;
    }

    .imgContact {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 05% 75%;
        border-radius: 5px 5px 0 0;
        height: 200px;
        background-image: url("/img/images/PapillonContact_resized.jpg");
        margin-bottom: inherit;
        margin-top: inherit;
    }

    /* .bannerText {
        line-height:0;
        text-align:center;
    } */



    .bannerLine {
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        font-weight: bold;
        color:#fff;
        font-size:20pt;
        line-height:43px;
        position: relative;
        top: 25px;
        
        text-align:center;
        /* animation-duration: 12s;
        animation-name: fadeIn;
        animation-iteration-count: infinite;
        animation-delay: 4s;
        opacity: 0; */
    }

    .buttonsCol {
        justify-content: space-between;                
        display: flex;
        padding-left: 0px;
        padding-right: 0px;
    }
    
    #messageIcon {
        max-width: 45px;
        margin: 10px;
    }
    .cardMessage {
        margin-bottom: 20px;
    }

    .cardMessage .card-header{
        width: 100%;
        margin-left: unset;
        align-items: center;
    }

    #messageTitle{flex-wrap: wrap;
        display: flex;}

    /* @keyframes fadeIn {
        0% {
            opacity: 0;
        }
        70% {
            opacity: 1;
        }
        80% {
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    } */
    .adhesionLInk p{

        background-color: #009688 !important;
        border: solid 3px #044B76 !important;
        border-radius: 5px !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        color: white !important;
        font-size: 2rem !important;
    }

    .adhesionLInk p:hover{

        background-color: #009688;
        border: solid 3px #044B76;
        border-radius: 5px;
        margin-left: 20px;
        margin-right: 20px;
        color: white !important;
        font-size: 2rem !important;
    }
    
    a:hover {
        text-decoration: none;
    }
    
    .hr {
        /* centre verticalement les enfants entre eux */
        align-items: center;
        /* active flexbox */
        display: flex;
        /* garde le texte centré s’il passe sur plusieurs lignes ou si flexbox n’est pas supporté */
        text-align: center;
    }
    
    .hr::before,
    .hr::after {
        /* la couleur est volontairement absente ; ainsi elle sera celle du texte */
        border-top: .0625em solid;
        /* nécessaire pour afficher les pseudo-éléments */
        content: "";
        /* partage le reste de la largeur disponible */
        flex: 1;
        /* espace les traits du texte */
        margin: 0 .5em;
    }

    @media (max-width:420px) {
        .mobile_mainTitle {
            font-size: 1.35em;
        }
    }

    @media (max-width:768px ) {
        /* .imgHome {
            border-radius: 0px;
        } */
        .imgQSN, .imgEnSalle, .imgPleinAir, .imgMultiActiv, .imgSortie {
            height: 350px;
            background-size: contain;
        }
        .textPageTitle {
            font-size: 1.5em;
        }
        .GoogleMap {
            width: 400px;
        }
        .bannerPanoImg, .mainTitle {
            display: none;
        }
        .mainBlock, .footer {
            top: 15vh;
        }

    }

    @media (max-width: 834px) {
        .imgQSN, .imgEnSalle, .imgPleinAir, .imgMultiActiv, .imgSortie {
            height: 350px;
            background-size: contain;
        }
    }
        
    
    @media (min-width:768px) and (max-width:1023px) {
        .bannerLine {
            font-size: 16pt;
        }
        .GoogleMap {
            width: 400px;
        }
        #SallePellegrinMap {
            margin-top: 25px;
        }           
    }

    @media (min-width:992px) and (max-width:1199px) {
        .DeskmenuButton {
            margin-right: 2px;
            padding-inline: 10px;
            padding: 4px 10px;
        }
    }