/*
Theme Name: LeClubTricolore
Author: Mathieu Consalvi
Author URI: https://consalvi-mathieu.fr/
Version: 1.0
*/


body {
    overflow-x: hidden;
    max-width: 1170px;
    margin: auto !important;
}
body, p, h2, h3, h4, h5, h6, a {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif !important;
}
h1, h2, h3, p, a {
    user-select: none;
}
.container {
    max-width: 85% !important;
}
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/***************************** Bloc Home *****************************/

#bloc-top-home {
    height: auto;
}
#bloc-top-home .background-home {
    position: absolute;
    max-width: 1170px;
    height: auto;
    z-index: -1;
    width: 100%;
}
#bloc-top-home .partenaires-home {
    position: absolute;
    bottom: 5%;
    right: 3%;
    z-index: 5;
    height: 17%;
    width: 18%;
}
#bloc-top-home .col-left {
    width: 35%;
    text-align: center;
    display: table-cell;
}
#bloc-top-home .col-right {
    width: 65%;
}
#bloc-top-home .logo-home {
    width: 64%;
    margin: 0px 22%;
        margin-top: 0px;
    margin-top: 20%;
}
#bloc-top-home .drapeau-home {
    width: 95%;
    margin-left: 1%;
    margin-top: 11%;
    height: auto;
}
#bloc-top-home .partenaires-home {
    position: absolute;
    bottom: 5%;
    right: 3%;
    z-index: 5;
    height: 18%;
    width: 21%;
}
#bloc-top-home .btn-inscrire-home {
    width: 25%;
    margin: auto;
    display: grid;
    margin-top: 8%;
}
#bloc-top-home .texttransform1 {
    margin-bottom: 0;
    text-align: left;
    font-size: 15px;
    padding-left: 14%;
    background: black;
    color: white;
    width: fit-content;
    padding-right: 8%;
    margin-top: 10%;
    font-style: italic;
}
#bloc-top-home  .texttransform2 {
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    font-style: italic;
    margin-left: 14%;
    margin-bottom: 0%;
    margin-top: 2%;
}
#bloc-top-home  .texttransform3 {
    color: #FFFFFF;
    background-color: black;
    text-align: left;
    margin-left: 14%;
    font-size: 26px;
    font-weight: bold;
    font-style: italic;
    width: fit-content;
    padding: 5px 10px;
    margin-bottom: 0;
}
#bloc-top-home .bloc-reseau-sociaux {
    position: absolute;
    margin-top: 130px;
    margin-left: 400px;
}
#bloc-top-home .bloc-reseau-sociaux i {
    color: black;
    margin: 0px 5px;
}




/***************************** Bloc Séjour *****************************/

#bloc-ton-sejour .col-left, #bloc-ton-sejour .col-right {
    width: 50%;
}
#bloc-ton-sejour .marche-roller {
    z-index: 5;
    position: relative;
    width: 100%;
}
#bloc-ton-sejour .texttransform4 {
    margin-top: 42%;
    margin-left: 15%;
    color: #FFFFFF;
    background-color: black;
    text-align: left;
    font-size: 56px;
    font-weight: 900;
    font-style: italic;
    width: fit-content;
    padding: 0px 10px;
    margin-bottom: 0;
}
#bloc-ton-sejour .texttransform5 {
    margin-left: 15%;
    font-size: 15px;
    margin-top: 3%;
    margin-bottom: 5px;
    padding-right: 14%;
}
#bloc-ton-sejour .texttransform6 {
    margin-bottom: 0;
    text-align: left;
    font-size: 20px;
    padding-left: 17%;
    background: black;
    color: white;
    width: fit-content;
    padding-right: 3%;
    font-style: italic;
    font-weight: bold;
}



/***************************** Bloc Expérience *****************************/


