/* Table of Contents I. Global -------------------------------------- 01. Fonts 02. Typography Paragraph Lead Headers Subheaders Small Links Dividers ul li ol li dl dt blockquote cite Mobile 03. Icons @2x 04. Elements Buttons Forms Inputs Mobile 05. Main Nav Mobile 06. Footer Mobile 07. Pagination Mobile 08. Social Sharing Mobile 09. Helpers Badge Stat Label Mobile II. Building Blocks ---------------------------- 01. Featured Set III. Types -------------------------------------- 01. displayPageHome Mobile 02. displayPageStandard Mobile 03. displayTeaserStandard Mobile IV. Content Objects --------------------------- 01. [name of object] Mobile /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ @import url("https://use.typekit.net/dym6myo.css"); /* ------------------------------------------------------------ *\ Typography \* ------------------------------------------------------------ */ /* Paragraph */ body { font-family: "freight-sans-pro",sans-serif; font-weight: 500; } p { font-family: "freight-sans-pro",sans-serif; font-weight: 500; line-height:1.4; } p.lead { } /* Headers */ h1 { font-family: "freight-sans-pro",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing: 1px; font-size:2.5em; line-height:1.2; } h1.noCaps { text-transform:capitalize; line-height:1.2; } h2 { font-family: "freight-sans-pro",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing: 1px; } h3 { font-family: "freight-sans-pro",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing: 1px; } h4 { font-family: "freight-sans-pro",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing: 1px; } h5 { font-family: "freight-sans-pro",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing: 1px; } h6 { font-family: "freight-sans-pro",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing: 1px; } h1 small { } h2 small { } h3 small { } h4 small { } h5 small { } h6 small { } hr { } ul { } ul li { } ol { } ol li { } dl { } dl dt { } blockquote { margin: 2em -4em 2em -2em; background: #000000; padding: 2em 4em; text-align: center; background-size: 16px 14px; background-image: repeating-linear-gradient(60deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 2px, transparent 0, transparent 7px); } blockquote p { font-size: 125%; font-style: italic; color:#ffffff; margin:auto; } blockquote p:before { content:open-quote; } blockquote p:after { content:close-quote; } blockquote cite { } strong { font-weight:600; } /* Mobile */ @media only screen and (max-width: 40em) { h1 { font-size:1.5em; } } /* ------------------------------------------------------------ *\ Icons \* ------------------------------------------------------------ */ @font-face { font-family: 'NaspaFirstGen'; src: url('/css/icons/icons.eot'); src: url('/css/icons/icons.eot?#iefix') format('embedded-opentype'), url('/css/icons/icons.woff2') format('woff2'), url('/css/icons/icons.woff') format('woff'), url('/css/icons/icons.ttf') format('truetype'), url('/css/icons/icons.otf') format('opentype'); font-weight: normal; font-style: normal; } .icon { font-weight:300; font-style:italic; } .icon:before { font-family: 'NaspaFirstGen'; font-size: 2.2em; font-weight: normal; font-style: normal; line-height: 1; text-rendering: auto; vertical-align: middle; } .cmCaseStudy .icon:before { content:'\f00c'; color:#F4A432; } .cmScholarlyArticle .icon:before { content:'\f00b'; color:#6DBE45; } .dmHTML .icon:before { content:'\f00d'; color:inherit; } .cmBook .icon:before { content:'\f009'; color:#F4A432; } .cmBlog .icon:before { content:'\f006'; color:#F4A432; } .cmEvent .icon:before { content:'\f005'; color:#6DBE45; } .cmInterview .icon:before { content:'\f004'; color:#1088AC; } .cmNews .icon:before { content:'\f007'; color:#6DBE45; } .cmCenterMediaMention .icon:before { content:'\f007'; color:#1088AC; } .cmResourceGuide .icon:before { content:'\f00a'; color:#0A0A0A } .cmPolicyUpdate .icon:before { content:'\f00a'; color:#0A0A0A } .cmReport .icon:before { content:'\f003'; color:#1088AC; } .cmProgram .icon:before { content:'\f00e'; color:#0A0A0A; } .cmAnnouncement .icon:before { content:'\f007'; color:#FFFFFF; } /* ------------------------------------------------------------ *\ Types \* ------------------------------------------------------------ */ .type { font-family: "freight-sans-pro",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing: 1px; font-size:125%; } .cmCaseStudy .type:before { content:'Case Study'; color:#F4A432; } .cmScholarlyArticle .type:before { content:'Scholarly Article'; color:#6DBE45; } .cmSuccessStory .type:before { content:''; color:#1088AC; } .cmResourceGuide .type:before { content:'Resource Guide'; color:#0A0A0A } .cmProgram .type:before { content:'Program'; color:#0A0A0A; } .cmBlog .type:before { content:'Blog'; color:#F4A432; } .cmEvent .type:before { content:'Event'; color:#6DBE45; } .cmInterview .type:before { content:'Interview'; color:#1088AC; } .cmNews .type:before { content:'News'; color:#6DBE45; } .cmCenterMediaMention .type:before { content:'Center Media Mention'; color:#1088AC; } .cmPolicyUpdate .type:before { content:'Policy'; color:#0A0A0A } .cmReport .type:before { content:'Report'; color:#1088AC; } .cmBook .type:before { content:'Book'; color:#F4A432; } /* Mobile */ @media only screen and (max-width: 40em) { .type { font-size:90%; } } /* ------------------------------------------------------------ *\ Palette \* ------------------------------------------------------------ */ .orange { color:#F4A432; } .orangeBorder {border-bottom: solid 6px #F4A432 !important; } div.orange { color:inherit; background-color:#F4A432 !important; } section.orange { color:inherit; background-color:#F4A432 ; } .green { color:#6DBE45; } .greenBorder { border-bottom: solid 6px #6DBE45 !important; } div.green { color:inherit; background-color:#6DBE45 !important; } section.green { color:inherit; background-color:#6DBE45 ; } .blue { color:#1088AC; } .blueBorder { border-bottom: solid 6px #1088AC !important; } div.blue { color:inherit; background-color:#1088AC !important; } section.blue { color:inherit; background-color:#1088AC; } .black { color:#0A0A0A; } .blackBorder { border-bottom: solid 6px #0A0A0A !important; } div.black { color:inherit; background-color:#0A0A0A !important; } section.black { color:inherit; background-color:#0A0A0A; } footer.black { color:#ffffff; background-color:#0A0A0A; } .darkGrey { color:#191919; } .darkGreyBorder { border-bottom: solid 6px #191919 !important; } div.darkGrey { color:inherit; background-color:#191919 !important; } section.darkGrey { color:inherit; background-color:#191919; } .lightGrey { color:#9B9B9B; } div.lightGrey { color:inherit; background-color:#9B9B9B; } section.lightGrey { color:inherit; background-color:#9B9B9B; } div.ultraLightGrey { color:inherit; background-color:#efefef; } section.ultraLightGrey { color:inherit; background-color:#efefef; } section.ultraLightGrey + section.ultraLightGrey { color:inherit; background-color:#ffffff; } .white { color:#ffffff; } div.white { color:inherit; background-color:#ffffff; } section.white { color:inherit; background-color:#ffffff; } /* ------------------------------------------------------------ *\ Elements \* ------------------------------------------------------------ */ a { font-family: "freight-sans-pro",sans-serif; font-weight: 600; } .button, .button.hollow form { text-transform:uppercase; color:#1088AC; border:solid 2px #1088AC; background:transparent; transition:all 0.25s ease; padding: 0.85em 4em; } .button.collapse { padding: 0.85em 1em; } .button.white { color:#ffffff; border:solid 2px #ffffff; } .button.black { background:#ffffff; color:#0A0A0A; } .button.green { border-color:#6DBE45; color:#6DBE45; } .button.fill { background:#1088AC; border:none; color:#ffffff; } .button.border-orange { border-color:#F4A432; } input[type='text'] { } input[type='checkbox'] { } input[type='date'] { } input[type='datetime'] { } input[type='datetime-local'] { } input[type='email'] { } input[type='file'] { } input[type='month'] { } input[type='number'] { } input[type='password'] { } input[type='radio'] { } input[type='search'] { } input[type='tel'] { } input[type='time'] { } input[type='url'] { } input[type='week'] { } textarea { } select { color:#808080; } /* large hover */ @media screen and (min-width: 64em) { .button:hover { background:#1088AC; color:#ffffff; } .button.white:hover { background:#ffffff; color:#0A0A0A; } .button.black:hover { background:#0A0A0A; color:#ffffff; } .button.border-orange:hover { background-color:#F4A432; color:#ffffff; } .button.green:hover { background:#6DBE45; color: #ffffff; } } /* Mobile */ @media only screen and (max-width: 40em) { } /* ------------------------------------------------------------ *\ Main Nav \* ------------------------------------------------------------ */ .navContainer { min-height:185px; } .main-nav { font-size: 0.8125rem; font-weight: bold; z-index: 2; position: relative; width: 100%; padding:4px; border-top:solid 4px #F4A432; border-bottom:solid 1px #ccc; } .main-nav:before,.main-nav:after { content: ' '; display: table; } .main-nav, .main-nav ul, .title-bar { background:#ffffff; } .main-nav .title { color: #8a8a8a; padding: 10px; padding-left: 15px; font-size: 0.8em; } .main-nav ul:first-child { float: left; } .main-nav ul:last-child { float: right; } .main-nav .menu a { color: #0A0A0A; background: transparent; padding: 1em 1.3em; font-weight:700; text-transform:uppercase; transition:color 0.25s ease; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .main-nav .menu li:not(:nth-child(7)) { border-right: 1px solid #cccccc; } .main-nav .menu a:hover:not(.button), .main-nav .menu a:focus { background: #ffffff; color:#F4A432; } .main-nav .menu a.is-page { color:#F4A432; } /* Dropdowns */ .title-bar .dropdown.menu a,.main-nav .dropdown.menu a { background: #ffffff; } .main-nav .dropdown.menu > li.is-dropdown-submenu-parent > a { padding-right: 2em !important; } .main-nav .dropdown.menu > li.is-dropdown-submenu-parent > a:after { content: ''; display: block; width: 0; height: 0; border: inset 5px; border-color: #e6e6e6 transparent transparent; border-top-style: solid; border-bottom-width: 0; right: 12px; margin-top: -2px; } .main-nav .dropdown.menu .submenu { border: 0; } /* Pips for drilldowns */ .main-nav .is-drilldown-submenu-parent > a:after { content: ''; display: block; width: 0; height: 0; border: inset 5px; border-color: transparent transparent transparent #e6e6e6; border-left-style: solid; border-right-width: 0; right: 12px; margin-top: -2px; } .main-nav .js-drilldown-back > a::before { content: ''; width: 0; height: 0; border: inset 6px; border-color: transparent #e6e6e6 transparent transparent; border-right-style: solid; border-left-width: 0; display: inline-block; vertical-align: middle; margin-right: 0.75rem; } .stickynav { z-index: 1000; } /* header bar */ .headerbar { background:#0A0A0A; display:flex; flex-direction:row; } .headerbar a.dropnav { color: #ffffff; text-transform: uppercase; font-size: 0.8em; align-self: flex-end; margin-right: 2em; padding: 1em 0; position: relative; } .headerbar a.dropnav:last-child { margin-right:0; } .headerbar a.dropnav:not(:last-child):after { content: ''; height: 50%; position: absolute; width: 1px; background-color: #404040; right: -1em; } .headerbar .barleft { display:flex; flex-direction:row; } .headerbar .barcenter { text-align: center; padding:0.5em 0; } .headerbar .barcenter img { width:315px; min-width:315px; max-width:315px; } .headerbar .barright { text-align:right; display:flex; flex-direction:row; justify-content:flex-end; } .headerbar .barright a:first-child { margin-right:0; } .headerbar .barright .navSearch { color: #ffffff; font-size: 0.8em; align-self: flex-end; padding: 0.25em 0 0.25em 0; position: relative; margin: 0 0 0 1em; } .headerbar .barright .navSearch:before { content: "\f002"; transition:all 0.25s ease-in-out; color: #ffffff; font-family: 'FontAwesome'; font-size: inherit; font-weight: normal; font-style: normal; line-height: 1; text-rendering: auto; vertical-align: middle; position: absolute; top: 50%; transform: translateY(-50%); left: 0.75em; } .headerbar .barright .navSearch input { background: #000000; color: #ffffff; border-color: #000000; font-family: "freight-sans-pro",sans-serif; font-weight: 600; margin: 0; width: 90px; font-size: 1em; padding: 0 0 0 2.25em; transition:all 0.25s ease-in-out; height: 39px; line-height: 39px; } .headerbar .barright .navSearch input:focus { width:200px; border-color:#ffffff; } .headerbar .barright .navSearch input::placeholder { color:#ffffff; font-size:1em; transition:all 0.25 ease-in-out; } /* tagline bar */ .taglinebar { height:37px; transition:height 0.25s ease-in-out; } .taglinebar p { margin:0 auto 0.5em auto; text-transform:uppercase; } /* Scroll Intent */ [scroll-intent="up"] .navContainer { } [scroll-intent="down"] .navContainer { } /* collapseing */ .navContainer.is-stuck .taglinebar { height:0px; } #subNav { width: 100%; padding:0; text-align: center; border-top: solid 1px #fff; } .subNav { display:flex; } .subNav .column { position:relative; display:flex; flex:1; } .subNav .column:not(:last-child):after { content:''; position:absolute; right:0; width:1px; background-color:rgba(255,255,255,0.5); height:100%; } .subNav a { color:#ffffff; margin:auto; padding: 0.5em 0; } .subNav a.active { font-weight:900; } /* Mobile */ @media only screen and (max-width: 40em) { .navContainer { min-height:0; z-index:1000; } .title-bar, .main-nav { background:#0A0A0A; } .main-nav ul { float: none; width: 100%; max-width: 100%; background:#0A0A0A; } .main-nav .menu li { display:inline-block !important; width:50%; } .main-nav .menu li:not(:last-child) { border-right: none; } .main-nav .menu li a { color:#ffffff; background:#3a3939; outline: solid 2px #0A0A0A; text-align:center; } .main-nav .menu a:hover:not(.button), .main-nav .menu a:focus { background: #3a3939; text-decoration:underline; } .main-nav .menu li.tert { width: 25%; } .main-nav .menu li.tert a { background:#0A0A0A; outline: solid 2px #3a3939; color:#808080; } .main-nav .is-drilldown { min-height:0 !important; } .headerbar { padding: 0.5em; text-align: center; } } /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ footer { padding: 1em 0 0 0; margin-top: 3em; } footer label h6 { line-height:2.5625; margin:0; } footer #emailSignUpForm { display:inline-flex; vertical-align:super; width:100%; } footer .footerSocial { margin-top:2em; } footer .footerSocial a, footer .footerSocial span { margin:auto 0.5em; color:#ffffff; } footer .footerCopy { margin-top:2em; padding:0.75em 0.5em 0 0.5em; } footer .footerCopy a { color:#ffffff; padding:0 0.5em; } footer .footerCopy a:not(:last-child):after { content:'|'; padding-left: 1em; } footer .inputHolder { position:relative; } footer .inputHolder .g-recaptcha { position: relative; vertical-align: middle; opacity: 0; transition: opacity 0.25s ease-in-out; right: 0; top: 0; z-index: -1; } footer .inputHolder input:not(.button) { width: 30%; margin-bottom: 10px; display: inline-block; vertical-align: middle; margin-right: 10px; transition: all 0.25s ease-in-out; } footer .inputHolder input:not(.button):focus ~ .g-recaptcha, footer .inputHolder input:not(.button):active ~ .g-recaptcha, footer .inputHolder input:not(.button):valid ~ .g-recaptcha { opacity: 1; z-index: 1; } section.related + footer { margin-top:0; } /* Mobile */ @media only screen and (max-width: 40em) { footer label h6 { text-align:center; line-height:1.4; padding:1em; } footer .footerSocial { margin:2em auto 1em auto; } footer .footerSignUp { padding: 1rem; } footer input.button { width:100%; display: block; margin-top: 1.5rem;} } /* ------------------------------------------------------------ *\ Pagination \* ------------------------------------------------------------ */ .paginationContainer { display:block; width:100%; margin:auto !important; } .pagination-previous a:before,.pagination-previous.disabled:before { content: normal; } .pagination-previous a:after,.pagination-previous.disabled:after { content: ' PREV'; } .pagination-next a:before,.pagination-next.disabled:before { content: 'NEXT '; } .pagination-next a:after,.pagination-next.disabled:after { content: normal; } .pagination a,.pagination-previous.disabled,.pagination-next.disabled { outline: solid 1px #ccc; padding: 0.5em 1em; margin:auto 0.0625rem; } .pagination .current { padding: 0.5em 1em; } /* Mobile */ @media only screen and (max-width: 40em) { .pagination { margin: 1em 0; } .pagination form { width: auto; display: inline-block; } .pagination select { width: auto; } .pagination-previous { float: left; } .pagination-next { float: right; } .pagination-previous a:after,.pagination-previous.disabled:after { content: normal; } .pagination-next a:before,.pagination-next.disabled:before { content: normal; } .pagination li.show-for-small-only { display: inline-block !important; } } /* ------------------------------------------------------------ *\ Social Sharing \* ------------------------------------------------------------ */ .social.share { margin: 1em 0 0 0; text-align: center; } .social.share i { cursor:pointer; margin:0 0.25em; color: #fff; background: #1088AC; border-radius: 1000px; width: 2em; height: 2em; line-height: 2; } .social.share h6 { display:inline-block; margin-right:0.5em; } /* Mobile */ @media only screen and (max-width: 40em) { .social { position: relative !important; width: 100%; } .social .share { float: left; width: 25%; } } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ .stripes { background-image: repeating-linear-gradient(60deg, rgba(255,255,255,0.1), rgba(255,255,255,0.1) 2px, transparent 0, transparent 7px); background-size: 16px 14px; } .hubspot-embed { width:100%; max-width: 50%; float: right; } .hubspot-embed iframe { width: 100% !important; background-color: white; } /* Mobile */ @media only screen and (max-width: 40em) { } /* ------------------------------------------------------------ *\ Sections \* ------------------------------------------------------------ */ section { margin: 1.5em auto 1em auto; padding: 1.5em 1em 1.5em 1em; } section > .title { margin-bottom:1.5em; } section > .title h3 { max-width:50rem; margin-left:auto; margin-right:auto; } section > .title hr { margin:2.5em auto 0 auto; } section > .title + .intro { margin:-1.5em auto 1.5em auto; } section.featureSet { margin:0; padding:0; overflow:hidden; } section.featureSet:after { content: ''; clear: left; } section.featureSet .tileCarousel { margin:0 auto 2em auto !important; } section.featureSet .tileCarousel.active + .dots { display:none; } section.featureSet .tileCarousel .container { padding:0; } section.featureSet .tileCarousel .container > .row { max-width:none; } section.stats { position:relative; padding:0; margin:0;} section.stats .tileCarousel { padding:0; max-width:none; } section.stats .tileCarousel + .dots { position:absolute; bottom:0; } section.stats .tileCarousel + .dots ul li { width: 15px; height: 15px; background-color: rgba(255,255,255,0.7); border:none; } section.stats .tileCarousel + .dots ul li.active { background-color: rgba(255,255,255,1); } section.researchAndPolicy .twoUpVertStack { display:flex; margin-bottom:2.5em; } section.researchAndPolicy .twoUpVertStack .textBlock { flex: 1 1 auto; padding:1.5em 2.5em 0.5em 2.5em; border-bottom:solid 6px #F4A432; } section.researchAndPolicy .twoUpVertStack .teasers { display:flex; flex: 1 1 auto; } section.researchAndPolicy .twoUpVertStack .teasers .blockGrid { display: flex; flex-direction: column; flex: 1 1 auto; margin:0 -0.9375rem; } section.related { margin: 1.5em auto 0 auto; padding: 1.5em 1em 2.5em 1em; } section.centerLeadership { padding:1.5em 0 2.5em 0; } section.centerLeadership .tabs { display:table; width:100%; border:0; table-layout:fixed; background-color:transparent; } section.centerLeadership .tabs li { display:table-cell; width:33.33333%; float:none; text-align:center; border:0; font-family: "freight-sans-pro",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing: 1px; } section.centerLeadership .tabs li a { background:transparent; color:#cccccc; font-size:1em; } section.centerLeadership .tabs li.is-active a { background:transparent; color:#ffffff; } section.centerLeadership .tabs-content { border:0; } section.centerLeadership .tabs-content h5 { margin:2em auto 1em auto; } section.feed .blockGrid { justify-content:left; } section.centerLeadership .blockGrid { justify-content:center; } section.promo { margin: 0 auto; border-bottom: solid 4px orange; } section.faq { padding:4.5em 1em 4em 1em; margin:0; } section.faq + section + section { background-color:#efefef; margin:0 auto 0 auto; padding:4.5em 1em 4em 1em; } /* UGH */ .sticky-container + section.standard { background-color:#efefef; margin:0 auto 0 auto; padding:4.5em 1em 2.5em 1em; } .gatedSection + .related { margin-top: 0; } .gatedSection::after { content:normal !important; } /* tablet */ @media screen and (min-width: 40em) and (max-width: 63.9375em) { section.featureSet .tileCarousel.active + .dots { display:block; } } /* Mobile */ @media only screen and (max-width: 40em) { section.featureSet .tileCarousel.active + .dots { display:block; } section.stats { background:#0A0A0A; } section.researchAndPolicy .twoUpVertStack { display:block; margin-bottom:auto; } section.researchAndPolicy .twoUpVertStack .textBlock { text-align:center; } section.researchAndPolicy .twoUpVertStack .teasers { display: flex; flex: 1 1 auto; } section.researchAndPolicy .twoUpVertStack .teasers .blockGrid { flex-direction: row; flex: 1 1 auto; margin: 1em -0.625rem 2em -0.625rem; } section.feed .blockGrid { flex-wrap: wrap; width: 100%; margin-bottom: 2.5em; padding-bottom: 2.5em; justify-content: normal; } section.centerLeadership .tabs { table-layout:auto; } .gatedSection .insertContent.image { max-width: none !important; float: none !important; padding: 0 !important; } } /* ------------------------------------------------------------ *\ Building Blocks \* ------------------------------------------------------------ */ /* cmBlockGrid */ .blockGrid { display:flex; flex-direction:row; margin-bottom: 3em; flex-wrap:wrap; justify-content:center; } /* Mobile */ @media only screen and (max-width:40em){ .blockGrid { display: flex; flex-wrap:nowrap; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; width: 100%; margin-bottom: 2.5em; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; padding-bottom: 2.5em; justify-content:normal; } .blockGrid .teaser { display: inline-flex; position: relative; vertical-align: middle; float: none !important; width: 90%; clear: none !important; flex: 1 0 auto; } .blockGrid .teaser .wrapper h5, .blockGrid .teaser .wrapper h6, .blockGrid .teaser .wrapper p, .blockGrid .teaser a .text h5, .blockGrid .teaser a .text p{ white-space:pre-line; } .feed .blockGrid .teaser { width:100%; } } /* cmCarouselTile */ .tileCarousel { margin: 0 auto; background: inherit; } .tileCarousel.active { overflow: hidden; position: relative; padding:0.5em 0.5em 0 0.5em; } .tileCarousel.active .container { width: 100%; margin-left: 0; transition: margin-left 0.25s ease-in-out; background: inherit; } .tileCarousel .container > .row { display:flex; max-width: none !important; background: inherit; } .tileCarousel.active .container > .row .column { clear: none !important; display:flex; flex-direction:column; } .tileCarousel.active .arrow { display:none; font-size: 1.5em; position: absolute; top: 0; color: #2c3840; cursor: pointer; background: inherit; height: 80%; width: 1.5rem; text-align: center; z-index: 4; } .tileCarousel.active .arrow.inactive { color: #ccc; cursor: default; } .tileCarousel.active .arrow.left { float: left; left: 0; } .tileCarousel.active .arrow.right { float: right; right: 0; } .tileCarousel.active .arrow i { position: relative; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .tileCarousel.active.arrows .arrow { display:block; } .tileCarousel.active.expanded { padding:0; margin: 1em 0 2em 0; } .tileCarousel.active.expanded .container { padding:0; } .tileCarousel.active.expanded .container > .row .column { padding:0; } .tileCarousel + .dots { width: 100%; text-align: center; margin:0 auto 0.5em auto; display:none; } .tileCarousel + .dots ul { position: relative; display: inline-block; margin: 0; padding: 0; list-style: none; cursor: default; } .tileCarousel + .dots ul li { position: relative; display: block; float: left; margin: 0 2px; width: 16px; height: 16px; background-color: #cccccc; border-radius: 1000px; border:solid 2px #cccccc; cursor:pointer; } .tileCarousel + .dots ul li.active { background-color: #ffffff; } .tileCarousel.active.dots + .dots { display:block; padding:1.5em } /* Mobile */ @media only screen and (max-width: 40em) { .tileCarousel.active { padding: 0.5em 2em 1em 0em; } .tileCarousel.active .arrow { display: none; } } /* cmTabBlocks */ .cmTabBlocks { margin-bottom: 2em; } .cmTabBlocks .tabs { border: none; background: none; } .cmTabBlocks .tabs-title > a { border-top: 1px solid #d3d4ce; border-right: 1px solid #d3d4ce; border-left: 1px solid #d3d4ce; border-bottom: 1px solid #d3d4ce; background: #E8F2F4; padding: 0.85em 1em; font-family: "freight-sans-pro",sans-serif; color: #222222; text-transform: uppercase; font-size: 1em; font-weight: 600; } .cmTabBlocks .tabs-title.is-active > a { background: #fff; border-bottom: 1px solid #fff; position: relative; } .cmTabBlocks .tabs-title > a:hover { background: #DDE9ED; } .cmTabBlocks .tabs-title.is-active > a:after { content: ""; border-bottom: 2px solid #A82B7C; width: calc(100% - 1.7em); height: 1px; position: absolute; left: 0.85em; bottom: 0.5em; } .cmTabBlocks .tabs-title.is-active > a:hover { background: #ffffff; } .cmTabBlocks .tabs-content { border-top: 1px solid #d3d4ce; border-bottom: 1px solid #d3d4ce; border-right: 1px solid #d3d4ce; border-left: 1px solid #d3d4ce; margin-top: -1px; padding: 1em; } .cmTabBlocks .tabs-content .title { margin-bottom: 2em; } /* Mobile */ @media only screen and (max-width: 40em) { .cmTabBlocks { padding: 0; margin-left: -0.9375rem; width: calc(100% + 1.875rem); } .cmTabBlocks > .column { padding-left: 0; padding-right: 0; } .cmTabBlocks a.accordion-title { height: 90px; color: #222222; font-size: 1.2em; padding: 0.5rem 1rem; background-color: #EFEEEC; border: none; border-top: solid 1px #ffffff; border-bottom-color: #ffffff !important; } .cmTabBlocks a.accordion-title[aria-selected="true"] { background-color: #DADAD7; } .cmTabBlocks a.accordion-title > .icon { float: left; overflow: hidden; } .cmTabBlocks a.accordion-title > .text { position: relative; top: 50%; transform: translateY(-50%); } .cmTabBlocks .accordion-content { text-align: center; border: none; } .cmTabBlocks .accordion-content .title { margin-bottom: 2em; } .cmTabBlocks .accordion-content .row + .row { margin-right: auto; margin-left: auto; } .cmTabBlocks .accordion-content .teaser { padding-right: 0; padding-left: 0; margin-bottom: 1.5em; } .cmTabBlocks .accordion-content .teaser > a { display: block; width: 100%; height: 100%; text-align: left; overflow: hidden; padding-bottom: 1px; } .cmTabBlocks .accordion-content .teaser > a > p.image { display: inline-block; max-width: 40%; margin: 0 0 0 -15%; vertical-align: middle; } .cmTabBlocks .accordion-content .teaser > a > .label { margin: 0 0.5em; transform: none; } .cmTabBlocks .accordion-content .teaser > a > p.lead { display: inline-block; max-width: calc(75% - 1em); margin: 22px 0 0 0.5em; vertical-align: top; white-space: pre-line; } } /* cmFeaturedSet */ .featuredCarousel { position: relative; max-width: 85rem; padding-right: 5px; padding-left: 5px; } .featuredCarousel.expanded { max-width: 120rem; padding-right: 1px; padding-left: 1px; padding-top: 1px; } .featuredCarousel > .column { float: left; padding:0; } .featuredCarousel > .column p { margin-bottom: 0.5em; } .featuredCarousel > .column .txtContainer { width: 100%; height: 100%; position: relative; overflow: hidden; background:#efefef; padding-bottom:100%; outline:solid 1em #ffffff; } .featuredCarousel > .column .txtContainer .text { position: absolute; bottom: 1em; width: 100%; font-size: 1.2em; padding: 30% 1em 0.3em 1em; } /* one item */ .featuredCarousel > .column:first-child:nth-last-child(1) { width: 100%; } /* two items */ .featuredCarousel > .column:first-child:nth-last-child(2), .featuredCarousel > .column:first-child:nth-last-child(2) ~ .column { width: 50%; } /* three items */ .featuredCarousel > .column:first-child:nth-last-child(3), .featuredCarousel > .column:first-child:nth-last-child(3) ~ .column { width: 33.3333%; float: right; clear: right; } .featuredCarousel > .column:first-child:nth-last-child(3) ~ .column:nth-child(3) { width: 66.6667%; display: inline-block; float: none; } /* four items */ .featuredCarousel > .column:first-child:nth-last-child(4), .featuredCarousel > .column:first-child:nth-last-child(4) ~ .column { width: 40%; float: left; } .featuredCarousel > .column:first-child:nth-last-child(4) ~ .column:nth-child(4) { display: inline-block; float: none; } .featuredCarousel > .column:first-child:nth-last-child(4) ~ .column:nth-child(3), .featuredCarousel > .column:first-child:nth-last-child(4) ~ .column:nth-child(4) { float: right; clear: right; width: 20%; } /* five items */ .featuredCarousel > .column:first-child:nth-last-child(5) { width: 100%; } .featuredCarousel > .column:first-child:nth-last-child(5) .txtContainer { padding-bottom:50%; } .featuredCarousel > .column:first-child:nth-last-child(5) ~ .column { width: 25%; } .featuredCarousel + .mobileDots { width: 100%; text-align: center; } .featuredCarousel + .mobileDots ul { position: relative; display: inline-block; margin: 0; padding: 0; list-style: none; cursor: default; } .featuredCarousel + .mobileDots ul li { position: relative; display: block; float: left; margin: 0 2px; width: 6px; height: 6px; background-color: rgba(0,0,0,0.5); border-radius: 1000px; } .featuredCarousel + .mobileDots ul li.active { background-color: rgba(0,0,0,1); } /* Tablet */ @media screen and (max-width: 64em) { } /* Mobile switches to carousel */ @media only screen and (max-width: 40em) { .featuredCarousel, .featuredCarousel.expanded { padding: 0; width: 100%; max-width: none; transition: margin-left 0.25s ease-in-out; margin-left: 0; } .featuredCarousel > .column { clear: none !important; padding: 0 !important; } .featuredCarousel > .column:first-child:nth-last-child(1) { width: 100% !important; } .featuredCarousel > .column:first-child:nth-last-child(2), .featuredCarousel > .column:first-child:nth-last-child(2) ~ .column { width: 50% !important; } .featuredCarousel > .column:first-child:nth-last-child(3), .featuredCarousel > .column:first-child:nth-last-child(3) ~ .column { width: 33.33333% !important; } .featuredCarousel > .column:first-child:nth-last-child(4), .featuredCarousel > .column:first-child:nth-last-child(4) ~ .column { width: 25% !important; } .featuredCarousel > .column:first-child:nth-last-child(5), .featuredCarousel > .column:first-child:nth-last-child(5) ~ .column { width: 20% !important; } .featuredCarousel > .column .txtContainer { padding-bottom:100% !important; } .featuredCarousel > .column .txtContainer .text { padding: 30% 1em 1.25em 1em; text-align: center; } } /* ------------------------------------------------------------ *\ Accordian \* ------------------------------------------------------------ */ .accordion-title { font-size:inherit; color:#ffffff; border: 1px solid #404040; background-color: #020202; padding: 1.25rem 3.5rem 1.25rem 1rem; } .accordion-title:before { font-size: 2.5em; color: #ff9900; transition: transform 0.25s ease-in-out; top: 43%; line-height: 0; margin: 0; height: 0; } .accordion-title:hover, .accordion-title:focus { background-color: #404040; color:#ffffff; } .is-active > .accordion-title:before { content:'+'; transform:translateY(-50%) translateX(25%) rotate(45deg); } /* ------------------------------------------------------------ *\ CM Accordian (confusing I know, but this is the building blocks accordion) \* ------------------------------------------------------------ */ .cmAccordion { max-width: 60rem; } .cmAccordion .accordion-title { font-size:inherit; color:#000000; border: 1px solid #cccccc; background-color: #efefef; padding: 1.25rem 3.5rem 1.25rem 1rem; } .cmAccordion .accordion-title:before { font-size: 2.5em; color: #777777; transition: transform 0.25s ease-in-out; top: 43%; line-height: 0; margin: 0; height: 0; } .cmAccordion .accordion-title:hover, .cmAccordion .accordion-title:focus { background-color: #404040; color:#ffffff; } .cmAccordion .is-active > .accordion-title:before { content:'+'; transform:translateY(-50%) translateX(25%) rotate(45deg); } /* ------------------------------------------------------------ *\ insertContent \* ------------------------------------------------------------ */ .insertContent h5, .insertContent h6, .insertContent p { padding:0; margin:0; } .insertContent.image { max-width:60rem; margin:0 auto 1.5em auto; padding: 0 2.5em; } .insertContent.image img { max-height:300px; } .insertContent.image .creditCaption { margin:0 auto 0.5em 0; } .insertContent.image .creditCaption { border-left: solid 2px #ccc; margin: 0.5em 0 0 0; padding: 0.25em 0 0 0.5em; color: #808080; } .insertContent.image .creditCaption h6, .insertContent.image .creditCaption p { padding:0; margin:0; font-size:75%; } .insertContent.image.leftAlign { max-width:50%; float:left; padding:0 2.5em 0 0; } .insertContent.image.rightAlign { max-width:50%; float:right; margin:0 auto 0.5em 0; padding:0 0 0 2.5em; } .insertContent.image.rightAlign .creditCaption { border-left:none; border-right: solid 2px #ccc; margin: 0.5em 0 0 0; text-align: right; padding: 0.25em 0.5em 0 0; color: #808080; } .insertContent.expanded { max-width:none; margin:0 auto; padding:0; } .insertContent.expanded img { max-height:none; } /* Extra large */ @media screen and (min-width: 120em) { .insertContent.image { max-width:75rem; } } /* ------------------------------------------------------------ *\ drag me \* ------------------------------------------------------------ */ .active [data-drag-me] { position:relative; cursor:move; cursor:-moz-grab; cursor:-webkit-grab; cursor:grab; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000; -moz-perspective: 1000; -ms-perspective: 1000; perspective: 1000; } .active [data-drag-me]:active { cursor:-moz-grabbing; cursor:-webkit-grabbing; cursor:grabbing; transition:none !important; } .active [data-drag-me] img, .active [data-drag-me] a { -moz-user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; user-drag: none; user-select: none; } /* Mobile */ @media only screen and (max-width: 40em) { } /* ------------------------------------------------------------ *\ displayPageHome \* ------------------------------------------------------------ */ /* Mobile */ @media only screen and (max-width: 40em) { } /* ------------------------------------------------------------ *\ displayPageStandard \* ------------------------------------------------------------ */ /* Mobile */ @media only screen and (max-width: 40em) { } /* ------------------------------------------------------------ *\ displayPageContact \* ------------------------------------------------------------ */ #contactResponseMessage { display: none; } /* Mobile */ @media only screen and (max-width: 40em) { } /* ------------------------------------------------------------ *\ displayPageStandard cmInterview \* ------------------------------------------------------------ */ article.interview {} .cmQuestion { margin: 2.5em auto 2em auto; padding: 0 0.9375rem 2em 0.9375rem; border-bottom: dashed 1px #ccc; min-height: 6em; } .cmQuestion:last-child { margin:2.3em auto 0em auto; padding: 1em 0.9375rem 0em 0.9375rem; border-bottom:none; } .cmQuestion > .text { position:relative; } .cmQuestion > .text > .question { margin-bottom:1em; } .cmQuestion > .text > .question p { display:inline-block; color:#1088AC; vertical-align:middle; margin-bottom:0; font-size:145%; line-height: 1.4; max-width:calc(100% - 6em); } .cmQuestion > .text > .question > .topper { position: relative; display: inline-block; width: 6em; margin-right: 0.5em; vertical-align: middle; height: 6em; border-radius: 1000px; text-align: center; background-color: #1088AC; } .cmQuestion > .text > .question > .topper:before { content: 'Q:'; font-size: 3em; font-weight:bold; color: #ffffff; position: absolute; top: 47%; left: 54%; line-height: 1; transform: translateX(-50%) translateY(-50%); } .cmQuestion > .text > .answer p { font-size:115%; } .cmQuestion > .text > .question > .image { max-width: calc(60% - 6em); display: inline-block; float: right; padding-left: 2em; } .cmQuestion > .text > .question > .image + .topper + p { max-width: calc(40% - 6em); } /* Mobile */ @media only screen and (max-width:39.9375em) { .cmQuestion > .text > .question > .topper { width: 3em; vertical-align: top;height: 3em; } .cmQuestion > .text > .question > .topper:before { font-size: 1.5em; } } /* ------------------------------------------------------------ *\ displayPageGated cmReport \* ------------------------------------------------------------ */ .featured h2 { border-bottom:solid 4px #6DBE45; display: inline-block; margin-bottom: 1em; } .featured.intro { margin: auto; padding: 0; } .featured.intro .teaser { padding: 43.25% 0 0 0; position: relative; background-size: cover; background-position: center center; background-repeat: no-repeat; outline: solid 2px #ffffff; z-index: 1; display: flex; } .featured.intro .teaser:after { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-image: url(../css/images/first-gen-logo-overlay-blue.png); background-size: contain; background-repeat: no-repeat; pointer-events: none; } .featured.intro .teaser .text { width: 35%; padding: 2em 2em 1.2em 2em; background-color: rgba(2, 83, 109, 0.9); border-bottom: solid 6px #6DBE45; color: #ffffff; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .featured.intro .teaser .text h1 { line-height: 1.1; } .featured.intro .teaser .text img { align-self: center; } .featured.subnav .icons img { max-width: 150px; } .featured.subnav a { color: #000000; width: 100%; position: relative; display: block; } .featured.subnav a > img { opacity:1; transition:0.25s opacity ease; } .featured.subnav a:hover { color:#f7a521; transition:0.25s all ease; } .featured.subnav a:hover > img { opacity:0; } .featured.subnav a .overlay { position: absolute; width: 100%; text-align: center; opacity:0; transition:0.25s opacity ease; } .featured.subnav a:hover .overlay { opacity:1; } .featured.subnav .text p { font-size: 125%; margin-top: 2.5em; } .featured.fullreport { padding:2em 1em 4em 1em; margin-bottom: 0; position: relative; background-image: url(images/triangles_group1.png), url(images/triangles_group2.png), url(images/triangles_group3.png); background-position: left top, right top, bottom right; background-repeat: no-repeat, no-repeat, no-repeat; } .featured.fullreport.universal + section { margin-top: 0; } .featured.fullreport:after { content: ''; position: absolute; width: 2em; height: 2em; background: black; transform: rotate(45deg); bottom: -1em; left: 50%; margin-left: -1em; } .featured.fullreport.universal:after { content: normal; } .featured.fullreport p { font-size: 125%; } .featured.fullreport .insertContent { max-width: 40%; } .featured.fullreport .insertContent img { max-height:none; } .featured.fullreport .button { margin:1em 0.25em 0 0.25em; } .featured.keyfindings { margin-top: 0; padding-top: 3em; position: relative; } .featured.keyfindings:after { content: ''; position: absolute; width: 2em; height: 2em; background: #efefef; transform: rotate(45deg); bottom: -1em; left: 50%; margin-left: -1em; } .featured.keyfindings .teaser { text-align: center; } .featured.keyfindings .teaser img { max-width: 150px; } .featured.powerpoint { background-image:url(images/blue-triangle_10x10.png); } .featured.powerpoint .widescreen { padding-bottom:60.3%; } .featured.pressrelease { margin-bottom: 0; } .featured.pressrelease p { font-size: 125%; } .featured + .related { margin-top: 0; padding-top: 2em; } .featured + .related h3 { border-bottom:solid 4px #6DBE45; display: inline-block; margin-bottom: 1em; } /* Mobile */ @media only screen and (max-width:39.9375em) { .featured.intro .teaser:after { content:normal; } .featured.intro .teaser .text { width: 100%; position: relative; top: auto; bottom: 0; transform: none; } .featured.subnav a h5 { font-size:0.65em; } .featured.subnav .icons { border-bottom: solid 1px #000; padding-bottom: 1em; } .featured.subnav .icons img { max-width:50px; } .featured.subnav .text p { font-size: 100%; margin-top: 1em; } .featured.fullreport p { font-size: 100%; } .featured.fullreport .insertContent { max-width:50%; } .featured.fullreport .button { max-width:none; width:100%; } .featured.keyfindings .teaser { box-shadow: 0px 2px 5px rgba(0,0,0,0.15); outline: solid 1em #efefef; background-color: #ffffff; } .featured.keyfindings .teaser .text { padding:0 2em; } .featured.pressrelease p { font-size: 100%; } } /* the gate */ .gated { position: fixed; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); left: 0; z-index: 5; display:none; } .gated.active { opacty: 1; } .gated .gate { position: absolute; width: 100%; top: 50%; transform: translateY(-50%); } .gate .formHolder { text-align: center; padding: 3em 2em 1em 2em; border-top: solid 4px #0e88ab; outline: solid 1em #ffffff; position: relative; } .gate .formHolder .close-button:hover { color: #ffffff; } .gate .formHolder form input:nth-child(1) { max-width:calc(50% - 0.5em); float:left; } .gate .formHolder form input:nth-child(2) { max-width:calc(50% - 0.5em); float:right; } .gate .formHolder form a, .gate .formHolder form input[type="submit"] { font-family: "freight-sans-pro",sans-serif; font-weight: 600; padding: 0.85em; border: solid 2px #1088AC; width: 100%; } .gate .formHolder form a { float:left; max-width:calc(50% - 0.5em); } .gate .formHolder form input[type="submit"] { float:right; max-width:calc(50% - 0.5em); } /* Mobile */ @media only screen and (max-width:39.9375em) { .gate .formHolder form a { float:none; max-width:100%; } .gate .formHolder form input[type="submit"] { float:none; max-width:100%; } } /* ------------------------------------------------------------ *\ displayPageConference cmEvent \* ------------------------------------------------------------ */ .featured.introText p { font-size: 125%; } .featured.about { padding:2em 1em 4em 1em; margin-bottom: 0; position: relative; background-image: url(images/triangles_group1.png), url(images/triangles_group2.png), url(images/triangles_group3.png); background-position: left top, right top, bottom right; background-repeat: no-repeat, no-repeat, no-repeat; } .featured.about:after { content: ''; position: absolute; width: 2em; height: 2em; background: black; transform: rotate(45deg); bottom: -1em; left: 50%; margin-left: -1em; } .featured.about h5 { color: #ffffff; } .featured.about p { font-size: 125%; color:#ffffff; } .featured.about ul li { font-size: 90%; color:#49c226; } .featured.call-for-programs { margin-top: 0; padding-top: 3em; position: relative; } .featured.call-for-programs p { font-size: 125%; } .featured.schedule p { font-size: 125%; text-align:center; } .featured.pre-conference { padding:2em 1em 4em 1em; margin-bottom: 0; position: relative; background-image: url(images/triangles_group1.png), url(images/triangles_group2.png), url(images/triangles_group3.png); background-position: left top, right top, bottom right; background-repeat: no-repeat, no-repeat, no-repeat; } .featured.pre-conference:after { content: ''; position: absolute; width: 2em; height: 2em; background: black; transform: rotate(45deg); bottom: -1em; left: 50%; margin-left: -1em; } .featured.pre-conference h5 { color:#ffffff; } .featured.pre-conference p { font-size: 125%; color:#ffffff; } .featured.registration p { font-size: 125%; } .featured.venue p { font-size: 125%; } /* Mobile */ @media only screen and (max-width:39.9375em) { .featured.introText p { font-size: 100%; } .featured.about p { font-size: 100%; } .featured.call-for-programs p { font-size: 100%; } .featured.schedule p { font-size: 100%; text-align:left; } .featured.pre-conference p { font-size: 100%; } .featured.registration p { font-size: 100%; } .featured.venue p { font-size: 100%; } } /* ------------------------------------------------------------ *\ displayPageFirstForward cmProgram \* ------------------------------------------------------------ */ .featured.first-forward.intro .text.stripes { width:45%; display:flex; flex-direction:row; } .featured.first-forward.intro .text.stripes .logo-badge { max-width:300px; margin-right:1em; } .featured.introText p { font-size: 125%; } .featured.about-ff { padding:2em 1em 4em 1em; } .featured.about-ff p { font-size: 125%; } .featured.about-ff ul li { font-size: 90%; color:#49c226; } .featured.eligibility { margin-top: 0; padding-top: 3em; position: relative; } .featured.eligibility p { font-size: 125%; color:#0a0a0a; } .featured.eligibility ul li { font-size: 90%; color:#49c226; } .featured.benefits p { font-size: 125%; color:#0a0a0a; } .featured.benefits ul li { font-size: 90%; color:#49c226; } .featured.requirements { padding:2em 1em 4em 1em; margin-bottom: 0; position: relative; background-image: url(images/triangles_group1.png), url(images/triangles_group2.png), url(images/triangles_group3.png); background-position: left top, right top, bottom right; background-repeat: no-repeat, no-repeat, no-repeat; } .featured.requirements:after { content: ''; position: absolute; width: 2em; height: 2em; background: #0A0A0A; transform: rotate(45deg); bottom: -1em; left: 50%; margin-left: -1em; } .featured.requirements h5 { color:#ffffff; margin-bottom: 1em; } .featured.requirements h6 { color:#ffffff; } .featured.requirements p { font-size: 125%; color:#ffffff; } .featured.requirements a p { margin-bottom:0; font-weight:bold; } .featured.requirements ul li { font-size:90%; color:#49c226; } .featured.requirements .accordion-content { background:black; border:none; } .featured.application p { font-size: 125%; } .featured.leadership p { font-size: 125%; } @media screen and (max-width: 64em) { .featured.first-forward.intro .text.stripes { width:100%; z-index: 2; top: auto; bottom: 0; transform: none; } } /* Mobile */ @media only screen and (max-width:39.9375em) { .featured.introText p { font-size: 100%; } .featured.about-ff p { font-size: 100%; } .featured.eligibility p { font-size: 100%; } .featured.benefits p { font-size: 100%; } .featured.requirements p { font-size: 100%; } .featured.application p { font-size: 100%; } .featured.leadership p { font-size: 100%; } } /* ------------------------------------------------------------ *\ displayPageTemplate cmReport | cmEvent \* ------------------------------------------------------------ */ .template h3 { border-bottom:solid 4px #6DBE45; display: inline-block; margin-bottom: 1em; } .template p { font-size: 125%; } .template a.button { margin: 1rem auto; } .template .insertContent.image { max-width: 40%; } .template .insertContent.image img { max-width: 100%; max-height: none; } .template .insertContent.image ~ p { text-align: left; } /* .template .statBlock { width:100%; text-align: center; } .template .statBlock h2 { display: none; } .template .statBlock img { max-width: 150px; } .template .statBlock .imageBlock { display: none; } .template .teaser .text { background-color: #ffffff; } */ .template .subnav .icons img { max-width: 130px; } .template .subnav a { color: #000000; width: 100%; position: relative; display: block; } .template .subnav a > img { opacity:1; transition:0.25s opacity ease; } .template .subnav a:hover { color:#f7a521; transition:0.25s all ease; } .template .subnav a:hover > img { opacity:0; } .template .subnav a .overlay { position: absolute; width: 100%; text-align: center; opacity:0; transition:0.25s opacity ease; } .template .subnav a:hover .overlay { opacity:1; } .template .subnav a h5 { font-size:1.15rem; } .template .subnav .text p { font-size: 125%; margin-top: 2.5em; } section.black { background-color: #0A0A0A; } section.black h2, section.black h3, section.black h4, section.black h5, section.black h6, section.black p, section.black ul { color:#ffffff; } section.black-triangles h2, section.black-triangles h3, section.black-triangles h4, section.black-triangles h5, section.black-triangles h6, section.black-triangles p, section.black-triangles ul { color:#ffffff; } section.black-triangles { background-color: #0A0A0A; padding:2em 1em 1em 1em; margin-bottom: 0; position: relative; background-image: url(images/triangles_group1.png), url(images/triangles_group2.png), url(images/triangles_group3.png); background-position: left top, right top, bottom right; background-repeat: no-repeat, no-repeat, no-repeat; } section.black-triangles:after { content: ''; position: absolute; width: 2em; height: 2em; background: #0A0A0A; transform: rotate(45deg); bottom: -1em; left: 50%; margin-left: -1em; } section.grey { background-color: #efefef; margin-bottom:0; } section.grey h3 { color:#0A0A0A; } section.grey p { color:#0A0A0A; } section.blue-triangles { background-color:#ffffff; background-image:url(images/blue-triangle_10x10.png); } section.black + section.grey, section.black + section.black-triangles, section.black + section.black, section.black + section.blue-triangles, section.grey + section.grey, section.grey + section.black-triangles, section.grey + section.black, section.grey + section.blue-triangles, section.black-triangles + section.grey, section.black-triangles + section.black-triangles, section.black-triangles + section.black, section.black-triangles + section.blue-triangles section.blue-triangles + section.grey, section.blue-triangles + section.black-triangles, section.blue-triangles + section.black, section.blue-triangles + section.blue-triangles { margin-top: 0; padding-top: 3em; margin-bottom:0; } section.black + footer, section.grey + footer, section.black-triangles + footer, section.triangles + footer { margin-top:-1em; padding-top: 3em; border-top: solid 1px #777777; } .template .cmAccordion { margin-bottom:1.5rem; } .template .cmAccordion .accordion-title:before { color: #6DBE45; } .template .cmAccordion p { color:#000000 !important; } .template .cmAccordion ul, .template .cmAccordion li { color:#000000 !important; } @media only screen and (max-width: 40em) { .template .subnav a h5 { font-size:0.65em; } .template .subnav .icons { border-bottom: solid 1px #000; padding-bottom: 1em; } .template .subnav .icons img { max-width:50px; } .template .subnav .text p { font-size: 100%; margin-top: 1em; } } /* ------------------------------------------------------------ *\ Teasers \* ------------------------------------------------------------ */ .teaser { display:flex; flex:0 0 auto; margin-right:-1px; } .teaser > a:not(.button) { box-shadow: 0px 2px 5px rgba(0,0,0,0.15); outline: solid 1px #cccccc; } .teaser > a:not(.button), .teaser > .wrapper { display:flex; flex-direction:column; flex:1 1 auto; width:100%; } .teaser .image { position:relative; } .teaser .image:before { content:''; opacity:0; background:#0A0A0A; top:0; right:0; bottom:0; left:0; position:absolute; transition:opacity 0.5s ease; } .teaser .image:after { content: 'LEARN\00a0MORE'; opacity:0; font-size: 1em; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); color: #ffffff; border-bottom: solid 2px orange; left: 50%; transition:opacity 0.5s ease; } cmSuccessStory.teaser .image:after { content: 'READ\00a0STORY'; opacity:0; font-size: 1em; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); color: #ffffff; border-bottom: solid 2px orange; left: 50%; transition:opacity 0.5s ease; } .teaser .text { display:flex; flex-direction:column; flex:1 1 auto; padding: 1.5em 2em 1.5em 2em; color:#0A0A0A; } .teaser .text h5 { line-height:1.1; } .teaser .text p { margin-bottom:1.25em; } .teaser .text p + p { margin-bottom:0.25em; margin-top:auto; } .teaser .icon { margin:auto -2.2em -1.5em -2.2em; border-top: solid 1px #cccccc; padding:1em 1.2em 0.5em 1.2em; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; font-size:90%; } .teaser .icon:before { font-size:1.5em; padding-right:0.25em; } .teaser.cmReport .text, .teaser.cmSucessStory .text, .teaser.cmInterview .text, .teaser.cmCenterMediaMention .text { border-bottom:solid 6px #1088AC; } .teaser.cmNews .text { border-bottom:solid 6px #6DBE45; } .teaser.cmBlog .text, .teaser.cmBook .text, .teaser.cmCaseStudy .text { border-bottom:solid 6px #F4A432; } .teaser.cmProgram .text, .teaser.dmHTML .text, .teaser.cmPolicyUpdate .text, .teaser.cmResourceGuide .text { border-bottom:solid 6px #0A0A0A; } .teaser.cmScholarlyArticle .text, .teaser.cmEvent .text { border-bottom:solid 6px #6DBE45; } .featureSet .teaser { padding:0; background-size:cover; background-position:center center; background-repeat:no-repeat; outline:solid 2px #ffffff; z-index:1; display:flex; } .featureSet .teaser a { outline:none; box-shadow:none; } .featureSet .teaser .icon { display: inline-block; border-top: none; margin: auto auto 0 0; padding: 0; vertical-align: middle; line-height: 1.4; float: left; } .featureSet .teaser .icon:before { color:#ffffff; } .featureSet .teaser .text { outline: none; flex:1 1 auto; padding:2em 2em 0 2em; } .featureSet .teaser.leads:nth-child(1) { display:none !important; } .featureSet .teaser.leads:nth-child(odd) { background-image:none !important; } .featureSet .teaser.cmReport .text, .featureSet .teaser.cmInterview .text { background-color:rgba(16, 136, 172, 0.9); color:#ffffff; } .featureSet .teaser.cmNews .text, .featureSet .teaser.cmEvent .text { background-color:rgba(109, 190, 69, 0.9); color:#ffffff; } .featureSet .teaser.cmBlog .text, .featureSet .teaser.cmBook .text, .featureSet .teaser.cmCaseStudy .text { background-color:rgba(244, 164, 50, 0.9); color:#ffffff; } .featureSet .teaser.cmProgram .text, .featureSet .teaser.dmHTML .text, .featureSet .teaser.cmPolicyUpdate .text { background-color:rgba(10,10,10,0.9); color:#ffffff; } .featureSet .teaser .text.blue { background-color:rgba(16, 136, 172, 0.9) !important;} .featureSet .teaser .text.green { background-color:rgba(109, 190, 69, 0.9) !important;} .featureSet .teaser .text.orange { background-color:rgba(244, 164, 50, 0.9) !important;} .featureSet .teaser.leads .text { border-bottom:none; } .featureSet .teaser.leads > a { display:flex; flex-direction:column; flex:1 1 auto; } .featureSet .teaser.leads:nth-child(even) .image { display:none; } .featureSet .teaser.leads:nth-child(even) .text { background-image:none; } .featureSet .teaser.leader { padding-top:43.25%; position:relative; } .featureSet .teaser.leader > a { position:absolute; top:0; right:0; bottom:0; left:0; } .featureSet .teaser.leader:after { content:''; position:absolute; width:100%; height:100%; top:0; left:0; right:0; bottom:0; background-image:url(../images/first-gen-logo-overlay.png); background-size:contain; background-repeat:no-repeat; pointer-events:none; } .featureSet .teaser.leader .text { width: 35%; padding: 2em 2.2em 0.1em 2.2em; background-color:rgba(10, 10, 10, 0.9); color: #ffffff; position: absolute; right: 0; top: 50%; transform: translateY(-50%); } .promo .teaser { padding:1em 3em 2.5em 3em; } .promo .teaser .text { align-self:center; } .promo .teaser .text p:last-child { margin:auto 0 0 0; } .promo .teaser .text p:last-child a { margin:0; } .stats .teaser .statContainer { display:flex; flex:1 1 auto; background:#0A0A0A; padding:0 0 0 2em; } .stats .teaser .statContainer .statBlock { padding:2em 2em 4em calc(50% - 37.5rem); } .stats .teaser .statContainer .statBlock img { max-width:150px; } .stats .teaser .statContainer .statBlock h2 { margin-bottom:1em; position:relative; } .stats .teaser .statContainer .statBlock h2:after { content: '\f008'; font-family: 'NaspaFirstGen'; width: 2.8em; height: 2.8em; border: solid 2px green; border-radius: 1000px; font-size: 35%; padding: 0.5em 0 0 0; vertical-align: middle; text-align: center; display: inline-block; margin: 0 0 0.2em 0.4em; } .stats .teaser .statContainer .statBlock p { display: inline-block; vertical-align: middle; width: calc(100% - 150px - 2em); margin-left: 1em; } .stats .teaser .statContainer .statBlock a { color:#6DBE45; outline:none; padding:0; margin:0; box-shadow: none; flex: none; display: inline; } .stats .teaser .statContainer .imageBlock { padding:0; position:relative; background-size:cover; background-repeat:no-repeat; background-position:top center; } .stats .teaser .statContainer .imageBlock:before { content:''; position:absolute; left:0; top:0; width:5em; height:100%; background:linear-gradient(260deg, rgba(109, 190, 69,0) 0%, rgba(109, 190, 69,0) 50%, rgba(109, 190, 69,1) 50%, rgba(109, 190, 69,1) 100%); } .stats .teaser .statContainer .imageBlock:after { content:''; position:absolute; left:-4px; top:0; width:5em; height:100%; background:linear-gradient(260deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0) 50%, rgba(10,10,10,1) 50%, rgba(10,10,10,1) 100%); } .researchAndPolicy .teaser { margin: auto 0 auto 0; flex-direction: column; flex: 1 1 auto; } .researchAndPolicy .teaser:not(:last-child):after { content:''; width:100%; height:1px; background:#cccccc; display:block; } .researchAndPolicy .teaser a:not(.button) { flex-direction: row; box-shadow:none; outline:none; } .researchAndPolicy .teaser .image { max-width: calc(30% - 1em); margin: auto; vertical-align: middle; } .researchAndPolicy .teaser .text { display: inline-flex; vertical-align: middle; outline: none; padding: 0 0 0 1em; border-bottom: none; align-self: center; } .researchAndPolicy .teaser .text p { margin-bottom: 0; } .researchAndPolicy .teaser .icon { display:none; } .suderFoundation .teaser .wrapper { display:flex; flex-direction:row; flex:1 1 auto; width:100%; margin-top:3em; } .suderFoundation .teaser .wrapper .image { flex: 1 0 30%; } .suderFoundation .teaser .wrapper .text { padding: 0 2em 2em 1em; } .suderFoundation .teaser.cmAuthor { position:relative; padding:0 2em; } .suderFoundation .teaser.cmAuthor:first-child:after { content: ''; position: absolute; width: 1px; height: 70%; background-color: #808080; right: 1em; top: 10%; } .centerLeadership .teaser.cmAuthor a { outline:none; box-shadow:none; display:inline; } .centerLeadership .teaser .wrapper { display:flex; flex-direction:column; flex:1 0 200px; width:100%; } .centerLeadership .teaser .wrapper .image { position:relative; text-align:center; } .centerLeadership .teaser .wrapper .text { display:flex; flex-direction:column; flex:1 1 auto; padding: 1.5em 2em 1.5em 2em; text-align:center; } .newsAndMedia .teaser .icon { border-top-color:#ffffff; } .newsAndMedia .teaser .icon:before { color:#ffffff; } .newsAndMedia .teaser.cmNews .text { background-color:#6DBE45; color:#ffffff; } .newsAndMedia .teaser.cmBlog .text { background-color:#F4A432; color:#ffffff; } .newsAndMedia .button {margin-top:40px;} .feed .teaser { margin-bottom: 2em; } .feed .teaser.pinned { width:50%; } .feed .teaser.pinned .icon { display: inline-block; border-top: none; margin: auto auto 2em 0; padding: 0; vertical-align: middle; line-height: 1.4; float: left; } .feed .teaser.pinned .icon:before { color:#ffffff; } .feed .teaser.pinned .text { padding:1.5em 2em 0 2em; } .feed .teaser.pinned.cmReport .text, .feed .teaser.pinned.cmInterview.text { background-color:#1088AC; color:#ffffff; } .feed .teaser.pinned.cmNews .text, .feed .teaser.pinned.dmHTML .text { background-color:#6DBE45; color:#ffffff; } .feed .teaser.pinned.cmBlog .text, .feed .teaser.pinned.cmBook .text, .feed .teaser.pinned.cmCaseStudy .text { background-color:#F4A432; color:#ffffff; } .feed .teaser.pinned.cmProgram .text, .feed .teaser.pinned.cmPolicyUpdate .text { background-color:#0A0A0A; color:#ffffff; } .feed .teaser.pinned.cmEvent .text { background-color:#6DBE45; color:#ffffff; } .feed .teaser.search { margin: auto 0 1em 0; flex-direction: column; flex: 1 1 auto; } .feed .teaser.search:not(:last-child):after { content:''; width:100%; height:1px; background:#cccccc; display:block; } .feed .teaser.search a:not(.button) { flex-direction: row; box-shadow:none; outline:none; padding-bottom:1em; } .feed .teaser.search .image { max-width: calc(20% - 1em); margin: auto; vertical-align: middle; } .feed .teaser.search .text { display: inline-flex; vertical-align: middle; outline: none; padding: 0 0 0 1em; border-bottom: none; align-self: center; } .feed .teaser.search .text p { margin-bottom: 0; } .feed .teaser.search .icon { margin: 0; border-top:none; padding: 1em 1.2em 0.5em 0em; } .feed .teaser.search.dmHTML .icon { display:none; } .programsAndServices .teaser .icon { display:none; } .related .teaser .text { background-color:#ffffff; } .teaser.cmTip .wrapper { box-shadow: 0px 2px 5px rgba(0,0,0,0.15); overflow:hidden; outline: solid 1px #cccccc; border-bottom:solid 4px #1088AC; background-color:#020202; flex: 1 0 380px; position:relative; transform: scaleX(1); transition:transform 0.25s ease-in-out; } .teaser.cmTip .wrapper .text { margin:auto; color:#ffffff; text-align:center; transform: scaleX(1); transition:transform 0.25s ease-in-out; } .teaser.cmTip .wrapper .text p { margin:auto; } .teaser.cmTip .wrapper .button { margin:0 auto 2em auto; background-color:#000000; } .teaser.cmTip .wrapper .cardBack { position: absolute; top: 0; right: 0; bottom: 0; left: -1em; display:block; transform: scaleX(0); transition:transform 0.25s ease-in-out; font-size:115%; color: #ffffff; padding:1.5em 3em 2.5em 2.5em; overflow-x:hidden; overflow-y: scroll; background-color: #1088AC; } .teaser.cmTip .wrapper .cardBack .closeBtn { background-color:#1088AC; margin:auto; } .teaser.cmTip .wrapper .cardBack a { color:#ffffff; font-weight:bold; text-decoration:underline; } .teaser.cmTip .wrapper .cardBack ul li { margin-bottom:1.5em; } .teaser.cmTip .wrapper.flipped { transform: scaleX(-1); } .teaser.cmTip .wrapper.flipped .cardBack { transform: scaleX(-1); } /* large hover */ @media screen and (min-width: 64em) { .teaser a:hover .text h5 { text-decoration:underline; } .teaser a:hover .image:before { opacity:0.8; } .teaser a:hover .image:after { opacity:1; } .featureSet .teaser a:hover .image:before { opacity:0; } .featureSet .teaser a:hover .image:after { opacity:0; } .teaser.cmTip .wrapper .button:hover { color:#000000; background-color:#ffffff; } } /* Tablet */ @media screen and (max-width: 64em) { .featureSet .teaser { outline:none; background-image:none !important; } .featureSet .teaser.leader { display:none; } .featureSet .teaser.leads:nth-child(1) { display:flex !important; flex:1 1 auto; } .featureSet .teaser.leads:nth-child(1) .image { height: 43.25vh; width: 100%; z-index: -1; } .featureSet .teaser.leads:nth-child(1) .image img { object-fit: cover; height: 43.25vh; width: 100%; } .featureSet .teaser.leads:nth-child(even) .image { display:block; } .featureSet .teaser .text { background-image:none !important; } } /* Mobile */ @media only screen and (max-width: 40em) { .featureSet .teaser { outline:none; background-image:none !important; } .featureSet .teaser.leader { display:none; } .featureSet .teaser.leads:nth-child(1) { display:flex !important; } .featureSet .teaser.leads:nth-child(1) .image { height: auto; width: auto; z-index:auto; } .featureSet .teaser.leads:nth-child(1) .image img { object-fit: initial; height: auto; width: auto; } .featureSet .teaser.leads:nth-child(even) .image { display:block; } .featureSet .teaser .text { background-image:none !important; } .promo .teaser { flex-direction:column; padding:0 0 1em 0; } .promo .teaser .text { padding:1.5em 0; text-align:center; } .stats .teaser .statContainer { padding:0 0 2em 1em; } .stats .teaser .statContainer .statBlock { padding:0.5em 1em 1em 1em; } .stats .teaser .statContainer .statBlock p { width: calc(100% - 100px - 2em); } .stats .teaser .statContainer .statBlock h2 { display:none; } .stats .teaser .statContainer .statBlock img { max-width:100px; } .researchAndPolicy .teaser { margin: 0 0 0 0; flex-direction: column; flex: 1 0 auto; } .researchAndPolicy .teaser a:not(.button) { flex-direction: column; box-shadow: 0px 2px 5px rgba(0,0,0,0.15); outline: solid 1px #cccccc; } .researchAndPolicy .teaser .image { max-width: 100%; margin: auto; vertical-align: middle; } .researchAndPolicy .teaser .text { display: flex; vertical-align: middle; outline: none; padding: 1.5em 2em 1.5em 2em; align-self: center; border-bottom:solid 6px #0A0A0A; } .suderFoundation .teaser .wrapper { flex-direction:column; margin-top:0em; } .suderFoundation .teaser .wrapper .image { flex:1 0 auto; } .suderFoundation .teaser .wrapper .text { padding:1.5em 1em 1.5em 0.5em; } .suderFoundation .teaser.cmAuthor:first-child:after { content:normal; } .centerLeadership .teaser .wrapper { flex-direction:row; } .centerLeadership .teaser .wrapper .image { flex:0 0 80px; margin:auto; } .centerLeadership .teaser .wrapper .text { padding: 0 0 0 1em; text-align:left; margin:auto; } .centerLeadership .teaser .wrapper .text p { margin-bottom:0; } .feed .teaser.search { margin:0 0 2em 0; flex-direction: column; flex: 1 0 auto; } .feed .teaser.search a:not(.button) { flex-direction: column; box-shadow: 0px 2px 5px rgba(0,0,0,0.15); outline: solid 1px #cccccc; padding-bottom:0; } .feed .teaser.search .image { max-width: 100%; margin: auto; vertical-align: middle; } .feed .teaser.search .text { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.5em 2em 1.5em 2em; color: #0A0A0A; align-self:auto; } .feed .teaser.search .text p { margin-bottom: 1.25em; } .feed .teaser.search .text .icon { margin: auto -2.2em -0.75em -2.2em; border-top: solid 1px #cccccc; padding: 1em 1.2em 0.5em 1.2em; } .feed .teaser.pinned { width:100%; } } #goToTopBtn { display: none; position: fixed; bottom: 20px; right: 20px; z-index: 99; font-size: 18px; border: none; outline: none; color: black; cursor: pointer; padding: 5px; border-radius: 4px; } .dropbtn { color: white; padding: 16px; font-size: 16px; border: none; } .dropbtn i{ font-size: 0.8em; margin-left:5px; } .dropdown { position: relative; display: inline-flex; } .dropdown-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 100; top:105px; } .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; text-transform:uppercase; display: block; font-size: 0.8em; } .dropdown-content a:hover {background-color: #ddd;} .dropdown:hover .dropdown-content {display: block;} .cmAnnouncement{ display:none; } .cmAnnouncement .banner { padding:8px; text-align:center; color:#fff; display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cmAnnouncement .banner .icon { margin-right:15px; font-size: .75em; } .cmAnnouncement .banner p { margin-right: 15px; margin-bottom: 0; font-weight: 700; } .cmAnnouncement .banner button { position: absolute; top: 0; right: 0; padding: .75rem 1.25rem; color: inherit; } .cmAnnouncement .banner a { pointer-events: all; margin:0px; } .annBody{ padding:15px 30px 0 30px; } .annButton{ text-align:center; } .popModal .annTeaser{ background-color:#EEE; font-weight:bold; padding:15px; text-align:center !important; } .popModal .annHeading{ color:#fff; text-align:center; } .popModal .annHeading h4{ padding:15px; margin:0px; } .popModal{ display: none; vertical-align: middle; position: relative; z-index: 2; max-width: 500px; box-sizing: border-box; width: 90%; background: #fff; -webkit-border-radius: 0px; -moz-border-radius: 0px; -o-border-radius: 0px; -ms-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0 0 10px #000; -moz-box-shadow: 0 0 10px #000; -o-box-shadow: 0 0 10px #000; -ms-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; text-align: left; } .blocker{ z-index:999; } .blocker .modal{ padding:0px; }s