/*
Responsive CSS za mobilna sranja in ostalo nadlogo. Nekako logično razčlenjeno;

mobi sranje:
@media (min-width: 320px) { }
tablice sranje:
@media (min-width: 641px) { }
tablice landscape še večje sranje:
@media (min-width: 961px) { }
grande tablice inu laptopi:
@media (min-width: 1025px) { }
normalni računalniki:
@media (min-width:1281px) { }
ker je pagina narejena na 1600, je treba to definirat posebej, da ni enako kot za 1480 prenosnike :(
@media (min-width: 1601px) { }

Če kakšno velikost spustimo, ta dobi lastnosti prejšnje (manjše), kjer presega dimenzijo v pixlih! ...
*/

html, body {
  padding: 0px;
  margin: 0px;
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Doppio One';
  font-style: normal;
  background-color: #fef3be;
}

@media (min-width: 320px) and (max-width: 1600px){ /* mobi sranje ++ */
  #page { width: 100%; }
}
@media (min-width: 1601px) { /* normalen PC */
  #page {
    width: 1600px;
    margin: auto;
  }
}

.background { width: 100%; }
.bg-black { background-color: #000000; color: #ffffff; }
.bg-yellow { background-color: #fdd729; color: #000000; }
.bg-white { background-color: #ffffff; }
.yellow { color: #fdd729; }
.skrito { display: none; }

#menu {
  border-bottom: 2px solid #ffffff;
  background-image: url('/img/KKlogo.png');
  background-repeat: no-repeat;
  background-position: left;
  background-size: contain; 
  position: relative;
}

@media (min-width: 320px) and (max-width: 640px) { /* mobi sranje ++ */
  #menu { height: 10vw; }
  .menu-buttons { display: none; }
  #menu-mobile {
    position: absolute;
    right: 0vw;
    height: 10vw;
    width: 10vw;
  }
  .fa {
    padding: 1vw 2vw !important;
    font-size: 7vw !important;
  }
  #menu-buttons-mobile {
    z-index: 1;
    position: absolute;
    right: 0vw;
    top: 10vw;
    border: solid 2px #000000;
  }
  .menu-button-mobile, .menu-buttons-mobile:visited {
    font-size: 7vw;
    color: black;
    text-decoration: none;
    display: block;
    padding: 2vw;
  }
}
@media (min-width: 641px) and (max-width: 960px) { /* tablice sranje ++ */
  #menu { height: 10vw; }
  .menu-buttons { display: none; }
  #menu-mobile {
    position: absolute;
    right: 0vw;
    height: 10vw;
    width: 10vw;
  }
  .fa {
    padding: 1vw 2vw !important;
    font-size: 7vw !important;
  }
  #menu-buttons-mobile {
    z-index: 1;
    position: absolute;
    right: 0vw;
    top: 10vw;
    border: solid 2px #000000;
  }
  .menu-button-mobile, .menu-buttons-mobile:visited {
    font-size: 7vw;
    color: black;
    text-decoration: none;
    display: block;
    padding: 2vw;
  }
}
@media (min-width: 961px) { /* tablice landscape še večje sranje ++ */
  #menu-mobile { display: none; }
  .menu-buttons-mobile { display: none; }
  #menu { height: 120px; }
  .menu-buttons {
    position: absolute;
    right: 0px;
    bottom: 17px;
  }
  .menu-button, .menu-button:visited {
    color: #ffffff;
    font-size: 20px;
    padding: 0px 16px;
    text-decoration: none;
  }
}

@media (min-width: 320px) and (max-width: 1600px) { /* mobi sranje ++ */
  #header { height: 60vw; }
}
@media (min-width: 1601px) { /* tablice landscape še večje sranje ++ */
  #header { height: 700px; }
}
  
#header {
  background-color: black;
  position: relative;
}

