/* auteur dgdesign */
*{
    margin:0;
    padding:0;
}
body{
    background-image: url(images/background_transp10.png);
    background-repeat: no-repeat;
    background-position: center;
    font-family: jaf-bernina-sans,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    color: black;
}
.rowsafari {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.container .top{
    text-align: left;
    height: 120px;
    vertical-align: bottom;
}
.container .corps{
    background-color: #fff;
    margin: 20px -15px 0px -15px;;
    width: 0 auto;
    padding: 20px 20px 20px 20px;
    border-bottom: 2px solid #018C80;
    border-image: -webkit-linear-gradient(right, rgb(001,140,128) 0%, transparent 90%) 10 10 stretch stretch;
    border-image:    -moz-linear-gradient(right, rgb(001,140,128) 0%, transparent 90%) 10 10 stretch stretch;
    border-image:     -ms-linear-gradient(right, rgb(001,140,128) 0%, transparent 90%) 10 10 stretch stretch;
    border-image:      -o-linear-gradient(right, rgb(001,140,128) 0%, transparent 90%) 10 10 stretch stretch;
    border-image:         linear-gradient(right, rgb(001,140,128) 0%, transparent 90%) 10 10 stretch stretch;
    /*border-bottom: 2px solid #018C80;*/
}
.marge-top{
    margin-top: 15px;
    border-bottom: 2px solid #A80237;
    border-image: -webkit-linear-gradient(left, rgb(168,002,055) 0%, transparent 90%) 10 10 stretch stretch;
    border-image:    -moz-linear-gradient(left, rgb(168,002,055) 0%, transparent 90%) 10 10 stretch stretch;
    border-image:     -ms-linear-gradient(left, rgb(168,002,055) 0%, transparent 90%) 10 10 stretch stretch;
    border-image:      -o-linear-gradient(left, rgb(168,002,055) 0%, transparent 90%) 10 10 stretch stretch;
    border-image:         linear-gradient(left, rgb(168,002,055) 0%, transparent 90%) 10 10 stretch stretch;    
}
.banniere{
    border-right: 25px solid #018C80;    
}
.nav-left{
    background-color: #aa004f;
    font-size: 11px;
    color: #00b1bd;
    text-align: right;
    padding-top: 80px;
    padding-left: 0;
    padding-right: 55px;
}
.nav-left-title{
    font-size: 16px;
    color: #fff;
}
.nav-left a{
    color: #00b1bd;
    text-decoration: none;
}
.nav-left a:hover{
    color: #00d8e4;
    text-decoration: none;
}
.note{
    width: 24px;
    margin-right: -35px;
    margin-top: -18px;
}
.logo{
    width: 230px;
    margin-top: 10px;
    margin-right: 150px;
}
.row-title{
    background-color: #eeebea;
    height: 25px;
    margin-left: 35px;
}
.col-special{
    margin-top: -20px;
    padding-left: 50px;
}
h2{
    font-family: jaf-bernina-sans,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    color: #a39d93;
    padding-left: 10px;
}
h4{
    text-align: center;
    font-family: jaf-bernina-sans,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 28px;
    color: #A80237;
    padding-left: 10px;
}



/* barre de navigation horizontale */
.row-nav{
    background-color: #eeebea;
    height: 25px;
    margin-left: 35px;
}
.navbar{
    background-color: #eeebea;
    font-family: jaf-bernina-sans,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    margin: -25px 12px 0px 12px;
    height: 25px;
    padding-left: 10px;
}
.navbar .nav-link{
   color: #a39d93;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus{
    color: #fff;
}
.navbar .nav-item.active .nav-link{
    color: #aa004f;
}
/* fin de la navigation */

.btn-special{
    background-color: #aa004f;
    color: #fff;
    border-radius: 10px;
}
.footer-left{
    color: #018C80;
    height: 20px;
    font-size: 9px;
    padding-top: 5px;
    text-align: left;
    margin-left: -15px;
}
.footer-right{
    color: #aa004f;
    height: 20px;
    font-size: 9px;
    vertical-align: bottom;
    text-align: right;
    margin-top: -15px;
    margin-right: -15px;
}

/* formulaire de contact */

.thank-you{
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    font-style: italic;
    color: red;
}
.comments{
    font-style: italic;
    font-size: 12px;
    color: red;
}
.col-contact{
    padding-top: 12px;
}
.help-inline{
    color: red;
    font-style: italic;
}

/* Galerie photos */
/* jssor slider loading skin spin css */
/* ---------------------------------- */
.jssorl-009-spin img {
    animation-name: jssorl-009-spin;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/*jssor slider arrow skin 093 css*/
.jssora093 {display:block;position:absolute;cursor:pointer;}
.jssora093 .c {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;}
.jssora093 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;}
.jssora093:hover {opacity:.8;}
.jssora093.jssora093dn {opacity:.6;}
.jssora093.jssora093ds {opacity:.3;pointer-events:none;}

/*jssor slider thumbnail skin 101 css*/
.jssort101 .p {position: absolute;top:0;left:0;box-sizing:border-box;background:#000;}
.jssort101 .p .cv {position:relative;top:0;left:0;width:100%;height:100%;border:2px solid #000;box-sizing:border-box;z-index:1;}
.jssort101 .a {fill:none;stroke:#fff;stroke-width:400;stroke-miterlimit:10;visibility:hidden;}
.jssort101 .p:hover .cv, .jssort101 .p.pdn .cv {border:none;border-color:transparent;}
.jssort101 .p:hover{padding:2px;}
.jssort101 .p:hover .cv {background-color:rgba(0,0,0,6);opacity:.35;}
.jssort101 .p:hover.pdn{padding:0;}
.jssort101 .p:hover.pdn .cv {border:2px solid #fff;background:none;opacity:.35;}
.jssort101 .pav .cv {border-color:#fff;opacity:.35;}
.jssort101 .pav .a, .jssort101 .p:hover .a {visibility:visible;}
.jssort101 .t {position:absolute;top:0;left:0;width:100%;height:100%;border:none;opacity:.6;}
.jssort101 .pav .t, .jssort101 .p:hover .t{opacity:1;}


/* Modal de login */
/* -------------- */
body {
    font-family: jaf-bernina-sans,sans-serif;
    font-style: normal;
    font-weight: 400;
}

/* Full-width input fields */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Style pour les boutons */
button {
    background-color: #03928C;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}
button:hover {
    opacity: 0.8;
}

/* Styles pour le bouton d'annulation */
.forgotbtn {
    background-color: #03928C;
    color: white;
    width: auto;
    margin-left: 18px;
    float: left;
    padding: 10px 18px;
}
.forgotbtn a {
    color: white;
    text-decoration: none;
}
.cancelbtn {
    background-color: #03928C;
    color: white;
    width: auto;
    margin-right: 18px;
    float: right;
    padding: 10px 18px;
}
.updbtn {
    background-color: #03928C; 
    color: white;
    width: auto;
    padding: 10px 18px;
    background-color: #03928C;
}
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

/* Image d'en-tÍte */
img.avatar {
    width: 10%;
}
.container-modal {
    padding: 16px;
}
span.psw {
    float: right;
    padding-top: 16px;
}

/* Fond du modal */
.modal {
    display: none; /* CachÈ par dÈfaut */
    position: fixed; /* Reste en place */
    z-index: 1; /* Reste en top */
    left: 0;
    top: 0;
    width: 100%; /* Toute la largeur */
    height: 100%; /* Toute la hauteurt */
    overflow: auto; /* Si besoin enclenche le scrolleur */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 60px;
}

/* Content/Box du modal*/
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto; /* 5% du haut, 15% du bas et centrÈ */
    border: 1px solid #888;
    width: 80%; /* Pourrait Ítre plus ou moins en fonction de l'Ècran */
}

/* Bouton de fermeture (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}
.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Ajout de l'animation Zoom */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
    from {transform: scale(0)} 
    to {transform: scale(1)}
}

/* Change le style du span et du bouton d'annulation en cas d'Ècran extra small */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: none;
    }
    .cancelbtn {
       width: 100%;
    }
}

/* Espace privé pour membres de la chorale */
.tbl-title{
    background-color: #eeebea;
    font-family: jaf-bernina-sans,sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    font-weight: normal;
    color: #a39d93;
    padding-left: 10px;
}
.doc-list-base tr td{
    font-size: 13px;    
}
.profil{
    font-size: 14px;
    font-weight: bold;
}
.tb-profil tr td{
    font-size: 12px;
}

/* tableaux */
.tb-titre{
    margin: 0 auto;
    text-align: left;
    vertical-align: middle;
    font-size: 25px;
    color: #000;
}
.tb-list{
    margin: 0 auto;
}
.tb-list thead{
    color: white;
    font-size: 12px;
    line-height: 35px;
    vertical-align: middle;
    background-color: #aa004f;
}
.tb-list thead th{
    padding-left: 20px;
}
.tb-list td{
    padding-left: 20px;
    color: #000;
    font-size: 13px;
}
.tb-list tr{
    border-bottom: thin solid darkgray;
    line-height: 25px;
}
.tb-list tr:hover{
    color: #fff;
    background-color: darkgrey;  
}