.app-qnxy{
  background: #f7f7f7;
  min-height: 300px;}


.portfolio-items {
  height: 260px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  margin-bottom: 40px;
  position: relative
}

.portfolio-items > li {
  display: inline-block;
  vertical-align: top;

}
.portfolio-items > li:first-child{
  //margin-left: -2em;
}

.item{    width: 100px; height: 160px;
          top: -80px;
          margin: 70px 25px 15px;
          padding: 0; font-size: 14px;
          opacity: 0; position: relative;
          -webkit-transform: rotate(-135deg);  -ms-transform: rotate(-135deg);
          -o-transform: rotate(-135deg);  transform: rotate(-135deg);
          -webkit-transition: all .3s ease, opacity 2s ease,  top .5s ease;
          -o-transition: all .3s ease, opacity 2s ease,  top .5s ease;
          transition: all .3s ease, opacity 2s ease,  top .5s ease
}

.item:first-child{ //margin-left: 0;}
.item:last-child{ margin-right: 0;}

.item a h2{ font-size: 12px; color: #999999; font-size: 1em; font-weight: 100;
  text-align: center; line-height: 48px; margin-top: 0}
.item a:hover h2{ color: #333333;}

.falldown {
  top: 0;
  opacity: 1;
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0)
}


@media (min-width:1025px){

.item:hover {
  -webkit-transform: translateY(-.625em);
  -ms-transform: translateY(-.625em);
  -o-transform: translateY(-.625em);
  transform: translateY(-.625em)
}

}

@media(max-width: 1024px){
.app-qnxy{ min-height: 280px;}

.portfolio-items {
  height: 230px;  margin-bottom: 40px;
}

.portfolio-items > li:first-child{
  margin-left: -1em;
}

.portfolio-items > li:last-child{
  margin-right: 1em;
}
.item {   width: 100px; height: 140px;
          top: 0px;
          margin: 50px 20px 15px;
}


}
@media(max-width: 640px){
.app-qnxy{ min-height: 280px;}

.portfolio-items {
  height: 240px;  margin-bottom: 40px;
}

.item {   width: 110px; height: 130px;
          margin:50px 20px 15px;}

}

@media(max-width:560px){

.app-qnxy{ min-height: 260px;}

.portfolio-items {
  height: 220px;  margin-bottom: 40px;
}

.item { width: 96px; height: 130px;
        margin: 50px 20px 15px;}

}

@media(max-width:479px){

.app-qnxy{ min-height: 240px;}

.portfolio-items {
  height: 210px;  margin-bottom: 20px;
}

.item { width: 80px; height: 130px;
        margin: 50px 15px 15px;}

}

@media(max-width:420px){

.app-qnxy{ min-height: 220px;}

.portfolio-items {
  height: 190px;  margin-bottom: 20px;
}

.item { width: 72px; height: 130px;
        margin: 50px 12px 15px;}

}

@media(max-width:360px){

.app-qnxy{ min-height: 220px;}

.portfolio-items {
  height: 190px;  margin-bottom: 20px;
}

.portfolio-items > li:first-child{
  margin-left: -18px;
}

.item { width: 62px; height: 130px;
        margin: 50px 10px 15px;}

}

@media(max-width:320px){

.app-qnxy{ min-height: 200px;}

.portfolio-items {
  height: 180px;  margin-bottom: 30px;
}

.item { width: 55px; height: 130px;
        margin: 50px 8px 15px;}

}


@keyframes slideOut {
  0% {
    left: -100%;
    opacity: 0
  }

  95% {
    left: 0;
    opacity: 0.2
  }

  100% {
    opacity: 1;
    left: 0
  }
}

@keyframes show {
  to {
    opacity: 1
  }
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  cursor: pointer
}

::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 10px
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #293e86
}

@-webkit-keyframes slideOut {
  0% {
    left: -100%;
    opacity: 0
  }

  95% {
    left: 0;
    opacity: 0.2
  }

  100% {
    opacity: 1;
    left: 0
  }
}

@-o-keyframes slideOut {
  0% {
    left: -100%;
    opacity: 0
  }

  95% {
    left: 0;
    opacity: 0.2
  }

  100% {
    opacity: 1;
    left: 0
  }
}

@-webkit-keyframes show {
  to {
    opacity: 1
  }
}

@-o-keyframes show {
  to {
    opacity: 1
  }
}