@import "./fonts.css";

html,
body {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 16px;
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow-x: hidden;
}

body > * {
	width: 100%;
}

.preload * {
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-ms-transition: none !important;
	-o-transition: none !important;
	transition: none !important;
}

.container {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

.button {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: .25em;
	color: #FFF;
	background-color: #C1022C;
	text-decoration: none;
	cursor: pointer;
}

header {
	background-color: #FFF;
}

#head {
	padding: 1em 2rem;
}

#head > .container {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#head > .container > .left {
	padding-right: 2rem;
}

#head > .container > .right {
	flex-grow: 0;
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	align-items: flex-end;
}

#logo {
	max-width: 220px;
	width: 100%;
}

#header-links {
	margin-top: .5em;
	font-size: .6875rem;
	line-height: 1.5rem;
}

#header-links a {
	display: inline-block;
	color: #616262 !important;
	text-decoration: none;
}

#header-links a:not(:last-child) {
	margin-right: 2em;
}

#header-links a:not(:last-child)::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: .5em;
	transform: translateX(1em);
	background-color: #C1022C;
	pointer-events: none;
	user-select: none;
}

#tagline {
	color: #616262;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.125rem;
}

#tagline .term:not(:last-child)::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 2px;
	height: 1em;
	margin: auto .5em;
	background-color: #C1022C;
}

#header-functions {
	display: flex;
}

#header-functions > :not(:last-child) {
	margin-right: 1rem;
}

#header-functions form {
	display: flex;
	align-items: center;
	border: 1px solid #CCCCCC;;
}

#header-functions form input[type="text"] {
	font-size: .75rem;
	padding: .25em;
	border: none;
	outline: none;
	border-radius: 0;
}

#header-functions form input[type="submit"] {
	width: 1.25rem;
	height: auto;
	border: none;
	background-color: #FFFFFF;
	background-image: url(/assets/images/icons/search-submit.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: .875rem;
}

input[type="radio"][name="mobile-nav"] {
	position: absolute;
	opacity: 0;
}

#mobile-header-functions,
#mobile-header-functions :checked {
	display: none;
}

#mobile-header-functions {
	align-items: center;
	height: 100%;
}

#mobile-header-functions .mobile-menu-toggle {
	display: block;
	width: 2rem;
	height: 2rem;
	padding: .5rem;
	margin-left: .25rem;
	cursor: pointer;

	background-color: rgba(255,228,181,.08);
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.08), rgba(255,255,255,.22) 96%, rgba(255,255,255,.2));
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.08), rgba(255,255,255,.22) 96%, rgba(255,255,255,.2));
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,.08), rgba(255,255,255,.22) 96%, rgba(255,255,255,.2));
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255, .08), rgba(255,255,255,.22) 96%, rgba(255,255,255,.2));
	background-image: linear-gradient(to top, rgba(255,255,255,.08), rgba(255,255,255,.22) 96%, rgba(255,255,255,.2));
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.3);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.3);
	box-shadow: 0 1px 1px rgba(0,0,0,.2), inset 0 1px 2px rgba(255,255,255,.3);
    border: solid 1px rgba(142,7,7,.9);
	border-radius: .125rem;

	user-select: none;
}

#mobile-header-functions .mobile-menu-toggle[for="mobile-nav[off]"] {
	background-color: rgba(0,0,0,.1);
    -webkit-box-shadow: 0 -1px rgba(0,0,0,.4), inset 0 -1px rgba(255,255,255,.4);
    -moz-box-shadow: 0 -1px rgba(0,0,0,.4), inset 0 -1px rgba(255,255,255,.4);
    box-shadow: 0 -1px rgba(0,0,0,.4), inset 0 -1px rgba(255,255,255,.4);
    background-image: -webkit-linear-gradient(bottom, rgba(0,0,0,.1), rgba(255,255,255,.1));
    background-image: -moz-linear-gradient(bottom, rgba(0,0,0,.1), rgba(255,255,255,.1));
    background-image: -o-linear-gradient(bottom, rgba(0,0,0,.1), rgba(255,255,255,.1));
    background-image: -ms-linear-gradient(bottom, rgba(0,0,0,.1), rgba(255,255,255,.1));
    background-image: linear-gradient(to top, rgba(0,0,0,.1), rgba(255,255,255,.1));
}

