/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 18 juin 2019, 10:33:49
    Author     : Clara
*/

body {
    width: 70%;
    margin: auto;
}
.form-control {
    font-size: 22px !important;
}
/* HEADER */
h2 {
    color: #0072bc !important;
    text-align: center;
    font-size: 118% !important;
    margin-top: 2% !important;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    font-size: 44px;
    margin-top: 0 !important;
}
img.logo {
    width: 76%;
    margin: auto;
    display: block;
    margin-top: 1%;
}

/* Script deviprox **********************************************************/

#div_NPTIC_coreg label{
	color: #0072bc !important;
	display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

#div_NPTIC_coreg a{
    color: #9498ac !important;
}
/* END Script deviprox ******************************************************/

/* SECTION 1*/

.container-fluid.fondbleu {
    background-color: #3793CF;
}
.col-lg-4.vert {
    background-color: #f03891;
    border-radius: 0 0 100px 0;
}
.gauche {
    color: white;
    font-size: 35px;
    margin: 5% 0 5% 4%;
    font-weight: bold;
    text-align: center;
}
.col-lg-8.bleu {
    background-color: #3793CF;
}
h3.droit {
    color: white;
    font-size: 35px;
    text-align: center !important;
    font-weight: bold;
    margin: 37px 0;
}
.col-lg-12.fond {
    padding: 0 !important;
}
img.desk {
    width: 100%;
}

/* SECTION 2 */

.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
	    width: 23%;
}
img.chrono {
    /*width: 66%;*/
	width: 64%;
    margin: auto;
    display: block;
    margin-top: 10%;
}
p.min {
    text-align: center;
    color: white;
   /* font-size: 32px;*/
       font-size: 31px;
    margin-top: 16%;
}

.col-lg-9.formulaire {
    background-color: #3793cf;
   /* height: auto;*/
    padding: 0 100px;
	height: 466px;
}
h3.info {
    color: white;
    text-align: center;
    font-size: 33px;
    font-weight: bold;
    margin-bottom: 5%;
}

/* FORMULAIRE */

label {
    color: white !important;
}
select.type_volet {
    padding: 7px;
    width: 100%;
    border-radius: 4px;
}
select.civilite {
    padding: 7px;
    width: 120%;
    border-radius: 4px;
}
button#submit-button {
    background-color: #f03891;
    width: 60%;
    margin: 4% auto;
    display: block;
    font-size: 20px;
    font-weight: bold;
    border: none;
}
p.confirmation {
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5%;
}
.col-lg-9.confirmation {
    background-color: #3793cf;
    height: 422px;
    padding: 0 100px;
	width: 77%;
}
/* SECTION 3 */

section.section3 {
    margin-top: 4%;
}
.col-lg-4.border {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 86px;
    width: 29%;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    width: 29%;
}
img.icones {
    width: 23%;
    margin: auto;
    display: block;
}
p.texteicone {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    margin-top: 4%;
    margin-bottom: 0 !important;
}

/* SECTION 4 */
section.section4 {
    /*margin-top: 4%;*/
/*	height: 466px;*/
    text-align: center;
    margin-bottom: 2%;
}
h3.titre3 {
    font-size: 32px;
    color: #3793CF;
    margin-bottom: 2%;
    font-weight: bold;
}
p.textefin {
    font-size: 18px;
}
.col-lg-6.tiret {
    border-right: solid 2px #f03891;
}
/* SECTION 5 */
section.section5 {
    margin-top: 4%;
    text-align: center;
    background-color: #3793cf;
    color: white !important;
    padding: 30px;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    margin-left: 71%;
    /* margin-top: -13%; */
    margin-top: -159px;
    width: 29%;
}
h3.titre4 {
    font-size: 32px;
    color: white;
    margin-bottom: 2%;
    font-weight: bold;
}
p.textesec5 {
    font-size: 18px;
}
/* FOOTER */

p.chartes {
    text-align: center;
    margin-top: 1%;
}

