.maincontent{
max-width:100%;
}
html,
body{
  font-size:18px;
  /* background-color:#FBFBFB; */
}
h1{
  font-size: calc( 2vw + 1.5rem);
  font-family: antique-olive-nord,sans-serif;
font-weight: 400;
font-style: normal;
color:#c59a37;;
}
h2{
  font-size: calc( 1vw + 1.5rem);
  font-family: antique-olive-nord,sans-serif;
  font-weight: 300;
  font-style: normal;
  color:#c59a37;
}
h3{
  font-size: calc( .8vw + 1rem);
  font-family: antique-olive-nord,sans-serif;
  font-weight:300;
  /* color:#ececec; */
}
h4{
  font-size:1.2rem;
  font-family: lithos-pro,sans-serif;
font-weight: 400;
font-style: normal;
/* color:#ececec; */

}
h5{
  font-size:1rem;
  font-family: lithos-pro,sans-serif;
font-weight: 400;
font-style: normal;
/* color:#ececec; */

}
p{
  font-size:1rem;
  font-family: utile,sans-serif;
font-weight: 400;
font-style: normal;
/* color:#ececec; */

}

.hero-container{
    position: relative;
    max-height:800px;
    overflow:hidden;
    margin:0;
}
.hero-logo{
    position: absolute;
    max-width:700px;
    top:5%;
    left:5%;
}

.hvr-float-shadow {
  
  /* -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0); */
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  position: relative;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  min-height:122px;
}
.hvr-float-shadow:before {
  pointer-events: none;
  position: absolute;
  z-index: 1;
  content: '';
  top: 100%;
  left: 5%;
  height: 10px;
  width: 90%;
  opacity: 1;
  background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
  /* W3C */
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform, opacity;
  transition-property: transform, opacity;
}
.hvr-float-shadow:hover, .hvr-float-shadow:focus, .hvr-float-shadow:active {
  -webkit-transform: translateY(-5px);
  transform: translateY(-5px);
  
  /* move the element up by 5px */
}
.hvr-float-shadow:hover:before, .hvr-float-shadow:focus:before, .hvr-float-shadow:active:before {
  opacity: .5;
  -webkit-transform: translateY(5px);
  transform: translateY(5px);
  /* move the element down by 5px (it will stay in place because it's attached to the element that also moves up 5px) */
}

.wind{
    position:relative;
  }

  #wind-bg{
  background-image:linear-gradient(to top,rgba(0,0,0,.1) 0%,rgba(0,0,0,.4) 100%);
  background-attachment: fixed;
  background-size: cover;
  max-height:700px;
  overflow:hidden;
}
#wind-img{
    float:left;
    max-width:100px;
    padding-right:10px;
}
.wind-tagline{
  position:absolute;
  font-size: calc( 1.6vw + 1rem);
  bottom:-15%;
  right:2%;
  max-width:60vw;  
  text-align:right; 
  color:#c59a37;
  text-transform: uppercase;
  background:#ececec;
  padding:5% 2%;
  margin:0;
  box-shadow: 9px 9px 24px -9px rgba(0,0,0,0.2);
-webkit-box-shadow: 9px 9px 24px -9px rgba(0,0,0,0.2);
-moz-box-shadow: 9px 9px 24px -9px rgba(0,0,0,0.2);
}
.wind-box{
  position: absolute;
  top:10%;
  left:10%;
  color:#fff;
  max-width:40vw;
}
#wind-heading{
  font-size: calc( .8vw + 1rem);
font-family: antique-olive-nord,sans-serif;
}
#wind-sub-heading{
clear:left;
padding-top:20px;
}
.innovation{
    position: relative;
    padding:8%;
    background:#FBFBFB;
}
.innovation-tagline{
    position:absolute;
    font-size: calc( 1.6vw + 1rem);
    top:-25%;
    right:2%;
    max-width:60vw;  
    text-align:right; 
    color:#c59a37;
    text-transform: uppercase;
    box-shadow: 9px 9px 24px -9px rgba(0,0,0,0.2);
-webkit-box-shadow: 9px 9px 24px -9px rgba(0,0,0,0.2);
-moz-box-shadow: 9px 9px 24px -9px rgba(0,0,0,0.2);
    background:#ececec;
    padding:5% 2%;
    margin:0;
}
.innovation-item{
    margin:5% auto;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    
}
.innovation-item p{
  font-family: lithos-pro,sans-serif;
font-weight: 400;
font-style: normal;
padding:2%;
transition:.3s;
}
.shingle{
    margin:20px 0;
    border: 12px ridge #e5e1d9;
  }
  
  
  .portfolio-sec .col .sub-title { 
    color: #ececec; 
    display: block; 
    letter-spacing: 4px; 
    font-size:calc(1vw + .4rem);
    margin: 0; 
  }

  .portfolio-sec .col h3 { 
    color:#c59a37;
  }

