@charset "utf-8";
/* CSS Document */
html,
html * {
    box-sizing: border-box;	
	margin: 0;
	padding: 0;
}
html, body {
	width:100%;
	margin: 0px;
	padding: 0px;
	overflow-x: hidden;
	background-color: #29292a;

}

h1 {
    font-weight: 700;
    letter-spacing: 0;
    font-size: 50px;
    color: #d9d9d9;
    font-family: 'karla', 'Montserrat Regular', 'Arial', 'sans-serif';
    line-height: 50px;
}
h2 {
	font-family: 'karla', 'Montserrat Regular', 'Arial', 'sans-serif';
	font-weight: 700;
	letter-spacing: 0px;
	font-size: 20px;
	color: #d9d9d9;

}
h3 {
	font-family: 'karla', 'Montserrat Regular', 'Arial', 'sans-serif';
	font-weight: 700;
	letter-spacing: 0px;
	font-size: 18px;
	color: #d9d9d9;

}
h4 {
	font-family: 'karla', 'Montserrat Regular', 'Arial', 'sans-serif';
	font-weight: 700;
	letter-spacing: 0px;
	font-size: 18px;
	color: #d9d9d9;

}
h5 {
	font-family: 'karla', 'Montserrat Regular', 'Arial', 'sans-serif';
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0px;
	font-size: 16px;

}
h6 {
	font-family: "Montserrat Regular", "Arial", "Helvetica", "sans-serif";
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0px;
	font-size: 14px;
	color: #d9d9d9;

}
a {
	text-decoration: none;
	font-family: 'karla', 'Montserrat Regular', 'Arial', 'sans-serif';
}
a, a:hover{
	color: #03cb0d;
}
a, a:visited {
	color: inherit;

}
main {
	background-color: #403f3f;
}

.tipTopLogoSection {
	background-color: #EAEBEB;
	display: flex;
	flex-flow: row;
}

.sprayEZLogo {
	float: left;

}
.contactSectionHead {
    flot: right;
    padding-left: 55%;
    line-height: 1px;
	padding-bottom: 35px;

}


.contactSectionHead h2 {
	width: 700px;
	color: black;
	padding-bottom: 15px;
	color: #29292a;
}
.contactSectionHead h3 {
	color: #03cb0d;
line-height: 35px;
	text-align: left;
	padding-left: 5px;
		font-weight:800;
}


.mainTopNav {
	background-color: #29292a;
	padding-top: 5%;
	  transition: 0.3s;
}



.blogMain{
	height: 600px;
	padding-left: 15%;
	padding-right: 15%;

}
.blogSection {

}

.container {
  padding: 2px 80px;
	

}

/*ignore*/
.top-container {
  background-color: #f1f1f1;
  padding-top: 100px;
	padding-left: 100px;
	padding-bottom: 0px; 
		z-index: 400;

}

.main {
  padding: 20px 16px;
  background: #29292a;
  color: #f1f1f1;
	z-index: 400;ti
}
/*ignore*/

/* Hero Caousel*/

.content {
	display: block;
	padding-bottom: 1%;
	z-index: 400;
}


