/* slider */
@-webkit-keyframes fading { 
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes fading { 
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

.container_slider { position: relative; width: 100%; margin: 150px auto 0 auto; background: #333; z-index: 0; }

.container_slider:hover .prev, .container_slider:hover .next { opacity: 1; }

.container_slider ul { list-style: none; }

.container_slider .slider { width: 100%; -webkit-animation: fading 20s infinite; animation: fading 20s infinite; }
.container_slider .slider img { width: 100%; }
.container_slider .slider .destaque { position: absolute; left: 70px; bottom: 70px; }
.container_slider .slider .destaque h1 { color: #EEEEEE; background: rgba(0, 0, 0, .8); display: table; padding: 5px; font-size: 50px; }
.container_slider .slider .destaque p  { color: #EEEEEE; background: rgba(0, 0, 0, .8); display: table; padding: 5px; font-size: 20px; }

.container_slider .container_bullets { position: absolute; left: 50%; transform: translate(-50%,-200%); }

.container_slider .bullets { background: #D6D6D6; border: 2px solid #D6D6D6; display: inline-block; padding: 3px; text-align: center; }
.container_slider .bullets:hover { background: #CA0030; cursor: pointer; }

.container_slider .bullet_activated { background: #CA0030; }

.container_slider .prev { position: absolute; top: 60%; left: 0%; transform: translate(25%,-150%); opacity: 0; }
.container_slider .next { position: absolute; top: 60%; right: 0%; transform: translate(-25%,-150%); opacity: 0; }

.container_slider .button_floating { 
    font-size: 25px; 
    color: #CA0030; background: #D6D6D6; 
    width: 40px; height: 40px; 
    line-height: 40px;
    display: inline-block; 
    text-align: center; 
    overflow: hidden;
    cursor: pointer;
}

.container_slider .button_floating:hover { color: #D6D6D6; background: #CA0030; }
/* slider */
@media only screen and (max-width: 930px){
    .container_slider .slider .destaque { top: 10px; left: 20px; bottom: inherit; }
    .container_slider .slider .destaque h1 { font-size: 35px; }
    .container_slider .slider .destaque p  { font-size: 15px; }
    
    .container_slider { margin: 0 auto; }
}
@media only screen and (max-width: 640px){
    /*** slider ***/
    .container_slider .prev, .container_slider .next { display: none; }
    .container_slider .slider .destaque { display: none; }
    /*** slider ***/
}