/* GUI - opravilna vrstica */

.oblackable .stripoblacek{
    color:#307AB4;
    font-size:13px;
    font-weight: bold;
    display:none;
    z-index: 500;
    box-sizing: content-box;
}

.floatinggui #gui{
    position: fixed;
    bottom: 0px;
}

.floatinggui #guilevo{
    margin-top: 100px;
    position: initial;
}

.floatinggui #noga{
    padding-bottom: 150px;
}

.floatinggui #guilevo .gumbnazaj{
    top: 100px;
}

#gui{
    position: relative;
    height:170px;
    max-width: 1051px;
    margin: 0 auto;    
}

#gui #guiobvestilo {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 100000;
    display:none;
}

#gui #guiobvestilo .podlagaa {
    background-image: url("../images/sporocila/zvitek.png");
    background-repeat: no-repeat;
    width: 800px;
    height: 495px;
    top: 20%;
    padding: 30px 100px;
    box-sizing: border-box;
    text-align: center;
    font-size: 20px;
    margin: 0 auto;
    position: relative;
    z-index: 10000000;
}

#gui #guiobvestilo .podlagaa .predmeti{
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse:collapse;
}

#gui #guiobvestilo .podlagaa .predmeti .unizlat{
    margin-top: 2px;
}

#gui #guiobvestilo .podlagaa .predmeti .pred{
    display: table-cell;
    
}

#gui #guiobvestilo .podlagaa .predmeti .pred .naziv {
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #703e20;
}

#gui #guiobvestilo .podlagaa .predmeti .pred:hover .naziv{
    color:#375968;
}

#gui #guiobvestilo .podlagaa .predmeti .pred img{
    max-height: 140px;
    max-width: 100%;
}

#gui #guiobvestilo .podlagaa .predmeti .pred .cena{
    
}

#gui #guiobvestilo .podlagaa .zappri {
    position: absolute;
    right: 17px;
    top: 20px;
    cursor: pointer;
    font-size: 27px;
    font-weight: bold;
}

#gui #guiobvestilo .podlagaa .zappri:hover{
    color:#fff;
}

#gui #guiobvestilo .podlagaa h1{
    color:#375968;
    font-family: 'FreckleFace', 'Arial';
    margin-bottom: 15px;
}

#gui #guiobvestilo .podlagaa .novinaziv{
    font-size: 1.3em;
    text-transform: uppercase;
    color:#703e20;
    font-weight: bold;
}

#guilevo {
    background-color: rgba(210, 220, 220, 0.95);
    border-radius: 15px;
    box-shadow: 1px 1px 2px #222;
    height: 50px;
    left: 0px;
    position: absolute;
    top: 102px;
    padding-right: 1px;
    padding-left: 0px;
    width: 400px;
}

#guisredina{
    background-image: url("../images/gui/podlaga_levo.png");
    height: 54px;
    left: 440px;
    position: absolute;
    top: 100px;
    width: 176px;   
}

#guisredina .kaja{
    background-image: url("../images/promo/kaja_mala.png");
    background-size: 100% 100%;
    height: 187px;
    left: 30px;
    position: absolute;
    top: -142px;
    width: 122px;
}

#guisredina .stripoblacek{
    background-image: url("../images/gui/okvircki_1.png");
    bottom: 128px;
    height: 74px;
    left: 124px;
    line-height: 1.1em;
    padding: 19px 16px 5px 25px;
    position: absolute;
    width: 102px;
}

#guilevo .gumbnazaj{
    width: 17px;
    background-color: rgba(255,255,255,0.3);
    border-radius: 15px 0px 0px 15px;
    height: 49px;
    position: absolute;
    left: 1px;
    top: 1px;
    font-size: 25px;
    color: #00a;
    line-height: 49px;
    padding-left: 5px;    
}

#guilevo .gumbnazaj:hover{
    background-color: rgba(255,255,255,0);
}

#guilevo .gumbnazaj .oblacek {
    background-image: url("../images/gui/oblacek_ladja.png");
    height: 57px;
    left: -97px;
    padding: 9px 18px;
    position: absolute;
    top: -90px;
    width: 81px;
    text-align: center;
}

#guilevo .ladja {

    background-image: url("../images/gui/ladja.png");
    height: 74px;
    left: 7px;
    position: relative;
    float: left;
    top: -31px;
    width: 80px;
    cursor: pointer;
    background-size: cover;

}

#guilevo .znanjevid {

    background-image: url("../images/gui/znanjevid.png");
    height: 54px;
    left: 3px;
    position: relative;
    float: left;
    top: -20px;
    width: 70px;
    cursor: pointer;
    background-position: 0px;
    margin-right: 2px;
    background-size: cover;

}

#guilevo .znanjevid .oblacek {
    background-image: url("../images/gui/oblacek_ladja.png");
    height: 27px;
    left: -77px;
    padding: 23px 18px;
    position: absolute;
    top: -60px;
    width: 81px;
    text-align: center;
}

#guilevo .dogajanje {
    background-image: url("../images/mojotok/daljnogled2.png");
    height: 88px;
    left: 4px;
    position: relative;
    float: left;
    top: -34px;
    width: 44px;
    cursor: pointer;
    background-position: 0px;
    margin-right: -7px;
    background-size: cover;
    background-repeat: no-repeat;
}