/*---Diagrams---*/
.diagramBlock {
    margin: 50px 100px;

}
.diagramList {
        box-shadow: 0 0px 40px 0px rgba(0,0,0,0.15);
    -moz-box-shadow: 0 0px 40px;
    -webkit-box-shadow: 0 0px 40px 0px rgba(0,0,0,0.15);
    margin-left: 5%;
}
table {
 
    table-layout: fixed;
}
.diagramListTitle {
    box-shadow: 0 5px 20px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 5px 20px 0px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 5px 20px 0px rgba(0,0,0,0.1);
}
.diagramListContent {
    height: 300px;
    overflow-x: auto;
    margin-top: 0;
    border: 1px solid rgba(255,255,255,0.3);
   
}
th {
    padding: 20px 15px;
    text-align: left;
    font-weight: normal;
    font-size: 18px;
    color: white;
    
}
td {
    padding: 15px;
    text-align: left;
    vertical-align: middle;
    font-size: 15px;
    color: #808080;
    border-bottom: solid 1px rgba(255,255,255,0.1);
        
} 
::-webkit-scrollbar {
    width: 10px;
    position: absolute;
    left: 0;
}
::-webkit-scrollbar-track{
    background-color: #414343;
    border-radius:10px;
    margin:10px 0;
}
::-webkit-scrollbar-thumb {
    background-color: #697676;
    border-radius: 10px;
    margin: 10px 0;
}

}/*
.my-custom-scrollbar {
    position: relative;
    height: 200px;
    overflow: auto;

}
.table-wrapper-scroll-y {
    display: block;
    text-align: center;
}*/
.button {
    display: inline-block;
    border-radius: 4px;
    background-color: #5ab231;
    border: none;
    color: #FCFCF8;
    text-align: center;
    font-size: 14px;
    padding: 8px;
    width: 180px;
    transition: all 0.5s;
    curser: pointer;
    margin: 5px;
}
.button a {
    background-color: #5ab231;
}
.button span {
    curser: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
}
.button span:after {
    content:'\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}
.button:hover span {
    padding-right: 14px;
}
.button:hover span:after {
    opacity: 1;
    right:0;
}
.diagramContentSection {
    display: flex;
    flex-align: row;
    padding-left: 5px;
}

.diagramSectionTitle {
    margin-bottom: 5%;
    margin-top: 5%;
}












.footerLine hr {
	width: 100%;
	background-color: #403f3f;
	color: #403f3f;
	height: 35px;
	border: #403f3f;
}

.Footer {
	color: #D9D9D9;
	background-color: #2d2d2d;
	padding-bottom: 5%;
	padding-left: 10%;
	list-style: none;
	padding-top: 4%;
}
.footerMain {
	display: flex;
	flex-flow: row;
	flex-wrap:wrap;
	justify-content: space-between;
	width:100%;
}
.footerColumn1 {
	width: 25%;
	float: left;
	display: flex;
	flex-flow: column;
	padding-right: 3%;
	list-style: none;
}
.footerSocial  {
    position: static;
    flex-direction: row!important;
    align-items: stretch;
}
.footerSocial ul {
	list-style: none;
	width: 100%;
}
.footerSocial li {
	width: 15%;
	font-size: 25px;
	flex-wrap: nowrap;
	align-items: baseline;
	justify-content: space-around;
	display: inline-flex;
}
.footerSocial fa {
	float: right;
}
.footerLinks ul {
	list-style: none;
	line-height: 45px;
	padding-top: 20%;
	text-transform: uppercase;
}

.footerColumn2 {
	display: flex;
	flex-flow: column;
	width: 25%;
	
}
.footerColumn3 {
	display: flex;
	flex-flow: column;
	float: right;
	width: 25%;
	padding-right: 
}




.scrolled{
  background-color: dodgerblue;
  transition: 0.3s;
}

.smLine hr {
	color: #403f3f;
}

.copyRightContainer {
	width: 100%;
	background-color: #1d1f22;
	color: #d9d9d9;
	height: 65px;
}
.copyRight {
	text-align: center;
	padding-top: 25px;
	font-size: 12px;
}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 80px;
  padding: 8px 12px;
  position: absolute;
  bottom: 50%;
  width: 100%;
  text-align: center;
	font-weight: 700;
}
.text span {
	background-color:  rgba(106,107,106,.5);
	opacity: 80%;
	padding-left: 15px;
	padding-right:15px;
}
.subText {
	 color: #f2f2f2;
  font-size: 60px;
  padding: 8px 12px;
  position: absolute;
  bottom: 40%;
  width: 100%;
  text-align: center;
	font-weight: 700;
}
.subText span {
	background-color:  rgba(106,107,106,.5);
	opacity: 80%;
	padding-left: 15px;
	padding-right:15px;
}
.blogButton {
	padding-left: 4%;
	padding-right: 4%;
	padding-top: 1%;
	padding-bottom: 1%;
	color: white;
	font-size: 25px;
	background-color: #017B00;
	position: absolute;
	bottom:20%;
	margin-left: 42%;
	border-radius: 4px;
	border:#;
	font-weight: 600;
	transition-duration: 0.4s;
	
}
.blogButton:hover {
	background-color: #353535;
	color: white !important;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	
}


/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition:  0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.main {
	z-index: 400;
}
.myHeader {
	z-index:400;
}
.nav {
	z-index: 400;
}
.content {
  padding-top: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  color: #29292a;
   	background-color: #eaebeb !important;
  transition: background-color 200ms linear;
      -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}

