/***** Created by : KHAI-WAY *********************/



body { font-family: 'Vinci Sans', sans-serif;}

/***********************************************************HEADER LOGO *******************************************/
header {color:#001830;min-height: 70px;padding: 15px 0;color: #41422d; font-size: 45px}
header .slogan{text-align: right;}
header .slogan span{font-weight: bold;}

.logo img{width: 100%}

.responsive {display:none;}
.desktop {display:block;}
.second-verb{display: none}

/*********************************************************** OFFRE *******************************************/
section.offre{min-height: 680px}
section.offre .accroche h1 {font-size:38px;color:#ca4645;font-weight: 500;margin-bottom: 0px;line-height: 1.2; margin-top: 5px;padding: 0 10px;text-transform: uppercase;}
section.offre .accroche p { font-size:24px;color:#000;font-weight: 500;line-height: 1.3;padding: 10px;}

section.offre .accroche2{background-color: rgba(255,255,255,0.5)}
section.offre .accroche2 p{font-size: 40px; font-weight: 600; color:#41422d; }
.thx{padding-top: 30px;}


.recapitulatif section.offre .accroche h1 {text-transform: capitalize;}
section.offre .accroche img{width: 95%;padding-top: 30px}

.principale-content > figure {
  animation: imageAnimation 36s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  min-height: 680px;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 100px;
  width: 100%;
  z-index: 0;
}


.principale-content > figure:nth-child(1) { background-image: url(/assets/ovelia/img/bgd1.jpg); }

.principale-content > figure:nth-child(2) {
  animation-delay: 6s;
  background-image: url(/assets/ovelia/img/bgd2.jpg);
}

.principale-content > figure:nth-child(3) {
  animation-delay: 12s;
  background-image: url(/assets/ovelia/img/bgd3.jpg);
}

.principale-content > figure:nth-child(4) {
  animation-delay: 18s;
  background-image: url(/assets/ovelia/img/bgd1.jpg);
}

.principale-content > figure:nth-child(5) {
  animation-delay: 24s;
  background-image: url(/assets/ovelia/img/bgd2.jpg);
}

.principale-content > figure:nth-child(6) {
  animation-delay: 30s;
  background-image: url(/assets/ovelia/img/bgd3.jpg);
}



/******************************************* FORMULAIRE *************************************************************/
.right-form{background-color:#fff;margin-top: 30px;box-shadow: 3px 1px 8px -1px rgba(0,0,0,0.40)}
.form {padding:25px 35px;}
.title-form {padding:15px 10px 15px 10px;text-align: center;font-size:28px;line-height:1.1;color:#fff; background-color: #80acbd}
.title-form span {font-weight: bold;}
.form-group{border-bottom: 1px solid #000}
.end-form{border: none}
.title-form .filet {width:80px;margin-top:10px;border-top:3px solid #a28829;text-align: center;}
.btn-default, .form-control {border-radius:3px;border:none;-webkit-box-shadow: none;box-shadow: none;}
.form-control{font-family: 'Vinci Sans',sans-serif;font-weight: 400; color:#000;font-size: 17px}
.form-control::placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder {color:#000;}
#optin1{display: inline-block;width: 15px}
#ui-datepicker-div{ background-color: #fff; border: 1px solid #000; width: 260px;text-align: center;padding: 15px;}
.ui-datepicker-title{padding: 8px}
.ui-icon{padding: 15px}
.ui-datepicker-month, .ui-datepicker-year{width: 60px; height: 30px}
th, td{padding: 8px}
.label {color:#616161; font-size: 12px;font-weight:200; white-space: normal;vertical-align: sub;line-height:0.8;padding-left: 20px;text-align: justify;font-family: 'Vinci Sans', arial, sans-serif;}
#professionnel, #type_de_formation{padding: 7px}


.btn-participer {width:100%;padding:20px 0;background-color: #deb406;color:#fff;font-size:26px;font-weight:500;line-height:1;border:none;border-radius: 35px; text-transform: uppercase;font-family: 'Vinci Sans', arial, sans-serif;}

.name, .cp{padding-right: 5px}
.adresseH{margin-bottom: 0}
input[type="radio"], input[type="checkbox"]{
    width: 5%;margin-top: -3px;position: absolute
}
.custom-control-label{font-weight: 100;font-size: 11px; float: right; width: 90%}

textarea.form-control {height:90px;}
.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
    font-size: 10px;
}
.dropdown-menu > li > a {
    padding: 3px 5px;
}

.accroche2 span{font-size: 36px;font-weight: 400}


/************************************************************* SECTION **********************************/
.line {padding:50px 0 50px 0;}
.satisfactionC{padding-top: 100px}
.intro{text-align: center;font-size: 18px;padding-bottom: 30px;color: #41422d}
.intro h1{text-align: center; font-size: 45px; font-weight: 600;color: #41422d;padding-bottom: 8px}
.sous-text{width: 60%;margin: auto}


.fin-picto{font-size: 20px;padding: 30px 25px;color: #41422d;text-align: center; }
.fin-picto img{margin-bottom: 15px; width: 100%;}
.fin-picto h4{text-align: center; font-size:30px; font-weight: 500}
.fin-picto span{font-size: 24px; color: #deb406}
.fin-picto p{text-align: justify}

.qualite{padding: 0px 0 30px 0}
.qualite h2{color: #fff;font-size: 42px;text-align: center}


.cpf{text-align: center}
.cpf img{width: 100%; padding-top: 30px}
.txt-cpf{padding-top: 40px;font-size: 16px; font-family: 'helvetica', sans-serif;}

.verb img{width: 100%; padding-bottom: 50px}
.partenaire img{width: 100%;padding-bottom: 5px}
.partenaire {padding-bottom: 50px; text-align: center; font-family: 'Vinci Sans', sans-serif; font-size: 16px; color:#fff}
.partenaire span{font-weight: 500; font-size: 21px}
.partenaire p{margin: 10px 30px}

.reussite img{width: 100%}
.reussite{text-align: center}
.reussite2{ font-family: 'helvetica', sans-serif;text-align: center;padding: 5px 0}

.line .btn-bottom {text-align: center;margin-top: 30px;margin-bottom: 10px}
.line .btn-bottom .btn-participer2 {width:500px;padding:20px 0;text-transform:uppercase;background-color: #deb406;color:#fff;font-size:30px;font-weight:500;line-height:1;border:none;border-radius: 35px;font-family: 'Vinci Sans', arial, sans-serif;}


.testimonial {margin-bottom:25px;text-align: justify;font-size:1em;}
.testimonial h3 {font-size:21px;font-weight:bold;}
.testimonial video {width:100%;}

.verbatim{padding-bottom: 30px;}
.logoCo{background-color: #80acbd; }

/********************************************************* FOOTER ****************************************/
footer {padding:20px 0;background-color: #928a83;color:#fff;font-family: 'Vinci Sans', sans-serif;}
footer .ml {font-size:0.85em;font-weight:400;text-align: justify;}




@keyframes imageAnimation { 0% {
 animation-timing-function: ease-in;
 opacity: 0;
 
}
 8% {
 animation-timing-function: ease-out;
 opacity: 1;
 
}
 17% {
 opacity: 1;
 
}
 25% {
 opacity: 0;

}

 100% {
 opacity: 0
 
}
}


/********************************************************* RESPONSIVE ****************************************/

@media (max-width: 1199px){
    section.offre .accroche h1{ font-size: 32px}
    .btn-participer{font-size: 1em}
    section.offre .accroche .gras{font-size: 40px;}
    .sous-text{width: 70%;}
    
}

@media (max-width: 990px) {
    .responsive {display:block;}
    .responsive img {width:100%;}
    .desktop {display:none;}
    section.offre {padding:0; background-image: none; background-color: #fff}
    .logo{text-align: center;}
    header .devenir{display: none}
    .right-form{margin-top: 0;}
    .formulaire, .responsive{padding: 0;}
    .logo img{width:210px}
   header .slogan{text-align: center;padding: 15px 0}
    .btn-participer{font-size: 1.2em}
    .name, .cp{padding-right: 15px}
    .lastname, .town{}
    input[type="radio"], input[type="checkbox"]{width: 2%;top:-1px}
    .custom-control-label{width: 95%; padding-bottom: 10px}
    section.offre{min-height: 0}
    .satis{padding-top: 60px}
    .recapitulatif section.offre {min-height:250px;}
    .principale-content figure{display: none;}
    .sous-text{width: 90%;}
    .partenaire img{width:200px;padding-bottom: 5px}

}

@media (max-width: 751px) {
    .txt-cpf{padding-top: 30px;}
    header .slogan{font-size: 35px}
    header{padding: 0}
    .logo img{width:180px}
    .sous-text{width: 100%;}
    
}

@media (max-width: 600px) {
    .line .btn-bottom .btn-participer2 {width:100%;font-size: 18px}
    input[type="radio"], input[type="checkbox"]{width: 3%;}
    .bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
        font-size: 9px;
    }
   
    .second-verb{display: block}
    .first-verb{display: none}
    .titreClasse{font-size: 18px}
    .fin-picto{font-size: 16px}
    header .slogan{font-size: 22px}

}