#guilevo .dogajanje .oblacek {
    background-image: url("../images/gui/oblacek_ladja.png");
    height: 33px;
    left: -77px;
    padding: 20px 18px;
    position: absolute;
    top: -60px;
    width: 84px;
    text-align: center;
}

#guilevo .sporocila {

    background-image: url("../images/sporocila/steklenica-1-5_steklenica_obrezana.png");
    height: 69px;
    left: 11px;
    position: relative;
    float: left;
    top: -28px;
    width: 29px;
    cursor: pointer;
    background-position: 0px;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 8px;

}

#guilevo .sporocila .papir {

    background-image: url("../images/sporocila/steklenica-1-5_papir.png");
    height: 134px;
    width: 55px;
    background-size: cover;
    background-position: -48px -35px;

}

#guilevo .sporocila .papir.utripaj{
    animation: blinking 0.7s infinite alternate linear;
}

@keyframes blinking {
  from {opacity: 1;}
  to {opacity: 0.3;}
}

#guilevo .sporocila .oblacek {
    background-image: url("../images/gui/oblacek_ladja.png");
    height: 40px;
    left: -77px;
    padding: 17px 18px;
    position: absolute;
    top: -60px;
    width: 84px;
    text-align: center;
}

/*.otocje #guilevo .ladja{pointer-events: none;}*/
/*.otocje69 #guilevo .ladja{pointer-events: none;}*/

#guilevo .ladja .oblacek {
    background-image: url("../images/gui/oblacek_ladja.png");
    height: 27px;
    left: -77px;
    padding: 23px 18px;
    position: absolute;
    top: -60px;
    width: 81px;
    text-align: center;
}

#guilevo .svetilnikmali{
    background-image: url("../images/gui/svetilnik.png");
    height: 114px;
    left: 100px;
    position: absolute;
    top: -70px;
    width: 53px;    
}

#guilevo .mojotokmali {

    background-image: url("../images/mojotok/moj_otok_ikona.png");
    background-repeat: no-repeat;
    float: left;
    height: 66px;
    left: 14px;
    position: relative;
    top: -29px;
    width: 69px;
    background-size: cover;
    margin-right: 21px;

}

#guilevo .darilogumb {

    background-image: url("../images/darilnica/darilo.png");
    background-repeat: no-repeat;
    float: left;
    height: 55px;
    left: 16px;
    position: relative;
    top: -21px;
    width: 55px;
    background-size: cover;
    margin-right: 12px;

}
#guilevo .darilogumb .oblacek {
    background-image: url("../images/gui/oblacek_ladja.png");
    height: 27px;
    left: -77px;
    padding: 23px 18px;
    position: absolute;
    top: -60px;
    width: 81px;
    text-align: center;
}


#guilevo .svetilnikmali .oblacek, #guilevo .mojotokmali .oblacek{
    background-image: url("../images/gui/oblacek_svetilnik.png");
    height: 43px;
    left: 30px;
    padding: 21px 18px;
    position: absolute;
    text-align: center;
    top: -40px;
    width: 92px;
}

#guilevo .mojotokmali .oblacek{
    left: 50px;
    top: -50px;
}

#guilevo .krogec {
    width: 23px;
    height: 23px;
    position: absolute;
    background-color: #df1e34;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    line-height: 23px;
    bottom: 0px;
    right: -7px;
    border: 2px solid #fff;
}

#guidesno{
    background-image: url("../images/gui/podlaga_desno.png");
    height: 55px;
    left: 813px;
    position: absolute;
    top: 100px;
    width: 234px;
}

#guidesno .zlatnik{
    left: 30px;
    position: absolute;
    display:none;
    width:40px;
}

#guidesno #zlatnik1{
    left: 10px;
}

#guidesno #zlatnik2{
    left: 35px;
}

#guidesno #zlatnik3{
    left: 60px;
}

#guidesno .skrinja {
    background-image: url("../images/gui/skrinja_dvodelna.png");
    background-position: center -150px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: bold;
    height: 40px;
    left: -4px;
    letter-spacing: -0.03em;
    line-height: 1.2em;
    padding: 108px 52px 0 0;
    position: absolute;
    text-align: center;
    top: -88px;
    width: 103px;
    transform: scale(0.8);
    box-sizing: content-box;
}

#guidesno .skrinja.odprta{
    background-position: center 0px;
}

#guidesno .skrinja .oblacek{
    left: -210px;
    top: -50px;
    width: 200px;
}

.avatar {
    height: 95px;
    left: 135px;
    position: absolute;
    top: -49px;
    width: 91px;
    background-repeat: no-repeat;
    background-size: cover;

}

#guidesno .avatar .oblacek {
    left: -60px;
    padding-right: 40px;
    top: -80px;
    width: 150px;
    text-align: center;
}

#guixp .oblacek {
    left: 0px;
    top: -110px;
    width: 320px;
    padding: 15px 25px;
}

