/********************************************************************************************* 

x. Basic Setup (Body, Fonts, etc.) 

*********************************************************************************************/
@media only screen and (max-width:1500px) {
	.wrapper.large {
		width: auto;
		margin: 0 50px;
	}
}
@media only screen and (max-width:1100px) {
	.wrapper.medium {
		width: auto;
		margin: 0 50px;
	}
}
@media only screen and (max-width:1000px) {
	body {
		padding: 110px 0 0 0;
	}
}
@media only screen and (max-width:900px) {
	html, body {
		font-size: 16px;
	}
	h1 {
		font-size: 3em;
	}
	h2 {
		font-size: 2em;
	}
	h3 {
		font-size: 1.5em;
	}
	h4 {
		font-size: 1.25em;
	}
}
@media only screen and (max-width:860px) {
	.wrapper.large,
	.wrapper.medium,
	.wrapper.small {
		width: auto;
		margin: 0 30px;
	}
}
@media only screen and (max-width:800px) {
	body {
		padding: 100px 0 0 0;
	}
}
@media only screen and (max-width:400px) {
	h1 {
		font-size: 2.5em;
	}
}

/********************************************************************************************* 

x. Header

*********************************************************************************************/
@media only screen and (max-width:1300px) {
	header .navigation > li > a {
		font-size: 16px;
		padding: 0 15px;
	}
	header .navigation > li.donate > a {
		padding: 0 20px;
	}
}
@media only screen and (max-width:1100px) {
	header .navigation > li > a {
		padding: 0 10px;
	}
	header .navigation > li.donate > a {
		padding: 0 15px;
	}
}
@media only screen and (max-width:1000px) {
	header {
		width: auto; height: 50px;
		background: #11546C;
		padding: 30px 50px;
		position: fixed;
		top: 0; 
		left: 0; right: 0;
		z-index: 9999;
	}
	header .hamburger {
		display: block;
	}
	header .logo {
		position: relative;
		top: 0; left: 0;
	}
	header .navigation {
		background: #11546C;
		margin: 0 -50px;
		padding: 30px 50px 30px 50px;
		display: none;
		float: none;
	}
	header .navigation > li {
		line-height: normal;
		margin: 0 0 20px 0;
		padding: 0;
		float: none;
	}
	header .navigation > li:last-child {
		margin-bottom: 0;
	}
	header .navigation > li.donate > a {
		color: white;
		background: transparent;
		padding: 0;
	}
	header .navigation > li.donate > a:hover {
		color: #8BBC64;
		background: transparent;
	}
	header .navigation > li > a {
		padding: 0;
	}
	header .navigation > li > .sub-menu {
		margin: 20px 0 0 20px;
		display: block;
		position: relative;
		top: 0; left: 0;
	}
	header .navigation > li > .sub-menu > li {
		margin: 0 0 15px 0;
	}
	header .navigation > li > .sub-menu > li:last-child {
		margin-bottom: 0;
	}
	header .navigation > li > .sub-menu > li a {
		padding: 0;
	}
}
@media only screen and (max-width:800px) {
	header {
		height: 40px;
	}
	header .logo {
		width: auto; height: 40px;
		max-width: none;
	}
	header .logo img {
		width: auto; height: 100%;
	}
}

/********************************************************************************************* 

x. Main

*********************************************************************************************/
@media only screen and (max-width:1000px) {
	main,
	main.offset {
		margin: 0;
	}
}

@media only screen and (max-width:800px) {
	main section.spacing {
		margin-bottom: 30px;
	}
	section.full-width + section.full-width {
		margin-top: -30px;
	}
}

/********************************************************************************************* 

x. Footer

*********************************************************************************************/
@media only screen and (max-width:800px) {
	footer {
		padding: 60px 0;
	}
	footer .social-media li a svg {
		width: 30px; height: 30px;
	}
	footer .website a {
		font-size: 14px;
	}
}
@media only screen and (max-width:600px) {
	footer {
		text-align: center;
	}
	footer .columns .column {
		width: 100%;
		position: relative;
	}
	footer .columns .column:first-child {
		margin: 0 0 30px 0;
	}
	footer .logo {
		margin-top: 0;
	}
	footer .website {
		display: none;
	}
}
@media only screen and (max-width:400px) {
	footer .logo a {
		width: 100px;
	}
}

