/*
Theme Name: OKRA
Theme URI: http://www.okra.nl
Description: custom Wordpress theme for OKRA
Author: Atypisch - Marten Timan
Author URI: http://www.atypisch.nl
Version: 1.0.1
*/

/* basic elements */
html, body {
	font-weight: normal;
	font-family: 'Bryant';
	margin: 0;
	padding: 0;
	font-size: 24px;
	line-height: 1.4;
	text-align: left;
	background-color: #fff;
	color: #1e322d;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
	min-height: 100vh;
	min-height: fill-available;
	min-height: -webkit-fill-available;
	min-height: -moz-available;
}

* { box-sizing: border-box; }

/* Headings */
h1, h2, h3, h4, h5, h6 {
	float: left;
	width: 100%;
	margin: 0;
	padding: 10px 0 30px 0;
	line-height: 1;
	font-family: "indivisible-variable";
	font-weight: 400;
	font-variation-settings: "wght" 400;
	letter-spacing: -1px;
	color: #11241f;
}

h1 { font-size: 4.2em; padding: 0 0 30px 0; letter-spacing: -3px; margin-left: -8px; }
h1.theme_title { padding: 3.5vw 0 10px 0 !important; }
h1.theme_overview_title { margin-top: 0;  padding-bottom: 20px; }
h1.header_title { font-size: 5em; }
h2.quote_title { font-size: 3.2em; }
h2 { font-size: 2.3em; line-height: 1.1; }
h3 { font-size: 1.35em; line-height: 1.38; font-family: 'Bryant'; }
h3.title { font-size: 1.2em; line-height: 1.19; font-variation-settings: "wght" 500; letter-spacing: -0.96px; color: #1e322d; }
h4 { font-size: 20px; line-height: 1.38;  }
h5, h6 { line-height: 1.38; font-family: 'Bryant'; text-transform: uppercase; font-size: 16px; letter-spacing: 1px;	font-weight: 500; padding: 10px 0 0 0; }

/* text markup */
ul {
	float: left;
	width: 100%;
	padding: 0 0 25px 0;
	margin: 0;
}

ol {
	padding: 0 0 25px 20px;
	margin: 0;
}

ol li {
	padding: 0 0 0 5px;
}

ul li {
	list-style: none;
	padding: 0 0 0 20px;
	background-image: url(images/list-item.png);
	background-repeat: no-repeat;
	background-position: left 13px;
	background-size: 4px 4px;
}

b, strong {
	font-weight: 500;
	font-family: 'Bryant';
}

i, em {

}

blockquote {
	display: block;
	font-style: italic;
	padding: 10px 0 30px 30px;
	margin: 0;
	font-size: 36px;
	line-height: 1.4;
	font-weight: 300;
}

/* links and link classes */
a img, img a {
	border: 0;
	outline: 0;
}

/* general links */
a:link, a:visited {
	color: #58595b;
	text-decoration: underline;
	text-decoration-thickness: 0.5px;
	outline: 0;
}

a:hover, a:active {
	color: #000;
}

.bg_color_dark a:link, .bg_color_dark a:visited { color: #cfcac9; }
.bg_color_dark a:hover, .bg_color_dark a:active { color: #fff;  }

/* readmore button */
a.readmore_button:link, a.readmore_button:visited {
	display: inline-block;
	padding: 18px 30px;
	margin: 0 20px 20px 0;
	color: #12241f;
	font-size: 20px;
	line-height: 1;
	font-family: 'Bryant';
	font-weight: 400;
	text-transform: none;
	background-color: transparent;
	border: 1px solid #d0d2d1;
	border-radius: 28px;
	text-decoration: none;
	background-image: radial-gradient(circle at center , #12241f 50%, transparent 50%);
  background-repeat: no-repeat;
  transition: background-size .5s, color .5s;
  background-size: 0.1px 0.1px;
  background-position: 50% 50%;
}

a.readmore_button:hover, a.readmore_button:active {
	color: #fff;
	background-size: 800px 800px;
}

/* readmore with arrow */
a.readmore_button.arrow:link, a.readmore_button.arrow:visited {
	position: relative;
	padding: 18px 80px 18px 30px;
}

a.readmore_button.arrow img {
	position: absolute;
	top: 16px;
	right: 30px;
}

a.readmore_button.arrow:hover, a.readmore_button.arrow:active { }
a.readmore_button.arrow:link span, a.readmore_button.arrow:visited span { opacity: 0.6; }
a.readmore_button.arrow:hover span, a.readmore_button.arrow:active span { opacity: 1.0; }

.next_arrow {
	position: absolute;
	top: 16px;
	right: 30px;
	padding: 0;
	margin: 0;
}

/* homepage button adjustments */
a.readmore_button.btn_homepage_slider:link, a.readmore_button.btn_homepage_slider:visited {
	display: inline-block;
	margin: 40px auto;
	color: #122f1f;
	background-color: #fff;
	border: 1px solid #fff;
	border: 0;
}

a.readmore_button.white:link, a.readmore_button.white:visited {	background-color: #fff;}
a.readmore_button.white:hover, a.readmore_button.white:active {	color: #fff; }
a.readmore_button.inverted:link, a.readmore_button.inverted:visited {	background-color: transparent; color: #fff; }
a.readmore_button.inverted:hover, a.readmore_button.inverted:active {	background: #fff; color: #122f1f !important; }
a.readmore_button.dark:link, a.readmore_button.dark:visited {	background-color: #1e322d; color: #fff; }
a.readmore_button.dark:hover, a.readmore_button.dark:active {	color: #fff; }
a.readmore_button.grey:link, a.readmore_button.grey:visited {	border: solid 1px rgba(21, 34, 31, 0.2); color: #1e322d; }
a.readmore_button.grey:hover, a.readmore_button.grey:active {	color: #fff; }
a.readmore_button.btn_homepage_slider:hover, a.readmore_button.btn_homepage_slider:active {	border: 0; color: #fff; }
a.readmore_button.filter.active:link, a.readmore_button.filter.active:visited {	color: #fff !important; background-color: #1e322d; }
a.readmore_button.filter.active .inactive { display: none; }
a.readmore_button.filter.active .active { display: block; }
a.readmore_button.filter .list_total_count { float: right; margin: 0 0 0 10px; }

/* back button */
a.btn_back:link, a.btn_back:visited {
	float: left;
	position: relative;
	z-index: 1;
	font-size: 20px;
	height: 50px;
	line-height: 50px;
	margin: 0 0 20px 0;
	padding: 0 10px 0 65px;
	text-decoration: none;
	background-color: transparent;
	background-image: url(images/back.svg);
	background-size: 48px 48px;
	background-position: left center;
	background-repeat: no-repeat;
	color: #122f1f;
	border: 0;
}

a.btn_back:hover, a.btn_back.active {
	opacity: 0.4;
}

a.btn_back.page_top {
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	margin: 130px 0 0 20px;
	padding: 0 10px 20px 40px;
}

.btn_back_text {
	float: left;
	padding: 0 0 30px 0;
	margin: 0 0 0 15px;
}

/* contains slider button */
.btn_slider_wrap {
	float: right;
	padding: 0;
	margin: 0;
	background-color: transparent;
}

a.btn_view_all:link, a.btn_view_all:visited {
	position: relative;
	top: -114px;
	right: 320px;
	padding: 20px 0 20px 60px;
	margin: 0;
	color: #1e322d !important;
	background-color: transparent;
	background-image: url(images/ic_more.svg);
	background-size: 30px 30px;
	background-position: 10px center;
	background-repeat: no-repeat;
	text-decoration: none;
}

a.btn_view_all:hover, a.btn_view_all:active {
	opacity: 0.2;
}

/* full link - style on mouseover further down with preview_image */
a.full_link:link, a.full_link:visited {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	z-index: 3;
	text-decoration: none;
}

a.full_link:hover, a.full_link:active { }
a.full_link.bg_color:link, a.full_link.no_bg_color:visited { }
a.full_link.bg_color:hover, a.full_link.no_bg_color:active { background-color: #fff; opacity: 0.5; }



/* WP navigation toolbar fix */
#wpadminbar {
	position: absolute;
	top: 0;
	z-index: 1;
}

/* main divs */
#main_wrap {
	float: left;
	width: 100%;
	min-height: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	overflow-x: hidden;
	/*
	background-image: url(images/grid.png);
	background-repeat: repeat-y;
	background-position: center;
	*/
}

.page-template-template_contact #main_wrap { background-color: #1e322d !important; 	min-height: 100vh; }

/* main header > scrolled settings in menu.css */
#header {
	position: fixed;
	width: 100% !important;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	height: 100px;
	z-index: 9;
	background-color: transparent;
}

/* scrolled */
#header.scrolled {
	height: 80px;
	background-color: #fff !important;
}

#header.bg_color_light {
	background-color: #d0cac9 !important;
}

.header_line {
	position: absolute;
	bottom: 0;
	left: 60px;
	width: calc(100% - 120px) !important;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid rgba(88, 76, 76, .3);
}

#header.bg_color_light .header_line { border-bottom: 1px solid rgba(255, 255, 2556, .3); }
#header.bg_transparent .header_line { 	border-bottom: 1px solid rgba(255, 255, 2556, .3); }
#header.scrolled .header_line { border: 0; }

#header_image {
	float: left;
	width: 100%;
	max-width: 100% !important;
	height: 100vh;
	padding: 0 !important;
	margin: 0 !important;
	background-color: transparent;
	min-height: 100vh;
	min-height: fill-available;
	min-height: -webkit-fill-available;
	overflow: hidden;
}

#page_header.homepage {
	min-height: 57vw;
}

#page_header.homepage #header_image, #page_header.homepage .header_image_bg {
	min-height: 57vw;
}

#theme_header { min-height: 40vh; }
#theme_header_content { position: absolute; bottom: 0;  }

.overlay_layer {
	float: left;
	width: 100%;
	height: 100%;
}

.image_overlay_dark {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #1e322d;
	opacity: 0.5;
	z-index: 1;
}

.image_overlay_dark_2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(21,34,31);
	background: radial-gradient(circle, rgba(21,34,31,0) 0%, rgba(21,34,31,0.49761911600577735) 100%);
}

.header_image_bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100vh !important;
	min-height: 100vh;
	min-height: fill-available;
	min-height: -moz-available;
	min-height: -webkit-fill-available;
	max-height: 100vh !important;
	padding: 0;
	margin: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 0;
	-webkit-animation: fadein 1.5s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1.5s; /* Firefox < 16 */
	-ms-animation: fadein 1.5s; /* Internet Explorer */
	-o-animation: fadein 1.5s; /* Opera < 12.1 */
	animation: fadein 1.5s;
}

.header_bg_color {
	position: absolute;
	z-index: 0;
	width: 100%;
	height: 850px;
	padding: 0;
	margin: 0;
}

.header_bg_color.bg_pages { height: 850px; }

#logo, #logo_popup {
	position: absolute;
	left: 60px;
	top: 35px;
	width: 100px;
	height: 25px;
	z-index: 999;
	padding: 0;
	margin: 0;
	z-index: 11;
	background-color: transparent;
	background-image: url(images/logo_okra_white.svg);
	background-repeat: no-repeat;
	background-size: contain;
	opacity: 1.0;
}

#logo_popup {	top: -104px; left: 0; width: 80px; height: 20px; z-index: 15; }

#logo.logo_dark, #header.bg_color_light #logo, #header.menu_active #logo, #header.scrolled.menu_active #logo  { background-image: url(images/logo_okra.svg) !important; }
#header.scrolled #logo { top: 25px; background-image: url(images/logo_okra.svg); }
#logo.logo_white, #logo_popup.logo_white { background-image: url(images/logo_okra_white.svg); top: 35px; }
#header.menu_active #logo.logo_white, #header.menu_active #logo_popup.logo_white  {  background-image: url(images/logo_okra.svg) !important; }
#header.mobile_menu_active #logo.logo_white {  background-image: url(images/logo_okra.svg) !important; }

#logo:hover, #logo:active {
	opacity: 0.5;
}

#logo a {
	float: left;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: transparent;
	text-decoration: none;
}

.splash {
  cursor : pointer;
  position : fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
	z-index: 999;
  transform: 0;
	background-color: #1e322d;
	background-image: url(images/logo_okra_white.svg);
	background-repeat: no-repeat;
	background-size: 300px auto;
	background-position: center;
}

.hidden {
  transition: 0.5s;
  display: none;
	visibility: hidden;
}

.header_payoff_wrap {
	position: absolute;
	z-index: 1;
	top: 24%;
	left: 0;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	overflow: hidden;
	line-height: 1;
}

.header_payoff {
	float: left;
	width: 60%;
	color: #fff;
	text-align: center;
	line-height: 1;
	padding: 0 0;
	margin: 0 20%;
	z-index: 2;
	display: block;
  animation: reveal_up 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.header_payoff.wide { width: 80%; margin: 0 10%; }

.header_payoff h1 {
	float: left;
	width: 100%;
	color: #fff;
	font-family: "indivisible-variable", sans-serif;
	font-variation-settings: "wght" 400;
	font-size: 6em;
	margin: 0;
}

.header_payoff h1 span {
	/*transform: translate(0,100%);*/
}

.header_payoff_subtitle {
	margin: 0 15%;
	line-height: 1.3;
}

/* main divs */
#wrap {
	float: left;
	padding: 0 0 0 0;
	margin: 0;
	border: 0;
	width: 100%;
}

.container {
	position: relative;
	padding: 0;
	border: 0;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	height: auto;
}

/* flex box container */
.flex-container {
	padding: 60px 0 60px 0;
	margin: 0 60px;
  height: auto;
  width: calc(100% - 120px);
  border: 0;
	display: flex;
	flex-direction: row;
  gap: 60px;
}

.flex-container.column_wrap {
	width: 100%;
	flex-direction: column;
}

.flex-container.no_padding { padding: 0; }
.flex-container.no_margin { margin: 0; }
.flex-container.full_width { margin: 0; width: 100%; }
.flex-container > .equal_size { flex: 1; }
.flex-container.no_gap { gap: 0; }
.flex-wrap { -webkit-flex-wrap: wrap; flex-wrap: wrap; }


.flex-item, .flex-item-column {
	margin: 0;
	padding: 0;
	flex-basis: 1;
	flex-grow: 1;
  border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
}

.flexbox {
  flex: 1 0 calc(25% - 10px);
  margin: 0;
  background: #e9d2ff;
	flex-basis: 0;
}

.flexbox:after {
  content: '';
  display: block;
}

.flex_overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 40px;
	margin: 0;
	width: 50%;
	margin: 0;
	color: #fff;
	z-index: 2;
}

.flex-third {
	flex: 1 1 auto;
  display: flex;
  justify-content: left;
}

.flex-twothird {
  flex: 2 1 auto;
  display: flex;
  justify-content: left;
}

.cover_image { min-height: 30vw; background-position: center; }

.flex-basis-50 { width: calc(50% - 30px); max-width: calc(50% - 30px);  min-width: calc(50% - 30px); }
.flex-basis-fourth, .flex-fourth { width: calc(25% - 45px); max-width: calc(25% - 45px); min-width: calc(25% - 45px); }
.flex-basis-third {	width: calc(33% - 30px); max-width: calc(33% - 30px); }
.flex-basis-third-news { width: 25%; max-width: calc(33% - 30px); } }
.flex-basis-twothird {	width: calc(67% - 30px); max-width: calc(67% - 30px); }
.flex-basis-35 { flex-basis: 35%; }
.flex-basis-40 { flex-basis: 40%; }
.flex-basis-45 { flex-basis: 46.5%; }
.flex-basis-55 { flex-basis: 53.5%; }
.flex-basis-60 { flex-basis: 60%; }
.flex-basis-65 { flex-basis: 60%; }
.flex-basis-25 { flex-basis: 25%; width: 45% !important; }
.flex-basis-75 { flex-basis: 75%; }
.flex-basis-100 { flex-basis: 100%; }
.flex-direction-column { flex-direction: column; }
.flex-items-start { align-items: flex-start; align-content:flex-start; }
.flex-align-end { align-content: flex-end; align-items: flex-end; }
.flex-align-center { align-items: center; justify-content: center; }
.flex-justify-start { justify-content: flex-start; }
.flex-justify-end { justify-content: flex-end; }
.flex-grow-0 { flex-grow: 0; }
.flex-grow-05 { flex-grow: 0.5; }
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.flex-grow-3 { flex-grow: 3; }
.flex-grow-4 { flex-grow: 4; }
.flex-grow-5 { flex-grow: 5; }
.flex-grow-6 { flex-grow: 6; }



