/* CSS */
html, body {
height: 100%;
margin: 0;
scroll-snap-type: y mandatory;
overflow-y: scroll;
scroll-behavior: smooth;
background: #000;
font-family: 'Rubik', sans-serif;
}

/* Glavni kontejner za cijelu stranicu */

.sve-skupa {
width: 100vw;
min-height: 100vh;
position: relative;
background-color: #141414;
}

/* Izmedju stranica */
.white-space {
height: 5vh;
background: white;
z-index: 2;
position: relative;}

/* ====== TIPOGRAFIJA ====== */
h2, h3, h4, h5, h6 {
font-family: 'Rubik', sans-serif;
letter-spacing: 0.03em;
word-spacing: 0.15em; /*! line-height: -0.76; */
word-break: break-word;
}

h1 {
font-family: 'Rubik', sans-serif;
font-size: 2.2rem;
font-weight: 600;
}

h2 {
font-size: 1.8rem;
font-weight: 600;
}

h3 {
font-size: 1.3rem;
font-weight: 600;
}

h4 {
font-size: 1.1rem;
font-weight: 600;
margin-top: 1.2rem;
margin-bottom: 1rem;
}

h5 {
font-size: 1.25rem;
font-weight: 600;
margin-top: 1.5rem;
margin-bottom: 1rem;
}

h6 {
font-size: 1rem;
font-weight: 600;
margin-top: 0.7rem;
}

/* Sekcije stranice */
.sekcija-desktop {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
scroll-snap-align: start;
z-index: 10;
/*! background-color: #141414; */
}

.sekcija-desktop-5 {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
scroll-snap-align: start;
z-index: 10;
background-color: #141414;
}

.video {
z-index: 1;
position: relative;
/*! width: 117%; */
height: 92%;
overflow: hidden;
/*! scale: 96%; */
zoom: 91%;
top: -4%;
max-width: 100%;
}

/* Tekstovi */
.tekstovi {
color: white;
font-size: math;
font-weight: 500;
text-shadow: 1.2px 1.2px 0.2px black;
text-align: center;
}

.tekstovi .tekst {
opacity: 0;
/*! transform: translateY(-100%); */
transition: opacity 0.3s ease 0.1s;
position: absolute;
/*! width: 100%; */
overflow: hidden;
pointer-events: none;
padding: 2% 7%;
width: 91%;
}

/* Overlay sloj */
.tekst .overlay {
position: absolute;
transform: translateY(100%);
z-index: 10;
padding: 2% 7%;
/*! background: #e10874; */
}

/* Aktivni tekst */
.tekst:target {
opacity: 1;
transform: translateX(6vw);
pointer-events: auto;
background-color: #000000ba;
border-top: 2px solid #f006;
border-right: 20px solid #f006;
border-left: 20px solid #f006;
border-bottom: 2px solid #f006;
border-radius: 10px;
padding: 4% 4%;
width: 91%;
}

/* Pokreće zavjesu */
.tekst:target .overlay {
transform: translateY(-100%);
transition-delay: 0.2s ease 0.1s;
}

/* Trake */
.traka-gore {
position: absolute;
bottom: 5%;
width: 68%;
background: #000000b8;
color: white;
z-index: 1;
text-align: left;
height: 20%;
right: 0;
letter-spacing: -1%;
font-size: 7.5rem;
font-weight: 600;
text-shadow: 3px 3px 0px black;
padding-left: 2.2rem;
}

.traka-gore-prva {
position: absolute;
bottom: 5%;
width: 100%;
background: #040404c7;
color: #fff;
padding: 0% 0% 4%;
z-index: 1;
text-align: left;
height: 13.1%;
/*! font-size: 6rem; */
/*! right: 0; */
letter-spacing: -2%;
font-size: 7rem;
font-weight: 600;
text-align: center;
text-shadow: 4px 4px 3px #000;
}

.traka-gore-mobi {
display: none;
}

.traka-sredina {
position: absolute;
bottom: 5%;
width: 67%;
background: #f00;
color: white;
z-index: 2;
text-align: left;
height: 5%;
right: 0;
padding-left: 3%;
font-size: 1.7rem;
letter-spacing: 1%;
font-weight: 600;
line-height: 2.8rem;
text-shadow: 2px 2px 0px black;
}

