/*
 Theme Name:     Joe Walkling Child theme
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Child Theme
 Author:         Joe Walkling
 Author URI:     https://www.joewalkling.com
 Template:       Divi
 Version:        1.0.0
*/
 
/* ------------------------------------------------------------------------- */
/* -------------------- Theme customization starts here -------------------- */
/* ------------------------------------------------------------------------- */

:root {
	--black: #000000;
	--dark-grey: #1f1f1f;
	--light-grey: #f2f2f2;
	--white: #ffffff;
	--red: red;
	--yellow: yellow;
	--green: green; 
	--pink: pink;
	--blue: blue;
	--lime: #d3fe05;
	--half-white: rgba(255,255,255,.5);
	--quarter-white: rgba(255,255,255,.25);
	--half-black: rgba(0,0,0,.5);
	--quarter-black: rgba(0,0,0,.25);
	--stone: #FAF9F7;

/* font sizes */
	--font-XXL: clamp(50px, 8vw, 150px);
	--font-XL: clamp(40px, 7vw, 120px);
	--font-L: clamp(34px, 5vw, 80px);	/* h1*/	
	--font-M: clamp(28px, 3vw, 56px);	/* h2*/	
	--font-S: clamp(28px, 2vw, 48px);	/* h3 */	
	--font-XS: clamp(24px, 1.4vw, 44px);	/* h4 +*/	
	--font-XXS: 18px;	/* p */	
	
	--slight: .9em;
	
/* transitions */
	--trans-300: all 300ms ease 0s;
	--trans-500: all 500ms ease 0s;
	--trans-slow: all 2s cubic-bezier(.43,0,0,1) 0s;
	--trans-med: all 1s cubic-bezier(.43,0,0,1) 0s;
	--trans-fast: all .3s cubic-bezier(.43,0,0,1) 0s;
	--cubic-ease: cubic-bezier(.43,0,0,1);
}

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

/* ------------------------------------------------------------------------- */
/* TYPOGRAPHY */
/* ------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6, h7{
	font-family: "montserrat", sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height: 1.2em !important;
	letter-spacing: .1em;
	padding-bottom: 0px;
}
h1{	font-size: 21px !important;	}
h2{	font-size: 20px !important;	}
h3{	font-size: 19px !important;	}
h4{	font-size: 18px !important;	}
h5{	font-size: 18px !important;	}
h6{	font-size: 18px !important;	}
	
body, p{
	font-family: 'montserrat',sans-serif;
	font-weight: 300;
	font-style: normal;
	line-height: 1.4em !important;
}

strong, b{
	font-family: "montserrat", sans-serif;
	font-weight: 700;
	font-style: normal;
}
em, i{
	font-family: "montserrat" ,sans-serif;
	font-weight: 300;
	font-style: italic;
}

/* ------------------------------------------------------------------------- */
/* HEADER */
/* ------------------------------------------------------------------------- */

.ek-hdr-section{
	padding: 0px !important;
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	background-color: var(--white) !important;
}
.ek-hdr-row .et_pb_column{
	display: grid;
	grid-template: auto / 2fr 1fr 2fr;
	grid-gap: 0px;
	align-items: center;
}
.hdr-items{
}

/* logo */
.page-id-388 .ek-logo{
	fill: var(--white);
}
.page-id-388 .show-header .ek-logo{
	fill: var(--black) !important;
}
.ek-logo{
	min-width: 180px;
	width: 14vw;
	max-width: 250px;
	transition: var(--trans-slow);
	grid-column: 2 / span 1;
	margin-left: auto;
	margin-right: auto;
	fill: var(--black);
}
.ek-logo .et_pb_code_inner{
	display: flex;
	flex-direction: column;
}
/* strapline */
.ek-strapline{
	grid-column: 3 / span 1;
	margin-left: auto;
	margin-right: 3vw!important;
}
.ek-strapline p{
	font-size:	14px !important;
	letter-spacing: .2em;
}

