/*
Theme Name: Bridge Child
Theme URI: http://demo.qodeinteractive.com/bridge/
Description: A child theme of Bridge Theme
Author: Qode Interactive
Author URI: http://www.qodethemes.com/
Version: 1.0.0
Template: bridge
*/
@import url("../bridge/style.css");

:root {
	/* COLORS */
	--lime: #E3F552;
	--black: #000;
	--white: #FFF;
	
	/* FONT SIZES*/
	--fs-base: clamp(1.0625rem, 0.9375rem + 0.2604vw, 1.25rem); /* 17 - 20 */
	
	/* FONT FAMILY*/
	--font-primary: 'GT America Bold', sans-serif;
	
	/* BORDER */
	--border-base: 1px solid var(--black);
	
	/* PADDING */
	--padding-zero: 0px;
	--padding-small: 8px;
	--padding-base: 16px;
	--padding-medium: 32px;
	--padding-large: 64px;
	--padding-xlarge: 112px;
	
}

::selection {
  background: var(--lime);
	color: var(--black);
}

/* TYPO */

h1, h2, h3, h4, h5, h6, p, ul {
	font-family: var(--font-primary);
	font-weight: normal;
	line-height: 1.3em;
	letter-spacing: 0px;
	color: var(--black);
	text-transform: none;
	font-size: var(--fs-base);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, p a  {
	color: var(--black);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover, p a:hover, a:hover {
	color: var(--black);
}

h1:not(:last-child), h2:not(:last-child), h3:not(:last-child), h4:not(:last-child), h5:not(:last-child), h6:not(:last-child) {
	margin-bottom: 0.5em;
}


.elementor-element ul {
	list-style: none;
}

.elementor-element ul li {
	border-bottom: var(--border-base);
	line-height: 1.3em;
	padding: var(--padding-small) var(--padding-small) var(--padding-small) 0;
}


/* CUSTOMS */
.border-bottom {
	border-bottom: var(--border-base);
}



.slide-in-blurred-top {
	-webkit-animation: slide-in-blurred-top 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
	        animation: slide-in-blurred-top 1s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
}


@-webkit-keyframes slide-in-blurred-top {
  0% {
    -webkit-transform: translateY(-0px) scaleY(1.2) scaleX(1.2);
            transform: translateY(-0px) scaleY(1.2) scaleX(1.2);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-filter: blur(40px);
            filter: blur(40px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0) scaleY(1) scaleX(1);
            transform: translateY(0) scaleY(1) scaleX(1);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    -webkit-filter: blur(0);
            filter: blur(0);
    opacity: 1;
  }
}

.slide-in-top {
	-webkit-animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-top 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


@-webkit-keyframes slide-in-top {
  0% {
    -webkit-transform: translateY(-50px);
            transform: translateY(-50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}


/* ELEMENTOR / CONTAINER */

.image-container {
	padding: 0 0 120px 0px !important;
}


.image-container.e-child {
	padding: 0 0 0 0 !important;
}

.content.content_top_margin {
  margin-top: 64px !important;
}

.e-con.zero {
	padding: var(--padding-zero) var(--padding-zero);
}



.e-con.text-container {
	padding-top: var(--padding-large);
	padding-right: var(--padding-zero);
	padding-left: var(--padding-zero);
	padding-bottom: var(--padding-xlarge);
	--widgets-spacing-row: 32px !important;

}



@media only screen and (max-width: 1000px) {
	.content.content_top_margin {
  		margin-top: 56px !important;
}
	.e-con.text-container {
		padding-top: var(--padding-medium);
		padding-right: var(--padding-zero);
		padding-left: var(--padding-small);
		padding-bottom: var(--padding-xlarge);
		--widgets-spacing-row: 32px !important;

}
	
	.single-portfolio_page .e-con.text-container {
		padding-bottom: var(--padding-large);


}

	
	
}
@media only screen and (max-width: 768px) {
	.content.content_top_margin {
  		margin-top: 56px !important;
}
	.image-container {
	padding: 0 0 40px 0px !important;
}

	
}

.wrapper_inner {
	overflow: visible;
}


@media only screen and (min-width: 1000px) {
.sticky-column {
    position: -webkit-sticky !important; 
    position: sticky !important;
    top: 64px !important;
}
}



/* LOGO */
.logo_wrapper {
	display: none;
}


/* HEADER */
/* remove clearfix */
.clearfix::after, .clearfix::before {
  display: none !important;
}



.header_top {
	background-color: var(--white);
	display: flex;
	height: 64px;
}

.header_top .right {
	display: none;
}

.main_menu {
	display: none;
}

.header_top .left, .header_top .left .inner, .top-menu {
  display: flex;
  width: 100%;
}

.header_bottom {
	position: fixed;
	bottom: 0;
	width: 100%;
	padding: 0 0 0 0;
}

header .header_inner_left {
	position: relative;
  	left: 0px;
}


nav.main, nav.main ul {
	display: flex;
	width: 100%;
	height: 64px;
}

nav.main ul {
	display: flex;
	justify-content: space-between;
	list-style: none;
}

nav.main ul li {
	width: 50%;
	border-top: var(--border-base);
	border-bottom: var(--border-base);
	border-right: var(--border-base);
	display: flex;
}



.top-menu nav.main ul li {
	border-top: none;

}

.bottom-menu nav.main ul li {
	border-bottom: none;

}



nav.main ul li:last-child {
	border-right: none;
}

nav.main ul li a {
	padding: var(--padding-base);
	font-size: var(--fs-base);
	text-transform: uppercase;
	align-items: center;
}

nav.main ul li a:hover {
	background-color: var(--lime);
	color: var(--black);
}

nav.main ul li:first-child a {
	width: 100%;
	display: flex;
	justify-content: flex-start;

}

nav.main ul li:last-child a {
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

@media only screen and (max-width: 1000px) {
	header {
		position: fixed !important;
	}
}

.site-title {
	margin: 0px 56px;
	width: 100%;
	font-size: var(--fs-base);
	color: var(--black);
	text-transform: uppercase;
	height: 56px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-left: var(--border-base) !important;
	border-bottom: var(--border-base) !important;
	border-right: var(--border-base) !important;
	
}

/* MOBILE MENU / FULLSCREEN MENU */
@media only screen and (min-width: 768px) {
	.side_menu_button_wrapper {
  		display: none;
}
	
	.site-title {
		display: none;
	}
	
}


@media only screen and (max-width: 768px) {
	
	header {
		position: fixed !important;
	}
	
	.header_top {
		height: 56px;
	}
	
	.header_top .inner {
    	margin: 0 0 0px;
  	}
	
	nav.main, nav.main ul {
  		height: 56px;
	}
	
	nav.main ul li:not(.mobile) {
  		display: none;
	}
	
	
	.top-menu {
		display: none;
		padding: 0px 56px;
	}
	
	.top-menu nav.main ul li.mobile {
		width: 100%;
		border-left: var(--border-base);
	}
	.top-menu nav.main ul li a {
		justify-content: center;
		padding:  0 0 0 0;
		align-items: center;
	}
	
	
	.header_inner_left {
		display: none;
	}
	
	.header_inner_right {
		width: auto;
		display: flex;
		justify-content: center;
		padding: 0px 56px;
		float: unset;
	}
	
	.side_menu_button_wrapper {
		display: flex;
		justify-content: center;
		width: 100%;
		border-top: var(--border-base);
		border-left: var(--border-base);
		border-right: var(--border-base);
	}
	
	.side_menu_button {
    	height: 56px !important;
		display: flex;
		justify-content: center;
		align-items: center;
  	}
	
	.side_menu_button a:last-child {
  		padding: 0 0 0 0px;
	}
	
	.side_menu_button > a {
		width: 48px;
	} 
	
	.popup_menu .line {
		width: 48px;
		height: 1px;
		background-color: transparent;
	}
	
	.popup_menu .line::before {
  		top: -6px;
		background-color: var(--black);
		width: 48px;
		height: 1px;
		
	}
	
	.popup_menu .line::after {
  		top: 6px;
		background-color: var(--black);
		width: 48px;
		height: 1px;
	}
	
	.popup_menu.opened .line::after, .popup_menu.opened .line::before {
		background: var(--black);
	}
}


/* FULL SCREEN MENU */
.popup_menu_holder {
	background-color: var(--white);
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

.popup_menu_holder_inner {
	width: 100%;
	background: var(--lime);
	padding-top: 0;
	padding-bottom: 56px;
}

nav.popup_menu ul li {
	text-align: left;
	padding-left: var(--padding-base);
	border-bottom: var(--border-base);
}

nav.popup_menu ul li a, nav.popup_menu ul li h6 {
	font-size: var(--fs-base);
	color: var(--black);
	letter-spacing: 0px;
	line-height: 56px;
}

nav.popup_menu ul li a:hover, nav.popup_menu ul li h6:hover {
  color: var(--black);
}

body.popup_menu_opened .side_menu_button_wrapper {
  
    border-left: none;
    border-right: none;
  }

@media only screen and (max-width: 768px) {
  nav.popup_menu ul li a span, nav.popup_menu ul li h6 span {
    font-size: 1em;
  }
	
	
}



/* OVERLAY */

.overlay {
	background-color: transparent;
	display: flex;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	pointer-events: none;
}

.column {
	flex-grow: 1;
}

.column:not(:last-child) {
	border-right: var(--border-base);
}

.column.split {
	display: flex;
	flex-direction: column;
}

.row {
	width: 100%;
	background-color: transparent;
	border-bottom: var(--border-base);
	flex-grow: 1;
}

@media only screen and (max-width: 768px) {
	.column:first-child {
		width: 57px;
		flex-grow: 0;
	}
	
	.column:last-child {
		width: 56px;
		flex-grow: 0;
	}	
}


/* PORTFOLIO LIST */

.portfolio-container {
    display: flex;
	padding-top: 64px;
}

#portfolio-thumbnail {
    width: 50%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
	padding-right: 10%;
}

#portfolio-thumbnail img {
    max-width: 100%;
    max-height: 100%;
    display: none; /* Hidden until hover */
}

.desktop-title a {
	padding: var(--padding-small) 0;
}


.portfolio-list {
    width: 50%;
}

.portfolio-title-wrapper {
	border-bottom: var(--border-base);
}

h2.portfolio-title {
    cursor: pointer;
	line-height: 1.3em;
	margin-bottom: 0;
	padding: var(--padding-small) var(--padding-small) var(--padding-small) 0;
}

.arrow-icon {
	display: none;
}

h3.portfolio-year {
	color: var(--black);
	margin-bottom: 0px;
	padding-top: var(--padding-medium);
	border-bottom: var(--border-base);
	padding-bottom: var(--padding-small);
	
}



@media only screen and (min-width: 1000px) {
	.mobile-title {
		display: none;
	}
} 

@media only screen and (min-width: 768px) and (max-width: 1000px) {
	.portfolio-list {
		padding-top: var(--padding-large);
}
}


@media only screen and (max-width: 1000px) {
	.portfolio-list {
    	width: 100%;
		padding-bottom: var(--padding-xlarge);
}
	#portfolio-thumbnail {
		display: none;
	}

	.portfolio-title-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: var(--border-base);
		border-top: var(--border-base);
		margin-left: var(--padding-small);
		margin-top: -1px;
		
	}
	
	
	
	.portfolio-item.active .portfolio-title-wrapper {
		border-bottom: none;
		
	}
	

	
	h2.portfolio-title {
		border-right: var(--border-base);
		width: 100%;
		min-height: 54px;

	}
	
	h3.portfolio-year {
		margin-bottom: 0px;
		padding-top: var(--padding-medium);
		border-bottom:  var(--border-base);
		padding-bottom: var(--padding-small);
		margin-left: var(--padding-small);
}
	
	.desktop-title {
		display: none;
	}
	
	.portfolio-item.active .portfolio-title {
		border-right: none;
	}
	
	.arrow-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: var(--padding-small);
		width: 54px;
		height: 54px;
		transition: all 0.5s ease-in-out;
	}
	
	.arrow-icon svg {
		width: 12px;
	}
	
	.portfolio-item.active  .arrow-icon {
		transform: rotate(90deg);
	}
	
	.mobile-project-btn {
		justify-content: flex-end;
		padding: var(--padding-small) var(--padding-small) var(--padding-medium) var(--padding-small);
		font-size: var(--fs-base);
		line-height: 1.3em;
		
	}
}

/* Mobile: Show images below titles when clicked */
.portfolio-mobile-img {
    width: 100%;
    display: none; /* Hidden by default */
}


/* PORTFOLIO SINGlE */

.portfolio_single h2 {
  margin: 0 0 0px;
	
}

.portfolio_single h2, .portfolio_single p {
	padding-right: var(--padding-small);
}

@media only screen and (min-width: 1000px) {
	.text-column .featured-image {
		display: none;
	}
}
@media only screen and (max-width: 1000px) {
	.image-column .featured-image {
		display: none;
	}
}

/* TABLE */
.portfolio_single table {
	font-family: var(--font-primary);
	color: var(--black);
	font-size: var(--fs-base);
}

.portfolio_single table tr {
	border-bottom: var(--border-base);
	height: 100% !important;
	min-height: 2em !important;

}

.portfolio_single table tr td {
	padding: var(--padding-small) var(--padding-small) var(--padding-small) 0;
	text-align: left;
	min-height: 2em !important;
	height: 100% !important;


}

.portfolio_single table tr td:first-child {
	width: unset !important;
	white-space: nowrap;
}

.portfolio_single table tr td:nth-child(2) {
	width: 100% !important;	
}


/* FLOATING BUTTON */
.eyecatcher-holder {
	position: absolute !important;
	top: 0px;
}
.eyecatcher {
  	width: auto !important; /* Or any dynamic width */
  	aspect-ratio: 1 / 1 !important;
	background-color: var(--lime) !important;
	border-radius: 100% !important;
	padding: var(--padding-medium) var(--padding-medium) !important;
	z-index: 190 !important;
	box-shadow: 0px 3px 6px 0px rgba(0,0,0,.2) !important;
	transform: rotate(12deg) translateX(50%) !important;
	position: absolute !important;
	right: 25% !important;
	top: 100px !important;	
}

.post .eyecatcher {
	transform: rotate(12deg) translateX(0%);
	position: absolute !important;
	right: 0%;
	top: 100px;	
}

@media only screen and (max-width: 768px) {
	.eyecatcher-holder{
		position: relative !important;
	}
	
	.eyecatcher {
		transform: rotate(12deg) translateX(0%) !important;
		right: 30px !important;
		top: 0 !important;
		position: relative !important;
	
	}
 	.post .eyecatcher {
    	transform: rotate(12deg) translateY(-105%)  translateX(-20%) !important;
    	position: absolute !important;
    	right: 0% !important;
    	top: 0 !important;
  }
}


/* JOBS POST*/

h2.post-title {
	line-height: 1.3em;
	margin-bottom: 0;
	padding: var(--padding-small) 0;
	border-bottom: var(--border-base);
}

.post-content {
	padding: var(--padding-small) var(--padding-base) var(--padding-base) 0;
	
}


/* PORTFOLIO NAVIGATION */
.portfolio_navigation {
  display: none;
}