.traka-sredina-prva {
position: absolute;
bottom: 5%;
width: 98%;
background: #f00;
color: white;
z-index: 5;
text-align: center;
height: 5%;
right: 0;
line-height: 1%;
padding-left: 2%;
text-shadow: 2px 2px 0px black;
display: block;
}

.traka-sredina-mobi {
display: none;
}

.traka-dole {
position: absolute;
width: 64%;
background: #000000cf;
color: white;
z-index: 1;
text-align: left;
height: 5%;
bottom: 0;
padding-left: 30%;
display: block;
}

.ticker-linkovi {
position: absolute;
bottom: 27.5%;
color: white;
z-index: 4;
height: 2.8%;
font-size: 1.0rem;
font-weight: 600;
left: 30%;
display: block;
}

.ticker-linkovi-mobi {
display: none;
}

.ticker-linkovi-prva {
position: absolute;
bottom: 27.4%;
/*! background: #000; */
color: white;
z-index: 4;
height: 2.8%;
font-size: 1.0rem;
font-weight: 600;
left: 29%;
display: block;
scale: 95%;
}

.ticker-pitanje {
position: absolute;
bottom: 5%;
width: 30%;
background: rgba(5, 80, 125, 0.78);
color: white;
padding: 0% 0% 4%;
z-index: 1;
text-align: center;
height: 13%;
font-size: 7.7rem;
font-weight: 600;
left: 0;
text-shadow: 3px 3px 0px black;
}

.ticker-podpitanje {
position: absolute;
bottom: 5%;
width: 30%;
background: #ccccccd6;
color: black;
/*! padding: 0.5rem 0rem; */
z-index: 1;
text-align: center;
height: 5%;
font-size: 2.4rem;
font-weight: 600;
left: 0;
}

/* Corners */
.top-left {
position: absolute;
top: 2%;
left: 3%;
background: #1414145c;
color: white;
z-index: 1;
scale: 80%;
display: block;
}

.top-right {
position: absolute;
top: 5%;
right: 3%;
background: rgba(255, 0, 0, 0.84);
color: white;
padding: 0.5rem;
z-index: 1;
display: block;
}

.live {
/*! background: #cccccc; */
font-size: 3rem;
font-weight: 600;
text-shadow: 1px 1px 0px black;
}

.city {
background: white;
font-size: 1rem;
font-weight: 600;
color: #141414;
text-align: center;
}

.connect {
position: absolute;
top: 15%;
right: 3%;
z-index: 1;
}

.social {
font-size: 2%;
text-align: right;
display: block ruby;
margin-bottom: 0.5rem;
margin-top: 0.3rem;
padding-right: 0.4rem;
}

.social-icon {
margin-left: 0.3rem;
margin-top: 0.3rem;
margin-bottom: 0.3rem;
/*! display: inline-block; */
}

.social-icon a :hover{
scale: 110%;
z-index: 1;
}

.social-mail {
background: #37373700;
font-weight: 500;
color: white;
text-align: right;
font-size: 1.1rem;
}

.social-mail a {
background: #141414c0;
font-weight: 500;
color: white;
text-decoration: none;
padding: 0.3rem 1.5rem;
}

.social-mail a:hover {
background: #ccccccc5;
font-weight: 500;
color: rgb(255, 0, 0);
}

.yutu {
position: absolute;
top: 23%;
right: 2%;
background: rgb(255, 0, 6);
color: white;
padding: 0.3rem 0.2rem 0.01rem;
z-index: 1;
scale: 90%;
display: block;
}

.poziv {
position: absolute;
top: 5%;
right: 29%;
/*! background: rgba(68, 255, 0, 0.6); */
z-index: 1;
width: 40%;
text-align: center;
}

.poziv a {
position: absolute;
right: 14%;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 0.5rem 3rem;
z-index: 1;
text-shadow: 2px 2px 0px black;
border-style: solid;
border-width: 0.08rem;
text-decoration: none;
line-height: 1.5rem;
}

