/*FORMULAIRE*/
   
   			
   			/*Général*/
			#conteneur_form { position:relative; text-align:left; background-color:#ffffff; border:15px solid #ffffff; margin-top:-60px; }
			
			#form { font-family:Arial, Helvetica, sans-serif; font-size:11px; margin:0px auto; width:100%; color:#ffffff; }
				
			#top_form{text-align: left; position: relative; margin-bottom: 2rem;}

#top_form:before{
	content: '';
	background: url(../images/index_cata.png) center center no-repeat;
	background-size: 100% auto;
	width: 10rem;
	height:10rem;
	display: block;
	float: left;
	margin-left: -12rem;
	margin-top: -1rem;
	position: fixed;
	z-index: 200;}





			
			#top_form span {  }
			#top_form span.merci_form { font-size:9px; color:#ffffff; }
			
			
			
			#form > .padding { background-color:#e9e7df; padding:35px; }


			/*Colonnes*/

			#form span.col {
				display:inline-block;  vertical-align:top; position:relative;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				padding:1px;
			}
			#form span.col_1 { width:49%; }  
			#form span.col_2 { width:49%; }
			


			/*Labels*/
			
			label { font-family:Arial, Helvetica, sans-serif; font-size:12px; display:block; text-align:left; color:white; }/*Couleur par défaut*/
			label.inline-block { display:inline-block; margin-bottom:10px; font-family:Arial,sans-serif; font-size:12px; }
			
			label:hover { color:#a62b43!important; }/*label survolé*/
			label:focus { color:# !important; }/*label cliqué*/
			label:active { color:#000000!important; }/*label actif*/
			
			

			/*Questions supplémentaires*/	

			.q_sup { margin:0px 0px 1rem 0px; padding:10px;}
			.q_sup input { margin: 2px 5px 0px 0px; position:absolute; margin-left: -15px; float: left; }
			.q_sup label { margin-right:10px; position:relative; display:block; padding-left:18px; margin-top:2px; color:black !important; margin-bottom: 0.6em;}/*Couleur par défaut*/
			.star { display:block; position:absolute; right:10px; top:10px; color:white; }

			/*Questions supplémentaires Labels*/
			.q_sup label:hover { color:#5D5D5D; }
			.q_sup label:focus { color:#5D5D5D; }
			.q_sup label:active { color:#5D5D5D; }

			


			
			/* Listes déroulantes Champs */
				
			select, .impl {
				margin:0px 0px 8px 2px;
				padding: 0px 11px;
				width: 100%;
				height:25px;
				text-align:left;
				color:#505050;
				
				-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
			}
			

			/*Liste déroulante Select*/
			select:hover { color:#000000; }
			select:focus { color:#000000; }
			select:active { color:#000000; }
			select:visited { color:#000000; }
			
			/*listes déroulant options de liste*/
			
			.impl option:first-child { color:#505050; font-style:italic; }
			.impl option { color:#000000; font-style:normal; }	
			
			
			/*listes déroulantes pour firefox*/	
			@-moz-document url-prefix() { 
				select, .impl {
					margin:0px 0px 8px 2px;
					padding: 0px 11px;
					font: normal 12px/100% Arial, sans-serif;
					outline: 0;
					width: 100%;
					background-color:#ffffff;
					position:relative;
				
					height:35px;
					border:0px;
					background-color:#FFFFFF; 
					-moz-box-sizing: border-box;
					-webkit-box-sizing: border-box;
					box-sizing: border-box;
					color:#000000;
					-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
					
				}  
			}

			
			/*Champs input text et textarea */	
            input[type="text"], textarea {
				    margin: 0px 0px 8px 2px;
    padding-left: 5px;
    border: 0px;
    font: normal 12px/100% Arial, sans-serif;
    outline: 0;
    width: 100%;
    position: relative;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: transparent;
    color: black;
    border: none;
   
    padding: 0px 11px;
    height: 50px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 0px;
				
			}	



			
			
			/*Commentaires*/		
			   textarea { height:150px; padding:10px  }	
				label[for="id_commentaires"] { margin:10px 0px 10px 5px; font-style:italic; font-family:Verdana,Tahoma,sans-serif; font-size:13px}			 
			   
			 	 
			 #form span.champs_obligatoires { font-size:9px; color:#a62b43; display:block; text-align:center; margin:5px; }
			
			
			 
			 
.valid {
    height: 50px;
    border: 0px;
    width: 200px;
    background: #4d4e56;
    color: white;
    text-indent: inherit;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    display: block;
    margin: 0 auto;
    z-index: 200;
    /* box-shadow: 0 1px 5px rgba(0,0,0,.2); */
    font-weight: bold;
    transition: all 0.3s;
    /* margin: auto 0; */
}

.valid input {
     height: 50px;
    border: 0px;
font-size: 20px;
    background: #4d4e56;
    color: white;
    text-indent: inherit;
    overflow: hidden;
    cursor: pointer;
    position: relative;

    margin: 0 auto;
    z-index: 200;
    /* box-shadow: 0 1px 5px rgba(0,0,0,.2); */
    font-weight: bold;
    transition: all 0.3s;
    /* margin: auto 0; */

}
.next {    width: 15px;
    height: auto;
    margin-left: 20px;}

.validtext {
        margin: 0 auto;
    display: block;
    text-align: center;
}
		 
			 input#valid2 {
	height: 42px;
	border: 0px;
	width: 200px;
	background: #0f56a7;
	color: white;
	text-indent: inherit;
	overflow: hidden;
	cursor: pointer;
	font-size: 20px;
	position: relative;
	display: block;
	margin: 0 auto;
	z-index: 200;
	border-radius: 50px;
	/* box-shadow: 0 1px 5px rgba(0,0,0,.2); */
	font-weight: bold;
	transition: all 0.3s;
			}
.btn{ height: auto; padding: 0.6rem 1.5rem; width: auto; display: inline-block; margin-top: 1rem;}





			 .valid input:hover, .btn:hover  {

	color: #0cb5c5;
}

			 /*Alerte*/
			 .alerte { font-size:13px; color:#333333; background-color:#FFE88E; display:block; text-align:center; padding:10px; margin:10px 0px 20px 0px; }



			
			/*
CSS rules need to be separated in order for this to work instead of using the ',' separator.
This is because CSS rules with unknown vendor prefix are discarded by the browser entirely.
*/

input::-webkit-input-placeholder { /* Chrome, Safari, Opera */
  color: #393939;
  opacity: 0.9;
}

input::-moz-placeholder {  /* Firefox */
  color:  #393939;
  opacity: 0.9;
}

input:-ms-input-placeholder { /* IE10, IE11 */
  /* !important needed for IE11 */
  color:  #393939;
  opacity: 0.9 !important;
}

input::-ms-input-placeholder { /* Edge */
  color:  #393939;
  opacity: 0.9;
}

input::placeholder { /* Future CSS Spec */
  color: #393939;
  opacity: 0.9;
}