@font-face {
    font-family: 'header'; 
    src: url('fonts/sharetech.ttf') format('truetype');
}
@font-face {
    font-family: 'body'; 
    src: url('fonts/zillaslab.ttf') format('truetype');
}
html{
    
    scroll-behavior: smooth;
}
body{
    background:#fcfcfc;
}
body.locked{
    overflow:hidden;
}
.main-bod{
    background:linear-gradient(179deg, rgba(1,171,236,1) 0%, rgba(1,171,236,1) 1%, rgba(30,93,170,1) 85%);
    font-family: 'body';
    font-size:1.2em;
    line-height: 1em;
    padding:16px 0;
    box-shadow: 0px -0px 4px #272727;
    margin-top:12px;
}
.header{
    font-family: 'header';
    background: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 80;
    box-shadow: 0 0 3px #000;
    transition: .1s;
    height:100px;
}
.logo{
    height: 100px;
    padding: 16px 0;
    transition: .1s;
}
.box{
    background-color: rgba(30, 93, 170, 1);
    padding: 16px 0;
    border: 1px solid rgba(1, 171, 236, 1);
    box-shadow: 0 0 4px rgba(30, 93, 170, 1);
    border-radius: 8px;
    margin-bottom: 20px;
}
.box-pic{
    width:100%;
    height:auto;
    margin:0;
}
.box p{
    padding: 0 32px 4px;
    color: #fff;
    line-height: 1.2em;
    font-size: 1.1em;
}
.slides{
    background-color:#000;
    overflow:hidden;
    padding:0;
    margin-top: 100px;
    box-shadow:0 0 8px rgba(0, 0, 0, .8) inset;
    background:url('../images/banner_index.jpg');
    background-size: cover;
    background-position: top;
}
.slides img{
    min-width:100%;
}
.slides .intro-blurb{
    background-color: rgba(0,0,0,.77);
    padding: 16px 20px;
    border: 1px solid rgba(0,0,0,1);
    color:#fff;
}

#menu-top{
    list-style: none;
    float:right;
    width: 58%;
    margin: 0;
    height: 0vh;
    transition: 1s;
}
#menu-top li a{
    text-transform: uppercase;
    font-weight: bold;
    color:rgba(30, 93, 170, 1);
    font-size: 2em;
    float:right;
    padding:32px 12px;
    text-decoration: none;
    transition: .1s;
}
#menu-top li a:hover{
    color:rgba(1,171,236,1);
    text-shadow:0px 0px 8px #eee;
    transition: .1s;
}
.scrolled #menu-top li a{
    padding:16px 12px;
    transition: .1s;
}
.box .heading{
    font-weight:bold;
    font-family: 'header';
    font-size:1.8em;
    color:rgba(1,171,236,1);
    text-shadow:0 0 4px #000;
    text-transform: uppercase;
    line-height:1em;
    margin-bottom:4px;
    margin-top:8px;
}
.lower-bod{
    background-color:#272727;
    border-top:1px solid #000;
    box-shadow: -1px 0 3px #000;
    padding:20px;
}
.footer{
    background-color:#000;
    height:60px;
    color:#ccc;
    text-align:center;
    padding-top:16px;
    font-family: sans-serif;
}
.bigger{
    font-size:1.2em;
}
.slogan-wrap{
    position: relative;
    z-index: 20;
    padding: 40px 0;
}
.slogan{
    font-size: 6em;
    position: relative;
    top: 0;
    margin: auto;
    text-align: center;
    z-index: 20;
    color: #fff;
    text-transform: uppercase;
    font-family: 'header';
    font-weight: bold;
    text-shadow: -1px -1px 3px rgba(30, 93, 170, 1), 3px 3px 4px #000,0 0 64px rgb(255, 255, 255, 1);
    line-height: 1em;
}
.scrolled .header{
    height:64px;
    transition: .1s;
}
.scrolled .header .logo{
    padding:0;
    margin-top:-2px;
    height:68px;
    transition: .1s;
}
.scrolled .header li a{
    padding:16px 12px;
    transition: .1s;
}
.section-title{
    font-size: 2.2em;
    font-weight: bold;
    font-family: 'header';
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    padding: 16px 0 32px;
    text-shadow: -1px -1px 2px rgba(30, 93, 170, 1);
}

.serv-nav{
    position: absolute;
    top: 0;
    box-shadow: 0 0 8px #ccc;
    margin-right:32px;
    border-radius: 8px;
    overflow: hidden;
    border:1px solid #fff;
}
.serv-nav li{
    color: #fff;
    border-color: #fff;
    margin: 0;
    padding: 0;
    border: none;
    border-top:1px solid #fff;
}
.serv-nav:first-child{
    border-top:none;
}
.serv-nav li a{
    background-color: rgba(1, 171, 236, 1);
    color: #fcfcfc;
    text-decoration: none;
    font-family: 'header';
    text-transform: uppercase;
    display: block;
    margin: 0;
    padding: 12px 32px;
    text-align:center;
    line-height: 1em;
}

