/*
    Theme Name: sunshine.works
    Theme URI: https://sunshine.works/
    Author: Jared
    Author URI: https://sunshine.works/
    Description: A simple, barebones theme that is content & device agnostic.
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: sunshineworks
*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600;800&family=Source+Sans+Pro:wght@400;600;700&display=swap');

/* Landing Page */

.landing-styles h1 {
	color: var(--Base-black, #111);
	font-family: "Inter", sans-serif;
	font-size: 48px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%; /* 62.4px */
	letter-spacing: -1px;
	max-width: 1118px;
	margin-bottom: 30px;
}


.landing-styles h1.alt {
	font-size: 48px;
	font-style: normal;
	font-weight: 500;
}

.landing-styles p {
	color: var(--Base-Dark-Grey, #4B4B4B);
	font-family: "Inter", sans-serif;
	font-size: 1.1em;
	font-style: normal;
	font-weight: 400;
	line-height: 156%; /* 37.44px */
	max-width: 1095px;
}

.landing-styles .large-style p {
	color: var(--Base-black, #111);
	font-family: "Inter", sans-serif;
	font-size: 1.2em;
	font-style: normal;
	font-weight: 300;
	line-height: 130%; /* 41.6px */
}

.landing-styles .limit-w {
	max-width: 654px;
}

.landing-styles .limit-w-800 {
	max-width: 800px;
}

.center {
	margin: 0 auto;
}

.mb-40 {
	margin-bottom: 40px;
}

.bottom-border {
	border-bottom: 1px solid #C7C2C2;
	margin-bottom: 64px;
	padding-bottom: 50px;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-container {
	display: flex;
	gap: 24px;
}

.flex-container .col-33 {
	flex-basis: 33%;
}

.flex-container .col-66 {
	flex-basis: 66%;
}

.flex-container .col-40 {
	flex-basis: 40%;
}

.flex-container .col-60 {
	flex-basis: 60%;
}

.flex-container .item-2x2 {
	flex-basis: 49%;
}

.flex-container .testimonial {
    padding: 24px;
	border-radius: 20px;
	background: #FBFBFB;
	max-width: 597.505px;
}

.flex-container .testimonial img {
	width: 60px;
	height: 60px;
	display: inline-block;
    float: left;
    margin-right: 20px;
}

.flex-container .testimonial p {
	color: #616161;
	font-family: "Inter", sans-serif;
	font-size: 23.886px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.flex-container .testimonial span.stars {
	float: right;
	position: relative;
	bottom: 25px;
}

.flex-container .testimonial span.stars svg {
	position: relative;
	top: 7px;
}


.flex-container .boxed-content {
	display: flex;
	padding: 24px;
	flex-direction: column;
	gap: 10px;
	border-radius: 16px;
	background: #F5F5F5;
	margin-bottom: 24px;
	max-width: 555px;
	position: relative;
}

.flex-container .boxed-content.alt {
	padding: 0;
	background: none;
	max-width: none;
}

.boxed-content img {
	margin-bottom: 10px;
}

.boxed-content h2 {
	color: var(--Base-black, #111);
	font-family: "Inter", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 500;
	line-height: 156%; /* 31.2px */
	text-transform: none;
	letter-spacing: -1px;
}

.boxed-content p {
	padding: 0;
	color: var(--Base-Dark-Grey, #4B4B4B);
	font-family: "Inter", sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 156%; /* 24.96px */
	letter-spacing: -0.32px;
	margin: 0;
}

.vh-100 {
	height: 100vh !important;
}

.page-section {
	width: 1276px;
	margin: 64px auto;
	padding: 0 20px;
}

.hero-text {
	position: absolute;
	top: 135px;
	max-width: 795px;
	margin: 0 115px;
}
.hero-text h1.title {
	color: #FFF;
	font-size: 84.946px;
	font-style: normal;
	font-weight: 600;
	line-height: 110%; /* 93.44px */
	letter-spacing: -3px;
	font-family: "Inter", sans-serif;
	margin-bottom: 15px;
}
.hero-text span.title-description {
	color: #FFF;
	font-size: 29.981px;
	font-style: normal;
	font-weight: 700;
	line-height: 156%; /* 46.77px */
	font-family: "Inter", sans-serif;
	display: block;
	margin-bottom: 40px;
}

.hero-text a {
	color: #FFF;
	font-family: Inter;
	font-size: 22.486px;
	font-style: normal;
	font-weight: 500;
	line-height: 120%; /* 26.983px */
	letter-spacing: -0.45px;
}

.hero-text a.cta-alt {
	color: #023759;
}

.hero-text .cta {
	margin-right: 24px;
    margin-bottom: 10px;
}
.btn-block{    text-align: center;
    margin: 40px 0px;}
    .btn-block a{    background: #FED100;
    padding: 15px 60px;
    border-radius: 10px;
    color: #000;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: bold;}

.cta {
	display: inline-flex;
	height: 75px;
	padding: 24px 32px;
	justify-content: center;
	align-items: center;
	border-radius: 15px;
	background: #023759;
	color: #FFF;
}

.cta-alt {
	display: inline-flex;
	height: 75px;
	padding: 24px 32px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 15px;
	border: 2px solid #023759;
	background: #FFF;
}

.discover img {
	border-radius: 12px;
}

body {
  counter-reset: my-div-counter;
}

.our-process h2::before {
	counter-increment: my-div-counter;
	content: counter(my-div-counter);
	font-weight: bold;
	margin-right: 5px;
	position: absolute;
	left: -45px;
	font-size: 1.5em;
}

@media only screen and (max-width: 1280px) {
	.page-section {
		width: 100%;
	}
}

@media only screen and (max-width: 1000px) {
	.hero-text h1.title {
		font-size: 4em;
		letter-spacing: 0;
	}
	.hero-text span.title-description {
    	font-size: 1.3em;
	}
	.hero-text a {
		font-size: 1.2em;
	}
	.flex-container {
    	flex-wrap: wrap;
		flex-direction: column;
	}
}

@media only screen and (max-width: 680px) {
	.hero-text {
		margin: 0 50px;
	}
	.hero-text span.title-description {
    	display: none;
	}
}
 
:root {
    /* Space between left of viewport border and the content */
    --l: 20vw;
    /* Space between right of viewport border and the content */
    --r: 25vw;
    /* Space between top/bottom of viewport border and the content */
    --v: 1.5vh;
    /* full width left adjustment (since padding is on body) */
    --fw-adj: -20vw;
    /* Primary theme color */
    --primary: #0071BA;
    /* Secondary theme color */
    --secondary: #004F82;
    /* Accent theme color */
    --accent: #FFD84D;
    /* Extra1 theme color */
    --extra1: #FFF;
    /* Extra2 theme color */
    --extra2: #98999B;
    /* Text color */
    --text: #002B47;
    /* Heading font */
    --heading: "Raleway", sans-serif;
    /* Body font */
    --body: "Source Sans Pro", sans-serif;
    /* Default line height */
    --lh: 1.75;
    /* Default font size */
    --fs: 18px;
    /* rounded corners for hero/footer grid units */
    --rounded: .25em;
    /* Primary transition style */
    --transition1: all .25s cubic-bezier(0.4, 0, 0.01, 0.7);
    /* Secondary transition style */
    --transition2: all 1s cubic-bezier(0.4, 0, 0.01, 0.7);
}

/* Minimal reset */
* {
    box-sizing: border-box
}

body,
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
input[type=radio],
input[type=checkbox],
pre {
    margin: 0
}

legend {
    padding: 0
}

fieldset,
ol,
ul {
    padding: 0
}

ol,
ul {
    list-style: none
}

body {
    line-height: 1
}

figcaption,
figure,
img,
main {
    display: block
}

img {
    max-width: 100%
}

a {
    text-decoration: none
}

fieldset {
    border: 0
}

button,
input,
select,
textarea {
    display: block
}

label {
    display: table
}

button {
    line-height: inherit
}

button::-moz-focus-inner {
    border: 0
}

html {
    -ms-text-size-adjust: 100%
}

/* Core elements */
body {
/*    padding: var(--v) var(--r) var(--v) var(--l);*/
    font-family: var(--body);
    color: var(--text);
    line-height: var(--lh);
    font-size: var(--fs);
    background: var(--extra1);
    min-height: 100vh;
	width: 100vw;
    margin: 0;
	overflow-x: hidden;
	transition: var(--transition1);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading);
    color: var(--primary);
}

a.skip-link {
    position: absolute;
    left: -100%;
    top: 0;
    opacity: 0;
}

a.skip-link:focus {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
}

.modal {
    display: none;
}

.modal.is-open {
    display: block;
}

.modal__overlay {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
	backdrop-filter: blur(3px);
}

.modal__container {
    background-color: #fff;
    padding: 2vw;
    min-width: 30vw;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    overflow-y: auto;
    box-sizing: border-box;
}

.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal__title {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1;
	margin-right: 2vw;
    box-sizing: border-box;
}

.modal__close {
    background: transparent;
    border: 0;
    font-size: 2vw;
}

.modal__header .modal__close:before {
    content: "\2715";
}

.modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, .8);
}

.modal__btn {
    font-size: .875rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: #e6e6e6;
    color: rgba(0, 0, 0, .8);
    border-radius: .25rem;
    border-style: none;
    border-width: 0;
    cursor: pointer;
    text-transform: none;
    overflow: visible;
    line-height: 1.15;
    margin: 0;
    will-change: transform;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform .25s ease-out;
}

.modal__btn:focus,
.modal__btn:hover {
    transform: scale(1.05);
}

.modal__btn-primary {
    background-color: #00449e;
    color: #fff;
}

@keyframes mmfadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mmfadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes mmslideIn {
    from {
        transform: translateY(15%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes mmslideOut {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-10%);
    }
}

.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: transform;
}

.slideshow {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    z-index: -1;
}
.slideshow-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background: no-repeat 50% 50%;
  background-size: cover;
/*  animation-name: kenburns;*/
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 16s;
  opacity: 1;
  transform: scale(1.2);
}
.slideshow-image:nth-child(1) {
/*  animation-name: kenburns-1;*/
  z-index: 3;
}
.slideshow-image:nth-child(2) {
/*  animation-name: kenburns-2;*/
  z-index: 2;
}
.slideshow-image:nth-child(3) {
/*  animation-name: kenburns-3;*/
  z-index: 1;
}
.slideshow-image:nth-child(4) {
/*  animation-name: kenburns-4;*/
  z-index: 0;
}

@keyframes 
kenburns-1 {  0% {
 opacity: 1;
 transform: scale(1.2);
}
 1.5625% {
 opacity: 1;
}
 23.4375% {
 opacity: 1;
}
 26.5625% {
 opacity: 0;
 transform: scale(1);
}
 100% {
 opacity: 0;
 transform: scale(1.2);
}
 98.4375% {
 opacity: 0;
 transform: scale(1.21176);
}
 100% {
 opacity: 1;
}
}
@keyframes 
kenburns-2 {  23.4375% {
 opacity: 1;
 transform: scale(1.2);
}
 26.5625% {
 opacity: 1;
}
 48.4375% {
 opacity: 1;
}
 51.5625% {
 opacity: 0;
 transform: scale(1);
}
 100% {
 opacity: 0;
 transform: scale(1.2);
}
}
@keyframes 
kenburns-3 {  48.4375% {
 opacity: 1;
 transform: scale(1.2);
}
 51.5625% {
 opacity: 1;
}
 73.4375% {
 opacity: 1;
}
 76.5625% {
 opacity: 0;
 transform: scale(1);
}
 100% {
 opacity: 0;
 transform: scale(1.2);
}
}
@keyframes 
kenburns-4 {  73.4375% {
 opacity: 1;
 transform: scale(1.2);
}
 76.5625% {
 opacity: 1;
}
 98.4375% {
 opacity: 1;
}
 100% {
 opacity: 0;
 transform: scale(1);
}
}
.tabs input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tabs {
	 border-radius: 8px;
	 overflow: hidden;
}
 .tab {
	 width: 100%;
	 color: white;
	 overflow: hidden;
}
 .tab-label {
	 display: flex;
	 justify-content: space-between;
	 padding: 1em;
	 background: #333;
	 font-weight: bold;
	 cursor: pointer;
}
 .tab-label:hover {
	 background: var(--secondary);
}
 .tab-label:after {
	 content: "\276F";
	 width: 1em;
	 height: 1em;
	 text-align: center;
	 transition: all 0.35s;
}
 .tab-content {
	 max-height: 0;
	 padding: 0 1em;
	 color: #333;
	 background: white;
	 transition: all 0.35s;
}
 .tab-close {
	 display: flex;
	 justify-content: flex-end;
	 padding: 1em;
	 font-size: 0.75em;
	 background: #333;
	 cursor: pointer;
}
 .tab-close:hover {
	 background: var(--secondary);
}
 .tabs input:checked + .tab-label {
	 background: var(--secondary);
}
 .tabs input:checked + .tab-label:after {
	 transform: rotate(180deg);
	 transform-origin: 1.2vw 0.6vw;
}
 .tabs input:checked ~ .tab-content {
	 max-height: 100vh;
	 padding: 1em;
}



 

#menu-header {
    margin: 0;
    padding: 0;
    list-style: none;
    list-style-position: inside;
}

#menu-header>li {
    display: inline-block;
    position: relative;
    line-height: 1;
}

#menu-header>li>.sub-menu {
    display: block;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    height: 0;
    z-index: 2;
}

#menu-header>li>a,
.sub-menu>li>a {
    color: var(--text);
    text-decoration: none;
    font-size: 1vw;
    line-height: 1.5;
    padding: 1vw;
    display: block;
    background: transparent;
    transition: var(--transition1);
}

#menu-header>li>a:hover,
.sub-menu>li>a:hover {
}

#menu-header>li:first-child>a:hover+.sub-menu,
#menu-header>li:first-child>a:focus+.sub-menu,
#menu-header>li>.sub-menu:hover {
    opacity: 1;
    pointer-events: all;
    height: auto;
}

