@font-face {
    font-family: FigurineCB AriesSP;
    src: url('../fonts/SpArFgRg.TTF');
}

.nowrap {
    white-space: nowrap;
}

.ue {
    background-color: #fff;
    position: relative;
    display: block;
}

.page-overlay {
    z-index: 9999;
    position: absolute;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0,0,0,0.1);*/
    transition: border-width 0.3s, background-color 0.3s;
    cursor: wait;
}

.modal-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    opacity: .6;
    background: #F9F9F9;
    height: 100%;
    z-index: 1000;
    transition: opacity .25s ease-in-out;
}

.block-overlay {
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(221,221,221,0.6);
    transition: border-width 0.3s, background-color 0.3s;
    cursor: not-allowed;
}

.margin-top {
    margin-top: 20px;
}

.margin-top-30 {
    margin-top: 30px !important;
}

.padding-bottom {
    padding-bottom: 20px;
}

.no-margin {
    margin: 0 !important;
}

.fixed {
    position: fixed;
    z-index: 99999;
}

.midnightHeader.default {
    background-color: white;
}

.midnightHeader.white {
    background-color: white;
}

.midnightHeader.black {
    background-color: black;
}

.container-loading {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: #000;
    background-color: rgba(238, 238, 238, 0.85);
    z-index: 100;
}

.spinner-main {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    margin: -25px 0 0 -25px;
    cursor: wait;
    border-radius: 50%;
    border: 5px solid;
    border-color: #fff #fff #03cc85 #03cc85;
    animation: spinner .8s infinite cubic-bezier(0.445,.05,.55,.95);
    -moz-animation: spinner .8s infinite cubic-bezier(0.445,.05,.55,.95);
    -webkit-animation: spinner .8s infinite cubic-bezier(0.445,.05,.55,.95);
    bottom: 20%;
}

@-moz-keyframes spinner {
    0% {
        -moz-transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(360deg);
    }
}

@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

.background-gray {
    background-color: #F9F9F9;
    width: 100%;
}

.background-orange {
    background-color: #F59027;
    width: 100%;
}

.background-green {
    background-color: #03cc85;
    width: 100%;
}

.container-login {
    height: 100%;
}

    .container-login .container {
        height: 100%;
        background-color: #03cc85;
        padding-top: 80px;
    }

    .container-login .background-green {
        height: 100%;
    }

.container-statistics {
    height: 100%;
    background-color: #F59027;
}

.container-menu,
.login-form-section {
    padding-bottom: 50px;
}

    .container-menu .hvr-bob {
        display: block;
    }

.main {
    z-index: 1050;
    height: 100%;
}

    .main .label {
        position: absolute;
        top: 10px;
        right: 25px;
    }

.container-home {
    background-color: #ddd;
    height: 100%;
}

.animated {
    -webkit-animation-duration: 0.35s;
    animation-duration: 0.35s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.splash {
    position: fixed;
    top: 0;
    z-index: 100;
    min-height: 480px;
    width: 100%;
    height: 100%;
    background: #ddd;
}

    .splash .logo {
        color: #03cc85;
        font-size: 50px;
    }

.loaded-ie .spinner-main,
.loaded-ie .splash {
    display: none;
}

.loaded .splash {
    /*-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
    -moz-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
    -ms-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
    -o-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
    animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;*/
    display: none;
}

@-webkit-keyframes animLoadedHeader {
    to {
        -webkit-transform: translate3d(0,-100%,0);
    }
}

@keyframes animLoadedHeader {
    to {
        -webkit-transform: translate3d(0,-100%,0);
        transform: translate3d(0,-100%,0);
    }
}

/*.loaded .spinner-main {
    opacity: 1;
}

.loaded .spinner-main {
    animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@keyframes animLoadedLoader {
    to {
        opacity: 0;
        transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1);
    }
}*/

.page-content,
.durandal-wrapper {
    height: 100%;
    background-color: #F9F9F9;
}

    .page-content section {
        background-color: #F9F9F9;
        height: 100%;
        min-height: 100%;
    }

    .page-content > .container-fluid {
        padding: 0;
    }

.page-content {
    overflow: scroll;
    overflow-x: hidden;
    /*margin-left: -20px;
    padding-left: 20px;*/
}

.section-container {
    padding: 0 10%;
}

/*#sidebar {
    background-image: url(images/sidebg-1.jpg);
    background-repeat: no-repeat;
    -ms-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-color: #2b2b2b;
    position: fixed;
    width: 250px;
    top: 0;
    left: 0;
    bottom: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

    #sidebar:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #000;
        -ms-opacity: 0.8;
        opacity: 0.8;
    }

    #sidebar ul > li {
        background-color: rgba(48, 48, 48, 0.6) !important;
        border-top: 1px solid rgba(55, 55, 55, 0.4) !important;
        border-bottom: 1px solid rgba(43, 43, 43, 0.4) !important;
    }

        #sidebar ul > li:hover,
        #sidebar ul > li:focus {
            background: #363636;
        }

            #sidebar ul > li:hover > a,
            #sidebar ul > li:focus > a {
                color: #f7f7f7;
            }

        #sidebar ul > li > a {
            color: #ccc;
            font-size: 14px;
            line-height: 45px;
            margin-left: 15px;
            display: block;
        }

            #sidebar ul > li > a > span {
                padding-left: 5%;
                margin-left: -15px;
                line-height: 45px;
                display: inline-block;
                -webkit-box-shadow: -3px 0 5px -4px #000;
                -ms-box-shadow: -3px 0 5px -4px #000;
                box-shadow: -3px 0 5px -4px #000;
            }

            #sidebar ul > li > a > .fa {
                float: left;
                line-height: 45px;
                width: 50px;
                text-align: center;
                font-size: 27px;
                position: relative;
                left: -15px;
            }

        #sidebar ul > li.active {
            background-color: rgba(54, 54, 54, 0.1) !important;
        }

            #sidebar ul > li.active > a > .fa {
                color: #03cc85;
            }

#sidebar-wrapper {
    overflow-y: hidden;
    outline: none;
    position: relative;
    height: 100%;
    width: 100%;
}*/

#main {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fefefe;
    overflow: hidden;
    display: block;
    /*background-image: url(http://owwwlab.com/wp-faculty-2/wp-content/uploads/2015/05/girl-437989_1920.jpg);*/
}

