@charset "UTF-8";
/*
==========================================================================================
BROOKLYN PUBLIC LIBRARY | 2015-2016 - flat.com
==========================================================================================
==========================================================================================
NOTES:



==========================================================================================

==========================================================================================
*/

@media only screen and (max-width:1280px) {
	.carousel-informational .carousel .carousel-cell:hover .inner-wrap .more-info {display:block}
	#carousel-lr .carousel .carousel-cell:hover .img-caption,
	.lr.carousel-informational .carousel .carousel-cell:hover .img-caption {display:none}
	#carousel-lr .carousel .carousel-cell:hover img,
	.lr.carousel-informational .carousel .carousel-cell:hover img{opacity:1 !important}
	.carousel-cell .inner-wrap .more-info {padding: 10px 15px;}
	#HEADER-TITLE h1 {font-size: 38px;line-height: 1.1;}
	#HEADER-TITLE .breadcrumb .btn {padding: 8px 15px; min-height: auto;}
}

@media only screen and (max-width:1200px) {
	.quartet .span-3 {width:100%}

	.sr-song {
		background: #FFF3E6 !important;
	}
	.sr-song h3 {
		max-width: 100%;
	}

	.sr-song .lyrics {
		background: #fffc;
		max-width: 100%;
		width: max-content;
		padding: 15px;
	}
}

/* Desktop Utilities */
@media only screen and (min-width:769px) {
	.hide-desktop, .mobile-only {
		display: none;
		}
}


/*	TABLETS
	=================================================================================== */
@media only screen and (max-width:768px) {

/* Desktop Utilities */
	.hide-mobile { display: none; }
	.mobile-only { display: block; }
	.mobile-only.inline { display: inline; }

	#body, #bodymask {
		position: relative;
		}
	#bodyfog, #drawer {
		display: none !important;
		}
	#bodynav {
		display: none;
		width: 100%;
		}
	#bodymodal {
		height: 100%;
		padding-bottom: 20px;
		/*overflow-y: scroll;*/ /*  was causing extra scrollbar for google search results */
		}

/* Search Modal  */
	.container, #SEARCH-WRAPPER {
		padding-left: 15px;
		padding-right: 15px;
		}
	#SEARCH-WRAPPER {
		padding-right: 0px;
		}
	#SITE-SEARCH button[role="search-submit"] {
		right: 0px;
		}
	#SITE-SEARCH-CLOSE {
		font-size: 16px;
		}

