/* ----------------------------------------------------ACCUEIL---------------------------------------------------------------------- */
.bordureAccueil
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.25),
      rgba(0, 0, 0, 0.25 )
    ),url("../images/bandeauAccueil.jpg");
    background-size: cover;
    background-repeat: no-repeat;    
    padding-top: 12%;
    padding-bottom: 9.5%;
    height: 609.92px;
    width: 100%;
    font-size: 6vh;
}
/* ----------------------------------------------------ADMIN------------------------------------------------------------------------ */

.bordureAdmin
{
    padding-top: 8%;
    padding-bottom: 3.5%;
    height: unset;
    width: 100%;
    font-size: 6vh;
    background-image:url("../images/fond_gray.jpg");
}

.connect
{
    border-bottom-style: double;
    text-align: center;
    width:100%;
    font-size: 4vh;
    color: white;
    font-family: quicksandb;
    margin: auto;
}

.connectEspaceEvenement
{
    border-bottom-style: double;
    text-align: center;
    width:20%;
    font-size: 4vh;
    color: white;
    font-family: quicksandb;
    margin: auto;
}

/* ----------------------------------------------------DIFFICULTES------------------------------------------------------------------- */

.bordureDifficultes
{
    overflow: auto;
    background: linear-gradient(       
        rgba(0, 0, 0, 0.45),        
        rgba(0, 0, 0, 0.45)     
    ),url("../images/fond_blanc.jpg");
    background-size: cover;
    background-position-x: 55%;
    height: 609.92px;
    padding-top: 9%;
    padding-bottom: 6%;
    font-size: 5vh;
}
/* ----------------------------------------------------CONNEXION---------------------------------------------------------------------- */

.bordureConnexion
{
    padding-top: 8.5%;
    padding-bottom: 4.5%;
    height: 609.92px;
    background-image:url("../images/fond_gray.jpg");
}
/* ----------------------------------------------------ASSOTIATION-------------------------------------------------------------------- */

.bordureAsso
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),url("../images/bandeauAutismeLandes.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 7%;
    padding-bottom: 3%;
    font-size: 5vh;
    height: 636.26px;
}
/* ----------------------------------------------------AUTISME---------------------------------------------------------------------- */

.bordureAutisme
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),url("../images/bandeauAutisme.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 609.92px;
    padding-top: 7%;
    padding-bottom: 7%;
    width: 100%;
}
/* ----------------------------------------------------ACTIONS---------------------------------------------------------------------- */

.bordureActions
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.45),
      rgba(0, 0, 0, 0.45)
    ),url("../images/bandeauNosActions.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 609.92px;
    background-position-x: -3px;
    padding-top: 7%;
    padding-bottom: 7%;
    width: 100%;
}
/* ----------------------------------------------------PCPE---------------------------------------------------------------------- */

.bordurePCPE
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.25),
      rgba(0, 0, 0, 0.25)
    ),url("../images/bandeauPCPE.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 609.92px;
    padding-top: 7%;
    padding-bottom: 7%;
    width: 100%;
    font-size: 6vh;
}
/* ----------------------------------------------------CONTACT---------------------------------------------------------------------- */

.bordureContact
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.25), 
      rgba(0, 0, 0, 0.25)
    ),url("../images/bandeauContact.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 7%;
    padding-bottom: 7%;
    width: 100%;
    height: 609.92px;
    background-position-x: 64%;
}
/* --------------------------------------------------------------------------------------------------------------------------------- */
.imageaccueil{
    border-radius: 20px;
}

.titre1 {
    font-size: 35px;
    margin-top: 2%;
    text-align: justify;
    color: black;
    font-family: quicksand;
    font-weight:bold;
}

.p1 {
    color: black;
    text-decoration: none;
    text-align: justify;
    font-size: 22px;
    font-family: cambay;
    height: auto;
}

.liendon{
    margin-bottom:20px;
    color: orangered;
    font-size: 25px;
    margin: 8px;
    font-family: cambay;
}

