/*!
 * Marka - v0.2.0-dev
 * http://fian.my.id/marka
 *
 * Copyright 2014 Alfiana E. Sibuea and other contributors
 * Released under the MIT license
 * https://github.com/fians/marka/blob/master/LICENSE
 */

/* Core style */
.marka {
    position: relative;
    display: inline-block;
    vertical-align: bottom;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

.marka i {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #000000;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}

.marka-set i {
    opacity: 1;
}

/* Rotation */
.marka.marka-rotate-right {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

.marka.marka-rotate-left {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.marka.marka-rotate-down {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* Angle icon */
.marka.marka-icon-angle-double i {
  	-webkit-transform: rotate(45deg) scale(0.4, 0.1) translate(0%, -150%);
  	-moz-transform: rotate(45deg) scale(0.4, 0.1) translate(0%, -150%);
  	transform: rotate(45deg) scale(0.4, 0.1) translate(0%, -150%);
}

.marka.marka-icon-angle-double i:nth-child(2) {
  	-webkit-transform: rotate(135deg) scale(0.4, 0.1) translate(0%, 150%);
  	-moz-transform: rotate(135deg) scale(0.4, 0.1) translate(0%, 150%);
  	transform: rotate(135deg) scale(0.4, 0.1) translate(0%, 150%);
}

.marka.marka-icon-angle-double i:nth-child(3) {
  	-webkit-transform: rotate(45deg) scale(0.4, 0.1) translate(40%, 10%);
  	-moz-transform: rotate(45deg) scale(0.4, 0.1) translate(40%, 10%);
  	transform: rotate(45deg) scale(0.4, 0.1) translate(40%, 10%);
}

.marka.marka-icon-angle-double i:nth-child(4) {
  	-webkit-transform: rotate(135deg) scale(0.4, 0.1) translate(40%, -10%);
  	-moz-transform: rotate(135deg) scale(0.4, 0.1) translate(40%, -10%);
  	transform: rotate(135deg) scale(0.4, 0.1) translate(40%, -10%);
}

/* Angle icon */
.marka.marka-icon-angle i {
  	-webkit-transform: rotate(45deg) scale(0.4, 0.1) translate(20%, -75%);
  	-moz-transform: rotate(45deg) scale(0.4, 0.1) translate(20%, -75%);
  	transform: rotate(45deg) scale(0.4, 0.1) translate(20%, -75%);
}

.marka.marka-icon-angle i:nth-child(2) {
  	-webkit-transform: rotate(135deg) scale(0.4, 0.1) translate(20%, 75%);
  	-moz-transform: rotate(135deg) scale(0.4, 0.1) translate(20%, 75%);
  	transform: rotate(135deg) scale(0.4, 0.1) translate(20%, 75%);
}

/* Arrow icon */
.marka.marka-icon-arrow i {
    -webkit-transform: rotate(45deg) scale(0.55, 0.2) translate(-0.5%, -90%);
    -moz-transform: rotate(45deg) scale(0.55, 0.2) translate(-0.5%, -90%);
    transform: rotate(45deg) scale(0.55, 0.2) translate(-0.5%, -90%);
}

.marka.marka-icon-arrow i:nth-child(2) {
    -webkit-transform: rotate(135deg) scale(0.55, 0.2) translate(-0.5%, 90%);
    -moz-transform: rotate(135deg) scale(0.55, 0.2) translate(-0.5%, 90%);
    transform: rotate(135deg) scale(0.55, 0.2) translate(-0.5%, 90%);
}

.marka.marka-icon-arrow i:nth-child(3) {
    -webkit-transform: rotate(90deg) scale(0.6, 0.2) translate(17%, 0%);
    -moz-transform: rotate(90deg) scale(0.6, 0.2) translate(17%, 0%);
    transform: rotate(90deg) scale(0.6, 0.2) translate(17%, 0%);
}

/* Asterisk icon */
.marka.marka-icon-asterisk i {
    -webkit-transform: rotate(90deg) scale(0.8, 0.2);
    -moz-transform: rotate(90deg) scale(0.8, 0.2);
    transform: rotate(90deg) scale(0.8, 0.2);
}

.marka.marka-icon-asterisk i:nth-child(2) {
    -webkit-transform: rotate(-30deg) scale(0.8, 0.2);
    -moz-transform: rotate(-30deg) scale(0.8, 0.2);
    transform: rotate(-30deg) scale(0.8, 0.2);
}

.marka.marka-icon-asterisk i:nth-child(3) {
    -webkit-transform: rotate(30deg) scale(0.8, 0.2);
    -moz-transform: rotate(30deg) scale(0.8, 0.2);
    transform: rotate(30deg) scale(0.8, 0.2);
}

/* Bars icon */
.marka.marka-icon-bars i {
    -webkit-transform: scale(0.8, 0.1);
    -moz-transform: scale(0.8, 0.1);
    transform: scale(0.8, 0.1);
}

.marka.marka-icon-bars i:nth-child(2) {
    -webkit-transform: scale(0.8, 0.1) translate(0%, -200%);
    -moz-transform: scale(0.8, 0.1) translate(0%, -200%);
  	transform: scale(0.8, 0.1) translate(0%, -200%);
}

.marka.marka-icon-bars i:nth-child(3) {
    -webkit-transform: scale(0.8, 0.1) translate(0%, 200%);
    -moz-transform: scale(0.8, 0.1) translate(0%, 200%);
  	transform: scale(0.8, 0.1) translate(0%, 200%);
}

/* Check icon */
.marka.marka-icon-check i {
    -webkit-transform: rotate(-45deg) scale(0.75, 0.2) translate(10%, 50%);
    -moz-transform: rotate(-45deg) scale(0.75, 0.2) translate(10%, 50%);
    transform: rotate(-45deg) scale(0.75, 0.2) translate(10%, 50%);
}

.marka.marka-icon-check i:nth-child(2) {
    -webkit-transform: rotate(45deg) scale(0.5, 0.2) translate(-10%, 120%);
    -moz-transform: rotate(45deg) scale(0.5, 0.2) translate(-10%, 120%);
    transform: rotate(45deg) scale(0.5, 0.2) translate(-10%, 120%);
}

/* Chevron icon */
.marka.marka-icon-chevron i {
    -webkit-transform: rotate(45deg) scale(0.6, 0.2) translate(16.5%, -50%);
    -moz-transform: rotate(45deg) scale(0.6, 0.2) translate(16.5%, -50%);
  	transform: rotate(45deg) scale(0.6, 0.2) translate(16.5%, -50%);
}

.marka.marka-icon-chevron i:nth-child(2) {
    -webkit-transform: rotate(135deg) scale(0.6, 0.2) translate(16.5%, 50%);
    -moz-transform: rotate(135deg) scale(0.6, 0.2) translate(16.5%, 50%);
  	transform: rotate(135deg) scale(0.6, 0.2) translate(16.5%, 50%);
}

/* Circle icon */
.marka.marka-icon-circle i {
    border-radius: 50%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

/* Minus icon */
.marka.marka-icon-minus i {
    -webkit-transform: scale(0.8, 0.2);
    -moz-transform: scale(0.8, 0.2);
    transform: scale(0.8, 0.2);
}

/* Pause icon */
.marka.marka-icon-pause i {
    -webkit-transform: rotate(90deg) scale(0.8, 0.35) translate(0%, 65%);
    -moz-transform: rotate(90deg) scale(0.8, 0.35) translate(0%, 65%);
	transform: rotate(90deg) scale(0.8, 0.35) translate(0%, 65%);
}

.marka.marka-icon-pause i:nth-child(2) {
    -webkit-transform: rotate(90deg) scale(0.8, 0.35) translate(0%, -65%);
    -moz-transform: rotate(90deg) scale(0.8, 0.35) translate(0%, -65%);
	transform: rotate(90deg) scale(0.8, 0.35) translate(0%, -65%);
}

/* Plus icon */
.marka.marka-icon-plus i {
    -webkit-transform: scale(0.8, 0.2);
    -moz-transform: scale(0.8, 0.2);
    transform: scale(0.8, 0.2);
}

.marka.marka-icon-plus i:nth-child(2) {
    -webkit-transform: rotate(90deg) scale(0.8, 0.2);
    -moz-transform: rotate(90deg) scale(0.8, 0.2);
    transform: rotate(90deg) scale(0.8, 0.2);
}

/* Signal icon (5 part) */
.marka.marka-icon-signal-five-one i,
.marka.marka-icon-signal-five-two i,
.marka.marka-icon-signal-five-three i,
.marka.marka-icon-signal-five-four i,
.marka.marka-icon-signal-five i {
  	-webkit-transform: rotate(90deg) scale(0.16, 0.12) translate(200%, 280%);
  	-moz-transform: rotate(90deg) scale(0.16, 0.12) translate(200%, 280%);
  	transform: rotate(90deg) scale(0.16, 0.12) translate(200%, 280%);
}

.marka.marka-icon-signal-five-two i:nth-child(2),
.marka.marka-icon-signal-five-two i:nth-child(3),
.marka.marka-icon-signal-five-two i:nth-child(4),
.marka.marka-icon-signal-five-two i:nth-child(5),
.marka.marka-icon-signal-five-three i:nth-child(2),
.marka.marka-icon-signal-five-four i:nth-child(2),
.marka.marka-icon-signal-five i:nth-child(2) {
    -webkit-transform: rotate(90deg) scale(0.32, 0.12) translate(75%, 140%);
    -moz-transform: rotate(90deg) scale(0.32, 0.12) translate(75%, 140%);
    transform: rotate(90deg) scale(0.32, 0.12) translate(75%, 140%);
}

.marka.marka-icon-signal-five-three i:nth-child(3),
.marka.marka-icon-signal-five-three i:nth-child(4),
.marka.marka-icon-signal-five-three i:nth-child(5),
.marka.marka-icon-signal-five-four i:nth-child(3),
.marka.marka-icon-signal-five i:nth-child(3) {
  	-webkit-transform: rotate(90deg) scale(0.48, 0.12) translate(34%, 0%);
  	-moz-transform: rotate(90deg) scale(0.48, 0.12) translate(34%, 0%);
  	transform: rotate(90deg) scale(0.48, 0.12) translate(34%, 0%);
}

.marka.marka-icon-signal-five-four i:nth-child(4),
.marka.marka-icon-signal-five-four i:nth-child(5),
.marka.marka-icon-signal-five i:nth-child(4) {
  	-webkit-transform: rotate(90deg) scale(0.64, 0.12) translate(13%, -140%);
  	-moz-transform: rotate(90deg) scale(0.64, 0.12) translate(13%, -140%);
  	transform: rotate(90deg) scale(0.64, 0.12) translate(13%, -140%);
}

.marka.marka-icon-signal-five i:nth-child(5) {
  	-webkit-transform: rotate(90deg) scale(0.8, 0.12) translate(0%, -280%);
  	-moz-transform: rotate(90deg) scale(0.8, 0.12) translate(0%, -280%);
  	transform: rotate(90deg) scale(0.8, 0.12) translate(0%, -280%);
}

/* Signal icon (3 parts) */
.marka.marka-icon-signal-three-one i,
.marka.marka-icon-signal-three-two i,
.marka.marka-icon-signal-three i {
  	-webkit-transform: rotate(90deg) scale(0.24, 0.2) translate(120%, 140%);
  	-moz-transform: rotate(90deg) scale(0.24, 0.2) translate(120%, 140%);
  	transform: rotate(90deg) scale(0.24, 0.2) translate(120%, 140%);
}

.marka.marka-icon-signal-three-two i:nth-child(2),
.marka.marka-icon-signal-three-two i:nth-child(3),
.marka.marka-icon-signal-three i:nth-child(2) {
    -webkit-transform: rotate(90deg) scale(0.48, 0.2) translate(35%, 0%);
    -moz-transform: rotate(90deg) scale(0.48, 0.2) translate(35%, 0%);
    transform: rotate(90deg) scale(0.48, 0.2) translate(35%, 0%);
}

.marka.marka-icon-signal-three i:nth-child(3) {
  	-webkit-transform: rotate(90deg) scale(0.8, 0.2) translate(0%, -140%);
  	-moz-transform: rotate(90deg) scale(0.8, 0.2) translate(0%, -140%);
  	transform: rotate(90deg) scale(0.8, 0.2) translate(0%, -140%);
}

/* Sort half icon */
.marka.marka-icon-sort-half i {
    border-radius: 0% 30% 0 30%;
    -webkit-transform: rotate(-60deg) skewX(-30deg) scale(0.25, 0.216) translate(60%, -60%);
    -moz-transform: rotate(-60deg) skewX(-30deg) scale(0.25, 0.216) translate(60%, -60%);
    transform: rotate(-60deg) skewX(-30deg) scale(0.25, 0.216) translate(60%, -60%);
}

.marka.marka-icon-sort-half i:nth-child(2) {
    -webkit-transform: rotate(0deg) skewX(-30deg) scale(0.25) translate(-60%, -70%);
    -moz-transform: rotate(0deg) skewX(-30deg) scale(0.25) translate(-60%, -70%);
    transform: rotate(0deg) skewX(-30deg) scale(0.25) translate(-60%, -70%);
}

.marka.marka-icon-sort-half i:nth-child(3) {
    -webkit-transform: rotate(90deg) skewY(-30deg) scale(0.25) translate(-70%, -60%);
    -moz-transform: rotate(90deg) skewY(-30deg) scale(0.25) translate(-70%, -60%);
    transform: rotate(90deg) skewY(-30deg) scale(0.25) translate(-70%, -60%);
}

/* Sort icon */
.marka.marka-icon-sort i {
    border-radius: 0% 30% 0 30%;
    -webkit-transform: rotate(-60deg) skewX(-30deg) scale(0.25, 0.216) translate(60%, -60%);
    -moz-transform: rotate(-60deg) skewX(-30deg) scale(0.25, 0.216) translate(60%, -60%);
    transform: rotate(-60deg) skewX(-30deg) scale(0.25, 0.216) translate(60%, -60%);
}

.marka.marka-icon-sort i:nth-child(2) {
    -webkit-transform: rotate(0deg) skewX(-30deg) scale(0.25) translate(-60%, -70%);
    -moz-transform: rotate(0deg) skewX(-30deg) scale(0.25) translate(-60%, -70%);
    transform: rotate(0deg) skewX(-30deg) scale(0.25) translate(-60%, -70%);
}

.marka.marka-icon-sort i:nth-child(3) {
    -webkit-transform: rotate(90deg) skewY(-30deg) scale(0.25) translate(-70%, -60%);
    -moz-transform: rotate(90deg) skewY(-30deg) scale(0.25) translate(-70%, -60%);
    transform: rotate(90deg) skewY(-30deg) scale(0.25) translate(-70%, -60%);
}

.marka.marka-icon-sort i:nth-child(4) {
    -webkit-transform: rotate(120deg) skewX(-30deg) scale(0.25, 0.216) translate(60%, -60%);
    -moz-transform: rotate(120deg) skewX(-30deg) scale(0.25, 0.216) translate(60%, -60%);
    transform: rotate(120deg) skewX(-30deg) scale(0.25, 0.216) translate(60%, -60%);
}

.marka.marka-icon-sort i:nth-child(5) {
    -webkit-transform: rotate(180deg) skewX(-30deg) scale(0.25) translate(-60%, -70%);
    -moz-transform: rotate(180deg) skewX(-30deg) scale(0.25) translate(-60%, -70%);
    transform: rotate(180deg) skewX(-30deg) scale(0.25) translate(-60%, -70%);
}

.marka.marka-icon-sort i:nth-child(6) {
    -webkit-transform: rotate(270deg) skewY(-30deg) scale(0.25) translate(-70%, -60%);
    -moz-transform: rotate(270deg) skewY(-30deg) scale(0.25) translate(-70%, -60%);
    transform: rotate(270deg) skewY(-30deg) scale(0.25) translate(-70%, -60%);
}

/* Square icon */
.marka.marka-icon-square i {
    border-radius: 10%;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    transform: scale(0.8);
}

/* Times icon */
.marka.marka-icon-times i {
    -webkit-transform: rotate(45deg) scale(0.8, 0.1);
    -moz-transform: rotate(45deg) scale(0.8, 0.1);
    transform: rotate(45deg) scale(0.8, 0.1);
}

.marka.marka-icon-times i:nth-child(2) {
    -webkit-transform: rotate(-45deg) scale(0.8, 0.1);
    -moz-transform: rotate(-45deg) scale(0.8, 0.1);
    transform: rotate(-45deg) scale(0.8, 0.1);
}

/* Triangle icon */
.marka.marka-icon-triangle i {
    border-radius: 0% 30% 0 30%;
    -webkit-transform: rotate(-60deg) skewX(-30deg) scale(0.5,.433) translate(2%, -5%);
    -moz-transform: rotate(-60deg) skewX(-30deg) scale(0.5,.433) translate(2%, -5%);
    transform: rotate(-60deg) skewX(-30deg) scale(0.5,.433) translate(2%, -5%);
}

.marka.marka-icon-triangle i:nth-child(2) {
    -webkit-transform: rotate(-0deg) skewX(-30deg) scale(0.5) translate(-5%, 30%);
    -moz-transform: rotate(-0deg) skewX(-30deg) scale(0.5) translate(-5%, 30%);
    transform: rotate(-0deg) skewX(-30deg) scale(0.5) translate(-5%, 30%);
}

.marka.marka-icon-triangle i:nth-child(3) {
    -webkit-transform: rotate(90deg) skewY(-30deg) scale(0.5) translate(30%, -2%);
    -moz-transform: rotate(90deg) skewY(-30deg) scale(0.5) translate(30%, -2%);
    transform: rotate(90deg) skewY(-30deg) scale(0.5) translate(30%, -2%);
}