#slider
{
    width: 100%;
    overflow: hidden;
}
#slider figure
{
position: relative;
width: 500%;
margin: 0;
padding: 0;
font-size: 0;
left: 0;
animation: 15s slidy linear;
}
figure img
{
    width: 20%;
    height: auto;
}
@keyframes slidy { 
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; } 
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}


.slider
{
    width: 520px;
    overflow: hidden;
    display: inline-block;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -o-transform: skewX(-20deg);
    transform: skewX(-20deg);
    
    -webkit-transition: width 1.2s ease-in-out;
    -moz-transition: width 1.2s ease-in-out;
    -ms-transition: width 1.2s ease-in-out;
    -o-transition: width 1.2s ease-in-out;
    transition: width 1.2s ease-in-out;
    margin-left: -76px;
    border-right: 10px solid ghostwhite;
    pointer-events: none;
}
.box
{
    margin-left: 35px;
    width: 990px;
    height: 380px;
    border-radius: .5em;
}
.sunset
{
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
    background: url(../images/banners/victory_banner02.jpg) no-repeat;
    margin-left: 76px;
    pointer-events: auto;
}
.sunrise
{
    background:  url(../images/banners/victory_banner04.jpg) no-repeat;
    position: absolute;
    box-shadow: 0 0 10px rgba(0, 0, 0, .7);
}
.slider:hover
{
    width: 1024px;
}
.sunrise:hover + .slider
{
    width: 150px;
}

/*#slider
{
    width: 100%;
    height: 400px;
    margin: 0px;
    padding: 0px;
}
#slider li
{
    list-style: none;
    position: absolute;
}
#slider input {
    display: none;
}
#slider li:nth-child(1) label {
    left: .5em;
}
#slider li:nth-child(2) label {
    left: 2em;
}
#slider li:nth-child(3) label {
    left: 3.5em;
}
#slider li:nth-child(4) label {
    left: 5em;
}
#slider label {
    background-color: #111;
    bottom: .5em;
    cursor: pointer;
    display: block;
    height: .5em;
    position: absolute;
    width: .5em;
    z-index: 10;
    visibility: hidden;
}
#slider:hover label{
    visibility: visible;
}
#slider img {
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
}
#slider li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}*/