/* slider 01 korra */

.carouselItemBg {
  width: 100%;
  height: auto;
}

.carouselItemBg img{
  max-width: 100%;
  height: auto;
}

/* korra */

.korraBox {
  position: absolute;
  top: 20%;
  right: 5%;
  width: 40%;
  height: auto;
}
.korraBox img{
  max-width: 100%;
  height: auto;
}
.korraBox.slideElementHidden {
   transform: translate(0px,20px);
}
.korraBox.slideElementVisible {
   transition-delay: 0.5s;
}

.korraLogo {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 50%;
  height: auto;
}
.korraLogo img{
  width: 100%;
  height: auto;
}
.korraLogo.slideElementHidden {
   transform: translate(-20px,0px);
}

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

/* trashPack */

.trashPackBox {
  position: absolute;
  top: 8%;
  right: 5%;
  width: 40%;
  height: auto;
}
.trashPackBox img{
  width: 100%;
  height: auto;
}
.trashPackBox.slideElementHidden {
   transform: translate(0px,20px);
}
.trashPackBox.slideElementVisible {
   transition-delay: 0.5s;
}

.trashPackCharacter {
  position: absolute;
  top: 50%;
  left: 36%;
  width: 32%;
  height: auto;
}
.trashPackCharacter img{
  width: 100%;
  height: auto;
}
.trashPackCharacter.slideElementHidden {
   transform: translate(0px,20px);
}
.trashPackCharacter.slideElementVisible {
   transition-delay: 0.5s;
}

.trashPackLogo {
  position: absolute;
  top: 6%;
  left: 8%;
  width: 50%;
  height: auto;
}
.trashPackLogo img{
  width: 100%;
  height: auto;
}
.trashPackLogo.slideElementHidden {
   transform: translate(-20px,0px);
}

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

/* hoyle */

.hoyleBox {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 34%;
  height: auto;
}
.hoyleBox img{
  width: 100%;
  height: auto;
}
.hoyleBox.slideElementHidden {
   transform: translate(0px,20px);
}
.hoyleBox.slideElementVisible {
   transition-delay: 0.5s;
}

.hoyleLogo {
  position: absolute;
  top: 20%;
  left: 10%;
  width: 40%;
  height: auto;
}
.hoyleLogo img{
  width: 100%;
  height: auto;
}
.hoyleLogo.slideElementHidden {
   transform: translate(-20px,0px);
}

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