/*
    Author: Rolando Caldas Sanchez
    Blog: http://rolandocaldas.com/
    Google+: https://plus.google.com/+RolandoCaldasSanchez
    Linkedin: http://www.linkedin.com/in/rolandocaldas
    Twitter: https://twitter.com/rolando_caldas
    This file is part of an article:
    http://rolandocaldas.com/html5/slider-css-sin-javascript-automatico 
*/

* {
    box-sizing: border-box;
}

body {
    text-align: center;
}

input[name="slider-select-element"] {
    display: none;
}

#slider-arrows {
    margin: -10% auto 0 auto;
    width: 80%;
}

#slider-box {
    -moz-animation: autoSlider 15s infinite linear;
    -o-animation: autoSlider 15s infinite linear;
    -webkit-animation: autoSlider 15s infinite linear;
    animation: autoSlider 15s infinite linear;

    -webkit-transition: all 0.75s ease;
    -moz-transition: all 0.75s ease;
    -ms-transition: all 0.75s ease;
    -o-transition: all 0.75s ease;
    transition: all 0.75s ease;

    height: 100%;
    width: 600%; /* para 3 era 300% */
}

#slider-container {
    height: 20%;
    margin: 0 auto;
    overflow: hidden;
    text-align: left;
    width: 80%;
}

.element-one,
.element-two,
.element-three,
.element-four,
.element-five,
.element-six {
    min-height: 375px; 
    max-height: 100%;
    width: 100%;
}




.element-one {
	background-image:url(../images/linea-mediterranea/image2-1.jpg);
}

.element-two {
	background-image:url(../images/linea-mediterranea/image2-2.jpg);
}

.element-three {
	background-image:url(../images/linea-mediterranea/image2-3.jpg);
}

.element-four {
	background-image:url(../images/linea-mediterranea/image3.jpg);
}

.element-five {
	background-image:url(../images/linea-mediterranea/image1-3.jpg);
}

.element-six {
	background-image:url(../images/linea-mediterranea/image1-4.jpg);
}


.slider-element {
    float: left;
    width: 16.666%; /* por 3 era 33.333% */
}

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

    15% {
        margin-left: 0;
    }

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

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

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

    50% {
        margin-left: -300%;
    }
	
    60% {
        margin-left: -300%;
    }
	
    65% {
        margin-left: -400%;
    }
	
	75% {
        margin-left: -400%;
    }
	
	80% {
        margin-left: -500%;
    }
	
	90% {
        margin-left: -500%;
    }

    100% {
        margin-left: 0;
    }
}

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

    15% {
        margin-left: 0;
    }

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

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

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

    50% {
        margin-left: -300%;
    }
	
    60% {
        margin-left: -300%;
    }
	
    65% {
        margin-left: -400%;
    }
	
	75% {
        margin-left: -400%;
    }
	
	80% {
        margin-left: -500%;
    }
	
	90% {
        margin-left: -500%;
    }

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

    15% {
        margin-left: 0;
    }

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

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

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

    50% {
        margin-left: -300%;
    }
	
    60% {
        margin-left: -300%;
    }
	
    65% {
        margin-left: -400%;
    }
	
	75% {
        margin-left: -400%;
    }
	
	80% {
        margin-left: -500%;
    }
	
	90% {
        margin-left: -500%;
    }

    100% {
        margin-left: 0;
    }
}

/*--responsive--*/
@media (max-width: 1440px){

}
@media (max-width: 1366px){

}
@media (max-width: 1080px){
.about-bottom-left {
  width: 29%;
  float:left
}
.about-bottom-right {
width: 71%;
float:left
}
	
.about-bottom-left img, .about-bottom-left a {
	width: 80%;
	margin-top: 1em;
	margin-left: 1em;
	margin-bottom: 1em;
}
	
#slider-container {
    width: 80%;
}
}
@media (max-width: 1024px){

}
@media (max-width:991px){

}
@media (max-width: 780px){
.about-bottom-left {
  width: 20%;
  float:left
}
.about-bottom-right {
width: 80%;
float:left
}
	
.about-bottom-left img, .about-bottom-left a {
	width: 90%;
	margin-top: 1em;
	margin-left: 1em;
	margin-bottom: 1em;
}
	
#slider-container {
    width: 85%;
}
}
@media (max-width: 640px){

.about-bottom-left {
  width: 20%;
  float:left
}
.about-bottom-right {
width: 80%;
float:left
}
	
.about-bottom-left img, .about-bottom-left a {
	width: 90%;
	margin-top: 1em;
	margin-left: 1em;
	margin-bottom: 1em;
}
#slider-container {
    width: 82%;
}
	
