/* Tiny Scrollbar */
#scrollbar1 { width: 550px; margin: 0 0 0 0;}
/*#scrollbar1 .viewport { width: 510px; height: 350px; overflow: hidden; position: relative; float: left; -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(10%,rgba(0,0,0,1)), color-stop(90%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); }*/
#scrollbar1 .viewport { width: 511px; height: 351px; overflow: hidden; position: relative; float: left; mask: url(../assets/gui/scroll.svg#m1); -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(10%,rgba(0,0,0,1)), color-stop(90%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0)));}
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0px; margin: 0px; font-family: 'Arimo', sans-serif; }
/*#scrollbar1 .scrollbar{ background: transparent url(../assets/gui/scrollbar-track.png) no-repeat 0 0; background-size: 15px; position: relative; background-position: 0 0; float: right; width: 15px; z-index: 25; }*/
#scrollbar1 .scrollbar{ position: relative; float: right; width: 15px; z-index: 25;}
#scrollbar1 .scrollbar_img{ background: transparent url(../assets/gui/scrollbar-track.png) no-repeat 0 0; background-size: 10px; position: relative; background-position: 0 0; float: right; width: 15px; height: 97%; z-index: 26; }
#scrollbar1 .track { background: transparent url(../assets/gui/scrollbar-track.png) no-repeat 0 100%; background-size: 10px; height: 100%; width:15px; position: relative; padding: 0 50px; z-index: 27}
/*#scrollbar1 .thumb { background: transparent url(../assets/gui/scrollbar-thumb.png) no-repeat 50% 100%; background-size: 15px; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; z-index: 30; }*/
/*#scrollbar1 .thumb { height: 21px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; z-index: 30;}*/
#scrollbar1 .thumb { height: 15px; width: 10px; cursor: pointer; position: absolute; top: 0; left: 0; z-index: 30; background-color:#717171; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px }  
/*
#scrollbar1 .thumb .thumb_img1 { background: transparent url(../assets/gui/scrollbar-thumb.png) no-repeat 50% 100%; background-size: 10px; height: 51%; width: 25px; overflow: hidden; position: absolute; bottom: 0px; left: -3px; z-index: 31; }
#scrollbar1 .thumb .end { background: transparent url(../assets/gui/scrollbar-thumb.png) no-repeat 0 0; background-size: 10px; overflow: hidden; height: 51%; width: 25px; z-index: 32; position: absolute; left: 5px; top: 0px }
*/
#scrollbar1 .disable { display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }

.img-circle {
  -webkit-clip-path: circle(50%, 50%, 25%);
  -webkit-border-radius: 50%;
  -moz-clip-path: circle(50%, 50%, 25%);
  -moz-border-radius: 50%;
  clip-path: circle(50%, 50%, 25%);
  border-radius: 50%;
  border: 3px solid #000;
}

input, textarea { 
	opacity: 0.7;
    -webkit-opacity: 0.7;
    filter: alpha(opacity=70);	
    padding: 9px; 
    border: solid 1px #4a4b4b; 
    outline: 0; 
    font-family: 'Arimo', sans-serif;
  	font-size: 16px;
    /*font: normal 13px/100% Verdana, Tahoma, sans-serif; */
    width: 265px;
    height: 15px;
    background: #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    position: absolute;
  	top: 0px;
  	-webkit-transform: translateY(5%);
  	-ms-transform: translateY(5%);
 	transform: translateY(5%);
    } 
   
textarea { 
    width: 400px; 
    max-width: 400px; 
    height: 150px; 
    line-height: 150%; 
    } 
   
.input-glow { 
    outline: none;
    border-color: #00D8FF;
    box-shadow: 0 0 10px #00D8FF;
    } 

.snakes-0 {
    opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);	
    transform: rotate(0.02deg);;
	-webkit-transition-property: -webkit-opacity;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: ease-in;
    pointer-events:none;
    -webkit-backface-visibility:hidden; 
	backface-visibility:hidden;
}

.snakes-100 {
    opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);	
    transform: rotate(0.02deg);;
	-webkit-transition-property: -webkit-opacity;
	-webkit-transition-duration: 0.5s;
	-webkit-transition-timing-function: ease-in;
	transition-property: opacity;
	transition-duration: 0.5s;
	transition-timing-function: ease-in;
    pointer-events:none;
    -webkit-backface-visibility:hidden; 
	backface-visibility:hidden;
}


.popup-anim {
    opacity: 0;
    -webkit-opacity: 0;
    filter: alpha(opacity=0);	
    -webkit-transform: scale(0.5); /* Chrome, Safari, Opera */
    transform: scale(0.5);

	-webkit-transition-property: -webkit-transform,-webkit-opacity;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in;
	transition-property: transform,opacity;
	transition-duration: 0.2s;
	transition-timing-function: ease-in;
    pointer-events:none;
    }

.popup-anim-popup {
   -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Chrome, Safari, Opera */
    transform: scale(1);
    opacity: 1;
    -webkit-opacity: 1;
    filter: alpha(opacity=100);	
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    pointer-events:auto;
}

.imask-anim {
	display: block;
	-moz-opacity: 0;
    -webkit-opacity: 0;
	opacity: 0;
    filter: alpha(opacity=0);	
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	-webkit-transition-property: -webkit-opacity;
	-webkit-transition-duration: 0.7s;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-property: -moz-opacity;
	-moz-transition-duration: 0.7s;
	-moz-transition-timing-function: -moz-ease-in;
	transition-property: opacity;
	transition-duration: 0.7s;
	transition-timing-function: ease-in;
    }

.imask-anim-fadein {
    opacity: 0.84;
    -moz-opacity: 0.84;
    -webkit-opacity: 0.84;
    filter: alpha(opacity=84);	
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
	-webkit-transition-property: -webkit-opacity;
	-webkit-transition-duration: 0.7s;
	-webkit-transition-timing-function: ease-in;
	-moz-transition-property: -moz-opacity;
	-moz-transition-duration: 0.7s;
	-moz-transition-timing-function: -moz-ease-in;
	transition-property: opacity;
	transition-duration: 0.7s;
	transition-timing-function: ease-in;
}

.grow-hover {
  display: inline-block;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow-hover:hover, .grow-hover:focus {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* Buzz */
@-webkit-keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

@keyframes buzz {
  50% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  100% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
}

.buzz {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-hover:hover, .buzz-hover:focus {
  -webkit-animation-name: buzz;
  animation-name: buzz;
  -webkit-animation-duration: 0.15s;
  animation-duration: 0.15s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;  
}

/* Buzz Out */
@-webkit-keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.buzz-out-click {
  display: inline-block;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out-click:active {
  -webkit-animation-name: buzz-out;
  animation-name: buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}