@media all and (max-width: 479px) {


    .imgk{
    animation-name:test;
    animation-duration:2s;
    animation-iteration-count:1;
}

@keyframes test {
  0% {
    opacity:0;
    width:20%;
    /* transform: rotate(180deg); */
  }

  100% {
    opacity:1;
    width:100%;
  }
}

.pslide {
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 1;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.middleonslider {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width:100%;
  height:100%;
 background-color:black;
 opacity:0.3;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.middleonslider2 {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
 opacity:1;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.textonslide {
    margin-top:10%;
  background-color: transparent;
  color: white;
  font-size: 15px;
  padding: 5px;
}

.sliderheight{
    height:200px;
}


}


@media all and (min-width: 480px) {


    .imgk{
    animation-name:test;
    animation-duration:2s;
    animation-iteration-count:1;
}

@keyframes test {
  0% {
    opacity:0;
    width:20%;
    /* transform: rotate(180deg); */
  }

  100% {
    opacity:1;
    width:100%;
  }
}

.pslide {
  animation-duration: 2s;
  animation-name: slidein;
  animation-iteration-count: 1;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

.middleonslider {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  width:100%;
  height:100%;
 background-color:black;
 opacity:0.3;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}
.middleonslider2 {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
 opacity:1;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.middleonsliderdesk {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 10%;
  left: 80%;
  text-align: center;
}

.middleonsliderdeskkk2 {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 32%;
  left: 80%;
  text-align: center;
}

.middleonsliderdeskkk3 {
  transition: .5s ease;
  opacity: 1;
  position: absolute;
  top: 54%;
  left: 80%;
  text-align: center;
}


.middleonsliderdesk2 {
    display:none;
  transition: .2s ease;
  opacity: 1;
  position: absolute;
  top: 10%;
  left: 72%;
  text-align: center;
}

.middleonsliderdesk2:hover{
    display:block;
}


.middleonsliderdesk:hover + .middleonsliderdesk2 {
    display: block;
}
/* -------------- */
.middleonsliderdesk3 {
    display:none;
  transition: .2s ease;
  opacity: 1;
  position: absolute;
  top: 20%;
  left: 72%;
  text-align: center;
}

.middleonsliderdesk3:hover{
    display:block;
}


.middleonsliderdeskkk2:hover + .middleonsliderdesk3 {
    display: block;
}
/* --------- */

/* -------------- */
.middleonsliderdesk4 {
    display:none;
  transition: .2s ease;
  opacity: 1;
  position: absolute;
  top: 30%;
  left: 72%;
  text-align: center;
}

.middleonsliderdesk4:hover{
    display:block;
}


.middleonsliderdeskkk3:hover + .middleonsliderdesk4 {
    display: block;
}
/* --------- */



.textonslidedesk {
    margin-top:10%;
  background-color: rgba(34,32,31,.9);
  color: white;
  font-size: 25px;
  padding: 15px;
}

.textonslidedesk2 {
    margin-top:10%;
  background-color: rgba(34,32,31,.9);
  color: white;
  font-size: 25px;
  padding: 15px;
}

.textonslide {
    margin-top:10%;
  background-color: transparent;
  color: white;
  font-size: 15px;
  padding: 5px;
}

.sliderheight{
    height:600px;
}


}