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

#f6f6f6
#2f2f2f	
#444444	
#eeeeee
#0074cc

*/

/* --- Global variables --- */
:root{
	--primary-color: #f6f6f6;
	--secondary-color:#0074cc;
	--third-color: #2f2f2f;
	--fourth-color: #444444;
	--fifth-color: #eeeeee;
	--gray-color: #8f8f8f;
	--swiper-theme-color: #2275BC;
	--borderWidth: 2px;
  }

/* --- Reset settings --- */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
table { border-collapse: collapse; border-spacing: 0;}


/* --- 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 2%;}
.section{margin: 5em auto;}
.sectionPadding{padding: 5em 0;}
.anime{opacity: 0;}
/* .title{} */
/* .subtitle{} */
.button{position: relative; padding: 10px 20px; display: inline-block; color: #fff; background: var(--secondary-color); text-transform: uppercase; font-size: 0.7em; letter-spacing: 0.6px; font-weight: 500; margin-top: 15px; transition: 0.2s all;}
.button:hover{background: var(--fourth-color);}
.button.inverted{background: var(--fourth-color);}
.button.inverted:hover{background: #004981;}

.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,
.underlinedTitle.center, 
.center .underlinedTitle:after,
.underlinedTitle.center: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: #3c3c3c; opacity: 0.6; 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;}
.img-wrap img{width: 100%; height: 100%; object-fit: cover;}

.search-form .search-field{width: 100%; margin: 10px 0; padding: 1em 0 0.9em 1.2em; font: inherit; font-size: 0.8em; outline: 0; border: 0;}
.search-form .search-submit{display: block; border: 0; cursor: pointer; margin-top: 5px;}

/* === Header === */
#header{width: 100%; margin: 0; font-size: 0.8em; position: fixed; top: 0; left: 0; right: 0; z-index: 10; padding: 10px 0; transition: 0.3s all;}
#header .headerBar{align-items: center;}
#header.scrolled {background: var(--fifth-color); /* background: rgba(0,0,0,0.5); */}
#header.scrolled #nav .menu .menu-item{color: var(--third-color)}
#header .logo{height: 70px;}
#header .logo img{width: auto;}
#header .logo .white{opacity: 1;}
#header .logo .colored{opacity: 0;}
#header.scrolled .logo .white{opacity: 0; height: 0;}
#header.scrolled .logo .colored{opacity: 1;}

#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: #fff;}
#nav .menu .menu-item a{display: block; text-decoration: none; font-weight: 500; letter-spacing: 0.5px; color: inherit; padding: 5px 8px;}
#nav .menu .menu-item:hover,
#nav .menu .menu-item.current-menu-item{color: #d1d1d1; /*#c2c2c2; #66abe0*/}


#header.scrolled #nav .menu .menu-item:hover,
#header.scrolled #nav .menu .menu-item.current-menu-item{color: var(--secondary-color); /*#66abe0*/}

#nav .menu .first-menu-item{margin-left: 0;}
#nav .menu .last-menu-item{margin-right: 0;}

	/* --- Hamburger --- */
#hamburger{display: none; background: none; outline: 0; border: 0; border-top: 5px solid #fff; border-bottom: 5px solid #fff; width: 46px; height: 34px; position: relative; font-size: 0px; color: var(--third-color); transition: border 0.1s ease-out; z-index: 10; cursor: pointer;}
#header.scrolled #hamburger{border-top-color: var(--third-color); border-bottom-color: var(--third-color);}
#hamburger:before, #hamburger:after{content: ''; display: block; width: 100%; height: 5px; position: absolute; top: 50%; left: 50%; background: #fff; transform: translate(-50%, -50%); transition: transform 0.3s ease; z-index: 120;}
#header.scrolled #hamburger:before, #header.scrolled #hamburger:after{background: var(--third-color);}
#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/Video --- */
#frontPage #intro{margin-bottom: 20em;}

#intro{background: #fff; position: relative;}
#intro .introImage{position: relative; height: 90vh;}
#intro video{position: relative; height: 100%; width: 100%; object-fit: cover;}
#intro .videoGradient::before{content: ''; position: absolute; height: 100%; width: 100%; z-index: 1; 
background: rgba(0,0,0,0.2); background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgb(0 116 204 / 40%) 100%);}
	/* --- Intro Text --- */
