.fancyslide {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #222222;
   position: relative;
}

.fancyslide__slide {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   display: none;
}

.fancyslide__slide--fade {
   animation-name: fade;
   animation-duration: 1.7s;
}

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

.fancyslide__slide__wide {
   width: 100%;
}


/* ------------------------
     left, right controls
   ------------------------ */

.fancyslide__left {
   width: 50px;
   height: 77px;
   position: absolute;
   left: 0;
   color: #fff;
}

.fancyslide__right {
   width: 50px;
   height: 77px;
   position: absolute;
   right: 0;
   color: #fff;
}

/* for control and testing: */
/* .fancyslide__left, .fancyslide__right, .fancyslide__float-button { background-color: salmon; } */

.fancyslide__left__prev,
.fancyslide__right__next {
   width: inherit;
   height: inherit;
   position: absolute;
   top: 0;
   color: white;
   cursor: pointer;
   font-size: 30px;
   font-weight: bold;
   padding: 16px;
   transition: 0.6s ease;
   user-select: none;
}

.fancyslide__left__prev {
   left: 0;
   text-align: left;
   border-radius: 0 5px 5px 0;
}

.fancyslide__right__next {
   right: 0;
   text-align: right;
   border-radius: 5px 0 0 5px;
}

.fancyslide__left__prev:hover {
   background-color: #158bbaeb;
   border-bottom: 4px solid #127ba3ff;
}

.fancyslide__right__next:hover {
   background-color: #b60d61eb;
   border-bottom: 4px solid #8f084c;
}

/* ---------------------------------------------------------------- */

.fancyslide__label a,
.fancyslide__float-text a {
   color: white;
   cursor: pointer;
}

.fancyslide__label a:link,
.fancyslide__float-text a:link {
   color: white;
}

.fancyslide__label a:visited,
.fancyslide__float-text a:visited {
   color: azure;
}

.fancyslide__label a:hover,
.fancyslide__float-text a:hover {
   color: deepskyblue;
}

.fancyslide__label a:active,
.fancyslide__float-text a:active {
   color: gold;
}

.fancyslide__float-text p {
   color: white;
   margin-block-start: 0.6em;
   margin-block-end: 0.6em;
}


/* -------------------------------
     float-text and float-button 
   ------------------------------- */

.fancyslide__float-text {
   width: 100%;
   width: unset;
   text-align: center;
   /* top: 0; left: 0; */
   position: absolute;
}

.fancyslide__float-button {
   width: 100%;
   width: unset;
   text-align: center;
   /* top: 0; left: 0; */
   position: absolute;
}

.fancyslide__float-button--up {
   top: 22px;
}

/* default center -> without anything */ 

.fancyslide__float-button--down {
   bottom: 45px;
}

.fancyslide__float-button--cntrL {
   left: 66px;
}

/* default center -> without anything */ 

.fancyslide__float-button--cntrR {
   right: 66px;
}

.fancyslide__float-button--upL {
   left: 66px;
   top: 22px;
}

.fancyslide__float-button--upR {
   right: 66px;
   top: 22px;
}

.fancyslide__float-button--downL {
   left: 66px;
   bottom: 22px;
}

.fancyslide__float-button--downR {
   right: 66px;
   bottom: 22px;
}

/* .fancyslide__float-text { background-color: #ba19c062; } */


/* -------
     dot
   ------- */

.dot {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 2px;
   background-color: #158cbaff;
   border-radius: 50%;
   display: inline-block;
   transition: background-color 0.6s ease;
}

.active,
.dot:hover {
   background-color: #717171;
   background-color: #b60d61ff;
}

nav.dot-container {
   position: relative;
   text-align: center;
   max-height: 0px;
   top: -40px;
}

nav.dot-container2 {
   position: absolute;
   text-align: center;
   width: 100%; /* <-- para center */
   top: 620px;
}

.pause {
   cursor: pointer;
   height: 15px;
   width: 15px;
   margin: 0 12px;
   background-color: green;
   border-radius: 18%;
   display: inline-block;
   transition: background-color 0.6s ease;
}

.pause:hover {
   background-color: #1b1212;
}

@media only screen and (max-width: 415px) {
   .fancyslide__label--below {
      line-height: 300px;
   }
   /* .fancyslide__float-text { ñññññññññññññññññññññññññññññññññ
      font-size: 16px;
      top: 64%;
   } */
}