:root {
    --primary-bg-color: #ffffff;
    --secondary-bg-color: #ffffff;
    --primary-text-color: #212121;
    --secondary-text-color: white;
}

body {
    font-family: 'Ubuntu', sans-serif;
    margin: 0px;
    border: 0px;
    background-color: var(--secondary-bg-color);
    overflow-x: hidden;
}

img {
    height: auto !important;
    min-height: auto;
}

div.cointainer {
    display: grid;
}

.slogan {
    width: 100%;
    margin: 0px;
    margin: 0px;
    padding: 0px;
    top: 0px;
    left: 0px;
    background-repeat: no-repeat;
}

.text-container {
    width: 220px;
    float: right;
}

.slogan:after {
    content: "";
    display: block;
    padding-bottom: 50%;
}

html {
    font-size: 1rem;
}

.square {
    position: relative;
    width: 100%;
    //border-radius: 6px;
    margin: 10px auto;
    background-size: 80%;
    background-repeat: no-repeat;
    background: url(gallery.css) 90% center / cover;
    //background-color: #f44336;
}

.squaret {
    position: relative;
    width: 100%;
    //border-radius: 6px;
    margin: 10px auto;
    background-size: 80%;
    background-repeat: no-repeat;
    background: url(gallery.css) 90% center / cover;
    //background-color: #f44336;
}

.square:after {
    content: "";
    display: block;
    padding-bottom: 90%;
}

.w200 {
    width: 100%;
    position: relative;
    left: 0%;
    overflow: hidden;
}

@include media-breakpoint-up(sm) {
    html {
        font-size: 0.8rem;
    }

    .w200 {
        width: 100%;
        position: relative;
        left: 0%;
    }
}

@include media-breakpoint-up(md) {
    html {
        font-size: 1.4rem;
    }
}

@include media-breakpoint-up(lg) {
    html {
        font-size: 1.6rem;
    }
}

.leftup {
    transform-origin: left top !important;
}

.top {
    transform-origin: top !important;
}

.left {
    transform-origin: left !important;
}

.leftdown {
    transform-origin: left bottom;
}

.rightup {
    transform-origin: right top;
}

.right {
    transform-origin: right;
}

.rightdown {
    transform-origin: right bottom;
}

.bottom {
    transform-origin: bottom;
}


.ld-s {
    background-image: url(../images/ld-s.png);
    position: absolute;
    left: 0px;
    bottom: -30px;
    width: 179px;
    height: 154px;
    background-repeat: no-repeat;
}

.ld {
    background-image: url(../images/ld.png);
    position: absolute;
    left: -30px;
    bottom: -30px;
    width: 338px;
    height: 283px;
    background-repeat: no-repeat;
}

.pg-s {
    background-image: url(../images/pg-s.png);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 180px;
    height: 209px;
    background-repeat: no-repeat;
}

.pg {
    background-image: url(../images/pg.png);
    position: absolute;
    right: 0px;
    top: 0px;
    width: 261px;
    height: 420px;
    background-repeat: no-repeat;
}

.offer {
    width: 100%;
    height: 100%;
    background-image: url("../images/pg.png");
}

.logoof {
    width: 100%;
    height: 100%;
    background-color: aqua;
}

.offer-text {}

.inst {}

.inst:hover {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(to bottom,
            #7024c4,
            #c32869,
            #e09b3d);
}

.pulse {
    animation: pulse 4s infinite ease-in-out alternate;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15);
    }
}

.bb {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 320px;
    height: 45px;
}

.bb3 {
    z-index: 20;
    width: 320px;
    height: 45px;
}

.br {
    position: relative;
}

.mylist a {
    text-decoration: none;
    color: #212529;
}

.path a {
    color: #166936;
}

.eng a {
    color: #166936;
}

a {
    color: #212529;
}

.row a {
    text-decoration: none;
    color: #212529;
}

.row a:hover {
    color: #166936;
    text-decoration: underline;
}

.row a {
    text-decoration: none;
    color: #212529;
}

.row a:hover {
    color: #166936;
    text-decoration: underline;
}

.mylist a b {
    color: #fb2e2f;
}

.row:nth-child(2) a {
    color: dodgerblue;
}

@font-face {
    font-family: "Lucida";
    src: url("../Lucida Handwriting Italic/Lucida Handwriting Italic.ttf");
}

.myfont {
    font-family: "Lucida", serif;
}

.pionbutton {
    width: 60px;
    min-height: 220px;
    word-wrap: break-word;
    white-space: normal;
    font-weight: bold;
    font-size: 2rem;
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translate(-100%, -50%);
}

.tran {
    transform: translate(-10%, 0%);
}

.bb2 {
    position: absolute;
    top: 6%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 320px;
    height: 45px;
}

.slt {
    width: 50%;
    height: 100%;
    object-fit: contain;
}

.cointainer .row div {
    max-width: 800px;
}

.button {
    max-width: 300px !important;
    min-height: 30px;
    max-height: 40px;
}

.ln45 {
    line-height: 45px;
}