.hide-header {
	opacity: 1;
	margin-top: -100px !important;
}
.show-header {
	opacity: 1;
	margin-top: 0px !important;
}

#global-header-section {
	-webkit-transition: var(--trans-slow) !important;
	-moz-transition: var(--trans-slow) !important;
	-o-transition: var(--trans-slow) !important;
	-ms-transition: var(--trans-slow) !important;
	transition: var(--trans-slow) !important;
}

/* ------------------------------------------------------------------------- */
/* Navigation */
/* ------------------------------------------------------------------------- */
#slide-in-open{
	cursor: pointer;
	min-width: 50px;
	width: 3vw;
	max-width: 100px;
	height: 22px;
	margin: 30px 3vw;
	grid-column: 1 / span 1;
}
 
.line{
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background: var(--black);
	opacity: 1;
	-webkit-transition: var(--trans-slow);
	-moz-transition: var(--trans-slow);
	-o-transition: var(--trans-slow);
	transition: var(--trans-slow);
}
 
.line-2 {
	top: 20px;
}

#slide-in-open.open .line{
	background: var(--black);
}
#slide-in-open.open .line-1 {
	top: 0;
	-webkit-transform: rotate(225deg);
	-moz-transform: rotate(225deg);
	-o-transform: rotate(225deg);
	transform: rotate(225deg);
	margin-top: 10px;
}
 
#slide-in-open.open .line-2 {
	top: 0;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	-o-transform: rotate(315deg);
	transform: rotate(315deg);
	margin-top: 10px;
}
 
.slide-in-menu {
	left: 0 !important;
	opacity: 1 !important;
}
 
.slide-in-menu-container {
	min-height: 250px !important;
	padding: 100px 0vw 50px!important;
	-webkit-transition: var(--trans-slow) !important;
	-moz-transition: var(--trans-slow) !important;
	-o-transition: var(--trans-slow) !important;
	-ms-transition: var(--trans-slow) !important;
	transition: var(--trans-slow) !important;
	max-width: 33vw !important;
	border-radius: 0 0 50px 0 !important;
}
.slide-in-menu-container .et_pb_column{
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* menu items */
.menu-item{
	padding: 15px 3vw !important;
}
.mi-work{
	border-top: 1px solid var(--half-black);
}
.mi-nav{
	margin-top: auto;
	margin-bottom: auto !important;
}
.menu-item p{
	font-size: 22px !important;
	letter-spacing: .1em ;
	text-transform: uppercase;
}
.menu-item a{
	color: var(--black);
	position: relative;
	line-height: 1.4em !important;
}
.menu-item a:before{
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 100%;
	height: 1px;
	background-color: var(--black);
	transition: var(--trans-med);
}
.menu-item a:hover:before{
	right: 0 !important;
}

/* ------------------------------------------------------------------------- */
/* BODY */
/* ------------------------------------------------------------------------- */

/* ----- Padding and Margins */
.topsecpad{	padding: 50px 0px 50px !important;}
.secpad{	padding: 50px 0px !important;}
.project-template-topsecpad{padding: 50px 0px 0px !important; }
.project-section { padding: 0px 0px 50px !important;}

.pad15{		padding: 15px;}
.mar15{		margin: 15px;}
.btnmar15{	margin: 0px 15px;}
.flexsec{ display: flex; flex-direction: column;}

/* flex vertical align */
.jw-flex-center{display:flex;flex-direction: column;justify-content:center;}
.jw-flex-end{display:flex;flex-direction: column;justify-content:flex-end;}
.jw-flex-start{display:flex;flex-direction: column;justify-content:flex-start;}

/* ------------------------------------------------------------------------- */
/* HOME page */
/* ------------------------------------------------------------------------- */

/* hedaer section */
.home-hdr-sec{
	background-attachment: fixed;
	background-position: bottom center;
}

/* ------- scroll down scroll arrow */
.ek-scroll-down{
	min-width: 30px;
	width: 4vw;
	max-width: 50px;
	margin: auto ;
	animation: bounce 1s infinite alternate var(--cubic-ease) 300ms
}
@keyframes bounce{
	from 		{ transform: translateY(0);}
	to			{ transform: translateY(15px);}
}

/* ----- video */
.ek-video .et_pb_video_play{
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	margin: 0px !important;
	font-size: 0px !important;
	line-height: 0px !important;
	transition: var(--trans-med);
}
.ek-video .et_pb_video_play:before{
	content: url('http://uh4.e42.myftpupload.com/wp-content/themes/divi-child/resources/play_1.svg');
	display:block;
	min-width: 50px;
	width: 8vw;
	max-width: 80px;
	height: auto;
}
.et_pb_video_overlay_hover:hover{
	background-color: var(--half-black) !important;
}

/* ---------- NEW Project Portfolio */
.ek-new-portfolio .et_pb_post *{
	transition: var(--trans-med);
}
.ek-new-portfolio .et_pb_post{
	display: grid;
	grid-column-gap: 15px;
	grid-template-rows: 1fr auto;
	margin-bottom: 5vh !important;
	position: relative;
}
.ek-new-portfolio .et_pb_post:before{
	content:'';
	display: block;
	position: absolute;
	left: 100%;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--black);
	transition: var(--trans-slow);
	z-index: 0;
}

