/**
Theme Name: gga Child
Author: 
Author URI: 
Description: 
Version: 
License: 
License URI:
Text Domain: gga-child
Template: gga
*/
.ekit-wid-con .ekit-sidebar-group.ekit_isActive .ekit_sidebar-widget-container {transition: all 0.5s ease-out 1s !important;}
.ekit-wid-con .ekit_close-side-widget {top: 56px !important; right: 0 !important; left: 61px; width: 44px;}
.ekit-wid-con .ekit-sidebar-widget{transition:none !important;}
.ekit-wid-con .ekit-sidebar-group .ekit-overlay{cursor:initial !important;}
#primary {margin: 0;}
.projects {column-count:3; column-gap:50px;}
.projects .item {display: inline-block; width: 100%; overflow: hidden;  break-inside: avoid; margin-bottom:50px; position: relative; transition:0.5s;}
.projects .item img {width: 100%;height: auto;display: block;aspect-ratio: 1 / .6;object-fit: cover;}
.projects .item p {width: 100%; padding: 10px; margin: 0; font-size: 18px;text-align: center; position: absolute; bottom: 0; background: #03758c; color: #fff;   visibility: hidden;
 transform: translateY(58px);  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;}
.projects .item:hover p{    opacity: 1; visibility: visible; transform: translateY(0);}
.igb {position:relative;}
/*.igb:after{position: absolute; content: ""; background: linear-gradient(180deg, #22222200, #222, #222); width: 100%; height: 115px; bottom: 0; left: 0;}*/
.cf .wpcf7-not-valid-tip {position: absolute; bottom: -20px;}
.single-project div#primary {margin: 0px; padding:0px;}
.single-project .ts span {font-family: "Jost", Sans-serif; font-size: 20px; font-weight: 500; text-transform: uppercase; font-style: normal; letter-spacing: 2px; margin-bottom:5px;
 display: block;}
.single-project .ts h1 {font-family: "Jost", Sans-serif; font-size: 60px; font-weight: 300; text-transform: uppercase; line-height: 70px; letter-spacing: 2px; color: #03758C; margin-bottom:5px;}
.single-project .ts {border-top: 1px solid #e5e5e5; text-align: center; padding: 60px 0px; margin: 0px 60px;}
.single-project .ts p {max-width: 1300px; margin: 0px auto; font-size: 20px; line-height: 30px; margin-bottom:50px;}
.vline {width: 1px; height: 80px; background: #e5e5e5; margin: 0px auto;}

.projectsdetail {column-count:3; column-gap:50px;  padding: 0px 60px;}
.projectsdetail .item {display: inline-block; width: 100%; overflow: hidden;  break-inside: avoid; margin-bottom:50px; position: relative; transition:0.5s;}
.projectsdetail .item img {width: 100%; height: auto;  display: block;}
.projectsdetail .item p {width: 100%; padding: 10px; margin: 0; font-size: 28px; line-height: 38px; text-align: center; position: absolute; bottom: 0; background: #03758c; color: #fff;   visibility: hidden; transform: translateY(58px);  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;}
.projectsdetail .item:hover p{    opacity: 1; visibility: visible; transform: translateY(0);}
.pn {display: flex; justify-content: space-between; width: 100%; padding: 10px 60px 70px;}
.pn a {font-family: "Jost", Sans-serif; font-size: 20px; font-weight: 500; text-transform: uppercase; font-style: normal; text-decoration: none; letter-spacing: 2px; color: #222;}
.pn a:hover{color:#03758C;}

.project-archive-wrapper h1.archive-title {font-family: "Jost", Sans-serif; font-size: 60px; font-weight: 300; text-transform: uppercase; line-height: 70px; letter-spacing: 2px; color: #03758C; margin-bottom:50px;  text-align: center;}
.project-archive-wrapper .masonry-grid {column-count: 3; column-gap: 50px;}
.project-archive-wrapper .masonry-item {display: inline-block; width: 100%; overflow: hidden; break-inside: avoid; margin-bottom: 50px; position: relative; transition: 0.5s;}
.project-archive-wrapper .masonry-item p {width: 100%; padding: 10px; margin: 0; font-size: 28px; line-height: 38px; text-align: center; position: absolute; bottom: 0; background: #03758c; color: #fff;   visibility: hidden; transform: translateY(58px);  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;}
.project-archive-wrapper .masonry-item:hover p{opacity: 1; visibility: visible; transform: translateY(0);}
.project-archive-wrapper .masonry-item a{color: #fff;}
.vline2 {width: 1px; height: 80px;  background: #e5e5e5; margin: 0px auto 0px;}
.project-archive-wrapper{padding: 60px 0px 40px; border-top: 1px solid #e5e5e5; margin: 0px 60px;}
.project-archive-wrapper .masonry-item img {width: 100%; height: auto; display: block;}

.hfe-nav-menu .menu-item-has-children .sub-menu{top: 12px;}
/*.hfe-nav-menu .sub-arrow {font-size: 24px;}*/

.single-project .dialog-type-lightbox{display:none !important;}
.single-project .lg-backdrop{background-color: #000000d6;}
.single-project .lg-outer .lg-thumb-outer {background-color: #0d0a0a00;}

.proj-gallery .swiper-wrapper .swiper-slide-image {width: 100%;aspect-ratio: 1 / .56;object-fit: cover;}
.proj-gallery .swiper-wrapper figcaption {background: #03758c;border: 0;padding: 15px 10px;}

@media (max-width: 1200px) {
.projects{column-count: 3;}
}
@media (max-width: 1024px) {
.hfe-nav-menu li.menu-item {margin-bottom: 40px !important;}
ul.sub-menu.sub-menu-open li{margin-bottom: 10px !important;}
.projects {column-count: 2;}
.single-project .ts {margin: 0px 30px;}
.projectsdetail {padding: 0px 30px; column-count: 2;}
.project-archive-wrapper {margin: 0px 30px;}
.project-archive-wrapper .masonry-grid {column-count: 2;}
.proj-gallery .swiper-wrapper figcaption {padding: 10px;}
}	

@media (max-width: 921px) {
#primary, #secondary {padding:0; margin:0;}
}

@media (max-width: 768px) {
.projects {column-count: 2;}
.ekit-wid-con .ekit_close-side-widget {top: 0px !important; right: 0 !important;left: 24px; width: 44px;}
.hfe-nav-menu li.menu-item {margin-bottom: 20px !important;}
.projects .item{margin-bottom: 20px;}
ul.sub-menu.sub-menu-open li {margin-bottom: -4px !important;}
.project-archive-wrapper .masonry-grid {column-count: 1;}
.project-archive-wrapper .masonry-item{margin-bottom:30px;}	
.project-archive-wrapper h1.archive-title{font-size:40px; margin-bottom: 20px;}	
.project-archive-wrapper {padding: 30px 0px 20px;}	
.single-project .ts {padding:45px 0px;}
.single-project .ts h1{font-size:40px; line-height:50px;}	
.single-project .ts p {font-size: 18px; line-height: 28px; margin-bottom: 30px;}
.projectsdetail {padding: 0px 30px; column-count: 1;}	
.projectsdetail .item{margin-bottom: 30px;}	
.pn a {font-size: 18px;}
.pn {padding:0px 30px 40px;}
}

@media (max-width: 480px) {
.projects {column-count: 1;}
.image-gallery {grid-template-columns: repeat(1, 1fr) !important;}
}