header { width: 100%; height:6rem;  }



  .logo { float:left; width:auto;  }

.etape {
  font-size: 1.3em;
}

#titre1 {
  text-decoration: underline;
  font-size: 2.1em;
  font-weight: bold;
}
.button {
  font-size: 16px
}
.texte9 {
  font-size: 1.3em;
}
  .phone { padding-top: 2.3rem; }



    .phone a { color: #c1002c; text-decoration: none; font-size:1.2rem; text-transform: uppercase; font-family: 'Roboto', sans-serif;  }
}


.menubox {
    background-color: #fff;
}


  .headerred {  /* The image used */

    background-image: url("fond-page-parcours.jpg");

    /* Create the parallax scrolling effect */

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;
    padding:2%;
    color: #fff;
    text-align:center;

}
.headerred .titre {
  color: #FFF;
  font-size: 1.6em;
  font-weight: bold;
  text-align: center;
}


.slogan { width:70%; float:left; padding-top: 3.5rem;  font-family: 'Roboto', sans-serif;}



.slogan p { color:#FFF; font-size:2.5rem; font-weight:bold;}







#intro_form { width:350px; float:left; margin:0 auto; padding-top:3.5rem; }



.form_register {

    width: 100%;

    background: rgba(0, 0, 0, 0.3);

    margin: 0 auto;

    padding: 20px 35px 25px;

}





.form_register .form-control {

    height: 30px;

    margin-bottom: 15px;

    margin-left:-12px;

    border: 1px solid #ddd;

    -webkit-border-radius: 0;

    -moz-border-radius: 0;

    border-radius: 0;

}



.form_register h2 { font-family: 'Roboto', sans-serif; color: #1495CC; text-align: center; font-weight:600; } 





.form-control {

    display: block;

    width: 100%;

    height: 34px;

    padding: 6px 12px;

    font-size: 14px;

    line-height: 1.42857143;

    color: #555;

    background-color: #fff;

    background-image: none;

    border: 1px solid #ccc;

    border-radius: 4px;

    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);

    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

}





@import url('https://fonts.googleapis.com/css?family=Roboto');





.btn-primary:hover { background: #FF002A;}





#form_register_btn {

    margin: 0px auto;

}



p {  font-family: 'Roboto', sans-serif; }



.rouge { font-size: 1.2rem; color:#c1002c; font-weight: bold;}



#about-1 { margin:2rem 0; width:35%; float:right;}



#about-01 { margin:2rem 0; }



.para1 { width:100%; text-align: center; }



#about-1 h2 { color: #3d3d3d; font-size: 1.5rem; text-transform: uppercase ; font-family: 'Roboto', sans-serif; }



#about-01 h2 { color: #3d3d3d; font-size: 1.5rem; text-transform: uppercase ; font-family: 'Roboto', sans-serif; }





.button01  {   margin:3rem auto; width: 200px; }



  .button01 a {  background: #f2c543; padding: 1rem; text-align: center; color: #3d3d3d; 

  text-transform: uppercase; font-family: 'Roboto', sans-serif; text-decoration: none; font-weight: bold; transition: all 1s ease-out; }





 .button01 a:hover {   background: #3d3d3d; color: #FFFFFF; }



.para2 {   }



#para3 { background: #f2c543; padding: 1.5rem; text-align: center;  }





.gros { text-transform: uppercase; font-size:1.5rem; font-weight:bold; font-family: 'Roboto', sans-serif;  color: #363636;  }



.clear { clear:both;}



hr { width:30%; margin:0 auto;}



#about-2 { margin:2rem 0 0 3rem; width:55%;  float:left; margin-top: 10px; }

#about-2 h2 { color: #3d3d3d; font-size: 1.5rem; text-transform: uppercase ; font-family: 'Roboto', sans-serif; }



#about-2 img { margin-top: 4rem; }



#partenaires { padding:4rem 0; margin-top: 4rem;}



#partenaires h2 { color:#c1002c; text-transform: uppercase; text-align: center; font-size: 2rem; font-weight: bold; font-family: 'Roboto', sans-serif; margin-bottom:2rem;}



#partenaires p { text-align: center;}



#about-2 h3 { color:#c1002c; text-transform: uppercase; font-size: 2rem; font-weight: bold; font-family: 'Roboto', sans-serif; margin-top:4rem;}



#partenaires { background:#f3f3f3; }







#prefooter {background:#c1002c!important; padding: 2rem 0 1rem; }



.logo-prefooter { width:150px; float: left; margin-right: 35px;}



.address { width:auto; float: left;}



.address p { color:#FFF; }



.sociaux { width:auto; float: right; padding-top: 3rem; }



.sociaux ul li { list-style: none; display: inline-block; margin: 0 0.5rem;}



.logo-exploseo { width:400px; margin:0 auto; padding:0.5rem 0; }



.logo-exploseo img { float:left; }





.logo-exploseo p a { margin-left: 1rem; text-decoration: none; color:#333; line-height: 1.5rem;}









.topnav {

  overflow: hidden;

  background-color: none;

  width: 800px; float: left;

  margin: 0 auto;

  text-align: center;

  padding-top: 1.5rem;

}



.topnav a {

  display: inline-block;

  color: #333;

  font-size:1.2rem;

  text-transform: uppercase;

  font-family: 'Roboto', sans-serif;

  margin:0 auto;

  padding: 14px 16px;

  text-decoration: none;

}



.topnav a:hover {

  background-color: none;

  color: #c1002c;

}



.active {

  background-color: #4CAF50;

  color: white;

}



.topnav .icon {

  display: none;

}



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



  .containerprospac { width:100%; margin:0 auto; position: fixed;}



  .logo { float:left; width:100%; text-align: center; background: #FFF;  height:7rem; position: relative; }



  .logo img{ padding-top:0.8rem; }



  .phone {  width:100%; text-align: center; background:#EEE; float:left; padding: 0.5rem 0; position: fixed; top:7rem; }

 

    .phone a { color: #c1002c; text-decoration: none; font-size:1.2rem; text-transform: uppercase; font-family: 'Roboto', sans-serif;  }



    .slogan { width:100%;  padding-top: 4rem;  font-family: 'Roboto', sans-serif; margin: 0 auto;}



.slogan p { text-transform:uppercase; color:#FFF; font-size:1.8rem; font-weight:bold; text-align: center;}



    #intro {  /* The image used */

    background-image: url("fond-page-parcours.jpg");



    /* Set a specific height */

    height: 900px; 



    /* Create the parallax scrolling effect */

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.container { width: auto;  padding: 0 1rem; margin: 0 auto; }



#intro_form { width:100%; margin:0 auto; padding-top:2.5rem;  }



.form_register {

    width: auto;

    background: rgba(0, 0, 0, 0.3);

    margin: 0 auto;

    padding: 20px 35px 25px;

}





#about-1 { margin:2rem 0; width:100%; float:left;}



#about-2 { margin:2rem 0 ; width:100%;  float:left; }





#about-2 img {  width:100%;  }





.para1 { width:100%;   }

.para1 img{ width:100%;    }



.para2 { width:100%;  float:none ; margin-left: 0; }

.para2 img{ width:100%;    }



#para3 { background: #f2c543; padding: 1.5rem; text-align: center; float:none ; }



.col1{  padding:0.1rem 1.2rem 0; margin:0 auto; float:none; }



.customer-logos { margin: 3rem auto 0; width:100%; } 



.logo-exploseo { width: auto; margin:0 auto; padding:0.5rem 0; }



.sociaux { width:350px; padding-top: 3rem; margin: 0 auto; float:none; }



.sociaux a { text-decoration: none; }



.slick-slide img {

    width: auto; margin: 0 auto;

}



.image03 {  width: 100%;  margin: 0 auto; }



.image03 img{ width: auto; margin: 0 auto; }





  .topnav {

  overflow: hidden;

  background-color: none;

  width: 100%; float: left;

  position: fixed;

  z-index: 99;

  top: 0; right:0;

  margin: 0 auto;

  text-align: center;

}



  .topnav a {display: none;}

  .topnav a.icon {

    float: right;

    display: block;



  }





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

  .topnav.responsive {position: fixed; top: 0; background:#FFF;}

  .topnav.responsive .icon {

    position: fixed;

    right: 0;

    top: 0;



  }

  .topnav.responsive a {

    float: none;

    display: block;

    text-align: center;

    background:none;

    color: #b50027;

  }

}

}





/* min-width 641px, medium screens and up

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

@media (min-width: 640px) and (  max-width: 1024px )  {



  .containerprospac { width:100%; margin:0 auto; position: fixed;}



  .logo { float:left; width:100%; text-align: center; background: #FFF;  height:7rem; position: relative; }



  .logo img{ padding-top:0.8rem; }



  .phone {  width:100%; text-align: center; background:#EEE; float:left; padding: 0.5rem 0; position: fixed; top:7rem; }

 

    .phone a { color: #c1002c; text-decoration: none; font-size:1.2rem; text-transform: uppercase; font-family: 'Roboto', sans-serif;  }



    .slogan { width:50%;  padding-top: 5rem;  font-family: 'Roboto', sans-serif; margin: 0 auto;}



.slogan p { text-transform:uppercase; color:#FFF; font-size:1.8rem; font-weight:bold; text-align: left;}



    #intro {  /* The image used */

    background-image: url("fond-page-parcours.jpg");



    /* Set a specific height */

    height: 500px; 



    /* Create the parallax scrolling effect */

    background-attachment: fixed;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}



.container { width: auto;  padding: 0 1rem; margin: 0 auto; }



#intro_form { width:50%; margin:0 auto; padding-top:5rem;  }



.form_register {

    width: auto;

    background: rgba(0, 0, 0, 0.3);

    margin: 0 auto;

    padding: 20px 35px 25px;

}





#about-1 { margin:2rem 0; width:100%; float:left;}
#about-2 { margin:2rem 0; width:100%; float:left;}





.para1 { width:100%;   }

.para1 p { width:100%; }

.para1 img{ width:100%;   }



.para2 { width:100%;  margin-left: 0; }

.para2 p { width:100%; }

.para2 img{ width:100%;   }



#para3 { width: auto;  }





.customer-logos { margin: 3rem auto 0; width:100%; } 



.logo-exploseo { width: 400px; margin:0 auto; padding:0.5rem 0; }



.sociaux { width:320px; padding-top: 3rem; margin: 0 auto; float:right; }



.sociaux a { text-decoration: none; }



.slick-slide img {

    width: auto; margin: 0 auto;

}



.image03 {  width: 100%;  margin: 0 auto; }



.image03 img{ width: auto; margin: 0 auto; }





  .topnav {

  overflow: hidden;

  background-color: none;

  width: 100%; float: left;

  position: fixed;

  z-index: 99;

  top: 0; right:0;

  margin: 0 auto;

  text-align: center;

}



  .topnav a {display: none;}

  .topnav a.icon {

    float: right;

    display: block;



  }





@media screen and (min-width: 640px) {

  .topnav.responsive {position: fixed; top: 0; background:#FFF;}

  .topnav.responsive .icon {

    position: fixed;

    right: 0;

    top: 0;



  }

  .topnav.responsive a {

    float: none;

    display: block;

    text-align: center;

    background:none;

    color: #b50027;

  }

}







}





.slogan h1 {

    color: #FFF;

    font-size: 1.5rem;

    font-weight: bold;

    text-align: center;

    margin-bottom: 2rem;

}



.slogan li {

    color: #FFF;

    font-size: 1.3rem;

    font-weight: bold;

    margin-left: 0;

}



.slogan li {

    list-style-type: none;

}



.fa {

    display: inline-block;

    font-family: FontAwesome;

    font-style: normal;

    font-weight: normal;

    line-height: 1;

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

    margin-right: 10px;

}



.fa-check:before {

    content: "✔";

}



.slogan p {

    color: #FFF;

    font-size: 1rem;

    font-weight: normal;

    margin-left: 2rem;

}







#form_register_btn {

    margin: 0px auto;

    text-align: center;

}



.slogan li 

{

  list-style-type: none;

}



.customer-logos .slide

{

  text-align: center;

}



#intro_form label 

{

  color: lightgrey;

}





@media (min-width: 1024px) and (  max-width: 1224px )  {



  .container_haut

  {

    width:1224px;

  }



  .para1, .para2

  {

    width:95%;

    float: inherit;

    margin:auto;

  }



}





@media (min-width: 200px) and (  max-width: 350px )  {



  .col1, .col2, .col3

  {

    width:auto;

  }



  .col3

  {

    background-image: none;

  }



}



@media (max-width: 1024px) and (min-width: 640px){

  .slogan p {

      color: #FFF;

      font-size: 1rem;

      font-weight: normal;

      margin-left: 2rem;

      text-align: left;

  }





.slogan li {

    color: #FFF;

    font-size: 1rem;

    font-weight: bold;

    margin-left: 2rem;

    text-align: left;

    list-style-type: none;

}



.slogan h1 {

    color: #FFF;

    font-size: 1.5rem;

    font-weight: bold;

    width: 90%;

    text-align: left;

}



}





@media (max-width: 1024px) and (min-width: 640px){

  .slogan {

      width: 48%;

      padding-top: 5rem;

      font-family: 'Roboto', sans-serif;

      margin: 0 auto;

      margin-right: 2%;

  }

}



@media (max-width: 1024px) and (min-width: 902px){

  #intro {

      height: 600px;

  }

}



@media (max-width: 902px) and (min-width: 768px){

  #intro {

      height: 700px;

  }

}





@media (max-width: 902px) and (min-width: 768px){

  #intro {

      height: 700px;

  }

}





@media (max-width: 768px) and (min-width: 200px){

  .slogan {

      width: 100%;

      margin: 0 auto;

  }



  .slogan h1

  {

    margin: auto;

    margin-bottom: 2rem;

  }



  #intro_form {

    width: 100% !important;

    margin: 0 auto;

    padding-top: 30px;

  }



  #intro {

      height: 900px;

      background-repeat: unset;

  }



}



@media (max-width: 588px) and (min-width: 568px){

  #intro {

      height: 950px;

      background-repeat: unset;

  }

}



@media (max-width: 568px) and (min-width: 501px){

  #intro {

      height: 950px;

      background-repeat: unset;

  }

}