#intro .text{position: absolute; top: 50%; left: 15%; transform: translateY(-50%); z-index: 2; color: #fff; opacity: 1; overflow: hidden;}
#intro .siteTitle{text-transform: uppercase; letter-spacing: 0.05em; font-size: 3.45em; margin: 5px 0;}
#intro .siteSubtitle{font-size: 1.6em; font-weight: 300; opacity: 1; white-space: nowrap; margin: 0; letter-spacing: .05em; overflow: hidden;}
	/* --- Intro Features box --- */
#intro .features{display: flex; justify-content: space-between; position: absolute; z-index: 2; top: 90%; left: 50%; transform: translateX(-50%);  width: 92%; max-width: 1340px; background: var(--fifth-color); box-shadow: 1.25rem 1.375rem 4.75rem 0rem rgba(0, 0, 0, 0.22);}
#intro .features .item{text-align: center; flex: 0 0 33%; padding: 3.5em 3em; box-sizing: border-box; }
#intro .features .icon{height: 64px; width: 64px; filter: invert(28%) sepia(36%) saturate(3757%) hue-rotate(186deg) brightness(105%) contrast(103%);}
#intro .features .title{text-transform: uppercase; font-size: 1em; margin-bottom: 0;}
#intro .features .description{font-size: 0.8em;}

#smallIntro{display: flex; height: 60vh; background-position: center; background-repeat: no-repeat; background-size: cover; color: var(--fifth-color);}
#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; align-items: center; list-style: none; padding: 10px 0 0; font-size: 0.8em; text-transform: uppercase;}
#breadcrumbs a{color: #fff; transition: 0.3s all;}
#breadcrumbs a:hover{color: #c2c2c2;}
#breadcrumbs .chunk{display: inline;}
#breadcrumbs .separator{padding: 0 10px; font-size: 1.2em; line-height: 1em; color: var(--secondary-color);}


