/* 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:100%;

}

/* Legend */

.legend {

    background: rgba(255, 255, 255, 0.6);

    width: 30%;

    height: 100%;

    position:absolute;

    bottom:0;

    color:#27788f;

}

/* Contents */

.content {

    width:100%;

    height:100%;

    position:absolute;

    overflow:hidden;

}

.content-txt {

    width:400px;

    height:150px;

    float:left;

    position:relative;

    top:20%;

    -webkit-animation:content-s 7.5s infinite;

    -moz-animation:content-s 7.5s infinite;

    animation:content-s 7.5s infinite;

}

@media only screen and (max-width :1024px) {

    .content-txt {

        top:5%;

    }

    .legend {

        width: 50%;

    }

}

@media only screen and (max-width :800px) {

    .content-txt h1 {

        font-size: 1.5em !important;

        line-height:1.3em !important;

    }

}

@media only screen and (max-width :610px) {

    .legend, .content-txt {

        display:none !important;

    }

    #slider {

        height:200px;

    }

}

.content-txt h1 {

    font-size: 1.875em;

    line-height:1.5em;

    color:#27788f;

    text-align:left;

    margin-left:30px;

    padding-bottom:10px;

}

.content-txt h2 {

    font-family:arial;

    font-weight:normal;

    font-size:14px;

    font-style:italic;

    color:#27788f;

    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;

    }

}