:root {
	--primary: #9c3;
	--body-text: #443f3f;
	--teal: #3cc;
}



/*UTILITY CLASSES*/
.bg-black {background: #000;}
.bg-primary {background: var(--primary);}
.bg-teal {background: var(--teal);}
.text-center {text-align: center;}
.text-white {color: #fff;}
.text-primary {color: var(--primary)}
.box-shadow {box-shadow: .001em 0px  .2em #000;}
hr {border: .1em solid var(--primary);}
.p2 {padding: 1.2em;}  /*PADDING 20PX TOP BOTTOM*/


/*RESETS*/
html {height: 100%; }

body, 
p, 
h1, 
h2, 
h3,
h4{
	margin: 0; padding: 0;
	}

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

img, picture, video, svg {
	display: block;
	width: 100%;
	margin: 0 auto;
}

p {
/*	font-size: 1.5rem;*/
	line-height: 1.5em;
	margin-bottom: .4em;
}

button {
	font: inherit;
	border: .2em solid var(--primary);
}

/*BUTTONS*/
.button-green,
.button-white {
	width: 80%;
	border-radius: .5em;
	border: .2em solid var(--primary);
	margin: 2em auto;
}

.button-green {
	background: var(--primary);
}

.button-white {
	background: #fff;
}

.button-green a,
.button-white a {
	display: block;
	padding: 1em 2em;
	text-align: center;
	text-decoration: none;
	transition: .3s ease-in-out;
	border-radius: .4em;
}

.button-green a {
	color: #fff;

}

.button-white a {
	color: var(--body-text);
}

.button-green a:hover {
	background: #fff;
	color: var(--primary);
}

.button-white a:hover {
	background: var(--primary);
	color: #fff;
}




/*GENERAL*/
body {
	min-height: 100vh;
	font-family: 'Raleway', sans-serif;
	color: var(--body-text);
}

section {
	padding: 1em 0;
}

/*PAGE CONTAINER TO OVERRIDE FIXED HEADER ON DESKTOP*/
.wrapper {
	width: 100%;
	position: absolute;
	margin-top: 0;
}

/*CONTAINS ELEMENTS WITHIN SECTIONS*/
.container {
	max-width: 75em;
	margin: 0 auto;
}

.top-row {
	z-index: 999;
	width: 100%;
}

header {
	display: flex;
	flex-direction: column;
	max-width: 75em;
	margin: 0 auto;
}

.logo {
	margin: 0 auto;
	padding: 1.2em 3em;
}

/*NAVIGATION*/
nav {
	display: none;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

nav li {
	border-bottom: .1em solid #eee;
	display: block;
}

nav li:last-child {
	border-bottom: none;
}

nav a {
	display: block;
	text-decoration: none;
	font-size: 2rem;
	color: var(--primary);
	padding: 1em 1em;
}

nav a:hover {
	
}

.dropdown {
	height: auto;
	padding: 0;
	display: none;
	background: var(--primary);
}

.dropdown a {
	color: #fff;
	text-indent: .4em;
}

.menu-btn {
	background: #000;
	color: #fff;
	font-size: 3rem;
	text-align: center;
	padding: .3em 0;
}

.triangle {
	float: right;
	transition: .5s ease-in-out;
}

.flip {
	transform: rotate(180deg);
	margin-top: -3px;
}

/*FOOTER SECTION*/
footer {
	width: 100%;
	max-width: 1200px;
	color: #fff;
	text-align: center;
	font-size: .8rem;
	margin: 0 auto;
	padding: .9em;
}

img.social {
	width: 20px;
	height: auto;
}



.home-page {
/*	position: relative;*/
	margin: 0;
	padding: 0;
}

/*STRUTURAL*/

.main-pic {
	background: url("../img/home-page-pic-sm.png") 50% 50% no-repeat;
	height: 80vh;
	width: 100%;
	background-size: cover;
	background-position: center;
	-o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
	background-repeat: no-repeat;
}

.row {width: 100%;}

.basic-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1em;
	padding: 1em;
}

.staff-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1em;
	padding: 0 1.6em;
}

.staff-grid img {
	width: 90%;
	margin: 0 auto;
}

.staff-heads {
	margin-bottom: .5em;
}

.staff-heads img:hover {
	border: .3em solid var(--primary);
	box-sizing: border-box;
}

.staff-heads img {
	width: 60%;
	border-radius: 50%;
	border: .3em solid #fff;
	box-shadow: 0 0 4px #333;
}

.customer-topper img {
	width: 40%;
}

video {
	margin: 1em auto;
	width: 100%;
}

.pic-interior {
	display: block;
	margin: 0 auto 3% auto;
	width: 90%;
}

.pic-interior img {
	margin-bottom: 1em;
}

/*SERVICES PAGE-NOT HOME==========*/
.service-page-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 1em;
}

.service-box {
	padding: 2em;
	box-shadow: 0px 1px 4px #ccc;
	margin: 1em 0;
}

.service-box img {
	width: 80%;
	margin-bottom: 1em;
}

.service-box h2 {
	text-align: center;
}

.list-grid {
	display: grid;
	grid-template-areas: 
		"LL"
		"LR";
}

.list-left,
.list-right {
	padding: 0 2em;
}

.list-left {
	grid-area: LL;
}

.list-right {
	grid-area: LR;
}

.button-green.copy {
	margin: 0;
	font-size: 4rem;
}


/*TEXT STYLES*/
/*p {
	margin: .5em 0 1.2em 0;
	padding: 0 2em;
}*/

h1, h2, h3 {
	margin: .5em 0;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 2rem;
}

.home-title {    /*TITLE FOR HOME PAGE*/
	color: var(--primary);
	font-size: 1.8rem;
	text-align: center;
	padding: .6em;
	margin-top: 0;
	z-index: 100;

}

.subheader {
	width: 90%;
	margin: 0 auto;
	font-weight: bold;
	text-align: center;
}

.page-title {   
	font-size: 3rem;
	text-align: center;
	margin-top: .2em;
}

.text-full-width {
	width: 90%; 
	margin: 2em auto;
}

/*BUTTONS*/
.button-green,
.button-white {
	width: 60%;
	border-radius: .5em;
	border: .2em solid var(--primary);
	margin: 2em auto;
}

.button-primary a:hover {
	background: #fff;
	color: var(--primary);
}

.button-green {
	grid-area: button;
}

.top-scroll-btn {
	width: 2.4em;
	color: #fff;
	text-align: center;
	padding: .8em 0;
	position: fixed;
	bottom: 1em;
	right: 1.4em;
	background: #000;
	cursor: pointer;
	transition: .3s;
	display: none;
	border: 1px solid #fff;
}


/*TESTIMONIALS*/
#testimonials {
	background: #000;
	width: 100%;
	overflow: hidden;
}

