/*SWITCH BUTTON*/
.switch {
    position: relative;
    display: inline-block;
    width: 70px;
    height: 34px;
}

    .switch input {
        display: none;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background-color: #ca2222;*/
    background-color: darkblue;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: darkblue;
    /*background-color: #2ab934;*/
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(35px);
    -ms-transform: translateX(35px);
    transform: translateX(35px);
}

/*------ ADDED CSS ---------*/
.on {
    display: none;
}

.on {
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 35%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

.off {
    color: white;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 65%;
    font-size: 10px;
    font-family: Verdana, sans-serif;
}

input:checked + .slider .on {
    display: block;
}

input:checked + .slider .off {
    display: none;
}

/*--------- END --------*/

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }
/*SWITCH BUTTON*/

/*rotate text*/
.csstransforms270 {
    border-left: 34px solid #369;
    padding-left: 10px;
    /* Abs positioning makes it not take up vert space */
    position: absolute;
    top: 0;
    left: 0;
    /* Border is the new background */
    background: none;
    /* Rotate from top left corner (not default) */
    transform-origin: 0 0;
    transform: rotate(270deg);
    -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
}

.OnlyMobile {
    display: none;
}

.section2Head {
    display: flex;
    justify-content: center;
    padding: 100px 0 50px 0;
}

.section2h3 {
    line-height: 2 !important
}

.newsItem {
    margin-bottom:10px;
}

.newsImage {
    -webkit-box-shadow: 10px 10px 10px -6px #cccaca;
    -moz-box-shadow: 10px 10px 10px -6px #cccaca;
    box-shadow: 10px 10px 10px -6px #cccaca;
}

/*padding custom
================================================================================================================
*/
.padding-100 {
    padding: 100px 0;
}

.padding-buttom-100{
    padding:0 0 100px 0;
}
.padding-buttom-aja-100 {
    padding-bottom: 100px;
}

.padding-top-100 {
    padding-top: 100px;
}
.padding-top-50 {
    padding-top: 50px;
}
.padding-top-10 {
    padding: 10px 0;
}
.padding-top-5 {
    padding-top: 5px;
}

.padding-0{
    padding:0;
}
.padding-left-0 {
    padding-left: 0px;
}
.padding-left-10 {
    padding-left: 10px;
}
.padding-right-0 {
    padding-right: 0px;
}
.padding-right-30 {
    padding-right: 30px;
}

.fa-10x{font-size:10em}

.hr-custom{
    max-width: none;
    border-color: #eee;
    border-width: thin;
}
/*margin custom
================================================================================================================
*/
.margin-top-40{
    margin-top:40px;
}
.margin-bottom-15{
    margin-bottom:15px;
}
.margin-bottom-100{
    margin-bottom: 100px;
}


/*header image
================================================================================================================
*/
    #Visimisi-header{
        background-image:url('../img/Visi Misi.webp');
    }

    #AboutUs-header{
        background-image:url('../img/Profil Perusahaan.webp');
    }

    .bg-header{
        overflow: hidden;
        height: 250px;
        /*background-attachment: fixed;*/
        background-position:center 10%;
        background-size: cover;
        margin-bottom:40px;

        -webkit-animation: mymove 9s infinite; /* Chrome, Safari, Opera */
        animation: mymove 8s;
        /*	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;*/

        -moz-box-shadow: inset 0 -10px 30px -10px #000000;
        -webkit-box-shadow: inset 0 -10px 30px -10px #000000;
        box-shadow: inset 0 -10px 30px -10px #000000;
        /*animation: mymove 8s infinite;*/
    }
    /* Chrome, Safari, Opera */
    /*@-webkit-keyframes mymove {
        80% {
             background-position: center;
        }
    }*/

    /* Standard syntax */
    /*@keyframes mymove {
        80% {
            background-position: center;
        }
    }*/


/*gimik css
================================================================================================================
*/

.img-icon{
    width:50%;
}

.img-icon2 {
    width: 80%;
}

/*footer image css
================================================================================================================
*/

    .bg-footer{
        overflow: hidden;
        height: 450px;
        /*background-attachment: fixed;*/
        background-position:center 10%;
        background-size: cover;
        /*margin-bottom:40px;*/

        -webkit-animation: mymove 9s infinite; /* Chrome, Safari, Opera */
        animation: footer-move 8s;

    }
     /*Chrome, Safari, Opera*/
    @-webkit-keyframes footer-move {
        50% {
             background-position: center;
        }
    }

     /*Standard syntax*/
    @keyframes footer-move {
        50% {
            background-position: center;
        }
    }