.sub-menu {
    list-style: none;
    padding: 2vh 0;
    background: rgb(255 255 255 / 90%);
    min-width: 16.5em;
    box-shadow: 0 .25vw .5vw rgb(0 0 0 / 15%);
	backdrop-filter: blur(2px);
}

.sub-menu>li>a {
    text-decoration: none;
    color: var(--text);
    padding: 1vh 1.2vw;
    display: block;
	font-weight: normal;
    letter-spacing: 1px;
}

#mobile {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    justify-content: space-between;
    align-items: center;
    background: #f8f5f1;
    border-top: 0.25em solid var(--tertiary);
    padding: 2vw 4vw 2.5vw;
    box-shadow: 0 0 2vh rgb(255 255 255 / 50%);
}

#mobile span.socials>a,
#mobile a.facebook:before,
#mobile a.google:before,
#mobile a.youtube:before {
    width: 9vw;
    height: 6vw;
}

#mobile a.phone {
    text-decoration: none;
    font-weight: bold;
    font-size: 5.75vw;
    margin-right: 7vw;
    top: -0.05em;
}



/* Additional elements */
body>header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 3vh 6vw;
	z-index: 2;
	border-bottom: 2px solid transparent;
}

.sub-menu {
    display: none;
	position: absolute;
}

nav .menu>li>a:hover+ul.sub-menu, nav .menu>li>a:focus+ul.sub-menu, .sub-menu:hover, .sub-menu:focus {
    display: block;
}

