/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  margin-left: 3em;
  margin-right: 3em;
  background-color: #b01c1d;
  background-image: url("fondo2.png");
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-position: top center;
  color: black;
  font-family: Verdana;

}

header {
  padding-left: 1rem;
  background-color: blue;
  color: White;
  font-family: Simplex;
  border: 2px solid white;
  }
  
input[type="range"]{
  width:100%;
  }

input[type="text"]{
  border-width:2px;
  border-color:black;
  }

button{
  width:80px;;
  }


aside {
  margin-left:1px;
  width: 50%;
  float: right;
  color: black;
  font-family:Arial;
}

section, article {
  background-color: #fff;
  color: #888;
  width: 75%;
  border: 1px solid #dedede;
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  display:block;
  padding: 20px;
  text-align: justify;
  margin: auto;
}


hr {
  color: black;
  height: 5px;
}

.responsive {
  width: 70%;
  height: auto;
}


nav {
  background-color: #575757;
  border: 1px solid white;
  border-radius: 4px;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
  color: #C1C1C1;
  display: block;
  margin: 8px 25px 5px 0px;
  overflow: hidden;
  width: 100%; 
}

  nav ul {
    margin: 0;
    padding: 0;
  }

    nav ul li {
      display: inline-block;
      list-style-type: none;
      
      -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        -ms-transition: all 0.2s;
        -o-transition: all 0.2s;
        transition: all 0.2s; 
    }
      
      nav > ul > li > a > .caret {
        border-top: 4px solid #aaa;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
        content: "";
        display: inline-block;
        height: 0;
        width: 0;
        vertical-align: middle;
  
        -webkit-transition: color 0.1s linear;
     	  -moz-transition: color 0.1s linear;
       	-o-transition: color 0.1s linear;
          transition: color 0.1s linear; 
      }

      nav > ul > li > a {
        color: white;
        display: block;
        line-height: 56px;
        padding: 0 24px;
        text-decoration: none;
      }

        nav > ul > li:hover {
          background-color: rgb( 40, 44, 47 );
        }

        nav > ul > li:hover > a {
          color: rgb( 255, 255, 255 );
        }

        nav > ul > li:hover > a > .caret {
          border-top-color: rgb( 255, 255, 255 );
        }
      
      nav > ul > li > div {
        background-color: rgb( 40, 44, 47 );
        border-top: 0;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
        display: none;
        margin: 0;
        opacity: 0;
        position: absolute;
        width: 165px;
        visibility: hidden;
  
        -webkit-transiton: opacity 0.2s;
        -moz-transition: opacity 0.2s;
        -ms-transition: opacity 0.2s;
        -o-transition: opacity 0.2s;
        -transition: opacity 0.2s;
      }

        nav > ul > li:hover > div {
          display: block;
          opacity: 1;
          visibility: visible;
        }

          nav > ul > li > div ul > li {
            display: block;
          }

            nav > ul > li > div ul > li > a {
              color: #fff;
              display: block;
              padding: 12px 24px;
              text-decoration: none;
            }

              nav > ul > li > div ul > li:hover > a {
                background-color: rgba( 255, 255, 255, 0.1);
              }
.container{
  margin: auto;
  width: 600px;
  padding: 30px;
}

ul, li {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.slider{
  position: relative;
  width: 500px;
  height: 350px;
}

ul.slider li {
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    width: inherit;
    height: inherit;
    transition: opacity .5s;
}

ul.slider li img{
  width: 100%;
  height: 350px;
  object-fit: cover;
}

ul.slider li:first-child {
    opacity: 1; 
}

ul.slider li:target {
    opacity: 1; 
}

.menu{
  
  margin-top: 20px;
  width: 350px;
  
}

.menu li{
  display: inline-block;
  text-align: center;
}

.menu li a{
  display: inline-block;
  color: black;
  text-decoration: none;
  padding: 10px;
  width: 20px;
  height: 20px;
  font-size: 15px;
  border-radius: 100%;
  border: 3px solid #b01c1d;
  font-family: verdana;
  font-weight: bold;

}