@font-face {
    font-family: 'myFont';
    src: url('images/Font.ttf')
}

/* @font-face {
    font-family: 'myFont2';
    src: url('images/light.ttf')
}

@font-face {
    font-family: 'myFont3';
    src: url('images/regular.ttf')
} */

*{
    box-sizing: border-box;
}

body{
    color:#283891;
    font-family: myFont;
    margin:0px;   
}

header{
    position:fixed;
    top:0px;
    width:100%;
    height:100px;
    z-index: 3000;
    text-align:right;
    font-family:myFont;
    /* background-color:#0388cf; */
    background: -moz-linear-gradient(left,  rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.75) 1%, rgba(255,255,255,0.5) 20%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0.75) 0%,rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.5) 20%,rgba(255,255,255,0) 100%); 
    background: linear-gradient(to right,  rgba(255,255,255,0.75) 0%,rgba(255,255,255,0.75) 1%,rgba(255,255,255,0.5) 20%,rgba(255,255,255,0) 100%); 
    /* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfffffff', endColorstr='#00ffffff',GradientType=1 );  */
}


header ol{
    padding:0px;
    margin:0px;
}

header ol li {
    list-style-type: none;
    
}

.liNav {
    list-style-type: none;
    display:inline-block;
    width:10%;
    margin:0px 15px;
    font-size:15px;
    color:#283878;
    letter-spacing:2px;
    font-weight:bold;
    text-align:center;
    height:100px;
    position:relative;
    cursor:pointer;
    padding-top:30px;
}

/* .liNav{
    position: absolute;
    top:50%;
    left:50%;
    width:100%;
    transform:translate(-50%,-50%);
} */

/* header ol li:hover{
    height:100px;
    border-bottom:1px solid #283878;
} */

header a{
    text-decoration: none;
    color:#283878;
}

#theImgDiv{
    position:fixed; 
    top:0px;
    left:7%;
    padding:10px 40px 15px 40px;
    z-index:4000;
    border-radius:50px;
}

#theImgDiv img{
    height:100%;
}

#main{
    background-image: url('images/iStock2.jpg');
    background-size:cover;
    
    background-repeat:no-repeat;
    height:100vh;
    text-align:center;
    /* position:relative;
    top:75px; */
}

#mainMotto{
    position:absolute;
    top:261px;
    left:175px;
    transform:translateY(-50%);
    width:25%;
    height:325px;
    background-color:rgba(40,55,145,.6);
    padding:20px;
    color:white;
    font-family: myFont;
    font-weight:bold;
    text-align:left;
    text-shadow: 2px 2px 1px #283878;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

#motto1 h3{
    margin:0px;
    font-size:35px;
    letter-spacing:3px;
}

#motto2 h3{
    word-spacing: 5px;
}

#motto3 h3{
    margin:0px;
    font-size:20px;
    letter-spacing:3px;
}

#mainMotto .letterSpace{
    letter-spacing: 5px;
}

#motto2 h4{
    margin:0px;
    font-size:30px;
    letter-spacing:3px;
}

#motto1, #motto2{
    position:absolute;
    top:30px;
    left:15px;
    height:150px;
}

#motto2,#mottoState1,#mottoState2,#mottoState3{
    display:none;
}

#motto3{
    position:relative;
    top:175px;
}

#motto3 hr{
    width:30%;
    margin-left:0px;
    height:4px;
    background-color:white;

}

#learnButton{
    margin-top:20px;
    /* margin-left:5px; */
    position:relative;
    background-color:white;
    color:black;
    width:50%;
    border-radius: 50px;
    height:40px;
    padding:13px;
    text-align: center;
    cursor: pointer;
    text-shadow: none;
    letter-spacing:2px;
    font-size:10px;
}

#learnButton:hover{
    background-color:#47BED7 !important;
    color:#283878 !important;
}

#welcomeDiv{
    width:75%;
    margin:0px auto;
    padding:100px 0px;
    font-size:25px;
    line-height: 35px;
    font-family: myFont;
}

/* #welcomeDiv h3{
    display:inline;
    font-size: 20px;
} */

#welcomeDiv p{
    padding:0px 10px;
}

/* #welcomeImg{
    width:50%;
    float:right;
} */


#testimonialDiv{
    /* background-color:#47bfd6; */
    background-image:url('images/bluebg.png');
    background-repeat: no-repeat;
    background-size: cover;
    padding:50px 0px 10px 0px;
    color:white;
}

#testimonialInner{
    width:100%;
    margin:0px auto;
    font-size:25px;
}

