/* fade slider */
.slides {
  width: 100%; overflow: hidden; position: relative; margin-bottom: 40px;}
.slides ul, .slides ul li, .slides ul li img{width: 100%;}
.slides ul { list-style: none;  position: relative;}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
  0% {opacity: 0;}
  6% {opacity: 1;}
  24% {opacity: 1;}
  30% {opacity: 0;}
  100% {opacity: 0;}
}
@-moz-keyframes anim_slides {
  0% {opacity: 0;}
  6% {opacity: 1;}
  24% {opacity: 1;}
  30% {opacity: 0;}
  100% {opacity: 0;}
}
.slides ul li {
  opacity: 0; position: absolute; top: 0;

  /* css3 animation */
  -webkit-animation-name: anim_slides;
  -webkit-animation-duration: 24s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-name: anim_slides;
  -moz-animation-duration: 24s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: normal;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;}
/* css3 delays */
.slides ul li:nth-child(2),
.slides ul li:nth-child(2) div {
  -webkit-animation-delay: 6s; -moz-animation-delay: 6s;}
.slides ul li:nth-child(3),
.slides ul li:nth-child(3) div {
  -webkit-animation-delay: 12s; -moz-animation-delay: 12s;}
.slides ul li:nth-child(4),
.slides ul li:nth-child(4) div {
  -webkit-animation-delay: 18s; -moz-animation-delay: 18s;}
.slides ul li img {
  display: block; width: 100%;}
.slides ul li div {
  color: #fff; left: 0; margin: 0 auto; position: absolute; font-size: 20px; text-align: right; padding: 50px; border-right: 1px solid #fff; background: url("../imagenes/negro40.png")}


@media only screen 
and (max-width : 450px){
.slides { height: 220px;}
.slides ul li div {    font-size: 16px; bottom: 100px; width: 50%; left: 40%; padding: 3%;}}
@media only screen 
and (min-width : 451px)
and (max-width : 490px) {
.slides { height: 230px;}
.slides ul li div {    font-size: 17px; bottom: 100px; width: 50%; left: 40%; padding: 3%;}}
	
@media only screen 
and (min-width : 491px)
and (max-width : 560px) {
.slides { height: 270px;}
.slides ul li div {    font-size: 17px; bottom: 100px; width: 50%; left: 40%; padding: 3%;}}
@media only screen 
and (min-width : 561px)
and (max-width : 650px) {
.slides { height: 285px;}
.slides ul li div {    font-size: 18px; bottom: 100px; width: 50%; left: 40%; padding: 3%;}}
@media only screen 
and (min-width : 651px)
and (max-width : 750px) {
.slides { height: 305px;}
.slides ul li div { font-size: 18px; line-height: 30px; bottom: 100px; width: 36%; left: 50%; padding: 3% 4%;}}
@media only screen 
and (min-width : 751px)
and (max-width : 850px) {
.slides { height: 340px;}
.slides ul li div { font-size: 20px; line-height: 33px; bottom: 130px; width: 32%; left: 55%; padding: 3% 4%;}}
@media only screen 
and (min-width : 851px)
and (max-width : 949px) {
.slides { height: 350px;}
.slides ul li div { font-size: 20px; line-height: 33px; bottom: 160px; width: 28%; left: 60%; padding: 3% 4%;}
}
@media only screen 
and (min-width : 950px)
and (max-width : 1000px) {
.slides { height: 370px;}
.slides ul li div { font-size: 20px; line-height: 40px; bottom: 50px; width: 28%; left: 60%; padding: 5%;}
}
@media only screen 
and (min-width : 1001px){
.slides { height: 400px;}
.slides ul li div {  font-size: 22px; line-height: 40px; bottom: 20%; left: 54%; width: 31%; }}
@media only screen 
and (min-width : 1200px){
.slides { height: 455px;}}
@media only screen 
and (min-width : 1300px){
.slides { height: 495px;}}
@media only screen 
and (min-width : 1440px){
	.slides { height: 550px;}}
@media only screen 
and (min-width : 1600px){
.slides { height: 609px;}
.slides ul li div {  font-size: 28px; line-height: 50px; bottom: 40%; left: 72%; width: 20%; }}
@media only screen 
and (min-width : 1700px){
.slides { height: 650px;}}
@media only screen 
and (min-width : 1800px){
.slides { height: 685px;}}
@media only screen 
and (min-width : 1900px){
.slides { height: 725px;}}
@media only screen 
and (min-width : 2000px){
.slides { height: 750px;}}
@media only screen 
and (min-width : 2150px){
.slides { height: 825px;}}