/*======================================================
  Screen Style Sheet
  sonarspecnde.com
------------------------------------------------------
  Author(s): Andrew Bayles
  Created: 7/13/2017
======================================================*/


/* Imported CSS Files and Fonts */

@font-face {
    font-family: 'nexa_lightregular';
    src: url('/fonts/Nexa_Free_Light-webfont.eot');
    src: url('/fonts/Nexa_Free_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/Nexa_Free_Light-webfont.woff2') format('woff2'),
         url('/fonts/Nexa_Free_Light-webfont.woff') format('woff'),
         url('/fonts/Nexa_Free_Light-webfont.ttf') format('truetype'),
         url('/fonts/Nexa_Free_Light-webfont.svg#nexa_lightregular') format('svg');
}

@font-face {
    font-family: 'gill_sans_light';
    src: url('../fonts/GillSans/GillSans-Light.eot');
    src: url('../fonts/GillSans/GillSans-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/GillSans/GillSans-Light.woff2') format('woff2'),
         url('../fonts/GillSans/GillSans-Light.woff') format('woff'),
         url('../fonts/GillSans/GillSans-Light.ttf') format('truetype'),
         url('../fonts/GillSans/GillSans-Light.svg#gill_sans_light') format('svg');
}

@font-face {
    font-family: vermin_vibes;
    src: url("/fonts/vermin_vibes_2_soft.otf");
}


/* General Classes */

.gutter-10.row {
    margin-right: -5px;
    margin-left: -5px;
}
.gutter-10 > [class^="col-"], .gutter-10 > [class^=" col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.clearfix:after {
    content:" ";
    display:block;
    clear:both;
}

.hidden, .hidetext {
    display: none;
}

.hideme { /* Enables JS fade-in on scroll. */
    opacity:0;
}

.box_rotate {
  -webkit-transform: rotate(180deg);  /* Chrome, Safari 3.1+ */
    -moz-transform: rotate(180deg);  /* Firefox 3.5-15 */
      -ms-transform: rotate(180deg);  /* IE 9 */
        -o-transform: rotate(180deg);  /* Opera 10.50-12.00 */
         transform: rotate(180deg);  /* Firefox 16+, IE 10+, Opera 12.50+ */
}

.box_transition {
  -webkit-transition: all 0.3s ease-out;  /* Chrome 1-25, Safari 3.2+ */
     -moz-transition: all 0.3s ease-out;  /* Firefox 4-15 */
       -o-transition: all 0.3s ease-out;  /* Opera 10.50–12.00 */
          transition: all 0.3s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.50+ */
}

a:hover {
    text-decoration: none;
}

ul {
    list-style: none;
}


/* Top-Level Elements */

html {
    height: 100%;
}

html, body {
    background-color: #1A1F22;
    margin: 0;
    padding: 0;
}

body {
    font-family: open-sans, "Helvetica Neue", Arial, sans-serif;
    overflow-x: hidden;
    position: relative;
}

/* Header Bar */

header {
    position: fixed;
    min-width: 100%;
    z-index: 900;
}

#top-bar {
    background:
        radial-gradient(black 15%, transparent 16%) 0 0,
        radial-gradient(black 15%, transparent 16%) 8px 8px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
        radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:16px 16px;
    border-bottom: 1px solid #ffffff;
    box-shadow: 0 0 160px #444444;
    height: 48px;
    position: relative;
    z-index: 100;
}

#top-bar ul {
    height: 100%;
}

#top-bar li {
    display: inline-block;
    max-width: 280px;
    padding-top: 16px;
}

#top-bar li span {
    display: none;
}

#top-bar li p {
    display: inline-block;
    margin: 0;
    color: #ffffff;
    font-family: 'Lato', sans-serif;
    font-size: 0.90em;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

#nav-bar {
    background-color: #fbfbfb;
    box-shadow: 0 0 300px #333333;
    min-width: 100%;
}

#header-logo {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,e5e5e5+100;White+3D */
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

    box-shadow: 0 -2px 80px #555555;
    display: block;
    height: 100px;
    padding: 15px !important;
    position: absolute;
}

#header-logo a { display: block; }

#header-logo img {
    float: left;
    vertical-align: top !important;
    width: 20%;
}

#company-name, #company-name-subtext {
    display: inline-block;
    padding-left: 1em;
    width: 80%;
}

#company-name p {
    color: #666666;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    font-size: 3.4em;
    letter-spacing: 0.05em;
    line-height: 1;
    margin: 0;
}

#company-name p span { color: #cccccc; }

#company-name-subtext p { margin: 0; }
#company-name-subtext p:first-child { float: left; }
#company-name-subtext p:last-child { float: right; }

#nav-bar ul {
    margin-bottom: 0px;
    position: relative;
}

#nav-bar li {
    height: 80px;
    padding-right: 0px !important;
    padding-left: 0px !important;
    position: relative;
    text-align: center;
    vertical-align: middle;
}

