body{
  box-sizing: border-box;
  margin:0;
  padding:0;
  font-family: 'Poppins', sans-serif;
}

body, html{
  font-size:18px;
}

.maincontent{
  max-width:100%;
  padding:0;
  margin:0;
}
.maincontent_wrapper{
  padding-top:0;
}

img{
  width:100%;
}
p{
  font-weight:300;
}
.my-container{
  max-width:1600px;
  padding:2% 3%;
  margin:0 auto;
}
h1{
  font-size:3rem;
  margin-block:.2em;
}
h2{
  font-size:2.2rem;
  margin-block:.2em;
}
h3{
  font-weight:200;
  margin-block:.2em;
}
.cta{
  position: relative;
  margin-top:20px;
  display: inline-block;
  background-color:#B99E69;
  padding:15px 28px;
  color:#fff;
  filter: drop-shadow(3px 3px 3px rgba(0,0,0,0.4));
}
.cta:hover{
  filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.4));
  color:#595959;
}
.title{
  position: relative;
  display:inline-block;
  margin-bottom:20px;
}
.title::after{
  content:"";
  position: absolute;
  bottom:-8px;
  left:25%;
  height:2px;
  width:50%;
  background-color: #B99E69;
}
.single-stone{
  max-width:4vw;
  margin:.5vw .3vw 0 0;
}
.highlight{
  color:#B99E69;
  font-style: italic;
}
.selected{
  color: #00357f !important;
  font-style: italic;
  font-weight:700;
}
.hero{
  overflow:hidden;
  display:grid;
  background-repeat: no-repeat;
  background-size:cover;
 
}
#hero-bg{
  object-fit:cover;
  grid-column:1/2;
  grid-row:1/2;
}
.hero-wrapper{
  grid-column:1/2;
  grid-row:1/2;
  position: relative;
  padding:5%;
  display:grid;
  background:rgba(0,0,0,0.3);
}
#hero-name{
  justify-self:flex-end;
  color:#ececec;
}
#hero-name p{
  max-width:700px;
  font-size:1.2rem;
  font-weight:500;
}


.sec1-wrapper{
  text-align:center;
  max-width:70vw;
  margin:0 auto;
  padding:3% 5%;
}
/* ======================= */
div.my-menu {
  text-align: center;
  background: transparent;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap:wrap;
  /* mix-blend-mode:difference; */
  background-color: #C7B299;
}

#subtitle {
  text-transform: uppercase;
  mix-blend-mode:difference;
}

.section1 {
  /* padding: 1% 5% 0; */

}

.section1-details {
  margin: 0 auto;
}

.my-menu a{
  color: #fff;

}

.showSingle {
  padding: 15px 30px;
  display:inline-block;
  white-space: nowrap;
  cursor: pointer !important;
  font-size: 1.2rem;
  position: relative;
}

.showSingle::before {
  position: absolute;
  content: "";
  height: 0;
  width: 100%;
  border-bottom:2px solid #00357F;
  bottom: 5px;
  left: 0;
  transform:scale(0);
  transition:.5s;
  pointer-events: none;
}

.showSingle:hover {
  color: #00357F;
  text-decoration: none;
}
.showSingle:hover.showSingle::before {
  pointer-events: none;
  transition:.5s;
  transform:scale(1);
}


.targetDiv {
  padding: 2% 5%;
}

.heading1 {
  text-align: center;
  font-size: clamp(20px, 1.4vw, 36px);
  padding: 10px 0;
}