.proline-detail-container{
    background-image:linear-gradient(to bottom,rgba(245,245,245,.8) 0%,rgba(245,245,245,.4) 100%),url('/imageserver/Reusable/tamko2021/StormFighter-IR---Fractal-Background.jpg');
    background-size:100%;
    background-position: center bottom;
    padding: 5%;
}
.detail-heading{
    max-width:75vw;
    margin:0 auto;
}

#second-heading-mid{
  margin:0;
  text-align:center;
  color:white;
  padding:25px 22% 25px;
}
#second-heading-btm{
  text-align: center;
}
#second-heading-img{
  margin:0 auto;
  width:100%;
  max-width:600px;
}

#third-heading-mid{
  color:#ececec;
}
#works{
  padding-top:15%;
  /* max-height:80vh; */
}

.portfolio-sec .over h4 {
    padding:12px 0;
}

.shingle-house:hover{
    transform:scale(1.5);
    box-shadow: 0px 1px 24px -1px rgba(0,0,0,0.56);
-webkit-box-shadow: 0px 1px 24px -1px rgba(0,0,0,0.56);
-moz-box-shadow: 0px 1px 24px -1px rgba(0,0,0,0.56);
    transition:.5s;
    z-index:3;
}
.shingle-house{
    transform:scale(1);
    transition:.5s;
    margin-bottom:10px;
}

#wrapper { position: relative; overflow: hidden; width: 100%; }

img { width: 100%;  }

.overlay { z-index: 1; position: relative; }

.bg-full { background-size: cover; background-position: center; background-repeat: no-repeat; }

.bg-dark { background:#333333;}

#header { position: relative; z-index: 2; }


.btn { 
  background:transparent;  
  font-size:calc(.4vw + .5rem);
  color:#c59a37;
  font-weight: 500; 
  border:2px solid #c59a37;  
  padding: 12px 10px 14px; 
  margin: 10px auto; 
  border-radius: 0; 
  text-transform: uppercase; 
  text-align: center; 
  letter-spacing: 2px; 
  word-spacing: -1px; 
  -webkit-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; -webkit-transition: all 0.25s linear; 
}

.btn:hover {background:#c59a37; border:1px solid #D1C130; color: #fff; }


#about .main-header {padding:100px 0;background-image:url('/imageserver/Reusable/tamko2021/titan-shingle-bg.jpg');
  background-position: center;
  background-attachment: fixed;
  background-size:cover; }

#about hr{
    border-top:2px solid #c59a37;
    max-width:60%;
    /* margin:0 auto; */
}

#about h4{
  color:#ececec;
}
#about p{
    color:#ececec;
    text-align:center;
    margin:0 auto;
    max-width:80vw;
    letter-spacing:1.7px;
}
#about h2{
    /* color:white; */
    text-align:center;
    margin:0 auto;
    max-width:1000px;
    /* letter-spacing:1.7px; */
}
.bottom-sec .main-header{
    background-image:linear-gradient(180deg,rgba(51,51,51,.7) 0%,rgba(51,51,51,.9) 100%),url('/imageserver/Reusable/tamko2021/heading-bg.png');
    background-position: center;
    background-size:cover; 
    padding: 30px 30px; 
}
.bottom-wrapper{
  max-width:85vw;
  margin:0 auto;
}

  .main-holder .col { float: left; width: 50%; }

.main-holder .col.tab-content { max-height: 500px; }

.main-holder .col.col3 { min-height: 563px; }

.main-holder .col.col4 { float: right; padding: 75px 80px; }

