/******************* SLIDER VERTICAL ANFANG *****************************************************/
#Slider-Kaufen {
 padding: 0px;
  margin-top: -30px;
}
.SliderVertical .glyphicon {
 background-color:transparent;
 border-radius: 0;
 border-width: 0;
 color: rgba(0, 0, 0, 0.1);
 font-size: 35px;
 height: 100%;
 left: 1px;
 line-height: 100px;
 margin: 20px 0px 20px 0px;
 position: relative;
 top: 1px;
 width: 100%;
 text-align: center;
 border: 0;
}

/*********** VERTICAL SLIDER *********************/
/*------------------------------ vertical bootstrap slider----------------------------*/
#Slider-Kaufen .carousel-inner> .item.next ,  #Slider-Kaufen .carousel-inner > .item.active.right {
 transform: translate3d(0, 100%, 0);
 -webkit-transform: translate3d(0, 100%, 0);
 -ms-transform: translate3d(0, 100%, 0);
 -moz-transform: translate3d(0, 100%, 0);
 -o-transform: translate3d(0, 100%, 0);
 top: 0;
}
#Slider-Kaufen .carousel-inner > .item.prev ,#Slider-Kaufen .carousel-inner > .item.active.left {
 transform: translate3d(0,-100%, 0);
 -webkit-transform: translate3d(0,-100%, 0);
 -moz-transform: translate3d(0,-100%, 0);
 -ms-transform: translate3d(0,-100%, 0);
 -o-transform: translate3d(0,-100%, 0);
 top: 0;
}
#Slider-Kaufen .carousel-inner > .item.next.left , #Slider-Kaufen .carousel-inner > .item.prev.right , #Slider-Kaufen .carousel-inner > .item.active {
 transform:translate3d(0,0,0);
 -webkit-transform:translate3d(0,0,0);
 -ms-transform:translate3d(0,0,0);
 ;
 -moz-transform:translate3d(0,0,0);
 -o-transform:translate3d(0,0,0);
 top:0;
}



/******* ARROWS ************/
.SliderArrow {
 width: 340px;
 height: 80px;
 display: block;
 margin-top: 0px;
 position: absolute;
 z-index: 20;
 bottom: 20vh;
 right: 50vw;
}
.SliderVertical .carousel-control.left,
.SliderVertical .carousel-control.right,
.SliderVertical .carousel-control.remove
{
 width: 80px;
 height: 40px;
 top:0px;
 font-size: 140px;
 z-index:20;
 position: static;
 float: right;
}
.SliderVertical .carousel-control.left {
 right: 46vw;
 left:auto;
}
.SliderVertical .carousel-control.right {
 right:50vw;
 left:auto;
}
.SliderVertical .carousel-control.remove {
 right:42vw;
 left:auto;
}
.SliderKauf {
 max-height: 100vh;
}
#Slider-Kaufen {
 height: 100vh;
}
.SliderVertical .carousel-indicators {
 bottom: 0;
 left: auto;
 list-style: outside none none;
 margin-left: 20px;
 position: absolute;
 right: 20px;
 text-align: center;
 top: 200px;
 width: 30px;
 z-index: 15;
}
.SliderVertical .carousel-indicators li {
 display: block;
 width: 20px;
 height: 20px;
 margin-bottom: 10px;
}
.SliderVertical .carousel-indicators li:hover,
.SliderVertical .carousel-indicators .active {
 display: block;
 width: 20px;
 height: 20px;
 margin-bottom: 10px;
 background-color: #fff;
}
.vertical {
 max-height: 100vw;
}
.PhoneSlide {
 right: 50vw;
 position: absolute;
 top: 15%;
 z-index: 0;
}
.SliderItemTextBig {
 text-transform: uppercase;
 font-size:4vw;
 font-weight: 600;
 color: rgba(0,0,0,0.1);
 font-family: Arial Black,Arial Bold,Gadget,sans-serif;
 z-index: 1;
 position: relative;
 min-height: 100vh;
 max-height: 100vh;
 top:2vh;
 left: 2vw;
}
.ParentSlide {
 position: relative;
}

