body, html {
    height: 100%;
	background-color: lightgrey;
}

body {
  line-height: 26px;
  font-size: 14px;
  
}

body, p, h1, h2, h3, h4, h5, h6 {
  margin: 0px;
  padding: 0px;
  color: indigo;
}
p {
	font-family: 'Playfair Display', serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }


#logo img {
	position: fixed;
	left: 40px;
	top: 40px;
	width: 305px;
	height: 88px;
	z-index: 1;
	}
@media screen and (max-width: 813px) {#logo img
     {
      width: 204px;
      height: 59px;
	  top: 10px;
	  left:10px;} }

/* WOW JavaScript
============================================================================================ */
.wow { visibility: hidden; }
/* WOW JavaScript
============================================================================================ */

/* Scroll Arrows START
============================================================================================ */
.titleArrows i {
	color:#9C1AB3;
	text-shadow: 0px 5px 5px #000;
	
}

@media screen and (max-width: 1025px) {
  .titleArrows i {
  bottom: 8%;
  width: 100%;
  height: auto;
  text-align: center;  
  }
}
@media screen and (max-width: 641px) {
  .titleArrows i {
  bottom: 8%;
  width: 100%;
  height: auto;
  text-align: center;   
  }
}

.titleArrows {
  position: absolute;
  bottom: 5%;
  width: 100%;
  height: auto;
  text-align: center;
  z-index: 1;
}


.titleIndex i {
	color:#9C1AB3;
	text-shadow: 0px 5px 5px #000;
	
}

@media screen and (max-width: 1025px) {
  .titleIndex i {
  top: 8%;
  width: 100%;
  height: auto;
  text-align: center;  
  }
}
@media screen and (max-width: 641px) {
  .titleIndex i {
  display: none;   
  }
}

.titleIndex {
  position: absolute;
  top: 12%;
  width: 100%;
  height: auto;
  text-align: center;
  z-index: 1;
}
.titleIndex h1 {
  
  color:#009ada;
  font-size: 6em;
  text-shadow: 2px 2px #000;
}
@media screen and (max-width: 800px) {
  .titleIndex h1 {
    font-size: 30px;
  }
}

/* Scroll Arrows END
============================================================================================ */

.title {
  position: absolute;
  top: 20%;
  width: 100%;
  height: auto;
  text-align: center;
  z-index: 9999;
}
.title h1 {
  
  color:#DFDFDF;
  font-size: 80px;
  text-shadow: 2px 2px 4px #000;
}
@media screen and (max-width: 641px) {
  .title h1 {
    font-size: 38px;
  }
}
.containerMenu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  background-image: url(../img/BG_scania.png);
  background-size: cover;
  background-position: center center;
  padding: 24px; }

.radial_Nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  min-width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  background-size: cover;
  background-position: center center;
  padding: 24px;
  }


/* Start of Home PAGES
============================================================================================ */
/* Start of Contact Page
============================================================================================ */
 #contact {
  background-image:url(../img/contact_BG.jpg);
  background-attachment: fixed;
}
div.contactSVG {
	position:relative;
	background-color: transparent;
	height: 21px;
		
}
#Layer_3 {
	position:absolute;
	bottom: 20px;
}
#Layer_1 {
	position: absolute;
	top:20px;
}
div.contact {
  position: relative;
  background-color: lightgray;
  padding: 1vw 1vh;
  width: 100%;
  height: auto;
  line-height: 26px;
  text-align: center;
}

div.contactBox {
	margin: auto;
	width:50vw;
	padding: 0px 20px;
	border-left: 1px solid purple;
	border-right: 1px solid purple;
}

.contact h1 {
  font-size:36px;	
}

@media screen and (max-width: 641px) {
  div.contactBox {
    width:80vw;
  }
}

@media screen and (max-width: 601px) {
  div.contact h1 {
    font-size: 22px;
  }
}

.contact p {
  font-size:16px;
  
}

@media screen and (max-width: 601px) {
  div.contact p {
    font-size: 12px;
  }
}  

.parallaxContact_1 {
	/* The image used */
    background-image:url(../img/contact_Parallax.jpg);

    /* Full height */
    height: 400px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	text-align: center;
}

.parallaxContact_1 h2{
    color:blueviolet;
	margin:auto;
	padding-top:25vh;
	text-align: center;
	text-decoration: overline underline;
	font-size: 36px;
}
/* Form and maps */
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
	border-radius: 6px;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
}

input[type=submit] {
    background-color:lightgray;
    color:black;
    padding: 12px 20px;
    border: none;
	border-radius: 6px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color:darkslateblue;
}

/* Style the container/contact section */
.containerContact {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 10px;
}

/* Create two columns that float next to eachother */
.columnContact {
    float: left;
    width: 50%;
    margin-top: 6px;
    padding: 20px;
}

