@font-face {
	font-family: "Din-Next-W10-Light";
	src: url("../fonts/DIN-Next-W10-Light.ttf") format("truetype");
}

@font-face {
	font-family: "Lulo-Clean-W01-One-Bold";
	src: url("../fonts/Lulo-Clean-W01-One-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Stencil";
	src: url("../fonts/Stencil-W01-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Brandon-Grot-W01-Light";
	src: url("../fonts/Brandon-Grot-W01-Light.ttf") format("truetype");
}

body {
	padding: 0;
	margin: 0 auto;
	color: white;
	background-color: black;
	font-family: "Brandon-Grot-W01-Light";
}

.red {
	color: rgb(224,22,33);
}

a:link, a:visited {
	text-decoration: none;
	color: white;
}

#header{
	padding: inherit;
	margin: inherit;
	position: fixed;
	width: 100%;
	background: rgba(40,40,40,0.75);
	font-size: 18px;
	z-index: 10;
}

#footer {
	padding: inherit;
	margin: inherit;
	width: 100%;
	position: absolute;
	background: rgba(40,40,40,0.75);
	font-size: 18px;
	z-index: 10;
}

#header ul, #footer ul {
	padding: inherit;
	margin: 0 auto;
	display: table;
}

#header li, #footer li {
	padding: 16px 40px;
	display: inline-block;
	vertical-align: middle;
	font-family: "Lulo-Clean-W01-One-Bold";
}

#nav_active {
	color: rgb(224,22,33);
}

#footer_container {
	margin: 0 auto;
	max-width: 1400px;
}

#bug_footer {
	padding: 28px 20px 0 20px;
	float: left;
	height: 50px;
	width: 50px;
}

#copyright {
	padding: 30px 0;
	margin: 0 auto;
	float: left;
	display: table;
	text-align: left;
	font-size: 15px;
}

#copyright a {
	color: rgb(150,150,150);
}

#con_footer {
	padding: 20px 20px 20px 0;
	float: right;
	text-align: right;
	font-size: 15px;
}

#container {
	padding: 54px 0 0 0;
	margin: 0 auto;
	max-width: 1400px;
}

#welcome1 {
	padding: 20px 0;
	text-align: center;
}

#welcome1_left {
	margin: 0 auto;
	float: left;
	text-align: center;
	width: 368px;
}

#welcome_bug {
	margin: 0 auto;
	display: table;
	width: 368px;
}

#welcome1_right {
	padding: 0 20px;
	float: right;
	text-align: center;
	width: calc(100% - 408px);
}

#welcome_title {
	font-family: "Stencil";
	font-size: 45px;
}

#welcome_title #best {
	color: rgb(224,22,33);
}

video {
	padding: 2px;
	margin: 20px 0;
	float: right;
	width: 100%;
	border: 3px solid white;
	aspect-ratio: 16/9;
}

#warranty_link {
	margin: 0 auto;
	display: table;
}

#welcome_icons {
	display: table;
	margin: 0 auto;
}

#five_year_warranty {
	margin: 0;
	position: relative;
	display: table;
	width: 310px;
}

#five, #year {
	font-family: "Stencil";
}

svg {
	width: 130px;
	height: 130px;
	fill: rgb(224,22,33);
}

#five {
	position: absolute;
	top: 30px;
	left: 30px;
	font-size: 65px;
	vertical-align: bottom;
}

#year {
	position: absolute;
	top: 65px;
	left: 70px;
	font-size: 31px;
}

#more {
	position: absolute;
	top: 100px;
	left: 127px;
	color: grey;
	text-decoration: underline;
	font-family: "Din-Next-W10-Light";
}

#canada {
	margin: 30px auto 0 auto;
	display: table;
	text-align: center;
}

#quote {
	padding: 0 10px 20px 10px;
	margin: 0 auto;
	max-width: 1000px;
	display: block;
	text-align: center;
}

#quote span {
	padding: 9px 0 9px 18px;
	width: calc(100% - 24px);
	display: table;
	background-color: rgb(224,22,33);
	border: 3px solid white;
	border-radius: 40px;
}

.input {
	margin: 0 5px;
	padding: 0 10px;
	width: calc(33.3% - 38px);
	border-radius: 15px;
	height: 30px;
	border: none;
	background-color: white;
}

#welcome2 {
	margin: 25px 0 0 0;
	background-color: white;
}

