/*
 Theme Name:   HG2024
 Theme URI:    https://generatepress.com
 Description:  GeneratePress child theme
 Author:       
 Author URI:   
 Template:     generatepress
 Version:      0.1
*/




/**** Additional site styles ****/

.xxsmall, .copyright {
	font-size: 0.6em; /* copyright footer*/
}

.xsmall {
	font-size: 0.8em;
}

.small {
	font-size: 18px;
	font-weight: 400;
	margin-bottom: 28px;
}

.medium  {	
	//letter-spacing: -.04em;
	letter-spacing: -.04em;
	margin-bottom: auto;
	font-weight: 500;
	font-size: 2.8em;
	line-height: 1.26;
}

.large {
	//font-family: Manrope, sans-serif;
	font-size: 5em;
	line-height: 1.2em;
	letter-spacing: -0.03em;
	font-weight: 500;
	margin-bottom: 40px;
}

.hide {display:none; visibility:hidden;}


.border, .border a {
    /* background: red; i#menu-item-5443*/
    /* color: white; */
    border: 1px solid #000;
}

::selection {
  background: #D6EE53;
  color: #0F0F0F;
}

/*****************************
 * Sticky Scroll Sync *******
 * *************************/

.scroll-container {
  display: flex;
  position: relative;
}
 
.left-side {
  flex: 1;
  overflow: hidden;
}
 
.left-side img {
  width: 100%;
  height: auto;
	background-color: black;
}
 
.right-side {
  flex: 1;
  position: relative;
	background-color: yellow;
}
 
.content {
  position: absolute;
  top: 0;
}

/* logo 
.header-image.is-logo-image {
  padding: 10px;
  background: var(--black);
  border-radius: 90px;
}*/

/* art heading */

.art-head {
  font-size: 170px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -10px;
  line-height: 0.7;
}


/******* project page navi ***
.queryb:hover .prev, .queryb .next{opacity:0;} **/
/*.queryb .prev, .queryb .next {background:var(--contrast);}*/


/*********************
 * transitions
 * *******************/
/** global links **/
a, a:hover, input, .imgcss {
	transition: all 0.4s ease;
}

/*** Footer
 * ***********/

.rotate-bg {
	background-color: var(--accent);
	/* display: inline-flex; */
	content: '';
	background-image: url('https://heathergrose.com/wp-content/uploads/img/logodec-g.svg');
	background-size: 60vw;
	/* height: 100vh; */
	/* //width: 40px; */
	transform: rotate(-305deg);
	object-fit:cover;
	overflow-y: hidden;
}

/* fixed bg with rotated svg */
.fixed-bg::before {
	
	content: "";
	//background-image: var(--background-image);
	background-image: url('https://heathergrose.com/wp-content/uploads/img/logodec-b.svg');
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	background-attachment: fixed;
	z-index: 0;
	position: relative;
	//top: 0;
	right: 0;
	bottom: 0;
	//left: 30%;
	transition: inherit;
	pointer-events: none;
	transform: rotate(305deg);
	object-fit:cover;
	overflow-y: hdden;
	
	/*vert flip*
	-moz-transform: rotate(90deg) scale(1, -1);
    -webkit-transform: rotate(90deg) scale(1, -1);
    -o-transform: rotate(90deg) scale(1, -1);
    -ms-transform: rotate(90deg) scale(1, -1);
    transform: rotate(90deg) scale(1, -1);*/
	
	//filter: Flipv;
      //  -ms-filter: "Flipv";
}

.fixed-bg {
	width: 100%;
	height: 100vh;
	position: fixed;
	overflow-x: hidden;
	overflow-y: hidden;
	background-color: var(--accent);
	background-color:red;
}
	
.rotate {
	transform: rotate(-305deg);
	object-fit:cover;
	overflow-y: hidden;
}

.rotate-90 {
  transform: rotate(90deg);
}

.opacity-50 {
	opacity: 0.5;
}

.opacity-25 {
	opacity: 0.25;
}

