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

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

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

        height: 100%;
        width: 300%;
    }

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

    .element-1,
    .element-2,
    .element-3 {
        min-height: 450px;
        max-height: 500px;
        width: 100%;
        position: relative;
    }
    .textslider{
        width: 45%;
        height:25%;
        position: absolute;
        background: transparent;
        top: 35%;
        right:0;          
        background: #fff; 

    }


    .textslider h3{
        font-size: 1.4em;
        /*text-shadow: -1px -1px 1px #F7D13A, 1px 1px 1px #F7D13A, -1px 1px 1px #F7D13A, 1px -1px 1px #F7D13A;*/     
        color:#000;
       
        text-align: justify;
       
    }

      .textslider p{
         font-size: 1.1em;
        color:#000;
        margin:2px;
        margin-left:2.1%;
        text-align: justify;
    }

    .element-1 {
        
        background-image: url(img/1.jpg);

    }

    .element-2 {
      
        background-image: url(img/2.jpg); 
    }

    .element-3 {
       
        background-image: url(img/3.jpg); 

    }

    .slider-element {
        float: left;
        width: 33.333%;
    }
    .imgslider{
        width: 100%;
         max-height: 550px;
    }

    @-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;
        }
    }

    @media(max-width: 900px){
        .textslider{
        width: 100%;
        height:30%;
        position: absolute;
        top: 69%;        
        
    }
     .imgslider{
        width: 100%;
        min-width: 500px;
        max-height: 500px;

    }

    

    }

        @media(max-width: 750px){
        .textslider{
        width: 100%;
        height:30%;
        position: absolute;
        top: 20%;        
       
    }
    .textslider h3{
        font-size: 1em;
        text-align: center;
    }

 .imgslider{
        width: 100%;
        min-width: 250px;
        max-height: 250px;

    }
       
    .element-1,
    .element-2,
    .element-3 {
        
       
     max-height: 250px;
    }

    #slider-container{
    max-height:250px ;
 }
    }

           @media(max-width: 550px){

            .textslider p{
                display: none;
            }

            .textslider{
                top:42%;
            }
 #slider-container{
    max-height:250px ;
 }

 }