/* Clear floats after the columns */
.rowContact:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .columnContact, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}
/* END of Contact Page
============================================================================================ */

/* Start of About Page
============================================================================================ */
div.aboutSVG {
	position:relative;
	background-color: #d3d3d3;
	height: 21px;
}
#Layer_4 {
	position:absolute;
	top: 20px;
} 


#about {
  background-image: url(../img/about_BG.jpg);
  background-attachment: fixed;
  background-repeat: repeat-y; 
  
}
  

div.about {
  position: relative;
  background-color: lightgray;
  padding: 1vw 1vw;
  width: 100vw;
  height: auto;
  line-height: 24px;
  text-align: center;
  border-top: 1px solid black;
}

.aboutBox {
	width:70vw;
	height: auto;
	margin: auto;
	padding: 0px 20px;
	border-left: 1px solid purple;
	border-right: 1px solid purple;
}

.parallaxAbout_1 {
	/* The image used */
    background-image:url(../img/about_Parallax.jpg);

    /* Full height */
    height: 50%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	text-align: center;
}

.parallaxAbout_1 h2{
    color:blueviolet;
	margin:auto;
	padding-top:35vh;
	text-align: center;
	text-decoration: overline underline;
	font-size: 36px;
}




/* Profile images for About */




.containerAbout {
  position: relative;
  width: 100%;
}

.imageAbout {
  display: block;
  width: 100%;
  height: auto;
  
}
.evan {
	background-image: url(../img/Evan.jpg);
	background-position: center;
}
.evan:hover {
	background-image: url(../img/Evan_2.jpg);
	background-position: center;
}
.danielle {
	background-image: url(../img/Danielle.jpg);
	background-position: center;
}
.danielle:hover {
	background-image: url(../img/Danielle_2.jpg);
	background-position: center;
}
.jamie {
	background-image: url(../img/Jamie.jpg);
	background-position: center;
	background-size: 100%;
}
.jamie:hover {
	background-image: url(../img/Jamie_2.jpg);
	background-position: center;
	background-size: 100%;
}
/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.morph:hover {
  border-radius: 50%;
  
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}


 
.pic {
  border: 2px solid #000;  
  float: left;
  height: 300px;
  width: 300px;
  margin: auto;
  overflow: hidden;
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
}
.rowAbout {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 10vh 10vw;
	margin: 1vh 1vw;
	background-color: transparent;
	
}
/* Profile images for About End */


/* Create two equal columns that sits next to each other */
.columnAbout {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 10px;
}
.columnAbout img {
    margin-top: 10px;
    vertical-align: middle;
	max-width: 100%;
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1025px) {
    .columnAbout {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 641px) {
    .columnAbout {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

.about h1 {
  font-size:36px;
}

@media screen and (max-width: 601px) {
  div.about h1 {
    font-size: 22px;
  }
}

.about p {
  font-size:14px;
  
}

@media screen and (max-width: 601px) {
  div.about p {
    font-size: 14px;
  }
}

@media screen and (max-width: 641px) {
  .aboutBox {
    width: 90vw;
  }
}
/* END of About Page
============================================================================================ */
/* Start of Testimonials Page
============================================================================================ */

#testimonials {
  
  background-image: url(../img/testimonials_BG.jpg);
  background-attachment: fixed;
   }

div.testimonials {
  position: relative;
  background-color: lightgray;
  padding: 1vw 1vw;
  width: 100%;
  height: auto;
  line-height: 26px;
  text-align: center;
}

div.testimonialsBox {
	margin: auto;
	width:50vw;
	padding: 0px 20px;
	border-left: 1px solid purple;
	border-right: 1px solid purple;
}

.testimonials h1 {
  font-size:36px;	
}

@media screen and (max-width: 601px) {
  div.testimonials h1 {
    font-size: 22px;
  }
}

.testimonials p {
  font-size:14px;
  
}

@media screen and (max-width: 601px) {
  div.testimonials p {
    font-size: 14px;
  }
}

@media screen and (max-width: 1025px) {
 div.testimonialsBox {
    width: 70vw;
  }
}
@media screen and (max-width: 641px) {
  div.testimonialsBox {
    width: 90vw;
  }
}
/* END of Testimonials Page
============================================================================================ */

/* END of HOME PAGES
============================================================================================ */



/* Start of SERVICES PAGES
============================================================================================ */

/* Start of hydro Cleaning Page
============================================================================================ */
div.hydroSVG {
	position:relative;
	background-color: transparent;
	height: 21px;
		
}
#Layer_1 {
	position:absolute;
	top: 20px;
}

#Layer_2 {
	position:absolute;
	top: 20px;
}

