@font-face {
  font-family: "Aktiv Grotesk Black Italic";
  src: url("font/OTF/AktivGrotesk-BlackItalic.otf");
}
@font-face {
  font-family: "Aktiv Grotesk Italic";
  src: url("font/OTF/AktivGrotesk-Italic.otf");
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Aktiv Grotesk Black Italic";
  font-size: 32px;
  margin: auto;
}

.container {
  max-width: 1056px;
  width: 95%;
  margin: auto;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2 {
  text-transform: uppercase;
  font-size: 64px;
  text-align: center;
  font-weight: 400;
}

/* HEADER */
header {
  padding: 30px 0;
  position: fixed;
  z-index: 1;
  top: 0;
  width: 100%;
  transition: 0.2s;
}
header .container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header .container .brand {
  width: 60%;
}
header .container .brand a {
  display: block;
  width: 100%;
}
header .container .brand a img {
  width: 100%;
  max-width: max-content;
  height: auto;
}
header .container nav {
  width: max-content;
  height: auto;
  overflow: hidden;
  transition: 0.2s;
  display: none;
}
header .container nav ul {
  display: flex;
    flex-direction: column;
    justify-content: center;
  align-items: center;
  list-style: none;
}
header .container nav ul li {
  padding: 10px 20px;
}
header .container nav ul li:not(:first-child) {
  margin-left: 30px;
}
header .container nav ul li {
  margin: 0 !important;
}
header .container nav ul li a {
  text-decoration: none;
  color: rgb(225, 37, 27);;
  text-transform: uppercase;
}
header .container nav.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    background: #fff;
    border-radius: 23px;
    position: absolute;
    right: 100px;
    top: 40px;
}
header .container nav ul .active {
  background: rgb(225, 37, 27);
  width: 100%;
}