.mala-slova-box {
position: absolute;
top: 24%;
left: 24%;
/*! background: rgba(255, 0, 0, 0.7); */
color: white;
z-index: 1;
width: 42%;
}

.tablica-box {
background: rgb(0, 171, 255);
z-index: 1;
}

.myButton {
box-shadow:inset 0px 0px 0px 0px #f29c93;
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
background-color:#fe1a00;
border-radius:6px;
border:1px solid #d83526;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:19px;
/*! font-weight:bold; */
padding:9px 34px;
text-decoration:none;
text-shadow:0px 0px 0px #b23e35;
text-transform: uppercase;
}
.myButton:hover {
background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
background-color:#ce0100;
}
.myButton:active {
position:relative;
top:1px;
}

.mala-slova-box-mobi {
display: none;
}

.mobile-content {
display: none;
  }

  .mobile-block {
display: none;
  }

  .mobile-block h2 {
display: none;
  }

  .mobile-block p {
display: none;
  }
  

/* MOBIL Landscape */

@media (orientation: landscape) and (max-width: 1024px) {
body {
font-size: 1.2rem;
}

.sekcija-landscape {
/*! height: 10%; */
scroll-snap-align: start;
padding: 2vh 5vw;
/*! width: 70%; */
}

.video {
z-index: 1;
position: absolute;
/*! width: 100%; */
height: 93%;
overflow: hidden;
/*! scale: 104%; */
/*! transform: translateX(0%) translateY(-9%); */
zoom: 40%;
top: 0rem;
/*! left: 9rem; */
}

.yutu {
display: none;
}

.traka-gore-prva {
display: none;
}

.traka-gore {
display: none;
}

.traka-sredina-prva {
display: none;
}

.traka-sredina {
display: none;
}

.traka-dole {
display: none;
}

.ticker-pitanje {
display: none;
}

.ticker-podpitanje {
display: none;
}

.ticker-linkovi-prva {
display: none;
}

.traka-gore-mobi {
position: absolute;
bottom: 8%;
width: 100%;
background: #0404048f;
color: #fff;
/*! padding: 0% 2% 4%; */
z-index: 1;
text-align: left;
height: 27%;
/*! font-size: 6rem; */
/*! right: 0; */
letter-spacing: -2%;
font-size: 4rem;
font-weight: 600;
text-align: center;
display: block;
}

.traka-sredina-mobi {
position: absolute;
bottom: 0;
width: 100%;
background: #f00;
color: white;
z-index: 5;
text-align: center;
height: 8%;
right: 0;
/*! line-height: 1%; */
/*! padding-left: 2%; */
text-shadow: 2px 2px 0px black;
display: block;
}

.top-left {
position: absolute;
top: -21%;
left: 0%;
background: #1414145c;
color: white;
z-index: 1;
scale: 40%;
}

.top-right {
position: absolute;
top: 3%;
right: 9%;
background: rgba(255, 0, 0, 0.84);
color: white;
padding: 0.5rem;
z-index: 1;
}

.live {
/*! background: #cccccc; */
font-size: 2rem;
font-weight: 600;
text-shadow: 2px 2px 0px black;
}

.city {
background: white;
font-size: 0.8rem;
font-weight: 600;
/*! margin-left: 2.7rem; */
margin-top: 0.4rem;
color: #141414;
text-align: center;
}

.connect {
position: absolute;
top: 33%;
right: 8%;
color: white;
z-index: 1;
font-size: 1.3rem;
font-weight: 600;
text-shadow: 1.2px 1.2px 0.2px black;
text-align: right;
}

.social {
font-size: 2%;
font-weight: 500;
/*! color: white; */
text-align: center;
/*! display: block ruby; */
margin-bottom: 0.5rem;
margin-top: 0.3rem;
}

.social-icon {
margin-left: 0.3rem;
margin-top: 0.3rem;
margin-bottom: 0.3rem;
}

.social-icon a :hover{
scale: 115%;
}

.social-mail {
background: #37373700;
font-weight: 500;
color: white;
text-align: right;
/*! margin-right: -0.5rem; */
}

.social-mail a {
background: #0000008a;
font-weight: 500;
color: white;
text-decoration: none;
padding: 0.3rem 1.5rem;
}

.social-mail a:hover {
background: #37373700;
font-weight: 500;
color: white;
}

.poziv {
display: none;
}

.poziv a {
display: none;
}

.ticker-linkovi {
display: none;
}

.ticker-linkovi-mobi {
display: none;
}

.svg-back {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 0;
}

/* Tekstovi */
.tekstovi {
display: none;
}

.tekstovi .tekst {
display: none;
}

.tekst .overlay {
display: none;
}

.tekst:target {
display: none;
}

.tekst:target .overlay {
display: none;
}

.mala-slova-box {
display: none;
}

.mobile-content {
display: none;
  }

  .mobile-block {
display: none;
  }

  .mobile-block h2 {
display: none;
  }

  .mobile-block p {
display: none;
  }

}


