html, body {
    float: left;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    max-width: 100%;
}

#slider a img {
    border:none;
}

#slider {
    text-align:center;
}

#slider {
    margin:0 auto;
}

#slider input {
    display:none;
}

#slide1:checked ~ #slides .inner {
    margin-left:0;
}

#slide2:checked ~ #slides .inner {
    margin-left:-100%;
}

#slide3:checked ~ #slides .inner {
    margin-left:-200%;
}

#slide4:checked ~ #slides .inner {
    margin-left:-300%;
}

#container {
    width: 100%;
    overflow: hidden;
}

#container article img {
    width:100%;
}

#slides .inner {
  	width: 400%;
  	line-height:0;
  	transition: all 1s ease-out;
}

#slider > #play1:checked ~ #slides #container .inner {
  	animation: cambio 40s infinite ease-out;
	   transition: all 1s ease-out;
}

#slides article {
    width:-webkit-calc(100% / 4);
    width: calc(100% / 4);
    float: left;
}

#commands {
    margin:-21% 0 0 0;
    width:100%;
}

#commands label {
    display: none;
    width: 80px;
    height: 80px;
    opacity: 0.5;
}

#commands label:hover {
    opacity:0.8;
}

#active {
    position:relative;
    z-index:5;
    margin:18% 0 0;
    text-align:center;
}

#active label {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    width:39px;
    height:6px;
    margin: 0 3px;
    background:#3bcff0;
    cursor: pointer;
}

#active label:hover {
    background:#fff;
    opacity: 0.6;
}

#slide1:checked ~ #commands label:nth-child(5),
#slide2:checked ~ #commands label:nth-child(1),
#slide3:checked ~ #commands label:nth-child(2),
#slide4:checked ~ #commands label:nth-child(3),
#slide5:checked ~ #commands label:nth-child(4) {
    float:left;
    margin:0 0 0 -6px;
    display:block;
  }

#slide1:checked ~ #active label:nth-child(1),
#slide2:checked ~ #active label:nth-child(2),
#slide3:checked ~ #active label:nth-child(3),
#slide4:checked ~ #active label:nth-child(4) {
    background:#fff;
    opacity:1;
    border-color:#fff!important;
    border:2px solid #fff;
}

.caption {
    position:absolute;
    line-height:60px;
    margin:3% 0 0 0;
    padding:0;
    opacity:1;
    color:#fff;
    text-transform:none;
    font-family: 'TitilliumWeb-Black', Arial, sans-serif;
    font-weight: 900;
    text-align:left;
    font-size:50px;
    width: -webkit-calc(100% - 24%);
    width: calc(100% - 24%);
}

.caption h1 {
    font-size: 45px;
}

.caption p {
    font-family: 'SourceSansPro-Regular', Arial, sans-serif;
    font-size: 0.4em;
    font-weight: normal;
    line-height: 1.1em;
}

.caption bar {
    display:inline-block;
    padding:10px;
    ackground:transparent;
}

#slides {
    position:relative;
    background:transparent;
}

#slider {
    -webkit-transform:translateZ(0);
    -webkit-transition:all 1s ease-out;
    -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition:all 1s ease-out;
}

#commands label {
    -webkit-transform:translateZ(0);
    -webkit-transition:opacity 0.2s ease-out;
    -moz-transition:opacity 0.2s ease-out;
    -o-transition:opacity 0.2s ease-out;
    transition:opacity 0.2s ease-out;
}

#slide1:checked ~ #slides article:nth-child(1) .caption,
#slide2:checked ~ #slides article:nth-child(2) .caption,
#slide3:checked ~ #slides article:nth-child(3) .caption,
#slide4:checked ~ #slides article:nth-child(4) .caption {
    opacity:1;
    -webkit-transition:all 1s ease-out 0.6s;
    -moz-transition:all 1s ease-out 0.6s;
    -o-transition:all 1s ease-out 0.6s;
    transition:all 1s ease-out 0.6s;
}

#slider {
    max-width:100%;
}

@media only screen and (max-width:1280px){
	.caption {
      position:absolute;
      line-height:60px;
      margin:5% 0 0 10%;
      padding:0;
      opacity:1;
      color:#fff;
      text-transform:none;
      font-family: 'TitilliumWeb-Black', Arial, sans-serif;
      font-weight: 900;
      text-align:left;
      font-size:50px;
  }
	.caption h1 {
      font-size:40px;
  }
}

@media only screen and (max-width:1024px){
	.caption {
      margin:2% 0 0 10%;
  }
	.caption h1 {
      font-size:30px;
  }
	.caption p {
      font-size:0.3em;
      line-height: 1em;
  }
}

@media only screen and (min-width:850px){
  body{padding:0}
}

@media only screen and (max-width:850px) and (min-width:450px){
  #slider #commands{
      margin:-25% 0 0 5%;
      width:90%;
      height:50px
  }
  #slider #commands label{
      -moz-transform:scale(0.9);
      -webkit-transform:scale(0.9);
      -o-transform:scale(0.9);
      -ms-transform:scale(0.9);
      transform:scale(0.9);
  }
	#container article img {
      width:auto;
      height: 300px;
      margin-right:100px;
  }
	.caption{margin:5% 0 0 15%;}
	.caption h1 {font-size:30px;}
	.caption p {font-size:12px;line-height: 14px;}
  #slider #slides{
      padding:2px 0;
      -webkit-border-radius:0;
      -moz-border-radius:0;
      border-radius:0;
  }
  #slider #active{
      margin:15% 0 0;
  }
}


@media only screen and (max-width:450px){
  #slider #commands{
      margin:-28% 0 0 1%;
      width:100%;
      height:70px;
  }
  #slider #active{
      margin:2% 0 0;
  }
  #slider #slides{
      padding:2px 0;
      -webkit-border-radius:0;
      -moz-border-radius:0;
      border-radius:0;
  }
	#container article img {
      width:auto;
      height: 300px;
  }
	.caption{margin:10% 0 0 0;}
	.caption h1 {font-size:35px;}
	.caption p {font-size:14px;line-height: 14px;}
  #slider #commands label{
      -moz-transform:scale(0.7);
      -webkit-transform:scale(0.7);
      -o-transform:scale(0.7);
      -ms-transform:scale(0.7);
      transform:scale(0.7);
  }
}



@keyframes cambio {
	0% {margin-left: 0;}
	23% {margin-left: 0;}

	25% {margin-left: -100%;}
	48% {margin-left: -100%;}

	50% {margin-left: -200%;}
	73% {margin-left: -200%;}

	75% {margin-left: -300%;}
	95% {margin-left: -300%;}
}



/* Calculate AUTOPLAY for BULLETS */
@keyframes bullet {
 	0% { background: white; }
	23% { background: white; }

	25% {background: none;}
	48% {background: none;}

	50% {background: none;}
	73% {background: none;}

	75% {background: none;}
	95% {background: none;}
}

#play1:checked ~ #active label:nth-child(1) {
  animation: bullet 40s infinite 0s;
}

#play1:checked ~ #active label:nth-child(2) {
  animation: bullet 40s infinite 10s;
}

#play1:checked ~ #active label:nth-child(3) {
  animation: bullet 40s infinite 20s;
}

#play1:checked ~ #active label:nth-child(4) {
  animation: bullet 40s infinite 30s;
}
/* Calculate AUTOPLAY for BULLETS - END */