.page{
    background-color: #4a88d6;
    }

/* ----------------------------------------------------ACCUEIL---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------- */

.titres{
    margin:auto;
}

.bandeaubleubstrp{
    background-color: #63A0FF;
    font-family: quicksandb;
    text-align:center;
    height:100px;
}

.bandeauorangebstrp{
    background-color: #FF3617;
    font-family: quicksandb;
    text-align:center;
    height:100px;
    
}

.bandeaugrisbstrp{
    background-color: gray;
    font-family: quicksandb;
    text-align:center;
    height:100px;
}

.bandeauvertbstrp{
    background-color: #FF3617;
    font-family: quicksandb;
    text-align:center;
    height:100px;
}


.bandeaulightbluebstrp
{
    background-color: rgb(124, 124, 255);
    height: 100px;
    text-align: center;
    font-family: quicksandb;
}
/* ----------------------------------------------------BANDEAU---------------------------------------------------------------------- */

.bandeauorangeT
{
    width: 100%;
    background-color: #FF3617;
    margin: 0;
    height: 100px;
    line-height: 2.4;
    text-align: center;
    font-family: quicksandb;
    color: white;
    font-size: 41px;
}
.logo_fb{
    height: 5vw;
}

.lien_autisme
{
    color: black;
    font-size: 25px;
    margin: 8px;
    font-family: cambay;
}
.lien:hover, lien_autisme:hover
{
    color: orange;
    text-decoration: none;
}

.space-top{
    margin-top:20px;
}

.space-bottom{
    margin-bottom:20px;
}

.margin-texte-autisme{
    margin:20px;
}

.liste{
    padding-left: 7%;
    padding-right: 12%;
}



/* ----------------------------------------------------liens autisme_bstrp---------------------------------------------------------------------- */

.colonne1
{
    text-align: center;
    line-height: 3.5;
    font-family: cambayb;
}

.colonne1 > a
{
    text-decoration: none;
    color: black;
}
.colonne2 > a
{
    text-decoration: none;
    color: black;
}
.colonne1 > a:hover
{
    text-decoration: none;
    color: gray;
}
.colonne2 > a:hover
{
    text-decoration: none;
    color: gray;
}
.colonne2
{
    text-align: center;
    line-height: 3.5;
    font-family: cambayb;
}

