/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 3.8.2016, 13:42:52
    Author     : urossr
*/

/* HACK */

.apiobject#cloud-start.prikazi {
    display: none;
}

#drobtinice.kategorije .view1, #drobtinice.kategorije .view2 {
    display: none;
}

#drobtinice .view2{
    text-transform: uppercase;
}

#drobtinice.seznam .view2 {
    display: none;
}

body.mestniizziv {
    background-repeat: no-repeat;
}

body.mestniizziv #center{
    background: inherit;    
}

body.igra, body.igra #center {
    background-image: url('img/razmetana_darila.png');
    background-color:  #b4c6de; 
    background-repeat: no-repeat;    
    background-position: center top;
}

body.igra #center{
    background-position: center -74px;
}

body.mestniizziv .oblaki{
    //background-image: url("/bundles/mkzucimse/images/ozadja/oblaki_cvek.png");
}

#noga{
    background-color: rgba(0, 0, 0, 0.2);
}

.poglavje{
    display:none;
    position:relative;
}


 .poglavjezacetek .naslov,
 .poglavjeizbira .naslov{
    background-image: url("img/napis-bozickov-mestni-izziv-300.png");
    background-repeat: no-repeat;
    margin-bottom: 60px;
    width: 1038px;
    
    position: absolute;
    font-size: 90px;
    color: #fff;
    text-shadow: 0px 0px 4px #000;
    font-weight: bold;
    text-align: center;
    
    height: 191px;
}

.poglavjezacetek .naslov{
    top: 130px;
    left: 0px;
}

.poglavjeizbira .naslov {
    top: -90px;
    left: 0px;
}

.poglavjeizbira .navodila {
    color: #fff;
    position: absolute;
    top: 122px;
    text-align: center;
    width: 100%;
    font-size: 1.4em;
    text-shadow: 1px 1px 1px #000;
}

.poglavjezacetek .pes {
    background-image: url("img/figura-morski-pes.png");
    background-repeat: no-repeat;
    width: 157px;
    height: 151px;
    position: absolute;
    top: 490px;
    left: 820px;
}

.poglavjezacetek .oblacek {
    background-image: url("img/oblacek2.png");
    width: 79px;
    height: 94px;
    position: absolute;
    left: 815px;
    top: 274px;
    z-index: 100;
    font-size: 12px;
    line-height: 12px;
    padding: 23px 16px 0px 16px;
    text-align: center;
    background-repeat: no-repeat;
    display: none;
}

#gumb-zlatnik {
    background-repeat: no-repeat;
    position: absolute;
    width: 49px;
    height: 49px;
    cursor: pointer;
    background-image: url("img/gumb-zlatnik-ozadje.png");
    z-index: 105;
    display: none;
}

.poglavjezacetek #gumb-zlatnik {
    left: 494px;
    top: 182px;
    display: block;
    display: none;
    cursor: inherit;
}

.poglavjezacetek #cena {
    position: absolute;
    top: 187px;
    left: 471px;
    color: #438B98;
    font-size: 40px;
    display: none;
}

.poglavjezacetek .tablica {
    background-image: url("img/mestni-izziv-vstopna-slika.png");
    position: absolute;
    top: 294px;
    left: 251px;
    color: #3C5969;
    font-size: 40px;
    width: 502px;
    height: 265px;
    opacity: 0.9;
    background-repeat: no-repeat;
}

.poglavjezacetek .sani {
    background-image: url("img/bozickove-sani.png");
    position: absolute;
    top: -46px;
    left: 171px;
    color: #3C5969;
    font-size: 40px;
    width: 567px;
    height: 220px;
    opacity: 0.9;
    background-repeat: no-repeat;
}

#gumb-zlatnik .zlatnik {
    background-image: url("/bundles/mkzucimse/images/zlatnik-hover.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-animation: spin 1.4s linear infinite;
    -moz-animation: spin 1.4s linear infinite;
    animation: spin 1.4s linear infinite;
    width: 44px;
    height: 44px;
    position: absolute;
    left: 7px;
    top: 7px;
}

@-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotateY(360deg); } }

.poglavjezacetek .igraj {
    background-image: url("img/igraj11.png");
    width: 175px;
    height: 70px;
    margin: 0 auto;
    cursor: pointer;
    top: 371px;
    position: absolute;
    left: 413px;
}