/* RESPONSIVE */
.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 65px;
    width: 29%;
    margin-left: 36%;
    margin-top: -127px;
}

@media screen and (min-width: 1440px) and (max-width: 8000px){
	
.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
    width: 23%;
    height: 433px;;
}
.col-lg-9.formulaire {
    background-color: #3793cf;
    /* height: auto; */
    padding: 0 100px;
  /*  height: 433px;*/
     height: 433px;
	    width: 77%;
}
button#submit-button {
    background-color: #f03891;
    width: 73%;
    margin: 4% auto;
    display: block;
    font-size: 20px;
    font-weight: bold;
    border: none;
    margin-top: 0%;
}



}

@media screen and (min-width: 1025px) and (max-width: 1440px){
	.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
	    width: 23%;
		    height: 406px;
}
.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 65px;
    width: 29%;
    margin-left: 36%;
    margin-top: -108px;
}
img.chrono {
    /*width: 66%;*/
	width: 64%;
    margin: auto;
    display: block;
    margin-top: 10%;
}
p.min {
    text-align: center;
    color: white;
   /* font-size: 32px;*/
       font-size: 31px;
    margin-top: 16%;
}
	input#lastname {
    width: 97%;
    margin-left: 3%;
	font-size: 22px;
}
	select.civilite {
    padding: 7px;
    width: 148%;
    border-radius: 4px;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    font-size: 40px;
}
h3.droit {
    color: white;
    font-size: 30px;
    text-align: center !important;
    font-weight: bold;
    margin: 27px 0;
}
.gauche {
    color: white;
    font-size: 32px;
    margin: 2% 0 4% 2%;
    font-weight: bold;
}
h3.info {
    color: white;
    text-align: center;
    /*font-size: 34px;*/
	    font-size: 29px;
    font-weight: bold;
    margin-bottom: 5%;
}
/*.col-lg-9.formulaire {
    background-color: #3793cf;
    height: auto;
    padding: 0 60px;
	    height: 406px;
		width: 77%;
}*/
.col-lg-9.formulaire {
    background-color: #3793cf;
    height: auto;
    padding: 0 60px;
    /* height: 468px; */
    height: 406px;
    width: 77%;
    margin-left: 23%;
    margin-top: -426px;
}
button#submit-button {
    background-color: #f03891;
    width: 96%;
    margin: 4% auto;
    display: block;
    font-size: 20px;
    font-weight: bold;
    border: none;
	margin-top:-1%;
}
.col-lg-4.border {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 65px;
    width: 29%;
}

.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    margin-left: 71%;
    margin-top: -13%;
    width: 29%;
}
img.logo {
    width: 70%;
    margin: auto;
    display: block;
    margin-top: 7%;
}
}

@media screen and (min-width: 992px) and (max-width: 1024px){
body {
    width: 100%;
    margin: auto;
}

h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 14% 2% 14% !important;
    font-size: 48px;
}
.gauche {
    color: white;
    font-size: 32px;
    margin: 0% 0 0% 2%;
    font-weight: bold;
    text-align: center;
}
h3.droit {
    color: white;
    font-size: 30px;
    text-align: center !important;
    font-weight: bold;
    margin: 18px 0;
}
.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #3793cf;
    height: auto !important;
    padding: 0 60px;
    display: inline-block;
}
.col-lg-4.border {
    border: 2px solid #f03891;
    padding: 13px;
    width: 29%;
    margin: 0 auto 2% auto;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    margin-left: 71%;
    margin-top: -13%;
    width: 29%;
}
.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 65px;
    width: 29%;
    margin-left: 36%;
    margin-top: -13px;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    width: 29%;
    margin: 0 auto 2% auto;
}
.col-lg-6.tiret {
    border-right: none;
    border-bottom: solid 2px #f03891;
}
img.logo {
    width: 17%;
    margin: auto;
    display: block;
    margin-top: 1%;
}
}

