/*
Theme Name: RemSEO Flexo
Theme URI: http://www.remseo.fr
Description: Un thème structuré autour de la gestion de composants vitrines + évènements + lieux d'accueil | Développé autour d'ACF Pro, Elementor et Forminator | Compatible Gutenberg et Woocommerce | Version Septembre 2025 - Les version 1.x.x et 2.x.x ne sont plus maintenues - Les version 3.x.x sont maintenues jusqu'au 30 janvier 2026 - Merci de vous rapprocher du développeur pour passer aux version 4.x.x
Author: Remi COLIN - projets@remseo.fr
URI: https://www.remseo.fr
Version: 4.0.3
*/

/*TESTOUILLES - SVG animations*/
div.remseo-animated-svg,
div.remseo-animated-svg > svg {
  width: auto;
  max-height: calc(100vh - 96px);
}
div.remseo-animated-svg > svg > path {
  transition: 600ms all ease-in-out;
}
div.remseo-animated-svg > svg > path.blackandwhite:nth-child(odd) {
  fill: #000;
}
div.remseo-animated-svg > svg > path.blackandwhite:nth-child(even) {
  fill: #ececec;
}

/*---------------------
    Primary HTML
----------------------*/
:root {
	--main-bg: #ffffff;
	--alt-bg: #ececec;
	--secondary-bg: #23262d; /* ~Black */
	--dark-txt-color: #575756; /* Dark grey */
	--hovered-dark-txt: #868683;
	--light-txt-color: #f5f5f5; /* White ~grey */
	--hovered-light-txt: #E0E0E0;
	--title-color: #575756; /* Dark grey */
	--featured-color: #065774; /* Blue ~greenish */
		--featured-color-50: rgba(5, 73, 97, 0.5);
		--featured-color-90: rgba(5, 73, 97, 0.9);
		--featured-color-darker: #032B3A;
		--featured-color-lighter: #0982AE;
	--alt-featured-color: #E69F60; /* Very light Orange */
	--ctas-color: #9C87D4; /*Indigo*/
	--ctas-darker-color: #8268CA; /*Indigo - Darker*/
	--cf-submit-color: #5a2970; /*Green*/
	font-size: 16px;
}

@font-face {
    font-family:'Tilda';
    src: url('./assets/fonts/tilda-sans_regular.woff') format('OpenType');
	font-display: swap;
}

@font-face {
    font-family:'Muli';
    src: url('./assets/fonts/Muli.ttf') format('OpenType');
	font-display: swap;
}

@font-face {
    font-family:'Muli-Bold';
    src: url('./assets/fonts/Muli-Bold.ttf') format('OpenType');
	font-display: swap;
}

body {
	background-color: var(--main-bg);
	margin: 0 !important;
	overflow-x: hidden;
	color: var(--dark-txt-color);
	line-height: 125%;
	font-weight: 300;
	font-size: 1rem;
	letter-spacing: 1.25px;
	font-family: 'Tilda', sans-serif;
}

/* Usefull to fix main content navigation fixed state or possible problems with modal*/
#content {display: block; position: relative;}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--title-color);
	margin:auto 0;
	padding: 5px 5px 5px 0px;
	text-align: center;
	font-family: 'Muli', sans-serif;
	font-size: 16px;
	text-transform: initial;
	font-weight: 500;
	letter-spacing: 1.75px;
	line-height: initial;
}
body.elementor-page h1,
body.elementor-page h2,
body.elementor-page h3,
body.elementor-page h4,
body.elementor-page h5,
body.elementor-page h6 {color: inherit;text-align: inherit;}

h1 {font-size: 2rem;}
h1.intro-anim-title {font-family: 'Muli', sans-serif !important;font-size: 3.5rem;text-shadow: 1px 1px var(--dark-txt-color);}
h2 {font-size: 1.75rem;}
h3 {font-size: 1.5rem;}
h4 {font-size: 1.25rem;}
h5, h6 {font-size: 1rem; font-weight: 700;}

