/*
* Description: System Career Matching.
* Version: 1.0.0
* Last update: 25/08/2017
* Author: User Name <bizsolution@bizsolution.biz>
*
* Summary:
*
*    2. PAGE HOME
*        - 2.1. 	SECTION HERRO BANNER
*        - 2.2. 	SECTION WELCOME
*		  - 2.3. 	SECTION ASSESSMENT
*		  - 2.4. 	SECTION OUR STATISTIC
*		  - 2.5. 	SECTION FIND YOUR FAVORITE JOBS
*		  - 2.6. 	
*		  - 2.7. 	SECTION OUR CLIENT
*		  - 2.8. 	SECTION  GET StART NOW
*
*
*/

/* 	==========================================================================
==========================================================================
							2. PAGE HOME
==========================================================================
========================================================================== */
/* 	==========================================================================
2.1. SECTION HERRO BANNER
========================================================================== */
.wrapper-home .section-title p:first-child{
	font-size: 18px;
	color: #01948E;
	margin: 0 0 15px 0;
	text-align: center;
	float: left;
	width: 100%;
}
.wrapper-home .section-title h3{
	clear: both;
	font-size: 30px !important;
	color: rgb(0,105,180);
	margin: 0 !important;
	text-align: center;
}
.wrapper-home .section-title p{
	text-align: center;
	color: #01948E;
	margin-bottom: 0;
	padding: 7px 0 0;
} 
.wrapper-home .hero-banner { 
	position: relative; 
	float: left; 
	width: 100%; 
	margin-top: 150px;
	margin-bottom: 60px;
}

/* 	
SLIDE HERO-BANNER
========================================================================== */
.slide-hero-banner img { width: 100%; }
/* button next and pre */
	.wrapper-home .slide-hero-banner .slick-next {
	right: 35px; 
	position: absolute; 
	z-index: 99; 
	width: 35px;
	height: 31px;
}
.wrapper-home .slide-hero-banner .slick-prev { 
	left: 35px;
	position: absolute; 
	z-index: 99; 
	width: 35px; 
	height: 31px;
}
/*============ Customize color when hover ============
====================================================*/
.wrapper-home .slide-hero-banner .slick-prev:before, 
.wrapper-home .slide-hero-banner .slick-next:before {
	font-size: 35px;
}
.wrapper-home .slide-hero-banner .slick-prev:hover::before, 
.wrapper-home .slide-hero-banner .slick-next:hover::before {
	color: #1b9792;
}
.wrapper-home .slide-hero-banner .slick-dots { bottom: 15px; }
.wrapper-home .slide-hero-banner .slick-dots li { margin: 0 10px; }
.wrapper-home .slide-hero-banner .slick-dots li button { 
	height: 20px; 
	width: 20px; 
	margin-top: -5px; 
}
.wrapper-home .slide-hero-banner .slick-dots li button::before {
	background-color: rgb(255,255,255);
	border-radius: 50%;
	content: " ";
	height: 20px;
	width: 20px;
	border: 1px solid rgb(1,105,180);
	opacity: 1;
}
.wrapper-home .slide-hero-banner .slick-dots li.slick-active button::before { 
	opacity: 1; 
	background-color: rgb(1,105,180); 
}