a.logo-link {
    display: inline-block;
	width: 18vw;
	transform: translateY(0);
}

a.logo-link>svg {
    filter: brightness(0) invert(1);
	width: 100%;
	height: 100%;
}

#logo > polygon:nth-child(8), #logo > path:nth-child(9), #logo > polygon:nth-child(10), #logo > polygon:nth-child(11), #logo > path:nth-child(12) {
    fill: #0071b9 !important;
}

#logo > g > polygon:nth-child(3) {
    opacity: .5;
}

ul#menu-main-nav {
    position: absolute;
    right: 5vw;
    top: 50%;
    margin: 0;
    transform: translateY(-60%);
}

nav#primary {
    position: relative;
}

ul#menu-main-nav>li {
    display: inline-block;
}

ul#menu-main-nav>li>a {
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1vw;
    letter-spacing: 2px;
    padding: 1vh 1vw;
    opacity: .85;
}

nav a.phone {
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    font-size: 1.25vw;
    display: block;
    position: absolute;
	top: 50%;
    transform: translateY(-60%);
	left: 20vw;
	opacity: .85;
}

.slideshow+main {
    margin-top: -3vh;
}

body>header:before {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, transparent, #004F82);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
	transition: var(--transition1);
}

#menu-main-nav > li.menu-item-has-children > a:after {
    content: "";
    width: 0.75vw;
    height: 0.75vw;
    background: url(/wp-content/themes/sunshine.works/img/icons/caretdown.svg) no-repeat center center;
    background-size: contain;
    position: relative;
    display: inline-block;
    margin-left: 0.75em;
}

nav a.phone:before {
    content: "";
    width: 1.25vw;
    height: 1.25vw;
    background: url(/wp-content/themes/sunshine.works/img/icons/phone.svg) no-repeat center center;
    background-size: contain;
    position: relative;
    display: inline-block;
    top: 0.2em;
    padding-right: 0.75em;
}

.slideshow-text {
    position: absolute;
    top: 55vh;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 4;
}

.slideshow-text span {
    display: block;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 0.2em rgb(0 0 0 / 67%);
}

.slideshow-text h1 span:first-child {
    font-weight: 400;
}

.slideshow-text h1 span:nth-child(2) {
    font-size: 5vw;
    line-height: 1;
}

.slideshow-text h1 span:last-child {
    font-weight: 400;
    line-height: 2;
}

.slideshow:after {
    content: "";
    width: 100%;
    height: 40vh;
    background: linear-gradient(180deg, transparent, rgb(0 79 130 / 80%));
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 3;
}

main .content p, main .content ul, main .content ol {
    font-size: 95%;
}

h2 {
    font-size: 200%;
    text-transform: uppercase;
    font-weight: 800;
	line-height: 1.25;
	letter-spacing: 3px;
}

a.cta.btn {
    color: var(--text);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 133%;
    background: var(--accent);
    padding: 1.75vh 3.6vw;
    border-radius: var(--rounded);
    margin-top: 2vh;
    display: inline-block;
	transition: var(--transition2);
}

a.cta.btn:after {
    content: "";
    width: 0vw;
    height: 0.75vw;
    padding-left: 2vw;
    margin-left: 1vw;
    position: relative;
    display: inline-block;
    background: url(/wp-content/themes/sunshine.works/img/icons/rightarrow.svg) no-repeat center center;
    background-size: contain;
    filter: brightness(1) invert(0);
    transition: var(--transition2);
    transform: translateX(0);
}

#intro .text.content {
    width: 42vw;
    padding-left: 7.5vw;
    display: inline-block;
    vertical-align: top;
    margin-top: 10vh;
}

section#intro {
    clear: both;
	margin-bottom: 12vh;
}

.clear {
	clear: both;
	position: relative;
}

#intro .image {
    display: inline-block;
    width: 45vw;
    height: 40vw;
    margin-left: 5vw;
	position: relative;
}

#intro .image:after {
    content: "";
    position: absolute;
    right: 2vw;
    bottom: 2vw;
    width: 15%;
    height: 15%;
    background: url(/wp-content/themes/sunshine.works/img/icons/logo-symbol.svg) no-repeat center center;
    z-index: 1;
    background-size: contain;
    transform: rotate(1deg);
}

#intro .image img {
    object-fit: cover;
    width: 100%;
    height: 100%;
	border: 1vw solid #fff;
    box-shadow: 0 0 0.2vw rgb(0 0 0 / 33%);
    transform: rotate(.5deg);	
}

#fourbox>a.box {
    display: block;
    width: 46.9vw;
    float: left;
    margin-bottom: 1vw;
    color: #fff;
    background: url(/wp-content/uploads/2023/04/customhomeconc.jpeg) no-repeat center center;
    background-size: cover;
    height: 42vh;
    padding: 4vh 3vw;
	position: relative;
	overflow: hidden;
}
#fourbox>a.box:nth-child(2) {
    background: url(/wp-content/uploads/2023/04/remodelbgc.jpeg) no-repeat center center;
    background-size: cover;
}
#fourbox>a.box:nth-child(3) {
    background: url(/wp-content/themes/sunshine.works/img/commbg_c.jpg) no-repeat center center;
    background-size: cover;
}
#fourbox>a.box:nth-child(4) {
    background: url(/wp-content/themes/sunshine.works/img/specbox.jpg) no-repeat center center;
    background-size: cover;
}

