.roto
{
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0px solid rgba(0, 0, 0, 0.15);
    /*	box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25); */
    position: absolute;
    min-height: 100%;
    height: 100%;
    max-height: 100%;
    min-width: 100%;
    width: 100%;
}

.roto .roto-main-container
{
    list-style: none;
    position: relative;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 1000%;
    margin: 0;
    padding: 0;
    font-family:  acherus, verdana, sans-serif;
    color: #666;
    -moz-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    transition: left .3s linear;
}

.roto .roto-container
{
    float: left;
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 10%;
    max-width: 10%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    /*border-bottom: 1px solid #ccc; */
}

.roto img
{
	border-width: 0px;
}

.roto h4
{
    padding: 4px;
	margin: 0px;
	border: 0px;
    color: #0A7FAD;
    text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.50);
	font-size: 15px;
	font-weight: bold;
}

.roto p
{
    padding-left: 10px;
	margin: 0px;
	border: 0px;
	font-size: 13px;
    /*font-weight: bold;*/
    /*line-height: 100%;*/
    /*text-align: justify;*/
}

.roto input 
{
    display: none;
}

.roto label 
{
    background-color: rgba(255, 255, 255, 0.3);
    border: 3px solid #888;
    bottom: 20px;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: 8px;
    left: 0px;
    opacity: 0;
    position: absolute;
    margin-left: 20px;
    -moz-transition: .25s;
    -webkit-transition: .25s;
    transition: .25s;
    width: 8px;
    visibility: hidden;
    z-index: 9;
}

.roto input:checked + label 
{
    background-color: #444;
}

