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

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

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

/*========== START GLOBAL ==========*/
html,body,div,span,applet,object,iframe,input,p,blockquote,aside,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,h1,h2,h3,h4,h5,h6{
	margin:0;
	padding:0;
	border: 0px;
}
body {
	font-family:'Open Sans', sans-serif;
}
a {
	text-decoration:none;
	color:#1e1e1e;
}

h1 {
	width:960px;
	margin:50px auto;
	font-family:"Dosis",sans-serif;
	font-weight:normal;
	text-transform:uppercase;
}

.demozone {
	width:960px;
	margin:50px auto;
	font-family:'Open Sans', sans-serif;
	font-size:20px;
	border-bottom:1px solid #111;
}


@media screen and (max-width:959px) {
	h1, .demozone {
		width:100%;
	}
}


.readmore a {
	display:block;
	font-size:20px;
	height:48px;
	margin-top:20px;
	font-family:"Dosis",sans-serif;
}

.demoitem {
	padding: 0 14px;
	line-height:48px;
	font-size:20px;
	margin-right:5px;
	display:block;
}
.demohover:hover {
	background:#E4F0F7;
}
/*========== END GLOBAL ==========*/





/*========== START BACKGROUND LIST ==========*/

/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
.solid-white { background:#fff; }
/* End Solid Colors */

/* Transparent Colors */
.transparent-deepsea {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33003564, endColorstr=#33003564);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33003564, endColorstr=#33003564)";/* For IE 8*/
	background: rgba(0,53,100,0.2);/* Modern browser */
}
.transparent-smoke {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33f5f5f5, endColorstr=#33f5f5f5);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33f5f5f5, endColorstr=#33f5f5f5)";/* For IE 8*/
	background: rgba(245,245,245,0.2);/* Modern browser */
}
.transparent-grass {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33CDCD00, endColorstr=#33CDCD00);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33CDCD00, endColorstr=#33CDCD00)";/* For IE 8*/
	background: rgba(205,250,0,0.2);/* Modern browser */
}
.transparent-black {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000, endColorstr=#33000000)";/* For IE 8*/
	background: rgba(0,0,0,0.2);/* Modern browser */
}
.transparent-red {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF0000, endColorstr=#33FF0000);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF0000, endColorstr=#33FF0000)";/* For IE 8*/
	background: rgba(255,0,0,0.2);/* Modern browser */
}
.transparent-violetred {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33D02090, endColorstr=#33D02090);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33D02090, endColorstr=#33D02090)";/* For IE 8*/
	background: rgba(208,32,144,0.2);/* Modern browser */
}
.transparent-green {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3367B239, endColorstr=#3367B239);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3367B239, endColorstr=#3367B239)";/* For IE 8*/
	background: rgba(103,178,57,0.2);/* Modern browser */
}
.transparent-yellow {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFF00, endColorstr=#33FFFF00);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FFFF00, endColorstr=#33FFFF00)";/* For IE 8*/
	background: rgba(255,255,0,0.2);/* Modern browser */
}
.transparent-orange { 
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FB8F02, endColorstr=#33FB8F02);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FB8F02, endColorstr=#33FB8F02)";/* For IE 8*/
	background: rgba(251,143,2,0.2);/* Modern browser */
}
.transparent-coral {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33CD5B45, endColorstr=#33CD5B45);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33CD5B45, endColorstr=#33CD5B45)";/* For IE 8*/
	background: rgba(205,91,69,0.2);/* Modern browser */
}
.transparent-wheat {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33EED8AE, endColorstr=#33EED8AE);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#33EED8AE, endColorstr=#33EED8AE)";/* For IE 8*/
	background: rgba(238,216,174,0.2);/* Modern browser */
}
.transparent-redwine {
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#338B0000, endColorstr=#338B0000);/* For IE 5.5 - 7*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#338B0000, endColorstr=#338B0000)";/* For IE 8*/
	background: rgba(139,0,0,0.2);/* Modern browser */
}
/* End Transparent Colors */

/* Background Images */
.img-wood { background:#FB8F02 url(../images/bg/wood_pattern.jpg) repeat; }
.img-purtywood { background:#FB8F02 url(../images/bg/purty_wood.jpg) repeat; }
.img-woodtexture { background:#FB8F02 url(../images/bg/wood_texture.jpg) repeat; }
.img-darkwood { background:#000 url(../images/bg/dark_wood.jpg) repeat; }
.img-retinawood { background:#FB8F02 url(../images/bg/retina_wood.png) repeat; }
.img-nastyfabric { background:#999 url(../images/bg/nasty_fabric.png) repeat; }
.img-wildoliva { background:#555 url(../images/bg/wild_oliva.png) repeat; }
.img-darkbrick { background:#555 url(../images/bg/dark_brick_wall.png) repeat; }
.img-navyblue { background:#555 url(../images/bg/navy_blue.png) repeat; }
/* End Background Images */

/*========== END BACKGROUND LIST ==========*/







/*========== 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;
}

.loop-tab {
	float:left;
	cursor:pointer;
	line-height:32px;
	height:32px;
	font-size:16px;
	color:#fff;
	text-align:center;
	font-family: Sans-Serif;
}

.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 > h3 > a {
	color:#fff;
}
.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  ~ p {
	margin-top:20px;
}
*/
.loop-content > p > .resimg img {
	width: 100%;
}

.loop-content > ul {

}

.loop-activetab {}
.loop-inactivetab {
	background:#777;
}
.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 {
	height:48px;
	width:48px;
	position:relative;
	display:block;
	margin:16px auto 16px auto;
}
.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 ==========*/





/*========== START MISC ==========*/
.clearspace { clear: both; }
.none { display: none !important; width:0px !important; }
.floatleft { float:left; }
.floatright { float:right; }
.light-text { color:#fff !important; }
.dark-text { color:#1e1e1e !important; }