#fourbox .inner.box {
    position: absolute;
    bottom: 3vh;
	z-index: 2;
	width: 85%;
}

#fourbox>a.box:after {
    content: "";
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 50%, var(--text) 80%);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    opacity: .65;
	transition: var(--transition2);
}

#fourbox .inner.box>span {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 90%;
}

#fourbox .inner.box>span:after {
    content: "";
    width: 0vw;
    height: 0.7vw;
    filter: brightness(0) invert(1);
    padding-left: 2vw;
    margin-left: 1vw;
    position: relative;
    display: inline-block;
    background: url(/wp-content/themes/sunshine.works/img/icons/rightarrow.svg) no-repeat center center;
    background-size: contain;
	transform: translateX(0);
	transition: var(--transition2);
}

#fourbox {
    padding-left: 2vw;
    padding-right: 2vw;
	margin-bottom: 7.5vh;
	position: relative;
    z-index: 1;
}

#fourbox>a.box:nth-child(odd) {
    margin-right: 1vw;
}

#fourbox>a.box h2 {
    color: #fff;
	margin-bottom: 1vh;
}

#fourbox p {
    position: relative;
    overflow: hidden;
    height: 0;
    opacity: 0;
    margin: 0;
}

h3 {
    text-align: center;
    color: var(--extra2);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 1.2vw;
	margin-bottom: 2.5vh;
	letter-spacing: 2px;
}

#learnmore, #associations,#greviews {
    padding: 0 15vw;
}

.tabs {
    border-radius: 0;
}

.tab-label {
    background: var(--primary);
    padding: 2.5vh 15vw 2.5vh 2vw;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1.7vw;
    line-height: 1.333;
    position: relative;
	margin-bottom: 2vh;
}

.tab-label:after {
    content: "";
    position: absolute;
    right: 3vw;
    top: 50%;
    transform: translateY(-50%);
    background: url(/wp-content/themes/sunshine.works/img/icons/angle.svg) no-repeat center center;
    background-size: contain;
    width: 2.5vw;
    height: 2.5vw;
}

footer {
    margin-top: 7.5vh;
	position: relative;
}

#associations li {
    display: inline-block;
}

#associations li a {
    display: inline-block;
    margin-right: 5.5vw;
}

#associations li a img {
    max-height: 10vh;
    max-width: 20vw;
    filter: contrast(0.5) grayscale(1) opacity(0.75);
}

#associations li:last-child a {
    margin-right: 0;
}

#associations ul {
    text-align: center;
}

#associations {
    margin-bottom: 7.5vh;
	position: relative;
	z-index: 1;
}

#endcta {
    background: var(--secondary);
    color: #fff;
    padding: 5vh 48vw 10vh 15vw;
	position: relative;
	z-index: 1;
}

footer h4 {
    color: var(--accent);
    text-transform: uppercase;
    font-size: 2vw;
    letter-spacing: 2px;
}

.social {
    margin-top: 2.5vh;
}

.social a>span, footer .right a.login>span {
    position: absolute;
    width: 1px;
    height: 1px;
    left: -120vw;
    opacity: 0;
}

.social a, footer .right a.login {
	overflow: hidden;
	opacity: .8;
}

.social > span {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    position: relative;
    top: -0.4em;
}

.social > span:before {
    content: "";
    width: 4vw;
    height: 1px;
    background: #fff;
    display: inline-block;
    position: relative;
    top: -0.25em;
    margin: 0 2vw;
}

.social a:before {
    content: "";
    width: 1.5vw;
    height: 1.5vw;
    display: inline-block;
    position: relative;
    background-size: contain;
}

.social a.facebook:before {
    background: url(/wp-content/themes/sunshine.works/img/icons/facebook.svg) no-repeat center center;
	background-size: contain;
}
.social a.linkedin:before {
    background: url(/wp-content/themes/sunshine.works/img/icons/linkedin.svg) no-repeat center center;
	background-size: contain;
}
.social a.houzz:before {
    background: url(/wp-content/themes/sunshine.works/img/icons/houzz.svg) no-repeat center center;
	background-size: contain;
}

.social li {
    display: inline-block;
    margin-right: 1vw;
}

.social li:last-child {
    margin-right: 0;
}

.social ul {
    display: inline-block;
}

#fineprint {
    position: absolute;
    bottom: 12px;;
    left: 0;
    right: 0;
    background: rgb(255 255 255 / 80%);
    padding: 2vh 6vw;
    color: var(--text);
	z-index: 1;
	backdrop-filter: blur(0.5vw);
}

#fineprint ul, #fineprint li {
    display: inline-block;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
}

#fineprint .left {
    text-align: left;
}

#fineprint .right {
    text-align: right;
    float: right;
	position: relative;
    top: -0.3vh;
}

#fineprint a {
    color: var(--text);
	opacity: .75;
}

#fineprint .left li a {
    font-weight: 400;
}

#fineprint .left li:first-child:after {
    content: "\2014";
    display: inline-block;
    position: relative;
    padding-left: 0.5vw;
}

footer .right a.login:before {
    content: "";
    width: 1.2vw;
    height: 1.2vw;
    display: inline-block;
    position: relative;
	background: url(/wp-content/themes/sunshine.works/img/icons/login.svg) no-repeat center center;
    background-size: contain;
}

a.login {
    display: inline-block;
    line-height: 1;
}

li.coconstruct.login {
    position: relative;
    top: 0.333em;
}

#fineprint .right li {
    padding-right: 1.5vw;
}

#endcta:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45vw;
    background: url(/wp-content/themes/sunshine.works/img/icons/logo-symbol.svg) no-repeat center top;
    background-size: cover;
    z-index: -1;
    opacity: .333;
}

#learnmore .tab-content>p:first-child {
    margin-top: 0;
}

.tabs input:checked ~ .tab-content {
    padding-top: 0;
    padding-bottom: 5vh;
}

video#vidbg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

div#login-content {
    width: auto;
    margin-bottom: 0;
}

#login .modal__container {
    min-width: 300px;
}

a.secondary.btn, .wp-block-button__link, span.img-gal-toggle {
    color: var(--extra1);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 110%;
    background: var(--text);
    padding: 1.5vh 3vw;
    border-radius: var(--rounded);
    margin-top: 2vh;
    display: inline-block;
    opacity: 0.667;
    transition: var(--transition2);
}

a.cta.btn+a.secondary.btn {
    margin-left: 1vw;
}

#quote h2.gform_title {
    display: none;
}

input#gform_submit_button_1 {
    color: var(--extra1);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    font-size: 125%;
    background: var(--text);
    padding: 1.5vh 4vw;
    border-radius: var(--rounded);
    display: inline-block;
    opacity: .8;
    margin: 0;
    border: none;
    cursor: pointer;
}

