img {
  max-width: 100%;
}

#app {
  width:1920px;position:relative;left:50%;margin-left:-960px;
  height:830px;
  overflow: hidden;
}

.ui-big-images {
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
}

.ui-big-image {
  width: 100%;
  margin-right: -100%;
}
.ui-big-image img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 20%;
     object-position: center 20%;
  width: 100%;
  height: 100%;
  display: block;
}
@media (max-height: 600px) {
  .ui-big-image img {
    -o-object-position: center center;
       object-position: center center;
  }
}

.ui-thumbnails {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;height:171px;
  background: url(../images/bg.png) repeat;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-top:15px;padding-left:24px;
  
}



.ui-thumbnail {
  display: block;
  margin:0 8px;
  cursor: pointer;position:relative;
}

.ui-cuticle {

  position: absolute;
  bottom: 0;
  height: .25rem;
  width:104px;
}

.ui-thumbnail > img {
  width: auto;
}

.ui-content {
  position: absolute;
  width: 516px;
  right: 38px;
  bottom: 0;
}

.ui-articles {
  background: #f5f6f7;
  color: white;
  display: flex;
  align-items: stretch;
  overflow: hidden;
}


.ui-thumbnail .mask{background: url(../images/mask.png) repeat;width:104px;height:104px;position:absolute;left:0;top:0;display:none;}








.ui-article {
  padding:30px 40px 30px 30px;
  width: 100%;
  margin-right: -100%;
  display: flex;
  flex-direction: column;
  justify-content: center;z-index:99999;
}

.ui-paragraph {color:#999999;font-size:14px;line-height:24px;position:relative;z-index:99999;}

.ui-nav {
  position: absolute;
  right: 0;
  bottom: 100%;
  background: inherit;font-size:0;
}
.ui-nav button {
  background: #000500;
  border: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  width:31px;line-height:31px;
  color: #FFF;
  font-family: monospace;
  transition: inherit;
  transition-duration: 300ms;font-size:15px;
}
.ui-nav button:hover, .ui-nav button:focus {
  background: #00a9a9;
  outline: none;
}
.ui-nav button:active {
  outline: none;

  transition-duration: 100ms;
}

.ui-heading{color:#000500;font-size:24px;font-weight:normal;}
.ui-heading a{color:#000500;}
.ui-heading span{color:#00a9a9;font-size:18px;display:block;margin:11px 0 14px;}







/* ---------------------------------- */
.ui-big-image {
  opacity: 0;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
.ui-big-image img {
  -webkit-transform: scale(0.85);
          transform: scale(0.85);
}

.ui-big-image[data-active] ~ .ui-big-image {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.ui-big-image[data-active] {
  opacity: 1;
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.ui-big-image[data-active] img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* ---------------------------------- */
.ui-article {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}


.ui-article:before {
  content: '';
  position:relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#f5f6f7;
  opacity: 1;
  transition-duration: 0.35s;
  z-index: 1;
}

.ui-article[data-active] ~ .ui-article {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

.ui-article[data-active] {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
}
.ui-article[data-active]:before {
  opacity: 0;
}

/* ---------------------------------- */
.ui-thumbnail > img {
  transition-duration: 0.35s;
}
.ui-thumbnail:active > img {

  transition-duration: 100ms;
}
.ui-thumbnail:focus {
  outline: none;
}

.ui-cuticle {
  display: none;
}

.ui-thumbnail[data-active] > img, .ui-thumbnail:hover > img {
 
}
.ui-thumbnail[data-active]{
  display: block;border:3px solid #00a9a9;
}


.ui-thumbnail[data-active] .mask{display:block;}





/* ---------------------------------- */