/* General */

a:active, a:focus { outline:0; }
.gkHighlighterGK5 { position:relative; width: 100%; }
/* Interface */

.gkHighlighterInterface { float:left; padding: 0 7px }
.gkHighlighterInterface[data-pos="right"] { float: right; }
.gkHighlighterInterface span.text { display:block; float:left; margin:0 6px 0 7px; font-size: 11px; font-weight: bold; text-transform: uppercase; line-height: 18px; }
.gkHighlighterInterface div { float:left; width:auto; }
.gkHighlighterInterface div a { display:block; float:left; height:13px; width:13px; margin: 2px 0 0 2px; background:transparent url('../images/interface.png') no-repeat 0 0; cursor:pointer; }
.gkHighlighterInterface div a.prev { }
.gkHighlighterInterface div a.next { background-position: right 0; }
.gkHighlighterInterface div a.prev:hover { background-position: 0 bottom; }
.gkHighlighterInterface div a.next:hover { background-position: right bottom; }


/* Items */
.gkHighlighterWrapper { position: relative}
.gkHighlighterWrapperSub {
	position: relative;
	min-height: 30px;
	opacity: 1;
}
.gkHighlighterWrapper .nowrap { width: 100000px; position: absolute; left: -99999em; }
.gkHighlighterWrapper .gkHighlighterItem { position: absolute; top:0; width:100%; left:0}

.gkHighlighterWrapper .gkHighlighterItem.gk-active {
	z-index: 100;
}

@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@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;
    }
}

.gkHighlighterItem.flipInX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-moz-keyframes flipOutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@-o-keyframes flipOutX {
    0% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
	100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
}
.gkHighlighterItem {
	-webkit-animation-fill-mode: both;
	   -moz-animation-fill-mode: both;
	     -o-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.gkHighlighterItem.flipOutX {
	-webkit-animation-name: flipOutX;
	-webkit-backface-visibility: visible !important;
	-moz-animation-name: flipOutX;
	-moz-backface-visibility: visible !important;
	-o-animation-name: flipOutX;
	-o-backface-visibility: visible !important;
	animation-name: flipOutX;
	backface-visibility: visible !important;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
@-webkit-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}

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

@-moz-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		-moz-transform: translateX(0);
	}
}

@-o-keyframes fadeInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		-o-transform: translateX(0);
	}
}

@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-20px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.gkHighlighterItem.fadeInLeft {
	-webkit-animation-name: fadeInLeft;
	-moz-animation-name: fadeInLeft;
	-o-animation-name: fadeInLeft;
	animation-name: fadeInLeft;
	opacity: 1!important;
	filter: alpha(opacity=100)!important;
}
.invisible {
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
@-webkit-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-webkit-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateX(-20px);
	}
}

@-moz-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-moz-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-moz-transform: translateX(-20px);
	}
}

@-o-keyframes fadeOutLeft {
	0% {
		opacity: 1;
		-o-transform: translateX(0);
	}

	100% {
		opacity: 0;
		-o-transform: translateX(-20px);
	}
}

@keyframes fadeOutLeft {
	0% {
		opacity: 1;
		transform: translateX(0);
	}

	100% {
		opacity: 0;
		transform: translateX(-20px);
	}
}

.gkHighlighterItem.fadeOutLeft {
	-webkit-animation-name: fadeOutLeft;
	-moz-animation-name: fadeOutLeft;
	-o-animation-name: fadeOutLeft;
	animation-name: fadeOutLeft;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

@-webkit-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-moz-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@-o-keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

@keyframes fadeIn {
	0% {opacity: 0;}	
	100% {opacity: 1;}
}

.gkHighlighterItem.fadeIn {
	-webkit-animation-name: fadeIn;
	-moz-animation-name: fadeIn;
	-o-animation-name: fadeIn;
	animation-name: fadeIn;
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-moz-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@-o-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
}

.gkHighlighterItem.fadeOut {
	-webkit-animation-name: fadeOut;
	-moz-animation-name: fadeOut;
	-o-animation-name: fadeOut;
	animation-name: fadeOut;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

/* 3d rotating bar */ 
.bar {
	width: 100%px;
	height: 40px;
	position: relative;
	     
  -webkit-perspective: 1100px;
     -moz-perspective: 1100px;
     -ms-perspective: 1100px;
       -o-perspective: 1100px;
          perspective: 1100px;
}
.bar .gkHighlighterWrapperSub {
	width: 100%;
	height: 100%;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	
}

.bar .gkHighlighterItem {
	display: block;
	position: absolute;
	width: 100%;
	height: 40px;
	left: 0px;
	top: 0px;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased
}
.bar .gkHighlighterItem.gkHidden {
	opacity: 0;
	display: none;
}

.bar .gkHighlighterItem.front { 
 -webkit-transform: rotateX(0deg) translateZ(20px); 
	-moz-transform: rotateX(0deg) translateZ(20px); 
	  -o-transform: rotateX(0deg) translateZ(20px); 
	     transform: rotateX(0deg) translateZ(20px);
}
.bar .gkHighlighterItem.bottom { 
 -webkit-transform: rotateX(90deg) translateZ(20px);
	-moz-transform: rotateX(90deg) translateZ(20px); 
	  -o-transform: rotateX(90deg) translateZ(20px); 
	     transform: rotateX(90deg) translateZ(20px); 
}
.bar .gkHighlighterItem.back { 
 -webkit-transform: rotateX(180deg) translateZ(20px); 
	-moz-transform: rotateX(180deg) translateZ(20px); 
	  -o-transform: rotateX(180deg) translateZ(20px); 
	     transform: rotateX(180deg) translateZ(20px); 
}
.bar .gkHighlighterItem.top { 
 -webkit-transform: rotateX(270deg) translateZ(20px);
	-moz-transform: rotateX(270deg) translateZ(20px); 
	  -o-transform: rotateX(270deg) translateZ(20px); 
	     transform: rotateX(270deg) translateZ(20px); 
}


