/*
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;
}

/* HEADER */
h2 {
    text-align: center;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 20% 2% 20% !important;    font-size: 48px;
	width: 65%;
}

/* SECTION 1*/

.container-fluid.fondbleu {
    background-color: #376bbe;
}
.col-lg-5.vert {
    background-color: #b1c352;
   /* border-radius: 0 0 100px 0;*/
       border-radius: 0 0 55px 0;
}
.gauche {
    color: white;
    font-size: 35px;
    margin: 2% 0 2% 3%;
    font-weight: bold;
}
.col-lg-7.bleu {
    background-color: #376bbe;
	height: 89px;

}
h3.droit{
    color: white;
       font-size: 30px;
    text-align: center !important;
    font-weight: bold;
    margin: 27px 0;
}
.col-lg-12.fond {
    padding: 0 !important;
}
img.desk {
    width: 100%;
}

/* SECTION 2 */

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

.col-lg-9.formulaire {
    background-color: #b1c352;
    height: auto;
    padding: 0 100px;
}
.col-lg-9.confirmation {
    background-color: #b1c352;
    height: 422px;
    padding: 0 100px;
}

h3.info {
    color: white;
    text-align: center;
    font-size: 33px;
    font-weight: bold;
    margin-bottom: 5%;
	margin-top: 8%;
}

p.confirmation {
    color: white;
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 5%;
}

/* FORMULAIRE */

label {
    color: #376bbe !important;
}
.choix {
    color: white !important;
    border-radius: 10px;
    padding: 10% 0px;
}
a.typechoix {
    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: 64%;
    margin: 4% auto;
    display: block;
    font-size: 20px;
    font-weight: bold;
    border: none;
}

/* 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.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
    margin-top: -1%;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    margin-left: 71%;
   /* margin-top: -13%;*/
       margin-top: -170px;
    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%;
    text-align: center;
}
h3.titre3 {
    font-size: 32px;
    color: #376bbe;
    margin-bottom: 2%;
    font-weight: bold;
}
p.textefin {
    font-size: 18px;
}

/* FOOTER */

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

/* RESPONSIVE */


@media screen and (min-width: 1440px) and (max-width: 8000px){

/*.form-group.col-md-12.form1 {
    margin-top: -29px;
}*/
.col-lg-3.bleugauche {
    background-color: #376bbe;
    padding: 40px;
    height: 423px;
}
.form-group.col-md-12.form1 {
    margin-top: -3%;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    margin-left: 71%;
    /* margin-top: -13%; */
    margin-top: -159px;
    width: 29%;
}
button#submit-button {
    margin-top: 0%;
}
.pastille {
    position: absolute;
    top: 15%;
    width: 294px;
    z-index: 2;
    margin-top: -3% !important;
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: -55px -40% 1% 18% !important;
    margin-left: 68% !important;
    font-size: 48px;
    border-radius: 146%;
}
input#lastname {
    width: 45%;
}
input#name {
    width: 43%;
    margin-left: 56%;
    margin-top: -6%;
}

.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
    margin-top: -10%;
}
.col-lg-9.formulaire {
   
    height: auto;
    padding: 0 60px;
	   /* height: 465px;*/
    height: 423px;
}
}

@media screen and (min-width: 1025px) and (max-width: 1440px){
	img.chrono {
    width: 12%;

}
.col-lg-7.bleu {
    background-color: #376bbe;
    height: 42px;
}
	.pastille {
    position: absolute;
    top: 15%;
    width: 294px;
    z-index: 2;
    margin-top: -3% !important;
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: -55px -40% 1% 18% !important;
       margin-left: 58% !important;
    font-size: 48px;
    border-radius: 146%;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 24% 2% 18% !important;
    font-size: 48px;
	width: 65%;
}
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-weight: bold;
    margin-bottom: 5%;
}
.col-lg-9.formulaire {
    background-color: #b1c352;
    height: auto;
    padding: 0 60px;
	height: 425px;
}
button#submit-button {
    background-color: #f03891;
    width: 81%;
    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.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
    /*margin-top: -12%;*/
	    margin-top: -117px;
}
.form-group.col-md-12.form1 {
    margin-top: -4%;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    margin-left: 71%;
    /* margin-top: -13%; */
    margin-top: -133px;
    width: 29%;
}
.col-lg-3.bleugauche {
    height: 425px;
    background-color: #376bbe;
    padding: 40px;
}
}

