/* ------------- FIRST SECTION --------------- */

#background{
	width: 120%;
    height: 120%;
    translate: -5% 5%;
	max-width: 95vw;
}

#main-heading{
	margin: auto 0;
}

#main-photo{
	display: grid;
	align-items: end;
}

#quote{
	font-family: "Segoe Script";
}

#quote *{
	margin: 0;
}

/* desktop view (wide) from 1300px */
@media only screen and (min-width: 1300px){
	
	#main-photo{
		grid-column: 1 / span 2;
		grid-row: 2 / span 2;
	}
	
	#main-photo2{
		grid-column: 1 / span 2;
		grid-row: 1 / span 1;
	}	
	
	#quote{		
		font-size: var(--wp--preset--font-size--large) !important;
		
		grid-column-end: -1;		
	}
}

/* desktop view from 976px to 1300px */
@media only screen and (max-width: 1300px){
	
	#main-photo{
		grid-column: 1 / span 2;
		grid-row: 3 / span 1;
	}
	
	#main-photo2{
		grid-column: 1 / span 2;
		grid-row: 1 / span 2;
	}			
	
	#quote{		
		grid-column: 2 / span 2;
        grid-row: 2 / span 1;
	}
}

/* desktop view from 767px to 976px */
@media only screen and (min-width: 977px){
	
	#head{			
		max-height: 40vw;
		min-height: min-content; 
		height: calc(100vh - 50px);
	}
	
	#main-heading{
		grid-column: 2 / span last-line;
		grid-row: 1 / span 1;
	}
	
	#summary{
		grid-column-end: -1;
	}
	
	#main-heading h1{
		font-size: 5vw;
	}
	
	#main-heading h3{
		font-size: 2vw;
	}
		
	#background{
		grid-area: 1 / 1 / span 3 / span 2;
	}
}

/* tablet view (horizontal) from 767px to 976px */
@media only screen and (max-width: 976px){
	#main-heading{
		grid-column: 1 / span 2;
		grid-row: 1 / span 1;
	}
	
	#summary{		
		grid-column: 1 / span 2;
        grid-row: 2 / span 1;
	}
	
	#main-photo{
		grid-column: 1 / span 2;
		grid-row: 4 / span 1;
	}
	
	#main-photo2{
		grid-column: 1 / span 2;
		grid-row: 3 / span 1;
	}	
	
	#quote{
		grid-column: 2 / span 1;
        grid-row: 3 / span 1;
	}		
		
	#background{
		grid-column: 1 / span 2;
        grid-row: 3 / span 2;
	}
	
		#main-photo img{
        margin: auto;
        width: 90%;
	}
}

/* tablet view (vertical) from 544px to 767px */
@media only screen and (max-width: 767px){
	
	#background{
		grid-column: 1 / span 2;
		grid-row: 3 / span 2;
	}
}

@media only screen and (min-width: 545px){
	
	#main-photo img{
		object-fit: cover;
		aspect-ratio: 2560 / 1377;
		overflow: visible;
		object-position: bottom;
	}
	
	#main-photo2 img{
		aspect-ratio: 2560 / 600;
		object-fit: cover;
		overflow: visible;
		object-position: top;
		opacity: 0;
	}	
}

/* phone view to 544px */
@media only screen and (max-width: 544px){
	#head{
		grid-template-columns: minmax(1px, 1fr) !important;
	}
	
	#summary p{
		margin-bottom: 1em;
	}
	
	#main-photo img{
        margin: auto;
        width: 90%;
		aspect-ratio: 2560 / 1977;
	}
	
	#main-heading h3{
		display: none;
	}
	
	#main-photo2{
		display: none;
	}
	
	#background{
		grid-column: 1 / span 2;
        grid-row-start: 4;
	}

}

/* -------------- END FIRST SECTION ------------- */

/* -------------- GALLERY -------------- */

#artworks img{
	width: 100%;
}

