/* CSS Reset
 **********************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote::before, blockquote::after,
q::before, q::after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a img {
	outline: none;
	border: 0;
}

input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="submit"],
button, textarea {
	appearance: none;
	border-radius: 0;
}
/* Site Layout
 **********************************************************************/
html {
	font-size: 62.5%;
	text-size-adjust: none;
}

body {
	background-color: #f8f8f8;
	color: #222222;
	display: flex;
	flex-direction: column;
	font-family: "Roboto", sans-serif;
	font-size: 17px;
	font-size: 1.7em;
	line-height: 1.5;
	min-height: 100vh;
	min-width: 300px;
}

.site-width {
	margin: 0 auto;
	max-width: 960px;
	min-width: 280px;
	padding: 0 15px;
}

.site-content {
	flex: 1 1 auto;
}


.site-notfound {
	margin-bottom: 50px;
	padding: 50px 0;
	text-align: center;
}
.site-notfound h1 {
	font-size: 64px;
	font-size: 6.4rem;
	font-weight: bold;
}
.site-notfound h2 {
	font-size: 24px;
	font-size: 2.4rem;
}

/* Button
 **********************************************************************/
.button {
	padding: 15px;
	display: inline-flex;
}

.button__icon {
	flex: 0 0;
	margin-right: 10px;
}


/* Site Navigation
 **********************************************************************/
.site-navigation {
	background-color: #fcfcfc;
	height: 60px;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.5);
	z-index: 1;
	overflow: hidden;
}

.site-navigation__content {
	display: flex;
}

.site-navigation__content .navigation {
	flex: 1 1 auto;
}

.site-navigation__content .site-cta {
	margin-left: auto;
	flex: 0 0 auto;
}


.site-navigation .navigation {
	line-height: 60px;
}

.site-navigation .hamburger {
	width: 60px;
	height: 60px;
	display: none;
	cursor: pointer;
}

.hamburger__icon {
	width: 24px;
	height: 24px;
	margin: 18px;
}
.hamburger__icon::before,
.hamburger__icon::after,
.hamburger__icon span {
	display: block;
	content: "";
	height: 1px;
	width: 100%;
	background-color: #000000;
	margin: 7px 0;
	transition: transform 0.3s ease-in-out;
}

body.js-mobile-nav .hamburger__icon span {
	transform: scale(0);
}
body.js-mobile-nav .hamburger__icon::before {
	transform: translateY(8px) rotate(135deg);
}
body.js-mobile-nav .hamburger__icon::after {
	transform: translateY(-8px) rotate(-135deg);
}

.navigation {
	list-style: none;
	display: block;
	font-size: 16px;
	font-size: 1.6rem;
}

.navigation li {
	display: block;
	margin-right: 25px;
	float: left;
}

.navigation a {
	color: #333333;
	text-decoration: none;
}

@media (max-width: 620px) {
	.site-navigation .hamburger {
		display: block;
	}
	.site-navigation__content .navigation {
		display: block;
		background-color: #333333;
		position: fixed;
		top: 60px;
		left: -250px;
		bottom: 0px;
		width: 190px;
		padding: 25px;
		box-shadow: 8px 0px 10px -6px rgba(0, 0, 0, 0.21);
		transition: left 0.3s;
	}

	.site-navigation {
		position: fixed;
		left: 0;
		right: 0;
	}

	.site-navigation__content {
		margin: 0 -15px;
	}

	.site-navigation li {
		float: none;
		margin: 0;
		line-height: 1.375;
		margin-bottom: 25px;
	}

	.site-navigation a {
		color: #ffffff;
	}

	body.js-mobile-nav .site-navigation .navigation {
		left: 0px;
	}
}

/* Site CTA Call to Action
 **********************************************************************/
.site-cta {
	height: 30px;
	background-color: #ffdd00;
}

.site-cta .site-cta__icon {
	margin-top: 2px;
	margin-bottom: 2px;
}

.site-cta .site-cta__icon svg {
	fill: #A98B0D;
	height: 26px;
	width: 26px;
}

.site-cta__subheader {
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 12px;
	margin: -1px 0 4px 0;
}

.site-cta__header {
	font-weight: bold;
	line-height: 16px;
}

.site-cta a {
	color: inherit;
	text-decoration: none;
}


/* Site Banner
 **********************************************************************/
.site-banner {
	height: 255px;
	background-color: #31353c;
	background-image: url(../img/banner.jpg);
	background-size: cover;
	margin-bottom: 50px;

}

.site-banner__logo {
	display: flex;
	align-items: center;
	height: 100%;
}

.site-banner__logo h1 {
	display: none;
}

