/*

Theme Name: evanonearthone

Theme URI: https://nancyjoiacoi.com

Author: Evan Deterling

Author URI: https://www.evanonearth.net

Description: A custom responsive portfolio theme built from bespoke HTML

Version: 1.0

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Tags: custom-theme, photography, portfolio

Text Domain: evanonearthone

*/


/* — Add all your existing CSS code below this line — */

/* FONTS */
	
	/* HELDANE */
	
	@font-face{
	font-family: 'Heldane Text';
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/heldane/heldane-text-regular.woff2') format('woff2'),
		url('assets/fonts/heldane/heldane-text-regular.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Heldane Display';
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/heldane/heldane-display-bold.woff2') format('woff2'),
		url('assets/fonts/heldane/heldane-display-bold.otf') format('opentype');
	}
	
		/* LYON DISPLAY LIGHT */
		
	@font-face{
	font-family: 'Lyon Display Light';
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Lyon/LyonDisplay-Light-Web.woff2') format('woff2');
	}
	
		/* NEWSAM */
		
	@font-face{
	font-family: 'Newsam';
	font-weight: 100;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-Thin.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-Thin.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Newsam';
	font-weight: 200;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-Light.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-Light.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Newsam';
	font-weight: 200;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-Light.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-Light.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Newsam';
	font-weight: 300;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-Book.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-Book.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Newsam';
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-Regular.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-Regular.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Newsam';
	font-weight: 500;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-Medium.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-Medium.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Newsam';
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-SemiBold.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-SemiBold.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Newsam';
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-Bold.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-Bold.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Newsam';
	font-weight: 800;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-ExtraBold.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-ExtraBold.otf') format('opentype');
	}
	
	@font-face{
	font-family: 'Newsam';
	font-weight: 900;
	font-style: normal;
	font-stretch: normal;
	src: url('assets/fonts/Newsam/Newsam-UltraBold.woff2') format('woff2'),
		url('assets/fonts/Newsam/Newsam-UltraBold.otf') format('opentype');
	}

	
/* FONT SMOOTHING */

    html {
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     font-smoothing: antialiased;
    }
    
    @-moz-document url-prefix() {
        body {
            font-weight: lighter !important;
        }
    }

/* WORDPRESS OVERRIDES */

html {
	margin-top: 0 !important;
} 

p {
margin-block-end: 0;
margin-block-start: 0;
}
    
* {
	box-sizing: border-box;
}

body {
	-webkit-text-size-adjust: none;
	margin: 0;
}
	
a {
	color: inherit;
    text-decoration: none;
}
	
a:hover {
    color: var(--rules-dark-grey);
    text-decoration: none;
}
	
ul, li {
	text-decoration: none;
	list-style-type: none;
}

:root {

	--black-color: #1c1f3a;
	--dark-grey: #434343;
	--rules-light-grey: #c9c9c9;
	--rules-dark-grey: #545454;
	--rules-med-grey: #a1a1a1;
  	--menu-active-color: #ff5f00;
  	--primary-bg-color: #f5f4f3;
  	--intro-panel-bg-color: #d7d5ff;
  	--intro-panel-line-color: #b1b3bb;
  	--intro-panel-highlight: #ff5f00;
  	--contact-panel-bg-color: #9eccf0;
  	--about-panel-bg-color: #d7d5ff;
	--subgallery-rule-color: #d9d8d3;
}

.reveal {
	opacity: 1 !important;
	transition: opacity .5s;
}

/* HEADER */

header {
	position: fixed;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
    top: 15px;
    height: 66px;
    border-bottom: 1px solid var(--rules-light-grey);
    transition: top .5s;
    z-index: 9999; 
}

#header-top-opaque {
	position: fixed;
	top: 0;
	height: 81px;
	background-color: #fff;
	z-index: 0;
	opacity: 0;
	transition: opacity .5s;
	border-bottom: 1px solid var(--rules-light-grey);
}

header, 
#header-top-opaque {
	left: 70px;
    width: calc(100vw - 140px);
}

.nav-top-banner-mode {
	display: none;
}

#header-title-cont {
	position: relative;
    height: 50px;
    padding: 16px 30px 10px;
    text-align: left;
    background-color: #fff;
    border-radius: 10px;
    opacity: 1;
    transition: opacity .5s;
    margin-left: 8px;
}

.header-title-text {
	position: relative;
    font-family: "Heldane Display", serif;
    font-weight: 700;
    font-size: 31px;
    color: var(--black-color);
    letter-spacing: -.7px;
    line-height: 20px;
    font-feature-settings: "ss01" 1;
}

/*
.header-title-text {
	position: relative;
    font-family: "Lyon Text Bold", serif;
    font-size: 31px;
    color: var(--black-color);
    letter-spacing: -.7px;
    line-height: 24px;
}
*/

#header-title-2-cont {
	position: relative;
    height: 50px;
    margin-left: 14px;
    padding: 15px 30px 10px;
    text-align: left;
    background-color: transparent;
    border-radius: 25px;
    overflow: hidden;
    opacity: 1;
    transition: opacity .5s;
    z-index: 0;
}

#header-title-2-cont-casestudy {
	position: fixed;
	top: 15px;
	left: 324px;
	height: 50px;
    padding: 16px 30px 10px;
    text-align: left;
    background: #fff;
    border-radius: 25px;
    transition: top .5s;
	z-index: 999;
}

#header-title-2-cont-hover {
	position: absolute;
	top: 0;
	left: 250px;
	height: 50px;
    padding: 16px 30px 10px;
    text-align: left;
    background: #fff;
    border-radius: 25px;
	display: none;
	z-index: 1;
}

#header-title-2-cont.hover-active {
  opacity: 0;
}

#header-title-cont:after {
	content: "";
	position: absolute;
	top: 6px;
	right: -8px;
	height: 40px;
	width: 1px;
	background-color: red;
}

.header-title-2-text,
.header-title-2-text-cs {
	position: relative;
	top: 0;
    font-family: "Heldane Text", sans-serif;
    font-weight: 400;
    font-size: 31px;
    color: var(--black-color);
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
    z-index: 1;
}

.header-title-2-text-hover,
.header-title-2-text-cs {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;            
	display: none;
	white-space: nowrap;
}

#header-title-2-tint {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	opacity: 1;
	z-index: 0;
}

#menu-icon-cont {
	position: fixed;
    top: 10px;
    right: 75px;
    height: 60px;
    width: 60px;
    padding: 0;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    transition: right .3s;
    border: 1px solid #c9c9c9;
    z-index: 9999;
}

.nav-icon-banner-mode {
	right: 75% !important;
	transform: translateX(30px);
	transition: right .5s;
}

.menu-icon-active {
	border: none !important;
}

.hide-header {
	transition: top .3s;
}

.header-rule-wht {
	border-bottom: 1px solid #fff !important;
}

/* MENU */

#menu-container {
	position: absolute;
    top: 66px;
    left: 0;
    width: 100%;
    background-color: #fff;
    display: none;
    border-bottom: 8px solid var(--black-color);
    padding: 20px 0 30px 10px;
}

.menu-container-banner-mode {
	width: calc(50% - 30px) !important;
}

.hide {
	display: none;
}

.invisible {
	visibility: hidden;
}

.hide-fade {
	opacity: 0 !important;
	transition: opacity .5s;
}

nav {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	margin-top: 10px;
	width: 100%;
}

.nav-banner-mode {
	justify-content: center !important;
	margin-top: -30px;
	height: calc(100vh - 132px);
}

nav ul {
	position: relative;
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
	background: transparent;
	margin: 0;
	padding: 0;	
}

nav li {
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
	top: 0;
	left:0;
	padding: 0;
    height: 50px;
    border-radius: 25px 25px 5px 5px;
    background-color: var(--primary-bg-color);
    margin: 3px;
    font-family: "Heldane Text", sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--black-color);
    letter-spacing: .2px;
    line-height: 2px;
    transition: background-color .5s;
}

nav li > a {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 26px;
}

.aboutme {background-color: var(--about-panel-bg-color);}

li > a:hover {
	color: #fff;
} 

nav li:hover,
#menuitem-about:hover {
	background-color: var(--menu-active-color);
	color: #fff;
	transition: background-color .5s;
}

/* Menu Order */

#menuitem-1 {order: 1}
#menuitem-2 {order: 2}
#menuitem-3 {order: 3}
#menuitem-4 {order: 4}
#menuitem-5 {order: 5}
#menuitem-6 {order: 6}
#menuitem-7 {order: 7}
#menuitem-8 {order: 8}
#menuitem-9 {order: 9}
#menuitem-10 {order: 10}
#menuitem-11 {order: 11}
#menuitem-12 {order: 12}
#menuitem-13 {order: 13}
#menuitem-14 {order: 14}
#menuitem-15 {order: 15}
#menuitem-16 {order: 16}
#menuitem-about {order: 99}

/* HEADER MENU ICON */

#hamburger-mbl {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    z-index: 9999;
}

.c-hamburger-mbl {
	display: block;
	position: relative;
	left: 0px;
	overflow: hidden;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: 0;
	text-indent: -9999px;
	appearance: none;
	box-shadow: none;
	border-radius: none;
	border: none;
	cursor: pointer;
	transition: background 0.3s;
	background: transparent;
}

.c-hamburger-mbl:focus {
  outline: none;
}

.c-hamburger-mbl span {
  	display: block;
    position: absolute;
    top: 29px;
    left: 17px;
    right: 18px;
    height: 2px;
    background-color: #fff;
}

.c-hamburger-mbl span::before,
.c-hamburger-mbl span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--dark-grey);
  content: "";
}

.c-hamburger-mbl span::before {
  top: -4px;
}

.c-hamburger-mbl span::after {
  bottom: -4px;
}

.c-hamburger-mbl--htx span {
  transition: background 0s 0.3s;
}

.c-hamburger-mbl--htx span::before,
.c-hamburger-mbl--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger-mbl--htx span::before {
  transition-property: top, transform;
}

.c-hamburger-mbl--htx span::after {
  transition-property: bottom, transform;
}

.c-hamburger-mbl--htx {
    background-color: transparent;
}

/* active state, i.e. menu open */

.c-hamburger-mbl--htx.is-active {
  background: var(--menu-active-color);
  border: none;
}

.c-hamburger-mbl--htx.is-active span {
  background: none;
  top: 30px;
}

.c-hamburger-mbl--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
  background-color: #fff;
}

.c-hamburger-mbl--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
  background-color: #fff;
}

