@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

/* ****************************

		Metro2 Theme

**************************** */




/* Generic Utility */
.hide {
	position: absolute;
	top: -9999px;
	left: -9999px;
}



/* ****************************
		Navigation tab
**************************** */

.nav1 {
	position: relative;
	width:100%;
	margin:0 auto;
}

#CLF_ON section #container1 ul, #CLF_ON section #container1 ol {
	margin-left: -30px;
}




	/* orange - touch44/11 -serves 320x480 portrait */
	@media screen and (min-width:320px) and (max-width:479px) {
	.nav1 li {
		float:left;
		position:relative;
		display:block;
		border-bottom:solid 1px #edaa1e;
		height:80px;
		line-height:80px;
		text-align:center;
		font-weight:400;
		text-transform: uppercase;
		color:#034b80;
		font-size:18px;
		font-family: 'Roboto', sans-serif;
		-webkit-transition: line-height 200ms;
	   	-moz-transition: line-height 200ms;
		-o-transition: line-height 200ms;
		transition: line-height 200ms;
	}}
	
	/* brown - touch44/11 -serves 320x480 landscape and 480x800 portrait */
	@media screen and (min-width:480px) and (max-width:639px) {
	.nav1 li {
		float:left;
		position:relative;
		display:block;
		border-bottom:solid 1px #edaa1e;
		height:80px;
		line-height:80px;
		text-align:center;
		font-weight:400;
		text-transform: uppercase;
		color:#034b80;
		font-size:18px;
		font-family: 'Roboto', sans-serif;
		-webkit-transition: line-height 200ms;
	   	-moz-transition: line-height 200ms;
		-o-transition: line-height 200ms;
		transition: line-height 200ms;
	}}
	
	/* yellow - touch44/11 -serves ??? screens */
	@media screen and (min-width:640px) and (max-width:799px) {
	.nav1 li {
		float:left;
		position:relative;
		display:block;
		border-bottom:solid 1px #edaa1e;
		height:80px;
		line-height:80px;
		text-align:center;
		font-weight:400;
		text-transform: uppercase;
		color:#034b80;
		font-size:13px;
		font-family: 'Roboto', sans-serif;
		-webkit-transition: line-height 200ms;
	   	-moz-transition: line-height 200ms;
		-o-transition: line-height 200ms;
		transition: line-height 200ms;
	}}
	
	/* green - U9/5 - serves 800x600 screens */
	@media screen and (min-width:800px) and (max-width:995px) {
	.nav1 li {
		float:left;
		position:relative;
		display:block;
		border-bottom:solid 1px #edaa1e;
		height:80px;
		line-height:80px;
		text-align:center;
		font-weight:400;
		text-transform: uppercase;
		color:#034b80;
		font-size:15px;
		font-family: 'Roboto', sans-serif;
		-webkit-transition: line-height 200ms;
	   	-moz-transition: line-height 200ms;
		-o-transition: line-height 200ms;
		transition: line-height 200ms;
	}}
	
	/* blue - U12/7 - serves 1024x768 screens */
	@media screen and (min-width:996px) {
	.nav1 li {
		float:left;
		position:relative;
		display:block;
		border-bottom:solid 1px #edaa1e;
		height:80px;
		line-height:80px;
		text-align:center;
		font-weight:400;
		text-transform: uppercase;
		color:#034b80;
		font-size:18px;
		font-family: 'Roboto', sans-serif;
		-webkit-transition: line-height 200ms;
	   	-moz-transition: line-height 200ms;
		-o-transition: line-height 200ms;
		transition: line-height 200ms;
	}}











/* left */
.nav1.left li {width:86px;}
.nav1.left li:last-child {margin-right: 0;}


/* center */
.nav1.center.col2 {width:172px;}
.nav1.center.col3 {width:258px;}
.nav1.center.col4 {width:344px;}
.nav1.center.col5 {width:430px;}
.nav1.center.col6 {width:516px;}
.nav1.center.col7 {width:602px;}
.nav1.center.col8 {width:688px;}
	
.nav1.center.col2 li,
.nav1.center.col3 li,
.nav1.center.col4 li,
.nav1.center.col5 li,
.nav1.center.col6 li,
.nav1.center.col7 li,
.nav1.center.col8 li {width:86px;}


/* right */
.nav1.right li {float: right; width:86px;}


/* fullwidth */
.nav1.col2 li {
	width:50%;
	*width: 49.9%;
}

.nav1.col3 li {
	width:33.3333%;
	*width:33.2222%;
}

.nav1.col4 li {
	width:25%;
	*width:24.9%;
}

.nav1.col5 li {
	width:19%;
	*width:19.9%;
}

.nav1.col6 li {
	width:16.6666%;
	*width:16.5555%;
}

.nav1.col7 li {
	width:14.2857%;
	*width:14.1857%;
}

.nav1.col8 li {
	width:12.5%;
	*width:12.44%;
}


.nav1 li:hover {
	cursor:pointer;
	line-height: 70px;
}

.nav1 li.active{
	z-index:50;
	background-color:#f4b300;
	border-bottom: 1px solid #f4b300;
	color:#FFF;
	-webkit-transition: background 600ms;
	   -moz-transition: background 600ms;
		 -o-transition: background 600ms;
			transition: background 600ms;
} 

