html
{
	scroll-behavior: smooth;
}

body
{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin: 0;
	line-height: 1.6;
}

#main-title
{
	margin: auto;
	width: 80%;
	text-align: center;
}

#page-title
{
	text-align: center;
}

#page-title h1
{
	font-variant-caps: small-caps;
	font-size: 26px;
}

.logo-brand img
{
	width: 200px;
}

header 
{
	line-height: 3;
	background: rgb(21,41,64);
	position: absolute;
	width: calc(100% - 220px);
	color: #ddd;
	top: 0;
	padding-left: 220px;
}

#page-title #hsellerie, #intro-landing h1
{
	font-size: 48px;
	font-weight: 700;
	color: rgb(21,41,64);
	text-shadow: 2px 0 #ddd, -2px 0 #ddd, 0 2px #ddd, 0 -2px #ddd, 1px 1px #ddd, -1px -1px #ddd, 1px -1px #ddd, -1px 1px #ddd, 0 0 8px #ddd;
	font-variant-caps: small-caps;
}

#intro-landing h2
{
	font-size: 24px;
	color: rgb(21,41,64);
	text-shadow: 1px 1px #ddd, -1px -1px #ddd, 1px -1px #ddd, -1px 1px #ddd, 0 0 10px #124;
}

/*nav
{
	display: flex;
	width: 100%;
	bottom: 40px;
	z-index: 10;
	position: absolute;
	padding: 0px;
}*/

nav 
{
	display: flex;
	width: 100%;
	bottom: 0;
	z-index: 10;
	position: absolute;
	padding: 0px;
	background-color: rgb(21,41,64);
	height: 60px;
}

#navbar-nav
{
	margin: auto;
	width: 90%;
	text-align: center;
}

/*nav a
{
	text-decoration: none;
	color: white;
	background-color: rgb(21,41,64);
	padding: 15px 30px;
	margin: 0 5%;
	border: 2px solid white;
	box-shadow: 0 0 6px #228;
	font-size: 18px;
	border-radius: 12px;
	font-variant-caps: small-caps;
}*/

nav a 
{
	text-decoration: none;
	color: white;
	background-color: rgb(21,41,64);
	padding: 5px 5%;
	border-right: 1px solid white;
	font-size: 18px;
	font-variant-caps: small-caps;
	transition: 0.4s;
}

nav a:last-of-type
{
	border: none;
}

nav a:hover
{
	font-weight: 700;
		text-shadow: 2px 2px 2px black;
}

.menu-item
{
	display: inline-block;
	padding-top: 8px;
}

.menu-item a
{
	text-decoration: none;
	color: inherit;
	margin: 20px;
	font-weight: 700;
	font-size: 1.2em;
}

#intro-landing
{
	background-image: url('../images/sc-landing.jpeg');
	height: 90vh;
	background-size: cover;
	background-position: center center;
	position: relative;
}

#intro-page
{
	background-image: url('../images/sc-landing.jpeg');
	height: 500px;
	background-size: cover;
	background-position: center 30%;
	position: relative;
}

.social-media
{
	position: absolute;
	right: 20px;
	top: 4px;
}

.social-media svg
{
	width: 32px;
}

#mobile-banner
{
	position: fixed;
	top: 0;
	width: 100%;
	background-color: rgb(21,41,64);
	z-index: 1000;
}

#mobile-banner .logo-brand
{
	height: 120px;
	text-align: center;
	background-color: rgb(21,41,64);
}

.mobile-cta-bloc
{
	text-align: center;
}

.mobile-cta
{
	display: inline-block;
	width: 30%;
	height: 50px;
	vertical-align: top;
	margin: auto;
	text-align: center;
}

.mobile-cta-icon
{
	margin: auto;
	cursor: pointer;
}

#zone-partenaires, #zone-local, #zone-chevaux
{
	text-align: center;
}

.logo-partner img, .image-local img 
{
	max-width: 100%;
}

.image-cheval
{
	position: relative;
	display: inline-flex;
	max-width: 480px;
	vertical-align: middle;
	margin: 25px;
	border: 4px outset rgba(21,41,64,0.8);
	border-radius: 30px;
	overflow: hidden;
}

.image-cheval img
{
	max-width: 100%;
}