input#gform_submit_button_1:hover {
    opacity: 1;
}

.gform_wrapper.gravity-theme .gfield textarea.large {
    max-height: 20vh;
}

div#quote-content {
    margin: 0;
}
#mobile>li:first-child, #mobile>li:nth-child(2) {
    width: 34vw;
}
	#mobile>li {
    width: 16vw;
	position: relative;
	display: inline-block;
}
	#mobile>li a span {
    display: none;
}
	#mobile a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
	background: var(--text);
	color: var(--extra1);
	line-height: 3;
    text-transform: uppercase;
    letter-spacing: 1px;
	font-weight: 600;
}

#mobile>li>a:before {
    content: "";
    display: inline-block;
    position: relative;
    width: 5vw;
    height: 5vw;
	top: 0.333em;
}

#mobile>li:nth-child(1)>a:before {
    background: url(/wp-content/themes/sunshine.works/img/icons/msg.svg) no-repeat center center;
    background-size: contain;
}
#mobile>li:nth-child(2)>a:before {
    background: url(/wp-content/themes/sunshine.works/img/icons/quote.svg) no-repeat center center;
    background-size: contain;
}
#mobile>li:nth-child(3)>a:before {
    background: url(/wp-content/themes/sunshine.works/img/icons/phone.svg) no-repeat center center;
    background-size: contain;
}
#mobile>li:nth-child(4)>a:before {
    background: url(/wp-content/themes/sunshine.works/img/icons/login.svg) no-repeat center center;
    background-size: contain;
    filter: brightness(0) grayscale(1) invert(1);
}

#mobile>li:nth-child(1)>a:before, #mobile>li:nth-child(2)>a:before {
    margin-right: 2vw;
}
#mobile a:focus {
    background: var(--secondary);
}
#pg-hero {
    height: 50vh;
	z-index: -1;
    position: relative;
}

#pg-hero>img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
#pg-hero+main {
    padding: 0 15vw;
    margin-top: -10vh;
	z-index: 1;
    position: relative;
}
#pg-hero+main>h1 {
    color: var(--secondary);
    text-transform: uppercase;
    margin-bottom: 6vh;
    line-height: 1.2;
    letter-spacing: 2px;
    width: fit-content;
    position: relative;
    padding: 1.5vh 1.5vw 4vh;
    left: -1.5vw;
}
#pg-hero+main>h1:before {
    content: "";
    width: 100%;
    height: 100%;
    background: rgb(255 255 255 / 80%);
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    opacity: 1;
    backdrop-filter: blur(2px);
}
#pg-hero+main>h1>span {
    display: block;
    font-size: 1vw;
    font-weight: 400;
    opacity: .8;
}

li > ul.sub-menu:hover, ul.sub-menu a:hover + ul.sub-menu, ul.sub-menu a + ul.sub-menu:hover {
    display: block;
}

ul.sub-menu a + ul.sub-menu {
    left: 67%;
	top: 0;
}
ul.sub-menu>li {
	position: relative;
}
ul#menu-main-nav>li>a+.sub-menu>li>a+.sub-menu {
    z-index: 2;
}
ul#menu-main-nav>li>a+.sub-menu>li>a+.sub-menu>li>a+.sub-menu {
    z-index: 3;
}
main h3 {
    text-align: left;
    margin: 4vh 0 0;
}
ul.half>li {
    width: 50%;
    float: left;
}

ul.half:after {
    content: "";
    clear: both;
    display: block;
}
h2>span {
    display: block;
    font-size: 70%;
    font-weight: 400;
    color: var(--extra2);
}
.modal iframe#btIframe {
    height: 600px;
}
.pl-1 {
	padding-left: 1vw;
}
.pl-2 {
	padding-left: 2vw;
}
.pl-3 {
	padding-left: 3vw;
}
.pl-4 {
	padding-left: 4vw;
}
.pl-5 {
	padding-left: 5vw;
}
.wp-block-columns {
    display: flex;
}

.wp-block-column {
    flex: 1;
}

#mobile-menu {
	display: none;
}

#mobile-menu-icon, #mobile-menu, #mobile-menu-icon svg, #mobile-menu * {
    transition: none;
}
.article {
    margin-bottom: 5vh;
}

.article h2>a {
    color: var(--primary);
    font-family: var(--heading);
	position: relative;
}
#mobile-menu .sub-menu, #mobile-menu .sub-menu a + .sub-menu {
    display: block;
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
}
#mobile-menu>ul>li>a {
    color: var(--extra2);
    font-size: 5vw;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1vw;
    padding: 0 4vw;
}

#mobile-menu .sub-menu>li>a {
    padding: 1vh 4vw;
    font-size: 3vw;
}

#mobile-menu .sub-menu>li.menu-item-has-children>a {
    color: var(--extra2);
    text-transform: uppercase;
    font-size: 3.6vw;
    font-weight: bold;
    letter-spacing: 1vw;
}

#mobile-menu li.menu-item-has-children {
    border-bottom: 0.5vh solid var(--extra2);
}

#mobile-menu>ul>li {
    background: #eee;
}

#mobile-menu-icon {
	display: none;
}

main .wp-block-image img {
    height: auto;
    object-fit: cover;
    width: 100%;
    height: 100%;
/*     border: 1vw solid #fff; */
    box-shadow: 0 0 0.2vw rgb(0 0 0 / 33%);
/* 	border-radius: 5px; */
	margin-top: 1em;
}

main .wp-block-image {
    position: relative;
}

figure.wp-block-pullquote blockquote {
    font-size: 5vw;
    color: var(--primary);
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    font-family: var(--heading);
}

figure.wp-block-pullquote blockquote:before {
    content: '"';
    position: absolute;
    left: -3vw;
    top: -6vh;
    z-index: -1;
    font-size: 12vw;
    line-height: 1;
    color: var(--extra2);
    opacity: .5;
    font-family: var(--body);
}

figure.wp-block-pullquote blockquote:after {
    content: '"';
    position: absolute;
    right: 0;
    bottom: -12vh;
    z-index: -1;
    font-size: 12vw;
    line-height: 1;
    color: var(--extra2);
    opacity: .5;
    font-family: var(--body);
}

figure.wp-block-pullquote {
    padding-right: 3vw;
}

h3>a {
    color: var(--extra2);
	position: relative;
}

main p>a, main ul>li>a {
    color: var(--primary);
    font-weight: 600;
	position: relative;
}

h3>a:after, .article h2>a:after, main p>a:not([href*=".jpg"]):after, main ul>li>a:after {
    content: "";
    width: 100%;
    display: block;
    position: absolute;
    bottom: 0;
	left: 0;
    height: 2px;
    background: var(--primary);
    transform: translateY(0);
    transition: var(--transition2);
}

h3>a:after {
    background: var(--extra2);
}

.article h2>a:after {
    background: var(--primary);
}

