/*
Theme Name: statenislandmuseum
Author: Imaginary Office
Description: a custom theme built using blankslate; mobile styles
Version: 1.0
*/

/* media queries */

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

	.sl-wrapper.twocolumn .sl-image-wrapper {
		padding-left: 30px;
		padding-right: 30px;
	}
}


@media only screen and (max-width: 1280px) and (min-width: 1200px) {
	.online-exhibition .full-width,
	.page-template-page-simple-landing .full-width {
		margin-left: calc(-1 * (50vw - 600px));
	}

	.online-exhibition .exhibition-block.full-width,
	.page-template-page-simple-landing .exhibition-block.full-width {
		margin-left: calc(-1 * (54vw - 600px));
	}
}

	@media only screen and (max-width: 1280px) {
	#footer {padding: 30px 4% 20px 4%;}

	#container article,
    .article-width-container, .page-template-page-simple-landing #exhibition-blocks,
    #exhibition-blocks, .online-exhibition .article-width, #exhibition-blocks, .page-template-page-simple-landing .article-width, body.search header, .page-visit .visit-safely-graphics, .page-visit .guidelines-block, .full-width.banner.visit .text-container {
        margin:0 4% 0 4%;
				max-width:92vw;
		}

	 .full-width.banner.visit .text-container { 
		left: 0 !important;
	 }

		.page-visit .visit-safely-graphics { margin-top: 60px; }
		#exhibition-blocks,
		.page-template-page-simple-landing #exhibition-blocks {
			margin-bottom: 120px;
		}

.page-visit .guidelines-block { padding-top: 60px; padding-bottom: 60px;  }
}


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




	#header { height: 180px;}

	#header-right-container { width: 65%; }
	#branding { width: 35%; }

	#donate.button-border, #shop.button-border, #tickets.button-border {
		border: 0;
}

.header-right-top-group #social {
	display: none;
}


    #footer {max-width:100vw;padding:50px 4%;}
        #footer-text-container #social{font-size:1.5rem;}
        #footer-text-container #social i{margin:0 10px 0 0;}
    #announcement-overlay{padding:4%;}
    #announcement-overlay p{font-size:0.8rem;}
        #menu{display:none;}
        i.fas.fa-bars{padding:10px;}
	div.mobile-nav { padding: 0; display: block; }
    #content.single-posts{width:100%;}
    #exhibition-blocks .exhibition-block.full-width {
          width:100vw; margin: 0 0 0 -4%; }
    .online-exhibition .exhibition-block .half-width,
	.page-template-page-simple-landing .half-width {width:46%;padding-right:4%;}
	.online-exhibition .exhibition-block.text.twocolumns, .page-template-page-simple-landing .exhibition-block.text.twocolumns { column-gap: 8%; padding-right:16%;}


/* HOME */
	.home .half-block {
		width: 35%;
	}

	.home .half-block.text {
		width: 65%;
		padding: 35px 4%;
	}

.top-banner .article-width-container.hero-text {
	left: 0;
}
	.home .fixed-width-block-wrapper {
		height: 350px;
	}

	.home .half-block.text p {
    font-size: 1rem;
    line-height: 1.3rem;
    font-weight: 400;
	}

	.half-block img {
		min-width: 470px;
	}

	.half-block.text h2 {
		font-size: 1.5rem;
		line-height: 1.8rem;
		margin: 10px 0;
	}

	.half-block.text .mini_header {
		font-size: .9rem;
	}

	.top-banner .article-width-container.hero-text {
		top: 12%;
		width: 50%;
	}

.top-banner .article-width-container.hero-text p.subheader {
	line-height: 1.7rem;
}


	.home-fixed-width-container.top-banner #hero {
	/* height: 398px; */
}
.home-fixed-width-container.top-banner #hero img {
	/* min-width: 1023px; */
}

.top-banner .article-width-container.hero-text {
	top: 15%;
}

.top-banner .article-width-container h2 {
    font-size: 2.75rem;
    line-height: 2.75rem;
		margin-bottom: 12px;
}

.half-block.text .large_blurb {
    font-size: 1.5rem;
    line-height: 1.7rem;
}

.half-block img.hideontablet {display:none;}


.top-banner .article-width-container.hero-text .mini_header { margin-bottom: 14px; font-size: .9rem;}


}

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

.featured-exhibition .half {
	width: 100%;
}

.exhibit-item-container { width: 48%; }

.exhibit-item-container h3 { font-size: 1rem; }

.featured-exhibition .half { padding-top: 70%; }

.featured-exhibition .half.text { padding: 24px; }

.exhibit-item-container:nth-child(n+2) { margin-right: 0; }


.header-right-top-group #shop, .header-right-top-group #donate:not(.membership) { margin-right: 20px; display: none; }



