@font-face {
	font-family: 'Avenir Next';
	src: url('fonts/AvenirNext-UltraLight.eot');
	src: url('fonts/AvenirNext-UltraLight.eot?#iefix') format('embedded-opentype'),
		url('fonts/AvenirNext-UltraLight.woff') format('woff'),
		url('fonts/AvenirNext-UltraLight.ttf') format('truetype'),
		url('fonts/AvenirNext-UltraLight.svg#AvenirNext-UltraLight') format('svg');
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: 'Avenir Next';
	src: url('fonts/AvenirNext-Regular.eot');
	src: url('fonts/AvenirNext-Regular.eot?#iefix') format('embedded-opentype'),
		url('fonts/AvenirNext-Regular.woff') format('woff'),
		url('fonts/AvenirNext-Regular.ttf') format('truetype'),
		url('fonts/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Avenir Next';
	src: url('fonts/AvenirNext-DemiBold.eot');
	src: url('fonts/AvenirNext-DemiBold.eot?#iefix') format('embedded-opentype'),
		url('fonts/AvenirNext-DemiBold.woff') format('woff'),
		url('fonts/AvenirNext-DemiBold.ttf') format('truetype'),
		url('fonts/AvenirNext-DemiBold.svg#AvenirNext-DemiBold') format('svg');
	font-weight: 500;
	font-style: normal;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    background: #fff;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Avenir Next';
    font-weight: 200;
    text-align: center;
    position: relative;
    overflow: hidden;
}

#fullscreen {
    position: fixed;
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    z-index: 3;
}

#fullscreen h1 {
    max-width: 250px;
}

#bgvid { 
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100vw;
    min-height: 100vh;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-filter: brightness(.6) blur(2px);
    filter: brightness(.6) blur(2px);
}

h1 {
    font-weight: 400;
    font-size: 24pt;
    max-width: 950px;
    margin: 0 auto 20px auto;
}

h2 {
    font-weight: 400;
    font-size: 13pt;
    max-width: 950px;
    margin: 0 auto 20px auto;
}

h3 { 
    font-weight: 400;
    font-size: 10pt;
    margin: 5px;
}

h4 {
    font-weight: 500;
}

a {
    text-decoration: none;
}

.bold {
    font-weight: 600 !important
}

.hide {
    display: none !important;
}

#header {
    width: 100%;
    height: 60px;
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, 0.90);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}

#logo {
    float: left;
    height: 60px;
    width: auto;
    cursor: pointer;
}

#logo img {
    float: left;
    height: 60px;
    width: 60px;
    padding: 13px 15px 15px 15px;
}

.logotxt {
    float: left;
    height: 60px;
    margin: 0;
    padding: 13px 30px 0 30px;
    font-size: 16pt;
    font-family: 'Open Sans';
    font-weight: 300;
    letter-spacing: 1.1px;
    background: rgba(255, 255, 255, .8);
}

.logotxt span {
    font-size: 6pt !important;
    position: relative;
    bottom: 10px;
    padding-left: 1px;
}

h2.logotxt {
    padding: 22px 25px 0 25px;
    font-size: 9pt;
    font-family: 'Avenir Next';
    font-weight: 400;
    text-align: left;
    background: rgba(255, 255, 255, .4);
}

#header nav {
    float: right;
    height: 60px;
    padding-top: 19px;
    font-size: 11pt;
}

#header nav a {
    padding-right: 40px;
    color: black;
    font-weight: 400;
}

#header .active {
    font-weight: 600 !important;
}

section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 9%;
}

#home-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: url("/images/WatertightAppMockup.jpg") center/cover no-repeat scroll;
    -webkit-filter: brightness(.8) blur(1px);
    filter: brightness(.6) blur(1px);
    z-index: 1;
}

#a > div:nth-of-type(1){
    z-index: 2 !important;
}

video {
    display: none;
}

#a > div:nth-child(1) {
    z-index: 1;
}

.scroll, #explore {
    position: absolute;
    bottom: 20px;
    width: 60px;
    left: calc(50% - 30px);
    color: #000;
    -webkit-transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out;
    transition: color 1s ease-in-out;
}

#a, #e, #a a {
    color: white;
}

#a h2, #e h2 {
    margin-bottom: 30px;
}

#a .scroll {
    display: inline-block !important;
}