/********** SLIDER TEXT **************/
.SliderText {
 position: absolute;
 z-index: 2;
 top:30vh;
 right:10vw;
 width:30vw;
 z-index: 99;
}
.SliderTextUeberschrift {
 font-size: 42px;
 margin-bottom:40px;
 font-weight:300;
}
.SliderTextSpan {
 font-size: 28px;
 line-height: 34px;
 max-width:320px;
 font-weight:300;
}

/************ ITEM SLIDE 1 ****************/
.ItemSlide1,
.Rotate0to-20 {
 position: absolute;
 z-index: 3;
 -webkit-animation:Rotate0to-20 1s linear 1;
 -moz-animation:Rotate0to-20 1s linear 1;
 animation:Rotate0to-20 1s linear 1;
 transform: rotate(-20deg);
}
@-moz-keyframes Rotate0to-20 {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(-20deg);
 }
}
@-webkit-keyframes Rotate0to-20 {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(-20deg);
 }
}
@keyframes Rotate0to-20 {
 from {
  transform: rotate(0deg);
 }
 to {
  transform: rotate(-20deg);
 }
}
.Slide1Gold {
 bottom: 35vh;
 left: 10vw;
 top: auto;
}
.Slide3Plant {
 right:auto;
 left: -20vw;
 bottom:10vh;
}

/************ ITEM SLIDE 2 ****************/
.ItemSlide2,
.Rotate0deg
 {
 position: absolute;
 z-index: 4;
 top: 70vh;
 left:10vw;
 -webkit-animation:Rotate0deg 1s linear 1;
 -moz-animation:Rotate0deg 1s linear 1;
 animation:Rotate0deg 1s linear 1;
 transform: rotate(0deg);
}
@-moz-keyframes Rotate0deg {
 from {
  transform: rotate(90deg);
 }
 to {
  transform: rotate(0deg);
 }
}
@-webkit-keyframes Rotate0deg {
 from {
  transform: rotate(90deg);
 }
 to {
  transform: rotate(0deg);
 }
}
@keyframes Rotate0deg {
 from {
  transform: rotate(90deg);
 }
 to {
  transform: rotate(0deg);
 }
}
.Slide1Glasses {
 bottom: 20vh;
 left: 10vw;
 top: auto;
}


/************ ITEM SLIDE 3 ****************/
.ItemSlide3,
.Rotate-20deg {
 position: absolute;
 z-index: 5;
 -webkit-animation:Rotate-20deg 1s linear 1;
 -moz-animation:Rotate-20deg 1s linear 1;
 animation:Rotate-20deg 1s linear 1;
 transform: rotate(-20deg);
}
@-moz-keyframes Rotate-20deg {
 from {
  transform: rotate(90deg);
 }
 to {
  transform: rotate(-20deg);
 }
}
@-webkit-keyframes Rotate-20deg {
 from {
  transform: rotate(90deg);
 }
 to {
  transform: rotate(-20deg);
 }
}
@keyframes Rotate-20deg {
 from {
  transform: rotate(90deg);
 }
 to {
  transform: rotate(-20deg);
 }
}
.Slide1Coffe {
 bottom: -50vh;
 left: auto;
 right: 10vw;
 top: auto;
}
.Slide2Silver {
 top: 50vh;
 right: 20vw;
}
.Slide3Glasses {
 right: 5vw;
 left: auto;
 z-index: 999;
 top: 50vh;
}
.Slide3Lamp {
 top: -150px;
 right: -200px;
}



