/* ==========================================================================
Import
========================================================================== */

/* ==========================================================================
Typography
========================================================================== */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&display=swap" rel="stylesheet">
.open-sans { font-family: 'Open Sans', sans-serif !important; }

/* ==========================================================================
Base
========================================================================== */

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {font-size: 1em}
body {
	font-family: 'Open Sans',sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 17px;
	background-color: #fff;
	color: #333;
	margin-top: 70px;
}
@media screen and (max-width:990px) {
	body { margin-top: 40px; }
}

h1 { font-size: 30px !important; font-weight: normal; }
h2 { font-size: 28px !important; font-weight: bold; }
h3 { font-size: 26px !important; font-weight: bold; }
h4 { font-size: 24px !important; font-weight: bold; }
h5 { font-size: 20px !important; font-weight: bold; }
a:hover { text-decoration: none; }

.text-caps {text-transform: uppercase}
.text-justify {text-align: justify}
.text-left {text-align:left;}
.text-right {text-align:right;}
.text-italic {font-style:italic;}
.text-white {color:white;}
.text-black {color:black !important;}
.text-red {color: #F00;}
.text-cyan { color: #029edc !important; }
.text-pink { color: #EC0096 !important; font-weight: bold; }
.text-blue { color: #240F6E !important; }
.text-orange { color: #00A4d9 !important; }
.text-lightblue { color: #00A4d9 !important; }
.error {color: #F00;}
.weight-bold, .text-bold {font-weight: 700}

.text-lg {font-size: 2.074em}
.text-md {font-size: 1.44em}
.text-sm {font-size: 0.833em}
.text-xs {font-size: 0.7em}

.no-wrap { white-space:nowrap; }
.display-none { display: none; }

.well-lightgrey { background-color: #e1e1e1; padding: 20px; }

/* ==========================================================================
Helper Classes
========================================================================== */
.img-responsive { max-width:100%; }
.img-center { display:block; margin-left:auto; margin-right:auto; }
.img-fill { width: 100%; height: 100%; object-fit: cover; }

/*.list-no-indent { list-style-position: inside; padding-left:0; } */
.list-no-indent { padding-left: 18px; list-style-position: outside; }

.clear-both{clear: both;}
.overflow-scroll{overflow:scroll;}
.display-none{display: none;}
.cursor-pointer{cursor: pointer;}
.relative { position: relative; }

/* ==========================================================================
Bootstrap Overides
========================================================================== */
.btn { border-radius: 0; }
.card { border-radius: 0; }
.well { border-radius: 0; }

.btn-primary { background-color: #399fd9; border: 1px solid #399fd9; }
.btn-primary:hover { background-color: #EC0096;  border: 1px solid #EC0096; color: white !important; }

.btn-pink { background-color: #EC0096; border: 1px solid #EC0096; color: #FFF; }

.btn-enquire { background-color: #C1D82F; color:#240F6E !important; }
.btn-enquire a { background-color: #C1D82F;  color:#240F6E !important; font-weight: bold; }
.btn-enquire a:hover { background-color: #C1D82F; color: white !important; }

.btn-webinar { background-color: #FFC82E; color: #240F6E !important; }
.btn-webinar:hover { background-color: #00A4d9 !important; color: #240F6E !important; }

.btn-online { background-color: #00A4d9; color: #FFF !important; }
.btn-online:hover { background-color: #007DB3; color: #FFF !important; }

.btn-blue { color: white !important; background-color: #273578; font-weight: bold; }
.btn-lightblue { color: white !important; background-color: #00A4d9; font-weight: bold; }

.btn-orange { color: #240F6E; background-color: #fff; font-weight: bold; border: 1px solid #240F6E; padding: 15px 20px; text-transform: uppercase; font-size: 18px !important; }
.btn-orange:hover { background-color: #C1D82F; !important; }

.btn-outline { color: #240F6E; background-color: #fff; font-weight: bold; border: 1px solid #240F6E; padding: 10px 20px; text-transform: uppercase; font-size: 14px !important; }
.btn-outline:hover { background-color: #C1D82F; !important; }

/* ==========================================================================
Programme Level Colours
========================================================================== */
.diploma { color: #4E9D2D; }
.postgraduate { color: #E62899; }
/*.bachelor { color: #B6340D; }*/
.bachelor { color: #d98d30; }
/*.skills { color: #240F6E; }*/
.skills { color: #5ca3d6; }
.webinars { color: #E62899; }

/* ==========================================================================
Notification Bar
========================================================================== */
.container-first {
	position: relative; 
	margin-top: 56px;
	padding-top: 30px;
}

/* ==========================================================================
Notification Bar
========================================================================== */
.notification-bar {
	position: fixed;
	width: 100%;
	top: 0px;
	background-color: #313131;
	color: #fefefe;
	text-align: center;
	z-index: 3000;
	padding-top: 15px;
}

/* ==========================================================================
Navigation Bar
========================================================================== */
.navbar {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 70px;
	color: white;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column;
	flex-flow: column;
	z-index: 9001;
	padding: 0 0 0 0px;
	/*align-items: center;*/
	background-color: #eee !important;
}

.nav-item {
	padding: 5px 5px;
	height: 65px;
}

.nav-item a {
	color: #000;
}
.nav-item a:focus, .nav-item a:hover {
	color: #029edc !important;
}
.nav-link {
	line-height: 1.2;
	font-size: 12px;
}

.navbar-collapse {
	width: 100%;
	padding-left: 100px;
	height: 2000px;
}

.navbar-expand-lg .navbar-nav .nav-link {
	outline: none;
	padding-top:  8px !important;
	padding-bottom: 0 !important;
	padding-left:  0px !important;
	padding-right: 8px !important;
}

.navbar-brand { padding: 0 !important; }

.dropdown-menu {
	margin: 0;
	z-index: 9001;
	opacity: 1;
	border-radius: 0px;
	border: none;
 	background: #B4B4B4 !important;
}

.dropdown-item {
	color: #444 !important;
	font-weight: normal !important;
	font-size: 13px;
}
.dropdown-item:focus, .dropdown-item:hover {
	color: #029edc !important;
	background-color: #ddd !important;
}

.dropdown:hover .dropdown-menu {
   display: block;
}
.dropdown-toggle::after {
    color: #029edc;
}

.navbar-expand-lg .navbar-nav .nav-link {
	outline: none;
}

.navbar-brand {
	position: absolute;
	left: 0px;
	font-size: 15px;
}

.close-link { 
	display: none;
}

#applynow, #registernow, #attend {
	padding-top: 20px;
}

#applynow:hover {
	background-color: #EC0096 !important;
}
#applynow a:hover {
	color: #fff !important;
}
#logo-kaplan {
	height: 70px;
}

.clearHeader {
	/*background: rgba(221, 221, 221, 0) !important;*/
	/*background-color: #273578 !important;*/
}    
.clearHeader .navbar-collapse .dropdown-menu {
 	background: rgba(221, 221, 221, 1) !important;
}
.clearHeader .nav-item a {
	color: #273578 !important;
}
.clearHeader .nav-item a:focus, .clearHeader .nav-item a:hover {
	color: #00A4d9 !important;
}
.clearHeader .dropdown-menu .dropdown-item {
	color: #444 !important;
}
.clearHeader .dropdown-item:focus, .clearHeader .dropdown-item:hover {
	color: #00A4d9 !important;
}

@media screen and (max-width:1320px) {
	.nav-item { font-size: 10px; }
	.nav-link { font-size: 10px; }
	.nav-item {
		padding: 0px 5px !important;
	}
	#applynow, #registernow {
		width: 90px;
		padding-top: 10px !important;
	}
}
@media screen and (max-width:1130px) {
	.nav-item {
		padding: 0px 2px !important;
	}
}
@media screen and (max-width:1060px) {
	.nav-item {
		padding: 0px 0px !important;
	}
}
@media screen and (max-width:990px) {
	.nav-item { font-size: 10px; }
	.nav-link { font-size: 10px; }
	.nav-item {
		padding: 0px 0px !important;
	}
}
@media screen and (max-width:990px) {
	.navbar {
		align-items: flex-end;
		opacity: 1 !important;
		height: 40px;
	}
	.navbar-nav {
		width: 100% !important;
	}
	.nav-item {
		padding: 0px 2px;
		font-size: 15px;
		width:100%;
		border-bottom: 1px solid #eee;
		text-align: center;
		height: auto;
	}
	.nav-link { line-height: 2; }
	.navbar-collapse {
		position: absolute;
		top: 40px;
		background-color: #e1e1e1;
		color:#000;
		padding-left: 0px !important;
	}
	.dropdown-menu {
		background-color: #fff;
		font-size: 14px;
		margin-top: 10px;
	}
	.dropdown-item {
		text-align: center;
	}
	.dropdown-divider { 
		display: none;
	}
	.dropdown:hover .dropdown-toggle {
		color: #029edc !important;
	}
	.dropdown-item:focus, .dropdown-item:hover {
		background-color: #fff !important;
	}
	.clearHeader .nav-item a {
		color: #000 !important;
	}
	.clearHeader .navbar-collapse .dropdown-menu {
		background: rgba(255, 255, 255, 1) !important;
	}
	#applynow {
		float: none !important;
		height: 50px;
		padding-top: 5px;
		font-weight: bold;
		border: none;
	}
	#applynow a {
		color: #fff !important;
	}
	#logo-kaplan {
		height: 40px;
	}
	.close-link { display: block; }
}
/* ==========================================================================
Home Page Header Video
========================================================================== */
header.video {
  position: absolute;
  top: 50px;
  left: 0;
  background-color: black;
  height: 120px;
  min-height: 500px;
  width: 100%;
  overflow: hidden;
  z-index: 0;
}

header.video video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header.video .container {
  position: relative;
  z-index: 2;
}

header.video .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.3;
  z-index: 9999;
}

.video h2 { font-size: 34px !important; }
.video h3 { font-size: 25px !important; }

@media screen and (max-width:800px) {
	.video h2 { font-size: 32px !important; }
	.video h3 { font-size: 18px !important; }
}
@media screen and (max-width:600px) {
	.video h2 { font-size: 28px !important; }
	.video h3 { font-size: 18px !important; }
}

/* ==========================================================================
Footer
========================================================================== */
.footerinfo {
	font-size: 18px;
}
@media screen and (max-width:990px) {
	#footer {
		margin-bottom: 52px;
	}
	.footerinfo {
		font-size: 18px;
	}
}
@media screen and (max-width:600px) {
	.footerinfo {
		font-size: 18px;
	}
}

/* ==========================================================================
Custom Card Styling
========================================================================== */
.card1 {
	background-color: #399fd9;
	color: #fff;
}
.card2 {
	background-color: #EE3967;
	color: #fff;
}
.card3 {    
	background-color: #EC0096;
	color: #fff;
}
.card4 {
	background-color: #225F82;
	color: #fff;
}
.card1:hover, .card2:hover, .card3:hover, .card4:hover {
	background-color: #fff !important;
	color: #333 !important;
}
.card1 .card-title, .card2 .card-title, .card3 .card-title, .card4 .card-title {
	font-size: 24px;
	font-weight: bold;
}

/* ==========================================================================
Footer Partner Icon Bar
========================================================================== */
.partners {
	margin-bottom: 30px;
}
.partners img {
	display: block; 
	margin-left: auto; 
	margin-right: auto;
}
.partner2 {
	border-right: 1px solid #ccc;
}
@media screen and (max-width:600px) {
	.partners img {
		margin-bottom: 20px;
	}
	.partner2 {
		border-right: none;
	}
}

/* ==========================================================================
Webinars
========================================================================== */
.webinar-day   { font-size: 70px; font-weight: bold; line-height: 1; color: #007DB3; }
.webinar-date1 { font-size: 16px; font-weight: bold; line-height: 1.1; }
.webinar-date2 { font-size: 15px; line-height: 1.1; }
@media screen and (max-width:768px) {
	.webinar-day   { font-size: 40px; }
}

/* ==========================================================================
Modals
========================================================================== */
.modal {
	z-index: 9001;
}

/* ==========================================================================
Anchors
========================================================================== */
/*:target {
padding-top: 104px;
margin-top: -104px;
display: inline-block;}*/

/* ==========================================================================
Instructors Carousel
========================================================================== */
#carouselInstructors a { color:red !important; }
#carouselInstructors .carousel-indicators { bottom:-80px; z-index:10; }
#carouselInstructors .carousel-indicators li { background-color: #999; width:60px; opacity: 0.7; }
#carouselInstructors .carousel-indicators .active { background-color: #00A4d9 !important;  opacity: 1; }
#carouselInstructors .carousel-inner { min-height: 350px;}

/* ==========================================================================
Testimonials
========================================================================== */
.alumni-image { border-radius: 90px; border: 1px solid #ccc; height: 80px; }
.alumni-name { font-size:24px; font-weight: bold; }
.company-logo { max-height: 60px;}
.job-title { font-size: 18px; }
.testimonial { background-color: #fff; padding: 10px 20px;}

/* ==========================================================================
Projects
========================================================================== */
.project { background-color: #fff; }
.project-title { font-size: 20px; text-transform: uppercase; line-height: 1.2 }
.project-name { font-size: 16px; border-bottom: 1px solid #ccc;  padding-bottom: 15px; margin-bottom: 15px;}
.project-desc {} 

/* ==========================================================================
FAQs
========================================================================== */
.faq-questions {
	list-style-position: inside;
	list-style-type: none;
	padding-left: 0;
	margin-bottom: 40px;
}
.faq-questions li {
	margin-bottom: 5px;
}
.faq-questions a {
	color: #222;
}
.faq-questions a:hover {
	color: #428bca;
}

/* ==========================================================================
PopUp
========================================================================== */
#popup1 {
	position: fixed;
	bottom: 0;
	right: 0;
 	z-index:9999; 
 	width: 140px; 
 	height: 60px;
 	padding: 0;
 	border: 1px solid #ccc;
}
#popup1 a { 
	font-size: 13px;
	color: #000; 
	text-decoration: none;
	line-height: 1.1;
}
#popup1 a:hover { 
	color: #666;
}

/* ==========================================================================
Image Zoom on Hover
========================================================================== */
.zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* ==========================================================================
Bottom Navbar (Mobile)
========================================================================== */
.navbar--footer {
	position: fixed;
	bottom: 0;
	top: unset;
	height: unset;
	background-color: #bbb !important;
	width: 100%;
}
.navbar--footer li, .navbar--footer li a { font-size: 12px; }

/* ==========================================================================
Why Kaplan Carousel
========================================================================== */
#whyKaplanCarousel .carousel-indicators { bottom: -30px; } 
#whyKaplanCarousel .carousel-indicators li { background-color: #273578; } 

/* ==========================================================================
EduLoan Carousel
========================================================================== */
#carouselEduLoan .carousel-indicators { bottom: -30px; } 
#carouselEduLoan .carousel-indicators li { background-color: #273578; } 

/* ==========================================================================
Scroll Back to Top
========================================================================== */
.cd-top {
	display: inline-block;
	height: 40px; width: 40px;
	position: fixed;right: 10px; bottom: 65px; z-index: 100;
	box-shadow: 0 0 10px rgba(0,0,0,0.05);
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: rgba(41, 38, 112, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
	border-radius: 50px;
	-webkit-transition: opacity .3s 0s,visibility 0 .3s;
	-moz-transition: opacity .3s 0s,visibility 0 .3s;
	transition: opacity .3s 0s,visibility 0 .3s;
}

.cd-top.cd-is-visible,.cd-top.cd-fade-out,.no-touch .cd-top:hover {
	-webkit-transition: opacity .3s 0s,visibility 0 0;
	-moz-transition: opacity .3s 0s,visibility 0 0;
	transition: opacity .3s 0s,visibility 0 0;
}

.cd-top.cd-is-visible {visibility: visible;opacity: 1}
.cd-top.cd-fade-out {opacity: .5}
.cd-top:hover {background-color: #292670;opacity: 1}
@media only screen and (min-width: 768px) {
	.cd-top {right: 10px ;bottom: 20px}
}

.carousel-control-prev-icon {
 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23273578' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23273578' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

/* ==========================================================================
Why Kaplan Tabs
========================================================================== */
#v-tabs-tab li { width: 49%; margin-right: 1%; }
#v-tabs-tab a { min-height: 70px; font-size: 16px; padding: 15px 10px; }
.nav-tabs li a {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media only screen and (max-width: 1200px) { 
}
@media screen and (max-width: 992px) {
	#v-tabs-tab a { min-height: 85px; line-height: 1.2;
}
@media screen and (max-width: 768px) {
/*	#v-tabs-tab li { width: 22%; }
*/	#v-tabs-tab a { min-height: 90px; font-size: 14px; padding-left: 8px; padding-right: 8px; line-height: 1.2; }
}
@media screen and (max-width: 500px) {
/*	#v-tabs-tab li { width: 21%; }
*/	#v-tabs-tab a { min-height: 90px; font-size: 12px; padding-left: 3px; padding-right: 3px; line-height: 1.2; }
}