/*
Generic styles
*/

html,body{
	margin:0;
	padding:0;
	min-height: 100vh;
	height: auto !important;
	position: relative;
}
body{
	background: #F0ECE8;
	color:#3e3d35;
	font-family: 'Open Sans', sans-serif;
	font-size:16px;
}
a,a:visited,a:active{
	color:#564646;
}
a:hover{
	color:#6B5656;
}
pre{
	background: #fff;
	font-size: 0.8em;
	padding:10px 30px 10px 30px;
	border-left: 5px solid #91cbd9;
	word-wrap:break-word;
}
.bg-red{
	background-color: #B50629;
}
.bg-orange{
	background-color: #D17239;
}
.bg-yellowgreen{
	background-color: #9FBD4E;
}
.bg-green{
	background-color: #3E933B;
}
.bg-lightblue{
	background-color: #64b3c9;
}
.bg-mediumblue{
	background-color: #5e95c9;
}
.bg-darkblue{
	background-color: #1E2945;
}
.bg-purple{
	background-color: #623a72;
}
.ctrl{
	margin-right: auto;
	margin-left: auto;
	max-width: 1000px;
	width:90%;
}
.main-wrapper{
	margin-top: 20px;
}
.obj-right{
	float: right;
}
.ovhidden{
	overflow: hidden;
}
.caption{
	font-size: 0.8em;
	font-style: italic;
	padding-top: 10px;
	text-align: center;
}
.italic{
	font-style: italic;
}
.hidden{
	display: none;
}
.flex{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-align-content: center;
    align-content: center;
}
.flex.flextop{
	-webkit-align-items: flex-start;
    align-items: flex-start;
}
.flex .flex-item-4{
  width: 25%;
  height: 33.33%;
  min-width: 200px;
  text-align: center;
  box-sizing:border-box;
  padding:10px;
}
.flex .flex-item-4 a{
  	box-sizing:border-box;
	display: inline-block;
	font-size: 0.8em;
	height: 100%;
	position: relative;
	text-decoration: none;
	width: 100%;
	   -webkit-transition: all 500ms ease;
        -moz-transition: all 500ms ease;
         -ms-transition: all 500ms ease;
          -o-transition: all 500ms ease;
             transition: all 500ms ease;
}

.flex .flex-item-4 a.official.blue::before{
    background: #1571c0;
}
.flex .flex-item-4 a.official.grey::before{
    background: #464646;
}
.flex .flex-item-4 a.official.darkblue::before{
    background: #2b3539;
}
.flex .flex-item-4 a.official.orange::before{
    background: #f97937;
}