.site-banner__logo img {
	display: block;
	max-width: 300px;
	min-width: 220px;
	width: 75%;
	height: auto;
	margin: auto;
}

@media (max-width: 620px) {
	.site-banner {
		margin-top: 60px;
	}
}


/* Sections
 **********************************************************************/
.sections { }
.sections > .section {
	margin-bottom: 80px;
}
.sections > .section:last-child {
	margin-bottom: 50px;
}

.section__header {
	text-align: center;
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid #ccc;
}

.section__header h2 {
	font-size: 32px;
	font-size: 3.2rem;
	font-weight: bold;
}

.section__header .subheader {
	font-size: 14px;
}


.sections > .section.section--alt {
	background-color: #333e50;
	color: #ffffff;
	padding: 35px 0;
	margin-bottom: 0px;
}

/* Quote
 **********************************************************************/
.quote {
	display: flex;
	flex-wrap: wrap;
	gap: 35px;
}

.quote__info {
	flex: 1 1 200px;
}

.quote__form {
	flex: 0 0 0%;
	min-width: 280px;
	padding: 25px;
	background-color: #eee;
	box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.74);
	margin: 0 auto;
}

.quote__form .form__message {
	margin-top: -25px;
	margin-left: -25px;
	margin-right: -25px;
	padding: 25px;
	border-radius: 0px;
}

/* Form
 **********************************************************************/
.form {
	transition: opacity 0.5s;
	position: relative;
}
.form.loading {
	opacity: 50%;
}
.form.loading::after {
	display: block;
	content: "";

	width: 32px;
	height: 32px;
	border: 7px solid;
	border-color: transparent rgba(51,62,80,0.2) rgba(51,62,80,0.7) rgba(51,62,80,1);
	border-radius: 50%;

	position: absolute;
	top: 50%;
	left: 50%;

	margin-left: -23px;
	margin-top: -23px;
	animation: rotation 0.8s linear infinite;
}

@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.form__input {
	position: relative;
	margin-bottom: 25px;
	padding-top: 14px;
}

.form__input label {
	display: block;
	position: absolute;
	top: 14px;
	pointer-events: none;
	transition: all 0.3s;
	color: #666;
}

.form__input-bar {
	display: block;
	height: 1px;
	position: relative;
}
.form__input-bar::before {
	display: block;
	content: "";
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #999;
}

.form__input-bar::after {
	display: block;
	content: "";
	height: 1px;
	position: absolute;
	top: 0;
	left: 0;
	width: 0px;
	background-color: #333e50;
	transition: width 0.5s;
}

.form__button {
	text-align: right;
}

.form__button input,
.form__button button {
	padding: 10px 20px;
	border: 0;
	background-color: #e3c412;
	color: #333333;
	cursor: pointer;
}

.form__button input:hover,
.form__button button:hover {
	background-color: #e1be00;
	box-shadow: 1px 1px 1px rgba(0,0,0,0.3);

}

.form__input textarea,
.form__input input {
	display: block;
	color: #333;
	font-size: 14px;
	font-size: 1.4rem;
	background: transparent;
	outline: 0;
	border: 0;
	height: 30px;
	line-height: 30px;
	font-family: "Open Sans", sans-serif;
	width: 100%;
	box-sizing: border-box;
}


.form__input textarea {
	height: 180px;
	min-height: 180px;
	resize: vertical;
	line-height: 16px;
	max-height: 350px;
	margin-top: 8px;
}

.form__input input:focus ~ label,
.form__input input:valid ~ label,
.form__input textarea:focus ~ label,
.form__input textarea:valid ~ label {
	font-size: 12px;
	font-size: 1.2rem;
	top: 0px;
	color: #333e50;
}

.form__input input:focus ~ .form__input-bar::after,
.form__input input:valid ~ .form__input-bar::after,
.form__input textarea:focus ~ .form__input-bar::after,
.form__input textarea:valid ~ .form__input-bar::after {
	width: 100%;
}

.form__input--no {
	position: absolute;
	top: -5000px;
	left: -5000px;
}

.form__message {
	border-radius: 5px;
	margin-bottom: 10px;
	padding: 10px;
	color: #ffffff;
}

.form__message--success {
	background-color: #476080;
}

.form__message--error {
	background-color: #b03f3f;
}

/* Footer
 **********************************************************************/
.site-footer {
	color: #919aa8;
	background-color: #242D3C;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 35px 0;
}
.site-footer a {
	color: #919aa8;
	text-decoration: none;
}

.site-footer__groups {
	display: flex;
	gap: 25px;
}

.site-footer__group {
	flex: 1 1 auto;
	min-width: 220px;
}