.imepriimek {

    font-family: 'Trebuchet MS';
    background-color: rgba(255, 255, 255, 1);
    border: 3px solid #A1CC5D;
    color: #517A10;
    border-radius: 16px;
    bottom: 0px;
    font-size: 13px;
    line-height: 0.9em;
    margin: 0 0px 0px 2px;
    padding: 2px 4px 3px;
    position: absolute;
    text-align: center;
    width: 75px;
    word-break: break-word;

}

.avatar .slika {
    width: 110px;
    position: absolute;
    left: -9px;
    top: -12px;
}

.avatar.avatar1{
    background-image: url("../images/avatarji/krog_avatar1.png");    
}

.avatar.avatar2{
    background-image: url("../images/avatarji/krog_avatar2.png");    
}

.avatar.avatar3{
    background-image: url("../images/avatarji/krog_avatar3.png");    
}

.avatar.avatar4{
    background-image: url("../images/avatarji/krog_avatar4.png");    
}

.avatar.avatar5{
    background-image: url("../images/avatarji/krog_avatar5.png");    
}

.avatar.avatar6{
    background-image: url("../images/avatarji/krog_avatar6.png");    
}

.avatar.avatar7{
    background-image: url("../images/avatarji/krog_avatar7.png");    
}

.avatar.avatar8{
    background-image: url("../images/avatarji/krog_avatar8.png");    
}

.avatar.avatar101{
    background-image: url("../images/avatarji/krog_avatar101.png");    
}

.avatar.avatar102{
    background-image: url("../images/avatarji/krog_avatar102.png");    
}

#guidesno .novixpji {
    position: absolute;
    width: 380px;
    left: -10px;
    top: -75px;
}

#guidesno .novixpji .novxp {
    opacity: 1;
    color: #fff;
    text-align: center;
    transition: all 1.5s ease-out;
    font-size: 20px;
    margin-top: 0px;
    position: absolute;
    width: 380px;
    pointer-events: none;
}

#guidesno .novixpji .novxp.animiraj{
    font-size: 30px;
    opacity: 0;
    margin-top: -40px;
}

#guidesno .info{
    
}

#guidesno .info .ikona{
    width: 20px;
    text-align: center;
    border-radius: 20px;
    background-color: #fff;
    border: 2px solid #a1cc5d;
    position: absolute;
    top: 10px;
    left: 101px;
}

#guidesno .info .oblacek{
    left: -10px;
    padding-right: 40px;
    top: -120px;
    width: 200px;
}

#guixp {
    left: 410px;
    position: absolute;
    top: 90px;
    height: 63px;
    width: 380px;
}

#guixp .stevilka-stopnje .napis{
    background-image: url("../images/gui/stopnja.png");
    width: 62px;
    height: 24px;
    background-size: cover;
}

#guixp .stevilka-stopnje img.napis {
    position: absolute;
    width: 60px;
    padding: 0px;
}

#guixp .stevilka-stopnje .stevilka {
    background-color: #ccd4d6;
    border-radius: 1000px;
    line-height: 45px;
    position: absolute;
    top: 14px;
    width: 45px;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    left: 7px;
    box-shadow: 1px 1px 2px #222;
    letter-spacing: -0.1em;
}

#guixp .stevilka-stopnje .stevilka.naslednja{
    color: #d7a320;
    text-shadow: 0px 0px 5px #fff;
}


#guixp .ime-stopnje {
    color: #fff;
    font-size: 14px;
    letter-spacing: -0.02em;
    font-weight: bold;
    text-shadow: 0px 1px 1px #444;
    position: absolute;
    width: 330px;
    left: 73px;
    top: 5px;
}

#guixp .progress-bar {
    background-color: #fff;
    position: absolute;
    width: 300px;
    height: 19px;
    border: 3px solid #bfd0d2;
    border-radius: 25px;
    top: 24px;
    left: 69px;
    overflow: hidden;
    box-shadow: 1px 1px 2px 0px #555;
}

#guixp .progress-bar .trak{
    position: absolute;
    width: 0%;
    top: 0px;
    left: 0px;
    height: 19px;
}

#guixp .progress-bar.initiated .trak{
    transition: all 1.2s ease-in-out;
}

#guixp .progress-bar .oranzni{
    background-color:#f2af62;
}

#guixp .progress-bar .zeleni{
    background-color:#75ac72;
    
}

#guixp .progress-bar .tekst {
    color:#0b5a6b;
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 13px;
    line-height: 17px;
    font-weight: bold;
    opacity: 0;
    cursor: default;
    transition: all 0.4s ease-in-out;
}

#guixp .progress-bar:hover .tekst{
    opacity: 1;
}

/* ZADNJI NIVO */

#guixp.stopnja60 .progress-bar .trak{
    width: 100% !important;
}

#guixp.stopnja60 .progress-bar:hover .tekst{
    opacity: 0;
}

.sivioblacek{
    background-color: rgba(255, 255, 255, 1);
    border: 3px solid #A1CC5D;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;  
    color: #1C3073;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.3em;
    padding: 15px;
    position: absolute;
    display:none;
    z-index: 10000;
    box-sizing: content-box;
}


/************************************ POPUPSS ************************************/

.otocjer #vsebina .popup{
    left: calc(50% - 525px);
    top: 100px;
}




