@font-face {
    font-family: 'Gtek Technology';
    src: url('../fonts/gtek/gtek_technology.eot');
    src: local('☺'),
    url('../fonts/gtek/gtek_technology.woff') format('woff'),
    url('../fonts/gtek/gtek_technology.ttf') format('truetype'),
    url('../fonts/gtek/gtek_technology.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
    min-height: 100%;
    padding: 0;
    margin: 0;
}

body {
    background: #0f2b36 url("../img/bg-party.jpg") no-repeat center bottom;
    font-family: 'Ubuntu Condensed', sans-serif;
}

.container {
    width: 100%;
    padding: 0 25px;
}

/** ANIMATION(S) **/

.animation-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0f2b36;
    z-index: 10000;
}

/** INTRO **/

#intro {
    position: absolute;
    width: 100%;
    top: 50%;
    height: 200px;
    margin-top: -100px;
}

#intro h1 {
    margin: 0;
    font-family: "Gtek Technology", sans-serif;
    font-size: 180px;
    line-height: 200px;
    text-align: center;
    text-shadow: 1px 1px 5px #034359;
    color: #08759E;
}

/** NAVBAR **/

.navbar {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

/** WELL **/

.well {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: 1px 1px 4px 0 #666;
    box-shadow: 1px 1px 4px 0 #666;
    padding: 0 0 20px 0;
    border: 0;
}

/** HEADLINES **/

h2.workday-countdown {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 20px;
}

h2.workday-countdown strong {
    font-size: 25px;
}

.well h2 {
    margin-top: 0;
    margin-bottom: 30px;
    padding: 15px;
}

.well h2 span {
    display: inline-block;
}

/** PROFILE **/

.profile {
    position: relative;
    margin: 10px;
    padding-right: 10px;
    -webkit-box-shadow: 2px 1px 3px 0 #a2a5ae;
    box-shadow: 2px 1px 3px 0 #a2a5ae;
}

.profile.offline {
    opacity: 0.3;
}

.profile .thumbnail {
    width: 100px;
    height: 100px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 5px solid transparent;
    padding: 0;
    margin-right: 15px;
    margin-bottom: 0;
    overflow: hidden;
}

.profile.online .thumbnail {
    border-color: #3ca43c;
}

.profile.offline .thumbnail {
    border-color: #787a82;
}

.profile .thumbnail > img {
    max-width: 100px;
    max-height: 100px;
}

.profile h3 {
    margin-top: 5px;
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
}

.profile h3 small {
    font-size: 55%;
}

.profile h3 span {
    display: inline-block;
}

.profile hr {
    margin-top: 10px;
    margin-bottom: 10px;
}

.profile div.marks {
    position: absolute;
    right: 10px;
    top: 40px;
    height: 30px;
}

.profile div.marks img {
    height: 30px;
}

.profile .progress {
    margin-top: 5px;
    margin-bottom: 0;
}

/** OFFICE **/

.office {
    text-align: center;
}

.office.col-xs-3 {
    margin-top: 25px;
}

.office img {
    margin-bottom: 20px;
}

.office .fa-trophy {
    text-shadow: 1px 1px 2px #9e9e9e;
}

.office .fa-trophy-gold {
    color: #e5af00;
    font-size: 140px;
}

.office .fa-trophy-silver {
    margin-top: 105px;
    color: #e6ecec;
    font-size: 100px;
}

.office .fa-trophy-bronze {
    margin-top: 125px;
    color: #9c7d2f;
    font-size: 80px;
}

.office .well {
    height: 295px;
}

.office.col-xs-3 .well {
    height: 285px;
}

.office .well h2 {
    background-color: #0582b1;
    font-size: 220%;
}

.office .well h3 {
    font-weight: bold;
    font-size: 300%;
}

.office .well .btn {
    width: 90%;
    margin: 30px 5% 0;
}

/** CHALLENGE **/

.challenge .well {
    margin: 20px auto;
}

.challenge .well .challenge-header {
    position: relative;
    height: 60px;
    background: #7f5cbd;
}

.challenge .well .challenge-header:before {
    content: "\f11d";
    position: absolute;
    width: 80px;
    height: 80px;
    left: -25px;
    top: -10px;
    border: 4px solid #0f2b36;
    background: #7f5cbd;
    z-index: 10;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    color: #f5f5f5;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 3em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    line-height: 75px;
}

.challenge .well h2 {
    margin: 0 0 0 70px;
    padding: 10px;
    color: #e0e0e0;
}

.challenge .well h2 span {
    color: #ffffff;
    font-weight: bold;
    font-size: 38px;
}

.challenge .well .challenge-body {
    padding: 20px 20px 0;
}

.challenge .well .challenge-body .progress {
    position: relative;
    margin-top: 40px;
    margin-bottom: 0;
}

.challenge .well .challenge-body .progress > i {
    position: absolute;
    right: 3px;
    top: 3px;
}

.challenge .well .challenge-body .progress .progress-bar {
    position: relative;
    background-color: #7f5cbd;
}

.challenge .well .challenge-body .progress .progress-bar > span {
    position: absolute;
}

/** COLORS **/

.bg-color-yellow {
    background-color: #FFC200 !important;
}

.bg-color-blue {
    background-color: #0588b0 !important;
}

.bg-color-gold {
    background-color: #e5af00 !important;
}

.bg-color-silver {
    background-color: #e6ecec !important;
}

.bg-color-bronze {
    background-color: #9C7D2F !important;
}

.bg-color-green {
    background-color: #3ca43c !important;
}

.txt-color-white {
    color: #ffffff !important;
}

.txt-color-gold {
    color: #e5af00 !important;
}

.txt-color-red {
    color: #920303 !important;
}

/** MARGINS & PADDINGS **/

.padding-10 {
    padding: 10px;
}

/** BUTTONS **/

.btn {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.btn.btn-primary {
    background-color: #055e7e;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
.btn.btn-primary.active {
    background-color: #054661;
}

/** TOOLTIP(S) **/

.tooltip .tooltip-inner {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.poster {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    background: #0f2b36 url("../img/bg-party.jpg") no-repeat center bottom;
    z-index: 1000;
}

.poster > img {
    max-height: 100%;
}