/************ ITEM SLIDE 4 ****************/
.ItemSlide4,
.Rotate-120deg {
 position: absolute;
 z-index: 5;
 left:auto;
 right:5vw;
 -webkit-animation:Rotate-120deg 1s linear 1;
 -moz-animation:Rotate-120deg 1s linear 1;
 animation:Rotate-120deg 1s linear 1;
 transform: rotate(-120deg);
}
@-moz-keyframes Rotate-120deg {
 from {
  transform: rotate(90deg);
 }
 to {
  transform: rotate(-120deg);
 }
}
@-webkit-keyframes Rotate-120deg {
 from {
  transform: rotate(90deg);
 }
 to {
  transform: rotate(-120deg);
 }
}
@keyframes Rotate-120deg {
 from {
  transform: rotate(90deg);
 }
 to {
  transform: rotate(-120deg);
 }
}
.Slide3Paper {
 top: 20vh;
 right: -160px;
}
.Slide4Gold {
 bottom: 10vh;
 top:auto;
 left: 20vw;
}
.Slide4Gold img {
 width:200px;
}
.Slide4USB {
 bottom: auto;
 top:20vh;
 right: 20vw;
}


/************ ITEM SLIDE 5 ****************/
.Slide5Phone {
 bottom: -480px;
 top:auto;
 left: 5vw;
}
.Slide5Pink {
 top:auto;
 left: 10vw;
 bottom:40vh;
}


/*********************** ITEM SLIDE 6 **********/
.Slide6Paper {
 bottom: -5vh;
 top: auto;
 right:-5vw;
 left: auto;
}
.Slide6Dreieck {
 bottom: 10vh;
 top: auto;
 right:15vw;
 left: auto;
 z-index: 20;
}
.Slide6Gold {
 bottom: 10vh;
 top: auto;
 left:10vw;
 right: auto;
}


/****************** ITEM SLIDE 7 *****************/
.Slide7Silver {
 bottom: 40vh;
 z-index: 20;
 left:20vw;
}
.Slide7mouse {
 bottom: 40vh;
 z-index: 20;
 right:20vw;
 left: auto;
 top: auto;
}
.Slide7eraser {
 bottom: 20vh;
 z-index: 20;
 right:30vw;
 left: auto;
 top: auto;
}



/************ Mobil Icon Slide ****************/
.MobileIcon {
 position: absolute;
 z-index: 20;
 top: 340px;
 left:auto;
 right:52.8vw;
 transform: rotate(0deg);
}
.MobileIcon img {
 -moz-border-radius:25px;
 -webkit-border-radius:25px;
 border-radius:25px;
}
.carousel-inner > .item.active.left .MobileIcon,
.carousel-inner > .item.active.right .MobileIcon {
 -webkit-animation:mobilicon 20s linear 1;
 -moz-animation:mobilicon 20s linear 1;
 animation:mobilicon 20s linear 1;
}
.carousel-inner > .item.prev.right .MobileIcon,
.carousel-inner > .item.prev.left .MobileIcon {
}
@-moz-keyframes mobilicon {
 from {
  opacity: 0;
 }
 to {
  top: 380px;
 }
}
@-webkit-keyframes mobilicon {
 from {
  opacity: 0;
 }
 to {
  top: 380px;
 }
}
@keyframes mobilicon {
 from {
  opacity: 0;
 }
 to {
  top: 380px;
 }
}







/**************** MOBILE BG ********************/
.MobileWhite {
 background: #fff;
 width:220px;
 height:372px;
 position: absolute;
 top:90px;
 right:1vw;
 z-index: -1;
}
.carousel-control.close,
.carousel-control.left,
.carousel-control.right {
 background-image: none;
 background-repeat: repeat-x;
 left: auto;
 right: 0;
}