/* POPUP SPOROČILA */

#vsebina .popupsporocila .naslov {

    font-size: 41px;
    line-height: 40px;
    margin-bottom: 30px;
    font-family: 'FreckleFace';
    color: #6e3800;
    margin-top: 10px;

}

#vsebina .popupsporocila #novosporocilo{
    display:none;
}

#vsebina .popupsporocila {
    font-family: 'Trebuchet MS';
    font-weight: bold;
    background-image: url("../images/nagradnaigra/nagradna-igra-pravila-podlaga.png");
    display: none;
    color: #696a6b;
    position: absolute;
    width: 1050px;
    height: 800px;
    text-align: center;
    padding: 10px 70px;
    box-sizing: border-box;
    font-size: 15px;
    top: 0px;
    z-index: 10000;
}

#vsebina .popupsporocila .zapri {
    position: absolute;
    cursor: pointer;
    right: 34px;
    top: 0px;
    font-size: 28px;
}

#vsebina .popupsporocila .zapri:hover{
    color:#fff;
}

#vsebina .popupsporocila .leva {
    position: relative;
    width: 315px;
    float: left;
    border-right: 1px solid #6e3800;
    padding-right: 20px;
    height: 650px;
}

#vsebina .popupsporocila .seznam {
    text-align: left;
}

#vsebina .popupsporocila .paginacija {
    display: none;
    position: absolute;
    text-align: center;
    width: 95%;
    bottom: 0px;
    font-size: 14px;
}

#vsebina .popupsporocila .paginacija .stran {
    color: #333;
    margin: 0px 14px;
}

#vsebina .popupsporocila .paginacija .paggumb{
    cursor: pointer;
}

#vsebina .popupsporocila .paginacija .paggumb:hover{
    text-decoration: underline;
}

#vsebina .popupsporocila .paginacija.zacetek .novejsa{
    display:none;
}

#vsebina .popupsporocila .paginacija.konec .starejsa{
    display:none;    
}

#vsebina .popupsporocila .seznam .nit {

    position: relative;
    padding: 9px 12px 17px;
    margin-bottom: 8px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #fff;
    background-color: rgba(255,255,255,0.4);
    color: #926a40;
    transition: all 0.1s linear;

}

#vsebina .popupsporocila .seznam .nit.novo .zadeva::before {
    content: 'NOVO';
    background-color: #e30613;
    border-radius: 6px;
    padding: 3px 7px;
    font-size: 10px;
    color: #fff;
    top: -3px;
    font-weight: bold;
    position: relative;
    display: inline;
    margin-right: 5px;
}

#vsebina .popupsporocila .seznam .nit:hover {

    border: 1px solid #926a40;
    background-color: #fff;

}

#vsebina .popupsporocila .seznam .nit .zadeva{
    margin-bottom: 4px;
}

#vsebina .popupsporocila .seznam .nit .kreator{
    font-weight: normal;
}

#vsebina .popupsporocila .seznam .nit .udelezenci {
    font-weight: normal;
    max-height: 43px;
    overflow: hidden;
    line-height: 20px;
}

#vsebina .popupsporocila .seznam .nit .zadnjasprememba {

    color: #000;
    font-weight: normal;
    position: absolute;
    bottom: 5px;
    font-size: 10px;
    right: 16px;

}

#vsebina .popupsporocila .seznam .nit .izbrisi {

    width: 22px;
    position: absolute;
    right: -6px;
    font-size: 20px;
    cursor: pointer;
    color: #eee;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.6);
    font-weight: bold;
    top: -3px;

}

#vsebina .popupsporocila .seznam .nit .izbrisi:hover{
    color: #f00;
    text-shadow: 0px 0px 1px rgba(202, 155, 155, 0.6);
}

#vsebina .popupsporocila .seznam .nit.izbrana{
    border: 1px solid #000;
    background-color: #fff;
}

#vsebina .popupsporocila .desna {
    width: 568px;
    float: right;    
}

#vsebina .popupsporocila .odprto {
    text-align: left;
    display:none;
}

#vsebina .popupsporocila .odprto .sporocila {
    max-height: 540px;
    overflow: auto;
    word-break: break-word;
    overflow-anchor: auto;
    padding-right: 30px;
    margin-bottom: 10px;
}

#vsebina .popupsporocila .odprto .reply{
    display:none;
    padding-left: 30px;
}

#vsebina .popupsporocila .odprto .reply textarea{
    border: 1px solid #0095a3;
    border-radius: 10px;
    margin-right: 10px;
    height: 53px;
    padding: 5px 10px;
    font-family: 'Trebuchet MS';
    width: 356px;
}

#vsebina .popupsporocila .odprto .reply button{
    padding: 15px;
    vertical-align: top;
    border-radius: 10px;
    border: 0px;
    color: #fff;
    background-color: #0095a3;
}

#vsebina .popupsporocila .nit.neogledano{
    color:#000;
    background-color: rgba(255,255,255,1);
}

.popupsporocila .nsAnim {

    position: absolute;
    height: 140px;
    bottom: 70px;
    width: 910px;

}
    
.popupsporocila .nsAnim canvas#splash {

    position: absolute;
    left: 0px;
    top: -140px;

}

