/*
   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 Woocommerce | Version Mars 2023 - Les version 1.x.x et 2.x.x ne sont plus maintenues, merci de vous rapprocher du développeur pour passer aux version 3.x.x
   Author: Remi COLIN - projets@remseo.fr
   URI: https://www.remseo.fr
   Version: 3.3.1

 /* Custom styles
--------------------------------------------*/

/*---------------------
    Fast fixings
----------------------*/
*.tablet,
*.mobile {
	display: none;
}
/* .hiddendiv.common {display: none;} */
/*Reduce CF7 newsletter form in modal*/
.cf7-materialized.newsletter-subscription {max-width: 540px; margin: 0 auto;}
.cf7-materialized.newsletter-subscription > h3 {margin: 0 auto;}
.cf7-materialized .panel-main.tall-labels .input-field > p > label {display: block; min-height: 4.5em;}

@media all and (max-width: 576px) {
	.cf7-materialized .panel-main.375em .input-field label {min-height: initial;}
}

.elementor-light-color-link a {color: var(--light-txt-color) !important;}

.elementor-links-list ul li {margin: 1rem 0;}

/*Team presentation*/
.remseo-custom-team .team-img {}
.remseo-custom-team .team-title {position: absolute; bottom: 1rem; left: 5%; width: 90%;}

/*---------------------
    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/css/fonts/tilda-sans_regular.woff') format('OpenType');
	font-display: swap;
}

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

@font-face {
    font-family:'Muli-Bold';
    src: url('./assets/css/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; 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: 2rem; padding: 5px 25px 0 25px; font-weight: 600;}
.fas {color: #ffffff; font-size: 2rem; padding: 0 25px 0 25px;}
.far {color: #ffffff; font-size: 2rem; padding: 0 25px 0 25px;}
.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;}
.fas.fa-quote-right.inline-icon {}

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

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

@media all and (max-width: 576px) {
	.mfp-content {width: 95% !important;background: #5a2970;padding: 3rem 1.5rem; border-radius: 8px;}
	.mfp-content button.mfp-close {top: -2.75rem !important; right: 1.25rem !important;}

	.cf7-materialized {padding: 12px;}
	body.admin-bar.et_fixed_nav #main-header {top: 0px !important;}
	.et_pb_blurb_position_left .et_pb_main_blurb_image img, .et_pb_blurb_position_right .et_pb_main_blurb_image img {
		max-width: 32px !important;
	}
}

/*---------------------
   ## 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;
}

.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%;}

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

@media all and (max-width: 576px) {
	blockquote {max-width: 95%;}
	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, .full-wrapper.double-block {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;}
*.lefted-block {margin-right: auto;}
*.righted-block {margin-left: auto;}
*.auto-vmerged {margin: auto 0;}
.grid.centered, .grid-noGutter.centered {margin: 0 auto;}
.grid.lefted-block, .grid-noGutter.lefted-block {margin-right: auto;}
.grid.righted-block, .grid-noGutter.righted-block {margin-left: auto;}
.grid.rauto-vmerged, .grid-noGutter.auto-vmerged {margin: auto 0;}

.full-h {height: 100%; width: 100%; position: relative;}

.v-merged {margin-top: 12px; margin-bottom: 12px;}
.h-merged {margin-right: 12px; margin-left: 12px;}

div.full-sidebar-active, section.full-sidebar-active, article.full-sidebar-active {margin-left: 21% !important; transition: margin 400ms ease-in-out;}
div.full-sidebar-active.closed-sidebar, section.full-sidebar-active.closed-sidebar, article.full-sidebar-active.closed-sidebar {margin-left: 0% !important;}

.not-visible {opacity: 0;}

section.acf-widget-container {margin-top: 3rem; margin-bottom: 3rem;}
/*Gridlex adaptation*/
[class*="grid-"][class*="-noGutter"][class*="acf-widget-container"] {margin-top: 3rem; margin-bottom: 3rem;}

section.acf-widget-container div.theme-widget > div.widget-sub-container:not(.timeline-section) {
	position: relative;
	width: 98.5%;
	height: auto;
	margin: 16px 12px;
}

section.acf-widget-container div.theme-widget.slider-section > div.widget-sub-container {
	width: 100%;
	margin: 16px 0;
}

