@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
h1,h2,h3,h4,h5,h6 {   font-family: 'Roboto', sans-serif;   }

a {
  color: #45aed6;
  -webkit-transition: color 400ms, background-color 400ms;
  -moz-transition: color 400ms, background-color 400ms;
  -o-transition: color 400ms, background-color 400ms;
  transition: color 400ms, background-color 400ms;
}
a:hover,
a:focus {
  text-decoration: none;
  color: #2a95be;
}


/*CONTAINER MAIN MENU */
#topmenu { background:#253a79; height:80px;    }
.container_TM{ padding:0 15%; margin-right:auto;margin-left:auto; }
.logocont{padding:0.8em 0; z-index:100; }
#containerTM{ padding:0 7%; background: #FFFFFF;   border-bottom:2px solid #253a79; -webkit-box-shadow: 0 0 55px 0 rgba(0,0,0,30);
box-shadow: 0 0 55px 0 rgba(0,0,0,30);}

#MSLIDE {margin-top:0px; border-bottom:0px solid  #FF0000;}


/*MAIN PAGE LAYOUT*/
#PAGE { min-height:350px; color: #666666; }
#PAGE h4{ font-size:1.3em; line-height:1.3em; }



.pagedpn { background: #FFFFFF; margin:5% 0;}
#Company_pg { background:#f6f6f6; padding:0.5% 0 5% 0;}
/*PAGE*/
#MContact{
  background: #242a33 url(../images/MContact.jpg) no-repeat 50% 50%;
  background-size: cover;
  color: #fff;
  padding:15% 0  ;
}
/*MAbout*/
#MAbout {
  background: #242a33 url(../images/MAbout.jpg) no-repeat 50% 50%;
  background-size: cover;
  color: #fff;
  padding:15% 0  ;
}

#MAbout .btn {  margin-top: 10px;}
#MAbout h2 {  color: #fff;  font-size: 44px;  line-height: 1;}
#MAbout h2 > span {  color: #FDD700;}
#MAbout h2 > small {  color: #FFF;}

/*Mphilos*/
#Mphilos {
  background: #242a33 url(../images/lovina.jpg) no-repeat 50% 50%;
  background-size: cover;
  color: #fff;
  padding:15% 0;
}

#Mphilos .btn {
  margin-top: 10px;
}
#Mphilos h2 {
  color: #fff;
  font-size: 44px;
  line-height: 1;
}
#Mphilos h2 > span {
  color: #FDD700;
}
#Mphilos h2 > small {
  color: #FFF;
}

/*Mcareer*/
#Mcareer {
  background: #242a33 url(../images/Mcareer.jpg) no-repeat 50% 50%;
  background-size: cover;
  color: #fff;
  padding:5% 0;
}

#Mcareer .btn {
  margin-top: 10px;
}
#Mcareer h2 {
  color: #fff;
  font-size: 44px;
  line-height: 1;
}
#Mcareer h2 > span {
  color: #FDD700;
}
#Mcareer h2 > small {
  color: #FFF;
}

/*CAREER CON*/
.CN-career h2 {
  font-size: 22px; 
  font-weight:600;
   
}

.career-con {
  background-size: cover;
  /*color: #fff;*/
  /*text-align:justify; */
  padding: 70px 0 110px 0;
}
.career-con ul{
list-style: none;line-height:0.5; margin-left:-40px;
}
.career-con li {
line-height:1;  
}

.career-con h4 {
  font-size: 24px;
  color: #333333;
  line-height: 1;
}
.career-con strong {
  font-size: 20px;
  line-height: 1; font-style:italic;
}



/*CTA2*/
#cta2 {
  background: #242a33 url(../images/cta1-bg.jpg) no-repeat 50% 50%;
  background-size: cover;
  color: #fff;
  padding: 110px 0 110px 0;
}

#cta2 .btn {
  margin-top: 10px;
}
#cta2 h2 {
  color: #fff;
  font-size: 28px;
  line-height: 1;
}

#cta2 h2 > span {
  color: #84ecff;
}

/*ABOUT CONT*/
.about-con {
  background-size: cover;
  /*color: #fff;*/
  text-align:justify;
  padding: 70px 0  0px 0;
}
.about-con h4 {
  font-size: 24px;
  text-transform:uppercase;
  color: #333333;
  line-height: 1;
}
.about-con h4 > a{
  font-size: 20px;
  text-transform: capitalize;
  text-decoration:underline;
  color: #333333;
  line-height: 1;
}
.about-con h4 > a:hover{
  color: #999999;
}
.about-con ul {
list-style:  decimal;
}
.about-con li > a{
  color: #333333;
  line-height: 1;
}
.about-con li > a:hover{
  color: #2ebcc2;
  }
