/* 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. Types -------------------------------------- 01. displayPageHome Mobile 02. displayPageStandard Mobile 03. displayTeaserStandard Mobile III. Content Objects --------------------------- 01. [name of object] Mobile /* ------------------------------------------------------------ *\ Fonts \* ------------------------------------------------------------ */ /* ------------------------------------------------------------ *\ Typography \* ------------------------------------------------------------ */ body,html { font-family:"adelle", "Rockwell", serif; font-weight:400; color:#4A4A4A; line-height:1.7; } /* Paragraph */ p { font-family:"adelle", "Rockwell", serif; font-weight:400; color:#4A4A4A; line-height:1.7; } p.lead { font-family:"adelle", "Rockwell", serif; font-size:125%; line-height:1.5; } p.promo { font-family:"adelle", "Rockwell", serif; font-size:138%; line-height:1.4; } /* Headers */ h1, h2, h3, h4, h5 { font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; line-height:1.05; } h6 { font-family:"adelle", "Rockwell", serif; color:#4A4A4A; line-height:1.7; } h1.promo { font-weight: 800; font-size:3em; margin-bottom: 0.25em; } h2 { font-size:3em } h3.promo { font-weight:800; font-size:3em; margin-bottom:0.25em; } h4.promo { font-weight:800; font-size:2.5em; margin-bottom:0.25em; } h6 { font-size: 1.1rem; } h1 small { } h2 small { } h3 small { } h4 small { } h5 small { } h6 small { } .serif { font-family:"adelle", "Rockwell", serif; } .sans { font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; } /* Subheaders */ /* Links */ /* Dividers */ hr { border-bottom:dashed 1px #cccccc; } /* ul */ ul { } ul li { margin:0.5em auto; } /* ol */ ol { } ol li { } /* dl */ dl { } dl dt { } /* blockquote */ blockquote { } blockquote cite { font-size: 1.15rem; } strong { font-weight:700; } a { } a.button, form .button { font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; color:#185973; background: transparent !important; white-space: normal; text-transform: uppercase; border: solid 2px #95D4BA; border-radius: 1000px; padding: 0.65em 3em 0.75em 3em !important; letter-spacing: 0.1em; } .button.expanded {padding: 0.65em .5em 0.75em .5em !important; } a.button.reverse, form .button.reverse { color:#ffffff; } a.button:hover, form .button:hover { background: #95D4BA !important; } a.white:hover { color:#cccccc; text-decoration:underline; } p.white > a { color:#ffffff; text-decoration:underline; } p.white > a:hover { color:#cccccc; text-decoration:none; } form input { max-width:none !important; } form input[type="text"], input[type="email"], form select {border-radius: 1000px; } form select {background-image: url(images/NASPA_Down_Arrow.png); background-size: 20px auto; background-position: calc(100% + 20px) 62%; } form input.expanded { max-width: none !important; width: 100% !important; margin-left: 0 !important; } table {border-color: #26A9BF;} table thead {background-color: #26A9BF; color: #fff;} table tr {border: 1px solid #26A9BF;} table td:first-child { font-weight: bold; } /* kinda small large screen */ @media only screen and (max-height:48em) { h1.promo { font-size:2.5em; } p.promo { font-size:125%; } } /* Mobile */ @media only screen and (max-width:39.9375em) { h1.promo { font-size:2rem; } h2 { font-size:1.5rem; } h3.promo { font-size:1.8rem; } p.promo { font-size:1.2rem; } h6 { font-size:1rem; } a.button, form .button { padding: 0.65em 1em 0.75em 1em !important; } } /* ------------------------------------------------------------ *\ Palette \* ------------------------------------------------------------ */ .teal { color:#25A9BF; } section.teal, li.teal, div.teal { background-color:#25A9BF; color:inherit; } .lightTeal { color:#56BCCD; } section.lightTeal, div.lightTeal { background-color:#56BCCD; color:inherit; } .navy { color:#185973; } section.navy, footer.navy, div.navy { background-color:#185973; color:inherit; } .green { color:#65A98C; } section.green, div.green { background-color:#65A98C; color:inherit; } .lightGreen { color:#95D4BA; } section.lightGreen, div.lightGreen { background-color:#95D4BA; color:inherit; } .darkBlue { color:#062738 } section.darkBlue, div.darkBlue { background-color:#062738; color:inherit; } .lightBlue { color:#EEF9FA; } section.lightBlue, div.lightBlue { background-color:#EEF9FA; color:inherit; } .lightGrey { color:#9B9B9B; } section.lightGrey, div.lightGrey { background-color:#9B9B9B; color:inherit; } .gray { color:#E9E7E5; } section.gray, div.gray { background-color:#E9E7E5; color:inherit; } .darkGrey { color:#4A4A4A; } section.darkGrey, div.darkGrey { background-color:#4A4A4A; color:inherit; } section.blueGradient, div.blueGradient { background-image: linear-gradient(to left top, #185973 10%, #25A9BF 100%); } section.greenGradient, div.greenGradient { background-image: linear-gradient(to left top, #95D4BA 0%, #25A9BF 100%); } .white { color:#ffffff; } /* ------------------------------------------------------------ *\ Icons \* ------------------------------------------------------------ */ .icon { background-image:url(images/NASPA-Sprite.png); background-size: 1350%; display:inline-block; vertical-align:middle; font-size:0; width:50px; height:50px; overflow:hidden; border-radius:1000px; } .icon.small { width: 35px; height: 35px; background-position: -120px -83px; } .icon.nav { width:100px; height:100px; } .icon.AboutEmergencyAid { background-position: 36.5% 5%;} .icon.ToolsResources { background-position: 18.5% 5%;} .icon.KeyConcepts { background-position: 36.5% 5%;} .icon.Share { background-position: 54.55% 5%;} .icon.Insights { background-position: 72.5% 5%;} .icon.CriticalComponents {background-position: 0.5% 5%;} .icon.cmInfographic { background-position: 90.5% 5%;} .icon.cmBlog { background-position: 99.5% 5%;} .icon.cmInterview { background-position: 0.5% 49.8%;} .icon.cmReport { background-position: 9.5% 49.8%;} .icon.cmEvent { background-position: 18.5% 49.8%;} .icon.cmPresentation { background-position: 27.5% 49.8%;} .icon.cmNews { background-position: 36.5% 49.8%;} .icon.cmVideo { background-position: 45.5% 49.8%;} .icon.cmPressReleases { background-position:36.5% 94.6%; } .icon-arrow-right { background-position: 0.5% 94.6%; } .icon-arrow-left { background-position: 9.5% 94.6%; } @media screen and (min-width: 64em) { .main-nav > #mainNav > li > a:hover:not(.button) .icon.nav, .main-nav > #mainNav > li > a:focus .icon.nav, .main-nav > #mainNav > li > a.is-page .icon.nav, .main-nav > #mainNav > li.is-active > a .icon.nav { background-color:#55bbcd; } .main-nav > #mainNav > li > a:hover:not(.button) h6, .main-nav > #mainNav > li > a:focus h6, .main-nav > #mainNav > li > a.is-page h6, .main-nav > #mainNav > li.is-active > a h6 { font-style:italic; } } /* Mobile */ @media only screen and (max-width:39.9375em) { } /* ------------------------------------------------------------ *\ Types \* ------------------------------------------------------------ */ .type { line-height: 1; text-transform:uppercase; font-weight: 700; } .type:after { margin-left: 0.5em; vertical-align: middle; } .type.cmAuthor:after { content:'Author'; } .type.cmBlog:after { content:'Blog'; } .type.cmDefinitions:after { content:'Definitions'; } .type.cmEvent:after { content:'Event'; } .type.cmExternalLink:after { content:'External Link'; } .type.cmInfographic:after { content:' Graphic'; } .type.cmInterview:after { content:'Interview'; } .type.cmNews:after { content:'News'; } .type.cmPresentation:after { content:'Presentation'; } .type.cmPressReleases:after { content:'Press Release'; } .type.cmProgram:after { content:'Program'; } .type.cmQuestion:after { content:'Question'; } .type.cmReport:after { content:'Report'; } .type.cmSource:after { content:'Source'; } .type.cmStatistics:after { content:'Statistics'; } .type.cmVideo:after { content:'Video'; } .type.dmHTML:after { content:'Web Page'; } /* ------------------------------------------------------------ *\ Elements \* ------------------------------------------------------------ */ .button .button.hollow form { } form.outline { outline: solid 1px #cccccc; max-width: 75rem; margin: auto auto 2em auto; padding: 2em 1.5em 1em 1.5em; box-shadow:0px 0px 5px rgba(0,0,0,0.2); } input[type="text"] { font-family:sans-serif; color:#185973; } input[type="checkbox"] { font-family:sans-serif; color:#808080; } input[type="date"] { font-family:sans-serif; color:#808080; } input[type="datetime"] { font-family:sans-serif; color:#808080; } input[type="datetime-local"] { font-family:sans-serif; color:#808080; } input[type="email"] { font-family:sans-serif; color:#808080; } input[type="file"] { font-family:sans-serif; color:#808080; } input[type="month"] { font-family:sans-serif; color:#808080; } input[type="number"] { font-family:sans-serif; color:#808080; } input[type="password"] { font-family:sans-serif; color:#808080; } input[type="radio"] { font-family:sans-serif; color:#808080; } input[type="search"] { font-family:sans-serif; color:#808080; } input[type="tel"] { font-family:sans-serif; color:#808080; } input[type="time"] { font-family:sans-serif; color:#808080; } input[type="url"] { font-family:sans-serif; color:#808080; } input[type="week"] { font-family:sans-serif; color:#808080; } textarea { font-family:sans-serif; color:#185973; border-radius:15px; } select { position:relative; font-family:sans-serif; color:#808080; text-indent:0.5em; } input[type="text"]:focus, textarea:focus { border-color:#25A9BF; border-width:2px; } /* ------------------------------------------------------------ *\ semantics \* ------------------------------------------------------------ */ html.noscroll, body.noscroll { overflow:hidden; height:100px !important; } section { position:relative; margin:2em auto 0 auto; padding:2em 0 2em 0; } section.extended, div.extended { max-width:1440px; } section:last-of-type { margin:2em auto 0 auto; padding:2em 0 2em 0; } section:nth-of-type(odd) { background-color:#EEF9FA; } section:nth-of-type(even) { background-color:#FFF; } section.intro { background-color:#ffffff; margin: 0em auto 0 auto; padding:4em 0 0em 0; } section.intro:not(.noDivide):after { content: ''; position: relative; display: block; height: 1px; width: 100%; max-width: 75rem; margin-left:auto; margin-right: auto; border-bottom: dashed 1px #ccc; margin-bottom: -2em; margin-top: 2em; } section.intro .social { margin-top:1em; } section.introBox { margin:0em auto 0 auto; padding:0; } section.intro.introBox:after { content:normal; } section.introBox h1 { margin-bottom:0.5em; } section.introBox p { color:#ffffff; } section.introBox .social { margin-top:4em; } section.introBox .social.share > h6 { color:#ffffff; } section.intro > .title { margin-bottom:1em; } section > .title { margin-bottom:2em; } section > .title > h1 { color:#185973; margin-bottom:0.25em; } section > .title > h2 { color:#185973; margin-bottom: 0.75em; } section > .title > h1 > span, section > .title > h2 > span { position:relative; } section > .title > h1 > span:after, section > .title > h2 > span:after { content:''; position:absolute; bottom:-0.25em; left:0; height:6px; width:100%; background-image: linear-gradient(to left, #25A9BF 0%, #65A98C 100%); } section > .title + .intro { margin-bottom:1em; padding-top:2em; } section.standard { margin-top:0; } section#homepromo { margin:0 auto 0 auto; padding:0; width:100%; } section#homepromo #homepromoimage { width:100%; height:60vh; min-height:700px; max-height:810px; padding:0; background-image:url(/images/NASPA-Hero.jpg); background-size:cover; background-repeat:no-repeat; background-position:center center; } section#homepromo #homepromotext { position:absolute; top:calc(50% - 1.5em); transform:translateY(-50%); left:6%; } section#homepromo #homepromotext p:last-of-type { margin-top:1.5em; } section#homepromo #homepromotext h3 { font-weight: normal; font-size: 1.5em; margin-bottom: 1rem; } section.pillars { margin: 4em 0 2em 0; padding: 0 0 2em 0; background:none; } section.pillars .subnav { height: 10em; margin-bottom:-6.5em; } section.pillars .tabs { border:none; display: table; width: 100%; background:none; } section.pillars .tabs > li { float: none; text-align: center; display: table-cell; position:relative; vertical-align:middle; } section.pillars .tabs > li.is-active:before { content:''; position:absolute; top:0; left:0; width:100%; height:5px; background-image: linear-gradient(to left, #25A9BF 0%, #65A98C 100%); } section.pillars .tabs > li > a { font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; text-transform:uppercase; font-size:1em; color:#ffffff; font-weight:400; outline:none; } section.pillars .tabs > li.is-active > a { color:#95D4BA; display:block; position:relative; background:none; } section.pillars .tabs > li:not(.is-active) a:hover { background:none; color:#ffffff; opacity:0.75; } section.pillars .tabs-content { border:none; background:none; } section.pillars .tabs-content .tabs-panel .columns { padding-right:0; padding-left:0; } section.pillars .tabs-content .tabs-panel .pillarText { position:relative; padding:4em; } section.pillars .tabs-content .tabs-panel .pillarText h3 { margin-bottom: 0.25em; } section.pillars .tabs-content .tabs-panel .pillarText p:first-child { font-size:1.1rem; letter-spacing:1px; } section.pillars .tabs-content .tabs-panel .pillarText p:last-of-type { margin-top:1.5em; } section.pillars .tabs-content .tabs-panel .pillarText .buttons { position:absolute; right:1em; bottom:1em; } section.pillars .tabs-content .tabs-panel .pillarText .buttons i { cursor:pointer; } section.pillars .tabs-content .tabs-panel:first-child .pillarText .buttons i:first-child { filter: grayscale(100%) opacity(90%); cursor:auto; } section.pillars .tabs-content .tabs-panel:last-child .pillarText .buttons i:last-child { filter: grayscale(100%) opacity(90%); cursor:auto; } section.insights { } section.insights > .threeUp { margin:2em auto; } section.community { padding: 2em 0 4em 0; } section.statsAndFacts { margin:0; } section.statsAndFacts > .title > h2 { color:#ffffff; } section:nth-of-type(odd) + section.statsAndFacts { margin:0 auto; } /* reset the section counts by hand if there is a stats section */ section.statsAndFacts + section { background-color:#ffffff; } section.statsAndFacts + section + section { background-color:#EEF9FA; } section.statsAndFacts + section + section + section { background-color:#ffffff; } section.statsAndFacts + section + section + section + section { background-color:#EEF9FA; } section.toolsAndResources { } section.toolsAndResources .columns { padding-left:2em; } section.toolsAndResources .columns.toolsAndResourcesText { padding:0 4em; } section.related { background-color:#EEF9FA; } section.fullInterview + section.related { background-color:#ffffff; } section.feed .teaser { margin-bottom:2em; } article { margin:3em auto 0 auto; padding:2em 0 2em 0; } aside { } /* kinda small large screen */ @media only screen and (max-height:48em) { section#homepromo #homepromoimage { min-height:600px; } } @media screen and (min-width: 40em) and (max-width: 63.9375em) { /*section.insights > .threeUp { margin:0em auto; }*/ section.toolsAndResources .columns { padding-left: 0.9375rem; } section.toolsAndResources .columns.toolsAndResourcesText { padding:2em; } section#homepromo #homepromotext { left:0; } } /* Mobile */ @media only screen and (max-width:39.9375em) { section:nth-of-type(odd) { background-color:#FFF; } section:nth-of-type(even) { background-color:#EEF9FA; } section.intro h1.white > span { position:relative; } section.intro h1.white > span:after { content:''; position:absolute; bottom:-0.25em; left:0; height:6px; width:100%; background-image: linear-gradient(to left, #25A9BF 0%, #65A98C 100%); } section#homepromo #homepromotext h3 { color:#185973; font-size: 1.5em; } } /* Mobile */ @media only screen and (max-width:39.9375em) { section > .title { margin-bottom:0em; } section.introBox .social { margin-top:2em; } section#homepromo { background-color:#ffffff; } section#homepromo #homepromoimage { height: 10vh; min-height: 200px; background-size: auto 120%; } section#homepromo #homepromotext { position: relative; top: auto; transform:none; left: auto; text-align: center; margin-top:1em; padding:1.5em; } section#homepromo #homepromotext h1, section#homepromo #homepromotext p, section#homepromo a.button.reverse { color:#185973; } section.pillars { margin: 0em 0 2em 0; padding: 0 0 2em 0; } section.pillars .row { padding:0; margin: auto; } section.pillars > .row:last-child { padding: 3em 2em 0em 2em; } section.pillars ul li { margin:0 auto 1px auto; } section.pillars .shadow { background: none; box-shadow:none; height: auto; } section.pillars .accordion-title { font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; border:none; text-transform:uppercase; font-size:1em; color:#ffffff; font-weight:400; outline:none; background: #185973; } section.pillars .accordion-title:before { position: absolute; right: 1rem; top: 50%; background: #65A98C; border-radius: 1000px; margin-top: -0.75em; line-height: 1.3; font-size: 1.5em; height: 1.5em; width: 1.5em; text-align: center; } section.pillars .accordion-content { border:none; padding:0; } section.pillars .accordion-content .pillarText { padding: 1.5em 2em 0 2em; } section.community { padding: 2em 0 0 0; } section.insights > .title { margin-bottom:1em; } section.insights > .threeUp { margin: 0 0 1em 0; } section.toolsAndResources { } section.toolsAndResources > .title { margin-bottom:1em; } section.toolsAndResources .columns { padding-left: 0.9375rem; } section.toolsAndResources .columns.toolsAndResourcesText { padding:0; background-image:none; } section.toolsAndResources .columns.toolsAndResourcesText h4, section.toolsAndResources .columns.toolsAndResourcesText p { color:#185973; padding:0 2em; text-align:center; } section.toolsAndResources .columns.toolsAndResourcesText form { background-image: linear-gradient(to left top, #185973 10%, #25A9BF 100%); padding:2em 2em 1em 2em; } section.additionalResources > .title { margin-bottom:1em; } } /* ------------------------------------------------------------ *\ Main Nav \* ------------------------------------------------------------ */ #navContainer { min-height:155px; z-index:900; } #navContainer .logo img { max-height:75px; } .main-nav { background:#ffffff; font-size:0.8125rem; font-weight:bold; z-index:2; position:relative; padding:0; width:100%; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5); } .main-nav:before, .main-nav:after { content:' '; display:table; } .main-nav, .main-nav ul, .title-bar { background: #25A9BF; } .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 > .tertiary { padding-top: 0.9375em; background: #ffffff; } .main-nav > .tertiary .nav-left { padding: 1.5em 0.9375em 0 0.9375em; } .main-nav > .tertiary .nav-left a { margin:auto 0.25em; color:#185973; } .main-nav > .tertiary .nav-left a.button-alt { margin:0 0.25em 0 0; } .main-nav > .tertiary .nav-left a:not(.button-alt) { font-size: .85rem; } .main-nav > .tertiary .nav-left a:not(.button-alt):after { content:'|'; margin-left: 1em; margin-right: 0.5em; } .main-nav > .tertiary .nav-left a:last-child:after { content:normal; } .main-nav > .tertiary .nav-left a i { border-radius: 1000px; border: solid 2px #185973; font-size: 1.2em; height: 2em; width: 2em; text-align: center; vertical-align: middle; position: relative; } .main-nav > .tertiary .nav-left a i.fa:before { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .main-nav > .tertiary .nav-center { text-align:center; } .main-nav > .tertiary .nav-right { text-align:right; padding:0.9375em 0 0 0; } .main-nav > .tertiary .nav-right .navSearch { position:relative; right: calc(-100% + 4em); transition:right 0.25s ease-in-out; display:block; height:4em; background:#185973; border-top-left-radius: 1000px; border-bottom-left-radius: 1000px; } .main-nav > .tertiary .nav-right .navSearch.active { right:0; } .main-nav > .tertiary .nav-right .navSearch a { color:#ffffff; font-size:2em; float:left; } .main-nav > .tertiary .nav-right .navSearch a i { width: 2em; padding: 0.5em; } .main-nav > .tertiary .nav-right .navSearch input[type="text"] { float: left; margin: 0.4em 0 0 1em; max-width: calc(100% - 5em) !important; } .main-nav > .tertiary .nav-right .navSearch input[type="text"]:focus { box-shadow:none; } .main-nav > .tertiary .nav-right .navSearch input[type="submit"] { position: absolute; right: 0; margin-top: 0.7em; border: none; color: #ffffff; background: #185973 !important; padding: 0.5em 1em 0.8em 1em !important; } .main-nav > #mainNav { max-width: 2000px; margin: 0 auto 0 auto; } .main-nav > #mainNav > li { margin-bottom:0.3em; position:inherit; vertical-align: top; } .main-nav > #mainNav > li > a { display:block; padding:0; background:#25A9BF; transition:all 0.25s ease-in-out; } .main-nav > #mainNav > li > a.iconHolder h6 { border-top: 10px solid transparent; } .main-nav > #mainNav > li > a.iconHolder.is-page h6 { border-top: 10px solid #185973; } .main-nav > #mainNav > li > a.iconHolder > h6 { color:#ffffff; font-weight:700; margin-bottom:0; line-height:1; padding: 0.9rem 2rem 1.65rem 2rem; letter-spacing: 0.05rem; display: inline-block; height: 100%; } .main-nav > #mainNav > li > a.iconHolder > p { margin-bottom:0; } .main-nav > #mainNav > li > a.iconHolder > p.icon > i { font-size:100%; color:#ffffff; } /* Dropdowns */ .title-bar .dropdown.menu a, .main-nav .dropdown.menu a { background:transparent; color:#ffffff; padding: 0.5em 1.5em 0em 1.5em; } .main-nav .dropdown.menu > li.is-dropdown-submenu-parent > a:after { content:normal; 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; border-top:solid 1px #56BCCD; box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.5); left:0 !important; right:0 !important; background-image: linear-gradient(to top left, rgba(32, 144, 164, 0.98), rgba(20, 74, 95, 0.98)); padding:0.5em 1em 1em 1em; } .main-nav .dropdown.menu .submenu.is-dropdown-submenu.js-dropdown-active { display:flex; flex-wrap:wrap; } .main-nav .dropdown.menu .submenu li { position:relative; text-align:left; color:#fff; float:left; padding:1em; background:transparent; transition:all 0.25s ease-in-out; } .main-nav .dropdown.menu .submenu li:after { content: ''; position: absolute; border-right: dashed 1px #25A9BF; width: 1px; bottom: 3.1em; top: 2.5em; right: 0px; } .main-nav .dropdown.menu .submenu li p { font-weight:400; margin-top:1em; color:#ffffff; } .main-nav .dropdown.menu .submenu li > a { display: flex; width: 100%; flex-direction: column; } .main-nav .dropdown.menu .submenu.children-1 li:after { content:normal; } .main-nav .dropdown.menu .submenu.children-2 li { max-width:50%; display: flex; width: 100%; } .main-nav .dropdown.menu .submenu.children-2 li p { display: flex; flex: 1 0 auto; width: 100%; } .main-nav .dropdown.menu .submenu.children-2 li p:last-of-type > object { align-self: flex-end; } .main-nav .dropdown.menu .submenu.children-2 li:nth-child(3):after { content:normal; } .main-nav .dropdown.menu .submenu.children-3 li { max-width:33.33334%; display: flex; width: 100%; } .main-nav .dropdown.menu .submenu.children-3 li:nth-child(4):after { content:normal; } .main-nav .dropdown.menu .submenu.children-4 li { max-width:50%; display: flex; width: 100%; } .main-nav .dropdown.menu .submenu.children-4 li:nth-child(odd):after { content:normal; } .main-nav .dropdown.menu .submenu.children-6 li { max-width:33.33334%; border-bottom:dashed 1px #25A9BF; display: flex; width: 100%; } .main-nav .dropdown.menu .submenu.children-6 li:first-child { display: block; width: 100%; max-width: 100%; text-align: center; padding: 2em 0.5em 1.5em 0.5em; margin: 0 0 1em 0; } .main-nav .dropdown.menu .submenu.children-6 li:first-child:after { content:normal; } .main-nav .dropdown.menu .submenu.children-6 li:first-child p { display:block; } .main-nav .dropdown.menu .submenu.children-6 li:nth-child(4):after, .main-nav .dropdown.menu .submenu.children-6 li:nth-child(7):after { content:normal; } .main-nav .dropdown.menu .submenu.children-6 li:nth-child(5), .main-nav .dropdown.menu .submenu.children-6 li:nth-child(6), .main-nav .dropdown.menu .submenu.children-6 li:nth-child(7) { border-bottom:solid 0px transparent; } .main-nav .dropdown.menu .submenu.children-6 li p { display: flex; flex: 1 0 auto; width: 100%; } .main-nav .dropdown.menu .submenu.children-6 li p:last-of-type > object { align-self: flex-end; } /* 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; } /* large and up */ @media screen and (min-width: 64em) { .main-nav .submenu a:hover:not(.button), .main-nav .submenu a:focus, .main-nav .submenu .is-active a { background:transparent; } } /* weird laptop height size */ @media screen and (min-width: 64em) and (max-height: 42em) { .main-nav .dropdown.menu .submenu li p.lead { display:none; } .main-nav .dropdown.menu .submenu li { text-align:center; } } @media screen and (min-width: 40em) and (max-width: 63.9375em) { .main-nav .dropdown.menu .submenu.children-6 li { max-width:50%; } .main-nav .dropdown.menu .submenu.children-6 li:nth-child(even):adter { content:normal; } .main-nav .dropdown.menu .submenu.children-6 li:nth-child(odd):after { content: ''; position: absolute; border-right: dashed 1px #25A9BF; width: 1px; bottom: 3.1em; top: 2.5em; right: 0px; } .main-nav .dropdown.menu .submenu.children-6 li:nth-child(4):after { border-bottom:dashed 1px #25A9BF; } } /* Mobile */ @media only screen and (max-width:39.9375em) { #navContainer p { margin-bottom:0; } #navContainer #mobileMenu { position:absolute; top:0; right:0; width:4em; height:4em; text-align:center; } #navContainer #mobileMenu i { font-size:2em; position:relative; top:50%; transform:translateY(-50%); } #navContainer .logo img { max-height:2.75em; margin:0.625em 0 0.625em 0; } #navContainer #site-navigation { box-shadow:2px 2px 2px rgba(0,0,0,0.25); } #navContainer #mainNav { display:none; } #navContainer #footerNav { display:none; flex:1; } #navContainer.open { max-height:100vh; height:100vh; min-height:100vh !important; top: 0; right: 0; bottom: 0; left: 0; } #navContainer.open #site-navigation { height:100vh; overflow:scroll; display:flex; flex-direction:column; } #navContainer.open #mainNav { display:block; } #navContainer.open #footerNav { display:block; } .main-nav ul { float:none; width:100%; max-width:100%; background-image: linear-gradient(to top left, rgba(37, 169, 191, 0.85), rgba(24, 89, 115, 0.85)); } .main-nav .dropdown.menu .submenu li { text-align:left; color:#fff; max-width:none; float:none; } .main-nav .dropdown.menu .submenu.children-6 li { border-bottom:none; } .main-nav .dropdown.menu .submenu.children-6 li p:first-of-type { min-height:0; } .main-nav .menu a { color:#ffffff; padding:0 1.3em; } .main-nav .menu a > p { color:#ffffff; } .main-nav > .tertiary { margin-top:0em; box-shadow:2px 2px 2px rgba(0,0,0,0.25); padding-top:0; } .main-nav > .tertiary .nav-left { padding:1em; } .main-nav > .tertiary .nav-left a i { border:solid 2px #95D4BA; color:#fff; } .main-nav > .tertiary .nav-center { text-align:left; } .main-nav > #mainNav { } .main-nav > #mainNav > li { background: #25A9BF; text-align:left; border-bottom:solid 1px #1e8fa2; position:relative; margin: 0 auto; } .main-nav > #mainNav > li > a.iconHolder { padding:0 0.25em; } .main-nav > #mainNav > li > a.iconHolder > p { float: left; font-size: 0.8em !important; margin-left: 0.5em; margin-right: 0.5em; } .main-nav > #mainNav > li > a.iconHolder > h6 { display: inline-block; vertical-align: middle; } .main-nav .vertical.menu .submenu { display: block; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; max-width: none; float:none; } .main-nav .vertical.menu .submenu li { display: inline-block; position: relative; vertical-align: middle; float: none; margin: 1em; } .main-nav .vertical.menu .submenu li:after { content: ''; position: absolute; border-right: dashed 1px #25A9BF; width: 1px; bottom: 3.1em; top: 2.5em; right: 0px; } .main-nav .vertical.menu .submenu li:last-child:after { content: normal; } .main-nav .vertical.menu .submenu li:last-child { margin-right:1em; } .main-nav .vertical.menu .submenu li a { padding: 1em 1.5em 0.1em 1em; } .main-nav .vertical.menu .submenu li p { white-space:pre-wrap; } .is-accordion-submenu-parent > a:after { content:normal; border-color: #ffffff transparent transparent; } button.submenu-toggle { position: absolute; top: 0; width: 4em; height: 5.7em; border-left: solid 1px #1e8fa2; background: rgba(25, 117, 132, 0.25); right: 0; } button.submenu-toggle:after { content: ''; display: block; width: 0; height: 0; border: inset 6px; border-color: #ffffff transparent transparent; border-top-style: solid; border-bottom-width: 0; position: absolute; top: 50%; margin-top: -4px; left:50%; margin-left:-6px; } button.submenu-toggle[aria-expanded="true"]:after { transform:rotate(-180deg); } } /* ------------------------------------------------------------ *\ Footer \* ------------------------------------------------------------ */ footer { padding:1.5em 0 0 0; } footer > .footerNav { } footer > .footerNav a { margin:auto 1em; line-height:5.2em; font-size:90%; opacity:0.8; } footer > .footerNav a:not(:last-child):after { content:''; border-right:solid 1px rgba(255,255,255,1); padding:0.25em 1em; height: 1rem; display: inline-block; vertical-align: sub;} footer > .footerNav .logo > img { max-height:3em; margin:1em 0; } footer > .footerSocial { padding:1em 0; border-top:solid 1px rgba(255,255,255,0.25); border-bottom:solid 1px rgba(255,255,255,0.25); } footer > .footerSocial span, footer > .footerSocial a { margin-right:1em; } footer > .footerCopy { border-top:solid 1px rgba(255,255,255,0.25); padding-bottom:0em; } footer > .footerCopy p { margin-bottom:0; padding: 0.5rem; } footer .inputHolder { position:relative; } footer .inputHolder .g-recaptcha { position: absolute; vertical-align: middle; margin-top: -1.1em; opacity: 0; transition: opacity 0.25s ease-in-out; right: 0; top: 0; z-index: -1; } footer .inputHolder input:not(.button) { width: 100%; display: inline-block; vertical-align: middle; margin-right: 1em; transition: all 0.25s ease-in-out; } footer .inputHolder input:not(.button):focus, footer .inputHolder input:not(.button):active, footer .inputHolder input:not(.button):valid { width: 45%; } 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:not(.intro):nth-of-type(odd) + footer { margin-top:1px; } /* Mobile */ @media only screen and (max-width:39.9375em) { footer .inputHolder .g-recaptcha { position: relative; opacity: 1; z-index:1; margin: 1em; } footer .inputHolder input:not(.button) { margin:0; } footer .inputHolder input:not(.button):focus, footer .inputHolder input:not(.button):active, footer .inputHolder input:not(.button):valid { width: 100%; } 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; } } /* ------------------------------------------------------------ *\ Pagination \* ------------------------------------------------------------ */ .pagination-previous a:before, .pagination-previous.disabled:before { content:normal; } .pagination-previous a:after, .pagination-previous.disabled:after { content:" PREV"; font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; font-weight:600; } .pagination-next a:before, .pagination-next.disabled:before { content:"NEXT "; font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; font-weight:600; } .pagination-next a:after, .pagination-next.disabled:after { content:normal; font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; font-weight:600; } .pagination a, .pagination-previous.disabled, .pagination-next.disabled { padding:0.5em 1em; font-family:sans-serif; border-radius:1000px; } .pagination .current { border-radius:1000px; padding:0.5em 1em; background:#25A9BF; font-family:sans-serif; font-weight:600; } .pagination .current a { padding: 0; color: #fff; } .pagination-previous a, .pagination-next a { border-radius:1000px; background:#25A9BF; padding:0.5em 2em; color:#ffffff; } .pagination-previous a:hover, .pagination-next a:hover { background:#1e889a; color:#ffffff; } .pagination-previous.disabled, .pagination-next.disabled, .pagination-previous.disabled:hover, .pagination-next.disabled:hover { border-radius:1000px; background:#DADAD7; padding:0.5em 2em; color:#cccccc; } /* Mobile */ @media only screen and (max-width:40em){ .pagination { margin: 1em 1em -1em 1em; } .pagination form { width:auto; display:inline-block; } .pagination select { width:auto; min-width:7rem; padding:0.5rem; } .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; } } /* ------------------------------------------------------------ *\ Building Blocks \* ------------------------------------------------------------ */ /* cmBlockGrid */ .blockGrid { } /* Large and up */ @media screen and (min-width: 64em) { .blockGrid.large-up-1 .column { margin-bottom:2em; position:relative; } .blockGrid.large-up-1 .column:after { content:''; position:absolute; left:0.9375rem; bottom: -0.75em; width:calc(100% - 1.875rem); height:1px; border-bottom:dashed 1px #cccccc; } .blockGrid.large-up-1 .column:last-child:after { content:normal; } .blockGrid.large-up-1 .teaser a { display:initial; outline:none; box-shadow:none; } .blockGrid.large-up-1 .teaser div.text, .blockGrid.large-up-1 .teaser div.image { display:inline-block; vertical-align:middle; max-width:calc(60% - 1em); margin-bottom:0; padding:0; } .blockGrid.large-up-1 .teaser div.image { max-width:40%; margin-right:1em; float:left; } .blockGrid.large-up-1 .teaser div.text { background:none; } .blockGrid.large-up-1 .teaser div.text > h6.type { margin-bottom:0.5rem; } .blockGrid.large-up-1 .teaser div.text > h6.type:before { content:normal; } /* for block grids with more than the alloted children */ .blockGrid.large-up-2 .column:nth-child(n+3) { margin-top:2em; } .blockGrid.large-up-3 .column:nth-child(n+4) { margin-top:2em; } .blockGrid.large-up-4 .column:nth-child(n+5) { margin-top:2em; } .blockGrid.large-up-5 .column:nth-child(n+6) { margin-top:2em; } } /* Medium only */ @media screen and (min-width: 40em) and (max-width: 63.9375em) { .blockGrid.medium-up-1 .column { margin-bottom:1em; margin-top:1em; position:relative; } .blockGrid.medium-up-1 .column:after { content:''; position:absolute; left:0.9375rem; bottom: -0.75em; width:calc(100% - 1.875rem); height:1px; border-bottom:dashed 1px #cccccc; } .blockGrid.medium-up-1 .column:last-child:after { content:normal; } .blockGrid.medium-up-1 .teaser a { display:initial; outline:none; box-shadow:none; } .blockGrid.medium-up-1 .teaser div.text, .blockGrid.medium-up-1 .teaser div.image { display:inline-block; vertical-align:middle; max-width:calc(70% - 1em); margin-bottom:0; padding:0; } .blockGrid.medium-up-1 .teaser div.image { max-width:30%; margin-right:1em; float:left; } .blockGrid.medium-up-1 .teaser div.text { background:none; } .blockGrid.medium-up-1 .teaser div.text > h6.type { margin-bottom:0.5rem; } .blockGrid.medium-up-1 .teaser div.text > h6.type:before { content:normal; } /* for block grids with more than the alloted children */ .blockGrid.medium-up-2 .column:nth-child(n+3) { margin-top:2em; } .blockGrid.medium-up-3 .column:nth-child(n+4) { margin-top:2em; } .blockGrid.medium-up-4 .column:nth-child(n+5) { margin-top:2em; } .blockGrid.medium-up-5 .column:nth-child(n+6) { margin-top:2em; } } /* Mobile */ @media only screen and (max-width:40em) { .blockGrid { display: block; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; padding: 0 0 2em 1em; margin: 2em auto; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; } } /* cmCarouselTile */ .tileCarousel { margin:0em auto; background:inherit; } .tileCarousel.active { overflow-x:hidden; overflow-y:visible; position:relative; padding:0.5em 0.5em 4em 0.5em; } .tileCarousel.active .container { width:100%; margin-left:0; transition:margin-left 0.25s ease-in-out; background:inherit; } .tileCarousel.active .container > .row { max-width:none !important; background:inherit; } .tileCarousel.active .container > .row .column { clear:none !important; } .tileCarousel.active .arrow { position:absolute; bottom:5px; cursor:pointer; } .tileCarousel.active .arrow.inactive { cursor:default; } .tileCarousel.active .arrow.left { left:calc(50% - 2.75em); } .tileCarousel.active .arrow.right { right:calc(50% - 2.75em); } .tileCarousel.active .arrow.left i.fa:before { padding-right: 0.1em; } .tileCarousel.active .arrow.right i.fa:before { padding-left: 0.1em; } .tileCarousel.active .arrow i { border-radius: 1000px; font-size: 1.3em; height: 2em; width: 2em; text-align: center; vertical-align: middle; position: relative; } .tileCarousel.active .arrow.inactive i { filter: grayscale(100%) opacity(50%); } .tileCarousel.active .arrow i.fa:before { position: absolute; top: 50%; left: 50%; font-size:1.2em; transform: translateY(-50%) translateX(-50%); } .tileCarousel .mobileDots { position:absolute; width:100%; text-align:center; margin: 0.25em auto 0.5em auto; } .tileCarousel .mobileDots ul { position: relative; display: inline-block; margin: 0; padding: 0; list-style: none; cursor: default; } .tileCarousel .mobileDots ul li { position: relative; display: block; float: left; margin: 0 2px; width: 6px; height: 6px; background-color:rgba(0,0,0,0.3); border-radius: 1000px; } .tileCarousel .mobileDots ul li.active { background-color:rgba(0,0,0,0.75); } .tileCarousel.additionalReading.active { overflow-x:hidden; overflow-y:hidden; padding:0.5em 0.8em 0em 0.8em; } .tileCarousel.additionalReading.active .container > .row .column { padding:0 3em; } .tileCarousel.additionalReading.active .arrow { top:15%; bottom:auto; } .tileCarousel.additionalReading.active .arrow.left { left: 0; } .tileCarousel.additionalReading.active .arrow.right { right: 0; } @media screen and (max-width: 1250px) { .tileCarousel.additionalReading.active .arrow.left { left: 15px; } .tileCarousel.additionalReading.active .arrow.right { right: 15px; } } /* Mobile */ @media only screen and (max-width:40em){ .additionalReading.active .arrow { display: none; } .tileCarousel.active { padding: 0.5em 2em 1em 0em; margin: 0; } .tileCarousel.active .arrow { display:none; } section.statsAndFacts .tileCarousel.active { padding:0.5em 0 1em 0; overflow-y: visible; } section.statsAndFacts .tileCarousel.active .arrow { display:block; } .tileCarousel.additionalReading.active { padding:0.5em 0 1em 0; overflow-y: visible; } .tileCarousel.additionalReading.active .arrow { top:auto; bottom:0px; display:none; } .tileCarousel.additionalReading.active .arrow.left { left:calc(50% - 2.75em); } .tileCarousel.additionalReading.active .arrow.right { right:calc(50% - 2.75em);} /* .tileCarousel.additionalReading.active .container > .row .column { display: inline-block; position: relative; float: none !important; margin-bottom: 0; width: 85% !important; padding: 0 0.625rem; } .tileCarousel.additionalReading.active .container > .row .column > a { display: block !important; box-shadow: 0px 0px 5px rgba(0,0,0,0.2) !important; } .tileCarousel.additionalReading.active .container > .row .column > a > div.image { max-width: none !important; margin-right: initial !important; float: none !important; } .teaser.additionalReading > a > div.text, .teaser.additionalReading > a > div.image { display: block !important; vertical-align: middle !important; max-width: none !important; padding: 0.5em 1.5em 1.5em 1.5em;} .teaser.additionalReading > a > div.text { padding: 0.5em 1.5em 1.5em 1.5em !important; background: #ffffff !important; white-space: normal !important; } .teaser.additionalReading > a > div.text h6 { margin-bottom: 1rem !important; } .teaser.additionalReading > a > div.text h6:before { content: '' !important; position: absolute !important; height: 1px !important; border-bottom: dashed 1px #cccccc !important; left: -1.2em !important; bottom: -0.5em !important; right: -1.2em !important; } .tileCarousel.additionalReading .container { width: 100% !important; } .tileCarousel.additionalReading .container > .row { max-width: none !important; background: inherit; display: block; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; padding: 0 0 2em 1em; margin: 2em auto;} .tileCarousel.additionalReading .arrow { display: none !important; }*/ } /* 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; } .cmTabBlocks .tabs-content .helpWrapper { display:inline-block; vertical-align:middle; width:85%; margin-left:1em; } /* 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; font-family: "freight-sans-pro",sans-serif; 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; } } /* cmSuperTabBlocks */ .cmSuperTabBlocks { } /* so we only have :hover on large and up */ @media screen and (min-width: 64em) { } /* Tablet */ @media screen and (max-width: 64em) { } /* Mobile */ @media only screen and (max-width:40em){ } /* ------------------------------------------------------------ *\ Social Sharing \* ------------------------------------------------------------ */ .social.share { margin:0.5em 0; } .social.follow { } .social.share > h6 { color:#185973; margin:0.15em 0.5em 0 0; display:block; vertical-align:middle; } .social > a { margin:auto 0.1em; color:#185973; } .social > a i { border-radius: 1000px; border: solid 2px #185973; font-size: 1.3em; height: 2em; width: 2em; text-align: center; vertical-align: middle; position: relative; } .social > a i.fa:before { position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); } .social > a.reverse { color:#25A9BF; } .social > a.reverse i { color:#ffffff; border:solid 2px #95D4BA; } @media screen and (min-width: 64em) { .social > a i { -webkit-transition:background 0.25s ease; transition:background 0.25s ease; } .social > a:hover i { background:#185973; color:#ffffff; } .social > a.reverse:hover i { background:#95D4BA; color:#ffffff; } .social.share > h6 { display:inline-block; } } /* Mobile */ @media only screen and (max-width:40em) { .social.share > h6 { display:block; margin-bottom:0.5em; } .social.follow h6 { font-size:100%; margin-botton:0.5em; } .social.follow a { margin:auto 0em; } } @media print { .social { display:none; width:0; height:0; } } /* ------------------------------------------------------------ *\ Helpers \* ------------------------------------------------------------ */ .stat { } span.badge { } span.badge.secondary { } span.badge.success { } span.badge.alert { } span.badge.warning { } label.badge { } label.badge.secondary { } label.badge.success { } label.badge.alert { } label.badge.warning { } .verticalCenter { position:relative; top:50%; transform:translateY(-50%); } .flexbox { display:flex; } .flexCenter { margin-top:auto; margin-bottom:auto; } /* Mobile */ @media only screen and (max-width:64em) { section:not(.intro):not(.pillars) .flexbox:not(.featured) { display:block; } section:not(.intro):not(.pillars) .flexbox:not(.featured) .flexCenter { margin-top:auto; margin-bottom:auto; } } /* ------------------------------------------------------------ *\ displayPageHome \* ------------------------------------------------------------ */ /* Mobile */ @media only screen and (max-width:39.9375em) { } /* ------------------------------------------------------------ *\ displayPagePillars \* ------------------------------------------------------------ */ .pillar.intro.introBox .pillarText { padding:4em; } .introContinued ul { margin:2em 0 2em 2em; } /* Mobile */ @media only screen and (max-width:39.9375em) { .pillar.intro.introBox .pillarText { padding:2em; } } /* ------------------------------------------------------------ *\ displayPageMission \* ------------------------------------------------------------ */ .sponsor { margin:2em auto 3em auto; padding:1em 0 0.5em 0; } .sponsor.blueGradient { background-image: linear-gradient(to left, #185973 10%, #25A9BF 100%); } .sponsors { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } /* Mobile */ @media only screen and (max-width:39.9375em) { } /* ------------------------------------------------------------ *\ displayPageStandard \* ------------------------------------------------------------ */ /* Mobile */ @media only screen and (max-width:39.9375em) { } /* ------------------------------------------------------------ *\ displayPageStandard cmBlog \* ------------------------------------------------------------ */ article.cmBlog {} .authorSourceDate h6 { display:inline-block; } article.cmBlog p.lead { margin-bottom:2em; } article.cmBlog .image { float:right; padding:0 0 2em 2em; } article.cmBlog blockquote { position:relative; text-align:center; background-image: linear-gradient(to left, #185973 10%, #25A9BF 100%); margin:2.5em auto 1.5em auto; padding:2em 2em 1.5em 2em; font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; line-height:1.05; color:#ffffff; font-weight:700; font-size:2em; } article.cmBlog blockquote:before { content: '\201C'; font-weight: bold; position: absolute; height: 1em; width: 1em; background-image: linear-gradient(to left, #185973 10%, #25A9BF 100%); border-radius: 1000px; border: solid 2px #ffffff; font-size: 2.5em; line-height: 1.25; text-align: center; left: 50%; margin-left: -0.5em; top: 0; margin-top: -0.5em; } article.cmBlog blockquote cite { color:#ffffff; margin-top:1em; font-weight:400; } article.cmBlog h1, article.cmBlog h2, article.cmBlog h3, article.cmBlog h4, article.cmBlog h5, article.cmBlog h6 { color:#185973; margin-top:1em; } /* Mobile */ @media only screen and (max-width:39.9375em) { } /* ------------------------------------------------------------ *\ 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; 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; } .cmQuestion > .text > .question > .topper:before { content: ''; background-image: url(/images/NASPA_AlphabetIconSprite.png); background-size: 1200px auto; background-position: 0.4% 2%; height: 6em; position: relative; display: block; } .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) { } /* ------------------------------------------------------------ *\ displayTeaserStandard \* ------------------------------------------------------------ */ .teaser { } .teaser p { font-size:94%; } .teaser > a { display:block; box-shadow:0px 0px 5px rgba(0,0,0,0.2); } .teaser > a > div.text { padding:0.5em 1.5em 1.5em 1.5em; background:#ffffff; } .teaser div.image { background-image: linear-gradient(to left, #25A9BF 0%, #65A98C 100%); } .teaser div.text > p:last-of-type { margin-bottom:0; } .teaser div.text > h6.type { position:relative; margin-bottom:1em; } .teaser div.text > h6.type:before { content: ''; position: absolute; height: 1px; border-bottom: dashed 1px #cccccc; left: -1.2em; bottom: -0.5em; right: -1.2em; } .teaser.community div.image { background-image:none; margin-bottom:1em; } .teaser.community > a { display:block; outline:none; } .teaser.community a:not(.button):hover, .teaser.community a:not(.button):focus { background-image: linear-gradient(to left top, #185973 10%, #25A9BF 100%); } .teaser.community a:not(.button):hover img:not(.imageHover), .teaser.community a:not(.button):focus img:not(.imageHover) { opacity: 0; } .teaser.community a:not(.button):hover .imageHover, .teaser.community a:not(.button):focus .imageHover { opacity: 1; } .teaser.community a:not(.button):hover *, .teaser.community a:not(.button):focus * { color: #fff; } .teaser.community a:not(.button) { display:block; position:relative; background:#ffffff; padding: 2em 1em 1em 1em; box-shadow:0px 0px 5px rgba(0,0,0,0.25); -webkit-transition:all 0.25s ease-in-out; transition:all 0.25 ease-in-out; } .teaser.community a > div.image { margin-bottom:1em; } .teaser.community a > div.image > img.imageHover { position: absolute; left: 0; opacity: 0; -webkit-transition:opacity 0.25s ease-in-out; transition:opactiy 0.25s ease-in-out; } .teaser.community > a > div.text { padding:0em; background:none; } .teaser.community a:not(.button) h3 {font-size: 1.6rem !important;} .tileCarousel .medium-up-2 .teaser.cmStatistics:nth-child(1), .tileCarousel .large-up-2 .teaser.cmStatistics:nth-child(1) { border-right:dashed 1px #ffffff; } .tileCarousel .medium-up-3 .teaser.cmStatistics:nth-child(2), .tileCarousel .large-up-3 .teaser.cmStatistics:nth-child(2) { border-left:dashed 1px #ffffff; border-right:dashed 1px #ffffff; } .teaser.cmStatistics { padding:0 2em; } .teaser.cmStatistics > .text p { color:#ffffff; } .teaser.cmStatistics > .text p:first-of-type { } .teaser.cmStatistics > .text { text-align: center; } .teaser.cmStatistics > .image { background-image:none; } .teaser.cmStatistics > .image img { max-width:40%; } .teaser.cmNews div.image, .teaser.cmBlog div.image, .teaser.cmInterview div.image { margin-bottom:0; } .teaser.cmNews > a, .teaser.cmBlog > a, .teaser.cmInterview > a { display:block; } .teaser.cmNews > a > div.text, .teaser.cmBlog > a > div.text, .teaser.cmInterview > a > div.text { padding:1em 1.5em 1.5em 1.5em; background:#ffffff; } .teaser .source { border-top:dashed 1px rgba(0, 0, 0, 0.1); background:#ffffff; padding:0.5em 1.5em; } .teaser .source > div.image { max-width: 50px; border-radius: 1000px; overflow: hidden; display: inline-block; vertical-align: middle; margin-bottom: 0; } .teaser .source > div.text { display:inline-block; margin-left:0.5em; max-width: calc(100% - 4em); vertical-align: middle;} .teaser .source > div.text h6 { line-height: 1; margin-bottom: 0; } .teaser.cmFAQ > .card { position:relative; background:#ffffff; padding:0; box-shadow:0px 0px 5px rgba(0,0,0,0.2); margin-top:4em; outline:solid 1px #ccc; -webkit-transition:all 0.25s ease-in-out; transform:all 0.25s ease-in-out; } .teaser.cmFAQ > .card div.text { padding:3em 0 0 0; margin-bottom:1em; background:none; } .teaser.cmFAQ > .card div.text h4, .teaser.cmFAQ > .card div.text p { position: relative; top: 50%; transform: translateY(-50%); text-align: center; } .teaser.cmFAQ > .card div.text h4 { line-height:1.3; } .teaser.cmFAQ > .card div.text p { line-height:1.6; } .teaser.cmFAQ > .card .topper { width: 4.5em; height: 4.5em; position: absolute; top: -2.5em; left: 50%; margin-left: -2.5em; border-radius: 1000px; text-align: center; } .teaser.cmFAQ > .card > .front > .topper:before { content: ''; background-image: url(/images/NASPA_AlphabetIconSprite.png); background-size: 960px auto; background-position: 0.5% 2.8%; height: 4.5em; width: 4.5em; position: absolute; left:0; } .teaser.cmFAQ > .card > .back > .topper:before { content: ''; background-image: url(/images/NASPA_AlphabetIconSprite.png); background-size: 960px auto; background-position: 9.4% 2.8%; height: 4.5em; width: 4.5em; position: absolute; left:0; } .teaser.cmFAQ > .card > .front, .teaser.cmFAQ > .card > .back { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25 ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; } .teaser.cmFAQ > .card > .front { padding: 0em .5em 1em .5em; } .teaser.cmFAQ > .card > .back { position: absolute; top: 0; left:0; width: 100%; height: 100%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); padding: 0em 2em 1em 2em; } .teaser.cmFAQ > .card.flipped > .front { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .teaser.cmFAQ > .card.flipped > .back {-webkit-transform: rotateY(0deg); transform: rotateY(0deg);} .teaser.cmFAQ.showMe > .card { box-shadow: 0px 0px 20px rgba(0,0,0, 1); outline: solid 10px rgb(149, 212, 186); } .teaser.cmKeyTerms > .card { position:relative; background:#ffffff; box-shadow:0px 0px 5px rgba(0,0,0,0.2); padding: 0em 2em 1em 2em; margin-top:3em; outline:solid 1px #ccc; -webkit-transition:all 0.25s ease-in-out; transform:all 0.25s ease-in-out; } .teaser.cmKeyTerms > .card div.text { padding:3em 0 0 0; margin-bottom:1em; background:none; text-align:center; } .teaser.cmKeyTerms > .card div.text h4 { margin-bottom:0.75rem; } .teaser.cmKeyTerms > .card .topper { color: #fff; font-weight: 700; font-size: 3em; font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; line-height: 1.25; position: absolute; top: -0.75em; left: 50%; width: 1.5em; height: 1.5em; border:solid 2px #ffffff; margin-left: -0.75em; border-radius: 1000px; background-image: linear-gradient(to left top, #185973 10%, #25A9BF 100%); text-align: center; } .teaser.cmKeyTerms > .card > .front, .teaser.cmKeyTerms > .card > .back { -webkit-transition:all 0.25s ease-in-out; transition:all 0.25 ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform-style: preserve-3d; } .teaser.cmKeyTerms > .card > .back { position: absolute; top: 0; left:0; width: 100%; height: 100%; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); padding: 0em 2em 1em 2em; } .teaser.cmKeyTerms > .card.flipped > .front { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .teaser.cmKeyTerms > .card.flipped > .back {-webkit-transform: rotateY(0deg); transform: rotateY(0deg);} .teaser.cmKeyTerms.showMe > .card { box-shadow: 0px 0px 20px rgba(0,0,0, 1); outline: solid 10px rgb(149, 212, 186); } .teaser.additionalReading { margin-bottom:2em; position:relative; } .teaser.additionalReading > a { display:initial; outline:none; box-shadow:none; } .teaser.additionalReading > a > div.text { background:none; } .teaser.additionalReading > a > div.text, .teaser.additionalReading > a > div.image { display:inline-block; vertical-align:middle; max-width:calc(60% - 1em); margin-bottom:0; padding:0; } .teaser.additionalReading > a > div.image { max-width:40%; margin-right:1em; float:left; } .teaser.additionalReading > a > div.text > h6.type { margin-bottom:0.5rem; } .teaser.additionalReading > a > div.text > h6.type:before { content:normal; } .teaser.dmHTML > a > div.text { padding:1.5em 1.5em 1.5em 1.5em; background:#ffffff; } .teaser.dmHTML div.action { padding:0.5em 1.5em 0.5em 1.5em; background:#ffffff; } .teaser.search { margin-bottom:2em; position:relative; } .teaser.search > a { display:initial; outline:none; box-shadow:none; } .teaser.search > a > div.text { background:none; } .teaser.search > a > div.text, .teaser.search > a > div.image { display:inline-block; vertical-align:middle; max-width:calc(80% - 1em); margin-bottom:0; padding:0; } .teaser.search > a > div.image { max-width:20%; margin-right:1em; float:left; } .teaser.search > a > div.text > h6.type { margin-bottom:0.5rem; } .teaser.search > a > div.text > h6.type:before { content:normal; } .teaser.search > .faqSearch { outline: solid 1px #dde7e8; background: #EEF9FA; padding: 1.5em 1.5em 0.5em 1.5em; } .teaser.search > .faqSearch > div.image, .teaser.search > .faqSearch > div.text { display:inline-block; vertical-align:middle; max-width:calc(80% - 1em); margin-bottom:0; padding:0; } .teaser.search > .faqSearch > div.text .button { min-width:30%; } .teaser.search > .faqSearch > div.image { max-width:40%; margin-right:1em; float:left; background:none; } .teaser.search > .faqSearch > div.image .sideTopper { width: 4.5em; height: 4.5em; position: relative; border-radius: 1000px; text-align: center; } .teaser.search > .faqSearch > div.image .sideTopper:before { content: ''; background-image: url(/images/NASPA_AlphabetIconSprite.png); background-size: 960px auto; background-position: 0.5% 2.8%; height: 4.5em; width: 4.5em; position: absolute; left:0; } .teaser.search > .keyTermsSearch { outline: solid 1px #dde7e8; background: #EEF9FA; padding: 1.5em 1.5em 0.5em 1.5em; } .teaser.search > .keyTermsSearch > div.image, .teaser.search > .keyTermsSearch > div.text { display:inline-block; vertical-align:middle; max-width:calc(80% - 1em); margin-bottom:0; padding:0; } .teaser.search > .keyTermsSearch > div.text .button { min-width:30%; } .teaser.search > .keyTermsSearch > div.image { max-width:40%; margin-right:1em; float:left; background:none; } .teaser.search > .keyTermsSearch > div.image .sideTopper { color: #fff; font-weight: 700; font-size: 3em; font-family:"acumin-pro", "Franklin Gothic Bold", "Arial Black", sans-serif; line-height: 1.25; width: 1.5em; height: 1.5em; border:solid 2px #ffffff; border-radius: 1000px; background-image: linear-gradient(to left top, #185973 10%, #25A9BF 100%); text-align: center; } /* large hover only */ @media screen and (min-width: 64em) { .teaser a:not(.button) > div.text > h5 { transition:color 0.25s ease; } .teaser a:not(.button):hover > div.text > h5 { color:#65A98C; } .teaser a > div.image > img { transition:opacity 0.25s ease; } .teaser a:not(.buttn):hover > div.image > img { opacity:0.25; } .teaser.community a:not(.button):hover > div.text { color:inherit; } .teaser.community a > div.text, .teaser.community a > div.image { position:relative; z-index:2; } .teaser.community a:not(.button):hover { transform:scale(1.05); } .teaser.community a:not(.button):hover > div.text > p, .teaser.community a:not(.button):hover > div.text > h3, .teaser.community a:not(.button):hover > div.text > p a.button { color:#ffffff; } .teaser.community a:not(.button):hover > div.image > img.imageHover { opacity:1; } .teaser.community a:not(.button):after { position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to left top, #185973 10%, #25A9BF 100%); transition: opacity 0.25s ease-out; z-index:1; opacity: 0; } .teaser.community a:not(.button):hover:after { opacity: 1; } .teaser.community a:not(.button) { padding: 2em 2em 1em 2em; } .teaser.community a:not(.button) h3 {font-size: 1.9375rem;} .teaser.cmFAQ > .card > .front { padding: 0em 2em 1em 2em; } } /* Mobile */ @media only screen and (max-width:39.9375em) { .teaser { margin-bottom:1em; } .teaser.community a:not(.button) h3 {font-size: 1.9375rem;} .teaser.cmStatistics { border-right:none; border-left:none; } .teaser.additionalReading { width: 85% !important; } .teaser.additionalReading > a { display: block; box-shadow: 0px 0px 5px rgba(0,0,0,0.2); } .teaser.additionalReading > a > div.text, .teaser.additionalReading > a > div.image { max-width: none; } .teaser.additionalReading > a > div.image { margin-right: initial; float: none; } .teaser.additionalReading > a > div.text { padding: 0.5em 1.5em 1.5em 1.5em; background: #ffffff; } .teaser.featured .columns:first-child {height: 300px; } .teaser div.text > p:last-of-type {margin-bottom: 1rem; } .blockGrid .teaser { display: inline-block; position: relative; float: none !important; margin-bottom: 0; width: 85%; } .blockGrid .teaser div.text { float:left; } .blockGrid .teaser div.text h3, .blockGrid .teaser div.text h5, .blockGrid .teaser div.text h6, .blockGrid .teaser div.text p { white-space: pre-wrap; } .blockGrid .teaser .clearFloat { clear:left; } .blockGrid .teaser.cmBlog div.text, .blockGrid .teaser.cmNews div.text, .blockGrid .teaser.cmInterview div.text { clear:left; } .blockGrid .teaser.cmBlog div.source, .blockGrid .teaser.cmNews div.source, .blockGrid .teaser.cmInterview div.source { float:left; width: 100% } .blockGrid .teaser.cmBlog div.source div.text, .blockGrid .teaser.cmNews div.source div.text, .blockGrid .teaser.cmInterview div.source div.text { float:none; } .teaser.cmKeyTerms > .card { margin-top: 2em; } .teaser.dmHTML div.text, .teaser.cmKeyTerms div.text { float:none; } .flexbox {display: block;} section.standard .blockGrid {padding: 0 0 2em 0; } section.standard .blockGrid .teaser { float: right !important; margin-bottom: 1rem; width: 100%; } } /* ------------------------------------------------------------ *\ displayTeaserFeatured \* ------------------------------------------------------------ */ .teaser.featured { max-width: calc(75rem - 1.875rem); box-shadow:0px 0px 5px rgba(0,0,0,0.2); } .teaser.featured .columns { padding-right: 0; padding-left: 0; position:relative; display:flex; flex-direction:column; } .teaser.featured .columns { background-size:cover; background-position:center; } .teaser.featured div.text { margin-bottom:auto; padding:4em; } .teaser.featured div.source { margin-top:auto; background:none; border-top:dashed 1px rgba(255, 255, 255, 0.35); } .teaser.featured div.source > div.text { padding:0; } .teaser.featured div.source > div.text h6 { color:#ffffff; } @media only screen and (max-width:39.9375em) { .teaser.featured .blueGradient { background-image:none; background-color:#ffffff; } .teaser.featured div.text { margin-bottom:auto; padding:2em; } .teaser.featured div.text h3 { color:#185973; } .teaser.featured div.text p { color:#4A4A4A; } .teaser.featured div.text a.reverse { color:#185973; } .teaser.featured div.source { border-top: dashed 1px rgba(0, 0, 0, 0.1); } .teaser.featured div.source > div.text h6 { color:#25A9BF; } } .bar { color: #fff; padding: 1.5em 1em 1em 1em; background: #185973; width: 100%; z-index: 1; opacity:0; transition:opacity 0.5s ease; } .bar.is-stuck { opacity:1; } /* Tablet */ @media screen and (max-width: 64em) { .bar { color: #fff; padding: 2.5em 1em 1em 1em; } } /* Mobile */ @media only screen and (max-width:40em){ }