.opacity-10 {
	opacity: 0.1;
}

/** icon on right of text **/
.reverse-icon .gb-headline-text {
    order: -1;
    //margin-right: 10px;
}

.mirror {
	transform: scale(1, -1);
}

.horz-flip{
	-webkit-transform: scaleX(-1);
 	transform: scaleX(-1);
}
.vert-flip{
	-webkit-transform: scaleY(-1);
 	transform: scaleY(-1);
}
.no-vert-flip{
	-webkit-transform: translate(-50%, -50%) scaleY(-1);
	//transform: translate(-36%, -23%) scaleY(-1);
	transform: translate(0, 20px) scaleY(-1);
	//background:red;
}

.prev svg {
	transform: rotate(-90deg);
	transition: all 0.5s ease-in-out;
}
.next svg {
	transform: rotate(90deg) scaleX(-1);
	transition: all 0.5s ease-in-out;
}

.prev:hover, .prev:hover a.gb-button.prev, a.gb-button.prev:hover {
    transform: translateX(-10px);
	cursor: pointer;
	/*color: var(--accent);*/
	color: var(--current);
	transition: all 0.5s ease-in-out;
}

.prev {
	cursor: pointer;
	transition: all 0.5s ease-in-out;
}

span.next-arrow, span.prev-arrow {
    padding: 0 3px;
}

.next a, .prev a {
    text-decoration: none;
}




.next:hover, .next:hover a.gb-button.next, a.gb-button.next:hover {
    transform: translateX(10px);
	cursor: pointer;
	/*color: var(--accent);*/
	transition: all 0.5s ease-in-out;
}

.next {
	cursor: pointer;
	transition: all 0.5s ease-in-out;
}


/* General styling for taxonomy archive links art category pages */

.art-cat-list li{
	transform: translatex(0px);
	transition: all ease 1s;
	color:#000000;
}

.art-cat-list li:hover{
	transform: translatex(20px);
	transition: all ease 1s;
	
}



.art-cat-list li span:before{
	content:'→';
    height: 25px;
    width: 25px;
	opacity:0;
	transition: all ease 1s;
}


.art-cat-list li:hover span:before{
	content:'→';
    height: 25px;
    width: 25px;
	opacity:1;
	transition: all ease 1s;
}



/** method 1 - with masking **/
.email a::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
	margin-bottom: -5px;
    background-color: var(--base); /* set the color */
    mask: url('https://heathergrose.com/wp-content/uploads/img/coffee.svg') no-repeat center;
    -webkit-mask: url('https://heathergrose.com/wp-content/uploads/img/coffee.svg') no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
	transition: all 0.4s ease;
}

.email a:hover::before {
    background-color: var(--accent-2); /* set the color */
	background-color: #d397ff; 
	transition: all 0.4s ease;
}

.email-mob a {font-size: 16px;}



/* sticky copyright */
.copyright {
	color: var(--accent);
	color: var(--contrast-2);
	left: 40px;
	bottom: 10px;
	position: fixed;
	z-index: -10;
}

footer-nav a:hover {
	color: #ffffff;
}



/*

.site-content {
	z-index: 1000;
}*/
/*
footer {
	//background:red; 
	width: 100%;
	height:200px;
	background-image: url( 'https://heathergrose.com/wp-content/uploads/img/logodec-g.svg' );
	background-attachment: fixed;
	background:red;
}

.site-footer {
	//min-height: 100vh;
	height: 50%;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	z-index:-100;
background:blue;
}*/

/* copyright footer class */




.sticky {
	//min-height: 100vh;
	//height: 100vh;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
	z-index:-100;
	//margin-bottom: 50vh;
}



/* body {margin-bottom: 100vh;} ** use for sticky footer only **/

/*************************************************************** Back to top *********/
/**** Back to top ****/

/* Custom Back to Top Image / Icon */