@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%;}

	section.acf-widget-container div.theme-widget > div.widget-sub-container {width: 95%; margin: 16px auto;}

	section.diagonal:before, article.diagonal:before {display: none;}

	section.acf-widget-container div.theme-widget > div.widget-sub-container:not(.timeline-section) {margin: 12px 6px;}

	.cta-bloc-section [class*="col-"] {padding: 0;}
	.home div.merged-wrapper {width: 100%;}
	.fas.mobile {display: inline-block; font-size: 1.25rem;}
}

/*-----------------------
TEST - Sticky Layout
//NOTE => 97px top pour le menu fixé en haut => rendu OP
-------------------------*/
.sticky-layout {}
.sticky-layout .section-sticky {position: sticky; float: left; top: 97px; height: max-content;}
.sticky-layout .section-content {}

/*-------------------------------------------------
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%; 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;}
}

/*---------------------------------
 ##PLUGIN | Ajax Search Pro
-----------------------------------*/
.asp_w_container {min-width: 340px !important; margin: 1rem auto;}
.theme-widget.shortcode-section .shortcode-content > .asp_w_container > .ajaxsearchpro.asp_main_container {max-width: 340px; margin: 0 auto;}
/*---------------------------------
 ##PLUGIN | Yoast SEO Breadcrumb
-----------------------------------*/
.breadcrumb .elementor-shortcode span {font-size: 0.9rem; color: var(--light-txt-color);}
.breadcrumb .elementor-shortcode span a {color: var(--light-txt-color);}
.breadcrumb .elementor-shortcode span i {font-size: 1.15rem; padding: 0px 6px;}
/*---------------------------------
 ##PLUGIN | Facebook social feed
-----------------------------------*/
/*Fixing Facebook Feed Plugin - Intro hero image rendering */
.cff-visual-header .cff-header-hero img {height: 100%; object-fit: contain;}
/*Header image callback*/
.cff-visual-header .cff-header-inner-wrap {
	display: flex !important;
	min-height: 40vh;
	background-image: url("./images/ml_nord_meusien-accueil-ente_feed_facebook.jpg");
	background-size: cover;
	background-position: center 45%;
	background-repeat: no-repeat;
}
.cff-visual-header .cff-header-inner-wrap .cff-header-img {display: block !important ;position: relative !important; width: max-content; top: 8px !important;}
.cff-visual-header .cff-header-text {
	display: flex !important;
	align-content: center;
	align-items: center;
	padding-top: 0 !important;
	background-color: rgba(0,0,0,0.25);
	height: max-content;
	top: 8px;
	left: 24px;
	border-radius: 6px;
}
.cff-visual-header .cff-header-text h3 {color: var(--light-txt-color);}
/*Facebook Feed Plugin - Adaptations (free edition) */
.cff-item {min-height: 275px !important; background-color: #ececec !important; display: flex !important;flex-direction: column;align-content: center;align-items: flex-start;justify-content: flex-start;justify-items: center;}
.cff-item .cff-post-desc {font-size: 1rem !important;}

@media all and (max-width: 576px) {
	.cff-visual-header .cff-header-inner-wrap {flex-direction: column;}
	.cff-visual-header .cff-header-inner-wrap .cff-header-text {margin-top: 16px;}
}
/*---------------------------
 ## SVG Map ML Nord-Meusien
-----------------------------*/
.svg-container {height: 90vh; overflow-y: auto;}
svg#mlnm-animated-map {height: 100%; width: auto;}
svg#mlnm-animated-map .cls-1 {fill: #fff;}
svg#mlnm-animated-map .cls-1,
svg#mlnm-animated-map .cls-2,
svg#mlnm-animated-map .cls-3 {stroke-width: 0px;}
svg#mlnm-animated-map .cls-2 {fill: #361547;}
svg#mlnm-animated-map .cls-3 {fill: #5a2870;}
svg#mlnm-animated-map a.disabled-link {cursor: default;}
svg#mlnm-animated-map g.single:not(.disabled) .cls-3 {transition: 400ms all ease-in-out;}
svg#mlnm-animated-map g.single:not(.disabled):hover .cls-3 {fill: var(--alt-featured-color);}

/*SVG image mask*/
svg#remseo-img-mask rect.form1 {
	fill: rgba(0,0,0,1);
	transform: rotateZ(-40deg) translateY(40px);
}
svg#remseo-img-mask rect.form2 {
	fill: rgba(0,0,0,1);
	transform: rotateZ(-40deg) translateX(60px) translateY(105px);
}
svg#remseo-img-mask circle.circle1 {
	fill: rgba(0,0,0,1);
	transform: rotateZ(-40deg) translateX(-10px) translateY(88px);
}

