/* general */
body { margin: 0; padding: 0 }
h1, h2, h3, h4, h5 { font-weight: bold; }

/* section */
section { width: 100%; display: table; margin: 0; max-width: none; height: 100vh; }
.intro { height: 85vh; background: url('../img/bgintro.png') right center no-repeat; }
.content { display: table-cell; vertical-align: middle; }

/* height */
.h1048 { height: 1048px; }
.mh40 { max-height: 40px; }
.mh80 { max-height: 80px; }
.lh05 { line-height: 0.7; }
.lh14 { line-height: 14px; }
.lh28 { line-height: 28px; }
.lh32 { line-height: 32px; }

/* width */
.mw80 { max-width: 80px; }
.w325 { max-width: 325px; }
.w500 { width: 500px; }
.mw103 { max-width: 123px; }
.w500 { width: 500px; }
.w1048 { width: 1048px; }
.w70pauto { width: 70%; margin: 0 auto; }
.wauto { width: auto; margin: 0 auto; }

/* margin */
.m0auto { margin: 0 auto; }
.mt3 { margin-top: 3px; }
.mt60 { margin-top: 60px; }
.mtneg20 { margin-top: -20px; }
.mtneg40 { margin-top: -40px; }
.mtneg46 { margin-top: -46px; }
.mtneg60 { margin-top: -60px; }
.mb60 { margin-bottom: 60px; }
.ml40 { margin-left: 40px; }
.mr10 { margin-right: 10px; }
.mr20 { margin-right: 20px; }
.mr30 { margin-right: 30px; }

/* padding */
.ptb20 { padding-top: 20px; padding-bottom: 20px; }
.ptb40 { padding-top: 40px; padding-bottom: 40px; }
.plr20 { padding-left: 20px; padding-right: 20px; }
.plr40 { padding-left: 40px; padding-right: 40px; }
.plr80 { padding-left: 80px; padding-right: 80px; }
.pb60 { padding-bottom: 60px; }