.gp-icon.icon-arrow-up {
  width: 80%; /* Reduce size by 20% */
  height: 80%; /* Reduce size by 20% */
  background-image: url('https://heathergrose.com/wp-content/uploads/img/back-icon-w.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1; /* Fully visible in default state */
  transform: translateY(0); /* Default position */
  transition: all 0.5s ease;
}

.generate-back-to-top {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5); /* Default background */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease-in-out;
	padding: 5px;
}

.generate-back-to-top:hover {
  background-color: rgba(0, 0, 0, 0.9); /* Hover background */
	transform: translateY(-20px); /* Move up by 20px */
}

.generate-back-to-top:hover .gp-icon {
  background-image: url('https://heathergrose.com/wp-content/uploads/img/back-icon-pdot.svg'); /* Hover icon */
  opacity: 1; /* Fade out default SVG */
  transform: translateY(-5px); /* Move up by 5px */
}

/*************** Footer Contact Tooltip 1 ***************/
/* Tooltip container */
.tooltip-container {
  position: relative;
  display: inline-block; /* Ensures the tooltip can wrap text or elements */
  cursor: pointer; /* Pointer cursor for hover interaction */
}

/*bubbles container*/



.bubble-box {
  /*background: url('https://heathergrose.com/wp-content/uploads/thought-bubbles.webp') no-repeat;*/
	background: url('/media/thought-bubbles.webp') no-repeat;
    background-size: auto;
   /*background-position: left top;*/
	background-size: 100%;
	/*transform: scaleX(-1); ** flip image horizonally **/
width: 377px;
  margin-left: -153px;
  height: 257px;
 margin-bottom: -40px;
}
.bubtext0 {
font-family:"Barriecito", sans-serif;
	font-size: 3.1em;	
	font-size: 70px;
	color:var(--black);
	padding-bottom:200px;
	 visibility: hidden; /* Make visible */
}

.bubtext {
font-family:"Barriecito", sans-serif;
	font-size: 3.1em;	
	
	color:var(--black);
	padding-bottom:200px;
	margin-left:-30px;
	 visibility: visible; /* Make visible */
	opacity: 1;
}

.bubtext2 {
font-family:"Barriecito", sans-serif;
	font-size: 3.1em;	
	color:var(--black);
	padding-bottom:200px;
	 visibility: hidden; /* Make visible */
}

/* Tooltip text (hidden by default) */
.tooltip-container .tooltip {
  position: absolute;
  bottom: 110%; /* Place the tooltip above the element */
  left: 50%;
  transform: translateX(-50%) scale(0.9); /* Center align and scale down for animation */
  width: 250px;
  height: 150px;
  color: white; /* Tooltip text color */
  text-align: center; /* Center-align text */
  padding: 10px; /* Add spacing */
  border-radius: 5px; /* Rounded corners */
  opacity: 1; /* Initially hidden */
  visibility: hidden; /* Prevent interaction when hidden */
  transition: all 0.5s ease; /* Smooth animation */
  z-index: 10; /* Ensure it appears above other elements */
  pointer-events: none; /* Prevent mouse events when hidden */
}

/* Tooltip text (visible by default) */
.tooltip-container .tooltip .bubtext {
  position: absolute;
  color: var(--black); /* Tooltip text color */
  text-align: center; /* Center-align text */
	transition: all 0.5s ease; /* Smooth animation */
	/*background: url('https://heathergrose.com/wp-content/uploads/thought-bubbles.webp') no-repeat;*/
	background-position: left top;
	background-size: 100%;
}



/* Show tooltip on hover */
.tooltip-container:hover .tooltip {
  opacity: 1; /* Fade in */
  visibility: visible; /* Make visible */
  transform: translateX(-50%) scale(1); /* Scale up for animation */
  pointer-events: auto; /* Enable interactions when visible */
	transition: all 0.5s ease; /* Smooth animation */
}

/* Show tooltip on hover */
.tooltip-container:hover .tooltip .bubtext2 {
  opacity: 1; /* Fade in */
  visibility: visible; /* Make visible */
  transform: translateX(-50%) scale(1); /* Scale up for animation */
  pointer-events: auto; /* Enable interactions when visible */
	transition: all 1s ease; /* Smooth animation */
}


