/* ======================================================================= ## ++ Reset ========================================================================== */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0} input {border-radius: 0; -webkit-appearance: none;} body, html {-ms-text-size-adjust: none;-moz-text-size-adjust: none;-o-text-size-adjust: none;-webkit-text-size-adjust: none;} :focus {outline-color: transparent; outline-style: none;} ::placeholder {color:rgba(0,0,0,0.5); transition-duration: .25s;} input:focus::placeholder {color:rgba(0,0,0,0.5); } .email:focus::placeholder {color:rgba(0,0,0,0);} blockquote {display:none;} .color {/*color:#225599*/ background: linear-gradient(150deg, #303455, #225599, #73bcda); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .dev-query {text-align: center; margin: 12rem 0;} .tabs {position:relative;z-index: 5; height: 40px;} .strikeout { position: relative;} .strikeout::after {border-bottom: 0.125em solid red;content: "";left: 0;margin-top: calc(0.125em / 2 * -2);position: absolute;right: 0;top: 50%;transform:rotate(150deg)} /* ======================================================================= ## ++ Fixes ========================================================================== */ .no-l {border-top: none !important;} .no-line {border-top: none !important; padding-top: 0px !important;} .no-line-margin {border-top: none !important; padding-top: 0px !important; margin-top: 0px !important;} .no-line-bottom {border-bottom: none !important; padding-top: 0px !important;} .bottom-line{border-bottom: #000 2px solid;} .top-line{border-top: #000 2px solid;} .top-line-pt{border-top: #000 2px solid; padding-top: 2rem;} .padding-top{padding-top: 1.5rem !important;} .spacer-0-top {margin-top: 0px !important;} .spacer-8-top {margin-top: 0.5rem !important;} .spacer-16-top {margin-top: 1rem !important;} .spacer-24-top {margin-top: 1.5rem !important;} .spacer-32-top {margin-top: 2rem !important;} .spacer-36-top {margin-top: 2.25rem !important;} .spacer-48-top {margin-top: 3rem !important;} .spacer-60-top {margin-top: 3.75rem !important;} .spacer-72-top {margin-top: 4.5rem!important;} .spacer-80-top {margin-top: 5rem!important;} .spacer-96-top {margin-top: 6rem !important;} .spacer-104-top {margin-top: 6.5rem !important;} .spacer-120-top {margin-top: 7.5rem !important;} .spacer-0-bottom {margin-bottom: 0px !important;} .spacer-8-bottom {margin-bottom: 0.5rem !important;} .spacer-16-bottom {margin-bottom: 1rem !important;} .spacer-24-bottom {margin-bottom: 1.5rem !important;} .spacer-32-bottom {margin-top: 2rem !important;} .spacer-36-bottom {margin-bottom: 2.25rem !important;} .spacer-48-bottom {margin-bottom: 3rem !important;} .spacer-60-bottom {margin-bottom: 3.75rem !important;} .spacer-72-bottom {margin-bottom: 4.5rem!important;} .spacer-96-bottom {margin-bottom: 6rem !important;} .spacer-104-bottom {margin-bottom: 6.5rem !important;} .spacer-120-bottom {margin-bottom: 7.5rem !important;} .upcase {text-transform: uppercase;} em, i {font-style: italic;} sup {vertical-align: top; font-size: 0.7em; font-style:normal; position: relative; top:-0.25em;} /* * Tabs */ ul.primary { line-height: 1.375rem; height:1.438rem; margin-top:1rem;} ul.primary li a {padding: .2rem 1rem;} /* ======================================================================= ## ++ Do Not Display on Mobile ========================================================================== */ @media screen and (min-width: 897px) { .desktop-none {display:none !important;} } @media screen and (min-device-width: 320px) and (max-width: 896px) { .mobile-none {display:none !important;} .mobile-line {border-top:#000 2px solid; padding-top: 24px;} .mobile-grid-start {grid-row-start: 2;} } /* ======================================================================= ## ++ Layout ========================================================================== */ *{box-sizing:border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} *, *::before, *::after {box-sizing: inherit;} html {font-size: 100%; position: relative; box-sizing: border-box; font-size: 16px; font-family: FuturaBT-Book, Arial, sans-serif; -webkit-font-smoothing: antialiased;} @media screen and (max-width: 1190px) { html { font-size: 13px; } } @media screen and (max-width: 1000px) { html { font-size: 12px; } } @media screen and (max-width: 910px) { html { font-size: 11px; } } @media screen and (max-width: 896px) { html { font-size: 10px; } } @media screen and (orientation: portrait) and (max-width: 320px) { html { font-size: 8px; } } body {height: 100%;} #container {max-width: 1290px; margin: 0 auto; padding: 0 45px; } @media screen and (max-width: 992px) { #container{ max-width: 900px; padding: 0 30px; } } @media screen and (max-width: 896px) { #container{ max-width: 896px; padding: 0 15px; } } #page {position:relative; margin: 2.5rem 0 0 0;} @media screen and (min-device-width: 320px) and (max-width: 896px) { #page {margin: 80px 0 0 0;} } /* * Header Alert Message */ #alert {font-family: FuturaPT-Demi; width:100%; text-align: center; font-size: 1.375rem !important; line-height: 1.8rem; font-weight: bold; padding: 10px 0 8px 0; border-bottom: 2px solid #000;} #alert a { text-decoration: underline; } #alert span {padding:0 15px} @media screen and (max-width: 896px) { #alert {margin-top: 60px; font-size: 1.5rem !important; padding: 10px 15px 8px 15px;} } /* * Section Headers */ .section-header {display: grid; grid-template-columns: auto auto; border-top: #000 2px solid; padding: 1.5rem 0 2.25rem 0; width: 100%; margin-top: 1.5rem;} .section-header-gd {display:grid; grid-template-columns: auto auto; justify-content: space-between;} .section-header-op { padding: 3rem 0 0 0; margin: 3.75rem 0 0 0; border-top: 2px solid #000;} .section-header-mc {display: grid; grid-template-columns: auto auto; grid-column-gap: 8px; padding: 0 0 1rem 0; width: 100%;} .section-header-text {} .section-header-text-title {margin: 0 0 1.5rem 0;} .section-header-text-front {margin: 6rem 0 2rem 0;} .section-header-button {justify-self: end; margin-top: -4px; background:none !important;} .modal-header-button {justify-self: end; margin-top: -4px; background:none !important;} @media screen and (max-width: 640px) { .section-header {grid-template-columns: 1fr;} .section-header-nm {grid-template-columns: 1fr;} .section-header-xt {grid-template-columns: 1fr;} .section-header-ot {grid-template-columns: 1fr} .section-header-ng {grid-template-columns: 1fr;} .section-header-button {justify-self: start; margin-top: 8px;} .modal-header-button {justify-self: start; margin-top: -8px;} } /* ======================================================================= ## ++ Grids ========================================================================== */ .grid img {width:100%; height:auto; display: block;} .grid a {color:#inherit;} .grid-align-center {align-items: center;} .grid-2 {display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); grid-column-gap: 3rem; grid-row-gap: 3.75rem; box-sizing: border-box;} .grid-2-content {display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); grid-column-gap: 3rem; grid-row-gap: 3.75rem; box-sizing: border-box;} .grid-2-c {display: grid; grid-template-columns: auto auto; grid-column-gap: 2.25rem; grid-row-gap: 3.75rem; box-sizing: border-box;} .grid-2-body {display: grid; grid-template-columns: auto auto; grid-column-gap: 8px; box-sizing: border-box; font-size: 1.3125rem; letter-spacing: -.03px; line-height: 1.25em; font-weight: 300; font-family: "FuturaBT-Book"} .grid-3 {display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-column-gap: 2.25rem; grid-row-gap: 3.75rem; box-sizing: border-box;} .grid-3-body {display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-column-gap: 2.25rem; grid-row-gap: 0rem; box-sizing: border-box;} .grid-4 {display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); grid-column-gap: 2.25rem; grid-row-gap: 3.75rem; box-sizing: border-box;} .grid-5 {display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-column-gap: 2.25rem; grid-row-gap: 3.75rem; box-sizing: border-box;} .view-display-id-front_feature_new {grid-row-gap: 6rem;} @media screen and (min-device-width: 320px) and (max-width: 896px) { .view-display-id-front_feature_new {grid-row-gap: 3.75rem !important;} .view-display-id-as_current_artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;} .grid-2-body {font-size: 2rem} .grid-2, .grid-3, .grid-4, .grid-5 {grid-row-gap: 6rem;} } @media screen and (max-width: 992px) { .grid-3 {grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));} } @media screen and (max-width: 586px) { .grid-2 {grid-template-columns: 1fr;} .grid-2-content {grid-template-columns: 1fr; grid-row-gap: 0rem;} .grid-2-c {grid-template-columns: auto; grid-row-gap: 0rem;} .grid-3 {grid-template-columns: 1fr;} } /* * Grid with Sidebars */ .grid-left {} .grid-right {} .grid-center {} .grid-sidebar-left {display: grid; grid-template-columns: 282px auto; grid-column-gap: 72px; } .grid-sidebar-right {display: grid; grid-template-columns: auto 32%; grid-column-gap: 72px; } @media screen and (min-device-width: 320px) and (max-width: 896px) { .grid-sidebar-left {grid-template-columns: 1fr;} /*.grid-sidebar-left .grid-left {grid-row-start: 2;}*/ .grid-sidebar-right {grid-template-columns: 1fr;} /*.grid-sidebar-right .grid-right {grid-row-start: 2;}*/ .sidebar {grid-row-start: 2; margin-top: 7.5rem;} .sidebar .expander-container {display:none;} } /* * Exhibitions */ .grid-exh-sponsors {margin-top:8px; align-items: center;} .grid-exh-sponsors ul {list-style: none !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); grid-column-gap: 48px; margin: 0 !important; align-items: center;} .grid-exh-sponsors ul li {margin:0 0 24px 0 !important;} @media screen and (min-device-width: 320px) and (max-width: 896px) { .grid-exh-sponsors ul {grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));} .grid-exh-sponsors {grid-template-columns: 1fr; grid-gap: 24px; align-items: center;} .view-display-id-new_current_exhibitions {margin-bottom: -40px;} } /* * Exhibitions Overview */ .exhibition-container {width:100%; padding: 0; /*border-bottom: #000 2px solid;*/} .exhibition-head {border-top:2px solid #000; padding: 2rem 0 1.75rem 0;} .exhibition-body {margin-bottom: 60px;} .view-display-id-new_current_exhibitions .views-row {display:grid; grid-template-columns: 57% auto; grid-column-gap: 36px; align-items: center; justify-items:left; padding: 0 0 60px 0;} .exhibition-body .exh-3 .views-row:nth-child(-n+3) {} .page-exhibition .exhibition-body h4 {margin-bottom:1rem;} @media screen and (min-device-width: 320px) and (max-width: 896px) { .exhibition-body {} .exhibition-body .view .views-row {display:grid; grid-template-columns: 1fr; align-items: start; justify-items:left; margin-bottom: 0px;} .exhibition-body img {margin-bottom: 1rem;} .view-display-id-new_current_exhibitions .views-row {padding-bottom: 6rem;} } /* * General Sponsors */ .grid-general-sponsors ul {list-style: none !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); grid-column-gap: 24px; grid-row-gap: 24px; margin: 0 !important; align-items: center;} .grid-general-sponsors ul li {margin:0 !important;} /* * Sponsors */ .grid-event-sponsors ul {list-style: none !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-column-gap: 24px; margin: 0 !important; align-items:center;} .grid-event-sponsors ul li {margin:0 !important;} .grid-event-sponsors {border-top: #000 2px solid; padding: 24px 0; margin-top:18px; align-items: center;} .grid-event-sponsors .event-sponsors {margin-top:16px;} /* * Press */ .grid-press {display: grid; grid-template-columns: .6fr 2fr .8fr; grid-column-gap: 36px; box-sizing: border-box;} .view-press-releases {display:grid; grid-row-gap: 3.75rem;} .grid-loot {display: grid; grid-template-columns: .6fr 2fr .8fr; grid-column-gap: 24px; box-sizing: border-box;} @media screen and (max-width: 768px) { .grid-loot {grid-template-columns: 1fr;} .grid-loot .grid-left {display: none !important;} .grid-press {grid-template-columns: 1fr;} .grid-press .grid-left {display: none !important;} .grid-press .grid-right {margin-top:2rem;} } /* * Membership */ .grid-membership-level {display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-column-gap: 36px; grid-row-gap: 3.75rem; box-sizing: border-box;} .grid-m-level {} .mlevel-title {display: grid; grid-template-columns: max-content auto; grid-column-gap: 0.4rem; padding-top: 2rem; padding-right: 0px !important; border-top: 2px solid #000;} .mlevel-title h2 {display: inline; margin-top:0.4rem !important;} .mlevel-title span {margin-top:6px;} .mlevel-title h3 {margin-bottom:0 !important;} .mlevel-summary {margin: 1rem 1.5rem 0 0;} .grid-m-links {display: inline-grid; grid-template-columns: repeat(3, max-content); grid-gap: 1rem; box-sizing: border-box; margin-top:.5rem;} .m-expander {cursor:pointer;} @media screen and (max-width: 640px) { .grid-membership-level {display: grid; grid-template-columns: 1fr; grid-row-gap: 24px; box-sizing: border-box;} .grid-membership-level .views-row-1 { border-top:none; padding-top: 0px;} .m-expander {margin: 0px !important;} } /* * Audio Tours */ .grid-audio-container {display:grid; grid-row-gap: 0px; grid-template-columns: auto 290px auto; } .grid-audio {display:grid; grid-row-gap: 2px; grid-template-columns: auto; margin-bottom: 24px;} .grid-audio-2 {display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 2px; box-sizing: border-box;} /* * LOOT Artists */ .view-display-id-loot_artists {display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-gap: 8px;} /* * Event Views on Exhibiton Pages + Calender Events */ .view-ps-related-siblings {margin-bottom: 48px;} .view-ps-related-siblings .views-row {display:grid; grid-template-columns: auto; grid-template-rows: auto 100%; align-items: start;} .view-ps-related-siblings .views-row:nth-child(-n+3) {} .view-related-tag .views-row {display:grid; grid-template-columns: auto; grid-template-rows: auto 100%; align-items: start;} .view-related-tag .views-row:nth-child(-n+3) {} /* ======================================================================= ## ++ Buttons ========================================================================== */ a {color:#000; text-decoration: none; transition: color .25s; cursor: pointer;} a:hover {color:#225599;} a:active {color:#225599 !important;} input[type=search]::-webkit-search-cancel-button { display: none; } /* Image Hover Effect a img {filter: contrast(100%) brightness(100%) saturate(100%); -webkit-filter: contrast(100%) brightness(100%) saturate(100%); } a img:hover {filter: contrast(105%) brightness(101%) saturate(105%); -webkit-filter: contrast(105%) brightness(101%) saturate(105%); } img { transition: 0.5s filter ease-in; -webkit-transition: 0.5s -webkit-filter ease-in; } */ /* Button Border Hover Effect -> */ .button { background: linear-gradient(150deg, #303455, #225599, #73bcda); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite; border-radius: 7px; display: inline-block; max-height: 52px; } a.active {/*color:#225599;*/ background: linear-gradient(150deg, #303455, #225599, #73bcda); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .button a {display: inline-block; background-color:#fff; color:#000; font-size: 1.5rem; text-transform: uppercase; line-height: 1.5rem; padding: .8125rem .625rem .562rem .625rem; text-decoration: none; letter-spacing: 0.47px; font-family: FuturaPT-Demi; transition: background-color .25s; cursor: pointer; border:0px solid #225599; border-radius: 5px; margin:3px;} .button a:hover {background-color: #225599; color:#fff; border:3px solid #225599; margin:0px;} .button-mc {height: 52px !important; display: inline-block !important; background-color:#fff !important; color:#000 !important; font-size: 1.5rem !important; text-transform: uppercase !important; line-height: 1.5rem !important; padding: 13px 10px 8px 10px !important; text-decoration: none !important; letter-spacing: 0.47px !important; font-family: FuturaPT-Demi; transition: background-color .25s !important; cursor: pointer !important; border:3px solid #225599 !important; border-radius: 7px !important; margin: 1rem 0 0 0 !important; background:none !important} .button-mc:hover {background-color: #225599 !important; color:#fff !important;} /* <- Button Border Hover Effect */ /* ORIGINAL BUTTON CODE .button a {height: 3.25rem; display: inline-block; background-color:#fff; color:#000; font-size: 1.5rem; text-transform: uppercase; line-height: 1.5rem; padding: .8125rem .625rem .5rem .625rem; text-decoration: none; letter-spacing: 0.47px; font-family: FuturaPT-Demi; transition: background-color .25s; cursor: pointer; border:3px solid #225599; border-radius: 7px;} .button a:hover {background-color: #225599; color:#fff;} .button-mc {height: 52px !important; display: inline-block !important; background-color:#fff !important; color:#000 !important; font-size: 1.5rem !important; text-transform: uppercase !important; line-height: 1.5rem !important; padding: 13px 10px 8px 10px !important; text-decoration: none !important; letter-spacing: 0.47px !important; font-family: FuturaPT-Demi; transition: background-color .25s !important; cursor: pointer !important; border:3px solid #225599 !important; border-radius: 7px !important; margin: 1rem 0 0 0 !important;} .button-mc:hover {background-color: #225599 !important; color:#fff !important;} */ .m-button a {height: 52px; width: 100%; text-align: center; display: inline-block; background-color:#fff; color:#000; font-size: 1.5rem; text-transform: uppercase; line-height: 1.5rem; padding: 13px 10px 8px 10px; text-decoration: none; letter-spacing: 0.47px; font-family: FuturaPT-Demi; transition: background-color .25s; cursor: pointer; border:3px solid #225599; border-radius: 7px;} .m-button a:hover {background-color: #225599; color:#fff;} .a-button a {height: 52px; width: 100%; text-align: center; display: inline-block; background-color:#fff; color:#000; font-size: 1.5rem; text-transform: uppercase; line-height: 1.5rem; padding: 13px 10px 8px 10px; text-decoration: none; letter-spacing: 0.47px; font-family: FuturaPT-Demi; transition: background-color .25s; cursor: pointer; border:3px solid #225599; border-radius: 7px;} .a-button a:hover {background-color: #225599; color:#fff;} p a {text-decoration: underline; color: inherit; /*transition-delay: .25s;*/ transition-duration: .25s} p a:hover {color: #225599 !important;} @media screen and (min-device-width: 320px) and (max-width: 896px) { /* ORIGINAL BUTTON CODE .button a, .m-button a, .a-button a {font-size: 1.875em; line-height: 42px; height:44px; padding: 0px 10px; border: 2px solid #225599;} */ .button a, .m-button a, .a-button a {font-size: 1.875em; line-height: 46px; height:44px; padding: 0px 10px; } .button a:hover {height:50px;} } /* ======================================================================= ## ++ Swiper ========================================================================== */ /* * Page Swiper */ .swipe {padding: 0 45px; position:relative; /*margin-top:5rem;*/} .swiper-container {} .swiper-wrapper {align-items: center;transform-style: flat; -webkit-transform-style: flat; -moz-transform-style: flat;} .swiper-page-holder {display:grid; margin: 0 0 48px 0; grid-template-columns: minmax(1px, 832px);} .swiper-page-holder .swiper-container {margin-top: 0px; width:100%; } .swiper-slide {} .swiper-zoom {width:100%; padding-bottom: 56.25%; position: relative; height: 0} .swiper-zoom-inner {position: absolute; top: 0; right: 0; bottom: 0; left: 0} @media screen and (min-device-width: 320px) and (max-width: 896px) { .swipe {padding: 0px;} .swiper-container {margin-left: -15px; width: 100vw !important;} /*.grid-sidebar-right .swiper-container {margin-left: 0px;}*/ } /* * Hero Swiper */ .hero-swiper-grid {display: grid; grid-template-columns: 39.584% auto; align-items: center; position: relative;} .hero-swiper-image {background: url('/themes/MADv4/images/ui/load.png') no-repeat scroll 50% 50%;} .hero-swiper-image img {object-fit: cover; width: 100%; height: auto; max-height: 100%; display: block;} .hero-swiper-image video {object-fit: cover; width: 100%; height: auto; max-height: 100%; display: block;} .hero-swiper-text {display:flex; background-color: #999; color:#000; height: 100%; width:111%; clip-path: ellipse(95% 115% at 5% 50%); -webkit-clip-path: ellipse(95% 115% at 5% 50%); position: relative; z-index: 10; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);} .hero-swiper-text-inner {margin:auto; padding: 0 10% 0 16%; /*padding: 0 5% 0 15%;*/ width: 100%;} .hero-swiper-text a {text-decoration:none; color: inherit;} /* Fix for Garmenting */ .hero-swiper-title h1 {font-family: FuturaPT-Heavy; font-size: 4rem; letter-spacing: -0.1px; line-height: 4rem; max-width: 95%;} @media screen and (min-device-width: 320px) and (max-width: 1270px) { .hero-swiper-title h1 {font-size: 3.7rem; line-height: 3.7rem;} } .hero-swiper-subtitle {margin-top: .75rem; text-transform: uppercase;} .hero-swiper-subtitle h2 {line-height: 1.8125rem;} .hero-swiper-dates {margin-top: .75rem; line-height: 24px; display: inline-block; margin-right: 50px;} /*.hero-swiper-dates .date-display-end {display: block;}*/ .hero-swiper-text svg {position:absolute; top:0; left:39.5%; z-index: 999; height:100%; width:auto; color:inherit; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);} @media screen and (min-device-width: 320px) and (max-width: 896px) { .hero-swiper-grid {grid-template-columns: 1fr;} .hero-swiper-image {grid-row-start: 1;} .hero-swiper-text { height: 210px; clip-path: none; -webkit-clip-path:none; width: 100%;} .hero-swiper-text-inner { margin:auto; padding: 0 24px;} /*.hero-swiper-title {margin-right:35px;} This is a temporary line break fix */ .hero-swiper-subtitle {margin-top: 1.5rem;} .hero-swiper-dates {display: flex; margin-top: 1.5rem; margin-right: 0px;} .hero-swiper-text svg {display:none;} .swiper-button-white {display:none;} .swiper-button-black {display:none;} } /* ======================================================================= ## ++ Header ========================================================================== */ header {position:relative; width: 100%} #header-container {width: 100%;} .header-branding {display: grid; grid-template-columns: 1fr; margin-bottom: 12px;} .header-logo, .header-logo-front {margin-bottom: 0px;} .header-logo .hl {transition: fill .25s;} .header-logo:hover .hl {fill:#225599;} .header-info { display: grid; justify-content: space-between; /*align-items: center;*/ grid-template-columns: auto auto; margin: 42px 0 18px 0;} .header-info li {list-style-type: none;} .header-info .header-museum-hours {font-family: FuturaPT-Demi; } .header-museum-hours a, .header-museum-hours h6, .header-museum-hours p {/*color:#225599; transition-duration: .25s;*/ background: linear-gradient(150deg, #303455, #225599, #73bcda); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .header-museum-hours a:hover { background: linear-gradient(150deg, #225599); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* * Header Nav */ .mobile-nav-btn {display: none;} .header-nav { position:relative; width: inherit; } .header-nav-inner {max-width: 1200px; margin: 0 auto; display:grid; grid-template-columns: auto 24px; padding: 18px 0 12px 0; background-color:#fff;} @media screen and (max-width: 992px) { .header-nav-inner{ max-width: 840px; } } .header-nav-items {max-width: 1160px; position: relative;} .header-nav .menu {display:grid; grid-template-columns: auto auto auto auto auto auto auto; align-items: center; height: 28px;} .header-nav .menu li {display:inline-block; margin: 0; padding: 0;} .header-nav a {color: #000; font-family: FuturaPT-Demi; font-size: 1.5rem; letter-spacing: 0.75px; text-align: left; text-transform: uppercase; line-height: 1.5rem; display: inline-block; padding:0; margin:0;} .header-nav a:hover {color:#225599;} .header-nav a.active {/*color:#225599;*/ background: linear-gradient(150deg, #303455, #225599, #73bcda); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .header-nav ul {list-style: none; margin: 0; padding:0;} @media screen and (min-device-width: 320px) and (max-width: 896px) { header {position: fixed; top:0; left:0; right:0; z-index: 10; background-color: #fff; transition: background-color .25s; border-bottom: 2px solid #000;} .header-branding {display:grid; padding: 12px 15px; margin:0px; align-items: center; grid-template-columns: auto 35px;} .header-logo, .header-logo-front {margin-right: 24px} .header-logo svg, .header-logo-front svg {max-height: 32px; height: 100%;} .header-search-button {justify-self:end;} .header-nav-button {justify-self:end;} .header-info {margin:0px;} .mobile-nav-btn {display: block; color:#000; font-family: FuturaPT-Heavy; font-size: 28px; line-height: 28px; padding-top:2px; text-transform: uppercase; cursor: pointer;} .mobile-nav { background-color: #000; display: none; opacity: 0; height: 0px;} .mobile-nav .menu {} .mobile-nav .menu li {margin: 0px; padding: 0;} .mobile-nav .menu li a {display: block; font-family: FuturaPT-Demi; color: #fff; font-size: 2.5rem; line-height: 2.5rem; border-top: 2px solid #fff; padding:1.5rem 15px 1.25rem 15px; text-transform: uppercase; margin:0px; letter-spacing: .8px;} .menu-search-button {display: block; font-family: FuturaPT-Demi; color: #fff; font-size: 2.5rem; line-height: 2.5rem; border-top: 2px solid #fff; padding:1.5rem 15px 1.25rem 15px; text-transform: uppercase; margin:0px; cursor: pointer;} .home-button {width: 85%; height: 58px; position: absolute; top: 0; left: 0; cursor: pointer; display:block;} .mobile-nav .search-block-form-menu svg {transition: fill .25s;} .mobile-nav .search-block-form-menu {border-top: 2px solid #fff; padding: 1.25rem 0 .5rem 0; position: relative; display:none;} .mobile-nav .search-block-form-menu-inner {margin:0 15px; border: 2px solid rgba(255,255,255,1); border-radius: 7px;} .mobile-nav .search-block-form-menu input::placeholder {color:rgba(255,255,255,1); transition-duration: .25s;} .mobile-nav .search-block-form-menu input:focus::placeholder {color:rgba(0,0,0,0);} .mobile-nav .search-block-form-menu #edit-search-block-form--2 {font-family: FuturaBT-Book; height: 24px; font-size: 2em; line-height:2em; color: #fff; letter-spacing: 0.75px; text-align: left; border: none; padding: 0 24px 0 0 !important; max-width: 1200px; width: 92%; background-color: #000; border-radius: 7px;} .mobile-nav .form-submit {display: block; position:absolute; border: none !important; background-color: transparent !important; top: 25%; right: 18px; height: 40px !important; width: 40px !important; padding: 0px !important;} .mobile-nav .header-museum-hours {padding: .5rem 15px 3rem 15px; color: #fff;} .header-nav{display: none;} } /*! * Hamburgers * @description Tasty CSS-animated hamburgers * @author Jonathan Suh @jonsuh * @site https://jonsuh.com/hamburgers * @link https://github.com/jonsuh/hamburgers */ .hamburger {padding: 5px 0px 2px 5px;display: block;cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible;} /*.hamburger:hover {} .hamburger.is-active:hover {}*/ .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {background-color: #fff;} .hamburger-box {width: 30px;height: 24px;display: inline-block;position: relative;} .hamburger-inner {display: block;top: 50%;margin-top: -2px;} .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 30px;height: 2px;background-color: #000;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease;} .hamburger-inner::before, .hamburger-inner::after {content: "";display: block;} .hamburger-inner::before {top: -10px;} .hamburger-inner::after {bottom: -10px;} /* /* * Squeeze */ .hamburger--squeeze .hamburger-inner {transition-duration: 0.075s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);} .hamburger--squeeze .hamburger-inner::before {transition: top 0.075s 0.12s ease, opacity 0.075s ease;} .hamburger--squeeze .hamburger-inner::after {transition: bottom 0.075s 0.12s ease, transform 0.075s cubic-bezier(0.55, 0.055, 0.675, 0.19);} .hamburger--squeeze.is-active .hamburger-inner {transform: rotate(45deg);transition-delay: 0.12s;transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);} .hamburger--squeeze.is-active .hamburger-inner::before {top: 0;opacity: 0;transition: top 0.075s ease, opacity 0.075s 0.12s ease;} .hamburger--squeeze.is-active .hamburger-inner::after {bottom: 0;transform: rotate(-90deg);transition: bottom 0.075s ease, transform 0.075s 0.12s cubic-bezier(0.215, 0.61, 0.355, 1);} /*@media screen and (max-width: 640px) { .header-nav {height:44px; padding: 10px 0 10px 0;} .mobile-nav-btn {display: inline-block; color:#000; font-family: FuturaPT-Heavy; font-size: 1.75rem; line-height: 22px; padding-top:2px; text-transform: uppercase; cursor: pointer;} .header-nav-items {display: block;} .header-nav .menu {display: none; z-index: 999999; position: relative; height: 0px; margin-top: 10px;} .header-nav .menu li {display:table; margin: 0; padding: 0; } .header-nav .menu a {font-size: 1.067rem; background-color: #fff; padding: 8px 24px; } }*/ .sticky {position: fixed; top: 0; left: 0; right:0; z-index: 100; padding: 0 45px; background-color: #fff;} @media screen and (max-width: 992px) { .sticky{ padding: 0 30px; } } /* * Nav Logo */ .nav-logo {position:absolute; top: 18px; z-index:0; filter: alpha(opacity=0);opacity:0;} .nav-logo svg {height:22px; width:auto; margin: 0;} .nav-logo .nav-logo-svg {transition: fill .25s;} .nav-logo:hover .nav-logo-svg{fill:#225599;} /* * Header Search */ header .header-search-button {z-index: 5;} header .header-search-button a {display: block; height: 24px; width: 24px; cursor: pointer;} header div.header-search-button .search-icon {transition: fill .25s;} header div.header-search-button:hover .search-icon {fill:#225599;} header .search-form {margin:0 !important; padding:0;} header .search-block-form {/*position:absolute;*/ display: none; width:100%; z-index: 25; text-align: center; } header .block-search {width: 100%;} .header-nav .form-item {margin-top:0px;} header .search-block-form input {font-family: FuturaBT-Bold; width: 100%; height: 44px; font-size: 1.5em; line-height:1.5em; color: #000; letter-spacing: 0.75px; text-align: right; border: 2px solid rgba(0,0,0,1); border-radius: 7px; padding: 3px 24px 0 24px; max-width: 1200px; margin:0 auto;} @media screen and (max-width: 992px) { header .search-block-form input{ max-width: 840px; } } header .search-block-form .custom-search-box {display: block;} header .form-submit {display:none;} .sticky-search {position: fixed !important; top: 52px; left: 0; right:0; z-index: 99; border-top: 0; padding:0 45px;} @media screen and (max-width: 992px) { .sticky-search{ padding: 0 30px; } } /* ======================================================================= ## ++ Page ========================================================================== */ .page-section img {margin-bottom: 16px;} /* * Google map responsive */ .google-maps {position: relative; padding-bottom: 40%; height: 0; overflow: hidden; margin-bottom: 16px;} .google-maps iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;} /* * Pages with scrolling sticky headers */ .head-scroll .feature-title {background-color: #fff; position: relative; padding-top:2rem; border-top: #000 2px solid;} @media screen and (max-width: 896px) { .head-scroll .feature-title { position: sticky; top: 48px; } .head-scroll .grid-4 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } .head-scroll h5 {font-size: 2.2rem !important;} } .oll h2 {margin-top:3.5rem;} .oll h4 {margin-top:2.5rem; margin-bottom: 1rem !important;} .oll h6 {font-size: 1.3125rem !important; margin-bottom: .5rem !important; margin-top:-.5rem !important;} /* ======================================================================= ## ++ footer ========================================================================== */ footer {width: 100%; border-top: #000 2px solid; margin-top: 12rem} #footer-content {display:grid; grid-template-columns: repeat(2, 1fr); margin: 32px auto 96px auto; grid-column-start: 2; width: 100%;} #footer-content .footer-left {} #footer-content .footer-right {justify-self:end; display: grid; width:80%;} #footer-content .footer-logo {} #footer-content .footer-logo svg {height:112px; width:auto;} #footer-content .footer-logo .fl {transition: fill .25s;} #footer-content .footer-logo svg:hover .fl {fill:#225599;} #footer-content .footer-info {} #footer-content .footer-address {margin: 0 0 24px 0;} #footer-content .footer-museum-hours {margin: 0 0 96px 0;} #footer-content .footer-museum-hours li {list-style-type:none;} #footer-content .footer-museum-hours a, #footer-content .footer-museum-hours h6, #footer-content .footer-museum-hours p {/*color:#225599; transition-duration: .25s;*/ background: linear-gradient(150deg, #303455, #225599, #73bcda); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #footer-content .footer-museum-hours a:hover {color:#225599;} #footer-content .footer-nav {margin-bottom: 82px;} #footer-content .footer-nav .menu {display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between;} #footer-content .footer-nav li {list-style-type: none; list-style-image: none; margin: 0; padding: 0;} #footer-content .footer-nav a {font-size: 1.25rem; text-decoration:none; margin-bottom: 6px; display: block; } #footer-content .footer-mailchimp {position: relative;} #footer-content #footer-mc-embed-signup {} #footer-content #footer-mc-form {border:2px solid rgba(0,0,0,1); border-radius: 7px; height: 50px; transition-duration: 0.7s;} #footer-content #footer-mc-form:hover {border:2px solid rgba(34,85,153,1);} #footer-content #footer-mc-form:focus-within {border:2px solid rgba(34,85,153,1);} #footer-content .footer-mc-input {float:left; width: 79%;} #footer-content .footer-mc-input input {height:44px; font-size:1.5rem; font-family: FuturaPT-Demi; padding:4px 0 0 8px; width:100%; border:none; border-radius: 7px; line-height: 44px; background-color: transparent !important;} #footer-content .footer-mc-button {float:right; position: relative;} #footer-content .footer-mc-button .button {width:60px; height:46px; padding: 0; margin: 0; background-color:transparent; cursor: pointer; border:none; position: relative; z-index: 99; background:none;} #footer-content .footer-mc-button:hover .social-icon-svg {fill:#225599;} #footer-content .footer-mc-button svg {position:absolute; top:11px; right:8px; height: 24px; width: auto;} #footer-content #footer-mc-responses {position:absolute; font-family: FuturaPT-Demi; padding:0 0 0 8px; font-size: .9rem; text-transform: uppercase; top: 56px; max-width: 225px;} #footer-content #mce-success-response {color:#225599;} #footer-content #mce-error-response {color:#ff0000;} #footer-content .footer-connect {display: grid; grid-template-columns: auto; grid-column-gap: 24px; align-self: end; margin-bottom: 6px; align-items: center;} #footer-content .footer-connect-head {font-size:1.875em; font-family: FuturaPT-Heavy; letter-spacing: -.25} #footer-content .footer-social {display:grid; grid-template-columns: auto auto auto auto; grid-column-gap: 16px; justify-self: end;} /*#footer-content .footer-social img {height:24px; width:auto;}*/ #footer-content .footer-social svg {height:32px; width:auto;} #footer-content .social-icon-svg {transition: fill .25s; fill:#000000} #footer-content .social-icon:hover .social-icon-svg {fill:#225599;} @media screen and (max-width: 1162px) { #footer-content .footer-social {grid-column-gap: 12px;} #footer-content #footer-mc-responses {max-width: 150px;} } @media screen and (max-width: 936px) { #footer-content .footer-nav {margin-bottom: 6em;} #footer-content .footer-mailchimp {margin-bottom: 3em;} #footer-content .footer-museum-hours {margin-bottom: 3.75em;} #footer-content {grid-template-columns: 1fr;} #footer-content .footer-logo svg {height:72px; width:auto;} #footer-content .footer-right {justify-self:center; display: grid; width:100%; grid-row-start: 1;} #footer-content .footer-connect {grid-template-columns: 240px auto; grid-column-gap: 4px; margin-bottom: 3rem;} #footer-content .footer-nav .menu {/*grid-column-gap: 50px;*/} #footer-content .footer-social {grid-template-columns: repeat(5, auto) ; grid-column-gap: 24px; justify-self: start;} #footer-content .footer-social svg {height:30px; width:auto;} } @media screen and (min-device-width: 320px) and (max-width: 896px) { #footer-content .footer-nav {margin-bottom: 6em;} #footer-content .footer-mailchimp {margin-bottom: 3em;} #footer-content .footer-museum-hours {margin-bottom: 3.75em;} #footer-content .footer-connect {grid-template-columns: 1fr; grid-gap: 24px} #footer-content .footer-social {justify-self:start; grid-gap: 24px;} #footer-content .footer-nav .menu {/*display: inline-block;*/ grid-template-columns: repeat(3, 100px);} /*#footer-content .footer-nav .menu > li {float: left; margin-right:36px;} #footer-content .footer-nav .menu > li:last-child {margin-right:0px;}*/ #footer-content .footer-nav a {font-size: 1.5rem; line-height: 1.75rem;} #footer-content #footer-mc-responses {max-width: 100%;} } /* ======================================================================= ## ++ Login and Pass Retrevial ========================================================================== */ #user-login label {margin-bottom:.5rem;} #user-login .description {margin-top:.5rem; margin-bottom: 1.5rem;} #user-login input {font-family: FuturaBT-Bold; height: 44px; font-size: 1.5em; line-height:1.5em; color: #000; letter-spacing: 0.75px; text-align: left; border: 2px solid rgba(0,0,0,1); border-radius: 7px; padding: 3px 24px 0 24px; transition: 0.25s;} #user-login #edit-name, #user-login #edit-pass {width:100%; max-width: 400px;} #user-login input:focus {border: 2px solid #225599 !important;} #user-login #edit-submit {background-color: #fff; border: 2px solid #225599 !important; cursor:pointer; transition: 0.25s;} #user-login #edit-submit:hover {background-color: #225599; color:#fff;} #user-pass label {margin-bottom:.5rem;} #user-pass .description {margin-top:.5rem; margin-bottom: 1.5rem;} #user-pass input {font-family: FuturaBT-Bold; height: 44px; font-size: 1.5em; line-height:1.5em; color: #000; letter-spacing: 0.75px; text-align: left; border: 2px solid rgba(0,0,0,1); border-radius: 7px; padding: 3px 24px 0 24px; transition: 0.25s;} #user-pass #edit-name, #user-login #edit-pass {width:100%; max-width: 400px;} #user-pass input:focus {border: 2px solid #225599 !important;} #user-pass #edit-submit {background-color: #fff; border: 2px solid #225599 !important; cursor:pointer; transition: 0.25s;} #user-pass #edit-submit:hover {background-color: #225599; color:#fff;} /* ======================================================================= ## ++ Typography ========================================================================== */ /* Kerning for 1 ------- .page-title-alt h1, h1 a { -letter-kern: -letter-pairs('01': -5px, '19': -7px); }*/ p {font-family: FuturaBT-Book; font-size: 1.3125rem; letter-spacing: 0px; line-height: 1.625rem; font-weight:300; margin-bottom: 1.5rem;} p strong, li strong {font-family: FuturaBT-Bold;} .small-copy p, li .small-copy, .small-copy {color: #000000; font-family: FuturaBT-Book!important; font-size: 1.0625rem!important; font-weight: 300!important; line-height: 1.375rem!important; margin-bottom: 1.5em!important; max-width:800px;} h1 {font-family: FuturaPT-Heavy; font-size: 4rem; letter-spacing: -0.1px; line-height: 4rem; max-width: 95%;} h2 {font-family: FuturaPT-Demi; font-size: 1.5rem; letter-spacing: 0.75px; line-height: 1.5rem; text-transform: uppercase;} h3 {font-family: FuturaPT-Heavy; font-size: 2rem; letter-spacing: -0.5px; line-height: 2.125rem} h4 {font-family: FuturaPT-Demi; font-size: 1.5rem; letter-spacing: -0.25px; line-height: 1.5rem;} h5 {font-family: FuturaPT-Heavy; font-size: 1.875rem; letter-spacing: -0.25px; line-height: 2.0625rem;} h6 {font-family: FuturaPT-Demi; font-size: 1.25rem; letter-spacing: 0.75px; line-height: 1.625rem;} @media screen and (min-device-width: 320px) and (max-width: 896px) { p {font-family: FuturaBT-Book; font-size: 2rem; letter-spacing: 0px; line-height: 2.5rem; font-weight:300; margin-bottom: 2rem;} .small-copy p, li .small-copy, .small-copy {color: #000000; font-family: FuturaBT-Book !important; font-size: 1.1875rem!important; font-weight: 300 !important; line-height: 1.5625rem !important; margin-bottom: 1.5em !important; max-width:800px;} h1 {font-family: FuturaPT-Heavy; font-size: 4rem; letter-spacing: -0.3px; line-height: 4rem; max-width: 98%;} h2 {font-family: FuturaPT-Demi; font-size: 1.875rem; letter-spacing: 1.15px; line-height: 1.875rem; text-transform: uppercase;} h2 a.color{font-family: FuturaPT-Demi; font-size: 1.875rem; letter-spacing: 1.15px; line-height: 1.875rem; text-transform: uppercase; margin-top: 75px;} h3 {font-family: FuturaPT-Heavy; font-size: 2.625rem; letter-spacing: -0.6px; line-height: 2.8125rem} h4 {font-family: FuturaPT-Demi; font-size: 2.0625rem; letter-spacing: -0.25px; line-height: 1.9375rem;} h5 {font-family: FuturaPT-Heavy; font-size: 3rem; letter-spacing: 0.8px; line-height: 3rem;} h6 {font-family: FuturaPT-Demi; font-size: 1.25rem; letter-spacing: 0.75px; line-height: 1.625rem;} } .sidebar p {margin-bottom: 1.5rem;} .sidebar ul li {font-family: FuturaBT-Book; font-size: 1.125rem; letter-spacing: -.25px; line-height: 21px; margin-bottom: .75rem;} .grid-right h2 {margin-bottom:.85rem;} .grid-left h2 {margin-bottom:.85rem;} .grid-right h3 {margin-bottom:1.5rem;} .grid-left h3 {margin-bottom:1.5rem;} .grid-right h4 {margin-bottom:1.5rem;} .grid-left h4 {margin-bottom:1.5rem;} .grid-right h6 {margin-bottom:1.5rem;} .grid-left h6 {margin-bottom:1.5rem;} .grid-left li a {text-decoration: underline;} .oppertunity h2 {margin-top:3.5rem} .grid-inner {} .grid-image {margin: 0 0 1.75rem 0;} .grid-type {margin: 0 0 1rem 0;} .grid-type a {/*color:#225599;*/ background: linear-gradient(150deg, #303455, #225599, #73bcda); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .grid-title {margin: 0 !important; padding-right: 2.125rem;} .view-artist-studios .grid-title {padding-right: 0rem;} .grid-dates {margin: .875rem 0 0 0 !important;} .view-calendar-exhibitions .grid-title {margin: 1.5rem 0 .5rem 0 !important; padding-right: 2.125rem;} .view-category-page .grid-title {margin: 1.5rem 0 .5rem 0 !important; padding-right: 2.125rem;} .view-trp .grid-title {margin: 1.5rem 0 .5rem 0 !important; padding-right: 2.125rem;} .grid-title-alt {margin: 1.5rem 0 .5rem 0 !important; padding-right: 0px;} .grid-subtitle {margin: 0.75rem 0 0 0; padding-right: 2.125rem;} .grid-text {margin-top:0.75rem; padding-right: 2.125rem;} .grid-text p {margin-bottom:0px} .grid-button {margin-top:.75rem;} .feature-title {margin-bottom:1.75rem;} .feature-image {margin-bottom:1.75rem;} .feature-tag {margin-bottom:.875rem;} .feature-text {padding-right: 2.125rem;} .list-inner {} .list-text-inner p {margin-bottom:0px} .list-type {margin: 0 0 0.75rem 0;} .list-type a {color:#225599;} .list-title {padding-right: 2.125rem;} /* Temporary for Moyer Pepe*/.exhibition-body .list-title {padding-right: 0.5rem;} .list-subtitle {margin: 0.75rem 0 0 0; text-transform: uppercase; padding-right: 2.125rem;} .list-subtitle h2 {line-height: 1.8125rem;} .list-text {margin: 0.75rem 0 0 0;} .list-text p {margin-bottom:0px; padding-right: 2.125rem;} .list-button-bottom {margin: 0.75rem 0 0 0;} .list-dates {margin: 1.5rem 0 0 0;} .past-exh .list-dates {line-height: 1rem; display: inline-block;} .general-hours {} .general-hours h4 {margin-bottom: 1rem;} .general-hours h5 {margin-bottom: 0.5rem;} .releases h3 {margin-bottom:0.5rem;} .releases img {margin-bottom:1.5rem;} .releases .file img {margin-bottom:0px;} .releases p {margin-bottom:1.5rem;} .releases-dateline h2 {margin-bottom: 1.5rem;} .releases-title h3 {margin-bottom: 1.25rem;} .releases-button {margin-bottom: 1.5rem;} .view-display-id-loot_artists h6 {font-family: FuturaBT-Book; font-size: 1.125rem; letter-spacing: -.25px; line-height: 1.125em; margin-bottom:0px;} /* * Page */ .page-title {margin: 0 0 1.75rem 0} .page-title-alt {margin: 0 0 1.25rem 0} .page-subtitle {margin:0.5rem 0 3rem 0; } .page-subtitle-alt {margin:0.5rem 0 1rem 0; } .page-section {margin-bottom: 3.5rem;} .page-section-title {margin-top: 0px;} .page-section li a {text-decoration: underline; color: inherit; /*transition-delay: .25s;*/ transition-duration: .25s} .page-section li a:hover {color: #225599 !important;} .grid-sidebar-right .grid-right .page-section {margin-bottom: 1.5rem;} .grid-sidebar-right .grid-right .page-section-title {border-top:2px solid #000; padding-top: 1.5rem} .grid-sidebar-right .grid-right .page-section-title-top {border-top:none; padding-top:none;} .grid-sidebar-left .grid-left .page-section {margin-bottom: 1.5rem;} .grid-sidebar-left .grid-left .page-section-title {border-top:2px solid #000; padding-top: 1.5rem} .grid-sidebar-left .grid-left .page-section-title-top {border-top:none; padding-top:none;} .grid-press .grid-right .page-section {margin-bottom: 1.5rem;} .grid-press .grid-right .page-section-title {border-top:2px solid #000; padding-top: 1.5rem} .grid-press .grid-right .page-section-title-top {border-top:none; padding-top:none;} .grid-h2-lines .page-section {margin-bottom: 1.5rem;} .grid-h2-lines .page-section-title {border-top:2px solid #000; padding-top: 1.5rem; margin-bottom: .85rem;} .grid-h2-lines .page-section-title-top {border-top:none; padding-top:none;} .sidebar-section {margin-bottom: 1.5rem;} .views-section {margin-bottom: 7.5rem;} .page-image {position:relative;} .page-image-hero {width:100%; margin: 1.5rem 0 3.75rem 0; display:block;} .page-image-hero-alt {width:100%; margin: 1.5rem 0 0 0; display:block;} .page-image-regular {width:100%; margin: 0 0 1rem 0; display:block;} /*.search-snippet {font-size:1.25rem;}*/ .search-page .search-form {display:none;} .search-results {list-style-type: none;} @media screen and (min-device-width: 320px) and (max-width: 896px) { .page-section-title-top {border-top:2px solid #000 !important; padding-top: 1.5rem !important;} } /*@font-face {font-family: 'FuturaBT-Medium';src: url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_0_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_0_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_0_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_0_0.ttf') format('truetype');} @font-face {font-family: 'FuturaBT-MediumItalic';src: url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_1_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_1_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_1_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_1_0.ttf') format('truetype');}*/ /*@font-face {font-family: 'FuturaBT-Heavy';src: url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_2_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_2_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_2_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_2_0.ttf') format('truetype');} @font-face {font-family: 'FuturaBT-HeavyItalic';src: url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_3_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_3_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_3_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_3_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/2F17DB_3_0.ttf') format('truetype');}*/ @font-face {font-family: 'FuturaPT-Demi';src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_0_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_0_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_0_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_0_0.ttf') format('truetype');} @font-face {font-family: 'FuturaPT-DemiObl';src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_2_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_2_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_2_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_2_0.ttf') format('truetype');} @font-face {font-family: 'FuturaPT-Heavy';src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_1_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_1_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_1_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_1_0.ttf') format('truetype');} @font-face {font-family: 'FuturaPT-HeavyObl';src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_3_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_3_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_3_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_3_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_3_0.ttf') format('truetype');} @font-face {font-family: 'FuturaBT-Book';src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_6_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_6_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_6_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_6_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_6_0.ttf') format('truetype');} @font-face {font-family: 'FuturaBT-BookItalic';src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_4_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_4_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_4_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_4_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_4_0.ttf') format('truetype');} @font-face {font-family: 'FuturaBT-Bold';src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_7_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_7_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_7_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_7_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_7_0.ttf') format('truetype');} @font-face {font-family: 'FuturaBT-BoldItalic';src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_5_0.eot');src: url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_5_0.eot?#iefix') format('embedded-opentype'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_5_0.woff2') format('woff2'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_5_0.woff') format('woff'),url('../fonts/MYFontsWebfontsKit/webfonts/39F54B_5_0.ttf') format('truetype');} /* ======================================================================= ## ++ Calendar ========================================================================== */ .calendar-body .view .views-row {} /*.calendar-body .view .views-row:first-child {border-top:none; padding: 0 24px 0;}*/ .view-id-calendar_events_by_type .views-row:first-child {border-top:none; padding:16px 0 48px 0;} .view-display-id-events_by_type_support .views-row:first-child {border-top:none; padding:0;} /* ======================================================================= ## ++ lists ========================================================================== */ .content ul {list-style: disc; margin: 0 0 1.5rem 24px;} .content ul li ul{list-style: circle; margin: 1rem 0 1rem 24px;} .content li {font-family: FuturaBT-Book; font-size: 1.3125rem; letter-spacing: -0.3px; line-height: 1.625rem; font-weight:300; margin-bottom: 0.5rem;} .content ol li {margin-bottom: 1rem;} .pager {margin-top:4rem !important;} .pager li {font-family: FuturaBT-Book; font-size: 1.3125rem; letter-spacing: -0.3px; line-height: 32px; padding:0px !important; margin:0 0 0.25em 1.5em !important;} .pager .pager-current {color:#225599 !important;} .sidebar-list ul li a { text-decoration:none; } /*ol {margin-left: 2.2rem;}*/ @media screen and (min-device-width: 320px) and (max-width: 896px) { .content li {font-size: 2rem; line-height: 2.375rem;} } .sidebar-list ul {list-style-type: none; margin:0; padding:0;} .sidebar-list ul li { font-family: FuturaBT-Book; font-size: 1.3125rem;} .sidebar-list .not-selected span:before {content: ''; display: inline-block; height:16px; width:16px; margin-right: 8px; border: 2px solid #000; background-color: #fff; transition: background-color .25s;} .sidebar-list .not-selected span:hover:before {background-color: #225599;} .sidebar-list .selected {color: #225599;} .sidebar-list .selected span:before {content: ''; display: inline-block; height:16px; width:16px; margin-right: 8px; border: 2px solid #000; background-color: #225599;} .sidebar-sticky {position:sticky; position:-webkit-sticky; top:84px;} .this_week {cursor:pointer;} .file-icon {margin:0 !important;} @media screen and (min-device-width: 320px) and (max-width: 896px) { .sidebar-sticky {position:inherit;} } /* ======================================================================= ## ++ Accordion / Expander ========================================================================== */ /* * Exhibitions Overview */ .accordion-container {width:100%; padding: 0; border-bottom: #000 2px solid;} .accordion-head {display:grid; grid-template-columns: auto 40px; height: 68px; border-top: #000 2px solid; align-items: center; padding-top: 3px;cursor:pointer;} /*.accordion-body {max-width: 1200px; width:100%}*/ .accordion-body .view .views-row {display:grid; grid-template-columns: 30% auto; grid-column-gap: 24px; align-items: center; justify-items:left; padding:24px 0 24px 0; border-top: 2px solid #000;} .accordion-body .view .views-row:first-child {border-top:none; padding:16px 0 24px 0;} .accordion-body .past-exh .views-row {display:grid; grid-template-columns: auto; grid-template-rows: auto 100%; align-items: start; grid-row-gap: 16px;} .accordion-body .past-exh .views-row:nth-child(-n+3) {border-top:none; padding:16px 0 24px 0;} .page-accordion .accordion-body h4 {margin-bottom:16px;} @media screen and (max-width: 866px) { .accordion-body {max-width: 866px; width:100%} .accordion-body .view .views-row {display:grid; grid-template-columns: 1fr; grid-gap: 24px; align-items: start; justify-items:left; padding:24px 0 24px 0; border-top: 2px solid #000; max-width:896px;} .accordion-body .past-exh .views-row:nth-child(-n+3) {border-top:#000 2px solid; padding:16px 0 24px 0;} .accordion-body .past-exh .views-row:nth-child(-n+1) {border-top:none; padding:16px 0 24px 0;} } /* * + – Expander */ .expander-container {width:100%; margin:0 0 -24px 0 0; padding: 0;} .expander-head {display:grid; grid-template-columns: auto 40px; height: 40px; border-top: #000 2px solid; align-items: center; padding-top: 3px;} .expander-head:hover {cursor:pointer;} .expander-body .view .views-row {display:grid; grid-template-columns: 30% auto; grid-column-gap: 24px; align-items: center; justify-items:left; padding:24px 0 24px 0; border-top: 2px solid #000;} .expander-body .view .views-row:first-child {border-top:none; padding:16px 0 24px 0;} .expander-body .past-exh .views-row {display:grid; grid-template-columns: auto; grid-template-rows: auto 100%; align-items: start; grid-row-gap: 16px;} .expander-body .past-exh .views-row:nth-child(-n+3) {border-top:none; padding:16px 0 24px 0;} .plus-minus {font-size: 1.8rem; font-family:Helvetica, Arial; margin-top: -6px;} @media screen and (min-device-width: 320px) and (max-width: 896px) { .plus-minus {font-size: 3rem; font-family:Helvetica, Arial;} } /* * Text Expander */ .expander {cursor:pointer; margin-bottom: 48px; font-family: FuturaPT-Demi; font-size: 1.5rem; letter-spacing: 0.2px; text-transform:uppercase;} /* ======================================================================= ## ++ Cleafix ========================================================================== */ /* float clearing for IE6 */ * html .clearfix{height:1%;overflow:visible} *+html .clearfix{min-height:1%} .clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden;font-size:0} .clr{clear:both} /* ======================================================================= ## ++ Call To Action and MC Signup forms ========================================================================== */ /* * Call to Action Circle */ #circle {width:240px; height:240px; background-color: #FFF; border-radius: 50%; display: grid; position: absolute; top:-35px; right:-35px; z-index: 24; border:#000 solid 3px; /*background: linear-gradient(150deg, #303455, #225599, #73bcda); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite;*/ } @-webkit-keyframes madGrad { 0%{background-position:25% 0%} 50%{background-position:76% 100%} 100%{background-position:25% 0%} } @-moz-keyframes madGrad { 0%{background-position:25% 0%} 50%{background-position:76% 100%} 100%{background-position:25% 0%} } @keyframes madGrad { 0%{background-position:25% 0%} 50%{background-position:76% 100%} 100%{background-position:25% 0%} } #circle-inner {margin:auto; text-align: center; padding-top: 22px;} #circle-text a, .sold-out { background: linear-gradient(150deg, #303455, #225599, #73bcda); background-size: 800% 800%; -webkit-animation: madGrad 20s ease infinite; -moz-animation: madGrad 20s ease infinite; animation: madGrad 20s ease infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; } #circle-text:hover a {color:#000 !important; -webkit-text-fill-color: initial;} #circle-inner h5 {font-size: 30px !important; line-height: 36px !important;} #circle-inner h6 {margin-top:8px; font-size: 22px !important;} #circle-inner a {transition:.25s;} #circle-closer {width:15px; height: 15px; cursor: pointer; margin: 12px auto 0 auto;} #circle-closer:hover #circle-x {fill:#000;} #circle-x {transition: fill .25s;} @media screen and (min-device-width: 320px) and (max-width: 896px) { #circle {display: none;} } /* * Call to Action */ #cta{display:none;opacity:0;height:100%;left:0;position:fixed;top:0px;width:100%;z-index:995} #cta-bg{background-color:#000;height:100%;opacity:.8;position:fixed;top:0;width:100%;z-index:996} #cta-holder{position:relative;z-index:1000;max-width:560px;margin:auto} #cta-closer{display:block;cursor:pointer;background-color:#fff;width:21px;height:21px;position:absolute;top:20px;right:35px;} #cta-closer:hover #circle-x {fill:#225599;} #cta-content{display:block;background-color:#fff;padding:60px;margin:0 15px; border-radius: 7px;} @media screen and (min-device-width: 320px) and (max-width: 896px) { #cta-content{padding:45px 30px;} } /* * Email Signup Form Global */ #mc_embed_signup .mc-field-group label{display: block;margin-bottom: 3px;} #mc_embed_signup .mc-field-group input {display: block;width: 100%;padding: 8px 0;text-indent: 2%;} #mc_embed_signup .mc-field-group {clear: left;position: relative;width: 96%;padding-bottom: 3%;min-height: 50px;} #mc_embed_signup .mc-field-group.input-group input {display: inline;width: auto;border: none;margin-right:12px;} #mc_embed_signup input[type=checkbox] {-webkit-appearance: checkbox;} #mc_embed_signup .mc-field-group.input-group label {display: inline;} .mc-field-group input {border: 2px solid #000 !important; border-radius: 7px !important; font-family: "FuturaPT-Demi"; font-size: 1.5rem; line-height: 1.5rem; transition: border .25s;} .mc-field-group input:focus {border: 2px solid #225599 !important;} /* * Email Signup Form General */ #esf{display:none;opacity:0;height:100%;left:0;position:fixed;top:0px;width:100%;z-index:998} #esf-bg{background-color:#333;height:100%;opacity:.3;position:fixed;top:0;width:100%;z-index:999} #esf-holder{position:relative;z-index:1000;max-width:560px;margin:auto} #esf-closer{display:block;cursor:pointer;background-color:#fff;width:21px;height:21px;position:absolute;top:20px;right:35px;} #esf-closer:hover #circle-x {fill:#225599;} #esf-content{display:block;background-color:#fff;padding:60px;margin:0 15px; border-radius: 7px;} #esf #mc_embed_signup form{padding:0!important} #esf .mc-field-group{width:100%!important} #esf .indicates-required{margin-right:0!important;text-align:right;font-size: 11px;} #esf #mc_embed_signup{font:14px FuturaPT-Demi!important} /* * Email Signup Form Press */ #esf-p{display:none;opacity:0;height:100%;left:0;position:fixed;top:0px;width:100%;z-index:998} #esf-bg-p{background-color:#333;height:100%;opacity:.3;position:fixed;top:0;width:100%;z-index:999} #esf-holder-p{position:relative;z-index:1000;max-width:560px;margin: auto;} #esf-closer-p{display:block;cursor:pointer;background-color:#fff;width:21px;height:21px;position:absolute;top:20px;right:35px;} #esf-closer-p:hover #circle-x {fill:#225599;} #esf-content-p{display:block;background-color:#fff;padding:60px;margin:0 15px;border-radius:7px;} #esf-p #mc_embed_signup form{padding:0!important} #esf-p .mc-field-group{width:100%!important} #esf-p .indicates-required{margin-right:0!important;text-align:right;font-size: 11px;} #esf-p #mc_embed_signup{font:14px FuturaPT-Demi!important} #esf-p #mc_embed_signup #mce-responses {max-width: 300px; margin: 0; padding: 0; width: 100%} #esf-p #mc_embed_signup #mce-responses .response {width: 100%; padding: 0;} /* * Email Signup Form Mad About Jewelry */ #esf-m{display:none;opacity:0;height:100%;left:0;position:fixed;top:0px;width:100%;z-index:998} #esf-bg-m{background-color:#333;height:100%;opacity:.3;position:fixed;top:0;width:100%;z-index:999} #esf-holder-m{position:relative;z-index:1000;max-width:560px;margin: auto;} #esf-closer-m{display:block;cursor:pointer;background-color:#fff;width:21px;height:21px;position:absolute;top:20px;right:35px;} #esf-closer-m:hover #circle-x {fill:#225599;} #esf-content-m{display:block;background-color:#fff;padding:60px;margin:0 15px;border-radius:7px;} #esf-m #mc_embed_signup form{padding:0!important} #esf-m .mc-field-group{width:100%!important} #esf-m .indicates-required{margin-right:0!important;text-align:right;font-size: 11px;} #esf-m #mc_embed_signup{font:14px FuturaPT-Demi!important} /* ======================================================================= ## ++ Audio Tours ========================================================================== */ .view-mobile-audio-tour {display:grid; grid-template-rows: 1fr; grid-row-gap: 1px; padding-bottom: 1px;} .audio-stop {display:grid; grid-template-columns: 96px auto; grid-column-gap: 24px; align-items: center; border-top: #000 2px solid; padding-top:1px;} /*.audio-stop:first-child {border-top:none; padding-top:none;}*/ .audio-img {} .audio-ul {} .audio-li {} .audio-li a {} .audio-li a:active {} /* ======================================================================= ## ++ Flippy ========================================================================== */ .flippy {display:grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 2px; padding: 0px !important;} /*ul.flippy li {font-size: 1.5rem; text-transform: uppercase; line-height: 1.5rem; text-decoration: none; letter-spacing: 0.2px; font-family: FuturaPT-Demi; transition: background-color .25s; cursor: pointer; width: 100%; margin:0px !important; padding: 0px !important;} ul.flippy li a {height: 52px; width: 100%; text-align: center; display: inline-block; background-color:#fff; color:#000; font-size: 1.5rem; text-transform: uppercase; line-height: 1.5rem; padding: 13px 10px 8px 10px; text-decoration: none; letter-spacing: 0.47px; font-family: FuturaPT-Demi; transition: background-color .25s; cursor: pointer; border:3px solid #225599; border-radius: 7px;} ul.flippy li a:hover {background-color: #225599; color:#fff;}*/ ul.flippy li {font-size: 1.5rem; text-transform: uppercase; line-height: 1.5rem; text-decoration: none; letter-spacing: 0.2px; font-family: FuturaPT-Demi; margin:0px !important; padding: 0px !important;} ul.flippy li a { text-decoration: none; } ul.flippy {margin: 0 !important;} .next {content:"Next"; text-align: right;} .prev {content:"Previous"; text-align: left;} /* ======================================================================= ## ++ Video Responsive ========================================================================== */ .videoWrapper {position: relative;padding-bottom: 54.2%; /* 16:9 */padding-top: 25px;height: 0;background-color:#000;} .videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} .videoWrappersm {position: relative;padding-bottom: 50.5%; /* 16:9 */padding-top: 25px;height: 0;background-color:#000;} .videoWrappersm iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} @media screen and (max-width: 748px) { .videoWrapper {padding-bottom: 52.16%;} } @media screen and (max-width: 410px) { .videoWrapper {padding-bottom: 50.16%;} } /* ======================================================================= ## ++ Blog ========================================================================== */ .blog-image{position:relative; z-index: 0;} .blog-left{width:350px;height:auto;margin:6px 24px 16px 0} .blog-right{float:right;text-align:right;width:350px;height:auto;margin:6px 0 16px 24px} .blog-width{width:100%;height:auto;margin:0 0 1.5rem} .blog-width-hero{width:100%;height:auto;margin:0 0 16px} .blog-header{} .description_block_blog{} .description_block_blog p{} .description_block_blog .title-sm{margin:0 0 16px} .popup_container{position:relative;} .blog_popup_container{width:374px!important; position: relative;} .blog_popup_container:hover {cursor:pointer;} @media screen and (max-width: 896px) { .blog-left{float:none; margin: 0px !important; padding: 0px !important; width: 100% !important;} .blog-right{float:none; text-align:inherit; margin: 0px !important; padding: 0px !important; width: 100% !important;} .blog_popup_container{float: none !important; width: 100% !important;} .popup_container{float: none !important; margin-bottom: 1.5rem;} .capture_area {display: none !important;} } /* ======================================================================= ## ++ Museum Programs Displays In Galleries on Screens ========================================================================== */ .view-display-id-gallery_kiosk {margin-bottom: 0px !important;} .view-display-id-gallery_kiosk .views-row {display:block; height: 340px;} #mp-container{width:1080px;margin:0;padding:0;height:1920px;background-color:#000; overflow: hidden;} #mp{margin:0;padding:90px 48px 0px 48px; color:#fff;} #mp .related .row_inner{padding:0} #mp .related .views-row{border-bottom:2px solid #fff;padding:52px 0 0px 0} #mp .related .views-row-1 {border-top:2px solid #fff;} #mp .related .views-row-4 {border-bottom:none;} #mp-page-title {} #mp-page-logo{margin-bottom: 44px;} #mp-page-logo h1{font-size:7rem; line-height: 7rem;} #mp-page-title {} #mp-footer-text{} #mp-footer-text p{} .mp-image{float:left;margin:0 64px 0 0; width:481px; height:auto; margin-top: 8px;} .mp-image img{display:block; width: 100%; height: auto;} .mp-title{margin:0 0 10px;} .mp-title h3 {font-size: 42px; line-height: 50px; } .mp-time{margin:0 0 12px;} .mp-time h2 {font-size: 28px; line-height: 34px} .mp-subtitle {} .mp-place{margin:0 0 15px;font-size:21px;line-height:23px} .mp-text {padding-left: 545px;} .mp-text p{font-size: 21px; line-height: 25px;} /* ======================================================================= ## ++ Museum Displays Lobby ========================================================================== */ #lobby-container {width: 1920px; height: 1080px; background-color: #000; color: #fff;} #lobby-container .hero-swiper-grid {display:block; height: 1080px;} #lobby-container .hero-swiper-text {height: 1080px; width: 840px; position: absolute!important; z-index: 10; left: 0px; top: 0px;} #lobby-container .hero-swiper-image {height: 1080px; width: 1160px; position: absolute !important; z-index: 8; left: 760px; top: 0px;} #lobby-container .hero-swiper-image img {height: 1080px; width: 1160px;} #lobby-container .hero-swiper-text-inner {padding: 0 12% 0 14% !important;} /*Temp Fix for Garmenting—can be removed*/ #lobby-container .hero-swiper-text h1 { font-size: 6.2rem; line-height: 6.2rem; } /*Temp Fix for Garmenting—7rem*/ #lobby-container .hero-swiper-text h2 { font-size: 3rem; line-height: 3rem; margin: 2rem 0; } #lobby-container .hero-swiper-text h4 { font-size: 3rem; line-height: 3rem;} #lobby-text { display:flex; height: 100%; } #lobby-text-inner { margin:auto; min-width: 500px; } #lobby-text-inner h1 { font-size: 18rem; line-height: 24rem; } #lobby-text-inner img { width: 1920px; height: 1080px; } #lobby-img-inner img { width: 1080px; height: 1920px; } #lobby-text-inner .flex-2-body { display: flex; font-size: 4rem; margin-bottom:150px; justify-content: space-between; width: 1340px; flex-wrap: wrap; } #lobby-text-inner .flex-2-body > div {flex-basis: 50%} .mad-sidebar { position: fixed; z-index: 9999; top: 0; right: 0;} .mad-sidebar img {display: block; width: 225px; height: 1920px;} /* ======================================================================= ## ++ Museum Displays Donor Wall ========================================================================== */ #donor-container {width: 1920px; height: 1080px; background-color: #000; color: #fff;} #donor-outer { display:flex; height: 100%; width: 100%; } #donor-outer .swiper-container { width: 100%; } #donor-container h1 { display: block; width: 1020px; font-size: 125px; line-height: 125px; padding: 75px 0 75px 60px; border-bottom: #FFFFFF solid 3px; } #donor-container h2 { display: block; width: 1020px; font-size: 40px; line-height: 40px; padding: 65px 0 45px 60px; } #donor-container h3 { display: block; font-size: 30px; line-height: 30px; padding: 65px 0 15px 60px; } #donor-container h4 { display: block; width: 1020px; font-size: 35px; line-height: 40px; padding: 65px 0 10px 60px; text-transform: uppercase;} #donor-container h5 { display: block; font-size: 25px; line-height: 30px; padding: 0px 0 45px 60px; } #donor-container p { display: block; font-size: 24px; line-height: 24px; padding: 0 0 0 60px; } #donor-container h6 { display: block; width: 600px; font-size: 40px; line-height: 48px; padding: 65px 0 15px 60px; } /*.donor-mad-sidebar { position: fixed; z-index: 8888; top: 0; right: 0; border-left: #FFFFFF solid 3px; width: 450px; height: 3840px;} .donor-mad-sidebar { position: fixed; z-index: 9999; top: 0; right: 0; border-left: #FFFFFF solid 3px; width: 450px; height: 3840px; background-color: #000000;} .donor-mad-sidebar img {display: block; width: 450px; height: 1920px;}*/ .donor-mad-sidebar { position: fixed; z-index: 9999; top: 0; right: 0; border-left: #FFFFFF solid 3px;} .donor-mad-sidebar img {display: block; width: 225px; height: 1920px;} .sidebar-two img { width: 277px !important; } .donor-grid-2 {display: grid; grid-template-columns: 300px 300px; grid-column-gap: 3rem; grid-row-gap: 2rem; box-sizing: border-box;} /* ======================================================================= ## ++ Slideshow Lightbox Gallery ========================================================================== */ .capture_area{position:absolute;width:100%; height: 100%;z-index: 9999;background-color:white;filter: alpha(opacity=0);opacity:0;z-index: 0;}/*sigh*/ .capture_area:hover{cursor:pointer;} #lightbox {display:grid; margin: auto; height: 100%;} #lightbox_inner {display:grid; grid-template-columns: auto; margin: auto; } #lightbox_container {position:fixed; left: 0; top:0; width: 100%; z-index: 998; height: 100%; display:none; opacity: 0; filter: alpha(opacity=0);} #lightbox_img_area {position: relative; z-index: 998; margin: 0 auto; height: auto; filter:alpha(opacity=100); background: #fff;} #lightbox_img {height:0px; position: relative; background: url('/themes/MADv4/images/ui/loader.gif') no-repeat scroll 50% 50% } img.popup_dest {width:100%; height: auto;} #lightbox_bg {position: fixed; top:0; background-color: #333; opacity: .6; filter:alpha(opacity=60); width: 100%; height: 100%; z-index:997} @media screen and (max-width: 950px) { #lightbox_inner {display:grid; grid-template-columns: auto; margin: auto;} } @media screen and (max-width: 896px) { #lightbox_container {display: none !important;} } /* Slideshow Controls */ #slide_show_left {position:absolute; width: 30%; height: 100%; top: 0; bottom:0; left: -80px; filter:alpha(opacity=100); z-index:5000; cursor: pointer; display: flex; align-items: center;} #slide_show_left_arrow {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); position:absolute; left: 24px; z-index: 99999; width: 30px; height: 50px; background-repeat: no-repeat;} #slide_show_right {position:absolute; width: 30%; height: 100%; top: 0; bottom:0; right: -80px; filter:alpha(opacity=100); z-index:5000; cursor: pointer; display: flex; align-items: center;} #slide_show_right_arrow {background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); position:absolute; right: 24px; z-index: 99999; width: 30px; height: 50px; background-repeat: no-repeat;} #close_btn_area {position: absolute; right:45px; top: 45px; width: 40px; height: 40px; filter:alpha(opacity=100); overflow: visible; z-index:5500;} #circle-xss {transition: fill .25s;} #close_btn_area:hover #circle-xss {fill:#225599;} /* Slideshow Caption */ .lightbox_cap_text {background-color: #fff; margin:0; z-index: 999; position: relative; max-height: 150px; overflow: auto !important;} .lightbox_cap_text .cap_title {font-size:1.5rem; font-family: inherit; margin: 16px; filter:alpha(opacity=100)} .lightbox_cap_text .cap_body {font-size:1rem; font-family: inherit; margin: 0px 16px 16px 16px; filter:alpha(opacity=100)} .lightbox_cap_text .cap_body p {font-size:1rem; font-family: inherit; margin-bottom: 1rem !important;} /* ======================================================================= ## ++ Audio Gallery ========================================================================== */ .popup_container {cursor:pointer;} .popup_container h3 {color:#000; transition: color .25s;} .popup_container:hover h3 {color:#225599; } .title_audio_desktop {max-width: 100%; line-height: 1.75rem;} .audio_image_desktop{margin-bottom:1.75rem;} .audio_image_mobile{margin-bottom:6rem; position: relative;} .mobile_audio h3 {margin-bottom: .75rem;} .mobile_audio h4 {margin-bottom: 1.75rem;} .play_button_desktop{background: url(../images/ui/play.png) no-repeat; background-size: 48px 48px; background-position:50% 50%; opacity:0; filter: alpha(opacity=0); transition: opacity 0.3s; -webkit-transition: opacity 0.3s;} .play_button_desktop:hover{cursor:pointer; opacity:1; filter: alpha(opacity=1);} .play_button_mobile{position:absolute; width:100%; height: 100%; background: url(../images/ui/mobile_play.png) no-repeat; background-position: 0px 0px; background-size: 60px 60px; opacity:.8; filter: alpha(opacity=.8);} .play_button_mobile:hover{cursor:pointer;} .audio_time_mobile{position: absolute; z-index: 1; top: 20px; right: 20px; color: #fff; font-size: 2rem; opacity:0; filter: alpha(opacity=0);} .play_pause_toggle{position:absolute; right:6px; bottom:5px; background:url(../images/ui/desktop_pause.png) no-repeat; background-size: 40px 40px; opacity:1; filter: alpha(opacity=1); transition: opacity 0.3s; -webkit-transition: opacity 0.3s; width: 40px; height: 40px; cursor: pointer;} .audio_time_desktop{position: absolute; bottom: 16px; right: 60px; opacity:0; filter: alpha(opacity=0);}