/********************************************************************************************* 

x. Content

*********************************************************************************************/
@media only screen and (max-width:860px) {
	.content ol.four-column, 
	.content ol.three-column, 
	.content ol.two-column, 
	.content ul.four-column, 
	.content ul.three-column, 
	.content ul.two-column {
		margin: 0 -15px -30px -15px;
	}
	.content ol.four-column li, 
	.content ol.three-column li, 
	.content ol.two-column li, 
	.content ul.four-column li, 
	.content ul.three-column li, 
	.content ul.two-column li {
		margin: 0 0 30px 0;
		padding: 0 15px;
	}
	.content ol.four-column li, 
	.content ul.four-column li {
		width: calc(25% - 30px);
	}
	.content ol.two-column li, 
	.content ul.two-column li {
		width: calc(50% - 30px);
	}
	.content ol.three-column li, 
	.content ul.three-column li {
		width: calc(33.33% - 30px);
	}
}
@media only screen and (max-width:700px) {
	.content ol.four-column li, 
	.content ul.four-column li {
		width: calc(33.33% - 30px);
	}
}
@media only screen and (max-width:600px) {
	.content ol.four-column li, 
	.content ul.four-column li,
	.content ol.three-column li, 
	.content ul.three-column li {
		width: calc(50% - 30px);
	}
}
@media only screen and (max-width:600px) {
	.content ol.four-column li, 
	.content ul.four-column li,
	.content ol.three-column li, 
	.content ul.three-column li,
	.content ol.two-column li, 
	.content ul.two-column li {
		width: 100%;
		padding: 0;
	}
}

/********************************************************************************************* 

x. Articles

*********************************************************************************************/
@media only screen and (max-width:860px) {
	.articles {
		padding: 60px 0;
	}
	.articles .articles {
		margin: 60px -30px -30px -30px;
	}
	.articles .articles li {
		margin: 0 0 30px 0;
	}
	.articles .articles li .inside {
		padding: 0 30px;
	}
}
@media only screen and (max-width:700px) {
	.articles .articles {
		margin: 60px 0 -30px 0;
	}
	.articles .articles::after, 
	.articles .articles::before {
		display: none;
	}
	.articles .articles li.width-33 {
		width: 100%;
		border-bottom: 2px solid #8BBC64;
	}
	.articles .articles li {
		border-bottom: 2px solid #8BBC64;
	}
	.articles .articles li:last-child {
		border-bottom: none;
	}
	.articles .articles li:last-child .inside {
		padding: 0 30px;
	}
	.articles .articles li .inside {
		padding: 0 30px 30px 30px;
	}
}
@media only screen and (max-width:500px) {
	.articles .articles li .inside {
		padding: 0 0 30px 0;
	}
	.articles .articles li:last-child .inside {
		padding: 0;
	}
}

/********************************************************************************************* 

x. Breadcrumbs

*********************************************************************************************/
@media only screen and (max-width:500px) {
	.breadcrumbs {
		display: none;
	}
}

/********************************************************************************************* 

x. Button

*********************************************************************************************/
@media only screen and (max-width:400px) {
	.button {
		padding: 15px 30px;
	}
}

/********************************************************************************************* 

x. Form

*********************************************************************************************/
@media only screen and (max-width:400px) {
	form input[type="email"], 
	form input[type="password"], 
	form input[type="text"] {
		height: 50px;
	}
	form input[type="submit"] {
		padding: 15px 30px;
	}
}

/********************************************************************************************* 

x. Login

*********************************************************************************************/
@media only screen and (max-width:1100px) {
	.login form {
		max-width: 300px;
	}
}
@media only screen and (max-width:860px) {
	.login .columns {
		margin: 0 -30px;
	}
	.login .columns .column .inside {
		padding: 0 30px;
	}
	.login #register .wrapper.small {
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		left: 0; right: 0;
	}
}
@media only screen and (max-width:600px) {
	.login .columns {
		margin: 0;
		display: block;
	}
	.login .columns:after {
		display: none;
	}
	.login .columns .column:first-child {
		border-bottom: 2px solid #8BBC64;
		margin: 0 0 30px 0;
		padding: 0 0 30px 0;
	}
	.login .columns .column.width-50 {
		width: 100%;
	}
	.login .columns .column .inside {
		padding: 0;
	}
}
@media only screen and (max-width:400px) {
	form table td {
		width: 100%;
		display: block;
	}
}


