html,
body,
header,
.view {
    height: 100%;
}
/* Navigation*/

.navbar {
    background-color: #0b1117;
    /* gradient */
    background-image: linear-gradient( 115deg, #ffffff 0%, #ffffff 30%, #0b1117 100% );
    color: #000000 !important;
}
        
.top-nav-collapse {
    background-color: #154771;
}
        
@media only screen and (max-width: 768px) {
    .navbar {
        background-color: #154771;
        color:#000000;
    }
}
/*Intro*/

.view {
    background: url("/peoplehub/Content/images/unthsc/gdl1.jpg")no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.client-text {
    color: rgba(255, 255, 255, 0.87) !important;
    font-weight:400;
    font-size: 2rem;
}
        
@media (max-width: 768px) {
    .full-bg-img,
    .view {
        height: 100%;
        position: relative;
    }
}
        
.description {
    padding-top: 25%;
    padding-bottom: 3rem;
}
        
@media (max-width: 992px) {
    .description,
    .padding-top-7-md {
        padding-top: 7rem;
    }
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-300 {
    font-weight: 300;
}

@media (max-height: 500px) {.main-content {margin-top: 50px;}}
@media (max-height: 475px) {.main-content {margin-top: 75px;}}
@media (max-height: 450px) {.main-content {margin-top: 100px;}}
@media (max-height: 425px) {.main-content {margin-top: 125px;}}
@media (max-height: 400px) {.main-content {margin-top: 150px;}}
@media (max-height: 375px) {.main-content {margin-top: 175px;}}
@media (max-height: 350px) {.main-content {margin-top: 200px;}}
@media (max-height: 325px) {.main-content {margin-top: 225px;}}
@media (max-height: 300px) {.main-content {margin-top: 250px;}}
@media (max-height: 275px) {.main-content {margin-top: 275px;}}
@media (max-height: 250px) {.main-content {margin-top: 300px;}}
@media (max-height: 225px) {.main-content {margin-top: 325px;}}
@media (max-height: 200px) {.main-content {margin-top: 350px;}}
@media (max-height: 175px) {.main-content {margin-top: 375px;}}
@media (max-height: 150px) {.main-content {margin-top: 400px;}}
@media (max-height: 125px) {.main-content {margin-top: 425px;}}
@media (max-height: 100px) {.main-content {margin-top: 450px;}}
@media (max-height: 75px) {.main-content {margin-top: 475px;}}
@media (max-height: 50px) {.main-content {margin-top: 500px;}}
@media (max-height: 25px) {.main-content {margin-top: 525px;}}

div.view.hm-black-strong {
    min-height: 500px;
}

footer.page-footer {
    background-color: #275C88;
}

main {
    /* flex: 1; would be enough but it looks bad in IE */
    flex: 1 0 auto;
}

.carousel-indicators {
    bottom: -25px;
}

.carousel-indicators li {
    background-color: #2196F3;
}

.carousel-indicators .active {
    background-color: #0D47A1;
}

/* The loader */
.loader {
    height: 300px;
    perspective: 600px;
    transform-style: preserve-3d;
}

/* The dot */
.dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left: -100px;
    border-radius: 100px;
    border: 20px solid #1e3f57;
    transform-style: preserve-3d;
    transform: scale(0) rotateX(60deg);
    animation: dot 3s cubic-bezier(.67,.08,.46,1.5) infinite;
}

.dot:nth-child(2) {
    animation-delay: 200ms;
}

.dot:nth-child(3) {
    animation-delay: 400ms;
}

.dot:nth-child(4) {
    animation-delay: 600ms;
}

.dot:nth-child(5) {
    animation-delay: 800ms;
}

.dot:nth-child(6) {
    animation-delay: 1000ms;
}

.dot:nth-child(7) {
    animation-delay: 1200ms;
}

.dot:nth-child(8) {
    animation-delay: 1400ms;
}

@keyframes dot {
    0% {
        opacity: 0;
        border-color: #6bb2cd;
        transform: rotateX(60deg) rotateY(45deg) translateZ(-100px) scale(0.1);
    }

    40% {
        opacity: 1;
        transform: rotateX(0deg) rotateY(20deg) translateZ(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: rotateX(60deg) rotateY(-45deg) translateZ(-100px) scale(0.1);
    }
}