/* fixed columns */
.col_wrap {
	float: left;
	background-color: transparent;
	padding: 0 40px 0 0;
	margin: 0;
}

.col {
	float: left;
	background-color: transparent;
	padding: 0;
	margin: 0;
}

.col_content {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: transparent;
}

.col_content_centered {
	float: none;
	padding: 0;
	text-align: center !important;
}

/* column widths , 12 columns and first without gutter. Use col_wrap for gutter with */
.col-12 { width: 1304px; }
.col-11 { width: 1192px; }
.col-10 { width: 1080px; }
.col-9 { width: 968px; }
.col-8 { width: 856px; }
.col-7 { width: 744px; }
.col-6 { width: 632px; }
.col-5 { width: 520px; }
.col-4 { width: 408px; }
.col-3 { width: 296px; }
.col-2 { width: 184px; }
.col-1 { width: 72px; }

/* percentages */
.col-40 { width: 40%; }
.col-50 { width: 50%; }
.col-60 { width: 60%; }

/* Sections */
section.page_section {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	background-repeat: no-repeat;
	background-size: cover;
}

.section_spacing {
	float: left;
	width: 100%;
	padding: 60px 0 60px 0;
	margin: 0;
}

/* post and content */
.post, .entry {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: left;
}

/* paragraph styling */
.post p, .entry p {
	display: block;
	text-align: left;
	padding: 0 0 30px 0;
	margin: 0;
}