.c-hamburger-mbl--htx.is-active span::before,
.c-hamburger-mbl--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}

/* PAGE CONTENT */

#navigationcontainer {
	position: absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 136px;
	z-index: 9999;
}

section {
	position: relative;
	width: 100vw;
}

#banner-section {
	width: 100vw;
	height: 100vh;	
}

#banner-cont {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#title-wrapper {
	order: 1;
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	top: 0;
	width: 50%;
	height: 100%;
}

#title-cont {
	position: relative;
    display: flex;
    flex-flow: row nowrap;
}
#title-left, #title-right {
	position: relative;
	flex-flow: column nowrap;
}

#title-left {
	order:1;
	text-align: right;
	padding-right: 10px;
	padding-top: 1px;
    border-right: 1px solid var(--menu-active-color);
}

#title-right {
	order:2;
	text-align: left;
	padding-left: 10px;
}

.title {
	position: relative;
	display: block;
	font-family: "Heldane Display", serif;
	font-weight: 700;
    font-size: 45px;
    color: var(--black-color);
    letter-spacing: -.2px;
    line-height: 40.3px;
}

.title-1 {
	order:1;
}

.title-1 {
	order:2;
}

.title-1 {
	order:3;
}

.subtitle {
	position: relative;
	display: block;
	font-family: "Lyon Display Light", "Heldane Text", serif;
    font-size: 42.5px;
    color: var(--black-color);
    letter-spacing: -.5px;
    line-height: 40px;
}
/*
.subtitle {
    position: relative;
    display: block;
    font-family: "Face Light", "Lyon Display Light", "Heldane Text", serif;
    font-size: 36.5px;
    color: var(--black-color);
    letter-spacing: -.5px;
    line-height: 42px;
    margin-top: -5px;
}
*/
.subtitle-1 {
	order:1;
}

.subtitle-1 {
	order:2;
}

.subtitle-1 {
	order:3;
}
					
#carousel-wrapper {
	order: 2;
	position: relative;
	top: 0;
	width: 50%;
	height: 100%;
}

#banner-carousel {
	position: absolute;
	background-position: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f3f3f3;
	z-index: 1;
}

#blur-screen,
#blur-screen-menu {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background-color: transparent;
	opacity: 0;
	z-index: 99;
}

#blur-screen-menu {
	z-index: 100;
	transition: opacity .5s;
}

.blur-screen-active {
	animation-name: fade-in-out, blur-transition; 
	animation-duration: 3s, 3s; 
	animation-delay: 1.7s, 1.7s; 
	animation-timing-function: ease-in-out, ease-in-out;
	animation-fill-mode: forwards, forwards;
	animation-iteration-count: infinite, infinite;
}

.blur-screen-freeze {
	opacity: 1 !important;
	transition: opacity .5s;
}

#vf-outer-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 50%;
	width: 50vh;
	border: 1px solid var(--rules-light-grey);
	border-radius: 50%;
	background-color: #fff;
	opacity: .2;
	z-index: 1;
}

#vf-inner-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 20%;
	width: 20vh;
	border: 1px solid var(--rules-light-grey);
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;	
}

.vf-split {
	position: absolute;
	left: -5%;
	width: 110%;
	height: 55%;
	border: 1px solid var(--rules-light-grey);
}

#vf-upper {
	top: -5%;
	background: transparent;
}

#vf-lower {
	bottom: -5%;
	background: #fff;
	opacity: .4;
}

.vf-bracket {
	position: absolute;
	width: 10vw;
	height: 10vw;
	z-index: 50;
	display: none;
}

#vf-bracket-ul {
	top: 40px;
	left: 40px;
	border-radius: 20% 0 0 0;
	border-top: 1px solid var(--rules-light-grey);
	border-left: 1px solid var(--rules-light-grey);
}

#vf-bracket-ur {
	top: 40px;
	right: 40px;
	border-radius: 0 20% 0 0;
	border-top: 1px solid var(--rules-light-grey);
	border-right: 1px solid var(--rules-light-grey);
}

#vf-bracket-lr {
	bottom: 40px;
	right: 40px;
	border-radius: 0 0 20% 0;
	border-bottom: 1px solid var(--rules-light-grey);
	border-right: 1px solid var(--rules-light-grey);
}

#vf-bracket-ll {
	bottom: 40px;
	left: 40px;
	border-radius: 0 0 0 20%;
	border-bottom: 1px solid var(--rules-light-grey);
	border-left: 1px solid var(--rules-light-grey);
}

.scroll-down-icon {
	position: absolute;
    bottom: 17px;
    left: 25%;
    width: 60px;
    height: 60px;
    background-color: transparent;
    transform: translateX(-30px);
    border: 1px solid var(--rules-light-grey);
    border-radius: 50%;
    z-index: 8888;
}

.scroll-down-icon svg {
	position: absolute;
    top: 14px;
    left: 14px;
    width: 29px;
    height: auto;
}

.st0 {
	fill: --var(black-color);
}

#scroll-down-icon a {
	display: block;
	width: 100%;
	height: 100%;
}

/* INTRO PANEL */

#intro {
	background-color: var(--intro-panel-bg-color);
	overflow: hidden;
	min-height: 100vh;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.panel-cont {
	position: relative;
	width: calc(100% - 140px);
}

.case-studies-rubric {
	border-bottom: 8px solid var(--subgallery-rule-color);
    margin-bottom: 10px;
} 

#intro .panel-cont {
	border-top: 1px solid var(--rules-med-grey);
}

#intro-panel-text-cont {
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
	height: 100%;
	margin: 5vw auto;
	padding: 5vw 0;
	border-top: 1px solid var(--rules-med-grey);
	border-bottom: 1px solid var(--rules-med-grey);
}

.panel-cont-rubrik,
.panel-cont-rubrik.subrubric {
    position: absolute;
    top: -1px;
    left: 50%;
    padding: 0 10px 2px;
    border-left: 1px solid var(--rules-light-grey);
    border-bottom: 1px solid var(--rules-light-grey);
    border-right: 1px solid var(--rules-light-grey);
    border-radius: 0 0 8px 8px;
    transform: translate(-50%);
    font-family: "Newsam", sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--black-color);
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 18px;
	white-space: nowrap;
    z-index: 1;
}

.panel-cont-rubrik.subrubric:after {
	content: "";
	position:absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 4px;
	background-color: var(--primary-bg-color);
	z-index: 2;
}

.panel-cont-rubrik.subrubric {
    top: -21px;
    border-bottom: none;
    border-top: 1px solid var(--rules-light-grey);
    border-radius: 8px 8px 0 0;
	padding: 2px 10px 0;
}

#rubrik-intro {
	background-color: var(--intro-panel-bg-color);
	border-left: 1px solid var(--rules-med-grey);
    border-bottom: 1px solid var(--rules-med-grey);
    border-right: 1px solid var(--rules-med-grey);
}

#intro-panel-left {
	order: 1;
    position: relative;
    width: 70%;
    height: 100%;
    padding-right: 11%;
    padding-left: 0;
    margin-left: -2vw;
    opacity: 0;
    z-index: 2;
}

#intro-panel-right {
	order: 2;
	align-self: flex-end;
    position: relative;
    width: 40%;
    height: 100%;
    padding-left: 1%;
    padding-right: 2%;
    margin-bottom: 1vw;
    opacity: 1;
}

#intro-panel-right:before {
	content: "";
	position: absolute;
	top: 0;
	left: -3vw;
	height: 100%;
	width: 10px;
	border-left: 1px solid var(--rules-med-grey);
	z-index: 1;
}

.intro-text-lead {
	font-family: "Lyon Display Light", serif;
	font-size: 4.5vw;
    color: var(--black-color);
    line-height: 1;
    letter-spacing: -.03vw;
}

#intro-rag-shape {
    float: left;
    width: 12vw;
    height: 32vw;
    shape-outside: polygon(80% 0, 0% 27%, 56% 42%, 18% 73%, 2% 46%, 63% 100%, 0 100%, 0 0);
    float: left;
}

.intro-text-follow {
	position: relative;
	font-family: "Heldane Text", serif;
	font-weight: 400; 
	font-size: 50px;
    color: var(--black-color);
    letter-spacing: -.2px;
    line-height: 50px;
    padding-right: 1vw;
    opacity: 0;
    z-index: 2;
}

#intro-divider-cont {
	position: absolute;
    top: 50%;
    left: calc(0vw - (3vw + 30px));
    height: 60px;
    width: 60px;
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0;
    z-index: 1;
}

#intro-divider {
	position: relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 50%;
    background-color: var(--intro-panel-bg-color);
    border: 1px solid var(--rules-dark-grey);
    z-index: 1;
}

#heart-icon {
	position: absolute;
	top: 50%;
    left: 14px;
    height: 30px;
    width: 30px;
    transform: translateY(-50%);
    margin-top: 1px;
}

.intro-radial {
	position: absolute;
    width: 1px;
    height: 88vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-left: 1px dotted var(--intro-panel-line-color);
    margin-left: -1px;
    z-index: 0;
}

#radial-1 {transform: translate(-50%, -50%); display: none;}

#radial-2 {transform: translate(-50%, -50%) rotate(15deg);}

#radial-3 {transform: translate(-50%, -50%) rotate(30deg);}

#radial-4 {transform: translate(-50%, -50%) rotate(45deg);}

#radial-5 {transform: translate(-50%, -50%) rotate(60deg);}

#radial-6 {transform: translate(-50%, -50%) rotate(75deg);}

#radial-7 {transform: translate(-50%, -50%) rotate(90deg);}

#radial-8 {transform: translate(-50%, -50%) rotate(105deg);}

#radial-9 {transform: translate(-50%, -50%) rotate(120deg);}

#radial-10 {transform: translate(-50%, -50%) rotate(135deg);}

#radial-11 {transform: translate(-50%, -50%) rotate(150deg);}

#radial-12 {transform: translate(-50%, -50%) rotate(165deg);}

 .parenthesis {
 	fill: var(--intro-panel-highlight);
 }
 
 .heart {
 	fill: var(--intro-panel-highlight);
 }
 
 /* LOGO CRAWL SECTION */