.button {
    width: 130px;
    height: 30px;
    background: #fff;
    border-radius: 5px;
    font-family: 'Avenir Next';
    font-size: 10pt;
    font-weight: 400;
    color: black !important;
    padding: 10px 20px;
}

#b {
    background: url(images/Polygons.jpg) center/cover no-repeat scroll;
    height: auto !important;
}

#secondary-header {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .5);
    list-style: none;
    padding: 0;
    margin: 0;
    display: block;
    opacity: 1;
    transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
}

#secondary-header a {
    display: inline-block;
    height: 60px;
    width: 6.666%;
    padding-top: 13px;
    font-size: 10px;
    color: #B7B7B7;
    float: left;
}

.goto0 {
    display: none !important;
}

.slide0 #secondary-header .goto0, .slide1 #secondary-header .goto1, .slide2 #secondary-header .goto2, .slide3 #secondary-header .goto3, .slide4 #secondary-header .goto4, .slide5 #secondary-header .goto5, .slide6 #secondary-header .goto6, .slide7 #secondary-header .goto7, .slide8 #secondary-header .goto8, .slide9 #secondary-header .goto9, .slide10 #secondary-header .goto10, .slide11 #secondary-header .goto11, .slide12 #secondary-header .goto12, .slide13 #secondary-header .goto13, .slide14 #secondary-header .goto14, .slide15 #secondary-header .goto15,  .slide-1 #secondary-header .goto15 {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

.slide0 #secondary-header .goto0, .slide1 #secondary-header .goto1 i, .slide2 #secondary-header .goto2 i, .slide3 #secondary-header .goto3 i, .slide4 #secondary-header .goto4 i, .slide5 #secondary-header .goto5 i, .slide6 #secondary-header .goto6 i, .slide7 #secondary-header .goto7 i, .slide8 #secondary-header .goto8 i, .slide9 #secondary-header .goto9 i, .slide10 #secondary-header .goto10 i, .slide11 #secondary-header .goto11 i, .slide12 #secondary-header .goto12 i, .slide13 #secondary-header .goto13 i, .slide14 #secondary-header .goto14 i, .slide15 #secondary-header .goto15 i,  .slide-1 #secondary-header .goto15 i{
    color: #fff;
}

#secondary-header i {
    margin: 0 10px 0 0;
    font-size: 16px;
    color: #B7B7B7;
    position: relative;
    bottom: 5px;
}

#secondary-header span {
    display: inline-block;
    margin-top: 3px;
}

.slide0 #secondary-header {
    opacity: 0;
}

.index > h1 {
    padding-top: 120px;
}

.slide0 #secondary-header > a{
    display: none;
}

.contract-icon-3 {
    height: 15px;
    margin: 3px 10px;
}

#mobile-icon-1 {
    font-size: 21px !important;
    bottom: 3px !important;
}

#b .scroll {
    color: #fff;
}

.slide0 .scroll {
    color: #000 !important;
}

.bg {
    -webkit-transition: background 1s ease-in-out;
    -moz-transition: background 1s ease-in-out;
    transition: background 1s ease-in-out;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.70);
}

.slide1 .bg {
    background: rgba(30, 171, 0, 0.60) !important;
}

.slide2 .bg {
    background: rgba(0, 201, 51, 0.60) !important;
}

.slide3 .bg {
    background: rgba(0, 198, 111, 0.70) !important;
}

.slide4 .bg {
    background: rgba(0, 197, 169, 0.70) !important;
}

.slide5 .bg {
    background: rgba(0, 187, 199, 0.70) !important;
}

.slide6 .bg {
    background: rgba(0, 162, 230, 0.70) !important;
}

.slide7 .bg {
    background: rgba(0, 107, 255, 0.70) !important;
}

.slide8 .bg {
    background: rgba(0, 29, 255, 0.70) !important;
}

.slide9 .bg {
    background: rgba(46, 0, 255, 0.70) !important;
}

.slide10 .bg {
    background: rgba(184, 27, 255, 0.70) !important;
}

.slide11 .bg {
    background: rgba(241, 0, 193, 0.70) !important;
}

.slide12 .bg {
    background: rgba(255, 0, 99, 0.70) !important;
}

.slide13 .bg {
    background: rgba(255, 0, 37, 0.70) !important;
}

.slide14 .bg {
    background: rgba(255, 74, 0, 0.70) !important;
}

