/**** GEN ****/

font-family: 'PT Sans', sans-serif;
font-family: 'PT Serif', serif;

html{
	font-family: 'PT Sans', sans-serif;
}

/**** HEADER ****/
.logoheader{
	margin-top: 30px;
	padding-top: 10px;
	max-width: 220px;
	width: auto;
}

header{
	background:no-repeat url(../img/header-background.jpg) center center;
	background-size: cover;
	height: 700px;
}

header h1, header h1 span{
	text-align: right;
	margin-top: 0;
	padding-top: 0;
	text-transform: uppercase;
	font-size: 55px;
    color: #d5080f;
    font-family: 'Oswald', sans-serif;
        font-weight: bolder;
}

header h1 span{
	font-size: 120px;
	margin: 0;
	padding: 0;

}

header p{
    font-weight: bold;
    color: #6e6e6e;
    /* font-family: 'PT Serif', serif; */
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-align: right;
    padding: 0;
    margin: 0;
    font-style: italic;
    margin-top: 60px;
}

header .line{
	border-top: 4px solid #ffce12;
	max-width: 150px; 
	width: auto;
	margin-top: 40px;
	margin-bottom: 40px;
	
}

header .line-align{
	text-align: -webkit-right;
}

/**** PART1 ****/

h2 {
	font-family: 'PT Sans', sans-serif;
	font-size: 27px;
	line-height: 1.3em;
}

#article1{
	padding-top: 40px;
	background-color: #f8f8f8;
	padding-bottom: 40px;
}

.carre{
	background-color: white;
	border-radius: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

.carre p{
	font-size: 14px;
	text-align: center;
	line-height: 1.8em;
}

.carre .usp img{
    max-width: 60px;
    width: 100%;
}


.rectangle-jaune{
	margin: 0 auto;
    position: relative;
    display: table;
    top: -11px;
    margin-top: 30px;
}


/**** PART2 ****/

#article2{
	padding-top: 0px;
	background-color: #f8f8f8;
	padding-bottom: 40px;
}

#article2 p{
	text-align: center;
	font-style: italic;
	font-size: 20px;
	color: #3d3d3d;
}

/**** PART3 ****/

#article3{
	padding-top: 0px;
	margin-top: 40px;
	margin-bottom: 40px;
	background-color: white;
	padding-bottom: 40px;
}

h4{
	text-align: center;
}

#article3 .line{
	margin: 0 auto; 
	border-top: 4px solid #ffce12;
	max-width: 150px; 
	width: auto;
	margin-top: 40px;
	margin-bottom: 40px;
}

#article3 .s-titre{
	text-align: center;
}

#article3 .garantie{
	border-left: 4px solid #ffce12;
	padding-left: 20px;
	font-size: 16px;
	margin-top: 20px;
	max-width: 600px;
	width: auto;
}

#article3 .picto{
	margin-top: 20px;
}

#article3 .picto img{
    max-width: 380px;
    width: auto;
    padding-top: 20px;
}


/**** PART4 ****/


#article4{
	padding-top: 40px;
	background-color: #f8f8f8;
	padding-bottom: 40px;
}

#article4 .line{
	margin: 0 auto; 
	border-top: 4px solid #ffce12;
	max-width: 150px; 
	width: auto;
	margin-top: 40px;
	margin-bottom: 40px;
}

#article4 p{
		text-align: center;
	padding-bottom: 20px;
}


#article4 .avis img{
	max-width:490px ;
	width: 100%;
}

#article4 .guide{
	max-width:570px ;
	width: 100%;
}


/**** FOOTER ****/

footer{
	padding-top: 40px;
	background-color: white;
	padding-bottom: 40px;
	font-size: 10px;
	text-align: left;
	color: #848484;
}





/**** FORM ****/


.rectangle-noir{
    margin: 0 auto;
    position: relative;
    display: table;
    top: -20px;
}


h3{
	font-size: 23px;
    font-weight: bolder;
    text-transform: uppercase;
    color: black;
    margin-bottom: 0;

}