.flex .flex-item-4 a.official::before{
	content: 'Official';
    position: absolute;
    left: 0;
    color: #fff;
    padding: 2px 4px;
    text-transform: uppercase;

}
.flex .flex-item-4 a:hover{
	background: #F9F9F9;
	border:1px solid #ccc;
}
.red-bg{
	background: red;
	color: #fff;
	padding: 2px 4px;
	font-weight: bold;
}
.text-blue{
	color: #729faa;
}
.centered{
	text-align: center;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
.rounded{
	background: #fff;
    color: #729faa;
    border-radius: 200px;
    height: 30px;
    width: 30px;
    padding: 10px;
    text-align: center;
    font-size: 29px !important;
}
/*
Layout
*/
header{
	background-color: #729faa;
	background-image: url(../images/header-large.jpg);
	background-position: 50% 0%;
	background-size: cover;
	background-repeat: no-repeat;
	height:100px;
	position: relative;
}
.type--cms header{
	height: 450px;
}
header > .ctrl{
	display: flex;
	flex-wrap:wrap;
}
header h1{
	display: inline-block;
	margin:0;
	padding:0;
	padding-top: 25px;
}
nav.main{
	margin-left: auto;
}
	nav.main ul{
		list-style-type: none;
		margin:0;
	}
	nav.main ul li{
		display: table-cell;
		margin:0;
		padding:0;
	}
	nav.main ul li a{
		color:#fff;
		display: table-cell;
		text-decoration: none;
		height: 100px;
		padding: 0 20px;
		transition:background 0.6s ease;
		vertical-align:middle;
	}
	nav.main ul li a.current,
	nav.main ul li a:hover{
		cursor: pointer;
		background: rgba(122, 169, 181, 0.42);
		border-bottom: 5px solid #91cbd9;
	}
	nav.main ul li img.twitter{
		height: 18px;
	}
header .header--cms{
	color: #fff;
	font-size: 2em;
	font-weight: 100;
	position: absolute;
	bottom: 45px;
	width: 100%;
}
	header .header--cms h1{
		display: inherit;
		font-size: inherit;
		font-weight: inherit;
	}
	header .header--cms h1 .mask{
		display: none;
	}
	header .header--cms .round-image{
		margin: 0 20px;
	}
	header .header--cms .download {
		margin-top: 15px;
		text-align: center;
	}
	header .header--cms .download a{
		color: #fff;
		text-decoration: none;
		border: 1px solid #fff;
		font-size: 1.1rem;
		padding: 7px 15px;
		border-radius: 4px;
		transition:all 600ms ease;
		background: transparent;
	}
	header .header--cms .download a:hover{
		background-color: #fff;
		color: #cc7528;
	}
.content{
	padding-bottom: 30px;
}
.content p{
	margin-top: 0px;
}

.content h1,
.content .homepage h2{
	background:none;
	display: block;
	padding:0;
	color:#3e3d35;
	font-size:1.5em;
	border-bottom: 1px solid #91cbd9;
	margin: 40px 0 13px;
}
.content h2,
.content .homepage h3{
	font-size:1.1em;
	display:inline-block;
	margin:15px 0 0 0;
	padding:2px 5px;
	background:#91cbd9;
	color:#fff;
}
.content .homepage h2 + h3{
	margin-top: 0;
}
.content h3{
	color: #999;
	font-size: 1.1em;
}
.content h4{
	font-weight: bold;
	text-decoration: underline;
}
.content em{
	color:#729faa;
	font-weight: bold;
	font-style: normal;
	font-family: monospace;
}
.content span.status{
	font-family: monospace;
	font-weight: bold;
}

.content .homepage:first-child{
	margin-top: 20px;
}
.content .homepage .chart{
	position: relative;
}
.content .homepage .chart .percent{
	position: absolute;
	right: 0;
}
.content .homepage .chart .bar-wrapper{
	background: #ccc;
	display: inline-block;
	width: 75%;
	height: 20px;
	position: relative;
}
.content .homepage .chart .bar-wrapper .bar{
	background: #35BBB4;
	box-sizing:border-box;
	display: inline-block;
	padding-right: 10px;
	text-align: right;
	font-size: 0.8em;
	color: #fff;
	font-weight: bold;
	height: 20px;
	position: absolute;
}
.content .homepage .chart .bar-wrapper span{
	float: right;
	box-sizing:border-box;
	padding-right: 10px;
	font-size: 0.8em;
	color: #fff;
	font-weight: bold;
	height: 20px;
}
.content .homepage .chart .percent{
	display: inline-block;
	box-sizing:border-box;
	padding-right: 10px;
}
.content .homepage .information{
	font-size: 2.3em;
	text-align: center;
	margin-top: 20px;
	width: 100%;
}

.content .page.status .meter { 
	display: inline-block;
	height: 13px; 
	width: 150px; 
	position: relative;
	background: #555;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}
.content .page.status .meter > span {
	display: block;
	height: 100%;
	background-color: rgb(43,194,83);
	background-image: linear-gradient(
	center bottom,
	rgb(43,194,83) 37%,
	rgb(84,240,84) 69%
	);
	box-shadow: 
	inset 0 2px 9px  rgba(255,255,255,0.3),
	inset 0 -2px 6px rgba(0,0,0,0.4);
	position: relative;
	overflow: hidden;
}
.content .page.status .meter.darkgreen > span {
  background-color: #f1a165;
  background-image: linear-gradient(to bottom, #1FA150, #209D4F);
}
.content .page.status .meter.green > span {
  background-color: #f1a165;
  background-image: linear-gradient(to bottom, #00ca4c, #15B551);
}
.content .page.status .meter.yellowgreen > span {
  background-color: #f1a165;
  background-image: linear-gradient(to bottom, #b5ca00, #99A910);
}
.content .page.status .meter.orange > span {
  background-color: #f1a165;
  background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}

.content .page.status .meter.red > span {
  background-color: #f0a3a3;
  background-image: linear-gradient(to bottom, #FF0A00, #FF7D2D);
}

.content .page.status .meter.darkred > span {
  background-color: #f0a3a3;
  background-image: linear-gradient(to bottom, #FF0000, #BD2626);
}



.content .page .twitter-feed{
	text-align: center;
}


.content .page.form form input[type="text"],
.content .page.form form input[type="password"],
.content .page.form form textarea{
	border:1px solid #ccc;
	border-radius: 4px;
	font-size: 1em;
	padding:5px 10px;
	width:98%;
}
.content .page.form form input[type="submit"]{
	background: #729faa;
	border:1px solid #ccc;
	color:#fff;
	cursor: pointer;
	font-size: 1em;
	padding:5px 20px;
}
.content .page.form form input[type="submit"]:hover{
	background: #7aa9b5;	
}

.content .stats .graphics{
	height:300px;
	margin:20px 0 30px;
}
.content .stats .graphics.bigheight{
	height:400px !important;
}
.content .stats .graphics{
	display: table;
	text-align: center;
	width: 100%
}
.content .stats .graphics .graphic-loader{
	border:1px dashed #729faa;
	display: table-cell;
	vertical-align: middle;
}

.content .page.cms{
	padding-top: 30px;
}
.content .page.cms .subtitle{
	font-size: 1.5em;
}
.content .page.cms .flex .colorbox{
	color: #fff;
	text-align: center;
	width: 20%;
	margin: 0 10px;
}
.content .page.cms .flex .colorbox i{
	margin: 10px 0;
	font-size: 40px !important;
}


footer{
	background-color:#3e3d35;
	background-image: url(../images/footer.jpg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	color:#fff;
	font-size: 0.6em;
	padding:5px 0;
	text-align: center;
	margin-bottom: -146px;
	position: absolute;
	width: 100%;
	bottom: 0;
}