i.fas.fa-bars{padding:10px; margin-top: -10px;}

.page-template-page-simple #container article {
		margin: 0;
		max-width: 88%;
}

	#menu-mobile {
    padding: 50px 6%;
}

}

@media only screen and (max-width: 768px) {
    .footer-text.left{width:100%;margin:0;}
    .footer-text.center,.footer-text.right {width:46%;margin:0 4% 0 0;}

    .longlist-container ul{column-count:3;}

}


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

	/* HOME */
.home .fixed-width-block-wrapper {
    height: auto;
}

.home .half-block, .home .half-block.text {
		width: 100%;
	}

#hero .hero-overlay { display: none; }

#hero.visit .hero-overlay { background: linear-gradient(90deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, 0) 70%); display: block; }

.top-banner .article-width-container.hero-text {
	position: relative;
	width: 88%;
  top: 36px;
	padding-bottom: 80px;
}
.full-width-block-wrapper:nth-child(odd) .block .half-block.text::after {
    top: -60px;
	left: 30px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #516b6b;
}

.home-fixed-width-container.top-banner #hero img {
    /* min-width: 900px; */
}

.full-width-block-wrapper:nth-child(1) .block .half-block.text::after {
    border-bottom: 30px solid #516b6b;
}

.home-fixed-width-container.top-banner {
	background: #7a7a7a;
}
.full-width-block-wrapper:nth-child(even) .block .half-block.text::after {
    top: -60px;
	left: 30px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #f5f4ed;
}

.full-width-block-wrapper:nth-child(6) .block .half-block.text::after {
    top: -60px;
	left: 30px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #000000;
}

.full-width-block-wrapper:nth-child(3) .block .half-block.text::after {
    top: -60px;
	left: 30px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #013c4d;
}


.half-block img.hideontablet {display:block;}

.half-block img.alt-ipad-image {display: none;}

/* gallery */
.grid-item { width: 46%; margin: 10px 2%; }

/* 2 column lightbox gallery */

.sl-wrapper.twocolumn .sl-image { width: 100% !important; height: 50vh !important;}
.sl-wrapper.twocolumn .sl-caption { padding: 20px 20px 80px 20px; /* height: calc(50vh - 20px); */ width: 100% !important; position: absolute; top: 50%; /* overflow-y: scroll; */ }
.sl-wrapper.twocolumn .sl-image img { width: auto; margin: 0 auto; bottom: 0; position: absolute; max-height: 90%; }
.sl-wrapper.twocolumn .sl-image-wrapper { margin: 20px auto; height: 100vh; padding: 0; }
.sl-wrapper .sl-navigation { display: none !important;}
.sl-wrapper { overflow-y: scroll; }
.sl-wrapper .sl-counter { z-index: 999999 !important; left: 20px !important; top: 20px !important; color: #888888;}
.sl-wrapper .sl-close { font-size: 2.5rem !important; top: 20px !important; }
}



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

/* global */

html{font-size:16px;}

#branding .logo {
    width: 120px;
    height: 50px;
}

#mobile-logo {
    width: 100%;
    float: none;
    margin: 0px auto 10px auto;
    background-size: 40%;
}

#header { height: 80px; padding:20px 0; }

.menu-mobile-nav-container {
    width: 100%;
    float: none;
}

#menu-mobile { padding: 20px 6%; }

#header-right-container {
    right: -5%;
}

#container article, .article-width-container, #exhibition-blocks, .online-exhibition .article-width, .page-template-page-simple-landing .article-width, .full-width.banner.visit .text-container {
	margin: 0 6%;
  max-width: 88vw;}

.page-template-page-simple #container article {
		margin: 0;
		max-width: 88%;
	}

/* exhibitions */
	#exhibition-blocks .exhibition-block.full-width {
    width: 100vw;
    margin: 0 0 40px -6%;
}

.online-exhibition .large-image.launchgallery .image-wrapper:after, .online-exhibition .full-width.launchgallery:after {
    background-size: 80%;
    background-position: 14px 12px;
    width: 140px;
    padding: 4px 16px;
    right: 0;
    bottom: 2px;
  }


.exhibit-header h2 {
    font-size: 1.25rem;
		margin-bottom: 30px;
	}

.exhibit-header h1 {
	line-height: 2.5rem;
	margin-bottom: 10px;
}
.online-exhibition .full-width.nav {
	margin-bottom: 0;
	padding-bottom: 10px;
	min-height: unset;
}

.online-exhibition .section-intro p {
	font-size: 1.25rem;
	line-height: 1.75rem;
}
.exhibit-header a.secondary-page {
	font-size: .9rem;
	opacity: .8;
}
.online-exhibition .full-width.nav {
	margin-bottom: 0;
	padding-top: 20px;
}