#bloc-ton-experience {
    margin-top: 6%;
}
#bloc-ton-experience .col-left, #bloc-ton-experience .col-right {
    width: 50%;
}
#bloc-ton-experience .quentin-fillon {
    z-index: 5;
    position: relative;
    width: 100%;
    padding-right: 12%;
}
#bloc-ton-experience .texttransform7 {
    margin-top: 15%;
    margin-left: 9%;
    color: #FFFFFF;
    background-color: black;
    text-align: left;
    font-size: 56px;
    font-weight: 900;
    font-style: italic;
    width: fit-content;
    padding: 0px 10px;
    margin-bottom: 0;
}
#bloc-ton-experience .texttransform8, #bloc-ton-experience .texttransform10 {
    margin-left: 9%;
    font-size: 15px;
    margin-top: 3%;
    margin-bottom: 12px;
    padding-right: 20%;
}
#bloc-ton-experience .texttransform9 {
    margin-bottom: 0;
    text-align: left;
    font-size: 20px;
    padding-left: 9%;
    background: black;
    color: white;
    width: fit-content;
    padding-right: 3%;
    font-style: italic;
    font-weight: bold;
}


/***************************** Bloc Expérience *****************************/


#bloc-tes-lots {
    margin-top: 8%;
    height: 380px;
}
#bloc-tes-lots .slide-lots {
    width: 100%;
    position: absolute;
    z-index: -1;
    max-width: 1170px;
}
#bloc-tes-lots .col-left {
    width: 68%;
}
#bloc-tes-lots .col-right {
    width: 32%;
}
#bloc-tes-lots .texttransform11 {
    margin-top: 10%;
    color: black;
    background-color: white;
    font-size: 56px;
    font-weight: 900;
    font-style: italic;
    margin-right: 20%;
    padding: 0px 16px;
    margin-bottom: 0;
}
#bloc-tes-lots .texttransform12 {
    margin-left: 9%;
    font-size: 15px;
    margin-top: 3%;
    margin-bottom: 12px;
    padding-right: 20%;
    color: white;
    text-align: right;
}
#bloc-tes-lots .vetements-lots {
    width: 100%;
    margin-left: -20%;
    margin-top: 5%;
}



/***************************** Bloc Inscris Toi *****************************/

#bloc-inscris-toi {
    margin-top: 13%;
    margin-left: 14%;
}
#bloc-inscris-toi .texttransform13 {
    margin-bottom: 0;
    text-align: left;
    font-size: 18px;
    background: black;
    color: white;
    width: fit-content;
    padding: 0 1%;
    font-weight: bolder;
}
#bloc-inscris-toi .texttransform14 {
    margin-top: 5px;
    color: black;
    font-size: 56px;
    font-weight: 900;
    font-style: italic;
    margin-right: 20%;
    margin-bottom: 0;
}
#bloc-inscris-toi .texttransform15 {
    font-size: 15px;
    margin-top: 3%;
    margin-bottom: 5%;
    padding-right: 30%;
}


/***************************** Bloc Formulaire *****************************/

