/* ELEMENT STYLES */
body{
    font-family: 'Lato', sans-serif;
    background-color: #F9FAFC;
    color: #1F2D3D;
}
p{
    color: #3C4858;
}
h1,h2,h3,h4{
    color: #1F2D3D;
}
h1{
    font-size: 3rem;
}
h2{
    font-size: 2rem;
}
h3{
    font-size: 1.6rem;
}
h4{
    font-size: 1rem;
    margin-bottom: -30px;
    font-style: italic;
}
a {
    transition: all;
    transition-duration: 300ms;
    color: #009EEB;
    text-decoration: inherit;
}
a:hover, a:focus{
    color: #592DEA;
}
table, th, td {
  border: 1px solid #C0CCDA;
  border-collapse: collapse;
}
th, td{
    padding: 5px 10px;
}
table {
    min-width: 600px;
}
th {
    text-align: left;
    min-width: 100px;
}
table tr:nth-child(odd) {
    background-color: #fff;
}
img {
    padding-right: 40px;
    padding-bottom: 20px;
    padding-top: 10px;
    width: 100%;
    height: auto;
}




/* CLASS STYLES */
.section--hero{
    padding-top: 60px;
    padding-bottom: 80px;
    margin-bottom: 40px;
    opacity: 0;
}
.section--hero-home{
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.45), 
            rgba(0, 0, 0, 0.45)
        ),
        url('/gis/img/compressed/lake0.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section--hero-101{
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.15), 
            rgba(0, 0, 0, 0.15)
        ),
        url('/gis/img/compressed/map0.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section--hero-111{
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.15), 
            rgba(0, 0, 0, 0.15)
        ),
        url('/gis/img/compressed/globe0.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section--hero-121{
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.25), 
            rgba(0, 0, 0, 0.25)
        ),
        url('/gis/img/compressed/drone0.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section--hero-122{
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.25), 
            rgba(0, 0, 0, 0.25)
        ),
        url('/gis/img/compressed/tech0.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section--hero-205{
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.25), 
            rgba(0, 0, 0, 0.25)
        ),
        url('/gis/img/compressed/map1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section--hero-220{
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.25), 
            rgba(0, 0, 0, 0.25)
        ),
        url('/gis/img/compressed/globe1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section--hero-222{
    background: 
        linear-gradient(
            rgba(0, 0, 0, 0.45), 
            rgba(0, 0, 0, 0.45)
        ),
        url('/gis/img/compressed/coding0.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.section--hero h1{
    color: #ffffff;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.section--hero h3{
    color: #EFF2F7;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.section--hero a{
    color: #85D7FF;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.section--hero a:hover, .banner a:focus{
    text-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
.section--video{
    position: relative;
    height: 400px;
    width: 100%;
    overflow: hidden;
}
.section--video video{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.content{
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
}
.footer{
    height: 100px;
    opacity: 0;
}
.logo{
    width: 200px;
}




/* HELPERS */
.spacer{
    height: 100px;
}