/*banner image css
================================================================================================================
*/

.caption-bg {
    left: 0;
    right: 0;
    bottom: 0;
    text-align: left;
    padding: 10px;
    background: rgba(255, 255, 255, 0.6);
    text-shadow: none;
}

.custom-banner .item .carousel-caption a{
    border:solid 1px;
    padding: 10px 20px;
}
.custom-banner .item .carousel-left a{
        border: solid 1px;
        padding: 10px 20px;
    }


/*thumbnail produk css
================================================================================================================
*/

.btn-pref-red,
.btn-pref-red:focus,
.btn-pref-red:hover,
.btn-pref-red:active,
.btn-pref-red:after{
    background-color:#035675;
    color:#ffffff;
    border-color:transparent !important;
}
::-webkit-scrollbar {
    width: 12px;
    display:inline-block;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(33,151,195,0);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color:#2197C3;
    -webkit-box-shadow: inset 0 0 6px rgba(33,151,195,0);
}
.p-scroll{
    margin-bottom: 10px;
    width: 100%;
    height: 150px;
    overflow: scroll;
}


.btn-pref .btn {
    -webkit-border-radius:0 !important;
}

/*video css
================================================================================================================
*/

.hide-bullets {
    list-style:none;
    margin-left: -40px;
    margin-top:20px;
}

.embed-responsive-item{
    width:100%;
    height:500px;
}

/*client css
================================================================================================================
*/

    #client{
        background-color:#ddd;
        background-image:url(../img/bg.png);
        padding:0px;
    }

.media-carousel
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
}
/* Previous button  */
.media-carousel .carousel-control.left
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Next button  */
.media-carousel .carousel-control.right
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active
{
  background: #333333;
}
.media-carousel img
{
  width: 250px;
  height: 100px
}

.img-logo{

    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);

}

.img-logo:hover{

    -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */
    filter: grayscale(0%);
}

/*modal css
================================================================================================================
*/
.modal-dialog img {
    width:100%;
}
.modal-dialog {width:95%;}
.modal-dialog a {max-width:100%;}

.modal-dialog .portfolio-box .portfolio-box-caption{
    background-color:rgba(0, 0, 0, 0.38);
}

/*contact css
================================================================================================================
*/

.well .glyphicon {  margin-bottom: 10px;margin-right: 10px;}

.well small {
    display: block;
    line-height: 1.428571429;
    color: #999;
}

/*promo css
================================================================================================================
*/

.promo{
    padding:10px;
}

/*carousel css
================================================================================================================
*/

.carousel-inner .item img {
    width: 100%;
    position:relative;
}

/* Bottom left text */
.bottom-left {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background-color:darkorange;
}

.MenuTitle {
    margin: 10px 10px 10px 10px !important;
    font-family:Arial;
}

/*well custom
================================================================================================================*/

.well-custom{
    border:none;
    margin-bottom:0;
}

/*career accordion custom
================================================================================================================
*/
#accordion .panel-heading { padding: 0;}
#accordion .panel-title > a {
	display: block;
	padding: 0.4em 0.6em;
    outline: none;
    font-weight:bold;
    text-decoration: none;
}

#accordion .panel-title > a.accordion-toggle::before, #accordion a[data-toggle="collapse"]::before  {
    content:"\e113";
    float: left;
    font-family: 'Glyphicons Halflings';
	margin-right :1em;
}
#accordion .panel-title > a.accordion-toggle.collapsed::before, #accordion a.collapsed[data-toggle="collapse"]::before  {
    content:"\e114";
}

/*Top navigasi
================================================================================================================
*/

.nav-dropdown{
    padding: 0 0 0 15px;
}

.nav-dropdown select{
    font-size:smaller;
}

.select-language {
    /*margin-top: 15px;*/
    margin-left: 5px;
    color: black;
}

#top-nav{
    position: sticky;
    top: 0;
    height: 20px;
    z-index: 200;
    width:100%;
    padding:0 20px 0 20px;
}

#top-nav ul>li>a {
    padding:0 0 0 15px;
}

nav{
    /*top:20px !important;*/
}

/*Mega menu navigasi
================================================================================================================
*/

.navbar-default .vertical-middle{
    vertical-align:middle;
    /*font-size:25px;*/
    font-size:30px;
    /*margin-right:5px;*/
}

.navbar-default .dropdown .dropdown-menu a:hover{
    color:#00ADEF;
    text-decoration:none;
}