.popupsporocila .nsAnim .val1 {

    background-image: url('../images/val_2.png');
    width: 100%;
    height: 97px;
    position: absolute;
    top: 22px;
    animation: valovanje1 100s infinite linear;

}

.popupsporocila .nsAnim .val2 {

    background-image: url('../images/val_3.png');
    height: 103px;
    position: absolute;
    width: 100%;
    top: 50px;
    animation: valovanje1 70s infinite linear;

}

.popupsporocila .nsAnim .flasa {

    background-image: url('../images/sporocila/steklenica-1-5_steklenica_polna.png');
    width: 192px;
    height: 217px;
    position: absolute;
    top: -70px;
    left: 0px;
    animation: padecVvodo 6s infinite ease-in-out, plavaj 6s infinite linear;

}
    
@keyframes valovanje1 {
  0% {background-position: 0px;}
  100% {background-position: -1000px;}
}
    
@keyframes padecVvodo {
  0% {top: -300px; opacity: 0;}
  9% {top: -40px; opacity: 1;}
  20% {top: -75px;}
  30% {top: -50px;}
  40% {top: -75px;}
  50% {top: -50px;}
  60% {top: -75px;}
  70% {top: -50px;}
  80% {top: -75px;}
  90% {top: -50px;}
  100% {top: -75px;}
}    

@keyframes plavaj{
  0% {left: 200px;}
  100% {left: 400px;}
}

.popupsporocila .odprto .zadeva {

    text-align: left;
    font-size: 20px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    color: #6e3800;
    padding-left: 30px;

}

.popupsporocila .sporocilo {

    position: relative;
    margin: 13px 10px 13px 30px;
    background-color: #eacbaa;
    border-radius: 15px;
    color: #000;
    width: 420px;
    float: left;
    text-align: left;
    padding: 10px 15px 10px 30px;

}

.popupsporocila .sporocilo .vsebina{
    font-weight:normal;
}

.popupsporocila .sporocilo .datumnastanka {

    color: #926a40;
    font-weight: normal;
    position: absolute;
    font-size: 10px;
    right: 16px;
    top: -13px;

}

.popupsporocila .sporocilo .vzdevek {

    margin-bottom: 6px;
    color: #000;
    font-weight: normal;

}

.popupsporocila .sporocilo.moje .vzdevek{
    color: #fff;
}

.popupsporocila .sporocilo.moje {

    background-color: #1eafc8;
    float: right;
    text-align: left;
    padding: 10px 30px 10px 15px;
    color: #fff;

}

.popupsporocila .sporocilo .avatar {
    position: absolute;
    background-size: cover;
    width: 52px;
    height: 52px;
    right: initial;
    left: -20px;
    top: 1px;
}

.popupsporocila .sporocilo.moje .avatar {

    left: initial;
    right: -20px;

}





/* POPUP DOGAJANJE */

#vsebina .popupdogajanje .extra .grm {
    background-image: url("../images/gui/grm.png");
    background-repeat: no-repeat;
    width: 243px;
    height: 91px;
    position: absolute;
    z-index: 10;
    transition: all 0.5s ease-in-out;
}

#vsebina .popupdogajanje .extra .grm1 {
    left: 180px;
    top: 26px;
}

#vsebina .popupdogajanje .extra .grm2 {
    left: 553px;
    top: 26px;
}

#vsebina .popupdogajanje .extra.skrit .grm1{
    left: 300px;
}

#vsebina .popupdogajanje .extra.skrit .grm2{
   left: 423px; 
}

#vsebina .popupdogajanje .extra .ifskrit{
    display: none;
}

#vsebina .popupdogajanje .extra.skrit .ifskrit{
    display: block;
}

#vsebina .popupdogajanje .extra.skrit .notskrit{
    display: none;
}

#vsebina .popupdogajanje .extra{
    position: relative;
    text-align: left;
}

#vsebina .popupdogajanje .extra .skrijme{
    background: #dd8d0b;
    height: 25px;
    left: 19px;
    position: absolute;
    top: 20px;
    border: 1px solid #c09b71;
    box-shadow: 0px 0px 2px 1px rgba(100,100,100,0.9);
    padding: 2px;
}

#vsebina .popupdogajanje .extra .avatar {

    left: 439px;
    position: absolute;
    top: 17px;
    background-size: cover;
    width: 100px;
    height: 99px;

}

#vsebina .popupdogajanje .extra .imepriimek{
    margin: 0 2px;
}

#vsebina .popupdogajanje {
    font-family: 'Trebuchet MS';
    background-image: url("../images/nagradnaigra/nagradna-igra-pravila-podlaga.png");
    display: none;
    color: #696a6b;
    position: absolute;
    width: 1050px;
    height: 800px;
    text-align: center;
    padding: 10px 40px;
    box-sizing: border-box;
    font-size: 15px;
    top: 0px;
    z-index: 10000;
}

#vsebina .popupdogajanje .zapri {
    position: absolute;
    cursor: pointer;
    right: 34px;
    top: 0px;
    font-size: 28px;
}

#vsebina .popupdogajanje .zapri:hover{
    color:#fff;
}

