/*
 Theme Name:   ArtPress-Vertical
 Description:  Susty Child Theme
 Author:       Steve Russell Studios
 Template:     susty-master
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  sustychild
*/


/**************************
* Site Structure and Spacing
 * ***********************/
:root {
  font-size: 62.5%;
}
.logo img {width:7.2rem;}
.logo {
    flex: 0 7.2rem;
    text-align: center;
    line-height: 0;
    margin-right: 5px;
	padding:10px 30px;
}
body{overflow-x:hidden;}
header#masthead {height:100vh;position:fixed;flex-direction:column;align-items:unset!important;}
header#masthead h1, header#masthead p {flex:unset;}
#content {max-width:2560px;width:100vw;overflow-x:hidden;}
footer#colophon {max-width:2560px;}
.menu-navigation-container {max-width:2560px;}
/*
@media only screen and (max-width: 1939px) {
	header#masthead {max-width:1940px;}
	#content {max-width:1940px;}
	footer#colophon {max-width:1940px;}
	.menu-navigation-container {max-width:1940px;}
}
@media only screen and (max-width:1099px){
	header#masthead {max-width:900px;}
	#content {max-width:900px;}
	footer#colophon {max-width:900px;}
	.menu-navigation-container {max-width:900px;}
}
@media only screen and (max-width:839px){
	header#masthead {max-width:630px;}
	#content {max-width:630px;}
	footer#colophon {max-width:630px;}

}*/
header#masthead {padding: 0px;margin:0px;z-index:1000;}
#content {padding: 0 30px 0 343px!important;}
footer#colophon {padding:0 30px 0 350px;}

body {border-top:none;}
header#masthead h1, header#masthead p {
	padding:1rem;
	font-size: 3.0rem;
    line-height: 2.2rem;
}
/**************************
 * Page Transitions
 * ***********************/
#fader {
    position: fixed;
    left: 314px;
	top: 0;
    width: 100%;
    height: 100%;
    z-index: 999999;
	pointer-events: none;
	animation-duration: 300ms;
    animation-timing-function: ease-in-out;
}


@keyframes fade-out {
    from { opacity: 1 }
      to { opacity: 0 }
}

@keyframes fade-in {
    from { opacity: 0 }
      to { opacity: 1 }
}

#fader.fade-out {
    opacity: 0;
    animation-name: fade-out;
}

#fader.fade-in {
    opacity: 1;
    animation-name: fade-in;
}
@media only screen and (max-width:980px){
	#fader {
		left:0!important;
		top: 137px!important;
	}	
}

/**************************
 * Back To Top Button
 * ***********************/
.back-to-top-link {
	opacity:0;
	position:fixed;
	right: 1.5rem;
	bottom:1.5rem;
	background-color:rgba(0.6,0.6,0.6,0.6);
	border-radius:10px;
	font-size:1.4rem;
	color:#fff!important;
	padding:0px .5rem;
	  transition: visibility 0s, opacity 0.5s linear;
}
.back-to-top-link.active {
	opacity:1;
  transition: visibility 0s, opacity 0.5s linear;
}
#top {scroll-margin-top:2em;  scroll-behavior: smooth;}
.back-to-top {
	font-family:dashicons;
}
.back-to-top:after{
	content: "\2191";
	font-size:1.8rem;
	text-align:center;
	display:block;
}
*, html {
  scroll-behavior: smooth!important;
}

/**************************
 * Font Styling
 * ***********************/
@font-face {
    font-family: Quicksand;
    src: url('./fonts/Quicksand-Light.woff') format('woff'),
         url('./fonts/Quicksand-Light.ttf') format('truetype');
    font-weight: 100;
    font-display: swap;
    font-style: normal;
	font-smooth: always;
}
@font-face {
    font-family: Abril;
    src: url('./fonts/Oranienbaum-Regular.woff') format('woff'),
         url('./fonts/Oranienbaum-Regular.ttf') format('truetype');
    font-display: swap;
    font-weight: 700;
	font-smooth: always;
}
b, strong {font-weight:700;}
body, p, a, button, .button {
	font-family: Quicksand, sans-serif;
	font-weight:100;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	font-family: Abril, Times New Roman;
	clear:none;
	font-variant:small-caps;
}
#main a {font-weight:bold;}
.button {font-variant:small-caps;}
article a, article a:hover, article a:active, article a:visited {
	border-bottom:0px!important;
}

