@font-face {
	font-family: "Din Alternate";
	src: url("din_alternate_regular.otf");
}

:root {  
  --darkest: #000000;
  --dark: #3F3434;
  --primary: #7E6868;
  --light: #D9B6B6;
  --lightest: #ffffff;
  --red: #FF6E6E;
  --green: #95FF92;
  --blue: #7F99FF;

  --nice-width: 560pt;
}


body {
	background-color: var(--darkest);
	font-family: Din Alternate;
	background-image: url("images/background.svg");
	background-repeat: repeat-y;
	background-position: top-center;
}

h2 {
	font-size: 18pt;
}

a {
	text-decoration: none;
	color: var(--lightest);
}

a:hover {
	text-decoration: none;
	color: var(--light);
}

.main-container {
	padding-top: 1em;
}

.body-container {
	text-align: center;
}

.company-logo {
	width: 100px;
}

.nav {
	display: inline-block;
	float: right;
	color: var(--lightest);
}

.nav span {
	margin-left: 1.5em;
}

.side-nav {
	display: none;
}

#open-nav {
	display: none;
}

.large-statement {
	display: inline-block;
	color: var(--lightest);
	text-align: center;
	margin: 1em 0 1em 0pt;
	max-width: var(--nice-width);
}

.service-box {
	background-color: var(--dark);
	color: var(--lightest);
	border-left: 4pt solid var(--lightest);
	text-align: left;
	padding: 1em;
	height: 100%;
}

.service-box.red {
	border-left-color: var(--red);
}

.service-box.green {
	border-left-color: var(--green);
}

.service-box.blue {
	border-left-color: var(--blue);
}

.service-box h2 {
	margin-bottom: 0.7em;
}

.service-box span {
	font-size: 12pt;
}

.services .col-md {
	margin-bottom: 1em;
}

.banner {
	display: inline-block;
	margin: 1em 1em 2em 1em;
	padding: .5em 3em .3em 3em;
	max-width: var(--nice-width);
	background-color: var(--light);
	transform: skew(-20deg);
}

.banner.white {
	background-color: var(--lightest);
	color: var(--darkest);
}

.banner h2 {
	display: block;
	transform: skew(20deg);
	font-weight: bold;
}

.testimonials {
	margin-bottom: 1em;
}

.testimonial {
	background-color: var(--dark);
	border-radius: 1em;
	color: var(--lightest);
	padding: 1.5em;
	margin-bottom: 1em;
	font-size: 10pt;
	text-align: left;
}

.testimonial .author {
	font-size: 12pt;
	float: right;
}

.testimonial .bottom {
	margin-top: 1em;
}

.star {
	background-image: url("images/Star.png");
	background-size: 18px 20px;
	width: 18px;
	height: 20px;
	float: left;
}

.star-end {
	float: clear;
}

.right-content {
	float: right;
	max-width: 500px;
	max-height: 100%;
	margin: 0 0 1em 1em;
}

.right-content img {
	max-width: 100%;
}

.video-container {
	display: inline-block;
	background-color: var(--primary);
	max-width: var(--nice-width);
}

.services-extended .col-md {
	margin-bottom: 1em;
}

#about-us {
	margin-bottom: 1em;
}

#about-us .img {
	float: left;
	padding: 0 1em 0 0;
	max-width: 200pt;
}

.clear-float {
	float: clear;
	clear: both;
	height: 0;
	padding: 0;
	margin: 0;
}

.contact-info {
	color: var(--lightest);
	font-size: 22pt;
	margin-bottom: 1em;
}

.contact-info .icon {
	height: 30px;
}

.footer {
	background-color: var(--dark);
	color: var(--lightest);
	text-align: left;
	padding: 1em;
}

@media (max-width: 1199px) {
	.right-content {
		max-width: 400px;
	}
}

@media (max-width: 991px) {
	.right-content {
		float: none;
		max-width: 100%;
		margin: 0 0 1em 0;
	}
}

@media (max-width: 767.98px) {
	h1 {
		font-size: 18pt;
	}

	h2 {
		font-size: 14pt;
	}

	h3 {
		font-size: 12pt;
	}

	.top-container {
		text-align: center;
	}

	.nav {
		display: none;
	}

	.side-nav {
		display: block;
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 2;
		top: 0;
		left: 0;
		background-color: #111;
		overflow-x: hidden;
		padding-top: 5em;
		transition: 0.3s;
	}

	.side-nav a {
		display: block;
		margin: 0 0 1em 1em;
		overflow: hidden;
	}

	.side-nav .closebtn {
		display: block;
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}

	#open-nav {
		display: block;
		position: absolute;
		top: 1em;
		left: 1em;
		background-image: url("images/nav_toggle.png");
		background-size: 16px 16px;
		width: 16px;
		height: 16px;
	}

	#nav-overlay {
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: var(--darkest);
		opacity: 0;
		z-index: 1;
		pointer-events: none;
		transition: 0.3s;
	}

	.company-logo {
		display: inline-block;
	}

	.container {
		padding-left: 0;
		padding-right: 0;
	}

	.container-fluid {
		padding-left: 1em;
		padding-right: 1em;
	}

	#about-us .img {
		max-width: 100pt;
	}

	.banner {
		margin: 0em 1em 1em 1em;
	}

	.service-box span {
		font-size: 10pt;
	}

	.footer {
		font-size: 8pt;
	}
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 

    .star {
		background-image: url("images/Star@2x.png");
	}

	#open-nav {
		background-image: url("images/nav_toggle@2x.png");
	}
}