.img-frame{
       position: relative;
       width: 90%;
       height: 335px;
       overflow: hidden;
       margin: 20px;
    }
    .img-frame{
       width: 90%;
       height: 335px;
    }
    .img-01,
	.img-02,
	.img-03,
	.img-04,
	.img-05 {
       position: absolute;
       top:0;
       left:0;
       width: 100%;
       height: 100%;
       background-size: cover;
       background-repeat: no-repeat;
    }
    .img-01{
       background-image:url(../../img/gallery3/photos/sample-01.jpg);
	   animation: slide-animation-01 24s infinite;
    }
    .img-02{
       background-image:url(../../img/gallery3/photos/sample-02.jpg);
	   animation: slide-animation-02 24s infinite;
    }
    .img-03{
       background-image:url(../../img/gallery3/photos/sample-03.jpg);
       animation: slide-animation-03 24s infinite;
    }
    .img-04{
       background-image:url(../../img/gallery3/photos/sample-04.jpg);
       animation: slide-animation-04 24s infinite;
    }
    .img-05{
       background-image:url(../../img/gallery3/photos/sample-05.jpg);
       animation: slide-animation-05 24s infinite;
    }
    @keyframes slide-animation-01 {
	0% {opacity: 0;}
	15% {opacity: 1;}
	35% {opacity: 0;}
	55% {opacity: 0;}
	75% {opacity: 0;}
	95% {opacity: 0;}
	}
    @keyframes slide-animation-02 {
	0% {opacity: 0;}
	15% {opacity: 0;}
	35% {opacity: 1;}
	55% {opacity: 0;}
	75% {opacity: 0;}
	95% {opacity: 0;}
	}
    @keyframes slide-animation-03 {
	0% {opacity: 0;}
	15% {opacity: 0;}
	35% {opacity: 0;}
	55% {opacity: 1;}
	75% {opacity: 0;}
	95% {opacity: 0;}
	}
    @keyframes slide-animation-04 {
	0% {opacity: 0;}
	15% {opacity: 0;}
	35% {opacity: 0;}
	55% {opacity: 0;}
	75% {opacity: 1;}
	95% {opacity: 0;}
	}
    @keyframes slide-animation-05 {
	0% {opacity: 0;}
	15% {opacity: 0;}
	35% {opacity: 0;}
	55% {opacity: 0;}
	75% {opacity: 0;}
	95% {opacity: 1;}
	}