#nav-bar li a {

    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    -ms-transition: 0.1s linear;
    -o-transition: 0.1s linear;
    transition: 0.1s linear;

    display: inline-block;
    color: #a5a5a5;
    font-family: 'Lato', sans-serif;
    font-size: 1.25em;
    font-weight: 100;
    height: 100%;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

#nav-bar li a p {
    z-index: 50;
    position: relative;
    margin-top: 25px;
}

#nav-bar li a:hover {
    color: #555555;
    text-shadow: 0 0 5px #555555;
    text-decoration: none !important;
}

#nav-bar li a span.nav-line {

    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    transition: all 300ms linear;

    background-color: #ffffff;
    bottom: -1px;
    box-shadow: 0 -2px 4px #ffffff;
    display: block;
    height: 1px;
    overflow: hidden;
    position: absolute;
    pointer-events: none;
    left: 1px;
    width: 0;
}

#nav-bar li a:hover span.nav-line {
    width: 100%;
    height: 4px !important;
}

#nav-bar li a span.nav-drop-bg {

    -webkit-transition: 0.1s linear;
    -moz-transition: 0.1s linear;
    -ms-transition: 0.1s linear;
    -o-transition: 0.1s linear;
    transition: 0.1s linear;

    background: repeating-linear-gradient( 
        -48deg, 
        #fbfbfb, 
        #fbfbfb 30px, 
        #eeeeee 30px, 
        #eeeeee 60px 
    );

    border-bottom: 4px solid #eeeeee;
    display: block;
    height: 100%;
    opacity: 0;
    position: absolute;
    top: -80px;
    width: 100%;
    z-index: 10;
}

#nav-bar li a:active span.nav-drop-bg { opacity: 0.5; }
#nav-bar li a:hover span.nav-drop-bg { 
    opacity: 1;
    top: 0px; 
}


/* Sections */

section {  }

#sections {
    min-height: 50vh;
    min-width: 100%;
}

#bg-main {
    background-attachment: fixed;
    background-image: url("/img/img_0350.jpg");
}

#services {
    height: 50em;
    position: relative;
}

#services .container {
    display: block;
    height: 100%;
    position: relative;
}

#about {
    position: relative;
    z-index: 5;
}

#our-team {
    position: relative;
    z-index: 5;
}

#contact {
    position: relative;
    z-index: 5;
}

#about .container {
    background-color: #cccccc;
    min-height: 200px;
}

#our-team .container {
    background-color: #999999;
    min-height: 200px;
}

#contact .container {
    background-color: #777777;
    min-height: 200px;
}


/* Content Tabs */

#services-tabs {
    bottom: 0;
    display: block;
    position: absolute;
    width: 100%;
}

#services-tabs .tab {
    display: inline-block;
    height: 200px;
    position: relative;
    z-index: 1;
    top: 140px;
}

#services-tabs .tab:hover {

}

#services-tabs .tab div {
    -webkit-transition: 0.2s linear;
    -moz-transition: 0.2s linear;
    -ms-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;

    background-color: #eeeeee;
    cursor: pointer;
    display: block;
    height: 100%;
    position: relative;
    min-width: 100%;
    top: 0px;
}

#services-tabs .tab:hover div {
    box-shadow: 0 0px 8px #ffffff;
}

#services-tabs .tab div.open {
    top: -120px;
}


/* make keyframes that tell the start state and the end state of our object */ 
@-webkit-keyframes fadeIn { 
    from { opacity:0; } to { opacity:1; } 
    /*from { left: 0; } to { left: -147; }*/
    /*from { top: -120; } to { top: 0; }*/
}
@-moz-keyframes fadeIn { 
    from { opacity:0; } to { opacity:1; } 
    /*from { left: 0; } to { left: -147; }*/
    /*from { top: -120; } to { top: 0; }*/
}
@keyframes fadeIn { 
    from { opacity:0; } to { opacity:1; } 
    /*from { left: 0; } to { left: -147; }*/
    /*from { top: -120; } to { top: 0; }*/
}


/* Slick Slider Carousel Custom */

/*
.slick-design, .slick-dev {
    box-shadow: 0px 0px 18px #bbbbbb;
}

.slick-slide img {
    width: 100% !important;
    height: auto !important;
}
*/


/* Footer Bar */

footer {
    background-color: #888888;
    /*box-shadow: 0 0 800px #777777;*/
    /*display: flex;*/
    min-height: 180px;
    position: relative;
    /*z-index: 980;*/
    /*box-shadow: 0 0 25px #cccccc;*/
}

footer .container {
    background-color: #d8d8d8;
}

footer ul {
    /*
    margin: 0 auto;
    text-align: center;
    list-style-type: none;
    padding: 0;
    */
}

footer ul li {
    /*
    display:inline-block;
    text-align:center;
    background:#ffffff;
    color:#dddddd;
    line-height:42px;
    margin:0 6px;
    width:42px !important;
    height:42px !important;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    */
}

footer ul li:hover {
    /*background:#cccccc;*/
}

footer ul li:hover a {
    /*color:#fff;*/
}

footer ul li a {
    /*
    color:#dddddd;
    width:42px !important;
    height:42px !important;
    */
}

footer ul li a i {
    /*line-height:42px !important;*/
}