.center{display: flex;
  align-items: center;
  justify-content: center;width:100%; height:500px;background-color:#fff;overflow:hidden;}
#container{position:absolute;border:none;width:400px;height:500px;overflow:hidden;}
#container3{position:absolute;border:none;width:400px;height:500px;overflow:hidden;}


input{background:#fff;font-size:14px;padding:6px 10px 6px 10px;border:1px solid #ccc;-webkit-appearance:none;border-radius:0px;}


.myButton input{font-family:'Sackers';text-transform: lowercase;font-size: 16px;line-height:10px;padding-top:7px;letter-spacing: 0.1em;}
.myButton input:hover:enabled{background:#F27898;color:#fff;}
.dragItem{box-shadow: 0px 0px 3px rgba(0,0,0,0.2); width:70px;-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;}

.dragItem2{box-shadow: 0px 0px 3px rgba(0,0,0,0.2); width:170px;-webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;padding:7px;}
.legende{font-size:14px !important}
.dropZone{background-image: url('../images/pack.png'); background-origin: content-box;background-size:cover;}
.dropZone2{background:#000;}
.feedbackBox{background:rgba(0,0,0,0.8);padding:10px;z-index:100000;}
.blueBox{background:#6aa0bd;padding:7px;}
.cent{text-align:center;}
.white{color:#fff;}
.border{border:1px solid red;}


.anime {
    background: linear-gradient(270deg, #edbce4, #91dbed, #ffffff);
    background-size: 600% 600%;

    -webkit-animation: AnimationName 30s ease infinite;
    -moz-animation: AnimationName 30s ease infinite;
    -o-animation: AnimationName 30s ease infinite;
    animation: AnimationName 30s ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName { 
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}




/* preloader */
.preloader{
    width:34px;
    height:34px;
    display:inline-block;
    padding:0px;
    
    border-radius:100%;
    border:2px solid;
    border-top-color:rgba(0,0,0, 0.8);
    border-bottom-color:rgba(0,0,0, 0.2);
    border-left-color:rgba(0,0,0, 0.8);
    border-right-color:rgba(0,0,0, 0.2);
    outline: 1px solid transparent;

    -webkit-animation: preloader 1s linear infinite;
    animation: preloader 1s linear infinite;
}
@keyframes preloader{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes preloader{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}



    .margintop {height:100px; !important;}
    @media screen  and (min-width: 900px) {
           .timeline {max-width:800px;left:calc(50vw - 400px);}}
  .card {
  -webkit-perspective: 600px;
          perspective: 600px;
  position: relative;
      border:0;
}
.card.is-switched .card__wrapper {
  -webkit-animation: rotate 0.5s linear both;
          animation: rotate 0.5s linear both;
}

.card__wrapper {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: rotate-inverse 0.5s linear both;
          animation: rotate-inverse 0.5s linear both;
}

.card__side {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.card__side.is-active {
  position: static;
}

.card__side--back {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  70% {
    -webkit-transform: rotateY(200deg);
            transform: rotateY(200deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
  70% {
    -webkit-transform: rotateY(200deg);
            transform: rotateY(200deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}
@-webkit-keyframes rotate-inverse {
  0% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  70% {
    -webkit-transform: rotateY(-20deg);
            transform: rotateY(-20deg);
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}
@keyframes rotate-inverse {
  0% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
  70% {
    -webkit-transform: rotateY(-20deg);
            transform: rotateY(-20deg);
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
  }
}


.card {
  margin: 0;
    width:100%
  max-width: 800px;
}

.card__side {

}

.card__side--back {
  background-color: #fff;
    height:100%;
}
    
    .card__side--back-adut {
  background-color: #F27898;
  padding:30px;
        height:100% !important;
}

    
        .card__side--back-anwar {
  background-color: #000;
            color:#fff;
    padding:70px;
             padding-top:30px;
        height:100% !important;
}