a {text-decoration: none; color: var(--featured-color); transition: all ease-in 250ms;}
a, a:visited {text-decoration: none !important; font-weight: 400;}
a:hover, a:focus, a:active {text-decoration: none; color: var(--alt-featured-color);}
strong {font-weight: 700 !important;}
hr {max-width: 65%;}
figure {position: relative; margin: 0 !important;}
blockquote {box-shadow: -4px 0px 0px 0px #6d8d58;padding-left: 20px; max-width: 55%;}
.fa {color: #ffffff; font-size: 1rem; padding: 5px 25px 0 25px; font-weight: 600;}
.fas {color: #ffffff; font-size: 1rem; padding: 0 25px 0 25px;}
.far {color: #ffffff; font-size: 1rem; padding: 0 25px 0 25px;}
.elementor-element .fa {font-size: inherit; padding: initial;}
.elementor-element .fas {font-size: inherit; padding: initial;}
.elementor-element .far {font-size: inherit; padding: initial;}
.fa.inline-icon, .fas.inline-icon, .far.inline-icon {position: relative; color: var(--featured-color); font-size: 1rem; padding: 0 4px;}
.fas.fa-quote-left.inline-icon {bottom: 6px;}

@media all and (max-width: 980px) {
	blockquote {max-width: 80%;}
}

@media all and (max-width: 576px) {
	blockquote {max-width: 95%;}
	.fas.mobile {display: inline-block; font-size: 1.25rem;}
}

/*---------------------
   ## Medias styles
----------------------*/
.img-cover {
	object-fit: cover;
	object-position: center top;
	width: 100%;
	height: 100%;
}
.img-cover.vcenter {object-position: center center;}
.img-cover.vbottom {object-position: center bottom;}

.img-contain {
	object-fit: contain;
	width: 100%;
	height: 100%;
}
.img-cover-logo {
	object-fit: contain;
	object-position: center top;
	width: 100%;
	height: 100% !important;
}

.img-contain {
	object-fit: contain;
	object-position: center center;
	width: 100%;
	height: 100%;
}

.inline-img {width: 48px; height: auto;}
.rounded-img {width: 136px; height: 136px; border-radius: 50%;}

/* Video cover style */
.video-cover {
	object-fit: contain;
	object-position: center top;
	width: 100%;
	height: 100% !important;
}

/* WP video shortcode - controls FIX */
.mejs-inner, .mejs-mediaelement, .mejs-layers {width: 100%; height: 100%;}
.mejs-controls {bottom: 0;}
audio {width: 100%;}

/*SVG icons => replace FontAwesome on 16/02/2026*/
svg.theme-icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  stroke: var(--light-txt-color);
  vertical-align: middle;
}
svg.theme-icon.bg-feat-rounded {
  background-color: var(--featured-color);
  border-radius: 50%;
}
svg.theme-icon.feat-color {
  stroke: var(--featured-color-lighter);
}
svg.theme-icon.mobile-menu {
  stroke: var(--dark-txt-color);
  width: 32px;
  height: 32px;
}

@media all and (max-width: 576px) {
	img.alignnone {height: auto;}
	.inline-img {width: 36px;}
}

/*-----------------
  ##Main Layouts
------------------*/
div, section, article {position: relative;}
div.full-wrapper, section.full-wrapper, article.full-wrapper {position: relative; width: 100%;}
.full-wrapper.legal-links {position: relative; width: 100%; margin: 0 auto !important;}
div.merged-wrapper, section.merged-wrapper, article.merged-wrapper {width: 80%; margin-left: auto; margin-right: auto;}
div.merged-wrapper:not(:first-child), section.merged-wrapper:not(:first-child), article.merged-wrapper:not(:first-child) {margin: 2.5% auto;}
div.smaller-wrapper, section.smaller-wrapper, article.smaller-wrapper {width: 60%;  margin-left: auto; margin-right: auto;}
div.smaller-wrapper:not(:first-child), section.smaller-wrapper:not(:first-child), article.smaller-wrapper:not(:first-child) {margin: 2.5% auto;}
div.full-wrapper.sidebar-active, section.full-wrapper.sidebar-active, article.full-wrapper.sidebar-active {width: 65%; margin: 2.5% auto 2.5% 0;}
div.merged-wrapper.sidebar-active, section.merged-wrapper.sidebar-active, article.merged-wrapper.sidebar-active {width: 65%; margin: 2.5% auto 2.5% 0;}
div.smaller-wrapper.sidebar-active, section.smaller-wrapper.sidebar-active, article.smaller-wrapper.sidebar-active {margin: 2.5% auto 2.5% 0;}
*.centered {text-align: center; margin: 0 auto;}

@media all and (max-width: 1280px) {
	div.smaller-wrapper, section.smaller-wrapper, article.smaller-wrapper {width: 70%;}
}

@media all and (max-width: 980px) {
	div.smaller-wrapper, section.smaller-wrapper, article.smaller-wrapper {width: 75%;}
}

@media all and (max-width: 768px) {
	div.smaller-wrapper, section.smaller-wrapper, article.smaller-wrapper {width: 80%;}
	div.full-wrapper.sidebar-active, section.full-wrapper.sidebar-active, article.full-wrapper.sidebar-active {width: 100%; margin: 2.5% auto;}
	div.merged-wrapper.sidebar-active, section.merged-wrapper.sidebar-active, article.merged-wrapper.sidebar-active {width: 100%; margin: 2.5% auto;}
	div.smaller-wrapper.sidebar-active, section.smaller-wrapper.sidebar-active, article.smaller-wrapper.sidebar-active {margin: 2.5% auto;}
}

@media all and (max-width: 580px) {
	div.merged-wrapper, section.merged-wrapper, article.merged-wrapper {width: 90%;}
	div.smaller-wrapper, section.smaller-wrapper, article.smaller-wrapper {width: 85%;}
	.home div.merged-wrapper {width: 100%;}
}

/*-------------------------------------------------
Flex Row placement helper classes
Usage: "flex_{vertical-align}_{horizontal-align}"
---------------------------------------------------*/
.flex-start-start{display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;justify-content:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start}
.flex-start-centered{display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;justify-content:center;-webkit-justify-content:center;-ms-flex-pack:center}
.flex-start-end{display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;justify-content:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end}
.flex-centered-start{display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;justify-content:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start}
.flex-centered{display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;justify-content:center;-webkit-justify-content:center;-ms-flex-pack:center}
.flex-centered-end{display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:center;-webkit-align-items:center;-ms-flex-align:center;justify-content:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end}
.flex-end-start{display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;justify-content:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start}
.flex-end-centered{display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;justify-content:center;-webkit-justify-content:center;-ms-flex-pack:center}
.flex-end-end{display:flex;display:-ms-flexbox;display:-webkit-flex;align-items:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;justify-content:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end}

/*----------------------------------------------------
Convert flex row to column
Usage: column flex_{vertical-align}_{horizontal-align}
-----------------------------------------------------*/
.column{flex-direction:column}
.column.flex-start-start {display:flex;display:-ms-flexbox;display:-webkit-flex;justify-content:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;align-items:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;}
.column.flex-start-centered{display:flex;display:-ms-flexbox;display:-webkit-flex;justify-content:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;align-items:center;-webkit-align-items:center;-ms-flex-align:center;}
.column.flex-start-end{display:flex;display:-ms-flexbox;display:-webkit-flex;justify-content:flex-start;-webkit-justify-content:flex-start;-ms-flex-pack:flex-start;align-items:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;}
.column.flex-centered-start{display:flex;display:-ms-flexbox;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;-ms-flex-pack:center;align-items:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;}
.column.flex-centered{display:flex;display:-ms-flexbox;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;-ms-flex-pack:center;align-items:center;-webkit-align-items:center;-ms-flex-align:center;}
.column.flex-centered-end{display:flex;display:-ms-flexbox;display:-webkit-flex;justify-content:center;-webkit-justify-content:center;-ms-flex-pack:center;align-items:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;}
.column.flex-end-start{display:flex;display:-ms-flexbox;display:-webkit-flex;justify-content:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;align-items:flex-start;-webkit-align-items:flex-start;-ms-flex-align:flex-start;}
.column.flex-end-centered{display:flex;display:-ms-flexbox;display:-webkit-flex;justify-content:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;align-items:center;-webkit-align-items:center;-ms-flex-align:center;}
.column.flex-end-end{display:flex;display:-ms-flexbox;display:-webkit-flex;justify-content:flex-end;-webkit-justify-content:flex-end;-ms-flex-pack:flex-end;align-items:flex-end;-webkit-align-items:flex-end;-ms-flex-align:flex-end;}

/* Invert start and end point if needed */
.flex-invertion{flex-direction: row-reverse;}
.column.flex-invertion {flex-direction: column-reverse;}

/*--------------------
   Animations helper
    (animate.css)
---------------------*/
.hidden {opacity: 0; visibility: hidden;}
.full-hidden{display: none !important; opacity: 0; visibility: hidden;}
.delay-25 {animation-delay: .25s;}
.delay-50 {animation-delay: .5s;}
.delay-75 {animation-delay: .75s;}
.delay-100 {animation-delay: 1s;}
.delay-125 {animation-delay: 1.25s;}
.delay-150 {animation-delay: 1.50s;}
.delay-175 {animation-delay: 1.75s;}
.delay-200 {animation-delay: 2s;}
.delay-225 {animation-delay: 2.25s;}
.delay-250 {animation-delay: 2.50s;}
.delay-275 {animation-delay: 2.75s;}
.delay-300 {animation-delay: 3s;}
.delay-325 {animation-delay: 3.25s;}
.delay-350 {animation-delay: 3.50s;}
.delay-375 {animation-delay: 3.75s;}
.delay-400 {animation-delay: 4s;}
.delay-425 {animation-delay: 4.25s;}
.delay-450 {animation-delay: 4.50s;}
.delay-475 {animation-delay: 4.75s;}
.delay-500 {animation-delay: 5s;}
.delay-525 {animation-delay: 5.25s;}
.delay-550 {animation-delay: 5.50s;}
.delay-575 {animation-delay: 5.75s;}
.delay-600 {animation-delay: 6s;}
.delay-625 {animation-delay: 6.25s;}
.delay-650 {animation-delay: 6.50s;}
.delay-675 {animation-delay: 6.75s;}
.delay-700 {animation-delay: 7s;}

/*----------------------
## ACF Intro Containers
------------------------*/
#intro-section {height: 100vh; width: 100%; transition: 400ms height ease-in-out;}
.intro-container {position: relative; margin-bottom: 24px; height: 100% !important; width: 100%}
.intro-container.smallerh {height: 400px;}
.intro-container .intro-overlay {position: absolute;top: 0;width: 100%;height: 100%;z-index: 1;}
/*Fix overlay with parallax effect*/
.intro-container .up-content {width: 100%; z-index: 2;}
.intro-container .hero-intro-ctas a.material-cta, .intro-container .hero-intro-ctas a.js-cta {display: flex; align-items: center; min-height: 50px; margin: 12px 24px;}
.intro-container .hero-intro-ctas i.fa.hover-only,
.intro-container .hero-intro-ctas i.fas.hover-only,
.intro-container .hero-intro-ctas i.far.hover-only,
.intro-container .hero-intro-ctas i.fab.hover-only {
	position : absolute;
	padding : 0;
	opacity: 0;
	font-size: 1.15rem;
	right: 0;
	transition: 200ms all ease-in-out;
}
.intro-container .hero-intro-ctas a.material-cta:hover {padding-right: 2.10rem;}
.intro-container .hero-intro-ctas a.material-cta:hover i.fa.hover-only,
.intro-container .hero-intro-ctas a.material-cta:hover i.fas.hover-only,
.intro-container .hero-intro-ctas a.material-cta:hover i.far.hover-only,
.intro-container .hero-intro-ctas a.material-cta:hover i.fab.hover-only {opacity: 1;right: 0.5rem;}

/* Intro container - Image */
.intro-container figure {position: relative; width: 100%; height: 100%;}
.intro-container figure:not(.c4-izmir) img {z-index: 0;}
.intro-container figure figcaption:not(.post-datas), .intro-container figcaption:not(.post-datas) {position: relative; height: auto; max-height: 90%; width: 75%; padding: 6px 18px; border-radius: 6px; overflow: hidden; box-shadow: 0px 0px 4px 1px var(--light-bg-featured-color); z-index: 1;}
.intro-container figure figcaption:not(.post-datas) h1, .intro-container figcaption:not(.post-datas) h1 {width: 70%; font-size: 4rem; letter-spacing: 4px; margin: 0 auto; text-align: center; text-transform: initial;}
.intro-container figure figcaption:not(.post-datas) p, .intro-container figcaption:not(.post-datas) p {text-align: center; letter-spacing: 1.25px; padding: 4px 8px; border-radius: 6px; color: #fff;}
/* Intro container - video */
.intro-container.video {background-position: center center; background-size: cover; background-repeat: no-repeat;}
.intro-container iframe {width: 100%; height: 100%;}
.intro-container video {width: 100%; height: 100%;}
.intro-container .iframe-container {padding: 0;}
/* Intro container - Text and background */
.intro-container.simple-txt {position: relative; margin-bottom: 24px; height: 100%; width: 100%}
.intro-container.simple-txt.smallerh {height: 400px;}
.intro-container.simple-txt figure {position: relative; width: 80%; height: 100%; margin: 0 auto;}
.intro-container.simple-txt figure img:not(.inline-img) {width: 220px; height: auto; padding-top: 10%;}
.intro-container.simple-txt figure figcaption {position: relative; height: auto; background: none;}
.intro-container.simple-txt figure figcaption h2 {color: var(--light-txt-color);}
.intro-container.simple-txt figure figcaption p {color: var(--light-txt-color); font-weight: 700; font-size: 1em; padding: 4px 8px; background: none;}

.intro-container .mobile {display: none;}
.intro-container .tablet {display: none;}
.intro-container .desktop {display: flex;}

@media all and (min-width: 1840px) {
	/*Bigger font size on bigger screens*/
	.intro-container figure figcaption p {font-size: 1.15em;}
	.intro-container.video figcaption p {font-size: 1.15em;}
	.intro-container.simple-txt figure figcaption p {font-size: 1.15em;}
}

@media all and (max-width: 1280px) {
	.intro-container figure figcaption h1, .intro-container figcaption h1 {font-size: 3.5rem;}
}

@media all and (max-width: 980px) {
	.intro-container figure figcaption h1, .intro-container figcaption h1 {font-size: 3rem;}
}

@media all and (max-width: 768px) {
	/* #intro-section {height: 100% !important;} */
	.intro-container figure figcaption h1, .intro-container figcaption h1 {font-size: 2.5rem;}
	.intro-container .tablet {display: flex;}
	.intro-container .desktop {display: none;}
	.intro-container figure figcaption:not(.post-datas), .intro-container figcaption:not(.post-datas) {width: 100%; padding: 6px 12px;}
}

@media all and (max-width: 580px) {
	.intro-container {height: auto;}
	.intro-container figure figcaption h1, .intro-container figcaption h1 {font-size: 2rem;}
	.intro-container .mobile {display: flex;}
	.intro-container .tablet {display: none;}
	.intro-container.simple-txt figure {width: 95%; padding: 5% 0;}
	.intro-container.simple-txt figure img:not(.inline-img) {padding-top: 2.5%;}
	.intro-container figure figcaption {height: 100%; width: 95% !important; left: 0; padding: 24px 12px;}
	.intro-container figure figcaption h1 {text-align: center;}
	.intro-container figure figcaption:not(.post-datas) h1, .intro-container figcaption:not(.post-datas) h1 {font-size: 2.25rem; width: 100%;}
	.floating-img {float: left; width: 64px !important; margin-right: 12px; padding-top: 0;}
	.intro-container .hero-intro-ctas {flex-direction: column;}
}

@media all and (max-width: 440px) {
	.intro-container figure figcaption {padding: 24px 8px 24px 8px;}
}

/*---------------------
    Leaflet
----------------------*/
/* Event Map-Hours container */
.leaflet {position: relative; height: auto; width: 100%;}
.leaflet .leaflet-map {position: relative; width: 100%; height: 440px; border-radius: 12px; z-index: 10;}
.leaflet-container a.material-cta {color: var(--light-txt-color);}
.leaflet-container a.leaflet-popup-close-button {background: var(--alt-featured-color); border-radius: 0 0 0 6px; color: #fff;}
.leaflet-popup-content h3 {color: var(--dark-txt-color);}
.leaflet-popup-content p {
	width: max-content;
	max-width: 100%;
	margin: 12px auto !important;
	border: 1px solid;
	border-radius: 6px;
	padding: 6px 12px;
}

@media all and (max-width: 580px) {
	.leaflet {width: inherit; min-width: initial;}
}

/*-------------------
##  Calls to Action
---------------------*/
/* Main CTA */
.material-cta {
  display: block;
  position: relative;
  background: var(--featured-color);
  background-image: linear-gradient(to right, var(--ctas-color) 0%, var(--ctas-darker-color) 65%, var(--ctas-color) 100%);
  background-size: 200% auto;
  border: none;
  color: var(--light-txt-color);
  font-weight: 500;
  width: max-content;
  max-width: 275px;
  margin: 0 auto;
  padding: 12px 18px;
  text-align: center;
  font-weight: 400;
  text-shadow: none;
  transition: 500ms ease-in-out all;
  border-radius: 6px;
}
.material-cta:visited {color: var(--hovered-light-txt);}
.material-cta:active,
.material-cta:focus,
.material-cta:hover {color: var(--hovered-light-txt);}
.material-cta:active,
.material-cta:hover {background-position: 50% 50%;}

/*-----------------------------------------------
  ##Izmir css library
  Add effects on hover for images (<figure>)
-------------------------------------------------*/
/* Izmir customizations */
.c4-izmir {
  --primary-color: var(--featured-color);
  --secondary-color: var(--alt-featured-color);
  --transition-duration: 500ms;
  --border-width: 6px;
  --overlay-opacity: .5;
  --padding: 0;
}
figure.c4-izmir {width: 100%;}

/*------------------------
 ## Footer
-------------------------*/
/*Main footer*/
.main-footer {background: var(--featured-color) ; color: var(--light-txt-color); height: 100%; padding: 1.25rem 0; border-top: 1px solid var(--secondary-bg);}
.main-footer.has-fixed-cta {padding-bottom: 3rem;}

.main-footer p,
.main-footer a,
.main-footer p > a,
.main-footer ul > li > a {color: var(--light-txt-color);}

.main-footer ul {list-style: none;}
.main-footer ul li {margin: 6px 12px}

.main-footer div > img {padding: 1.25rem 0;}

#nav-footer {list-style: none; margin: 12px;}

#social-nav-footer {list-style: none; margin: 12px 0;}
#social-nav-footer li {margin: 0 1.25rem}

#social-nav-footer li a {
  display: inline-block;
  width:40px;
  height:40px;
  line-height:40px;
  margin-left:6px;
  margin-right:0;
  border-radius:100%;
  background-color:var(--alt-bg);
  text-align: center;
  transition: 400ms all ease-in-out;
}

#social-nav-footer li a .fa,
#social-nav-footer li a .fab,
#social-nav-footer li a .fas,
#social-nav-footer li a .far {
	color: var(--dark-txt-color);
	transition: 400ms all ease-in-out;
}
#social-nav-footer li:hover a .fab {
	color: var(--light-txt-color);
}

#social-nav-footer li:hover a.facebook {background-color: #3b5998;}
#social-nav-footer li:hover a.twitter {color: #55acee;}
#social-nav-footer li:hover a.linkedin {background-color: #0077b5;}
#social-nav-footer li:hover a.instagram {background-color: #C13584;}
#social-nav-footer li:hover a.youtube {background-color: #b31217;}
#social-nav-footer li:hover a.snapchat {background-color: #fffc00;}

.widget-address, .widget-email, .widget-tel {width: auto; text-align: center; margin: 0 auto;}
.widget-address p, .widget-email p, .widget-tel p {margin: 6px 0;}
.widget-address i.fas, .widget-email i.fas, .widget-tel i.fas {font-size: 1rem;}

.widget-address.multiple > div > p {font-size: 1rem;}
.widget-address.multiple > div > p > a {
	display: inline-block;
	background-color: var(--main-bg);
	color: var(--featured-color-darker);
	margin: 6px 0 0 0;
	padding: 4px 8px;
}
.widget-address.multiple > div > p > a:hover {background-color: var(--alt-featured-color);}

.main-footer .legal {background: var(--secondary-bg); color: var(--light-txt-color); transition: 400ms ease-in-out all;}

.main-footer .copyright ul {margin: 0; padding-left: 12px;}
.main-footer .copyright ul li {font-size: 1rem;}
.main-footer .copyright ul li i.fa-chevron-circle-up {font-size: 1.2rem;}

.footer-menu nav {width: 100%;}
.footer-menu ul {list-style: none; display: flex; max-width: 90%; margin: 10px 0; padding: 0;}
.footer-menu ul li {margin: 0 auto;}

#legal-nav-footer {margin-top: 1rem; margin-bottom: 1rem;}
#legal-nav-footer li {list-style: none; border: 1px solid; padding: 6px 12px; background: transparent; transition: 400ms ease-in-out all;}
#legal-nav-footer li:hover {background: var(--alt-bg);}
#legal-nav-footer li:hover > a {color: var(--dark-txt-color);}

/* Keep it important to prevent plugin or inline modifications */
.footer-menu .sub-menu {display: none !important;}

@media all and (max-width: 768px) {
	.menu-mobile #social-nav-footer {display: flex;}
	.menu-mobile #social-nav-footer li {margin: 0 12px;}
	.menu-mobile #social-nav-footer li:hover a .fab.fa-wpforms {
		color: var(--featured-color);
	}
}

@media all and (max-width: 576px) {
	.widget-address, .widget-email, .widget-tel {margin: 1rem auto;}
	.main-footer .footer-menu {flex-direction: column;}
	.main-footer .footer-menu {margin: 10px auto;}

	.main-footer .copyright ul {padding-left: 0px;}

	#legal-nav-footer li {text-align:center;}
}

/*-------------------
# Header Branding
--------------------*/
.site-header:after, .site-header:before {content:""; display: table; clear: both;}

body .site-header {position: relative; z-index: 100; width: 100%; height: 100%; transition: 400ms all ease-in-out;}
body.abs-head .site-header {position: absolute; width: 100%; height: 85px;}

.main-menu li.logo-container-nav {margin-right: 0; height: 100%; transition: 400ms height ease-in-out;}
.logo-container-nav .site-branding {height: 100%;}
.logo-container-nav .site-branding img.custom-logo {max-height : 90px; transition: height 400ms ease-in-out;}
.main-menu li.logo-container-nav.second-logo {margin-left: 0;}

.site-navigation.sticky .logo-container-nav .site-branding img.custom-logo {height: 100%;}
.site-navigation.sticky .logo-container-nav {max-height: 75px;}

.menu-item-home.mobile {display: none !important;}

@media all and (max-width: 1024px) {
	.menu-item-home.mobile {display: block;}
}

/*----------------------
## Navigation Top Line
------------------------*/
.header-top-line {display: flex; flex-flow: row wrap; align-items: center; height: 115px;}

/*Logo*/
.header-top-line a.site-branding {display: block; height: 100%; margin: 0 auto;}
.header-top-line a.site-branding img {height: 100% !important; max-height: 185px;}

/*Headline*/
.header-top-line .top-headline {margin: 0 auto; color: var(--dark-txt-color); font-style: italic; font-size: 1.35rem; letter-spacing: 1.75px; font-family: 'Muli', sans-serif;}
.header-top-line .top-contact {margin: 0 auto; color: var(--light-txt-color);}

/*Call to actions*/
.header-top-line ul.call-to-actions {list-style: none; display: flex; margin: 0 auto;}
.header-top-line ul.call-to-actions li.item {text-align: center; cursor: pointer; background-color: var(--main-bg); width: max-content; min-width: 125px; border-radius: 12px; border: 3px solid var(--title-color); margin: auto 12px; transition: 400ms all ease-in-out;}
.header-top-line ul.call-to-actions li.item:hover {background-color: var(--title-color);}
.header-top-line ul.call-to-actions li.item a {display: block; height: 100%; padding: 8px 12px; color: var(--dark-txt-color); transition: 400ms padding ease-in-out;}
.header-top-line ul.call-to-actions li.item:hover a {color: var(--light-txt-color);}

/*Social Nav*/
.header-top-line div.social-nav-top {margin: 0 auto; flex-basis: 33%;}
.header-top-line div.social-nav-top ul {list-style: none; }
.header-top-line div.social-nav-top ul li {padding: 0 6px;}
.header-top-line div.social-nav-top ul li a i {font-size: 1.5rem; color: var(--featured-color);}

@media all and (max-width: 768px) {
	.header-top-line .top-headline {padding-left: 16px; font-size: 1.1rem;}
}

@media all and (max-width: 576px) {
	.header-top-line {flex-flow: column;}
	body .site-header {min-height: initial;}
}

/*-------------------
## Main Navigation
--------------------*/
/*Structure*/
nav.site-navigation {
  position: relative;
  width: 100%;
  height: 90px;
  z-index: 101;
  -moz-box-shadow: 0px 2px 4px 0px var(--secondary-bg);
  -webkit-box-shadow: 0px 2px 4px 0px var(--secondary-bg);
  box-shadow: 0px 2px 4px 0px var(--secondary-bg);
}
body.abs-head nav.site-navigation {-moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;}

nav.site-navigation.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 75px;
  z-index: 10001;
}

