html{

	font-size: 62.5%;

}

body { 
 	margin:0; 
	padding:0;	
	color:rgba(61,72,90,1.0);	
	font-family: 'Roboto', sans-serif;
	
	font-family: "c4.text.punctuation","c4.text.currency","c4.text.maths","c4.text.lowercase","c4.text.uppercase","c4.text.numbers","Trebuchet MS","Lucida Sans Unicode","Lucida Grande","Lucida Sans",Arial,sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-feature-settings: "liga", "kern";
	font-size: 1.6rem; 
	height:100%;
		background-color:#eff0f1;
} 


h1,h2,h3,h4,h5,h6{ 
	clear:left;
	margin:10px;  	
	font-weight:400;	
	
	
 }
h3{ border-bottom:0px solid ;}
p{margin:10px; font-weight: 300;	
 font-size   : 2rem; }


a {    
    text-decoration: none;
	
	 
}

h1{text-transform:uppercase; font-size:2rem; margin:10px;margin-bottom:25px;}
p.big{text-transform:uppercase; font-size:3rem; margin:10px;margin-top:0px;color: rgba(0,0,0,1)}
p.description{ font-size:1.5rem; margin:10px; margin-bottom:0px;color: rgba(0,0,0,0.7)}
.specialBox{position:absolute; top:100px; left:100px; width:100px; height:20px;}

.bold{font-weight:bold;color:rgba(255,255,255,1); margin-left:20px;}


.header{	
	margin:0; height:0px;
	border-bottom:1px solid #FFF;
	margin-bottom:0px;
	padding:20px 0;
	width:100%;
	margin:auto;
	}
	
.col {float:left; border-bottom:2px solid #FFF;height:400px; background-color:#EEF0EB;width:20000px;}
.col div{float:left; border-right:1px dashed #fff; }

.brand {	
		
		float:right;
			
		width:30px;
		padding-top:-2px;
			
	}
.logo {	
		/*float:left; margin-left:70px;
		margin-top:0px;*/
		position:absolute; 
		padding-left:40px;
		z-index:990; 
		margin:0;
		
		width:300px;
		font-size:2rem;
	
		text-transform:uppercase;
		
	}
.close {	
		float:right;	
		width:30px;				
		margin:	20px 20px; 
		padding:0;
		border:0px solid #000;
		display:none;
		
		
	}	
	
	


	
	

/*//----------------------------------------------------------------------------- end of top_vertical_menu tools*/


/*************************** HAMBURGER	*/
.hamburger { position:absolute; z-index:1000;  padding:0px ;padding-top:2px; background-color:rgba(0,0,0,0.0); cursor:pointer;}
.hamburger div{  margin:4px 0; height:2px; width:20px;  background-color: rgba(255,255,255,0.8)}
/*************************** HAMBURGER */

.highlight div{  margin:3px; height:2px; width:20px;  background-color: rgba(255,255,255,0.8)}	
.highlight { color: rgba(235,125,0,1)}

/*************************** Main Menu */
.menu{
position:absolute;
top:0;
left:0;
	width:100%; 	
	background-color:rgba(61,72,90,0.95);
	padding-bottom:150px;
	padding-top:100px;	
	
}
.menu:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;


}

.menuwrap{
	width:90%; 
	margin:auto;
	max-width:1400px;
	
}
.c-1,.c-2,.c-3{width:32%;}
.menubox{	
		float:left;
		
		padding:0;		
		
		background-color:rgba(61,72,90,0.0);
		color:rgba(255,255,255,0.8);
		margin-right:0.5% ;
		margin-bottom:30px ;
	
	}

	.menubox a{	
  	 	margin:10px 0 ;
  	 	color:rgba(255,255,255,0.8);
   		display:block;

		}

	.menubox p{	
    	
    	margin:10px;
   		font-size:90%;
   		color:rgba(255,255,255,0.9);

		}
		
		


	.menu-head{	
		
		color:rgba(255,255,255,0.9);
		margin:10px;
		}
	
	.children{ 
		border-top: 1px solid;
		border-bottom: 1px solid;
		border-color:rgba(255,255,255,0.3);
		margin:10px
	}
	
	
	
	.segment  { 		
		background-color:rgba(0,0,0,0.0);
		margin-bottom:2px;
		padding:5px;
	}
	.segment:hover { 	
		
		color:rgba(235,255,205,0.6);
		
	}
	.segment:active { 	
		
		background-color:rgba(255,0,0,0.6);
		
	}
	.active  { 		
		background-color:rgba(255,255,255,0.9);
		color:rgba(0,0,0,0.8);
		
	}
/*************************** Main Menu */

.wrap{
	width:95%;
	padding:10px;
	max-width:1600px;
	background-color: rgba(255,255,255,0.0);	
	margin:auto;
	border:0px solid;
	border-color: rgba(0,0,0,0.05);
 
	}

.headerWrap{
	width:100%;
	
	background-color:rgba(61,72,90,1.0);color:rgba(255,255,255,0.85);padding-bottom:30px;
	background: url(../images/banner_image.jpg); 
	
	 background-repeat: no-repeat;
  
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

}

	


.x100{width:100px; height:300px;}
.x200{width:200px; }
.x300{width:32.80%; }
.x500{width:500px;}
.x600{width:600px;}
.x900{width:960px;}
.h500{height:500px;}
._50{width:50%;float:left;}
.h100{height:30px;}
.h300{height:300px;}
.h200{height:300px;}
.x2{width:49%;}
.x4{width:24%;}
.fullWidth {width:100%;}

.border{border-right:1px solid; border-color:rgba(61,72,90,1.0); margin:0 10px;  padding:0 10px;}
 hr {border:0px dashed #DDD;border-top:1px solid ;border-color:rgba(61,72,90,1.0); height:0px; margin:0 20px 0 20px;clear:both; }	



.hero{ height:350px; background-color:rgba(61,72,90,0.0);  
padding:20px 0px; 
width:100%;
margin:0; margin-top:20px; 

	background-size: cover}

.hero h1{font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
	font-size: 6rem;
	font-weight: 800;
	line-height: 5rem;
	margin-left:0;
}
.hero p{font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
	font-size: 3rem;
	font-style:normal;
	font-weight: 100;
	line-height: 3rem;
	margin-left:0;
}
.columns {
	-webkit-column-count: 3;
	-webkit-column-gap: 10px;
	-webkit-column-fill: auto;
	-moz-column-count: 3;
	-moz-column-gap: 10px;
	-moz-column-fill: auto;
	column-count: 3;
	column-gap: 10px;
	column-fill: auto;
}





.panel{	
	/*overflow: hidden;*/

	margin-bottom:2px;
	padding-bottom:40px;
	
	
	}
.panel:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;


}

.half{float:left; width:50%; }

.small{font-size:1.15rem; font-style:normal; font-weight:100;}
.minwidth{overflow: auto;}
.segmentBox{ width:100%; float:left;  border-top:0px solid;border-bottom:1px solid;
border-color:rgba(61,72,90,1.0); margin:10px; padding:30px 0 30px 0;}
.segmentBox h3{margin:0;}

.segmentBox:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;


}

