/* global definitions */
:root {
    --pickerl-bg-color: #d3d3d3;
    --pickerl-title-color: #fcbf00;
    --pickerl-text-color: #3b3b3b;
}

.kl-banner {
    display: block;
    background-image: url(../images/pics/kl_bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    position: relative;

    & .banner-title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--pickerl-title-color);
        text-transform: uppercase;
        text-align: center;
        text-shadow: #202020 3px 5px 2px;
        font-weight: bold;
    }
}

@media screen and (min-width: 1200px) {
    .kl-banner {
        height: 610px;

        & .banner-title {
            font-size: 8rem;
        }
    }
}

@media screen and (min-width: 992px) and (max-width: 1200px) {
    .kl-banner {
        height: 610px;

        & .banner-title {
            font-size: 8rem;
            text-shadow: #202020 2px 3px 2px;
        }
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .kl-banner {
        height: 610px;

        & .banner-title {
            font-size: 8rem;
            text-shadow: #202020 2px 3px 2px;
        }
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .kl-banner {
        height: 400px;

        & .banner-title {
            font-size: 4rem;
            text-shadow: #202020 1px 2px 2px;
        }
    }
}

@media screen and (max-width: 480px) {
    .kl-banner {
        height: 400px;

        & .banner-title {
            font-size: 4rem;
            text-shadow: #202020 1px 2px 2px;
        }
    }
}