.slide15 .bg, .slide-1 .bg {
    background: rgba(255, 139, 0, 0.70) !important;
}

.slide0 .prev, .slide15 .next {
    display: none !important;
}

.details {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.details > div {
    padding-top: 60px;
}

.details i {
    color: #fff;
}

.grid-3, .grid-2, .grid-4 {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

.grid-3 {
    max-width: 800px;
}

.grid-2 {
    max-width: 700px;
}

.grid-3 .feature {
    width: 33.3%;
    padding: 2% 4%;
}

.grid-2 .feature {
    width: 50%;
    padding: 2% 10%;
}

.grid-4 .feature {
    width: 25%;
    padding: 2% 5%;
}

.contract-icon-2 {
    height: 45px;
    margin-bottom: 10px;
}

#percent-icon {
    display: block;
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 12px;
    line-height: .9;
}

#features-grid {
    margin-top: 40px;
    max-width: 1100px;
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}

#features-grid:after, #services-grid:after, #testimonials-grid:after, .testimonial div:after {
    content: '';
    display: table;
    clear: both;
}

.unslider {
    overflow-y: hidden !important;
    -webkit-transition: height .5s ease-in-out;
    -moz-transition: height .5s ease-in-out;
    transition: height .5s ease-in-out;
}

.unslider-arrow {
    top: 50%;
    color: #fff;
    -webkit-transition: color 1s ease-in-out;
    -moz-transition: color 1s ease-in-out;
    transition: color 1s ease-in-out;
}

.slide0 .unslider-arrow {
    color: #000;
}

.feature {
    width: 20%;
    height: auto;
    margin: 0;
    padding: 3% 1%;
}

#features-grid .feature {
    padding: 2% 1%;
    cursor: pointer;
    color: #000;
}

.feature i {
    font-size: 20pt;
    height: 35px;
}

.index .feature:hover h3 {
    font-weight: 600;
}

.mobile-only {
    display: none;
}

.fa-folder-open {
    color: #1EAB00;
}

.fa-paper-plane {
    color: #00C933;
}

.fa-exclamation-circle {
    color: #00C66F;
}

.fa-list-ol {
    color: #00C5A9;
}

.fa-calendar {
    color: #00BBC7;
}

#mobile-icon {
    color: #00A2E6;
    font-size: 25pt;
    line-height: .8; 
}

.fa-repeat {
    color: #006BFF;
}

.contract-icon {
    height: 35px;
    padding-bottom: 8px;
    margin-bottom: -6px;
}

.fa-wrench {
    color: #7500FF;
}

.fa-road {
    color: #A500FF;
}

.fa-tag {
    color: #F100C1;
}

.fa-credit-card {
    color: #FF0063;
}

.fa-dollar {
    color: #FF0025;
}

.fa-envelope {
    color: #FF4A00;
}

.fa-line-chart {
    color: #FF4A00;
}

i.main-icon {
    font-size: 45px;
    padding-bottom: 15px;
}

#c {
     background: #fff;
}

#services-grid {
    margin-top: 40px;
    max-width: 1100px;
}

.service {
    width: 25%;
    float: left;
}

.service img {
    height: 120px;
}

#installation {
    padding-top: 8px;
    padding-bottom: 8px;
}

#consultation {
    padding-top: 10px;
    padding-bottom: 20px;
}

#support {
    padding-top: 10px;
    padding-bottom: 10px;
}

#d {
    background: linear-gradient(rgba(255, 255, 255, 0.70), rgba(255, 255, 255, 0.70)), url(images/Polygons.jpg) center/cover no-repeat scroll;
}

#testimonials-grid {
    margin-top: 20px;
    max-width: 1100px;
}

.testimonial {
    width: 50%;
    padding: 20px 40px;
    display: float;
}

.testimonial:nth-of-type(1), .testimonial:nth-of-type(2) {
    float: left;
}

.testimonial:nth-of-type(3), .testimonial:nth-of-type(4) {
    float: right;
}

.testimonial div {
    width: 100%;
}

.testimonial h4 {
    margin: 0;
    text-align: left;
}

.testimonial p {
    text-align: left;
    margin-bottom: 0;
    font-size: 11pt;
    font-weight: 400;
}

#e {
     background: url("/images/Map.png") center/cover no-repeat scroll;
}

#e > div > h2 {
    margin-top: 70px;
}