#bloc-formulaire {
    margin-top: 8%;
}
#bloc-formulaire .top-formulaire.row {
    margin-left: 20% !important;
    margin-right: 6.5% !important;
}
#bloc-formulaire .top-formulaire .quentin-fillon-formulaire {
    width: 100%;
}
#bloc-formulaire .bottom-formulaire .col-left {
    width: 45%;
}
#bloc-formulaire .bottom-formulaire .col-right {
    width: 55%;
}
#bloc-formulaire .bottom-formulaire .drapeau-formulaire {
    width: 100%;
    padding-left: 9%;
    z-index: 5;
    position: relative;
}
#bloc-formulaire .bottom-formulaire .background-grey {
    background: #E7EAEB;
    height: 775px;
    z-index: -1;
    position: absolute;
    width: 19.3%;
    margin-left: 15.4%;
}
#bloc-formulaire .bottom-formulaire .bordure-red {
    border: 5px solid #F81100;
    background: transparent;
    z-index: 2;
    position: absolute;
    margin-top: 2.5%;
    left: 17%;
    width: 31%;
    height: 640px;
}
#bloc-formulaire .bottom-formulaire .formulaire-bloc {
    margin-left: 10% !important;
    margin-top: 7%;
}
input::placeholder, textarea::placeholder {
  color: black;
  opacity: 1;
}
.formulaire-bloc input, .formulaire-bloc textarea, .formulaire-bloc select, .formulaire-bloc a { 
    outline: none !important; 
}
.formulaire-bloc input:focus, .formulaire-bloc textarea:focus, .formulaire-bloc select:focus { 
    outline: none; 
} 
.wpcf7-form-control.wpcf7-select {
    border: 1px solid black;
    font-size: 16px;
    line-height: 18px;
    background-color: transparent;
    width: 32%;
}
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required, .wpcf7-form-control.wpcf7-text.walcf7-datepicker {
    border: none;
    border-bottom: 1px solid black;
    font-size: 12px;
    line-height: 18px;
    width: 40%;
    margin-right: 5%;
    font-style: italic;
    font-weight: bold;
}
.wpcf7-form-control-wrap.nom input {
    margin-top: 4%;
}
.wpcf7-form-control-wrap.tel input, .wpcf7-form-control-wrap.date input {
    margin-top: 8%;
}
.formulaire-bloc span.select-genre, .formulaire-bloc span.select-pointure,
.formulaire-bloc span.select-tshirt, .formulaire-bloc span.select-jogging {
    font-size: 12px;
    line-height: 18px;
    font-style: italic;
    font-weight: bold;
    margin-right: 10px;
}
.wpcf7-form-control.wpcf7-textarea {
    margin-top: 8%;
    width: 86%;
    font-size: 12px;
    line-height: 18px;
    font-style: italic;
    font-weight: bold;
    height: 100px;
    padding: 0;
    padding-left: 5px;
}
.wpcf7-form-control-wrap.pointure select {
    margin-top: 7%;
    width: 34%;
}
.wpcf7-form-control-wrap.tshirt select {
    margin-top: 5%;
    width: 28%;
}
.wpcf7-form-control-wrap.jogging select {
    margin-top: 5%;
    width: 27%;
}
.wpcf7 form .wpcf7-response-output {
    margin-left: 8% !important;
    font-size: 15px;
    text-align: center;
}
.wpcf7 form.sent .wpcf7-response-output {
    border: none;
    color: black;
    text-align: left;
    font-size: 38px;
    font-weight: 900;
    font-style: italic;
    width: 330px;
    margin-bottom: 0;
    z-index: 5;
    position: relative;
    margin-left: 10% !important;
    line-height: 45px;
    margin-top: 5%;
    padding: 0;
}
.wpcf7 form div.visible-only-if-sent {
  display: none;
}
.wpcf7 form.sent div.visible-only-if-sent {
  display: block;
}
.wpcf7-not-valid-tip {
    display: none !important;
}
.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.wpcf7-not-valid {
    border: 2px solid #dc3232 !important;
}
.wpcf7-form-control.has-spinner.wpcf7-submit {
    background: transparent url(/wp-content/uploads/2021/12/BT-INSCRIRE@2x.png) no-repeat scroll right center;
    border: none;
    color: black;
    height: 100%;
    margin-right: 14%;
    width: 115px;
    background-size: 100%;
    font-size: 18px;
    font-weight: bold;
    margin-top: -12%;
    float: right;
    line-height: 60px;
}
#bloc-formulaire .bottom-formulaire .texttransform17 {
    color: black;
    text-align: left;
    font-size: 38px;
    font-weight: 900;
    font-style: italic;
    width: 330px;
    margin-bottom: 0;
    z-index: 5;
    position: relative;
    margin-left: 10%;
    line-height: 45px;
    margin-top: 5%;
}
#bloc-formulaire .bottom-formulaire  .texttransform18 {
    font-size: 15px;
    margin-top: 3%;
    margin-bottom: 15%;
    margin-left: 10%;
}


/***************************** Page Règlement *****************************/


