@charset "UTF-8";
@font-face{
  font-family:"PT Serif W01 Regular";
  src:url("../fonts/daff771d-ed12-4f77-b628-5ce88849ccf3.woff2") format("woff2"),url("../fonts/7b473b97-65f7-4000-b120-dd06b5fdad35.woff") format("woff");
}

:root { --serif: "PT Serif W01 Regular"; }

html {height: 101%; margin: 0; padding: 0; min-height: 101%;}
body {font-family: var(--serif); font-weight: normal; font-size: 90%; font-style: normal; margin: 0; padding: 0; height: 100%; position: relative; overflow-x: hidden; background: #fff; min-height: 101%;}

hr {width: 100%; height: 1px;	background: #ccc;	border: none;	margin: 10px auto; clear: both;}

img {display: block; margin: 0;	outline: none; padding: 0; vertical-align: bottom; max-width: 100%; width: auto;}
img.seecmsimagedefault, img.seecmsimagedefaultundefined {display: inline-block; margin: 0 0 20px 0!important;}
img.seecmsimageleft, img.seecmsimageleftundefined {float: left; margin: 0 20px 20px 0!important;}
img.seecmsimageright, img.seecmsimagerightundefined {float: right; margin: 0 0 20px 20px!important;}
img.seecmsimagecentre, img.seecmsimagecentreundefined {display: block; margin: 0 auto;}

p, h1, h2, h3, h4, li {margin: 0; padding: 0; line-height: 140%; color: #000; font-style: normal; font-weight: normal;}
p {padding: 0 0 20px 0;}
ul, ol {margin: 0 0 20px 20px; padding: 0;}
li p {padding: 0;}
li li, li p {font-size: 100%;}
strong {font-weight: bold;}
a {color: #e52820; text-decoration: underline; cursor:pointer;}
a:hover {text-decoration: underline;}
a img {border: none; outline: none;}
* {-webkit-print-color-adjust: exact;}
label {color: #000;	font-size: 100%;}
sup {font-size: 70%; line-height: 110%; padding: 0 0 10px 0; margin: 0;	font-weight: normal; color: #000;}

p.seeformerrors {color: red;}

.col1, .col2, .col3, .col4, .left, .right {display: block; float: left;	min-height: 5px;}

div:after, form:after, ul:after, input:after, section:after, article:after, header:after, footer:after, nav:after, aside:after, hgroup:after {clear:both;	content:"";	display:block; height:0; visibility:hidden;}
section, article, header, footer, nav, aside, hgroup {display: block;}

table {width: 100%;	margin: 0 0 20px 0;	border: 0!important; border-collapse: separate!important;	border-spacing: 2px!important; font-size: 90%;}
table th {padding: 10px; font-size: 100%; color: #fff; background: #000;	font-weight: normal;	border-collapse: separate!important; text-align: left; border: 0!important;	border-spacing: 2px!important;}
table td {padding: 10px; font-size: 100%; color: #000; font-weight: normal; border-collapse: separate!important; text-align: left; border: 0!important; border-spacing: 2px!important;}
table th p, table td p {font-size: 100%; padding: 0; color: #fff;}
table td p{ color: #000; }
table th a {color: #fff!important;}

input[type="text"], input[type="password"], input[type="email"], textarea, select, button {width: 100%;	padding: 0 10px; box-sizing: border-box; height: 40px; background: #fff; border: 1px solid #ccc; margin: 5px 0 15px 0; outline: none;	resize: none;	font-family: var(--serif); font-weight: normal; font-size: 100%;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #000;}
textarea {height: 130px; padding: 10px;}
input[type="checkbox"]{width: 15px;	height: 15px;	float: left; margin: 0 10px 0 0;}
input[type="text"], input[type="submit"], textarea, button, input[type="password"], input[type="button"], select {-webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0;}
input[type="submit"], button, input[type="button"] {cursor: pointer;	width: auto; outline: none;	border: none;	text-transform: none;	background: #000;	padding: 0 20px; height: 40px; color: #fff; font-size: 100%; font-family: Arial, sans-serif; font-weight: normal; border-radius: 0;}

.slick-slide {outline: none!important;}
.cmsform p {padding: 0;}
.cmsform p.fieldname {padding: 0 0 5px 0;}
.cmsform p.fieldoption {padding: 0 0 20px 0;}
.cmsform p.fieldoption .notes {font-style: italic;}
.cmsform input, .cmsform select, .cmsform textarea {margin: 0 0 5px 0;}
.cmsform input[type="checkbox"] {margin: 0 10px 0 0;}
.cmsform input[type="submit"]{margin: 15px 0;}
.cmsform .errors p {color: red!important;	padding: 0 0 20px 0;}
.cmsform span.error {color: red!important; float: right;}

.searchresult h3 img {width: auto; float: left; display: inline-block; margin: 0 10px 0 0;}

.clear {clear: both;}

.sitemap ul ul {margin: 0 0 0 20px;}

h1 {color: #e52820; font-weight: 500; padding: 0 0 40px 0; font-family: "futura-pt-n5", "futura-pt", arial, serif;}
h2 {color: #e52820; font-family: "futura-pt-n5", "futura-pt", arial, serif;}
h3 {color: #e52820; font-weight: 500; padding: 0 0 10px 0; font-family: "futura-pt-n5", "futura-pt", arial, serif;}
h4 {}

.form .row.thirds, .form .row.halves {width: 102%; margin-left: -2%;}
.form .row.thirds .input {float: left; width: 31.3%; margin: 0 0 0 2%;}
.form .row.halves .input {float: left; width: 48%; margin: 0 0 0 2%;}

#mc_embed_signup form { padding: 0!important; }

.urgentmessage-wrap {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99999; }
.urgentmessage {position: absolute; z-index: 40; top: 50%; left: 50%; transform: translate(-50%,-50%); background: white; border-radius: 12px; max-height: 100vh; overflow-y: scroll; width: 85%; max-width: 960px;}
.urgentmessage .inner { padding: 20px 40px; }
.urgentmessage .inner p.closepopup { display: inline-block; }
.urgentmessage .inner p.closepopup a{ display: block; background: #ff251a; color: #fff; padding: 8px 16px; cursor: pointer; text-decoration: none;}
.urgentmessage-wrap .blackoverlay { background: black; opacity: 0.8;  width: 100%; height: 100%; position: fixed;}

.header-wrap {padding: 0 20px;}
.header {width: 100%; max-width: 960px; margin: 0 auto; padding: 45px 0 33px 0;}
.header .logo {width: 220px; height:65px; display: block;}
.header .col1 {width: 288px;}
.header .col2 {width: 288px; padding: 7px 96px 0 0;}
.header .col2 .openingtimes {padding: 0 0 0 0;}
.header .col2 p {padding-bottom: 10px;}
.header .col2 .phone a {font-size: 140%; color: #e52820; font-weight: 400; font-family: "futura-pt-n5", "futura-pt", arial, serif; text-decoration: none;}
.header .col2 .searchbox .input input[type="text"] {float: left; width: 230px; font-size: 80%; border: none; background: #ededed; padding: 5px 10px; height: auto; margin: 0; color: #1d1d1b;height: 24px;}
.header .col2 .searchbox input[type="submit"] {float: left; background: #e52820; padding: 5px;width: 38px;border: none;height: 24px;text-align: center;color: #fff; font-size: 80%;}
.header .col3 {width: 288px; padding: 7px 0 0 0;}
.header .col3 p {padding-bottom: 10px;}
.header .col3 h2 {color: #e52820; font-size: 100%; font-weight: 500; padding-bottom: 10px; font-family: "futura-pt-n5", "futura-pt", arial, serif;}
.header .col3 h2 a{text-decoration: none;}
.header .col3 p.blockbutton { display: inline-block; }
.header .col3 p.blockbutton a { display: block; padding: 5px 10px; background: #ffffff; border: 2px solid #e0001b; text-decoration: none; font-size: 140%;font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500; }
.header .col3 p.blockbutton a:hover { background: #e0001b; border: 2px solid #ffffff; color: #ffffff; }
.header .col3 .newsletter .input input[type="text"] {float: left; width: 230px; font-size: 80%; border: none; background: #ededed; padding: 5px 10px; height: auto; margin: 0; color:#1d1d1b;height: 24px; }
.header .col3 .newsletter input[type="submit"] {float: left; background: #e52820; padding: 5px;width: 38px;border: none;height: 24px;text-align: center;color: #fff; font-size: 80%;}

.nav-wrap {padding: 0 20px;}
.nav {width: 100%; max-width: 960px; margin: 0 auto; margin-bottom: 35px; border: 1px solid #000;}
.nav ul {margin: 0; padding: 0; width: 100%; display: table;}
.nav li {list-style: none; display: table-cell; text-align: center; vertical-align: middle; border: 1px solid #000000; position: relative; font-weight: 500; font-family: "futura-pt-n5", "futura-pt", arial, serif; width: 190px;}
.nav li.selected, .nav li:hover {background-color: #e52820;}
.nav li a {text-align: center; text-decoration: none; color: #e52820; font-size: 140%; display: block; font-family: "futura-pt-n5", "futura-pt", arial, serif; height: 33px; line-height: 33px;}
.nav li.selected a, .nav li:hover a {color: #ffffff;}
.nav li:hover .popupsubpages {display: block;}

.popupsubpages {display: none;}
.subpages {position: absolute; padding-top: 0; z-index: 99999999999; border: 2px solid #000000; left: -2px; }
.subpages li {display: block; border: 1px solid #ededed; background: #ffffff; width: 188px;}
.subpages li a {color: #000000!important; font-size: 120%;}
.subpages li:hover a {color: #ffffff!important;}
.subpages li.selected a {color: #ffffff!important;}

.mobile-nav{display: none;}

.banner-wrap {position: relative;}
.upandcomingbtn {position: absolute; bottom: 25px; right: -170px; width: 150px;}
.upandcomingbtn img {float: left; padding-right: 10px;}
.upandcomingbtn .bannerblockbutton:hover a {text-decoration: underline;}
.upandcomingbtn .bannerblockbutton a {text-decoration: none; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500; font-size: 120%;}

button.slick-prev.slick-arrow { text-indent: -9999em; position: absolute; left: 0; height: 100%; top: 0; background-color: rgba(255,255,255,0.7); background-image: url('../images/prev.png'); background-repeat: no-repeat; background-position: center center; z-index: 999; margin: 0; width: 40px;}
button.slick-next.slick-arrow { text-indent: -9999em; position: absolute; right: 0; height: 100%; top: 0; background-color: rgba(255,255,255,0.7); background-image: url('../images/next.png'); z-index: 999; margin: 0; width: 40px; background-repeat: no-repeat; background-position: center center;}

.banner-wrap {margin: 0 0 35px 0;}
.banner {width: 960px; height: 420px; display: block; position: relative; z-index: 1;}
.banner img {width: 462px; float: left; padding-right: 36px; }
.banner img.image2 {padding-right: 0;}
.banner .fullwidth img{width: 960px;}
.banner .mobile {display: none;}

.upandcoming {border: 2px solid #e94f1b; position: relative;}
.upandcoming h2{padding: 10px 0 10px 41px; color: #e94f1b; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500;}
.upandcoming .tab {}
.upandcoming .innertab {}
.shows.desktop {padding: 1px 40px 36px 41px;}
.exhibition {display: block; float: left; width: 280px; margin: 0 9px 9px 0; height: 370px; position: relative; overflow: hidden;}
.exhibition img {width: 100%;}
.exhibition .overlay {position: absolute; background: rgba(255,255,255,0.8); bottom: 0; left: 0; width: 100%; height: 137px; box-sizing: border-box; padding: 10px; }
.exhibition .overlay h2 {padding: 0; color: #e52820; font-weight: 700; font-size: 140%}
.exhibition .overlay .blockbutton {margin-top: 25px;}
.exhibition .overlay a {display: block; padding: 5px 10px; background: #ffffff; border: 2px solid #cccccc; text-decoration: none; font-size: 140%; position: absolute; bottom: 10px; right: 10px; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500; margin-top: 25px; }

.interests {width: 101%; margin: 0 -1% 0 0;}
.interests p.title {color: #000; padding: 50px 0; font-weight: 500; font-size: 200%; font-family: "futura-pt-n5", "futura-pt", arial, serif;
    font-weight: 500;}
.interested {width: 442px; margin: 0 1% 0 0; padding: 15px; background: #f9ccd1; float: left; position: relative;}
.interested .col1 {width: 145px; padding-right: 15px;}
.interested .col2 {width: 278px;}
.interested .col2 h2 {font-size: 200%; line-height: 100%; padding: 0 50px 10px 0; border-bottom: 2px solid #fff; margin: 0 0 10px 0; color: #e0001b;}
.interested .col2 p {padding: 0; font-size: 100%; }
.interested .col2 .blockbutton {margin-top: 30px;}
.interested .col2 .blockbutton a {display: block; padding: 5px 10px; background: #ffffff; border: 2px solid #e0001b; text-decoration: none; font-size: 140%; position: absolute; bottom: 10px; right: 10px;     font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500;}

.content-wrap {padding: 0 20px;}
.content {width: 100%; max-width: 960px; margin: 0 auto;}

.content .left {width: 172px; padding: 0 20px 5px 0;}
.content .right {width: 667px; padding: 0;}

.whatson .content .left .topcalendarcategory {display: none;}

.eventsList h2 {padding: 0 0 20px 0; font-size: 200%;}
.eventsList > h2:before {content: "What's On | "; color: #000; }
.eventsList .slide {margin: 0 0 20px 0;}
.eventsList .slide .feature {width: 595px; padding: 15px;}
.eventsList .slide .feature .col1 {width: 190px; padding: 0 15px 0 0;}
.eventsList .slide .feature .col2 {width: 369px;}
.eventsList .slide .feature .col2 p {padding: 0; font-size: 100%;}
.eventsList .slide .feature .col2 h2 {font-size: 160%; line-height: 100%; padding: 0 50px 10px 0; border-bottom: 2px solid #fff; margin: 0 0 10px 0;}
.eventsList .slide .feature a {display: block; float: right; padding: 5px 10px; background: #ffffff; border: 2px solid #e52820; text-decoration: none; font-size: 140%; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500;}

.whatson .content .left {width: 624px; padding: 0 49px 0 0;}
.whatson .content .left .mobile {display: none;}
.whatson .content .right {width: 287px; padding: 0;}
.whatson .content .left h1 {padding: 0 0 30px 0; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500;}
.whatson .content .left h1 span {color: #000000; }
.whatson .content .left h1 span.verticalline {color: #c7c7c6;}
.whatson .event {width: 595px; padding: 15px; margin: 0 0 20px 0; background: #feefe5;}
.whatson .event .left {width: 190px; padding: 0 15px 0 0;}
.whatson .event .right {width: 369px; position: relative;}
.whatson .event .right p {padding: 0;}
.whatson .event .right h2 {font-size: 160%; padding: 0 0 10px 0!important; border-bottom: 2px solid #fff; margin: 0 0 10px 0;}
.whatson .event .right .blockbutton {padding: 0; float: right; margin: 10px 0 0 0;}
.whatson .event .right a {display: block; padding: 5px 10px; background: #ffffff; border: 2px solid #e52820; text-decoration: none; font-size: 140%; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500;}

.eventsList .slide .feature.Workshops {background: #f5f8eb;}
.eventsList .slide .feature.Workshops a {border: 2px solid #80bd26; color: #80bd26;}
.eventsList .slide .feature.Comedy {background:#feefe5;}
.eventsList .slide .feature.Comedy a {border: 2px solid #e0001b; color: #e0001b;}
.eventsList .slide .feature.Cabaret {background: #eaeef9;}
.eventsList .slide .feature.Cabaret a {border: 2px solid #1c62b0; color: #1c62b0;}
.eventsList .slide .feature.Theatre {background:#fef5f3;}
.eventsList .slide .feature.Theatre a {border: 2px solid #e52820; color: #e52820;}
.eventsList .slide .feature.Family {background:#fdecf5;}
.eventsList .slide .feature.Family a {border: 2px solid #de007b; color: #de007b;}
.eventsList .slide .feature.Music {background:#e6ebe4;}
.eventsList .slide .feature.Music a {border: 2px solid #006633; color: #006633;}
.eventsList .slide .feature.Workshops h2 {color: #80bd26;}
.eventsList .slide .feature.Comedy h2 {color: #e0001b;}
.eventsList .slide .feature.Theatre h2 {color: #e52820;}
.eventsList .slide .feature.Family h2 {color: #de007b;}
.eventsList .slide .feature.Music h2 {color: #006633;}

.whatson .content .right h2, .whatson .content .mobile h2 {padding: 0 0 30px 0; color: #000000;}
/* .calendar { padding: 0 0 20px 0; border-bottom: 2px solid #c7c7c6; margin: 0 0 20px 0; position: relative;;}
.calendar a .prevcalendar {position: absolute; left: 0; top: 60px;}
.calendar p {padding: 0 0 10px 0; text-align: center; color: #e52820; font-weight: 700; font-family: "futura-pt-n7", "futura-pt", arial, serif;}
.calendar a .nextcalendar {position: absolute; right: 0; top: 60px;}
.calendar .days {margin-bottom: 150px;}
.calendar .days div {float: left; width: 41px; text-align: center; font-family: "futura-pt-n7", "futura-pt", arial, serif; font-weight: 700; padding: 5px 0; color: #e52820;} */

.calendar {border-bottom: 2px solid #c7c7c6; margin-bottom: 20px; max-width: 300px;}
.ticketsolvecalendar {width: 100%;}
.ticketsolvecalendar .month {}
.ticketsolvecalendar .month .prev, .ticketsolvecalendar .month .next {color: transparent;}
.ticketsolvecalendar .month .calendarmonth {text-align: center; width: 167px; float: left; color: #e52820; font-family: "futura-pt-n7", "futura-pt", arial, serif; font-weight: 700;}
.ticketsolvecalendar .month .prev {float: left; width: 32px; height: 23px; background: url(../images/prev-calendar.png) no-repeat 0 0; margin: 0 14px;}
.ticketsolvecalendar .month .prev.disabled {background: none;}
.ticketsolvecalendar .month .next {float: right; width: 32px; height: 23px; background: url(../images/next-calendar.png) no-repeat 0 0; margin: 0 14px;}
.ticketsolvecalendar .days div {float: left; width: 41px; text-align: center; font-family: "futura-pt-n7", "futura-pt", arial, serif; font-weight: 700; padding: 5px 0; color: #e52820;}
.ticketsolvecalendar .dates div {float: left; width: 41px; text-align: center; font-family: "futura-pt-n7", "futura-pt", arial, serif;font-weight: 700; padding: 5px 0;}
.ticketsolvecalendar .dates div.current  {color: #fff; background: #ff251a; cursor: pointer;  }


.categories .blockcategory {padding: 0; position: relative;}
.categories .blockcategory a {display: block; color: #ffffff; height: 45px; line-height: 45px; font-size: 140%; margin: 0 0 10px; padding: 0 0 0 16px; text-decoration: none; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500;}
.categories .blockcategory a:hover{text-decoration: underline;}
.categories .blockcategory img {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.categories .blockcategory.all a {color: #e52820;}
.categories .blockcategory.work a {background: #80bd26;}
.categories .blockcategory.comedy a {background: #e0001b;}
.categories .blockcategory.cabaret a {background: #1c62b0;}
.categories .blockcategory.theatre a {background: #e52820;}
.categories .blockcategory.family a {background: #de007b;}
.categories .blockcategory.music a {background: #006633; }

.currentexhibition {width: 100%;}
.currentexhibition .column {float: left; width: 430px; padding: 0 50px 0 0;}
.currentexhibition .column .pics {width: 448px; position: relative;}
.currentexhibition .column .pics img {width: 100%;}
.currentexhibition .column .pics .blockbutton {padding: 0 ;}
.currentexhibition .column .pics .blockbutton a {position: absolute; bottom: 10px; left: 10px; background: #ffffff; display: block; padding: 5px 10px; font-weight: 700; text-decoration: none; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500; font-size: 120%;}

.currentexhibition .column .morepics {float: left;}
.currentexhibition .column a.thumb{width: 94px; margin: 18px 13px 18px 0; float: left; }
.currentexhibition .column a img {width: 94px;}
.exhibitiondetails h1, .exhibitiondetails h2, .exhibitiondetails p{color: #000000;}
.exhibitiondetails h1 { font-size: 180%; padding: 0 0 10px 0;}
.exhibitiondetails h2 { padding: 0 0 10px 0;}
.exhibitiondetails p {padding: 0 0 10px 0;}
.exhibitiondetails .purchase {padding: 0 0 20px 0;}
.exhibitiondetails .purchase a {text-decoration: none; font-style: italic; font-weight: 700;}
.exhibitiondetails .purchase a:hover {text-decoration: underline;}
.exhibitiondetails .blockbutton {float: left;}
.exhibitiondetails .blockbutton a{display: block; padding: 5px 10px; background: #ffffff; border: 2px solid #501c80; text-decoration: none; font-size: 140%; color: #501c80; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500;}

.currentexhibition .title-wrap .title h1 {color:#000000;}
.title-wrap .title h1 {font-weight: 500; padding: 0 0 10px 0; color: #e52820;}

.snav ul {margin: 0;}
.snav li {list-style-type: none; padding: 0 0 10px 0;}
.snav li a {color: #000000; text-decoration: none;}
.snav li:hover a {text-decoration: underline;}
.snav ul li.selected a {color: #e52820;}
.bottom-snav {display: none;}

.footer-wrap {padding: 0 20px;}
.footer {width: 100%; max-width: 960px; margin: 65px auto 20px auto; padding: 50px 0 20px 0; background: #fafafa;}
.footer p {padding-bottom: 10px;}
.footer .col1 {width: 362px; padding: 0 78px 0 40px;}
.footer .col1 h2, .footer .col2 h2, .footer .col3 h2, .footer .col4 h2 {color: #e52820; font-weight: 700; padding-bottom: 10px;}
.footer .col1 .left {width: 150px; padding: 0 20px 0 0; height: 132px; position: relative;}
.footer .col1 .right {width: 192px; padding: 0;}
.footer .col2 p a, .footer .col3 p a, .footer .col4 p a {text-decoration: none; color: #000000;}
.footer .col2 p:hover a, .footer .col3 p:hover a, .footer .col4 p:hover a {text-decoration: underline;}
.footer .col2 {width: 128px; padding: 0 40px 0 0;}
.footer .col3 {width: 128px; padding: 0 40px 0 0;}
.footer .col4 {width: 104px; padding: 0;}

.bottomfooter {position: relative; padding: 0 0 0 40px;}
.bottomfooter .left {width: 776px; padding: 0;}
.bottomfooter .left p {font-size: 70%; padding: 0 0 2px 0;}
.bottomfooter .left p a {color: #000000; text-decoration: none;}
.bottomfooter .left p a:hover {text-decoration: underline;}
.bottomfooter .right {float: left; width: 130px; padding: 0; position: relative;}
.bottomfooter .right i {border-radius: 50%; background: #000000; color: #ffffff; width: 22px; height: 17px; margin-right: 4px; text-align: center; padding: 5px 0 0 0; font-size: 85%; }

.outerfooter {width: 100%; max-width: 960px; margin: 0 auto; padding: 0 0 20px 0;}
.outerfooter p{padding: 0 0 0 40px;}
.outerfooter p a {text-decoration: none; color: #000000; font-size: 80%;}
.outerfooter p a:hover {text-decoration: underline;}

.newsletter{
  position: relative;
}

.update-popup {
  background: #fff;
  position: absolute;
  top: 150%;
  left: 0;
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  padding: 20px;
  z-index: 99;
  display: none;
}

.update-popup::before {
    top: -40px;
    left: 35%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255,255,255,0);
    border-top-color: rgba(255,255,255,1);
    border-width: 26px;
    margin-right: -26px;
    z-index: 999999;
    visibility: visible;
    transform: rotate(180deg);
}

.update-popup input {
    float: right!important;
    width: 15px!important;
    height: 15px!important;
    margin-left: 15px!important;
}

/* EB */
.showdetails .maindetails {display: grid; grid-template-columns: 1fr 1.5fr; column-gap: 30px}
.showdetails .left, .showdetails .right {width: 100%!important; float: none!important;}
.showdetails h1 {padding: 0 0 5px 0; line-height: 1;}
.showdetails .description {padding: 10px 0 0 0}
.showdetails .date, .showdetails .venue {padding: 0; margin: 0; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-size: 1.2rem; line-height: 1.2}
.showdetails .description font {font-size: 0.9rem!important; line-height: 1.3}
.showdetails .description font b {font-weight: 700!important;}
.showdetails .blockbutton {padding: 20px 0 0 0;}
.showdetails .blockbutton a {display: block; padding: 5px 10px; background: #ffffff; border: 2px solid #e52820; text-decoration: none; font-size: 140%; font-family: "futura-pt-n5", "futura-pt", arial, serif; font-weight: 500; width: fit-content;}
.showdetails .blockbutton a:hover {background: #e52820; color: #ffffff}
.showdetails .properties {background: #ededed; padding: 20px; margin: 20px 0 0 0}
.showdetails .properties p {margin: 0; padding: 0;}
.showdetails .mobileonly {display: none;}
.showdetails img {width: 100%}

.bookings { box-sizing: border-box; padding: 30px 25px 20px 25px; width: 100%; background: #e52820; margin: 20px 0 0 0; }
.bookings * { color: #ffffff; }
.bookings h3 { text-align: center; font-size: 170%; font-weight: 300; }
.bookings .booking { border-bottom: 1px solid rgba(255,255,255,0.4); padding: 0 0 10px 0; margin: 0 0 10px 0; display: flex; align-items: center;}
.bookings .booking .date p { padding: 0; }
.bookings .booking .time {cursor: pointer; margin-left: auto;}
.bookings .booking .time:hover { opacity: 0.7; }
.bookings .booking .time p { background: #ff5148; padding: 0;}
.bookings .booking .time p a { color: #ffffff; display: block; padding: 5px 30px; text-decoration: none;}
.bookings .booking .time.soldout p {text-decoration: line-through;}
p.backtoshows { text-align: center; margin: 0 0 40px 0; padding: 0; font-size: 120%; }

@media only screen and (max-width: 1250px) {
  .upandcomingbtn {display: none;}
}
@media only screen and (max-width: 1024px) {
  .header .col1 {width: 25%; padding: 0 5% 0 0;}
  .header .col1 img {width: 100%;}

  .header .col2 {width: 33%; padding: 0 2% 0 0;}
  .header .col2 .searchbox .input input[type="text"] {width: 85%;}
  .header .col2 .searchbox input[type="submit"] {width: 15%;}

  .header .col3 {width: 33%; padding: 0 0 0 0; float: left;}
  .header .col3 .newsletter .input input[type="text"] {width: 85%;}
  .header .col3 .newsletter input[type="submit"] {width: 15%;}

  .nav li, .nav li .popupsubpages .subpages li {width: auto;}

  .banner {width: 100%;}
  .banner img {width: 48%; padding-right: 2%;}
  .banner .fullwidth img {width: 100%!important;}

  .prev img {left: 0;}
  .next img {right: 0}

  .interested .col2 h2 {padding: 0 0 10px 0;}
  .interested {width: 70%; float: none; margin: 0 0 2% 0;}
  .interested .col1 {width: 35%;}
  .interested .col2 {width: 50%;}

  .content-wrap.whatson .content .left { padding: 0 0 0 0;}
  .content-wrap.whatson .content .right {float: right;}

  .upandcoming .inner {padding: 0 20px 36px 20px;}
  .exhibition {width: 48%; margin: 0 1% 1% 0;}


  .eventsList .slide .feature {width: 90%; margin: 0 auto 2% auto; float: none; }
  .eventsList .slide .feature .col1 {width: 35%; padding: 0 2% 0 0;}
  .eventsList .slide .feature .col2 {width: 60%;}

  .footer .col1 {width: 45%; padding: 0 3% 0 0;}
  .footer .col1 .left {width: 40%; padding: 0 5% 0 0;}
  .footer .col1 .right {width: 55%;}
  .footer .col2, .footer .col3, .footer .col4 {width: 15%; padding: 0 2% 0 0;}

  .bottomfooter .left {width: 60%;}
  .bottomfooter .right {width: 30%;}
}
@media only screen and (max-width: 950px) {
  .content .left {width: 20%; float: left; padding: 0 2% 5% 0;}
  .content .right {width: 75%; float: right;}

  .content-wrap.whatson .content .left {width: 100%; padding: 0 0 0 0;}
  .content-wrap.whatson .content .right {width: 90%; padding: 0 0 0 0; float: left;}
  .content-wrap.whatson .content .left .event {width: 90%;}
  .content-wrap.whatson .content .left .event .left {width: 30%; padding: 0 0 0 0; float: left;}
  .content-wrap.whatson .content .left .event .right {width: 65%; float: right;}

  .whatson .content .left .mobile {display: block; margin: 0 0 40px 0;}
  .whatson .content .left .mobile .calendar {float: left; width: 48%; border-bottom: none;}
  .whatson .content .left .mobile .categories {float: right; width: 50%;}
  .whatson .content .right .desktop {display: none;}

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

  .footer .col1 {width: 100%; margin-bottom: 20px;}
  .footer .col2, .footer .col3, .footer .col4 {width: 31%; padding: 0 2% 0 0;}

  .bottomfooter {padding: 0 0 0 0;}
  .outerfooter p {padding: 0 0 0 0;}
}
@media only screen and (max-width: 667px) {

  .header {padding: 20px 0 20px 0;}
  .header .col1 {width: 100%; padding: 0 0 0 0; margin: 0 0 20px 0;}
  .header .col1 img {width: 40%; margin: 0 auto; min-width: 220px;}
  .header .col2 {width: 48%;}
  .header .col3 {width: 48%;}

  .nav-wrap {display: none;}

  .mobile-nav {background: #e52820; display: block; margin-bottom: 35px;}
  .mobile-nav .top {padding: 15px 10px 15px 20px; cursor: pointer;}
  .mobile-nav .top p {float: left; color: #ffffff; font-size: 100%; padding: 0; font-weight: 500; font-family: "futura-pt-n5", "futura-pt", arial, serif;}
  .mobile-nav .nav-icon {width: 27px; height: 20px; transform: rotate(0deg); transition: .5s ease-in-out;cursor: pointer; float: right;}
  .mobile-nav .nav-icon span {display: block; position: absolute; height: 3px; width: 100%; background: #ffffff; border-radius: 0px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out;}
  .mobile-nav .nav-icon span:nth-child(1) {top: 0px;}
  .mobile-nav .nav-icon span:nth-child(2),.mobile-nav .nav-icon span:nth-child(3) {top: 7px;}
  .mobile-nav .nav-icon span:nth-child(4) {top: 14px;  }
  .mobile-nav .open .nav-icon span:nth-child(1) {top: 21px;width: 0%; left: 50%;}
  .mobile-nav .open .nav-icon span:nth-child(2) { transform: rotate(45deg); }
  .mobile-nav .open .nav-icon span:nth-child(3) { transform: rotate(-45deg); }
  .mobile-nav .open .nav-icon span:nth-child(4) {top: 18px; width: 0%; left: 50%; }
  .mobile-nav ul {padding: 0; margin: 0; display: none;}
  .mobile-nav ul ul {padding: 0; margin: 0; display: none; border-bottom: 0;}
  .mobile-nav li {list-style: none; position: relative; font-size: 100%; font-weight: 500; padding: 0; margin: 0;}
  .mobile-nav li a {display: block; padding: 15px 65px 15px 20px; color: #ffffff; font-size: 100%; text-decoration: none; background: #e52820; font-family: "futura-pt-n5", "futura-pt", arial, serif;}
  .mobile-nav li li a {padding: 10px 65px 10px 40px; font-size: 100%; font-family: "futura-pt-n5", "futura-pt", arial, serif; }
  .mobile-nav li.selected a {background: #f9ccd1; color: #ffffff;}
  .mobile-nav li.selected ul {display: block;}
  .mobile-nav li .expand {position: absolute; top: 0; cursor: pointer; right: 0; width: 49px; height: 49px; text-align: center; line-height: 49px; background: rgba(0,0,0,0.2) url("../images/plus-solid.png") no-repeat center center; color: #fff; z-index: 2; font-size: 140%;}
  .mobile-nav li .minus  {position: absolute; top: 0; cursor: pointer; right: 0; width: 49px; height: 49px; text-align: center; line-height: 49px; background: rgba(0,0,0,0.2) url("../images/minus-solid.png") no-repeat center center; color: #fff; z-index: 2; font-size: 140%;}
  .mobile-nav li.selected li a, .mobile-nav li li a { color: #fff;}

  .banner img {width: 100%; padding-right: 2%;}
  .banner .image2 {display: none;}
  .banner .desktop {display: none;}
  .banner .mobile {display: block;}

  .interested {width: 90%;}

  .eventsList .slide .feature {width: 95%; margin: 0 0 4% 0;}
  .eventsList .slide .feature h2 {padding: 0 0 10px 0;}
  .exhibition {width: 100%; margin: 0 0 2% 0;}
  .interests {width: 100%; margin: 0 0 0 0;}

  .currentexhibition .column {width: 100%; margin-bottom: 40px; padding:0;}
  .currentexhibition .column .pics {float: none; width: 55%;}
  .exhibitiondetails {float: none; width: 100%;}

  .whatson .content .left .mobile {display: block; margin: 0 0 40px 0;}
  .whatson .content .left .mobile .calendar {float: none; width: 100%; margin: 0 auto 20px auto; }
  .whatson .content .left .mobile .categories {float: none; width: 100%;}

  .content .left {width: 100%; float: none; padding: 0 0% 5% 0;}
  .content .right {width: 100%; float: none;}

  .bottom-snav {display: block;}
  .content .left .top-snav {display: none;}
  .bottomfooter .left {width: 100%; float: none; margin-bottom: 20px;}
  .bottomfooter .right {float: none;}

}

@media screen and (max-width: 560px){
  .showdetails .maindetails {grid-template-columns: repeat(1,1fr);}
  .showdetails .left {display: none}
  .showdetails .mobileonly {display: block; margin: 15px 0}

  .footer {padding: 20px}
  .footer .col1 .findus .left, .footer .col1 .findus .right {width: 100%}
  .footer .col1 .findus iframe {width: 100%}
}

@media only screen and (max-width: 500px) {
  .header .col2 {width: 100%; margin: 0 0 20px 0;}
  .header .col3 {width: 100%; margin: 0 0 0 0;}

  .footer .col1 {}
  .footer .col2 {width: 100%; margin-bottom: 20px;}
  .footer .col3 {width: 48%;}
  .footer .col4 {width: 48%; float: right;}

  .footer .col1 h2, .footer .col2 h2, .footer .col3 h2, .footer .col4 h2 {padding-bottom: 5px;}

  .urgentmessage .inner p {font-size: 85%;}
  .urgentmessage .inner p.closepopup {font-size: 100%;}
  .urgentmessage .inner h1 {font-size: 150%;}
  
  .showdetails .blockbutton a {width: 100%; box-sizing: border-box; text-align: center;}

  .bookings .booking {flex-direction: column; gap: 5px}
  .bookings .booking .time {margin-left: 0}
}