#welcome2_container {
	padding: 20px 0;
	margin: 0 auto;
	max-width: 1400px;
	overflow: hidden;
}

.button {
	margin: 10px 0 0 0px;
	width: calc(100% - 25px);
	border-radius: 15px;
	height: 30px;
	color: white;
	background-color: rgb(224,22,33);
	border: none;
}

#space1, #space2, #space3, #space4 {
	margin: 0;
	padding: 30px 0 0 0;
	width: 25%;
	min-height: 320px;
	height: calc(600px - 25vw);
	float: left;
	display: block;
	text-align: center;
	line-height: 25px;
}

.space_icon svg {
	height: 100px;
}

#space1 svg, #space2 svg {
	fill: white;
}

#space3 svg {
	fill: black;
}

#space4 .space_icon {
	padding: 45px 0 0 0;
	display: block;
	height:38px;
	fill: black;
	font-family: "Din-Next-W10-Light";
	font-size: 80px;
	text-align: center;
	font-weight: bold;
}

#space3, #space4 {
	color: black;
}

.space_title {
	padding: 20px 0;
	display: inline-block;
	font-family: "Lulo-Clean-W01-One-Bold";
	font-size: 20px;
}

.space_body {
	display: block;
	padding: 0 20px;
	font-family: "Din-Next-W10-Light";
}

#space1 {
	background-color: black;
}

#space2 {
	background-color: rgb(45,45,45);
}

#space2 .space_title, #space3 .space_title {
	color: rgb(224,22,33);
}

#space3 {
	background-color: rgb(234,234,234);
}

#space4 {
	background-color: rgb(224,22,33);
}

#welcome3 {
	margin: 0 auto;
	display: table;
	max-width: 1400px;
	font-family: "Din-Next-W10-Light";
}

#welcome3 img {
	padding: 20px;
	float: left;
	width: calc(50% - 40px);
}

#welcome3_body {
	padding: 20px;
	text-align: justify;
}

#welcome4 {
	background-color: rgb(10,10,10);
	text-align: center;
}

#welcome4_container {
	padding: 40px 0;
	margin: 0 auto;
	max-width: 1400px;
}

#welcome4_title {
	color: rgb(88,88,88);
	font-size: 40px;
}

#welcome4 hr {
	max-width: 200px;
	border: 1px solid rgb(88,88,88);
}

#welcome4 .quote {
	display: block;
	padding: 40px 10% 10px 10%;
	color: white;
}

#welcome4 .subtext {
	color: rgb(88,88,88);
}

#warranty1 {
	padding: 20px 0;
}

#warranty1_container {
	margin: 0 auto;
	display: table;
	max-width: 1400px;
}

#warranty1_left {
	padding: 0 20px;
}

#warranty1_right {
	padding: 0 20px;
	float: right;
}

#warranty1_right img {
	width: 100%;
}

#contact1 {
	padding: 20px 0;
	width: 100%;
}

#contact1_container {
	padding: 0 20px;
	margin: 0 auto;
	width: calc(100% - 40px);
	max-width: 1400px;
	display: table;
}

#contact_title {
	font-size: 25px;
	color: rgb(224,22,33);
	font-weight: bold;
}

#contact1 hr {
	border: 1px solid rgb(224,22,33);
}

#contact1_left {
	padding: 20px 0 0 0;
	min-width: 250px;
	float: left;
	display: inline-block;
}

#contact1_right {
	padding: 20px 0;
	width: calc(100% - 250px);
	min-width: 280px;
	float: right;
	height: 200px;
	display: inline-block;
}

#contact1_right span {
	padding: 9px 0 9px 18px;
	width: calc(100% - 24px);
	display: table;
	background-color: rgb(224,22,33);
	border: 3px solid white;
	border-radius: 40px;
}

#contact1_right textarea {
	padding: 10px;
	margin: 10px 0 0 3px;
	width: calc(100% - 45px);
	border-radius: 15px;
	border: none;
	background: white;
	height: 100px;
	resize: none;
	color: black;
	font-family: "Helvetica";
}

#map {
	margin: 0 0 20px 0;
	background-color: rgb(220,218,214);
	width: 100%;
}

#map_container {
	padding: 0;
	margin: 0 auto;
	max-width: 1400px;
	width: 100%;
}