/* 	==========================================================================
2.2. SECTION WELCOME
========================================================================== */
.wrapper-home .welcome { 
	text-align: center; 
	margin-bottom: 60px; 
	float: left; 
	width: 100%; 
}
.wrapper-home .welcome .title { 
	font-size: 18px; 
	color: #01948E; 
	margin: 0 0 15px 0;
}
.wrapper-home .welcome .main-title { 
	font-size: 30px; 
	color: rgb(0,105,180); 
	font-weight: bold; 
	margin: 0; 
}
.wrapper-home .welcome .main-title + p { 
	color: #01948E; 
}
.wrapper-home .welcome .about_us_post div.col-sm-4:nth-child(1) img { 
	border-radius: 50%; 
	margin: 35px 0 10px; 
}
.wrapper-home .welcome .about_us_post div.col-sm-4:nth-child(2) img { 
	border-radius: 50%; 
	margin: 35px 0 5px;
}
.wrapper-home .welcome .about_us_post div.col-sm-4:nth-child(3) img { 
	border-radius: 50%; 
	margin: 35px 0 10px; 
}
.wrapper-home .welcome .row h3 { 
	font-size: 18px; 
	margin-bottom: 15px;  
}
.wrapper-home .welcome .row.about_us_post p:lang(en) {
	color: #888686;
	word-wrap: break-word;
}
.wrapper-home .welcome .row.about_us_post p:lang(km) {
	color: #888686;
	word-wrap: break-word;
	line-height: 30px;
}
/* 	==========================================================================
2.3. SECTION SELF ASSESSMENT
========================================================================== */
.wrapper-home .assessment { 
	background-color: rgba(0,105,180,0.1); 
	padding: 60px 0; 
	margin-bottom: 60px;
	float: left;
	width: 100%;
}
.wrapper-home .assessment .title { 
	font-size: 18px; 
	color: #01948E; 
	margin: 0; 
	text-align: center; 
	margin-bottom: 15px;
}
.wrapper-home .assessment .main-title:lang(km) { 
	font-size: 30px; 
	color: rgb(0,105,180); 
	font-weight: bold;
	margin: 0; 
	text-align: center;
	margin-bottom: 20px;
}
.wrapper-home .assessment .main-title:lang(en) { 
	font-size: 30px; 
	color: rgb(0,105,180); 
	font-weight: bold; 
	margin: 0; 
	text-align: center;
}
.wrapper-home .assessment .main-title + p { 
	text-align: center; 
	padding-bottom: 40px; 
	color: #01948E; 
}	
.wrapper-home .assessment .margin-top{ margin-top: 40px;}
.wrapper-home .assessment .row .col-sm-4:nth-child(1){padding-right: 10px;}
.wrapper-home .assessment .row .col-sm-4:nth-child(2){padding-right: 5px;padding-left: 5px;}
.wrapper-home .assessment .row .col-sm-4:nth-child(3){padding-left: 10px;}
.wrapper-home .assessment .row .col-sm-4 div.disc{
	background: white;
	padding: 30px 20px;
}
.wrapper-home .assessment .row .col-sm-4 div.disc h4:lang(en){ line-height: 25px; }
.wrapper-home .assessment .row .col-sm-4 div.disc h4:lang(km){ line-height: 30px; }