nav.site-navigation ul.main-menu {
  background-color: var(--main-bg);
  padding: 12px 24px 0 24px;
  margin: 0;
  height: 100%;
	width: 100%;
}
body.abs-head nav.site-navigation ul.main-menu {background-color: transparent;}
body.abs-head nav.site-navigation.sticky ul.main-menu {background-color: var(--main-bg);}

/*Mobile menu trigger*/
.main-menu li.menu-item-hamburger {display: none;}

.site-navigation ul {list-style: none;padding-left: 0;}

/*Elements*/
.site-navigation .fa, .site-navigation .fas, .site-navigation .far, .site-navigation .fab {font-size: 1rem; padding: 0;}

.site-navigation .menu-item {float: none;position: relative;display: inline-block;line-height: 24px;}
.site-navigation .menu-item:last-child {border-right: 0;}

/*Menu item without related page*/
.site-navigation .menu-item.disabled-nav > a {cursor: default;}
.site-navigation .menu-item > ul.sub-menu > li.menu-item.disabled-nav > a {cursor: default;}

.main-menu li {list-style: none; margin: 0 auto;}
.main-menu li a {
  display: block;
  border-bottom: 3px solid transparent;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: .5px;
  color: var(--dark-txt-color);
  text-decoration: none;
  transition: 300ms all linear;
}
.main-menu li a > .fa, .main-menu li a > .fas, .main-menu li a > .fab {font-size: 1rem; color: inherit; padding: 0 8px;}

