/*
 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: #1a1a1a;
	--half-black: rgba(0,0,0,0.5);
	--quarter-black: rgba(0,0,0,0.25);
	--dark-grey: #1f1f1f;
	--white: #fafafa;
	--half-white: rgba(255,255,255,0.5);
	--quarter-white: rgba(255,255,255,0.25);
	--red: red;
	--yellow: yellow;
	--green: green; 
	--pink: pink;
	--blue: blue;
	
	--trans-500: all 500ms ease 0s;
	--trans-300: all 300ms ease 0s;
	--trans-slow: all 1s cubic-bezier(.36,0,.3,1) 0s;
	--trans-med: all 750ms cubic-bezier(.36,0,.3,1) 0s;
	--trans-fast: all 500ms cubic-bezier(.36,0,.3,1) 0s;
	
	/* typography */
	--oli-font: 'neue-haas-unica', helvetica, arial, sans-serif;
	--font-reg: 300 !important;
	--font-bold: 400 !important;

	--line-height-heading: .9em;
	--line-height-slight: 1.15em;
	--line-height-normal: 1.2em;
	
	--font-L: 35px;
	--font-M: 28px;
	--font-S: 22px;
	--font-XS: 18px;
	
	/* graphics */
	--play: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m50,6.00001c24.26167,0,44,19.73831,44,44s-19.73833,43.99998-44,43.99998S6,74.26168,6,50.00001,25.73832,6.00001,50,6.00001m0-1C25.14718,5.00001,5,25.14719,5,50.00001s20.14719,44.99998,45,44.99998,45-20.14717,45-44.99998S74.85281,5.00001,50,5.00001h0Zm-18.7994,51.15907h-1.7549v-12.31814h4.32184c1.64362,0,2.58574.23985,3.39852.88647.77519.62782,1.21881,1.62483,1.21881,2.80679,0,1.12708-.38797,2.01355-1.14512,2.67822-.79399.70151-1.66242.94211-3.34288.94211h-2.69626v5.00455Zm2.82559-6.44516c.94211,0,1.5331-.16617,1.97596-.57294.44361-.38797.68346-.96016.68346-1.60678,0-.62782-.23985-1.20001-.68346-1.58798-.44286-.40602-1.03384-.57294-1.97596-.57294h-2.82559v4.34064h2.82559Zm8.07601,4.91207h6.40832v1.5331h-8.16322v-12.31814h1.7549v10.78505Zm10.73543-2.16092l-1.2564,3.69401h-1.86468l4.5241-12.31814h1.88423l4.54289,12.31814h-1.92032l-1.27445-3.69401h-4.63538Zm2.32709-6.72186l-1.81054,5.24516h3.62033l-1.80979-5.24516Zm10.92039,10.41587h-1.75415v-4.87598l-4.65417-7.44217h2.06844l2.41957,4.06319c.18421.31354.73835,1.34813.9782,1.82783.36993-.73835.70226-1.34813.97896-1.82783l2.36393-4.06319h2.06844l-4.46921,7.44217v4.87598Z'/%3E%3C/svg%3E");
	
}

::selection{
	color: var(--white);
	background: var(--dark-grey);
}

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


h1, h2, h3, h4, h5, h6, h7{
	font-family: var(--oli-font);
	font-weight: var(--font-reg);
	font-style: normal;
	line-height: var(--line-height-heading);
}
h1{
	font-size: var(--font-L);
}
h2{
	font-size: var(--font-M);
}
h3{
	font-size: var(--font-S);
}
h4, h5, h6{
	font-size: var(--font-XS);
}

body, p{
	font-family: var(--oli-font);
	font-weight: var(--font-reg);
	font-style: normal;
	font-size: var(--font-XS);
	line-height: var(--line-height-slight);
}

strong, b{
	font-family: var(--oli-font);
	font-weight: var(--font-bold);
	font-style: normal;
}
em, i{
	font-style: italic;
}

.font-reg{
	font-family: var(--oli-font);
	font-weight: var(--font-reg);
}
.font-bold{
	font-family: var(--oli-font);
	font-weight: var(--font-bold);
}