/* === Pagination === */
.postPagination{margin: 70px auto 0; 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(--fourth-color); color: var(--primary-color); margin: 0 2px;}
.postPagination .page-numbers:hover{background: var(--secondary-color);}
.postPagination .page-numbers.current{background: var(--secondary-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: 100%; height: 100%; box-sizing: border-box;}
.imageBackground .containerImage:after{content: ''; position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; background: #3c3c3c; opacity: 0.95;}
.imageBackground .wrapper{position: relative; z-index: 3; width: 40%; height: 60vh; display: flex; flex-flow: column; justify-content: center;}


/* --- About us Section --- */
#frontPage .about{height: 100%; min-height: 90vh; color: var(--fifth-color); margin: 15em 0 0; /* margin: 20% 0 0; */}
#frontPage .about .containerIntro{position: absolute; top: -20%; left: 50%; transform: translateX(-50%); width: 80%; height: 500px; /* height: 60%; */ z-index: 3;}
#frontPage .about .content{position: relative; margin: 23% auto; z-index: 4; overflow: hidden;}
#frontPage .about .content .item:nth-child(2n){color: #fff; background: var(--secondary-color); border-color: var(--secondary-color);}
#frontPage .about .content .item:nth-child(2n) .button{background: var(--fourth-color);}
#frontPage .about .content .item:nth-child(2n) .button:hover{background: #004981;}
#frontPage .about .content .item .title:after{content: ''; display: block; width: 100%; height: 1px; background: #5c5c5c; margin: 25px 0;}
#frontPage .about .content .item:nth-child(2n) .title:after{background: #004981;}


/* --- About & Services Boxes --- */
#frontPage .about .content .item,
#frontPage .service .content .item{color: #fff; background: var(--third-color); border: 5px solid #5c5c5c; padding: 2em;}
#frontPage .about .content .item .title,
.service .item .title{font-weight: 500;}
#frontPage .about .content .item .description,
.service .item .description{font-size: 0.8em;}

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


/* --- Services Frontpage Section --- */
#frontPage .service .underlinedTitle{margin-bottom: 2.5em; color: var(--primary-color); text-align: center;} 
#frontPage .service .servicesWrapper{position: relative; z-index: 3; overflow: hidden;}
#frontPage .service .servicesWrapper .button.archive{margin: 2.5em auto;}


/* --- Services Section Global --- */
.service{height: 100%;}
.service .item{text-align: center;}
.service .item .icon{height: 78px; width: 78px; filter: invert(28%) sepia(36%) saturate(3757%) hue-rotate(186deg) brightness(105%) contrast(103%);}


/* --- Projects Section --- */
#frontPage .projects{overflow: hidden;}

/* --- Testimonials Section --- */
#testimonials{background-position: center; background-repeat: no-repeat; background-size: cover; padding: 4em 0; margin-bottom: 0;}
#testimonials:before{opacity: 0.5;}
#testimonials .title{color: #fff; position: relative; z-index: 3; margin: 10px auto;}
#testimonials .testimonialsSlider{margin: 15px auto 10px; color: #fff; overflow: hidden;}
#testimonials .testimonialsSlider .item{display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; min-height: 260px;}
#testimonials .testimonialsSlider .item .text{ width: 70%; margin: 10px 0 35px; text-align: center; font-size: 24px;}
#testimonials .testimonialsSlider .item .text blockquote{margin: 0;}
#testimonials .testimonialsSlider .item .text .signature{margin-top: 25px; font-size: 16px;}
#testimonials .testimonialsSlider .swiper-button-next,
#testimonials .testimonialsSlider .swiper-button-prev {color: #fff; top: 40%;}
#testimonials .testimonialsSlider .swiper-pagination-bullet-active {background: #fff;}

/* --- FAQ Section --- */
#frontPage #faq{background-color: var(--fifth-color);}
#faq .wrapper{max-width: 940px;}
#faq .underlinedTitle{margin-bottom: 2em;}
#faq .faqPart{position: relative; background-color: var(--primary-color); border: 1px solid #dbdbdb; cursor: pointer; transition: all 0.3s ease-in-out; padding: 0 4em 0 1.7em; margin-top: 0.7em; text-align: left;}
#faq .faqPart h4{font-size: 0.9em; font-weight: 500; margin: 1em 0; display: inline-block; padding-left: 20px;}
#faq .faqPart a{font-weight: 500;}
#faq .button{margin-top: 2em;}
#faq .faqPart details{overflow: hidden; transition: max-height 500ms cubic-bezier(0.645, 0.045, 0.355, 1);}
#faq .faqPart details p{font-size: 0.8em; margin-top: 0;}
#faq .faqPart details[open]{max-height: 1080px;}
#faq .faqPart:has(details[open]) {background: #fff; box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);}



#faq .faqPart summary{list-style: none; display: flex; align-items: start; cursor: pointer;}
#faq .faqPart summary::before{content: '▶︎'; width: 1em; flex-shrink: 0; align-self: center; transition: 0.3s; color: var(--secondary-color)}
#faq .faqPart details[open] > summary::before{transform: rotate(90deg); transform-origin: 40% 45% 0;}


/* --- Subscribe Section --- */
#frontPage .subscribe{margin: 5em auto 3em;}
#frontPage .subscribe .desc{max-width: 70%; margin: 1em auto;}
#frontPage .subscribe input{font-size: 0.75em;}
#frontPage .subscribe .tnp-email{outline: none;}
#frontPage .subscribe .tnp-submit{background: var(--secondary-color); margin: 0 auto; padding: 8px 16px;}
#frontPage .subscribe .tnp-submit:hover{background: var(--primary-color);}


/* --- 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;  transition: 0.5s color;}
.gridflow.singles .article .position{margin: 0; font-size: 0.75em; font-weight: 500; transition: 0.5s color;}
.gridflow.singles .article:hover .title{color: var(--secondary-color);}
.gridflow.singles .article .date{font-size: 0.8em; margin: 5px 0;}
.gridflow.singles .article .desc{font-size: 0.9em;}
.gridflow.singles .article .underlinedButton{display: block; width: fit-content; margin-top: auto;}

.dashiconsFont{display: flex; align-items: center; margin: 0.5em 0 0; font-size: 0.8em;}
.dashiconsFont:before{font-family: 'Dashicons'; margin-right: 5px;}


/* === 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 .image{width: 100%; height: 100%; object-fit: cover; transition: 0.5s all;}
.gridflow .article:hover .image{transform: scale(1.05); }

/* === Archive: Services, Projects etc. === */
#archive .item {display: flex; flex-flow: column; justify-content: flex-start; align-items: center;}
#archive .item .title{margin: 0.9em 0 0;}
#archive .item .description{margin: 0.4em 0 1em 0; width: 90%;}
#archive .item .button{margin-top: auto}


/* === Archive: Service === */
#archive.service .item,
#single.service .item{color: var(--third-color); background: #fff; border: 5px solid var(--fifth-color); padding: 2em;}

/* === Archive: Team === */
.team .gridflow{grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));}
.team .article a{margin: 0 auto;}
.team .textContainer{text-align: center; width: 100%;}
.team .textContainer .contact{display: flex; align-self: center;}
.team .textContainer .contact .dashiconsFont{font-size: 1.1em; margin-right: 10px; }
.team .textContainer .contact .dashiconsFont:before{filter: invert(28%) sepia(36%) saturate(3757%) hue-rotate(186deg) brightness(105%) contrast(103%); transition: 0.3s filter;}
.team .textContainer .contact .dashiconsFont:hover:before{filter: none;}


