@font-face {
	font-family: 'icomoon';
	src:url('../fonts/icomoon/icomoon.eot');
	src:url('../fonts/icomoon/icomoon.eot?#iefix') format('embedded-opentype'),
		url('../fonts/icomoon/icomoon.woff') format('woff'),
		url('../fonts/icomoon/icomoon.ttf') format('truetype'),
		url('../fonts/icomoon/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

.top-content{
  min-height: 10em;
  max-height: 10em;
  background-color: #121212;
  color: #fff;
}

.top-buttons {
  float: right;
  margin: 20px;
}

.logo-img {
  width: 100%;
}

.info-button {
  margin: 5px;
}

.placeholder {
  min-height: 50px;
}

.main-logo {
  text-align: center;
}

.image-link-backpack {
  width: 90px;
  height: 125px;
}

.image-link-mobile {
  width: 130px;
  height: 125px;
  margin-right: 5px;
}

.image-link-closet {
  width: 130px;
  height: 87px;
  margin-right: 5px;
}

.image-link-garden {
  width: 130px;
  height: 100px;
  margin-right: 5px;
}

.image-link-soup {
  width: 130px;
  height: 110px;
}

.closet-link {
  height: 52px;
  width: 190px;
  vertical-align: top;
}

.program-content {
  height: 12em;
  background-color: #121212;
  color: #fff;
}

.footer-content {
  min-height: 5em;
  background-color: #121212;
  color: #fff;
  text-align: center;
  vertical-align: bottom;
}

.footer-link {
  color: #fff;
  font: 100 1em/1.5em 'Lato', sans-serif;
  margin: 5px;
  font-size: 18px;
}

.footer-link:hover {
  color: #fff;
  text-decoration: underline;
}

.program-links {
  min-height: 5em;
  width: 100%;
  margin: 15px auto;
  vertical-align: top;
}

@media (min-width: 768px) {
  .program-information {
		font: 400 47px 'Lato', sans-serif;
  	height: 1000px;
  	text-align: justify;
  }
}

@media (min-width: 992px) {
  .program-information {
		font: 400 30px 'Lato', sans-serif;
		height: 470px;
		text-align: justify;
  }
}

@media (min-width: 1200px) {
  .program-information {
		font: 400 30px 'Lato', sans-serif;
		height: 470px;
		text-align: justify;
  }
}

/*.program-information {
  font: 400 30px 'Lato', sans-serif;
  height: 470px;
  text-align: justify;
}*/

.program-information:nth-child(odd) {
    background-color: #121212;
    color: #fff;
}

.program-information:nth-child(even) {
    background-color: #fff;
    color: #121212;
}

.program-container {
	height: 470px;
}

.program-info {
	display: block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.logo-container {
	height: 470px;
	text-align: center;
}

.main-program {
  background-color: #fff;
  color: #121212;
  text-align: center;
  font: 'Lato', sans-serif;
  font-size: 30px;
  padding-right: 65px;
  padding-left: 65px;
  padding-top: 20px;
  margin-bottom: 75px;
  margin-top: 25px;
}

.main-program-title {
  color: #898989;
  font-size: 36px;
  text-align: center;
  font: 800 36px'Lato', sans-serif;
  margin-bottom: -10px;
}

.staff-title {
  color: #898989;
  font-size: 36px;
  text-align: center;
  font: 800 36px'Lato', sans-serif;
  margin-bottom: 40px;
}

.staff-picture {
  color: #aaa;
}

.staff-picture:hover {
  background-color: #aaa;
  opacity: .3;
}

.main-program-sub-title {
  color: #464646;
  font-size: 32px;
  text-align: center;
  font: 100 1em/1.5em 'Lato', sans-serif;
}

.main-program-content {
  width: 750px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  font-size: 23px;
  color: #464646;
  font: 400 23px 'Lato', sans-serif;
}

.program-logo {
  width: 90px;
  height: 125px;
}

.logo-mb-large {
	width: 600px;
	display: block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.logo-mb-medium {
	width: 400px;
	display: block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.logo-mb-small {
	width: 700px;
	display: block;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

.btn-donate {
  background-color: #59D43D;
}

.btn-learn-mobile {
  background-color: #1F91DB;
  color: white;
}

.btn-learn-mobile:hover,
.btn-learn-mobile:focus,
.btn-learn-mobile.focus {
  background-color: #0678C2;
  color: white;
  text-decoration: none;
}



/* General button style (reset) */
a.butn:visted {
	text-decoration: none;
}

.butn {
	border: none;
	font-family: inherit;
	font-size: smaller;
	color: inherit;
	background: none;
	cursor: pointer;
	padding: 10px 80px;
	display: inline-block;
	margin: 15px 30px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	outline: none;
	position: relative;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.butn:after {
	content: '';
	position: absolute;
	z-index: -1;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

/* Pseudo elements for icons */
.butn:before {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	position: relative;
	-webkit-font-smoothing: antialiased;
}

.butn-container {
	text-align: center;
}

@media (min-width: 768px) {
  .butn-backpack,
	a.butn-backpack:link,
	a.butn-backpack:visited,
	a.butn-backpack:hover,
	a.butn-backpack:active {
		border: 3px solid #1F91DB;
		color: #fff;
		background: #1F91DB;
	  text-decoration: none;
  }
}

@media (min-width: 992px) {
	.butn-backpack,
	a.butn-backpack:link,
	a.butn-backpack:visited {
		background: black;
		border: 3px solid #1F91DB;
		color: #fff;
		text-decoration: none;
	}

	a.butn-backpack:hover,
	a.butn-backpack:active {
		color: #fff;
		background: #1F91DB;
	  text-decoration: none;
	}
}

@media (min-width: 768px) {
  .butn-mobile-backpack,
	a.butn-mobile-backpack:link,
	a.butn-mobile-backpack:visited,
	a.butn-mobile-backpack:hover,
	a.butn-mobile-backpack:active {
		border: 3px solid #FF6E00;
		color: #fff;
		background: #FF6E00;
	  text-decoration: none;
  }
}

@media (min-width: 992px) {
	a.butn-mobile-backpack:link,
	a.butn-mobile-backpack:visited {
		background: white;
	  border: 3px solid #FF6E00;
	  color: black;
		text-decoration: none;
	}

	a.butn-mobile-backpack:hover,
	a.butn-mobile-backpack:active {
		color: #fff;
		background: #FF6E00;
	  text-decoration: none;
	}
}

@media (min-width: 768px) {
  .butn-garden,
	a.butn-garden:link,
	a.butn-garden:visited,
	a.butn-garden:hover,
	a.butn-garden:active {
		border: 3px solid #59D43D;
		color: #fff;
		background: #59D43D;
	  text-decoration: none;
  }
}

@media (min-width: 992px) {
	a.butn-garden:link,
	a.butn-garden:visited {
		background: black;
	  border: 3px solid #59D43D;
	  color: #fff;
		text-decoration: none;
	}

	a.butn-garden:hover,
	a.butn-garden:active {
		color: #fff;
		background: #59D43D;
	  text-decoration: none;
	}
}

@media (min-width: 768px) {
  .butn-closet,
	a.butn-closet:link,
	a.butn-closet:visited,
	a.butn-closet:hover,
	a.butn-closet:active {
		border: 3px solid #FF0803;
		color: #fff;
		background: #FF0803;
	  text-decoration: none;
  }
}

@media (min-width: 992px) {
	a.butn-closet:link,
	a.butn-closet:visited {
		background: white;
	  border: 3px solid #FF0803;
	  color: black;
		text-decoration: none;
	}

	a.butn-closet:hover,
	a.butn-closet:active {
		color: #fff;
		background: #FF0803;
	  text-decoration: none;
	}
}

@media (min-width: 768px) {
  .butn-soup,
	a.butn-soup:link,
	a.butn-soup:visited,
	a.butn-soup:hover,
	a.butn-soup:active {
		border: 3px solid #9A4CC5;
		color: #fff;
		background: #9A4CC5;
	  text-decoration: none;
  }
}

@media (min-width: 992px) {
	a.butn-soup:link,
	a.butn-soup:visited {
		background: black;
	  border: 3px solid #9A4CC5;
	  color: #fff;
		text-decoration: none;
	}

	a.butn-soup:hover,
	a.butn-soup:active {
		color: #fff;
		background: #9A4CC5;
	  text-decoration: none;
	}
}

@media (min-width: 768px) {
  .butn-main,
	a.butn-main:link,
	a.butn-main:visited,
	a.butn-main:hover,
	a.butn-main:active {
		border: 3px solid black;
	  color: #fff;
		background: black;
	  text-decoration: none;
  }
}

@media (min-width: 992px) {
	.butn-main,
	a.butn-main:link,
	a.butn-main:visited {
		background: #fff;
	  border: 3px solid black;
	  color: black;
	  margin-top: 30px;
	  width: 320px;
	  text-decoration: none;
	}

	a.butn-main:hover,
	a.butn-main:active {
		color: #fff;
		background: black;
	  text-decoration: none;
	}
}