#vsebina .popupdogajanje .seznam {
    height: 570px;
    overflow-y: scroll;
    text-align: center;
    box-shadow: inset -7px -2px 16px -9px rgba(0,0,0,0.5);
}

#vsebina .popupdogajanje .unizlat{
    position: relative;
    top: 4px;
}

#vsebina .popupdogajanje .seznam .kdaj{
    display:inline;
}

#vsebina .popupdogajanje .seznam .spol{
    display:inline;
}

#vsebina .popupdogajanje .seznam .nazivnaloge{
    font-family: 'Trebuchet MS';
    font-weight: bold;
    display:inline;
    color:#122669;
}

#vsebina .popupdogajanje .dogodek{
    transition: all 1s ease-in-out;
    font-size: 14px;
}


#vsebina .popupdogajanje .odprava-naslov {

    font-size: 28px;
    line-height: 40px;
    margin-bottom: 15px;
    font-family: 'FreckleFace';
    color: #00708a;
    margin-top: 7px;

}

#vsebina .popupdogajanje .imeotoka {
    display: inline;
    color: #1b9fac;
    font-family: 'FreckleFace';
    font-size: 17px;

}

#vsebina .popupdogajanje .zakljucek{
    /*display:inline;*/
    font-weight: bold;
}

#vsebina .popupdogajanje .zakljucek.uspesen{
    color: #38a400;
}

#vsebina .popupdogajanje .zakljucek.neuspesen{
    color: #dd8d0b;
}

#vsebina .popupdogajanje .zakljucek.premislil{
    color: #d5370d;
}

#vsebina .popupdogajanje .vzdevek{
    font-family: 'Trebuchet MS';
    font-weight: bold;
    display:inline;
    color:#517A10;
}

#vsebina .popupdogajanje .seznam .avatar {
    left: 0px;
    width: 40px;
    height: 39px;
    display: inline-block;
    background-size: cover;
    position: relative;
    top: 12px;
    margin: -7px 3px 0 4px;
    background-image: none;
}



/* POPUP ODPRAVA */

#vsebina .popupodprava {
    font-family: 'FreckleFace', 'Trebuchet MS';
    background-image: url("../images/nagradnaigra/nagradna-igra-pravila-podlaga.png");
    display: none;
    color: #696a6b;
    position: absolute;
    width: 1050px;
    height: 800px;
    text-align: center;
    padding: 10px 0px;
    box-sizing: border-box;
    font-size: 15px;
    top: 0px;
    z-index: 10000;
}

#vsebina .popupodprava .zapri {
    position: absolute;
    cursor: pointer;
    right: 34px;
    top: 0px;
    font-size: 28px;
}

#vsebina .popupodprava .zapri:hover{
    color:#fff;
}

#vsebina .popupodprava .odprava-naslov {
    font-size: 23px;
    line-height: 40px;
}

#vsebina .popupodprava #odprava-gumbi {
    line-height: 15px;
    position: relative;
    z-index: 1000;
    top: 4px;
}

#vsebina .popupodprava #odprava-gumbi.oddelek .obseg-oddelek,
#vsebina .popupodprava #odprava-gumbi.razred .obseg-razred,
#vsebina .popupodprava #odprava-gumbi.sola .obseg-sola{
    background-color: #277f74;
    pointer-events:none;
    
}

#vsebina .popupodprava .odgumb {
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 2px 20px;
    background-color: #cb7d2f;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    margin: 0px 5px;
}

#vsebina .popupodprava .odgumb:hover{
    background-color: #e8a25d;
}

#vsebina .popupodprava .odgumb2 {
    color: #fff;
    font-size: 23px;
    cursor: pointer;
    margin: 0px 5px;
    font-family: 'FreckleFace', 'Trebuchet MS';
    border: none;
    background-color: transparent;
    text-shadow: 0px 0px 3px #6b2f2f;
}

#vsebina .popupodprava .odgumb2:hover{
    color:#ce3141;
    text-shadow: 0px 0px 3px #fff;
}


#vsebina .popupodprava #odprava-zemljevid {
    background-repeat: no-repeat;
    width: 1050px;
    height: 722px;
    position: relative;
    margin-top: 6px;
}

#odprava-zemljevid .gumbnazaj {
    position: absolute;
    right: 79px;
    bottom: 56px;
}

#odprava-zemljevid .gumbnaprej {
    position: absolute;
    left: 64px;
    top: 16px;
}

.otocje #vsebina .popupodprava #odprava-zemljevid{
    
}

#vsebina .popupodprava #odprava-zemljevid.odprava2{
    background-image: url("../images/odprava/UCIMse-zemljevid-napredovanja-kopno-4.png");
}

#vsebina .popupodprava #odprava-zemljevid.odprava1{
    background-image: url("../images/odprava/UCIMse-zemljevid-napredovanja-1-5.png");
}

.nacinstarejsi #vsebina .popupodprava #odprava-zemljevid.odprava1{
    background-image: url("../images/odprava/UCIMse-zemljevid-napredovanja-6-9.png");
}


