/* COULEURS */
.grisfonce{color:#636c72;}
.love,
.page .container a{color:#CF45B6;}

.bg-gris{
	background-color:#F2F2F2;
}
.bg-love{
	content:'';
	display:block;
	width:100%;
	min-height:10px;
	background:#CF45B6;
	background:#bd3673;
	background:-moz-linear-gradient(left, #bd3673 0%, #d36a9b 100%);
	background:-webkit-linear-gradient(left, #bd3673 0%,#d36a9b 100%);
	background:linear-gradient(to right, #bd3673 0%,#d36a9b 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd3673', endColorstr='#d36a9b',GradientType=1 );
	color:#FFF;	
}
.bg-love center.line{
    width:100%;
    overflow:hidden;
    height:80px;
}
.bg-love center.line p{
	padding:0;
	line-height:80px;
	letter-spacing:3px;
	word-break:break-all;
}
.none{display: none !important;}
.flex{
  display: flex;
  align-items: stretch;
}
.clear{clear:both;}
.left{float:left;}
.right{float:right;}
.no-padding{
	padding-left: 0;
	padding-right: 0;
}
.bordered{
	border:1px solid #FFF;
	padding:10px;
	text-align:center;
}

img{
	vertical-align:bottom;
	max-width:100%;
	display:block;
	margin:0 auto;
}

strong{font-weight:700;}
em{
	font-weight:700;
	font-style:normal;
}
italic{font-style:italic;}
a{text-decoration:none;}
a:hover,
a:focus{
	cursor:pointer;
	color:#000;
	outline:0;
	filter:alpha(opacity=100);
	opacity:1;
}

.page em{color: #CF45B6;}

/*	---------------- BOOTSTRAP --------------- */
@media (min-width:1200px){.container{max-width:1280px;}}

/*	---------------- PRESENTATION --------------- */
#presentation{
	padding-top:0;
	overflow:hidden;
	height: 49vh;
	min-height: 470px;
}
#presentation h1 {
    line-height: 1.25em;
    margin: 40px 0;
}
#presentation h1 span {
    font-size: 1.3em;
    display: block;
}
#presentation .container{
	position: relative;
	height: 100%;
}
#presentation .phone,
#presentation .appli{
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
#presentation .img-presentation{left: -40px;}
#presentation .img-presentation img{max-width: 300px;}
#presentation .appli a{margin: 25px 0 35px;}
#presentation .img-phone {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 95%;
}
#presentation .img-phone img{
  max-height: 100%;
  margin: 0;
  float: right;
}
#presentation .appli a.appstore img,
#presentation .appli a.googleplay img {max-height: 35px;}

/*	---------------- APP-LOVE --------------- */
#applove.bg-love{
	padding-top:50px;
	padding-bottom:50px;
}
#applove .row{
	display: flex;
	align-items:center;
}
#applove h3{
  text-transform: uppercase;
  margin-left: 8.33333333%;
}
#applove p{margin-left: 8.33333333%;}
#applove p span{
  font-size: 0.8em;
}

/*	---------------- PARTAGER --------------- */
#partager .bg-gris{
	position:relative;
	padding-bottom: 50px;
}
#partager .bg-gris h3{
	font-weight: 400;
	margin-top: 50px;
}
#partager .bg-gris h3:before{
	content:'';
	margin: -50px 0 20px 15%;
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 15px 0 15px;
	border-color: #ffffff transparent transparent transparent;
}
#partager .bg-blanc{
	display:flex;
	justify-content: flex-end;
}
#partager .bg-blanc .flex{
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
#partager .bg-foret{
  height: 75vh;
  overflow: hidden;
  background: url(../img/balade-en-foret.jpg) no-repeat center/cover;
}
#partager img{margin-top: -50px;}
#partager .city{
	padding-top:25px;
	color:#000;
	font-size:1em;
	text-transform: none;
}

/*	---------------- QUITTER --------------- */
#quitter .row.flex{
	align-items: stretch;
  flex-wrap: nowrap;
}
#quitter h3{text-transform: uppercase;}
#quitter p:last-of-type{margin-bottom: 40px;}
#quitter .img{
  align-self: flex-end;
  -webkit-align-self: flex-end;
}

/* ------------ POURQUOI ----------- */
#pourquoi{padding-bottom: 50px;}
#pourquoi h3{padding:50px 0 20px 0;}
#pourquoi .box{
  height: 400px;
  margin: 0 auto;
  padding: 35px 30px;
  background: #FFF;
  border-radius: 6px;
  -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.05);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.05);
  flex-direction: column;
  justify-content: flex-start;
}
#pourquoi .box h4{
  text-align: center;
  text-indent: 0;
}
#pourquoi .box p{
  color: #000;
  font-size: 1.1em;
  font-style: italic;
}
#pourquoi .box img{
  width: 120px;
  height: 120px;
}

/* ------------ SHARE PHOTO ----------- */
#share .flex{
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
}
#share .flex figure,
#share .flex p{
  width: 18%;
  margin: 10px auto;
  font-size: 2em;
}

