/*
 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 -------------------- */
/* ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');

:root {
	--black: #000;
	--dark-grey: #2a2a2a;
	--50-dark-grey: rgba(42,42,42,0.5);
	--white: #ffffff;
	--quarter-white: rgba(255,255,255,.25);
	
	--mustard: #C5AB00;
	--red: #FA1E3C;
	--coral: #F87D5A;
	--dark-green: #4E4C2C;
	--purple: #776dbd;
	--grey: #cbc4bc ;
	--stone: #d9ab73;
	--pale-blue: #badef2 ;
	--burgundy: #730623;
	
	--light-grey: #fafaf8 ;
	--mid-grey: #eae9e1 ;
	--light-green: #aaa380 ;
	--pink: #e8999a;
	--yellow: #d9c826;
	--rust: #c04b30 ;
	
	--green: green; 
	--blue: blue;
}

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

/* ------------------------------------------------------------------------- */
/* TYPOGRAPHY */
/* ------------------------------------------------------------------------- */
body, p {
	font-family: 'Poppins', sans-serif;
	font-weight: 400;
	font-style: normal;
}
h1, h2, h3, h4, h5, h6, h7, strong{
	font-family: 'stratos', sans-serif;
	font-weight: 400;
	font-style: normal;
	padding-bottom: 0px ;
}

#feattext h1{
	font-size: clamp(30px, 10vw, 100px) !important;
}
#feattext h2{
	font-size: clamp(30px, 5vw, 80px) !important;
}
#feattext h3{
	font-size: clamp(30px, 4vw, 60px) !important;
}
/* ------------------------------------------------------------------------- */
/* Pre Loader */
/* ------------------------------------------------------------------------- */
/* Projects */ 	.page-id-254 .preloader-plus{	background-color: var(--mustard); }
/* about */ 	.page-id-254 .preloader-plus{	background-color: var(--stone); }

.preloader-plus.complete{
	display: none !important;
}
.preloader-plus .preloader-custom-img{
	animation: rotation 1s infinite cubic-bezier(.17,.67,.83,.67);
}
/* ------------------------------------------------------------------------- */
/* HEADER */
/* ------------------------------------------------------------------------- */

/* header section*/
#bb-hdr{
	position: fixed;
	top: 0;
	z-index: 999999;
	width: 100%;
	backdrop-filter: blur(50px);
	-webkit-backdrop-filter: blur(50px);
	-webkit-transition: all 0.5s ease !important;
	-moz-transition: all 0.5s ease !important;
	-o-transition: all 0.5s ease !important;
	-ms-transition: all 0.5s ease !important;
	transition: all 0.5s ease !important;
}

/* Reveal and Hide Header */
.hide-header {
	opacity: 0;
	margin-top: -100px !important;
	pointer-events: none!important;
}
.show-header {
	opacity: 1;
	margin-top: 0px !important;
}


/* header row */
#bb-hdr-ctr .et_pb_column{
	display: grid;
	grid-template: auto / 1fr 140px;
	align-items: center;
	height: 65px !important;
}
@media only screen and (max-width:600px){
	#bb-hdr-ctr .et_pb_column{
		height: 45px !important;
	}
}
/* title */
#bb-title{
	margin: 0px !important;
	grid-column: 1 / 2;
}
#bb-title p{
	padding: 0px !important;
	font-size: clamp(18px, 1.8vw, 30px);
}

/* hamburger */
#slide-in-open{
	width: 6vw;
	min-width: 50px;
	max-width: 80px;
	height: 20px !important;
	grid-column: 2 / 3;
	margin: 0px 0px 0px auto !important;
}
#slide-in-open .et_pb_text_inner{
	height: 10px!important;
}

/* asterisk and contact email*/

.bbb-contact{
	position: fixed ;
	bottom: 0;
	right: 0;
	width: fit-content ;
	height: auto;
	z-index: 999999!important;
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
}
.bbb-asterisk{
	background: url('http://6zz.849.myftpupload.com/wp-content/themes/divi-child/resources/bbb-asterisk.svg') no-repeat center;
	width: 3vw;
	min-height: 40px;
	height: 3vw;
	min-width: 40px;
	cursor: pointer;
}
.bbb-asterisk {
	cursor:pointer;
	margin: 15px;
}
.hdr-email{
	transform: rotate(90deg);
    transform-origin: top right;
    background: var(--white);
    border-radius: 25px;
	border: 1px solid var(--black);
    position: fixed;
    bottom: auto;
    right: 15px;
    height: 3vw;
    min-height: 40px;
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 0px 25px;
    margin-bottom: 40px;
}
.bbb-asterisk:hover + .hdr-email{
	display: flex;
}