.site-footer__group h5 {
	font-weight: bold;
	font-size: 16px;
	font-size: 1.6rem;
	color: #ffffff;
	margin-bottom: 5px;
}


.site-copyright {
	background-color: #e3c412;
	font-size: 12px;
	font-size: 1.2rem;
	height: 40px;
	line-height: 40px;
	color: #514404;
}

.site-copyright__info {
	display: flex;
}
.site-copyright a {
	color: #514404;
}

.site-copyright__info > div {
	flex: 1 1 auto;
	text-align: center;
}
.site-copyright__info > div:first-child {
	text-align: left;
}
.site-copyright__info > div:last-child {
	text-align: right;
}

@media (max-width: 700px) {
	.site-footer__groups {
		flex-wrap: wrap;
	}
	.site-footer__group {
		flex: 1 1 100%;
	}
}


ul.site-footer__links li {
	padding-bottom: 6px;
	margin-bottom: 6px;
	border-bottom: 1px solid #2f394a;
}

ul.site-footer__links li:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: none;
}

/* About
 **********************************************************************/

.about {
	display: flex;
	gap: 25px;
}

.about__info {
	flex: 1 0 320px;
}

.about__image {
	flex: 0 0 30%;
	border-radius: 15px;
	overflow: hidden;
	width: 30%;
	min-width: 250px;
	position: relative;
}

.about__image img {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
}

@media (max-width: 620px) {
	.about__image {
		display: none;
	}

}


/* Services
 **********************************************************************/
.services { }
.services .services__group {
	margin-bottom: 25px;
	padding-bottom: 25px;
	border-bottom: 1px solid #ddd;
}
.services .services__group:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.service {
	display: flex;
	gap: 25px;
}

.service .service__image {
	order: 0;
	flex: 0 0 auto;
	width: 40%;
	border-radius: 15px;
	overflow: hidden;
}

.service:nth-child(even) .service__image {
	order: 1;
}

.service .service__image img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.service .service__list {
	flex: 1 1 auto;
}

.service__list h4 {
	font-weight: bold;
}

.service__list > li {
	margin-bottom: 20px;
}

@media (max-width: 620px) {
	.service {
		flex-wrap: wrap;
	}

	.service .service__image {
		height: 150px;
		order: 0 !important;
		width: 100%;
	}

}

/* Service Info
 **********************************************************************/
.service-info {
	overflow: auto;
}
.service-info__image {
	height: 300px;
	margin-bottom: 20px;
}
.service-info__image img {
	display: block;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.service-info__fc {
	display: flex;
}

.service-info__summary-container {
	margin-left: 40px;
	flex: 1 0 250px;
}

.service-info__summary {
	padding: 15px;
	border-radius: 15px;
	background-color: #f0f0f0;
}

.service-details li:last-child {
	margin-bottom: 0px;
}

.service-details {
	font-size: 16px;
	font-size: 1.6rem;
}

.service-details li {
	margin-bottom: 30px;
	color: #444444;
}

.service-details h4 {
	font-weight: bold;
	color: #333333;
	margin-bottom: 2px;
}

.service-info__text {
	max-width: 700px;
	flex: 0 1 auto;
}

@media (max-width: 620px) {
	.service-info__image {
		height: 220px;
	}
}

@media (max-width: 700px) {
	.service-info__summary-container {
		display: none;
	}
}

/* Service List
 **********************************************************************/
.service-list {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}

.service-list__item {
	flex: 1 1 220px;
	min-width: 220px;
	border-radius: 15px;
	padding: 20px;
	background-color: #f0f0f0;
}

.service-list__item header h3 {
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
	font-size: 18px;
	font-size: 1.8rem;
}

.service-list__item p {
	margin-bottom: 15px;
	overflow: hidden;
}

.service-list__item .learn-more {
	text-align: center;
}

.service-list__item .learn-more a {
	text-decoration: none;
	color: #333333;
	font-weight: bold;
	font-size: 14px;
	font-size: 1.4rem;
}

/* Reviews
reviews
	review
		review__quote
		review__person
 **********************************************************************/
.reviews {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}

.review {
	flex: 1 1 220px;
	min-width: 220px;
	background-color: #ffdd00;
	border-radius: 10px;
	padding: 30px 20px 20px 20px;
	position: relative;
	margin-top: 20px;
	box-shadow: 2px 2px 4px #c4c4c4;
}

.review::before {
	content: open-quote;
	display: block;
	font-size: 100px;
	line-height: 100%;
	vertical-align: middle;
	position: absolute;
	top: -28px;
	font-family: arial;
	font-weight: bold;
}
.review::after {
	content: close-quote;
	visibility: hidden;
	width: 0px;
	height: 0px;
	display: block;
}

.review__quote {
	max-height: 128px;
	overflow: hidden;
}

.review__person {
	font-size: 14px;
	font-size: 1.4rem;
	margin-bottom: 5px;
	overflow: hidden;
	color: #6a5b00;
}

.review__readmore {
	margin-top: 5px;
}

.review__readmore a {
	text-decoration: none;
	color: #6a5b00;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 14px;
}


/* Gallery
 **********************************************************************/
.gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.gallery__image {
	flex: 1;
	height: 220px;
	min-width: 220px;
}

.gallery__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	vertical-align: middle;
	cursor: pointer;
}