body.abs-head .main-menu li a {color: var(--light-txt-color);}
body.abs-head .site-navigation.sticky .main-menu li a {color: var(--dark-txt-color);}
/*Featured nav color adaptation*/
body.abs-head .site-navigation.sticky .main-menu li.featured-nav a {color: var(--light-txt-color);}

.main-menu li:not(.branding) a:hover, .main-menu li a:active, .main-menu li a:focus {font-size: 1.05rem;}
.main-menu li.current-menu-item:not(.featured-nav) a {border-color: var(--featured-color);}

.main-menu li.menu-item-has-children:after {
  stroke: var(--featured-color);
	width: auto;
  height: auto;
	position: absolute;
	top: 0px;
	right: -24px;
	content:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%2F%3E%3C%2Fsvg%3E");
}
ul.sub-menu li.featured-nav.menu-item-has-children:after {color: var(--light-txt-color);}

.main-menu > li.menu-item-has-children > ul.sub-menu li.menu-item-has-children:after {
	color: var(--light-txt-color);
	top: 12px;
	right: 3.5rem;
	padding-left: 0rem;
}

.main-menu li span.open-mobile-menu,
.main-menu li span.open-mobile-menu >i.fas {color: var(--dark-txt-color);}

@media all and (max-width: 1026px) {
	.main-menu {
	  padding: 0 1rem;
	  -webkit-justify-content: space-between;
	  justify-content: space-between;
	}
	.main-menu li a {
	  padding: 10px 0;
	  border-bottom: 0;
	}
	.main-menu li a:hover, .main-menu li a:active, .main-menu li a:focus {
	  border-color: #fff;
	  color: var(--alt-featured-color);
	}
	.main-menu li.menu-item {display: none;}
	.main-menu li.menu-item-hamburger {display: block; margin: 12px 36px 12px auto;}
}

