@font-face {
    font-family: "Assistant";
    src: url("fonts/assistant-bold-webfont.woff2") format("woff2"),
         url("fonts/assistant-bold-webfont.woff") format("woff");
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: "Assistant";
    src: url("fonts/assistant-light-webfont.woff2") format("woff2"),
         url("fonts/assistant-light-webfont.woff") format("woff");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Assistant";
    src: url("fonts/assistant-regular-webfont.woff2") format("woff2"),
         url("fonts/assistant-regular-webfont.woff") format("woff");
    font-weight: 500;
    font-style: normal;
}

html {
	font-size: 32px;
	height: 100vh;
}

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	font-family: "Assistant", sans-serif;
	color: #555;
}

body {
	height: 100vh;
}

hr {
	border: none;
	background: #94a3ae;
	margin: 1rem 0;
}

a {
	color: #4a8833;
}

h1,h2 {
	color: #14232f;
	font-weight: 300;
}

h3,h4 {
	font-weight: 800;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
h4 { font-size: 1em; }

h1,h2,h3,h4,p {
	margin-bottom: 1rem;
}

h1:last-child,h2:last-child,h3:last-child,h4:last-child,p:last-child {
	margin-bottom: 0;
} 

@media only screen and (min-width: 1200px) and (max-resolution: 96dpi) {

html {
	font-size: 16px;
}

h1 { font-size: 3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1em; }

}



#logoOverscreen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: url(img/tree-in-forest_soft.jpg) 50% 50% no-repeat;
	background-size: cover;
}

#logoOverscreen img {
	display: block;
	margin-top: 2rem;
}

#logoOverscreen h1 {
	margin: 0;
	color: #fff;
}

.darkBlock {
	color: #eee;
	background: rgba(0,0,0,.7);
	padding: 2rem;
}

#logoOverscreen .darkBlock {
	max-width: 800px;
	margin-top: 2rem;
}

#phoneNums {
	display: none;
}

.menu {
	position: relative;
	z-index: 99;
	width: 100vw;
	display: flex;
	justify-content: space-around;
	background: #000;
}

.menu .menuItem {
	margin: 0 .5rem;
	padding: 0 .5rem;
}

.menu .menuItem a {
	display: block;
	text-decoration: none;
	color: #ccc;
	font-size: 5vw;
}

.menu .menuItem.here {
	color: #fff;
}

.menu .menuItem.here a {
	color: #fff;
	font-weight: 800;
}

#hamburger {
	padding: 0 .5rem;
}

#hamburger::before {
	content: "\2261";
	font-size: 10vw;
	line-height: 1rem;
	color: #ccc;
	cursor: pointer;
}

#hamburger.closed .subMenu {
	display: none;
}

#hamburger.open {
	background: #999;
}

#hamburger.open::before {
	color: #fff;
}

#hamburger.open .subMenu {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: absolute;
	z-index: 1;
	right: 0;
	padding: 1rem 2rem;
	background: #999;
}

#hamburger.open .subMenu .menuItem {
	margin-bottom: 1em;
	text-transform: capitalize;
}

#hamburger.open .subMenu .menuItem:last-child {
	margin-bottom: 0;
}

#hamburger.open .subMenu .menuItem a {
	color: #fff;
}

#header {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1rem 1rem 0 1rem;
	background: #4a8833;
}

#header #logo {
	background: url("img/RTC_logo_305x305.png") 50% 50% no-repeat;
	background-size: contain;
	width: 8rem;
	height: 8rem;
}

#header #titlePhrase {
	display: flex;
	flex-direction: column;
	padding-left: 1rem;
	white-space: nowrap;
}

#header #titlePhrase h1 {
	line-height: 8vw;
	font-size: 8vw;
}

#header #titlePhrase * {
	color: #fff;
}

#header #titlePhrase h1 {
	margin: 0 .25rem;
}

#page {
	border-top: 1rem solid #4a8833;
	padding: 2rem .5rem;
}