@media (max-width: 501px) and (min-width: 400px){

  #intro {

      height: 1030px;

      background-repeat: unset;

  }

}



@media (max-width: 400px) and (min-width: 350px){

  #intro {

      height: 1080px;

      background-repeat: unset;

  }



  #form_register_btn .btn

  {

    font-size: 20px!important;

  }

}



@media (max-width: 350px) and (min-width: 340px){

  #intro {

      height: 1150px;

      background-repeat: unset;

  }

  #form_register_btn .btn

  {

    font-size: 20px!important;

  }

}



@media (max-width: 340px) and (min-width: 321px){

  #intro {

      height: 1200px;

      background-repeat: unset;

  }

  #form_register_btn .btn

  {

    font-size: 20px!important;

  }

}



@media (max-width: 320px) and (min-width: 200px){

  #intro {

      height: 1260px;

      background-repeat: unset;

  }



  #form_register_btn .btn

  {

    font-size: 18px!important;

  }

}





.slogan p

{

  text-transform: inherit;

  text-align: left;

}



@media (max-width: 420px) and (min-width: 200px){

	.slogan h1 {

    font-size: 1.5rem;

    font-weight: bold;

    text-align: center;

    margin-bottom: 2rem;

	}



	.slogan li {

    font-size: 1.3rem;

    font-weight: bold;

    margin-left: 0;

	text-align: center !important;

	}

	.slogan p

	{

	text-transform: inherit;

	text-align: justify !important;

	}

	h2

	{

	font-size: 1.4rem !important;

	}

}