@media all and (max-width: 864px) {
	.main-menu {background-color: var(--featured-color);}
	.main-menu li:not(.menu-item-hamburger) {
    margin-right: auto;
		margin-left: auto;
  }
}

@media all and (max-width: 576px) {
	.main-menu {
	  display: flex;
		align-items: center;
	}
  .site-navigation.sticky {height: auto;}
}

/*Submenus*/
.site-navigation ul.main-menu ul.sub-menu {
	width: auto;
	background: var(--alt-featured-color);
	border-radius: 0 0 6px 6px;
	margin: 0 -150px 0 0;
	text-align: left;
	padding-left: 10px;
	transition: 400ms ease-in-out all;
}
.site-navigation ul.main-menu li.menu-item-has-children > ul.sub-menu {
	max-height: calc(100vh - 150px);
	overflow-y: auto;
	overflow-x: hidden;
}
.site-navigation ul.main-menu li.menu-item-has-children:hover > ul.sub-menu,
.site-navigation ul.main-menu li.menu-item-has-children:focus > ul.sub-menu {left: auto;opacity: 1;}
body.abs-head .site-navigation ul.main-menu li.menu-item-has-children:hover > ul.sub-menu,
body.abs-head .site-navigation ul.main-menu li.menu-item-has-children:focus > ul.sub-menu {margin-top: 0;}

