/******************************************************************
  Template Name: Dreams
  Description:  Dreams Car Driving HTML Template
  Author: Colorlib
  Author URI: https://colorlib.com
  Version: 1.0
  Created: Colorlib
******************************************************************/

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Feature Section
6.  Application Form Section
7.  Pricing Section
8.  Team Section
9.  Contact
10.  Footer Style
-------------------------------------------------------------------*/

/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

html,
body {
	height: 100%;
	font-family: "Kanit", sans-serif;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	background-color: white;
	font-size: 16px;
	line-height: 1.4285em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	color: #111111;
	font-weight: 400;
	font-family: "Kanit", sans-serif;
}

h1 {
	font-size: 70px;
}

h2 {
	font-size: 36px;
}

h3 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

p {
	font-size: 15px;
	font-family: "Kanit", sans-serif;
	color: #000000;
	font-weight: 400;
	line-height: 26px;
	margin: 0 0 15px 0;
}

img {
	max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
	outline: none;
}

a:hover,
a:focus {
	text-decoration: none;
	outline: none;
	color: #ffffff;
}

ul,
ol {
	padding: 0;
	margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
	margin-bottom: 45px;
}

.section-title.center-title {
	text-align: center;
}

.section-title span {
	color: lightblue;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	display: block;
	margin-bottom: 6px;
}

.section-title h2 {
	color: #111111;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
}

.set-bg {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

.spad {
	padding-top: 100px;
	padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
	color: #fff;
}

/* buttons */

.primary-btn {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 10px 15px;
	color: #ffffff;
	background: lightblue;
	letter-spacing: 1px;
}

.second-btn {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 10px 15px;
	color: #ffffff;
	background: darkgray;
	letter-spacing: 1px;
	border-radius: 5px;
}
.second-btn:hover {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 10px 15px;
	color: yellow;
	background: black;
	letter-spacing: 1px;
	border-radius: 5px;
}

.card-hover:hover{
	opacity: 0.8;
	cursor: pointer;
}

.primary-btn.second-bg {
	background: #0284CF;
}

.site-btn {
	font-size: 14px;
	color: #ffffff;
	background: #0284CF;
	font-weight: 700;
	letter-spacing: 1px;
	border: none;
	text-transform: uppercase;
	display: inline-block;
	padding: 14px 30px;
}

.site-btn.second-bg {
	background: lightblue;
}

/* Preloder */

#preloder {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 999999;
	background: #000;
}

.loader {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -13px;
	margin-left: -13px;
	border-radius: 60px;
	animation: loader 0.8s linear infinite;
	-webkit-animation: loader 0.8s linear infinite;
}

@keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