.form_register a{

  cursor:pointer;

  color:white;

}



.form_register a:hover{

  color:white;

}



.form_register h1{

  font-size:2em;

  margin-bottom:20px;

}



.form_register h2{

  font-size:1.4em;

  margin-bottom:15px;

}



.form_register h3{

  font-size:1.3em;

  margin-bottom:15px;

}



.form_register p{

  font-size:1.3em;

}



.form_register .center{

  text-align:center;

}



.form_register .forminput{

  width:100%;

  padding:5px;

  color:#222;

}



.tastosubmit {

  padding: 10px 35px;

  font-weight:bold;

  color: #95CDF1;

  text-align: center;

  border-bottom: 4px solid rgba(0, 0, 0, 0.2);

  cursor: pointer;

  background-color:#fafafa;

  font-size:1.8em;

}



.form_register .tastosubmit:hover{

  color: #95CDF1;

  text-decoration:none;

}



.form_register .tastosubmit:focus{

  border-top: 4px solid rgba(0, 0, 0, 0.2);

  border-bottom: 0;

}



button:focus {

  outline:0!important;

}



input:focus {

  outline:0!important;

}



.form_register .formview{

  height:100%;

  margin-top:10px;

}



.form_register .formview .fvg{

  display:none;

}



.form_register .formview .fvg.vis{

  margin-bottom: 15px;

  display:block;

}