@keyframes slide-animation2 
{
    0% {opacity: 0;}
    2.5% {opacity: 1;}
    45% {left: 0%; opacity: 1;}
    47.5% {opacity: 0.6;}
    50% {left: -100%; opacity: 1;}
    95% {left: -100%; opacity: 1;}
    98% {left: -100%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@-moz-keyframes slide-animation2 
{
    0% {opacity: 0;}
    2.5% {opacity: 1;}
    45% {left: 0%; opacity: 1;}
    47.5% {opacity: 0.6;}
    50% {left: -100%; opacity: 1;}
    95% {left: -100%; opacity: 1;}
    98% {left: -100%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@-webkit-keyframes slide-animation2 
{
    0% {opacity: 0;}
    2.5% {opacity: 1;}
    45% {left: 0%; opacity: 1;}
    47.5% {opacity: 0.6;}
    50% {left: -100%; opacity: 1;}
    95% {left: -100%; opacity: 1;}
    98% {left: -100%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@keyframes slide-animation3 
{
    0% {opacity: 0;}
    2% {opacity: 1;}
    29% {left: 0%; opacity: 1;}
    31% {opacity: 0.6;}
    33% {left: -100%; opacity: 1;}
    62% {left: -100%; opacity: 1;}
    64% {opacity: 0.6;}
    66% {left: -200%; opacity: 1;}
    95% {left: -200%; opacity: 1;}
    98% {left: -200%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@-moz-keyframes slide-animation3 
{
    0% {opacity: 0;}
    2% {opacity: 1;}
    29% {left: 0%; opacity: 1;}
    31% {opacity: 0.6;}
    33% {left: -100%; opacity: 1;}
    62% {left: -100%; opacity: 1;}
    64% {opacity: 0.6;}
    66% {left: -200%; opacity: 1;}
    95% {left: -200%; opacity: 1;}
    98% {left: -200%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@-webkit-keyframes slide-animation3 
{
    0% {opacity: 0;}
    2% {opacity: 1;}
    29% {left: 0%; opacity: 1;}
    31% {opacity: 0.6;}
    33% {left: -100%; opacity: 1;}
    62% {left: -100%; opacity: 1;}
    64% {opacity: 0.6;}
    66% {left: -200%; opacity: 1;}
    95% {left: -200%; opacity: 1;}
    98% {left: -200%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@keyframes slide-animation4 
{
    0% {opacity: 0;}
    2% {opacity: 1;}
    20% {left: 0%; opacity: 1;}
    22.5% {opacity: 0.6;}
    25% {left: -100%; opacity: 1;}
    45% {left: -100%; opacity: 1;}
    47.5% {opacity: 0.6;}
    50% {left: -200%; opacity: 1;}
    70% {left: -200%; opacity: 1;}
    72.5% {opacity: 0.6;}
    75% {left: -300%; opacity: 1;}
    95% {left: -300%; opacity: 1;}
    98% {left: -300%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@-moz-keyframes slide-animation4 
{
    0% {opacity: 0;}
    2% {opacity: 1;}
    20% {left: 0%; opacity: 1;}
    22.5% {opacity: 0.6;}
    25% {left: -100%; opacity: 1;}
    45% {left: -100%; opacity: 1;}
    47.5% {opacity: 0.6;}
    50% {left: -200%; opacity: 1;}
    70% {left: -200%; opacity: 1;}
    72.5% {opacity: 0.6;}
    75% {left: -300%; opacity: 1;}
    95% {left: -300%; opacity: 1;}
    98% {left: -300%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@-webkit-keyframes slide-animation4 
{
    0% {opacity: 0;}
    2% {opacity: 1;}
    20% {left: 0%; opacity: 1;}
    22.5% {opacity: 0.6;}
    25% {left: -100%; opacity: 1;}
    45% {left: -100%; opacity: 1;}
    47.5% {opacity: 0.6;}
    50% {left: -200%; opacity: 1;}
    70% {left: -200%; opacity: 1;}
    72.5% {opacity: 0.6;}
    75% {left: -300%; opacity: 1;}
    95% {left: -300%; opacity: 1;}
    98% {left: -300%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@keyframes slide-animation5 
{
    0% {opacity: 0;}
    1.5% {opacity: 1;}
    17% {left: 0%; opacity: 1;}
    18.5% {opacity: 0.6;}
    20% {left: -100%; opacity: 1;}
    37% {left: -100%; opacity: 1;}
    38.5% {opacity: 0.6;}
    40% {left: -200%; opacity: 1;}
    57% {left: -200%; opacity: 1;}
    58.5% {opacity: 0.6;}
    60% {left: -300%; opacity: 1;}
    77% {left: -300%; opacity: 1;}
    78.5% {opacity: 0.6;}
    80% {left: -400%; opacity: 1;}
    97% {left: -400%; opacity: 1;}
    98.5% {left: -400%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@-moz-keyframes slide-animation5 
{
    0% {opacity: 0;}
    1.5% {opacity: 1;}
    17% {left: 0%; opacity: 1;}
    18.5% {opacity: 0.6;}
    20% {left: -100%; opacity: 1;}
    37% {left: -100%; opacity: 1;}
    38.5% {opacity: 0.6;}
    40% {left: -200%; opacity: 1;}
    57% {left: -200%; opacity: 1;}
    58.5% {opacity: 0.6;}
    60% {left: -300%; opacity: 1;}
    77% {left: -300%; opacity: 1;}
    78.5% {opacity: 0.6;}
    80% {left: -400%; opacity: 1;}
    97% {left: -400%; opacity: 1;}
    98.5% {left: -400%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@-webkit-keyframes slide-animation5 
{
    0% {opacity: 0;}
    1.5% {opacity: 1;}
    17% {left: 0%; opacity: 1;}
    18.5% {opacity: 0.6;}
    20% {left: -100%; opacity: 1;}
    37% {left: -100%; opacity: 1;}
    38.5% {opacity: 0.6;}
    40% {left: -200%; opacity: 1;}
    57% {left: -200%; opacity: 1;}
    58.5% {opacity: 0.6;}
    60% {left: -300%; opacity: 1;}
    77% {left: -300%; opacity: 1;}
    78.5% {opacity: 0.6;}
    80% {left: -400%; opacity: 1;}
    97% {left: -400%; opacity: 1;}
    98.5% {left: -400%; opacity: 0;} 
    100% {left: 0%; opacity: 0;}
}

@keyframes bullet-animation2
{
    0%, 50%	{background-color: #444;}
    51%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@-moz-keyframes bullet-animation2
{
    0%, 50%	{background-color: #444;}
    51%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@-webkit-keyframes bullet-animation2
{
    0%, 50%	{background-color: #444;}
    51%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@keyframes bullet-animation3
{
    0%, 33%	{background-color: #444;}
    34%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@-moz-keyframes bullet-animation3
{
    0%, 33%	{background-color: #444;}
    34%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@-webkit-keyframes bullet-animation3
{
    0%, 33%	{background-color: #444;}
    34%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@keyframes bullet-animation4
{
    0%, 25%	{background-color: #444;}
    26%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@-moz-keyframes bullet-animation4
{
    0%, 25%	{background-color: #444;}
    26%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@-webkit-keyframes bullet-animation4
{
    0%, 25%	{background-color: #444;}
    26%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@keyframes bullet-animation5
{
    0%, 20%	{background-color: #444;}
    21%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@-moz-keyframes bullet-animation5
{
    0%, 20%	{background-color: #444;}
    21%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

@-webkit-keyframes bullet-animation5
{
    0%, 20%	{background-color: #444;}
    21%, 100% {background-color: rgba(255, 255, 255, 0.3);}
}

.roto.timing2 .sinapl:checked ~ .roto-main-container
{
    -moz-animation: slide-animation2 10000ms infinite;
    -webkit-animation: slide-animation2 10000ms infinite;
    animation: slide-animation2 10000ms infinite;
}

.roto.timing3 .sinapl:checked ~ .roto-main-container
{
    -moz-animation: slide-animation3 15000ms infinite;
    -webkit-animation: slide-animation3 15000ms infinite;
    animation: slide-animation3 15000ms infinite;
}

.roto.timing4 .sinapl:checked ~ .roto-main-container
{
    -moz-animation: slide-animation4 20000ms infinite;
    -webkit-animation: slide-animation4 20000ms infinite;
    animation: slide-animation4 20000ms infinite;
}

.roto.timing5 .sinapl:checked ~ .roto-main-container
{
    -moz-animation: slide-animation5 25000ms infinite;
    -webkit-animation: slide-animation5 25000ms infinite;
    animation: slide-animation5 25000ms infinite;
}

.roto.timing2 .sinapl:checked ~ .slb1 
{
    -moz-animation: bullet-animation2 10000ms infinite 0ms;
    -webkit-animation: bullet-animation2 10000ms infinite 0ms;
    animation: bullet-animation2 10000ms infinite 0ms;
}

.roto.timing2 .sinapl:checked ~ .slb2 
{
    -moz-animation: bullet-animation2 10000ms infinite 5000ms;
    -webkit-animation: bullet-animation2 10000ms infinite 5000ms;
    animation: bullet-animation2 10000ms infinite 5000ms;
}

.roto.timing3 .sinapl:checked ~ .slb1 
{
    -moz-animation: bullet-animation3 15000ms infinite 0ms;
    -webkit-animation: bullet-animation3 15000ms infinite 0ms;
    animation: bullet-animation3 15000ms infinite 0ms;
}

.roto.timing3 .sinapl:checked ~ .slb2 
{
    -moz-animation: bullet-animation3 15000ms infinite 5000ms;
    -webkit-animation: bullet-animation3 15000ms infinite 5000ms;
    animation: bullet-animation3 15000ms infinite 5000ms;
}

.roto.timing3 .sinapl:checked ~ .slb3 
{
    -moz-animation: bullet-animation3 15000ms infinite 10000ms;
    -webkit-animation: bullet-animation3 15000ms infinite 10000ms;
    animation: bullet-animation3 15000ms infinite 10000ms;
}

.roto.timing4 .sinapl:checked ~ .slb1 
{
    -moz-animation: bullet-animation4 20000ms infinite 0ms;
    -webkit-animation: bullet-animation4 20000ms infinite 0ms;
    animation: bullet-animation4 20000ms infinite 0ms;
}

.roto.timing4 .sinapl:checked ~ .slb2 
{
    -moz-animation: bullet-animation4 20000ms infinite 5000ms;
    -webkit-animation: bullet-animation4 20000ms infinite 5000ms;
    animation: bullet-animation4 20000ms infinite 5000ms;
}

.roto.timing4 .sinapl:checked ~ .slb3 
{
    -moz-animation: bullet-animation4 20000ms infinite 10000ms;
    -webkit-animation: bullet-animation4 20000ms infinite 10000ms;
    animation: bullet-animation4 20000ms infinite 10000ms;
}

.roto.timing4 .sinapl:checked ~ .slb4 
{
    -moz-animation: bullet-animation4 20000ms infinite 15000ms;
    -webkit-animation: bullet-animation4 20000ms infinite 15000ms;
    animation: bullet-animation4 20000ms infinite 15000ms;
}

.roto.timing5 .sinapl:checked ~ .slb1 
{
    -moz-animation: bullet-animation5 25000ms infinite 0ms;
    -webkit-animation: bullet-animation5 25000ms infinite 0ms;
    animation: bullet-animation5 25000ms infinite 0ms;
}

.roto.timing5 .sinapl:checked ~ .slb2 
{
    -moz-animation: bullet-animation5 25000ms infinite 5000ms;
    -webkit-animation: bullet-animation5 25000ms infinite 5000ms;
    animation: bullet-animation5 25000ms infinite 5000ms;
}

.roto.timing5 .sinapl:checked ~ .slb3 
{
    -moz-animation: bullet-animation5 25000ms infinite 10000ms;
    -webkit-animation: bullet-animation5 25000ms infinite 10000ms;
    animation: bullet-animation5 25000ms infinite 10000ms;
}

.roto.timing5 .sinapl:checked ~ .slb4 
{
    -moz-animation: bullet-animation5 25000ms infinite 15000ms;
    -webkit-animation: bullet-animation5 25000ms infinite 15000ms;
    animation: bullet-animation5 25000ms infinite 15000ms;
}

.roto.timing5 .sinapl:checked ~ .slb5 
{
    -moz-animation: bullet-animation5 25000ms infinite 20000ms;
    -webkit-animation: bullet-animation5 25000ms infinite 20000ms;
    animation: bullet-animation5 25000ms infinite 20000ms;
}

.roto .sin1:checked ~ .roto-main-container 
{
    /*animation-play-state: paused;*/
    /*transform: translateX(0%);*/
    left: 0%;
    -moz-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    transition: left .3s linear;
}

.roto .sin2:checked ~ .roto-main-container 
{
    /*animation-play-state: paused;*/
    /*transform: translateX(-10%); */
    left: -100%;
    -moz-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    transition: left .3s linear;
}

.roto .sin3:checked ~ .roto-main-container 
{
    /*animation-play-state: paused;*/
    /*transform: translateX(-10%); */
    left: -200%;
    -moz-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    transition: left .3s linear;
}

.roto .sin4:checked ~ .roto-main-container 
{
    /*animation-play-state: paused;*/
    /*transform: translateX(-10%); */
    left: -300%;
    -moz-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    transition: left .3s linear;
}

.roto .sin5:checked ~ .roto-main-container 
{
    /*animation-play-state: paused;*/
    /*transform: translateX(-10%); */
    left: -400%;
    -moz-transition: left .3s linear;
    -webkit-transition: left .3s linear;
    transition: left .3s linear;
}

.roto.timing2:hover .slb1,
.roto.timing3:hover .slb1,
.roto.timing4:hover .slb1,
.roto.timing5:hover .slb1  
{
    left: 0px;
    opacity: 1;
    visibility: visible;
}

.roto.timing2:hover .slb2,
.roto.timing3:hover .slb2,
.roto.timing4:hover .slb2,
.roto.timing5:hover .slb2 
{
    left: 20px;
    opacity: 1;
    visibility: visible;
}

.roto.timing3:hover .slb3,
.roto.timing4:hover .slb3,
.roto.timing5:hover .slb3 
{
    left: 40px;
    opacity: 1;
    visibility: visible;
}

.roto.timing4:hover .slb4,
.roto.timing5:hover .slb4 
{
    left: 60px;
    opacity: 1;
    visibility: visible;
}

.roto.timing5:hover .slb5 
{
    left: 80px;
    opacity: 1;
    visibility: visible;
}