.wrapper-home .assessment .row .col-sm-4 div.disc .description{
	color: #888686;
	word-wrap: break-word;
	line-height: 30px;
	margin-bottom: 0;
	height: 115px;
	margin-top: 25px;
}
.wrapper-home .assessment .row .col-sm-4 div.disc .view-more{ text-align: right}
.wrapper-home .assessment .row .col-sm-4 div.disc .btn-view-more{
	background-image: url('../images/icon/View_More_Self_Ass.svg');
	background-repeat: no-repeat;
	background-position: right;
	padding-right: 25px;
	text-transform: uppercase;
	background-size: 16px;
}
.nopadding{ padding: 0}
.wrapper-home .assessment .item .img { overflow: hidden}
.wrapper-home .assessment .item .img img,
.wrapper-home .assessment .skill img,
.wrapper-home .assessment .career-value img { 
	height: 210px; 
	width: 100%;
	overflow: hidden;
	-webkit-transition: transform .2s;
	-moz-transition: transform .2s;
	-ms-transition: transform .2s;
	-o-transition: transform .2s;
	transition: transform .2s;
}
.wrapper-home .assessment .item .img img:hover,
.wrapper-home .assessment .skill img:hover,
.wrapper-home .assessment .career-value img:hover {
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari 3-8 */
	transform: scale(1.1); 
}
/* 	==========================================================================
2.4. SECTION OUR STATISTIC
========================================================================== */
.wrapper-home .our-statistic { 
	background-color: #ffffff; 
	color: #ffffff; 
	text-align: center; 
	float: left;
	width: 100%;
}
.wrapper-home .our-statistic .back-ground-img {
	height: 610px;
	position: relative;
	background-image: url('../images/background_statistic.png');
	background-position: center;
}
.wrapper-home .back-ground-img .mask {	
	background-color: rgba(50,169,165,0.8);
	position: absolute;
	width: 100%;
	height: 100%;
	padding-top: 70px;
}
.wrapper-home .our-statistic .title { 
	font-size: 25px; 
	margin: 0; 
	text-align: center; 
}
.wrapper-home .our-statistic .main-title { 
	font-size: 40px; 
	font-weight: bold; 
	margin: 0; 
}
.wrapper-home .our-statistic .main-title + p { 
	padding-bottom: 20px; 
	font-size: 20px; 
}
.back-ground-img .mask .circle { 
	width: 140px; 
	height: 140px; 
	margin: 0 auto; 
	background-color: white; 
	border-radius: 50%;
	position: relative;
}
.back-ground-img .mask .circle .number { 
	color: rgb(50, 169, 165);
	font-size: 30px;
	position: relative;
	top: 33%;
}
.back-ground-img .mask .circle .number-small { 
	color: rgb(50, 169, 165);
	font-size: 25px;
	position: relative;
	top: 35%; 
}
.back-ground-img .mask .circle + p { 
	font-weight: 400; 
	font-size: 20px; 
	padding-top: 20px; 
}
.back-ground-img .mask .company .circle { 
	width: 110px; 
	height: 110px; 
	margin: 0 auto; 
	background-color: white; 
	border-radius: 50%;
	position: relative;
	margin-top: -40px;
}
/* 	==========================================================================
SECTION  CLIENT SPEAK
========================================================================== */
.wrapper-home .client-speak{ 
	text-align: center; 
	float: left;
	width: 100%;
	padding-top: 70px;
	margin-bottom: 70px;
	background-color: rgba(0,105,180,.10);
	padding-bottom: 70px;
}
.wrapper-home .client-speak .title { 
	font-size: 25px; 
	margin: 0; 
	color: #01948E; 
}
.wrapper-home .client-speak .main-title { 
	font-size: 40px; 
	font-weight: bold; 
	margin: 0; 
	text-align: center;
	color: rgb(0,105,180); 
}
.wrapper-home .client-speak .main-title + p { 
	font-size: 20px; 
	margin-bottom: 30px;
	color: #01948E;
}
.wrapper-home .client-speak .image-client {
	width: 200px;
	height: 200px;
	margin: 0 auto;
}
.wrapper-home .client-speak .image-client > img {
	border-radius: 50%;
}
.wrapper-home .client-speak .identity {
	font-weight: bold;
	font-size: 22px;
	margin-bottom: 50px;
}
.wrapper-home .client-speak .he-said {
	padding: 0px 200px 0;
	position: relative;
	float: left;
}
.wrapper-home .client-speak .he-said .open-quote {
	background-image: url('../images/icon/quotation_mark.png');
	background-repeat: no-repeat;
	position: absolute;
	left: 170px;
	padding: 15px;
	float: left;
	top: -20px;
}
.wrapper-home .client-speak .he-said .description {
	margin: 0 0 10px;
	float: left;
	position: relative;
	color: #888686;
}
.wrapper-home .client-speak .he-said .close-quote {

	background-image: url('../images/icon/quotation_mark.png');
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	-ms-transform: rotate(-180deg);
	-o-transform: rotate(-180deg);
	transform: rotate(-180deg);
	padding: 15px;
	background-repeat: no-repeat;
	float: right;
	position: absolute;
	top: -20px;
}
/* 	==========================================================================
SECTION CAREER LIST
========================================================================== */
.wrapper-home .list-career { 
	background-color: #ffffff; 
	width: 100%;
	float: left;
}
.wrapper-home .list-career .block-title { margin-bottom: 40px; }
.wrapper-home .list-career .title { 
	font-size: 18px; 
	margin: 0; 
	text-align: center; 
	color: #01948E; 
	margin-bottom: 15px;
}
.wrapper-home .list-career .main-title:lang(en) { 
	font-size: 30px; 
	font-weight: bold; 
	margin: 0; 
	text-align: center;
	color: rgb(0,105,180); 
}
.wrapper-home .list-career .main-title:lang(km) { 
	font-size: 30px; 
	color: rgb(0,105,180); 
	font-weight: bold; 
	margin: 0; 
	text-align: center;
	margin-bottom: 20px;
}
.wrapper-home .list-career .main-title + p { 
	text-align: center; 
	color: #01948E; 
}


