.w3-theme-l5 {
    color: #000 !important;
    background-color: #f3f6f9 !important
}

.w3-theme-l4 {
    color: #000 !important;
    background-color: #d9e1ea !important
}

.w3-theme-l3 {
    color: #000 !important;
    background-color: #b2c3d6 !important
}

.w3-theme-l2 {
    color: #fff !important;
    background-color: #8ca4c1 !important
}

.w3-theme-l1 {
    color: #fff !important;
    background-color: #6586ac !important
}

.w3-theme-d1 {
    color: #fff !important;
    background-color: #435e7d !important
}

.w3-theme-d2 {
    color: #fff !important;
    background-color: #3c546f !important
}

.w3-theme-d3 {
    color: #fff !important;
    background-color: #344961 !important
}

.w3-theme-d4 {
    color: #fff !important;
    background-color: #2d3f54 !important
}

.w3-theme-d5 {
    color: #fff !important;
    background-color: #253446 !important
}

.w3-theme-light {
    color: #000 !important;
    background-color: #f3f6f9 !important
}

.w3-theme-dark {
    color: #fff !important;
    background-color: #253446 !important;
    /*font-family: 'Pompiere', cursive;*/
}

.w3-theme-action {
    color: #fff !important;
    background-color: #253446 !important
}

.w3-theme {
    color: #fff !important;
    background-color: #4b698c !important;
    /*font-family: 'Pompiere', cursive;*/
}

.w3-text-theme {
    color: #4b698c !important
}

.w3-border-theme {
    border-color: #4b698c !important
}

.w3-hover-theme:hover {
    color: #fff !important;
    background-color: #4b698c !important
}

.w3-hover-text-theme {
    color: #4b698c !important
}

.w3-hover-border-theme:hover {
    border-color: #4b698c !important
}

.ba-theme-text-white {
    font-family: 'Pompiere', cursive;
    color: #fff !important;
    font-size: 250%;
    text-align: center;
    line-height: 105%;
}

.ba-theme-opac {
    color: #fff !important;
    border-radius: 50%;
    background-color: rgba(75, 105, 140, 0.6) !important;
    width: 100%;
    height: 100%;
    max-width: 275px;
    max-height: 275px;
    padding: 10px;
    text-align: center;
}

.ba-theme-text-black {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 60px
}

.ba-theme-h1-black {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 300%;
    text-align: center
}

.ba-theme-h2-black {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 200%
}

.ba-theme-h2-blk-ctr {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 200%;
    text-align: center
}

.ba-theme-h2-blk-left {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 200%;
    text-align: left
}

.ba-theme-h2-right {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 200%;
    text-align: right
}

.ba-theme-h3-black {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 150%
}

.ba-theme-h3-blk-ctr {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 150%;
    text-align: center
}

.ba-theme-h3-blk-left {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 150%;
    text-align: left
}

.ba-theme-h3-right {
    font-family: 'Pompiere', cursive;
    color: #000 !important;
    font-size: 150%;
    text-align: right
}

.ba-theme-p-ctr {
    text-align: center;
}

.ba-theme-p-left {
    text-align: left;
}

.ba-theme-p-right {
    text-align: right;
}

.ba-theme-opac1 {
    color: #fff !important;
    background-color: rgba(75, 105, 140, 0.6) !important;
    padding: 3px;
    width: 100%;
}

.ba-theme-topfix {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 1;
    color: #fff !important;
    background-color: rgba(75, 105, 140, 0.6) !important;
    width: 100%;
    height: auto;
}

.ba-theme-navbar {
    color: #fff !important;
    background-color: rgba(75, 105, 140, 0.6) !important;
}

.ba-theme-topimg {
    padding: 5px 5px 5px 5px;
    display: block;
    margin: auto
}

.ba-theme-stay {
    color: #fff !important;
    background-color: rgba(75, 105, 140, 0.6) !important;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%
}

.ba-tele {
    text-decoration: none;
    color: #fff !important;
    text-align: center;
    padding: 5px 5px 5px 5px;
}

    .ba-tele:hover {
        color: #4b698c;
    }

.ba-tele-blk {
    text-decoration: none;
    color: #000 !important;
    padding: 5px 5px 5px 5px;
    font-size: 150%
}

.ba-center {
    position: relative;
    border: 3px solid green;
}

    .ba-center p {
        margin: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

.ba-float-cont {
    margin: auto;
    width: 75%;
    border: 3px solid #73AD21;
}

.ba-float-cont1 {
    margin: auto;
    position: absolute;
    top: 50%;
    right: 0%;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
}

.ba-float-box {
    display: inline-block;
    width: 480px;
    margin: 0px;
    border: 3px solid #73AD21;
    padding: 0;
}

.ba-float-text {
    display: inline-block;
    width: 480px;
    margin: 0px;
    border: 3px solid #73AD21;
    padding: 0;
}

.ba-float-box-op {
    float: right;
    width: 480px;
    margin: 0px;
    border: 3px solid #73AD21;
    padding: 0;
}

.ba-clearfix::after {
    content: "";
    clear: both;
    display: table;
    padding: 0;
    margin: 0;
}

.ba-flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
}

    .ba-flex-container > * {
        padding: 10px;
        flex: 1 100%
    }

@media all and (min-width: 600px) {
    .aside {
        flex: 1 auto;
    }
}

@media all and (min-width: 800px) {
    .main {
        flex: 1 0px;
    }

    .aside1 {
        order: 1;
    }

    .main {
        order: 2;
    }

    .aside2 {
        order: 3;
    }

    .footer {
        order: 4;
    }
}

.ba-flex-item {
    background-color: cornflowerblue;
    width: 100px;
    height: 100px;
    margin: 10px;
}