/* FONTS */
/* # */
@font-face {
    font-family: 'Poppins';
    src: url('/fonts/poppins-bold.eot');
    src: url('/fonts/poppins-bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/poppins-bold.woff2') format('woff2'),
         url('/fonts/poppins-bold.woff') format('woff'),
         url('/fonts/poppins-bold.ttf') format('truetype'),
         url('/fonts/poppins-bold.svg#poppinsbold') format('svg');
    font-weight: 700;
}

@font-face {
    font-family: 'Karla';
    src: url('/fonts/karla-bold.eot');
    src: url('/fonts/karla-bold.eot?#iefix') format('embedded-opentype'),
         url('/fonts/karla-bold.woff2') format('woff2'),
         url('/fonts/karla-bold.woff') format('woff'),
         url('/fonts/karla-bold.ttf') format('truetype'),
         url('/fonts/karla-bold.svg#karlabold') format('svg');
    font-weight: 700;
}

@font-face {
    font-family: 'Karla';
    src: url('/fonts/karla-regular.eot');
    src: url('/fonts/karla-regular.eot?#iefix') format('embedded-opentype'),
         url('/fonts/karla-regular.woff2') format('woff2'),
         url('/fonts/karla-regular.woff') format('woff'),
         url('/fonts/karla-regular.ttf') format('truetype'),
         url('/fonts/karla-regular.svg#karlaregular') format('svg');
    font-weight: 400;
}

/* GENERAL */

:root {
	/*
	--color-primary: hsla(26, 85%, 51%,1);
	--color-primary-light: hsla(26, 85%, 58%, 1);
	*/
	--color-primary: #7bcbc8;
	--color-primary-light: #7bcbc8;
}

html, body {
	width: 100%;
	height: 100%;
}

body {
	display: flex;
	align-items: center;
	font-family: "Karla", sans-serif;
	font-size: 1rem;
	color: #fff;
	line-height: 1.5;
	font-weight: 400;
	/*background: #fcfefa;
	background: -moz-radial-gradient(center, ellipse cover, #fcfefa 0%, #eaece8 100%);
	background: -webkit-radial-gradient(center, ellipse cover, #fcfefa 0%, #eaece8 100%);
	background: radial-gradient(ellipse at center, #fcfefa 0%, #eaece8 100%);*/
	background: #032a3b;
	/* anti blurry */
	-webkit-text-stroke: 0px!important;
	-webkit-font-smoothing: antialiased !important;
}

@media (max-height: 950px) {
   body {
       display: block;
       padding: 1rem 0;
       height: auto;
   }
}

.wrapper {
	width: 100%;
	max-width: 1200px;
	box-sizing: border-box;
	padding: 0 1rem;
	margin: 0 auto;
}

@media (max-width: 1070px) {
	body {
		display: block;
	}

	.wrapper {
		padding: 1rem;
	}
}

/* TYPOGRAPHY */

h3 {
	font-weight: 700;
	margin-bottom: .5rem;
	text-transform: uppercase;
	font-size: 1.25rem;
}

strong {
	font-weight: 700;
}

small {
	font-size: smaller;
}

/* BAROMETER */

.barometer {
	width: 110px;
	height: 600px;
	position: relative;
	background: url("../img/barometer.svg") no-repeat center;
	background-size: cover;
	bottom: 60px;
}

.indicator-wrapper {
	width: 100%;
	height: 406px;
	position: absolute;
	bottom: 135px;
	z-index: -2;
}

.indicator {
	width: 45px;
	height: 40%;
	position: absolute;
	background: #ff0002;
	left: 32px;
	bottom: 0;
	z-index: -1;
}

.indicator:before {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	height: 16px;
	top: -8px;
	border-radius: 100%;
	background: #d00002;
}

.indicator:after {
	content: "";
	display: block;
	width: 100%;
	position: absolute;
	height: 20px;
	background: #ff0002;
	bottom: -20px;
	z-index: -2;
}

.p-100, .p-50, .p-0 {
	position: absolute;
	right: 0;
}

.p-100 {
	top: 0%;
	margin-top: -10px;
}

.p-50 {
	top: 50%;
	margin-top: -10px;
}

.p-0 {
	top: 100%;
	margin-top: -15px;
}

/* NAVIGATION */

.logo {
	height: auto;
	padding: 0px;
	margin-bottom: 0.5rem;
	display: block;
	width: 100%;
	max-width: 450px;
}

@media (max-width: 1070px) {
	.logo {
		margin: 0 auto 1rem;
	}
}

nav {
	overflow: hidden;
	box-sizing: border-box;
	padding: 1rem 0;
}

nav ul {
	float: right;
	position: relative;
	top: -.8rem;
}

nav li {
	float: left;
	margin-left: 3rem;
}

#actualDonationStatus {
	display: block;
	font-size: 4rem;
	color: var(--color-primary);
	font-family: "Poppins";
	font-weight: 700;
}

/* CONTENT */

.content {
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	/* flex-wrap: wrap; */
}

@media (max-width: 831px) {
    .content {
        flex-wrap: wrap;
    }
	.barometer {
        bottom: 0;
    }
}

.how-to-wrapper {
	max-width: 450px;
}

@media (max-width: 1070px) {
	.how-to-wrapper {
		max-width: none;
		width: 100%;
	}
}

.how-to,
.barometer-wrapper,
.donors {
	box-sizing: border-box;
	padding: 1rem;
}

.donors {
	max-width: 410px;
	padding-right: 0;
}

.how-to a {
	color: #fff;
}

.how-to {
	background: var(--color-primary);
	color: #fff !important;
	line-height: 1.3;
}

.how-to:nth-child(odd) {
	
	background: var(--color-primary-light);
}

.barometer-wrapper {
	padding: 0 2rem;
	display: flex;
    align-items: flex-end;
}

@media (max-width: 1070px) {
	.donors {
		max-width: none;
		width: calc(100% - 180px);
	}

	.barometer-wrapper {
		width: 180px;
	}
}

@media (max-width: 500px) {
	.donors {
		width: 100%;
		padding-left: 0;
	}

	.barometer-wrapper {
		order: 3;
        width: 100%;
        justify-content: center;
		transform: scale(0.75);
		margin: -75px 0;
	}
}

/* TABLE (DONORS) */

table {
	width: 100%;
}

table td {
	padding: .25rem 0;
}

table td:last-of-type {
	font-family: "Poppins";
	font-weight: 700;
	color: var(--color-primary);;
	text-align: right;
}

/* FOOTER */

footer {
	box-sizing: border-box;
	padding: 1rem 0 0;
	margin-top: 1rem;
}

marquee {
	display: block;
	margin-bottom: 1rem;
}

footer span {
	margin: 0 1rem;
}

footer a {
	color: var(--color-primary);
}

/* HOW TO */

.how-to span {
	display: block;
	line-height: 1.25;
	font-family: "Poppins";
	font-weight: 700;
	font-size: 1.5rem;
	color: #fff !important;
}

.how-to h3 {
	color: #000;
}	

#donatorTicker {
	font-size: 1.5rem;
	font-weight: 700;
}