/*---------------------general*/
@font-face {
    font-family: "MontserratBold";
    src: url('../fonts/Montserrat-Bold.otf');
}
@font-face {
    font-family: "MontserratLight";
    src: url('../fonts/Montserrat-Light.otf');
}
body{
	color: #fff;
	background: #1d1e1c;
}
h1, h2, h3{
	font-family: 'MontserratBold', sans-serif;
	text-transform: uppercase;
}
.bold{
	font-family: 'MontserratBold', sans-serif;
}
h1, h2, h3, p, ul, li, a, hr{
	margin: 0;
}
.page-accueil h3{
	color: #716d69;
	font-size: 20px;
}
p, footer a{
	font-family: "MontserratLight", sans-serif;
	font-size: 16px;
	line-height: 1.6;
}
a, a:focus, a:hover{
	color: currentColor;
    text-decoration: none;
}
.fz12{font-size: 12px;}

.padding-60{
	padding-top: 60px;
	padding-bottom: 60px;
}
.padding-b-60{
	padding-bottom: 60px;
}
.padding-30{
	padding-top: 30px;
	padding-bottom: 30px;
}
.margin-22{
	margin-top: 22px;
}
.margin-20{
	margin-top: 20px;
}
.sub-title{
	font-family: 'MontserratBold', sans-serif;
	letter-spacing: 1px;
}
.page-atelier .titles, .page-randonnees .titles{
	transform: none;
}
.bottom{
	bottom:340px;
}

.mb-2 {
    margin-bottom: .5rem!important
}

/*---------------------------------*/
/*-----------------header des pages*/
/*---------------------------------*/
.page-atelier .background-header img, .page-randonnees .background-header img,
.page-magasin .background-header img, .page-contact .background-header img,
.page-mentions-legales .background-header img{
	width: 60%;
}
.page-atelier .background-header, .page-randonnees .background-header,
.page-magasin .background-header, .page-contact .background-header,
.page-mentions-legales .background-header{
	background-position: center 28%;
	padding: 50px 0;
}
.page-atelier .titles, .page-randonnees .titles, .page-contact .titles, .page-magasin .titles,
.page-mentions-legales .titles{
	display: inline-block;
	margin-top: 50px;
}
.page-atelier .titles p:nth-child(1), .page-randonnees .titles p:nth-child(1),
.page-contact .titles p:nth-child(1), .page-magasin .titles p:nth-child(1){
	background: #1d1e1c;
	padding: 0px 20px;
	font-size: 50px;
}
.page-mentions-legales .titles p:nth-child(1){
	background: #1d1e1c;
	padding: 0px 20px;
	font-size: 48px;
}
/*---------------------menu*/
.navbar-default{
	background: #1d1e1c;
	border-color: none;
}
.navbar-default .navbar-nav>li>a{
	color: white;
	font-weight: bold;
	letter-spacing: 1px;
}
.navbar-default .navbar-nav>li>a:hover{
	color: #891a14;
}
.navbar-default .navbar-nav>li>.active{
	color: #891a14;
}
.navbar{
	min-height: 55px;
	margin-bottom: 0;
	border: none;
}
.navbar-nav {
    text-align: center;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form{
	border-color: transparent;
}
.navbar-default .navbar-toggle{
	border: none;
}
.navbar-default .navbar-toggle .icon-bar{
	background-color: #fff;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
	background-color: transparent;
}


/*---------------------header*/
.background-header{
	background: url(../img/bg-header.png) bottom;
	-webkit-background-size: cover;
	background-size: cover;
	padding-top: 25px;
	max-height: 550px;
	border-bottom: 17px solid #891a14;
}
.page-accueil .titles {
  	display: flex;
  	flex-direction: column;
  	align-items: flex-start;
  	transform: skewY(-13deg);
  	color: white;
  	margin-top: -55px;
  	margin-bottom: 50px;
}
.page-accueil .titles p{
  	margin: 5px;
 	text-transform: uppercase;
}
.titles p:nth-child(1){
	background: #891a14;
	padding: 3px 20px;
	font-size: 34px;
}
.titles p:nth-child(2){
	background: #1d1e1c;
	padding: 0px 20px;
	font-size: 53px;
	margin-left: 70px;
}
.titles p:nth-child(3){
	background: #716d69;
	padding: 3px 20px;
	font-size: 20px;
	margin-left: 126px;
}

.marques{
	background: #fff;
	padding: 30px 0;
}
.marques a{
	cursor: default;
}
.marques ul{
	list-style: none;
	display: block;
	/* justify-content: space-between; */
}
.marques ul li{
  display:inline-block;
  margin:0 15px 15px 0;
}
.marques img{
	max-width: 100%;
	/*filter: opacity(50%);*/
	transition: ease-in-out .2s;
}
.marques img:hover{
	transform: scale(1.1);
	filter: opacity(100%);
  cursor: pointer;
}


/*---------------------section-description*/
.big{
	font-size: 22px;
	line-height: 2;
}
.section-description h1{
	font-size: 34px;
	color: #891a14;
	font-weight: bold;
}

#carte-grise{
  color: #fff;
  background-color: #716d69;
  font-size: 28px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 20px;
  padding: 10px 14px;

}