.navbar-default .subnav-item{
        /*margin: 10px 14px 10px 0;*/
        width: 100%;
        float: left;
        color: #000000;
}

    .navbar-default .subnav-item img {
        width: 70px;
        height: 70px;
        float: left;
        /*margin-right: 12px;*/
    }

.nav-padding{
    padding:15px 15px 15px 15px;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
    color:#fff;
    background-color:transparent;
    border-bottom:1px solid;
    border-bottom-color:#fff;
}

.nav-bg .open > a, .nav-bg .open > a:hover, .nav-bg .open > a:focus{
    background-color:transparent;
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

.mega-dropdown {
  position: static !important;
}
.mega-dropdown-menu {
    padding: 20px 0px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;
}
.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
  display: block;
  color: #222;
  padding: 3px 5px;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: none;
}
.mega-dropdown-menu .dropdown-header {
  font-size: 18px;
  color: #ff3546;
  padding: 5px 60px 5px 5px;
  line-height: 30px;
}

.min-carousel {
  width: 30px;
  height: 30px;
  top: -35px;
  background-image:none;
}
.left.min-carousel {
  right: 30px;
  left: inherit;
}
.min-carousel .glyphicon-chevron-left,
.min-carousel .glyphicon-chevron-right {
  font-size: 12px;
  background-color: #fff;
  line-height: 30px;
  text-shadow: none;
  color: #333;
  border: 1px solid #ddd;
}

 .carousel-control.left.min-carousel,
 .carousel-control.right.min-carousel {
  background-image:none;
}


/*footer menu navigasi
================================================================================================================
*/


.full {
    width: 100%;
}
.gap {
	height: 30px;
	width: 100%;
	clear: both;
	display: block;
}
.footer {
    background: #323e66;
    height: auto;
    padding-bottom: 20px;
    position: relative;
    width: 100%;
    /*border-bottom: 1px solid #CCCCCC;*/
}
.footer p {
	margin: 0;
}
.footer img {
	max-width: 100%;
}
.footer h3 {
	border-bottom: 1px solid #BAC1C8;
	color: #2197C3;
	font-size: 15px;
	font-weight: 600;
	/*line-height: 27px;*/
	padding: 20px 0 10px;
	text-transform: uppercase;
}
.footer ul {
	font-size: 13px;
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
	margin-top: 15px;
	color: #7F8C8D;
}
.footer ul li a {
	padding: 0 0 5px 0;
	display: block;
}
.footer a {
	color: #fff;
}
.supportLi h4 {
	font-size: 20px;
	font-weight: lighter;
	line-height: normal;
	margin-bottom: 0 !important;
	padding-bottom: 0;
}
.newsletter-box input#appendedInputButton {
	background: #FFFFFF;
	display: inline-block;
	float: left;
	height: 30px;
	clear: both;
	width: 100%;
}
.newsletter-box .btn {
	border: medium none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	height: 40px;
	padding: 0;
	width: 100%;
	color: #fff;
}
.newsletter-box {
	overflow: hidden;
}
.bg-gray {
	background-image: -moz-linear-gradient(center bottom, #BBBBBB 0%, #F0F0F0 100%);
	box-shadow: 0 1px 0 #B4B3B3;
}
.social li {
	background: none repeat scroll 0 0 #ff3546;
	border: 2px solid #ff3546;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%;
	float: left;
	height: 36px;
	line-height: 36px;
	margin: 0 8px 0 0;
	padding: 0;
	text-align: center;
	width: 36px;
	transition: all 0.5s ease 0s;
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	-ms-transition: all 0.5s ease 0s;
	-o-transition: all 0.5s ease 0s;
}
.social li:hover {
	transform: scale(1.15) rotate(360deg);
	-webkit-transform: scale(1.1) rotate(360deg);
	-moz-transform: scale(1.1) rotate(360deg);
	-ms-transform: scale(1.1) rotate(360deg);
	-o-transform: scale(1.1) rotate(360deg);
}
.social li a {
	color: #EDEFF1;
}
.social li:hover {
	border: 2px solid #2c3e50;
	background: #2c3e50;
}
.social li a i {
	font-size: 16px;
	margin: 0 0 0 5px;
	color: #EDEFF1 !important;
}
.footer-bottom {
	background: #021821;
	/*border-top: 1px solid #DDDDDD;*/
	padding-top: 10px;
	padding-bottom: 10px;
    color:#7F8C8D;
}
.footer-bottom p.pull-left {
	padding-top: 6px;
}
.payments {
	font-size: 1.5em;
}


/*chat icon
================================================================================================================
*/

#tawkchat-iframe-container{
    right: 50px !important;

}