#hydro {
  background-image: url(../img/hydroExcavation_BG.jpg);
  background-attachment: fixed;
}
  

div.hydro {
  position: relative;
  background-color: lightgray;
  padding: 1vw 1vw;
  width: 100vw;
  height: auto;
  line-height: 24px;
  text-align: center;
  border-top: 1px solid black;
}

.hydroBox {
	width:40vw;
	height: auto;
	margin: auto;
	padding: 0px 20px;
	border-left: 1px solid purple;
	border-right: 1px solid purple;
	
}


.parallaxHydro_1 {
	/* The image used */
    background-image:url(../img/hydro-excavation_1.jpg);

    /* Full height */
    height: 400px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	text-align: center;
}
.parallaxHydro_1 p{
    color: white;
	margin-left:5vw;
	padding-top:22vh;
	text-align: left;
	font-size: 28px;
	line-height: 50px;
}

.bullet {
	list-style-type: none;
	text-align: left;
	padding-left: 25px;
	padding-top: 20px;
	line-height: 24px;
}
.bullet p{
	list-style-type: none;
	text-align: left;
	padding-left: 25px;
}
 .fas {
	
	padding-right: 10px;
}
.fab{
	
	padding-right: 10px;
}
.parallaxHydro_2 {
    /* The image used */
    background-image:url(../img/hydro-excavation_2.jpg);

    /* Full height */
    height: 400px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	text-align: center;
}

.parallaxHydro_2 p{
    color: white;
	margin-right:5vw;
	padding-top:22vh;
	text-align: right;
	font-size: 28px;
	line-height: 50px;
}

/* Images for Hydro Excavation */

.rowHydro {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
	margin: 0vh 20vw;
	background-color: black;
}
/* Create two equal columns that sits next to each other */
.columnHydro {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
    max-width: 50%;
    padding: 0 4px;
}
.columnHydro img {
    margin-top: 8px;
    vertical-align: middle;
	width: 100%;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .columnHydro {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

@media screen and (max-width: 1025px) {
  .hydroBox {
    width: 70vw;
  }
}
@media screen and (max-width: 641px) {
  .hydroBox {
    width: 90vw;
  }
}

@media screen and (max-width: 1025px) {
  .parallaxHydro_2 p {
	 padding-top:15vh;
  }
}

@media screen and (max-width: 1025px) {
  .parallaxHydro_1 p {
	 padding-top:15vh;
  }
}
@media screen and (max-width: 641px) {
  .parallaxHydro_2 p {
    font-size: 14px;
	padding-top:30vh;
  }
}
@media screen and (max-width: 641px) {
  .parallaxHydro_1 p {
    font-size: 14px;
	padding-top:30vh;
  }
}
/* End of hydro Cleaning Page
============================================================================================ */


/* Start of Drain Cleaning Page
============================================================================================ */

#drain {
  
  background-image: url(../img/drainCleaning_BG.jpg);
  background-attachment: fixed;
}
  

div.drain {
  position: relative;
	margin-bottom: 0px;
  background-color: lightgray;
  padding: 1vw 0vh;
  width: 100%;
  height: auto;
  line-height: 26px;
  text-align: center;
}

div.drainBox {
	margin: auto;
	width:50vw;
	padding: 0px 20px;
	border-left: 1px solid purple;
	border-right: 1px solid purple;
}

div.drainSVG {
	position:relative;
	background-color: transparent;
}




#drainVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%; 
    min-height: 100%;
	z-index: -9999;
}

.drainImg{
    padding: 0vh 1vw;
	text-align: center;
	z-index: -2;
}

.rowDrain {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 40px 4px;
	background-color: transparent;
}

/* Create four equal columns that sits next to each other */
.columnDrain {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 10px;
}

.columnDrain img {
    margin-top:8px;
    vertical-align: middle;
	width: 90%;
	border: thin solid #0E0E0E;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1025px) {
    .columnDrain {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 641px) {
    .columnDrain {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}




.drain h1 {
  font-size:36px;	
}

@media screen and (max-width: 601px) {
  div.drain h1 {
    font-size: 22px;
  }
}

.drain p {
  font-size:14px;
  
}

@media screen and (max-width: 601px) {
  div.drain p {
    font-size: 14px;
  }
}

@media screen and (max-width: 1367px) {
  div.drainBox {
    width: 70vw;
  }
}
@media screen and (max-width: 641px) {
  div.drainBox {
    width: 90vw;
  }
}
/* End of Drain Cleaning Page
============================================================================================ */

/* Start of Septic Cleaning Page
============================================================================================ */

div.septicSVG_1 {
	position:relative;
	background-color: transparent;
	height: 21px;
		
}
#Layer_7 {
	position:absolute;
	bottom: 20px;
}
div.septicSVG {
	position:relative;
	background-color: transparent;
	height: 21px;
		
}
#Layer_5 {
	position:absolute;
	top: 20px;
}
.parallaxSeptic_1 {
	/* The image used */
    background-image:url(../img/septic_Parallax.jpg);

    /* Full height */
    height: 60%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	text-align: center;
}

