/* proved */
.slick-prev{
  &:before {
    content: "\f111";
  }
}
.slick-next{
  &:before {
    content: "\f112";
  }
}
@media (min-width:$break-md) {
  .slick-next {
    right: -45px;
  }
  .slick-prev {
    left: -45px;
  }
}
.slick-prev,
.slick-next{
  z-index: 50;
  height: 50px;
  width: 50px;

  &:before,
  &:after{
    color: $primary-color;
    opacity: 1;
  }
  &:before{
    font-family: "LineAwesome";
    font-size: 48px;
    @media (max-width:$break-md){
      font-size: 38px;
    }
    color: $primary-color;
  }
}
.carousel_portrait {
  img {
    -moz-transform: scale(.75);
    -ms-transform: scale(.75);
    -o-transform: scale(.75);
    -webkit-transform: scale(.75);
    transform: scale(.75);
  }
}
.slick-center,
.slick-current,
.slick-highlight {
  img{
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    transition:.3s;
  }
}
.navigation{
  margin: 30px 0;
}
.pagination{
  display: inline-block;
  font-size: 20px;
  line-height: 25px;
}
/* standalone */
&.gallery {
  .gallery-wrapper {
    h2 {
      font-size: 20px;
      line-height: 26px;
    }
  }
  .slick-prev,
  .slick-next{
    top: 40px
  }
  .slick-prev{
    left: 25%;
  }
  .slick-next{
    right: 25%;
  }

}
/* work in progress */
/* social thingi */
.toggleable-target {
  display: none;
}
.gallery-wrapper {
  .social-trigger {
    position: absolute;
    cursor: pointer;
    font-size: 40px;
    line-height: 40px;
    color: #E2007A;
  }
  .sharing {
    padding: 0;
    border: 0;
    //      margin-left: 50px;
    white-space: nowrap;
    min-height: 55px;
  }
  .meta {
    //      margin: 0 0 20px 0;
    position: relative;
  }
  .toggleable-target {
    padding: 0;
    border: 0;
    margin-left: 50px;
    white-space: nowrap;
  }
  .copyright {
    //      text-align: right;
    font-size: 12px;
    line-height: 15px;
  }
}
&.article .gallery-container{
  .slick-prev{
    left: 25%;
    top: 42px;
  }
  .slick-next{
    right: 25%;
    top: 42px;
  }
}
/*
.carousel_portrait {
  .card {
    -moz-transform: scale(.75);
    -ms-transform: scale(.75);
    -o-transform: scale(.75);
    -webkit-transform: scale(.75);
    transform: scale(.75);
    transition:.3s;
    @media(max-width: $break-sm) {
      margin-left:-10px; // to reduce the space between center image and the wings
      margin-right:-10px; // to reduce the space between center image and the wings
    }
  }
  .slick-center,
  .slick-current,
  .slick-highlight {
    &.card{
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      -webkit-transform: scale(1);
      transform: scale(1);
      transition:.3s;
    }
  }
}
*/

/* maybe rubbish */