.about-con strong {
  font-size: 16px;
  line-height: 1; font-style:italic;
}
/*CTA3*/
#cta3 {
  background: #242a33 url(../images/cta3-bg.jpg) no-repeat 50% 50%;
  background-size: cover;
  color: #fff;
  padding: 20px 0 70px 0;
}

#cta3 h2 {
  color: #fff;
  font-size: 38px;
  line-height: 1;
}
#cta3 h2 > span {
  color: #00c4e7;
}

#PAGEbawah { position: relative; overflow: hidden;  }
#PAGEbawah .container-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(37,58,121, 0.6);/* Map Color*/
  z-index: 1;
}
.pagebawah-map {height:550px;  }

.pagebawah_con {background: rgba(255,255,255,0.90); padding-bottom:60px;}


/*FOOTER*/
footer {
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
  background: #444445;
}
#footer a {
  color: #fff;
}
#footer a:hover {
  color: #45aed6;
}
#footer ul {
  list-style: none;
  padding: 0;
  margin: 0 -7.5px;
}
#footer ul > li {
  display: inline-block;
  margin: 0 7.5px;
}
@media only screen and (min-width: 768px) {
  #footer .social-icons {
    float: right;
  }
}



#myCarousel .thumbnail {
	margin-bottom: 0;
}
.carousel-control.left, .carousel-control.right {
	background-image:none !important;
}
.carousel-control {
	color:#fff;
	top:40%;
	color:#428BCA;
	bottom:auto;
	padding-top:4px;
	width:30px;
	height:30px;
	text-shadow:none;
	opacity:1;
}
.carousel-control:hover {
	color: #d9534f;
}
.carousel-control.left, .carousel-control.right {
	background-image:none !important;
}
.carousel-control.right {
	left:auto;
	right:-32px;
}
.carousel-control.left {
	right:auto;
	left:-32px;
}

.carousel-indicators {
	/*bottom:-30px;*/
}
.carousel-indicators li {
	/*border-radius:0;*/
	width:12px;
	height:12px;
	background:#ccc;
	border:1px solid #ccc;
	-webkit-border-radius: 12px;
	border-radius: 12px;
}
.carousel-indicators .active {
	width:12px;
	height:12px;
	background:#3276b1;
	border-color:#3276b1;
}

/*MAIN SLIDER*/
#main-slider {
  overflow: hidden;
}
#main-slider .item {
  height: 643px;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}
#main-slider .slider-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}



#main-slider .slider-inner h2 {
  margin-top: 270px;
  font-size: 36px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff; font-weight:600;
}
#main-slider .slider-inner h2 > span {
  color: #c4e9fc; 
}
#main-slider .slider-inner .btn {
  margin-top: 10px;
}
#main-slider .owl-prev,
#main-slider .owl-next {
  position: absolute;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 30px;
  display: inline-block;
  margin-top: -35px;
  height: 70px;
  width: 70px;
  line-height: 70px;
  text-align: center;
  border-radius: 100px;
  z-index: 5;
  -webkit-transition: background-color 400ms;
  transition: background-color 400ms;
}
#main-slider .owl-prev:hover,
#main-slider .owl-next:hover {
  background-color: #062640;
}
#main-slider .owl-prev {
  left: -35px;
  text-indent: 14px;
}
#main-slider .owl-next {
  right: -35px;
  text-indent: -14px;
}
#bar {
  width: 0%;
  max-width: 100%;
  height: 4px;
  background: #01deff;/*Loading color */
}
#progressBar {
  margin-top: -4px;
  position: relative;
  z-index: 999;
  width: 100%;
  background: rgba(0, 0, 0, 0.1);
}

@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#topmenu { background:#FFFFFF; height:80px;    }
.container_TM{ padding:0 0%; background:#FFFFFF;}
#containerTM{ background: #FFFFFF;  -webkit-box-shadow: 0 5px 15px 0 rgba(0,0,0,0.30);
box-shadow: 0 5px 15px 0 rgba(0,0,0,0.30);}
}


.section-header {
  margin-bottom: 50px;
}
.section-header .section-title {
  font-size: 44px;
  color: #272727;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 20px;
  margin: 0 0 20px;
}
.section-header .section-title:before {
  content: "";
  position: absolute;
  width: 140px;
  bottom: 0;
  left: 50%;
  margin-left: -70px;
  height: 1px;
  background: #ebebeb;
}
.section-header .section-title:after {
  content: "";
  position: absolute;
  width: 24px;
  height: 24px;
  bottom: -11px;
  left: 50%;
  margin-left: -12px;
  border: 5px solid #fff;
  border-radius: 20px;
  background: #45aed6;
}
.column-title {
  margin-top: 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  position: relative;
}
.column-title:after {
  content: " ";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40%;
  border-bottom: 1px solid #45aed6;
}