/*---------------------magasin-atelier*/

.magasin{
	background: url(../img/bg-magasin.png);
}
.atelier{
	background: url(../img/bg-atelier.jpg);
}
.magasin, .atelier{
	-webkit-background-size: cover;
	background-size: cover;
}
.magasin h2, .atelier h2{
	padding: 10px 14px;
	display: inline-block;
	margin-bottom: 30px;
	font-size: 37px;
}
.magasin h2{
	background: #891a14;
}
.atelier h2{
	background: #1d1e1c;
}

/*---------------------randonnees*/
.section-randonnees{
	background: url(../img/bg-rando.png);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}
.section-randonnees h2{
	background: #716d69;
	padding: 10px 14px;
	display: inline-block;
	margin-bottom: 30px;
	font-size: 37px;
}
.section-description h2{
	background: #716d69;
	padding: 10px 14px;
	display: inline-block;
	margin-bottom: 30px;
	font-size: 37px;
}
.lien-diapo{
	text-align:center;
	font-size:11px;
	padding-top:10px;
}
.lien-diapo img{
	min-height:350px;
	width:600px;
}
.lien-diapo a{
	overflow:hidden;
	width:100%;
	height:350px;
	display:block;
}


/*---------------------buttons*/
.magasin button.btn, .atelier button.btn, .section-randonnees button.btn{
	border: none;
	border-radius: 0px;
	padding: 6px 10px;
	margin-top: 20px;
	transition: .3s ease-in-out;
}
.doc-btn{
  border: none;
	border-radius: 0px;
	padding: 6px 10px;
	margin-top: 20px;
	transition: .3s ease-in-out;
}
.doc button.btn{
	background: #891a14;
}
.doc button.btn:hover{
	background: #fff;
	color: #891a14;
}
.doc button.btn:hover a{
	color: #891a14;
}

.magasin button.btn{
	background: #891a14;
}
.magasin button.btn:hover{
	background: #fff;
	color: #891a14;
}
.magasin button.btn:hover a{
	color: #891a14;
}

.atelier button.btn{
	background: #1d1e1c;
}
.atelier button.btn:hover{
	background: #fff;
	color: #1d1e1c;
}
.atelier button.btn:hover a{
	color: #1d1e1c;
}

.section-randonnees button.btn{
	background: #716d69;
}

.section-randonnees button.btn:hover{
	background: #fff;
	color: #716d69;
}
.section-randonnees button.btn:hover a{
	color: #716d69;
}

