/* = Framework
----------------------------------------------------------------------------------------------------------------- */
header { width: 100%; position: absolute; top: 0; z-index: 9999; }
header .container { border-bottom: 2px solid #666; }
header .btn, .sticky .btn { position: absolute; top: 0; right: 0; font-weight: 600; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }
header .info, .sticky .info { color: #fff; float: right; margin-right: 212px; margin-top: 10px; }
header .info a, .sticky .info a { margin-right: 10px; color: #fff; font-size: 0.8em; }
header .social, .sticky .social { position: absolute; right: 340px; top: 10px; }
.social i { color: #fff; font-size: 0; margin-right: 10px; }
.social i:before { font-size: 16px; }

.no-js header { padding-top: 0; }
.no-js header .nojavascript { padding: 10px 15px; text-align: center; background-image: none; }

footer { padding: 40px 0 0; color: #fff; background: #023850; }

.container { width: 1240px; margin: 0 auto; position: relative; }
.skinny { width: 1000px; margin: 0 auto; position: relative; }
.quote { padding: 50px 0 40px; color: #fff; background: #005c85; }
.quote cite { width: 500px; display: block; margin: 20px auto 0; }

.inner { max-width: 700px; margin:50px auto; }
.inner:first-child {margin-top: 0;}
.inner:last-child {margin-bottom: 0;}

@media screen and (max-width: 1310px) {
    .container { width: auto; margin-right: 25px; margin-left: 25px; }
}

@media screen and (max-width: 1000px) {
    .skinny { width: auto; margin-right: 25px; margin-left: 25px; }
}

@media screen and (max-width: 820px) {
    header .social { right: 220px; }
}

@media screen and (max-width: 940px) {
    header .btn { font-size: 0.8em; padding-top: 7px; }
    header .info { margin-right: 0; margin-top: 45px; }
    header .social { right: 50px; top: 78px; }
}

@media screen and (max-width: 600px) {
    .quote cite { width: auto; line-height: 1.5em; }
}

@media screen and (max-width: 480px) {
    .container { margin-right: 20px; margin-left: 20px; }

    .inner { margin:45px auto; }
}

@media screen and (max-width: 360px) {
    header .btn { font-size: 0.65em; padding: 6px 10px 8px; }

    .inner { margin:40px auto; }
}

.enrolLloyds{display:none}
#lloyds .payFlywire{display:none}
#lloyds .enrolLloyds{display:block}
#lloyds .enrolStandard{display:none}

/* = Templates
----------------------------------------------------------------------------------------------------------------- */
.template { padding: 60px 0; }

.template2col section { width: 70%; float: left; }
.template2col section .courseLogo { width: 175px; }
.template2col aside { width: 25%; float: right; }


@media screen and (min-width: 751px) and (min-height: 751px)  {
.template2col aside { top: 125px; position: -webkit-sticky; position: sticky;}
}

@media screen and (max-width: 740px) {
    .template { padding-top: 40px; padding-bottom: 40px; }

    .template2col section { width: 100%; }
    .template2col aside { margin-top:20px; width: 100%; }
}

@media screen and (max-width: 480px) {
    .template { padding-top: 35px; padding-bottom: 35px; }
}

/* = Logo
----------------------------------------------------------------------------------------------------------------- */
.logo { width: 89px; height: 78px; float: left; margin: 20px 0; background: url(/_img/logo.svg) no-repeat top left; }

.no-svg .logo { background-image: url(/_img/logo.png); }

.strapline { width: 250px; color: #999; font-style: italic; font-size: 0.9em; position: absolute; top: 60px; left: 110px; }

@media screen and (max-width: 1200px) {
    .strapline { display: none; }
}

/* = Menu
----------------------------------------------------------------------------------------------------------------- */
.menu { position: absolute; top: 75px; right: 0; }
.menu ul { margin: 0; list-style: none; }
.menu ul li { height: 41px; display: inline-block; margin: 0 0 0 40px; line-height: 1em; font-size: 1em; position: relative; }
.menu ul li a { display: inline-block; color: #fff; padding: 0 0 23px; border-bottom: 2px solid #666; }
.menu ul li a:hover { color: #ccc; }
.menu ul li.liOn a { border-color: #45b4d3; }
.menu ul li.applyhide { display: none; }

.menu ul ul { width: 250px; display: none; position: absolute; top: 41px; left: -20px; padding: 10px 20px 5px; background: #080808; z-index: 9999; }
.menu ul li:hover ul { display: block; }
.menu ul ul li { height: auto; display: block; margin: 20px 0; line-height: 1.2em; }
.menu ul ul li a { padding: 0; }
.menu ul li:hover ul li a { display: block; padding: 0; border: 0; }

.menuTrigger { display: none; cursor: pointer; }

@media screen and (max-width: 1600px) {
    .menu ul li.liHasChildren:last-child  ul { left:auto; right: -20px;  text-align: right; }
}

@media screen and (max-width: 1360px) {
    .menu ul li.liHasChildren:nth-last-child(2) ul { left:auto; right: -20px;  text-align: right; }
}

@media screen and (max-width: 940px) {
    .menu { max-height: 0;  width: calc(100% - 40px); overflow: hidden; position: absolute; top: 103px; right: 0; margin: 0; background: #0098C4; -moz-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; }
    .menu ul { margin: 10px 0 15px; }
    .menu ul li { height: auto; display: block; margin-left: 0; text-align: center; }
    .menu ul li a { color: #fff; padding: 20px 0 6px 0; border: none; border-width: 1px; }
    .menu ul li a:hover { color: #fff; }
    .menu ul li.liOn a { border-bottom: 2px solid #fff; }
    .menu ul li:last-child a { border: 0; }

    .menu ul ul { display: none !important; }

    .extended { max-height: 500px; right: 0; }

    .menuTrigger { width: 28px; height: 28px; float: right; display: block; margin: 8px 0 0; font-size: 0; background: url(/_img/icons/menu.svg) no-repeat center center; clear: right; }
    .menuTriggerClose { background-color: #0098C4; background-image: url(/_img/icons/cross.svg); }

    .no-svg .menuTrigger { background-image: url(/_img/icons/menu.png); }
    .no-svg .menuTriggerClose { background-image: url(/_img/icons/cross.png); }
}

/* = Menu
----------------------------------------------------------------------------------------------------------------- */
.submenu { margin: 0 0 40px; }
.submenu ul { margin: 0; list-style: none; }
.submenu ul li { display: block; margin: 0; }
.submenu ul li a { display: block; color: #fff; padding: 10px 20px; border-bottom: 2px solid #45b4d3; background: #0198c3; }
.submenu ul li a:hover { color: #eee; }
.submenu ul li.liOn a { background: #005c85; }
.submenu ul li:last-child a { border: 0; }
.submenu ul li ul li a { background: #a6b1b7; }
.submenu ul li.liOn ul li a { background: #a6b1b7; }

aside .submenu:last-child {margin-bottom: 0;}

.lloydsLink { margin-bottom: 0; }
.lloydsLink a { background: #0198c3; border-bottom: 2px solid #45b4d3; color: #fff; display: block; padding: 10px 20px; }
.lloydsLink a:hover { color: #eee; }

/* = Sticky Menu
----------------------------------------------------------------------------------------------------------------- */
.sticky { top: -102px; position: fixed; opacity: 1; width: 100%; background: #000; background: rgba(0, 0, 0, 0.9); border-bottom: 2px solid #666; border-bottom: 2px solid rgba(102, 102, 102, 0.8); z-index: 99999; transition: all 0.2s linear; -webkit-transition: all 0.2s linear; }
.sticky .logo { height: 60px; background-size: 78%; }
.sticky .strapline { width: 200px; font-size: 0.7em; top: 47px; left: 100px; }
.sticky .menu { top: 57px; }
.sticky.show { top: 0; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; }

@media screen and (max-width: 940px) {
    .sticky .menuTrigger { clear: right; margin: 30px 0 0; }
}

@media screen and (max-width: 840px) {
    .sticky .info { display: none; }
    .sticky .social { right: 220px; }
    .sticky .menuTrigger { margin: 60px 0 0; }
}

@media screen and (max-width: 740px) {
    .sticky .btn { font-size: 0.8em; padding-top: 7px; }
    .sticky .social { right: 50px; top: 64px; }
    .sticky .menu { top: 88px; }
}

@media screen and (max-width: 360px) {
    .sticky .btn { font-size: 0.65em; padding: 6px 10px 8px; }
}

/* = Hero
----------------------------------------------------------------------------------------------------------------- */
.heroContainer { position: relative; }
.hero { position: relative; overflow: hidden; background: #000; }
.hero h1 { margin-left: -570px; padding: 210px 0 0; color: #fff; font-weight: 300; line-height: 1.2em; position: absolute; top: 0; left: 50%; z-index: 1; }
.hero h1 span { color: #0198c3; }
.heroContainer .hero h1 { left: auto; margin-left: 0; right: 50%; width: 620px; }
.hero p { color: #b4b4b4; }
.hero p span { display: block; color: #fff; font-size: 1.4em; font-weight: 300; margin: 0 0 10px; }
.hero img { width: 100%; }
.hero div { width: 500px; color: #fff; position: absolute; top: 0; left: 50%; margin-left: -570px; }
.heroBtns { margin-left: 0; padding: 210px 20px 0; position: absolute; top: 0; left: 50%; width: 620px; z-index: 1; }
.heroBtns h5 { color: #fff; }
.heroBtns p { margin-bottom: 0; }
.heroBtns .btn:not(.btnImpact) { margin-right: 20px; }

#home .hero { height: 650px; }
#home .hero h1 { margin-left: 0; font-size: 3.1em; line-height: 1.14em; position: static; }

@media screen and (max-width: 1500px) {
    .hero { height: 400px; }
    .hero img { position: absolute; bottom: 0; right: 0; }

    #home .hero img { position: static; }
}

@media screen and (max-width: 1310px) {
    .hero { height: 300px; }
    .hero h1 { right: 25px; left: 25px; margin-left: 0; padding-top: 175px; }
    .heroContainer .hero h1 { left: 25px; right: 25px; width: auto; }
    .hero div { right: 25px; left: 25px; margin-left: 0; }
    .heroBtns { background: #005c85; padding: 18px 30px; position: static; text-align: center; width: auto; }
    .heroBtns h5, .heroBtns p { display: inline-block; }
    .heroBtns h5 { margin: 0 20px 0 0; }
/* 
    #home .hero { height: 580px; } */
    #home .hero h1 { font-size: 2.7em; }
    #home .hero img { position: absolute; }
}

@media screen and (max-width: 1024px) {
.hero h1 { font-size: 2.4em;  }
}

@media screen and (max-width: 840px) {
    .heroBtns h5, .heroBtns p { display: block; }
    .heroBtns h5 { margin: 0 0 20px; }
}

@media screen and (max-width: 700px) {
    .hero h1 { font-size: 2.2em;  }
    }
    

@media screen and (max-width: 570px) {
    .hero h1 { font-size: 2em; padding-top: 150px; }
    .hero div { width: auto; }

    #home .hero h1 { font-size: 2em; }
}

@media screen and (max-width: 400px) {
    .hero h1 { font-size: 1.85em; }

}

/* = Grid
----------------------------------------------------------------------------------------------------------------- */
.grid .box { width: 32%; min-height: 350px; float: left; margin-right: 2%; padding: 25px 30px 0; position: relative; overflow: hidden; }
.grid .box h2 { margin: 0 0 10px; color: #fff; font-size: 2.2em; }
.grid .box h2 a { color: #fff; }
.grid .box h3 { color: #fff; font-weight: 300; font-size: 1.8em; }
.grid .box h3 a { color: #fff; }
.grid .box ul { list-style-type: square; }
.grid .box ul li a { color: #fff; }
.grid .box img { width: 100%; height: 100%; position: absolute; }
.grid .box:nth-child(2) { margin-right: 0; margin-bottom: 2%; }
.grid .box:nth-child(4) { margin-right: 0; }

/* Box colours */
.grid .boxred { color: #fff; background: #d1594b; }
.grid .boxblue { color: #fff; background: #027c93; }

/* Custom */
.grid .fundamentalsbox { width: 66%; margin-bottom: 2%; color: #fff; padding: 50px 75px 0; text-align: center; background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.grid .fundamentalsbox h3 { color: #fff; }
.grid .fundamentalsbox .btn { font-weight: 600; border-color: #fff; background: none; }

.grid .marketingbox { width: 49%; height: 200px; min-height: 1px; margin-bottom: 2%; color: #fff; padding: 50px 50px 0; text-align: center; clear: both; background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.grid .marketingbox h3 { color: #fff; }
.grid .marketingbox .btn { font-weight: 600; border-color: #fff; background: none; }

.grid .financebox { width: 49%; height: 200px; min-height: 1px; margin-right: 0; margin-bottom: 2%; color: #fff; padding: 50px 50px 0; text-align: center; background-color: #000; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.grid .financebox h3 { color: #fff; }
.grid .financebox .btn { font-weight: 600; border-color: #fff; background: none; }

.grid .enquirybox { width: 100%; padding: 24px 30px; }

.grid .applybox { padding: 50px 25px 0; text-align: center; }
.grid .applybox h3 { font-size: 2.2em; text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5); }
.grid .applybox .btn { font-weight: 600; border-color: #fff; background: none; }

.grid .usefulinfobox { padding: 25px 30px 0; }

.grid .corporatebox { width: 100%; margin-top: 2%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.grid .corporatebox h3 { position: absolute; top: 30px; left: 30px; right: 30px; }
.grid .corporatebox h3 a { color: #fff; }
.grid .corporatebox .btn { position: absolute; bottom: 30px; right: 30px; }

.grid .aboutbox { background-repeat: no-repeat; background-position: center center; background-size: cover; }
.grid .aboutbox h3 { position: absolute; top: 30px; left: 30px; right: 30px; }
.grid .aboutbox h3 a { color: #fff; }
.grid .aboutbox .btn { position: absolute; bottom: 30px; right: 30px; }

@media screen and (max-width: 740px) {
    .grid .box { width: 100%; min-height: 200px; margin-right: 0; margin-bottom: 25px; }
    .grid .box h2 { font-size: 1.8em; }
    .grid .box h3 { font-size: 1.8em; }
    .grid .box:nth-child(2) { margin-bottom: 20px; }

    .grid .fundamentalsbox { width: 100%; padding: 20px 25px 25px; }
    .grid .marketingbox { width: 100%; height: auto; min-height: 1px; padding: 20px 25px 25px; }
    .grid .financebox { width: 100%; height: auto; min-height: 1px; padding: 20px 25px 25px; }

    .grid .enquirybox { padding: 20px 25px 25px; }

    .grid .applybox { padding: 20px 25px 5px; }
    .grid .applybox h3 { font-size: 1.8em; }

    .grid .usefulinfobox { padding: 20px 25px 0; }

    .grid .corporatebox h3 { top: 15px; left: 20px; right: 20px; }
    .grid .corporatebox .btn { bottom: 20px; right: 20px; }

    .grid .aboutbox h3 { top: 15px; left: 20px; right: 20px; }
    .grid .aboutbox .btn { bottom: 20px; right: 20px; }
}



.newLayout .box:nth-child(2) { margin-right: 2%; }
.newLayout .box:nth-child(5) { margin-right: 0; }
.newLayout .box:nth-child(4) { margin-right: 2%; clear: both; }

.newLayout .box.fundamentalsbox { width: 32%; margin-right: 2%; padding: 30px 25px; text-align: left; background-size: 1240px; position: relative; }
.newLayout .box.fundamentalsbox:nth-child(3n+3) { margin-right: 0; }

.newLayout .box.fundamentalsbox:nth-child(1) { background-position: 0 center; }
.newLayout .box.fundamentalsbox:nth-child(2) { background-position: 66% center; }
.newLayout .box.fundamentalsbox:nth-child(3) { background-position: 100% center; }
.newLayout .box.fundamentalsbox:nth-child(4) { background-position: 0 center; clear: none; }
.newLayout .box.fundamentalsbox:nth-child(5) { background-position: 66% center; }
.newLayout .box.fundamentalsbox:nth-child(6) { background-position: 100% center; }

.newLayout .fundamentalsbox h2 { font-weight: 300; font-size: 1.8em; }
.newLayout .fundamentalsbox .btn { bottom: 30px; left: 25px; position: absolute; }
.newLayout .fundamentalsbox .btn:hover { background: #0198c3; border: 1px solid #0198c3; transition: all 0.5s ease-in-out; }
.newLayout .aboutbox { width: 49%; }
.newLayout .corporatebox { width: 49%; margin-top: 0; margin-right: 0; margin-bottom: 25px; }

@media screen and (max-width: 1310px) {
    .newLayout .box.fundamentalsbox { background-size: auto; margin-right: 2%; min-height: 387px; padding: 45px 30px; width: 32%; }

    /*.newLayout .fundamentalsbox:nth-child(1) { background-position: left 15%; }
    .newLayout .fundamentalsbox:nth-child(2) { background-position: center 15%; margin-right: 2%; }
    .newLayout .fundamentalsbox:nth-child(3) { background-position: right 15%; margin-right: 0; }
    .newLayout .fundamentalsbox:nth-child(4) { background-position: left 70%; clear: left; margin-right: 2%; }
    .newLayout .fundamentalsbox:nth-child(5) { background-position: center 70%; }*/

    /*.newLayout .fundamentalsbox .btn { bottom: 50px; left: 32px; position: absolute; }*/
}

@media screen and (max-width: 900px) {
    .newLayout .box.fundamentalsbox { width: 100%; margin-right:0;  min-height: 0; }

    .newLayout .fundamentalsbox .btn { float: right; position: absolute; top: 50px; right: 32px; bottom: auto; left: auto; }
    .newLayout .fundamentalsbox h2 { max-width: 400px; margin-bottom: 32px; }

    .newLayout .box.fundamentalsbox:nth-child(1) { background-position: center 0; }
    .newLayout .box.fundamentalsbox:nth-child(2) { background-position: center 16.6%; }
    .newLayout .box.fundamentalsbox:nth-child(3) { background-position: center 33.3%; }
    .newLayout .box.fundamentalsbox:nth-child(4) { background-position: center 66.4%; }
    .newLayout .box.fundamentalsbox:nth-child(5) { background-position: center 83%; }
    .newLayout .box.fundamentalsbox:nth-child(6) { background-position: center 100%; }
}

@media screen and (max-width: 740px) {
    .newLayout .aboutbox { width: 100%; }
    .newLayout .corporatebox { width: 100%; }
    .newLayout .fundamentalsbox { position: static; }
    .newLayout .fundamentalsbox .btn { float: none; position: static; }

    .newLayout .fundamentalsbox h2 { max-width: 100%; margin-bottom: 10px; }
}

@media screen and (max-width: 480px) {
    .newLayout .box.fundamentalsbox { padding: 40px 25px; }
    .newLayout .fundamentalsbox h2 { margin-bottom: 25px; }
    .newLayout .fundamentalsbox p { display: none; }
}

/* = Links
----------------------------------------------------------------------------------------------------------------- */
.links { display: inline-block; margin: 0 80px 50px 0; vertical-align: top; }
.links h4 { margin: 0 0 10px; font-size: 1.2em; color: #fff; font-weight: 300; }
.links h4 a { color: #fff; font-weight: 300; }
.links ul { margin: 0; list-style: none; }
.links ul li { margin: 5px 0 0; font-size: 0.9em; }
.links ul li a { color: #a6b1b7; }
.links ul li a span b { color: #fff; text-transform: uppercase; font-weight: 400; }
.links ul li a:hover { color: #ccc; }

@media screen and (max-width: 650px) {
    .links { width: auto; display: block; margin-right: 0; margin-bottom: 20px; }
}

/* = Corporate Logos
----------------------------------------------------------------------------------------------------------------- */
.logos { float: right; }
.logos ul { margin: 0; list-style: none; }
.logos ul li { margin: 10px 0; }
.logos ul li a { display: block; color: #a6b1b7; background-repeat: no-repeat; background-position: right center; }
.logos ul li.southampton a { padding: 7px 150px 7px 0; background-image: url(/_img/logos/southampton.png); }
.logos ul li.ceg a { padding: 20px 150px 20px 0; background-image: url(/_img/logos/ceg-digital.png); }
.logos ul li.odi a { padding: 15px 150px 15px 0; background-image: url(/_img/logos/odi.png); }

@media screen and (max-width: 970px) {
    .logos { float: none; margin: 0 0 50px; }
    .logos ul li a { display: inline-block; }
    .logos ul li.southampton a { padding-right: 195px; }
    .logos ul li.ceg a { padding-right: 130px; }
    .logos ul li.odi a { padding-right: 140px; }
}

@media screen and (max-width: 480px) {
    .logos ul li { margin: 0; }
    .logos ul li a { display: block; background-position: bottom left; }
    .logos ul li.southampton a { padding-right: 0; padding-bottom: 50px; }
    .logos ul li.ceg a { padding-right: 0; padding-bottom: 65px; }
    .logos ul li.odi a { padding-right: 0; padding-bottom: 60px; }
}

/* = Cookie
----------------------------------------------------------------------------------------------------------------- */
.cookie { display: none; padding: 10px 0; color: #fff; font-size: 0.9em; background: #022230; }
.cookie p { margin: 0; }
.cookie p a { color: #fff; text-decoration: underline; font-weight: bold; }

@media screen and (max-width: 1040px) {
    /* .cookie { padding-bottom: 60px; } */
    .cookie br { display: none; }
}

/* = Application Form
----------------------------------------------------------------------------------------------------------------- */
.applicationform select { width: 70% }
.applicationform input.qid13 { width: 40% }
.applicationform .questType3 input, .applicationform .questType7 input { width: 70% }

@media screen and (max-width: 440px) {
    .applicationform select,
      .applicationform .questType3 input, .applicationform .questType7 input { width: 100% }
}


/* = News
----------------------------------------------------------------------------------------------------------------- */
.news > ul { list-style: none; margin: 0; padding: 0; }
.news > ul > li { margin-bottom: 30px; padding: 45px 40px; background: #f3f3f3; }
.news > ul > li .meta { margin-bottom: 12px; }
.news > ul > li h2 { font-size: 1.8em; }
.news > ul > li img { padding: 10px 0; width: 25%; margin-left: 40px; height: auto; float: right; }
.news > ul > li:nth-child(3n+3) { margin-right: 0; }


.newsview h1 { line-height: 1.2; }

.newsview img { float: right; margin: 5px 0 40px 50px; max-width: 50%; }


@media screen and (max-width: 1024px) {
    .news > ul > li img { margin-top: 40px; width: 30%; }
}

@media screen and (max-width: 750px) {
    .news > ul > li img { width: 40%; }
}

@media screen and (max-width: 650px) {
    .newsview h1 { font-size: 2em; }

    .news > ul > li h2 { font-size: 1.6em; }
    .news > ul > li { padding: 40px; }
    .news > ul > li img { margin-top: 0; padding: 0; width: 100%; margin-bottom: 30px; }
}

@media screen and (max-width: 620px) {
    .newsview img { margin: 5px 0 25px; width: 100%; max-width: 100%; }
}

@media screen and (max-width: 380px) {
    .newsview h1 { font-size: 1.8em; }
    .news > ul > li h2 { font-size: 1.55em; }
    .news > ul > li { padding: 35px 30px; }
}

@media screen and (max-width: 360px) {
    .news > ul > li h2 { font-size: 1.5em; }
    .news > ul > li { padding: 30px 25px; }
}

/* = 2018 Refresh
----------------------------------------------------------------------------------------------------------------- */
header .container { background-color: #000; border-bottom: 1px solid #666; max-width: 1300px; padding-left: 20px; padding-right: 20px; }
.sticky { background-color: #000; }
.sticky .container { padding-left: 20px; padding-right: 20px; }
header .strapline, .sticky .strapline { left: 130px; }
header .social, .sticky .social { right: 360px; }
header .btn, .sticky .btn { right: 20px; }
header .menu, .sticky .menu { right: 20px;   }
header .menu > ul > li > a, .sticky .menu > ul > li > a { border-bottom: 4px solid transparent; padding: 0 4px 19px; }
header .menu > ul > li.liOn > a, .sticky .menu > ul > li.liOn > a { border-bottom: 4px solid #45b4d3; }

#home .hero span { background-position: center; background-size: cover; bottom: 0; display: block; height: 100%; left: 0; position: relative; right: 0; top: 0; }
#home .hero div { background-color: #000; padding: 40px; top: 210px; }
#home .hero div h2 { color: #fff; font-size: 2.25em; font-weight: 300; line-height: 1.25em; margin-bottom: 30px; padding-top: 0; }
#home .hero div p { margin-bottom: 5px; }

.introText { background-color: #fff; margin-top: -140px; padding-left: 50px; padding-right: 50px; }
.introText .cols { margin-bottom: 60px; margin-left: auto; margin-right: auto; max-width: 960px; padding-top: 80px; }
.introText h1, .introText h3 { color: #000; }
.introText h1 { font-size: 3em; font-weight: 300; line-height: 1.2em; }
.introText h3 { font-weight: 400; margin-bottom: 10px; }

.uspBoxes { display: flex; flex-wrap: wrap; padding-left: 50px; padding-right: 50px; }
.uspBoxes .col { background-image: url(/_img/icons/tick.png); background-position: center 55px; background-repeat: no-repeat; display: flex; flex-direction: column; margin-bottom: 55px; padding: 55px; padding-top: 135px; }
.uspBoxes .col:nth-of-type(1) { background-color: #D1594B; }
.uspBoxes .col:nth-of-type(2) { background-color: #0397C3; }
.uspBoxes .col:nth-of-type(3) { background-color: #000; }
.uspBoxes h2, .uspBoxes p { color: #fff; text-align: center; }
.uspBoxes h2 { font-size: 2em; font-weight: 400; margin-bottom: 10px; }
.uspBoxes p:last-child { margin-bottom: 10px; }
.uspBoxes .btn { border-width: 2px; padding: 9px 19px; transition: all ease-in-out 0.2s; }
.uspBoxes .col:nth-of-type(1) .btn { background-color: #000; border-color: #000; }
.uspBoxes .col:nth-of-type(2) .btn { background-color: #D1594B; border-color: #D1594B; }
.uspBoxes .col:nth-of-type(1) .btn:hover { background-color: #fff; color: #000; }
.uspBoxes .col:nth-of-type(2) .btn:hover { background-color: #fff; color: #D1594B; }
.uspBoxes .col:nth-of-type(3) .btn:hover { background-color: #fff; color: #0397C3; }

.offer { margin-bottom: 80px; position: relative; }
.offer img { min-height: 600px; width: 100%; }
.offer > div { left: 50%; max-width: 790px; padding-left: 25px; padding-right: 25px; position: absolute; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; }
.offer h2, .offer p { color: #fff; font-weight: 300; margin-bottom: 30px; }
.offer h2 { font-size: 2.5em; line-height: 1.2em; }
.offer p:last-of-type { font-weight: 400; margin-bottom: 0; }
.offer .videoContainer { max-width: 480px; }
.videoContainer .videoInner { height: 0; margin-bottom: 20px; padding-bottom: 56.25%; position: relative; }
.videoContainer .videoInner iframe, .videoContainer .videoInner .wistia_embed { height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }

.fundamentalsSection { padding-left: 25px; padding-right: 25px; }
.fundamentalsSection .bannersrepeater ul { list-style: none; margin-bottom: 85px; margin-left: 0; overflow: auto; padding-left: 25px; padding-right: 25px; }
.fundamentalsSection .bannersrepeater ul:last-child {margin-bottom: 0;}
.fundamentalsSection .bannersrepeater li { float: left; margin-bottom: 0; margin-right: 2%; width: 32%; }
.fundamentalsSection .bannersrepeater li:nth-of-type(3n) { margin-right: 0; }
.fundamentalsSection .bannersrepeater li:nth-of-type(3n+1) { clear: left; }
.fundamentalsSection .bannersrepeater li img { width: 100%; }
.fundamentalsSection .bannersrepeater li div { padding: 30px; }
.fundamentalsSection .bannersrepeater h2, .fundamentalsSection .bannersrepeater p { color: #000; }
.fundamentalsSection .bannersrepeater h2 { font-weight: 400; }
.fundamentalsSection .bannersrepeater p { margin-bottom: 0; }

#home .grid .aboutbox, #home .grid .corporatebox { min-height: 350px; }
#home .grid .aboutbox:before, #home .grid .corporatebox:before { background-color: rgba(0,0,0,0.5); bottom: 0; content: ""; display: block; left: 0; position: absolute; right: 0; top: 0; }
#home .grid .aboutbox h3, #home .grid .corporatebox h3, #home .grid .aboutbox p, #home .grid .corporatebox p { left: 0; position: relative; top: 0; z-index: 2; }
#home .grid .aboutbox p, #home .grid .corporatebox p { color: #fff; }
#home .grid .aboutbox .btn, #home .grid .corporatebox .btn { float: right; left: 0; margin-bottom: 30px; position: relative; top: 0; z-index: 2; }

.grid .box.boxblue { background-color: #000; color: #fff; }
.grid .box.boxblue h3 { color: #fff; font-weight: 400; }
.grid .box.boxblue .hs-form .hs-button { background-color: #0198c3; border-color: #0198c3; }

@media screen and (max-width: 1310px) {
    .hero div { left: 50px; right: 50px; }
    .hero h1 { left: 0; right: 0; }
    .container { margin-left: 0; margin-right: 0; }
    footer .container { padding-left: 20px; padding-right: 20px; }
}

@media screen and (max-width: 1240px) {
    #home .grid .aboutbox, #home .grid .corporatebox { min-height: 400px; }
}

@media screen and (max-width: 940px) {
    header .social { right: 50px; }
    .menu ul li a { padding: 20px 0 6px 0 !important; border: none !important; border-width: 1px !important; }
    .menu ul li.liOn a { border-bottom: 2px solid #fff !important; }
    .menu ul li:last-child a { border: 0 !important; }
    .uspBoxes .col { padding-left: 20px; padding-right: 20px; }
    #home .grid .aboutbox, #home .grid .corporatebox { min-height: 450px; }
}

@media screen and (max-width: 840px) {
    .sticky .social { right: 240px; }
}

@media screen and (max-width: 740px) {
    .sticky .social { right: 50px; }
    .hero div { left: 20px; right: 20px; }
    .introText { margin-top: -120px; padding-left: 20px; padding-right: 20px; }
    .uspBoxes { padding-left: 20px; padding-right: 20px; }
    .uspBoxes .col { display: block; }

    .offer { margin-bottom: 50px; }
    .offer img { min-height: 650px; width: 100%;     object-fit: cover; }
    .fundamentalsSection { padding-left: 20px; padding-right: 20px; }
    #home .fundamentalsSection { padding-left: 25px; padding-right: 25px; }
    .fundamentalsSection .bannersrepeater ul { padding-left: 0; padding-right: 0; }
    .fundamentalsSection .bannersrepeater li { width: 49%; }
    .fundamentalsSection .bannersrepeater li:nth-of-type(3n) { margin-right: 2%; }
    .fundamentalsSection .bannersrepeater li:nth-of-type(3n+1) { clear: none; }
    .fundamentalsSection .bannersrepeater li:nth-of-type(2n) { margin-right: 0; }
    .fundamentalsSection .bannersrepeater li:nth-of-type(2n+1) { clear: left; }

    .introText .cols { margin-bottom: 60px; padding-top: 60px; }
}

@media screen and (max-width: 480px) {
    .fundamentalsSection { padding-left: 10px; padding-right: 10px; }
    #home .fundamentalsSection { padding-left: 20px; padding-right: 20px; }
    .fundamentalsSection .bannersrepeater li { clear: left; margin-right: 0; width: 100%; }
    .fundamentalsSection .bannersrepeater li div { padding: 25px 25px 30px; }
    .offer .videoContainer { max-width: 100%; }

    .introText h1 { font-size: 2.6em;}

    .introText .cols { margin-bottom: 50px; padding-top: 50px; }
}

@media screen and (max-width: 400px) {
    .fundamentalsSection { padding-left: 0; padding-right: 0; }
    .introText h1 { font-size: 2.4em;}
}

@media screen and (max-width: 340px) {
    .introText h1 { font-size: 2.2em;}
}



body:not(#home) h1, body:not(#home) .template { padding-left: 20px; padding-right: 20px; }

#course .panel h2, #course .panel p { color: #000; }
.academics { display: flex; flex-wrap: wrap; }
.academics .col { cursor: pointer; display: flex; flex-direction: column; float: none; margin-bottom: 2%; }
.academics .col .imgContainer { display: block; position: relative; }
.academics .col .imgContainer i { background: #fff; bottom: 0; color: #000; padding: 7px 9px; position: absolute; right: 0; transition: all 0.5s ease-in-out; }
.academics .col:hover .imgContainer i { background: #000; color: #fff; }
.academics .col img { background-color: #000; -webkit-filter: grayscale(100%); filter: grayscale(100%); transition: all 0.5s ease-in-out; width: 100%; }
.academics .col:hover img { filter: none; }
.academics .col div { background-color: #F5F5F5; flex: 1; padding: 30px 40px; transition: all 0.5s ease-in-out; }
.academics .col:hover div { background-color: #0c4964; }
.academics h3 { color: #000; font-size: 1.1em; margin-bottom: 0; transition: all 0.5s ease-in-out; }
.academics h2, #course .academics h2 { color: #0c4964; font-size: 1.2em; font-weight: 400; transition: all 0.5s ease-in-out; }
.academics .col > div > p { transition: all 0.5s ease-in-out; }
.academics .col:hover h3, .academics .col:hover h2, #course .academics .col:hover h2, .academics .col:hover > div > p { color: #fff; }
.academics .popup { background-color: rgba(0,0,0,0.75); bottom: 0; display: none;  left: 0; position: fixed; right: 0; top: 0; z-index: 99999; }
.academics .popup.active { display: block; }
.academics .popup p { background-color: #fff; color: #000; font-size: 1.1em; left: 50%; max-width: 500px; padding: 50px; position: absolute; top: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; }
.academics .popup p:after { background: #0198c3 url(/_img/icons/cross.svg) no-repeat center/30px 30px; content: ''; display: block; height: 40px; position: absolute; right: 0; top: 0; width: 40px; }
#course .offer { margin-bottom: 30px; }
.interestedBox { background-color: #D1594B; margin-bottom: 30px; padding: 65px; text-align: center; }
.interestedBox div { margin-left: auto; margin-right: auto; max-width: 640px; }
.interestedBox h2, .interestedBox p, #course .interestedBox h2, #course .interestedBox p { color: #fff; font-weight: 300; }
.interestedBox h2, #course .interestedBox h2 { font-size: 2.5em; line-height: 1.2em; }
.interestedBox p:last-of-type { margin-bottom: 0; }
.interestedBox .btn { background-color: #005c85; border-color: #005c85; }
#course .quote { margin-bottom: 30px; }
.lslide blockquote, #course .lslide blockquote { padding-left: 40px; padding-right: 40px; }
.quote .lSAction .lSPrev, .quote .lSAction .lSNext, #course .quote .lSAction .lSPrev, #course .quote .lSAction .lSNext { width: 20px; }
.quote .lSAction .lSPrev, #course .quote .lSAction .lSPrev { left: 10px; }
.quote .lSAction .lSNext, #course .quote .lSAction .lSNext { right: 10px; }
.quote .lSAction i, #course .quote .lSAction i { color: #fff; font-size: 1.75em; }

@media screen and (max-width: 1240px) {
    .colsThird.academics .col { width: 49%; }
    .colsThird.academics .endCol { margin-right: 2%; }
    .colsThird.academics .col:nth-of-type(2n) { margin-right: 0; }
}

@media screen and (max-width: 740px) {
    .interestedBox { padding: 25px; }
    .cols.academics .col, .cols.academics .endCol { margin-right: 0; max-width: 400px; width: 100%; }
}

@media screen and (max-width: 480px) {
    .interestedBox h2, 
    #course .interestedBox h2 { font-size: 2.2em; }
    
    }

@media screen and (max-width: 400px) {
.interestedBox h2, 
#course .interestedBox h2 { font-size: 2em; }

}