@font-face {
	font-family: "caveat";
	src: url("Caveat-VariableFont_wght.ttf") format("truetype-variations");
	/*font-variation-settings: 'slnt' -8; /* Specify the slant here */
}
@font-face {
	font-family: "gluten";
	src: url("Gluten-VariableFont.ttf") format("truetype-variations");
	font-optical-sizing: auto;
  font-style: normal;
}
.caveat {
	font-family: "caveat", sans-serif;
}
.gluten {
	font-family: "gluten", sans-serif;
}
.slnt-13 {
	font-variation-settings: "slnt" -13; /* -13 to 13*/
}
.slnt13 {
	font-variation-settings: "slnt" 13; /* -13 to 13*/
}
.red {
	-webkit-text-stroke: 8px red;
}
.blue {
	-webkit-text-stroke: 8px dodgerblue;
}
.yellow {
	-webkit-text-stroke: 8px yellow;
}
.fuchsia {
	-webkit-text-stroke: 8px fuchsia;
}

body, html {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 400;
	line-height: 1.6;
	text-align: center;
	height: 100%; /* height and width needed for google map */
	width: 100%;
	/*display: flex;
	flex-direction: column;*/
}
html{
	overflow-x:hidden;
}

h1 {
	display: inline-block;
	font-weight: 800;
	font-size: 125px;
	line-height: 1em;
	font-variation-settings: "slnt" 6; /* -13 to 13*/
	letter-spacing: -9px;
	padding-top: 9%;
	padding-right:2%;
}
h2 {
	font-size: 1.5em;
	margin: 5px 0 40px 0;
	opacity: 0;  /* observer will fade in */
	color: #333333;
	font-weight: bold;
	line-height: 1.2em;
}
h3 {
	font-size: 2em;
	color: #555;
	font-weight: bold;
	/*margin-bottom: 25px;*/
	position: relative;
	padding: 30px 0;
	line-height: 1.2em;
	opacity: 0; /* observer will fade in */
}
h4 {
	font-size: 1.4em;
	font-weight: bold;
	text-align: center;
}

h5 {
	font-size: 1.5em;
	font-weight: bold;
	position: relative;
	padding: 0 0 20px 0;
}

h6 {
	font-size: 1.1em;
	font-weight: bold;
}
h3::before, h5::before {
	content: "";
	position: absolute;
	display: block;
	width: 120px;
	height: 1px;
	background: #ccc;
	bottom: 1px;
	left: calc(50% - 60px);
	box-sizing: border-box; /*maybe?*/
}
h3:after, h5:after {
	content: "";
	position: absolute;
	display: block;
	left: calc(50% - 20px);
	bottom: 0;
	width: 40px;
	height: 3px;
	background-color: #2d3dd2;
}
p {
	margin: 1.5em 0;
}
ul, ol {
	list-style-position:inside;
	margin: 0;
}
   
ul {
	list-style: square inside none;
	padding: 10px 0 0 0;
}
li {
	list-style-type: none;
	padding-left: 5%;
	padding-bottom: 8px;
	font-weight: bold;
}
li:before {    
	content: "✓";
	margin:0 10px 0 -28px;
	color: #17aa1c;
}
.signature {
	font-size: 1.7em;
	margin: 0.1em 0 1.7em 0;
}
.no_wrap {
	white-space: nowrap;
}
/**************************************** nav menu **************************************************/
.nav {
	color: #103c83;
	background-color: #9ddaff;
	overflow: auto;
	display: flex;
	justify-content: space-between;
	box-shadow: 0px 1px 11px 9px rgba(0, 0, 0, 0.10);
	box-shadow: 0px 1px 11px 9px rgba(162, 190, 210, 0.20);
	-webkit-transform: translateZ(0); /* box-shadow fix */
}
.nav_item_wrapper {
	padding: 0 4% 0 4%;
}
.nav_item {
	padding: 42px 24px;
	display: inline-block;
	text-decoration: none;
	/*color: inherit;*/
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s linear 0s;
}

.nav_item:hover {
	color:#fff;
	background: #3c5bc0;
}
/*****************************************************************************************************/
.hero {
	width: 100%;
	background: rgba(222,242,255,1);
	background-image: url('images/house_475.gif'), radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(222,242,255,1) 100%); /*house_475a.jpg*/
	background-repeat: no-repeat;
	background-position: 50% 4%; /*center*/
}
.hero_wrapper {
	margin: 0 auto;
	max-width: 1000px;
	text-align: center;
}