@media only screen and (max-width: 976px){
	#cell-3{
		display: none;
	}
}

@media only screen and (min-width: 767px){
	#title{
	grid-column: 3 / span 2;
	grid-row: 1 / span 1;
}

#cell-1{
	grid-column: 1 / span 1;
	grid-row: 1 / span 2;
}

#cell-2{
	grid-column: 2 / span 2;
	grid-row: 1 / span 2;
}

#cell-3{
	grid-column: 4 / span 1;
	grid-row: 2 / span 1;
}
}

@media only screen and (max-width: 767px){
	#title{
		grid-column: 1 / span 2;
		grid-row: 1 / span 1;
	}
	
	#cell-1{
		grid-column: 1 / span 1;
		grid-row: 2 / span 1;
	}
	
	#cell-2{
		display: none;
		grid-column: 1 / span 2;
		grid-row: 3 / span 1;
	}
	
	#cell-3{
		display: block;
		grid-column: 2 / span 1;
		grid-row: 2 / span 1;
	}
}

@media only screen and (max-width: 544px){
	#artworks > div{
		grid-template-columns: minmax(1px, 1fr) !important;
	}
	
		#title{
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}
	
	#cell-1, #cell-2, #cell-3{
		display: block;
		grid-column: 1 / span 1;
		grid-row: auto / span 1;
	}
}


/*
@media only screen and (min-width: 766px){
	
	.custom-gallery-view {
  
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.54fr) minmax(0, 0.7fr) minmax(0, 1fr) !important;
  
  grid-template-areas: 
    '. b title title'
    'a b title title'
    'a b c d'
    'a e e d'
    ;
}
	
	.uagb-slick-carousel .slick-track {
    transform-origin: top left;
    left: calc(100% / 3) !important;
	}
}

@media only screen and (max-width: 767px){

	.custom-gallery-view .cell-2{
		display: none !important;
	}
}

@media only screen and (max-width: 976px) and (min-width: 545px){
	
	
		.custom-gallery-view {
  
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.54fr) minmax(0, 0.7fr) !important;
  
  grid-template-areas:
	  'a b title'
	  'a b c'
	  'a e e' 
	  'd d d'
    ;
}
	
	.uagb-slick-carousel .slick-track {
    transform-origin: top left;
    left: calc(100% / 3) !important;
	}
}

@media (max-width: 544px){
	.custom-gallery-view {
  
  grid-template-columns: minmax(0, 1fr) !important;
  
  grid-template-areas:
	  'title'
	  'a'
	  'd'
    ;
}
	
	.uagb-slick-carousel .slick-track {
    top: 0;
    left: 0 !important;
}
}

.custom-gallery-view {
  --gap-size: 1.7vw;
	--shine-width: 50px;
  
  display: grid;

  gap: var(--gap-size); 
  grid-row-gap: 0;
}

.custom-gallery-view > div{
	padding: 0;
}

.custom-gallery-view figure{
	border-style: ridge !important;
border-width: 10px;
	border-color: #cd8032;
	box-shadow: 5px 5px 5px grey !important;
}

.custom-gallery-view a{
	overflow: hidden;
	position: relative;
}

.custom-gallery-view img{
	padding: 20px;
	background-color: beige;
}

.custom-gallery-view figure{
	transform-origin: 50% 10%;
}

div[class*="picture-size-"]{
  display: block;
}

.custom-gallery-view .grid-30-70{
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
}

.custom-gallery-view .grid-70-30{
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
}

.custom-gallery-view .grid-50-60{
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
align-items: start;
}

.custom-gallery-view .grid-60-50{
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: end;
}

.custom-gallery-view div[class*="grid-"]{
  display: grid;
  gap: var(--gap-size);
}

.custom-gallery-view div[class*="grid-"] > div{
  margin: 0px;
}

.custom-gallery-view .title-section{
  grid-area: title;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
  margin-top: 0;
}

.custom-gallery-view .cell-0{
  grid-area: a;
}

.custom-gallery-view .cell-1-1{
  grid-area: b;
  align-content: end;
}

.custom-gallery-view .cell-1-2{
  grid-area: c;
  align-content: end;   
}

.custom-gallery-view .cell-1-3{
  grid-area: e;
  display: grid;  
  gap: var(--gap-size); 
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);  align-items: start;
}

.custom-gallery-view .cell-2{  
  grid-area: d;
}

.custom-gallery-view div[class*="cell-"] > div{
  margin-bottom: var(--gap-size);
}

.custom-gallery-view figure.hovering{
	animation: effect-continue 0.4s 1;
}

.custom-gallery-view figure:hover{
	animation: effect-continue 0.4s 1;
}

.custom-gallery-view a::before {
  
  --shine-color: rgba(255, 255, 255, 0.5);
	background: linear-gradient(to left, var(--shine-color) 0% 20%, transparent 20% 30%, var(--shine-color) 30%, transparent 100%);
	 content: '';
	 display: block;
  position: absolute;
	 height: 100%;
	 transform: skewX(60deg);
	transform-origin: top right;
	 width: var(--shine-width);
	 z-index: 2;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.custom-gallery-view a:hover::before {
	content: '';
  animation: shine2 6s 2s infinite;
}*/