/* ------------------------------------------------------------------------- */
/* HEADER */
/* ------------------------------------------------------------------------- */
/* header section */
.hide-header {
	margin-top: -100px !important;
} 
.show-header {
	margin-top: 0px !important;
}
#global-header-section {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	-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;
}

/* header row */
.oc-hdr .et_pb_column{
	display: flex;
	flex-flow: row nowrap;
	grid-gap: 15px;
	justify-content: space-between;
	align-items: flex-end;
}
/* logo */
.oc-logo{
	height: auto;
	margin: 0px !important;
	padding: 0px !important;
	line-height: 0em !important;
}
.oc-logo h1{
	padding: 0px !important;
}
@media only screen and (max-width: 500px){
	.oc-logo{
		max-width: 200px;
	}
}
/* ------------------------------------------------------------------------- */
/* Navigation */
/* ------------------------------------------------------------------------- */

/* menu*/
.oc-menu{
	word-spacing: 2em !important;
	padding-bottom: 5px !important;
}
/* menu items */
.oc-menu a{
	position: relative;
	padding-bottom: 5px !important;
}
.oc-menu a:before{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%;
	right: 50%;
	background: var(--black);
	height: 1px;
	-webkit-transition: var(--trans-fast) !important;
	-moz-transition: var(--trans-fast)  !important;
	-o-transition: var(--trans-fast)  !important;
	-ms-transition: var(--trans-fast)  !important;
	transition: var(--trans-fast)  !important;
}
.oc-menu a:hover:before{
	left: 0;
	right: 0;
}

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

/* ----- Padding and Margins */
.topsecpad	{	padding: 61px 0px 20px !important;}
.secpad		{	padding: 20px 0px !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;}


/* ------------------------------------------------------------------------- */
/* HOMEPAGE / WORK */
/* ------------------------------------------------------------------------- */
/* PORTFOLIO */
.oc-portfolio .et_pb_ajax_pagination_container{
	display: grid;
	grid-template: auto / 1fr 1fr;
	grid-gap: 1vw;
}
/* portfolio image */
.oc-portfolio .et_portfolio_image{
	display: block;
	padding-top: 60%;
	position: relative;
	overflow: hidden !important;
}
.oc-portfolio .et_portfolio_image img{
	display: block;
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: cover;
	-webkit-transition: var(--trans-med) !important;
	-moz-transition: var(--trans-med)  !important;
	-o-transition: var(--trans-med)  !important;
	-ms-transition: var(--trans-med)  !important;
	transition: var(--trans-med)  !important;
}
.oc-portfolio .et_pb_portfolio_item:hover .et_portfolio_image img{
	transform: scale(103%);
}

/* title */
.oc-portfolio .et_pb_module_header{
	margin: 0px !important;
	padding: 15px 0px 0px ;
	text-align: center !important;
}

/* Category */
.oc-portfolio .post-meta{
	font-weight: var(--font-bold);
	opacity: 1;
}
.oc-portfolio .post-meta a{
	color: var(--black) !important;
}

@media only screen and (min-width: 981px){
	/* title */
	.oc-portfolio .et_pb_module_header{
		padding: 0px 0px 0px !important;
	}
	.oc-portfolio .et_pb_module_header a{
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		margin: 0px !important;
		padding: 15px !important;
		color: var(--white) !important;
		background: var(--half-black);
		-webkit-transition: var(--trans-med) !important;
		-moz-transition: var(--trans-med)  !important;
		-o-transition: var(--trans-med)  !important;
		-ms-transition: var(--trans-med)  !important;
		transition: var(--trans-med)  !important;	
		opacity: 0;
	}
	.oc-portfolio .et_pb_portfolio_item:hover .et_pb_module_header a{
		opacity: 1;
	}
	/* Category */
	.oc-portfolio .post-meta{
		display: flex;
		flex-flow: column wrap;
		justify-content: flex-end;
		align-items: center;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 15px;
		width: 100%;
		height: auto;
		margin: 0px !important;
		padding: 0px !important;
		-webkit-transition: var(--trans-med) !important;
		-moz-transition: var(--trans-med)  !important;
		-o-transition: var(--trans-med)  !important;
		-ms-transition: var(--trans-med)  !important;
		transition: var(--trans-med)  !important;	
		opacity: 0;
		pointer-events: none !important;
	}
	.oc-portfolio .post-meta a{
		color: var(--white) !important;
	}
	.oc-portfolio .et_pb_portfolio_item:hover .post-meta {
		opacity: 1;
	}
}



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