/* hide text on hover */
.tooltip-container:hover .tooltip .bubtext {
  opacity: 0; /* Fade in */
  visibility: hidden; /* Make visible */
  transform: translateX(-50%) scale(1); /* Scale up for animation */
  pointer-events: auto; /* Enable interactions when visible */
}

.tooltip h4 {
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/**Mobile**/
@media screen and (max-width: 782px) and (orientation: portrait) {
 
.bubble-box {
 /* display:none;
  visibility: hidden;*/
}
	
	.hide-on-mobile {
 display:none;
  visibility: hidden;
}
.btn-an a, .btn-an.current a {

}
}

/************ End Tooltip 1 ****/

/*************** Footer Contact Tooltip 0 - old tooltip ***************/
/* Tooltip container */
.tooltip0-container {
  position: relative;
  display: inline-block; /* Ensures the tooltip can wrap text or elements */
  cursor: pointer; /* Pointer cursor for hover interaction */
	
}

/* Tooltip text (hidden by default) */
.tooltip0-container .tooltip0 {
  position: absolute;
  bottom: 110%; /* Place the tooltip above the element */
  left: 50%;
  transform: translateX(-50%) scale(0.9); /* Center align and scale down for animation */
  width: 250px;
  height: 150px;
  background-color: var(--accent); /* Tooltip background */
	background: url('https://heathergrose.com/wp-content/uploads/thought-bubbles.webp');
  color: white; /* Tooltip text color */
  text-align: center; /* Center-align text */
  padding: 10px; /* Add spacing */
  border-radius: 5px; /* Rounded corners */
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Prevent interaction when hidden */
  transition: all 0.5s ease; /* Smooth animation */
  z-index: 10; /* Ensure it appears above other elements */
  pointer-events: none; /* Prevent mouse events when hidden */
}

/* Tooltip arrow */
.tooltip0-container .tooltip0::after {
  content: ''; /*orig*/
	
  position: absolute;
  top: 100%; /* Position below the tooltip box */
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: var(--accent) transparent transparent transparent; /* Accent color for the arrow */
}

/* Show tooltip on hover */
.tooltip0-container:hover .tooltip0 {
  opacity: 0.8; /* Fade in */
  visibility: visible; /* Make visible */
  transform: translateX(-50%) scale(1); /* Scale up for animation */
  pointer-events: auto; /* Enable interactions when visible */
}

.tooltip0 h4 {
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/************ End Tooltip ****/


/*-----------------------------------------------------------------*/

/********* btn-an menu - left top right bottom dot ******/


.btn-an a, .btn-an.current a {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-decoration: none;
	margin:5px;
} 
.btn-an a span, .btn-an a:active span, .btn-an.current a span, .main-navigation .main-nav ul li[class*="current-menu-"] > a span {
    position: absolute;
    display: block;
    background: #000;
   /* transition: transform ease-in-out 0.2s;*/
	transition: all ease-in-out 150ms;
}

.btn-an a span:nth-child(5) { /**** dot ***/
    bottom: 0; /*bottom: 0; */
   	left: 0; /* left: 13px; */
	/* left: calc(1vh / 5%); */
    width: 5px;
    height: 5px;
	border:1px;
	border-radius: 4px;
	opacity: 0;
	transform: translate(0, -13px);
  -webkit-transform: translate(0, -13px);
  -o-transform: translate(0, -13px);
  -moz-transform: translate(0, -13px);
    /*transform: scaleX(0);*/
    transform-origin: top; /* transform-origin: right; */
    transition-delay: 0s;
	transition-duration: 0.5s;
}

.btn-an a:hover span:nth-child(5), .btn-an.current a span:nth-child(5), .main-navigation .main-nav ul li[class*="current-menu-"] > a span:nth-child(5) { /**** dot ***/
    /*transform: scaleX(1);*/
	opacity: 1;
	transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -moz-transform: translate(0, 0);
    transform-origin: bottom; /* transform-origin: left; */
}

.btn-an a span:nth-child(4) { /**** left line ***/
    top: 0;
    left: 0;
	bottom: 13px;
    width: 3px;
    height: 75%;
    transform: scaleY(0);
    transform-origin: bottom;
    transition-delay: 100ms;
	/*transition-delay: 0.2s;*/
}

.btn-an a:hover span:nth-child(4), .btn-an.current a span:nth-child(4), .main-navigation .main-nav ul li[class*="current-menu-"] > a span:nth-child(4) { /**** left line ***/
    transform: scaleY(1);
    transform-origin: bottom;
	transition-delay: 0ms;
}

.btn-an a span:nth-child(3) { /**** top line ***/
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: left;
    transition-delay: 150ms;
	 /*transition-delay: 0.4s;*/
}

.btn-an a:hover span:nth-child(3), .btn-an.current a span:nth-child(3), .main-navigation .main-nav ul li[class*="current-menu-"] > a span:nth-child(3) { /**** top line ***/
    transform: scaleX(1);
    transform-origin: left;
	transition-delay: 100ms;
}

.btn-an a span:nth-child(2) { /**** right line ***/
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
    transition-delay: 300ms;
	/*transition-delay: 0.2s;*/
}

.btn-an a:hover span:nth-child(2), .btn-an.current a span:nth-child(2), .main-navigation .main-nav ul li[class*="current-menu-"] > a span:nth-child(2){ /**** right line ***/
    transform: scaleY(1);
    transform-origin: top;
	transition-delay: 50ms;
}
	
.btn-an a span:nth-child(1) { /**** bottom line ***/
    bottom: 0;
    left: 15%;
    width: 85%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: right;
    transition-delay: 450ms;
}

.btn-an a:hover span:nth-child(1), .btn-an.current a span:nth-child(1), .main-navigation .main-nav ul li[class*="current-menu-"] > a span:nth-child(1) { /**** bottom line ***/
    transform: scaleX(1);
    transform-origin: right;
	transition-delay: 0ms;
}
	
/***** Primary menu style for current category ******/






/***** all posts masonry anim ******/

.generate-columns.grid-33
{
	background:yellow;
	//width: 100%; /* Adjust the width as needed */
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      animation: fadeInUp 0.5s ease-out forwards;
}

/* Animation for fading in and moving up */
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

/* Apply staggered delay using inline styles */
.generate-columns.grid-33:nth-child(1) { --animation-delay: 0s; }
.generate-columns.grid-33:nth-child(2) { --animation-delay: 0.5s; }
.generate-columns.grid-33:nth-child(3) { --animation-delay: 1s; }
    /* Add more nth-child rules as needed */

    /* Set animation delay using CSS variable */
    .generate-columns.grid-33 { animation-delay: var(--animation-delay); }

/********************* Blog Category Styles ***********************************/
/** button with category term, summer template **/
.gb-button-text.post-term-item.term-summer {
	background: yellow;
}
.gb-button-text.post-term-item.term-events
{
	background: hotpink;
}


/*******************************************
 * Add margin to bookmark containers ******/

.is-style-default, .is-style-horizontal {
	margin-bottom: 20px;
}

/******************************************
 * * Slide panel menu ********************/



/*** End slide panel menu *****************/

/** see additional csss

/******************************************* portfolio grid - scale hover container bg image *****/
/**** Visual Portfolio Style 2 – with feature image hover ***/



.vpstyle .gspbgrid_item_inner {
    position: relative;
   /* z-index: 2; */
    width: 100%;
    height: 100%;
    /* background: red; */
	transition: opacity 0.4s ease; /* Smooth transition */
}


.vpstyle.gspb-dynamic-post-image.wp-block-greenshift-blocks-dynamic-post-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black overlay */
  opacity: 0;
  transition: opacity 0.3s ease; /* Smooth transition */
  pointer-events: none; /* Ensures overlay doesn't block interactions */
}

.vpstyle.gspb-dynamic-post-image.wp-block-greenshift-blocks-dynamic-post-image:hover::after {
  opacity: 1;
	transition: opacity 0.3s ease; /* Smooth transition */
}

/*** Art Details page background colour choices **/


.white-bg {
background:var(--base-3);
	}

.ltgray-bg {
background:var(--base-2);
	}

.md-gray-bg {
background:var(--base);
	}

.dark-gray-bg {
background:var(--contrast);
	color:var(--base-3);
	}

.black-bg {
background:var(--black);
	color:var(--base-3);
	}



/***********************/
/***** contact form ****/

#nf-field-4-container {
   
	background: #f7f8f9;
	background: var(--black);
	border-radius:50px;
	text-align: center;
	width:100%;
}

