/* Slider */
#slider{
    width:100%;
    height:600px;
    position:relative;
    overflow:hidden;
    /* border: 1px solid #cecbcb; */
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  }
  .slider-over{
    position: absolute;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.041); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity:1;
    color: white;
    font-size: 20px;
    text-align: center;
    top: 0;
    height: 100%;
    z-index: 2;
  }
  @keyframes load{
    from{left:-100%;}
    to{left:0;}
  }
  .slides{
    width:400%;
    height:100%;
    position:relative;
    -webkit-animation:slide 30s infinite;
    -moz-animation:slide 30s infinite;
    animation:slide 30s infinite;
  }
  .slider{
    width:25%;
    height:100%;
    float:left;
    position:relative;
    z-index:1;
    overflow:hidden;
  }
  .slide img{
    width:100%;
    height:100%;
  }
  .slide img{
    width:100%;
    height:100%;
  }
  .image{
    width:100%;
    height:100%;
  }
  .image img{
    width:100%;
    height:100%;
  }

  /* Legend */
  .legend{
    border:500px solid transparent;
    /* border-left:900px solid rgba(207, 209, 211, 0.7); */
    border-bottom:0;
    position:absolute;
    bottom:0;
  }

  /* Contents */
  .content{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
  }
  .content-txt{
    width:400px;
    height:150px;
    float:left;
    position:relative;
    top:200px;
    -webkit-animation:content-s 7.5s infinite;
    -moz-animation:content-s 7.5s infinite;
    animation:content-s 7.5s infinite;

  }
  .content-txt h2{
    font-family:Arial;
    text-transform:uppercase;
    font-size:24px;
    color:#000000;
    text-align:left;
    margin-left:30px;
    padding-bottom:10px;
    font-family: 'emix';
  }
  .content-txt p{
    font-family:arial;
    font-weight:normal;
    font-size:14px;
    font-style:italic;
    color:#524f4f;
    text-align:left;
    margin-left:30px;
  }

  /* Switch */
  .switch{
    width:120px;
    height:10px;
    position:absolute;
    bottom:50px;
    z-index:99;
    left:30px;
  }
  .switch > ul{
    list-style:none;
  }
  .switch > ul > li{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#333;
    float:left;
    margin-right:5px;
    cursor:pointer;
  }
  .switch ul{
    overflow:hidden;
  }
  .on{
    width:100%;
    height:100%;
    border-radius:50%;
    background:#f39c12;
    position:relative;
    -webkit-animation:on 30s infinite;
    -moz-animation:on 30s infinite;
    animation:on 30s infinite;
  }

  /* Animation */
  @-webkit-keyframes slide{
    0%,100%{
      margin-left:0%;
    }
    21%{
      margin-left:0%;
    }
    25%{
      margin-left:-100%;
    }
    46%{
      margin-left:-100%;
    }
    50%{
      margin-left:-200%;
    }
    71%{
      margin-left:-200%;
    }
    75%{
      margin-left:-300%;
    }
    96%{
      margin-left:-300%;
    }
  }
  @-moz-keyframes slide{
    0%,100%{
      margin-left:0%;
    }
    21%{
      margin-left:0%;
    }
    25%{
      margin-left:-100%;
    }
    46%{
      margin-left:-100%;
    }
    50%{
      margin-left:-200%;
    }
    71%{
      margin-left:-200%;
    }
    75%{
      margin-left:-300%;
    }
    96%{
      margin-left:-300%;
    }
  }
  @keyframes slide{
    0%,100%{
      margin-left:0%;
    }
    21%{
      margin-left:0%;
    }
    25%{
      margin-left:-100%;
    }
    46%{
      margin-left:-100%;
    }
    50%{
      margin-left:-200%;
    }
    71%{
      margin-left:-200%;
    }
    75%{
      margin-left:-300%;
    }
    96%{
      margin-left:-300%;
    }
  }

  @-webkit-keyframes content-s{
    0%{left:-420px;}
    10%{left:0px;}
    30%{left:0px;}
    40%{left:0px;}
    50%{left:0px;}
    60%{left:0px;}
    70%{left:0;}
    80%{left:-420px;}
    90%{left:-420px;}
    100%{left:-420px;}
  }
  @-moz-keyframes content-s{
    0%{left:-420px;}
    10%{left:0px;}
    30%{left:0px;}
    40%{left:0px;}
    50%{left:0px;}
    60%{left:0px;}
    70%{left:0;}
    80%{left:-420px;}
    90%{left:-420px;}
    100%{left:-420px;}
  }
  @keyframes content-s{
    0%{left:-420px;}
    10%{left:20px;}
    15%{left:0px;}
    30%{left:0px;}
    40%{left:0px;}
    50%{left:0px;}
    60%{left:0px;}
    70%{left:0;}
    80%{left:-420px;}
    90%{left:-420px;}
    100%{left:-420px;}
  }

  @-webkit-keyframes on{
    0%,100%{
      margin-left:0%;
    }
    21%{
      margin-left:0%;
    }
    25%{
      margin-left:15px;
    }
    46%{
      margin-left:15px;
    }
    50%{
      margin-left:30px;
    }
    71%{
      margin-left:30px;
    }
    75%{
      margin-left:45px;
    }
    96%{
      margin-left:45px;
    }
  }

  @-moz-keyframes on{
    0%,100%{
      margin-left:0%;
    }
    21%{
      margin-left:0%;
    }
    25%{
      margin-left:15px;
    }
    46%{
      margin-left:15px;
    }
    50%{
      margin-left:30px;
    }
    71%{
      margin-left:30px;
    }
    75%{
      margin-left:45px;
    }
    96%{
      margin-left:45px;
    }
  }

  @keyframes on{
    0%,100%{
      margin-left:0%;
    }
    21%{
      margin-left:0%;
    }
    25%{
      margin-left:15px;
    }
    46%{
      margin-left:15px;
    }
    50%{
      margin-left:30px;
    }
    71%{
      margin-left:30px;
    }
    75%{
      margin-left:45px;
    }
    96%{
      margin-left:45px;
    }
  }

    @media (min-width: 240px ) and (max-width: 767px) {
    #slider{
        width:100%;
        height:200px;
        position:relative;
        overflow:hidden;
        margin-top: 80px;
      }

      .switch{
        width:120px;
        height:5px;
        position:absolute;
        bottom:10px;
        z-index:99;
        left:30px;
      }


  }