/* ------------------------------------------------------------------------- */
/* PROJECT POST TEMPLATE */
/* ------------------------------------------------------------------------- */
/* project section */
.project-template-sec{
	padding: 0px !important;
}
/* project row */
/* project credits */

.oh-laurel{
	max-width: 200px !important;
	margin: 15px !important;
	padding: 15px !important;
}

/* project video */
@media only screen and (min-width: 769px){	
	.project-video{
		max-width: 46vw !important;
		margin: auto !important;
	}	
}
@media only screen and (min-width: 980px){
	.project-video .et_pb_video_overlay{
		cursor: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' width='128' height='128' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='m50,6.00001c24.26167,0,44,19.73831,44,44s-19.73833,43.99998-44,43.99998S6,74.26168,6,50.00001,25.73832,6.00001,50,6.00001m0-1C25.14718,5.00001,5,25.14719,5,50.00001s20.14719,44.99998,45,44.99998,45-20.14717,45-44.99998S74.85281,5.00001,50,5.00001h0Zm-18.7994,51.15907h-1.7549v-12.31814h4.32184c1.64362,0,2.58574.23985,3.39852.88647.77519.62782,1.21881,1.62483,1.21881,2.80679,0,1.12708-.38797,2.01355-1.14512,2.67822-.79399.70151-1.66242.94211-3.34288.94211h-2.69626v5.00455Zm2.82559-6.44516c.94211,0,1.5331-.16617,1.97596-.57294.44361-.38797.68346-.96016.68346-1.60678,0-.62782-.23985-1.20001-.68346-1.58798-.44286-.40602-1.03384-.57294-1.97596-.57294h-2.82559v4.34064h2.82559Zm8.07601,4.91207h6.40832v1.5331h-8.16322v-12.31814h1.7549v10.78505Zm10.73543-2.16092l-1.2564,3.69401h-1.86468l4.5241-12.31814h1.88423l4.54289,12.31814h-1.92032l-1.27445-3.69401h-4.63538Zm2.32709-6.72186l-1.81054,5.24516h3.62033l-1.80979-5.24516Zm10.92039,10.41587h-1.75415v-4.87598l-4.65417-7.44217h2.06844l2.41957,4.06319c.18421.31354.73835,1.34813.9782,1.82783.36993-.73835.70226-1.34813.97896-1.82783l2.36393-4.06319h2.06844l-4.46921,7.44217v4.87598Z'/%3E%3C/svg%3E") 64 64, pointer !important;
	}
	.project-video .et_pb_video_play{
		display: none !important;
	}
}
@media only screen and (max-width: 980px){
	.project-video .et_pb_video_play{
		display: block !important;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 90px;
		height: 90px;
		margin: 0px;
		content: var(--play);	
	}
}
/* Image Carousel */

/* image carousel arrows */
#project-carousel .owl-next,#project-carousel .owl-prev{
	opacity: 1 !important;
}
#project-carousel .owl-prev:before, #project-carousel .owl-next:before {
    content: "";
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
	transform-origin: center top;
}
/* image carousel previous arrow */
#project-carousel .owl-prev:before{	
    left: 0;
    border-left: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(45deg);
}
/* image carousel next arrow */
#project-carousel .owl-next:before{	
    right: 0;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    transform: rotate(-45deg);
}
/* --------------- carousel */

#project-carousel .owl-carousel .owl-stage-outer{
	height: fit-content;
}
#project-carousel .dp_oc_item {
	height: calc(95vh - 222px);
	display: block;
	transition: var(--trans-300);
}