.header-background {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.header-background.active { opacity: 1; }

.zgoraj { border-top: 2px solid #ffffff; }
.gradient { height: 32px; }
.spodaj { transform: scaleY(-1); }

@media (min-width: 320px) and (max-width: 640px) { /* mobi sranje ++ */
  #samohvala { padding: 0vw 5vw; }
  .besedilo { padding: 2vw 0vw; }
  .text { font-size: 3.5vw; }
  .odstavek { margin-top: 3vw; }
  .title { font-size: 4.5vw; }
  .rlug { height: 7vw; }
}
@media (min-width: 641px) and (max-width: 960px) { /* tablice sranje ++ */
  #samohvala { padding: 0vw 5vw; }
  .besedilo { padding: 2vw 0vw; }
  .text { font-size: 3.5vw; }
  .odstavek { margin-top: 3vw; }
  .title { font-size: 4.5vw; }
  .rlug { height: 7vw; }
}
@media (min-width: 961px) { /* tablice landscape še večje sranje ++ */
  #samohvala {
    display: flex;
    justify-content: space-around;
    padding: 20px 40px;
  }
  .besedilo { width:40%; }
  .odstavek { margin-top: 16px; }
  .title { font-size: 30px; }
  .text { font-size: 20px; }
  .rlug { height: 64px; }
}

.title, .text { display: block; }
.text { text-align: justify; }
.rlug {
  background-image: url('/img/rlug.png');
  background-size: contain;
  background-repeat: no-repeat;
}

@media (min-width: 320px) and (max-width: 640px) { /* mobi sranje */
  #sponsor { padding: 2vw 0vw; }
  .mobile-spacer { height: 2vw; }
  .oglas {
    width: 96vw;
    height: 25vw;
  	margin: auto;
  }
}
@media (min-width: 641px) and (max-width: 960px) { /* tablice sranje */
  #sponsor { padding: 2vw 0vw; }
  .mobile-spacer { margin: 5vw; }
  .oglas {
    width: 96vw;
    height: 25vw;
  	margin: auto;
  }
}
@media (min-width: 961px) and (max-width: 1600px) { /* tablice landscape še večje sranje */
  #sponsor {
    display: flex;
    justify-content: space-evenly;
    padding: 20px 0px;
  }
  .mobile-spacer { display: none; }
  .oglas {
    width: 45vw;
	  height: 11.6vw;
  }
}
@media (min-width: 1601px) { /* tablice landscape še večje sranje */
  #sponsor {
    display: flex;
    justify-content: space-evenly;
    padding: 20px 0px;
  }
  .mobile-spacer { display: none; }
  .oglas {
    width: 764px;
	  height: 197px;
  }
}

.oglas {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

@media (min-width: 320px) and (max-width: 960px) { /* mobi sranje ++ */
  #footer { padding: 4vw; }
  .sedez-kluba { display: none; }
  .sociala {
    margin: auto;
    width: fit-content;
  }
  .trademark span, .sedez-kluba-mobile span{
    margin-top: 3vw;
    display: block;
    text-align: center;
  }
  .sedez-kluba-mobile span { font-size: 4vw; }
  .trademark span { font-size: 3vw; }
}
@media (min-width: 961px) { /* tablice landscape še večje sranje ++ */
  #footer {
    background-image: url('/img/kocka.png');
    background-repeat: no-repeat;
    background-position: right;
    height: 166px;
  }
  .sedez-kluba-mobile { display: none; }
  .sedez-kluba {
    position: absolute;
    top: 50px;
    left: 32px;
  }
  .sedez-kluba span { display: block; }
  .sociala, .trademark {
    position: relative;
    margin: auto;
    width: fit-content;
  }
  .sociala { top: 60px; }
  .trademark { top: 90px; }
}

#footer {
  position: relative;
}




/*

.menu-mobile { display: none; }

@media (min-width: 1281px) {
  #menu .content { height: 120px; }
  .menu-links { top: 8px; right: 8px; }
  .menu-links img { height: 40px; margin-left: 15px; }
}

@media (min-width: 320px) {
  #menu .content { height: 12vw; }
  #menu_logo img { height: 12vw; }
  .menu-buttons { display: none; }
  .menu-buttons { font-size: 3.5vw !important; }
  .menu-links { top: 3vw; right: 2vw; }
  .menu-links img { height: 6vw; margin-left: 2vw; }
}

.menu-buttons-mobile, .menu-buttons-mobile:hover, .menu-buttons-mobile:visited, .menu-buttons-mobile:active {
  color: #19325A;
  display: block;
  font-size: 5vw;
  margin: 2vw;
}

.menu-mobile {
  position: absolute;
  top: 0px;
  right: 0px;
  border: 0.5vw solid #19325A;
  background-color: #ffffff;
  z-index: 200;
}

.menu-mobile-content { position: relative; }

.menu-buttons:hover, .menu-buttons:active { background-color: #70819A; }

.menu-links { position: absolute; }






@media (min-width: 1281px) {
  #footer-kk { padding: 20px 0px; font-size: 15px; }
}

@media (min-width: 320px) {
  #footer-kk { padding: 2vw 0vw; font-size: 1.5vw; }
  #footer-kk .flexed { display: flex; justify-content: space-between; margin: auto; width: 95%; }
}
*/