/* border */
.brad4 { border-radius: 4px; }
.brad50 { border-radius: 50px; }
.bleftgreen { border-left: 3px solid #28a745 !important; }
.bbot3 { border-bottom: 3px solid #dee2e6 !important; }
.breddash { border: 1px dashed red !important; }
.bwhite { border: 1px solid #ffffff; }

/* background */
.bgwhite { background: #ffffff; }
.bgblack { background: #000000; }
.bggray { background: #949494; }
.bglightgray { background: #faf9f9; }
.bgdarkgray { background: #6d6c6c; }
.bgorange { background: #d79354; }
.bggreen { background: #567330; }
.bgteal { background: #5fa2bc; }
.bgphone { background: url('../img/phone.png') right center no-repeat; background-size: contain; }
.bgtemplate { background: url('../img/bgtemplate.png') top left no-repeat; }
.bgpopup { background: url('../img/bgpopup.jpg') center center; background-repeat: no-repeat; background-size: cover; }
.bgmobile { background: url('../img/bgmobile.png') top center no-repeat; }
.bgtransparent, .bgtransparent:focus { background-color: transparent; }

/* alignment */
.img-left { float: left; }
.fright { float: right; }
.iblock { display: inline-block; }

/* font */
.font12 { font-size: 12px; }
.font14 { font-size: 14px; }
.font18 { font-size: 18px; }
.font24 { font-size: 24px; }
.font32 { font-size: 32px; }
.font40 { font-size: 40px; }
.font48 { font-size: 48px; }
.font64 { font-size: 64px; }
.font100 { font-size: 100px; }

.fontnormal { font-weight: normal; }
.fontbold { font-weight: bold; }

.fontwhite, .fontwhite:hover { color: #ffffff; }
.fontblack { color: #000000; }
.fontorange { color: #b1662d; }
.fontviolet { color: #7669d5; }
.fontgray { color: #5e5e5e; }
.fontlightgreen { color: #a5f86a; }

.fontlato { font-family: 'Lato', sans-serif; }

.fontshadow { text-shadow: 2px 1px 2px rgba(119, 119, 119, 1); }
.fontshadowsmall { text-shadow: 2px 1px 2px rgba(150, 150, 150); }

/* buttons */
.btn-violet { color: #ffffff; background: #7669d5; }
.btn-violet:hover { color: #ffffff; background: #8173e5; }

/* bootstrap mod */
.dropdown-toggle:after { content: none }

/* extra */
.mobile { display: none; }
.cleaning_icon { display: inline-block; width: 20px; height: 15px; background: url('../img/cleaning_icon.png'); background-size: cover; }
.window_tinting_icon { display: inline-block; width: 14px; height: 14px; background: url('../img/window_tinting.png'); background-size: cover; }
.popup_icon { display: inline-block; width: 17px; height: 17px;  background: url('../img/popup_icon.png'); background-size: cover; }
.feedback_icon { display: inline-block; width: 17px; height: 17px;  background: url('../img/feedback_icon.png'); background-size: cover; }

.companylogo { width: 250px; height: 100px !important;  overflow: hidden; }
.companylogomob { width: 125px; height: 50px !important;  overflow: hidden; }
.heading { width: 548px; margin: -20px auto 0; text-align: center !important; }
.headingbuilder { width: 548px; margin: 0 auto 0; text-align: center !important; }
.headingmob { width: 548px; margin: 20px auto 0; text-align: center !important; }
.questions { width: 548px; height: 85px; margin: 0 auto; text-align: center !important; overflow: hidden !important; }
.estimate_name { width: 548px; margin: 0 auto; text-align: center !important; overflow: hidden !important; }
.thankyou { width: 700px; margin: 0 auto; overflow: hidden !important; }
.heading_1, .heading_2, .heading_3, .popup_text { text-align: center !important; }
.arrowindex { position: absolute; top: -15px; right: -10px; width: 30px; }

.showpopup_01, .showpopup_02 { display: none; }

#scroll::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; }
#scroll::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; }
#scroll::-webkit-scrollbar-thumb { background-color: #000000; border: 2px solid #555555; }

.stars { display: inline-block; width: 100px; height: 100px; background: url('../img/starwhite.png'); background-size: contain; }
.stars_sm { display: inline-block; width: 24px; height: 24px; background: url('../img/starwhite.png'); background-size: contain; }
.goldstar { background: url('../img/stargold.png'); background-size: contain; }
.allwhite { border: 1px solid #ffffff; }

.allwhite::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #ffffff; opacity: 1; /* Firefox */ }
.allwhite:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #ffffff; }
.allwhite::-ms-input-placeholder { /* Microsoft Edge */ color: #ffffff; }

.method { cursor: pointer; }
.method:hover, .method.chosen { background: #ffffff; color: #000000; }

.logooption { cursor: pointer; }

.toptext { margin-top: -30px; }

.btn-darkorange { background: #f37204; }
.btn-darkorange:hover { background: #c45d05; }

.sc__container { position: relative; width: 100%; }
.sc__container > img { position: relative; top: 0; left: 0; width: 100%; height: auto; }
.sc__container canvas { position: absolute; top: 0; left: 0; width: 100%; height: auto; }

.screen_slider { width: 100%; max-width: 100%; height: auto; text-align: center; overflow: hidden; }
.screen_slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* scroll-snap-points-x: repeat(300px); scroll-snap-type: mandatory; */ }
.screen_slides::-webkit-scrollbar { width: 10px; height: 10px; }
.screen_slides::-webkit-scrollbar-thumb { background: red; border-radius: 10px; }
.screen_slides::-webkit-scrollbar-track { background: transparent; }
.screen_slides > div { scroll-snap-align: start; flex-shrink: 0; width: 100%; height: auto; background: #eee; transform-origin: center center; transform: scale(1); transition: transform 0.5s; position: relative; display: flex; justify-content: center; align-items: center; font-size: 100px; }
.screen_slides > div:target { /*   transform: scale(0.8); */ }
.screen_slider > a { display: inline-flex; width: 1.5rem; height: 1.5rem; background: white; text-decoration: none; align-items: center; justify-content: center; border-radius: 50%; margin: 0 0 0.5rem 0; position: relative; }
.screen_slider > a:active { top: 1px; }
.screen_slider > a:focus { background: #ff0000; }

.spinwrap { background: url('../img/spinwheel_bg.png'); background-size: contain; }

@media only screen and (max-width: 600px) {
	.desktop { display: none; }
	.mobile { display: block; }

	section { height: auto; }
	.intro { height: auto; background: url('../img/bgintro.png') right bottom no-repeat; }
	.content { padding-top: 20px; padding-bottom: 20px; }

	h1 { font-size: 28px; }
	h2 { font-size: 24px; }
	h3 { font-size: 20px; }
	h4 { font-size: 18px; }

	/* width */
	.w325 { max-width: 265px; }
	.w70pauto { width: auto; margin: 0 auto; }

	/* margin */
	.mt60 { margin-top: 20px; }
	.mtneg40 { margin-top: 0; }
	.mtneg60 { margin-top: 0; }
	.ml40 { margin-left: 0; }

	/* padding */
	.mobptb20 { padding-top: 20px; padding-bottom: 20px; }
	.plr80 { padding-left: 40px; padding-right: 40px; }

	/* font */
	.font18 { font-size: 14px; }
	.font24 { font-size: 16px; }
	.font32 { font-size: 18px; }
	.font48 { font-size: 24px; }
	.font64 { font-size: 28px; }
	.mobfont48 { font-size: 40px; }
	.mobfont64 { font-size: 64px; }

	/* alignment */
	.mobtextcenter { text-align: center !important; }
	.mobtextleft { text-align: left !important; }

	/* border */
	.mobnoborder { border: 0 !important; }

	.companylogo { width: 125px; height: 50px !important;  overflow: hidden; }
}