body {
    font-family: 'DM Sans';
    font-weight:500;
    background-color: black;
    box-sizing: border-box;
    width:100%;
}

 #font1, #font2{
    font-size: 20px !important;
    text-align: justify;
    line-height: 1.7;
    }

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: black; /* replace with your desired color */
  color:white;

}

  .slider-container {
      max-width: 100vh;
       margin:auto;
      position: relative;


    }

    .slide {
      display: none;
    }

    .active-slide {
      display: block;
    }

    .language-buttons {
      text-align: center;
      margin-top: 10px;
    }

    .language-buttons button {
      margin: 5px;
      padding: 10px;
      cursor: pointer;
    }

    /* Next and previous buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      margin-top: -22px;
      padding: 16px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
    }

    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    .prev:hover, .next:hover {
      background-color: rgba(0,0,0,0.8);
    }


p a {
	color: #FF6;
}

 a:hover {
	color: white;
}


#socials i:hover{
color:grey;
}


#about p a { color: #066; }
#about p a:hover { color: #F36; }

#contact p a { color: #066; }

footer span a { color: #FFF; }


.cssanimation, .cssanimation span {
    animation-duration: 2s;
    animation-fill-mode: both;
}

.cssanimation span { display: inline-block }

.bounceInTop { animation-name: bounceInTop }
@keyframes bounceInTop {
    0% { transform: translate3d(0, -300%, 0) }
    58% { transform: translate3d(0, 27px, 0) }
    73% { transform: translate3d(0, -12px, 0) }
    88% { transform: translate3d(0, 7px, 0) }
}





.parallax-window {

    min-height: 300px;
    background: transparent;

}

@media (max-width: 576px) {
  .carousel-item img {
    width: 100%;


  }
}

@media screen and (min-width:320px) and (max-width:640px) {

#tm-nav a{
font-size:15px;
}

#text1{
font-size:17px;
}

.slider-container {
      width: 100%;
       margin:auto;
      position: relative;


    }
#switchButton{
width:30px!important;

}
#switch2Button{
width:30px!important;
}

#switch3Button{
width:30px!important;
}
}



.tm-item-container {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:500px;
    padding:6px;
    margin:0;
}


#about h2{
font-size:30px;
}

#about p{
font-size:15px;
}

#contactus i{

font-size:15px;
}

#socials i{
font-size:35px;
}



}

/* navbar text  */
.text{
font-size:22px;

}
.podpis{
color:white;
font-size:17px;
}

.podpis a:hover{
color:silver;
}



.tm-text-yellow {
    color: #FC6;
}

.tm-text-gold {
    color: #d4af37;

}

.tm-text-brown {
    color: #544639;
}

#about{
    opacity:0.8 !important;
    }

a.tm-bg-green:hover {
    background-color: #0a8585;
}

.tm-bg-brown {
    background-color: #544639;
}

.tm-bg-green {
    background-color: #006666;
}

.tm-border-gold {
    border-color: #c4a747;
}

.tm-intro-width {
    max-width: 436px;
}

#contact{
display:flex;
flex-direction:column;
width:100%;
}


#contactus h2{
text-align:left;
}
#contactus{
display:flex;
flex-direction:column;
justify-content:center;
margin-top:20px;
}

.tm-item-container {
    max-width: 520px;
    height:auto;
    text:center;
}


#prvi3{
    margin-left: auto;
    margin-right: auto;
    opacity: 0.89;
    }

iframe{
padding:20px;
width:100%;
}

.input:focus {
    outline: none !important;
    border:1px solid #c4a747;
    box-shadow: 0 0 10px #b67533;
}



input::placeholder,
textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
   /* color: rgb(214, 212, 212);
    opacity: 1; /* Firefox */
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: rgb(214, 212, 212);
}

input::-ms-input-placeholder,
textarea::-ms-input-placeholder { /* Microsoft Edge */
    color: rgb(214, 212, 212);
}

#tm-nav {
    z-index: 1000;
    transition: all 0.3s ease;
}

#tm-nav.scroll {
    background-color: rgba(0,0,0,0.7);
}

#tm-nav li a {
    border-bottom-color: transparent;
    transition: all 0.3s ease;
}

#tm-nav li a.current,
#tm-nav li a:hover {
      border-bottom: 4px solid #c4a747;
}

.tm-text-2xl {
    font-size: 1.2rem;
    line-height: 2rem;
}

@media (min-width: 768px) {
    #tm-nav.scroll .tm-container {
        padding-top: 5px;
        padding-bottom: 5px;

    }
}

@media (max-width: 767px) {
    #tm-nav {
        width: auto;
        right: 0;
        border-radius: 5px;
    }
    .carousel-item img {
width:100%;
  height:300px;




}
}

@media (max-width: 639px) {
    .parallax-window {
        min-height: 600px;

    }
    #text1{
    font-size: 14px;
    text-align: justify;
    }

    #contacttext i{
    font-size:14px;
    }

    .cssanimation{
    width: 70%;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    }

    #prvi3{
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
    }

    #prvi{
    font-size: 20px;
    text-align: center !important;
    }

    #drugi{
    width: 92% !important;
    height: 70%;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    }

    #opis{
    font-size: 20px !important;
    margin-top: -20px !important;
    }

    #font1, #font2{
    font-size: 14px !important;
    text-align: justify;
    line-height: 1.7;
    }

    #font2{
    margin-bottom: -20px !important;
    }

    #about{
    opacity:0.8 !important;

    }
  #contact h2{
  font-size:20px;
  }

  .slider-container {
      max-width: 100%;
       margin:auto;
      position: relative;


    }

}

@media (max-width: 370px) {
    .tm-menu-item {
        flex-direction: column;
    }

    .tm-menu-item-2 {
        flex-direction: column-reverse;
    }

    .tm-menu-item img {
        margin-bottom: 10px;
    }

    .tm-menu-item-2 img {
        margin-bottom: 10px;
    }
}

h2{
color:white;
}

p{
color:white;
}

i{
text-align:right;
color:white;
}



.carousel-item img {

   user-select: auto;
  max-height:100vh;
  width:100%;
object-fit:contain;

.slider-container {
      max-width: 100%;
       margin:auto;
      position: relative;


    }

}