#contact_map {
	padding: 0;
	margin: 0 auto;
	max-width: 1400px;
	width: 100%;
	height: 400px;
	border: 0;
}

#gallery1 {
	padding: 0;
	margin: 0 auto;
	width: 100%;
}

#gallery1_main {
	padding: 3px;
	margin: 20px auto;
	display: table;
	position: relative;
}

#gallery1_main img {
	padding; 6px;
	margin: 0 0 -6px 0;
	width: 871px;
	border: 3px solid white;
	aspect-ratio: 1.34/1;
}

#gallery1_mini {
	padding; 0;
	margin: 0 auto 20px 0;
	display: table;
	background-color: black;
}

#gallery1_mini img {
	padding: 0;
	margin: 3px 3px -3px 3px;
	border: 2px solid white;
	width: calc(20% - 10px);
}

.hidden {
	padding: 0;
	margin; 0;
	display: none;
	visibility: none;
	border; none;
}

#subtext {
	padding: 0 20px;
	text-align: center;
}

#left_scroll, #right_scroll {
	padding: 60px 20px 65px 20px;
	font-size: 30px;
	top: calc(50% - 100px);
}

#left_scroll {
	background: rgba(40,40,40,0.75);
	position: absolute;
	text-align: center;
	left: 6px;
	z-index: 10;
	border-radius: 0 20px 20px 0;
}

#right_scroll {
	background: rgba(40,40,40,0.75);
	position: absolute;
	text-align: center;
	right: 6px;
	z-index: 10;
	border-radius: 20px 0 0 20px;
}

@media screen and (max-width: 940px) {
	#welcome1_left {
		float: none;
	}
	#welcome1_right {
		float: none;
		width: 90%;
		margin: 0 auto;
		padding: 0 8px 0 0;;
	}
	video {
		display: table;
		margin: 0 auto 20px auto;
		float: none;
	}
	#welcome_bug {
		margin: 10px 0 0 calc(20% - 120px);
		float: left;
		max-width: 368px;
		width: calc(100% - 368px);
	}
	#space1, #space2, #space3, #space4 {
		width: 50%;
		height: calc(500px - 25vw);
	}
}

#error_name, #error_email, #error_phone {
	background-color: pink;
}

@media screen and (max-width: 889px) {
	#gallery1_main img {
		width: calc(100% - 6px);
	}
}

@media screen and (max-width: 860px) {
	#header {
		font-size: calc(1.8vw + 2px);
	}
	#header li {
		padding: 16px calc(3.5vw - 5px);
	}
}

@media screen and (max-width: 740px) {
	#welcome_bug {
		display: none;
	}
	#warranty1_right {
		margin: 0 auto;
		float: none;
		max-width: 400px;
	}
	#warranty1_left {
		margin: 0 auto;
		width: calc(100% - 40px);
	}
}

@media screen and (max-width: 700px) {
	#contact1_left {
		width: 100%;
	}
	#contact1_right {
		margin: 0;
		width: 100%;
	}
	#contact1 #quote {
		padding: 0;
		margin: 0;
		min-width: 0;
		width: 100%;
	}
}

@media screen and (max-width: 510px) {
	#space1, #space2, #space3, #space4 {
		width: 100%;
		min-height: 0;
		height: auto;
		padding-bottom: 40px;
	}
	#welcome3 img {
		padding: 20px 0 0 0px;
		float: none;
		width: 100%;
	}
}

@media screen and (max-width: 490px) {
	#welcome_title {
		font-size: 8vw;
		display: inline-block;
		padding: 0 21px;
	}
	#footer {
		padding-bottom: 60px;
	}
	#copyright {
		padding: 0;
		width: 100%;
		position: absolute;
		text-align: center;
		bottom: 20px;
		float: none;
	}
}

@media screen and (max-width: 1308px) {
	#gallery1_mini img {
		width: calc(25% - 10px);
	}
}

@media screen and (max-width: 981px) {
	#gallery1_mini img {
		width: calc(33.33333% - 10px);
	}
}

@media screen and (max-width: 654px) {
	#gallery1_mini img {
		width: calc(50% - 10px);
	}
}

@media screen and (max-width: 327px) {
	#gallery1_main {
		display: none;
	}
	#gallery1_mini {
		padding; 0;
		margin; 0;
		width: 100%;
	}
	#gallery1_mini img {
		padding; 0;
		margin; 0;
		width: 100%;
		border: none;
	}
}