@charset "UTF-8";

html {
  scroll-behavior: smooth;
}

/**
 * Disable smooth scrolling when users have prefers-reduced-motion enabled
 */
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

:target {
  display: block;
  position: relative;
  top: -155px; 
  visibility: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
	font-weight: 100;
	color: #FFFFFF;
	background-color: #404041;
	margin: 0;
	line-height: 20pt;
}

.services {
	width:50%;
	float: left;
	padding-top: 10px;
	padding-left: 30px;
	color: #FFFFFF;
	box-sizing: border-box;
}

/* For media queries, only quote the things that are changing. If it's not in the query then it will assume hasn't changed */

.orange-row { background-color:#F05A28;}

#headerlogo {max-width:180px; transition: max-width 0.2s ease-in;}

.ss-nav {background-color:rgba(64, 64, 64, 0.9); border-bottom: #F05A28 6px solid;  }

.ss-nav a {color:#ffffff;}
.ss-nav a:hover {color:#F05A28;}
.ss-nav a.orange {color:#F05A28; font-weight:600;}
.row {padding-top:40px; padding-bottom:40px;}

h2 {
	font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
	font-weight: 100;
	color:#F05A28;
	font-size:2.5em;
	padding-bottom:30px;
}

.hero {background-image:url("images/smartspray-web-bg.jpg"); background-position:center center; background-size:cover; padding-top:50px; padding-bottom:50px;}

@media (max-width: 768px) {  
 .hero {background-image:url("images/smartspray-web-bg-sm.jpg");  
}}

.hero ul {padding:30px 0;}
.hero h5 li {display:inline-block; font-size:0.9em; font-family: 'Source Sans Pro', sans-serif;
    font-style: normal;
	font-weight: 100; border-right:solid #F05A28 2px; padding:0 10px;}

.hero h5 li:first-of-type {padding-left:0;}
.hero h5 li:last-of-type {padding-right:0; border-right:none;}

.ss-btn {padding:10px; margin:20px 0; text-transform:uppercase; border:solid 4px; font-weight:800; letter-spacing:0.05em;
}
.ss-btn.grey-bg{ color:#FFFFFF; border-color:#F05A28;}
.ss-btn:hover {text-decoration:none;}

/* Sweep To Right */
.hvr-sweep-to-right {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}
.hvr-sweep-to-right:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.grey-bg.hvr-sweep-to-right:before
{  background: #F05A28;
}

.grey-bg.hvr-sweep-to-right:hover, .grey-bg.hvr-sweep-to-right:focus, .grey-bg.hvr-sweep-to-right:active {
  color: #FFFFFF;
}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

h3 {
	text-transform:uppercase;
	color: #F05A28;
 font-weight:600;
 font-size: 1.7em;
 padding: 15px 0;
 letter-spacing:0.1em;
}

.divider {margin:30px 0;}

.container img {max-width:100%;}

.orange-row h2 {color:#FFFFFF;}
.orange-row a:link, .orange-row a:visited {color:#FFFFFF; font-weight:bold; transition: color 0.5s;}
.orange-row a:hover {color:#404041; text-decoration:none;}

#navbar-1 {transition:top 0.5s ease-in-out}
.ss-nav .navbar-toggler {color:#FFFFFF;}

.ss-nav .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='#FFFFFF' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }
.ss-nav .navbar-toggler:hover .navbar-toggler-icon {background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='#F05A28' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}
.ss-nav .dropdown-menu {background-color:rgba(64, 64, 64, 0.9); padding:5px; border:0;}
.ss-nav .dropdown-menu .dropdown-item {padding:5px 10px;}

@media (min-width: 768px){
.address {border-left:solid 2px #FFFFFF;}
}