.owl-stage {
	width: 20%;
	margin: auto;
}
.owl-item {
	background: #000;
	border: none;
}

.owl-next span, .owl-prev span{
	display: none;
	background: red;
}

.owl-dot span {
	background: #9c3;
	border: 2px solid #9c3;
}

.owl-dot .active, .owl-dot:hover {
	background: #9c3;
}

#carousel {
	background: #000;
	line-height: 1.4rem;
	font-size: .7rem;
	width: 80%;
	color: #fff;
	padding: 2em 1em;
	margin: 0 auto;
	text-align: center;
}

/*CONTACT PAGE STYLES*/
form {
	width: 100%
}

#contact {
	background-image: url("../img/contact-page-img-mobile.jpg");
	width: 100vw;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 3% 0 5% 0;
}

.form-container {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	display: grid;
	grid-template-areas: 
	"info"
	"form";
}

.info {
	grid-area: info;
	padding: 2% 5%;
	margin: 0 0 5% 0;
}

.info p {
	font-size: 1.4rem;
	margin: 0 0 2% 0;
	line-height: 1.8rem;
	color: #fff;
}

form {
	grid-area: form;
	width: 90%;
	display: block;
	margin: 0 auto;
	color: #fff;
	padding: 0;
	font-size: 2rem;
}

input[type=text], textarea {
	width: 80%;
	padding: 2% 1%;
	border-radius: 6px;
	margin: 1% 0 0 0;
	border: 1px solid #9c3;
	font-size: 1.4rem;
}

input[type=submit]{
	background: #9c3;
	border: none;
	padding: 2% 3%;
	border-radius: 6px;
	color: #fff;
	font-size: 1.3rem;
	font-weight: bold;
	margin: 2% 0 0 0;

}

textarea {
	height: 90px;
}
input[type=submit]:hover {
	background: #A8E038;
}

.phone a, .email a {
	background: #9c3;
	padding: 4% 2%;
	border-radius: 6px;
	text-align: center;
	display: block;
	width: 80%;
	margin: 0 auto;
	color: #fff;
	text-decoration: none;
}

.error {
	color: red;
	font-size: 1.1rem;
	margin: 1% 0 8% 0;
}

.submit-message {
	border: 1px solid #9c3;
}