.poglavjezacetek .igraj:hover{
    background-image: url("img/igraj22.png");
}

.poglavjeizbira .izbira {
    background-image: url("img/okvir-izbor.png");
    background-position: center -261px;
    width: 393px;
    height: 261px;
    float: left;
    cursor: pointer;
    position: absolute;
    top: 0px;
}

.poglavjeizbira .pol {
    width: 50%;
    float: left;
    text-align: center;
    font-size: 40px;
    color: #fff;
    font-family: 'Trebuchet MS';
    text-shadow: 0px 0px 4px #000;
    margin-top: 70px;
}

.poglavjeizbira .pol .ss{
    width: 375px;
    height: 243px; 
    margin: 45px;
    padding: 9px;
    position: relative;
}

.poglavjeizbira .pol .ss img {
    position: absolute;
    top: 9px;
    left: 19px;
    box-shadow: 0px 0px 7px 7px rgba(0,0,0,0.5);
    transition: all 0.1s linear;
}

.poglavjeizbira .pol .ss:hover .izbira{
    background-position: center top;
}

.poglavjeizbira .pol .ss:hover img {
    box-shadow: 0px 0px 7px 7px rgba(255,255,255,0.5);
}


/* ZAČETEK */ 

#hu {
    position: relative;
    height: 665px;
}

#hu{
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;        
}

#zacni {
    position: absolute;
    top: 273px;
    left: 400px;
    z-index: 10000;
    pointer-events: visible;
    color: #fff;
    background-color: rgba(223, 13, 13, 0.8);
    font-size: 40px;
    font-weight: bold;
    padding: 20px 30px;
    border-radius: 20px;
    border: 4px solid #fff;
    cursor: pointer;
    box-shadow: 2px 2px 3px 1px rgba(30,30,30,0.5);
}

#zemljevid #gumb-resetiraj {
    background-image: url("img/resetiraj.png");
    left: 80px;
    top: 18px;
}

#zemljevid #gumb-nazaj {
    background-image: url("img/nazaj.png");
    left: 20px;
    top: 18px;
}

#zemljevid #gumb-lestvica {
    background-image: url("img/lestvica.png");
    right: 20px;
    top: 18px;
}

#zemljevid .okrogligumb {
    background-repeat: no-repeat;
    position: absolute;
    width: 44px;
    height: 44px;
    cursor: pointer;
    box-shadow: 1px 1px 2px 1px #666;
    border-radius: 1000px;
    background-position: -1px -1px;
    z-index: 1000;
}

#zemljevid .okrogligumb:hover{
    box-shadow: 0px 0px 5px 4px #fff;
}
#zemljevid button:hover{
    background-color: rgba(223, 13, 13, 0.8);
    box-shadow: 0px 0px 3px 2px #fff;
}

#zemljevid #slika{
    border: 6px solid #fff;
    padding: 0px;
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    left: 345px;
    top: -90px;
    height: 200px;    
    z-index: 1000;
    width: 300px;
    background-color: #dfdfdf;    
    display: none;
    
}

#zemljevid #slika #overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 15;
    width: 300px;
    height: 200px;
}

#zemljevid #slika #overlay.otroci1{background-image: url("img/otroci1.png");}
#zemljevid #slika #overlay.otroci2{background-image: url("img/otroci2.png");}
#zemljevid #slika #overlay.otroci3{background-image: url("img/otroci3.png");}
#zemljevid #slika #overlay.otroci4{background-image: url("img/otroci4.png");}
#zemljevid #slika #overlay.otroci5{background-image: url("img/otroci5.png");}
#zemljevid #slika #overlay.otroci6{background-image: url("img/otroci6.png");}


#h1 {
    width: 100%;
    text-align: center;
    position: relative;
    top: 160px;
    z-index: 1000;
}

#izpisimesto {
    text-align: center;
    font-size: 30px;
    color: #fff;
    font-weight: bold;
    padding: 0px 30px;
    display: inline-block;
    margin: 0 auto;
    background-color: #008393;
    line-height: 45px;
    border: 3px solid #fff;
    border-radius: 15px;
    box-shadow: 2px 2px 3px 1px rgba(30,30,30,0.5);
    
}

