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

x. Smaller than 1270px

*********************************************************************************************/
@media only screen and (max-width:1270px) {

	footer {
		margin: 0 0 20px 0;
	}

	.wrapper {
		width: auto;
		margin: 0 20px;
	}

}

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

x. Smaller than 1200px

*********************************************************************************************/
@media only screen and (max-width:1200px) {

	.banner-wrapper .banner .title {
		bottom: 20px;
	}

	header .bottom .navigation a {
		padding: 20px 45px;
	}

	h1 {
		font-size: 60px;
	}

	h2 {
		font-size: 50px;
	}

	h3 {
		font-size: 40px;
	}

}

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

x. Smaller than 1100px

*********************************************************************************************/
@media only screen and (max-width:1100px) {

	aside .box.mission p,
	aside .box.vision p {
		font-size: 20px;
	}

	#event .page-title p.title {
		font-size: 30px;
	}

	footer .top .social-media li:first-of-type {
		margin: 0 0 5px 0;
		display: block;
	}

	.meta li {
		font-size: 12px;
		padding: 0 5px 0 0;
	}

}

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

x. Smaller than 1024px

*********************************************************************************************/
@media only screen and (max-width:1024px) {

	aside .box {
		padding: 40px 30px;
	}

	#blog .post h3 {
		font-size: 30px;
	}

	#calendar .featured-events .column.width-42 .content .icon,
	footer .column.width-20 {
		display: none;
	}

	#calendar .featured-events .title {
		padding: 0;
	}

	#contact-us .column.width-40,
	#contact-us .column.width-60 {
		width: 100%;
	}

	#contact-us .column.width-40 > .content,
	#contact-us .column.width-60 > .content {
		padding: 0;
	}

	footer .column.width-15 {
		width: 25%;
	}

	h1 {
		font-size: 50px;
	}

	h2 {
		font-size: 40px;
	}

	h3 {
		font-size: 35px;
	}

	header .bottom .navigation a {
		font-size: 16px;
		padding: 20px 40px;
	}

	header .bottom .navigation li .sub-menu a {
		font-size: 14px;
		padding: 10px 15px;
	}

	header .bottom .navigation li .sub-menu a:hover:after {
		right: 15px;
	}

	header .top .logo {
		width: 250px;
	}

	.meta li {
		font-size: 11px;
	}

	#programs .content .box,
	#speaker .content .box {
		padding: 20px;
	}

	#programs .item.width-33 {
		width: 50%;
	}

}

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

x. Smaller than 1000px

*********************************************************************************************/
@media only screen and (max-width:1000px) {

	#calendar .featured-events .column.width-42 .content {
		padding: 20px;
	}

	#calendar .featured-events .column.width-42 .content .image {
		display: none;
	}

	#home .map {
		padding: 40px;
	}

	#home .map .content {
		width: auto;
	}

	#post .post .content {
		width: auto;
	}

	#think-drink .buttons li {
		float: none;
	}

}

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

x. Smaller than 950px

*********************************************************************************************/
@media only screen and (max-width:950px) {

	header .bottom .navigation a {
		padding: 20px 35px;
	}

}

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

x. Smaller than 900px