.site-navigation ul.main-menu > li.menu-item-has-children > .sub-menu:before {
	content: '';
	position: relative;
	display: block;
	width: calc(100% + 10px);
	height: 0px;
	left: -10px;
	border-left: 20px solid var(--featured-color);
	border-bottom: 20px solid var(--alt-featured-color);
	transition: 400ms all ease-in-out;
}

.site-navigation .sub-menu .menu-item {width: 90%; padding: 10px 25px 10px 10px;}
.site-navigation ul.main-menu ul.sub-menu:not(.floating-nav) a {width: 200px;}
.site-navigation .sub-menu .menu-item a {width: 90% !important; color: var(--light-txt-color) !important; margin: 0; border-bottom:0px; transition: 400ms ease-in-out all;}
.site-navigation .sub-menu .menu-item a::after {display: none;}
.site-navigation .sub-menu > .menu-item:hover > a {-webkit-box-shadow: none; box-shadow: none;}

/*Second level */
.site-navigation ul.main-menu li > ul.sub-menu:not(.floating-nav) {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
	opacity: 0;
	transition: 400ms all ease-in-out;
}

/*Third level */
.site-navigation ul.main-menu ul.sub-menu li.menu-item-has-children > ul.sub-menu,
.site-navigation ul.main-menu ul.sub-menu li.menu-item-has-children > ul.sub-menu {
	width: 100%;
	height: 0%;
	animation: 600ms submenutoggle;
	box-shadow: none;
	padding-left: 24px;
}