@-webkit-keyframes loader {
	0% {
		-webkit-transform: rotate(0deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
	50% {
		-webkit-transform: rotate(180deg);
		border: 4px solid #673ab7;
		border-left-color: transparent;
	}
	100% {
		-webkit-transform: rotate(360deg);
		border: 4px solid #f44336;
		border-left-color: transparent;
	}
}

.spacial-controls {
	position: fixed;
	width: 111px;
	height: 91px;
	top: 0;
	right: 0;
	z-index: 999;
}

.spacial-controls .search-switch {
	display: block;
	height: 100%;
	padding-top: 30px;
	background: #323232;
	text-align: center;
	cursor: pointer;
}

.search-model {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: #000;
	z-index: 99999;
}

.search-model-form {
	padding: 0 15px;
}

.search-model-form input {
	width: 500px;
	font-size: 40px;
	border: none;
	border-bottom: 2px solid #333;
	background: 0 0;
	color: #999;
}

.search-close-switch {
	position: absolute;
	width: 50px;
	height: 50px;
	background: #333;
	color: #fff;
	text-align: center;
	border-radius: 50%;
	font-size: 28px;
	line-height: 28px;
	top: 30px;
	cursor: pointer;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/*---------------------
  Header
-----------------------*/

.header {
	background: whitesmoke;
	position: fixed; height: 80px;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 999;
	border-bottom: 1px solid silver;
	box-shadow: 0px 5px 10px 0px silver;
}

.header.header--normal {
	position: relative;
}

.header__logo {
	padding: 0px;
	position: relative;
	z-index: 1;
	/*display: flex; 
	align-items: left; 
	justify-content: center;*/
}

.header__logo::before {
	position: absolute;	
	top: 0;	
	height: 100%;
	content: "";
	/*background: lightblue;
	width: 580px;
	left: -400px;
	webkit-clip-path: polygon(0% 0%, 100% 0%, 96% 100%, 0% 100%);
	clip-path: polygon(0% 0%, 100% 0%, 96% 100%, 0% 100%);*/
}

.header__logo a {
	display: inline-block;
}

.header__menu {
	padding: 20px 0px;
}

.header__menu ul li {
	list-style: none;
	display: inline-block;
	margin-right: 35px;
	position: relative;
}

.header__menu ul li.active a:after {
	opacity: 1;
}

.header__menu ul li:hover a:after {
	opacity: 1;
}

.header__menu ul li:hover .dropdown {
	/*top: 33px;
	opacity: 1;
	visibility: visible;*/
}
.offcanvas__btn{ padding-top: 10px; }
.offcanvas__btn ul li{
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 20px;
}
.offcanvas__btn ul li a{
	text-decoration: none; color: white;
}
.offcanvas__btn ul li a:hover{
	text-decoration: none; color: white; font-weight: bold;
}
.offcanvas__btn ul li:active a:after{

}
.offcanvas__btn ul li:hover a:after{

}
.offcanvas__btn ul li:hover .dropdown{

}
.dropdownShow{
	top: 33px;
	opacity: 1;
	visibility: visible;
	position: absolute;
	width: 300px;
	color: white;
	background: dodgerblue;
	text-align: left;
	padding: 0px;
	z-index: 9;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.header__menu ul li:last-child {
	margin-right: 0;
}

.header__menu ul li .dropdown, .dropdownHide {
	position: absolute;
	left: 0px;
	top: 33px;
	width: 250px;
	background: dodgerblue;
	text-align: left;
	padding: 0px;
	z-index: 9;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.header__menu ul li .dropdown li, .header__menu ul li .dropdownShow li {
	display: block;
	margin-right: 0;
}

.header__menu ul li .dropdown li a, .header__menu ul li .dropdownShow li a {
	font-size: 14px;
	color: white;
	font-weight: 200;
	padding: 8px 15px;
	text-transform: capitalize;
}
.header__menu ul li .dropdownShow li a:hover {
	color: black;
	background-color: ghostwhite;
	border-radius: 0px;
	text-decoration: none;
}

.header__menu ul li .dropdown li a:after, .header__menu ul li .dropdownShow li a:after {
	display: none;
}

.header__menu ul li a {
	font-size: 16px;
	font-weight: 400;
	text-transform: none;
	color: #000;
	display: block;
	padding: 6px 0;
	position: relative;
}

.header__menu ul li a:after{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: dodgerblue;
	content: "";
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
	opacity: 0;
}

.header__right {
	text-align: right;
	/*padding: 20px 0;*/
}

.header__right__search {
	display: inline-block;
	padding-right: 15px;
	position: relative;
	margin-right: 15px;
}

.header__right__search:after {
	position: absolute;
	right: 0;
	top: 5px;
	width: 1px;
	height: 15px;
	background: rgba(255, 255, 255, 0.3);
	content: "";
}

.header__right__search i {
	font-size: 15px;
	color: #000;
	cursor: pointer;
}

.header__right__social {
	display: inline-block;
	margin-right: 25px;
}

.header__right__social a {
	display: inline-block;
	font-size: 16px;
	color: #000;
	margin-right: 20px;
}

.header__right__social a:last-child {
	margin-right: 0;
}

.header__right__btn {
	display: inline-block;
}

.offcanvas-menu-wrapper {
	display: none;
}

.canvas__open {
	display: none;
}

.sticky-bar {
    left: 0;
    margin: auto;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 0 60px 0 rgba(0,0,0,0.07);
    box-shadow: 0 0 60px 0 rgba(0,0,0,0.07);
    z-index: 9999;
    -webkit-animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    animation: 300ms ease-in-out 0s normal none 1 running fadeInDown;
    -webkit-box-shadow: 0 10px 15px rgba(25,25,25,0.1);
    background: dodgerblue;
}

/*---------------------
  Hero
-----------------------*/

.hero {
	height: 450px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	border-bottom: 3px solid lightgray;
	background-color: black;
}

.hero__text h5 {
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 20px;
}

.hero__text h2 {
	font-size: 42px;
	font-weight: 800;
	text-transform: uppercase;
	font-style: italic;
	color: #ffffff;
	margin-bottom: 30px;
}

.hero__text .second-bg {
	margin-left: 15px;
}

/*---------------------
  About Video
-----------------------*/

.about-video {
	position: relative;
	z-index: 1;
}

.about__video__bg {
	height: 390px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.about__video__bg .play-btn {
	display: inline-block;
	font-size: 14px;
	color: #ffffff;
	height: 50px;
	width: 50px;
	background: lightblue;
	border-radius: 50%;
	text-align: center;
	line-height: 50px;
}

.about__video__text {
	border: 1px solid #e1e1e1;
	padding: 70px 50px 70px 65px;
	height: 390px;
	background: #ffffff;
}

.about__video__text .section-title {
	margin-bottom: 20px;
}

.about__video__text p {
	margin-bottom: 26px;
}

/*---------------------
  Application Form
-----------------------*/

.application-form {
	background: #f5f5f5;
	-webkit-clip-path: polygon(50% 0, 100% 21%, 100% 100%, 50% 100%, 0 100%, 0% 21%);
	clip-path: polygon(50% 0, 100% 21%, 100% 100%, 50% 100%, 0 100%, 0% 21%);
	padding-top: 290px;
	margin-top: -190px;
	padding-bottom: 70px;
}

.application-form.courses--page {
	margin-top: 0;
	padding-top: 65px;
	-webkit-clip-path: none;
	clip-path: none;
	background: transparent;
	padding-bottom: 0;
}

.application-form.pricing--page {
	margin-top: 0;
	padding-top: 0;
	-webkit-clip-path: none;
	clip-path: none;
	background: transparent;
	padding-bottom: 90px;
}

.application-form.pricing--page .application__form__content {
	background: #f5f5f5;
}

.application-form.pricing--page .application__form__content .section-title span {
	color: #0071e4;
}

.application-form.pricing--page .application__form__content .section-title h2 {
	color: #111111;
}

.application-form.pricing--page .application__form__content form input {
	color: #444444;
	background: #ffffff;
	border: 1px solid #e1e1e1;
}

.application-form.pricing--page .application__form__content form input::-webkit-input-placeholder {
	color: #444444;
}

.application-form.pricing--page .application__form__content form input::-moz-placeholder {
	color: #444444;
}

.application-form.pricing--page .application__form__content form input:-ms-input-placeholder {
	color: #444444;
}

.application-form.pricing--page .application__form__content form input::-ms-input-placeholder {
	color: #444444;
}

.application-form.pricing--page .application__form__content form input::placeholder {
	color: #444444;
}

.application-form.pricing--page .application__form__content form .nice-select {
	background: #ffffff;
	border: 1px solid #e1e1e1;
}

.application-form.pricing--page .application__form__content form .nice-select span {
	color: #444444;
}

.application-form.pricing--page .application__form__content form .nice-select:after {
	border-bottom: 1.5px solid rgba(17, 17, 17, 0.7);
	border-right: 1.5px solid rgba(17, 17, 17, 0.7);
}

.application-form .application__form__content {
	background: #0284CF;
	padding: 70px;
}

.application-form .application__form__content .section-title span {
	color: #ffffff;
}

.application-form .application__form__content .section-title h2 {
	color: #ffffff;
}

.application-form .application__form__content form input {
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: #ffffff;
}

.application-form .application__form__content form input::-webkit-input-placeholder {
	color: #ffffff;
}

.application-form .application__form__content form input::-moz-placeholder {
	color: #ffffff;
}

.application-form .application__form__content form input:-ms-input-placeholder {
	color: #ffffff;
}

.application-form .application__form__content form input::-ms-input-placeholder {
	color: #ffffff;
}

.application-form .application__form__content form input::placeholder {
	color: #ffffff;
}

.application-form .application__form__content form .nice-select {
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
}

.application-form .application__form__content form .nice-select span {
	color: #ffffff;
}

.application-form .application__form__content form .nice-select:after {
	border-color: #ffffff;
}

.application-form form input {
	width: 100%;
	height: 50px;
	border: 1px solid #e1e1e1;
	background: #ffffff;
	font-size: 14px;
	color: #444444;
	padding-left: 20px;
	margin-bottom: 30px;
}

.application-form form input::-webkit-input-placeholder {
	color: #444444;
}

.application-form form input::-moz-placeholder {
	color: #444444;
}

.application-form form input:-ms-input-placeholder {
	color: #444444;
}

.application-form form input::-ms-input-placeholder {
	color: #444444;
}

.application-form form input::placeholder {
	color: #444444;
}

.application-form form .nice-select {
	height: 50px;
	line-height: 50px;
	width: 100%;
	float: none;
	border-radius: 0;
	border: 1px solid #e1e1e1;
	font-size: 14px;
	background: #ffffff;
	margin-bottom: 30px;
}

.application-form form .nice-select span {
	color: #444444;
}

.application-form form .nice-select:after {
	border-bottom: 1.5px solid rgba(17, 17, 17, 0.7);
	border-right: 1.5px solid rgba(17, 17, 17, 0.7);
	height: 7px;
	right: 22px;
	width: 7px;
}

.application-form form .nice-select .list {
	width: 100%;
	border-radius: 0;
	margin-top: 0;
}

/*---------------------
  Pricing
-----------------------*/

.pricing {
	padding-bottom: 70px;
}

.pricing.pricing--page .section-title h2 {
	color: #111111;
}

.pricing.pricing--page .pricing__item {
	background: #f5f5f5;
}

.pricing.pricing--page .pricing__item:hover {
	background: #0284CF;
}

.pricing.pricing--page .pricing__item:hover .pricing__item__title span {
	color: #ffffff;
}

.pricing.pricing--page .pricing__item:hover .pricing__item__title h5 {
	color: #ffffff;
}

.pricing.pricing--page .pricing__item:hover ul li {
	color: #ffffff;
}

.pricing.pricing--page .pricing__item ul li {
	color: #444444;
}

.pricing.pricing--page .pricing__item__title span {
	color: #444444;
}

.pricing.pricing--page .pricing__item__title h5 {
	color: #111111;
}

.pricing .section-title h2 {
	color: #ffffff;
}

.pricing__item {
	background: rgba(12, 43, 75, 0.3);
	text-align: center;
	padding: 40px 35px 35px;
	margin-bottom: 40px;
	-webkit-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	transition: all, 0.5s;
}

.pricing__item:hover {
	background: #0284CF;
}

.pricing__item:hover .pricing__item__title {
	border-bottom: 1px solid rgba(225, 225, 225, 0.1);
}

.pricing__item:hover .primary-btn {
	background: lightblue;
}

.pricing__item .pricing__item__title {
	border-bottom: 1px solid rgba(225, 225, 225, 0.2);
	padding-bottom: 45px;
	margin-bottom: 25px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.pricing__item .pricing__item__title span {
	font-size: 14px;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.pricing__item .pricing__item__title h2 {
	font-size: 50px;
	color: lightblue;
	font-weight: 700;
	margin-top: 4px;
	margin-bottom: 18px;
}

.pricing__item .pricing__item__title h5 {
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.pricing__item ul {
	margin-bottom: 35px;
}

.pricing__item ul li {
	list-style: none;
	font-size: 14px;
	color: #ffffff;
	line-height: 36px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.pricing__item .primary-btn {
	display: block;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

/*---------------------
  Team
-----------------------*/

.team {
	padding-bottom: 70px;
}

.team.team--instructor {
	padding-top: 70px;
}

.team__all {
	text-align: right;
}

.team__item {
	border: 1px solid #e1e1e1;
	overflow: hidden;
	padding: 40px;
	margin-bottom: 30px;
}

.team__item__img {
	float: left;
	margin-right: 30px;
}

.team__item__text {
	overflow: hidden;
}

.team__item__text h5 {
	font-weight: 700;
	color: #111111;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.team__item__text span {
	font-size: 14px;
	color: lightblue;
	display: block;
	margin-bottom: 12px;
}

.team__item__text p {
	font-size: 14px;
	color: #111111;
	line-height: 20px;
	margin-bottom: 20px;
}

.team__item__text .team__item__social a {
	font-size: 16px;
	color: #111111;
	margin-right: 20px;
}

.team__item__text .team__item__social a:last-child {
	margin-right: 0;
}

/*---------------------
  Courses
-----------------------*/

.courses {
	padding-bottom: 60px;
}

.courses__all {
	text-align: right;
}

.course__item {
	margin-bottom: 40px;
}

.course__item img {
	margin-bottom: 25px;
	min-width: 100%;
}

.course__item h5 {
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 8px;
}

.course__item h4 {
	font-size: 22px;
	font-weight: 700;
	color: lightblue;
	margin-bottom: 10px;
}

.course__item p {
	color: #444444;
	line-height: 24px;
	font-size: 14px;
	margin-bottom: 10px;
}

.course__item a {
	display: inline-block;
	font-size: 14px;
	color: #111111;
	text-transform: uppercase;
	font-weight: 700;
	position: relative;
	padding: 0 0 6px;
	border-bottom: 2px solid lightblue;
}

/*---------------------
  Footer
-----------------------*/

.footer {
	padding-top: 0px;
	background: #0b0b0b;
}

.footer__widget {
	margin-bottom: 10px;
}

.footer__widget h5 {
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 24px;
}

.footer__widget ul li {
	list-style: none;
}

.footer__widget ul li a {
	color: #ffffff;
	font-size: 12px;
	/*line-height: 32px;*/
}

.footer__about {
	margin-bottom: 30px;
}

.footer__about p {
	color: #c4c4c4;
	margin-bottom: 10px;
}

.footer__about ul li {
	list-style: none;
	color: #c4c4c4;
	font-size: 15px;
	line-height: 36px;
}

.footer__logo {
	margin-bottom: 30px;
}

.footer__logo a {
	display: inline-block;
}

.footer__copyright__text {
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding: 20px 0;
	margin-top: 20px;
}

.footer__copyright__text p {
	font-size: 14px;
	color: #c4c4c4;
	margin-bottom: 0;
}

.footer__copyright__text a {
	color: #c4c4c4;
	text-decoration: underline;
}

.footer__copyright__text a:hover {
	color: lightblue;
}

.footer__copyright__text i {
	color: #c11;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
	padding-top: 24px;
}

.breadcrumb-option.breadcrumb--about .breadcrumb__links a {
	color: #ffffff;
}

.breadcrumb__links a {
	font-size: 15px;
	color: #111111;
	margin-right: 18px;
	display: inline-block;
	position: relative;
}

.breadcrumb__links a:after {
	position: absolute;
	right: -14px;
	top: 2px;
	content: "/";
	color: #888888;
}

.breadcrumb__links a i {
	margin-right: 2px;
}

.breadcrumb__links span {
	font-size: 15px;
	color: #888888;
	display: inline-block;
}

/*---------------------
  About Hero
-----------------------*/

.about-hero {
	padding-top: 170px;
	padding-bottom: 130px;
	margin-top: -48px;
	height: 560px;
}

.about__hero__text .section-title {
	margin-bottom: 24px;
}

.about__hero__text .section-title h2 {
	color: #ffffff;
}

.about__hero__text p {
	color: #ffffff;
	margin-bottom: 30px;
}

.about__hero__text .play-btn {
	display: inline-block;
	font-size: 14px;
	color: #ffffff;
	height: 50px;
	width: 50px;
	background: lightblue;
	border-radius: 50%;
	text-align: center;
	line-height: 50px;
}

/*---------------------
  Testimonial
-----------------------*/

.testimonial__content {
	padding: 90px 70px 90px;
}

.testimonial__content .section-title {
	margin-bottom: 36px;
}

.testimonial__content .section-title h2 {
	color: #ffffff;
}

.testimonial__slider {
	max-width: 585px;
}

.testimonial__slider.owl-carousel .owl-dots {
	margin-top: 25px;
}

.testimonial__slider.owl-carousel .owl-dots button {
	height: 10px;
	width: 10px;
	display: inline-block;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.3);
	margin-right: 10px;
}

.testimonial__slider.owl-carousel .owl-dots button.active {
	background: white;
}

.testimonial__slider.owl-carousel .owl-dots button:last-child {
	margin-right: 0;
}

.testimonial__item .quote-icon i {
	font-size: 24px;
	color: #0284CF;
}

.testimonial__item p {
	font-size: 16px;
	color: #ffffff;
	line-height: 27px;
	font-style: italic;
	margin-bottom: 20px;
	margin-top: 6px;
}

.testimonial__item h6 {
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.testimonial__item .rating i {
	font-size: 12px;
	color: lightblue;
	margin-right: -4px;
}

/*---------------------
  Feature
-----------------------*/

.feature {
	padding-bottom: 70px;
}

.feature.feature--about .section-title span {
	color: #0071e4;
}

.feature.feature--about .feature__item {
	background: #f5f5f5;
}

.feature.feature--about .feature__item h5 {
	color: #111111;
}

.feature__text {
	padding-top: 80px;
}

.feature__text .section-title {
	margin-bottom: 20px;
}

.feature__text p {
	margin-bottom: 26px;
}

.feature__item {
	background: #0284CF;
	text-align: center;
	padding: 40px 10px 35px;
	margin-bottom: 30px;
}

.feature__item.right-column {
	margin-top: 120px;
}

.feature__item h5 {
	font-weight: 700;
	text-transform: uppercase;
	color: #ffffff;
	margin-top: 25px;
}

/*---------------------
  Room Details Slider
-----------------------*/

.course-details {
	padding-top: 70px;
	padding-bottom: 90px;
}

.course__details__desc img {
	margin-bottom: 40px;
}

.course__details__title {
	margin-bottom: 18px;
}

.course__details__title h3 {
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.course__details__title .price {
	font-size: 30px;
	color: lightblue;
	font-weight: 700;
}

.course__details__rating {
	text-align: right;
	margin-bottom: 18px;
}

.course__details__rating .rating {
	margin-bottom: 5px;
}

.course__details__rating .rating i {
	font-size: 12px;
	color: lightblue;
	margin-right: -4px;
}

.course__details__rating .rating i:last-child {
	margin-right: 0;
}

.course__details__rating p {
	font-size: 14px;
	color: #444444;
}

.course__details__text {
	color: #444444;
	margin-bottom: 34px;
}

.course__details__feature {
	margin-bottom: 30px;
}

.course__details__feature h5 {
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.course__details__feature ul li {
	list-style: none;
	font-size: 15px;
	color: #444444;
	position: relative;
	margin-bottom: 8px;
}

.course__details__feature ul li:last-child {
	margin-bottom: 0;
}

.course__details__feature ul li span {
	line-height: 24px;
	display: block;
	overflow: hidden;
}

.course__details__feature ul li i {
	font-size: 15px;
	color: lightblue;
	margin-right: 15px;
	float: left;
	position: relative;
	top: 4px;
}

.course__details__sidebar__location {
	border: 1px solid #e1e1e1;
	margin-bottom: 60px;
}

.course__details__location__map {
	height: 300px;
}

.course__details__location__map iframe {
	width: 100%;
}

.course__details__location__address {
	border-top: 1px solid #e1e1e1;
	padding: 25px 30px 20px;
}

.course__details__location__address h5 {
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 16px;
}

.course__details__location__address p {
	font-size: 14px;
	color: #111111;
	line-height: 24px;
}

.course__details__location__address p:last-child {
	margin-bottom: 0;
}

.course__details__location__address p span {
	font-weight: 700;
}

.course__details__sidebar__register h5 {
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	background: #0284CF;
	padding: 25px 30px 22px;
}

.course__details__sidebar__register form {
	background: #f5f5f5;
	padding: 30px;
}

.course__details__sidebar__register form input {
	width: 100%;
	height: 50px;
	border: 1px solid #e1e1e1;
	background: #ffffff;
	font-size: 14px;
	color: #111111;
	padding-left: 20px;
	margin-bottom: 20px;
}

.course__details__sidebar__register form input::-webkit-input-placeholder {
	color: #111111;
}

.course__details__sidebar__register form input::-moz-placeholder {
	color: #111111;
}

.course__details__sidebar__register form input:-ms-input-placeholder {
	color: #111111;
}

.course__details__sidebar__register form input::-ms-input-placeholder {
	color: #111111;
}

.course__details__sidebar__register form input::placeholder {
	color: #111111;
}

.course__details__sidebar__register form .nice-select {
	height: 50px;
	line-height: 50px;
	width: 100%;
	float: none;
	border-radius: 0;
	border: 1px solid #e1e1e1;
	font-size: 14px;
	background: #ffffff;
	margin-bottom: 20px;
}

.course__details__sidebar__register form .nice-select span {
	color: #111111;
}

.course__details__sidebar__register form .nice-select:after {
	border-bottom: 1.5px solid #111111;
	border-right: 1.5px solid #111111;
	height: 7px;
	right: 22px;
	width: 7px;
}

.course__details__sidebar__register form .nice-select .list {
	width: 100%;
	border-radius: 0;
	margin-top: 0;
}

.course__details__sidebar__register form button {
	width: 100%;
	text-align: center;
}

/*---------------------
  Faq
-----------------------*/

.faq {
	padding-top: 70px;
}

.faq__accordion .section-title {
	margin-bottom: 34px;
}

.faq__accordion .section-title h2 {
	font-size: 32px;
}

.faq__accordion .card {
	border: none;
	border-radius: 0;
	margin-bottom: 36px;
}

.faq__accordion .card:last-child {
	margin-bottom: 0;
}

.faq__accordion .card-heading {
	cursor: pointer;
}

.faq__accordion .card-heading a {
	font-size: 18px;
	color: #111111;
	font-weight: 700;
	line-height: 24px;
	display: block;
	padding-left: 30px;
}

.faq__accordion .card:last-child .card-heading {
	border-bottom: none;
}

.faq__accordion .card .card-body {
	padding: 0;
	padding-left: 30px;
	padding-top: 14px;
}

.faq__accordion .card .card-body p {
	font-size: 14px;
	color: #444444;
	line-height: 24px;
	margin-bottom: 0;
}

.faq__accordion .card-heading a:after,
.faq__accordion .card-heading>a.active[aria-expanded=false]:after {
	content: "+";
	font-size: 24px;
	color: lightblue;
	position: absolute;
	left: 0;
	top: -1px;
}

.faq__accordion .card-heading.active a:after {
	content: "-";
	font-size: 24px;
	color: lightblue;
	position: absolute;
	left: 0;
	top: -3px;
}

.faq__accordion .card-heading a[aria-expanded=true]:after,
.faq__accordion .card-heading>a.active:after {
	content: "-";
	font-size: 32px;
	font-weight: 400;
	color: lightblue;
	position: absolute;
	right: 0;
	top: -3px;
}

.faq__form .section-title {
	margin-bottom: 34px;
}

.faq__form .section-title h2 {
	font-size: 32px;
}

.faq__form form input {
	width: 100%;
	height: 50px;
	border: 1px solid #e1e1e1;
	background: #ffffff;
	font-size: 14px;
	color: #444444;
	padding-left: 20px;
	margin-bottom: 20px;
}

.faq__form form input::-webkit-input-placeholder {
	color: #444444;
}

.faq__form form input::-moz-placeholder {
	color: #444444;
}

.faq__form form input:-ms-input-placeholder {
	color: #444444;
}

.faq__form form input::-ms-input-placeholder {
	color: #444444;
}

.faq__form form input::placeholder {
	color: #444444;
}

.faq__form form textarea {
	width: 100%;
	height: 110px;
	border: 1px solid #e1e1e1;
	background: #ffffff;
	font-size: 14px;
	color: #444444;
	padding-top: 12px;
	padding-left: 20px;
	margin-bottom: 14px;
	resize: none;
}

.faq__form form textarea::-webkit-input-placeholder {
	color: #444444;
}

.faq__form form textarea::-moz-placeholder {
	color: #444444;
}

.faq__form form textarea:-ms-input-placeholder {
	color: #444444;
}

.faq__form form textarea::-ms-input-placeholder {
	color: #444444;
}

.faq__form form textarea::placeholder {
	color: #444444;
}

.faq__form form button {
	width: 100%;
}

/*---------------------
  Latest Blog
-----------------------*/

.blog {
	padding-top: 70px;
}

.blog__large {
	margin-bottom: 45px;
	overflow: hidden;
	background: #f5f5f5;
}

.blog__large__pic {
	float: left;
	margin-right: 50px;
}

.blog__large__text {
	overflow: hidden;
	padding-top: 60px;
	padding-right: 50px;
}

.blog__large__text span {
	font-size: 13px;
	font-style: italic;
	color: lightblue;
	text-transform: uppercase;
}

.blog__large__text h4 {
	color: #111111;
	font-weight: 700;
	line-height: 31px;
	margin-top: 5px;
	margin-bottom: 6px;
}

.blog__large__text ul {
	margin-bottom: 12px;
}

.blog__large__text ul li {
	list-style: none;
	font-size: 13px;
	color: #888888;
	font-style: italic;
	margin-right: 20px;
	position: relative;
	display: inline-block;
}

.blog__large__text ul li:after {
	position: absolute;
	right: -15px;
	top: 0;
	content: "/";
}

.blog__large__text ul li:last-child {
	margin-right: 0;
}

.blog__large__text ul li:last-child:after {
	display: none;
}

.blog__large__text p {
	font-size: 14px;
	color: #111111;
	margin-bottom: 10px;
}

.blog__large__text a {
	display: inline-block;
	font-size: 14px;
	color: #111111;
	text-transform: uppercase;
	font-weight: 700;
	position: relative;
	padding: 0 0 6px;
	letter-spacing: 1px;
	border-bottom: 2px solid lightblue;
}

.blog__item {
	margin-bottom: 35px;
}

.blog__item__pic img {
	min-width: 100%;
}

.blog__item__text {
	padding-top: 25px;
}

.blog__item__text span {
	font-size: 13px;
	font-style: italic;
	color: lightblue;
	text-transform: uppercase;
}

.blog__item__text h5 {
	margin-bottom: 4px;
	margin-top: 6px;
}

.blog__item__text h5 a {
	font-size: 20px;
	color: #111111;
	font-weight: 700;
	line-height: 27px;
}

.blog__item__text h5 a:hover {
	text-decoration: underline;
}

.blog__item__text ul {
	margin-bottom: 10px;
}

.blog__item__text ul li {
	list-style: none;
	font-size: 13px;
	color: #888888;
	font-style: italic;
	margin-right: 20px;
	position: relative;
	display: inline-block;
}

.blog__item__text ul li:after {
	position: absolute;
	right: -15px;
	top: 0;
	content: "/";
}

.blog__item__text ul li:last-child {
	margin-right: 0;
}

.blog__item__text ul li:last-child:after {
	display: none;
}

.blog__item__text p {
	font-size: 14px;
	color: #444444;
	margin-bottom: 0;
}

.pagination__option {
	text-align: center;
}

.pagination__option a {
	display: inline-block;
	font-size: 14px;
	color: #111111;
	font-weight: 600;
	background: #f2f2f2;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 14px 22px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
	margin-right: 10px;
}

.pagination__option a:last-child {
	margin-right: 0;
}

.pagination__option a:hover {
	background: #0284CF;
	color: #ffffff;
}

/*---------------------
  Blog Sidebar
-----------------------*/

.blog__sidebar {
	padding-left: 40px;
}

.blog__sidebar__search {
	margin-bottom: 65px;
}

.blog__sidebar__search h4 {
	color: #1d1c1c;
	font-weight: 500;
	margin-bottom: 25px;
}

.blog__sidebar__search form {
	position: relative;
}

.blog__sidebar__search form input {
	height: 48px;
	width: 100%;
	font-size: 16px;
	color: #777C81;
	padding-left: 20px;
	border: none;
	background: #ffffff;
}

.blog__sidebar__search form input::-webkit-input-placeholder {
	color: #8d8d8d;
}

.blog__sidebar__search form input::-moz-placeholder {
	color: #8d8d8d;
}

.blog__sidebar__search form input:-ms-input-placeholder {
	color: #8d8d8d;
}

.blog__sidebar__search form input::-ms-input-placeholder {
	color: #8d8d8d;
}

.blog__sidebar__search form input::placeholder {
	color: #8d8d8d;
}

.blog__sidebar__search form button {
	font-size: 16px;
	color: #ffffff;
	background: #E9AD28;
	border: none;
	font-weight: 500;
	letter-spacing: 2px;
	padding: 0 15px 0 25px;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
}

.blog__sidebar__recent {
	margin-bottom: 60px;
}

.blog__sidebar__recent h4 {
	color: #1d1c1c;
	font-weight: 500;
	margin-bottom: 35px;
}

.blog__sidebar__recent__item {
	display: block;
	overflow: hidden;
	margin-bottom: 20px;
}

.blog__sidebar__recent__item:last-child {
	margin-bottom: 0;
}

.blog__sidebar__recent__item__pic {
	float: left;
	margin-right: 20px;
}

.blog__sidebar__recent__item__text {
	overflow: hidden;
}

.blog__sidebar__recent__item__text h6 {
	color: #1d1c1c;
	font-weight: 500;
	margin-bottom: 38px;
}

.blog__sidebar__recent__item__text .time {
	font-size: 12px;
	color: #777C81;
}

.blog__sidebar__recent__item__text .time i {
	margin-right: 2px;
}

.blog__sidebar__categories {
	margin-bottom: 52px;
}

.blog__sidebar__categories h4 {
	color: #1d1c1c;
	font-weight: 500;
	margin-bottom: 24px;
}

.blog__sidebar__categories ul li {
	list-style: none;
	position: relative;
	padding-left: 18px;
}

.blog__sidebar__categories ul li:hover a {
	color: lightblue;
}

.blog__sidebar__categories ul li:hover:before {
	background: lightblue;
}

.blog__sidebar__categories ul li:before {
	position: absolute;
	left: 0;
	top: 14px;
	height: 5px;
	width: 5px;
	background: #BFC7CE;
	content: "";
	border-radius: 50%;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.blog__sidebar__categories ul li a {
	font-size: 16px;
	color: #1d1c1c;
	line-height: 36px;
	-webkit-transition: all, 0.3s;
	-o-transition: all, 0.3s;
	transition: all, 0.3s;
}

.blog__sidebar__comment {
	margin-bottom: 55px;
}

.blog__sidebar__comment h4 {
	color: #1d1c1c;
	font-weight: 500;
	margin-bottom: 26px;
}

.blog__sidebar__comment p {
	line-height: 28px;
	margin-bottom: 8px;
}

.blog__sidebar__comment span {
	display: block;
	color: #1d1c1c;
	line-height: 28px;
	margin-bottom: 12px;
}

.blog__sidebar__comment span:last-child {
	margin-bottom: 0;
}

.blog__sidebar__tags h4 {
	color: #1d1c1c;
	font-weight: 500;
	margin-bottom: 25px;
}

.blog__sidebar__tags a {
	display: inline-block;
	font-size: 14px;
	color: #777C81;
	padding: 8px 25px 6px 20px;
}

/*---------------------
  Blog Hero
-----------------------*/

.blog-hero {
	padding-top: 145px;
	padding-bottom: 150px;
}

.blog__hero__text {
	background: rgba(12, 43, 75, 0.7);
	text-align: center;
	padding: 40px 75px 30px;
}

.blog__hero__text span {
	font-size: 13px;
	font-style: italic;
	color: lightblue;
	text-transform: uppercase;
}

.blog__hero__text h2 {
	color: #ffffff;
	font-weight: 700;
	line-height: 47px;
	margin-top: 6px;
	margin-bottom: 10px;
}

.blog__hero__text ul li {
	list-style: none;
	font-size: 13px;
	color: #ffffff;
	font-style: italic;
	margin-right: 20px;
	position: relative;
	display: inline-block;
}

.blog__hero__text ul li:after {
	position: absolute;
	right: -15px;
	top: 0;
	content: "/";
}

.blog__hero__text ul li:last-child {
	margin-right: 0;
}

.blog__hero__text ul li:last-child:after {
	display: none;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details {
	padding-top: 60px;
}

.blog__details__text {
	margin-bottom: 20px;
}

.blog__details__text p {
	color: #444444;
	margin-bottom: 20px;
}

.blog__details__text p:last-child {
	margin-bottom: 0;
}

.blog__details__quote {
	padding-left: 55px;
	position: relative;
	margin-bottom: 25px;
}

.blog__details__quote i {
	font-size: 30px;
	color: lightblue;
	position: absolute;
	left: 0;
	top: 5px;
}

.blog__details__quote p {
	font-size: 17px;
	color: #111111;
	line-height: 30px;
	font-weight: 700;
	font-style: italic;
	margin-bottom: 10px;
}

.blog__details__quote span {
	display: block;
	font-size: 15px;
	color: lightblue;
}

.blog__details__desc {
	margin-bottom: 35px;
}

.blog__details__desc p {
	color: #444444;
	margin-bottom: 20px;
}

.blog__details__desc p:last-child {
	margin-bottom: 0;
}

.blog__details__widget {
	padding-bottom: 30px;
	border-bottom: 1px solid #e1e1e1;
	margin-bottom: 55px;
}

.blog__details__widget p {
	font-size: 15px;
	color: #111111;
	margin-bottom: 0;
	line-height: 40px;
}

.blog__details__widget__social {
	text-align: right;
}

.blog__details__widget__social span {
	font-size: 15px;
	color: #111111;
	display: inline-block;
	margin-right: 15px;
}

.blog__details__widget__social a {
	display: inline-block;
	font-size: 16px;
	color: #111111;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	border: 1px solid #e1e1e1;
	line-height: 40px;
	text-align: center;
	margin-right: 10px;
}

.blog__details__widget__social a:last-child {
	margin-right: 0;
}

.blog__option__btn__item {
	overflow: hidden;
	margin-bottom: 30px;
}

.blog__option__btn__prev {
	display: block;
}

.blog__option__btn__prev .option__btn__name {
	font-size: 15px;
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 25px;
}

.blog__option__btn__prev .option__btn__name i {
	font-size: 15px;
	font-weight: 700;
	position: relative;
	top: -1px;
	margin-right: 6px;
}

.blog__option__btn__prev .blog__option__btn__pic {
	float: left;
	margin-right: 25px;
}

.blog__option__btn__prev .blog__option__btn__text {
	overflow: hidden;
}

.blog__option__btn__prev .blog__option__btn__text h6 {
	color: #111111;
	font-weight: 700;
	line-height: 22px;
}

.blog__option__btn__prev .blog__option__btn__text ul li {
	list-style: none;
	font-size: 13px;
	color: #888888;
	font-style: italic;
	margin-right: 20px;
	position: relative;
	display: inline-block;
}

.blog__option__btn__prev .blog__option__btn__text ul li:after {
	position: absolute;
	right: -15px;
	top: 0;
	content: "/";
}

.blog__option__btn__prev .blog__option__btn__text ul li:last-child {
	margin-right: 0;
}

.blog__option__btn__prev .blog__option__btn__text ul li:last-child:after {
	display: none;
}

.blog__option__btn__next {
	display: block;
	overflow: hidden;
	text-align: right;
}

.blog__option__btn__next .option__btn__name {
	font-size: 15px;
	color: #111111;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 25px;
}

.blog__option__btn__next .option__btn__name i {
	font-size: 15px;
	font-weight: 700;
	position: relative;
	top: -1px;
	margin-left: 6px;
}

.blog__option__btn__next .blog__option__btn__pic {
	float: right;
	margin-left: 25px;
}

.blog__option__btn__next .blog__option__btn__text {
	overflow: hidden;
}

.blog__option__btn__next .blog__option__btn__text h6 {
	color: #111111;
	font-weight: 700;
	line-height: 22px;
}

.blog__option__btn__next .blog__option__btn__text ul li {
	list-style: none;
	font-size: 13px;
	color: #888888;
	font-style: italic;
	margin-right: 20px;
	position: relative;
	display: inline-block;
}

.blog__option__btn__next .blog__option__btn__text ul li:after {
	position: absolute;
	right: -15px;
	top: 0;
	content: "/";
}

.blog__option__btn__next .blog__option__btn__text ul li:last-child {
	margin-right: 0;
}

.blog__option__btn__next .blog__option__btn__text ul li:last-child:after {
	display: none;
}

/*---------------------
  Recent Blog
-----------------------*/

.recent-blog {
	padding-top: 30px;
	padding-bottom: 55px;
}

.recent-blog .section-title h2 {
	font-size: 24px;
}

.recent-blog .blog__item .blog__item__text ul {
	margin-bottom: 0;
}

/*---------------------
  Map
-----------------------*/

.map {
	height: 400px;
	margin-top: 60px;
}

.map iframe {
	width: 100%;
}

/*---------------------
  Contact
-----------------------*/

.contact__address h4 {
	color: #111111;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.contact__address ul li {
	overflow: hidden;
	list-style: none;
	margin-bottom: 40px;
}

.contact__address ul li:last-child {
	margin-bottom: 0;
}

.contact__address ul li .icon {
	font-size: 20px;
	color: lightblue;
	height: 50px;
	width: 50px;
	background: #0284CF;
	border-radius: 50%;
	line-height: 50px;
	text-align: center;
	float: left;
	margin-right: 20px;
}

.contact__address ul li p {
	overflow: hidden;
	margin-bottom: 0;
	color: #111111;
}

.contact__address ul li p span {
	display: block;
}

.contact__form h4 {
	color: #111111;
	font-weight: 800;
	font-style: italic;
	text-transform: uppercase;
	margin-bottom: 30px;
}

.contact__form form input {
	width: 100%;
	height: 50px;
	border: 1px solid #e1e1e1;
	background: #ffffff;
	font-size: 14px;
	color: #444444;
	padding-left: 20px;
	margin-bottom: 30px;
}

.contact__form form input::-webkit-input-placeholder {
	color: #444444;
}

.contact__form form input::-moz-placeholder {
	color: #444444;
}

.contact__form form input:-ms-input-placeholder {
	color: #444444;
}

.contact__form form input::-ms-input-placeholder {
	color: #444444;
}

.contact__form form input::placeholder {
	color: #444444;
}

.contact__form form textarea {
	width: 100%;
	height: 110px;
	border: 1px solid #e1e1e1;
	background: #ffffff;
	font-size: 14px;
	color: #444444;
	padding-top: 12px;
	padding-left: 20px;
	margin-bottom: 24px;
	resize: none;
}

.contact__form form textarea::-webkit-input-placeholder {
	color: #444444;
}

.contact__form form textarea::-moz-placeholder {
	color: #444444;
}

.contact__form form textarea:-ms-input-placeholder {
	color: #444444;
}

.contact__form form textarea::-ms-input-placeholder {
	color: #444444;
}

.contact__form form textarea::placeholder {
	color: #444444;
}

.contact__form form button {
	width: 100%;
}

.logo-circle-img{ height: 55px; }
.smart-lab-img{ height: 35px; }
/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media (min-width: 576px) {
	.feature__item.right-column {
		margin-top: 120px !important;
	}
	.team__all {
		text-align: right !important;
		margin-bottom: 0 !important;
	}
	.courses__all {
		text-align: right !important;
		margin-bottom: 0 !important;
	}
	.application-form .application__form__content {
		padding: 45px;
	}
	.course__details__rating {
		text-align: right !important;
	}

}

@media only screen and (min-width: 1200px) {
	.container {
		max-width: 1170px;
	}
}
/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px){
	.header__right__social {
		margin-right: 12px;
	}
	/*.header__menu ul {
		text-align: center;
	}*/
	.header__menu ul li {
		margin-right: 15px;
	}
	.about__video__text {
		padding: 35px 35px 35px 50px;
	}
	.blog__large__pic {
		margin-right: 30px;
	}
	.blog__large__text {
		padding-top: 12px;
		padding-right: 10px;
	}
	.header__logo::before {
		left: -415px;
	}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) and (orientation : portrait){

}


/* Tablet Device = 768px */

@media only screen and (min-width: 741px) and (max-width: 991px) {
	.about__video__text {
		height: auto;
	}
	.application-form .application__form__content {
		padding: 50px;
	}
	.blog__large__pic {
		float: none;
		margin-right: 0;
	}
	.blog__large__pic img {
		min-width: 100%;
		-webkit-transform: scale(1.25);
		-ms-transform: scale(1.25);
		transform: scale(1.25);
		margin-bottom: 30px;
	}
	.blog__large__text {
		padding-left: 50px;
		padding-bottom: 60px;
	}
	.canvas__open {
		display: block;
		font-size: 22px;
		color: dodgerblue;
		height: 35px;
		width: 35px;
		line-height: 34px;
		text-align: center;
		border: 1px solid dodgerblue;
		border-radius: 2px;
		cursor: pointer;
		position: absolute;
		right: 15px;
		top: 15px;
		z-index: 9;
	}
	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.7);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}
	.offcanvas-menu-overlay.active {
		visibility: visible;
	}
	.offcanvas-menu-wrapper {
		position: fixed;
		left: -300px;
		width: 450px;
		height: 100%;
		background: #1d1c1c;
		padding: 50px 20px 30px 30px;
		display: block;
		z-index: 99;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}
	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
		top: 0;
	}
	.offcanvas__menu {
		display: none;
	}
	.slicknav_btn {
		display: none;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 20px;
	}
	.slicknav_nav ul {
		margin: 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #ffffff;
		font-weight: 600;
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}
	.slicknav_nav {
		display: block !important;
	}
	.offcanvas__logo {
		margin-bottom: 30px;
	}
	.offcanvas__search {
		position: absolute;
		right: 20px;
		top: 20px;
	}
	.offcanvas__search i {
		font-size: 18px;
		color: #ffffff;
		cursor: pointer;
	}
	.offcanvas__social {
		margin-bottom: 30px;
	}
	.offcanvas__social a {
		display: inline-block;
		font-size: 16px;
		color: #ffffff;
		margin-right: 20px;
	}
	.offcanvas__social a:last-child {
		margin-right: 0;
	}
	.header__menu {
		display: none;
	}
	.header__right {
		display: none;
	}
	.header .container {
		position: relative;
	}
}
@media only screen and (min-width: 768px) and (max-width: 991px) and (orientation : portrait){

}
@media only screen and (min-width: 768px) and (max-width: 991px) and (orientation : landscape){

}

/* Wide Mobile = 480px */

@media only screen and (max-width: 750px) {
	.feature__text {
		padding-top: 0;
		margin-bottom: 40px;
	}
	.feature__item.right-column {
		margin-top: 0;
	}
	.about__video__text {
		height: auto;
	}
	.team__all {
		text-align: left;
		margin-bottom: 50px;
	}
	.courses__all {
		text-align: left;
		margin-bottom: 50px;
	}
	.course__details__rating {
		text-align: left;
	}
	.faq__accordion {
		margin-bottom: 50px;
	}
	.blog__large__pic {
		float: none;
		margin-right: 0;
	}
	.blog__large__pic img {
		min-width: 100%;
		-webkit-transform: scale(1.25);
		-ms-transform: scale(1.25);
		transform: scale(1.25);
		margin-bottom: 30px;
	}
	.blog__large__text {
		padding-left: 50px;
		padding-bottom: 60px;
	}
	.blog__details__widget p {
		text-align: center;
		margin-bottom: 20px;
	}
	.blog__details__widget__social {
		text-align: center;
	}
	.contact__address {
		margin-bottom: 40px;
	}
	.canvas__open {
		display: block;
		font-size: 22px;
		color: dodgerblue;
		height: 35px;
		width: 35px;
		line-height: 34px;
		text-align: center;
		border: 1px solid dodgerblue;
		border-radius: 2px;
		cursor: pointer;
		position: absolute;
		right: 15px;
		top: 15px;
		z-index: 9;
	}
	.offcanvas-menu-overlay {
		position: fixed;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		background: rgb(0, 0, 0, 0.2);
		content: "";
		z-index: 98;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		visibility: hidden;
	}
	.offcanvas-menu-overlay.active {
		visibility: visible;
	}
	.offcanvas-menu-wrapper {
		position: fixed;
		left: -260px;
		width: 400px;
		height: 100%;
		background: #1d1c1c;
		padding: 50px 20px 30px 30px;
		display: block;
		z-index: 99;
		overflow-y: auto;
		-webkit-transition: all, 0.5s;
		-o-transition: all, 0.5s;
		transition: all, 0.5s;
		opacity: 0;
	}
	.offcanvas-menu-wrapper.active {
		opacity: 1;
		left: 0;
		top: 0;
	}
	.offcanvas__menu {
		display: none;
	}
	.slicknav_btn {
		display: none;
	}
	.slicknav_menu {
		background: transparent;
		padding: 0;
		margin-bottom: 20px;
	}
	.slicknav_nav ul {
		margin: 0;
	}
	.slicknav_nav .slicknav_row,
	.slicknav_nav a {
		padding: 7px 0;
		margin: 0;
		color: #ffffff;
		font-weight: 600;
	}
	.slicknav_nav .slicknav_row:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}
	.slicknav_nav a:hover {
		border-radius: 0;
		background: transparent;
		color: #ffffff;
	}
	.slicknav_nav {
		display: block !important;
	}
	.offcanvas__logo {
		margin-bottom: 30px;
	}
	.offcanvas__search {
		position: absolute;
		right: 20px;
		top: 20px;
	}
	.offcanvas__search i {
		font-size: 18px;
		color: #ffffff;
		cursor: pointer;
	}
	.offcanvas__social {
		margin-bottom: 30px;
	}
	.offcanvas__social a {
		display: inline-block;
		font-size: 16px;
		color: #ffffff;
		margin-right: 20px;
	}
	.offcanvas__social a:last-child {
		margin-right: 0;
	}
	.header__menu {
		display: inline-block;
	}
	.header__right {
		display: none;
	}
	.header .container {
		position: relative;
	}
}
@media only screen and (max-width: 750px) and (orientation : landscape){

}
@media only screen and (max-width: 750px)  and (orientation : portrait){

}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
	.section-title h2 {
		font-size: 30px;
	}
	.about__video__text {
		padding: 70px 40px 70px 40px;
	}
	.team__item__img {
		float: none;
		margin-right: 0;
		margin-bottom: 30px;
	}
	.team__item__img img {
		min-width: 100%;
	}
	.hero__text .second-bg {
		margin-left: 0;
		margin-top: 20px;
	}
	.application-form .application__form__content {
		padding: 30px 20px;
	}
	.about-hero {
		margin-top: -74px;
	}
	.testimonial__content {
		padding: 70px 20px 70px;
	}
	.blog__hero__text {
		padding: 40px 45px 30px;
	}
	.search-model-form input {
		width: 100%;
		font-size: 24px;
	}
	.header__right {
		display: none;
	}
}
#idModuleName { font-size: 30px; color: white; font-weight: bold; cursor: pointer;  }/**/
@media only screen and (min-width: 1240px) and (max-width: 1920px){
	#idModuleName { font-size: 26px; color: white; font-weight: bold; cursor: pointer;  }
}
@media only screen and (min-width: 979px) and (max-width: 1239px){
	#idModuleName { font-size: 18px; color: white; font-weight: bold; cursor: pointer;  }
}
@media only screen and (min-width: 1180px){
	#breadcrumbs-arrow {   }
	#navBreadcrumbs{ display: none ; }
}
@media only screen and (max-width: 1179px) and (min-width: 100px){
	#breadcrumbs-arrow { display: none;  }
	#navBreadcrumbs{  }
}
@media only screen and (min-width: 600px) and (max-width: 978px){
	#idModuleName { font-size: 22px; color: white; font-weight: bold; cursor: pointer;  }
}
@media only screen and (min-width: 479px) and (max-width: 599px){
	#idModuleName { font-size: 19px; color: white; font-weight: bold; cursor: pointer;  }
}
@media only screen and (min-width: 360px) and (max-width: 478px){
	#idModuleName { font-size: 16px; color: white; font-weight: bold; cursor: pointer;  }
}
@media only screen and (min-width: 100px) and (max-width: 359px){
	#idModuleName { font-size: 14px; color: white; font-weight: bold; cursor: pointer;  }
}
@media only screen and (max-width: 360px) and (orientation : portrait){
	.logo-circle-img{ height: 6vh; }
	.smart-lab-img{ height: 2.5vh; }
}
@media only screen and (max-width: 479px) and (orientation : portrait){
	.smart-lab-img{ height: 3.5vh; }
}
@media only screen and (min-width: 480px) and (max-width: 600px) {
	.smart-lab-img{ height: 4.5vh; }
}
@media only screen and (min-width: 601px) and (max-width: 979px) {
	.smart-lab-img{ height: 4.8vh; }
}
@media only screen and (min-width: 980px) and (max-width: 1079px) {
	.smart-lab-img{ height: 5.4vh; }
}
@media only screen and (min-width: 1200px) and (max-width: 1279px) {
	.smart-lab-img{ height: 6vh; }
}
@media only screen and (max-width: 479px) and (orientation : landscape){

}
@media only screen and (min-width: 960px) and (orientation : landscape){

}
@media only screen and (min-width: 1080px) and (orientation : landscape){

}
@media only screen and (min-width: 1200px) and (orientation : landscape){

}
@media only screen and (min-width: 1280px) and (orientation : landscape){

}
@media only screen and (min-width: 1330px) and (orientation : landscape){

}
@media only screen and (min-width: 1440px) and (orientation : landscape){

}
@media only screen and (min-width: 1920px) and (orientation : landscape){

}
@media only screen and (min-width: 1080px) and  (max-width: 1080px) and (orientation : portrait){

}
.under-line{ text-decoration: underline; font-weight: bold; }
.fix-flex-card > div > div.card { height: calc(100% - 15px); margin-bottom: 15px; }
.cursorPointer{ cursor: pointer; }
.cursorDefault { cursor: default; }
.cursorDeny { cursor: not-allowed; }
.cursorNone { cursor: none; }
.cursorWait { cursor: wait; }
.show{ visibility: visible;  }
.hide{ visibility: hidden; }
.notHieght{ max-height: 0;  }
#carouselSlider{ border-bottom: 3px solid lightgray; }
.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}
.modalMainColor{ background-color: #0284CF; }
.modal-dialog{ min-width: 340px; max-width: 580px; }
.modal-content-login{ padding: 0rem;  border-radius: 15px; border: 0px solid transparent; }
.modal-body-login{ background-color: transparent;  border-radius: 5px;  }
.modal-background-image{  background-image: linear-gradient(rgba(58, 136, 231, 0.8), rgba(58, 136, 231, 0.4)), url('../img/slider/02.jpg');  background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center;   }
.modal-container-login{ padding: 0px; margin: 0px; border-radius: 15px; }
.modal-form-login{ background-color: white; padding: 1rem; border-bottom-right-radius: 15px; border-top-right-radius: 15px; }
.modal-left-login{ display: flex; justify-content: center; flex-direction: column;  align-items: center; height: 100%;  width: 100%; }
.modal-left-login-font{ font-size: 26px; color: white; font-weight: bold; text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.9); }
.close-icon-gray{
	cursor: pointer; display:block; box-sizing:border-box; width:20px; height:20px; border-width:3px; border-style: solid; border-color:lightgrey; border-radius:100%;
	background: -webkit-linear-gradient(-45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%), -webkit-linear-gradient(45deg, transparent 0%, transparent 46%, white 46%,  white 56%,transparent 56%, transparent 100%);
	background-color:lightgrey; box-shadow:0px 0px 2px 1px rgba(0,0,0,0.3); transition: all 0.3s ease;
}
.modal-footer-login{ background-color: transparent; padding: 0px; margin: 0px; border-top: 0px; }
.loginmodal-container{ max-width: 100%; border-radius: 5px; }
.fade { background-color: rgba(0, 0, 0, 0.8); transition: opacity .15s linear; }
.btn-smartLab, .btn-smartLab:visited, .btn-smartLab:focus,
.btn-warning, .btn-warning:visited, .btn-warning:focus{ color: #FFF; background-color: #0284CF; border-color: #0284CF; }
.btn-smartLab:hover, .btn-warning:hover, .btn-warning:active{ color: #FFF; background-color: #027ac1; border: 1px solid #0284CF; }
.table thead th { border-bottom: 1px solid rgb(222, 226, 230); }
.ui.grid { margin: 0rem -1.5rem 0rem 0rem; }
.card-deck{ margin-left: 0px; margin-right: 0px; }
ol {
	list-style-type: none;
	counter-reset: item;
	margin: 0;
	padding: 0;
}
ol > li {
	display: table;
	counter-increment: item;
	margin-bottom: 0.4em;
}
ol > li:before {
	content: counters(item, ".") ". ";
	display: table-cell;
	padding-right: 0.4em;
}
li ol > li { margin: 0; }
li ol > li:before { content: counters(item, ".") " "; }

#breadcrumbs-arrow{ overflow: hidden; width: 100%; }
#breadcrumbs-arrow li{ float: left; margin: 0 .5em 0 1em; }
#breadcrumbs-arrow a{
	/*font-size: 1em;*/
	background: #ddd;
	padding: .7em 1em;
	float: left;
	text-decoration: none;
	color: #444;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	position: relative;
}
#breadcrumbs-arrow a:hover{ background: lightblue; }
#breadcrumbs-arrow a::before{
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -1.5em;
	border-width: 1.5em 0 1.5em 1em;
	border-style: solid;
	border-color: #ddd #ddd #ddd transparent;
	left: -1em;
}
#breadcrumbs-arrow a:hover::before{ border-color: lightblue lightblue lightblue transparent; }
#breadcrumbs-arrow a::after{
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -1.5em;
	border-top: 1.5em solid transparent;
	border-bottom: 1.5em solid transparent;
	border-left: 1em solid #ddd;
	right: -1em;
}
#breadcrumbs-arrow a:hover::after{ border-left-color: lightblue; }
#breadcrumbs-arrow .current, #breadcrumbs-arrow .current:hover { font-weight: normal;  color: white;	background: #027ac1; }
#breadcrumbs-arrow .current::after, #breadcrumbs-arrow .current:hover::after{
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -1.5em;
	border-top: 1.5em solid transparent;
	border-bottom: 1.5em solid transparent;
	border-left: 1em solid #027ac1;
	right: -1em;
}
#breadcrumbs-arrow .current::before, #breadcrumbs-arrow .current:hover::before{
	content: "";
	position: absolute;
	top: 50%;
	margin-top: -1.5em;
	border-width: 1.5em 0 1.5em 1em;
	border-style: solid;
	border-color: #027ac1 #027ac1 #027ac1 transparent;
	left: -1em;
}
ul { margin: 0; padding: 0; 	list-style: none; }
.rounded-circle { 	border-radius: 50%!important; border:1px solid; padding: 2px 6px 2px 6px; font-size: x-small;  }
/*option{ word-wrap: break-word; text-overflow: inherit; white-space: normal; }*/
.select2{ min-width: 100%; }
.select2-container .select2-selection--single {	height: calc(1.5em + .75rem + 2px); }
.select2-container--default .select2-selection--single .select2-selection__rendered { 	line-height: 32px; }
.select2-container--default .select2-selection--single .select2-selection__clear { height: 32px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 32px; }
.select2-results__message{ color: red; }
.checkbox-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
::-ms-clear { display: none; }
.form-control-clear { z-index: 10; pointer-events: auto; width: 14px; cursor: pointer; }
.input-border-less{ border: 0px solid white; width: 90%; }
table#idTable.display tbody tr:nth-child(even):hover td,
table#idTable.display tbody tr:nth-child(odd):hover td{ cursor: pointer; }
.default-color{ color: dodgerblue; }
.dataTables_info{ color: grey; }
.font-size-72{ font-size: 72px; }
.font-size-60{ font-size: 60px; }
.font-size-50{ font-size: 50px; }
.font-size-48{ font-size: 48px; }
.font-size-46{ font-size: 46px; }
.font-size-44{ font-size: 44px; font-weight: 500; letter-spacing: 5px; }
.font-size-42{ font-size: 42px; }
.font-size-40{ font-size: 40px; }
.font-size-38{ font-size: 38px; }
.font-size-36{ font-size: 36px; }
.font-size-34{ font-size: 34px; }
.font-size-32{ font-size: 32px; }
.font-size-30{ font-size: 30px; }
.font-size-28{ font-size: 28px; }
.font-size-26{ font-size: 26px; }
.font-size-24{ font-size: 24px; font-weight: 500; }
.font-size-22{ font-size: 22px; }
.font-size-20{ font-size: 20px; }
.font-size-18{ font-size: 18px; }
.font-size-16{ font-size: 16px; }
.font-size-14{ font-size: 14px; }
.font-size-12{ font-size: 12px; }
.font-size-10{ font-size: 10px; }
.font-size-8{ font-size: 8px; }
.font-size-6{ font-size: 6px; }
.text-shadow{ text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);  }
.text-white-shadow{ text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.9);  }
.btn{ font-family: "Kanit", sans-serif; padding: .5rem 1rem; border-radius: .5rem; }
.btn-shadow{  box-shadow: 0px 5px 10px 0px grey; }
.btn-light, .btn-light:visited, .btn-light:focus, .btn-light:hover{ color: #007bff; }
.btn-light:hover{ background-color: whitesmoke; }
.ul-white, .ul-black{  list-style: none; margin-left: 15px; }
.ul-white li::before {content: "\2022";  color: white; font-weight: bold; font-size: 1rem; display: inline-block;  width: 1em;  margin-left: -1em; }
.ul-white li, .ul-black li{  list-style-position: outside; }
.ul-black li::before {content: "\2022";  color: black; font-weight: bold; font-size: 1rem; display: inline-block;  width: 1em;  margin-left: -1em; }
.background-banner-left{ background-image: linear-gradient(to right, rgba(6,123,190,1), rgba(64,179,233,1)); border-top-left-radius: 10px; border-right: 1px solid white; }
.background-banner-middle{ background-image: linear-gradient(to right, rgba(10,113,182,1), rgba(14,141,212,1)); border-left: 1px solid white; border-right: 1px solid white; }
.background-banner-right{ background-image: linear-gradient(to right, rgba(38,82,155,1), rgba(11,123,199,1)); border-top-right-radius: 10px; border-left: 1px solid white; }
.background-banner-left-bottom{ background-image: linear-gradient(to right, rgba(6,123,190,1), rgba(64,179,233,1)); border-bottom-left-radius: 10px; border-right: 1px solid white; height: 58px; }
.background-banner-middle-bottom{ background-image: linear-gradient(to right, rgba(10,113,182,1), rgba(14,141,212,1)); border-left: 1px solid white; border-right: 1px solid white; height: 58px; }
.background-banner-right-bottom{ background-image: linear-gradient(to right, rgba(38,82,155,1), rgba(11,123,199,1)); border-bottom-right-radius: 10px; border-left: 1px solid white; height: 58px; }
.background-banner-image{ background-image: url("../img/banner/home.jpg");   background-repeat: no-repeat; background-attachment: fixed; background-size: cover; background-position: center; height: 550px; }
.background-banner-height{ height: 650px; }
.background-banner-height-bottom{ height: 58px; margin-bottom: 50px; }
.background-banner-padding-top{ padding-top: 125px; }
.background-banner-other-height{ height: 250px; background-image: url("../img/banner/banner.png");   background-repeat: no-repeat; background-attachment: initial; background-size: length; background-position: center; }
.line-title-primary{ height: 24px; border-bottom: 4px solid dodgerblue; width: 48px; margin-bottom: 15px; }
.background-services{ background-image: linear-gradient(to bottom, rgba(245,250,254,1), rgba(255,255,255,1)); border-radius: 18px; border: 1px solid #deebf1; }
#idSectionBottom{ overflow: hidden; position: relative; height: 240px; margin-top: 60px; }
.section-bottom-bg { opacity: 0.5; position: absolute; left: 0; top: 0;  }
.section-bottom-content{ position: relative; text-align: center; color: white; padding-top: 40px; font-size: 26px; }
.section-bottom-content-mt{ margin-top: 1.5rem !important; }
.m0-p0{ margin: 0px; padding: 0px; }
.banner-text-title{ font-size: 72px; color: white; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }
.banner-text-title-my{ margin-top: 40px; margin-bottom: 40px; }
.banner-text-subtitle{ font-size: 20px; color: white; text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.9); }
.banner-text-subtitle-pb{ padding-bottom: .5rem !important; }
body{ overflow-x: hidden; }
.upper{ text-transform: uppercase; }
#return-to-top {
	background: rgba(73, 122, 255, .8); position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; display: block; z-index: 999;
	text-decoration: none; -webkit-border-radius: 35px; -moz-border-radius: 35px; border-radius: 35px; display: none;
	-webkit-transition: all 0.3s linear; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
#return-to-top i {
	color: #fff; margin: 0; position: relative; left: 16px; top: 13px; font-size: 19px;
	-webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;
}
#return-to-top:hover { background: rgb(73, 122, 255); }
#return-to-top:hover i { color: #fff; top: 5px; }
.input-group-text-right-transparent {
	background-color: transparent;
	border-left: 1px solid #ced4da;
	border-top: 1px solid #ced4da;
	border-right: 0px solid transparent;
	border-bottom: 1px solid #ced4da;
	border-radius: 8px;
}
.input-form-control-left-transparent {
	border-left: 0px solid transparent;
	border-top: 1px solid #ced4da;
	border-right: 1px solid #ced4da;
	border-bottom: 1px solid #ced4da;
}
input[type=text], input[type=password] { height: 42px; border-radius: 8px; }
button{ height: 42px; border-radius: 5px; }
.form-control{ border-radius: 5px; }

ul.breadcrumb { padding: 10px 16px; list-style: none; background-color: transparent; }
ul.breadcrumb li { display: inline; font-size: 18px;  color: grey; }
ul.breadcrumb li+li:before { padding: 18px; color: grey; content: "/\00a0"; }
ul.breadcrumb li a { color: dodgerblue; text-decoration: none; }
ul.breadcrumb li a:hover { color: #01447E; text-decoration: underline; }
.bg-warning{ background-color: #0284CF !important;}
.bg-orange{ background-color: #E6A200 !important; color: white !important;}
.bg-yellow{ background-color: #FFFF00 !important; color: grey !important;}
.bg-red{ background-color: #FF0000 !important; color: white !important;}
.bg-green{ background-color: #28A745 !important; color: white !important;}
.toggle{ margin-bottom: 10px;  }
.alert-warning { color: #005e82; background-color: rgba(0,169,248,0.14); }
.alert-orange { color: black; background-color: orange; border-color: rgba(232,161,79,0.8); }
.input-group > .form-control, .input-group > .form-control-plaintext {height: 44px; padding: 0px 0px 0px 5px;}
.input-group > .input-group-append > .btn{ height: 44px; }
.btn-outline-warning { color: #0284CF; border-color: #0284CF; }
.btn-xs{ height: 22px; padding: 3px 8px; border-radius: 5px; }
.border-warning{ border-color: #01447e !important; }
.round-18{ border-radius: 18px; }
.border-bottom{ border-bottom: 1px solid lightgray; }
.lab-border{ background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; }
.lab-border-white{ background-color: #fff; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: 0rem; }
.lab-border-gray{ background-color: lightgrey; background-clip: border-box; border: 1px solid rgba(0,0,0,.125); border-radius: 0rem; }
.lab-img-border{ border: 1px solid rgba(0,0,0,.125); border-radius: .25rem; min-height: 430px; }
.lab-table-border{ border: 1px solid rgba(0,0,0,.125); border-radius: .25rem;  }
.font-small { font-size: small; }
.maxWidthImg{ max-width: 250px; }
.tab-content { background-color: whitesmoke; border-bottom-left-radius: .5rem; border-bottom-right-radius: .5rem; }
.nav-tabs .nav-link{ background-color: gainsboro; color: darkgray; border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-left: 1px solid white; border-right: 1px solid white; border-top-left-radius: .5rem; border-top-right-radius: .5rem; }
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{ background-color: #0284CF; color: white;  border-top: 1px solid transparent; border-bottom: 1px solid transparent; border-left: 1px solid #0284CF; border-right: 1px solid #0284CF; }
.nav-tabs .nav-link:hover{ background-color: #01447e; color: white; border-top: 1px solid #01447e; border-bottom: 1px solid #01447e;  border-top-left-radius: .5rem; border-top-right-radius: .5rem;  }
.tab-content > .tab-pane { padding: 20px 15px 15px 15px;   }
.text-room-link{ color: grey; text-decoration: none; }
.text-room-link:hover, .text-room-link:focus, .text-room-link:active{ color: grey; text-decoration: underline; }
.value-underline-gray { padding: 0px 15px 0px 15px; border-bottom: 1px dotted #6c757d; display: inline-block; text-align: center; font-weight: bold; }
.modal-dialog-wh { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; max-width:none !important; }
.modal-header-wh { color: #fff; background: #0284CF; border-bottom: 1px solid #0284CF !important; border-top-left-radius: 0px; border-top-right-radius: 0px; }
.modal-content-wh { height: auto !important; min-height: 100% !important; border-radius: 0 !important; background-color: #ececec !important }
ul.disc > li{ list-style-type: disc; margin-left: 1rem; }
ul.square > li{ list-style-type: square; margin-left: 1rem; }
.img-min-wh{ min-width: 100px; min-height: 100px;  }
.img-thumbnail-max-w{ max-width: 150px;  }
.table thead th, .vertical-middle{ vertical-align: middle;  }
.dropdown-padding-top-left-15{ padding-left: 15px; padding-top: 15px; }
.modal-header h1, .modal-header h2, .modal-header h3, .modal-header h4, .modal-header h5, .modal-header h6 { color: white; }

.text-border-gray{
	text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
	-moz-text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
	-webkit-text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
}
.text-border-lightgray{
	text-shadow: -1px 0 lightgrey, 0 1px lightgrey, 1px 0 lightgrey, 0 -1px lightgrey;
	-moz-text-shadow: -1px 0 lightgrey, 0 1px lightgrey, 1px 0 lightgrey, 0 -1px lightgrey;
	-webkit-text-shadow: -1px 0 lightgrey, 0 1px lightgrey, 1px 0 lightgrey, 0 -1px lightgrey;
}
.btn-border{ border: 1px solid lightgray; }
.btn-lightgray{ background-color: lightgray; color: black; }
.carousel-caption { width:100%; height:100%; left:0; padding: 50px; }
.ui-autocomplete, ul.ui-autocomplete.ui-menu, .pac-container, .ui-front { z-index: 9999  !important; }

.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child),
.input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text{
	border-top-right-radius: .25rem;
	border-bottom-right-radius: .25rem;
}
.dropdown-menu { color: white; background-color: #0284CF; }
.dropdown-item { color: white; }
/*.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:focus {
	color: white; background-color: #01447e; border-color: lightgray lightgray lightgray lightgray;
}
.nav-tabs .nav-link:hover {
	background-color: #0284CF;
	color: white;
}*/
.datepicker th, .datepicker th:hover, .datepicker th.active:hover, .datepicker th.active:hover:hover {
	font-weight: bold; color: white;
}
.datepicker td:hover, .datepicker td.active:hover, .datepicker td.active:hover:hover {
	font-weight: bold; color: black; background-color: white;
}
.datepicker table tr td.active:hover, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active:active, .datepicker table tr td.active:hover:active, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.active, .datepicker table tr td.active:hover.active, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active[disabled], .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active.disabled:hover[disabled] {
	background-color: #0044cc;
}
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover,
.datepicker table tr td span.active.active, .datepicker table tr td span.active:hover.active{
	background-color: #0044cc;
	background-image: -moz-linear-gradient(top, #0044cc, #0044cc);
	background-image: -ms-linear-gradient(top, #0044cc, #0044cc);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0044cc), to(#0044cc));
	background-image: -webkit-linear-gradient(top, #0044cc, #0044cc);
	background-image: -o-linear-gradient(top, #0044cc, #0044cc);
	background-image: linear-gradient(top, #0044cc, #0044cc);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
	border-color: #002a80 #002a80 #002a80;
	border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.table-condensed, .table-condensed:hover{ background-color: #0284CF; }
.datepicker table tr th.prev:hover, .datepicker table tr th.datepicker-switch:hover, .datepicker table tr th.next:hover, .datepicker table tr th.month:hover,
.datepicker table tr td.prev:hover, .datepicker table tr td.datepicker-switch:hover, .datepicker table tr td.next:hover, .datepicker table tr td.month:hover{ font-weight: bold; color: black; }
[type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled, button:disabled { cursor: not-allowed; }
.input-group > .custom-select{ height: 44px; }
input[type="select"].form-control, select.form-control, input[type="file"].form-control { height: 42px; }
.toggle-on.btn { 	padding-right: 1.5rem; padding-top: 0.45rem; padding-left: 0.5rem; }
.toggle-off.btn { 	padding-left: 1.5rem; padding-top: 0.45rem; padding-right: 0.5rem; }

.alertPurple{ background-color: #533A75; border-radius: 10px; border: 2px dashed white; padding: 35px; font-size: large; color: white; vertical-align: middle; text-align: center; }
.alertWarning{ background-color: red; border-radius: 10px; border: 2px dashed white; padding: 35px; font-size: large; color: white; vertical-align: middle; text-align: center; }
.alertWarningYellow{ background-color: yellow; border-radius: 10px; border: 2px dashed grey; padding: 35px; font-size: large; color: black; vertical-align: middle; text-align: center; }
.alertSuccess { background-color: green; border-radius: 10px; border: 2px dotted white; padding: 4px; font-size: medium; color: white; vertical-align: middle; text-align: center; }
.alertDanger { background-color: red; border-radius: 10px; border: 2px dotted white; padding: 4px; font-size: medium; color: white; vertical-align: middle; text-align: center; }
.alertYellow { background-color: yellow; border-radius: 10px; border: 2px dotted grey; padding: 4px; font-size: medium; color: black; vertical-align: middle; text-align: center; }
.alertOrange { background-color: orange; border-radius: 10px; border: 2px dotted grey; padding: 4px; font-size: medium; color: red; vertical-align: middle; text-align: center; }
.alertTable {  padding: 15px; font-size: medium; color: red; vertical-align: middle; text-align: center; font-weight: bolder }
.alertMessageWarning{ background-color: yellow; border-radius: 10px; border: 2px dashed grey; padding: 15px; font-size: medium; color: black; vertical-align: middle; text-align: center; }
.alertMessageSuccess{ background-color: green; border-radius: 10px; border: 2px dashed whitesmoke; padding: 20px; font-size: medium; color: white; vertical-align: middle; text-align: center; }
.alertMessageDanger{ background-color: red; border-radius: 10px; border: 2px dashed whitesmoke; padding: 20px; font-size: medium; color: white; vertical-align: middle; text-align: center; }
.bg-light-gray{ background-color: lightgray; }

.text-admin-system{ color: #dc3545; }
.text-admin-university{ color: #e83e8c; }
.text-admin-faculty{ color: #fd7e14; }
.text-admin-department{ color: #ffc107; }
.text-admin-laboratory{ color: #007bff; }
.text-user{ color: #343a40; }
.text-executive{ color: #17a2b8; }
.text-building{ color: #28a745; }
.text-committee{ color: #6610f2; }
.text-cleaner{ color: #6c757d; }
.text-head{ color: #6f42c1; }
.text-small{ font-size: small; }
.text-black{ color: black; }

div.dataTables_wrapper div.dataTables_info { text-align: left; }
div.dataTables_wrapper div.dataTables_filter { margin-top: 2px; margin-right: 2px; }
.line-border{   border-top: 1px solid #dee2e6;  }
.page-link:focus { color: #007bff; 	background-color: #fff; }

.plyr__control--overlaid { padding: calc(var(--plyr-control-spacing,8.5px)*1.5); }
.plyr { border-radius: 10px; }

/*.help-shelf {
	display: block; z-index: 9;
	content: url("../files/help/shelf.png");
	position: relative;
	width: 941px;
	height: 175px;
	margin-left: auto;
	margin-right: auto;
}*/

.help-div-shelf {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	position: relative;
	z-index: 10;
	margin-bottom: -80px; /* This is what actually puts the stuff ON the shelf instead of hovering above it */
	width: 770px;
	margin-left: auto;
	margin-right: auto;
}

.foot-cookie{ position: fixed;  bottom: 0; right: 0;  width: 100%; height: 55px; background: #4D7198 0% 0% no-repeat padding-box; opacity: 0.9; z-index: 9999; }
.foot-cookie-condition{  float: left; width: 100%;  text-align: center;  letter-spacing: 0; color: #FFFFFF;   opacity: 1;  position: absolute;  font: 14px/16px 'Kanit' !important;  top: 35%; }
.p-cookie{   width: 100%;  margin-top: 5px;  height: 26px;    letter-spacing: 0; color: #FFFFFF;  opacity: 1; }
.btn-confirm-cookie{  background-color: #fff !important;  color: #0259C4 !important; border: 1px solid white; border-radius: 8px;   position: absolute;  top: -35%; margin-left: 10px;   font: Bold 14px/16px 'Kanit' !important;   }

@media (max-width: 989px) {
	.lab-font{ font-size: 0.9rem; }
	.lab-font-button{ font-size: 0.8rem; }
	.lab-font-button-group{ font-size: 0.9rem; }
}
@media (min-width: 990px) and (max-width: 1420px){
	.lab-font{ font-size: 0.9rem; }
	.lab-font-button{ font-size: 0.7rem; }
	.lab-font-button-group{ font-size: 0.7rem; }
}
@media (min-width: 1421px) and (max-width: 1624px){
	.lab-font{ font-size: 0.8rem; }
	.lab-font-button{ font-size: 0.7rem; }
	.lab-font-button-group{ font-size: 0.8rem; }
}
@media (min-width: 1625px) {
	.lab-font{ font-size: 1rem; }
	.lab-font-button{ font-size: 0.8rem; }
	.lab-font-button-group{ font-size: 0.9rem; }
}

@media (max-width: 1200px){

}
@media (max-width: 1024px){

}
@media (max-width: 992px){

}
@media (max-width: 834px){
	.section-bottom-content{  font-size: 20px; }
}
@media (max-width: 768px){
	#idSectionBottom{ height: 200px; }
	.section-bottom-content{ padding-top: 20px; font-size: 18px; }
}
@media (max-width: 576px){/*iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus*/
	#idSectionBottom{ height: 150px; }
	.section-bottom-content-mt{ margin-top: 0.8rem !important; }
	.section-bottom-content{ padding-top: 15px; font-size: 14px; }
}
@media (max-width: 428px){/*iPhone 12 Pro Max*/
	h4 .text-button{ font-size: 12px; }
}
@media (max-width: 414px){/*iPhone 8 Plus iPhone XS Max iPhone XR iPhone 11 Pro Max iPhone 11*/

}
@media (max-width: 390px){/*iPhone 12 iPhone 12 Pro*/

}
@media (max-width: 375px){/*iPhone 6 iPhone 6s iPhone 7 iPhone 8 iPhone X iPhone XS iPhone 11 Pro iPhone 12 mini*/

}
@media (max-width: 320px){/* < iPhone 6*/

}