hr.wp-block-separator {
    margin-top: 5vh;
    margin-bottom: 5vh;
}

.num-callout svg {
    fill: var(--primary);
    width: 25%;
	float: left;
	padding-right: 1vw;
}
.num-callout {
    font-size: 2vw;
    display: block;
    font-weight: bold;
    color: var(--extra2);
    margin-top: 1.5vh;
}
hr.wp-block-separator.invis {
    background: none;
    border: none;
    margin: 2.5vh 0;
}
h2.subdue {
    color: var(--extra2);
    font-size: 150%;
}
#pg-hero+main ul {
    list-style: inherit;
    list-style-position: outside;
    padding-left: 2em;
}

#pg-hero+main .wp-block-columns>.wp-block-column:first-child>ul, #pg-hero+main .wp-block-columns>.wp-block-column:first-child>ol, #pg-hero+main .wp-block-columns>.wp-block-column:first-child>p {
    padding-right: 4vw;
}
.wp-block-button.side, .wp-block-button.side+.wp-block-button {
    display: inline-block;
}

.wp-block-button.side+.wp-block-button {
    margin-left: 1vw;
}

.gallery.page .tab-label {
    display: block;
}

.gallery.page .tab-label span {
    font-weight: normal;
    opacity: .67;
}

.gallery.page .tab-label:hover span {
    opacity: 1;
}

.gallery.page .tabs input:checked + .tab-label span {
    opacity: 1;
}
.gallery.page .tabs input:checked ~ .tab-content {
    margin-bottom: 5vh;
	max-height: max-content;
}

.mt3 {
    margin-top: 3vh;
}

.mb2 {
    margin-bottom: 2vh;
}
.gallery.page .tab iframe {
    width: 100%;
    height: 51vh;
}
.btn svg {
    filter: contrast(0) brightness(2);
    display: inline-block;
    position: relative;
    width: 1vw;
}
#glt-translate-trigger {
    font-family: var(--body);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 1vw;
    padding: 0.3vh 0.5vw;
}
#associations .license {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--extra2);
    text-transform: uppercase;
    font-weight: 400;
    opacity: .65;
}

iframe#btIframe {
    height: 650px !important;
}
.img-gal {
    height: 250px;
    overflow: hidden;
    position: relative;
    margin-bottom: 1vh;
}

.img-gal.open {
    height: auto;
}

.img-gal:after {
    content: "";
    width: 100%;
    height: 5vh;
    background: linear-gradient(360deg, white, transparent);
    position: absolute;
    left: 0;
    bottom: 0;
}

.img-gal.open:after {
    display: none;
}

span.img-gal-toggle {
	cursor: pointer;
}
.inventory-container>a.listing {
    display: block;
    width: 49%;
    float: left;
    border: 1px solid var(--secondary);
    box-shadow: 0 1px 9px rgb(0 0 0 / 20%);
}

.inventory-container>a.listing:nth-child(2n-1) {
    margin-right: 1%;
}

.inventory-container>a.listing:nth-child(2n+2) {
    margin-left: 1%;
}

.inventory-container {
    display: block;
    position: relative;
    margin: 7vh 0;
}
.inventory-container .listing h2 {
    font-size: 1.5vw;
    padding: 2vh;
}

#pg-hero+main .inventory-container .listing ul.details {
    color: var(--extra2);
    list-style: none;
    padding-left: 2vh;
    margin: 0;
}

#pg-hero+main .inventory-container .listing ul.details li {
    display: block;
    width: 50%;
    float: left;
}
.listing .learn-more {
    color: #fff;
    background: var(--secondary);
    display: block;
    text-align: center;
    margin-top: 2vh;
    padding: 1vh;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition2);
}
li.bed:before, li.bath:before, li.garage:before, li.sqft:before, li.price:before, li.addr:before {
    content: "";
    width: 1.5vw;
    height: 1vw;
    display: inline-block;
    position: relative;
    margin-right: 0.5em;
    filter: opacity(0.5);
	top: 4px;
}


li.bed:before {
	background: url(/wp-content/themes/sunshine.works/img/icons/fa-bed.svg) no-repeat center center;
    background-size: contain;
}
li.bath:before {
	background: url(/wp-content/themes/sunshine.works/img/icons/fa-bath.svg) no-repeat center center;
    background-size: contain;
}
li.garage:before {
	background: url(/wp-content/themes/sunshine.works/img/icons/fa-garage.svg) no-repeat center center;
    background-size: contain;
}
li.sqft:before {
	background: url(/wp-content/themes/sunshine.works/img/icons/fa-sqft.svg) no-repeat center center;
    background-size: contain;
}
li.price:before {
	background: url(/wp-content/themes/sunshine.works/img/icons/fa-price.svg) no-repeat center center;
    background-size: contain;
}
li.addr:before {
	background: url(/wp-content/themes/sunshine.works/img/icons/fa-addr.svg) no-repeat center center;
    background-size: contain;
}
#pg-hero+main ul.home-details {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1vw;
    font-weight: bold;
    color: var(--secondary);
    float: left;
    width: 36%;
}

#pg-hero+main ul.home-specs {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1vw;
    font-weight: bold;
    color: var(--secondary);
    float: right;
    width: 64%;
}

#pg-hero+main ul.home-specs li {
    width: 25%;
    display: inline-block;
	text-align: right;
}
#pg-hero+main ul.home-details li.price {
    color: var(--extra2);
    font-size: 1.5vw;
}

#pg-hero+main ul.home-details li.price:before {
    height: 1.5vw;
    width: 2vw;
}
h2>a {
    color: var(--extra2);
    position: relative;
    text-decoration: underline;
}
	.img-gal .wp-block-column {
    margin-right: 1em;
}
	
	
.hidden {
    display: none;
}





/* animations */
/* *:not(iframe) {
	transition: var(--transition2);
} */
a, a img, #fourbox>a.box h2, #fourbox>a.box p, a.logo-link #logo>g>polygon:nth-child(3) {
	transition: var(--transition2);
}

body.scrolled>header:before {
	transform: translateY(-100%);
	transition: var(--transition1);
}

body>header:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #fff;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translateY(-100%);
	transition: var(--transition1);
}

body.scrolled>header:after {
    transform: translateY(0);
	transition: var(--transition1);
}

.scrolled a.logo-link>svg {
    filter: brightness(1) invert(0);
	transition: var(--transition1);
}

.scrolled nav a.phone {
    color: var(--primary);
	transition: var(--transition1);
}

.scrolled nav a.phone:before {
    filter: invert(1) opacity(0.3);
	transition: var(--transition1);
}

.scrolled ul#menu-main-nav>li>a {
    color: var(--primary);
	transition: var(--transition1);
}

.scrolled #menu-main-nav > li:nth-child(2) > a:after, .scrolled #menu-main-nav > li:nth-child(3) > a:after, .scrolled #menu-main-nav > li:nth-child(5) > a:after {
    filter: invert(1) opacity(0.3);
	transition: var(--transition1);
}