.nav1 li.active:hover {
	text-decoration:none;
	line-height: 80px;
}



/* ****************************
		    Content
**************************** */

.content {
	clear:both;
	position:relative;
	width:100%;
	padding-top: 30px;
}

.content p{margin-bottom: 15px;}


.content h1, h3, h4, h5 {
	margin: 0.5em 0;
}

.content h1, section h1 {font-size:2.1em;}
.content h2, section h2 {font-size:1.8em;}
.content h3, section h3 {font-size:1.5em;}
.content h4, section h4 {font-size:1.2em;}
.content h5, section h5 {font-size:1em;}

.content h1, h2 {
	font-weight:400;
	margin: 0.5em 0;
	font-family: 'Roboto', sans-serif;
}


/* Responsive Row (extracted from bootstrap for a simple integration) */

.row-fluid {
  width: 100%;
  *zoom: 1;
}

.row-fluid:before,
.row-fluid:after {
  display: table;
  line-height: 0;
  content: "";
}

.row-fluid:after {
  clear: both;
}

.row-fluid [class*="span"] {
  display: block;
  float: left;
  width: 100%;
  min-height: 30px;
  margin-left: 2.127659574468085%;
  *margin-left: 2.074468085106383%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

.row-fluid .controls-row [class*="span"] + [class*="span"] {
  margin-left: 2.127659574468085%;
}

.row-fluid .span12 {
  width: 100%;
  *width: 99.94680851063829%;
}

.row-fluid .span11 {
  width: 91.48936170212765%;
  *width: 91.43617021276594%;
}

.row-fluid .span10 {
  width: 82.97872340425532%;
  *width: 82.92553191489361%;
}

.row-fluid .span9 {
  width: 74.46808510638297%;
  *width: 74.41489361702126%;
}

.row-fluid .span8 {
  width: 65.95744680851064%;
  *width: 65.90425531914893%;
}

.row-fluid .span7 {
  width: 57.44680851063829%;
  *width: 57.39361702127659%;
}

.row-fluid .span6 {
  width: 48.93617021276595%;
  *width: 48.88297872340425%;
}

.row-fluid .span5 {
  width: 40.42553191489362%;
  *width: 40.37234042553192%;
}

.row-fluid .span4 {
  width: 31.914893617021278%;
  *width: 31.861702127659576%;
}

.row-fluid .span3 {
  width: 23.404255319148934%;
  *width: 23.351063829787233%;
}

.row-fluid .span2 {
  width: 14.893617021276595%;
  *width: 14.840425531914894%;
}

.row-fluid .span1 {
  width: 6.382978723404255%;
  *width: 6.329787234042553%;
}



/* ****************************
			Selection
**************************** */

::-moz-selection { 
    background: #f4b300;
    color: #fff;
}


/* ****************************
			Section
**************************** */

section{
	clear: both;
}


h3.v_nav {display: none;}



/* ****************************
		  Media query
**************************** */

@media all and (max-width: 639px) {

	.nav1 {display: none;}

	.content {
		padding: 0;
		margin: 0;
	}

	.content p {
		padding-top: 0;
		margin: 0;
	}
	
	.tab_content {
		padding-top:20px;
		padding-bottom: 35px;
	}

	h3.v_nav {
		border: 1px solid #f4b300 !important;
		margin-top: 4px !important;
		margin-bottom: 4px !important;
		height:50px !important;
		line-height:50px !important;
		text-align:center !important;
		font-weight:400 !important;
		color:#034b80 !important;
		font-size:18px !important;
		text-transform:uppercase !important;
		font-family: 'Roboto', sans-serif !important;
		display: block;
		cursor: pointer;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		 -khtml-user-select: none;
		   -moz-user-select: none;
			-ms-user-select: none;
				user-select: none;
	}

	h3.v_nav.last {border-bottom: none;}
	h3.v_nav:hover {text-decoration:none;}

	h3.v_active {
		background-color:#f4b300 !important;
		color: #FFF !important;
		height: 60px;
		line-height: 60px;
		border: none;
		z-index:50;
	}


	.row-fluid [class*="span"] {margin-left: 0; margin: 1% 0;}
	.row-fluid .span1, 
	.row-fluid .span2, 
	.row-fluid .span3, 
	.row-fluid .span4, 
	.row-fluid .span5, 
	.row-fluid .span6, 
	.row-fluid .span7, 
	.row-fluid .span8, 
	.row-fluid .span9, 
	.row-fluid .span10, 
	.row-fluid .span11, 
	.row-fluid .span12 {width: 100%;}


	/*Gallery */
	.gallery .row-fluid [class*="span"] {
		display: block;
		float: left;
		width: 100%;
		min-height: 30px;
		margin-left: 1.545%;
		-webkit-box-sizing: border-box;
		   -moz-box-sizing: border-box;
				box-sizing: border-box;
	}

	.gallery .row-fluid .span2 {
		width: 23.404255319148934%;
		*width: 23.351063829787233%;
		margin-top: 1%;
		margin-left: 1.4%;
	}

}




/* ****************************
	 IE10 split screen fix
**************************** */

@media screen and (max-width: 320px) {
	@-ms-viewport { width: 320px; }
}
 
@media screen and (min-width: 768px) and (max-width: 959px) {
	@-ms-viewport { width: 768px; }
}