*********************************************************************************************/
@media only screen and (max-width:900px) {

	.main > .columns > .column.width-30,
	.main > .columns > .column.width-70 {
		width: 100%;
	}

	#about-us .column.width-70 > .content,
	#contact-us .column.width-70 > .content,
	#press-room .column.width-70 > .content,
	#programs .column.width-70 > .content,
	#speaker .column.width-70 > .content,
	#think-drink .column.width-70 > .content {
		padding: 30px 20px;
	}

	aside .area {
		margin: 0 0 20px 0;
	}

	aside .box.filters ul li {
		margin: 0 0 5px 0;
	}

	aside .box.question {
		text-align: center;
	}

	aside .box.quotation {
		padding-top: 100px;
	}

	#blog .column.width-70 > .content,
	#event .column.width-70 > .content {
		padding: 0;
	}

	#blog .columns,
	#event .columns {
		padding: 20px;
	}

	#blog .column.width-30 > .content,
	#event .column.width-30 > .content,
	#press-room .column.width-30 > .content {
		padding: 30px 0 0 0;
	}

	#event .column.width-70:after,
	#event .page-title .icon.right,
	header .bottom .navigation:before,
	header .bottom .navigation li.separator,
	header .bottom .navigation li .sub-menu a:hover:after {
		display: none;
	}

	footer .bottom span {
		text-align: center;
		float: none;
	}

	header,
	main,
	footer {
		position: relative;
	}

	header .bottom .navigation {
		text-align: left;
		width: 270px; height: auto;
		background: #374040;
		margin: 0;
		padding: 10px 0 0 0;
		position: fixed;
		top: 0; bottom: 0;
		right: -270px;
		overflow: auto;
	}

	header .bottom .navigation a {
		color: #FAEFE3;
		padding: 0 0 0 20px;
	}

	header .bottom .navigation li {
		margin: 0 0 20px 0;
		display: block;
	}

	header .bottom .navigation li .sub-menu {
		background: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		padding: 0 0 0 20px;
		display: block;
		position: relative;
		top: 0;
	}

	header .bottom .navigation li .sub-menu a {
		color: #EBDFD2;
		padding: 0;
	}

	header .bottom .navigation li .sub-menu a:hover {
		color: #F48034;
		background: none;
	}

	header .bottom .navigation li .sub-menu li {
		margin: 10px 0 0 0;
	}

	header .hamburger {
		display: block;
	}

	header .top .column {
		float: left;
	}

	header .top .column.right {
		margin: 0 30px 0 0;
	}

	header .top .columns {
		float: none;
	}

	header .top .donate:hover span.background svg {
		fill: #3A4644;
	}

	header .top form {
		width: 220px;
	}

	header .top .logo {
		width: 100%; height: auto;
		background: #F48034;
		float: none;
	}

	header .top .logo .image {
		width: 300px; height: auto;
		margin: 0 auto;
		display: block;
	}

	header .top .navigation li {
		font-size: 14px;
	}

	#home .introduction .top .content {
		width: auto;
		padding: 0 20px;
	}

	#home .introduction .top .carousel-wrapper span {
		font-size: 14px;
	}

	.page-title h2 span:after,
	.page-title h2 span:before {
		width: 80px;
	}

	#post .post {
		padding: 20px;
	}

	#programs .column.width-30 > .content {
		padding: 0 20px 30px 20px;
	}

	#programs .column.width-50 > .content {
		padding: 0 15px 15px 0;
	}

	section.introduction,
	section.main {
		border-top: 15px solid #F9EEE2;
	}

	section.introduction:before,
	section.main:before {
		content: '';
		background: url(../img/borders/quarter-spanish-white.png) left top;
		width: 100%; height: 5px;
		position: absolute;
		top: -5px; left: 0;
	}

}

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

x. Smaller than 800px

*********************************************************************************************/
@media only screen and (max-width:800px) {

	#calendar .featured-events .column.width-16,
	#home .feeds .column.width-60,
	#home .introduction .bottom .column.width-30,
	#home .introduction .bottom .column.width-70 {
		width: 100%;
	}

	#calendar .featured-events .column.width-16 .content {
		text-align: center;
		margin: 0 0 20px 0;
		-moz-transform: translateY(0);
		-webkit-transform: translateY(0);
		-o-transform: translateY(0);
		-ms-transform: translateY(0);
		transform: translateY(0);
		position: relative;
		top: 0;
	}

	#calendar .featured-events .column.width-42 {
		width: 50%;
	}

	#calendar .filters {
		padding: 25px 0;
	}

	#calendar .filters .column.width-16,
	#home .feeds .column.width-40,
	#home .introduction .bottom .border {
		display: none;
	}

	#home .feeds .column.width-30,
	#home .feeds .column.width-70 {
		width: 50%;
	}

	#calendar .filters .column.width-18,
	#calendar .filters .column.width-22 {
		width: 25%;
	}

	#event .page-title p.title {
		line-height: 1em;
	}

	header .top {
		margin: 0 0 20px 0;
	}

	header .top .logo {
		margin: 20px 0 0 0;
	}

	#home .introduction .bottom .column.width-30 .content {
		padding: 40px 0 0 0;
	}

	#home .introduction .bottom .column.width-70 .columns,
	#home .feeds .column.width-60 .content {
		padding: 0;
	}

	#home .introduction .top .carousel-wrapper {
		padding: 35px 50px;
	}

	#home .introduction .top .carousel-wrapper h4 {
		font-size: 20px;
	}

	#post .post .related .column.width-20,
	#post .post .related .column.width-30 {
		width: 100%;
	}

	#post .post .related .column.width-20 .content {
		padding: 0;
	}

	#post .post .related .column.width-30 .content {
		padding: 0 0 20px 0;
	}

	#post .post .related .columns {
		margin: 0;
	}

	#think-drink .event:last-of-type .column.width-70 .content {
		margin: 0;
		padding: 0;
	}

	footer .top {
		display: none;
	}
}

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

