/***** FONT *****/
@import url('https://fonts.googleapis.com/css?family=Lobster');

/****** BODY ******/
body{
	height: 100%;
	background-color: blue;
}

h1, h2, h3, h4 {
	color: #aa685b;
	font-family: 'Lobster';
	font-weight: normal;
	margin: 10px 0 10px 0;
}

.button-action {
	color: #FFF;
	background-color: #aa685b;
	font-family: 'Lobster';
	font-size: 18px;
	padding: 10px;
}

.button-action:hover {
	color: #aa685b;
	background-color: #fef8f5;
}

/****** HEADER ******/
header{
	width:100%;
	height:171px;
	background-color: #fef8f5;
}

figure{
	width:196px;
	height: 208px;
	float: left;
	padding-left: 15px
}

figure img{
	margin-top: 20px;
}

nav{
	margin-top:73px;
	float: right;
	padding-right: 15px
}

nav ul li a{
	text-decoration: none;
	color: #878786;
	padding: 12px;
	text-transform: uppercase;
	font-size: 18px;
}

nav ul li{
	list-style-type:none;
}

nav ul li a:hover{
	background-color: #aa685b;
	color: #FFF;
}

nav ul li a.active{
	background-color: #aa685b;
	color: #FFF;
}
nav ul li a:visited{
	background-color: #aa685b;
}

/***** FOOTER *****/

footer {
	margin-top: 30px;
	width:100%;
}

footer h4 {
	font-size: 24px;
}

footer .footer-top p, footer .footer-top a {
	font-size: 18px;
	color : #878786 !important;
	font-family: 'Lobster';
	margin: 10px 0 10px 0;
}

footer .footer-top{
	border-top: solid 1px #b7b7b6
}

.container-footer-top{
	overflow: hidden;
}

footer .footer-bottom{
	background-color: #b7b7b6;
}

p.signature{
	color: #FFF;
	font-size: 16px;
	text-align: center;
}

p.signature a{
	color: #FFF;
	text-decoration: none;
}

p.signature a:hover{
	color: #aa685b;
	text-decoration: none;
}

.container-footer-top figure img{
	margin-top: 8px;
}

/***** HOME *****/

.main {
	margin-top: 80px;
	clear: both;
}


#home section {
	height: 100%;
}

#home section article {
	background-color: #fef8f5;
	padding: 15px;
}

#home h1, #home h2 {
	text-align: center;
	font-size: 30px;
}

#home .block-home {
	height: 100%;
	margin-top: 30px;
}

#home p {
	color: #878786;
}

#home .button-action {
	margin-top: 30px;
	float: right;
}

/***** TARIFS *****/

#tarifs section {
	margin-bottom: 30px;
}

#tarifs section .tarifs-block {
	background-color: #fef8f5;
	padding: 15px;
}

#tarifs section .forfait {
	background-color: #aa685b;
}

#tarifs section .forfait h3 {
	color: #fef8f5;
}

#tarifs section .forfait ul li:before {
    content: "• ";
	font-size: 24px;
	line-height: 14px;
	vertical-align: bottom;
    color: #fef8f5;
}

#tarifs section .forfait ul li { 
    text-indent: -.7em;
}

#tarifs section .forfait ul {
   list-style: none;
}

#tarifs section h3 {
	text-align: center;
	font-size: 30px;
}

#tarifs section ul li span {
	color: #878786 
}

#tarifs section .forfait ul li span {
	color: #fef8f5 ;
	font-size: 14px;
}

#tarifs section ul li span.price {
	float: right; 
}

.separator {
	border-right: solid 1px grey 
}

.separator-white {
	border-right: solid 1px #fef8f5 
}

/***** SLIDER *****/

#home .slides h2, .slides .sub {
	font-size: 45px;
}
/***** FORM *****/

#contact{
    padding:10px 0 10px;
  }

  .contact-text{
    margin:45px auto;
  }

  .mail-message-area{
    width:100%;
    padding:0 15px;
  }

  .mail-message{
    width: 100%;
    background:rgba(255,255,255, 0.8) !important;
    -webkit-transition: all 0.7s;
    -moz-transition: all 0.7s;
    transition: all 0.7s;
    margin:0 auto;
    border-radius: 0;
  }

  .not-visible-message{
    height:0px;
    opacity: 0;
  }

  .visible-message{
    height:auto;
    opacity: 1;
    margin:25px auto 0;
  }

/* Input Styles */

  .form{
    width: 100%;
    padding: 15px;
    background:#f8f8f8;
    border:1px solid rgba(0, 0, 0, 0.075);
    margin-bottom:25px;
    color:#727272 !important;
    font-size:13px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
  }

  .form:hover{
    border:1px solid #aa685b;
  }

  .form:focus{
    color: white;
    outline: none;
    border:1px solid #aa685b;
  }

  .textarea{
    height: 200px;
    max-height: 200px;
    max-width: 100%;
  }
  
/* Generic Button Styles */

  .button{
    padding:8px 12px;
    background:#0A5175;
    display: block;
    width:120px;
    margin:10px 0 0px 0;
    border-radius:3px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    text-align:center;
    font-size:0.8em;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }

  .button:hover{
    background:#aa685b;
    color:white;
  }

/* Send Button Styles */

  .form-btn{
    width:180px;
    display: block;
    height: auto;
    padding:15px;
    color:#fff;
    background:#aa685b;
    border:none;
    border-radius:3px;
    outline: none;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    margin:auto;
    box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -moz-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
    -webkit-box-shadow: 0px 1px 4px rgba(0,0,0, 0.10);
  }

  .form-btn:hover{
    background:#b7b7b6;
    color: white;
    border:none;
  }

  .form-btn:active{
    opacity: 0.9;
  }
center{
  margin-top:330px;
}
input {
    position: relative;
    z-index: 9999;
}

/***** MEDIA QUERIES *****/
@media (min-width: 768px) {
  #institut {
	  height: auto;
  }

  #domicile {
	  height: auto;
  }

  #confort {
	  height: auto;
  }

  #epilations {
	  height: auto;
  }
}

@media (max-width: 992px) {
	.separator {
	  border-right: none;
  }
}

@media (min-width: 992px) {
  #institut {
	  height: 277px;
  }

  #domicile {
	  height: 277px;
  }

  #confort {
	  height: 317px;
  }

  #epilations {
	  height: 268px;
  }
}
@media (min-width: 1200px) {
  #institut {
	  height: 338px;
  }

  #domicile {
	  height: 338px;
  }

  #confort {
	  height: 386px;
  }

  #epilations {
	  height: 329px;
  }
}