/* Navigation Drawer  */
	body.drawer-open #bodynav {
		background: white;
		display: block;
		height: auto;
		min-height: 0;
		position: absolute;
		top: 56px;
		}
	body.drawer-open.alert-open #bodynav {
		top: 65px;
		}
	body.drawer-open #bodynav .branding {
		display: none;
		}
	body.drawer-open #bodynav li {
		display: inline-block;
		width: 19%;
		}
	body.drawer-open #bodynav li a {
		color: #000;
		padding: 14px 2px 14px;
		margin-bottom: 0;
		text-align: center;
		}
	body.drawer-open #bodynav li a.active {
		position: relative;
		}
	.nav-main.menu-main li {
		font-size: 16px;
	}
	.nav-main.menu-main > li a span {
		position: static;
		}

	.nav-main.menu-main .icon-attend { font-size: 23px; }
	.nav-main.menu-main .icon-borrow { font-size: 20px; }
	.nav-main.menu-main .icon-learn, .nav-main.menu-main .icon-microphone { font-size: 21px; }
	.nav-main.menu-main .icon-ellipsis { font-size: 7px;}

	body.drawer-open #bodynav li a.active::after {
		border-left: 9px solid transparent;
		border-right: 9px solid transparent;
		border-top: 9px solid #FFF;
		content: '';
		height: 0;
		left: 50%;
		margin-left: -9px;
		position: absolute;
		top: 100%;
		width: 0;
		}
	body.drawer-open #bodynav li a:hover {
		color: #000;
		}
	body.drawer-open #bodynav li a > .icon.icon-svg {
		-webkit-filter: grayscale(1) brightness(0.20) contrast(1.00);
		margin: 0 auto;
		}
	.icon-logo:before,
	.icon-logo-125-horz {
		color: #fff;
		}
	body.drawer-open .nav-main li.nav-more a {
		opacity: 1;
		}
	body.drawer-open { /* NOTE: this can probably be removed, since the effect was moved to #body as a translate() */
		margin-left: 0;
		}
	body.drawer-open #body {
		-ms-transform: translate(0px,0px);
		-webkit-transform: translate(0px,0px);
		transform: translate(0px,0px);
		}
	body.drawer-open #drawer {
		display: block !important;
		}
	body.drawer-open #drawer>nav header {
		display: none;
		}
	body.drawer-open #bodynav {
		display: block;
		}
	body.drawer-open #GLOBAL-navigation-sub {
		left: 0;
		margin-top: 0;
		}
	body.drawer-open #drawer .branding {
		display: none;
		}
	body.drawer-open #drawer .close {
		display: block;
		top: 95px;
		right: 10px;
		}
	#drawer, body.drawer-open #drawer {
		position: absolute;
		top: 60px;
		min-height: 480px;
		height: 80%;
		height: calc(100% - 6px);
		min-width: 100%;
		width: 100%;
		padding-top: 0px;
    	overflow-y: scroll;
    	background-color: #fafafa;
		}
	#drawer>nav {
		margin-left: 20px;
		margin-right: 20px;
		top: 125px;
		width: auto;
		width: calc(100% - 20px);
		/*
		height: auto;
		height: calc(100% - 60px);
		*/
		}
	body.drawer-open #GLOBAL-navigation-sub {
		min-height: auto;
		height: 70%;
		height: calc(100% - 205px);
		}

/* Header Elements */
	#HEADER-CAROUSEL, #HEADER-CONTENT {
		padding-left: 15px;
		}
	#HEADER-IMAGE, #HEADER-TITLE {
		position: relative;
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		left: 0;
		}
	#HEADER #HEADER-IMAGE {
		position: absolute;
		top: 0px;
		z-index: -1;
		padding-bottom: 33.333%;
		overflow: hidden;
		}
	#HEADER #HEADER-TITLE {
		position: relative;
		bottom: 0px;
		z-index: 0;
		margin: 0px 0px;
		padding-top: 20px;
		min-height: 120px;
		width: 100%;
		}
	#HEADER #HEADER-TITLE > .row:first-child {

		}
	#HEADER-TITLE .btn.btn-primary {
    	margin-bottom: 15px;
		}
	#HEADER #HEADER-TITLE h1 {
		/* line-height: 50px; */
		line-height: 1.2;
		}
	/* #HEADER #HEADER-TITLE p.lead {
		display: none;
		} */
	.node-type-press-release #HEADER #HEADER-TITLE .title {display: none;}
	.node-type-press-release #HEADER #HEADER-TITLE p.lead {display: block;}
	#HEADER #HEADER-TITLE .meta {
	    line-height: 22px;
		}
	#HEADER .mobile-nav-trigger {
		background: url('../img/icon-mobile-toggle-nav.png') no-repeat;
		content: '';
		cursor: pointer;
		height: 15px;
		left: 18px;
		position: relative;
		top: 18px;
		z-index: 1;
		order: 1;
		flex-basis: 20px;
		flex-shrink: 0;
	}
	/*
	#HEADER .mobile-nav-trigger.close-btn
	*/
	body.drawer-open #HEADER .mobile-nav-trigger {
		background: transparent url(../img/icon-modal-close.png) no-repeat center center;
		background-size: 100%;
		}
	#HEADER .carousel-wrapper {
		margin-top: 30px;
		}

	.branding {
		height: auto;
		position: relative;
		top: 12px;
	}

	.branding .icon-logo, .branding .icon-logo-125-horz {
		font-size: 30px;
		position: relative;
		top: 2px;
		left: 10px;
	}

	body.drawer-open .branding .icon-logo-125-horz {
		color: #fff;
        opacity: 1;
	}

	.branding .icon-logo-125-horz {
		left: 0;
	}

	.branding.scrolled .icon-logo, body.drawer-open .branding .icon-logo, .branding .icon-logo-125-horz  {
		opacity: 1;
	}

	#CONTENT {
    	padding-top: 0px;
		}
	#CONTENT .container.page-list {
		margin-top: 15px;
		margin-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		position: relative;
		top: 0px;
		bottom: 0px;
		}

	#CONTENT .container.page-list ul {
		border: none;
		clear: both;
    	position: static;
		width: 100%;
		}

	.page-filters li.show-menu div.dropdown {
		border: none;
		border-bottom: 3px solid #fff;
		}

	#CONTENT .container.page-list ul>li,
	#CONTENT .container ul.page-tabs li.title-tab,
	ul.page-tabs li {
		width: 100%;
		float: none;
		display: block;
		clear: both;
		border: none;
		}
	#CONTENT .container.page-list ul li a,
	#CONTENT .container ul.page-tabs li a {
		border: none;
		border-bottom: 3px solid #fff;
		}

	.carousel-wrapper .list-horizontal .selected::before{bottom:0px;height:2px;}
	.carousel-cell .img-caption .img-title, .promo h3.img-title {font-size:18px; line-height:1.1 !important}
	.nav-tabs .labels a {padding: 10px; font-size: 14px}

	.full-width-module .btn.btn-primary {
		display: none;
	}

	.grid2x2 {
		flex-direction: column;
	}

	.grid2x2 .contain {
		margin: 10px 0px 10px;
	}

	#play-pause,
	#HEADER-IMAGE #video-background {display:none}

}

