/* -- LAPTOP -- */

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

	.related .item {
		min-height: initial;
	}

	.related .item .image {
		margin-right: 16px;
		margin-bottom: 10px;
	}

	.related .item .image img {
		width: 66px;
		height: 66px;
	}

	.related .item .title {
		padding: 5px 0 10px;
		font-size: 22px;
		line-height: 25px;
	}

	.related .item .description {
		clear: left;
		font-size: 16px;
		line-height: 21px;
	}

	#home-buttons a {
		margin: 0 2%;
	}

	#calendar-events .event img {
		width: 50%;
		height: auto;
		margin-right: 4%;
	}

	#footer-links .group {
		width: 30%;
		height: auto;
	}

	#issue-list .issue {
		float: none;
		width: 100%;
		padding-right: 0;
		overflow: hidden;
	}

	#classes-list .class img {
		position: absolute;
		width: 350px;
		margin-right: 40px;
	}

	#classes-list .class .text {
		padding-left: 390px;
	}

}


/* -- TABLET -- */

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

	#header #submenu {
		top: 80px;
		left: 0;
		width: 100%;
		max-width: initial;
	}

	#header #submenu ul li.selected a {
		background-position: right 74px center;
	}

	#header #submenu ul li a {
		padding-left: 74px;
	}

	#header #submenu #submenu-section {
		padding-left: 74px;
	}

	#footer-story {
		left: 5%;
	}

	#footer-donate {
		right: 5%;
	}

	#pagebar {
		padding-top: 147px;
		padding-right: 45px;
	}

	.hero {
		padding-top: 122px;
	}

	.hero .prev,
	.hero .next {
		top: 55%;
		width: 50px;
		height: 50px;
	}

	.columns {
		display: block;
	}

	.column-main {
		float: none;
		width: auto;
		padding-bottom: 0;
		padding-right: 0;
	}

	.column-side {
		float: none;
		width: auto;
		max-width: initial;
		border-top: 2px solid #E8E8E8;
	}

	.column-half {
		float: none;
		width: auto;
		margin: auto;
	}

	ul.sub-nav li.selected a:after {
		display: none;
	}

	ul.sub-nav li.selected a:before {
		display: none;
	}

	#comments {
		border-bottom: 0;
	}


	#landing-sections ul li {
		float: none;
		width: auto;
		padding: 10px 0;
	}

	#landing-sections ul li a {
		width: auto;
	}


	#home-today a span {
		display: none;
	}

	#home-buttons a {
		width: 200px;
		margin: 25px 2% 0;
	}

	#home-buttons a .image {
		width: 200px;
		height: 200px;
	}


	#home-upcoming-events {
		display: block;
	}


	#home-today a {
		width: 50%;
		padding-left: 0;
	}

	#home-today a:last-child {
		padding-right: 0;
	}

	#home-upcoming a.event {
		height: 140px;
	}

	#home-upcoming a.event .title {
		font-size: 22px;
		line-height: 24px;
	}

	#home-upcoming a.event .detail {
		font-size: 16px;
		line-height: 20px;
	}

	#ask-categories {
		grid-template-columns: 1fr 1fr;
	}

	#ask-mod {
		position: relative;
		right: auto;
		margin-top: -76px;
		width: auto;
	}

	#ask-mod .category-list li {
		display: none;
		font-size: 15px;
	}

	#ask-mod .category-list li {
		display: none;
		font-size: 15px;
	}

	#ask-mod .category-list li.selected {
		display: block;
	}

	#ask-mod .category-list li a {
		text-align: left;
		padding: 0 76px;
	}

	#ask-mod .category-list li.selected a {
		background-image: url(../images/common/arrow-sm-white-down.svg);
		background-position: right 76px center;
		background-repeat: no-repeat;
	}

	#ask-button {
		display: none;
	}

	#ask-button-bottom {
		display: block;
	}


	#ask-mod #ask-search {
		box-sizing: border-box;
		padding: 0 34px 40px;
	}

	#ask-mod #ask-search input[type="text"] {
		border: 0;
	}

	#calendar-events .event img {
		display: block;
		width: 100%;
		max-width: none;
		margin-right: 0;
		margin-bottom: 20px;
	}

	#classes-list .class img {
		position: relative;
		display: block;
		width: 100%;
		max-width: none;
		margin-right: 0;
		margin-bottom: 20px;
	}

	#classes-list .class .text {
		padding-left: 0;
	}


	#blog #posts .post-pad img {
		margin-bottom: 15px;
	}

	#blog #posts .post-pad {
		width: 80%;
	}

	#blog #posts .post-extras .details {
		position: relative;
		left: initial;
		top: initial;
		width: 100%;
		margin-bottom: 30px;
		text-align: left;
		overflow: hidden;
	}

	#blog #posts .post-extras .date {
		margin-bottom: 5px;
	}

	#blog #posts .post-extras .time {
		float: left;
		margin: 0;
	}

	#blog #posts .post-extras .time span {
		display: inline;
		margin: 0 2px;
	}

	#blog #posts .post-extras .categories {
		float: left;
		margin: 0;
	}

	#blog #posts .post-extras .comments {
		margin: -18px 0 0;

	}


	#hours-cols {
		padding-top: 38px;
		margin-bottom: 40px;
		grid-template: 'museum' 'sea' 'special';
		grid-template-columns: 1fr;
	}

	#hours-cols .column-third {
		border-left: 0;
		border-bottom: 2px solid #E8E8E8;
		padding-left: 5%;
		padding-right: 5%;
		margin-bottom: 30px;
	}

	#hours-cols .column-third:first-child {
		padding-left: 5%;
		padding-right: 5%;
	}

	#hours-cols .column-third:last-child {
		padding-right: 5%;
		border-bottom: 0;
	}


}