.parallaxSeptic_1 p{
    color: white;
	margin-right:5vw;
	padding-top:25vh;
	text-align: right;
	line-height: 2;
	font-size: 24px;
}

@media screen and (max-width: 641px) {
  .parallaxSeptic_1 p {
    font-size: 14px;
  }
}

#septic {
  
  background-image: url(../img/septicCleaning_BG.jpg);
  background-attachment: fixed;
}
  


div.septic {
  position: relative;
  background-color: lightgray;
  padding: 1vw 1vw;
  width: 100%;
  height: auto;
  line-height: 26px;
  text-align: center;
}

div.septicBox {
	margin: auto;
	width:50vw;
	padding: 0px 20px;
	border-left: 1px solid purple;
	border-right: 1px solid purple;
}

.septic h1 {
  font-size:36px;	
}

@media screen and (max-width: 601px) {
  div.septic h1 {
    font-size: 22px;
  }
}

.septic p {
  font-size:14px;
  
}

@media screen and (max-width: 601px) {
  div.septic p {
    font-size: 14px;
  }
}

@media screen and (max-width: 1025px) {
  div.septicBox {
    width: 70vw;
  }
}
@media screen and (max-width: 639px) {
  div.septicBox {
    width: 90vw;
  }
}
/* Images for Septic Cleaning */

.rowSeptic {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
	margin: 0vh 20vw;
	background-color: black;
}
/* Create two equal columns that sits next to each other */
.columnSeptic {
    -ms-flex: 50%; /* IE10 */
    flex: 50%;
    max-width: 50%;
    padding: 0 4px;
}
.columnSeptic img {
    margin-top: 8px;
    vertical-align: middle;
	width: 100%;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .columnSeptic {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}

/* End of Septic Cleaning Page
============================================================================================ */


/* Start of Main Menu
============================================================================================ */


.menuContact {
  width: 100%;
  height: auto;
  position: relative;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 9999;
  max-width: 592px;
  max-height: 100%; }
  @media screen and (min-width: 512px) {
    .menu {
      max-width: 65vw;
      max-height: 65vh; } }


.menu {
  width: 100%;
  height: auto;
  position: fixed;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 9999;
  max-width: 792px;
  max-height: 100%; }
  @media screen and (min-width: 512px) {
    .menu {
      max-width: 65vw;
      max-height: 65vh; } }

.main-menu {
  cursor: pointer; }
  .main-menu circle {
    transition: opacity 250ms; }
    .main-menu circle:hover {
      opacity: 1; }
  .main-menu.is-active > circle {
    opacity: 1; }

[class$="-button"] {
  cursor: pointer; }
  [class$="-button"] circle {
    opacity: 0;
    transition: opacity 250ms; }
    [class$="-button"] circle:hover {
      opacity: 0.6; }
  [class$="-button"] path {
    pointer-events: none; }

/* End of Main Menu
============================================================================================ */


/* Footer Area css
============================================================================================ */
.footer_area {
  	width: 100%;
}
.footer {
	margin-left: auto;
	margin-right: auto;
	padding: 10px 20px;
	background-color: #131627;
	display: -webkit-flex; /* Safari */
    -webkit-justify-content: center; /* Safari 6.1+ */
    display: flex;
    justify-content: center;
}
.copyright_area {
	
	padding: 20px 20px;
	background-color: #04081d;
}

.footerInner {
	
	padding: 20px 20px;
	background-color: #131627;
	
}

.copyrightFooter {
	display: -webkit-flex; /* Safari */
    -webkit-justify-content: center; /* Safari 6.1+ */
    display: flex;
    justify-content: left;
}

.copyrightTitle {
	padding-right: 20px;
	
}

.copyrightTitle h5 {
	padding-bottom: 0px 25px;
	color: #51545f;
	font-size: 14px;
	
}

.footerTitle {
	padding-bottom: 0px 40px;
	text-decoration: none;
	
}

.footerTitle h3 {
  color: #fff;
  font-weight: 600;
  font-size: 16px;
	
}

.footerLinks {
	list-style: none;
}
.copyLinks {
	list-style: none;
}

.copyLinks li{
	float: left;
	text-align: center;
}
.copyLinks li a{
	
	padding: 0px 20px;
	text-decoration: none;
	color: #51545f;
}

li a{
	padding: 0px;
	text-decoration: none;
	color: #51545f;
}
li a:hover{
	text-decoration: none;
	color: #902784;
}
/* End Footer Area css
============================================================================================ */