.image-cheval p
{
	position: absolute;
	width: 100%;
	bottom: 15px;
	background: rgba(21,41,64,0.8);
	border-top: 2px solid rgb(21,41,64);
	border-bottom: 3px solid rgb(21,41,64);
	font-size: 20px;
	font-weight: 700;
	color: #ead5bf;
	padding: 8px;
	text-shadow: 0 0 4px #111;
}

.image-cheval:hover
{
	filter: saturate(1.2);
}

section
{
	font-size: 18px;
	text-align: justify;
	padding: 20px 5%;
}

section h2
{
	font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
	font-size: 30px;
	text-align: center;
	color: rgb(21,41,64);
	position: relative;
	width: max-content;
	margin-left: auto;
	margin-right: auto;
	max-width: 96%;
}

footer
{
	background-color: rgb(21,41,64);
	position: relative;
	color: #ddd;
	padding-top: 70px;
}

footer h4
{
	font-variant-caps: small-caps;
}

footer::before
{
	content: '';
	position: absolute;
	bottom: -1px;
	left: -1px;
	right: -1px;
	top: -1px;
	z-index: 3;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 100% 90px;
	background-position: 50% 0%;
	background-image: url('data:image/svg+xml;charset=utf8, <svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 140"><g fill="%23ffffff"><path d="M0 82c8 7 24 10 40 9s29-4 43-6 30-6 45-5c19 2 35 9 53 12 27 4 56-1 80-8s43-18 64-26 47-16 75-17c29 0 57 7 85 4a140 140 0 0043-11c11 6 24 10 38 11 26 3 51-4 77-4 25 1 47 8 67 17s37 18 58 26 47 12 71 8c17-3 31-10 48-12 14-1 27 2 40 5s25 6 39 6 29-2 35-9V0H0z"/><path d="M0 92c8 6 24 9 40 8s29-3 43-6 30-5 45-4c19 1 35 8 53 11 27 4 56 0 80-8s43-17 64-26 47-16 75-17c29 0 57 7 85 4a140 140 0 0043-10c11 5 24 9 38 10 26 3 51-4 77-4 25 1 47 8 67 17s37 19 58 26 47 12 71 8c17-3 31-10 48-11 14-1 27 1 40 4s25 6 39 6 29-2 35-8V9H0z" opacity=".5"/></g></svg>');
}

footer a 
{
	color: #ead5bf;
	font-weight: 700;
	text-decoration: none;
}

.footer-bottom
{
	border-top: 1px solid #ddd;
	padding: 10px 0;
	font-size: 12px;
}

footer .container.flex
{
	text-align: center;
}

footer table
{
	margin: auto;
}

#contact-form
{
	background-color: rgb(21,41,64);
	padding: 15px 2%;
	color: #ead5bf;
	border-radius: 8px;
	box-shadow: 8px 8px rgba(21,41,64,0.5);
}

.center
{
	text-align: center;
}

#contact-form input
{
	line-height: 1.6;
	padding: 3px 8px;
	font-size: 16px;
	border-radius: 5px;
	border-style: none;
}

#contact-form span 
{
	font-variant-caps: small-caps;
}

#contact-form .button
{
	cursor: pointer;
	background-color: #ead5bf;
	border: 2px solid black;
	font-size: 18px;
	transition: 0.3s;
	padding: 6px 24px;
}

#contact-form .button:hover 
{
	background-color: #cb9;
}

#contact-form .small-text
{
	font-size: 12px;
}

#contact-page h2 
{
	font-family: Avantgarde, TeX Gyre Adventor, URW Gothic L, sans-serif;
	font-size: 24px;
	text-align: center;
	color: rgb(21,41,64);
	font-variant-caps: small-caps;
}

#contact-form h2
{
	color: #ead5bf;
}

form textarea 
{
  	max-width: 96%;
  	border-radius: 5px;
}

.contact-content
{
	padding: 10px;
	font-size: 16px;
	background: rgb(21, 41, 64);
	margin: 12px;
	width: 250px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	font-weight: 700;
	border-radius: 8px;
	color: #ddd;
}

.contact-content a 
{
	color: #ddd;
	cursor: pointer;
	text-decoration: none;
}

.contact-content a svg
{
	width: 40px;
	margin-top: 12px;
}

#map
{
	box-shadow: -8px 8px rgba(21,41,64,0.5);
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid rgb(21,41,64);
	vertical-align: top;
	position: relative;
	text-align: right;
}

