@font-face {font-family:"Bahnschrift-Regular"; src:url(../media/Bahnschrift-Regular.ttf) format("truetype");}



* {font-family: Bahnschrift-Regular, sans-serif;letter-spacing:0.05em;word-spacing:0.2em;}



body {margin:0;height: 100%;overflow: hidden; background: rgb(235 235 235);}


div.app {position:relative; top:0 !important;}

div.app {opacity:1;transition:opacity 2s;height: 1080px !important;width: 1920px !important;}
.app.hide {opacity:0;}


/*/////////////////////  VIDEI  //////////////////////////*/

#screensaver {position:absolute; display:block; width:100%; pointer-events:none; opacity:1; transition:all 1s; z-index:2000;}
#screensaver.hide {opacity:0; transition:all 1s;}
.video-background {position:absolute;width: 100vw;height: 100vh;background: white;opacity:1;pointer-events:none;z-index: 1999 !important;}
.video-background.hide {opacity:0;}

.wrapper-animacija-zaluzija.crop {display:block;width: 960px !important;height: 1080px !important;overflow:hidden;}
#animacija {position:relative;display:block;height: 1080px;pointer-events:none;  background: rgb(235 235 235); z-index: -1000 !important;}

.wrapper-animacija-roleta.crop {position:absolute;right:0;top:0;display:block;height: 1080px !important;overflow:hidden;z-index: -1001 !important;}
.wrapper-animacija-roleta {position:absolute;right:0;top:0;display:block;width: 1920px !important;height: 1080px !important;overflow:hidden;z-index: -1000 !important;}
#animacijaR {position:relative;right:0; display:block;height: 1080px;pointer-events:none; background: rgb(235 235 235); z-index: -1001 !important;}





.logo {position:absolute;display:block;left: 50%;bottom: 40px;width: 230px;height: 100px;margin: 0 0 0 -115px;background:no-repeat center/100% url("../media/logo.svg");z-index:100;transition:all 1s;}
.logo.move {left: 154px;bottom: 40px;width: 154px;height: 70px;margin: 0 0 0 -75px;}

.grafika {position:absolute;display:block;left: 1650px;top: -2px;width: 320px;height: 115px;margin: 0 0 0 -125px;background:no-repeat center/100% url("../media/grafika.svg");z-index:100;transition:all 1s;}


/*/////////////////////  BACK - HOME  //////////////////////////*/