#project-carousel .dp_oc_item img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	object-fit: contain;
}
/* Lightbox images */
.mfp-bg{
	opacity: 1 !important;
	background-color: #fff !important;
}
.mfp-figure:after{
	display: none !important;
}
.mfp-img{
	max-height: calc(100vh - 100px) !important;
	max-width: 95vw !important;
	padding: 0px !important;
}
.mfp-close{
	opacity: 1 !important;
	position: fixed !important;
	font-size: clamp(40px, 5vw, 100px) !important;
	right: 15px !important;
	top: 15px !important;
	color: var(--black) !important;
	cursor: pointer !important;
}
.mfp-bottom-bar{
	position: fixed;
	top: auto;
	bottom: 25px;
	left: 0;
	right: 0;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	height: fit-content;
}
.mfp-bottom-bar *{
	position: relative !important;
	color: var(--black) !important;
	font-size: var(--font-S) !important;
}
.mfp-counter{
	text-transform: uppercase !important;
}

/* lightbox arrows */
.mfp-arrow {
	width: 49.65vw !important;
	height: calc(100vh - 200px) !important;
	transform: translateY(-50%) !important;
	top: 50% !important;
	margin: 0px !important;
}
.mfp-arrow:after{
	content: '' !important;
}
.mfp-arrow-left{
	cursor: url('https://yorkedance.com/wp-content/themes/divi-child/left-arrow.png') 0 0, pointer !important;
}
.mfp-arrow-right{
	cursor: url('https://yorkedance.com/wp-content/themes/divi-child/right-arrow.png') 0 0, pointer !important;
}

/* post navigation */
.oc-portfolio-nav{
	display: flex;
	flex-flow: row-reverse nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0px !important;
	width: 100% !important;
	max-width: 100% !important;
}
.oc-portfolio-nav:after{
	display: none !important;
}
/* labels */
.oc-portfolio-nav .nav-label{
	text-transform: uppercase;
}
.oc-portfolio-nav .nav-previous .nav-label{
	padding-right: 50px;
}
.oc-portfolio-nav .nav-next .nav-label{
	padding-left: 50px;
}

.oc-portfolio-nav .meta-nav{
	display: none !important;
}
/* Post Navigation arrows */
.oc-portfolio-nav > span:before{
	content: '';
	position: absolute;
	display: block;
	top: 50%;
	width: 40px;
	height: 40px;
	border-bottom: 2px solid var(--black);
	transform-origin: center top;
}
.oc-portfolio-nav .nav-previous:before{
	right: 8px;
	border-right: 2px solid var(--black);	
	transform: rotate(-45deg) translateY(-50%);
}
.oc-portfolio-nav .nav-next{
	margin-right: auto;
}
.oc-portfolio-nav .nav-next:before{
	left: 8px;
	border-left: 2px solid var(--black);	
	transform: rotate(45deg) translateY(-50%);
}

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

/* footer row */
.oc-ftr-ctr .et_pb_column{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}
.oc-ftr-ctr *{
	font-size: 14px !important;
}

/* ------------------------------------------------------------------------- */
/* LINKS */
/* ------------------------------------------------------------------------- */
a:link {}
a:visited {}
a:hover {}
a:active {}

/* ------------------------------------------------------------------------- */
/* COOKIES */
/* ------------------------------------------------------------------------- */
.cky-consent-container *{
	border-radius: 0px !important;
}
.cky-consent-container{
	bottom: 2vw !important;
	right: 2vw !important;
	max-width: 96% !important;
}
.cky-consent-bar{
	padding: 15px !important;
	box-shadow: none !important;
	text-align: center !important;
	border: 1px solid var(--half-black) !important;
}

/* ------------------------------------------------------------------------- */
/* 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 (min-width: 2000px){
	/* PORTFOLIO */
	.oc-portfolio .et_pb_ajax_pagination_container{
		grid-template: auto / 1fr 1fr 1fr;
	}
}
@media only screen and (max-width: 980px){
	#project-carousel .dp_oc_item {
		padding-top: 100%;
		height: auto !important;
	}
}
@media only screen and (max-width: 500px){
	/* navigation */
	.oc-menu {
		word-spacing: 0.5em !important;
		padding-bottom: 0px !important;
	}
	/* PORTFOLIO */
	.oc-portfolio .et_pb_ajax_pagination_container{
		grid-template: auto / 1fr;
	}
	
}