@media screen and (min-width: 768px) and (max-width: 991px){
	.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
    margin-top: -1%;
}
body {
    width: 100%;
    margin: auto;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 2% 2% 2% !important;
    font-size: 48px;
}
.gauche {
    color: white;
    font-size: 32px;
    margin: 0% 0 0% 2%;
    font-weight: bold;
    text-align: center;
}
img.logo {
    width: 17%;
    margin: auto;
    display: block;
    margin-top: 1%;
}
h3.droit {
    color: white;
    font-size: 30px;
    text-align: center !important;
    font-weight: bold;
    margin: 18px 0;
}
.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #3793cf;
    height: auto !important;
    padding: 12px 60px;
}
h3.info {
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5%;
    margin-top: 0;
}
.col-lg-4.border {
    border: 2px solid #f03891;
    padding: 13px;
    width: 29%;
    margin: 0 auto 2% auto;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    width: 29%;
    margin: 0 auto 2% auto;
}
select.civilite {
    padding: 7px;
    width: 100%;
    border-radius: 4px;
}
button#submit-button {
    background-color: #f03891;
    width: 67%;
    margin: 4% auto;
    display: block;
    font-size: 20px;
    font-weight: bold;
    border: none;
}
.col-lg-6.tiret {
    border-right: none;
    border-bottom: solid 2px #f03891;
}
}
@media screen and (min-width: 570px) and (max-width: 767px){
	.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
    margin-top: -1%;
}
img.logo {
    width: 17%;
    margin: auto;
    display: block;
    margin-top: 1%;
}
body {
    width: 100%;
    margin: auto;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 2% 2% 2% !important;
    font-size: 48px;
}
.gauche {
    color: white;
    font-size: 32px;
    margin: 0% 0 0% 2%;
    font-weight: bold;
    text-align: center;
}
h3.droit {
    color: white;
    font-size: 30px;
    text-align: center !important;
    font-weight: bold;
    margin: 18px 0;
}
.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #3793cf;
    height: auto !important;
    padding: 12px 60px;
}
h3.info {
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5%;
    margin-top: 0;
}
.col-lg-4.border {
    border: 2px solid #f03891;
    padding: 13px;
    width: 29%;
    margin: 0 auto 2% auto;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    width: 29%;
    margin: 0 auto 2% auto;
}
select.civilite {
    padding: 7px;
    width: 100%;
    border-radius: 4px;
}
button#submit-button {
    background-color: #f03891;
    width: 96%;
    margin: 4% auto;
    display: block;
    font-size: 20px;
    font-weight: bold;
    border: none;
}
.col-lg-6.tiret {
    border-right: none;
    border-bottom: solid 2px #f03891;
}
}
@media screen and (min-width: 425px) and (max-width: 569px){
body {
    width: 100%;
    margin: auto;
}
img.logo {
    width: 17%;
    margin: auto;
    display: block;
    margin-top: 1%;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 10% 2% 10% !important;
    font-size: 40px;
}

.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 65px;
    width: 60%;
    margin-left: 20%;
    margin-top: -4px;
}
.gauche {
    color: white;
    font-size: 32px;
    margin: 0% 0 0% 2%;
    font-weight: bold;
    text-align: center;
}
h3.droit {
    color: white;
    font-size: 25px;
    text-align: center !important;
    font-weight: bold;
    margin: 18px 0;
}
.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #3793cf;
    height: auto !important;
    padding: 12px 60px;
}
h3.info {
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5%;
    margin-top: 0;
}
.col-lg-4.border {
    border: 2px solid #f03891;
    padding: 13px;
    width: 60%;
    margin: 0 auto 2% auto;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    width: 60%;
    margin: 0 auto 2% auto;
}
select.civilite {
    padding: 7px;
    width: 100%;
    border-radius: 4px;
}
button#submit-button {
    background-color: #f03891;
    width: 145%;
    margin: 4% -22%;
    display: block;
    font-size: 20px;
    font-weight: bold;
    border: none;
}
.col-lg-6.tiret {
    border-right: none;
    border-bottom: solid 2px #f03891;
}
}
@media screen and (min-width: 375px) and (max-width: 425px){
body {
    width: 100%;
    margin: auto;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 10% 2% 10% !important;
    font-size: 33px;
}
img.logo {
    width: 17%;
    margin: auto;
    display: block;
    margin-top: 1%;
}

.gauche {
    color: white;
    font-size: 32px;
    margin: 0% 0 0% 2%;
    font-weight: bold;
    text-align: center;
}
h3.droit {
    color: white;
    font-size: 25px;
    text-align: center !important;
    font-weight: bold;
    margin: 18px 0;
}
.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #3793cf;
    height: auto !important;
    padding: 12px 30px;
}
h3.info {
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5%;
    margin-top: 0;
}
.col-lg-4.border {
    border: 2px solid #f03891;
    padding: 13px;
    width: 60%;
    margin: 0 auto 2% auto;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    width: 60%;
    margin: 0 auto 2% auto;
}
select.civilite {
    padding: 7px;
    width: 100%;
    border-radius: 4px;
}
button#submit-button {
    background-color: #f03891;
    width: 100%;
    margin: 4% auto;
    display: block;
    font-size: 16px;
    font-weight: bold;
    border: none;
}
.col-lg-6.tiret {
    border-right: none;
    border-bottom: solid 2px #f03891;
}
}
@media screen and (min-width: 320px) and (max-width: 425px){
	.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 85%;
    margin-left: 8%;
    margin-top: 2%;
}
img.logo {
    width: 17%;
    margin: auto;
    display: block;
    margin-top: 1%;
}
body {
    width: 100%;
    margin: auto;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 10% 2% 10% !important;
    font-size: 28px;
}
.gauche {
    color: white;
    font-size: 32px;
    margin: 0% 0 0% 2%;
    font-weight: bold;
    text-align: center;
}
h3.droit {
    color: white;
    font-size: 25px;
    text-align: center !important;
    font-weight: bold;
    margin: 18px 0;
}
.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #3793cf;
    height: auto !important;
    padding: 12px 10px;
}
h3.info {
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5%;
    margin-top: 0;
}
.col-lg-4.border {
    border: 2px solid #f03891;
    padding: 13px;
    width: 60%;
    margin: 0 auto 2% auto;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    width: 60%;
    margin: 0 auto 2% auto;
}
select.civilite {
    padding: 7px;
    width: 100%;
    border-radius: 4px;
}
button#submit-button {
    background-color: #f03891;
    width: 117%;
    margin: 4% -8%;
    display: block;
    font-size: 16px;
    font-weight: bold;
    border: none;
}
.col-lg-6.tiret {
    border-right: none;
    border-bottom: solid 2px #f03891;
}
}
@media (max-width: 320px){
	.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 85%;
    margin-left: 8%;
    margin-top: 2%;
}
body {
    width: 100%;
    margin: auto;
}
img.logo {
    width: 17%;
    margin: auto;
    display: block;
    margin-top: 1%;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 10% 2% 10% !important;
    font-size: 28px;
}
.gauche {
    color: white;
    font-size: 25px;
    margin: 0% 0 0% 2%;
    font-weight: bold;
    text-align: center;
}
h3.droit {
    color: white;
    font-size: 22px;
    text-align: center !important;
    font-weight: bold;
    margin: 18px 0;
}
.col-lg-3.bleugauche {
    background-color: #f03891;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #3793cf;
    height: auto !important;
    padding: 12px 5px;
}
h3.info {
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5%;
    margin-top: 0;
}
.col-lg-4.border {
    border: 2px solid #f03891;
    padding: 13px;
    width: 85%;
    margin: 0 auto 2% auto;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    width: 85%;
    margin: 0 auto 2% auto;
}
select.civilite {
    padding: 7px;
    width: 100%;
    border-radius: 4px;
}
button#submit-button {
    background-color: #f03891;
    width: 120%;
    margin: 4% -11%;
    display: block;
    font-size: 13px;
    font-weight: bold;
    border: none;
}
.col-lg-6.tiret {
    border-right: none;
    border-bottom: solid 2px #f03891;
}
}