#e .button:nth-of-type(2) {
    position: relative;
    top: 30px
}

#footer a {
    color: #0094FF;
}

#footer {
    display: block;
    padding-top: 70px
}

#footer h3 {
    width: 25%;
    float: left;
    margin: 0;
}

@media (max-width: 1315px) {
    #secondary-header {
        height: 70px;
    }
    
    #secondary-header a i {
        width: 100%;
        margin: auto;
        bottom: 0;
    }
    
    #secondary-header a {
        height: 70px;
        text-align: center;
    }
    
    #mobile-icon-1 {
        padding-bottom: 0;
        line-height: 1.1;
    }
    
    #mobile-icon-span {
        position: relative;
        bottom: 5px;
    }
    
    #contract-icon-span {
        position: relative;
        bottom: 7px;
    }
    
    .contract-icon-3 {
        float: none;
        display: block;
        margin: 5px auto 5px auto;
        width: 100%;
        position: relative;
        bottom: 4px;
    }
    
    #secondary-header span {
        width: 100%;
        float: none;
        padding-top: 2px;
    }
}

@media (max-width: 1100px) {   
    .goto0 {
        display: inline-block !important;
    }
    
    #secondary-header {
        height: 100px;
    }
    
    #secondary-header span {
        display: none;
    }
    
    #secondary-header a {
        width: 12.5%;
        height: 50px;
    }
}

@media (max-width: 1000px) {
    h2.logotxt {
        display: none;
    }
    
    .testimonial {
        width: 100%;
        float: none;
        text-align: center;
    }
    
    .details h2 {
        display: none;
    }
}

@media (max-width: 700px) {
    /*
    #fullscreen {
        display: flex;
    }
    */
    
    #header {
        position: absolute;
    }
    
    .desktop-only {
        display: none;
    }
    
    .mobile-only {
        display: block;
    }
    
    #logo {
        float: none;
        margin: auto;
        display: block;
        width: 195px;
    }
    
    #logo img {
        display: none;
    }
    
    #logo .logotxt {
        float: none;
        padding: 13px 0 0 0 !important;
        background: none;
    }
    
    section {
        height: auto;
        padding-top: 80px;
        padding-bottom: 50px;
    }

    #a, #home-bg {
        -webkit-transition: height 99999s;
        transition: height 99999s;
        min-height: 500px;
        height: 100vh;
    }
    
    #secondary-header {
        top: 0;
    }
    
    #b {
        height: auto !important;
        padding-top: 15px !important;
    }
    
    #features-grid .feature {
        width: 33%;
        padding: 3% 1%;
    }
    
    .grid-2 .feature {
        padding: 2% 5%;
    }
    
    .details > div {
        padding-top: 120px;
    }
    
    .details > div > i, .details > div > img {
        display: none;
    }
    
    .index h1 {
        padding-top: 40px;
    }
    
    .main-icon {
        font-size: 40px !important;
    }
    
    #header nav {
        display: none;
    }
    
    h1 {
        font-size: 16pt;
    }
    
    #services-grid {
        margin-top: 0;
    }
    
    .service {
        width: 50%;
    }
    
    .service h3 {
        padding-bottom: 20px;
    }
    
    .service img {
        height: 100px;
    }
    
    #b, #c, #d {
        min-height: 0;
    }
    
    .testimonial h4, .testimonial p {
        text-align: center;
        width: 100%;
        float: none;
    }
    
    #e > div {
        padding-top: 0;
    }
    
    h2 {
        font-size: 11pt;
    }
    
    h3 {
        font-size: 9pt;
    }
    
    .scroll {
        display: none;
    }
    
    #e {
        padding-top: 0 !important;
    }
    
    #footer h3 {
        width: 50%;
        padding-top: 15px;
    }
}

@media (max-width: 400px) {
    #footer h3 {
        width: 100%;
    }
}

.unslider{overflow:auto;margin:0;padding:0}.unslider-wrap{position:relative}.unslider-wrap.unslider-carousel>li{float:left}.unslider-vertical>ul{height:100%}.unslider-vertical li{float:none;width:100%}.unslider-fade{position:relative}.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}.unslider-fade .unslider-wrap li.unslider-active{z-index:10}.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}.unslider-arrow{position:absolute;left:20px;z-index:2;cursor:pointer}.unslider-arrow.next{left:auto;right:20px}