header nav a, header#masthead a, footer#colophon nav{text-decoration:none!important;text-transform:uppercase;letter-spacing:4px;}
header nav a {
	font-size:16px;
	font-size:1.6rem;
}
header#masthead h1 a{font-weight:700!important;}
article > header > h1, article > header > h2  {margin: .67em 0;}
h1, article > header > h1, article > header > h2 {font-size:44px;font-size:4.4rem;line-height:3.4rem;}
.page header h1 {font-size:44px;font-size:7.4rem;line-height:7.4rem;}
h2 {font-size:30px;font-size:3rem;line-height:3rem;}
h3 {font-size:20px;font-size:2.0rem;line-height:2.0rem;}
h4 {font-size:19.5px;font-size:1.95rem;line-height:1.95rem;}
h5 {font-size:19px;font-size:1.9rem;line-height:1.9rem;}
h6 {font-size:18.5px;font-size:1.85rem;line-height:1.85rem;}
body, article a,  button {font-size:20px;font-size:2.0rem;line-height:2.2rem;}
.archive article h2 a, .blog article h2 a {font-size:30px;font-size:3rem;}
footer, footer nav {font-size:12px!important;font-size:1.2rem!important;line-height:1.4rem!importance;text-underline-offset: 4px;}
.artwork-details span, .detail-section span {display:block;}

.page-id-693 {font-size:20px;font-size:2.0rem;line-height:2.2rem;}

/**************************
 * Color Styling
 * ***********************/
/* Main Colors */
header#masthead a {color:#595959;}
body {
	color:#595959;
	background-color:#f2f2f2;
}
header#masthead {
	color:#595959;
	background-color:#fff;
	border-bottom:1px rgba(160, 160, 160, 0.3) solid;
}