@media screen and (min-width: 800px) 
{
	#mobile-banner, #mobile-menu
	{
		display: none;
	}

	#page-title h1
	{
		width: 250px;
		margin: auto;
		padding: 10px;
		border: 3px solid rgb(21,41,64);
		background: rgba(234,213,191,0.8);
		box-shadow: 0 0 4px #111;
		border-radius: 8px;
		color: rgb(21,41,64);
	}

	.container
	{
		width: 90%;
		margin: auto;
	}

	.logo-container 
	{
	  	display: inline-block;
	  	padding: 25px;
	}

	.quarter-container 
	{
	  	display: inline-block;
	  	width: 25%;
	  	vertical-align: top;
	}

	.footer-bottom div
	{
		display: inline-block;
	}

	.footer-bottom-right
	{
		float: right;
	}

	/*section h2::before 
	{
	  content: "";
	  position: absolute;
	  left: 50%;
	  bottom: 5px;
	  width: 120%;
	  height: 43px;
	  transform: skew(-12deg) translateX(-50%);
	  background: rgba(238,111,87,0.4);
	  z-index: -1;
	}*/

	.logo-brand img
	{
		border-bottom-right-radius: 25px;
		box-shadow: 2px 2px 6px #222;
	}

	.logo-partner 
	{
		display: inline-flex;
		width: 200px;
		vertical-align: middle;
		margin: 25px;
		transition: 0.5s;
	}

	.image-local 
	{
		display: inline-flex;
		width: 20%;
		vertical-align: middle;
		margin: 1%;
		transition: 0.5s;
		cursor: pointer;
	}

	.logo-partner:hover
	{
		filter: grayscale(0.5);
		scale: 1.1;
	}

	.image-local:hover
	{
		filter: brightness(1.1);
		scale: 1.03;
	}

	#contact-form
	{
		width: 40%;
		display: inline-block;
	}

	.contact-content
	{
		height: 180px;
	}

	#map
	{
		width: 45%;
		margin-right: 8%;
		height: 600px;
		display: inline-block;
	}

	.gmap_canvas {overflow:hidden;background:none!important;width:100%;height:600px;}
	.gmap_iframe {height:600px!important;;width:100%}
}

@media screen and (max-width: 799px) 
{
	#intro-landing .logo-brand, #intro-landing header, #intro-landing nav, #intro-page .logo-brand, #intro-page header, #intro-page nav
	{
		display: none;
	}

	#intro-landing
	{
		background-image: url('../images/landing.jpg');
		height: calc(90vh - 150px);
		margin-top: 150px;
	}

	#page-title
	{
		position: absolute;
		bottom: 0;
		width: 100%;
	}

	#intro-page
	{
		background-image: url('../images/landing.jpg');
		height: 400px;
		margin-top: 150px;
	}

	#mobile-menu
	{
		top: -400px;
		position: fixed;
		left: 0;
		width: 70%;
		background-color: rgb(21,41,64);
		transition: 0.8s;
		z-index: 5;
	}

	.mobile-menu-item
	{
		padding: 20px 0 20px 20%;
	}

	.mobile-menu-item:nth-of-type(2n) 
	{
		background: #ead5bf;
	}

	.mobile-menu-item a 
	{
		color: #ddd;
		text-decoration: none;
		font-size: 16px;
		font-weight: 700;
		font-variant-caps: small-caps;
	}

	.mobile-menu-item:nth-of-type(2n) a 
	{
		color: rgb(21,41,64);
	}

	#main-title
	{
		padding-top: 30%;
	}

	#page-title h1
	{
		padding: 10px 0;
		margin: 0;
		width: 100%;
		border-left: 0;
		border-right: 0;
		border-radius: 0;
		color: #ead5bf;
		text-shadow: 0 0 4px #111;
		background: rgba(21,41,64,0.8);
		border-top: 2px solid rgb(21,41,64);
		border-bottom: 3px solid rgb(21,41,64);
	}

	#page-title #hsellerie
	{
		display: none;
	}

	footer .container
	{
		text-align: center;
	}	

	.logo-partner 
	{
		display: inline-flex;
		width: 125px;
		vertical-align: middle;
		margin: 25px;
	}

	.image-local 
	{
		display: inline-flex;
		width: 45%;
		vertical-align: middle;
		margin: 1%;
	}

	#contact-form
	{
		margin-top: 25px;
	}

	#map
	{
		height: 500px;
	}

	.gmap_canvas {overflow:hidden;background:none!important;width:100%;height:500px;}
	.gmap_iframe {height:500px!important;;width:100%}
}