#banner {
    clear: right;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin:  0 auto; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;	
    height:880px;
  }
  #slider {
      width: 100%;
      height: auto;
  } 
  
  #slider > a {
      position: absolute;
      width: 100%;
  }
  
  #slider img {
      z-index: 1;
      width: 100%;
      height: auto;
  }
  
  a.mas, a.menos {
      position: absolute;
      top: 50%;
      left: 0px;
      z-index: 10;
      width: 30px;
      height: 36px;
      text-align: center;
      line-height: 30px;
      font-size: 30px;
      color: #7881ef;
      background: rgba(240, 238, 187, 0.5);
      text-decoration: none;
      transition: .5s margin ease;
      border-radius: 10px;
  }
  
  a.mas {
      left: 100%;
      margin-left: 30px;
      visibility: hidden;
  }
  
  #banner:hover a.mas {
      visibility: visible;
      margin-left: -30px;
  }
  
  a.menos {
      left: 0;
      visibility: hidden;
      margin-left: -30px;
  }
  
  #banner:hover a.menos {
      visibility: visible;
      margin-left: 0px;
  }
  @media only screen and (max-width: 359px) {
      #banner, #slider {
          width: 100%;
          height: 160px;
      }
      #slider img {
          z-index: 1;
          width: 100%;
          height: auto;
      }    
  }
  @media only screen and (min-width: 360px) and (max-width: 459px) {
      #banner, #slider {
          width: 100%;
          height: 160px;
      }
      #slider img {
          z-index: 1;
          width: 100%;
          height: auto;
      }    
  }
  @media only screen and (min-width: 460px) and (max-width: 559px) {
      #banner, #slider {
          width: 100%;
          height: 200px;
      }
      #slider img {
         z-index: 1;
          width: 100%;
          height: auto;
      }    
  }
  @media only screen and (min-width: 560px) and (max-width: 659px) {
      #banner, #slider {
          width: 100%;
          height: 260px;
      }
      #slider img {
         z-index: 1;
          width: 100%;
          height: auto;
      }    
  }
  @media only screen and (min-width: 660px) and (max-width: 759px) {
      #banner, #slider {
          width: 100%;
          height: 300px;
      }
      #slider img {
         z-index: 1;
          width: 100%;
          height: auto;
      }    
  }
  @media only screen and (min-width: 760px) and (max-width: 859px) {
      #banner, #slider {
          width: 100%;
          height: 340px;
      }
      #slider img {
         z-index: 1;
          width: 100%;
          height: auto;
      }    
  }
  @media only screen and (min-width: 860px) and (max-width: 959px) {
      #banner, #slider {
          width: 100%;
          height: 400px;
      }
      #slider img {
         z-index: 1;
          width: 100%;
          height: auto;
      }    
  }
  @media only screen and (min-width: 960px) and (max-width: 1050px){
      #banner {
        top: 0px;  
      }
      #banner {
          width: 100%;
          height: 440px;
      }
      #slider img {
         z-index: 1;
          width: 100%;
          height: auto;
      }
  }