#mobile-header-functions .mobile-menu-toggle img {
	width: 100%;
}

#mobile-header-functions .mobile-menu-toggle img[src*="search.png"] {
	transform: scale(1.1);
}

#mobile-nav\[off\]:checked ~ #head #mobile-header-functions [for="mobile-nav\[off\]"],
#mobile-nav\[menu\]:checked ~ #head #mobile-header-functions [for="mobile-nav\[menu\]"],
#mobile-nav\[search\]:checked ~ #head #mobile-header-functions [for="mobile-nav\[search\]"] {
	display: none;
}

#mobile-header-functions [for="mobile-nav[menu]"] {
	order: 2;
}

#mobile-nav\[menu\]:checked ~ #head #mobile-header-functions [for="mobile-nav\[off\]"] {
	order: 1;
}

#mobile-nav\[menu\]:not(:checked) ~ #head #mobile-header-functions [for="mobile-nav\[off\]"] #mobile-nav-off-icon\[menu\] {
	display: none;
}

#mobile-header-functions [for="mobile-nav[search]"] {
	order: 3;
}

#mobile-nav\[search\]:checked ~ #head #mobile-header-functions [for="mobile-nav\[off\]"] {
	order: 4;
}

#mobile-nav\[search\]:not(:checked) ~ #head #mobile-header-functions [for="mobile-nav\[off\]"] #mobile-nav-off-icon\[search\] {
	display: none;
}

#contact-phone {
	color: #616262;
	font-size: .75rem;
}

#contact-phone a {
	color: #C1022C;
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}

#find-installer {
	font-size: .75rem;
}

#nav-bar {
	height: 2.25rem;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAANklEQVQYVzXKMQ0AAAgDwdYAIlCMFhSgBBEYgHRgvPwzM9fMMDPobrCq9uHuoA4VQScjYh86D4ZwHh2gMVq8AAAAAElFTkSuQmCC);
}

#nav-bar > .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	white-space: nowrap;
}

#nav-bar > .container > a {
	flex-grow: 1;
	flex-basis: 0;
	font-weight: bold;
	color: #505050;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-size: .875rem;
	position: relative;
}

#nav-bar > .container > a:hover {
	color: #C1022C;
}

#nav-bar > .container > a:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	display: inline-block;
    vertical-align: middle;
	width: 1px;
    height: .8em;
    background-color: #C1022C;
    user-select: none;
}

#mobile-menu {
	display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    z-index: 3;
}

#mobile-search {
	display: none;
    width: 100%;
	padding: .5em 2rem;
    position: absolute;
    z-index: 3;

	background-color: #f1efe8;
    -webkit-box-shadow: inset 0 -2px 4px rgba(0,0,0,.15), inset 0 0 4px rgba(164,164,164,.5);
    -moz-box-shadow: inset 0 -2px 4px rgba(0,0,0,.15), inset 0 0 4px rgba(164,164,164,.5);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,.15), inset 0 0 4px rgba(164,164,164,.5);
}

