html { font-size: 62.5%; scroll-padding-top: 5rem; /* scroll-behavior: smooth; */ } /* Extra small devices (phones, 768px and down) */ @media only screen and (max-width: 768px) { .content-mobile { display:block; } #homepageSection1-fra { position: relative; width: 100%; } #homepageSection1-image1 { max-height:100%; } img { width: 100%; } #about-the-fed > div:nth-child(2) > div.content-block-inner > div > div > div:nth-child(4) > img, #about-the-fed > div:nth-child(2) > div.content-block-inner > div > div > div:nth-child(7) > a >img, #monetary-policy-content > div:nth-child(2) > div.content-block-inner > div > div > div > a > img, #monetary-policy-content > div:nth-child(3) > div.content-block-inner > div > div > div > a > img, #who-sets-rate > div.content-block-inner > div.content-block-text > div > div:nth-child(2) > a > img, #how-communicate-policy > div.content-block-inner > div > div > div:nth-child(2) > img, #how-communicate-policy > div.content-block-inner > div > div > div:nth-child(7) > a > img, #financial-stability-content > div:nth-child(1) > div.content-block-inner > div.content-block-text > div > div > a > img, #financial-stability-content > div:nth-child(2) > div.content-block-inner > div > div > div > a > img, #financial-stability-content > div:nth-child(5) > div.content-block-inner > div > div > div:nth-child(9) > a > img, #supervision-regulation-content > div:nth-child(3) > div > div > div > div > a > img { position: relative; Width:100%; } #consumers-communities-content > div:nth-child(1), #consumers-communities-content > div:nth-child(3) { padding-bottom: 15rem; } .reveal { position:relative; transform: translateY(50px); opacity:0; transition: all 1s; } .reveal.shown{ transform: translateY(0); opacity: 1; } .header { background-color: #fff; border: none; } } /* Small devices (portrait tablets and large phones, 768px and up) */ @media only screen and (min-width: 769px) { .content-mobile { display:none; } .content-normal { display:block; } } /* header styles at three break points*/ .header { background: rgb(3 4 4 / 55%); position: fixed; width: 100%; z-index: 100; transition-duration: .5s; transition-property: background,border,color,opacity; z-index: 99; } .header-accessible { background-color: #fff; border: solid 1px #eee; position: fixed; width: 100%; z-index: 100; } .header__inner { align-items: center; border-bottom: 1px solid rgba(255,255,255, 0.2); display: flex; flex-wrap: wrap; height: 100%; justify-content: space-between; margin: auto; max-width: 114rem; padding: 1rem 1.5rem 0rem 1.5rem; position: relative; } .header__inner__secondary { display: none; } .header a { text-decoration: none; } .header__logo { align-items: center; display: flex; height: 8rem; width: 36rem; } .header__logo_inner { height: 5.5rem; /*height: 3.4rem;*/ width: 100%; } .header__logo_inner h1 { margin: -500px; } .header__logo a { position: absolute; width: 32rem; height: 8rem; } .header__logo a:first-child { opacity: 1; transform: translateY(0); } .header__logo a:last-child { opacity: 0; transform: translateY(5rem); z-index: -1; } .header__logo a img { width: 27rem; } #header.slide-header { transition: opacity .5s; /* .03s Transition effect when sliding down (and up) */ z-index: 99; } .header-hidden { opacity: 0; } #header > div.header__inner > div.header__logo > div > a:nth-child(1) { background-image: url("/images/fedexplained/fe-logo-wht.png"); background-repeat: no-repeat; } #header > div.header__inner > div.header__logo > div > a:nth-child(2), #header-accessible > div.header__inner > div.header__logo > div > a:nth-child(1), #header-accessible > div.header__inner > div.header__logo > div > a:nth-child(2) { background-image: url("/images/fedexplained/FE-logo-blue.png"); background-repeat: no-repeat; background-size:contain; } .header-background { background-color: #fff; /* border: solid 1px #eee; */ } .header-background .header__logo a:first-child { opacity: 0; transform: translateY(-5rem); transition-duration: .5s; transition-property: transform; } .header-background .header__logo a:last-child { color: #00437c; opacity: 1; transform: translateY(0); transition-duration: .5s; transition-property: transform; } .header-background .federal-reserve-link { border: solid 3px #00437c; color: #00437c; } .header-background .main-navigation__list li:hover, .header-background .main-navigation__item-active { border-bottom: 1px solid #00437c; } .header-background .pdf-download__label, .header-background .main-navigation__list a, .header-background .side-navigation-toggle__icon { color: #00437c; } .header-background .pdf-download__svg { filter: invert(17%) sepia(99%) saturate(1279%) hue-rotate(186deg) brightness(97%) contrast(103%); } @media only screen and (min-width: 960px) and (max-width: 1200px) { #header > div.header__inner > div.header__logo > div > a:nth-child(1) { background-image: url(/images/fedexplained/FE-logo-wht.png); background-size:contain; } .header__inner__secondary { color: #FFFFFF; display: block; text-align: right; padding: 1.5rem; transition-duration: .5s; transition-property: background,border,color,opacity; } #header > div.header__inner__secondary.header__inner__secondary-background { background-color:#00437c; } .header__inner__secondary> span { color: #FFFFFF; font-size: 1.2rem; font-weight: 600; } #header > div.header__inner__secondary.header__inner__secondary-background > a > img.pdf-download__svg { filter: invert(99%) sepia(5%) saturate(265%) hue-rotate(220deg) brightness(118%) contrast(100%); height: 2.5rem; width: 2.5rem; } #header > div.header__inner__secondary.header__inner__secondary-background > a > span { color:#FFFFFF; } #header > div.header__inner__secondary.header__inner__secondary-background > span { color: #fff; font-size: 1.2rem; font-weight: 600; } body > section.hero.stepdown-hero > div > div.hero__inner > h2 { margin-top: 23%; font-size:4.0rem; } body > section.hero.stepdown-hero > div > div.hero__inner > div { bottom:0%; } } /* switch to white header with blue pdf bar */ @media screen and (max-width: 960px) { .header { background-color: #fff; } .header-background { background-color: #fff; /* border: solid 1px #eee; */ border: none; } .header__logo a:last-child { color: #00437c; opacity: 1; transform: translateY(0); } #header > div.header__inner > div.header__logo > div > a:nth-child(1) { background-image: url(/images/fedexplained/FE-logo-blue.png); } .header__inner__secondary { background-color: #00437c; display: block; text-align: right; padding:1.5rem; transition-duration: .5s; transition-property: background,border,color,opacity; } .header__inner__secondary> span { color:#FFFFFF; font-size: 1.2rem; font-weight: 600; } .header__inner__secondary-background > span { color:#FFFFFF; } .header__inner__secondary-background { background-color: #00437c; color:#FFFFFF; } .logo-white { display: none; } .side-navigation-toggle__icon { color: #00437c; } } /* End of header styles */ @media screen and (max-width: 768px) { .content-normal { display: none; } } @media screen and (min-width: 769px) { .content-mobile { display: none; } } body { font-family: 'Montserrat', sans-serif; font-size: 1.6rem; margin: 0; } iframe { border: none; } * { box-sizing: border-box; } .globalskip { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: 20px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .globalskip:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .globalskip:visited { color: #00437C !important; } .sr-only { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; } /*.content-block__text-right a, .content-block__text-right a:visited { color:#00437c; }*/ .no-scroll { overflow: hidden!important; } .nowrap { white-space: nowrap; } h2 { font-size: 3.294rem; } h3 { font-size: 2.5rem; } .toggle-animations { bottom: 2%; position: fixed; right: 1%; z-index: 450; } .toggle-animations .button--toggle-animations { border: 1px solid #4c7aa2; border-radius: 20px; cursor: pointer; font-size: 1rem; font-weight: 300; padding: 10px; } .button--toggle-animations:hover { border: 1px solid #fff; background-color: #4d79a3; color: #fff; } .button--toggle-animations-off { border: 1px solid #fff ; background-color: #4d79a3 ; color: #fff ; } .federal-reserve-link { background-color: transparent; border: solid 3px #fff; font-size: 1.3rem; font-weight: bold; padding: 1rem 2.5rem; text-transform: uppercase; color: #ffffff; } .pdf-download { background: transparent; border: none; color: white; margin: 0; padding: 1rem; position: absolute; right: -5rem; top: 2rem; } .pdf-download > a:nth-child(1), .pdf-download > a:nth-child(1):visited { color: #fff; } .pdf-download__svg { filter: invert(99%) sepia(5%) saturate(265%) hue-rotate(220deg) brightness(118%) contrast(100%); height: 2.5rem; width: 2.5rem; } .pdf-download__label { display: block; font-size: 1.3rem; color:#ffffff; } .main-navigation { width: 100%; } .main-navigation__list { display: flex; justify-content: space-between; font-size: 1.2rem; list-style: none; margin: 0; padding-left: 0; } .main-navigation__list a { color: #fff; display: block; font-weight: 700; height: 8rem; letter-spacing: 0.1rem; line-height: 8rem; text-transform: uppercase; } .main-navigation__list li:hover, .main-navigation__item-active { border-bottom: 1px solid white; } .side-navigation-toggle { background: none; border: none; display: none; } .side-navigation-toggle a { padding: 1.5rem; } .side-navigation-toggle__icon { color: white; font-size: 2.5rem; } .side-navigation { height: 100%; padding: 0; background: #393936; visibility: hidden; left: 100%; position: fixed; box-shadow: inset 7px 0 9px -7px rgba(0,0,0,.6); top: 0; transform: translateX(100%); overflow: hidden; z-index: 100; -webkit-transition: -webkit-transform 550ms,visibility 0s; transition: transform 550ms,visibility 0s; } .side-navigation.scale-in { visibility: visible; transform: translateX(-35rem); } .side-navigation a { color: #fff; } .side-navigation a.monetary-policy-side-nav-active { color: #B6DD36; } .side-navigation a.financial-stability-side-nav-active { color: #F7842B; } .side-navigation a.supervision-regulation-side-nav-active { color: #DE8EFB; } .side-navigation a.payment-systems-side-nav-active { color: #FD8686; } .side-navigation a.consumer-community-side-nav-active { color: #63C4D9; } .side-navigation a:hover { color: #fff; } .side-navigation__header { display: flex; height: 10rem; justify-content: flex-end; margin-right: 2rem; } .side-navigation__inner { width: 35rem; } .side-navigation__block ul { padding: 0; margin: 0; list-style: none; } .side-navigation__block ul li a { display: inline-block; line-height: 1.2; letter-spacing: 0.1rem; padding: 0.6rem 4rem; position: relative; text-decoration: none; text-transform: uppercase; } .side-navigation__block ul li a:hover { color: #98b2c8; text-decoration: underline; } #header > div.header__inner > aside > div > nav > ul > li:nth-child(2) > a .side-navigation__close { background-color: transparent; border: none; color: #fff; font-weight: 900; } button.side-navigation__close { background-color: #393936; border: none; } button.side-navigation__close > a { background-color: #393936; color:#ffffff !important; font-weight:900; padding:.5rem; border-radius: .25rem; border: 1px solid white; font-family: 'Montserrat', sans-serif; } .hero { align-items: center; display: flex; height: 55vw; justify-content: center; overflow: hidden; position: relative; z-index: 1; } .hero__wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-size: cover; background-position: center center; background-repeat: no-repeat; } .hero__video { height: 100%; position: relative; width: 100%; } /* Hide the player control bar */ .video-js .vjs-control-bar { display: none; } /* Remove click events on the player */ .video-js { pointer-events: none; } .hero__inner { align-items: center; color: #fff; display: flex; font-size: 5.5rem; font-weight: 700; height: 100%; justify-content: center; position: absolute; width: 100%; z-index: 1; } .hero__heading { font-size: 5.5rem; opacity: 0; padding: 0 2rem; transform: translateY(3rem); text-align: center; transition-delay: 400ms; transition-duration: 800ms; text-shadow: 0px 0px 9px black; } .hero__heading.active { opacity: 1; transform: translateY(-2rem); } .scroll-icon-container { bottom: 20%; height: 7rem; position: absolute; } .stepdown-hero { height: 35vw; } .stepdown-hero .scroll-icon-container { bottom: 5%; height: 7rem; position: absolute; } @keyframes jumpInfinite { 0% { margin-top: 0; } 50% { margin-top: 20px; } 100% { margin-top: 0; } } .stepdown-hero .hero__heading { margin-top: 10%; } .stepdown-hero .scroll-icon { bottom: 10vh; } .content { border-top: 10px solid #4c7aa2; scroll-margin-top: 100px; } .content ul { margin-left: 2rem; padding: 0; } .content-block { overflow: hidden; padding: 11rem 0 15rem 0; position: relative; } .content-block p, .content ul { font-size: 2.016rem; line-height: 2; } .divblue, .divblue a, .divblue a:visited, .divblue a.accessible, .divblue a:visited.accessible { background-color: #405168; color: #fff; } .divwhite { background-color: #ffffff; color: #666; } .divwhite a, .divwhite a:visited, .divwhite a.accessible, .divwhite a:visited.accessible{ color:#00437c; } .divgreen, .divgreen a, .divgreen a:visited, .divgreen a.accessible, .divgreen a:visited.accessible { background-color: #657c21; color: #fff; } .divorange, .divorange a, .divorange a:visited, .divorange a.accessible, .divorange a:visited.accessible { background-color: #863900; color: #fff; } .divpurple, .divpurple a, .divpurple a:visited, .divpurple a.accessible, .divpurple a:visited.accessible { background-color:#52325d; color: #fff; } .divred, .divred a, .divred a:visited, .divred a.accessible, .divred a:visited.accessible { background-color: #702626; color: #fff; } .divteal, .divteal a, .divteal a:visited, .divteal a.accessible, .divteal a:visited.accessible { background-color: #326975; color: #fff; } .content-block__text-left .content-block-text { order: -1; } .content-block__text-left .content-block-text__highlight, #research > div > div > p.content-block-text__highlight { color: #f6c016; } .content-block__text-right .content-block-text__highlight { color: #4c7aa2; } #research { background-color: #405168; color: #fff; } .content-block:first-of-type p:first-of-type { margin-top: 0; } .content-block:first-of-type h2:first-of-type { margin-top: 6rem; } #how-implements-policy > div:nth-child(2) { padding-top: 4rem; } .content-block-inner { display: flex; margin: auto; max-width: 114rem; } .content-block__full-width .content-block-inner { display: block; } .content-block-visuals { display: flex; justify-content: center; position: relative; width: 50%; } .content-block-visuals-fw { width: 100%; } .content-block-visuals-inner { width: 100%; } .content-block-visuals__item { height: 500px; position: absolute; top: 5vh; width: 100%; } .content-block-visuals__item-video { position: absolute; top: 5vh; width: 100%; margin-top:2.5rem; } .content-block-visuals__item-video-lg { position: absolute; top: 5vh; width: 100%; margin-top:4rem; } .content-block-visuals__item.animation-disabled { visibility: hidden; } .content-block-visuals__item.show { opacity: 1 !important; z-index: 10 !important; } .content-block-visuals__item img { display: block; margin: auto; max-height: 100%; max-width: 100%; } .content-block-visuals__item video { display: block; margin: auto; max-height: 100%; max-width: 100%; } #fsoc{ margin: 0 auto; position: relative; display: block; } .content-block-visuals__item a { height: 100%; width: 100%; } .content-block-text { padding: 0 5%; width: 50%; } .content-block-text-fw { width: 100%; } /* parallax */ .content, .section-block { position: relative; z-index: 1 } .pullquote, .pullquote-fs { background-color: #fff; border-bottom: 10px solid #4c7aa2; border-top: 10px solid #4c7aa2; position: relative; height: 44rem; display: flex; align-items: center; justify-content: center; z-index: 1; background-size: cover; background-position: center center; background-repeat: no-repeat; } .pullquote__text { color: #00437c; font-size: 3rem; font-weight: 300; line-height: 1.5; padding: 0 10%; text-align: center; } #pullquote1 { background-image: url("/images/fedexplained/press-parallax-bg.png"); } #pullquote2 { background-image: url("/images/fedexplained/bog-parallax-backdrop.png"); } .video-section { background-color: #393936; border-top: 10px solid #4c7aa2; position: relative; z-index: 1; } .video-section__inner { display: block; height: 75%; left: 12.5%; position: relative; right: 12.5%; width: 75%; } .video-section__iframe { bottom: 0px; height: 100%; position: absolute; top: 0px; width: 100%; } /* Functions Cards */ .functions-card { border: solid 1px transparent; } .functions-cards { display: flex; flex-wrap: wrap; } .functions-cards h2 { color: #00437c; padding: 4%; text-align: center; width: 100%; } .functions-card { overflow: hidden; width: 20%; } .functions-card__link { color: #fff; display: block; position: relative; } .functions-card-inner { transition-property: background,border-color,color,opacity,box-shadow,transform; transition-duration: .7s; transition-timing-function: ease-in-out; } .functions-card-inner.active { transform: translate3d(0,-100%,0); } .functions-card__image { display: block; height: 100%; width: 100%; } .functions-card__text { display: flex; flex-wrap: wrap; font-size: 1.8rem; height: 100%; justify-content: center; letter-spacing: 0.1rem; line-height: 1.8; overflow: hidden; padding: 10%; position: absolute; text-align: center; width: 100%; } .functions-card__text p { margin: 0; } .functions-card__learn-more { align-self: flex-end; background-color: #fff; border: solid 1px; border-radius: 7.5rem; cursor: pointer; height: 6rem; padding: 1rem 2rem; width: 80%; } #monetary-policy-card .functions-card__text { background-color: #667c21; } #monetary-policy-card:hover { border: solid 1px #a1c334; } #monetary-policy-card .functions-card__learn-more { border-color: #a1c334; color: #667c21; } #financial-stability-card .functions-card__text { background-color: #863900; } #financial-stability-card:hover { border: solid 1px #da5d00; } #financial-stability-card .functions-card__learn-more { border-color: #da5d00; color: #863900; } #supervision-regulation-card .functions-card__text { background-color: #52325d; } #supervision-regulation-card:hover { border: solid 1px #835195; } #supervision-regulation-card .functions-card__learn-more { border-color: #835195; color: #52325d; } #payment-systems-card .functions-card__text { background-color: #702626; } #payment-systems-card:hover { border: solid 1px #bc4040; } #payment-systems-card .functions-card__learn-more { border-color: #bc4040; color: #702626; } #consumers-communities-card .functions-card__text { background-color: #326975; } #consumers-communities-card:hover { border: solid 1px #50a2b4; } #consumers-communities-card .functions-card__learn-more { border-color: #50a2b4; color: #326975; } #monetary-policy-card .functions-card__learn-more:hover, #financial-stability-card .functions-card__learn-more:hover, #supervision-regulation-card .functions-card__learn-more:hover, #payment-systems-card .functions-card__learn-more:hover, #consumers-communities-card .functions-card__learn-more:hover { background-color: #e4e4e4; color: #00437c; } /*************** Start Monetary Policy Page *****************/ #monetary-policy-content { border-top: 10px solid #a1c334; } #monetary-policy-content #federal-funds-rate .data-vis-caption { color: #4c7aa2; font-size: 2.5rem; font-weight: bold; text-align: center; } #monetary-policy-content #how-implements-policy .content-block-visuals__item { height: 100%; } #monetary-policy-content #promoting-stability-image { position: relative; } #monetary-policy-content #imgP1 { position: relative; } #monetary-policy-content .content-block-text__mp-intro { padding-bottom: 200px; } /*************** End Monetary Policy Page *****************/ /********************* Start Financial Stability Page **************************************/ #financial-stability-content { border-top: 10px solid #da5d00; } #financial-stability-content .content-block-text__fs-intro { padding-bottom: 200px; } #domestic-intl-coop-image { position: relative; } #financial-stability-content > div.content-block.content-block__full-width > div:nth-child(1) > h2 { text-align: center; } #financial-stability-content > div.content-block.content-block__full-width > div:nth-child(1) > div.content-block-text-fw > h2 { color:#f6c016; } #financial-stability-content > div.content-block.content-block__full-width > div:nth-child(1) > div.content-block-visuals-fw > div { position:relative; } #financial-stability-content > div:nth-child(1) > div > div.content-block-visuals { margin-bottom: 5rem; } /********************* END Financial Stability Page **************************************/ /********************* Start Supervision Regulation *********************************************/ #supervision-regulation-content { border-top: 10px solid #835195; } /********************* END Supervision Regulation *********************************************/ /********************* Start Payment Systems *********************************************/ #payment-systems-content { border-top: 10px solid #bc4040; } #payment-systems-content > div:nth-child(4) > div.content-block-inner > div.content-block-text > div > h2 { color:#f6c016; } #payment-systems-content > div:nth-child(2) > div.content-block-inner > div.content-block-text > div > p:nth-child(2) > a { color:#00437c; } /********************** END Payment Systems **********************************************/ /********************** Start Consumers & Communities ************************************/ #consumers-communities-content { border-top: 10px solid #50a2b4; } #consumers-communities-content > div:nth-child(1), #consumers-communities-content > div:nth-child(3) { padding-bottom: 0; } #consumers-communities-content > div:nth-child(2) #dcca-img2{ margin-top: -50px; } /*********************** End Consumers & Communities **************************************/ /*******adjust image height on short screens*******/ @media screen and (max-height: 800px) { .content-block-visuals__item img { max-height: 75%; max-width: 75%; } } @media screen and (max-width: 1700px) { .functions-card__text { font-size: 1.4rem; } } @media screen and (max-width: 1400px) { .functions.card__text { padding: 3%; } .functions-card__text { font-size: 1.2rem; line-height: 1.5; } .stepdown-hero .hero__heading { margin-top: 15%; } .stepdown-hero .scroll-icon { bottom: 4vh; } } @media screen and (max-width: 1179px) { .main-navigation { display: none; } .side-navigation-toggle { display: block; } .federal-reserve-link, .pdf-download { display: none; } .content-block-inner { padding: 0 10%; } .content-block-visuals__item { height: 500px; position: absolute; } .header__inner__secondary { color: #FFFFFF; display: block; text-align: right; padding:1.5rem; transition-duration: .5s; transition-property: background,border,color,opacity; } .header__inner__secondary > span { font-size: 1.2rem; font-weight: 600; } .header__inner__secondary-background > span { /* color: #FFFFFF; */ color:#00437c; } .header__inner__secondary .header__inner__secondary-background > span { color:#00437c; } .header__inner__secondary-background { background-color: #00437c; color:#FFFFFF; } .pdf-download__svg { filter: invert(99%) sepia(5%) saturate(265%) hue-rotate(220deg) brightness(118%) contrast(100%) !important; height: 1.85rem; width: 1.85rem; } .pdf-download__label { color: white !important; display: block; font-size: 0.85rem; } } @media screen and (max-width: 1179px) { .functions-card { width: 33.3%; } .functions-card__text { font-size: 1.6rem; line-height: 1.8; } } /* switch to white header with blue pdf bar */ @media screen and (max-width: 960px) { /* .header { background-color: #fff; border-bottom: solid 1px #eee; } */ /* .header-background { background-color: #fff; border: solid 1px #eee; } */ .logo-white { display: none; } .header__logo a:last-child { color: #00437c; opacity: 1; transform: translateY(0); } .side-navigation-toggle__icon { color: #00437c; } .hero { position: relative; top: 154px; /*height of header and pdf bar*/ } .stepdown-hero .hero__heading { font-size: 4.5rem; margin-top: 10%; } .scroll-icon { bottom: 10vh; } .stepdown-hero .scroll-icon { height: 5rem; } .functions-card__text { font-size: 1.4rem; padding: 6%; } .video-section__inner { height: 100%; left: 0; right: 0; width: 100%; } #header > div.header__inner > div.header__logo > div > a:nth-child(1) { background-image: url(/images/fedexplained/FE-logo-blue.png); } .header__inner__secondary { background-color: #00437c; display: block; text-align: right; padding:1.5rem; transition-duration: .5s; transition-property: background,border,color,opacity; } .header__inner__secondary> span { color:#FFFFFF; font-size: 1.2rem; font-weight: 600; } .header__inner__secondary-background > span { color:#FFFFFF; } .header__inner__secondary-background { background-color: #00437c; color:#FFFFFF; } .pdf-download__svg { filter: invert(99%) sepia(5%) saturate(265%) hue-rotate(220deg) brightness(118%) contrast(100%) !important; height: 1.85rem; width: 1.85rem; } .content { top: 154px; } div.content-holder> .content { top: 0; } } /* switch to single column format */ @media screen and (max-width: 768px) { .hero { height: 54vw; } .scroll-icon { bottom: 5vh; } .content-block-inner { display: block; } .content-block-visuals, .content-block-text { width: 100%; } .content-block-visuals-inner { height: 40rem; top: -3rem; } .content-block-visuals__item-video { top: 0vh; width: 100%; margin-top: 0rem; } #grx-1 { max-width: 100%; } #supervision { max-width: 100%; } #ACH { max-width: 100% ; } #fsoc { width: 100%; } #dcca3 { width: 100%; } /* .content-block-visuals__video-image { cursor: pointer; pointer-events: auto; } */ .content-block-visuals__video-image { pointer-events: none; cursor:none' } .content-block-visuals__video-image.is-active { cursor: pointer; pointer-events: auto; } .content-block-visuals-inner { height: 40rem; top: -3rem; } .functions-card { width: 50%; } .functions-card__text { font-size: 1.6rem; line-height: 1.6; padding: 5%; } .pullquote__text { font-size: 2rem; } .content-block { padding-top: 5rem; } .content-block-visuals__item { top: 0vh; } .pullquote-fs { background-color: #fff; border-bottom: 10px solid #4c7aa2; border-top: 10px solid #4c7aa2; position: relative; height: 61rem; display: flex; align-items: center; justify-content: center; z-index: 1; } } @media screen and (max-width: 540px) { .hero__heading { font-size: 4.5rem; } .scroll-icon { bottom: 3vh; height: 5rem; } .functions-cards { justify-content: center; } .functions-card { width: 70%; } .functions-card__text { font-size: 1.8rem; padding: 10%; } } /* header moves up on scroll */ @media screen and (max-width: 480px) { .scroll-icon-container { display: none; } .header__logo { width: 28rem; } .header__logo a img { width: 32rem; } .hero__heading { font-size: 3.25rem; } .stepdown-hero .hero__heading { font-size: 3.0rem; } .stepdown-hero .scroll-icon { bottom: 2vh; } .content-block-visuals__item { height:auto; } #homepageSection1-images .content-block-visuals__item { margin-top: 0; background-color: transparent !important; } .functions-card__text { font-size: 1.6rem; line-height: 1.2; } #monetary-policy-content .content-block-text__mp-intro { padding-bottom: 20px; /* was 0px */ } h2 { font-size: 2.25rem; } h3 { font-size: 1.75rem; } .content-block p, .content ul { font-size: 1.50rem; line-height: 2; } .pullquote, .pullquote-fs { height: 100%; padding: 2rem 0; } #mp-img8-mobile { width: 100%; } } @media screen and (max-width: 370px) { .functions-card__text { font-size: 1.2rem; padding: 5%; } } @media screen and (min-width: 481px) and (max-width: 1600px) { .content-block-visuals__item-video video { display: block; margin: auto; max-height: 60%; max-width: 60%; margin-top:-7rem; } #fsoc { margin: 0 auto; position: relative; display: block; max-height: 35%; max-width: 35%; } .content-block-visuals__item-video-lg video { display: block; margin: auto; max-height: 60%; max-width: 60%; margin-top:-6.5rem; } } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { .content-block-inner { padding: 0 5%; } #fs-grx1-video { position: relative; width:100%; } #fs-img2, #fs-img3, #fs-img7 { position: relative; width:100%; } #financial-stability-content .content-block-text__fs-intro { padding-bottom: 0px; } #financial-stability-content > div:nth-child(1) > div.content-block-inner > div.content-block-visuals > div > div > div.content-block-visuals__item-video { height:auto; max-width:500px; background-color: #863900; } #sr-stressTest-special { color: #f6c016; margin:0rem 1rem 2.5rem 1rem; } #sr-img3, #sr-img8 { position: relative; width:100%; } #sr-img7 { margin-bottom: 2rem; } #supervision-regulation-content #imgPS1, #supervision-regulation-content #imgPS2, #supervision-regulation-content #imgPS3, #supervision-regulation-content #imgPS4, #supervision-regulation-content #imgPS5 { max-height: 85%; /* top: 10vh; */ } #supervision-regulation-content #promoting-stability-images { margin-bottom: 2rem; background-color: #405168; } #ps-img3a, #ps-img3b, #ps-img3c, #ps-img3d { position: relative; width:100%; } #consumers-communities-content > div:nth-child(2) > div.content-block-inner > div.content-block-visuals #img2 { /* background-color: #326975; */ margin-top: 0; } #consumers-communities-content > div:nth-child(3) > div > div.content-block-visuals > div > div > div { top:0vh; margin-top:0; background-color: #ffffff; } /*#consumers-communities-content #img5 { background-color: #405168; color: #fff; }*/ #dcca3 { background-color: #ffffff; } #dcca-complaint, #dcca-file-complaint, #dcca-perspectives { background-color: #ffffff; } #dcca-inclusive { background-color: #326975; position: relative; width:100%; } #dcca-img4, #dcca-img5, #dcca-perspectives, #dcca-img3 { position: relative; width:100%; } #consumers-communities-content > .content-block-visuals__item { background-color: none; } }