/*TABLET STYLES=================================================================================*/
@media (min-width: 49.125em){
/*NAV AND HEADER*/
.menu-btn {
	font-size: 2rem;
	text-align: center;
	padding: .2em 0;
}

/*STRUCTURE*/
.staff-grid {
	grid-template-columns: repeat(3, 1fr);
	grid-gap: .8em;
}

.main-pic {
	background-image: url("../img/home-page-pic-md.png");
}

.service-page-grid {
	grid-template-columns: repeat(2, 1fr);
}

.list-grid {
	grid-template-areas: 
		"LL LR";
}
.basic-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.pic-interior {
	display: block;
	width: 100%;
	margin: 0 auto;
	clear: both;
	overflow: hidden;
}

.pic-interior img {
	float: left;
	width: 30%;
	margin: 0 1em;
}

/*TEXT*/
p {
	font-size: 1rem;
}

.caption {
	font-size: .8rem;
}

h3 {
	font-size: 1.6rem;
}

.subheader {
	width: 80%
}

.text-full-width {
	width: 70%; 
	margin: 2em auto;
}

.home-title {
	font-size: 3rem;
}

.page-title {
	font-size: 4rem;
}

/*BUTTONS*/
.button-primary {
	width: 60%;
}

.top-scroll-btn {
	width: 1.8em;
	padding: .3em 0;
	
}

#carousel {
	background: #000;
	line-height: 1.4rem;
	color: #fff;
	width: 60%;
	margin: 0 auto;
	text-align: center;
}

/*CONTACT PAGE*/
#contact {
	background-image: url("../img/contact-page-img.jpg");
}

.form-container {
	display: grid;
	grid-gap: 2%;
	grid-template-columns: 50% 50%;
	grid-template-areas: 
	"info form";
}

input[type=text], label, textarea, placeholder {
	font-size: 1rem;
}

input[type=text], textarea, {
	width: 80%;
	padding: 2% 1%;
	border-radius: 6px;
	margin: 1% 0 3% 0;
	border: 1px solid #9c3;
}

label {
	font-size: 1rem;
}

.phone a, .email a {
	background: none;
	padding: 0;
	text-align: center;
	display: block;
	width: 80%;
	margin: 0 auto;
	color: #9c3;
	text-decoration: none;
	font-size: 1.2rem;
}

.info p {
	font-size: 1rem;
}

.error {
	color: red;
	font-size: .9rem;
	margin: 0 0 4% 0;
}

}  /*END OF TABLET QUERY*********************************/




/*DESKTOP STYLES=================================================================================*/
@media (min-width: 75em){

/*HEADER AND NAV SECTION*/
.wrapper {
		margin-top: 4.2em;
}

.main-pic {
	background: url("../img/home-page-pic.png");
	height: 100vh;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	-o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
}

.top-row {
	position: fixed;
	background: #fff;
}

header {
	flex-direction: row;
}

.logo {
	width: 20%;
}

.logo img {
	width: 90%;

}

nav {
	display: block !important;
	width: 80%;
}

nav ul {
	display: flex;
	justify-content: flex-end;
	height: 100%;
	align-items: center;
}

nav li {
	border-bottom: none;
}

nav a {
	font-size: 1rem;
	padding: 1em 1em;
	color: var(--body-text);
}

nav a:hover {
	color: var(--primary);
}

.dropdown-toggle {
	position: relative;
}

.dropdown {
	position: absolute;
	margin: .5em 0 0 .9em;
}

.dropdown a {
	text-indent: 0;
}

.dropdown a:hover {
	color: #000;
}

.dropdown li {
	border-bottom: 1px solid #ccc;
	padding: .02em 0;
}

.dropdown li:last-child {
	border-bottom: none;
}

.triangle {
	margin-left: .1em;
	height: 100%;
}

.menu-btn {display: none;}

/*STRUCTURE*/
section {
	margin: 1em 0;
	padding: 1.9em 0;
	clear: both;
}

.service-box img {
	width: 60%;
}

video {
	width: 80%;
}

.pic-interior {
	padding: 0 4em;
}

.pic-interior img {
	width: 20%;
	padding-bottom: 1em;
}

.service-box h2 {
	text-align: left;
}

.basic-grid {
	grid-template-columns: repeat(4, 1fr);
}

.staff-grid {
	grid-template-columns: repeat(5, 1fr);
}

/*BUTTONS*/
.button-green,
.button-white {
	width: 40%;
}


/*================TEXT*/

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

.page-title {
	margin-top: .5em;
}

.home-title {
	font-size: 2.2rem;
	padding-top: 1em;
	position: absolute;
}

.subheader {
	width: 50%;
	font-size: 1.5rem;	
}

.text-full-width {
	width: 60%; 
	margin: 2em auto;
}

.copy .page-title {
	text-align: left;
	padding-left: .5em;
}

/*BUTTONS*/
.button-primary {
	width: 30%;
}

.phone, .email {
	font-size: 1.4rem;
}

}  /*END OF DESKTOP QUERY*/