/*****************************************************************************************************************************************/
/* CSS VARIABLES */
/*****************************************************************************************************************************************/

:root {
    /* Header Sizes  */
    --kb-header-height-top: 50px;
    --kb-header-height-bottom: 100px;
    --kb-header-line-size: 1px;
    --kb-header-height-total: calc(var(--kb-header-height-top) + var(--kb-header-height-bottom) + var(--kb-header-line-size));
    /* Footer Sizes */
    --kb-footer-height-frame: 60px;
    --kb-footer-line-size: 1px;
    --kb-footer-height-total: calc(var(--kb-footer-height-frame) + var(--kb-footer-line-size));
}


/*****************************************************************************************************************************************/
/* PAGE STRUCTURE */
/*****************************************************************************************************************************************/

.kb-container {
}

.kb-header {
    border-bottom: var(--kb-header-line-size) solid var(--kb-main-border-color);
    margin-bottom: 40px;
}

    .kb-header .kb-header-top {

    }

    .kb-header .kb-header-bottom {
        background-color: #FFFFFF;
    }

        .kb-header .kb-header-bottom .kb-content-frame {
            height: var(--kb-header-height-bottom);
        }

        .kb-header .kb-header-bottom .navbar-nav {

        }

            .kb-header .kb-header-bottom .navbar-nav .nav-item {
            
            }

                .kb-header .kb-header-bottom .navbar-nav .nav-item .nav-link,
                .kb-header .kb-header-bottom .navbar-nav .nav-item .btn {
                    height: 40px;
                }

                .kb-header .kb-header-bottom .navbar-nav .nav-item .nav-link {
                    margin-left: 4px;
                    margin-right: 4px;
                    padding-left: 16px;
                    padding-right: 16px;
                    text-transform: uppercase;
                    font-weight: 600;
                    font-size: 14px;
                    border: 1px solid #FFFFFF;
                    border-radius: 5px;
                }

                    .kb-header .kb-header-bottom .navbar-nav .nav-item .nav-link:hover {
                        color: var(--kb-offset-link-color-1);
                        border: 1px solid var(--kb-main-border-color);
                    }

                .kb-header .kb-header-bottom .navbar-nav .nav-item .active {
                    border: 1px solid var(--kb-offset-brand-color-4);
                    background-color: var(--kb-offset-brand-color-4);
                }

                .kb-header .kb-header-bottom .navbar-nav .nav-item .kb-nav-buttons-frame {

                }

            .kb-header .kb-header-bottom .navbar-nav .btn {
                margin-left: 10px;
                display: inline-flex;
                align-items: center;
            }

.kb-body {
}

    .kb-body .kb-body-header,
    .kb-body .kb-body-section,
    .kb-body .kb-body-footer {
    }

        .kb-body .kb-body-header .kb-content-frame,
        .kb-body .kb-body-section .kb-content-frame,
        .kb-body .kb-body-footer .kb-content-frame {
            max-width: 60em;
        }

.kb-footer {
    border-top: var(--kb-footer-line-size) solid var(--kb-main-border-color);
}

    .kb-footer .kb-content-frame {
        height: var(--kb-footer-height-total);
    }


/*****************************************************************************************************************************************/
/* PAGE STRUCTURE SPECIFIC STYLES */
/*****************************************************************************************************************************************/

.kb-bg-01 {
    background: url(/images/img-bg1.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
    box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}



/*****************************************************************************************************************************************/
/* FORM STYLES */
/*****************************************************************************************************************************************/

.kb-form {
    max-width: 520px;
    padding: 40px;
    padding-left: 80px;
    padding-right: 80px;
    background: none;
    background-color: transparent;
    background: rgba(255, 255, 255, .25);
    color: var(--kb-color-text);
    border: 1px solid var(--kb-main-border-color);
    border-radius: 2px;
}

    .kb-form input[type="accesscode"],
    .kb-form .btn {
        margin-bottom: 24px;
    }

    .kb-form input[type="accesscode"] {
        border-radius: 2px;
    }


/*****************************************************************************************************************************************/
/* SHARED STYLES */
/*****************************************************************************************************************************************/

.kb-link-separator {
    color: var(--kb-offset-border-color-2);
    margin-left: 2px;
    margin-right: 2px;
}


/*****************************************************************************************************************************************/
/* BOOTSTRAP STYLES */
/*****************************************************************************************************************************************/

.lead {
    font-weight: 600;
}


/*****************************************************************************************************************************************/
/* PAGE RESPONSIVE / MEDIA STYLES */
/*****************************************************************************************************************************************/

/* MOBILE READY STYLES */

@media only screen and (max-width: 767px) {
    .kb-footer {
        padding-bottom: 40px !important;
    }
}




















/*****************************************************************************************************************************************/
/* TEST AREA */
/*****************************************************************************************************************************************/

.test-my-header {
    border: 10px solid red;
}

    .test-my-header > .row {
        border: 10px solid blue;
    }

        .test-my-header > .row > .col {
            border: 10px solid green;
        }

            .test-my-header > .row > .col > .kb-content-frame {
                border: 10px solid silver;
            }

                .test-my-header > .row > .col > .kb-content-frame > .row {
                    border: 10px solid hotpink;
                }

                    .test-my-header > .row > .col > .kb-content-frame > .row > .col-md {
                        border: 10px solid dodgerblue;
                    }
                    .test-my-header > .row > .col > .kb-content-frame > .row > .col-md:nth-child(even) {
                        border: 10px solid lightblue;
                    }