/* I think drupal needs a few more DIVs :-/ */

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

	* { 
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box; 
		box-sizing: border-box;
	}

	body {
		min-width: 1px;
		padding: 0 20px;
	}

	.container-12 {
		width: auto;
		margin: 0;
	}
	.container-12 .grid-12 {
		width: auto !important;
	}

	#section-header {
	}
		#section-header .branding-data .logo-img {
			margin: 0;
			float: none;
			display: block;
		}
			#section-header .branding-data .logo-img a {
				display: block;
				width: 194px;
				height: 18px;
				text-indent: -9999em;
				background: url("../images/logo_mobile.png");
				margin: 8px 0;
			}
		#section-header .zone-header .equal-height-element {
			height: auto !important;
		}
		#region-branding {
			width: 100%;
			margin: 0;
		}
		#region-header-second {
			clear: left;
			width: 50%;
			margin: 0;
		}
		#region-header-third {
			width: 50%;
			margin: 0;
		}
			.zone-header .region-header-third .form-text {
				position: static;
				width: 100%;
			}
			#region-header-third .region-inner {
				display: -webkit-box;
				display: -moz-box;
				display: box;
				-webkit-box-direction: reverse;
				-moz-box-direction: reverse;
				-ms-box-direction: reverse;
				-o-box-direction: reverse;
				box-direction: reverse;
				-webkit-box-orient: vertical;
				-moz-box-orient: vertical;
				box-orient: vertical;
				position: relative;
			}
			.zone-header .region-header-second ul, 
			.zone-header .region-header-third ul {
				margin: 0;
				height: auto;
			}
				.zone-header .region-header-second .menu li, 
				.zone-header .region-header-third .menu li {
					height: auto;
				}
		#region-header-fourth {
			display: none;
		}
		.zone-header .region-header-second .menu a, 
		.zone-header .region-header-third .menu a {
			background: none;
			width: auto;
			height: auto;
			text-indent: 0;
			max-height: auto;
		}

	#section-footer {
		margin: 0 -20px;
	}
		#section-footer #zone-footer-wrapper {
			padding: 0 20px;
		}
		#section-footer .region {
			width: auto;
			float: none;
			width: 100%;
			display: block;
			margin: 0;
		}
			#section-footer #zone-footer {
				display: -webkit-box;
				display: -moz-box;
				display: box;
				-webkit-box-orient: vertical;
				-moz-box-orient: vertical;
				box-orient: vertical;
				padding: 30px 0 5px;
			}
				#section-footer #zone-footer .region-footer-first {
					-moz-box-ordinal-group: 2;
					-webkit-box-ordinal-group: 2;
					box-ordinal-group: 2;
				}
				#section-footer #zone-footer .region-footer-second {
					-moz-box-ordinal-group: 1;
					-webkit-box-ordinal-group: 1;
					box-ordinal-group: 1;
				}
				#section-footer #zone-footer .region-footer-third {
					-moz-box-ordinal-group: 3;
					-webkit-box-ordinal-group: 3;
					box-ordinal-group: 3;
				}
		#section-footer .footer-share ul {
			display: -webkit-box;
			display: -moz-box;
			display: box;
			-webkit-box-orient: horizontal;
			-moz-box-orient: horizontal;
			box-orient: horizontal;
			margin: 0 0 20px;
		}
			#section-footer .footer-share ul li {
				float: none;
				height: auto;
				margin: 0;
				width: 33.333%;
			}
				#section-footer .footer-share ul li a {
					display: block;
					margin: 0 auto;
				}
		#section-footer .zone-footer-wrapper .menu {
			margin: 0;
		}
			#section-footer .zone-footer-wrapper .menu li {
				display: block;
				margin: 0;
			}

	#section-content {
		padding: 0 0 20px;
	}
		#section-content .main-layout-inside, 
		#section-content .main-layout-inside .panels-flexible-column-main-layout-main-inside {
			/* 
				box direction and box orient I still think is voodoo
				but its handy to reorder the page contents without re-writing or using javascript
			*/
			display: -webkit-box;
			display: -moz-box;
			display: box;
			-webkit-box-direction: reverse;
			-moz-box-direction: reverse;
			-ms-box-direction: reverse;
			-o-box-direction: reverse;
			box-direction: reverse;
			-webkit-box-orient: vertical;
			-moz-box-orient: vertical;
			box-orient: vertical;
			padding: 0;
			margin: 0;
		}
		.author, 
		.pinline, 
		.page-home .panels-flexible-region-main-layout-center, 
		.page-books .panels-flexible-region-main-layout-center, 
		.page-articles .panels-flexible-region-main-layout-center, 
		.page-presentations .panels-flexible-region-main-layout-center {
			display: none;
		}
		.main-layout .sidebar, 
		.main-layout .main-col, 
		.main-layout .images-col {
			width: auto;
			float: none;
			margin: 0;
			padding: 0;
		}
		.page-books .main-col .pane-title, 
		.page-articles .main-col .pane-title, 
		.page-presentations .main-col .pane-title, 
		.view-john-gerzema .views-field-title, 
		.view-the-athena-doctrine-book .views-field-title, 
		.view-workshop-no-slideshow .views-field-title, 
		.node-type-article .views-field-field-categories {
			background: none;
			color: #000;
			font-size: 22px;
			line-height: 26px;
			text-align: center;
			font-size-adjust: 0;
			padding: 4px 0 0;
			margin: 0 0 6px;
			text-transform: none;
		}
		.panel-pane.pane-views.pane-homepage-grid .pane-title, 
		.node-type-article .left-sidebar {
			display: none;
		}
		.view-homepage-grid .views-row, 
		.view-search-results .views-row, 
		.view-workshops-grid .views-row {
			float: none;
			display: block;
			width: auto;
			height: auto;
			margin: 0 0 20px;
			padding: 0 0 20px;
		}
			.view-homepage-grid .views-row:nth-child(3n), 
			.view-workshops-grid .views-row:nth-child(3n) {
				margin: 0 0 20px;
			}
			.view-homepage-grid .views-row:nth-child(5) ~ .views-row, 
			.view-workshops-grid .views-row:nth-child(5) ~ .views-row {
				display: none;
			}
			.view-homepage-grid .views-row:hover, 
			.view-search-results .views-row:hover, 
			.view-workshops-grid .views-row:hover {
				background: none;
			}
			.view-homepage-grid .views-field-nid-1, 
			.view-search-results .views-field-nid-1, 
			.view-workshops-grid .views-field-nid-1 {
				position: static;
			}
			.view-homepage-grid .wrap, 
			.view-search-results .wrap, 
			.view-workshops-grid .wrap {
				width: 225px;
				margin: 0 auto;
				display: none;
			}
				.view-homepage-grid .views-row-1 .wrap, 
				.view-search-results .views-row-1 .wrap, 
				.view-workshops-grid .views-row-1 .wrap {
					display: block;
				}
			.view-homepage-grid .right-border, 
			.view-search-results .right-border, 
			.view-workshops-grid .right-border {
				display: none;
			}
			.view-homepage-grid .bottom-border, 
			.view-search-results .bottom-border, 
			.view-workshops-grid .bottom-border {
				bottom: 0;
				width: auto;
				right: 0;
			}

  /* I think .page-node is all article detail type pages AND the about page (and not just article detail pages) */
	.page-node .main-layout .panels-flexible-region-main-layout-center {
		width: auto;
		overflow: hidden;
	}
		.page-node .main-layout .article-col + .right-sidebar {
			display: none;
		}
			.page-node .main-layout .article-col .wrap img {
				width: 100%;
				display: block;
				margin: 0 auto;
			}
			.view-slideshow .titles, .view-article-content-2 .titles, 
			.view-john-gerzema .titles, 
			.view-the-athena-doctrine-book .titles, 
			.view-workshop-no-slideshow .titles {
				color: #000;
				background: none;
				position: static;
				font-size: 27px;
				line-height: 32px;
				width: auto;
			}
				.view-slideshow .titles .inner, 
				.view-article-content-2 .titles .inner, 
				.view-john-gerzema .titles .inner, 
				.view-the-athena-doctrine-book .titles .inner, 
				.view-workshop-no-slideshow .titles .inner {
					padding: 5px 0;
				}
			.view-slideshow .views-field-nid ul, 
			.view-article-content-2 .views-field-nid ul, 
			.view-john-gerzema .views-field-nid ul, 
			.view-the-athena-doctrine-book .views-field-nid ul, 
			.view-workshop-no-slideshow .views-field-nid ul {
				margin: 0;
			}
				.view-slideshow .views-field-nid li, 
				.view-article-content-2 .views-field-nid li, 
				.view-john-gerzema .views-field-nid li, 
				.view-the-athena-doctrine-book .views-field-nid li, 
				.view-workshop-no-slideshow .views-field-nid li {
					/* tags */
					margin: 0 10px 10px 0;
				}
			.page-node .main-layout .article-col .views-field-nid + div .addthis_toolbox.share-toolbar {
				display: none;
			}
			.context-john-gerzema .main-layout .article-col .view-content {
				padding: 0 0 20px;
			}

			.views-field.views-field-nid, 
			.views-field.views-field-body, 
			.views-field.views-field-field-categories, 
			.pane-related-content-frontend-panel-pane-1, 
			.views-field.views-field-nid-1 {
				width: auto !important;
			}

	/* article detail related content */
	.view-related-content-frontend {
	}
		.view-related-content-frontend .item-list ul {
			margin: 0 0 20px;
		}
			.view-related-content-frontend .ds-2col-fluid > .group-left {
				width: 85px;
			}
				.view-related-content-frontend .ds-2col-fluid > .group-left img {
					display: block;
					width: 75px;
					height: 66px;
				}
			.view-related-content-frontend .ds-2col-fluid > .group-right {
				float: none;
				width: auto;
				display: block;
			}
			.views-field-field-related-content .field-name-field-categories {
				font-size: 12px;
			}
			.views-field-field-related-content .field-name-title h4, 
			.views-field-field-related-content .field-name-field-subhead {
				font-size: 14px;
				line-height: 17px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
			.view-related-content-frontend .item-list ul li:hover {
				background: #fff;
			}

	/* book page */
	.node-type-book .sidebar-title {
		display: none;
	}

	/* search page */

	.page-search .sidebar-left {
		display: none;
	}
	.search-results .main-col {
		width: auto;
		margin: 0 0 20px;
	}
	.view-search-results {
		margin: 0;
		padding: 10px 0 0;
	}
	.view-search-results .group-wrap {
		margin: 0;
	}

	/* panels */

	.panel-flexible .panel-separator {
		display: none;
	}
	.john-link.subscribe {
		display: none;
	}
	.pane-custom {
	}
	.book-teaser, 
	.page-home .book-teaser, 
	.follow-john, 
	.information {
		width: auto;
		margin: 0 0 20px;
	}
		.book-teaser .pane-title {
			background: #fff;
			margin: 0;
			padding: 0;
		}
		.book-teaser .pane-content {
			padding: 10px 10px 0;
		}
		.book-teaser .pane-content:hover {
			background: none;
		}
		.book-teaser .book-image {
			float: left;
			margin: 0 10px 10px 0;
			width: 75px;
			height: 113px;
			background-size: cover;
		}
		.book-teaser .addthis_toolbox {
			clear: both;
			margin: 0 0 10px;
		}
		.book-teaser .pane-content a.buy-book, 
		.book-teaser .pane-content a.preorder {
			margin: 0 -10px !important;
			position: static;
			width: auto;
			background: #231f20;
			position: relative;
		}
			.book-teaser .pane-content a.buy-book:after, 
			.book-teaser .pane-content a.preorder:after {
				content: "";
				position: absolute;
				left: 50%;
				width: 225px;
				top: 0;
				bottom: 0;
				margin: 0 0 0 -112px;
				background: url(http://cdn-1.johngerzema.com/sites/all/themes/athenadoctrine/images/preorder_book.png);
			}
				.book-teaser .preorder {
					left: 0;
				}
			.book-teaser .pane-content:hover .buy-book {
				background-position: 0 0;
			}
	.follow-john .image img {
		width: 225px;
		margin: 0 auto;
		display: block;
	}
	.follow-john .social-icons a {
		display: block;
	}
	.ted-talk, 
	.john-speak {
		float: left;
		width: 135px;
		height: 144px;
		background-size: cover;
	}
		.ted-talk:hover, 
		.john-speak:hover {
			background-position: 0 0;
		}
		.john-speak {
			float: right;
		}
	.information .pane-title {
		display: none;
	}
	.pane-facebook-comments-facebook-comments {
		margin: 0 0 20px;
		display: none !important;
	}
		.pane-facebook-comments-facebook-comments iframe, 
		.pane-facebook-comments-facebook-comments .fb-comments > span {
			width: 100% !important;
			position: static !important;
			display: none !important
		}
	.node-type-book .author-teaser {
		top: 0;
	}
}