/* ----------------------------------------------------liens autisme_bstrp---------------------------------------------------------------------- */
/* ----------------------------------------------------bordures---------------------------------------------------------------------- */
.bordureAdmin
{
    padding-top: 100px;
    padding-bottom: 3.5%;
    height: unset;
    font-size: 6vh;
    background-image:url("../images/fond_gray.jpg");
}
.bordureDifficultes
{
    overflow: auto;
    background: linear-gradient(
        rgba(0, 0, 0, 0.25),       
        rgba(0, 0, 0, 0.25)
    ),
    url("../images/fond_blanc.jpg");
    background-size: cover;
    background-position-x: 55%;
    padding-top: 9%;
    padding-bottom: 6%;
    height: 609.92px;
    font-size: 5vh;
}
.bordureConnexion
{
    padding-top: 8.5%;
    padding-bottom: 4.5%;
    height: 1000px;
    background-image:url("../images/fond_gray.jpg");
}
.bordureAsso
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),url("../images/bandeauAutismeLandes.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 7%;
    padding-bottom: 3%;
    font-size: 5vh;
    height: 609.92px;
}
.bordureAutisme
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),url("../images/bandeauAutisme.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 609.92px;
    padding-top: 7%;
    padding-bottom: 7%;
    width: 100%;
}
.bordureActions
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),url("../images/bandeauNosActions.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    height: 609.92px;
    padding-top: 7%;
    padding-bottom: 7%;
    width: 100%;
}
.PCPE
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),url("../images/bandeauPCPE.jpg");
    background-size: cover;
    background-repeat: round;
    height: 609.92px;
    padding-top: 7%;
    padding-bottom: 7%;
    width: 100%;
    font-size: 6vh;
}
.bordureContact
{
    background: linear-gradient(
      rgba(0, 0, 0, 0.45), 
      rgba(0, 0, 0, 0.45)
    ),url("../images/bandeauContact.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 7%;
    padding-bottom: 7%;
    width: 100%;
    height: 609.92px;
    background-position-x: 64%;
}
/* ----------------------------------------------------bordures---------------------------------------------------------------------- */
/* ----------------------------------------------------catalogue---------------------------------------------------------------------- */
 .cat{
    width:90%;
} 

.imgptn{
    max-width:253.58px;
    max-height:156.85px
}

/*------------------------------------------------------formulaire création bénévole--------------------------------------------------*/
.valider{
    font-family: quicksandb;  
}

.margin{
    margin: 0 0 10% 0;
}

.marginleft{
    margin: 0 25% 0 0;
}

body > form 
{
    margin-top : 10%;
}

.borderprive
{
    border-style: solid;
    margin-left: 1%;
    margin-right: 1%;
    padding: 1%;
    padding-right: 8%;
    padding-left: 8%;
    background-color: transparent;
    border-color: #71B418;
    border-radius: 5px;
    font-family: quicksandb;
    background-size: 92%;
    color: white;
}
.borderprive:hover
{
    border-style: solid;
    margin-left: 1%;
    margin-right: 1%;
    padding: 1%;
    padding-left: 8%;
    padding-right: 8%;
    background-color:RGB(10,168,25);
    color: white;
    border-color: white;
    border-radius: 5px;
    font-family: quicksandb;
    background-size: 92%;
}
.borderprive:active
{
    border-style: solid;
    margin-left: 1%;
    margin-right: 1%;
    padding: 1%;
    padding-left: 8%;
    padding-right: 8%;
    background-color:RGB(10,168,25);
    color: white;
    border-color: white;
    border-radius: 5px;
    font-family: quicksandb;
    background-size: 92%;
}

.selectprive
{
    border-style: solid;
    margin-left: 1%;
    margin-right: 1%;
    padding: 1%;
    padding-right: 8%;
    padding-left: 8%;
    background-color: #ff3617;
    color: white;
    border-color: white;
    border-radius: 5px;
    font-family: quicksandb;
}

.select
{
    border-style: solid;
    width:auto;
    margin-left: 6%;
    margin-right: 5%;
    padding: 1%;
    padding-right: 4%;
    padding-left: 4%;
    background-color: #ff3617;
    color: white;
    border-color: white;
    border-radius: 5px;
    font-family: quicksandb;
}

.valider{
    font-family: quicksandb;  
}

@media(max-width: 1920px){
    h1{font-size: calc(25px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h2{font-size: calc(13px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h3{font-size: calc(9px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h4{font-size: calc(6px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h5{font-size: calc(3px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h6{font-size: calc(9px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    p{font-size: calc(1.5px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
}
     
@media(max-width: 1199px){
    h1{font-size: calc(25px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h2{font-size: calc(15px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h3{font-size: calc(11px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h4{font-size: calc(8px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h5{font-size: calc(5px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h6{font-size: calc(9px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    p{font-size: calc(3px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
}


@media(max-width: 991px){
    h1{font-size: calc(25px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h2{font-size: calc(17px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h3{font-size: calc(13px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h4{font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h5{font-size: calc(7px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h6{font-size: calc(9px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    p{font-size: calc(5px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
}
    
@media(max-width: 767px){
    h1{font-size: calc(25px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h2{font-size: calc(17px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h3{font-size: calc(13px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h4{font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h5{font-size: calc(7px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h6{font-size: calc(9px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    p{font-size: calc(5px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
}

@media(max-width: 575px){
    h1{font-size: calc(25px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h2{font-size: calc(18px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h3{font-size: calc(16px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h4{font-size: calc(15px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h5{font-size: calc(13px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    h6{font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
    p{font-size: calc(11px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));}
}