/*!
Theme Name:   Moscato Truffles
Author:       Web Arts Guys
Author URI:   https://web-arts.bg
Description:  This is the main WP Theme for Moscato Truffles Project. The theme is created and customized for Moscatoruffles and meets their requirements at highest level.
Version:      1.1
Requires PHP: 7.0.0
License:      Private
Text Domain:  moscatotruffles
Tags:         moscatotruffles, Customized, WebArtsGuys
*/

/* --- Global variables --- */

/* BROWNS

#694c1e
#916929
#a5772f
#c8933f

*/

/* Mine
	--secondary-color: #a5772f;
	--darker-brown-color: #694c1e;
*/

:root{
	--primary-color: #f5f1ee;
	--primary-color-accent: #e8e2db;
	/* --primary-color-accent: #e5ddd4; */
	--secondary-color: #896624;
	/* --third-color: #393939; */
	--third-color: #4c3914;
	--darker-brown-color: #4c3914;
	--gray-color: #8f8f8f;
	--swiper-theme-color: #2275BC;
	--borderWidth: 2px;


	--test2-color: #916929;
	--test3-color: #c8933f;
  }

/* --- Reset settings --- */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
table { border-collapse: collapse; border-spacing: 0; font-size: 0.9em;}
table th, table td{padding: 10px; border: 1px solid var(--darker-brown-color);}

