/* ----------------------------------------
-------------------------------------------
	MEDIA QUERIES FOR ARTS AND CULTURE
-------------------------------------------
---------------------------------------- */



/* --------------------
-----------------------
MAIN NAVIGATION 
-----------------------
-------------------- */
#zone-header-menu .columns.responsive {
	padding: 0;
}
#zone-header-menu .fskelMenu.responsive .hamburger-header h3 {
	color: #ffffff;
	margin: 0;
	padding: 10px;
}
#zone-header-menu .fskelMenu.responsive .hamburger-header h3:hover {
	background-color: #dc5f13;
	color: #000000;
	transition: background-color 0.5s ease;
}
#zone-header-menu .fskelMenu.responsive ul {
	margin: 0;
}
#zone-header-menu .fskelMenu.responsive ul li {
	width: 100%;
	min-height: 18px;
	border-top: solid 1px #565656;
	border-left: none;
}
#zone-header-menu .fskelMenu.responsive ul li a {
	min-height: 18px;
	padding: 13px 0;
}



/* --------------------
-----------------------
UP TO LARGE SCREEN
-----------------------
-------------------- */
@media only screen and (max-width: 1024px) {
	.postcard li .featured-image img {
		width: 100%;
	}
	.postcard li:first-child + li + li {
		padding-top: .9375rem !important;
	}
}
@media only screen and (max-width: 965px) {
	/* HEADER */
	#zone-header-branding,
	#zone-header-menu {
		background-color: #00274c;
	}
}
@media only screen and (max-width: 955px) {
	/* LARGE IMAGES */
	body.home,
    body.home #content-main .homepage-image {
        background-image: none!important;
        height: inherit;
    }
	body.home #content-main .homepage-image .featured-image {
		display: block;
		height: 500px;
		overflow: hidden;
		position: relative;
	}
	body.home #content-main .homepage-image .featured-image img {
		position: absolute;
	}
	body.home #content-main .homepage-image .image-title {
		position: relative;
		bottom: 0;
		padding: 15px 0;
		background-color: #333333;
	}
	body.home #content-main .homepage-image .image-title .postTitle h2 {
		text-shadow: none;
	}
	#zone-footer-prefix #widget-footer-prefix1 .image-caption {
		position: inherit;
		top: inherit;
		right: inherit;
	}
	body.home #content-main .homepage-image .image-caption, 
	body.home #content-main .homepage-image .image-caption .caption-button, 
	body.home #content-main .homepage-image .image-caption .caption-content,
	#zone-footer-prefix #widget-footer-prefix1 .image-caption,
	#zone-footer-prefix #widget-footer-prefix1 .bottom-image-caption,
	#zone-footer-prefix #widget-footer-prefix1 .caption-button {
		float: none;
	}
	body.home #content-main .homepage-image .image-caption,
	#zone-footer-prefix #widget-footer-prefix1 .image-caption {
		margin-top: 0;
	}
	body.home #content-main .homepage-image .image-caption .caption-button,
	#zone-footer-prefix #widget-footer-prefix1 .caption-button {
		height: inherit;
        left: 0;
        text-align: left;
        top: 0;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        width: 100%;
	}
	body.home #content-main .homepage-image .image-caption .caption-button,
    body.home #content-main .homepage-image .image-caption .caption-content,
    #zone-footer-prefix #widget-footer-prefix1 .caption-button,
    #zone-footer-prefix #widget-footer-prefix1 .bottom-image-caption {
        padding: 15px;
    }
	body.home #content-main .homepage-image .image-caption .caption-button span,
	#zone-footer-prefix #widget-footer-prefix1 .caption-button span {
        padding: 0;
    }
    body.home #content-main .homepage-image .image-caption .caption-button span i,
    #zone-footer-prefix #widget-footer-prefix1 .caption-button span i {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    body.home #content-main .homepage-image .image-caption .caption-content {
        left: 0;
        max-width: 100%;
        background: #333333
    }
    body.home #content-main .homepage-image .image-caption .caption-content i.fa-times,
    #zone-footer-prefix #widget-footer-prefix1 .bottom-image-caption i.fa-times {
        display: none;
    }
    /* SINGLE PAGE BOTTOM IMAGE AND CAPTION */
    #zone-footer-prefix #widget-footer-prefix1 .bottom-image-caption {
    	position: relative;
    	top: inherit;
    	left: inherit;
    	max-width: 100%;
    	background-color: #333333;
    }
}


