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

.panel {
  width: 100%;
  
  align-items: center;
  box-sizing: border-box;
  will-change: transform;
}

#container {
  width: 100%;
  height: 100%;
 
  left: 0;
  
}
.title{
  color:#fff;
  font-size: 2rem;
  display: block;
  font-weight: 700;
  font-family: 'Cinzel Decorative', cursive;
}
.title-dark{
  color:#000;
  font-size: 2rem;
  display: block;
  font-weight: 700;
  font-family: 'Cinzel Decorative', cursive;
}
.title{
  color:#fff;
  font-size: 2rem;
  display: block;
  font-weight: 700;
  font-family: 'Cinzel Decorative', cursive;
}
span[class*="fade-in"]{
  visibility: hidden;
  font-size:2rem;
}
/* .cta-btn{
  margin-bottom:20px;
  display:inline-block;
} */
.beach-fade-in{
  visibility: hidden;
}
#hero {
  display: grid;
  z-index: 20;
  /* height:100vh; */
}
.hero-bg{
  position: relative;
}
.hero-bg::after{
  content:"";
  position: absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
  background-image: linear-gradient(to bottom,rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 1) 100%);
  background-size:cover;
  z-index:10;
}
#hero-content {
  grid-column: 1/3;
  grid-row: 1/2;
  color: #485865;
  text-align: center;
  align-self: center;
  z-index: 20;
  justify-self: center;
  display: grid;
  position: absolute;
  padding: 2% 4%;
  border: 2px solid #000;
  background-image: linear-gradient(rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
}
#tando-logo{
  max-width: 40vw;
  padding: 10px;
  justify-self: center;
}
#hero-logos {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

#hero-logos img {
  max-width: 20vw;
  padding: 10px;
}

.main-header{
  text-align:center;
  padding:5% 0;
}
.main-header-flex-group{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
}
.main-header-item{
  max-width:400px;
}
.main-header-item img{
  max-width:150px;
  margin:15px 0;
}
.section1 {
  position: relative;
  background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%),url('/imageserver/Reusable/tando22/stone-main.png') ,url('/imageserver/Reusable/tando22/sunshine-min.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  min-height:70vh;
  display:grid;
  align-items: center;
}

.sec1-container {
  min-height:70vh;
  display:grid;
  overflow:hidden;
}

#stone-house{
  grid-row:1/2;
  grid-column:1/2;
}
#stone-content{
  grid-row:1/2;
  grid-column:1/2;
  align-self: center;
  color:#fff;
  background-color:rgba(0,0,0,0.5);
  max-width:60%;
  padding:2% 5%;
  visibility:hidden;
}
#sec2-container {
  max-width: 1700px;
  margin: 0 auto;
}

.content {
  position: relative;
  z-index: 5;
  max-width: 900px;
}
.description{
  margin-top:50px;
  font-weight:700;
}



/* ===================== Stone Card ============== */

.card-header{
  max-width:1200px;
  margin:50px auto;
  text-align: center;
}
.column-text span{
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  display: block;
  font-size: 2vw;
  font-weight: 900;
  margin-top:15px;
}
span.ledgestone {
  background-image: url('/imageserver/Reusable/tando22/ledgestone-min.png');
}

span.stacked {
  background-image: url('/imageserver/Reusable/tando22/stacked-stone-min.png');
}

.product {
  padding: 20px;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.column {
  flex: 50%;
  text-align: center;
  width:50%;
}

.column-text {
  padding: 0 20px;
  background:#fff;
  display:grid;
}

.card-box {
  position: relative;
  overflow:hidden;
  max-width:800px;
  min-height:350px;
  -webkit-box-shadow: 2px 5px 15px 1px rgba(0, 0, 0, 0.41);
  box-shadow: 2px 5px 15px 1px rgba(0, 0, 0, 0.41);
}

#stacked{
  background-image:url('/imageserver/Reusable/tando22/glacier-bay.png');
  background-repeat: no-repeat;
  background-size: cover;
}
#ledgestone{
  background-image:url('/imageserver/Reusable/tando22/nordic-mist.png');
  background-repeat: no-repeat;
  background-size: cover;
}

.card-box p {
  position: relative;
}

.product-desktop {
  padding: 0 40px;
}

.product-mobile {
  display: none;
}
.modal-backdrop.in {
  display:none;
}
.flex-container{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
}

.flex-item{
  max-width:400px;
}
.modal-dialog{
  width:60%!important;
  text-align: center;
}
/* ============== Section 4 =================== */
.section4{
  background-image:
  linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,.5) 10%, rgba(255,255,255,0.1) 50%,rgba(255,255,255,.5) 90%,  rgba(255,255,255,1) 100%), 
  linear-gradient(to right,  rgba(255,255,255,0.6) 50%,  rgba(255,255,255,0) 80%),
  url('/imageserver/Reusable/tando22/beach-house2-min.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  display:grid;
  align-items: center;
  background-position: right;
  min-height:80vh;
}
.sec4-container{
  /* display:grid; */
  max-width:60%;
  padding:2% 2% 2% 5%;
}
.sec4-container p{
  margin:3px 0!important;
  padding:0!important;
}
#first{
  max-width:400px;
}