.serv-nav li a:hover{
    background:rgba(30, 93, 170, 1);
    color:#fff;
    /*box-shadow:0 0 80px rgba(1, 171, 236, 1) inset;*/
}

.lower-bod label{
    font-family: 'header';
    text-transform: uppercase;
}

.lower-bod input,textarea,option{
    font-family: 'body';
    margin-bottom:8px;
}

.lower-bod input.btn-big{
    background-color:rgba(30, 93, 170, 1);
    font-family:'header';
    width:100%;
    text-transform: uppercase;
    font-size:1.6em;
    color:rgba(1,171,236,1);
    font-weight: bold;
    border-radius: 0;
    margin:0;
    border:none;
    padding:8px;
}
.lower-bod input.btn-big:hover{
    color:#fff;
    text-shadow: 0 0 8px rgba(1,171,236,1);
}

.cont-serv{
    font-size:1.4em;
    font-family:'body';
    margin: 32px auto;
}
.cont-serv .intro-blurb{
    font-size: 1em;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 6px;
    margin: 0;
    box-shadow: 0 0 8px #eee;
}
.sns{
    position:fixed;
    top:100px;
}
.jump-link{
    display: block;
    margin-top: -60px;
    margin-bottom: 80px;
    height: 0;
}

.message-form{
    background-color:rgba(1,171,236,1);
    padding:0;
    font-size:1.2em;
    color:#272727;
    border-radius:6px;
    overflow:hidden;
}
.message-form .form-control{
    font-size:1.1em;
}
.message-form .formbod{
    padding:8px 12px;
}


.message-form .form-label{
    background-color:rgba(30, 93, 170, 1);
    color:#d2d2d2;
    font-family:'body';
    font-style:italic;
    padding:8px;
    text-align:center;
    font-size:1.1em;
}
.message-form textarea{
    margin-bottom:0;
}


.lower-bod p{
    font-size:1.2em;
}

.container h3{
    font-weight:bold;
}
.lower-bod .hours{
    margin-bottom:20px;
}
.lower-bod .hours li{
    border-left: 3px solid #777;
    padding:4px 8px;
    list-style:none;
    font-size:1.4em;
    margin:6px 0;
}

.cont-serv.maint h2{
    font-family: 'header';
    text-transform: uppercase;
    font-size: 2em;
}
.col-md-5 .serv-desc{
    margin:0;
    padding:0 0 0 16px;
}
.col-md-5 .serv-desc li{
    padding:8px 16px;
}
.top-chop{
    margin-top:0;
    padding-top:0;
}
.outro-blurb{
    padding: 16px;
    background-color: #272727;
    color: #fff;
    font-family: 'body';
    border-radius: 8px;
    font-size: .9em;
    line-height: 1.1em;
    text-align: justify;
    margin: 16px 0;
}
.maint a{
    color:rgba(30, 93, 170, 1)
}
a.btn-maint{
    border: 1px solid #272727;
    color: #272727;
    padding: 16px;
    border-radius: 8px;
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 1.1em;
    margin-top: 20px;
    font-size: 1.2em;
}
a.btn-maint strong{
    font-weight: bold;
    font-size:1.1em;
}
.col-md-4 .service-details a.btn-maint.service-title:hover{
    background:rgba(1,171,236,1) !important;
    color:#fff;
    text-shadow:0 0 3px #000;
}
/*SLIDESHOW*/

    #slideshow {
        position:relative;
    }
    #slideshow IMG {
        position:absolute;
        left:0;
        z-index:8;
    }
    #slideshow IMG.active {
        z-index:10;
    }
    #slideshow IMG.last-active {
        z-index:9;
    }

/*MENU*/
    #menu-toggle{
        display:none;
        transition: 1s;
        cursor: pointer;
    }
    #menu-top.open{
        display:block;
        position: fixed;
        top: 80px;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #fff;
        z-index: 50;
        padding: 20px 0;
        transition: 1s;
    }
    .scrolled #menu-top.open{
        top: 64px;
        transition: 1s;
    }
    #menu-top.open li{
        float:none;
        font-size:1.5em;
        display:block;
        text-align: center;
        margin:auto;
    }
    #menu-top.open li a{
        float:none;
    }