.logo-carousel-wrapper {
	position: relative;
 	display: flex;
 	flex-flow: row nowrap;
 	align-items: center;
 	overflow: hidden;
 	height: 10vw;
 	min-height: 100px;
 	padding: 60px 0;
 	background: #fff;
 	white-space: nowrap;
 	opacity: .6;
}
 
 #logos-wrapper {}
 
 .logos-container {
 	position: relative;
 	display: flex;
 	flex-flow: row nowrap;
 	align-items: center;
 	overflow: hidden;
 	height: 10vw;
 	min-height: 100px;
 	padding: 60px 0;
 	background: #fff;
 	white-space: nowrap;
 	opacity: .6;
 }
 
 .logos {
 	display: inline-flex;
 	align-items: center;
 	animation: 50s slideEffect infinite linear;
 	margin: 0 143px;	
 }
 .logos img {
 	max-width: 100px;
 	margin: 8vw;
 }

/* TEMP CASE STUDY BANNER FIX */

.panel-cont.case-study-cont  {
	width: 100% !important;
}
 
/* CASE STUDY BANNERS */

#case-studies-wrapper {
	background-color: var(--primary-bg-color);
	display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
	overflow: hidden;
}

.case-studies-cont {
	display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
	margin: 0 auto;
    padding: 0;
    background-color: var(--primary-bg-color);
}

#rubrik-case-studies {
	background-color: #fff;
}

.case-studies-rubric {
	padding: 0 0 62px;
}

.rubric-cont {
	position: relative;
	width: calc(100% - 140px);
	margin: 0 auto;
	padding-bottom: 52px;
	border-top: 1px solid var(--rules-light-grey);
	background-color: var(--primary-bg-color);
}

.case-study-cont {
	position: relative;
	top: 25vh;
	display: flex;
    flex-flow: row nowrap;
    align-items: center;
	width: 100%;
	height: 43vw;
	margin-bottom: 70px;
	background-color: #fff;
	transition: border .5s;
	cursor: pointer;
	opacity: 0; 	
}

.case-study-cont:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -35px;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid var(--rules-light-grey);
	margin-top: -1px;
}

.case-study-clickfield {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0);
	background-color: transparent;
	z-index: 10;
}
.case-study-clickfield a {
	display: block;
	width: 100%;
	height: 100%;
}

.case-study-text-cont,
.case-study-text-img {
	position: relative;
	height: 100%;
	background-color: #fff;
}

.case-study-text-img {
	display: inline-flex;
	flex: 0 0 auto;
	width: auto;
	background-color: var(--intro-panel-bg-color);
}

.case-study-text-img img {
	position: relative;
    height: 100%;
    width: auto;
    display: block;
}

.case-study-text-cont {
	display: flex;
	flex: 1 1 auto; 
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
}

.case-study-cont.cs-img-r:has(.cs-title:hover):hover,
.case-study-cont.cs-img-r:has(.cs-subtitle:hover):hover {
	border-left: 8px solid var(--menu-active-color);
	transition: border .5s;
}

.case-study-cont.cs-img-l:has(.cs-title:hover):hover,
.case-study-cont.cs-img-l:has(.cs-subtitle:hover):hover {
	border-right: 8px solid var(--menu-active-color);
	transition: border .5s;
}

.case-study-cont.cs-img-r:has(.cs-title:hover):hover .cs-title-rubrik:after,
.case-study-cont.cs-img-l:has(.cs-title:hover):hover .cs-title-rubrik:after,
.case-study-cont.cs-img-r:has(.cs-subtitle:hover):hover .cs-title-rubrik:after,
.case-study-cont.cs-img-l:has(.cs-subtitle:hover):hover .cs-title-rubrik:after {
	opacity: 1;
	transition: opacity .5s; 	
}

.cs-title {
	order: 1;
	position: relative;
	font-family: "Heldane Text", serif;
	font-weight: 400;
	font-size: 34px;
	letter-spacing: 0px;
	color: var(--black-color);
	margin: 32px 0;	
}

.cs-title-rubrik {
	position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border: 2px solid var(--menu-active-color);
    border-radius: 50%;
    overflow: hidden;
}

.cs-title-rubrik:before {
	content: "";
	position: absolute;
	top: 9px;
	left: 0;
	width: 100%;
	height: 1px;
	background-color: var(--menu-active-color); 
}

.cs-title-rubrik:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 10px;
	background-color: var(--menu-active-color);
	opacity: 0;
	transition: opacity .5s; 
}

.cs-subtitle {
	order: 2;
    position: relative;
    font-family: "Newsam", sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--black-color);
    text-transform: uppercase;
}

.cs-img-r {
	justify-content: flex-end;
	border-left: 8px solid var(--black-color);
}

.cs-img-l {
	justify-content: flex-start;
	border-right: 8px solid var(--black-color);	
}

.cs-img-r img {
	right: 0;
}

.cs-img-l img {
	left: 0;
}

.portrait-2x-cont {
	position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    gap: 8px;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    background-color: #fff;
}

.portrait-2x-cont img {
	position: relative;
	display: inline-block;
	background-color: var(--intro-panel-bg-color);
}

.case-study-cont.cs-img-r .case-study-text-cont {order: 1;}
.case-study-cont.cs-img-r .case-study-text-img {order: 2;}

.case-study-cont.cs-img-l .case-study-text-cont {order: 2;}
.case-study-cont.cs-img-l .case-study-text-img {order: 1;}

/* CONTACT FORM RUBRIC */

.contact-rubric {
	background-color: #fff !important;
}

.contact-rubric .rubric-cont {
	background-color: #fff !important;
}

.contact-rubric .panel-cont-rubrik {
	background-color: var(--primary-bg-color) !important;
}

/* CONTACT FORM 7 */

#wpcf7-f1008-p10-o1 {
	position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
	min-height: calc(100vh + 76px);
	background-color: #fff;
}

#wp-contact-form {
	position: relative;
    margin: 0 auto;
    max-width: 1000px;
	min-width: 60%;
	margin: 100px 0 20px;
	overflow: visible;
}

#wp-contact-form:before {
	content: "Message Me";
	font-family: 'Heldane Display', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: var(--black-color);
	position: absolute;
	top: -75px;
	left: 0;
}

#wp-contact-form label {
	font-family: 'Newsam', Helvetica, sans-serif;
	font-size: 18px;
    color: var(--black-color);
    font-weight: 700;
}

#wp-contact-form p {
	padding-bottom: 20px;
}

.wpcf7-text,
.wpcf7-email,
.wpcf7-textarea
{
	background-image: url(../evanonearthone/assets/images/diagonalfield-vltgrey.png);
    background-size: auto 100px;
    background-repeat: repeat;
}

.wpcf7-text,
.wpcf7-email,
.wpcf7-textarea,
.wpcf7-submit,
.wpcf7-response-output
{
	font-family: 'Newsam', Helvetica, sans-serif;
	font-size: 22px;
}

.wpcf7-text,
.wpcf7-email,
.wpcf7-textarea,
.wpcf7-submit
{
	width: 100%;
	border: none;
	font-weight: 400;
    padding: 14px 10px;
	margin-top: 10px;
}

.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-textarea:focus
{ 
	background-image: none;
	background-color: #fff;
	border-bottom: 6px solid var(--black-color);
}

input:focus
{ 
	outline: none !important;	
}

.wpcf7-textarea:focus-visible 
{	
	outline: none !important;	
}

.wpcf7-submit {
	font-weight: 700;
	background-color: var(--black-color);
	color: #fff;
}

.wpcf7-submit:hover {
	background-color: var(--menu-active-color);
}

.wpcf7-submit has-spinner {
	background-color: var(--menu-active-color);
}

.wpcf7 form.sent .wpcf7-response-output {
    border: none;
	text-align: center;
}

/* STATIC CONTACT FORM */

#contact-form {
	background-color: #fff;
	display: none;
}

#rubrik-contact-form {
	background-color: var(--primary-bg-color);

}

#contact-cont {	
	position: relative;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh + 76px);
    width: calc(100% - 140px);
    margin: 0 auto;
    background-color: #fff;
}

#mailing-list{
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	min-height: calc(100vh + 76px);
}

#mailinglist-cont{
	order: 2;
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
	width: 98%;
	padding: 20vh 0;
}
			
#mailinglist-text{
	order: 1;
	position: relative;
}
				
#mailinglist-form{
	order: 2;
	position: relative;
}

#fcf-form {
	display:block;
	width: 70vw;
	max-width: 1000px;
}

.fcf-h3 {
	font-family: 'Heldane Display', sans-serif;
	font-size: 30px;
	font-weight: 600;
	color: var(--black-color);
}

.fcf-body {
	margin: 0;
	font-family: Helvetica, sans-serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--black-color);
	text-align: left;
	background-color: #fff;
	padding: 30px;
	padding-bottom: 10px;
	max-width: 100%;
}

.fcf-form-group {
	margin-bottom: 1rem;
}

.fcf-input-group {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: stretch;
	align-items: stretch;
	width: 100%;
}

.fcf-form-control {
	background-image: url(../images/diagonalfield-vltgrey.png);
	background-size: auto 100px;
	background-repeat: repeat;
	display: block;
	width: 100%;
	height: calc(1.5em + 0.75rem + 2px);
	padding: 0.375rem 0.75rem;
	font-family: Helvetica, sans-serif;
	font-size: 24px;
	font-style: italic;
	font-weight: 400;
	font-feature-settings: "ss05" 1, "ss02" 1;
	line-height: 1.5;
	color: var(--black-color);;
	background-color: rgba(0,0,0,0);
	background-color: transparent;
	background-clip: padding-box;
	outline: none;
	border: none;
}

.fcf-form-control:focus {
	border-bottom: 3px solid var(--black-color);;
	background-image: none;
}

select.fcf-form-control[size], select.fcf-form-control[multiple] {
	height: auto;
}

textarea.fcf-form-control {
	font-family: -apple-system, Arial, sans-serif;
	height: auto;
}

label.fcf-label {
	display: inline-block;
	margin-bottom: 0.5rem;
	font-family: Newsam, sans-serif;
	font-size: 18px;
	color: var(--black-color);;
	font-weight: 700;
}

.fcf-btn {
	display: inline-block;
	font-weight: 600;
	color: var(--black-color);;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-color: transparent;
	border: 1px solid transparent;
	padding: 0.375rem 0.75rem;
	font-size: 1rem;
	line-height: 1.5;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.fcf-btn {
		transition: none;
	}
}

.fcf-btn:hover {
	color: #fff;
	text-decoration: none;
}

.fcf-btn:focus, .fcf-btn.focus {
	outline: 0;
}

.fcf-btn-primary {
	color: #fff;
	background-color: var(--black-color);;
	border-color: var(--black-color);;
}

.fcf-btn-primary:hover {
	color: #fff;
	background-color: var(--menu-active-color);;
	border-color: var(--menu-active-color);;
}