.form_register input.txtinput{

  display: block;

  margin: 30px 0;

  padding: 0 0 0.15em;

  width: 100%;

  border: none;

  border-bottom: 2px solid rgba(255,255,255,0.2);

  background-color: #ffffff;

  color: #000000;

  text-overflow: ellipsis;

  font-weight: bold;

  font-size: 24px;

  border-radius: 0;

  text-align:center;

  margin: 5px 0 0px;

}



.form_register textarea.txtinput{

  display: block;

  margin: 30px 0;

  padding: 0 0 0.15em;

  width: 100%;

  border: 2px solid rgba(255,255,255,0.3);

  background-color: transparent;

  color: #fafafa;

  text-overflow: ellipsis;

  font-size: 1em;

  border-radius: 0;

  text-align:center;

  }

  .form_register .formlbl{

  display: inline-block;

  font-weight: 700;

  pointer-events: none;

}



.form_register .flatbtnform{

    text-align: center;

    cursor: default;

    color: #FFf;

    background-color: #1495CC;

    border-style: none;

    margin: 0 auto!important;

    box-sizing: border-box;

    padding: 10px 20px 10px;

    font-family: 'Roboto', sans-serif;

    font-size: 16px;

    font-weight: 600;

    transition: all 0.5s ease;

    cursor: pointer;

    display: inline-block;

    width: 120px;

}