/*	SMALLER SCREENS
	=================================================================================== */
@media only screen and (max-width:568px) {
	input[type="submit"] {
		width: 100%;
		padding: 15px;
		font-size: 18px;
	}
}

@media only screen and (min-width:569px) {}

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

	.nav-main.menu-main span[class^="icon"] {
		display: block;
	}

	.nav-main.menu-main .icon-microphone { display: inline-block !important; }

	.nav-main.menu-main .icon-ellipsis { margin-right: 2px; }

}

/*	MOBILE DEVICES
	=================================================================================== */
@media only screen and (min-width:320px) and (max-width:480px) and (orientation:landscape),
  only screen and (min-width:320px) and (max-width:568px) and (orientation:landscape) {
	body {
		font-size: 12px;
	}
}

@media only screen and (min-width:320px) and (max-width:480px) and (orientation:portrait),
  only screen and (min-width:320px) and (max-width:568px) and (orientation:portrait) {

	.nav-main.menu-main .icon-attend { font-size: 23px; }
	.nav-main.menu-main .icon-borrow { font-size: 20px; }
	.nav-main.menu-main .icon-learn, .nav-main.menu-main .icon-microphone { font-size: 21px; }
	.nav-main.menu-main .icon-ellipsis { font-size: 7px;}

	#HEADER #UTILITIES .locmenu .location-dropdown {
		width: 190px;
	}
	#HEADER #UTILITIES .search {
		flex-basis: 50px;
	}
	#HEADER #UTILITIES .avatar {
		flex-basis: 50px;
	}
	#HEADER #UTILITIES .location {
		flex-basis: 50px;
	}
	#HEADER #UTILITIES .translate-widget {
		flex-basis: 50px;
	}

	/* blog mobile */
	.view-blog-archive .views-field p.lead,
	.view-blog-archive .views-field .btn {
		display:none
	}


	.carousel-cell .img-caption {
		bottom: 30px;
		left: 5px;
	}

	.carousel-cell .img-caption .img-title {
		line-height: inherit;
	}

	.carousel-cell .inner-wrap .more-info {
		padding: 10px 14px;
	}

}