.fcf-btn-primary:focus, .fcf-btn-primary.focus {
	color: #fff;
	background-color: c;
	border-color: var(--black-color);;
}

.fcf-btn-primary:visited {
	color: #fff;
	background-color: var(--black-color);;
	border-color: var(--black-color);;
}

.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
}

.fcf-btn-block {
	display: block;
	width: 100%;
}

.fcf-btn-block+.fcf-btn-block {
	margin-top: 0.5rem;
}

input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
	width: 100%;
}

  
#output-message-cont {
	background-image: url('../evanonearthone/assets/images/diagonalfield-vltgrey.png');
	background-size: auto 100px;
	background-repeat: repeat;
	position: relative;
	width: 100%;
	background-color: rgba(0,0,0,0);
	background-color: transparent;
	height: 48px;
	border: none !important;
}

.output-message {
	color: var(--black-color);;
	display: block;
	padding: 0.5rem 1rem;
	font-size: 1.25rem;
	line-height: 1.5;
	cursor: revert;
}

#output-message-cont .output-message:hover {
	color: var(--black-color);;
}}
    
/* CLICK MESSAGE */

    .click-message 
{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

    span.click-message-text
{
    position: relative;
    margin-left: 3vw;
    font-family: 'Newsam', sans-serif;
    font-weight: 600;
    text-align-center;
    font-size: 30px;
    padding-top: 6px;
}
    
/* MEDIA QUERIES */

    @media (max-height: 700px) {
    	span.click-message-text {
            font-size: 18px;
        }
    }

    
/* PORTRAIT */

    @media (orientation: portrait){
        .click-message {margin-left: calc(1vw + 20px);}
        span.click-message-text {font-size: 6vw;}
    }

/* FOOTER */

footer {	
    position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	height: 200px;
}

#footer-cont {	
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-start;
	width: calc(100% - 140px);
	height: 100%;
	border-top: 8px solid var(--black-color);
}

#menu-footer-menu {
	position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
    height: 65px;
    margin-block-start: 0;
    margin-block-end: 0;
    padding-inline-start: 0;
    unicode-bidi: isolate-override;
}

#menu-footer-menu {	
	order: 1;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: center;
    padding-left: 43px;
    height: 65px;
    margin-top: 5px;
}

#footer-social-cont {
	order: 2;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	align-items: flex-end;
	height: 65px;
	margin: 5px;
}

.footer-menu-item {
	position: relative;
	height: 100%;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
    font-family: "Heldane Text", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--black-color);
    letter-spacing: 0px;
}

#menu-footer-menu li a:hover {
    color: var(--rules-dark-grey); 
    border-bottom: 3px solid var(--menu-active-color);
    margin-bottom: -3px;
}

span.footermenu {
    font-family: "Heldane Text", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--black-color);
    letter-spacing: 0;
}

.footer-email {
	order: 2;
	position: relative;
	border-left: 1px solid var(--rules-med-grey);
	border-right: 1px solid var(--rules-med-grey);
}

.footer-email,
.footer-about,
.footer-phone,
#footer-social-cont {
	padding: 0 60px;
}

.footer-about {
	order: 1;
}

.footer-phone {
	order: 3;
	border-right: 1px solid var(--rules-med-grey);
}

.footer-phone.footermenu {
	letter-spacing: 1px;
}

.footer-sm-logos {
	position: relative;
	display: inline-block;
	background-size: auto 60%;
	background-position: center;
	background-repeat: no-repeat;
	width: 40px;
	height: 40px;
	border: 1px solid var(--black-color);
	border-radius: 20%;
	margin: 0 4px;
}

.footer-sm-logos.logos-instagram {
	order: 1;
	background-image: url('../evanonearthone/assets/images/Instagram_simple_icon.svg'); 
}

.footer-sm-logos.logos-linkedin {
	order: 2;
	background-image: url('../evanonearthone/assets/images/Linkedin_logo.svg'); 
}

.footer-sm-logos:hover {
	border: 4px solid var(--menu-active-color);	
}

#credit{	
	position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    text-align: center;
}

#credit-logo {
	background-image: url('https://evanonearth.net/images/ed-logo-7_d23e44.svg');
	background-size: 100% auto;
	background-position: center;
	position: absolute;
	top: 3px;
    right: -17px;
    width: 15px;
    height: 15px;
}

span.footercredit {
    font-family: "Newsam", sans-serif;
    font-size: 9px;
    font-weight: 600;
    color: var(--black-color);
    letter-spacing: 2px;
    text-transform: uppercase;
}
    
/* ANIMATIONS */

.anim-trig {
	position: absolute;
	left: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	background: transparent;
	margin: 0;
	z-index: 0;
}

.reveal-anim-1 {
	animation: reveal 1s ease-out forwards;
}

.reveal-anim-2 {
	animation: reveal-banner 1s ease-out forwards;
}

@-moz-keyframes reveal {
	0%   {opacity: 0;}
	100% {opacity: 1;}
	}
	
	@-webkit-keyframes reveal {
	0%   {opacity: 0;}
	100% {opacity: 1;}
	}
	
	@keyframes reveal {
	0%   {opacity: 0;}
	100% {opacity: 1;}
	}
	
@-moz-keyframes reveal-banner {
	0%   {opacity: 0; top: 25vh;}
	100% {opacity: 1; top: 0;}
	}
	
	@-webkit-keyframes reveal-banner {
	0%   {opacity: 0; top: 25vh;}
	100% {opacity: 1; top: 0;}
	}
	
	@keyframes reveal-banner {
	0%   {opacity: 0; top: 25vh;}
	100% {opacity: 1; top: 0;}
	}

@keyframes blur-transition {
  0% {backdrop-filter: blur(0px);}
  35% {backdrop-filter: blur(0px);}
  40% {backdrop-filter: blur(20px);}
  60% {backdrop-filter: blur(20px);}
  65% {backdrop-filter: blur(0px);}
  100% {backdrop-filter: blur(0px);}
}

@keyframes fade-in-out {
  0% {opacity: 0;}
  20% {opacity: 0;}
  45% {opacity: 1;}
  55% {opacity: 1;}
  65% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes fade-out {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

@keyframes scroll-prompt {
	0% {top: 6px;}
  	100% {top: 24px;}
}

@keyframes slideEffect {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

/* CONTACT FORM */

    #mailing-list{
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        min-height: calc(100vh + 76px);
    }
    
    #mailinglist-cont{
        order: 2;
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        width: 98%;
        padding: 20vh 0;
    }
                
    #mailinglist-text{
        order: 1;
        position: relative;
    }
                    
    #mailinglist-form{
        order: 2;
        position: relative;
    }
    
    #fcf-form {
        display:block;
        width: 70vw;
        max-width: 1000px;
    }
    
    .fcf-h3 {
        font-family: 'Heldane Display', sans-serif;
        font-size: 30px;
        font-weight: 600;
        color: var(--black-color);
    }
    
    .fcf-body {
        margin: 0;
        font-family: "Newsam", sans-serif;
        font-size: 24px;
        font-weight: 500;
        line-height: 1.5;
        color: var(--black-color);
        text-align: left;
        background-color: #fff;
        padding: 30px;
        padding-bottom: 10px;
        max-width: 100%;
    }
    
    .fcf-form-group {
        margin-bottom: 1rem;
    }
    
    .fcf-input-group {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-align: stretch;
        align-items: stretch;
        width: 100%;
    }
    
    .fcf-form-control {
        background-image: url('../evanonearthone/assets/images/diagonalfield-vltgrey.png');
        background-size: auto 100px;
        background-repeat: repeat;
        display: block;
        width: 100%;
        height: calc(1.5em + 0.75rem + 2px);
        padding: 0.375rem 0.75rem;
        font-family: "Newsam", sans-serif;
        font-size: 24px;
        font-style: italic;
        font-weight: 400;
        font-feature-settings: "ss05" 1, "ss02" 1;
        line-height: 1.5;
        color: var(--black-color);;
        background-color: rgba(0,0,0,0);
        background-color: transparent;
        background-clip: padding-box;
        outline: none;
        border: none;
    }
    
    .fcf-form-control:focus {
        border-bottom: 3px solid var(--black-color);;
        background-image: none;
    }
    
    select.fcf-form-control[size], select.fcf-form-control[multiple] {
        height: auto;
    }
    
    textarea.fcf-form-control {
        font-family: -apple-system, Arial, sans-serif;
        height: auto;
    }
    
    label.fcf-label {
        display: inline-block;
        margin-bottom: 0.5rem;
        font-family: Newsam, sans-serif;
        font-size: 18px;
        color: var(--black-color);;
        font-weight: 700;
    }
    
    .fcf-btn {
        display: inline-block;
        font-family: "Newsam", sans-serif; 
        font-weight: 600;
        color: var(--black-color);;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        line-height: 1.5;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }
    
    @media (prefers-reduced-motion: reduce) {
        .fcf-btn {
            transition: none;
        }
    }
    
    .fcf-btn:hover {
        color: #fff;
        text-decoration: none;
    }
    
    .fcf-btn:focus, .fcf-btn.focus {
        outline: 0;
    }
    
    .fcf-btn-primary {
        color: #fff;
        background-color: var(--black-color);;
        border-color: var(--black-color);;
    }
    
    .fcf-btn-primary:hover {
        color: #fff;
        background-color: var(--menu-active-color);;
        border-color: var(--menu-active-color);;
    }
    
    .fcf-btn-primary:focus, .fcf-btn-primary.focus {
        color: #fff;
        background-color: c;
        border-color: var(--black-color);;
    }
    
    .fcf-btn-primary:visited {
        color: #fff;
        background-color: var(--black-color);;
        border-color: var(--black-color);;
    }
    
    .fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        line-height: 1.5;
    }
    
    .fcf-btn-block {
        display: block;
        width: 100%;
    }
    
    .fcf-btn-block+.fcf-btn-block {
        margin-top: 0.5rem;
    }
    
    input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
        width: 100%;
    }
    
      
    #output-message-cont {
        background-image: url('../evanonearthone/assets/images/diagonalfield-vltgrey.png');
        background-size: auto 100px;
        background-repeat: repeat;
        position: relative;
        width: 100%;
        background-color: rgba(0,0,0,0);
        background-color: transparent;
        height: 48px;
        border: none !important;
    }
    
    .output-message {
        color: var(--black-color);;
        display: block;
        padding: 0.5rem 1rem;
        font-size: 1.25rem;
        line-height: 1.5;
        cursor: revert;
    }
    
    #output-message-cont .output-message:hover {
        color: var(--black-color);;
    }
    