/* ===================== Section 4-Product =================== */

.beach-product-header{
  text-align:center;
  max-width:1200px;
  margin:0 auto 30px;
}
.beach-product-group{
  display:grid;
  grid-template-columns:1fr;
  gap:50px;
  justify-content:center;
  padding:0 3%;
}
.beach-product {
  display: grid;
  grid-template-columns: 350px .5fr .5fr 350px;
  margin: 0 auto 0;
  position: relative;
}
.beach-product::after{
  content:"";
  position: absolute;
  height:0;
  width:100%;
  background-color: rgba(255, 255, 255, 0.6);
  z-index:10;
}
.beach-product-bg{
  visibility:hidden;
}
.beach-image-desktop{
  justify-self: flex-start;
  max-width:500px;
  grid-column:1/3;
  grid-row:1/2;
}
.beach-product-content {
  grid-column: 2/5;
  grid-row: 1/2;
  max-width: 90%;
  padding-top: 5%;
  color:#222;
  z-index:20;
}

.beach-image-mobile{
  grid-row:2/3;
  align-self:flex-end;
  grid-column: 1/5!important;
  max-width:100%!important;
  opacity:0;
  display:none;
}
#sandcastle{
  grid-row:1/2;
  /* background-image: linear-gradient(to bottom, rgba(255,255,255,.8) 0%,  rgba(255,255,255,.8) 100%), url('/imageserver/Reusable/tando22/sandcastle-bg-min.jpg');
  background-size: cover;
  background-repeat: no-repeat; */
}
#sandcastle-bg{
  position: absolute;
  height:100%;
  width:100%;
  background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/tando22/sandcastle-bg-min.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  z-index:-1;
}
#hatteras{
  grid-row:3/4;
  
}
#hatteras-bg{
  position: absolute;
  height:100%;
  width:100%;
  background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/tando22/hateras-bg-min.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  z-index:-1;
}
#atlantica{
  grid-row:2/3;
}
#atlantica-bg{
  position: absolute;
  height:100%;
  width:100%;
  background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/tando22/atlantica-bg-min.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  z-index:-1;
}
#atlantica img{
  grid-column:3/5;
  justify-self: flex-end;
}
#atlantica .beach-product-content{
  justify-self: flex-end;
  grid-column:1/4;
  text-align:right;
}
#pacifica{
  grid-row:4/5;
}
#pacifica-bg{
  position: absolute;
  height:100%;
  width:100%;
  background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.6) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/tando22/pacifica-bg-min.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  z-index:-1;
}
#pacifica img{
  grid-column:3/5;
  justify-self: flex-end;
}
#pacifica .beach-product-content{
  justify-self: flex-end;
  grid-column:1/4;
  text-align:right;
}


/* ============== Shake ================= */
.shake{
  background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.2) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/tando22/sunshine-min.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  margin-top:50px;
 
}
.shake-container{
  display:grid;
  align-items: center;
}
.shake::after{
  content:"";
  position: absolute;
  height:100%;
  width:100%;
  top:0;
  left:0;
  background-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%,  rgba(255,255,255,1) 100%);
}
#shake-house{
  max-height:100vh;
  overflow:hidden;
  grid-column:1/2;
  grid-row:1/2;
}
.shake-content{
  grid-column:1/2;
  grid-row:1/2;
  color:#fff;
  background-color:rgba(0,0,0,0.5);
  max-width:60%;
  padding:2% 5%;
  position: absolute;
  visibility:hidden;
  justify-self: flex-end;
}
.section6 {
  color:#fff;
  background-color:rgba(0,0,0,0.5);
  max-width:60%;
  padding:2% 5%;
  position: absolute;
  visibility:hidden;
}

#sec6-container {
  max-width: 1700px;
  margin: 0 auto;
}

#shake-description{
  margin-top:50px;
  font-weight:700;
}
.shake-flex-container{
  display:flex;
  flex-direction: row;
  flex-wrap:wrap;
  justify-content: space-evenly;
  text-align: center;
}

.flex-item{
  max-width:400px;
}
span.cedar{
  background-image: url('/imageserver/Reusable/tando22/cedar.png');
}

span.rustic {
  background-image: url('/imageserver/Reusable/tando22/cedar9.png');
}
span.capecod {
  background-image: url('/imageserver/Reusable/tando22/capecod.png');
}

