.reveal .demo{
  display: block;
  min-height: 100px;
  width: 90%;
  position: relative;
  margin: 15px auto;
  border: 1px solid rgba(255,255,255,0.1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


/* DEMO 1 */

#demo1 .box{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: red;
  margin: 50px;
}

#demo1 .box:hover{
  background-color: yellow;
}

#demo1 .transition{
  transition: background-color 400ms linear;
}


/* DEMO 2 */
#demo2 .box{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #DDD;
  margin: 50px;
}

#demo2 .wheel{
  -webkit-animation: colorwheel 5s infinite;
}

@-webkit-keyframes colorwheel{
  0%  { background: #FF4136; }
  15% { background: #FF851B; }
  30% { background: #FFDC00; }
  45% { background: #2ECC40; }
  60% { background: #0074D9; }
  75% { background: #B10DC9; }
}

/* DEMO 3 */
#demo3 .container{
  text-align: left;
}

#demo3 .container .box{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #DDD;
  margin: 15px 25px;
}

#demo3 .container:hover .box{
  transform: translateX(760px);
}

#demo3 .box.linear{
  transition: transform 1s linear;
}

#demo3 .box.ease{
  transition: transform 1s ease;  
}

#demo3 .box.ease-out-back{
  transition: transform 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#demo3 .box.ease-in-out-expo{
  transition: transform 1s cubic-bezier(1, 0, 0, 1);
}


/* DEMO 4 */
#demo4 .content{
  margin: 20px;
}

#demo4 input.toggle {
  visibility: hidden;
  position: absolute;
  left: -9999em; }

  #demo4 input.toggle + label {
    top: 8px;
    cursor: pointer;
    display: inline-block;
    width: 57px;
    height: 24px;
    position: relative;
    border-radius: 12px;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15) inset;
    background: #f67a6f; }
    #demo4 input.toggle + label:after {
      content: '';
      display: block;
      position: absolute;
      top: 4px;
      width: 16px;
      height: 16px;
      border-radius: 100%;
      background: #eee;
      box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.15);
      transform: translateX(4px); }

  #demo4 input.toggle:checked + label {
    background: #92c213; }
    #demo4 input.toggle:checked + label:after {
      transform: translateX(37px); }

  #demo4 input.toggle.transition + label {
    transition: background .3s cubic-bezier(0.215, 0.61, 0.355, 1); /*ease-out cubic*/
  }
  #demo4 input.toggle.transition + label:after {
    transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1); /*ease-out cubic*/
  }

/*Demo 5*/

#demo5 .spinner{
  top: 30px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 100%;  
  border-left: 6px solid rgba(0,0,0,0);
  border-right: 6px solid rgba(0,0,0,0);
  border-top: 6px solid #666;
  border-bottom: 6px solid #666;
  -webkit-animation: spin 600ms infinite linear;
  position: relative;
  display: inline-block;
}

#demo5 .spinner:after{
  content: '';
  display: block;
  box-sizing: border-box;
  border-left: 6px solid rgba(0,0,0,0);
  border-right: 6px solid rgba(0,0,0,0);
  border-top: 6px solid #666;
  border-bottom: 6px solid #666;
  -webkit-animation: spin 300ms infinite linear reverse;
  border-radius: 100%;  
  width: 20px;
  height: 20px;
  position: absolute;
  top: 5px;
  left: 5px;
}

@-webkit-keyframes spin { 
  from { 
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}


/*DEMO 6*/
#demo6 .content{
  padding: 30px;
}

#demo6.inactive h2{
  opacity: 0;
  transform: translateY(-10px);
}

#demo6.inactive p{
  opacity: 0;
}

#demo6 h2{
  transition: all 300ms ease 2s;
}

#demo6 p{
  transition: opacity 1s ease 3s;
}

/*DEMO 7*/
#demo7{
  background: white;
  color: #333;
}

#demo7 .title{
  padding: 20px;
  cursor: pointer;
}

#demo7 .title img{
  margin: 0;
  box-shadow: none;
  border: none;
  transition: transform 200ms linear;
  vertical-align: middle;
}
#demo7 .title span{
  margin-left: 10px;
  margin-top: 4px;
  font-weight: bold;
  text-shadow: none;
  padding-bottom: 4px;
  border-bottom: 4px solid transparent;
  transition: border-color 200ms ease;
}

#demo7 .title:hover span{
  border-color: #2ECC40;
}

#demo7 .title:hover img{
  transform: rotateY(180deg);
}


/*DEMO 8*/
#demo8 .box{
  margin: 50px;
  width: 200px;
  display: inline-block;
  background-color: #FF4136;
  border-radius: 4px;
  cursor: pointer;
}

#demo8 .box .content{
  color: white;
  display: inline-block;
  font-weight: bold;
}

#demo8 .box.fade-out .content{
  transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045); /* Ease in back */
  opacity: 0;
  transform: scale(0);
}

#demo8 .box.fade-in-prepare .content{
  transform: scale(3);
  opacity: 0;
}

#demo8 .box.fade-in{
  background: #2ECC40;
  transition: background 500ms linear;
}

#demo8 .box.fade-in .content{
  transform: scale(1);
  opacity: 1;
  transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Ease out back */
}