.button2 {
    max-width: 300px !important;
    min-height: 30px;
    max-height: 40px;
    line-height: 45px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.cointainer .row ul {
    max-width: 800px;
}

.cointainer .row ul li {
    list-style: none;
    padding-top: 3px;
    padding-bottom: 3px;
}

.cointainer .row ul li::before {
    content: "\2022";
    /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: #166936;
    /* Change the color */
    font-weight: bold;
    /* If you want it to be bold */
    display: inline-block;
    /* Needed to add space between the bullet and the text */
    width: 1em;
    /* Also needed for space (tweak if needed) */
    margin-left: -1em;
    /* Also needed for space (tweak if needed) */
}

.logol {
    position: absolute;
    top: 50%;
    left: 10%;
    width: 50%;
    height: 80%;
    z-index: 20;

    transform: translate(-50%, -50%);
}

.logor {
    position: absolute;
    top: 50%;
    left: 95%;
    width: 50%;
    height: 80%;
    z-index: 20;

    transform: translate(-60%, -50%);
}

.graf_ul {
    position: absolute;
    top: 25%;
    left: 50%;
    width: 25%;
    height: 25%;
    z-index: 20;

    transform: translate(-50%, -50%);
}

.besmart {
    position: absolute;
    top: 42.5%;
    left: 66.5%;
    width: 20%;
    height: 20%;
    z-index: 20;

    transform: translate(-50%, -50%);
}

.mw3p {
    max-width: 300px;
}

.logoli {
    position: absolute;
    top: 30%;
    left: 20%;
    width: 40%;
    height: 40%;
    z-index: 20;

    transform: translate(-50%, -50%);
}

.logori {
    position: absolute;
    top: 75%;
    left: 85%;
    width: 120px;
    height: 120px;
    z-index: 20;

    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 600px) {
    .besmart {
        position: absolute;
        top: 37.5%;
        left: 50%;
        width: 80%;
        height: 20%;
        z-index: 20;

        transform: translate(-50%, -50%);
    }



    .bb {
        transform: scale(0.8) translate(-60%, -100%);
    }

    .slt {
        width: 80%;
    }

    .lom {
        transform: translate(-50%, -80%) !important;
    }

    .cointainer .row div {
        max-width: 600px;
    }

    .logol {
        position: absolute;
        top: 60%;
        left: 0%;
        width: 20%;
        height: 20%;
        z-index: 20;

        transform: translate(-40%, -80%);
        display: none;
    }

    .logor {
        position: absolute;
        top: 60%;
        left: 100%;
        width: 20%;
        height: 20%;
        z-index: 20;

        transform: translate(-60%, -80%);
        display: none;
    }

    .graf_ul {
        position: absolute;
        top: 25%;
        left: 50%;
        width: 100%;
        height: 50%;
        z-index: 20;

        transform: translate(-50%, -50%);
    }

    .logoli {
        position: absolute;
        top: -25%;
        left: 17.5%;
        width: 30%;
        height: 30%;
        z-index: 20;

        transform: translate(-50%, -50%);
    }

    .logori {
        position: absolute;
        top: 27.5%;
        left: 82.5%;
        width: 80px;
        height: 80px;
        z-index: 20;

        transform: translate(-50%, -50%);
    }

    .pnm {
        position: absolute;
        top: 20%;
        left: 17.5%;
        width: 30%;
        height: 30%;
        z-index: 20;

        transform: translate(-50%, -50%);
    }
}

@media only screen and (min-width: 601px) and (max-width: 1200px) {

    .besmart {
        position: absolute;
        top: 37.5%;
        left: 76.5%;
        width: 30%;
        height: 30%;
        z-index: 20;

        transform: translate(-50%, -50%);
    }

    .logol {
        position: absolute;
        top: 60%;
        left: 0%;
        width: 30%;
        height: 30%;
        z-index: 20;

        transform: translate(-40%, -80%);
    }

    .logor {
        position: absolute;
        top: 60%;
        left: 100%;
        width: 30%;
        height: 30%;
        z-index: 20;

        transform: translate(-60%, -80%);
    }

    .graf_ul {
        position: absolute;
        top: 25%;
        left: 50%;
        width: 80%;
        height: 50%;
        z-index: 20;

        transform: translate(-50%, -50%);
    }

    .logoli {
        position: absolute;
        top: 25%;
        left: 17.5%;
        width: 30%;
        height: 30%;
        z-index: 20;

        transform: translate(-50%, -50%);
    }

    .logori {
        position: absolute;
        top: 80%;
        left: 85%;
        width: 80px;
        height: 80px;
        z-index: 20;

        transform: translate(-50%, -50%);
    }
}


.rb {
    border-right: 2px solid #166936;
}

.lb {
    border-left: 2px solid #166936;
}

.ksp {
    color: #166936;
}

.prace {
    width: 240px;
    height: 160px;
    position: absolute;
    top: 25%;
    left: 50%;

    transform: translate(100%, -50%);
}



.gradi {
    background: rgb(22, 105, 54);
    background: linear-gradient(0deg, rgba(22, 105, 54, 1) 0%, rgba(255, 255, 255, 1) 190px, rgba(255, 255, 255, 1) 100%);
}

.gradi2 {
    background: rgb(22, 105, 54);
    background: linear-gradient(0deg, rgba(22, 105, 54, 1) 0%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 1) 100%);
}

.fb_img {
    width: 32px;
    height: 32px;
    background-image: url(../images/fb_icon_325x325.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.inst_img {
    width: 32px;
    height: 32px;
    background-image: url(../images/inst_graf.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.ksp-dark {
    color: #212529;
}

.noclick {
    pointer-events: none;
}

.path {
    position: absolute;
    top: 10%;
    left: 5%;
    height: 10%;
    z-index: 20;

    transform: translate(0%, -50%);
}

.eng {
    position: absolute;
    top: 10%;
    right: 5%;
    height: 10%;
    z-index: 20;

    transform: translate(0%, -50%);
}

.indent {
    text-indent: 25px;
}

.h4 {
    margin-bottom: 0px;
}



.mqqq {
    width: 100%;
    position: absolute;
    left: -100%;
}

.mw9p {
    max-width: 900px;
}