/* Floating Window
----------------------------------------*/
#float-carta {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: none;
}
#float-carta.enabled .float-carta__overlay {
  -webkit-animation: rotatein 1s;
          animation: rotatein 1s;
}
#float-carta.enabled .float-carta__content {
  -webkit-animation: fadein 1.5s .5s backwards;
          animation: fadein 1.5s .5s backwards;
}
#float-carta.enabled .carta__container {
  -webkit-animation: cardin .8s 1.5s backwards;
          animation: cardin .8s 1.5s backwards;
}
#float-carta.enabled .float-carta__close {
  -webkit-animation: slidein .6s 1.5s backwards;
          animation: slidein .6s 1.5s backwards;
}
#float-carta.enabled .carta__balloon,
#float-carta.enabled .btn-click {
  -webkit-animation: fadein 1s 1.5s backwards;
          animation: fadein 1s 1.5s backwards;
}
#float-carta.disabled {
  -webkit-animation: fadeout .5s forwards;
          animation: fadeout .5s forwards;
}
#float-carta .float-carta__overlay {
  background-color: #fff;
  opacity: .9;
  height: 100%;
  -webkit-transform-origin: 20% 0;
      -ms-transform-origin: 20% 0;
          transform-origin: 20% 0;
}
#float-carta .float-carta__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 133px;
  height: 133px;
  background: url(../img/common/btn_close.png) no-repeat left top;
  cursor: pointer;
}
#float-carta .float-carta__content {
  position: absolute;
  width: 790px;
  height: 582px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#float-carta .float-carta__detail {
  padding-left: 6px;
}
#float-carta .float-carta__detail h1 {
  margin-left: -6px;
}
#float-carta .float-carta__lead {
  margin-top: 30px;
  width: 380px;
  font-size: 14px;
  line-height: 1.6;
}
#float-carta .float-carta__countdown,
#float-carta .float-carta__buttons {
  margin-top: 40px;
}
#float-carta .btn-parallel {
  display: inline-block;
  border: 2px solid #fd201c;
  -webkit-transform: skew(10deg);
      -ms-transform: skew(10deg);
          transform: skew(10deg);
  margin-top: 10px;
}
#float-carta .btn-parallel:first-child {
  margin-top: 0;
}
#float-carta .btn-parallel img {
  -webkit-transform: skew(-10deg);
      -ms-transform: skew(-10deg);
          transform: skew(-10deg);
}
#float-carta .float-carta__main {
  position: absolute;
  top: 0;
  right: 0;
  width: 385px;
  height: 514px;
}
#float-carta .carta__balloon {
  position: absolute;
  top: -36px;
  right: -36px;
  z-index: 2;
}
#float-carta .carta__balloon img {
  width: 115px;
  height: 115px;
}
#float-carta .carta__container {
  position: relative;
  transition: .8s;
}
.csstransformspreserve3d #float-carta .carta__container {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.csstransformspreserve3d #float-carta .carta__container.reverse {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.csstransformspreserve3d #float-carta .float-carta__main {
  -webkit-perspective: 1000;
          perspective: 1000;
}
.csstransformspreserve3d #float-carta .carta__card--front,
.csstransformspreserve3d #float-carta .carta__card--back {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.csstransformspreserve3d #float-carta .carta__card--front {
  cursor: pointer;
}
.csstransformspreserve3d #float-carta .carta__card--back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.no-csstransformspreserve3d #float-carta .carta__container.reverse .carta__card--back {
  display: block;
}
.no-csstransformspreserve3d #float-carta .carta__card--back {
  display: none;
}
#float-carta .carta__card--front,
#float-carta .carta__card--back {
  width: 385px;
  height: 514px;
  position: absolute;
  top: 0;
  left: 0;
}
#float-carta .carta__card--front img,
#float-carta .carta__card--back img {
  width: 385px;
  height: 514px;
}
#float-carta .carta__card--back {
  position: relative;
}
#float-carta .btn-click {
  position: absolute;
  right: 0;
  bottom: -65px;
  left: 0;
  width: 104px;
  height: 60px;
  margin: 0 auto;
  cursor: pointer;
}
#float-carta .btn-sound-play {
  position: absolute;
  left: 16px;
  bottom: 16px;
  width: 80px;
  height: 80px;
  overflow: hidden;
  cursor: pointer;
}
#float-carta .btn-sound-play img {
  width: 80px;
  height: 160px;
}
#float-carta .state--play .btn-sound-play img {
  margin-top: -80px;
}

.no-audio .btn-sound-play {
  display: none;
}

/* Animations
----------------------------------------*/
@-webkit-keyframes rotatein {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
  }
  100% {
    opacity: .9;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@keyframes rotatein {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
  }
  100% {
    opacity: .9;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes cardin {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@keyframes cardin {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(-90deg);
            transform: rotateY(-90deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@-webkit-keyframes slidein {
  0% {
    -webkit-transform: translate(133px, -133px);
            transform: translate(133px, -133px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes slidein {
  0% {
    -webkit-transform: translate(133px, -133px);
            transform: translate(133px, -133px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}