body {
	font-family: 'Muli', sans-serif !important;
    background-color: #FFF !important;
}
h1,h2,h3,h4{
	font-family: 'Muli', sans-serif !important;
}
.bigger-text{
	font-size: 1.1em;
}
#profile{
	padding-top: 20px;
	border-top: 1px solid #888;
	display:none;
	margin-bottom: 30px;
}
#short-profile{
	padding-top: 20px;
	border-top: 1px solid #888;
	display:none;
}
.border{
	stroke:#888;
	stroke-width:.3;
	cursor:pointer !important;
	pointer-events: all !important;
}
.border.highlight{
	fill: #225EA8;/*#199BDB;*/
}
.num{
	font-size: 1.2em;
	color: #FC521F;/* #E61848;*/
}
.section{
	border-top:1px #ccc solid;
	padding-top: 20px;
}
.top{
	padding:20px 0;
	margin:10px 0;
	border-bottom: 1px #888 solid;
}
.bottom{
	padding-top:20px;
	border-top: 1px #888 solid;
}

svg text{
	text-rendering: geometricPrecision;
}

/* ----- customised buttons ----- */
.btn-map {
	font-family: 'Muli', sans-serif;
    padding: 10px;
    font-size: 1rem;
    background: white;
    color: #e61848;
    box-shadow: inset 0 0 0 2px #e61848;
    -webkit-transition: background 0.5s;
    transition: background 0.5s;
    border-radius: 0;
    height: auto;
    line-height: 1em;
    text-align: center;
}

.btn-map:not([disabled]):not(.disabled).active, .btn-map:not([disabled]):not(.disabled):active, .show > .btn-map.dropdown-toggle {
    color: #fff;
    background-color: #e61848;
    border-color: white;
	border-radius: 0;
}

.btn-group{
	padding-bottom: 10px;
}
/* ----- tooltips ------ */

/* arrow bottom */
.arrow_box_bottom {
	position: absolute;
	background: #000000;
	color:#ccc;
	padding: 10px;
	border: 0;
    -webkit-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
	z-index: 1200;
	width: 280px;
	height:auto;
    display:none;
	pointer-events: none;
}
.arrow_box_bottom:after, .arrow_box_bottom:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box_bottom:after {
	border-color: rgba(0, 0, 0, 0);
	border-top-color: #000000;
	border-width: 10px;
	margin-left: -10px;
}

.arrow_box_bottom:before {
	border-color: rgba(219, 219, 219, 0);
	border-top-color: #DBDBDB;
	border-width: 11px;
	margin-left: -11px;
}

.arrow_box_bottom .mainval{
	color: #FFF;
}
.arrow_box_bottom .values{
	font-size: 0.8em;
	padding-top:5px;
}
.arrow_box_bottom .tooltiprow{
	display:block;
	float:clear;
}
.arrow_box_bottom .sizetitle{
	font-size: 1.2em;
}
.arrow_box_bottom .title{
	padding:0;
	width: 60%;
	float: left;
	text-align: right;
}
.arrow_box_bottom .val{
	color:#FFF;
	width: 40%;
	float: right;
	text-align: right;
}
.arrow_box_bottom .title2{
	padding:0;
	width: 70%;
	float: left;
}
.arrow_box_bottom .val2{
	color:#FFF;
	width: 30%;
	float: right;
}
.arrow_box_bottom .title3{
	padding:0;
	width: 80%;
	float: left;
}
.arrow_box_bottom .val3{
	color:#FFF;
	width: 20%;
	float: right;
}
.arrow_box_bottom .main{
	font-size: 1.1em;
	padding-bottom:5px;
}
.arrow_box_bottom .loc{
	padding-bottom:10px;
}
/* arrow left or right  */

.arrow_box {
	position: absolute;
	background: #000000;
	color:#ccc;
	z-index: 1200;
	padding:10px;
	border: 0px;
    -webkit-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 5px -2px rgba(0, 0, 0, 0.4);
   	display:none;
}
.arrow_box:after, .arrow_box:before {
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_box.arrow_left:after, .arrow_box.arrow_left:before {
	right: 100%;
}
.arrow_box.arrow_left:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #000000;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_box.arrow_left:before {
	border-color: rgba(194, 225, 245, 0);
	border-right-color: #000000;
	border-width: 11px;
	margin-top: -11px;
}
/* arrow right */
.arrow_box.arrow_right:after, .arrow_box.arrow_right:before {
	left: 100%;
}
.arrow_box.arrow_right:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #000000;
	border-width: 10px;
	margin-top: -10px;
}
.arrow_box.arrow_right:before {
	border-color: rgba(194, 225, 245, 0);
	border-left-color: #000000;
	border-width: 11px;
	margin-top: -11px;
}
.tooltip_map, .tooltip_chart{
	width: 320px;
}
.arrow_box .title{
	font-size: 1.4em;
	color: #FFF;
}
.arrow_box .subtitle{
	font-size: 1em;
	text-transform: uppercase;
}
.arrow_box .val{
	width: 50%;
	float: left;
	display:inline;
	color:#FFF;
}
.arrow_box .tooltip-label{
	font-size: .8em;
	color:#ccc;
}
.arrow_box .value{
	font-size: 2.1em;
}

