:root { --fivenine: #595959; --darkblue: #233A65; --midblue: #0099D7; --lightblue: #92D5F0; --hover_red:#d12233; --form-padding:28px; --courses-padding:20px; } @media screen and (min-width:601px) and (max-width:1023px){ :root { --form-padding: 24px; --courses-padding:20px; } } @media screen and (max-width:600px){ :root { --form-padding: 20px; --courses-padding:18px; } } #logo { display: flex; align-items: center; } #logo p:not(.healogo) { margin: 0; font-size: 16px; line-height: 19px; min-width: 174px;max-width: 174px; position: relative; padding-left:1rem; color:var(--darkblue); } #logo p:not(.healogo)::before { position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: block; content:""; height: 74px; width: 0; border-left: 1px solid var(--darkblue); } #hero #logo p:not(.healogo) { color:white; } #hero #logo p:not(.healogo)::before { border-left: 1px solid white; } .healogo { min-width:350px;} .healogo a { width:auto; margin-left:3rem; margin-right:1rem; background: url(images/nto_2024.png) no-repeat left center; background-size:contain; } #hero .healogo a { background-image:url(images/nto_2024_white.png) } p.location a::after, #designer a::after, .healogo a::after, .healogo a::before { display:none; } .healogo a::after { content:""; color:#d12233; } .healogo a::before { content:""; color:#134267; color:#0068A4;} .healogo a { margin-left: 0 !important;} @media all and (max-width: 650px) { #logo p:not(.healogo) { display:none; } } @media all and (min-width: 1px) and (max-width: 600px) { #logo p:not(.healogo) { display:none; } #logo { width: auto; } #logo .healogo a {height: 0; width: 250px; margin:0 !important;} #navside { width: auto; float: right; height: 74px; } .hamburger { height: 74px; line-height: 68px;} #hero #masthead { padding-bottom:2.4rem;} } #logo .healogo, #mastheadwrapper { overflow: visible !important;} @media all and (min-width: 1601px) { } @media all and (min-width:1301px) and (max-width: 1600px) { #logo .healogo a { padding-bottom:74px; margin-left:3rem;} } @media all and (min-width:1024px) and (max-width: 1300px) { #logo .healogo a { padding-bottom:74px; margin-left:3rem; } } @media screen and (min-width:851px) and (max-width:1023px){ #logo .healogo a { padding-bottom:74px; margin-left:3rem; } } @media screen and (min-width:601px) and (max-width:850px){ #logo .healogo a { padding-bottom:74px; margin-left:3rem; } } @media screen and (max-width:600px){ #logo .healogo a { padding-bottom:74px; margin:0 0 1rem 0;} #logo .healogo a::after, #logo .healogo a::before { font-size:10vw ; } } @media screen and (min-width:1025px) and (max-width:1300px){ #logo { width:calc(33.3333% - ((36px * 2) / 3)); } } @media screen and (min-width:851px) and (max-width:1023px){ #logo { width:calc(2 * (33.33333% - ((36px * 2) / 3)) + 36px); } } @media screen and (min-width:1px) and (max-width:850px){ #logo {width:calc(50% - ((36px * 1) / 2) + 36px); } } /*@media screen and (max-width:450px){ */ @media screen and (max-width:600px){ /*#logo {width:100%; margin-right:0; } #logo .healogo a { padding-bottom:19.5%; margin-left:0;}*/ } #mainnav nav > ul > li:last-child > a { padding-right:0 !important; } @media screen and (min-width:1601px){ #mainnav nav > ul > li { font-size:1.8rem; } #mainnav nav > ul > li > a { padding:0 1em; } } @media screen and (min-width:1251px) and (max-width:1600px){ #mainnav nav > ul > li { font-size:1.6rem; left:-0.6666666666666667em; } #mainnav nav > ul > li > a { padding:0 0.75em; } #mainnav nav > ul > li a::after { margin-left:0.3333333em; } } @media screen and (min-width:1151px) and (max-width:1250px){ #mainnav nav > ul > li { font-size:1.6rem; left:-0.6666666666666667em; } #mainnav nav > ul > li > a { padding:0 0.75em; } #mainnav nav > ul > li a::after { margin-left:0.3333333em; } } @media screen and (min-width:1120px) and (max-width:1150px){ #mainnav nav > ul > li { font-size:1.6rem; left:-0.625em; } #mainnav nav > ul > li > a { padding:0 0.625em; } #mainnav nav > ul > li > a::after { margin-left:0.3333333em; } } @media screen and (min-width:1024px) and (max-width:1120px){ #mainnav nav > ul > li { font-size:1.5rem; left:-0.625em; } #mainnav nav > ul > li > a { padding:0 0.625em; } #mainnav nav > ul > li > a::after { margin-left:0.3333333em; } } /*#mainnav { background:rgba(0,0,255,0.2); } #navside { background:rgba(255,0,255,0.2); } @media screen and (min-width:601px) and (max-width:1100px){ */ @media screen and (min-width:1150px) and (max-width:1300px){ #mainnav { width:calc(53.5% - ((36px * 1) / 2) + 36px); } #navside { float:right; width:calc(9.5% + 36px) !important; height:74px;} } @media all and (min-width: 1024px) { .hamburger {display:block;} #mainnav { display:none; } } @media all and (min-width: 1150px) { .hamburger {display:none;} } @media screen and (min-width:851px) and (max-width:1149px){ #navside { float:right; width:calc(33.333333333333% - ((36px * 2) / 3)); height:74px;} #mainnav { } } @media screen and (min-width:1150px){ #navside { } #mainnav { display:block; height:74px; } } @media screen and (max-width:1149px) and (min-width:801px){ .showsearch, .hamburger, #navside ul.social li { font-size:3rem; height:74px; line-height:68px; } #navside ul.social li { margin-right:2rem;} } #mainnav { width:auto!important; float: right; } #mainnav nav > ul { display: flex; justify-content: flex-end; } #mainnav nav > ul > li { float: none; font-size: 1.8rem !important;} #mainnav nav > ul > li > a { padding:0 2em; } #projectsmenu h2 { border-bottom:1px solid #000; color:#000; margin-bottom:1rem; } #projectsmenu .menu ul li a { /*border-bottom:1px solid rgba(0,0,0,0.38) !important; color:#000 !important;*/ line-height:1.3; padding-top:0.75em; padding-bottom:0.75em;} #projectsmenu .menu ul li.opened a { background:none !important; color:black;} #projectsmenu .menu ul li.opened a:hover { color:#a80562 !important; } #projectsmenu .menu>ul>li>a { padding-right:2em; height:3.9em; font-weight:600; } #projectsmenu a { background:none !important; } #projectsmenu .menu > ul > li.opened > a, #projectsmenu .menu li.subsubopen > a { background:none !important; color:000 !important; padding-left:0 !important; } #projectsmenu .menu { margin-bottom:0 !important;} #projectsmenu span.navopener { margin-top:1rem; color:#000 !important; height:3.9em; transition:all 0.1s ease;} #projectsmenu span.navopener::after { line-height:3.9em;} #projectsmenu span.navopener:hover { color:#000 !important; -ms-transform: scale(1.333, 1.333); /* IE 9 */ -webkit-transform: scale(1.333, 1.333); /* Safari */ transform: scale(1.333, 1.333); } #mobilenav #projectslistmenu h2 { margin: 0 !important; } #mobilenav #projectslistmenu #projectsmenu { padding: 0 10px 10px !important; } #mobilenav #projectslistmenu .projectsnav ul, #projectslistmenu .projectsnav ul * { } #mobilenav .projectsnav>ul>li { margin:0 !important; } #mobilenav .projectsnav>ul>li>a { height:auto !important; font-weight:400 !important; } /*#projectsmenu .projectsnav, #projectsmenu .projectsnav:nth-child(3n+4) {float:left; margin:0 36px 36px 0 !important; width:calc(25% - ((36px * 3) / 4)) !important; } */ #mobilenav #projectslistmenu .projectsnav:nth-child(3n+4), #mobilenav #projectslistmenu .menu, #mobilenav #projectslistmenu .menu ul{ width:100% !important; margin:0 !important; display:block; float: none !important; clear:both !important;} #mobilenav .projectsnav>ul>li>a span.hyphen { display:inline; } #mobilenav .projectsnav>ul>li>a br { display:none !important; } #mobilenav .projectsnav ul li a strong {font-weight:500 !important; } #mobilenav .projectsnav ul li a strong::after { font-family:icons; content:"\e900"; position:relative; top:0.15em; margin-left:0.5em; font-weight:normal !important;} #mobilenav .projectsnav ul>li>ul li a { } #mainnav .subopener { color:inherit !important; } #mainnav span.navopener::after { font-family:icons; content:"\e917"; color:#000; } #mainnav li.opened > span.navopener::after {content:"\e914"; color:#FFF; } #mainnav #projectsmenu li.opened > span.navopener::after { color:#000 !important; } #mainnav span.navopener:hover::after { color:#d12233;} #mainnav span.navopener:hover { color:#d12233; -ms-transform: scale(1.333, 1.333); /* IE 9 */ -webkit-transform: scale(1.333, 1.333); /* Safari */ transform: scale(1.333, 1.333); } @media screen and (max-width: 600px) { h1 { font-size: 2.4rem; } } body { background: #252525; } #fullsitemap { display: none; } p a[href*="//"]:not([href*="nto."])::after, p.cta a[href*="//"]:not([href*="nto."])::after { content: "" !important; position: absolute } /* p a[href*="//"]:not([href*="irc.newgraphic.ie"])::after,*/ p.cta a[href*="//"]:not([href*="nto."])::after { font-family: 'icons'; content: "\e906" !important; position: relative; top: 50%; transform: translateY(-50%); font-weight: normal; margin-left: 0.8em; } p a[href*="//"][href*="nto."]::after, p.cta a[href*="//"][href*="nto."]::after { display: none; } p.cta a[href*="//"][href*="nto."]::after { display: none; } #hero #mainintro.intro { background: var(--darkblue); color: white; } #mainintro p { color: white; } #mainintro p a { /*white-space:nowrap;*/ padding: 0.75em 1em; } #mainintro p.cta { padding-top: 0.5em; position: static; } #mainintro p.cta a { background: white; color: var(--fivenine) !important; margin-top: auto; } #mainintro p.cta a:hover { background: #ed9f49; color: black !important; } .module .article, .module article { padding-bottom: 0 !important; display: flex; flex-direction: column; } /*.module .content { background:rgba(255,0,255,0.2); }*/ /* #451e76 69,30,118 var(--darkblue) 168,5,98 */ #twitterfeed h2 { color: var(--darkblue); } #hoosh { background: var(--darkblue); } .introbox { background: var(--darkblue); background: #451e76; } .module .subheading { color: var(--darkblue); } #fullsitemap { background: var(--darkblue); } #mobilenavbg { background: var(--darkblue); } #navcloser { background: var(--darkblue); color: #FFF; } #navcloser:hover { background: var(--midblue); color: #FFF; } #mobilenav nav > ul > li { color: var(--darkblue); } #mobilenav nav > ul > li > a { background: var(--darkblue); color: #FFF; } span.mobileopener:hover { color: var(--darkblue); } #mobilenav .submenu .menu li.subsubopen > a { background: white; color: var(--darkblue); } .submenu .menu a:hover { color: var(--midblue); } nav.tags li a { background: #f0f0f0; color: var(--darkblue); } nav.tags li a:hover { background: var(--darkblue); } nav.tags li a.current { background: var(--darkblue); } nav.tags li a.current::after { color: var(--darkblue); } .anchor_heading b.backtotop::after, #hero #mainnav nav > ul > li a.subopen { color: var(--darkblue); } .anchor_heading b.backtotop { border-bottom: none;} #footernew { padding-top: 40px; background: var(--lightblue); overflow: hidden; padding: 0; border-top: 1px solid rgba(217, 217, 217, 0.64); } #footernew p#footerlogo { margin: 0; } #footernew p#footerlogo a::before, #footernew p#footerlogo a::after { content: "" !important; display: none; } #footernew p#footerlogo a { position: relative; height: 80px; background-size: contain !important; background: url(images/nto_2024.png) no-repeat left center; display: block; } #footernew p#footerlogo a { display: block; text-decoration: none; } #footernew p#footerlogo a span { display: block; height: 0; width: 0; position: absolute; left: -10px; top: 0; overflow: hidden; } #footernew .half { margin: 0 !important; } #footernew .footerlogoholder { position: relative; padding: 2.4rem 0 2.4rem; display: flex; flex-direction: column; justify-content: center; } #footernew .footerlogoholder::before { display: block; content: ""; background: white; background: white; width: calc(900px + 200px); /*left:-850px;*/ background: white; width: calc(100vw + 200px); right: 0; top: 50%; transform: skewX(-20deg) translateY(-50%); height: 200%; position: absolute; } #footer3 .col { } #footer .footerlogoholder { width: 100%; } @media screen and (min-width: 1024px) { #footer .footerlogoholder { width: calc(33.33333% - ((36px * 2) / 3)); width: 160px; width: 350px; } } @media screen and (min-width: 601px) and (max-width: 1023px) { #footer .footerlogoholder { width: calc(50% - ((36px * 1) / 2)); width: 160px; width: 250px; } } @media screen and (max-width: 600px) { /* #footer p#footerlogo a { height:40px; } #footer .footerlogoholder { margin-bottom:40px; }*/ #footernew .footerlogoholder::before { display: none; } #footernew { background: white; } } #footer p#eu span { display: block; padding-left: 120px; position: relative; top: -0.3em; max-width: 35em; } #footer p#eu::before { font-family: 'icons'; content: "\e904"; color: #0e2c8e; position: absolute; left: 0; top: 0; font-size: 60px; transform: translateY(-0.25em); } #footer p#eu::after { font-family: 'icons'; content: "\e905"; color: #fdff01; position: absolute; top: 0; left: 0; font-size: 60px; transform: translateY(-0.25em); } @media screen and (max-width: 600px) { #footer p#eu span { padding-left: 100px; } #footer p#eu::before, #footer p#eu::after { font-size: 50px; } } .anchor_heading, .anchor_heading b.backtotop, #subnav, .anchorholder, .sidebarnews ul li, #dateline p, .textcol aside blockquote, #masthead, .introwithheading hr, .introtext hr, hr { border-color: var(--darkblue) !important; } #mainnav nav > ul > li > a { color: var(--darkblue); } #mainnav nav > ul > li > a:hover { color: #451e76; } .hamburger { color: var(--darkblue); } .showsearch, #navside ul.social li a, #mainnav nav > ul > li a.subopen { color: var(--darkblue); } ul.social li.linkedin a svg { width: 42px; height: 42px; display: block; fill: white; } #navside ul.social li.linkedin { display: flex; } #navside ul.social li.linkedin a { flex: 1; display: flex; } body:not(.home) #navside ul.social li.linkedin a svg { fill: var(--darkblue); } #navside ul.social li.linkedin a svg { margin: auto; transform: translateY(-10%); } .anchorlinks li a:hover { color: var(--darkblue); } .anchorholder p { font-size: 1.6rem; line-height: 1.2; margin: 0; font-weight: 600; float: left; margin: 0.2em 1em 0 0; position: relative; top: 1px; } @media screen and (max-width: 600px) { .anchorholder p { display: block; margin: 0; padding: 8px 0 10px; float: none; top: 0; } } #breadcrumbs a, .anchorholder .anchorlinks li a { color: var(--darkblue); } #breadcrumbs a:hover { color: #7b0d4c; } #subnav ul li a, #sharing p { color: var(--darkblue); border-bottom: 1px solid var(--darkblue); } #sharelinks li a { color: var(--midblue); } #sharelinks li a:hover { color: var(--darkblue); } .newslist li p a { color: var(--darkblue) !important; } .newslist li p.cta a { border: 1px solid var(--darkblue); color: var(--darkblue) !important; } .newslist li p.cta a:hover { background: #FFF; color: var(--darkblue) !important; } .newslist li:hover:not(.tweet) { background: var(--darkblue) !important; color: #FFF !important; } .newslist li:hover p.cta a { background: #FFF; border-color: var(--darkblue); color: var(--darkblue) !important; } .newslist li:hover h3 a { color: #FFF !important; } .module header h2 a { color: white; text-decoration: none; display: block; } p.cta a { background: var(--darkblue); } p.cta a:hover { background-color: var(--midblue); } body.home #content .module header:hover { background: var(--darkblue) !important } body.home #content .module header:hover * { color: #FFF !important; } /* .introbox p.cta a { background:var(--darkblue); } .introbox p.cta a:hover { background-color:#7b0d4c; } */ ul.ctalist li a { background: var(--darkblue); } ul.ctalist li a.current { background: var(--midblue); /*background:rgba(69,30,118,1);*/ } ul.ctalist li a:hover { background-color: var(--lightblue); color: var(--fivenine); } p.download a { background-color: #00a7e0; } p.download a:hover { background-color: #1d517b; } .sidebarnews ul li a { color: var(--darkblue) !important; } .sidebarnews ul li a:hover, .openprofile header::after { color: var(--darkblue) !important; } .centredcta { clear: both; margin-left: auto; margin-right: auto; } .centredcta a { width: auto !important; text-align: center; } @media screen and (max-width: 1200px) { .centredcta a { max-width: calc(100% - 4em - 40px) !important; margin: 0 auto !important; } } .openprofile header, header.header, .module header { background: #451e76 !important; } .bx-controls .bx-pager-item a { background: rgba(140, 71, 150, 0.5); color: rgba(140, 71, 150, 0); } .bx-controls .bx-pager-item a.active { background: rgba(140, 71, 150, 1); } .bx-controls .bx-pager-item a.active::after { color: rgba(140, 71, 150, 1); } /* #451e76 69,30,118 var(--darkblue) 168,5,98 210,71,150 110,71,150 */ .module h3 a { color: var(--darkblue); } /*#451e76 69,30,118*/ .textcol table tr th, .textcol table tr, .textcol table td, .textcol table tr td, .textcol table { border-color: #666; } .textcol table tr th { background: none; color: black; font-weight: 600; } .textcol table tbody tr th:first-child { background: none; color: black; font-weight: 600; } #coursetext table, #coursetext table tr, #coursetext table td, #coursetext table th { border: none; width: auto; } #coursetext table td, #coursetext table th { padding: 0.5em 1em 0.5em 0; } #twitterfeed { padding: 2rem 0 1rem; background: rgba(240, 240, 240, 1); } #twitterfeed h2 { color: var(--darkblue) } /*#twitterfeed h2::before { background-size:contain !important; background: url(images/icons/loveirishresearch.svg) no-repeat center; padding:0.5em 1.5em; margin-right:0.5em; content:" "; }*/ #twitterfeed .newslist li.tweet { background: white; } #twitterfeed .newslist li p.tweet_text { color: #666; } #twitterfeed .newslist li p.tweet_text a { color: var(--darkblue); text-decoration: none; } #twitterfeed .newslist li p.tweet_text a:hover { text-decoration: underline; color: var(--darkblue) } #twitterfeed::after { content: ""; display: table; clear: both; } .profile p, p.profile_email { font-size: 1.6rem; } p.profile_email a { color: var(--darkblue); font-weight: 600; word-wrap: break-word; text-decoration: none; } p.profile_email a:hover { text-decoration: underline; } .openprofile p.profile_email a { color: white; } #content ul.ctagroup li { list-style: none !important; margin: 0 0 1rem !important; } ul.ctagroup li a { border: 1px solid var(--darkblue); color: var(--darkblue); background: white; display: block; padding: 0.5em; text-align: center; text-decoration: none; } ul.ctagroup li a:hover { background: var(--darkblue); color: white; } /*#content ul.ctagroup li:last-child { margin-bottom:0 !important; } */ .vidfeature { padding-top: 3rem !important; background: none; } .vidfeature::after { content: ""; clear: both; display: table; } .vidmodule { background: rgba(240, 240, 240, 1); padding: 0 !important; margin: 0 36px 0; position: relative; } .vidmodule h3 { height: 3em; text-align: center; padding: 0 1em 0.5em; } .vidmodule .vidholder { margin: 0 0 2rem !important; } @media all and (min-width: 1024px) { .vidmodule { width: calc(50% - 18px); float: left; padding: 0 !important; margin: 0 36px 36px 0; } .vidmodule:nth-child(2n+2) { margin-right: 0; } } @media all and (max-width: 1023px) { .vidmodule { margin: 0 0 36px 0; } .vidmodule h3 { height: auto; padding-bottom: 1em; } } body.home .fundingmodule .content { min-height: 33rem !important; } body.home .fundingmodule .content { min-height: 33rem !important; } /*@media all and (min-width: 600px) { .fundingmodule .ctagroup { position:absolute; bottom:0; width:calc(100% - 6rem); margin:0 !important; } .fundingmodule .inner { padding-bottom:20rem; } }*/ @media all and (min-width: 600px) { .fundingmodule .ctagroup { } .fundingmodule .inner { /*padding-bottom:20rem;*/ } } .fundingmodule div.ctas { width: calc(100% - 6rem); padding: 2rem 3rem 1rem; } body.home .fundingmodule p.cta { width: calc(100% - 6rem); width: 100%; margin: 0 0 !important; padding: 0; position: static !important; } .fundingmodule div.ctas { position: absolute; bottom: 1rem; margin: 0 0 1rem; } @media all and (min-width: 1024px) { .fundingmodule .content { position: relative; } .fundingmodule div.ctas { position: absolute; bottom: 1rem; margin: 0 0 1rem; z-index: 30; } } /* #maintweetlist { border:2px dashed green !important; } #maintweetlist li.tweet { border:1px dashed red !important; } .module .content { background:rgba(0,0,255,0.1);} .ctas { border:1px dashed red;} */ /*.fundingmodule .content{ display:table; border:1px dashed red; } */ @media all and (min-width: 850px) { .fundingmodule .content .padding { display: table; position: absolute; top: 0; left: 0; width: calc(100% - 6rem); height: 100%; } .fundingmodule .content .padding .inner { display: table-row; width: 100%; } .fundingmodule .content .padding .ctagroup { display: table-cell; padding-bottom: 2rem; } } .fundingmodule .ctagroup { } /*.fundingmodule .ctagroup { display:none;} .fundingmodule .ctas .ctagroup { margin:0 !important; display:block !important;} */ .box p.cta { display: block; } .box p.cta a { background: var(--darkblue); clear: both !important; } .inactive_box p.cta a { background: var(--midblue); } .box p.cta a:hover { background-color: var(--darkblue); } .box p.short, .box h3 { padding-right: 2.4rem; } .box span { opacity: 0; } .box b { font-size: 1.4rem; display: inline-block; background: white; color: black; font-weight: 400; padding: 0.25em 0.25em 0.25em; -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 -6px 8px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2); } ul.faqs { margin: 2rem 0 3rem; } /*#bodytext*/ #maincontent ul.faqs > li { border: 1px solid var(--darkblue); border-bottom: none; margin: 0 !important; list-style: none !important; padding: 2rem 2rem 1rem 2rem; } /*#bodytext*/ #maincontent ul.faqs > li:last-child { border: 1px solid var(--darkblue); } ul.faqs li h3 { color: var(--darkblue); position: relative; /*padding-right: 4rem;*/ } ul.faqs li h3 button { font-family: inherit; font-size: inherit; background: none; font-weight: inherit; color: inherit; text-align: left; } /*body.hasjs ul.faqs li div.answer { display:none;} */ body.hasjs ul.faqs li h3 button::after { position: absolute; top: 50%; transform: translateY(-50%); right: 0; font-family: 'icons'; content: "\e917"; font-weight: normal; transition: all 0.1s ease; } body.hasjs ul.faqs li h3 button.opened::after { content: "\e914"; } body.hasjs ul.faqs li h3:hover::after { transform: scale(1.2, 1.2) translateY(-40%); } body.hasjs ul.faqs li h3.opened { background: var(--darkblue); color: white; } ul.faqs li p.cta { min-width: 400px !important; max-width: 300px; } ul.faqs li p.cta a { display: block !important; } #mailchimp { clear: both; margin-bottom: 2rem; } /*body.hasjs #mailchimp form { display:none; }*/ #mailchimp form { padding-top: 0.5rem; } #mailchimp form label:not(.checkbox) { display: none; } #mailchimp form label.checkbox { font-size: 1.6rem; top: -5px; position: relative; padding-left: 25px; } #mailchimp form label.checkbox span { display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 0; left: 0; background: #fcfff4; background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); border-radius: 4px; box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5); } #mailchimp form label.checkbox span:after { content: ''; width: 9px; height: 5px; position: absolute; top: 4px; left: 4px; border: 3px solid #333; border-top: none; border-right: none; background: transparent; opacity: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #mailchimp form label.checkbox span:hover::after { opacity: 0.5; } #mailchimp form label.checkbox input[type=checkbox] { /**/ visibility: hidden; } #mailchimp form label.checkbox input[type=checkbox]:checked + span:after { opacity: 1; } #mailchimp form input[type=text], #mailchimp form input[type=email] { display: block; width: calc(100% - 2em); border: none; font-size: 1.8rem; background: white; padding: 0.5em 1em; } #mailchimp form input, #mailchimp form button { font-family: 'Source Sans Pro'; font-weight: 400; } #mailchimp p.l { font-size: 1.6rem; display: block; } #mailchimp p.l a { color: white; text-decoration: none; display: block !important; height: auto !important; text-indent: 0 !important; } #mailchimp p.l a:hover { text-decoration: underline; } #mailchimp button[type=submit], #mailchimp input[type=submit] { border: none; margin: 1em 0; font-size: 1.8rem; padding: 0.5em 2em 0.5em 1em; display: block; cursor: pointer; background: var(--darkblue); color: white; font-weight: 400; transition: all 0.2s ease; position: relative; text-align: left; } #mailchimp button[type=submit]:hover, #mailchimp input[type=submit]:hover { background-color: #891557; } #mailchimp button[type=submit]::after { font-family: icons; content: "\e900"; position: absolute; top: 50%; right: 1em; transform: translateY(-55%); } #search { background: rgba(69, 30, 118, 0.95); } .pagination .current { background: rgba(145, 15, 96, 1) !important; } .noline p { border: none !important; padding: 1rem 0; margin-bottom: 1em; height: 5rem; line-height: 5rem; padding: 0 0 !important; } .profile header p { } .profile header p br { line-height: 2; margin: 0.75em 0 !important; display: block !important; content: "test "; } .profile header p br::after { } @media screen and (min-width: 1024px) { .two .callmodule { width: calc(50% - ((36px * 1) / 2)); } .two .callmodule:nth-child(2n+2) { margin-right: 0 !important; } } #sidenav li a { background: rgba(230, 230, 230, 1); color: #451e76; } #sidenav li.current a, #sidenav li a:hover { background: #451e76; color: #FFF; } /* #451e76 69,30,118 var(--darkblue) 168,5,98 */ #projectslisting { /*background: -moz-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(240,240,240,0) 300px); background: -webkit-gradient(top, bottom, color-stop(0%, rgba(240,240,240,1)), color-stop( 300px, rgba(240,240,240,0))); background: -webkit-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(240,240,240,0) 300px); background: -o-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(240,240,240,0) 300px); background: -ms-linear-gradient(top, rgba(240,240,240,1) 0%, rgba(240,240,240,0) 300px); background: linear-gradient(to bottom, rgba(240,240,240,1) 0%, rgba(240,240,240,0) 300px); */ background: rgba(240, 240, 240, 1); padding-top: 36px; } ul#projectview li, #project_tags ul li, #project_tags h3 { /*font-family:'Montserrat',sans-serif;*/ font-size: 1.3rem; line-height: 1.2; margin-bottom: 2rem; margin-bottom: 1em; } ul#projectview li a, #project_tags ul li a { text-decoration: none; } ul#projectview li a:hover, #project_tags ul li a:hover { text-decoration: none; } #projectresults { } #project_tags ul { list-style: none !important; display: flex; flex-wrap: wrap; } #project_tags ul li { /*float:left;*/ margin-right: 2rem; margin: 0 1.2rem 1.2rem 0; text-align: center; font-weight: 400 !important; list-style: none !important; } #project_tags ul li a { display: block; background: #aeaaab; color: #FFF; background: none; color: black; border: 1px solid #e3dfe0; } #project_tags ul li a:hover, #project_tags ul li a.current { background: #4e4a4b; background: #e3dfe0; } ul#projectview li a { position: relative; background: #e3dfe0; background: none; border: 1px solid #e3dfe0; color: #000; font-weight: 600; } ul#projectview li a.current { background: #e3dfe0; } ul#projectview li a, #project_tags h3, #project_tags ul li a { display: block; padding: 1.2rem 1rem; } ul#projectview li a { padding: calc(1.2rem - 1px) 1rem; } ul#projectview li, #project_tags h3, ul#projectview li { margin-bottom: 1.2rem; } /*#project_tags h3, #project_tags ul li a { padding:calc(0.6em - 1px) 0.6em; position:relative; } #project_tags {padding-top:0.8rem !important; }*/ ul#projectview li a#thumbnails::after { border: 1px solid #000; display: inline-block; content: ""; height: 24px; width: 24px; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); margin-left: 1em; background-repeat: no-repeat; } ul#projectview li a#list span { border: 1px solid rgba(255, 255, 255, 0); display: inline-block; content: ""; height: 24px; width: 24px; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); margin-left: 1em; background-repeat: no-repeat; } ul#projectview li a#list span::before, ul#projectview li a#list span::after { content: ""; display: block; position: absolute; width: 24px; height: 6px; border-top: 1px solid #000; border-bottom: 1px solid #000; } ul#projectview li a#list span::before { top: 1px; left: 0; } ul#projectview li a#list span::after { bottom: 1px; left: 0; } #project_tags { margin-bottom: 2rem; } @media screen and (min-width: 1024px) { #project_tags { position: relative; } #projectslisting #project_tags ul li, #projectslisting #project_tags ul li:nth-child(4n+4) { width: calc(50% - ((36px * 1) / 2)); margin: 0 36px 1.2rem 0; } #projectslisting #project_tags ul li:nth-child(2n+2) { margin-right: 0; } #projectslisting #projectview, #projectslisting #project_tags { float: left; } #projectview { width: calc(16.66666666666667% - ((36px * 5) / 6)); margin-right: 36px; } #projectslisting #project_tags { width: calc(83.33333333333333% - ((36px * 1) / 6)); } #projectslisting #project_tags ul { padding-left: calc(20% - ((36px * 4) / 5) + 36px); } #projectslistingprojectslisting #project_tags h3 { position: absolute; top: 0; left: 0; padding-left: 0 !important; padding-right: 0 !important; text-align: right; width: calc(20% - ((36px * 4) / 5)); } } @media screen and (min-width: 1300px) { #projectslisting #project_tags ul li, #projectslisting #project_tags ul li:nth-child(2n+2) { width: calc(25% - ((36px * 3) / 4)); margin: 0 36px 1.2rem 0; } #projectslisting #project_tags ul li:nth-child(4n+4) { margin-right: 0; } } @media screen and (min-width: 601px) and (max-width: 1023px) { } @media screen and (max-width: 600px) { .module { width: 100%; } } #project_thumbnails { display: none; } ul#project_list { clear: both; display: none; } ul#project_list li { margin-bottom: 2rem; } ul#project_list li a { /*font-family:'Montserrat';*/ font-weight: 600; text-decoration: none; color: #000; padding: 1.2em 1em; display: block; background: #e3dfe0; } ul#project_list li a:hover { background: #4e4a4b; color: #FFF; } /*@media screen and (min-width:1024px){ #projectsmenu .projectsnav, #projectsmenu .projectsnav:nth-child(3n+4) {float:left; margin:0 36px 36px 0 !important; width:calc(25% - ((36px * 3) / 4)) !important; } #projectsmenu .projectsnav:nth-child(4n+5){ clear:none !important; } #projectsmenu .projectsnav:nth-child(4n+5), .projectsnav:nth-child(4n+5) * { margin-right:0 !important; } } @media screen and (min-width:601px) and (max-width:1023px){ #projectsmenu .projectsnav{float:left; margin:0 36px 36px 0 !important; width:calc(50% - ((36px * 1) / 2)) !important; } #projectsmenu .projectsnav:nth-child(2n+3){ margin-right:0 !important; } }*/ #mobilenav .projectsnav { float: none; margin: 0 0 0 0 !important; width: auto !important; } .projectheader_line { border-bottom: 1px solid rgba(0, 0, 0, 0.5); margin-bottom: 3rem; padding-top: 3rem; } .projectheader { margin-top: 6rem; } .projectheader h2 { margin-bottom: 1rem; font-size: 2.7rem; } .noline p { border: none !important; padding: 0 0 !important; margin-bottom: 1em; height: 5rem; line-height: 5rem; } .sidebar .cta a { width: calc(100% - 11rem) !important; } .project_module .content { min-height: 300px !important; } .project_module .gradient p a { color: white !important; text-decoration: none !important; } @media screen and (max-width: 600px) { /*#breadcrumbs { margin:-20px 0 0; height:0; overflow:hidden; } */ /*#breadcrumbs * { font-size:1px !important; color:white !important;} #breadcrumbs *::after { content:"" !important; }*/ } ul.projectlistings { } ul.projectlistings li { margin: 0 !important; } ul.projectlistings li ul { margin: 0 0 2rem 0 !important; } ul.projectlistings li a { display: block; position: relative; background: #e3dfe0; border: 1px solid #e3dfe0; color: #000; text-decoration: none; padding: calc(1.2rem - 1px) 1rem; margin: 0 0 5px; } ul.projectlistings > li > a { background: none; border: none; } ul.projectlistings > li > h3 { padding: 0 1rem; margin: 0 0 calc(1rem + 5px) 0 !important; } ul.projectlistings li a:hover { background: #4e4a4b; color: #FFF; } .projectlistingsarea h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.5) !important; padding: 0 1rem 1.6rem; } div.partnerships { padding-top:18px; box-sizing: border-box; display: flex; flex-wrap: wrap; width:calc(100% + 36px); transform: translateX(-18px); } div.partnerships>div { box-sizing: border-box; margin: 18px; width: calc(50% - 36px); background: #F2FBFF; border: 4px solid #0099D7; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; } div.partnerships>div>div:first-child { padding: 36px; } div.partnerships>div>div.nto_accordion button , div.partnerships>div>div.nto_accordion>div { width: 100%; text-align: left; padding: 18px; padding-left:36px; padding-right:36px; } div.partnerships>div>div.nto_accordion>h3 { margin: 0; color: white; } div.partnerships>div>div.nto_accordion>h3 button{ font-family: inherit; color: white; background: var(--darkblue); font-size: 1.8rem; font-weight: 600; } @media screen and (max-width:850px) { div.partnerships { display: block; flex-wrap: wrap; width: 100%; transform:none; } div.partnerships>div { width: 100%; margin:18px 0 18px; } } @media screen and (max-width:600px) { div.partnerships>div>div:first-child { padding:24px; } div.partnerships>div>div.nto_accordion>div { padding-left:24px; padding-right:24px; } #maincontent div.partnerships div.coordinators table { width: calc(100% - 48px); } } /*#maincontent div.partnerships ul.institutions { margin: 0 0 36px !important; border-top:1px solid black; } #maincontent div.partnerships ul.institutions li{ list-style: none !important; margin: 0 !important; border-bottom:1px solid black; display: flex; align-items: center;font-size: 14px; line-height: 17px; } #maincontent div.partnerships ul.institutions li>strong { max-width: 11em; padding:1em 2em 1em 0;font-weight: 600; } #maincontent div.partnerships ul.institutions li>span { margin-left: auto; position: relative; width: 150px; min-width: 150px;padding:1em 0 1em 0; } #maincontent div.partnerships ul.institutions li>span::before { display: block; content:""; width: 100%; height: 0; padding-bottom: 50% } #maincontent div.partnerships ul.institutions li>span img{ position: absolute; width: 100%; height: 100%; object-fit: contain; top: 50%; left: 50%; transform: translate(-50%,-50%); mix-blend-mode: multiply; }*/ #maincontent div.partnerships h2 { color:var(--darkblue); font-size: 21px; font-weight: 600; } #maincontent div.partnerships ul.institutionlist { margin: 0 0 36px !important; /*border-top:1px solid black;*/ border-bottom:1px solid black; padding-bottom: 16px; display: flex; align-items: center; flex-wrap: wrap; width: calc(100% + 32px); transform: translateX(-16px); mix-blend-mode: multiply; } #maincontent div.partnerships ul.institutionlist li{ list-style: none !important; margin: 0 !important; } /* #maincontent div.partnerships ul.institutionlist li>span::before { display: block; content:""; width: 100%; height: 0; padding-bottom: 50% } */ #maincontent div.partnerships ul.institutionlist li>span { display: block; padding:0 16px; mix-blend-mode: multiply;} #maincontent div.partnerships ul.institutionlist li>span img{ display:block; height: 80px; width: auto; mix-blend-mode: multiply; } #maincontent div.partnerships div.coordinators { background: var(--darkblue); color: white; margin-top: auto; /* border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; overflow: hidden;*/ } #maincontent div.partnerships div.coordinators button { } #maincontent div.partnerships div.coordinators table { font-size: 14px; width: calc(100% - 72px); } #maincontent div.partnerships div.coordinators table td { padding: 0 0 0.5em 0; } #maincontent div.partnerships div.coordinators table td a { text-decoration:none; color: inherit;} #maincontent div.partnerships div.coordinators table tr { } div.partnerships div.coordinators button { display: flex; width:100%; } div.partnerships div.coordinators button b{ margin-left: auto; width: 24px; height: 24px; border: 1px solid white; border-radius: 50%; display: block; position: relative; mix-blend-mode: screen} div.partnerships div.coordinators button:focus span{ box-shadow: 0 0 0 3px var(--hover_red); } div.partnerships div.coordinators button b::after, div.partnerships div.coordinators button b::before { content:""; display: block; background-color: white; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); height: 2px; width: 14px; } div.partnerships div.coordinators button:not(.opened) b::after{ transform: translate(-50%,-50%) rotate(90deg); } #maincontent div.partnerships ul.courses { } #maincontent div.partnerships ul.courses li{ list-style: none !important; margin: 1em 0 0 !important; } #maincontent div.partnerships ul.courses li a{ color: var(--fivenine); display: block; } #maincontent div.partnerships ul.courses li a span.or{ display: block; font-size: 14px; } #maincontent div.partnerships ul.courses li.pending a { color: rgba(180,180,180,1); } h1 span.or{ display: block; font-size: 16px; } @media screen and (min-width:601px) { h1 span.or{ font-size: 18px; ; } } #maincontent div.partnerships ul.courses li a:hover{ color: var(--hover_red); text-decoration-width: 3px; } #anchorholder+#maincontent:not(.hasbanner){ padding-top: 2.4rem;} #anchorholder+#maincontent.hasbanner { padding-top: 0;} #mainbanner { display: block; height: 50vw; min-height: 300px; max-height: 60vh; position: relative;} @media screen and (max-width:850px){ #mainbanner { height: 66vw; } } #mainbanner picture { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden} #mainbanner picture img{display: block; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; } ul.fetch_links, p.lozenge { margin-top: 2em;} ul.fetch_links { display: flex; flex-wrap: wrap} #maincontent ul.fetch_links li, .textcol ul.fetch_links li, ul.fetch_links li { list-style: none !important; margin-left: 0 !important; } ul.fetch_links li:not(:last-child) { margin-right: 1em !important;} body.single-courses #coursetext { width: 100%; max-width: 780px; margin: 0 auto; } body.single-courses .textcol { width: 100%; float: none; margin-left: 0; margin: 0 auto; } ul.fetch_links li>a, p.lozenge>a:only-child { position:relative; display: inline-block; font-size: 21px; font-size: 18px; font-weight: 600; line-height: 1; padding: 0.5em 1.5em 0.65em; background:var(--darkblue); border-radius: 300px; color: #fff !important; transition: all .2s ease; display: inline-flex; align-content: center; align-items: center; text-decoration: none; } ul.fetch_links li>a:hover, p.lozenge>a:only-child:hover { background: black; background: var(--hover_red); } ul.fetch_links li>a:focus, p.lozenge>a:only-child:focus { box-shadow: 0 0 0 2px white,0 0 0 5px var(--hover_red); } p.lozenge>span:only-child { position:relative; display: inline-block; font-size: 21px; font-size: 18px; font-weight: 600; line-height: 1; padding: 0.5em 1.5em 0.65em; padding: 0.5em 0.5em 0.65em; background:var(--lightblue); /* border-radius: 300px;*/ color: var(--darkblue) !important; transition: all .2s ease; display: inline-flex; align-content: center; align-items: center; text-decoration: none; }.anchorholder {border-top:none; margin-bottom:0; background:#ebebeb; /*border-bottom:2px solid #ebebeb;*/ padding:1rem 0 1rem; overflow:hidden; } @media all and (max-width: 600px) { .anchorholder {padding:3rem 0 1rem; padding:1rem 0 1rem;} } div.anchorholder .wrapper { } div.anchorholder ul.anchorlinks { margin:0 !important; } .anchorholder .anchorlinks li { /*font-family:'Montserrat',sans-serif;font-weight:600; */ font-size:1.6rem; position:relative; margin:0.2em 0 0 !important; color:#134267; line-height:0.6666666666666667; line-height:1.222222222222222; position:relative; overflow:hidden; line-height:1; } .anchorholder .anchorlinks li a { /*border-bottom:1px solid rgba(33,96,147,0.5); */display:block; color:#134267; text-decoration:none; /*padding-top:0.6666666666666667em; padding-bottom:0.6666666666666667em; */transition:all 0.2s ease; line-height:1.2; padding:0.5em 0.75em 0.5em 0; padding:0 1em 0 0; color:#000; } /*.anchorholder .anchorlinks li a::after { font-family:icons; content:"\e900"; margin-left:0.25em; font-size:1.4rem; top:50%; transform:translateY(-50%); right:0; position:absolute; }*/ .anchorlinks li a:hover {color:#d12233; } .anchorlinks { margin-bottom:0 ;} #anchorholder_fixed {display:none; } @media all and (min-width: 601px) { .anchorholder .anchorlinks li { /*width:calc(33.33333% - ((36px * 2) / 3)); margin:0 36px 0 0 !important; float:left;*/ display:inline-block; position:relative; top:1px; } div.anchorholder ul.anchorlinks li { margin-right:1em !important; border-right:1px solid #666;} div.anchorholder ul.anchorlinks li:last-child { border:none;} /*.anchorholder .anchorlinks li:nth-of-type(3n+3){ margin-right:0 !important; } */ #anchorholder_fixed {display:block; position:fixed; top:-60px; width:100%; left:0; z-index:999; transition:all 0.2s ease; opacity:0; } #anchorholder_fixed.seen { top:0; opacity:1; } } @media all and (max-width: 600px) { .anchorholder .anchorlinks li { width:calc(50% - (2px / 2)); margin:0 0 0 0 !important; float:left; display:inline-block; position:relative; top:1px; } .anchorholder .anchorlinks li a { display:block; padding:8px 0 10px;} div.anchorholder ul.anchorlinks li { margin-right:0 !important; } div.anchorholder ul.anchorlinks li:last-child { border:none;} /*.anchorholder .anchorlinks li:nth-of-type(3n+3){ margin-right:0 !important; } */ #anchorholder_fixed {display:block; position:fixed; top:-60px; width:100%; left:0; z-index:999; transition:all 0.2s ease; opacity:0; padding:1rem 0 1rem; } #anchorholder_fixed.seen { top:0; opacity:1; } } a.named_anchor { display:block; font-size:1px; color:rgba(255,255,255,0) !important; text-indent:-999px; height:0; overflow:hidden; }#enhanced_caption { background:rgba(0,0,0,0.6); position:relative;} #enhanced_caption, #enhanced_caption a { color:white; text-decoration:none; } #enhanced_caption div { padding:3rem;} #enhanced_caption p { margin:0 0 1rem; } #enhanced_caption h3 { margin:0; padding-bottom:7.5rem; } #enhanced_caption p.cta { } #enhanced_caption p.cta a { display:inline-block; width:auto; } #enhanced_caption_holder #enhanced_caption p.cta{ position:absolute; bottom:2rem; left:3rem !important; } #mainintrowrapper #captionplaceholder { margin-right:0 !important;background:none !important; /**/ position:absolute; top:0; right:20px; } @media screen and (min-width:601px) and (max-width:1023px){ .module { width:calc(((100% - 40px) / 2) - ((36px * 1) / 2)); } } @media screen and (min-width:641px){ #mainintrowrapper #captionplaceholder { right:30px; width:calc(((100% - 60px) / 2) - ((36px * 1) / 2)); } } @media screen and (min-width:1024px){ #mainintrowrapper #captionplaceholder { width:calc(((100% - 60px) / 3) - ((36px * 2) / 3)); } } @media screen and (min-width:1404px){ #mainintrowrapper #captionplaceholder { right:60px; width:calc(((100% - 120px) / 3) - ((36px * 2) / 3)); } } @media screen and (min-width:601px) and (max-width:1023px){ .module { width:calc(50% - ((36px * 1) / 2)); } .module:nth-child(2n+2){ margin-right:0 !important; } .module:nth-child(2n+3){ clear:both; } } @media screen and (max-width:600px){ .module { width:100%; } } /* .wrapper { margin:0 auto; padding:0 20px; clear:both; max-width:1500px; position:relative; transition:all 0.1s ease; } @media screen and (min-width:641px){ .wrapper { padding:0 30px; } } @media screen and (min-width:1404px){ .wrapper { padding:0 60px; } } */ #mainintro { clear:both; } #enhanced_caption_holder.inactive {display:none;} @media screen and (max-width:1023px){ #mainintrowrapper #captionplaceholder { display:none; } } @media screen and (min-width:1024px){ #mainintrowrapper #captionplaceholder { } } @media screen and (min-width:1400px){ #mainintrowrapper #captionplaceholder {display:block; } #mainintro { clear:none; } } #mainintrowrapper #captionplaceholder { /*background:none !important; display:none !important;*/} #mainintrowrapper #captionplaceholder #enhanced_caption { width:100%; position:absolute; bottom:0; left:0;} #captionshow { transition:all 0.3s ease; } #captionshow.captionshown_turn { transform:rotate(90deg); background:#ae1109;opacity:1; } body.home #captionshow { opacity:0; -moz-animation: flickerload 1s linear forwards; -webkit-animation: flickerload 1s linear forwards; animation: flickerload 1s linear forwards; -moz-animation-delay: 1s; -webkit-animation-delay: 1s; animation-delay: 1s; } @-webkit-keyframes flickerload { 0% { opacity: 0; background:#ae1109;} 1% { opacity:0.33;} 3% { opacity: 0.33;} 4% { opacity: 0;} 16% { opacity: 0;} 17% { opacity: 0.33;} 20% { opacity: 0.33;} 21% { opacity: 0;} 29% { opacity: 0;} 30% { opacity: 0.4;} 36% { opacity: 0.4;} 37% { opacity: 0;} 40% { opacity: 0;} 42% { opacity: 0.4;} 47% { opacity: 0.4;} 48% { opacity: 0;} 50% { opacity: 0;} 51% { opacity:0.5;} 53% { opacity: 0.5;} 54% { opacity: 0;} 66% { opacity: 0;} 67% { opacity: 0.666;} 70% { opacity: 0.666;} 71% { opacity: 0;} 79% { opacity: 0;} 80% { opacity: 0.75;} 86% { opacity: 0.75;} 87% { opacity: 0; } 90% { opacity: 0;} 92% { opacity: 0.8;} 97% { opacity: 0.8;} 98% { opacity: 0; background:#ae1109;} 99% { opacity: 0;background:rgba(0,0,0,0.6);} 100% { opacity: 1;} } /*@-moz-keyframes flickerload { 0% { opacity: 0;} 50% { opacity: 0;} 51% { opacity:0.333;} 53% { opacity: 0.333;} 54% { opacity: 0;} 66% { opacity: 0;} 67% { opacity: 0.5;} 70% { opacity: 0.5;} 71% { opacity: 0;} 79% { opacity: 0;} 80% { opacity: 0.666;} 86% { opacity: 0.666;} 87% { opacity: 0;} 90% { opacity: 0;} 92% { opacity: 0.8;} 97% { opacity: 0.8;}98% { opacity: 0;} 99% { opacity: 0;} 100% { opacity: 1;} } @keyframes flickerload { 0% { opacity: 0;} 50% { opacity: 0;} 51% { opacity:0.333;} 53% { opacity: 0.333;} 54% { opacity: 0;} 66% { opacity: 0;} 67% { opacity: 0.5;} 70% { opacity: 0.5;} 71% { opacity: 0;} 79% { opacity: 0;} 80% { opacity: 0.666;} 86% { opacity: 0.666;} 87% { opacity: 0;} 90% { opacity: 0;} 92% { opacity: 0.8;} 97% { opacity: 0.8;}98% { opacity: 0;} 99% { opacity: 0;} 100% { opacity: 1;} } */ .imageholder { width: 100%; margin: 3rem auto; } .imageholder picture, .imageholder picture img{ display: block; } .imageholder picture img{ width: 100%; height: auto;} #footer1 {background: var(--darkblue); } #footer1 h3 { color: var(--lightblue); border-bottom-color: currentColor; } #footer1>.wrapper:first-child .cols>div h3:not(:first-child){ clear: both } @media screen and (min-width: 601px) { #footer1>.wrapper:first-child .cols { display: flex; width: calc(100% + 36px); transform: translateX(-18px); } #footer1>.wrapper:first-child .cols>div { margin: 18px; width: calc(33.3333% - 36px); } } #footer #designer { margin:2rem 0 0; } #tweetloader .boxlink { margin: 0 auto; text-align: center;} body.home #content { padding-bottom: 0 !important;} body.home #twitterfeed { padding-bottom: 40px !important; margin-top: 36px;} body.home #twitterfeed .module:not(.introbox) article{ background: white} #footer {border-top: 32px solid white; } #twitterfeed+#footer { border-top: none;}.footer_logos { } .footer_logos { } #footerX { padding:36px 0; } .footer_logos { list-style: none; display: flex; flex-wrap: wrap; /*justify-content: center;*/ margin: 0 !important; align-items: center; } .footer_logos::after { content: ""; display: block; } .footer_logos li { position: relative; margin: 0 20px 0 0 !important; } .footer_logos li a { display: block; /*width: 100%; height: 0; padding-bottom: 50%;*/ overflow: hidden; position: relative; transition: all 0.2s ease; } .footer_logos li a img { /* position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; transform: translate(-50%, -50%); object-fit: contain;*/ height: 90px; width: auto; display: block; } .footer_logos li a[href*="hea.ie"] img { height: 50px; } .footer_logos li a:hover { transform: scale(1.1, 1.1); } *::-ms-backdrop, .footer_logos li { margin: 0 !important; } *::-ms-backdrop, .footer_logos li { } *::-ms-backdrop, .footer_logos li a { } *::-ms-backdrop, .footer_logos li a svg { height: 100%; position: absolute; width: 100%; } /*IE11 */ .footer_logos li span { position: absolute; top: -10px; left: -10px; opacity: 0; pointer-events: none; } #healogo { } #healogo { margin:0 0 1rem; line-height:1; padding:0 } #healogo a { display:block; text-decoration:none; overflow:hidden;} #healogo a span {display:block; height:0; width:0; position:absolute; left:-10px; top:0; overflow:hidden;} #healogo a::before { font-family:'icons'; content:"\e90b"; color:#FFF; font-size:50px; font-size:50px; position:relative; } #healogo a::after { font-family:'icons'; content:"\e90a"; color:#d12233; position:absolute; top:0; left:0; font-size:50px; } @media screen and (max-width:600px){ .footer_logos li {width: 100%; text-align: center} .footer_logos li a, .footer_logos li a img { margin: 0 auto;} .footer_logos li:not(:last-child) { margin-bottom:32px; } .footer_logos li a:hover { transform: none; } #designer {text-align: center;} } #cookieconsent { position: fixed; display: flex; flex-direction: column; top:0; left: 0; height: 100%; width: 100%; z-index: 999999; transition: all 0.6s ease; } #cookieconsent hr { border-bottom: 1px solid #216093 !important; border-bottom: 1px solid rgba(255,255,255,0.4) !important; } #cookieconsent.shown {background: rgba(0,0,0,0.6); } #cookieconsent>div {color: white; flex: 1; overflow: auto; background: #134267; background:#0A7291; padding: 30px; width: calc(90% - 40px); max-width: 500px;transform: translateX(-100%); transition: all 0.6s ease; } #cookieconsent.shown>div { transform: translateX(0); box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.5);} #cookieconsent>div a { color: white;} #consent, #consent_toggle span { opacity: 0; position: fixed; left: -100px;} #consent_toggle label { margin-left: auto; display:flex; justify-content: flex-end; align-content: center; align-items: center; cursor: pointer;} #consent_toggle { margin-left: auto; } #cookieconsent h3 { display: flex; align-items: center; justify-content: space-between;} #consent_toggle b { margin-left:1em; display: inline-block; width: 54px; height: 20px;background: rgba(0,0,0,0.4); position: relative; border-radius: 990px; } #consent_toggle b::after{ display:block; content:""; width: 26px; height: 26px; background: #adbdca; box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.5); border-radius: 50%; position: absolute; left: -3px; top: 50%; transform: translateY(-50%); transition: all 0.2s ease;} #consent_toggle b::before {content:"Off"; display: inline-block; font-size: 12px; line-height: 20px; width: 32px; text-align: center; position: absolute; top: 0; right: 0; opacity: 0.8; font-weight:400; } #consent:checked~h3>#consent_toggle b { background: rgba(0,0,0,0.5); } #consent:checked~h3>#consent_toggle b::after { background: #FFF; left: auto; right:-3px; } #consent:checked~h3>#consent_toggle b::before {content:"On"; right:100%; transform: translateX(100%); opacity: 1;} button#dismiss { font-size: inherit; display: inline-block; background: rgba(255,255,255,0.9); padding: 0.6666em 1.5em; font-weight:600; color:#134267; margin: 12px 0 ; cursor: pointer; } button#dismiss:hover { background:#FFF;} @media all and (max-width: 600px) { #cookieconsent>div { padding: 20px; } #cookieconsent>div h2 { font-size: 2rem; } #cookieconsent>div h3 { font-size: 1.8rem; } #cookieconsent>div p { font-size: 1.4rem; } } .textcontent { width:100%; } @media screen and (min-width:850px) { figure#mainbanner + .wrapper #coursetext { position: relative; top: -8vw; top: -108px; } } #coursetext .textcol { background: white; position: relative;} #coursetext .textcol::before { position: absolute; top: -36px; left: 50%; height: 100%; width:calc(100% + 72px + 18px); background: white; display: block; content:""; z-index: 0; transform: translateX(calc(-50% - 18px)); } #coursetext .textcol div, #coursetext .textcol h1, #coursetext .textcol h2, #coursetext .textcol h3, #coursetext .textcol p, #coursetext .textcol ul, #coursetext .textcol ol, #coursetext .textcol table { z-index: 2; position: relative;} #coursetext .textcol h2 { color: var(--midblue); font-size: 21px; font-weight: 600; } #institutions { display: flex; flex-wrap: wrap; align-items: center; } #institutions img{ display: block; height: 80px; width: auto; margin-right: 20px; } body.single-courses_new #institutions { border-bottom: 2px solid #24ACE3; padding-bottom: 20px; margin-bottom: 24px; } header.expanded_title { position: relative; background:rgba(0,174,239,0.15);margin-bottom:2rem; padding: 18px; top: -8px; } @media screen and (min-width:850px) { header.expanded_title { width: calc(100% - 18px); left: -36px; top: -8px; padding: 2rem 2rem 2rem 3.6rem; } } header.expanded_title h1{ margin-bottom:0.25em; } header.expanded_title p{ margin-bottom:0.5em; } header.expanded_title li{ margin-bottom:0.25em; } header.expanded_title p, header.expanded_title li { font-size: 1.6rem; max-width: 32em; } header.expanded_title > :last-child { margin-bottom: 0;}.cta_boxes { } .cta_boxes>div { margin:0 0 24px; background: var(--lightblue); padding: 24px; box-sizing: border-box; display: flex; flex-direction: column; } .cta_boxes>div p.cta { margin: auto 0 0 0; } .cta_boxes>div p.cta a{ background: white; color: var(--fivenine) !important; } .cta_boxes>div p.cta a:hover{ background: #ed9f49; color: black !important; } .cta_boxes>div:first-child { background: var(--darkblue); color: white;} .cta_boxes>div:first-child h2{ color: var(--lightblue); } @media screen and (min-width:850px) { .cta_boxes { display: flex; flex-wrap: wrap; width:calc(100% + 36px); transform: translateX(-16px); } .cta_boxes>div { margin:16px; width: calc(50% - 32px); padding: 36px; } } #infonav {border-top:1px solid rgba(255,255,255,0); } #infonav li { text-align:center; font-size:2.4rem; font-weight:600; line-height:1.2; } /*f8ad3a 78b452 0ab7c5 0c4da2*/ /*#infonav li a::before { content:" "; display:block; max-width:36px; height:0; padding-bottom:100%; background:red; }*/ #infonav li a { display:block; padding:3rem; color:#FFF; background: var(--darkblue); text-decoration:none; transition:all 0.2s ease; } #infonav li a:hover { transform:scale(1.1,1.1); -webkit-box-shadow: 0 0 24px 0 rgba(0,0,0,0.75); -moz-box-shadow: 0 0 24px 0 rgba(0,0,0,0.75); box-shadow: 0 0 24px 0 rgba(0,0,0,0.75); } #infonav li#info_students a { background-color:#ea6749; } #infonav li#info_guidance a { background: var(--darkblue);} #infonav li#info_sectors a { background-color:var(--lightblue); color: var(--darkblue); } #infonav li a strong {display:block;} #infonav li a span { display:block; height:2.5em; margin:0 auto 1.5rem; background-position:center; background-size:contain; background-repeat:no-repeat; } #infonav li#info_students a span { background-image:url(icons/students.svg); } #infonav li#info_guidance a span { background-image:url(icons/guidance.svg); } #infonav li#info_sectors a span { background-image:url(icons/sectors.svg); } @media screen and (min-width:1024px){ #infonav li {float:left; margin:0 36px 36px 0 !important; width:calc(33.333% - ((36px * 2) / 3)); } #infonav li { width:calc(50% - ((36px * 1) / 2)); } #infonav li:nth-child(2n+2), #infonav li:nth-child(3n+3), #infonav li:nth-child(4n+4){ margin-right:0 !important; } } @media screen and (min-width:601px) and (max-width:1023px){ /*#infonav li{float:left; margin:0 36px 36px 0 !important; width:calc(50% - ((36px * 1) / 2)); } #infonav li:nth-child(2n+2){ margin-right:0 !important; }*/ } @media screen and (max-width:600px){ #infonav li{ width:100%; margin:0 0 36px 0 !important; } }div#contactinfo { clear: both; transition:all 1s ease-out; } div#contactinfo.highlighted { background: rgba(0,0,0,0.15); box-shadow: 0 0 0 3px var(--darkblue),0 0 0 8px yellow; transition:all 1s ease-out; } #footer1 div#contactinfo.highlighted h3 { color:white; } a.skip-to-content-link { background: var(--darkblue); color:white; display:inline-block; padding:0.5em; text-decoration:none; left: 50%; z-index:1111; position: absolute; transform: translateX(-50%); top:0; transform: translate(-50%,-100%); transition: transform 0.2s; font-weight: 800; font-size: 18px; border-radius: 2px; } a.skip-to-content-link:focus { transform: translate(-50%,0%); } #logo .healogo a:focus { /*background-blend-mode: multiply;*/ box-shadow: 0 0 0 3px var(--hover_red),0 0 0 1px var(--hover_red); /*border: 1px solid var(--hover_red);*/ /* background-color: var(--hover_red);*/ } ul.faqs li h3 button:focus, .textcol a:focus, ul.anchorlinks li a:focus, #breadcrumbs a:focus, ul.courses a:focus, p#footerlogo a:focus, .tweet a:focus, p.cta a:focus, p.boxlink a:focus, #mainnav nav > ul > li > a:focus span{ box-shadow: 0 0 0 3px var(--hover_red); } #maincontent div.partnerships div.coordinators h3 button:focus span, #maincontent div.partnerships div.coordinators table td a:focus, section#footerX a:focus, section#footer1 a:focus { box-shadow: 0 0 0 3px yellow; }#course_filter { clear: both; overflow: auto;} #coursesearch { background: #D3EEF9; font-family: inherit; font-size: 2.2rem; padding: var(--form-padding) 0 ; margin: var(--form-padding) 0 ; } #coursesearch div.wrapper { max-width: 900px; padding-bottom: var(--form-padding); } #coursesearch div.wrapper div { width: 100%; } #coursesearch h3 { font-size: inherit; } #coursesearch div.wrapper div div{ width: 100%; display: flex; border-radius: 8px; border:2px solid #233A65; overflow: hidden;background: white; } #coursesearch div.wrapper div h3{ padding-left: var(--form-padding); margin-bottom:0.9em; padding-top: 0.333em;} #coursesearch div.wrapper div input[type="text"] { border: none; outline: none; padding:1em var(--form-padding); color: #4D4D4D; background:none; flex:1; font-size: inherit; /*border-top-left-radius: 8px; border-bottom-left-radius: 8px;*/ } #coursesearch div.wrapper div input[type="submit"] { border: none; outline: none; padding:1em var(--form-padding); cursor:pointer; background:#233A65; color: white; font-size: inherit; /*border-top-left-radius: 8px; border-bottom-left-radius: 8px;*/ } #coursesearch fieldset { width: 100%; } #coursesearch h3 button { font-size: inherit; font-size: inherit; font-weight: inherit; background: none; display: block; width: 100%; text-align: left; } fieldset.faccordion { display: block; background: white; border-radius: 8px; box-shadow: 0px 4px 4px 0px rgba(35, 58, 101, 0.48); box-sizing: border-box; margin: var(--form-padding) 0;} fieldset.faccordion h3 { margin: 0;} fieldset.faccordion button span { display: flex; align-items: center; padding: 1em var(--form-padding); } fieldset.faccordion button span::after { content:""; width:0.8em; height:0.8em; min-width:0.8em; display:block; margin-left: auto; position: relative; top:-0.2em; transform: rotate(45deg); border: 2px solid currentColor; border-left: none; border-top: none; } fieldset.faccordion button.opened span::after { transform: rotate(225deg); top:0.2em; } fieldset.faccordion ul li { font-size: inherit; } fieldset.faccordion div { display: block; padding: 0 var(--form-padding);box-sizing: border-box; } fieldset.faccordion div::after, fieldset.faccordion div::before { display: block; height: 0.5em; content:""; } fieldset.faccordion ul { margin: 0; } #maincontent fieldset.faccordion ul li { margin: 0.5em 0 !important; list-style:none !important;} fieldset.faccordion li label { display:flex; align-items:center;position: relative; font-family: inherit; cursor: pointer;} fieldset.faccordion li label input { position: fixed; opacity: 0; pointer-events: none; top: -100px; } fieldset.faccordion li label span { display:block; padding-right: 0.5em; } fieldset.faccordion li label>b { display:block; content:""; width:1em; min-width:1em; height: 1em; background: #D3EEF9; border: 2px solid #233A65; border-radius: 2px; position: relative; order: 10; margin-left: auto; } fieldset.faccordion li label>input:checked~b { background: #233A65; } fieldset.faccordion li label>input:checked~b:before { content:""; display: block; position: absolute; width:14px; height: 7px; border: 3px solid #FFF; border-top: none; border-right: none; left:3px; top: 3px; transform: rotate(-45deg); } fieldset.faccordion li label:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--hover_red);;} #currentfilterswrapper { padding-bottom: 0 !important;} #currentfilters { padding-left: var(--form-padding); padding-right: var(--form-padding); } #currentfilters button { background: none; outline: none; border: none; cursor: pointer; } #currentfilters dl{ display: flex; flex-wrap: wrap; padding: 12px 0 0px; } #currentfilters dt button, #currentfilters dd button { margin: 0 19px 16px 0; font-size: 16px; line-height: 19px; padding: 0.75em 8px 0.666em 0; color: #233A65; } #currentfilters dt button{ color: #233A65; } #currentfilters dd button { background: #F2FBFF; border: 2px solid #0099D7; font-weight: 600; padding: 0.75em 3em 0.666em 2em; border-radius: 8px; color: #002422; text-align: center; position:relative; } #currentfilters dd button>b { position:absolute; width: 18px; height: 18px; display: block; top:50%; right:12px; margin-top:-10px;} #currentfilters dd button>b::before, #currentfilters dd button>b::after {content:""; height: 1px; background: #002422; width: 21px; display: block; position:absolute; top:calc(50% + 1px); left: 50%; transform: translate(-50%,-50%); } #currentfilters dd button>b::before{ transform: translate(-50%,-50%) rotate(-45deg); } #currentfilters dd button>b::after{ transform: translate(-50%,-50%) rotate(45deg); } #currentfilters dd button:is(:hover,:focus-visible) { background: #233A65; color:white; border-color: #233A65; } #currentfilters dd button:is(:hover,:focus-visible)>b::before, #currentfilters dd button:is(:hover,:focus-visible)>b::after { background:white; } #currentfilters.notinuse { display: none;} #currentfilters button:focus-visible, #coursesearch button:focus-visible { box-shadow: 0 0 0 3px var(--hover_red); } #coursesearch input:focus-visible { box-shadow: inset 0 0 0 3px var(--hover_red); } @media all and (max-width: 599px) { #currentfilters dt, #currentfilters dd { font-size: 14px; line-height: 1; padding:0.5em 0.5em 0.4em 0; } #currentfilters dd { padding:0.5em 1.5em 0.4em 0.5em; border-radius: 5px; } #currentfilters dd>b { width: 12px; height: 12px; right:6px; margin-top:-6px; } #currentfilters dd>b::before, #currentfilters dd>b::after { width: 10px; } } @media screen and (min-width:1024px) { #coursesearch fieldset { width: calc(50% - 30px); } } @media screen and (min-width:601px) { #coursesearch div.wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items:flex-start; } } @media screen and (min-width:601px) and (max-width:1023px){ #coursesearch fieldset { width: calc(50% - 12px); } } @media screen and (max-width:600px) { #coursesearch { font-size: 2rem; } } body.loading::before { display: block; content: ""; width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #233A65; opacity: 0.75; background-position: center; background-repeat: no-repeat; z-index: 9992; } body.loading::after { z-index: 9993; box-sizing: border-box; content: " "; display: block; width: 80px; height: 80px; animation: spin 1s infinite linear; border-radius: 50%; border-width: 16px; border-style: solid; border-color: rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 0.4) rgba(255, 255, 255, 1); overflow: hidden; text-indent: -99999em; margin: auto; position: fixed; top: 50%; left: 50%; /* position: relative; left: calc(50% - 45px);*/ margin: -40px 0 0 -40px; } @keyframes spin { to { transform: rotate(360deg); } } #courseresults { border-top:1px solid transparent } #maincontent ul#courseresults li { margin: 32px 0 !important; list-style: none !important; font-size: 2.2rem; line-height: 1.4; } #courseresults li a { display: flex; border: 4px solid #0099D7; font-weight: 600; text-decoration: none; color: #233A65; border-radius: 8px; box-sizing: border-box ; transition: background-color 0.2s ease; } #courseresults li a:is(:hover,:focus-visible) { background: #D3EEF9; color: black; } #courseresults li a:focus-visible { box-shadow: 0 0 0 3px var(--hover_red); } #courseresults li a p { width: 25%; margin: 0; font-size: inherit; line-height:inherit; box-sizing: border-box} #courseresults li a p em { display: block; font-size: calc(1em - 2px); margin-top: 1px; } #courseresults li a p>span { display: block; padding: var(--courses-padding) var(--courses-padding) var(--courses-padding) var(--form-padding); } #courseresults li a p>span:last-child { font-weight: 600; padding-bottom: var(--form-padding);} #courseresults li a p>span:last-child em { font-weight: 400; } #courseresults li a p>span:first-child { border-bottom:1px solid #0099D7; padding: var(--form-padding) var(--courses-padding) var(--courses-padding) var(--form-padding); white-space: nowrap } #courseresults li a p:not(:last-child) { border-right:1px solid #0099D7; } #courseresults li a p img { display: block; height: 70px; margin-top: 8px; width: auto; mix-blend-mode: multiply; } @media screen and (max-width:850px){ #courseresults li a p>span { display: block; padding: var(--courses-padding) var(--courses-padding) var(--courses-padding) var(--form-padding); } #courseresults li a p>span:first-child { border-bottom:1px solid #0099D7; padding: var(--form-padding) var(--courses-padding) var(--courses-padding) var(--form-padding); } #courseresults li a { flex-wrap: wrap; } #courseresults li a p>span:first-child { border-bottom:none; padding-bottom:0; } #courseresults li a p>span:last-child { padding-top:8px; } #maincontent ul#courseresults li { font-size: 2rem; } } @media screen and (min-width:601px) and (max-width:850px){ #courseresults li a p:first-child { order: -2; } #courseresults li a p:nth-child(4) { order: -1; } #courseresults li a p { width: 50%; } #courseresults li a p:first-child, #courseresults li a p:nth-child(4){ border-bottom:1px solid #0099D7;} #courseresults li a p:nth-child(3) { border-right:none; } } @media screen and (max-width:600px) { #maincontent ul#courseresults li {font-size: 16px; } #courseresults li a p em { font-size: calc(1em - 1px); } #courseresults li a p { border-right:none !important; } #courseresults li a p:not(:last-child) { border-bottom:1px solid #0099D7; } #courseresults li a p { width: 100%; } #courseresults li a p:nth-child(4) { order:10; } #courseresults li a p>span { padding: var(--courses-padding) var(--courses-padding) var(--courses-padding) var(--form-padding); } #courseresults li a p>span:first-child { border-bottom:none; padding: var(--form-padding) var(--courses-padding) 0 var(--form-padding); } #courseresults li a p>span:last-child { display: flex; } #courseresults li a p>span:last-child img { min-width: auto; } #courseresults li a p img { display: block; height: 100%; width: 100%; object-fit: contain; object-position:top right; position: absolute; margin-top: 0px; } #courseresults li a p span span:first-child { flex:1; } #courseresults li a p span.instlogo { margin-left: 8px; position: relative; min-width: 110px; height: 60px;} } @media all and (min-width: 851px) { #mainintrowrapper { display: flex; } } #mainintro { /* margin-right: 0 !important;*/ } #hero p.play { flex: 1; order:100; margin-right: 32px; margin-bottom: 32px; display: flex; justify-content: center; align-items: center; } #hero p.play a span { position: fixed; top: -100px; opacity: 0; pointer-events: none } #hero p.play a { overflow: hidden; display: block; margin: 0 auto; width: 144px; height: 144px; border-radius: 50%; background-color: rgba(234, 103,73,0.8); background-size: cover; background-repeat: no-repeat; background-position: center; transition: all .2s ease; background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 144 144" style="enable-background:new 0 0 144 144;" xml:space="preserve"><path fill="%23FFFFFF" d="M109,72L52,39v66L109,72z"/></svg>') } #hero p.play a:hover { background-color: rgba(234, 103,73,1); transform: scale(1.1, 1.1) } #hero p.play a:focus-visible { /* box-shadow: 0 0 0 4px #f1d933;*/ background-color: rgba(234, 103,73,1); transform: scale(1.1, 1.1); } #playvideo { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 999999; background-color: rgba(35,58,101, .75) } #playvideo > div { width: calc(100% - 80px); max-width: 1920px; position: absolute; height: calc(100% - 80px); top: 50%; left: 50%; transform: translate(-50%, -50%) } #playvideo > div iframe { display: block; width: 100%; height: 100%; top: 0; left: 0 } #playvideo > div .closevid { display: block; position: absolute; z-index: 9999; top: -18px; right: -18px; width: 36px; height: 36px; right: 0; background: 0 0 !important; border: none !important; outline: none !important } #playvideo > div .closevid > img { height: 56.25% } #playvideo > div .closevid:after { content: ""; display: block; width: 36px; height: 36px; background-color: #fff; border-radius: 50%; background-repeat: no-repeat; background-position: center; box-shadow: 4px 4px 8px rgba(0, 0, 0, .25); background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve"><polygon fill="%2330312C" points="21.2,8.2 19.8,6.8 14,12.6 8.2,6.8 6.8,8.2 12.6,14 6.8,19.8 8.2,21.2 14,15.4 19.8,21.2 21.2,19.8 15.4,14 "/></svg>') } #playvideo > div .closevid:hover:after { background-color: #ea9c48 } #playvideo > div .closevid:focus-visible { z-index: 10000 } #playvideo > div .closevid:focus-visible:after { /* box-shadow: 0 0 0 3px var(--dark_bg), 0 0 0 5px var(--hover_over_dark);*/ border: 1px solid #ea9c48; background-color: #ea9c48; background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 28 28" style="enable-background:new 0 0 28 28;" xml:space="preserve"><polygon fill="%23000000" points="21.2,8.2 19.8,6.8 14,12.6 8.2,6.8 6.8,8.2 12.6,14 6.8,19.8 8.2,21.2 14,15.4 19.8,21.2 21.2,19.8 15.4,14 "/></svg>') } @media all and (max-width: 1199px) { #hero p.play a { width: 96px; height: 96px } } @media all and (max-width: 850px) { #playvideo > div { width: calc(100% - 40px) } #hero p.play { position: absolute; width: 100%; top: 0; left: 0; margin-bottom: 20px; } #hero p.play a { width: 72px; height: 72px } } @media screen and (min-width:601px) and (max-width:850px){ #hero p.play { top: -10px; } } @media all and (max-width: 600px) { #hero.vid { height: 100vw; min-height: 100vw; max-height: 100vw } #hero p.play { } }div.staff_cards_holder {max-width: 850px; margin: 32px auto 0; } div.staff_cards { display: flex; justify-content: space-around; flex-wrap: wrap; clear: both; width: calc(100% + 32px + 32px); position: relative; right:32px;} div.staff_cards > div { margin: 32px; padding-top: 63px; position: relative; width: calc(50% - (32px * 2)); display: flex; flex-direction: column; } div.staff_cards > div > div { border: 2px solid #0099D7; font-weight: 600; background: white; padding: 32px; border-radius: 16px; flex: 1; } div.staff_cards > div > picture+div {padding: calc(64px + 24px) 32px 32px;} div.staff_cards > div > picture { width: 128px; height: 128px; display: block; position: absolute; top:0; left:50%; transform:translateX(-50%); border-radius: 50%; overflow: hidden; z-index: 3; border: 2px solid #0099D7; background: var(--lightblue); } div.staff_cards > div > picture >img { width:calc(100% + 2px); height:calc(100% + 2px); display: block; position: absolute; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} div.staff_cards > div hr { border-bottom:1px solid #0099D7 !important; margin: 16px 0; } div.staff_cards > div > div p { font-size: 16px; margin: 0.5em 0 0; } div.staff_cards > div > div p.name { font-size: 24px; margin-top: 0; font-weight: 600; } div.staff_cards > div > div p.name+p.role { margin-top: 0; font-size: 20px; font-weight: 600; } div.staff_cards > div > div span.instlogo { display: block; height: 96px; width: 100%; margin-top: 18px; position: relative; } div.staff_cards > div > div span.instlogo img { width: 100%; height: 100%; object-fit: contain; object-position:center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } div.staff_cards > div > div span.instlogo.ntologo img { max-width: 240px; } div.staff_cards > div a:focus-visible { box-shadow: 0 0 0 3px var(--hover_red); } @media screen and (min-width:1400px){ } @media screen and (max-width:850px) { div.staff_cards { justify-content: center; width: calc(100% + 32px); right:16px; } div.staff_cards > div { margin: 24px 16px; padding-top: 47px; width:calc(50% - 32px);max-width: 360px; } div.staff_cards > div > div { padding: 24px; } div.staff_cards > div > picture+div { padding: calc(48px + 16px) 24px 24px;} div.staff_cards > div > picture { width: 96px; height: 96px; } div.staff_cards > div > div p { font-size: 16px; } div.staff_cards > div > div p.name { font-size: 18px; } div.staff_cards > div > div p.name+p.role { font-size: 16px; } div.staff_cards > div hr { margin: 12px 0; } } @media screen and (max-width:600px) { div.staff_cards > div { margin: 24px 0; width: 100%; } div.staff_cards > div > div { padding: calc(48px + 16px) 24px 24px; } div.staff_cards > div > div span.instlogo { height: 80px; margin-top: 12px; } }
#designer { font-size:1.6rem;  font-weight:300; clear:both; margin:3rem 0 1rem; }
#designer a {color:#999; text-decoration:none; }
#designer a:hover { text-decoration:underline; }

#designer strong{  font-weight:400; }