/* 1st Item */
.ek-new-portfolio .et_pb_ajax_pagination_container > :nth-child(2n - 1){
	grid-template-columns: 50vw auto 1fr;
}
.ek-new-portfolio .et_pb_ajax_pagination_container > :nth-child(2n - 1) .entry-featured-image-url{
	grid-column: 1 / span 1;
}
/* 2nd Item */
.ek-new-portfolio .et_pb_ajax_pagination_container > :nth-child(2n - 0){
	grid-template-columns: 1fr auto 50vw;
	text-align: right !important;
}
.ek-new-portfolio .et_pb_ajax_pagination_container > :nth-child(2n - 0) .entry-featured-image-url{
	grid-column: 3 / span 1;
}

/* image */
.ek-new-portfolio .entry-featured-image-url{
	display: block;
	position: relative;
	padding-top: 66%;
	grid-row: 1 / span 3;
	overflow: hidden;
}
.ek-new-portfolio .entry-featured-image-url img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* title */
.ek-new-portfolio .entry-title{
	grid-column: span 2;
	grid-row: 1 / span 1;
	align-self: flex-end;
	z-index: 999 !important;
	transition: var(--trans-med);
}
.ek-new-portfolio h2.entry-title {
	font-weight: 700;
	text-transform: uppercase;
}
/* year */
.ek-new-portfolio .post-meta{
	grid-row: 2 / span 1;
	align-self: flex-end;
	margin-bottom: 15px !important;
	z-index: 999 !important;
}
/* exceprt */
.ek-new-portfolio .post-content{
	grid-row: 2 / span 1;
	align-self: flex-end;
	margin-bottom: 15px !important;
	z-index: 999 !important;
	
}

/* hover items */
.ek-new-portfolio .et_pb_post:hover:before{
	right: 0;
	left: 0;
}
.ek-new-portfolio .et_pb_post:hover .entry-featured-image-url img{
	transform: scale(105%);
}

/* ------------------------------------------------------------------------- */
/* SELECTED WORK PAGE */
/* ------------------------------------------------------------------------- */

/* duplicate of what's on homepage */

/* ------------------------------------------------------------------------- */
/* Project POST TEMPLATE */
/* ------------------------------------------------------------------------- */
.ek-ftr-carousel .owl-stage{
	transition-timing-function: var(--cubic-ease) !important;
}

