/*@import url(jquery-ui.min.css);*/
@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.ttf')  format('truetype');
}


body {
    font-family: 'Oswald', sans-serif;
    margin: 0;
    padding: 0;
    color: white;
    background: #222731;
}

button, a, .dugme {
    color: white;
    text-decoration: none;
    display: inline-block;
    font-family: 'Oswald', sans-serif;
}
.cabs {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#wrap {
    width: 100vw;
    height: 100vh;
    max-width: 70vh;
    max-height: 100%;
    margin: 0 auto;
    padding: 0;
    position: relative;
    background-color: #7c324d;
}
canvas {
    cursor: auto !important;
}

.canvas-container {
    position: absolute !important;
}

#b, #c {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@keyframes pumpaj {
    from {
        background: #4ad;
    }
    to {
        background: #ad4;
    }
}
@keyframes vrti {
    from {
        transform: rotateZ(-30deg);
    }

    to {
        transform: rotateZ(330deg);
    }
}

.loader {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid white;
    background: #4ad;
}

.loader .inner {
    height: 100%;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -10px;
    animation: vrti 1.2s infinite 0s;
}

.loader .junak {
    /*transform: rotateZ(270deg);*/
    transform: translateY(-10px);
}

.loader.gotovo {
    animation: pumpaj 14s infinite 0s alternate;
}

.loader.gotovo .inner {
    animation: none;
    transform: none;
    transition: transform 0.5s ease-in;
    margin: 0;
}

.loader.gotovo .inner .junak {
    transform: translate(-50%, -50%);
    transition: all 0.5s ease-in;
    position: absolute;
    top: 50%;
    left: 50%;
}

#bravo {
    line-height: 70px;
    font-size: 50px;
    text-align: center;
    width: 80%;
    padding: 0px;
    left: 10%;
    top: 30%;
    animation: densaj 1s infinite alternate ease-in;
}


/*uvod*/
.tekst {
    display: none;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 24px;
    line-height: 1.5rem;
    text-align: center;
    background: rgba(104, 30, 57, 1);
    border-top: 1px solid rgba(154, 80, 107, 0.74);
    bottom: 0;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 5% 3px;
    box-sizing: border-box;
    margin: 0;
}
.veliko.dugme {
    display: block;
    top: 15%;
    text-align: left;
    background: #c9c14f;
    border: 3px solid white;
    color: white;
    width: 15vh;
    height: 15vh;
    font-size: 27px;
    border-radius: 50%;
    box-sizing: border-box;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    text-transform: uppercase;
}
.veliko.dugme img {
    left: 60%;
    top: 53%;
    width: 110%;
    opacity: 0.2;
}
#nastavi {
    display: none;
    top: 50%;
}

/*igraj*/
.igraj .loader.gotovo {
    z-index: 1;
}
.natpis {
    text-align: right;
    font-size: 24px;
    position: absolute;
    top: 10px;
    right: 10px;
}
#naslov {
    top: 38px;
    font-size: 17px;
    width: 45%;
}
#koren {
    display: none;
    left: 10px;
    top: 10px;
    right: auto;
    font-size: 20px;
    text-align: left;
    cursor: default;
}
#kriva {
    display: none;
    left: 30px;
    top: 15px;
    right: auto;
    font-size: 11px;
    width: 45%;
    text-align: left;
}
#guglplej {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 200px;
}
#guglplej img {
    max-width: 100%;
}
.meni {
    display: none;
    position: absolute;
    bottom: 10px;
    z-index: 1;
}
#meni-levi {
    left: 10px;
}
#meni-desni {
    right: 10px;
}
.igraj .dugme {
    font-family: 'Oswald', sans-serif;
    background: none;
    border: none;
    outline: none;
    color: white;
    font-size: 24px;
    text-align: center;
    display: none;
    padding: 0;
    margin: 0 2px;
}

.igraj .dugme:hover {
    opacity: 0.9;
}

.igraj .meni .dugme {
    display: inline-block;
}
.igraj .meni svg {
    width: 30px;
    height: 30px;
}
.skazaljka {
    transform: rotate(0deg);
    transform-origin: 50% 100%;
}
#uspori {
    transform: scaleX(-1);
}
#mutiraj.tiho {
    opacity: 0.5;
}
.perla {
    width: 8px;
    height: 8px;
    border: 1px solid;
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    display: none;
}

/*@keyframes boja-40 {
    0% { background-color: #3378ce; }
    33% { background-color: #2c7f18; }  
    67% { background-color: #ac080b; }
    100% { background-color: #3378ce; }
}
.n-40 #b {
    animation: boja-40 10s cubic-bezier(1,0,0,1) infinite;  
}*/

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        visibility: hidden;
        opacity: 0;
    }
}

/*biraj*/
.biraj #wrap {
    background: white;
    color: black;
}
.biraj .loader {
    display: none;
}
.biraj .ctekst {
    font-size: 20px;
    z-index: 1;
    animation: fadeOut 0.5s ease-in 2.5s;
    animation-fill-mode: forwards;
}
#stigo {
    text-align: center;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    background: white;
    padding: 5px;
    margin: 0;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    animation: fadeIn 0.5s ease-in 0.5s;
    animation-fill-mode: forwards;
    visibility: hidden;
}


#stigo a {
    float: left;
    display: block;
    position: relative;
    width: calc(20% - 10px);
    overflow: hidden;
    height: calc(12.5% - 10px);
    margin: 5px;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
}

#stigo svg {
    width: 100%;
    height: 100%;
}

#stigo polyline {
    stroke-width: 3;
    stroke: black;
    stroke-dasharray: none;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    stroke-miterlimit: 10;
    fill: none;
    fill-rule: nonzero;
    opacity: 1;
}

#stigo .preso {border: 1px solid rgba(0,0,0,0.1);}

#stigo .preso polyline {
    stroke-width: 6;
}
#stigo a:nth-child(32) svg {transform: scaleY(-1);}

.biraj.sl #wrap {
    max-width: none;
    width: 1024px;
    height: 500px;
}
.biraj.sl #wrap a {
    width: calc(10% - 10px);
    height: calc(25% - 10px);
    border: none !important;
    background: none !important;
}
.biraj.sl #wrap svg {
    background: white !important;
}
.biraj.sl #wrap svg polyline {
    stroke: black !important;
    stroke-width: 4 !important;
}

/*dev*/
#info {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 22px;
    text-align: right;
}

#boje {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.boja {
    display: inline-block;
    background: #bbb;
    margin: 10px 4px;
    padding: 4px 8px;
    border: 1px solid rgba(250,250,250,0.2);
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.boja input {
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
}

input::-webkit-color-swatch {
    border: none;
}

input::-webkit-color-swatch-wrapper {
    padding: 0;
}