/* Link settings */
:visited { color: #5D4B62; }
:link:active, :visited:active { color: #99242C; }
:link { color: #274C77;}
/* Button settings */
.button, .button:visited, .nav-links span, .nav-links a {
	background:#f2f2f2!important;
	border: 1px solid #595959!important;
	color: #595959;
}
.button:hover,  .button.active, .nav-links span:hover, .nav-links a:hover{
	background:#595959!important;
	border-color:#595959!important;
	color:#f2f2f2!important;
	border-bottom: 1px solid #595959!important;
}
.button.active, .nav-links span:active, .nav-links a:active {
	border-color:#595959!important;
	border: 1px solid;
	border-bottom: 1px solid #595959!important;
}
/* Page Transition */
#fader {
	background-color:#f2f2f2;
}
/**************************
 * Button Styling
 * ***********************/
.button, .button:visited, .nav-links span, .nav-links a {
	border-radius:0px;
	font-size: calc( 15px + 4 * (100vw / 1500));
  	line-height: 1.5;
	transition-property: background;
	transition-duration: .2s;
	transition-timing-function: linear;
	padding: .6rem 1rem .4rem;
	text-decoration:none;
	display: inline-block;
  	margin-bottom: 5px;
}
.button:hover,  .button.active, .nav-links span:hover, .nav-links a:hover{
	text-decoration:none;
}
.button.active, .nav-links span:active, .nav-links a:active {
	border: 1px solid;
}
.nav-links span, .nav-links a {
	padding: .6rem 1rem .4rem;
}
/**************************
 * Footer Styling
 * ***********************/
.footer-info {text-align:center;}


/**************************
 * Gallery Styling
 * ***********************/
/*img.artwork-image, img.artwork-thumb {margin:auto;display:block;}
img.artwork-thumb {width:270px;}*/
.related-nav .blaze-track > * {max-width:290px;}
.controls .blaze-track > * {max-width:290px;}
@media only screen and (max-width:1099px){

	.gallery-helper {min-height:540px!important;}
}
@media only screen and (max-width:899px){
	img.artwork-thumb {width:135px!important;}
	.related-nav .blaze-track > * {max-width:145px;}
	.controls .blaze-track > * {max-width:145px;}
	.gallery-helper {min-height:320px!important;}
}
.related-nav {text-align:center;}
.related-nav .slick-track {float:left;}

.gallery-helper {overflow:hidden;min-height:720px;margin-bottom:10px;}

.artwork-image {display:block;margin:auto;}
.my-pagination button {
  font-size: 0;
  border-radius: 0px;
  outline: none;
  border: none;
  background: rgba(0,0,0,0);
  cursor: pointer;
  transition: transform 200ms ease, background-color 300ms ease;
}

.my-pagination button.active {
  border: 1px solid #000;
}
.art-title {display:block;}
.blaze-next,
.blaze-prev {
  border: none;
  font-size: 24px;
  background: none;
  cursor: pointer;
  background-position: center;
  background-size: 100%;

}
.blaze-next:after {
	font-family:Dashicons;
	content: "\f345";
}
.blaze-prev:before {
	font-family:Dashicons;
	content: "\f341";
}

.blaze-pagination {
  display: flex;
  gap: 15px;
}

.blaze-pagination button {
  font-size: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  outline: none;
  border: none;
  background: hsl(0deg, 0%, 15%);
  cursor: pointer;
  transition: transform 200ms ease, background-color 300ms ease;
}

.blaze-pagination button.active {
  background: white;
  transform: scale(1.3);
}

.vbox-container { overflow-y: hidden; }
.vbox-title a {color:#fff;}
figure {margin-top:0px;}
.vbox-overlay { width:100vw; overflow:hidden;}
.vbox-overlay * { -webkit-backface-visibility: visible !important; }
/*.blaze-next {
  transform: rotate(180deg);
} */
.controls {
display: flex;
  justify-content: space-between;

}
.controls button {
		line-height:0px;
}
/**************************
 * Gallery Archive Styling
 * ***********************/
.archive-helper {
	display:grid;
	gap:10px;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	justify-items: center;
}
.blog .archive-helper {
	justify-content: unset!important;
}
.archive-helper article {
	max-width:525px;
}
.archive article, .blog article {background-color:#fff;}
@media only screen and (max-width:1440px){
	.archive-helper article  {max-width:525px;}
	.archive-helper { grid-template-columns: 1fr 1fr 1fr;}
}
@media only screen and (max-width:720px){
	.archive-helper { grid-template-columns: 1fr 1fr;}
}
@media only screen and (max-width:549px){
	.archive-helper article  {margin:auto;}
	.archive-helper { grid-template-columns: 1fr;}
}
.archive article, .blog article {
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	text-align:center;
	flex-basis:49%;
}
.archive h2, .blog h2 {
	margin:5px;
}
.archive-inner {padding:5px;}
/**************************
 * Masonry Gallery
 * ***********************/
.grid-item {
  float: left;
  border: 2px solid hsla(0, 0%, 0%, 0.0);
}

.grid{max-width:100%;clear:both;}
/*
@media only screen and (min-width:1100px){
	.grid-sizer{width:540px;}
	.grid-item{width:20%;}
}
@media only screen and (max-width:1099px){
	.grid-sizer{width:25%;}
	.grid-item{width:25%;}
}
@media only screen and (max-width:839px){
	.grid-sizer{width:33%!important;}
	.grid-item{width:33%!important;}
}*/
.grid:after {
  content: '';
  display: block;
  clear: both;
}
.sl-wrapper {
  overflow: hidden!important;
  position: absolute!important;
  height: 100vh!important;
  width: 100vw!important;
}


/**************************
 * Menu Structure Without MegaMax
 * ***********************/
.menu, .sub-menu {
	list-style:none;
}

.sub-menu {
	width:100%;
	display:inline;
	position:absolute;
	transform: translate(0%);
	opacity: 0;
	transition: transform 0.5s, opacity 0.5s;
	background:#fff;
	z-index:900;
}
.menu-item-has-children:hover .sub-menu, .menu-item-has-children:focus+.sub-menu, .menu-item-has-children:focus-within .sub-menu {
	transform: translate(40px);
	opacity: 1;
}

/**************************
 * Mobile Menu
 * ***********************/
@media only screen and (max-width:980px){
	.menu-navigation-container:before{

		content: "Menu";
    	cursor: pointer;	
	}
	.menu {
		width:100%;
		display:inline;
		position:absolute;
		transform: translateY(0%);
		opacity: 0;
		transition: transform 0.5s, opacity 0.5s;
		background:#fff;
		z-index:900;
	}	
	.menu-navigation-container:target+.menu, .menu-navigation-container:before::focus+.menu, .menu-navigation-container:before::focus-within .menu {
		transform: translateY(40px);
		opacity: 1;
	}
	header#masthead {
		justify-content: space-between;
		height: unset;
		width: 100%;
		flex-direction: row;
		align-items:center!important;
  	}
	#content {padding: 85px 1em 0 1em!important;}
	footer#colophon {padding:0 30px!important;}
	.menu-navigation-container ul li {
		padding:10px 35px;
	}	
	.menu-navigation-container ul li:last-of-type {
	padding: 10px 35px;
	}
	/*.menu-navigation-container ul {
		flex-direction: column;
		max-height:0;
		overflow:Hidden;
    	background: #fff;
		box-shadow: 0px 10px 25px #000;
		transition: max-height 0.25s linear;
	}*/
	.mobile-menu {display:block!important;}
	.menu-navigation-container .active  {display:block;max-height:500px;}
	.menu-navigation-container {
		display: inline-block;
    	position: relative;
    	/*margin-top: 114px;*/
		z-index: 2000;
		left:0;
		top:0;
	}
/*	.menu {max-width: 540px;margin: auto!important;}*/
	.menu-item {text-align:right;}
	header nav {order:1}
	.logo {order:2;}
	.logo img {width:5.2rem;}
	.social {
		order:3;
		text-align:right;
		margin:unset!important;
	}

}
.mobile-menu {
	display:none;
	cursor: pointer;
	padding:10px;
	font-size:1.8rem;
	line-height: 1.8rem;
}

/**************************
 * Page Banners
 * ***********************/
.page article header, .blog #main header {
	min-height: 100vh;
display: flex;
  justify-content: center;
  flex-direction: column;
background-size: cover;
	 background-position: center;
	background-repeat:no-repeat;
margin: 0px -35px 50px;
  padding: 20px;
}
.post-thumbnail {
	position: absolute;
	margin: -80px -13px;
	z-index: 100;
}

.page article > header > h1, .page article > header > h2, .page article > header > a, .blog #main > header > h1, .blog #main > header > h2, .blog #main > header > a {
	z-index: 200;
}
@media only screen and (max-width:980px){
	.page article header, .blog #main header {
		min-height:50vh;
		margin: 0px -20px 50px!important;
	}	
}
.page-id-693 article header{
	min-height:unset!important;
}
.titles {max-width:50%;}
/**************************
 * Social Icons
 * ***********************/