/*.toggle-menu {
    position: absolute;
    display: block;
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    padding: 0;
    background: none;
    border: 0;
    text-align: center;
    cursor: pointer;
    outline: none;
    z-index: 9999;
}

    .toggle-menu i {
        display: block;
        font-size: 28px;
    }*/

/*@media (min-width: 992px) {

    #main {
        left: 250px;
    }

    #sidebar {
        width: 250px;
    }

    .toggle-menu {
        display: none;
    }
}*/

/*.sidebar-toggle {
    position: absolute !important;
    width: 250px !important;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.main-toggle {
    left: 250px !important;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}*/

/*#sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #202020;
    border-top: 1px solid #1A1A1A;
    text-align: center;
    overflow: hidden;
    height: 50px;
    padding: 15px 15px;
    font-size: 18px;
    line-height: 20px;
}

#copyright {
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    font-size: 0.7em;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 8px;
    font-weight: 800;
    font-size: 18px;
    color: #fff;
}

#profile {
    text-align: center;
    padding: 0 10px 10px 10px;
    position: relative;
}

#brand {
    padding: 30px 40px 20px 40px;
    text-align: center;
}*/

.board {
    width: 100%;
}

    .board.error > div > .board-b72b1 {
        -webkit-box-shadow: 0px 0px 50px 0px rgba(247,10,10,1);
        -ms-box-shadow: 0px 0px 50px 0px rgba(247,10,10,1);
        box-shadow: 0px 0px 50px 0px rgba(247,10,10,1);
    }

    .board.success > div > .board-b72b1 {
        -webkit-box-shadow: 0px 0px 50px 0px rgba(3,204,133,1);
        -ms-box-shadow: 0px 0px 50px 0px rgba(3,204,133,1);
        box-shadow: 0px 0px 50px 0px rgba(3,204,133,1);
    }

.fa.success {
    color: #03cc85;
}

.fa.error {
    color: #f70a0a;
}

.page-header {
    background-color: #03cc85;
    /*background-image: url(http://owwwlab.com/wp-faculty-2/wp-content/uploads/2015/05/bg1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;*/
    padding: 60px 0 0 0;
    margin: 0;
    border-bottom: 0;
}

    .page-header h2 {
        font-size: 50px;
        margin-bottom: 0;
        padding: 0 0 20px 0;
        color: #fff;
    }

.filters {
    padding: 10px 0 15px 0 !important;
    background-color: #f7f7f7;
    margin-bottom: 30px;
}

.items {
    background-color: #fcfcfc;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.table-lesson > thead > tr > th.item-header {
    border-bottom: 0px;
    padding: 13px;
}

.item-subject {
    margin-left: 10px;
}

.items > .item:hover {
    cursor: pointer;
    background-color: #f7f7f7 !important;
}

.items > .item > td {
    vertical-align: middle;
    box-shadow: 0px 3px 3px -3px #ccc;
    padding: 13px;
}

    .items > .item > td > h3 {
        margin: 10px 10px;
    }

    .items > .item > td > p {
        margin-left: 10px;
        font-size: 14px;
    }

        .items > .item > td > p > b.space {
            margin: 0 5px;
        }

.pagination > li:last-child > a {
    cursor: pointer;
}

ul.games > li {
    height: 45px;
    width: 45px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background-color: #ddd;
    cursor: pointer;
    margin-bottom: 10px;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    float: left;
    margin: 5px;
    line-height: 40px;
    font-size: 18px;
    color: #fff;
}

    ul.games > li:hover {
        -webkit-box-shadow: 0px 0px 2px 0px rgba(34, 34, 34, 0.75);
        -moz-box-shadow: 0px 0px 2px 0px rgba(34, 34, 34, 0.75);
        box-shadow: 0px 0px 2px 0px rgba(34, 34, 34, 0.75);
    }

.games-header {
    font-weight: bold;
    text-transform: uppercase;
}

ul.problems {
    margin-top: 10px;
}

    ul.problems > li {
        margin: 3px;
        height: 35px;
        width: 35px;
        background-color: #ddd;
        float: left;
        -ms-border-radius: 5px;
        border-radius: 5px;
        color: #fff;
        border: 1px solid #ddd;
        position: relative;
    }

        ul.problems > li i {
            color: #888;
            position: absolute;
            bottom: 6px;
            right: 6px;
            font-size: 18px;
        }

        ul.problems > li.error i,
        ul.problems > li.warning i,
        ul.problems > li.success i {
            color: #fff;
        }

        ul.games > li.success,
        ul.problems > li.success {
            background-color: #03cc85 !important;
            border-color: #03cc85;
            color: #fff !important;
        }

        ul.games > li.error,
        ul.problems > li.error {
            background-color: #f70a0a !important;
            border-color: #f70a0a;
            color: #fff !important;
        }

        ul.games > li.warning,
        ul.problems > li.warning {
            background-color: #ffc107 !important;
            border-color: #ffc107;
            color: #fff !important;
        }

ul.moves > li {
    font-family: "FigurineCB AriesSP";
    font-weight: lighter;
    margin: 3px;
    float: left;
    -ms-border-radius: 5px;
    border-radius: 5px;
    font-size: 20px;
}

    ul.moves > li.active {
        background-color: #ddd;
    }