.btn-reglement {
    background: transparent url(/wp-content/uploads/2021/12/BT-INSCRIRE@2x.png) no-repeat scroll right center;
    color: black;
    height: 100%;
    width: 115px;
    background-size: 100%;
    font-size: 18px;
    font-weight: bold;
    line-height: 60px;
    text-align: center;
    margin: auto;
    margin-bottom: 5%;
}
.btn-reglement a {
    color: black;
}
.header-reglement img {
    height: 120px;
    left: 5%;
    position: absolute;
    top: -2vh;
}
#breadcrumbs a {
    color: white;
}
#breadcrumbs i {
    margin-right: 20px;
}
.row.header-reglement {
    background: #1d1d1b;
    color: white;
    padding-top: 40px;
}
.header-reglement h1 {
    padding-bottom: 25px;
    font-size: 70px;
    font-weight: 600;
}
.bloc-reglement .bloc-txt {
    display: grid;
    justify-content: center;
    padding: 5% 10%;
}


/***************************** Footer *****************************/


footer {
    background-color: #000000;
}
footer .container {
    max-width: 100% !important;
    padding: 0;
}
footer p, footer a {
    text-transform: uppercase;
}
footer .row.footer-topPart {
    margin-bottom: 30px;
}
footer .footer-topPart a, footer .footer-topPart p {
    color: white;
}
footer .footer-topPart img {
    width: 75%;
    margin-top: 10%;
}
footer .bloc-reseau-sociaux {
    text-align: center;
    font-size: 12px;
}
footer .bloc-reseau-sociaux a i {
    font-size: 18px;
    margin: 0px 10px;
}
footer .border-footer {
    border-top: 1px solid #afafaf;
    position: relative;
}
footer .row.footer-bottomPart {
    text-align: center;
    padding-top: 15px;
    font-size: 12px;
}
footer .footer-bottomPart a, footer .footer-bottomPart p {
    color: #626260;
}
footer .footer-bottomPart a:hover {
    text-decoration: none;
}



@media screen and (max-width: 1170px) {

    .wpcf7-form-control.wpcf7-select, .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required,
    .formulaire-bloc span.select-genre, .formulaire-bloc span.select-pointure,
    .formulaire-bloc span.select-tshirt, .formulaire-bloc span.select-jogging,
    .wpcf7-form-control.wpcf7-textarea, .wpcf7-form-control.has-spinner.wpcf7-submit,
    footer .row.footer-bottomPart, footer .bloc-reseau-sociaux, .wpcf7-form-control.wpcf7-text.walcf7-datepicker {
        font-size: 1vw;
    }    
    #bloc-top-home .texttransform1, #bloc-ton-sejour .texttransform5, 
    #bloc-ton-experience .texttransform8, #bloc-ton-experience .texttransform10,
    #bloc-tes-lots .texttransform12, #bloc-inscris-toi .texttransform15,
    #bloc-formulaire .bottom-formulaire  .texttransform18, .wpcf7 form .wpcf7-response-output {
        font-size: 1.3vw;
    }
    #bloc-inscris-toi .texttransform13, footer .bloc-reseau-sociaux a i {
        font-size: 1.53vw;
    }
    #bloc-ton-sejour .texttransform6, #bloc-ton-experience .texttransform9 {
        font-size: 1.7vw;
    }    
    #bloc-top-home  .texttransform2 {
        font-size: 2.05vw;
    }
    #bloc-top-home  .texttransform3 {
        font-size: 2.2vw;
    }
    #bloc-formulaire .texttransform16, #bloc-formulaire .bottom-formulaire .texttransform17 {
        font-size: 3.22vw;
    }    
    #bloc-ton-sejour .texttransform4, #bloc-ton-experience .texttransform7,
    #bloc-tes-lots .texttransform11, #bloc-inscris-toi .texttransform14 {
        font-size: 4.7vw;
    }

    #bloc-tes-lots .col-left {
        width: 65%;
    }
    #bloc-tes-lots .col-right {
        width: 35%;
    }
    #bloc-tes-lots .texttransform11 {
        text-align: center;
    }
    #bloc-tes-lots {
        height: 37vw;
    }
    #bloc-top-home .bloc-reseau-sociaux {
        right: 24.25%;
        margin-top: 11.1% !important;
        margin-left: 0 !important;
        font-size: 1.4vw;
    }
    .wpcf7-form-control.has-spinner.wpcf7-submit {
        font-size: 1.5vw !important;
        width: 20%;
        margin-top: -7vw;
    }
    footer .row.footer-topPart {
        margin-bottom: 30px;
        text-align: center;
    }
}