.element-one,
.element-two,
.element-three,
.element-four,
.element-five,
.element-six {
    min-height: 280px; 
    max-height: 100%;
    width: 100%;
}
	
.element-one {
	background-image:url(../images/linea-mediterranea/400/image2-1.jpg);
}

.element-two {
	background-image:url(../images/linea-mediterranea/400/image2-2.jpg);
}

.element-three {
	background-image:url(../images/linea-mediterranea/400/image2-3.jpg);
}

.element-four {
	background-image:url(../images/linea-mediterranea/400/image3.jpg);
}

.element-five {
	background-image:url(../images/linea-mediterranea/400/image1-3.jpg);
}

.element-six {
	background-image:url(../images/linea-mediterranea/400/image1-4.jpg);
}
	
}
@media(max-width:480px){
.about-bottom-left {
  width: 50%;
  float:left
}
.about-bottom-right {
width: 100%;
float:left
}
#slider-container {
    width: 95%;
}
	
.element-one,
.element-two,
.element-three,
.element-four,
.element-five,
.element-six {
    min-height: 230px; 
    max-height: 100%;
    width: 100%;
}
	
.element-one {
	background-image:url(../images/linea-mediterranea/400/image2-1.jpg);
}

.element-two {
	background-image:url(../images/linea-mediterranea/400/image2-2.jpg);
}

.element-three {
	background-image:url(../images/linea-mediterranea/400/image2-3.jpg);
}

.element-four {
	background-image:url(../images/linea-mediterranea/400/image3.jpg);
}

.element-five {
	background-image:url(../images/linea-mediterranea/400/image1-3.jpg);
}

.element-six {
	background-image:url(../images/linea-mediterranea/400/image1-4.jpg);
}
}
@media(max-width:415px){
#slider-container {
    width: 82%;
}
	
.element-one,
.element-two,
.element-three,
.element-four,
.element-five,
.element-six {
    min-height: 210px; 
    max-height: 100%;
    width: 100%;
}
	
.element-one {
	background-image:url(../images/linea-mediterranea/300/image2-1.jpg);
}

.element-two {
	background-image:url(../images/linea-mediterranea/300/image2-2.jpg);
}

.element-three {
	background-image:url(../images/linea-mediterranea/300/image2-3.jpg);
}

.element-four {
	background-image:url(../images/linea-mediterranea/300/image3.jpg);
}

.element-five {
	background-image:url(../images/linea-mediterranea/300/image1-3.jpg);
}

.element-six {
	background-image:url(../images/linea-mediterranea/300/image1-4.jpg);
}
}
@media(max-width:360px){
#slider-container {
    width: 95%;
}
	
.element-one,
.element-two,
.element-three,
.element-four,
.element-five,
.element-six {
    min-height: 188px; 
    max-height: 100%;
    width: 100%;
}
	
.element-one {
	background-image:url(../images/linea-mediterranea/300/image2-1.jpg);
}

.element-two {
	background-image:url(../images/linea-mediterranea/300/image2-2.jpg);
}

.element-three {
	background-image:url(../images/linea-mediterranea/300/image2-3.jpg);
}

.element-four {
	background-image:url(../images/linea-mediterranea/300/image3.jpg);
}

.element-five {
	background-image:url(../images/linea-mediterranea/300/image1-3.jpg);
}

.element-six {
	background-image:url(../images/linea-mediterranea/300/image1-4.jpg);
}
}
@media(max-width:320px){
	
.element-one,
.element-two,
.element-three,
.element-four,
.element-five,
.element-six {
    min-height: 188px; 
    max-height: 100%;
    width: 100%;
}
	
.element-one {
	background-image:url(../images/linea-mediterranea/300/image2-1.jpg);
}

.element-two {
	background-image:url(../images/linea-mediterranea/300/image2-2.jpg);
}

.element-three {
	background-image:url(../images/linea-mediterranea/300/image2-3.jpg);
}

.element-four {
	background-image:url(../images/linea-mediterranea/300/image3.jpg);
}

.element-five {
	background-image:url(../images/linea-mediterranea/300/image1-3.jpg);
}

.element-six {
	background-image:url(../images/linea-mediterranea/300/image1-4.jpg);
}

}