#izpisipotezo {
    text-align: center;
    font-size: 18px;
    color: #555;
    font-weight: bold;
    padding: 0px 0px;
    position: absolute;
    width: 60px;
    left: 568px;
    line-height: 24px;
    top: -82px;
    border-radius: 15px;
    background-color: #EEE;
    border: 2px solid #fff;
    box-shadow: 2px 2px 3px 1px rgba(30,30,30,0.5);
    height: 25px;
    z-index: 20;
    display: none;
}

#izkupicek {
    z-index: 1000;
    width: 200px;
    text-align: left;
    font-size: 12px;
    color: #4D4E60;
    font-weight: bold;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    right: 10px;
    padding: 10px;
    border-radius: 15px;
    bottom: 10px;
    line-height: 19px;
    border: 3px solid rgba(223, 13, 13, 1);
    box-shadow: 2px 2px 3px 1px rgba(30,30,30,0.5);

}

.id2 #izkupicek{
    left: 10px;
    right: initial;
}

#izkupicek h4{
    margin: 0px 0px 10px;
    font-size: 23px;
    color: rgb(223, 13, 13);
    
}

#tockesum {
    width: 100px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: absolute;
    background-color: rgba(223, 13, 13, 0.8);
    border: 2px solid #fff;
    left: 140px;
    top: 18px;
    border-radius: 15px;
    font-size: 28px;
    line-height: 38px;
    box-shadow: 2px 2px 3px 1px rgba(30,30,30,0.5);
    height: 40px;
    z-index: 1000;
}
/*
#tocke {
    position: absolute;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 100px;
    top: 260px;
    font-weight: bold;
    text-shadow: 0px 2px 2px #000;
    pointer-events: none;
    opacity: 0.8;
}
*/
#tocke {
    position: absolute;
    width: 40%;
    text-align: center;
    color: #fff;
    font-size: 60px;
    top: -86px;
    font-weight: bold;
    text-shadow: 0px 2px 2px #000;
    pointer-events: none;
    opacity: 0.8;
    right: -20px;
}

#countdown {
    width: 100px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: absolute;
    background-color: rgba(223, 13, 13, 0.8);
    border: 2px solid #fff;
    right: 80px;
    top: 18px;
    border-radius: 15px;
    font-size: 28px;
    line-height: 38px;
    box-shadow: 2px 2px 3px 1px rgba(30,30,30,0.5);
    height: 40px;
    z-index: 1000;
}

#tocke.fadeout {
    -webkit-animation: fadeOut 1s ease-in forwards;
       -moz-animation: fadeOut 1s ease-in forwards;
            animation: fadeOut 1s ease-in forwards;      
}

.darilo {
    position: absolute;
    width: 40px;
    height: 43px;
    background-size: cover;
    opacity: 0;
}

.darilo.d1{ background-image: url('img/darilo1_mini.png'); }
.darilo.d2{ background-image: url('img/darilo2_mini.png'); }
.darilo.d3{ background-image: url('img/darilo3_mini.png'); }
.darilo.d4{ background-image: url('img/darilo4_mini.png'); }

.darilo.padaj{
    animation: padaj 2s ease-in forwards;      
}

@keyframes padaj 
{
    0%   {opacity: 0; transform: scale(2) translate(35px, -50px); }
    25%   {opacity: 1; transform: scale(1) translate(0, 0); }
    50%   {opacity: 1; transform: scale(1) translate(0, 0); }
    100%   {opacity: 0; transform: scale(1) translate(0, 0); }
}



@keyframes fadeOut 
{
    0%   {opacity:1;}
    100%   {opacity:0;}
}

#bozicek{
    position: absolute;
}

.preloader img{
    opacity: 0.1; 
    width: 1px;
    height: auto;
}

#bozicek .sani {
    position: relative;
    background-image: url("img/santa.png");
    width: 140px;
    height: 40px;
    background-size: cover;
    pointer-events: none;
    opacity: 0;
    z-index: 1000;
}

#bozicek.prelet .sani{
    animation: prelet 1s linear forwards;    
}

@keyframes prelet 
{
    0%   {left: 150px; opacity: 0;top: 40px; }
    50%   {left: 50px;opacity: 1;top: 30px; }
    100%   {left:-50px;opacity: 0;top: 25px; }
}

