/* ==|== primary styles ===================================================== Author: Silverink ========================================================================== */ /* BRAND COLOURS HOT PINK: 244,67,108 LIVE: 0,113,206 LEARNING: 87,182,178 ENGAGE: 255,127,48 GALLERy: 177,177,177 HUB: 243,195,0 BOOK FEST BLUE: 0,113,205 .searchIcon {width: 20px; height: 20px;} /* GOOGLE CSE */ /* Use a different font family for search results */ .gs-title, .gs-snippet { font-family: "montserrat"; } /* Add a border between individual search results */ .gs-webResult { border: 1px solid #eee; padding: 1em; } /* Do no display the count of search results */ .gsc-result-info { display: none; } /* Hide the Google branding in search results */ .gcsc-branding {display: none;} /* Hide the thumbnail images in search results */ .gsc-thumbnail { display: none; } /* Hide the snippets in Google search results */ .gs-snippet { display: block; } /* Change the font size of the title of search results */ .gs-title a { font-size: 16px; } /* Change the font size of snippets inside search results */ .gs-snippet { font-size: 14px; } .gs-title {margin-bottom: 25px;} /* Google Custom Search highlights matching words in bold, toggle that */ .gs-title b, .gs-snippet b { font-weight: bold; font-style: 'italic'; color: rgb(0,113,205) !important; } /* Do no display the URL of web pages in search results */ .gsc-url-top, .gsc-url-bottom { display: none; } /* Highlight the pagination buttons at the bottom of search results */ .gsc-cursor-page { font-size: 1.5em; padding: 4px 8px; border: 2px solid #ccc; } .text-left-not-xs, .text-left-not-sm, .text-left-not-md, .text-left-not-lg { text-align: left; } .text-center-not-xs, .text-center-not-sm, .text-center-not-md, .text-center-not-lg { text-align: center; } .text-right-not-xs, .text-right-not-sm, .text-right-not-md, .text-right-not-lg { text-align: right; } .text-justify-not-xs, .text-justify-not-sm, .text-justify-not-md, .text-justify-not-lg { text-align: justify; } @media (max-width: 767px) { .text-left-not-xs, .text-center-not-xs, .text-right-not-xs, .text-justify-not-xs { text-align: inherit; } .text-left-xs { text-align: left; } .text-center-xs { text-align: center; } .text-right-xs { text-align: right; } .text-justify-xs { text-align: justify; } } @media (min-width: 768px) and (max-width: 991px) { .text-left-not-sm, .text-center-not-sm, .text-right-not-sm, .text-justify-not-sm { text-align: inherit; } .text-left-sm { text-align: left; } .text-center-sm { text-align: center; } .text-right-sm { text-align: right; } .text-justify-sm { text-align: justify; } } @media (min-width: 992px) and (max-width: 1199px) { .text-left-not-md, .text-center-not-md, .text-right-not-md, .text-justify-not-md { text-align: inherit; } .text-left-md { text-align: left; } .text-center-md { text-align: center; } .text-right-md { text-align: right; } .text-justify-md { text-align: justify; } } @media (min-width: 1200px) { .text-left-not-lg, .text-center-not-lg, .text-right-not-lg, .text-justify-not-lg { text-align: inherit; } .text-left-lg { text-align: left; } .text-center-lg { text-align: center; } .text-right-lg { text-align: right; } .text-justify-lg { text-align: justify; } } img[style="float: right;"] {margin-bottom: 30px;margin-left: 15px;} .breadcrumbContain {background: #fff; margin-bottom: 15px; padding: 10px;} .breadcrumb {text-transform: capitalize; background: none; margin-bottom: 0px;} .breadcrumb li {font-weight: 100; text-transform: capitalize;} body[data-itemid="1"] .breadcrumb {display: none;} body[data-itemid="1"] .breadcrumbContain {background: #fff; margin-bottom: 0px; padding: 0;} body {background-color: #f7f7f7; font-size: 1.6rem;} .mceContainer p, .mceContainer ul {font-size: 1.6rem;} body[data-itemid="1"] {background-image: none;} button[disabled] {opacity: 0.4} /* SLICK CAROUSEL JS BASE STYLES */ /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir='rtl'] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .eventListTable {text-transform: capitalize;} .eventListTable td {vertical-align: middle !important; line-height: normal !important;} .eventListTable td:nth-child(1) {font-weight: bold;} .eventListTable .bookNow .btn, #listingDetail .btn, .readMore {margin-top: 0px !important;} .eventListTable h2 {margin-bottom: 10px;} /* Slider */ #fpImageDiv.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } #fpImageDiv .slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;} #fpImageDiv .slick-list:focus { outline: none; } #fpImageDiv .slick-list.dragging { cursor: pointer; cursor: hand; } #fpImageDiv.slick-slider .slick-track, #fpImageDiv.slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #fpImageDiv .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } #fpImageDiv .slick-track:before, #fpImageDiv .slick-track:after {display: table; content: ''; } #fpImageDiv .slick-track:after {clear: both; } #fpImageDiv .slick-loading .slick-track {visibility: hidden; } #fpImageDiv .slick-slide {display: none; float: left; height: 100%; min-height: 1px;height: 100vh; width: 100vw; display: flex; } [dir='rtl'] #fpImageDiv .slick-slide { float: right; } #fpImageDiv .slick-slide img { display: block; width: 100vw } #fpImageDiv .slick-slide.slick-loading img {display: none; } #fpImageDiv .slick-slide.dragging img {pointer-events: none; } #fpImageDiv .slick-initialized .slick-slide {display: block; } #fpImageDiv .slick-loading .slick-slide {visibility: hidden; } #fpImageDiv .slick-vertical .slick-slide {display: block; height: auto; border: 1px solid transparent; } #fpImageDiv .slick-arrow.slick-hidden {display: none; } @charset 'UTF-8'; /* Slider */ #fpImageDiv .slick-loading .slick-list{ background: #fff url('ajax-loader.gif') center center no-repeat;} .funders, .venues {display: grid;grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-gap: 15px; align-items: stretch;} .funders a {padding: 15px; box-shadow: 0px 0px 10px rgba(0,0,0,0.2);display: flex; align-items: center; background: #fff;} .funders a img { max-width: 100%; height: auto; max-height: 140px; width: auto; margin: auto} .funders a:hover {box-shadow: 0px 0px 20px rgba(0,0,0,0.1);} .venues {display: grid;grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); grid-gap: 15px; align-items: stretch; width: 100% !important; } .venues h4 {font-size: 2.2rem;} .venues a {background: #fff; padding: 10px; color: #fff !important; box-sizing: padding-box; text-decoration: none !important} .venues a:nth-child(1) {background-color: rgb(208,53,109);} .venues a:nth-child(2) {background-color: rgb(88,41,152);} .venues a:nth-child(3) {background-color: rgb(75,166,130);} .venues a:nth-child(4) {background-color: rgb(229,145,54);} .venues a:nth-child(5) {background-color: rgb(74,102,164);} .venues a:nth-child(6) {background-color: rgb(208,53,109);} .venues a:nth-child(7) {background-color: rgb(88,41,152);} .venues a:nth-child(8) {background-color: rgb(75,166,130);} .venues a:nth-child(9) {background-color: rgb(229,145,54);} .venues a:nth-child(10) {background-color: rgb(74,102,164);} .venues a:nth-child(11) {background-color: rgb(87,182,178);} .venues a:nth-child(12) {background-color: rgb(94,0,204);} .venues a:nth-child(13) {background-color: rgb(244,67,108);} .venues a:hover {box-shadow: 0px 0px 10px rgba(0,0,0,0.4); filter: brightness(100%) saturate(70%);} /* Arrows */ .slick-prev, .slick-next { font-size: 0; line-height: 0; position: absolute; top: 50%; display: block; width: 4vw; height: 4vw; padding: 0; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); cursor: pointer; color: transparent; border: none; outline: none; background: transparent; z-index: 5; position: absolute;} .slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; } .slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: .25; } .slick-prev:before, .slick-next:before {font-size: 20px; line-height: 1; opacity: .75; color: white; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-size: cover; background-repeat: no-repeat; } /* background-color: rgba(255,255,255,0.1); */ .slick-prev { left: 1vw; } [dir='rtl'] .slick-prev { right: 1vw; left: auto; } .slick-prev:before { content: ' '; display: block; width: 100%; height: 100%; background-image: url("prev.svg"); } [dir='rtl'] .slick-prev:before { content: ' '; background-image: url("next.svg"); } .slick-next { right: 2vw; } [dir='rtl'] .slick-next { right: auto; left: 2vw; } .slick-next:before { content: ' '; display: block; width: 100%; height: 100%; background-image: url("next.svg"); } [dir='rtl'] .slick-next:before { content: ' '; background-image: url("prev.svg"); } /* Dots */ .slick-dotted.slick-slider { margin-bottom: 30px; } .slick-dots { position: absolute; bottom: -25px; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { background: none; border: 2px solid #68696e; border-radius: 50%; font-family: 'slick'; font-size: 6px; position: absolute; top: 0; left: 0; width: 12px; height: 12px; content: ' '; text-align: center; opacity: .25; color: #68696e; -webkit-font-smoothing: antialiased; } .slick-dots li.slick-active button:before { width: 11px; height: 11px; background: #68696e; border: 2px solid transparent; opacity: .75; color: black; } /* OVERRIDE HAMBURGER MENU WITH ANIMATION */ .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover { background-color: transparent; } .navbar-default .navbar-toggle { border: none; } .navbar-toggle span.icon-bar { transition: all 0.15s; } .navbar-toggle span:nth-child(2) { transform: rotate(45deg); transform-origin: 10% 10%; } .navbar-toggle span:nth-child(3) { opacity: 0; } .navbar-toggle span:nth-child(4) { transform: rotate(-45deg); transform-origin: 10% 90%; } .navbar-toggle.collapsed span:nth-child(2), .navbar-toggle.collapsed span:nth-child(4) { transform: rotate(0); } .navbar-toggle.collapsed span:nth-child(3) { opacity: 1; } /* CUSTOM AOS ANIMATIONS */ [data-aos="background-explode"] {background-size: 110% 110%;background-position: center center; } [data-aos="background-explode"].aos-animate { background-size: 120% 120% !important;} /* ==|== Easibuild Structural Elements ===================================================== Structural elements such as mainContent/Wide, submenu etc. Ideally these elements will change to HTML5 tags... aside, article etc. ========================================================================== */ a:link, a:visited, a:hover, a:active {color: rgb(0,113,205);} .alert-info {background: #fff; border-radius: 0px; border: none; color: #222; font-weight: 500;} article {background-color: #fff; padding: 30px;} blockquote{ display:block; background: #fff; padding: 25px 35px 25px 55px; margin: 0 0 20px; position: relative; border: none; /*Font*/ font-size: 1.8rem; line-height: 1.8; text-align: justify; } blockquote::before{ content: "\201C"; /*Unicode for Left Double Quote*/ /*Font*/ font-family: Georgia, serif; font-size: 60px; font-weight: bold; color: #999; /*Positioning*/ position: absolute; left: 10px; top:5px; } blockquote::after{ /*Reset to make sure*/ content: ""; } body { position: relative; overflow-x: hidden; font-family: "Montserrat", sans-serif; color: #222; padding-top: 95px;} /* FIXED HEADER HEIGHT */ body[data-itemid="63"] #EventFilters {display: none;} .highlights a strong, .interest a strong, .highlights h2, .interest h2, .leadIns h2 {color: #68696e; margin-bottom: 0px;} .highlights a:hover strong, .interest a:hover strong {color: rgb(0,113,205);} .highlights a:hover, .interest a:hover {text-decoration: none} h1 {margin-top: 0px; margin-bottom: 15px; font-weight: 400; font-size: 2.6rem; line-height: 140%;} .btn-default {border-radius: 0px; background: #fff; color: #222 !important; font-weight: bold; font-size: 1.2rem; letter-spacing: 0.1rem;} /* CATEGORY COLOURS */ .categoryDropDown {border-radius: 0px; width: 100%; position: absolute; top: -3px; border: none; margin: 0; padding: 0;} .captionContain h1 {font-size: 2rem;} /* CATEGORIES */ .cat_thurs5jun, .tag_subCat {background-color: rgb(255,255,255); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_fri6jun, .cat_workshop, .cat_other, .cat_throughoutfestival {background-color: rgb(244,67,108); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_sun8jun {background-color: rgb(208,53,109); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_sat7jun {background-color: rgb(88,41,152); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_sun8jun {background-color: rgb(75,166,130); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_mon9jun {background-color: rgb(229,145,54); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_tues10jun {background-color: rgb(74,102,164); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_wed11jun {background-color: rgb(208,53,109); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_thurs12jun {background-color: rgb(88,41,152); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_15thjun {background-color: rgb(75,166,130); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_16thjun {background-color: rgb(229,145,54); border-color: transparent transparent rgb(0,113,206) transparent; } .cat_17thjun, .cat_6thjun {background-color: rgb(74,102,164); border-color: transparent transparent rgb(0,113,206) transparent; } .categoryLink {display: block; font-size: 1.8rem; vertical-align: middle; margin-bottom: 15px; text-decoration: none; width: 100%; padding: 10% 0; color: #fff !important; background-color: #fff; text-align: center; background-position: -99px -99px; transition: all 0.2s ease-in-out; line-height: 140%; } .categoryLink em {font-style: normal; font-weight: 700; display: block;} .categoryLink small {font-size: 1.2rem;} .interest .row .col-xs-3:nth-child(1) .categoryLink, .tdCol .row .col-xs-6:nth-child(1) .categoryLink {background-color: rgb(243,223,80)} .interest .row .col-xs-3:nth-child(2) .categoryLink, .tdCol .row .col-xs-6:nth-child(2) .categoryLink {background-color: rgb(208,53,109); } .interest .row .col-xs-3:nth-child(3) .categoryLink, .tdCol .row .col-xs-6:nth-child(3) .categoryLink {background-color: rgb(88,41,152);} .interest .row .col-xs-3:nth-child(4) .categoryLink, .tdCol .row .col-xs-6:nth-child(4) .categoryLink {background-color: rgb(75,166,130);} .interest .row .col-xs-3:nth-child(5) .categoryLink, .tdCol .row .col-xs-6:nth-child(5) .categoryLink {background-color: rgb(229,145,54);} .interest .row .col-xs-3:nth-child(6) .categoryLink, .tdCol .row .col-xs-6:nth-child(6) .categoryLink {background-color: rgb(74,102,164);} .interest .row .col-xs-3:nth-child(7) .categoryLink, .tdCol .row .col-xs-6:nth-child(7) .categoryLink {background-color: rgb(243,223,80);} .interest .row .col-xs-3:nth-child(8) .categoryLink, .tdCol .row .col-xs-6:nth-child(8) .categoryLink {background-color: rgb(208,53,109);} .interest .row .col-xs-3:nth-child(9) .categoryLink, .tdCol .row .col-xs-6:nth-child(9) .categoryLink {background-color: rgb(88,41,152);} .interest .row .col-xs-3:nth-child(10) .categoryLink, .tdCol .row .col-xs-6:nth-child(10) .categoryLink {background-color: rgb(75,166,130);} .interest .row .col-xs-3:nth-child(11) .categoryLink, .tdCol .row .col-xs-6:nth-child(11) .categoryLink {background-color: rgb(74,102,164);} .interest .row .col-xs-3:nth-child(12) .categoryLink, .tdCol .row .col-xs-6:nth-child(12) .categoryLink {background-color: rgb(87,182,178);} .categoryLink:hover{ filter: brightness(100%) saturate(160%); background-size: cover; background-position: center center; } .categoryLink.selected {background-color: #fff !important; color: #444 !important; font-weight: bold;} .categoryLink * { transition: all 0.2s ease-in-out} #categoryList, #categoryListBtn {text-transform: capitalize; text-align: left; margin: 0px auto; margin-bottom: 0px;} #categoryList.form-control {display: inline-block;} #categoryList {margin: 0px -15px;} body[data-itemid="20"] #categoryList {display: none} .choosedates {cursor: pointer; margin: 5px; display: inline; line-height: 40px; vertical-align: middle;} .choosedates svg {margin-bottom: -2px; margin-left: 15px;} .currentlyRunning {width: 100vw; border-top: 4px solid #eee; margin-top: 20px; padding-top: 20px; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background: #fff; padding-bottom: 60px; margin-bottom: -60px;} .DDContain {text-transform: capitalize;} /* CATEGORIES */ .ContactDetails h1, .ContactForm h1 {font-size: 1.75em;} .ContactForm label, #questionForm label {display: block;} .ContactForm div, #questionForm div {margin-bottom: 10px;} .ContactForm input[type='text'], .ContactForm input[type='tel'], .ContactForm input[type='email'], .ContactForm textarea {border: 1px solid #888;} .notEmail {display: none;} .filterRow .tdCol {display: table-cell; position: relative; padding: 10px; vertical-align: middle;} .filterRow .tdCol p {margin-bottom: 0px;} /* GALLERY EXHIBITIONS */ h2 {text-transform: capitalize; text-align: left; font-size: 1.8rem; } h2.largeText {font-size: 2.6rem;} h3 {font-weight: 400; font-size: 1.8rem; line-height: 170%;} .interest {padding: 40px 0px;} body[data-template="Open"] .openContainer h3 {background: rgba(255, 255, 255, .8); font-weight: 300; line-height: 180%; color: #000; margin-bottom: 30px; padding: 30px 40px 30px 30px; padding-right: 40px; position: relative;} /* body[data-template="Open"] .openContainer h3:before { content: " "; position: absolute; top:0px; right: 0px; border-bottom: 30px solid transparent; border-left: 30px solid transparent; border-right: 30px solid rgba(218, 53, 92, 1); } */ .dataTables_length {float: right;} .dataTables_info {float: right;} .dataTables_paginate {} .paginate_button_disabled {opacity: 0.4; -moz-opacity: 0.4;} .paging_full_numbers {color: #257f5b;} .dataTables_wrapper {margin-top: 0px} /* DATE BOXES */ /* Date span */ .date { box-shadow: 0 0 4px rgba(0, 0, 0, .8); -o-box-shadow: 0 0 4px rgba(0, 0, 0, .8); -ms-box-shadow: 0 0 4px rgba(0, 0, 0, .8); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .8); background-color: #ddd; background-image: linear-gradient(top, #ddd, #ccc); background-image: -o-linear-gradient(top, #ddd, #ccc); background-image: -ms-linear-gradient(top, #ddd, #ccc); background-image: -moz-linear-gradient(top, #ddd, #ccc); background-image: -webkit-linear-gradient(top, #ddd, #ccc); border-radius: 5px; color: #404040; display: inline-block; font-family: Arial; font-size: 32px; font-weight: bolder; margin: 5px; padding: 10px; position: relative; text-align: center; text-shadow: 0 1px 0 #fff; } .date::before { background-color: #a30000; background-image: linear-gradient(top, #a30000, #7e0000); background-image: -o-linear-gradient(top, #a30000, #7e0000); background-image: -ms-linear-gradient(top, #a30000, #7e0000); background-image: -moz-linear-gradient(top, #a30000, #7e0000); background-image: -webkit-linear-gradient(top, #a30000, #7e0000); border-radius: 3px 3px 0 0; color: #fff; content: attr(data-month); display: block; font-size: 11px; font-weight: normal; left: 0; position: absolute; right: 0; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); top: 0; } .date::after { background-color: #333; background-image: linear-gradient(top, #333, #222); background-image: -o-linear-gradient(top, #333, #222); background-image: -ms-linear-gradient(top, #333, #222); background-image: -moz-linear-gradient(top, #333, #222); background-image: -webkit-linear-gradient(top, #333, #222); border-radius: 0 0 3px 3px; bottom: 0; color: #ccc; content: attr(data-year); display: block; font-size: 11px; font-weight: normal; left: 0; position: absolute; right: 0; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); } /* END DATE BOX */ .eventCard {margin-bottom: 30px; animation-duration: 0.4s; animation-fill-mode: both;} @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3, .3, .3); } to { opacity: 0; width: 0px; padding: 0px; } } .outOfRange { animation-name: zoomOut; } @keyframes zoomIn { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; width: inherit; } } .inRange { animation-name: zoomIn; } .iframeHolderDiv {position: relative;} .load-bar { position: absolute; top: 0px; width: 100%; height: 6px; background-color: #e83e67; margin-bottom: -30px; } .bar { content: ""; display: inline; position: absolute; width: 0; height: 100%; left: 50%; text-align: center; } .bar:nth-child(1) { background-color: #56b5b2; animation: loading 3s linear infinite; } .bar:nth-child(2) { background-color: #fe7f2f; animation: loading 3s linear 1s infinite; } .bar:nth-child(3) { background-color: #e83e67; animation: loading 3s linear 2s infinite; } @keyframes loading { from {left: 50%; width: 0;z-index:100;} 33.3333% {left: 0; width: 100%;z-index: 10;} to {left: 0; width: 100%;} } .eventCard:hover .cardImage {filter: brightness(120%) saturate(105%); transition: 0.3s all ease-in-out} .eventCard .cardImage {padding-top: 56%; position: relative; overflow: hidden;} .eventCard .cardContent {background: rgb(255,255,255); color: rgb(0,0,0); position: relative; overflow: hidden;} .currentlyRunning .cardContent {background: #f7f7f7;} .eventCard .cardSummary {padding: 15px;} .eventCard .cardSummary header h3 {text-transform: capitalize; font-size: 1.6rem; height: 60px; line-height: 160%; margin-top: 0px; margin-bottom: 0px; font-weight: 700;} .eventCard .cardSummary .category {font-size: 1rem; text-transform: capitalize; font-weight: 500;} .eventCard .cardSummary .intro, .eventCard .cardSummary .location {display: none;} .cardSummary .eventDates {font-size: 1.4rem; line-height: 140%;} .eventCard .tag_subCat , .sideImage .tag_subCat { background: none !important; width: 0px; height: 0px; position: absolute; bottom: 0px; right: 0px; border-style: solid; border-width: 0 0px 113.2px 113.2px; transform:rotate(360deg); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); } .sideImage .tag_subCat { right: 15px; bottom: -1px;} .eventCard .tag_subCat p, .sideImage .tag_subCat p { text-align: center; color: #fff; font-size: 1.1rem; font-family: "Montserrat", sans-serif; font-weight: 800; transform:rotate(-45deg); -ms-transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); text-align: center; line-height: 130%; padding-top: 10px; top: 50px; left: -90px; position: relative; width: 93px; height: 43px; margin: 0px; } .eventCard .tag, .sideImage .tag {position: absolute; bottom: 15px; left: 15px; height: 75px; width: 75px; border-radius: 75px; text-align: center; font-weight: 500; font-size: 1rem; color: #222; background-color: rgba(255,255,255,1); border: 1px solid rgba(0,0,0,0.3); z-index: 1; vertical-align: middle;} .sideImage .tag {position: absolute; bottom: 15px; left: 45px;} .eventCard .tag span, .sideImage .tag span {height: 75px; line-height: 140%; display: table-cell; vertical-align: middle; text-align: center; width: 75px;} .sideImage {text-align: right} .bookNow .btn, #listingDetail .btn, .readMore {margin-top: 10px; background-color: rgb(0,113,205); border: none; color: #fff !important;} #listingDetail .btn {font-size: 1.8rem; font-weight: 400;} .eventCard .bookNow .btn:hover, #listingDetail .btn:hover, .readMore:hover {background-color: rgba(35, 152, 247, 1); color: #fff !important;} .eventCard .eventDates {height: 50px;} .EventCardContainer {cursor: pointer; margin-top: 15px;} .fpHighlightCard.eventCard {cursor: pointer;} .fpHighlightCard.eventCard .eventDates {font-size: 1rem; font-weight: bold; height: auto; } .fpHighlightCard.eventCard .cardSummary .intro, .fpHighlightCard .eventCard .cardSummary .location {display: none;} .fpHighlightCard.eventCard .cardImage {padding-top: 50%; background-size: contain !important; background-position: right center !important; } .fpHighlightCard .category {display: none;} .fpHighlightCard .cardSummary header, .fpHighlightCard .cardSummary .eventDates { position: relative;} .fpHighlightCard .cardSummary header h3 {height: auto !important; margin-bottom: 15px; font-weight: 500;} .fpHighlightCard .cardSummary {background: rgb(0,113,205); color: hsla(0,100%,100%,1); position: absolute; left: 0px; top: 0px; width: 60%; height: 100%;} .fpHighlightCard .tag {right: 15px; left: auto;} img {max-width: 100%; height: auto;} .fpHighlightCard.eventCard .btn {background: #fff; color: #000 !important; position: absolute; bottom: 15px; left: 15px;} footer {padding: 40px 0px; background-color: #68696e; color: #fff; margin-top: 0px;} footer a:link, footer a:visited, footer a:hover, footer a:active {color: #fff ;} footer ul {list-style-type: none; padding: 0; margin: 0;} footer li {margin-bottom: 10px;} footer h4:after {border-color: #fff !important;} .highlightBox {background: rgb(0,113,205); color: #fff; padding: 15px; margin-bottom: 0px; } .highlightBox a {color: #fff; font-weight: bold;} #logo {position: relative; display: inline-block;} #logo img {height: auto; max-width: 100%; max-height:100% !important; cursor: pointer;} #logo img {width: 170px; margin-top: 10px;} /* partner Logo */ .partnerLogo {width: 70px; position: absolute; top: 25px; left: 200px;} #topBanner {background: #68696e; padding: 20px 0px; height: 100px; position: fixed; z-index: 10; top: 0px; left: 0px; width: 100%;} #topBanner a {color: #ffffff;} body[data-itemid="1"] section {margin-bottom: 0px;} section.pass {background: #fff; padding: 30px;} .pass img {margin-top: -30px; margin-right: -30px; margin-left: -30px; width: calc(100% + 60px) !important; max-width: calc(100% + 60px) !important; height: auto} /* ==|== Everything Else ===================================================================== Alphabetically ordered unles it's nested (.level2 will be nested with #submenu for example) =========================================================================================== */ /* CAROUSEL */ #fpImageDiv {margin-bottom: 0px; width: 100%; height: 200px;overflow: hidden; background-color: #fff;} #fpImageDiv img {right: 0px;} /* #fpImageDiv .slideItem {height: 200px; position: relative; margin: 0px 15px 15px 15px; overflow: hidden; background-size: cover; background-position: right center; background-repeat: no-repeat;} #fpImageDiv .slideItem .caption {text-align: center; position: absolute; top: 0px; left: 0%; width: 100%; height: 100%; color: #ffffff;} #fpImageDiv .slideItem .caption h2 { text-align: center !important; font-size: 2.4rem; color: #ffffff; text-align: left; margin-bottom: 0px; margin-top: 30px; line-height: normal;} #fpImageDiv .slideItem .caption p {font-size: 1.8rem; display: none;} #fpImageDiv .slideItem .caption .Desc, #fpImageDiv .slideItem .caption .Summary {font-size: 1.8rem; color: #fff;} #fpImageDiv .slideItem .caption .findOutMore a {color: #fff; font-weight: 700; font-size: 1.2rem;} #fpImageDiv .slideItem .captionContain {padding: 30px; position: absolute; margin: auto; } */ #fpImageDiv {margin-bottom: 0px; width: 100%; height: 200px;overflow: hidden; background-color: #fff;} #fpImageDiv img {right: 0px;} #fpImageDiv .slideItem {height: 200px; position: relative; margin: 0px 15px 15px 15px; overflow: hidden; background-size: cover; background-position: right center; background-repeat: no-repeat;} #fpImageDiv .slideItem .caption {position: absolute; top: 0px; right: 20%; width: 100%; height: 100%; background-image: url("slideBGPink.svg?v=2"); background-size: auto 100%; background-position-x: 100%; background-repeat: no-repeat; color: #ffffff;} #fpImageDiv .slideItem .caption h2 { font-size: 2rem; color: #ffffff; text-align: left; margin-bottom: 0px; margin-top: 30px; line-height: normal;} #fpImageDiv .slideItem .caption p {font-size: 1.4rem; display: none;} #fpImageDiv .slideItem .caption .Desc, #fpImageDiv .slideItem .caption .Summary {font-size: 1.2rem; color: #fff;} #fpImageDiv .slideItem .caption .findOutMore a {color: #fff; font-weight: 700; font-size: 1.2rem;} #fpImageDiv .slideItem .captionContain {width: 55%; padding: 30px; position: absolute; bottom: 0px; left: 20%; } #fpImageDivbottom {width: 100%; margin-bottom: -30px;} #fpImageDivbottom .slick-slide { max-height:300px; } #fpImageDivbottom .slick-slide img {object-fit: cover; height: 100% !important; width: auto !important } .leadIn * {transition: 0.6s all ease;} .leadIn { position: relative; background: #f7f7f7; margin-top: 15px; text-align: center; padding: 52% 15px 0px 15px; background-size: cover; background-position: center center; z-index: 5;} .leadIn:after {content: " "; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0,0,0,0.2); z-index: 10;transition: 0.6s all ease;filter: saturate(20%)} .leadIn:hover {filter: saturate(120%)} .leadIn:hover::after {background: rgba(0,0,0,0.5);} .leadIn .icon {width: 60px; position: absolute; left: calc(50% - 30px); top: calc(50% - 30px); z-index: 20;} .leadIn h4 {font-size: 2rem; letter-spacing: 0.08rem; font-weight: bold; color: #fff; position: absolute; bottom: 0px; left: 5%; text-transform: uppercase; text-align: center; display: block; width: 90%; z-index: 30; } .newslettersignup, .signupContainer {color: #fff; background: rgb(0,113,205); margin-top: 30px; padding: 40px 0px; margin-bottom: 0px;} .signupContainer {padding: 40px 15px;} .newslettersignup img {width: 36px; height: auto; box-sizing: padding-box; padding: 5px; margin-right: 15px; border: 1px solid transparent; background: #fff; border-radius: 50%;} .newslettersignup h2 {margin-bottom: 40px;} .newslettersignup .mc-field-group label {display: none;} .newslettersignup form, .signupContainer form {width: 100%;} .newslettersignup input[type=text], .newslettersignup input[type=email], .signupContainer input[type=text], .signupContainer input[type=email] {border: 0px; background: none; color: #fff;border-bottom: 1px solid #fff; margin-bottom: 20px; width: 100%; font-weight: 100;} .newslettersignup ::-webkit-input-placeholder, .signupContainer ::-webkit-input-placeholder { color: #fff; } .newslettersignup ::-moz-placeholder { /* Firefox 19+ */ color: #fff; } .newslettersignup :-ms-input-placeholder { color: #fff; } .openContainer { line-height: 180%;} p, h5,h6 {font-size: 1.4rem; margin-bottom: 15px;} /* GALLERY */ body[data-template='Gallery'] figure {background-repeat: no-repeat; background-size: cover; background-position: center center; cursor: pointer; height: 250px; margin-bottom: 30px;border: 1px solid #c6c6c6; position: relative;} body[data-template='Gallery'] figcaption {background: #f3f4f8; position: absolute; bottom: 0px; width: 100%; padding: 5%; text-align: center; text-transform: capitalize; height: 60px; vertical-align: middle;} /* body[data-template='Gallery'] li {list-style-type: none; margin:0; text-align: center;} */ body[data-template='Gallery'] .controls{ width:50px; display:block; padding-top:8px; font-weight:bold; font-size: 1em; } body[data-template='Gallery'] .next { float:right; text-align:right; } #galleryModal .modal-body {text-align: center;} .img-responsive {margin: auto;} .month li, .year li {display: none;} .month li.monthName, .month li.yearName {display: block;} #map_canvas {width: 100%; min-height: 450px; height: 100%; display: block; } .application-view.iframe #application-outlet {padding: 0px !important;} /* LISTING DETAIL */ #EventFilters {font-size: 1.6rem; } #EventFilters .parentCat {margin-bottom: 45px;} .eventDates, .doors, .descriptor, .weeks, .tutor, .space, .cost, .dates {margin-bottom: 10px;} .descriptor span {font-weight: 700; display: block;} .eventDates span, .doors span, .weeks span, .tutor span, .space span, .cost span, .otherDays span {width: 80px; font-weight: 700; display: inline-block;} .galItem {padding: 30px; background: #fff; margin-bottom: 30px;} .galItem .topRow {position: relative; } .galItem .readMore {margin-top: 30px;} #listingDetail .topRow {margin-bottom: 80px;} .panel-title {text-align: center !important;} .list-group-item * {transition: 0.4s ease-in-out} .list-group-item span { padding-right: 50px;} .list-group-item {border: none; background-image: url("/styles/arrow_down.png"); background-position: top right; background-repeat: no-repeat;} .list-group-item.up {background-image: url("/styles/arrow_up.png");} #listingDetail .topRow h1, .topRow h2 {text-transform: capitalize; margin-top: 0px; margin-bottom: 30px; line-height: 160%;} .eventintro, .intro {margin-top: 30px; margin-bottom: 30px; line-height: 160%; font-size: 1.8rem; font-weight: 100;} .eventintro strong {font-weight: 400;} .EventDesc {line-height: 160%; font-size: 1.6rem;} /* LIT CRAWL */ .panel {background: #0070cc} .litCrawlTable .col-sm-12:nth-child(2) .panel {background: #c61246} .litCrawlTable .col-sm-12:nth-child(3) .panel{background: #f2c317} .litCrawlTable .col-sm-12:nth-child(4) .panel {background: #02328b} .panel-title {padding-bottom: 15px; color: #fff;} body[data-itemid='71'] .mceContainer > .row > .col-sm-12 > figure img {margin-top: 0%; margin-bottom: -30%;} .litCrawlTable .list-group-item span {display: block; } .list-group-item span.venue {font-weight: bold;} .list-group-item .eventInfo {background: rgba(255,255,255,0.6); padding: 15px; margin: 10px -15px 0px -30px; font-size: 1.4rem;} ul.list-group.list-group-striped li {cursor: pointer;} ul.list-group.list-group-striped li:nth-of-type(odd){ background-color: #b0d4e9; } ul.list-group.list-group-striped li:nth-of-type(even){ background-color: #b7dcf1; } ul.list-group.list-group-hover li:hover{ background-color: #a8c6d7; } /* END LIT CRAWL */ /* MCE CONTAINER (Open Content Pages) */ .mceContainer ul {background: rgba(255,255,255,1); padding: 15px; margin-bottom: 30px;} .mceContainer li {line-height: 180%; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid rgba(250,250,250); padding-left: 30px; margin-left: 30px;} .mceContainer li:last-child {border-bottom: 0px; margin-bottom: 0px;} .mceContainer > .row > .col-sm-12 > figure figcaption {background: rgb(255,255,255); padding: 30px; position: relative; margin-bottom: 30px; width: 95%; margin: -30px auto 30px; } .rightImg {clear: both; margin: 30px auto; display: block; text-align: center ;} .sponsorLogo a img {height: 40px !important; width: auto; margin-left: 20px;} .sponsorLogo a:first-child img {height: 50px !important; margin-left: 0px; margin-bottom: 15px;} .topRow .btn {margin-bottom: 30px;} .videoWrapper {margin-bottom: 30px;} .videoWrapper { position: relative; padding-bottom: 44.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-top: -12px !important; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; } .videoWrapperF {margin-bottom: 30px;} .videoWrapperF { position: relative; padding-bottom: 44.25%; /* 16:9 */ padding-top: 25px; height: 0; margin-top: -12px !important; } .videoWrapperF iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100%; } /* MOBILE MENU OVERLAY */ #mobileMenu {position: fixed; top: 98px; left: 0px; width: 100vw; height: 100vh; background: #68696e; z-index: 999; padding: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: -120px 30%; background-size: 250%;} #mobileMenu ul {padding: 0px; margin: 0; margin-top: 30px;} #mobileMenu li {margin: 0;font-size: 2.2rem; margin-bottom: 30px; text-transform: capitalize; text-align: center; padding: 0; font-weight: 500; } #mobileMenu li a {color: #fff;} .navbar-toggle {border: none; padding: 0px; border-radius: 0px; margin: 0px; margin-top: 10px;} .navbar-toggle .icon-bar {background: #ffffff;} .navbar-collapse { opacity: 1; width: auto; height: calc(100vh - 100px) !important; border-top: 0; -webkit-box-shadow: none; box-shadow: none; } /* NEWS */ .newsFrontPage figure {min-height: 300px; background-size: cover;} .newsStory {display: block; background: #fff; border-bottom:1px solid #f7f7f7; margin: 0px 15px 15px 15px; clear: both;} .newsStory figure {margin-bottom: 15px; text-align: left} .newsStory figure img {width: 100% !important; height: auto;} .newsStory figcaption p {display: block; font-size: 1rem; margin-top: 5px; font-style: oblique; } .newsStoryMain figcaption p {font-style: oblique; padding-top: 15px;} .openContainer {padding: 20px 15px;} hr {border-top: 2px solid #b5b3b3; clear: both; display: block; margin: 15px; } .respWrap iframe {width: 100%; height: 600px; border: 0px;} /* OUR PEOPLE */ body[data-itemid="14"] section figure {background: rgba(255,255,255,1); padding: 15px; margin-bottom: 15px;} body[data-itemid="14"] section figure p {margin: 0;} .whiteBG {background: rgba(255,255,255,1); padding: 15px; display: block;} section {margin-bottom: 15px;} section h2 {margin-bottom: 15px;} #showList, #showGrid {background: none; border: none; margin-right: 15px;} /* SILVERINK LINK */ #silverinkWebDesign { font-size: 10px; font-family: helvetica, arial; margin-left: -2px; margin-top: 5px; } #silverinkWebDesign a { color: #888; } /* SUBMENU Full Width... */ #SubMenuUl, .level3SubMenu {margin-left: 0px; padding-left: 0px;} .level3SubMenu {margin-top: 15px;} #SubMenuUl li, .level3SubMenu li {display: inline-block; text-transform: capitalize; font-size: 2rem; margin-right: 30px; margin-bottom: 15px; } #SubMenuUl li:after {content: " "; border-bottom: 1px solid #222; width: 10px; display: block; margin-right: 0px;} #SubMenuUl li.selected:after , #SubMenuUl li:hover:after {content: " "; border-bottom: 2px solid rgb(0,113,205); width: 30px; display: block; margin-left: 0px; } #SubMenuUl li a, .level3SubMenu li a {color: #222;font-weight: 100; text-decoration: none;} #SubMenuUl li.selected a {color: rgb(0,113,205);font-weight: 500; letter-spacing: 0.03rem; } .level3SubMenu li.selected a, .level3SubMenu li.selected a:hover, .level3SubMenu li a:hover {color: rgb(0,113,205);font-weight: 500; letter-spacing: 0.03rem; } .level3SubMenu li a:hover {font-weight: 100; letter-spacing: 0rem;} .level3SubMenu li:first-child.selected a, .level3SubMenu li:first-child.selected a:hover {color: #222;font-weight: 500; letter-spacing: 0.03rem;} .level3SubMenu li {font-size: 1.8rem;} #topBanner .cart { font-size: 1.2rem; font-weight: 200; display: inline; float: right;} #topBanner .cart img {width: 19px; margin-right: 5px; } #topBanner .loginHeader { text-transform: capitalize;font-weight: 200; font-size: 1.2rem; margin-bottom: 10px; margin-right: 0px;} #topBanner .loginHeader a {margin-left: 15px; } #topBanner .loginHeader .telephone {margin-right: 15px;} #topBanner .loginHeader .telephone img { width: 14px; height: 14px; margin-right: 5px;} .ticketsolve-hidden-iframe {display: none;} /* ==|== media queries ====================================================== Media Queries for Responsive Design. These override the primary ('mobile/desktop first') styles Modify as content requires. ========================================================================== */ @media only screen and (max-width: 320px) { #logo img {width: 140px; margin-top: 10px;} /* partner Logo */ .partnerLogo {width: 50px; position: absolute; top: 45px; left: 20px;} .fpHighlightCard.eventCard .eventDates {font-size: 1.4rem; font-weight: bold; height: auto; } } /*===============================*/ /* 480 - LANDSCAPE MOBILE LAYOUT */ /*===============================*/ @media only screen and (min-width: 480px) { /* Style adjustments for viewports 480px and over go here */ #fpImageDiv {height: 240px;} #fpImageDiv .slideItem {position: relative; height: 240px;} #logo img {width: 170px; margin-top: 10px;} .fpHighlightCard.eventCard .eventDates {font-size: 1.4rem; font-weight: bold; height: auto; } /* partner Logo */ .partnerLogo {width: 70px; position: absolute; top: 25px; left: 200px;} } /*=====================*/ /* 768 - TABLET LAYOUT */ /*=====================*/ @media only screen and (min-width: 768px) { /* Style adjustments for viewports 768px and over go here */ body {padding-top: 100px;} body[data-itemid="14"] section figure {width: calc(50% - 30px); float: left; margin: 15px;} .captionContain h1 {font-size: 2.6rem;} .categoryLink {font-size: 1.6rem; } .fpHighlightCard.eventCard .eventDates {font-size: 1.4rem; font-weight: bold; height: auto; } #fpImageDiv {margin-bottom: 0px;height: 320px;overflow: hidden;} #fpImageDiv .slideItem {background-size: cover; position: relative; height: 320px; margin: 0px 10px 10px 10px; } #fpImageDiv .slideItem .caption h2 { font-size: 2.8rem;} #fpImageDiv .slideItem .caption p {display: block; } #fpImageDiv .slideItem .caption .findOutMore a {font-size: 1.6rem;} #fpImageDiv .slideItem .captionContain {position: relative; } #fpImageDiv .slideItem .captionContain {width: 63%; top: 50px; } #fpImageDiv .slideItem[data-featured="True"] {width: 100vw;} .fpViewAllLink {margin-top: 25px;} .highlights .allEvents {margin-top: 25px;} h2 {text-transform: capitalize; text-align: left; font-size: 2.2rem; line-height: 180%;} h2.largeText {font-size: 3.2rem;} /* GALLERY EXHIBITIONS */ .exhibitionBodyContain img, .aboutArtistBodyContain img { float: right; clear: right;display: inline-block !important; max-width: 40%; margin-left: 60px !important; margin-bottom: 60px; } #logo img {width: 210px; margin-top: 10px;} /* partner Logo */ .partnerLogo {width: 70px; position: absolute; top: 25px; left: 250px;} .mceContainer p { line-height: 180%;} .mceContainer > .row > .col-sm-12 > figure {background: rgb(255,255,255); padding: 30px; position: relative; margin-bottom: 30px; min-height: 400px;} .mceContainer > .row > .col-sm-12 > figure img,.mceContainer > .row > .col-sm-12 > figure .videoWrapper, .mceContainer > .row > .col-sm-12 > figure #map_canvas {float: right; width: 60%; margin-left: 30px;} .mceContainer #map_canvas {height: 100% !important;} .mceContainer > .row > .col-sm-12 > figure figcaption {position: relative; float: left; top: 0px; left: 0px; width: 35%; font-size: 1.6rem; line-height: 180%; margin: auto; padding: 0;} .mceContainer > .row > .col-sm-12 > figure:after {content: " "; clear: both; width: 100%; display: block} body[data-itemid="45"] #map_canvas, body[data-itemid="47"] #map_canvas {display: block; float: none !important; width: 100% !important; margin: 20px 0px 20px 0px !important; max-height: 250px;} .mceContainer section, .EventDesc section {width: 60%; float: left;} .mceContainer section figcaption {position: relative; left: 0px; top: 0px;} .mceContainer aside, .EventDesc aside {width: calc(40% - 60px); margin-left: 60px; float: left;} body[data-itemid='71'] .mceContainer > .row > .col-sm-12 > figure img {width: 40%; margin-right: -10%; margin-top: -20%;} body[data-itemid='71'] .mceContainer > .row > .col-sm-12 > figure figcaption {width: 60%; } #mobileMenu {display: none !important;} p, h5,h6 {font-size: 1.6rem; margin-bottom: 30px;} .rightImg {float: right; margin-left: 30px; margin-bottom: 30px; margin-top: 0px;} /* .tLevelCat {display: block; float: left; position: relative; width: calc(16.7% - 60px); margin: 30px; } #categoryList .tLevelCat:last-child {margin-right: 0px;} */ .tLevelCat .categoryLink:before { content: ''; position: absolute; top: 0; right: 0; border-top: 10px solid #f7f7f7; border-left: 10px solid transparent; width: 0; } section h2 {margin-bottom: 30px;} #SubMenuUl {margin-bottom: 0px;} #SubMenuUl li, .level3SubMenu li {margin-bottom: 0px;font-size: 2.2rem; } .level3SubMenu li {font-size: 1.8rem; } #topBanner {height: 105px; transition: all 0.2s ease; overflow: hidden;} #topBanner .loginHeader { text-transform: capitalize;font-weight: 200; font-size: 1.2rem; margin-bottom: 30px; margin-right: 10px;} #topMenu {font-size: 1.6rem; text-transform: capitalize; font-weight: 500;} #topMenu a {padding: 0px 10px 15px 10px; background: none !important; border-bottom: 5px solid transparent;} #topMenu a:hover {border-bottom: 5px solid rgba(255,255,255,0.8);} #topMenu li.selected a {border-bottom: 5px solid rgba(255,255,255,1);} #topMenu li:hover:after, #topMenu li.selected:after { height: 40px; opacity: 0.2; } #topMenu li.selected:after { opacity: 0.4; } #topMenu li:hover:after {background-size: 175px 100%; opacity: 0.2;} #topBanner.fixed-header #topMenu {font-size: 1.6rem; margin-top: 15px;} } /*=======================*/ /* 1024 - DESKTOP LAYOUT */ /*=======================*/ @media only screen and (min-width: 992px) { aside figure p {font-size: 1.4rem; margin: 0px; } aside figcaption {text-align: right;} /* Style adjustments for viewports 1024px and over go here */ body[data-itemid="14"] section figure {width: calc(33.333333% - 30px); float: left; margin: 15px;} .captionContain h1 {font-size: 2.8rem;} .categoryLink {font-size: 2.1rem;} .fpHighlightCard .cardSummary {width: 50%; } .fpHighlightCard .cardSummary header h3 {font-size: 2.4rem;height: auto !important; margin-bottom: 15px; line-height: 140%;} .fpHighlightCard.eventCard .eventDates {font-size: 1.6rem; font-weight: bold; height: auto; } #fpImageDiv {height: 380px;} #fpImageDiv .slideItem {height: 380px; background-position: center center;} #fpImageDiv .slideItem .caption h2 { font-size: 4rem;} #fpImageDiv .slideItem .captionContain {width: 53%; padding: 30px; position: relative; bottom: 20px; } #fpImageDiv .slideItem .caption p {font-size: 2.4rem; margin-top: 15px;} h1 {font-size: 3.2rem; margin-bottom: 30px;} h3 {font-weight: 300; font-size: 2.2rem; line-height: 170%;} #logo img {width: 240px; margin-top: 0px;} #exploreContain .leadIn h4 {font-size: 2.6rem !important; top: 70%;} #exploreContain .leadIn:after { background: rgba(0,0,0,0.4);} /* partner Logo */ .partnerLogo {width: 110px; position: absolute; top: 15px; left: 290px;} #topMenu {font-size: 1.6rem;} #topMenu a {padding: 0px 25px 15px 25px; background: none !important; border-bottom: 5px solid transparent;} } /* WIDE DESKTOP LAYOUT */ @media only screen and (min-width: 1200px) { /* Style adjustments for viewports 1200px and over go here */ body[data-itemid="14"] section figure {width: calc(50% - 30px); float: left; margin: 15px;} #fpImageDiv {height: 420px;} #fpImageDiv .slideItem {height: 420px;} #fpImageDiv .slideItem .caption {width: 100%; height: 100%; color: #ffffff;} #fpImageDiv .slideItem .captionContain {width: 40%; padding: 30px; position: relative;} #fpImageDiv .slideItem .caption {position: absolute; top: 0px; right: 20%; width: 100%; height: 100%; background-image: url("slideBGPink.svg?v=2"); background-size: auto 100%; background-position-x: 30%; background-repeat: no-repeat; color: #ffffff;} #topMenu {font-size: 2rem; text-transform: capitalize; font-weight: 500;} } /* WIDE DESKTOP LAYOUT */ @media only screen and (min-width: 1400px) { /* Style adjustments for viewports 1200px and over go here */ .container {width: 1360px;} #fpImageDiv {height: 520px;} #fpImageDiv .slideItem {height: 520px;} #fpImageDiv .slideItem .caption {} #fpImageDiv .slideItem .captionContain {width: 50%; padding: 30px; position: relative;} } /* Max width before this PARTICULAR table gets nasty This query will take effect for any screen smaller than 760px and also iPads specifically. RESPONSIVE TABLE */ @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { /* Force table to not be like tables anymore */ .respTable table, .respTable thead, .respTable tbody, .respTable th, .respTable td, .respTable tr { display: block; height: auto !important; width: 100%; padding: 10px; text-align: center; margin-bottom: 10px; } /* Hide table headers (but not display: none;, for accessibility) */ .respTable thead tr { position: absolute; top: -9999px; left: -9999px; } .respTable tr { border: 1px solid #444; box-shadow: 0px 0px 6px rgba(80,80,80,0.2)} .respTable td { /* Behave like a "row" */ border: none !important; position: relative; width: 100% !important; } .respTable td:before { /* Now like a table header */ position: absolute; /* Top/left values mimic padding */ top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; } } .calendar.left table { display: none; } .daterangepicker.dropdown-menu {max-width: 240px;} /* ==|== print styles ======================================================= Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */ a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } /* h5bp.com/t */ tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } /* ROGER GRID CHANGES 20250424 */ @media (min-width: 992px) { .col-md-5th { width: 20%; float: left; } } .td2025Col .categoryLink {padding: 5% 0px 5% 0px; font-size: 1.6rem; text-align: center;} @media (max-width: 480px) { .td2025Col .categoryLink {font-size: 1.2rem; margin-bottom: 5px;} }