/*---------------------
  ACF test mode
----------------------*/
div.acf-tm-notice {display: block;margin: 1rem auto;padding: 0.5rem 1rem; font-size: 1rem;text-align: center;background: orange; border-radius: 6px;color: var(--dark-txt-color);}
div.acf-tm-notice > em > strong {display: block;margin: 0 auto;width: max-content;font-size: 1.15rem;}
/*---------------------
    Leaflet
----------------------*/
/* Event Map-Hours container */
.leaflet {height: auto; width: 100%; min-width: 840px;}
.leaflet .leaflet-map {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 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: 95%; min-width: initial;}
}
/*------------------------------------------
          Parallax library
@source https://github.com/nk-o/jarallax
--------------------------------------------*/
.jarallax {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.jarallax > .jarallax-img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/*-------------------
##  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
-------------------------*/
/* Fixed bottom Banner */
.remseo-fixed-banner {position: fixed; height: 75px; bottom: 0; background: var(--alt-bg); margin-bottom: 0px; width: 100%; padding: 1.5rem 6px 12px 6px; z-index: 100; overflow-y: auto; transition: 500ms all ease-in-out;}
.remseo-fixed-banner .hidden-icon {position: absolute; background-color: transparent; color: var(--featured-color); bottom: 1rem; right: -3rem; font-size: 1.5rem; padding: 8px; border: 1px solid var(--dark-txt-color); border-radius: 50%; opacity: 0; visibility: hidden; display: none; transition: 400ms all ease-in-out;}
.remseo-fixed-banner .banner-closing-btn {position: absolute; top: 4px; right: 12px; background-color: transparent; font-size: 1rem; color: var(--dark-txt-color); padding: 0 6px; border: 1px solid var(--featured-color); cursor: pointer; transition: 400ms all ease-in-out;}
.remseo-fixed-banner .banner-closing-btn:hover {background-color: var(--featured-color); color: var(--light-txt-color);}
.remseo-fixed-banner p {display: flex; align-items: center; height: 100%; margin: 6px auto;}
.remseo-fixed-banner p > img {height: 100%; width: auto; margin: 0 12px;}

.remseo-fixed-banner.keep-min,
.remseo-fixed-banner.scrolling {width: 33%;}

.remseo-fixed-banner.keep-min.min-as-icon,
.remseo-fixed-banner.scrolling.min-as-icon {left: -34%; overflow-y: initial;}

.remseo-fixed-banner.min-as-icon .hidden-icon,
.remseo-fixed-banner.scrolling.min-as-icon .hidden-icon {opacity: 1; color: var(--dark-txt-color); visibility: visible; display: block; cursor: pointer; transition: 400ms all ease-in-out;}
.remseo-fixed-banner.min-as-icon .hidden-icon:hover,
.remseo-fixed-banner.scrolling.min-as-icon .hidden-icon:hover {background-color: var(--featured-color); color: var(--light-txt-color);}

.remseo-fixed-banner.scrolling.banner-bottom,
.remseo-fixed-banner.banner-bottom {position: relative; width: 100%; left: 0; background: var(--featured-color); color: var(--light-txt-color);}

.remseo-fixed-banner.min-as-icon.banner-bottom,
.remseo-fixed-banner.keep-min.min-as-icon.banner-bottom {position: absolute; width: 33%; left: -34%; overflow-y: clip;}
.remseo-fixed-banner.min-as-icon.banner-bottom .hidden-icon,
.remseo-fixed-banner.keep-min.min-as-icon.banner-bottom .hidden-icon {color: var(--light-txt-color);}

.remseo-fixed-banner .logo-fse {object-fit: contain; display: block; height: 100%; width: auto; margin: 0 auto;}

/*Fixed bottom CTA (modal on click) */
.inscription-cta-footer {position: fixed ;right: 0px; bottom: 0px; margin: 0; background: var(--featured-color); z-index: 1000; margin: 0; padding: 6px 16px 6px 4px; border-radius: 6px 0px 0px 6px; transition: right 400ms ease-in-out;}
.inscription-cta-footer a {color: #ffffff; padding: 6px; font-size: 1rem; transition: 400ms all ease-in-out;}
.inscription-cta-footer a.fixed-bottom-cta.bottom-reach {box-shadow: 0px -1px 3px 0px var(--secondary-bg);}
.inscription-cta-footer.pre-inscription-bottom a {color: var(--featured-color);}
.inscription-cta-footer:hover a {font-size: 1.10rem;}
.inscription-cta-footer a i {font-size: 1.15rem; padding: 2px 6px 0px 6px;}

/*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 a{color: var(--light-txt-color);}

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

#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;}

.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: 1280px) {

}

@media all and (max-width: 980px) {

}

@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 .partners-logo-container {flex-direction: column;}
	.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%; min-height: 75px; background: var(--main-bg); transition: 400ms all ease-in-out;}
body.abs-head .site-header {position: absolute; width: 100%; height: 85px; background: transparent;}

.logo-container-nav {margin-right: auto; height: 100%; transition: 400ms height ease-in-out;}
.logo-container-nav .site-branding {height: 100%;}
.logo-container-nav .site-branding img.custom-logo {max-width: 175px;}

.site-navigation.sticky .logo-container-nav {max-height: 75px;}

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

@media all and (max-width: 1280px) {

}

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

@media all and (max-width: 768px) {

}

@media all and (max-width: 576px) {

}

/*----------------------
## 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 {}
.header-top-line div.social-nav-top ul li a i {font-size: 1.5rem; color: var(--featured-color);}

/*Contacts (tel/email)*/

@media all and (max-width: 1280px) {

}

@media all and (max-width: 1024px) {

}

@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 {display: none;}
	body .site-header {min-height: initial;}
}

/*-------------------
## Main Navigation
--------------------*/
/*Structure*/
nav.site-navigation {
  position: relative;
  /* display: block; */
  width: 100%;
  height: 100%;
	min-height: 75px;
  z-index: 9999;
  -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;
  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);}