#artworks{	
	--frame-width: 10px;
	--frame-color: #cd8032;
	
	--paspartu-width: 20px;
	--paspartu-color: beige;
	
	--shine-width: 100px;
}

#artworks figure{	
	border-width: var(--frame-width);	
	border-color: var(--frame-color);
	border-style: ridge !important;
	box-shadow: 5px 5px 5px grey !important;
	transform-origin: 50% 10%;
}

#artworks img{
	padding: var(--paspartu-width);
	background-color: var(--paspartu-color);
}

#artworks figure:hover,
#artworks figure.hovering{
	animation: shake-continue 0.4s 1;
}

@keyframes shake-continue {
        0% {
            transform: translateX(0px) rotate(0deg);
        }

        20% {
            transform: translateX(-4px) rotate(-4deg);
        }

        40% {
            transform: translateX(-2px) rotate(-2deg);
        }

        60% {
            transform: translateX(4px) rotate(4deg);
        }

        80% {
            transform: translateX(2px) rotate(2deg);
        }

        100% {
            transform: translateX(0px) rotate(0deg);
        }
}

#artworks a{
	overflow: hidden;
	position: relative;
}

#artworks a:not(.wp-block-button__link)::before {
  	
 	--shine-color: rgba(255, 255, 255, 0.5);
	
	width: var(--shine-width);
	background: linear-gradient(to left, var(--shine-color) 0% 20%, transparent 20% 30%, var(--shine-color) 30%, transparent 100%);
	content: '';
	display: block;
	position: absolute;
	height: 100%;
	transform: skewX(60deg);
	transform-origin: top right;
	z-index: 2;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

#artworks a:not(.wp-block-button__link):hover::before {
	content: '';
	animation: shine 6s 2s infinite;
}

@keyframes shine {
  0%{
      
    opacity: 1;
    transform-origin: top right;
    right: 0%;
  }  
  30% {
      opacity: 1;
      transform-origin: bottom right;
      right: 200%;
    }
  100%{
    transform-origin: bottom right;
      right: 200%;
  }
  }

/* ------------- END GALLERY ----------- */


/* ------------ ORDERS --------------- */

#paintings {
	position: absolute !important;
	top: 0;
}

#custom-orders #title{
	position: absolute;
	top: 0;
}

#custom-orders #text{
	position: absolute;
	bottom: 0;
}