.vertical-center {
    min-height: 100%;
    min-height: 70vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

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

.pagination {
    margin: 0;
}

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.bt-menu {
    z-index: 1111;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border-width: 0px;
    border-style: solid;
    border-color: #333;
    background-color: rgba(0,0,0,0);
    -webkit-backface-visibility: hidden;
    -webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
    transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
}

    .bt-menu.bt-menu-open {
        height: 100%;
        border-width: 60px 30px 30px 90px;
        background-color: rgba(0,0,0,0.3);
        -webkit-transition: border-width 0.3s, background-color 0.3s;
        transition: border-width 0.3s, background-color 0.3s;
    }

.bt-overlay {
    position: absolute;
    width: 100%;
}

.bt-menu-open .bt-overlay {
    height: 100%;
    cursor: url("images/close.png"), auto;
}

.bt-menu .bt-menu-logout {
    position: fixed;
    bottom: 15px;
    left: 20px;
    display: block;
    width: 40px;
    height: 30px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
    transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
    -moz-transform: translate3d(-100%,100%,0);
    -ms-transform: translate3d(-100%,100%,0);
    -o-transform: translate3d(-100%,100%,0);
    -webkit-transform: translate3d(-100%,100%,0);
    transform: translate3d(-100%,100%,0);
}

    .bt-menu .bt-menu-logout:hover i {
        color: #fff;
    }

    .bt-menu .bt-menu-logout i {
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        color: #03cc85;
        font-size: 50px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

.bt-menu.bt-menu-open .bt-menu-logout {
    visibility: visible;
    opacity: 1;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.bt-menu .bt-menu-user {
    position: fixed;
    top: 15px;
    display: block;
    width: 200px;
    height: 50px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s, opacity 0.2s, visibility 0s 0.3s;
    transform: translate3d(0,0,0);
}

    .bt-menu .bt-menu-user span {
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        color: #fff;
        font-size: 20px;
        -webkit-touch-callout: none;
        user-select: none;
        transition: background-color 0.3s;
    }

.bt-menu.bt-menu-open .bt-menu-user {
    visibility: visible;
    opacity: 1;
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s 0.1s;
    transition: transform 0.3s, opacity 0.3s;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

.loading-spinner {
    position: fixed;
    top: 15px;
    right: 40px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 9999;
    cursor: wait;
    border-radius: 50%;
    border: 5px solid;
    border-color: #fff #fff transparent transparent;
    animation: spinner .8s infinite cubic-bezier(0.445,.05,.55,.95);
    -moz-animation: spinner .8s infinite cubic-bezier(0.445,.05,.55,.95);
    -webkit-animation: spinner .8s infinite cubic-bezier(0.445,.05,.55,.95);
}

.bt-menu-trigger {
    position: fixed;
    top: 15px;
    left: 20px;
    display: block;
    width: 50px;
    height: 50px;
    cursor: pointer;
}

    .bt-menu-trigger span {
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 100%;
        height: 4px;
        margin-top: -2px;
        background-color: #fff;
        font-size: 0px;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -webkit-transition: background-color 0.3s;
        transition: background-color 0.3s;
    }

.bt-menu-open .bt-menu-trigger span {
    background-color: transparent;
}

.bt-menu-trigger span:before,
.bt-menu-trigger span:after {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
}

.bt-menu-trigger span:before {
    -webkit-transform: translateY(-250%);
    transform: translateY(-250%);
}

.bt-menu-trigger span:after {
    -webkit-transform: translateY(250%);
    transform: translateY(250%);
}

.bt-menu-open .bt-menu-trigger span:before {
    -webkit-transform: translateY(0) rotate(45deg);
    transform: translateY(0) rotate(45deg);
}

.bt-menu-open .bt-menu-trigger span:after {
    -webkit-transform: translateY(0) rotate(-45deg);
    transform: translateY(0) rotate(-45deg);
}

.bt-menu ul {
    height: 0;
    position: fixed;
    top: 75px;
    left: 0;
    margin: 0;
    padding: 0;
    width: 90px;
    list-style: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.bt-menu.bt-menu-open ul {
    height: auto;
}

.bt-menu ul li,
.bt-menu ul li a {
    display: block;
    width: 100%;
    text-align: center;
}

    .bt-menu ul li.only-mobile {
        display: none !important;
    }

    .bt-menu ul li a {
        display: block;
        outline: none;
        color: transparent;
        text-decoration: none;
        font-size: 0px;
    }

        .bt-menu ul li a i {
            color: #04a466;
            font-size: 48px;
            -webkit-transition: color 0.2s;
            transition: color 0.2s;
        }

            .bt-menu ul li a i:hover {
                color: #fff;
            }

    .bt-menu ul li.active a {
        cursor: default;
    }

        .bt-menu ul li.active a i {
            color: #ddd;
        }

    .bt-menu ul li a.disable i {
        color: #757575;
    }

        .bt-menu ul li a.active i:hover:before,
        .bt-menu ul li a.active i:focus:before,
        .bt-menu ul li a.disable i:hover:before,
        .bt-menu ul li a.disable i:focus:before {
            color: #757575;
        }

@media screen and (max-height: 31.125em) {
    .bt-menu ul li a:before {
        font-size: 32px;
    }
}

.login-left {
    border-right-width: 1px;
    border-right-color: gray;
    border-right-style: dashed;
}

.login-form-section {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.section-title {
    padding: 10px 20px;
    background-color: #eee;
}

    .section-title h3 {
        font-size: 34px;
    }

.login-content {
    background-color: #fff;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.75);
    -moz-box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.75);
    box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.75);
}

    .login-content form {
        padding: 10px;
    }

    .login-content .form-group {
        padding: 10px;
        margin: 0;
        border-left: 5px solid transparent;
        -moz-transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
        -o-transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
        -webkit-transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
        transition: border-left-color 0.5s, box-shadow 0.5s, background-color 0.5s;
    }

.btn-login {
    margin: 5px 0;
}

.menu-item {
    text-align: center;
    background: white;
    color: #222222;
    padding: 30px;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.75);
    -moz-box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.75);
    box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.75);
    z-index: 1;
    margin-bottom: 30px;
    cursor: pointer;
}

    .menu-item:hover {
        background: #eee;
    }

    .menu-item i {
        color: #03cc85;
        font-size: 60px;
    }

.content-item {
    background: white;
    color: #222222;
    padding: 30px;
    -webkit-box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.75);
    -moz-box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.75);
    box-shadow: 0px 0px 10px 1px rgba(34, 34, 34, 0.75);
    z-index: 1;
}

.panel {
    margin-bottom: 10px;
}

.panel-lesson,
.panel-lesson .panel-heading,
.panel-lesson .panel-body,
.panel-lesson .panel-footer {
    border: 0;
    border-radius: 0;
}

.panel-lesson {
    -webkit-box-shadow: 0px 0px 1px 0px rgba(34, 34, 34, 0.75);
    -moz-box-shadow: 0px 0px 1px 0px rgba(34, 34, 34, 0.75);
    box-shadow: 0px 0px 1px 0px rgba(34, 34, 34, 0.75);
}

    .panel-lesson .panel-body {
        padding: 30px;
    }

        .panel-lesson .panel-body h1 {
            margin: 0;
        }

    .panel-lesson .panel-footer {
        border: 0;
    }

        .panel-lesson .panel-footer .form-inline .form-control {
            margin-right: 10px;
        }

        .panel-lesson .panel-footer .form-inline label {
            margin-right: 5px;
        }

