﻿header nav ul li span,
.top-nav-mobile-only	{display: none}

/* IE10+ SPECIFIC STYLES GO HERE. IE10+ NO LONGER SUPPORT CONDITIONAL STATEMENTS IN THE HEAD OF A FILE */ 
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  

}

@media (max-width: 1400px) 
{
	.alertticker-container	{padding-left: 20px; padding-right: 20px;}
}
	
@media (max-width: 1366px) 
{
	/* HOME GRID */
	.grid-panel h3	{font-size: 2.5vw}
	
	/* TWO COL PAGE */
	.col-left	{width: 30%;}
	.col-right	{width: 70%;}
	
	.grey-col	{overflow-x: hidden}
	
}

@media (max-width: 1300px) 
{
	.expanded-book .cols	{justify-content: space-between}
	.col-thanks,
    .col-text-book,
	.col-book-now	{width:calc(50% - 10px); padding: 0}
	.col-book-now .checkboxes .container	{margin-right: 0}
}

@media (max-width:1296px) {
	
	/* COURSE LISTING 2023 */
	.courses-section	{padding: 3vw}
	.course-listing-row:first-child	{margin-top: 0}
	.course-listing-row:last-child	{margin-bottom: 0}
}

@media (max-width: 1200px) 
{
    /* NAV */
	header nav ul li	{margin-left: 20px;}
	
	/* TOP NAV */
	header .top-nav ul							{font-size: 16px;}
	header .top-nav ul li						{margin-left: 25px;}
	header .search-box input[type="text"]		{font-size: 16px;}
	header .search-box:hover input[type="text"]	{width:150px;}
	
	/* TWO COL PAGE */
	.col-right	{padding-right: 40px;}
	
	/* LEFT COL */
	.left-nav ul	{font-size: 18px;}
	
	/* COURSE LISTING 2023 */
	.courses-section		{padding: 10px;}
	.course-listing-card h3		{font-size: 26px;}
	.course-listing-card-text	{padding: 0 30px;}
	
	.courses-section .course-section-intro	{padding: 30px; padding-bottom: 0}
	
	.course-detail-2023	{padding-top: 30px;}

	/************/
	/* SUBJECTS */
	.sp-image	{width: 50%}
	
	.three-steps .step h3		{font-size: 28px;}
	.three-steps .step p		{font-size: 20px; padding-left: 65px;}
	.three-steps .number		{width: 50px; height: 50px; margin-right: 15px;}
	.three-steps .number span	{font-size: 30px;}
	
	.three-steps .step:nth-child(1)	{width: 35%; padding-left: 40px;}
	.three-steps .step:nth-child(2)	{width: 35%}
	.three-steps .step:nth-child(3)	{width: 30%}
	
}

@media (max-width: 1100px) 
{	
	.action-panel	{top: 0}
}


@media (max-width: 1024px) 
{
    /* NAV */
	header nav ul		{font-size: 18px;}
	header nav ul li	{margin-left: 15px;}
	
	/* HOME GRID 
	.home-grid .inner				{width:682px;}
	.home-grid .inner .col			{width:341px;}
	.home-grid .inner .col.span-2	{width:682px;}*/
	.home-grid .inner				{width:100%;}
	.home-grid .inner .col			{width:50%;}
	.home-grid .inner .col.span-2	{width:100%;}
	.grid-panel						{padding: 0 30px}
	.grid-panel h3					{font-size: 33px}
	
	/* FOLLOW US */
	.follow-us .col-container	{flex-wrap: wrap}
	.follow-us .col				{flex: auto; width: 50%}
	
	/* LEFT COL */
	.col-left	{width: 310px;}
	.col-right	{width:calc(100% - 310px); padding-left: 30px;}
	
	/* STAFF LISTING */
	.staff-image	{width: 25%}
	.staff-text		{width: 75%; padding-left: 20px;}
	
	/* CONTACT US */
	.contact-bottom .col-container	{flex-direction: column}
	.col-contact-left				{width: 100%; padding: 0; margin-bottom: 25px;}
	.col-contact-right				{width: 100%;}
	.col-map						{width: 100%}
	
	/* FOOTER */
	footer .footer-top ul		{font-size: 16px; padding-right: 15px;}
	.col-container.footer-top	{flex-wrap: wrap; justify-content: flex-start}
	
	/************/
	/* SUBJECTS */
	.three-steps .step h3		{font-size: 24px;}
	.three-steps .step p		{font-size: 16px;}
	.subject-undergrad-courses .course-listing-row	{width: calc(100% + 70px); margin-left: -35px;}
	
	.image-icon-text-card .iit-image	{width: 50%;}
	
	.itp-icon,
	.image-icon-text-card .iit-icon		{width: 60px; margin-right: 15px}
	
	.itp-text							{padding: 0}
	.split-panel-v3 .buttons			{flex-direction: column; align-items: flex-start}
	.split-panel-v3 .buttons .btn-block	{display: inline-flex; margin: 0.5em 0}
	
	.tib-box	{width: 50%}
	
}

