/*
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
*/

#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('/vsebina/aplikacije/lacnimorskipes/img/otok03d.jpg');
    background-color:  #347d76; 
    background-repeat: no-repeat;    
    background-position: center top;
}

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

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 {
    background-image: url("img/napis-mestni-izziv.png");
    background-repeat: no-repeat;
    margin-bottom: 60px;
    width: 603px;
    left: 200px;
    position: absolute;
    font-size: 90px;
    color: #fff;
    text-shadow: 0px 0px 4px #000;
    font-weight: bold;
    text-align: center;
    top: 40px;
    height: 117px;
}

.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;
}

#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: 0px;
}

.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(0, 131, 147, 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;
}

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

#h1 {
    width: 100%;
    text-align: center;
    position: relative;
    top: 80px;
}

#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: 28px;
    color: #fff;
    font-weight: bold;
    padding: 0px 0px;
    position: absolute;
    width: 120px;
    left: 435px;
    line-height: 38px;
    top: 18px;
    border-radius: 15px;
    background-color: #00AD5E;
    border: 2px solid #fff;
    box-shadow: 2px 2px 3px 1px rgba(30,30,30,0.5);
    height: 40px;
}

#izkupicek {

    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 #008393;
    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(0, 131, 147);   
    
}

#tockesum {
    width: 100px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: absolute;
    background-color: #9E5424;
    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;
}

#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;
}

#countdown {
    width: 100px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    position: absolute;
    background-color: #9E5424;
    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;
}

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

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

#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.5);    
    opacity: 1;
}

#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;
}