#custom-orders #text:before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	
    background-image: linear-gradient(transparent 0%, rgba(1, 1, 1, 0.4) 30% 40%, rgba(1, 1, 1, 0.7) 70%, rgba(1, 1, 1, 0.4));
	
	mask-image: linear-gradient(90deg, transparent 0%, black 35% 65%, transparent 100%);
}

#custom-orders p{
	text-shadow: 2px 2px 5px black;
}

#custom-orders img{
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

@media only screen and (min-width: 1500px){
	#custom-orders #text h1{
		font-size: 5em;
	}
}

@media only screen and (max-width: 976px){
	#custom-orders img{
	aspect-ratio: 3 / 2;
	}
	
	#custom-orders #text:before{
		mask-image: none;
	}
}


@media only screen and (max-width: 768px){
	#custom-orders img{
	aspect-ratio: 5 / 4;
	}
}

@media only screen and (max-width: 544px){
	
	#custom-orders #interiors{
		mask-image: linear-gradient(rgba(0, 0, 0, 0), black 10% 90%, rgba(0, 0, 0, 0));
	}
	
	#custom-orders #title{
		position: static;
	}
	
		#custom-orders #text:before{
		content: none;
	}
	
	#custom-orders #text{
	position: static;
}
	#custom-orders img{
	aspect-ratio: 1;
	}
	
	#custom-orders #text p{
	text-shadow: none;
}
}

/* ----------END ORDERS --------------*/


/*----------- REVIEWS ---------------- */

@media only screen and (min-width: 767px){
	
	#reviews .slick-track {
    transform-origin: top left;
    left: calc(100% / 3) !important;
	}
	
	#reviews .slick-list{
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 10%, black 15% 85%, rgba(0, 0, 0, 0) 90%);
}
	#reviews .uagb-slick-carousel .slick-next, .uagb-slick-carousel .slick-prev{
	top: 20vw;
}
	
}

/*
@media only screen and (max-width: 1023px)
{
	#reviews .uagb-slick-carousel .slick-next, .uagb-slick-carousel .slick-prev{
	top: 40vw;
}

}*/

@media (max-width: 544px){
	
	#reviews .uagb-slick-carousel .slick-track {
    top: 0;
    left: 0 !important;
}
}

#reviews .uagb-tm__image{
	aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#reviews .uagb-tm__image img{
	/*max-width: 100% !important;*/
	/*max-height: 100% !important;*/
	aspect-ratio: 1;
	/*width: auto;
	height: auto;*/
  object-fit: contain;
	opacity: 0.7;
}

#reviews .slick-current{
	/*background: lightgreen;*/
}

#reviews .slick-current .uagb-tm__image img{
	opacity: 1;
}

#reviews .slick-current .uagb-tm__desc{
	-webkit-line-clamp: 20 !important;
}

#reviews .slick-slide .uagb-tm__desc{
	display: -webkit-box;
  -webkit-line-clamp: 5; /* 3 lines for stars, 2 lines text */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------- END REVIEWS -------------- */


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

@media only screen and (min-width: 1300px){

	.about #text{
	position: absolute;
	top: 10%;
	left: 10%;
		padding: 0px;
		margin: 0px;
		width: 40%
}
	
	.about img{
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
}

@media only screen and (max-width: 1300px){
	
	.about #image{
		position: absolute;
	}
}

.about #image{
	z-index: 0 !important;
	left: 0 !important;
	right: 0 !important;
	top: 0 !important;
	bottom: 0 !important;
	height: 100%;
}

.about #image img{
	    object-position: top;
}

.about #image *{
	height: 100%;
}

.about #image:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	
	background-color: rgba(0, 0, 0, 0.5);
	mask-image: linear-gradient(90deg, white 10%, transparent 60%);
}

.about #text p{
	text-shadow: 2px 2px 5px black;
}

/*
@media only screen and (max-width: 976px){
	.about img{
		aspect-ratio: 5 / 4;
	}
}


@media only screen and (max-width: 768px){
	.about img{
	aspect-ratio: 5 / 4;
	}
}

@media only screen and (max-width: 976px){
	
}*/