.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
  border-radius: 100px;
  height: 75px;
  text-transform: uppercase;
	letter-spacing:1.2;
	font-weight:600;
	outline: 1px dashed #ffffff;
	background:var(--black);
  transition: all ease 0.5s;
  width: 100%; /* this is being overriden by plugin styles - use padding instead **/
	
	padding:0 150px; /* note this pushes out the form width too **/
}


#nf-field-4:hover, #nf-field-8:hover {
	background:red;
	background:var(--accent-2);
	transition: all ease 0.5s;
	//transform: translate(20px, 0px);
}

h2.nf-response-msg {
  color: var(--accent-2);
  width: 300px;
}


/* Success Message Styling */
.nf-form-cont .nf-response-msg {
    background-color: #d4edda;
	color: #155724;
	background-color: var(--accent-lime-2);
    color: var(--black);
    padding: 10px 15px;
    border: 1px solid #c3e6cb;
    border-radius: 5px;
    margin-top: 10px;
	padding:40px;
}


/* Focus Effect for Input Fields */
.nf-form-cont .nf-field-container input:focus, 
.nf-form-cont .nf-field-container textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
    outline: none;

	border: 5px solid var(--accent-2);
	transition: all ease 0.5s;
}

@media only screen and (max-width: 600px) {
	
	.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
  text-align:center;
	padding:0 120px; /* note this pushes out the form width too **/
}
	
}

