/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.wps-gallery-thumbs .swiper-slide{
    --thumb-slide-width: 100%;
}
.wps-gallery-thumbs-wrapper{
    --thumb-display: none;
}

@media screen and (min-width: 45em){
    .wps-gallery-thumbs .swiper-slide{
    --thumb-slide-width: 50%;
   }
   .wps-gallery-thumbs-wrapper{
    --thumb-display: block;
    }
}

 @media screen and (min-width: 64em){
    .wps-gallery-thumbs .swiper-slide{
       --thumb-slide-width: 25%;
      }
    }
    @media screen and (min-width: 100em){
        .wps-gallery-thumbs .swiper-slide{
           --thumb-slide-width: 19%;
          }
        }

 .wps-gallery-wrapper{
     position: relative;     
 }
 .wps-gallery-thumbs-wrapper{
    display: var(--thumb-display);
    position: absolute;
    top:calc(-50% + 312px);
    z-index: 2;
 }
 .wps-gallery,
 .wps-gallery-thumbs{
    overflow: hidden;
 }
 .wps-gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0;
  }
  .wps-gallery-thumbs .swiper-slide {
    width: var(--thumb-slide-width);
    height: 100%;
   
  }
 
  .wps-gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
  .wps-gallery .p-box{      
      margin:0 auto;
  }

  .wps-gallery .p-box-slide__image{
      background-color: #333333;
      text-align:center;
  }

  .wps-gallery-thumbs .p-box-slide__thumb{
    text-align: center;
}

.wps-gallery{
    position: relative;
    z-index:3;
    max-width: 644px;
    margin:0 auto;
}
.test{
    position: relative;
    max-width:720px;
    margin:0 auto;
}

/*.wps-gallery-thumbs{}*/

.wps-gallery-nav-arrow--next,
.wps-gallery-nav-arrow--prev{
    position: absolute;
    bottom: 22px;
    width: 27px;
    height: 44px;   
    z-index: 3;
    cursor: pointer;
    -moz-background-size: 27px 44px;
    -webkit-background-size: 27px 44px;
    background-size: 27px 44px;
    background-position: center;
    background-repeat: no-repeat;
    outline: none;
    display: none;
}

@media screen and (min-width: 45em){
    .wps-gallery-nav-arrow--next,
    .wps-gallery-nav-arrow--prev{
        display: block;
    }
}

.wps-gallery-nav-arrow--next{
    right:0;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}

.wps-gallery-nav-arrow--prev{
    left:0; 
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}