/*
 Theme Name:     Valerie Bennett Photography Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Valerie Bennett Photography Child Theme
 Author:         Joe Walkling
 Author URI:     https://www.joewalkling.com
 Template:       Divi
 Version:        1.0.0
*/
 

/* --- Theme Customisation starts here */

/* ------------------------------------------------------------------------- */
/* General  */
/* ------------------------------------------------------------------------- */

/* ----- padding and margins */
.topsecpad{
	padding: 100px 0px 100px !important;
}
.secpad{
	padding: 100px 0px !important;
}

.pad15{
	padding: 15px;
}
.mar15{
	margin: 15px;
}

/* ----- flexbox */
.flexsec{
	display: flex;
	flex-direction: column;
}

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

body {
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
}

h1, h2, h3, h4, h5, h6, h7, strong {
  font-family: "futura-pt", sans-serif;
  font-style: normal;
  font-weight: 600 !important;
}

/* ------------------------------------------------------------------------- */
/* HEADER */
/* ------------------------------------------------------------------------- */
#rb-hdr{
	background-color: #ffffff!important;
}
@media only screen and (max-width: 980px){
	#rb-hdr{
		background-color: #ffffff !important;
	}
}

#rb-hdr-ctr .et_pb_column{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	padding: 15px 0px!important;
}
#rb-logo{
	min-width: 200px;
	width: 78vw;
	max-width: 650px;
	margin: 0px auto 0px 0px!important;
}

#slide-in-open{
	height: 20px;
	min-width: 65px;
	width: 6vw;
	max-width: 200px;
	margin-left: clamp(5px, 2vw, 15px);
	margin-right: 0;
}

/* reveal and hide header */
.hide-header {
	opacity: 0;
	margin-top: -200px !important;
}
.hide-header .slide-in-menu-container{
	display: none;
}
.show-header {
	opacity: 1;
	margin-top: 0px !important;
}
#rb-hdr {
	-webkit-transition: all 1s ease !important;
	-moz-transition: all 1s ease !important;
	-o-transition: all 1s ease !important;
	-ms-transition: all 1s ease !important;
	transition: all 1s ease !important;
}
/* ------------------------------------------------------------------------- */
/* Navigation */
/* ------------------------------------------------------------------------- */
#slide-in-open{
	cursor: pointer;
}
.line{
	display: block;
	position: absolute;
	height: 1px;
	width: 100%;
	background: #000;
	opacity: 1;
	-webkit-transition: 500ms ease-in 200ms;
	-moz-transition: 500ms ease-in 200ms;
	-o-transition: 500ms ease-in 200ms;
	transition: 500ms ease-in 200ms;
}
.line-1, .line-3{
	opacity: 0;
	top: 10px;
}
.line-2 {
	top: 0px;
	height: 1.2em;
	font-size: 20px;
	line-height: 1em!important;
	background: transparent;
}

#slide-in-open.open .line-1 {
	opacity: 1;
	-webkit-transform: rotate(-135deg);
	-moz-transform: rotate(-135deg);
	-o-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
#slide-in-open.open .line-2 {
	-webkit-transform: scale(0%) rotate(-315deg);
	-moz-transform: scale(0%) rotate(-315deg);
	-o-transform: scale(0%) rotate(-315deg);
	transform: scale(0%) rotate(-315deg);
	opacity: 0;
}
#slide-in-open.open .line-3 {
	opacity: 1;
	-webkit-transform: rotate(-225deg);
	-moz-transform: rotate(-225deg);
	-o-transform: rotate(-225deg);
	transform: rotate(-225deg);
}
.slide-in-menu {
	right: 0 !important;
	opacity: 1 !important;
}
.slide-in-menu-container {
	padding: 150px 3vw 150px 43vw !important;
	-webkit-transition: all 500ms ease !important;
	-moz-transition: all 500ms ease !important;
	-o-transition: all 500ms ease !important;
	-ms-transition: all 500ms ease !important;
	transition: all 500ms ease !important;
}
.slide-in-menu-container .et_pb_column{
	column-count: 2 ;
	column-gap: 45px;
}

/* ------ menu items */
.menu-item{
	padding: 10px 15px;
	transition: all 500ms ease 0s;
	width: fit-content !important;
}
@media only screen and (min-width: 768px){
	.menu-item:hover:not(.menu-item-portfolio){
		margin-left: 15px;
		opacity: .5;
	}
}
.menu-item-contact{
	margin-bottom: 100% !important;
}
/* ------------------------------------------------------------------------- */
/* BODY */
/* ------------------------------------------------------------------------- */

/* ----- Galleries */

/* image aspect ratio */
.valben-gallery .et_pb_gallery_image.portrait{
  padding-top: 100%;
  display: block;
}

