@charset "utf-8";

/* -- MARGIN VARIABLES ------------------------------------------------------ */
:root {
	--margin-block: 	120px;
	--margin-exterior: 	60px;
	--margin-interior: 	30px;
	--margin-element: 	15px;
}

/* -- RESET ----------------------------------------------------------------- */
*, *::before, *::after {
	box-sizing: 			border-box;
}

* {
	margin: 				0;
}

html, body {
	height: 				100%;
}

body {
  line-height: 				1.5;
  -webkit-font-smoothing: 	antialiased;
}

img, picture, video, canvas, svg {
  display: 					block;
  max-width: 				100%;
}

input, button, textarea, select {
  font: 					inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: 			break-word;
}

/* -- MAIN ELEMENTS --------------------------------------------------------- */
html {
	background-color: 		#FFF;
	color: 					#000;
	font: 					normal 16px/24px 'Unbounded', sans-serif;
}

h1, h2, h3 {
	font-weight: 			700;
}

h1 {
	line-height: 			4.6rem;
	font-size: 				6.0rem;
	text-transform: 		uppercase;
	text-align:				center;
}

/* -- HEADER/MENU ----------------------------------------------------------- */
header {
	width: 					100%;
	height: 				110px;
	background-color: 		#FFF;
}

header .header-content {
	display: 				flex;
	align-items: 			center;
	justify-content: 		space-between;
	margin: 				0 auto;
	max-width: 				1288px;
	height: 				110px;

}

#nav-mobile, .mobile-contact {
	display: 				none;
}

nav {
	flex: 					0 0 auto;
	text-align:				right;
}

nav a {
	display: 				inline-block;
	margin: 				0px var(--margin-element);
	border-bottom: 			2px solid #FFF;
	padding: 				5px;
	text-transform: 		uppercase;
	text-decoration: 		none;
	font-family: 			"Unbounded", sans-serif;
	font-weight: 			500;
	color: 					#000;
}

nav a:hover {
	border-bottom: 			2px solid #000;
}


main {
	background-color: 		#F2F2F2;
	padding: 				var(--margin-exterior) 0;
}


/* -- MAIN CONTENT AREAS ---------------------------------------------------- */
.content {
	margin: 				0 auto;
	max-width: 				1288px;
	min-height: 			520px;
	background: 			url('/images/site/background-top.jpg') top center no-repeat;
	color: 					#FFF;
}

.content h2 {
	font-size: 				1.4rem;
}

.content p {
	margin: 				var(--margin-element);
}


/* -- HOME ------------------------------------------------------------------ */
.home {
	text-align: 			center;
}

.home h1 {
	margin-bottom:			var(--margin-exterior);
}

.home img {
	margin: 				var(--margin-exterior) auto;
}

/* -- SERVICES -------------------------------------------------------------- */
.services {
	text-align: 			center;
	padding:				var(--margin-interior);
}

.services p span {
	margin: 				0 var(--margin-element);
	color: 					#d81624;
}

.services img {
	margin: 				var(--margin-interior) auto;
}

.solutions {
	margin: 				var(--margin-exterior) 0;
	color: 					#000;
}

.service-buttons button {
	display: 				inline-block;
	margin: 				var(--margin-element);
	cursor: 				pointer;
}

.service-entry {
	display: 				none;
}

.service-entry-active {
	display: 				block;
}

.consult {
	margin: 				0;
	background-color: 		#000;
	padding: 				var(--margin-interior);
	text-align:				center;
	color:	 				#FFF;
}

.consult p {
	margin: 				var(--margin-element);
}


/* -- ABOUT ----------------------------------------------------------------- */
.about {
	padding:				var(--margin-interior);
	font-size: 				1.4rem;
}

.about img {
	margin: 				var(--margin-element) auto var(--margin-interior) auto;
}

/* -- CONTACT --------------------------------------------------------------- */
.contact {
	display: 				flex;
	align-items: 			center;
	justify-content: 		space-between;
	min-height: 			520px;
	padding: 				var(--margin-exterior);
}

.contact-details {
	flex: 					0 0 40%;
	background-color:		#d81624;
	padding: 				var(--margin-interior);
}

.contact-details h2 {
	background-color:		#000;
	padding: 				var(--margin-element);
	text-transform: 		uppercase;
}

.contact-details a {
	color: 					#FFF;
	text-decoration: 		none;
}

.contact-form {
	flex: 					0 0 60%;
	padding-left: 			var(--margin-interior);
}

.contact-form label {
	display: 				block;
}

.contact-form input, .contact-form textarea {
	width: 					100%;
	border-radius: 			3px;
	border: 				0;
	background-color: 		#FFF;
	padding: 				5px;
	line-height: 			2.0rem;
	box-shadow: 			3px 3px 5px rgba(0,0,0,0.4);
}

.contact-form textarea {
	min-height: 			100px;
}

.contact-form input[type=submit] {
	width: 					auto;
	border: 				0;
	border-radius: 			10px;
	background-color: 		#d81624;
	padding: 				5px var(--margin-element);
	text-transform: 		uppercase;
	text-decoration: 		none;
	font-weight: 			500;
	color: 					#FFF;
}

.contact-form .form-row {
	display: 				flex;
	flex-gap: 				var(--margin-interior);
}

.contact-form .form-row p {
	flex: 					0 0 calc(50% - var(--margin-interior));
}

.contact-hours {
	margin: 				var(--margin-exterior) auto;
	max-width: 				200px;
	color: 					#000;
	text-align:				center;
}

.contact-hours p {
	margin: 				5px;
}