.head-funnel p{
	letter-spacing: 1em;
	color: black;
	font-size: 10px;
}


#funnel{
background-color: #2f2f2f;
    max-width: 500px;
    width: 100%;
    min-height: 400px;
    height: auto;
    box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.2);
    border-radius: 10px;
}

#funnel .head-funnel{
	background-color: #ffce12;
	padding: 10px;
		border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}


#funnel .question p{
    font-size: 18px;
	color: white;
    padding-top: 20px;
}

#funnel .reponse span{
	color: black;
    font-style: normal;
    font-size: 20px;
}

#funnel .reponse label{
width: 95%;
    background-color: #ffce11;
    border-radius: 10px;
    margin: 10px;
	padding: 10px;
    margin-bottom: 20px;
}

#funnel .reponse label:hover{
    background-color: white;
	animation: 5s;

}


#toFinal span{
    width: 100%;
    background-color: #ffce11;
    border-radius: 10px;
    /* margin: 65px; */
    /* margin-bottom: 20px; */
    display: block;
    text-transform: capitalize;
    padding: 9px 50px;
}



.reponse{
    margin: 0 30px 30px 30px;
}

#funnel #button>input{
    width: 100%;
    background-color: #ffce12;
    border-radius: 10px;
    /* margin: 65px; */
    padding: 8px;
    /* margin-bottom: 20px; */
    display: block;
    border: none;
    font-weight: bolder;
    
}

#funnel #button>input:hover{
    background-color: white;
}

#funnel .reponse input[type=checkbox], #funnel .reponse input[type=radio] {
    box-sizing: border-box;
    padding: 0;
    display: none;
}

.ms{
        color: #a9a9a9;
    font-size: 9px;
    margin: 0 auto;
}

.formulaires .s-titre{
        color: #a9a9a9;
    font-size: 12px;
    margin: 0 auto;
}

#funnel #formfinal span{
    color: black;
    font-size: 10px;
    font-weight: 300;
}

#funnel .question{
    padding-bottom: 10px;
	padding: 15px;
	color: white;
}



.label{
color: white;
    text-align: left;
    /* text-transform: uppercase; */
    display: inherit;
    padding: 0;
    margin: 0;
    font-size: 15px;
    padding-bottom: 5px;
margin-top: 12px;
    font-family: 'PT Sans', sans-serif;
}


.formulaires{
    padding: 20px;
}

.input-form input{
    width: 100%;
    height: 35px;
    border border-radius: 5px;
    border-color: #ffce12;
    border-style: solid;
    background-color: #ffce12;
    padding: 10px;
}

#nom-error, #prenom-error, #email-error, #tel-error, #adresse-error, #ville-error, #cp-error{
	color: red!important;
    font-size: 10px!important;
    display: flex;
    position: absolute;	
}


.merci{
    font-size: 13px;
    color: white;
    padding-top: 30px;
}




/*** Realisation ***/

#realisation {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
}

.modal-body {
    display: block;
    height: auto;
    padding: 30px 20px;
    background: #ffffff;
    text-align: center;
    margin: auto;
    border-radius: 8px;
    color: #333;
}

#realisation .content>* {
    width: 100%;
}

#realisation .content ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 12px;
    margin-top: 20px;
}




/**** RESPONSIVE ****/

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

@media screen and (max-width: 1000px) {
	header p{
		text-align: center;
	}
	
	header h1{
		text-align: center;
	}
	
	header{
		background:#999 no-repeat url(../img/background-responsive.jpg) right bottom;
		background-size: cover;
		height: auto;
		padding-bottom: 30px;
	}
	
	header img:last-child{
		width: 100%;
		margin: 0 auto;
	}
    
    header .line{
        display: none;
    }
    
    header h1 span {
        font-size: 152px;
        color: #d5080f;
        margin: 0;
        padding: 0;
        font-weight: bold;
        font-family: 'Oswald', sans-serif;
    }
    
    h2{
        text-align: center;
    }
    
    h3 {
        font-size: 37px;
    }
    

    
 }

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

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

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

}