/*
Theme Name: Jack Straw
Theme URI: http://www.drivendevelopment.com/
Description: Custom WordPress theme for Jack Straw Cultural Center.
Author: <a href="http://www.drivendevelopment.com/" target="_blank">Driven Development</a> on behalf of <a href="http://www.the-medium.net/" target="_blank">The Medium</a>
Version: 1.0
*/

@import url(default.css);

a,
.wicked-calendar-container a {text-decoration: underline;}

#container.artist {padding-top: 45px;}

.bx-wrapper img {height: auto; margin: 0 auto;}

.bio-head {margin: 0 0 30px 0; padding: 0 0 30px 0; border-bottom: solid 1px #fad45a; font-size: 0;}
.bio-head > div {display: inline-block; vertical-align: middle;}
.bio-head .photo {max-width: 170px; padding: 0 20px 0 0;}
.bio-head .photo img {display: block; width: 100%; height: auto;}
.bio-head .details {font-size: 16px; line-height: normal;}
.bio-head h1 {font-size: 30px; margin: 0 0 20px 0; color: #000;}

.installation-artist {border-top: 2px solid #F9D459; margin: 30px 0; padding: 30px 0 0 0;}
.installation-artist .photo {float: left; width: 15%; box-sizing: border-box;}
.installation-artist .photo img {display: block; width: 100%; height: auto;}
.installation-artist .bio {float: left; width: 85%; padding: 0 0 0 20px; box-sizing: border-box;}

.podcasts .clip-title {width: 100%;}
.podcasts .clip-title a {text-decoration: none;}
.podcasts .clip-title a:hover {text-decoration: underline;}
.podcasts .podcast p {margin: 0; display: inline;}
.podcast table .image {height: 60px;}

.navigation.categories ul a {padding-left: 60px;}
.navigation.categories ul a:before {left: 40px;}

.search-results .item + .item {margin: 30px 0 0 0; padding: 30px 0 0 0; border-top: solid 1px #ddd;}
.search-results h2 {text-transform: none;}

.program-upcoming-events {font-size: 16px;}
.program-upcoming-events .item + .item {margin-top: 20px;}
.program-upcoming-events p {margin: 0;}

.program-search-results h2 {font-size: 21px; border-bottom: solid 1px #F9D459; margin: 0 0 10px 0; padding: 0 0 5px 0;}
.program-search-results ul {margin: 0 0 40px 0; padding: 0; list-style-type: none; font-size: 21px;}
.program-search-results li {margin: 0 0 15px 0;}

#calendar {margin: 40px 0 0 0;}
#calendar .wicked-header {position: relative; background: #000; color: #F9D459; font-size: 18px; text-transform: uppercase; padding: 20px 0; margin: 0;}
#calendar .wicked-header h1 {margin: 0; font-size: 26px; line-height: 26px;}
#calendar .wicked-header a {color: #F9D459; text-decoration: none;}
#calendar .wicked-view-links {display: none;}
#calendar .wicked-previous-next-nav {margin: 0;}
#calendar .wicked-previous,
#calendar .wicked-next {float: none; width: 100%; text-align: center;}
#calendar .wicked-previous a,
#calendar .wicked-next a {position: absolute; top: 0; left: 0; bottom: 0; width: 40px; font-size: 0; float: none; display: block; line-height: 66px;}
#calendar .wicked-next a {left: auto; right: 0;}
#calendar .wicked-previous a:before,
#calendar .wicked-next a:before {font-family: 'FontAwesome'; content: "\f053"; font-size: 18px;}
#calendar .wicked-next a:before {content: "\f054";}
#calendar .wicked-day-number {text-align: right; font-weight: bold;}

.wicked-popup-mask {background: rgba(0, 0, 0, 0.6);}
.wicked-day-popup .wicked-header {background: #000; color: #F9D459; margin: -20px -20px 20px -20px; padding: 20px 40px 20px 20px;}
.wicked-day-popup .wicked-header h2 {margin: 0; font-size: 18px; line-height: 22px;}
.wicked-day-popup h3 {margin: 0 0 5px 0; font-size: 18px;}
.wicked-popup-close,
.wicked-popup-close:hover {color: #F9D459; text-decoration: none;}

.wicked-event-detail h1 {margin: 0;}
.wicked-event-detail h2 {margin: 0 0 10px 0; font-size: 20px; text-transform: none;}

#breadcrumbs {margin: 0 0 20px 0; font-size: 13px; line-height: 17px; color: #3a3a3a; text-transform: uppercase; border-bottom: solid 1px #fad54d; padding: 0 0 15px 0; font-weight: bold;}
#breadcrumbs a {color: #3a3a3a; text-decoration: underline;}
#breadcrumbs .post {border-bottom: none;}

.thumb-list > div + div {margin-top: 30px; padding-top: 30px; border-top: solid 1px #EBEBEB;}
.thumb-list h4 {margin: 0;}
.thumb-list p {margin: 0 0 10px 0;}
.thumb-list .photo {float: left; width: 20%;}
.thumb-list .photo img {display: block; margin: 0 auto; max-width: 100%; height: auto;}
.thumb-list .content {float: left; width: 80%; padding: 0 0 0 30px; box-sizing: border-box;}

.gallery {margin: 0 -10px; font-size: 0;}
.gallery > div {display: inline-block; vertical-align: top; width: 20%; padding: 0 10px 20px 10px; box-sizing: border-box;}
.gallery img {display: block; width: 100%; height: auto;}

.wp-caption {max-width: 50%;}
.wp-caption img {max-width: 100%; height: auto;}

.wp-caption-text {font-size: 15px; line-height: 19px; font-style: italic;}
.wp-caption-text:last-child {margin: 0;}

input.custom[type="checkbox"] {clip: rect(0px, 0px, 0px, 0px); position: absolute; margin: 0;}
input.custom[type="checkbox"] + label {display: inline-block; position: relative; padding: 0 0 0 20px; font-weight: 700; letter-spacing: 0.025em; font-size: 16px;}
input.custom[type="checkbox"] + label:before {position: absolute; display: block; content: ""; width: 10px; height: 10px; top: 2px; left: 0; border: solid 2px #000;}
input.custom[type="checkbox"]:hover + label:before {background: rgba(0,0,0,0.2);}
input.custom[type="checkbox"]:checked + label:before {background: #000;}

.read-more-container .content {display: none;}

.wp-playlist-tracks {max-height: 218px; overflow: auto;}

.main .people {font-size: 0px; line-height: 0px;}
.main .people .person {float: none; display: inline-block; vertical-align: top;}
.main .people .person .inside {font-size: 15px; line-height: 19px; padding-bottom: 10px;}
.main .people .person .inside p {font-size: 15px; line-height: 19px; margin: 0 0 10px 0;}
.main .people .person .image {margin-bottom: 10px;}
.main .people .person .image img {display: block;}

#program .installation-details {margin: 0 0 40px 0;}
#program .installation-details h3 {margin: 0 0 5px 0; font-size: 21px; line-height: 25px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px;}
#program .installation-details .photo {float: left; width: 50%;}
#program .installation-details .photo img {display: block; max-width: 100%; height: auto;}
#program .installation-details .summary {float: left; width: 50%; box-sizing: border-box; padding: 0 0 0 20px;}

.mfp-container {padding: 20px;}

.dialog {max-width: 800px; margin: 0 auto; position: relative; background: #fff;}

#artist-dialog {padding: 30px;}
#artist-dialog .head {display: table; margin: 0 0 20px 0;}
#artist-dialog .head h2 {margin: 0 0 10px 0; font-size: 25px; line-height: 29px;}
#artist-dialog .head .photo {display: table-cell; width: 150px; vertical-align: middle;}
#artist-dialog .head .photo img {display: block; max-width: 150px; height: auto;}
#artist-dialog .head .meta {display: table-cell; padding: 0 0 0 20px; vertical-align: middle;}
#artist-dialog .button {font-size: 13px; padding: 12px 15px;}

blockquote {margin: 30px 25px; padding: 0 25px; border: solid 10px #e1e1e1; border-width: 0 10px; font-size: 26px; line-height: 30px; font-weight: bold;}
blockquote p {font-size: 26px; line-height: 30px;}
blockquote p:last-child {margin: 0;}

body.page-template-default .banner .text {padding-top: 10px; padding-bottom: 10px;}

.podcast-episodes {margin: 30px 0 !important; padding: 0; list-style-type: none;}
.podcast-episodes h2 {margin: 0 0 10px 0;}
.podcast-episodes li {position: relative; padding: 0 0 0 195px; min-height: 165px;}
.podcast-episodes li + li {margin-top: 30px; padding-top: 30px; border-top: solid 1px #EBEBEB;}
.podcast-episodes li + li .photo {top: 30px;}
.podcast-episodes .photo {position: absolute; top: 0; left: 0; width: 165px;}
.podcast-episodes .photo img {display: block; border-radius: 50%; max-width: 100%; height: auto;}
.podcast-episodes .powerpress_player {margin: 0 0 5px 0;}

.photo-headline {display: flex; align-items: center; margin: 0 0 30px 0;}
.photo-headline .photo {display: block; width: 165px;}
.photo-headline .photo img {max-width: 100%; display: block; border-radius: 50%; height: auto;}
.photo-headline h1 {margin: 0; padding: 0 0 0 20px;}

.main .sounds.all {font-size: 0;}
.main .sounds.all li {float: none; display: inline-block; vertical-align: top;}
.main .sounds.all span.title {font-size: 20px;}
.main .sounds.all span.author {font-size: 14px;}
.main .sounds.all span.author a {text-decoration: none;}
.main .sounds.all span.author a:focus,
.main .sounds.all span.author a:hover {text-decoration: underline;}
.main .sounds.all .date {font-size: 12px; text-align: center;}
.main .sounds.all span.title a {text-decoration: none;}
.main .sounds.all span.title a:focus,
.main .sounds.all span.title a:hover {text-decoration: underline;}
.main .sounds.featured span.title a {color: #fff; text-decoration: none;}
.main .sounds.featured span.title a:focus,
.main .sounds.featured span.title a:hover {text-decoration: underline;}

.people .sounds.all span.title {font-size: 15px; line-height: 19px;}

.main .search .keyword-search {width: 100%; max-width: 700px;}

.home-current-events .item + .item {margin-top: 30px;}

#header .social-media {display: inline-flex;}
#header .social-media a {display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #F9D459;}
#header .social-media a .fa {display: block; width: 30px; height: 30px; font-size: 21px; line-height: 30px; text-align: center; background: #f9d459; color: #171b1c; border-radius: 15px;}
#header .social-media a:hover .fa {background: #E6B746;}
#header .social-media a svg path,
#header .social-media a:hover svg path,
#header .social-media a:focus svg path {fill: #000;}
#header .social-media a svg {width: auto; height: 20px;}
#header .social-media a:focus,
#header .social-media a:hover {background: #E6B746;}

#header .navigation .menu-search {display: none;}

#footer .navigation li.icon span.fa {font-size: 20px; text-indent: 4px; margin-right: 5px; vertical-align: middle;}

.pagination .page-numbers {padding: 0 4px; width: auto; min-width: 30px;}
.pagination .page-numbers.current {background: #f9d459; color: #333;}

.search-tabs {display: flex; border-bottom: solid 1px #f9d459; margin: 0 0 40px 0; font-size: 14px; line-height: 20px; font-weight: bold; text-transform: uppercase;}
.search-tabs > div {display: flex; background: #F9D459; color: #333;}
.search-tabs a {background: #fff; color: #333; text-decoration: none;}
.search-tabs .text {display: block; padding: 10px 20px;}

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

    .carousel .caption .text a {color: #000;}

}

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

    .carousel .caption .text a {color: #000;}

}

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

    #header .sub-menu {padding: 0 0 0 15px;}

}

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

    #header .navigation .menu-search {display: block; padding: 0 20px 20px 20px;}
    #header .navigation .menu-search .search {max-width: 100%; width: 100%; display: block;}

}

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

    .gallery > div {width: 25%;}

    #program .installation-details .photo,
    #program .installation-details .summary {float: none; width: 100%; padding: 0;}
    #program .installation-details .summary {padding: 20px 0 0 0;}

    #artist-dialog .head,
    #artist-dialog .head .photo,
    #artist-dialog .head .meta {display: block; padding: 0; width: 100%;}
    #artist-dialog .head .photo {margin: 0 0 10px 0;}

    .podcast-episodes .photo,
    .podcast-episodes li + li .photo {position: relative; top: auto; left: auto; margin: 0 auto 20px auto;}
    .podcast-episodes li {padding-left: 0;}

}

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

    #calendar .wicked-header h1 {font-size: 18px;}

    .alignright,
    .alignleft {float: none; max-width: 100%; margin: 0 0 20px 0;}

}

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

    .gallery > div {width: 33.3333%;}

}