@media screen and (max-width: 900px) {
	#umich-events {
		padding-top: 30px;
	}
	#umich-events ul li,
	#umich-events ul li:first-child {
		float: none;
		width: auto;
		clear: both;
		min-height: inherit;
		padding: 0;
		margin: 0 15px;
		display: block;
		height: inherit !important;
	}
	#umich-events ul li:first-child + li + li {
		border-bottom: none;
	}
	#umich-events ul li .event-info {
		width: auto;
		min-height: 75px;
	}
	#umich-events ul li:first-child .image-wrapper {
		margin: 15px 0;
	}
	#umich-events ul li .month-date {
		display: inherit;
		float: left;
		margin: 10px 15px 10px 0;
		padding: 15px;
	}
	#umich-events ul li .event-info {
		display: inherit;
		margin: 10px 0;
	}
	#umich-events ul li .month-date span {
		font-size: 20px;
		line-height: 22px;
	}
	#umich-events ul li .event-info h5,
	.post ul.events li .event-info h5 {
		font-size: 24px;
		line-height: 28px;
	}
	.home-more {
		padding: 20px 0;
	}
}



@media screen and (max-width: 800px) {
	body.home #content-main .homepage-image .featured-image {
		height: inherit;
	}
	body.home #content-main .homepage-image .featured-image img {
		position: relative;
	}
	body.home #content-main .homepage-image .image-title .postTitle h2 {
		font-size: 30px;
	}
}




@media screen and (max-width: 740px) {
	/* HEADER */
	.logo-title,
	#widget-header-second {
		width: 100%;
		text-align: center;
	}
	#widget-header-second {
		margin-top: 20px;
	}
	ul.social,
	p.hashtag,
	#widget-header-second #menu-small-custom-menu {
		text-align: center;
	}
	#widget-header-second .search-form {
		width: 60%;
		margin: 0 auto;
	}
	.post ul.events li .month-date {
		float: left;
		padding: 15px;
		margin-right: 15px;
	}
	.post ul.events li {
		float: left;
		clear: both;
		width: 100%;
	}
	.post ul.events li div {
		width: auto !important;
		display: inherit !important;
	}
	#footer-content div {
		float: none;
		text-align: center;
	}
	#footer-content div.logo {
		margin: 0 0 20px 0;
	}
}




/* --------------------
-----------------------
SMALL SCREEN 
-----------------------
-------------------- */
@media screen and (max-width: 641px) {
	/* HEADER */
	#widget-header-second {
		padding: .9375rem .9375rem 0 .9375rem;
	}
	#widget-header-second #menu-small-custom-menu,
	ul.social {
		text-align: center;
	}
	ul.tabs {
		padding: 0;
	}
	ul.tabs li {
		display: block;
		float: none;
	}
	ul.tabs li.exhibition {
		border-top: solid 1px #000;
	}
	ul.tabs li a {
		border-left: none;
		padding: 0 15px;
		display: block;
	}
	ul.tabs li.selected:before {
		left: 0;
		top: 6px;
		border-top: 10px solid transparent;
		border-left: 10px solid #000;
		border-bottom: 10px solid transparent;
		margin-left: 0;
	}
	#widget-content-second {
		margin-top: 60px;
	}
	.infographics, .infographics ul li {
		margin-bottom: 20px;
	}

    .longform-story .wp-caption.alignright,
    .wp-caption.alignright {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    .longform-story .wp-caption.alignright {
        margin-right: auto !important;
    }

    .longform-story .wp-caption.alignright .wp-image-container {
        float: none !important;
    }
}



/* --------------------
-----------------------
EXTRA SMALL 
-----------------------
-------------------- */
@media screen and (max-width: 441px) {
	#widget-header-second .search-form {
		width: 100%;
	}
	body.home #content-main .homepage-image .image-title .postTitle h2 {
		font-size: 22px;
		letter-spacing: 1px;
	}
	#umich-events ul li:first-child .image-wrapper {
		height: inherit;
	}
	/* FOOTER */
	#footer-content div {
		float: none;
		display: block;
		margin: 0 auto;
		text-align: center;
	}
	#footer-content div.logo {
		margin-right: 0;
	}
	#footer-content div.copyright ul li {
		display: block;
	}
	#footer-content div.copyright li.arts-jobs a {
		border: none;
		padding-left: 0;
		margin-left: 0;
	}
}