/***** from additional css feb 24/25 *****/

/* show secondary nav for blog only 
body:not(.blog):not(.archive):not(.single) .secondary-navigation {
    display: none;
}*/


#secondary-navigation .fav a::before {
  content: url("data:image/svg+xml,%3Csvg width='22' height='22' style='transform: rotate(180deg)' class='wishiconctive' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M192 960v-1024l320 320 320-320v1024z'%3E%3C/path%3E%3C/svg%3E");

  width: 22px;
	height: 22px;
color:red;
	fill:red;
	background:red;
	margin-right: 20px;
}

.fav {margin-right: 20px;}

/* art cat link no underline */
h2.gb-headline.gb-headline-9b8f6f72.gb-headline-text.dynamic-term-class a,.no-underline a {
    text-decoration: none;
}

/*********************
 * btn-an reversed ***
 * **/


.btn-an.rev a, .btn-an.rev a:hover {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
	font-weight:400;
   /* text-transform: uppercase;
    letter-spacing: 4px;*/
    text-decoration: none;
		margin:5px;
}
.btn-an.rev a span {
    position: absolute;
    display: block;
    background: #fff;
   /* transition: transform ease-in-out 0.2s;*/
	transition: all ease-in-out 150ms;
}
	
.btn-an.rev a span:nth-child(1) { /**** bottom line ***/
    bottom: 0;
    right: 15%;
    width: 85%;
    height: 3px;
    transform: scaleX(1);
    transform-origin: left;
    transition-delay: 150ms;
}
.btn-an.rev a:hover span:nth-child(1) { /**** bottom line ***/
    transform: scaleX(0);
    transform-origin: left;
	transition-delay: 0ms;
}
	