@media only screen and (max-width: 768px){
	
	.about #image{
		mask-image: linear-gradient(rgba(0, 0, 0, 0), black 10% 90%, rgba(0, 0, 0, 0));
	}
	
	.about #image:after{
		content: none;
	}
	
	.about #image{
		position: static;
	}
	
	.about img{
	aspect-ratio: 4 / 3;
	object-fit: cover;
		object-position: center right !important;
}	
	.about #text p{
	text-shadow: none;
}

}

/* ------------- END ABOUT -------------- */

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

/* create 2 colums, main body & aside */
.hp-listing--view-page .body{
	display: grid;
	grid-template-columns: 1fr 30% !important;
}

/* sidebar settings for sticky positioning*/
.hp-listing--view-page .sidebar{
	position: sticky;
	height: fit-content;
	top: 0;
}

/* separator for even spacing */

.hp-listing--view-page .sidebar .wp-block-separator{
	display: none;
}

@media only screen and (max-width: 1300px){
		.hp-listing--view-page .body{
		padding: 1em !important;
	}
}

@media only screen and (min-width: 768px){
	
	.hp-listing--view-page .main-section .listing-title{
		display: none;
	}
	
	.hp-listing--view-page .main-section .listing-menu{
		display: none;
	}
	
	.hp-listing--view-page .main-section .primary-attributes-group{
		display: none;
	}
}

@media only screen and (max-width: 767px){
	
	.hp-listing--view-page .body{
		display: block;
		padding: 1em !important;
	}
	
	.hp-listing--view-page .sidebar{
		display: none;
	}
}

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

/*------------IMAGES------------*/

.hp-listing--view-page .hp-listing__images{
	/*margin: 0;*/
}

.hp-listing--view-page .hp-listing__images img{
	aspect-ratio: 3 / 2; /* controls the size of the image area */
}

.hp-listing--view-page .hp-listing__images-carousel{
	height: 10%; /* controls the size of the image thumbnails */
}


/* forces all divs to fill the parent height */
.hp-listing--view-page .hp-listing__images-carousel div{
	height: 100%; 
}

/* center the thumbnails*/
.hp-listing--view-page .slick-track{
	display: flex;
  justify-content: center;
}

/* thumbnail img wrapper to square */
.hp-listing--view-page .hp-listing__images-carousel .slick-slide{
	aspect-ratio: 1;
	width: auto !important;
}

/* thumbnails cropped */
.hp-listing--view-page .hp-listing__images-carousel img{
	object-fit: cover;
}

/*----------END IMAGES----------*/




/* --------- ATTRIBUTES ---------- */

/* add a margin to all attributes that are not last */
.hp-listing--view-page .hp-listing__actions--primary:not(:last-child), .hp-listing--view-page .hp-listing__attributes--primary:not(:last-child), .hp-listing--view-page .hp-listing__attributes--secondary:not(:last-child), .hp-listing--view-page .hp-listing__attributes--ternary:not(:last-child), .hp-listing--view-page .hp-listing__description:not(:last-child), .hp-listing--view-page .hp-listing__details--primary:not(:last-child), .hp-listing--view-page .hp-listing__images:not(:last-child), .hp-listing--view-page .hp-listing__title:not(:last-child){
	margin-bottom: 0.5rem !important;
}

/* text sizes for title in sidebar*/
.hp-listing--view-page .sidebar .hp-listing__title{
	font-size: 2rem;
}

/* remove the margin from primary attributes for close spacing
*/
.hp-listing--view-page .hp-listing__attributes--primary{
	margin: 0 !important;
}

/* space the primary attributes evenly because other attributes are close together*/
.hp-listing--view-page .hp-listing__attributes--primary > div{	
	padding: 0px !important;
	margin-bottom: 0 !important;
}

