.item-1,
.item-2,
.item-3 {
    position: absolute;
    display: block;
    top: 5em;
    width: 95%;
    font-size: 15px;
    animation-duration: 15s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}
.slide-text-box {
    position:initial;
}

.itembg {
    color: #088355;
    padding: 1%;
    background-color: #d1ffee;
    border-radius: 4%;
    cursor:pointer;
    
    /*box-shadow: rgb(8 131 85) 0px 8px 24px, rgb(17 17 26 / 10%) 0px 16px 56px, rgb(17 17 26 / 10%) 0px 24px 80px;*/
}
 
.item-1 {
    animation-name: anim-1;
    /*animation: zoom-in-zoom-out 20s ease infinite;*/
}

.item-2 {
    animation-name: anim-2;
    /*animation: zoom-in-zoom-out 20s ease infinite;*/
}

.item-3 {
    animation-name: anim-3;
    /*animation: zoom-in-zoom-out 20s ease infinite;*/
}
 
.frame {
    background-color: #ddc;
    border: solid 5vmin #eee;
    border-bottom-color: #fff;
    border-left-color: #eee;
    border-radius: 2px;
    border-right-color: #eee;
    border-top-color: #ddd;
    box-shadow: 0 0 5px 0 rgba(0,0,0,.25) inset, 0 5px 10px 5px rgba(0,0,0,.25);
    box-sizing: border-box;
    display: inline-block;
    height: 80vh;
    padding: 8vmin;
    position: relative;
    text-align: center;
    margin-top: 25%;
}

.frameimg {
    /*border: solid 2px;
        border-bottom-color: #ffe;
        border-left-color: #eed;
        border-right-color: #eed;
        border-top-color: #ccb;
        max-height: 100%;
        max-width: 100%;*/
    opacity: 0.9;
    /*margin-top: 10%;*/
    cursor: pointer;
}

        /*.frameimg:hover {
            animation-name: orginalimage;
            animation-duration: 2s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
        }*/

@keyframes anim-1 {
    0%, 8.3% {
        top: -110%;
        opacity: 0;
    }

    8.3%,25% {
        top: 5%;
        opacity: 1;
    }

    33.33%, 100% {
        top: 110%;
        opacity: 0;
    }
}

@keyframes anim-2 {
    0%, 33.33% {
        top: -110%;
        opacity: 0;
    }

    41.63%, 58.29% {
        top: 5%;
        opacity: 1;
    }

    66.66%, 100% {
        top: 110%;
        opacity: 0;
    }
}

@keyframes anim-3 {
    0%, 66.66% {
        top: -110%;
        opacity: 0;
    }

    74.96%, 91.62% {
        top: 5%;
        opacity: 1;
    }

    100% {
        top: 110%;
        opacity: 0;
    }
}
/*.zoom-in-out-box {
    margin: 24px;
    width: 50px;
    height: 50px;
    background: #f50057;
    animation: zoom-in-zoom-out 1s ease infinite;
}*/

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(1.5, 1.5);
    }

    100% {
        transform: scale(1, 1);
    }
}

@keyframes orginalimage{
    0% {
        opacity: 1.0;
    }

   25% {
        opacity: 1.0;
    }
    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1.0;
    }
}
@media screen and (max-width: 320px) {
    .item-1,
    .item-2,
    .item-3 {
        width: 90%;
    }
}

@media screen and (min-width: 375px) {
 
}

@media screen and (min-width: 425px) {
    .item-1,
    .item-2,
    .item-3 {
        width: 92%;
        font-size: 15px;
    }
  
}

@media screen and (min-width: 430px) and (max-width: 768px) {
 
}

@media screen and (min-width: 1024px) {
    .item-1,
    .item-2,
    .item-3 {
        top: 6em;
        width: 91%;
        font-size: 14px;
    }
}

@media screen and (min-width: 1440px) {
    .item-1,
    .item-2,
    .item-3 {
        width: 93%;
    }
}

@media screen and (min-width: 2560px) {
 
}