x. Smaller than 700px

*********************************************************************************************/
@media only screen and (max-width:700px) {

	aside .box.mission {
		padding-bottom: 50px;
	}

	aside .box.navigation ul li {
		font-size: 13px;
	}

	aside .box.navigation ul li.title,
	#blog .page-title h2,
	#blog .post h3,
	#event .page-title p.title,
	h3,
	#post .page-title h2,
	#programs .grid .caption h3 {
		font-size: 25px;
	}

	aside .box.quotation {
		padding-top: 60px;
	}

	aside .box.quotation .logo {
		width: 80px; height: 80px;
		top: -40px;
	}

	.banner-wrapper .banner .title {
		padding: 20px;
	}

	.banner-wrapper .banner .title.icon,
	#event .page-title {
		padding-left: 100px;
	}

	.banner-wrapper .banner .title.icon .icon,
	#event .page-title .icon.left {
		width: 60px; height: 60px;
		left: 20px;
	}

	.banner-wrapper .banner .title.icon .icon svg,
	#event .page-title .icon.left svg {
		width: 25px; height: auto;
	}

	blockquote,
	h4,
	#home .introduction .top {
		font-size: 20px;
	}

	h1 {
		font-size: 40px;
	}

	h2 {
		font-size: 30px;
	}

	h5,
	#home .introduction .top .carousel-wrapper h4 {
		font-size: 18px;
	}

	h6 {
		font-size: 16px;
	}

	header .top .logo .image {
		width: 250px;
	}

	#home .introduction .top .carousel-wrapper h4 {
		line-height: 1em;
		height: 2em;
	}

	#home .map .column.width-25 .image {
		margin: 0 10px;
	}

	#home .map .columns {
		margin-left: -10px;
		margin-right: -10px;
	}

	html, body {
		/* font-size: 15px; */
	}

}

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

x. Smaller than 600px

*********************************************************************************************/
@media only screen and (max-width:600px) {

	#about-us .column.width-70 > .content,
	#contact-us .column.width-70 > .content,
	#event .columns,
	#press-room .column.width-70 > .content,
	#programs .column.width-70 > .content,
	#speaker .column.width-70 > .content,
	#think-drink .column.width-70 > .content {
		padding: 20px 0;
	}

	.button.large {
		padding: 10px 15px;
	}

	#calendar .featured-events .column.width-42,
	#calendar .filters .column.width-18,
	#calendar .filters .column.width-22 {
		width: 100%;
	}

	#calendar .filters .column.width-22 {
		margin: 0 0 20px 0;
	}

	#calendar .featured-events .column.width-42 .content {
		border-bottom: 1px solid #546859;
	}

	#calendar .featured-events .column .content,
	#calendar .featured-events .columns,
	footer,
	footer .wrapper,
	main .wrapper,
	section.main {
		margin: 0;
	}

	#contact-us table {
		max-width: none;
	}

	footer .top {
		padding: 20px 15px;
	}

	footer .top:before,
	header .top .donate span.icon,
	header .top .navigation {
		display: none;
	}

	header .hamburger {
		top: 20px;
	}

	header .top .column.left {
		margin: 20px 0 0 0;
	}

	header .top .column.right {
		margin: 0 20px 0 0;
	}

	header .top form {
		width: 180px;
	}

	header .top .donate span.background svg {
		width: 80px; height: auto;
	}

	header .top .donate span.label {
		font-size: 12px;
		-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
		top: 50%;
	}

	#home .introduction .top {
		padding: 60px 0 0 0;
	}

	.line {
		margin: 0 0 20px 0;
	}

	#programs .grid .caption .icon {
		width: 60px; height: 60px;
		top: -30px;
	}

	#programs .grid .caption .icon svg {
		width: 25px; height: auto;
	}

	#programs .column.width-30 > .content {
		padding: 0;
	}

}

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