button.btn:hover a{
	text-decoration: none;
}
button a{
	color: #fff;
	transition: .3s ease-in-out;
}
/*---------------------contact de l'index*/
.mail_index{
	list-style:none;
	font-family: "MontserratLight", sans-serif;

}
.mail_contact{
	list-style: none;
    font-family: "MontserratLight", sans-serif;
    padding: 0;
}
.tel_contact{
	margin-bottom:30px;
}
.red{
	color:#891a14;
	text-transform:uppercase;
}
.grey{
	color:#716d69;
	text-transform:uppercase;
}
/*---------------------footer*/
footer h3{
	font-size: 17px;
}
.page-accueil footer h3:not(:nth-child(1)){
	margin-top: 22px;
}
.page-accueil footer h3{
	margin-bottom: 10px;
}
.mentions-legales{
	background: #891a14;
	padding: 7px 0px;
}
.mentions-legales a{
	color: #fff;
	font-size: 9px;
}
.mentions-legales a:hover{
	text-decoration: none;
	color: #1d1e1c;
}
.mentions-legales ul{
	list-style: none;
	display: flex;
	justify-content: center;
}
.mentions-legales li{
	margin-right: 25px;
}



/*---------------------------------*/
/*---------------------page atelier*/
/*---------------------------------*/


/*---------------------section prix*/
.page-atelier .section-prix{
	font-family: 'MontserratLight', sans-serif;
	position: relative;
}

.page-atelier .section-prix .taux p{
	padding: 5px 15px;
	text-align: center;
}
.page-atelier .section-prix .taux p:first-child{
	font-size: 24px;
	color: #891a14;
}
.page-atelier .section-prix .taux p:nth-child(2){
	font-size: 38px;
	color: #fff;
	margin-top: -20px;
}
.taux .border{
	border: 5px solid #fff;
}
.page-atelier .section-prix .taux p:last-child{
	font-family: 'MontserratLight', sans-serif;
	font-size: 32px;
	color: #fff;
	margin-top: -20px;
}

.page-atelier .section-prix h2{
	padding: 10px 14px;
	margin-bottom: 30px;
	margin-top: 30px;
	font-size: 24px;
	background: #891a14;
	color: #fff;
}
.page-atelier .section-prix h2 span{
	color: #1d1e1c;
}
.page-atelier .section-prix ul{
	padding: 0;
	margin-left: 10px;
	margin-right: 10px;
}
.page-atelier .section-prix li{
	margin-bottom: 10px;
	list-style: none;
	display: flex;
    justify-content: space-between;
}
.page-atelier .section-prix span.prix{
	font-size: 17px;
	margin-left: 15px;
}
/*---------------------section equipe*/