.main-holder .tabset .title {  line-height: 21px; color: #2b2b2b; font-weight: 700; display: block; letter-spacing: 2px; word-spacing: -2px; text-transform: uppercase; -o-transition: all 0.25s linear; transition: all 0.25s linear; -webkit-transition: all 0.25s linear; }

.feature-sec .tab-content { overflow: hidden; padding-top: 69px; }

.portfolio-sec {background:#fafafa;  padding: 0;width:100vw;margin:0 auto; }

.portfolio-container{width:90vw; margin:0 auto 5%;display:flex; justify-content:space-around;flex-wrap:wrap;}

.portfolio-sec .coll1 { width: 25%; }

.portfolio-sec .coll2 { width: 50%; }

.portfolio-sec .coll3 { width: 30%; }

.portfolio-sec .coll4 { width: 25%; max-width:400px;margin:0 10px; }

.portfolio-sec .col .heading { margin: 0 10px ; padding: 10px  ; letter-spacing: 1px;  }

.portfolio-sec .col .heading:before { z-index: 0; }

.portfolio-sec .col .sub-title { color: #fff; display: block; letter-spacing: 4px; margin: 0; }

.portfolio-sec .col { float: left; position: relative; }

.portfolio-sec .col:hover .box, .portfolio-sec .col:hover .over { opacity: 1; visibility: visible; }

.portfolio-sec .col:hover .over { left: 1.5vw; right: 1.5vw;  top: 1.5vw;  bottom: 1.5vw;  padding:0 10px ; display:flex; justify-content:space-around; align-items:center; flex-direction: column;}

.portfolio-sec .col .box { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; -o-transition: all 0.25s linear; transition: all 0.25s linear; background: rgba(0, 0, 0, 0.85); -webkit-transition: all 0.25s linear; }

.portfolio-sec .col .over { padding:0 8px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border: 1px solid #fff; padding: 0; opacity: 0; visibility: hidden; -o-transition: all 0.25s linear; transition: all 0.25s linear; -webkit-transition: all 0.25s linear; }

/* ------------------------- Media Queries -------------------- */

@media (max-width: 1299px) {
  .portfolio-sec { 
    width:100vw;
  }
  .hero-container{
    max-height:700px;   
}

  #portfolio-container{
    width:100vw;
  }

  .portfolio-sec .coll3{
    width:50%;
  }
}
  @media (max-width: 1200px) {
    .main-header{
      padding:40px 20px;
    }
    .wind-tagline{
        max-width:100vw;
        right:0;
        text-align:center;
        position:relative;
        margin:-200px auto 0;
    }
    
    #main-heading-btm{
      margin:0 0 0 250px;
    }
    #main-heading-mid{
      margin-left:150px;
      color:#ececec;
      width:100%;
    }
    .hero-logo{
        max-width:500px;
    }
  }
  
  @media (max-width: 992px) {
    html{
      font-size:16px;
    }
    .hero-container{
        max-height:500px;   
    }
    .innovation-tagline{
        top:-15%;
        right:0;
        max-width:900px;  
        text-align:center; 
    }
    .hero-logo{
        max-width:400px;
        top:5%;
        left:5%;
    }
    .wind-box{
        height:300px;
        max-width:80vw;
    }
    #wind-sub-heading{
        clear:none;
    }
    .wind-tagline{
      right:0;
    }
    .shingle .heading {
      margin: 0 10px;
      padding: 10px;
      letter-spacing: 1px;
      font-size: calc(1vw + .5rem);
      color: #c59a37;  }
    .main-holder .col { 
        float: none; 
        width: 100%; 
      }
    .portfolio-sec .coll4 { 
        width: 33%; 
        margin:0 10px;
    }
    #portfolio-container{
      display:block; 
    }
  }
  @media (max-width: 768px) {
      .innovation{
          padding:0 4%;
      }
      .innovation-item{
        justify-content:center;
        flex-direction:column;   
    }
    .innovation-tagline{
        position:relative;
        margin:-30px 0 0;
    }
    .wind-tagline{
      margin:-40px 0 0 0;
    }
    .hello{
      margin-left:20px;
      text-align: center;
    }
    #main-heading-btm{
      margin:0 0 0 300px;
      text-align: center;
    }
    #main-heading-mid{
      margin-left:110px;
      text-align:center;
    }
  }

  @media (max-width: 668px) {
    html,
    body{
      font-size:14px;
    }
    .shingle .heading {     
      font-size: 5vw;
    }
  .portfolio-sec .col .sub-title { 
    color: #fff; 
    display: block; 
    letter-spacing: 4px; 
    font-size:calc(1.5vw + 1rem);
    margin: 0; 
  }
    .titan-colors{
      text-align:center;
    }
    .hero-logo{
        max-width:300px;
    }
    .btn { 
      font-weight: 700; 
      padding: 12px 10px 14px; 
    }
    .main-holder .col { 
        float: none; 
        width: 100%; 
      }
    .portfolio-sec .coll4 { 
        width: 100%; 
        margin:0 10px;
    }
    #portfolio-container{
      display:block; 
    }
    .design{ 
      display:none;
    }
  }

  @media (max-width: 550px) {
    .wind-tagline{
      margin:0;
    }
    .detail-heading{
      display:none;
    }
  }
  
  @media (max-width: 450px) {
    .wind-box p{
      display:none;
    }
    .wind-tagline{
      margin:0;
    }
    
  }
  @media (max-width: 400px) {
    .portfolio-sec .coll4 { width: 100%; max-width:300px;margin:0 10px; }
    .hero-logo{
      max-width:150px;
    }
   
    .wind-tagline{
      margin:0 0;
    }
    .wind{
      position:relative;
      background:linear-gradient(to bottom,rgba(0,0,0,.8) 0%,rgba(0,0,0,.8) 100%);
  }
  }
  @media (max-width: 350px) {
    #wind-bg{
      height:calc(200px + 30vw);
    }
  }
  @media (max-width: 300px) {
    .portfolio-sec .coll4 { width: 100%; max-width:250px;margin:0 10px; }
  }