/* CLICK MESSAGE */

    .click-message 
{
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

    span.click-message-text
{
    position: relative;
    margin-left: 3vw;
    font-family: 'Newsam', sans-serif;
    font-weight: 600;
    text-align: center;
    font-size: 30px;
    padding-top: 6px;
}


/* MEDIA QUERIES */

@media (max-height: 1000px) {
	nav li {
		height: 45px;
		border-radius: 20px 20px 5px 5px;
	}
	.menu-container-banner-mode {
    	width: calc(50% - 20px);
    }
}

@media (max-height: 700px) {
	span.click-message-text {
		font-size: 18px;
	}
}

@media (max-height: 650px) {
	#scroll-down-icon {display: none;}
}

@media (max-width: 2500px) {
	.intro-text-follow {
		font-size: 40px;
		line-height: 42px;
	}
}
@media (max-width: 1600px) {
	.intro-text-follow {
        font-size: 2.3vw;
        line-height: 2.5vw;
    }
    #intro-panel-left {
		width: 85%;
		padding-right: 15%;
	}
}

@media (max-width: 1500px) {
	.cs-title {
		font-size: 24px;
	}
	.cs-subtitle {
		font-size: 8px;
	}
}

@media (max-width: 1200px) {
	.title {
		font-size: 3.7vw;
        letter-spacing: -.07vw;
        line-height: 3.21vw;
	}
	.subtitle {
		font-size: 3.4vw;
        letter-spacing: -.05vw;
        line-height: 3.2vw;
	}
	#intro-panel-left {
        width: 90%;
        padding-right: 16%;
        margin-left: -4vw;
    }
    #intro-panel-right {
    	padding-right: 0;
    }
    .intro-text-follow {
        font-size: 2.6vw;
        line-height: 2.8vw;
    }
    .intro-logos {
		max-width: 70px;
	}
	.case-study-cont {
		flex-flow: column nowrap;
		height: auto;
		margin-bottom: 48px;
		background-color: #fff;
		transition: border .5s; 	
	}
	.case-study-cont:after {
    	bottom: -32px;
    }
	.cs-img-r, .cs-img-l {
		justify-content: flex-start;
		border-right: none;
		border-left: none;
		border-bottom: 8px solid var(--black-color);
	}
	.case-study-cont.cs-img-r:hover,
	.case-study-cont.cs-img-l:hover {
    	border-right: none;
		border-left: none;
		border-bottom: 8px solid var(--menu-active-color);
    	transition: border .5s;
    }
	.case-study-text-cont, .case-study-text-img {
		height: auto;
		width: 100%
	}
	.case-study-text-cont {
		margin: 8vw 0;
	}
	.case-study-cont.cs-img-r .case-study-text-cont {order: 2;}
	.case-study-cont.cs-img-r .case-study-text-img {order: 1;}
	.case-study-text-img img {
		width: 100%;
		height: auto;
	}
	.portrait-2x-cont img {
        width: calc(50% - 4px);
        height: auto;
    }    
    .footer-email, 
    .footer-about, 
    .footer-phone, 
    #footer-social-cont {
		padding: 0 3vw;
	}
}

@media (max-width: 1000px) {
	header {
    	left: 60px;
    	width: calc(100vw - 120px);
    }
	#header-title-2-cont-casestudy {
    	left: 300px;
	}
	.case-studies-rubric {
		padding: 0 0 60px;
	}
	#header-top-opaque {
		height: 71px;
	}
	#header-title-cont,
	#header-title-2-cont,
	#header-title-2-cont-casestudy {
    	display: flex;
    	flex-flow: column nowrap;
    	justify-content: center;
    	align-items: center;
    	padding: .7vw 3vw 0;
	}
	#header-title-2-cont,
	#header-title-2-cont-casestudy {
    	padding: .2vw 3vw 0;
	}
	.header-title-text {
		font-size: 3vw;
		letter-spacing: -.1vw;
		line-height: 0;
	}
	.header-title-2-text,
	.header-title-2-text-cs {
		font-size: 3vw;
		line-height: 2.5vw;
	}
	#menu-icon-cont {
		top: 12px;
		transform: none;
		right: 30px;
	} 
    .nav-icon-banner-mode {
		right: auto !important;
		left: 30px;
		transition: right .5s;
	}
    #menu-container {
		max-height: calc(100vh - 107px);
		overflow: scroll;
	}
	nav {
		height: calc(100vh - 130px);
	}
	#header-title-2-cont-casestudy {
        top: 12px;
        left: calc(30px + 24.7vw);
    }
	.nav-banner-mode {
		justify-content: flex-start !important;
		margin-top: 5px;
		height: calc(100vh - 100px) !important;
	}
	#menu-container {
		padding: 82px 30px 0 30px;	
	}
	@media (orientation: landscape) {
		#navcontainer {
			padding-top: 7px;
		}
	}
	#navcontainer {
		top: 17px;
		left: 30px;
		width: calc(100vw - 60px);
    }
	#vf-bracket-ul {
		top: 25px;
		left: 25px;
    }
    #vf-bracket-ur {
		top: 25px;
		right: 25px;
    }
    #vf-bracket-lr {
		bottom: 25px;
		right: 25px;
    }
    #vf-bracket-ll {
		bottom: 25px;
		left: 25px;
    }
    #scroll-down-icon {
		bottom: 30px;
	}
	.panel-cont {
		width: calc(100% - 60px);
	}
	.panel-cont-rubrik,
	.panel-cont-rubrik.subrubric {
        font-size: 1.2vw;
        line-height: 2.3vw;
	}
	.panel-cont-rubrik {
        border-radius: 0 0 1vw 1vw;
	}
	.panel-cont-rubrik.subrubric {
        top: -2.7vw;
        padding: .3vw 1.2vw 0;
        border-radius: 1vw 1vw 0 0;
	}
	#intro-panel-left {
		width: 70%;
        padding-right: 14%;
    }
    #intro-divider-cont {
		left: calc(0vw - (3vw + 20px));
		height: 40px;
		width: 40px;
		top: 50%;
    }
    #heart-icon {
		left: 9px;
		height: 20px;
		width: 20px;
	}
	#intro-logos-cont {
		padding: 0 30px;
		height: 20vw;
	}
	#contact-cont {	
    	width: calc(100% - 60px);
    }
	#footer-cont {
		width: calc(100% - 60px);
		border-top: 6px solid var(--black-color);
	}
	.footer-email,
	.footer-about,
	.footer-phone,
	span.footermenu {
    	font-size: 18px;
    }
}

@media (max-width: 750px) {
	#intro-panel-right {
    	padding-left: 4%;
    }
    #intro-panel-left {
        padding-right: 12%;
    }
    footer {height: 220px;}
	#footer-cont {
		justify-content: space-between;
		height: 100%;
	}
	#menu-footer-menu {
		order:2;
		flex-flow: column nowrap;
		align-items: flex-start;
		height: auto;
		margin-top: 23px;
		margin-right: 0;
		border-right: 0;
		padding: 0 7vw 0 9vw;
		border-left: 1px solid var(--rules-med-grey);
	}
	#footer-social-cont {
		order:1;
	}
	.footer-menu-item {
        justify-content: flex-start;
        align-items: flex-start;
        margin: 5px 0 10px;
        height: auto;
    }
    .footer-email, 
    .footer-about, 
    .footer-phone, 
    #footer-social-cont {
        padding: 0;
    }
	#footer-email {
		border-left: none;
		border-right: none;
	}
	#footer-phone {
		border-right: none;
	}
}

@media (orientation: portrait) {
	#menu-container {
        padding: 96px 60px 0 60px;
	}
	.nav-icon-banner-mode {
		right: auto;
		left: 30px;
	}
	#banner-cont {
    	flex-flow: column nowrap;
    }
    #title-wrapper {
    	width: 100%;
    }
    #title-right {
		margin-top: -.2vw;
	}
    .title {
        font-size: 5vw;
        line-height: 4.44vw;
    }
    .subtitle {
        font-size: 4.7vw;
        line-height: 4.5vw;
    }
    #carousel-wrapper {
    	width: 100%;
    }
    .vf-bracket {
		width: 20%;
		height: 20vw;
	}
	#vf-outer-circle {
		height: 50vw;
		width: 50%;
	}
	#vf-inner-circle {
		height: 20vw;
		width: 20%;
	}
	#intro-panel-text-cont {
		flex-flow: column nowrap;
		padding: 8vw 0;
	}
	#intro-panel-left {
		order: 1;
		width: 100%;
		margin-left: -1vw;
		padding-right: 1vw;
		border-right: none;
	}
	.intro-text-lead {
    	font-size: 10vw;
    }
    #intro-panel-right {
		width: 100%;
		height: 50%;
		padding-left: 10%;
		padding-right: 10%;
		padding-top: 4vw;
		margin-top: 8.5vw;
		text-align: center;
	}	
	#intro-panel-right:before {
		top: -3vw;
		left: 0;
		height: 10px;
		width: 100%;
		border-left: none;
		border-top: 1px solid var(--rules-med-grey);
	}
    #intro-rag-shape {
        width: 39vw;
        height: 100vw;
		shape-outside: polygon(70% 0, 0% 31%, 56% 42%, 18% 54%, 2% 62%, 50% 129%, 0 100%, 0 0);
    }
    #intro-divider-cont {
        top: -30px;
        left: 50%;
        margin-top: -3vw;
        transform: translateX(-50%);
	}
	.intro-radial {
    	height: 100vh;
    }
	#radial-1 {display: block;}
	#radial-7 {display: none;}
	.intro-text-follow {
        font-size: 40px;
        line-height: 42px;
        padding-right: 0;
    }
    .click-message {margin-left: calc(1vw + 20px);
    }
    span.click-message-text {font-size: 6vw;
    }
}

@media (max-width: 650px) {
	.navcontainer-banner-mode {
		height: 66px !important;
		transition: height .3s;
	}
}

@media (orientation:landscape) and (max-width: 1000px) {
	#navcontainer {
        top: 5px;
    }
}

@media (orientation: portrait), (orientation:landscape) and (max-width: 1000px) {
    #header-top-opaque {
		display: none;
	}
    #menu-container {
		position: fixed;
		width: 100%;
        height: 50vh;
        top: 0;
        background-color: #fff;
        z-index: 9998;
	}
	.menu-container-banner-mode {
		width: 100% !important;
	}
	nav {
		justify-content: center;
        height: 100%;
		border-top: 1px solid #c9c9c9;
		margin-top: 0;
	}
	.nav-banner-mode {
		justify-content: center !important;
		max-height: 100% !important;
		margin-top: 0 !important;
	}
}