#odprava-zemljevid .oblacek-sosolci {
    position: absolute;
    border: 1px solid #7b5f4b;
    border-radius: 4px;
    background-color: #a57b5a;
    color: #dccabc;
    padding: 8px 15px;
    width: 220px;
    font-family: sans-serif;
}

#odprava-zemljevid .oblacek-sosolci .topline{
    font-weight: bold;
    color:#fff;
    margin-bottom: 4px;
}

#odprava-zemljevid .oblacek-sosolci hr{
    border: 0;
    background-color: #fff;
    height: 1px;
    margin: 2px;
} 

#odprava-zemljevid .pozicija {
    position: absolute;
    display:none;
}

#odprava-zemljevid .pozicija .stevilka {
    position: absolute;
    left: 17px;
    background-color: #3e7c7a;
    color: #fff;
    font-size: 18px;
    border-radius: 100px;
    width: 25px;
    height: 25px;
    top: 43px;
    pointer-events:none;
}

#odprava-zemljevid .pozicija:hover .stevilka{
    color: #3e7c7a;
}

#odprava-zemljevid .pozicija.boja{
    background-repeat: no-repeat;
    cursor: pointer;
    width: 53px;
    height: 110px;
}

#odprava-zemljevid.odprava1 .pozicija.boja{
    background-image: url("../images/odprava/boja-zastavica.png");    
}

#odprava-zemljevid.odprava2 .pozicija.boja{
    background-image: url("../images/odprava/kamen-zastavica.png");    
}

#odprava-zemljevid.odprava1 .pozicija.boja.animacija0{
    animation: levodesno1 1.5s infinite alternate ease-in-out;
}

#odprava-zemljevid.odprava1 .pozicija.boja.animacija1{
    animation: levodesno2 1.9s infinite alternate ease-in-out;
}

#odprava-zemljevid.odprava1 .pozicija.boja.animacija2{
    animation: levodesno3 1.7s infinite alternate ease-in-out;
}

#odprava-zemljevid.odprava1 .pozicija.boja.animacija3{
    animation: levodesno2 1.3s infinite alternate ease-in-out;
}

#odprava-zemljevid.odprava1 .pozicija.boja.animacija4{
    animation: levodesno1 2.1s infinite alternate ease-in-out;
}

@keyframes levodesno1 {
  from {transform: rotateZ(-6deg);}
  to {transform: rotateZ(6deg);}
}

@keyframes levodesno2 {
  from {transform: rotateZ(5deg);}
  to {transform: rotateZ(-5deg);}
}

@keyframes levodesno3 {
  from {transform: rotateZ(-3deg);}
  to {transform: rotateZ(3deg);}
}

#odprava-zemljevid.odprava2 .pozicija.boja.animacija0{
    animation: jump1 3s infinite ease-in-out;
}

#odprava-zemljevid.odprava2 .pozicija.boja.animacija1{
    animation: jump2 3.8s infinite ease-in-out;
}

#odprava-zemljevid.odprava2 .pozicija.boja.animacija2{
    animation: jump3 3.4s infinite ease-in-out;
}

#odprava-zemljevid.odprava2 .pozicija.boja.animacija3{
    animation: jump1 2.6s infinite ease-in-out;
}

#odprava-zemljevid.odprava2 .pozicija.boja.animacija4{
    animation: jump2 4.2s infinite ease-in-out;
}

@keyframes jump1 {
  0% {transform: translateY(0px);}
  5% {transform: translateY(-3px);}
  10% {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}

@keyframes jump2 {
  0% {transform: translateY(0px);}
  5% {transform: translateY(-3px);}
  10% {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}

@keyframes jump3 {
  0% {transform: translateY(0px);}
  5% {transform: translateY(-3px);}
  10% {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}


#odprava-zemljevid .pozicija.boja .stevilka {
    background-color: rgba(0,0,0,0);
    top: 8px;
    left: 21px;
    font-size: 15px;
}

#odprava-zemljevid .pozicija.mojaboja {
    width: 53px;
    height: 105px;
    cursor: pointer;
}

#odprava-zemljevid.odprava1 .pozicija.mojaboja{
    background-image: url("../images/odprava/boja-tabla.png");    
    animation: gordol 1.5s infinite alternate ease-in-out;
}

#odprava-zemljevid.odprava2 .pozicija.mojaboja{
    background-image: url("../images/odprava/kamen-tabla.png");   
    animation: jumping 1.5s infinite ease-in-out;
}

@keyframes gordol {
  from {transform: translateY(3px);}
  to {transform: translateY(0px);}
}

@keyframes jumping {
  0% {transform: translateY(0px);}
  5% {transform: translateY(-3px);}
  10% {transform: translateY(0px);}
  100% {transform: translateY(0px);}
}

#odprava-zemljevid .pozicija.mojaboja .stevilka{
    display:none;
}