#bozicek .zvezdica {
    background-image: url("img/zvezdica.png");
    width: 20px;
    height: 20px;
    background-size: cover;
    position: absolute;
    opacity: 0;
    top: 40px;
}

#bozicek .zvezdica.z1{left: 150px; top: 37px;}
#bozicek .zvezdica.z2{left: 110px; top: 37px;}
#bozicek .zvezdica.z3{left: 70px; top: 35px;}
#bozicek .zvezdica.z4{left: 30px; top: 37px;}
#bozicek .zvezdica.z5{left: -10px; top: 37px;}

#bozicek.prelet .z1{animation: utrip 1s 0s linear forwards;}
#bozicek.prelet .z2{animation: utrip 1s 0.15s linear forwards;}
#bozicek.prelet .z3{animation: utrip 1s 0.3s linear forwards;}
#bozicek.prelet .z4{animation: utrip 1s 0.45s linear forwards;}
#bozicek.prelet .z5{animation: utrip 1s 0.6s linear forwards;}


@keyframes utrip 
{
    0%   {opacity: 0; transform: scale(0.5); }
    50%   {opacity: 1;transform: scale(1); }
    100%   {opacity: 0;transform: scale(1.5); }
}

#zemljevid {
    
    background-repeat: no-repeat;
    background-position: center top;
    width: 1000px;
    height: 665px;
    border: 5px solid #fff;
    border-radius: 20px;
    box-shadow: 1px 2px 5px 0px #888;
    cursor: crosshair;
}

#zemljevid.id1{
    background-image: url('img/SLOweb.jpg');
}

#zemljevid.id2 {

    background-image: url('img/evropa.jpg');
    background-position: -1px;
    background-color: #fff;

}


#zastavica1, 
#zastavica2 {
    width: 155px;
    height: 145px;
    position: absolute;    
    transform: scale(0.7);    
    opacity: 1;
    z-index: 100;
}

#zastavica1.animirana,
#zastavica2.animirana{
    transition: all 0.1s ease-in;
}

#zastavica1.velika,
#zastavica2.velika{
    transform: scale(1.5);
    margin-top: -80px;
    margin-left: 40px;
    opacity: 0;    
}

#zastavica1 polyline.zastava,
#zastavica2 polyline.zastava{
    width: 50px; 
    height: 50px; 
    color: rgb(255, 255, 255); 
    stroke-linecap: round; 
    stroke: rgb(0, 0, 0); 
    stroke-width: 4; 
    
}

#zastavica1 polyline.zastava{
    fill: rgba(255, 0, 0, 0.8);
}

#zastavica2 polyline.zastava{
    fill: rgba(0, 255, 0, 0.8);
}

#zastavica1.zapicena .kriz,
#zastavica2.zapicena .kriz{
    display:block;
}

polyline.kriz{
    stroke: rgb(100, 100, 100); 
    stroke-width: 2; 
    fill: none;
    display:none;
    transition:all 0.2s linear;
}


#feedback {
    position: absolute;
    width: 120px;
    height: 150px;
    background-size: cover;
    left: 810px;
    top: 400px;
    display: none;
    z-index: 1000;
}

.id2 #feedback{
    left: 60px;
}

#feedback.dober{
    background-image: url('img/bozicek-vesel.png');
}

#feedback.slab{
    background-image: url('img/bozicek-zalosten.png');
}

#feedback .oblacek {
    width: 174px;
    left: -39px;
    position: absolute;
    bottom: 100px;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    line-height: 1em;
    transition: all 0.6s ease-in-out;
    background-color: #fffe;
    border: 4px solid #008393;
    border-radius: 10px;
    padding: 10px 20px;
    word-break: break-word;
    box-shadow: 2px 2px 3px 1px rgba(30,30,30,0.5);
    z-index: 1000;
}

#feedback .oblacek.viden {
    //top: -40px;
    bottom: 130px;
    opacity: 1;
}

#feedback .oblacek .tekst {
    line-height: 1.1em;
    border-radius: 50px;
    color: #000;
    font-size: 0.9em;
}

#feedback .oblacek .repek {
    position: absolute;
    bottom: -60px;
    left: 0px;
    opacity: 1.4;
}