.arrow_box .smallvalue{
	font-size: 2.1em;
}
.tooltip-section{
	padding-top: 5px;
	border-top: 1px solid #888;
	height:105px;
}
/* ----  treemap ----- */

.treemap-container{
	margin: 20px 0;
}

#treemap, #treemap2{
	position:relative;
	height:80px;
	display:block;
	overflow:hidden;
}
.node {
	font-size:.9em;
	line-height: .9em;
	overflow: hidden;
	position: absolute;
	padding:2px;
	color: #000;
}
#growth{
	margin:20px 0;
}
/* ----- scatterplot - growth chart ----- */

.tick.highlight line{
	stroke-width:1;
	stroke:#888;
}
.tick.highlight text{
	font-weight: bold;
}
.tick {
	font-family: 'Muli', sans-serif !important;
	font-size:1.3em;
}
.tick rect.positive{
	opacity: .6;
	shape-rendering:crispEdges; 
}
.tick rect.negative{
	opacity: .6;
	shape-rendering:crispEdges; 
}
.tick .xTick text{
	fill:#888;
	font-size:0.7em;
	text-anchor: middle;
}

.tick line{
	stroke-width:.5;
	stroke:#c5b8ad;
}
.dot, .regiondot{
	stroke-width:1;
	stroke:#FFF;
	shape-rendering:crispEdges; 
}
.subcatTitle{
	font-size: 1.3em;
}
.growthValue{
	font-size: 1.3em;
	stroke: none;
}

/* ------ highlight ttwa's in map -----*/

/* Safari 4.0 - 8.0 */
@-webkit-keyframes highlight-opacity {
    0%   {opacity: 1;}
    50%  {opacity:1;fill:#225EA8}
}

/* Standard syntax */
@keyframes highlight-opacity {
    0%   {opacity: 1;}
    50%  {opacity:1;fill:#225EA8}
}
.high-opa{
    -webkit-animation-name: highlight-opacity; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: .5s; /* Safari 4.0 - 8.0 */
    animation-name: highlight-opacity;
    animation-duration: .5s;
    animation-iteration-count: infinite;
}
.border:hover{
    -webkit-animation-name: highlight-opacity; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
    animation-name: highlight-opacity;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
/* ---- legend overall styles ---- */

.legendText{
	color: #888;
	font-size: 0.7em;
	fill:#888;
}
.legendTitle{
	font-size: 0.9em;
	color: #888;
	fill:#888;
}

/* ---- growth legend ---- */

.gr-legend2, .gr-legend3{
	border-left:1px solid #f6f6f6;
}
.gr-legend{
	border-top:1px solid #f6f6f6;
}
.maplegend{
	position: absolute;
	width:210px;
	bottom: 150px;
	left:20px;
	z-index: 5;
	pointer-events:none;
}
.bivLegend{
	display:none;
}

/* ---- general styles website Nesta ---- */

#backtotop {
	display: none;
    padding: 10px;
    font-size: 1rem;
    background: #e61848;
    color: white;
    box-shadow: inset 0 0 0 2px #e61848;
    -webkit-transition: background 0.5s;
    transition: background 0.5s;
    border: none;
    border-radius: 0;
    height: auto;
    line-height: 1em;
    position:fixed;
    bottom:10px;
    right:10px;
    text-align: center;
    cursor:pointer;
    z-index:100;
}
a {
	color:#e61848 !important;
}
#backtotop:hover{
	color:#e61848;
	background:white;
}

/* ---- alignment ------ */

.right{
	text-align: right;
}
.center{
	text-align: center;
}

/* ---- interaction elements ----- */

.interaction h6{
	margin-top: 10px;
	background:#FFF;
}

#sidebar.affix {
    position: fixed;
    top:185px;
    z-index:10;
}

input.typeahead{
	font-family: 'Muli', sans-serif;
	width: 300px;
	height: 40px;
	padding:8px;
	border: #888 1px solid;
}

#clustersOnly{
	pointer-events:all;
}
/* ---- responsiveness ----- */

@media (min-width: 768px) {
	#sidebar.affix {
		top:160px;
	}
}
@media (min-width: 992px) {
	#sidebar.affix {
		top:120px;
	}
}