/* MOBIL Portrait */

@media (orientation: portrait) and (max-width: 1024px) {
body {
margin: 0;
font-family: sans-serif;
background: #000;
color: #fff;
}

.sekcija-portrait {
height: 100vh;
scroll-snap-align: start;
padding: 2vh 5vw;
}

.video {
z-index: 1;
position: relative;
width: 99%;
height: 99vh;
overflow: hidden;
scale: 101%;
transform: translateY(-29%) translateX(0%);
/*! justify-content: center; */
zoom: 22%;
top: -33%;
}


.yutu {
display: none;
}

.traka-gore-prva {
display: none;
}

.traka-gore {
display: none;
}

.traka-sredina-prva {
display: none;
}

.traka-sredina {
display: none;
}

.traka-dole {
display: none;
}

.ticker-pitanje {
display: none;
}

.ticker-podpitanje {
display: none;
}

.traka-gore-mobi {
position: absolute;
bottom: 9%;
width: 100%;
background: #000000bd;
color: #fff;
padding: 2% 1% 0%;
z-index: 16;
text-align: left;
/*! height: 5%; */
/*! font-size: 6rem; */
/*! right: 0; */
letter-spacing: -1%;
font-size: math;
font-weight: 600;
text-align: center;
/*! display: block; */
text-shadow: 2px 2px 0px #000;
}

.traka-sredina-mobi {
position: absolute;
bottom: 0;
width: 100%;
background: #f00;
color: white;
z-index: 5;
text-align: center;
/*! height: 4%; */
right: 0;
line-height: 141%;
text-shadow: 2px 2px 0px black;
display: block;
/*! font-size: mayh; */
padding: 0.2rem 0rem 0.5rem 0rem;
font-weight: 600;
/*! margin-top: 1rem; */
}

.top-left {
display: none;
}

.social-icon a :hover{
display: none;
}

.poziv {
display: none;
}

.poziv a {
display: none;
}

.ticker-linkovi {
display: none;
}

.ticker-linkovi-prva {
display: none;
}

.ticker-linkovi-mobi {
position: absolute;
top: 21.5%;
z-index: 4;
display: grid;
text-align: center;
padding: 0.5rem 1rem;
width: 94%;
}

.myButton-m {
box-shadow:inset 0px 0px 0px 0px #f29c93;
background:linear-gradient(to bottom, #fe1a00 5%, #ce0100 100%);
background-color:#fe1a00;
border-radius:7px;
border:1px solid #d83526;
display:grid;
cursor:pointer;
color:#ffffff;
font-size:12px;
font-weight:bold;
padding:9px 20px;
text-decoration:none;
text-shadow:0px 0px 0px #b23e35;
text-transform: uppercase;
margin-bottom: 0.3rem;
}
.myButton-m:hover {
background:linear-gradient(to bottom, #ce0100 5%, #fe1a00 100%);
background-color:#ce0100;
}
.myButton-m:active {
position:relative;
top:1px;
}

.top-right {
position: absolute;
top: 1.5%;
right: 3%;
background: rgba(255, 0, 0, 0.84);
color: white;
/*! padding: 0.5rem; */
z-index: 1;
/*! display: block; */
}

.connect {
position: absolute;
top: 1%;
left: 2%;
color: white;
z-index: 1;
font-size: 1.3rem;
font-weight: 600;
text-shadow: 1.2px 1.2px 0.2px black;
/*! text-align: left; */
right: 73%;
}

.live {
/*! background: #cccccc; */
font-size: 2rem;
font-weight: 600;
text-shadow: 1px 1px 0px black;
/*! display: block; */
}

.city {
background: white;
font-size: 0.8rem;
font-weight: 600;
/*! margin-left: 2.7rem; */
margin-top: 0.2%;
color: #141414;
/*! text-align: center; */
padding-top: 4.5%;
letter-spacing: -1.8%;
}

.social {
font-size: 2%;
font-weight: 500;
/*! color: white; */
/*! text-align: left; */
/*! display: block ruby; */
/*! margin-bottom: 0.5rem; */
/*! margin-top: 0.3rem; */
/*! transform: translateY(-9vh) translateX(-43vw); */
}

.social-icon {
z-index: 1;
}

.social-icon a :hover{
scale: 115%;
}

.social-mail {
/*! background: #000000d6; */
/*! font-weight: 500; */
color: white;
/*! text-align: right; */
/*! margin-right: 0.5rem; */
/*! margin-top: 0rem; */
/*! transform: translateY(-2vh) translateX(-42vw); */
/*! padding: 0.2rem 1rem; */
/*! z-index: 1; */
}

.social-mail a {
/*! background: #00000000; */
/*! font-weight: 500; */
/*! color: white; */
text-decoration: none;
/*! padding: 0.3rem 1.5rem; */
/*! font-size: 1.2rem; */
/*! z-index: 1; */
}

.social-mail a:hover {
background: #65b108b6;
font-weight: 500;
color: white;
}

.mobile-content {
padding-top: 35vh;
padding-left: 1rem;
padding-right: 1rem;
}

.mobile-block {
margin-bottom: 2rem;
border-bottom: 1px solid #444;
padding-bottom: 1rem;
}

.mobile-block h2 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
}

.mobile-block p {
font-size: 1rem;
line-height: 1.5;
}


/* Tekstovi-mobi */
.tekstovi-mobi {
color: black;
font-size: math;
/*! font-weight: 600; */
/*! text-shadow: 1.2px 1.2px 4.2px white; */
text-align: center;
/*! padding: 1rem; */
/*! margin-left: -1rem; */
}

.tekstovi-mobi .tekst-mobi {
opacity: 0;
/*! transform: translateY(-46%); */
transition: opacity 0.3s ease 0.1s;
position: absolute;
/*! width: 100%; */
overflow: hidden;
pointer-events: none;
padding: 1% 4%;
/*! width: 100%; */
}

/* Overlay sloj */
.tekst-mobi .overlay {
position: absolute;
transform: translateY(100%);
z-index: 10;
/*! background: #e10874; */
}

/* Aktivni tekst */
.tekst-mobi:target {
opacity: 1;
/*! transform: translateX(6vw); */
pointer-events: auto;
background-color: #d7d7d700;
border-top: 2px solid #f000;
border-right: 12px solid #f000;
border-left: 1rem solid #f000;
border-bottom: 2px solid #f000;
border-radius: 10px;
/*! padding: 8% 9%; */
/*! width: 100%; */
font-size: 1.12rem;
letter-spacing: 0.01rem;
color: white;
}

/* Pokreće zavjesu */
.tekst-mobi:target .overlay {
transform: translateY(0%);
transition-delay: 0.1s;
}

.mala-slova-box-mobi {
position: absolute;
/*! top: 71%; */
/*! left: 2%; */
/*! background: rgba(255, 0, 0, 0.7); */
/*! color: white; */
z-index: 1;
width: 91%;
display: block;
/*! height: 10rem; */
/*! scale: 87%; */
transform: translateY(-2.1rem);
}

.mala-slova-box {
display: none;
}

.mobile-content {
    padding-top: 35vh;
    padding-left: 1rem;
    padding-right: 1rem;
    display: block;
    z-index: 10;
    background-color: yellow;
  }

  .mobile-block {
    margin-bottom: 2rem;
    border-bottom: 1px solid #444;
    padding-bottom: 1rem;
    display: block;
  }

  .mobile-block h2 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    display: block;
  }

  .mobile-block p {
    font-size: 1rem;
    line-height: 1.5;
    display: block;
  }

}