.hovereffect {
      width: 100%;
      height: 100%;
      float: left;
      overflow: hidden;
      position: relative;
      text-align: center;
      cursor: default;
    }

    .hovereffect .overlay {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
      top: 0;
      left: 0;
      -webkit-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
    }

    .hovereffect:hover .overlay {
      background-color: rgba(48, 152, 157, 0.4);

    }

    .hovereffect img {
      display: block;
      position: relative;
    }

    .hovereffect h2 {
      text-transform: uppercase;
      color: #fff;
      text-align: center;
      position: relative;
      font-size: 17px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.6);
      -webkit-transform: translateY(10px);
      -ms-transform: translateY(10px);
      transform: translateY(10px);
      -webkit-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
    }

    .hovereffect:hover h2 {
      -webkit-transform: translateY(150px);
      -ms-transform: translateY(150px);
      transform: translateY(150px);
    }

    .hovereffect a.info {
      display: inline-block;
      text-decoration: none;
      padding: 7px 14px;
      text-transform: uppercase;
      color: #000;
      border: 1px solid #fff;
      background-color: transparent;
      opacity: 0;
      filter: alpha(opacity=0);
      -webkit-transform: scale(0);
      -ms-transform: scale(0);
      transform: scale(0);
      -webkit-transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
      font-weight: normal;
      margin: 12% 0 0 0;
      
    }

    .hovereffect:hover a.info {
      opacity: 1;
      filter: alpha(opacity=100);
      -webkit-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      
    }

    .hovereffect a.info:hover {
      box-shadow: 0 0 5px #fff;
    }

    /* jssor slider loading skin spin css */
    .jssorl-009-spin img {
      animation-name: jssorl-009-spin;
      animation-duration: 1.6s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }

    @keyframes jssorl-009-spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }


    /*jssor slider bullet skin 132 css*/
    .jssorb132 {
      position: absolute;
    }

    .jssorb132 .i {
      position: absolute;
      cursor: pointer;
    }

    .jssorb132 .i .b {
      fill: #fff;
      fill-opacity: 0.8;
      stroke: #000;
      stroke-width: 1600;
      stroke-miterlimit: 10;
      stroke-opacity: 0.7;
    }

    .jssorb132 .i:hover .b {
      fill: #000;
      fill-opacity: .7;
      stroke: #fff;
      stroke-width: 2000;
      stroke-opacity: 0.8;
    }

    .jssorb132 .iav .b {
      fill: #000;
      stroke: #fff;
      stroke-width: 2400;
      fill-opacity: 0.8;
      stroke-opacity: 1;
    }

    .jssorb132 .i.idn {
      opacity: 0.3;
    }

    .jssora051 {
      display: block;
      position: absolute;
      cursor: pointer;
    }

    .jssora051 .a {
      fill: none;
      stroke: #fff;
      stroke-width: 360;
      stroke-miterlimit: 10;
    }

    .jssora051:hover {
      opacity: .8;
    }

    .jssora051.jssora051dn {
      opacity: .5;
    }

    .jssora051.jssora051ds {
      opacity: .3;
      pointer-events: none;
    }