/*!
 * Start Bootstrap - Landing Page Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

/*Variables and Fonts*/
 :root 
 {
    --main-bg-color: #151820;
    --main-bg-color-alt: #262A3A;
    --main-txt-color: rgb(255 165 29);
    --header-bg-image: url(../img/HubHeader.svg);
    --footer-bg-image: url(../img/HubFooter.svg);

    --header-height: 17.657vh;
    --footer-height: 14.685vh;

    --hub-kai-no-glow: url(../img/kaiHubDefault.svg);
    --hub-monarchs-no-glow: url(../img/momHubDefault.svg);
    --hub-vanne-no-glow: url(../img/vanHubDefault.svg);

    --hub-kai-glow: url(../img/KaiHub.svg);
    --hub-monarchs-glow: url(../img/MomHub.svg);
    --hub-vanne-glow: url(../img/VanHub.svg);

    --image-site-title: img/hubTitle.svg;

    --title-width: calc(.39063 * var(--main-width));
    --title-height: calc(.11574 * var(--main-height));
    --title-offset-x: calc(.30469 * var(--main-width));
    --title-offset-y: calc(0.19213 * var(--main-height));

    --site-buttons-container-width: calc(.53333 * var(--main-width));
    --site-buttons-container-height: calc(.56667 * (var(--main-height)));

    --site-buttons-container-offset-x: calc(.23333 * var(--main-width));
    --site-buttons-container-offset-y: calc(.43333 * var(--main-height));

    --site-button-width: calc(.31035 * var(--site-buttons-container-width));
    --site-button-height: calc(1 * var(--site-buttons-container-height));
    }


.topnav {
    font-size: 14px;
}

.lead {
    font-size: 18px;
    font-weight: 400;
}




#site-buttons{
    display: inline-flex;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    justify-items: center;
    flex-direction: row;
    flex-wrap: nowrap;

    width: var(--site-buttons-container-width);
    height: var(--site-buttons-container-height);

    transform-origin: top left;
    transform: translate(0, calc((375 / 2160) * var(--display-height)));
    position: relative;
    margin: 5px;
    bottom: 0;
}

.hub-button{
    background-image: url(../img/hubWindow.svg);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center;

    clip-path: url(../img/hubWindow.svg);

    cursor:url(../img/cursor.png) 0 0, auto;

    width:var(--site-button-width); 
    height:var(--site-button-height);


    flex-direction: column;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    border-radius: 10px;
    margin: 1px;
    text-indent: -999px;
    /* padding: 15px; */
    border: 25px;
    margin: 2px;
    flex-wrap: nowrap;
    align-content: center;
}

.hub-button:hover{
    filter: drop-shadow(0 0 20px 5px rgba(173, 248, 255, 0.6));
    transition: drop-shadow 0.3s ease-in-out;
}

#hub-kai:hover{
    content: url(../img/KaiHub.svg);
    filter: drop-shadow( 0 0 20px 5px rgba(2, 39, 34, 0.6));
    transition: drop-shadow 0.3s ease-in-out;
}

#hub-monarchs:hover{
    content: url(../img/MomHub.svg);
    filter: drop-shadow( 0 0 20px 5px rgba(27, 2, 39, 0.6));
    transition: drop-shadow 0.3s ease-in-out;
}

#hub-vanne:hover{
    content: url(../img/VanHub.svg);
    filter: drop-shadow( 0 0 20px 5px rgba(39, 2, 12, 0.6));
    transition: drop-shadow 0.3s ease-in-out;
}

.hub-button-banner{
    position: relative;
    padding: 5;
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    width: 160%;
    height: 29%;
    border-radius: 1.5px;
}

.hub-button-banner image{
    x: 0;
    y: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px 0;
    align-self: flex-end;
}

.network-name 
{
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 2px;
}

.content-section-a {
    padding: 50px 0;
    background-color: #f8f8f8;
}

.content-section-b {
    padding: 50px 0;
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

.section-heading {
    margin-bottom: 30px;
}

.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}

.banner {
    padding: 100px 0;
    color: #f8f8f8;
    background: url(../img/banner-bg.jpg) no-repeat center center;
    background-size: cover;
}

.banner h2 {
    margin: 0;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 3em;
}

.banner ul {
    margin-bottom: 0;
}

.banner-social-buttons {
    float: right;
    margin-top: 0;
}

p.copyright {
    margin: 15px 0 0;
}

a.email-address {
    color: #FFFFFF;
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

a.email-address:hover {
    color: #FFFFFF;
}