/* --- Animations classes --- */
.slide-top {
	-webkit-animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-top 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.slide-in-bottom.active {
	-webkit-animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            transform: translateY(0);
            transition: opacity 0.8s ease, transform 0.8s ease;
}

.bounce-in-top.active {
	-webkit-animation: bounce-in-top 1.1s both;
	        animation: bounce-in-top 1.1s both;
}

.bounce-in-bottom.active {
	-webkit-animation: bounce-in-bottom 0.8s both;
	        animation: bounce-in-bottom 0.8s both;
}

.bounce-top.active {
	-webkit-animation: bounce-top 0.9s both;
	        animation: bounce-top 0.9s both;
}

.jello-horizontal.active {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}

/* --- General settings --- */
html, body {min-height: 100%; scroll-behavior: smooth; font-size: calc(14px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;}
body{margin: 0; padding: 0; color: var(--third-color); background: var(--primary-color);}
html, body, p{font-weight: 300;}

h1 {font-size: 1.95em; line-height: 1.25em; margin: 0.67em 0;}
h2 {font-size: 1.65em; line-height: 1.25em; margin: 0.83em 0; font-weight: 700;}
h3 {font-size: 1.30em; line-height: 1.25em; margin: 1.00em 0; font-weight: 700;}
h4 {font-size: 1.15em; line-height: 1.25em; margin: 1.33em 0; font-weight: 700;}
h5 {font-size: 0.75em; line-height: 1.25em; margin: 0.67em 0; font-weight: 700;}
h6 {font-size: 0.55em; line-height: 1.25em; margin: 0.67em 0; font-weight: 700;}

a{margin: 0; font: inherit; color: inherit; text-decoration: none; z-index: 3;} 
/* ul{padding: 0; list-style: none;} */
figure {margin: 0;}
figcaption{font-size: 0.85em;}

/* .main{min-height: 76vh;} */
.narrow{margin: 0 auto; width: 92%; max-width: 1340px;}
.slim{margin: 0 auto; width: 92%; max-width: 1140px;}
.flexrow{display: flex; justify-content: space-between;}
.gridflow{display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 15px;}
.section{margin: 5em auto;}
/* .anime{opacity: 0;} */
.animating { opacity: 0; }
.animating.active { opacity: 1; transition: opacity 0.8s ease; }

/* .title{} */
/* .subtitle{} */
.button{position: relative; padding: 12px 20px; display: inline-block; color: #fff; background: var(--secondary-color); text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.6px; font-weight: 500; margin-top: 15px; transition: 0.2s all;}
.button:hover{background: var(--darker-brown-color);}
.button.outlined{color: var(--secondary-color); background: #fff; border: 2px solid var(--secondary-color); padding: 10px 18px;}
.button.outlined:hover{background: var(--darker-brown-color); border-color: var(--darker-brown-color); color: #fff;}
.button.darker{color: #fff; background: var(--darker-brown-color); border: 2px solid var(--darker-brown-color); padding: 10px 18px;}
.button.darker:hover{background: var(--secondary-color); border-color: #fff; color: #fff;}
.button.outlined.darker{background: #fff; color: var(--darker-brown-color); border: 2px solid var(--darker-brown-color);}
.button.outlined.darker:hover{background: var(--darker-brown-color); color: #fff; border: 2px solid var(--darker-brown-color);}

/* .underlinedTitle{text-transform: uppercase;} */
/* .underlinedTitle:after{content: ''; display: block; background-color: var(--secondary-color); width: 90%; max-width: 130px; height: 5px;} */
.center{text-align: center;} 
/* .center .underlinedTitle,  */
/* .center .underlinedTitle:after{margin: 5px auto; text-align: center;} */
.swiper-wrapper{padding-bottom: 35px;}
.overlay{position: relative;}
.overlay .narrow{position: relative; z-index: 2;}
.overlay:before{content: ''; position: absolute; background: var(--darker-brown-color); opacity: 0.5; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.parallax{background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;}
.image-wrapper img{display: block; width: 100%; height: 100%; object-fit: cover;}


.arrow-anime {display: inline-flex; align-items: center; gap: 0; text-decoration: none; transition: gap 0.3s ease;}
.arrow-anime:hover {color: var(--darker-brown-color) !important; gap: 5px;}
.arrow-anime small {display: inline-block; opacity: 0; transform: translateX(-8px); transition: opacity 0.3s ease, transform 0.3s ease;}
.arrow-anime:hover small {opacity: 1; transform: translateX(4px);}

.gallery{display: grid; grid-template-columns: repeat(auto-fill, minmax(315px, 1fr)); gap: 15px 2%;}
.gallery img{width: 100%; max-height: 330px; object-fit: cover;}


/* === Header === */
#header{width: 100%; margin: 0; font-size: 0.8em; position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 15px 0; transition: 0.3s all; backdrop-filter: blur(10px); background: rgba(245,241,233,0.5);}
#header .headerBar{align-items: center;}
#header.scrolled{box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05), 0 8px 30px rgba(0, 0, 0, 0.06); /* background: var(--primary-color); */}
#header .logo{height: 50px;}
#header .logo img{width: auto;}

#nav{display: flex; justify-content: space-between; align-items: center;}
#nav .menu{display: flex; justify-content: space-between; align-items: center; list-style-type: none; margin: 0; padding: 0; flex-flow: row nowrap;}
#nav .menu .menu-item{flex-grow: 1; text-align: center; margin: 5px; transition: all 0.3s ease-out; color: var(--third-color); position: relative; list-style: none;}
#nav .menu .menu-item a{display: block; text-decoration: none; font-weight: 500; font-size: 1.1em; letter-spacing: 0.5px; color: inherit; padding: 5px 8px;}
#nav .menu .menu-item:hover,
#nav .menu .menu-item.current-menu-item{color: var(--secondary-color);}
#nav .menu > .menu-item-has-children > a {position: relative; padding-right: 32px;}
#nav .menu > .menu-item-has-children > a::after {content: ""; position: absolute; right: 15px; top: 50%; width: 4.5px; height: 4.5px; border-right: 2px solid var(--third-color); border-bottom: 2px solid var(--third-color); transform: translateY(-50%) rotate(45deg); line-height: 1;}
#nav .menu > .menu-item-has-children:hover > a::after{border-color: var(--secondary-color);}
#nav .menu .first-menu-item{margin-left: 0;}
#nav .menu .last-menu-item{margin-right: 0;}
		/* Подменю */
#nav .menu-item > .sub-menu{display: none; position: absolute; top: 100%; left: 0; backdrop-filter: blur(10px); background: rgba(245,241,233,0.5); z-index: 3; padding: 0;} /* padding: 10px 0; */
#nav .menu-item:hover > .sub-menu{display: block;}
#nav .menu-item .sub-menu .menu-item > a {font-size: 1.1em; line-height: 22px; padding: 8px 10px; margin-left: 0;} /* padding: 8px 20px; */


	/* --- Hamburger --- */
#hamburger{display: none; background: none; outline: 0; border: 0; border-top: 5px solid var(--darker-brown-color); border-bottom: 5px solid var(--darker-brown-color); width: 46px; height: 34px; position: relative; font-size: 0px; color: #080357; transition: border 0.1s ease-out; z-index: 10; cursor: pointer;}
#hamburger:before, #hamburger:after{content: ''; display: block; width: 100%; height: 5px; position: absolute; top: 50%; left: 50%; background: var(--darker-brown-color); transform: translate(-50%, -50%); transition: transform 0.3s ease; z-index: 120;}
#hamburger.active:before{transform: translate(-50%, -50%) rotate(45deg); transition-delay: 0.2s; }
#hamburger.active:after{transform: translate(-50%, -50%) rotate(-45deg); transition-delay: 0.2s; }
#hamburger.active{border: unset;}


/* --- Intro Image --- */
#intro{display: flex; align-items: center;}
#intro .text-container{margin-left: auto; width: 46%; max-width: 670px;}
#intro .text-container .title{font-size: 2.95em; margin-bottom: 0;} /* 3.15 */
#intro .text-container .tags{text-transform: uppercase; color: var(--secondary-color); font-size: 1.15em;}
#intro .text-container .button-container{display: flex; gap: 30px; white-space: nowrap;}

/* 85 */
#intro .introImage{position: relative; height: 87vh; max-width: 50%;}
/* #intro.first .introImage img{object-fit: contain;} */
#intro .introImage img{object-fit: cover;}
/* .containerGradient::before{content: '';  position: absolute; background: var(--primary-color); z-index: 1;} */
/* .containerGradient.left::before{background: rgba(170,139,75,0.9); left: 0; height: 100%; width: 80%; background: -webkit-gradient(linear, right top, left top, from(rgba(170,139,75,0.9)), to(rgba(0,0,0,0))); background: linear-gradient(90deg, rgba(170,139,75,0.9) 40%, rgba(0,0,0,0) 100%);} */
/* #intro .logo{position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); height: 200px; z-index: 2; max-width: 100%;} */
/* #intro .logo img{width: auto; max-width: 100%; object-fit: contain;} */


#smallIntro{display: flex; height: 60vh; background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--primary-color); margin-top: 80px;}
#smallIntro .wrapper{display: flex; flex-flow: column; justify-content: flex-end; margin: 15px auto;}
#smallIntro .wrapper .subtitle{font-size: 1em; max-width: 780px; font-weight: inherit;}


/* === Breadcrumbs === */
#breadcrumbs{display: flex; flex-flow: row wrap; list-style: none; padding: 10px 0 0; font-size: 0.8em; text-transform: uppercase;}
#breadcrumbs a{color: var(--primary-color);}
#breadcrumbs a:hover{color: var(--secondary-color);}
#breadcrumbs .chunk{display: inline;}
#breadcrumbs .separator{padding: 0 10px; font-size: 26px; line-height: 10px; color: var(--primary-color);}


/* === Pagination === */
.postPagination{margin: 70px auto; }
.postPagination .nav-links{display: flex; flex: 0 0 100%; justify-content: center;}
.postPagination .page-numbers{display: flex; justify-content: space-between; width: 4vh; height: 4vh; align-items: center; justify-content: center; font-size: 1em; font-weight: 700; transition: 0.2s all ease-in-out; background: var(--primary-color); color: #fff; margin: 0 2px;}
.postPagination .page-numbers:hover,
.postPagination .page-numbers.current{background: var(--secondary-color); color: var(--black-color);}

/* --- Article sharer --- */
.sharer{margin: 45px auto 60px; max-width: 980px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.sharer .list{list-style-type: none;display: flex; justify-content: center; flex-flow: row nowrap; padding: 10px 0; }
.sharer .list .item{display: inline; margin: 0 1%;}
.sharer .list .item .dashicons:before{font-size: 28px; width: 28px; height: 28px;}
.sharer .list .item a{color: var(--secondary-color); text-decoration: none; padding: 10px; }
.sharer .list .sms{display: none;}
.sharer .list .fb a:hover{color: #1877F2;} 
.sharer .list .tw a:hover{color: #1da1f2;} 
.sharer .list .li a:hover{color: #0077B5;} 
.sharer .list .wa a:hover{color: #25D366;} 
.sharer .list .ml a:hover{color: #0489c9;} 
.sharer .list .ig a:hover{color: #833AB4;} 
.sharer .list .yt a:hover{color: #ff0000;} 
.sharer .list .sms a:hover{color: #0084ff;}


/* --- Icon list with description --- */
.iconList{list-style: none; margin: 50px auto; padding: 0; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 25px 5%;}
.iconList .item{flex: 0 0 30%; display: flex; flex-flow: column; align-items: flex-start;}
.iconList .item .icon{height: 35px; width: auto; margin-bottom: 15px;}
.iconList .item .title{font-size: 1em;  margin-right: auto;}
.iconList .item .desc{font-size: 0.9em;}
.iconList .item br{display: none;}


/* --- Sections with image background --- */
/* .imageBackground{position: relative; min-height: 60vh;}
.imageBackground .title{margin: 15px auto;}
.imageBackground .containerImage{position: absolute; top: 0; left: 0; width: 55%; height: 100%; box-sizing: border-box;}
.imageBackground .wrapper{position: relative; z-index: 3; width: 40%; height: 60vh; display: flex; flex-flow: column; justify-content: center;}  */


#page .content a{color: var(--secondary-color);}
#page .content ul{list-style: disc; padding-inline-start: 40px;}

/* --- Front page global --- */
.titles-wrapper{display: flex; flex-flow: column-reverse;}
.titles-wrapper .title{font-size: 1.8em; margin-top: 0; font-weight: 500;}
.titles-wrapper .subtitle{text-transform: uppercase; font-size: 0.9em; color: var(--secondary-color); margin: 0 0 0.5em;}

/* --- Advantages Section --- */
.section.advantages{margin: 0 auto; padding: 30px 0;background: var(--primary-color-accent);} /* #e8e2da */
#advantages{display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
#advantages .box{display: flex; flex-flow: row; flex-basis: 23%; align-items: center; gap: 20px;}
#advantages .box .icon{max-height: 60px; width: auto;}
#advantages .box .text-container .title{text-align: left; margin: 0; font-size: 0.95em;}


/* --- Call to Action : Contact Section --- */
.section.cta-contact{margin: 0 auto; padding: 50px 0;background: var(--secondary-color);}
.section.cta-contact .inner-container{justify-content: flex-start; align-items: center; gap: 30px;}
.section.cta-contact .inner-container .text-wrapper{color: #fff;}
.section.cta-contact .inner-container .text-wrapper .title{margin: 0 auto;}
.section.cta-contact .inner-container .text-wrapper .desc{max-width: 700px; margin: 15px auto 0 ;}
.section.cta-contact .inner-container .buttons-wrapper{display: flex; white-space: nowrap; gap: 30px;}



/* --- Product categories Section  => Product posts Section --- */
.categories-wrapper{flex: 1 0 60%; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 30px;}
.categories-wrapper .category-item{display: flex; flex-flow: column; background-color: var(--primary-color-accent);}
.categories-wrapper .category-item .image-wrapper {height: 270px;}
.categories-wrapper .category-item .text-container {display: flex; flex-flow: column; flex: 1; padding: 30px 20px; text-align: center;}
.categories-wrapper .category-item .text-container .title {font-size: 1.1em; font-weight: 500; margin: 0 0 10px; transition: 0.3s color;}
.categories-wrapper .category-item .text-container .title:hover {color: var(--secondary-color);}
.categories-wrapper .category-item .text-container .desc {font-size: 0.9em; margin: 0 0 15px;}
.categories-wrapper .category-item .text-container .link {color: var(--secondary-color); font-size: 0.9em; margin: auto auto 0;}


/* --- Image Section => About us, Sourcing --- */
.imageSection{align-items: center; gap: 100px; margin: 0;}
.imageSection .texts-wrapper{margin-right: auto; width: 46%; max-width: calc(670px - 100px);}
.imageSection .texts-wrapper .title{margin-bottom: 0;}
.imageSection .texts-wrapper .button-container{gap: 30px;}
.imageSection .image-wrapper{position: relative; height: auto; max-width: 50%;}


/* --- Applications Section --- */
/* .section.applications{margin: 0 auto; padding: 30px 0;background: var(--primary-color-accent);} */
#front-page .applications .inner-container{display: flex; flex-flow: column; gap: 50px;}
#front-page .applications .inner-container .texts-wrapper{flex: 0 0 30%; align-self: center;}
#front-page .applications .inner-container .texts-wrapper .titles-wrapper .title{margin: 0;}
/* #front-page .applications .inner-container .texts-wrapper .titles-wrapper .subtitle{margin: 0;} */
#front-page .applications .inner-container .texts-wrapper .desc{margin: 30px auto; max-width: 760px;}
/* #front-page .applications .inner-container .image-wrapper {height: 250px;} */

/* v2 */
/* #front-page .applications{background: var(--primary-color-accent); padding: 30px 0;}
#front-page .applications .inner-container .icons-wrapper{flex: 1 0 60%; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0;}
#front-page .applications .inner-container .icons-wrapper .box{padding: 30px 15px; display: flex; flex-flow: column;}
#front-page .applications .inner-container .icons-wrapper .box .icon{max-height: 60px; width: auto; object-fit: contain; margin-bottom: 15px;}
#front-page .applications .inner-container .icons-wrapper .box .text-container .title{font-size: 1.1em; font-weight: 500; margin: 0 0 10px;}
#front-page .applications .inner-container .icons-wrapper .box .text-container .desc{font-size: 0.9em; margin: 0;} */


/* --- Values Section --- */
#front-page .values{background: unset;}
.section.values{margin: 5em auto 0; padding: 3em 0; background: var(--primary-color-accent);}
#values{display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 30px;}
#values .box{display: flex; flex-flow: column; flex-basis: 23%; align-items: baseline; gap: 30px;}
#values .box .icon{max-height: 70px; width: auto;}
#values .box .text-container{display: flex; flex-flow: column; flex: 1;}
#values .box .text-container .title{text-align: left; margin: 0 0 10px; font-size: 1em; font-weight: 500;}
#values .box .text-container .desc{font-size: 0.8em; margin: auto 0 0;} /* margin: 0 0 auto 0; */


/* --- Counter Section --- */
.section.counter .section{margin: 2.5em auto;}
#counter .box{display: flex; flex-flow: column; justify-content: center; align-items: center;}
#counter .box .digit{font-size: 3vmax; font-weight: 900; color: var(--secondary-color); }
#counter .box .text b{display: block; text-transform: uppercase; font-size: 1.3em;}


/* --- Post Aricles --- */
.section.news .button{display: block; width: fit-content; margin: 30px auto;}

.gridflow.singles{margin: 2em auto;}
.gridflow.singles .article{align-items: flex-start; text-align: left;}
.gridflow.singles .article .imageContainer{height: 300px; width: 100%; position: relative; overflow: hidden;}
.gridflow.singles .article .textContainer{display: flex; flex-flow: column; flex-grow: 1; margin: 15px 0;}
.gridflow.singles .article .title{margin: 0 0 auto 0; font-size: 1.1em; transition: 0.3s color;}
.gridflow.singles .article .title:hover{color: var(--secondary-color);}
.gridflow.singles .article .desc{font-size: 0.9em;}
.gridflow.singles .article .small{font-size: 0.8em; margin: 5px 0; transition: 0.3s color;}
.gridflow.singles .article .underlinedButton{display: block; width: fit-content; margin-top: auto;}

#single li{line-height: 1.5em;}


/* === Product Articles === */
.gridflow.products {grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));}
.gridflow.products .article .category{display: block;margin-top: 15px; transition: 0.3s color;}
.gridflow.products .article .category:hover,
.gridflow.products .article .title:hover,
.gridflow.products .article .link:hover{color: var(--secondary-color) !important;}
.gridflow.products .article .title{margin-top: 10px; transition: 0.3s color;}



/* === Archive: Post & Home Page Articles === */
.gridflow.post .article{overflow: visible;}
.gridflow .article{position: relative; display: flex; flex-flow: column; align-items: center; overflow: hidden;}
.gridflow .article .imageContainer{height: 300px; width: 100%; position: relative; overflow: hidden;}
.gridflow .article .image{width: 100%; height: 100%; object-fit: cover; transition: 0.3s all;}
.gridflow .article:hover .image{transform: scale(1.1);}

/* === About us Page === */
#page.about .titles-wrapper .title {margin-bottom: 15px;}
#page.about .values .titles-wrapper .title {margin-bottom: 1.33em;}

#page.about .company-history{display: flex; align-items: center; gap: 50px;}
#page.about .company-history .image-wrapper{max-width: 50%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px;}
#page.about .company-history .image-wrapper img{aspect-ratio: 1 / 1; object-fit: contain; background: #fff; padding: 30px; box-sizing: border-box;}

/* === Development & Quality Page === */
@import url('styles/animations.css');

#page.development-quality .sourcing .texts-wrapper .desc {font-size: 0.9em;}



/* .section.product-development .desc { max-width: 680px; margin: 0 auto 50px; text-align: center; } */
.product-development .title { margin: 0 auto;}
.product-development .desc { margin: 25px auto 50px; text-align: center; }
.steps-wrapper { display: flex; flex-flow: column; gap: 0; position: relative; }
.steps-wrapper::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 1px; background: var(--secondary-color); opacity: 0.3; }
.step { display: flex; align-items: center; gap: 60px; padding: 40px 0; position: relative; }
.step.left { flex-direction: row; text-align: right; }
.step.left .step-number { order: 1; text-align: right; flex: 1; }
.step.left .step-content { order: 3; text-align: left; flex: 1; }
.step.right { flex-direction: row; text-align: left; }
.step.right .step-number { order: 3; text-align: left; flex: 1; }
.step.right .step-content { order: 1; text-align: right; flex: 1; }
.step::before { content: ''; order: 2; width: 12px; height: 12px; min-width: 12px; border-radius: 50%; background: var(--secondary-color); position: relative; z-index: 1; }
.step-number { font-size: 2.5em; font-weight: 700; color: var(--secondary-color); opacity: 0.4; line-height: 1; }
.step-title { font-size: 1.1em; font-weight: 600; margin: 0 0 8px; color: var(--secondary-color); }
.step-desc { font-size: 0.9em; line-height: 1.6; margin-top: 0; }

#values.gridflow{ grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 50px;}





/* === Contacts Page === */
#contactPage .contactInfo {display: flex; flex-flow: row wrap; justify-content: space-between;}
#contactPage .contactInfo .article{display: flex; flex-flow: column; align-items: center; line-height: 1.5em;}
#contactPage .contactInfo .article .dashicons{width: auto; height: 50px; font-size: 3em; color: var(--secondary-color);}
#contactPage .contactInfo .article .title{text-transform: uppercase;}

#contactPage .mapForm{display: flex; justify-content: space-between; gap: 2%;}
#contactPage .mapForm .item.left{flex: 0 0 60%;}
#contactPage .mapForm .item.right{flex: 1 0 auto;}
#contactPage .mapForm .cmplz-placeholder-parent,
#contactPage .mapForm .item.left iframe {width: 100%; height: 100%;}
#contactPage .mapForm .item .title{margin: 0.5em 0;}

#contactForm {display: flex; flex-flow: column; justify-content: space-between; position: relative;}
#contactForm .input{margin: 10px 0; padding: 1em 0 0.9em 1.2em; font: inherit; font-size: 0.8em; outline: 0; border: 0;}
#contactForm .message{resize: vertical;}
#contactForm .submit{display: flex; align-items: center; justify-content: center; margin: 10px 0 0; padding: 1em 0 0.9em 1.2em; cursor: pointer; font-weight: 500;}
#contactForm .response{flex: 0 0 100%; margin-bottom: 15px; font-size: 0.7em;}
#contactForm .response.error{border-left: 5px solid #f00; padding: 7px 16px; background: #fff; color: var(--third-color);}
#contactForm .response.success{border-left: 5px solid #0f0; padding: 7px 16px; background: #fff; color: var(--third-color);}
.loaderWrapper{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.6); display: flex; align-items: center; justify-content: center;}
.loaderWrapper .loader{ width: 48px; height: 48px; border: 5px solid var(--secondary-color); border-bottom-color: #dedede; border-radius: 50%; display: inline-block;box-sizing: border-box; animation: rotation 1s linear infinite;}


/* --- 404 Page --- */
#errorPage{display: flex; flex-flow: column; text-align: center; min-height: unset; padding: 5% 0 7%;}
#errorPage .digits{display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}
#errorPage .digits .errorText{font-size: 19vw; line-height: 0; margin: 0 3%; text-align: justify;}
#errorPage .digits .null{height: 13vw; object-fit: contain;}

/* GDPR Plugin */
#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {max-width: 100%;}
#cmplz-cookies-overview .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div, #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div, .editor-styles-wrapper .cmplz-unlinked-mode .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {grid-template-columns: 2fr auto 1fr auto 25px;}

/* Footer */
#footer{padding: 40px 0; background-color: var(--primary-color-accent);}
#footer a{transition: 0.3s color; color: inherit;}
#footer a:hover{color: var(--secondary-color);}
#footer .credit a{color: var(--secondary-color);}
#footer .credit a:hover{color: inherit;}
#footer .rowF{display: flex; flex-flow: row wrap; justify-content: space-between; align-items: flex-end;}
#footer .rowF:after{content: ''; display: block; width: 100%; height: 1px; background: var(--secondary-color); margin: 20px 0;}
#footer .logo{display: flex; flex-flow: column;}
#footer .image-wrapper{width: 150px;}
#footer .image-wrapper img{object-fit: contain;}
#footer .fNav{flex: 1 0 100%;}
#footer .fNav ul{display: flex; justify-content: flex-end; margin: 0; padding: 0;}
#footer .fNav ul .dashicons-before{font-size: 1em;}
#footer .fNav ul li{display: flex; gap: 10px; align-items: center; border-right: 1px solid var(--secondary-color); padding-right: 1vw; margin-right: 1vw;}
#footer .fNav ul li:last-child{border: none; padding: 0; margin: 0;}
#footer .fNav li a{line-height: 1em; font-size: 16px;}
#footer .fInfo{display: flex; justify-content: space-between; letter-spacing: 0.5px;}
#footer .fInfo .cpr{display: flex; align-items: center; margin: 0 0 15px; flex-grow: 1;}
#footer .fInfo .cprText{margin: 0 1vw 0 0; line-height: 1em; font-size: initial;}
#footer .fInfo .sepr{font-size: initial; border-left: 1px solid var(--secondary-color); padding: 2px 1vw 0; line-height: 1em;}
#footer .fInfo .credit{font-size: initial; margin: 0;}

#performance{font-size: 12px;}

/* --- Responsive design ---*/

@media screen and (max-width:1200px){
	
}

@media screen and (max-width:1024px){
	#hamburger{display: flex;}
	#nav{position: absolute; top: 100%; left: 0; transform: translateX(+100%); background: var(--primary-color); transition: all 0.5s ease-in-out; padding: 0 4%; border-radius: 0; width: 100%; margin-left: 0;}
	#nav .menu{flex-flow: column; align-items: flex-start;}
	#nav.active{display: block; transform: translateX(0);}
	#nav .menu .menu-item a{padding: 15px 15px 11px; font-size: 1.2em;}
	#nav .menu .menu-item.about:hover .sub-menu{display: flex; padding: 0;}
	#nav .menu .menu-item:hover .sub-menu{display: none;}

	#contactPage .contactInfo{gap: 30px;}
	#contactPage .contactInfo .article{flex: 0 0 46%;}
	
	#footer .member{flex-flow: row wrap; justify-content: center;}
	#footer .rowF{flex-flow: column; align-items: center; text-align: center;}
	#footer .fNav ul{flex-flow: column; align-items: center;}
	#footer .fNav ul li{padding: 0; margin: 0; border-right: 0;}
	#footer .fNav ul li a{line-height: 2em;}
	#footer .fInfo{flex-flow: column; text-align: center;}
	#footer .fInfo .cpr{flex-flow: column wrap;}
	#footer .fInfo .sepr{border: 0; padding: 0; line-height: 2em;}
	#footer .fInfo .cprText{line-height: 2em;}
	#footer .fInfo .credit{overflow: hidden;}
}

@media screen and (max-width:900px){
	
}


@media screen and (max-width:768px){
	html, body {font-size: calc(15px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));}
	.flexrow{flex-flow: row wrap;}
	.button{font-size: 0.9em;}
	#counter{gap: 2.5em 0;}
	#counter .box{flex: 0 0 50%;}
	#intro {flex-flow: column-reverse; margin-top: 80px;}
	#intro .introImage {max-width: 100%; height: auto;}
	#intro .text-container {width: 96%; text-align: center; max-width: 100%; margin: 2.5em auto;}
	#intro .text-container .button-container {justify-content: center;}
	.imageSection {gap: 0;}
	.imageSection .image-wrapper {max-width: 100%;}
	.imageSection .texts-wrapper {padding: 25px 0; width: 96%; margin: 0 auto;}
	

	#contactPage .mapForm{flex-flow: column; gap: 20px;}
	#contactPage .mapForm .item.left iframe{height: 40vh;}

    .steps-wrapper::before { left: 20px; }
    .step, .step.left, .step.right { flex-direction: column; text-align: left; gap: 15px; padding-left: 50px; align-items: flex-start;}
    .step::before { position: absolute; left: 14px; }
    .step-number, .step.left .step-number, .step.right .step-number { order: 0; text-align: left; }
    .step-content, .step.left .step-content, .step.right .step-content { order: 1; text-align: left; }
}

@media screen and (max-width:600px){
	
}

@media screen and (max-width:500px){
	.imageBackground .wrapper{width: 100%;}
	#counter .box{flex: 0 0 100%;}
	#contactPage .contactInfo{flex-flow: column;}
	#intro .text-container .button-container {flex-flow: column; width: fit-content; align-items: center; margin: 0 auto; gap: 0;}
	#intro .text-container .title {font-size: 2.45em;}
}

@media screen and (max-width:448px){
	.section.values{text-align: center;}
	#values .box {align-items: center;}
	#values .box .text-container .title {text-align: center;}
	.section.cta-contact .inner-container .buttons-wrapper{flex-flow: row wrap; gap: 0px; margin-right: 30px;}
}

@media screen and (max-width:345px){
	.gridflow{overflow: hidden;}
}