/* Slider */
#slider {
    width:100%;
    height:500px;
    position:relative;
    overflow:hidden;
}
@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:auto;
}

/* Legend */
.legend {
    border:500px solid transparent;
    border-left:800px solid rgba(132, 189, 0, 0.5);
    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: 290px;
    -webkit-animation:content-s 7.5s infinite;
    -moz-animation:content-s 7.5s infinite;
    animation:content-s 7.5s infinite;
}

.wrapper #slider .slides .slider .content-txt h1 {
    /*font-family:Arial;*/
    text-transform:uppercase;
    font-size: 1.6rem;
    color:#fff;
    text-align:left;
    margin-left:30px;
    padding-bottom:10px;
    text-shadow: 0 1px 10px black;
}

.wrapper #slider .slides .slider .content-txt h2 {
    /*font-family:arial;*/
    font-weight:normal;
    font-size: 1rem;
    font-style:italic;
    color:#fff;
    text-align:left;
    margin-left:30px;
    text-shadow: 0 1px 10px #84BD00;
}

/* Switch */
.switch {
    width:120px;
    height:10px;
    position:absolute;
    bottom:50px;
    z-index:99;
    left:30px;
    transition: ease-in-out 1s;
}

.switch > ul {
    list-style:none;
}

.switch > ul > li {
    width:10px;
    height:10px;
    border-radius:50%;
    background: white;
    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 screen and (min-width: 700px) and (max-width: 750px) {
    .slider {
        height: 468px;
    }
}

@media screen and (min-width: 605px) and (max-width: 699px) {
    .slider {
        height: 400px;
    }

    .content-txt {
        top: 228px;
    }

    .legend {
        border: 370px solid transparent;
        border-left: 800px solid rgba(132, 189, 0, 0.5);
        border-bottom: 0;
        position: absolute;
        bottom: 0;
    }

    .switch {
        bottom: 118px;
    }
}

@media screen and (min-width: 500px) and (max-width: 604px) {
    #slider {
        height: 333px;
    }

    .slider {
        height: 333px;
    }

    .legend {
        border: 265px solid transparent;
        border-left: 800px solid rgba(132, 189, 0, 0.5);
        border-bottom: 0;
        position: absolute;
        bottom: 0;
    }

    .content-txt {
        width: 328px;
        top: 178px;
    }

    .wrapper #slider .slides .slider .content-txt h1 {
        font-size: 1.2rem;
        /*padding-bottom: 0;*/
    }

    .content-txt h2 {
        font-size: 1rem;
    }

    .switch {
        bottom: 22px;
    }
}


@media screen and (min-width: 350px) and (max-width: 499px) {
    #slider {
        height: 233px;
    }

    .legend {
        border: 154px solid transparent;
        border-left: 1100px solid rgba(132, 189, 0, 0.5);
        border-bottom: 0;
        position: absolute;
        bottom: 0;
    }

    .content-txt {
        width: 328px;
        top: 122px;
    }

    .wrapper #slider .slides .slider .content-txt h1 {
        font-size: 1.2rem;
    }

    .wrapper #slider .slides .slider .content-txt h2 {
        font-size: .9rem;
    }

    .switch {
        top: 10px;
    }
}