/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
    width: 100%;
    min-height: 100vh;
    /*background: linear-gradient(rgba(0, 143, 212, 0.1), rgba(0, 143, 212, 0.6)), url("../../../images/hero-bg7.jpg") top center;*/
    background: radial-gradient(rgba(255, 255, 255, 0.6) 50%, rgba(0, 143, 212, 0.0)), url("../../../images/hero-bg11.jpg") top center;
    background-size: cover;
    /*position: relative;*/
    margin: 0px 0px 0px 0px;
}

#hero #logo{
    max-height: 150px;
    padding: 0px 30px 0px 30px;
}

#hero .hero-container {
    padding-top: 100px;
    padding-bottom: 30px;
    justify-content: center;
    align-items: center;
}

#hero .hero-container h1{
    color: #444 !important;
}

#hero .hero-container a{
  text-decoration: none;
}

#hero .hero-container .content{
    border: 1px solid #008fd440;
    border-radius: 15px;
    background: #ffffff50;
    padding: 15px;
    margin: 15px 0px;
}

#hero .hero-container .content h3{
    font-size: 20px;
    font-weight: 700;
    color: #005c88 !important;
    text-align: center;
    margin: 0px 0px;
}

#hero .hero-container .content p{
    text-align: left;
    padding-top: 15px;
}

#hero span.program{
    font-weight: 600;
}

#hero span.program.steelblue{
    color: #0277af;
}

#hero span.program.cyan{
    color: #00885c;
}

#hero span.program.magenta{
    color: #af00af;
}

#hero .programs-scroll{
    color: #008fd4;
    text-align: center;
    padding-top: 50px;
}

#hero .programs-scroll h3{
    font-size: 25px;
    font-weight: 600;
    color: #005c88 !important;
    padding: 0px 0px 15px 0px;
}

#hero .programs-scroll i{
    color: #008fd4;
    font-size: 45px;
}

@media (min-width: 1024px) {
    #hero {
        background-attachment: fixed;
    }

    #hero .hero-container {
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        padding-bottom: 30px;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    #hero h1 {
    font-size: 28px;
    }
}

@media (max-width: 768px) {
    #hero #logo{
        max-height: 100px;
    }

    #hero h1 {
        font-size: 20px;
    }
}