.hobin {
    transition: 0.5s;
}


/* Banner */

@-moz-keyframes reveal-banner {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes reveal-banner {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes reveal-banner {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-ms-keyframes reveal-banner {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes reveal-banner {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes draw-border {
    0% {
        width: 0%;
        opacity: 0;
    }
    100% {
        width: 70%;
        opacity: 1;
    }
}

@keyframes hobin-bold {
    0% {
        font-weight: 100;
    }
    100% {
        font-weight: 900;
    }
}

@keyframes hobin-bolda {
    0% {
        font-weight: 200;
        border-style: none;
    }
    100% {
        font-weight: 600;
        border-bottom-style: solid;
    }
}

#banner {
    background-attachment: scroll, scroll, scroll, fixed;
    background-image: url("../Images/overlay.png"), url("../Images/Control.jpg");
    background-color: #fdfdfd;
    background-position: center, center;
    background-repeat: repeat, no-repeat;
    background-size: contain, cover;
    color: white;
    cursor: default;
    padding: 10em 0;
    text-align: center;
    animation: reveal-banner 0.5s 0s ease-out;
    animation-fill-mode: forwards;
}

#banner .inner {
    -moz-animation: reveal-banner 1s 0.5s ease-in-out;
    -webkit-animation: reveal-banner 1s 0.5s ease-in-out;
    -o-animation: reveal-banner 1s 0.5s ease-in-out;
    -ms-animation: reveal-banner 1s 0.5s ease-in-out;
    animation: reveal-banner 1s 0.5s ease-in-out;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    background: rgba(0, 0, 0, 0.51);
    color: white;
    display: inline-block;
    opacity: 0;
    padding: 3em;
    text-align: center;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    transition: 1s;
}

#banner .inner header {
    width: 0%;
    opacity: 0;
    display: inline-block;
    border-bottom: solid 2px;
    border-top: solid 2px;
    margin: 0 0 2em 0;
    padding: 5px 0 5px 0;
    animation: draw-border 2s 1s ease-out;
    animation-fill-mode: forwards;
}

#banner .inner header h2 {
    border-bottom: solid 2px;
    border-top: solid 2px;
    font-size: 3.5em;
    font-weight: 100;
    letter-spacing: 0.1em;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    padding: 0px;
    margin: 0;
    animation: hobin-bold .5s 2.5s ease-out;
    animation-fill-mode: forwards;
}

#banner .inner header h2 #less {
    /*this is getting ridiculous*/
    font-weight: 100;
    font-size: 0.7em;
}

#banner .inner p {
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
}

#banner .inner p strong {
    color: inherit;
    font-weight: 400;
    text-decoration: none;
    animation: hobin-bolda .5s 3s ease-in-out;
    animation-fill-mode: forwards;
    border-width: 1px;
}

#banner .inner footer {
    margin: 2em 0 0 0;
}

#banner .inner:hover {
    transition-timing-function: ease-in-out;
    background-color: rgba(255, 255, 255, 0.16);
    margin: 4em 3em 2em 3em;
    /*Todd may want to remove this*/
}


/* END BANNER */

.hover:hover {
    border-bottom: solid 2px white;
    transition: 0.5s;
}

.hobinbody {
    background-color: #eee;
}

.navbar-clear {
    background-color: rgba(0, 0, 0, 0.4);
    border-bottom: black 1px solid;
    transition: 1s;
}

.navbar-clear:hover {
    border-bottom: white 1px solid;
}

.nopad {
    /* As usual, bootstrap ruining my day, and making my life difficult! */
    padding-top: 0px;
    padding-bottom: 0px;
}

.gear {
    background-attachment: scroll, scroll, scroll, fixed;
    background-image: url("../Images/overlay.png"), url("../Images/Console.jpg");
    background-color: #fdfdfd;
    background-position: center, center;
    background-repeat: repeat, no-repeat;
    background-size: contain, cover;
    color: white;
    cursor: default;
    padding: 10em 0;
    text-align: center;
    animation: reveal-banner 0.5s 0s ease-out;
    animation-fill-mode: forwards;
}

