
/** My style **/

	.bandeau{
		height: 600px;
		background-size: cover;
		background-position: center;
		padding-top: 250px;
	}
	.bandeau h1 {
		text-align: center;
		font-size: 4em;
		font-family: 'Caveat', cursive;
		/**font-family: 'Dancing Script', cursive;**/
		background-color:rgba(154,154,154,0.60);
		color:#F5FFFF}

	/** Image d'arrière plan des bandeaux entêtes**/
	.bg_tp_index{
		background-image: url("../images/index_bg_tp.jpg");}
	.bg_tp_presentation{
		background-image: url("../images/presentation_bg_tp.jpg");}
	.bg_bt_presentation{
		background-image: url("../images/presentation_bg_bt.jpg");
		height: 400px;}
	.bg_tp_realisations{
		background-image: url("../images/realisations_bg_tp2.jpg");}
	.bg_tp_prestations{
		background-image: url("../images/prestations_bg_tp.jpg");}
	.bg_tp_contact{
		background-image: url("../images/contact_bg_tp.jpg");}
	.bg-deadsaumon{	/**Background Barre de nav et footer => Farow&Ball Dead Saumon**/
		background-color:#b49d8d
	}
	.font-manuscrit{
		font-family: 'Caveat', cursive;
		font-size: 2em;
	}
	.font_ubuntu{
		font-family: 'Ubuntu', sans-serif;
	}
	.colortext_ds {
		color : #A78C7A; /** DeadSaumon foncé -> Original : #b49d8d  **/
	}
	.lien a{
	text-decoration: none;
	color: #b49d8d 
	}
	.lien a:hover{
	color: #AC876C 
	}
	.img-max {
	  max-width: 300px;
	  width:100%;
	}
	section p{	/** Utliser pour la page d'acceuil **/
		text-align:center;
		font-family: 'Caveat', cursive;
		font-size: 3em;
	}
	article p{	/** Utliser pour les pages présentation,  **/
		font-family: 'Caveat', cursive;
		text-align: justify; 
		text-justify:inter-word;
		font-size: 28px;
	}
	nav ul li a{
		text-align: center;
	}
	Footer{
		position: absolute;
		width: 100%;
		text-align: center;
		color: #FDFDFD;
		padding: 20px 0 30px 0;	
	}
	Footer a{
		color: #FDFDFD;	
	}
	li{margin-left: 40px
	}
	.Card_padding_start{
		padding: 0 50px 0 200px;
	}
	.Card_padding_end{
		padding: 0 200px 0 50px;
	}

/** CSS slider avant /apres **/

	.slider {
	  position:relative;
	  height:0px;
	  padding-bottom:66.666666667%;
	  margin-top:24px;
	  margin-bottom:24px;
	}
	.slider2 {
	  position:relative;
	  height:0px;
	  padding-bottom:45.1%;
	  margin-top:24px;
	  margin-bottom:24px;
	}
	.slider__after {
	  position:absolute;
	  top:0px;
	  left:0px;
	  z-index:1;
	  width:100%;
	  height:100%;
	  background-image:url('images/happy.jpg');
	  background-size:cover;
	  pointer-events: none;
	}
	.slider__before {
	  position:absolute;
	  top:0px;
	  left:0px;
	  z-index:2;
	  width:50%;
	  height:100%;
	  background-image:url('images/sad.jpg');
	  background-size:cover;
	  pointer-events: none;
	  overflow:hidden;
	}
	.slider__before:before {
	  content:'Avant';
	  position:absolute;
	  left:8px;
	  top:8px;
	}
	.slider__after:before {
	  content:'Après';
	  position:absolute;
	  right:8px;
	  top:8px;
	}
	.slider__separator {
	  position:absolute;
	  left:50%;
	  width:2px;
	  top:0px;
	  bottom:0px;
	  background:rgba(255,255,255,0.7);
	  box-shadow: 0 5px 10px 0px rgba(0,0,0,0.5);
	  cursor:ew-resize;
	  z-index:3;
	  transform:translateX(-50%);
	}
	.slider__range {
	  position:absolute;
	  width:100%;
	  bottom:0px;
	  z-index: 3;
	  appearance: none;
	  background:rgba(255,255,255,0.3);
	  outline:none;
	  margin:0px;
	}
	.slider__range::-webkit-slider-thumb {
	  -webkit-appearance: none;
	  width:12px;
	  height:16px;
	  background:white;
	}
	.slider__range::-moz-slider-thumb {
	  -moz-appearance: none;
	  width:12px;
	  height:16px;
	  background:white;
	}
	.slider--Scandinave .slider__before {
	  background-image: url("../images/realisations_proj_cocktail7-avant.jpg");
	}
	.slider--Scandinave .slider__after {
	  background-image: url("../images/realisations_proj_cocktail7-apres.jpg");
	}
	.slider--Scandinave .slider__separator:before {
	  content:'';
	  width:32px;
	  height:32px;
	  border-radius:50%;
	  border:solid 2px white;
	  position:absolute;
	  top:50%;
	  left:50%;
	  transform:translate(-50%, -50%);
	}
	.slider--Scandinave .slider__range {
	  display:none;
	}
	.slider--Scandinave .slider__before:before, 
	.slider--Scandinave .slider__after:before {
	  top:50%;
	  transform:translateY(-50%);
	  background:#b49d8d;
	  padding:8px 16px;
	  border-radius:8px;
	  margin-left:8px;
	  margin-right:8px;
	}
	.slider--Zen .slider__before {
	  background-image: url("../images/realisations_proj_jardinzen1-avant.jpg");
	}
	.slider--Zen .slider__after {
	  background-image: url("../images/realisations_proj_jardinzen1-après.jpg");
	}
	.slider--Zen .slider__separator:before {
	  content:'';
	  width:32px;
	  height:32px;
	  border-radius:50%;
	  border:solid 2px white;
	  position:absolute;
	  top:50%;
	  left:50%;
	  transform:translate(-50%, -50%);
	}
	.slider--Zen .slider__range {
	  display:none;
	}
	.slider--Zen .slider__before:before, 
	.slider--Zen .slider__after:before {
	  top:50%;
	  transform:translateY(-50%);
	  background:#b49d8d;
	  padding:8px 16px;
	  border-radius:8px;
	  margin-left:8px;
	  margin-right:8px;
	}
	.slider--Zen2 .slider__before {
	  background-image: url("../images/realisations_proj_jardinzen2-avant.jpg");
	}
	.slider--Zen2 .slider__after {
	  background-image: url("../images/realisations_proj_jardinzen2-après.jpg");
	}
	.slider--Zen2 .slider__separator:before {
	  content:'';
	  width:32px;
	  height:32px;
	  border-radius:50%;
	  border:solid 2px white;
	  position:absolute;
	  top:50%;
	  left:50%;
	  transform:translate(-50%, -50%);
	}
	.slider--Zen2 .slider__range {
	  display:none;
	}
	.slider--Zen2 .slider__before:before, 
	.slider--Zen2 .slider__after:before {
	  top:50%;
	  transform:translateY(-50%);
	  background:#b49d8d;
	  padding:8px 16px;
	  border-radius:8px;
	  margin-left:8px;
	  margin-right:8px;
	}
/** CSS Carousel **/


	#thumbSlider .carousel-inner {
	  padding-left: 2rem;
	  padding-right: 2rem;
	}
	#thumbSlider .carousel-inner .row {
	  overflow: hidden;
	}
	#thumbSlider .carousel-inner .thumb:hover {
	  cursor: pointer;
	}
	#thumbSlider .carousel-inner .thumb.active img {
	  opacity: 1;
	}
	#thumbSlider .carousel-inner img {
	  margin-left: auto;
	  margin-right: auto;
	  display: block;
	  opacity: 0.5;
	}
	#thumbSlider .carousel-inner img:hover {
	  opacity: 1;
	}
	#thumbSlider .carousel-inner .carousel-control-prev-icon {
	  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M5.25%200l-4%204%204%204%201.5-1.5-2.5-2.5%202.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
	}
	#thumbSlider .carousel-inner .carousel-control-next-icon {
	  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill='%23000'%20viewBox='0%200%208%208'%3E%3Cpath%20d='M2.75%200l-1.5%201.5%202.5%202.5-2.5%202.5%201.5%201.5%204-4-4-4z'/%3E%3C/svg%3E");
	}