.option-wrap{ width:100%; position:relative;  border:1px solid;
border-color:rgba(61,72,90,0.2); margin:10px 0 40px 0; padding:0px 0 0px 0;}


.option-wrap:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;


}
 
 .copyBox{ width:960px; float:left; border:0px solid;
border-color:rgba(61,72,90,1.0); margin:0.02%; margin-bottom:0;margin-right:0; }

.copyBox p{ color:rgba(0,0,0,0.7); font-size:1.35rem; margin:10px;}


.list { margin:20px 0px 10px 0px ; padding:0; list-style-type:none; 

 }

.study{font-size:120%; text-transform: uppercase; margin:30px 20px;20px 20px;}

.list li {
 float:left;
 width:23%;
 margin:10px 0px 10px 20px;
 line-height: 18px;
 border-bottom:1px solid ;
 border-color:rgba(61,72,90,1.0);
font-weight:300;	
 font-size:90%;
 cursor:pointer;

 }



 .select{cursor:pointer;}
	
.select:hover{border-color:rgba(61,72,90,1.0)}


.overview{

width:1410px; border:0px solid #f00; margin:auto;}

.overviewBox{ 
position:relative;
width:450px; 
float:left; 
height:280px; 
background-color:rgba(255,255,255,0.05); 
margin:10px; 
border-top:2px solid;  
border-color:rgba(61,72,90,0.35);overflow:hidden;}

.overviewBox p{font-size:1.25rem;color:rgba(0,0,0,0.95); margin:0;}
.overviewBox h3{font-size:2.15rem;text-transform:uppercase; margin:0; margin-top:10px;}

.obHead{ border-bottom:0px solid;
border-color:rgba(61,72,90,0.35);padding:0px 0;}


.obDemos{ 
border-bottom:0px solid;
border-color:rgba(61,72,90,0.35);height:45px;width:100%; padding:15px 0 20px 0px;}

.obProgs{ 
width:100%; padding:30px 0px }

.obProgs h4 { margin:5px 0;}

.info{position:absolute; top:10px; right:0; background-color:rgba(61,72,90,0.80);color:rgba(255,255,255,0.8); width:17px; height:17px; text-align:center; padding:3px;}	
/**********************/	
	

/*.overviewBox:nth-child(even) {margin-left:40px}
.overviewBox:nth-child(odd) { margin-left:0px}*/


button, input, select, textarea {
font-family:inherit;
font-weight:300;
font-size:110%; 
-webkit-appearance:value;
-moz-appearance:value;
appearance:value;
background-color:rgba(255,255,255,0.0);
border:1px solid;
border-color:rgba(61,72,90,1.0);
color:rgba(61,72,90,1.0);	
padding:5px 10px;
}

input, select, textarea { width:95%;}





.next { font-size: 1.25rem; padding:3px;  float:right;  width:70px; text-align:center;  background-color:rgba(20,50,150,0.1); cursor:pointer; border:0px solid;border-color:rgba(61,72,90,1.0); border-radius:2px; margin-right:10px; margin-top:10px; }


.next:hover{background-color:rgba(0,0,0,0.3);}

.none{display:inline; float:none;}
.right{float:right};


.layout{padding:10px;}/*historic*/
.pad{padding:30px 0;}

/**************Colours**************/



/**************Widths**************/
.w32{width:30%;}
.width{ width:30%;}
/*
#done{background-color:#333;  color:#FFF;}*/

table {}

.tableWrap{
	
	width:100%;
	max-height: 800px; 
				width:100%;	 	
				overflow:hidden;
				overflow-y: auto;
	padding-bottom:30px;
	}

	.data-table{
	width:100%;	
	border-collapse: collapse;
	padding:0; 
	margin-top:0px;
	margin-bottom:20px;
	font-size:90%;
	
	}
	
	
.data-table thead {
					background-color:rgba(61,72,90,1.0); 
					width:100%;	
					}

.data-table tbody {
				background-color:rgba(255,255,255,1.0); 
				/*display:block;*/	
				}
	
	
	.data-table th{
		text-align:left; 
		height:50px;
		padding:10px 0px 10px 20px;
		width:10%;
		color:rgba(255,255,255,0.85);}
	
	
	.data-table  tbody tr{
	border-top:1px solid #ddd;
	}
	.data-table tr:hover{
		background-color:#FF0;
	}
	
	.data-table td{
		padding:10px 0px 10px 20px; 
		margin:0px; 
		font-weight:300; 
		width:10%;
		text-align:left;
	}

	
.data-table thead tr:hover{background-color:rgba(0,0,0,0.25);}
 th{	
	padding:10px 0px 10px 20px; margin:0px; font-weight:300; width:10%;
	}


.data-table td.mar{ width:5%}

.emph{ 
    font-weight:bold;
   
}


.filter-container{width:90%; ; margin:10px  10px 10px 10px;  position:relative;  z-index:3000;}	

.drop-down{ position:absolute; top:30px; right:0px; z-index:3000;  min-width:160px; display:block; background-color:rgba(255,255,255,0.85); padding:10px 10px 30px 10px}

.drop-down div { padding:5px 0; border-bottom:1px solid; border-color:rgba(61,72,90,1.0);; cursor:pointer;}

.option-head{
	position:relative;  border:1px solid; border-color:rgba(61,72,90,1.0);padding:2px 10px; display:inline-block; background-color:rgba(61,72,90,0.8); 
	color:rgba(255,255,255,0.75);
}



.horpanel {
	width: 100%;
	background-color: rgba(255,255,255,0.5);
	color: rgba(0,0,0,0.75);
	padding:10px 0 50px 0;
	margin-bottom:2px;
	border-bottom:0px solid;
border-color:rgba(61,72,90,1.0);


}

.horpanel:after {
	content: " ";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;


}

.footer{ min-height:100px; margin-bottom:0;}



/**********input*/
label{text-transform:uppercase; font-size:1.25rem;  margin: 10px 0px 0px 0px;}
input {
   border:0;   
   padding: 5px;
   background: rgba(255,255,255,0.15);
   margin: 10px 0px 0px 0px;
 
   font-weight:300;
}
input.search{ background: rgba(255,255,255,0.0);border-bottom:1px solid; border-color: rgba(0,0,0,0.5); padding: 5px 0; margin:10px 0;}
input[type=text] {
 -webkit-appearance: none;
  width: 80%;
  
}
input[type=range] {
 -webkit-appearance: none;
  width: 95%;
 
}

input[type=range]::-webkit-slider-runnable-track {
  width: 95%;
  height: 5px;
  cursor: pointer; 
  background: #ddd;
  
}


input[type=range]::-webkit-slider-thumb {
  height: 16px;
  width: 16px;
  background: #444;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}


input[type=button] {
padding: 5px 10px;
margin: 0 10px 10px 0;
color: #FFF;
text-align: center;
background-color: rgba(0,0,0,0.95);
cursor: pointer;
border-radius:3px;
font-size:90%;


}
/**********  input*/
.filters{padding:10px 0 40px 0; width:100%;}
.filters h3,p,label,input[type=text]{color:rgba(255,255,255,0.75);}
.filter-head{padding:5px; background-color:rgba(61,72,90,0.0); }
.block{width=100%; height:40px;background-color:rgba(255,72,90,0.8);}
/************** bars etc**************/


.show-top-n{ margin:10px;}

.scale{
float:left;
height:32px;
width: 3px;
margin-right:3px;
background-color:rgba(0,0,0,0.25);
}
.age{
 margin:10px 0 15px 0;
	padding:5px 0;
	float:left;
	width:100%;
	
	
	}

.gender{
 margin:10px 0 5px 0;
	padding:0;
	float:left;
	
	margin-right:5px;
	
	}
.gbar{width:44%;font-size:0.95rem;
	nowrap;text-overflow: ellipsis;
	padding:5px 3px;	
	float:left;
	margin:0;
background-color:rgba(25,55,155,0.5);
}


.col_wrap{
	padding:0;
	float:left;
	width:30%;
	background-color:rgba(255,255,255,0.25);
	height:80px;
	margin-bottom:8px;
	margin-right:15px;
	text-align:center;
	}
.bar-col{ float:left;width:25%;height:80px; background-color:rgba(0,0,0,0.05);margin-right:10px;}
.bar-col div{height:50%;background-color:rgba(0,0,100,0.45);margin-top:40px;}
.bar-label{width:100%; clear:left;}
.bar{
	padding:0;
	float:left;
	width:90%;
	background-color:rgba(0,0,0,0.05);
	height:15px;
	margin-bottom:8px;
	}
.label{background-color:rgba(255,255,255,0.0); font-size:1.25rem;text-align:left;white-space: nowrap;text-overflow: ellipsis; }
.value{width:67%;
	height:15px;
	float:left;font-size:1.25rem;	
	background-color:#fadb30;
	color:rgba(61,72,90,1.0);
	padding:1px 3px; 
}

.snippet{width:90px;
	height:45px;
	float:left;
	margin:0;
	background-color:rgba(61,72,90,0.0);
	color:rgba(61,72,90,1.0);
	padding:8px 0px 0 0;
	margin:0px;
	text-align:left;
	font-size:3rem;

}
.comp-panel {margin:5px 0; border-top:1px solid;border-bottom:1px solid; border-color:rgba(122,136,146,1.0);}
.mid{margin-right:1.75%;margin-left:1.75%;}

.stat{width:90px;
	
	position:relative;
	float:left;
	margin:0;
	background-color:rgba(0,0,0,0.05);
	color:rgba(255,255,255,0.75);
	padding:10px 0px 20px;
	margin:10px  10px 0px 0;

}
.stat p{text-align:center; margin:0}
.stat_label{padding:2px; background-color:rgba(0,0,0,0.95); width:20px; position:absolute; bottom:0; right:0; font-size:1.15rem;text-align:center;}

.key{ float:left; width:22%;
 margin:10px;}

.key span{ font-size:1.25rem;}

.keyBox{width:15px;height:15px; border:0px solid #000;float:left;margin-right:10px;
;}

`.num-picker{margin:10px;}

.search-results{ margin:0px 10px 0 0 0; padding:0px 0;



}
.result-item{margin:10px 0;}
/**************bars**************/

/**************heatmap**************/

.heatmap-wrap{/*width:1100px; */

border:0px solid #f00; margin:auto;}
table.heat-map  {font-size:1.2rem; with:90%; border-spacing: 10px 10px}
.heat-map table th { padding:1px;}

.heat-map td { 
	padding:0px;
	height:40px;	
	width:40px;	
	text-align:center;
	color:#FFF;
	border-radius: 0px;
    -moz-border-radius: 0px;
  
}
td.rotate {
  /* Something you can count on */
  height: 70px;
  white-space: nowrap;
}

td.rotate > div {
color:rgba(0,0,0,0.75);
padding:0;
margin:0;
  transform: 
    /* Magic Numbers */
    translate(0px, 0px)
    /* 45 is really 360 - 45  */
    rotate(270deg); 
    width: 20px;
}

/**************heatmap**************/


/**************matrix**************/

.sim-col{float:left;}
table.matrix  {font-size:1.2rem; with:90%; border-spacing: 30px 5px; margin-top:-75px;margin-left:-30px;}
.matrix table th { padding:1px;}

.matrix td { 
	padding:0px;
	height:40px;	
	width:40px;	
	text-align:center;
	color:#333;
	border-radius: 0px;
    -moz-border-radius: 0px;
  
}
.matrix-cell{background-color:rgba(0,0,0,0.05)}
.matrix td.rotate {
  /* Something you can count on */
  height: 70px;
  white-space: nowrap;
}
td.seg-label{color:rgba(0,0,0,0.75); white-space: nowrap; text-align:left;	text-overflow: ellipsis;}
.ellipse{white-space: nowrap; text-align:left;	text-overflow: ellipsis;}
.matrix td.rotate > div {
color:rgba(0,0,0,0.75);
padding:0;
margin:0;
  transform: 
    /* Magic Numbers */
    translate(40px, 50px)
    /* 45 is really 360 - 45  */
    rotate(90deg); 
    width: 20px;
}

/**************matrix**************/


ul {
    list-style: none;
    margin:0;padding:0;
}
ul li {
        margin:5px 10px; font-size:1.25rem;
}
.p-status{font-size:1.5em;}
.marg{margin-right:10px;}
.simhead h3{margin-left:10px; padding:10px 0; }!important
/**************Colours**************/
	.cyan{background-color:#5fdff8;}
	.orange{color:#FF9900; }
	.gray{background-color:rgba(0,0,0,0.25);}
	.white{background-color:rgba(255,255,255,0.795);}
	.bluegray{background-color:#EBEEF0;}
	.blue{background-color:#3fbfe8; }
	.purple{background-color:rgba(155,55,255,0.795);}
	.green{color:rgba(105,175,55,0.795);}
	.yellow{background-color:#EBEEF0;}
	.whiteFG{color:rgba(255,255,255,0.9);}
	.blackFG{color:rgba(0,0,0,0.75);}
	.black{background-color:rgba(0,0,0,0.75);}
	.light{background-color:rgba(255,255,255,0.5);}
	.tint{background-color:rgba(0,0,0,0.025);}
	.C4_Blue_Gray{background-color:rgba(61,72,90,1.0);color:rgba(255,255,255,0.85)}

/**************Overides**************/
.right{float: right; margin:10px;}
.left{float: left; margin:10px;margin-right:40px}
.border_r_off{border-right:0px;}
.border_bottom{border-top:solid 2px #ddd;}
.padB{padding-bottom:40px;}
.padT{padding-top:40px;}
.m-auto{margin:auto;}
.m10{margin:10px;}
.on{background-color: #6fc4c0; color:rgba(255,255,255,1)}	

.m0{margin:0px;}
p.padR{margin:0; margin-bottom:10px;padding-bottom:20px; font-size:1.5rem;color:rgba(61,72,90,1.0);}
.vanilla{padding:0; margin:0; }
.rel{position:relative;}

.emp{font-weight:bold;}

.bubblechart{ width:100%; height:500px;}

.activity{margin-bottom:15px;}

@media (max-width:1410px) and (min-width:950.5px){ .overview{width:950px;}


}
@media (max-width:800px) and (min-width:481px) {
.mid{margin-right:1.75%;margin-left:1.75%;}
.columns {-webkit-column-count: 2;
	-moz-column-count: 2;	
	column-count: 2;
	
}
.c-1,.c-2,.c-3{width:48%;}
.overview{width:500px;}

.label{background-color:rgba(255,255,255,0.0); font-size:1.25rem;text-align:left;white-space: normal; }

}

@media (max-width:480px) {
.peekaboo{display:none;}
.overview{width:100%;}
.mid{margin-right:0;margin-left:0;}

.columns {
	-webkit-column-count: 1;	
	-moz-column-count: 1;	
	column-count: 1;
	
}
.label{background-color:rgba(255,255,255,0.0); font-size:1.05rem;text-align:left;white-space: normal; }
.half{ width:100%; }
.marg-adjust{margin-left:-10px; margin-top:30px;}
.sim-col{display:block;}
.c-1,.c-2,.c-3{width:98%;}

.snippet{width:60px;font-size:1.75em}
.overviewBox{ 
position:relative;
width:300px; 
border:0px solid #000;

}	

table.heat-map  {font-size:1.0rem;  border-spacing: 1px 1px;}
.ellipse{width:30px; overflow: hidden;}


.wrap{
	width:96%;
	padding:0px;
	margin:auto;
}