/****************** SLIDER VERTICAL ENDE *******************************************************/
@media only screen and (max-width: 1280px) {
  
  .PhoneSlide {
    position: absolute;
    right: 45vw;
    top: 100px;
    z-index: 0;
}
  
  .MobileIcon {
 position: absolute;
 z-index: 20;
 top: 300px;
 left:auto;
 right:50vw;
 transform: rotate(0deg);
}
  
  .SliderArrow {
    bottom: 20vh;
    display: block;
    height: 80px;
    margin-top: 0;
    position: absolute;
    right: 45vw;
    width: 340px;
    z-index: 20;
}

  
  
  .Slide1Gold {
    bottom: 35vh;
    left: 5vw;
    top: auto;
}
  
  .Slide1Glasses {
    bottom: 20vh;
    left: 2vw;
    top: auto;
}
  
  .Slide3Plant {
    bottom: 20vh;
    left: -30vw;
    right: auto;
}
  
 .Slide4Gold {
    bottom: 10vh;
    left: 5vw;
    top: auto;
}
  
  .Slide4USB {
    bottom: auto;
    right: 5vw;
    top: 5vh;
}
  
  .Slide5Pink {
    bottom: 40vh;
    left: 0vw;
    top: auto;
}



  
  .Slide6Gold {
    bottom: 10vh;
    left: 2vw;
    right: auto;
    top: auto;
}
  
  .Slide7Silver {
    bottom: 40vh;
    left: 5vw;
    z-index: 20;
}

  
  
  
}


/********************* IPAD SLIDER *********************/


@media only screen and (max-width: 1080px) {
	
}





/********************* MOBILE SLIDER *********************/

@media only screen and (max-width: 420px) {

 .navbar-brand{
 	padding: 0px 15px;
 }
  
  .PhoneSlide {
    position: absolute;
    right: auto;
    left:0vw;
    top: 18%;
    z-index: 0;
  
    
    
}
  
  .PhoneSlide img{
   
  width:50vw;
  }
  
  
  
.MobileWhite {
    background: #fff none repeat scroll 0 0;
    height: 200px;
    position: absolute;
    right: 10px;
    top: 40px;
    width: 110px;
    z-index: -1;
}

  
  .MobileIcon {
 position: absolute;
 z-index: 20;
 top: 200px;
 left:20vw;
 right:auto;
 transform: rotate(0deg);
}
  
  .MobileIcon img{
    width:60px;
    border-radius:5px;
  } 
  
  
  
  
  .SliderArrow {
    bottom: 20vh;
    display: block;
    height: 80px;
    margin-top: 0;
    position: absolute;
    right: 25vw;
    top: auto;
    bottom: -100px;
    width: 340px;
    z-index: 20;
}
  
  .SliderText {
    position: absolute;
    right: 10vw;
    top: 30vh;
    width: 40vw;
    z-index: 99;
    font-size: 16px;
}
  
  .SliderTextUeberschrift {
    font-size: 38px;
    margin-bottom: 10px;
}

  
  .SliderTextSpan {
    font-size: 24px;
    line-height: 30px;
    max-width: 320px;
}



  
  
  .Slide1Gold {
    bottom: 20vh;
    left: 55vw;
    top: auto;
}
  
  .Slide1Gold img{
    width:20vw;
  }
  
  .Slide1Glasses {
    bottom: 20vh;
    left: 2vw;
    top: 400px;
    bottom:auto;
}
  
  .Slide2Silver img{
    width:20vw;
    
  }
  
  .Slide3Plant {
    bottom: 20vh;
    left: -20vw;
    right: auto;
}
  
 .Slide4Gold {
    bottom: 10vh;
    left: 5vw;
    top: auto;
}
  
  .Slide4Gold img{
    width:20vw;
  }
  
  .Slide4USB {
    bottom: auto;
    right: 5vw;
    top: 5vh;
}
  
  .Slide5Pink {
    bottom: 40vh;
    left: 0vw;
    top: auto;
}



  
  .Slide6Gold {
    bottom: 20vh;
    left: 2vw;
    right: auto;
    top: auto;
}
  
  .Slide6Gold img{
    width: 20vw;
  }
  
  .Slide7Silver {
    bottom: 40vh;
    left: 5vw;
    z-index: 20;
}
  
  .Slide7Silver img{
    width: 20vw;
  }

  
  
  
}