/*
  @include gallery-hover-state(gallery-wrapper, teaser-image, $hover-text);
  @include gallery-hover-state(gallery-wrapper, image-overlay, $hover-text);


  .gallery-container{

    &.carousel-text{
      margin-bottom: 0;
    }
    &.slick-initialized {
      .item {
        display: block;
      }
    }
    > .item{
      display: none;

      &:first-child{
        display: block;
      }
    }
    .slick-slide{
      transition: all 300ms ease;
      margin-bottom: 0;

      .image {
        img{
          margin: auto;
        }
      }
      .caption{
        position: absolute;
        bottom: 0;
      }
      .title{
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 0;
        @media (max-width:$break-md){
          font-size: 20px;
          line-height: 26px;
        }
      }
      .kicker,
      .title,
      .published{
        a{
          color: inherit;
        }
      }
    }
  }
  .gallery-wrapper{

    .block &,
    .line_gallery & {
      border: none;
    }

    .item-title{
      font-size: 20px;
      line-height: 26px;
      font-weight: bold;
      margin-top: 5px;
    }
    .meta {
      margin: 0 0 20px 0;
      min-height: 55px;
      position: relative;
    }
    .attribute-copyrights{
      text-align: right;
      font-size: 12px;
      line-height: 15px;
    }
    .attribute-description{
      font-size: 16px;
      line-height: 25px;
      margin-bottom: 15px;
    }
    .attribute-shopping-description,
    .attribute-shopping-price{
      font-size: 16px;
      line-height: 25px;

      i.la{
        font-size: 28px;
        line-height: 36px;
        vertical-align: middle;
        position: relative;
        top: -3px;
      }
    }
    .social-trigger{
      position: absolute;
      cursor: pointer;
      font-size: 40px;
      line-height: 40px;
      color: $primary-color;

      .la-times{
        margin-right: 20px;
      }
    }
    .sharing{
      padding: 0;
      border: 0;
      margin-left: 50px;
      white-space: nowrap;

      .social-media{
        text-align: left;
        padding: {
          top: 0;
          bottom: 0;
        }
      }
    }
    .keywords{
      padding: 0;
      font-size: 16px;
      line-height: 20px;
      border: none;
      margin-bottom: 20px;

      a{
        font-weight: bold;

        &.labelfinder{
          font-weight: normal;
        }
      }
    }
    .shopping-header,
    figcaption {
      margin-bottom: 0;

      p{
        margin-bottom: initial;
      }

      a {
        display: initial;
      }
      .headline{
        font-weight: bold;
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 10px;
      }
    }
    .shopping-header{
      border: none;
      .headline{
        margin-bottom: 20px;

        .attribute-shopping-brand{
          display: block;
          font-weight: normal;
        }
      }
    }
  }
  .gallery-headline{
    font-size: 28px;
    line-height: 35px;
    font-weight: bold;
    margin: 60px 0 25px;
  }
  .shopping-gallery{
    .attribute{
      margin-bottom: 20px;
    }
  }

  .gallery-container{
  }
  .content{
    .gallery-wrapper {
      margin-bottom: 1.75rem;
    }
  }
  article{
  }


  .block{

    &.carousel_1,
    &.carousel_2,
    &.carousel_3{
      .headline {
        padding-bottom: 35px; //(55px padding bottom for headline) - (20px padding bottom for teaser flag) = 35px padding bottom
      }
      .gallery_text{
        .item{
          padding-top: 0;
        }
      }
    }
    &.carousel_2 {
      .item{
        padding: 20px 10px 0;
      }
    }
    &.carousel_1,
    &.carousel_3{
      .item{
        padding: 20px 0 0;
      }
    }

    //****
    // Unfortunately we're overriding the bootstrap container class here. -.-
    // I know this is BS, but I have no idea how to remove the grid paddings.
    // If anyone has a better solution, please let me know! DF
    // no-gutters seems not to work..
    @media(max-width: $break-sm) {
      &.carousel_1,
      &.carousel_3 {
        .container {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }
    //***

    &.carousel_2{
      @media(max-width: $break-sm) {
        &.even {
          .slick-prev:before,
          .slick-next:before {
            color: $primary-color;
          }
        }
        &.odd {
          .slick-prev:before,
          .slick-next:before {
            color: $secondary-color;
          }
        }
      }
      @media(max-width: $break-sm) {
        .slick-prev {
          left: 15px;
        }
        .slick-next {
          right: 15px;
        }
      }
    }
  }

  .line_gallery{
    .slick-slide{
      margin: 0 -10px;
      @media (max-width:$break-md){
        margin: 0 -3px;
      }
    }
  }

  .cn_textblock{
    padding: 45px 60px;
    @media (max-width:$break-sm){
      padding: 35px 30px;
    }
    background: #f5f5f5;
    text-align: initial;
    margin-bottom: 90px;

    .attribute-title{
      font-size: 28px;
      line-height: 35px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }


  .gallery_text {
    .kicker {
      padding: 0 15px;
    }
    .title {
      padding: 0 15px;
    }
  }

  .related_galleries{
    .headline{
      margin-bottom: 45px;
    }
  }

  .gallery-wrapper figcaption a.shoppingweek-link{
    display:block;
    margin-right:10px;
  }

  .slick-slider .slick-track, .slick-slider .slick-list { height: 100% !important; }
*/