.page-atelier .section-equipe h2{
	padding: 10px 14px;
	display: inline-block;
	margin-bottom: 30px;
	font-size: 37px;
	background: #891a14;
}
.page-atelier .section-equipe .circle-employe{
	width: 250px;
	height: 250px;
	overflow: hidden;
	border-radius: 50%;
	border: 8px solid #1d1e1c;
}
.page-atelier .section-equipe{
	background: url(../img/img-atelier/bg-equipe.jpg);
	-webkit-background-size: cover;
	background-size: cover;
	background-position: center;
}
.page-atelier .section-equipe p.name{
	font-family: 'MontserratBold', sans-serif;
	font-size: 18px;
	background: #891a14;
	display: inline-block;
	padding: 5px 10px;
	z-index: 2;
	margin-bottom: -15px;
}
.page-atelier .section-equipe p.job{
	text-transform: uppercase;
	background: #1d1e1c;
	display: inline-block;
	padding: 5px 10px;
	margin-top: -15px;

}
.page-atelier .section-equipe .membre{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*---------------------------------*/
/*------------------page randonnees*/
/*---------------------------------*/



.section-rando:not(:last-of-type){
	margin-bottom: 60px;
}

/*---rouge---*/
.section-rando:nth-child(3n+1){
	background: url(../img/bg-rando-rouge.jpg)no-repeat;
}
.section-rando:nth-child(3n+1) h2, .section-rando:nth-child(3n+1) button.btn{
	background: #891a14;
}
.section-rando:nth-child(3n+1) button.btn:hover, .section-rando:nth-child(3n+1) button.btn:hover a{
	color: #891a14;
}

/*---noir---*/
.section-rando:nth-child(3n+2){
	background: url(../img/bg-rando-noir.jpg)no-repeat;
}
.section-rando:nth-child(3n+2) h2, .section-rando:nth-child(3n+2) button.btn{
	background: #1d1e1c;
}
.section-rando:nth-child(3n+2) button.btn:hover, .section-rando:nth-child(3n+2) button.btn:hover a{
	color: #1d1e1c;
}

/*---beige---*/
.section-rando:nth-child(3n+3){
	background: url(../img/bg-rando-beige.jpg)no-repeat;
}
.section-rando:nth-child(3n+3) h2, .section-rando:nth-child(3n+3) button.btn{
	background: #716d69;
}
.section-rando:nth-child(3n+3) button.btn:hover, .section-rando:nth-child(3n+3) button.btn:hover a{
	color: #716d69;
}

.section-rando{
	background-size: cover !important;
	background-position: center center !important;
  position: relative;
}
.section-rando .cancel{
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}
.section-rando .cancel .img-center{
  display: flex;
  height: 100%;
}
.section-rando .cancel .img-center img,
.section-rando .cancel .img-center span{
  margin: auto;
}
.section-rando .cancel .img-center span{
  background: #AD0E08;
  padding: 40px;
  font-size: 4em;
  transform: rotate(-7deg);
  text-transform: uppercase;
}

.section-rando .btn-cancel{
  transform: rotate(-7deg);
  pointer-events: none;
  background: #AD0E08 !important;
  color:#fff !important;
}

.section-rando h2{
	padding: 10px 14px;
	display: inline-block;
	margin-bottom: 20px;
	font-size: 37px;
}
.section-rando button.btn{
	border: none;
	border-radius: 0px;
	padding: 6px 10px;
	margin-top: 20px;
	transition: .3s ease-in-out;
}
.section-rando button.btn:hover{
	background: #fff;
}

/*---------------------------------*/
/*------------------page magasin*/
/*---------------------------------*/
.page-magasin .btn, .page-randonnees .btn{
	color: #fff;
	border: none;
	border-radius: 0px;
	padding: 6px 10px;
	margin-top: 20px;
	background: #891a14;
	transition: .3s ease-in-out;
	font-size: 20px;
}
.page-magasin .btn:hover, .page-randonnees .btn:hover{
	text-decoration: none;
	background: #fff;
	color: #891a14;
}
.page-magasin .btn:hover a, .page-randonnees .btn:hover a{
	color: #891a14;
}
.section-bandeau h2{
	background: #fff;
    padding: 10px 14px;
    display: inline-block;
    margin-bottom: 30px;
    font-size: 37px;
    color: #1d1e1c;
}
.section-bandeau h2>span{
	color: #891a14;
}
.section-bandeau ul li{
	margin-bottom: 10px;
}
.section-bandeau img{
	filter: grayscale(.8);
	transition: all .3s ease-in-out;
}
.section-bandeau img:hover{
	filter: grayscale(0);
}

/*---------------------------------*/
/*---------------------page contact*/
/*---------------------------------*/
.pop-up{
    background: rgba(62, 62, 62, 0.73);
    font-size: 20px;
    text-align: center;
    line-height: 106px;
    border: 3px solid white;
    box-shadow: 1px 1px 23px rgba(0, 0, 0, .8);
}
.pop-up .glyphicon-ok-circle{
	margin-right: 10px;
	color: #27ae60;
}
.close{
    color: white;
    text-shadow: none;
    opacity: 1;
}
.modal-header{
	position: absolute;
	border-bottom: 0;
	top: 0;
	right: 0;
	z-index:1;
}
.form-control{
	color: #fff;
	border: none;
	border: 2px solid #891a14;
	background: none;
	border-radius: 0;
	box-shadow: none;
	/*margin-top: 28px;*/
}
input[name="confirm_mail"]{
	width:0; height:0;
	padding:0; margin:0;
	border:none;
}
.list-errors{
    background: #891a14;
	margin:1em 15px;
}
.list-errors ul{
	padding:8px 20px;
}
.list-errors ul li{
	margin-left: 30px;
}
.list-errors ul i{
    font-size: 19px;
    margin-right: 15px;
}
.form-group{
	position: relative;
}
.form-control:focus{
	border-color: #891a14;
	box-shadow: none;
}
.form-horizontal .control-label{
	/*position: absolute;*/
	text-align: left;
}

textarea.form-control{
	resize: none;
	height: 100px;
}
textarea:-webkit-scrollbar {
    width: .7em;
}
textarea:-webkit-scrollbar-thumb {
  	background-color: #fff;
}


form button.btn{
	border: none;
	border-radius: 0px;
	padding: 6px 10px;
	margin-top: 20px;
	background: #891a14;
	transition: .3s ease-in-out;
}
form button.btn:hover{
	background: #fff;
	color: #891a14;
}
.infos p{
	line-height: 2;
}
#map{
    height: 400px;
}
.page-contact .infos h3:not(:nth-child(1)){
	margin-top: 30px;
}

