/*Baner Slajder*/
.slajder, .panel {
padding: 0px 0.01em 0px;
}

.content, .auto {
    margin-left: auto;
    margin-right: auto;
}
.tooltip, .display-slajder {
    position: relative;
    width: 100%;
    height: 70vh;
    object-fit: cover;
}


.slajdy {
    display: none;
}
.slajder img {
    vertical-align: middle;
      width: 100%;
  height: 70vh;
  object-fit: cover;
      border-style: none;
}


.color, .hover-black:hover {
    color: #fff !important;
    text-shadow: 1px 2px 3px black;
}

.padding-16 {
    padding-top: px!important;
    padding-bottom: 16px!important;
}
.large {
    font-size:1.5rem !important;
    text-align:center;
      background: rgba(128, 128, 128, 0.81);
      
      padding: 20px;
}

.display-bottomleft {
    position: absolute;
    left: 0;
    bottom: 0;
}


.display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%,-50%);
    -ms-transform: translate(-0%,-50%);
}

.btn, .button {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.btn, .button {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

.padding-16 {
    padding-top: 16px!important;
    padding-bottom: 16px!important;
}

.display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%,-50%);
    -ms-transform: translate(0%,-50%);
}

.display-middle {
position: absolute;
    top: 70%;
    left: 40%;
    opacity:0;
    transform: translate(-30%,-50%);
    -ms-transform: translate(-30%,-50%);
      -webkit-animation-name: fade1;
  -webkit-animation-duration: 1s;
  animation-name: fade1;
  animation-duration: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
     -webkit-animation-fill-mode: forwards;
 animation-fill-mode: forwards;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: 0.4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 0.4}
  to {opacity: 1}
}

@-webkit-keyframes fade1 {
  from {opacity:0}
  to {opacity:1}
}

@keyframes fade1 {
  from {opacity:0}
  to {opacity:1}
}

.slider-button{
    background-color: rgb(255, 255, 255);
    font-family: Raleway;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    background-clip: padding-box !important;
    color: rgb(12, 12, 12);
    text-decoration: none;
    white-space: normal;
    width: 265px;
    height: 53px;
    min-height: 0px;
    min-width: 0px;
    text-align: center;
    line-height: 14px;
    letter-spacing: 3px;
    font-weight: 500;
    font-size: 14px;
    border-color: rgba(255, 255, 255, 0.5);
    border-style: solid;
    border-width: 10px;
    padding: 10px 30px;
    transform-origin: 50% 50%;
    transform: translate(0px, 0px);
    margin: 20px;
    transition: opacity 0.5s;
}
.slider-button:hover{
cursor:pointer;
opacity:0.5;
transition: opacity 0.5s;
 
}

.slajder-wrapper{
    width: 100%;
    height: 70vh;
    overflow: hidden;
    position: relative;
    float: left;
    display: inline-block;
     
}

body {  margin: 0;}

.slajd1{ background-image: url("../img/b0.jpg"); }
.slajd2{ background-image: url("../img/b1.jpg"); }
.slajd3{ background-image: url("../img/b2.jpg"); }
.slajd4{ background-image: url("../img/b3.jpg"); }
.slajd5{ background-image: url("../img/b4.jpg"); }

.slajd1, .slajd2, .slajd3, .slajd4, .slajd5{
  width: 100%;
  height: 100%;
      object-fit: cover;
  object-position: center center;
  background-repeat: no-repeat;
  background-color: white; /* fallback color */
  background-position: center;
  background-size: cover;
}
/* Slide Animation */
.slajd1, .slajd2, .slajd3, .slajd4, .slajd5{
  -webkit-animation-name: slide1;
  -webkit-animation-duration: 1s;
  animation-name: slide;
  animation-duration: 1s;

}
@-webkit-keyframes slide {
0% { transform:scale(1.3);}
60%{ transform:scale(1);}
65% { transform:scale(1);}
85% { transform:scale(1);}
100% { transform:scale(1);}
}

@keyframes slide {
0% { transform:scale(1.3);}
60%{ transform:scale(1);}
65% { transform:scale(1);}
65% { transform:scale(1);}
100% { transform:scale(1);}
}



/*Galeria Slajder*/

.visuallyhidden {
  position: absolute;
  z-index: -1;
  right: 0;
  opacity: 0;
  
}

.container {
  overflow: hidden;
    padding: 60px 0 60px 0;
  margin-top: 2em;
  background: #fff;
}

.card-carousel {
--card-width: 400px;
    --card-max-width: 400px;
    --card-height: 300px;
    --carousel-min-width: 320px;
  z-index: 1;
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: var(--card-height);
  min-width: var(--carousel-min-width);
  transition: filter .3s ease;
}

@media screen and (max-width: 640px) {
  .card-carousel {
    margin-left: calc((100vw - var(--carousel-min-width) - 40px) / 2)
  }
}

.card-carousel.smooth-return {
  transition: all .2s ease;
}

.card-carousel .card {
  background: whitesmoke;
  width: var(--card-width);
  max-width: var(--card-max-width);
  text-align: center;
  padding: 0px;
  min-width: 400px;
  height: var(--card-height);
  position: absolute;
  margin: 0 auto;
  color: rgba(0,0,0,.5);
  transition: inherit;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  -moz-box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3);
  filter: brightness(.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card.highlight {
  filter: brightness(1)
}


.card:nth-of-type(1) .image-container {
    background-image: url("../img/b0.jpg");
}
 
.card:nth-of-type(2) .image-container {
  background-image: url("../img/b1.jpg")
}

.card:nth-of-type(3) .image-container {
  background-image: url("../img/b2.jpg")
}
.card:nth-of-type(4) .image-container {
  background-image: url("../img/b3.jpg")
}
.card:nth-of-type(5) .image-container {
  background-image: url("../img/b4.jpg")
}

.image-container {
  width: 400px;
  height: 300px;
  position: relative;
  background-size: cover;
  margin-bottom: 0px;
  padding: 0px;
  -webkit-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 17px 0px rgba(0,0,0,0.3);
  
}
.highlight p {
position:relative;
    display: block !important;
    top: 0px;
}
.card p {
position:relative;
    display: none;
}

.finger-ico{
padding: 40px 0 40px 0;
display:block;
 margin: 0 auto;
}