/*
 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;
	--half-black: rgba(0,0,0,0.5);
	--quarter-black: rgba(0,0,0,0.25);
	
	--dark-grey: #1f1f1f;
	
	--white: #ffffff;
	--half-white: rgba(255,255,255,0.5);
	--quarter-white: rgba(255,255,255,0.25);
	
	--dark-purple: #2C1D3E;
	--purple: #4b3069;
	--lilac: #e1d6eb;
	--coral: #e7a984;
	
	--red: red;
	--yellow: yellow;
	--green: green; 
	--pink: pink;
	--blue: blue;
	
	--trans-500: all 500ms ease 0s;
	--trans-300: all 300ms ease 0s;
	
	--font-heading: 'eb-garamond', serif;
	--font-body: 'futura-pt', sans-serif;
	
	--font-bold: 700;
	--font-regular: 400;
	
	--font-xxl: clamp(36px, 5vw, 48px);
	--font-xl: clamp(32px, 4.5vw, 40px);
	--font-l: clamp(28px, 4vw, 32px);
	--font-m: clamp(24px, 3.5vw, 28px);
	--font-s: clamp(22px, 3vw, 24px);
	--font-xs: clamp(20px, 2.5vw, 22px); 
	--font-xxs: clamp(18px, 2vw, 20px); 

}

::selection{
	color: var(--coral);
	background: var(--purple);
}

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


h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading) ;
	font-weight: var(--font-bold) ;
	font-style: normal;
}
h1{
	font-size: var(--font-xxl) !important;
}
h2{
	font-size: var(--font-xl) !important;
}
h3{
	font-size: var(--font-l) !important;
}
h4{
	font-size: var(--font-m) !important;
}
h5{
	font-size: var(--font-s) !important;
}

body, p{
	font-family: var(--font-body) ;
	font-weight: var(--font-regular) ;
	font-style: normal;
	font-size: var(--font-xs) !important;
}
h6{
	font-family: var(--font-body) ;
	font-weight: var(--font-regular) ;
	font-style: normal;	
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: var(--font-xxs) !important;
}

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


/* ------------------------------------------------------------------------- */
/* HEADER */
/* ------------------------------------------------------------------------- */
/* ----- header section */
.jwd-hdr-sec{
	position:fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100% !important;
	max-width: 100% !important;
	background-color: var(--purple);
	border-bottom: 1px solid var(--coral);
}
/* hide and reveal header */

.hide-header {
	opacity: 1;
	margin-top: -200px !important;
}
.show-header {
	opacity: 1;
	margin-top: 0px !important;
}
#global-header-section {
	-webkit-transition: var(--trans-500) !important;
	-moz-transition: var(--trans-500) !important;
	-o-transition: var(--trans-500) !important;
	-ms-transition: var(--trans-500) !important;
	transition: var(--trans-500) !important;
}

/* ----- header row */
.jwd-hdr-row .et_pb_column{
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
}
/* logo */
.jwd-logo{
	min-width: 200px;
	width: 18vw;
	max-width: 300px;
}


/* hamburger */
#slide-in-open{
	width: 30px;
	cursor: pointer;
	height: 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-left: auto !important;
	margin-right: 0px !important;
}

.line{
	display: block;
	height: 2px;
	width: 100%;
	background: var(--lilac);
	opacity: 1;
	-webkit-transition: var(--trans-500);
	-moz-transition: var(--trans-500);
	-o-transition: var(--trans-500);
	transition: var(--trans-500);
}
.line-1{
	margin-bottom: 7px;
}
.line-2{
	margin: auto !important;
}
.line-3{
	margin-top: 7px;
}
#slide-in-open.open .line{
	background: var(--coral);
}
#slide-in-open.open .line-1 {
	margin-bottom: -2px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
#slide-in-open.open .line-2 {
	width: 0px !important;
	opacity: 0;
}

#slide-in-open.open .line-3 {
	margin-top: -2px;
	-webkit-transform: rotate(135deg);
	-moz-transform: rotate(135deg);
	-o-transform: rotate(135deg);
	transform: rotate(135deg);
}


/* ------------------------------------------------------------------------- */
/* Navigation */
/* ------------------------------------------------------------------------- */

/* slide in menu container */
.slide-in-menu {
	right: 0 !important;
	opacity: 1 !important;
}

.slide-in-menu-container {
	background-color: var(--purple);
	max-width: 500px !important;
	width: 100%;
	padding: 150px 3vw 100px !important;
	border-left: 1px solid var(--coral);
	-webkit-transition: var(--trans-500) !important;
	-moz-transition: var(--trans-500) !important;
	-o-transition: var(--trans-500) !important;
	-ms-transition: var(--trans-500) !important;
	transition: var(--trans-500) !important;
}
.slide-in-menu-container{
	min-height: calc(100vh + 200px) !important;
}
.hide-header .slide-in-menu-container{
	padding-top: calc(150px + 100px) !important;
}
.menu-items h2{
	padding-bottom: 15px !important;
}
.menu-items a{
	color: var(--lilac) !important;
	
	-webkit-transition: var(--trans-500) !important;
	-moz-transition: var(--trans-500) !important;
	-o-transition: var(--trans-500) !important;
	-ms-transition: var(--trans-500) !important;
	transition: var(--trans-500) !important;
}
.menu-items a:hover{
	color: var(--coral) !important;
}



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

/* ----- Padding and Margins */
#main-content .secpad:first-of-type	{	padding: 100px 0px 50px !important;}
.secpad		{	
	padding: 50px 0px !important;
	background-color: var(--lilac);
}
.rowpad{
	padding: 30px 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;}

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

/* ------------------------------------------------------------------------- */
/* Manifesto */
/* ------------------------------------------------------------------------- */
.togglerow .et_pb_toggle_title:before {
	
}



/* ------------------------------------------------------------------------- */
/* Page 2 */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* Page 3 */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* Page 4 */
/* ------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------- */
/* FOOTER */
/* ------------------------------------------------------------------------- */
.jwd-ftr .et_pb_row .et_pb_column{
	display: flex;
	flex-flow: row wrap;
	grid-gap: 15px;
	justify-content: space-between;
}



/* ------------------------------------------------------------------------- */
/* LINKS */
/* ------------------------------------------------------------------------- */
a:link {}
a:visited {}
a:hover {}
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;
}

/* ------------------------------------------------------------------------- */
/* Cookies */
/* ------------------------------------------------------------------------- */
.cky-consent-container{
	max-width: 94% !important;
	margin: 2vw !important;
	bottom: 0 !important;
	right: 0 !important;
}
.cky-consent-container .cky-consent-bar {
    padding: 15px !important;
    box-shadow: none !important;
    border-radius: 15px !important;
}
.cky-btn {
    padding: 7px !important;
    margin: 0 0 0 0 !important;
    border-radius: 25px !important;
	border-width: 1px !important; 
}
.cky-title{
	display: none !important;
}
.cky-notice-btn-wrapper{
	gap: 15px;
}