.sticky + .content {
  padding-top: 0;
}
nav {    
    display: block;
    text-align: center;
    float: right;
    left: 0;
  width: 100%;
  background: rgba(255,255,255,1.00);
	z-index: 400;
  }
  nav ul {
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
    list-style: none;
    vertical-align: bottom;
	  	z-index: 400;
}
.nav a {
    display:block; 
    background: rgb(220, 244, 250,); 
	font-weight: 700;
	font-size:15px;
    text-decoration: none;
    padding: .8em .8em;
    text-transform: uppercase;
		z-index: 400;
	

  }
  .nav{  
    display: inline-block;
    border-radius:6px;
	  z-index: 400;
  }
  .nav li{position: relative;}
  .nav > li {
    float: left;
    margin-right: 23px;
		z-index: 400;
    padding-right: 0;
  } 
  .nav > li > a { 
    margin-bottom:1px;
	  	z-index: 400;

  }
  .nav > li:hover , .nav > li:hover >a{  border-bottom-color:#5ab232;}
  .nav li:hover > a { color:#5ab232; }
  .nav > li:first-child  { border-radius: 4px 0 0 4px;} 
  .nav > li:first-child>a{border-radius: 4px 0 0 0;}
  .nav > li:last-child  { 
  	border-radius: 0 0 4px 0; 
  	margin-right: 0;
	  	z-index: 400;
  } 
  .nav > li:last-child >a{border-radius: 0 4px 0 0; }
  .nav li li a {
    margin-top: 1px;
    margin-right: 106px;
	  	z-index: 400;
}
  
  
  
    .nav li a:first-child:nth-last-child(2):before { 
     content:""; 
     position: absolute; 
     height:0; 
     width: 0; 
     border: 5px solid transparent; 
     top: 50% ;
     right:5px;  
			z-index: 400;
   }
   
   
   
   
   
   /* submenu positioning*/
.nav ul {
    position: absolute;
    text-align: left;
    white-space: nowrap;
    padding-top: 5px;
    border-top: 5px solid  #5ab232;
    left: -99999em;
    background-color: #3e3e3e;
    padding-right: 262px;
		z-index: 400;
}
.nav > li:hover > ul {
  left: auto;
  padding-top: 5px;
  min-width: 100%;
	padding-right: 15%;
		z-index: 400;
}
.nav > li li ul {  border-left:1px solid #5ab232;}


.nav > li li:hover > ul { 
 /* margin-left: 1px */
  left: 100%;
  top: -1px;
		z-index: 400;
}
/* arrow hover styling */

.nav > li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  border-bottom-color: #5ab232; 
  margin-top:5px;
		z-index: 400;
}
.nav li li > a:first-child:nth-last-child(2):before {  
  border-left-color: #5ab232; 
  margin-top: -5px
	  	z-index: 400;
}
.nav li li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  border-right-color: #5ab232;
  right: 10px; 
		z-index: 400;
}

nav.scroll {
  background-color: #A1572F;
  color: #29292a;
}

body > header {
  margin-top: 4.7em;
}
.fema {
	padding-left: 250px;
}
figcaptionFEMA {
	display:block;padding-right: 265px;
    color: #fff;
    font: italic smaller sans-serif;
    text-align: center;
	align-content: flex-end;
}
figcaption {
	display: block;
	color: #fff;
	font: italic smaller sans-serif;
	text-align: center;
	padding-bottom: 5%;
	
}
.bedlinerQualities {
	list-style: none;
	padding-left: 5%;
}
/*newest blog layout July 13 */
.container {
    max-width: 95%;
    margin-top: 5%;
    margin-left: 3%;
}

.container-pull {
  margin-top: 50px;
}


.top-topics,
.other-topics {
  position: relative;
}

.topic {
  box-shadow: 0 1px 4px 1px #6f6f6f;
}

.topic > .topic-label {
  color: white;
  background: rgba(0, 0, 0, 0.8);
  width: 100%;
  height: 126px;
  position: absolute;
  bottom: 0;
}

.topic > .topic-label > .topic-content {
  margin: 0 20px;

}





.latest {
    height: 450px;
    position: relative;
   width: 100%;

}
.latest .topic-content {
    position: absolute;
    background: rgba(0,0,0,0.77);
    bottom: 1px;
    width: 100%;
    height:auto;
    color: white;

}
.latest img {
    width:100%;
}
.2latest {
    position: relative;
}
.2latest .topic-content {
    position: absolute;
    background: rgba(0,0,0,0.77);
    bottom: 1px;
    width: 100%;
    color: white;
    
}
.other-topics-container {
    margin-top: 15%;
    padding-top: 50px;
    margin-bottom: 5%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap: 15px;
    grid-row-gap: 35px;
}

.post-wrap {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    box-shadow: 0px 2px 10px rgba(250,250,250,.25);
    transition: all .25s;
    top: 8px;
    overflow: hidden;
}

.post-wrap:hover {
  top: 0;
  box-shadow: 0px 0px 20px rgba(250,250,250,.25);
}
.center {
  text-align: center;
}
.pagination {
  display: inline-block;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 10%;
}

.pagination a {
  float: center;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
    font-weight: 600;
    text-align: center;
    color: white;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination a:hover:not(.active) {background-color: #ddd; color: #216A08;}

.post-image {
  height: 400px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.post-body {
  width: 85%;

  margin: 0 auto;
}

.post-meta {
  color: #7B7B7B;
}

.post-meta b {
  font-weight: 500;
}

.post-title {
  color: #444;
  font-size: 20px;
  padding: 5px 0 10px 0;
}

.post-text {
  color: #7B7B7B;
}

.post-body-secondary {
  border-top: 1px solid #ECECEC;
}

.post-category {
  color: #7B7B7B;
  padding: 15px 0 10px 0;
}

/* Button Styling */
.button-wrap {
  display: flex;
  justify-content: center;
  margin: 20px 0 20px 0;
}

.button {
  position: relative;
  background-color: #3089DB;
  padding: 20px 60px 20px 60px;
  box-shadow: 0px 6px 20px rgba(48,137,219,.60);
  transition: all .25s;
  top: 0;  
  border-radius: 10px;
  
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.button:hover {
  border-radius: 10px;
  box-shadow: 0px 2px 10px rgba(48,137,219,.60);
  top: 2px;
}
}
.other-topics .topic-content {
    position: absolute;
    background: rgba(0,0,0,0.77);
    bottom: 1px;
    width: 100%;
    color: white;
}
.trends-image {
    float: right;
    width: 45%;
    color: green;
    padding-left:5%;
    font-size: 12px;
}
ul {
    list-style: none;
}
.hamburger .nav .icon ul{
    display: none;
}

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 20px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {
    font-size: 12px
}
}
@supports (object-fit: cover) {
  .object-fit img  {
    position: absolute;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
    transform: none;
    object-fit: cover;
  }
}
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
#content #mainContent h3 {
	/*Captions ot Taglines */
	font-style: normal;
	font-weight: 200;
}

#content #mainContent p {
	/* All paragraphs under maincontent */
	font-style: normal;
	font-weight: 200;
	text-align: justify;
	padding-left: 15%;
	font-size: 18px;
}
.mainContent a {
	text-decoration: underline;
}
.mainContent li{
	list-style: none;
	padding-left: 5%;
}

#content #mainContent #authorInfo h2, #content #mainContent #authorInfo p {
	font-size: 18px;
	padding-left: 2%;
	padding-top: 11px;
}
#content #mainContent #authorInfo p {
	font-size: 18px;
	padding-left: 2%;
	padding-top: 0px;
	padding-bottom: 11px;
	padding-right: 2%;
}