body {
    background-color: rgb(0, 0, 0) !important;
    background-position: center;
    background-repeat: repeat;
    background-size: contain;
}

.cgear {
    -moz-animation: reveal-banner 1s 0.5s ease-in-out;
    -webkit-animation: reveal-banner 1s 0.5s ease-in-out;
    -o-animation: reveal-banner 1s 0.5s ease-in-out;
    -ms-animation: reveal-banner 1s 0.5s ease-in-out;
    animation: reveal-banner 1s 0.5s ease-in-out;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    background: rgba(0, 0, 0, 0.51);
    color: white;
    display: inline-block;
    opacity: 0;
    padding: 3em;
    text-align: center;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    transition: 1s;
}

.gear #inner {
    -moz-animation: reveal-banner 1s 0.5s ease-in-out;
    -webkit-animation: reveal-banner 1s 0.5s ease-in-out;
    -o-animation: reveal-banner 1s 0.5s ease-in-out;
    -ms-animation: reveal-banner 1s 0.5s ease-in-out;
    animation: reveal-banner 1s 0.5s ease-in-out;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    background: rgba(0, 0, 0, 0.51);
    color: white;
    display: inline-block;
    opacity: 0;
    padding: 3em;
    text-align: center;
    border-style: solid;
    border-color: black;
    border-width: 1px;
    transition: 1s;
}

.gear #inneri {
    width: 0%;
    opacity: 0;
    display: inline-block;
    border-bottom: solid 2px;
    border-top: solid 2px;
    margin: 0 0 2em 0;
    padding: 5px 0 5px 0;
    animation: draw-border 2s 1s ease-out;
    animation-fill-mode: forwards;
}

.gear h2 {
    border-bottom: solid 2px;
    border-top: solid 2px;
    font-size: 3.5em;
    font-weight: 100;
    letter-spacing: 0.1em;
    text-align: center;
    position: relative;
    text-transform: uppercase;
    padding: 0px;
    margin: 0;
    animation: hobin-bold .5s 2.5s ease-out;
    animation-fill-mode: forwards;
}

.subtext {
    font-weight: 300;
}

.about {}

.toppad {
    margin-top: 1em;
}

.headersub {
    letter-spacing: 0.1em;
    margin: 0;
    text-transform: uppercase;
}

.headersub strong {
    color: inherit;
    font-weight: 400;
    text-decoration: none;
    animation: hobin-bolda .5s 3s ease-in-out;
    animation-fill-mode: forwards;
    border-width: 1px;
}

.about #why strong {
    font-size: 1.5em;
}

.hobinhr {
    border: 0;
    height: 1px;
    background: #333;
    background-image: linear-gradient(to right, #ccc, #333, #ccc);
}

.margin {
    margin: 1em;
}

.narrow {
    width: 65%;
}

.center {
    text-align: center;
    align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.thin {
    font-weight: 300;
}

.hairline {
    font-weight: 100;
}

.white {
    color: #c1c1c1;
}

.gallery {
    background-attachment: scroll, scroll, scroll, fixed;
    background-image: url("../Images/overlay.png"), url("../Images/live1.jpg");
    background-color: #fdfdfd;
    background-position: center, center;
    background-repeat: repeat, no-repeat;
    background-size: contain, cover;
    color: white;
    cursor: default;
    padding: 10em 0;
    text-align: center;
    animation: reveal-banner 0.5s 0s ease-out;
    animation-fill-mode: forwards;
}

.gal {
    border: 10px white solid;
    width: 100%;
}

.btn-lg {
    border-radius: 0px;
    font-size-adjust: 1.5em;
    padding: 15px 20px;
    text-transform: uppercase;
    font-weight: 900;
}

.jumbotron {
    background-color: #fff;
}