/* Variables */
.doubleslider {
  display: block;
  border-bottom: solid 2px #000; }
  .doubleslider a {
    outline: none !important; }
  .doubleslider li.group {
    display: none;
    overflow: hidden;
    position: relative; }
    .doubleslider li.group.active {
      display: block; }
      .doubleslider li.group.active .h-slider ul li {
        -webkit-animation: moveFromRight 350ms ease-in-out both;
        animation: moveFromRight 350ms ease-in-out both; }
    .doubleslider li.group .dotnav {
      height: 30px; }
    .doubleslider li.group .arrow {
      font-size: 40px;
      display: block;
      width: 16px;
      padding: 5px;
      position: absolute;
      top: 35%;
      background: rgba(0, 0, 0, 0.5);
      opacity: 0.5;
      color: white;
      border-radius: 5px;
      cursor: pointer;
      transition: opacity 200ms; }
      .doubleslider li.group .arrow:hover {
        opacity: 1; }
      .doubleslider li.group .arrow i {
        width: 100%; }
      .doubleslider li.group .arrow.left {
        left: 0; }
        .doubleslider li.group .arrow.left i {
          text-align: left !important; }
      .doubleslider li.group .arrow.right {
        right: 0; }
        .doubleslider li.group .arrow.right i {
          text-align: right !important; }
    .doubleslider li.group > span {
      display: none; }
    .doubleslider li.group .h-slider {
      position: relative;
      transition: all 500ms;
      left: 0;
      min-height: 240px; }
      .doubleslider li.group .h-slider ul {
        display: inline-block;
        vertical-align: top; }
        .doubleslider li.group .h-slider ul li {
          display: inline-block;
          width: 16%;
          text-align: center;
          vertical-align: top;
          padding-bottom: 10px; }
          .doubleslider li.group .h-slider ul li a, .doubleslider li.group .h-slider ul li a:visited {
            font-weight: normal; }
          .doubleslider li.group .h-slider ul li:first-child {
            -webkit-animation-delay: 0ms;
            animation-delay: 0ms; }
          .doubleslider li.group .h-slider ul li:nth-child(2) {
            -webkit-animation-delay: 90ms;
            animation-delay: 90ms; }
          .doubleslider li.group .h-slider ul li:nth-child(3) {
            -webkit-animation-delay: 180ms;
            animation-delay: 180ms; }
          .doubleslider li.group .h-slider ul li:nth-child(4) {
            -webkit-animation-delay: 270ms;
            animation-delay: 270ms; }
          .doubleslider li.group .h-slider ul li:nth-child(5) {
            -webkit-animation-delay: 360ms;
            animation-delay: 360ms; }
          .doubleslider li.group .h-slider ul li img {
            width: 70%;
            transition: all 200ms; }
            .doubleslider li.group .h-slider ul li img:hover {
              opacity: 0.8; }
          .doubleslider li.group .h-slider ul li .name {
            display: block;
            margin-top: -7px;
            font-size: 13px;
            line-height: 13px;
            text-overflow: ellipsis;
            overflow: hidden;
            padding: 1px 5%; }
      .doubleslider li.group .h-slider + nav {
        text-align: center; }
        .doubleslider li.group .h-slider + nav li {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin: 0;
          padding: 0;
          cursor: pointer; }
          .doubleslider li.group .h-slider + nav li .bullet {
            height: 8px;
            width: 8px;
            background: rgba(0, 0, 0, 0.2);
            box-shadow: 0 1px 0 white, inset 0 1px 0 rgba(0, 0, 0, 0.3);
            margin: 6px auto;
            border-radius: 6px;
            display: block; }
            .doubleslider li.group .h-slider + nav li .bullet.active {
              background: #b20e10; }
  .doubleslider + nav {
    display: table;
    text-align: center;
    width: 100%;
    padding: 20px 15px 0 15px;
    box-sizing: border-box; }
    .doubleslider + nav a {
      display: table-cell;
      border-top: solid 4px white;
      color: #CCC;
      transition: all 500ms;
      text-transform: uppercase;
      outline: none !important; }
      .doubleslider + nav a:hover {
        color: black; }
      .doubleslider + nav a.active {
        color: #000;
        position: relative;
        background: #fff;
        /* border: 4px solid #000;*/ }
        .doubleslider + nav a.active:before, .doubleslider + nav a.active:after {
          top: -26px;
          left: 50%;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none; }
        .doubleslider + nav a.active:before {
          border-color: rgba(0, 0, 0, 0);
          border-top-color: #000;
          border-width: 20px;
          margin-left: -20px; }
        .doubleslider + nav a.active:after {
          border-color: rgba(255, 255, 255, 0);
          border-top-color: #fff;
          border-width: 16px;
          margin-left: -16px; }

/* Animations */
@-webkit-keyframes moveFromRight {
  0% {
    -webkit-transform: translateX(600%); }

  100% {
    -webkit-transform: translateX(0%); } }

@-webkit-keyframes moveFromLeft {
  0% {
    -webkit-transform: translateX(-600%); }

  100% {
    -webkit-transform: translateX(0%); } }

@-webkit-keyframes moveToRight {
  0% {
    -webkit-transform: translateX(0%); }

  100% {
    -webkit-transform: translateX(600%); } }

@-webkit-keyframes moveToLeft {
  0% {
    -webkit-transform: translateX(0%); }

  100% {
    -webkit-transform: translateX(-600%); } }

@keyframes moveFromRight {
  0% {
    -webkit-transform: translateX(600%);
    transform: translateX(600%); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes moveFromLeft {
  0% {
    -webkit-transform: translateX(-600%);
    transform: translateX(-600%); }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes moveToRight {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }

  100% {
    -webkit-transform: translateX(600%);
    transform: translateX(600%); } }

@keyframes moveToLeft {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }

  100% {
    -webkit-transform: translateX(-600%);
    transform: translateX(-600%); } }

@media screen and (max-width: 1020px) {
  .doubleslider li.group .h-slider {
    min-height: 280px; }
    .doubleslider li.group .h-slider ul li {
      width: 25%; }
  .doubleslider + nav {
    font-size: 12px; } }