/* keyframe styles */
@keyframes bounce-in {
   0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
   0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
   }
   20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
   }
   40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
   }
   60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
   }
   80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
   }
   100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

@-webkit-keyframes bounce-in {
   0%, 20%, 40%, 60%, 80%, 100% {
      -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
   0% {
      opacity: 0;
      -webkit-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
   }
   20% {
      -webkit-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
   }
   40% {
      -webkit-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
   }
   60% {
      opacity: 1;
      -webkit-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
   }
   80% {
      -webkit-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
   }
   100% {
      opacity: 1;
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}

@-moz-keyframes bounce-in {
   0%, 20%, 40%, 60%, 80%, 100% {
      -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
      transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
   }
   0% {
      opacity: 0;
      -moz-transform: scale3d(0.3, 0.3, 0.3);
      transform: scale3d(0.3, 0.3, 0.3);
   }
   20% {
      -moz-transform: scale3d(1.1, 1.1, 1.1);
      transform: scale3d(1.1, 1.1, 1.1);
   }
   40% {
      -moz-transform: scale3d(0.9, 0.9, 0.9);
      transform: scale3d(0.9, 0.9, 0.9);
   }
   60% {
      opacity: 1;
      -moz-transform: scale3d(1.03, 1.03, 1.03);
      transform: scale3d(1.03, 1.03, 1.03);
   }
   80% {
      -moz-transform: scale3d(0.97, 0.97, 0.97);
      transform: scale3d(0.97, 0.97, 0.97);
   }
   100% {
      opacity: 1;
      -moz-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
   }
}



#tcm {
   position: fixed;
   top: 2%;
   left: 1%;
   display: block;
   width: 240px;
   max-height: 96%;
   background: rgba(0, 0, 0, 0.8);
   border: 1px solid #444;
   border-radius: 4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   overflow-x: hidden;
   overflow-y: auto;
   z-index: 999999999;
   animation: 1s both bounce-in;
   -webkit-animation: 1s both bounce-in;
   -moz-animation: 1s both bounce-in;
}

#tcm *:focus {
   outline: none;
}

#tcm * {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#tcm > #tcm-header {
   position: relative;
   display: block;
   width: initial;
   text-align: center;
   background: rgba(255, 255, 255, 0.4);
   padding: 8px;
}

#tcm > #tcm-header > span {
   position: relative;
   display: block;
   font-family: 'Pacifico', cursive;
   font-size: 20px;
   color: #FFF;
   text-transform: capitalize;
   margin: 0 0 8px 0;
}

#tcm > #tcm-header > p {
   position: relative;
   display: block;
   font-size: 12px;
   color: #222;
   margin: 0;
}

#tcm > #tcm-main, #tcm > #tcm-main > div {
   position: relative;
   display: block;
   width: initial;
}

#tcm > #tcm-main {
   padding: 8px;
}

#tcm > #tcm-main > div {
   text-align: center;
}

#tcm > #tcm-main > div > span {
   position: relative;
   display: block;
   font-size: 14px;
   color: #FFF;
   text-transform: capitalize;
   margin: 0 0 8px 0;
}

#tcm > #tcm-main > div > div {
   position: relative;
   display: block;
   width: 100%;
   max-height: 160px;
   min-height: 20px;
   background: #222;
   overflow-x: hidden;
   overflow-y: auto;
   margin: 0 0 8px 0;
   border: 1px solid #444;
   border-radius: 2px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
}

#tcm > #tcm-main > div > div > span {
   position: relative;
   display: block;
   width: 100%;
   text-align: center;
   font-size: 12px;
   color: #FFF;
   padding: 4px 0;
   cursor: pointer;
}

#tcm > #tcm-main > div > div > span:hover {
   background: rgba(0, 0, 0, 0.2);
}