header .container nav ul .active a {
  color: rgb(51, 184, 197);
}
header .container nav.active ul li.active a {
  color: #fff
}
header .container .toggler {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

header .container .toggler img{
  cursor: pointer;
}

header .container .toggler span {
  font-size: 35px;
  color: #fff;
  cursor: pointer;
  transition: 0.3s;
}

header.fixed {
  background-color: rgb(51, 184, 197);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
  padding: 10px 0;
}

header.fixed .logo{
  max-width: 370px!important;
}

/* BANNER */
.banner {
  width: 100%;
  height: 800px;
  background-image: url(img/pozadina.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 20vh 0 10vh 0;
  background-color: rgba(255, 255, 255, 0.5);
  position: relative;
}

.banner img {
  width: 100%;
  max-width: max-content;
  margin: auto;
}

.banner .skoda{
  position: absolute;
  left: 0;
  bottom: -5%;
}

.banner .vaucer{
  position: absolute;
  left: 40%;
  bottom: 35%;
}

.banner .info{
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: auto;
}

/* EMPTY */
.empty {
  height: 250px;
}

.info{
    max-width: 400px;
}

/* PRAVILA */
.pravila {
  padding: 70px 0;
}
.pravila h2 {
  color: rgb(225, 37, 27);
}
.pravila section {
  padding: 50px 0;
  margin-bottom: 50px;
}
.pravila section:first-child {
  display: flex;
  justify-content: space-evenly;
}
.pravila section:first-child article {
  flex: 0 0 23%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: rgb(225, 37, 27);
}
.pravila section:first-child article img {
  max-width: 200px;
}
.pravila section:last-child {
  text-align: center;
  background-image: url(img/rectangle3.png);
  background-size: 100% 100%;
  padding: 50px;
}
.pravila section:last-child p {
  color: rgb(51, 184, 197);
}
.pravila section:last-child p:not(:last-child) {
  margin-bottom: 20px;
}
.pravila section:last-child p span {
  color: rgb(225, 37, 27);
}

.nagrade {
  background-image: url(img/pozadina.jpg);
  background-size: cover;
}
.nagrade .highL {
  background-color: rgb(225, 37, 27);
  padding: 10px 30px;
}
.nagrade .highL h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
}
.nagrade .container, .nagrade .ostale-nagrade, .nagrade .glavne-nagrade {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.nagrade .container .susilica,
.nagrade .container .pegla,
.nagrade .container .korpa{
  flex: 0 0 33%;
}
.nagrade .container .skoda{
  flex: 0 0 60%;
}
.nagrade .container .vaucer{
  flex: 0 0 40%;
}
@media (min-width: 867px) {
  .nagrade .container img {
    width: 90%;
    margin: 1% auto;
  }
}

/* FOOTER */
footer {
  background-color: #fff;
  padding: 20px 0;
}
footer .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
footer .container section {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
footer .container section:last-child {
  justify-content: flex-end;
}
footer .container section a {
  color: rgb(225, 37, 27);
  text-decoration: none;
}
footer .container section a:not(:last-child) {
  margin-right: 40px;
}

.center {
  text-align: center;
}

.pravilnikPage header.fixed nav ul li a, .dobitniciPage header.fixed nav ul li a{
  color: rgb(51, 184, 197);
}
.pravilnikPage header nav ul li a, .dobitniciPage header nav ul li a {
  color: rgb(51, 184, 197);
}

.pravilnikPage header.fixed nav ul .active, .dobitniciPage header.fixed nav ul .active{
  background: rgb(51, 184, 197);
  background-image: none;
}

.pravilnikPage header.fixed nav ul .active a, .dobitniciPage header.fixed nav ul .active a{
  color: rgb(51, 184, 197);
}

.pravilnikPage header nav ul .active, .dobitniciPage header nav ul .active{
  background: rgb(51, 184, 197);
  background-image: none;
}

.pravilnikPage header nav ul .active a, .dobitniciPage header nav ul .active a{
  color: #fff;
}


.pravilnikPage {
  color: rgb(51, 184, 197);
}
.pravilnikPage .main {
  padding: 250px 0 50px 0;
}
.pravilnikPage .main h2 {
  color: rgb(225, 37, 27);
  margin: 30px 0;
  font-size: 40px;
}

.pravilnikPage .main img{
  margin-bottom: 50px;
}
.pravilnikPage .main h3 {
  margin: 30px 0;
}
.pravilnikPage .main p {
  margin-bottom: 30px;
  font-size: 24px;
  text-align: justify;
}
.pravilnikPage .main ol, .pravilnikPage .main ul {
  padding-left: 70px;
  font-size: 24px;
  margin-bottom: 30px;
}
.pravilnikPage .main p > ul {
  margin: 0;
}
.pravilnikPage .main span {
  color: rgb(225, 37, 27);
}
.pravilnikPage .main .left {
  max-width: 600px;
  margin-top: 80px;
}



.tabela_mob{
  display: none;

}

.dobitniciPage {
  text-align: center;
}
.dobitniciPage .main {
  padding-bottom: 70px;
  padding: 150px 0 50px 0;
}
.dobitniciPage h2 {
  margin-top: 70px;
  text-transform: uppercase;
  color: rgb(225, 37, 27);
}
.dobitniciPage h3 {
  text-transform: uppercase;
  margin-bottom: 50px;
  margin-top: 20px;
  color: rgb(51, 184, 197);
}
.dobitniciPage p {
  color: rgb(225, 37, 27);
}

.dobitniciPage table{
  margin: 30px auto;
}

.dobitniciPage table thead{
  background-color: rgb(51, 184, 197);
  color: #fff;
}

.dobitniciPage td{
  padding: 10px;
}

.dobitniciPage tbody{
  color: rgb(51, 184, 197);
}

@media (max-width: 1660px) {
  .banner .vaucer {
    left: 30%;
    bottom: 45%;
  }
}

@media (max-width: 1440px) {
  .banner .info{
    right: 0;
  }
}

@media (max-width: 1056px) {
  .banner{height: auto;}

  .banner .skoda, .banner .vaucer{
    position: relative;
    left: inherit;
    right: inherit;
    top: inherit;
    bottom: inherit;
    margin: 20px auto;
    width: 80%;
  }

  .banner .info {
    position: relative;
    /* right: 0;
    bottom: inherit;
    top: 20%; */
    width: 80%;
  }

}

@media(min-width: 1056px){
  .banner .info{
    max-height: 50vh;
  }
}

@media (max-width: 867px) {
  .pravila .container section:first-child {
    flex-wrap: wrap;
  }
  .pravila .container section:first-child article {
    min-width: 200px;
    margin-bottom: 30px;
  }
  .pravila .container section:last-child {
    background: transparent;
    background-image: none;
    border: 10px dashed rgb(225, 37, 27);
    border-radius: 24px;
  }
  .nagrade .container {
    flex-direction: column-reverse;
  }
  .nagrade .container img{
    margin: 20px auto;
  }
}
@media (max-width: 620px) {
  h2 {
    font-size: 40px;
  }
  h3 {
    font-size: 28px;
  }
  p {
    font-size: 24px;
  }
  footer .container {
    flex-direction: column;
  }
  footer .container a {
    font-size: 24px;
  }

  .tabela_desk{
    display: none;
  }

  .tabela_mob{
    display: block;
    width: 100%; 
  }

  .nav-image{
    width: 60px;
    height: 60px;
  }
}/*# sourceMappingURL=style.css.map */