.mainContent h1 {
	line-height: 30px;
}
#mainContent {
	/* Container for the blog post in individal blog view */
	margin-left: 15%;
	width: 71%;
	float: left;
	padding-right: 2%;
	padding-left:2%;
	padding-top: 41px;
	border: outset;
	padding-bottom: 5%;
	font-size: 18px;	
	margin-bottom: 5%;
		color: white;
	line-height: 30px;
}

#mainwrapper {
	/* Container of all content */
	width: 80%;
	overflow: auto;
	margin-left: 10%;
	font-size: 18px;
	color: white;
}



.notOnDesktop {
	/*element to be displayed only in mobile view and tabet view */
	display: none;
}

/* Mobile view */
@media screen and (max-width : 958px ){

#mainwrapper #content #sidebar {
	/* sidebar */
	padding-bottom: 0px;
}
#content .notOnDesktop {
	/* Search box shown only in mobile and tablet view */
	width: 100%;
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
}
#content .notOnDesktop input {
	width: 80%;
	text-align: center;
}
#content #mainContent h3 {
	/* Title under maincontent, if any */
	font-size: 14px;
}
    .tipTopNav{
        width: 100%;
        display: flex;
        flex-flow: row;        
        position:fixed;
        z-index: 1;

    }
    .tipTopHome {
        float: left;
        padding-right: 35px;
        padding-top:15px; 
        
    }
    .tipTopCart {

        float: right;
        padding-right: 100px;
    }
    .tipTopCart h3 {
        padding-top:15px;
        padding-right: 20px;
    }
    .fa-shopping-cart {
          padding-top: 13px;
        float: right;
        padding-right: 25px;
    }
 .top-topics {
    height: 420px;
    margin-top: 20px;
  }
  
  .other-topics {
    height: 420px;
    margin-bottom: 20px;
  }
 
    .nav a:not(:first-child), li {
        display: none;
    }
    .diagramContentSection {
        width:100%;
    }
.hamburger {
  overflow: hidden;
  position: relative;
    float: right;
    background-color: inherit;
    color: white;
    margin-top: 3%;
    padding-bottom: 1%;
    width: 5%;
    margin-left: 15%;

}
    .sticky {
        display: none;
    }