.wrapper-home .list-career .career-item{
	text-align: center;
	border: 1px solid rgb(0,105,180);
	color: rgb(52, 51, 49);
	height: 80px;
	display: flex;
	display: -webkit-flex;
	display: -ms-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
}
.wrapper-home .list-career .career-item:hover{
	background-color: #1b9792;
	border-color: #1b9792;
	color: #fff;
}
.wrapper-home .list-career .padding{ padding: 0 15px 15px;word-break: break-all;}
.wrapper-home .list-career .btn-more { 
	text-align: center; 
	margin: 60px 0;
}
.list-career .btn-default span {
	background-image: url('../images/icon/right_arrow.png');
	background-repeat: no-repeat;
	height: 15px;
	margin-left: 20px;
	margin-top: 8px;
	position: absolute;
	width: 25px;
}
.wrapper-home .list-career .btn-read-more { 
	background-color: #156bb5;
	border: 1px solid rgb(0, 123, 193);
	border-radius: 0;
	color: #fff;
	height: 50px;
	line-height: 30px;
	padding-left: 45px;
	padding-right: 80px;
	position: relative;
}
.wrapper-home .list-career .btn-read-more:hover {
	background-color: #1b9792;
	color: #fff;
	border-color: #1b9792;
}
.wrapper-home .list-career .btn-read-more:hover span {
	background-image: url('../images/icon/right_arrow.png');
	margin-left: 20px;
	margin-top: 8px;
}

/* 	==========================================================================
2.7. SECTION OUR CLIENT
========================================================================== */
.wrapper-home .our-client { 
	padding-bottom: 70px; 
/*		background-color: rgba(0,105,180,.10);*/
	float: left;
	width: 100%;
}
.wrapper-home .our-client .block-title { margin-bottom: 35px; }
.wrapper-home .our-client .title { 
	font-size: 18px; 
	margin: 0; 
	text-align: center; 
	color: #01948E; 
	margin-bottom: 15px;
}
.wrapper-home .our-client .main-title:lang(en) { 
	font-size: 30px; 
	font-weight: bold; 
	margin: 0; 
	text-align: center;
	color: rgb(0,105,180); 
}
.wrapper-home .our-client .main-title:lang(km) { 
	font-size: 30px; 
	color: rgb(0,105,180); 
	font-weight: bold; 
	margin: 0; 
	text-align: center;
	margin-bottom: 20px;
}
.wrapper-home .our-client .main-title + p { 
	text-align: center; 
	color: #01948E;
	 }
.slide-our-client img { 
	width: 200px; 
	padding: 30px 0 0; 
	margin: 0 auto; 
}
.wrapper-home .slide-our-client .slick-next { right: 0; }
.wrapper-home .slide-our-client .slick-prev { left: 0; }
.wrapper-home .slide-our-client .slick-next::before,
.wrapper-home .slide-our-client .slick-prev::before{  content: " "; }

.wrapper-home .slide-our-client .slick-track { margin: 0px auto; }
.wrapper-home .slide-our-client .slick-dots { bottom: -40px; }
.wrapper-home .slide-our-client .slick-dots li { margin: 0 10px; }
.wrapper-home .slide-our-client .slick-dots li button { 
	height: 20px; 
	width: 20px; 
	margin-top: -5px; 
}
.wrapper-home .slide-our-client .slick-dots li button::before {
	background-color: rgb(255,255,255);
	border-radius: 50%;
	content: " ";
	height: 20px;
	width: 20px;
	border: 1px solid rgb(1,105,180);
	opacity: 1;
}
.wrapper-home .slide-our-client .slick-dots li.slick-active button::before { 
	opacity: 1; 
	background-color: rgb(1,105,180); 
}
.wrapper-home .slide-our-client .slick-list > div > div {
	margin: 0 auto;
}
/* 	==========================================================================
2.8. SECTION  GET StART NOW
========================================================================== */
.wrapper-home .get-start-now { 
	width: 100%; 
	height: 260px; 
	position: relative; 
	color: #ffffff; 
	float: left;
	background-image: url('../images/career.jpg');
	background-position: center;
}
.wrapper-home .get-start-now .mask { 
	background-color: rgba(37,163,159,0.7); 
	position: absolute; 
	height: 100%; 
	width: 100%; 
}
.wrapper-home .get-start-now .mask .title { margin-top: 70px; }
.wrapper-home .get-start-now .mask .btn-default { 
	background-color: #1b9792;
	border: 1px solid #1b9792;
	border-radius: 0;
	color: #ffffff;
	height: 50px;
	line-height: 30px;
	margin: 0 5px;
	padding: 10px 16px;
	position: relative;
	float: left;
	margin-top: 140px;
}
.wrapper-home .get-start-now .mask .btn-default:hover {
	background-color:#156bb5;
	color: #fff;
	border-color: #156bb5;
}
.wrapper-home .get-start-now .mask .title h3:lang(en) { 
	margin: 0; 
	font-size: 30px; 
	text-align: left;
	margin-bottom: 30px;
}
.wrapper-home .get-start-now .mask .title h3:lang(km) { 
	margin: 0; 
	font-size: 30px; 
	margin-bottom: 30px;
	text-align: left;
}
.wrapper-home .get-start-now .mask .title p:lang(km) { 
	padding-right: 65px; 
	text-align: left;  
}
.wrapper-home .get-start-now .mask .button-choose h4 { 
	font-size: 25px; 
	text-align: center;  
	margin-bottom: 20px; 
}