@media screen and (max-width: 991px) {
    footer .footer-topPart img {
        width: 20%;
        margin: 3%;
    }   
}

@media screen and (max-width: 700px) {
    #bloc-top-home {
        height: auto;
    }
    #bloc-top-home .col-left, #bloc-top-home .col-right {
        width: 100%;
    }
    #bloc-top-home .col-right {
        order: -1;
    }
    #bloc-top-home .bloc-reseau-sociaux {
        right: 35%;
        margin-top: 3% !important;
        margin-left: 0 !important;
        font-size: 15px;
        width: 30%;
        text-align: center;
    }
    #bloc-top-home .drapeau-home {
        width: 100%;
        padding: 0 10%;
        margin-top: 15%;
        margin-bottom: -10%;
    }
    #bloc-top-home .background-home {
        max-width: 100%;
        height: 1230px;
    }
    #bloc-top-home .logo-home {
        width: 50%;
        margin-top: 8%;
    }
    #bloc-top-home .texttransform1 {
        font-size: 15px;
        padding-left: 15%;
    }
    #bloc-top-home .texttransform2 {
        font-size: 24px;
        margin-left: 15%;
    }
    #bloc-top-home .texttransform3 {
        margin-left: 15%;
        font-size: 26px;
    }
    #bloc-top-home .btn-inscrire-home {
        width: 130px;
        margin-bottom: 10%;
    }
    #bloc-ton-sejour {
        margin-top: 10%;
    }
    #bloc-ton-sejour .col-left {
        width: 100%;
        padding-right: 10%;
    }
    #bloc-ton-sejour .col-right {
        width: 100%;
    }
    #bloc-ton-sejour .texttransform4 {
        font-size: 36px;
        margin-top: 8%;
        margin-left: 15%;
    }
    #bloc-ton-sejour .texttransform5 {
        font-size: 15px;
        margin-top: 5%;        
        padding-right: 15%;
    }
    #bloc-ton-sejour .texttransform6 {
        font-size: 18px;
        padding-left: 15%;
    }
    #bloc-ton-experience .col-left, #bloc-ton-experience .col-right {
        width: 100%;
    }
    #bloc-ton-experience .col-right {
        order: -1;
        margin-top: 3%;
    }
    #bloc-ton-experience .texttransform7 {
        margin-top: 8%;
        margin-left: 15%;
        font-size: 36px;
    }
    #bloc-ton-experience .texttransform8, #bloc-ton-experience .texttransform10 {
        margin-left: 15%;
        font-size: 15px;
        margin-top: 5%;
        padding-right: 15%;
    }
    #bloc-tes-lots {
        height: auto;
    }
    #bloc-ton-experience .texttransform9 {
        margin-bottom: -5px;
        font-size: 18px;
        padding-left: 15%;
    }
    #bloc-tes-lots .col-left, #bloc-tes-lots .col-right {
        width: 100%;
        overflow: hidden;
    }
    #bloc-tes-lots .slide-lots {
        position: relative;
        width: 120%;
    }
    #bloc-tes-lots .texttransform12 {
        margin-left: 15%;
        font-size: 15px;
        padding-right: 15%;
        color: black;
        float: right;
        margin-top: 1%;
    }
    #bloc-tes-lots .texttransform11 {
        float: right;
        margin-right: 15%;
        font-size: 36px;
        margin-left: 15%;
        padding: 0;
        margin-top: 8%;
    }
    #bloc-tes-lots .vetements-lots {
        width: 65%;
        margin-left: 10%;
        margin-top: 0%;
    }
    #bloc-inscris-toi {
        margin-top: 10%;
        margin-left: 15%;
    }
    #bloc-inscris-toi .texttransform13 {
        font-size: 18px;
    }
    #bloc-inscris-toi .texttransform14 {
        font-size: 36px;
    }
    #bloc-inscris-toi .texttransform15 {
        font-size: 15px;
        padding-right: 15%;
        margin-top: 1%;
    }
    #bloc-formulaire .top-formulaire.row {
        margin-left: 0% !important;
        margin-right: 5% !important;
    }
    #bloc-formulaire .bottom-formulaire .formulaire-bloc {
        margin-right: 10%;
    }
    .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required, .wpcf7-form-control.wpcf7-textarea,
    .wpcf7-form-control.wpcf7-text.walcf7-datepicker {
        font-size: 12px;
    }
    .wpcf7-form-control-wrap.date, .wpcf7-form-control-wrap.tel, .wpcf7-form-control-wrap.nom {
        margin-right: 10%;
    }
    .wpcf7-form-control.has-spinner.wpcf7-submit {
        width: 130px;
        margin-top: 15%;
        float: none;
        font-size: 20px !important;
        margin-left: 30%;
        margin-bottom: 5%;
        font-weight: 900;
    }
    .wpcf7-form-control.wpcf7-textarea {
        width: 100%;
    }
    .formulaire-bloc span.select-genre, .formulaire-bloc span.select-pointure, 
    .formulaire-bloc span.select-tshirt, .formulaire-bloc span.select-jogging {
        font-size: 12px;
        width: 30%;
        display: inline-block;
        margin-right: 5%;
        margin-bottom: 5%;
    }
    .formulaire-bloc span.select-genre {
        margin-bottom: 0%;
    }
    .wpcf7-form-control.wpcf7-select {
        font-size: 16px;
    }
    .wpcf7-form-control.wpcf7-select {
        width: 45% !important;
    }
    .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
        width: 45%;
        margin-right: 0;
    }
    .wpcf7 form .wpcf7-response-output {
        margin: 0 5% !important;
        font-size: 15px;
        text-align: center;
    }
    #bloc-formulaire .bottom-formulaire .texttransform17 {
        text-align: center;
        font-size: 34px;
        width: initial;
        line-height: 40px;
        margin: 5% 0 !important;
    }
    #bloc-formulaire .bottom-formulaire .texttransform18 {
        font-size: 15px;
        margin-left: 0%;
        text-align: center;
        margin-bottom: 8%;
        padding: 0 10%;
    }
     #bloc-formulaire .bottom-formulaire .drapeau-formulaire {
        width: 80%;
        margin: 0 10%;
        z-index: -1;
        margin-bottom: -10%;
        padding-left: 0%;
    }   
    #bloc-formulaire .bottom-formulaire .col-left {
        width: 100%;
        order: 2;
        display: none;
    }
    #bloc-formulaire .bottom-formulaire .col-right {
        width: 100%;
    }

    .header-reglement img {
        height: 120px;
        left: inherit;
        position: relative;
        top: -1%;
    }

    footer .bloc-reseau-sociaux {
        font-size: 12px;
    }
    footer .bloc-reseau-sociaux a i {
        font-size: 18px;
    }
    footer .footer-topPart img {
        width: 40%;
        margin: 5%;
    }
    footer .row.footer-bottomPart {
        font-size: 12px;
    }
}


@media screen and (max-width: 670px) {
    #bloc-top-home .background-home {
        height: 1200px;
    }
}
@media screen and (max-width: 630px) {
    #bloc-top-home .background-home {
        height: 1120px;
    }
}
@media screen and (max-width: 600px) {
    #bloc-top-home .background-home {
        height: 1075px;
    }
}@media screen and (max-width: 570px) {
    #bloc-top-home .background-home {
        height: 1030px;
    }
}@media screen and (max-width: 530px) {
    #bloc-top-home .background-home {
        height: 975px;
    }
}
@media screen and (max-width: 500px) {
    #bloc-top-home .background-home {
        height: 930px;
    }
}
@media screen and (max-width: 475px) {
    #bloc-top-home .background-home {
        height: 890px;
    }
}
@media screen and (max-width: 450px) {
    #bloc-top-home .background-home {
        height: 850px;
    }
}
@media screen and (max-width: 425px) {
    #bloc-top-home .background-home {
        height: 820px;
    }
}
@media screen and (max-width: 400px) {
    #bloc-top-home .background-home {
        height: 780px;
    }
}
@media screen and (max-width: 375px) {
    #bloc-top-home .background-home {
        height: 740px;
    }
}