/* 
        Slider CSS
    Created on : 23-abr-2014, 18:28:01
    Author     : Rolando Caldas <rolando.caldas@gmail.com>
*/

#slider-box {
	-moz-animation: autoSlider 20s infinite ease-in-out;
	-o-animation: autoSlider 20s infinite ease-in-out;
	-webkit-animation: autoSlider 20s infinite ease-in-out;
	animation: autoSlider 20s infinite ease-in-out;
	
	-webkit-transition: all 0.90s ease;
    -moz-transition: all 0.90s ease;
    -ms-transition: all 0.90s ease;
    -o-transition: all 0.90s ease;
    transition: all 0.90s ease;
	
    height: 100%;
    width: 300%;
}

#slider-container {
    height: 350px;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    width: 100%;
}

.element-blue,
.element-green,
.element-red,
.element-pink {
    height: 350px;
    max-height: 100%;
    width: 100%;
}

.element-blue {
    background-image: url(../images/galeria_tc.jpg);
	background-repeat: no-repeat;
}

.element-green {
    background-image: url(../images/galeria_128.jpg);
	background-repeat: no-repeat;
}

.element-red {
    background-image: url(../images/galeria_clio.jpg);
	background-repeat: no-repeat;
}

.element-pink {
    background-image: url(../images/galeria_tc I.jpg);
	background-repeat: no-repeat;
}

.slider-element {
    float: left;
    width: 33.333%;
}

@-moz-keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}

@-webkit-keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}

@keyframes autoSlider {
    0% {
        margin-left: 0;
    }

    30% {
        margin-left: 0;
    }

    35% {
        margin-left: -100%;
    }

    65% {
        margin-left: -100%;
    }

    70% {
        margin-left: -200%;
    }

    95% {
        margin-left: -200%;
    }

    100% {
        margin-left: 0;
    }
}