.comment-chat{
    overflow:scroll;
    height:400px;
}


.btn-red {
    border-color: #00ADEF;
    color: #fff;
    background-color: #ff3546;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
}

.btn-red:hover,
.btn-red:focus,
.btn-red.focus,
.btn-red:active,
.btn-red.active,
.open > .dropdown-toggle.btn-red {
    border-color: #ed431f;
    color: #fff;
    background-color: #77030D;
}

.btn-red:active,
.btn-red.active,
.open > .dropdown-toggle.btn-red {
    background-image: none;
}

.btn-red.disabled,
.btn-red[disabled],
fieldset[disabled] .btn-red,
.btn-red.disabled:hover,
.btn-red[disabled]:hover,
fieldset[disabled] .btn-red:hover,
.btn-red.disabled:focus,
.btn-red[disabled]:focus,
fieldset[disabled] .btn-red:focus,
.btn-red.disabled.focus,
.btn-red[disabled].focus,
fieldset[disabled] .btn-red.focus,
.btn-red.disabled:active,
.btn-red[disabled]:active,
fieldset[disabled] .btn-red:active,
.btn-red.disabled.active,
.btn-red[disabled].active,
fieldset[disabled] .btn-red.active {
    border-color: #00ADEF;
    background-color: #00ADEF;
}

.btn-red .badge {
    color: #00ADEF;
    background-color: #fff;
}

/*features home event slider
================================================================================================================
*/

#myCarousel-2 .carousel-caption {
    left:0;
	right:0;
	bottom:0;
	text-align:left;
	padding:10px;
	background:rgba(0,0,0,0.6);
	text-shadow:none;
}

#myCarousel-2 .list-group {
	position:absolute;
	top:0;
	right:0;
}
#myCarousel-2 .list-group-item {
	border-radius:0px;
	cursor:pointer;
}
#myCarousel-2 .list-group .active {
    border:none;
	background-color:#fff;
    color:#2197C3;

    -moz-box-shadow: inset 0 -10px 30px -10px #000000;
        -webkit-box-shadow: inset 0 -10px 30px -10px #000000;
        box-shadow: inset 17px -8px 25px -17px #000000;
}

@media (min-width: 992px) {
	#myCarousel-2 {padding-right:33.3333%;}
	#myCarousel-2 .carousel-controls {display:none;}
}
@media (max-width: 991px) {
	.carousel-caption p,
	#myCarousel-2 .list-group {display:none;}
}

/*image thumbnail
================================================================================================================
*/

.btn-pref .btn:hover, .btn:focus, .btn.focus {
    color: #777;
    text-decoration: none;
}

.captionbanner {
    left: 85% !important;
    padding-bottom: 0px;
}