button.back-1, button.back-2, button.back-3  {position:absolute;right: 180px;top: 40px;width: 80px;height: 40px;display:inline-block;padding:0 !important;border-radius:17px;border:none;color:white;background:#4A4A4A;cursor:pointer;pointer-events:initial;opacity:1;font-size: 18px;transition:all 1s !important;user-select:none;z-index:100;}
  button.back-1.hide, button.back-2.hide, button.back-3.hide {display:none; opacity:0; transition:all 1s; pointer-events: none;}
 .back-1 span, .back-2 span, .back-3 span {width:100px; height:100px;}

button.home {position:absolute;right: 76px;top: 40px;width: 80px;height: 40px;display:inline-block;padding:0 !important;border-radius:17px;border:none;color:white;background:#4A4A4A;cursor:pointer;pointer-events:initial;opacity:1;transition:all 1s !important;user-select:none;font-size: 18px;z-index:1000;}
button.home.hide {opacity:0; transition:all 1s; pointer-events:none;}

button.pdf-zaluzija, button.pdf-roleta {position:absolute;display:inline-block;right: 76px;bottom: 40px;width:280px;height:40px;padding:0 !important;border-radius:17px;border:#bd9a5f solid 2px !important;color:initial;line-height:2.15;background:white;cursor:pointer;pointer-events:initial;opacity:1;font-size:18px;transition:all 1s !important;user-select:none;z-index:100;}
button.pdf-zaluzija.hide, button.pdf-roleta.hide {display:none; pointer-events:none;}


/*/////////////////////  zaluzije-rolete-klik  //////////////////////////*/

button.zaluzija, button.roleta {position:absolute;width: 460px;height: 800px;border:none;font-size:15px;font-weight:bold;color:#4A4A4A;cursor:pointer;z-index:100;pointer-events:initial;padding-block:0;padding-inline:0;}
 button.zaluzija {top: 100px;left: 380px;}
 button.roleta {top: 100px;left: 1080px;}
  button.zaluzija.move, button.roleta.move {margin:0;top: 40px;pointer-events: none;left: 76px;background-position-x: left;z-index:100;}
  button.zaluzija.move h1, button.roleta.move h1 {width:initial; justify-content:left; pointer-events:none;}



.zaluzija {display:block;opacity:1;transition: all 1s;pointer-events:initial;background: no-repeat center 0 / 50% url("../media/grafika-zaluzija.svg");}
  .zaluzija.hide {opacity:0; pointer-events:none;}
  .zaluzija.move > h1 {width:inherit; padding:0; opacity:1;}
  .zaluzija h1 {margin: 0 0 170% 0;line-height: 1;text-align: left;display: none;}

.roleta {display:block;transition: all 1s;pointer-events:initial;background: no-repeat center 0 / 50% url("../media/grafika-roleta.svg");}
  .roleta.hide {opacity:0; pointer-events:none;}
  .roleta.move > h1 {width:inherit; padding:0; opacity:1;}
  .roleta h1 {margin: 0 0 170% 0;line-height: 1;display: none;}




/*///////////////////// INFO-TOČKE //////////////////////////*/

#info-point button {position:absolute;float:none;display:inline-block;width: 70px;height: 70px;/* min-width: 40px; *//* max-width: 70px; *//* min-height: 40px; *//* max-height: 70px; */padding:0 !important;border-radius:50%;border:none;color:white;background:#ea0029;cursor:pointer;user-select:none;pointer-events:initial;}
#info-point button:hover {transform: scale(1.25, 1.25); background:#yellow; transition: all 0.3s !important; transform-origin: center;}
  #info-point span {display:flex;align-items:center;justify-content:center;width: 70px;height: 70px;/* min-width: 40px; *//* max-width: 70px; *//* min-height: 40px; *//* max-height: 70px; */margin: 3px 0 0 1px;font-size: 60px;font-weight:bold;z-index:1000;transition: all 0.3s !important;}
  #info-point .hide {opacity:0; pointer-events:none;}

.gumbi-zaluzije-1 {display:block;}
  .gumbi-zaluzije-1 button {opacity:1;transition:all 1s; z-index: 100;}
.gumbi-zaluzije-1.hide {display:hide; opacity:0; transition: all 1s;}
  .gumbi-zaluzije-1.hide button {opacity:0; transition: all 1s; pointer-events:none !important;}

.gumbi-zaluzije-2 {display:block;}
  .gumbi-zaluzije-2 button {opacity:1;transition:all 1s; z-index: 100;}
.gumbi-zaluzije-2.hide {display:hide; opacity:0; transition: all 1s; pointer-events:none !important;}
  .gumbi-zaluzije-2.hide button {opacity:0; transition: all 1s; pointer-events:none !important;}


.detail-3 {left:27.5%; top:25%;background:#bd9a5f !important;}
.detail-3 span {font-size: 100px !important;font-weight: 300 !important;margin: 4px 0 0 3px !important;}
.detail-5 {left:38.5%; top:32%;}
.detail-4 {left:62.5%; top:38%;}
.detail-6 {left:71%; top:47%;}
.detail-7 {left: 26%;top:70%;}

.detail-8 {left: 38%;top: 35%;}
.detail-9 {left: 24%;top: 43%;}
.detail-10 {left: 49%;top: 30%;}


/*//////////////////////////////////////////*/

.gumbi-rolete-1 {display:block;}
  .gumbi-rolete-1 button {opacity:1;transition:all 1s; z-index: 100;}
.gumbi-rolete-1.hide {display:hide; opacity:0; transition: all 1s;}
  .gumbi-rolete-1.hide button {opacity:0; transition: all 1s; pointer-events:none !important;}

.gumbi-rolete-2 {display:block;}
  .gumbi-rolete-2 button {opacity:1;transition:all 1s; z-index: 100;}
.gumbi-rolete-2.hide {display:hide; opacity:0; transition: all 1s; pointer-events:none !important;}
  .gumbi-rolete-2.hide button {opacity:0; transition: all 1s; pointer-events:none !important;}


.detail-11 {left: 1056px;top: 750px;background:#bd9a5f !important;}
.detail-11 span {font-size: 100px !important;font-weight: 300 !important;margin: 4px 0 0 3px !important;}
.detail-12 {left: 62%;top: 9%;}
.detail-13 {left: 55%;top: 18%;}
.detail-14 {left: 48%;top: 50%;}

.detail-15 {left: 55%;top: 57%;}
.detail-16 {left: 49%;top: 50%;}





/*///////////////////// POPUP-POLJA //////////////////////////*/

[class^=popup-] {position:absolute;right: 825px;top: 115px;background:none;opacity:1;transition:opacity 1s;transition:background-color 0.3s !important;transition:opacity 1s !important;}
  .popup-3.hide {left:initial; right:35% !important; top:100px;}
[class^=popup-] {}
[class^=popup-].hide {opacity:0; transition:opacity 1s !important; pointer-events:none;}


[class^=opis-] {border:#bd9a5f solid 2px !important; border-radius:15px;}
[class^=opis-] ul {overflow:hidden; line-height:1.5;}
 


[class^=x-] {display:flex;align-items:center;justify-content:center;position:relative;left:5px;top:5px;width: 70px;height: 70px;/* min-width:40px; *//* max-width:70px; *//* min-height:40px; *//* max-height: 70px; */padding:0 !important;border-radius:50%;border:none;background: #ffffff;cursor: pointer;opacity:1;transition:opacity 1s !important;z-index:100 !important;border: #bd9a5f solid 2px !important;}
[class^=x-].hide {opacity:0;}
[class^=x-] span {display:block;top:10px;font-size: 90px;font-weight: 300;transition: all 0.3s !important;transform: rotate(45deg);margin: 8px 0 0 0;color: #898c8e;}



div[class^=opis-] {display:block;position:absolute;width:700px;height:700px;top:0;margin: 30px 0 0 30px;padding: 40px;background:white;opacity:0.95;transition: opacity 1s;overflow-y:scroll;overflow-x:hidden;}
[class^=opis-] h2 {padding:25px 0 0 0;font-size: 20px;font-weight: 700;line-height:.5;}
[class^=opis-] p {font-size: 15px;font-weight:400;}
[class^=popup-] ul {display:block;font-size: 15px;font-weight:300;list-style-type:disc;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0px;margin-inline-end:0px;padding-inline-start:15px;overflow:visible !important;}
.podpicja *, .podpicja {font-size:13px; margin-top:0 !important;}



 figure {float:left;display:block;margin-block-start: 2em;margin-block-end:1em;margin-inline-start:0;margin-inline-end:20px;font-size:14px;font-weight:bold;}
 [class^=opis-] img {float:left;width: 680px;}
 figcaption {margin-bottom:-20px; text-align:center;}



/*
.wrapper-animacija-roleta {outline:1px solid red;outline-offset: -39px;height: 1080px;}



.app * {outline:red solid 1px;}
.app {outline:green solid 5px;}
#gumbi {outline:cyan solid 3px;}
.video {outline:blue solid 3px; filter: brightness(52%);}

/*
span * {outline:#c2ff00 solid 1px !important;}
video {display:none !important;}
#screensaver {display:none !important;}
.video-background {display:none  !important;}
*/