/*  Author @ Rudy */
/*  ==========================================================================
    Koppen en titels: Noto Sans HK
    Lopende teksten: Noto Sans HK
    Iconen: Font Awesome 5 Pro

    Kleuren:
    Blauw: 0090df
	Rood: d9000d
	Geel: ffe800


/*  ==========================================================================
	body
	========================================================================== */

	html,
	body {
		color: #000;
		font-size: 14px;
		line-height: 1.42857;
		font-weight: 300;
    	font-family: 'Noto Sans HK', sans-serif;
	}


/*  ==========================================================================
    base
	========================================================================== */

/*  headings & paragraph
    ========================================================================== */
	h1, h2, h3, h4, h5, h6 {
		color: #000;
		font-weight: 700;
	}
	h1 {
		margin-bottom: 20px;
		color: #0090df;
		font-size: 24px;
		font-weight: 100;
	}
	h2 {
		font-size: 16px;
		font-weight: 300;
	}
	h3 { font-size: 16px;}
	h4 { font-size: 14px;}
	strong { font-weight: 700;}

/*  links
	========================================================================== */
	a {	color: #0090df;}
	a:hover,
	a:focus {
		outline: none;
		color: #d9000d;
		text-decoration: none;
	}

/*  lists
    ========================================================================== */
	ol {
		margin: 1em 0;
		padding: 0;
		list-style: none;
	}
	ol li {
		margin: 5px 0;
		padding-left: 20px;
	}
	ol li::before {
		content: "\f111";
		font-family: "Font Awesome 5 Pro";
		float: left;
		margin: 4px 0 0 -20px;
		color: #0090df;
		font-size: 10px;
		font-weight: 400;
	}

/* 	gallery
	========================================================================== */
	.gallery .image {
		position: relative;
		display: block;
		margin-bottom: 30px;
	}
	.gallery .image:hover { opacity: 0.8;}
	.gallery .image .caption {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;  
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
		text-align: center;  
		display: flex;
		justify-content: center;
		align-items: center;
    }


/*  ==========================================================================
    container
    ========================================================================== */

	.container {
		position: relative;
		max-width: 1170px;
	}


/*  ==========================================================================
    header
    ========================================================================== */

	.header {
		position: relative;
		min-height: 70px;
		background-color: #fff;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
	}
	.header .container-fluid { padding: 0;}

	/* logo */
	.header .logo {
		display: block;
		max-width: 285px;
		margin: 15px 0 0 15px;
		transition: none;
	}

	/* quick-connect */
	.header .quick-connect {
		position: absolute;
		top: 20px;
		right: 30px;
	}
	.header .quick-connect .phonenumber { font-size: 18px;}
	.header .quick-connect .social {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.header .quick-connect .social li {
		margin-left: 25px;
		font-size: 18px;
	}


/*  ==========================================================================
    menu
    ========================================================================== */

	@media (max-width: 1199px) {
		.nav-collapse { display: none;} 
	}

	.nav-collapse { margin-right: auto;}
	.nav-collapse .menu {
		margin: 4px 0 0 0;
		padding: 0;
		list-style: none;
	}
	.nav-collapse .menu > li {
		font-size: 13px;
		font-weight: 700;
		line-height: 25px;
	}
	.nav-collapse .menu > li + li {
		margin-left: 15px;
		padding-left: 15px;
		border-left: 1px solid #0090df;
	}
	.nav-collapse .menu > li > a {
		display: block;
		color: #000;
		border-bottom: 2px solid transparent;
		text-decoration: none;
	}
	.nav-collapse .menu > li > a:hover,
	.nav-collapse .menu > li.active > a {
		color: #0090df;
		border-color: #0090df;		
	}

	.nav-collapse .menu > li.sub .arrow { display: none;}

/*  menu > ul
    ========================================================================== */
	.nav-collapse .menu li.sub > ul {
		display: none;
		z-index: 200;
		position: absolute;
		top: 100%;
		left: 45px;
		margin: 25px 0 0 0;
		padding: 0;
		list-style: none;
	}
	.nav-collapse:not(.collapse) .menu > li.sub.active > ul { display: flex;}
	.nav-collapse .menu > li.sub > ul > li {
		position: relative;
		font-size: 14px;
		font-weight: 400;
		white-space: nowrap;
	}
	.nav-collapse .menu > li.sub > ul > li + li {
		margin-left: 10px;
		padding-left: 10px;
		border-left: 1px solid #fff;
	}
	.nav-collapse .menu > li.sub > ul > li > a {
		display: block;
		color: #fff;
	}
	.nav-collapse .menu > li.sub > ul > li > a:hover,
	.nav-collapse .menu > li.sub > ul > li.active > a { text-decoration: underline;}

	/* menu > ul > ul */
	.nav-collapse:not(.collapse) .menu > li.sub > ul > li ul {
		display: none;
		z-index: 200;
		position: absolute;
		min-width: 100%;
		left: auto;
		margin: 0;
		padding: 5px 0;
		list-style: none;
		border-radius: 4px;
		background-color: #0090df;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
	}
	.nav-collapse:not(.collapse) .menu > li > ul > li.sub:hover > ul { display: block;}
	.nav-collapse:not(.collapse) .menu > li.sub > ul > li > ul li {
		font-size: 12px;
		line-height: 1.42857;
		white-space: nowrap;
	}
	.nav-collapse:not(.collapse) .menu > li.sub > ul > li > ul li a {
		display: block;
		padding: 5px 10px;
		color: #fff;
	}
	.nav-collapse:not(.collapse) .menu > li.sub > ul > li > ul li > a:hover,
	.nav-collapse:not(.collapse) .menu > li.sub > ul > li > ul li.active > a { color: #000;}

	/* menu > ul > ul > ul */
	.nav-collapse:not(.collapse) .menu > li.sub > ul > li > ul > li > ul {
		top: 0;
		left: 100%;
		border-left: 1px solid #fff;
		overflow: hidden;
	}
	.nav-collapse:not(.collapse) .menu > li.sub > ul > li > ul > li:hover > ul { display: block;}

/*  menu - collapsed
    ========================================================================== */
	.nav-collapse.collapse {
		display: none;
		width: 100%;
		background-color: #0090df;
		box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.15);
	}
	.nav-collapse.collapse .menu { margin: 15px 10px;}
	.nav-collapse.collapse .menu li {
		position: relative;
		width: 100%;
		margin: 0;
		font-size: 16px;
		line-height: 40px;
	}
	.nav-collapse.collapse .menu > li + li {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
	.nav-collapse.collapse .menu li > a {
		border-bottom: none;
		padding: 0 0 0 30px;
		color: #fff;
	}
	.nav-collapse.collapse .menu li > a:hover,
	.nav-collapse.collapse .menu li.active > a { color: #ffe800;}

	.nav-collapse.collapse .menu li.sub .arrow { 
		position: absolute;
		top: 0;
		left: 0;
		z-index: 25;
		display: block;
		min-width: 30px;
		color: rgba(255, 255, 255, 0.6);
		text-align: center;
		transition: 0.3s;
		cursor: pointer;
	}
	.nav-collapse.collapse .menu li.sub .arrow:hover { color: #ffe800;}

/*  menu > ul - collapsed
    ========================================================================== */
	.nav-collapse.collapse .menu li.sub > ul {
		position: static;
		margin: 0;
		padding: 0 0 0 22px;
		list-style: none;
	}
	.nav-collapse.collapse .menu li.sub:hover > ul { display: none;}
	.nav-collapse.collapse .menu li.sub > ul > li {
		font-size: 14px;
		font-weight: 300;
		line-height: 30px;
	}
	.nav-collapse.collapse .menu li.sub > ul > li + li {
		margin-left: 0;
		padding-left: 0;
		border-left: 0;
	}
	.nav-collapse.collapse .menu li.sub > ul > li > a {
		padding: 0 0 0 30px;
		color: #fff;
	}
	.nav-collapse.collapse .menu li.sub > ul > li > a:hover,
	.nav-collapse.collapse .menu li.sub > ul > li.active > a { color: #ffe800;}

/*  nav-toggle
    ========================================================================== */
	.nav-toggle:not([href]):not([tabindex]) {
		display: none;
		margin: 0 auto 0 15px;
		color: #000;
		border-bottom: 2px solid #0090df;
		font-size: 14px;
		font-weight: 700;
		line-height: 40px;
		text-transform: uppercase;
		cursor: pointer;
	}
	.nav-toggle:not([href]):not([tabindex]):hover { color: #0090df;}

/*  social
    ========================================================================== */
	.nav-collapse .social {
		border-top: 1px solid #fff;
		margin: 15px 0 0 0;
		padding: 15px 0;
		list-style: none;
		text-align: center;
	}
	.nav-collapse .social li {
		margin: 0 15px;
		font-size: 10px;
	}
	.nav-collapse .social li i {
		display: block;
		margin-bottom: 5px;
		font-size: 20px;
	}
	.nav-collapse .social li a { color: #fff;}
	.nav-collapse .social li a:hover { color: #ffe800;}


/*  ==========================================================================
    eyecatcher
    ========================================================================== */

	.eyecatcher {
		position: relative;
		background: url('../images/loader.gif') no-repeat center center #e5e5e5;
	}

	/* owl-carousel */
	.eyecatcher .owl-carousel .item {
		background-position: bottom center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.eyecatcher,
	.eyecatcher .owl-carousel .item {
		height: 40vh;
		min-height: 150px;
		max-height: 400px;
	}
	.home .eyecatcher,
	.home .eyecatcher .owl-carousel .item {
		height: 75vh;
		min-height: 400px;
		max-height: none;
	}

	/* nav */
	.eyecatcher .nav {
		z-index: 100;
		position: absolute;
		top: 30px;
		left: 30px;
	}

	/* cta-go */
	.eyecatcher .cta-go {
		z-index: 100;
		display: flex;
		position: absolute;
		top: 30px;
		right: 30px;
		color: #ffe800;
		font-weight: 400;
		line-height: 28px;
	}
	.eyecatcher .cta-go i { 
		margin-left: 10px;
		font-size: 28px;
	}
	.eyecatcher .cta-go:hover { margin-right: -3px;} 

	/* tagline */
	.eyecatcher .tagline {
		z-index: 100;
		position: absolute;
		left: 5vw;
		right: 15px;
		bottom: 20px;
		color: #fff;
		line-height: 1.4;
		font-weight: 900;
	}
	.eyecatcher .tagline .title { font-size: 24px;}
	.eyecatcher .tagline .subtitle { font-size: 18px;}
	.eyecatcher .tagline .logo {
		max-width: 600px;
		margin-top: 20px;
	}


/*  ==========================================================================
	home-blocks
	========================================================================== */

	.home-blocks .item .holder {
		position: relative;
		display: block;
		height: 100%;
		padding: 15px 25px;
		color: #fff;
		border-top: 1px solid #fff;
	}
	.home-blocks .item:nth-child(1) .holder { background-color: #0090df;}
	.home-blocks .item:nth-child(2) .holder { background-color: #d9000d;}
	.home-blocks .item:nth-child(3) .holder { background-color: #ffe800;}
	.home-blocks .item .holder::before {
		content: ""; 
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 0;
		background: linear-gradient(45deg, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 0); 
		transition: 0.5s;
	}
	.home-blocks .item .holder:hover::before { width: 100%;}

	/* image */
	.home-blocks .item .image {
		position: relative;
		width: 75px;
		margin: auto 0 15px 0;
	}

	/* caption */
	.home-blocks .item .caption {
		position: relative;
		margin-bottom: auto;
	}
	.home-blocks .item .caption .title { color: #fff;}


/*  ==========================================================================
    usps
    ========================================================================== */

	.usps ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 30px 0 0 0;
		padding: 0;
		list-style: none;
		text-align: center;
	}
	.usps ul li {
		margin: 0 20px 10px 20px;
		color: #0090df;
		font-weight: 700;
	}
	.usps ul li::before {
		content: "\f058";
		font-family: "Font Awesome 5 Pro";
		margin-right: 15px;
		color: #d9000d;
		font-size: 18px;
		font-weight: 400;
	}


/*  ==========================================================================
    intro
    ========================================================================== */

	.intro {
		margin: 8vh 0;
		font-size: 16px;
		text-align: center;
	}
	.intro ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 20px 10% 0 10%;
		padding: 0;
		list-style: none;
	}
	.intro ul li { margin: 10px;}


/*  ==========================================================================
    content
    ========================================================================== */

	.content { margin: 8vh 0;}


/*  ==========================================================================
    submenu
    ========================================================================== */

	.submenu {
		padding: 15px 0;
		border-top: 1px solid #fff;
		background-color: #0090df;
	}

	/* go-back */
	.submenu .go-back {
		margin-right: 15px;
		color: #fff;
		font-size: 18px;
	}
	.submenu .go-back:hover { color: #ffe800;}

	/* ul */
	.submenu ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.submenu ul > li {
		margin: 5px 0;
		font-size: 14px;
		line-height: 15px;
	}
	.submenu ul > li {
		margin-right: 10px;
		padding-right: 10px;
		border-right: 1px solid #fff;
	}
	.submenu ul > li:last-of-type {
		margin-right: 0;
		padding-right: 0;
		border-right: 0;
	}
	.submenu ul > li > a {
		display: block;
		color: #fff;
	}
	.submenu ul > li.active > a,
	.submenu ul > li > a:hover { text-decoration: underline;}


/*  ==========================================================================
    lesson-packages
    ========================================================================== */

	.lesson-packages {
		margin: 8vh 0;
		padding-bottom: 10px;
		overflow: hidden;
	}
	.lesson-packages .owl-stage { display: flex;}
	.lesson-packages .owl-stage-outer { overflow: visible !important;}

/*  item
    ========================================================================== */
	.lesson-packages .item {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: 30px;
		border: 1px solid #cddfe8;
		background-color: #fff;
		box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
		font-size: 16px;
		text-align: center;
		transition: border 0.5s;
	}
	.lesson-packages .item:hover { border-color: #0090df;}
	.lesson-packages .item.first { background-color: #ffe800;}

	/* title */
	.lesson-packages .item .title {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 80px;
		margin-bottom: 20px;
		padding-bottom: 20px;
		border-bottom: 2px solid #0090df;
		font-size: 22px;
		font-weight: 900;
		text-transform: uppercase;
	}
	.lesson-packages .item.first .title { border-color: #fff;}

	/* description */
	.lesson-packages .item .description {
		margin-bottom: 30px;
		line-height: 1.6;
	}
	.lesson-packages .item .description ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* go */
	.lesson-packages .item .go { margin-top: auto;}


/*  ==========================================================================
    tiles
    ========================================================================== */

	.tiles { margin-top: 30px;}
	.tiles .item { margin-bottom: 30px;}
	.tiles .item .holder { height: 100%;}

	/* image */
	.tiles .item .image {
		display: block;
		background-color: rgba(0, 144, 223, 0.1);
		overflow: hidden;	
	}
	.tiles .item .image img { transition: opacity 0.5s;}
	.tiles .item .image[href]:hover img { opacity: 0.8;}

	/* caption */
	.tiles .item .caption { margin-top: 15px;}
	.tiles .item .caption .title { color: #0090df;}
	.tiles .item .caption .date {
		margin-bottom: 5px;
		font-weight: 400;
	}
	.tiles .item .caption .description { margin-bottom: 15px;}
	.tiles .item .caption .description p { margin-bottom: 0;}
	.tiles .item .caption .button { margin-top: auto;}

	/* overview */
	.tiles .overview { margin-top: 6vh;}


/*  ==========================================================================
    page-ending
    ========================================================================== */

	.page-ending {
		margin-top: 140px;
		background-color: #464343;
	}

	/* visual */
	.page-ending .visual {
		display: block;
		margin: -70px auto 0 auto;
	}

	/* visual */
	.page-ending .widget {
		margin: 7vh 0;
		text-align: center;
	}
	.page-ending .widget h2 {
		margin-bottom: 20px;
		color: #fff;
		font-weight: 100;
	}


/*  ==========================================================================
    latest-news
    ========================================================================== */

	.latest-news { padding: 8vh 0 5vh 0;}
	.latest-news .item { margin-bottom: 30px;}
	.latest-news .item .title { line-height: 1.5;}
	.latest-news .item .title a { color: #d9000d;}
	.latest-news .item .title a:hover { color: #0090df;}
	.latest-news .item .title a i {
		margin-left: 5px;
		font-size: 22px;
	}
	.latest-news .item .description { line-height: 1.6;}


/*  ==========================================================================
    footer
    ========================================================================== */
	
	.footer {
		position: relative;
		padding: 40px 0 15vh 0;
		background: url('../media/footer-bg.jpg') no-repeat bottom center #000;
		background-size: cover;
		color: #fff;
		text-align: center;
	}
	.footer a { color: #fff;}
	.footer a:hover { color: #ffe800;}
	.footer a[href^="tel:"] { font-size: 18px;}

	/* social */
	.footer .social {
		margin: 30px 0 0 0;
		padding: 0;
		list-style: none;
	}
	.footer .social li {
		margin: 0 15px;
		font-size: 30px;
	}
	.footer .social li a { color: #fff;}
	.footer .social li a:hover { color: #ffda41;}


/*  ==========================================================================
    buttons
    ========================================================================== */

	.btn {
		position: relative;
		min-width: 100px;
		padding: 8px 20px;
		border: none;
		border-bottom: 2px solid #7f7f7f;
		border-radius: 0;
		background-color: #000;
		color: #fff;
		font-size: 14px;
		font-weight: 400;
		line-height: 20px;
		text-decoration: none !important;
	}
	.btn:hover,
	.btn:focus {
		border-color: #7fc7ef;
		background-color: #0090df;
		color: #fff;
	}

	/* effect 
	.btn::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -2px;
		width: 0;
		background: #000;
		height: 2px;
		transition: 0.5s;
	}
	.btn:hover::after,
	.btn:focus::after { width: 100%;}*/

	/* btn-blue */
	.btn-blue {
		border-color: #7fc7ef;
		background-color: #0090df;
		color: #fff;
	}
	.btn-blue:hover,
	.btn-blue:focus {
		border-color: #7f7f7f;
		background-color: #000;
		color: #fff;
	}

	/* btn-white */
	.btn-white {
		border-color: #7fc7ef;
		background-color: #fff;
		color: #0090df;
	}
	.btn-white:hover,
	.btn-white:focus {
		border-color: #7f7f7f;
		background-color: #000;
		color: #fff;
	}

	/* btn-small */
	.btn.btn-small { min-width: auto;}


/* 	==========================================================================
   	tinymce
	========================================================================== */

	.tinymce {
		margin: 5px;
		padding: 0;
	}


/*  ==========================================================================
    scroll-up
    ========================================================================== */

	.scroll-up,
	.scroll-up:not([href]):not([tabindex]) {
		z-index: 998;
		position: fixed;
		bottom: -65px;
		right: 25px;
		width: 40px;
		border: 1px solid #0090df;
		background-color: #0090df;
		box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.1);
		color: #fff;
		font-size: 18px;
		line-height: 38px;
		text-align: center;
		transition: 0.5s;
		cursor: pointer;
	}
	.scroll-up:not([href]):not([tabindex]):focus,
	.scroll-up:not([href]):not([tabindex]):hover {
		background-color: #fff;
		color: #0090df;
	}


/*  ==========================================================================
    misc
	========================================================================== */


/*  ==========================================================================
    forms
    ========================================================================== */

	.has-error .form-control { border-color: #dc3545;}
	.has-error .form-control:focus {
		border-color: #dc3545;
		box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
	}
	.has-error .form-text { color: #dc3545;}


/* 	==========================================================================
   	media - img & iframe
   	========================================================================== */

	.image img {
		display: block;
		width: 100%;
	}
	img {
		max-width: 100%;
		height: auto;
	}
	iframe { max-width: 100%;}


/*  ==========================================================================
    css3 transition
    ========================================================================== */

	a,
	.btn {
		transition: 0.5s;
	}


/*  ==========================================================================
    logo-3w	
    ========================================================================== */
   
	.logo-3w {
		position: absolute;
		right: 5px;
		bottom: 5px;
	}


/* ==========================================================================
	owl-carousel
	========================================================================== */

	/* owl-dots */
	.owl-carousel .owl-dots { display: flex; justify-content: center; margin-top: 15px;}
	.owl-carousel .owl-dots .owl-dot { display: block; width: 15px; height: 15px; margin: 0 3px; border: none; border-radius: 100%; cursor: pointer; background-color: #000; transition: background-color 0.5s; outline: none;}
	.owl-carousel .owl-dots .owl-dot:hover,
	.owl-carousel .owl-dots .owl-dot.active { background-color: #0090df;}
	.owl-carousel .owl-dots .owl-dot.active { cursor: default;}