/* -- BUTTONS --------------------------------------------------------------- */
.button {
	display: 				inline-block;
	border: 				2px solid #d81624;
	border-radius: 			10px;
	background-color: 		#000;
	padding: 				5px var(--margin-element);
	text-transform: 		uppercase;
	text-decoration: 		none;
	font-weight: 			500;
	color: 					#FFF;
}

.button:hover {
	background-color: 		#d81624;
}

.button-alt {
	border: 				none;
}


/* -- FOOTER ---------------------------------------------------------------- */
footer {
	background: 			#000000 url('/images/site/background.jpg') top center repeat;
	padding: 				var(--margin-interior);
	color: 					#FFF;
	font-size: 				0.7rem;
}

.footer-content {
	display: 				flex;
	align-items: 			center;
	justify-content: 		space-between;
	margin: 				0 auto;
	max-width: 				1288px;
	min-height: 			100px;
	border-top: 			1px solid #FFF;
	padding-top: 			var(--margin-interior);
}

.copyright {

}

.social-media-icons {
	display: 				flex;
	align-items: 			center;
	justify-content: 		center;
	gap: 					var(--margin-element);
}

.social-media-icons a {
	flex: 					0 0 38px;
}

.footer-menu {

	text-transform: 		uppercase;
}

.footer-menu a {
	display: 				inline-block;
	margin: 				0 var(--margin-element);
	color: 					#FFF;
	text-decoration: 		none;
}


/* -- RESPONSIVE ------------------------------------------------------------ */
@media (max-width: 1180px) {



}

@media (max-width: 980px) {

	html {
		font: 				normal 14px/20px 'Unbounded', sans-serif;
	}

	/* -- SET VARIABLES ----------------------------------------------------- */
	:root {
		--margin-block: 	80px;
		--margin-exterior: 	40px;
		--margin-interior: 	20px;
		--margin-element: 	10px;
	}


}

@media (max-width: 514px) {

	/* -- SET VARIABLES ----------------------------------------------------- */
	:root {
		--margin-block: 		60px;
		--margin-exterior: 		30px;
		--margin-interior: 		15px;
		--margin-element: 		7px;
	}

	html {
		font: 				normal 14px/20px 'Unbounded', sans-serif;
	}

	header, header .header-content {
		height: 			50px;
		padding: 			0 var(--margin-element);
	}

	header div {
		z-index: 			20000;
	}

	header .logo {
		margin-top: 		5px;
	}

	header .logo img {
		width: 				auto;
		height: 			40px;
	}

	.invert {
		filter: 			invert(1);
	}

	#nav-mobile {
		position: 			relative;
		display: 			block;
		width: 				36px;
		height: 			24px;
		text-align: 		center;
		transform: 			rotate(0deg);
	    transition: 		.5s ease-in-out;
	    cursor: 			pointer;
	}

	#nav-mobile span {
		display: 			block;
		position: 			absolute;
		height: 			4px;
		width: 				100%;
		background: 		#000;
		border-radius: 		4px;
		opacity: 			1;
		left: 				0;
		transform: 			rotate(0deg);
		transition: 		.25s ease-in-out;
	}

	#nav-mobile span:nth-child(1) {
		top: 				4px;
		transform-origin: 	left center;
	}

	#nav-mobile span:nth-child(2) {
		top: 				14px;
		transform-origin: 	left center;
	}

	#nav-mobile span:nth-child(3) {
		top: 				24px;
		transform-origin: 	left center;
	}

	#nav-mobile.open span:nth-child(1) {
		transform: 			rotate(45deg);
		top: 				-2px;
		left: 				0px;
		background: 		#FFF;
	}

	#nav-mobile.open span:nth-child(2) {
		width: 				0%;
		opacity: 			0;
	}

	#nav-mobile.open span:nth-child(3) {
		transform: 			rotate(-45deg);
		top: 				24px;
		left: 				0px;
		background: 		#FFF;
	}

	#nav {
		position: 			fixed;
		top: 				0px;
		right: 				-100vw;
		z-index: 			10000;
		width: 				100vw;
		height: 			100vh;
		background-color: 	#000;
		padding-top: 		var(--margin-block);
		transition: 		right 0.4s cubic-bezier(0.75, 0, 0.25, 1);
	}

	#nav.open {
		right: 				0vw;
	}

	nav a {
		display: 			block;
		border: 			0;
		padding: 			var(--margin-block) var(--margin-interior) var(--margin-interior) 0;
		font-size: 			1.4rem;
		line-height: 		2.0rem;
		color: 				#FFF;
		text-align:			center;
	}


	h1 {
		line-height: 			2.6rem;
		font-size: 				3.0rem;
	}

	.content {
		min-height: 			auto;
		padding: 				0 var(--margin-interior) var(--margin-interior) var(--margin-interior);
	}

	/* -- ABOUT ------------------------------------------------------------- */
	.about {
		padding:				var(--margin-interior);
		font-size: 				0.rem;
	}

	/* -- CONTACT ----------------------------------------------------------- */
	.contact {
		display: 				block;
		min-height: 			auto;
		padding: 				var(--margin-interior);
	}

	.contact-form {
		margin-top: 			var(--margin-exterior);
		padding: 				0;
	}

	/* -- FOOTER ------------------------------------------------------------ */
	.footer-content {
		display: 				block;
		margin: 				0 auto;
		max-width: 				1288px;
		min-height: 			100px;
		border-top: 			1px solid #FFF;
		padding-top: 			var(--margin-interior);
		text-align:				center;
	}

	.footer-content p {
		margin: 				var(--margin-element);
	}

	.footer-content img {
		margin: 				0 auto;
	}

}