/* 	==========================================================================
==========================================================================
								TABLATE
==========================================================================
========================================================================== */

@media only screen 	and (min-device-width : 768px) and (max-device-width : 1200px){
.wrapper-home .welcome .pourpose,
.wrapper-home .welcome .benefit,
.wrapper-home .welcome .career-finder { 
	padding: 0; 
	overflow: hidden;
}
.wrapper-home .assessment .title-category { font-size: 18px; }

.wrapper-home .assessment .disc img, 
.wrapper-home .assessment .skill img, 
.wrapper-home .assessment .career-value img { 
	height: 150px; 
}
.wrapper-home .assessment .skill { margin: 0 5px; }
.wrapper-home .assessment .career-value { margin-left: 10px; }

.all-latest-jobs .type-title { font-size: 18px; }
.row.all-latest-jobs ul li {
	color: #222222;
	font-size: 16px;
	line-height: 20px;
	text-align: center;
}

.wrapper-home .get-start-now { height: 350px; }
.wrapper-home .get-start-now .mask { 
	text-align: center; 
	padding-top: 120px;
}
.wrapper-home .get-start-now .mask .title p:lang(km) { 
	padding-right: 10px; 
	text-align: left;  
}
.wrapper-home .get-start-now .mask .title h3 { 
	font-size: 30px;  
}
.wrapper-home .get-start-now .mask .chat { 
	margin-bottom: 20px; 
}
.wrapper-home .get-start-now .mask .title {
	margin-top: 0;
}
.section{ padding: 30px 0 !important }
.hero-banner {
	background-size: cover !important;
	height: 250px !important;
	margin-top: 100px !important;
}

}
@media only screen 	and (min-width : 768px) and (max-width : 992px){
.wrapper-home .assessment .row .col-sm-4 div.disc .description:lang(km){ height: 175px;}
.wrapper-home .assessment .row .col-sm-4 div.disc .description:lang(en){ height: 150px}

.wrapper-home .get-start-now { height: 420px; }
.wrapper-home .get-start-now .mask {
	text-align: center;
	padding-top: 60px;
}
.wrapper-home .get-start-now .mask .title h3 { text-align: center !important; }
.wrapper-home .get-start-now .mask .btn-default{
	float: none;
	margin-top: 25px;
}
.wrapper-front-end .footer-top .social { padding-left: 0}
.wrapper-front-end .footer-top .social > ul{padding-top: 10px}
.wrapper-front-end .footer-top .contact > ul { padding-top: 35px; }
.wrapper-front-end .footer-top .social img {  width: 30px; }

}

@media only screen 	and (min-width : 992px) and (max-width : 1024px){
.wrapper-home .assessment .row .col-sm-4 div.disc .description{ height: 150px;}

.wrapper-home .get-start-now .mask .title p:lang(en) { 
	text-align: left; 
}
.wrapper-home .get-start-now .mask .btn-default {
	color: #ffffff;
	margin: 70px 0;
	position: relative;
	float: none;
}
}