@font-face {
    font-family: 'Tinkuy PatternsB';
    src: url('/wp-content/themes/hwd5/assets/fonts/TinkuyPatterns-B.woff2') format('woff2'),
        url('/wp-content/themes/hwd5/assets/fonts/TinkuyPatterns-B.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
	
	/* HOMEPAGE STYLES
************************************************************/

section	{
	border-bottom: 1px solid var(--color-row-border);
}

section.bannerImage	{
	min-height: 30vh;
}

.sectionTitle	{
	text-align: center;
	padding: 10px 0 0;
}

section.heroStatement .container	{
	max-width: 52rem;
}

section.heroStatement	{	
	text-align: center;
}

section.heroStatement h2	{	
	margin-top: 1em;
	font-size: 2em;
	font-style: italic;
	font-family: var(--font-quote);
}

/* li.current_page_item	{
	display: none;
} */



/*HOMEPAGE HERO
**********************************************/
.headerLogo	{
	z-index: 1001;
}
section.hero {
	position: relative;
	top: 0px;
	left:0;
	width: 100%;
	min-height: calc(100vh - 120px);
	border-bottom: 1px solid #ccc;
	/*background-image: url('/wp-content/themes/hwd5/assets/img/homeBlurb-BG-1400w.jpg');
	background-position: right top;*/
	background: linear-gradient(-40deg, #01fdee 18%,#69fcf3 28%,#a8fcf7 49%,#fff 100%);
}
/*@media (min-device-width: 1400px){
	section.hero {
	background-image: url('/wp-content/themes/hwd5/assets/img/homeBlurb-BG3.jpg');	
	}
}*/

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  position: relative;
  min-height: calc(100vh - 120px);
    max-width: 100%;
  z-index: 1000;
}

.content {
  grid-row: 1 / 2;
  z-index:1000;
  max-width: 94vw;

}

div.tinkuy	{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Tinkuy PatternsB';
  font-size: 6rem;
  color: #f5fffe;
  text-align: justify;
  z-index: 0;
  opacity: 30%;
  line-height: 1em;
}



section.hero .fairy	{
	position: absolute;
	bottom: 20px; 
	right:20px;
	width: 15vh;
	height: 15vh;
	background-image: url('/wp-content/themes/hwd5/assets/img/fairy-sq.png');
	background-repeat: no-repeat;
    background-position: top center;
    -o-background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    z-index:1;
    opacity: 80%;
    
}



@media (min-width:501px) {
	section.hero .fairy	{
	bottom:-130px; /* Start position off-screen */
	animation: slideUp 1s forwards 0.5s; /* Animation properties with 1s delay */
	}
}

@keyframes slideUp {
  to {
    bottom: 20px; /* Final position */
  }
}

section.hero .sectionInner	{
	padding-top: calc(16vh + 5em);
}

section.hero .container	{
	max-width: 52rem;
}

div.h2 {
	position:absolute;
	top: 24vh;
	left:14vw;
	width: 52rem;
	max-width: 86vw;
	height: 100%;
	z-index: 1000;

}

h3.homeBlurb,
h2.homeBlurb,
h2.homeBlurb p {
	font-size: 3.8rem;
	width: 44rem;
	max-width: 100%;
	text-align: left;	
	margin: 0 0 50px;
	color: #000;	
	font-family: 'Slate Std Bk', sans-serif;	
	text-transform: none;
	font-weight: bold;
	padding: 0;
}

h3.homeBlurb2,
h2.homeBlurb2,
h2.homeBlurb p	{
	font-size: 1.9rem;
	font-weight: 300;
	width: 45rem;
}

.homeBlurb2 em {
	font-family: serif;
}
@media (max-width: 600px)	{
	div.h2 {top: 5vh;left:4%;}
	h3.homeBlurb {margin-bottom: 30px;}
	h2.homeBlurb {margin-bottom: 30px; font-size: 3.3rem;}
	h2.homeBlurb2 {font-size: 1.8rem;}
}

@media (orientation: portrait)	{
	section.hero .sectionInner {padding-top: 15vh;}
}

@media	(max-width: 500px) {
	section.homeBlurb {padding-top: 0vh;}
	h2.homeBlurb {margin: 0 0 30px;}
	h2.homeBlurb2	{ padding-top: 7vh;}
	section.hero .fairy	{ opacity: 40%; }
}

@media	(max-width: 320px) {
	h3.homeBlurb,
	h2.homeBlurb	{ font-size: 2.8rem;}
	h3.homeBlurb2,
	h2.homeBlurb2,
	h2.homeBlurb p	{ font-size: 1.6rem;}
}


@media only screen and (min-width: 812px) and (orientation: landscape){
	section.homeBlurb{padding-top: 7vh;}
	/*.homeBlurb p{margin: 0 0 30px;}*/
}
@media only screen and (min-width: 1024px){
	section.homeBlurb{padding-top: 20vh;}
}
@media only screen and (min-width: 1500px){
	section.homeBlurb{padding-top: 14vh;}
}
@media only screen and (min-width: 2000px){
	section.homeBlurb{min-height: calc(85vh - 50px);}
	section.carousel{display: none;}
	section.whyChooseUs{padding-top: 15vh;min-height: calc(85vh - 50px);}
}
h3.homeBlurb span{color: #000; }

section.projects{padding: 10vh 0}

section.contentHello {
    padding-top: 10vh;
    padding-bottom: 2vh;
}

.helloExcerpt p	{
	font-size: 1.7rem;
}

/* SAMPLE PROJECTS / CLIENTS
**********************************************/

/*HOMEPAGE WHY CHOOSE US HOME  (accordions)
**********************************************/
.accordion-container .flex-col-8 ul {
	list-style: none;
	padding-left: 0;
	margin: 0 0 50px;
}

.accordion-container .flex-col-8 ul li ul {
	list-style: disc;
	padding-left: 50px;
}

.accordion-container .flex-col-8 ul li {
	margin: 1em 0 0 0;
}

/*HOMEPAGE WHY CHOOSE US (3 sections)
**********************************************/
section.whyChooseUs{
	padding: 0;
	min-height: calc(80vh - 50px);	
	border-bottom: 1px solid #ccc;
	border-top: 0px solid #d0e0da; /* to prevent single pale line if dark section above */
	background-image: url('/wp-content/themes/hwd5/assets/img/workspace-BG3.jpg');
	background-repeat: no-repeat;
	-o-background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	position: relative;
}

section.whyChooseUs	.sectionHeader{
	position: relative;
	width: 100%;
	top: 0;
	padding-top: 10vh;
	z-index: 5;
}
	
ul.whyChooseUs.long{
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
}

section.whyChooseUs	.sectionHeader,
ul.whyChooseUs.long li{
	background: rgba(0,0,0,.7);
}

ul.whyChooseUs.long li{
	width: 100%;
	padding: 60px 0 10px;
	margin-bottom: 0;
}

@media (orientation: portrait){
	section.whyChooseUs	.sectionHeader,
	ul.whyChooseUs.long li{
		background: rgba(0,0,0,.8);
	}
}

ul.whyChooseUs.long li:nth-child(3){
	padding: 60px 0 100px;
}	

section.whyChooseUs h2,
ul.whyChooseUs.long h3,
ul.whyChooseUs.long h6{	
	/*width: 100%;
	max-width: 100%;*/
	width: min(100%, 36em);
	margin: 0 auto;
	padding: 0 10%;
	color: var(--color-backgroundAlt);
	text-transform: none;
}
section.whyChooseUs h2{
	margin-bottom: 0;
	font-size: 2.7rem;
}

ul.whyChooseUs.long h3{
	text-align: center;
	height: 60px;
	font-size: 1.5em;
	line-height: 1.3em;
	margin-bottom: 1.3em;
}

ul.whyChooseUs.long h6{
	margin-top: 0vh;
	font-size: 1.2em;
	line-height: 1.4em;
	margin-bottom: 50px;
}

@media (min-width: 1000px){
	section.whyChooseUs{
		filter: saturate(100%);
	}
	section.whyChooseUs	.sectionHeader{
		position: absolute;
		height: 30px;
		background: none;
	}
	ul.whyChooseUs.long{
		display: flex;
	}	
	ul.whyChooseUs.long li,
	ul.whyChooseUs.long li:nth-child(3)	{
		display: flex;
		flex-wrap: wrap;
		width:33.33vw;
		min-height: calc(80vh);
		background: rgba(0,0,0,.6);
		padding: 0 0 40px;
	}	
	ul.whyChooseUs.long li:nth-child(2){
		background: rgba(0,0,0,.7);
	}
	ul.whyChooseUs.long h3{ 
		margin-top: 30vh; 
		text-align: left;
	}
	ul.whyChooseUs.long h6{
		height: 50%;
		/* margin-left: 15%; */
	}
	section.whyChooseUs h2,
	ul.whyChooseUs.long h3,
	ul.whyChooseUs.long h6{
		width: 95%;
		max-width: 70%;
		background: none;
	}
	ul.whyChooseUs.long h3, ul.whyChooseUs.long h6{
		max-width: 32vw;
	}
	ul.whyChooseUs.long li:hover{ 
		background: rgba(1,253,238,0.85);
		transition: background 0.35s ease-in-out,transform 0.35s ease-in-out,opacity 0.35s ease-in-out;
	}
    ul.whyChooseUs.long li:hover h6{
		filter: blur(0px);
	}
	ul.whyChooseUs.long li:hover h3{
		color: var(--color-a-hover);
	}
	ul.whyChooseUs.long li:hover h6{
		color: #000;
	}
	ul.whyChooseUs.long li:nth-child(2):hover{ 
		background: rgba(33,220,209,0.85);
	}
}

@media (min-width:1400px){
	/*ul.whyChooseUs.long li h6{
		filter: blur(3px);
	}*/
	ul.whyChooseUs.long h3,
	ul.whyChooseUs.long h6{
		max-width: 70%;
	}
}


/* WHY CHOOSE US ACCORDION
**********************************************/

section.whyChooseUsHome .sectionInner {
	padding: 2rem 0 3rem;
}

section.whyChooseUsHome h2.sectionTitle	{
	color: var(--color-accent2);
}

.whyChooseUsAccordion	{
	margin-top: 20px;
}





/*HOMEPAGE LONG THUMBNAIL CAROUSEL
**********************************************/
section.longThumbCarousel {
	border-top: 20px solid black;
}

.longThumbCarouselImage {
	margin-right: 10px;
}

.websiteCarousel{
	padding-top: 10px;
}

/*HOMEPAGE WORK - LONG-SCROLL THUMBNAILS
**********************************************/

/* section.workHeader	{
		
} */
section.workHeader h2	{
	color: black;
}

section.workHeader .sectionInner,
section.bottomText .sectionInner	{
	padding: 4rem 0;
}

section.website	{
border-top: 20px solid black;
}

section.viewMoreWork	{
	background-color: #383838;
	border-bottom: 1px solid #222;
	padding: 5rem 0 3rem;
}
h4.viewMore 	{
	text-align: center;
	max-width: 18em;
	background-color: white;
	padding: 16px 3px 8px;
	border: 1px solid black;
}


/*ABOUT PAGE TEXT
**********************************************/
h3.child-page-title {
    margin-bottom: 10px;
	margin-top: 0;
	font-size: 22px;
    max-width: 55rem;
    line-height: 1.8em;
    color: #333;
    text-transform: uppercase;
}
.child-page-excerpt{
	line-height: 1.8em;
}
/* Styles for desktop view (screens with width >= 768px) */
@media (min-width: 768px) {
    .child-page-thumbnail img {
		width: auto;
    }
}

/* Styles for mobile view (screens with width < 768px) */
@media (max-width: 767px) {
    .child-page-thumbnail img {
        height: 170px;
        width: 150px;
        /* Add any other mobile-specific styles here */
    }
}

/*TEAM PAGE TEXT
**********************************************/
.featured-image, .content-section{
	padding: 10px;
}


.bottomText .container	{
	max-width: 30rem;
}