.post img, .entry img, .col img, .flex-item img {
	max-width: 100% !important;
	height: auto;
}

.flex-item .wp-video {
	width: 100% !important;
	max-width: 100% !important;
	height: auto;
}

.col iframe {
	max-width: 100% !important;
	height: auto;
	aspect-ratio: 16/9;
}

/* post content main, extende and readmore / readless */
.post_content_main, .post_content_extended {
	float: left;
	padding: 0 0 20px 0;
	margin: 0;
	text-align: left;
	width: 100%;
	max-width: 100%;
}

.post_content_main p {  }

.post_content_main h3 { padding-top: 10px; padding-bottom: 20px; }
.post_content_extended {  display: none; }

a.post_content_readmore:link, a.post_content_readmore:visited {
	float: left;
	font-family: "Bryant";
	font-weight: normal;
	padding: 0 0 5px 0;
	margin: 0 0 16px 0;
	text-align: left;
	font-size: 18px;
	letter-spacing: 0;
	width: 100%;
	text-decoration: none;
	text-transform: none;
	border: 0;
	color: #58595b;
}

a.post_content_readmore:hover, a.post_content_readmore:active {
	text-decoration: none;
}

/* active/inactive text */
.read_more_text { display: block; }
.read_less_text { display: none; }
.active .read_more_text { display: none; }
.active .read_less_text { display: block; }