/* ================= */
div.blueTable {
  border: 1px solid #1C6EA4;
  background-color: #EEEEEE;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.divTable.blueTable .divTableCell, .divTable.blueTable .divTableHead {
  border: 1px solid #AAAAAA;
  padding: 5px 4px;
}
.divTable.blueTable .divTableBody .divTableCell {
  font-size: 1rem;
}
.divTable.blueTable .divTableRow:nth-child(even) {
  background: #D0E4F5;
}
.divTable.blueTable .divTableHeading {
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
.divTable.blueTable .divTableHeading .divTableHead {
  font-size: 1rem;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
.divTable.blueTable .divTableHeading .divTableHead:first-child {
  border-left: none;
}

.blueTable .tableFootStyle {
  font-size: 1rem;
  font-weight: bold;
  color: #FFFFFF;
  background: #D0E4F5;
  background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
  border-top: 2px solid #444444;
}
.blueTable .tableFootStyle {
  font-size: 1rem;
}
.blueTable .tableFootStyle .links {
	 text-align: right;
}
.blueTable .tableFootStyle .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}
.blueTable.outerTableFooter {
  border-top: none;
}
.blueTable.outerTableFooter .tableFootStyle {
  padding: 3px 5px; 
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}
.divTableCell img{
  max-width:25px;
  margin:2px;
}
.divTableCell .dollar{
  max-width:15px;
  margin:0 4px;
}


#sec3-wrapper{
  padding:5%;
  background-repeat:no-repeat;
  background-position: right;
  background-size:50%;
}
#sec3-grid-left{
  z-index:2;
}
#left-list {
  margin-top:25px;
  display:flex;
  max-width:800px;
  justify-content:space-between;
}
#section3 ul li{
  list-style-type:none;
}
ul li h3{
  position: relative;
}

/* ============== Slider ============== */
.carousel-container-wood{
  margin:5% auto ;
  left:0;
  top:0;
  max-width:600px;
  animation:wood 40s linear infinite;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  }
.carousel-container-vinyl{
  margin:5% auto ;
  left:0;
  top:0;
  max-width:600px;
  animation:vinyl 40s linear infinite;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  }
.carousel-container-composite{
  margin:5% auto ;
  left:0;
  top:0;
  max-width:600px;
  animation:composite 40s linear infinite;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  }
.carousel-container-iron{
  margin:5% auto ;
  left:0;
  top:0;
  max-width:600px;
  animation:iron 40s linear infinite;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  }