x. Smaller than 500px

*********************************************************************************************/
@media only screen and (max-width:500px) {

	#blog .post .column.width-30,
	footer .top,
	header .top form,
	#home .feeds .border,
	#home .introduction .bottom .column.width-50:first-of-type {
		display: none;
	}

	#blog .post .column.width-70,
	#home .feeds .column.width-30,
	#home .feeds .column.width-70,
	#home .introduction .bottom .column.width-50:last-of-type,
	#programs .item.width-33,
	#programs .column.width-70 .column.width-50,
	#speaker .column.width-70 .column.width-40,
	#speaker .column.width-70 .column.width-60 {
		width: 100%;
	}

	#blog .column.width-70 .column.width-70 > .content,
	#speaker .column.width-60 > .content {
		padding: 0 0 20px 0;
	}

	.call-out {
		margin: 20px 0 0 0;
	}

	header .top .social-media li {
		margin: 0 20px 0 0;
	}

	#home .introduction .bottom .column.width-50:last-of-type .content,
	#programs .column.width-50 > .content,
	#speaker .column.width-40 > .content {
		padding: 0;
	}

	.page-title {
		padding: 20px 0;
	}

	.page-title h2 span:after,
	.page-title h2 span:before {
		width: 30px;
	}

}

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

x. Smaller than 400px

*********************************************************************************************/
@media only screen and (max-width:400px) {

	.alignleft,
	.alignright,
	.wp-caption {
		width: auto;
		max-width: none;
		margin: 0 0 20px 0 !important;
		float: none;
	}

	aside .box.navigation ul li {
		font-size: 12px;
	}

	aside .box.navigation ul li.title,
	blockquote,
	#blog .page-title h2,
	#blog .post h3,
	#event .page-title p.title,
	h3,
	h4,
	#home .introduction .top,
	#post .page-title h2,
	#programs .grid .caption h3 {
		font-size: 20px;
	}

	blockquote,
	h4,
	#home .introduction .top {
		/* font-size: 16px; */
	}

	#blog .page-title a,
	#blog .post .read-more,
	html, body,
	#post .page-title a {
		/* font-size: 13px; */
	}

	.button.large,
	input[type="submit"],
	#press-room .article a {
		font-size: 12px;
	}

	#event .column.width-30,
	#event .column.width-70,
	img.alignleft,
	img.alignright,
	#think-drink .event .column.width-30,
	#think-drink .event .column.width-70 {
		width: 100%;
	}

	#event .column.width-30 > .content {
		padding: 20px 0 0 0;
	}

	#event .column.width-70 .content .column.width-30 > .content,
	#event .column.width-70 .content .column.width-70 > .content,
	#think-drink .event .column.width-30 > .content {
		padding: 0;
	}

	#event .column.width-70 .content .column.width-30 .image.round,
	#think-drink .column.width-30 .image.round {
		max-width: 220px;
		margin-left: auto;
		margin-right: auto;
	}

	h1 {
		font-size: 35px;
	}

	h2 {
		font-size: 25px;
	}

	h5,
	#home .introduction .top .carousel-wrapper h4 {
		font-size: 16px;
	}

	h6 {
		font-size: 15px;
	}

	header .top .logo .image {
		width: 200px;
	}

	#home .introduction .bottom,
	#home .map {
		padding: 20px;
	}

	#home .introduction .top {
		padding: 50px 0;
	}

	#home .introduction .top .carousel-wrapper {
		display: none;
	}

	#think-drink .event .column.width-70 > .content {
		padding: 0 0 20px 0;
	}

	.wp-caption {
		padding: 10px 10px 1px 10px;
	}

}