html {
	font-size: 16px;
}
body {
	font-family: 'Open Sans', sans-serif;
	font-family: 'Roboto', sans-serif;
}

h1, h2, h3 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

h1 {
	font-size: 2.3rem;
	line-height: 2.7rem;
	display: block;
	margin-bottom: 2rem;
	hyphens: inherit;

	@include media-breakpoint-up(sm) { 
		font-size: 2.7rem;
		line-height: 3.3rem;
		margin-bottom: 0;
	}
}

h3 {
    color: #ff5800;
    font-size: 1.3rem;
		line-height: 1.6rem;

		@include media-breakpoint-up(sm) { 
			font-size: 1.6rem;
			line-height: 1.9rem;
		}
}

p {
	margin: 0 0 2rem;
	font-size: 1rem;
	line-height: 1.5rem;
	break-inside: avoid;
	
	@include media-breakpoint-up(sm) { 
		font-size: 1.2rem;
		line-height: 1.6rem;
	}

	@include media-breakpoint-up(xl) { 
		font-size: 1rem;
		line-height: 1.4rem;
	}

	&.box {
		padding: 7px;
	    margin: -7px -7px 2rem;
	    background: $alternate-bg;
	    color: #333;
	    border-radius: 5px;

	    a {
	    	box-shadow: 0 2px 0 #FFF;
	    }

	    &.green {
	    	background: $donationCounter_dark;
	    	color: white;
	    }
	}
}

strong {
	font-weight: 700;
}

a {
	color: #FFF;
	text-decoration: none;
	box-shadow: 0 2px 0 #ff5800;
    .odd & {
    	box-shadow: 0 2px 0 #FFF;
    }
}