.online-exhibition .half-width blockquote {
    padding: 0;
}

.online-exhibition .exhibition-block {
    margin-bottom: 20px;
}

.top-banner .article-width-container p {
	font-size: 1.35rem;
	font-weight: 500; }

#exhibition-blocks {
	margin-bottom: 50px;
}
.full-width.supporters {
	margin-left: -6%;
}

.online-exhibition .full-width {
	max-height: none;
}

nav.exhibition-sections ul li {
    padding: 4px 20px 24px 0;
    display: inline;
    margin-bottom: 20px;
    line-height: 2rem;
}


.online-exhibition .full-width.related-content .half-block {
	width: 100%;
}
.online-exhibition .exhibition-block.text.onecolumn,
.page-template-page-simple-landing .exhibition-block.text.onecolumn {
	width: 100%;
}

.online-exhibition .exhibition-block.image-text-split .half-width.image-right,
.page-template-page-simple-landing .exhibition-block.image-text-split .half-width.image-right {
		margin-bottom: 40px;
}

.top-banner .article-width-container.hero-text, { top: 10px; padding-bottom: 40px; }


#exhibition-blocks .supporters img {
    padding: 24px 48px 24px 0;
}

/* home */

.home-fixed-width-container.top-banner #hero { height: auto; }
.home .half-block.text { padding: 35px 6%; }
#footer-text-container h4, #footer-text-container p {margin:0 0 10px 0;}
.footer-text.left, .footer-text.center,.footer-text.right{ margin:0 0 20px 0;}
.footer-text.center,.footer-text.right {width:100%;}
#footer-text-container { line-height: 2rem;}
.header-right-top-group #social {display:none;}

.top-banner .article-width-container.hero-text { background: #7a7a7a; width:100%;left:0;margin: 0; padding: 20px 6% 40px 6%;}

.entry-content.about-collections-page, .landingpage-photo,

.content_fields_intro,
    div.featured-item-container {
      width:100%;margin:0;}

.online-exhibition .exhibition-block .half-width, 
.page-template-page-simple-landing .exhibition-block .half-width {width:100%;padding-right:0; margin: 30px 0;}

.exhibit-header.left, .exhibit-header.right{width:100%;}

.exhibit-header.right { margin-top: 30px;}

.logo-donor-home {
    width: 23%;
    height: auto;
    text-align: center;
    margin: 20px 5%;
    float: left;
    display: inline;
}


/* landing pages */

.article-width-container.one-col-text {
	max-width: 90%;
}
.entry-content.landingpage, .landingpage .intro_text {
		     width: 100%;
		     margin: 0;
		 }


/* calendar */
    .longlist-container ul{column-count:2;}
    .details-maincontainer, .details-sidebar{width:100% !important; max-width:100vw !important;margin:0 !important;}
	.single-tribe_events #container { margin-top: 0 !important; }

	ul.tribe-related-events { flex-direction: column !important; }
	ul.tribe-related-events li { width: 100% !important; margin: 3% 0 6% 0 !important; }


/* article */
article { padding-top: 0 !important; }
/* exhibition category pages */

.exhibition-cats ul li {
	display: block;
	margin-bottom: 10px;
	padding-bottom: 3px;
}

nav.exhibition-cats {
	width: 40%;
}

.exhibitions-intro {
	width: 60%;
}

.exhibit-item-text {
	padding: 8px;
}

/* exhibitions */

.online-exhibition blockquote {
    padding: 10px;
}

	/* visit */
	.safety-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
	text-align: center;
}
	.safety-item img {
    width: 30%;
    margin: 0 auto;
}

	.safety-item h3 {
    font-size: 1rem;
    margin: 0 10% 20px 10%;
}
	.visit-safely-graphics h2 {text-align: center;}


	.page-visit .left-content, .page-visit .right-content { width: 100%; }

	.page-visit .guidelines.two-column { column-count: 1; }


	/* related content promo */
	li.promo_item_list {
    width: 46%;
    height: auto;
    margin: 0 4% 0 0;
    overflow: hidden;
}

}


@media ( min-width: 1280px ) {

	.online-exhibition .exhibition-block.full-width, .online-exhibition .full-width  {
    margin-left: calc(-1 * (50vw - 600px));
}

}


@media ( min-width: 1200px ) {



	.half-block.text {
		padding: 50px;
	}
}

@media ( min-width: 1440px ) {
	.full-width-block-wrapper { width: 100vw; margin-left: calc(-1 * ((100vw - 1440px) / 2)); }

	/* vertical offset for full width banner images */

	.online-exhibition .full-width.banner img, .full-width.about img {
	    margin-top: -3vw;
	}
}