.site-navigation ul.main-menu ul.sub-menu li.menu-item-has-children:hover > ul.sub-menu,
.site-navigation ul.main-menu ul.sub-menu li.menu-item-has-children:focus > ul.sub-menu {
	position: relative;
	top: 0;
}

@keyframes submenutoggle {
	from {
    opacity: 0;
		height: 0%;
  }

	25% {
    opacity: 1;
		height: 25%;
  }

	50% {
		height: 50%;
  }

	50% {
		height: 75%;
  }

  to {
    height: 100%;
  }
}

/*----------------------
## Featured Navigation
-----------------------*/
.site-navigation .menu-item.featured-nav {margin-right: 4px; padding: 8px 24px; background: var(--featured-color); border-radius: 24px; z-index: 102; transition: 250ms border-radius linear;}
.site-navigation .menu-item.featured-nav + .menu-item.featured-nav {margin-left: 16px;}
/* .site-navigation .menu-item.featured-nav:nth-child(2) {margin-left: 12px;} */
.site-navigation .menu-item.featured-nav a {color: var(--light-txt-color);}
.main-menu li.featured-nav.menu-item-has-children::after {top: 10px; right: 6px;}
.site-navigation .menu-item.featured-nav.menu-item-has-children:hover {border-radius: 24px 24px 0 0;}