/* image ratio */
.ek-ftr-carousel .dp_oc_item {
	transition: var(--trans-med);
}
.ek-ftr-carousel .dp_oc_item > a:first-child {
	grid-column: 2 / span 3;
	grid-row: 1 / span 1;
	display: block;
	padding-top: 50%;
	position: relative;
}
.ek-ftr-carousel .dp_oc_item > a:first-child img{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}
/* arrows */
.ek-ftr-carousel .owl-next{
	display: none !important;
}
.ek-ftr-carousel .owl-prev{
	position: absolute !important;
	top: 50% !important;
	left: -8vw !important;
	transform: translateY(-50%) !important;
	width: 22vw;
	max-width: 35px;
	min-width: 25px;
	opacity: 1 !important;
	transition: var(--trans-300);
}
.ek-ftr-carousel .owl-prev:before{
	content: url('https://uh4.e42.myftpupload.com/wp-content/themes/divi-child/resources/arrow.svg') !important;
	transition: var(--trans-300);
}
.ek-ftr-carousel .owl-prev:hover:before{
	margin-left: 10px !important;
}

/* ----- Video module */
.ek-prjct-video{
	position: relative;
}
.ek-prjct-video .et_pb_video_overlay_hover{
	cursor: url("http://uh4.e42.myftpupload.com/wp-content/themes/divi-child/resources/play-64.png") 32 32, pointer !important;
}
.ek-prjct-video .et_pb_video_play{
	display: none ;
}

/* ------------------------------------------------------------------------- */
/* ABOUT PAGE */
/* ------------------------------------------------------------------------- */

/* ---------- awards and nominations */
/* Awards container */
.ek-award-col{
	display: flex;
	flex-flow: row wrap;
	align-items: flex-end;
	border-bottom: 1px solid rgba(0,0,0,0.25);
}
/* award item title */
.ek-award-title{
	flex-basis: 50%;
}
/* award item project */
.ek-award-project{
	flex-grow: 1;
}
/* award item year */
.ek-award-year{
}

/* ---------- CV */
/* CV container */
.ek-cv-col{
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-end;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	justify-content: flex-end;
}
/* CV item title */
.ek-cv-title{
	min-width: 60%;
}
/* role */
.ek-cv-role{
	flex-basis: 100%;
}

/* ------------------------------------------------------------------------- */
/* FOOTER */
/* ------------------------------------------------------------------------- */

.footer-item a{
	color: var(--black);
	position: relative;
	line-height: 1.2em !important;
}
.footer-item a:before{
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 100%;
	height: 1px;
	background-color: var(--black);
	transition: var(--trans-med);
}
.footer-item a:hover:before{
	right: 0 !important;
}	

/* ------------------------------------------------------------------------- */
/* LINKS */
/* ------------------------------------------------------------------------- */
a:link {
}
a:visited {}
a:hover:not(.menu-item a, .footer-item a, .entry-title a, a.et_pb_button, .dp_oc_post_title a){
	text-decoration: underline;
}
a:active {}

/* ------------------------------------------------------------------------- */
/* Login */
/* ------------------------------------------------------------------------- */
.tml{
	font-size:20px!important;
}
.tml-field{
	padding: .7em 1em!important;
	border: 1px solid var(--dark-grey)!important;
	background:#fff!important;
}
.tml-button{
	font-size:20px!important;
	padding: .3em 1em!important;
	background:var(--dark-grey)!important;
	border: 1px solid var(--dark-grey)!important;
	color:#fff!important;
}
.tml-button:hover{
	background:#fff!important;
	border: 1px solid var(--dark-grey)!important;
	color:var(--dark-grey)!important;
}

/* errors */.tml .tml-error {
	color: var(--red); 
	border: 1px solid var(--red)!important;
	text-transform: capitalize; 
	font-size: 18px;
	letter-spacing:0px;
	line-height:1.3em!important;
	box-shadow:none!important;
	padding:25px;
}

/* Success */.tml .tml-success {
	color: var(--green);
	border: 1px solid var(--green)!important;
	text-transform: capitalize; 
	font-size: 18px;
	letter-spacing:0px;
	line-height:1.3em!important;
	box-shadow:none!important;
	padding:25px!important;
}

