*, *::before, *::after {
    margin: 0;
    padding: 0%;
    outline: 0;
    box-sizing: border-box; }
  
  body {
    height: 100vh;
    background-color: #000;
    font-family: 'Roboto',sans-serif;
    background: linear-gradient(180deg, #64F4AC 0%, #202022 70%) no-repeat; }

  #slideshow-principal {
    position: relative;
    overflow: hidden;
  }

  #progress-bar-container {
    position: absolute;
    height: 10px;
    background-color: rgba(0, 0, 0, .2);
    width: 100%;
    top: 0;
    z-index: 1000;
  }

  #progress-bar {
    height: 100%;
    background-color: #64F4AC;
    border-radius: 0 3px 3px 0;
    transition: width 0.8s;
  }

  #slideshow {
    position: relative;
    z-index: 998;
    height: 600px;
  }

  img {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }

  #img2 {
    /* left: 100%; */
    opacity: 0;
  }

  .active {
    /* left: 0 !important; */
    opacity: 1 !important;
    transition: all 1s;
  }

  #indicadores {
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 20px;
    z-index: 999;
  }  

  .circles {
    border: white 2px solid;
    width: 25px;
    height: 25px;
    display: inline-block;
    margin: 0 5px 0 5px;
    background-color: transparent;
    border-radius: 50%;
  }

  .resaltado {
    background-color: #64F4AC;
    transition: background-color .8s;
  }

      p {
        font-size:1.2rem;
        font-weight:300;
        line-height:1.8rem;
        color:#fff;
        text-align: center;
      }
      .credits a {
        position:relative;
        display:inline-block;
        color:#64f48e;
        text-decoration:none;
      }
      .credits a:after {
        content:'';
        position:absolute;
        left:-1.5%;
        bottom:-1px;
        width:0%;
        height:1px;
        background:#64f48e;
        -webkit-transition:width 0.1s;
        -moz-transition:   width 0.1s;
        -o-transition:     width 0.1s;
        transition:        width 0.1s;
      }
      .credits a:hover::after {
        width:103%;
      }