/*OTHER*/
    .lower-bod{
        color:#fff;
        font-family: 'body';
    }
    .intro-blurb{
        font-size: 1.4em;
        font-family: 'body';
        position: relative;
        z-index: 60;
        padding: 20px 32px;
        text-align: justify;
        line-height: 1.2em;
        margin: 12px 0 0;
    }
    .services{
        text-align: center;
        margin-bottom:20px;
    }
    .services li{
        padding:0;
        list-style-type: none;
        display: inline-block;
    }
    .services li a{
        background-color: #272727;
        color: #fff;
        display: inline-block;
        padding: 16px 32px;
        margin: 20px;
        font-family: 'header';
        text-transform: uppercase;
        font-weight: bold;
        font-size: 1.2em;
    }
    .services li a:hover{
        color:rgba(1,171,236,1);
        background-color: #000;
        text-decoration: none;
        text-shadow:0 0 3px #000;
        box-shadow: 0 0 3px rgba(1, 171, 236, 1);
    }

    .learn-more{
        font-size: 2em;
        font-weight: bold;
        margin: 0;
        text-align: center;
        font-family: 'body';
        margin:8px 0;
    }

    .menu-toggle{
        display:none;
    }

    .cont-serv h2{
        font-weight:bold;
    }
    .serv-desc li{
        border-left:2px solid rgba(30, 93, 170, 1);
        list-style: none;
        padding:4px 8px;
        margin:8px 0;
        line-height: 1.1em;
    }

    .lower-bod .btn-contact{
        font-family: 'header';
        border:1px solid #fff;
        color:#fff;
        padding:32px 64px;
        font-size: 2.4em;
        border-radius: 8px;
        font-weight:bold;
        margin:20px auto;
        position: relative;
        text-transform: uppercase;
        display: block;
        text-align: center;
        width:50%;
    }
    .lower-bod .btn-contact:hover{
        box-shadow:0 0 8px #fff;
    }
    .ab .serv-desc{
        margin:0;
        padding:0 0 0 16px;
    }
    .ab .serv-desc li{
        padding:8px 16px;
    }
    .cont-cont input.btn-big{
        background-color:rgba(30, 93, 170, 1);
        font-family:'header';
        width:100%;
        text-transform: uppercase;
        font-size:1.6em;
        color:#fff;
        font-weight: bold;
        border-radius: 0;
        margin:0;
        border:none;
        padding:8px;
    }
    .cont-cont input.btn-big:hover{
        color:#fff;
        text-shadow: 0 0 8px rgba(1,171,236,1);
    }
    .cont-cont .message-form{
        background-color: #fff;
        border: 1px solid rgba(30, 93, 170, 1);
        box-shadow: 0 0 8px #ccc;
        font-size: 1em;
    }

    .service-box{
        border: 1px solid #ccc;
        margin: 0;
        padding: 0;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        width: 100%;
        display: block;
        background: linear-gradient(180deg, rgba(204,204,204,1) 0%, rgba(204,204,204,1) 69%, rgba(204,204,204,1) 100%);
        background-size: 100%;
        background-position: center;
        position: relative;
        border-radius:6px;
        margin-bottom:8px;
        box-shadow:1px 1px 3px #ccc;
        transition: 0.2s;
    }
    .sb-automation{
        background-image:url(../images/services/services_automation.jpg);
    }
    .sb-energy{
        background-image:url(../images/services/services_energy.jpg);
    }
    .sb-hvac{
        background-image:url(../images/services/services_hvac.jpeg);
    }
    .sb-lighting{
        background-image:url(../images/services/services_lighting.jpeg);
    }
    .sb-security{
        background-image:url(../images/services/services_security.jpeg);
    }
    .sb-maintenance{
        background-image:url(../images/services/services_maintenance.jpeg);
    }
    .service-box strong{
        background-color: rgba(30, 93, 170, .85);
        color: #fff;
        display: block;
        padding: 8px 32px;
        bottom: 0;
        position: absolute;
        width: 100%;
        text-transform: uppercase;
        font-family: 'header';
        font-size: 1.4em;
        text-align: center;
        line-height: 1em;
        text-shadow: -1px -1px 2px rgba(30, 93, 170, 1);
        color:#fff;
    }

    .service-box:hover{
        background-size: 111%;
        font-size:1.1em;
        padding:12px 0;
        transition: .2s;
        cursor: pointer;
    }
    .service-box:hover strong{
        background-color:rgba(1, 171, 236, .85);
    }


    #popesc{
        display:none;
    }
    #popesc.open{
        display: block;
        z-index: 98;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        background-color: rgba(1, 1, 1, .85);
    }
    
    
    #popover{
        display:none;
    }
    #popover.open{
        display: block;
        position: fixed;
        width: 100%;
        top: 0;
        z-index:99;
    }
    .service-details{
        background-color: #000;
        border: 1px solid #000;
        margin-top: 1.4em;
        border-radius: 6px;
        box-shadow: 1px 1px 6px #000;
        z-index:99;
        position:relative;
    }
    #popover-details{
        position:absolute;
    }
    .service-image{
        aspect-ratio: 2 / 1;
        background-color: rgba(88, 25, 99, 1);
        display: block;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background-size: cover;
        background-position: center;
    }
    .service-title{
        font-family: 'header';
        font-size: 2.2em;
        background:linear-gradient(179deg, rgba(1,171,236,1) 0%, rgba(1,171,236,1) 1%, rgba(30,93,170,1) 85%);
        margin: 0 -12px;
        padding: 6px;
        border-radius: 6px;
        color: #fff;
        border: 1px solid #000;
        box-shadow: 1px 1px 3px #000;
        font-weight: bold;
        text-shadow:-1px -1px 2px rgba(30, 93, 170, 1);
        text-align: center;
        text-transform: uppercase;
    }
    .service-attributes{
        padding:0;
        margin:0;
        list-style: none;
        overflow:hidden;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        font-family:'body';
    }
    .service-attributes li{
        padding: 12px 20px;
        border-top: 1px solid #efefef;
        border-bottom: 1px solid #999;
        font-size: 1.2em;
        line-height: 1em;
        background: #fff;
    }
    .service-attributes li strong{
        display: block;
        text-transform: uppercase;
        font-size: 1.1em;
        margin-bottom:4px;
    }
    .tempered{
        background-color: #fff;
    margin: 0 0 -20px;
    padding: 0 0 32px;
    background-image: url(data:image/png;base64,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);
}


    
    .box{
        overflow: inherit;
        padding: 0;
        background-color: #fff;
        color: #000;
    }
    .box .service-title{
        padding:20px;
        font-size:2em;
    }
    .box p{
        color:#333;
        margin-bottom:8px;
    }
    .service-description{
        padding:20px 0px 12px;
    }
    .box-conts .col-md-6{
        padding:0 20px;
    }
    .box-conts .col-md-4{
        padding:0 20px;
    }
    .box-conts .col-md-4 .service-details{
        box-shadow:1px 1px 3px #000;
        z-index:77;
        font-size:1.2em;
    }
    .box-conts .col-md-4 .service-title{
        font-size:1.4em;
        
        position: relative;
        z-index:100;
    }
    .box-conts .col-md-4 .service-attributes li{
        font-size:1em;
        line-height:1.2em;
    }
    .service-title.btn-maint{
        margin-top:0px;
        color:#fff;
        text-transform: uppercase;
        padding:6px;
    }
    .clickto{
        text-shadow:none;
        font-family:'body';
        color:#000;
        display: block;
        text-transform: none;
        margin-bottom:3px;
        font-size:.8em;
    }
    .service-title.btn-maint:hover{
        background-color:rgba(1, 171, 236, 1);
    }

    .banner-clients{
        background-image:url('../images/banner_clients.jpeg');
        background-position: center;
    }
    .banner-clients .slogan-wrap{
        padding:50px 0;
    }
    .cust-img{
        width:100%;
        border:1px solid #ccc;
        padding:6px;
        border-radius:3px;
        margin-bottom:6px;
    }
    .banner-maint{
        background-image:url('../images/banner_maintenance.jpg');
        background-position: center;
    }

    .bas-vend h2{
        font-family: 'body';
        font-weight: bold;
        font-size:1.8em;
    }

    .thanks-blurb{
        border-radius: 3px;
        background: #333;
        color: #fff;
        padding: 8px 16px;
        font-size: 1.2em;
        position: relative;
    }
    .thanks-blurb strong{
        color: rgba(1, 171, 236, 1);
        text-shadow: 0 0 3px #000;
    }
    .pnum{
        padding-left:40px;
    }
    /*RESIZE*/
    @media (max-width: 1200px) {
        .slogan{
            font-size:3.5em;
            padding: 50px;
        }
    }
    @media (max-width: 992px) {
        #menu-toggle{
            display: block;
            float:right;
            font-size:4em;
            font-family: 'header';
            padding:32px 12px;
            line-height: .6em;
            transition: .1s;
        }
        .scrolled #menu-toggle{
            padding: 12px;
            transition: .1s;
        }
        #menu-top{
            display: none;
            height: 0vh;
            transition: 1s;
        }
        .slogan{
            font-size:4em;
            padding: 20px 0 10px;
        }
        body{
            font-size:2em;
        }
        .serv-nav{
            position: fixed;
            top:8px;
        }
        .serv-nav .list-group-item{
            display:none;
        }
        .serv-nav .list-group-item.menu-toggle{
            display:block;
        }
        .lower-bod .btn-contact{
            font-size: 2em;
            width:auto;
        }
        
    }
    @media (max-width: 600px) {
        .slogan{
            font-size:3em;
        }
        body{
            font-size:2.2em;
        }
        .serv-nav{
            position: fixed;
            top:8px;
        }
        .lower-bod .btn-contact{
            font-size: 2em;
            width:auto;
        }
    }