@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;500&display=swap');

@font-face {
      font-family: 'fontello';
      src: url('font/fontello.eot?41156616');
      src: url('font/fontello.eot?41156616#iefix') format('embedded-opentype'),
           url('font/fontello.woff?41156616') format('woff'),
           url('font/fontello.ttf?41156616') format('truetype'),
           url('font/fontello.svg?41156616#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
	
.fontello {
  font-family: "fontello";
  margin:0 5px;
}
	
html {
	padding:0;
	color: #000;
	font-family: 'Barlow Condensed', sans-serif;
	letter-spacing:0.5px;
   	font-size:20px;
	font-weight:300;
	line-height: 1.4;
}

p, blockquote, li {
	margin:0;
	padding:0;
	text-align:justify;
	}

strong {
	font-weight:500;
	}

body {
	padding:0;
	margin:0;
} 

.content {
	width:90%;
	max-width:900px;
	margin:0 auto;
	padding:10px 0 0 0;
	}

header {
	background-color:#00748d;
	height:170px;
	}

#burger {
	display:none;
	}
	
header nav {
	z-index:1;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	}

header .content {
	color:#fff;
	height:80px;
	padding:15px;
	}

header #menu {
	color:#000;
	background-color:#fff;
	height:25px;
	padding:20px;
	}

header #adresse {
	float:left;
	}

header #horaires {
	float:right;
	text-align:right;
	}

header a {
	color:#fff;
	text-decoration:none;
	}

#menu ul {
	margin:0 auto;
	padding:0;
	width:830px;
	}

#menu li {
	text-align:center;
	display:inline-block;
	text-transform:uppercase;
	letter-spacing:1px;
	padding:0 10px;
	margin:0
	}

#menu li a {
	padding:10px;
	text-decoration:none;
	color:#000;
	cursor: pointer
	}

#menu li a:hover, #menu li .over {
	font-weight:500;
	}

.sticky {
	animation:thedrop 1s 1;
	-moz-animation:thedrop 1s 1;
	-webkit-animation:thedrop 1s 1;
	background-color:#00748d;
	font-size:18px;
}

.sticky .content {
	height:auto;
	}

.sticky #adresse, .sticky  #horaires {
	float:none;
	text-align:center;
	}

.sticky #adresse br, .sticky  #horaires br {
	display:none;
	}

#bandeau {
	background-image:url(../images/osteopathe-guerande-cabinet.jpg);
	background-size:cover;
	background-position:center;
	height:750px;
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	}

#logo, .cta {
	width: 400px;
	max-width:70%;
	} 

#logo {
	margin-top: -50px
}

.cta img {
	width: 100%;
}

section {
	clear:both;
	padding:100px 0 120px 0;
	overflow:hidden;
	}

h1 {
	margin:0 0 40px 0;
	padding:0;
	font-weight:300;
	font-size:30px;
	text-align:center;
	}

h1 strong {
	font-weight:500;
	text-transform:uppercase;
	}

#lecabinet h1, #seance h1 {
	color:#00748d
	}

#lecabinet img {
	border-radius:50%;
	margin:0 0 0 5%;
	float:right
	}

#lecabinet p {
	padding:2% 3%;
	margin:0;
	}

#lecabinet ul {
	padding:0;
	margin:30px 0;
	}

#lecabinet li {
	list-style-type:none;
	margin-bottom:8px;
	}

#lecabinet li:before {
	content: '\e806  ';
	font-family: "fontello";
	color:#fbc78f;
	}

#lecabinet .du:before {
	color:#fda0ac;
	}

#citation {
	color:#00748d;
	font-style:italic;
	background-color:#eee;
	padding:80px;
	}

#citation p {
	text-align:center;
	margin:0;
	padding:50px 0 0 0 ;
	font-size:30px;
	line-height:30px;
	}

#citation .quote1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:150px;
  	vertical-align:-50px;
	}

#citation .quote2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:100px;
  	vertical-align:-70px;
	}

#consultation {
	background-color:#00748d;
	color:#fff;
	}

#consultation ol {
	padding:0;
	margin:0;
	list-style-type:none;
	}

#consultation ol li ul {
	padding:0;
	margin:0 0 0 15px;
	list-style-type:none;
	}

#consultation ol li {
	width:30%;
	float:left;
	margin:0 1.5%;
	}
	
#consultation ol li ul li {
	width:100%;
	}

#consultation ol li ul li:before {
	content: '\e803  ';
	font-family: "fontello";
	}

#consultation .adultes li:before {
	color:#fbc78f;
	}

#consultation .enfants li:before {
	color:#fff;
	}

#consultation .enfants img {
	margin-top:100px;
	}
	
#consultation .enceintes li:before {
	color:#fda0ac;
	}

h2 {
	margin:0;
	padding:15px;
	font-size:25px;
	font-weight:500;
	text-transform:uppercase;
	}

#diapo {
	position:relative;
	background-position:center;
	background-size:cover;
	height:800px;
	width:100%;
	background-image:url(../images/osteopathie-guerande-cabinet.jpg);
}

h3 {
	margin:0;
	padding:20px 0 10px 0;
	font-size:20px;
	font-weight:500;
	text-transform:uppercase;
	}

#seance ul {
	list-style-type:none;
	margin:-5% -2%;
	padding:0;
	}

#seance ul li {
	list-style-type:none;
	float:left;
	width:21%;
	margin:2%;
	}

#seance ul li h3 {
	text-align:center
	}

#seance ul li h3 span {
	color:#fff;
	display:inline-block;
	width:15px;
	height:15px;
	text-align:center;
	padding:20px;
	border-radius:50px;
	margin:10px 0;
	line-height: 0.8;
	}

#seance ul li:nth-child(1) h3 span {
	background-color:#fbc78f;
	}

#seance ul li:nth-child(2) h3 span {
	background-color:#fda0ac;
	}

#seance ul li:nth-child(3) h3 span {
	background-color:#00748d;
	}

#seance ul li:nth-child(4) h3 span {
	background-color:#fbc78f;
	}

#tarifs {
	background-color:#eee;
	padding:80px;
	}

#tarifs p {
	text-align:center;
	margin:-15px 0 20px 0;
	}

#devanture {
	padding:0!important;
	background-color:#00748d;
	margin-bottom:-70px;
	}

#devanture img {
	width:100%;	
	}

#rdv {
	background-color:#00748d;
	padding:80px 0;
	color:#fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#contact {
	padding:0!important;
	text-align:center;
	height:900px;
	background: url("../images/plan-ville-guerande.jpg");
	background-position:center;
	background-size: cover;
	display: flex;
    justify-content: center;
    align-items: flex-start;
	}

#contact #coordonnees {
	background-image:url(../images/bulle.png);
	background-size: cover;
	background-position: bottom center;
	text-align:center;
	width:320px;
	height: 380px;
	margin-top:50px;
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	}

#contact #coordonnees h1 {
	margin:-20px 0 0 0;
	padding: 0;
	}

#contact #coordonnees h2 {
	margin:0;
	padding: 0;
	}

#contact a {
	color:#000;
	text-decoration:none;
	}

footer {
	padding:20px;
	background-color:#fff;
	text-align:center;
	color:#909090;
	font-size:16px;
	}

footer a {
	color:#909090;
	}

#mentions {
	display:none;
	padding:2%;
	}

#mentions p {
	text-align:justify;
	padding-bottom:10px;
	}