.panel-puzzle .label {
    margin-left: 5px;
}

.panel-puzzle .puzzle-rating {
    margin-top: 10px;
}

.trening-page-header {
    color: #fff;
    background-color: #2196F3;
}

.opening-page-header {
    color: #fff;
    background-color: #F44336;
}

.play-header {
    color: #fff;
    background-color: #9d72c7;
    margin-bottom: 30px;
}

    .play-header h1 {
        margin: 20px 0;
    }

.opening-header,
.trening-header,
.lesson-header {
    color: #fff;
    background-color: #03cc85;
    margin-bottom: 30px;
}

    .opening-header h1,
    .trening-header h1,
    .lesson-header h1 {
        margin: 20px 0;
    }

.trening-header {
    background-color: #2196F3;
}

.opening-header {
    background-color: #F44336;
}

.panel-training-heading {
    background-color: #eee;
}

#moves-scrollbar {
    position: relative;
    height: 150px;
    border: 1px solid #eee;
    padding: 5px;
}

#pages-scrollbar {
    position: relative;
    height: 200px;
    border: 1px solid #eee;
    padding: 5px;
}

#tree-scrollbar {
    position: relative;
    height: 400px;
    border: 1px solid #eee;
    padding: 5px;
}

    #tree-scrollbar .table > tbody > tr > td {
        border: 0 !important;
        min-width: 50px !important;
    }

.static-panel {
    margin-top: 50px;
}

    .static-panel h1 {
        color: #fff;
    }

.square-55d63 {
    cursor: pointer;
}

.highlight-square {
    background: radial-gradient(ellipse at center, #fff 0%, #FFC107 100%);
}

.square-55d63.success {
    background: radial-gradient(ellipse at center, #fff 0%, #4caf50 100%);
}

.square-55d63.error {
    background: radial-gradient(ellipse at center, #fff 0%, #f70a0a 100%);
}

.dot-square:after {
    background: radial-gradient(rgba(255, 193, 7,0.8) 17%, #fff 0, rgba(0,0,0,0.3) 0, rgba(0,0,0,0) 0);
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.lesson-description {
    margin-left: 70px;
}

.lesson-action-buttons {
    float: left;
}

.statistics-header {
    background-color: #0091EA;
    padding: 0;
    min-height: 189px;
}

.well {
    min-height: 46px;
    background-color: #ddd;
    border: 1px solid #ddd;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.well-sm {
    padding: 10px;
    border-radius: 6px;
}

.description {
    padding: 10px;
}

.label-default {
    background-color: #eee;
}

.panel-training-heading .active {
    background-color: #ddd;
}

.panel-training-heading h1 {
    margin: 10px 0;
}

.hvr-icon-pulse:before {
    content: "\f128";
}

.hvr-icon-back:before {
    content: "\f053";
}

.hvr-icon-forward:before {
    content: "\f054";
}

.chess-font {
    font-family: 'FigurineCB AriesSP';
    font-size: 18px;
}

.table-chess {
    font-size: 17px;
}

.pointer {
    cursor: pointer;
}

.label-error-count {
    font-size: 100%;
}

.spinner-dots {
    margin: 100px auto 0;
    width: 100px;
    text-align: center;
}

    .spinner-dots > div {
        width: 16px;
        height: 16px;
        background-color: #888;
        border-radius: 100%;
        display: inline-block;
        -webkit-animation: sk-bouncedelay 1.7s infinite ease-in-out both;
        animation: sk-bouncedelay 1.7s infinite ease-in-out both;
        margin-right: 5px;
    }

.spinner--white > div {
    background: #fff;
}

.spinner--orange > div {
    background: #FF9A27;
}

.spinner--cyan > div {
    background: #3FCCA1;
}

.spinner--yellow > div {
    background: #F2D915;
}

.spinner-dots .spinner__item1 {
    -webkit-animation-delay: -0.60s;
    animation-delay: -0.60s;
}

.spinner-dots .spinner__item2 {
    -webkit-animation-delay: -0.40s;
    animation-delay: -0.40s;
}

.spinner-dots .spinner__item3 {
    -webkit-animation-delay: -0.20s;
    animation-delay: -0.20s;
}

@-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 0;
    }

    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

@media only screen and (max-width : 480px) {
    .notation-322f9 {
        font-size: 8px;
    }
}

@media (max-width:767px) {
}

@media (min-width:768px) {
}

@media (min-width:992px) {
}

@media (min-width:1200px) {
}

#current-problem > .clearfix {
    position: relative;
}

.promotion {
    position: absolute;
    padding: 30px;
    background-color: #eee;
    border: 2px solid #ddd;
    z-index: 9999;
}

#outdated {
    height: auto;
    padding-bottom: 20px;
    z-index: 9999999;
}

.kwicks {
    height: 100%;
}

    .kwicks > li {
        height: 100%;
    }

.panel-item-1 {
    background-color: #f2b635;
}

.panel-item-2 {
    background-color: #03cc85;
}

.panel-item-3 {
    background-color: #00caff;
}

.panel-item-4 {
    background-color: #00a0e6;
}

.panel-item-5 {
    background-color: #f25648;
}

.page-header label.switch {
    display: inline-block !important;
}

.switch {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 16px;
    border-radius: 8px;
    background: rgba(0,0,0,0.26);
    -webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    vertical-align: middle;
    cursor: pointer;
}

    .switch::before {
        content: '';
        position: absolute;
        top: -4px;
        left: -4px;
        width: 24px;
        height: 24px;
        background: #fafafa;
        box-shadow: 0 4px 8px rgba(0,0,0,0.28);
        border-radius: 50%;
        -webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .switch:active::before {
        box-shadow: 0 4px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(128,128,128,0.1);
    }

input:checked + .switch {
    background: rgba(0,200,81,0.5);
}

    input:checked + .switch::before {
        left: 20px;
        background: #00C851;
    }

    input:checked + .switch:active::before {
        box-shadow: 0 4px 8px rgba(0,0,0,0.28), 0 0 0 20px rgba(0,150,136,0.2);
    }

.award-filter p {
    display: inline-block;
    line-height: 50px;
    color: #fff;
    vertical-align: middle;
    margin: 0 10px 0;
    text-transform: uppercase;
}

.bg-award-red {
    background: #f44336;
    color: #fff;
}

.bg-award-pink {
    background: #e91e63;
    color: #fff;
}

.bg-award-purple {
    background: #9c27b0;
    color: #fff;
}

.bg-award-blue {
    background: #2196f3;
    color: #fff;
}

.bg-award-cyan {
    background: #00bcd4;
    color: #fff;
}

.bg-award-silver {
    background: #9CCC65;
    color: #fff;
}

    .bg-award-red.bg-gold,
    .bg-award-pink.bg-gold,
    .bg-award-purple.bg-gold,
    .bg-award-blue.bg-gold,
    .bg-award-cyan.bg-gold,
    .bg-award-silver.bg-gold {
        background-color: #FFCA28;
    }

    .bg-award-red.bg-silver,
    .bg-award-pink.bg-silver,
    .bg-award-purple.bg-silver,
    .bg-award-blue.bg-silver,
    .bg-award-cyan.bg-silver,
    .bg-award-silver.bg-silver {
        background-color: #BDBDBD;
    }

.award.bg-silver {
    background-color: #eeeeee;
}

.award.bg-gold {
    background-color: #FFE082;
}

.tooltip {
    z-index: 9999;
}

#login-screen {
    float: left;
    display: inline-block;
    position: absolute;
    height: 100%;
    overflow: hidden;
    width: 100% !important;
    z-index: 999999;
}

.girisback {
    position: absolute;
    right: 0;
    width: 50%;
    height: 100%;
    background: #03A9F4 url(images/backgrounds/bg-sm.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

.kayitback {
    position: absolute;
    left: 0;
    width: 50%;
    height: 100%;
    background: #03A9F4 url(images/backgrounds/bg-chess.jpg);
    background-size: cover;
    background-position: 50% 50%;
}

#textbox {
    width: 50%;
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    margin-left: 50%;
    position: absolute;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.toplam {
    width: 200%;
    height: 100%;
    position: relative;
    left: 0;
    left: -100%;
}

.sign-left {
    width: 50%;
    height: 100%;
    background: #2C3034;
    left: 0;
    position: absolute;
}

    .sign-left ul {
        margin-bottom: 20px;
    }

    .sign-left li a {
        color: #757575;
    }

    .sign-left li .fa-li {
        color: #757575;
    }

    .sign-left li a:hover {
        color: #ddd;
    }

.login-right {
    width: 50%;
    height: 100%;
    background: #F9F9F9;
    right: 0;
    position: absolute;
}

.ic {
    width: 250px;
    margin: 0 auto;
    top: 50%;
    margin-top: -220px;
    position: absolute;
    left: 50%;
    margin-left: -125px;
}

    .ic p {
        font-size: 15px;
        font-weight: 400;
        line-height: 26px;
        color: #757575;
        margin-bottom: 20px;
    }

.agenda-overlay {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: #33b5e5;
    opacity: .85;
    height: 100%;
}

#login-screen h2 {
    font-size: 30px;
    font-weight: 300;
    color: #33b5e5;
}

#login-screen .button-group {
    margin-top: 30px;
}

.btn-sign-back {
    width: auto;
    background: none;
    padding: 10px 16px;
    font-family: Roboto;
    font-size: 14px;
    color: #33b5e5;
    font-weight: 700;
    margin: 0 10px;
    line-height: 16px;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.5px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    border: 0;
    outline: 0;
}

.login-right .btn-sign-back:hover {
    background: #eee;
}

.sign-left .btn-sign-back {
    margin: 0;
    border: 2px solid #00b9ff;
    text-decoration: none;
    padding: 8px 16px;
}

    .sign-left .btn-sign-back:hover {
        color: #33b5e5;
        background: #363A3D;
    }

.btn-login {
    width: auto;
    background: #33b5e5;
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0 !important;
    line-height: 16px;
    font-family: Roboto;
    text-transform: uppercase;
    max-height: 36px;
    height: 36px;
    letter-spacing: 0.5px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);
    -webkit-transition-duration: 0.25s;
    transition-duration: 0.25s;
    -webkit-transition-property: background-color,-webkit-box-shadow;
    transition-property: background-color,box-shadow;
    border: 0;
}

    .btn-login:hover {
        background: #09c;
        -webkit-box-shadow: 0 4px 7px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);
        -moz-box-shadow: 0 4px 7px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);
        box-shadow: 0 4px 7px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1);
    }