body.scrolled>header {
    padding: 2vh 4vw 1vh;
	border-bottom: 0.5vh solid #cbcccc;
	transition: var(--transition1);
}

.scrolled a.logo-link {
    width: 10vw;
	transition: var(--transition1);
}

.scrolled ul#menu-main-nav {
    transform: translateY(-65%);
	transition: var(--transition1);
}

.scrolled nav a.phone {
    transform: translateY(-65%);
	left: 12vw;
	transition: var(--transition1);
}

a.cta.btn:hover, a.cta.btn:focus {
    color: #fff;
    background: var(--text);
    transition: var(--transition1);
}

a.cta.btn:hover:after, a.cta.btn:focus:after {
    filter: brightness(0) invert(1);
    transition: var(--transition1);
    transform: translateX(1vw);
}

#fourbox a.box.content:before {
    content: "";
    width: 100%;
    height: 100%;
    background: var(--secondary);
	opacity: .8;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    transform: translateY(-101%);
	transition: var(--transition2);
}
#fourbox a.box.content:hover:before {
    transform: translateY(0);
	transition: var(--transition1);
}

#fourbox a.box.content:hover:after {
	transform: translateY(51%);
	transition: var(--transition1);
}

#fourbox>a.box:hover h2 {
    color: var(--accent);
	transition: var(--transition1);
}

#fourbox a.box:hover .inner.box>span {
    color: var(--accent);
	transition: var(--transition1);
}

#fourbox a.box:hover .inner.box>span:after {
    transform: translateX(2vw);
    filter: invert(76%) sepia(72%) saturate(389%) hue-rotate(353deg) brightness(115%) contrast(103%);
	transition: var(--transition1);
}

#fourbox a.box:hover p {
    height: 12vh;
    opacity: 1;
	margin-bottom: 1vh;
	transition: var(--transition1);
}

nav a.phone:hover {
    opacity: 1;
	transition: var(--transition1);
}

ul#menu-main-nav>li>a:hover, ul#menu-main-nav>li>.sub-menu:hover~a {
    opacity: 1;
	transition: var(--transition1);
}

.sub-menu>li>a:hover {
    font-weight: bold;
}

a.logo-link:hover {
    transform: translateY(-.333vh);
	transition: var(--transition1);
}

.social a:hover, footer .right a.login:hover {
	opacity: 1;
	transition: var(--transition1);
}

#fineprint a:hover {
	opacity: 1;
	transition: var(--transition1);
}

a.secondary.btn:hover, .wp-block-button__link:hover, span.img-gal-toggle:hover {
	opacity: 1;
	transition: var(--transition1);
}

#associations li a:hover img {
    filter: contrast(1) grayscale(0) opacity(1);
}

a.logo-link:hover #logo > g > polygon:nth-child(3) {
    opacity: .67;
    transition: var(--transition1);
}

#mobile-menu-icon.active svg {
    fill: var(--extra2) !important;
}

#mobile-menu.active {
	visibility: visible;
	pointer-events: all;
	overflow-y: scroll;
}

h3>a:hover:after, .article h2>a:hover:after, main p>a:hover:after, main ul>li>a:hover:after {
    transform: translateY(2px);
    transition: var(--transition1);
}

#mobile-menu-icon.scrolled > svg {
    fill: var(--primary);
}

#mobile-menu-icon.scrolled {
    padding-top: 1.5vh;
}
#mobile-menu-icon.active.scrolled {
    padding-top: 4vh;
}


figure.wp-block-image>a:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #000;
    display: block;
    position: absolute;
    opacity: 0;
	border-radius: 5px;
    transition: var(--transition2);
}
figure.wp-block-image>a:hover:before {
    opacity: 0.1;
    transition: var(--transition1);
}
figure.wp-block-image>a:after {
    content: "";
    background: url(/wp-content/themes/sunshine.works/img/icons/expand-solid.svg) no-repeat center center;
    filter: contrast(0) brightness(2);
    position: relative;
    width: 33%;
    height: 33%;
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0.5);
    transition: var(--transition2);
    opacity: 0;
}

figure.wp-block-image>a:hover:after {
    transform: translate(-50%,-50%) scale(1);
    opacity: .67;
    transition: var(--transition1);
}

a.listing:hover .learn-more {
    filter: brightness(1.5);
    transition: var(--transition1);
}
.inventory-container>a.listing:hover {
    /* border-color: #fff; */
    box-shadow: 0 0 0 transparent;
}










/* larger than 1080p */
@media (min-width: 2001px) {
    :root {
        --fs: 25px;
    }
}

/* larger than 1440p (e.g. 4k) */
@media (min-width: 2561px) {
    :root {
        --fs: 42px;
    }
}

/* smaller laptop */
@media (max-width: 1366px) {
    :root {
        --fs: 14px;
    }
	#fineprint .right {
    top: -0.1vh;
}
	ul#menu-main-nav {
    right: 8vw;
}

/* landscape tablet/very small laptop */
@media (max-width: 1024px) {
    :root {
        --fs: 12px;
    }
}

/* portrait tablet */
@media (max-width: 991px) {
    :root {
        --fw-adj: -5vw;
		--fs: 15px;
    }
	a.logo-link {
    width: 25vw;
}

nav a.phone {
    font-size: 2.5vw;
    left: 0;
    top: 8vh;
}

nav a.phone:before {
    width: 2.5vw;
    height: 2.5vw;
}

body>header {
    padding: 4vh 5vw 9vh;
}

ul#menu-main-nav>li>a {
    font-size: 2.25vw;
    padding: 1.5vh 1.5vw;
}

#menu-main-nav > li:nth-child(2) > a:after, #menu-main-nav > li:nth-child(3) > a:after, #menu-main-nav > li:nth-child(5) > a:after {
    width: 1.5vw;
    height: 1.5vw;
    margin-left: 0.65vw;
}

.sub-menu {
    padding: 1vh 0;
    min-width: 20vw;
}

.sub-menu>li>a {
    padding: 1vh 2vw;
    font-size: 2vw;
}

.slideshow-text {
    top: 81vh;
}
	.scrolled a.logo-link {
    width: 15vw;
}
	.scrolled nav a.phone {
    left: 17vw;
    top: 1.75vh;
    width: 4vw;
    white-space: nowrap;
    overflow: hidden;
}
	#intro .text.content {
    width: 90vw;
    padding-left: 5vw;
    margin-top: 7.5vh;
    margin-bottom: 5vh;
}

#intro .image {
    width: 70vw;
    height: auto;
    margin-left: 15vw;
    display: none;
}

section#intro {
    margin-bottom: 0;
}

#fourbox>a.box {
    float: none;
    width: 100vw;
    height: 33vh;
}