#odprava-zemljevid .pozicija.pozicija1{left: 778px;top: 571px;}
#odprava-zemljevid .pozicija.pozicija2{left: 734px;top: 561px;}
#odprava-zemljevid .pozicija.pozicija3{left: 691px;top: 547px;}
#odprava-zemljevid .pozicija.pozicija4{left: 644px;top: 530px;}
#odprava-zemljevid .pozicija.pozicija5{left: 592px;top: 545px; display:block;}
#odprava-zemljevid .pozicija.pozicija6{left: 539px;top: 551px;}
#odprava-zemljevid .pozicija.pozicija7{left: 488px;top: 535px;}
#odprava-zemljevid .pozicija.pozicija8{left: 442px;top: 510px;}
#odprava-zemljevid .pozicija.pozicija9{left: 393px;top: 494px;}
#odprava-zemljevid .pozicija.pozicija10{left: 339px;top: 507px; display:block;}
#odprava-zemljevid .pozicija.pozicija11{left: 294px;top: 534px;}
#odprava-zemljevid .pozicija.pozicija12{left: 244px;top: 559px;}
#odprava-zemljevid .pozicija.pozicija13{left: 192px;top: 572px;}
#odprava-zemljevid .pozicija.pozicija14{left: 137px;top: 573px;}
#odprava-zemljevid .pozicija.pozicija15{left: 85px;top: 553px; display:block;}
#odprava-zemljevid .pozicija.pozicija16{left: 51px;top: 514px;    z-index: 3;}
#odprava-zemljevid .pozicija.pozicija17{left: 38px;top: 461px;}
#odprava-zemljevid .pozicija.pozicija18{left: 41px;top: 411px;}
#odprava-zemljevid .pozicija.pozicija19{left: 62px;top: 363px;}
#odprava-zemljevid .pozicija.pozicija20{left: 101px;top: 333px; display:block;}
#odprava-zemljevid .pozicija.pozicija21{left: 156px;top: 323px;}
#odprava-zemljevid .pozicija.pozicija22{left: 207px;top: 331px;}
#odprava-zemljevid .pozicija.pozicija23{left: 252px;top: 345px;}
#odprava-zemljevid .pozicija.pozicija24{left: 297px;top: 360px;}
#odprava-zemljevid .pozicija.pozicija25{left: 344px;top: 374px; display:block;}
#odprava-zemljevid .pozicija.pozicija26{left: 393px;top: 384px;}
#odprava-zemljevid .pozicija.pozicija27{left: 445px;top: 372px;}
#odprava-zemljevid .pozicija.pozicija28{left: 486px;top: 339px;}
#odprava-zemljevid .pozicija.pozicija29{left: 518px;top: 304px;}
#odprava-zemljevid .pozicija.pozicija30{left: 549px;top: 269px; display:block;}
#odprava-zemljevid .pozicija.pozicija31{left: 593px;top: 250px;}
#odprava-zemljevid .pozicija.pozicija32{left: 642px;top: 261px;}
#odprava-zemljevid .pozicija.pozicija33{left: 687px;top: 288px;}
#odprava-zemljevid .pozicija.pozicija34{left: 733px;top: 314px;}
#odprava-zemljevid .pozicija.pozicija35{left: 783px;top: 329px; display:block;}
#odprava-zemljevid .pozicija.pozicija36{left: 834px;top: 319px;}
#odprava-zemljevid .pozicija.pozicija37{left: 878px;top: 295px;}
#odprava-zemljevid .pozicija.pozicija38{left: 911px;top: 258px; z-index: 120;}
#odprava-zemljevid .pozicija.pozicija39{left: 929px;top: 210px; z-index: 100;}
#odprava-zemljevid .pozicija.pozicija40{left: 931px;top: 161px; display:block;}
#odprava-zemljevid .pozicija.pozicija41{left: 912px;top: 114px;}
#odprava-zemljevid .pozicija.pozicija42{left: 876px;top: 82px;}
#odprava-zemljevid .pozicija.pozicija43{left: 830px;top: 63px;}
#odprava-zemljevid .pozicija.pozicija44{left: 777px;top: 58px;}
#odprava-zemljevid .pozicija.pozicija45{left: 726px;top: 69px; display:block;}
#odprava-zemljevid .pozicija.pozicija46{left: 682px;top: 93px;}
#odprava-zemljevid .pozicija.pozicija47{left: 640px;top: 119px;}
#odprava-zemljevid .pozicija.pozicija48{left: 586px;top: 134px;}
#odprava-zemljevid .pozicija.pozicija49{left: 533px;top: 122px;}
#odprava-zemljevid .pozicija.pozicija50{left: 490px;top: 101px; display:block;}
#odprava-zemljevid .pozicija.pozicija51{left: 447px;top: 77px;}
#odprava-zemljevid .pozicija.pozicija52{left: 393px;top: 68px;}
#odprava-zemljevid .pozicija.pozicija53{left: 343px;top: 80px;}
#odprava-zemljevid .pozicija.pozicija54{left: 315px;top: 112px;}
#odprava-zemljevid .pozicija.pozicija55{left: 303px;top: 158px; display:block;}
#odprava-zemljevid .pozicija.pozicija56{left: 293px;top: 201px;}
#odprava-zemljevid .pozicija.pozicija57{left: 264px;top: 240px;}
#odprava-zemljevid .pozicija.pozicija58{left: 217px;top: 250px;}
#odprava-zemljevid .pozicija.pozicija59{left: 169px;top: 231px;}
#odprava-zemljevid .pozicija.pozicija0{left: 136px;top: 204px; display:block;}