@media (max-width:767px) {

    .sign-left,
    .login-right {
        width: 100%;
    }

    #textbox {
        width: 100%;
        margin-left: 0%;
    }

    .toplam {
        margin-left: 100% !important;
        position: static;
    }
}

.vex {
    z-index: 9999;
}

.promotion-box {
    background-color: #fff;
    min-width: 260px !important;
    padding: 15px;
    box-shadow: 0 27px 24px 0 rgba(0, 0, 0, 0.2), 0 40px 77px 0 rgba(0, 0, 0, 0.22);
    border-radius: 3px;
}

    .promotion-box .modal-header,
    .promotion-box .modal-body {
        display: none;
    }

    .promotion-box .btn {
        margin: 5px;
    }

    .promotion-box .modal-footer {
        text-align: center;
        border: 0;
        padding: 0;
    }

        .promotion-box .modal-footer .btn {
            background-color: transparent;
            box-shadow: none;
            padding: 0;
            margin: 0;
            text-indent: -9999px;
            width: 45px;
            height: 45px;
        }

            .promotion-box .modal-footer .btn:nth-child(1) {
                background-image: url('images/wq.png');
            }

            .promotion-box .modal-footer .btn:nth-child(2) {
                background-image: url('images/wr.png');
            }

            .promotion-box .modal-footer .btn:nth-child(3) {
                background-image: url('images/wb.png');
            }

            .promotion-box .modal-footer .btn:nth-child(4) {
                background-image: url('images/wn.png');
            }

.alert {
    margin: 20px 0;
}

.navbar-alert {
    border: 0;
    border-radius: 3px;
    box-shadow: 0 16px 38px 12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
    padding: 0;
    height: 50px;
    width: 100%;
    z-index: 1050;
    background-color: #ff4444;
}

.navbar-default.navbar-alert .navbar-nav > li > a {
    color: #fff;
    font-size: 16px;
}