#fourbox {
    padding: 0;
    margin-bottom: 4vh;
}
	h3 {
    font-size: 2vw;
    margin-bottom: 1.5vh;
}
	.tab-label {
    font-size: 2.2vw;
    margin-bottom: 1vh;
    padding: 1.5vh 8vw 1.5vh 2.5vw;
}

#learnmore, #associations {
    padding: 0 5vw;
}

#associations li a img {
    max-width: 36vw;
    max-height: 8vh;
}

#associations {
    margin-bottom: 4vh;
}

footer {
    margin-top: 3vh;
}
	#endcta {
    padding: 5vh 30vw 12vh 5vw;
}

footer h4 {
    font-size: 3vw;
}

#endcta:after {
    width: 50vw;
    background-position: left top;
}

#fineprint {
    padding: 1.4vh 2.5vw;
    bottom: 2vh;
	font-size: 80%;
}

#fineprint .right {
    top: -0.5vh;
}

footer .right a.login:before {
    width: 2.5vw;
    height: 2.5vw;
}

#fineprint .left {
    position: relative;
    top: 0.1vh;
}

#fineprint a.login {
    position: relative;
    top: 0.4vh;
}
	.social li {
    margin-right: 2vw;
}

.social a:before {
    width: 3.2vw;
    height: 3.2vw;
}
	ul#menu-main-nav {
		display: none;
	}
	#mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    background: #fff;
    z-index: 2;
    bottom: 0;
    left: 0;
    visibility: hidden;
    pointer-events: none;
}
	#mobile-menu-icon svg {
    fill: #fff;
}

#mobile-menu-icon {
    position: fixed;
    top: 0;
    right: 0;
    padding: 4vh 4vw 0 0;
    display: block;
    width: 9vw;
    height: 11vw;
    z-index: 3;
}
	#glt-translate-trigger {
    right: 16vw;
	font-size: 2vw;
    padding: 0.25vh 1vw;
	}
	.inventory-container>a.listing:nth-child(2n-1), .inventory-container>a.listing:nth-child(2n+2) {
    margin-left: 0;
    margin-right: 0;
}

.inventory-container>a.listing {
    float: none;
    width: 100%;
    margin-bottom: 3vh;
}

.inventory-container .listing h2 {
    font-size: 2.8vw;
}
}

/* phone */
@media (max-width: 767px) {
    :root {
        --l: 0;
        --r: 0;
        --fw-adj: 0;
        --fs: 14px;
    }

    #mobile {
        display: block;
    margin: 0;
    padding: 0;
    }
	nav a.phone {
    display: none;
}

ul#menu-main-nav>li:last-child {
    display: none;
}

ul#menu-main-nav>li>a {
    font-size: 3.2vw;
}

body>header {
    padding: 3vh 4vw;
}

ul#menu-main-nav>li:nth-child(3)>a {
    padding-right: 0;
}

#menu-main-nav > li:nth-child(2) > a:after, #menu-main-nav > li:nth-child(3) > a:after, #menu-main-nav > li:nth-child(5) > a:after {
    width: 2vw;
    height: 2vw;
}

a.logo-link {
    width: 29vw;
}
	.sub-menu>li>a {
    padding: 2vh 4vw;
    font-size: 3vw;
}
	.scrolled a.logo-link {
    width: 25vw;
}
	.slideshow-text {
    top: 65vh;
}
	.slideshow-text h1 span:nth-child(2) {
    font-size: 7vw;
}
	.slideshow-text span {
    font-size: 3.2vw;
}
	.slideshow-text h1 span:last-child {
    font-size: 2.6vw;
}
	.slideshow {
    height: 80vh;
}
	h2 {
    font-size: 120%;
}
	#intro .text.content {
    width: 96vw;
    padding-left: 4vw;
    margin-bottom: 5vh;
}
	#fourbox>a.box {
    float: none;
    width: 100vw;
    height: 36vh;
    padding: 3vh 4vw;
    margin-right: 0 !important;
}
	#fourbox .inner.box {
    bottom: 2vh;
    width: 92vw;
}
#fourbox a.box:hover p {
    height: 20vh;
}
	#fourbox .inner.box>span:after {
    height: 2vw;
    padding-left: 4vw;
    margin-left: 2vw;
}
	#fourbox .inner.box>span {
    letter-spacing: 1px;
    font-size: 80%;
}
	h3 {
    font-size: 3vw;
}
	#learnmore, #associations {
    padding: 0 4vw;
}
	.tab-label {
    font-size: 3vw;
}
	a.btn {
    display: block !important;
    margin-left: 0 !important;
    text-align: center;
}
	a.cta.btn:after {
    height: 3vw;
    padding-left: 5vw;
    margin-left: 2vw;
}
	#endcta {
    padding: 4vh 5vw 20vh 5vw;
}
	footer h4 {
    font-size: 5vw;
}
	.social ul {
    margin: 1vh 0;
}
	.social li {
    margin-right: 3vw;
}
	.social a:before {
    width: 5vw;
    height: 5vw;
}
	#fineprint {
    bottom: 8vh;
    font-size: 100%;
	text-align: center;
	padding: 1.4vh 2.5vw 2.4vh;
}
	#fineprint .right {
    top: 1vh;
	float: none;
    text-align: center;
}
	#fineprint .right li:nth-child(1), #fineprint .right li:nth-child(4), #fineprint .right li:last-child {
    display: none;
}
	#mobile-menu-icon.active, #mobile-menu-icon.scrolled, #mobile-menu-icon.active.scrolled {
    padding-top: 2vh;
}
	#mobile-menu .sub-menu>li>a {
    font-size: 4.5vw;
}

#mobile-menu>ul>li>a {
    font-size: 7.5vw;
}

#mobile-menu .sub-menu>li.menu-item-has-children>a {
    font-size: 5.5vw;
}
	#pg-hero+main {
    padding: 0 5vw;
}
	#pg-hero+main>h1 {
    font-size: 6vw;
		margin-bottom: 3vh;
}
	#pg-hero+main>h1>span {
    font-size: 3.6vw;
}
	.wp-block-columns {
    display: block;
}
	figure.wp-block-pullquote blockquote {
    font-size: 7vw;
}
	figure.wp-block-pullquote blockquote:before {
    top: -2vh;
}
	figure.wp-block-pullquote blockquote:after {
    bottom: -3vh;
}
	a.secondary.btn, .wp-block-button__link, span.img-gal-toggle {
    display: block;
    text-align: center;
}
	.num-callout svg {
    float: none;
}

.num-callout {
    font-size: 5vw;
}
	.gallery.page .tab iframe {
    height: 30vh;
}
	#glt-translate-trigger {
    font-family: var(--body);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 3vw;
    padding: 1vh 3vw;
}
	#mobile-menu li.menu-item-has-children li.menu-item-has-children {border-bottom: none;}

#mobile-menu li.menu-item-has-children li.menu-item-has-children>ul.sub-menu {
    box-shadow: none;
}
	.btn svg {
    width: 3vw;
}
	.inventory-container .listing h2 {
    font-size: 4vw;
}
}