/* images */
.image_list {
	position: relative;
	width: 100%;
	padding: 0;
	margin: 0;
	text-align: center;
	background: transparent;
}

.image_container {
	float: left;
  margin: 0;
	padding: 0;
	width: 100%;
}

.image_wrap {
	position: relative;
	left: 0;
	width: 100%;
  margin: 0;
	padding: 0;
}

.flex-container.flex_images .flex-item img {
  object-fit: cover !important;
  width: 100%;
	min-width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 0;
}

.flex-container.flex_images .single.full_width { width: 100% !important; padding: 0; }
.flex-container.full img {  }

.flex-container.flex_images .two.grid_2.flex-third img,
.flex-container.flex_images .two.grid_2.flex-twothird img,
.flex-container.flex_images .two.grid_3.flex-third img,
.flex-container.flex_images .two.grid_3.flex-twothird img,
.flex-container.flex_images .two.grid_4.flex-third img,
.flex-container.flex_images .two.grid_4.flex-twothird img { min-height: 100%; }

.flex-container.flex_images .two.grid_5.flex-third, .flex-container.flex_images .two.grid_6.flex-third  { width: calc(100% / 3) !important; max-width: calc(100% / 3) !important; }
.flex-container.flex_images .two.grid_5.flex-third img, .flex-container.flex_images .two.grid_6.flex-third img { min-height: auto; width: 100% !important;}
.flex-container.flex_images .two.grid_5.flex-twothird, .flex-container.flex_images .two.grid_6.flex-twothird {  width: calc(100% / 1.5); max-width: calc(100% / 1.5); }

/*  image grids */
.image_container.full, .image_container.large, .image_container.single { }
.image_container.single.preview-image-medium { float: none; display: block; top: 0; }

.image_container.header-image { }
.image_container.full { width: 100% !important; padding: 0; }
.image_container.full img { width: 100% !important; padding: 0; }

.image_container.two { float: left;  }
.image_container.two .image_wrap { padding: 0; }
.image_container.two.image_1 { margin-right: 40px; }
.image_container.two.image_2 { padding: 0; }
.image_container.two.image_1.grid_4 img {  }

.image_container.three { float: left;  }
.image_container.three .image_wrap {   }
.image_container.three.image_1 { margin-right: 40px; }
.image_container.three.image_2 { margin-right: 40px; }
.image_container.three.image_3 { padding: 0; }
.image_container .padding_top_relative { padding-top: 160px; }

.image_container.four { float: left;  }
.image_container.four .image_wrap {   }
.image_container.four.image_1 { margin-right: 40px; }
.image_container.four.image_2 { margin-right: 40px; }
.image_container.four.image_3 { margin-right: 40px; }
.image_container.four.image_4 { padding: 0; }

.flex-container.flex_images { gap: 60px; }
.flex-container.flex_images .flex-item { margin: 0 !important; }
.flex-container.flex_images .three.preview-image-landscape.grid_3 img { max-width: 100% !important; width: 100% !important; min-height: auto !important; height: auto !important; }

.image_caption, .wp-caption {
	position: relative;
	top: calc(100% + 15px);
	left: auto;
	display: block;
	text-align: left;
	width: auto !important;
	max-width: 100% !important;
	padding: 5px 0 15px 0;
	margin: 0;
	font-size: 20px;
  color: #1e322d;
	line-height: 1.4;
	background-color: transparent;
}
.bg_color_dark .image_caption, .bg_color_dark .wp-caption { color: #fff; }

.image_container .image_caption {
	float: left;
	width: 100%;
	padding: 15px 0 0 0;
}

/* two images adjustments */
.flex_images .flex-item.two.grid_2 .image_caption,
.flex_images .flex-item.three.grid_2 .image_caption {
	position: absolute;
	bottom: -60px;
}

.flex_images .flex-item.two.grid_5 .image_caption { position: absolute; bottom: -30px; }
.flex_images .flex-item.two.grid_5.flex-third .image_caption { position: relative; bottom: -18px;  }
.flex_images .flex-item.two.grid_6 .image_caption { position: absolute; bottom: -40px; }
.flex_images .flex-item.two.grid_6.flex-third .image_caption { position: relative; bottom: -18px; }

.flex_images .flex-item.two.grid_5 .flex-third img {
	max-height: 300px;
}

/* grid_3 */
.flex_images .flex-item.three.grid_3 .image_caption { position: absolute; bottom: -50px; }
.flex_images .flex-item.three.preview-image-landscape.grid_3 .image_caption { position: relative; bottom: -8px;   }

.image_bg {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100% !important;
	min-height: 100% !important;
	min-height: fill-available;
	min-height: -moz-available;
	min-height: -webkit-fill-available;
	padding: 0;
	margin: 0;
	background-color: green;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	z-index: 0;
}

.footer_credits { margin-bottom: 12px; }

#page_header .image_caption {
	position: absolute !important;
 	bottom: 20px;
	z-index: 1;
	display: none;
}

.image_caption.gallery {
	position: absolute;
	top: calc(100% - 30px);
	z-index: 1;
	display: none;
}

p.wp-caption-text {
	float: left;
	width: 100%;
	padding: 15px 0 0 0 !important;
}

.post-edit-link {
	clear: both;
	float: left;
	width: 100%;
}

/* preview items */
.featured_item {
	float: left;
	height: 40vw;
	max-height: 720px;
	background: transparent;
}

.featured_item.item_1 { width: calc(50% - 244px); }
.featured_item.item_2 { width: calc( 50% + 204px); margin-left: 60px; }
.featured_item.item_3 { width: 100%; margin-top: 60px; }

.preview_item_wrap {
	float: left;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}

/* padding adjustments for grid */
.featured_item.item_2 .preview_item_wrap { 	padding: 0;   }
.featured_item.item_3 .preview_item_wrap { 	padding: 0;  }

/* Preview image */
.preview_image_wrap {
	float: left;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background-color: #11241f;
	overflow: hidden;
}

.preview_image_wrap.square_small {
	width: 20vw;
	height: 20vw;
	aspect-ratio: 1/1;
}