.navbar-default.navbar-alert .btn-sm {
    padding: 10px 16px;
    margin: 0;
    font-family: Roboto;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
}

.btn[disabled],
.btn.disabled {
    pointer-events: all !important;
}

/* 

    PASSWORD 

*/

#password-section {
    background-color: #f9f9f9;
    font-family: 'Open Sans', sans-serif !important;
    color: #404142;
    letter-spacing: 0.8px;
    font-weight: 300;
    padding-top: 30px;
}

    #password-section .btn {
        padding: 10px 16px;
        cursor: pointer;
        font-weight: 600;
        color: #fff;
        font-family: Roboto;
        text-transform: uppercase;
        letter-spacing: .5px;
        border-radius: 2px;
        box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 3px 6px rgba(0,0,0,.1);
        border: 0;
        font-size: 13px;
        line-height: 16px;
        margin: 0 0 10px 0;
    }

    #password-section .btn-link {
        width: auto;
        background: none;
        padding: 10px 16px;
        font-family: Roboto;
        font-size: 14px;
        color: #1cbacc;
        font-weight: 600;
        line-height: 16px;
        text-transform: uppercase;
        cursor: pointer;
        max-height: 36px;
        height: 36px;
        letter-spacing: .5px;
        border-radius: 2px;
        border: 0;
        outline: 0;
        box-shadow: none;
        margin: 0;
    }

    #password-section .panel {
        display: inline-block;
        position: relative;
        width: 100%;
        border-radius: 3px;
        color: rgba(0,0,0,.87);
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    }

    #password-section h3 {
        margin: 20px 0;
    }

    #password-section p {
        margin-bottom: 20px;
    }

/* 

    REGISTER 

*/
#register-section h2 {
    text-transform: uppercase;
    font-weight: 700;
}

#register-section {
    /*background-color: #f9f9f9;
    font-family: 'Open Sans', sans-serif !important;
    color: #404142;
    letter-spacing: 0.8px;
    font-weight: 300;*/
    padding-top: 30px;
    height: auto;
}

    /*#register-section .btn {
        padding: 10px 16px;
        cursor: pointer;
        font-weight: 600;
        color: #fff;
        font-family: Roboto;
        text-transform: uppercase;
        letter-spacing: .5px;
        border-radius: 2px;
        box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 3px 6px rgba(0,0,0,.1);
        border: 0;
        font-size: 13px;
        line-height: 16px;
        margin: 0 0 10px 0;
    }*/

    #register-section .btn.btn-default {
        box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 3px 6px rgba(0,0,0,.1);
        color: rgba(0,0,0, 0.87);
    }

    #register-section .btn-link {
        width: auto;
        background: none;
        padding: 10px 16px;
        font-family: Roboto;
        font-size: 14px;
        color: #33b5e5;
        font-weight: 600;
        line-height: 16px;
        text-transform: uppercase;
        cursor: pointer;
        max-height: 36px;
        height: 36px;
        letter-spacing: .5px;
        border-radius: 2px;
        border: 0;
        outline: 0;
        box-shadow: none;
        margin: 0;
    }

    #register-section .panel {
        display: inline-block;
        position: relative;
        width: 100%;
        border-radius: 3px;
        color: rgba(0,0,0,.87);
        background: #fff;
        box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
    }

    #register-section .panel-body {
        padding: 20px 30px;
    }


        #register-section .panel-body p {
            min-height: 100px;
        }

        #register-section .panel-body h4 {
            margin-top: 10px;
            min-height: 40px;
        }

#register-steps h3 {
    margin: 20px 0;
}

#register-steps p {
    margin-bottom: 20px;
}

.register-header {
    display: table-cell;
    padding: 10px 20px;
    color: #616161;
    font-weight: normal;
}

.form-group.has-error label,
.form-group.has-error a {
    color: #fe0001;
}

.step {
    padding-bottom: 20px;
    color: #888 !important;
}

    .step h3 {
        color: #888 !important;
    }

    .step .step-active {
        font-weight: 700;
    }

        .step .step-active.text-info {
            color: #33b5e5 !important;
        }

            .step .step-active.text-info small {
                color: #33b5e5 !important;
            }

        .step .step-active.text-warning {
            color: #fb3 !important;
        }

            .step .step-active.text-warning small {
                color: #fb3 !important;
            }

        .step .step-active.text-success {
            color: #00C851 !important;
        }

            .step .step-active.text-success small {
                color: #00C851 !important;
            }

        .step .step-active.text-danger {
            color: #f44 !important;
        }

            .step .step-active.text-danger small {
                color: #f44 !important;
            }

.text-info {
    color: #33b5e5;
}

.text-warning {
    color: #fb3;
}

.text-danger {
    color: #f44;
}

.register-overlay {
    background: #F9F9F9 !important;
}

.speech-bubble {
    position: relative;
    background: #eee;
    border-radius: .4em;
    top: 20px;
    padding: 10px 20px;
}

    .speech-bubble:after {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 0;
        height: 0;
        border: 20px solid transparent;
        border-right-color: #eee;
        border-left: 0;
        border-bottom: 0;
        margin-top: -10px;
        margin-left: -20px;
    }

.inline-flex {
    display: inline-flex;
}

.solutions {
    margin-top: 20px;
}

    .solutions .btn.btn-default {
        background-color: rgb(221, 221, 221);
        color: #999;
    }

    .solutions .btn.btn-fab[disabled] {
        opacity: 1;
    }

.margin-left-right-10 {
    margin: 0 10px;
}

.table-lg-container {
    overflow-x: auto;
    min-width: 100%;
    table-layout: fixed;
}

.hideextra {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .tooltip {
        display: none !important;
    }
}

.panel-alert {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 9999;
    color: #ff4444;
}

    .panel-alert .item {
        position: relative;
        float: left;
    }

        .panel-alert .item h2 {
            text-align: center;
            position: absolute;
            line-height: 80px;
            width: 100%;
            margin: 0;
        }

    .panel-alert svg {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }

    .panel-alert .circle_animation {
        transition: all 1s linear;
        stroke-dasharray: 188; /* this value is the pixel circumference of the circle */
        stroke-dashoffset: 0;
    }

#tree-container {
    width: 100%;
}

.node circle {
    fill: #fff;
    stroke: #33b5e5;
    stroke-width: 3px;
}

