body{ 
    color: #515151;
    background: #FFF;
    font-size: 16px;
    line-height: 28px;
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}
.container{ max-width:1180px;}
a {cursor: pointer; color: #000;}
a:hover{ color:#000;}
a:active, a:visited { color: #fe5000; text-decoration: none; }

h1, h2{ font-family: 'Lato', sans-serif; text-align: center; }
h5{  font-size: 48px !important; line-height: 73px !important; text-align: center; font-weight: 400; }
.v-center{ max-width:1140px; }

p{ 
    font-size: 20px;
    text-align: center;
    line-height: 35px;
}
.centerd{ text-align: center;}
.t-left{ text-align: left;}
.justif{ text-align: justify;}

header{
    display: block;
    position: relative;
    z-index: 600;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
header .nav{ margin-top:10px;}
header .nav a{
    font-size: 15px;
    font-style: italic;
    letter-spacing: 1px;
    color: #292929;
    padding: 0 18px 0;
    font-weight: normal;
    margin: 0;
}

header .nav a:hover{ color: #5c8a20;}
header a.logo{
    display: block;
    margin: 0 auto;
    height: 100px;
    display: flex;
    align-items: center;
}

header a.logo img{ width:100%;}
header a{ margin-right:20px; text-decoration: none; font-weight: bold;}
header a:hover{ text-decoration: none; color: #000;}
header .nav{ text-align: right;}


main section{  display: flex; align-items: center; justify-content: center; overflow: hidden; }
main section.home{
    color: #FFF;
    position: relative;
    overflow: hidden;
    height: 100vh;
    background-color: rgba(49, 17, 15, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

main section.home h5{
    max-width: 800px;
    display: block;
    margin: 0 auto;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

main section.home h1{ 
    font-size: 6rem;
    line-height: 86px;
    font-weight: 700;
    text-shadow: 0 -1px 0 #000;
    margin-bottom: 20px;
    text-transform: uppercase;
}

main section.sect h2{
    font-family: "Lato", Arial, Helvetica, Verdana, sans-serif;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 48px;
    line-height: 60px;
    margin: 0 0 15px 0;
    font-weight: 900;
    padding: 0;
    color: #292929;
}

/* customers --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- ---------  */

main section.customers{ min-height: 468px; }
main section.customers p{  max-width:840px;}

/* development --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- ---------  */

main section.development{
    min-height: 573px;
    background-image: url(../images/tractor-farm-background.jpg);
    background-size: cover;
    background-position: center;
}
main section.development *{ color: #FFF !important;}

/* careers --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- ---------  */

main section.careers{ min-height: 496px; background-color: #4482bf; }
main section.careers *{ color: #FFF !important; }
main section.careers p{
    margin: 0;
    text-align: left;
    font-size: 16px;
    line-height: 28px;
}

/* operations --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- ---------  */

main section.operations{
    min-height: 861px;
    background-image: url(../images/optic-fiber-background.jpg);
    background-size: cover;
    background-position: center;
}
main section.operations *{ color: #FFF !important; }
main section.operations span{
    background: #000;
    display: inline;
    text-align: left !important;
    font-size: 23px !important;
    line-height: 66px;
    letter-spacing: 0.5px;
    font-style: italic;
    padding: 0;
    font-weight: normal;
}

/* about --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- ---------  */

main section.about{
    min-height: 580px;
    background-image: url(../images/night-neon-highway-background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
}
main section.about *{ color: #FFF !important; }
main section.about .six{ text-align: left; }
main section.about h2{ margin-bottom: 60px;}

/* support --------- --------- --------- --------- --------- --------- --------- --------- --------- --------- ---------   */

main section.support{ min-height: 496px; background-color: #000; }
main section.support *{ color: #FFF !important;}
main section.support .six{ text-align: left; }
main section.support h2{ margin-bottom: 60px;}


footer{
    clear: both;
    width: 100%;
    padding: 20px 0;
    margin: 0 auto;
    color: #b3b3b1;
    border-top: none;
    margin: 0 auto;
    overflow: hidden;
    background-color: #353739;
}

footer{ text-align: center;}
footer a{ text-decoration: none; color: #fe5000; }
footer a:hover{ color: #FFF;}



#site-navigation {
    display: block;
    height: 48px;
  }
   
  #site-navigation #main-menu,
  #site-navigation > input {
    display: none;
    margin: 0;
    text-align: right;
  }
   
  #site-navigation > label {
    display: block;
    font-size: 36px;
    color: #000;
    position: absolute;
    right: 20px;
    width: 36px;
    padding: 0;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
   
  #site-navigation > input:checked + #main-menu {
    display: block;
    clear: both;
    top: 36px;
    position: relative;
    background: #fff;
    color: #fff;
  }
   
  #site-navigation ul li {
    display: block;
    padding: 0;
    margin: 0;
  }
   
  #site-navigation a {
    text-decoration: none;
    color: #292929;
    font-weight: normal;
    font-style: italic;
    letter-spacing: 1px;
    height: 95px;
    align-items: center;
    display: flex;
    margin: 0;
    padding: 0 20px;
  }

  #site-navigation a:hover {
      border-bottom: 5px solid #fe5000;
  }

  @media only screen and (min-device-width: 1024px) {
    #site-navigation {
      height: auto;
    }
    #site-navigation a{
        padding:0 1rem;
      }
    #site-navigation #main-menu {
      display: block;
      height: 100px;
    }
    #site-navigation > label {
      display: none
    }
    #site-navigation ul li {
      display: inline-block;
      height: 100px;
    }
  }
  

  @media (max-width:420px) {
      header { height:10vh; }
    header a.logo{ 
        width:200px;
        height: auto;
        text-align: left;
        margin: 0;
        margin-bottom: -30px;
    }
    #site-navigation a{ height:50px !important; }
    main section{ height:auto; min-height:90vh !important; padding:50px 0;}
    main section p{ margin:20px !important; text-align: center !important;}
    main section.operations span{ margin:20px !important; text-align: center !important; line-height:44px; display:block; }
    main section.about .six{ background-color: #000;}
    main section.home h1{ font-size: 5rem; }
    main section.sect h2{ font-size: 4rem; }
    main section.home h5{ font-size: 4rem !important; line-height: 5rem !important;}
}










html, body {
   
    padding: 0px;
    margin: 0px;
}

.example-marquee {
    position: relative;
    width: 100%;
}

.content {
    display: table;
    width: 100%;
    min-height: 100vh;
    z-index: 1;
    position: relative;
}

.content .inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
}

.content .inner h1 {
    font-size: 62px;
    color: white;
    text-shadow: 3px 3px 3px rgba(0,0,0,0.5);
}

.video-background-controls button {
    font-size: 32px;
    display: inline-block;
    padding: 0px;
    margin: 0px;
    height: 32px;
    width: 32px;
    border-radius: 16px;
    line-height: 32px;
    border: none;
    background: none;
    -webkit-appearance: none;
    color: white;
    filter: drop-shadow(0px 0px 1px black);
    cursor: pointer;
    opacity: 1;
    transition: all 250ms ease-in-out;
    margin-left: 10px;
}

.video-background-controls button:hover {
    opacity: 0.5;
}

iframe {
    transition: opacity 500ms ease-in-out;
    transition-delay: 250ms;
}