#mobile-nav\[menu\]:checked ~ #mobile-menu a {
	padding: .5em 2rem;
	background-color: #817577;
    -webkit-box-shadow: 1px 1px rgba(0,0,0,.55), inset 1px 1px rgba(255,255,255,.08);
    -moz-box-shadow: 1px 1px rgba(0,0,0,.55), inset 1px 1px rgba(255,255,255,.08);
    box-shadow: 1px 1px rgba(0,0,0,.55), inset 1px 1px rgba(255,255,255,.08);
    background-image: url(../img/pat04.png);
    background-image: url(../img/pat04.png), -webkit-linear-gradient(bottom, rgba(36,40,43,.72), rgba(83,89,94,.8));
    background-image: url(../img/pat04.png), -moz-linear-gradient(bottom, rgba(36,40,43,.72), rgba(83,89,94,.8));
    background-image: url(../img/pat04.png), -o-linear-gradient(bottom, rgba(36,40,43,.72), rgba(83,89,94,.8));
    background-image: url(../img/pat04.png), -ms-linear-gradient(bottom, rgba(36,40,43,.72), rgba(83,89,94,.8));
    background-image: url(../img/pat04.png), linear-gradient(to top, rgba(36,40,43,.72), rgba(83,89,94,.8));

	color: #FFFFFF;
	font-size: .875rem;
	text-transform: uppercase;
	text-decoration: none;
}

#mobile-search form {
	display: flex;
	width: 100%;
}

#mobile-search form input[type="text"] {
	flex-grow: 1;
	font-size: .75rem;
	padding: .5em;
    color: #BBBBBB;
	border: none;
	outline: none;
	-webkit-box-shadow: 0 -1px rgba(0,0,0,.08), inset 0 -1px #fff;
    -moz-box-shadow: 0 -1px rgba(0,0,0,.08), inset 0 -1px #fff;
    box-shadow: 0 -1px rgba(0,0,0,.08), inset 0 -1px #fff;
}

#mobile-search form input[type="submit"] {
	width: 2rem;
	height: 100%;
	min-height: 2rem;
	background-color: #FFFFFF;
	background-image: url(/assets/images/icons/mobile-search-submit.png);
	background-size: 1.25rem;
	background-position: center;
	background-repeat: no-repeat;
	border: none;
	-webkit-box-shadow: 0 -1px rgba(0,0,0,.08), inset 0 -1px #fff;
    -moz-box-shadow: 0 -1px rgba(0,0,0,.08), inset 0 -1px #fff;
    box-shadow: 0 -1px rgba(0,0,0,.08), inset 0 -1px #fff;
}

@media screen and (max-width: 960px) {
	#nav-bar > .container > a {
		font-size: .75rem;
	}
}

@media screen and (max-width: 720px) {
	#head {
		background-color: #C1022C;
		padding: .5em 2rem;
	}

	#head > .container {
		flex-wrap: nowrap;
	}

	#head > .container > .left {
		width: 100%;
	}

	#head #header-links,
	#head #tagline,
	#head #header-functions {
		display: none;
	}

	#head #mobile-header-functions {
		display: flex;
	}

	#logo {
		max-width: 160px;
		border: 2px solid #FFFFFF;
	}

	#tagline {
		display: none;
	}

	#nav-bar {
		display: none;
	}

	#mobile-nav\[menu\]:checked ~ #mobile-menu,
	#mobile-nav\[search\]:checked ~ #mobile-search  {
		display: flex;
	}
}

section {
	display: block;
	width: 100%;
}

footer {
	padding: 1em 2rem;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAANUlEQVQYVzXKsQkAAAgDwaRyCPefytoVBAtRUlge/6yqNTN0NzITnJl9uDuoQ0XQyYjYh84DCmEhTbcdBAsAAAAASUVORK5CYII=);
}

#legal-info {
	font-size: .6875rem;
	color: #858585;
}

#legal-info p {
	margin: .5em 0;
}

#legal-info a {
	color: inherit;
	text-decoration: none;
}

#legal-info .term:not(:last-child) {
	margin-right: 2em;
}

#legal-info .term:not(:last-child)::after {
	content: '';
	display: inline-block;
	vertical-align: middle;
	transform: translateX(1em);
	width: 1px;
	height: .75em;
	background-color: #858585;
}

#legal-info #web-agency-logo {
	display: inline-block;
	height: 1.8em;
	line-height: 1em;
	vertical-align: middle;
}

input[type="radio"].popup-toggle {
	position: absolute;
	opacity: 0;
}

