/*============================================

TabLooper by SONHLAB.com - version 1.1
Website: http://sonhlab.com
Documentation: http://docs.sonhlab.com/tablooper-responsive-metro-ui-loop-tab/

============================================*/


/*========== START TAB LOOPER - REQUIRED ==========*/

.loop-tabbox {
	width:960px;
	margin:20px auto;
	overflow:hidden;
}

.loop-tabzone {
	width:100%;
	z-index:9999;
	position:relative;
}
.loop-tabholder {
	float:left;
	overflow:hidden;
}

/* 1. This handles the normal state of your button */
.loop-tab { 
    float: left; 
    cursor: pointer; 
    line-height: 32px; 
    height: 32px; 
    font-size: 16px; 
    color: #b4a474; 
    text-align: center; 
    font-family: Sans-Serif; 
    transition: color 0.2s ease; /* Bonus: makes the color fade smoothly! */
}

/* 2. This handles exactly what happens when the mouse moves over it */
.loop-tab:hover { 
    color: #fff !important; 
}

.loop-tabholder > .loop-tab  ~ .loop-tab {
	margin-left:5px;
}

.loop-tabctrl {
	font-family:'Open Sans', sans-serif;
}
.loop-tabctrl img {
	cursor:pointer;
}

.loop-contentzone {
	margin-top:5px;
	position:relative;
	overflow:hidden;
}
.loop-content {
	display:none;
	padding:20px;
	position:relative;
	z-index:9998;
}
.loop-content > h3 {
	margin:0;
	padding:0;
	font-weight:normal;
	font-size:30px;
	line-height:1;
	font-family:'Dosis', sans-serif;
	text-transform:uppercase;
}

.loop-content > h4 {
	margin:0;
	padding:0;
	font-weight:normal;
	font-size:24px;
	line-height:1;
	font-family:'Dosis', sans-serif;
	margin-top:20px;
	text-transform:uppercase;
}

.loop-content > p {
	font-size:14px;
	line-height:1.5;
	margin-top:20px;
}

.loop-content > p > .resimg img {
	width: 100%;
}

.loop-content > ul {

}

.loop-activetab {}
.loop-inactivetab {
	background:#55524a;
}
.loop-activecontent {
	display:block;
}



.loop-tabstation {
	display:none;
}



/* Start Standard Style */
.loop-standard {
	height:32px;
}
.loop-standard .loop-tabholder {
	height:32px;
}
.loop-standard img {
	height:32px;
	vertical-align:top;
	padding:0 8px;
}
.loop-standard span {
	font-size:16px;
	line-height:1;
	padding-right:8px;
}
.loop-standard > .loop-tabctrl {
	height:32px;
	position:absolute;
	right:0;
}
.loop-standard > .loop-tabctrl img {
	height:16px;
	vertical-align:top;
	padding:8px 10px;
}
.loop-standard .loop-prevbt {
	height:32px;
	float:left;
}
.loop-standard .loop-nextbt {
	height:32px;
	float:right;
}
.loop-standard .loop-tabnum {
	font-size:16px;
	line-height:32px;
	float:left;
}
.loop-standard .loop-curindex {
	padding:0 !important;
}

.loop-standard .loop-tabtotal {
	padding:0 !important;
}
/* End Standard Style */





/* Start Metro Style */
.loop-metro {
	height:80px;
}
.loop-metro > .loop-tabholder {
	height:80px;
}
.loop-metro .loop-tab {
	width:80px;
	height:80px;
	text-align:center;
	position:relative;
	overflow:hidden;
}
.loop-metro .loop-tab > img,
.loop-metro .loop-tab > i {
	height:48px;
	width:48px;
	position:relative;
	display:block;
	margin:16px auto 16px auto;
}

.loop-metro .loop-tab > i {
	font-size:48px;
}

.loop-metro .loop-tab > span {
	display:block;
	position:relative;
	font-size:14px;
	line-height:20px;
	background:#111;
}
.loop-metro .loop-tab:hover span {
	top:-20px;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.loop-metro > .loop-tabctrl {
	height:80px;
	width:80px;
	position:absolute;
	right:0;
}
.loop-metro > .loop-tabctrl img {
	height:20px;
}
.loop-metro .loop-prevbt {
	height:20px;
	position:absolute;
	left:0px;
}
.loop-metro .loop-nextbt {
	height:20px;
	position:absolute;
	right:0px;
}
.loop-metro .loop-tabnum {
	height:40px;
	top:20px;
	position:absolute;
}
.loop-metro .loop-curindex {
	padding:0 !important;
	display:block;
	text-align:center;
	height:40px;
	width:80px;
	font-size:40px;
	line-height:1;
	margin:auto;
	position:relative;
	font-family:'Dosis', sans-serif;
}

.loop-metro .loop-tabtotal {
	padding:0 !important;
	display:block;
	text-align:right;
	width:80px;
	height:20px;
	font-size:20px;
	line-height:1;
	position:relative;
}
/* End Metro Style */




/*========== END TAB LOOPER ==========*/




/*========== START RESPONSIVE LAYOUT - REQUIRED ==========*/

@media screen and (max-width:959px) {
	.loop-tabbox {
		width:100%;
	}
}

/*========== END RESPONSIVE LAYOUT ==========*/