@charset "UTF-8";
/* CSS Document */
button,
.w3-banner-nav { z-index: 4; }
.w3-banner-nav { font-size: 36px; opacity: 0.6; }
.w3-banner-nav:hover { opacity: 1; }
.mySlides { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.banner-image-link { cursor: pointer;}

.active-slide {   z-index: 3; }
.w3-banner-text { padding: 24px 48px; background: rgba(0,0,0,0.6); align-content: center; }
.it-form-container { transition: all 0.3s ease-in-out; }
.w3-banner { max-width:100%; overflow-x: clip; }
.w3-banner-img { width:100%; height:100%; object-fit:cover; }
.w3-picker { height: 40px; padding: 0; border: none; }
.w3-range { height: 40px; }
.mySlides form label { display: block; padding: 4px; margin: 8px 0 0; }
.mySlides form textarea { height: 112px; }

.position-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 150px; margin: 0 auto; }
.position-item { text-align: center; }
.position-item input[type="radio"] { display: none; }
.position-item i { font-size: 24px; color: #ccc; cursor: pointer; }
.position-item input[type="radio"]:checked + i { color: #2196F3; /* Change color when selected */ }


/* The switch - the box around the slider */
.it-toggle { position: relative; display: inline-block !important; margin-top: 0 !important; width: 60px; height: 34px; }
/* Hide default checkbox */
.it-toggle input { opacity: 0; width: 0; height: 0; }
/* The slider */
.it-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
/* The round slider button */
.it-toggle-slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
/* Checked state */
input:checked + .it-toggle-slider { background-color: #2196F3; }
/* Checked state for the round slider button */
input:checked + .it-toggle-slider:before { transform: translateX(26px); }
.it-toggle-value { display: inline-block; line-height: 35px; }

.sort-banner-slides { z-index: 4; }
.it-banner-sort-img { height: 100%; object-fit: contain; border: 3px dashed red; }
.sort-banner-slides .w3-col { position: relative; height: 200px; }
.it-sort-slides { transform: translate(-50%, 100%); }

.it-banner-form { position: relative; }

.it-form-image {
    transition: all 0.3s ease;
    height: 100% !important;
    width: auto !important;
    max-width: none;
    background: #f2f2f2;
}
.it-form-image:hover {
    height: 300% !important;
}

/* Zoom out for the current slide */
.mySlides.zoom-out {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: scale(0.1);
  opacity: 0;
}

/* Zoom in for the next slide */
.mySlides.zoom-in {
  transition: opacity 0.6s ease;
  transform: scale(1);
  opacity: 1;
}

/* Initial state for the next slide (hidden) */
.mySlides.hidden {
  opacity: 0;
  transform: scale(0.1);
}

/* Flip out (hide the current slide) */
.mySlides.flip-out {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: perspective(1000px) rotateY(-90deg); /* Horizontal flip */
  opacity: 0;
}

/* Flip in (show the next slide) */
.mySlides.flip-in {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: perspective(1000px) rotateY(0deg);
  opacity: 1;
}




/* Initial state for hidden slides when moving to the next slide */

.mySlides.hidden_flip {
  opacity: 0;
}
.mySlides.hidden_flip-next {
  transform: perspective(1000px) rotateY(90deg); /* Positioned off-screen to the right */
  opacity: 0;
}

/* Initial state for hidden slides when moving to the previous slide */
.mySlides.hidden_flip-prev {
  transform: perspective(1000px) rotateY(-90deg); /* Positioned off-screen to the left */
  opacity: 0;
}

/* Flip out to the left (for the next button) */
.mySlides.flip-out-next {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: perspective(1000px) rotateY(-90deg); /* Flip out to the left */
  opacity: 0;
}

/* Flip out to the right (for the prev button) */
.mySlides.flip-out-prev {
  transition: transform 0.6s ease, opacity 0.6s ease;
  transform: perspective(1000px) rotateY(90deg); /* Flip out to the right */
  opacity: 0;
}

.slide-track {
  display: flex;
  transition: transform 0.6s ease;
  will-change: transform;
}

.slide-track .mySlides {
  flex: 0 0 33.3333%;
  height: 100%;
  position: relative;
}