@media (orientation: portrait) and (max-width: 650px), (orientation:landscape) and (max-width: 1000px) {
	header {
		border-bottom: none;
	}
	.hide-header {
    	top: -140px !important;
    } 
    #header-title-cont {
		margin-left: 0;
	}
	.nav {
		justify-content: flex-start !important;
		overflow: hidden;
		margin-top: 0;
	}
	nav ul {
		overflow: scroll;
	}
	#menu-icon-cont {
		top: 13px;
		height: 40px;
		width: 40px;
	}
	.c-hamburger-mbl span {
		top: 19px;
		left: 12px;
		right: 12px;
	}
	.c-hamburger-mbl span::before {
    	top: -3px;
	}
	.c-hamburger-mbl span::after {
    	bottom: -3px;
	}
	.c-hamburger-mbl--htx.is-active span {
		top: 20px;
	}
	#menu-container {
		padding: 65px 30px 0 30px;
	}
	#menu-container {
		height: 100vh;
		min-height: 100vh;
	}		
}

@media (orientation: portrait) and (max-width: 1000px) {
	#header-top-opaque {
		height: 83px;
	}
	#header-title-2-cont-casestudy {
        top: 17px;
        left: calc(38px + 24vw);
    }
    #intro-divider-cont {
		top: -20px;
	}
}

@media (orientation: portrait) and (max-width: 800px) {
	#intro-divider-cont {
        top: -20px;
	}
	#scroll-down-icon {display: none;}
}

@media (orientation: portrait) and (max-width: 800px) {
	.intro-text-follow {
        font-size: 4.8vw;
        line-height: 5.2vw;
    }
    #title-right {
		margin-top: -.1vw;
	}
    .title {
        font-size: 6.5vw;
        line-height: 5.65vw;
    }
    .subtitle {
        font-size: 6vw;
        letter-spacing: -.05vw;
        line-height: 5.65vw;
    }
}

@media (orientation: portrait) and (max-width: 650px) {
    #title-right {
		margin-top: -.1vw;
	}
    .title {
        font-size: 7.5vw;
        line-height: 6.65vw;
    }
    .subtitle {
        font-size: 7vw;
        letter-spacing: -.05vw;
        line-height: 6.65vw;
    }
    #intro-panel-text-cont {
		padding: 12vw 0;
		margin: 10vw auto;
	}
	.panel-cont-rubrik,
	.panel-cont-rubrik.subrubric {
        font-size: 2.2vw;
        line-height: 2.6vw;
    }
	.panel-cont-rubrik {
        border-radius: 0 0 2vw 2vw;
    }
	.panel-cont-rubrik.subrubric {
        top: -3.9vw;
        padding: 1vw 2vw 0;
        border-radius: 2vw 2vw 0 0;
    }
	#intro-panel-left {
		margin-bottom: 9vw;
		padding: 0 8vw;
	}
    #intro-panel-right {
        padding-left: 7%;
        padding-right: 7%;
        padding-top: 11vw;
    }
    #intro-divider-cont {
        top: -20px;
    }
    .panel-cont {
        width: 95%;
    }
	#wp-contact-form {
    	max-width: 95%;
	}
    #footer-cont {
		width: 95%;
	}
}

@media (max-width: 650px) {
	header {
		flex-flow: column nowrap;
		height: 120px;
	}
	#navcontainer {
        top: 10px;
    }
	#header-title-cont,
	#header-title-2-cont,
	#header-title-2-cont-casestudy,
	#header-title-2-cont-hover {
        padding: 1vw 5vw 1vw;
    }
	#header-title-2-cont,
	#header-title-2-cont-casestudy,
	#header-title-2-cont-hover {
		margin-left: 0;
		margin-top: 12px;
    }
    #header-title-2-cont-casestudy {
		top: 60px;
		left: 27px;
    }
    .header-title-text {
		font-size: 5.5vw;
		line-height: 5.5vw;
	}
	.header-title-2-text,
	.header-title-2-text-cs {
		font-size: 5.5vw;
		line-height: 5.5vw;
	}
	#header-title-cont:after {
		top: auto;
		right: auto;
		bottom: -7px;
		left: 5vw;
		height: 1px;
		width: 33vw;
	}
	nav ul {
		padding: 5px 0 100px;
	}
	nav li {
		font-size: 20px;
	}
	nav li {
		width: calc(100% - 10px);
		flex-basis: calc(100% - 6px);
	}
	.footer-email {
		border-left: none;
		border-right: none;
    }
    .footer-phone {
		border-right: none;
	}
}


/****** CASE STUDY & ABOUT PAGES ******/



/* TOP BANNER */

#casestudy-banner-wrapper {
	width: 100vw;
	height: 100vh;
	background-color: #fff;	
}

#about-banner-wrapper {
	width: 100vw;
	background-color: var(--about-panel-bg-color);	
}

#casestudy-banner-cont,
#about-banner-cont {
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	top: 0;
	left: 0;
	width: calc(100% - 140px);;
	margin: 0 auto;
	height: 100%;
}

#casestudy-title-wrapper,
#about-title-wrapper {
	order: 1;
	position: relative;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	margin-top: 81px;
	width: 100%;
}

#casestudy-title-wrapper {
	border-bottom: 1px solid var(--rules-light-grey);
}

#about-title-wrapper {
	border-bottom: 1px solid #fff;
}

#case-study-title-cont,
#about-title-cont {
	position: relative;
    display: flex;
    flex-flow: row nowrap;
    margin-left: 8px;
    padding: 23px 0 23px 30px;
}

.title-cs,
.title-about {
	position: relative;
    display: block;
    font-family: "Newsam", "Heldane Display", serif;
    font-weight: 800;
    font-size: 40px;
    color: var(--black-color);
    letter-spacing: -.2px;
    font-feature-settings: 'ss07' 1;
}

.title-category {
	position: absolute;
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	top: 50%;
	right: 0;
	height: 21px;
	text-align: right;
	transform: translateY(-50%);
	padding-left: 30px;
	border-left: 1px solid var(--menu-active-color);
}

.category {
	font-family: "Newsam", "Heldane Display", serif;
    font-weight: 300;
    font-size: 16px;
    color: var(--black-color);
    letter-spacing: 1px;
    font-feature-settings: 'ss07' 1;
    text-transform: uppercase;
}

.title-category:before {
	content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    width: 21px;
    height: 21px;
    transform: translateY(-50%);
    border: 1px solid var(--menu-active-color);
    border-radius: 50%;
    background-color: transparent;
    z-index: 1;
}

.casestudy-banner-outer,
.about-banner-outer {
	order: 2;
    position: relative;
    top: 0;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    width: 100%;
    height: calc(100vh - 192px);
    background-color: #fff;  
}

.about-banner-outer {
    padding: 50px 0; 
    background-color: var(--about-panel-bg-color);
}


.cs-banner-text-cont, 
.cs-banner-img-cont,
.cs-banner-img-cont-singles,
.cs-banner-img-cont-framed,
.about-banner-img-cont,
.about-banner-text-cont
 {
    position: relative;
    height: 85%;
    background-color: #fff;
}

.about-banner-img-cont,
.about-banner-text-cont
 {
    height: 100%;
    background-color: var(--about-panel-bg-color);
}

.cs-banner-text-cont,
.about-banner-text-cont {
    display: flex;
    flex: 1 1 400px; 
  	min-width: 400px;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    border-left: 8px solid var(--black-color);

}

.about-banner-text-cont {
    flex: 1 1 600px;
    align-items: flex-start;
    border-left: none;
     
}

.cs-intro,
.about-intro {
    padding-left: 38px;
    padding-right: 40px;
}

.cs-intro {
	font-family: "Lyon Display Light", serif;
    font-weight: 400;
     max-width: 475px;
}

.about-intro {
	display: flex;
    flex-flow: column nowrap;
    max-width: 845px;
    min-width: 475px;
}

.casestudy-intro {
	font-size: 24px;
    line-height: 30px;
    letter-spacing: 0px;
    color: var(--black-color);
}

.about-lead-in {
	font-family: "Lyon Display Light", serif;
    font-weight: 400;
    font-size: 2.4vw;
    line-height: 2.6vw;
    letter-spacing: 0px;
    color: var(--black-color);
    max-width: 42vw;
    margin-bottom: 30px;
	padding-right: 4vw;
}

.bio {
	font-family: "Heldane Text", serif;
    font-weight: 400;
    letter-spacing: 0px;
    color: var(--black-color);
    column-count: 2;
    font-size: 17px;
    max-width: 625px;
    min-width: 560px;
}

.cs-banner-text-cont .scroll-down-icon {
	left: 50%;
    bottom: 0;
}

.cs-banner-img-cont,
.cs-banner-img-cont-framed,
.about-banner-img-cont {
    display: inline-flex;
    flex-flow: column nowrap;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
}

.cs-banner-img-cont-singles {
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    gap: 16px;
    flex: 0 0 auto;
    width: auto;
}

.cs-banner-framed-img-cont,
.about-banner-framed-img-cont {
	position: relative;
    width: auto;
    height: 100%;
    display: block;
    z-index: 10;
}

.cs-banner-frame-cont,
.cs-banner-frame-cont-outer,
.about-banner-frame-cont,
.about-banner-frame-cont-outer {
	position: absolute;
	display: flex;
	flex-flow: row nowrap;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0);
	background-color: transparent;
	z-index: 2;
}

.about-banner-frame-cont {
	border: 8px solid var(--black-color);
}

.cs-banner-frame-cont-outer,
.about-banner-frame-cont-outer {
	top: 0px;
    left: -16px;
    height: calc(100% + 16px);
    width: calc(100% + 16px);
    overflow: hidden;
    z-index: 1;
}

.banner-frame-topcut,
.banner-frame-topcut-2x {
	position: absolute;
    top: 0;
    left: -16px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 22px 16px 0 16px;
    border-color: #fff transparent transparent transparent;
    z-index: 10;
}

.banner-frame-topcut-2x {
	left: calc(50% - 16px);
}

.banner-frame-bottomcut,
.banner-frame-bottomcut-2x {
	position: absolute;
    bottom: -16px;
    right: 0;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 16px 22px 16px 0;
    border-color: transparent #fff transparent transparent;
    z-index: 10;
}