/* rotate asterisk */

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
#asterisk:hover{
	animation: rotation 1s infinite cubic-bezier(.17,.67,.83,.67);
}
/* ------------------------------------------------------------------------- */
/* Navigation */
/* ------------------------------------------------------------------------- */

/* fulscreen nav menu container */

#bb-nav{
	justify-content: center;
	align-items: center;
}

#bb-nav .menu-nav a{
	font-size: clamp(30px, 5vw, 100px)!important;
	line-height: 1em !important;
}
#bb-nav .menu-nav a:hover{
	color: white !important;
}
.slide-in-menu-container {
	opacity: 1;
	border-left: 1px solid var(--black)!important;
	-webkit-transition: all .8s cubic-bezier(.28,0,.22,.99) !important;
	-moz-transition: all .8s cubic-bezier(.28,0,.22,.99) !important;
	-o-transition: all .8s cubic-bezier(.28,0,.22,.99) !important;
	-ms-transition: all .8s cubic-bezier(.28,0,.22,.99) !important;
	transition: all .8s cubic-bezier(.28,0,.22,.99) !important;
}

.menu-item{
	display: block;
	margin-bottom: 15px;
}

/* ----- nav slide in action */
#slide-in-open{
	cursor: pointer;
}
#slide-in-open.open + #bb-logo{
	opacity: 0;
}
.line{
	display: block;
	position: absolute;
	height: 20px;
	line-height: 1em;
	width: 100%;
	background: rgba(0,0,0,0.0)!important;
	opacity: 1;
	-webkit-transition: .5s ease-in-out .1s;
	-moz-transition: .5s ease-in-out .1s;
	-o-transition: .5s ease-in-out .1s;
	transition: .5s ease-in-out .1s;
}
.line-1{
	opacity: 0;
}
#slide-in-open.open + .bb-logo{
	opacity: 0!important;
}
#slide-in-open.open .line-1 {
	opacity: 1;
	-webkit-transform: rotate(-360deg);
	-moz-transform: rotate(-360deg);
	-o-transform: rotate(-360deg);
	transform: rotate(-360deg);
}
#slide-in-open.open .line-2 {
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
	opacity: 0;
}
.slide-in-menu {
	right: 0 !important;
	opacity: 1 !important;
}

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

/* Padding / Margins */
.topsecpad{	padding: calc(66px + 25px) 0px 25px 0px !important;}
.secpad{	padding: 25px 0px 25px 0px !important;}
.pad15{		padding: 10px !important;}
.mar15{		margin: 10px !important;}
.btnmar15{	margin: 0px 10px !important;}

@media only screen and (max-width: 600px){
	.topsecpad{	padding: calc(45px + 25px) 0px 25px 0px !important;}
}

/* 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;}
.flexsec{display:flex; flex-direction: column;justify-content: center; align-items: center;}

/* ---------- Homepage ----- */

/* projects */
#image-and-title-row{
	position: absolute;
	top:50%;
	left: 50%;
	right: auto;
	bottom: auto;
	transform: translate(-50%, -50%);
	margin: auto 0px !important;
}


/* project image */
#prjct-feat-img{
	overflow: hidden;
	transition: all 500ms ease 0s;
	z-index: 1;
	width: fit-content;
	max-width: 62% !important;
	max-height: 70vh;
	transition: all 500ms ease 0s;
}

#prjct-feat-img img{
	transition: all 500ms ease 0s;
	filter: saturate(0);
	mix-blend-mode: multiply;
	min-height: 100px!important;
	max-height: 70vh;
	width: auto;
}
#image-and-title-row:hover #prjct-feat-img img{
	filter: saturate(1);
	mix-blend-mode: normal;
}

/* project heading */
#prjct-txt{
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 100%;
	pointer-events: none;
	z-index: 9;
	max-width: 78%;
}
#prjct-txt h1{
	font-size: clamp(50px, 11vw, 300px) !important;
	line-height: .85em !important;
	padding: 0px !important;
}

/* project information */
#prjct-info-row{
	width: 100%;
	padding: 0px 3vw;
	margin-top: auto;
	margin-bottom: 0px;
}
/* project toggle */
#ewd-toggle{	
	margin: 0px !important;
	display: flex;
	flex-direction: column-reverse;
	padding: 0px 10px!important;
}
#ewd-toggle .et_pb_toggle_title{
	padding: 13px 0px 17px 25px !important;
	transition: all 1s ease 0s;
}
#ewd-toggle .et_pb_toggle_title:before{
	left: -4px !important;
	right: 0px !important;
	width: fit-content;
	transition: all 500ms ease 0s;
}
#ewd-toggle.et_pb_toggle_open .et_pb_toggle_title:before{
	transform: rotate(-45deg);
}
#ewd-toggle .et_pb_toggle_content{
	padding: 0px !important;
}


