@-webkit-keyframes shake {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  40% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  80% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  20% {
    -webkit-transform: rotate(-20deg);
            transform: rotate(-20deg);
  }
  40% {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
  60% {
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
  }
  80% {
    -webkit-transform: rotate(10deg);
            transform: rotate(10deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

html, body {
  /*height: 100%;*/
  font-family: Roboto Condensed,Noto Sans KR,Noto Sans SC,sans-serif;
      font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: #730704;
  display: flex;
  align-items: center;
}

main {
  text-align: center;
  margin: 0 auto;
  max-width: 90em;
  padding-top: 33px;
}

.present {
  position: relative;
  display: inline-block;
  width: 14em;
  height: 14em;
  margin: .5em;
  -webkit-perspective: 850px;
          perspective: 850px;
  z-index: 666;
}

.present__pane,
.present__content {
  width: inherit;
  height: inherit;
}

.present__pane {
  position: relative;
  background: linear-gradient(135deg, #f49322 50%, #ffa63f 50%);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: 0;
          transform-origin: 0;
  -webkit-perspective: 850px;
          perspective: 850px;
  text-align: center;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15);
  cursor: pointer;
  transition: all .2s ease-out;
}

.present__pane {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top left;
}

.present__date {
  display: none !important;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 4.4em;
  height: 3.4em;
  margin: 0;
  font-size: 2em;
  line-height: 3.4em;
  background: SlateBlue;


  background: transparent url(Cloud.svg) center center no-repeat;
  background-size: 4em;
  color: white;
  /*border-radius: 50%;*/
  /*box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.15);*/
}

.present:hover, .present.open {
  z-index: 999;
}

.present:hover .present__pane, .present.open .present__pane, .present.finished .present__pane {
  background-color: linear-gradient(135deg, #f49322 50%, #ffa63f 50%);
  -webkit-transform: rotateY(-97deg);
          transform: rotateY(-97deg);
  -webkit-perspective-origin: 0;
          perspective-origin: 0;
  transition: all .25s ease-in;
}

.present.finished .present__pane, .present.open .present__pane {
  display: none;
}

.present:hover .present__date, .present.open .present__date, .present.finished .present__date {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.present:hover .present__bauble, .present.open .present__bauble {
  display: inline-block;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-animation: shake .7s;
          animation: shake .7s;
}

.present__content {
  position: absolute;
  top: 0;
  left: 0;
  background: #999999;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.15), inset 0 0 30px 20px rgba(0, 0, 0, 0.15);
  z-index: -1;
}

.present__content a, .present__content a:hover {
  text-decoration: none;
}

.present.finished .present__content {
  opacity: 0.75;
  pointer-events: none;
}


.present.finished .present__content, 
.present.open .present__content {
  overflow: hidden;
}

.present__bauble {
  position: relative;
  width: 2.6666666667em;
  height: 2.6666666667em;
  background: #f49322;
  margin: 25% auto 0 auto;
  margin: 15% auto 0 auto;
  font-size: 2.5em; /*2.6666666667em;*/
  line-height: 2.6666666667em;
  border-radius: 50%;
}

.present__bauble::after {
  content: '';
  position: absolute;
  top: -5%;
  left: 50%;
  width: 30%;
  height: 10%;
  margin-left: -15%;
  background: inherit;

  display: none;
}

.present__bauble::before {
  content: '';
  position: absolute;
  top: -15%;
  left: 50%;
  width: 12%;
  height: 20%;
  margin-left: -12%;
  border: .35rem solid #f49322;
  border-radius: 50%;
  z-index: 0;

  display: none;
}

.present__text {
  display: inline-block;
  height: 3em;
  line-height: 3em;
}

.present__text span {
  line-height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.present__text {
    padding: 10px 20px;
    color: #ffffff;
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: 700;
    font-family: Roboto Condensed,Noto Sans KR,Noto Sans SC,sans-serif;
    
}


.corner-ribbon{
  width: 200px;
  background: #e43;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 30px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);

  z-index: 2;
    font-weight: 700;
    font-family: Roboto Condensed,Noto Sans KR,Noto Sans SC,sans-serif;
    text-transform: uppercase;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
}

.corner-ribbon.top-right{
  top: 25px;
  right: -50px;
  left: auto;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


.corner-ribbon.green{background: #76ab29;}
.corner-ribbon.orange{background: #f49322;}


.present__bauble {
  margin-top: 0;
  background: url(inside.png) top left no-repeat;
  background-size: 67%;
  background-position: top center;
  height: 3.5em;
  font-size: 1.5em;
  border-radius: 0;
}

.present__bauble {
  color: white;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.present__bauble {

}

.present__bauble div.outer-c {
  max-width: 50%;
  margin: 0 auto;
  padding-top: 22%;
  line-height: 1em;
  /*display: table;*/
  /*height: 30%;*/
}

.present__bauble div.outer-c .inner-c {
 /* display: table-cell;
  vertical-align: middle;
  height: 30%;*/

  display: table;
      width: 100%;
      height: 3.8em;
      vertical-align: middle;
}

.inner-t {
  display: table-cell;
  vertical-align: middle;
}

.present__text {
  padding-top: 65%;
}

.present__content {
  background-color: #272727;
}

.open .present__content::before, .present:hover .present__content::before, .present.finished .present__content::before {
  position: absolute;
  top: 0;
  left: 0;
  content: " ";
  display: block;
  height: calc(14em - 6px);
  width: calc(14em - 6px);
  border: 3px solid #f49322;
}


@media only screen and (max-width: 800px) {
    main {
      max-width: 60em;
      padding-top: 0;
    }
    .present.finished {
      display: none;
    }
  .present {
    width: calc(50vw - 1em);
    height: calc(50vw - 1em);
  }

  .open .present__content::before, .present:hover .present__content::before, .present.finished .present__content::before {
    height: calc(50vw - 6px - 1em);
    width: calc(50vw - 6px - 1em);
  }
  .present__bauble div.outer-c .inner-c {
    font-size: 20px;
  }

  .present__text {
    font-stretch: 18px;
  }
}