.carousel-container-chain{
  margin:5% auto ;
  left:0;
  top:0;
  max-width:600px;
  animation:chain 40s linear infinite;
  background-size:cover;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  }
  .outer::before{
      content:"";
      position:absolute;
      left:-3%;
      top:-3%;
      width:30%;
      height:30%;
      background:#C7B299;
      z-index:-1;
  }
  .outer::after{
      content:"";
      position:absolute;
      right:-3%;
      bottom:-4%;
      width:30%;
      height:30%;
      background:#C7B299;
      z-index:-1;
  }
  .outer{
  position:relative;
  left:0;
  top:0;
  width:100%;
  height:420px;
  box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
  -webkit-box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
  -moz-box-shadow: 6px 6px 19px -6px rgba(0,0,0,0.67);
  }
  .div-line{
      margin:30px auto 0;
      width:100%;
      max-width:1500px;
      text-align:center;
  }
  .div-line img{
      margin:-8px 0;
  }
  
  .carousel-container:hover{
  animation-play-state: paused;
  }
  .preload{
      background-image:url('/imageserver/Reusable/fence-general23/cedar-min.jpeg'),url('/imageserver/Reusable/fence-general23/lattice-min.jpeg'),url('/imageserver/Reusable/fence-general23/picket-min.jpeg'),url('/imageserver/Reusable/fence-general23/privacy-min.jpg'),url('/imageserver/Reusable/fence-general23/vinyl1.jpg'),url('/imageserver/Reusable/fence-general23/vinyl2.jpg'),url('/imageserver/Reusable/fence-general23/vinyl3-min.jpeg'),url('/imageserver/Reusable/fence-general23/vinyl4.jpeg'),url('/imageserver/Reusable/fence-general23/composite1.jpg'),url('/imageserver/Reusable/fence-general23/composite2.jpeg'),url('/imageserver/Reusable/fence-general23/composite3.jpg'),url('/imageserver/Reusable/fence-general23/composite4.png'),url('/imageserver/Reusable/fence-general23/iron1.jpeg'),url('/imageserver/Reusable/fence-general23/iron2.png'),url('/imageserver/Reusable/fence-general23/iron3.jpeg'),url('/imageserver/Reusable/fence-general23/iron4.jpg'),url('/imageserver/Reusable/fence-general23/chain1-min.jpg'),url('/imageserver/Reusable/fence-general23/chain2.jpg'),url('/imageserver/Reusable/fence-general23/chain3.jpeg'),url('/imageserver/Reusable/fence-general23/chain4.jpeg')
  }
 
  @keyframes wood {
    0%,100%{
        background-image:url('/imageserver/Reusable/fence-general23/cedar-min.jpeg');    
      }
      20%{
        background-image:url('/imageserver/Reusable/fence-general23/cedar-min.jpeg');    
      }
      25%{
        background-image:url('/imageserver/Reusable/fence-general23/lattice-min.jpeg');
      }
      45%{
        background-image:url('/imageserver/Reusable/fence-general23/lattice-min.jpeg');  
      }
      50%{
        background-image:url('/imageserver/Reusable/fence-general23/picket-min.jpeg');
      }
      70%{
        background-image:url('/imageserver/Reusable/fence-general23/picket-min.jpeg');  
      }
      75%{
        background-image:url('/imageserver/Reusable/fence-general23/privacy-min.jpg');  
      }    
      95%{
        background-image:url('/imageserver/Reusable/fence-general23/privacy-min.jpg');  
      }    
  }
  @keyframes vinyl {
    0%,100%{
        background-image:url('/imageserver/Reusable/fence-general23/vinyl1.jpg');    
      }
      20%{
        background-image:url('/imageserver/Reusable/fence-general23/vinyl1.jpg');    
      }
      25%{
        background-image:url('/imageserver/Reusable/fence-general23/vinyl2.jpg');
      }
      45%{
        background-image:url('/imageserver/Reusable/fence-general23/vinyl2.jpg');  
      }
      50%{
        background-image:url('/imageserver/Reusable/fence-general23/vinyl3-min.jpeg');
      }
      70%{
        background-image:url('/imageserver/Reusable/fence-general23/vinyl3-min.jpeg');  
      }
      75%{
        background-image:url('/imageserver/Reusable/fence-general23/vinyl4.jpeg');  
      }    
      95%{
        background-image:url('/imageserver/Reusable/fence-general23/vinyl4.jpeg');  
      }    
  }
  @keyframes composite {
    0%,100%{
        background-image:url('/imageserver/Reusable/fence-general23/composite1.jpg');    
      }
      20%{
        background-image:url('/imageserver/Reusable/fence-general23/composite1.jpg');    
      }
      25%{
        background-image:url('/imageserver/Reusable/fence-general23/composite2.jpeg');
      }
      45%{
        background-image:url('/imageserver/Reusable/fence-general23/composite2.jpeg');  
      }
      50%{
        background-image:url('/imageserver/Reusable/fence-general23/composite3.jpg');
      }
      70%{
        background-image:url('/imageserver/Reusable/fence-general23/composite3.jpg');  
      }
      75%{
        background-image:url('/imageserver/Reusable/fence-general23/composite4.png');  
      }    
      95%{
        background-image:url('/imageserver/Reusable/fence-general23/composite4.png');  
      }    
  }
  @keyframes iron {
    0%,100%{
        background-image:url('/imageserver/Reusable/fence-general23/iron1.jpeg');    
      }
      20%{
        background-image:url('/imageserver/Reusable/fence-general23/iron1.jpeg');    
      }
      25%{
        background-image:url('/imageserver/Reusable/fence-general23/iron2.png');
      }
      45%{
        background-image:url('/imageserver/Reusable/fence-general23/iron2.png');  
      }
      50%{
        background-image:url('/imageserver/Reusable/fence-general23/iron3.jpeg');
      }
      70%{
        background-image:url('/imageserver/Reusable/fence-general23/iron3.jpeg');  
      }
      75%{
        background-image:url('/imageserver/Reusable/fence-general23/iron4.jpg');  
      }    
      95%{
        background-image:url('/imageserver/Reusable/fence-general23/iron4.jpg');  
      }    
  }
  @keyframes chain {
    0%,100%{
        background-image:url('/imageserver/Reusable/fence-general23/chain1-min.jpg');    
      }
      20%{
        background-image:url('/imageserver/Reusable/fence-general23/chain1-min.jpg');    
      }
      25%{
        background-image:url('/imageserver/Reusable/fence-general23/chain2.jpg');
      }
      45%{
        background-image:url('/imageserver/Reusable/fence-general23/chain2.jpg');  
      }
      50%{
        background-image:url('/imageserver/Reusable/fence-general23/chain3.jpeg');
      }
      70%{
        background-image:url('/imageserver/Reusable/fence-general23/chain3.jpeg');  
      }
      75%{
        background-image:url('/imageserver/Reusable/fence-general23/chain4.jpeg');  
      }    
      95%{
        background-image:url('/imageserver/Reusable/fence-general23/chain4.jpeg');  
      }    
  }