/* Lightbox
 **********************************************************************/
body.js-lightbox {
	overflow: hidden;
}

.lightbox {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.85);
	z-index: 1000;
	padding: 5%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lightbox__content {
	border: 10px solid #fff;
	background-color: white;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
	box-sizing: border-box;
	min-height: 100px;
	min-width: 100px;
	max-width: 960px; /* .site-width */
	max-height: 100%;
	overflow: hidden;
	transition: width 1s, height 1s;
}

/* Tyopgraphy
 **********************************************************************/
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
	font-weight: bold;
	margin-bottom: 5px;
	letter-spacing: 0.5px;
}

.typography h1 {
	font-size: 24px;
	font-size: 2.4rem;
}

.typography h2 {
	font-size: 22px;
	font-size: 2.2rem;
}

.typography h3 {
	font-size: 20px;
	font-size: 2rem;
}

.typography h4 {
	font-size: 18px;
	font-size: 1.8rem;
}

.typography h5 {
	font-size: 16px;
	font-size: 1.6rem;
}

.typography h6 {
	font-size: 14px;
	font-size: 1.4rem;
}

.typography a {
	text-decoration: underline;
	color: #713629;
}

.typography em {
	font-style: italic;
}

.typography strong,
.typography b {
	font-weight: bold;
}

.typography strike,
.typography s {
	text-decoration: line-through;
}

.typography hr {
	border: 0;
	height: 0px;
	border-bottom: 1px dashed #cccccc;
	line-height: 0;
	overflow: hidden;
	margin: 30px 0;
}

.typography sup {
	vertical-align: super;
	font-size: small;
}

.typography sub {
	vertical-align: sub;
	font-size: small;
}

.typography img {
	width: 100%;
	height: auto;
	display: block;
}

.typography article,
.typography aside,
.typography blockquote,
.typography details,
.typography dialog,
.typography div,
.typography figure,
.typography footer,
.typography form,
.typography header,
.typography hgroup,
.typography hr,
.typography ol,
.typography p,
.typography pre,
.typography section,
.typography table,
.typography ul {
	margin-bottom: 26px;
}

.typography article:last-child,
.typography aside:last-child,
.typography blockquote:last-child,
.typography details:last-child,
.typography dialog:last-child,
.typography div:last-child,
.typography figure:last-child,
.typography footer:last-child,
.typography form:last-child,
.typography header:last-child,
.typography hgroup:last-child,
.typography hr:last-child,
.typography ol:last-child,
.typography p:last-child,
.typography pre:last-child,
.typography section:last-child,
.typography table:last-child,
.typography ul:last-child {
	margin-bottom: 0px;
}


.list--sidebyside li {
	float: left;
	width: 50%;
}
.basicLightbox {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .8);
    opacity: .01;
    transition: opacity .4s ease;
    z-index: 1000;
    will-change: opacity;
}
.basicLightbox--visible {
    opacity: 1;
}
.basicLightbox__placeholder {
    max-width: 100%;
    transform: scale(.9);
    transition: transform .4s ease;
    z-index: 1;
    will-change: transform;
}
.basicLightbox__placeholder>iframe:first-child:last-child,
.basicLightbox__placeholder>img:first-child:last-child,
.basicLightbox__placeholder>video:first-child:last-child {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    max-width: 95%;
    max-height: 95%}
.basicLightbox__placeholder>iframe:first-child:last-child,
.basicLightbox__placeholder>video:first-child:last-child {
    pointer-events: auto;
}
.basicLightbox__placeholder>img:first-child:last-child,
.basicLightbox__placeholder>video:first-child:last-child {
    width: auto;
    height: auto;
}
.basicLightbox--iframe .basicLightbox__placeholder,
.basicLightbox--img .basicLightbox__placeholder,
.basicLightbox--video .basicLightbox__placeholder {
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.basicLightbox--visible .basicLightbox__placeholder {
    transform: scale(1);
}