/************ Page chrome & utility classes *************/

html, body {
	font-size: 18px;
}

body {
	margin: 0;
	background: #f3f3f3;
	font-family: 'Lato', "Helvetica Neue", sans-serif;
	color: #555459;
	-webkit-font-smoothing: antialiased;

	/* sticky footer */
	display: -webkit-flex;
	display: flex;
	min-height: 100vh;
	-webkit-flex-direction: column;
	flex-direction: column;
}

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

a img {
	border: none;
}

.section.main {
	/* stretch the main content section */
	/*-webkit-flex: 1;*/
	flex: auto;

	background: white;
	box-shadow: 0 0 3px #eee;
}

img {
	max-width: 100%;
}

.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container:before,
.container:after {
  content: " ";
  display: table;
}
.container:after {
  clear: both;
}

#logo {
	position: relative;
	width: 460px;
	margin-top: 3rem;
	margin-bottom: 1.5rem;
}

@media (min-width: 992px) {
	#logo {
		left: -80px; /* offset the hash */
	}

	.container {
		/* leave space for the hash */
		padding-left: 90px;
		padding-right: 90px;
	}
}

#footer {
	margin-bottom: 40px;
}
#footer p {
	color: #AAA;
	font-size: 0.9rem;
}
@media (min-width: 1200px) {
	#footer p {
		max-width: 50%;
	}
}

.lato_light {
	font-weight: 300;
}

.happy_green {
	color: #76aa62 !important;
}
.happy_green_bg {
	background: #92C37E;
}

.concerned_yellow {
	color: #F5A623 !important;
}
.concerned_yellow_bg {
	background: #FFDB87;
}

.kumpy_blue {
	color: #79ABE5 !important;
}
.kumpy_blue_bg {
	background: #c6e1ff;
}

/************* Current Status box ******************/

.current_status {
	background: white;
	position: relative;
}

.section.status .container + .container {
	margin-top: 90px;
}

.current_incident, .current_status {
	padding: 30px;
}

@media (min-width: 992px) {
	.current_status {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
	}
	.current_incident, .current_status.all_clear {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
	}
}

@media (max-width: 991px) {
	.section.status {
		background: white;
		padding-bottom: 1rem;
	}
}

.current_status h1 {
	font-size: 2.5rem;
}

@media (max-width: 480px) {
	.current_status h1 {
		font-size: 2rem;
	}
}

.current_status .sub_header {
	font-size: 1.2rem;
}

.current_status .status_image {
	display: none;
	height: 280px;
	width: 280px;
	position: absolute;
	right: -60px;
	top: -60px;
}
@media (min-width: 767px) {
	.current_status .status_image {
		display: inline;
	}
	.current_status {
		padding-right: 220px;
	}
}

/************* Incidents listing *************/
.incident {
	margin-top: 2.5rem;
}

.incidents_header {
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

	-ms-flex-pack: baseline;
	-webkit-align-items: baseline;
	align-items: baseline;
}
.incidents_header h3, .incidents_header h1 {
	-ms-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}

.incident_update {
	display: -webkit-flex;
	display: flex;
}
.incident_update .time {
	width: 16%;
	color: #2a80b9;
}

.timezone a {
	color: #AAA;
	margin-top: 3px;
	font-size: 0.7rem;
}
.incident_message {
	-webkit-flex: 1;
	flex: 1;
}

@media (max-width: 568px) {
	.incident_update, .incidents_header {
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	.incident_update .time {
		width: auto;
	}
}