﻿/* Grundelemente */
.slide {
	display: -webkit-flex;
	display: flex;
	-moz-flex-direction: column;
    -webkit-flex-direction: column;
	flex-direction: column;
    width: 100%;

}
.slide_color { background-color: #F9F9F9; }
.view__img { display: block; max-height: 100%; }
.item { position: absolute; z-index: 1; }

/* Slideshow Elemente */
.item--pic1 { top: 351px; left: 114px; }
.item--pic1 .item__img1 { width: auto; height: 60px; box-shadow: 1px 1px 2px #0033FF, 0 0 5px white, 0 0 5px #0033FF; }
.item--pic2 { top: 381px; left: 19px; }
.item--pic2 .item__img2 { width: auto; height: 54px; box-shadow: 1px 1px 2px #0033FF, 0 0 5px white, 0 0 5px #0033FF; }
.item--pic3 { top: 292px; left: 152px; }
.item--pic3 .item__img3 { width: auto; height: 37px; box-shadow: 1px 1px 2px #0033FF, 0 0 5px white, 0 0 5px #0033FF; }
.item--pic4 { top: 287px; left: 70px; }
.item--pic4 .item__img4 { width: auto; height: 37px; box-shadow: 1px 1px 2px #0033FF, 0 0 5px white, 0 0 5px #0033FF; }
.item--pic5 { top: 182px; left: 163px; }
.item--pic5 .item__img5 { width: auto; height: 60px; box-shadow: 1px 1px 2px #0033FF, 0 0 5px white, 0 0 5px #0033FF; }
.item--pic6 { top: 200px; left: 63px; }
.item--pic6 .item__img6 { width: auto; height: 56px; box-shadow: 1px 1px 2px #0033FF, 0 0 5px white, 0 0 5px #0033FF; }

.item--pic8 { top: 35px; right: 95px; }
.item--pic8 .item__img { box-shadow: 1px 1px 2px #0033FF, 0 0 5px white, 0 0 5px #0033FF; }

/* Getränke Elemente */

/* Panel Schild-Slider */
.pan_slide_h
{
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow:hidden;
  width: 22rem;
}

@-webkit-keyframes slide_hor {
    0% { -webkit-transform: translate(0px, 0px);
         transform: translate(0px, 0px); }
  50% { -webkit-transform: translate(0px, -400px);
         transform: translate(0px, -400px); }
  100% { -webkit-transform: translate(0px, -400px);
         transform: translate(0px, -400px); }
}
@keyframes slide_hor {
    0% { -webkit-transform: translate(0px, 0px);
         transform: translate(0px, 0px); }
  50% { -webkit-transform: translate(0px, -400px);
         transform: translate(0px, -400px); }
  100% { -webkit-transform: translate(0px, -400px);
         transform: translate(0px, -400px); }
}

/* Vertical 1100 */
.pan_slide_v
{
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  -moz-align-items: -moz-flex-center;
  -webkit-align-items: -webkit-flex-center;
  -ms-align-items: -ms-flex-center;
  align-items: flex-center;
  overflow:hidden;
  width: 34rem;
}

.slide_vert
{
  animation-name: slide_vert;
  animation-duration: 8s;
  animation-delay: 6s;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  width: 1100px;
}

@-webkit-keyframes slide_vert {
    0% { -webkit-transform: translate(0px, 0px);
         transform: translate(0px, 0px); }
  50% { -webkit-transform: translate(-450px, 0px);
         transform: translate(-450px, 0px); }
  100% { -webkit-transform: translate(-450px, 0px);
         transform: translate(-450px, 0px); }
}
@keyframes slide_vert {
    0% { -webkit-transform: translate(0px, 0px);
         transform: translate(0px, 0px); }
  50% { -webkit-transform: translate(-450px, 0px);
         transform: translate(-450px, 0px); }
  100% { -webkit-transform: translate(-450px, 0px);
         transform: translate(-450px, 0px); }
}

@media screen and (max-width: 768px) {
  .pan_slide_v
  {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -moz-align-items: -moz-flex-center;
    -webkit-align-items: -webkit-flex-center;
    -ms-align-items: -ms-flex-center;
    align-items: flex-center;
    overflow:hidden;
    width: 30rem;
  }

  .slide_vert
  {
    animation-name: slide_vert;
    animation-duration: 8s;
    animation-delay: 6s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    width: 900px;
  }

  @-webkit-keyframes slide_vert {
      0% { -webkit-transform: translate(0px, 0px);
           transform: translate(0px, 0px); }
    50% { -webkit-transform: translate(-425px, 0px);
           transform: translate(-425px, 0px); }
    100% { -webkit-transform: translate(-425px, 0px);
           transform: translate(-425px, 0px); }
  }
  @keyframes slide_vert {
      0% { -webkit-transform: translate(0px, 0px);
           transform: translate(0px, 0px); }
    50% { -webkit-transform: translate(-425px, 0px);
           transform: translate(-425px, 0px); }
    100% { -webkit-transform: translate(-425px, 0px);
           transform: translate(-425px, 0px); }
  }
}

@media screen and (max-width: 380px) {
  .pan_slide_v
  {
    display: -moz-flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -moz-align-items: -moz-flex-center;
    -webkit-align-items: -webkit-flex-center;
    -ms-align-items: -ms-flex-center;
    align-items: flex-center;
    overflow:hidden;
    width: 30rem;
  }

  .slide_vert
  {
    animation-name: slide_vert;
    animation-duration: 8s;
    animation-delay: 6s;
    animation-iteration-count: infinite;
    animation-fill-mode: forwards;
    width: 700px;
  }

  @-webkit-keyframes slide_vert {
      0% { -webkit-transform: translate(0px, 0px);
           transform: translate(0px, 0px); }
    50% { -webkit-transform: translate(-335px, 0px);
           transform: translate(-335px, 0px); }
    100% { -webkit-transform: translate(-335px, 0px);
           transform: translate(-335px, 0px); }
  }
  @keyframes slide_vert {
      0% { -webkit-transform: translate(0px, 0px);
           transform: translate(0px, 0px); }
    50% { -webkit-transform: translate(-335px, 0px);
           transform: translate(-335px, 0px); }
    100% { -webkit-transform: translate(-335px, 0px);
           transform: translate(-335px, 0px); }
  }
}