#santasPresents{
    position: absolute;
    bottom:0px;
    right:0px;
    /* height: 30vw; */

}
.present {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    position: relative;
    float:left;
    /* position:absolute; */
    bottom:0;
    width: 30vw;
    z-index: 1000;
  }
  .activePresent .present_color_0,
  .activePresent .present_color_3{
    top: 0vw !important;
  }
  .activePresent .present_color_1,
  .activePresent .present_color_2,
  .activePresent .present_color_4{
    top: 5vw !important;
  }
  .activePresent .present_color_5{
    top: 10vw !important;
  }
  .present__box {
    /* background-color: #FE4365;
    background-image: repeating-linear-gradient(45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px); */
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0 0 0.5vw 0.5vw;
    box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1);
  }
  .present__ribbon--horizontal, .present__ribbon--vetical {
    content: "";
    position: absolute;
    margin: auto;
    background-color: #F9CDAD;
  }
  .present__ribbon--vertical {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 5vw;
    height: 100%;
    background-color: #F9CDAD;
    background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.2) 70%, transparent);
    box-shadow: inset 0 -4px 6px -2px rgba(0, 0, 0, 0.1), 4px 0 6px -2px rgba(0, 0, 0, 0.1);
  }
  .present__box .present__ribbon--vertical {
    height: 80%;
  }
  .present__ribbon--horizontal {
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5vw;
    background-image: linear-gradient(80deg, transparent, rgba(255, 255, 255, 0.3) 60%, transparent);
    box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.1);
  }
  .present__top {
    /* background-image: repeating-linear-gradient(-45deg, #fe2f54, #fe2f54 1px, #FE4365 1px, #FE4365 4px); */
    position: absolute;
    top: 0;
    left: -1%;
    width: 102%;
    height: 20%;
    border-radius: 0.5vw 0.5vw 0 0;
    box-shadow: inset -6px -6px 36px rgba(0, 0, 0, 0.1);
  }
  .present__box .present__ribbon--horizontal span{
    position: absolute;
    margin: auto;
    z-index: 1000;
    width: 100%;
    text-align: center;
  }
  .present_color_0 .present__top{
    background-color: #FE4365;
  }
  .present_color_1 .present__top{
    background-color: #4356fe;
  }
  .present_color_2 .present__top{
    background-color: #68fe43;
  }
  .present_color_3 .present__top{
    background-color: #fe43df;
  }
  .present_color_4 .present__top{
    background-color: #43fee5;
  }
  .present_color_5 .present__top{
    background-color: #fec343;
  }
  .present_color_0{
    background-color: #FE4365;
    /* width: 30vw; */
    height: 30vw;
    top: 0vw;
    /* margin-top: 20%; */
  }
  .present_color_1{
    background-color: #4356fe;
    /* width: 30vw; */
    height: 25vw;
    top: 5vw;
    /* margin-top: 20%; */
  }
  .present_color_2{
    background-color: #68fe43;
    /* width: 30vw; */
    height: 25vw;
    top: 5vw;
    /* margin-top: 20%; */
  }
  .present_color_3{
    background-color: #fe43df;
    /* width: 30vw; */
    height: 30vw;
    top: 0vw;
    /* margin-top: 20%; */
  }
  .present_color_4{
    background-color: #43fee5;
    /* width: 25vw; */
    height: 25vw;
    top: 5vw;
    /* margin-top: 20%; */
  }
  .present_color_5{
    background-color: #fec343;
    /* width: 30vw; */
    height: 20vw;
    top: 10vw;
    /* margin-top: 20%; */
  }
  .present__bow {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    margin: auto;
    width: 30%;
    height: 40%;
    background-color: #83AF9B;
    border-radius: 2px 2px 0 0;
    box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1);
  }
  .present__bow:before, .present__bow:after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 70%;
    height: 150%;
    background-color: inherit;
    border-radius: 2px;
    z-index: -1;
  }
  .present__bow:before {
    left: 0;
    transform: rotate(45deg);
    box-shadow: inset 6px 6px 6px rgba(0, 0, 0, 0.1);
  }
  .present__bow:after {
    right: 0;
    transform: rotate(-45deg);
    box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.1);
  }
  
  .present_santa {
    position: absolute;
    right: 0;
    bottom: 90%;
    left: 0;
    margin: auto;
    width: 60%;
    background-color: #E1B899;
    border-radius: 100%;
  }
  .present_santa:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }
  .present_santa__eyes {
    position: absolute;
    top: 35%;
    width: 100%;
    height: 100%;
  }
  .present_santa__eyes:before, .present_santa__eyes:after {
    content: "";
    position: absolute;
    width: 1.4vw;
    height: 1.4vw;
    background-color: #111111;
    border-radius: 100%;
  }
  .present_santa__eyes:before {
    left: 30%;
  }
  .present_santa__eyes:after {
    right: 30%;
  }
  .present_santa__beard {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: 50%;
    background-color: white;
    border-radius: 0 0 4vw 4vw;    
    box-shadow: 0px 5px 5px 0px grey;
  }
  .present_santa__beard:before, .present_santa__beard:after {
    content: "";
    position: absolute;
    bottom: 100%;
    width: 15%;
    height: 25%;
    background-color: inherit;
  }
  .present_santa__beard:before {
    left: 0;
    border-radius: 0 4vw 0 0;
  }
  .present_santa__beard:after {
    right: 0;
    border-radius: 4vw 0 0 0;
  }
  .present_santa__beard--cover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 70%;
    height: 50%;
    background-color: #E1B899;
    border-radius: 0 0 2vw 2vw;
  }
  .present_santa__beard--cover:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 50%;
    height: 100%;
    background-color: white;
    border-radius: 1vw 1vw 0 0;
  }
  .present_santa__smile {
    position: absolute;
    right: 0;
    bottom: 30%;
    left: 0;
    margin: auto;
    width: 15%;
    height: 20%;
    background-color: #111111;
    border-radius: 4vw;
  }
  .present_santa__smile:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: white;
  }
  
  .present {
    -webkit-animation: shake 5s ease-in-out infinite;
            animation: shake 5s ease-in-out infinite;
  }
  .present__top {
    transform: translateY(0);
    transition: transform 0.2s ease-in;
  }
  
  .present_santa {
    opacity: 0;
    transform: translateY(17vw);
    transition: opacity 0s 0.2s, transform 0.2s ease-in;
  }
  
  .present:hover {
    -webkit-animation: none;
            animation: none;
  }
  .activePresent .present_santa{ /*.present:hover .present_santa {*/
    opacity: 1;
    transform: translateY(0);
    -webkit-animation: pop-up 0.4s ease-in;
            animation: pop-up 0.4s ease-in;
    transition: opacity 0s;
  }
  .activePresent .present__top{ /*.present:hover .present__top {*/
    transform: translateY(-17vw);
    -webkit-animation: pop-the-top 0.4s ease-in;
            animation: pop-the-top 0.4s ease-in;
  }
  
  @-webkit-keyframes pop-the-top {
    0% {
      transform: translateY(0);
    }
    30% {
      transform: translateY(-24vw);
    }
    60% {
      transform: translateY(-16vw);
    }
    75% {
      transform: translateY(-18vw);
    }
    90%, 100% {
      transform: translateY(-17vw);
    }
  }
  
  @keyframes pop-the-top {
    0% {
      transform: translateY(0);
    }
    30% {
      transform: translateY(-24vw);
    }
    60% {
      transform: translateY(-16vw);
    }
    75% {
      transform: translateY(-18vw);
    }
    90%, 100% {
      transform: translateY(-17vw);
    }
  }
  @-webkit-keyframes pop-up {
    0% {
      transform: translateY(17vw);
    }
    30%, 100% {
      transform: translateY(0);
    }
  }
  @keyframes pop-up {
    0% {
      transform: translateY(17vw);
    }
    30%, 100% {
      transform: translateY(0);
    }
  }
  @-webkit-keyframes shake {
    52% {
      transform: translateX(-0.2vw);
    }
    54% {
      transform: translateX(0.2vw);
    }
    56% {
      transform: translateX(-0.5vw);
    }
    58% {
      transform: translateX(0.5vw);
    }
    60% {
      transform: translateX(-0.2vw);
    }
    62% {
      transform: translateX(0.2vw);
    }
    64% {
      transform: translateX(0);
    }
  }
  @keyframes shake {
    52% {
      transform: translateX(-0.2vw);
    }
    54% {
      transform: translateX(0.2vw);
    }
    56% {
      transform: translateX(-0.5vw);
    }
    58% {
      transform: translateX(0.5vw);
    }
    60% {
      transform: translateX(-0.2vw);
    }
    62% {
      transform: translateX(0.2vw);
    }
    64% {
      transform: translateX(0);
    }
  }