span.handsplit {
  background-image: url('/imageserver/Reusable/tando22/handsplit.png');
}
#cedar{
  background-image:url('/imageserver/Reusable/tando22/cedar.png');
  background-repeat: no-repeat;
  background-size: cover;
}
#handsplit{
  background-image:url('/imageserver/Reusable/tando22/handsplit.png');
  background-repeat: no-repeat;
  background-size: cover;
}
#capecod{
  background-image:url('/imageserver/Reusable/tando22/capecod.png');
  background-repeat: no-repeat;
  background-size: cover;
}
#rustic{
  background-image:url('/imageserver/Reusable/tando22/cedar9.png');
  background-repeat: no-repeat;
  background-size: cover;
}

/* ================ Gallery ================= */
.gallery img{
  max-width:330px;

}
.gallery{
  display:flex;
  flex-direction:row;
  justify-content:space-evenly;
  flex-wrap:wrap;
  align-items:center;
  padding:3% 2%;
}
.gallery-item{
  border: 10px ridge #dadfef;
  margin-bottom:15px;
}

/*  ====================== Warranty ================== */
#warranty{
background-image:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 50%,  rgba(255,255,255,1) 100%), url('/imageserver/Reusable/tando22/warranty-min.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top, center;
  position: relative;
}
#warranty-content{
  padding:5%;
}
.pdf-group{
  display:flex;
  flex-direction: row;
  justify-content: space-evenly;
  flex-wrap:wrap;
}
.pdf{
  padding:10px 30px;
}
.pdf-image{
  max-width:20px;
}
#warranty-content .card-header{
  max-width:1500px;
  margin:50px auto;
  text-align: center;
}
/*  =============== Media Queries ================ */

@media only screen and (max-width: 1100px) {
  .sec4-container{
    display:grid;
    max-width:95%;
    padding:2%;
  }
  #hero-content {
    max-width:90%;
  }
  #tando-logo{
    max-width: 250px;
    padding: 10px;
  }
  #hero-logos {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
  }
  #hero-logos img {
    max-width: 150px;
    padding: 10px;
  }
  
  #stone-content{
    grid-row:1/2;
    grid-column:1/2;
    align-self: center;
    color:#fff;
    background-color:rgba(0,0,0,0.5);
    max-width:90%;
    padding:2% 5%;
    position: absolute;
    visibility:hidden;
  }
  .section1 {
    background-position: center;
    text-align:center;
  }
  .column-text span{
    font-size:28px;
  }
  .beach-product-group{
    padding:0;
  }

}

@media only screen and (max-width: 992px) {
  #stone-content{
    grid-row:1/2;
    grid-column:1/2;
    justify-self: center;
    align-self: center;
    color:#fff;
    background-color:rgba(0,0,0,0.5);
    max-width:100%;
    padding:2%;
    visibility:hidden;
  }
  .beach-product {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 auto;
    position: relative;
  }
  .beach-product-content {
    justify-self: center!important;
    grid-column: 1/5!important;
    text-align: center!important;
    z-index:20;
  }
  .beach-image-mobile{
    display: block;
    opacity:1;
    /* padding-top:50px; */
  }
  .beach-image-desktop{
    opacity:0;
    display:none;
  }
  .shake-content{
    max-width: 90%;;
  }
  .shake-fade-in{
    font-size:2rem;
  }
  .stone-fade-in{
    font-size:2rem;
  }
  #stone-content {
    justify-self: center;
    align-self: flex-end;
    text-align: center;
  }
  .shake-content {
    justify-self: center;
    align-self: flex-end;
    text-align: center;
  }
.modal-dialog{
  width:100%!important
}
}
@media only screen and (max-width: 900px) {
  .section1{
    height:50vh;
  }
  .sec1-container {
    height: 50vh;
}
  .section4{
    background-image:
    linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 50%, rgba(255,255,255,1) 100%), 
    url('/imageserver/Reusable/tando22/beach-house2-min.jpg'); 
  }
  .shake-content{
    max-width:90%;
    padding:2%;
    align-self: flex-end;
    z-index:50;
  }
  .shake-fade-in img{
    max-width:300px!important;
  }
  .stone-fade-in img{
    max-width:300px!important;
  }
  span[class*="fade-in"] {
    visibility: hidden;
    font-size: 1.2rem;
}

}
@media only screen and (max-width: 600px) {
  #stone-content{
    max-width:100%;
  }
  body,html{
    font-size:16px;
  }
  .column {
    flex: 100%;
    text-align: center;
    width:100%;
    min-height:150px;
  }
  #stacked{
    background-size: 100%;
  }
  #ledgestone{
    background-size: 100%;
  }
  #hero-content {
    align-self: flex-end;
  }
  #tando-logo{
    max-width: 40vw;
    padding: 0px;
  }
  #hero-content h2{
    font-size:1rem;
    padding:10px 0 8px 0;
    margin:0;
  }
  #hero-logos img {
    max-width: 30vw;
    padding: 5px;
  }
}