Team:Tianjin/Resources/CSS:videostyle

/* --

      button
              -- */

.btn {

   outline: 0;
   margin: 0 .25em .25em;
   position: relative;
   display: inline-block;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   background-image: none;
   border: 0;
   font-size: .9rem;
   font-weight: 400;
   padding: .72em 1.2em;
   font-family: inherit;
   line-height: 1.32857143;
   border-radius: .2em;
   background: #fff;
   color: inherit;
   -webkit-transition: .4s ease-out;
   transition: .4s ease-out;
   -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
   box-shadow: 0 1px 2px rgba(0, 0, 0, .15);

}

.btn.primary {

   background: #333;
   color: #fff;
   text-shadow: none;

}

/* --

      contents
              -- */

.features {

   padding: 4rem 0;

}

.features p {

   line-height: 1.2;
   color: rgba(0, 0, 0, .5);

}

1. demovi {

   margin: 3rem 0;

}

1. demovi ul {

   list-style-type: none;
   padding: 0;

}

1. demovi li {

   display: inline-block;

}

1. demovi .btn {

   color: currentColor;
   border-radius: 2em;
   -webkit-box-shadow: none;
   box-shadow: none;
   background-color: rgba(255, 255, 255, .7);
   border: #ddd 1px solid;

}

1. demovi .btn:hover {

   color: #fff;
   background-color: #9FB6CD;
   border-color: #9FB6CD;

}

1. demovi .btn.active {

   color: #fff;
   background-color: rgb(26, 182, 255);
   border-color: rgb(26, 182, 255);

}

1. demovi small {

   font-size: .7em;

}

1. demovi-gallery {

   cursor: pointer;

}

1. customize {

   color: #555;
   background-color: rgba(220, 220, 220, .93);

}

1. customize p {

   color: #888;

}

1. footer {

   background-color: rgba(0, 0, 0, .89);
   color: #fff;
   margin: 0;
   padding: 2em 0;

}

/* --

      animation
              -- */

@-webkit-keyframes bounce {

   0%,
   20%,
   50%,
   80%,
   100% {
       -webkit-transform: translateY(0);
   }
   40% {
       -webkit-transform: translateY(-30px);
   }
   60% {
       -webkit-transform: translateY(-15px);
   }

}

@keyframes bounce {

   0%,
   20%,
   50%,
   80%,
   100% {
       -ms-transform: translateY(0);
       transform: translateY(0);
   }
   40% {
       -ms-transform: translateY(-30px);
       transform: translateY(-30px);
   }
   60% {
       -ms-transform: translateY(-15px);
       transform: translateY(-15px);
   }

}

@-webkit-keyframes shake {

   0% {
       -webkit-transform: translate(20px);
   }
   20% {
       -webkit-transform: translate(-20px);
   }
   40% {
       -webkit-transform: translate(10px);

   }
   60% {
       -webkit-transform: translate(-10px);
   }
   80% {
       -webkit-transform: translate(4px);
   }
   100% {
       -webkit-transform: translate(0px);
   }

}

@keyframes shake {

   0% {
       -ms-transform: translate(20px);
       transform: translate(20px);
   }
   20% {
       -ms-transform: translate(-20px);
       transform: translate(-20px);
   }
   40% {
       -ms-transform: translate(10px);
       transform: translate(10px);
   }
   60% {
       -ms-transform: translate(-10px);
       transform: translate(-10px);
   }
   80% {
       -ms-transform: translate(4px);
       transform: translate(4px);
   }
   100% {
       -ms-transform: translate(0px);
       transform: translate(0px);
   }

}