.link {
    fill: none;
    stroke: #eee;
    stroke-width: 2px;
}

#d3-tooltip {
    background-color: #ddd;
}

.courses-list .panel {
    margin: 15px 0;
}

    .courses-list .panel .panel-footer {
        padding: 10px 5px 14px 5px;
    }

    .courses-list .panel .panel-body {
        padding: 20px 15px;
    }

        .courses-list .panel .panel-body .book-name .fa {
            padding: 0 0 10px 0;
        }

        .courses-list .panel .panel-body h3 {
            margin: 0;
            font-size: 20px;
            text-transform: uppercase;
        }

        .courses-list .panel .panel-body .item-start {
            width: auto;
            position: absolute;
            top: 5px;
            right: 5px;
        }

.uppercase {
    text-transform: uppercase;
}

/* PRZELEWY24 */
.bank-items {
    border: solid #d2d2d2 0;
    margin-bottom: 30px;
    border-left-width: 1px;
    border-top-width: 1px;
}

.bank-item {
    height: 60px;
    border: solid #d2d2d2 0;
    padding: 0;
    background-color: #fff;
    overflow: hidden;
    border-right-width: 1px;
    border-bottom-width: 1px;
    text-align: center;
    cursor: pointer;
}

    .bank-item:hover {
        opacity: 1;
    }

        .bank-item.selected .description,
        .bank-item:hover .description {
            padding: 0;
            position: relative;
            margin-top: -28px;
            background: rgba(0,0,0,.4);
            color: white;
        }

    .bank-item.selected .description {
        background: rgba(141, 198, 63,.8);
    }

.smooth {
    transition: all 0.2s ease;
}

.bank-item-inline {
    display: inline-block;
}

.bank-logo-holder {
    display: table-cell;
    height: 60px;
    vertical-align: middle;
    width: 100%;
    text-align: center;
}

.bank-logo {
    display: inline-block;
    position: relative;
}

.bank-logo-226, .bank-logo-25, .bank-logo-26, .bank-logo-27 {
    height: 42px;
    background-image: url('images/pbl.png');
}

.bank-logo-31, .bank-logo-32, .bank-logo-35, .bank-logo-65, .bank-logo-81 {
    width: 129px;
    height: 42px;
    background-image: url('images/pbl.png');
}

.bank-logo-47, .bank-logo-48 {
    width: 129px;
    height: 42px;
    background-image: url('images/przelew.png');
}

.bank-logo-56, .bank-logo-58, .bank-logo-59, .bank-logo-6, .bank-logo-61, .bank-logo-62, .bank-logo-64 {
    background-image: url('images/przelew.png');
    width: 129px;
    height: 42px;
}

.bank-logo-79, .bank-logo-82 {
    height: 42px;
    background-image: url('images/przelew.png');
}

.bank-logo-89, .bank-logo-90 {
    width: 129px;
    height: 42px;
    background-image: url('images/przelew.png');
}

.bank-logo-94, .bank-logo-95, .bank-logo-99 {
    background-image: url('images/pbl.png');
    width: 129px;
    height: 42px;
}

.bank-logo-101, .bank-logo-103, .bank-logo-105 {
    background-image: url('images/przelew.png');
    width: 129px;
    height: 42px;
}

.bank-logo-102, .bank-logo-110, .bank-logo-112 {
    height: 42px;
    background-image: url('images/pbl.png');
}

.bank-logo-119, .bank-logo-121 {
    height: 42px;
    background-image: url('images/pbl.png');
}

.bank-logo-135, .bank-logo-141, .bank-logo-143, .bank-logo-144, .bank-logo-146, .bank-logo-153, .bank-logo-158, .bank-logo-159 {
    height: 42px;
    background-image: url('images/pbl.png');
}

.bank-logo-152, .bank-logo-154 {
    width: 129px;
    height: 42px;
    background-image: url('images/other.png');
}

.bank-logo-218, .bank-logo-219, .bank-logo-220, .bank-logo-225, .bank-logo-41, .bank-logo-42, .bank-logo-66, .bank-logo-71, .bank-logo-87 {
    width: 129px;
    height: 42px;
    background-image: url('images/other.png');
}

.bank-logo-226, .bank-logo-25, .bank-logo-26, .bank-logo-27 {
    height: 42px;
    background-image: url('images/pbl.png');
}

.bank-logo-20 {
    background-image: url('images/pbl.png');
    background-position: 0 -391px;
    width: 106px;
    height: 35px;
}

.bank-logo-22, .bank-logo-33 {
    background-image: url('images/przelew.png');
    width: 124px;
    height: 35px;
}

.bank-logo-44, .bank-logo-45 {
    width: 129px;
    height: 42px;
    background-image: url('images/przelew.png');
}

.bank-logo-67, .bank-logo-68 {
    height: 35px;
    background-image: url('images/przelew.png');
}

.bank-logo-25 {
    background-position: -115px -269px;
    width: 111px;
}

.bank-logo-26 {
    background-position: -130px -183px;
    width: 129px;
}

.bank-logo-31 {
    background-position: 0 -183px;
}

.bank-logo-33 {
    background-position: -250px -404px;
}

.bank-logo-35 {
    background-position: 0 -140px;
}

.bank-logo-45 {
    background-position: -392px 0;
}

.bank-logo-48 {
    background-position: -392px -129px;
}

.bank-logo-64 {
    background-position: -130px -239px;
}

.bank-logo-65 {
    background-position: -130px -97px;
}

.bank-logo-68 {
    background-position: -256px -368px;
    width: 127px;
}

.bank-logo-69 {
    background-image: url('images/przelew.png');
    background-position: -262px -172px;
    width: 129px;
    height: 42px;
}

.bank-logo-82 {
    background-position: -130px -153px;
    width: 129px;
}

.bank-logo-85 {
    background-image: url('images/pbl.png');
    background-position: -133px -312px;
    width: 124px;
    height: 35px;
}

.bank-logo-87 {
    background-position: 0 -219px;
}

.bank-logo-88 {
    background-image: url('images/pbl.png');
    background-position: -405px -251px;
    width: 76px;
    height: 42px;
}

.bank-logo-90 {
    background-position: 0 -110px;
}

.bank-logo-94 {
    background-position: -130px -54px;
}