/* message */.tml-message {
	color: var(--blue); 
	border: 1px solid var(--blue)!important;
	text-transform: capitalize; 
	font-size: 18px;
	letter-spacing:0px;
	line-height:1.3em!important;
	box-shadow:none!important;
	padding:25px!important;}

/* passwords */
#pass-strength-result.short {
    background-color: var(--red);
    border-color: var(--red);
    opacity: 1;
}
#pass-strength-result.bad {
    background-color: var(--pink);
    border-color: var(--pink);
    opacity: 1;
}
#pass-strength-result.good {
    background-color: var(--yellow);
    border-color: var(--yellow);
    opacity: 1;
}
#pass-strength-result.strong {
    background-color: var(--green);
    border-color: var(--green);
    opacity: 1;
}

/* ------------------------------------------------------------------------- */
/* MOBILE */
/* ------------------------------------------------------------------------- */

@media only screen and (max-width: 1200px){	
	/* header strapline */
	.ek-strapline p{
		font-size:	12px !important;
		letter-spacing: .1em;
	}
	/* award item title */
	.ek-award-title{
		flex-basis: 100%;
	}
}

@media only screen and (max-width: 980px){
	/* award item title */
	.ek-award-title{
		flex-basis: 50%;
	}
	/* cv grid */
	.ek-cv-col{
		flex-flow: row wrap;
	}
	/* CV item title */
	.ek-cv-title{
		flex-basis: 100%;
	}
}

@media only screen and (max-width: 900px){
	/* --- header */
	.ek-hdr-row .et_pb_column{
		grid-template: auto / 1fr 3fr 1fr;
	}
	/* header strapline */
	.ek-strapline {
		display: none !important;
	}
}

@media only screen and (min-width: 901px){
	/* header section strapline */
	.ek-strapline-2 {
		display: none !important;
	}
}

@media only screen and (min-width: 769px){
	/* hover items for footer carousel items*/
	.owl-stage-outer:hover .dp_oc_item{
		-moz-transform: scale(0.85);
		-webkit-transform: scale(0.85);
		-o-transform: scale(0.85);
		-ms-transform: scale(0.85);
		transform: scale(0.85);
		filter: grayscale(1);
	}
	.owl-stage-outer .dp_oc_item:hover{
		-moz-transform:none;
		-webkit-transform:none;
		-o-transform:none;
		-ms-transform:none;
		transform:none;
		filter: grayscale(0);
	}
}

@media only screen and (max-width: 768px){
	/* --- slide in nav */
	.slide-in-menu-container {
		max-width: 66vw !important;
	}
	/* --- logo */
	#slide-in-open.open + .ek-logo {
		fill: var(--white) !important;
	}
}

@media only screen and (max-width: 767px){
	/* award item title */
	.ek-award-title{
		flex-basis: 100%;
	}
	/* portfolio  */
	.ek-new-portfolio .et_pb_post{
		grid-template-columns: 50vw auto 1fr !important;
	}
	.ek-new-portfolio .entry-featured-image-url{
		grid-column: 1 / span 1 !important;
		margin-bottom: 15px ;
	}
	.ek-new-portfolio .et_pb_post *{
		text-align: left !important;
	}
}

@media only screen and (max-width: 600px){
	/* --- slide in nav */
	.slide-in-menu-container {
		max-width: 100vw !important;
		border-right: 0px !important;
	}
	
	/* portfolio  */
	.ek-new-portfolio .et_pb_post{
		grid-template: auto / 1fr !important;
	}
	.ek-new-portfolio .et_pb_post *{
		grid-column: auto !important;
		grid-row: auto !important;	
	}
	.ek-new-portfolio .post-meta{
		display: none !important;
	}
	
	/* footer carousel arrow navs */
	.ek-ftr-carousel .owl-nav{
		display: none !important;
	}
	/* footer carousel image ratio */
	.ek-ftr-carousel .dp_oc_item {
		transition: var(--trans-med);
	}
	.ek-ftr-carousel .dp_oc_item > a:first-child {
		padding-top: 100%;
	}
}