/***** BEGIN 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, font, 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 {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address {  
    display: block;  
} 

/*-------- COLORS --------

*/

/***** END RESET *****/
::-moz-selection {
    background: #000; 
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #000;
    color: #fff;
    text-shadow: none;
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

/*-------- BODY STYLES --------*/
body {}

a:link, a:visited, a:active {text-decoration:none;}
a:hover {text-decoration:none; cursor: pointer !important;}
button:hover {cursor: pointer !important;}

hr{border:#000 1px solid;}
html {font-family: 'poppins', sans-serif;}

/*--- HEADER STYLES ---------------------*/
header {background: #FC8500; height: 135px;}
.header-wrap {width: 90%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; height: 100%;}
.header-left {padding-top: 45px;}
.header-right {display: flex; gap: 25px; align-content: center;}
.header-right div {border: 2px #000 solid; padding: 9px 2px 6px 2px; border-radius: 8px;}
.header-right a {background: #000; border-radius: 5px; color: #FC8500; padding: 6px 11px 3px 11px; font-size: 16px; font-family: 'poppins', sans-serif; font-weight: 800; line-height: 16px;}

/*---BODY--------------------------------*/
/*---DEFAULT---*/
.hero-bkgrd {background: url("/siteart/hero.jpg") no-repeat; background-position: center; background-size: cover;}
.hero-overlay {background: rgba(0,0,0,0.60);}
.hero-wrap {width: 90%; margin: 0 auto; padding: 120px 0 110px 0; text-align: center;}
.hero-wrap p {font-family: 'poppins', sans-serif; color: #fff; text-transform: uppercase; font-size: 16px; line-height: 28px; font-weight: 400; letter-spacing: 3px;}
.hero-wrap h1 {font-family: 'caveat-brush', sans-serif; color: #FC8500; font-size: 48px; line-height: 58px; font-weight: 400;}
.hero-wrap h1 span {color: #fff; text-transform: uppercase;}
.hero-wrap img {margin-bottom: 25px; margin-bottom: 25px; position: relative; left: 117px;}
.hero-wrap a {border: 2px #fff solid; padding: 7px 3px 4px 3px; border-radius: 8px;}
.hero-wrap button {background: #fff; border-radius: 5px; color: #000; padding: 8px 11px 5px 11px; font-size: 16px; font-family: 'poppins', sans-serif; font-weight: 800; line-height: 16px; text-transform: uppercase; border: none;}
.hero-wrap a:hover {border: 2px #FC8500 solid; transition: .5s;}
.hero-wrap a:hover button {background: #FC8500; transition: .5s;}

.welcome-to {display: flex; justify-content: space-between; gap: 50px; align-items: center; width: 90%; margin: 0 auto; padding: 50px 0;}
.welcome-to > div:first-child {width: 40%;}
.welcome-to > div:last-child {width: 60%;}
.welcome-to img {width: 100%;}
.welcome-to > div:last-child img {width: 118px; margin-bottom: 10px;}
.welcome-to h2 {font-family: 'caveat-brush', sans-serif; font-size: 36px; line-height: 46px; font-weight: 400; margin-bottom: 15px;}
.welcome-to p {font-family: 'poppins', sans-serif; font-size: 16px; line-height: 28px;}
.get-started {margin-top: 25px; background: #FC8500;  border-radius: 20px; padding: 30px 25px;}
.get-started h3 {font-family: 'poppins', sans-serif; font-size: 24px; line-height: 34px; font-weight: 800; letter-spacing: .5px;}
.get-started div {display: flex; gap: 25px; align-items: center; justify-content: space-between; margin-top: 10px;}
.get-started div a, .get-started button {width: 100%;}
.get-started button {background: #000; display: flex; justify-content: center; align-items: center; padding: 14px 0 12px 0; border: none; color: #fff; font-family: 'poppins', sans-serif; font-size: 16px; line-height: 16px; font-weight: 800; text-transform: uppercase;}
.get-started button:hover {letter-spacing: 1px; transition: .5s;}

.got-questions {background: url("/siteart/questions-bkgrd.jpg") no-repeat; background-position: center; background-size: cover;}
.questions-overlay {background: rgba(252,133,0,0.80);}
.questions-wrap {width: 90%; margin: 0 auto; padding: 50px 0; display: flex; justify-content: space-between; align-items: center;}
.questions-wrap h4, .questions-wrap h3 {font-family: 'caveat-brush', sans-serif; font-size: 36px; line-height: 46px; font-weight: 400;}
.questions-btn {display: flex; gap: 25px; align-items: center;}
.questions-btn a {border: 2px #000 solid; padding: 3px; border-radius: 8px;}
.questions-btn button {background: #000; border-radius: 5px; color: #FC8500; padding: 8px 11px 5px 11px; font-size: 16px; font-family: 'poppins', sans-serif; font-weight: 800; line-height: 16px; text-transform: uppercase; border: none;}
.questions-btn a:hover {border: 2px #fff solid; transition: .5s;}
.questions-btn a:hover button {background: #fff; transition: .5s; color: #000;}

/*---CONTACT---*/
.contact-us {width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; padding: 50px 0; gap: 100px;}
.contact-us > div:first-child {width: 100%;}
.contact-us > div:last-child {width: 600px;}
.contact-us h1 {font-family: 'caveat-brush', sans-serif; font-size: 48px; line-height: 58px; font-weight: 400; margin-bottom: 5px;}
.contact-us p {font-family: 'poppins', sans-serif; font-size: 16px; line-height: 28px;}
.contact-links a div {background: #F2F2F2; border-radius: 5px; margin-bottom: 10px; padding: 40px;}
.contact-links a:hover div {transition: .5s; background: #FC8500;}
.contact-links a:hover p {color: #000; transition: .5s;}
.contact-links a h2 {color: #000; font-family: 'poppins', sans-serif; font-size: 24px; line-height: 34px; margin-bottom: 10px;}
.contact-links a p {color: #636363; font-size: 15px; line-height: 26px; font-family: 'poppins', sans-serif;}
.contact-us button {background: #000; border-radius: 5px; color: #fff; padding: 12px 0px 9px 0px; font-size: 16px; font-family: 'poppins', sans-serif; font-weight: 800; line-height: 16px; text-transform: uppercase; border: none; width: 150px; margin-top: 15px;}
.contact-us button:hover {background: #FC8500; color: #000; transition: .5s; cursor: pointer !important;}

/*--------FORM STYLES--------------------*/
.contact-us form {margin-top: 15px;}
.contact-us form .form-flex > div {display: flex; gap: 10px; margin-bottom: 10px;}
.contact-us form input {width: 100%; border: 1px #bbb solid; border-radius: 3px; font-family: 'poppins', sans-serif; font-size: 15px; line-height: 15px; padding: 10px 0 8px 15px;}
.contact-us .form-textarea {display: flex;}
.contact-us textarea {width: 100%; border: 1px #bbb solid; border-radius: 3px; font-family: 'poppins', sans-serif; font-size: 15px; line-height: 15px; padding: 15px 0 0 15px; height: 100px;}
.contact-us .submitselect {background: #000; border-radius: 5px; color: #fff; padding: 12px 0px 9px 0px; font-size: 16px; font-family: 'poppins', sans-serif; font-weight: 800; line-height: 16px; text-transform: uppercase; border: none; margin-top: 15px; display: flex; justify-content: center; align-content: center; width: 125px;}
.contact-us .submitselect:hover, .contact-us .submit:hover {background: #FC8500; color: #000; transition: .5s; cursor: pointer !important;}
.contact-us .submit {background: #000; border-radius: 5px; color: #fff; padding: 12px 0px 9px 0px; font-size: 16px; font-family: 'poppins', sans-serif; font-weight: 800; line-height: 16px; text-transform: uppercase; border: none; width: 125px;}
.contact-us .CaptchaAnswerPanel input {width: auto;}
.contact-us .CaptchaWhatsThisPanel a {color: #000; text-decoration: underline;}
.contact-us .CaptchaWhatsThisPanel a:hover {letter-spacing: 1px; transition: .5s;}

/*-------- FOOTER STYLES ----------------*/
footer {background: #000;}
.footer-wrap {width: 90%; margin: 0 auto; text-align: center; padding-bottom: 50px; position: relative; top: -30px;}
footer ul {display: flex; justify-content: center; align-items: center; gap: 40px; margin-top: 25px;}
footer ul li a {font-family: 'poppins', sans-serif; font-size: 16px; line-height: 16px; color: #fff; font-weight: 800; text-transform: uppercase;}
footer hr {width: 400px; margin: 0 auto; border: 1px #FC8500 solid; margin-top: 20px; margin-bottom: 30px;}
.footer-btm {display: flex; justify-content: center; align-items: center; gap: 40px;}
.footer-btm a {color: #fff; font-family: 'poppins', sans-serif; font-size: 16px; line-height: 16px; font-weight: 800;}
footer a:hover {color: #FC8500; transition: .5s;}

/*----INVENTORY STYLES - KEEP AT BOTTOM OF CSS----*/







/*---------- RESPONSIVE STYLES ----------*/

@media only screen and (max-width: 1550px) {
	.contact-us {width: 90%;}
}

@media only screen and (max-width: 1250px) {
	.header-right {display: none;}
}

@media only screen and (max-width: 950px) {
	.header-wrap, .hero-wrap, .welcome-to, .questions-wrap, .footer-wrap, .contact-us {width: 95%;}
	.welcome-to {flex-wrap: wrap;}
	.welcome-to > div {width: 100% !important;}
	.questions-wrap {flex-wrap: wrap; gap: 20px;}
	.questions-wrap > div {width: 100%; text-align: center;}
	.questions-btn {justify-content: center;}
	.contact-us {flex-wrap: wrap; gap: 50px;}
	.contact-us > div:last-child {width: 100%;}
}

@media only screen and (max-width: 600px) {
	header {height: 125px;}
	.header-left img, footer img {width: 200px;}
}

@media only screen and (max-width: 500px) {
	.get-started div {flex-wrap: wrap; gap: 10px;}
}

@media only screen and (max-width: 450px) {
	.hero-wrap h1, .contact-us h1 {font-size: 45px; line-height: 55px;}
	.welcome-to h2, .questions-wrap h4, .questions-wrap h3 {font-size: 35px; line-height: 45px;}
	.get-started h3, .contact-links a h2 {font-size: 22px; line-height: 32px;}
	.hero-wrap img {left: 110px;}
	.contact-us form .form-flex > div {flex-wrap: wrap;}
	footer hr {width: 100%;}
	.footer-btm, footer ul {flex-wrap: wrap; gap: 25px;}
	.footer-btm a, footer ul li, footer li a {width: 100%;}
}

@media only screen and (max-width: 400px) {
	header {height: 115px;}
	.header-left img, footer img {width: 180px;}
	.hero-wrap h1, .contact-us h1 {font-size: 40px; line-height: 50px;}
	.welcome-to h2, .questions-wrap h4, .questions-wrap h3 {font-size: 30px; line-height: 40px;}
	.get-started h3, .contact-links a h2 {font-size: 20px; line-height: 30px;}
	.hero-wrap img {left: 99px; width: 112px;}
	.hero-wrap p, .welcome-to p, .contact-us p, footer ul li a {font-size: 15px; line-height: 26px;}
	.contact-links a p {font-size: 14px; line-height: 24px;}
	.contact-us form input, .contact-us textarea {font-size: 14px; line-height: 14px;}
	.questions-btn {flex-wrap: wrap; gap: 20px;}
	.contact-links a div {padding: 30px;}
}

@media only screen and (max-width: 350px) {
	.hero-wrap a {width: 100%;}
	.hero-wrap button {width: 90%;}
	.hero-wrap img {display: none;}
}