/* slideshow frame */

#show { position: relative; height: auto; }

#show img { height: 100%; }

#show .sl { position: absolute; top: 200px; right: 50px; width: 500px; height: auto; overflow: hidden; text-align: center; }

#show .sl p { color: #333; text-align: center; font-size: 36px; font-weight: 300; }

/* single image - copy from here */

@media screen and (max-width:480px) {

#show { height: auto !important; clear: both; }

#show img { width: 100% !important; height: auto !important; }

#show .sl { width: 50%; position: absolute; top: 40% !important; right: 0 !important; }

#show .sl p { font-size: 100%; text-align:center; }
}
@media screen and (min-width:481px) and (max-width:768px) {

#show { height: auto !important; clear: both; }

#show img { width: 100%; }

#show .sl { width: 50%; position: absolute; top: 40% !important; right: 0 !important;  }

#show .sl p { font-size: 22px; text-align:center; }
}
@media screen and (min-width:769px) and (max-width:992px) {

#show { height: 250px !important; }

#show .sl { width: 300px; position: absolute; top: 100px !important; right: 50px; }

#show .sl p { font-size: 24px; }
}
@media screen and (max-width:1200px) {

#show { height: 300px; }

#show .sl { position: absolute; top: 150px; right: 50px; }
}

.slide1 { animation: slide1 20s infinite; -o-animation: slide1 20s infinite; -moz-animation: slide1 20s infinite; -webkit-animation: slide1 20s infinite; }
 @-webkit-keyframes 
slide1 { 0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes 
slide1 { 0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes 
slide1 { 0% {
opacity: 0;
}
10% {
opacity: 1;
}
20% {
opacity: 1;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}

/* 
to that moment 
then change the number on img{}
also you have to make it right with % (remember!)
*/
.slide2 { animation: slide2 20s infinite; -o-animation: slide2 20s infinite; -moz-animation: slide2 20s infinite; -webkit-animation: slide2 20s infinite; }

.slide3 { animation: slide3 20s infinite; -o-animation: slide3 20s infinite; -moz-animation: slide3 20s infinite; -webkit-animation: slide3 20s infinite; }

.slide4 { animation: slide4 20s infinite; -o-animation: slide4 20s infinite; -moz-animation: slide4 20s infinite; -webkit-animation: slide4 20s infinite; }

.slide5 { animation: slide5 20s infinite; -o-animation: slide5 20s infinite; -moz-animation: slide5 20s infinite; -webkit-animation: slide5 20s infinite; }

/* keyframing */

@-webkit-keyframes 
slide2 { 0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes 
slide2 { 0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes 
slide2 { 0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 1;
}
40% {
opacity: 1;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-webkit-keyframes 
slide3 { 0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes 
slide3 { 0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes 
slide3 { 0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-webkit-keyframes 
slide4 { 0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @keyframes 
slide4 { 0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-moz-keyframes 
slide4 { 0% {
opacity: 0;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 1;
}
80% {
opacity: 1;
}
90% {
opacity: 0;
}
100% {
opacity: 0;
}
}
 @-webkit-keyframes 
slide5 { 0% {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
 @keyframes 
slide5 { 0% {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}
 @-moz-keyframes 
slide5 { 0% {
opacity: 1;
}
10% {
opacity: 0;
}
20% {
opacity: 0;
}
30% {
opacity: 0;
}
40% {
opacity: 0;
}
50% {
opacity: 0;
}
60% {
opacity: 0;
}
70% {
opacity: 0;
}
80% {
opacity: 0;
}
90% {
opacity: 1;
}
100% {
opacity: 1;
}
}