.bank-logo-102 {
    background-position: -275px -129px;
    width: 128px;
}

.bank-logo-103 {
    background-position: -392px -86px;
}

.bank-logo-110 {
    background-position: -275px -86px;
    width: 129px;
}

.bank-logo-112 {
    background-position: 0 -269px;
    width: 114px;
}

.bank-logo-113 {
    background-image: url('images/pbl.png');
    background-position: 0 0;
    width: 130px;
    height: 53px;
}

.bank-logo-119 {
    background-position: -405px -86px;
    width: 82px;
}

.bank-logo-121 {
    background-position: -405px -43px;
    width: 86px;
}

.bank-logo-131 {
    background-image: url('images/pbl.png');
    background-position: -405px -129px;
    width: 96px;
    height: 35px;
}

.bank-logo-135 {
    background-position: -105px -348px;
    width: 104px;
}

.bank-logo-141 {
    background-position: 0 -348px;
    width: 104px;
}

.bank-logo-143 {
    background-position: -405px 0;
    width: 100px;
}

.bank-logo-144 {
    background-position: -210px -348px;
    width: 104px;
}

.bank-logo-146 {
    background-position: 0 -226px;
    width: 129px;
}

.bank-logo-153 {
    background-position: -131px 0;
    width: 143px;
}

.bank-logo-154 {
    background-position: -271px -43px;
}

.bank-logo-160 {
    background-image: url('images/other.png');
    background-position: -344px -556px;
    width: 69px;
    height: 42px;
}

.bank-logo-161 {
    background-image: url('images/other.png');
    background-position: -522px -430px;
    width: 120px;
    height: 42px;
}

.container-books {
    color: #757575;
    height: auto;
    min-height: 100%;
    background-color: #33373b;
    color: #fff;
    font-family: "Lato",Helvetica,Arial,sans-serif;
    font-weight: 400;
    font-size: 16px;
}

    .container-books h2 {
        font-weight: 700;
        font-size: 24px;
        line-height: 1.2;
        font-family: "Josefin Sans","Times New Roman",Times,sans-serif;
        color: #fff;
    }

    .container-books h4 small {
        font-size: 60%;
    }

    .container-books .book-item {
        margin-bottom: 30px;
    }

    .container-books .book-img {
        width: 210px;
        float: left;
        margin: 0 auto;
    }

        .container-books .book-img .book {
            width: 210px;
            height: 284px;
            box-shadow: 0 13px 21px 0 rgba(0, 0, 0, 0.39);
            margin: 0 auto;
        }

            .container-books .book-img .book.book-2,
            .container-books .book-img .book.book-4 {
                height: 273px;
            }

        .container-books .book-img p {
            padding-top: 30px;
            width: 210px;
            text-align: center;
        }

        .container-books .book-img .btn-buy {
            background-color: #00c851;
            border-color: #3a3939;
            font-family: "Lato",Helvetica,Arial,sans-serif;
            font-size: 16px;
            line-height: 40px;
            letter-spacing: .05em;
            padding: 10px 20px;
            color: #fff;
            border: 0;
            margin-bottom: 10px;
            text-decoration: none;
        }

    .container-books .front {
        width: 100%;
        height: 100%;
        background: linear-gradient(to right, rgba(211, 211, 211, 0.1) 0%, rgba(244, 244, 244, 0.1) 5%, rgba(255, 255, 255, 0.15) 5%, rgba(255, 255, 255, 0.1) 9%, rgba(0, 0, 0, 0.01) 100%), url('images/kurs-podstawowy-sm.png'), #808080;
        background-size: cover !important;
    }

        .container-books .front.front-1,
        .container-books .front.front-3 {
        }

        .container-books .front.front-2,
        .container-books .front.front-4 {
            background: linear-gradient(to right, rgba(211, 211, 211, 0.1) 0%, rgba(244, 244, 244, 0.1) 5%, rgba(255, 255, 255, 0.15) 5%, rgba(255, 255, 255, 0.1) 9%, rgba(0, 0, 0, 0.01) 100%), url('images/kurs-iv-sm.png'), #808080;
        }

        .container-books .front.front-5 {
            background: linear-gradient(to right, rgba(211, 211, 211, 0.1) 0%, rgba(244, 244, 244, 0.1) 5%, rgba(255, 255, 255, 0.15) 5%, rgba(255, 255, 255, 0.1) 9%, rgba(0, 0, 0, 0.01) 100%), #000;
        }

            .container-books .front.front-5::before {
                content: "Kurs taktyki szachowej";
                font-weight: 700;
                font-size: 24px;
                line-height: 1.2;
                color: #fff;
                position: absolute;
                top: 70px;
                left: 30px;
            }

    .container-books .book-info {
        margin-left: 300px;
    }

        .container-books .book-info p {
            margin-bottom: 20px;
        }

    .container-books .chapters .panel {
        border: 0;
    }

        .container-books .chapters .panel .panel-title {
            padding: 18px 18px 14px 18px;
            font-family: "Josefin Sans","Times New Roman",Times,sans-serif;
            font-size: 16px;
            font-weight: 400;
            line-height: 1;
            background: #222;
            border-radius: 0;
            color: #fff;
            text-transform: uppercase;
        }

            .container-books .chapters .panel .panel-title a {
                text-decoration: none;
            }

        .container-books .chapters .panel .panel-body {
            background-color: #e7e7e7;
            border: 0;
            border-radius: 0;
        }

    .container-books .chapters .table {
        vertical-align: middle;
        margin-bottom: 0;
    }

        .container-books .chapters .table > tbody > tr > td {
            border: 0;
        }

    .container-books .chapters .badge {
        background-color: #f7f7f7;
        color: rgba(0,0,0, 0.87);
        text-transform: uppercase;
        font-weight: normal;
        font-size: 9px;
        border-radius: 0;
    }

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35px;
    z-index: 105;
    outline: 0;
}

.owl-carousel .owl-nav .owl-next {
    right: 0;
    text-align: right;
}

    .owl-carousel .owl-nav .owl-prev .btn,
    .owl-carousel .owl-nav .owl-next .btn {
        width: auto;
        position: absolute;
        top: 45%;
        transform: translate(0,-50%);
    }

.owl-carousel .owl-nav .owl-prev .btn {
    left: 5px;
}

.owl-carousel .owl-nav .owl-next .btn {
    right: 5px;
}