/* === Page & Single Global === */
#page .content a,
#single .content a{color: var(--secondary-color);}

#single .content .article a{color: initial;}

#page .content ul, #page .content ol,
#single .content ul, #single .content ol{list-style: revert-layer; padding-inline-start: 2em; line-height: 1.5em;}
/* #single #breadcrumbs{line-height: 1em;} */



/* === Page: About === */
#page.about .content{line-height: 1em;}
	/* --- Partners Section --- */	
.partners{background: #fff; padding: 5em 0; margin-top: 0;}
.partnersSlider{margin: 15px auto 10px; overflow: hidden;}
.partnersSlider .swiper-wrapper{list-style: none; padding: 0;}
.partnersSlider .item{display: flex; justify-content: center; align-items: center; height: 150px;}
.partnersSlider .item .link{height: 100%; padding: 15px;}
.partnersSlider .item .link img{width: 100%; height: 100%; object-fit: contain;}


/* === Single: Project Page === */
#single.project #breadcrumbs, #single.team #breadcrumbs{padding-inline-start: 0;}
#single.project{display: flex; flex-flow: row wrap; gap: 0 50px;}
#single.project .aside{flex: 1 0 30%; position: sticky; top: 90px; height: fit-content;}
#single.project .aside .dashiconsFont{font-size: 0.9em;}
#single.project .aside .list.relatedServices li a{color: var(--secondary-color); transition: 0.3s all;}
#single.project .aside .list.relatedServices li a:hover{color: var(--third-color);}
#single.project #breadcrumbs a, #single.team #breadcrumbs a{color: var(--third-color);}
#single.project #breadcrumbs a:hover, #single.team #breadcrumbs a:hover{color: var(--secondary-color);}
#single.project .projectIntro .image{width: 100%; height: 100%; object-fit: contain;}

#single.project .projectContent{flex: 1 0 65%;}
#single.project .wrapper{margin: 2.5em auto;}
/* #single.project .wrapper .wrapperTitle{} */
#single.project .wrapper .list{padding: revert;}
#single.project .wrapper .keyMoments,
#single.project .wrapper .goals{list-style: disc;}
	/* Results Section */
#single.project .wrapper .results {padding-inline-start: 0.5em; list-style: none;}
#single.project .wrapper .results .result:before {content: '✓'; margin-right: 10px; font-size: 0.7em;}	
	/* Stages Section */
#single.project .wrapper.stages{position: relative;}
#single.project .wrapper.stages .item{position: relative; margin-left: 10%;}
#single.project .wrapper.stages .item .icon{position: absolute; top: -10%; left: -11%; transform: translateX(-50%); background: #ececec; padding: 10px; border-radius: 100%; width: 48px; height: 48px; object-fit: contain;}
#single.project .wrapper.stages:before{content: ''; display: block; position: absolute; height: 100%; width: 3px; background: var(--gray-color);}
	/* Galery Section */
#single.project .wrapper.gallery .gallery{column-count: 4; column-gap: 10px;}
#single.project .wrapper.gallery .gallery a{margin: 0; display: grid; grid-template-rows: 1fr auto; margin-bottom: 10px; break-inside: avoid;}
#single.project .wrapper.gallery .gallery a > img{grid-row: 1 / -1; grid-column: 1; width: 100%; max-width: 100%; object-fit: cover;}
	/* Video Section */
#single.project .wrapper.video iframe{width: 100%; height: 500px;}
	/* Testimonial Section */
#single.project .wrapper.testimonial{background: var(--fifth-color); padding: 30px; position: relative;}
#single.project .wrapper.testimonial blockquote{font-size: 0.95em;}
#single.project .wrapper.testimonial:before{content: "\f122"; font-family: 'Dashicons'; display: block; position: absolute; top: 10px; left: 20px; font-size: 5em; color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--third-color); opacity: 0.1;}
#single.project .wrapper.testimonial footer{margin-top: 10px;}
#single.project .wrapper.testimonial .companyInfo{display: block; font-size: 0.9em; margin-top: 40px; font-style: normal;}

#single.project .projects.recent{flex: 0 0 100%;}


/* === Single: Team Page === */
#single.team .content .wrapper{display: flex; flex-flow: row wrap; gap: 50px;}
#single.team .content .wrapper .simplelightbox{flex: 1 0 35%; align-self: flex-start;}
#single.team .content .wrapper .image{width: 100%; height: 100%; object-fit: contain; margin: 30px 0;}
#single.team .content .wrapper .textContainer{flex: 1 0 60%; text-align: left;}
#single.team .content .wrapper .position{font-weight: 300; font-size: 1.25em; margin-top: 0; line-height: 0;}
#single.team .content .wrapper .textContainer .contact{margin-bottom: 2em; flex-flow: column;}
#single.team .content .wrapper .textContainer .contact a{color: var(--third-color); font-size: 0.9em;}

/* === Contacts Page === */
#contactPage .contactInfo {display: flex; flex-flow: row wrap; justify-content: space-between; gap: 30px;}
#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 .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;}
#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: #1e1e1e;}
#contactForm .response.success{border-left: 5px solid #0f0; padding: 7px 16px; background: #fff; color: #1e1e1e;}


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


/* --- Search Page --- */
#search .article a{position: relative; width: 100%;}


/* Footer */
#footer{padding: 40px 0; background: var(--third-color); color: #fff;}
#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: #fff; margin: 20px 0;}
#footer .logo{display: flex; flex-flow: column;}
#footer .img-wrap{width: 200px;}
#footer .img-wrap 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 #fff; 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 #fff; 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:1540px){
	#frontPage .about .containerIntro{height: 400px;}	
}

