/*   
Theme Name: sunny day solutions v0.1b
Theme URI: <THEME_URI>
Description: A Theme for WordPress with Bootstrap for styling.
Author: Sunny Day Web Team
Author URI: https://sunnydaysolutions.com
Text Domain: sunny-day-solutions-v0-1b
Version: 0.0.1

*/

.br .shine {border: 50px solid #000;}

/* CONTAINERs */
body {font-family: 'Alegreya Sans'; background-color: #FFFDFC; font-size: 16px; min-height: 100vh; font-weight: 200;  overflow-wrap: break-word;
  word-wrap: break-word;} /* display: flex; */

div#maincol {padding-bottom: 90px; box-shadow: 10px 0 8px -8px #333333, -10px 0 8px -8px #333333;}
.colorset{background-color: #F8F5F5;}

#foot-menu a{line-height: 1.6;}
.quote-button {line-height: 1.2;}
.contain.f-32 a { line-height: 1.6; }

.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 80px 0;
}

footer {background-color:#0F4272; width: 100%; position: relative; margin-top: 250px;}

@media screen and (max-width: 767px) {
	.full-width {padding: 40px 0;}
	footer {margin-top:125px;}
}

/* TYPOGRAPHY & SPACING */
.font-extra-thin {font-weight: 200;}
.font-thin {font-weight: 300;}
.font-regular {font-weight: 400}
.font-exbold {font-weight: 900; letter-spacing: .03em;}
.font-bold3 {font-weight: 800; letter-spacing: .03em;}
.lh9 {line-height: .95em;}
.lh10  {line-height: 1em;}
.w-60 {width: 60%; margin: 0 auto;}
.w-80 {width: 80%; margin: 0 auto;}
.f-28 {font-size: 28px; line-height: 33px;}
.f-34 {font-size: 34px;}
.f-24 {font-size: 24px;}
.f-32 {font-size: 32px; line-height: 40px;}
.f-36 {font-size: 36px; line-height: 43px;}
.fp-200 {font-weight: 200;}
.space-2em {margin-bottom: 2em;}
.space-1em {margin-bottom: 1em;}
.text-left {display: inline-block; margin: 0 .25em;}
.text-center {text-align: center;}
.text-justify {text-align: justify;}
.ndash {font-size: 30px; font-weight: 400; color: #ccc; margin: 0 .25em;}
.indent-80 {width: 80%; margin: 0 auto;}
.clients-block { border: 1px solid #ccc;}
.space-80 {margin-bottom: 80px;}
.top-80 {margin-top: 80px;}
.top-60 {margin-top: 60px;}
.top-20 {margin-top: 20px;}
.pad-60 {padding-bottom: 60px;}
.pad-top-80 {padding: 80px 0 0;}

@media screen and (max-width: 767px) {
	.space-80 {margin-bottom: 40px;}
}


/* MAP STUFF */
.br:hover, .cg:hover, .gs:hover, .ho:hover, .rh:hover, .ob:hover, .oc:hover, .sa:hover, .sc:hover, .sm:hover, .vb:hover {box-shadow: 0 0 5px 5px #333333;}

/* MISC */
/* .contain a {font-size: 22px; line-height: 27px;} */
.aspect {position: relative; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */}
img.socmed, svg.socmed {margin: .05em .25em; width: .75em; }
svg.socmed:hover{fill: #ff0000;}

img.sf375 {width: 375px;}
#socialmedia {/*margin-bottom: 1em;*/}
.green-bar {height: 3px; background-color:#99CC66; width: 100%; margin-top: 200px;}

#logo {margin-left: 1.5em;}
.dt-img {width: 100%; margin: 3em 0; }
.tab-img {width: 40%; }
.m-img {width: 20%; transition: transform 0s ease-in-out; transform: translate(30px, -30px);}
.view-site {display: block; margin-top: 80px; font-size: 2.25em; transform: translateY(-150px);}
div.big-block > div:nth-of-type(even) {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 80px 0;
  background-color: #DADADA;
} 
.safe-content {background-color: #fff; border: .01em solid #000; padding: .25em;}
.trim-content {background-color: #cccccc; padding: .25em;}
.bleed-content {background-color: #707070; padding: .25em; color: #ffffff;}
.safe-content, .trim-content, .bleed-content {display: block; font-size: 18px;}

/* NAVIGATION */
nav.navbar {background-color: #99CCFF;}
@media only screen and (max-width: 500px) {
	nav.navbar {width: 375px;}
	#bs4navbar #menu-menu-1 {height: 90vh;}
	.contact-info {width: 100%;}
	/*.contact-info p {font-size: 24px; line-height: 34px;} */
	.footer-menu-container {text-align: center;}
}
#bs4navbar { width: 50%;/* text-align: center; height: 90vh; /*background-image: linear-gradient(180deg, white 0%, rgba(122, 173, 223, 1) 25%, rgba(15, 66, 114, 1) 100%);*/ }
li.menu-item a.nav-link {font-size:1.25rem; color:#FFF; font-weight:400;} /*color:#fbfbfb;  font-size: 1.75rem*/
li.menu-item a.nav-link.active{color:#99CC66;}
li.menu-item a.nav-link:visited {color:#DADADA;}
li.menu-item a.nav-link:hover {color:#99CC66;}

#bs4navbar ul, #foot-menu ul {list-style-type: none;}

/* COLOR */
.sdbluebg {background-color: #0F4272; color:#FBFBFB;}
.sdblue {color:#0F4272;}
.sdltbluebg {background-color: #99CCFF;}
.sdgreen {color:#99CC66;}
.sdgreenbg {background-color:#99CC66;}
.softwhite {color#fbfbfb;}
.sdgltgrey {background-color: #DADADA;}


/* TEXT INSET */
.ic {position: relative; text-align: center;}
.ic-bottom-left {position: absolute; bottom: .25em; left: 2em;}
.ic-bottom-left-tuck {position: absolute; bottom: 1em; left: 1em; font-size: 1rem; text-shadow: 0 0 5px #000000; color:#FBFBFB; line-height: 1.1em;}

/* CAROUSEL INDICATOR OVERWRITE *//
.carousel-indicators li {width: 15px !important; height: 15px !important;}

/* ANIMATION */
#transient-layer {opacity: 0;}
#special-header {transition: 1.5s;}
#logo {
	margin-top: 7px;
	height: 76px; /*61 */
	width: 137px;  /*110px*/
}
.logo-shrink {
	transition: transform .6s ease-in-out;
	-webkit-transform: scale(1) translate(0px, 0px);
    -ms-transform: scale(1) translate(0px, 0px); 
    transform: scale(1) translate(0px, 0px); 
} 
.logo-grow {
	transition: transform .8s ease-in-out;
	-webkit-transform: scale(2.5) translate(60px, 40px);
    -ms-transform: scale(2.5) translate(60px, 40px);
    transform: scale(2.5) translate(60px, 40px);
}

.off-menu{
	background-image: linear-gradient(rgba(0,0,0, 1), rgba(0,0,0,0));
	animation-name: off-menu;
	animation-delay: .2s;
	animation-duration: .5s;
	animation-fill-mode: both;
}

.on {
	background-color: rgba(0,0,0, 0); 
	animation-name: turn-on;
	animation-delay: .2s;
	animation-duration: .8s;
	animation-fill-mode: both;
	transform: scale3d(1,1,1);
}
.off {
	animation-name: turn-off;
	animation-delay: -.2s;
	animation-duration: .5s;
	animation-fill-mode: both;
	transform: scale3d(1,1,1);
}
#menu-layer.open-height {
	height: 500px;
	transition: height .6s ease-in-out;
}
#menu-layer.close-height {
	height: 140px;
	transition: height .6s ease-in-out;
}

#transient-layer.go {animation-name: go; animation-duration: .8s; animation-fill-mode: both;}

@keyframes off-menu {
	0% {}
	100% {} 
}
@keyframes turn-on {
	0% {background-color: rgba(15,66,114, .0);}
	50% {background-color: rgba(15,66,114, .5);}
	100% {background-color: rgba(15,66,114, 1); height: 100%;}
}
@keyframes turn-off {
	0% {background-color: rgba(15,66,114, 1); height: 100%;}
	50% {background-color: rgba(15,66,114, .5);}
	100% {background-color: rgba(0,0,0, .0); height: 144px;}
}
@keyframes go {
	0% {}
	100%{opacity: 1;}
}

/* Required */
.wp-caption {}
.wp-caption-text {}
.screen-reader-text {} 
.gallery-caption {}
.bypostauthor {}
.alignright {}
.alignleft {}
.aligncenter {}

#menu-layer{
  width: 100%;
  height: 140px;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  overflow-y: hidden; 
  overflow-x: hidden;
  transition: height: .6 ease-in-out;
}

.menu-position{
	position: relative;
	top: 25%; /* 25% from the top */
	width: 49%; /* 100% width */
	vertical-align: top;
	border-left: 1px solid #fff;
	display: inline-block;
}
.menu-position ul {
	padding-left: 15px;
}

/* The navigation links inside the overlay */
.contain a.nav-link, #social-media a {
  padding: 4px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

#social-media a{padding: 0 4px;}


.footer-social a {padding: 0 4px; line-height: 1.5em; font-size: 36px; display: block;}	

/* When you mouse over the navigation links, change their color */
.nav-item a:hover, #menu-layer a:focus {
  color: #f1f1f1;
}
.contain {max-width: 1110px; margin: 0 auto; position: relative;}
#splash {
	width: 100%;
	height: 776px;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-size: cover;
	background-position: 50% 50%;
	border-bottom: 7px solid #99CC66;
}
div#splash + div  { 
	border-top: 7px solid #0F4272;
}

#social-media {vertical-align: top; display: inline-block;}

.on-menu {opacity: 0;}
h1.title{font-size: 4.5em; text-align: center; margin-top: 12px; color:#0F4272; margin: 0em 0 .5em;}
.hamburger-nav{margin-top: 1.5em;}


.white-text {color: #fff;}
.quote-button {background-color: #99CC66; border-radius: 25px; height: 250px; text-align: center; color: #0F4272; padding: .5em; font-weight: 400;}
a .quote-button:hover, a .ps-button:hover{background-color: #99CCFF; color: #ffffff;}
.inset-border:hover, .ps-button-inset:hover {border: 3px solid #ffffff;}
.inset-border {border: 3px solid #0F4272; border-radius: 25px; margin: 0 auto; vertical-align: middle; height: 100%; padding: 1em; font-size: 60px;}

.ps-button {background-color: #99CC66; border-radius: 25px; height: 135px; text-align: center; color: #0F4272; padding: .25em; width: 60%; margin: 1em auto; font-weight: 400;}
.ps-button-inset {border: 3px solid #0F4272; border-radius: 25px; margin: 0 auto; vertical-align: middle; height: 100%; padding: .75em;}


.contact-info {color:#ffffff; display: inline-block; width: 65%; vertical-align: top;}
.footer-menu-container {display: inline-block; width: 32%; vertical-align: top;}
.footer-social, #foot-menu, .foot {display: inline-block;}
a.quote {position: relative; top: -125px; margin-bottom: -60px;}
.footer-social {vertical-align: text-top;} /* border-right: 2px solid #ffffff; */
#foot-menu .menu-item a.nav-link {font-size: 1.5em;}
#foot-menu ul {padding-left: 15px;}
.contact-info h4{font-size: 2.125em;}
.contact-info {padding-left: 25px;}
.foot-logo {width: 145px; display: block; margin: 0 auto .5em;}
.foot{ border-left: 2px solid #99CC66; vertical-align:text-top; }
.logo-text p {margin: 0; font-size: 40px; font-weight: 800; line-height: 48px;}
.vert-align {vertical-align: middle;}
.vert-align-top {vertical-align: top;}
a.logo-block {display: inline-block;}
.logo-text {border-left: 3px solid #99CC66; padding-left: 30px; height: 160px; /*margin-top: 158px; */}
div .contain:first-child {}
.contain a.breadcrumbs, a.breadcrumbs{text-align: center; color: #99CC66; font-size: 30px; padding: 0px; margin: 1.25em 0 0em; display: inline-block; font-weight: 400;}
.contain a.breadcrumbs:hover{color:#0F4272;}


.sales a{font-size: 24px; line-height: 29px; display: block;}
.sales-market {height: 150px; width: 150px; border-radius: 75px; display: inline-block; background-origin: content-box; background-position: center top; background-size: 150px; border: 2px solid #ffffff;}

.overflow-hide { overflow: clip;}


#guide-container {margin-bottom: 80px; text-align: center; background: linear-gradient(0deg, rgba(153, 204, 102, 0) 15%, rgba(153, 204, 102, 1) 15%, rgba(153, 204, 102, 1) 85%, rgba(153, 204, 102, 0) 85%);}
#guide-container img {width: 330px;}
#guide-container-facts, #couponbook-container-facts, #map-container-facts {text-align: left; display: inline-block; max-width: 70%; padding: 1em; vertical-align: middle;}
#map-container {margin-top: 4em; text-align: center; background: linear-gradient(0deg, rgba(15, 66, 114, 0) 10%, rgba(15, 66, 114, 1) 10%, rgba(15, 66, 114, 1) 90%, rgba(15, 66, 114, 0) 90%);}
#map-container img {transform: rotate(3deg);}
#map-container-facts {color: #ffffff;}
#couponbook-container {text-align: center; background: linear-gradient(0deg, rgba(218, 218, 218, 0) 10%, rgba(218, 218, 218, 1) 10%, rgba(218, 218, 218, 1) 90%, rgba(218, 218, 218, 0) 90%);}
#couponbook-container img {transform: rotate(3deg);}
#couponbook-container-facts {display: inline-block;}


#profile-container img{transform: rotate(-3deg) scale(.60); display: inline-block;}
#profile-info {display: inline-block; max-width: 70%; vertical-align: middle;}

a.test-star-1 .map2:hover {fill:#ff0000;}
a.guide-books {display: inline-block;}
#guide-book {transform: rotate(-3deg);}
.guide-books img:hover {box-shadow: 0 0 5px 5px #99CCFF;}
.staff-single-size {width: 335px; height: 335px; text-align: center; background-origin: content-box; background-position: 85% 20%; background-repeat: no-repeat; margin: 0 auto; background-size: 364px; position: relative; top: -90px;}
.contain a.inline {display: inline-block; font-size: 24px; color: #ffffff;}
.contain a.inline:hover {color: #99CCFF;}

.client-thumbnail {position: relative;}
.staff-pic{position: relative; transition: all 0.25s ease;}

.staff-pic div {
	transition: all 4s linear;
	width: 100%;
}

.staff-pic a {padding: 0;}
.staff-pic p {
	z-index: 10;
}
.staff-pic .gradient-to-top {
	transition: all 0.25s ease;	
}

.staff-pic a:hover div {
	/* transform: perspective(1px) scale(1.1) translateZ(0); */
} 
.staff-pic:hover .gradient-to-top {
	height: 30%;
	overflow: initial;
}
.staff-pic .gradient-to-top {
	height: 0%;
	overflow: hidden;
}

.gradient-to-top {
	position: absolute;	
	width: 100%;
	bottom: 0;
	left: 0;	
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%,rgba(0, 0, 0, 0) 100%);
}

.header-blue-box {margin-top: 142px; padding-bottom: 60px; margin-bottom: 130px; background-color: #0F4272; color:#FBFBFB; font-size: 36px; line-height: 43px; padding: 100px 0;}
h2.special {font-size: 71px; display: inline-block; vertical-align: top; width: 30%; margin-right: 30px; color: #0F4272; text-align: right;}
.page-template-page-about-us div.contain div p, .special + p  {display: inline-block; width: 65%; vertical-align: top;}
.single-staff-block {margin-top: 142px; padding-bottom: 60px; margin-bottom: 130px;}
.main {position: relative;}

.text-align-right {text-align: right;}
.menu {transform: translate(50%,40px);}
.map svg {width: 90%; display: block;}
#Layer_Z {margin-bottom: 3em;}


.in-block {display: inline-block;}
.block {display: block;}

	#privacy {font-size: 16px; color: #ffffff;}

	#breadcrumbs {margin: 1.25em auto 0em;}
	
#print-container img, #digital-container img {max-width: 60%;}


.laptop-container, .laptop-image, .tablet-container, .mobile-container {background-repeat: no-repeat; background-size: cover;}
.laptop-container {width: 50em; height: 27.6875em; display: inline-block; background-image: url('images/laptop-outline.png');}
.laptop-image {width: 36.125em; transform: translate(0px, 2.93em);}
.tablet-container {width: 15.625em; height: 22.9375em; transform: translate(-1.875em, 1.875em); display: inline-block; background-image: url('images/tablet-outline.png');}
.tablet-image{width:13.125em; transform: translate(0px, 2.3125em);}
.mobile-container{width: 9.5em; height: 19.875em; transform: translate(43.75em, -17.1875em); background-image: url('images/mobile-outline.png');}
.mobile-image {width: 8.0625em; transform: translate(0px, 2.625em);}

/* Mobile Stuff */


@media screen and (max-width: 425px) {
	h1.title {font-size: 45px;}
	.logo-grow {
		transition: transform .8s ease-in-out;
		-webkit-transform: scale(1.75) translate(60px, 20px);
	    -ms-transform: scale(1.75) translate(60px, 20px);
	    transform: scale(1.75) translate(60px, 20px);
	}
	.contact-info {display: block; width: 100%; margin-bottom:50px;}
	.footer-menu-container {width: 100%; text-align: left; /* margin-left: 40px; */margin-bottom: 30px;}
	a.quote {width: 90%; margin: 0 auto -10px; top: -60px; display: block;}
	.inset-border {font-size: 33px;}
	.quote-button {padding: 9px; height: initial;}
	#logo {margin-left: .5em;}
	.hamburger-nav {margin-right: .5em;}
	.green-bar {margin-top: 80px;}
	.contain.menu {width: 100%; max-width: 100%;}
	.contain.menu #social-media {display: block;}
	#social-media a{display: inline-block;}
	#logo-container {max-width: 100%;}
	.footer-social {margin-left: 20px;}
	li.menu-item a.nav-link {font-size: 24px;}
	.menu {transform: translate(10%,20px);}
	.menu-position {width: 90%; border: 0;}
	#bs4navbar {width: 90%;}
	#splash {height: 225px;}
	.f-32, .f-36, .f-28 {font-size: 18px; line-height: 27px;}
	/* .contain a {font-size: 18px; line-height: 21px;} */
	.footer-social a, #social-media a {font-size: 32px; margin-bottom: .45em;}
	.single-staff-block {margin-top: 142px; padding-bottom: 60px; margin-bottom: 130px;}
	.staff-single-size {	
		transition: transform 0s ease-in-out;
		-webkit-transform: scale(.8) translate(-10px, 0px);
	    -ms-transform: scale(.8) translate(-10px, 0px);
	    transform: scale(.8) translate(-20px, 0px);
	    margin-bottom: -90px;
	}
	.page-template-page-about-us div.contain div p, .special + p  {display: block; width: 100%; vertical-align: top;}
	h2.special {font-size: 30px; width: 100%; margin: 0 auto; text-align: center;}
	.laptop-container, .tablet-container, .mobile-container {display: block; transform: translate(0em, 0em); /*transform: scale(.3);  width: 100%;*/}
	.laptop-container {font-size: 6.5px;}
	#guide-book {transform: scale(.75) rotate(-3deg);}
	#guide-container {background: #99CC66;}
	#couponbook-container {background: #DADADA;}
	#guide-container-facts, #couponbook-container-facts, #map-container-facts {padding: 0em;}
	#profile-info {display: block; margin: 0 auto; width: 80%;}
	.ps-button {width: 95%;}
	.col-6.col-md-4.col-lg-3.mx-auto.staff-pic.in-block {max-width: 100%;}
	.view-site{transform: none;}

}

@media screen and (max-width: 326px) {
	.logo-grow {
		transition: transform .8s ease-in-out;
		-webkit-transform: scale(1.5) translate(50px, 30px);
	    -ms-transform: scale(1.5) translate(50px, 30px);
	    transform: scale(1.5) translate(50px, 30px);
	}
	.menu {transform: translate(5%,20px)}
	.breadcrumbs {line-height: 0; margin: 0;}
}

/* Tablet */
@media screen and (max-width: 768px) and (min-width: 426px) {
	.logo-grow {
		transition: transform .8s ease-in-out;
		-webkit-transform: scale(1.75) translate(60px, 20px);
	    -ms-transform: scale(1.75) translate(60px, 20px);
	    transform: scale(1.75) translate(60px, 20px);
	}
	.contact-info {display: inline-block; margin-bottom:50px; width: 50%; margin-right: -25px;}
	.contact-info p {font-size: 22px;}
	.footer-menu-container {text-align: left; /* margin-left: 40px; */margin-bottom: 30px; display: inline-block; width: 50%;}
	a.quote {width: 80%; margin: 0 auto -10px; top: -86px; display: block;}
	.quote-button {padding: 9px; height: initial;}

	.hamburger-nav {margin-right: .5em;}
	.green-bar {margin-top: 100px;}
	.contain.menu {width: initial; margin: 3em 0 0 15em;}

	#social-media a{display: block;}
	#logo-container {max-width: 100%;}
	.footer-social {margin-left: 40px;}
	li.menu-item a.nav-link {font-size: 24px;}
	.menu {transform: translate(10%,20px);}
	.menu-position { border: 0;}
	#bs4navbar {width: 90%;}
	#splash {height: 400px;}
	.f-32, .f-36, .f-28 {font-size: 28px; line-height: 34px;}
	/* .contain a {font-size: 22px; line-height: 27px;} */
	.footer-social a, #social-media a {font-size: 32px; margin-bottom: .45em;}
	.single-staff-block {margin-top: 142px; padding-bottom: 60px; margin-bottom: 130px;}
	.staff-single-size {	
		transition: transform 0s ease-in-out;
		-webkit-transform: scale(.8) translate(-10px, 0px);
	    -ms-transform: scale(.8) translate(-10px, 0px);
	    transform: scale(.8) translate(-20px, 0px);
	    margin-bottom: -90px;
	}
	.page-template-page-about-us div.contain div p, .special + p  {display: inline-block; width: 60%; vertical-align: top; font-size: 28px; line-height: 34px;}
	h2.special {font-size: 40px; width: 25%;}
	.laptop-container, .tablet-container, .mobile-container {display: block; transform: translate(0em, 0em); /*transform: scale(.3);  width: 100%;*/}
	.laptop-container {font-size: 12.5px;}
}
.no-ul:hover {text-decoration-line: none;}