#testimonialInner h1{
    letter-spacing: 2px;
    text-align: center;
    margin:0px;
}

#testimonialInner h5{
    text-align:right;
    margin:0px;
    font-size:15px;
}

.carousel-item {
    height:300px
}

.carThin {
    width: 75%;
    margin:0px auto;
}

#two{
    background-color:#F1F1F1;
    padding:100px 0px;
    font-size:25px;
}

#twoInner{
    width:75%;
    margin:0px auto;
}

#twoInner img{
    width:45%;
    float:left;
}

#twoInner ol{
    padding:0px;
    
}

#twoInner li{
    list-style-type: none;
    padding-left:50px;
}

#clientsDiv{
    padding:50px 0px;
    text-align: center;
}

.clientGroup{
    display:inline-block;
    padding:20px;
}

.clientGroup h2, .clientGroup h3{
    margin:0px;
}

#weDo{
    padding:25px 0px 50px 0px;
    background-color:#283891;
    color:white;
    font-size:25px;
    max-width:100vw;
    overflow-x: hidden;
    
}

#weDo h2 {
    text-align: center;
    font-size:40px;
    margin:5px;
}

#belt{
    position:relative;
    width:525px;
}

#instafeed, #instafeed2{
    display:inline-block;
}

.wordSpace {
    padding:0px 20px;
}

.tech-slideshow {
    height: 200px;
    width: 100vw;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    transform: translate3d(0, 0, 0);
  }
  
  .tech-slideshow > div {
    height: 200px;
    width:1026px;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    transform: translate3d(0, 0, 0);
  }
  .tech-slideshow .mover-1 {
    animation: moveSlideshow 22s linear infinite;
  }
  /* .tech-slideshow .mover-2 {
    opacity: 0;
    transition: opacity 0.5s ease-out;
    background-position: 0 -200px;
    animation: moveSlideshow 45s linear infinite;
  } */
  /* .tech-slideshow:hover .mover-2 {
    opacity: 1;
  } */
  
  @keyframes moveSlideshow {
    100% { 
      transform: translateX(-66.6666%);  
    }
  }

.surfaceOpaque{
    position:absolute;
    top:0px;
    left:0px;
    height:150px;
    width:100%;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2943ac+0,1e5799+80&1+0,1+40,0.8+50,0.6+60,0.5+70,0.5+100 */
background: -moz-linear-gradient(left,  rgba(41,67,172,1) 0%, rgba(36,77,163,1) 40%, rgba(35,80,161,0.8) 50%, rgba(33,82,158,0.6) 60%, rgba(32,85,156,0.5) 70%, rgba(30,87,153,0.5) 80%, rgba(30,87,153,0.5) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(41,67,172,1) 0%,rgba(36,77,163,1) 40%,rgba(35,80,161,0.8) 50%,rgba(33,82,158,0.6) 60%,rgba(32,85,156,0.5) 70%,rgba(30,87,153,0.5) 80%,rgba(30,87,153,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(41,67,172,1) 0%,rgba(36,77,163,1) 40%,rgba(35,80,161,0.8) 50%,rgba(33,82,158,0.6) 60%,rgba(32,85,156,0.5) 70%,rgba(30,87,153,0.5) 80%,rgba(30,87,153,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2943ac', endColorstr='#801e5799',GradientType=1 ); /* IE6-9 */

    /* opacity:.7; */
    z-index:4;
}

#siding{
    background-image:url('images/sidingTN.png');
}

#sidewalks{
    background-image:url('images/sidewalkTN.png');
}

#cement{
    background-image:url('images/cementTN.png');
}

#stucco{
    background-image:url('images/stuccoTN.png');
}

#bricks{
    background-image:url('images/bricksTN.png');
}

#sayingSection{
    padding:50px 0px;
    background-color:pink;
    text-align: center;
}


footer{
    background-color:#283891;
    color:white;
}

#footerDiv{
    width:75%;
    height:300px;
    margin:0px auto;
    padding:30px 10px;
}

#rightFooter{
    float:right;
    width: 60%;
}

#leftFooter{
    float:left;
    width:35%;
}

#leftFooter h4{
    margin:0px;
}

#footerServiceRight, #footerServiceLeft{
    float:left;
    width:45%;
}

#rightFooter h4{
    margin:0px;
}

#rightFooter ol li{
    list-style-type: none;
}

#rightFooter ol{
    margin:0px;
    padding:5px;
}

footer h5{
    padding:5px 0px;
    margin:0px;
    /* border-top:1px solid lightgray; */
    text-align: center;
    background-color:#283878;
}