/** CSS Formulaire contact **/

	.text-black {
	  color: #000;
	}
	.content {
	  padding: 7rem 0;
	}
	.heading {
	  font-size: 2.5rem;
	  font-weight: 900;
	}
	.form-control {
	  border: none;
	  border-bottom: 1px solid #ccc;
	  padding-left: 0;
	  padding-right: 0;
	  border-radius: 0;
	  background: none;
	}
	  .form-control:active, .form-control:focus {
		outline: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-color: #000;
	}
	.col-form-label {
	  color: #000;
	  font-size: 13px;
	}
	.btn, .form-control, .custom-select {
	  height: 45px;
	  border-radius: 0;
	}
	.custom-select {
	  border: none;
	  border-bottom: 1px solid #ccc;
	  padding-left: 0;
	  padding-right: 0;
	  border-radius: 0;
	}
	  .custom-select:active, .custom-select:focus {
		outline: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		border-color: #000;
	}
	.btn {
	  border: none;
	  font-size: 11px;
	  letter-spacing: .2rem;
	  text-transform: uppercase;
	  border-radius: 30px !important;
	}
	  .btn.btn-primary {
		border-radius: 30px;
		background: #ef4339;
		color: #fff;
		-webkit-box-shadow: 0 15px 30px 0 rgba(239, 67, 57, 0.2);
		box-shadow: 0 15px 30px 0 rgba(239, 67, 57, 0.2);
	}
	  .btn:hover {
		color: #fff; }
	  .btn:active, .btn:focus {
		outline: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	.contact-wrap {
	  -webkit-box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.05);
	  box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.05);
	  border: 1px solid #efefef;
	}
	  .contact-wrap .col-form-label {
		font-size: 14px;
		color: #b3b3b3;
		margin: 0 0 10px 0;
		display: inline-block;
		padding: 0;
	}
	  .contact-wrap .form, .contact-wrap .contact-info {
		padding: 40px;
	}
	  .contact-wrap .contact-info {
		color: rgba(255, 255, 255, 0.5);
	}
		.contact-wrap .contact-info ul li {
		  margin-bottom: 15px;
		  color: rgba(255, 255, 255, 0.5);
	}
		  .contact-wrap .contact-info ul li .wrap-icon {
			font-size: 20px;
			color: #fff;
			margin-top: 5px;
	}
	  .contact-wrap .form {
		background: #fff;
	}
		.contact-wrap .form h3 {
		  color: #000;
		  font-size: 2rem;
		  font-weight: 700;
		  margin-bottom: 30px;
	}
	  .contact-wrap .contact-info {
		height: 100vh;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}
		.contact-wrap .contact-info a {
		  position: absolute;
		  top: 0;
		  bottom: 0;
		  left: 0;
		  right: 0;
	}
	label.error {
	  font-size: 12px;
	  color: red;
	}
	#message {
	  resize: vertical;
	}
	#form-message-warning, #form-message-success {
	  display: none;
	}
	#form-message-warning {
	  color: #B90B0B;
	}
	#form-message-success {
	  color: #55A44E;
	  font-size: 18px;
	  font-weight: bold;
	}
	.submitting {
	  float: left;
	  width: 100%;
	  padding: 10px 0;
	  display: none;
	  font-weight: bold;
	  font-size: 12px;
	  color: #000;
	}
		.contact-wrap .contact-info h3 {
		  color: #fff;
		  font-size: 20px;
		  margin-bottom: 30px;
	}

/** Responsive **/  

	@media only screen and (max-width: 986px) {   

			ul.gallery {      
			margin-left: 15vw;       
			margin-right: 15vw;
			}
			nav ul li a{
				font-size: 28px;
				text-align: center;
			}	
			/**TIP: Easy escape for touch screens, give gallery's parent container a cursor: pointer.**/
			.DivName {
				cursor: pointer
			}
			.Card_padding_start{
				padding: 0 ;
			}
			.Card_padding_end{
				padding: 0 ;
			}
			/** Formulaire contact */
			.contact-wrap .contact-info { 
			height: 400px !important; 
			} 

	}