﻿body {
    font-size: 1.1rem;
    background-color: #f5f6fa;
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

nav {
    z-index: 100;
    box-shadow: 0 3px 6px rgba(0,0,0,.1);
    background-color: #fff;
}

#main-menu .nav-link{
    color: #212529;
    font-weight: 500;
    font-size: 1.05rem;
}

main {
    background: url(images/hotAirBalloonsBanner.jpg) top center no-repeat;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

.main-card {
    box-shadow: 0px 4px 12px rgba(166, 176, 186, 0.4);
    /*padding: 1rem;*/
    border-radius: 1rem;
    border: 0px;
}

.list-unstyled li {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

.home-banner {
    position: relative;
    background: url(images/hotAirBalloons.jpg) bottom center no-repeat;
    background-color: #092218;
    color: #000;
    min-height: 550px;
    background-size: cover;
    display: flex;
    justify-content: center;
}

.card-links a {
    text-decoration: none;
}

.card-links i {
    color: #fff;
}

.card-links .card {
    box-shadow: 0 4px 8px rgba(0,0,0,0.16), 0 4px 8px rgba(0,0,0,0.23);
    color: #fff;
    border: 0;
}

.card-links a:hover .card {
    box-shadow: 0 6px 12px rgba(0,0,0,0.16), 0 6px 12px rgba(0,0,0,0.23);
}

.bg-green {
    background-color: #23a259;
}

.bg-purple {
    background-color: #9b58b5;
}

.bg-red {
    background-color: #e84c3d;
}

.bg-blue {
    background-color: #3598db;
}

.bg-orange {
    background-color: #db7835;
}

section{
    margin-bottom: 3rem;
}

.icon-wrapper {
    text-decoration: none;
    margin-left: .25rem;
    margin-right: .25rem;
}

.icon {
    display: flex;
    width: 35px;
    height: 35px;
    border-radius: 35px;
    font-size: 1.05rem;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: #f8f9fa;
    border: 1px solid #f8f9fa;
}

    .icon:hover {
        background-color: rgba(0,0,0,0.2);
    }

.nested-nav {    
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background-color: #ba3d31;
}

    .nested-nav .nav-item .nav-link {
        color: #f8f9fa !important;
        width: 100%;
        border-radius: 0px;
        text-align: left;
    }

    .nested-nav .nav-item {
        border-bottom: 1px solid #9b3329;
    }

        .nested-nav .nav-item:hover {
            background-color: rgb(0,0,0,0.2);
        }

        .nested-nav .nav-item .active {
            background-color: rgb(0,0,0,0.3);
            color: #f8f9fa !important;
        }

#login {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
}

.username {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.password {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

@media (min-width: 768px) {
    .nested-nav {
        border-bottom-left-radius: 1rem;
        border-top-left-radius: 1rem;
        border-top-right-radius: 0px;
    }
}