.form_register .flatbtnform:hover,.flatbtnform:focus{

  background-color:white;

  color:rgb(149, 205, 241);

  text-decoration:none;

}



.form_register .flatbtnform.small{

  padding:8px 50px;

  margin:10px;

  font-size:1em;

}



.form_register .progform{

  display:block;

  text-align:left;

  background-color: white;

  border-radius: 10px;

  height: 10px;

}



.form_register .progbar{

  border-bottom:10px solid #1495cc;

  border-radius:5px;

  display:inline-block;

  vertical-align: top;

}



.form_register .progform span{

  margin-left:5px;

  display: none;

}



.form_register .error{

  color:red;

}



.form_register #sign{

    color:#ddd;

    position:fixed;

    right:10px;

    bottom:10px;

    text-shadow:0px 0px 0px #fafafa;

    transition:all.3s;

}



.form_register #sign:hover{

  color:#fafafa;

  text-shadow:0px 0px 5px #fafafa;

}



.form_register label

{

    font-family: 'Roboto', sans-serif;

    color: #FFF !important;

    text-align: center;

    font-weight: 600;

    font-size: 14px;

}



#ind

{

  background-color: white;

  color: rgb(149, 205, 241);

  text-decoration: none;

}



#ind:hover

{

  background-color: rgb(149, 205, 241);;

  color: white;

  text-decoration: none;

}



@media (min-width: 1025px) and (max-width: 1330px)  {

  

  #intro_form {

    width: 300px;

    float: left;

    margin: 0 auto;

    padding-top: 3.5rem;

  }

}













/* Customize the label (the content_radio) */

.content_radio {

  display: inline-block;

  position: relative;

  padding: 0px 2px 0 20px;

  margin-bottom: 12px;

  cursor: pointer;

  font-size: 22px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}



/* Hide the browser's default radio button */

.content_radio input {

  position: absolute;

  opacity: 0;

}



/* Create a custom radio button */

.checkmark {

  position: absolute;

  top: 0;

  left: 0;

  height: 16px;

  width: 16px;

  background-color: #fff;

  border-radius: 50%;

}



/* On mouse-over, add a grey background color */

.content_radio:hover input ~ .checkmark {

  background-color: #ccc;

}



/* When the radio button is checked, add a blue background */

.content_radio input:checked ~ .checkmark {

  background-color: #2196F3;

}



/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



/* Show the indicator (dot/circle) when checked */

.content_radio input:checked ~ .checkmark:after {

  display: block;

}

.formtxt {
	clear: both;
	padding-top: 15px;
    padding-bottom: 15px;
    font-size: 16px;
}

.temoignages {
	margin-top: 0px;
	text-align: center;
	font-size: 22px;
	font-weight: 500;
}
.temoignages_content {
	padding: 25px;
    margin-top: 20px;
	background: #f4f4f4;
	margin-bottom: 35px;
	padding-bottom: 12px;
}
.temoignages_content p {
	font-size: 15px;
}
.temoignages_title a {
	display: inline-block;
}
.temoignages_title .name {
	display: block;
    line-height: 50px;
    font-weight: 700;
    margin-left: 75px;
    margin-top: -50px;
}
.temoignages_title a img{
	max-width: 50px;
    max-height: 50px;
    border-radius: 50px;
    margin: 0px !important;
}

.cliquezici {
	background-color: #a937fb !important;
    border: 2px solid #a937fb !important;
    color: white;
    text-decoration: none;
    letter-spacing: 2px !important;
    display: block;
    box-shadow: none;
    opacity: 1;
    position: relative;
    width: max-content !important;
    padding: 0.3em 1em !important;
    border: none;
    cursor: pointer;
    transition: color 300ms ease 0ms,background-color 300ms ease 0ms,border 300ms ease 0ms,letter-spacing 300ms ease 0ms;
    font-size: 18px;
    text-transform: uppercase;
    line-height: 1.7em !important;
    font-weight: 500;
    font-family: 'Montserrat',Helvetica,Arial,Lucida,sans-serif !important;
    margin: auto;
    margin-top: 15px;
}
.cliquezici:hover {
	color: #a937fb !important;
    background-color: transparent !important;
}

.div_checkbox input[type="radio"] {
	display: inherit !important;
}
.div_checkbox .radio.inline {
	margin-left: -20px;
}