@media screen and (min-width: 480px) {
	/******************************
	TOP BAR
	******************************/
	.search {
		width: 185px;
	}
	
	/******************************
	HEADER
	******************************/
	header h1 {
		width: 72%;
		padding-top: 7px;
		font-size: 0.9375em;
	}
}


@media screen and (min-width: 640px) {
	/******************************
	TOP BAR
	******************************/
	.top-bar a.youcan  {
		display: inline-block;
		float: right;
		padding-top: 4px;
		font-size: 0.9em;
		font-style: italic;
	}
	
	/******************************
	HEADER
	******************************/
	header h1 {
		width: 80%;
		font-size: 1em;
	}
	
	/******************************
	CONTENT
	******************************/
  [class*="col-"] {
    margin-right: 20px;
  }
	
  [class*="col-"]:last-child {
    margin-right: 0;
  }
  
  .col-1-4 {
    width: 24.5%;
  }
	
	/* 4 span rows */
  .row-4 {
    padding-left: 60px;
  }
	
  .row-4 [class*="col-"]:first-child {
    margin-left: -60px;
  }
}


@media screen and (min-width: 768px) {
	/******************************
	TOP BAR
	******************************/
	.spanish,
	.top-bar a.youcan {
		font-size: 1em;
	}
	
	.search {
		width: 250px;
	}

	/******************************
	NAVIGATION
	******************************/
	.menu-icon-bar {
		display: none; /* hide menu icon */
	}
	
	.main-nav {
		padding-left: 0;
		display: block !important; /* ensure that main-nav is visible on 768px and up screens */
		float: left;
		padding-top: 0;
	}
	
	.main-nav > li {
		float: left;
		border-left: solid 1px #1e2a36;
	}
	
	.main-nav li:first-child {
		border-left: none;
	}

	.main-nav a {
		padding: 10px 10px;
	}
	
	.main_menu {
		font-size: 0.95em;
		border-top: none;
	}
	
	.arrow { /* down-arrow icon */
		position: relative;
		background-image: url('../img/down-arrow-icon.png');
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: center right;
		margin-right: 2px;
	}
	
	.drop-nav {
		position: absolute;
		display: none;
		width: 200px; /* width of submenus */
		padding-left: 0;
		border-top: none;
	}
	
	.long-line {
		width: 300px; /* width of "What we do"'s submenu with long lines: Empowerment and education, etc. */
	}
	
	.drop-nav li {
		border-bottom: 1px solid #78191D;
	}
	
	.verticalribbon {
		right: 0;
	}
	
	/******************************
	HEADER
	******************************/
	.banner {
		height: 135px;
		padding-top: 45px;
	}
	
	#logo-img {
		width: 200px;
		height: 128px;
	}
	
	header h1 {
		width: 65%;
		font-size: 1.6em;
	}
}


@media screen and (min-width: 1024px) {
	.wrapper {
		padding: 0;
	}
	
	/******************************
	NAVIGATION
	******************************/
	.main-nav {
		padding-left: 2%;
	}
	
	.main-nav a {
		padding: 10px 20px;
	}
	
	.main_menu {
		font-size: 1em;
	}
	
	.arrow { /* down arrow icon */
		margin-right: 10px;
	}
	
	.verticalribbon {
		width: 100px; /* ribbon is wider */
    height: 60px;
    font-size: 18px;
		right: 5%;
	}
	
	/******************************
	HEADER
	******************************/
	header h1 {
		width: 72%;
		padding-top: 15px;
		font-size: 2em;
	}
	
	/******************************
	FOOTER
	******************************/
	.footer-left,
	.footer-center,
	.footer-right {
		display: inline-block;
		text-align: left;
	}
	
	.footer-left {
		width: 25%;
	}
	
	.footer-center {
		width: 40%;
	}
	
	.footer-center img{
		margin: 10px 10px;
	}
	
	.footer-right {
		width: 30%;
	}	
}


@media screen and (min-width: 1260px) {
	/******************************
	NAVIGATION
	******************************/
	.main-nav {
		padding-left: 5%;
	}
	
	.main-nav a {
		padding: 10px 30px;
	}
	
	.arrow { /* down arrow icon */
		margin-right: 15px;
	}
	
	/******************************
	CONTENT
	******************************/
	.description p {
		font-size: 1em;
		line-height: 1.5em;
	}
	
	.row-4 h3 {
		font-size: 1.125em;
	}

	a:link.button-read {
		font-size: 1em;
	}
}