.tipTopNav {
    width: 100%;
    background-color: #313030;
   display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    float: right;
}
.tipTopNavBlank {
	display: none;
}
.tipTopHome {
	padding-left: 25%;
	padding-top: 3%;
}
.tipTopCart {
	display: flex;
	flex-flow: row;
	float: right;
	width: 15%;
	margin-left: 25%;
    padding-top: 3%;

}
.tipTopCart h3 {
	float: right;
	padding-top: 11.5%;
	padding-left: 5%;
}
.fa-shopping-cart {
	float: left;
	font-size: 20px;
	padding-top: 11.5%;
	color: gray;
	padding-right: 15%;
}
    .hamburger :hover {
        color: green;
    }
.hamburger #myLinks {
  display: none;
}
    .main #myHeader {
        display: none;
    }

.hamburger a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}
    .diagramImage {
        width: 100%;
        
    }
    .diagramList {
       width: 85%;
    }
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.active {
  background-color: #4CAF50;
  color: white;
}
    .text {
        display: none;
    }
    .top-topics {
        width: 100%;
    }
    .highlight {
        width: 100%;
    }
    .other-topics-container {
        display: block;
          padding-top: 25%;
    }
    .footerSocial {
        width: 100%;
    }
    .footerLinks  {
        display: none;
    }
    .footerColumn1 {
        width:100%;
        padding-left: 15%;
    }
    .footerColumn2 {
        width: 100%;
        padding-top: 5%;
        padding-left: 30%;
    }
    .footerColumn3 {
        width: 100%;
        padding-left: 30%;
        padding-top: 5%;
    }
    .diagramContentSection {
        display: flex;
        flex-flow: column;
    }
}




@media (min-width : 959px ){
  .top-topics {
    height: 200px;
    margin-bottom: 20px;
  }
    .logoSection {
	width:25%;


}
  
  .other-topics {
    height: 200px;
  }
  
  .other-topics-container {
    margin-bottom: 20px;
  }

  .top-topics:last-child {
    margin-bottom: 0;
  }
  
  .top-topics > .topic-label,
  .other-topics > .topic-label {
    height: 70px;
  }
    .hamburger {
        display: none;
    }
    .tipTopNav {
        width: 100%;
        display: flex;
        flex-flow: row;

    }
    .featuring {
    display: flex;
    width: 100%;
}
.highlight {
    float: left;
    width: 50%;
    height: 480px;
}
.highlight .topic-content h3 {
    COLOR: white;
}

.highlight .topic-content {
    color:white;
    opacity: 85%;
    background: rgba(0,0,0,.5);
}

.top-topics {
    float: right;
    display: flex;
    flex-flow: column;
    width: 50%;
    padding-left: 15px;
}
    
.tipTopNav {
    width: 100%;
    background-color: #313030;
    height: 51px;
    top: 78px;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    float: right;
}
.tipTopNavBlank {
	width: 65%;
}
.tipTopHome {
	padding-left: 5%;
	padding-top: 1%;
}
.tipTopCart {
	display: flex;
	flex-flow: row;
	float: right;
	width: 15%;
	padding-left: 5%;
	padding-right: 1px;

}
.tipTopCart h3 {
	float: right;
	padding-top: 11.5%;
	padding-left: 15%;
}
.fa-shopping-cart {
	float: left;
	font-size: 20px;
	padding-top: 11.5%;
	color: gray;
	padding-right: 15%;
}
}


@media (max-width: 810px){
       .sprayEZLogo {
        float: none;
        width: 100%;
        padding-left: 25%;
    }
    .contactSectionHead {
        float: none;
        padding-left: 25%;
        margin-top: 5%;
    }
    .subText {
        font-size: 30px;
    }
    .blogButton {
        display: none;
    }
}

@media (max-width: 633px){
       .sprayEZLogo {
        float: none;
        width: 100%;
         padding-left: 2%;
    }
    .contactSectionHead {
        float: none;
        padding-left: 2%;
        margin-top: 5%;
    }
    .top-container {
	padding-left: 10px;
	padding-bottom: 0px; 
		z-index: 400;
    }
  .tipTopHome {
        float: left;
        padding-top:15px; 
      padding-left: 3%;
        
    }
    .tipTopCart {
        padding-left: 3%;
        float: left;
 
    }
 
    .fa-shopping-cart {
 
        float: left;
        padding-right: 25px;
    }
    .hamburger{
        margin-left: 1%;
    }
    .subText{
        font-size: 20px;
    }
}