.site-navigation .menu-item.revert-submenu > ul.sub-menu {margin: 0 0 0 -150px;}
.site-navigation .menu-item.featured-nav > ul.sub-menu {background: inherit; border-radius: 24px 0; padding-top: 6px; border-top: 3px solid var(--title-color);}

/*---------------------
## Social navigation
-----------------------*/
.main-menu .social-nav {padding: 0px 6px 0px 0px; margin: 0 0 0 auto;}
.main-menu .social-nav.classic {position: relative;}
.main-menu .social-nav.floating {position: fixed; width: max-content; height: max-content; right: 0; top: 60%; z-index: 2;}
.main-menu .social-nav.floating ul {position: relative; width: max-content;}
.main-menu .social-nav.floating ul li,
.main-menu .social-nav.floating ul li a {width: max-content;}

.main-menu .social-nav li.menu-item {margin: 3px 6px;}
.main-menu .social-nav li.menu-item i.fab, .main-menu .social-nav li.menu-item i.fas {position: relative; background: rgb(255,255,255); font-size: 1.5rem; color: inherit; padding: 8px; width: 2.5rem; border: 1px solid; border-radius: 50%; transition: 400ms all ease-in-out;}
.main-menu .social-nav li.menu-item:hover i.fab, .main-menu .social-nav li.menu-item:hover i.fas {background: var(--featured-color); color: var(--light-txt-color);}

.main-menu .social-nav li.menu-item i.fab:before,
.main-menu .social-nav li.menu-item i.fas:before {
	position: relative;
}
.main-menu .social-nav li.menu-item i.fab.fa-facebook-f:before {
	left: 3px;
}
.main-menu .social-nav li.menu-item i.fab.fa-instagram:before {
	left: 1px;
}
.main-menu .social-nav li.menu-item i.fab.fa-youtube:before {
	right: 1px;
}

@media all and (max-width: 1024px) {
	.main-menu .social-nav li.menu-item i.fab {font-size: 1rem; width: 1rem;}

	/*Centering fix*/
	.main-menu .social-nav li.menu-item.facebook i.fab:before {position: relative; left: 1px;}
	.main-menu .social-nav li.menu-item.instagram i.fab:before {position: relative; left: 0.5px;}
}

@media all and (max-width: 768px) {
	/*Centering fix*/
	.main-menu .social-nav li.menu-item.instagram i.fab:before {position: relative; left: 0px;}
	.main-menu .social-nav li.menu-item.linkedin i.fab:before {position: relative; left: 1px;}

	.main-menu .social-nav li.menu-item i.fab, .main-menu .social-nav li.menu-item i.fas {font-size: 1.4rem; width: 1.4rem;}
}

/*--------------------
## Mobile navigation
----------------------*/
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  background-color: var(--featured-color);
  background-color: var(--featured-color-90);
  overflow-x: hidden;
  -moz-transition: ease 0.5s;
  -o-transition: ease 0.5s;
  -webkit-transition: ease 0.5s;
  transition: ease 0.5s;
}

/* Position the content inside the overlay */
.overlay-content {position: relative;width: 100%;margin-top: 62px;}

/* The navigation links inside the overlay */
.menu-mobile {margin: 36px 0 0 0;padding: 48px 25px 3rem 25px !important;}

.menu-mobile ul.social-nav {padding: 0;}
.menu-mobile ul.social-nav li {margin: 1rem 12px;}
.menu-mobile ul.social-nav li a i {font-size: 1.30rem;}

.menu-mobile i.fa, .menu-mobile i.fas, .menu-mobile i.fab, .menu-mobile i.far {font-size: 1rem; padding: 0 8px;}

.menu-mobile li {list-style: none;margin-top: 20px;}
.menu-mobile li:first-child {margin-top: 0;}

.menu-mobile li a {
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: .5px;
  color: var(--light-txt-color);
  text-decoration: none;
}
.menu-mobile li a:hover, .menu-mobile li a:active, .menu-mobile li a:focus {color: var(--alt-featured-color);}

.close-mobile-menu {
  position: relative;
  top: 12px;
  right: 24px;
  display: block;
  height: 48px;
  width: 48px;
  line-height: 48px;
  margin-left: auto;
  color: #fff;
  text-align: center;
  font-size: 3.125rem;
  text-decoration: none;
  opacity: 0;
  transition: 400ms opacity ease-in-out;
}
.close-mobile-menu.opened {position: fixed; z-index: 2; opacity: 1;}
.close-mobile-menu:hover, .close-mobile-menu:focus {color: var(--alt-featured-color);}

/* The SubMenus inside the overlay */
.menu-mobile .sub-menu {padding: 24px 0 0 12px;}
.menu-mobile .sub-menu li a {font-size: 1rem;}

.menu-mobile .sub-menu li a:active {color: var(--alt-featured-color);}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px;}
  .close-mobile-menu {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }
}

.open-mobile-menu {font-size: 16px;font-size: 1rem;color: var(--light-txt-color);}