.preview_image {
	float: left;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

a.full_link + .preview_image_wrap .preview_image,
a.full_link + .col .preview_image_wrap .preview_image  {
	max-width: none;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

a.full_link:hover + .preview_image_wrap .preview_image,
a.full_link + .col .preview_image_wrap .preview_image  {
	opacity: 0.6;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

.preview_content_wrap {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
}

.preview_content {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: auto;
	min-width: 30%;
	padding: 0;
	margin: 0;
}

.preview_title {
	float: left;
	width: 100%;
}

.preview_title.read_more {
	padding: 10px 0 0 0;
}

.preview_title.read_more h3 {
	float: left;
	font-size: 1.4em;
	font-family: "indivisible-variable";
	letter-spacing: 0px;
	font-variation-settings: "wght" 400;
	line-height: 1.2;
	padding: 0 0 0 0;
	margin: 10px 0 20px 0;
}

.preview_title.read_more img {
	display: inline-block;
	margin: 0 0 -3px 0;
	line-height: 10px;
}

/*switch styles*/
div.btn-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
	position: absolute;
	z-index: 2;
	top: 80%;
	left: calc(50% - 115px);
}

div.btn-container i{
  display: inline-block;
  position: relative;
  top: -9px;
}

label {
  font-size: 16px;
  color: #424242;
  font-weight: 500;
}

.btn-color-mode-switch {
	position: absolute;
	top: calc(50vw - 120px);
  display: inline-block;
  margin: 0px;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner {
	position: relative;
	top: 0;
	left: 0;
  margin: 0px;
  width: 230px;
  height: 60px;
  padding: 10px 44px 10px 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: block;
  border-radius: 35.5px;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.16);
  background-color: #fff;
}

/* after txt */
.btn-color-mode-switch > label.btn-color-mode-switch-inner:before {
	position: absolute;
  content: attr(data-on);
  font-size: 16px;
  font-weight: 500;
  top: 22px;
  right: 40px;
  color: #1e322d;
}

.btn-color-mode-switch > label.btn-color-mode-switch-inner:after {
  content: attr(data-off);
  width: 70px;
  height: 16px;
  background-color: #1e322d;
  color: #fff;
  padding: 12.5px 27px 16.5px 26px;
  border-radius: 25.5px;
  position: absolute;
  left: 8px;
  top: 8px;
  text-align: center;
  transition: all 0.3s ease;
}

.btn-color-mode-switch input[type="checkbox"] {
  cursor: pointer;
  width: 250px;
  height: 42px;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  margin: 0px;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner {
  /*  background: #151515; */
  color: #fff;
}

.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after {
  content: attr(data-on);
  left: 100px;
/*  background: #3c3c3c;*/
}

/* before txt */
.btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before {
  content: attr(data-off);
  right: auto;
  left: 30px;
}

.btn-color-mode-switch input[type="checkbox"]:checked ~ .alert {
  display: block;
}

.bg_image_container {
	float: left;
	width: 100%;
	height: 50vw;
	padding: 0;
	margin: 0;
}

.bg_image_full {
	position: absolute;
	z-index: 1;
	min-width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	top: 0 !important;
	left: 0 !important;
	width: 100%;
	height: 100%;
}

.bg_image_lines {
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover ;
	background-position: left -10vw;
}

.bg_image_lines.lines_1 { background-image: url(images/lines/lines_coastal.svg); }
.bg_image_lines.lines_2 { background-image: url(images/lines/lines_urban.svg); }
.bg_image_lines.lines_3 { background-image: url(images/lines/lines_landscape.svg); }
.bg_image_lines.lines_footer { background-image: url(images/lines/lines_footer.svg); background-position: left -2vw; }

/* social */
.social_media {
	float: left;
	min-height: 60px;
	width: 100%;
	padding: 20px 0 0 0;
	margin: 0;
}

.social_media a:link, .social_media a:visited {
	float: left;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 10px 10px 10px 0;
	background-repeat: no-repeat;
	background-position: 0 0;
}

.social_media a:hover, .social_media a:active {
	opacity: 0.5;
}

/* social share */
.social_share {
	position: relative;
	text-align: center;
	height: 40px;
	padding: 20px 0 20px 0;
	margin: 0;
	left: 50%;
	width: 208px;
	-webkit-transform: translate(-50	%, );
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.social_share a:link, .social_share a:visited {
	float: left;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0 15px 0 0;
	text-decoration: none;
	background-repeat: no-repeat;
	background-position: 0 0;
}

.social_share a:hover, .social_share a:active {
	opacity: 0.5;
}

.social_share a.btn_tw { background-image: url(images/social/ic_x.svg); }
.social_share a.btn_fb { background-image: url(images/social/ic_fb.svg); }
.social_share a.btn_li { background-image: url(images/social/ic_linkedin.svg); }
.social_share a.btn_in { background-image: url(images/social/ic_insta.svg); }

/* align images  */
img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.alignright {
	padding: 0 0 0 16px;
	margin: 0;
}

img.alignleft {
	padding: 0 16px 0 0;
	margin: 0;
}

.alignright { float: right; }
.alignleft { float: left; }

/* End align Images */


/* project navigation links */
a.link_prev { text-decoration: none; padding: 0 0 0 60px; background-image: url(images/arrow_prev.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: left 3px; }
a.link_next { text-decoration: none; padding: 0 60px 0 0; background-image: url(images/arrow_next.png); background-size: 30px 30px; background-repeat: no-repeat; background-position: right 3px;  }

.project_detail {
	font-size: 16px;
}

.project_detail p {
	padding: 0;
	margin: 0;
}

.project_label {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: bold;
}

.project_icon {
	float: left;
	width: 20px;
	height: 20px;
	padding: 0 20px 0 0;
	margin: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 14px 14px;
}

.project_icon.location { background-image: url(images/ic_location.svg); }
.project_icon.status { background-image: url(images/ic_status.svg); }
.project_icon.year { background-image: url(images/ic_year.svg); }
.project_icon.size { background-image: url(images/ic_size.svg); }
.project_icon.partners { background-image: url(images/ic_partners.svg); }
.project_icon.credits { background-image: url(images/ic_credits.svg); }
.project_icon.client { background-image: url(images/ic_client.svg); }

.project_popup_close {
	position: absolute;
	z-index: 10;
	top: -112px;
	right: 0;
	width: 36px;
	height: 36px;
	padding: 0;
	margin: 0 0 20px 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(images/ic_close_white.svg);
	cursor: pointer;
}

.project_popup_close:hover { opacity: 0.5; }

/* news items and related */
.related_item_2 { padding-top: 4em; }

/* awards */

#flex_items_output.awards .flex-basis-third-news:nth-child(3n+2) {  margin-top: 0; }

#flex_items_output.awards .preview_image_wrap {
  display: none;
}

#flex_items_output.awards h2 { font-size: 1.8em; }

.item_title_awards { display: none; }
 #flex_items_output.awards .item_title { display: none; }
 #flex_items_output.awards .item_title_awards { display: block; }

.item_title_wrap_small {
	position: absolute;
	bottom: -12px; /* make up for line-height to align bottom text with image */
	right: 0;
	width: calc( 100% - 20vw);
	padding: 0 0 0 30px;
	margin: 0;
	background-color: transparent;
}

.item_title_wrap_small h4 {
	font-family: 'Bryant';
	line-height: 1.38;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	padding: 0;
	margin: 0;
}

.item_title {
	float: left;
	width: 100%;
	color: #000;
	padding: 10px 0 10px 0;
	margin: 0;
}

.item_title h5 {
	font-family: "indivisible-variable";
	font-weight: 500;
	font-variation-settings: "wght" 500;
	font-size: 24px;
	text-transform: none;
}

.item_category {
	float: left;
	width: 100%;
	color: #1e322d;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1.4 !important;
	letter-spacing: 1px;
	font-weight: 600;
	padding: 0;
	margin: 5px 0 25px 0;
}

.item_category.large { font-size: 16px; line-height: 1.4; }

.item_category .dot, .project_list .dot  {
	position: relative;
	bottom: -3px;
	padding: 0;
	font-weight: 600;
	text-transform: uppercase;
	margin: 0 0 -2px 0;
	font-size: 26px !important;
	line-height: 1px !important;
}

.item_category .dot img {
	display: inline-block;
	width: 4px;
	height: 4px;
	padding: 0;
	margin: 0;
}

.item_number {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	font-size: 2.7em;
	font-family: "indivisible-variable", sans-serif;
	font-variation-settings: "wght" 400;
	background-color: transparent;
}

.item_description {
	float: left;
	width: 100%;
	padding: 0 0 100px 0;
	margin: -10px 0 0 0;
	font-size: 20px;
}

/* Awards */
.awards_thumbnail {
	float: left;
	width: 60px;
	height: 60px;
	padding: 0 20px 0 0;
	margin: 30px 0 0 0;
}

.awards_text {
	float: left;
	padding: 0;
	margin: 20px 0 0 0;
	width: calc( 100% - 60px);
}

/* split */
.flex-container.flex-wrap.split_flex .flex-item.equal_size  {
	width: 100% !important;
	height: auto;
	padding: 0;
}

.flex-container.flex-wrap.split_flex .flex-item.equal_size {
	width: 100% !important;
	height: auto;
}

.flex-container.flex-wrap.split_flex .flex-item.equal_size img {
	width: 100% !important;
}

/* grid for Team */
.grid {
  display: flex;
  padding: 20px 30px;
	gap: 20px;
}

.grid > .equal_size { flex: 1; }
.grid-col {  flex-grow: 1; 	flex-basis: 1; width: 300px;}
/* 2 columns by default, hide columns 2 & 3 */
.grid-col:nth-child(2), .grid-col:nth-child(3) {  display: none; }

.grid-item {
	flex-basis: 1;
	flex-grow: 1;
	position: relative;
  background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
  color: white;
  margin: 40px 10px 40px 10px;
  text-align: left;
  font-family: system-ui;
  font-weight: normal;
  font-size: 1em;
	height: calc(30vw + 120px);
/*	background-color: red;*/
}

.team_member_image {
	float: left;
	width: 100%;
	height: 30vw;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 0;
	margin: 0 0 20px 0;
}

.team_member_name {
	position: relative;
	top: calc(30vw + 30px);
	color: #1e322d;
	font-family: 'Bryant';
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.5;
}

.team_member_name h3 {
	font-family: "indivisible-variable";
	font-weight: 500;
	font-variation-settings: "wght" 500;
	font-size: 24px;
	font-weight: 500;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.33;
}

.bg_color_dark .team_popup_scroll h2 { color: #fff !important; }

.member_overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #1e322d;
	background-image: url(images/ic_plus_outline_white.svg);
	background-size: 56px 56px;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 2;
	padding: 0;
	margin: 0;
	cursor: pointer;
	opacity: 0;
}

.grid-item:hover .member_overlay, .grid-item:active .member_overlay {
	opacity: 1;
}

/* team */
.bg_overlay_white {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	z-index: 99;
	opacity: 0.9;
	background: #fff;
	display: none;
}

.team_popup {
	position: fixed;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: 0;
	margin: 0;
	overflow-y: scroll;
	-ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
	background-color: #d0cac9;
	display: none;
}

.team_popup_scroll {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	overflow: auto;
	padding: 60px 20px 100px 20px;
	margin: 0;
	background-color: transparent
}

.team_popup.bg_color_light, .team_popup.bg_color_light h1, .team_popup.bg_color_light .item_category, .team_popup.bg_color_light .team_popup_content, .team_popup.bg_color_light .team_popup_content p { color: #1e322d !important; }
.team_popup.bg_color_dark, .team_popup.bg_color_dark h1, .team_popup.bg_color_dark .item_category, .team_popup.bg_color_dark .team_popup_content, .team_popup.bg_color_dark .team_popup_content p  { color: #fff !important; }

.team_popup_close, .search_popup_close {
	float: right;
	width: 56px;
	height: 56px;
	padding: 0;
	margin: 0 0 20px 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(images/ic_close_white.svg);
	cursor: pointer;
}

.search_popup_close {
	position: absolute;
	top: 40px;
	right: 60px;
}

.team_popup_close {	margin-top: -30px;}
.team_popup_close:hover { opacity: 0.5; }
.team_popup.bg_color_light .team_popup_close, .team_popup .team_popup_close  {	background-image: url(images/ic_close_dark.svg); }
.team_popup.bg_color_dark .team_popup_close {	background-image: url(images/ic_close_white.svg); }

.team_popup_content {
	float: left;
	padding: 20px 0 30px 0;
	font-size: 20px;
}

.team_popup_content ul {
	padding: 20px 0 20px 0;
	margin: 0;
	list-style: none;
	background: transparent;
}

.team_popup_content li {
	padding: 0;
	margin: 0;
	list-style: none;
	background: transparent;
}

ul.project_list {
	float: left;
	padding: 10px 0 10px 0 !important;
	margin: 0;
	width: 100%;
	font-size: 20px;
	font-weight: normal;
	font-stretch: normal;
	font-style: normal;
	line-height: 2;
	letter-spacing: normal;
	text-align: left;
	list-style: none;
}

ul.project_list a:link, ul.project_list a:visited {
	text-decoration: none;
}

ul.project_list li {
	list-style: none !important;
	padding: 0;
	background: transparent;
}

a.icon:link, a.icon:visited {
 float: left;
 width: 40px;
 height: 40px;
 background-color: transparent;
 background-repeat: no-repeat;
 background-size: 40px 40px;
 background-position: center;
 text-decoration: none;
 border-radius: 50%;
 padding: 0;
 margin: 0 10px 0 0;
}

a.icon:hover,  a.icon:active {
 opacity: 0.5;
}

a.icon.email { background-image: url(images/ic_email.svg); }
a.icon.linkedin { background-image: url(images/ic_linkedin.svg); }
a.icon.pint { background-image: url(images/ic_pint.svg); }
/* dark bg color */
.bg_color_dark a.icon.email { background-image: url(images/ic_email_white.svg); }
.bg_color_dark a.icon.linkedin { background-image: url(images/ic_linkedin_white.svg); }
.bg_color_dark a.icon.pint { background-image: url(images/ic_pint_white.svg); }

.bg_color_dark h1, .bg_color_dark h2,.bg_color_dark h3, .bg_color_dark h4, .bg_color_dark h5, .bg_color_dark h6, .bg_color_dark p { color: #fff; }

/* 3 columns at medium size */
@media (min-width: 768px) {
  .grid-col:nth-child(2) {  display: block; }
	.grid-item2, .grid-item4 { margin-top: 0 !important; }
	.grid-item2 {margin-top: 12vw !important; }
  /* show column 2 */
}

/* 4 columns at large size */
@media (min-width: 1080px) {
  .grid-col:nth-child(3) { display: block; }
	.grid-item2, .grid-item4 { margin-top: 8vw !important; }
  /* show column 3 */
}

/* Quote */
.quote_thumbnail {
	width: 75px;
	height: 75px;
	clear: both;
	border-radius: 50%;
}

.col_content_centered.quote h1 {}

/* jobs */
a.job_link:link, a.job_link:visited {
	float: left;
	width: calc(100% - 50px);
	padding: 10px 50px 10px 0;
	margin: 0;
	font-family: "indivisible-variable";
	text-decoration: none;
	font-size: 1.2em;
	line-height: 1;
	font-variation-settings: "wght" 600;
	letter-spacing: -0.96px;
	color: #1e322d;
	background-image: url(images/next.svg);
	background-repeat: no-repeat;
	background-position: 100%;
	background-size: 24px 24px;
}

a.job_link:hover, a.job_link:active {
	opacity: 0.5;
}

a.job_link img { margin: 0 0 -3px 20px; }

.job_employment {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0 0 40px 0;
}

/* questions */
.questions_wrap, .career_wrap {
	float: left;
	padding: 24px;
	margin: 0;
	width: calc( 100% - 48px);
	border-radius: 16px;
	font-size: 20px;
	line-height: 1.4;
	text-align: left;
	color: #1e322d;
	background-color: #f7f7f7;
}

.thumbnail_image {
	float: left;
	width: 100px;
	height: 100px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	background-color: #fff;
}

.thumbnail_image img {
	border-radius: 50%;
}

.questions_details, .career_details {
	float: left;
	padding: 0;
	margin: 20px 0 0 20px;
	background-color: transparent;
	width: calc(100% - 120px);
}

.questions_title, .career_title {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: "indivisible-variable", sans-serif;
	font-variation-settings: "wght" 500;
	font-size: 24px;
	line-height: 1.33;
	text-align: left;
	color: #1e322d;
}

.questions_name {
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* video */
.video-wrapper {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none;
   overflow: hidden;
}
.video-wrapper iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: calc(177.77vh + 20px); /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%) scale(1.05);
}

iframe.bg_video {
	position: absolute;
	z-index: 0;
	min-width: 100vw;
	margin: 0 !important;
	padding: 0 !important;
	background-color: transparent;
  top: -20vh !important;
  left: 0 !important;
  width: auto;
	min-height: 140vh !important;
}

#okra_video, #okra_video_mobile {
  position: absolute;
	z-index: 1;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
	padding: 0;
	margin: 0;
	object-fit: cover;
}

#okra_video_mobile {
	width: calc(100vw + 40px) !important;
	height: calc(100vh + 50px) !important;
}

.video_overlay {
	position: relative;
	z-index: 2;
}

*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}

/* Old shadow dom for play button */

*::-webkit-media-controls-play-button {
  display: none!important;
  -webkit-appearance: none;
}

/* New shadow dom for play button */

/* This one works! */

*::-webkit-media-controls-start-playback-button {
  display: none!important;
  -webkit-appearance: none;
}

video::-webkit-media-controls-start-playback-button {
  display: none !important;
}

/* footer */
.footer_wrap {
	padding-top: 80px;
	padding-bottom: 60px;
	background-color: transparent;
}

/* footer links */
.footer_wrap a:link, .footer_wrap a:visited { color: #fff; text-decoration: none; }
.footer_wrap a:hover, .footer_wrap a:active { opacity: 0.5; }

/* footer logo */
a.footer_logo:link, a.footer_logo:visited { float: left; cursor: pointer; width: 100%;}
a.footer_logo:hover, a.footer_logo:active { }

.footer_content {
	float: left;
	text-align: left;
	padding: 20px 0;
	margin: 0;
	font-size: 16px !important;
	letter-spacing: 1.5px;
	color: #fff;
	width: auto;
}

.footer_content h3 {
	font-size: 12px !important;
	line-height: 30px;
	text-transform: none;
	padding: 0 0 10px 0;
	font-family: "Bryant";
	font-weight: normal;
	color: #758a89;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-weight: 500;
	margin: 0;
}

.footer_content .textwidget {
	float: left;
	line-height: 2;
	padding: 0 0 0 0;
	margin: 0;
}

.footer_content .textwidget p {
	padding: 0 0 8px 0;
}

.footer_content ul {
	float: left;
	background: transparent;
	line-height: 2.5;
	padding: 0 0 20px 0;
	margin: 0
}

.footer_content ul li {
		background: transparent;
		padding: 0;
}

.footer_content a {
	color: #fff;
	text-decoration: none;
}

.footer_bottom, .footer_bottom a {
	font-size: 12px;
	color: #fff !important;
	text-decoration: none;
}

/* general helper classes */
.transition {
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.wrapper_relative {
	position: relative;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
}

.wrapper_absolute {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.centered {
	position: relative;
	margin: 0 auto;
	text-align: center;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

.centered img {
	float: none;
	display: block;
	position: relative;
	text-align: center;
	margin: 0 25%;
}

/* font and colors  */
.font_size_small { font-size: 18px !important; }
.font_size_20 { font-size: 20px !important; }
.font_variation_bold { font-variation-settings: "wght" 500; }
.font_weight_500 { font-weight: 500; font-variation-settings: "wght" 500; }
.font_weight_600 { font-weight: 600; font-variation-settings: "wght" 500; }
.font_opacity { opacity: 0.6; }
.line-height_1-8 { line-height: 1.8; }
.color_white { color: #fff !important; }
.color_grey { color: #a6a6a6 !important; }
.color_lightgreen { color: #758a89 !important; }
.color_white h1, .color_white h2, .color_white h3, .color_white h4, .color_white h5, .color_white h6 { color: #fff !important; }
.color_black { color: #000; }

/* background colors */
.bg_transparent { background-color: transparent !important; }
.bg_white { background-color: #fff; }
.bg_color_light { background-color: #d0cac9 !important; }
.bg_color_grey { background-color: #bbbab8 !important; }
.bg_color_dark { background-color: #1e322d !important; }

/* for test purposes only */
.bg_red { background-color: red !important;  }
.bg_orange { background-color: orange !important; }
.bg_green { background-color: green !important; }
.bg_blue { background-color: lightblue !important; }
.bg_blue_transparent { background-color: rgba(135, 206, 250, 0.5); }

/* borders */
.border_top { border-top: 1px solid #58595b; }
.border_bottom { border-bottom: 1px solid #58595b; }
.border_bottom_opacity { border-bottom: 1px solid rgba(30, 50, 45, 0.1); }
.bg_color_light .border_top { border-top: 1px solid #ada8a7; }
.border_top_light { border-top: 1px solid #cacacc; }
.border_bottom_light { border-bottom: 1px solid #cacacc; }

/* widths */
.width_full { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; }
.max_width_70 { max-width: 70%; }
.max_width_40 { max-width: 40%; }

/* heights  */
.min_height { min-height: 100px; }
.min_height_vh { min-height: 100vh; }
.max_height_20vw { height: 20vw; }
.height_full { height: 100%; }
.height_link { height: 150px; }
.height_description { height: 200px; }
.height_image_s { height: 420px; }
.height_image_news { height: 500px;  }
.height_image_m { height: 600px; }
.height_image_l { height: 800px; }
.height_image_featured { height: 40vw; }
.height_image_square { height: calc(32vw - 50px); }
.height_image_landscape { aspect-ratio: 16/9; }
.height_aspect_square { height: calc(50vw - 120px); }
.height_aspect_square_small { height: calc(25vw - 60px); }
.height_aspect_link_default { height: calc(32vw + 60px); }
.height_aspect_link_title { height: calc(32vw + 60px); }
.height_aspect_square_link { height: calc(50vw - 10px); }
.height_aspect_square_link_title { height: calc(50vw + 60px); }
.basic_ratio { aspect-ratio: 16/8; }

/* spacing */
.margin_top_min { margin-top: -15vh !important; }
.margin_top_min_30 { margin-top: -30px; }
.margin_top { margin-top: 60px; }
.margin_bottom { margin-bottom: 60px; }
.margin_bottom_min_25 { margin-bottom: -25px; }
.margin_none { margin: 0; }
.padding_top_none { padding-top: 0 !important; }
.padding_bottom_none { padding-bottom: 0 !important; }
.padding_left_none { padding-left: 0; }
.padding_right_none { padding-right: 0; }
.padding_full { padding: 40px; }
.padding_full_m { padding: 60px; }
.padding_top_xs { padding-top: 10px; }
.padding_top_s { padding-top: 25px; }
.padding_top { padding-top: 60px; }
.padding_top_m { padding-top: 90px; }
.padding_top_l { padding-top: 120px; }
.padding_top_xl { padding-top: 160px; }
.padding_top_relative { padding-top: 11.5vw; }
.padding_bottom_xs { padding-bottom: 5px; }
.padding_bottom_s { padding-bottom: 25px; }
.padding_bottom { padding-bottom: 60px; }
.padding_bottom_m { padding-bottom: 90px; }
.padding_bottom_l { padding-bottom: 120px; }
.padding_sides_large { padding-left: 250px; padding-right: 250px; }
.padding_left_s { padding-left: 20px; }
.padding_left { padding-left: 60px; }
.padding_left_m { padding-left: 90px; }
.padding_left_l { padding-left: 120px; }
.padding_right { padding-right: 60px; }
.padding_right_m { padding-right: 90px; }
.padding_right_l { padding-right: 120px; }

/* placement */
.z-index-1 { position: relative; z-index: 1; }
.no-scroll {  position: fixed; }

/* spacing divs */
.space {
	clear: both;
	float: left;
	width: 100%;
	padding: 0;
	margin: 0;
	height: 40px;
}

.space.small { height: 20px; }
.space.medium { height: 40px; }
.space.large { height: 80px; }
.space.xl { height: 160px; }

.cleardiv {
	float: none;
	clear: both;
	width: 100%;
	padding: 0;
	margin: 0;
	height: 0;
}

.text_align_center_vertical_wrap { }
.text_align_center_vertical { margin: 15% 0; }
.overflow_hidden { overflow: hidden; }
.display_inline { float: none !important; display: inline !important; }
.inline_block { display: inline-block; }
.nospace { padding: 0 !important; margin: 0 !important; }
.hidden { visibility: hidden !important; display: none !important; height: 0 !important; width: 0 !important; }
.otgs-development-site-front-end { visibility: hidden !important; display: none !important; height: 0 !important; width: 0 !important; }


@keyframes okra-rotating{
	from {
		rotate: 360deg;
	}
	to {
		rotate: 0deg;
	}
}

.okra-rotating-container{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
	position: absolute;
	top: 120px;
	left: 10px;
	z-index: 2;
}

.okra-rotating-logo{
	width: 200px;
	height: 200px;
	animation-name: okra-rotating;
	animation-duration: 30s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	background-image: url("images/spinning/the past and future of creating positive impact.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 250px 250px;
}

.okra-rotating-not{
	position: absolute;
	width: 100px;
	height: 100px;
	top: 50px;
	right: 50px;
	background-image: url("images/spinning/30 Years OKRA.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100px 100px;
}

@media only screen and (max-width: 1258px) {
	.header_payoff_wrap{
		top: 42vh !important;
	}
	.okra-rotating-container{
		left: 22.5%;
		top: 12%;
	}

	.header_payoff_subtitle{
		margin: 0 9% !important;
	}
}