.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;}

/*DEV - Menu item without received content (text or medias)*/
.site-navigation .menu-item.todo-dev > a {cursor: default;}
.site-navigation .menu-item > ul.sub-menu > li.menu-item.todo-dev > 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 {
	font-family: "Font Awesome 5 Free" !important;
	color: var(--alt-featured-color);
	speak: none;
	font-style: normal;
	font-weight: 900 !important;
	font-variant: normal;
	text-transform: none;
	font-size: 12px;
	position: absolute;
	top: 0;
	right: -1.5rem;
	padding-left: 1rem;
	content:'\f078';
}
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;
}

@media all and (max-width: 1200px) {
  .main-menu li:not(.menu-item-hamburger) {
    margin-right: 100px;
		margin-left: 0;
  }
}

@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 24px 12px auto; color: var(light-txt-color);}
}

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

@media all and (max-width: 576px) {
  .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%;
	animation: 600ms submenutoggle;
}

.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 {padding: 8px 24px; background: var(--featured-color); border-radius: 24px; z-index: 99999; transition: 250ms border-radius linear;}
.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
-----------------------*/
.social-nav {padding: 0px 6px 0px 0px; margin: 0 0 0 auto; list-style: none;}
.social-nav.classic {position: relative;}
.social-nav.floating {position: fixed; width: max-content; height: max-content; right: 0; top: 60%; z-index: 2;}
.social-nav.floating ul {position: relative; width: max-content;}
.social-nav.floating ul li {width: max-content;}

.social-nav li.menu-item {margin: 3px 6px;}
.social-nav li.menu-item i.fab, .main-menu .social-nav li.menu-item i.fas {background: rgb(255,255,255); font-size: 1.25rem; color: inherit; padding: 8px; width: 2.5rem; border: 1px solid; border-radius: 50%; transition: 400ms all ease-in-out;}
.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);}

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

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

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

@media all and (max-width: 580px) {

}

/*--------------------
## 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%;
}

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

ul.social-nav.mobile {padding: 0;}
ul.social-nav.mobile li {margin: 1rem 12px;}
ul.social-nav.mobile li a {}
ul.social-nav.mobile 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;
  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: 6px;
  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);
}