.bannerImg {
	position: relative;
	margin: -2rem -.5rem 2rem -.5rem;
}

.bannerImg img {
	display: block;
	width: 100%;
}

.bannerText {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
	transform: translate(0,-50%);
	width: 100%;
	font-size: .5rem;
}

.stories {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: stretch;
}

.story {
	padding: 1rem;
	border: 1px solid #ccc;
	flex-basis: 0;
	flex-grow: 1;
	margin: .5rem 0;
	font-size: .9em;
	background: #eee;
}

.story img {
	width: 100%;
}

#footer {
	width: 100vw;
	padding: 1rem 1rem 1rem 1rem;
	background: #000;
}

#footer .menu {
	justify-content: center;
	background: none;
	border: none;
	margin: 0;
}

#footer .menu .menuItem a {
	font-size: 1rem;
	color: #eee;
}

#footer .menu .menuItem.here {
}

#footer .menu .menuItem.here a {
}


@media only screen and (min-width: 1200px) and (max-resolution: 96dpi) {

#logoOverscreen {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
}

#logoOverscreen img {
	margin-top: 0;
}

#logoOverscreen h1 br {
	display: none;
}

#phoneNums {
	display: block;
	position: absolute;
	z-index: 999;
	font-weight: 300;
	letter-spacing: .1em;
	text-align: center;
	padding: .35rem 0 .35rem 2rem;
	color: #fff;
}

#phoneNums a {
	position: absolute;
	top: 50%;
	transform: translate(0,-50%);
	left: 100%;
	color: inherit;
	text-decoration: none;
	font-size: 2em;
}

.menu {
	justify-content: flex-end;
}

.menu .menuItem a {
	font-size: 1.5em;
}

#hamburger::before {
	content: "\2261";
	font-size: 3em;
	line-height: 1.5rem;
}

#header {
	justify-content: flex-start;
	padding-left: 2rem;
}

#header #logo {
	width: 5rem;
	height: 5rem;
}

#header #titlePhrase {
	flex-direction: row;
}

#header #titlePhrase h1 {
	line-height: 2.8rem;
	font-size: 3rem;
}

#page {
	padding: 2rem calc(50vw - 600px);
}

.bannerImg {
	margin: -2rem 0 2rem 0;
}

.bannerText {
	font-size: 1rem;
}

.stories {
	flex-direction: row;
	align-items: stretch;
}

.story {
	margin: 0;
	max-width: 32%;
}

#footer {
	position: fixed;
	bottom: 0;
	z-index: 999;
}

}



form {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	background: #28465c;
	padding: 1em;
}

form h1, form h2, form h3, form h4, form p {
	color: #fff;
	text-align: center;
}

input, textarea {
	-webkit-appearance: none;
	appearance: none;
	color: #000;
	font-size: 1.5rem !important;
	width: 100%;
	padding: .25em .5em;
	margin-bottom: 1em;
	border: 1px solid #94a3ae;
	background: #94a3ae;
}

textarea {
	resize: vertical;
}

input[type=submit] {
	color: #000;
	font-weight: 800;
	background: #ffaa00;
	border: 1px solid #ffaa00;
	padding-left: 1em;
	padding-right: 1em;
	cursor: pointer;
}

:-ms-input-placeholder {
	color: #fff;
	font-weight: 300;
	letter-spacing: .1em;
}

::-ms-input-placeholder{
	color: #fff;
	font-weight: 300;
	letter-spacing: .1em;
}

::-webkit-input-placeholder{
	color: #fff;
	font-weight: 300;
	letter-spacing: .1em;
}

::placeholder {
	color: #fff;
	font-weight: 300;
	letter-spacing: .1em;
	opacity: 1; /* Firefox */
}

@media only screen and (min-width: 1200px) and (max-resolution: 96dpi) {

input, textarea {
	font-size: 1rem !important;
}

input[type=submit] {
	width: auto;
}

}