/* bigger font for the price */
.hp-listing--view-page .hp-listing__attribute--price, 
.hp-listing--view-page .hp-listing__attribute--artwork-status{
		font-size: 1.5rem !important;
}

/* smaller text for buttons & full width*/
.hp-listing--view-page .wp-block-button a{
	font-size: 0.9rem !important;
	width: 100% !important;
}

/* private attributes display customization */
.hp-listing--view-page .private-attributes > div > *{
	font-size: 100% !important;
	margin-bottom: 0.5rem !important;	
	margin-left: 1rem !important;
}

/* ----------- END ATTRIBUTES ---------- */



/* ---------- SUGGESTED --------- */

.hp-listing--view-page .hp-listings{
	margin-top: 2rem;
}

.hp-listing--view-page .hp-listings > .hp-row{
	flex-wrap: nowrap;
	gap: 1rem;
}

.hp-listing--view-page .hp-listings .hp-grid__item{
	flex-shrink: 2;
}

.hp-listing--view-page .hp-listing--view-block .hp-listing__image{
	/*aspect-ratio: 4 / 3;*/
	aspect-ratio: 1;
}

.hp-listing--view-page .hp-listing--view-block img{
	object-fit: cover !important;
	object-position: center;
}

@media only screen and (max-width: 544px){
		.hp-listing--view-page .hp-listings > .hp-row{
	flex-wrap: wrap;
	}
	
	.hp-listing--view-page .hp-listings .hp-grid__item{
	flex-basis: 100%;
		flex-shrink: 0;
		margin-right: 0 !important;
	}
}

/* ------------ END SUGGESTED ----------- */

.hp-listing--view-block:hover{
	cursor: pointer;
}

/* Allow for moving the content blocks by setting it flex */
.hp-listing--view-block .hp-listing__content{
	display: flex;
	flex-direction: column;
	margin: 0;
}

/* Reduce the margin from elements for a close fit */
.hp-listing--view-block .hp-listing__content:not(:last-child),
.hp-listing--view-block .hp-listing__footer:not(:last-child),
.hp-listing--view-block .hp-listing__header:not(:last-child){
	margin-bottom: 0.5rem !important;
}

/* Move the Category (incl. in Details) to the top, right under the pictures */
.hp-listing--view-block .hp-listing__content .hp-listing__details{
	order: -1;
}

/* Hide the date from the Details*/
.hp-listing--view-block .hp-listing__content .hp-listing__details .hp-listing__created-date{
	display: none;
}

/* Truncate long attributes into elipsis */
.hp-listing--view-block .hp-listing__attribute{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/* Hide the attribute icons (except Sold) in block listing display */
.hp-listing--view-block .hp-listing__attribute:not(.hp-listing__attribute--artwork-status) > i{
	display: none;
}
/* Hide all the ternary operators - they're only for the admin (logged in user )*/
body:not(.logged-in) .hp-listing__attributes--ternary > *{
	display:none;
}

/* Hide the year from everyone except admin (not in the ternary attributes because of margin issue */
body:not(.logged-in) .hp-listing__attribute--year-painted{
	display:none;
}

/* Prevent attributes from forming columns */
.hp-listing__attributes .hp-row > div{
	flex-basis: 100%;
	max-width: 100%;
}

/* Customize the Price Attribute (+ the Sold attribute because they have to match) */
.hp-listing__attribute--price, .hp-listing__attribute--artwork-status{
	font-weight: bold;
	background-color: transparent !important;
	text-align: left !important;
}

/* Sold icon color*/
.hp-listing__attribute--artwork-status > i{
	color: var(--ast-global-color-0);
}

/* Place the Sold attribute next to Price via inline property */
.hp-listing__attribute--artwork-status{
	display: inline-block;
	opacity: 0;
}

/* Place the Price attribute next to Sold via inline property with a space in between */
.hp-listing__attribute--price{
	display: none;		
	margin-right: 1rem;
}