body 
{
  margin: 0;
  padding: 0;
}
@font-face{
  font-family: font;
  src: url(Roboto-MediumItalic.ttf);
}

#header{

  height: 90px;
  margin: 0px;
  padding: 1px;
  background-color: rgb(32, 32, 32);
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
  background-size: 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 5px 5px, 0px 0px;
  
}
 p{
  padding: 10px;
  display:inline-table;
  font-size: 22px;
  border-style: solid;
  border-width: 0.9px;
  border-top: hidden;
  border-bottom: hidden;
  border-color: red;
  font-family: font;
  color: white;
}
 p1{
  padding: 10px;
  display:inline-table;
  font-size: 22px;
  border-style: solid;
  border-width: 0.9px;
  border-top: hidden;
  border-bottom: hidden;
  border-color: red;
  font-family: font;
  color: white;
  border-left: hidden;
}
#header img{

  margin: 0 auto;
top:19px;
  height: 50px;
  width: 230px;
position: relative;

  }


  html,
    body {
     
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

p9{  
      
     
  display:inline-table;
  font-size: 22px;
  font-family: font;
  color: black;
  
    

}





.swiper-button-next
{
  color: #8B0000 !important;
}

.swiper-button-prev
{
  color: #8B0000 !important;
}
.mySwiper .swiper-pagination-bullet{
  background-color: #8B0000 !important;
}


    .swiper {
      position: relative;
      width: 100%;
      height: 50%;
    }

    .swiper-slide {

   position: relative;
  text-align: center;
  font-size: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  
    }

    .swiper-slide img {
    width: 100%;
  height: 100%;
  object-fit: cover;
    }

    .swiper {
      margin-left: auto;
      margin-right: auto;
    }
    .text{
      position: absolute;
      left: 20%;
      height: 100%;
      width: 480px;
    
      background: rgba(0,0,0,0.5);
    }
    .text h1{

      color: white;
    
      font-family: font;

    }
    .kartice {
     position: relative;
     height: 80vh;
      margin: 0;
      display: flex;
      
      background: url("pozz.jpg") center;
      background-size: cover;
      justify-content:center;
      align-items:start;
     
    }




    a {
  display: contents;
}
   
 .kartica{

  overflow: hidden;
  border-style: solid;
  border-color: silver;
  text-align: center;
background-color: white;
  margin-top: 150px;
  margin-right: 20px;
  margin-left: 20px;
  width: 350px;
  aspect-ratio: 3 / 4;
  
 }

 .kartica img{

   transition: transform .5s;
  vertical-align:middle;
  width: 100%;
  height: 50%;
 }


.kartica img:hover{

  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 

}


.ikonica img:hover{

  -ms-transform: scale(1); /* IE 9 */
  -webkit-transform: scale(1); /* Safari 3-8 */
  transform: scale(1); 

}
 .ikonica{

  position: relative;
  left: 38%;
  right: 35%;
  top: -35px;
  border-radius: 50%;
  
  width: 70px;
  height: 70px;
  
  
 }
 .ikonica img {
 
  width: 100%;
  height: 100%;
 }


.textt {

border: hidden;
  background: white;
position: absolute;
   
  width: 350px;
  height: 250px; }







.reveal {
  position: relative;
  transform: translateX(-150px);
  opacity: 0;
  transition: all 1.5s ease;
}
.reveal:nth-child(5) {
  transform: translateY(150px);
  opacity: 0;
}

.reveal:nth-child(6) {
  transform: translateX(150px);
  opacity: 0;
}

.reveal.active {
  transform: translateX(0);
  opacity: 1;
}



p2{
  font-weight: bold;
 display: block;
  font-family: font;
  margin-top: 70px;
  position: absolute;
  text-align: center;
  z-index: 100;
  font-size: 30px;
}




.kartica.strelica{
  
 
  transform: translate(-50%,-50%);
}

.strelica span{
  position: absolute;
  
  left: 35%;
  display: block;
  height: 40px;
  width: 40px;
  margin: -10px;
border-bottom: 1px solid black;
border-right:  1px solid black;
transform: rotate(45deg);

animation: animate 2s infinite;
}
.strelica span:nth-child(2){
animation-delay: -0.2s;

  }
.strelica span:nth-child(3){
animation-delay: -0.4s;
  }


@keyframes animate{

0%{
  opacity: 0;
  transform: rotate(45deg) translate(-20px,-20px);
}
50%{
  opacity: 1;
}
100%{
  transform: rotate(45deg) translate(20px,20px);
  opacity: 0;
}

}


.kartica.strelica2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.strelica2 span{
  position: absolute;
    
    right: 35%;
  display: block;
  height: 40px;
  width: 40px;
  margin: -10px;
border-bottom: 1px solid black;
border-right:  1px solid black;
transform: rotate(45deg);

animation: animate 2s infinite;
}
.strelica2 span:nth-child(2){
animation-delay: -0.2s;

  }
.strelica2 span:nth-child(3){
animation-delay: -0.4s;
  }


@keyframes animate{

0%{
  opacity: 0;
  transform: rotate(45deg) translate(-40px,-40px);
}
50%{
  opacity: 1;
}
100%{
  transform: rotate(45deg) translate(40px,40px);
  opacity: 0;
}

}
.footer {
  position: relative;
  bottom: 0;
 display: flex;
  flex-direction:column;
align-items: center;
justify-content: center; 
  font-family: font;
  height: 90px;
  margin: 0px;
  padding: 0px;
  background-color: rgb(32, 32, 32);
  background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
  background-size: 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 5px 5px, 0px 0px;
}

   
.textf{
display: flex;
flex-direction:column;
} 

.p11{
  
font-size: 22px;
color: white;

}
.p12{
  
font-size: 22px;
color: white;

}
.p4{
  
 margin-top: -25px;
  margin-bottom:6px;
  font-family: font;
color: black;
font-size:24px;
font-weight: bold;
}
.p7{
  
  text-align:center;
  color: black;
  font-family: font;
  font-size: 16px;

  font-weight: normal;
}
.map-icon-and-text{
  display: none;
}

.map1-icon-and-text{
  display: flex;
}
.map1-icon-and-text .map-icon {
        display: flex;
        margin-right: 10px;
        font-size: 22px;
        color:white;
      }


@media (max-width: 1920px)
{
.strelica2 span{
  right: 40%;
}
.strelica span{
left: 40%;
}

@media (max-width: 1800px)
{
.strelica2 span{
  right: 37%;
}
.strelica span{
left: 37%;
}

@media (max-width: 1440px)
{
  .ikonica{
    display: none;
  }
.p4{
  
 margin-top: 0px;
  margin-bottom:6px;
  font-family: font;
color: black;
font-size: 1.7vw;
font-weight: bold;
}


}


@media (max-width: 1270px)
{
p1{
  font-size: 1.6vw;
}

p{
  font-size: 1.6vw;
}

}

@media (max-width: 1080px)
{
.strelica2 span{
  right: 33%;
}
.strelica span{
left: 33%;

}
p1{
  font-size: 1.47vw;
}

p{
  font-size: 1.47vw;
}





@media (max-width: 920px)
{
  p1{
  font-size: 1.42vw;
}

p{
  font-size: 1.42vw;
}
.strelica2 span{
  right: 31%;
}
.strelica span{
left: 31%;

}





@media (max-width: 860px){

  p1{
  font-size: 1.37vw;
}

p{
  font-size: 1.37vw;
}
}
@media (max-width: 820px)
{
 
  
  

  #header p{
  display: none;
}
#header p1{
  display: none;
}
  #header{
 
    display: flex;
      flex-direction: column;
      align-items: center;
}

@media screen and (max-width: 768px) {
  .text-big h2 {
    font-size: 20px;
  }

  .text-small p5 {
    font-size: 12px;
  }
}
.footer{
  position: none;
  height: 160px;
}
.map-icon-and-text {
        display: flex;
        align-items: center;
         margin: 5px;
      }
      .map1-icon-and-text {
        display: flex;
        align-items: center;
        margin: 5px;
      }

      .map-icon-and-text .map-icon {
        display: flex;
        margin-right: 10px;
        font-size: 22px;
        color:white;
      }
    

@media (max-width: 600px)
{
  .kartice {
    background-size: contain;
   position: static;
          height: auto;
          
  display: flex;
   flex-direction: column;
    align-items: center;
  }
    .strelica span{
    top:100px;
    }

.strelica2 span{
    top:100px;
    }



@media (max-width: 600px)
{
  p2{
   display: flex;
   position: relative;
    background-size: fit;

  }
  .p7{
  font-size: 22px;
}
  .ikonica{
    display: flex;
    position: relative;
    left: 40%;

}


  .kartica{
    width: 350px;
  height: 500px;
    margin-top: 20px;
    }

 .p4{
  margin-top: -25px;
  font-size: 24px;
 }

}

#header p{
  visibility: hidden;
}
#header p1{
  visibility: hidden;
}
.text 

{
    
      display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    
  
    
     
      top:25%;
      left: 0;
      right: 0;
      height: 50%;
      width: 100%;
      background: rgba(0,0,0,0.5);

    

}
.text h1{
 margin-top: -35px;
  
  font-size: 4vw;
}}