@media screen and (max-width:1080px){
	#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{color: var(--third-color);}
	#nav .menu .menu-item.current-menu-item{color: #66abe0;}
	#nav .menu .menu-item a{padding: 15px 15px 14px; 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;}
	
	#footer .logo{margin-bottom: 30px;}
	#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;}

	#frontPage .about .containerIntro{height: 300px; width: 90%;}
	#single.project{flex-flow: column-reverse;}
	#single.project .projectContent{margin-top: 2.5em;}
	#single.project .projects.recent{margin-bottom: 0;}
	#single.project .aside{position: relative; width: 100%; margin-top: 0;}
}

@media screen and (max-width:900px){
	html, body{font-size: calc(16px + (20 - 14) * ((100vw - 300px) / (1600 - 300)));}
	#intro .features{flex-flow: row wrap;}
	#intro .features .item{flex: 1 0 50%;}
	#frontPage #intro{margin-bottom: 35em;}
	#single.project .wrapper.stages:before{margin-left: 3.5%;}
	#single.project .wrapper.stages .item{margin-left: 15%;}	
	#single.project .wrapper.stages .item .icon{left: -13%;}
	#single.project .wrapper.gallery .gallery{column-count: 3;}
}


@media screen and (max-width:786px){
	.flexrow{flex-flow: row wrap;}
	.button{font-size: 0.9em;}
	.gridflow.logos{grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}
	#intro .siteSubtitle{white-space: wrap;}

	#counter{gap: 2.5em 0;}
	#counter .box{flex: 0 0 50%;}
	#testimonials .testimonialsSlider .item .text{width: 100%;}
	#testimonials .testimonialsSlider .swiper-button-next, #testimonials .testimonialsSlider .swiper-button-prev {display: none;}
	#contactPage .mapForm{flex-flow: column; gap: 20px;}
	#contactPage .mapForm .item.left iframe{height: 40vh;}
	/* #frontPage .about {min-height: 120vh; margin: 40% 0 0;} */

}

@media screen and (max-width:600px){
	#header .headerBar{flex-flow: row nowrap;}
	#header .logo{height: 55px; width: 100%;}
	#intro .features .item{flex: 0 0 100%;}
	#intro .features .item {padding: 2.5em 2em;}
	#frontPage #intro{margin-bottom: 50em;}
	#single.project .wrapper.gallery .gallery{column-count: 2;}
}

@media screen and (max-width:500px){
	.imageBackground .wrapper{width: 100%;}
	#counter .box{flex: 0 0 100%;}
	#contactPage .contactInfo{flex-flow: column;}
	.tnp-subscription input[type=submit], .tnp-profile input[type=submit]{width: auto !important;}
	#frontPage .about .containerIntro{height: 200px; top: -15%;}
	#frontPage .about{min-height: 130vh;}

	#single.project .wrapper.stages:before{margin-left: 7%;}
	#single.project .wrapper.stages .item{margin-left: 23%;}	
	#single.project .wrapper.stages .item .icon{left: -20%;}
}

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

@media screen and (max-height:600px){
	#smallIntro{height: 95vh;}	
}

@media (max-height:820px) and (orientation: landscape) {
	#frontPage .about{min-height: 120vh;}
}

@media (max-height:400px) and (orientation: landscape) {
	#frontPage .about{min-height: 250vh;}
}