/* _________________________________MENU________________________________________________________ */
/*ul#menu_horizontal li{
display : inline;
line-height : 5px;
color : #fff;
text-decoration : none;
margin: 0.5%;
padding : 0 0.8em; 
font :  1.2em "Trebuchet MS";}


ul#menu_horizontal { 
width : 100%; 
height : 50px;
margin: 0.1 0.1em;
background-color :#1ab4c7;
list-style-type : none; 

z-index:10; /*tu lui a dis d'être fixed, c'est bien, avec le z-index on lui 
dit qu'il doit toujours rester au premier plan. J'ai choisi de mettre 10 en valeur
pour être sûre qu'il soit bien tout devant*/
position: fixed;

}
/*ul#menu_horizontal a:{ text-decoration : none;
color: #fff;
}    
    
}
ul#menu_horizontal il #bouton_gauche a:hover { text-decoration : none;
color: #414141;
}

 
ul#menu_horizontal li.bouton_gauche  { /* si suprime suprime mon fond ??? */
/*float : right;

}

ul#menu_horizontal li.bouton_gauche a  { /* si suprime suprime mon fond ??? */
/*text-decoration : none;
float : right;

}

ul#menu_horizontal li.bouton_gauche a:hover { /* si suprime suprime mon fond ??? */
/*text-decoration : none;
color: #414141;
float : right;

}

ul#menu_horizontal li.bouton_gauche :visited  {
text-decoration : none;
color: #fff;
float : right;
border-left : 1px;
}
 
ul#menu_horizontal li.bouton_droite {
text-decoration : none;
float : right;
border-left : 1px;
}

ul#menu_horizontal li.bouton_droite a {
text-decoration : none;
float : right;
border-left : 1px;
}

ul#menu_horizontal li.bouton_droite a:hover {
text-decoration : none;
color: #414141;
float : right;
border-left : 1px;
}

ul#menu_horizontal li.bouton_droite :visited  {
text-decoration : none;
color: #fff;
float : right;
border-left : 1px;
}



/* _________________________________banner________________________________________________________ */

.banner {
		padding: 12em 0 6em 0;
		background-color: #1E2832;
		color: rgba(255, 255, 255, 0.75);
		background-attachment: fixed;
		background:url(../images/banner1.jpg) no-repeat;"
        width :100%;
		background-size: cover;
        text-align: center;
		}




/* _________________________________MENU________________________________________________________ */