/*e-brochure
================================================================================================================
*/

    .info-desc{
        font-size: 13px;
        color: #777777;
        min-height: 52px;
        max-height: 52px;
        overflow: hidden;
    }

    .event-list {
		list-style: none;
		font-family: 'Lato', sans-serif;
		margin: 0px;
		padding: 0px;
	}
	.event-list > li {
		background-color: rgb(255, 255, 255);
		box-shadow: 0px 0px 5px rgb(51, 51, 51);
		box-shadow: 0px 0px 5px rgba(51, 51, 51, 0.7);
		padding: 0px;
		margin: 0px 0px 20px;
	}
	.event-list > li > time {
		display: inline-block;
		width: 100%;
		color: rgb(255, 255, 255);
		background-color: rgb(197, 44, 102);
		padding: 5px;
		text-align: center;
		text-transform: uppercase;
	}
	.event-list > li:nth-child(even) > time {
		background-color: rgb(165, 82, 167);
	}
	.event-list > li > time > span {
		display: none;
	}
	.event-list > li > time > .day {
		display: block;
		font-size: 56pt;
		font-weight: 100;
		line-height: 1;
	}
	.event-list > li time > .month {
		display: block;
		font-size: 24pt;
		font-weight: 900;
		line-height: 1;
	}
	.event-list > li > img {
		width: 100%;
	}
	.event-list > li > .info {
		padding-top: 5px;
		text-align: center;
	}
	.event-list > li > .info > .title {
		font-size: 17pt;
		font-weight: 700;
		margin: 0px;
	}
	.event-list > li > .info > .desc {
		font-size: 13pt;
		font-weight: 300;
		margin: 0px;
	}
	.event-list > li > .info > ul,
	.event-list > li > .social > ul {
		display: table;
		list-style: none;
		margin: 10px 0px 0px;
		padding: 0px;
		width: 100%;
		text-align: center;
	}
	.event-list > li > .social > ul {
		margin: 0px;
	}
	.event-list > li > .info > ul > li,
	.event-list > li > .social > ul > li {
		display: table-cell;
		cursor: pointer;
		color: rgb(30, 30, 30);
		font-size: 11pt;
		font-weight: 300;
        padding: 3px 0px;
	}
    .event-list > li > .info > ul > li > a {
		display: block;
		width: 100%;
		color: rgb(30, 30, 30);
		text-decoration: none;
	}
    .event-list > li > .social > ul > li {
        padding: 0px;
    }
    .event-list > li > .social > ul > li > a {
        padding: 3px 0px;
	}
	.event-list > li > .info > ul > li:hover,
	.event-list > li > .social > ul > li:hover {
		color: rgb(30, 30, 30);
		background-color: rgb(200, 200, 200);
	}
	.facebook a,
	.twitter a,
	.google-plus a {
		display: block;
		width: 100%;
		color: rgb(75, 110, 168) !important;
	}
	.twitter a {
		color: rgb(79, 213, 248) !important;
	}
	.google-plus a {
		color: rgb(221, 75, 57) !important;
	}
	.facebook:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(75, 110, 168) !important;
	}
	.twitter:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(79, 213, 248) !important;
	}
	.google-plus:hover a {
		color: rgb(255, 255, 255) !important;
		background-color: rgb(221, 75, 57) !important;
	}

	@media (min-width: 768px) {
        .navMenu {
            display: flex;
            justify-content: center;
            background-color: darkblue;
            margin-top: 10px;
        }

		.event-list > li {
			position: relative;
			display: block;
			width: 100%;
			height: 120px;
			padding: 0px;
		}
		.event-list > li > time,
		.event-list > li > img  {
			display: inline-block;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 120px;
			float: left;
		}
		.event-list > li > .info {
			background-color: rgb(245, 245, 245);
			overflow: hidden;
		}
		.event-list > li > time,
		.event-list > li > img {
			width: 120px;
			height: 120px;
			padding: 0px;
			margin: 0px;
		}
		.event-list > li > .info {
			position: relative;
			height: 120px;
			text-align: left;
			padding-right: 40px;
		}
		.event-list > li > .info > .title,
		.event-list > li > .info > .desc {
			padding: 0px 10px;
		}
		.event-list > li > .info > ul {
			position: absolute;
			left: 0px;
			bottom: 0px;
		}
		.event-list > li > .social {
			position: absolute;
			top: 0px;
			right: 0px;
			display: block;
			width: 40px;
		}
        .event-list > li > .social > ul {
            border-left: 1px solid rgb(230, 230, 230);
        }
		.event-list > li > .social > ul > li {
			display: block;
            padding: 0px;
		}
		.event-list > li > .social > ul > li > a {
			display: block;
			width: 40px;
			padding: 10px 0px 9px;
		}
	}




/*custom button chat and scroll top
================================================================================================================
*/

.btn-group .btn-sm{
  position: relative;
  vertical-align: center;
  margin: 0px;
  height: 100x;
  padding: 10px 15px;
  font-size: 4px;
  color: white;
  text-align: center;
  text-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
  background: #2197c3;
  border: 0;
  border-bottom: 3px solid #9FE8EF;
  cursor: pointer;
  -webkit-box-shadow: inset 0 -3px #9FE8EF;
  box-shadow: inset 0 -3px #9FE8EF;
}

.btn-group .btn-sm:active {
  top: 2px;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-group .btn-sm:hover {
  background: #00adef;
}

.btn-group.dropup {
    position: fixed;
    right: 10px;
    bottom: 0;
    z-index: 200;
}



/*custom pagination
================================================================================================================
*/

#pagination-table td{
    border:none;
}




#services {
  /*background: #000 url(../images/services/bg_services.png);*/
  /*background: #c34ceb url(../img/office3.png);*/
  background: #000 url(../img/office3.png);
  background-size: cover;
}

#services .lead,
#services h2{
  color: #fff;
}

.services-wrap {
  padding: 40px 30px;
  /*iko*/
  /*background: #fff;*/
  /*background: #d0e4f8;*/
  /*border-radius: 4px;*/
  border-radius: 0px;
  margin: 0 0 40px;
}