.popup {
	z-index: 2;

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 0;
	margin: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	opacity: 0;
	pointer-events: none;
	transition: .5s opacity linear;
}

input[type="radio"][value="on"]:checked + .popup {
	opacity: 1;
	pointer-events: initial;
}

.popup .backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	background-color: rgba(0, 0, 0, .5);
}

.popup .content {
	background-color: #FFF;
	padding: 1rem;
	margin: 1rem;
	max-width: calc(100vw - 1rem);
	max-height: calc(100vh - 1rem);
	position: relative;
}

.popup .content .close-button {
	position: absolute;
	display: block;
	top: -.75em;
	right: -.75em;
	background-color: #000;
	border: .125em solid #FFF;
	border-radius: 50%;
	box-shadow: 1px 1px 3px 3px;
	width: 2em;
	height: 2em;
	font-size: .75rem;
	cursor: pointer;
}

.popup .content .close-button::before,
.popup .content .close-button::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	height: .125em;
	width: 1em;
	background-color: #FFF;
	border-radius: .06875em;
	transform-origin: center;
}

.popup .content .close-button::before {
	transform: rotate(45deg);
}

.popup .content .close-button::after {
	transform: rotate(-45deg);
}

.resize-iframe {
	position: relative;
	width: 100vw;
	height: 0;
	box-sizing: content-box;
}

.popup .content > .resize-iframe {
	width: calc(100vw - 4rem);
}

.resize-iframe > * {
	box-sizing: border-box;
}

.resize-iframe > iframe {
	position: absolute;
	width: 100%;
	height: 100%;
}

.showcase {
	display: flex;
    flex-direction: column;
}

.showcase > .showcase-frame {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
}

.showcase > .showcase-frame > .slides {
	display: flex;
	flex-direction: row;
    align-items: center;
    align-content: flex-start;
	flex-grow: 1;
	height: 100%;
    max-width: calc(100vw - 6rem);
	overflow: hidden;
	transition: max-height .5s cubic-bezier(0, 1, 0, 1);
}

.showcase > .showcase-frame > .slides > .slide {
	display: flex;
	width: 100%;
	min-width: 100%;
}

.showcase > .showcase-frame > .slides > .slide > .content {
	width: 100%;
	font-size: .875em;
	color: #5D5D5D;
}

.showcase > .showcase-frame > .slides > .slide > .content > * {
	margin: 1em 0;
}

.showcase > .showcase-frame > .slides > .slide > .content h1 {
	text-transform: uppercase;
}

.showcase > .showcase-frame > .slides > .slide > .content .small {
	font-size: .7em;
}

.showcase > .showcase-frame > .slides > .slide > .content .bold {
	font-weight: bold;
}

.showcase > .showcase-frame > .slides > .slide[data-slide="last"] {
	margin-left: -100%;
}

.showcase > .showcase-frame > a {
	align-self: stretch;
}

.showcase > .showcase-frame > a.previous-slide,
.showcase > .showcase-frame > a.next-slide {
	padding: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.showcase > .showcase-frame > a > .text > .arrow {
	display: flex;
}

.showcase > .showcase-frame > a.previous-slide .arrow svg,
.showcase > .showcase-frame > a.next-slide .arrow svg {
	width: 1em;
	fill: #C1022C;
}

.showcase > .buttons {
	display: flex;
	justify-content: center;
	margin-top: 1em;
}

.showcase > .buttons > .button {
	background-color: transparent;
	color: #C1022C;
}

.showcase > .buttons > .button.active {
	border: 2px solid #C1022C;
}

.showcase > .buttons > .button:not(:last-child) {
	margin-right: 1em;
}

@media screen and (max-width: 960px) {
	.showcase > .showcase-frame > .slides > .slide {
		flex-direction: column-reverse;
		align-items: center;
	}

	.showcase > .showcase-frame > .slides > .slide > .image > img {
		max-height: 12em;
		object-fit: contain;
	}

	.showcase > .buttons {
		display: none;
	}
}