/*body {	/*color:#666;	font:300 15px/15px Roboto,Arial,Helvetica;background-color:#fff;-webkit-font-smoothing:antialiased; background-color:#fff ; background-repeat:no-repeat;
width: auto;}


a{color:#fff; text-decoration:none;}
a:hover{color:#fff;text-decoration:none}
.btn,a,.btn:hover,a:hover {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
outline: none !important;
}

h1,h2,h3,h4{margin: 0;line-height: 1em;}
h1{font:300 4em Roboto,Arial,Helvetica;padding:5em 0;color: #fff;}
h2{font:300 2.5em Roboto,Arial,Helvetica;margin-bottom:0.5em; }
h3{font:300 2em Roboto,Arial,Helvetica;margin-bottom: 1em;}


p{font-size:1em;line-height: 1.7em; margin-bottom: 1.7em;}

.btn-default{border:none;border-radius: 0;background: #1ab4c7 !important;color:#fff !important;font-size: 0.85em;padding:0.5em 1em;}
.btn-default:hover{background: #1ab4c7 !important;padding:0.5em 2em; }

.container{width: 100%;max-width: 1600px;}

.spacer{padding: 4em 0;}



/*gallery*/
.items-wrap .gallery-items{position:relative;margin-bottom: 2em;display: block;overflow: hidden;}
.items-wrap .gallery-items:hover img{-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.items-wrap .gallery-items .caption{position: absolute;top: 0;right: 0;left: 0; bottom: 0;background: rgba(0,0,0,0.8);text-align: center;opacity:0;color: #fff;}
.items-wrap .gallery-items .caption h3{margin-top:-27%;margin-bottom: 1em;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.items-wrap .gallery-items .caption:hover h3{margin-top: 27%;}
.items-wrap .gallery-items:hover .caption{opacity:1;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
/*gallery*/


/*book*/
.book.overlay{background-color:#fff;}
.social a{color: #fff;margin: 0 0.5em;}
/*book*/


/*propo*/
.propo{background-color: rgba(26, 180, 199, 0.63);}

.propo-image2 { float:right;}
   
.social a{color: #fff;margin: 0 0.5em;}

/*----PAULINE---- */

/* Ton CSS ne marchait pas parce tes "class" c'était .propo.image et donc du coup
ça le perturbe dans le CSS, il croit que c'est la class image dans la class apropo
alors j'ai juste changé le point par un tiret, dans ton fichier HTML et dans ton fichier
CSS*/


/* Pour l'image il faut juste lui dire float left.
Pour le texte il faut juste lui donner une taille et
si il a la place il va se placer à côté de l'image
tu avais fait l'inverse*/

.propo-image {
    float:left;
 }
        
.propo-texte {

    font-family:Trebuchet MS,Arial, Verdana;
    color:#1f1f1f; 
    width:70%;
    text-align: left;
    margin-top: 7%;
    text-decoration: none;
  }
        
 .floatstop {
		clear:both;
	}

#contact-cv{
    width: 50%;
 background: #1ab4c7;
    text-decoration-color:#fff;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    padding: 16px 40px;
    text-align:left;
    vertical-align: middle;
    width: auto;
	margin-top: 15px;
    margin-left: 51%;}


#contact-cv:hover {
color:#fff;
	background:#658b90;
text-decoration:none;
}
/*propo*/


/*about*/
.contact-image{ float:left;
 }
.about{background-color:#fff; 
       background-repeat:no-repeat;}
.social a{color: #fff;margin: 0 0.5em;}

/*about*/

/*about*/

/* ==================================================
   Contact test
================================================== */
/* body { background:rgb(30,30,40); }*/
form { max-width:420px; margin:50px auto; }

.feedback-input {
  color:#807d7d;
  font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
  font-size: 18px;
  border-radius: 5px;
  line-height: 22px;
  background-color: transparent;
  border:2px solid #1ab4c7;
  transition: all 0.3s;
  padding: 13px;
  margin-bottom: 15px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}

.feedback-input:focus { border:2px solid #CC4949; }

textarea {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}

[type="submit"] {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  width: 100%;
  background:#1ab4c7;
  border-radius:5px;
  border:0;
  cursor:pointer;
  color:white;
  font-size:24px;
  padding-top:10px;
  padding-bottom:10px;
  transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}
[type="submit"]:hover { background:#658b90; }

/* ==================================================
   Contact Section lien
================================================== */
contact1 margin:{ padding: 16px 40px;}


/.contact-bouton,{
  display: inline;}
.soc-icon-bouton {display:inline-flex;
margin-right: 29%;}
.soc-icon-bouton li {display:inline-block; float:right; margin-left:57%;}
.soc-icon-bouton li a {display:block;}
.soc-icon-bouton li a img {opacity:0.46;}
.soc-icon-bouton li a:hover img {opacity:1;}

/* ==================================================
   Contact Section lien
================================================== */

/*
#contact-form {
	margin-bottom: 0;	
}

#contact-form p {
	margin-bottom: 1px;	
}

#contact-form input,
#contact-form textarea {
    border: none;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
    border-radius: 0;
	
    -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	
	background: #fff;
    color: #000;
    font-size: 16px;
    height: auto;
    padding: 15px;
	margin: 0;
	
    resize: none;
}

#contact-form input {
    width: 60%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#contact-form textarea {
    width: 60%;
	resize: vertical;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#contact-form .submit {
    background: #1ab4c7;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    font-weight: 50%;
    padding: 16px 40px;
    text-align:left;
    vertical-align: middle;
    width: auto;
	margin-top: 15px;
    margin-left: 51%;
	
	-webkit-transition: background 0.1s linear 0s, color 0.1s linear 0s;	
	   -moz-transition: background 0.1s linear 0s, color 0.1s linear 0s;
		 -o-transition: background 0.1s linear 0s, color 0.1s linear 0s;
		    transition: background 0.1s linear 0s, color 0.1s linear 0s;
}

#contact-form .submit:hover {
    background: #fff;
    color: #1ab4c7;
}
    
#contact-cv:hover {
    background: #fff;
    color: #1ab4c7;
}

#response {
	margin-top: 20px;
	color: #FFFFFF;
}



/* ==================================================
   footer
================================================== */


/* Footer */

	#footer {
		background-color: #f7f7f7;
		color: #444;
		padding: 1em 0 1em 0;
        margin-top: 4%;
		position: relative;
	}

		#footer input, #footer select, #footer textarea {
			color: #555;
		}

		#footer a {
			color: #00cdcf;
		}

		#footer strong, #footer b {
			color: #555;
		}

		#footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 {
			color: #555;
		}

		#footer blockquote {
			border-left-color: #ddd;
		}

		#footer code {
			background: #fff;
			border-color: #ddd;
		}

		#footer hr {
			border-bottom-color: #ddd;
		}

		#footer:before {
			background-color: #ddd;
			content: '';
			height: 1px;
			left: 30%;
			position: absolute;
			top: 0;
			width: 40%;
		}

		#footer .copyright {
			color: #bbb;
			font-size: 0.9em;
			margin: 0 0 2em 0;
			padding: 0;
			text-align: center;
			text-transform: uppercase;
		}

			#footer .copyright li {
				border-left: solid 1px #fff;
				display: inline-block;
				list-style: none;
				margin-left: 1.5em;
				padding-left: 1.5em;
			}

				#footer .copyright li:first-child {
					border-left: 0;
					margin-left: 0;
					padding-left: 0;
				}

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

			#footer {
				padding: 4em 2em 3em 2em;
			}

		}

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

			#footer {
				padding: 3em 2em 2em 2em;
			}

				#footer:before {
					width: 75%;
					left: 12.5%;
				}

		}

		@media screen and (max-width: 736px) {
            
            .banner {
		padding: 12em 0 6em 0;
		background-color: #1E2832;
		color: rgba(255, 255, 255, 0.75);
		background-attachment: fixed;
		background:url(../images/banner0.jpg) no-repeat;"
        width :100%;
		background-size: cover;
        text-align: center;
		}
            
         .soc-icon-bouton {display:inline-flex;
margin-right: 25%;}
.soc-icon-bouton li {display:inline-block; float:right; margin-left:7%;}  

			#footer {
				padding: 3em 2em 1em 2em;
			}

				#footer:before {
					width: 85%;
					left: 7.5%;
				}

				#footer .copyright li {
					display: block;
					border-left: 0;
					margin-left: 0;
					padding-left: 0;
				}

		}

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

			#footer {
				padding: 2em 1em 0.1em 1em;
			}

		}