/* --------------------------------- * Main Elements ----------------------------------- */ /* * { box-sizing: content-box !important; } */ /* 20px = 1em = 1.67vw */ html, body, div, p, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, blockquote, fieldset, input { margin: 0; padding: 0; } body { margin: 0 auto; padding: 0; font-family: 'Roboto', sans-serif; font-size: 1em; font-style: normal; letter-spacing: 0; font-weight: 400; line-height: 1.4; background-color: #ffffff; color: #444444; text-align: center; } ol, ul { list-style: none !important; } img { border: none !important; } a { -webkit-transition: all 0.4s linear; -moz-transition: all 0.4s linear; -ms-transition: all 0.4s linear; -o-transition: all 0.4s linear; transition: all 0.4s linear; color: #83b340; } a, a:hover, a:visited, button, button:hover, input { outline: none !important; } a, button { -webkit-transition: color 0.5s linear; -moz-transition: color 0.5s linear; -ms-transition: color 0.5s linear; -o-transition: color 0.5s linear; transition: color 0.5s linear; text-decoration: none !important; } a:hover, a:focus { color: #547329; } a img { -webkit-transition: -webkit-transform 0.4s ease; -moz-transition: -moz-transform 0.4s ease; -o-transition: -o-transform 0.4s ease; transition: transform 0.4s ease; -webkit-transform-style: preserve-3d; -transform-style: preserve-3d; } a.imghover img:hover, .imghover img:hover, a.object:hover img, .object img:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; word-spacing: 0.1em; font-weight: 400; zoom: 1; display: block; clear: both; overflow: hidden; line-height: 1.2; } h1 { } h2 { margin-bottom: 0.4em; } h3 { margin-bottom: 0.3em; } h4 { margin: 0; } h5 { margin: 0; font-weight: normal; } h6 { font-size: 0.667em; margin: 0; font-weight: normal; } p { line-height: 1.5; margin-bottom: 1em; font-style: normal; font-weight: normal; color: #5f5f5f; text-transform: normal; text-rendering: optimizeSpeed; } p.semibold { font-weight: 600; } p.semibold-italic { font-style: italic; font-weight: 600; } p.light { font-weight: 200; } /* --------------------------------- * Main Container ----------------------------------- */ #chm-mscw-main { position: relative; margin: 0; display: block; float: left; width: 100%; } #chm-mscw-banner { position: relative; margin: 0; margin-bottom: 2em; display: block; width: 100%; overflow: hidden; background: top center no-repeat; background-color: rgba(51, 51, 51, 1.0); background-size: cover; } #chm-mscw-banner-poster { position:absolute; top: 0; left:0; display: block; height: auto; overflow: hidden; width: 100%; } #chm-mscw-banner .chm-mscw-container { position: relative; top:0 ; margin: 0.5em auto; padding: 0; display: block; max-width: 60em; min-width: 18em; min-height: 1em; } #chm-mscw-banner .chm-mscw-container .bannerav { position: relative; overflow: hidden; width: 100%; height: 100%; padding-bottom: 56.25%; } #chm-mscw-banner .chm-mscw-container .bannerav .poster { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; z-index: 100; } #chm-mscw-banner .chm-mscw-container .bannerav .file { position: absolute; top: 0; left: 0; width: 100%; display: block; } #chm-mscw-banner-section-title { position: absolute; z-index: 1000; bottom: 0; left: 0; right: 0; } #chm-mscw-banner-section-title .chm-mscw-section-title { color: #ffffff; font-weight: 600; /*text-shadow: 1px 1px 2px black;*/ text-shadow: 0px 0px 6px #000000; -moz-text-shadow: 0px 0px 8px #000000; -webkit-text-shadow: 0px 0px 8px #000000; clear: both; margin: 0em; margin-bottom: 0.7em; text-transform: uppercase; } #chm-mscw-banner-search { position: relative; margin: 0; margin-bottom: 2em; display: block; width: 100%; overflow: hidden; background: top center no-repeat #000000; background-size: cover; } #chm-mscw-banner-search .chm-mscw-container { position: relative; margin: 0.5em auto; padding: 0; display: block; max-width: 60em; min-width: 18em; } #chm-mscw-banner-search #chm-mscw-searchform { margin: 10vh 0; } #chm-mscw-content { position: relative; margin: 0; display: block; float: left; width: 100%; min-height: 17.5em; } .chm-mscw-container { position: relative; top: 1em; margin: 2em auto; padding: 0; display: block; text-align: left; max-width: 60em; min-width: 18em; min-height: 1em; overflow: hidden; } .av { position: relative; padding-bottom: 56.25%; overflow: hidden; cursor: pointer; } .av .poster { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; z-index: 100; } .av .file { position: absolute; top: 0; left: 0; width: 100%; display: block; } /* --------------------------------- * Header & Top Nav Menu ----------------------------------- */ #chm-mscw-header { position: relative; margin: 0; float: left; width: 100%; /* original height: 17em;*/height: 19em; overflow: hidden; z-index: 1000; } #chm-mscw-header-logo { height: 10.5em; display: block; position: relative; top: 1em; z-index: 0;} #chm-mscw-main-top-nav-menu { height: 6em; display: block; width: 100%; } #chm-mscw-header-container { height: 17em; margin: 1.25em auto; } #chm-mscw-main-top-nav-menu-items { position: relative; min-height: 30px; overflow: hidden; text-align: right; display: inline-block; margin: 0; float: right; width: auto; } #chm-mscw-main-top-nav-menu-items .top-nav-menu-item { display: inline-block; float: left; height: 1.1em; width: auto; font-weight: 400; letter-spacing: 0.05em; font-size: 0.9em; line-height: 1.1em; color: #777777; text-transform: uppercase; text-align: center; padding: 0.6em 0.8em; font-family: "Open Sans","Helvetica Neue",sans-serif; } #chm-mscw-main-top-nav-menu-items .top-nav-menu-item.light { color: #999999; } #chm-mscw-main-top-nav-menu-items .top-nav-menu-item:hover { color: #000000; } #chm-mscw-header .chm-mscw-container { position:relative; top:6em } #chm-mscw-main-top-nav-menu-items .icon { width: 1.2em; height: 1.2em; overflow: hidden; } #chm-mscw-main-top-nav-menu-items .icon .container { display: block; width: 1.2em; height: 1.2em; overflow: hidden; } #chm-mscw-main-top-nav-menu-items .icon .container img { position: relative; top: -1.2em; } #chm-mscw-main-top-nav-menu-items .icon:hover .container img { position: relative; top: -2.4em; } #chm-mscw-main-top-nav-menu-items .icon.current .container img { position: relative; top: 0em; } #chm-mscw-main-top-nav-menu-items .top-nav-menu-item.current { background-color: #333333; color: #ffffff; /*cursor: default;*/ } #chm-mscw-mb-header { position: relative; margin: 0; float: left; width: 100%; min-height: 5em; overflow: hidden; z-index: 1000; /*border-bottom: 1px solid #444444;*/ } #chm-mscw-mb-header-logo { display: block; position: relative; width: 60%; margin: 0 auto; text-align: center; } #chm-mscw-mb-header-logo a { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; text-align: center; } #chm-mscw-mb-header-logo img { max-width: 100%; } #chm-mscw-mb-main-top-nav-menu { display: block; width: 100%; margin-top: 0.7em; overflow: hidden; } #chm-mscw-mb-header-container { width: 100%; margin: 3em auto 0; } #chm-mscw-mb-main-top-nav-menu-items { position: relative; min-height: 6em; overflow: hidden; text-align: center; display: block; margin: 0; width: 100%; } #chm-mscw-mb-main-top-nav-menu-items .top-nav-menu-item-container { width: 100%; text-align: center; padding: 0.5em; border-top: 1px #e2e2e2 solid; } #chm-mscw-mb-main-top-nav-menu-items .top-nav-menu-item-container:last-child { border-bottom: 1px #e2e2e2 solid; } #chm-mscw-mb-main-top-nav-menu-items .top-nav-menu-item { display: inline-block; height: 1.2em; width: auto; letter-spacing: 0.1em; font-size: 1em; line-height: 1.2em; color: #777777; font-weight: 400; text-transform: uppercase; text-align: center; padding: 0.6em 0.8em; margin: 0.3em 0em; font-family: "Segoe UI","Open Sans","Helvetica Neue",sans-serif;} #chm-mscw-mb-main-top-nav-menu-items .top-nav-menu-item.light { color: #999999; } #chm-mscw-mb-main-top-nav-menu-items .top-nav-menu-item:hover { color: #000000; } #chm-mscw-mb-main-top-nav-menu-items .top-nav-menu-item.current { background-color: #333333; color: #ffffff; cursor: default; } /* --------------------------------- * Header: Top Nav Submenu ----------------------------------- */ #chm-mscw-top-nav-submenu { position: absolute; z-index: 1000; top: 0; left: 0; right: 0; background-color: rgba(51, 51, 51, 1.0); text-align: center; } #chm-mscw-top-nav-submenu .submenu-grouping { display: block; width: auto; } #chm-mscw-top-nav-submenu .submenu-item { display: block; float: left; margin: 0; padding: 0; } #chm-mscw-top-nav-submenu .submenu-item a { display: block; float: left; height: 1.2em; width: auto; font-weight: 600;color: #83b340; text-transform: uppercase; word-spacing: 0.1em; font-size: 0.9em; line-height: 1.2em; text-align: center; font-family: "Segoe UI","Open Sans","Helvetica Neue",sans-serif; } #chm-mscw-top-nav-submenu .submenu-item a:hover { color: #ffffff; } #chm-mscw-top-nav-submenu .submenu-item a.current { color: #ffffff; /*cursor: default;*/ } /* --------------------------------- * Section: Scrolling Bottom Nav Menu ----------------------------------- */ #chm-mscw-content-bottom-nav-scroll-container { position: fixed; bottom: 0; right: 0; left: 0; text-align: center; z-index: 1000; background-color: rgba(255, 255, 255, 0.75); height: 3em; overflow: hidden; display: none; } #chm-mscw-content-bottom-nav-scroll { position: relative; display: block; margin: 0em auto; height: 3em; overflow: hidden; } #chm-mscw-content-bottom-nav-scroll-items { position: relative; height: auto; text-align: center; } #chm-mscw-content-bottom-nav-scroll-items div.item { display: inline-block; text-align: center; min-width: 3em; height: 3em; margin: 0em 0.35em; } #chm-mscw-content-bottom-nav-scroll-items div.item a { display: block; float: left; min-width: 3em; height: 3em; line-height: 3em; border-radius: 1.5em; background-color: #b2b2b2; text-align: center; color: #ffffff; font-weight: 400; margin: 0; padding: 0; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; text-decoration: none !important; } #chm-mscw-content-bottom-nav-scroll-items div.item a:hover { background-color: #000000; } #chm-mscw-content-bottom-nav-scroll-items div.current a { background-color: #000000; cursor: default; } #chm-mscw-content-bottom-nav-scroll-items div.item a .label { opacity: 0; display: none; animation-timing-function: linear; -webkit-animation: current 0.4s; -moz-animation: current 0.4s; -ms-animation: current 0.4s; -o-animation: current 0.4s; animation: current 0.4s; font-weight: 800; letter-spacing: 0.1em; } #chm-mscw-content-bottom-nav-scroll-items div.current a .label { display: block; opacity: 1; float: left; margin: 0em 0.9em; } #chm-mscw-content-bottom-nav-scroll-items div.current a #history.label { margin: 0em 0.9em 0 -0.7em; } #chm-mscw-content-bottom-nav-scroll-items div.item a .icon { display: block; float: left; width: 1.2em; height: 1.2em; margin: 0.9em; opacity: 1; margin-right: -0.5em; } @-o-keyframes current { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } @-moz-keyframes current { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes current { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } @keyframes current { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } } #chm-mscw-content-mb-bottom-nav-scroll-items { position: relative; height: auto; text-align: center; } #chm-mscw-content-mb-bottom-nav-scroll-items div.item { display: inline-block; text-align: center;width: 3em; height: 3em; margin: 0em 0.35em; } #chm-mscw-content-mb-bottom-nav-scroll-items div.item a { display: block; float: left; width: 3em; height: 3em; line-height: 3em; border-radius: 1.5em; background-color: #b2b2b2; text-align: center; color: #ffffff; font-weight: 600; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: allr 0.5s linear; text-decoration: none !important; } #chm-mscw-content-mb-bottom-nav-scroll-items div.item a:hover { background-color: #454545; } #chm-mscw-content-mb-bottom-nav-scroll-items div.current a { background-color: #454545; cursor: default; } #chm-mscw-content-mb-bottom-nav-scroll-items div.item a .icon { display: block; float: left; width: 1.2em; height: 1.2em; margin: 0.9em; opacity: 1; } /* --------------------------------- * ScrollUp & Other Interactive Elements ----------------------------------- */ #scrollToTop, #scrollTop.current, #scrollToTop a, #scrollTop.current a { background-color: transparent !important; } #scrollToTop a { background-image: url(./_media/icons/toTop.png); background-position: center center; background-repeat: no-repeat; background-size: cover; } #scrollToTop.current a, #scrollToTop a:hover { background-image: url(./_media/icons/toTopCurrent.png); } /* --------------------------------- * Footer ----------------------------------- */ #chm-mscw-footer { position: relative; margin: 0 !important; /*margin-bottom: 5em;*/ display: block; float: left; width: 100%; min-height: 2em; background-color: #454545; color: #ffffff; } #chm-mscw-footer a { color: #f2f2f2; cursor: pointer; } #chm-mscw-footer #chm-mscw-credits { display: none; } #chm-mscw-footer .chm-credits { padding: 1em 0em; font-size: 1em; line-height: 1.3em; border-bottom: 1px solid #999999; } #chm-mscw-footer .chm-credits h3 { font-size: 2em; line-height: 2.25; letter-spacing: normal; text-transform: uppercase; color: #83b340; } #chm-mscw-footer .chm-credits h4 { font-size: 1.3em; line-height: 1.5; height: 3.5em; letter-spacing: normal; margin-bottom: 0.5em; color: #888888; } #chm-mscw-footer .chm-credit { font-size: 0.9em; margin-bottom: 0.8em; display: block; } #chm-mscw-footer .chm-credit em { font-size: 0.75em; letter-spacing: 0.05em; } #chm-mscw-footer #chm-mscw-footer-bottom-nav { padding: 1em 0em; overflow: hidden; font-size: 0.8em; letter-spacing: 0.05em; line-height: 1.2em; } #chm-mscw-footer #chm-mscw-footer-copiright { display: block; float: left; height: 1.2em; } #chm-mscw-footer #chm-mscw-footer-bottom-nav-items { display: block; float: right; text-align: right; height: 1.1em; } #chm-mscw-footer .nav-item { display: inline-block; margin-left: 1.5em; text-align: right; height: 1.2em; } #chm-mscw-footer .nav-item:hover, #chm-mscw-footer .nav-item.current { color: #a8e553; } #chm-mscw-mb-footer { position: relative; margin: 0; /*margin-bottom: 5em;*/ display: block; float: left; width: 100%; min-height: 2em; background-color: #454545; color: #ffffff; } #chm-mscw-mb-footer a { color: #f2f2f2; cursor: pointer; } #chm-mscw-mb-footer-container { margin: 0; width: 100%; } #chm-mscw-mb-footer #chm-mscw-mb-credits { display: none; } #chm-mscw-mb-footer .chm-credits { padding: 1em 0em; font-size: 1em; line-height: 1.3em; border-bottom: 1px solid #999999; } #chm-mscw-mb-footer .chm-credits h3 { font-size: 2em; line-height: 2.25; letter-spacing: normal; text-transform: uppercase; color: #00ab6b; } #chm-mscw-mb-footer .chm-credits h4 { font-size: 1.3em; line-height: 1.5; height: 3.5em; letter-spacing: normal; margin-bottom: 0.5em; color: #888888; } #chm-mscw-mb-footer .chm-credit { font-size: 0.9em; margin-bottom: 0.8em; display: block; } #chm-mscw-mb-footer .chm-credit em { font-size: 0.75em; letter-spacing: 0.05em; } #chm-mscw-mb-footer #chm-mscw-mb-footer-bottom-nav { padding: 0em; font-size: 0.8em; letter-spacing: 0.05em; line-height: 1.2em; overflow: hidden; } #chm-mscw-mb-footer #chm-mscw-mb-footer-copiright { display: block; text-align: center; height: 1.2em; padding: 1em 0em; } #chm-mscw-mb-footer #chm-mscw-mb-footer-bottom-nav-items { display: block; text-align: center; } #chm-mscw-mb-footer #chm-mscw-mb-footer-bottom-nav-items .nav-item { display: block; text-align: center; padding: 1em 0em; height: 1.2em; letter-spacing: 0.1em; line-height: 1.2em; border-bottom: 1px solid #999999; } #chm-mscw-mb-footer .chm-bottommenu .bottom-nav a:hover { } /* --------------------------------- * Search ----------------------------------- */ #chm-mscw-search-results { margin-bottom: 8em; } .chm-mscw-search-btns { margin-bottom: 2em; } .chm-mscw-search-result-preview .chm-mscw-search-preview-block { border: 1px solid #d9d9d9; border-radius: 0.1em; margin-bottom: 1vh; } .chm-mscw-search-result-preview .chm-mscw-search-preview-block .chm-mscw-exhibit-name { display: inline-block; padding: 0.25em 0.5em; color: #ffffff; background-color: #83b340; } .chm-mscw-search-result-preview .chm-mscw-search-preview-block a:hover .chm-mscw-exhibit-name { background-color: #547329; } .chm-mscw-search-result-preview .chm-mscw-search-preview-block .chm-mscw-search-preview-poster { display: block; overflow: hidden; padding: 0; position: relative; width: 100%; height: auto; } .chm-mscw-search-result-preview .chm-mscw-search-preview-block .chm-mscw-search-preview-poster a { display: block; height: 100%; width: 100%; float: left; position:relative; margin: 0 !important; overflow: hidden; } .chm-mscw-search-result-preview .chm-mscw-search-preview-block .chm-mscw-search-preview-poster img { width: 100%; } .chm-mscw-search-result-preview .chm-mscw-search-preview-block .chm-mscw-search-preview-info { padding: 0 10% 10%; } .chm-mscw-search-result-preview .chm-mscw-search-preview-block .chm-mscw-search-result-title { margin-bottom: 0.5em; margin-top: 0.5em; } #chm-mscw-searchform #chm-mscw-searchform-fieldset { padding: 0.75em 0; } #chm-mscw-searchform #keywords { display: block; float: left; border-radius: 0.5em 0 0 0.5em; margin: 0; padding: 0.5em 0.6em; border: 1px solid #ccc; } #chm-mscw-searchform #submit { display: block; float: left; margin: 0; border-radius: 0 0.5em 0.5em 0; padding: 0.5em 0.6em; border: 1px solid #ccc; } /* -------------------------------------------------------------------- * Landing Pages e.g. Homepage, Categories Preview, Years Previewa ------------------------------------------------------------------- */ .chm-mscw-page-intro { display: block; position: relative; margin: 0em 0em 3em; } .chm-mscw-page-intro .chm-mscw-page-title { clear: both; margin: 0em; text-transform: uppercase; } .chm-mscw-page-intro .chm-mscw-page-description { font-size: 1.66em; } .chm-mscw-landing-page-highlights { } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object { display: block; position: relative; float: left; overflow: hidden; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object:after { content: ""; display: block; padding-bottom: 100%; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object .chm-mscw-section-media-object-container { position: absolute; width: 100%; height: 100%; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object .chm-mscw-section-media-object-container img { width: 100%; height: 100%; object-fit: cover; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object a.object { position: relative; display: block; width: 100%; height: 100%; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content { position: absolute; z-index: 100; left: 0; right: 0; bottom: 0; top: 60%; background-color: rgba(131, 179, 65, 0.85); } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .title { margin: 0.5em 0.5em 0 0.75em; color: #ffffff; } .chm-mscw-landing-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .blurb { margin: 0.5em 1.5em; font-size: 0.9em; line-height: 1.2; } .chm-mscw-landing-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .blurb p { color: #ffffff; } .chm-mscw-homepage-highlights { position: relative; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object { display: block; position: relative; float: left; overflow: hidden; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object:after { content: ""; display: block; padding-bottom: 100%; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object .chm-mscw-section-media-object-container { position: absolute; width: 100%; height: 100%; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object .chm-mscw-section-media-object-container img { width: 100%; height: 100%; object-fit: cover; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object a.object { position: relative; display: block; width: 100%; height: 100%; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content { position: absolute; z-index: 100; left: 0; right: 0; bottom: 0; top: 60%; background-color: rgba(131, 179, 65, 0.85); } .chm-mscw-homepage-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .title { color: #ffffff; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .blurb { margin: 0.5em 1.5em; font-size: 0.9em; line-height: 1.2; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .blurb p { color: #ffffff; } .chm-mscw-media-page-highlights { } .chm-mscw-media-page-highlights .chm-mscw-section-media-object { display: block; position: relative; float: left; overflow: hidden; } .chm-mscw-media-page-highlights .chm-mscw-section-media-object:after { content: ""; display: block; padding-bottom: 100%; } .chm-mscw-media-page-highlights .chm-mscw-section-media-object .chm-mscw-section-media-object-container { position: absolute; width: 100%; height: 100%; } .chm-mscw-media-page-highlights .chm-mscw-section-media-object .chm-mscw-section-media-object-container img { width: 100%; height: 100%; object-fit: cover; } .chm-mscw-media-page-highlights .chm-mscw-section-media-object a.object { position: relative; display: block; width: 100%; height: 100%; } .chm-mscw-media-page-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content { position: absolute; z-index: 100; left: 0; right: 0; bottom: 0; top: 65%; background-color: rgba(131, 179, 65, 0.85); } .chm-mscw-media-page-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .title { margin: 0.25em; margin-bottom: 0; color: #ffffff; } .chm-mscw-media-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .blurb { margin: 0.5em 1.5em; font-size: 0.9em; line-height: 1.2; } .chm-mscw-media-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .blurb p { color: #ffffff; } /* -------------------------------------------------------------------- * Media Page ------------------------------------------------------------------- */ .chm-mscw-media-page-section { margin-bottom: 6em; } .chm-mscw-media-page-section .chm-mscw-media-page-section-title { position: relative; display: block; color: #83b340; line-height: 1.25; margin-top: 0.5em; text-transform: capitalize; } .chm-mscw-media-page-section .chm-mscw-section-media-object { display: block; position: relative; float: left; overflow: hidden; } /*.chm-mscw-media-page-section .chm-mscw-section-media-object:after { content: ""; display: block; padding-bottom: 56.25%; }*/ .chm-mscw-media-page-section .chm-mscw-section-media-object .chm-mscw-section-media-object-container { display: block; position: relative; } .chm-mscw-media-page-section .chm-mscw-section-media-object .chm-mscw-section-media-object-container a { display: block; overflow: hidden; } .chm-mscw-media-page-section .chm-mscw-section-media-object .chm-mscw-section-media-object-container a img { width: 100%; height: 100%; object-fit: cover; } .chm-mscw-media-page-section .chm-mscw-section-media-object a.object { position: relative; display: block; width: 100%; height: 56.25%; } .chm-mscw-media-page-section .chm-mscw-section-media-object a.object.viewed { opacity: 0.6; } .chm-mscw-media-page-section .chm-mscw-media-object .chm-mscw-media-object-title .title, .chm-mscw-media-page-section .chm-mscw-media-object .chm-mscw-media-object-title a .title { color: #444444; } .chm-mscw-media-page-section .chm-mscw-section-media-object .chm-mscw-media-object-title .content { left: 0.5em; right: 0.5em; top: 0.5em; } .chm-mscw-media-page-section .chm-mscw-section-media-object .chm-mscw-media-object-title .content .title { } .chm-mscw-media-page-section .chm-mscw-section-media-object .chm-mscw-media-object-title .content .description { font-size: 1em; line-height: 1.1; } span.chm-mscw-av-play-btn { color: #ffffff; position: absolute; top: 35%; left: 35%; width: 30%; height: 30%; z-index: 1000; text-align: center; } /* --------------------------------- * Media Elements ----------------------------------- */ .chm-mscw-section-intro { margin: 0em 0em 3em; } .chm-mscw-section-intro .chm-mscw-section-title { clear: both; margin: 0em; text-transform: uppercase; } .chm-mscw-section-intro .chm-mscw-section-description { font-size: 1.66em; } .chm-mscw-subsection-title { position: relative; clear: both; color: #83b340; text-transform: uppercase; display: block; float: left; line-height: 1.0; padding-left: 1.1em; background: left center no-repeat; background-size: 0.83em 0.83em; } .chm-mscw-credits-subsection-title { position: relative; display: block; color: #83b340; line-height: 1.25; margin-top: 0.5em; text-transform: capitalize; } .chm-mscw-credits-subsection-description ul li { display: block; } .chm-mscw-credits-subsection-description ul li em { color:#777777 !important; font-weight: 300; font-size: 0.8; } #Impact.chm-mscw-subsection-title { background-image: url(../_media/icons/world-icon-green.png); } #Technology.chm-mscw-subsection-title { background-image: url(../_media/icons/gears-icon-green.png); } #History.chm-mscw-subsection-title { background-image: url(../_media/icons/light-icon-green.png); } .chm-mscw-subsection-description { } .chm-mscw-focus-story { margin-bottom: 4.0em; } .chm-mscw-focus-story-description { display: block; } .chm-mscw-focus-story-description .title { clear: both; padding-bottom: 0.125em; margin: 0.35em 0em 0.25em; text-transform: uppercase; } .chm-mscw-focus-story-description .description { display: block; margin-bottom: 0.5em; font-size: 1.4em; } .chm-mscw-interactive-media { display: block; position: relative; margin-top: 0.5em; } .chm-mscw-interactive-media .chm-mscw-main-media-objects { display: block; width: 70%; float: left; max-width: 840px; } .chm-mscw-interactive-media .chm-mscw-supportive-media-objects { display: block; width: 25%; float: right; max-width: 300px; } .chm-mscw-main-media-objects .chm-mscw-media-object, .chm-mscw-supportive-media-objects .chm-mscw-media-object { position: relative; } .chm-mscw-main-media-objects .chm-mscw-media-object .av .chm-mscw-av-play-btn, .chm-mscw-supportive-media-objects .chm-mscw-media-object .av .chm-mscw-av-play-btn { color: #ffffff; position: absolute; /*top: 40%;*/ left: 40%; width: 20%; /*height: 20%;*/ text-align: center; z-index: 1000; text-shadow: 0px 0px 6px #000000; -moz-text-shadow: 0px 0px 8px #000000; -webkit-text-shadow: 0px 0px 8px #000000; } .chm-mscw-fullscreen-media-objects .chm-mscw-media-object, .chm-mscw-main-media-objects .chm-mscw-media-object { display: block; position: relative; widh: 100%; margin-bottom: 4em; } .chm-mscw-supportive-media-objects .chm-mscw-media-object { margin-bottom: 2.5em; } .chm-mscw-media-object .chm-mscw-media-object-container { display: block; position: relative; } .chm-mscw-media-object .chm-mscw-media-object-container a.media { display: block; overflow: hidden; } .chm-mscw-media-object .chm-mscw-media-object-container a.media img, .chm-mscw-media-object .chm-mscw-media-object-container a.media video { width: 100%; height: auto; } .chm-mscw-media-object-container .chm-mscw-media-object-title { display: block; float: left; width: 100%; overflow: hidden; } .chm-mscw-media-object-container .chm-mscw-media-object-title .title { display: block; margin-bottom: .25em; } .chm-mscw-media-object-container .chm-mscw-media-object-title .credit { display: block; font-family: 'Josefin Slab', serif; font-style: italic; line-height: 1.1; margin: 0em 0em 0.25em; min-height: 0.4em; font-size: 0.9em; overflow: hidden; } .chm-mscw-media-object-container .chm-mscw-media-object-title .credit p { display: block; margin-bottom: 0 !important; font-family: 'Josefin Slab', serif; font-style: italic; line-height: 1.4 !important; font-size: 1em !important; } .chm-mscw-media-object-container .chm-mscw-media-object-title p.description { display: block; margin: 0; } .chm-mscw-supportive-media-objects .chm-mscw-media-object-title { margin-top: 0.5em; } .chm-mscw-media-object-text { color: #777777; } /* --------------------------------- * MISC ----------------------------------- */ /*for wrapper * { box-sizing: content-box; } */ .pure-g { position: relative; } .pure-u-1-1 { position: relative; } .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } .relative { position: relative; } .absolute { position: absolute; } .fixed { position: fixed; z-index: 1000; top: 0; left: 0; right: 0; border-bottom: 5px solid #c8c9cd; } .hidden { display: none; } .visible { display: block; } .button-success, .button-error, .button-warning, .button-secondary { color: white; border-radius: 4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .button-search { background: rgb(204, 204, 204); /* this is a light gray */ } .button-search.current { background: rgb(131, 179, 64); color: #ffffff; /* this is a green */ } .button-success { background: rgb(131, 179, 64); /* this is a green */ } .button-success.current { background: rgb(94, 128, 46); /* this is a dark green */ } .button-error { background: rgb(202, 60, 60); /* this is a maroon */ } .button-warning { background: rgb(223, 117, 20); /* this is an orange */ } .button-secondary { background: rgb(66, 184, 221); /* this is a light blue */ } .float-right { float: right; } .float-left { float: left;} .full-width { width: 100%; } .mt-12 { display: block; margin-top: 12px !important; } /* --------------------------------- * RESPONSIVE STYLES ----------------------------------- */ /* For devices larger than 240px */ @media (min-width: 240px) { html { font-size: 1.0em; } h1 { font-size: 9vw; } h2 { font-size: 8vw; } h3 { font-size: 6vw; } h4 { font-size: 5vw; } h5 { font-size: 5vw; } /* #chm-mscw-mb-header { display: block; } #chm-mscw-header { display: none; }*/ /* use the same header instead of switching */ #chm-mscw-header { display: block; } #chm-mscw-mb-header { display: none; } #chm-mscw-banner-section-title { display: none; } #chm-mscw-mb-footer { display: block; } #chm-mscw-footer { display: none; } .chm-mscw-container { width: 90%; } #chm-mscw-content-bottom-nav-scroll-container { padding: 1em 0.125em; } #chm-mscw-top-nav-submenu { padding: 0.45em 0em; } #chm-mscw-top-nav-submenu .main { display: none; } #chm-mscw-top-nav-submenu .mobile { display: inline-block; } #chm-mscw-top-nav-submenu .submenu-item a { padding: 0.3em 0.5em 0em; } #chm-mscw-content-bottom-nav-scroll-items { display: none; } #chm-mscw-content-mb-bottom-nav-scroll-items { display: block; } .chm-mscw-fullscreen-media-objects .chm-mscw-media-object-title .title, .chm-mscw-main-media-objects .chm-mscw-media-object-title .title, .chm-mscw-supportive-media-objects .chm-mscw-media-object-title .title { font-size: 1.35em; } .chm-media-object .media { cursor: default; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object { width: 47.5%; margin-bottom: 5%; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object:nth-child(odd) { margin-right: 5%; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object .chm-mscw-media-object-title { top: 45%; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .title { margin: 0.8em 1em; } .chm-mscw-media-page-section .chm-mscw-section-media-object .chm-mscw-media-object-title { top: 45%; } .chm-mscw-media-page-section .chm-mscw-section-media-object { width: 47.5%; margin-bottom: 5%; } .chm-mscw-media-page-section .chm-mscw-section-media-object:nth-child(odd) { margin-right: 2.5%; } .chm-mscw-media-page-section .chm-mscw-section-media-object:nth-child(event) { margin-left: 2.5%; } .grid-sizer, .grid-item { width: 100%; margin-bottom: 10vh; } .chm-mscw-search-btn { display: block; position: relative; margin: 0 auto 1em; } .media-container a.media { cursor: default; } .chm-mscw-main-media-objects .chm-mscw-media-object .av .chm-mscw-av-play-btn, .chm-mscw-supportive-media-objects .chm-mscw-media-object .av .chm-mscw-av-play-btn { font-size: 2em; } } /* For devices smaler than 768px */ @media (min-width: 768px) { #chm-mscw-mb-header { display: none; } #chm-mscw-header { display: block; } #chm-mscw-banner-section-title { display: block; } #chm-mscw-content-bottom-nav-scroll-container { padding: 1em 3em; } #chm-mscw-content-bottom-nav-scroll-items { display: block; } #chm-mscw-content-mb-bottom-nav-scroll-items { display: none; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object { width: 30%; margin-bottom: 5%; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object { margin-right: 5%; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object:nth-child(3) { margin-right: 0; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .title { margin: s1em; } .chm-mscw-credits-subsection-description ul li:nth-child(odd) { width: 48.5%; float: left; } .chm-mscw-credits-subsection-description ul li:nth-child(even) { width: 48.5%; float: right; } .chm-media-object .media { cursor: pointer; } .chm-mscw-supportive-media-objects .chm-mscw-media-object-title .title { font-size: 0.9em; color: #999999; } .chm-mscw-main-media-objects, .chm-mscw-supportive-media-objects { transition-duration: 1s; } .chm-mscw-supportive-media-objects .chm-mscw-media-object-container .media-container, .chm-mscw-supportive-media-objects .chm-mscw-media-object-container img, .chm-mscw-supportive-media-objects .chm-mscw-media-object-container .av .poster { cursor: pointer; -webkit-transition: -webkit-transform 0.9s cubic-bezier(0.39, 0.575, 0.565, 1); -moz-transition: -moz-transform 0.9s cubic-bezier(0.39, 0.575, 0.565, 1); -o-transition: -o-transform 0.9s cubic-bezier(0.39, 0.575, 0.565, 1); transition: transform 0.9s cubic-bezier(0.39, 0.575, 0.565, 1); -webkit-transform-style: preserve-3d; -transform-style: preserve-3d; } .chm-mscw-supportive-media-objects .chm-mscw-media-object-container img:hover, .chm-mscw-supportive-media-objects .chm-mscw-media-object-container .av .poster:hover { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .grid-sizer, .grid-item { width: 45%; margin-bottom: 2em; margin-right: 5%; } a.media { cursor: default; } .chm-mscw-supportive-media-objects .chm-mscw-media-object-container a.media { cursor: pointer; } .chm-mscw-main-media-objects .chm-mscw-media-object .av .chm-mscw-av-play-btn { font-size: 2em; } .chm-mscw-supportive-media-objects .chm-mscw-media-object .av .chm-mscw-av-play-btn { font-size: 1em; } } /* For devices smaler than 1024px */ @media (min-width: 1040px) { html { font-size: 1.25em; } h1 { font-size: 5.063em; } h2 { font-size: 3.375em; } h3 { font-size: 2.25em; } h4 { font-size: 1.5em; } h5 { font-size: 1.2em; } #chm-mscw-top-nav-submenu .main { display: inline-block; } #chm-mscw-top-nav-submenu .mobile { display: none; } #chm-mscw-mb-footer { display: none; } #chm-mscw-footer { display: block; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object { width: 22.5%; margin: 0 2.5% 2.5% 0; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object:nth-child(odd) { margin-right: 2.5%; } .chm-mscw-media-page-section .chm-mscw-section-media-object { width: 22.5%; margin: 0 2.5% 2.5% 0; } .chm-mscw-media-page-section .chm-mscw-section-media-object:nth-child(odd) { margin-right: 2.5%; } .chm-mscw-media-page-section .chm-mscw-section-media-object:nth-child(event) { margin-left: 2.5%; } .chm-mscw-media-page-section .chm-mscw-section-media-object:nth-child(4n+4) { margin-right: 0%; } .chm-mscw-homepage-highlights .chm-mscw-section-media-object .chm-mscw-media-object-content .title { margin: 1.2em 1.5em; margin-bottom: 0; } .chm-mscw-landing-page-highlights .chm-mscw-section-media-object .chm-mscw-media-object-title { top: 50%; } .chm-mscw-media-page-section .chm-mscw-section-media-object .chm-mscw-media-object-title { top: 50%; } .grid-sizer, .grid-item { width: 30%; margin-bottom: 2em; margin-right: 3.33%; } .chm-mscw-search-btn { margin-right: 2em; } .chm-mscw-search-btn { display: block; position: relative; float: left; } } /* For devices smaler than 1024px */ @media (min-width: 1280px) { #chm-mscw-top-nav-submenu { padding-bottom: 1em; } #chm-mscw-top-nav-submenu .submenu-item a { padding: 1em; } .chm-mscw-container { width: 100%; } }