.clear,.clearfix{clear:both}
.clear:after,.clearfix:after{content:" ";display:block;height:0;font-size:0;clear:both;visibility:hidden}

/* padding */	
.padded{padding:10px}
.half-padded{padding:5px}
.double-padded{padding:20px}
.triple-padded{padding:30px}
.pad-top{padding-top:10px}
.half-pad-top{padding-top:5px}
.double-pad-top{padding-top:20px}
.triple-pad-top{padding-top:30px}
.pad-right{padding-right:10px}
.half-pad-right{padding-right:5px}
.double-pad-right{padding-right:20px}
.triple-pad-right{padding-right:30px}
.pad-bottom{padding-bottom:10px}
.half-pad-bottom{padding-bottom:5px}
.double-pad-bottom{padding-bottom:20px}
.triple-pad-bottom{padding-bottom:30px}
.pad-left{padding-left:10px}
.half-pad-left{padding-left:5px}
.double-pad-left{padding-left:20px}
.triple-pad-left{padding-left:30px}

/* gapped */	
.gapped{margin:10px}
.half-gapped{margin:5px}
.double-gapped{margin:20px}
.triple-gapped{margin:30px}
.gap-top{margin-top:10px}
.half-gap-top{margin-top:5px}
.double-gap-top{margin-top:20px}
.triple-gap-top{margin-top:30px}
.gap-right{margin-right:10px}
.half-gap-right{margin-right:5px}
.double-gap-right{margin-right:20px}
.triple-gap-right{margin-right:30px}
.gap-bottom{margin-bottom:10px}
.half-gap-bottom{margin-bottom:5px}
.double-gap-bottom{margin-bottom:20px}
.triple-gap-bottom{margin-bottom:30px}
.gap-left{margin-left:10px}
.half-gap-left{margin-left:5px}
.double-gap-left{margin-left:20px}
.triple-gap-left{margin-left:30px}

/* offset */
.offset{margin:-10px}
.half-offset{margin:-5px}
.double-offset{margin:-20px}
.triple-offset{margin:-30px}
.offset-top{margin-top:-10px}
.half-offset-top{margin-top:-5px}
.double-offset-top{margin-top:-20px}
.triple-offset-top{margin-top:-30px}
.offset-right{margin-right:-10px}
.half-offset-right{margin-right:-5px}
.double-offset-right{margin-right:-20px}
.triple-offset-right{margin-right:-30px}
.offset-bottom{margin-bottom:-10px}
.half-offset-bottom{margin-bottom:-5px}
.double-offset-bottom{margin-bottom:-20px}
.triple-offset-bottom{margin-bottom:-30px}
.offset-left{margin-left:-10px}
.half-offset-left{margin-left:-5px}
.double-offset-left{margin-left:-20px}
.triple-offset-left{margin-left:-30px}

/* positioning */
.stick,.fixed{position:fixed}
.stick.top,.fixed.top{position:fixed;top:0}
.stick.right,.fixed.right{position:fixed;right:0}
.stick.bottom,.fixed.bottom{position:fixed;bottom:0}
.stick.left,.fixed.left{position:fixed;left:0}
.stick.middle,.fixed.middle{position:fixed;top:50%}
.stick.center,.fixed.center{position:fixed;left:50%}

.absolute{position:absolute}
.absolute.top{position:absolute;top:0}
.absolute.right{position:absolute;right:0}
.absolute.bottom{position:absolute;bottom:0}
.absolute.left{position:absolute;left:0}
.absolute.middle{position:absolute;top:50%}
.absolute.center{position:absolute;left:50%}

.relative{position:relative}

.static{position:static}

.inline{display:inline}
.inline-block{display:inline-block;width:auto}

.block{display:block}

.hidden{display:none!important}

/* font text size*/	
.small{font-size:.8em}
.medium{font-size:1em}
.large{font-size:1.5em}

.unstyled,.zero{margin:0;padding:0}
.pull-right{float:right}
.pull-left{float:left}
.pull-none{float:none}

