#procurement, .jumpLink { scroll-margin-top: 90px; /* Set this to your fixed header height */ } .visuallyhidden, hr { border: 0; padding: 0; } body, html { height: 100%; overscroll-behavior: none; } #wrapper, .visuallyhidden, html.showing-mega-menu body, svg:not(:root) { overflow: hidden; } pre, textarea { overflow: auto; } #wrapper, .mm-page, body { min-height: 100%; width: 100%; } .visuallyhidden { margin: -1px; width: 1px; height: 1px; clip: rect(0 0 0 0); clip: rect(0); position: absolute; } #associates #ticker div:before, #campusLocations .accordion, #events-testimonials.page:before, #pageContent .flex .sidebar .sectionBranding img.mobile, #pageContent .flex.landing .landing-left .sectionBranding, #pageContent .quickLinks.courseListing .link a:after, #pageContent .relatedCareers img.mob, #pageContent .relatedCareers img.tab, #pageContent .studentWork img.mobile, #pageHolder #pageContent .breadcrumb.mob, #pageHolder #pageContent .relatedEvents, #pageHolder #pageContent .sitemap li:before, #pageHolder .breadcrumb a:first-child:before, #pageHolder aside#sidebar ul li.has-sub ul, #searchContainer .advancedFilterToggle .toClose, #searchContainer .advancedFilterToggle.open .toOpen, #slider button#play, #welcome .holder .heritage, #welcome .linkBlocks .accordionTitle, .owl-dots.disabled, .owl-nav.disabled, [hidden], body.apprenticeships #pageHolder:before, body.courseSearch #events-testimonials:before, body.courseSearch #pageHolder #searchContainer .filterWrapper .filterGroup .filterName:after, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .filterGroup .filterName:after, body.error-404 #pageHolder:before, body.page.sector-page #pageHolder #pageContent.fullWidth aside#sidebar .sectionBranding img.mobile, body.school-leaver.landing #events-testimonials:before, nav#mainMenu .flex-holder a.searchBTN.mob, nav#mainMenu .megaMenu ul li a:after, nav#mainMenu .megaMenu ul li ul.subSub a.viewAll:before, nav#mainMenu .megaMenu ul li ul.subSub li.subSub-title a:before, nav#mainMenu .megaMenu ul.normal li.subSub-title a:before, nav#mainMenu .megaMenu ul:after, nav#mainMenu .megaMenu ul:before, nav[role="mobileMenu"], template { display: none; } .indent { text-indent: -999em; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; border-top: 1px solid #ccc; margin: 1em 0; box-sizing: content-box; height: 0; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } textarea { resize: vertical; } .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } body { line-height: 1; font-family: niveau-grotesk, sans-serif; background: #fff; color: #000; margin: 0; } .hidden, nav#mainMenu .flex-holder a.applyNow:after { 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 { *, :after, :before { background: 0 0 !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: ""; } .contactBlock, blockquote, pre { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } img, tr { page-break-inside: avoid; } img { max-width: 100% !important; } h2, h3, p { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } } #pageHolder #pageContent .tabs button.current, a, nav#mainMenu .megaMenu ul li ul.subSub a.viewAll:hover { text-decoration: none; } img, legend { border: 0; } #accordion.mainDetail.large, #advert .advertInfo a.readMore, #campusLocations .accordion .accordionTitle, #campusLocations .campus, #campusLocations .campus .campusInfo a.readMore:hover, #campusLocations .campus .campusInfo:before, #courseGuide a.viewAll, #events-testimonials .content .eventDate.has-two-dates:before, #events-testimonials .eventsCarousel .event .content, #events-testimonials .eventsCarousel .event .content:before, #events-testimonials .eventsCarousel .event a:hover .content .eventDate, #events-testimonials .testimonialsCarousel .owl-dots button.active, #latestNews .newsHolder .item .content, #latestNews .newsHolder .item a:hover .content .lowerNewsItem .readMore, #latestNews a.seeAll:hover, #pageContent #showcase.in-page.owl-carousel .owl-dots button, #pageContent .courseListing .courseList .course, #pageContent .courseListing .courseList.owl-carousel .owl-dots button, #pageContent .flex .sidebar .courseDetails a.applyNow, #pageContent .flex .sidebar .courseDetails:after, #pageContent .flex .sidebar a.apply:after, #pageContent .flex.landing .landing-right .carousel .owl-dots button, #pageContent .linkBlocks .block .content .readMore, #pageContent .linkBlocks .owl-dots button, #pageContent .quickLinks.courseListing.owl-carousel .owl-dots button, #pageContent .sectorQuickLinks .link .info .readMore, #pageContent .sectorQuickLinks .link a:hover .info .readMore, #pageContent .sectorQuickLinks.owl-carousel .owl-dots button, #pageHolder #pageContent .eventHolder .event .content, #pageHolder #pageContent .eventHolder .event .content .eventDate.has-two-dates:before, #pageHolder #pageContent .eventHolder .event .content:before, #pageHolder #pageContent .eventHolder .event a:hover .content .eventDate, #pageHolder #pageContent .eventInformation a.register:hover, #pageHolder #pageContent .newsHolder .item .content, #pageHolder #pageContent .relatedEvents .event .content:before, #pageHolder #pageContent .tab-content .pageList .page .content a.readMore, #pageHolder #pageContent a.backHome:hover, #pageHolder .relatedEvents .event .content, #pageHolder .relatedEvents .event .content .eventDate.has-two-dates:before, #pageHolder aside#sidebar .relatedEvents .event .content:before, #pageHolder aside#sidebar .relatedNews .item .content, #pageHolder aside#sidebar .relatedNews .item a:hover .content .readMore, #pageHolder aside#sidebar nav#sideMenu:after, #searchContainer .filterWrapper #search-button2:hover, #searchContainer .filterWrapper #search-button:hover, #searchContainer .filterWrapper .filterGroup .skewBG, #searchContainer .filterWrapper .search, #showcase .owl-dots button.active, #showcase .owl-nav button, #showcase .showcaseInfo a.readMore, #slider .searchBlock .searchElement #suggestion-list, #slider .slick-dots li.slick-active button, #slider .sliderImages button.slick-next:hover, #slider .sliderImages button.slick-prev:hover, #slider .sliderText .slide .bannerText a.readMore, #slider button.custom-slick-next:hover, #slider button.custom-slick-prev:hover, #welcome .linkBlocks .block .content .readMore, .fullWidth.alignCenter button.more:hover, .searchBox, body.courseSearch #pageHolder #searchContainer .filterWrapper, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search .unskew:before, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.qualification .filterName:before, body.fixedHeader header#masthead, body.pre-16.landing #pageContent .sectorQuickLinks .link .info .readMore, body.school-leaver #pageContent .sectorQuickLinks.standard .link .info .readMore, nav#mainMenu .flex-holder ul, nav#mainMenu .flex-holder ul:after, nav#mainMenu .flex-holder ul:before, nav#mainMenu .megaMenu .menuSidebar a.apply, nav#mainMenu .megaMenu ul li ul.subSub a.viewAll { background-color: #fff; color: #001f5f; } #slider .sliderImages button.slick-next, #slider .sliderImages button.slick-prev, #slider button.custom-slick-next, #slider button.custom-slick-prev { background-color: rgba(255, 255, 255, 0.4); } #campusLocations, #campusLocations .campus .campusInfo a.readMore, #events-testimonials .eventsCarousel .event .content .eventDate, #events-testimonials .owl-nav button, #events-testimonials a.seeAll, #events-testimonials.in-page .testimonialsCarousel .owl-dots button.active, #events-testimonials.in-page .testimonialsCarousel .owl-nav button, #latestNews .newsHolder .item .content .lowerNewsItem .readMore, #latestNews .owl-nav-top button, #latestNews a.seeAll, #pageContent #showcase.in-page.owl-carousel .owl-dots button.active, #pageContent #showcase.in-page.owl-carousel .owl-nav button, #pageContent .courseListing .courseList .course .buttons a, #pageContent .courseListing .courseList.owl-carousel .owl-dots button.active, #pageContent .courseListing .courseList.owl-carousel .owl-nav button, #pageContent .flex .sidebar .courseDetails a.applyNow:hover, #pageContent .flex .sidebar .searchElement .search-container #search-button, #pageContent .flex .sidebar .searchElement .search-container #search-button2, #pageContent .flex .sidebar a.apply, #pageContent .flex .sidebar a.apply:before, #pageContent .flex.landing .landing-right .carousel .owl-dots button.active, #pageContent .linkBlocks .owl-dots button.active, #pageContent .linkBlocks .owl-nav button, #pageContent .quickLinks.courseListing.owl-carousel .owl-dots button.active, #pageContent .quickLinks.courseListing.owl-carousel .owl-nav button, #pageContent .sectorQuickLinks .link .info:before, #pageContent .sectorQuickLinks.owl-carousel .owl-dots button.active, #pageContent .sectorQuickLinks.owl-carousel .owl-nav button, #pageContent .sectorQuickLinks.row-three .link .info, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button2, #pageHolder #pageContent .eventHolder .event .content .eventDate, #pageHolder #pageContent .eventInformation a.register, #pageHolder #pageContent .filterWrapper .filterItems, #pageHolder #pageContent .newsHolder .item .content .readMore, #pageHolder #pageContent .relatedEvents .event .content .eventDate, #pageHolder #pageContent .relatedNews .item .content .readMore, #pageHolder #pageContent .relatedNews .owl-nav button, #pageHolder #pageContent .tabs .tab-item.current .skewBG, #pageHolder #pageContent a.backHome, #pageHolder #singleSearchContainer #search-button, #pageHolder #singleSearchContainer #search-button2, #pageHolder .quickLinks a, #pageHolder .relatedEvents .owl-nav button, #pageHolder aside#sidebar .relatedEvents .event .content .eventDate, #pageHolder aside#sidebar .relatedNews .item .content .readMore, #pageHolder aside#sidebar .relatedNews .owl-nav button, #pageHolder aside#sidebar .searchElement .search-container #search-button, #pageHolder aside#sidebar .searchElement .search-container #search-button2, #pageHolder aside#sidebar nav#sideMenu, #searchContainer .filterWrapper #search-button, #searchContainer .filterWrapper #search-button2, #searchContainer .filterWrapper .filterItems, #showcase .owl-nav.adult-red button:hover, #showcase .owl-nav.apprenticeship-blue button:hover, #showcase .owl-nav.iot-blue button:hover, #showcase .owl-nav.sixth-form-green button:hover, #showcase .owl-nav.technical-orange button:hover, #showcase .owl-nav.university-green button:hover, #slider .searchBlock .searchElement .search-container #search-button, #slider .searchBlock .searchElement .search-container #search-button2, #slider .sliderText .slide .bannerText .clippy, #slider .sliderText .slide .bannerText:before, #welcome .linkBlocks .accordionTitle.blue, #welcome .linkBlocks .block.blue .content, #welcome .linkBlocks .block.blue .content:before, .fullWidth.alignCenter button.more, a.mobileMenuBTN #navIcon span, body.coursePage #pageHolder #pageContent .overflowHolder a.apply:after, body.coursePage #pageHolder #pageContent a.apply, body.coursePage #pageHolder #pageContent a.apply:before, body.courseSearch #pageHolder #searchContainer .buttons a:hover, footer#siteFooter, nav#mainMenu .megaMenu, nav#mainMenu .megaMenu:after, nav#mainMenu .megaMenu:before, nav#mainMenu ul li a:after { background-color: #001f5f; } #slider .sliderText .slide.withVideo .bannerText .clippy, #slider .sliderText .slide.withVideo .bannerText:before { background-color: rgba(0, 31, 95, 0.7); } #events-testimonials .testimonialsCarousel .owl-nav button:hover{background-color:#00829b} #welcome .linkBlocks .accordionTitle.purple, #welcome .linkBlocks .block.purple .content, #welcome .linkBlocks .block.purple .content:before { background-color: #592b8a; } #events-testimonials .eventsCarousel .event a:hover .content, #events-testimonials .eventsCarousel .event a:hover .content:before, #events-testimonials .owl-nav button:hover, #events-testimonials.in-page .testimonialsCarousel .owl-nav button:hover, #latestNews .owl-nav-top button:hover, #pageContent #showcase.in-page.owl-carousel .owl-nav button:hover, #pageContent .courseListing .courseList.owl-carousel .owl-nav button:hover, #pageContent .flex .sidebar .searchElement, #pageContent .flex .sidebar .searchElement:before, #pageContent .linkBlocks .owl-nav button:hover, #pageContent .quickLinks.courseListing.owl-carousel .owl-nav button:hover, #pageContent .sectorQuickLinks.owl-carousel .owl-nav button:hover, #pageHolder #pageContent #mobile-search .searchElement, #pageHolder #pageContent .breadcrumb a:before, #pageHolder #pageContent .eventHolder .event a:hover .content, #pageHolder #pageContent .eventHolder .event a:hover .content:before, #pageHolder #singleSearchContainer #search-button2:hover, #pageHolder #singleSearchContainer #search-button:hover, #pageHolder .breadcrumb a:before, #pageHolder .relatedEvents .owl-nav button:hover, #pageHolder aside#sidebar .relatedNews .owl-nav button:hover, #pageHolder aside#sidebar .searchElement, #pageHolder aside#sidebar .searchElement:before, #searchContainer .filterWrapper, #searchContainer .filterWrapper .filterGroup:before, #searchContainer .filterWrapper .search .unskew:before, #searchContainer .overflow:before, #showcase .owl-nav button:hover, #slider .searchBlock .searchElement .search-container #search-button2:hover, #slider .searchBlock .searchElement .search-container #search-button:hover, #socials, body.courseSearch #pageHolder #searchContainer .buttons a, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet #search-button2:hover, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet #search-button:hover, nav#mainMenu .megaMenu .menuSidebar a.open-days, nav#mainMenu .megaMenu .searchElement .search-container #search-button, nav#mainMenu .megaMenu .searchElement .search-container #search-button2, nav#mainMenu a.applyNow { background-color: #00829b; } #advert.sixth-form-green, #pageContent .courseListing .courseList .course.sixth-form-green .buttons a, #pageContent .flex.landing .landing-right .quickLinks.courseListing .link.sixth-form-green a, #slider .searchBlock.sixth-form-green .searchElement .search-container #search-button, #slider .searchBlock.sixth-form-green .searchElement .search-container #search-button2, #slider .sliderText .slide.sixth-form-green .bannerText .clippy, #slider .sliderText .slide.sixth-form-green .bannerText:before, #welcome .linkBlocks .accordionTitle.green, #welcome .linkBlocks .accordionTitle.sixth-form-green, #welcome .linkBlocks .block.green .content, #welcome .linkBlocks .block.green .content:before, #welcome .linkBlocks .block.sixth-form-green .content, #welcome .linkBlocks .block.sixth-form-green .content:before, .mm-listview li.sixth-form-green, body.landing #pageContent .sectorQuickLinks .link.sixth-form-green .info, body.landing #pageContent .sectorQuickLinks .link.sixth-form-green .info:before, body.sixth-form #pageContent .courseListing .courseList .course .buttons a, body.sixth-form #pageContent .flex .sidebar .courseDetails, body.sixth-form #pageContent .linkBlocks .block .content, body.sixth-form #pageContent .linkBlocks .block .content:before, body.sixth-form #pageContent .sectorQuickLinks .link .info, body.sixth-form #pageContent .sectorQuickLinks .link .info:before, body.sixth-form #pageContent .subjectArea.fullWidth .subjectList .subject, body.sixth-form #pageHolder .quickLinks.courseListing a, body.sixth-form #pageHolder aside#sidebar .collapse, body.sixth-form #pageHolder aside#sidebar .collapse:after, body.sixth-form #pageHolder aside#sidebar .sectionHeader, body.sixth-form #pageHolder aside#sidebar nav#sideMenu, body.sixth-form #searchContainer .filterWrapper, body.sixth-form #searchContainer .filterWrapper .filterGroup:before, body.sixth-form #searchContainer .filterWrapper .search .unskew:before, body.sixth-form #searchContainer .overflow:before, body.sixth-form .subjectArea .subjectList .subject a .overlay, nav#mainMenu .megaMenu ul li.sixth-form-green ul.subSub, nav#mainMenu .megaMenu ul li.sixth-form-green ul.subSub:after, nav#mainMenu .megaMenu ul li.sixth-form-green.open > a, nav#mainMenu .megaMenu ul li.sixth-form-green:hover > a, nav#mainMenu .megaMenu ul li.sixth-form-green > a:hover { background-color: #076b3b; } #events-testimonials .testimonialsCarousel .owl-nav button{ background-color: #001f5f} #pageContent .flex .sidebar .searchElement .search-container #search-button2:hover, #pageContent .flex .sidebar .searchElement .search-container #search-button:hover, #pageHolder aside#sidebar .searchElement .search-container #search-button2:hover, #pageHolder aside#sidebar .searchElement .search-container #search-button:hover, nav#mainMenu .megaMenu .searchElement .search-container #search-button2:hover, nav#mainMenu .megaMenu .searchElement .search-container #search-button:hover { background-color: #b0138e; } #accordion.mainDetail .nested-accordion .accordion-title, #pageHolder #pageContent .filterWrapper .filterGroup, #pageHolder #pageContent .tabs .tab-item .skewBG, #pageHolder #singleSearchContainer .search, body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup .skewBG, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup .skewBG { background-color: #f2f2f2; } #advert .advertInfo a.readMore:hover, #courseGuide a.viewAll:hover, #events-testimonials .testimonialsCarousel .owl-dots button, #events-testimonials a.seeAll:hover, #pageContent .linkBlocks .block a:hover .content .readMore, #pageContent .sectorQuickLinks .link a:hover .info .readMore, #pageContent .sectorQuickLinks .link.adult-red a:hover .info .readMore, #pageContent .sectorQuickLinks .link.apprenticeship-blue a:hover .info .readMore, #pageContent .sectorQuickLinks .link.iot-blue a:hover .info .readMore, #pageContent .sectorQuickLinks .link.sixth-form-green a:hover .info .readMore, #pageContent .sectorQuickLinks .link.technical-orange a:hover .info .readMore, #pageContent .sectorQuickLinks .link.university-green a:hover .info .readMore, #pageHolder #pageContent .newsHolder .item a:hover .content .readMore, #pageHolder #pageContent .tab-content .pageList .page .content a.readMore:hover, #showcase .carouselItem .showcaseInfo a.readMore:hover, #showcase .owl-dots button, #showcase .showcaseInfo a.readMore:hover, #slider #pausePlay button, #slider .slick-dots button, #slider .sliderText .slide .bannerText a.readMore:hover, #welcome .linkBlocks .block a:hover .content .readMore, a, body.courseListing #pageContent .courseListing .courseList .course .buttons a:hover, body.coursePage #pageContent .courseListing .courseList .course .buttons a:hover, body.courseSearch #pageHolder #searchContainer .filterWrapper .filterGroup, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .filterGroup, body.pre-16.landing #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.school-leaver #pageContent .sectorQuickLinks.standard .link a:hover .info .readMore, nav#mainMenu .megaMenu button.close-button, nav#mainMenu .megaMenu ul li ul.subSub a.viewAll:hover { background-color: transparent; } #advert .advertInfo, #advert .advertInfo a.readMore:hover, #campusLocations .campus .campusInfo a.readMore, #courseGuide .title, #courseGuide a.viewAll:hover, #events-testimonials .eventsCarousel .event .content .eventDate, #events-testimonials .eventsCarousel .event a:hover .content, #events-testimonials .eventsCarousel .event a:hover .content .eventTime, #events-testimonials .owl-nav button, #events-testimonials a.seeAll, #latestNews .newsHolder .item .content .lowerNewsItem .readMore, #latestNews .owl-nav-top button, #latestNews a.seeAll, #pageContent #showcase.in-page.owl-carousel .owl-nav button, #pageContent .courseListing .courseList .course .buttons a, #pageContent .courseListing .courseList .course a.triangleLink, #pageContent .courseListing .courseList.owl-carousel .owl-nav button, #pageContent .flex .sidebar .courseDetails, #pageContent .flex .sidebar .searchElement .search-container #search-button, #pageContent .flex .sidebar .searchElement .search-container #search-button2, #pageContent .flex .sidebar .searchElement .title, #pageContent .flex .sidebar a.apply, #pageContent .flex.landing .landing-right .carousel .video i, #pageContent .linkBlocks .block .content, #pageContent .linkBlocks .block a:hover .content .readMore, #pageContent .linkBlocks .owl-nav button, #pageContent .quickLinks.courseListing .link .content, #pageContent .quickLinks.courseListing .link i, #pageContent .quickLinks.courseListing.owl-carousel .owl-nav button, #pageContent .sectorQuickLinks .link .info, #pageContent .sectorQuickLinks.owl-carousel .owl-nav button, #pageContent .subjectArea .subjectList .subject a, #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button2, #pageHolder #pageContent #mobile-search .searchElement .title, #pageHolder #pageContent .contactBlock, #pageHolder #pageContent .eventHolder .event .content .eventDate, #pageHolder #pageContent .eventHolder .event a:hover .content, #pageHolder #pageContent .eventHolder .event a:hover .content .eventTime, #pageHolder #pageContent .eventInformation a.register, #pageHolder #pageContent .filterWrapper .filterItems .filterItem, #pageHolder #pageContent .newsHolder .item .content .readMore, #pageHolder #pageContent .relatedEvents .event .content .eventDate, #pageHolder #pageContent .relatedNews .item .content .readMore, #pageHolder #pageContent .relatedNews .owl-nav button, #pageHolder #pageContent .tab-content .pageList .page .content, #pageHolder #pageContent .tab-content .pageList .page .content a.readMore:hover, #pageHolder #pageContent .tabs .tab-item.current button, #pageHolder #pageContent a.backHome, #pageHolder #pageContent blockquote, #pageHolder #singleSearchContainer #search-button, #pageHolder #singleSearchContainer #search-button2, #pageHolder .quickLinks a .title, #pageHolder .quickLinks a:after, #pageHolder .relatedEvents .owl-nav button, #pageHolder aside#sidebar .holder:after, #pageHolder aside#sidebar .relatedEvents .event .content .eventDate, #pageHolder aside#sidebar .relatedNews .item .content .readMore, #pageHolder aside#sidebar .relatedNews .owl-nav button, #pageHolder aside#sidebar .searchElement .search-container #search-button, #pageHolder aside#sidebar .searchElement .search-container #search-button2, #pageHolder aside#sidebar .searchElement .title, #pageHolder aside#sidebar .sectionHeader .sectionTitle, #pageHolder aside#sidebar ul li a, #pageHolder aside#sidebar ul li ul li li a:before, #pageHolder aside#sidebar ul li ul li:before, #searchContainer .advancedFilterToggle, #searchContainer .advancedFilters .advancedTitle, #searchContainer .filterWrapper #search-button, #searchContainer .filterWrapper #search-button2, #searchContainer .filterWrapper .filterItems .filterItem, #searchContainer .searchTitle, #showcase .carouselItem .showcaseInfo a.readMore:hover, #showcase .owl-nav button:hover, #showcase .showcaseInfo, #showcase .showcaseInfo a.readMore:hover, #slider #pausePlay, #slider .searchBlock .searchElement .search-container #search-button, #slider .searchBlock .searchElement .search-container #search-button2, #slider .searchBlock .searchElement .title, #slider .sliderImages button.slick-next, #slider .sliderImages button.slick-prev, #slider .sliderText .slide .bannerText, #slider .sliderText .slide .bannerText a.readMore:hover, #slider button.custom-slick-next, #slider button.custom-slick-prev, #socials, #socials a, #welcome .linkBlocks .accordionTitle, #welcome .linkBlocks .block .content, #welcome .linkBlocks .block a:hover .content span.readMore, .fullWidth.alignCenter button.more, .testimonialsCarousel .student-testimonial .profileInfo, body.coursePage #pageContent .flex .sidebar .courseDetails a.applyNow:hover, body.coursePage #pageHolder #pageContent a.apply, body.courseSearch #pageHolder #searchContainer .buttons a, body.pre-16.landing #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.school-leaver #pageContent .sectorQuickLinks.standard .link a:hover .info .readMore, footer#siteFooter, footer#siteFooter a, nav#mainMenu .megaMenu, nav#mainMenu .megaMenu .menuSidebar a.open-days, nav#mainMenu .megaMenu button.close-button, nav#mainMenu .megaMenu ul li a, nav#mainMenu .megaMenu ul li ul.subSub a.viewAll:hover, nav#mainMenu a.applyNow { color: #fff; } #accordion.mainDetail .accordion-title, #campusLocations .accordion .accordionTitle, #campusLocations .campus .campusInfo, #campusLocations .campus .campusInfo a.readMore:hover, #campusLocations .owl-carousel .owl-nav button, #courseGuide a.viewAll, #events-testimonials .eventsCarousel .event .content, #events-testimonials .sectionTitle, #events-testimonials a.seeAll:hover, #latestNews .newsHolder .item .content .title, #latestNews .newsHolder .item a.share, #latestNews .newsHolder .item a:hover .content .lowerNewsItem .readMore, #latestNews .sectionTitle, #latestNews a.seeAll:hover, #pageContent .courseListing .count, #pageContent .courseListing .courseList .course .buttons a:hover, #pageContent .courseListing .courseList .course .title, #pageContent .courseListing .sectorTitle, #pageContent .partnersStakeholders .sectorTitle, #pageContent .relatedCareers .sectionTitle, #pageContent .studentWork .sectionTitle, #pageContent .subjectArea .flex, #pageHolder #pageContent .breadcrumb a, #pageHolder #pageContent .eventHolder .event .content, #pageHolder #pageContent .eventInformation, #pageHolder #pageContent .eventInformation a.register:hover, #pageHolder #pageContent .filterWrapper .filterGroup .filterName, #pageHolder #pageContent .filterWrapper .filterGroup:after, #pageHolder #pageContent .filterWrapper .sectionName, #pageHolder #pageContent .newsHolder .item .content .title, #pageHolder #pageContent .newsHolder .item a.share, #pageHolder #pageContent .newsHolder .item a:hover .content .readMore, #pageHolder #pageContent .relatedEvents .sectionTitle, #pageHolder #pageContent .relatedNews .item .content .title, #pageHolder #pageContent .relatedNews .item a.share, #pageHolder #pageContent .relatedNews .sectionTitle, #pageHolder #pageContent .sitemap .column.align_right li ul li a.sub-title, #pageHolder #pageContent .sitemap li a, #pageHolder #pageContent .sitemap li ul li ul li a.sub-title, #pageHolder #pageContent .tab-content .pageList .page .content a.readMore, #pageHolder #pageContent .tab-content .tabbedContentTitle, #pageHolder #pageContent .tabs .tab-item button, #pageHolder #pageContent a.backHome:hover, #pageHolder #pageContent h1, #pageHolder #pageContent h2, #pageHolder #pageContent h3, #pageHolder #pageContent h4, #pageHolder #pageContent h5, #pageHolder .breadcrumb a, #pageHolder .relatedEvents .event .content, #pageHolder aside#sidebar .relatedEvents .sectionTitle, #pageHolder aside#sidebar .relatedNews .item .content .title, #pageHolder aside#sidebar .relatedNews .item a.share, #pageHolder aside#sidebar .relatedNews .item a:hover .content .readMore, #pageHolder aside#sidebar .relatedNews .sectionTitle, #searchContainer .filterWrapper .filterGroup .filterName, #searchContainer .filterWrapper .filterGroup:after, #showcase .owl-nav button, #showcase .showcaseInfo a.readMore, #slider .sliderImages button.slick-next:hover, #slider .sliderImages button.slick-prev:hover, #slider .sliderText .slide .bannerText a.readMore, #slider button.custom-slick-next:hover, #slider button.custom-slick-prev:hover, #welcome .linkBlocks .block.blue a .content .readMore, #welcome h1, .fullWidth.alignCenter button.more:hover, .searchBox a.closeBTN, .searchBox button.searchBTN, .share a, .share span, body.courseSearch #pageHolder #pageContent .resultNumber, body.courseSearch #pageHolder #searchContainer .advancedFilters .advancedTitle, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .advancedFilterToggle, body.pre-16.landing #pageContent .sectorQuickLinks .link .info .readMore, body.school-leaver #pageContent .sectorQuickLinks.standard .link .info .readMore, nav#mainMenu .megaMenu .menuSidebar a, nav#mainMenu a.searchBTN, nav#mainMenu ul li a { color: #001f5f; } #advert.sixth-form-green .advertInfo .readMore, #pageContent .courseListing .courseList .course.sixth-form-green .buttons a:hover, #pageContent .courseListing .courseList .course.sixth-form-green .title, #pageContent .sectorQuickLinks .link.sixth-form-green a .info .readMore, #showcase .carouselItem.sixth-form-green .showcaseInfo a.readMore, #showcase .owl-nav.sixth-form-green button, #slider .sliderText .slide.sixth-form-green .bannerText a.readMore, #welcome .linkBlocks .block.green a .content .readMore, #welcome .linkBlocks .block.sixth-form-green a .content .readMore, body.sixth-form #pageContent .courseListing .courseList .course .buttons a:hover, body.sixth-form #pageContent .courseListing .courseList .course .details strong, body.sixth-form #pageContent .courseListing .courseList .course .title, body.sixth-form #pageContent .flex .sidebar .courseDetails a.applyNow, body.sixth-form #pageContent .linkBlocks .block .content .readMore, body.sixth-form #pageContent .sectorQuickLinks .link .info .readMore, body.sixth-form #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.sixth-form #searchContainer .filterWrapper #search-button2:hover, body.sixth-form #searchContainer .filterWrapper #search-button:hover, nav#mainMenu .megaMenu ul li.sixth-form-green ul.subSub a.viewAll { color: #076b3b; } #welcome .linkBlocks .block.purple a .content .readMore { color: #592b8a; } #events-testimonials .eventsCarousel .event .content .eventTime, #events-testimonials .eventsCarousel .event a:hover .content .eventDate, #latestNews .newsHolder .item a.share:hover, #pageHolder #pageContent .eventHolder .event .content .eventTime, #pageHolder #pageContent .eventHolder .event a:hover .content .eventDate, #pageHolder #pageContent .eventInformation .campus a, #pageHolder #pageContent .eventInformation .time, #pageHolder #pageContent .newsHolder .item a.share:hover, #pageHolder #pageContent p a, #pageHolder #pageContent ul li a, #pageHolder .relatedEvents .event .content .eventTime, #pageHolder aside#sidebar .relatedNews .item a.share:hover, .searchBox a.closeBTN:hover, .searchBox button.searchBTN:hover, .share a:hover, nav#mainMenu a.searchBTN:hover { color: #00829b; } #latestNews .newsHolder .item .content, #pageHolder #pageContent .newsHolder .item .content, #pageHolder #pageContent .relatedNews .item a, #pageHolder #pageContent .sitemap .column.align_right li ul li a, #pageHolder #pageContent .sitemap li ul li ul li a, #pageHolder aside#sidebar .relatedNews .item .content, html { color: #000; } #advert .advertInfo a.readMore, #courseGuide a.viewAll, #events-testimonials .testimonialsCarousel .owl-dots button, #pageContent .sectorQuickLinks .link .info .readMore, #pageHolder #pageContent .tab-content .pageList .page .content a.readMore, #showcase .owl-dots button, #showcase .showcaseInfo a.readMore, #slider .slick-dots button, #slider .sliderText .slide .bannerText a.readMore, #welcome .linkBlocks .block a .content .readMore, footer#siteFooter .holder, nav#mainMenu .megaMenu ul li ul.subSub a.viewAll { border-color: #fff; } #accordion.mainDetail, #campusLocations .campus .campusInfo a.readMore, #events-testimonials a.seeAll, #events-testimonials.in-page .testimonialsCarousel .owl-dots button, #latestNews .newsHolder .item .content .lowerNewsItem, #latestNews .newsHolder .item .content .lowerNewsItem .readMore, #latestNews a.seeAll, #pageContent #showcase.in-page.owl-carousel .owl-dots button, #pageContent .courseListing .courseList .course .buttons a, #pageContent .courseListing .courseList.owl-carousel .owl-dots button, #pageContent .flex.landing .landing-right .carousel .owl-dots button, #pageContent .linkBlocks .owl-dots button, #pageContent .quickLinks.courseListing.owl-carousel .owl-dots button, #pageContent .sectorQuickLinks.owl-carousel .owl-dots button, #pageHolder #pageContent .eventInformation a.register, #pageHolder #pageContent .newsHolder .item .content .lowerNewsItem, #pageHolder #pageContent .newsHolder .item .content .readMore, #pageHolder #pageContent .relatedNews .item .content .lowerNewsItem, #pageHolder #pageContent a.backHome, #pageHolder aside#sidebar .relatedNews .item .content .lowerNewsItem, .fullWidth.alignCenter button.more, .searchBox { border-color: #001f5f; } .item a.share, .searchBox a.closeBTN, .searchBox button.searchBTN, .share a, nav#mainMenu a.searchBTN { -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 .owl-nav-top button, #pageContent .flex .sidebar .searchElement .search-container #search-button, #pageContent .flex .sidebar .searchElement .search-container #search-button2, #pageHolder #singleSearchContainer #search-button, #pageHolder #singleSearchContainer #search-button2, #pageHolder aside#sidebar .searchElement .search-container #search-button, #pageHolder aside#sidebar .searchElement .search-container #search-button2, #slider .searchBlock .searchElement .search-container #search-button, #slider .searchBlock .searchElement .search-container #search-button2, body.courseSearch #pageHolder #searchContainer .buttons a, nav#mainMenu .megaMenu .searchElement .search-container #search-button, nav#mainMenu .megaMenu .searchElement .search-container #search-button2 { -webkit-transition: background-color, 0.2s ease-in-out; -moz-transition: background-color, 0.2s ease-in-out; -ms-transition: background-color, 0.2s ease-in-out; -o-transition: background-color, 0.2s ease-in-out; transition: background-color, 0.2s ease-in-out; } #accordion.sidebar div.ui-accordion-content a.applyNow, #events-testimonials .eventsCarousel .event .content, #events-testimonials .eventsCarousel .event .content .eventDate, #events-testimonials .eventsCarousel .event .content .eventTime, #events-testimonials .eventsCarousel .event .content:before, #events-testimonials .eventsCarousel .event .thumbnail img, #latestNews .newsHolder .item .thumbnail img, #pageContent .courseListing .courseList .course a.triangleLink i, #pageContent .flex .sidebar a.apply i, #pageContent .linkBlocks .block .thumbnail img, #pageContent .quickLinks.courseListing .link .image img, #pageContent .quickLinks.courseListing .link i, #pageContent .sectorQuickLinks .link .image img, #pageContent .subjectArea .subjectList .subject .holder .image img, #pageContent .subjectArea .subjectList .subject a .overlay, #pageContent .subjectArea .subjectList .subject a .title, #pageContent .subjectArea .subjectList .subject a i, #pageContent .subjectArea.fullWidth .subjectList .subject a .image img, #pageHolder #pageContent .eventHolder .event .content, #pageHolder #pageContent .eventHolder .event .content .eventDate, #pageHolder #pageContent .eventHolder .event .content .eventTime, #pageHolder #pageContent .eventHolder .event .content:before, #pageHolder #pageContent .eventHolder .event .thumbnail img, #pageHolder #pageContent .newsHolder .item .thumbnail img, #pageHolder .quickLinks a .thumbnail img, #pageHolder .quickLinks a:after, #pageHolder aside#sidebar .relatedEvents .event .thumbnail img, #pageHolder aside#sidebar .relatedNews .item .thumbnail img, #pageHolder aside#sidebar ul li a, #searchContainer .filterWrapper #search-button, #searchContainer .filterWrapper #search-button2, #slider #pausePlay, #slider .sliderImages button, #slider .sliderText .slide .bannerText a.readMore, #slider button, #welcome .linkBlocks .block .content .readMore, #welcome .linkBlocks .block .thumbnail img, .fullWidth.alignCenter button.more, .owl-nav button, a.accessible, a.mobileMenuBTN #navIcon span, a.readMore, header#masthead, header#masthead .logoHolder, header#masthead .logoHolder a, nav#mainMenu, nav#mainMenu .megaMenu .menuSidebar .thumbnail img, nav#mainMenu .megaMenu .menuSidebar a:after, nav#mainMenu .megaMenu ul li a, nav#mainMenu .megaMenu ul li a:before, nav#mainMenu ul li a:after, span.readMore { -webkit-transition: 0.2s; -moz-transition: 0.2s; -ms-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; } html { font-size: 16px; webkit-font-smoothing: antialiased; font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; box-sizing: border-box; } *, :after, :before { box-sizing: inherit; } #events-testimonials .testimonialsCarousel .student-testimonial, #searchContainer .advancedFilterToggle .toOpen, #searchContainer .advancedFilterToggle.open .toClose, #slider .sliderText .slide .bannerText .subtitle span, article, aside, body.courseSearch #pageHolder #searchContainer .buttons a span, body.courseSearch #pageHolder #singleSearchContainer .buttons a span, details, figcaption, figure, footer, header, hgroup, main, menu, nav, nav#mainMenu .megaMenu:hover, section, summary { display: block; } nav#mainMenu, nav#mainMenu .megaMenu ul li.open ul.subSub, nav#mainMenu .megaMenu ul li:hover ul.subSub { display: flex; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } #searchContainer .filterWrapper .search input:focus, a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } #accordion.mainDetail .accordion-title, #accordion.sidebar .accordion-title, #advert .advertInfo .advertTitle, #campusLocations .accordion .accordionTitle, #campusLocations .campus .campusInfo .name, #courseGuide .title, #events-testimonials .eventsCarousel .event .content .eventDate, #events-testimonials .eventsCarousel .event .content .eventSubTitle, #events-testimonials .eventsCarousel .event .content .eventTime, #latestNews .newsHolder .item .content .date, #latestNews .newsHolder .item .content .title, #pageContent .courseListing .count, #pageContent .courseListing .courseList .course .title, #pageContent .courseListing .sectorTitle, #pageContent .flex .sidebar .courseDetails a.applyNow, #pageContent .flex .sidebar .searchElement .title, #pageContent .flex .sidebar a.apply, #pageContent .linkBlocks .block .content .title, #pageContent .partnersStakeholders .sectorTitle, #pageContent .sectorQuickLinks .link .info .title, #pageContent .subjectArea .flex, #pageContent .subjectArea .subjectList .subject a .title, #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content .title, #pageHolder #pageContent #mobile-search .searchElement .title, #pageHolder #pageContent .eventHolder .event .content, #pageHolder #pageContent .eventInformation, #pageHolder #pageContent .filterWrapper .filterGroup .filterName, #pageHolder #pageContent .filterWrapper .sectionName, #pageHolder #pageContent .newsHolder .item .content .date, #pageHolder #pageContent .newsHolder .item .content .title, #pageHolder #pageContent .relatedNews .item .content .date, #pageHolder #pageContent .relatedNews .item .content .title, #pageHolder #pageContent .sitemap .column.align_right li ul li a.sub-title, #pageHolder #pageContent .sitemap li a, #pageHolder #pageContent .sitemap li ul li ul li a.sub-title, #pageHolder #pageContent .tab-content .pageList .page .content .title, #pageHolder #pageContent .tab-content .tabbedContentTitle, #pageHolder #pageContent .tabs .tab-item button, #pageHolder #pageContent blockquote cite, #pageHolder #pageContent h1, #pageHolder #pageContent h2, #pageHolder #pageContent h3, #pageHolder #pageContent h4, #pageHolder #pageContent h5, #pageHolder #singleSearchContainer .search input, #pageHolder .quickLinks a .title, #pageHolder .relatedEvents .event .content .eventDate, #pageHolder .relatedEvents .event .content .eventSubTitle, #pageHolder .relatedEvents .event .content .eventTime, #pageHolder aside#sidebar .relatedNews .item .content .date, #pageHolder aside#sidebar .relatedNews .item .content .title, #pageHolder aside#sidebar .relatedNews .sectionTitle, #pageHolder aside#sidebar .searchElement .title, #pageHolder aside#sidebar ul li a, #searchContainer .advancedFilters .advancedTitle, #searchContainer .filterWrapper .filterGroup .filterName, #searchContainer .filterWrapper .search input, #searchContainer .searchTitle, #showcase .showcaseInfo .date, #showcase .showcaseInfo .title, #slider .searchBlock .searchElement .title, #slider .sliderText .slide .bannerText .title, #socials .title, #welcome .linkBlocks .accordionTitle, #welcome .linkBlocks .block .content .title, .fullWidth.alignCenter button.more, .sectionTitle, .share span, .testimonialsCarousel .student-testimonial .profileInfo .course, .testimonialsCarousel .student-testimonial .profileInfo .name, a.readMore, b, body.coursePage #pageHolder #pageContent a.apply, body.courseSearch #pageHolder #pageContent .resultNumber, body.courseSearch #pageHolder #searchContainer .buttons a, footer#siteFooter .topFooter .column a, nav#mainMenu .flex-holder a.applyNow, nav#mainMenu .megaMenu .menuSidebar a, nav#mainMenu .megaMenu .searchBlock .searchElement .title, nav#mainMenu .megaMenu ul li a, nav#mainMenu .megaMenu ul li ul.subSub a.viewAll, nav#mainMenu .megaMenu ul li ul.subSub li.subSub-title, nav#mainMenu .megaMenu ul li ul.subSub li.subSub-title a, nav#mainMenu .megaMenu ul.normal li.subSub-title, nav#mainMenu .megaMenu ul.normal li.subSub-title a, optgroup, span.articleDate, span.readMore, strong { font-weight: 700; } 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; } figure { margin: 1em 40px; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } #slider .slick-list, button { overflow: visible; } #pageHolder #pageContent .extraContent h2, 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 silver; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } #events-testimonials .eventsCarousel .event .content .eventDate.has-two-dates span span, #pageHolder #pageContent .eventHolder .event .content .eventDate.has-two-dates span span, #pageHolder #pageContent .relatedEvents .event .content .eventDate.has-two-dates span span, #pageHolder aside#sidebar .relatedEvents .event .content .eventDate.has-two-dates span span, legend, nav#mainMenu .megaMenu ul li ul.subSub li, nav#mainMenu .megaMenu ul li ul.subSub li.subSub-title a, td, th { padding: 0; } table { border-collapse: collapse; border-spacing: 0; } #wrapper, .mm-page { height: auto !important; margin: 0 auto; position: relative; top: 0; padding: 0; } #slider, #slider .container { height: 100vh; min-height: 53.125rem; } .container { padding: 0 5%; position: relative; } @media all and (min-width: 1400px) and (max-width: 1650px) { header#masthead .container { max-width: none; } } @media (min-width: 1650px) { .container.wide { max-width: 103.125rem; } } h2, h3, h4, h5 { margin: 0.3125rem 0 0.5rem; padding-top: 0; line-height: 1.2; } #pageHolder aside#sidebar ul li a:before, #pageHolder aside#sidebar ul li ul li:before, nav#mainMenu .megaMenu ul li a:before { font-size: 0.75rem; } #pageContent .flex .sidebar .searchElement .search-container input, #pageHolder #pageContent .filterWrapper .filterGroup:after, #pageHolder aside#sidebar .searchElement .search-container input, #searchContainer .filterWrapper .filterGroup:after { font-size: 0.875rem; } #accordion.sidebar .accordion-title:after, #campusLocations .campus .campusInfo a.readMore, #pageContent .flex .sidebar .courseDetails a.applyNow i, #pageContent .subjectArea.fullWidth .subjectList .subject a .content, #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content a, #pageHolder #pageContent .eventInformation .campus a, #pageHolder #pageContent .eventInformation a.register, #pageHolder #pageContent .filterWrapper, #pageHolder #pageContent .sitemap .column.align_right li ul li a, #pageHolder #pageContent .sitemap li ul li ul li a, #pageHolder aside#sidebar ul li ul li a, #showcase.in-page .showcaseInfo .subTitle, #welcome .linkBlocks .block .content, body, nav#mainMenu .megaMenu ul li ul.subSub a.viewAll { font-size: 1rem; } #latestNews .newsHolder .item a.share, #pageHolder .relatedEvents .event .content .eventName, #pageHolder aside#sidebar .relatedNews .item a.share, #pageHolder aside#sidebar .sectionHeader .sectionTitle i, #welcome, nav#mainMenu .megaMenu ul li ul.subSub li, nav#mainMenu ul li a { font-size: 1.125rem; } #accordion.mainDetail.large .nested-accordion .accordion-title, #accordion.sidebar .accordion-title, #campusLocations .campus .campusInfo, #events-testimonials .eventsCarousel .event .content .eventName, #latestNews .newsHolder .item .content .title, #pageContent .courseListing .count, #pageContent .flex .sidebar .courseDetails a.applyNow, #pageContent .flex .sidebar .searchElement .search-container #search-button, #pageContent .flex .sidebar .searchElement .search-container #search-button2, #pageContent .quickLinks.courseListing .link i, #pageContent .subjectArea .count, #pageContent .subjectArea .subjectList .subject a, #pageContent .subjectArea.fullWidth .subjectList .subject a .content i, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button2, #pageHolder #pageContent #mobile-search .searchElement .title, #pageHolder #pageContent .eventHolder .event .content .eventName, #pageHolder #pageContent .eventInformation, #pageHolder #pageContent .newsHolder .item .content .title, #pageHolder #pageContent .relatedNews .item .content .title, #pageHolder #pageContent .sitemap .column.align_right li ul li a.sub-title, #pageHolder #pageContent .sitemap li ul li ul li a.sub-title, #pageHolder #pageContent blockquote cite, #pageHolder #pageContent h5, #pageHolder .quickLinks a:after, #pageHolder aside#sidebar .relatedNews .item .content .title, #pageHolder aside#sidebar .search-container #search-button, #pageHolder aside#sidebar ul li a, #searchContainer .advancedFilters .advancedTitle, #searchContainer .filterWrapper #search-button, #searchContainer .filterWrapper #search-button2, #showcase .showcaseInfo .time, #slider .searchBlock .searchElement .search-container input, #slider .sliderText .slide .bannerText .subtitle, #socials, .mm-searchfield__input .searchButton, .owl-nav button, .searchBox button.searchBTN, .testimonialsCarousel .student-testimonial .profileInfo .course, ageHolder aside#sidebar .search-container #search-button2, body.courseSearch #pageHolder #pageContent .resultNumber, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .advancedFilterToggle, footer#siteFooter .topFooter .column a, nav#mainMenu .megaMenu .menuSidebar a:after, nav#mainMenu .megaMenu .searchElement .search-container input, nav#mainMenu a.searchBTN { font-size: 1.25rem; } #accordion.mainDetail .accordion-title:after, #pageContent .flex .sidebar a.apply i, .share a, body.coursePage #pageHolder #pageContent a.apply i { font-size: 1.375rem; } #accordion.mainDetail .accordion-title, #campusLocations .campus .campusInfo .name, #pageContent .courseListing .courseList .course .title, #pageContent .courseListing .courseList .course a.triangleLink i, #pageContent .flex .sidebar .searchElement .title, #pageContent .flex .sidebar a.apply, #pageContent .linkBlocks .block .content .title, #pageContent .sectorQuickLinks.row-three .link .info .title, #pageHolder #pageContent .contactBlock, #pageHolder #pageContent .sitemap li ul li a, #pageHolder #pageContent blockquote, #pageHolder #pageContent h4, #pageHolder #singleSearchContainer #search-button, #pageHolder #singleSearchContainer #search-button2, #pageHolder aside#sidebar .searchElement .title, #searchContainer .searchTitle, #slider .searchBlock .searchElement .search-container #search-button, #slider .searchBlock .searchElement .search-container #search-button2, #welcome .linkBlocks .block .content .title, .testimonialsCarousel .student-testimonial .profileInfo .quote, body.coursePage #pageHolder #pageContent a.apply, nav#mainMenu .megaMenu button.close-button, nav#mainMenu .searchElement .search-container #search-button, nav#mainMenu .searchElement .search-container #search-button2 { font-size: 1.5625rem; } #pageContent .flex .sidebar .courseDetails .sectionTitle, #pageContent .sectorQuickLinks .link .info .title, #pageContent .subjectArea.fullWidth .subjectList .subject a .content .title, #pageHolder #pageContent .eventInformation .date, #pageHolder #pageContent .relatedEvents .sectionTitle, #pageHolder #pageContent .relatedNews .sectionTitle, #pageHolder #pageContent .sitemap li a, #pageHolder #pageContent .tab-content .pageList .page .content .title, #pageHolder #pageContent h3, #pageHolder .quickLinks a .title, #pageHolder aside#sidebar .relatedEvents .sectionTitle, #pageHolder aside#sidebar .relatedNews .sectionTitle, #pageHolder aside#sidebar .sectionHeader .sectionTitle, #showcase .showcaseInfo .date, #showcase .showcaseInfo .subTitle, #showcase.in-page .showcaseInfo .title, #slider #pausePlay, #slider .searchBlock .searchElement .title, #socials .title, .share span, .testimonialsCarousel .student-testimonial .profileInfo .name, nav#mainMenu .megaMenu .menuSidebar a, nav#mainMenu .megaMenu .searchBlock .searchElement .title { font-size: 1.875rem; } #pageHolder .relatedEvents .event .content .eventDate span span { font-size: 2.1875rem; } #accordion.mainDetail.large .accordion-title, #courseGuide .title, #events-testimonials .eventsCarousel .event .content .eventDate span span, #pageContent .courseListing .sectorTitle, #pageContent .partnersStakeholders .sectorTitle, #pageContent .relatedCareers .sectionTitle, #pageContent .studentWork .sectionTitle, #pageContent .subjectArea .sectorTitle, #pageHolder #pageContent .eventHolder .event .content .eventDate span span, #pageHolder #pageContent .tab-content .tabbedContentTitle, #pageHolder #pageContent h2 { font-size: 2.5rem; } #advert .advertInfo .advertTitle, #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content .title, #pageHolder #pageContent h1, #welcome h1, .sectionTitle { font-size: 3.125rem; } #pageContent .flex.landing .landing-right .carousel .video i, #pageHolder .relatedEvents .event .content .eventDate span { font-size: 4rem; } #events-testimonials .eventsCarousel .event .content .eventDate span, #pageHolder #pageContent .eventHolder .event .content .eventDate span, #showcase .showcaseInfo .title, #slider .sliderText .slide .bannerText .title { font-size: 5rem; } #pageHolder #pageContent .eventHolder .event .content .eventName, #pageHolder #pageContent .eventInformation .campus a, #pageHolder #pageContent .sitemap .column.align_right li ul li a, #pageHolder #pageContent .sitemap li ul li ul li a, #pageHolder aside#sidebar ul li ul li a, nav#mainMenu .megaMenu ul li ul li a { font-weight: 400; } #pageHolder #pageContent .breadcrumb a, #pageHolder .breadcrumb a, nav#mainMenu ul li a { font-weight: 500; } @media (max-width: 767px) { #slider .searchBlock { background-color: #001f5f; } #slider .searchBlock .searchElement .search-container #search-button, #slider .searchBlock .searchElement .search-container #search-button2 { background-color: #00829b; } #pageHolder #pageContent .eventInformation a.register, #pageHolder #pageContent .sitemap li ul li ul li a, #pageHolder #pageContent .sitemap li ul li ul li a.sub-title, #pageHolder #pageContent blockquote cite, #pageHolder #pageContent h5, #pageHolder aside#sidebar ul li ul li a, #slider .searchBlock .searchElement .search-container input, #slider .searchBlock .searchElement .title, #slider .sliderText .slide .bannerText .subtitle, #welcome, #welcome .linkBlocks .block .content .readMore, .testimonialsCarousel .student-testimonial .profileInfo .course, body { font-size: 0.875rem; } #accordion.mainDetail.large .nested-accordion .accordion-title, #campusLocations .campus .campusInfo, #events-testimonials .eventsCarousel .event .content .eventName, #latestNews .newsHolder .item a.share, #pageContent .courseListing .count, #pageContent .courseListing .courseList .course .details, #pageContent .sectorQuickLinks .link .info .subtitle, #pageContent .subjectArea .count, #pageContent .subjectArea .subjectList .subject a .title, #pageHolder #pageContent #mobile-search .searchElement .title, #pageHolder #pageContent .contactBlock, #pageHolder #pageContent .eventInformation, #pageHolder #pageContent blockquote, #pageHolder aside#sidebar .sectionHeader .sectionTitle i, #pageHolder aside#sidebar ul li a, #searchContainer .advancedFilters .advancedTitle, #searchContainer .searchTitle, #showcase .showcaseInfo .time, #slider #pausePlay button, #slider .searchBlock .searchElement .search-container #search-button, #slider .searchBlock .searchElement .search-container #search-button2, #socials, #welcome .linkBlocks .accordionTitle, .testimonialsCarousel .student-testimonial .profileInfo .name, .testimonialsCarousel .student-testimonial .profileInfo .quote, body.courseSearch #pageHolder #pageContent .resultNumber, body.sixth-form #pageContent .courseListing .courseList .course .buttons a, footer#siteFooter .topFooter .column a { font-size: 1rem; } #accordion.mainDetail .accordion-title, #accordion.mainDetail .nested-accordion .accordion-title:after, #accordion.sidebar .accordion-title, #pageContent .courseListing .courseList .course .title, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button2, #pageHolder #pageContent .sitemap li ul li a, #pageHolder #pageContent h4, #pageHolder #singleSearchContainer #search-button, #pageHolder #singleSearchContainer #search-button2, #searchContainer .filterWrapper #search-button, nav#mainMenu a.searchBTN { font-size: 1.125rem; } #advert .advertInfo .advertTitle, #campusLocations .accordion .accordionTitle, #courseGuide .title, #pageContent .flex .sidebar .courseDetails .sectionTitle, #pageHolder #pageContent .eventInformation .date, #pageHolder #pageContent .sitemap li a, #pageHolder #pageContent .tab-content .pageList .page .content .title, #pageHolder #pageContent h3, #pageHolder .quickLinks a .title, #pageHolder aside#sidebar .sectionHeader .sectionTitle, #showcase .showcaseInfo .date, #showcase .showcaseInfo .subTitle, #socials .title { font-size: 1.25rem; } #accordion.mainDetail.large .accordion-title, #pageContent .courseListing .sectorTitle, #pageContent .partnersStakeholders .sectorTitle, #pageContent .relatedCareers .sectionTitle, #pageContent .sectorQuickLinks .link .info .title, #pageContent .studentWork .sectionTitle, #pageContent .subjectArea .sectorTitle, #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content .title, #pageContent .subjectArea.fullWidth .subjectList .subject a .content .title, #pageHolder #pageContent .tab-content .tabbedContentTitle, #pageHolder #pageContent h2, #showcase.in-page .showcaseInfo .title { font-size: 1.5625rem; } #events-testimonials .eventsCarousel .event .content .eventDate span span, #events-testimonials .sectionTitle, #latestNews .sectionTitle, #pageHolder #pageContent .eventHolder .event .content .eventDate span span, #pageHolder #pageContent h1, #showcase .showcaseInfo .title, #slider .sliderText .slide .bannerText .title, #welcome h1 { font-size: 1.875rem; } #pageContent .flex.landing .landing-right .carousel .video i, #successStories .story .quoteIcon { font-size: 2.375rem; } #events-testimonials .eventsCarousel .event .content .eventDate span, #pageHolder #pageContent .eventHolder .event .content .eventDate span { font-size: 3.75rem; } } @media all and (min-width: 768px) and (max-width: 1023px) { #pageHolder aside#sidebar ul li ul li a { font-size: 0.875rem; } #pageHolder #pageContent blockquote cite, #pageHolder aside#sidebar ul li a { font-size: 1rem; } #pageHolder #pageContent .contactBlock, #pageHolder #pageContent .relatedEvents .event .content .eventName, #pageHolder #pageContent blockquote { font-size: 1.25rem; } #accordion.mainDetail.large .accordion-title, #pageHolder aside#sidebar .sectionHeader .sectionTitle { font-size: 1.5625rem; } #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content .title { font-size: 1.875rem; } #pageHolder .relatedEvents .event .content .eventDate span { font-size: 4.75rem; } } @media (min-width: 768px) and (max-width: 1100px) { #pageHolder #pageContent .contactBlock, #pageHolder #pageContent .relatedEvents .event .content .eventName, #pageHolder #pageContent blockquote, #searchContainer .searchTitle { font-size: 1.25rem; } #courseGuide .title { font-size: 1.875rem; } #slider .sliderText .slide .bannerText .title { font-size: 3.125rem; } } @media (min-width: 1024px) and (max-width: 1200px) { #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content .title { font-size: 2.5rem; } } @media (min-width: 1100px) and (max-width: 1400px) { #courseGuide .title { font-size: 2.1875rem; } #slider .sliderText .slide .bannerText .title { font-size: 4.375rem; } } @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); } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } header#masthead { position: fixed; top: 0; left: 0; width: 100%; height: 10rem; z-index: 9000; } header#masthead .logoHolder { position: absolute; left: 50px; top: 30px; z-index: 2000; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; background-clip: padding-box; behavior: url(PIE.htc); } #advert, #pageHolder #singleSearchContainer, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet, nav#mainMenu, nav#mainMenu .flex-holder, nav#mainMenu .flex-holder ul { position: relative; } header#masthead .logoHolder a { display: block; position: relative; z-index: 5; } header#masthead .logoHolder a img { max-width: 100%; height: auto; position: absolute; top: 0; left: 0; } body.fixedHeader header#masthead .logoHolder a img.main, body.mobileMenuInUse a.mobileMenuBTN #navIcon span:nth-child(2), header#masthead .logoHolder a img.scrolled { opacity: 0; } header#masthead .logoHolder, header#masthead .logoHolder a { width: 321px; height: 100px; } body.fixedHeader header#masthead { -webkit-box-shadow: 0 10px 10px -8px rgba(0, 0, 0, 0.38); -moz-box-shadow: 0 10px 10px -8px rgba(0, 0, 0, 0.38); box-shadow: 0 10px 10px -8px rgba(0, 0, 0, 0.38); } #pageHolder aside#sidebar ul li a.active:before, #pageHolder aside#sidebar ul li a:hover:before, #pageHolder aside#sidebar ul li ul li a.active:before, #pageHolder aside#sidebar ul li ul li a:hover:before, #slider .slick-slide.slick-active .bannerText, body.fixedHeader header#masthead .logoHolder a img.scrolled, nav#mainMenu .megaMenu ul li a:hover:before, nav#mainMenu .megaMenu ul li.open > a:before, nav#mainMenu .megaMenu ul li:hover > a:before { opacity: 1; } body.iot header#masthead .logoHolder, body.iot header#masthead .logoHolder a { width: 562px; height: 85px; } body.university header#masthead .logoHolder, body.university header#masthead .logoHolder a { width: 447px; height: 100px; } @media (max-width: 767px) { header#masthead { height: 60px; background-color: #fff; } header#masthead .logoHolder { top: 10px; } header#masthead .logoHolder, header#masthead .logoHolder a { width: 128px; height: 40px; } header#masthead .logoHolder a img.main { display: none; } header#masthead .logoHolder a img.scrolled { opacity: 1; } body.iot header#masthead .logoHolder { top: 15px; } body.iot header#masthead .logoHolder, body.iot header#masthead .logoHolder a { width: 186px !important; height: 28px !important; } body.university header#masthead .logoHolder, body.university header#masthead .logoHolder a { width: 179px !important; height: 40px !important; } } @media (max-width: 1399px) { header#masthead .logoHolder { left: 5%; } } nav#mainMenu ul:after, nav#mainMenu ul:before { top: 0; height: 100%; content: ""; position: absolute; } @media all and (min-width: 768px) and (max-width: 1200px) { body.iot header#masthead .logoHolder, body.iot header#masthead .logoHolder a { width: 398px; height: 71px; } } @media all and (min-width: 1200px) and (max-width: 1400px) { body.iot header#masthead .logoHolder, body.iot header#masthead .logoHolder a { width: 310px; height: 55px; } } @media (max-width: 1400px) { body.fixedHeader.iot header#masthead .logoHolder, body.fixedHeader.iot header#masthead .logoHolder a { width: 300px; height: 45px; } } @media all and (min-width: 1400px) and (max-width: 1600px) { body.iot header#masthead .logoHolder, body.iot header#masthead .logoHolder a { width: 470px; height: 83px; } } nav#mainMenu { right: 0; top: 4.375rem; height: 5rem; justify-content: flex-end; flex-wrap: wrap; } nav#mainMenu .flex-holder a.applyNow { position: absolute; width: 150px; text-align: center; transform: skewX(-30deg); -webkit-transform: skewX(-30deg); height: 42px; line-height: 42px; top: 19px; left: -110px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28); z-index: 2; } nav#mainMenu .flex-holder a.applyNow span { display: block; transform: skewX(30deg); -webkit-transform: skewX(30deg); } nav#mainMenu .flex-holder a.searchBTN { display: inline-block; z-index: 5; position: relative; margin-left: 20px; } nav#mainMenu .flex-holder a.searchBTN:hover, nav#mainMenu .megaMenu .searchBlock .searchElement #suggestion-list li:hover { cursor: pointer; } nav#mainMenu ul { width: auto; margin: 0; padding: 0 0 0 70px; list-style-type: none; display: inline-block; height: 80px; } nav#mainMenu ul:before { width: 100px; left: -75px; transform: skewX(-30deg); -webkit-transform: skewX(-30deg); } nav#mainMenu ul:after { width: 2000px; right: -2000px; } nav#mainMenu ul li { display: inline-block; padding: 0 0.9375rem; margin-top: 25px; } nav#mainMenu ul li a { line-height: 2.5rem; display: block; position: relative; padding-bottom: 10px; } nav#mainMenu ul li a:after { height: 0.125rem; left: 0; right: 100%; content: ""; position: absolute; bottom: 0.75rem; } #slider .sliderImages button.slick-next, #slider button.custom-slick-next, nav#mainMenu ul li a.active:after, nav#mainMenu ul li a:focus:after, nav#mainMenu ul li a:hover:after, nav#mainMenu ul li.active a:after, nav#mainMenu ul li:hover > a:after { right: 0; } nav#mainMenu ul li:last-child { padding: 0 0 0 0.9375rem; } nav#mainMenu .megaMenu { position: absolute; top: 100%; right: 0; left: -20px; width: auto; display: none; } nav#mainMenu .megaMenu .overflow { padding: 40px 0 80px; max-height: calc(100vh - 130px); } nav#mainMenu .megaMenu#submenu-1 .overflow { padding: 40px 0 230px; } nav#mainMenu .megaMenu:after, nav#mainMenu .megaMenu:before { position: absolute; top: 0; width: 2000px; height: 100%; content: ""; transform: none; } nav#mainMenu .megaMenu:before { left: -2000px; } nav#mainMenu .megaMenu:after { right: -2000px; } nav#mainMenu .megaMenu ul { width: 350px; padding-left: 0; height: auto; z-index: 10; } nav#mainMenu .megaMenu ul li { width: 100%; margin: 0; padding: 0; } nav#mainMenu .megaMenu ul li a { line-height: 1.6; padding: 17px 60px 17px 20px; position: relative; } nav#mainMenu .megaMenu ul li a:before { left: 20px; content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 700; position: absolute; top: 23px; width: 10px; height: 10px; opacity: 0; } nav#mainMenu .megaMenu ul li a:hover, nav#mainMenu .megaMenu ul li.open > a, nav#mainMenu .megaMenu ul li:hover > a { padding: 17px 40px; text-decoration: underline; } nav#mainMenu .megaMenu ul li ul.subSub { position: absolute; top: 0; height: 100%; left: 350px; width: 730px; padding: 40px 40px 60px 90px; flex-wrap: wrap; z-index: 10; display: none; } nav#mainMenu .megaMenu ul li ul.subSub li.subSub-title { flex: 0 0 100%; margin: 20px 0 10px; line-height: 1.6; } nav#mainMenu .megaMenu ul li ul.subSub li.column { float: left; width: 50%; padding: 0; } nav#mainMenu .megaMenu ul li ul.subSub li a { padding: 3px 60px 3px 20px; } nav#mainMenu .megaMenu ul li ul.subSub li a:before { opacity: 1; left: 0; top: 9px; } nav#mainMenu .megaMenu ul li ul.subSub a.viewAll { display: inline-block; padding: 0 20px; line-height: 44px; margin-top: 50px; text-decoration: none !important; } #advert .advertImage img, #latestNews .newsHolder .item .thumbnail img, #pageContent .flex .sidebar .courseDetails .specifics, #pageContent .linkBlocks .block, #pageContent .sectorQuickLinks.owl-carousel .link, #pageHolder #pageContent .newsHolder .item .thumbnail img, #pageHolder #pageContent .relatedEvents .event, #pageHolder #pageContent .relatedNews .item .thumbnail img, #pageHolder aside#sidebar .relatedEvents .event, #pageHolder aside#sidebar .relatedNews .item .thumbnail img, footer#siteFooter, nav#mainMenu .megaMenu .searchBlock .searchElement #suggestion-list li:hover:after, nav#mainMenu .megaMenu ul li ul.subSub ul, nav#mainMenu .megaMenu ul.normal ul { width: 100%; } nav#mainMenu .megaMenu .flex.space-between { position: absolute; width: auto; bottom: 68px; left: 20px; right: 0; } nav#mainMenu .megaMenu .searchBlock { z-index: 5; width: 650px; margin-top: -32px; } #slider .searchBlock .searchElement, nav#mainMenu .megaMenu .searchBlock .searchElement { display: flex; flex-wrap: wrap; } #slider .searchBlock .searchElement .title, nav#mainMenu .megaMenu .searchBlock .searchElement .title { flex: 1 0 100%; line-height: 1.2; margin-bottom: 20px; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.28); } #slider .searchBlock .searchElement .search-container, nav#mainMenu .megaMenu .searchBlock .searchElement .search-container { flex-grow: 1; position: relative; height: 80px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28); } #slider .searchBlock .searchElement .search-container input, nav#mainMenu .megaMenu .searchBlock .searchElement .search-container input { border: none; background: #fff; height: 80px; margin: 0; width: 100%; padding: 0 90px 0 20px; -webkit-appearance: none; z-index: 2; position: relative; color: #001f5f; } nav#mainMenu .megaMenu .searchBlock .searchElement .search-container input::-webkit-input-placeholder { color: #001f5f; opacity: 1; } nav#mainMenu .megaMenu .searchBlock .searchElement .search-container input:moz-placeholder { color: #001f5f; opacity: 1; } nav#mainMenu .megaMenu .searchBlock .searchElement .search-container input::-moz-placeholder { color: #001f5f; opacity: 1; } nav#mainMenu .megaMenu .searchBlock .searchElement .search-container input:-ms-input-placeholder { color: #001f5f; opacity: 1; } #slider .searchBlock .searchElement .search-container input:focus, nav#mainMenu .megaMenu .searchBlock .searchElement .search-container input:focus { outline: 0; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.38); border: 1px solid rgba(0, 0, 0, 0.58); } nav#mainMenu .megaMenu .searchBlock .searchElement .search-container #search-button { position: absolute; width: 120px; height: 80px; right: -27px; top: 0; z-index: 5; border: none; -webkit-appearance: none; text-align: center; transform: skewX(-30deg); -webkit-transform: skewX(-30deg); } nav#mainMenu .megaMenu .searchBlock .searchElement .search-container #search-button i { transform: skewX(30deg); -webkit-transform: skewX(30deg); } nav#mainMenu .megaMenu .searchBlock .searchElement #suggestion-list { position: absolute; top: 70px; left: 0; width: 90%; list-style: none; padding: 15px 20px 25px; margin: 0; display: none; z-index: 1; border-radius: 0 0 10px 10px; } nav#mainMenu .megaMenu .searchBlock .searchElement #suggestion-list li { padding: 20px 0 7px; position: relative; } nav#mainMenu .megaMenu .searchBlock .searchElement #suggestion-list li:after, nav#mainMenu .megaMenu .searchBlock .searchElement #suggestion-list li:before { left: 0; width: 100%; content: ""; position: absolute; } nav#mainMenu .megaMenu .searchBlock .searchElement #suggestion-list li:before { height: 1px; bottom: 0; } nav#mainMenu .megaMenu .searchBlock .searchElement #suggestion-list li:after { height: 2px; width: 0; bottom: -1px; } nav#mainMenu .megaMenu .heritage { width: 334px; height: 120px; z-index: 5; } nav#mainMenu .megaMenu .menuSidebar { position: absolute; right: 0; top: 40px; width: 420px; } nav#mainMenu .megaMenu .menuSidebar a { display: block; width: 100%; height: 220px; margin-top: 20px; position: relative; padding: 30px 190px 30px 30px; line-height: 1.4; } #pageHolder .quickLinks a .thumbnail, nav#mainMenu .megaMenu .menuSidebar a .thumbnail { position: absolute; right: 0; top: 0; height: 100%; width: 205px; clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 0% 100%); } #events-testimonials .eventsCarousel .event .thumbnail img, #events-testimonials .testimonialsCarousel .student-testimonial .profileImage img, #pageContent .quickLinks.courseListing .link .image img, #pageHolder #pageContent .eventHolder .event .thumbnail img, #pageHolder #pageContent .relatedEvents .event .thumbnail img, #pageHolder .quickLinks a .thumbnail img, #pageHolder aside#sidebar .relatedEvents .event .thumbnail img, nav#mainMenu .megaMenu .menuSidebar a .thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1); -webkit-transform: scale(1); } #pageHolder .quickLinks a .title, nav#mainMenu .megaMenu .menuSidebar a .title { text-transform: uppercase; } #pageHolder .quickLinks a:after, nav#mainMenu .megaMenu .menuSidebar a:after { content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 700; position: absolute; left: 20px; bottom: 30px; opacity: 0; } #pageContent .quickLinks.courseListing .link a:hover i, #pageHolder .quickLinks a:hover:after, nav#mainMenu .megaMenu .menuSidebar a:hover:after { left: 30px; opacity: 1; } #events-testimonials .eventsCarousel .event a:hover .thumbnail img, #latestNews .newsHolder .item a:hover .thumbnail img, #pageContent .quickLinks.courseListing .link a:hover .image img, #pageContent .sectorQuickLinks .link a:hover .image img, #pageContent .subjectArea.fullWidth .subjectList .subject .holder:hover .image img, #pageContent .subjectArea.fullWidth .subjectList .subject a:hover .image img, #pageHolder #pageContent .eventHolder .event a:hover .thumbnail img, #pageHolder #pageContent .newsHolder .item a:hover .thumbnail img, #pageHolder #pageContent .relatedEvents .event a:hover .thumbnail img, #pageHolder #pageContent .relatedNews .item a:hover .thumbnail img, #pageHolder .quickLinks a:hover .thumbnail img, #pageHolder aside#sidebar .relatedEvents .event a:hover .thumbnail img, #pageHolder aside#sidebar .relatedNews .item a:hover .thumbnail img, nav#mainMenu .megaMenu .menuSidebar a:hover .thumbnail img { transform: scale(1.1); -webkit-transform: scale(1.1); } nav#mainMenu .megaMenu button.close-button { position: absolute; top: 52px; z-index: 5; border: none; -webkit-appearance: none; padding: 5px; line-height: 30px; left: 50%; margin-left: -48vw; animation-name: pulse; animation-duration: 2s; animation-iteration-count: 4; } #pageHolder #pageContent .alignleft, nav#mainMenu .megaMenu button.close-button i { float: left; } nav#mainMenu .megaMenu button.close-button span { float: left; margin-left: 8px; font-size: 16px; margin-top: -3px; } nav#mainMenu .megaMenu button.close-button:hover { animation: none; opacity: 0.7; } nav#mainMenu .megaMenu ul.normal { display: flex; width: 700px; margin-top: -10px; } nav#mainMenu .megaMenu ul.normal li.column { flex: 0 0 50%; width: 50%; } nav#mainMenu .megaMenu ul.normal li.subSub-title { margin: 20px 0 0; line-height: 1.6; } nav#mainMenu .megaMenu ul.normal li.subSub-title a { padding: 10px 60px 10px 20px; } nav#mainMenu .megaMenu ul.normal li a { padding: 3px 40px; } nav#mainMenu .megaMenu ul.normal li a:before { opacity: 1; top: 7px; } a.mobileMenuBTN { display: none; position: absolute; top: 18px; right: 0; padding: 0; outline: 0; } a.mobileMenuBTN .title { line-height: 20px; margin: 3px 8px 0 0; float: left; } a.mobileMenuBTN #navIcon { width: 1.875rem; height: 1.3125rem; position: relative; cursor: pointer; float: left; margin-top: 3px; } a.mobileMenuBTN #navIcon span { display: block; position: absolute; height: 0.125rem; width: 100%; opacity: 1; left: 0; border-radius: 2px; -webkit-border-radius: 2px; } a.mobileMenuBTN #navIcon span:first-child { top: 0; } a.mobileMenuBTN #navIcon span:nth-child(2) { top: 0.5625rem; opacity: 1; } a.mobileMenuBTN #navIcon span:nth-child(3) { top: 1.125rem; } body.mobileMenuInUse a.mobileMenuBTN #navIcon span:first-child { top: 10px; transform: rotate(40deg); -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); } body.mobileMenuInUse a.mobileMenuBTN #navIcon span:nth-child(3) { top: 10px; transform: rotate(-40deg); -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); } .mm-searchfield__input .searchButton { position: absolute; right: 0; top: 0; width: 1.875rem; height: 1.875rem; border: none; -webkit-appearance: none; padding: 0; z-index: 10; border-radius: 50%; -webkit-border-radius: 50%; } .mm-searchfield__input .searchButton:before { content: "\f002"; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; text-align: center; line-height: 1.875rem; font-family: "Font Awesome 6 Free"; font-weight: 700; } #accordion.mainDetail .accordion-title:hover, #accordion.sidebar .accordion-title:hover, #pageHolder #pageContent .filterWrapper .filterGroup:hover, #pageHolder #pageContent .tabs a:hover, #pageHolder aside#sidebar .holder:hover, #searchContainer .advancedFilterToggle:hover, #searchContainer .filterWrapper .filterGroup:hover, #slider .sliderImages button.slick-next:hover, #slider .sliderImages button.slick-prev:hover, #slider .sliderText button.slick-next:hover, #slider .sliderText button.slick-prev:hover, #slider button.custom-slick-next:hover, #slider button.custom-slick-prev:hover, .mm-searchfield__input .searchButton:hover { cursor: pointer; } .mm-searchfield__input input { border: none; color: #000; } .mm-searchfield__input input::-webkit-input-placeholder { color: #000; opacity: 1; } .mm-searchfield__input input:moz-placeholder { color: #000; opacity: 1; } .mm-searchfield__input input::-moz-placeholder { color: #000; opacity: 1; } .mm-searchfield__input input:-ms-input-placeholder { color: #000; opacity: 1; } .mm-menu .mm-btn--close { width: 32px; height: 28px; } .mm-menu .mm-btn--close:after, .mm-menu .mm-btn--close:before { content: ""; position: absolute; height: 0.125rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; background-clip: padding-box; behavior: url(PIE.htc); width: 100%; opacity: 1; left: 0; background-color: #001f5f; } .mm-menu .mm-btn--close:before { top: 10px; transform: rotate(40deg); -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); } .mm-menu .mm-btn--close:after { top: 10px; transform: rotate(-40deg); -webkit-transform: rotate(-40deg); -ms-transform: rotate(-40deg); } @media (max-width: 767px) { nav#mainMenu { top: 0; } nav#mainMenu .flex-holder a.applyNow { display: none; } nav#mainMenu .flex-holder a.searchBTN.mob { position: absolute; top: 21px; right: 43px; } nav#mainMenu .flex-holder:before { left: 0 !important; box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2); clip-path: none !important; transform: skew(-20deg); } .mm-searchfield__input .searchButton { right: 4px; } } @media all and (min-width: 768px) and (max-width: 1023px) { header#masthead { height: 100px; } header#masthead .logoHolder, nav#mainMenu { top: 20px; } header#masthead .logoHolder, header#masthead .logoHolder a { width: 192px; height: 60px; } body.fixedHeader nav#mainMenu { top: 9px; } } @media all and (min-width: 1024px) and (max-width: 1200px) { body.fixedHeader nav#mainMenu { top: 9px; } nav#mainMenu .megaMenu button.close-button { padding: 5px 0; width: 110px !important; } body.sector-page #pageContent .flex.landing { gap: 0 50px; } body.sector-page #pageContent .flex.landing .landing-left { flex: 1 0 0; } } @media all and (min-width: 1200px) and (max-width: 1500px) { nav#mainMenu ul li { padding: 0 8px; } nav#mainMenu ul li:last-child { padding-left: 8px; } nav#mainMenu .megaMenu ul li:last-child { padding-left: 0; } } @media all and (min-width: 1200px) and (max-width: 1700px) { nav#mainMenu .megaMenu .menuSidebar { right: 20px; } } @media (min-width: 1024px) and (min-height: 400px) and (max-height: 1024px) { nav#mainMenu ul li a { font-size: 1rem; } nav#mainMenu .megaMenu .searchElement .search-container input { font-size: 1.125rem; } nav#mainMenu .megaMenu .searchBlock .searchElement .title { font-size: 1.375rem; margin-bottom: 10px; margin-top: 17px; } #slider .searchBlock .searchElement .title, nav#mainMenu .megaMenu .menuSidebar a .title { font-size: 1.5625rem; } #slider .sliderText .slide .bannerText .title { font-size: 2.8125rem; } nav#mainMenu .megaMenu .overflow { padding: 30px 0 70px; } nav#mainMenu .megaMenu#submenu-1 .overflow { padding: 30px 0 180px; } nav#mainMenu .megaMenu .flex.space-between { bottom: 30px; } nav#mainMenu .megaMenu .searchBlock .searchElement .search-container, nav#mainMenu .megaMenu .searchBlock .searchElement .search-container #search-button, nav#mainMenu .megaMenu .searchBlock .searchElement .search-container input { height: 50px; } nav#mainMenu .megaMenu .searchBlock { margin-top: 0; } nav#mainMenu .megaMenu ul { width: 280px; } nav#mainMenu .megaMenu ul.normal li.subSub-title a:hover { padding: 10px 60px 10px 20px; } nav#mainMenu .megaMenu ul li a, nav#mainMenu .megaMenu ul li a:hover, nav#mainMenu .megaMenu ul li.open > a, nav#mainMenu .megaMenu ul li:hover > a { padding-top: 8px; padding-bottom: 8px; } nav#mainMenu .megaMenu ul li li a, nav#mainMenu .megaMenu ul li li:hover > a { padding-top: 3px; padding-bottom: 3px; } nav#mainMenu .megaMenu ul li a:before { top: 12px; } nav#mainMenu .megaMenu ul li ul.subSub li a:before, nav#mainMenu .megaMenu ul.normal li a:before { top: 6px; } nav#mainMenu .megaMenu ul li ul.subSub { width: 630px; padding: 15px 50px 20px 40px; left: 280px; } nav#mainMenu .megaMenu ul li ul.subSub li.subSub-title, nav#mainMenu .megaMenu ul.normal li.subSub-title { margin: 22px 0 8px; } nav#mainMenu .megaMenu ul li ul.subSub li a { padding: 3px 40px 3px 20px; } nav#mainMenu .megaMenu .menuSidebar { top: 20px; width: 360px; } nav#mainMenu .megaMenu .menuSidebar a { height: 160px; padding: 10px 190px 30px 20px; line-height: 1.2; } nav#mainMenu .megaMenu button.close-button { top: 25px; } nav#mainMenu .megaMenu ul li ul.subSub a.viewAll { margin-top: 30px; } } @media all and (min-width: 1024px) and (max-width: 2000px) { nav#mainMenu .megaMenu button.close-button { top: auto; left: auto; right: 0; margin-left: 0; width: 130px; bottom: 20px; } } footer#siteFooter .topFooter { display: flex; padding: 24px 0; justify-content: space-between; } footer#siteFooter .topFooter .column { flex: 0 0 25%; padding-right: 30px; } footer#siteFooter .topFooter .column a { display: block; padding: 5px 0; margin: 20px 0; clear: left; } #pageHolder #pageContent .eventInformation .campus a:hover, #pageHolder #pageContent .sitemap li a:hover, #pageHolder #pageContent p a:hover, #pageHolder .breadcrumb a.current, #pageHolder .breadcrumb a:hover, #socials a:hover, footer#siteFooter .topFooter .column a:hover, footer#siteFooter a:hover { text-decoration: underline; } footer#siteFooter .holder { display: flex; width: 100%; flex-wrap: wrap; padding: 30px 0; border-top-style: solid; border-top-width: 1px; } footer#siteFooter .fLeft a, footer#siteFooter .fRight .siteBy { margin-left: 20px; } #pageHolder #pageContent .oneHalf:first-of-type, #pageHolder #pageContent .oneThird:first-of-type, #pageHolder #pageContent.fullWidth, footer#siteFooter .fLeft a:first-child { margin-left: 0; } footer#siteFooter .fRight { display: flex; flex-grow: 1; justify-content: flex-end; } @media (max-width: 767px) { footer#siteFooter .holder { padding: 22px 0; } footer#siteFooter .fLeft, footer#siteFooter .fRight { justify-content: center; } footer#siteFooter .fLeft { flex-wrap: wrap; display: flex; } footer#siteFooter .fLeft a { margin: 0 10px 10px; line-height: 1.3; } footer#siteFooter .fLeft a:first-child { margin-left: 10px; } footer#siteFooter .fRight { flex-wrap: wrap; } footer#siteFooter .fRight .copy, footer#siteFooter .fRight .siteBy { flex: 0 0 100%; text-align: center; } footer#siteFooter .fRight .copy { margin-bottom: 12px; } footer#siteFooter .fRight .siteBy { margin-left: 0; } } @media (max-width: 900px) { footer#siteFooter .topFooter .column { flex: 0 0 50%; } footer#siteFooter .topFooter .column a { float: left; margin: 10px 0; } footer#siteFooter .topFooter { flex-wrap: wrap; } } @media all and (min-width: 768px) and (max-width: 1024px) { footer#siteFooter .fLeft, footer#siteFooter .fRight { justify-content: left; } } @media (max-width: 1024px) { footer#siteFooter .fLeft, footer#siteFooter .fRight { flex: 0 0 100%; text-align: left; } footer#siteFooter .fRight { margin-top: 20px; } } a.readMore, span.readMore { line-height: 2.75rem; padding: 0 20px; display: inline-block; position: relative; border-width: 1px; border-style: solid; } .flex { display: flex; width: 100%; } .flex.space-between { justify-content: space-between; } .flex.wrap { flex-wrap: wrap; } .flex.center { align-items: center; } .flex.row { flex-direction: row; } #slider { position: relative; float: left; width: 100%; } #showcase .showcaseImage video, #slider video { width: 100%; height: 115%; object-fit: cover; -o-object-fit: cover; object-position: bottom center; position: absolute; top: 0; left: 0; z-index: 1; } #searchContainer .overflow, #slider .sliderImages { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; overflow: hidden; } #slider .sliderImages .overlay { position: absolute; top: 0; height: 100%; left: 0; width: 100%; background-image: url(../images/background/banner-overlay.svg); background-size: cover; background-repeat: no-repeat; background-position: top left; mix-blend-mode: multiply; z-index: 2; opacity: 1; } #slider .sliderImages button.slick-next, #slider .sliderImages button.slick-prev, #slider .sliderText button.slick-next, #slider .sliderText button.slick-prev, #slider button.custom-slick-next, #slider button.custom-slick-prev { position: absolute; z-index: 2000; height: 50px; width: 50px; top: 50%; border: none; font-size: 0; outline: 0; padding: 0; margin: 0; -webkit-appearance: none; } #slider .sliderImages button.slick-next:before, #slider .sliderImages button.slick-prev:before, #slider .sliderText button.slick-next:before, #slider .sliderText button.slick-prev:before, #slider button.custom-slick-next:before, #slider button.custom-slick-prev:before { font-family: "Font Awesome 6 Free"; font-weight: 700; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; font-size: 1.25rem; line-height: 3.125rem; text-align: center; } #slider .sliderImages button.slick-prev, #slider button.custom-slick-prev { left: 0; } #events-testimonials .owl-nav button.owl-prev:before, #latestNews .owl-nav-top button.owl-prev:before, #pageContent #showcase.in-page.owl-carousel .owl-nav button.owl-prev:before, #pageContent .courseListing .courseList.owl-carousel .owl-nav button.owl-prev:before, #pageContent .linkBlocks .owl-nav button.owl-prev:before, #pageContent .quickLinks.courseListing.owl-carousel .owl-nav button.owl-prev:before, #pageContent .sectorQuickLinks.owl-carousel .owl-nav button.owl-prev:before, #pageHolder #pageContent .relatedEvents .owl-nav button.owl-prev:before, #pageHolder #pageContent .relatedNews .owl-nav button.owl-prev:before, #pageHolder aside#sidebar .relatedEvents .owl-nav button.owl-prev:before, #pageHolder aside#sidebar .relatedNews .owl-nav button.owl-prev:before, #showcase .owl-nav button.owl-prev:before, #slider .sliderImages button.slick-prev:before, #slider .sliderText button.slick-prev:before, #slider button.custom-slick-prev:before { content: "\f060"; } #events-testimonials .owl-nav button.owl-next:before, #latestNews .owl-nav-top button.owl-next:before, #pageContent #showcase.in-page.owl-carousel .owl-nav button.owl-next:before, #pageContent .courseListing .courseList.owl-carousel .owl-nav button.owl-next:before, #pageContent .linkBlocks .owl-nav button.owl-next:before, #pageContent .quickLinks.courseListing.owl-carousel .owl-nav button.owl-next:before, #pageContent .sectorQuickLinks.owl-carousel .owl-nav button.owl-next:before, #pageHolder #pageContent .relatedEvents .owl-nav button.owl-next:before, #pageHolder #pageContent .relatedNews .owl-nav button.owl-next:before, #pageHolder aside#sidebar .relatedEvents .owl-nav button.owl-next:before, #pageHolder aside#sidebar .relatedNews .owl-nav button.owl-next:before, #showcase .owl-nav button.owl-next:before, #slider .sliderImages button.slick-next:before, #slider .sliderText button.slick-next:before, #slider button.custom-slick-next:before { content: "\f061"; } #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: 3.125rem; right: 3.125rem; width: auto; z-index: 200; height: 100%; } #slider .sliderText button.slick-prev { left: 50%; } #slider .sliderText button.slick-next { right: 50%; } #slider .sliderText .slide .bannerText { top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 50rem; left: 0; position: absolute; z-index: 200; opacity: 0; } #slider .sliderText .slide .bannerText:before { position: absolute; top: 0; width: 2000px; left: -2000px; height: 100%; content: ""; } #slider .sliderText .slide .bannerText .clippy { width: 100%; padding: 40px 250px 100px 0; clip-path: polygon(0 0, 100% 0%, 62% 100%, 0 100%); } #slider .sliderText .slide .bannerText .title { line-height: 1.3; width: 100%; margin-bottom: 1.875rem; } #pageContent .sectorQuickLinks .link .info .subtitle, #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content .intro, #pageContent .subjectArea.fullWidth .subjectList .subject a .content .intro, #slider .sliderText .slide .bannerText .subtitle { line-height: 1.6; } #slider .sliderText .slide .bannerText a.readMore { margin-top: 35px; } #slider .slick-dots { height: 15px; z-index: 100; position: absolute; left: 0; bottom: 40px; width: 200px; padding: 0; margin: 0; } #slider .slick-dots li { display: inline-block; margin-right: 10px; } #slider .slick-dots button { height: 14px; width: 14px; border-width: 1px; border-style: solid; -webkit-appearance: none; border-radius: 50%; padding: 0; margin: 0; display: block; text-indent: -99em; } #slider .searchBlock { position: absolute; z-index: 500; bottom: 85px; left: 50px; width: 650px; } #slider .searchBlock .searchElement .search-container input::-webkit-input-placeholder { color: #001f5f; opacity: 1; } #slider .searchBlock .searchElement .search-container input:moz-placeholder { color: #001f5f; opacity: 1; } #slider .searchBlock .searchElement .search-container input::-moz-placeholder { color: #001f5f; opacity: 1; } #slider .searchBlock .searchElement .search-container input:-ms-input-placeholder { color: #001f5f; opacity: 1; } #slider .searchBlock .searchElement .search-container #search-button { position: absolute; width: 120px; height: 80px; right: -27px; top: 0; z-index: 5; border: none; -webkit-appearance: none; text-align: center; transform: skewX(-28deg); -webkit-transform: skewX(-28deg); } #pageContent .flex .sidebar .searchElement .search-container #search-button i, #pageContent .flex .sidebar .searchElement .search-container #search-button2 i, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button i, #pageHolder #singleSearchContainer #search-button i, #pageHolder #singleSearchContainer .search .unskew, #pageHolder aside#sidebar .searchElement .search-container #search-button i, #pageHolder aside#sidebar .searchElement .search-container #search-button2 i, #searchContainer .filterWrapper #search-button i, #searchContainer .filterWrapper .search .unskew, #slider .searchBlock .searchElement .search-container #search-button i, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search .unskew, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet .search .unskew { transform: skewX(28deg); -webkit-transform: skewX(28deg); } #slider #pausePlay { position: absolute; z-index: 4000; height: 30px; width: 30px; right: 90px; right: calc(50% - 800px); bottom: 98px; } #slider #pausePlay button { position: absolute; height: 30px; width: 30px; left: 0; top: 0; padding: 0; border: none; -webkit-appearance: none; } #slider #pausePlay i { line-height: 30px; width: 30px; text-align: center; position: absolute; left: 0; top: 0; } #slider #pausePlay:hover { cursor: pointer; opacity: 0.5; } #slider .heritage { position: absolute; bottom: 85px; right: 50px; width: 334px; height: 120px; } #slider a.accessible, body.page a.accessible { display: block; width: 89px; height: 92px; position: fixed; left: 0; bottom: 0; z-index: 10; } #slider a.accessible:hover, body.page a.accessible:hover { opacity: 0.6; } #welcome { clear: both; width: 100%; position: relative; padding: 0 0 5rem; z-index: 1; } #events-testimonials:before, #latestNews:before, #welcome:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: top center; background-repeat: no-repeat; background-image: url(../images/background/background-branding.svg); } #welcome .holder { width: 100%; text-align: center; padding: 75px 0 30px; } #welcome h1 { margin: 0 0 1.875rem; line-height: 1.3; } #welcome p { line-height: 1.6; padding: 0 220px; } #welcome a.readMore { margin-top: 2.5rem; } #welcome .linkBlocks { display: flex; gap: 20px; flex-wrap: wrap; } #welcome .linkBlocks .block { flex: 0 0 23.8461%; } #welcome .linkBlocks .block a { display: flex; flex-wrap: wrap; height: 100%; flex-flow: column; overflow: hidden; } #pageContent .linkBlocks .block.reverse a, #welcome .linkBlocks .block.reverse a { flex-direction: column-reverse; } #pageContent .linkBlocks .block.reverse a .content, #welcome .linkBlocks .block.reverse a .content { padding: 30px 40px 10px 30px; } #pageContent .linkBlocks .block.reverse a .content .readMore, #welcome .linkBlocks .block.reverse a .content .readMore { position: relative; bottom: auto; left: auto; z-index: 2; margin-top: 30px; } #pageContent .linkBlocks .block.reverse a .content:before, #welcome .linkBlocks .block.reverse a .content:before { left: -10%; width: 120%; height: 100px; content: ""; position: absolute; bottom: -40px; top: auto; transform: rotate(-12deg); z-index: 1; } #pageContent .linkBlocks .block .thumbnail, #welcome .linkBlocks .block .thumbnail { flex: 0 1 100%; height: 260px; min-height: 260px; position: relative; } #pageContent .linkBlocks .block .thumbnail img, #welcome .linkBlocks .block .thumbnail img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); width: 100%; height: 100%; object-fit: cover; } #pageContent .linkBlocks .block .content, #welcome .linkBlocks .block .content { flex: 1 1 100%; padding: 0 40px 110px 30px; align-self: stretch; position: relative; } #pageContent .linkBlocks .block .content:before, #welcome .linkBlocks .block .content:before { left: -10%; width: 120%; height: 100px; content: ""; position: absolute; top: -33px; transform: rotate(12deg); z-index: 1; } #pageContent .linkBlocks .block .content div, #pageContent .sectorQuickLinks .link .info div, #welcome .linkBlocks .block .content div { position: relative; z-index: 2; } #pageContent .linkBlocks .block .content .title, #welcome .linkBlocks .block .content .title { line-height: 1.45; margin-top: 0; } #pageContent .linkBlocks .block .content .excerpt, #welcome .linkBlocks .block .content .excerpt { line-height: 1.5; margin-top: 10px; } #pageContent .linkBlocks .block .content .readMore, #welcome .linkBlocks .block .content .readMore { position: absolute; bottom: 30px; left: 30px; z-index: 2; } #pageContent .linkBlocks .block a:hover .thumbnail img, #welcome .linkBlocks .block a:hover .thumbnail img { transform: translate(-50%, -50%) scale(1.1); -webkit-transform: translate(-50%, -50%) scale(1.1); } #advert .advertImage { position: absolute; right: 0; top: 0; height: 100%; width: 52%; clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%); } #advert .advertInfo { padding: 70px 40px 60px 0; width: 40%; position: relative; z-index: 5; height: 630px; } #advert .advertInfo .advertTitle { line-height: 1.6; margin-bottom: 35px; } #advert .advertInfo .advertLogo { position: absolute; bottom: 60px; left: 0; } #latestNews { width: 100%; position: relative; padding: 5.625rem 0 6.25rem; } #latestNews .sectionTitle { margin-bottom: 1.875rem; position: relative; display: inline-block; } #latestNews .sectionTitle:after { content: ""; position: absolute; left: 0; right: 0; width: auto; height: 5px; bottom: -20px; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; background-clip: padding-box; behavior: url(PIE.htc); } #latestNews a.seeAll { margin-right: 140px; } #latestNews .newsHolder { width: 100%; width: calc(100% + 10px); margin-left: -5px; position: relative; } #latestNews .newsHolder .owl-item { padding: 7px; } #latestNews .newsHolder .item { display: flex; width: 100%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28); position: relative; } #latestNews .newsHolder .item a, #pageHolder #pageContent .newsHolder .item a { display: flex; gap: 0 115px; position: relative; flex-wrap: wrap; } #campusLocations .campus, #latestNews .newsHolder .item .thumbnail, #pageHolder #pageContent .newsHolder .item .thumbnail, #pageHolder #pageContent .relatedNews .item .thumbnail, #pageHolder aside#sidebar .relatedNews .item .thumbnail { flex: 0 0 100%; overflow: hidden; } #latestNews .newsHolder .item .content, #pageHolder #pageContent .newsHolder .item .content, #pageHolder #pageContent .relatedNews .item .content, #pageHolder aside#sidebar .relatedNews .item .content { flex: 0 0 100%; padding: 20px 22px 110px; } #latestNews .newsHolder .item .content .date, #pageHolder #pageContent .newsHolder .item .content .date, #pageHolder #pageContent .relatedNews .item .content .date, #pageHolder aside#sidebar .relatedNews .item .content .date { display: block; margin: 10px 0 20px; } #latestNews .newsHolder .item .content .title, #pageHolder #pageContent .newsHolder .item .content .title, #pageHolder #pageContent .relatedNews .item .content .title, #pageHolder aside#sidebar .relatedNews .item .content .title { line-height: 1.5; position: relative; text-transform: uppercase; } #latestNews .newsHolder .item .content .excerpt, #pageHolder #pageContent .newsHolder .item .content .excerpt, #pageHolder #pageContent .relatedNews .item .content .excerpt, #pageHolder aside#sidebar .relatedNews .item .content .excerpt { line-height: 1.5; } #latestNews .newsHolder .item .content .lowerNewsItem, #pageHolder #pageContent .newsHolder .item .content .lowerNewsItem, #pageHolder #pageContent .relatedNews .item .content .lowerNewsItem, #pageHolder aside#sidebar .relatedNews .item .content .lowerNewsItem { position: absolute; height: 85px; border-top-style: solid; border-top-width: 2px; bottom: 0; left: 0; width: 100%; padding: 20px 22px; } #latestNews .newsHolder .item a.share, #pageHolder #pageContent .newsHolder .item a.share, #pageHolder #pageContent .relatedNews .item a.share, #pageHolder aside#sidebar .relatedNews .item a.share { position: absolute; bottom: 15px; transform: translateY(-50%); -webkit-transform: translateY(-50%); right: 20px; width: auto; display: inline-block; margin: 0; padding: 5px; z-index: 550; } #latestNews .owl-nav-top { height: 45px; top: 16px; right: 3.125rem; width: 112px; position: absolute; display: flex; justify-content: space-between; } #events-testimonials .owl-nav button, #latestNews .owl-nav-top button, #pageContent #showcase.in-page.owl-carousel .owl-nav button, #pageContent .linkBlocks .owl-nav button, #pageContent .quickLinks.courseListing.owl-carousel .owl-nav button, #pageContent .sectorQuickLinks.owl-carousel .owl-nav button, #pageHolder #pageContent .relatedEvents .owl-nav button, #pageHolder #pageContent .relatedNews .owl-nav button, #pageHolder aside#sidebar .relatedEvents .owl-nav button, #pageHolder aside#sidebar .relatedNews .owl-nav button { border: none; -webkit-appearance: none; padding: 0; text-align: center; height: 45px; width: 45px; margin: 0; position: relative; } #events-testimonials .owl-nav button:before, #latestNews .owl-nav-top button:before, #pageContent #showcase.in-page.owl-carousel .owl-nav button:before, #pageContent .courseListing .courseList.owl-carousel .owl-nav button:before, #pageContent .linkBlocks .owl-nav button:before, #pageContent .quickLinks.courseListing.owl-carousel .owl-nav button:before, #pageContent .sectorQuickLinks.owl-carousel .owl-nav button:before, #pageHolder #pageContent .relatedEvents .owl-nav button:before, #pageHolder #pageContent .relatedNews .owl-nav button:before, #pageHolder aside#sidebar .relatedEvents .owl-nav button:before, #pageHolder aside#sidebar .relatedNews .owl-nav button:before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; font-family: "Font Awesome 6 Free"; font-weight: 900; text-align: center; line-height: 2.8125rem; } #showcase { width: 100%; position: relative; clear: both; } #showcase .carouselItem { width: 100%; position: relative; height: 630px; } #showcase .showcaseImage { position: absolute; left: 0; top: 0; width: 52%; height: 99.95%; z-index: 1; } #showcase .showcaseInfo { margin-left: 50%; position: relative; z-index: 5; padding: 80px 0 185px; } #showcase .showcaseInfo .title { line-height: 1.3; } #showcase .showcaseInfo .subTitle { margin: 30px 0 10px; line-height: 1.4; } #showcase .showcaseInfo .date { margin-bottom: 12px; } #pageContent .flex.landing .landing-right .sectionBranding img, #showcase .showcaseInfo .time { margin-bottom: 30px; } #pageHolder #pageContent .eventInformation a.register, #pageHolder #pageContent .tab-content .pageList .page .content a.readMore, #showcase .showcaseInfo a.readMore, body.courseSearch.courseListing #pageHolder #pageContent .resultNumber { margin-top: 30px; } #showcase .linearOverlay { position: absolute; width: 68%; right: 0; top: 0; height: 100%; z-index: 2; clip-path: polygon(26% 0%, 100% 0%, 100% 100%, 0% 100%); } #showcase .owl-nav { height: 44px; bottom: 80px; right: 50%; margin-right: -650px; width: 112px; position: absolute; display: flex; justify-content: space-between; } #showcase .owl-nav button { border: none; -webkit-appearance: none; padding: 0; text-align: center; height: 44px; width: 44px; margin: 0; position: relative; } #showcase .owl-nav button:before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; font-family: "Font Awesome 6 Free"; font-weight: 900; text-align: center; line-height: 2.75rem; } #showcase .owl-dots { bottom: 80px; position: absolute; width: auto; left: 50%; z-index: 5; } #events-testimonials .testimonialsCarousel .owl-dots button, #showcase .owl-dots button { display: inline-block; padding: 0; -webkit-appearance: none; text-indent: -999em; height: 14px; width: 14px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; background-clip: padding-box; behavior: url(PIE.htc); border-style: solid; border-width: 1px; outline: 0; margin: 0 7px; } #events-testimonials { width: 100%; position: relative; padding: 5rem 0 9.375rem; } #events-testimonials .flex.space-between { gap: 0 130px; margin-bottom: 280px; } #events-testimonials .sectionTitle { margin-bottom: 2.1875rem; position: relative; display: inline-block; } #events-testimonials .eventsCarousel { flex: 0 0 420px; position: relative; max-width: 420px; } #events-testimonials .eventsCarousel .event { width: 100%; padding: 7px; } #events-testimonials .eventsCarousel .event a, #pageHolder #pageContent .eventHolder .event a, #pageHolder #pageContent .relatedEvents .event a, #pageHolder aside#sidebar .relatedEvents .event a { display: block; position: relative; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28); -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28); overflow: hidden; } #events-testimonials .eventsCarousel .event .thumbnail { width: 100%; overflow: hidden; height: 300px; } #events-testimonials .eventsCarousel .event .content { width: 100%; padding: 0 70px 60px; text-align: center; position: relative; } #events-testimonials .eventsCarousel .event .content:before, #pageHolder #pageContent .eventHolder .event .content:before, #pageHolder #pageContent .relatedEvents .event .content:before, #pageHolder aside#sidebar .relatedEvents .event .content:before { left: -10%; width: 120%; height: 100px; content: ""; position: absolute; top: -46px; transform: rotate(12deg); z-index: 1; } #events-testimonials .eventsCarousel .event .content .eventDate, #pageHolder #pageContent .eventHolder .event .content .eventDate, #pageHolder #pageContent .relatedEvents .event .content .eventDate, #pageHolder aside#sidebar .relatedEvents .event .content .eventDate { margin: -10px 0 22px; padding: 8px 28px; text-align: center; display: inline-block; position: relative; z-index: 5; } #events-testimonials .eventsCarousel .event .content .eventDate span, #pageHolder #pageContent .eventHolder .event .content .eventDate span, #pageHolder #pageContent .relatedEvents .event .content .eventDate span, #pageHolder aside#sidebar .relatedEvents .event .content .eventDate span { display: inline-block; margin: 0; } #events-testimonials .eventsCarousel .event .content .eventDate span span, #pageHolder #pageContent .eventHolder .event .content .eventDate span span, #pageHolder #pageContent .relatedEvents .event .content .eventDate span span, #pageHolder aside#sidebar .relatedEvents .event .content .eventDate span span { display: block; text-transform: uppercase; } #events-testimonials .eventsCarousel .event .content .eventDate.has-two-dates, #pageHolder #pageContent .eventHolder .event .content .eventDate.has-two-dates, #pageHolder #pageContent .relatedEvents .event .content .eventDate.has-two-dates, #pageHolder aside#sidebar .relatedEvents .event .content .eventDate.has-two-dates { padding: 8px 0; } #events-testimonials .eventsCarousel .event .content .eventDate.has-two-dates span, #pageHolder #pageContent .eventHolder .event .content .eventDate.has-two-dates span { padding: 0 12px; position: relative; } #events-testimonials .eventsCarousel .event .content .eventDate.has-two-dates:before, #pageHolder #pageContent .eventHolder .event .content .eventDate.has-two-dates:before, #pageHolder #pageContent .relatedEvents .event .content .eventDate.has-two-dates:before, #pageHolder aside#sidebar .relatedEvents .event .content .eventDate.has-two-dates:before { width: 12px; height: 5px; content: ""; position: absolute; left: 50%; top: 45px; margin-left: -2px; } #events-testimonials .eventsCarousel .event .content .eventName, #pageHolder #pageContent .eventHolder .event .content .eventName, #pageHolder #pageContent .relatedEvents .event .content .eventName, #pageHolder aside#sidebar .relatedEvents .event .content .eventName { line-height: 1.5; position: relative; margin-top: 10px; } #events-testimonials .eventsCarousel .event .content .eventSubTitle, #pageHolder #pageContent .eventHolder .event .content .eventSubTitle, #pageHolder #pageContent .relatedEvents .event .content .eventSubTitle, #pageHolder aside#sidebar .relatedEvents .event .content .eventSubTitle { margin-top: 5px; line-height: 1.5; } #events-testimonials .testimonialsCarousel { flex: 0 0 750px; max-width: 750px; position: relative; } #events-testimonials .testimonialsCarousel .student-testimonial .profileImage { flex: 0 0 100%; height: 475px; overflow: hidden; z-index: 1; } #events-testimonials .testimonialsCarousel .student-testimonial .profileInfo { flex: 0 0 100%; padding: 20px 55px 55px; position: relative; } #events-testimonials .testimonialsCarousel .student-testimonial .profileInfo:before { top: -200px; bottom: 0; height: auto; content: ""; position: absolute; left: 0; width: 100%; z-index: 2; background: linear-gradient(244deg, #001f5f 0, #001f5f 100%) no-repeat; clip-path: polygon(0% 28%, 100% 0%, 100% 100%, 0% 100%); } #campusLocations .campus .campusInfo div, #events-testimonials .testimonialsCarousel .student-testimonial .profileInfo div, #pageContent .flex .sidebar a.apply i, #pageContent .flex .sidebar a.apply span, body.coursePage #pageHolder #pageContent .overflowHolder a.apply i, body.coursePage #pageHolder #pageContent .overflowHolder a.apply span { position: relative; z-index: 5; } #events-testimonials .testimonialsCarousel .student-testimonial .profileInfo .quote { line-height: 1.5; margin-bottom: 40px; } #events-testimonials .testimonialsCarousel .student-testimonial .profileInfo .name, span.articleDate { margin-bottom: 10px; } #events-testimonials .testimonialsCarousel .owl-nav { left: auto; right: 0; bottom: -65px; } #events-testimonials .testimonialsCarousel .owl-dots { position: absolute; top: 400px; right: 65px; z-index: 5; } #events-testimonials a.seeAll { margin: 30px 0 0 140px; } #events-testimonials .owl-nav { height: 45px; bottom: -75px; left: 0; width: 112px; position: absolute; display: flex; justify-content: space-between; } #courseGuide, #courseGuide .container { height: 200px; } #courseGuide { clear: both; display: block; position: relative; left: 0; width: 100%; } #courseGuide:before { content: ""; position: absolute; left: 0; top: 0; width: 80%; width: calc(50% + 770px); height: 100%; background: linear-gradient(263deg, #00829b 0, #001f5f 100%) no-repeat; clip-path: polygon(0% 0%, 100% 0%, 94% 100%, 0% 100%); } #courseGuide .guidesImage { position: absolute; left: 50px; width: 633px; height: 450px; top: -174px; } #courseGuide .guidesImage img { width: 100%; height: auto; } #courseGuide .title { position: absolute; left: 52%; left: calc(50% + 50px); top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); line-height: 1.55; } #courseGuide a.viewAll { position: absolute; bottom: 50px; right: 100px; } #campusLocations { clear: both; padding: 50px 0; position: relative; } #campusLocations .campus .campusImage { width: 100%; display: block; height: 240px; } #campusLocations .campus .campusImage img, #pageContent .courseListing .courseList .subject .holder .thumbnail img, #pageContent .courseListing .courseList .subject a .thumbnail img, #pageContent .courseListing .subjectList .subject .holder .thumbnail img, #pageContent .courseListing .subjectList .subject a .thumbnail img, #pageContent .flex.landing .landing-right .carousel img, #pageContent .subjectArea .courseList .subject .holder .thumbnail img, #pageContent .subjectArea .courseList .subject a .thumbnail img, #pageContent .subjectArea .subjectList .subject .holder .thumbnail img, #pageContent .subjectArea .subjectList .subject a .thumbnail img { width: 100%; height: 100%; object-fit: cover; } #campusLocations .campus .campusInfo { padding: 0 20px 100px 30px; position: relative; line-height: 1.3; } #campusLocations .campus .campusInfo:before { left: -10%; width: 120%; height: 100px; content: ""; position: absolute; top: -35px; transform: rotate(12deg); z-index: 1; } #campusLocations .campus .campusInfo .address { margin: 15px 0; } #campusLocations .campus .campusInfo a.readMore { position: absolute; left: 30px; bottom: 30px; } #socials { clear: both; padding: 23px 0; } #socials a { line-height: 28px; } #socials a i { margin-right: 8px; } #associates { clear: both; padding: 25px 0; } #associates #ticker { width: 100%; overflow: hidden; } #associates #ticker .slick-slide { margin: 0 1.625rem; } #associates #ticker div { float: left; text-align: center; height: 6.25rem; vertical-align: middle; line-height: 6.25rem; } #associates #ticker .slick-slide img { display: inline-block; max-width: 100%; } #associates #ticker.owl-carousel .owl-item div, .fullWidth.alignCenter { width: 100%; text-align: center; } #associates #ticker.owl-carousel .owl-item div img { display: inline-block; max-width: 90%; } @media (max-width: 600px) { #advert .advertImage, #events-testimonials .eventsCarousel .event .thumbnail { height: 220px; } #showcase .showcaseImage { height: 260px; } #events-testimonials .testimonialsCarousel .student-testimonial .profileImage { height: 300px; } #events-testimonials .testimonialsCarousel .student-testimonial .profileInfo:before { top: -80px; clip-path: polygon(0% 17%, 100% 0%, 100% 100%, 0% 100%); } #events-testimonials .testimonialsCarousel .owl-dots { top: 270px; } #courseGuide:before { clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%); } } @media (max-width: 650px) { #welcome .linkBlocks { gap: 0; justify-content: center; } #welcome .linkBlocks .accordionTitle { display: block; line-height: 50px; padding: 0 50px 0 20px; max-width: 100%; width: 340px; margin-top: 5px; position: relative; } #welcome .linkBlocks .accordionTitle:after { width: 15px; height: 15px; position: absolute; right: 13px; top: 16px; z-index: 2; content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 700; line-height: 1; } #welcome .linkBlocks .accordionTitle:hover { cursor: pointer; } #welcome .linkBlocks .accordionTitle.ui-state-active:after { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } #welcome .linkBlocks .block { flex: 0 0 340px; max-width: 100%; position: relative; display: none; } #welcome .linkBlocks .block.reverse:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background-color: #fff; opacity: 0.2; z-index: 2; } #welcome .linkBlocks .block.reverse a .content { padding: 10px 20px 0; } #welcome .linkBlocks .block .thumbnail { min-height: 220px; } #welcome .linkBlocks .block .content { padding: 0 20px 80px; } #welcome .linkBlocks .block .content:before { top: -40px; } #welcome .linkBlocks .block .content .title { display: none; } #welcome .linkBlocks .block .content .readMore { left: 20px; bottom: 20px; } #welcome .linkBlocks .block.ul.accordion-content-active { display: block !important; } #events-testimonials .eventsCarousel .event .content:before { height: 150px; transform: rotate(10deg); -webkit-transform: rotate(10deg); top: -55px; } } @media (min-width: 650px) { #welcome .linkBlocks .block { display: block !important; } } @media all and (min-width: 600px) and (max-width: 767px) { #advert .advertImage { height: 260px; } #showcase .showcaseImage { height: 300px; } #events-testimonials .eventsCarousel .event .thumbnail { height: 250px; } #events-testimonials .testimonialsCarousel .student-testimonial .profileImage { height: 360px; } #events-testimonials .testimonialsCarousel .student-testimonial .profileInfo:before { top: -100px; clip-path: polygon(0% 23%, 100% 0%, 100% 100%, 0% 100%); } #events-testimonials .testimonialsCarousel .owl-dots { top: 300px; } #courseGuide:before { clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 0% 100%); } } @media (max-width: 767px) { a.readMore, span.readMore { line-height: 2.5rem; padding: 0 16px; } body.home #slider, body.home #slider .container { height: 31.875rem; min-height: 0; } body.home #slider { margin-top: 60px; height: 510px; } body.home #slider .sliderImages, body.home #slider .sliderText { height: 420px; } body.home #slider .sliderImages .slick-slide:not(:first-child) { height: 67%; } #welcome .holder p, body.home #slider .container { padding: 0; } body.home #slider .sliderText { left: 0; right: 0; } body.home #slider .sliderText .slide .bannerText { top: auto; bottom: 0; width: 100%; transform: translate(0); -webkit-transform: translate(0); } body.home #slider .sliderText .slide .bannerText .clippy { padding: 20px 5% 60px; clip-path: none; } #campusLocations .accordion .campus, #campusLocations .owl-carousel, body.home #slider .sliderText .slide .bannerText a.readMore { display: none; } #socials .social, body.home #slider .sliderText .slide .bannerText .title { margin-bottom: 5px; } body.home #slider .slick-dots { left: 5%; width: 90%; text-align: center; bottom: 15px; height: 10px; } body.home #slider .slick-dots li { margin: 0 5px; } body.home #slider .slick-dots li button { height: 10px; width: 10px; } #slider .searchBlock { bottom: 0; left: 0; width: 100%; height: 90px; padding: 18px 5% 0; } #slider .searchBlock .searchElement .title { margin-bottom: 4px; } #slider .searchBlock .searchElement .search-container, #slider .searchBlock .searchElement .search-container #search-button, #slider .searchBlock .searchElement .search-container input { height: 35px; } #slider .searchBlock .searchElement .search-container input { padding: 0 30px 0 15px; width: calc(100% - 20px); } #slider .searchBlock .searchElement .search-container #search-button { width: 50px; right: 4px; } #slider .sliderImages button.slick-next, #slider .sliderImages button.slick-prev, #slider button.custom-slick-next, #slider button.custom-slick-prev { height: 40px; width: 40px; top: auto; bottom: 0; } #events-testimonials .owl-nav button:before, #latestNews .owl-nav-top button:before, #showcase .owl-nav button:before, #slider .sliderImages button.slick-next:before, #slider .sliderImages button.slick-prev:before, #slider button.custom-slick-next:before, #slider button.custom-slick-prev:before { line-height: 40px; } #slider button.custom-slick-next, #slider button.custom-slick-prev { bottom: 90px; } #slider a.accessible { width: 34px; height: 39px; left: 0; bottom: auto; top: 40px; overflow: hidden; background-color: #146ff8; } #slider a.accessible img { width: 64px; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); } #slider #pausePlay { right: 3%; bottom: auto; top: 13px; } #welcome { padding-bottom: 25px; } #campusLocations, #events-testimonials, #welcome .holder { padding: 30px 0; } #welcome .holder h1 { margin: 0 0 15px; } #welcome .holder .heritage { margin-top: 25px; } #welcome .holder .heritage img { max-width: 70%; } #advert .advertInfo { padding: 25px 40px 10px 0; } #advert .advertInfo .advertTitle { line-height: 1.5; margin-bottom: 20px; } #advert .advertInfo .advertLogo { position: relative; margin-top: 30px; bottom: auto; width: 240px; } #advert .advertInfo .advertLogo img, #courseGuide:before { width: 100%; } #advert .advertImage { clip-path: polygon(0% 0%, 100% 40%, 100% 100%, 0% 100%); } #latestNews { padding: 25px 0; } #latestNews .flex { justify-content: center; } #latestNews .sectionTitle { flex: 0 0 100%; text-align: center; margin-bottom: 25px; } #latestNews a.seeAll { margin-right: 0; z-index: 2; } #latestNews .newsHolder { margin-top: 15px; } #latestNews .owl-nav-top { width: auto; left: 25px; right: 25px; top: 55px; height: 40px; z-index: 0; } #events-testimonials .owl-nav button, #latestNews .owl-nav-top button, #showcase .owl-nav button { height: 40px; width: 40px; } #showcase .showcaseImage { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%); } #showcase .showcaseInfo { padding: 0 70px 90px 5%; } #campusLocations .accordion .campus .campusInfo .address, #showcase .showcaseInfo .title { margin-top: -15px; } #showcase .showcaseInfo .subTitle { margin: 15px 0 10px; } #showcase .showcaseInfo a.readMore { margin-top: 10px; } #showcase .owl-dots { left: 5%; bottom: 30px; } #showcase .owl-dots button { height: 10px; width: 10px; margin: 0 5px; border-radius: 5px; } #showcase .owl-dots button:first-child { margin-left: 0; } #showcase .owl-nav { right: 5%; margin-right: 0; bottom: 30px; height: 40px; width: 90px; } #events-testimonials .flex.space-between { gap: 0; margin-bottom: 190px; } #events-testimonials .sectionTitle { width: 100%; text-align: center; margin-bottom: 25px; } #events-testimonials .eventsCarousel .owl-carousel { width: calc(100% + 14px); margin-left: -7px; } #events-testimonials .eventsCarousel .event .content { padding: 0 30px 30px; } #events-testimonials .eventsCarousel .event .content .eventDate.has-two-dates:before { top: 35px; } #events-testimonials .eventsCarousel .owl-nav button.owl-prev { left: 6px; } #events-testimonials .eventsCarousel .owl-nav button.owl-next { right: 6px; } #events-testimonials .owl-nav { height: 40px; width: 100%; bottom: -51px; } #courseGuide, #courseGuide .container { height: 160px; } #events-testimonials .testimonialsCarousel { margin-top: 30px; } #events-testimonials .testimonialsCarousel .student-testimonial .profileInfo { padding: 0 20px 25px; } #events-testimonials .testimonialsCarousel .student-testimonial .profileInfo .quote { margin-bottom: 20px; } #events-testimonials .testimonialsCarousel .owl-dots { right: 25px; } #events-testimonials .testimonialsCarousel .owl-dots button { height: 10px; width: 10px; border-radius: 5px; margin: 0 5px; } #events-testimonials .testimonialsCarousel .owl-nav { width: auto; left: 0; bottom: -55px; } #events-testimonials a.seeAll { margin: 10px 0 0 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } #courseGuide { width: 95%; } #courseGuide .guidesImage { width: 220px; height: 156px; top: -102px; left: 3.5%; } #courseGuide .title { top: 60px; transform: none; line-height: 1.45; } #courseGuide .title br { content: ""; display: none; } #courseGuide .title, #courseGuide a.viewAll { left: 5%; } #courseGuide a.viewAll { right: auto; bottom: 20px; } #campusLocations .accordion { display: block; max-width: 100%; width: 340px; position: relative; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); } #campusLocations .accordion .accordionTitle { line-height: 50px; width: 100%; padding: 0 40px 0 15px; margin-top: 5px; position: relative; } #campusLocations .accordion .accordionTitle:after { width: 15px; height: 15px; position: absolute; right: 13px; top: 16px; z-index: 2; content: "\f061"; font-family: "Font Awesome 6 Free"; font-weight: 700; line-height: 1; } #campusLocations .accordion .accordionTitle:hover { cursor: pointer; } #campusLocations .accordion .accordionTitle.ui-state-active:after { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } #campusLocations .accordion .campus .campusInfo { padding: 0 20px 90px; } #campusLocations .accordion .campus .campusInfo a.readMore { bottom: 20px; left: 20px; } #socials .flex { flex-wrap: wrap; justify-content: center; } #socials .title { margin-bottom: 15px; } #socials .social, #socials .title { flex: 0 0 100%; text-align: center; } } @media (max-width: 1023px) { #pageHolder aside#sidebar .collapse, #pageHolder aside#sidebar .sectionHeader, #pageHolder aside#sidebar nav#sideMenu:after { background-color: #001f5f; } #pageHolder aside#sidebar nav#sideMenu { background-color: transparent; } #advert, #advert .advertInfo, #showcase .carouselItem { height: auto; } #advert .advertImage, #advert .advertInfo, #showcase .showcaseImage { width: 100%; position: relative; } #showcase .linearOverlay { display: none; } #showcase .container { padding: 0; } #showcase .carouselItem { background: linear-gradient(245deg, #00829b 0, #001f5f 100%) no-repeat; } #showcase .showcaseInfo { margin-left: auto; } #slider #pausePlay:hover { opacity: 1; } } #pageHolder:before, body.apprenticeships #pageHolder { background-image: url(../images/background/background-branding.svg); } @media (max-width: 1100px) { #events-testimonials .flex.space-between { flex-wrap: wrap; } #events-testimonials .eventsCarousel, #events-testimonials .testimonialsCarousel { flex: 0 0 100%; max-width: 100%; } } @media (min-width: 650px) and (max-width: 1100px) { #welcome .linkBlocks { gap: 0 2.907%; } #welcome .linkBlocks .block { flex: 0 0 48.5465%; margin-bottom: 20px; } #welcome .linkBlocks .block .content:before { top: -47px; } #welcome .linkBlocks .block.reverse a .content:before { bottom: -47px; } #events-testimonials .eventsCarousel .event .content { padding: 0 30px 40px; } } @media (min-width: 768px) and (max-width: 1100px) { #events-testimonials { padding: 50px 0 70px; } #events-testimonials .flex.space-between { gap: 0; margin-bottom: 150px; } #events-testimonials .eventsCarousel { margin-bottom: 50px; } #events-testimonials .eventsCarousel .owl-carousel { width: calc(100% + 14px); margin-left: -7px; } #events-testimonials .owl-nav { left: 7px; } #courseGuide .guidesImage { width: 387px; height: 275px; top: -32px; left: 3.5%; } #courseGuide .title { top: 20px; transform: none; line-height: 1.45; } #courseGuide .title, #courseGuide a.viewAll { left: 430px; } #courseGuide a.viewAll { right: auto; bottom: 28px; } } @media (min-width: 900px) and (max-width: 1100px) { #welcome .linkBlocks { padding: 0 5%; } } @media (min-width: 768px) and (max-width: 1200px) { #pageHolder #pageContent .tab-content .pageList .page .content .exerpt, #searchContainer .filterWrapper .filterItems { font-size: 0.875rem; } #pageHolder #pageContent .tab-content .pageList .page .content .title, #searchContainer .searchTitle { font-size: 1.25rem; } #slider .sliderText .slide .bannerText { width: 85%; } #slider .sliderText .slide .bannerText .clippy { padding: 40px 0 70px 50px; clip-path: polygon(0 0, 100% 0%, 70% 100%, 0 100%); } #slider .sliderText .slide .bannerText .clippy .title { padding-right: 100px; } #slider .sliderText .slide .bannerText .clippy .subtitle { padding-right: 200px; } #welcome { padding: 0 0 30px; } #latestNews, #welcome .holder { padding: 50px 0; } #welcome .holder .heritage { margin-top: 40px; } #welcome p { padding: 0; } } @media (min-width: 768px) and (max-width: 1300px) { #socials { padding: 15px 0; } #socials .title { position: absolute; left: 5%; top: 50%; transform: translateY(-50%); } #socials .flex { padding-left: 220px; flex-wrap: wrap; } #socials .flex .social { flex: 0 0 50%; margin: 5px 0; } } @media (min-width: 768px) and (max-width: 1400px) { .testimonialsCarousel .student-testimonial .profileInfo .quote { font-size: 1.375rem; } .testimonialsCarousel .student-testimonial .profileInfo .name { font-size: 1.6875rem; } #showcase .showcaseInfo .title { font-size: 4.0625rem; } body.university header#masthead .logoHolder, body.university header#masthead .logoHolder a { width: 268px; height: 60px; } #slider .heritage, #slider .searchBlock { bottom: 33px; } #slider .searchBlock { left: 110px; } #slider #pausePlay { right: 30px; bottom: 50px; } #slider a.accessible { bottom: 10px; } #courseGuide { width: 95%; } #courseGuide:before { width: 100%; } #campusLocations { padding: 50px 0 100px; } #campusLocations .container { padding: 0; } #campusLocations .owl-carousel { position: relative; left: 50%; width: 1300px; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); } #campusLocations .owl-carousel .owl-nav { height: 45px; bottom: -72px; left: 50%; width: 112px; margin-left: -56px; position: absolute; display: flex; justify-content: space-between; } #campusLocations .owl-carousel .owl-nav button { border: none; -webkit-appearance: none; padding: 0; text-align: center; height: 45px; width: 45px; margin: 0; position: relative; } #campusLocations .owl-carousel .owl-nav button:before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; font-family: "Font Awesome 6 Free"; font-weight: 900; text-align: center; line-height: 2.8125rem; } #campusLocations .owl-carousel .owl-nav button.owl-prev:before { content: "\f060"; } #campusLocations .owl-carousel .owl-nav button.owl-next:before { content: "\f061"; } #showcase .owl-nav { right: 5%; margin-right: 0; bottom: 50px; } #showcase .owl-dots { bottom: 50px; } } @media (min-width: 1024px) and (max-width: 1400px) { #pageHolder #pageContent .eventHolder .event .content .eventDate span span { font-size: 2.125rem; } #advert .advertInfo .advertTitle { font-size: 2.75rem; } #pageHolder #pageContent .eventHolder .event .content .eventDate span { font-size: 4rem; } header#masthead { height: 140px; } header#masthead .container { padding: 0 3%; } header#masthead .logoHolder { left: 3%; } header#masthead .logoHolder, header#masthead .logoHolder a { width: 240px; height: 84px; } #advert .advertInfo .advertLogo { width: 480px; } #advert .advertInfo .advertLogo img { width: 100%; } #advert .advertImage { width: 48%; background-position: top left !important; } } @media (min-width: 1100px) and (max-width: 1400px) { #welcome .linkBlocks { gap: 0 2%; justify-content: center; } #welcome .linkBlocks .block { flex: 0 0 32%; margin-bottom: 20px; } #welcome .linkBlocks .block .content:before { top: -45px; } #courseGuide .guidesImage { width: 488px; height: 350px; top: -100px; left: 3.5%; } #courseGuide .title { left: 530px; } #events-testimonials .flex.space-between { gap: 0; } #events-testimonials .eventsCarousel { flex: 0 0 360px; max-width: 360px; } #events-testimonials .eventsCarousel .event .content { padding: 0 40px 60px; } #events-testimonials .testimonialsCarousel { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 410px); max-width: calc(100% - 410px); } } @media (min-width: 1200px) and (max-width: 1500px) { #slider .sliderText .slide .bannerText { width: 900px; } #slider .sliderText .slide .bannerText .clippy { padding: 40px 220px 70px 60px; clip-path: polygon(0 0, 100% 0%, 70% 100%, 0 100%); } } @media (min-width: 768px) and (max-width: 1500px) { #slider .slick-dots { left: 60px; bottom: 28px; } } @media (min-width: 1400px) and (max-width: 1600px) { #slider .heritage #courseGuide { width: calc(100% - 50px); } #slider .heritage #courseGuide:before { width: 100%; } } @media (min-width: 1200px) and (max-width: 1700px) { #slider .heritage { right: 80px; } #slider #pausePlay { right: 30px; } } @media (min-width: 1024px) and (min-height: 700px) and (max-height: 1100px) { #slider, #slider .container { min-height: 100vh; } #slider .sliderText .slide .bannerText .title { margin-bottom: 20px; } #slider .sliderText .slide .bannerText a.readMore { margin-top: 25px; } #slider .searchBlock .searchElement .search-container, #slider .searchBlock .searchElement .search-container #search-button, #slider .searchBlock .searchElement .search-container input { height: 70px; } #slider .searchBlock .searchElement .title { margin-bottom: 10px; } } #slider.page, #slider.page .container { min-height: 0; } #slider.page .sliderImages { left: 0; width: 100%; top: 0; } #slider.page .sliderImages .slideImage { width: 100%; background-size: cover; background-position: center; } #slider.page, #slider.page .container, #slider.page .sliderImages, #slider.page .sliderImages .slide, #slider.page .sliderImages .slideImage { height: 48.75rem; max-height: 64vh; } html.tablet.landscape #slider.page, html.tablet.landscape #slider.page .container, html.tablet.landscape #slider.page .sliderImages, html.tablet.landscape #slider.page .sliderImages .slide, html.tablet.landscape #slider.page .sliderImages .slideImage { height: 31.25rem; } #pageHolder { clear: both; width: 100%; position: relative; } #pageHolder:before { content: ""; position: absolute; bottom: -800px; left: 0; width: 100%; height: 2001px; background-position: bottom center; background-repeat: no-repeat; } #pageHolder .breadcrumb { display: block; position: relative; width: 100%; margin-bottom: 2.5rem; padding-top: 35px; line-height: 1.5; clear: both; } #pageHolder .breadcrumb a { word-break: break-word; padding: 0.3125rem 0; margin: 0 1.125rem; position: relative; } #pageHolder .breadcrumb a:before { height: 15px; width: 1px; content: ""; position: absolute; left: -18px; top: 8px; transform: rotate(20deg); } #pageHolder .breadcrumb a:first-child { margin: 0 1.125rem 0 0; } #pageHolder .pageHolder { display: flex; width: 100%; position: relative; padding-bottom: 0; flex-direction: row-reverse; } #pageHolder aside#sidebar { flex: 0 0 280px; position: relative; margin: 20px 0 0; padding: 0; opacity: 1; overflow: hidden; } #pageHolder aside#sidebar nav#sideMenu { float: left; width: 100%; padding-bottom: 5rem; position: relative; } #pageContent .flex .sidebar .courseDetails:after, #pageHolder aside#sidebar nav#sideMenu:after { position: absolute; width: auto; left: -20px; right: -20px; height: 100px; content: ""; bottom: -60px; transform: rotate(12deg); } #pageHolder aside#sidebar .sectionHeader { display: block; float: left; position: relative; padding: 0 1.25rem; width: 100%; height: 1.875rem; line-height: 1.875rem; margin-top: 2.5rem; } #pageHolder aside#sidebar .sectionHeader .sectionTitle i { display: none; line-height: 3.125rem; -moz-transform: rotate(0); -o-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } #pageHolder aside#sidebar .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 { -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); margin: 0; } #pageHolder aside#sidebar ul { margin: 0; padding: 1.875rem 0 0.3125rem; list-style-type: none; float: left; width: 100%; z-index: 2000; position: relative; } #pageHolder aside#sidebar ul li { float: left; width: 100%; position: relative; padding: 0 20px; } #pageHolder aside#sidebar ul li a { padding: 8px 18px 8px 0; line-height: 1.4; position: relative; display: block; } #pageHolder aside#sidebar ul li a:before { position: absolute; width: 12px; left: 0; height: 0.625rem; padding: 0; z-index: 10; font-weight: 700; font-family: "Font Awesome 6 Free"; content: "\f061"; top: 1rem; line-height: 1; opacity: 0; } #pageHolder aside#sidebar ul li a.active, #pageHolder aside#sidebar ul li a:hover { padding: 8px 0 8px 18px; text-decoration: underline; } #pageHolder aside#sidebar ul li.has-sub > a { padding: 0.5rem 3.125rem 0.5rem 0; } #pageHolder aside#sidebar ul li.has-sub > a.active, #pageHolder aside#sidebar ul li.has-sub > a:hover { padding: 8px 32px 8px 18px; } #pageHolder aside#sidebar ul li ul { display: none; margin: 0.3125rem 0 0; padding: 0; } #pageHolder aside#sidebar ul li ul li { float: left; width: 100%; padding: 0; border: none; } #pageHolder aside#sidebar ul li ul li a { padding: 0.125rem 1.125rem 0.125rem 0; border: none; } #pageHolder aside#sidebar ul li ul li a.active, #pageHolder aside#sidebar ul li ul li a:hover { padding: 2px 0 2px 18px; } #pageHolder aside#sidebar ul li ul li a:before { top: 7px; } #pageHolder aside#sidebar ul li ul li.has-sub > a { padding: 0.125rem 3.125rem 0.125rem 0; } #pageHolder aside#sidebar ul li ul li.has-sub > a.active, #pageHolder aside#sidebar ul li ul li.has-sub > a:hover { padding: 2px 32px 2px 18px; } #pageHolder aside#sidebar ul li ul li li a { padding: 0.125rem 2.1875rem 0.125rem 1.125rem; } #pageHolder aside#sidebar ul li ul li li a:before { top: 7px; left: 10px; } #pageHolder aside#sidebar ul li ul li li a:hover { padding: 0.125rem 2.1875rem 0.125rem 1.75rem; } #pageHolder aside#sidebar ul li.has-sub.open .holder { top: -0.125rem; } #pageHolder aside#sidebar ul li.has-sub.open .holder:after, #pageHolder aside#sidebar ul li.has-sub.open ul li.has-sub.open .holder:after { content: "\f106"; } #pageHolder aside#sidebar ul li.has-sub.open ul li .holder { top: -2px; right: -10px; } #pageHolder aside#sidebar ul li.has-sub.open ul li .holder:after { content: "\f107"; top: 8px; } #pageHolder aside#sidebar ul li ul li .holder { right: -10px; } #pageHolder aside#sidebar .holder { width: 1.875rem; right: 0.625rem; position: absolute; top: 0; height: 100%; } #pageHolder aside#sidebar .holder:after { display: block; position: absolute; text-align: center; width: 100%; height: 0.75rem; padding: 0; z-index: 10; content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; top: 1rem; } #pageHolder aside#sidebar .searchElement { float: left; width: 100%; margin-top: 3px; padding: 0 20px 20px; display: flex; flex-wrap: wrap; z-index: 2; position: relative; } #pageContent .flex .sidebar .searchElement:before, #pageHolder aside#sidebar .searchElement:before { position: absolute; width: auto; left: -20px; right: -20px; height: 70px; content: ""; top: -35px; transform: rotate(12deg); } #pageContent .flex .sidebar .searchElement .title, #pageHolder #pageContent #mobile-search .searchElement .title, #pageHolder aside#sidebar .searchElement .title { flex: 1 0 100%; line-height: 1.2; margin-bottom: 15px; position: relative; z-index: 5; } #pageContent .flex .sidebar .searchElement .search-container, #pageHolder #pageContent #mobile-search .searchElement .search-container, #pageHolder aside#sidebar .searchElement .search-container { flex-grow: 1; position: relative; height: 50px; z-index: 5; } #pageContent .flex .sidebar .searchElement .search-container input, #pageHolder #pageContent #mobile-search .searchElement .search-container input, #pageHolder aside#sidebar .searchElement .search-container input { border: none; background: #fff; height: 50px; margin: 0; width: 90%; width: calc(100% - 40px); padding: 0 40px 0 12px; -webkit-appearance: none; z-index: 2; position: relative; color: #001f5f; } #pageHolder aside#sidebar .searchElement .search-container input::-webkit-input-placeholder { color: #001f5f; opacity: 1; } #pageHolder aside#sidebar .searchElement .search-container input:moz-placeholder { color: #001f5f; opacity: 1; } #pageHolder aside#sidebar .searchElement .search-container input::-moz-placeholder { color: #001f5f; opacity: 1; } #pageHolder aside#sidebar .searchElement .search-container input:-ms-input-placeholder { color: #001f5f; opacity: 1; } #pageContent .flex .sidebar .searchElement .search-container input:focus, #pageHolder #pageContent #mobile-search .searchElement .search-container input:focus, #pageHolder aside#sidebar .searchElement .search-container input:focus { outline: 0; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.38); } #pageContent .flex .sidebar .searchElement .search-container #search-button, #pageContent .flex .sidebar .searchElement .search-container #search-button2, #pageHolder aside#sidebar .searchElement .search-container #search-button, #pageHolder aside#sidebar .searchElement .search-container #search-button2 { position: absolute; width: 54px; height: 50px; right: 7px; top: 0; padding: 0; z-index: 5; border: none; -webkit-appearance: none; text-align: center; transform: skewX(-28deg); -webkit-transform: skewX(-28deg); } #pageHolder #pageContent { flex-grow: 1; max-width: 100%; position: relative; z-index: 2000; } #pageHolder #pageContent ol, #pageHolder #pageContent ul { line-height: 1.5; display: block; width: 100%; } #pageHolder #pageContent h1 { margin-top: 0; margin-bottom: 1.5625rem; position: relative; line-height: 1.4; display: inline-block; } #pageHolder #pageContent p { line-height: 1.5; margin: 0 0 1.5625rem; } #pageHolder #pageContent img.alignLeft, #pageHolder #pageContent img.alignRight { margin-bottom: 1.5625rem; -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; } #pageHolder #pageContent img.alignLeft { float: left; margin-right: 1.5625rem; } #pageHolder #pageContent img.alignRight { float: right; 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 .contactBlock, #pageHolder #pageContent blockquote { margin: 0 0 2.5rem; padding: 2.5rem 6.875rem 2.5rem 2.5rem; line-height: 1.5; background: linear-gradient(257deg, #00829b 0, #001f5f 100%) no-repeat padding-box; clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%); } #pageHolder #pageContent blockquote cite.author { margin-top: 0.5rem; display: block; text-transform: capitalize; font-style: normal; } #pageHolder #pageContent blockquote .speechMarks { margin-bottom: 0.9375rem; } #pageHolder #pageContent .oneThird { flex: 0 0 30%; } #pageHolder #pageContent .oneHalf { float: left; flex: 0 0 47.5%; } #pageHolder #pageContent .extraContent { padding: 1.25rem 0 0; display: flex; width: 100%; justify-content: space-between; } #pageHolder #pageContent #mobile-search { display: none; margin: 25px 0 0; } #pageHolder #pageContent #mobile-search .searchElement { float: left; width: 100%; margin-top: 3px; padding: 30px 20px 20px; display: flex; flex-wrap: wrap; z-index: 2; position: relative; clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%); } #pageHolder #pageContent #mobile-search .searchElement .search-container input::-webkit-input-placeholder { color: #001f5f; opacity: 1; } #pageHolder #pageContent #mobile-search .searchElement .search-container input:moz-placeholder { color: #001f5f; opacity: 1; } #pageHolder #pageContent #mobile-search .searchElement .search-container input::-moz-placeholder { color: #001f5f; opacity: 1; } #pageHolder #pageContent #mobile-search .searchElement .search-container input:-ms-input-placeholder { color: #001f5f; opacity: 1; } #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button, #pageHolder #pageContent #mobile-search .searchElement .search-container #search-button2 { position: absolute; width: 54px; height: 50px; right: 15px; top: 0; padding: 0; z-index: 5; border: none; -webkit-appearance: none; text-align: center; transform: skewX(-28deg); -webkit-transform: skewX(-28deg); } body.page.page-quick-links #pageHolder .pageHolder { padding-bottom: 80px; } body.page.page-quick-links #pageHolder:before { bottom: -950px; height: 2001px; } #pageHolder #pageContent.fullWidth aside#sidebar .sectionBranding { margin-bottom: 30px; text-align: right; } #accordion.mainDetail div.ui-accordion-content img, #pageContent #showcase.in-page.owl-carousel, #pageContent .flex .sidebar .sectionBranding img, #pageContent .quickLinks.courseListing.owl-carousel, #pageContent .quickLinks.courseListing.owl-carousel .link, #pageContent .relatedCareers img, #pageContent .studentWork img, #pageHolder #pageContent.fullWidth aside#sidebar .sectionBranding img { max-width: 100%; } body.page.sector-page .breadcrumb .sectionBranding { clear: both; flex: 0 0 100%; margin-top: 30px; display: none; } body.page.sector-page .breadcrumb .sectionBranding img { width: auto !important; } #accordion.mainDetail div.ui-accordion-content ul, #pageContent .flex .sidebar .sectionBranding.multiple-images img:first-child, #pageHolder #pageContent .tab-content .pageList .page:first-child, body.courseSearch.results #pageContent .courseListing, body.page.sector-page #pageHolder #pageContent.fullWidth aside#sidebar .sectionBranding.multiple-images img:first-child, body.page.sector-page #pageHolder aside#sidebar { margin-top: 0; } #pageHolder #pageContent .sitemap li ul li a.sub-title, body.page.sector-page #pageHolder #pageContent.fullWidth aside#sidebar .sectionBranding.multiple-images img, body.page.sector-page #pageHolder #pageContent.fullWidth.no-section-image aside#sidebar { margin-top: 20px; } #events-testimonials.in-page { padding: 80px 0 40px; } #events-testimonials.in-page .testimonialsCarousel { flex: 0 0 100%; max-width: 100%; } #events-testimonials.in-page .flex.space-between, body.apprenticeships #pageContent .subjectArea .subjectList, body.university #pageContent .subjectArea .subjectList { margin-bottom: 0; } #events-testimonials.in-page .testimonialsCarousel .owl-dots { right: auto; left: 0; bottom: -60px; top: auto; } #events-testimonials.in-page .testimonialsCarousel .owl-dots button { margin: 0 10px 0 0; } body.iot #pageHolder #pageContent blockquote { background: 0 0; } @media (max-width: 767px) { body.page a.accessible { top: 130px; } #slider.page { margin-top: 60px; } #slider.page, #slider.page .sliderImages, #slider.page .sliderImages .slide, #slider.page .sliderImages .slideImage { height: 13.75rem; min-height: 0; } #pageHolder aside#sidebar .sectionHeader, #pageHolder aside#sidebar ul li { padding: 0 20px; } #pageHolder #pageContent .breadcrumb, #pageHolder .arrows, body.page.sector-page #pageHolder #pageContent .breadcrumb a, body.page.sector-page #pageHolder #pageContent.fullWidth.no-section-image .breadcrumb { display: none; } #pageHolder .pageHolder { padding-bottom: 110px; } #pageHolder #pageContent { padding-top: 0px; } #pageHolder #pageContent .contactBlock, #pageHolder #pageContent blockquote { padding: 1.5625rem 1.25rem 2.75rem; margin: 1.875rem 0 0.625rem; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%); } #pageHolder #pageContent.fullWidth, body.page.sector-page #pageHolder #pageContent.fullWidth { padding-top: 15px; } #pageHolder #pageContent img { width: 100%; margin-left: 0 !important; margin-right: 0 !important; } #pageHolder #pageContent h1 { margin-bottom: 20px; } #pageHolder aside#sidebar nav#sideMenu ul { padding-bottom: 10px; } #pageHolder aside#sidebar nav#sideMenu ul ul, body.apprenticeships.sector-page #pageHolder { padding-bottom: 0; } #pageHolder aside#sidebar .collapse:after { display: block; transform: rotate(3deg); -webkit-transform: rotate(3deg); } #pageHolder #pageContent #mobile-search { margin-top: 10px; } body.page.page-quick-links #pageHolder .pageHolder { padding-bottom: 40px; } body.page.sector-page #pageHolder #pageContent .breadcrumb { display: block; margin-bottom: 20px; } #pageHolder #pageContent .contactBlock.no-top, #pageHolder #pageContent blockquote.no-top, body.page.sector-page #pageHolder #pageContent .breadcrumb .sectionBranding { margin-top: 0; } body.page.sector-page #pageHolder #pageContent.fullWidth.no-section-image { padding-top: 0; } body.page.sector-page #pageHolder #pageContent .breadcrumb .sectionBranding img { width: auto; max-width: 100%; } #events-testimonials.in-page { padding: 0 0 70px; } #events-testimonials.in-page .testimonialsCarousel { margin-top: 20px; } #events-testimonials.in-page .testimonialsCarousel .owl-dots { bottom: -45px; } #events-testimonials.in-page .owl-nav { width: 90px; left: auto; right: 0; } body.pre-16.landing #pageContent .flex.landing .landing-right .carousel { margin-bottom: 35px; } body.pre-16.landing #pageContent .flex.landing .landing-right .carousel.owl-carousel { margin-bottom: 50px; } } @media all and (min-width: 768px) and (max-width: 1023px) { #advert .advertInfo { padding: 50px 40px 50px 0; } #advert .advertInfo .advertTitle { line-height: 1.5; } #advert .advertInfo .advertLogo { position: relative; margin-top: 30px; bottom: auto; } #advert .advertImage { height: 480px; clip-path: polygon(0% 0%, 100% 40%, 100% 100%, 0% 100%); } #showcase .showcaseImage { height: 480px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%); } #showcase .showcaseInfo { padding: 0 5% 145px; } #showcase .owl-dots { left: 5%; } #showcase .owl-dots button:first-child { margin-left: 0; } #events-testimonials .sectionTitle, #pageHolder #pageContent .breadcrumb { margin-bottom: 25px; } #slider .searchBlock { width: 500px; } #pageHolder .pageHolder { padding-bottom: 35px; } #slider.page, #slider.page .sliderImages, #slider.page .sliderImages .slide, #slider.page .sliderImages .slideImage { height: 27.5rem; min-height: 0; } #pageHolder #pageContent { padding-top: 80px; } #pageHolder #pageContent.fullWidth { padding-top: 25px; } #pageHolder aside#sidebar .collapse:after { display: block; transform: rotate(3deg); -webkit-transform: rotate(3deg); } #pageHolder aside#sidebar nav#sideMenu ul { padding-bottom: 20px; position: relative; z-index: 5; } #pageHolder aside#sidebar nav#sideMenu ul ul { padding-bottom: 0; } #pageHolder #pageContent .breadcrumb.mob { display: block; } body.landing.school-leaver #pageHolder .pageHolder { padding-bottom: 50px; } #pageHolder #pageContent .contactBlock.no-top, #pageHolder #pageContent blockquote.no-top { margin-top: 0; } body.apprenticeships.sector-page #pageHolder { padding-bottom: 10px; } } @media (max-width: 1023px) { #pageHolder .pageHolder { gap: 0; flex-wrap: wrap; } body.page.no-sidebar #pageHolder .pageHolder { flex-direction: row; } #pageHolder aside#sidebar .collapse { position: relative; display: none; float: left; width: 100%; } #pageHolder aside#sidebar .collapse:after { content: ""; position: absolute; height: 50px; left: -20px; right: -20px; width: auto; bottom: -20px; display: block; background-color: #001f5f; } #pageHolder .breadcrumb a { margin: 0 15px; } #pageHolder .breadcrumb a:first-child { margin: 0 15px 0 0; } #pageHolder .breadcrumb a:before { left: -16px; } #pageHolder aside#sidebar { position: absolute; left: 0; top: 0; flex: 0 0 100%; width: 100%; z-index: 3000; margin-top: 0; } #pageHolder aside#sidebar ul { padding-top: 0; padding-bottom: 25px; } #pageHolder aside#sidebar ul li a:before { top: 14px; } #pageHolder aside#sidebar nav#sideMenu { padding-bottom: 50px; z-index: 5; } #pageHolder aside#sidebar .sectionHeader { margin-top: 0; padding-top: 0; height: 50px; line-height: 50px; } #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; top: 0; right: 20px; display: block; } #pageHolder #pageContent.fullWidth aside#sidebar .sectionBranding, #pageHolder .breadcrumb.dt, #pageHolder aside#sidebar .searchElement, #pageHolder aside#sidebar nav#sideMenu:after { display: none; } #pageHolder #pageContent #mobile-search, body.page.sector-page .breadcrumb .sectionBranding { display: block; } #pageHolder #pageContent h1 { line-height: 1.3; } body.sector-page #pageContent .flex.landing { flex-direction: column-reverse; } body.sector-page #pageContent .flex.landing .landing-left { padding-top: 80px; } body.sector-page #pageContent #sidebar { position: relative; overflow: visible; } body.sector-page #pageContent #sidebar .mobile-holder { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; } #pageHolder #pageContent .breadcrumb.mob, #pageHolder .breadcrumb { padding-top: 0; } body.page.sector-page #pageHolder #pageContent.fullWidth.no-section-image aside#sidebar { margin-top: 0; } } @media (max-width: 1249px) { #pageHolder #pageContent .extraContent { flex-wrap: wrap; } #pageHolder #pageContent .oneThird { flex: 0 0 100%; } } @media all and (min-width: 768px) and (max-width: 1400px) { body.page.page-quick-links #pageHolder .pageHolder { padding-bottom: 50px; } } @media all and (min-width: 1024px) and (max-width: 1400px) { nav#mainMenu { top: 50px; } nav#mainMenu ul { padding-left: 55px; } #pageHolder .pageHolder { padding-bottom: 100px; } body.apprenticeships.sector-page #pageHolder .pageHolder { padding-bottom: 60px; } } @media all and (min-width: 768px) and (max-width: 1500px) { body.page a.accessible { top: 210px; } } @media (min-width: 1400px) { .container { max-width: 87.5rem; padding: 0 3.125rem; margin: 0 auto; position: relative; } body.fixedHeader.iot header#masthead .logoHolder, body.fixedHeader.iot header#masthead .logoHolder a { width: 331px; height: 50px; } body.apprenticeships.sector-page #pageHolder .pageHolder { padding-bottom: 100px; } } @media (max-width: 1500px) { body.page a.accessible { position: absolute; width: 34px; height: 39px; left: 0; bottom: auto; overflow: hidden; background-color: #146ff8; } body.page a.accessible img { width: 64px; position: absolute; top: 45%; left: 50%; transform: translate(-50%, -50%); } } span.articleDate { line-height: 40px; display: inline-block; } #pageHolder #pageContent .eventHolder, #pageHolder #pageContent .newsHolder { width: 100%; margin: 1.875rem 0 0; padding: 0; list-style-type: none; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 0 2.06195%; } #pageHolder #pageContent .newsHolder .item { flex: 0 0 31.9587%; margin-bottom: 1.25rem; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28); position: relative; } .share { clear: both; width: 100%; margin: 1.25rem 0; padding-top: 30px; } .share span { display: inline-block; float: left; margin: 0 0.3125rem 0 0; line-height: 25px; } .share a { display: inline-block; margin-left: 0.4375rem; padding: 0 3px; } #pageHolder .quickLinks { display: flex; justify-content: left; margin-bottom: 210px; gap: 0 1.5386%; } #pageHolder .quickLinks a { display: block; flex: 0 0 32.3076%; max-width: 32.3076%; height: 220px; margin-top: 20px; position: relative; padding: 30px 190px 30px 30px; line-height: 1.4; } #pageHolder #pageContent .relatedEvents, #pageHolder #pageContent .relatedNews, #pageHolder aside#sidebar .relatedEvents, #pageHolder aside#sidebar .relatedNews { width: 100%; max-width: 100%; float: left; margin-top: 30px; position: relative; padding-bottom: 63px; } #pageHolder #pageContent .relatedEvents .sectionTitle, #pageHolder #pageContent .relatedNews .sectionTitle, #pageHolder aside#sidebar .relatedEvents .sectionTitle, #pageHolder aside#sidebar .relatedNews .sectionTitle { width: 100%; margin-bottom: 20px; } #pageHolder #pageContent .relatedEvents .owl-item, #pageHolder #pageContent .relatedNews .owl-item, #pageHolder aside#sidebar .relatedEvents .owl-item, #pageHolder aside#sidebar .relatedNews .owl-item { padding: 6px; } #pageHolder #pageContent .relatedNews .item, #pageHolder aside#sidebar .relatedNews .item { display: flex; width: 100%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28); position: relative; } #pageHolder #pageContent .relatedNews .item a, #pageHolder aside#sidebar .relatedNews .item a { display: flex; position: relative; flex-wrap: wrap; } #pageHolder #pageContent .relatedEvents .owl-nav, #pageHolder #pageContent .relatedNews .owl-nav, #pageHolder aside#sidebar .relatedEvents .owl-nav, #pageHolder aside#sidebar .relatedNews .owl-nav { height: 45px; bottom: -53px; left: 4px; width: 112px; position: absolute; display: flex; justify-content: space-between; } #pageHolder #pageContent .relatedNews { margin-top: 60px; display: none; } #pageHolder #pageContent .relatedNews .item a:hover .thumbnail img { transform: scale(1); -webkit-transform: scale(1); } button.more { padding: 0 20px; height: 44px; line-height: 44px; -webkit-appearance: none; margin: 20px 0 0; display: inline-block; border-style: solid; border-width: 1px; position: relative; } button.more:after { content: ""; position: absolute; } #pageHolder #pageContent .filterWrapper { width: 310px; float: right; } #pageHolder #pageContent .filterWrapper .sectionName { display: block; line-height: 40px; margin-right: 20px; } #pageHolder #pageContent .filterWrapper .filterGroup { width: 100%; height: 3.125rem; line-height: 3.125rem; position: relative; } #pageHolder #pageContent .filterWrapper .filterGroup.open:after { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } #pageHolder #pageContent .filterWrapper .filterGroup .filterName { padding: 0 35px 0 17px; } #pageHolder #pageContent .filterWrapper .filterGroup .filterName:after { content: ""; position: absolute; z-index: 1; width: 30px; height: 70px; top: -10px; right: -23px; background-color: #fff; transform: rotate(19deg); -webkit-transform: rotate(19deg); } #pageHolder #pageContent .filterWrapper .filterGroup:after { content: "\f063"; position: absolute; top: 0; width: 50px; height: 50px; font-family: "Font Awesome 6 Free"; font-weight: 700; right: 0.9375rem; text-align: center; transform-style: preserve-3d; transform: rotate(0); -webkit-transform: rotate(0); } #pageHolder #pageContent .filterWrapper .filterItems { position: absolute; width: 293px; top: 100%; left: 0; max-height: 300px; overflow: hidden; display: none; z-index: 100; } #pageHolder #pageContent .filterWrapper .filterItems .filterItem { padding: 0.3125rem 1.875rem 0.3125rem 1.0625rem; line-height: 1.4; } #pageHolder #pageContent .filterWrapper .filterItems .filterItem:first-child { padding: 0.9375rem 1.0625rem 0.3125rem; } #pageHolder #pageContent .filterWrapper .filterItems .filterItem:last-child { padding: 0.3125rem 1.0625rem 0.9375rem; } #pageHolder #pageContent .filterWrapper .filterItems .filterItem:focus, #pageHolder #pageContent .filterWrapper .filterItems .filterItem:hover { cursor: pointer; text-decoration: underline; z-index: 200; } @media (max-width: 650px) { #pageHolder #pageContent .newsHolder { gap: 0 0; } #pageHolder #pageContent .newsHolder .item { flex: 0 0 100%; } #pageHolder #pageContent .filterWrapper { max-width: 100%; } #pageHolder #pageContent .filterWrapper .filterItems { max-width: calc(100% - 17px); } #pageHolder #pageContent .relatedEvents .event .content:before { height: 150px; transform: rotate(10deg); -webkit-transform: rotate(10deg); top: -55px; } } @media (max-width: 767px) { span.articleDate { line-height: 20px; margin-bottom: 10px; } .fullWidth.alignCenter { margin-bottom: 50px; margin-top: 10px; } button.more { margin: 0; } .share { margin: 0 0 50px; padding-top: 20px; } #pageHolder .quickLinks { gap: 0; flex-wrap: wrap; margin-bottom: 100px; } #pageHolder .quickLinks a { flex: 0 0 100%; max-width: 100%; padding: 20px 140px 30px 20px; height: 180px; } #pageHolder .quickLinks a .thumbnail { width: 150px; clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 0% 100%); } #pageHolder .quickLinks a:after { left: 20px; bottom: 20px; opacity: 1; } #pageHolder #pageContent .relatedNews { margin-top: 30px; padding-bottom: 35px; } } @media all and (min-width: 767px) and (max-width: 1023px) { .share { margin: 20px 0 70px; } #pageHolder .quickLinks { gap: 0; flex-wrap: wrap; margin-bottom: 40px; } #pageHolder .quickLinks a { flex: 0 0 100%; max-width: 100%; padding: 30px 350px 30px 30px; } #pageHolder .quickLinks a .thumbnail { width: 340px; clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%); } #pageHolder .quickLinks a:after { left: 30px; opacity: 1; } .fullWidth.alignCenter { margin-bottom: 50px; } } @media all and (min-width: 650px) and (max-width: 900px) { #pageHolder #pageContent .newsHolder { gap: 0 2%; } #pageHolder #pageContent .newsHolder .item { flex: 0 0 49%; } } @media all and (min-width: 767px) and (max-width: 1300px) { #pageHolder #pageContent .filterWrapper { width: 390px; } #pageHolder #pageContent .filterWrapper .sectionName { display: inline-block; margin-right: 10px; } #pageHolder #pageContent .filterWrapper .filterGroup { width: 310px; display: inline-block; } } @media (max-width: 1300px) { #pageHolder #pageContent .filterWrapper { float: none; } } @media all and (min-width: 1024px) and (max-width: 1400px) { #pageHolder .quickLinks { gap: 0 2%; flex-wrap: wrap; margin-bottom: 100px; } #pageHolder .quickLinks a { flex: 0 0 49%; max-width: 49%; } #pageHolder .quickLinks a .thumbnail { width: 270px; } } .searchBox { display: none; height: 3.25rem; position: absolute; top: 0.8125rem; right: 20px; left: 80px; width: auto; z-index: 10; border-bottom-width: 2px; border-bottom-style: solid; } .searchBox input.searchInput { position: absolute; top: 0; left: 0; width: 90%; width: calc(100% - 15px); height: 3rem; padding: 0.5rem 0.9375rem 0 0; box-sizing: content-box; border: none; color: #001f5f; -webkit-appearance: none; z-index: 10; background: 0 0; outline: 0; } .searchBox input.searchInput::-webkit-input-placeholder { color: #001f5f; opacity: 1; } .searchBox input.searchInput:moz-placeholder { color: #001f5f; opacity: 1; } .searchBox input.searchInput::-moz-placeholder { color: #001f5f; opacity: 1; } .searchBox input.searchInput:-ms-input-placeholder { color: #001f5f; opacity: 1; } .searchBox.focus { border-color: #00829b; } .searchBox button.searchBTN { position: absolute; right: -1.25rem; top: 1.25rem; width: 1.25rem; border: none !important; -webkit-appearance: none; padding: 0; outline: 0; background-color: transparent; } .searchBox a.closeBTN { position: absolute; left: -1.6875rem; top: 0; z-index: 2; width: 1.6875rem; height: 4rem !important; margin-left: 0 !important; text-align: center; } .searchBox a.closeBTN i { line-height: 4rem !important; } #pageHolder #pageContent .tabs { display: flex; justify-content: space-between; margin-top: 40px; z-index: 100; width: calc(100% + 20px); } #pageHolder #pageContent .tabs .tab-item { position: relative; flex: 0 0 24.85%; } #pageHolder #pageContent .tabs .tab-item .skewBG, #searchContainer .filterWrapper .filterGroup .skewBG { position: absolute; top: 0; height: 100%; left: 0; width: 100%; z-index: 1; transform: skewX(-28deg); -webkit-transform: skewX(-28deg); } #pageHolder #pageContent .tabs .tab-item.courses { margin-left: -12px; } #pageHolder #pageContent .tabs .tab-item.courses:before { width: 28px; height: auto; top: -1px; bottom: -1px; content: ""; position: absolute; left: -13px; background-color: #fff; z-index: 5; } #pageHolder #pageContent .tabs .tab-item.events:after { width: 34px; height: auto; top: -1px; bottom: -1px; content: ""; position: absolute; right: -14px; background-color: #fff; z-index: 5; } #pageHolder #pageContent .tabs button { padding: 0 15px; --height: 50px; display: block; height: var(--height); line-height: var(--height); border: none; background: 0 0; -webkit-appearance: none; z-index: 10; width: 100%; position: relative; text-align: center; } #pageHolder #pageContent .tab-content { box-sizing: border-box; width: 100%; position: absolute; top: -999rem; opacity: 0; transition: opacity 0.2s ease-in; -webkit-transition: opacity 0.2s ease-in; visibility: hidden; height: 0; display: flex; justify-content: space-between; flex-wrap: wrap; } #pageHolder #pageContent .tab-content.current { opacity: 1; position: relative; top: auto; visibility: visible; height: auto; } #pageHolder #pageContent .tab-content .tabbedContentTitle { text-align: left; line-height: 1.2; margin: 45px 0 28px; width: 100%; } #pageHolder #pageContent .tab-content .pageList { width: 100%; display: block; } #pageHolder #pageContent .tab-content .pageList .page { display: flex; position: relative; margin-top: 20px; } #pageHolder #pageContent .tab-content .pageList .page .thumbnail { position: absolute; left: 0; top: 0; height: 100%; width: 420px; clip-path: polygon(0% 0%, 100% 0%, 65% 100%, 0% 100%); z-index: 2; } #pageContent .subjectArea.fullWidth .subjectList .subject .holder .image img, #pageContent .subjectArea.fullWidth .subjectList .subject a .image img, #pageHolder #pageContent .tab-content .pageList .page .thumbnail img { width: 100%; height: 100%; object-fit: cover; object-position: center; } #pageHolder #pageContent .tab-content .pageList .page .content { padding: 65px 110px 65px 440px; position: relative; z-index: 10; line-height: 1.5; } #pageContent .courseListing .courseList .course .title, #pageContent .subjectArea .courseList .course .title, #pageHolder #pageContent .tab-content .pageList .page .content .title { margin-bottom: 15px; } #pageHolder #pageContent .tab-content .pageList .page .gradient { position: absolute; top: 0; height: 100%; right: 0; left: 250px; width: auto; z-index: 1; background: linear-gradient(253deg, #00829b 0, #001f5f 100%) no-repeat padding-box; } body.search-results#pageHolder #pageContent { min-height: 1500px; } @media all and (min-width: 1200px) and (max-width: 1300px) { #pageHolder #pageContent .eventHolder .event .content { padding: 0 20px 45px !important; } } @media all and (min-width: 1200px) and (max-width: 1400px) { .searchBox { left: 63px; } } @media all and (min-width: 1400px) and (max-width: 1500px) { .searchBox { left: 70px; } } @media all and (min-width: 900px) and (max-width: 1200px) { #pageHolder #pageContent .tab-content .eventHolder, #pageHolder #pageContent .tab-content .newsHolder { gap: 0 2.06195%; } #pageHolder #pageContent .tab-content .eventHolder .event, #pageHolder #pageContent .tab-content .newsHolder .item { flex: 0 0 31.9587%; } } @media (min-width: 1200px) { body.fixedHeader nav#mainMenu { top: 0; } #pageHolder #pageContent .tab-content .eventHolder, #pageHolder #pageContent .tab-content .newsHolder { gap: 0 1.5385%; } #pageHolder #pageContent .tab-content .eventHolder .event, #pageHolder #pageContent .tab-content .newsHolder .item { flex: 0 0 23.8461%; } } #pageHolder #pageContent .sitemap { display: flex; justify-content: space-between; } #pageHolder #pageContent .sitemap .span_5_of_10 { width: 48%; flex: 0 0 48%; } #pageHolder #pageContent .sitemap ul { margin: 0; padding: 0; list-style-type: none; } #pageHolder #pageContent .sitemap li { list-style-position: inside; margin: 0; padding: 0; list-style-type: none; width: 100%; } #pageHolder #pageContent .sitemap li a { line-height: 1.2; text-decoration: none; position: relative; margin: 1.25rem 0; display: inline-block; } #pageHolder #pageContent .sitemap li ul { margin: 0.9375rem 0 0.625rem; } #pageHolder #pageContent .sitemap li ul li a { margin: 0.625rem 0 0; } #pageHolder #pageContent .sitemap li ul ul { margin: 0.3125rem 0 2.5rem; } #pageHolder #pageContent .sitemap .column.align_right li ul li a, #pageHolder #pageContent .sitemap li ul ul li a { margin: 0.25rem 0; } #pageHolder #pageContent .sitemap .column.align_right li ul li a.sub-title { margin: 10px 0 6px; } @media all and (min-width: 768px) and (max-width: 1250px) { #pageHolder #pageContent nav.sitemap .span_5_of_10 { flex: 0 0 48%; } } .eventInfo { display: flex; flex-wrap: wrap; position: relative; margin-bottom: 50px; } .eventInfo:after { content: ""; position: absolute; height: 3px; left: 0; width: 90px; bottom: -20px; } .eventInfo span { display: block; flex: 0 0 100%; line-height: 1.5; } .eventInfo span.eventTime { margin-top: 6px; } .eventInfo a.register { position: absolute; right: 0; top: 0; } #pageHolder #pageContent .relatedEvents .event .thumbnail, #pageHolder aside#sidebar .relatedEvents .event .thumbnail { width: 100%; overflow: hidden; height: 210px; } #pageHolder #pageContent .relatedEvents .event .content, #pageHolder aside#sidebar .relatedEvents .event .content { width: 100%; padding: 0 20px 40px; text-align: center; position: relative; } #pageHolder #pageContent .relatedEvents .event .content .eventDate.has-two-dates span, #pageHolder aside#sidebar .relatedEvents .event .content .eventDate.has-two-dates span { padding: 0 17px; position: relative; } #pageHolder #pageContent .eventHolder .event { flex: 0 0 31.9587%; margin-bottom: 1.25rem; position: relative; } #pageHolder #pageContent .eventHolder .event .thumbnail { width: 100%; overflow: hidden; height: 240px; } #pageHolder #pageContent .eventHolder .event .content { width: 100%; padding: 0 20px 45px; text-align: center; position: relative; } #pageHolder #pageContent .eventInformation { display: flex; flex-wrap: wrap; margin-bottom: 30px; } #pageHolder #pageContent .eventInformation div { flex: 1 1 100%; line-height: 1.5; } @media (max-width: 700px) { #pageHolder #pageContent .eventHolder { gap: 0 0; } #pageHolder #pageContent .eventHolder .event { flex: 0 0 100%; } #pageHolder #pageContent .eventHolder .event .content:before { transform: rotate(8deg); -webkit-transform: rotate(8deg); } } @media all and (min-width: 767px) and (max-width: 1023px) { #pageHolder #pageContent .relatedEvents .event .thumbnail { height: 300px; } #pageHolder #pageContent .relatedEvents { margin-top: 60px; } } @media all and (min-width: 700px) and (max-width: 1300px) { #pageHolder #pageContent .eventHolder { gap: 0 2%; } #pageHolder #pageContent .eventHolder .event { flex: 0 0 49%; } } #slider .sliderText .slide.sixth-form-green.withVideo .bannerText .clippy, #slider .sliderText .slide.sixth-form-green.withVideo .bannerText:before { background-color: rgba(7, 107, 59, 0.7); } #advert.technical-orange, #pageContent .courseListing .courseList .course.technical-orange .buttons a, #pageContent .flex.landing .landing-right .quickLinks.courseListing .link.technical-orange a, #slider .searchBlock.technical-orange .searchElement .search-container #search-button, #slider .sliderText .slide.technical-orange .bannerText .clippy, #slider .sliderText .slide.technical-orange .bannerText:before, #welcome .linkBlocks .accordionTitle.technical-orange, #welcome .linkBlocks .block.technical-orange .content, #welcome .linkBlocks .block.technical-orange .content:before, .mm-listview li.technical-orange, body.landing #pageContent .sectorQuickLinks .link.technical-orange .info, body.landing #pageContent .sectorQuickLinks .link.technical-orange .info:before, body.technical #pageContent .courseListing .courseList .course .buttons a, body.technical #pageContent .flex .sidebar .courseDetails, body.technical #pageContent .linkBlocks .block .content, body.technical #pageContent .linkBlocks .block .content:before, body.technical #pageContent .sectorQuickLinks .link .info, body.technical #pageContent .sectorQuickLinks .link .info:before, body.technical #pageContent .subjectArea.fullWidth .subjectList .subject, body.technical #pageHolder .quickLinks.courseListing a, body.technical #pageHolder aside#sidebar .collapse, body.technical #pageHolder aside#sidebar .collapse:after, body.technical #pageHolder aside#sidebar .sectionHeader, body.technical #pageHolder aside#sidebar nav#sideMenu, body.technical #searchContainer .filterWrapper, body.technical #searchContainer .filterWrapper .filterGroup:before, body.technical #searchContainer .filterWrapper .search .unskew:before, body.technical #searchContainer .overflow:before, body.technical .subjectArea .subjectList .subject a .overlay, nav#mainMenu .megaMenu ul li.technical-orange ul.subSub, nav#mainMenu .megaMenu ul li.technical-orange ul.subSub:after, nav#mainMenu .megaMenu ul li.technical-orange.open > a, nav#mainMenu .megaMenu ul li.technical-orange:hover > a, nav#mainMenu .megaMenu ul li.technical-orange > a:hover { background-color: #df3601; } #slider .sliderText .slide.technical-orange.withVideo .bannerText .clippy, #slider .sliderText .slide.technical-orange.withVideo .bannerText:before { background-color: rgba(223, 54, 1, 0.7); } #advert.commercial-purple, #pageContent .courseListing .courseList .course.commercial-purple .buttons a, #pageContent .flex.landing .landing-right .quickLinks.courseListing .link.commercial-purple a, #slider .searchBlock.commercial-purple .searchElement .search-container #search-button, #slider .sliderText .slide.commercial-purplee .bannerText .clippy, #slider .sliderText .slide.commercial-purple .bannerText:before, #welcome .linkBlocks .accordionTitle.commercial-purple, #welcome .linkBlocks .block.commercial-purple .content, #welcome .linkBlocks .block.commercial-purple .content:before, .mm-listview li.commercial-purple, body.landing #pageContent .sectorQuickLinks .link.commercial-purple .info, body.landing #pageContent .sectorQuickLinks .link.commercial-purple .info:before, body.commercialTraining #pageContent .courseListing .courseList .course .buttons a, body.commercialTraining #pageContent .flex .sidebar .courseDetails, body.commercialTraining #pageContent .linkBlocks .block .content, body.commercialTraining #pageContent .linkBlocks .block .content:before, body.commercialTraining #pageContent .sectorQuickLinks .link .info, body.commercialTraining #pageContent .sectorQuickLinks .link .info:before, body.commercialTraining #pageContent .subjectArea.fullWidth .subjectList .subject, body.commercialTraining #pageHolder .quickLinks.courseListing a, body.commercialTraining #pageHolder aside#sidebar .collapse, body.commercialTraining #pageHolder aside#sidebar .collapse:after, body.commercialTraining #pageHolder aside#sidebar .sectionHeader, body.commercialTraining #pageHolder aside#sidebar nav#sideMenu, body.commercialTraining #searchContainer .filterWrapper, body.commercialTraining #searchContainer .filterWrapper .filterGroup:before, body.commercialTraining #searchContainer .filterWrapper .search .unskew:before, body.commercialTraining #searchContainer .overflow:before, body.commercialTraining.subjectArea .subjectList .subject a .overlay, nav#mainMenu .megaMenu ul li.commercial-purple ul.subSub, nav#mainMenu .megaMenu ul li.commercial-purple ul.subSub:after, nav#mainMenu .megaMenu ul li.commercial-purple.open > a, nav#mainMenu .megaMenu ul li.commercial-purple:hover > a, nav#mainMenu .megaMenu ul li.commercial-purple > a:hover { background-color: #b0138E; } #slider .sliderText .slide.commercial-purple.withVideo .bannerText .clippy, #slider .sliderText .slide.commercial-purple.withVideo .bannerText:before { background-color: rgba(176,19,142, 0.7); } #advert.iot-blue, #pageContent .courseListing .courseList .course.iot-blue .buttons a, #pageContent .flex.landing .landing-right .quickLinks.courseListing .link.iot-blue a, #slider .searchBlock.iot-blue .searchElement .search-container #search-button, #slider .sliderText .slide.iot-blue .bannerText .clippy, #slider .sliderText .slide.iot-blue .bannerText:before, #welcome .linkBlocks .accordionTitle.io-blue, #welcome .linkBlocks .block.iot-blue .content, #welcome .linkBlocks .block.iot-blue .content:before, .mm-listview li.iot-blue, body.iot #pageContent .courseListing .courseList .course .buttons a, body.iot #pageContent .courseListing .courseList.owl-carousel .owl-dots button.active, body.iot #pageContent .courseListing .courseList.owl-carousel .owl-nav button, body.iot #pageContent .flex .sidebar .courseDetails, body.iot #pageContent .linkBlocks .block .content, body.iot #pageContent .linkBlocks .block .content:before, body.iot #pageContent .sectorQuickLinks .link .info, body.iot #pageContent .sectorQuickLinks .link .info:before, body.iot #pageContent .subjectArea.fullWidth .subjectList .subject, body.iot #pageHolder #pageContent blockquote, body.iot #pageHolder .quickLinks.courseListing a, body.iot #pageHolder aside#sidebar .collapse, body.iot #pageHolder aside#sidebar .collapse:after, body.iot #pageHolder aside#sidebar .sectionHeader, body.iot #pageHolder aside#sidebar nav#sideMenu, body.iot #searchContainer .filterWrapper, body.iot #searchContainer .filterWrapper .filterGroup:before, body.iot #searchContainer .filterWrapper .search .unskew:before, body.iot #searchContainer .overflow:before, body.iot .fullWidth.alignCenter button.more, body.iot .subjectArea .subjectList .subject a .overlay, body.landing #pageContent .sectorQuickLinks .link.iot-blue .info, body.landing #pageContent .sectorQuickLinks .link.iot-blue .info:before, nav#mainMenu .megaMenu ul li.iot-blue ul.subSub, nav#mainMenu .megaMenu ul li.iot-blue ul.subSub:after, nav#mainMenu .megaMenu ul li.iot-blue.open > a, nav#mainMenu .megaMenu ul li.iot-blue:hover > a, nav#mainMenu .megaMenu ul li.iot-blue > a:hover { background-color: #123995; } #slider .sliderText .slide.iot-blue.withVideo .bannerText .clippy, #slider .sliderText .slide.iot-blue.withVideo .bannerText:before { background-color: rgba(18, 57, 149, 0.7); } body.iot #pageContent .courseListing .courseList.owl-carousel .owl-nav button:hover { background-color: #ffe6e1; } #advert.apprenticeship-blue, #pageContent .courseListing .courseList .course.apprenticeship-blue .buttons a, #pageContent .flex.landing .landing-right .quickLinks.courseListing .link.apprenticeship-blue a, #slider .searchBlock.apprenticeship-blue .searchElement .search-container #search-button, #slider .sliderText .slide.apprenticeship-blue .bannerText .clippy, #slider .sliderText .slide.apprenticeship-blue .bannerText:before, #welcome .linkBlocks .accordionTitle.apprenticeship-blue, #welcome .linkBlocks .block.apprenticeship-blue .content, #welcome .linkBlocks .block.apprenticeship-blue .content:before, .mm-listview li.apprenticeship-blue, body.apprenticeships #pageContent .courseListing .courseList .course .buttons a, body.apprenticeships #pageContent .flex .sidebar .courseDetails, body.apprenticeships #pageContent .linkBlocks .block .content, body.apprenticeships #pageContent .linkBlocks .block .content:before, body.apprenticeships #pageContent .sectorQuickLinks .link .info, body.apprenticeships #pageContent .sectorQuickLinks .link .info:before, body.apprenticeships #pageContent .subjectArea.fullWidth .subjectList .subject, body.apprenticeships #pageHolder .quickLinks.courseListing a, body.apprenticeships #pageHolder aside#sidebar .collapse, body.apprenticeships #pageHolder aside#sidebar .collapse:after, body.apprenticeships #pageHolder aside#sidebar .sectionHeader, body.apprenticeships #pageHolder aside#sidebar nav#sideMenu, body.apprenticeships #searchContainer .filterWrapper, body.apprenticeships #searchContainer .filterWrapper .filterGroup:before, body.apprenticeships #searchContainer .filterWrapper .search .unskew:before, body.apprenticeships #searchContainer .overflow:before, body.apprenticeships .subjectArea .subjectList .subject a .overlay, body.landing #pageContent .sectorQuickLinks .link.apprenticeship-blue .info, body.landing #pageContent .sectorQuickLinks .link.apprenticeship-blue .info:before, nav#mainMenu .megaMenu ul li.apprenticeship-blue ul.subSub, nav#mainMenu .megaMenu ul li.apprenticeship-blue ul.subSub:after, nav#mainMenu .megaMenu ul li.apprenticeship-blue.open > a, nav#mainMenu .megaMenu ul li.apprenticeship-blue:hover > a, nav#mainMenu .megaMenu ul li.apprenticeship-blue > a:hover { background-color: #017acd; } #slider .sliderText .slide.apprenticeship-blue.withVideo .bannerText .clippy, #slider .sliderText .slide.apprenticeship-blue.withVideo .bannerText:before { background-color: rgba(1, 122, 205, 0.7); } #advert.university-green, #pageContent .courseListing .courseList .course.university-green .buttons a, #pageContent .flex.landing .landing-right .quickLinks.courseListing .link.university-green a, #slider .searchBlock.university-green .searchElement .search-container #search-button, #slider .sliderText .slide.university-green .bannerText .clippy, #slider .sliderText .slide.university-green .bannerText:before, #welcome .linkBlocks .accordionTitle.university-green, #welcome .linkBlocks .block.university-green .content, #welcome .linkBlocks .block.university-green .content:before, .mm-listview li.university-green, body.landing #pageContent .sectorQuickLinks .link.university-green .info, body.landing #pageContent .sectorQuickLinks .link.university-green .info:before, body.university #pageContent .courseListing .courseList .course .buttons a, body.university #pageContent .flex .sidebar .courseDetails, body.university #pageContent .linkBlocks .block .content, body.university #pageContent .linkBlocks .block .content:before, body.university #pageContent .sectorQuickLinks .link .info, body.university #pageContent .sectorQuickLinks .link .info:before, body.university #pageContent .subjectArea.fullWidth .subjectList .subject, body.university #pageHolder .quickLinks.courseListing a, body.university #pageHolder aside#sidebar .collapse, body.university #pageHolder aside#sidebar .collapse:after, body.university #pageHolder aside#sidebar .sectionHeader, body.university #pageHolder aside#sidebar nav#sideMenu, body.university #searchContainer .filterWrapper, body.university #searchContainer .filterWrapper .filterGroup:before, body.university #searchContainer .filterWrapper .search .unskew:before, body.university #searchContainer .overflow:before, body.university .subjectArea .subjectList .subject a .overlay, nav#mainMenu .megaMenu ul li.university-green ul.subSub, nav#mainMenu .megaMenu ul li.university-green ul.subSub:after, nav#mainMenu .megaMenu ul li.university-green.open > a, nav#mainMenu .megaMenu ul li.university-green:hover > a, nav#mainMenu .megaMenu ul li.university-green > a:hover { background-color: #115e6b; } #slider .sliderText .slide.university-green.withVideo .bannerText .clippy, #slider .sliderText .slide.university-green.withVideo .bannerText:before { background-color: rgba(17, 94, 107, 0.7); } #advert.adult-red, #pageContent .courseListing .courseList .course.adult-red .buttons a, #pageContent .flex.landing .landing-right .quickLinks.courseListing .link.adult-red a, #slider .searchBlock.adult-red .searchElement .search-container #search-button, #slider .sliderText .slide.adult-red .bannerText .clippy, #slider .sliderText .slide.adult-red .bannerText:before, #welcome .linkBlocks .accordionTitle.adult-red, #welcome .linkBlocks .block.adult-red .content, #welcome .linkBlocks .block.adult-red .content:before, .mm-listview li.adult-red, body.adult #pageContent .courseListing .courseList .course .buttons a, body.adult #pageContent .flex .sidebar .courseDetails, body.adult #pageContent .linkBlocks .block .content, body.adult #pageContent .linkBlocks .block .content:before, body.adult #pageContent .sectorQuickLinks .link .info, body.adult #pageContent .sectorQuickLinks .link .info:before, body.adult #pageContent .subjectArea.fullWidth .subjectList .subject, body.adult #pageHolder .quickLinks.courseListing a, body.adult #pageHolder aside#sidebar .collapse, body.adult #pageHolder aside#sidebar .collapse:after, body.adult #pageHolder aside#sidebar .sectionHeader, body.adult #pageHolder aside#sidebar nav#sideMenu, body.adult #searchContainer .filterWrapper, body.adult #searchContainer .filterWrapper .filterGroup:before, body.adult #searchContainer .filterWrapper .search .unskew:before, body.adult #searchContainer .overflow:before, body.adult .subjectArea .subjectList .subject a .overlay, body.landing #pageContent .sectorQuickLinks .link.adult-red .info, body.landing #pageContent .sectorQuickLinks .link.adult-red .info:before, nav#mainMenu .megaMenu ul li.adult-red ul.subSub, nav#mainMenu .megaMenu ul li.adult-red ul.subSub:after, nav#mainMenu .megaMenu ul li.adult-red.open > a, nav#mainMenu .megaMenu ul li.adult-red:hover > a, nav#mainMenu .megaMenu ul li.adult-red > a:hover { background-color: #a61932; } #slider .sliderText .slide.adult-red.withVideo .bannerText .clippy, #slider .sliderText .slide.adult-red.withVideo .bannerText:before { background-color: rgba(166, 25, 50, 0.7); } body.adult #searchContainer .advancedFilters, body.adult #searchContainer .advancedFilters .filterGroup:before { background-color: #cd4a3b; } #advert.technical-orange .advertInfo .readMore, #pageContent .courseListing .courseList .course.technical-orange .buttons a:hover, #pageContent .courseListing .courseList .course.technical-orange .title, #pageContent .sectorQuickLinks .link.technical-orange a .info .readMore, #showcase .carouselItem.technical-orange .showcaseInfo a.readMore, #showcase .owl-nav.technical-orange button, #slider .sliderText .slide.technical-orange .bannerText a.readMore, #welcome .linkBlocks .block.technical-orange a .content .readMore, body.technical #pageContent .courseListing .courseList .course .buttons a:hover, body.technical #pageContent .courseListing .courseList .course .details strong, body.technical #pageContent .courseListing .courseList .course .title, body.technical #pageContent .flex .sidebar .courseDetails a.applyNow, body.technical #pageContent .linkBlocks .block .content .readMore, body.technical #pageContent .sectorQuickLinks .link .info .readMore, body.technical #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.technical #searchContainer .filterWrapper #search-button:hover, nav#mainMenu .megaMenu ul li.technical-orange ul.subSub a.viewAll { color: #df3601; } #advert.commercial-purple .advertInfo .readMore, #pageContent .courseListing .courseList .course.commercial-purple .buttons a:hover, #pageContent .courseListing .courseList .course.commercial-purple .title, #pageContent .sectorQuickLinks .link.commercial-purple a .info .readMore, #showcase .carouselItem.commercial-purple .showcaseInfo a.readMore, #showcase .owl-nav.commercial-purple button, #slider .sliderText .slide.commercial-purple .bannerText a.readMore, #welcome .linkBlocks .block.commercial-purple a .content .readMore, body.commercialTraining #pageContent .courseListing .courseList .course .buttons a:hover, body.commercialTraining #pageContent .courseListing .courseList .course .details strong, body.commercialTraining #pageContent .courseListing .courseList .course .title, body.commercialTraining #pageContent .flex .sidebar .courseDetails a.applyNow, body.commercialTraining #pageContent .linkBlocks .block .content .readMore, body.commercialTraining #pageContent .sectorQuickLinks .link .info .readMore, body.commercialTraining #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.commercialTraining #searchContainer .filterWrapper #search-button:hover, nav#mainMenu .megaMenu ul li.commercial-purple ul.subSub a.viewAll { color: #b0138e; } #showcase .carouselItem.commercial-purple .showcaseInfo a.readMore:hover{color:white !important;} body.commercialTraining #pageContent .linkBlocks .block .content .readMore:hover, body.commercialTraining #pageContent .linkBlocks .block a:hover .content .readMore {border-color:#592b8A !important;background-color:#592b8A !important;color:white !important;} #advert.iot-blue .advertInfo .readMore, #pageContent .courseListing .courseList .course.iot-blue .buttons a:hover, #pageContent .courseListing .courseList .course.iot-blue .title, #showcase .carouselItem.iot-blue .showcaseInfo a.readMore, #showcase .owl-nav.iot-blue button, #slider .sliderText .slide.iot-blue .bannerText a.readMore, #welcome .linkBlocks .block.iot-blue a .content .readMore, body.iot #accordion.mainDetail .accordion-title, body.iot #pageContent .courseListing .count, body.iot #pageContent .courseListing .courseList .course .buttons a:hover, body.iot #pageContent .courseListing .courseList .course .details strong, body.iot #pageContent .courseListing .courseList .course .title, body.iot #pageContent .courseListing .courseList.owl-carousel .owl-nav button:hover, body.iot #pageContent .courseListing .sectorTitle, body.iot #pageContent .flex .sidebar .courseDetails a.applyNow, body.iot #pageContent .linkBlocks .block .content .readMore, body.iot #pageContent .partnersStakeholders .sectorTitle, body.iot #pageContent .relatedCareers .sectionTitle, body.iot #pageContent .sectorQuickLinks .link .info .readMore, body.iot #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.iot #pageContent .subjectArea .flex, body.iot #pageHolder #pageContent .flex.landing .landing-left p a, body.iot #pageHolder #pageContent h1, body.iot #pageHolder #pageContent h2, body.iot #pageHolder #pageContent h3, body.iot #pageHolder #pageContent h4, body.iot #pageHolder #pageContent h5, body.iot #searchContainer .filterWrapper #search-button:hover, body.iot .fullWidth.alignCenter button.more:hover, body.landing #pageContent .sectorQuickLinks .link.iot-blue a .info .readMore, nav#mainMenu .megaMenu ul li.iot-blue ul.subSub a.viewAll { color: #123995; } #advert.apprenticeship-blue .advertInfo .readMore, #pageContent .courseListing .courseList .course.apprenticeship-blue .buttons a:hover, #pageContent .courseListing .courseList .course.apprenticeship-blue .title, #pageContent .sectorQuickLinks .link.apprenticeship-blue a .info .readMore, #showcase .carouselItem.apprenticeship-blue .showcaseInfo a.readMore, #showcase .owl-nav.apprenticeship-blue button, #slider .sliderText .slide.apprenticeship-blue .bannerText a.readMore, #welcome .linkBlocks .block.apprenticeship-blue a .content .readMore, body.apprenticeships #pageContent .courseListing .courseList .course .buttons a:hover, body.apprenticeships #pageContent .courseListing .courseList .course .details strong, body.apprenticeships #pageContent .courseListing .courseList .course .title, body.apprenticeships #pageContent .flex .sidebar .courseDetails a.applyNow, body.apprenticeships #pageContent .linkBlocks .block .content .readMore, body.apprenticeships #pageContent .sectorQuickLinks .link .info .readMore, body.apprenticeships #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.apprenticeships #searchContainer .filterWrapper #search-button:hover, body.apprenticeships.landing #pageContent .sectorQuickLinks .link .info .readMore, nav#mainMenu .megaMenu ul li.apprenticeship-blue ul.subSub a.viewAll { color: #017acd; } #advert.university-green .advertInfo .readMore, #pageContent .courseListing .courseList .course.university-green .buttons a:hover, #pageContent .courseListing .courseList .course.university-green .title, #pageContent .sectorQuickLinks .link.university-green a .info .readMore, #showcase .carouselItem.university-green .showcaseInfo a.readMore, #showcase .owl-nav.university-green button, #slider .sliderText .slide.university-green .bannerText a.readMore, #welcome .linkBlocks .block.university-green a .content .readMore, body.university #pageContent .courseListing .courseList .course .buttons a:hover, body.university #pageContent .courseListing .courseList .course .details strong, body.university #pageContent .courseListing .courseList .course .title, body.university #pageContent .flex .sidebar .courseDetails a.applyNow, body.university #pageContent .linkBlocks .block .content .readMore, body.university #pageContent .sectorQuickLinks .link .info .readMore, body.university #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.university #searchContainer .filterWrapper #search-button:hover, nav#mainMenu .megaMenu ul li.university-green ul.subSub a.viewAll { color: #115e6b; } #advert.adult-red .advertInfo .readMore, #pageContent .courseListing .courseList .course.adult-red .buttons a:hover, #pageContent .courseListing .courseList .course.adult-red .title, #pageContent .sectorQuickLinks .link.adult-red a .info .readMore, #showcase .carouselItem.adult-red .showcaseInfo a.readMore, #showcase .owl-nav.adult-red button, #slider .sliderText .slide.adult-red .bannerText a.readMore, #welcome .linkBlocks .block.adult-red a .content .readMore, body.adult #pageContent .courseListing .courseList .course .buttons a:hover, body.adult #pageContent .courseListing .courseList .course .details strong, body.adult #pageContent .courseListing .courseList .course .title, body.adult #pageContent .flex .sidebar .courseDetails a.applyNow, body.adult #pageContent .linkBlocks .block .content .readMore, body.adult #pageContent .sectorQuickLinks .link .info .readMore, body.adult #pageContent .sectorQuickLinks .link a .info .readMore, body.adult #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content .buttons a, body.adult #searchContainer .filterWrapper #search-button:hover, nav#mainMenu .megaMenu ul li.adult-red ul.subSub a.viewAll { color: #a61932; } body.adult #pageContent .courseListing .courseList .course.apprenticship-blue .buttons a:hover, body.adult #pageContent .courseListing .courseList .course.apprenticship-blue .details strong, body.adult #pageContent .courseListing .courseList .course.apprenticship-blue .title{ color: #017acd; } #pageContent .courseListing .courseList .course.sixth-form-green .buttons a, body.sixth-form #pageContent .courseListing .courseList .course .buttons a { border-color: #076b3b !important; background-color: #076b3b !important; } #pageContent .courseListing .courseList .course.sixth-form-green .buttons a:hover, body.sixth-form #pageContent .courseListing .courseList .course .buttons a:hover { border-color: #076b3b !important; background-color: #fff !important; color: #076b3b !important; } #pageContent .courseListing .courseList .course.sixth-form-green a.triangleLink, body.sixth-form #pageContent .courseListing .courseList .course a.triangleLink { border-color: transparent transparent #076b3b; } #pageContent .courseListing .courseList .course.technical-orange .buttons a, body.technical #pageContent .courseListing .courseList .course .buttons a { border-color: #df3601 !important; background-color: #df3601 !important; } #pageContent .courseListing .courseList .course.technical-orange .buttons a:hover, body.technical #pageContent .courseListing .courseList .course .buttons a:hover { border-color: #df3601 !important; background-color: #fff !important; color: #df3601 !important; } #pageContent .courseListing .courseList .course.technical-orange a.triangleLink, body.technical #pageContent .courseListing .courseList .course a.triangleLink { border-color: transparent transparent #df3601; } #pageContent .courseListing .courseList .course.commercial-purple .buttons a, body.commercial-training #pageContent .courseListing .courseList .course .buttons a { border-color: #B0138e !important; background-color: #B0138e !important; } #pageContent .courseListing .courseList .course.commercial-purple .buttons a:hover, body.commercial-training #pageContent .courseListing .courseList .course .buttons a:hover { border-color: #B0138e !important; background-color: #fff !important; color: #B0138e !important; } #pageContent .courseListing .courseList .course.commercial-purple a.triangleLink, body.commercial-training #pageContent .courseListing .courseList .course a.triangleLink { border-color: transparent transparent #B0138e; } #pageContent .courseListing .courseList .course.iot-blue .buttons a, body.iot #accordion.mainDetail, body.iot #accordion.mainDetail .accordion-title, body.iot #pageContent .courseListing .courseList .course .buttons a, body.iot #pageContent .courseListing .courseList.owl-carousel .owl-dots button, body.iot .fullWidth.alignCenter button.more { border-color: #141314; } #pageContent .courseListing .courseList .course.iot-blue a.triangleLink, body.iot #pageContent .courseListing .courseList .course a.triangleLink { border-color: transparent transparent #123995; } #pageContent .courseListing .courseList .course.apprenticeship-blue .buttons a, body.apprenticeships #pageContent .courseListing .courseList .course .buttons a { border-color: #017acd !important; background-color: #017acd !important; } #pageContent .courseListing .courseList .course.apprenticeship-blue .buttons a:hover, body.apprenticeships #pageContent .courseListing .courseList .course .buttons a:hover { border-color: #017acd !important; background-color: #fff !important; color: #017acd !important; } #pageContent .courseListing .courseList .course.apprenticeship-blue a.triangleLink, body.apprenticeships #pageContent .courseListing .courseList .course a.triangleLink { border-color: transparent transparent #017acd; } #pageContent .courseListing .courseList .course.university-green .buttons a, body.university #pageContent .courseListing .courseList .course .buttons a { border-color: #115e6b !important; background-color: #115e6b !important; } #pageContent .courseListing .courseList .course.university-green .buttons a:hover, body.university #pageContent .courseListing .courseList .course .buttons a:hover { border-color: #115e6b !important; background-color: #fff !important; color: #115e6b !important; } #pageContent .courseListing .courseList .course.university-green a.triangleLink, body.university #pageContent .courseListing .courseList .course a.triangleLink { border-color: transparent transparent #115e6b !important; } #pageContent .courseListing .courseList .course.adult-red .buttons a, body.adult #pageContent .courseListing .courseList .course .buttons a { border-color: #a61932 !important; background-color: #a61932 !important; } #pageContent .courseListing .courseList .course.adult-red .buttons a:hover, body.adult #pageContent .courseListing .courseList .course .buttons a:hover { border-color: #a61932 !important; background-color: #fff !important; color: #a61932 !important; } #pageContent .courseListing .courseList .course.adult-red a.triangleLink, body.adult #pageContent .courseListing .courseList .course a.triangleLink { border-color: transparent transparent #a61932 !important; } body.adult #pageContent .courseListing .courseList .course.apprenticship-blue .buttons a { border-color: #017acd !important; background-color: #017acd !important; } body.adult #pageContent .courseListing .courseList .course.apprenticship-blue .buttons a:hover { border-color: #017acd !important; background-color: #fff !important; color: #017acd !important; } body.adult #pageContent .courseListing .courseList .course.apprenticship-blue a.triangleLink { border-color: transparent transparent #017acd !important; } #showcase .carouselItem .linearOverlay { background: linear-gradient(245deg, #00829b 0, #001f5f 100%) no-repeat; } #showcase .carouselItem.commercial-purple .linearOverlay { background: linear-gradient(245deg, #b0138e 0, #b0138e 100%) no-repeat; } #showcase .carouselItem.sixth-form-green .linearOverlay, body.sixth-form #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { background: linear-gradient(245deg, #52840f 0, #076b3b 100%) no-repeat; } #showcase .carouselItem.technical-orange .linearOverlay, body.technical #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { background: linear-gradient(245deg, #9d6e00 0, #df3601 100%) no-repeat; } #showcase .carouselItem.iot-blue .linearOverlay { background: #123995; } #showcase .carouselItem.apprenticeship-blue .linearOverlay, body.apprenticeship #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { background: linear-gradient(245deg, #127caf 0, #017acd 100%) no-repeat; } #showcase .carouselItem.university-green .linearOverlay, body.university #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { background: linear-gradient(245deg, #24847c 0, #115e6b 100%) no-repeat; } #showcase .carouselItem.adult-red .linearOverlay, body.adult #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { background: linear-gradient(245deg, #cd4a3b 0, #a61932 100%) no-repeat; } #pageContent .sectorQuickLinks .link.adult-red a .info .readMore, #pageContent .sectorQuickLinks .link.apprenticeship-blue a .info .readMore, #pageContent .sectorQuickLinks .link.iot-blue a .info .readMore, #pageContent .sectorQuickLinks .link.sixth-form-green a .info .readMore, #pageContent .sectorQuickLinks .link.technical-orange a .info .readMore, #pageContent .sectorQuickLinks .link.university-green a .info .readMore, body.adult #pageContent .sectorQuickLinks .link .buttons a, body.adult #pageContent .sectorQuickLinks .link a .info .readMore, body.adult #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content .buttons a, body.adult #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content a .info .readMore, body.apprenticeships.landing #pageContent .sectorQuickLinks .buttons a, body.apprenticeships.landing #pageContent .sectorQuickLinks .link .info .readMore, body.apprenticeships.landing #pageContent .sectorQuickLinks a .info .readMore, body.iot .fullWidth.alignCenter button.more:hover { background-color: #fff; } body.adult #pageContent .sectorQuickLinks .link .buttons a:hover, body.adult #pageContent .sectorQuickLinks .link .link a:hover .info .readMore, body.adult #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.adult #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content .buttons a:hover, body.adult #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content .link a:hover .info .readMore, body.adult #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content a:hover .info .readMore, body.apprenticeships.landing #pageContent .sectorQuickLinks .buttons a:hover, body.apprenticeships.landing #pageContent .sectorQuickLinks .link a:hover .info .readMore, body.apprenticeships.landing #pageContent .sectorQuickLinks a:hover .info .readMore { background-color: transparent; color: #fff; } #pageContent .sectorQuickLinks .link a:hover .info .readMore, #pageContent .sectorQuickLinks .link.adult-red a:hover .info .readMore, #pageContent .sectorQuickLinks .link.apprenticeship-blue a:hover .info .readMore, #pageContent .sectorQuickLinks .link.iot-blue a:hover .info .readMore, #pageContent .sectorQuickLinks .link.sixth-form-green a:hover .info .readMore, #pageContent .sectorQuickLinks .link.technical-orange a:hover .info .readMore, #pageContent .sectorQuickLinks .link.university-green a:hover .info .readMore { color: #fff !important; } body.iot.courseListing #pageHolder .pageHolder, body.iot.landing #pageHolder .pageHolder { padding-bottom: 70px; } body.apprenticeships #pageHolder { padding-bottom: 80px; background-position: top center; background-repeat: repeat-y; } body.apprenticeships.vacancies #pageHolder { padding-bottom: 50px; } body.apprenticeships.programmes.courseListing #pageHolder, body.apprenticeships.programmes.courseListing #pageHolder .pageHolder, body.apprenticeships.vacancies #pageHolder .pageHolder, body.university.courseListing #pageHolder .pageHolder { padding-bottom: 0; } body.adult.courseListing #pageHolder .pageHolder, body.adult.landing #pageHolder .pageHolder { padding-bottom: 100px; } body.adult #pageContent .sectorQuickLinks { margin: 80px 0 0; padding-bottom: 0; } #searchContainer { width: 100%; position: relative; height: 150px; padding-top: 65px; z-index: 3000; } #searchContainer .overflow:before { position: absolute; top: 30px; left: -20px; right: -20px; content: ""; height: 70px; transform: rotate(2.5deg); -webkit-transform: rotate(2.5deg); } #searchContainer .searchTitle { position: absolute; left: 23px; top: 40px; z-index: 5; } #searchContainer .advancedFilterToggle { position: absolute; top: 44px; left: 550px; z-index: 5; } #searchContainer .advancedFilterToggle i { margin-right: 6px; } #searchContainer .advancedFilters { height: 90px; position: absolute; left: 0; right: 0; width: auto; bottom: -90px; padding: 20px; gap: 0 15px; display: none; } #searchContainer .advancedFilters .advancedTitle { line-height: 40px; margin-right: 50px; } #searchContainer .filterWrapper { display: flex; justify-content: space-between; width: 100%; height: 85px; padding: 15px 108px 20px 12px; position: relative; } #searchContainer .filterWrapper .filterGroup, #searchContainer .filterWrapper .search { height: 50px; line-height: 50px; } #searchContainer .filterWrapper .search { flex: 0 0 100%; transform: skewX(-28deg); -webkit-transform: skewX(-28deg); } #searchContainer .filterWrapper .search .unskew:before, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search .unskew:before, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.qualification .filterName:before, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet .search .unskew:before, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .topSet .filterGroup.qualification .filterName:before { width: 26px; height: auto; top: -1px; bottom: -1px; content: ""; position: absolute; left: -12px; } #pageHolder #singleSearchContainer .search input, #searchContainer .filterWrapper .search input, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search input, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet .search input { border: none; background: 0 0; height: 50px; margin: 0 0 0 20px; width: 95%; width: calc(100% - 40px); padding: 0 40px 0 20px; -webkit-appearance: none; z-index: 2; position: relative; color: #001f5f; } #searchContainer .filterWrapper .search input::-webkit-input-placeholder { color: #001f5f; opacity: 1; } #searchContainer .filterWrapper .search input:moz-placeholder { color: #001f5f; opacity: 1; } #searchContainer .filterWrapper .search input::-moz-placeholder { color: #001f5f; opacity: 1; } #searchContainer .filterWrapper .search input:-ms-input-placeholder { color: #001f5f; opacity: 1; } #searchContainer .filterWrapper .filterGroup { flex: 0 0 18%; position: relative; } #searchContainer .filterWrapper .filterGroup .filterName { padding: 0 20px; position: relative; z-index: 2; } #searchContainer .filterWrapper .filterGroup:after { content: "\f063"; position: absolute; font-family: "Font Awesome 6 Free"; font-weight: 700; top: 0; height: 100%; right: 5px; width: 40px; z-index: 2; text-align: center; } #searchContainer .filterWrapper .filterGroup.open:after { transform: rotate(180deg); -webkit-transform: rotate(180deg); } #searchContainer .filterWrapper #search-button { position: absolute; width: 64px; height: 50px; right: 30px; top: 15px; padding: 0; z-index: 5; border: none; -webkit-appearance: none; text-align: center; transform: skewX(-28deg); -webkit-transform: skewX(-28deg); } #searchContainer .filterWrapper .filterItems { display: none; position: absolute; left: 0; right: 14px; width: auto; top: 100%; max-height: 300px; overflow: hidden; z-index: 100 !important; padding: 14px 0; } #searchContainer .filterWrapper .filterItems .filterItem { line-height: 1.3; padding: 6px 20px; } #searchContainer .filterWrapper .filterItems .filterItem:hover { cursor: pointer; text-decoration: underline; } #pageHolder #searchContainer { position: absolute; top: -150px; left: 30px; right: 30px; width: auto; } body.courseSearch.courseListing #pageHolder:before { top: auto; bottom: -800px; } body.courseSearch #pageHolder #searchContainer, body.courseSearch #pageHolder #singleSearchContainer { position: relative; top: auto; left: auto; right: auto; height: auto; padding-top: 0; } body.courseSearch #pageHolder #searchContainer .filterWrapper, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper { width: 100%; float: none; display: block; padding: 0; height: auto; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .topSet { display: flex; justify-content: space-between; padding: 15px 78px 20px 0; position: relative; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .topSet .filterGroup { flex: 0 0 19%; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.qualification, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .topSet .filterGroup.qualification { margin-left: -12px; flex: 0 0 23%; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.qualification .filterName, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .topSet .filterGroup.qualification .filterName { padding: 0 35px 0 38px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup .filterName, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .topSet .filterGroup .filterName { padding: 0 35px 0 25px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup .filterItems, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .topSet .filterGroup .filterItems { left: 14px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .advancedFilterToggle, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .topSet .advancedFilterToggle { position: absolute; width: 64px; height: 50px; right: 00px; top: 15px; padding: 0; z-index: 5; left: auto; text-align: center; line-height: 50px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet .search { width: calc(100% - 73px); transform: skewX(-28deg); margin-left: -12px; -webkit-transform: skewX(-28deg); } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search input::-webkit-input-placeholder, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet .search input::-webkit-input-placeholder { color: #001f5f; opacity: 1; } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search input:moz-placeholder, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet .search input:moz-placeholder { color: #001f5f; opacity: 1; } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search input::-moz-placeholder, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet .search input::-moz-placeholder { color: #001f5f; opacity: 1; } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search input:-ms-input-placeholder, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet .search input:-ms-input-placeholder { color: #001f5f; opacity: 1; } #pageHolder #singleSearchContainer .search input:focus, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search input:focus, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet .search input:focus { outline: 0; box-shadow: -6px 4px 8px rgba(0, 0, 0, 0.38); } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet #search-button, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .bottomSet #search-button { top: 0; right: 12px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .filterItems, body.courseSearch #pageHolder #singleSearchContainer .filterWrapper .filterItems { width: auto; right: 14px; } body.courseSearch #pageHolder #searchContainer .advancedFilters, body.courseSearch #pageHolder #singleSearchContainer .advancedFilters { position: relative; bottom: auto; left: auto; right: auto; padding: 0 0 20px; height: auto; gap: 0 6px; } body.courseSearch #pageHolder #searchContainer .advancedFilters .advancedTitle, body.courseSearch #pageHolder #singleSearchContainer .advancedFilters .advancedTitle { line-height: 50px; } body.courseSearch #pageHolder #searchContainer .buttons, body.courseSearch #pageHolder #singleSearchContainer .buttons { display: flex; justify-content: flex-end; margin: 0 12px 0 0; } body.courseSearch #pageHolder #searchContainer .buttons a, body.courseSearch #pageHolder #singleSearchContainer .buttons a { padding: 0 50px; line-height: 50px; margin-left: 5px; } body.courseSearch #pageHolder #searchContainer .buttons.special-placement { position: absolute; right: 12px; top: 0; display: block; width: 95px; margin: 0; } body.courseSearch #pageHolder #searchContainer .buttons.special-placement a { padding: 0; text-align: center; margin-left: 0; display: block; } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search.special-placement { width: calc(100% - 173px); } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet #search-button.special-placement, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet #search-button2.special-placement { right: 114px; } #pageHolder #singleSearchContainer .search { width: calc(100% - 77px); transform: skewX(-28deg); -webkit-transform: skewX(-28deg); margin-left: -12px; } #pageHolder #singleSearchContainer .search .unskew:before { width: 26px; height: auto; top: -1px; bottom: -1px; content: ""; position: absolute; left: -12px; background-color: #fff; } #pageHolder #singleSearchContainer .search input::-webkit-input-placeholder { color: #001f5f; opacity: 1; } #pageHolder #singleSearchContainer .search input:moz-placeholder { color: #001f5f; opacity: 1; } #pageHolder #singleSearchContainer .search input::-moz-placeholder { color: #001f5f; opacity: 1; } #pageHolder #singleSearchContainer .search input:-ms-input-placeholder { color: #001f5f; opacity: 1; } #pageHolder #singleSearchContainer #search-button, #pageHolder #singleSearchContainer #search-button2 { position: absolute; width: 64px; height: 50px; right: 15px; top: 0; padding: 0; z-index: 5; border: none; -webkit-appearance: none; text-align: center; transform: skewX(-28deg); -webkit-transform: skewX(-28deg); } body.courseSearch #pageContent .courseListing { margin-top: 25px; } body.courseSearch #pageHolder #searchContainer { flex: 0 0 100%; } #pageContent .flex.landing { gap: 0 50px; } #pageContent .flex.landing .landing-left { flex-grow: 1; } #pageContent .flex.landing .landing-right { flex: 0 0 640px; max-width: 640px; } #pageContent .flex .sidebar .sectionBranding, #pageContent .flex.landing .landing-right.align-right { text-align: right; } #pageContent .flex.landing .landing-right.margin-top { margin-top: 90px; } #pageContent .flex.landing .landing-right .carousel { position: relative; margin-bottom: 50px; height: 360px; } #pageContent .flex.landing .landing-right .carousel .video { overflow: hidden; height: 360px; position: relative; } #pageContent .flex.landing .landing-right .carousel .video i { position: absolute; z-index: 5; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } #pageContent .flex.landing .landing-right .carousel .owl-dots { bottom: -30px; position: absolute; width: auto; left: 50%; z-index: 5; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); } #pageContent .flex.landing .landing-right .carousel .owl-dots button { display: inline-block; padding: 0; -webkit-appearance: none; text-indent: -999em; height: 14px; width: 14px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; background-clip: padding-box; behavior: url(PIE.htc); border-style: solid; border-width: 1px; outline: 0; margin: 0 5px; } #pageContent .flex.landing .landing-right .quickLinks.courseListing { margin: 0; } #pageContent .flex.landing .landing-right .quickLinks.courseListing .link { width: 100%; flex: 00 100%; max-width: none; text-align: left; } #pageContent .courseListing, #pageContent .subjectArea, body.adult.coursePage #pageHolder #pageContent #mobile-search, body.technical.coursePage #pageContent .courseListing.in-page { margin-top: 80px; } #pageContent .courseListing .courseList, #pageContent .courseListing .showMoreCourses, #pageContent .courseListing .subjectList, #pageContent .subjectArea .courseList, #pageContent .subjectArea .subjectList { display: flex; margin: 40px 0 100px; justify-content: flex-start; flex-wrap: wrap; gap: 20px 1.5385%; } #pageContent .courseListing .showMoreCourses, body.coursePage #pageHolder #pageContent #mobile-search { margin-top: -20px; } #pageContent .courseListing .courseList .subject, #pageContent .courseListing .subjectList .subject, #pageContent .subjectArea .courseList .subject, #pageContent .subjectArea .subjectList .subject { flex: 0 0 31.9461%; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3); } #pageContent .courseListing .courseList .subject .holder, #pageContent .courseListing .courseList .subject a, #pageContent .courseListing .subjectList .subject .holder, #pageContent .courseListing .subjectList .subject a, #pageContent .subjectArea .courseList .subject .holder, #pageContent .subjectArea .courseList .subject a, #pageContent .subjectArea .subjectList .subject .holder, #pageContent .subjectArea .subjectList .subject a { height: 220px; position: relative; display: block; } #pageContent .courseListing .courseList .subject .holder .thumbnail, #pageContent .courseListing .courseList .subject a .thumbnail, #pageContent .courseListing .subjectList .subject .holder .thumbnail, #pageContent .courseListing .subjectList .subject a .thumbnail, #pageContent .subjectArea .courseList .subject .holder .thumbnail, #pageContent .subjectArea .courseList .subject a .thumbnail, #pageContent .subjectArea .subjectList .subject .holder .thumbnail, #pageContent .subjectArea .subjectList .subject a .thumbnail { position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; display: block; } #pageContent .courseListing .courseList .subject .holder .overlay, #pageContent .courseListing .courseList .subject a .overlay, #pageContent .courseListing .subjectList .subject .holder .overlay, #pageContent .courseListing .subjectList .subject a .overlay, #pageContent .subjectArea .courseList .subject .holder .overlay, #pageContent .subjectArea .courseList .subject a .overlay, #pageContent .subjectArea .subjectList .subject .holder .overlay, #pageContent .subjectArea .subjectList .subject a .overlay { z-index: 2; position: absolute; bottom: 0; left: 0; width: 90%; height: 80px; opacity: 0.9; clip-path: polygon(0% 0%, 100% 0%, 86% 100%, 0% 100%); } #pageContent .courseListing .courseList .subject .holder .title, #pageContent .courseListing .courseList .subject a .title, #pageContent .courseListing .subjectList .subject .holder .title, #pageContent .courseListing .subjectList .subject a .title, #pageContent .subjectArea .courseList .subject .holder .title, #pageContent .subjectArea .courseList .subject a .title, #pageContent .subjectArea .subjectList .subject .holder .title, #pageContent .subjectArea .subjectList .subject a .title { z-index: 5; position: absolute; line-height: 1.5; padding: 13px 30px 5px 20px; height: 80px; bottom: 0; left: 0; width: 90%; } #pageContent .courseListing .courseList .subject .holder i, #pageContent .courseListing .courseList .subject a i, #pageContent .courseListing .subjectList .subject .holder i, #pageContent .courseListing .subjectList .subject a i, #pageContent .subjectArea .courseList .subject .holder i, #pageContent .subjectArea .courseList .subject a i, #pageContent .subjectArea .subjectList .subject .holder i, #pageContent .subjectArea .subjectList .subject a i { position: absolute; z-index: 5; bottom: 30px; left: 15px; opacity: 0; } #pageContent .courseListing .courseList, #pageContent .courseListing .showMoreCourses, #pageContent .subjectArea .courseList, #pageContent .subjectArea .showMoreCourses { gap: 20px 1.5389%; } #pageContent .courseListing .courseList .course, #pageContent .subjectArea .courseList .course { flex: 0 0 49.2307%; max-width: 49.2307%; padding: 30px 50px 110px 30px; box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3); position: relative; } #pageContent .courseListing .courseList .course span, #pageContent .subjectArea .courseList .course span { display: block; line-height: 1.5; } #pageContent .courseListing .courseList .course .details, #pageContent .subjectArea .courseList .course .details { margin-top: 15px; } #pageContent .courseListing .courseList .course .details span, #pageContent .subjectArea .courseList .course .details span { margin: 5px 0; } #pageContent .courseListing .courseList .course .details strong, #pageContent .flex .sidebar .courseDetails .specifics span strong, #pageContent .subjectArea .courseList .course .details strong { margin-right: 3px; } #pageContent .courseListing .courseList .course .buttons, #pageContent .subjectArea .courseList .course .buttons { position: absolute; left: 30px; bottom: 20px; } #pageContent .courseListing .courseList .course .buttons a, #pageContent .subjectArea .courseList .course .buttons a { margin-right: 5px; } #pageContent .courseListing .courseList .course a.triangleLink, #pageContent .subjectArea .courseList .course a.triangleLink { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border: 130px solid; border-color: transparent transparent #001f5f; border-width: 0 0 130px 115px; } #pageContent .courseListing .courseList .course a.triangleLink i, #pageContent .subjectArea .courseList .course a.triangleLink i { position: absolute; right: 30px; top: 80px; } #pageContent .courseListing .courseList .course a.triangleLink:hover i, #pageContent .subjectArea .courseList .course a.triangleLink:hover i { right: 25px; } #pageContent .sectorQuickLinks { display: flex; justify-content: space-between; margin: 80px 0 0; padding-bottom: 30px; } #pageContent .sectorQuickLinks .link { flex: 0 0 49.2307%; } #pageContent .sectorQuickLinks .link a { display: block; overflow: hidden; } #pageContent .sectorQuickLinks .link .image { width: 100%; height: 470px; } #pageContent .sectorQuickLinks .link .image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1); -webkit-transform: scale(1); } #pageContent .sectorQuickLinks .link .info { width: 100%; padding: 0 50px 150px; position: relative; } #pageContent .sectorQuickLinks .link .info:before { left: -10%; width: 120%; height: 100px; content: ""; position: absolute; top: -50px; transform: rotate(8deg); -webkit-transform: rotate(8deg); z-index: 1; } #pageContent .sectorQuickLinks .link .info .title { margin-bottom: 20px; line-height: 1.3; } #pageContent .sectorQuickLinks .link .info .readMore { position: absolute; left: 50px; bottom: 70px; } #pageContent .sectorQuickLinks.row-three .link { flex: 0 0 32.3076%; } #pageContent .sectorQuickLinks.row-three .link .image { height: 260px; } #pageContent .sectorQuickLinks.row-three .link .info { padding: 0 35px 120px; } #pageContent .sectorQuickLinks.row-three .link .info .readMore { left: 35px; bottom: 30px; } #pageContent .sectorQuickLinks.row-three .link .info:before { transform: rotate(12deg); -webkit-transform: rotate(12deg); } #showcase.in-page .carouselItem { height: auto; margin-bottom: 80px; } #showcase.in-page.oneitem .carouselItem { height: auto; margin-bottom: 60px; } @media all and (max-width: 1200px) { #showcase.in-page.oneitem .carouselItem { height: auto; margin-bottom: 30px; } } @media all and (max-width: 767px) { #showcase.in-page.oneitem .carouselItem { height: auto; margin-bottom: 30px; } } #showcase.in-page .carouselItem .showcaseInfo { padding: 80px 120px 185px 0; } #showcase.in-page .carouselItem .showcaseInfo .subTitle { margin: 15px 0; line-height: 1.6; } #showcase.in-page .carouselItem .showcaseInfo a.readMore { left: 0; bottom: 50px; margin-top: 0; position: absolute; } #pageContent .subjectArea.fullWidth .subjectList { gap: 20px 0; } #pageContent .subjectArea.fullWidth .subjectList .subject { flex: 0 0 100%; box-shadow: none; overflow: hidden; } #pageContent .subjectArea.fullWidth .subjectList .subject .holder, #pageContent .subjectArea.fullWidth .subjectList .subject a { height: auto; display: flex; } #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content, #pageContent .subjectArea.fullWidth .subjectList .subject a .content { flex: 0 0 50%; padding: 40px 40px 115px 50px; } #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content .title, #pageContent .subjectArea.fullWidth .subjectList .subject a .content .title { height: auto; position: relative; bottom: auto; width: 100%; padding: 0; margin-bottom: 20px; } #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content i, #pageContent .subjectArea.fullWidth .subjectList .subject a .content i { left: 45px; bottom: 30px; line-height: 1; } #pageContent .subjectArea.fullWidth .subjectList .subject .holder .image, #pageContent .subjectArea.fullWidth .subjectList .subject a .image { position: absolute; right: 0; top: 0; height: 100.1%; flex: 0 0 50%; width: 50%; clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%); } #pageContent .subjectArea.fullWidth .subjectList .subject .holder:hover .content i, #pageContent .subjectArea.fullWidth .subjectList .subject a:hover .content i { left: 50px; opacity: 1; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder { min-height: 520px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .image { width: 45%; clip-path: polygon(45% 0%, 100% 0%, 100% 100%, 0% 100%); } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { flex: 0 0 76%; padding: 80px 220px 90px 100px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content .buttons { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content .buttons a { width: auto; display: inline-block; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder { flex-direction: row-reverse; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder .image { right: auto; left: 0; clip-path: polygon(0% 0%, 100% 0%, 45% 100%, 0% 100%); } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder .content { padding: 80px 100px 90px 280px; } #pageContent .partnersStakeholders { clear: both; } #pageContent .partnersStakeholders .sectorTitle { margin-bottom: 50px; } #pageContent .partnersStakeholders .partnerLogos { display: flex; justify-content: center; gap: 40px 35px; flex-wrap: wrap; } body.courseListing #pageHolder:before, body.landing #pageHolder:before { bottom: auto; top: 0; } body.courseListing #pageHolder .pageHolder, body.landing #pageHolder .pageHolder { padding-bottom: 150px; } #pageContent .linkBlocks { display: block; clear: both; } #pageContent .linkBlocks .block a { display: flex; flex-wrap: wrap; height: 100%; flex-flow: column; overflow: hidden; justify-content: stretch; } #pageContent .linkBlocks .owl-nav, #pageContent .sectorQuickLinks.owl-carousel .owl-nav { height: 45px; bottom: -62px; right: 0; width: 112px; position: absolute; display: flex; justify-content: space-between; } #pageContent .linkBlocks .owl-dots, #pageContent .sectorQuickLinks.owl-carousel .owl-dots { bottom: -60px; position: absolute; width: auto; left: 0; z-index: 5; } #pageContent #showcase.in-page.owl-carousel .owl-dots button, #pageContent .courseListing .courseList.owl-carousel .owl-dots button, #pageContent .linkBlocks .owl-dots button, #pageContent .quickLinks.courseListing.owl-carousel .owl-dots button, #pageContent .sectorQuickLinks.owl-carousel .owl-dots button { display: inline-block; padding: 0; -webkit-appearance: none; text-indent: -999em; height: 14px; width: 14px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; border-radius: 7px; background-clip: padding-box; behavior: url(PIE.htc); border-style: solid; border-width: 1px; outline: 0; margin: 0 10px 0 0; } #pageContent .quickLinks.courseListing { gap: 20px 1.5386%; margin-bottom: 100px; } #pageContent .quickLinks.courseListing .link { flex: 0 0 49.2307%; max-width: 49.2307%; } #pageContent .quickLinks.courseListing .link a { max-width: 100%; padding: 0; min-height: 250px; margin-top: 0; } #pageContent .quickLinks.courseListing .link .image { width: 45%; position: absolute; right: 0; top: 0; height: 100%; clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%); } #pageContent .quickLinks.courseListing .link .content { width: 55%; padding: 30px 0 70px 30px; } #pageContent .quickLinks.courseListing .link .content .title { margin-bottom: 20px; } #pageContent .quickLinks.courseListing .link i { position: absolute; bottom: 30px; left: 25px; opacity: 0; } #pageContent .sectorQuickLinks.owl-carousel { max-width: 100%; padding-bottom: 10px; } #pageContent #showcase.in-page.owl-carousel .carouselItem { margin-bottom: 80px; } #pageContent #showcase.in-page.owl-carousel .owl-nav { height: 45px; bottom: 0; right: 0; width: 112px; position: absolute; display: flex; justify-content: space-between; margin-right: 0; } #pageContent #showcase.in-page.owl-carousel .owl-dots { bottom: 0; position: absolute; width: auto; left: 0; z-index: 5; } #pageContent .quickLinks.courseListing.owl-carousel .owl-nav { height: 45px; bottom: -82px; right: 0; width: 112px; position: absolute; display: flex; justify-content: space-between; } #pageContent .quickLinks.courseListing.owl-carousel .owl-dots { bottom: -80px; position: absolute; width: auto; left: 0; z-index: 5; } @media (max-width: 767px) { #pageHolder #pageContent .tab-content .tabbedContentTitle { margin: 25px 0 13px; } #pageHolder #pageContent .tabs { flex-wrap: wrap; width: 100%; margin-top: 10px; } #pageHolder #pageContent .tabs .tab-item { flex: 0 0 calc(50% + 8px); } #pageHolder #pageContent .tabs .tab-item.courses, #pageHolder #pageContent .tabs .tab-item.pages { margin-bottom: 5px; } #pageHolder #pageContent .tabs .tab-item.events, #pageHolder #pageContent .tabs .tab-item.pages { margin-right: -12px; } #pageHolder #pageContent .tabs .tab-item.events:after, #pageHolder #pageContent .tabs .tab-item.pages:after { width: 34px; height: auto; top: -1px; bottom: -1px; content: ""; position: absolute; right: -14px; background-color: #fff; z-index: 5; } #pageHolder #pageContent .tabs .tab-item.news { margin-left: -12px; } #pageHolder #pageContent .tabs .tab-item.news:before { width: 28px; height: auto; top: -1px; bottom: -1px; content: ""; position: absolute; left: -13px; background-color: #fff; z-index: 5; } #pageHolder #pageContent .tab-content .pageList .page { flex-wrap: wrap; margin-top: 10px; } #pageHolder #pageContent .tab-content .pageList .page .thumbnail { position: relative; width: 100%; flex: 0 0 100%; height: 230px; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 60%); } #pageHolder #pageContent .tab-content .pageList .page .content { padding: 0 20px 30px; } #pageHolder #pageContent .tab-content .pageList .page .gradient { left: 0; } body.courseSearch.courseListing.results #pageHolder .pageHolder { padding-bottom: 70px; } #pageHolder #pageContent .sitemap { margin: 0 0 55px; flex-wrap: wrap; } #pageHolder #pageContent .sitemap .column.span_5_of_10 { width: 100%; flex: 0 0 100%; } #pageHolder #pageContent .sitemap li a { margin: 10px 0; } #pageHolder #pageContent .sitemap li ul li a { margin: 7px 0 0; } #pageHolder #pageContent .sitemap li ul li a.sub-title { margin-top: 12px; } #pageHolder #pageContent .sitemap li ul ul { margin: 5px 0 25px; } #pageContent .subjectArea, #pageHolder #pageContent .eventInformation a.register { margin-top: 15px; } #pageHolder #pageContent .eventHolder .event { margin-bottom: 15px; } #pageHolder #pageContent .eventHolder .event .content { padding: 0 20px 35px; } #searchContainer .searchTitle { top: 44px; left: 20px; } #searchContainer .filterWrapper { margin-top: 4px; height: auto; padding: 0 32px 15px 0; display: block; } #pageHolder #searchContainer { position: relative; float: left; top: auto; left: auto; right: auto; width: 112%; margin: -50px 0 0 -6%; height: auto; } #searchContainer .advancedFilterToggle { top: 45px; left: auto; right: 10px; } #pageContent .quickLinks.courseListing .link .content .intro, #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content .buttons a span, #searchContainer .advancedFilterToggle span { display: none; } #searchContainer .filterWrapper .search { width: calc(100% - 52px); height: 40px; line-height: 40px; } #searchContainer .filterWrapper .search input { height: 40px; } #searchContainer .filterWrapper .search .unskew:before { left: -7px; } #searchContainer .filterWrapper #search-button, #searchContainer .filterWrapper #search-button2 { height: 40px; width: 50px; top: 0; } #searchContainer .filterWrapper .filterGroup { margin-top: 5px; height: 40px; line-height: 40px; } #searchContainer .filterWrapper .filterGroup .filterName { padding: 0 20px 0 38px; position: relative; } #searchContainer .filterWrapper .filterGroup .filterItems { left: 20px; right: 10px; } #searchContainer .filterWrapper .filterGroup:before { top: -1px; bottom: -1px; width: 40px; left: -20px; content: ""; position: absolute; z-index: 2; } #searchContainer .advancedFilters { height: auto; top: 100%; bottom: auto; padding: 10px 32px 15px 0; } #searchContainer .advancedFilters .advancedTitle { margin: 0 0 0 20px; line-height: 30px; } #searchContainer .advancedFilters.show { display: block; } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search.special-placement { width: calc(100% - 56px); } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet #search-button.special-placement, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet #search-button2.special-placement { right: 12px; } body.courseSearch #pageHolder #searchContainer .buttons.special-placement { position: relative; right: auto; width: 100%; margin: 8px 12px 0 0; display: flex; } body.courseSearch #pageHolder #searchContainer .buttons.special-placement a { display: inline-block; padding: 0 22px; line-height: 40px; margin-right: 12px; } body.landing #pageHolder .pageHolder, body.landing.school-leaver #pageHolder .pageHolder, body.pre-16.landing #pageHolder .pageHolder { padding-bottom: 80px; } #pageContent .flex.landing .landing-right .carousel, #pageContent .flex.landing .landing-right .carousel .video, #pageContent .subjectArea .subjectList .subject a { height: 200px; } #pageContent .flex.landing .landing-right .carousel .owl-dots button, #pageContent .linkBlocks .owl-dots button { height: 10px; width: 10px; border-radius: 5px; } #pageContent .subjectArea .subjectList { margin: 25px 0 30px; gap: 10px 0; } #pageContent .sectorQuickLinks .link, #pageContent .sectorQuickLinks.row-three .link, #pageContent .subjectArea .subjectList .subject { flex: 0 0 100%; } #showcase.in-page .carouselItem { margin-bottom: 30px; height: auto; } #showcase.in-page .carouselItem .showcaseInfo { padding: 20px 30px 90px; } #showcase.in-page .carouselItem .showcaseInfo a.readMore { left: 30px; bottom: 20px; } #pageContent .linkBlocks .owl-nav { height: 40px; width: 90px; bottom: -50px; } #pageContent .linkBlocks .owl-nav button { height: 40px; width: 40px; } #pageContent .linkBlocks .owl-nav button:before { line-height: 40px; } #pageContent .linkBlocks .owl-dots { bottom: -45px; } #pageContent .linkBlocks .block a .content:before { transform: rotate(8deg); -webkit-transform: rotate(8deg); top: -43px; } #pageContent .linkBlocks .block.reverse a .content:before { transform: rotate(-8deg); -webkit-transform: rotate(-8deg); } #pageContent .sectorQuickLinks { justify-content: flex-start; padding-bottom: 20px; margin: 20px 0 0; gap: 10px 0; flex-wrap: wrap; } #pageContent .sectorQuickLinks .link .image, #pageContent .sectorQuickLinks.row-three .link .image { height: 230px; } #pageContent .sectorQuickLinks .link .info, #pageContent .sectorQuickLinks.row-three .link .info { padding: 0 30px 100px; } #pageContent .sectorQuickLinks .link .info:before { top: -45px; transform: rotate(8deg); -webkit-transform: rotate(8deg); } #pageContent .sectorQuickLinks .link .info .readMore { left: 30px; bottom: 30px; } #pageContent .sectorQuickLinks.row-three .link .info:before { transform: rotate(8deg); -webkit-transform: rotate(8deg); } body.apprenticeships #pageHolder { padding-bottom: 35px; } body.apprenticeships #pageHolder .pageHolder, body.university.landing #pageHolder .pageHolder { padding-bottom: 40px; } #pageContent .courseListing, #pageContent .flex.landing .landing-right.margin-top { margin-top: 0; } #pageContent .subjectArea.fullWidth .subjectList { gap: 10px 0; } #pageContent .subjectArea.fullWidth .subjectList .subject a { flex-wrap: wrap; } #pageContent .subjectArea.fullWidth .subjectList .subject a .content { flex: 0 0 100%; padding: 25px 30px 20px; } #pageContent .subjectArea.fullWidth .subjectList .subject a .content .title { margin-bottom: 10px; } #pageContent .subjectArea.fullWidth .subjectList .subject a .image { position: relative; flex: 0 0 100%; width: 100%; height: 235px; clip-path: polygon(0% 0%, 100% 30%, 100% 100%, 0% 100%); } #pageContent .partnersStakeholders .sectorTitle { margin-bottom: 30px; } #pageContent .partnersStakeholders .partnerLogos { gap: 0 25px; text-align: center; } #pageContent .partnersStakeholders .partnerLogos img { width: auto !important; max-width: 80%; } body.iot.courseListing #pageHolder .pageHolder, body.iot.landing #pageHolder .pageHolder { padding-bottom: 15px; } #pageContent .sectorQuickLinks.row-three .link .info .readMore { left: 30px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject { background-color: transparent !important; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder .content { padding: 0; display: block; flex-direction: column; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder .content .contentWrap { padding: 10px 25px 25px; flex: 0 0 100%; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder .image { clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%); flex: 0 0 100%; max-height: 230px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder { display: block; min-height: 0; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { padding: 0; display: flex; flex-direction: column-reverse; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content .contentWrap { padding: 20px 25px 15px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content .buttons { gap: 10px 10px; margin-top: 20px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .image { position: relative; top: auto; left: auto; right: auto; height: 230px; width: 100%; flex: 0 0 100%; max-height: 230px; clip-path: polygon(0% 0%, 100% 20%, 100% 100%, 0% 100%); } body.adult #pageContent .sectorQuickLinks { margin: 15px 0 0; } body.adult.courseListing #pageHolder .pageHolder, body.adult.landing #pageHolder .pageHolder, body.landing.adult #pageHolder .pageHolder { padding-bottom: 30px; } body.adult.courseListing .fullWidth.alignCenter, body.adult.landing .fullWidth.alignCenter, body.courseListing #pageContent .flex.landing .landing-right .carousel, body.landing.adult #pageContent .flex.landing .landing-right .carousel { margin-bottom: 20px; } #pageContent .quickLinks.courseListing .link i { bottom: 20px; left: 20px !important; opacity: 1; } #pageContent .flex.landing .landing-right .quickLinks.courseListing, #pageContent .quickLinks.courseListing { margin: 0 0 30px; } #pageContent .quickLinks.courseListing .link a { min-height: 0; } #pageContent .quickLinks.courseListing .link .content { padding: 20px 0 50px 20px; } #pageContent .quickLinks.courseListing .link .image { clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%); } body.courseListing #pageContent .flex.landing .landing-right .carousel.single-image { margin-bottom: 40px; } body.courseListing #pageContent .courseListing .courseList { margin: 20px 0 0; } #pageContent .courseListing .courseList .course { padding: 25px 30px 150px 25px; } #pageContent .courseListing .courseList .course .buttons { max-width: 130px; left: 25px; } #pageContent .courseListing .courseList .course .buttons a { margin-top: 10px; } body.courseListing #pageHolder .pageHolder { padding-bottom: 90px; } body.apprenticeships.vacancies #pageHolder { padding-bottom: 20px; } #pageContent .flex.landing .landing-right .quickLinks.courseListing .link, #pageContent .flex.landing .landing-right .quickLinks.courseListing .link a { height: auto; } body.courseListing #pageContent .flex.landing .landing-right .carousel.owl-carousel { margin-bottom: 50px; } body.courseSearch #pageHolder #searchContainer { float: none; width: 100%; margin: 0; padding-top: 0; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet { padding: 0 0 40px; flex-wrap: wrap; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .advancedFilterToggle { bottom: 0; left: -4px; right: auto; top: auto; height: 40px; line-height: 40px; width: 40px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup { width: 100%; flex: 0 0 100%; flex: 0 0 calc(100% + 10px); margin-left: -20px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup .filterItems, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup .filterItems { left: 20px; padding: 0; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup:before, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup:before { background-color: #fff; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup:after, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup:after { right: 10px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup .filterName { padding: 0 55px 0 40px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.qualification { margin-left: -20px; flex: 0 0 calc(100% + 10px); } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters { padding: 0 0 5px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .advancedTitle { position: absolute; top: -50px; left: 20px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup { margin-left: -20px; width: calc(100% + 10px); } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup .filterName { padding: 0 55px 0 38px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search input { height: 40px; padding: 0 40px 0 15px; } body.courseSearch #pageHolder #pageContent .resultNumber { margin: 25px 0 10px; } body.courseSearch.courseListing #pageHolder .pageHolder { padding-bottom: 50px; } #pageHolder #singleSearchContainer .search { width: calc(100% - 57px); } #pageHolder #singleSearchContainer .search input { height: 40px; padding-left: 12px; } #pageHolder #singleSearchContainer #search-button, #pageHolder #singleSearchContainer #search-button2 { width: 50px; height: 40px; } body.courseSearch #pageHolder #searchContainer .buttons { margin-top: -30px; } body.courseSearch #pageHolder #searchContainer .buttons a { padding: 0 25px; } body.courseSearch.results #pageHolder #searchContainer .filterWrapper .advancedFilters.show { padding: 0 0 35px; } } @media (min-width: 768px) { body.fixedHeader header#masthead { height: 80px; } body.fixedHeader header#masthead .logoHolder { top: 15px; } body.fixedHeader header#masthead .logoHolder, body.fixedHeader header#masthead .logoHolder a { width: 160px; height: 50px; } #searchContainer .advancedFilters.show { display: flex; } } @media (min-width: 1024px) { body.fixedHeader.university header#masthead .logoHolder, body.fixedHeader.university header#masthead .logoHolder a { width: 223px; height: 50px; } #pageHolder .pageHolder { gap: 0 50px; } #pageHolder #pageContent { max-width: calc(100% - 280px); min-height: 600px; } #pageHolder #pageContent.fullWidth { max-width: 100%; } #pageHolder aside#sidebar .collapse { display: block !important; } #pageHolder #pageContent.fullWidth.sectorPage { display: flex; gap: 0 50px; } #pageHolder #pageContent.fullWidth.sectorPage .internal-left { flex-grow: 1; max-width: calc(100% - 280px); } #pageContent .subjectArea .subjectList .subject a:hover .overlay { height: 100%; width: 100%; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); } #pageContent .subjectArea .subjectList .subject a:hover .title { height: 100%; padding-top: 15px; } #pageContent .subjectArea .subjectList .subject a:hover i { left: 20px; opacity: 1; } } @media all and (min-width: 768px) and (max-width: 1200px) { nav#mainMenu .flex-holder a.applyNow { top: 9px; left: -160px; } nav#mainMenu .flex-holder a.searchBTN.mob { position: absolute; top: 21px; right: 43px; } #events-testimonials.in-page { padding: 30px 0 100px; } #pageHolder #pageContent .tab-content .pageList .page .thumbnail { width: 260px; clip-path: polygon(0% 0%, 100% 0%, 60% 100%, 0% 100%); } #pageHolder #pageContent .tab-content .pageList .page .content { padding: 30px 30px 30px 290px; } #pageHolder #pageContent .tab-content .pageList .page .content .title { margin-bottom: 10px; } #pageHolder #pageContent .tab-content .pageList .page .gradient { left: 140px; } #pageHolder #searchContainer { left: 0; right: 0; height: 190px; top: -60px; } body.has-course-search #pageHolder .pageHolder { padding-top: 130px; } #searchContainer .searchTitle { left: 45px; } #searchContainer .advancedFilterToggle { top: 42px; left: 435px; } #searchContainer .filterWrapper { height: 73px; padding: 5px 40px 20px; display: block; } #searchContainer .filterWrapper .search { position: absolute; width: auto; right: 126px; left: 28px; top: 5px; } #searchContainer .filterWrapper .search .unskew:before { width: 40px; left: -20px; } #searchContainer .filterWrapper .filterGroup { position: absolute; width: auto; } #searchContainer .filterWrapper .filterGroup.level, #searchContainer .filterWrapper .filterGroup.qualification { right: 50px; width: 240px; display: block; } #searchContainer .filterWrapper .filterGroup.campus, #searchContainer .filterWrapper .filterGroup.mode, #searchContainer .filterWrapper .filterGroup.subject { top: 60px; width: 200px; } #searchContainer .filterWrapper .filterGroup.campus { right: 119px; } #searchContainer .filterWrapper .filterGroup.subject { right: 325px; } #searchContainer .filterWrapper .filterGroup.mode { width: auto; left: 28px; right: 531px; } #searchContainer .filterWrapper .filterGroup.mode .filterName { padding-left: 40px; } #searchContainer .filterWrapper .filterGroup.mode .filterItems { left: 20px; } #searchContainer .filterWrapper .filterGroup.mode:before { top: -1px; bottom: -1px; width: 40px; left: -20px; content: ""; position: absolute; z-index: 2; } #searchContainer .filterWrapper .advancedFilters { flex-wrap: wrap; height: 140px; padding: 15px 20px 15px 240px; top: 100%; } #searchContainer .filterWrapper .advancedFilters .advancedTitle { position: absolute; left: 45px; top: 15px; line-height: 50px; } #searchContainer .filterWrapper .advancedFilters .filterGroup { width: 200px; flex: 0 0 200px; } #searchContainer .filterWrapper .advancedFilters .filterGroup.day { top: 15px; left: 280px; } #searchContainer .filterWrapper .advancedFilters .filterGroup.time { top: 15px; left: 485px; } #searchContainer .filterWrapper .advancedFilters .filterGroup.duration { bottom: 15px; left: 280px; } #searchContainer .filterWrapper .advancedFilters .filterGroup.start { bottom: 15px; left: 485px; } #searchContainer .filterWrapper #search-button, #searchContainer .filterWrapper #search-button2 { top: 5px; right: 50px; } body.landing #pageHolder .pageHolder { padding-bottom: 110px; } body.landing.adult #pageHolder .pageHolder, body.landing.university #pageHolder .pageHolder, body.pre-16.landing #pageHolder .pageHolder { padding-bottom: 50px; } body.apprenticeships.landing #pageHolder { padding-bottom: 60px; } body.apprenticeships.landing #pageHolder .pageHolder { padding-bottom: 70px; } body.courseListing.courseSearch #pageHolder .pageHolder { padding-bottom: 35px; } #pageContent .flex.landing .landing-left .sectionBranding { display: block; margin-bottom: 30px; } #pageContent .flex.landing .landing-right, #pageContent .flex.landing .landing-right.margin-top { margin-top: 20px; } #pageContent .flex.landing .landing-right.align-right { text-align: center; } #pageContent .flex.landing .landing-right .owl-carousel { width: 640px; display: inline-block; } #pageContent .linkBlocks .block .content:before { transform: rotate(8deg); -webkit-transform: rotate(8deg); } #pageContent .linkBlocks .block.reverse a .content:before { transform: rotate(-8.5deg); -webkit-transform: rotate(-8.5deg); } #showcase.in-page .carouselItem { margin-bottom: 40px; } #pageContent .sectorQuickLinks { margin: 30px 0 0; } #pageContent .sectorQuickLinks .link .image { height: 260px; } #pageContent .sectorQuickLinks .link .info { padding: 0 30px 100px; } #pageContent .sectorQuickLinks .link .info .readMore { left: 30px; bottom: 30px; } body.adult #pageContent .sectorQuickLinks { margin: 40px 0 0; } #pageContent .quickLinks.courseListing { margin: 0 0 35px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet { gap: 0 1%; padding: 0; height: 105px; flex-wrap: wrap; justify-content: flex-start; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .advancedFilterToggle { top: 55px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.qualification { flex: 0 0 33%; width: 33%; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.level, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.qualification { right: auto; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.mode { left: auto; right: auto; top: 0; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.mode:before { display: none; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.subject { top: 0; margin-top: 5px; margin-left: -12px; right: auto; left: 0; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup.duration .filterName, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.subject .filterName { padding-left: 38px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup.duration:before, body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.subject:before { position: absolute; top: -1px; bottom: -1px; height: auto; width: 26px; left: -12px; content: ""; background-color: #fff; z-index: 5; } body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup.campus { top: 0; margin-top: 5px; right: auto; } body.courseSearch #pageHolder #searchContainer .buttons, body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet { margin-top: 5px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .bottomSet .search { top: auto; margin-left: -12px; left: auto; right: auto; position: relative; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters { height: 105px; margin-top: 5px; padding: 0; gap: 0 1%; flex-wrap: wrap; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup { width: 33%; flex: 0 0 33%; top: auto; left: auto; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup .filterName { padding-left: 25px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .advancedTitle { left: auto; position: relative; width: 33%; flex: 0 0 33%; flex: 0 0 calc(33% - 12px); margin-right: 0; top: auto; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup.duration { margin-left: -12px; } body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup.duration, body.courseSearch #pageHolder #searchContainer .filterWrapper .advancedFilters .filterGroup.start { top: auto; bottom: auto; margin-top: 5px; } } #accordion.mainDetail .accordion-title:after, #accordion.sidebar .accordion-title:after { right: 0; z-index: 2; content: "\f063"; font-family: "Font Awesome 6 Free"; font-weight: 700; line-height: 1; top: 50%; } @media (max-width: 1200px) { nav#mainMenu { height: 60px; } nav#mainMenu .flex-holder { padding-left: 80px; } nav#mainMenu .flex-holder:before { content: ""; position: absolute; top: 0; height: 60px; right: -50px; left: -80px; width: auto; background-color: #fff; clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%); } #events-testimonials:before, #latestNews:before, #pageContent .flex.landing .landing-right .sectionBranding, #pageHolder:before, #slider .heritage, #welcome:before, nav#mainMenu .flex-holder a.searchBTN.dt, nav#mainMenu .flex-holder ul { display: none; } #welcome .holder .heritage, a.mobileMenuBTN { display: block; } nav#mainMenu .flex-holder a.searchBTN.dt, nav#mainMenu .megaMenu { display: none !important; } nav#mainMenu .flex-holder a.searchBTN.mob { display: inline-block; } #pageContent .flex.landing { gap: 0 0; flex-wrap: wrap; } #pageContent .flex.landing .landing-left { flex: 0 0 100%; } #pageContent .flex.landing .landing-left .sectionBranding { display: block; margin-bottom: 30px; } #pageContent .flex.landing .landing-left .sectionBranding img { width: auto !important; max-width: 100%; } #pageContent .flex.landing .landing-right { flex: 0 0 100%; max-width: 100%; } } @media all and (min-width: 1200px) and (max-width: 1300px) { body.courseSearch #pageHolder #searchContainer .filterWrapper .topSet .filterGroup { width: auto; } } @media all and (min-width: 1200px) and (max-width: 1400px) { #pageHolder #searchContainer { left: calc(5% - 20px); right: calc(5% - 20px); } #pageContent .flex.landing { gap: 0 50px; } #pageContent .flex.landing .landing-right { flex: 0 0 560px; max-width: 560px; } #pageContent .sectorQuickLinks { margin: 80px 0 0; } #pageContent .sectorQuickLinks .link .image { height: 360px; } #pageContent .sectorQuickLinks .link .info { padding: 0 40px 125px; } #pageContent .sectorQuickLinks .link .info .readMore { left: 40px; bottom: 40px; } } body.coursePage #pageHolder .pageHolder { padding-bottom: 60px; } body.iot.coursePage #pageContent .courseListing.in-page, body.university.coursePage #pageContent .courseListing.in-page { margin-top: 60px; } body.iot #pageContent .courseListing .courseList.owl-carousel .owl-nav button { border: none; } body.apprenticeships.coursePage #pageContent .courseListing.in-page { margin-top: 50px; } body.adult.coursePage #pageContent .courseListing.in-page { margin-top: 40px; } #pageContent .flex .sidebar { flex: 0 0 280px; overflow: hidden; } #pageContent .flex .sidebar .sectionBranding.multiple-images img { margin-top: 20px; max-width: 100%; } #pageContent .flex .sidebar .courseDetails { width: 100%; padding: 30px 20px 93px; margin-top: 30px; position: relative; } #pageContent .flex .sidebar .courseDetails .sectionTitle { line-height: 1.6; margin-bottom: 30px; } #pageContent .flex .sidebar .courseDetails .specifics span { display: block; margin: 5px 0; line-height: 1.5; } #pageContent .flex .sidebar a.apply { width: 100%; display: block; position: relative; padding: 0 20px 103px; margin-top: 28px; } #pageContent .flex .sidebar a.apply i, body.coursePage #pageHolder #pageContent .overflowHolder a.apply i { margin-left: 10px; } #pageContent .flex .sidebar a.apply:hover i, body.coursePage #pageHolder #pageContent .overflowHolder a.apply:hover i { margin-left: 25px; } #pageContent .flex .sidebar a.apply:before { position: absolute; width: auto; left: -20px; right: -20px; height: 100px; content: ""; top: -60px; transform: rotate(12deg); -webkit-transform: rotate(12deg); } #pageContent .flex .sidebar a.apply:after { position: absolute; width: auto; left: -20px; right: -20px; height: 100px; content: ""; bottom: -60px; transform: rotate(12deg); -webkit-transform: rotate(12deg); } #pageContent .flex .sidebar .searchElement { width: 100%; margin-top: 3px; padding: 0 20px 20px; display: flex; flex-wrap: wrap; z-index: 2; position: relative; } #pageContent .flex .sidebar .searchElement .search-container input::-webkit-input-placeholder { color: #001f5f; opacity: 1; } #pageContent .flex .sidebar .searchElement .search-container input:moz-placeholder { color: #001f5f; opacity: 1; } #pageContent .flex .sidebar .searchElement .search-container input::-moz-placeholder { color: #001f5f; opacity: 1; } #pageContent .flex .sidebar .searchElement .search-container input:-ms-input-placeholder { color: #001f5f; opacity: 1; } #pageContent .relatedCareers { width: 100%; clear: both; margin-top: 50px; } #pageContent .relatedCareers .sectionTitle, #pageContent .studentWork .sectionTitle { margin-bottom: 30px; line-height: 1.2; } #pageContent .studentWork { width: 100%; clear: both; margin-top: 40px; } #pageContent .courseListing.in-page { margin-top: 150px; } #pageContent .courseListing .courseList.owl-carousel { gap: 0 0; display: block; max-width: calc(100% + 16px); width: calc(100% + 16px); margin-left: -8px; } #pageContent .courseListing .courseList.owl-carousel .owl-item { padding: 8px; } #pageContent .courseListing .courseList.owl-carousel .course { width: 100%; max-width: 100%; } #pageContent .courseListing .courseList.owl-carousel .owl-nav { height: 45px; bottom: -62px; right: 6px; width: 112px; position: absolute; display: flex; justify-content: space-between; } #pageContent .courseListing .courseList.owl-carousel .owl-nav button { border: 1px solid; -webkit-appearance: none; padding: 0; text-align: center; height: 45px; width: 45px; margin: 0; position: relative; } #pageContent .courseListing .courseList.owl-carousel .owl-dots { bottom: -60px; position: absolute; width: auto; left: 6px; z-index: 5; } body.coursePage #pageHolder #pageContent .overflowHolder { overflow: hidden; padding: 30px 0 0; display: none; margin-top: 60px; } body.coursePage #pageHolder #pageContent .overflowHolder a.apply { width: 100%; display: block; position: relative; padding: 30px 20px 48px; margin-top: 28px; clip-path: polygon(0% 0%, 100% 28%, 100% 100%, 0% 72%); } #accordion.mainDetail { display: block; width: 100%; margin: 3.125rem 0 2.1875rem; border-bottom-width: 2px; border-bottom-style: solid; } #accordion.mainDetail .accordion-title { display: block; padding: 1rem 5rem 1rem 0; position: relative; outline: 0; border-top-width: 2px; border-top-style: solid; line-height: 1.4; } #accordion.mainDetail .accordion-title:after { width: 20px; height: 26px; position: absolute; transform: translateY(-50%); -webkit-transform: translateY(-50%); } #accordion.mainDetail .accordion-title.ui-state-active:after { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); margin-top: -14px; right: 3px; } #accordion.mainDetail div.ui-accordion-content { padding: 0.625rem 0; } #accordion.mainDetail .nested-accordion .accordion-title { border: none; padding: 20px 170px 20px 20px; margin-top: 10px; } #accordion.mainDetail .nested-accordion .accordion-title:after { right: 20px; } #accordion.mainDetail .nested-accordion .accordion-title.ui-state-active:after { right: 23px; } #accordion.mainDetail .nested-accordion div.ui-accordion-content { padding: 25px 0 0; } #accordion.sidebar { display: block; width: 100%; margin: 0; border-bottom-width: 1px; border-bottom-style: solid; } #accordion.sidebar .accordion-title { display: block; padding: 0.5rem 0; position: relative; outline: 0; border-top-width: 1px; border-top-style: solid; line-height: 1.4; } #accordion.sidebar .accordion-title:after { width: 17px; height: 15px; position: absolute; transform: translateY(-50%); -webkit-transform: translateY(-50%); } @media (min-width: 1024px) and (min-height: 400px) and (max-height: 600px) { nav#mainMenu .megaMenu ul.normal li.subSub-title { margin: 5px 0 3px !important; } nav#mainMenu .megaMenu ul.normal li.subSub-title a { padding: 5px 60px 5px 20px !important; } } #accordion.sidebar .accordion-title.ui-state-active:after { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); margin-top: -6px; right: 5px; } #accordion.sidebar div.ui-accordion-content { padding: 0 0 0.9375rem; } #pageContent .flex .sidebar .courseDetails a.applyNow { margin-top: 15px; display: block; padding: 18px 60px 18px 22px; position: relative; clip-path: polygon(0% 0%, 100% 0%, 87% 100%, 0% 100%); } #pageContent .flex .sidebar .courseDetails a.applyNow i { position: absolute; right: 35px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); } @media (max-width: 767px) { #pageContent .flex .sidebar.course-page .sectionBranding img { max-width: 100%; width: auto !important; } #pageContent .flex .sidebar .courseDetails { padding: 15px 20px 68px; margin-top: 0; } #pageContent .flex .sidebar .courseDetails .sectionTitle { margin-bottom: 10px; } #pageContent .flex .sidebar .courseDetails:after { height: 70px; bottom: -25px; transform: rotate(3deg); -webkit-transform: rotate(3deg); } #pageContent .flex .sidebar a.apply { margin-top: -12px; padding: 0 20px 63px; } #pageContent .flex .sidebar a.apply:before { height: 70px; top: -25px; transform: rotate(3deg); -webkit-transform: rotate(3deg); } #pageContent .flex .sidebar a.apply:after { height: 70px; bottom: -40px; transform: rotate(3deg); -webkit-transform: rotate(3deg); } #pageContent .relatedCareers, #pageContent .studentWork, body.university.coursePage #pageContent .courseListing.in-page { margin-top: 30px; } #pageContent .courseListing.in-page, body.technical.coursePage #pageContent .courseListing.in-page { margin-top: 50px; } body.coursePage #pageHolder #pageContent .overflowHolder { padding: 0; margin-top: 40px; } body.apprenticeships.coursePage #pageContent .courseListing.in-page, body.coursePage #pageHolder #pageContent .overflowHolder a.apply { margin-top: 0; } #pageContent .courseListing .courseList.owl-carousel .owl-dots { left: 8px; } body.coursePage #pageHolder .pageHolder { padding-bottom: 35px; } body.iot.coursePage #pageContent .courseListing.in-page { margin-top: 40px; } body.adult.coursePage #pageContent .courseListing .courseList.owl-carousel, body.adult.coursePage #pageContent .courseListing.in-page, body.apprenticeships.coursePage #pageContent .courseListing .courseList, body.iot.coursePage #pageContent .courseListing .courseList, body.sixth-form.coursePage #pageContent .courseListing .courseList, body.university.coursePage #pageContent .courseListing .courseList.owl-carousel { margin-top: 20px; } #accordion.mainDetail { margin-top: 35px; } body.apprenticeships.coursePage #pageContent .courseListing .courseList .course .buttons { max-width: 160px; } #pageContent .flex .sidebar .courseDetails a.applyNow { padding: 16px 60px 16px 20px; clip-path: polygon(0% 0%, 100% 0%, 92% 100%, 0% 100%); } #pageContent .flex .sidebar .courseDetails a.applyNow i { right: 38px; } #accordion.mainDetail .nested-accordion .accordion-title { padding: 12px 50px 12px 10px; } #accordion.mainDetail .nested-accordion .accordion-title:after { right: 10px; } #accordion.mainDetail .nested-accordion .accordion-title.ui-state-active:after { right: 16px; margin-top: -20px; } #pageContent .relatedCareers img.dt, #pageContent .studentWork img.dt { display: none; } #pageContent .relatedCareers img.mob, #pageContent .studentWork img.mobile { display: block; } body.adult.coursePage #pageHolder #pageContent #mobile-search { margin-top: -20px; } } @media all and (min-width: 768px) and (max-width: 1023px) { #pageHolder #pageContent .sitemap { margin-bottom: 120px; } #pageContent .courseListing, #pageContent .subjectArea { margin-top: 40px; } #pageContent .subjectArea .subjectList { margin: 30px 0 40px; gap: 20px 2.907%; } #pageContent .sectorQuickLinks.row-three .link, #pageContent .subjectArea .subjectList .subject { flex: 0 0 48.5465%; } #showcase.in-page .carouselItem .showcaseImage { width: 52%; height: 100%; position: absolute; clip-path: none; } #showcase.in-page .carouselItem .linearOverlay { display: block; } #showcase.in-page .carouselItem .showcaseInfo { margin-left: 50%; padding: 70px 45px 140px 0; } #pageContent .subjectArea.fullWidth .subjectList .subject a .content { flex: 0 0 55%; padding: 40px 40px 50px 50px; } #pageContent .subjectArea.fullWidth .subjectList .subject a .content .title { margin-bottom: 10px; } #pageContent .relatedCareers img.dt, #pageContent .subjectArea.fullWidth .subjectList .subject a .content i { display: none; } #pageContent .subjectArea.fullWidth .subjectList .subject a .image { width: 45%; } body.iot.courseListing #pageHolder .pageHolder, body.iot.landing #pageHolder .pageHolder { padding-bottom: 40px; } #pageContent .sectorQuickLinks.row-three { flex-wrap: wrap; justify-content: center; gap: 20px 20px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder { min-height: 400px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .contentWrap { margin-top: 35px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder .content { padding: 0 50px 35px 0; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder .content .contentWrap { padding-left: 360px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder .image { float: left; clip-path: polygon(0% 0%, 60% 0%, 100% 100%, 0% 100%); } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { padding: 0 0 35px 50px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .image { float: right; position: relative; height: 250px; width: 335px; } #pageContent .courseListing .courseList { margin: 30px 0 10px; } body.courseListing #pageHolder .pageHolder { padding-bottom: 120px; } body.apprenticeships.vacancies #pageHolder { padding-bottom: 10px; } body.adult.courseListing #pageHolder .pageHolder, body.adult.landing #pageHolder .pageHolder { padding-bottom: 50px; } body.adult.landing #pageContent .subjectArea, body.iot.courseListing #pageContent .courseListing { margin-top: 0; } #pageContent .flex .sidebar .courseDetails .sectionTitle, body.adult.courseListing .fullWidth.alignCenter, body.adult.landing .fullWidth.alignCenter { margin-bottom: 20px; } body.adult.courseListing #pageContent .courseListing { margin-top: 10px; } #pageContent .quickLinks.courseListing .link i { left: 30px !important; opacity: 1; } body.coursePage #pageHolder .pageHolder { padding-bottom: 60px; } #pageContent .courseListing.in-page, body.technical.coursePage #pageContent .courseListing.in-page, body.university.coursePage #pageContent .courseListing.in-page { margin-top: 60px; } #pageContent .flex .sidebar .courseDetails { padding: 15px 20px 93px; margin-top: 15px; } #pageContent .flex .sidebar .courseDetails:after, #pageContent .flex .sidebar a.apply:after { height: 70px; bottom: -25px; transform: rotate(3deg); -webkit-transform: rotate(3deg); } #pageContent .flex .sidebar a.apply { margin-top: -12px; } #pageContent .flex .sidebar a.apply:before { height: 70px; top: -25px; transform: rotate(3deg); -webkit-transform: rotate(3deg); } body.apprenticeships.coursePage #pageContent .courseListing.in-page { margin-top: 20px; } #pageContent .flex .sidebar .courseDetails a.applyNow { clip-path: polygon(0% 0%, 100% 0%, 95% 100%, 0% 100%); } #pageContent .flex .sidebar .courseDetails a.applyNow i { right: 50px; } body.iot.coursePage #pageContent .flex .sidebar .courseDetails, body.university.coursePage #pageContent .flex .sidebar .courseDetails { margin-top: 5px; } #pageContent .relatedCareers img.tab { display: block; width: 100%; } } @media (max-width: 1023px) { #pageContent .flex .sidebar .searchElement, #pageHolder aside#sidebar .relatedEvents, #pageHolder aside#sidebar .relatedNews, body.apprenticeships.coursePage #pageContent .flex .sidebar .sectionBranding img { display: none; } #pageHolder #pageContent .relatedEvents, #pageHolder #pageContent .relatedNews { display: block; max-width: 100%; } #showcase .carouselItem { background: linear-gradient(245deg, #00829b 0, #001f5f 100%) no-repeat; } #showcase .carouselItem.sixth-form-green { background: linear-gradient(245deg, #076b3b 0, #52840f 100%) no-repeat; } #showcase .carouselItem.technical-orange { background: linear-gradient(245deg, #df3601 0, #9d6e00 100%) no-repeat; } #showcase .carouselItem.iot-blue { background: #141314; } #showcase .carouselItem.apprenticeship-blue { background: linear-gradient(245deg, #017acd 0, #127caf 100%) no-repeat; } #showcase .carouselItem.university-green { background: linear-gradient(245deg, #24847c 0, #115e6b 100%) no-repeat; } #showcase .carouselItem.adult-red { background: linear-gradient(245deg, #a61932 0, #cd4a3b 100%) no-repeat; } body.sector-page #pageHolder aside#sidebar nav#sideMenu { background-color: transparent; } #pageContent .courseListing .flex.space-between, #pageContent .subjectArea .flex.space-between { justify-content: flex-start; flex-wrap: wrap; } #pageContent .courseListing .flex.space-between .count, #pageContent .subjectArea .flex.space-between .count { flex: 0 0 100%; margin-top: 15px; } #pageContent .subjectArea.fullWidth .subjectList .subject .holder .content .title { margin-bottom: 10px; } #pageContent .courseListing .courseList .course, #pageContent .quickLinks.courseListing .link, #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { flex: 0 0 100%; width: 100%; max-width: 100%; } body.apprenticeships #pageHolder { background-image: none; } #pageContent .flex .sidebar { flex: 0 0 100%; } body.coursePage #pageContent .flex.landing { flex-direction: column-reverse; } body.apprenticeships.coursePage #pageContent .flex .sidebar .sectionBranding img.mobile, body.coursePage #pageHolder #pageContent .overflowHolder { display: block; } #pageContent .flex .sidebar .sectionBranding { text-align: left; margin-bottom: 20px; } #pageContent .flex .sidebar .sectionBranding.multiple-images img { margin: 0; } } @media all and (min-width: 1024px) and (max-width: 1200px) { #pageHolder #pageContent .newsHolder { gap: 0 2%; } #pageHolder #pageContent .newsHolder .item { flex: 0 0 49%; } #pageContent .subjectArea { margin-top: 40px; } #pageContent .subjectArea .flex.space-between { justify-content: flex-start; flex-wrap: wrap; } #pageContent .subjectArea .flex.space-between .count { flex: 0 0 100%; margin-top: 15px; } #pageContent .subjectArea .subjectList { margin: 30px 0 40px; gap: 20px 2%; } #pageContent .subjectArea .subjectList .subject { flex: 0 0 32%; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder { min-height: 400px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject.reverse .holder .content { padding: 50px 70px 50px 220px; } #pageContent .subjectArea.fullWidth.large-scale .subjectList .subject .holder .content { padding: 50px 200px 50px 70px; } #pageContent .flex.landing .landing-right .carousel.single-image { margin-bottom: 0; } body.coursePage #pageContent .flex.landing { gap: 0 75px; } body.coursePage #pageContent .flex.landing .landing-left { flex-grow: 1; flex: 1 0 0; } } #slider .sliderText .slide.apprenticeship-blue .bannerText a.readMore:hover{ color: #FFF !important; }