@media (max-width: 945px) 
{
    /* NAV */
	header				{padding-top: 0}
	header nav			{position: fixed; left: -999999px; flex-direction: column; padding-left: 25px; padding-right: 25px; height: 100%;}
	header .top-nav ul	{display: none}
	header .inner		{align-items: flex-end; padding-top: 30px; padding-bottom: 30px;}
	.logo svg			{width:165px; height: auto}
	
	header nav			{position: absolute; left: -99999px; top:127px; width: 100%; background-color: #101B40; padding:10px 25px 20px; display: flex; height: 100vh;}
	header nav ul		{flex-direction: column; width: 100%;}
	header nav ul li	{margin-left: 0; padding: 12px 0; position: relative; border-bottom: 1px solid rgba(255,255,255,0.2)}
	header nav ul li a	{color:#ffffff}
	
	header nav ul li span	{width: 40px; height: 40px; background-color: #FFCB00; display: flex; position: absolute; right:0; top:0; background-image: url(/_assets/icon-chevron-down-blue.svg); background-position: center; background-repeat: no-repeat}
	
	header nav.open		{left: 0}
	header nav ul.top-nav-mobile-only 	{display: block; margin-top: 20px;}

	header nav ul li .dropdown			{position: relative; left: 0; top: 10px; display: none}
	header nav ul li .dropdown .inner	{padding: 0}
	
	header .search-box	{margin-right: 55px;}
	
	ul.parent-nav  li span	{width:30px; height: 30px; background-color: #101B40; background-image: url(/_assets/icon-chevron-down-white.svg); background-size: 12px auto}
	
	.dropdown-inner					{padding: 20px;}
	.dropdown-inner ul				{display: block; width: 100%; max-width: 100%; padding-right: 0; border:none}
	.dropdown-inner ul li			{display: block; padding: 8px 0; margin-bottom: 5px; border: none}
	
	.dropdown-inner ul li:after		{display: none !important}
	
	.dropdown-inner ul.child-nav	{display: none; margin-top: 10px; padding-left: 5px;}
	.dropdown-inner ul.child-nav li	{padding: 5px; margin-bottom: 0; font-size: 13px;}
	.child-nav li span				{display: none !important}
	
	/* HAMBURGER */
	.hamburger	{display: block}
	
	/* HOME HERO */
	.hero-text h1			{font-size: 50px; line-height: 1.1em}
	.hero-text p			{font-size: 30px; line-height: 1.2em}
	.hero-carousel .slide	{padding: 75px 0}
	
	/* STAFF LISTING */
	.staff-item		{flex-direction: column; padding-bottom: 30px;}
	.staff-text		{padding-left: 0; width: 100%}
	.staff-image	{width:168px;}
	
	/* OPEN DAYS */
	.split-card.vertical						{flex-direction: column !important}
	.split-card.vertical .card-text				{width: 100%; padding:40px 35px 50px 35px;}
	.split-card.vertical .card-image-container	{width: 100%; min-height: 250px;}
	.expanded-book .cols						{flex-direction: column}
	.col-thanks,
	.col-text-book				{width: 100%;}
	.col-book-now				{width: 100%; margin-top: 20px;}
	
	/* SEARCH RESULTS */
	.col-search-results							{width: 100%;}
	.search-results .col-callout				{width: 100%;}
	.search-results .col-container				{flex-direction: column; justify-content: flex-start}
	.search-results .col-callout				{padding-left: 0; height: unset;}
	.search-results .col-callout .grid-panel	{padding-top:50px; padding-bottom: 50px;}
	.search-results .buttons					{flex-wrap: wrap}
	.buttons .btn-chevron						{margin-bottom: 15px;}
	
	.course-switches	{flex-wrap: wrap; margin-bottom: 10px}
	.switch-container	{width:50%; margin-bottom: 20px;}

	.full-width  .switch-container {width:33%;}
    
	/* COURSE DETAIL 2023 */
	.course-details-overview ul	{font-size: 16px;}
	.course-detail-2023 p.intro	{font-size: 20px;}
	
	/* SUBJECTS LISTING */
	.subject-content-hero-container p	{font-size: 24px;}
	
	/* NEW BUTTON */
	.btn-block	{font-size: 22px; padding: 22px 20px;}
	
	/* ILP SECTION */
	.ilp-header-panel .col			{width: 60%;}
	.ilp-header-panel .text-col		{margin: 30px; padding: 30px;}
}

@media (max-width: 900px) 
{
	/************/
	/* SUBJECTS */
	.three-steps				{flex-direction: column;}
	.three-steps-section		{}
	.three-steps .step			{width: 100% !important; text-align: center; padding: 35px 40px !important}
	.three-steps .number		{margin: 0 0 10px 0; font-size: 42px;}
	.three-steps .step h3		{font-size:32px; flex-direction: column; align-items: center; justify-content: center; width: 414px; max-width: 100%; margin:0 auto 15px}
	.three-steps .step h3 br	{display: none}
	.three-steps .step p		{font-size: 22px; padding: 0; width: 414px; max-width: 100%; margin: auto; position: relative; z-index: 2}
	
	.three-steps .step						{background-image: none !important; position: relative; padding-bottom: 20vw !important}
	.three-steps .step:after				{position: absolute; bottom: 0; left: 0; width: 100%; background-image: url(/_uploads/_assets/step-shape-1-down.png); content: ''; height: 20vw; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; z-index: 0}
	.three-steps .step:nth-child(2):after	{background-image: url(/_uploads/_assets/step-shape-2-down.png);}
	.three-steps .step:nth-child(3):after	{background-image: url(/_uploads/_assets/step-shape-3-down.png);}
	
	.subject-mid-page-header h2	{font-size: 38px; margin-bottom: 0.25em; line-height: 1.1em}
	.subject-mid-page-header p	{font-size: 23px;}
	
	.subject-full-video-section .action-panel	{position: relative; left: auto; top: auto; background-color: #f8f8f8; width: 100%;}
	.itp-text p	{font-size: 16px;}
	
	.subject-text-intro-button-section.mt	{margin-top: 0}
}

@media (max-width: 800px) 
{
	/* TWO COL */
	.col-left	{display: none}
	.col-right	{width:100%; padding: 40px 30px;}
	
	/* STAFF LISTING */
	.staff-item		{flex-direction: row; padding-bottom: 30px;}
	.staff-text		{padding-left: 30px;}
	
	/* ALUMNI HUB PAGE */
	.alumni-hub-row					{flex-direction: column !important}
	.home-grid-alumni .inner .col	{width: 100%;}
	
	/* COURSE LISTING 2023 */
	.course-listing-row.flipped .col-split,
	.courses-section .col-split		{flex-direction: column}
	
	.col-split .col-stacked,
	.col-split .course-listing-card		{width: 100%;}
	.course-listing-card.height-double	{height: 277px;}
	
	.course-listing-card-stacked	{flex-direction: row}
	
	.course-listing-card-stacked .course-listing-card-text,
	.course-listing-card-stacked .course-listing-card-image	{width: 50%; flex: auto}
	
	.col-split .course-listing-card:first-child	{margin-bottom: 10px;}
	
	/************/
	/* SUBJECTS */
	.subject-split-panel-section .inner	{padding: 0 !important}
	
	.subject-split-panel-section-2 .inner		{padding: 0 !important}
	.subject-split-panel-section-2 .split-panel	{flex-direction: column}
	.subject-split-panel-section-3 .sp-image,
	.subject-split-panel-section-2 .sp-image	{height: 360px; width: 100%;}
	
	.subject-split-panel-section-3 .inner		{padding: 0 !important}
	
	.ss-text	{padding-right: 0}
	
	.subject-full-video-section .video-container-outer	{margin-bottom: 10px;}
	
	
	.subject-split-panel-section-3 .split-panel	{flex-direction: column-reverse}
	
	.pt	{padding-top: 40px}
	.pb	{padding-bottom: 40px}
	.mt	{margin-top: 40px}
	
}

@media (max-width: 768px) 
{
	.col.image .grid-panel.hover	{visibility: visible; opacity: 1; transform: translateY(0); opacity: 0.9}
	
	.course-details-overview	{flex-direction: column}
	.course-details-overview ul.ucas	{margin-right: 0; margin-bottom: 20px;}
	
	/************/
	/* SUBJECTS */
	
	.text-intro-button					{flex-direction: column}
	.tib-text							{padding-right: 0}
	.image-icon-text-card .iit-image	{display: none}
	.image-icon-text-card .iit-text		{padding-left: 0; width: 100%;}
	.image-icon-text-card-section		{margin-top: 0; flex-direction: column;}
	.image-icon-text-card {width: 100%; flex-direction: column;}
	.tib-box		{display: none}
	.subject-faqs-section .tib-text	{margin-bottom: 0}
	
	.subject-text-intro-button-section .btn-block	{margin-top: 25px;}
	
}

@media (max-width: 700px) 
{
	/*************/
	/* SUBJECTS */
	.subject-content-hero-container .buttons	{flex-direction: column; align-items: center; margin-top: 25px;}
	.subject-content-hero-container .buttons a	{display: inline-flex; margin-bottom: 20px;}
}

@media (max-width: 699px) 
{
	/* ILP SECTION */
	.ilp-header-panel-image			{position: relative; width: 100%; height: 320px}
	.ilp-header-panel .inner		{padding: 0 35px;}
	.ilp-split-panel.flipped .cols,
	.ilp-header-panel .cols			{flex-direction: column;}
	.ilp-header-panel .col			{width: 100%;}
	.ilp-header-panel .text-col		{margin: 0; padding: 35px 20px;}
 
	.ilp-header-panel .text-col h2,
	.ilp-split-panel .col .text-col h2	{font-size: 32px;}
	
	.ilp-split-panel .cols	{flex-direction: column}
	.ilp-split-panel .col	{width: 100%;}
	.ilp-split-panel .col-image	{position: relative; height: 320px;}
}

@media (max-width: 640px) 
{
	/************/
	/* SUBJECTS */
	.split-panel	{flex-direction: column;}
	.sp-image		{height: 235px; width: 100%;}
	.sp-text		{width: 100%;}
	
	.subject-undergrad-courses .course-listing-card-image			{height: 190px; width: 100%;}
	.subject-undergrad-courses .course-listing-card,
	.subject-undergrad-courses .course-listing-card.height-double	{height: auto; flex-direction: column-reverse;}
	.subject-undergrad-courses .course-listing-card-text			{padding: 40px; width: 100%;}
	
}

@media (max-width: 600px) 
{
	/* STAFF PORTAL NAV */
	.student-portal-popup-container .inner ul		{flex-direction: column; align-items: center}
	.student-portal-popup-container .inner ul li	{padding:15px 20px;}
	.student-portal-popup-container					{padding: 30px 0}
	
	/* STAFF LISTING */
	.staff-item		{flex-direction: column; padding-bottom: 30px;}
	.staff-text		{padding-left: 0; width: 100%; padding: 0}
	.staff-item .expander-chevron	{bottom: 30px;}
	
	/* IMAGE CAROUSEL */
	.image-carousel-container															{text-align: center}
	.image-carousel-container .slide-text												{text-align: left}
	.image-carousel-container .carousel-nav-container-2									{bottom: auto; left: auto; right: auto; position: relative; display: inline-block; margin-top: 20px;}
	.image-carousel-container .carousel-nav-container-2 ul.slick-dots li 				{border-color: #0E1D4A;}
	.image-carousel-container .carousel-nav-container-2 ul.slick-dots li.slick-active	{background-color: #0E1D4A;}
	.image-carousel-container .carousel-nav-container-2 .slick-arrow					{background-image: url(/_assets/icon-chevron-right-blue.svg);}
	.image-carousel p	{width: 100%;}
	
	/* COURSE LISTING */
	.course-item-top .expander-chevron	{width: 20px; height: 11px; right:-30px !important}
	.course-item						{padding: 30px 50px 30px 20px !important}
	.course-deets ul,
	.course-deets p,
	.course-deets h3					{font-size: 20px;}
	
	/* CONTACT */
	.contact-general .cols,
	.contact-location .cols	{flex-direction: column;}
	.contact-location .accordion-section	{margin-bottom: 25px; padding-right: 0; width: 100%;}
    
    /* 2025 OPEN DAY PANEL */
    .open-days-2025-panel               {margin: 30px 0}
    .open-days-2025-panel .odp-image    {position: relative; height: 100vw;}
    .open-days-2025-panel .inner        {padding: 0}
    .open-days-2025-panel .text-col     {padding-left: 30px; padding-right: 30px;}
    .open-days-2025-panel .text-col h2  {font-size: 40px;}
}

@media (max-width: 550px) 
{
	.dropdown-inner ul		{font-size: 14px;}
	.dropdown-inner ul li	{padding-right: 50px;}
	
	/* HOME HERO */
	.hero-text				{padding-left: 0; padding-right: 0}
	.hero-text h1			{padding-left: 30px; padding-right: 30px;}
	.hero-text p			{padding-left: 30px; padding-right: 30px;}
	.hero-text .btn-arrow	{min-width: unset; max-width: 100%;}
	
	/* HOME GRID */
	.home-grid .inner .col			{width:100%; min-height: unset; height: auto}
	.home-grid .grid-panel			{padding-top:45px; padding-bottom: 45px;}
	.home-grid .grid-panel.image	{padding-top: 50%;}
	
	/* FOLLOW US */
	.follow-us .col				 {width: 100%}
	
	/* COURSE DETAIL */
    .full-width  .switch-container {width:50%;}
	.buttons-group .btn-chevron	{width: 100%;}
	.grey-top					{padding-bottom: 40px; margin-bottom: 40px;}
	
	/* BUTTON */
	.courses-page-panel .btn-arrow,
	.btn-arrow	{min-width: unset; font-size: 20px; align-items: center}
	
	/* LATEST NEWS LISTING */
	.page-panel-latest-news .col	{width:367px; max-width: 100%; margin: auto}
	.load-more-button				{display: flex; justify-content: center;}
	.load-more-button .btn-plus		{min-width: unset; width: 337px; max-width: 100%;}
	.page-panel-latest-news			{margin-bottom: 30px;}
	
	/* OPEN DAYS */
	.page-panel-open-days .col	{margin-bottom: 20px;}
	
	/* CONTACT US */
	.form-container .checkboxes	{flex-direction: column}
	.checkbox-cell				{margin-bottom: 10px;}
	
	/* SEARCH RESULTS */
	.big-search.search-box input[type="text"]	{font-size: 30px;}
    
    /* COURSE LISTING 2023 */
	.courses-section .course-listing-card		{flex-direction: column-reverse !important; height: auto;}
	.courses-section .course-listing-card-image	{height: 50vw; width: 100%}	
	.courses-section .course-listing-card-text	{width: 100%; padding: 40px}	
	.course-listing-card .arrow						{margin: 0}
	
	.hero-text h1	{font-size: 30px;}
	
	/* FOOTER */
	footer										{padding-top: 40px;}
	.col-container.footer-top					{flex-direction: column}
	.col-container.footer-top ul				{padding: 0}
	.col-container.footer-top ul li				{display: none}
	.col-container.footer-top ul li:first-child	{display: block}
	.footer-bottom								{flex-direction: column; margin-top: 15px;}
	.footer-bottom ul							{margin-top: 20px;}
	.footer-bottom ul li						{margin-left: 0; margin-right: 14px;}
	
	/* update from client to be able to show footer items on mobile */
	.col-container.footer-top ul li.show-on-mobile {display: block; margin-top: -5px; font-size: 15px; }
	
	
	/*************/
	/* SUBJECTS */
	.ss-row	{flex-direction: column}
	.ss-image	{margin-bottom: 15px; margin-left: 0;}
	.ss-text	{padding-left: 0}
	.ss-image:before	{width: 40px; height: 40px; left: 0}
}

@media (max-width: 500px) 
{
	header .inner		{padding-left: 20px; padding-right: 20px;}
	header .logo svg	{width: 130px;}
	header .search-box	{margin-left: 0}
	header nav			{top:113px;}
	
	/* COURSE LISTING 2023c */
	.course-section-intro p.intro	{font-size: 22px;}
	.hero-text p.pre				{font-size: 18px;}
	
}

@media (max-width: 414px) 
{

	.col-right	{padding-left: 15px; padding-right: 15px;}
	.inner		{padding: 0 15px;}
	
	
	/* HOME HERO */
	.hero-text .btn-arrow	{font-size: 22px;}
	
	/* BIG SEARCH */
	.course-search-section	.search-box input[type="text"] {font-size: 22px;}
	
	/* NEWSTICKER */
	.js-ticker,
	.newsticker-header		{font-size: 16px;}
	.newsticker li a:after	{width:32px; height: 17px;}
	.newsticker-header		{padding-right: 15px;}
	
	/* LATEST NEWS */
	.latest-news-section .slick-dots	{}
	.latest-news-section .slick-dots li	{margin: 0 3px; width: 20px; height: 20px;}
	
	/* CONTENT HEADER */
	.content-hero-container .dropdown-box select			{font-size: 20px; background-size: 26px 13px; padding-left: 15px; padding-right: 55px;}
	.content-hero-container .search-box input[type="text"]	{font-size: 22px;}
	.content-hero-container .hero-text h1					{padding: 0}
	
	/* CONTACT US */
	.form-container .form-row .form-cell	{width:100%; margin-bottom: 20px;}
	.form-container .form-row				{flex-direction: column; margin-bottom: 0}
	
	/* COURSE DETAIL 2023 */
	.course-details-overview ul.overview-list	{column-count: 1}
	
	/************/
	/* SUBJECT */
	.inner.inner-narrow	{padding: 0 35px}

	/*.subjects-undergrad-courses .course-listing-row	{width: calc(100% + 30px); margin-left: -15px;}*/

	
}

@media (max-width: 413px) 
{
	/* HOME HERO */
	.hero-text p			{font-size: 20px;}
	.btn-arrow:after		{width: 34px; height: 18px;}
	.switch-container label	{font-size: 14px;}
	
	/* HEADER */
	.hamburger			{top:20px;}
	header .search-box	{margin-right: 0}

}

@media (max-width: 350px) 
{
	header .search-box input[type="text"]			{font-size: 13px;}
	header .search-box:hover input[type="text"]		{width: 120px;}
}

@media (max-width: 320px) 
{
    /* IPHONE 5 */
}







