.visuallyhidden { border: 0; margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0); position: absolute } html { color: #000; height: 100%; font-size: 16px; webkit-font-smoothing: antialiased } nav[role="mobileMenu"] { display: none } .indent { text-indent: -999em } ::-moz-selection { background: #b3d4fc; text-shadow: none } ::selection { background: #b3d4fc; text-shadow: none } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0 } audio, canvas, iframe, img, svg, video { vertical-align: middle } fieldset { border: 0; margin: 0; padding: 0 } textarea { resize: vertical } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0 } body { width: 100%; height: 100%; min-height: 100%; font-size: 62.5%; line-height: 1; font-family: "Open Sans", sans-serif; background: #fff; margin: 0; color: #303030; -webkit-tap-highlight-color: transparent; } .hidden { display: none !important } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto } .invisible { visibility: hidden } @media print { *, *:before, *:after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important } a, a:visited { text-decoration: underline } a[href]:after { content: " (" attr(href) ")" } abbr[title]:after { content: " (" attr(title) ")" } a[href^="#"]:after, a[href^="javascript:"]:after { content: "" } pre, blockquote { border: 1px solid #999; page-break-inside: avoid } thead { display: table-header-group } tr, img { page-break-inside: avoid } img { max-width: 100% !important } p, h2, h3 { orphans: 3; widows: 3 } h2, h3 { page-break-after: avoid } } body.page header#masthead, body.home.fixedHeader header#masthead, #slider ul.slick-dots li.slick-active button, .menu-toggle span, #infoAdverts .advert .info a.more:hover, #infoAdverts .owl-dots button.active, #slider .searchSubjectsMenu .courseSearch .searchElement, #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a:hover, #latestNews .newsHolder .blogInfo, #latestNews a.viewAll, #events .owl-dots button.active, #explore .holder .carousel .advert .info a.more:hover, #explore .holder .carousel .owl-dots button.active, #mainMenu .menuHolder .menuRight .searchBox, .mobileMenuAdditions .innerHeader .searchBox, .mobileMenuAdditions .innerHeader a.mobMenuBTNClose:before, .mobileMenuAdditions .innerHeader a.mobMenuBTNClose:after, .menu-toggle .cross span, body.page .menu-toggle.open span, #pageHolder aside#sidebar .courseSearch .searchElement, #sectionMenu.page ul .sf-mega:after, #pageHolder #mobileSidebar .courseSearch .searchElement, body.course-page #relatedCourses .courseList .course a:hover, #courseDetails .sidebar .courseSearch .searchElement, #courseDetails .content #mobileSidebar .courseSearch .searchElement, #relatedCourses .courseList .course span.more, body.course-listing #sectorLandingChoose .courseCategoryList .course a:hover span.more, body.course-search #sectorLandingChoose, #sectorLandingChoose .courseCategoryList .course a:hover span.more, #sectorLandingChoose .pageList .page span.more, #sectorLandingWelcome .welcomeSidebar .blockquoteCarousel .owl-dots button { background-color: #fff } .menuOpeners.school-leavers .menuItem .overlay, .menuOpeners.school-leavers .dropdown, .menuOpeners.school-leavers .dropdown .introText, .menuOpeners.school-leavers .dropdown .introText .title:before, #sectionMenu.page ul li.school-leavers>a:hover, #sectionMenu.page ul li.school-leavers .sf-mega .col.s-3, #sectionMenu.page ul li.school-leavers .sf-mega:before, #sectionMenu.page ul li.school-leavers>a.active, body.school-leavers #pageHolder aside#sidebar ul, body.school-leavers #pageHolder aside#sidebar .courseSearch, body.school-leavers #sectorLandingChoose ul.tabs li span, body.school-leavers #sectorLandingChoose ul.tabs li.link a, body.school-leavers #sectorLandingChoose .subjectList .subject a:hover, body.school-leavers #sectorLandingChoose .tab-content .column a.more, body.school-leavers #slider .searchSubjectsMenu .subjects, body.school-leavers #slider .searchSubjectsMenu .subjects .dropdown, body.school-leavers #slider .searchSubjectsMenu .subjects .dropdown:before, body.school-leavers #slider .searchSubjectsMenu .subjects .dropdown:after, body.school-leavers .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, body.school-leavers #sectorLandingChoose .levelList .level a:hover, body.school-leavers #relatedCourses, body.school-leavers #courseDetails .sidebar .button, body.school-leavers #courseDetails .sidebar .courseDetails, body.school-leavers #courseDetails .sidebar .courseSearch, body.school-leavers #courseDetails .content #mobileSidebar .courseSearch, body.school-leavers #relatedCourses .courseList .course a:hover span.more, body.school-leavers #courseDetails .content a.additional-link, body.school-leavers #sectorLandingChoose .courseCategoryList .course span.more, body.school-leavers #sectorLandingChoose .courseCategoryList .course a:hover, #sectorLandingChoose .courseCategoryList .course.school-leavers a:hover, #sectorLandingChoose .courseCategoryList .course.school-leavers span.more { background-color: #0072ce } .mm-listview>li.sectorItem.schoolLeavers>a, #sectionMenu.page ul li.school-leavers>a { background-color: #0072ce; background-color: rgba(56, 111, 179, 0.95) } body.school-leavers #pageHolder aside#sidebar .sectionHeader, body.school-leavers #sectorLandingQuickLinks .ql .overlay, body.school-leavers #sectorLandingWelcome .quickLink .item a .overlay, body.school-leavers #sectorLandingChoose .pathList .path .overlay { background-color: #0072ce; background-color: rgba(56, 111, 179, 0.9) } .menuOpeners.apprenticeships .menuItem .overlay, .menuOpeners.apprenticeships .dropdown, .menuOpeners.apprenticeships .dropdown .introText, .menuOpeners.apprenticeships .dropdown .introText .title:before, #sectionMenu.page ul li.apprenticeships>a:hover, #sectionMenu.page ul li.apprenticeships .sf-mega .col.s-3, #sectionMenu.page ul li.apprenticeships .sf-mega:before, #sectionMenu.page ul li.apprenticeships>a.active, body.apprenticeships #pageHolder aside#sidebar ul, body.apprenticeships #pageHolder aside#sidebar .courseSearch, body.apprenticeships #sectorLandingChoose ul.tabs li span, body.apprenticeships #sectorLandingChoose ul.tabs li.link a, body.apprenticeships #sectorLandingChoose .subjectList .subject a:hover, body.apprenticeships #sectorLandingChoose .tab-content .column a.more, body.apprenticeships #slider .searchSubjectsMenu .subjects, body.apprenticeships #slider .searchSubjectsMenu .subjects .dropdown, body.apprenticeships #slider .searchSubjectsMenu .subjects .dropdown:before, body.apprenticeships #slider .searchSubjectsMenu .subjects .dropdown:after, body.apprenticeships .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, body.apprenticeships #sectorLandingChoose .levelList .level a:hover, body.apprenticeships #relatedCourses, body.apprenticeships #courseDetails .sidebar .button, body.apprenticeships #courseDetails .sidebar .courseDetails, body.apprenticeships #courseDetails .sidebar .courseSearch, body.apprenticeships #courseDetails .content #mobileSidebar .courseSearch, body.apprenticeships #relatedCourses .courseList .course a:hover span.more, body.apprenticeships #courseDetails .content a.additional-link, body.apprenticeships #sectorLandingChoose .courseCategoryList .course span.more, body.apprenticeships #sectorLandingChoose .courseCategoryList .course a:hover, #sectorLandingChoose .courseCategoryList .course.apprenticeships a:hover, #sectorLandingChoose .courseCategoryList .course.apprenticeships span.more { background-color: #78be20 } .mm-listview>li.sectorItem.apprenticeships>a, #sectionMenu.page ul li.apprenticeships>a { background-color: #78be20; background-color: rgba(120, 190, 32, 0.95) } body.apprenticeships #pageHolder aside#sidebar .sectionHeader, body.apprenticeships #sectorLandingQuickLinks .ql .overlay, body.apprenticeships #sectorLandingWelcome .quickLink .item a .overlay, body.apprenticeships #sectorLandingChoose .pathList .path .overlay { background-color: #78be20; background-color: rgba(120, 190, 32, 0.9) } .menuOpeners.adult .menuItem .overlay, .menuOpeners.adult .dropdown, .menuOpeners.adult .dropdown .introText, .menuOpeners.adult .dropdown .introText .title:before, #sectionMenu.page ul li.adult>a:hover, #sectionMenu.page ul li.adult .sf-mega .col.s-3, #sectionMenu.page ul li.adult .sf-mega:before, #sectionMenu.page ul li.adult>a.active, body.adult #pageHolder aside#sidebar ul, body.adult #pageHolder aside#sidebar .courseSearch, body.adult #sectorLandingChoose ul.tabs li span, body.adult #sectorLandingChoose ul.tabs li.link a, body.adult #sectorLandingChoose .subjectList .subject a:hover, body.adult #sectorLandingChoose .tab-content .column a.more, body.adult #slider .searchSubjectsMenu .subjects, body.adult #slider .searchSubjectsMenu .subjects .dropdown, body.adult #slider .searchSubjectsMenu .subjects .dropdown:before, body.adult #slider .searchSubjectsMenu .subjects .dropdown:after, body.adult .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, body.adult #sectorLandingChoose .levelList .level a:hover, body.adult #relatedCourses, body.adult #courseDetails .sidebar .button, body.adult #courseDetails .sidebar .courseDetails, body.adult #courseDetails .sidebar .courseSearch, body.adult #courseDetails .content #mobileSidebar .courseSearch, body.adult #relatedCourses .courseList .course a:hover span.more, body.adult #courseDetails .content a.additional-link, body.adult #sectorLandingChoose .courseCategoryList .course span.more, body.adult #sectorLandingChoose .courseCategoryList .course a:hover, #sectorLandingChoose .courseCategoryList .course.adult a:hover, #sectorLandingChoose .courseCategoryList .course.adult span.more { background-color: #9b26b6 } .mm-listview>li.sectorItem.adult>a, #sectionMenu.page ul li.adult>a { background-color: #9b26b6; background-color: rgba(155, 38, 182, 0.95) } body.adult #pageHolder aside#sidebar .sectionHeader, body.adult #sectorLandingQuickLinks .ql .overlay, body.adult #sectorLandingWelcome .quickLink .item a .overlay, body.adult #sectorLandingChoose .pathList .path .overlay { background-color: #9b26b6; background-color: rgba(155, 38, 182, 0.9) } body.employer #pageHolder aside#sidebar .sectionHeader, body.employer #sectorLandingQuickLinks .ql .overlay, body.employer #sectorLandingWelcome .quickLink .item a .overlay, body.employer #sectorLandingChoose .pathList .path .overlay { background-color: #505456; background-color: rgba(80, 84, 86,.95); } .menuOpeners.degree .menuItem .overlay, .menuOpeners.degree .dropdown, .menuOpeners.degree .dropdown .introText, .menuOpeners.degree .dropdown .introText .title:before, #sectionMenu.page ul li.degree>a:hover, #sectionMenu.page ul li.degree .sf-mega .col.s-3, #sectionMenu.page ul li.degree .sf-mega:before, #sectionMenu.page ul li.degree>a.active, body.degree #pageHolder aside#sidebar ul, body.degree #pageHolder aside#sidebar .courseSearch, body.degree #sectorLandingChoose ul.tabs li span, body.degree #sectorLandingChoose ul.tabs li.link a, body.degree #sectorLandingChoose .subjectList .subject a:hover, body.degree #sectorLandingChoose .tab-content .column a.more, body.degree #slider .searchSubjectsMenu .subjects, body.degree #slider .searchSubjectsMenu .subjects .dropdown, body.degree #slider .searchSubjectsMenu .subjects .dropdown:before, body.degree #slider .searchSubjectsMenu .subjects .dropdown:after, body.degree .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, body.degree #sectorLandingChoose .levelList .level a:hover, body.degree #relatedCourses, body.degree #courseDetails .sidebar .button, body.degree #courseDetails .sidebar .courseDetails, body.degree #courseDetails .sidebar .courseSearch, body.degree #courseDetails .content #mobileSidebar .courseSearch, body.degree #relatedCourses .courseList .course a:hover span.more, body.degree #courseDetails .content a.additional-link, body.degree #sectorLandingChoose .courseCategoryList .course span.more, body.degree #sectorLandingChoose .courseCategoryList .course a:hover, #sectorLandingChoose .courseCategoryList .course.degree a:hover, #sectorLandingChoose .courseCategoryList .course.degree span.more { background-color: #bc204b } .mm-listview>li.sectorItem.degree>a, #sectionMenu.page ul li.degree>a { background-color: #bc204b; background-color: rgba(188, 32, 75, 0.95) } body.degree #pageHolder aside#sidebar .sectionHeader, body.degree #sectorLandingQuickLinks .ql .overlay, body.degree #sectorLandingWelcome .quickLink .item a .overlay, body.degree #sectorLandingChoose .pathList .path .overlay { background-color: #bc204b; background-color: rgba(188, 32, 75, 0.9) } .menuOpeners.academy .menuItem .overlay, .menuOpeners.academy .dropdown, .menuOpeners.academy .dropdown .introText, .menuOpeners.academy .dropdown .introText .title:before, #sectionMenu.page ul li.academy>a:hover, #sectionMenu.page ul li.academy .sf-mega .col.s-3, #sectionMenu.page ul li.academy .sf-mega:before, #sectionMenu.page ul li.academy>a.active, body.academy #pageHolder aside#sidebar ul, body.academy #pageHolder aside#sidebar .courseSearch, body.academy #sectorLandingChoose ul.tabs li span, body.academy #sectorLandingChoose ul.tabs li.link a, body.academy #sectorLandingChoose .tab-content .column a.more, body.academy #slider .searchSubjectsMenu .subjects, body.academy #slider .searchSubjectsMenu .subjects .dropdown, body.academy #slider .searchSubjectsMenu .subjects .dropdown:before, body.academy #slider .searchSubjectsMenu .subjects .dropdown:after, body.academy .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, body.academy #sectorLandingChoose .levelList .level a:hover, body.academy #relatedCourses, body.academy #courseDetails .sidebar .courseSearch { background-color: #354293 } .mm-listview>li.sectorItem.academy>a, #sectionMenu.page ul li.academy>a { background-color: #354293; background-color: rgba(53, 66, 147, 0.95) } body.academy #pageHolder aside#sidebar .sectionHeader, body.academy #sectorLandingQuickLinks .ql .overlay, body.academy #sectorLandingWelcome .quickLink .item a .overlay, body.academy #sectorLandingChoose .pathList .path .overlay { background-color: #354293; background-color: rgba(53, 66, 147, 0.9) } .menuOpeners.net .menuItem .overlay, .menuOpeners.net .dropdown, .menuOpeners.net .dropdown .introText, .menuOpeners.net .dropdown .introText .title:before, #slider .searchSubjectsMenu .courseSearch, #latestNews .newsHolder a:hover .blogInfo span.more, #events .holder .event.open, #events .holder .event.open .eventType, #mainMenu .menuHolder .menuRight .searchBox button.searchBTN, .mobileMenuAdditions .innerHeader .searchBox button.searchBTN, #sectionMenu.page ul li.net>a:hover, #pageHolder #pageContent blockquote, #explore.page, #pageHolder aside#sidebar .courseSearch .searchElement button.searchBTN, #sectionMenu.page ul .sf-mega, #sectionMenu.page ul li.net .sf-mega .col.s-3, #sectionMenu.page ul li.net .sf-mega:before, #sectionMenu.page ul li.net>a.active, #pageHolder #mobileSidebar .courseSearch .searchElement button, #pageHolder #pageContent a.more.error_home:hover, body.net #pageHolder aside#sidebar ul, body.net #pageHolder aside#sidebar .courseSearch, #pageHolder #pageContent ul.newsList li a:hover .itemInfo .more, #sectorLandingWelcome .welcomeSidebar .advert .item .title, body.sector-landing #sectorLandingChoose ul.tabs li span.current, body.net #sectorLandingChoose .tab-content .column a.more, body.sector-landing #sectorLandingChoose .tab-content .column a.more:hover, body.net #slider .searchSubjectsMenu .subjects, body.net #slider .searchSubjectsMenu .subjects .dropdown, body.net #slider .searchSubjectsMenu .subjects .dropdown:before, body.net #slider .searchSubjectsMenu .subjects .dropdown:after, body.net .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, body.sector-landing #sectorLandingChoose ul.tabs li.link a:hover, body.net #sectorLandingChoose .levelList .level a:hover, #sectorLandingWelcome .welcomeSidebar .imageCarousel .owl-dots button.active, body.course-page #courseDetails .sidebar .button:hover, #courseDetails .sidebar .courseSearch .searchElement button.searchBTN, #courseDetails .content #mobileSidebar .courseSearch .searchElement button.searchBTN, body.course-page #courseDetails .content a.additional-link:hover, #sectorLandingWelcome .welcomeSidebar .blockquoteCarousel .owl-dots button.active, body.search-results .filter .filterWrapper button.filterBTN:hover, body.course-search .filter .filterWrapper button.filterBTN:hover, #sectorLandingChoose .newsList a:hover .more { background-color: #505456 } .mm-listview>li.sectorItem.net>a, #sectionMenu.page ul li.net>a { background-color: #505456; background-color: rgba(80, 84, 86, 0.95) } body.net #pageHolder aside#sidebar .sectionHeader, body.sector-landing #sectorLandingQuickLinks .ql a:hover .overlay, body.sector-landing #sectorLandingWelcome .welcomeSidebar .quickLink .item a:hover .overlay, body.net #sectorLandingChoose .pathList .path .overlay { background-color: #505456; background-color: rgba(80, 84, 86, 0.9) } .menuOpeners.hmc .menuItem .overlay, .menuOpeners.hmc .dropdown, .menuOpeners.hmc .dropdown .introText, .menuOpeners.hmc .dropdown .introText .title:before, #infoAdverts .advert .info a.more, #latestNews, .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, #slider .searchSubjectsMenu .subjects, #slider .searchSubjectsMenu .subjects .dropdown, #slider .searchSubjectsMenu .subjects .dropdown:before, #slider .searchSubjectsMenu .subjects .dropdown:after, #latestNews .newsHolder .blogInfo span.more, #events a.viewAll, #explore .holder .carousel .advert .info a.more, footer#siteFooter, #slider #tickerTape, #mainMenu, #sectionMenu.mobile .owl-nav button, .mobileMenuFooter, body.page header#masthead.open, #sectionMenu.page ul li.hmc>a:hover, #pageHolder aside#sidebar ul, #pageHolder aside#sidebar .courseSearch, #sectionMenu.page ul li.hmc .sf-mega .col.s-3, #sectionMenu.page ul li.hmc .sf-mega:before, #sectionMenu.page ul li.hmc>a.active, #pageHolder #mobileSidebar .courseSearch, #pageHolder #pageContent a.more.error_home, #pageHolder #pageContent ul.newsList .itemInfo .more, body.hmc #slider .searchSubjectsMenu .subjects, body.hmc #slider .searchSubjectsMenu .subjects .dropdown, body.hmc #slider .searchSubjectsMenu .subjects .dropdown:before, body.hmc #slider .searchSubjectsMenu .subjects .dropdown:after, body.hmc .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, #pageHolder #events .holder a.more, body.search-results .inputSearch button.searchBTN, body.course-search .inputSearch button.searchBTN, body.search-results .filter .filterWrapper button.filterBTN, body.course-search .filter .filterWrapper button.filterBTN, #sectorLandingChoose .pageList .page a, #sectorLandingChoose .newsList .more { background-color: #236192 } .mm-listview>li.sectorItem.hmc>a, #sectionMenu.page ul li.hmc>a { background-color: #236192; background-color: rgba(35, 97, 146, 0.95) } #pageHolder aside#sidebar .sectionHeader, #sectorLandingQuickLinks .ql .overlay { background-color: #236192; background-color: rgba(35, 97, 146, 0.9) } body.fixedHeader .menu-toggle span { background-color: #307B82 } #events .holder .event, #events .holder .event .eventType, #explore, #pageContent #monthFilter .filterGroup, #pageContent #monthFilter .filterItems, #sectorLandingChoose, #courseDetails, body.search-results .inputSearch, body.course-search .inputSearch, body.search-results .filter .filterGroup, body.course-search .filter .filterGroup, body.search-results .filter .filterItems, body.course-search .filter .filterItems, #sectorLandingChoose .newsList .news a { background-color: #f5f5f5 } #events a.viewAll:hover, #pageHolder #pageContent .sitemap li ul ul li:before, #pageHolder #events .holder a.more:hover, #courseDetails .content .levels span:before, #sectorLandingChoose .pageList .page a:hover span.more { background-color: #000 } body.home header#masthead, #slider ul.slick-dots li button, #infoAdverts .owl-dots button, #events .owl-dots button, #explore .holder .carousel .owl-dots button, #sectorLandingChoose .subjectList .subject a, #sectorLandingWelcome .welcomeSidebar .imageCarousel .owl-dots button { background-color: transparent } #slider .sliderText .slide .bannerText .title, #sectionMenu .menuOpeners .menuItem .title, #infoAdverts .advert .info, #infoAdverts .advert .info a.more, #latestNews .leftInfo, .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, #slider .searchSubjectsMenu .courseSearch .panelTitle, #slider .searchSubjectsMenu .subjects .title, #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a, header#masthead .topBar a.topBarLink, #latestNews .newsHolder .blogInfo span.more, #latestNews .newsHolder .owl-nav button, #events .holder .event.open .eventInfo, #events a.viewAll, #explore .holder .carousel .advert .info, #explore .holder .carousel .advert .info a.more, #socials a, footer#siteFooter, footer#siteFooter a, #slider #tickerTape .marquee, #sectionMenu .menuOpeners .dropdown .introText, #sectionMenu .menuOpeners .dropdown .menuItems ul li a, #sectionMenu .menuOpeners .dropdown .introText .quickLinks .link a, #sectionMenu .menuOpeners .dropdown button.close, #slider #tickerTape button.close, #mainMenu .menuHolder .menuLeft #accordion .accordion-title, .menuLeft #accordion div.ui-accordion-content .column a, #mainMenu .menuHolder .menuRight .searchBox button.searchBTN, #mainMenu .menuHolder .menuRight .explore a, #mainMenu .menuHolder .menuRight .explore .sectionTitle, #mainMenu .menuHolder .menuRight .footerLinks a, #sectionMenu.mobile .owl-nav button, .mobileMenuAdditions .innerHeader .searchBox button.searchBTN, .mobileMenuAdditions .innerHeader .socials a, .mobileMenuAdditions .innerHeader .topBar a, .mobileMenuFooter a, body.page header#masthead.open .topBar a.topBarLink, #sectionMenu.page ul li a, #pageHolder #pageContent blockquote, #pageHolder aside#sidebar ul li a, #pageHolder aside#sidebar .sectionHeader, #pageHolder aside#sidebar .holder:after, #pageHolder aside#sidebar ul li ul li:before, #pageHolder aside#sidebar #explore.page .explore a, #pageHolder aside#sidebar #explore.page .explore .sectionTitle, #pageHolder aside#sidebar .courseSearch .panelTitle, #pageHolder aside#sidebar .courseSearch .searchElement button.searchBTN, #pageHolder #mobileSidebar #explore.page, #pageHolder #mobileSidebar #explore.page a, #pageHolder #mobileSidebar .courseSearch .panelTitle, #pageHolder #mobileSidebar .courseSearch .searchElement button, #pageHolder #pageContent a.more.error_home, #pageHolder #pageContent ul.newsList .itemInfo .more, #sectorLandingWelcome .welcomeSidebar .advert .item .title, #sectorLandingChoose ul.tabs li span, body.sector-landing #sectorLandingChoose .subjectList .subject a:hover, #sectorLandingQuickLinks .ql .title, #sectorLandingChoose .tab-content .column a.more, #sectorLandingChoose ul.tabs li a, body.sector-landing #sectorLandingChoose .levelList .level a:hover, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title, #sectorLandingChoose .pathList .path .title, #pageHolder #events .holder a.more, #pageHolder #pageContent .event.open .eventExtra, #relatedCourses .sectionTitle, #relatedCourses .courseList .course a, #relatedCourses .owl-nav button, #courseDetails .sidebar .button, #courseDetails .sidebar .courseDetails, #courseDetails .sidebar #explore.page .explore, #courseDetails .sidebar #explore.page .explore a, #courseDetails .sidebar .courseSearch .panelTitle, #courseDetails .sidebar .courseSearch .searchElement button.searchBTN, #courseDetails .content #mobileSidebar #explore.page .explore .sectionTitle.mobile, #courseDetails .content #mobileSidebar #explore.page .explore a, #courseDetails .content #mobileSidebar .courseSearch .panelTitle, #courseDetails .content #mobileSidebar .courseSearch .searchElement button.searchBTN, body.course-page #relatedCourses .courseList .course a:hover span.more, #courseDetails .content a.additional-link, #sectorLandingChoose .courseCategoryList .course span.more, body.course-listing #sectorLandingChoose .courseCategoryList .course a:hover .title, body.course-listing #sectorLandingChoose .courseCategoryList .course a:hover .specifics .spec, body.course-listing #sectorLandingChoose .courseCategoryList .course a:hover .specifics .spec span, body.course-listing #sectorLandingChoose .courseCategoryList .course a:hover .number, #sectorLandingChoose .courseCategoryList .course a:hover .intro, body.search-results .inputSearch button.searchBTN, body.course-search .inputSearch button.searchBTN, body.search-results .filter .filterWrapper button.filterBTN, body.course-search .filter .filterWrapper button.filterBTN, #sectorLandingChoose .courseCategoryList .course a:hover .title, #sectorLandingChoose .courseCategoryList .course a:hover .specifics .spec, #sectorLandingChoose .courseCategoryList .course a:hover .specifics .spec span, #sectorLandingChoose .courseCategoryList .course a:hover span.number, #sectorLandingChoose .pageList .page a, #sectorLandingChoose .pageList .page a:hover span.more, #sectorLandingChoose .newsList .more { color: #fff } body.school-leavers #pageHolder #pageContent h1, body.school-leavers #pageHolder #pageContent h2, body.school-leavers #pageHolder #pageContent h3, body.school-leavers #pageHolder #pageContent h4, body.school-leavers #pageHolder #pageContent h5, body.school-leavers #pageHolder #pageContent p a, body.school-leavers #pageHolder .breadcrumb a:hover, body.school-leavers #pageHolder .breadcrumb a.current, body.school-leavers #sectorLandingChoose .sectionTitle, body.school-leavers #sectorLandingChoose h2, body.school-leavers #sectorLandingChoose .subjectList .subject a, body.school-leavers #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a:hover, body.school-leavers #sectorLandingChoose .levelList .level a, body.school-leavers #relatedCourses .courseList .course a:hover, body.school-leavers #courseDetails .content .sectionTitle, body.school-leavers #courseDetails #accordion .accordion-title, body.school-leavers #courseDetails .sidebar .sectionTitle.mobile, body.school-leavers #courseDetails .content h1, body.school-leavers #courseDetails .content h2, body.school-leavers #courseDetails .content h3, body.school-leavers #courseDetails .content h4, body.school-leavers #courseDetails .content h5, body.school-leavers #relatedCourses .courseList .course span.more, body.school-leavers #courseDetails .mobilePageHeading.h1, body.school-leavers #courseDetails .mobilePageHeading.h2, body.school-leavers .courseCategoryList .course .specifics .spec span, body.school-leavers #sectorLandingChoose .courseCategoryList .course .title, body.school-leavers #sectorLandingChoose .courseCategoryList .course span.number, body.school-leavers #sectorLandingChoose .courseCategoryList .course a:hover span.more { color: #0072ce } #sectorLandingChoose .courseCategoryList .course.school-leavers .title, #sectorLandingChoose .courseCategoryList .course.school-leavers span.number, #sectorLandingChoose .courseCategoryList .course.school-leavers .specifics .spec span { color: #0072ce } #sectorLandingChoose .courseCategoryList .course.school-leavers a:hover span.more { color: #0072ce } body.apprenticeships #pageHolder #pageContent h1, body.apprenticeships #pageHolder #pageContent h2, body.apprenticeships #pageHolder #pageContent h3, body.apprenticeships #pageHolder #pageContent h4, body.apprenticeships #pageHolder #pageContent h5, body.apprenticeships #pageHolder #pageContent p a, body.apprenticeships #pageHolder .breadcrumb a:hover, body.apprenticeships #pageHolder .breadcrumb a.current, body.apprenticeships #sectorLandingChoose .sectionTitle, body.apprenticeships #sectorLandingChoose h2, body.apprenticeships #sectorLandingChoose .subjectList .subject a, body.apprenticeships #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a:hover, body.apprenticeships #sectorLandingChoose .levelList .level a, body.apprenticeships #relatedCourses .courseList .course a:hover, body.apprenticeships #courseDetails .content .sectionTitle, body.apprenticeships #courseDetails #accordion .accordion-title, body.apprenticeships #courseDetails .sidebar .sectionTitle.mobile, body.apprenticeships #courseDetails .content h1, body.apprenticeships #courseDetails .content h2, body.apprenticeships #courseDetails .content h3, body.apprenticeships #courseDetails .content h4, body.apprenticeships #courseDetails .content h5, body.apprenticeships #relatedCourses .courseList .course span.more, body.apprenticeships #courseDetails .mobilePageHeading.h1, body.apprenticeships #courseDetails .mobilePageHeading.h2, body.apprenticeships .courseCategoryList .course .specifics .spec span, body.apprenticeships #sectorLandingChoose .courseCategoryList .course .title, body.apprenticeships #sectorLandingChoose .courseCategoryList .course span.number, body.apprenticeships #sectorLandingChoose .courseCategoryList .course a:hover span.more { color: #78be20 } #sectorLandingChoose .courseCategoryList .course.apprenticeships .title, #sectorLandingChoose .courseCategoryList .course.apprenticeships span.number, #sectorLandingChoose .courseCategoryList .course.apprenticeships .specifics .spec span { color: #78be20 } #sectorLandingChoose .courseCategoryList .course.apprenticeships a:hover span.more { color: #78be20 } body.adult #pageHolder #pageContent h1, body.adult #pageHolder #pageContent h2, body.adult #pageHolder #pageContent h3, body.adult #pageHolder #pageContent h4, body.adult #pageHolder #pageContent h5, body.adult #pageHolder #pageContent p a, body.adult #pageHolder .breadcrumb a:hover, body.adult #pageHolder .breadcrumb a.current, body.adult #sectorLandingChoose .sectionTitle, body.adult #sectorLandingChoose h2, body.adult #sectorLandingChoose .subjectList .subject a, body.adult #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a:hover, body.adult #sectorLandingChoose .levelList .level a, body.adult #relatedCourses .courseList .course a:hover, body.adult #courseDetails .content .sectionTitle, body.adult #courseDetails #accordion .accordion-title, body.adult #courseDetails .sidebar .sectionTitle.mobile, body.adult #courseDetails .content h1, body.adult #courseDetails .content h2, body.adult #courseDetails .content h3, body.adult #courseDetails .content h4, body.adult #courseDetails .content h5, body.adult #relatedCourses .courseList .course span.more, body.adult #courseDetails .mobilePageHeading.h1, body.adult #courseDetails .mobilePageHeading.h2, body.adult .courseCategoryList .course .specifics .spec span, body.adult #sectorLandingChoose .courseCategoryList .course .title, body.adult #sectorLandingChoose .courseCategoryList .course span.number, body.adult #sectorLandingChoose .courseCategoryList .course a:hover span.more { color: #9b26b6 } #sectorLandingChoose .courseCategoryList .course.adult .title, #sectorLandingChoose .courseCategoryList .course.adult span.number, #sectorLandingChoose .courseCategoryList .course.adult .specifics .spec span { color: #9b26b6 } #sectorLandingChoose .courseCategoryList .course.adult a:hover span.more { color: #9b26b6 } body.degree #pageHolder #pageContent h1, body.degree #pageHolder #pageContent h2, body.degree #pageHolder #pageContent h3, body.degree #pageHolder #pageContent h4, body.degree #pageHolder #pageContent h5, body.degree #pageHolder #pageContent p a, body.degree #pageHolder .breadcrumb a:hover, body.degree #pageHolder .breadcrumb a.current, body.degree #sectorLandingChoose .sectionTitle, body.degree #sectorLandingChoose h2, body.degree #sectorLandingChoose .subjectList .subject a, body.degree #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a:hover, body.degree #sectorLandingChoose .levelList .level a, body.degree #relatedCourses .courseList .course a:hover, body.degree #courseDetails .content .sectionTitle, body.degree #courseDetails #accordion .accordion-title, body.degree #courseDetails .sidebar .sectionTitle.mobile, body.degree #courseDetails .content h1, body.degree #courseDetails .content h2, body.degree #courseDetails .content h3, body.degree #courseDetails .content h4, body.degree #courseDetails .content h5, body.degree #relatedCourses .courseList .course span.more, body.degree #courseDetails .mobilePageHeading.h1, body.degree #courseDetails .mobilePageHeading.h2, body.degree .courseCategoryList .course .specifics .spec span, body.degree #sectorLandingChoose .courseCategoryList .course .title, body.degree #sectorLandingChoose .courseCategoryList .course span.number, body.degree #sectorLandingChoose .courseCategoryList .course a:hover span.more { color: #bc204b } #sectorLandingChoose .courseCategoryList .course.degree .title, #sectorLandingChoose .courseCategoryList .course.degree span.number, #sectorLandingChoose .courseCategoryList .course.degree .specifics .spec span { color: #bc204b } #sectorLandingChoose .courseCategoryList .course.degree a:hover span.more { color: #bc204b } body.academy #pageHolder #pageContent h1, body.academy #pageHolder #pageContent h2, body.academy #pageHolder #pageContent h3, body.academy #pageHolder #pageContent h4, body.academy #pageHolder #pageContent h5, body.academy #pageHolder #pageContent p a, body.academy #pageHolder .breadcrumb a:hover, body.academy #pageHolder .breadcrumb a.current, body.academy #sectorLandingChoose .sectionTitle, body.academy #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a:hover, body.academy #sectorLandingChoose .levelList .level a, body.academy #courseDetails .content .sectionTitle, body.academy #courseDetails #accordion .accordion-title, body.academy #courseDetails .mobilePageHeading.h1, body.academy #courseDetails .mobilePageHeading.h2 { color: #354293 } body.net #pageHolder #pageContent h1, body.net #pageHolder #pageContent h2, body.net #pageHolder #pageContent h3, body.net #pageHolder #pageContent h4, body.net #pageHolder #pageContent h5, body.net #pageHolder #pageContent p a, body.net #pageHolder .breadcrumb a:hover, body.net #pageHolder .breadcrumb a.current, body.net #sectorLandingChoose .sectionTitle, body.net #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a:hover, body.net #sectorLandingChoose .levelList .level a { color: #505456 } #pageContent .pagination a.previous:hover, #pageContent .pagination a.next:hover, #sectorLandingChoose .tab-content .number, #events .holder .event .eventInfo, .share a:hover, #pageHolder #pageContent .eventExtra, .courseCategoryList .course .specifics .spec { color: #505456 } #infoAdverts .advert .info a.more:hover, #infoAdverts .owl-nav button, #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a:hover, #latestNews a.viewAll:hover, #events .owl-nav button:hover, #explore .holder .explore a, #explore .holder .carousel .advert .info a.more:hover, #explore .holder .carousel .owl-nav button, #socials .social.green a, body.fixedHeader header#masthead .topBar a.topBarLink, body.page header#masthead .topBar a.topBarLink, #pageHolder #pageContent h1, #pageHolder #pageContent h2, #pageHolder #pageContent h3, #pageHolder #pageContent h4, #pageHolder #pageContent h5, #pageHolder .breadcrumb a.current, #pageHolder .breadcrumb a:hover, .share span, .share a, #pageHolder #pageContent .sitemap li a, #pageHolder #pageContent .sitemap li ul li a:hover, #pageHolder #pageContent .monthTitle, #pageContent .pagination a.previous, #pageContent .pagination a.next, #sectorLandingChoose .sectionTitle, #sectorLandingChoose .pageList .page span.more, body.course-search #sectorLandingChoose .extraTitle.h2 { color: #236192 } @media (max-width: 1023px) { body.page #socials a { color: #236192 } } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a:hover svg path { fill: #236192 !important } #infoAdverts .owl-nav button:hover, #latestNews .newsHolder .blogInfo, #latestNews .newsHolder .owl-nav button:hover, #latestNews a.viewAll, #explore .holder .explore a:hover, #explore .holder .carousel .owl-nav button:hover, #socials a:hover, #socials .social.green a:hover, footer#siteFooter .fLeft .socials a:hover, #pageHolder .breadcrumb a, #pageHolder #pageContent .sitemap li ul li a, #pageHolder #pageContent ul.newsList li a .itemInfo, #relatedCourses .owl-nav button:hover, #sectorLandingChoose .courseCategoryList .course .intro, #sectorLandingChoose .newsList .news a { color: #000 } #slider ul.slick-dots li button, #infoAdverts .owl-dots button, #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a, #events .owl-dots button, #explore .holder .carousel .owl-dots button, #sectionMenu .menuOpeners .dropdown .menuItems ul li, #mainMenu .menuHolder .menuLeft #accordion .accordion-title, #mainMenu .menuHolder .menuRight .explore, #pageHolder aside#sidebar #explore.page .explore, #relatedCourses .courseList .course a, #courseDetails .content #mobileSidebar #explore.page .explore { border-color: #fff } body.school-leavers #sectorLandingChoose .subjectList .subject a, body.school-leavers #sectorLandingChoose .levelList .level a, body.school-leavers #sectorLandingChoose .courseCategoryList .course a, #sectorLandingChoose .courseCategoryList .course.school-leavers a { border-color: #0072ce } body.apprenticeships #sectorLandingChoose .subjectList .subject a, body.apprenticeships #sectorLandingChoose .levelList .level a, body.apprenticeships #sectorLandingChoose .courseCategoryList .course a, #sectorLandingChoose .courseCategoryList .course.apprenticeships a { border-color: #78be20 } body.adult #sectorLandingChoose .subjectList .subject a, body.adult #sectorLandingChoose .levelList .level a, body.adult #sectorLandingChoose .courseCategoryList .course a, #sectorLandingChoose .courseCategoryList .course.adult a { border-color: #9b26b6 } body.degree #sectorLandingChoose .subjectList .subject a, body.degree #sectorLandingChoose .levelList .level a, body.degree #sectorLandingChoose .courseCategoryList .course a, #sectorLandingChoose .courseCategoryList .course.degree a { border-color: #bc204b } #sectorLandingWelcome .welcomeSidebar .imageCarousel .owl-dots button { border-color: #505456 } #explore .holder .explore, #sectorLandingChoose .extraTitle.h2 { border-color: #236192 } @media (max-width: 1100px) { body.page header#masthead.open { background-color: #fff } body.page .menu-toggle.open span { background-color: #236192 } body.page header#masthead.open .topBar a.topBarLink { color: #236192 } } .owl-nav button, #slider .searchSubjectsMenu .subjects .dropdown .holder .icon svg path, #socials a, footer#siteFooter .fLeft .socials a, #explore .holder .explore a, .share a, #pageHolder #pageContent .sitemap li ul li a, #pageContent .pagination a.previous, #pageContent .pagination a.next, #sectorLandingChoose .courseCategoryList .course .title, #sectorLandingChoose .courseCategoryList .course .specifics .spec, #sectorLandingChoose .courseCategoryList .course .specifics .spec span, #sectorLandingChoose .courseCategoryList .course .number, #sectorLandingChoose .courseCategoryList .course .intro { -webkit-transition: color 0.2s ease-in-out; -moz-transition: color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out; -o-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out } #latestNews .newsHolder .blogInfo span.more, #sectionMenu.page ul li a, #sectorLandingQuickLinks .ql .overlay, #sectorLandingChoose ul.tabs li.link a, #sectorLandingWelcome .welcomeSidebar .quickLink .item .overlay, #courseDetails .sidebar .button, #courseDetails .content a.additional-link, #sectorLandingChoose .courseCategoryList .course a, body.search-results .filter .filterWrapper button.filterBTN, body.course-search .filter .filterWrapper button.filterBTN { -webkit-transition: background-color, 0.3s ease-in-out; -moz-transition: background-color, 0.3s ease-in-out; -ms-transition: background-color, 0.3s ease-in-out; -o-transition: background-color, 0.3s ease-in-out; transition: background-color, 0.3s ease-in-out } #sectionMenu .menuOpeners .dropdown button.close, #slider #tickerTape button.close, #sectorLandingChoose .pathList .path .title i { -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out } a.more, span.more, header, nav#mainMenu, header .logoHolder, header .logoHolder a, header .logoHolder a img, #sectionMenu .menuOpeners .menuItem .title, #sectionMenu .menuOpeners .menuItem .title i, #mainMenu #sectionMenu.page ul li>a .title, #mainMenu #sectionMenu.page ul li>a .title i, header#masthead .topBar, #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a, #slider .searchSubjectsMenu .subjects .title i, header#masthead .topBar a.topBarLink i, #latestNews .newsHolder .newsItem figure img, #explore .holder .explore a i, #sectionMenu .menuOpeners .dropdown .introText .quickLinks .link a i, #mainMenu .menuHolder .menuRight .explore a i, #pageHolder aside#sidebar #explore.page .explore a i, #sectionMenu.page ul .sf-mega .col.s-2.common-menu a i, #pageHolder #mobileSidebar #explore.page .explore a i, #sectionMenu.page ul .sf-mega .col.s-3 .arrow-links a i, #pageHolder #pageContent ul.newsList figure img, #pageContent #monthFilter .filterGroup:after, #sectorLandingWelcome .welcomeSidebar .advert .item figure img, #sectorLandingChoose ul.tabs li span i, #sectorLandingChoose ul.tabs li.link a i, #sectorLandingChoose .subjectList .subject a, #sectorLandingQuickLinks .ql .title, #sectorLandingQuickLinks .ql .title i, #sectorLandingChoose .levelList .level a, #sectorLandingWelcome .welcomeSidebar .quickLink .item figure img, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title i, #sectorLandingChoose .pathList .path .overlay, #sectorLandingChoose .pathList .path .title, #relatedCourses .courseList .course a, #courseDetails .sidebar .button i, #courseDetails .sidebar #explore.page .explore a i, #courseDetails .content #mobileSidebar #explore.page .explore a i, #relatedCourses .courseList .course span.more, #courseDetails .content a.additional-link i, #sectorLandingChoose .courseCategoryList .course span.more, body.search-results .filter .filterGroup:after, body.course-search .filter .filterGroup:after, #sectorLandingChoose .newsList figure img { -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -ms-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease } html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box } body { margin: 0 } *, *:before, *:after { box-sizing: inherit } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block } audio, canvas, progress, video { display: inline-block; vertical-align: baseline } audio:not([controls]) { display: none; height: 0 } [hidden], template { display: none } a { background-color: transparent; text-decoration: none } a:active, a:hover { outline: 0 } abbr[title] { border-bottom: 1px dotted } b, strong { font-weight: bold } dfn { font-style: italic } small { font-size: 80% } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sup { top: -0.5em } sub { bottom: -0.25em } img { border: 0 } svg:not(:root) { overflow: hidden } figure { margin: 1em 40px } hr { box-sizing: content-box; height: 0 } pre { overflow: auto } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0 } button { overflow: visible } button, elect { text-transform: none } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer } button[disabled], html input[disabled] { cursor: default } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0 } input { line-height: normal } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0 } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto } input[type="search"] { -webkit-appearance: textfield; box-sizing: content-box } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em } legend { border: 0; padding: 0 } textarea { overflow: auto } optgroup { font-weight: bold } table { border-collapse: collapse; border-spacing: 0 } td, th { padding: 0 } #wrapper, .mm-page { width: 100%; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto; position: relative; top: 0; padding: 0 } #wrapper { overflow: hidden } .container { padding: 0 5%; position: relative } @media (min-width: 1400px) { .container, .contained { max-width: 1400px; max-width: 87.5rem; padding: 0 50px; padding: 0 3.125rem; margin: 0 auto; position: relative } } @media (min-width: 1600px) { .container.wide { max-width: 1600px; max-width: 100rem } } h2, h3, h4, h5 { margin: 5px 0 8px 0; margin: .3125rem 0 .5rem 0; padding-top: 0; line-height: 1.2 } #pageHolder aside#sidebar .courseSearch .searchElement input.searchInput, #courseDetails .sidebar .courseSearch .searchElement input.searchInput { font-size: 12px; font-size: .75rem } footer#siteFooter .fLeft .footerMenu a, footer#siteFooter .fRight .copyright { font-size: 14px; font-size: .875rem } #slider .searchSubjectsMenu .subjects .dropdown .holder .name { font-size: 15px; font-size: .9375rem } body, .mobileMenuFooter a, #pageHolder #pageContent blockquote cite, #pageHolder #pageContent .sitemap li ul li a, #pageContent #events .holder .eventInfo .eventExtra { font-size: 16px; font-size: 1rem } .searchSubjectsMenu .courseSearch .searchElement button.searchBTN, header#masthead .topBar a.topBarLink, #explore .holder .explore a, #mainMenu .menuHolder .menuRight .searchBox button.searchBTN, #mainMenu .menuHolder .menuRight .explore a, #sectionMenu.mobile .owl-nav button, .mobileMenuAdditions .innerHeader .topBar a, #pageHolder aside#sidebar .holder:after, #pageHolder aside#sidebar #explore.page .explore a, #pageHolder aside#sidebar .courseSearch .searchElement button.searchBTN, #pageHolder #mobileSidebar #explore.page .explore a, #pageHolder #pageContent .eventExtra i, #courseDetails .sidebar #explore.page .explore a, #courseDetails .sidebar .courseSearch .searchElement button.searchBTN, #courseDetails .content #mobileSidebar .courseSearch .searchElement button.searchBTN, #courseDetails .content #mobileSidebar #explore.page .explore a, body.search-results .inputSearch button.searchBTN, body.course-search .inputSearch button.searchBTN, body.search-results .filter .filterGroup:after, body.course-search .filter .filterGroup:after, body.search-results .filter .filterGroup .filterName, body.course-search .filter .filterGroup .filterName { font-size: 18px; font-size: 1.125rem } #sectionMenu .menuOpeners .menuItem .title, #infoAdverts .advert .info .excerpt, #slider .searchSubjectsMenu .subjects .title i, #events .holder .eventInfo .eventExtra, #explore .holder .explore .sectionTitle, #explore .holder .carousel .advert .info .excerpt, #sectionMenu .menuOpeners .dropdown .introText .quickLinks .link a, #sectionMenu .menuOpeners .dropdown button.close, #slider #tickerTape button.close, #mainMenu .menuHolder .menuLeft #accordion .accordion-title:after, #mainMenu .menuHolder .menuRight .explore .sectionTitle, .mobileMenuAdditions .innerHeader .socials a, .mobileMenuAdditions .innerHeader .searchBox button.searchBTN, #pageHolder #pageContent blockquote, #pageHolder aside#sidebar .sectionHeader, #pageHolder aside#sidebar #explore.page .explore .sectionTitle, #pageHolder aside#sidebar .courseSearch .panelTitle, #sectionMenu.page ul .sf-mega .col .arrow-links a, #pageHolder #mobileSidebar #explore.page .explore .sectionTitle, #pageHolder #mobileSidebar .courseSearch .panelTitle, #pageHolder #mobileSidebar .courseSearch .searchElement button, #pageContent #monthFilter .filterGroup:after, #pageContent .pagination a, #sectorLandingWelcome .welcomeSidebar .advert .item .title, #sectorLandingChoose ul.tabs li span, #sectorLandingChoose ul.tabs li.link a, #sectorLandingChoose .subjectList .subject .name, #sectorLandingQuickLinks .ql .title, #mainMenu #sectionMenu.page ul li>a, #sectorLandingChoose .levelList .level .name, #relatedCourses .courseList .course .name, #courseDetails #accordion .accordion-title:after, #courseDetails .sidebar .button, #courseDetails .sidebar .courseDetails .title, #courseDetails .sidebar #explore.page .explore .sectionTitle, #courseDetails .sidebar .courseSearch .panelTitle, #courseDetails .content #mobileSidebar #explore.page .explore .sectionTitle.mobile, #courseDetails .content #mobileSidebar .courseSearch .panelTitle, #courseDetails .content a.additional-link, #sectorLandingChoose .courseCategoryList .course .specifics { font-size: 20px; font-size: 1.25rem } .share a { font-size: 22px; font-size: 1.375rem } #sectionMenu .menuOpeners .menuItem .title i, .owl-nav button, #slider .searchSubjectsMenu .courseSearch .panelTitle, #slider .searchSubjectsMenu .subjects .title, #latestNews .newsHolder .blogInfo span.title, #socials a, footer#siteFooter .fLeft .socials a, .mobileMenuFooter .socials a, #pageHolder #pageContent h5, #pageHolder #pageContent ul.newsList .itemInfo .title, #sectorLandingChoose .number, #mainMenu #sectionMenu.page ul li>a .title i, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title i, #sectorLandingChoose .pathList .path .title, #courseDetails .content h5, #sectorLandingChoose .newsList .itemInfo .title { font-size: 24px; font-size: 1.5rem } #slider .searchSubjectsMenu .subjects .dropdown .holder .icon { font-size: 26px; font-size: 1.625rem } #pageHolder #pageContent h4, #courseDetails .content h4, #relatedCourses.noIcon .courseList .course .name, #sectorLandingChoose .courseCategoryList .course .title, #sectorLandingChoose .pageList .page .title { font-size: 30px; font-size: 1.875rem } #pageHolder #pageContent h3, #pageHolder #pageContent .sitemap li a, #sectorLandingChoose h2, #courseDetails #accordion .accordion-title, #courseDetails .content h3 { font-size: 35px; font-size: 2.1875rem } #infoAdverts .advert .info .title, #explore .holder .carousel .advert .info .title, #mainMenu .menuHolder .menuLeft #accordion .accordion-title, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title span, #pageContent #events .holder .eventInfo .eventType, #relatedCourses .courseList .course .icon { font-size: 40px; font-size: 2.5rem } #sectionMenu .menuOpeners .dropdown .introText .title, #pageHolder #pageContent h2, #pageHolder #pageContent .monthTitle, #sectorLandingChoose .sectionTitle, #sectorLandingChoose .subjectList .subject .icon, #relatedCourses .sectionTitle, #courseDetails .content .sectionTitle, #courseDetails .sidebar .sectionTitle.mobile, #courseDetails .content h2, #courseDetails .mobilePageHeading.h2, #sectorLandingChoose .courseCategoryList .course span.number i, body.course-search #sectorLandingChoose .extraTitle.h2 { font-size: 45px; font-size: 2.8125rem } #latestNews .leftInfo .sectionTitle, #events .holder .eventInfo .eventType, #pageHolder #pageContent h1, #sectorLandingChoose .levelList .level .levelNumber, #courseDetails .content h1, #relatedCourses .courseList .course .number, #courseDetails .mobilePageHeading.h1, #sectorLandingChoose .courseCategoryList .course span.number { font-size: 60px; font-size: 3.75rem } #slider .sliderText .slide .bannerText .title { font-size: 70px; font-size: 4.375rem } #pageHolder #pageContent .sitemap li ul li a, #courseDetails .content #mobileSidebar #explore.page .explore .sectionTitle.mobile { font-weight: 400 } a.more, span.more, footer#siteFooter .fLeft .footerLinks a, #mainMenu .menuHolder .menuRight .footerLinks a, .mobileMenuFooter a, #pageHolder #pageContent h4, #pageHolder #pageContent h5, #events .holder .eventExtra, body.search-results .filter .filterWrapper button.filterBTN, body.course-search .filter .filterWrapper button.filterBTN { font-weight: 600 } #sectionMenu .menuOpeners .menuItem .title span, #infoAdverts .advert .info, #latestNews .leftInfo, #slider .searchSubjectsMenu .courseSearch .panelTitle, #slider .searchSubjectsMenu .subjects .title, #slider .searchSubjectsMenu .subjects .dropdown .holder .icon, header#masthead .topBar a.topBarLink, #latestNews .newsHolder .blogInfo span.date, #events .holder .eventType, #explore .holder .explore a, #explore .holder .carousel .advert .info .title, #explore .holder .carousel .advert .info .excerpt, #sectionMenu .menuOpeners .dropdown .introText .title, #sectionMenu .menuOpeners .dropdown .introText .quickLinks .link a, #mainMenu .menuHolder .menuLeft #accordion .accordion-title, #mainMenu .menuHolder .menuRight .explore a, .mobileMenuAdditions .innerHeader .searchBox button.searchBTN i, .mobileMenuAdditions .innerHeader .topBar a, #sectionMenu.page ul li>a, #pageHolder #pageContent blockquote cite, #pageHolder #pageContent h1, #pageHolder #pageContent h2, #pageHolder #pageContent h3, #pageHolder aside#sidebar .sectionHeader, #pageHolder aside#sidebar #explore.page .explore a, #pageHolder aside#sidebar .courseSearch .panelTitle, #sectionMenu.page ul .sf-mega .col.s-2.common-menu .col a, #sectionMenu.page ul .sf-mega .col .arrow-links a, #pageHolder #mobileSidebar #explore.page .explore a, #pageHolder #mobileSidebar .courseSearch .panelTitle, .share span, #pageHolder #pageContent .articleDate, #pageHolder #pageContent .sitemap li a, #pageHolder #pageContent .monthTitle, #pageHolder #pageContent ul.newsList .itemInfo .date, #pageContent #monthFilter span.title, .pagination .pageContent, #sectorLandingWelcome .welcomeSidebar .advert .item .title, #sectorLandingChoose .sectionTitle, #sectorLandingChoose ul.tabs li span, #sectorLandingChoose ul.tabs li.link a, #sectorLandingChoose .subjectList .subject .name, #sectorLandingQuickLinks .ql .title, #sectorLandingChoose .levelList .level .levelNumber, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title span, #sectorLandingChoose .pathList .path .title span, #events .holder .eventTitle, #relatedCourses .sectionTitle, #courseDetails .content .sectionTitle, #courseDetails #accordion .accordion-title, #courseDetails .sidebar .button, #courseDetails .sidebar .courseDetails .title, #courseDetails .sidebar .courseDetails span.bold, #courseDetails .sidebar #explore.page .explore a, #courseDetails .sidebar .courseSearch .panelTitle, #courseDetails .sidebar .sectionTitle.mobile, #courseDetails .content #mobileSidebar .courseSearch .panelTitle, #courseDetails .content #mobileSidebar #explore.page .explore a, #relatedCourses .courseList .course .number, #relatedCourses .courseList .course .name, #courseDetails .content a.additional-link, #courseDetails .mobilePageHeading, #sectorLandingChoose .courseCategoryList .course .title, #sectorLandingChoose .courseCategoryList .course .specifics .spec span, #sectorLandingChoose .courseCategoryList .course span.number, body.search-results .filter .filterWrapper span.sectionName, body.course-search .filter .filterWrapper span.sectionName, #sectorLandingChoose .pageList .page .title, body.course-search #sectorLandingChoose .extraTitle.h2, #sectorLandingChoose .newsList .itemInfo .date, #pageHolder #pageContent ul.newsList .itemInfo .line span { font-weight: 700 } #slider .sliderText .slide .bannerText .title { font-weight: 800 } @media (max-width: 767px) { #pageHolder #mobileSidebar .courseSearch .searchElement input.searchInput, #courseDetails .content #mobileSidebar .courseSearch .searchElement input.searchInput { font-size: 12px; font-size: .75rem } body, #infoAdverts .advert .info .excerpt, #explore .holder .carousel .advert .info .excerpt, #slider .searchSubjectsMenu .subjects .dropdown .holder .name, #pageHolder #pageContent .sitemap li ul li a, #sectorLandingChoose .courseCategoryList .course .specifics { font-size: 14px; font-size: .875rem } #slider .searchSubjectsMenu .subjects .title, #sectionMenu .menuOpeners .menuItem .title, #sectionMenu.mobile .owl-nav button, #events .holder .eventInfo .eventExtra, footer#siteFooter, #pageHolder #pageContent blockquote, #pageHolder #pageContent h5, #sectorLandingWelcome .welcomeSidebar .advert .item .title, #sectorLandingChoose .tab-content .number, #sectorLandingChoose .subjectList .subject .name, #sectorLandingQuickLinks .ql .title, #sectorLandingChoose .number, #sectorLandingChoose .levelList .level .name, #sectorLandingChoose .pathList .path .title .center, #pageHolder #events .holder .event .eventTitle, #relatedCourses .courseList .course .name, #courseDetails .content h5, #relatedCourses.noIcon .courseList .course .name { font-size: 16px; font-size: 1rem } #slider .searchSubjectsMenu .subjects .title i, #slider .searchSubjectsMenu .courseSearch .panelTitle, #infoAdverts .owl-nav button, #events .owl-nav button, #latestNews .newsHolder .owl-nav button, #explore .holder .carousel .owl-nav button, .mobileMenuAdditions .innerHeader .searchBox button.searchBTN, #pageHolder #pageContent h4, #pageContent #monthFilter .filterGroup:after, #courseDetails #accordion .accordion-title:after, #courseDetails .content h4 { font-size: 18px; font-size: 1.125rem } #slider .sliderText .slide .bannerText .title, #infoAdverts .advert .info .title, #explore .holder .carousel .advert .info .title, footer#siteFooter .socials a, #slider .searchSubjectsMenu .subjects .dropdown .holder .icon, #pageHolder #pageContent h3, #sectorLandingQuickLinks .ql .title i, .mobileMenuFooter .socials a, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title span, #courseDetails #accordion .accordion-title, #courseDetails .content h3, #sectorLandingChoose .courseCategoryList .course .title, #sectorLandingChoose .pageList .page .title, #sectorLandingChoose .newsList .itemInfo .title { font-size: 20px; font-size: 1.25rem } #sectorLandingChoose h2 { font-size: 22px; font-size: 1.375rem } #events .holder .eventInfo .eventType, #pageHolder #pageContent h2, #pageHolder #pageContent .sitemap li a, #pageHolder #pageContent .monthTitle, #sectorLandingChoose .sectionTitle, #pageHolder #events .holder .event .eventType, #courseDetails .content .sectionTitle, #courseDetails .sidebar .sectionTitle.mobile, #courseDetails .content h2, #courseDetails .mobilePageHeading.h2, body.course-search #sectorLandingChoose .extraTitle.h2 { font-size: 25px; font-size: 1.5625rem } #pageHolder #pageContent h1, #relatedCourses .sectionTitle, #relatedCourses .courseList .course .icon, #courseDetails .content h1, #courseDetails .mobilePageHeading.h1 { font-size: 30px; font-size: 1.875rem } #sectorLandingChoose .subjectList .subject .icon { font-size: 35px; font-size: 2.1875rem } #latestNews .leftInfo .sectionTitle, #sectorLandingChoose .levelList .level .levelNumber, #sectorLandingChoose .courseCategoryList .course span.number i { font-size: 40px; font-size: 2.5rem } #relatedCourses .courseList .course .number, #sectorLandingChoose .courseCategoryList .course span.number { font-size: 46px; font-size: 2.875rem } } @media all and (min-width: 768px) and (max-width: 1023px) { #infoAdverts .advert .info .excerpt, #events .holder .eventInfo .eventExtra { font-size: 16px; font-size: 1rem } #sectorLandingChoose .pathList .path .title { font-size: 20px; font-size: 1.25rem } #infoAdverts .advert .info .title { font-size: 30px; font-size: 1.875rem } #events .holder .eventInfo .eventType { font-size: 40px; font-size: 2.5rem } } @media all and (min-width: 768px) and (max-width: 1024px) { #socials a { font-size: 22px; font-size: 1.375rem } #slider .sliderText .slide .bannerText .title { font-size: 40px; font-size: 2.5rem } } @media all and (min-width: 768px) and (max-width: 1050px) { #slider .searchSubjectsMenu .subjects .title { font-size: 18px; font-size: 1.125rem } } @media all and (min-width: 1024px) and (max-width: 1400px) { #mainMenu .menuHolder .menuLeft #accordion .accordion-title, #pageHolder #pageContent .monthTitle, #pageContent #events .holder .eventInfo .eventType { font-size: 34px; font-size: 2.125rem } #events .holder .eventInfo .eventType { font-size: 44px; font-size: 2.75rem } #pageHolder #pageContent #sectorLandingWelcome h1 { font-size: 50px; font-size: 3.125rem } } @media all and (min-width: 1200px) and (max-width: 1400px) { #courseDetails .content a.additional-link { font-size: 18px; font-size: 1.125rem } } @media all and (min-width: 1300px) and (max-width: 1550px) { #sectionMenu .menuOpeners .menuItem .title, #mainMenu #sectionMenu.page ul li>a { font-size: 17px; font-size: 1.0625rem } } @media all and (min-width: 1024px) and (max-width: 1600px) { #slider .sliderText .slide .bannerText .title { font-size: 50px; font-size: 3.125rem } } @media all and (min-width: 1100px) and (max-width: 1600px) { #sectionMenu .menuOpeners .dropdown .introText .title { font-size: 40px; font-size: 2.5rem } } @media all and (min-width: 1600px) and (max-width: 2000px) { #slider .sliderText .slide .bannerText .title { font-size: 60px; font-size: 3.75rem } } @media all and (max-height: 900px) and (min-width: 1024px) and (max-width: 1800px) { #slider .sliderText .slide .bannerText .title { font-size: 40px; font-size: 2.5rem } } @keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @-moz-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @-o-keyframes fadein { from { opacity: 0 } to { opacity: 1 } } @keyframes fade-in-move-down { 0% { opacity: 0; transform: translateY(2rem); -webkit-transform: translateY(2rem) } 100% { opacity: 1; transform: translateY(0); -webkit-transform: translateY(0) } } header#masthead { position: relative; width: 100%; height: 140px; height: 8.75rem; z-index: 9000 } header#masthead .logoHolder { position: absolute; left: 50px; left: 3.125rem; top: 20px; top: 1.25rem; z-index: 2000 } header#masthead .logoHolder a { display: block; position: relative; z-index: 5 } header#masthead .logoHolder a img { position: absolute; left: 0; top: 0; max-width: 100%; height: auto } header#masthead .logoHolder a img.scrolled, header#masthead .logoHolder a img.menuOpen { opacity: 0; z-index: -1 } header#masthead .logoHolder, header#masthead .logoHolder a { width: 240px; width: 15rem; height: 77px; height: 4.8125rem } header#masthead .topBar { float: right; margin-right: -18px; margin-top: 40px; position: relative; z-index: 20 } header#masthead .topBar a.topBarLink { float: left; position: relative; margin: 18px 10px 0 20px; padding: 5px 35px 5px 0 } header#masthead .topBar a.topBarLink i { position: absolute; right: 5px } header#masthead .topBar a.topBarLink:hover { text-decoration: underline } header#masthead .topBar a.topBarLink:hover i { right: 0 } @media (max-width: 767px) { header#masthead { height: 85px; height: 5.3125rem } header#masthead .logoHolder, header#masthead .logoHolder a { width: 160px; width: 10rem; height: 52px; height: 3.25rem } header#masthead .logoHolder { top: 15px; top: .9375rem } header#masthead .topBar { z-index: 100; margin-top: 26px } header#masthead .topBar a { margin-left: 16px; margin-left: 1rem } header#masthead .topBar a.topBarLink { display: none } } @media all and (min-width: 768px) and (max-width: 1023px) { header#masthead { height: 120px } } @media all and (min-width: 768px) and (max-width: 1024px) { header#masthead .topBar { margin-top: 50px } } @media (max-width: 1024px) { body.home header#masthead { position: absolute } } @media (min-width: 1024px) { header#masthead { position: fixed; top: 0; left: 0 } body.fixedHeader header#masthead { height: 80px; height: 5rem; -webkit-box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.38); -moz-box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.38); box-shadow: 0px 10px 10px -8px rgba(0, 0, 0, 0.38) } body.fixedHeader header#masthead .logoHolder { top: 15px; top: .9375rem } body.fixedHeader header#masthead .logoHolder, body.fixedHeader header#masthead .logoHolder a { width: 155px; width: 9.6875rem; height: 50px; height: 3.125rem } body.fixedHeader header#masthead .topBar { margin-top: 10px } body.fixedHeader.home header#masthead .logoHolder img.main { opacity: 0; z-index: -1 } body.fixedHeader.home header#masthead .logoHolder img.scrolled { z-index: 1; opacity: 1 } body.page header#masthead.open .logoHolder img.main { opacity: 0; z-index: -1 } body.page header#masthead.open .logoHolder img.menuOpen { z-index: 1; opacity: 1 } } @media (max-width: 1400px) { header#masthead .logoHolder { left: 5% } } html.menuOpen body, html.menuOpen { overflow-x: hidden } #mainMenu { position: fixed; left: 0; width: 100%; top: 0; height: calc(100vh - 155px); overflow-y: auto; z-index: 8000 } #mainMenu.overlay[aria-hidden="true"] { display: none } #mainMenu.overlay[aria-hidden="false"] { display: block } #mainMenu .menuHolder { float: left; width: 100%; padding-top: 175px } #mainMenu .menuHolder .column { width: 45.5%; float: left } #mainMenu .menuHolder .menuLeft { float: left; margin-bottom: 0px } #mainMenu .menuHolder .menuLeft #accordion { float: left; width: 100%; display: none } #mainMenu .menuHolder .menuLeft #accordion.ui-accordion { display: block } #mainMenu .menuHolder .menuLeft #accordion .accordion-title { display: block; padding: 0 80px 0 0; padding: 0 5rem 0 0; height: 120px; height: 6.5rem; line-height: 120px; line-height: 6.5rem; margin: 0; margin: 0; position: relative; outline: none; border-bottom-style: solid; border-width: 1px; float: left; width: 100% } #mainMenu .menuHolder .menuLeft #accordion .accordion-title:after { position: absolute; width: 25px; height: 25px; font-family: "Font Awesome 5 Free"; font-weight: 700; content: "\f055"; right: 15px; top: 0px } #mainMenu .menuHolder .menuLeft #accordion .accordion-title:hover { cursor: pointer } #mainMenu .menuHolder .menuLeft #accordion .accordion-title.ui-state-active:after { content: "\f056" } #mainMenu .menuHolder .menuLeft #accordion .accordion-title.noSubMenu:after { display: none } #mainMenu .menuHolder .menuLeft #accordion .accordion-title.noSubMenu:hover { cursor: default } #mainMenu .menuHolder .menuLeft #accordion div.ui-accordion-content { padding: 30px 0 10px 0; padding: 1.875rem 0 .625rem 0; float: left; width: 100% } #mainMenu .menuHolder .menuLeft #accordion div.ui-accordion-content .column { width: 50%; padding-right: 15px } #mainMenu .menuHolder .menuLeft #accordion div.ui-accordion-content .column a { display: block; padding: 5px 0; margin: 3px 0; line-height: 1.5 } #mainMenu .menuHolder .menuLeft #accordion div.ui-accordion-content .column a:hover { text-decoration: underline } #mainMenu .menuHolder .menuRight { float: right; margin-top: 25px } #mainMenu .menuHolder .menuRight .searchBox { float: left; width: 100%; height: 60px; height: 3.75rem; position: relative; top: 5px; top: .3125rem; right: 3px; right: .1875rem; left: 0; z-index: 10 } #mainMenu .menuHolder .menuRight .searchBox input.searchInput { position: absolute; top: 0; left: 0; left: 0; width: 80%; width: calc(100% - 100px); height: 48px; height: 3rem; padding: 5px 15px 3px 18px; padding: .3125rem .9375rem .1875rem 1.125rem; box-sizing: content-box; border: none; color: #000; -webkit-appearance: none; outline: none; z-index: 10; background: none } #mainMenu .menuHolder .menuRight .searchBox input.searchInput::-webkit-input-placeholder { color: #000; opacity: 1 } #mainMenu .menuHolder .menuRight .searchBox input.searchInput:moz-placeholder { color: #000; opacity: 1 } #mainMenu .menuHolder .menuRight .searchBox input.searchInput::-moz-placeholder { color: #000; opacity: 1 } #mainMenu .menuHolder .menuRight .searchBox input.searchInput:-ms-input-placeholder { color: #000; opacity: 1 } #mainMenu .menuHolder .menuRight .searchBox button.searchBTN { position: absolute; right: 0; right: 0; top: 0; top: 0; width: 60px; width: 3.75rem; height: 60px; height: 3.75rem; border: none !important; -webkit-appearance: none; padding: 0; outline: none } #mainMenu .menuHolder .menuRight .explore { float: left; margin: 80px 0 0 -22px; width: 100%; padding-left: 22px; border-left-style: solid; border-left-width: 1px } #mainMenu .menuHolder .menuRight .explore .sectionTitle { display: block; margin-bottom: 30px } #mainMenu .menuHolder .menuRight .explore a { float: left; display: inline-block; margin: 10px 0; clear: both } #mainMenu .menuHolder .menuRight .explore a:last-child { margin-bottom: 5px } #mainMenu .menuHolder .menuRight .explore a i { margin-left: 7px } #mainMenu .menuHolder .menuRight .explore a:hover { text-decoration: underline } #mainMenu .menuHolder .menuRight .explore a:hover i { margin-left: 12px } #mainMenu .menuHolder .menuRight .footerLinks { float: left; width: 100%; margin: 30px 0 30px 0 } #mainMenu .menuHolder .menuRight .footerLinks a { margin-right: 33px; line-height: 1.8; white-space: nowrap } #mainMenu .menuHolder .menuRight .footerLinks a:hover { text-decoration: underline } body.page #mainMenu { height: calc(100vh - 155px); overflow: visible } body.page #mainMenu .container.menu { height: 100% } body.page #mainMenu .menuHolder { position: absolute; top: 175px; height: auto; bottom: 0; left: 50px; right: 50px; width: auto; padding-top: 0; overflow-y: auto } a.mobileMenuBTN { display: none; float: left; margin-top: 14px; margin-top: .875rem; margin-left: 15px; padding: 7px 0; padding: .4375rem 0; outline: none } a.mobileMenuBTN #navIcon { width: 25px; width: 1.5625rem; height: 21px; height: 1.3125rem; position: relative; cursor: pointer; float: left } a.mobileMenuBTN #navIcon span { display: block; position: absolute; height: 2px; height: .125rem; width: 100%; opacity: 1; left: 0 } a.mobileMenuBTN #navIcon span:nth-child(1) { top: 0px } a.mobileMenuBTN #navIcon span:nth-child(2) { top: 9px; top: .5625rem; opacity: 1 } a.mobileMenuBTN #navIcon span:nth-child(3) { top: 18px; top: 1.125rem } html.mm-opened a.mobileMenuBTN #navIcon span:nth-child(1) { top: 10px; transform: rotate(40deg); -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg) } html.mm-opened a.mobileMenuBTN #navIcon span:nth-child(2) { opacity: 0 } html.mm-opened a.mobileMenuBTN #navIcon span:nth-child(3) { top: 10px; transform: rotate(-40deg); -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg) } .mobileMenuAdditions { position: absolute; width: auto; top: 0; top: 0; height: 140px; height: 8.75rem; left: 40px; right: 40px; z-index: 100 } .mobileMenuAdditions .innerHeader .logoHolder { position: absolute; left: 0; left: 0; top: 20px; top: 1.25rem; width: 240px; height: 77px; z-index: 2000 } .mobileMenuAdditions .innerHeader .logoHolder a { display: block; position: relative; z-index: 5 } .mobileMenuAdditions .innerHeader .logoHolder a img { position: absolute; left: 0; top: 0; max-width: 100%; height: auto } .mobileMenuAdditions .innerHeader .logoHolder a img.scrolled { opacity: 0; z-index: -1 } .mobileMenuAdditions .innerHeader .topBar { position: absolute; right: 0; top: 77px; padding-right: 45px } .mobileMenuAdditions .innerHeader .topBar a { margin-right: 10px } .mobileMenuAdditions .innerHeader .topBar a.topBarLink i { margin-left: 9px } .mobileMenuAdditions .innerHeader .socials { position: absolute; top: 20px; height: 22px; height: 1.375rem; right: 0; width: auto } .mobileMenuAdditions .innerHeader .socials a { float: left; margin-left: 16px; margin-left: 1rem } .mobileMenuAdditions .innerHeader .searchBox { float: left; width: 100%; height: 60px; margin: 145px 0 0 0; margin: 9.0625rem 0 0 0; position: relative } .mobileMenuAdditions .innerHeader .searchBox input.searchInput { position: absolute; top: 0; left: 0; left: 0; width: 90%; width: calc(100% - 95px); height: 43px; height: 2.6875rem; padding: 8px 20px 9px 20px; padding: .5rem 1.25rem .5625rem 1.25rem; box-sizing: content-box; border: none; color: #000; -webkit-appearance: none; outline: none; background: none; z-index: 10 } .mobileMenuAdditions .innerHeader .searchBox input.searchInput::-webkit-input-placeholder { color: #000; opacity: 1 } .mobileMenuAdditions .innerHeader .searchBox input.searchInput:moz-placeholder { color: #000; opacity: 1 } .mobileMenuAdditions .innerHeader .searchBox input.searchInput::-moz-placeholder { color: #000; opacity: 1 } .mobileMenuAdditions .innerHeader .searchBox input.searchInput:-ms-input-placeholder { color: #000; opacity: 1 } .mobileMenuAdditions .innerHeader .searchBox button.searchBTN { position: absolute; right: 0px; right: 0rem; top: 0; top: 0; height: 60px; width: 60px; border: none !important; -webkit-appearance: none; padding: 0; border-radius: 0 } .mobileMenuAdditions .innerHeader a.mobMenuBTNClose { position: absolute; right: -10px; height: 40px; width: 40px; top: -12px; top: -.75rem } .mobileMenuAdditions .innerHeader a.mobMenuBTNClose:before, .mobileMenuAdditions .innerHeader a.mobMenuBTNClose:after { position: absolute; content: ""; height: 3px; height: .1875rem; width: 30px; width: 1.875rem; top: 18px; top: 1.125rem; left: 11px; left: .6875rem } .mobileMenuAdditions .innerHeader a.mobMenuBTNClose:before { transform: rotate(42deg); -webkit-transform: rotate(42deg); -ms-transform: rotate(42deg) } .mobileMenuAdditions .innerHeader a.mobMenuBTNClose:after { transform: rotate(-42deg); -webkit-transform: rotate(-42deg); -ms-transform: rotate(-42deg) } .mobileMenuAdditions .innerHeader a.mobMenuBTNClose:hover { cursor: pointer } .mobileMenuFooter { position: absolute; width: 100%; left: 0; bottom: 0px; bottom: 0rem; height: 60px; height: 3.75rem; z-index: 100; padding: 15px 40px; display: none } .mobileMenuFooter a { margin-right: 28px } @media (max-width: 767px) { .mobileMenuAdditions { left: 20px; right: 20px; height: 95px } .mobileMenuAdditions .innerHeader .topBar { top: 52px } .mobileMenuAdditions .innerHeader .topBar a.topBarLink, .mobileMenuAdditions .innerHeader .socials { display: none } .mobileMenuAdditions .innerHeader .logoHolder { width: 160px; height: 52px } .mobileMenuAdditions .innerHeader .searchBox { margin-top: 97px; height: 50px } .mobileMenuAdditions .innerHeader .searchBox input.searchInput { padding: 8px 10px 9px 10px; width: calc(100% - 80px); height: 33px } .mobileMenuAdditions .innerHeader .searchBox button.searchBTN { height: 50px; width: 50px } .mobileMenuFooter { display: block; height: auto; padding: 12px 20px } .mobileMenuFooter a { display: block; margin: 10px 0 } .mobileMenuFooter .socials { display: block } .mobileMenuFooter .socials a { float: left; margin-right: 20px } } @media (max-width: 1100px) { a.mobileMenuBTN { display: block } #mainMenu, #mainMenu.overlay[aria-hidden="true"] { display: none !important } } @media (min-width: 1100px) { body.home header#masthead.open { background-color: #236192 } } @media all and (min-width: 1024px) and (max-width: 1400px) { #mainMenu .menuHolder .menuLeft #accordion .accordion-title { line-height: 100px; height: 100px } } @media all and (max-height: 1000px) and (min-width: 1100px) and (max-width: 1800px) { #mainMenu .menuHolder { padding-top: 140px } #mainMenu .menuHolder .menuRight .explore { margin-top: 60px } #mainMenu .menuHolder .menuRight .explore a { margin: 10px 0 } #mainMenu .menuHolder .menuRight .footerLinks { margin: 30px 0 30px 0 } #mainMenu .menuHolder .menuLeft #accordion div.ui-accordion-content { padding: 20px 0 5px 0 } #mainMenu .menuHolder .menuLeft #accordion div.ui-accordion-content .column a { margin: 0 } body.page #mainMenu .menuHolder { top: 140px } } footer#siteFooter { float: left; width: 100%; padding: 40px 0 30px 0 } footer#siteFooter a:hover { text-decoration: underline } footer#siteFooter .fLeft { float: left; width: 60% } footer#siteFooter .fLeft .socials a { display: block; float: left; margin-right: 30px } footer#siteFooter .fLeft .socials, footer#siteFooter .fLeft .footerLinks, footer#siteFooter .fLeft .footerMenu { float: left; width: 100% } footer#siteFooter .fLeft .footerLinks { margin: 38px 0 30px 0 } footer#siteFooter .fLeft .footerLinks a { margin-right: 20px } footer#siteFooter .fLeft .footerMenu a { margin-right: 20px } footer#siteFooter .fRight { float: right; width: 40% } footer#siteFooter .fRight .TEC-logo { float: right } footer#siteFooter .fRight .copyright { float: right; margin-top: 40px } footer#siteFooter .fRight .copyright .copy, footer#siteFooter .fRight .copyright .siteBy { float: left } footer#siteFooter .fRight .copyright .siteBy { margin-left: 30px; margin-left: 1.875rem } @media (max-width: 767px) { footer#siteFooter { padding: 22px 0 } footer#siteFooter .fLeft .footerLinks { margin: 25px 0 14px 0 } footer#siteFooter .fLeft .footerLinks a { display: inline-block; margin: 9px 12px } footer#siteFooter .fLeft .footerMenu a { display: inline-block; margin: 9px 12px } footer#siteFooter .fRight { margin-top: 15px } footer#siteFooter .fRight .TEC-logo img { max-width: 100% } footer#siteFooter .fRight .copyright { margin-top: 24px } footer#siteFooter .fRight .copyright .copy, footer#siteFooter .fRight .copyright .siteBy { width: 100%; margin: 8px 0 } } @media all and (min-width: 768px) and (max-width: 1200px) { footer#siteFooter .fLeft .footerLinks { margin: 35px 0 25px 0 } footer#siteFooter .fLeft .footerLinks a { margin: 0 15px } footer#siteFooter .fRight { margin-top: 35px } footer#siteFooter .fRight .copyright { margin-top: 30px } footer#siteFooter .fRight .copyright .siteBy, footer#siteFooter .fRight .copyright .copy { float: none; display: inline-block; margin: 0 15px } } @media (max-width: 1200px) { footer#siteFooter .fLeft, footer#siteFooter .fRight { width: 100%; text-align: center } footer#siteFooter .fLeft .socials a { float: none; display: inline-block; margin: 0 14px } footer#siteFooter .fRight .TEC-logo { float: none; display: inline-block } footer#siteFooter .fRight .copyright { float: none; width: 100% } } a.more, span.more, a.viewAll, button.print { padding: 0 20px; padding: 0 1.25rem; line-height: 49px; line-height: 3.0625rem; display: block; float: left; white-space: nowrap } #socials { position: fixed; right: 40px; top: 50%; transform: translateY(-50%); width: 50px; width: 3.125rem; z-index: 1000 } #socials a { display: block; height: 50px; width: 50px; line-height: 50px; line-height: 3.125rem; text-align: center } #socials.mobile { position: relative; float: left; width: 100%; top: auto; transform: none; right: auto; height: 50px; height: 3.125rem; text-align: center; display: none } #socials.mobile a { display: inline-block; line-height: 60px; line-height: 3.75rem } #socials.mobile a.cloud { margin-top: 0 } #slider { position: relative; float: left; width: 100%; height: 100vh; height: calc(100vh - 155px); min-height: 450px; min-height: 28.125rem } #slider #tickerTape { position: absolute; left: 0; width: 100%; top: 140px; z-index: 200 } #slider #tickerTape .marquee { float: left; width: 100%; padding: 15px 0; overflow: hidden; font-size: 0 } #slider #tickerTape .marquee .js-marquee { font-size: 16px; margin-left: 1px } #slider #tickerTape button.close { background: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; position: absolute; right: 50px; height: 44px; width: 44px; line-height: 44px; text-align: center; top: 0 } #slider #tickerTape button.close:hover { opacity: 0.8 } #slider .container { height: 100vh; height: calc(100vh - 155px); min-height: 450px; min-height: 28.125rem } #slider .sliderImages { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; overflow: hidden } #slider .sliderImages .overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 5; background-image: url(../images/background/gradient.png); background-size: cover; background-position: top left; mix-blend-mode: multiply } #slider .sliderImages .slideImage { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; background-size: cover; background-position: center center } #slider .slick-list, #slider .slick-track { height: 100% } #slider .sliderText { position: absolute; top: 0; left: 50px; left: 3.125rem; right: 50px; right: 3.125rem; width: auto; z-index: 200; height: 100% } #slider .sliderText .slide .bannerText { bottom: 400px; width: 100%; left: 0; position: absolute; z-index: 200; transform: translateY(2rem); -webkit-transform: translateY(2rem); animation: fade-in-move-down 1s; -webkit-animation: fade-in-move-down 1s; opacity: 0; text-align: center } #slider .sliderText .slide .bannerText .title { line-height: 1.18; float: left; width: 100%; text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.28); -webkit-text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.28) } #slider .sliderText .slide .bannerText .subTitle { line-height: 1.18; float: left; width: 100%; text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.28); -webkit-text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.28) } #slider .slick-slide.slick-active .bannerText { transform: translateY(0); -webkit-transform: translateY(0); opacity: 1; transition-duration: 1s; -webkit-transition-duration: 1s } #slider ul.slick-dots { position: absolute; left: 90px; bottom: 45px; margin: 0; padding: 0; list-style-type: none } #slider ul.slick-dots li { float: left; margin-right: 10px; height: 12px } #slider ul.slick-dots li button { text-indent: -999em; height: 10px; width: 10px; border-radius: 50%; -webkit-appearance: 0; border-width: 1px; border-style: solid; padding: 0; margin: 0 } #slider .searchSubjectsMenu { position: absolute; left: 50px; right: 50px; bottom: 245px; z-index: 400 } #slider .searchSubjectsMenu .courseSearch { float: left; width: 67.6923%; height: 100px; padding: 20px } #slider .searchSubjectsMenu .courseSearch .panelTitle { float: left; line-height: 60px } #slider .searchSubjectsMenu .courseSearch .searchElement { position: relative; float: left; height: 60px; height: 3.75rem; width: 100%; margin-left: 20px; width: calc(100% - 250px); z-index: 10 } #slider .searchSubjectsMenu .courseSearch .searchElement input.searchInput { position: absolute; top: 0; left: 0; left: 0; width: 90%; width: calc(100% - 60px); height: 43px; height: 2.6875rem; padding: 8px 20px 9px 20px; padding: .5rem 1.25rem .5625rem 1.25rem; box-sizing: content-box; border: none; color: #000; -webkit-appearance: none; outline: none; background: none; z-index: 10 } #slider .searchSubjectsMenu .courseSearch .searchElement input.searchInput::-webkit-input-placeholder { color: #000; opacity: 1 } #slider .searchSubjectsMenu .courseSearch .searchElement input.searchInput:moz-placeholder { color: #000; opacity: 1 } #slider .searchSubjectsMenu .courseSearch .searchElement input.searchInput::-moz-placeholder { color: #000; opacity: 1 } #slider .searchSubjectsMenu .courseSearch .searchElement input.searchInput:-ms-input-placeholder { color: #000; opacity: 1 } #slider .searchSubjectsMenu .courseSearch .searchElement button.searchBTN { position: absolute; right: -60px; right: -3.75rem; top: 0; top: 0; height: 60px; width: 60px; border: none !important; -webkit-appearance: none; padding: 0; border-radius: 0 } #slider .searchSubjectsMenu .courseSearch .searchElement button.searchBTN:after { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 700; text-align: center; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; line-height: 60px; line-height: 3.75rem } #slider .searchSubjectsMenu .subjects { float: right; width: 32.3077% } #slider .searchSubjectsMenu .subjects .title { float: left; width: 100%; line-height: 100px; padding: 0 50px } #slider .searchSubjectsMenu .subjects .title i { position: absolute; right: 50px; top: 50%; margin-top: -7px } #slider .searchSubjectsMenu .subjects .title i.fa-times-circle { opacity: 0 } #slider .searchSubjectsMenu .subjects .title:hover { cursor: pointer } #slider .searchSubjectsMenu .subjects .title:hover i.fa-arrow-circle-right { transform: rotate(90deg); -webkit-transform: rotate(90deg) } #slider .searchSubjectsMenu .subjects .title.open i.fa-times-circle { opacity: 1 } #slider .searchSubjectsMenu .subjects .title.open i.fa-arrow-circle-right { opacity: 0 } #slider .searchSubjectsMenu .subjects .dropdown { display: none; position: absolute; right: 0; top: 100px; width: 100%; padding: 17px 0; min-height: 245px } #slider .searchSubjectsMenu .subjects .dropdown:before, #slider .searchSubjectsMenu .subjects .dropdown:after { position: absolute; top: 0; height: 100%; width: 2000px; content: "" } #slider .searchSubjectsMenu .subjects .dropdown:before { left: -2000px } #slider .searchSubjectsMenu .subjects .dropdown:after { right: -2000px } #slider .searchSubjectsMenu .subjects .dropdown .holder { width: 1792px; float: left; position: relative; left: 50%; margin-left: -896px; min-height: 209px; z-index: 3 } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat { position: relative; float: left; width: 210px; margin: 0 0 14px 16px } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a { display: block; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); border-style: solid; border-width: 1px; float: left; width: 100%; min-height: 60px; padding: 5px 7px 5px 52px } #slider .searchSubjectsMenu .subjects .dropdown .holder .icon { position: absolute; left: 10px; text-align: center; width: 36px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%) } #slider .searchSubjectsMenu .subjects .dropdown .holder .name { position: relative; float: left; min-height: 50px; line-height: 1.3; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; align-items: center; justify-content: center } #slider .searchSubjectsMenu .subjects .dropdown .holder .name .center { position: relative } @media (max-width: 550px) { #slider .searchSubjectsMenu .subjects .dropdown { padding-top: 8px } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat { width: 100%; margin-left: 0 } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat a { min-height: 30px; padding-left: 45px } #slider .searchSubjectsMenu .subjects .dropdown .holder .icon { width: 25px } #slider .searchSubjectsMenu .subjects .dropdown .holder .icon svg { width: 20px } #slider .searchSubjectsMenu .subjects .dropdown .holder .name { min-height: 30px } } @media all and (min-width: 550px) and (max-width: 767px) { #slider .searchSubjectsMenu .subjects .dropdown .holder .cat { width: 48%; margin-left: 2% } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat:nth-child(odd) { margin-left: 0 } } @media (max-width: 767px) { body.home #slider, body.home #slider .container { height: 540px; height: 32rem; min-height: 0 } #slider .sliderText { left: 6%; right: 6% } #slider #tickerTape { top: 85px } #slider #tickerTape .contained { padding: 0 70px 0 5% } #slider #tickerTape button.close { right: 5%; margin-right: -11px } #slider #tickerTape .marquee .js-marquee { font-size: 14px } #slider ul.slick-dots { left: 5%; bottom: 25px } #slider .sliderText .slide .bannerText { bottom: 225px } #slider .searchSubjectsMenu .courseSearch, #slider .searchSubjectsMenu .subjects { width: 100% } #slider .searchSubjectsMenu { bottom: 60px; left: 5%; right: 5% } #slider .searchSubjectsMenu .courseSearch { padding: 10px 15px 10px 15px; height: auto } #slider .searchSubjectsMenu .courseSearch .panelTitle { width: 100%; line-height: 1.3; text-align: center; margin-bottom: 10px } #slider .searchSubjectsMenu .courseSearch .searchElement { width: 100%; margin-left: 0; height: 36px } #slider .searchSubjectsMenu .courseSearch .searchElement input.searchInput { height: 19px; width: calc(100% - 65px); padding-left: 12px; padding-right: 12px } #slider .searchSubjectsMenu .courseSearch .searchElement button.searchBTN { height: 36px; width: 36px; line-height: 36px; right: 0 } #slider .searchSubjectsMenu .courseSearch .searchElement button.searchBTN:after { line-height: 36px } #slider .searchSubjectsMenu .subjects { position: relative } #slider .searchSubjectsMenu .subjects .title { position: relative; line-height: 50px; padding: 0 15px } #slider .searchSubjectsMenu .subjects .title i { right: 15px } #slider .searchSubjectsMenu .subjects .dropdown { top: 45px } #slider .searchSubjectsMenu .subjects .dropdown:before, #slider .searchSubjectsMenu .subjects .dropdown:after { display: none } #slider .searchSubjectsMenu .subjects .dropdown .holder { width: 100%; left: auto; margin-left: 0; padding: 0 15px } } @media all and (min-width: 768px) and (max-width: 1024px) { #slider #tickerTape .contained { padding: 0 90px 0 5% } #slider #tickerTape button.close { right: 5%; margin-right: -11px } #slider #tickerTape .marquee .js-marquee { font-size: 14px } } @media all and (min-width: 768px) and (max-width: 1050px) { html.tablet.landscape #slider .sliderText .slide .bannerText { bottom: 315px } } @media all and (min-width: 768px) and (max-width: 1050px) { #slider .searchSubjectsMenu .courseSearch, #slider .searchSubjectsMenu .subjects { width: 100% } #slider .searchSubjectsMenu .courseSearch { padding: 20px 24px } #slider .searchSubjectsMenu .courseSearch .panelTitle { width: 90px; line-height: 1.3 } #slider .searchSubjectsMenu .courseSearch .searchElement { width: calc(100% - 172px) } #slider .searchSubjectsMenu .subjects { line-height: 65px; position: relative } #slider .searchSubjectsMenu .subjects .title { position: relative; line-height: 65px; padding: 0 24px } #slider .searchSubjectsMenu .subjects .title i { right: 24px } #slider .searchSubjectsMenu .subjects .dropdown { top: 52px } #slider .searchSubjectsMenu .subjects .dropdown:before, #slider .searchSubjectsMenu .subjects .dropdown:after { display: none } #slider .searchSubjectsMenu .subjects .dropdown .holder { width: 100%; left: auto; margin-left: 0; padding: 0 34px } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat { width: 32.2580%; margin-left: 1.613% } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat:nth-child(3n+1) { margin-left: 0 } } @media all and (min-width: 768px) and (max-width: 1400px) { #slider .searchSubjectsMenu { bottom: 125px; left: 5%; right: 5% } #slider ul.slick-dots { left: 5% } } @media all and (min-width: 1024px) and (max-width: 1400px) { #slider #tickerTape .contained { padding: 0 80px 0 5% } #slider #tickerTape button.close { right: 18px } } @media all and (min-width: 1050px) and (max-width: 1400px) { #slider .sliderText .slide .bannerText { bottom: 260px } } @media all and (min-width: 1400px) and (max-width: 1600px) { #slider #tickerTape .contained { padding: 0 80px 0 50px } #slider #tickerTape button.close { right: 18px } } @media all and (min-width: 1050px) and (max-width: 1250px) { #slider .searchSubjectsMenu .subjects .dropdown .holder { width: 888px; margin-left: -444px } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat:nth-child(4n+1) { margin-left: 0 } } @media all and (min-width: 1250px) and (max-width: 1450px) { #slider .searchSubjectsMenu .subjects .dropdown .holder { width: 1114px; margin-left: -557px } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat:nth-child(5n+1) { margin-left: 0 } } @media all and (min-width: 1450px) and (max-width: 1650px) { #slider .searchSubjectsMenu .subjects .dropdown .holder { width: 1340px; margin-left: -670px } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat:nth-child(6n+1) { margin-left: 0 } } @media all and (min-width: 1650px) and (max-width: 1850px) { #slider .searchSubjectsMenu .subjects .dropdown .holder { width: 1568px; margin-left: -784px } #slider .searchSubjectsMenu .subjects .dropdown .holder .cat:nth-child(7n+1) { margin-left: 0 } } @media (min-width: 1850px) { #slider .searchSubjectsMenu .subjects .dropdown .holder .cat:nth-child(8n+1) { margin-left: 0 } } @media all and (max-height: 900px) and (min-width: 1024px) and (max-width: 1800px) { body.home #slider, body.home #slider .container { height: calc(100vh - 155px) !important; min-height: 390px } body.home #slider .sliderText .slide .bannerText { bottom: 195px } #slider .searchSubjectsMenu { bottom: 60px } #slider ul.slick-dots { bottom: 25px } } @media (max-width: 767px) { #socials { display: none } } @media all and (min-width: 768px) and (max-width: 1024px) { #socials { top: 25px } } @media (max-width: 1023px) { #socials { position: absolute; right: 5%; height: 20px; width: auto } #socials .social { float: left; margin-left: 20px } #socials a { width: auto; height: auto; line-height: 1 } body.page #socials { z-index: 9999 } } @media all and (min-width: 1025px) and (max-width: 1600px) { #socials { right: 15px } } @media all and (min-width: 1025px) and (max-width: 1700px) { #socials { top: 35%; right: 10px } } @media all and (max-height: 900px) and (min-width: 1024px) and (max-width: 1800px) { #socials { top: 330px; right: 10px } } #slider.page { min-height: 0; margin-top: 4px } #slider.page .sliderImages { left: 0; width: 100%; top: 0 } #slider.page .sliderImages .slideImage { width: 100%; background-size: cover; background-position: center } #slider.page .container { min-height: 0 } #slider.page, #slider.page .sliderImages, #slider.page .sliderImages .slide, #slider.page .sliderImages .slideImage, #slider.page .container { height: 600px; height: 37.5rem; max-height: 50vh } html.tablet.landscape #slider.page, html.tablet.landscape #slider.page .sliderImages, html.tablet.landscape #slider.page .sliderImages .slide, html.tablet.landscape #slider.page .sliderImages .slideImage, html.tablet.landscape #slider.page .container { height: 400px; height: 25rem } #pageHolder { float: left; width: 100%; position: relative } #pageHolder .breadcrumb { position: relative; width: 100%; margin: 40px 0 60px 0; margin: 2.5rem 0 3.75rem 0; line-height: 1.3 } #pageHolder .breadcrumb a { word-break: break-word; padding: 0 4px 0 0; padding: 0 .25rem 0 0; margin-right: 25px; margin-right: 1.5625rem; position: relative } #pageHolder .breadcrumb a:first-child { padding: 0 4px 0 0; padding: 0 .25rem 0 0 } #pageHolder .breadcrumb a:hover, #pageHolder .breadcrumb a.current { text-decoration: underline } #pageHolder .pageHolder { float: left; width: 100%; position: relative; padding: 0 0 120px 0; padding: 0 0 7.5rem 0 } #pageHolder aside#sidebar, #pageHolder #mobileSidebar { float: left; width: 280px; width: 17.5rem; position: relative; margin: -50px 0 0 0; padding: 0; opacity: 1 } #pageHolder aside#sidebar nav#sideMenu, #pageHolder #mobileSidebar nav#sideMenu { float: left; width: 100% } #pageHolder aside#sidebar .sectionHeader, #pageHolder #mobileSidebar .sectionHeader { display: block; float: left; position: relative; padding: 0 20px; padding: 0 1.25rem; width: 100%; height: 50px; height: 3.125rem; line-height: 50px; line-height: 3.125rem } #pageHolder aside#sidebar .sectionHeader .sectionTitle i, #pageHolder #mobileSidebar .sectionHeader .sectionTitle i { top: 0; display: none; line-height: 50px; line-height: 3.125rem; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg) } #pageHolder aside#sidebar .sectionHeader a.linkAction, #pageHolder #mobileSidebar .sectionHeader a.linkAction { display: none; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100% } #pageHolder aside#sidebar .sectionHeader.sectionMenuOpen .sectionTitle i, #pageHolder #mobileSidebar .sectionHeader.sectionMenuOpen .sectionTitle i { -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); margin: 0 0 0 0; margin: 0 0 0 0 } #pageHolder aside#sidebar ul, #pageHolder #mobileSidebar ul { margin: 0; padding: 0; list-style-type: none; float: left; width: 100%; padding: 10px 0 20px 0; padding: .625rem 0 1.25rem 0; z-index: 2000; position: relative } #pageHolder aside#sidebar ul li, #pageHolder #mobileSidebar ul li { float: left; width: 100%; position: relative } #pageHolder aside#sidebar ul li a, #pageHolder #mobileSidebar ul li a { display: block; padding: 7px 20px; padding: .4375rem 1.25rem; line-height: 1.4 } #pageHolder aside#sidebar ul li a:hover, #pageHolder aside#sidebar ul li a:focus, #pageHolder aside#sidebar ul li a.active, #pageHolder #mobileSidebar ul li a:hover, #pageHolder #mobileSidebar ul li a:focus, #pageHolder #mobileSidebar ul li a.active { text-decoration: underline } #pageHolder aside#sidebar ul li.has-sub>a, #pageHolder #mobileSidebar ul li.has-sub>a { padding: 6px 50px 6px 20px; padding: .375rem 3.125rem .375rem 1.25rem } #pageHolder aside#sidebar ul li ul, #pageHolder #mobileSidebar ul li ul { display: none; margin: 0; margin: 0; padding: 0 } #pageHolder aside#sidebar ul li ul li, #pageHolder #mobileSidebar ul li ul li { float: left; width: 100%; padding: 0; border: none } #pageHolder aside#sidebar ul li ul li a, #pageHolder #mobileSidebar ul li ul li a { padding: 2px 35px 2px 32px; padding: .125rem 2.1875rem .125rem 2rem; border: none } #pageHolder aside#sidebar ul li ul li.has-sub>a, #pageHolder #mobileSidebar ul li ul li.has-sub>a { padding: 2px 50px 2px 32px; padding: .125rem 3.125rem .125rem 2rem } #pageHolder aside#sidebar ul li ul li:before, #pageHolder #mobileSidebar ul li ul li:before { position: absolute; top: 5px; top: .3125rem; left: 20px; left: 1.25rem; content: "-" } #pageHolder aside#sidebar ul li ul li li a, #pageHolder #mobileSidebar ul li ul li li a { padding: 2px 35px 2px 45px; padding: .125rem 2.1875rem .125rem 2.8125rem } #pageHolder aside#sidebar ul li ul li li:before, #pageHolder #mobileSidebar ul li ul li li:before { left: 34px; left: 2.125rem } #pageHolder aside#sidebar ul li.has-sub ul, #pageHolder #mobileSidebar ul li.has-sub ul { display: none } #pageHolder aside#sidebar ul li.has-sub.open .holder, #pageHolder #mobileSidebar ul li.has-sub.open .holder { top: -2px; top: -.125rem } #pageHolder aside#sidebar ul li.has-sub.open .holder:after, #pageHolder #mobileSidebar ul li.has-sub.open .holder:after { content: "\f106" } #pageHolder aside#sidebar ul li.has-sub.open ul li .holder:after, #pageHolder #mobileSidebar ul li.has-sub.open ul li .holder:after { content: "\f107" } #pageHolder aside#sidebar ul li.has-sub.open ul li.has-sub.open .holder:after, #pageHolder #mobileSidebar ul li.has-sub.open ul li.has-sub.open .holder:after { content: "\f106" } #pageHolder aside#sidebar .holder, #pageHolder #mobileSidebar .holder { width: 38px; width: 2.375rem; height: 0; right: 5px; right: .3125rem; position: absolute; top: 0; top: 0; height: 100% } #pageHolder aside#sidebar .holder:after, #pageHolder #mobileSidebar .holder:after { display: block; position: absolute; text-align: center; width: 100%; height: 12px; height: .75rem; padding: 0; padding: 0; z-index: 10; content: "\f107"; font-family: 'Font Awesome 5 Free'; font-weight: 900; top: 10px; top: .625rem } #pageHolder aside#sidebar .holder:hover, #pageHolder #mobileSidebar .holder:hover { cursor: pointer } #pageHolder aside#sidebar #explore.page, #pageHolder #mobileSidebar #explore.page { padding: 22px 0 30px 0 } #pageHolder aside#sidebar #explore.page .explore, #pageHolder #mobileSidebar #explore.page .explore { float: left; margin-top: 20px; width: 90%; width: calc(100% - 44px); margin-left: 20px; padding-left: 22px; border-left-style: solid; border-left-width: 1px } #pageHolder aside#sidebar #explore.page .explore .sectionTitle, #pageHolder #mobileSidebar #explore.page .explore .sectionTitle { display: block; margin-bottom: 20px } #pageHolder aside#sidebar #explore.page .explore a, #pageHolder #mobileSidebar #explore.page .explore a { float: left; display: inline-block; margin: 18px 0; clear: both } #pageHolder aside#sidebar #explore.page .explore a:last-child, #pageHolder #mobileSidebar #explore.page .explore a:last-child { margin-bottom: 5px } #pageHolder aside#sidebar #explore.page .explore a i, #pageHolder #mobileSidebar #explore.page .explore a i { margin-left: 7px } #pageHolder aside#sidebar #explore.page .explore a:hover, #pageHolder #mobileSidebar #explore.page .explore a:hover { text-decoration: underline } #pageHolder aside#sidebar #explore.page .explore a:hover i, #pageHolder #mobileSidebar #explore.page .explore a:hover i { margin-left: 12px } #pageHolder aside#sidebar .courseSearch, #pageHolder #mobileSidebar .courseSearch { float: left; width: 100%; height: 120px; padding: 18px 20px } #pageHolder aside#sidebar .courseSearch .panelTitle, #pageHolder #mobileSidebar .courseSearch .panelTitle { float: left } #pageHolder aside#sidebar .courseSearch .searchElement, #pageHolder #mobileSidebar .courseSearch .searchElement { position: relative; float: left; height: 50px; height: 3.125rem; width: 100%; margin-top: 12px; width: calc(100% - 50px); z-index: 10 } #pageHolder aside#sidebar .courseSearch .searchElement input.searchInput, #pageHolder #mobileSidebar .courseSearch .searchElement input.searchInput { position: absolute; top: 0; left: 0; left: 0; width: 100%; width: calc(100% - 20px); height: 33px; height: 2.0625rem; padding: 8px 10px 9px 10px; padding: .5rem .625rem .5625rem .625rem; box-sizing: content-box; border: none; color: #000; -webkit-appearance: none; outline: none; background: none; z-index: 10 } #pageHolder aside#sidebar .courseSearch .searchElement input.searchInput::-webkit-input-placeholder, #pageHolder #mobileSidebar .courseSearch .searchElement input.searchInput::-webkit-input-placeholder { color: #000; opacity: 1 } #pageHolder aside#sidebar .courseSearch .searchElement input.searchInput:moz-placeholder, #pageHolder #mobileSidebar .courseSearch .searchElement input.searchInput:moz-placeholder { color: #000; opacity: 1 } #pageHolder aside#sidebar .courseSearch .searchElement input.searchInput::-moz-placeholder, #pageHolder #mobileSidebar .courseSearch .searchElement input.searchInput::-moz-placeholder { color: #000; opacity: 1 } #pageHolder aside#sidebar .courseSearch .searchElement input.searchInput:-ms-input-placeholder, #pageHolder #mobileSidebar .courseSearch .searchElement input.searchInput:-ms-input-placeholder { color: #000; opacity: 1 } #pageHolder aside#sidebar .courseSearch .searchElement button.searchBTN, #pageHolder #mobileSidebar .courseSearch .searchElement button.searchBTN { position: absolute; right: -50px; right: -3.125rem; top: 0; top: 0; height: 50px; width: 50px; border: none !important; -webkit-appearance: none; padding: 0; border-radius: 0 } #pageHolder aside#sidebar .courseSearch .searchElement button.searchBTN:after, #pageHolder #mobileSidebar .courseSearch .searchElement button.searchBTN:after { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 700; text-align: center; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; line-height: 50px; line-height: 3.125rem } #pageHolder #mobileSidebar { width: 100%; margin-top: 35px; display: none } #pageHolder #mobileSidebar #explore.page .explore { margin-top: 5px } #pageHolder #mobileSidebar #explore.page .explore .linkSet .column { width: 50% } #pageHolder #mobileSidebar #explore.page .explore a:last-child { margin-bottom: 18px } #pageHolder #pageContent { margin-left: 340px; margin-left: 21.25rem; position: relative; z-index: 2000 } #pageHolder #pageContent ul, #pageHolder #pageContent ol { line-height: 1.5; display: block; width: 100% } /* #pageHolder #pageContent ul { margin-bottom: 25px; margin-bottom: 1.5625rem; margin-left: 0; padding: 0; padding-left: 18px; padding-left: 1.125rem } #pageHolder #pageContent ul li { position: relative; list-style-position: outside } #pageHolder #pageContent ol { counter-reset: li; list-style: none; *list-style: decimal; padding: 0 0 0 24px; width: 96% } #pageHolder #pageContent ol li { position: relative; margin-bottom: 1px; margin-bottom: .0625rem } #pageHolder #pageContent ol li:before { content: counter(li) "."; counter-increment: li; position: absolute; left: -28px; left: -1.75rem; top: 0; top: 0; height: 20px; width: 20px; text-align: center } */ #pageHolder #pageContent h1 { margin-top: 0; margin-bottom: 35px; margin-bottom: 2.1875rem; position: relative; line-height: 1.2; width: 100%; display: block; text-transform: uppercase } #pageHolder #pageContent p { line-height: 1.5; margin: 0 0 25px 0; margin: 0 0 1.5625rem 0 } #pageHolder #pageContent p a { text-decoration: underline } #pageHolder #pageContent p a:hover { text-decoration: none } #pageHolder #pageContent img.alignLeft, #pageHolder #pageContent img.alignRight { margin-bottom: 25px; margin-bottom: 1.5625rem } #pageHolder #pageContent img.alignLeft { float: left; margin-right: 25px; margin-right: 1.5625rem } #pageHolder #pageContent img.alignRight { float: right; margin-left: 25px; margin-left: 1.5625rem } #pageHolder #pageContent img.centered { display: block; margin-left: auto; margin-right: auto } #pageHolder #pageContent img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline } #pageHolder #pageContent img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline } #pageHolder #pageContent .alignright { float: right } #pageHolder #pageContent .alignleft { float: left } #pageHolder #pageContent blockquote { margin: 50px 0 40px 0; margin: 3.125rem 0 2.5rem 0; padding: 40px 40px 40px 40px; padding: 2.5rem 2.5rem 2.5rem 2.5rem; line-height: 1.5 } #pageHolder #pageContent blockquote cite.author { margin-top: 8px; margin-top: .5rem; display: block; text-transform: capitalize; font-style: normal } #pageHolder #pageContent .oneThird { float: left; width: 30%; margin-left: 5% } #pageHolder #pageContent .oneHalf { float: left; width: 47.5%; margin-left: 5% } #pageHolder #pageContent .extraContent { padding: 20px 0 0 0; padding: 1.25rem 0 0 0; width: 100% } #pageHolder #pageContent .extraContent h2 { text-transform: none } #pageHolder #pageContent .oneThird:first-of-type { margin-left: 0 } #pageHolder #pageContent .oneHalf:first-of-type { margin-left: 0 } #pageHolder #pageContent.fullWidth { margin-left: 0 } #pageHolder #pageContent a.more.error_home { margin-top: 30px } body.error-404 #pageHolder #pageContent h2 { margin-bottom: 30px } @media (max-width: 767px) { #slider.page, #slider.page .sliderImages, #slider.page .sliderImages .slide, #slider.page .sliderImages .slideImage, #slider.page .container { height: 200px; height: 12.5rem; min-height: 0 } #pageHolder .pageHolder { padding: 0 0 30px 0 } #pageHolder #pageContent .breadcrumb { display: none } #pageHolder #pageContent h1 { margin: 18px 0 22px 0; margin: 1.125rem 0 1.375rem 0 } #pageHolder #pageContent blockquote { padding: 25px 20px 20px 20px; padding: 1.5625rem 1.25rem 1.25rem 1.25rem; margin: 35px 0 20px 0; margin: 2.1875rem 0 1.25rem 0 } #pageHolder #pageContent img { width: 100%; margin-left: 0 !important; margin-right: 0 !important } #pageHolder aside#sidebar .sectionHeader { padding: 0 15px; padding: 0 .9375rem } #pageHolder aside#sidebar ul { padding-top: 0 } #pageHolder aside#sidebar ul li a { padding: 6px 15px; padding: .375rem .9375rem } #pageHolder aside#sidebar ul li.has-sub>a { padding: 6px 50px 6px 15px; padding: .375rem 3.125rem .375rem .9375rem } #pageHolder aside#sidebar ul li ul li a { padding: 2px 35px 2px 30px; padding: .125rem 2.1875rem .125rem 1.875rem } #pageHolder aside#sidebar ul li ul li.has-sub>a { padding: 2px 35px 2px 30px; padding: .125rem 2.1875rem .125rem 1.875rem } #pageHolder aside#sidebar ul li ul li:before { left: 17px; left: 1.0625rem } #pageHolder aside#sidebar ul li ul li li a { padding: 2px 35px 2px 43px; padding: .125rem 2.1875rem .125rem 2.6875rem } #pageHolder aside#sidebar ul li ul li li.has-sub>a { padding: 2px 35px 2px 43px; padding: .125rem 2.1875rem .125rem 2.6875rem } #pageHolder aside#sidebar ul li ul li li:before { left: 30px; left: 1.875rem } #pageHolder #mobileSidebar #explore.page .explore .linkSet .column { width: 100% } #pageHolder #mobileSidebar { margin-top: 15px } body.error-404 #pageHolder #pageContent h2 { margin-bottom: 20px } #pageHolder #pageContent a.more.error_home { margin-top: 10px } body.error-404 #pageHolder .pageHolder { padding-bottom: 50px } } @media all and (min-width: 768px) and (max-width: 1023px) { #slider.page, #slider.page .sliderImages, #slider.page .sliderImages .slide, #slider.page .sliderImages .slideImage, #slider.page .container { height: 350px; height: 21.875rem; min-height: 0 } #pageHolder .pageHolder { padding: 0 0 50px 0 } #pageHolder .pageHolder #pageContent { padding: 0 24px } #pageHolder #mobileSidebar #explore.page .explore { margin-left: 0; border: 0 } #pageHolder #mobileSidebar #explore.page .explore a { margin: 10px 0 } #pageHolder #mobileSidebar #explore.page .explore a:last-child { margin-bottom: 10px } body.error-404 #pageHolder .pageHolder { padding-bottom: 100px } } @media (max-width: 1023px) { #pageHolder #pageContent { margin-left: 0 } #pageHolder aside#sidebar .collapse { position: relative; display: none; float: left; width: 100%; position: relative; overflow: hidden } #pageHolder aside#sidebar { margin-left: 0; margin-right: 0; width: 100%; z-index: 4000 } #pageHolder aside#sidebar #explore.page, #pageHolder aside#sidebar .courseSearch { display: none } #pageHolder aside#sidebar nav#sideMenu { position: absolute; left: 0; padding-bottom: 0 } #pageHolder aside#sidebar .sectionHeader { margin-top: 0 } #pageHolder aside#sidebar .sectionHeader a.linkAction { display: block; z-index: 2000 } #pageHolder aside#sidebar .sectionHeader a.linkAction:hover { cursor: pointer } #pageHolder aside#sidebar .sectionHeader .sectionTitle i { position: absolute; right: 20px; right: 1.25rem; display: block } #pageHolder aside#sidebar .holder { right: 10px; right: .625rem } #pageHolder .breadcrumb { margin: 30px 0 40px 0 } #pageHolder #mobileSidebar { display: block } } @media (max-width: 1249px) { #pageHolder #pageContent .oneThird { width: 100%; float: none; margin-left: 0 } } span.articleDate { margin: 0 0 30px 0; margin: 0 0 1.875rem 0; display: block } #pageContent #monthFilter { float: right; margin-top: 25px } #pageContent #monthFilter span.title { float: left; line-height: 40px; line-height: 2.5rem; margin-right: 10px; margin-right: .625rem } #pageContent #monthFilter .filterGroup { float: left; width: 200px; width: 12.5rem; height: 40px; height: 2.5rem; line-height: 40px; line-height: 2.5rem; padding: 0 32px 0 18px; padding: 0 2rem 0 1.125rem; position: relative } #pageContent #monthFilter .filterGroup:hover { cursor: pointer } #pageContent #monthFilter .filterGroup:after { content: "\f0ab"; font-family: "Font Awesome 5 Free"; font-weight: 700; position: absolute; top: 0; line-height: 40px; line-height: 2.5rem; width: 34px; width: 2.125rem; height: 40px; height: 2.5rem; right: 7px; right: .4375rem; text-align: center; transform-style: preserve-3d; transform: rotate(0); -webkit-transform: rotate(0) } #pageContent #monthFilter .filterGroup.active:after { transform: rotate(180deg); -webkit-transform: rotate(180deg) } #pageContent #monthFilter .filterItems { position: absolute; width: 100%; top: 100%; left: 0; padding: 0; padding: 0; max-height: 200px; overflow: hidden; z-index: 100; display: none; -webkit-box-shadow: 0px 8px 7px -2px rgba(0, 0, 0, 0.1); box-shadow: 0px 8px 7px -2px rgba(0, 0, 0, 0.1) } #pageContent #monthFilter .filterItems .filterItem { line-height: normal; padding: 5px 15px 5px 18px; padding: .3125rem .9375rem .3125rem 1.125rem } #pageContent #monthFilter .filterItems .filterItem:last-child { padding-bottom: 15px; padding-bottom: .9375rem } #pageContent #monthFilter .filterItems .filterItem:hover, #pageContent #monthFilter .filterItems .filterItem:focus { cursor: pointer; text-decoration: underline; z-index: 200 } #pageHolder #pageContent .monthTitle { margin: 22px 0 30px 0; margin: 1.375rem 0 1.875rem 0; display: block; float: left } .share { float: left; width: 100%; margin: 40px 0; margin: 2.5rem 0 } .share span { float: left; margin: 4px 5px 0 0; margin: .25rem .3125rem 0 0 } .share a { margin-left: 10px; margin-left: .625rem; padding: 0 3px } #pageHolder #pageContent ul.newsList { margin: 0; padding: 0; list-style-type: none; margin: 0 0 10px 0; margin: 0 0 .625rem 0; width: 100%; float: left; clear: none } #pageHolder #pageContent ul.newsList li:before { display: none } #pageHolder #pageContent ul.newsList li { float: left; width: 30.3%; margin-left: 3%; margin-bottom: 20px; margin-bottom: 1.25rem; box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.26); -webkit-box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.26) } #pageHolder #pageContent ul.newsList li a { display: block; z-index: 5 } #pageHolder #pageContent ul.newsList figure { margin: 0; height: 220px; height: 13.75rem; float: left; width: 100%; overflow: hidden; position: relative } #pageHolder #pageContent ul.newsList figure img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1) } #pageHolder #pageContent ul.newsList figure a { display: block } #pageHolder #pageContent ul.newsList a:hover figure img { transform: translate(-50%, -50%) scale(1.1); -webkit-transform: translate(-50%, -50%) scale(1.1) } #pageHolder #pageContent ul.newsList .itemInfo { float: left; width: 100%; padding: 30px 30px 120px 30px; padding: 1.875rem 1.875rem 7.5rem 1.875rem; line-height: 1.4; position: relative } #pageHolder #pageContent ul.newsList .itemInfo .title { margin: 20px 0 0 0; margin: 1.25rem 0 0 0; text-transform: uppercase } #pageHolder #pageContent ul.newsList .itemInfo .more { display: block; position: absolute; left: 30px; left: 1.875rem; bottom: 30px; bottom: 1.875rem } #pageHolder #pageContent ul.newsList li { padding: 0 !important } .pagination { width: 100%; height: 20px; height: 1.25rem; float: left; margin: 15px 0 35px 0; margin: .9375rem 0 2.1875rem 0; text-align: center; position: relative } .pagination a.previous, .pagination a.next { position: absolute } .pagination a.previous { left: 0 } .pagination a.next { right: 0 } .pagination .pageContent { float: left; width: 100% } .pagination a.next:hover, .pagination a.previous:hover, .pagination a.next:focus, .pagination a.previous:focus { cursor: pointer; text-decoration: underline } body.page.vacancies #pageHolder #pageContent ul.newsList .itemInfo .title { margin: 0px 0 20px 0 } body.page.vacancies #pageHolder #pageContent ul.newsList .itemInfo .line { margin: 3px 0 } @media (max-width: 600px) { #pageHolder #pageContent ul.newsList .itemInfo { padding: 30px 25px 110px 25px } #pageHolder #pageContent ul.newsList .itemInfo .more { left: 25px } #pageHolder #pageContent ul.newsList:first-child, #pageHolder #pageContent ul.newsList:first-of-type { margin-top: 25px } #pageHolder #pageContent ul.newsList li { width: 100%; margin-left: 0 } #pageHolder #pageContent ul.newsList li figure { height: auto } #pageHolder #pageContent ul.newsList li figure img { position: relative; top: auto; left: auto; transform: none !important } #pageContent #monthFilter { float: left; clear: left; margin-top: 0 } #pageHolder #pageContent .monthTitle { margin-top: 15px } } @media all and (min-width: 600px) and (max-width: 767px) { #pageContent #monthFilter { margin-top: 12px } } @media (max-width: 767px) { span.articleDate { margin: 0 0 20px 0 } .share { margin: 10px 0 40px 0 } .share span { display: block; width: 100%; margin-bottom: 15px } .share a { margin: 0 10px 0 0 } } @media all and (min-width: 600px) and (max-width: 1023px) { #pageHolder #pageContent ul.newsList li { width: 48%; margin-left: 0 } #pageHolder #pageContent ul.newsList li:nth-child(2), #pageHolder #pageContent ul.newsList li:nth-child(4), #pageHolder #pageContent ul.newsList li:nth-child(6), #pageHolder #pageContent ul.newsList li:nth-child(8), #pageHolder #pageContent ul.newsList li:nth-child(10) { margin-left: 4% } .pagination { margin: 25px 0 20px 0; margin: 1.5625rem 0 1.25rem 0 } } @media all and (min-width: 1024px) and (max-width: 1100px) { #pageHolder #pageContent ul.newsList figure { height: 210px; height: 13.125rem } } @media all and (min-width: 1024px) and (max-width: 1399px) { #pageHolder #pageContent ul.newsList { width: 100%; margin-left: 0 } #pageHolder #pageContent ul.newsList li { width: 48%; margin-left: 0 } #pageHolder #pageContent ul.newsList li:nth-child(2), #pageHolder #pageContent ul.newsList li:nth-child(4), #pageHolder #pageContent ul.newsList li:nth-child(6), #pageHolder #pageContent ul.newsList li:nth-child(8), #pageHolder #pageContent ul.newsList li:nth-child(10) { margin-left: 4% } body.search-results #pageHolder #pageContent .tab-content ul.newsList li { width: 31.333%; margin-left: 3% } body.search-results #pageHolder #pageContent .tab-content ul.newsList li:nth-child(3n+1) { margin-left: 0 } } @media (min-width: 1400px) { body.search-results #pageHolder #pageContent .tab-content ul.newsList li { width: 23.8461%; margin-left: 1.5385% } body.search-results #pageHolder #pageContent .tab-content ul.newsList li:nth-child(4n+1) { margin-left: 0 } #pageHolder #pageContent ul.newsList li { width: 31.333%; margin-left: 3% } #pageHolder #pageContent ul.newsList li:nth-child(3n+1) { margin-left: 0 } } body.search-results .inputSearch, body.course-search .inputSearch { float: left; width: 100%; margin: 0 0 30px 0; margin: 0 0 1.875rem 0; position: relative } body.search-results .inputSearch .search, body.course-search .inputSearch .search { width: 91%; float: left; width: calc(100% - 60px); height: 60px; height: 3.75rem; position: relative } body.search-results .inputSearch .search input.searchInput, body.course-search .inputSearch .search input.searchInput { position: absolute; top: 0; left: 25px; left: 1.5625rem; width: 80%; width: calc(100% - 40px); height: 48px; height: 3rem; padding: 5px 15px 3px 0; padding: .3125rem .9375rem .1875rem 0; box-sizing: content-box; border: none; color: #000; -webkit-appearance: none; outline: none; z-index: 10; background: none } body.search-results .inputSearch .search input.searchInput::-webkit-input-placeholder, body.course-search .inputSearch .search input.searchInput::-webkit-input-placeholder { color: #000; opacity: 1 } body.search-results .inputSearch .search input.searchInput:moz-placeholder, body.course-search .inputSearch .search input.searchInput:moz-placeholder { color: #000; opacity: 1 } body.search-results .inputSearch .search input.searchInput::-moz-placeholder, body.course-search .inputSearch .search input.searchInput::-moz-placeholder { color: #000; opacity: 1 } body.search-results .inputSearch .search input.searchInput:-ms-input-placeholder, body.course-search .inputSearch .search input.searchInput:-ms-input-placeholder { color: #000; opacity: 1 } body.search-results .inputSearch button.searchBTN, body.course-search .inputSearch button.searchBTN { position: relative; float: right; width: 60px; width: 3.75rem; height: 60px; height: 3.75rem; border: none !important; -webkit-appearance: none; padding: 0; outline: none } body.search-results .inputSearch button.searchBTN:after, body.course-search .inputSearch button.searchBTN:after { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 700; text-align: center; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; line-height: 60px; line-height: 3.75rem } body.search-results .searchQueryInfo, body.search-results .resultsSectionTitle, body.course-search .searchQueryInfo, body.course-search .resultsSectionTitle { float: left; width: 100% } body.search-results .searchQueryInfo, body.course-search .searchQueryInfo { line-height: 1.6; margin-bottom: 50px } body.search-results .searchQueryInfo a:hover, body.course-search .searchQueryInfo a:hover { cursor: pointer } body.search-results .resultsSectionTitle, body.course-search .resultsSectionTitle { margin: 40px 0 0 0; margin: 2.5rem 0 0 0 } body.search-results .filter, body.course-search .filter { float: left; width: 100%; margin-top: 40px; margin-top: 2.5rem } body.search-results .filter .filterWrapper, body.course-search .filter .filterWrapper { float: left; position: relative; width: 95%; width: calc(100% - 86px) } body.search-results .filter .filterWrapper span.sectionName, body.course-search .filter .filterWrapper span.sectionName { float: left; left: 0px; left: 0rem; display: block; width: 60px; width: 3.75rem; line-height: 45px; line-height: 2.8125rem } body.search-results .filter .filterWrapper button.filterBTN, body.course-search .filter .filterWrapper button.filterBTN { border: none; position: absolute; right: -84px; top: 0; height: 45px; -webkit-appearance: none; padding: 0; text-align: center; margin: 0; width: 74px } body.search-results .filter .filterGroup, body.course-search .filter .filterGroup { width: 30.4%; margin-left: 0.9230%; height: 45px; height: 2.8125rem; line-height: 45px; line-height: 2.8125rem; padding: 0 35px 0 22px; padding: 0 2.1875rem 0 1.375rem; position: relative; float: left } body.search-results .filter .filterGroup:after, body.course-search .filter .filterGroup:after { content: "\f0aa"; font-family: "Font Awesome 5 Free"; font-weight: 700; position: absolute; top: 0; line-height: 45px; line-height: 2.8125rem; width: 34px; width: 2.125rem; height: 45px; height: 2.8125rem; right: 5px; right: .3125rem; text-align: center; transform-style: preserve-3d; transform: rotate(180deg); -webkit-transform: rotate(180deg) } body.search-results .filter .filterGroup.open:after, body.course-search .filter .filterGroup.open:after { transform: rotate(0deg); -webkit-transform: rotate(0deg) } body.search-results .filter .filterGroup:hover, body.course-search .filter .filterGroup:hover { cursor: pointer } body.search-results .filter .filterItems, body.course-search .filter .filterItems { position: absolute; width: 100%; top: 100%; left: 0; max-height: 200px; overflow: hidden; display: none; z-index: 100; -webkit-box-shadow: 0px 8px 7px -2px rgba(0, 0, 0, 0.1); box-shadow: 0px 8px 7px -2px rgba(0, 0, 0, 0.1) } body.search-results .filter .filterItems .filterItem, body.course-search .filter .filterItems .filterItem { line-height: normal; padding: 4px 22px; padding: .25rem 1.375rem } body.search-results .filter .filterItems .filterItem:last-child, body.course-search .filter .filterItems .filterItem:last-child { padding: 4px 22px 15px 22px; padding: .25rem 1.375rem .9375rem 1.375rem } body.search-results .filter .filterItems .filterItem:hover, body.search-results .filter .filterItems .filterItem:focus, body.course-search .filter .filterItems .filterItem:hover, body.course-search .filter .filterItems .filterItem:focus { cursor: pointer; text-decoration: underline; z-index: 200 } @media (max-width: 767px) { body.search-results .inputSearch, body.course-search .inputSearch { margin-bottom: 18px } body.search-results .inputSearch .search, body.course-search .inputSearch .search { height: 50px } body.search-results .inputSearch .search input.searchInput, body.course-search .inputSearch .search input.searchInput { height: 38px; left: 15px; width: calc(100% - 25px) } body.search-results .inputSearch button.searchBTN, body.course-search .inputSearch button.searchBTN { height: 50px; width: 50px } body.search-results .inputSearch button.searchBTN:after, body.course-search .inputSearch button.searchBTN:after { line-height: 50px } body.search-results .searchQueryInfo, body.course-search .searchQueryInfo { margin-bottom: 25px } body.search-results .filter, body.course-search .filter { margin-top: 10px } body.search-results .filter .filterWrapper, body.course-search .filter .filterWrapper { width: 100% } body.search-results .filter .filterWrapper button.filterBTN, body.course-search .filter .filterWrapper button.filterBTN { position: relative; float: right; right: auto; top: auto } body.search-results .filter .filterGroup, body.course-search .filter .filterGroup { width: 100%; margin-bottom: 10px; margin-left: 0 } } @media all and (min-width: 768px) and (max-width: 1023px) { body.course-search #sectorLandingChoose .courseCategoryList { padding: 0; margin-top: 30px } body.search-results .filter .filterWrapper span.sectionName, body.search-results .filter .filterWrapper span.sectionName { position: absolute } body.search-results .filter .filterWrapper, body.course-search .filter .filterWrapper { width: 100%; height: 103px } body.search-results .filter .filterWrapper button.filterBTN, body.course-search .filter .filterWrapper button.filterBTN { bottom: 0; top: auto; right: 0 } body.search-results .filter .filterGroup, body.course-search .filter .filterGroup { float: none; position: absolute } body.search-results .filter .filterGroup.sector, body.search-results .filter .filterGroup.subjects, body.course-search .filter .filterGroup.sector, body.course-search .filter .filterGroup.subjects { width: 44.25%; top: 0 } body.search-results .filter .filterGroup.sector, body.course-search .filter .filterGroup.sector { left: 58px } body.search-results .filter .filterGroup.subjects, body.course-search .filter .filterGroup.subjects { right: 0 } body.search-results .filter .filterGroup.duration, body.search-results .filter .filterGroup.location, body.course-search .filter .filterGroup.duration, body.course-search .filter .filterGroup.location { bottom: 0 } body.search-results .filter .filterGroup.location, body.course-search .filter .filterGroup.location { left: 0; width: 44.25%; margin-left: 0 } body.search-results .filter .filterGroup.duration, body.course-search .filter .filterGroup.duration { right: 84px; width: 41.225% } } @media all and (min-width: 1024px) and (max-width: 1400px) { body.search-results .filter .filterGroup, body.course-search .filter .filterGroup { width: 22.2842% } } body.page.sitemap #pageHolder { padding-bottom: 170px; padding-bottom: 10.625rem } #pageHolder #pageContent .sitemap ul { list-style-type: none; margin: 0; padding: 0; list-style-type: none; padding-left: 0 } #pageHolder #pageContent .sitemap li { list-style-position: inside; margin: 0; padding: 0; list-style-type: none; float: left; width: 100%; padding: 5px 0 !important; padding: .3125rem 0 !important } #pageHolder #pageContent .sitemap li a { line-height: 1.2; text-decoration: none; position: relative } #pageHolder #pageContent .sitemap li a:hover { text-decoration: underline } #pageHolder #pageContent .sitemap li:before { display: none } #pageHolder #pageContent .sitemap li ul { margin: 15px 0 10px 0 !important; margin: .9375rem 0 .625rem 0 !important } #pageHolder #pageContent .sitemap li ul li { padding: 2px 0 !important; padding: .125rem 0 !important } #pageHolder #pageContent .sitemap li ul ul { margin: 5px 0 20px 0 !important; margin: .3125rem 0 1.25rem 0 !important } #pageHolder #pageContent .sitemap li ul ul li { padding: 0 0 0 19px !important; padding: 0 0 0 1.1875rem !important; position: relative } #pageHolder #pageContent .sitemap li ul ul li:before { padding: 0 4px; padding: 0 .25rem; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -ms-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; display: block; height: 1px !important; height: .0625rem !important; left: 0 !important; width: 3px !important; width: .1875rem !important; border-radius: 0 !important; top: 12px !important; top: .75rem !important; position: absolute; content: "" } #pageHolder #pageContent .sitemap li ul ul li a { text-transform: inherit } @media (max-width: 767px) { body.page.sitemap #pageHolder { padding-bottom: 50px; padding-bottom: 3.125rem } } @media all and (min-width: 768px) and (max-width: 1023px) { body.page.sitemap #pageHolder { padding-bottom: 100px; padding-bottom: 6.25rem } } @media (max-width: 1023px) { nav.sitemap .column.span_5_of_10 { width: 100%; margin-left: 0 } } .column { float: left; display: block } .column.span_1_of_3 { width: 30%; margin-left: 3.333% } .column.span_1_of_3.first { margin-left: 0 } .column.span_5_of_10 { width: 48.6353%; margin-left: 2.7294% } .column.span_5_of_10:first-child { margin-left: 0 } #sectionMenu { height: 150px; margin-top: 5px; float: left; width: 100%; position: relative } #sectionMenu.mobile { display: none } #sectionMenu.mobile .owl-nav { z-index: 1 } #sectionMenu.mobile.owl-carousel .owl-stage-outer { z-index: 5 } #sectionMenu .menuOpeners { float: left; height: 150px } #sectionMenu .menuOpeners:hover { cursor: pointer } #sectionMenu .menuOpeners:first-child { margin-left: 0 !important } #sectionMenu .menuOpeners .menuItem { width: 100%; height: 150px; text-align: center; position: relative } #sectionMenu .menuOpeners .menuItem .title { width: 100%; position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); -webkit-transform: translateY(-50%); margin-top: 13px } #sectionMenu .menuOpeners .menuItem .title span { display: block; line-height: 1.3; padding: 0 20px } #sectionMenu .menuOpeners .menuItem .title i { opacity: 0 } #sectionMenu .menuOpeners .menuItem:hover .title { margin-top: 0 } #sectionMenu .menuOpeners .menuItem:hover .title i { opacity: 1; margin-top: 10px } #sectionMenu .menuOpeners .menuItem .background, #sectionMenu .menuOpeners .menuItem .overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100% } #sectionMenu .menuOpeners .menuItem .background { z-index: 1 } #sectionMenu .menuOpeners .menuItem .background img { width: 100%; height: 100%; object-fit: cover } #sectionMenu .menuOpeners .menuItem .overlay { opacity: 0.95; z-index: 2 } #sectionMenu .menuOpeners .dropdown { display: none; position: absolute; bottom: 155px; left: 0; width: 100%; min-height: 300px; padding: 0 230px 40px 90px; z-index: 9999 } #sectionMenu .menuOpeners .dropdown .introText { float: left; width: 31.3541%; position: relative; padding-top: 130px; margin-top: -70px } #sectionMenu .menuOpeners .dropdown .introText .title { position: absolute; top: 0; left: 0; line-height: 120px } #sectionMenu .menuOpeners .dropdown .introText .title:before { width: 100px; content: ""; position: absolute; top: 0; height: 100%; left: -99px } #sectionMenu .menuOpeners .dropdown .introText .intro { float: left; width: 100%; line-height: 1.7; padding-right: 90px } #sectionMenu .menuOpeners .dropdown .introText .quickLinks { float: left; width: 100%; margin-top: 30px } #sectionMenu .menuOpeners .dropdown .introText .quickLinks .link { float: left; width: 100%; margin: 12px 0 } #sectionMenu .menuOpeners .dropdown .introText .quickLinks .link a { display: block; line-height: 1.4 } #sectionMenu .menuOpeners .dropdown .introText .quickLinks .link a i { margin-left: 10px } #sectionMenu .menuOpeners .dropdown .introText .quickLinks .link a:hover { text-decoration: underline } #sectionMenu .menuOpeners .dropdown .introText .quickLinks .link a:hover i { margin-left: 20px } #sectionMenu .menuOpeners .dropdown .menuItems { float: left; width: 68.6459%; padding-top: 46px } #sectionMenu .menuOpeners .dropdown .menuItems .column { width: 33.333% } #sectionMenu .menuOpeners .dropdown .menuItems ul { margin: 0; padding: 0; list-style-type: none; padding-right: 50px } #sectionMenu .menuOpeners .dropdown .menuItems ul li { float: left; width: 100%; margin: 0px 0 8px 0; border-top-style: solid; border-top-width: 1px } #sectionMenu .menuOpeners .dropdown .menuItems ul li:first-child { border-top: none } #sectionMenu .menuOpeners .dropdown .menuItems ul li a { display: block; line-height: 1.5; padding: 12px 0 8px 0 } #sectionMenu .menuOpeners .dropdown .menuItems ul li a:hover { text-decoration: underline } #sectionMenu .menuOpeners .dropdown button.close { background: none; -webkit-appearance: none; border: 0; padding: 0; margin: 0; position: absolute; right: 90px; top: 62px } #sectionMenu .menuOpeners .dropdown button.close:hover { opacity: 0.8 } #sectionMenu.items-6 .menuOpeners, #sectionMenu.items-6 li { width: 14.0625% } #sectionMenu.items-7 .menuOpeners, #sectionMenu.items-7 li { width: 14.0625%; margin-left: 0.26041% } #sectionMenu.page { position: relative; float: left; width: 100%; margin-top: 140px; height: 50px } #sectionMenu.page ul { margin: 0; padding: 0; list-style-type: none } #sectionMenu.page ul li { float: left; background-image: url(/template/images/temp/sector-menu-bg.webp); background-position: center; background-size: cover; background-repeat: no-repeat } #sectionMenu.page ul li:first-child, #sectionMenu.page ul li.school-leavers { margin-left: 0 } #sectionMenu.page ul li>a { display: block; float: left; width: 100%; height: 50px; text-align: center; position: relative; outline: none } #sectionMenu.page ul li>a span { display: block; width: 100%; position: absolute; top: 50%; z-index: 5; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); line-height: 1.3; padding: 0 10px } #sectionMenu.page ul .sf-mega { position: absolute; left: 0; width: 100%; top: 50px; top: 3.125rem; z-index: 3001; display: none; text-align: left; overflow: hidden; padding-top: 5px } #sectionMenu.page ul .sf-mega:after { height: 5px; width: 100%; left: 0; top: 0; content: ""; position: absolute } #sectionMenu.page ul .sf-mega:before { position: absolute; left: 0; top: 0; height: 100%; content: ""; width: 74% } #sectionMenu.page ul .sf-mega .col { float: left; position: relative; z-index: 2 } #sectionMenu.page ul .sf-mega .col .columnTitle { float: left; width: 100%; margin-bottom: 25px; margin-bottom: 1.5625rem; text-align: left; position: relative; z-index: 5 } #sectionMenu.page ul .sf-mega .col.s-1 { width: 100%; padding: 30px 90px; padding: 1.875rem 5.625rem } #sectionMenu.page ul .sf-mega .col.s-1 .s-1 { width: 20%; float: left; padding: 0 50px 0 0; padding: 0 3.125rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-2 { width: 26%; padding: 30px 70px 30px 90px; padding: 1.875rem 4.375rem 1.875rem 5.625rem } #sectionMenu.page ul .sf-mega .col.s-2 .s-1 { width: 50%; float: left; padding: 0 20px 0 0; padding: 0 1.25rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-2.common-menu { padding: 55px 65px 55px 85px } #sectionMenu.page ul .sf-mega .col.s-2.common-menu a i { margin-left: 7px } #sectionMenu.page ul .sf-mega .col.s-2.common-menu a:hover i { margin-left: 12px } #sectionMenu.page ul .sf-mega .col.s-3 { width: 74%; padding: 20px 85px 35px 85px; padding: 1.25rem 5.3125rem 2.1875rem 5.3125rem } #sectionMenu.page ul .sf-mega .col.s-3 .s-1 { width: 25%; float: left; padding: 0 50px 0 0; padding: 0 3.125rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-3 .s-2 { width: 33.333%; float: left; padding: 0 50px 0 0; padding: 0 3.125rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-3 .s-3 { width: 50%; float: left; padding: 0 50px 0 0; padding: 0 3.125rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-3 .arrow-links a { border: none; margin: 10px 0 } #sectionMenu.page ul .sf-mega .col.s-3 .arrow-links a i { margin-left: 7px } #sectionMenu.page ul .sf-mega .col.s-3 .arrow-links a:hover i { margin-left: 12px } #sectionMenu.page ul .sf-mega .col.s-3 a { border-top-style: solid; border-top-width: 1px; padding: 16px 0 5px 0 } #sectionMenu.page ul .sf-mega .col.s-3 a:first-child { border: none } #sectionMenu.page ul .sf-mega .col a { text-align: left; line-height: 1.2; padding: 5px 0; padding: .3125rem 0; margin: 14px 0; margin: .875rem 0; opacity: 1; display: block } #sectionMenu.page ul .sf-mega .col a:hover, #sectionMenu.page ul .sf-mega .col a:focus { text-decoration: underline } #sectionMenu.page ul .sf-mega a:before, #sectionMenu.page ul .sf-mega a:after { display: none } #sectionMenu.mobile.pageMobile, #sectionMenu.mobile.pageMobile .menuOpeners, #sectionMenu.mobile.pageMobile .menuOpeners .menuItem, #sectionMenu.mobile.pageMobile .owl-nav, #sectionMenu.mobile.pageMobile .owl-nav button { height: 50px } #sectionMenu.mobile.pageMobile { margin-top: 0 } #sectionMenu.mobile.pageMobile .owl-nav button:before { line-height: 50px } #mainMenu #sectionMenu.page { height: 155px; position: absolute; bottom: -155px; margin-top: 0; background-color: white } #mainMenu #sectionMenu.page ul { margin-top: 5px } #mainMenu #sectionMenu.page ul li>a { height: 150px } #mainMenu #sectionMenu.page ul li>a .title { width: 100%; position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); -webkit-transform: translateY(-50%); margin-top: 13px } #mainMenu #sectionMenu.page ul li>a .title span { display: block; line-height: 1.3; padding: 0 20px } #mainMenu #sectionMenu.page ul li>a .title i { opacity: 0 } #mainMenu #sectionMenu.page ul li>a:hover .title { margin-top: 0 } #mainMenu #sectionMenu.page ul li>a:hover .title i { opacity: 1; margin-top: 10px } #mainMenu #sectionMenu.page ul li>a .title span { position: relative; top: auto; transform: none; -webkit-transform: none } @media (max-width: 767px) { #sectionMenu .menuOpeners, #sectionMenu .menuOpeners .menuItem { height: 80px } #sectionMenu.mobile .menuOpeners .menuItem .title i { display: none !important } #sectionMenu.mobile { height: 80px; padding: 0 40px; padding: 0 2.5rem } #sectionMenu.mobile .owl-nav { height: 80px; height: 5rem } #sectionMenu.mobile .owl-nav button { height: 80px; height: 5rem; width: 35px; width: 2.1875rem } #sectionMenu.mobile .owl-nav button:before { line-height: 80px; line-height: 5rem } #sectionMenu.page { position: relative; float: left; width: 100%; margin-top: 140px; height: 50px } #sectionMenu.page ul { margin: 0; padding: 0; list-style-type: none } #sectionMenu.page ul li { float: left; background-image: url(/template/images/temp/sector-menu-bg.webp); background-position: center; background-size: 100% auto; background-repeat: no-repeat } #sectionMenu.page ul li:first-child, #sectionMenu.page ul li.school-leavers { margin-left: 0 } #sectionMenu.page ul li>a { display: block; float: left; width: 100%; height: 50px; text-align: center; position: relative } #sectionMenu.page ul li>a span { display: block; width: 100%; position: absolute; top: 50%; z-index: 5; left: 0; transform: translateY(-50%); -webkit-transform: translateY(-50%); line-height: 1.3; padding: 0 10px } #sectionMenu.page ul .sf-mega { position: absolute; left: 0; width: 100%; top: 50px; top: 3.125rem; z-index: 999; display: none; text-align: left; overflow: hidden; padding-top: 5px } #sectionMenu.page ul .sf-mega:after { height: 5px; width: 100%; left: 0; top: 0; content: ""; position: absolute } #sectionMenu.page ul .sf-mega:before { position: absolute; left: 0; top: 0; height: 100%; content: ""; width: 74% } #sectionMenu.page ul .sf-mega .col { float: left; position: relative; z-index: 2 } #sectionMenu.page ul .sf-mega .col .columnTitle { float: left; width: 100%; margin-bottom: 25px; margin-bottom: 1.5625rem; text-align: left; position: relative; z-index: 5 } #sectionMenu.page ul .sf-mega .col.s-1 { width: 100%; padding: 30px 90px; padding: 1.875rem 5.625rem } #sectionMenu.page ul .sf-mega .col.s-1 .s-1 { width: 20%; float: left; padding: 0 50px 0 0; padding: 0 3.125rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-2 { width: 26%; padding: 30px 90px; padding: 1.875rem 5.625rem } #sectionMenu.page ul .sf-mega .col.s-2 .s-1 { width: 50%; float: left; padding: 0 50px 0 0; padding: 0 3.125rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-2.common-menu { padding: 55px 85px } #sectionMenu.page ul .sf-mega .col.s-2.common-menu a i { margin-left: 7px } #sectionMenu.page ul .sf-mega .col.s-2.common-menu a:hover i { margin-left: 12px } #sectionMenu.page ul .sf-mega .col.s-3 { width: 74%; padding: 20px 85px 35px 85px; padding: 1.25rem 5.3125rem 2.1875rem 5.3125rem } #sectionMenu.page ul .sf-mega .col.s-3 .s-1 { width: 25%; float: left; padding: 0 50px 0 0; padding: 0 3.125rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-3 .s-2 { width: 33.333%; float: left; padding: 0 50px 0 0; padding: 0 3.125rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-3 .s-3 { width: 50%; float: left; padding: 0 50px 0 0; padding: 0 3.125rem 0 0 } #sectionMenu.page ul .sf-mega .col.s-3 .arrow-links a { border: none; margin: 10px 0 } #sectionMenu.page ul .sf-mega .col.s-3 .arrow-links a i { margin-left: 7px } #sectionMenu.page ul .sf-mega .col.s-3 .arrow-links a:hover i { margin-left: 12px } #sectionMenu.page ul .sf-mega .col.s-3 a { border-top-style: solid; border-top-width: 1px; padding: 16px 0 5px 0 } #sectionMenu.page ul .sf-mega .col.s-3 a:first-child { border: none } #sectionMenu.page ul .sf-mega .col a { text-align: left; line-height: 1.2; padding: 5px 0; padding: .3125rem 0; margin: 14px 0; margin: .875rem 0; opacity: 1; display: block } #sectionMenu.page ul .sf-mega .col a:hover, #sectionMenu.page ul .sf-mega .col a:focus { text-decoration: underline } #sectionMenu.page ul .sf-mega a:before, #sectionMenu.page ul .sf-mega a:after { display: none } #sectionMenu.mobile.pageMobile, #sectionMenu.mobile.pageMobile .menuOpeners, #sectionMenu.mobile.pageMobile .menuOpeners .menuItem, #sectionMenu.mobile.pageMobile .owl-nav, #sectionMenu.mobile.pageMobile .owl-nav button { height: 40px } #sectionMenu.mobile.pageMobile .owl-nav button:before { line-height: 40px } } @media (max-width: 1300px) { #sectionMenu { padding: 0 40px } #sectionMenu.desktop, #sectionMenu.page { display: none } #sectionMenu.mobile { display: block } #sectionMenu.mobile .menuOpeners { width: 100% } #sectionMenu.mobile .menuOpeners .menuItem .title { margin-top: 0 } #sectionMenu.mobile .menuOpeners .menuItem .title i { opacity: 1; margin-top: 10px } #sectionMenu.mobile { opacity: 0 } #sectionMenu.mobile.owl-loaded { opacity: 1 } #sectionMenu.mobile .owl-carousel .owl-stage-outer { z-index: 5 } #sectionMenu.mobile .owl-nav { display: block; position: absolute; top: 0; left: 0px; left: 0rem; right: 0px; right: 0rem; width: auto } #sectionMenu.mobile .owl-nav button { -webkit-appearance: none; outline: none; position: absolute; margin: 0; padding: 0; border: none; font-family: "Font Awesome 5 Free"; font-weight: 700; z-index: 1 } #sectionMenu.mobile .owl-nav button:before { position: absolute; top: 0; height: 100%; width: 100%; font-family: 'Font Awesome 5 Free'; font-weight: 900; text-align: center; left: 0 } #sectionMenu.mobile .owl-nav .owl-prev { left: 0; left: 0 } #sectionMenu.mobile .owl-nav .owl-prev:before { content: "\f0a8" } #sectionMenu.mobile .owl-nav .owl-next { right: 0; right: 0 } #sectionMenu.mobile .owl-nav .owl-next:before { content: "\f0a9" } } @media all and (min-width: 768px) and (max-width: 1300px) { #sectionMenu.mobile, body.page #mainMenu #sectionMenu.mobile.pageMobile { padding: 0 45px; padding: 0 2.8125rem } #sectionMenu.mobile .owl-nav, body.page #mainMenu #sectionMenu.mobile.pageMobile .owl-nav { height: 150px; height: 9.375rem } #sectionMenu.mobile .owl-nav button, body.page #mainMenu #sectionMenu.mobile.pageMobile .owl-nav button { height: 150px; height: 9.375rem; width: 40px; width: 2.5rem } #sectionMenu.mobile .owl-nav button:before, body.page #mainMenu #sectionMenu.mobile.pageMobile .owl-nav button:before { line-height: 150px; line-height: 9.375rem } body.page #mainMenu #sectionMenu.mobile.pageMobile, body.page #mainMenu #sectionMenu.mobile.pageMobile .menuOpeners, body.page #mainMenu #sectionMenu.mobile.pageMobile .menuOpeners .menuItem, body.page #mainMenu #sectionMenu.mobile.pageMobile .owl-nav, body.page #mainMenu #sectionMenu.mobile.pageMobile .owl-nav button { height: 150px; height: 9.375rem } body.page #mainMenu #sectionMenu.mobile.pageMobile { background-color: #fff } } @media all and (min-width: 1024px) and (max-width: 1300px) { #sectionMenu.mobile.pageMobile { margin-top: 140px } body.page #mainMenu #sectionMenu.mobile.pageMobile { padding-top: 5px; margin-top: 0 } #mainMenu #sectionMenu.mobile .owl-nav { top: 5px } } @media all and (min-width: 1300px) and (max-width: 1550px) { #sectionMenu .menuOpeners .menuItem .title span, #mainMenu #sectionMenu.page ul li>a .title span { padding: 0 12px } } @media all and (min-width: 1300px) and (max-width: 1600px) { #sectionMenu.page ul .sf-mega .col.s-3 { width: 100%; padding: 20px 50px 35px 50px } #sectionMenu.page ul .sf-mega .col.s-2.common-menu { display: none } #sectionMenu .menuOpeners .dropdown { padding: 0 30px 40px 50px } #sectionMenu .menuOpeners .dropdown .introText { width: 36%; width: calc(1000px - 450px) } #sectionMenu .menuOpeners .dropdown .menuItems { width: 64%; width: calc(100% - 550px); padding-top: 56px } #sectionMenu .menuOpeners .dropdown .menuItems ul { padding-right: 40px } #sectionMenu .menuOpeners .dropdown button.close { right: 30px; top: 30px } } @media all and (min-width: 1600px) and (max-width: 2100px) { #sectionMenu .menuOpeners .dropdown { padding: 0 90px 40px 70px } #sectionMenu .menuOpeners .dropdown .introText { width: 40%; width: calc(1000px - 400px) } #sectionMenu .menuOpeners .dropdown .menuItems { width: 60%; width: calc(100% - 600px) } #sectionMenu .menuOpeners .dropdown button.close { right: 55px } } @media all and (min-width: 1600px) and (max-width: 2200px) { #sectionMenu.page ul .sf-mega .col.s-3 { padding: 20px 5px 35px 50px } #sectionMenu.page ul .sf-mega .col.s-2.common-menu { padding: 45px 40px } } #infoAdverts { float: left; width: 100%; padding: 80px 0 55px 0 } #infoAdverts .holder { float: left; width: 100% } #infoAdverts .advert { float: left; width: 100%; height: 590px; position: relative } #infoAdverts .advert .overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 2; background: transparent linear-gradient(90deg, #1C1C1C 30%, rgba(116, 116, 116, 0) 100%) 0% 0% no-repeat padding-box } #infoAdverts .advert .image { z-index: 1; right: 0; left: 20%; top: 0; bottom: 0; position: absolute } #infoAdverts .advert .image img { object-fit: cover; object-position: center; width: 100%; height: 100% } #infoAdverts .advert .info { position: absolute; z-index: 5; left: 110px; width: 420px; top: 100px } #infoAdverts .advert .info .title { line-height: 1.4; margin-bottom: 30px } #infoAdverts .advert .info .excerpt { line-height: 1.5 } #infoAdverts .advert .info a.more { margin-top: 40px } #infoAdverts .owl-dots { position: absolute; left: 110px; bottom: 45px; margin: 0; padding: 0; list-style-type: none } #infoAdverts .owl-dots button { float: left; height: 10px; height: 10px; width: 10px; border-radius: 50%; -webkit-appearance: 0; border-width: 1px; border-style: solid; padding: 0; margin: 0 10px 0 0 } #infoAdverts .owl-nav { position: absolute; bottom: -25px; bottom: -1.5625rem; right: 0; right: 0; width: 70px; width: 4.375rem } #infoAdverts .owl-nav button { height: 25px; width: 25px; border: none; -webkit-appearance: none; background: none; padding: 0; outline: none; position: absolute } #infoAdverts .owl-nav button:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 25px; line-height: 1.5625rem; font-family: "Font Awesome 5 Free"; font-weight: 700 } #infoAdverts .owl-nav button.owl-prev { left: 0 } #infoAdverts .owl-nav button.owl-prev:before { content: "\f0a8" } #infoAdverts .owl-nav button.owl-next { right: 0 } #infoAdverts .owl-nav button.owl-next:before { content: "\f0a9" } @media (max-width: 767px) { #infoAdverts { padding: 18px 0 40px 0 } #infoAdverts .advert { height: 320px } #infoAdverts .advert .info { left: 0; padding: 0 20px; top: 25px; width: 100% } #infoAdverts .advert .info .title { margin-bottom: 14px; line-height: 1.5 } #infoAdverts .advert .info a.more { margin-top: 20px } #infoAdverts .owl-dots { left: 0; width: 100%; right: 0; left: auto; bottom: 20px; text-align: center } #infoAdverts .owl-dots button { float: none; margin: 0 5px; display: inline-block } #infoAdverts .owl-nav { right: auto; left: 0; bottom: -12px; width: 46px } #infoAdverts .owl-nav button { height: 20px; width: 20px } #infoAdverts .owl-nav button:before { line-height: 20px } } @media all and (min-width: 768px) and (max-width: 1023px) { #infoAdverts { padding: 20px 0 40px 0 } #infoAdverts .advert { height: 320px } #infoAdverts .advert .info { left: 45px; top: 35px } #infoAdverts .advert .info .title { margin-bottom: 20px; line-height: 1.3 } #infoAdverts .advert .info a.more { margin-top: 28px } #infoAdverts .owl-dots { right: 20px; left: auto; bottom: 20px } #infoAdverts .owl-dots button { margin: 0 0 0 10px } #infoAdverts .owl-nav { right: auto; left: 0; bottom: -20px } } @media all and (min-width: 1024px) and (max-width: 1300px) { #infoAdverts { padding: 30px 0 55px 0 } } #events { float: left; width: 100%; padding: 35px 0 95px 0 } #events .holder { float: right; width: 100%; width: calc(100% + 20px); position: relative } #events .holder .event { position: relative; float: left; width: 100%; margin-top: 20px; padding-bottom: 20px; margin-left: 20px } #events .holder .eventImage { float: left; background-size: cover; margin: -20px 0 0 -20px } #events .holder .eventInfo { float: right; position: relative; margin-left: -20px } #events .holder .eventImage, #events .holder .eventInfo { width: 50%; height: 570px } #events .holder .eventType { position: absolute; height: 140px; line-height: 140px; top: 50px; left: -110px; right: 160px; width: auto; padding-left: 32px } #events .holder .eventTitle { margin-top: 210px; padding: 0 200px 0 16%; line-height: 1.6 } #events .holder .eventExtra { padding: 0 200px 0 16%; margin-top: 35px } #events .holder .eventExtra i { width: 20px; margin-right: 9px; text-align: center } #events .holder .eventExtra span { display: block; margin: 17px 0 } #events .owl-nav { position: absolute; bottom: -25px; bottom: -1.5625rem; left: 20px; left: 1.25rem; width: 70px; width: 4.375rem } #events .owl-nav button { height: 25px; width: 25px; border: none; -webkit-appearance: none; background: none; padding: 0; outline: none; position: absolute } #events .owl-nav button:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 25px; line-height: 1.5625rem; font-family: "Font Awesome 5 Free"; font-weight: 700 } #events .owl-nav button.owl-prev { left: 0 } #events .owl-nav button.owl-prev:before { content: "\f0a8" } #events .owl-nav button.owl-next { right: 0 } #events .owl-nav button.owl-next:before { content: "\f0a9" } #events a.viewAll { position: absolute; bottom: -22px; right: 110px; z-index: 5 } #events.page { padding: 90px 0 95px 0 } #pageHolder #events { padding: 0 } #pageHolder #events .holder { width: 100%; width: calc(100% - 20px); float: left; clear: left; margin-left: 20px; margin-top: 30px } #pageHolder #events .holder .event { margin: 0 0 40px 0; padding-bottom: 0 } #pageHolder #events .holder .event .eventImage { width: 45%; height: 320px } #pageHolder #events .holder .event .eventInfo { width: 55%; height: auto; min-height: 320px; padding-bottom: 25px } #pageHolder #events .holder .event .eventType { top: 0; height: 105px; line-height: 105px; left: -60px } #pageHolder #events .holder .event .eventTitle { margin-top: 100px; padding: 0 50px 0 35px } #pageHolder #events .holder .event .eventExtra { padding: 0 50px 0 35px; margin-top: 25px } #pageHolder #events .holder a.more { position: absolute; bottom: -20px; right: 20px } #pageHolder #pageContent .eventExtra { margin-bottom: 45px } #pageHolder #pageContent .eventExtra i { width: 20px; margin-right: 9px; text-align: center } #pageHolder #pageContent .eventExtra span { display: block; margin: 17px 0 } @media (max-width: 600px) { #events .holder .event .eventImage, #pageHolder #events .holder .event .eventImage { height: 180px } #pageHolder #events { margin-top: 25px } } @media all and (min-width: 600px) and (max-width: 767px) { #events .holder .event .eventImage, #pageHolder #events .holder .event .eventImage { height: 265px } } @media (max-width: 767px) { #events { padding: 30px 0 48px 0 } #events .holder { width: 100% } #events .holder .event { margin-left: 0; margin-top: 0 } #events .holder .event .eventImage { margin: 0; width: 93%; width: calc(100% - 30px); position: relative } #events .holder .event .eventImage:after { position: absolute; content: ""; width: 7%; width: calc(25px + 25px); right: -50px; background-color: #fff; top: 0; bottom: 40px } #events .holder .event .eventInfo { width: 100%; margin-left: 0; height: auto; padding-bottom: 30px } #events .holder .eventType { left: auto; position: relative; float: left; right: auto; width: auto; margin-top: -50px; padding-right: 28px; height: 80px; line-height: 75px; top: auto; padding-left: 28px } #events .holder .eventTitle { padding: 0px 50px 0 28px; width: 100%; float: left; margin-top: 0 } #events .holder .eventExtra { float: left; width: 100%; padding: 0 40px 0 28px; margin-top: 20px } #events .owl-nav { left: auto; right: 0; bottom: auto; top: 0; width: 20px; height: 46px } #events .owl-nav button { height: 20px; width: 20px } #events .owl-nav button:before { line-height: 20px } #events .owl-nav .owl-prev { top: 0 } #events .owl-nav .owl-next { bottom: 0 } #events a.viewAll { right: 50%; transform: translateX(50%); -webkit-transform: translateX(50%) } #events.page { padding: 30px 0 } #pageHolder #pageContent .eventExtra { margin-bottom: 30px } #pageHolder #events .holder .event .eventType { margin-top: -50px; padding-right: 22px; height: 80px; line-height: 75px; padding-left: 22px } #pageHolder #events .holder .event .eventImage { width: 100% } #pageHolder #events .holder .event .eventTitle { margin-top: 10px; padding: 0 30px 0 22px } #pageHolder #events .holder .event .eventExtra { margin-bottom: 25px; padding: 0 30px 0 22px; margin-top: 15px } } @media all and (min-width: 768px) and (max-width: 900px) { #events .holder .event .eventImage { height: 320px } } @media all and (min-width: 900px) and (max-width: 1023px) { #events .holder .event .eventImage { height: 400px } } @media all and (min-width: 768px) and (max-width: 1023px) { #events { padding: 30px 0 60px 0 } #events .holder { width: 100% } #events .holder .event { margin-left: 0; margin-top: 0 } #events .holder .event .eventImage { margin: 0; width: 93%; width: calc(100% - 50px); position: relative } #events .holder .event .eventImage:after { position: absolute; content: ""; width: 7%; width: calc(25px + 25px); right: -50px; background-color: #fff; top: 0; bottom: 40px } #events .holder .event .eventInfo { width: 100%; margin-left: 0; height: auto; padding-bottom: 30px } #events .holder .eventType { left: auto; position: relative; float: left; right: auto; width: auto; margin-top: -110px; padding-right: 32px; top: auto } #events .holder .eventTitle { padding: 30px 50px 0 32px; width: 100%; float: left; margin-top: 0 } #events .holder .eventExtra { float: left; width: 100%; padding: 0 50px 0 32px; margin-top: 25px } #events .owl-nav { left: auto; right: 0; bottom: auto; top: 0; width: 25px; height: 65px } #events .owl-nav .owl-prev { top: 0 } #events .owl-nav .owl-next { bottom: 0 } #events.page { padding: 50px 0 } #pageHolder #events .holder .event .eventImage { width: calc(100% - 20px) } #pageHolder #events .holder .event .eventType { margin-top: -90px } #pageHolder #events .holder .event .eventTitle { margin-top: 20px } #pageHolder #events .holder .event .eventExtra { margin-bottom: 25px } } @media (max-width: 1023px) { #pageHolder #events .holder { width: 100%; margin-left: 0; margin-top: 0 } #pageHolder #events .holder .event .eventInfo { width: 100% } #pageHolder #events .holder .event .eventType { left: 0 } #pageHolder #events .holder .event .eventInfo { min-height: 0 } } @media all and (min-width: 1024px) and (max-width: 1400px) { #events .holder .eventTitle, #events .holder .eventExtra { padding: 0 85px 0 40px } #events .holder .eventType { right: 20px } #pageHolder #events .holder .event .eventType { height: 90px; line-height: 90px } #pageHolder #events .holder .event .eventTitle { margin-top: 90px } #pageHolder #events .holder .event .eventTitle, #pageHolder #events .holder .event .eventExtra { padding: 0 35px 0 25px } } #latestNews { float: left; width: 100%; padding: 110px 0 70px 0 } #latestNews .leftInfo { width: 200px; float: left } #latestNews .leftInfo .sectionTitle { margin-bottom: 50px } #latestNews .leftInfo .titleExtra { line-height: 1.6 } #latestNews .newsHolder { width: 75%; float: right } #latestNews .newsHolder .newsItem { float: left; width: 100%; overflow: hidden } #latestNews .newsHolder .owl-item { overflow: hidden } #latestNews .newsHolder .newsItem a { display: block } #latestNews .newsHolder .newsItem figure { margin: 0; position: relative; overflow: hidden; height: 220px; height: 13.75rem } #latestNews .newsHolder .newsItem figure img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1) } #latestNews .newsHolder .blogInfo { float: left; width: 100%; padding: 26px 25px 120px 25px; padding: 1.625rem 1.5625rem 7.5rem 1.5625rem; line-height: 1.1; position: relative; min-height: 210px; min-height: 13.125rem } #latestNews .newsHolder .blogInfo span { display: block } #latestNews .newsHolder .blogInfo span.title { line-height: 1.35; margin: 20px 0 0 0; margin: 1.25rem 0 0 0; text-transform: uppercase } #latestNews .newsHolder .blogInfo span.more { display: block; position: absolute; left: 25px; left: 1.5625rem; bottom: 30px; bottom: 1.875rem } #latestNews .newsHolder .newsItem a:hover figure img { transform: translate(-50%, -50%) scale(1.1); -webkit-transform: translate(-50%, -50%) scale(1.1) } #latestNews .newsHolder .owl-nav { position: absolute; top: -50px; top: -3.125rem; right: 0; right: 0; width: 70px; width: 4.375rem } #latestNews .newsHolder .owl-nav button { height: 25px; width: 25px; border: none; -webkit-appearance: none; background: none; padding: 0; outline: none; position: absolute } #latestNews .newsHolder .owl-nav button:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 25px; line-height: 1.5625rem; font-family: "Font Awesome 5 Free"; font-weight: 700 } #latestNews .newsHolder .owl-nav button.owl-prev { left: 0 } #latestNews .newsHolder .owl-nav button.owl-prev:before { content: "\f0a8" } #latestNews .newsHolder .owl-nav button.owl-next { right: 0 } #latestNews .newsHolder .owl-nav button.owl-next:before { content: "\f0a9" } #latestNews .holder { float: left; width: 100%; position: relative } #latestNews a.viewAll { position: absolute; bottom: 0; left: 0 } #latestNews.marginTop { margin-top: 70px } @media (max-width: 767px) { #latestNews { padding: 25px 0 90px 0 } #latestNews .leftInfo { float: left; width: 100%; text-align: center; margin-bottom: 20px } #latestNews .leftInfo .sectionTitle { margin-bottom: 20px } #latestNews .newsHolder { width: 100% } #latestNews .newsHolder .newsItem figure { height: 200px } #latestNews .newsHolder .owl-nav { width: 100%; top: auto; bottom: -28px } #latestNews a.viewAll { bottom: -67px; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%) } #latestNews.marginTop { margin-top: 10px } } @media all and (min-width: 768px) and (max-width: 1023px) { #latestNews { padding: 85px 0 60px 0 } #latestNews .leftInfo { width: 250px; padding-right: 40px } #latestNews .holder { width: calc(100% + 190px) } #latestNews .newsHolder { width: 69%; width: calc(100% - 250px) } #latestNews .newsHolder .owl-nav { right: 190px } } #explore { float: left; width: 100%; padding: 65px 0 110px 0 } #explore .holder { float: left; width: 100% } #explore .holder .carousel { float: left; width: 66.1538%; height: 450px } #explore .holder .carousel .advert { float: left; width: 100%; height: 450px; position: relative } #explore .holder .carousel .advert .overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 2; background: transparent linear-gradient(90deg, #1C1C1C 30%, rgba(116, 116, 116, 0) 100%) 0% 0% no-repeat padding-box } #explore .holder .carousel .advert .image { z-index: 1; right: 0; left: 20%; top: 0; bottom: 0; position: absolute } #explore .holder .carousel .advert .image img { object-fit: cover; object-position: center; width: 100%; height: 100% } #explore .holder .carousel .advert .info { position: absolute; z-index: 5; left: 70px; width: 420px; top: 40px } #explore .holder .carousel .advert .info .title { line-height: 1.4; margin-bottom: 30px } #explore .holder .carousel .advert .info .excerpt { line-height: 1.5 } #explore .holder .carousel .advert .info a.more { margin-top: 40px } #explore .holder .carousel .owl-dots { position: absolute; left: 70px; bottom: 45px; margin: 0; padding: 0; list-style-type: none } #explore .holder .carousel .owl-dots button { float: left; height: 10px; height: 10px; width: 10px; border-radius: 50%; -webkit-appearance: 0; border-width: 1px; border-style: solid; padding: 0; margin: 0 10px 0 0 } #explore .holder .carousel .owl-nav { position: absolute; bottom: -25px; bottom: -1.5625rem; right: 0; right: 0; width: 70px; width: 4.375rem } #explore .holder .carousel .owl-nav button { height: 25px; width: 25px; border: none; -webkit-appearance: none; background: none; padding: 0; outline: none; position: absolute } #explore .holder .carousel .owl-nav button:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 25px; line-height: 1.5625rem; font-family: "Font Awesome 5 Free"; font-weight: 700 } #explore .holder .carousel .owl-nav button.owl-prev { left: 0 } #explore .holder .carousel .owl-nav button.owl-prev:before { content: "\f0a8" } #explore .holder .carousel .owl-nav button.owl-next { right: 0 } #explore .holder .carousel .owl-nav button.owl-next:before { content: "\f0a9" } #explore .holder .explore { float: right; margin-top: 20px; width: 23.8461%; padding-left: 22px; border-left-style: solid; border-left-width: 1px } #explore .holder .explore .sectionTitle { display: block; margin-bottom: 30px } #explore .holder .explore a { float: left; display: inline-block; margin: 18px 0; clear: both } #explore .holder .explore a:last-child { margin-bottom: 5px } #explore .holder .explore a i { margin-left: 7px } #explore .holder .explore a:hover { text-decoration: underline } #explore .holder .explore a:hover i { margin-left: 12px } @media (max-width: 767px) { #explore { padding: 25px 0 30px 0 } #explore .holder .carousel { width: 100%; height: 300px } #explore .holder .carousel .advert { height: 300px } #explore .holder .carousel .advert .info { left: 0; top: 25px; width: 100%; padding: 0 20px } #explore .holder .carousel .advert .info .title { margin-bottom: 20px; line-height: 1.3 } #explore .holder .carousel .advert .info a.more { margin-top: 28px } #explore .holder .carousel .owl-nav { bottom: -20px; width: 46px } #explore .holder .carousel .owl-nav button { height: 20px; width: 20px } #explore .holder .carousel .owl-nav button:before { line-height: 20px } #explore .holder .carousel .owl-dots { left: 0; width: 100%; right: 0; left: auto; bottom: 20px; text-align: center } #explore .holder .carousel .owl-dots button { float: none; margin: 0 5px; display: inline-block } #explore .holder .explore { width: 100%; margin: 60px 0 0 0; position: relative } #explore .holder .explore .sectionTitle { margin-bottom: 20px } #explore .holder .explore .linkSet { float: left; width: calc(100% - 50px) } #explore .holder .explore .linkSet a { clear: none; width: 100%; margin: 10px 0 } #explore .holder .explore #socials.mobile { position: absolute; bottom: 0; right: 0; width: 25px; height: auto; display: block } #explore .holder .explore #socials.mobile .social { margin-left: 0 } #explore .holder .explore #socials.mobile a { line-height: 1.1; width: 25px; text-align: center } } @media all and (min-width: 768px) and (max-width: 1023px) { #explore { padding: 45px 0 30px 0 } #explore .holder .carousel { width: 100% } #explore .holder .carousel .advert .info { left: 45px; top: 35px } #explore .holder .carousel .advert .info .title { margin-bottom: 20px; line-height: 1.3 } #explore .holder .carousel .advert .info a.more { margin-top: 28px } #explore .holder .carousel .owl-dots { left: 45px } #explore .holder .explore { width: 100%; margin: 80px 0 0 0; position: relative } #explore .holder .explore .linkSet { float: left; width: calc(100% - 200px) } #explore .holder .explore .linkSet a { clear: none; width: 50% } #explore .holder .explore #socials.mobile { position: absolute; bottom: 5px; right: 0; width: 25px; height: auto; display: block } #explore .holder .explore #socials.mobile .social { margin-left: 0 } #explore .holder .explore #socials.mobile a { line-height: 1.1; width: 25px; text-align: center } } #associates { float: left; width: 100%; position: relative; padding: 40px 0; padding: 2.5rem 0 } #associates .holder { float: left; width: 100%; padding: 0 250px; padding: 0 15.625rem } #associates .holder .sectionTitle { text-align: center; margin-bottom: 50px; margin-bottom: 3.125rem } #associates #ticker { margin: 0; padding: 0; list-style-type: none; overflow: hidden } #associates #ticker .slick-slide { margin: 0 37px; margin: 0 2.3125rem } #associates #ticker div { float: left; text-align: center; height: 130px; height: 8.125rem; vertical-align: middle; line-height: 130px; line-height: 8.125rem } #associates #ticker div:before { display: none } #associates #ticker .slick-slide img { display: inline-block; max-width: 100% } @media (max-width: 767px) { #associates { padding: 10px 0 } #associates #ticker .slick-slide { margin: 0 } #associates #ticker .slick-slide img { max-width: 80% } } @media (max-width: 767px) { .column.span_1_of_3, .column.span_5_of_10 { margin-left: 0 } } .span_10_of_10 { width: 100% } .span_9_of_10 { width: 89.6% } .span_8_of_10 { width: 79.2% } .span_7_of_10 { width: 68.8% } .span_6_of_10 { width: 58.4% } .span_5_of_10 { width: 48.6353% } .span_4_of_10 { width: 37.6% } .span_3_of_10 { width: 27.2% } .span_2_of_10 { width: 16.8% } .span_1_of_10 { width: 6.4% } .align-col-left { float: left } .align-col-right { float: right } .span_1_of_3 { width: 32.3076% } .span_2_of_3 { width: 57.6923% } .span_3_of_3 { width: 100% } @media (max-width: 767px) { .column.span_5_of_10, .column.span_1_of_3 { width: 100% } } body.sector-landing #searchSection, body.course-listing #searchSection { margin-top: -160px; margin-top: -10rem } body.sector-landing #slider .searchSubjectsMenu, body.course-listing #slider .searchSubjectsMenu { bottom: 0; z-index: 3000 } body.course-search #sectorLandingChoose { padding: 0 } #pageHolder #pageContent #sectorLandingWelcome .welcomeMessage p:first-of-type { margin-top: 25px; margin-top: 1.5625rem } #sectorLandingWelcome { float: left; width: 100% } #sectorLandingWelcome .welcomeMessage.span_5_of_10 { padding-right: 40px } #sectorLandingWelcome .welcomeSidebar { margin-top: 10px; margin-top: .625rem; text-align: center } #sectorLandingWelcome .welcomeSidebar a { display: block } #sectorLandingWelcome .welcomeSidebar .courseNumber { padding: 45px; padding: 2.8125rem; text-align: center; line-height: 1.5; float: left; width: 100% } #sectorLandingWelcome .welcomeSidebar .courseNumber span.number { display: block; line-height: 1.1 } #sectorLandingWelcome .welcomeSidebar img { max-width: 100%; display: inline-block } #sectorLandingWelcome .welcomeSidebar .imageHolder { margin: 20px 0; margin: 1.25rem 0; position: relative } #sectorLandingWelcome .welcomeSidebar .videoCarousel, #sectorLandingWelcome .welcomeSidebar .blockquoteCarousel, #sectorLandingWelcome .welcomeSidebar .imageCarousel { float: left; width: 100%; position: relative; padding-bottom: 50px; margin-bottom: 25px } #sectorLandingWelcome .welcomeSidebar .videoCarousel .owl-dots, #sectorLandingWelcome .welcomeSidebar .blockquoteCarousel .owl-dots, #sectorLandingWelcome .welcomeSidebar .imageCarousel .owl-dots { position: absolute; bottom: 15px; bottom: .9375rem; left: 0; width: 100%; text-align: center } #sectorLandingWelcome .welcomeSidebar .videoCarousel .owl-dots button, #sectorLandingWelcome .welcomeSidebar .blockquoteCarousel .owl-dots button, #sectorLandingWelcome .welcomeSidebar .imageCarousel .owl-dots button { height: 10px; width: 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; background-clip: padding-box; behavior: url(PIE.htc); margin: 0 6px; margin: 0 .375rem; border: none; -webkit-appearance: none; padding: 0; outline: none; display: inline-block; border-style: solid; border-width: 1px } #sectorLandingWelcome .welcomeSidebar .videoCarousel .item, #sectorLandingWelcome .welcomeSidebar .blockquoteCarousel .item, #sectorLandingWelcome .welcomeSidebar .imageCarousel .item { float: left; width: 100% } #sectorLandingWelcome .welcomeSidebar .blockquoteCarousel, #sectorLandingWelcome .welcomeSidebar .imageCarousel { margin-bottom: 0 } #sectorLandingWelcome .welcomeSidebar .blockquoteCarousel blockquote { margin: 0 !important; text-align: left; padding: 50px 50px 80px 50px !important } #sectorLandingWelcome .welcomeSidebar .alert { margin: 35px 0 25px 0; display: block } #sectorLandingWelcome .welcomeSidebar .alert a { display: block; padding: 28px 110px 28px 30px; line-height: 1.4; text-align: left; position: relative; border-top-right-radius: 20px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-left-radius: 20px; border-bottom-left-radius: 20px } #sectorLandingWelcome .welcomeSidebar .alert a i { position: absolute; right: 45px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); opacity: 0 } #sectorLandingWelcome .welcomeSidebar .alert a:hover i { right: 40px; opacity: 1 } #sectorLandingWelcome .welcomeSidebar .advert, #sectorLandingWelcome .welcomeSidebar .quickLink { width: 100%; position: relative } #sectorLandingWelcome .welcomeSidebar .advert .item, #sectorLandingWelcome .welcomeSidebar .quickLink .item { float: left; width: 100% } #sectorLandingWelcome .welcomeSidebar .advert .item a, #sectorLandingWelcome .welcomeSidebar .quickLink .item a { display: block; height: 360px; position: relative } #sectorLandingWelcome .welcomeSidebar .advert .item figure, #sectorLandingWelcome .welcomeSidebar .quickLink .item figure { margin: 0; position: relative; height: 360px; overflow: hidden } #sectorLandingWelcome .welcomeSidebar .advert .item figure img, #sectorLandingWelcome .welcomeSidebar .quickLink .item figure img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1) } #sectorLandingWelcome .welcomeSidebar .advert .item .title, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title { position: absolute; bottom: 0; left: 0; padding: 30px } #sectorLandingWelcome .welcomeSidebar .advert .item .title.norm, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title.norm { opacity: 1 } #sectorLandingWelcome .welcomeSidebar .advert .item .title.over, #sectorLandingWelcome .welcomeSidebar .quickLink .item .title.over { opacity: 0 } #sectorLandingWelcome .welcomeSidebar .advert .item a:hover figure img, #sectorLandingWelcome .welcomeSidebar .quickLink .item a:hover figure img { transform: translate(-50%, -50%) scale(1.1); -webkit-transform: translate(-50%, -50%) scale(1.1) } #sectorLandingWelcome .welcomeSidebar .advert .item a:hover .title.norm, #sectorLandingWelcome .welcomeSidebar .quickLink .item a:hover .title.norm { opacity: 0 } #sectorLandingWelcome .welcomeSidebar .advert .item a:hover .title.over, #sectorLandingWelcome .welcomeSidebar .quickLink .item a:hover .title.over { opacity: 1 } #sectorLandingWelcome .welcomeSidebar .quickLink .item .overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100% } #sectorLandingWelcome .welcomeSidebar .quickLink .item .title { top: 50%; bottom: auto; width: 100%; text-align: center; padding: 0 70px; transform: translate(0, -50%); -webkit-transform: translate(0, -50%) } #sectorLandingWelcome .welcomeSidebar .quickLink .item .title span { display: block; line-height: 1.3 } #sectorLandingWelcome .welcomeSidebar .quickLink .item .title i { opacity: 0; margin-top: 0 } #sectorLandingWelcome .welcomeSidebar .quickLink .item a:hover i { display: block; margin-top: 20px; opacity: 1 } #sectorLandingChoose { float: left; width: 100%; padding: 70px 0 } #sectorLandingChoose .clearfix { zoom: 1 } #sectorLandingChoose .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0 } #sectorLandingChoose .sectionTitle { display: block } #sectorLandingChoose .tabbedHolder { float: left; width: 100%; margin-top: 60px } #sectorLandingChoose ul.tabs { float: left; width: 100%; margin: 0; padding: 0; list-style-type: none; margin-bottom: 70px } #sectorLandingChoose ul.tabs li { float: left } #sectorLandingChoose ul.tabs li:first-child { margin-left: 0 } #sectorLandingChoose ul.tabs li span { padding: 26px 30px; display: block } #sectorLandingChoose ul.tabs li span i { margin-left: 8px; opacity: 0 } #sectorLandingChoose ul.tabs li:hover { cursor: pointer } #sectorLandingChoose ul.tabs li:hover span i { margin-left: 12px; opacity: 1 } #sectorLandingChoose ul.tabs li span.current i { margin-left: 12px; opacity: 1 } #sectorLandingChoose ul.tabs li.link a { padding: 26px 30px; display: block } #sectorLandingChoose ul.tabs li.link a i { margin-left: 8px; opacity: 0 } #sectorLandingChoose ul.tabs li.link a:hover { cursor: pointer } #sectorLandingChoose ul.tabs li.link a:hover i { margin-left: 12px; opacity: 1 } #sectorLandingChoose .tab-content { box-sizing: border-box; float: left; width: 100%; position: absolute; top: -999rem; opacity: 0; transition: opacity 0.2s ease-in 0s; -webkit-transition: opacity 0.2s ease-in 0s; visibility: hidden; height: 0 } #sectorLandingChoose .tab-content.current { opacity: 1; position: relative; top: auto; visibility: visible; height: auto } #sectorLandingChoose .tab-content p { line-height: 1.5; margin: 0 0 25px 0 } #sectorLandingChoose .tab-content .column { margin-top: 50px } #sectorLandingChoose .tab-content a.more { margin-right: 20px } #sectorLandingChoose h2, #sectorLandingChoose .sectionTitle { float: left } #sectorLandingChoose .number { float: right; margin-top: 16px } #sectorLandingChoose .tab-content .column.span_5_of_10 { margin-left: 0 !important } #sectorLandingChoose .tab-content .column.span_5_of_10 img.centered { display: block; margin-left: auto; margin-right: auto } #sectorLandingChoose .subjectList, #sectorLandingChoose .levelList, #sectorLandingChoose .pathList { float: left; width: 100%; margin-top: 60px } #sectorLandingChoose .subjectList .subject, #sectorLandingChoose .subjectList .level, #sectorLandingChoose .subjectList .path, #sectorLandingChoose .levelList .subject, #sectorLandingChoose .levelList .level, #sectorLandingChoose .levelList .path, #sectorLandingChoose .pathList .subject, #sectorLandingChoose .pathList .level, #sectorLandingChoose .pathList .path { float: left; text-align: center; margin-bottom: 20px } #sectorLandingChoose .subjectList .subject a, #sectorLandingChoose .subjectList .level a, #sectorLandingChoose .subjectList .path a, #sectorLandingChoose .levelList .subject a, #sectorLandingChoose .levelList .level a, #sectorLandingChoose .levelList .path a, #sectorLandingChoose .pathList .subject a, #sectorLandingChoose .pathList .level a, #sectorLandingChoose .pathList .path a { float: left; width: 100%; position: relative; height: 180px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); border-width: 1px; border-style: solid } #sectorLandingChoose .subjectList .subject .icon, #sectorLandingChoose .subjectList .subject .name, #sectorLandingChoose .subjectList .subject .levelNumber, #sectorLandingChoose .subjectList .level .icon, #sectorLandingChoose .subjectList .level .name, #sectorLandingChoose .subjectList .level .levelNumber, #sectorLandingChoose .subjectList .path .icon, #sectorLandingChoose .subjectList .path .name, #sectorLandingChoose .subjectList .path .levelNumber, #sectorLandingChoose .levelList .subject .icon, #sectorLandingChoose .levelList .subject .name, #sectorLandingChoose .levelList .subject .levelNumber, #sectorLandingChoose .levelList .level .icon, #sectorLandingChoose .levelList .level .name, #sectorLandingChoose .levelList .level .levelNumber, #sectorLandingChoose .levelList .path .icon, #sectorLandingChoose .levelList .path .name, #sectorLandingChoose .levelList .path .levelNumber, #sectorLandingChoose .pathList .subject .icon, #sectorLandingChoose .pathList .subject .name, #sectorLandingChoose .pathList .subject .levelNumber, #sectorLandingChoose .pathList .level .icon, #sectorLandingChoose .pathList .level .name, #sectorLandingChoose .pathList .level .levelNumber, #sectorLandingChoose .pathList .path .icon, #sectorLandingChoose .pathList .path .name, #sectorLandingChoose .pathList .path .levelNumber { position: absolute; width: 100% } #sectorLandingChoose .subjectList .subject .icon, #sectorLandingChoose .subjectList .level .icon, #sectorLandingChoose .subjectList .path .icon, #sectorLandingChoose .levelList .subject .icon, #sectorLandingChoose .levelList .level .icon, #sectorLandingChoose .levelList .path .icon, #sectorLandingChoose .pathList .subject .icon, #sectorLandingChoose .pathList .level .icon, #sectorLandingChoose .pathList .path .icon { bottom: 100px } #sectorLandingChoose .subjectList .subject .levelNumber, #sectorLandingChoose .subjectList .level .levelNumber, #sectorLandingChoose .subjectList .path .levelNumber, #sectorLandingChoose .levelList .subject .levelNumber, #sectorLandingChoose .levelList .level .levelNumber, #sectorLandingChoose .levelList .path .levelNumber, #sectorLandingChoose .pathList .subject .levelNumber, #sectorLandingChoose .pathList .level .levelNumber, #sectorLandingChoose .pathList .path .levelNumber { bottom: 85px } #sectorLandingChoose .subjectList .subject .name, #sectorLandingChoose .subjectList .level .name, #sectorLandingChoose .subjectList .path .name, #sectorLandingChoose .levelList .subject .name, #sectorLandingChoose .levelList .level .name, #sectorLandingChoose .levelList .path .name, #sectorLandingChoose .pathList .subject .name, #sectorLandingChoose .pathList .level .name, #sectorLandingChoose .pathList .path .name { top: 90px; line-height: 1.4; padding: 0 10px } #sectorLandingChoose .levelList .level .name { top: 105px } #sectorLandingChoose .pathList { margin-top: 30px } #sectorLandingChoose .pathList .path a { border-radius: 0; border: none; height: 300px } #sectorLandingChoose .pathList .path figure { position: relative; margin: 0; padding: 0; height: 300px } #sectorLandingChoose .pathList .path figure img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%) } #sectorLandingChoose .pathList .path .overlay { z-index: 2; position: absolute; bottom: 0; height: 85px; left: 0; width: 100% } #sectorLandingChoose .pathList .path .title { z-index: 5; height: 85px; bottom: 0; left: 0; width: 100%; position: absolute } #sectorLandingChoose .pathList .path .title .center { position: absolute; top: 50%; left: 0; width: 100%; padding: 0 20px; transform: translateY(-50%) } #sectorLandingChoose .pathList .path .title span { display: block; line-height: 1.3 } #sectorLandingChoose .pathList .path .title i { opacity: 0; display: none; margin-top: 14px } #sectorLandingChoose .pathList .path a:hover .overlay, #sectorLandingChoose .pathList .path a:hover .title { height: 100% } #sectorLandingChoose .pathList .path a:hover .title i { opacity: 1; display: block } #sectorLandingChoose .courseCategoryList, #sectorLandingChoose .pageList, #sectorLandingChoose .newsList { float: left; width: 100%; margin-top: 60px } #sectorLandingChoose .courseCategoryList .course, #sectorLandingChoose .courseCategoryList .page, #sectorLandingChoose .pageList .course, #sectorLandingChoose .pageList .page, #sectorLandingChoose .newsList .course, #sectorLandingChoose .newsList .page { float: left; width: 100%; margin-bottom: 30px } #sectorLandingChoose .courseCategoryList .course a, #sectorLandingChoose .courseCategoryList .page a, #sectorLandingChoose .pageList .course a, #sectorLandingChoose .pageList .page a, #sectorLandingChoose .newsList .course a, #sectorLandingChoose .newsList .page a { display: block; float: left; width: 100%; padding: 32px 300px 33px 35px; border-style: solid; border-width: 1px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); position: relative } #sectorLandingChoose .courseCategoryList .course .title, #sectorLandingChoose .courseCategoryList .page .title, #sectorLandingChoose .pageList .page .title, #sectorLandingChoose .newsList .page .title { line-height: 1.4; display: block; } #sectorLandingChoose .courseCategoryList .course .specifics, #sectorLandingChoose .courseCategoryList .page .specifics, #sectorLandingChoose .pageList .course .specifics, #sectorLandingChoose .pageList .page .specifics, #sectorLandingChoose .newsList .course .specifics, #sectorLandingChoose .newsList .page .specifics { margin-top: 45px } #sectorLandingChoose .courseCategoryList .course .specifics .spec, #sectorLandingChoose .courseCategoryList .page .specifics .spec, #sectorLandingChoose .pageList .course .specifics .spec, #sectorLandingChoose .pageList .page .specifics .spec, #sectorLandingChoose .newsList .course .specifics .spec, #sectorLandingChoose .newsList .page .specifics .spec { float: left; margin: 0 38px 18px 0 } #sectorLandingChoose .courseCategoryList .course .intro, #sectorLandingChoose .courseCategoryList .page .intro, #sectorLandingChoose .pageList .course .intro, #sectorLandingChoose .pageList .page .intro, #sectorLandingChoose .newsList .course .intro, #sectorLandingChoose .newsList .page .intro { display: block; margin-top: 35px; margin-bottom: 25px; width: 100%; line-height: 1.6 } #sectorLandingChoose .courseCategoryList .course span.number, #sectorLandingChoose .courseCategoryList .page span.number, #sectorLandingChoose .pageList .course span.number, #sectorLandingChoose .pageList .page span.number, #sectorLandingChoose .newsList .course span.number, #sectorLandingChoose .newsList .page span.number { position: absolute; top: 25px; right: 45px; float: none; margin-top: 0 } #sectorLandingChoose .courseCategoryList .course span.number i, #sectorLandingChoose .courseCategoryList .page span.number i, #sectorLandingChoose .pageList .course span.number i, #sectorLandingChoose .pageList .page span.number i, #sectorLandingChoose .newsList .course span.number i, #sectorLandingChoose .newsList .page span.number i { float: left; margin-top: 5px } #sectorLandingChoose .courseCategoryList .course span.more, #sectorLandingChoose .courseCategoryList .page span.more, #sectorLandingChoose .pageList .course span.more, #sectorLandingChoose .pageList .page span.more, #sectorLandingChoose .newsList .course span.more, #sectorLandingChoose .newsList .page span.more { position: absolute; right: 40px; bottom: 30px } #sectorLandingChoose .courseCategoryList .page a, #sectorLandingChoose .pageList .page a, #sectorLandingChoose .newsList .page a { border: none } #sectorLandingChoose .extraTitle.h2 { float: left; width: 100%; padding-top: 50px; margin-top: 20px; border-top-style: solid; border-top-width: 2px } #sectorLandingChoose .newsList .news { float: left; width: 100%; position: relative; margin-bottom: 20px } #sectorLandingChoose .newsList .news:last-child { margin-bottom: 0 } #sectorLandingChoose .newsList .news a { float: left; position: relative; width: 100%; min-height: 245px; padding: 32px 300px 33px 360px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); overflow: hidden } #sectorLandingChoose .newsList .news a:hover figure img { transform: translate(-50%, -50%) scale(1.1); -webkit-transform: translate(-50%, -50%) scale(1.1) } #sectorLandingChoose .newsList figure { position: absolute; top: 0; height: 100%; left: 0; width: 310px; margin: 0; overflow: hidden } #sectorLandingChoose .newsList figure img { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1) } #sectorLandingChoose .newsList .itemInfo { float: left; line-height: 1.4; position: relative } #sectorLandingChoose .newsList .itemInfo .title { margin: 20px 0 0 0; margin: 1.25rem 0 0 0; text-transform: uppercase } #sectorLandingChoose .newsList .more { display: block; position: absolute; right: 40px; right: 2.5rem; bottom: 30px; bottom: 1.875rem } #sectorLandingQuickLinks { float: left; width: 100%; padding: 60px 0 60px 0 } #sectorLandingQuickLinks .ql { float: left } #sectorLandingQuickLinks .ql a { display: block; text-align: center; height: 200px; position: relative; width: 100%; float: left } #sectorLandingQuickLinks .ql .title { width: 100%; position: absolute; top: 50%; z-index: 5; transform: translateY(-50%); -webkit-transform: translateY(-50%); margin-top: 13px } #sectorLandingQuickLinks .ql .title span { display: block; line-height: 1.3; padding: 0 20px } #sectorLandingQuickLinks .ql .title i { opacity: 0 } #sectorLandingQuickLinks .ql:hover .title { margin-top: 0 } #sectorLandingQuickLinks .ql:hover .title i { opacity: 1; margin-top: 10px } #sectorLandingQuickLinks .ql .background, #sectorLandingQuickLinks .ql .overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100% } #sectorLandingQuickLinks .ql .background { z-index: 1; overflow: hidden } #sectorLandingQuickLinks .ql .background img { width: 100%; height: 100%; object-fit: cover; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1) } #sectorLandingQuickLinks .ql .overlay { opacity: 0.95; z-index: 2 } #sectorLandingQuickLinks .ql a:hover .image img { transform: translate(-50%, -50%) scale(1.1); -webkit-transform: translate(-50%, -50%) scale(1.1) } #sectorLandingQuickLinks .ql a:hover .title:after { left: 20px; right: 20px } body.sector-landing #latestNews.marginTop { margin-top: 70px } @media (max-width: 767px) { #sectorLandingWelcome .welcomeSidebar .advert .item figure, #sectorLandingWelcome .welcomeSidebar .advert .item a, #sectorLandingWelcome .welcomeSidebar .quickLink .item figure, #sectorLandingWelcome .welcomeSidebar .quickLink .item a, #sectorLandingChoose .pathList .path a, #sectorLandingChoose .pathList .path figure { height: 160px } #sectorLandingWelcome .welcomeSidebar .advert .item .title { padding: 18px 15px } body.sector-landing #slider .searchSubjectsMenu, body.course-listing #slider .searchSubjectsMenu { bottom: -95px } body.sector-landing #pageHolder .pageHolder, body.course-listing #pageHolder .pageHolder { padding-top: 95px } #sectorLandingChoose { padding: 35px 0 25px 0 } #sectorLandingChoose ul.tabs { margin-bottom: 25px } #sectorLandingChoose ul.tabs li { width: 100%; margin-left: 0; margin-bottom: 10px } #sectorLandingChoose ul.tabs li span { padding: 26px 30px } #sectorLandingChoose .subjectList, #sectorLandingChoose .levelList { margin-top: 25px } #sectorLandingChoose .subjectList .subject, #sectorLandingChoose .subjectList .level, #sectorLandingChoose .levelList .subject, #sectorLandingChoose .levelList .level { width: 100%; margin-bottom: 10px; text-align: left } #sectorLandingChoose .subjectList .subject a, #sectorLandingChoose .subjectList .level a, #sectorLandingChoose .levelList .subject a, #sectorLandingChoose .levelList .level a { height: auto; padding: 25px 0 } #sectorLandingChoose .subjectList .subject .icon, #sectorLandingChoose .subjectList .subject .levelNumber, #sectorLandingChoose .subjectList .level .icon, #sectorLandingChoose .subjectList .level .levelNumber, #sectorLandingChoose .levelList .subject .icon, #sectorLandingChoose .levelList .subject .levelNumber, #sectorLandingChoose .levelList .level .icon, #sectorLandingChoose .levelList .level .levelNumber { width: 50px; text-align: center; top: 50%; left: 10px; bottom: auto; transform: translateY(-50%); -webkit-transform: translateY(-50%) } #sectorLandingChoose .subjectList .subject .name, #sectorLandingChoose .subjectList .level .name, #sectorLandingChoose .levelList .subject .name, #sectorLandingChoose .levelList .level .name { float: left; padding-left: 70px; top: auto; position: relative } #sectorLandingChoose .tabbedHolder { margin-top: 35px } #sectorLandingChoose .number { margin: 7px 0 0 0 } #sectorLandingQuickLinks { padding: 30px 0 20px 0 } #sectorLandingQuickLinks .ql { width: 100%; height: auto; margin-bottom: 10px; float: left } #sectorLandingQuickLinks .ql a { height: auto; padding: 20px; text-align: left } #sectorLandingQuickLinks .ql .title { float: left; position: relative; left: auto; top: auto; margin-top: 0; padding: 0; transform: none } #sectorLandingQuickLinks .ql .title span { padding: 0 26px 0 0 } #sectorLandingQuickLinks .ql .title i { position: absolute; right: 00px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); opacity: 1 } #sectorLandingChoose .tab-content p { margin: 0 0 20px 0 } #sectorLandingChoose .tab-content .column.hasImage { margin-top: 25px } #sectorLandingChoose .tab-content .column.hasImage img { max-width: 100% } #sectorLandingChoose .tab-content a.more { margin-top: 10px } #sectorLandingWelcome .welcomeSidebar .quickLink .item .title { padding: 0 30px } #sectorLandingWelcome .welcomeSidebar .quickLink .item .title i { display: none } body.sector-landing #latestNews.marginTop { margin-top: 10px } #sectorLandingChoose .pathList .path { width: 100%; margin-bottom: 10px } #sectorLandingChoose .pathList .path .title, #sectorLandingChoose .pathList .path .overlay { height: 50px } #sectorLandingWelcome .welcomeSidebar .blockquoteCarousel blockquote { padding: 30px !important } #sectorLandingChoose .courseCategoryList { margin-top: 30px } #sectorLandingChoose .courseCategoryList .course { margin-bottom: 15px } #sectorLandingChoose .courseCategoryList .course a { padding: 20px } #sectorLandingChoose .courseCategoryList .course span.title { padding-right: 60px } #sectorLandingChoose .courseCategoryList .course span.number { right: 15px; top: 15px } #sectorLandingChoose .courseCategoryList .course .intro { margin: 20px 0 } #sectorLandingChoose .courseCategoryList .course span.more { float: left; position: relative; right: auto; bottom: auto } #sectorLandingChoose .courseCategoryList .course .specifics { display: block; width: 100%; float: left; margin-top: 25px; margin-bottom: 10px } #sectorLandingChoose .courseCategoryList .course .specifics .spec { width: 100%; display: block; margin: 0 0 15px 0 } #sectorLandingChoose .extraTitle.h2 { padding-top: 20px } #sectorLandingChoose .pageList .page a { padding: 20px } #sectorLandingChoose .pageList .page .intro { margin-top: 15px } #sectorLandingChoose .pageList .page span.more { float: left; position: relative; right: auto; bottom: auto } #sectorLandingChoose .pageList, #sectorLandingChoose .newsList { margin-top: 25px } #sectorLandingChoose .pageList .page, #sectorLandingChoose .newsList .page { margin-bottom: 15px } #sectorLandingChoose .pageList .news a, #sectorLandingChoose .newsList .news a { padding: 0 } #sectorLandingChoose .pageList figure, #sectorLandingChoose .newsList figure { position: relative; float: left; width: 100%; height: auto } #sectorLandingChoose .pageList figure img, #sectorLandingChoose .newsList figure img { position: relative; width: 100%; height: auto; left: auto; top: auto; transform: none !important; -webkit-transform: none !important } #sectorLandingChoose .pageList .itemInfo, #sectorLandingChoose .newsList .itemInfo { padding: 20px 20px 25px 20px; width: 100% } #sectorLandingChoose .newsList span.more { position: relative; margin-left: 20px; margin-bottom: 20px; right: auto; bottom: auto } } @media all and (min-width: 768px) and (max-width: 1023px) { #sectorLandingChoose .subjectList .subject, #sectorLandingChoose .levelList .level { width: 48.4375%; margin: 20px 0 0 3.125% } #sectorLandingChoose .subjectList .subject:nth-child(odd), #sectorLandingChoose .levelList .level:nth-child(odd) { margin-left: 0 } #sectorLandingChoose { padding: 50px 0 } #sectorLandingChoose ul.tabs { margin-bottom: 50px } #sectorLandingChoose .subjectList, #sectorLandingChoose .levelList { margin-top: 20px } #sectorLandingQuickLinks { padding: 40px 0 30px 0 } body.sector-landing #latestNews.marginTop { margin-top: 50px } #sectorLandingChoose .pathList .path a, #sectorLandingChoose .pathList .path figure { height: 200px } #sectorLandingChoose .sectionTitle, #sectorLandingChoose .pathList, #sectorLandingChoose .number, #sectorLandingChoose .subjectList { padding: 0 24px } #sectorLandingChoose .courseCategoryList { padding: 0 24px } #sectorLandingChoose .courseCategoryList .course a { padding: 32px 120px 95px 35px } #sectorLandingChoose .courseCategoryList .course span.number { padding: 0 } #sectorLandingChoose .pageList .page a { padding: 32px 120px 95px 35px } #sectorLandingChoose .newsList .news a { padding: 32px 30px 95px 275px } #sectorLandingChoose .newsList figure { width: 234px } #sectorLandingQuickLinks { padding: 30px 0 20px 0 } #sectorLandingQuickLinks .ql { width: 100%; height: auto; margin-bottom: 15px; float: left } #sectorLandingQuickLinks .ql a { height: auto; padding: 27px 34px 27px 50px; text-align: left } #sectorLandingQuickLinks .ql .title { float: left; position: relative; left: auto; top: auto; margin-top: 0; padding: 0; transform: none } #sectorLandingQuickLinks .ql .title span { padding: 0 26px 0 0 } #sectorLandingQuickLinks .ql .title i { position: absolute; right: 00px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); opacity: 1 } } @media (max-width: 1023px) { #sectorLandingQuickLinks .ql:hover .title i { margin-top: 0 } } @media all and (min-width: 768px) and (max-width: 1050px) { body.sector-landing #slider .searchSubjectsMenu, body.course-listing #slider .searchSubjectsMenu { bottom: -65px } body.sector-landing #pageHolder .pageHolder, body.course-listing #pageHolder .pageHolder { padding-top: 50px } } @media all and (min-width: 768px) and (max-width: 1200px) { #sectorLandingChoose ul.tabs li { width: 48.4375%; margin-left: 3.125%; margin-bottom: 20px } #sectorLandingChoose ul.tabs li:nth-child(odd) { margin-left: 0 } #sectorLandingChoose .pathList .path { width: 48.4375%; margin: 20px 0 0 3.125% } #sectorLandingChoose .pathList .path:nth-child(odd) { margin-left: 0 } #sectorLandingChoose h2 { margin-bottom: 40px } #sectorLandingChoose .tab-content .column.hasImage { margin-top: 40px } } @media all and (min-width: 1024px) and (max-width: 1200px) { #sectorLandingQuickLinks .ql { width: 48.4375%; margin: 20px 0 0 3.125% } #sectorLandingQuickLinks .ql:nth-child(odd) { margin-left: 0 } } @media (max-width: 1200px) { #sectorLandingWelcome .welcomeMessage.span_5_of_10, #sectorLandingWelcome .welcomeSidebar.span_5_of_10, #sectorLandingChoose .tab-content .column.span_5_of_10 { width: 100% } #sectorLandingWelcome .welcomeMessage.span_5_of_10 { padding-right: 0 } #sectorLandingChoose .tab-content .column { margin-top: 0 } } @media (min-width: 1200px) { #sectorLandingChoose ul.tabs li { width: 23.8461%; margin-left: 1.5385% } #sectorLandingQuickLinks .ql, #sectorLandingChoose .pathList .path { width: 32.3076%; margin: 20px 0 0 1.5386% } #sectorLandingQuickLinks .ql:nth-child(3n+1), #sectorLandingChoose .pathList .path:nth-child(3n+1) { margin-left: 0 } } @media all and (min-width: 1024px) and (max-width: 1400px) { #sectorLandingChoose .subjectList .subject, #sectorLandingChoose .levelList .level { width: 31.5835%; margin-left: 2.59225% } #sectorLandingChoose .subjectList .subject:nth-child(3n+1), #sectorLandingChoose .levelList .level:nth-child(3n+1) { margin-left: 0 } } @media (min-width: 1400px) { #sectorLandingChoose .subjectList .subject, #sectorLandingChoose .levelList .level { width: 23.8461%; margin-left: 1.5385% } #sectorLandingChoose .subjectList .subject:nth-child(4n+1), #sectorLandingChoose .levelList .level:nth-child(4n+1) { margin-left: 0 } } body.apprenticeships.course-page #pageHolder .pageHolder, body.degree.course-page #pageHolder .pageHolder, body.adult.course-page #pageHolder .pageHolder { padding: 0 } body.apprenticeships.course-page #courseDetails, body.degree.course-page #courseDetails, body.adult.course-page #courseDetails { padding: 10px 0 70px 0 } #relatedCourses { float: left; width: 100%; padding: 70px 0 80px 0 } #relatedCourses .sectionTitle { float: left } #relatedCourses .courseList { float: left; width: 100%; margin-top: 50px } #relatedCourses .courseList .course { float: left; width: 100%; text-align: center } #relatedCourses .courseList .course a { float: left; width: 100%; position: relative; height: 180px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); border-width: 1px; border-style: solid } #relatedCourses .courseList .course .icon { position: absolute; width: 100%; bottom: 100px } #relatedCourses .courseList .course .name { position: absolute; top: 90px; line-height: 1.4; padding: 0 10px; width: 100% } #relatedCourses .courseList .course .number { position: absolute; top: 20px; right: 30px } #relatedCourses .courseList .course span.more { position: absolute; right: 25px; bottom: 20px } #relatedCourses .owl-item { padding: 0 1px } #relatedCourses .owl-nav { position: absolute; top: -75px; top: -4.6875rem; right: 0px; right: 0rem; width: 70px; width: 4.375rem } #relatedCourses .owl-nav button { height: 25px; width: 25px; border: none; -webkit-appearance: none; background: none; padding: 0; outline: none; position: absolute } #relatedCourses .owl-nav button:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 25px; line-height: 1.5625rem; font-family: "Font Awesome 5 Free"; font-weight: 700 } #relatedCourses .owl-nav button.owl-prev { left: 0 } #relatedCourses .owl-nav button.owl-prev:before { content: "\f0a8" } #relatedCourses .owl-nav button.owl-next { right: 0 } #relatedCourses .owl-nav button.owl-next:before { content: "\f0a9" } #relatedCourses.noIcon .courseList .course { text-align: left } #relatedCourses.noIcon .courseList .course a { height: auto; min-height: 180px; padding: 20px 0 60px 0 } #relatedCourses.noIcon .courseList .course .name { position: relative; top: auto; padding: 0 200px 0 40px } #courseDetails { float: left; width: 100%; padding: 70px 0 } #courseDetails .sidebar { float: right; width: 280px } #courseDetails .sidebar .sectionTitle { display: none } #courseDetails .sidebar .courseDetails { float: left; width: 100%; padding: 25px 20px } #courseDetails .sidebar .courseDetails .title { margin-bottom: 22px; display: block } #courseDetails .sidebar .courseDetails span { display: block; line-height: 1.5 } #courseDetails .sidebar .courseDetails span.bold { margin-top: 15px } #courseDetails .sidebar .button { float: left; width: 100%; padding: 26px 30px; display: block; margin: 0 0 15px 0; position: relative;cursor:hand;cursor:pointer; } #courseDetails .sidebar .button i { margin-left: 7px } #courseDetails .sidebar .button:hover i { margin-left: 12px } #courseDetails .content { float: left; width: 70%; width: calc(100% - 350px);margin-top:0px; } #courseDetails .content #mobileSidebar { display: none } #courseDetails .content .sectionTitle { width: 100%; display: block; margin-bottom: 40px } #courseDetails .content h1 { margin-top: 0; margin-bottom: 35px; margin-bottom: 2.1875rem; position: relative; line-height: 1.35; width: 100%; display: block; } #courseDetails .content .logo { margin: 30px 0 40px 0 } #courseDetails .content .video { margin: 50px 0 20px 0 } #courseDetails .content .video img { max-width: 100% } #courseDetails .content a.additional-link { width: 47%; padding: 25px 30px; margin-left: 2%; display: inline-block; white-space: normal; line-height: 1.3 } #courseDetails .content a.additional-link i { margin-left: 7px; opacity: 0 } #courseDetails .content a.additional-link:hover i { margin-left: 14px; opacity: 1 } #courseDetails .content a.additional-link:nth-child(odd) { margin-left: 0 } #courseDetails .content .levels { float: left; width: 100%; margin: 10px 0 35px 0 } #courseDetails .content .levels span { display: inline-block; position: relative; padding-right: 20px } #courseDetails .content .levels span:before { width: 1px; height: 14px; top: 2px; left: -12px; content: ""; position: absolute } #courseDetails .content .levels span:first-child:before { display: none } #courseDetails .content p { line-height: 1.5; margin: 0 0 25px 0; margin: 0 0 1.5625rem 0 } #courseDetails .content p a { text-decoration: underline } #courseDetails .content p a:hover { text-decoration: none } #courseDetails #accordion { float: left; width: 100%; margin: 40px 0 35px 0; margin: 2.5rem 0 2.1875rem 0; display: none } #courseDetails #accordion.ui-accordion { display: block } #courseDetails #accordion .accordion-title { display: block; padding: 15px 80px 15px 0; padding: .9375rem 5rem .9375rem 0; line-height: 1.3; margin: 0; margin: 0; position: relative; outline: none; clear: left } #courseDetails #accordion .accordion-title:after { position: absolute; width: 20px; height: 20px; content: "\f055"; font-family: "Font Awesome 5 Free"; font-weight: 700; right: 0; top: 50%; margin-top: -9px; z-index: 2; line-height: 1 } #courseDetails #accordion .accordion-title:hover { cursor: pointer } #courseDetails #accordion .accordion-title.ui-state-active:after { content: "\f056" } #courseDetails #accordion div.ui-accordion-content { padding: 25px 0 20px 0; padding: 1.5625rem 0 1.25rem 0; width: 100% } #courseDetails #accordion div.ui-accordion-content .column:first-child, #courseDetails #accordion div.ui-accordion-content .column:first-of-type { margin-left: 0 } #courseDetails #accordion div.ui-accordion-content .column { margin-bottom: 20px } #courseDetails #accordion div.ui-accordion-content ul, #courseDetails #accordion div.ui-accordion-content ol { line-height: 1.5; display: block; width: 100% } #courseDetails #accordion div.ui-accordion-content ul { margin: 0; padding: 0; padding-left: 18px; padding-left: 1.125rem } #courseDetails #accordion div.ui-accordion-content ul li { position: relative; list-style-position: outside } #courseDetails #accordion div.ui-accordion-content ol { counter-reset: li; list-style: none; *list-style: decimal; padding: 0 0 0 24px; width: 96% } #courseDetails #accordion div.ui-accordion-content ol li { position: relative; margin-bottom: 1px; margin-bottom: .0625rem } #courseDetails #accordion div.ui-accordion-content ol li:before { content: counter(li) "."; counter-increment: li; position: absolute; left: -28px; left: -1.75rem; top: 0; top: 0; height: 20px; width: 20px; text-align: center } #courseDetails .mobilePageHeading.h1, #courseDetails .mobilePageHeading.h2 { display: none } #courseDetails .mobilePageHeading.h1 { margin: 0 0 35px 0; line-height: 1.35 } #courseDetails .mobilePageHeading.h2 { margin: 5px 0 40px 0; line-height: 1.2 } #courseDetails .sidebar #explore.page, #courseDetails .content #mobileSidebar #explore.page { padding: 22px 0 30px 0 } #courseDetails .sidebar #explore.page .explore, #courseDetails .content #mobileSidebar #explore.page .explore { float: left; margin-top: 20px; width: 90%; width: calc(100% - 44px); margin-left: 20px; padding-left: 22px; border-left-style: solid; border-left-width: 1px } #courseDetails .sidebar #explore.page .explore .sectionTitle, #courseDetails .content #mobileSidebar #explore.page .explore .sectionTitle { display: block; margin-bottom: 20px } #courseDetails .sidebar #explore.page .explore a, #courseDetails .content #mobileSidebar #explore.page .explore a { float: left; display: inline-block; margin: 18px 0; clear: both } #courseDetails .sidebar #explore.page .explore a i, #courseDetails .content #mobileSidebar #explore.page .explore a i { margin-left: 7px } #courseDetails .sidebar #explore.page .explore a:hover, #courseDetails .content #mobileSidebar #explore.page .explore a:hover { text-decoration: underline } #courseDetails .sidebar #explore.page .explore a:hover i, #courseDetails .content #mobileSidebar #explore.page .explore a:hover i { margin-left: 12px } #courseDetails .sidebar #explore.page .explore .column:last-child a:last-child, #courseDetails .content #mobileSidebar #explore.page .explore .column:last-child a:last-child { margin-bottom: 5px } #courseDetails .sidebar .courseSearch, #courseDetails .content #mobileSidebar .courseSearch { float: left; width: 100%; height: 120px; padding: 18px 20px } #courseDetails .sidebar .courseSearch .panelTitle, #courseDetails .content #mobileSidebar .courseSearch .panelTitle { float: left } #courseDetails .sidebar .courseSearch .searchElement, #courseDetails .content #mobileSidebar .courseSearch .searchElement { position: relative; float: left; height: 50px; height: 3.125rem; width: 100%; margin-top: 12px; width: calc(100% - 50px); z-index: 10 } #courseDetails .sidebar .courseSearch .searchElement input.searchInput, #courseDetails .content #mobileSidebar .courseSearch .searchElement input.searchInput { position: absolute; top: 0; left: 0; left: 0; width: 100%; width: calc(100% - 20px); height: 33px; height: 2.0625rem; padding: 8px 10px 9px 10px; padding: .5rem .625rem .5625rem .625rem; box-sizing: content-box; border: none; color: #000; -webkit-appearance: none; outline: none; background: none; z-index: 10 } #courseDetails .sidebar .courseSearch .searchElement input.searchInput::-webkit-input-placeholder, #courseDetails .content #mobileSidebar .courseSearch .searchElement input.searchInput::-webkit-input-placeholder { color: #000; opacity: 1 } #courseDetails .sidebar .courseSearch .searchElement input.searchInput:moz-placeholder, #courseDetails .content #mobileSidebar .courseSearch .searchElement input.searchInput:moz-placeholder { color: #000; opacity: 1 } #courseDetails .sidebar .courseSearch .searchElement input.searchInput::-moz-placeholder, #courseDetails .content #mobileSidebar .courseSearch .searchElement input.searchInput::-moz-placeholder { color: #000; opacity: 1 } #courseDetails .sidebar .courseSearch .searchElement input.searchInput:-ms-input-placeholder, #courseDetails .content #mobileSidebar .courseSearch .searchElement input.searchInput:-ms-input-placeholder { color: #000; opacity: 1 } #courseDetails .sidebar .courseSearch .searchElement button.searchBTN, #courseDetails .content #mobileSidebar .courseSearch .searchElement button.searchBTN { position: absolute; right: -50px; right: -3.125rem; top: 0; top: 0; height: 50px; width: 50px; border: none !important; -webkit-appearance: none; padding: 0; border-radius: 0 } #courseDetails .sidebar .courseSearch .searchElement button.searchBTN:after, #courseDetails .content #mobileSidebar .courseSearch .searchElement button.searchBTN:after { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 700; text-align: center; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; line-height: 50px; line-height: 3.125rem } #courseDetails .content #mobileSidebar #explore.page .explore .linkSet .column { width: 50% } #courseDetails .content #mobileSidebar #explore.page .explore { margin-top: 5px } @media (max-width: 600px) { #relatedCourses { padding: 35px 0 80px 0 } #relatedCourses .courseList { margin-top: 30px } #relatedCourses .courseList .course { width: 100%; text-align: left } #relatedCourses .courseList .course a { height: auto; padding: 25px 0 } #relatedCourses .courseList .course .icon { width: 50px; text-align: center; top: 50%; left: 10px; bottom: auto; transform: translateY(-50%); -webkit-transform: translateY(-50%) } #relatedCourses .courseList .course .name { float: left; padding-left: 70px; top: auto; position: relative } #relatedCourses .owl-nav { top: auto; bottom: -25px } } @media (max-width: 767px) { #courseDetails #accordion { margin: 0px 0 35px 0 } #courseDetails #accordion .accordion-title { height: auto; line-height: 1.4; padding: 10px 40px 10px 0 } #courseDetails #accordion .accordion-title:after { height: 12px; width: 12px; top: 23px } #courseDetails #accordion div.ui-accordion-content { padding: 10px 0 15px 0; display: block } #courseDetails #accordion div.ui-accordion-content .column { margin: 0 } #courseDetails #accordion div.ui-accordion-content .column:last-child { margin-bottom: 20px } #courseDetails { padding: 35px 0 } #courseDetails .sidebar .sectionTitle { margin-bottom: 35px } #courseDetails .sidebar .button { padding: 22px 20px } #courseDetails .content { margin-top: 35px } #courseDetails .content h1 { margin-bottom: 20px } #courseDetails .content #mobileSidebar #explore.page .explore .linkSet .column { width: 100% } #courseDetails .content #mobileSidebar #explore.page .explore .linkSet .column a:last-child { margin-bottom: 18px } body.apprenticeships.course-page #courseDetails .content, body.adult.course-page #courseDetails .content { margin-top: 7px } body.apprenticeships.course-page #courseDetails, body.degree.course-page #courseDetails, body.adult.course-page #courseDetails { padding-bottom: 30px } #courseDetails .sidebar #explore.page .explore a:last-child { margin-bottom: 18px } #relatedCourses .courseList .course .number { right: 15px } #relatedCourses .courseList .course span.more { left: 20px; right: auto; bottom: 15px } #relatedCourses.noIcon .courseList .course a { padding-bottom: 100px } #relatedCourses.noIcon .courseList .course .name { padding: 0 80px 0 20px } body.degree.course-page #courseDetails { margin: 10px 0 0 0 } #courseDetails .mobilePageHeading.h1 { margin: 0 0 25px 0 } #courseDetails .mobilePageHeading.h2 { margin: 5px 0 24px 0 } #courseDetails .content a.additional-link { position: relative; padding: 18px 55px 18px 25px } #courseDetails .content a.additional-link i { margin-left: 0; opacity: 1; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%) } #courseDetails .content a.additional-link:hover i { margin-left: 0 } #courseDetails .content .logo { margin: 0 0 25px 0 } #courseDetails .content .logo img { max-width: 100%; height: auto } #courseDetails .sidebar #explore.page .explore .column { width: 100% } } @media all and (min-width: 600px) and (max-width: 767px) { #relatedCourses { padding: 40px 0 } #relatedCourses .courseList { margin-top: 30px } } @media all and (min-width: 768px) and (max-width: 1023px) { #relatedCourses { padding: 50px 0 } #courseDetails { padding: 50px 0 } #courseDetails .sidebar .sectionTitle { margin-bottom: 45px } #courseDetails .sidebar .button { width: 48.4375%; margin-left: 3.125% } #courseDetails .sidebar .button:first-child, #courseDetails .sidebar .button:first-of-type { margin-left: 0 } #courseDetails .content { margin-top: 45px } #courseDetails .content #mobileSidebar #explore.page .explore { margin-left: 0; border: 0 } #courseDetails .content #mobileSidebar #explore.page .explore a { margin: 10px 0 } #courseDetails .content #mobileSidebar #explore.page .explore a:last-child { margin-bottom: 10px } body.apprenticeships.course-page #courseDetails .container, body.adult.course-page #courseDetails .container { padding-left: calc(5% + 22px); padding-right: calc(5% + 22px) } body.apprenticeships.course-page #courseDetails .content, body.adult.course-page #courseDetails .content { margin-top: 0 } body.apprenticeships.course-page #courseDetails .content #mobileSidebar #explore.page, body.apprenticeships.course-page #courseDetails .content #mobileSidebar .courseSearch, body.adult.course-page #courseDetails .content #mobileSidebar #explore.page, body.adult.course-page #courseDetails .content #mobileSidebar .courseSearch { display: none } body.apprenticeships.course-page #courseDetails .sidebar, body.adult.course-page #courseDetails .sidebar { margin-top: 30px } body.apprenticeships.course-page #courseDetails .sidebar .button, body.adult.course-page #courseDetails .sidebar .button { width: 100%; margin-left: 0 } body.apprenticeships #courseDetails .sidebar .courseDetails, body.degree #courseDetails .sidebar .courseDetails, body.adult #courseDetails .sidebar .courseDetails { padding-left: 30px; padding-right: 30px } body.apprenticeships #courseDetails .sidebar #explore.page .explore, body.degree #courseDetails .sidebar #explore.page .explore, body.adult #courseDetails .sidebar #explore.page .explore { border: none; margin-left: 10px; margin-top: 5px } body.apprenticeships #courseDetails .sidebar #explore.page .column, body.degree #courseDetails .sidebar #explore.page .column, body.adult #courseDetails .sidebar #explore.page .column { width: 50% } body.degree.course-page #courseDetails .container, body.adult.course-page #courseDetails .container { padding-left: calc(5% + 22px); padding-right: calc(5% + 22px) } body.degree.course-page #courseDetails .content, body.adult.course-page #courseDetails .content { margin-top: 0 } body.degree.course-page #courseDetails .sidebar .button:nth-child(odd), body.adult.course-page #courseDetails .sidebar .button:nth-child(odd) { margin-left: 0 } } @media (max-width: 1023px) { #courseDetails .sidebar, #courseDetails .content { width: 100% } #courseDetails .sidebar .sectionTitle, #courseDetails .content #mobileSidebar, body.apprenticeships #courseDetails .sidebar #explore.page, body.apprenticeships #courseDetails .sidebar .courseSearch, body.adult #courseDetails .sidebar #explore.page, body.adult #courseDetails .sidebar .courseSearch { display: block } #relatedCourses.noIcon .courseList .course a { min-height: 0 } #courseDetails .mobilePageHeading.h1, #courseDetails .mobilePageHeading.h2 { display: block } } @media (max-width: 1200px) { #courseDetails .content a.additional-link { width: 100%; margin: 0 0 10px 0 } } @media all and (min-width: 1200px) and (max-width: 1400px) { #courseDetails .content a.additional-link { width: 49%; padding-left: 20px } } @media all and (min-width:768px) { #infoAdverts .advertCaseStudy .overlay { background: transparent linear-gradient(270deg, #1C1C1C 30%, rgba(116, 116, 116, 0) 100%) 0% 0% no-repeat padding-box; } #infoAdverts .advertCaseStudy .image { left: 0px; right: 20% } #infoAdverts .advertCaseStudy .info { right: 110px; left: auto; text-align: right; } #infoAdverts .advertCaseStudy .info .titleCourse { font-size: 2rem; margin-top: -20px; } } @media all and (max-width:767px) { #infoAdverts .advertCaseStudy .overlay { background: transparent linear-gradient(270deg, #1C1C1C 30%, rgba(116, 116, 116, 0) 100%) 0% 0% no-repeat padding-box; } #infoAdverts .advertCaseStudy .image { left: 0px; right: 20% } #infoAdverts .advertCaseStudy .info { text-align: right; } #infoAdverts .advertCaseStudy .info .titleCourse { font-size: 1rem; margin-top: -5px; } } @media (min-width: 768px) and (max-width: 1023px) { #infoAdverts .advertCaseStudy .info { right: 45px; left: auto; } } /* #sectionMenu .menuOpeners,#sectionMenu .menuOpeners * { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }*/ .alignleft { float: left; margin-right: 15px; margin-bottom: 15px; } @media (min-width: 768px) { #pageHolder #pageContent .alignright { margin-left: 20px; } #pageHolder #pageContent .alignleft { margin-right: 20px; } } #caseStudy { float: left; width: 100%; padding: 70px 0 70px 0; position: relative; } #caseStudy .case { float: left; width: 100%; min-height: 590px; } #caseStudy .case .image { background-position: center; background-size: cover; height: 100%; position: absolute; left: 0; top: 0; } #caseStudy .case .image, #caseStudy .case .content { width: 50%; } #caseStudy .case .content { float: right; padding: 60px 115px 100px 115px; } #caseStudy .case .content .name { position: relative; margin-bottom: 22px; line-height: 1.3; } #caseStudy .case .name { font-size: 40px; font-size: 2.5rem; } #caseStudy .case .content .course { position: relative; margin-bottom: 30px; line-height: 1.3; font-size: 30px; font-size: 1.875rem; } #caseStudy .case .content .comment { line-height: 1.5; } #caseStudy .case { font-size: 20px; font-weight: 700; font-size: 1.25rem; color: #fff; } #caseStudy .case { background-color: #505456; } #caseStudy .owl-nav { position: absolute; bottom: -25px; bottom: -1.5625rem; right: 0; right: 0; width: 70px; width: 4.375rem; } #caseStudy .owl-nav button.owl-prev { left: 0; } #caseStudy .owl-nav button { height: 25px; width: 25px; border: none; -webkit-appearance: none; background: none; padding: 0; outline: none; position: absolute; } #caseStudy .owl-nav button { color: #236192; } #caseStudy .owl-nav button.owl-prev:before { content: "\f0a8"; } #caseStudy .owl-nav button:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 25px; line-height: 1.5625rem; font-family: "Font Awesome 5 Free"; font-weight: 700; } #caseStudy .owl-nav button.owl-next { right: 0; } #caseStudy .owl-nav button.owl-next:before { content: "\f0a9"; } #caseStudy .owl-nav button:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; line-height: 25px; line-height: 1.5625rem; font-family: "Font Awesome 5 Free"; font-weight: 700; } #caseStudy .owl-nav button:hover { color: #000; } #caseStudy .owl-dots { position: absolute; left: 50%; bottom: 49px; margin: 0; padding: 0; list-style-type: none; margin-left: 110px; } #caseStudy .owl-dots button { background-color: transparent; } #caseStudy .owl-dots button.active { background-color: #fff; } #caseStudy .owl-dots button { float: left; height: 10px; height: 10px; width: 10px; border-radius: 50%; -webkit-appearance: 0; border-width: 1px; border-style: solid; padding: 0; margin: 0 10px 0 0; } #caseStudy .owl-dots button { border-color: #fff; } @media (max-width: 767px) { #caseStudy { padding: 30px 0 50px 0; } #caseStudy .case { min-height: 0; } #caseStudy .case { font-size: 14px; font-size: .875rem; } #caseStudy .case .image { position: relative; float: left; height: 240px; } #caseStudy .case .image, #caseStudy .case .content { width: 100%; } #caseStudy .case .content .name { margin-bottom: 12px; } #caseStudy .case .content .course { margin-bottom: 25px; } #caseStudy .case .content .course { font-size: 18px; font-size: 1.125rem; } #caseStudy .case .content .comment { line-height: 1.7; } #caseStudy .owl-nav { bottom: -15px; width: 46px; } #caseStudy .case .content { padding: 15px 20px 60px 20px; } #caseStudy .owl-nav button { height: 20px; width: 20px; } #caseStudy .owl-nav button { font-size: 18px; font-size: 1.125rem; } #caseStudy .owl-dots { bottom: 20px; left: 20px; margin-left: 0; } } @media all and (min-width: 768px) and (max-width: 1200px) { footer#siteFooter .fLeft .footerLinks { padding-left: 30px; padding-right: 30px; line-height: 30px; } } .courseCategoryList .pagination a { font-size: 1.3rem; color: #236192; } .courseCategoryList .pagination a:hover { font-size: 1.3rem; color: #000; } @media (max-width: 900px) { #caseStudy { padding: 30px 0 50px 0; } #caseStudy .case { min-height: 0; } #caseStudy .case { font-size: 14px; font-size: .875rem; } #caseStudy .case .image { position: relative; float: left; height: 240px; } #caseStudy .case .image, #caseStudy .case .content { width: 100%; } #caseStudy .case .content .name { margin-bottom: 12px; } #caseStudy .case .content .course { margin-bottom: 25px; } #caseStudy .case .content .course { font-size: 18px; font-size: 1.125rem; } #caseStudy .case .content .comment { line-height: 1.7; } #caseStudy .owl-nav { bottom: -15px; width: 46px; } #caseStudy .case .content { padding: 15px 20px 60px 20px; } #caseStudy .owl-nav button { height: 20px; width: 20px; } #caseStudy .owl-nav button { font-size: 18px; font-size: 1.125rem; } #caseStudy .owl-dots { bottom: 20px; left: 20px; margin-left: 0; } } @media (min-width: 901px) and (max-width: 1300px) { #caseStudy .case .content { float: right; padding: 60px 70px 100px; } #caseStudy .owl-dots { position: absolute; left: 50%; bottom: 49px; margin: 0; padding: 0; list-style-type: none; margin-left: 70px; } } @media (min-width: 768px) and (max-width: 1050px) { body.course-listing #pageHolder .pageHolder { padding-top: 20px; } } #pageHolder aside#sidebar .courseSearch .searchElement button.searchBTN:hover:after, #slider .searchSubjectsMenu .courseSearch .searchElement button.searchBTN:hover:after { opacity:0.7 } .apprenticeships #slider .searchSubjectsMenu .courseSearch .searchElement button.searchBTN { color:#303030 } #latestNews .newsHolder .blogInfo, #pageHolder #pageContent ul.newsList li a .itemInfo { color: #303030; } #mainMenu .menuHolder .menuRight .searchBox button.searchBTN{background-color: #78be20} #mainMenu .menuHolder .menuRight .searchBox button.searchBTN i{color:#303030} #mainMenu .menuHolder .menuRight .searchBox button.searchBTN:hover i { opacity:0.7 } .mobileMenuAdditions .innerHeader .searchBox button.searchBTN{background-color: #78be20} .mobileMenuAdditions .innerHeader .searchBox button.searchBTN i{color:#303030} .mobileMenuAdditions .innerHeader .searchBox button.searchBTN:hover i { opacity:0.7 }