/* -- PHABLET -- */

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

	#header #header-menu {
		left: 7%;
	}

	#header.compact #header-menu {
		left: 32px;
	}

	#header #header-menu #menu-btn,
	#header #header-menu #menu-home-btn {
		width: 46px;
		padding: 0;
	}

	#header #header-menu #menu-btn span.text,
	#header #header-menu #menu-home-btn span.text {
		opacity: 0;
	}

	#header #menu {
		overflow-x: hidden;
	}

	#header #menu li {
		padding: 0 20px;
	}

	#header #submenu ul li.selected a {
		background-position: right 34px center;
	}

	#header #submenu ul li a {
		padding-left: 34px;
	}

	#header #submenu #submenu-section {
		padding-left: 34px;
	}

	#header #header-tix {
		right: 7%;
	}

	#header.compact #header-tix {
		right: 32px;
	}

	#header #header-tix #tix-btn {
		width: 46px;
		padding: 0;
	}

	#header #header-tix #tix-btn span.icon {
		opacity: 1;
	}

	#header #header-tix #tix-btn span.text {
		opacity: 0;
	}

	h2 {
		font-size: 38px;
		line-height: 40px;
		overflow: hidden;
	}

	h3 {
		font-size: 28px;
		line-height: 30px;
	}

	h4 {
		font-size: 24px;
		line-height: 26px;
	}

	.date {
		margin: 20px 0;
		font-size: 13px;
		line-height: 15px;
	}

	.hero {
		margin-bottom: 0;
	}

	.hero .prev,
	.hero .next {
		top: 57%;
	}

	label {
		font-size: 22px;
		line-height: 24px;
	}

	#content .pad {
		padding: 0;
	}

	#pagebar {
		height: 50px;
		padding-right: 30px;
		padding-left: 16px;
	}

	#pagebar .pagebar-menu:last-child {
		float: left;
		margin: 0;
	}

	.pagebar-menu .form-datepicker {
		left: 0;
		margin-left: 0;
	}

	#page,
	.page {
		margin-top: 0;
		font-size: 18px;
		line-height: 30px;
	}

	#page p,
	.page p {
		margin: 25px 0;
	}

	.page-gap {
		margin-top: 50px;
	}

	#page-actions .share {
		right: 5px;
		top: -38px;
		background-color: transparent;
		border: none;
	}

	#page-actions .share:hover {
		-webkit-filter: initial;
		filter: initial;
	}

	#page-toggles {
		margin-top: 0;
	}

	#page-toggles a span {
		display: none;
	}

	ul.item-list {
		padding: 0;
	}

	ul.item-list li,
	ul.item-list li:nth-child(3n-2),
	ul.item-list li:nth-child(3n-3) {
		float: none;
		width: 100%;
		text-align: left;
	}

	ul.item-list li a .label,
	ul.item-list li:nth-child(3n-3) .label {
		right: 15px;
		margin-top: -20px;
		width: auto;
	}

	ul.item-list li a .label span,
	ul.item-list li:nth-child(3n-3) .label span {
		padding: 14px 20px 10px;
		font-size: 13px;
	}

	.image-list-image {
		padding-top: 30px;
	}

	.image-list-text {
		width: 75%;
	}

	#ask-mod {
		margin-top: -2px;
	}

	#ask-mod #ask-button {
		padding-left: 40px;
		padding-right: 40px;
	}


	#ask-hero-overlay {
		position: relative;
		width: auto;
		bottom: initial;
		left: initial;
		padding: 34px;
		backdrop-filter: none;
		text-align: center;
		background: black;
		color: white;
	}

	#ask-hero-overlay h2 {
		color: white;
	}

	#ask-hero-overlay a,
	#ask-hero-overlay a:hover {
		color: white;
	}

	#comments .comment {
		font-size: 16px;
		line-height: 22px;
	}

	#comments .comment-name {
		padding-bottom: 2px;
		font-size: 15px;
		line-height: 20px;
	}

	#comments .comment-date {
		font-size: 12px;
		line-height: 14px;
	}

	#footer-bar {
		margin-bottom: 5px;
	}

	#footer-story {
		position: relative;
		top: auto;
		left: auto;
		padding: 20px 0 40px;
	}

	#footer-donate {
		position: relative;
		top: auto;
		right: auto;
		padding: 45px 0 20px;
	}

	#footer-links {
		padding: 15px 0 50px;
	}

	#footer-links .group {
		display: block;
		width: 90%;
		max-width: 280px;
		margin: auto;
		border-right: none;
		border-bottom: 2px solid #706D6D;
		padding-bottom: 20px;
		padding-top: 30px;
	}

	#footer-links .group:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	#landing-info p {
		width: 80%;
	}

	#landing-features {
		padding-bottom: 0;
		border-bottom: 2px solid #E8E8E8;
	}

	#landing-features li {
		padding-bottom: 50px;
	}

	#landing-visual {
		display: none;
	}

	#landing-sections {
		padding: 20px 20px 40px;
	}


	#landing-sections ul li a .title {
		height: 46px;
		font-size: 38px;
		line-height: 42px;
	}

	#home-features {
		height: 600px;
	}

	#home-features li a .title {
		bottom: 70px;
		font-size: 30px;
		line-height: 36px;
	}

	#home-features li a .title .sub {
		font-size: 24px;
		line-height: 28px;
	}


	#home-today {
		padding: 20px 0;
		height: auto;
		background-color: white;
	}

	#home-today a,
	#home-today a:last-child {
		width: 100%;
		height: auto;
		float: none;
		padding: 25px 0;
		line-height: 20px;
		margin-bottom: 2px;
	}

	#home-today a:last-child {
		margin-bottom: 0;
	}

	#home-today a span {
		display: block;
	}

	#home-upcoming {
		margin-top: 0;
		padding-top: 40px;
		padding-bottom: 60px;
	}



	#home-buttons {
		height: auto;
		padding: 15px 0 50px;
	}

	#home-buttons .offset {
		position: relative;
		margin: 0;
		background: none;
	}

	#home-buttons a {
		display: block;
		width: 246px;
		padding: 0;
		margin: 30px auto 30px;
	}

	#home-buttons a .image {
		width: 246px;
		height: 246px;
	}

	#home-buttons a .title {
		padding-top: 15px;
		font-size: 30px;
		line-height: 32px;
	}


	#home-subfeatures .subfeature,
	#home-subfeatures .subfeature:first-child {
		float: none;
		width: auto;
		padding-bottom: 50px;
	}

	#ask-mod .category-list li a {
		padding: 0 40px;
	}

	#ask-mod .category-list li.selected a {
		background-position: right 32px center;
	}


	#blog #posts {
		font-size: 18px;
		line-height: 30px;
	}

	#blog #posts .post-pad {
		width: 100%;
	}

	#blog #posts .post {
		margin-bottom: 2px;
	}

	#galleries #pagebar {
		display: none;
	}

	#galleries #page {
		margin-top: 120px;
	}

	#search-form {
		top: 57%;
	}

	#search-input {
		width: 70%;
	}

	#staff .staff-item {
		float: none;
		width: 100%;
	}

	#hours-cols {
		margin-bottom: 0;
	}

	#hours-cols .column-third,
	#hours-cols .column-third:first-child,
	#hours-cols .column-third:last-child {
		padding-left: 0;
	}

}