.about-banner-frame-cont-outer .banner-frame-topcut {
    border-color: var(--about-panel-bg-color) transparent transparent transparent;
}

.about-banner-frame-cont-outer .banner-frame-bottomcut {
    border-color: transparent var(--about-panel-bg-color) transparent transparent;
}

.banner-frame-bottomcut-2x {
	left: calc(50% - 20px);
}

.cs-banner-frame-outer-l,
.cs-banner-frame-outer-r,
.about-banner-frame-outer-l {
    position: relative;
    display: inline-block;
    top: 0;
    width: 14px;
    height: 100%;
}

.cs-banner-frame-outer-l,
.about-banner-frame-outer-l {
    order: 1;
    left: 0px;
    width: calc(50% + 4px);
    margin-right: 6px;
    border-left: 6px double var(--black-color);
    border-bottom: 6px double var(--black-color);
}

.cs-banner-frame-outer-l.single-horiz {
	width: 100% !important;
}

.about-banner-frame-outer-l {
    width: 100%;
    margin: 0;
}

.cs-banner-frame-outer-r {
	order: 2;
    left: 2px;
    width: calc(50% - 14px);
    border-bottom: 6px double var(--black-color);
}

.cs-banner-frame-outer-l2,
.cs-banner-frame-outer-r2,
.about-banner-frame-outer-l2 {
    position: absolute;
    bottom: 2px;
    height: 100%;
    width: 100%;
}

.cs-banner-img-cont-singles .cs-banner-frame-outer-l2,
.cs-banner-img-cont-singles .cs-banner-frame-outer-r2 {
    border-radius: 0;
    bottom: 8px;
}

.cs-banner-img-cont-framed .cs-banner-frame-outer-l2,
.cs-banner-img-cont-framed .cs-banner-frame-outer-r2,
.cs-banner-img-cont-framed .cs-banner-frame-outer-l {
    border-radius: 0;
}

.cs-banner-img-cont-singles .cs-banner-frame-outer-l,
.cs-banner-img-cont-singles .cs-banner-frame-outer-r {
    border: none;
}

.cs-banner-img-cont-singles .cs-banner-frame-outer-l {
    width: calc(50% + -5px);
}

.cs-banner-img-cont-singles .cs-banner-frame-outer-l2 {
    left: 8px;
}

.cs-banner-img-cont-singles .cs-banner-frame-outer-r2 {
    left: 8px;
}

.cs-banner-frame-outer-l2,
.about-banner-frame-outer-l2 {
	left: 2px;
    border-left: 6px double var(--black-color);
    border-bottom: 6px double var(--black-color);
}

.cs-banner-frame-outer-r2 {
	left: -2px;
    border-bottom: 6px double var(--black-color);
}

.cs-banner-frame-outer-l,
.cs-banner-frame-outer-l2 {
	border-radius: 0 0 30px 0;
}

.about-banner-frame-outer-l2 {
	border-radius: 0;
}

.cs-banner-frame-outer-r,
.cs-banner-frame-outer-r2 {
	border-radius: 0 0 0 30px;
}

.banner-frame-outer {
	fill: none;
    stroke: var(--black-color);
    stroke-width: 1px;
    stroke-miterlimit: 10;
    fill: url(#pattern-hex);
}

.cs-banner-frame-l,
.cs-banner-frame-r {
	position: relative;
	top: 0;
	height: 100%;
	width: 50%;
}

.cs-banner-frame-l {
	order: 1;
	border-width: 8px 0 8px 8px;
	border-radius: 0 30px 30px 0;
	border-style: solid;
	border-color: var(--black-color) var(--rules-med-grey) var(--black-color) var(--black-color);
}

.cs-banner-frame-r {
	order: 2;
	border-width: 8px 8px 8px 0;
	border-radius: 30px 0 0 30px;
	border-style: solid;
	border-color: var(--black-color);
}

.cs-banner-img-cont-singles .cs-banner-frame-l,
.cs-banner-img-cont-framed .cs-banner-frame-l {
    width: 100%;
    border-width: 8px;
    border-color: var(--black-color);
    border-radius: 0;
}

.cs-banner-img-cont-singles .cs-banner-frame-r {
    display: none;
}

.cs-banner-img-cont img,
.cs-banner-img-cont-singles img,
.cs-banner-img-cont-framed img,
.about-banner-img-cont img {
    position: relative;
    height: 100%;
    width: auto;
    display: block;
    padding: 2vh;
    z-index: 10;
}

.blur-screen-casestudy {
	position: absolute;
	display: block;
	top: 2vh;
	left: 2vh;
	width: calc(100% - 4vh);
	height: calc(100% - 4vh);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	background-color: transparent;
	opacity: 1;
	animation: fade-out 1s 1s ease-out forwards;
	z-index: 99;
}

#vf-outer-circle-cs {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 30vh;
	width: 30vh;
	border: 1px solid var(--rules-light-grey);
	border-radius: 50%;
	background-color: #fff;
	opacity: .2;
	z-index: 1;
}

#vf-inner-circle-cs {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	height: 10vh;
	width: 10vh;
	border: 1px solid var(--rules-light-grey);
	border-radius: 50%;
	overflow: hidden;
	z-index: 2;	
}

.noframe img {
	padding: 0 !important;
}

/* EXTRA-WIDE TEMPLATE */

#casestudy-banner-wrapper.xwide {
	height: auto;
}
.casestudy-banner-outer.xwide {
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	width: 98% !important;
	height: auto;
}
.cs-banner-text-cont.xwide {
	order: 2;
	width: 100%;
	margin-top: 50px;
	margin-bottom: 50px;
	padding-bottom: 30px;
	border-left: none;
	border-bottom: 8px solid var(--black-color);
}
.cs-intro.xwide {
	max-width: none;
}
.cs-banner-img-cont-framed.xwide {
	order: 1;
	margin-top: 40px;
	height: auto;
	width: 100%;
}
.cs-banner-img-cont-framed.xwide img {
	height: auto;
	width: 100%;
}
.scroll-down-icon.xwide {
	display: none;
}

/* RUBRICS */

.panel-cont.case-studies-rubric {
	border-top: 1px solid var(--rules-light-grey);
}

.panel-cont.case-studies-rubric.subrubric {
    margin-top: 35px !important;
    padding: 0 0 25px !important;
}

.panel-cont-rubrik.subrubric {
	background-color: var(--primary-bg-color) !important;
}

.topgallery > .case-studies-rubric.subrubric {
	border-bottom: 8px solid var(--black-color);
}

.panel-cont-rubrik, 
.panel-cont-rubrik.subrubric {
	text-align: center;
}

.white-background {
	background-color: #fff !important;
}

/* PORTFOLIO SECTION */

.portfolio-container {
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	background-color: transparent;	
}

.portfolio-section {
	position: relative;
	width: 100%;
	margin: 0 auto;
}

.portfolio-section img {
	width: 100%;
	height: auto;
}

/* TOP BANNER STACKED (WRAPPED) STATE */

.casestudy-banner-outer.is-stacked {
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-start;
	width: 80%;
	height: auto;
}

#casestudy-banner-wrapper.is-stacked {
	height: auto;
}

.casestudy-banner-outer.is-stacked .cs-banner-text-cont {
	order: 2;
	width: 100%;
	margin-top: 50px;
	margin-bottom: 50px;
	padding-bottom: 30px;
	border-left: none;
	border-bottom: 8px solid var(--black-color);
}

.casestudy-banner-outer.is-stacked .cs-intro {
	max-width: none;
}

.casestudy-banner-outer.is-stacked .cs-banner-img-cont,
.casestudy-banner-outer.is-stacked .cs-banner-img-cont-singles,
.casestudy-banner-outer.is-stacked .cs-banner-img-cont-framed {
	order: 1;
	margin-top: 40px;
	height: auto;
	width: 100%;
}

.casestudy-banner-outer.is-stacked .cs-banner-img-cont img,
.casestudy-banner-outer.is-stacked .cs-banner-img-cont-singles img,
.casestudy-banner-outer.is-stacked .cs-banner-img-cont-framed img {
	height: auto;
	width: 100%;
}

.casestudy-banner-outer.is-stacked .scroll-down-icon {
	display: none;
}

/* VIDEO */

.wp-block-video {
    position: relative;
	width: calc(100% - 140px);
    margin: 0 auto 70px;
    background-color: var(--primary-bg-color);
}

/* GALLERY SECTION */

.galleryberg-gallery-container {
	padding: 0 70px 70px;
	background-color: var(--primary-bg-color);
}

.galleryberg-image:before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	transform: translate(-50%, -50%);
	border: 20px solid #fff;
	border-radius: 50%;
	opacity: 0;
	transition: opacity .5s;
	z-index: 2;
	pointer-events: none;
}

.galleryberg-image:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: calc(100% - 18px);
	height: calc(100% - 18px);
	background-color: transparent;
	border: 9px solid var(--black-color);
	opacity: 0;
	transition: opacity .5s;
	z-index: 1;
	pointer-events: none;
}

.galleryberg-image:hover:before {
	opacity: .4;
	transition: opacity .5s;
}

.galleryberg-image:hover:after {
	opacity: 1;
	transition: opacity .5s;
}

.galleryberg-gallery-container.subgallery {
    padding-bottom: 14px !important;
}

/* MEDIA QUERIES */

@media (min-width: 2500px) {
	.casestudy-intro {
		font-size: 36px;
		line-height: 40px;
	}
}

@media (max-width: 1700px) {
	.casestudy-intro {
		font-size: 1.7vw;
		line-height: 2.3vw;
	}
}

@media (max-width: 1400px) {
	.scroll-down-icon {
		display: none;
	}
}

@media (orientation: portrait) {
	.cs-banner-img-cont img, .cs-banner-img-cont-singles img, .cs-banner-img-cont-framed img, .about-banner-img-cont img {
    	padding: 2vw;
	}
}

@media (orientation: portrait), (max-width: 1250px), (max-aspect-ratio: 10/7)  {
	.about-banner-outer {
		height: auto;
		align-items: flex-start;
		padding-top: 40px;
		padding-bottom: 50px;
	}
	.about-banner-text-cont {
    	justify-content: flex-start;
    }
	.about-banner-img-cont {
    	height: 44.5vw;
    }
	.about-banner-text-cont,
	.about-intro,
	.bio {
		min-width: 0;
		column-count: 1;
	}
	.about-lead-in {
    	font-size: 5vw;
    	line-height: 5.1vw;
		padding-right: 0;
    }
    .about-banner-img-cont {
    	height: 44.5vw;
    }
}