@media screen and (min-width: 992px) and (max-width: 1024px){
	.col-lg-7.bleu {
    background-color: #376bbe;
    height: 42px;
}
	.pastille {
    position: absolute;
    top: 15%;
    width: 294px;
    z-index: 2;
    margin-top: -3% !important;
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: -55px -40% 1% 18% !important;
    margin-left: 68% !important;
    font-size: 48px;
    border-radius: 146%;
}
body {
    width: 100%;
    margin: auto;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 20% 2% 20% !important;
    font-size: 48px;
	width: 65%;
}
.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: #376bbe;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #b1c352;
    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.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
   margin-top: -1%;
}
.col-lg-4.borderright {
    border: 2px solid #f03891;
    padding: 13px;
    width: 29%;
    margin: 0 auto 2% auto;
}
}

@media screen and (min-width: 768px) and (max-width: 991px){
	.col-lg-7.bleu {
    background-color: #376bbe;
    height: 42px;
}
		.pastille {
    position: absolute;
    top: 15%;
    width: 294px;
    z-index: 2;
    margin-top: -3% !important;
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: -55px -40% 1% 18% !important;
    margin-left: 59% !important;
    font-size: 48px;
    border-radius: 146%;
}
body {
    width: 100%;
    margin: auto;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 20% 2% 20% !important;
    font-size: 48px;
	width: 65%;
}
.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: #376bbe;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #b1c352;
    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.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
        margin-top: -1%;
}
.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;
}
}
@media screen and (min-width: 570px) and (max-width: 767px){
	.col-lg-7.bleu {
    background-color: #376bbe;
    height: 70px;
}
	.pastille {
    position: absolute;
    top: 17%;
    width: 294px;
    z-index: 2;
    margin-top: -3% !important;
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: -55px -40% 1% 18% !important;
    margin-left: 52% !important;
    font-size: 48px;
    border-radius: 146%;
}
body {
    width: 100%;
    margin: auto;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: 0 20% 2% 20% !important;
    font-size: 48px;
	    width: 91%;
}
.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: #376bbe;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #b1c352;
    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.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
    margin-top: -1%;
}
.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;
}
}
@media screen and (min-width: 425px) and (max-width: 569px){
	.col-lg-7.bleu {
    background-color: #376bbe;
    height: 70px;
}
	.pastille {
    position: absolute;
    top: 26%;
    width: 294px;
    z-index: 2;
    margin-top: -3% !important;
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
    margin: -55px -40% 1% 18% !important;
    margin-left: 30% !important;
    font-size: 48px;
    border-radius: 146%;
}
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: 40px;
	    width: 91%;
}
.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: #376bbe;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #b1c352;
    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: 140%;
    margin: 4% auto;
    display: block;
    font-size: 20px;
    font-weight: bold;
	margin-left: -17%;
    border: none;
}
}
@media screen and (min-width: 375px) and (max-width: 425px){
	.col-lg-7.bleu {
    background-color: #376bbe;
    height: 70px;
}
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;
	width: 65%;
}
.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: #376bbe;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #b1c352;
    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.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
    margin-top: -1%;
}
.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;
}
}
@media screen and (min-width: 320px) and (max-width: 425px){
	.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 9px;
    width: 83%;
    margin-left: 9%;
    margin-top: -1px;
}
	.col-lg-7.bleu {
    background-color: #376bbe;
    height: 70px;
}
body {
    width: 100%;
    margin: auto;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
     margin: 0 10% 3% -6% !important;
    font-size: 28px;
    width: 112%;
}
.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: #376bbe;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #b1c352;
    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.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 29%;
    margin-left: 35%;
    margin-top: -1%;
}
.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: 116%;
    margin: 4% -9%;
    display: block;
    font-size: 16px;
    font-weight: bold;
    border: none;
}
}
@media (max-width: 320px){
	.col-lg-4.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 9px;
    width: 83%;
    margin-left: 9%;
    margin-top: -1px;
}
		.col-lg-7.bleu {
    background-color: #376bbe;
    height: 70px;
}
body {
    width: 100%;
    margin: auto;
}
h1 {
    text-align: center;
    background-color: #f03891;
    color: white;
    font-weight: bold;
    padding: 7px;
      margin: 0 10% 3% -6% !important;
    font-size: 28px;
    width: 112%;
}
.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: #376bbe;
    padding: 40px;
    display: none;
}
.col-lg-9.formulaire {
    background-color: #b1c352;
    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.border2 {
    border: 2px solid #f03891;
    padding: 13px;
    margin-right: 11px;
    width: 85%;
    margin-left: 8%;
    margin-top: 2%;
}
.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: 100%;
    margin: 4% auto;
    display: block;
    font-size: 13px;
    font-weight: bold;
    border: none;
}
}