.hero_text_2 {
	color: #000;
	text-shadow: 0px 0px 18px rgba(0,0,0,0.5);
	font-weight: bold;
}
.button {
	margin: 30px auto 50px auto;
	padding: 15px 30px;
	border-radius: 6px;
	border: 1px solid #bbb;
	background-color: #3c5bc0;
	color: #fff;
	display: inline-block;
	font-weight: bold;
	transition: all 0.3s linear 0s;
	opacity: 0;  /* observer will fade in */
}
.button:hover {
	background-color: #ffff99;
	color: #000;
}
/*********************************************/
.overview_title_wrapper {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 2%;
}
.flex_with_4_elements {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 50px 10px;
	/*padding: 20px 20px 0 20px;*/
	padding: 20px 20px 50px 20px;
}
.flex_element {
	opacity: 0;
	
}
.element_occasions {
	width: 250px;
}
.element_review {
	min-width: 400px;
}
.flex_element_icon {
	height: 60px;
	width: 60px;
	opacity: 0.8;
	margin-bottom: 25px;
	/* center */
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.review_caption_wrapper {
	display: flex;
	align-items: center; /* Vertically centers the content */
	justify-content: center; /* Horizontally centers the content (optional) */
	padding-top: 20px;
}
.review_image {
	height: 60px;
	width: 60px;
}
.review_name {
	font-weight: bold;
	margin: 0 0 0 20px;
	text-align: left;
}
.review_source {
	font-weight: normal;
	margin: 0;
}
.image_and_caption {
	width:100%;
	margin: 0;
	padding: 30px 0;
}
.column_overview_icon {
	height: 60px;
	width: 60px;
	opacity: 0.8;
	margin: 50px 0 20px 0;
	/* center */
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.contact_icon {
	height: 60px;
	width: 60px;
	opacity: 0.8;
	/* center */
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.contact_info {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	gap: 25px;
	width: 410px;
	border-radius: 6px;
	border: 1px solid #bbb;
	background-color: #def2ff;
	padding: 30px;
	margin: 35px auto;
}
/* hide phone number */
span.display_no b {
	display: none;
}
.img_center {
	display: block;
	margin: 0 auto 30px auto;
	max-width: calc(100% - 40px);
	height: auto;
}
.img_border1 {
	border-style: solid;
	border-width: 3px;
	border-image: linear-gradient(45deg, rgb(51,153,255), rgb(250,224,66)) 1;
}
.img_border2 {
	border-style: solid;
	border-width: 3px;
	border-image: linear-gradient(45deg, rgb(102,102,255), rgb(255,51,51)) 1;
}
.img_border3 {
	border-style: solid;
	border-width: 3px;
	border-image: linear-gradient(45deg, rgb(255,153,51), rgb(51,255,255)) 1;
}
.background_blue {
	background-color: #def2ff;
}
.background_white {
	background-color: #fff;
}
.background_dark_blue {
	color: #103c83;
	background-color: #9ddaff;
}
.footer {
	padding: 20px 0;
	font-size: 0.8em;
}
/**************************************Animations*********************************************************************************/
.dropInDown1 {
	opacity: 0.7;
	-webkit-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	transform: translateY(-300px);
	animation: 1s ease-in-out 0.2s 1 dropInDown;
	animation-fill-mode: forwards;
}
.dropInDown2 {
	opacity: 0.5;
	-webkit-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	transform: translateY(-300px);
	animation: 1s ease-in 0.2s 1 dropInDown;
	animation-fill-mode: forwards;
}
.dropInDown3 {
	opacity: 0.3;
	-webkit-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	transform: translateY(-300px);
	animation: 1s ease-in-out 0.6s 1 dropInDown;
	animation-fill-mode: forwards;
}
.dropInDown4 {
	opacity: 0.1;
	-webkit-transform: translateY(-300px);
	-ms-transform: translateY(-300px);
	transform: translateY(-300px);
	animation: 1s ease-in 0.8s 1 dropInDown;
	animation-fill-mode: forwards;
}
@keyframes dropInDown {
	0% {
		opacity: 0.4;
		-webkit-transform: translateY(-300px);
		-ms-transform: translateY(-300px);
		transform: translateY(-300px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
.fadeInLeft1 {
	/* changed in @media screen below */
	opacity: 0;
	animation: 1s ease-out 0.2s 1 fadeInLeft;
	animation-fill-mode: forwards;
}
.fadeInLeft2 {
	/* changed in @media screen below */
	opacity: 0;
	animation: 1s ease-out 0.5s 1 fadeInLeft;
	animation-fill-mode: forwards;
}
.fadeInLeft3 {
	/* changed in @media screen below */
	opacity: 0;
	animation: 1s ease-out 0.8s 1 fadeInLeft;
	animation-fill-mode: forwards;
}
.fadeInLeft4 {
	/* changed in @media screen below */
	opacity: 0;
	animation: 1s ease-out 1.1s 1 fadeInLeft;
	animation-fill-mode: forwards;
}
.fadeInLeft5 {
	/* changed in @media screen below */
	opacity: 0;
	animation: 1s ease-out 1.2s 1 fadeInLeft;
	animation-fill-mode: forwards;
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
		-ms-transform: translateX(-20px);
		transform: translateX(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
}

.fadeInDown1 {
	opacity: 0;
	animation: 1s ease-out 0.2s 1 fadeInDown;
	animation-fill-mode: forwards;
}
.fadeInDown2 {
	opacity: 0;
	animation: 1s ease-out 0.5s 1 fadeInDown;
	animation-fill-mode: forwards;
}
.fadeInDown3 {
	opacity: 0;
	animation: 1s ease-out 0.8s 1 fadeInDown;
	animation-fill-mode: forwards;
}
.fadeInDown4 {
	opacity: 0;
	animation: 1s ease-out 1s 1 fadeInDown;
	animation-fill-mode: forwards;
}
@keyframes fadeInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-20px);
		-ms-transform: translateY(-20px);
		transform: translateY(-20px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
	}
}
/******************************************************************************************/
/******************************************************************************************/
@media screen and (max-width: 1250px) {
	.caption {
		width: 90%;
		text-align: center;
		margin: 0 auto;
	}
}

@media screen and (max-width: 1100px) {
	h1 {
		font-size: 11vw;
	}
}

@media screen and (max-width: 1050px) {
	h1 {
		padding-top: 10%;
	}
}

@media screen and (max-width: 900px) {
	h1 {
		padding-top: 12%;
		letter-spacing: -8px;
	}
	.flex_element {
		margin: 0 auto;
	}
	.fadeInLeft1 {
		animation: 1s ease-out 0.2s 1 fadeInLeft;
		animation-fill-mode: forwards;
	}
	.fadeInLeft2 {
		animation: 1s ease-out 0.2s 1 fadeInLeft;
		animation-fill-mode: forwards;
	}
	.fadeInLeft3 {
		animation: 1s ease-out 0.2s 1 fadeInLeft;
		animation-fill-mode: forwards;
	}
	.fadeInLeft4 {
		animation: 1s ease-out 0.2s 1 fadeInLeft;
		animation-fill-mode: forwards;
	}
}

@media screen and (max-width: 800px) {
	h1 {
		padding-top: 15%;
		letter-spacing: -7px;
	}
	.yellow {
		-webkit-text-stroke: 6px yellow;
	}
	.blue {
		-webkit-text-stroke: 6px dodgerblue;
	}
	.nav {
		flex-wrap: wrap;
		justify-content: center;
	}
	.nav_menu {
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		width: 100%;
		text-align: center;	
	}
}
@media screen and (max-width: 700px) {
	h1 {
		padding-top: 18%;
		letter-spacing: -6px;
	}
	h2 {
		font-size: 1.3em;
	}
	.red {
		-webkit-text-stroke: 5px red;
	}
	.yellow {
		-webkit-text-stroke: 5px yellow;
	}
	.blue {
		-webkit-text-stroke: 5px dodgerblue;
	}
}
@media screen and (max-width: 600px) {
	h1 {
		padding-top: 24%;
		letter-spacing: -5px;
	}
	.red {
		-webkit-text-stroke: 4px red;
	}
	.yellow {
		-webkit-text-stroke: 4px yellow;
	}
	.blue {
		-webkit-text-stroke: 4px dodgerblue;
	}
}
@media screen and (max-width: 500px) {
	h1 {
		padding-top: 26%;
	}
}
@media screen and (max-width: 400px) {
	.contact_info {
		width: auto;
		flex-direction: column;
		gap: 1px;
		border-radius: 0;
		margin: 0 auto;
	}
	h2 {
		font-size: 1.1em;
	}
}
/************************************************************** Speech Bubble *******************/

p.bubble {
	position: relative;
	width: 300px;
	text-align: center;
	line-height: 1.4em;
	margin: 40px auto;
	background-color: #def2ff;
	border: 8px solid #333;
	border-radius: 30px;
	padding: 20px;
}

p.bubble:before,
p.bubble:after {
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
}

p.bubble:before {
	left: 30px;
	bottom: -50px;
	border: 25px solid;
	border-color: #333 transparent transparent #333;
}

p.bubble:after {
	left: 38px;
	bottom: -30px;
	border: 15px solid;
	border-color: #def2ff transparent transparent #def2ff;
}