/* 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; position: absolute; font-size: 30px; padding: 5%; background: #b30a35;}
.slides ul li .oferta{border-right: 40px solid #b30a35; width: calc(30% - 40px); }
.oferta .neg{display: block; line-height: 50px; font-size: 35px;}


@media only screen 
and (max-width : 450px){
.slides { height: 260px;}
.slides ul li div {    font-size: 14px; line-height: 20px; bottom: 30px; width: 60%; left: 30%; padding: 3%; opacity: 0.9;}}
@media only screen 
and (min-width : 451px)
and (max-width : 490px) {
.slides { height: 300px;}
.slides ul li div {    font-size: 16px; line-height: 24px; bottom: 30px; width: 50%; left: 40%; padding: 3%;}}
	
@media only screen 
and (min-width : 491px)
and (max-width : 560px) {
.slides { height: 340px;}
.slides ul li div {    font-size: 17px; bottom: 30px; width: 50%; left: 40%; padding: 3%;}}
@media only screen 
and (min-width : 561px)
and (max-width : 650px) {
.slides { height: 350px;}
.slides ul li div {    font-size: 18px; bottom: 40px; width: 50%; left: 40%; padding: 3%;}}
@media only screen 
and (min-width : 651px)
and (max-width : 750px) {
.slides { height: 380px;}
.slides ul li div { font-size: 18px; line-height: 30px; margin-bottom: 6%; bottom: 0; width: 36%; left: 50%; padding: 3% 4%;}}
@media only screen 
and (min-width : 751px)
and (max-width : 850px) {
.slides { height: 400px;}
.slides ul li div { font-size: 20px; line-height: 33px; margin-bottom: 10%; bottom: 0; width: 32%; left: 55%; padding: 3% 4%;}}
@media only screen 
and (min-width : 851px)
and (max-width : 949px) {
.slides { height: 450px;}
.slides ul li div { font-size: 20px; line-height: 33px; margin-bottom: 13%; bottom: 0; width: 40%; left: 50%; padding: 3% 4%;}
}
@media only screen 
and (min-width : 950px)
and (max-width : 1000px) {
.slides { height: 500px;}
.slides ul li div { font-size: 22px; line-height: 34px; margin-bottom: 10%; bottom: 0;width: 33%; left: 55%; padding: 5%;}
}
@media only screen 
and (min-width : 1001px)
and (max-width : 1400px) {
.slides { height: 700px;}
.slides ul li div {font-size: 27px; line-height: 38px; margin-bottom: 5%; bottom: 0; display: block; left: 55%; width: 30%;
	}}
@media only screen 
and (min-width : 1401px){
.slides { height: calc(100vh - 120px);}
.slides ul li div {font-size: 30px; margin-bottom: 5%; bottom: 0; display: block; left: 50%; width: 35%; }}
@media only screen 
and (min-width : 1700px){
.slides ul li div {margin-bottom: 10%; bottom: 0;}}
@media only screen 
and (min-width : 1900px){
.slides ul li div {margin-bottom: 15%; bottom: 0;}}
@media only screen 
and (min-width : 2230px){
.slides ul li div {margin-bottom: 5%; bottom: 0;}}