#section4{
  background: linear-gradient(rgba(0,0,0,0.6)0%, rgba(0,0,0,0.6)100%), url('/imageserver/Reusable/fence-general23/fence-footer-min.jpeg');
  background-repeat: no-repeat;
  background-size:cover;
}
#sec4-wrapper{
  padding: 5%;
  color:#ececec;
  text-align:center;
  display:grid;
  grid-template-columns: .25fr 1fr .25fr;
}
#shrubL{
  grid-column:1/2;
  grid-row:1/2;
  max-width:300px;
  place-self:center;
}
#sec4-wrapper h3{
  grid-column:2/3;
  grid-row:1/2;
  align-self:center;
}
#shrubR{
  grid-column:3/4;
  grid-row:1/2;
  max-width:300px;
  place-self:center;
}
.show-element{
  opacity:1;
  transform:translateY(0);
}
/* ============= Media Queries =============== */
@media screen and (max-width:1300px) {
  #sec2-text-top{
      align-self:center;
      margin:0 0 0 20px;
  }
  #sec2-text-btm{
      align-self:center;
      margin:0 20px 0 0;
  }
}
@media screen and (max-width:1100px) {
  #sec3-wrapper{
      grid-template-rows: 1fr 1fr;
      grid-template-columns: 1fr;
  }
  .cb-slideshow,
  .cb-slideshow:after {
      margin-top:75px;
  }
  #sec3-grid-left{
      grid-row:2/3;
      order:2;
      margin:50px 0 0;
  }
  #sec3-grid-right{
      grid-row:1/2;
      order:1;
  }
}
@media screen and (max-width:992px) {
  #hero-name {
      justify-self: center;
  }
  #hero-name h1{
      font-size:1.5rem;
  }
 .cta{
  padding:12px 14px;
  font-size:.8rem;
 }
  #bottom-display{
      display:none;
  }
  
  #sec2-text-top{
      width:100%;
      max-width:100%;
      margin:0 auto 10px;
      grid-row:2/3;
  }
  #sec2-text-btm{
      max-width:100%;
      width:100%;
      grid-row:3/4;
      margin:10px auto 0;
  }
}
@media screen and (max-width:768px) {
  .hero-wrapper{
      padding:0;
      text-align: center;
  }
}
@media screen and (max-width:600px) {
  .sec1-wrapper{
      padding:0 10px;
      max-width:95vw;
  }
  .comparison{
    display:none;
  }
  #left-list{
      display:block;
  }
  #hero-name{
      text-align: center;
  }
  #hero-name p{
      display: none;
  }
}