header nav {justify-content:space-around;}
.dashicons {line-height: 1;font-size:30px;width:32px;height:32px;border:1px solid #000;margin:2px;}
.menu-item-515, .menu-item-516, .menu-item-517, .menu-item-518 {
	display:inline-block;
float:right;

}
@media only screen and (max-width:980px){
	.menu-item-516, .menu-item-517, .menu-item-518 {padding:10px!important;}
	.menu-item-515 {padding: 10px 35px 10px 10px!important;}
}
.social {
	font-size: 24px;
	margin-left:auto;
	margin-right:auto;
}


.alignfull {
    left: calc(-1rem - 15px);
    position: relative;
    
    max-width: 100vw;
    width: 100vw;
    
	@media only screen and (min-width: 768px) {
        left: calc(-1.25 * (10% + 15px));
    }

	@media only screen and (min-width: 1500px) {
        left: calc(-50vw + 50%); 
    }
}


/**************************
 * Flexbox
 * ***********************/

.flexrow {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:20px;
}
.flexcol{
	flex-grow:1;
	flex-basis:25%;
}
	@media only screen and (max-width: 800px) {
		.flexrow {flex-direction:column!important;}
		
}
/**************************
 * Contact Form
 * ***********************/

/* Styling for the inline reCaptcha notice. And example can be seen on
 * https://complianz.io/how-to-implement-recaptcha-and-consent-for-wp-forms/
 * You can ofcourse edit however you see fit.
 */
 
  /* Hide the Submit button before consent */
.wpforms-submit-container {
	display:none;
}

 /* Display the Submit button if Marketing or ReCaptcha consent was obtained */
.cmplz-google-recaptcha .wpforms-submit-container, .cmplz-marketing .wpforms-submit-container {
	display:block!important;
}

/* Style the button */
button.cmplz-blocked-content-notice.cmplz-accept-marketing.cmplz-wpforms {
    background-color: #fff!important;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1.2em;
    padding: 10px 15px;
    margin-top:15px;
}

/* Optional: Hide the ReCaptcha consent placeholder after obtaining consent */
.cmplz-marketing button.cmplz-blocked-content-container.cmplz-blocked-content-notice.cmplz-wpforms, 
.cmplz-google-recaptcha button.cmplz-blocked-content-container.cmplz-blocked-content-notice.cmplz-wpforms {
	display: none;
}

input.wpcf7-form-control.wpcf7-submit {
margin-top: 8px;
margin-left:2px;
}
.placeholder-active {
    color: #28303E;
    padding: 15px;
    border: 3px solid #28303E;
    margin-left: 2px;
    font-size: 18px;
    width: fit-content;
    overflow: hidden;
    font-family: inherit;
    font-weight: 500;
    text-align: start;
}
.placeholder-active:hover {
    background-color: #28303E;
	  color :#D1E4DE;
	  cursor:pointer;
}
/**************************
 * Artwork Archives
 * ***********************/
.artwork-template-default #content{padding-top:50px!important;}