.services-wrap h3 {
  font-size: 20px;
  margin: 10px 0;
}

.services-wrap .pull-left {
  margin-right: 20px;
}
.services-wrap .pull-center {
  margin-right: 70px;
}

.label-language {
    margin-top: 15px;
    margin-left: 15px;
    font-weight: 700;
}

.label-language label-mobile {
    color: #222;
}

/*.label-language:hover {
    color:#00ADEF;
}*/
.navbar-default .nav > li > label, .navbar-default .nav > li > label {
    color: white;
}
.navbar-default .nav > li > label:hover,
.navbar-default .nav > li > label:focus:hover {
    color: #fff;
}

.navbar-default.affix .nav > li > label, .navbar-default.affix .nav > li > label {
    color: #fff;
}

.navbar-default.affix .nav > li > label:hover,
.navbar-default.affix .nav > li > label:focus:hover {
    color: #00ADEF;
}

.img-portfolio {
    padding-bottom: 20px;
    height: 396px;
}

.line-head-project {
    margin: 0px;
    padding: 2px 0px 2px 0px;
    color: #ffffff;
    background-color: darkblue;
/*    background-image: linear-gradient(to right, #00ADEF, #a7d8ea);*/
}

.img-article-depan {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    height: auto;
}

.judulartikel {
    font-size: 30px;
}
/*media 768px css
================================================================================================================
*/
@media (min-width: 768px) {
    header .header-content {
        position: relative;
        top: 50%;
        padding: 0 50px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .navbar-default {
        background-color: #2197C3;
        /*box-shadow: 0px 2px 30px #000000;*/
    }

    .navbar-default .nav > li.active > a, .navbar-default .nav > li.active > a:focus {
        color: #68CEE5 !important;
    }

    .navbar-default.affix .nav > li > a:hover, .navbar-default.affix .nav > li > a:focus:hover {
        color: #00ADEF;
    }

    .navbar-default.affix .navbar-header .navbar-brand

    .navbar-default.affix .navbar-nav > .open > a, .navbar-default.affix .navbar-nav > .open > a:hover, .navbar-default.affix .navbar-nav > .open > a:focus {
        background-color: transparent;
        border-bottom: 1px solid;
        border-bottom-color: #00ADEF;
        color: white;
    }

    /*.img-article-depan {
        width: 500px;
        height: 313px;
    }*/
}

@media (max-width: 13664px) {
    section {
        padding: 50px 0;
    }
    /*.img-article-depan {
        width: 500px;
        height: 313px;
    }*/
}

@media (max-width: 1024px) {
    section {
        padding: 100px 0;
    }
    .captionbanner {
        left: 75% !important;
    }
    /*.img-article-depan {
        width: 400px;
        height: 213px;
    }*/
}

@media (max-width: 768px) {
    .newsItem {
        margin-bottom: 5px;
    }
    .NotMobile {
        display: none;
    }
    .OnlyMobile {
        display: block;
    }
    .img-icon {
        width: 90%;
    }
    .navMenu {
        display: flex;
        justify-content:start;
        background-color: darkblue;
        margin-top: 10px;
    }

    .mega-dropdown .subnav-item h4 {
        font-size: 14px;
        color: #777;
    }
    .mega-dropdown-menu {
        padding: 5px 0 !important;
    }
    .mega-dropdown .media-left, .media > .pull-left {
        padding: 0;
    }
    .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus, .dropdown a:hover, .dropdown H4:hover {
        color: #00ADEF !important;
    }
    .mega-dropdown .subnav-item {
        margin: 5px 15px 5px 0 !important;
    }
    section {
        padding: 150px 0;
    }
    .captionbanner {
        left: 70% !important;
    }
    /*.img-article-depan {
        width: 500px;
        height: 313px;
    }*/
}


@media (max-width: 640px) {
    .img-icon {
        width: 100%;
    }
    .section2Head {
        display: flex;
        justify-content: center;
        padding: 20px 0 10px 0;
    }
    .section2h1{
        font-size:15px !important;
        margin:0;
        padding:0;
    }
    .section2h3 {
        font-size: 14px !important;
        line-height: 1.5 !important
    }
    .navbar-default .nav > li > label, .navbar-default .nav > li > label {
        color: white;
    }
    .captionbanner {
        left: 65% !important;
    }
    /*.img-article-depan {
        width: 400px;
        height: 213px;
    }*/

    .judulartikel {
        font-size: 20px;
    }
}