html {
	font-family: 'Poppins', sans-serif;
	line-height: 1;
}

body {
	margin: 0;
	color: #121930;
	background: #E5F3E3;
}

/* Basic Styles */
a {
	color: white;
	text-decoration: underline;
}

a:hover,
a:focus,
a:active {
	text-decoration: none;
	color: #ddd;
}

p {
	margin: 0;
	margin-bottom: 10px;
}

strong {
	font-weight: 600;;
}

/* App Styles */

#app {
	margin: 0;
	/* background: rgb(31,191,243);
	background: linear-gradient(180deg, rgba(31,191,243,1) 0%, rgba(6,216,160,1) 100%); */
	background: #E5F3E3;
	/* background: -webkit-linear-gradient(to bottom, #1FBFF1 , #00E089);
	background: linear-gradient(to bottom, #1FBFF1 , #00E089); */
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 1px;
}

#header {
	padding: 45px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#logo {
	
}

#logo img {
	display: block;
	width: 235px;
	height: auto;
}

#title {
	text-align: center;
	font-size: 75%;
}

#title h1 {
	margin: 0;
	margin-top: 16px;
}

#title #location {

}

#realtime {
	text-align: center;
	margin-top: 25px;
}

#chart-wrapper {
	padding-top: 85px;
	margin-bottom: 55px;
	position: relative;
	overflow-x: hidden;
}

#stats {
	text-align: center;
	line-height: 1.3;
	padding: 0 25px;
}

#stats .stat {
	margin-bottom: 70px;
}

#download {
	padding: 50px;
	padding-top: 0;
	text-align: center;
	line-height: 1.3;
}

#download-inner {
	border-top: 1px solid white;
	padding-top: 50px;
}

#download .button {
	margin-top: 25px;
}

#footer {
	background-color: #121930;
	color: white;
	padding: 45px;
	font-size: 20px;
    line-height: 1.3;
}

#about {
	display: flex;
	align-items: flex-start;
}

#about img {
	display: block;
	margin-right: 25px;
	width: 150px;
	height: auto;
}

#social {
	margin-top: 25px;
	display: flex;
	align-items: flex-start;
}

#social img {
	display: block;
	margin-right: 25px;
	width: 30px;
	height: auto;
}

#social .icons {
	display: flex;
	margin-right: 14px;
}

#social .icons img:first-child {
	margin-right: 15px;
}

/* Shared styles */

.hidden-mobile {
	display: none;
 }

.stat-metric {
	font-size: 55px;
	line-height: 1.3;
	margin-bottom: 0;
}

.button {
	background: #CC5357;
	/* background: -webkit-linear-gradient(to bottom, #CC5357 , #EE1470);
	background: linear-gradient(to bottom, #CC5357 , #EE1470); */
	display: inline-block;
	padding: 20px 40px;
	font-weight: 600;
	color: white;
	border-radius: 30px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

/* Windmill styles */
#windmills {
	position: absolute;
    bottom: 57px;
	left: 0;
  	right: 0;
  	margin-left: auto;
  	margin-right: auto;
	display: flex;
    align-items: flex-end;
    justify-content: center;
	width: 400px;
	color: red;
}

.windmill {
	position: relative;
}

.blades {
	position: relative;
    top: 83px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

#windmill-sm .blades {
	top: 111px;
}

.tower {
	position: relative;
    top: -4px;
    left: 87px;
    display: block;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


/* Breakpoint 1 styles */

@media only screen and (min-width : 768px) {
	/* Styles here */
   	.mobile-only {
	 	display: none;
   	}

 	.hidden-mobile {
		display: initial;
 	}

	#realtime {
		/* float: right; */
    	/* margin-top: -110px; */
	}

	#download-inner {
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 0;
		padding-top: 25px;
	}

	#download-inner p {
		flex: 1 1 auto;
		max-width: 450px;
	}

	#download-inner p:last-child {
		flex: 0 0 300px;
	}

	#download .button {
		margin-top: 0;
	}
}


/* Breakpoint 2 styles */

@media only screen and (min-width : 1000px) {

	body {
		padding-bottom: 200px;
    	position: relative;
	}



	#header {
		flex-direction: row;
		justify-content: space-between;
	}

	#title h1 {
		margin-top: 0;
	}

	#realtime {
		margin-top: 0;
	}

	#stats {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#stats .stat {
		border-right: 1px solid #121930;
		margin-right: 50px;
		padding-right: 50px;
	}

	#stats .stat:last-child {
		border-right: 0;
		margin-right: 0;
		padding-right: 0;
	}

	#footer {
		display: flex;
    	align-items: flex-start;
		height: 100px;
		position: absolute;
		bottom: 0;
	}

	#social {
		margin-top: 0;
		flex: 0 0 300px;
		text-align: right;
		flex-direction: column-reverse;
	}

	#social .icons {
		justify-content: flex-end;
   	 	width: 100%;
	}
}

@media only screen and (min-width : 1200px) {
	#title {
		font-size: 100%;
	}
}

/* Chart Styles */
#chart {
	position: relative;
    z-index: 100;
}

.x-axis path, .x-axis line {
	fill: none;
	stroke: #fff;
	shape-rendering: crispEdges;
}

.x-axis path {
	stroke: none;
}

.x-axis .tick line {
	transform: translate(0, 15px);
}

.area { fill: #4ca3bd; }

.d3-tip {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.4;
	padding: 20px;
	pointer-events: none !important;
	color: #203d5d;
	box-shadow: 0 4px 20px 4px rgba(0, 20, 60, .1), 0 4px 80px -8px rgba(0, 20, 60, .2);
	background-color: #fff;
	border-radius: 4px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
	box-sizing: border-box;
	display: inline;
	font-size: 10px;
	width: 100%;
	line-height: 1;
	color: #fff;
	position: absolute;
	pointer-events: none;
}

/* Northward tooltips */
.d3-tip.n:after {
	content: "▼";
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
	content: "◀";
	margin: -4px 0 0 0;
	top: 50%;
	left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
	content: "▲";
	margin: 0 0 1px 0;
	top: -8px;
	left: 0;
	text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
	content: "▶";
	margin: -4px 0 0 -1px;
	top: 50%;
	left: 100%;
}