.btn-an.rev a:hover span:nth-child(5) { /**** dot ***/
    bottom: 0;
   left: 13px;
	/* left: calc(1vh / 5%); */
    width: 4px;
    height: 4px;
	border:1px;
	border-radius: 4px;
	opacity: 0;
	transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  -o-transform: translate(0,0);
  -moz-transform: translate(0, 0);
    /*transform: scaleX(0);*/
    transform-origin: right;
    transition-delay: 0s;
	transition-duration: 0.5s;
}
.btn-an.rev span:nth-child(5) { /**** dot ***/
    /*transform: scaleX(1);*/
	opacity: 1;
	transform: translate(-13px, 0);
  -webkit-transform: translate(-13px, 0);
  -o-transform: translate(-13px, 0);
  -moz-transform: translate(-13px, 0);
    transform-origin: left;

}
	
.btn-an.rev a span:nth-child(3) { /**** top line ***/
    top: 0;
    right: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(1);
    transform-origin: left;
    transition-delay: 50ms;
	 /*transition-delay: 0.4s;*/
}
.btn-an.rev a:hover span:nth-child(3) { /**** top line ***/
    transform: scaleX(0);
    transform-origin: left;
	transition-delay: 100ms;
}

.btn-an.rev a span:nth-child(2) { /**** right line ***/
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    transform: scaleY(1);
    transform-origin: top;
    transition-delay: 50ms;
	/*transition-delay: 0.2s;*/
}
.btn-an.rev a:hover span:nth-child(2) { /**** right line ***/
    transform: scaleY(0);
    transform-origin: top;
	transition-delay: 100ms;
}
.btn-an.rev a span:nth-child(4) { /**** left line ***/
    top: 0;
    left: 0;
    width: 3px;
    height: 70%;
    transform: scaleY(1);
    transform-origin: bottom;
    transition-delay: 0ms;
	/*transition-delay: 0.6s;*/
}
.btn-an.rev a:hover span:nth-child(4) { /**** left line ***/
    transform: scaleY(0);
    transform-origin: bottom;
	transition-delay: 150ms;
}

main {
/*max-width: 35%;
margin: 80px auto;*/
}
/*
span {
background-image:linear-gradient(yellow, yellow);
background-size: 0% 100%;
background-repeat: no-repeat;
transition: background-size 1s ease-in;
}*/

.active {
/*	background-size: 100% 100%;*/
	background-color:red;
}







/** list line item spacing **/
ul.wp-block-list li{
  line-height: 1.4em;
	padding-bottom:20px;
}

.border-radius {
	border-radius: 10px;
}


/** set gp content container if dropdown missing **/ 
.contained {
	width: 1300px;
	margin:auto auto;
	padding:40px;
}

/*** img 1px fix **/

img.wp-image-8384, img.wp-image-8381 {
    margin-top: -1px;
}


/** stop lettering from breaking **/
h2 {
/* overflow-wrap: normal;*/
	}


.email {text-decoration:none;}

/*
 email envelope icon*
.email::before {
  /**  content: "\f0e0";  Font Awesome envelope icon 
font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Make sure the icon is solid 
  
	content:url(ttps://staging.heathergrose.com/media/env-gray.png);
	width:10px;
	height:10px;
    //display: inline-block;
    margin-right: 8px; /* Adjust spacing as needed 
}

a#link-interaction.email::before{
	content:url(https://heathergrose.com/wp-content/uploads/env-gray.png);
	width:100px;
	height:100px;
}*/





/***** outline offset ****/
.outline-offset {
outline: 1px dashed #ffffff;
  outline-offset: 10px;
	
	}

hr.line-dashed {
	border:1px dashed var(--base);
}

/*** h4 panel menu - fix for shitty looking text **/

h2.gb-headline-90663f8b a {
  font-family: Inter, sans-serif;
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -0.04em;
  font-weight: 400;
  padding-bottom: 34px;
  margin-bottom: 0px;
  color: var(--base-2);
}

h2.gb-headline-90663f8b a:hover {
	color:var(--accent-2);
}
/*
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background:#000;
	cursor: pointer;
}*/