.page-contact .infos h2, .page-contact .infos h3{
	padding: 10px 14px;
	margin-top: 30px;
	color: #fff;
    display: inline-block;
    font-size: 24px;
    background: #891a14;
}
.page-contact .infos h3{
	margin-bottom: 10px;
}
.section-map .col-sm-12{
	padding: 0;
}
/*---------------------------------*/
/*------------page mentions legales*/
/*---------------------------------*/
.page-mentions-legales h3{
	font-size: 18px;
	margin-top: 30px;
	margin-bottom: 10px;
}
/*---------------------media queries*/
@media (max-width: 1200px){
	.page-atelier .titles p:nth-child(1), .page-randonnees .titles p:nth-child(1),
	.page-contact .titles p:nth-child(1), .page-magasin .titles p:nth-child(1),
	.page-mentions-legales .titles p:nth-child(1){
		font-size: 38px;
	}
}

@media (max-width: 992px){
	.page-atelier .section-equipe .membre{
		margin-top: 20px;
	}
	.taux .border{
		border: 5px solid #891a14;
		margin-bottom: 20px;
	}
	.text-right, .text-left{
		text-align: center;
	}
}

@media (min-width: 992px){
	.magasin{
		padding-right: 37px;
	}
	.atelier{
		padding-left: 37px;
	}
}

@media (min-width: 768px){
	.navbar {
	    border-radius: 0px;
	}
	.navbar-nav {
    	float: none;
    	display: flex;
    	justify-content: space-between;
	}
}

@media (max-width: 768px){
	.margin-top-30{
		margin-top: 30px;
	}
	.background-header img{
		margin: 0 auto;
	}
	.page-accueil .titles{
		margin-top: 10px;
		align-items: center;
	}
	.titles p:nth-child(1){
		font-size: 20px;
	}
	.titles p:nth-child(2){
		font-size: 20px;
		margin-left: 15px;
	}
	.titles p:nth-child(3){
		font-size: 10px;
		margin-left: 75px;
	}
	.section-rando h2{
		font-size: 24px;
	}
	.page-atelier .titles p:nth-child(1), .page-randonnees .titles p:nth-child(1),
	.page-contact .titles p:nth-child(1), .page-magasin .titles p:nth-child(1),
	.page-mentions-legales .titles p:nth-child(1){
		font-size: 24px;
	}
}

@media (min-width: 410px) and (max-width: 768px){
	.titles{
		margin-top: -10px;
	}
	.titles p:nth-child(1){
		font-size: 30px;
	}
	.titles p:nth-child(2){
		font-size: 40px;
		margin-left: 15px;
	}
	.titles p:nth-child(3){
		font-size: 20px;
		margin-left: 75px;
	}
}

@media (min-width: 768px) and (max-width: 1200px){
	.titles{
		margin-top: 10px;
		align-items: center;
	}
	.titles p:nth-child(1){
		font-size: 30px;
	}
	.titles p:nth-child(2){
		font-size: 40px;
		margin-left: 15px;
	}
	.titles p:nth-child(3){
		font-size: 20px;
		margin-left: 75px;
	}
}