/* ========================================================================== compsOperaProductionVideo2026.css Style for compsOperaProductionVideo.html Ordered by: 1. Base Styles (No Viewport Media Query) 2. Viewport Media Queries (Ascending order: Mobile -> Tablet -> Desktop) 3. Device Utilities (Orientation) ========================================================================== */ /* ========================================================================== SECTION 1: BASE STYLES (No Media Query Viewport Range) ========================================================================== */ /* ========================================================================== Base Styles & Keyframes Inlined from Menu2023.css ========================================================================== */ /* Keyframe Animations */ @keyframes slideInLeft { 0% { transform: translateX(-400%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes slideInRight { 0% { transform: translateX(400%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes slideInDown { 0% { transform: translateY(-400%); } 100% { transform: translateY(0px); } } @keyframes slideInUp { 0% { transform: translateY(400%); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes slideInMenu { 0% { transform: translateY(400%); opacity: 0; } 50% { transform: translateY(0px); opacity: 0.25; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes slideInMastheadTopLeft { 0% { transform: translateY(600%) rotate(-90deg); opacity: 0; } 100% { transform: translateY(0px) rotate(0deg); opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInAlmost { 0% { opacity: 0; } 100% { opacity: 0.9; } } @keyframes fadeInDelay { 0% { opacity: 0; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes slideInUpPageTag { 0% { transform: rotate(0deg) translateY(400%); opacity: 0; } 70% { transform: rotate(-85deg) translateY(0px); opacity: 1; } 100% { transform: rotate(-90deg) translateY(0px); opacity: 1; } } @keyframes slideInTitleSection { 0% { transform: translateY(400%) rotate(-90deg); opacity: 0; } 50% { transform: translateY(0px) rotate(0deg); opacity: 0.25; } 100% { transform: translateY(0px) rotate(0deg); opacity: 1; } } @keyframes slideInFooter { 0% { transform: translateY(400%) rotate(90deg); opacity: 0; } 100% { transform: translateY(0px) rotate(0deg); opacity: 1; } } /* for featurephoto on compsoperahome.html with rotating image */ header .FeaturePhotoHome { background-color: transparent; width: 288px; height: 468px; clear: both; position: absolute; z-index: 1; top: 8px; } header .FeaturePhoto { clear: both; z-index: 1700; top: 8px; } .FeaturePhoto, header .FeaturePhoto, .menu .FeaturePhoto { animation: 9s ease 0s 1 normal none running fadeIn; width: 50vw !important; max-width: 50vw !important; height: fit-content !important; max-height: fit-content !important; position: relative !important; overflow: hidden !important; aspect-ratio: 3 / 2 !important; } .FeaturePhoto.is-portrait, header .FeaturePhoto.is-portrait, .menu .FeaturePhoto.is-portrait { aspect-ratio: 2 / 3 !important; height: auto !important; } .FeaturePhoto a { display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; } .FeaturePhoto img, .FeaturePhoto .rotating-item, .FeaturePhoto a img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } .FeaturePhoto .rotating-item { opacity: 0 !important; transition: opacity 1.5s ease-in-out !important; z-index: 1 !important; } .FeaturePhoto .rotating-item.active-photo { opacity: 1 !important; z-index: 2 !important; } .FeaturePhoto .rotating-item.fading-in { opacity: 1 !important; z-index: 3 !important; } #FeaturePhotoCorner { z-index: 2700 } .menu .FeaturePhoto .rotating-item, .menu .FeaturePhoto img.rotating-item, .menu .FeaturePhoto img, .menu .FeaturePhoto a img { width: 100% !important; max-width: 100% !important; min-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; box-sizing: border-box !important; border-radius: 4px !important; border: 2.5px solid #9a3433 !important; margin: 0 !important; padding: 0 !important; object-fit: unset !important; position: absolute !important; top: 0 !important; left: 0 !important; opacity: 0 !important; transition: opacity 1.5s ease-in-out !important; z-index: 1 !important; pointer-events: none; display: block; position: absolute; } .FeaturePhoto img, .FeaturePhoto .rotating-item, .FeaturePhoto a img { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; max-width: none !important; display: block !important; max-height: none !important; overflow-x: auto; } .FeaturePhoto, header .FeaturePhoto, .menu .FeaturePhoto { animation: 9s ease 0s 1 normal none running fadeIn; width: 100vw !important; max-width: 100vw !important; height: fit-content !important; max-height: fit-content !important; position: relative !important; overflow: hidden !important; aspect-ratio: 3 / 2 !important; margin-right: 10px; } /* Base Menu & Layout Styles from Menu2023 */ .centered-content { width: 100%; height: 100%; background: url("https://brianwilbur.com/images/paper_background_warm6_82transparent.png"); animation: 6s ease 0s 1 normal none running fadeIn; } img { opacity: 1 !important; } header { margin: 0px; padding: 0px; } #nameplate { animation: 1.5s ease 0s 1 normal none running fadeIn; } #absDiv1 { margin: 0px; padding: 0px; position: absolute; top: 98px; animation: 7s ease 0s 1 normal none running fadeIn; } .littleBox { animation: 11s ease 0s 1 normal none running fadeInDelay; } .mainContent { display: block; position: relative; animation: 3s ease 0s 1 normal none running fadeInDelay; } .section2 { animation: 7s ease 0s 1 normal none running slideInFooter; transition-timing-function: ease-out; padding-bottom: 10px; } ul.MenuBarVertical a, dl.MenuBarVertical a, dt.MenuBarVertical a, li.MenuBarVertical a, .card-header a, .card-header li a, .card-header dl a, .card-header dt a, .card-body a, .card-body li a, .card-body dt a, .hover-dropdown a, .hover-dropdown > a, .hover-dropdown > dl > a, .hover-dropdown > dl.MenuBarVertical > a, .dropdown-content a, .dropdown-content dt a, a[data-toggle="collapse"], a.collapse, a.collapse.show, ul.MenuBarVertical a.MenuBarItemSubmenu, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { display: inline-block !important; width: auto !important; max-width: 100% !important; padding: 2px 8px !important; line-height: 1.25 !important; white-space: nowrap !important; left: 0px !important; margin-left: 0px !important; } ul.MenuBarVertical li, .card-header li, .card-body li, dl.MenuBarVertical dt, .dropdown-content dt, .hover-dropdown dl, .hover-dropdown dl.MenuBarVertical, .card-header dl, .card-header dl.MenuBarVertical { display: block !important; width: 100% !important; } .card-header { padding: 0px; background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; display: block; } .card-body { border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px !important; } .hover-dropdown dl.MenuBarVertical, .hover-dropdown dl, .card-header dl.MenuBarVertical, .card-header dl, dl.MenuBarVertical, dl { margin-left: 8px !important; padding-left: 0px !important; margin-bottom: 0px !important; text-align: left !important; left: 0px !important; } .hover-dropdown .dropdown-content { padding-left: 0px !important; } .card { background-color: transparent; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; } .embededMenu { height: auto; display: block; margin-left: -48px; } #InsideMenu { z-index: 2000; } .ProfilePhoto, header .ProfilePhoto, .menu .ProfilePhoto { animation: 9s ease 0s 1 normal none running fadeIn; width: 116px !important; max-width: 116px !important; height: 116px !important; max-height: 116px !important; } .ProfilePhoto a, header .ProfilePhoto a, .menu .ProfilePhoto a { display: block !important; width: 116px !important; height: 116px !important; } .ProfilePhoto img, header .ProfilePhoto img, .menu .ProfilePhoto img, .rotating-item, .ProfilePhoto .rotating-item, .menu .ProfilePhoto .rotating-item { width: 116px !important; max-width: 116px !important; height: 116px !important; max-height: 116px !important; object-fit: cover !important; } .flex-menu-container { flex-flow: column wrap; width: 100%; height: auto; max-height: 709px; display: flex; margin: 11px 0px 0px; } .pagetag { animation: 3s ease 0s 1 normal none running fadeIn; transition-timing-function: ease-out; } #InsideMenu { min-height: 158px; left: 0px; animation: 2s ease 0s 1 normal none running slideInMenu; transition-timing-function: ease-out; } #InsideMenu, #InsideMenu ul, #InsideMenu li, #InsideMenu dl, #InsideMenu dt, #InsideMenu dd, #mainNav, #mainNav li, #middleUL, #middleUL li, .embededMenu ul, .embededMenu li, .MenuChild ul, .MenuChild li, .MenuChildTop ul, .MenuChildTop li, .MenuBarVertical, .MenuBarVertical li, .MenuBarVertical a, .hover-dropdown, .dropdown-content { list-style: none !important; } #HeaderPicture { height: auto; flex: 1 1 30%; max-width: 26%; order: 2; display: flex; margin-top: 34px; margin-left: 38px; z-index: 1700; animation: 4s ease 0s 1 normal none running slideInUp; transition-timing-function: ease-out; opacity: 1 !important; } .TitleSection { position: relative; margin-top: 0px; margin-left: 0px; top: 0px; vertical-align: text-top; order: 3; align-items: flex-start; width: 68%; display: flex; padding: 1em; animation: 3s ease 0s 1 normal none running slideInTitleSection; transition-timing-function: ease-out; justify-content: center; } .centered-wrapper { position: relative; max-width: none; margin: auto; padding: 12px 0px; width: 98.7vw; } .centered-content { width: 100%; display: block; margin: auto; } .RedBorderTD { width: 95.7vw; max-width: 1066px; } .mastheadTopLeft { animation: 2.5s ease-out 0s 1 normal none running slideInMastheadTopLeft; padding: 2px 8px; } .mastheadTopMiddle { display: flex; flex: 2 1 0%; height: fit-content; margin: auto; padding: 0px 4px; justify-content: center; align-items: center; overflow: hidden; } .mastheadTopRight { animation: 3s ease-out 0s 1 normal none running slideInLeft; padding: 2px 8px; } #pagebottom p { animation: 15s ease 0s 1 normal none running fadeInDelay; } .pagetag { display: none; } a.current-active-link { color: rgb(139, 0, 0) !important; font-weight: bold !important; } .flex-menu-container { max-height: none !important; } .TitleSection { width: 100% !important; max-width: 100% !important; padding: 0px !important; box-sizing: border-box !important; } .TitleVideoOperaHome, .TitleVideoHome, .TitleVideo, .vimeo-responsive-container { position: relative !important; width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; margin: 0px auto !important; background: rgb(0, 0, 0) !important; border: 1.4px solid rgb(154, 52, 51) !important; border-radius: 4px !important; overflow: hidden !important; box-sizing: border-box !important; } .TitleVideoOperaHome iframe, .TitleVideoHome iframe, .TitleVideo iframe, .vimeo-responsive-container iframe { position: absolute !important; top: 0px !important; left: 0px !important; width: 100% !important; height: 100% !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; } .video-touch-overlay { position: absolute !important; top: 0px !important; left: 0px !important; width: 100% !important; height: 100% !important; z-index: 5 !important; cursor: pointer !important; display: flex !important; align-items: flex-end !important; justify-content: flex-end !important; padding: 12px !important; background: rgba(0, 0, 0, 0) !important; transition: opacity 0.3s !important; } .video-touch-overlay .unmute-badge { background: rgba(0, 0, 0, 0.8) !important; color: rgb(255, 255, 255) !important; font-size: 13px !important; font-family: Arial, sans-serif !important; padding: 6px 14px !important; border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; display: flex !important; align-items: center !important; gap: 6px !important; pointer-events: none !important; box-shadow: rgba(0, 0, 0, 0.6) 0px 2px 8px !important; } .video-touch-overlay .re-enter-fullscreen-btn { display: none; position: absolute !important; top: 15px !important; right: 15px !important; z-index: 10 !important; background: rgba(0, 0, 0, 0.85) !important; color: rgb(255, 255, 255) !important; border: 1.5px solid rgba(255, 255, 255, 0.6) !important; border-radius: 20px !important; padding: 8px 16px !important; font-size: 13px !important; font-weight: bold !important; font-family: Arial, sans-serif !important; cursor: pointer !important; pointer-events: auto !important; box-shadow: rgba(0, 0, 0, 0.7) 0px 2px 10px !important; transition: background 0.2s, transform 0.1s !important; } .video-touch-overlay .re-enter-fullscreen-btn:hover, .video-touch-overlay .re-enter-fullscreen-btn:active { background: rgb(154, 52, 51) !important; border-color: rgb(255, 255, 255) !important; transform: scale(1.05) !important; } .close-fullscreen-btn { display: none !important; } ul.MenuBarVertical, ul.MenuBarVertical li, ul.MenuBarVertical a, dl.MenuBarVertical, dl.MenuBarVertical a, dt.MenuBarVertical, dt.MenuBarVertical a, .hover-dropdown, .hover-dropdown a, .dropdown-content, .dropdown-content a, .dropdown-content dt a { font-family: Helvetica, Arial, sans-serif !important; } .hover-dropdown { position: relative; display: block; } .hover-dropdown .dropdown-content { visibility: hidden; opacity: 0; max-height: 0px; transition: visibility 0.3s 0.25s, opacity 0.3s, max-height 0.3s; padding-left: 0px !important; } .hover-dropdown:hover .dropdown-content { visibility: visible; opacity: 1; max-height: 800px; transition-delay: 0s; } .hover-dropdown.is-open .dropdown-content, .hover-dropdown:has(.current-active-link) .dropdown-content, .hover-dropdown.menu-tree-active .dropdown-content { visibility: visible !important; opacity: 1 !important; max-height: none !important; transition: none !important; } .MenuChild, .hover-dropdown, .card, .card-header, .card-body, dl.MenuBarVertical, dt.MenuBarVertical, li.MenuBarVertical, ul.MenuBarVertical li, #InsideMenu dl, #InsideMenu dt, #InsideMenu dd { display: block !important; clear: both !important; float: none !important; position: relative !important; height: auto !important; margin-top: 2px !important; margin-bottom: 2px !important; padding-top: 0px !important; padding-bottom: 0px !important; } ul.MenuBarVertical a, dl.MenuBarVertical a, dt.MenuBarVertical a, li.MenuBarVertical a, .card-header a, .card-body a, .hover-dropdown a, .dropdown-content a { display: inline-block !important; width: auto !important; max-width: 100% !important; padding: 2px 8px !important; line-height: 1.25 !important; white-space: nowrap !important; } .hamburger-menu-btn { display: none; position: fixed; top: 15px; left: 15px; z-index: 1000000; width: 44px; height: 44px; padding: 8px 6px; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); border: 1.5px solid rgba(255, 255, 255, 0.5); border-radius: 8px; cursor: pointer; box-sizing: border-box; flex-direction: column; justify-content: space-around; align-items: center; outline: none; transition: background 0.3s, border-color 0.3s; } .hamburger-menu-btn:hover, .hamburger-menu-btn:focus { background: rgba(0, 0, 0, 0.9); border-color: rgba(255, 255, 255, 0.9); } .hamburger-bar { display: block; width: 24px; height: 2.5px; background-color: rgb(255, 255, 255); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; transform-origin: center center; } ul.MenuBarVertical a, ul.MenuBarVertical a:link, ul.MenuBarVertical a:visited, ul.MenuBarVertical a:hover, ul.MenuBarVertical a:active, ul.MenuBarVertical a:focus, dl.MenuBarVertical a, dl.MenuBarVertical a:link, dl.MenuBarVertical a:visited, dl.MenuBarVertical a:hover, dl.MenuBarVertical a:active, dl.MenuBarVertical a:focus, dt.MenuBarVertical a, dt.MenuBarVertical a:link, dt.MenuBarVertical a:visited, dt.MenuBarVertical a:hover, dt.MenuBarVertical a:active, dt.MenuBarVertical a:focus, li.MenuBarVertical a, li.MenuBarVertical a:link, li.MenuBarVertical a:visited, li.MenuBarVertical a:hover, li.MenuBarVertical a:active, li.MenuBarVertical a:focus, .card-header a, .card-header a:link, .card-header a:visited, .card-header a:hover, .card-header a:active, .card-header a:focus, .card-body a, .card-body a:link, .card-body a:visited, .card-body a:hover, .card-body a:active, .card-body a:focus, .hover-dropdown a, .hover-dropdown a:link, .hover-dropdown a:visited, .hover-dropdown a:hover, .hover-dropdown a:active, .hover-dropdown a:focus, .dropdown-content a, .dropdown-content a:link, .dropdown-content a:visited, .dropdown-content a:hover, .dropdown-content a:active, .dropdown-content a:focus, .menu a, .menu a:link, .menu a:visited, .menu a:hover, .menu a:active, .menu a:focus, .embededMenu a, .embededMenu a:link, .embededMenu a:visited, .embededMenu a:hover, .embededMenu a:active, .embededMenu a:focus, #InsideMenu a, #InsideMenu a:link, #InsideMenu a:visited, #InsideMenu a:hover, #InsideMenu a:active, #InsideMenu a:focus, #mainNav a, #mainNav a:link, #mainNav a:visited, #mainNav a:hover, #mainNav a:active, #mainNav a:focus, .menu-overlay a, .menu-overlay a:link, .menu-overlay a:visited, .menu-overlay a:hover, .menu-overlay a:active, .menu-overlay a:focus, .MenuChildTop a, .MenuChildTop a:link, .MenuChildTop a:visited, .MenuChildTop a:hover, .MenuChildTop a:active, .MenuChildTop a:focus, .MenuChild a, .MenuChild a:link, .MenuChild a:visited, .MenuChild a:hover, .MenuChild a:active, .MenuChild a:focus { text-decoration: none !important; } /* Media Queries from Menu2023 */ @media only screen and (max-width: 428px) { .centered-wrapper { width: 91.7vw; } #InsideMenu { left: -26vw; } ul.MenuBarVertical a { width: 150px; } ul.MenuBarVertical a { width: 140px; } #mainNav dl { margin-left: 9px; } #mainNav dt { margin-left: 9px; } .pagetag { display: block; position: relative; text-align: right; width: 510px; top: -237px; left: -258px; padding: 0px; transform: rotate(-90deg); background-color: transparent; } .mainContent { top: 0px; position: relative; display: block; } header { margin-top: -41px; height: auto; min-height: unset; margin-bottom: 0px; } header .ProfilePhoto { width: 30%; height: 30%; left: 0px; top: 0px; position: relative; display: flex; order: 4; flex: 0.8 1 0%; margin-right: 16px; margin-left: auto; } #nameplate { padding: 0px; height: auto; margin-top: 40px; } .mastheadTopLeft { display: flex; flex: 1 1 0%; width: 100%; height: fit-content; margin: auto; padding: 0.5em; justify-content: center; } .mastheadTopRight { display: flex; flex: 1 1 0%; height: auto; } #mastheadTop { display: flex; flex-flow: column wrap; top: 0px; position: relative; height: auto; align-content: center; vertical-align: middle; padding: 1em; } #mastheadTop p { text-align: center; font-size: 2.5em; line-height: normal; width: 100%; height: 101px; align-items: center; justify-content: center; margin-top: 0px; padding: 20px; } #mastheadTop .mastheadTopRight p { text-align: center; font-size: 8vw; line-height: normal; display: flex; width: 100%; height: 50%; align-items: center; justify-content: center; margin: auto; padding: 0px; } #absDiv1 { top: 0px; height: 8vw; overflow: hidden; position: relative; order: 1; } .pagetag { padding: 0px; background-color: transparent; left: 0vw; position: relative; top: 4px; display: flex; flex-direction: column; order: 2; flex: 1 1 content; margin: 0px; writing-mode: vertical-rl; transform: rotate(180deg); justify-content: center; } .flex-menu-container { display: flex; flex-wrap: wrap; position: relative; width: 91vw; left: -17px; min-height: 0px; margin: 0px; padding: 0px; max-height: none; top: 0px; } .flex-menu-container section { width: 100%; min-height: 0px; margin-left: 0px; } .menu { margin-top: 16px; margin-right: 0px; order: 2; flex: 1 1 30%; width: 100%; margin-bottom: 10px; } .MenuChild { width: 39vw; order: 3; margin-left: 0px; } .MenuChildTop { width: 39vw; order: 3; margin-left: 0px; margin-top: 0px; } .embededMenu { display: flex; margin-left: 0px; height: auto; margin-bottom: 0px; min-height: 0px; width: 100%; } #InsideMenu { position: relative; top: 0px; margin-bottom: 0px; margin-top: 0px; display: flex; left: 0px; min-height: 158px; } #middleUL { left: 0px; top: 0px; } #middleUL li { display: flex; flex-direction: column; justify-content: space-between; float: none; left: 0px; width: 100%; } #left { width: 100%; } #leftDiv { margin: auto auto auto 0px; padding: 0em; min-height: 0px; width: 148px; } #mainNav dl { height: auto; display: flex; flex-direction: column; justify-content: space-between; } ul#mainNav { width: 8em; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; display: flex; flex-direction: column; justify-content: space-between; position: relative; top: 0px; left: 0px; height: auto; } ul.MenuBarVertical a { width: 93px; left: 0px; } #HeaderPicture { display: flex; top: 8px; height: auto; margin: 0px auto; width: 80%; order: 1; max-width: none; left: 0%; flex-wrap: wrap; place-content: center; align-items: center; } .TitleVideoOperaHome { height: calc(0px + 42vw); width: calc(0px + 75vw); } } @media only screen and (max-width: 370px) { #mastheadTop p { font-size: 2em; } } @media only screen and (min-width: 370px) and (max-width: 428px) { ul.MenuBarVertical a { width: 122px; } #mainNav dl { margin-left: 0px; } #mainNav dt { margin-left: 0px; } } @media only screen and (min-width: 428px) and (max-width: 531px) { .centered-wrapper { width: 91.7vw; } .TitleSection { margin-left: 0px; padding: 1em; justify-content: center; } header { float: none; height: auto; } #nameplate { padding: 0px; height: auto; margin-top: 40px; } .mastheadTopLeft { display: flex; flex: 1 1 0%; width: auto; padding: 0px; height: fit-content; margin: auto; justify-content: center; } .mastheadTopRight { display: flex; flex: 1 1 0%; height: auto; } #mastheadTop { display: flex; flex-flow: column wrap; top: 0px; position: relative; height: auto; align-content: center; vertical-align: middle; padding: 1em; } #mastheadTop .mastheadTopRight p { text-align: center; font-size: 7vw; line-height: normal; display: flex; width: 100%; height: 50%; align-items: center; justify-content: center; margin: auto; padding: 0px; } header .menu { margin-left: 0px; width: 100%; display: flex; margin-bottom: 11px; min-height: 0px; order: 3; flex: 1 1 30%; margin-top: 15px; } .pagetag { padding: 0px; background-color: transparent; left: 0vw; position: relative; top: 5px; display: flex; flex-direction: column; order: 2; flex: 1 1 0%; margin: 0px; writing-mode: vertical-rl; transform: rotate(180deg); justify-content: center; } header { margin-top: -41px; height: auto; min-height: unset; margin-bottom: 0px; } #absDiv1 { top: 0px; height: 7vw; overflow: hidden; position: relative; order: 1; } .ProfilePhoto { left: 56vw; } header .ProfilePhoto { top: 0px; left: 5px; position: relative; display: flex; order: 4; flex: 2 1 0%; margin-right: 22px; } .flex-menu-container { display: flex; flex-wrap: wrap; position: relative; width: 91vw; left: 0px; min-height: 0px; margin: 0px; padding: 0px; max-height: none; } .flex-menu-container section { width: 100%; flex-flow: column-reverse; } .menu { flex: 0.6 1 0%; margin-top: 36px; margin-left: 0vw; display: block; margin-bottom: 0px; } .MenuChild { left: 0px; margin-left: 0px; margin-top: 0px; padding-left: 0vw; } .MenuChildTop { left: 0px; margin-left: 0px; margin-top: -122px; padding-left: 0vw; } .embededMenu { width: 100%; display: block; margin-bottom: 0px; min-height: 0px; margin-left: 0px; height: auto; } #InsideMenu { position: relative; top: 0px; margin-top: 25px; margin-bottom: 10px; display: block; left: 18px; min-height: auto; } #middleUL { left: 0px; top: 0px; } #middleUL li { display: block; float: none; width: 181px; } #leftDiv { margin: auto auto 10px 0px; padding: 0em; min-height: 0px; } ul#mainNav { width: 100%; max-width: 288px; padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; display: block; position: relative; top: 0px; left: 0px; height: auto; } #mainNav dl { height: auto; display: block; margin-left: 0px !important; } ul.MenuBarVertical a { width: 124px; } #mainNav dt { margin-left: 0px; } #HeaderPicture { display: flex; top: 0px; height: auto; margin: 0px; width: 80%; order: 1; max-width: none; flex-wrap: wrap; place-content: center; align-items: center; } .TitleVideoOperaHome { height: calc(0px + 42vw); width: calc(0px + 75vw); } .mainContent { top: 0px; } } @media only screen and (min-width: 531px) and (max-width: 844px) { #mastheadTop { display: flex; height: auto; padding: 0em; justify-content: flex-start; } .mastheadTopLeft { display: flex; height: fit-content; justify-content: flex-start; width: auto; flex: 3 1 0%; margin: auto; padding: 2px 6px; } .mastheadTopMiddle { z-index: 1700; padding: 0px 4px; flex: 2 1 0%; overflow: hidden; } .mastheadTopRight { display: flex; flex: 2 1 0%; height: fit-content; margin: auto; padding: 2px 6px; } .mastheadTopRight p { font-size: 5vw !important; } .centered-wrapper { width: 91.7vw; } .TitleVideoOperaHome { height: calc(0px + 42vw); width: calc(0px + 75vw); } header { height: 890px; } #HeaderPicture { position: relative; display: block; left: 55%; width: 40%; margin-top: 0px; } #left { width: 370px; } #InsideMenu { left: 0px; } .pagetag { display: block; position: absolute; text-align: right; width: 510px; top: -237px; left: -273px; padding: 0px; transform: rotate(-90deg); background-color: transparent; } .menu { flex: 0.6 1 0%; margin-top: 36px; margin-left: 0vw; } .MenuChild { left: 0px; margin-left: 0px; margin-top: 0px; } .MenuChildTop { left: 0px; margin-left: 0px; margin-top: -122px; } .mainContent { top: 0px; } header { min-height: unset; height: auto; margin-bottom: 20px; position: relative; display: block; } header ul { height: auto; } #mastheadTop p { text-align: right; line-height: normal; display: flex; width: 100%; height: 82px; align-items: center; justify-content: flex-end; margin-top: 0px; padding: 0px; font-size: 2.3em !important; } #absDiv1 { position: relative; top: 0px; margin-top: 0px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; } .pagetag { top: 364px; left: -224px; } .flex-menu-container { display: flex; flex-flow: wrap; margin-top: 0px; position: relative; width: 100%; margin-bottom: 0px; max-height: none; align-items: flex-start; } .TitleSection { flex: 3 1 0%; padding: 0.5em 4em; min-width: fit-content; flex-direction: column; align-items: center; } #InsideMenu { position: relative; top: 0px; margin-bottom: 10px; margin-top: 25px; display: block; left: 18px; } #middleUL { left: 5vw; top: 0px; height: auto; } #middleUL li { flex-direction: column; justify-content: space-between; float: none; display: block; position: relative; margin: 0px; padding: 0px; height: auto; width: 181px; } #leftDiv { margin: auto auto 10px 0px; padding: 0em; min-height: 0px; } ul.MenuBarVertical a { width: 124px; } ul#mainNav { padding: 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: none; display: flex; flex-direction: column; justify-content: space-between; position: relative; top: 0px; left: 0px; height: auto; width: 200px; } #mainNav dl { height: auto; display: flex; flex-direction: column; justify-content: space-between; margin-left: 0px !important; } #mainNav dl { margin-left: 0px; } #mainNav dt { margin-left: 0px; } #HeaderPicture { top: -31px; } #rColTop { margin-bottom: 0px; } #HeaderPicture { position: relative; min-height: 0px; max-width: 45%; left: 0px; top: 0px; margin: auto; padding-bottom: 1em; } } @media only screen and (min-width: 844px) and (max-width: 1166px) { #mastheadTop { display: flex; height: auto; padding: 0em; justify-content: center; } .mastheadTopLeft { display: flex; justify-content: flex-start; flex: 3 1 0%; margin: auto; padding: 1em; } .mastheadTopRight { display: flex; flex: 1 1 0%; padding: 1em; margin: auto; } .mastheadTopRight p { font-size: 2.2rem !important; } .centered-wrapper { width: 91.7vw; } .TitleSection { flex: 3 1 0%; padding: 0.5em 4em; min-width: 100%; flex-direction: column; align-items: center; margin-left: 0px; } .TitleVideoOperaHome { height: calc(0px + 42vw); width: calc(0px + 75vw); } header { position: relative; width: 100%; float: none; height: auto; display: block; } .mainContent { position: relative; display: block; } header .ProfilePhoto { position: relative; left: 15px; height: 180px; z-index: 2700; top: -106px; } #InsideMenu { left: -130px; } #left { width: 480px; } ul.MenuBarVertical a { width: 140px; } .mainContent { top: 0px; } header { height: auto; margin-bottom: 20px; position: relative; display: block; min-height: 0px; } header ul { height: auto; } #absDiv1 { position: relative; top: -13px; margin-top: 0px; z-index: 1; max-height: 41px; } .pagetag { top: 387px; left: -219px; width: 500px; } .flex-menu-container { display: flex; flex-wrap: wrap; margin-top: 0px; position: relative; width: 100%; margin-bottom: 0px; margin-left: 0px; max-height: none; } .embededMenu { margin-top: 36px; } .menu { margin-top: 31px; flex: 1 1 0%; margin-left: 5vw; } .MenuChild { margin-top: 0px; margin-left: 0px; } .MenuChildTop { margin-top: -145px; margin-left: 0px; } #InsideMenu { position: relative; top: 0px; margin-bottom: 10px; margin-top: 9px; display: block; left: 0px; min-height: 158px; } #middleUL { left: 0px; top: 0px; height: auto; } #middleUL li { float: none; display: block; position: relative; margin: 0px; padding: 0px; height: auto; width: 297px; top: 10px; } #leftDiv { margin: auto auto auto 9%; padding: 0px 0px 1em 1.5em; } #rColTop { margin-bottom: 0px; } ul#mainNav { position: relative; top: 0px; left: 0px; height: auto; } #HeaderPicture { position: relative; display: flex; height: auto; margin: 32px auto auto; min-height: 0px; max-width: 45%; min-width: 364px; left: 0px; top: 0px; right: 0px; justify-content: center; flex-direction: column; padding-bottom: 1em; } } @media only screen and (min-width: 1166px) { #mastheadTop { display: flex; height: auto; padding: 0em; justify-content: center; } .mastheadTopLeft { display: flex; height: fit-content; justify-content: flex-start; padding: 2px 8px; flex: 4 1 0%; margin: auto; } .mastheadTopMiddle { display: flex; flex: 3 1 0%; height: fit-content; margin: auto; padding: 0px 4px; justify-content: center; align-items: center; overflow: hidden; } .mastheadTopRight { display: flex; flex: 2 1 0%; padding: 2px 8px; height: fit-content; margin: auto; animation: 3s ease-out 0s 1 normal none running slideInLeft; } .centered-wrapper { position: relative; max-width: none; margin: auto; padding: 12px 0px; width: 98.7vw; } .centered-content { width: 100%; display: block; margin: auto; } .RedBorderTD { width: 95.7vw; max-width: 1066px; } header { width: 100%; float: none; height: auto; margin-bottom: 20px; position: relative; display: block; min-height: 0px; } #HeaderPicture { position: relative; left: 37%; width: 58%; height: auto; flex: 1 1 30%; max-width: 45%; order: 2; display: flex; margin-top: 34px; margin-left: 38px; } #InsideMenu { left: -135px; } #left { width: 550px; } .centered-content { width: 1065px; } .RedBorderTD { width: 1065px; } .mainContent { top: 0px; } header ul { height: auto; } #absDiv1 { position: relative; top: 0px; margin-top: 0px; z-index: 1; height: 5em; overflow: hidden; display: flex; align-items: center; justify-content: center; order: 1; } .pagetag { top: 412px; left: -218px; width: 500px; order: 2; } .flex-menu-container { position: relative; flex-flow: column wrap; width: 100%; height: auto; max-height: none; display: flex; margin: 0px; } .embededMenu { margin-top: 36px; } .TitleSection { position: relative; margin: 0px; top: 0px; vertical-align: text-top; order: 4; min-width: 100%; flex: 3 1 0%; padding: 0.5em 6em; align-items: center; width: fit-content; } .TitleVideoOperaHome { height: 515px; } .menu { flex: 1 1 0%; order: 1; margin-top: 19px; margin-left: 32px; } .MenuChild { top: 0px; margin-top: 0px; margin-left: 0px; order: 3; } .MenuChildTop { top: 0px; margin-top: -121px; margin-left: 0px; order: 3; } #InsideMenu { position: relative; top: 0px; margin-bottom: 10px; margin-top: 24px; display: block; min-height: 158px; left: 0px; } #middleUL { left: 0px; top: 0px; height: auto; } #middleUL li { float: none; display: block; position: relative; margin: 0px; padding: 0px; height: auto; width: 297px; } #leftDiv { margin: auto auto auto 9%; padding: 0px 0px 1em 1.5em; } #rColTop { height: auto; } ul#mainNav { position: relative; top: 0px; left: 0px; height: auto; } #HeaderPicture { position: relative; margin-bottom: 0px; margin-top: 38px; min-height: 0px; left: 0px; top: -48px; right: 0px; flex-direction: inherit; min-width: 364px; width: calc(100% - 319px) !important; } } @media only screen and (max-width: 531px) { .hamburger-menu-btn { display: flex !important; } .menu-overlay { position: fixed !important; top: 68px !important; left: 15px !important; width: 285px !important; max-width: calc(-30px + 100vw) !important; max-height: calc(-85px + 100vh) !important; overflow-y: auto !important; background: rgba(102, 102, 102, 0.25) !important; backdrop-filter: blur(12px) !important; border-radius: 20px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: rgba(0, 0, 0, 0.45) 0px 8px 32px 0px !important; padding: 16px 14px 18px !important; margin: 0px !important; z-index: 999999 !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.25s, visibility 0.25s !important; scrollbar-width: none !important; } .menu-overlay .MenuChildTop { margin-top: 0px !important; width: 100% !important; } .menu-overlay .embededMenu, .menu-overlay #InsideMenu, .menu-overlay #middleUL, .menu-overlay #left, .menu-overlay #leftDiv, .menu-overlay #mainNav, .menu-overlay .card, .menu-overlay .card-header, .menu-overlay .card-body, .menu-overlay .MenuBarVertical { margin-left: 0px !important; padding-left: 0px !important; list-style: none !important; background-color: transparent !important; text-align: left !important; } .menu-overlay li.MenuBarVertical { left: -18px !important; margin-left: 0px !important; padding-left: 0px !important; } .menu-overlay dl.MenuBarVertical, .menu-overlay .hover-dropdown dl.MenuBarVertical, .menu-overlay .hover-dropdown dl, .menu-overlay .card-header dl.MenuBarVertical { left: -3px !important; margin-left: 0px !important; padding-left: 0px !important; } .menu-overlay dt.MenuBarVertical, .menu-overlay .dropdown-content dt, .menu-overlay .dropdown-content dt.MenuBarVertical, .menu-overlay .hover-dropdown .dropdown-content dt { left: 12px !important; margin-left: 0px !important; padding-left: 0px !important; } .menu-overlay ul.MenuBarVertical a, .menu-overlay dl.MenuBarVertical a, .menu-overlay dt.MenuBarVertical a, .menu-overlay li.MenuBarVertical a, .menu-overlay a { padding-top: 3.5px !important; padding-bottom: 3.5px !important; line-height: 1.25 !important; } .menu-overlay ul.MenuBarVertical a { width: 245px !important; max-width: 100% !important; } .menu-overlay ul.MenuBarVertical a, .menu-overlay dl.MenuBarVertical a { left: 0px !important; } .menu-overlay #InsideMenu { position: relative !important; top: 0px !important; margin-top: 0px !important; display: block !important; left: 18px !important; min-height: 158px !important; } .menu-overlay .dropdown-content, .menu-overlay .hover-dropdown .dropdown-content { background: transparent !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; border-radius: 0px !important; padding: 0px !important; box-shadow: none !important; text-align: left !important; } .menu-overlay, .menu-overlay a, .menu-overlay a:link, .menu-overlay a:visited, .menu-overlay li, .menu-overlay p, .menu-overlay span, .menu-overlay div { color: rgb(218, 213, 206) !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 15.5px !important; line-height: 1.35 !important; text-align: left !important; } .menu-overlay a[href*="compsOpera"], .menu-overlay a[href*="compsopera"], .menu-overlay dl, .menu-overlay dl a, .menu-overlay dt, .menu-overlay dt a, .menu-overlay dd, .menu-overlay .MenuChild a, .menu-overlay .hover-dropdown a, .menu-overlay .dropdown-content, .menu-overlay .dropdown-content a, .menu-overlay .dropdown-content dt, .menu-overlay .dropdown-content dt a, .menu-overlay h16 { color: rgb(255, 215, 0) !important; } .menu-overlay a:hover, .menu-overlay a:focus, .menu-overlay li a:hover, .menu-overlay dl a:hover, .menu-overlay dt a:hover, .menu-overlay .dropdown-content a:hover { color: rgb(255, 255, 255) !important; background-color: rgba(255, 255, 255, 0.15) !important; text-decoration: none !important; } } @media only screen and (min-width: 532px) { .hamburger-menu-btn { display: none !important; } .menu-overlay { display: contents !important; position: static !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; background: transparent !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: none !important; box-shadow: none !important; padding: 0px !important; margin: 0px !important; } } /* ========================================================================== End of Inlined Styles from Menu2023.css ========================================================================== */ /* ========================================================================== Base Styles Inlined from Inside.css ========================================================================== */ /******************************************************************************* LAYOUT INFORMATION: describes box model, positioning, z-order *******************************************************************************/ /* The outermost container of the Menu Bar, a fixed width box with no margin or padding */ ul.MenuBarVertical a { margin: 0; padding: 0; list-style-type: none; cursor: default; width: 8em; } /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */ ul.MenuBarActive { z-index: 1000; } /* Menu item containers, position children relative to this container and are same fixed width as parent */ ul.MenuBarVertical li { margin: 0; padding: 0; list-style-type: none; font: 14px/15px Helvetica, Verdana, Arial, sans serif; position: relative; text-align: left; cursor: pointer; width: 8em; } /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */ ul.MenuBarVertical ul { margin: -10% 0 0 90%; padding-top: 1em; list-style-type: none; font: 12px Helvetica, Verdana, Arial, sans serif; position: absolute; z-index: 1020; cursor: default; width: 6em; left: -4000px; top: 0; } /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */ ul.MenuBarVertical ul.MenuBarSubmenuVisible { left: 100px; } /******************************************************************************* DESIGN INFORMATION: describes color scheme, borders, fonts *******************************************************************************/ /* Outermost menu container has borders on all sides */ ul.MenuBarVertical { border: 0px solid #C0C; } /* Submenu containers have borders on all sides */ ul.MenuBarVertical ul li { border-left: 1px solid #711941; width: 6em; font: 85%/1 Helvetica, Arial, sans-serif; background: url(../images/2009/submenubg2.gif) left top repeat-y; } /* Menu items are a light gray block with padding and no text decoration */ ul.MenuBarVertical a { display: block; cursor: pointer; padding: 4px 6px 4px 0px; /*0.5em 0.75em*/ color: #3E191C; text-decoration: none; width: 200px; } /* Menu items that have mouse over or focus have a blue background and white text */ ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus { background-color: #f0eee9; color: #cc9999; font-weight: 600; } /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */ ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible { background-color: #f0eee9; color: #7b2a29; } ul.MenuBarVertical a { color: #7b2a29; font-weight: 500; } /******************************************************************************* SUBMENU INDICATION: styles if there is a submenu under a given menu item *******************************************************************************/ /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarVertical a.MenuBarItemSubmenu { background-image: url(SpryMenuBarRight.gif); background-repeat: no-repeat; background-position: 95% 50%; } /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */ ul.MenuBarVertical a.MenuBarItemSubmenuHover { background-image: url(SpryMenuBarRightHover.gif); background-repeat: no-repeat; background-position: 95% 50%; } /******************************************************************************* BROWSER HACKS: the hacks below should not be changed unless you are an expert *******************************************************************************/ /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */ ul.MenuBarVertical iframe { position: absolute; z-index: 1010; filter: alpha(opacity 0.1); } /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */ @media screen, projection { ul.MenuBarVertical li.MenuBarItemIE { display: inline; float: left; background: #FFF; } } /*end from SpryMenuBarVertica11.css*/ .pagetag { display: block; position: absolute; text-align: right; width: 300px; top: 251px; left: -265px; padding: 0; background-color: transparent; z-index: 5000; } .card-header { padding: 0; background-color: transparent; border: none; } .card-body { padding: 0px 1.25rem; border: none; } #compsNav dl { text-indent: 0px; margin-left: 15px; height: auto; } #compsNav dd { font-size: 100%; margin: 0 0 0 0em; margin-left: 15px; position: relative; display: flex; flex-direction: column; justify-content: space-around; text-indent: 0px; z-index: 0; height: auto; left: 14px; } #compsNav dt { margin-left: 15px; position: relative; display: block; text-indent: 0px; left: 14px; } /* @charset "utf-8";*/ /* Global Styles */ #rotating-item-wrapper { width: 100%; } .mainContent .section4 table { width: 100%; } .signup { width: "100%"; } .centercontent { text-align: center; } .auto-hyphen { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } #facbookcontainer { border: none; overflow: hidden; width: auto; margin-left: auto; margin-right: auto; } #nameplate h1 { font-size: 2.5em; line-height: 2em; margin: 0; padding: 0; margin-left: 0 } #nameplate h2 { font-size: 1.8em; line-height: 2em; color: #666; margin: 0 0 0 0; padding: 0; margin-left: 0 } #rColTop { position: static; height: auto; } html { width: 100%; min-height: 100%; height: auto; padding: 0; margin: 0; } .centered-wrapper:before { content: ""; position: relative; display: inline-block; width: 0; height: 100%; vertical-align: middle; } .centered-content { display: block; width: 100%; height: 100%; background: url("https://brianwilbur.com/images/paper_background_warm6_82transparent.png"); animation: 6s ease 0s 1 normal none running fadeIn; margin: auto; } .bgRed { background-color: #9a3433; } p { font: 100%/1.3 Helvetica, Arial, sans-serif; color: #33080F; text-align: justify; font-size: 16px; margin-top: 0px; display: block; position: relative; } h1 { font: 300%/1.1 Helvetica; color: #9a3433; line-height: 1.1em; margin-bottom: 0; margin-top: 0; } h2 { font: 145%/1.9 Helvetica, Arial, sans-serif; color: #9a3433; margin: 0; line-height: 1.5em; } h3 { font: 130%/1.4 Helvetica, Arial, sans-serif; margin: 0; color: #3E191C; } h3 a:link { font: 100%/1.4 Helvetica, Arial, sans-serif; margin: 0; color: #6f2b2a; text-decoration: underline; font-weight: 600; } h4 { font: 115%/1.7 Helvetica, Arial, sans-serif; margin: 0px; color: #9a3433; } h5 { font: 28px/1 Helvetica, Arial, sans-serif; color: #cc9999; margin: 0px; font-weight: bold; display: block; } .style9 { font: 100%/1.7 Helvetica, Arial, sans-serif; color: #C63; margin: 0; line-height: 130%; } h6 { font: 150%/1.7 Helvetica, Arial, sans-serif; color: #9a3433; margin: 0; line-height: 140%; font-weight: bold; } h7 { font: 160%/1.7 Helvetica; color: #DB220C; line-height: 1.2em } h8 { font: 200%/1.7 Helvetica; line-height: 1.2em } .firstLetterItalic { font: 250% Helvetica; font-style: italic; letter-spacing: -0.5px; line-height: 0; } .firstLetterItalicLessSpacing { font: 250% Helvetica; font-style: italic; letter-spacing: -6.5px; line-height: 0; } .firstLetter { font: 250% Helvetica; letter-spacing: -0.5px; line-height: 0; } .firstLetterLessSpacing { font: 250% Helvetica; letter-spacing: -6.0px; line-height: 0; } h9 { font: 170% Helvetica; line-height: 1.5; color: #6f2b2a; font-weight: 600; text-align: center; margin: auto; display: inherit; } h10 { font: 400%/1.1 Helvetica, Arial, sans-serif; color: #9a3433; line-height: 2em; margin-bottom: 0; margin-top: 0; } h11 { font: 250%/1.1 Helvetica, Arial, sans-serif; color: #9a3433; line-height: 1.5em; margin-bottom: 0; margin-top: 0; } h12 { font: 28px/1.2 Helvetica, Arial, sans-serif; color: #6C6969; margin: 0; font-weight: bold; } h13 { font: 18px/1.3 Helvetica, Arial, sans-serif; color: #6C6969; margin: 0; font-weight: bold; } h15 { font: 6vw/2 Helvetica, Arial, sans-serif; color: #9a3433; font-weight: bolder; font-style: italic; font-size: +1; } h16 { font: 14px/1.25 Helvetica, Arial, sans-serif; color: inherit; font-weight: normal; } h17 { font: 29px/1.15 Helvetica, Arial, sans-serif; color: #9a3433; font-weight: bold; margin: 0; display: block; } .graytext p:first-letter { font-size: 200%; letter-spacing: -.5px; line-height: normal; } .graytext { font: Helvetica, Arial, sans-serif; font-size: 18px; color: #878383; margin: 0; font-weight: bold; } h14 { font: 250%/1.1 "MrLeopold Pro", "Edwardian Script ITC", Helvetica; color: #9a3433; line-height: 1.5em; margin-bottom: 0; margin-top: 0; } a:link { color: #993333; text-decoration: underline } h5 a:link { color: #cc9999; text-decoration: underline } a:visited { color: #33080F; text-decoration: underline; } a:hover { color: #666666; text-decoration: bolder; } footer #pagebottom { text-align: center; } a:active { color: #666666; text-decoration: underline; font-weight: bolder; } /* Header */ header { text-align: center; display: block; background-color: transparent; height: auto; } header .profilelogo { position: relative; height: auto; display: block; } header .profileLogo .logoPlaceholder { background-color: transparent; width: 187px; text-align: right; } header .logoPlaceholder span { width: 80px; height: 22px; font-family: Helvetica, Arial, Helvetica, sans-serif; color: transparent; font-size: 30px; font-weight: 700; line-height: 53px; } header .ProfilePhotoHome { background-color: transparent; width: 288px; height: 468px; clear: both; position: absolute; z-index: 1; top: 8px; } /* ProfilePhoto (Positioned like compsOtherWorks.html: 116x116 square thumbnail on top of absDiv1, left-aligned flush with menu) */ header .ProfilePhoto, .menu .ProfilePhoto, div.ProfilePhoto, .ProfilePhoto { position: relative !important; width: 116px !important; height: 116px !important; max-width: 116px !important; max-height: 116px !important; min-width: 116px !important; min-height: 116px !important; margin: -93px auto 14px 0 !important; /* Left-aligned flush with menu, overlapping absDiv1 by 68px */ top: auto !important; left: 0 !important; display: block !important; float: none !important; box-sizing: border-box !important; z-index: 500 !important; background-color: transparent !important; border: none !important; aspect-ratio: auto !important; } .ProfilePhoto a, .menu .ProfilePhoto a { display: block !important; position: relative !important; width: 116px !important; height: 116px !important; margin: 0 !important; padding: 0 !important; } header .ProfilePhoto img, .menu .ProfilePhoto img, div.ProfilePhoto img, .ProfilePhoto img, .ProfilePhoto .RedBorder, .ProfilePhoto .rotating-item, .ProfilePhoto a img { width: 116px !important; height: 116px !important; max-width: 116px !important; max-height: 116px !important; min-width: 116px !important; min-height: 116px !important; object-fit: cover !important; display: block !important; margin: 0 !important; box-sizing: border-box !important; border: 2px solid #9a3433 !important; position: absolute !important; top: 0 !important; left: 0 !important; } .ProfilePhoto .rotating-item { opacity: 0 !important; transition: opacity 1.5s ease-in-out !important; z-index: 1 !important; } .ProfilePhoto .rotating-item.active-photo { opacity: 1 !important; z-index: 2 !important; } .ProfilePhoto .rotating-item.fading-in { opacity: 1 !important; z-index: 3 !important; } #ProfilePhotoCorner { z-index: 2700; } header .profileHeader h1 { position: static; font-family: Helvetica, Arial, Helvetica, sans-serif; color: rgba(146, 146, 146, 1.00); font-size: 30px; font-weight: 700; line-height: 1.5em; margin-left: 288px; } header .profilelogo h1 { position: relative; display: block; font-family: Helvetica, Arial, Helvetica, sans-serif; color: rgba(146, 146, 146, 1.00); font-size: 30px; font-weight: 700; line-height: 1.5em; } header .profileHeader h3 { font-family: sans-serif; color: rgba(146, 146, 146, 1.00); font-size: 16px; font-weight: 700; line-height: 24px; } hr { background-color: rgba(208, 207, 207, 1.00); height: 1px; } header .profileHeader p { font-family: Helvetica, Arial, Helvetica, sans-serif; color: rgba(146, 146, 146, 1.00); font-size: 14px; font-weight: 400; line-height: 1.8; overflow-y: auto; } #HeaderPicture { position: absolute; top: 200px; width: 63%; opacity: 1 !important; } #HeaderPicture p { margin-bottom: 0px; margin-top: 0px; } .RedBorder { border-color: #9a3433; border-style: solid; border-width: 1.4px; line-height: auto; padding: 0; background-color: transparent; opacity: 1 !important; } .RedBorderTransparent { border-color: #9a3433; border-style: solid; border-width: 1.4px; line-height: auto; padding: 0; background-color: transparent; } .RedBorderTD { border-color: #9a3433; border-style: solid; border-width: 1.4px; line-height: auto; padding: 0; background-color: transparent; } header .ProfilePhotoHome2 { top: 0; position: relative; width: 288px; margin: auto; padding-left: 20px; opacity: 1 !important; } header .socialNetworkNavBar { text-align: center; display: block; margin-top: 60px; clear: both; } header .socialNetworkNavBar .socialNetworkNav { border-radius: 50%; cursor: pointer; } header .socialNetworkNavBar .socialNetworkNav img:hover { opacity: 0.5; } /**/ #mastheadTop p { position: relative; font-family: Helvetica, Arial, Helvetica, sans-serif; height: 121px; background: transparent; font-size: 6.5rem; color: #b88a8a; text-align: right; margin: 0; line-height: 1.2em; font-weight: 700; margin-right: 8px; } #right { font: 1em/1.2 Arial, Helvetica, sans-serif; width: 41em; border-left: #711941 1px dotted; } /* Main Content sections */ .mainContent { position: relative; display: inline-block; background-color: transparent; width: 100%; padding-left: 2.275%; padding-right: 2.275%; border: 0px; margin-left: auto; margin-right: auto; max-width: 1065px; height: auto; } .mainContent .PictureCaption { position: relative; padding-top: 20px; padding-left: 34%; padding-right: 6%; display: block; } .mainContent .section1 { position: relative; display: flex; column-gap: 20px; background-color: transparent; column-fill: balance-all; padding: 0.275%; border: 0; text-align: justify; align-self: stretch; -webkit-column-width: 300px; /* Chrome, Safari, Opera */ -moz-column-width: 300px; /* Firefox */ column-width: 300px; top: 0px; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } .mainContent .section1 table { display: grid; width: 100%; } .mainContent .section1 tbody { display: grid; width: 100%; } .mainContent .section1 td { margin: auto; display: initial; } .mainContent .section5 { position: relative; display: inline-block; background-color: transparent; padding: 2.275%; border: 0; text-align: justify; -webkit-column-width: 400px; /* Chrome, Safari, Opera */ -moz-column-width: 400px; /* Firefox */ column-width: 400px; top: 0; } .mainContent .section2 { position: relative; display: block; float: none; background-color: transparent; padding: 2.275%; border: 0px; text-align: justify; } #section1 h2 { display: block; font-size: 36; } .section1 p { display: block; break-inside: auto; margin: auto; margin-bottom: 11px; } .section1 .sectionTitle, .section2 .sectionTitle { font-family: Helvetica, Arial, Helvetica, sans-serif; color: rgba(146, 146, 146, 1.00); font-size: 18px; font-weight: 700; text-transform: uppercase; } .section1 .sectionTitleRule, .section2 .sectionTitleRule { margin: 0 3% 0 0; float: left; clear: both; } .section1 .sectionTitleRule2, .section2 .sectionTitleRule2 { background-color: rgba(208, 207, 207, 1.00); height: 1px; padding: 0px; } .mainContent .section1 .section1Content { font-family: ProximaNova; font-size: 14px; font-weight: 100; color: rgba(208, 207, 207, 1.00); } .mainContent .section1 .section1Content span { color: rgba(146, 146, 146, 1.00); font-family: sans-serif; } .section2 .sectionContentTitle { font-family: sans-serif; color: rgba(146, 146, 146, 1.00); font-size: 18px; font-weight: 700; } .section2 .sectionContentSubTitle { font-family: sans-serif; color: rgba(68, 67, 67, 1.00); font-size: 14px; font-weight: 400; } .section2 .sectionContent { font-family: sans-serif; color: rgba(146, 146, 146, 1.00); font-size: 14px; font-weight: 400; line-height: 1.8; } .mainContent .section4 p { text-align: center; } .mainContent .section4 h9 { text-align: center; } .mainContent .section4 h5 { text-align: center; } .mainContent .externalResourcesNav .externalResources { background-color: rgba(208, 207, 207, 1.00); display: inline-block; text-align: center; margin-top: 0px; padding-top: 3%; cursor: pointer; } .mainContent .externalResourcesNav .externalResources:hover { background-color: rgba(153, 153, 153, 1.00); } .externalResourcesNav .externalResources a { font-family: 'Montserrat', sans-serif; color: #e7d4d4; font-size: 14px; font-weight: 400; line-height: 18px; text-decoration: none; } .stretch { content: ''; display: inline-block; margin-left: 2%; margin-right: 2%; } /* Footer */ footer .footerDisclaimer { font-family: sans-serif; font-size: 14px; line-height: 18px; color: rgba(104, 103, 103, 1.00); font-weight: 700; } footer .footerDisclaimer span { color: rgba(181, 178, 178, 1.00); font-weight: 400; } footer .footerNote { font-family: sans-serif; font-size: 14px; line-height: 18px; color: rgba(104, 103, 103, 1.00); font-weight: 700; } footer .footerNote span { color: rgba(181, 178, 178, 1.00); font-weight: 400; } footer a:link { color: #e7d4d4; text-decoration: underline; } footer a:visited { color: #666; text-decoration: underline; } #pagebottom a:link { color: #e7d4d4; text-decoration: underline; } #pagebottom a:visited { color: #666; text-decoration: underline; } #pagebottom p { position: relative; display: block; text-align: center; color: #F4E8E8; } /* mid page vertical code*/ #InsideMenu { position: absolute; display: inline-block; top: 200px; left: 100px; width: 20%; z-index: 200; } #middleUL { margin: 0; padding: 0; list-style-type: none; border: none; } #middleUL li { display: block; position: relative; left: 28px; margin: 0; padding: 0; float: left; } #left { font-size: 100%; width: 18em; height: auto; } #leftDiv { width: 13.5em; padding: 0em 0 1em 0em; margin: 0 auto; } #mainNav { position: relative; display: block; } #mainNav ul { width: 100%; padding: 0; margin: 0; font-size: 1.3em; } #mainNav dt { width: 100%; padding: 0; margin: 0; border: 0; margin-left: 39px; } #mainNav dl { padding: 0; margin: 0; border: 0; margin-left: 8px !important; } #mainNav li { float: left; } ul.MenuBarVertical a { position: relative; display: list-item; width: 171px; left: 0 !important; } dl.MenuBarVertical a { position: relative; display: list-item; width: 171px; left: 0 !important; font-size: 14px; text-align: left; } dt.MenuBarVertical a { position: relative; display: list-item; width: 171px; left: 0 !important; font-size: 14px; text-align: left; } footer { position: relative; display: block; text-align: center; top: 10px; font-family: sans-serif; } .laurels { height: 140px; } /* ========================================================================== Base Styles Inlined from compsOperaAll.css ========================================================================== */ #HeaderPicture { display: none !important; } #HeaderSpacer { display: none !important; } /* ========================================================================== 1. GLOBAL CONTAINER & HEADER FLOW WITHIN CENTERED-CONTENT ========================================================================== */ html { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; min-height: 100% !important; height: auto !important; overflow-x: hidden !important; overflow-y: auto !important; box-sizing: border-box !important; } body { margin: 0 auto !important; padding: 0 !important; width: 100% !important; max-width: 1066px !important; height: auto !important; overflow: visible !important; box-sizing: border-box !important; font: 12px/1.2 Helvetica, Arial, sans-serif; } .centered-wrapper { position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; overflow: visible !important; } body.centered-wrapper, .centered-wrapper { background-image: url("../../images/ForWhom/Ernest_Hemingway_in_Milan_1918_retouched_3.jpg") !important; background-position: center top !important; background-size: cover !important; background-attachment: fixed !important; background-repeat: no-repeat !important; -webkit-background-size: cover !important; -moz-background-size: cover !important; -o-background-size: cover !important; } table.centered-content { display: table !important; margin: 0 auto !important; max-width: 1066px !important; width: 98.6% !important; box-sizing: border-box !important; table-layout: fixed !important; } .RedBorderTD { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; padding: 0 !important; position: relative !important; overflow: hidden !important; } header, .centered-content header { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; padding: 0 !important; float: none !important; clear: both !important; box-sizing: border-box !important; } header ul, header li, #rColTop, #rColMid { position: static !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: none !important; list-style: none !important; list-style-type: none !important; float: none !important; clear: both !important; } #nameplate { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 0 5px 0 !important; padding: 0 !important; float: none !important; clear: both !important; box-sizing: border-box !important; overflow: hidden !important; } /* ========================================================================== #absDiv1 (RED STRIP) DIRECTLY BELOW MASTHEAD ========================================================================== */ #absDiv1 { position: relative !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; overflow: hidden !important; width: 100% !important; max-width: 100% !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; padding: 0 !important; margin: 10px 0 15px 0 !important; background-color: #9a3433 !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; clear: both !important; box-sizing: border-box !important; z-index: 100 !important; float: none !important; } #absDiv1 .littleBox { height: 16px !important; width: 8px !important; border: 1px solid rgb(231, 212, 212) !important; margin: 0px 4px !important; overflow: hidden; align-self: center; flex: 0 0 auto !important; float: none !important; display: block !important; box-sizing: border-box !important; } /* ========================================================================== 2. THREE-SECTION HORIZONTAL MASTHEAD (TOP OF HEADER, ABOVE absDiv1) ========================================================================== */ #mastheadTop { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 90px !important; box-sizing: border-box !important; margin: 0 auto !important; padding: 4px 6px !important; position: static !important; float: none !important; overflow: hidden !important; } .mastheadTopLeft { flex: 1 1 0px !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; padding: 0 5px 0 0 !important; margin: 0 !important; float: none !important; } .mastheadTopLeft img { max-width: 100% !important; height: auto !important; max-height: 50px !important; object-fit: contain !important; display: block !important; margin: 0 !important; } .mastheadTopMiddle { flex: 1 1 0px !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; overflow: hidden !important; padding: 0 5px !important; margin: 0 auto !important; float: none !important; } .mastheadTopMiddle img, img[src*="Bridge-animation"], img[src*="BridgeDraw"], img[src*="bridge-animation"] { object-fit: contain !important; display: block !important; margin: 0 auto !important; margin-top: 0px !important; margin-bottom: 0px !important; height: auto !important; max-height: 105px !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; } .mastheadTopRight { flex: 0 0 auto !important; min-width: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; text-align: right !important; box-sizing: border-box !important; padding: 0 0 0 5px !important; margin: 0 !important; float: none !important; } .mastheadTopRight p, #mastheadTop .mastheadTopRight p, #mastheadTop p { margin: 0px !important; margin-right: 16px !important; padding: 0 !important; text-align: right !important; white-space: nowrap !important; font-size: clamp(24px, 3.5vw, 40px) !important; line-height: 1.15 !important; font-weight: bold !important; width: auto !important; display: block !important; float: none !important; align-content: space-around; } /* ========================================================================== 4. MENU CONTAINER (ON THE LEFT BELOW absDiv1) ========================================================================== */ .menu, #InsideMenu, header .menu, header #InsideMenu, section.menu { position: relative !important; float: left !important; padding: 0 !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; clear: none !important; box-sizing: border-box !important; z-index: 100 !important; margin-top: 0px !important; } /* 0. Flex Page Tag: First flex item inside flex-container (Flex 0 / Column 0) */ .flex-container > .flex-pagetag, .flex-container > .flex-0, .flex-container > .flex-pagetag, .flex-menu-container > .flex-pagetag, .flex-menu-container > .flex-0, .flex-pagetag, .flex-0 { order: 0 !important; flex: 0 0 auto !important; width: max-content !important; min-width: max-content !important; max-width: max-content !important; box-sizing: border-box !important; margin: 64px 8px 0 10px !important; /* Top margin aligns War Novel with Home in menu */ padding: 0 !important; display: block !important; align-self: flex-start !important; } .flex-pagetag .pagetag, .flex-pagetag h5.pagetag, h5.pagetag { display: block !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; font: 28px/1 Helvetica, Arial, sans-serif !important; font-size: 28px !important; font-weight: bold !important; color: #cc9999 !important; letter-spacing: 0.5px !important; white-space: nowrap !important; background: transparent !important; background-color: transparent !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; transform-origin: center center !important; pointer-events: auto !important; } .flex-menu-container { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin-left: 0px !important; clear: both !important; box-sizing: border-box !important; } .flex-menu-container .menu, .flex-menu-container .flex-1 { flex: 0 0 230px !important; float: none !important; margin: 0 0 0 0 !important; } /* Menu items reset inside .menu container - flush with left edge of ProfilePhoto */ .MenuChildTop, .menu .MenuChildTop, .embededMenu, .menu .embededMenu, #InsideMenu, .menu #InsideMenu, #middleUL, .menu #middleUL, #middleUL li, .menu #middleUL li, #mainNav, .menu #mainNav, #mainNav ul, .menu #mainNav ul, #mainNav li, .menu #mainNav li, #left, #leftDiv, .card, .card-header, .hover-dropdown { position: relative !important; top: auto !important; left: 0 !important; right: auto !important; bottom: auto !important; margin: 0 !important; margin-left: 0 !important; padding: 0 !important; padding-left: 0 !important; width: 100% !important; max-width: 100% !important; display: block !important; box-sizing: border-box !important; float: none !important; text-align: left !important; } .MenuChildTop { margin-top: 0px; margin-left: 0px; } /* ========================================================================== 5. TITLESECTION (RIGHT SIDE OF MENU, WITHIN CENTERED-CONTENT) ========================================================================== */ .TitleSection, header .TitleSection, /* TitleSection as Hero Image (same position as ProfilePhoto in compsOperaHome.html) */ .TitleSection, header .TitleSection, .flex-container > .TitleSection, .flex-container > .flex-2, .flex-container > .TitleSection, .flex-menu-container > .TitleSection, .flex-menu-container > .flex-2, .TitleSection.flex-2, .TitleSection { order: 2 !important; flex: 1 1 auto !important; max-width: calc(100% - 308px)!important; min-width: 0px !important; aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin-left: 10px !important; margin-right: 10px !important; margin-top: -63px !important; margin-bottom: 0px !important; position: relative !important; display: block !important; box-sizing: border-box !important; background-color: transparent !important; border: none !important; overflow: visible !important; z-index: 1500 !important; } .TitleSection table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; margin: 0 auto !important; height: auto !important; table-layout: fixed !important; } .TitleSection table tr, .TitleSection table td { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; vertical-align: top !important; height: auto !important; text-align: center !important; } .TitleSection a { display: block !important; width: 100% !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; } .TitleSection img.RedBorder, .TitleSection img { width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; border-radius: 4px !important; border: 2px solid #9a3433 !important; box-sizing: border-box !important; display: block !important; } .TitleSection p, .TitleSection h2 { font-family: Helvetica, Arial, sans-serif !important; font-size: 15px !important; font-weight: normal !important; line-height: 1.35 !important; color: #9a3433 !important; text-align: center !important; margin: 8px auto 0 auto !important; padding: 0 !important; } .TitleSection h9 { display: block !important; width: 100% !important; text-align: center !important; margin: 8px auto 0 auto !important; } .MenuChildTop ul.MenuBarVertical, .MenuChildTop ul.MenuBarVertical li, .MenuChildTop ul.MenuBarVertical a, .MenuChildTop #leftDiv, .MenuChildTop ul#mainNav { width: auto !important; min-width: max-content !important; margin-right: 0px !important; } /* Hamburger Menu Button (Mobile <= 531px only) */ .hamburger-menu-btn { display: none; position: fixed; top: 15px; left: 15px; z-index: 10001; width: 42px; height: 42px; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 0; margin: 0; outline: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.2s ease; } .hamburger-menu-btn:hover, .hamburger-menu-btn:focus { background: rgba(0, 0, 0, 0.85); border-color: rgba(255, 255, 255, 0.7); transform: scale(1.05); } .hamburger-menu-btn .hamburger-bar { display: block; width: 22px; height: 2.5px; background-color: #ffffff; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease; } .hamburger-menu-btn.active .hamburger-bar:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .hamburger-menu-btn.active .hamburger-bar:nth-child(2) { opacity: 0; } .hamburger-menu-btn.active .hamburger-bar:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ========================================================================== Base Styles: TitleSection Fluid Clamp Typography (+3px) ========================================================================== */ .TitleSection h6 { font-size: clamp(19px, 0.59rem + 1.0vw, 1.44rem) !important; line-height: 1.25 !important; margin-bottom: clamp(2px, 0.35vw, 6px) !important; } .TitleSection h13 { font-size: clamp(0.97rem, 0.37rem + 1.2vw, 1.44rem) !important; line-height: 1.25 !important; } .TitleSection h17, .TitleSection font[size="+3"] { font-size: clamp(24px, 10px + 1.9vw, 2.49rem) !important; line-height: 1.15 !important; font-weight: bold !important; display: block !important; } .TitleSection font[size="+3.8"] { font-size: clamp(21px, 10px + 1.9vw, 2.39rem) !important; line-height: 1.15 !important; } .TitleSection font[size="+2"] { font-size: clamp(17px, 9px + 1.4vw, 1.84rem) !important; line-height: 1.2 !important; } .TitleSection font[size="+1"] { font-size: clamp(16px, 8px + 1.2vw, 1.49rem) !important; line-height: 1.2 !important; } .TitleSection font[size="-0.8"] { font-size: clamp(13px, 7px + 0.8vw, 1.14rem) !important; line-height: 1.2 !important; } /* ========================================================================== 1. Mobile Viewport (max-width: 531.98px) - Stacked layout, hamburger popup menu, centered ProfilePhoto - Covers all mobile viewports up through 531px ========================================================================== */ /* --- Video Component Base Styles from compsOperaProductionVideo --- */ /* ProfilePhoto styles defined in canonical base rules */ /* Responsive Video & Full Container Expansion */ .flex-menu-container { max-height: none !important; height: auto !important; } .TitleSection { padding-left: 0 !important; padding-right: 0 !important; } .TitleVideoOperaHome { position: relative !important; width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; margin: 0 auto; background: #000; border: 1.4px solid #9a3433; border-radius: 4px; overflow: hidden; } .TitleVideoOperaHome iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: none !important; } .video-touch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-end; padding: 12px; background: rgba(0, 0, 0, 0.001); transition: opacity 0.3s ease; } .video-touch-overlay .unmute-badge { background: rgba(0, 0, 0, 0.8); color: #ffffff; font-size: 13px; font-family: Arial, sans-serif; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.4); display: flex; align-items: center; gap: 6px; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .video-touch-overlay.unmuted { pointer-events: none !important; } .video-touch-overlay.unmuted .unmute-badge { display: none !important; } /* Re-Enter Fullscreen Button (available when playing inline) */ .video-touch-overlay .re-enter-fullscreen-btn { display: none; position: absolute; top: 15px; right: 15px; z-index: 10; background: rgba(0, 0, 0, 0.85); color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: bold; font-family: Arial, sans-serif; cursor: pointer; pointer-events: auto !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); transition: background 0.2s ease, transform 0.1s ease; } .video-touch-overlay .re-enter-fullscreen-btn:hover, .video-touch-overlay .re-enter-fullscreen-btn:active { background: #9a3433; border-color: #ffffff; transform: scale(1.05); } .video-touch-overlay.unmuted .re-enter-fullscreen-btn { display: block; } /* Fullscreen expansion for mobile devices & tablets */ .TitleVideoOperaHome.is-fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; height: 100vh !important; max-width: 100vw !important; max-height: 100dvh !important; aspect-ratio: auto !important; z-index: 999999 !important; background: #9a3433 !important; /* Red margin background */ border: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Exit Fullscreen Button - Always prominently visible in fullscreen mode */ .close-fullscreen-btn { display: none !important; } .TitleVideoOperaHome.is-fullscreen .close-fullscreen-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; position: fixed !important; top: max(16px, env(safe-area-inset-top, 16px)) !important; right: max(16px, env(safe-area-inset-right, 16px)) !important; z-index: 2147483647 !important; background: rgba(0, 0, 0, 0.85) !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 25px !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: bold !important; font-family: Arial, sans-serif !important; cursor: pointer !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; white-space: nowrap !important; transition: transform 0.15s ease, background 0.2s ease !important; } .TitleVideoOperaHome.is-fullscreen .close-fullscreen-btn:hover, /* ProfilePhoto 116x116 for all viewport sizes */ .menu .ProfilePhoto, .ProfilePhoto { width: 116px !important; max-width: 116px !important; height: 116px !important; max-height: 116px !important; } .menu .ProfilePhoto a, .ProfilePhoto a { display: block !important; width: 116px !important; height: 116px !important; } .menu .ProfilePhoto img, .menu .ProfilePhoto .rotating-item, .ProfilePhoto .rotating-item { width: 116px !important; max-width: 116px !important; height: 116px !important; max-height: 116px !important; object-fit: cover !important; } /* Responsive Video & Full Container Expansion */ .flex-menu-container { max-height: none !important; height: auto !important; } .TitleSection { padding-left: 0 !important; padding-right: 0 !important; } .TitleVideoOperaHome { position: relative !important; width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; margin: 0 auto; background: #000; border: 1.4px solid #9a3433; border-radius: 4px; overflow: hidden; } .TitleVideoOperaHome iframe { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; border: none !important; } .video-touch-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; cursor: pointer; display: flex; align-items: flex-end; justify-content: flex-end; padding: 12px; background: rgba(0, 0, 0, 0.001); transition: opacity 0.3s ease; } .video-touch-overlay .unmute-badge { background: rgba(0, 0, 0, 0.8); color: #ffffff; font-size: 13px; font-family: Arial, sans-serif; padding: 6px 14px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.4); display: flex; align-items: center; gap: 6px; pointer-events: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); } .video-touch-overlay.unmuted { pointer-events: none !important; } .video-touch-overlay.unmuted .unmute-badge { display: none !important; } /* Re-Enter Fullscreen Button (available when playing inline) */ .video-touch-overlay .re-enter-fullscreen-btn { display: none; position: absolute; top: 15px; right: 15px; z-index: 10; background: rgba(0, 0, 0, 0.85); color: #ffffff; border: 1.5px solid rgba(255, 255, 255, 0.6); border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: bold; font-family: Arial, sans-serif; cursor: pointer; pointer-events: auto !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); transition: background 0.2s ease, transform 0.1s ease; } .video-touch-overlay .re-enter-fullscreen-btn:hover, .video-touch-overlay .re-enter-fullscreen-btn:active { background: #9a3433; border-color: #ffffff; transform: scale(1.05); } .video-touch-overlay.unmuted .re-enter-fullscreen-btn { display: block; } /* Fullscreen expansion for mobile devices & tablets */ .TitleVideoOperaHome.is-fullscreen { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; height: 100vh !important; max-width: 100vw !important; max-height: 100dvh !important; aspect-ratio: auto !important; z-index: 999999 !important; background: #9a3433 !important; /* Red margin background */ border: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Exit Fullscreen Button - Always prominently visible in fullscreen mode */ .close-fullscreen-btn { display: none !important; } .TitleVideoOperaHome.is-fullscreen .close-fullscreen-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; position: fixed !important; top: max(16px, env(safe-area-inset-top, 16px)) !important; right: max(16px, env(safe-area-inset-right, 16px)) !important; z-index: 2147483647 !important; background: rgba(0, 0, 0, 0.85) !important; color: #ffffff !important; border: 2px solid #ffffff !important; border-radius: 25px !important; padding: 10px 20px !important; font-size: 14px !important; font-weight: bold !important; font-family: Arial, sans-serif !important; cursor: pointer !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; white-space: nowrap !important; transition: transform 0.15s ease, background 0.2s ease !important; } .TitleVideoOperaHome.is-fullscreen .close-fullscreen-btn:hover, .TitleVideoOperaHome.is-fullscreen .close-fullscreen-btn:active { background: #7a1a19 !important; transform: scale(1.05) !important; } /* Hide Enter-Fullscreen Button when in Fullscreen Mode */ :fullscreen .re-enter-fullscreen-btn, :-webkit-full-screen .re-enter-fullscreen-btn, :-moz-full-screen .re-enter-fullscreen-btn, :-ms-fullscreen .re-enter-fullscreen-btn, .is-fullscreen .re-enter-fullscreen-btn, .is-fullscreen .video-touch-overlay .re-enter-fullscreen-btn, .is-fullscreen .video-touch-overlay.unmuted .re-enter-fullscreen-btn, .video-touch-overlay.unmuted.is-fullscreen .re-enter-fullscreen-btn, .TitleVideoOperaHome.is-fullscreen .re-enter-fullscreen-btn, .TitleVideoOperaHome.is-fullscreen .video-touch-overlay .re-enter-fullscreen-btn, .TitleVideoOperaHome.is-fullscreen .video-touch-overlay.unmuted .re-enter-fullscreen-btn { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* ========================================================================== SECTION 2: MOBILE VIEWPORTS (@media only screen and (max-width: 531px)) ========================================================================== */ @media only screen and (max-width: 531px) { #rColTop { position: static !important; height: auto !important; margin-bottom: 0px !important; } #nameplate { padding: 0.5em 0 !important; height: auto !important; margin-top: 5px !important; margin-bottom: 5px !important; } #absDiv1 { margin: 5px 0 10px 0 !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Horizontal Masthead Flow */ #mastheadTop { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; align-items: center !important; padding: 0 4px !important; height: fit-content !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .mastheadTopLeft { display: flex !important; flex: 1 1 0px !important; min-width: 0 !important; padding: 0px !important; margin: auto !important; box-sizing: border-box !important; } .mastheadTopLeft img { max-height: 42px !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; } .mastheadTopMiddle { display: none !important; } .mastheadTopMiddle img, img[src*="Bridge-animation"], img[src*="BridgeDraw"], img[src*="bridge-animation"] { height: auto !important; max-height: 42px !important; min-height: 0 !important; width: auto !important; max-width: 100% !important; object-fit: contain !important; } .mastheadTopRight { display: flex !important; flex: 0 0 auto !important; min-width: 0 !important; padding: 0 4px !important; box-sizing: border-box !important; align-items: center !important; justify-content: flex-end !important; } .mastheadTopRight p, #mastheadTop .mastheadTopRight p, #mastheadTop p { font-size: 6vw !important; line-height: 1.2 !important; white-space: nowrap !important; text-align: right !important; margin: 0 !important; } .hamburger-menu-btn { display: flex !important; } .flex-container, .flex-menu-container { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; position: relative !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; box-sizing: border-box !important; left: 0px !important; } .flex-container>.menu, .flex-menu-container>.menu, .menu, .flex-1 { display: contents !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; flex: 0 0 0 !important; } .flex-container>.flex-pagetag, .flex-menu-container>.flex-pagetag, .flex-pagetag, .flex-0, .pagetag, .menu .pagetag, h5.pagetag { display: none !important; } /* ProfilePhoto (Hidden on Mobile <= 531px, menu is in hamburger popup) */ header .ProfilePhoto, .menu .ProfilePhoto, div.ProfilePhoto, .ProfilePhoto { display: none !important; } .flex-menu-container .menu-overlay, .menu .menu-overlay, .menu-overlay { position: fixed !important; top: 68px !important; left: 15px !important; z-index: 1000000 !important; width: 285px !important; max-width: calc(100vw - 30px) !important; height: auto !important; max-height: calc(100vh - 85px) !important; overflow-y: auto !important; background: rgba(116, 17, 21, 70%) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; padding: 14px 14px 14px 14px !important; border-radius: 16px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45) !important; text-align: left !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.25s ease, visibility 0.25s ease !important; margin: 0 !important; box-sizing: border-box !important; scrollbar-width: none !important; -ms-overflow-style: none !important; display: block !important; } .menu-overlay .MenuChildTop, .menu-overlay .embededMenu, .menu-overlay #InsideMenu, .menu-overlay #middleUL, .menu-overlay #left, .menu-overlay #leftDiv, .menu-overlay #mainNav, .menu-overlay .card, .menu-overlay .card-header, .menu-overlay .card-body { margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: auto !important; } .menu-overlay::-webkit-scrollbar, .menu-overlay *::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } .flex-menu-container .menu-overlay.visible, .menu .menu-overlay.visible, .menu-overlay.visible { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .menu-overlay, .menu-overlay *, .menu-overlay #InsideMenu, .menu-overlay .pagetag { animation: none !important; -webkit-animation: none !important; transform: none !important; border: none !important; box-shadow: none !important; text-shadow: none !important; } .menu-overlay ul, .menu-overlay ol, .menu-overlay li, .menu-overlay dl, .menu-overlay dt, .menu-overlay dd, .menu-overlay a, .menu-overlay div, .menu-overlay .embededMenu, .menu-overlay #InsideMenu, .menu-overlay #middleUL, .menu-overlay #left, .menu-overlay #leftDiv, .menu-overlay #mainNav, .menu-overlay #accordion1, .menu-overlay .card, .menu-overlay .card-header, .menu-overlay .card-body, .menu-overlay .dropdown-content, .menu-overlay .hover-dropdown, .menu-overlay .hover-dropdown .dropdown-content, .menu-overlay .MenuChild, .menu-overlay .collapse, .menu-overlay .MenuBarVertical { position: static !important; left: 0 !important; right: 0 !important; top: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; box-shadow: none !important; list-style: none !important; list-style-type: none !important; background-color: transparent !important; text-align: left !important; } .menu-overlay *::before, .menu-overlay *::after { display: none !important; } .menu-overlay a, .menu-overlay li, .menu-overlay dl, .menu-overlay dt, .menu-overlay dd { position: relative !important; left: 0 !important; display: block !important; text-align: left !important; padding-top: 3.5px !important; padding-bottom: 3.5px !important; line-height: 1.25 !important; white-space: normal !important; } .menu-overlay ul.MenuBarVertical a, .menu-overlay dl.MenuBarVertical a, .menu-overlay dt.MenuBarVertical a, .menu-overlay li.MenuBarVertical a, .menu-overlay a { width: 245px !important; max-width: 100% !important; } /* Level 0: Top-Level Navigation Items (0px Indent) */ .menu-overlay ul#mainNav>li, .menu-overlay ul#mainNav>li.MenuBarVertical, .menu-overlay ul#mainNav>li>a, .menu-overlay ul#mainNav>.card>.card-header>li, .menu-overlay ul#mainNav>.card>.card-header>li.MenuBarVertical, .menu-overlay ul#mainNav>.card>.card-header>li>a, .menu-overlay #headingOne1>li, .menu-overlay #headingOne1>li.MenuBarVertical, .menu-overlay #headingOne1>li>a, .menu-overlay .top-level-item { margin-left: 0px !important; padding-left: 0px !important; left: 0px !important; } /* Level 1: Submenu / Section Category Headers (8px Indent) */ .menu-overlay dl, .menu-overlay dl.MenuBarVertical, .menu-overlay dl a, .menu-overlay dl.MenuBarVertical a, .menu-overlay .hover-dropdown>dl, .menu-overlay .hover-dropdown>dl.MenuBarVertical, .menu-overlay .card-header dl, .menu-overlay .card-header dl.MenuBarVertical, .menu-overlay #headingOne1 dl, .menu-overlay #headingOne1 dl.MenuBarVertical, .menu-overlay #OtherWorksaccordion2 .card-header li, .menu-overlay #OtherWorksaccordion2 .card-header li.MenuBarVertical, .menu-overlay #OtherWorksaccordion2 .card-header a, .menu-overlay #OtherWorksaccordionShortFilm .card-header dl, .menu-overlay #OtherWorksaccordionShortFilm .card-header dl a, .menu-overlay #operaaccordion2>.card>.card-header>li, .menu-overlay #operaaccordion2>.card>.card-header>li.MenuBarVertical, .menu-overlay #operaaccordion2>.card>.card-header>a, .menu-overlay #operacollapseRecordings .card-header li, .menu-overlay #operacollapseEvents .card-header li, .menu-overlay #operacollapseAbout .card-header li, .menu-overlay #operacollapseOne1>.card-body>#operaaccordion2>.card>.card-header>li, .menu-overlay #operacollapseOne1>.card-body>#operaaccordion2>.card>.card-header>a, .menu-overlay #Pressaccordion .card-header li, .menu-overlay #Pressaccordion .card-header li.MenuBarVertical, .menu-overlay #PressheadingPress li, .menu-overlay #PressheadingPress a { margin-left: 8px !important; padding-left: 0px !important; left: 0px !important; } /* Level 2: Submenu Items / Pieces / Sub-links (16px Indent) */ .menu-overlay dt, .menu-overlay dt.MenuBarVertical, .menu-overlay dt a, .menu-overlay dt.MenuBarVertical a, .menu-overlay .dropdown-content dt, .menu-overlay .dropdown-content dt.MenuBarVertical, .menu-overlay .dropdown-content dt a, .menu-overlay .dropdown-content li, .menu-overlay .dropdown-content li a, .menu-overlay .dropdown-content a, .menu-overlay .hover-dropdown .dropdown-content dt, .menu-overlay .hover-dropdown .dropdown-content a, .menu-overlay .card-body dt, .menu-overlay .card-body dt a, .menu-overlay .card-body li, .menu-overlay .card-body li a, .menu-overlay #operaheadingAbout dt, .menu-overlay #operaheadingAbout li, .menu-overlay #operaheadingAbout a, .menu-overlay #OtherWorksheadingShortFilm dt, .menu-overlay #OtherWorksheadingShortFilm li, .menu-overlay #OtherWorksheadingShortFilm a, .menu-overlay #OtherWorksaccordion2 .card-body li, .menu-overlay #OtherWorksaccordion2 .card-body a, .menu-overlay #OtherWorksaccordion2 .card-body dt, .menu-overlay #operacollapseRecordings .card-body li, .menu-overlay #operacollapseRecordings .card-body a, .menu-overlay #operacollapseEvents .card-body li, .menu-overlay #operacollapseEvents .card-body a, .menu-overlay #operacollapseAbout .card-body li, .menu-overlay #operacollapseAbout .card-body a, .menu-overlay #operacollapseAbout .card-body dt, .menu-overlay #operacollapseOne1 .card-body dt, .menu-overlay #operacollapseOne1 .card-body dt.MenuBarVertical, .menu-overlay #operacollapseOne1 .card-body dt a { margin-left: 16px !important; padding-left: 0px !important; left: 0px !important; } /* Level 3: Deep Nested Sub-items (e.g. Press Kit download links) (15px Indent) */ .menu-overlay #Presscollapse .card-body li, .menu-overlay #Presscollapse .card-body a, .menu-overlay #Presscollapse .card-body dt { margin-left: 15px !important; padding-left: 0px !important; left: 0px !important; } /* Dropdown content */ .menu-overlay .dropdown-content, .menu-overlay .hover-dropdown .dropdown-content { background: transparent !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; text-align: left !important; } /* Submenu Expand/Collapse Flat Triangle Indicators */ .menu-overlay .hover-dropdown>dl>a::after, .menu-overlay .hover-dropdown>dl.MenuBarVertical>a::after, .menu-overlay .hover-dropdown>a::after, .menu-overlay .card-header a[data-toggle="collapse"]::after, .menu-overlay .card-header li a[data-toggle="collapse"]::after { content: "" !important; display: inline-block !important; width: 0 !important; height: 0 !important; margin-left: 8px !important; vertical-align: -1px !important; border-top: 6px solid transparent !important; border-bottom: 6px solid transparent !important; border-left: 5px solid currentColor !important; border-right: 0 !important; font-size: 0 !important; line-height: 0 !important; } .menu-overlay .hover-dropdown:hover>dl>a::after, .menu-overlay .hover-dropdown:hover>dl.MenuBarVertical>a::after, .menu-overlay .hover-dropdown:hover>a::after, .menu-overlay .hover-dropdown.is-open>dl>a::after, .menu-overlay .hover-dropdown.is-open>dl.MenuBarVertical>a::after, .menu-overlay .hover-dropdown.is-open>a::after, .menu-overlay .hover-dropdown.menu-tree-active>dl>a::after, .menu-overlay .hover-dropdown.menu-tree-active>dl.MenuBarVertical>a::after, .menu-overlay .hover-dropdown.menu-tree-active>a::after, .menu-overlay .hover-dropdown:has(.current-active-link)>dl>a::after, .menu-overlay .hover-dropdown:has(.current-active-link)>dl.MenuBarVertical>a::after, .menu-overlay .hover-dropdown:has(.current-active-link)>a::after, .menu-overlay .card-header a[data-toggle="collapse"]:not(.collapsed)::after, .menu-overlay .card-header a[data-toggle="collapse"][aria-expanded="true"]::after, .menu-overlay .card-header li a[data-toggle="collapse"]:not(.collapsed)::after, .menu-overlay .card-header li a[data-toggle="collapse"][aria-expanded="true"]::after { content: "" !important; display: inline-block !important; width: 0 !important; height: 0 !important; margin-left: 8px !important; vertical-align: 2px !important; border-left: 6px solid transparent !important; border-right: 6px solid transparent !important; border-top: 5px solid currentColor !important; border-bottom: 0 !important; font-size: 0 !important; line-height: 0 !important; } .menu-overlay h16 { font-weight: normal !important; white-space: normal !important; } /* Main Navigation items in #dad5ce */ .menu-overlay, .menu-overlay a, .menu-overlay a:link, .menu-overlay a:visited, .menu-overlay li, .menu-overlay p, .menu-overlay span, .menu-overlay div { color: #dad5ce!important; font-family: Helvetica, Arial, sans-serif !important; font-size: 15.5px !important; line-height: 1.35 !important; text-align: left !important; transition: color 0.2s ease; } /* Opera category items in Yellow #FFD700 */ .menu-overlay a[href*="compsOpera"], .menu-overlay a[href*="compsopera"], .menu-overlay dl, .menu-overlay dl a, .menu-overlay dd, .menu-overlay .MenuChild a, .menu-overlay .hover-dropdown a, .menu-overlay .dropdown-content, .menu-overlay .dropdown-content a, .menu-overlay h16 { color: #f3cb6e !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 15.5px !important; line-height: 1.35 !important; text-align: left !important; transition: color 0.2s ease; font-weight: bold; } /* Hamburger Submenu Items (dt: Video, Photos, Credits, Libretto, etc.) in #dbb763 */ .menu-overlay dt, .menu-overlay dt a, .menu-overlay dt a:link, .menu-overlay dt a:visited, .menu-overlay dt.MenuBarVertical, .menu-overlay dt.MenuBarVertical a, .menu-overlay dt a[href], .menu-overlay dt a[href*="compsOpera"], .menu-overlay dt a[href*="compsopera"], .menu-overlay .dropdown-content dt, .menu-overlay .dropdown-content dt a, .menu-overlay .dropdown-content dt a[href], .menu-overlay .dropdown-content dt a[href*="compsOpera"], .menu-overlay .dropdown-content dt a[href*="compsopera"], .menu-overlay .card-body dt, .menu-overlay .card-body dt a { color: #f5d58b !important; font-family: Helvetica, Arial, sans-serif !important; font-size: 15.5px !important; line-height: 1.35 !important; text-align: left !important; transition: color 0.2s ease; } /* Hover States */ .menu-overlay a:hover, .menu-overlay a:focus, .menu-overlay li a:hover, .menu-overlay dl a:hover, .menu-overlay dt a:hover, .menu-overlay dt.MenuBarVertical a:hover, .menu-overlay .dropdown-content a:hover, .menu-overlay .dropdown-content dt a:hover { color: #fdf5e2 !important; background-color: rgba(255, 255, 255, 0.15) !important; text-decoration: none !important; } /* TitleSection / Hero Image (Mobile: same as profilephoto in compsOperaHome) */ .flex-container > .TitleSection, .flex-container > .TitleSection, .flex-menu-container > .TitleSection, .TitleSection.flex-2, .TitleSection { order: 1 !important; display: block !important; position: relative !important; width: calc(100% - 20px) !important; max-width: calc(100% - 20px) !important; min-width: 0 !important; aspect-ratio: auto !important; height: auto !important; margin: 5px auto 15px auto !important; align-self: center !important; background-color: transparent !important; border: none !important; overflow: visible !important; box-sizing: border-box !important; } .TitleSection table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; margin: 0 auto !important; height: auto !important; table-layout: fixed !important; } .TitleSection table tr, .TitleSection table td { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; vertical-align: top !important; height: auto !important; text-align: center !important; } .TitleSection a { display: block !important; width: 100% !important; line-height: 0 !important; margin: 0 !important; padding: 0 !important; } .TitleSection img.RedBorder, .TitleSection img { width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; border-radius: 4px !important; border: 2px solid #9a3433 !important; box-sizing: border-box !important; display: block !important; margin: 0 auto !important; } .TitleSection p, .TitleSection h2 { font-family: Helvetica, Arial, sans-serif !important; font-size: 13.5px !important; font-weight: normal !important; line-height: 1.35 !important; color: #9a3433 !important; text-align: center !important; margin: 6px auto 0 auto !important; padding: 0 !important; } .TitleSection h9 { display: block !important; width: 100% !important; text-align: center !important; margin: 6px auto 0 auto !important; } .TitleSection h6 { font-size: clamp(19px, 15px + 1.0vw, 21px) !important; line-height: 1.25 !important; margin-bottom: clamp(2px, 0.4vw, 4px) !important; } .TitleSection h13 { font-size: clamp(14px, 10px + 0.8vw, 18px) !important; line-height: 1.25 !important; } .TitleSection h17, .TitleSection font[size="+3"] { font-size: clamp(24px, 16px + 1.6vw, 26px) !important; line-height: 1.15 !important; font-weight: bold !important; display: block !important; } .TitleSection font[size="+3.8"] { font-size: clamp(18px, 12px + 1.6vw, 23px) !important; line-height: 1.15 !important; } .TitleSection font[size="+2"] { font-size: clamp(15px, 11px + 1.0vw, 19px) !important; line-height: 1.2 !important; } .TitleSection font[size="+1"] { font-size: clamp(14px, 10px + 0.9vw, 17px) !important; line-height: 1.2 !important; } .TitleSection font[size="-0.8"] { font-size: clamp(12px, 8px + 0.7vw, 15px) !important; line-height: 1.2 !important; } } /* ========================================================================== 2. Tablet & Desktop Base Viewport (min-width: 532px) - Flex row layout: vertical pagetag, menu, ProfilePhoto, TitleSection ========================================================================== */ /* ========================================================================== SECTION 3: TABLET BASE VIEWPORT (@media only screen and (min-width: 532px) and (max-width: 844px)) ========================================================================== */ @media only screen and (min-width : 532px) and (max-width: 844px) { /* Header */ .section3 p { font-size: 16px; } .section3hide p { font-size: 16px; } header { width: 100%; float: none; height: auto; } header .profileLogo .logoPlaceholder { display: inline-block; } header .profileHeader { text-align: left; margin-top: 0px; height: 460px; } header .profileHeader h1 { margin-left: 293px; margin-right: 5px; font-size: 25px; } header .profileHeader h2 { margin-left: 293px; margin-right: 5px } #HeaderPicture { position: relative; top: -26px; right: 0px; width: 55%; left: 40%; min-height: 250px; height: auto; display: block; } .pagetag { position: relative; left: -110px; } ul#mainNav { position: absolute; top: 235px; left: 1em; padding: 0; text-indent: 0%; width: 100px } header .ProfilePhotoHome { background-color: transparent; width: 288px; height: 468px; clear: both; position: absolute; z-index: 1700; top: 185px; margin: auto; } #absDiv1 { position: relative !important; width: 100% !important; max-width: 100% !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; background-color: #9a3433 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; overflow: hidden !important; margin: 10px 0 15px 0 !important; padding: 0 !important; box-sizing: border-box !important; z-index: 100 !important; } .littleBox { border: 1px solid rgb(231, 212, 212) !important; flex: 0 0 auto !important; width: 12px !important; height: 28px !important; float: none !important; margin: 0 6px !important; display: block !important; background: transparent !important; background-color: transparent !important; box-sizing: border-box !important; } #mastheadTop p { font-size: 4em; line-height: 2.5em; text-align: center; } #nameplate h1 { position: static; font-size: 24px; margin-left: 0px; line-height: normal; margin: 0em; } #nameplate h2 { position: static; font-size: 20px; margin-left: 0px; line-height: normal; margin: 0em; } header .profileHeader p { text-align: justify; } header .socialNetworkNavBar { text-align: center; display: block; margin-top: 60px; clear: both; margin-bottom: 15%; } header .socialNetworkNavBar .socialNetworkNav { width: 60px; height: 60px; display: inline-block; margin-right: 23px; } #InsideMenu { position: absolute; top: 0px; left: 50px; display: inline-block; z-index: 6 } .mainContent { position: relative; display: block; width: 100%; background-color: transparent; border: 0; padding: 0; height: auto; top: 0px; } .mainContent .PictureCaption { position: relative; padding-top: 0px; padding-left: 40%; padding-right: 6%; display: inline-block; width: 55%; z-index: 5; } .mainContent .section1 { top: 0px; } .section1 .section1Title, .section2 .section1Title { text-align: center; } .section1 .sectionTitleRule, .section2 .sectionTitleRule { width: 100%; } .section1 .sectionTitleRule2, .section2 .sectionTitleRule2 { display: none; } .mainContent .section1 .section1Content { display: inline-block; font-family: sans-serif; text-align: justify; } .mainContent .section2 { position: relative; display: block; text-align: center; } .section2 .section2Content { margin-top: 10%; text-align: justify; margin-bottom: 10%; } .mainContent .externalResourcesNav { margin-bottom: 10%; } .mainContent .externalResourcesNav .externalResources { width: 100%; height: 35px; } .laurels { height: 100px; } /* Footer */ h10 { font: 300%/1.1 Helvetica, Arial, sans-serif; color: #9a3433; line-height: 1.4em; margin-bottom: 0; margin-top: 0; } h12 { font: 5.2vw/1.5 Helvetica, Arial, sans-serif; margin: 0; font-weight: bold; } h13 { font: 3.7vw/1.2 Helvetica, Arial, sans-serif; margin: 0; font-weight: bold; } h14 { font: 180%/1.1 Helvetica, Arial, sans-serif; color: #9a3433; line-height: 1em; margin-bottom: 0; margin-top: 0; } .TitleSection, header .TitleSection, section.TitleSection { margin-left: 0 !important; left: 0 !important; } .mainContent .section3hide { display: none !important; } .flex-container, .flex-menu-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: flex-start !important; box-sizing: border-box !important; } /* 1. Menu: Left Column below absDiv1 (Flex 1 / Column 1) */ .flex-container>.menu, .flex-container>.flex-1, .flex-container>.menu, .flex-menu-container>.menu, .flex-menu-container>.flex-1, .menu, .flex-1 { order: 1 !important; flex: 0 0 200px !important; margin: 0 !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; text-align: left !important; box-sizing: border-box !important; display: block !important; position: relative !important; } .menu .menu-overlay, .menu-overlay { display: block !important; position: static !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* 0. Page Tag: First flex item inside flex-container (Flex 0 / Column 0) */ .flex-container>.flex-pagetag, .flex-container>.flex-0, .flex-container>.flex-pagetag, .flex-menu-container>.flex-pagetag, .flex-menu-container>.flex-0, .flex-pagetag, .flex-0 { order: 0 !important; flex: 0 0 auto !important; width: max-content !important; min-width: max-content !important; max-width: max-content !important; box-sizing: border-box !important; margin: 41px 8px 0 10px !important; /* Top margin aligns War Novel with Home in menu */ padding: 0 !important; display: block !important; align-self: flex-start !important; } .flex-pagetag .pagetag, .flex-pagetag h5.pagetag, h5.pagetag { display: block !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; font: 28px/1 Helvetica, Arial, sans-serif !important; font-size: 28px !important; font-weight: bold !important; color: #cc9999 !important; letter-spacing: 0.5px !important; white-space: nowrap !important; background: transparent !important; background-color: transparent !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; transform-origin: center center !important; pointer-events: auto !important; } .MenuChildTop { width: 100% !important; max-width: 100% !important; text-align: left !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* ProfilePhoto inherits 116x116 square thumbnail from base rules */ /* MenuChildTop base inside menu */ .menu .MenuChildTop, .MenuChildTop { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; top: 0px !important; left: 0px !important; position: relative !important; display: block !important; box-sizing: border-box !important; text-align: left !important; } .MenuChildTop .embededMenu, .MenuChildTop #InsideMenu, .MenuChildTop #middleUL, .MenuChildTop #left, .MenuChildTop #leftDiv, .MenuChildTop #mainNav, .MenuChildTop #accordion1, .MenuChildTop .card, .MenuChildTop .card-header { margin: 0 auto !important; padding: 0 !important; top: 0px !important; left: 0px !important; position: relative !important; display: block !important; text-align: left !important; width: max-content !important; max-width: 100% !important; } .MenuChildTop ul.MenuBarVertical, .MenuChildTop ul.MenuBarVertical li, .MenuChildTop li.MenuBarVertical, .MenuChildTop dl.MenuBarVertical, .MenuChildTop dt.MenuBarVertical, .MenuChildTop .hover-dropdown, .MenuChildTop .MenuChild { text-align: left !important; margin-right: auto !important; margin-top: 3px !important; margin-bottom: 3px !important; padding-left: 0 !important; display: block !important; width: 100% !important; box-sizing: border-box !important; } .MenuChildTop ul.MenuBarVertical a, .MenuChildTop dl.MenuBarVertical a, .MenuChildTop dt.MenuBarVertical a, .MenuChildTop li.MenuBarVertical a, .MenuChildTop .hover-dropdown a, .MenuChildTop .dropdown-content a, .MenuChildTop a { left: 0 !important; padding: 2px 8px !important; line-height: 1.25 !important; display: inline-block !important; width: auto !important; max-width: 100% !important; text-align: left !important; margin: 0 !important; white-space: nowrap !important; } /* First menu item ("Home"): zero top padding/margin so top of menu lines up with top of image */ .MenuChildTop #accordion1, .MenuChildTop .card, .MenuChildTop .card-header, .MenuChildTop ul.MenuBarVertical, .MenuChildTop ul#mainNav, .MenuChildTop #headingOne1>li:first-child, .MenuChildTop #headingOne1>li:first-child>a, .MenuChildTop ul.MenuBarVertical>li:first-child, .MenuChildTop ul.MenuBarVertical>li:first-child>a, .MenuChildTop #middleUL>li:first-child, .MenuChildTop #middleUL>li:first-child>a, .MenuChildTop li.MenuBarVertical:first-child, .MenuChildTop li.MenuBarVertical:first-child>a { margin-top: 0px !important; padding-top: 0px !important; top: 0px !important; } /* Level 0: Top level (Home, For Whom, Other Works, About BWG, Contact, Site Map) - 0px */ .MenuChildTop li.MenuBarVertical, .MenuChildTop h16 { margin-left: 0px !important; padding-left: 0px !important; text-align: left !important; font-weight: normal !important; left: 0 !important; } .MenuChildTop li.MenuBarVertical a { padding: 2px 8px !important; margin: 0 !important; left: 0 !important; } /* Container resets for nested submenus */ .MenuChildTop .card-body, .MenuChildTop .dropdown-content, .MenuChildTop .hover-dropdown .dropdown-content, .MenuChildTop .card, .MenuChildTop .card-header { padding-left: 0 !important; margin-left: 0 !important; } /* Level 1: Sections under Opera (World Premiere, About, Workshop, Recordings, Events) - 8px indent */ .MenuChildTop dl.MenuBarVertical, .MenuChildTop .hover-dropdown dl.MenuBarVertical, .MenuChildTop .hover-dropdown dl, .MenuChildTop .card-header dl.MenuBarVertical, .MenuChildTop .MenuChild dl.MenuBarVertical, .MenuChildTop #mainNav dl { margin-left: 8px !important; padding-left: 0px !important; margin-bottom: 0px !important; text-align: left !important; left: 0 !important; } .MenuChildTop dl.MenuBarVertical a, .MenuChildTop .hover-dropdown dl.MenuBarVertical a, .MenuChildTop .card-header dl.MenuBarVertical a, .MenuChildTop .MenuChild dl.MenuBarVertical a { padding: 2px 8px !important; margin: 0 !important; left: 0 !important; } /* Level 2: Subitems inside sections (Video, Photos, Credits, Story, Cast, etc.) - 16px indent */ .MenuChildTop dt.MenuBarVertical, .MenuChildTop .dropdown-content dt, .MenuChildTop .dropdown-content dt.MenuBarVertical, .MenuChildTop .hover-dropdown .dropdown-content dt, .MenuChildTop #operaheadingAbout dt, .MenuChildTop #operaheadingWorldPremiere dt { margin-left: 16px !important; padding-left: 0px !important; margin-bottom: 0px !important; text-align: left !important; left: 0 !important; } .MenuChildTop dt.MenuBarVertical a, .MenuChildTop .dropdown-content dt a, .MenuChildTop .dropdown-content a, .MenuChildTop .hover-dropdown .dropdown-content dt a, .MenuChildTop #operaheadingAbout dt a, .MenuChildTop #operaheadingAbout a, .MenuChildTop #operaheadingWorldPremiere dt a { padding: 2px 8px !important; margin: 0 !important; left: 0 !important; } /* 2. TitleSection / Hero Image: Right Column beside Menu (Flex 2 / Column 2 - same as profilephoto in compsOperaHome) */ .flex-container > .TitleSection, .flex-container > .flex-2, .flex-container > .TitleSection, .flex-menu-container > .TitleSection, .flex-menu-container > .flex-2, .TitleSection.flex-2, .TitleSection { order: 2 !important; flex: 1 1 auto !important; max-width: 100% !important; min-width: 0 !important; aspect-ratio: auto !important; height: auto !important; margin-left: 0px !important; margin-right: 17px !important; margin-top: 0px !important; margin-bottom: 0px !important; position: relative !important; display: block !important; box-sizing: border-box !important; background-color: transparent !important; border: none !important; overflow: visible !important; z-index: 1500 !important; } .TitleSection img.RedBorder, .TitleSection img { width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; border-radius: 4px !important; border: 2px solid #9a3433 !important; box-sizing: border-box !important; display: block !important; } .mainContent, .mainContent table { width: 100% !important; max-width: 850px !important; margin: 25px auto 20px auto !important; text-align: center !important; } .MenuChildTop .embededMenu, .MenuChildTop #InsideMenu, .MenuChildTop #middleUL, .MenuChildTop #left, .MenuChildTop #leftDiv, .MenuChildTop #mainNav, .MenuChildTop #accordion1, .MenuChildTop .card, .MenuChildTop .card-header, .MenuChildTop ul.MenuBarVertical, .MenuChildTop ul.MenuBarVertical li { width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; box-sizing: border-box !important; } .MenuChildTop ul.MenuBarVertical a, .MenuChildTop dl.MenuBarVertical a, .MenuChildTop dt.MenuBarVertical a, .MenuChildTop li.MenuBarVertical a, .MenuChildTop .hover-dropdown a, .MenuChildTop .dropdown-content a, .MenuChildTop a, .MenuChildTop h16, h16 { white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; line-height: 1.2 !important; } } /* ========================================================================== 6. Tablet / Laptop Viewport (min-width: 844px and max-width: 1166px) ========================================================================== */ /* ========================================================================== SECTION 4: TABLET / LAPTOP VIEWPORT (@media only screen and (min-width: 844px) and (max-width: 1166px)) ========================================================================== */ @media only screen and (min-width : 844px) and (max-width : 1166px) { .flex-container, .flex-menu-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: flex-start !important; width: 100% !important; box-sizing: border-box !important; } /* 0. Page Tag: First flex item inside flex-container (Flex 0 / Column 0) */ .flex-container>.flex-pagetag, .flex-container>.flex-0, .flex-container>.flex-pagetag, .flex-menu-container>.flex-pagetag, .flex-menu-container>.flex-0, .flex-pagetag, .flex-0 { order: 0 !important; flex: 0 0 auto !important; width: max-content !important; min-width: max-content !important; max-width: max-content !important; box-sizing: border-box !important; margin: 41px 8px 0 10px !important; /* Top margin aligns War Novel with Home in menu */ padding: 0 !important; display: block !important; align-self: flex-start !important; } .flex-pagetag .pagetag, .flex-pagetag h5.pagetag, h5.pagetag { display: block !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; font: 28px/1 Helvetica, Arial, sans-serif !important; font-size: 28px !important; font-weight: bold !important; color: #cc9999 !important; letter-spacing: 0.5px !important; white-space: nowrap !important; background: transparent !important; background-color: transparent !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; transform-origin: center center !important; pointer-events: auto !important; } /* 1. Menu: Left Column below absDiv1 (Flex 1 / Column 1) */ .flex-container>.menu, .flex-container>.flex-1, .flex-container>.menu, .flex-menu-container>.menu, .flex-menu-container>.flex-1, .menu, .flex-1 { order: 1 !important; flex: 0 0 220px !important; margin: 0 !important; padding-left: 0px !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; text-align: left !important; box-sizing: border-box !important; display: block !important; position: relative !important; margin-top: 0px !important; } .menu .menu-overlay, .menu-overlay { display: block !important; position: static !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .MenuChildTop { width: 100% !important; max-width: 100% !important; text-align: left !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* ProfilePhoto inherits 116x116 square thumbnail from base rules */ /* 2. TitleSection / Hero Image: Right Column on Tablet/Laptop (same as profilephoto in compsOperaHome) */ .flex-container > .TitleSection, .flex-container > .flex-2, .flex-container > .TitleSection, .flex-menu-container > .TitleSection, .flex-menu-container > .flex-2, .TitleSection.flex-2, .TitleSection { order: 2 !important; flex: 1 1 auto !important; max-width: 100% !important; min-width: 320px !important; aspect-ratio: auto !important; height: auto !important; margin-left: 0px !important; margin-right: 15px !important; margin-top: 0px !important; margin-bottom: 0px !important; position: relative !important; display: block !important; box-sizing: border-box !important; background-color: transparent !important; border: none !important; overflow: visible !important; z-index: 1500 !important; } .TitleSection img.RedBorder, .TitleSection img { width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; border-radius: 4px !important; border: 2px solid #9a3433 !important; box-sizing: border-box !important; display: block !important; } header { position: relative; width: 100%; float: none; height: auto; display: block; padding-bottom: 0; } header .profilelogo { height: auto; } #mastheadTop p { font-size: 3.8em !important; text-align: right; line-height: normal; display: flex; width: 100%; height: auto; align-items: center; justify-content: right; margin-top: 0px; padding: 0px; } #absDiv1 { position: relative !important; width: 100% !important; max-width: 100% !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; background-color: #9a3433 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; overflow: hidden !important; margin: 10px 0 15px 0 !important; padding: 0 !important; box-sizing: border-box !important; z-index: 100 !important; } .littleBox { border: 1px solid rgb(231, 212, 212) !important; flex: 0 0 auto !important; width: 12px !important; height: 28px !important; float: none !important; margin: 0 6px !important; display: block !important; background: transparent !important; background-color: transparent !important; box-sizing: border-box !important; } .littleBox:nth-child(n + 60) { display: none !important; } #rColMid { position: relative; align-items: center; margin-left: 0em; height: auto; } #HeaderPicture { position: relative; display: block; top: 0; height: auto; width: 60%; right: 6%; left: 37%; } header .profileLogo .logoPlaceholder { display: inline; align-content: right; font-family: 'Montserrat', sans-serif; margin-top: auto; margin-left: 0; } header .ProfilePhotoHome { float: left; clear: both; margin-right: 3%; margin-top: -0em; } #ProfilePhotoCorner { align-items: left; width: 180px; } header .profileHeader { text-align: left; margin-top: 30px; height: 280px; } header .profileHeader h1 { margin-left: 293px; margin-right: 5px } header .profileHeader h2 { margin-left: 293px; margin-right: 5px } #nameplate h1 { margin-left: 288px; line-height: 2.5em } #nameplate h2 { margin-left: 288px; line-height: 0em; } header .socialNetworkNavBar .socialNetworkNav { width: 74px; height: 74px; display: inline-block; margin-right: 23px; } /* Main content and sections */ .section1 .section1Title, .section2 .section1Title { text-align: center; } .section1 .sectionTitleRule, .section2 .sectionTitleRule { width: 100%; } .section1 .sectionTitleRule2, .section2 .sectionTitleRule2 { display: none; } .mainContent { position: relative; display: block; width: 100%; background-color: transparent; padding: 0; height: auto; top: 36px; } .mainContent .PictureCaption { position: relative; padding-top: 0px; padding-left: 34%; padding-right: 3%; display: inline-block; } .mainContent .section1 { position: relative; display: block; } .mainContent .section1 .section1Content { display: block; margin: 0% 0% 0% 20%; font-family: sans-serif; margin-top: 5%; margin-bottom: 5%; } .mainContent .section2 { display: block; } .mainContent .section3 { top: 0px; margin: 0px; border: 0; padding: 0; } .mainContent .section3hide { top: 0px; margin: 0px; border: 0; padding: 0; } .section2 .section2Content { padding: 0px; margin-left: 20%; font-family: sans-serif; margin-top: 5%; margin-bottom: 5%; } .mainContent .externalResourcesNav { margin-left: 20%; margin-top: 40px; margin-bottom: 40px; text-align: center; padding-top: 0px; clear: both; } .mainContent .externalResourcesNav .externalResources { width: 199px; height: 48px; margin-top: 5%; } .laurels { height: 110px; } /* Footer */ footer .footerDisclaimer { float: left; margin-left: 3%; font-family: sans-serif; } footer .footerNote { float: right; margin-right: 3%; font-family: sans-serif; } h10 { font: 350%/1.1 Helvetica, Arial, sans-serif; color: #9a3433; line-height: 1.7em; margin-bottom: 0; margin-top: 0; } h12 { font: 4.4vw/1.5 Helvetica, Arial, sans-serif; margin: 0; font-weight: bold; } h13 { font: 3.4vw/1.2 Helvetica, Arial, sans-serif; margin: 0; font-weight: bold; } h14 { font: 180%/1.1 Helvetica, Arial, sans-serif; color: #9a3433; line-height: 1em; margin-bottom: 0; margin-top: 0; } } /* ========================================================================== 8. Desktop Viewport (min-width: 1134px) - 3-column top row: vertical pagetag, menu, fluid ProfilePhoto, centered TitleSection ========================================================================== */ /* ========================================================================== SECTION 5: DESKTOP VIEWPORT (@media only screen and (min-width: 1166px)) ========================================================================== */ @media only screen and (min-width: 1166px) { .flex-container, .flex-menu-container { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: flex-start !important; width: 100% !important; max-width: 1066px !important; margin: 0 auto !important; box-sizing: border-box !important; } /* 0. Page Tag: First flex item inside flex-container (Flex 0 / Column 0) */ .flex-container>.flex-pagetag, .flex-container>.flex-0, .flex-container>.flex-pagetag, .flex-menu-container>.flex-pagetag, .flex-menu-container>.flex-0, .flex-pagetag, .flex-0 { order: 0 !important; flex: 0 0 auto !important; width: max-content !important; min-width: max-content !important; max-width: max-content !important; box-sizing: border-box !important; margin: 41px 0px 0 10px !important; /* Top margin aligns War Novel with Home in menu */ padding: 0 !important; display: block !important; align-self: flex-start !important; padding-left: 10px !important; } .flex-pagetag .pagetag, .flex-pagetag h5.pagetag, h5.pagetag { display: block !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: auto !important; height: auto !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important; font: 28px/1 Helvetica, Arial, sans-serif !important; font-size: 28px !important; font-weight: bold !important; color: #cc9999 !important; letter-spacing: 0.5px !important; white-space: nowrap !important; background: transparent !important; background-color: transparent !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; transform-origin: center center !important; pointer-events: auto !important; } /* 1. Menu: Left Column below absDiv1 (Flex 1 / Column 1) */ .flex-container>.menu, .flex-container>.flex-1, .flex-container>.menu, .flex-menu-container>.menu, .flex-menu-container>.flex-1, .menu, .flex-1 { order: 1 !important; flex: 0 0 230px !important; margin: 0 !important; padding-left: 0px !important; padding-right: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; text-align: left !important; box-sizing: border-box !important; display: block !important; position: relative !important; } .menu .menu-overlay, .menu-overlay { display: block !important; position: static !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .MenuChildTop { width: 100% !important; max-width: 100% !important; text-align: left !important; margin: 0 !important; padding: 0 !important; display: block !important; } /* ProfilePhoto inherits 116x116 square thumbnail from base rules */ /* 2. TitleSection / Hero Image: Right Column on Desktop (same as profilephoto in compsOperaHome) */ .flex-container > .TitleSection, .flex-container > .flex-2, .flex-container > .TitleSection, .flex-menu-container > .TitleSection, .flex-menu-container > .flex-2, .TitleSection.flex-2, .TitleSection { order: 2 !important; flex: 1 1 auto !important; max-width: 100% !important; min-width: 350px !important; aspect-ratio: auto !important; height: auto !important; margin-left: 0px !important; margin-right: 14px !important; margin-top: 0px !important; margin-bottom: 0px !important; position: relative !important; display: block !important; box-sizing: border-box !important; background-color: transparent !important; border: none !important; overflow: visible !important; z-index: 1500 !important; } .TitleSection img.RedBorder, .TitleSection img { width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: auto !important; object-fit: cover !important; border-radius: 4px !important; border: 2px solid #9a3433 !important; box-sizing: border-box !important; display: block !important; } .mainContent, .mainContent table { width: 100% !important; max-width: 850px !important; margin: 25px auto 20px auto !important; text-align: center !important; } /* Header */ header { position: relative; width: 100%; float: none; height: auto; display: block; } header .profilelogo { height: auto; } header .profileLogo .logoPlaceholder { float: left; margin-bottom: 0px; } header .ProfilePhotoHome { position: abolute; float: left; margin-right: 3%; margin-top: 0 } #mastheadTop p { line-height: normal; font-size: 3.3rem !important; text-align: right; display: flex; width: 100%; height: auto; align-items: center; justify-content: right; margin-top: 0px; padding: 20px; } #HeaderSpacer { position: relative; display: block; height: 100px; } #HeaderPicture { position: relative; display: block; height: auto; width: 60%; right: 6%; left: 37%; top: 0; } #InsideMenu { position: absolute; top: 0px; left: 40px; } #MenuBarItemSubmenu { position: relative; left: 400px; } header .profileHeader { position: relative; left: 0; text-align: left; margin-top: 100px; height: 270px; vertical-align: middle; } header .profileHeader h1 { margin-left: 288px; } header .profileHeader h2 { margin-left: 288px; } header .profileHeader h3 { position: relative; margin-left: 288px; margin-top: 0em; text-align: center; height: 2em; width: 35em; } #absDiv1 { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; max-width: 100% !important; height: 49px !important; min-height: 49px !important; max-height: 49px !important; background-color: #9a3433 !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: center !important; align-items: center !important; overflow: hidden !important; margin: 10px 0 15px 0 !important; padding: 0 !important; box-sizing: border-box !important; z-index: 100 !important; } .littleBox { border: 1px solid rgb(231, 212, 212) !important; flex: 0 0 auto !important; width: 12px !important; height: 28px !important; float: none !important; margin: 0 6px !important; display: block !important; background: transparent !important; background-color: transparent !important; box-sizing: border-box !important; } #nameplate h1 { margin-left: 288px; line-height: 2.5em } #nameplate h2 { margin-left: 288px; line-height: 0em; } header .socialNetworkNavBar .socialNetworkNav { width: 74px; height: 74px; display: inline-block; margin-right: 23px; } .section1 .sectionTitleRule, .section2 .sectionTitleRule { width: 22.5%; } .mainContent { position: relative; display: block; width: 100%; background-color: transparent; padding: 0; height: auto; min-width: 922px; } .mainContent .PictureCaption { position: relative; padding-top: 20px; padding-left: 34%; padding-right: 3%; display: block; } .mainContent .section2 { position: relative; display: block; } .mainContent .section1 .section1Content { display: block; margin-top: 0%; margin-right: 0%; margin-left: 26%; margin-bottom: 0%; font-family: sans-serif; } .section2 .section2Content { padding: 0px; margin-left: 26%; font-family: sans-serif; } .mainContent .externalResourcesNav { margin-top: 40px; margin-bottom: 40px; text-align: center; padding-top: 0px; clear: both; } .mainContent .externalResourcesNav .externalResources { width: 199px; height: 48px; } /* Footer */ footer .footerDisclaimer { float: left; margin-left: 3%; font-family: sans-serif; } footer .footerNote { float: right; margin-right: 3%; font-family: sans-serif; } footer #pagebottom { top: 155px; display: block; position: relative } h12 { font: 48px/1.4 Helvetica, Arial, sans-serif; margin: 0; font-weight: bold; } h13 { font: 32px/1.2 Helvetica, Arial, sans-serif; margin: 0; font-weight: bold; } } /* ========================================================================== SECTION 6: DEVICE UTILITIES (Landscape Fullscreen) ========================================================================== */ @media only screen and (orientation: landscape) { .TitleVideoOperaHome.is-fullscreen iframe { position: relative !important; max-width: calc(100dvh * 16 / 9) !important; max-height: 100dvh !important; width: 100% !important; height: 100% !important; margin: auto !important; } .TitleVideoOperaHome.is-fullscreen .close-fullscreen-btn { top: 50% !important; bottom: auto !important; right: max(2px, env(safe-area-inset-right, 2px)) !important; transform: translate(calc(50% - 14px), -50%) rotate(90deg) !important; transform-origin: center center !important; padding: 6px 14px !important; font-size: 13px !important; } .TitleVideoOperaHome.is-fullscreen .close-fullscreen-btn:hover, .TitleVideoOperaHome.is-fullscreen .close-fullscreen-btn:active { background: #7a1a19 !important; transform: translate(calc(50% - 14px), -50%) rotate(90deg) scale(1.05) !important; } }