*{
  padding:0;
  margin:0;
  box-sizing:border-box;
}

h2{
  text-align:center;
  padding:50px 0;
  font-family: 'Abel', sans-serif;
  font-size:45px;
  @media(max-width:680px){
    font-size:30px;
  }
}
 ul{
  padding:0;
  list-style: none;
  &:after{
    content:"";
    display:block;
    clear:both;
  }
}
/* #container{
  width: 100%;
} */
#slider-container{
  width:100%;
  position:relative;
  overflow:hidden;
  ul{
    li{
      float:left;
      img{
        width:100%;
        float:left;
      }
    }
  }
  .arrow{
    display:block;
    position:absolute;
    top:50%;
    width:50px;
    height:50px;
    transform:translateY(-50%) scale(1); 
    cursor:pointer;
    &:before,
    &:after{
      content:"";
      display:block;
      width:34px;
      height:1px;
      position:absolute;
      background:white;
      border-top:1px solid grey;
    }
    @media(max-width:680px){
      transform:translateY(-50%) scale(0.5); 
    }
  }
  .arrow.a-left{
    left:15px;
    &:before{
      top:0;
      left:0;
      margin-top:0;
      transform:rotate(-45deg);
      transform-origin: 100% 0;
    }
    &:after{
      bottom:0;
      left:0;
      margin-bottom:0;
      transform:rotate(45deg);
      transform-origin: 100% 0;
    }
  }
  .arrow.a-right{
    right:15px;
     &:before{
      top:0;
      right:0;
      margin-top:0;
      transform:rotate(45deg);
      transform-origin: 0 0;
    }
    &:after{
      bottom:0;
      right:0;
      margin-bottom:0;
      transform:rotate(-45deg);
      transform-origin: 0 0;
    }
  }
  .bullets-container{
    position:absolute;
    bottom:5%;
    left:50%;
    transform: translateX(-50%);
    .bullet{
      width:15px;
      height:15px;
      display:inline-block;
      border-radius:50%;
      border:1px solid grey;
      cursor:pointer;
      margin:0 8px;
      &.active{
        background:grey;
      }
    }
  }
}