.valben-gallery .et_pb_gallery_image.portrait 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: #fff !important;
}
.mfp-content{
	max-width: 980px !important;
}
.mfp-figure:after {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    background: #fff !important;
}
.mfp-close{
	position: fixed !important;
	top: 0 !important;
	right: 0 !important;
	left: 0 !important;
	padding: 15px !important;
	color: #000 !important;
	line-height: 0em !important;
	opacity: 1 !important;
	font-size: 80px !important;
	z-index: 999999 !important;
}
.mfp-bottom-bar{
	position: fixed !important;
	top: 0 !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	padding: 15px !important;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
}
.mfp-title{
	color: #000 !important;
	width: fit-content !important;
	display: block;
	margin: auto 0px 0px !important;
	font-size: 30px !important;
	line-height: 1.2em !important;
	padding: 15px !important;
}
.mfp-counter{
	color: #000 !important;
	width: fit-content !important;
	display: block;
	margin: auto 0px 0px !important;
	font-size: 30px !important;
	line-height: 1.2em !important;
	padding: 15px !important;
	position: relative !important;
}
.mfp-arrow-left:after, .mfp-arrow-right:after{
	color: #000;
}
.mfp-arrow-right{
	right: 15px !important;
}
.mfp-arrow-right:after{
	margin-left: auto !important;
}
.mfp-arrow{
	background: transparent !important;
    width: 30%!important;
    height: calc(50% - 50px) !important;
    transform: translateY(-50%);
    top: 50% !important;
	margin-top: 25px !important;
	z-index: 999998 !important;
	opacity: 0;
	transition: all 500ms ease 0s;
	display: flex !important;
	flex-direction: column;
	justify-content: center;
}
/* ------ Footer navigations */

#vb-ftrnav-ctr .et_pb_column{
	display: grid;
	grid-template: auto / repeat(4 , 1fr);
	grid-gap: 45px;
}
.vb-nav-item{
	padding: 15px;
	border: 1px solid rgba(0,0,0,0.2);
	transition: all 500ms ease 0s;
}
.vb-nav-item h4{
	font-size: 13px !important;
}
.vb-nav-item .et_pb_main_blurb_image{
	padding-top: 100%;
	display: block;
	margin-bottom: 0px !important;
	transition: all 500ms ease 0s;
}
.vb-nav-item .et_pb_image_wrap{
	display: block;
}
.vb-nav-item .et_pb_image_wrap img{
	position: absolute;
  	height: 100%;
  	width: 100%;
  	top: 0;
  	left: 0;
  	right: 0;
  	bottom: 0;
  	object-fit: cover;
}
.vb-nav-item .et_pb_blurb_container{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 15px;
	background: #fff;
	transition: all 500ms ease 0s;
}
.vb-nav-item .et_pb_blurb_container h4{
	padding-bottom: 0px !important;
}
.vb-nav-item:hover{
	background: #eee !important;
}
.vb-nav-item:hover .et_pb_main_blurb_image{
	transform: scale(90%);
}
.vb-nav-item:hover .et_pb_blurb_container{
	background: #eee;
}

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

#ftr-ctr .et_pb_column{
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-content: baseline;
}

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

@media only screen and (max-width: 1150px){
	/* footer navigation grid */
	#vb-ftrnav-ctr .et_pb_column{
		grid-gap: 15px;
	}
}
@media only screen and (max-width: 1024px){
	/* menu navigation ctr*/
	.slide-in-menu-container {
		padding: 150px 3vw !important;
	}
}
@media only screen and (max-width: 980px){
	/* footer navigation grid */
	#vb-ftrnav-ctr .et_pb_column{
		grid-template: auto / repeat(2 , 1fr);
		grid-gap: 45px;
	}
}
@media only screen and (max-width: 768px) {
	/* footer nav blurb items */
	.vb-nav-item .et_pb_main_blurb_image{
		padding-top: 150%;
	}
	.vb-nav-item{
		padding: 8px;
	}
	/* section padding */
	.topsecpad{
		padding: 50px 0px 50px !important;
	}
	.secpad{
		padding: 50px 0px !important;
	}
}
@media only screen and (max-width: 600px) {
	/* menu navigation ctr*/
	.slide-in-menu-container .et_pb_column{
		column-count: 1 ;
		column-gap: 0px;
	}
	/* menu items */
	.line-2 {
		font-size: 14px;
		line-height: 1.3em !important;
		text-align: right !important;
	}
	.menu-item-contact{
		margin-bottom: 25px !important;
	}
	/* footer */
	#ftr-ctr .et_pb_column{
		justify-content: center;
	}
	#ftr-ctr .et_pb_text{
		width: 100% !important;
	}
}
@media only screen and (max-width: 500px){
	/* footer navigation grid */
	#vb-ftrnav-ctr .et_pb_column{
		grid-gap: 15px;
	}
	/* section padding */
	.topsecpad{
		padding: 40px 0px 20px !important;
	}
	.secpad{
		padding: 20px 0px !important;
	}
	/* gallery lighbox items */
	.mfp-title{
		font-size: 24px !important;
		line-height: 1em !important;
		padding: 0px !important;
	}
	.mfp-counter{
		font-size: 13px !important;
		line-height: 1em !important;
		padding: 0px !important;
		min-width: 60px ;
		text-align: right !important;
	}
	.mfp-arrow{
		height: calc(80% - 50px) !important;
		justify-content: flex-end;
	}
	.mfp-close{
		padding-right: 5px !important;
	}
}