.logo{
    background-image: url("/assets/images/logo.jpg");
    background-color: #cccccc;
    width:90%;
    height:10em;
    position:relative;
    left:5%;   
    background-repeat: no-repeat;
    background-position: center; /* Center the image */
    background-size: cover; /* Resize the background image to cover the entire container */

  }
  html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    display: table-cell;
    vertical-align: middle;
}
  body{
      width:100%;
      height:60rem;
      background-color: #143402;
      z-index:1;
width:1200px;
  }
  .wrapper{
    width:100%;
    height:60rem;
    background-color: #143402;
}

  
h1{
  text-align: center;
}

h2{
  text-align: center;
}


.pic1{
  z-index:1!important;
  position:relative;
}

.pic2{
  z-index:1!important;
  position:relative;

}

.pic3{
    z-index:1!important;
    position:relative;

}


  /** NAV BAR ******************************************************************************************************************************/

.extraSpace{
    padding-left:70px!important;
}
.navbar{
    background-color: #F39B35;
    width:100%;
    height:13rem;
    position:absolute;
  }
  /* Navbar container */
.navbar {
    background-color: #F39B35;
    font-family: Arial;
    z-index:99;
  }
.nav{
  height:10rem;
}
  .bulletIcon{
    width:5px;
    height:5px;
    position:relative;
    left:2%;   

  }
  
  /* Links inside the navbar */
  .navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    padding-bottom: 40px!important;

  }
  a{
    z-index:99!important;

  }
  /* The dropdown container */
  .dropdown {
    float: left;
    overflow: hidden;
    z-index:99;

  }
  .navUL{
    z-index:99;

  }
  /* Dropdown button */
  .dropdown .dropbtn {
    font-size: 16px;
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit; /* Important for vertical align on mobile phones */
    margin: 0; /* Important for vertical align on mobile phones */
z-index:99;
  }
  
  /* Add a red background color to navbar links on hover */
   a:hover, .dropdown:hover .dropbtn {
    background-color: #0cb250;

  }
  
  /* Dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    min-height:2rem!important;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:99;

  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;

  }
  
  a {
    text-decoration: none;

  }
  
nav{
  z-index: 999;
}
  
   .navUL ul {
    background: darkorange;
    list-style: none;
    margin: 0;
    padding-left: 0;

  }
  
  .navUL li {
    color: #fff;
    background: darkorange;
    display: block;
    float: left;
    padding: 1rem;
    position: relative;
    text-decoration: none;
    transition-duration: 0.5s;

  }
    
  li a {
    color: #fff;

  }
  
  .navUL li:hover,
  .navUL li:focus-within {
    background: #0cb250;
    cursor: pointer;

  }
  
  li:focus-within a {
    outline: none;

  }
  
  ul li ul {
    background: #0cb250;
    visibility: hidden;
    opacity: 0;
    min-width: 15rem;
    position: absolute;
    transition: all 0.5s ease;
    margin-top: 1rem;
    left: 0;
    display: none;

  }
  
  ul li:hover > ul,
  ul li:focus-within > ul,
  ul li ul:hover,
  ul li ul:focus {
     visibility: visible;
     opacity: 1;
     display: block;

  }
  
  ul li ul li {
    clear: both;
    width: 100%;

  }

  /** NAV BAR ******************************************************************************************************************************/

.row {
    display: flex;
    position:relative;
    top:.5rem;
    left:5%;
    width:90%;

  }
  
  .column {
    flex: 33.33%;
    padding: 5px;
  }
  /** Side Article  ************************************************************************************************************/

 
  .sideTitle{
      background-color:#0cb250;
      height: 30px;
      color: #FFFFFF;
      font-family: Arial, Helvetica, Sans-Serif;
      font-size: 12px;
      text-align: center;
      vertical-align: middle;
      z-index:2;

  }
.side1{
  position:relative;
  top:-2rem;
}
.side2{
  position:relative;
  top:-2rem;
}
.side3{
  position:relative;
  top:-2rem;
}
.side4{
  position:relative;
  top:-2rem;
}
  .sideA{
    color: #FAF9F5;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
    font-size: 12px;
    position:relative;
    left:2%;
    height:40px;
    width:35px;


line-height: 125%;
line-height: 1.25em;
padding: 0px -3 0px 0px;
  }
.mainP a:hover, .mainP a.hover {
  font-family: Arial, Helvetica, Sans-Serif;
  text-decoration: none;
  color: #F2E0A1;
}
.mainP a{
  color: #F39B35;

}
  .sideA:hover{
    color: #EED98B;

  }

  table {
    display: table;
    border-collapse: separate;
    box-sizing: border-box;
    text-indent: initial;
    border-spacing: 2px;
    border-color: grey;
}
td {
    display: table-cell;
    vertical-align: inherit;
}


tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
td {
    display: table-cell;
    vertical-align: inherit;
    color: #f1e4c7;
    font-size: 12px;
    line-height: 1.25em;
font-family: Arial, Helvetica, Sans-Serif;
font-style: normal;
font-weight: normal;
width:20rem;
}
table {
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
}
.art-BlockContent-body {
    color: #f1e4c7;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
}
.art-BlockContent-body a:link {
    color: #FAF9F5;
    font-family: Arial, Helvetica, Sans-Serif;
    text-decoration: none;
}

.aColor{
    color: #FAF9F5;

}

.art-BlockContent-body ul li {
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    text-decoration: none;
    line-height: 125%;
    line-height: 1.25em;
    padding: 0px 0 0px 13px;
}



.art-BlockContent-body ul {
    list-style-type: none;
    color: #f1e4c7;
    margin: 0;
    padding: 0;
}

.a2{
    color: #f1e4c7;


}
    h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {
        font-family: Arial, Helvetica, Sans-Serif;
        font-size: 28px;
        font-style: normal;
        font-weight: bold;
        text-align: left;
        color: #f1e4c7;
    }


    .visitors{
        color: #f1e4c7;
    font-family: Arial, Helvetica, Sans-Serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
    }




    /**   Main Content ***********************************************************/





        /**   Main Content ***********************************************************/


        h2{
            font-family: Arial, Helvetica, Sans-Serif;
            font-size: 28px;
            font-style: normal;
            font-weight: bold;
            text-align: center;
            color: #f1e4c7;
        }

        h3{
            font-family: Arial, Helvetica, Sans-Serif;
    font-size: 22px;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    color: #f1e4c7;
        }

        .mainP{
            display: block;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0px;
            margin-inline-end: 0px;
            font-family: Arial, Helvetica, Sans-Serif;
            font-size: 12px;
            font-style: normal;
            font-weight: normal;
            text-align: center;
            color: #f1e4c7;
        }


         .mainP ul li{

          font-size: 12px;
          font-style: normal;
          font-weight: normal;
          text-align: justify;
          color: #f1e4c7;
          
          font-size: 12px;
          font-style: normal;
          font-weight: normal;
          text-align: justify;
          color: #f1e4c7;

         }


         .mainP li{

          font-size: 12px;
          font-style: normal;
          font-weight: normal;
          text-align: justify;
 
         }


.mainList{

  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-align: justify;
  color: #f1e4c7;
  font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
text-decoration: none;
line-height: 125%;
line-height: 1.25em;
padding: 0px 0 0px 13px;
}





         /* The grid: Four equal columns that floats next to each other */


/* Style the images inside the grid */
.columnIMG img {
  opacity: 0.8;
  cursor: pointer;
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: contain; /* Resize the background image to cover the entire container */
}

.columnIMG img:hover {
  opacity: 1;
}

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

/* The expanding image container (positioning is needed to position the close button and the text) */
.containerIMG {
  position: absolute;
  display: block;
  width:600px;
  height:400px;
  top:28rem;
  
}

/* Expanding image text */
#imgtext {
  position: absolute;
  bottom: 15px;

    }
/* Closable button inside the image */
.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
  display:none;
} 

.img1{
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: contain; /* Resize the background image to cover the entire container */
  width: 175px;
}








* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.containerGallery {
  position: relative;
  top:31rem;
  width:250px;
  height:250px;
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: contain; /* Resize the background image to cover the entire container */
  text-align:justify;
}
.containerGallery1 {
  position: relative;
  top:8rem;
  width:250px;
  height:250px;
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: contain; /* Resize the background image to cover the entire container */
  text-align:justify;
}
/* Hide the images by default */
.mySlides {
  display: none;
}
.mySlides1 {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.columnGallery {
  float: left;
  width:62px;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
  width:100px;
  height:75px;
}

.active,
.demo:hover {
  opacity: 1;
}



.imageFlex {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
  width:750px;
}

/* Create four equal columns that sits next to each other */
.colFlex {
  flex: 20%;
  max-width: 20%;
  padding: 0 4px;
}

.colFlex img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .colFlex {
    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: 600px) {
  .colFlex {
    flex: 100%;
    max-width: 100%;
  }
}
.footerText{
  color: #221F11;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 11px;
}

ul{
  z-index:99;
}



.mainList a{
  color: darkorange;

}

.mainList a:hover{
  background:none;
}



.aqua{
  position:absolute;
  top:13rem;
  left:10rem;

}ton {
  display: block;
  height: 27px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
  padding: 0 11px !important;
  line-height: 27px;
  text-decoration: none !important;
  color: #000000 !important;
}

.art-button-wrapper .art-button {
  display: block;
  height: 27px;
  font-family: Arial, Helvetica, Sans-Serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  white-space: nowrap;
  text-align: left;
  padding: 0 11px !important;
  line-height: 27px;
  text-decoration: none !important;
  color: #000000 !important;
  background-color: darkorange;
  width:85px;
}



.sidePic{
  width:300px;
  height:200px;
  float:left;
  background-image: url("/assets/images/hardscapes5.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  margin-right:15px;
}


/**************************hardscape3*******************************/

.sidePic1{
  float:left;
  background-image: url("/assets/images/wall0.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  padding-right:15px;
  text-align: justify;
  margin-bottom: 1rem;
}

.sidePic2{
  float:right;
  background-image: url("/assets/images/wall3.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: justify;
  margin-left:-15px;
  margin-bottom: 1rem;

}

.sidePic3{

  float:left;
  position:absolute;
  top:40rem;
  background-image: url("/assets/images/wall4.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  margin-right:15px;
  text-align: justify;
  margin-bottom: 1rem;

}


/**************************hardscape4*******************************/

.sidePic5{
  position:absolute;
  background-image: url("/assets/images/kitchen1.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;
}
.sidePic6{
  position:absolute;
  background-image: url("/assets/images/kitchen2.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;

}
.sidePic7{

  position:absolute;
  background-image: url("/assets/images/wall3.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;

}
.sidePic8{
  position:absolute;
  background-image: url("/assets/images/wall4.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;

}


/**************************hardscape5*******************************/
.sidePic9{
  position:absolute;
  background-image: url("/assets/images/patio-sealing1.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;

}
.sidePic10{
  position:absolute;
  background-image: url("/assets/images/patio-sealing2.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;

}
.sidePic11{
  position:absolute;
  background-image: url("/assets/images/patio-sealing4.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;

}


.sidePic12{
  position:absolute;
  background-image: url("/assets/images/pattern_ideas.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;

}



.sidePic13{    
  position:absolute;
  background-image: url("/assets/images/landscape_design1.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: wrap;
  margin-bottom: 1rem;
  width:600px;
  height:300px;
  top:-24rem;
  left:1rem;

}

.sidePic14{
  position:absolute;
  background-image: url("/assets/images/landscape_design2.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;
  height:200px;
  width:250px;
  align-self:right;
  top:33.5rem;
}


.sidePic15{
  position:absolute;
  background-image: url("/assets/images/industry1.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  margin-bottom: 1rem;
  height:350px;
  width:250px;
  float:left;
  top:11rem;
}
.sidePic16{
  position:absolute;
  background-image: url("/assets/images/industry2.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;
  height:350px;
  width:250px;
  float:right;
  top:12rem;
  right:3rem;
}
.sidePic17{
  position:absolute;
  background-image: url("/assets/images/industry3.jpg");
  background-repeat: no-repeat;
  background-position: center; /* Center the image */
  background-size: cover; /* Resize the background image to cover the entire container */
  text-align: Justify;
  margin-bottom: 1rem;
  height:450px;
  width:450px;
  align-self:right;
  top:37rem;
  left:6rem;
}







.a2{
  width:375px;
}

.mainContent{
  float:right;
  position:relative;
  
      }

    

    .footer {
      position: absolute;
      left: 10%;
      top: 119rem;
      width: 80%;
      height:3.5rem;
      background-color: #f1e4c7;;
      color: white;
      text-align: center;
      border:1px solid #f1e4c7;
      border-radius:2%;
    }


    .art-page-footer {
      margin: 1em;
      text-align: center;
      text-decoration: none;
      color: #F39B35;
      width:75%;
      position:absolute;
      left:11%;
      top: 122rem;
      font-family: Arial;
      font-size: 10px;
      letter-spacing: normal;
      word-spacing: normal;
      font-style: normal;
      font-weight: normal;

  }
  .art-page-footer, .art-page-footer a, .art-page-footer a:link, .art-page-footer a:visited, .art-page-footer a:hover {
      font-family: Arial;
      font-size: 10px;
      letter-spacing: normal;
      word-spacing: normal;
      font-style: normal;
      font-weight: normal;
      text-decoration: none;
      color: #F39B35;
  }
  .sideArticle{
      position:absolute;
      right:20rem;
      background-color:#005e29;
  }

.addSpace{
  margin-top:3rem;
  position:absolute;
  top:27rem;

}
.addSpace1{
  margin-top:3rem;
  position:absolute;
  top:29rem;

}
.addSpace2{
  margin-top:3rem;
  position:absolute;
  top:-6rem;

}
.addSpace3{
  margin-top:3rem;
  position:relative;
  top:3rem;

}

.addSpace4{
  margin-top:3rem;
  position:relative;
  top:-4rem;

}
.addSpace5{
  margin-top:3rem;
  position:relative;
  top:-6rem;

}
.addSpace6{   
   left:1rem;

  top:-10rem;

}
.addSpace7{
  margin-top:3rem;
  position:relative;
  top:-11rem;

}
.addSpace8{
  margin-top:2rem;
  position:relative;
  top:13rem;
  float:right;
  text-align: justify;

}    
.addSpace9{
  position:relative;
  top:18.5rem;
  float:right;
  text-align: justify;
     
}
.addSpace10{
  margin-top:2rem;
  position:relative;
  top:31rem;
  float:right;
}
.addSpace11{
  margin-top:2rem;
  position:relative;
  top:24rem;
}
.aqua{
  position:absolute;
  top:13rem;
  left:10rem;

}    
.aqua2{
  position:absolute;
  top:43.5rem;
  left:25rem;

}


  .footDeep{
      top:150rem;  
  }