@media only screen and (max-width: 768px){
	/* container */
	#image-and-title-row{
		position: relative;
		top:auto;
		left: auto;
		right: auto;
		bottom: auto;
		transform: translate(0, 0);
		margin: 0px 0px !important;
	}
	#image-and-title-row .et_pb_column{
		display: flex;
		flex-direction: column-reverse;
		grid-gap: 30px;
	}
	/* heading text */ #prjct-txt{
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		margin: auto;
		transform: translate(0, 0);
		max-width: 94%;
	}
	#prjct-txt h1{
		text-align: left !important;
	}
	/* image */ #prjct-feat-img{
		max-width: 94% !important;
	}
}



/* ----- Marina Mascarell */
#prjct-feat-img.img-marina{
	background-color: var(--mustard);
	clip-path: polygon(75% 0, 100% 85%, 55% 100%, 0 70%, 36% 0);
}
#image-and-title-row:hover #prjct-feat-img.img-marina{
	clip-path: polygon(100% 0, 100% 100%, 55% 100%, 0 100%, 0 0);
}
/* ----- Vasco Mendonca */
#prjct-feat-img.img-vasco{	
	background-color: var(--red);
	clip-path: polygon(100% 27%, 49% 100%, 0 64%, 0 30%, 53% 0);
}
#image-and-title-row:hover #prjct-feat-img.img-vasco{
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0, 53% 0);
}
/* ----- Macnas */
#prjct-feat-img.img-macnas{
	background-color: var(--coral);
	clip-path: polygon(75% 0, 99% 86%, 35% 100%, 0 77%, 25% 0);
}
#image-and-title-row:hover #prjct-feat-img.img-macnas{
	clip-path: polygon(100% 0, 100% 100%, 35% 100%, 0 100%, 0 0);
}
/* ----- Scottish Ballet Health */
#prjct-feat-img.img-scottish{
	background-color: var(--purple);
	clip-path: polygon(100% 20%, 85% 100%, 26% 97%, 0 48%, 22% 0);
}
#image-and-title-row:hover #prjct-feat-img.img-scottish{
	clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 48%, 0 0);
}
/* ----- Netizenship */
#prjct-feat-img.img-netizenship{
	background-color: var(--dark-green);
	clip-path: polygon(62% 0, 84% 54%, 68% 100%, 0 70%, 0 13%);
}
#image-and-title-row:hover #prjct-feat-img.img-netizenship{
	clip-path: polygon(100% 0, 100% 38%, 100% 100%, 0 100%, 0 0);
}
/* ----- Espaco Agora Now */
#prjct-feat-img.img-espaco{
	background-color: var(--burgundy);
	clip-path: polygon(60% 0, 100% 20%, 100% 100%, 14% 100%, 0 39%);
}
#image-and-title-row:hover #prjct-feat-img.img-espaco{
	clip-path: polygon(45% 0, 100% 0, 100% 100%, 0 100%, 0 0);
}

/* ---------- About Naomi ----- */
/* container */
#movetextanimation .et_pb_column{
	display: flex;
	flex-flow: column wrap;	
	justify-content: flex-end;
	min-height: 80vh;
}
#movetextanimation h2{
	padding-bottom: 0px !important;
}


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

.footer-ctr .et_pb_column{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: baseline;
}
.et_pb_social_media_follow li{
	margin-bottom: 0px !important;
}

@media only screen and (max-width:500px){
	.footer-ctr .et_pb_column{
		flex-flow: column nowrap;
		align-items: flex-start !important;
	}
}
/* ------------------------------------------------------------------------- */
/* LINKS */
/* ------------------------------------------------------------------------- */
a:link {}
a:visited {}
a:hover {
}
a:active {}

.white-link a{ 
	color: var(--white) !important;
}
.white-link a:hover{ 
	color: var(--white) !important;
	text-decoration: underline;
}
.box-link a{
	transition: all 300ms ease 0s;
}
.box-link a:hover{
	background: var(--dark-grey);
	color: var(--white);
}
/* ------------------------------------------------------------------------- */
/* 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(--pink);
    border-color: var(--pink);
    opacity: 1;
}
#pass-strength-result.bad {
    background-color: var(--red);
    border-color: var(--red);
    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;
}