/* ------------ APPLICATION FOOTER ----------- */
#footer-appli{padding: 0;}
#footer-appli h2 {margin: 50px 0;}
#footer-appli p:nth-of-type(2) {margin-top: 30px;}
#footer-appli .flex{align-items: flex-end;}
#footer-appli .flex p:first-of-type{margin-top: 100px;}
#footer-appli .flex a{margin: 30px 0;}
#footer-appli .flex a img{max-height: 35px;}
#footer-appli .container{border-bottom: 1px solid #dcdcdc;}

#nav-footer .container{border-top: 0;}

#footer-appli .avantages{
  margin-top: 2em;
}

.modal .visuels a:hover,
.visuels a:focus{background-color: #CF45B6;}

/*---------------- Icone MyFontastic --------------- */
i{
	color:#fff;
	font-size:16px;
}

/* ---------------- Formulaire --------------- */
input[type="email"]{
	background: url(../img/arobas-lost.png) no-repeat 5px center;
}
input[type="submit"]{background-color: #f8e3f4;}
.select-objet .caret{color: #CF45B6;}
.select-objet select{color: #CF45B6;}

/*---------------- RESPONSIVE --------------- */
@media only screen and (max-width: 1200px){
	#presentation{
		height: auto;
		min-height: auto;
	}
	#presentation .phone{
		position:relative;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
	}
	#presentation .img-presentation{
    position:relative;
    left: 0;
  }
	#presentation .img-phone,
	#presentation .img-phone img{height: auto;}
	#partager img{margin-top: 61px;}
}

@media only screen and (max-width: 992px){
	#presentation .appli a.appstore img,
	#presentation .appli a.googleplay img{margin: 0 10px;}

	#quitter .txt{padding: 0 15px;}
  
  #pourquoi .box{height:100%;}

	#partager img{margin-top: 86px;}

	#footer-appli .chatons img{margin-right: 0;}
	#footer-appli .app a{margin: 30px 0 0;}
  #footer-appli .flex p:first-of-type,
  #footer-appli p:nth-of-type(2){margin-top: 0;}
}

@media only screen and (max-width: 767px){
  .flex{flex-direction: column;}
	header.home,
	header .brand-name,
	#presentation{
		min-height: auto;
		height: auto;
	}
  header .brand-name{
    margin: 80px auto 50px;
    font-size: 2.1em;
  }
  h2{font-size: 1.4em; text-align: center;}
	#presentation h2{
		text-align: center;
		margin: 10px auto;
	}
	#presentation .phone{
		position: relative;
		bottom: 0;
		top: auto;
		left: 0;
		right: 0;
		background: none;
	}
	#presentation .appli a{padding: 10px 0;}
	#presentation .appli a.appstore img,
  
	#applove .row{flex-direction:column;}
	#applove.bg-love .v-center{
		position: relative;
		top: 0;
		left: 0;
		transform: none;;
	}
	#applove.bg-love h3{margin-left: 0;}
	#applove.bg-love p{text-align: justify; margin-left: 0;}
	
	#quitter .txt{padding: 30px 15px;}
	#quitter .img{align-self: flex-end;}
	#quitter .img-responsive{min-width: auto;}
  
  #pourquoi .box{margin: 1em auto; height: auto;}
  
  #share .row:before{display: none;}
  #share .flex{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    margin: 0 5px;
  }
  #share .flex figure{display: none;}
  #share .flex figure:nth-child(-n+11){display: block;}
  #share .flex figure, #share .flex p {width: 100%;}

	#question h2 span{margin-left:0;}
	#question .box > img{display:inline;}
	#question .adopter p:nth-child(odd){margin-top:0;}
	
	#partager img{margin-top: 0;}
	
	#footer-appli .container{flex-direction: column;}
	#footer-appli .app,
	#footer-appli .messagerie img,
	#footer-appli .chatons img{
		margin: 0 auto;
		text-align: center;
	}
  #footer-appli .app a{margin-bottom: 30px;}
  #footer-appli .chatons img{padding: 0;}
  
	#nav-footer{padding:0 15px;}
	#nav-footer .sep li{text-align:center;}
	#nav-footer .sep.suivre ul{text-align:center;}
	#nav-footer .sep.suivre li{
		width:50px;
		height:50px;
		float:none;
		display:inline-block;
	}
	#nav-footer li a{font-size: 1em !important;}
	#nav-footer .sep{height: auto;}
	#nav-footer .sep:before{height: 100%;}
	#nav-footer .sep ul h5{
        font-size: 1.2em;
        text-align: center;
    }
	#nav-footer .sep.suivre a.fb,
	#nav-footer .sep.suivre a.tw,
	#nav-footer .sep.suivre a.ig,
	#nav-footer .sep.suivre a.gp,
	#nav-footer .sep.suivre a.lk,
	#nav-footer .sep.suivre a.vd,
	#nav-footer .sep.suivre a.pn{background-size: 50px;}
	#nav-footer .sep.suivre .clear{display: none;}
	
	#legal{padding:0;}
	#legal li{
		display:block;
		text-align:center;
	}
	#legal li a{
		float: left;
		width: 100%;
	}
}