/********************************************************************************************* 

x. Pages

*********************************************************************************************/
@media only screen and (max-width:1200px) {
	.pages .options li {
		margin: 0 30px;
	}
	.pages .options li .button {
		padding-left: 100px;
		padding-right: 100px;
	}
}
@media only screen and (max-width:1100px) {
	.pages #table-of-contents .wrapper.medium {
		-moz-transform: none;
		-webkit-transform: none;
		-o-transform: none;
		-ms-transform: none;
		transform: none;
		position: absolute;
		left: 0; right: 0;
	}	
}
@media only screen and (max-width:1000px) {
	.pages .pages .page.width-25 {
		width: 33.33%;
	}
}
@media only screen and (max-width:900px) {
	.pages .options {
		margin: 0 0 30px 0;
	}
	.pages .options li {
		margin: 0 0 30px 0;
		display: block;
	}
	.pages .options li .button {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.pages .options li form {
		width: 100%;
	}
	.pages #table-of-contents .links > li {
		margin: 0 0 30px 0;
	}
}
@media only screen and (max-width:800px) {
	.pages .pages {
		margin: -15px;
	}
	.pages .pages .page .inside {
		padding: 15px;
	}
	.pages #table-of-contents::after, 
	.pages #table-of-contents::before {
		height: 30px;
	}
	.pages #table-of-contents .content {
		margin: 0 0 50px 0;
	}
}
@media only screen and (max-width:700px) {
	.pages .pages .page.width-25 {
		width: 50%;
	}
}
@media only screen and (max-width:600px) {
	.pages #table-of-contents .links.width-50 {
		width: 100%;
	}
	.pages #table-of-contents .content {
		margin: 0 0 30px 0;
	}
}

@media only screen and (max-width:500px) {
	.pages .pages .page.width-25 {
		width: 100%;
	}
}

/********************************************************************************************* 

x. Partner

*********************************************************************************************/
@media only screen and (max-width:860px) {
	.partner {
		padding: 60px 0;
	}
}

/********************************************************************************************* 

x. Resources

*********************************************************************************************/
@media only screen and (max-width:860px) {
	.resources {
		padding: 60px 0;
	}
	.resources .resources {
		margin: 60px -30px -30px -30px;
	}
	.resources .resources li {
		margin: 0 0 30px 0;
	}
	.resources .resources li .inside {
		padding: 0 30px;
	}
}
@media only screen and (max-width:700px) {
	.resources .resources {
		margin: 60px 0 -30px 0;
	}
	.resources .resources::after, 
	.resources .resources::before {
		display: none;
	}
	.resources .resources li.width-50 {
		width: 100%;
		border-bottom: 2px solid #8BBC64;
	}
	.resources .resources li {
		border-bottom: 2px solid #8BBC64;
	}
	.resources .resources li:last-child {
		border-bottom: none;
	}
	.resources .resources li:last-child .inside {
		padding: 0 30px;
	}
	.resources .resources li .inside {
		padding: 0 30px 30px 30px;
	}
}
@media only screen and (max-width:500px) {
	.resources .resources li .inside {
		padding: 0 0 30px 0;
	}
	.resources .resources li:last-child .inside {
		padding: 0;
	}
}

/********************************************************************************************* 

x. Text

*********************************************************************************************/
@media only screen and (max-width:600px) {
	.text .content p svg {
		width: 40px; height: auto;
	}
}


/********************************************************************************************* 

x. Text + Image

*********************************************************************************************/
@media only screen and (max-width:860px) {
	.text-image .columns {
		margin: 0 -15px;
	}
	.text-image .columns .column .inside {
		margin: 0 15px;
	}
	.text-image.text-position-overlay .icons {
		bottom: 30px; right: 30px;
	}
}
@media only screen and (max-width:700px) {
	.text-image.text-position-overlay {
		padding: 100px 0;
	}
}
@media only screen and (max-width:600px) {
	.text-image .columns {
		margin: 0;
		display: block;
	}
	.text-image .columns .column {
		display: block;
	}
	.text-image .columns .column:first-child {
		margin: 0 0 30px 0;
	}
	.text-image .columns .column.width-50 {
		width: 100%;
	}
	.text-image .columns .column .inside {
		margin: 0;
	}
}

/********************************************************************************************* 

x. Smaller than 1024px

*********************************************************************************************/
@media only screen and (max-width:1024px) {
	
	input,
	textarea {
	    border-radius: 0;
	    -webkit-appearance: none;
	}
	
}