/* -- PHONE -- */

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

	#header .pad {
		padding: 0;
	}

	#header #header-bar {
		height: 110px;
	}

	#header #header-menu {
		top: 32px;
		left: 16px;
	}

	#header.compact #header-menu {
		top: 16px;
		left: 16px;
	}

	#header #header-tix {
		top: 32px;
		right: 16px;
	}

	#header.compact #header-tix  {
		top: 16px;
		right: 16px;
	}

	#header #header-logo {
		width: 91px;
		height: 98px;
		margin-top: 5px;
	}

	#header.compact #header-logo {
		width: 65px;
		height: 70px;
		margin-top: 5px;
	}

	#header #submenu ul li.selected a {
		background-position: right 30px center;
	}

	#header #submenu #submenu-section {
		background-position: right 30px center;
	}

	#header #submenu ul li a {
		padding-left: 16px;
	}

	#header #submenu.open ul li.selected a {
		background-image: none;
	}

	#header #submenu #submenu-section {
		padding-left: 16px;
	}

	.hero .prev {
		left: -50px;
	}

	.hero .next {
		right: -50px;
	}

	ul.item-list li,
	ul.item-list li:nth-child(3n-2),
	ul.item-list li:nth-child(3n-3) {
		margin: 0 0 20px;
	}

	#lightbox .close {
		top: 24px;
		right: 24px;
	}

	#lightbox .intro-text {
		width: 72%;
		padding: 0 14%;
	}

	#lightbox .intro-text h2 {
		font-size: 42px;
		line-height: 48px;
	}

	#lightbox .intro-text .text {
		padding: 30px 0 40px;
		font-size: 20px;
		line-height: 26px;
	}

	#lightbox .photo {
		width: 100%;
	}

	#lightbox .caption {
		font-size: 16px;
		line-height: 20px;
	}

	#lightbox .caption .credit {
		font-size: 12px;
		line-height: 20px;
	}

	#lightbox .slider-prev {
		left: 0;
	}

	#lightbox .slider-next  {
		right: 0;
	}

	#comments h3 {
		display: block;
		margin-right: 0;
		margin-bottom: 7px;
	}

	#footer-links .group a {
		padding: 9px 0;
	}

	#footer-location  {
		padding-bottom: 40px;
	}

	#footer-location a {
		display: block;
		padding: 5px 0;
	}

	#footer-location .div {
		display: none;
	}

	#share-popup a {
		display: block;
		width: auto;
		margin-bottom: 5px;
	}

	#page,
	.page {
		padding: 40px 16px;
	}

	#landing-hero {
		height: auto;
		background: #FFF;
	}

	#landing-hero .parallax {
		height: 350px;
	}

	#landing-overlay {
		position: initial;
		z-index: initial;
		padding-top: 350px;
		padding-left: 0;
		overflow: initial;
	}

	#landing-section {
		z-index: 2;
		position: absolute;
		width: 100%;
		top: 350px;
	}

	#landing-section h2 {
		position: absolute;
		bottom: -15px;
		margin: 0;
		width: auto;
		padding-left: 16px;
	}

	#landing-info {
		position: relative;
		z-index: 3;
		padding: 30px 0 86px;
		background: none;
		background: #FFF;
	}

	#landing-info p {
		width: auto;
		color: #000;
		margin: 0;
		padding: 0 16px;
		text-shadow: none;
	}

	#landing-info li {
		padding-left: 20px;
	}

	#landing-info li a {
		filter: intvert(100%);
		-webkit-filter: invert(100%);
	}

	#landing-features {
		padding: 0;
	}

	#landing-features li a .title {
		padding: 20px 20px 0;
	}

	#home-features {
		height: 460px;
	}

	#home-features li a .title {
		bottom: 50px;
		font-size: 22px;
		line-height: 24px;
	}

	#home-features li a .title .sub {
		font-size: 18px;
		line-height: 20px;
	}

	#home-upcoming h2 {
		font-size: 35px;
		margin-bottom: 40px;
	}

	#home-upcoming-events {
		padding: 0 18px;
	}




	#home-video {
		display: none;
	}

	#home-subfeatures {
		padding: 0;
		margin-bottom: -40px;
	}

	#home-subfeatures-pad {
		padding: 16px;
	}

	#home-subfeatures .subfeature {
		border-bottom: 16px solid #E8E8E8;
	}

	#home-subfeatures .subfeature:last-child {
		border-bottom:0;
	}

	#home-subfeatures .subfeature .title,
	#home-subfeatures .subfeature .sub {
		padding-left: 16px;
	}

	#ask-mod #ask-button {
		padding-left: 16px;
		padding-right: 16px;
	}

	#ask-mod .category-list li a {
		padding: 0 20px;
	}

	#ask-mod .category-list li.selected a {
		background-position: right 30px center;
	}

	#blog #page {
		padding: 20px 16px;
	}

	#blog #posts .post {
		padding: 40px 16px 20px;
	}

	#calendar-date .trigger .short {
		display: inline;
	}

	#calendar-date .trigger .long {
		display: none;
	}

	#calendar-events {
		padding: 30px 0;
	}

	#search-input {
		width: 90%;
	}

	#share .question .image img {
		width: 50px;
		height: 50px;
		margin-bottom: 50px;
	}

	#share .question .title {
		margin: 0 0 10px;
	}

	#issue-list .issue .label  {
		margin-top: 0;
	}

	#issue-list .issue .image {
		position: relative;
		width: 35%;
	}

	#issue-list .issue .image img {
		display: block;
		width: 100%;
		height: auto;
	}

	#ask-categories div {
		font-size: 22px;
		line-height: 26px;
		padding-bottom: 10px;
	}

	#ask-categories div a {
		width: 180px;
	}

	#ask-categories div a img {
		display: block;
		width: 180px;
		height: 180px;
		margin: 0 0 16px;
	}

	#ask-landing #ask-search input {
		font-size: 20px;
	}


}