@media (orientation: portrait), (orientation: landscape) and (max-width: 1000px) {
	#casestudy-banner-cont,
	#casestudy-banner-cont, #about-banner-cont {
        width: calc(100vw - 120px);
    }
    .galleryberg-gallery-container.layout-masonry {
		padding: 0 60px 60px;
	}
	.galleryberg-gallery-container {
		padding: 0 60px 60px;
	}
	.wp-block-video {
		width: calc(100% - 120px);
	}
}

@media (max-width: 900px) {
	#case-study-title-cont,
	#about-title-cont {
    	margin-left: 8px;
    	padding-left: 2vw
	}
	.intro-icon.intro-icon-about {
		left: -17px;
	}
	.about-intro {
		padding-left: 2vw;
	}
}

@media (max-aspect-ratio: 12/7), (max-width: 1000px), (max-height: 1000px) {
	.casestudy-banner-outer {
		flex-flow: row wrap;
		justify-content: center;
		align-items: flex-start;
		width: 80%;
	}
	#casestudy-banner-wrapper {
		height: auto;
	}
	.casestudy-banner-outer {
		height: auto;
	}
	.cs-banner-text-cont {
		order: 2;
		width: 100%;
		margin-top: 50px;
		margin-bottom: 50px;
		padding-bottom: 30px;
		border-left: none;
		border-bottom: 8px solid var(--black-color);
	}
	.cs-intro {
		max-width: none;
	}
	.cs-banner-img-cont,
	.cs-banner-img-cont-singles,
	.cs-banner-img-cont-framed {
		order: 1;
		margin-top: 40px;
		height: auto;
		width: 100%;
	}
	.cs-banner-img-cont img,
	.cs-banner-img-cont-singles img,
	.cs-banner-img-cont-framed img {
		height: auto;
		width: 100%;
	}
	.scroll-down-icon {
		display: none;
	}
}

@media (max-width: 1000px) {
	#casestudy-title-wrapper,
	#about-title-wrapper {
		padding: 5vw 0;
		margin-top: 71px;
	}
	#casestudy-title-cont {
		padding: 5vh 0;
	}
	#casestudy-banner-cont,
	#about-banner-cont {
	    width: calc(100vw - 60px);  
	}
	.cs-banner-text-cont,
	.cs-banner-text-cont.xwide {
		border-bottom: 6px solid var(--black-color);
	}
	.about-banner-frame-outer-l {
		border-left: 6px double transparent;
		border-bottom: 6px double transparent;
	}
	.about-banner-frame-cont {
    	border: 6px solid var(--black-color);
	}
	.cs-banner-frame-outer-l, .cs-banner-frame-outer-l2 {
        border-radius: 0 0 20px 0;
    }
    .cs-banner-frame-outer-r, .cs-banner-frame-outer-r2 {
        border-radius: 0 0 0 20px;
    }
	.cs-banner-frame-l {
		border-width: 6px 0 6px 6px;
		border-radius: 0 20px 20px 0;
	}
	.cs-banner-frame-r {
		border-width: 6px 6px 6px 0;
		border-radius: 20px 0 0 20px;
	}
	.cs-banner-img-cont-singles .cs-banner-frame-l,
	.cs-banner-img-cont-framed .cs-banner-frame-l {
		border-width: 6px;
	}
	.cs-banner-frame-cont-outer {
		top: 0px;
		left: -12px;
		height: calc(100% + 12px);
		width: calc(100% + 12px);
	}
	.cs-banner-img-cont-singles {
		gap: 12px;
	}
	.banner-frame-topcut {
		left: -12px;
		border-width: 17px 12px 0 12px;
		z-index: 10;
	}
	.banner-frame-bottomcut {
		bottom: -12px;
		right: 0;
		border-width: 12px 17px 12px 0;
	}
	.about-banner-frame-cont-outer .banner-frame-topcut {
		left: -17px;
		border-width: 17px 17px 0 17px;
	}
	.about-banner-frame-cont-outer .banner-frame-bottomcut {
		bottom: -17px;
		border-width: 17px 17px 17px 0;
	}
	.cs-banner-frame-outer-l,
	.cs-banner-frame-outer-r {
		position: relative;
		display: inline-block;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.cs-banner-frame-outer-l {
		margin-right: 0px;
		border-left: none;
		border-bottom: none;
	}   
	.cs-banner-frame-outer-r {
		border-bottom: none;
	}
	.cs-banner-img-cont-singles .cs-banner-frame-outer-l {
    	margin-right: 6px;
    	left: -4px;
    	top: 4px;
	}
	.cs-banner-frame-outer-l2,
	.cs-banner-frame-outer-r2 {
		position: absolute;
		bottom: 4px;
		height: 100%;
		width: 100%;
	}
	.cs-banner-frame-outer-l2 {
		left: 4px;
		border-left: 6px double var(--black-color);
		border-bottom: 6px double var(--black-color);
	}
	.cs-banner-frame-outer-r2 {
		left: 6px;
		border-bottom: 6px double var(--black-color);
	}
	.cs-banner-frame-l,
	.cs-banner-frame-r {
		position: relative;
		top: 0;
		height: 100%;
		width: 50%;
	}
	.banner-frame-topcut-2x {
		left: calc(50% - 20px);
	}
	.casestudy-banner-outer.is-stacked .cs-banner-text-cont {
		border-bottom: 6px solid var(--black-color);
	}
	.galleryberg-image:after {
		width: calc(100% - 12px);
		height: calc(100% - 12px);
		border: 6px solid var(--black-color);
	}
	.galleryberg-gallery-container.layout-masonry {
		padding: 0 30px 30px;
	}
	.rubric-cont,
	.case-studies-rubric {
		width: calc(100% - 60px);
	}
    .case-studies-rubric {
		border-bottom: 6px solid var(--menu-active-color);
	}
	.topgallery > .case-studies-rubric.subrubric {
		border-bottom: 6px solid var(--black-color);
	}
	.galleryberg-gallery-container {
		padding: 0 30px 30px;
	}
	.wp-block-video {
		width: calc(100% - 60px);
	}
}

@media (orientation: landscape) and (max-width: 1200px) {	
	.title-cs,
	.title-about {
		font-size: 26px;
	}
	.casestudy-banner-outer {
		width: 100%;
	}
	.casestudy-intro {
        font-size: 24px;
        line-height: 28px;
    }
    .about-lead-in {
		font-size: 3.4vw;
		line-height: 3.6vw;
	}
	.intro-icon.intro-icon-about {
		top: 2vw;
	}
}

@media (orientation: portrait) and (min-height: 1200px) {
	.about-banner-outer {
		min-height: calc(100vh - 392px);
	}
}

@media (orientation: portrait) and (max-width: 1000px) {
	.title-cs,
	.casestudy-intro {
		font-size: 3.8vw;
		line-height: 4.2vw;
	}
	#casestudy-title-wrapper,
	#about-title-wrapper {
		margin-top: 83px;
	}
	.cs-intro {
		padding-left: 0;
		padding-right: 0;
	}
	.intro-icon.intro-icon-about {
		top: 2.8vw;
	}
	.casestudy-banner-outer {
		width: 95%;
	}
}

@media (orientation: portrait) and (max-width: 650px),
(orientation: landscape) and (max-width: 1000px) {
	#casestudy-title-wrapper {
		height: auto;
		border-top: 1px solid var(--rules-light-grey);
	}
	#case-study-title-cont,
	#about-title-cont {
    	margin-left: 0;
	}
}

@media (orientation: portrait) and (max-width: 650px) {
	.title-cs,
	.title-about {
		font-size: 26px;
		line-height: 27px;
	}
	.title-category {
		display: none;
	}
	.cs-banner-text-cont {
		border-left: none;
		border-bottom: 6px solid var(--black-color);
	}
	.casestudy-intro {
		font-size: 6vw;
		line-height: 6.7vw;
	}
	.casestudy-banner-outer {
        width: 100%;
    }
    .cs-banner-img-cont img {
		padding: 10px;
	}
	.blur-screen-casestudy {
		top: 10px;
		left: 10px;
		width: calc(100% - 20px);
		height: calc(100% - 20px);
	}
	case-studies-rubric {
		border-bottom: 6px solid var(--menu-active-color);
	}
	.galleryberg-image:after {
		width: calc(100% - 12px);
		height: calc(100% - 12px);
		border: 6px solid var(--black-color);
	}
}

@media (max-width: 650px) {
	#case-study-title-cont,
	#about-title-cont
	 {
    	padding-left: 5vw;
	}
    .about-banner-outer {
    	flex-flow: column nowrap;
    }
	.cs-banner-img-cont-singles .cs-banner-frame-outer-l,
	.cs-banner-img-cont-framed .cs-banner-frame-outer-l {
		width: 100%;
	}
	.x2right{
		display:none !important;
	}
	#casestudy-title-wrapper,
	#about-title-wrapper {
		margin-top: 126px;
		padding: 30px 0;
	}
	.casestudy-banner-outer.is-stacked {
		width: 100%;
	}
	.about-banner-text-cont {
		order: 2;
		margin-top: 40px;
	}
	.cs-banner-text-cont {
		min-width: 0;
	}
	.about-lead-in {
		font-size: 10vw;
        line-height: 10.1vw;
		max-width: none;
	}
	.about-intro {
        padding-left: 0;
        padding-right: 0;
    }
    .intro-icon.intro-icon-about {
		display: none;
	}
    .about-banner-img-cont {
    	order: 1;
    }
	.about-banner-img-cont,
	.about-banner-img-cont img {
		width: 100%;
		height: auto;
	}
	.cs-banner-frame-outer-l, .cs-banner-frame-outer-l2 {
        border-radius: 0 0 15px 0;
    }
    .cs-banner-frame-outer-r, .cs-banner-frame-outer-r2 {
        border-radius: 0 0 0 15px;
    }
	.cs-banner-frame-l {
		border-width: 6px 0 6px 6px;
		border-radius: 0 15px 15px 0;
	}
	.cs-banner-frame-r {
		border-width: 6px 6px 6px 0;
		border-radius: 15px 0 0 15px;
	}
	.galleryberg-gallery-container.layout-masonry {
		padding: 0 15px 15px;
	}
	.wp-block-video {
		width: 100%;
		background-color: #fff;
	}
}

@media (max-height: 650px) {
	.cs-banner-img-cont img, .cs-banner-img-cont-singles img, .cs-banner-img-cont-framed img, .about-banner-img-cont img {
		padding: 16px;
	}
}