/* border */	
.bordered{border:1px solid #ddd}
.border-top{border-top:1px solid #ddd}
.border-right{border-right:1px solid #ddd}
.border-bottom{border-bottom:1px solid #ddd}
.border-left{border-left:1px solid #ddd}

.square{-webkit-border-radius:0;-moz-border-radius:0;-ms-border-radius:0;-o-border-radius:0;border-radius:0}
.round{-webkit-border-radius:9999em;-moz-border-radius:9999em;-ms-border-radius:9999em;-o-border-radius:9999em;border-radius:9999em}

/* text align */
.align-top{display:table-cell;vertical-align:top}
.align-right{text-align:right}
.align-bottom{display:table-cell;vertical-align:bottom}
.align-left{text-align:left}
.align-center{text-align:center}
.justify{text-align:justify}
.unstyled{list-style:none}
.truncate{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.center{display:block;margin:0 auto}

/* rotate */	
.rotate-90{display:inline-block;width:auto;-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg)}
.rotate-90-ctr{display:inline-block;width:auto;-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg);transform:rotate(-90deg)}
.rotate-180{display:inline-block;width:auto;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg)}
.rotate-180-ctr{display:inline-block;width:auto;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.rotate-270{display:inline-block;width:auto;-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg);-ms-transform:rotate(270deg);-o-transform:rotate(270deg);transform:rotate(270deg)}
.rotate-270-ctr{display:inline-block;width:auto;-webkit-transform:rotate(-270deg);-moz-transform:rotate(-270deg);-ms-transform:rotate(-270deg);-o-transform:rotate(-270deg);transform:rotate(-270deg)}
.rotate-360{display:inline-block;width:auto;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
.rotate-360-ctr{display:inline-block;width:auto;-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg)}

.transition{-webkit-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s;transition:all 1s}
.no-transition{transition:none!important}

body{-webkit-backface-visibility:hidden}

/* animation */	
.animated{animation-duration:1s;animation-fill-mode:both}@keyframes bounce{0%,20%,50%,80%,100%{transform:translateY(0)}40%{transform:translateY(-30px)}60%{transform:translateY(-15px)}}
.bounce{animation-name:bounce}@keyframes bounceIn{0%{opacity:0;transform:scale(0.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(0.9)}100%{transform:scale(1)}}
.bounceIn{animation-name:bounceIn}@keyframes bounceInUp{0%{opacity:0;transform:translateY(2000px)}60%{opacity:1;transform:translateY(-30px)}80%{transform:translateY(10px)}100%{transform:translateY(0)}}
.bounceInUp{animation-name:bounceInUp}@keyframes bounceInDown{0%{opacity:0;transform:translateY(-2000px)}60%{opacity:1;transform:translateY(30px)}80%{transform:translateY(-10px)}100%{transform:translateY(0)}}
.bounceInDown{animation-name:bounceInDown}@keyframes bounceInLeft{0%{opacity:0;transform:translateX(-2000px)}60%{opacity:1;transform:translateX(30px)}80%{transform:translateX(-10px)}100%{transform:translateX(0)}}
.bounceInLeft{animation-name:bounceInLeft}@keyframes bounceInRight{0%{opacity:0;transform:translateX(2000px)}60%{opacity:1;transform:translateX(-30px)}80%{transform:translateX(10px)}100%{transform:translateX(0)}}
.bounceInRight{animation-name:bounceInRight}@keyframes bounceOut{0%{transform:scale(1)}25%{transform:scale(0.95)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(0.3)}}
.bounceOut{animation-name:bounceOut}@keyframes bounceOutUp{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(20px)}100%{opacity:0;transform:translateY(-2000px)}}
.bounceOutUp{animation-name:bounceOutUp}@keyframes bounceOutDown{0%{transform:translateY(0)}20%{opacity:1;transform:translateY(-20px)}100%{opacity:0;transform:translateY(2000px)}}
.bounceOutDown{animation-name:bounceOutDown}@keyframes bounceOutLeft{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(20px)}100%{opacity:0;transform:translateX(-2000px)}}
.bounceOutLeft{animation-name:bounceOutLeft}@keyframes bounceOutRight{0%{transform:translateX(0)}20%{opacity:1;transform:translateX(-20px)}100%{opacity:0;transform:translateX(2000px)}}
.bounceOutRight{animation-name:bounceOutRight}@keyframes rotateIn{0%{transform-origin:center center;transform:rotate(-200deg);opacity:0}100%{transform-origin:center center;transform:rotate(0);opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}
.fadeIn{animation-name:fadeIn} @keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.fadeInUp{animation-name:fadeInUp}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
.fadeInDown{animation-name:fadeInDown}@keyframes fadeInLeft{0%{opacity:0;transform:translateX(-20px)}100%{opacity:1;transform:translateX(0)}}
.fadeInLeft{animation-name:fadeInLeft}@keyframes fadeInRight{0%{opacity:0;transform:translateX(20px)}100%{opacity:1;transform:translateX(0)}}
.fadeInRight{animation-name:fadeInRight}@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px)}100%{opacity:1;transform:translateY(0)}}
.fadeInUpBig{animation-name:fadeInUpBig}@keyframes fadeInDownBig{0%{opacity:0;transform:translateY(-2000px)}100%{opacity:1;transform:translateY(0)}}
.fadeInDownBig{animation-name:fadeInDownBig}@keyframes fadeInLeftBig{0%{opacity:0;transform:translateX(-2000px)}100%{opacity:1;transform:translateX(0)}}
.fadeInLeftBig{animation-name:fadeInLeftBig}@keyframes fadeInRightBig{0%{opacity:0;transform:translateX(2000px)}100%{opacity:1;transform:translateX(0)}}
.fadeInRightBig{animation-name:fadeInRightBig}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}
.fadeOut,.dismiss{animation-name:fadeOut}@keyframes fadeOutUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}
.fadeOutUp{animation-name:fadeOutUp}@keyframes fadeOutDown{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(20px)}}
.fadeOutDown{animation-name:fadeOutDown}@keyframes fadeOutLeft{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-20px)}}
.fadeOutLeft{animation-name:fadeOutLeft}@keyframes fadeOutRight{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(20px)}}
.fadeOutRight{animation-name:fadeOutRight}@keyframes fadeOutUpBig{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-2000px)}}
.fadeOutUpBig{animation-name:fadeOutUpBig}@keyframes fadeOutDownBig{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(2000px)}}
.fadeOutDownBig{animation-name:fadeOutDownBig}@keyframes fadeOutLeftBig{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(-2000px)}}
.fadeOutLeftBig{animation-name:fadeOutLeftBig}@keyframes fadeOutRightBig{0%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(2000px)}}
.fadeOutRightBig{animation-name:fadeOutRightBig}@keyframes flash{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
.flash{animation-name:flash}@keyframes flip{0%{transform:perspective(400px) rotateY(0);animation-timing-function:ease-out}40%{transform:perspective(400px) translateZ(150px) rotateY(170deg);animation-timing-function:ease-out}50%{transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);animation-timing-function:ease-in}80%{transform:perspective(400px) rotateY(360deg) scale(0.95);animation-timing-function:ease-in}100%{transform:perspective(400px) scale(1);animation-timing-function:ease-in}}
.flip{backface-visibility:visible!important;animation-name:flip}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0}40%{transform:perspective(400px) rotateX(-10deg)}70%{transform:perspective(400px) rotateX(10deg)}100%{transform:perspective(400px) rotateX(0deg);opacity:1}}
.flipInX{backface-visibility:visible!important;animation-name:flipInX}@keyframes flipOutX{0%{transform:perspective(400px) rotateX(0deg);opacity:1}100%{transform:perspective(400px) rotateX(90deg);opacity:0}}
.flipOutX{animation-name:flipOutX;backface-visibility:visible!important}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-10deg)}70%{transform:perspective(400px) rotateY(10deg)}100%{transform:perspective(400px) rotateY(0deg);opacity:1}}
.flipInY{backface-visibility:visible!important;animation-name:flipInY}@keyframes flipOutY{0%{transform:perspective(400px) rotateY(0deg);opacity:1}100%{transform:perspective(400px) rotateY(90deg);opacity:0}}
.flipOutY{backface-visibility:visible!important;animation-name:flipOutY}@keyframes hinge{0%{transform:rotate(0);transform-origin:top left;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;animation-timing-function:ease-in-out}40%{transform:rotate(60deg);transform-origin:top left;animation-timing-function:ease-in-out}80%{transform:rotate(60deg) translateY(0);opacity:1;transform-origin:top left;animation-timing-function:ease-in-out}100%{transform:translateY(700px);opacity:0}}
.hinge{animation-name:hinge}
.animated.hinge{animation-duration:2s}@keyframes lightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);opacity:0}60%{transform:translateX(-20%) skewX(30deg);opacity:1}80%{transform:translateX(0%) skewX(-15deg);opacity:1}100%{transform:translateX(0%) skewX(0deg);opacity:1}}
.lightSpeedIn{animation-name:lightSpeedIn;animation-timing-function:ease-out}
.animated.lightSpeedIn{animation-duration:.5s}@keyframes lightSpeedOut{0%{transform:translateX(0%) skewX(0deg);opacity:1}100%{transform:translateX(100%) skewX(-30deg);opacity:0}}
.lightSpeedOut{animation-name:lightSpeedOut;animation-timing-function:ease-in}
.animated.lightSpeedOut{animation-duration:.25s}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
.pulse{animation-name:pulse}@keyframes rollIn{0%{opacity:0;transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;transform:translateX(0px) rotate(0deg)}}
.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1;transform:translateX(0px) rotate(0deg)}100%{opacity:0;transform:translateX(100%) rotate(120deg)}}
.rollOut{animation-name:rollOut}@keyframes lightSpeedIn{0%{transform:translateX(100%) skewX(-30deg);opacity:0}60%{transform:translateX(-20%) skewX(30deg);opacity:1}80%{transform:translateX(0%) skewX(-15deg);opacity:1}100%{transform:translateX(0%) skewX(0deg);opacity:1}}
.rotateIn{animation-name:rotateIn}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}
.rotateInUpLeft{animation-name:rotateInUpLeft}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:left bottom;transform:rotate(0);opacity:1}}
.rotateInDownLeft{animation-name:rotateInDownLeft}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}
.rotateInUpRight{animation-name:rotateInUpRight}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}100%{transform-origin:right bottom;transform:rotate(0);opacity:1}}
.rotateInDownRight{animation-name:rotateInDownRight}@keyframes rotateOut{0%{transform-origin:center center;transform:rotate(0);opacity:1}100%{transform-origin:center center;transform:rotate(200deg);opacity:0}}
.rotateOut{animation-name:rotateOut}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(-90deg);opacity:0}}
.rotateOutUpLeft{animation-name:rotateOutUpLeft}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;transform:rotate(0);opacity:1}100%{transform-origin:left bottom;transform:rotate(90deg);opacity:0}}
.rotateOutDownLeft{animation-name:rotateOutDownLeft}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}
.rotateOutUpRight{animation-name:rotateOutUpRight}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;transform:rotate(0);opacity:1}100%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}}
.rotateOutDownRight{animation-name:rotateOutDownRight}@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-10px)}20%,40%,60%,80%{transform:translateX(10px)}}
.shake{animation-name:shake}
.spin{display:inline;animation:spin 2s linear;animation-iteration-count:infinite}
.spin-once{display:inline;animation:spin 2s linear;animation-iteration-count:1}
.spin-twice{display:inline;animation:spin 2s linear;animation-iteration-count:2}
.spin-thrice{display:inline;animation:spin 2s linear;animation-iteration-count:3}
.spin-fast{display:inline;animation:spin 1s linear;animation-iteration-count:infinite}
.spin-fast-once{display:inline;animation:spin 1s linear;animation-iteration-count:1}
.spin-fast-twice{display:inline;animation:spin 1s linear;animation-iteration-count:2}
.spin-fast-thrice{display:inline;animation:spin 1s linear;animation-iteration-count:3}
.spin-slow{display:inline;animation:spin 5s linear;animation-iteration-count:infinite}
.spin-slow-once{display:inline;animation:spin 5s linear;animation-iteration-count:1}
.spin-slow-twice{display:inline;animation:spin 5s linear;animation-iteration-count:2}
.spin-slow-thrice{display:inline;animation:spin 5s linear;animation-iteration-count:3}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}100%{transform:rotate(0deg)}}
.swing{transform-origin:top center;animation-name:swing}@keyframes tada{0%{transform:scale(1)}10%,20%{transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
.tada{animation-name:tada}@keyframes wiggle{0%{transform:skewX(9deg)}10%{transform:skewX(-8deg)}20%{transform:skewX(7deg)}30%{transform:skewX(-6deg)}40%{transform:skewX(5deg)}50%{transform:skewX(-4deg)}60%{transform:skewX(3deg)}70%{transform:skewX(-2deg)}80%{transform:skewX(1deg)}90%{transform:skewX(0deg)}100%{transform:skewX(0deg)}}
.wiggle{animation-name:wiggle;animation-timing-function:ease-in}
.animated.wiggle{animation-duration:.75s}@keyframes wobble{0%{transform:translateX(0%)}15%{transform:translateX(-25%) rotate(-5deg)}30%{transform:translateX(20%) rotate(3deg)}45%{transform:translateX(-15%) rotate(-3deg)}60%{transform:translateX(10%) rotate(2deg)}75%{transform:translateX(-5%) rotate(-1deg)}100%{transform:translateX(0%)}}
.wobble{animation-name:wobble}@keyframes slideInDown{0%{opacity:0;transform:translateY(-2000px)}100%{transform:translateY(0)}}
.slideInDown{animation-name:slideInDown}@keyframes slideInLeft{0%{opacity:0;transform:translateX(-2000px)}100%{transform:translateX(0)}}
.slideInLeft{animation-name:slideInLeft}@keyframes slideInRight{0%{opacity:0;transform:translateX(2000px)}100%{transform:translateX(0)}}
.slideInRight{animation-name:slideInRight}@keyframes slideOutLeft{0%{transform:translateX(0)}100%{opacity:0;transform:translateX(-2000px)}}
.slideOutLeft{animation-name:slideOutLeft}@keyframes slideOutRight{0%{transform:translateX(0)}100%{opacity:0;transform:translateX(2000px)}}
.slideOutRight{animation-name:slideOutRight}@keyframes slideOutUp{0%{transform:translateY(0)}100%{opacity:0;transform:translateY(-2000px)}}
.slideOutUp{animation-name:slideOutUp}