/* When you mouse over the card, the overlay text will "zoom, fade, left, right, bottom, top" in display */

a{

	text-decoration:none;

}

.parallax {

	min-height: 500px; 

	/* Create the parallax scrolling effect */

	background-attachment: fixed;

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;

}

.dropdown.search{

	position:static;

}



.bs-b5{

	box-shadow: 0px 5px 10px 0px #000;	

}



.bgMulti {

	background-position: left 1px top 1px, right 1px top 1px, right 1px bottom 1px, left 1px bottom 1px, center center;

	background-repeat: no-repeat;

	background-size: 20%, 20%, 20%, 20%, cover;

	padding: 15px;

}

.bgX {

	background-position: left center, right center, center center;

	background-repeat: no-repeat;

	background-size: 40%, 40%, cover;

	padding: 15px;

}

.bgY {

	background-position: top center, bottom center, center center;

	background-repeat: no-repeat;

	background-size: 100%, 100%, cover;

	padding: 15px;

}

.bgT {

	background-position: top center, center center;

	background-repeat: no-repeat;

	background-size: 100%, cover;

	padding: 15px;

}

.bgB {

	background-position: bottom center, center center;

	background-repeat: no-repeat;

	background-size: 100%, cover;

	padding: 15px;

}

.bgR {

	background-position: right center, center center;

	background-repeat: no-repeat;

	background-size: 40%, cover;

	padding: 15px;

}



.bgL {

	background-position: left center, center center;

	background-repeat: no-repeat;

	background-size: 40%, cover;

	padding: 15px;

}

.xy-hidden{

	width:100%;

	overflow-x:hidden;

	overflow-y:hidden;

}

.y-hidden{

	width:100%;

	overflow-y:hidden;

}

.x-hidden{

	width:100%;

	overflow-x:hidden;

}



@font-face {

	font-family: 'jonathanregular';

	src: url('jonathan-webfont.woff2') format('woff2'),

	url('jonathan-webfont.woff') format('woff');

	font-weight: normal;

	font-style: normal;

	

}

/*===== Blog Style 2 =====*/



.post-img2 > a {display: block;}



.post-img2 > a:before {

	

	content: "";

	

	position: absolute;

	

	left: 0;

	

	top: 0;

	

	bottom: 0;

	

	right: 0;

	

	background-color: #000;

	

	opacity: 0;

	

	z-index: 1;

	

}



.post-style2:hover .post-img2 > a::before {opacity: .2;}



.post-style2:hover .post-img2 > a img {

	

	-webkit-transform: scale(1.07) rotate(2deg);

	

	-ms-transform: scale(1.07) rotate(2deg);

	

	-o-transform: scale(1.07) rotate(2deg);

	

	transform: scale(1.07) rotate(2deg);

	transition: 0.7s;

}



.post-info2 {

	

	border: 1px solid #e6ddef;

	

	padding: 1.875rem 2.1875rem 2rem;

	

}



.post-info2 > h3 {

	

	font-size: 1.5rem;

	

	line-height: 2rem;

	

	font-weight: 600;

	

}



.post-info2 > h3 + .post-meta2 {margin-top: 0.8125rem;}



.post-meta2 > span.post-date {

	

	padding: 0;

	

	font-size: 1.125rem;

	

	text-transform: uppercase;

	

	font-weight: 500;

	

	border-bottom: 2px solid;

	

	display: inline-block;

	

}



.post-meta2 > span.post-date:before {

	

	display: none;

	

	padding: 0;

	

}

.post-cmt {text-align: center;display: inline-block;color: #fff;background-color: var(--color4);-webkit-border-radius: 0.8125rem;border-radius: 0.8125rem;width: 2.5rem;line-height: 2.0625rem;position: relative;}



.post-meta2 .post-date + .post-cmt {margin: 0 0 0 1.25rem;}



.post-meta2 .post-cmt {

	

	font-style: normal;

	

	border-radius: 3px;

	

	font-size: 1rem;

	

	font-family: Barlow;

	

	font-weight: 500;

	

	width: 1.75rem;

	

	line-height: 1.4375rem;

	

}



.post-meta2 .post-cmt:before {left: 0;}



.post-meta2 + p {margin-top: 1.5625rem;}



.post-info2 > p {

	

	font-size: 1.0625rem;

	

	line-height: 1.75rem;

	

}



.post-info2 > p + .post-bottom {margin-top: 2.375rem;}



.post-bottom > a.thm-btn {line-height: initial;}



.post-social > i {

	

	font-size: 1.5rem;

	

	cursor: pointer;

	

}



.post-social .post-social-inner {

	

	bottom: 95%;

	

	padding-bottom: 0.625rem;

	

	width: 3.125rem;

	

	left: 50%;

	

	margin-left: -1.5625rem;

	

	-webkit-transform: translateY(2.5rem);

	

	-ms-transform: translateY(2.5rem);

	

	-o-transform: translateY(2.5rem);

	

	transform: translateY(2.5rem);

	

	opacity: 0;

	

	visibility: hidden;

	

}



.post-social-inner > a {

	

	width: 100%;

	

	display: block;

	

	color: #fff;

	

	text-align: center;

	

	border-width: 2px;

	

	border-style: solid;

	

	height: 3.125rem;

	

	line-height: 3.125rem;

	

	font-size: 1.125rem;

	

}



.post-social-inner > a:hover, 



.post-social-inner > a:focus {background-color: #fff;}



.post-social:hover .post-social-inner {

	

	opacity: 1;

	

	visibility: visible;

	

	-webkit-transform: translateY(0);

	

	-ms-transform: translateY(0);

	

	-o-transform: translateY(0);

	

	transform: translateY(0);

	

}



.post-style2:hover .post-info2 {border-color: transparent;}



.post-style2:hover {

	

	-webkit-box-shadow: 0 0 2.8125rem rgba(0,0,0,.08);

	

	-ms-box-shadow: 0 0 2.8125rem rgba(0,0,0,.08);

	

	-o-box-shadow: 0 0 2.8125rem rgba(0,0,0,.08);

	

	box-shadow: 0 0 2.8125rem rgba(0,0,0,.08);

	

}



/*=== Social Media ===*/



.facebook,



.facebook-hvr:hover,



.facebook-hvr:focus {

	

	background-color: #3b5999;

	

	border-color: #3b5999;

	

}



.twitter,



.twitter-hvr:hover,



.twitter-hvr:focus {

	

	background-color: #55acee;

	

	border-color: #55acee;

	

}



.pinterest,



.pinterest-hvr:hover,



.pinterest-hvr:focus {

	

	background-color: #bd081c;

	

	border-color: #bd081c;

	

}



.linkedin,



.linkedin-hvr:hover,



.linkedin-hvr:focus {

	

	background-color: #0077B5;

	

	border-color: #0077B5;

	

}



.youtube,



.youtube-hvr:hover,



.youtube-hvr:focus {

	

	background-color: #cd201f;

	

	border-color: #cd201f;

	

}



.instagram,



.instagram-hvr:hover,



.instagram-hvr:focus {

	

	background-color: #e4405f;

	

	border-color: #e4405f;

	

}



.vimeo,



.vimeo-hvr:hover,



.vimeo-hvr:focus {

	

	background-color: #8cbe0b;

	

	border-color: #8cbe0b;

	

}



.whatsapp,



.whatsapp-hvr:hover,



.whatsapp-hvr:focus {

	

	background-color: #00e676;

	

	border-color: #00e676;

	

}



.google,



.google-hvr:hover,



.google-hvr:focus {

	

	background-color: #d84c41;

	

	border-color: #d84c41;

	

}



.envelope,



.envelope-hvr:hover,



.envelope-hvr:focus {

	

	background-color: #f4ab09;

	

	border-color: #f4ab09;

	

}



.rss,



.rss-hvr:hover,



.rss-hvr:focus {

	

	background-color: #f89839;

	

	border-color: #f89839;

	

}



.facebook:hover,



.facebook:focus {color: #3b5999;}



.twitter:hover,



.twitter:focus {color: #55acee;}



.pinterest:hover,



.pinterest:focus {color: #bd081c;}



.linkedin:hover,



.linkedin:focus {color: #0077B5;}



.youtube:hover,



.youtube:focus {color: #cd201f;}



.instagram:hover,



.instagram:focus {color: #e4405f;}



.vimeo:hover,



.vimeo:focus {color: #00e676;}



.whatsapp:hover,



.whatsapp:focus {color: #d84c41;}



.google:hover,



.google:focus {color: #d84c41;}



.envelope:hover,



.envelope:focus {color: #f4ab09;}



.rss:hover,



.rss:focus {color: #f89839;}



/*=== Animations ===*/



@-webkit-keyframes spin {

	

	from {

		

		transform:rotate(0deg);

		

	}

	

	to {

		

		transform:rotate(360deg);

		

	}

	

}



@-o-keyframes spin {

	

	from {

		

		transform:rotate(0deg);

		

	}

	

	to {

		

		transform:rotate(360deg);

		

	}

	

}



@keyframes spin {

	

	from {

		

		transform:rotate(0deg);

		

	}

	

	to {

		

		transform:rotate(360deg);

		

	}

	

}







@keyframes slide-animation {

	

	0% {

		

		-webkit-transform: rotateX(0deg) translateY(0px);

		

		-ms-transform: rotateX(0deg) translateY(0px);

		

		-o-transform: rotateX(0deg) translateY(0px);

		

	transform: rotateX(0deg) translateY(0px); }

	

	50% {

		

		-webkit-transform: rotateX(0deg) translateY(15px);

		

		-ms-transform: rotateX(0deg) translateY(15px);

		

		-o-transform: rotateX(0deg) translateY(15px);

		

	transform: rotateX(0deg) translateY(15px); }

	

	100% {

		

		-webkit-transform: rotateX(0deg) translateY(0px);

		

		-ms-transform: rotateX(0deg) translateY(0px);

		

		-o-transform: rotateX(0deg) translateY(0px);

		

	transform: rotateX(0deg) translateY(0px); } 

	

}



@-webkit-keyframes slide-animation {

	

	0% {

		

		-webkit-transform: rotateX(0deg) translateY(0px);

		

		-ms-transform: rotateX(0deg) translateY(0px);

		

		-o-transform: rotateX(0deg) translateY(0px);

		

	transform: rotateX(0deg) translateY(0px); }

	

	50% {

		

		-webkit-transform: rotateX(0deg) translateY(-10px);

		

		-ms-transform: rotateX(0deg) translateY(-10px);

		

		-o-transform: rotateX(0deg) translateY(-10px);

		

	transform: rotateX(0deg) translateY(-10px); }

	

	100% {

		

		-webkit-transform: rotateX(0deg) translateY(0px);

		

		-ms-transform: rotateX(0deg) translateY(0px);

		

		-o-transform: rotateX(0deg) translateY(0px);

		

		transform: rotateX(0deg) translateY(0px);

		

	}

	

}







.slide-animation {

	

	-webkit-animation: 5s slide-animation infinite;

	

	-ms-animation: 5s slide-animation infinite;

	

	-o-animation: 5s slide-animation infinite;

	

	animation: 5s slide-animation infinite;

	

}



/*

	.artikel p,

	.artikel span,

	.artikel ul{

	font-family: Freehand521 BT !important; 

}*/

.post p{

	font-size:18px;

}

.responsive-iframe {

	position: relative;

	top: 0;

	left: 0;

	bottom: 0;

	right: 0;

	width: 100%;

	height: 100%;

}

.jonathan{

	font-family: jonathanregular;

}

.freehand521{

	font-family: Freehand521 BT; 

}

.zoomIN,

.zoomOut 

{

	transition: transform .2s;

}

.zoomIN:hover {

	-ms-transform: scale(.9); /* IE 9 */

	-webkit-transform: scale(.9); /* Safari 3-8 */

	transform: scale(.9);

}

.zoomOut:hover {

	-ms-transform: scale(1.1); /* IE 9 */

	-webkit-transform: scale(1.1); /* Safari 3-8 */

	transform: scale(1.1);

}

/* .card-img .card-img-left {

	display: flex;

	flex: 1 1 auto;

} */

.cursor {

	cursor: pointer

}

.img-textTransparent {

	position: absolute;

	bottom: 0;

	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 55%, transparent);

	color: #f1f1f1;

	width: 100%;

	padding: 10% 3% 1% 3%;

}

.img-textTransparent a{

	color: #f1f1f1;

}



.card-img{

	position: relative;

	cursor: pointer;

	align-items: center;

	display: flex;

	justify-content: center

}



.card-img:nth-child(1) {

	transition: opacity 10s ease

}



.card-img:hover .foto-replacement {

	display: block;

	animation: fade_in_show 0.5s

}



.foto-replacement {

	display: none;

	position: absolute;

	bottom: 0;

	z-index: 9;

	transition: opacity 10s ease

}



@keyframes fade_in_show {

	0% {

		opacity: 0;

		transform: scale(0)

	}

	

	100% {

		opacity: 1;

		transform: scale(1)

	}

}

.card-img .overlayZoom,

.card-img .overlayFade,

.card-img .overlayLeft,

.card-img .overlayRight,

.card-img .overlayBottom,

.card-img .overlayTop

{

	position: absolute;

	right: 0;

	bottom: 0;

	left: 0;

	background-color: #000;

	overflow: hidden;

	width: 100%;

	height: 100%;

	transition:all .4s ease-out;

}



.card-img .overlayZoom {

	transform: scale(0);

}

.card-img .overlayFade {

	opacity: 0;

}



.card-img .overlayLeft {

	width: 0;

	height: 100%;

}



.card-img .overlayRight {

	left: 100%;

	width: 0;

	height: 100%;

}



.card-img .overlayBottom {

	width: 100%;

	height: 0;

	opacity: .8;

}

.card-img .overlayTop {

	bottom: 100%;

	width: 100%;

	height: 0;

}



.card-img:hover .overlayZoom {

	transform: scale(1);

	opacity: .8;

}

.card-img:hover .overlayFade {

	opacity: .8;

}

.card-img:hover .overlayLeft {

	width: 100%;

	opacity: .8;

}



.card-img:hover .overlayRight {

	width: 100%;

	left: 0;

	opacity: .8;

}

.card-img:hover .overlayBottom {

	height: 100%;

}



.card-img:hover .overlayTop {

	bottom: 0;

	height: 100%;

	opacity: .8;

}

.card-img .icon {

	color: white;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	-ms-transform: translate(-50%, -50%);

	text-align: center;

}



.card-img .fas:hover,

.card-img .fab:hover{

	font-size: 20px;

	transition: .3s ease;

}

.card .fas.fa-2x:hover,

.card .fab.fa-2x:hover{

	font-size: 50px;

	transition: .3s ease;

}

/* Some text inside the overlay, which is positioned in the middle vertically and horizontally */

.card-img .text {

	color: white;

	font-size: 20px;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	text-align: center;

}

.card-img .top-center {

	position: absolute;

	right: 0;

	top: 0;

	left: 0;

	padding: 5px;

	text-align: center;

}

.card-img .bottom-center {

	position: absolute;

	right: 0;

	bottom: 0;

	left: 0;

	padding: 5px;

	text-align: center;

	opacity: .8;

}



.card-img .bottom-left {

	position: absolute;

	right: 0;

	bottom: 0;

	left: 0;

	padding: 5px;

}



.card-img .top-left :hover {

	background-color:#e83e8c;

	color:#fff;

}



.card-img .top-left {

	position: absolute;

	top: 0;

	left: 0;

	padding: 5px;

}



.card-img .top-right {

	position: absolute;

	top: 0;

	right: 0;

	padding: 5px;

}



.card-img .bottom-right {

	position: absolute;

	bottom: 0;

	right: 0;

	padding: 5px;

}



.card-img .centered {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

}





.btn-circle.btn-sm {

	width: 30px;

	height: 30px;

	padding: 0;

	border-radius: 15px;

	font-size: 16px;

	text-align: center;

}

.btn-circle.btn-md {

	width: 50px;

	height: 50px;

	padding: 7px 10px;

	border-radius: 25px;

	font-size: 24px;

	text-align: center;

}

.btn-circle.btn-xl {

	width: 90px;

	height: 90px;

	padding: 10px 10px;

	border-radius: 50px;

	font-size: 36px;

	text-align: center;

}



.card .carousel-control-next-icon, .card .carousel-control-prev-icon {

	border: 1px solid #000;

	border-radius: 50%;

	padding: 15px;

	background-color: #000;

}

/******* OUR CLIENT *******/

.clients {

	padding: 90px 0;

}

.clients .carousel-control {

	background: #000;

}

.clients .carousel-control>.fa,

.carousel-control>.fab,

.carousel-control>.far,

.carousel-control>.fas,

.carousel-control>.glyphicon,

.carousel-control>.ion {

	margin: 0;

	position: unset;

}

.clients .section-subtitle {

	color: #767676;

}

.clients .carousel-item {

	-webkit-justify-content: center;

	justify-content: center;

}

.clients .carousel-item .row {

	-webkit-flex-grow: 1;

	flex-grow: 1;

}

.clients .row {

	display: flex;

	flex-direction: row;

	flex-wrap: wrap;

	justify-content: center;

	align-content: center;

	align-items: center;

}

.clients .carousel-item .wrap-img {

	text-align: center;

}

.clients .carousel-item .wrap-img img {

	max-height: 150px;

	/*min-height: 100px;*/

	width: auto;

	max-width: 100%;

}

.clients .carousel-controls {

	display: flex;

	-webkit-justify-content: center;

	justify-content: center;

}

.clients .carousel-controls .carousel-control {

	background: #000;

	border-radius: 50%;

	position: static;

	width: 40px;

	height: 40px;

	margin-top: 2rem;

	border-width: 1px;

}

.clients .carousel-controls .carousel-control.carousel-control-prev {

	left: auto;

	margin-right: 20px;

	margin-left: 0;

}

.clients .carousel-controls .carousel-control.carousel-control-next {

	right: auto;

	margin-right: 0;

}



.clients .cloneditem-1,

.clients .cloneditem-2,

.clients .cloneditem-3,

.clients .cloneditem-4,

.clients .cloneditem-5 {

	display: none;

}



.clients .col-lg-15 {

	-webkit-box-flex: 0;

	-ms-flex: 0 0 100%;

	-webkit-flex: 0 0 100%;

	flex: 0 0 100%;

	max-width: 100%;

	position: relative;

	min-height: 1px;

	padding-right: 10px;

	padding-left: 10px;

	width: 100%;

}

@media (min-width: 992px) {

	.clients .row {

		flex-wrap: nowrap;

	}

	.clients .col-lg-15 {

		-ms-flex: 0 0 20%;

		-webkit-flex: 0 0 20%;

		flex: 0 0 20%;

		max-width: 20%;

		width: 20%;

	}

	

	.clients .carousel-inner.slides2 > .carousel-item.active.carousel-item-right,

	.clients .carousel-inner.slides2 > .carousel-item.carousel-item-next {

		left: 0;

		-webkit-transform: translate3d(50%, 0, 0);

		transform: translate3d(50%, 0, 0);

	}

	.clients .carousel-inner.slides2 > .carousel-item.active.carousel-item-left,

	.clients .carousel-inner.slides2 > .carousel-item.carousel-item-prev {

		left: 0;

		-webkit-transform: translate3d(-50%, 0, 0);

		transform: translate3d(-50%, 0, 0);

	}

	.clients .carousel-inner.slides2 > .carousel-item.carousel-item-left,

	.clients .carousel-inner.slides2 > .carousel-item.carousel-item-prev.carousel-item-right,

	.clients .carousel-inner.slides2 > .carousel-item.active {

		left: 0;

		-webkit-transform: translate3d(0, 0, 0);

		transform: translate3d(0, 0, 0);

	}

	.clients .carousel-inner.slides2 .cloneditem-1,

	.clients .carousel-inner.slides2 .cloneditem-2,

	.clients .carousel-inner.slides2 .cloneditem-3 {

		display: block;

	}

	.clients .carousel-inner.slides3 > .carousel-item.active.carousel-item-right,

	.clients .carousel-inner.slides3 > .carousel-item.carousel-item-next {

		left: 0;

		-webkit-transform: translate3d(33.333333%, 0, 0);

		transform: translate3d(33.333333%, 0, 0);

	}

	.clients .carousel-inner.slides3 > .carousel-item.active.carousel-item-left,

	.clients .carousel-inner.slides3 > .carousel-item.carousel-item-prev {

		left: 0;

		-webkit-transform: translate3d(-33.333333%, 0, 0);

		transform: translate3d(-33.333333%, 0, 0);

	}

	.clients .carousel-inner.slides3 > .carousel-item.carousel-item-left,

	.clients .carousel-inner.slides3 > .carousel-item.carousel-item-prev.carousel-item-right,

	.clients .carousel-inner.slides3 > .carousel-item.active {

		left: 0;

		-webkit-transform: translate3d(0, 0, 0);

		transform: translate3d(0, 0, 0);

	}

	.clients .carousel-inner.slides3 .cloneditem-1,

	.clients .carousel-inner.slides3 .cloneditem-2,

	.clients .carousel-inner.slides3 .cloneditem-3 {

		display: block;

	}

	.clients .carousel-inner.slides4 > .carousel-item.active.carousel-item-right,

	.clients .carousel-inner.slides4 > .carousel-item.carousel-item-next {

		left: 0;

		-webkit-transform: translate3d(25%, 0, 0);

		transform: translate3d(25%, 0, 0);

	}

	.clients .carousel-inner.slides4 > .carousel-item.active.carousel-item-left,

	.clients .carousel-inner.slides4 > .carousel-item.carousel-item-prev {

		left: 0;

		-webkit-transform: translate3d(-25%, 0, 0);

		transform: translate3d(-25%, 0, 0);

	}

	.clients .carousel-inner.slides4 > .carousel-item.carousel-item-left,

	.clients .carousel-inner.slides4 > .carousel-item.carousel-item-prev.carousel-item-right,

	.clients .carousel-inner.slides4 > .carousel-item.active {

		left: 0;

		-webkit-transform: translate3d(0, 0, 0);

		transform: translate3d(0, 0, 0);

	}

	.clients .carousel-inner.slides4 .cloneditem-1,

	.clients .carousel-inner.slides4 .cloneditem-2,

	.clients .carousel-inner.slides4 .cloneditem-3 {

		display: block;

	}

	.clients .carousel-inner.slides5 > .carousel-item.active.carousel-item-right,

	.clients .carousel-inner.slides5 > .carousel-item.carousel-item-next {

		left: 0;

		-webkit-transform: translate3d(20%, 0, 0);

		transform: translate3d(20%, 0, 0);

	}

	.clients .carousel-inner.slides5 > .carousel-item.active.carousel-item-left,

	.clients .carousel-inner.slides5 > .carousel-item.carousel-item-prev {

		left: 0;

		-webkit-transform: translate3d(-20%, 0, 0);

		transform: translate3d(-20%, 0, 0);

	}

	.clients .carousel-inner.slides5 > .carousel-item.carousel-item-left,

	.clients .carousel-inner.slides5 > .carousel-item.carousel-item-prev.carousel-item-right,

	.clients .carousel-inner.slides5 > .carousel-item.active {

		left: 0;

		-webkit-transform: translate3d(0, 0, 0);

		transform: translate3d(0, 0, 0);

	}

	.clients .carousel-inner.slides5 .cloneditem-1,

	.clients .carousel-inner.slides5 .cloneditem-2,

	.clients .carousel-inner.slides5 .cloneditem-3,

	.clients .carousel-inner.slides5 .cloneditem-4 {

		display: block;

	}

	.clients .carousel-inner.slides6 > .carousel-item.active.carousel-item-right,

	.clients .carousel-inner.slides6 > .carousel-item.carousel-item-next {

		left: 0;

		-webkit-transform: translate3d(16.666667%, 0, 0);

		transform: translate3d(16.666667%, 0, 0);

	}

	.clients .carousel-inner.slides6 > .carousel-item.active.carousel-item-left,

	.clients .carousel-inner.slides6 > .carousel-item.carousel-item-prev {

		left: 0;

		-webkit-transform: translate3d(-16.666667%, 0, 0);

		transform: translate3d(-16.666667%, 0, 0);

	}

	.clients .carousel-inner.slides6 > .carousel-item.carousel-item-left,

	.clients .carousel-inner.slides6 > .carousel-item.carousel-item-prev.carousel-item-right,

	.clients .carousel-inner.slides6 > .carousel-item.active {

		left: 0;

		-webkit-transform: translate3d(0, 0, 0);

		transform: translate3d(0, 0, 0);

	}

	.clients .carousel-inner.slides6 .cloneditem-1,

	.clients .carousel-inner.slides6 .cloneditem-2,

	.clients .carousel-inner.slides6 .cloneditem-3,

	.clients .carousel-inner.slides6 .cloneditem-4,

	.clients .carousel-inner.slides6 .cloneditem-5 {

		display: block;

	}

}

/* Rabok */

.tombolAbsen {

	text-align: center;

}



.tombolAbsen button {

	background: transparent;

	color: #fff;

	border: 3px solid #fff;

	border-radius: 50px;

	padding: 0.8rem 2rem;

	font: 24px "Margarine", sans-serif;

	outline: none;

	cursor: pointer;

	position: relative;

	transition: 0.2s ease-in-out;

	letter-spacing: 2px;

}



.button-rainbow button {

	animation: rainbow 3s infinite, heartbeat 0.6s infinite;

	background: #c0392b;

	width: 90px;

	height: 90px;

	padding: 10px 10px;

	border-radius: 50px;

	font-size: 12px;

	font-weight: 700;

	text-align: center;

}

.button-error button {

	background: #c0392b;

	width: 90px;

	height: 90px;

	padding: 10px 10px;

	border-radius: 50px;

	font-size: 36px;

	font-weight: 700;

	text-align: center;

}



.button-success button {

	background: #28a745;

	width: 90px;

	height: 90px;

	padding: 10px 10px;

	border-radius: 50px;

	font-size: 36px;

	font-weight: 700;

	text-align: center;

}







@keyframes rainbow {

	0% {

		background: #1abc9c;

	}

	10% {

		background: #2ecc71;

	}

	20% {

		background: #3498db;

	}

	30% {

		background: #9b59b6;

	}

	40% {

		background: #e74c3c;

	}

	50% {

		background: #e67e22;

	}

	60% {

		background: #f1c40f;

	}

	70% {

		background: #2c3e50;

	}

	80% {

		background: #9b59b6;

	}

}



@keyframes heartbeat {

	50% {

		transform: scale(1.1);

	}

}



#my_camera,

#my_camera video {

	width: auto !important;

	height: auto;

	min-width: 100px;

	min-height: 100px;

	box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);

}



@media screen and (max-width: 600px) {

	.popup .modal {

		position: absolute;

	}

}



.close {

	position: absolute;

	top:3px;

	right:3px;

	background-color: #33898B;

	padding:7px 10px;

	font-size: 15px;

	text-decoration: none;

	line-height: 1;

	color:#fff;

}

.modal .close {

	position: absolute;

	top: 0;

	right: 0;

	padding: 0;

	font-size: 30px;

	text-decoration: none;

	line-height: 1;

	/* color: #9e8c4a; */

	background: none;

}





.preloader{

	position: fixed;

	top:0;

	left:0;

	bottom:0;

	right:0;

	background:rgba(0,0,0,0.85);

	z-index: 99999;

	transition: all 500ms ease;

	-webkit-transition: all 500ms ease;

}

.preloader.out{

	opacity: 0;

	visibility: hidden;

	transition-delay:.5s;

}

.loader{

	position: fixed;

	top:50%;

	left:50%;

	transform: translate(-50%,-50%);

	-webkit-transform: translate(-50%,-50%);

	transition: all 500ms ease;

	-webkit-transition: all 500ms ease;

	transition-delay:0.5s;

	/*width: 210px;

		height: 210px;

	*/

}

.preloader.out .loader{

	transform: translate(-50%,-100%);

	-webkit-transform: translate(-50%,-100%);

	opacity: 0;

}

.preloader.out .loader:before{

	border-color:#fff;

	transition-delay:0.2s;

}



.loader img{

	position: relative;

	transition: all 500ms ease;

	-webkit-transition: all 500ms ease;

}

/* .loader:before{

	content: "";

	position: fixed;

	top:50%;

	left:50%;

	transform: translate(-50%,-50%);

	-webkit-transform: translate(-50%,-50%);

	width: 150px;

	height: 150px;

	background:rgba(40,40,40,0.65);

	border:5px solid rgba(255,255,255,0.1);

	border-top:5px solid #fff;

	border-radius: 50%;

	-webkit-border-radius: 50%;

	animation:preloaderAnimation 1s linear infinite;

	-webkit-animation:preloaderAnimation 1s linear infinite;

	transition: all 500ms ease;

	-webkit-transition: all 500ms ease;

} */



@keyframes preloaderAnimation{

	0%{transform: translate(-50%,-50%) rotate(0deg);}

	100%{transform: translate(-50%,-50%) rotate(360deg);}

}

@-webkit-keyframes preloaderAnimation{

	0%{-webkit-transform: translate(-50%,-50%) rotate(0deg);}

	100%{-webkit-transform: translate(-50%,-50%) rotate(360deg);}

}

.spinner{

	width: 75px;

	height: 75px;

	margin: 0;

	border-top: 10px solid #ff3f34;

	box-shadow: 4px 4px 5px #d2d2d2 inset;

	border-right: 10px solid transparent;

	border-radius: 50%;

	animation: 1.5s spin linear infinite;

}

.spinner-2{

	width: 75px;

	height: 75px;

	margin: 0;

	border-top: 10px solid #0fbcf9;

	border-left: 10px solid transparent;

	border-radius: 50%;

	position: absolute;

	top: 0;

	animation: 1.5s spin-2 linear infinite;

}

@keyframes spin{

	from{ transform: rotate(0deg); }

	to{ transform: rotate(360deg); }

}

@keyframes spin-2{

	from{ transform: rotate(360deg); }

	to{ transform: rotate(0deg); }

}

.loader .loader-inner{

	width: 30px;

	height: 30px;

	border-radius: 25px;

	position: absolute;

	transition: all 0.8s ease-in-out;

}

.loader .box-1{

	background: #f5d5e3;

	top: 90px;

	right: 0;

	-webkit-animation: loading-1 2.2s infinite;

	animation: loading-1 2.2s infinite;

}

.loader .box-2{

	background: #e83e8c;

	top: 90px;

	-webkit-animation: loading-2 2.2s infinite;

	animation: loading-2 2.2s infinite;

}

.loader .box-3{

	background: #17a2b8;

	top: 0;

	left: 90px;

	-webkit-animation: loading-3 2.2s infinite;

	animation: loading-3 2.2s infinite;

}

.loader .box-4{

	background: #DAA520;

	bottom: 0;

	left: 90px;

	-webkit-animation: loading-4 2.2s infinite;

	animation: loading-4 2.2s infinite;

}

@keyframes loading-1{

	0%{ transform: translateX(0px); }

	50%{ transform: translateX(-180px); }

	100%{ transform: translateX(0px); }

}

@keyframes loading-2{

	0%{ transform: translateX(0px); }

	50%{ transform: translateX(180px); }

	100%{ transform: translateX(0px); }

}

@keyframes loading-3{

	0%{ transform: translateY(0px); }

	50%{ transform: translateY(180px); }

	100%{ transform: translateY(0px); }

}

@keyframes loading-4{

	0%{ transform: translateY(0px); }

	50%{ transform: translateY(-180px); }

	100%{ transform: translateY(0px); }

}

.loader .loader-inner2{

	width: 160px;

	height: 100px;

	border-radius: 5px;

	background: #17a2b8;

	margin: -50px 0 0 -80px;

	position: absolute;

	top: 50%;

	left: 50%;

	transform-type: preserve-3d;

	animation: loadinginner2-1 3s cubic-bezier(0.55, 0.3, 0.24, 0.99) infinite;

}

.loader .loader-inner2:nth-child(2){

	width: 150px;

	height: 90px;

	border-radius: 3px;

	background: #f5d5e3;

	margin: -45px 0 0 -75px;

	z-index: 1;

	animation-name: loadinginner2-2;

}

.loader .loader-inner2:nth-child(3){

	width: 40px;

	height: 20px;

	border-radius: 0 0 5px 5px;

	background: #DAA520;

	margin: 50px 0 0 -20px;

	z-index: 2;

	animation-name: loadinginner2-3;

}

@keyframes loadinginner2-1{

	3%,

	97%{

		width: 160px;

		height: 100px;

		margin-top: -50px;

		margin-left: -80px;

	}

	30%,

	36%{

		width: 80px;

		height: 120px;

		margin-top: -60px;

		margin-left: -40px;

	}

	63%,

	69%{

		width: 40px;

		height: 80px;

		margin-top: -40px;

		margin-left: -20px;

	}

}

@keyframes loadinginner2-2{

	3%,

	97%{

		width: 150px;

		height: 90px;

		margin-top: -45px;

		margin-left: -75px;

	}

	30%,

	36%{

		width: 70px;

		height: 96px;

		margin-top: -48px;

		margin-left: -35px;

	}

	63%,

	69%{

		width: 32px;

		height: 60px;

		margin-top: -30px;

		margin-left: -16px;

	}

}

@keyframes loadinginner2-3{

	3%,

	97%{

		width: 40px;

		height: 20px;

		margin-top: 50px;

		margin-left: -20px;

	}

	30%,

	36%{

		width: 8px;

		height: 8px;

		margin-top: 49px;

		margin-left: -5px;

		border-radius: 8px;

	}

	63%,

	69%{

		width: 16px;

		height: 4px;

		margin-top: -37px;

		margin-left: -8px;

		border-radius: 10px;

	}

}





.quote-card {

	/*  background: #fff; */

	color: #222222;

	padding: 20px;

	padding-left: 50px;

	box-sizing: border-box;

	box-shadow: 0 2px 4px rgba(34, 34, 34, 0.12);

	position: relative;

	overflow: hidden;

	min-height: 120px;

}

.quote-card p {

	font-size: 22px;

	line-height: 1.5;

	margin: 0;

	max-width: 80%;

}

.quote-card cite {

	font-size: 16px;

	margin-top: 10px;

	display: block;

	font-weight: 200;

	opacity: 0.8;

}

.quote-card:before {

	font-family: Georgia, serif;

	content: "“";

	position: absolute;

	top: 10px;

	left: 10px;

	font-size: 5em;

	color: rgba(238, 238, 238, 0.8);

	font-weight: normal;

}

.quote-card:after {

	font-family: Georgia, serif;

	content: "”";

	position: absolute;

	bottom: -110px;

	line-height: 100px;

	right: -32px;

	font-size: 25em;

	color: rgba(238, 238, 238, 0.8);

	font-weight: normal;

}

@media (max-width: 640px) {

	.quote-card:after {

		font-size: 22em;

		right: -25px;

	}

}

.quote-card.blue-card {

	background: #0078FF;

	color: #ffffff;

	box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);

}

.quote-card.blue-card:before, .quote-card.blue-card:after {

	color: #5FAAFF;

}

.quote-card.green-card {

	background: #00970B;

	color: #ffffff;

	box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);

}

.quote-card.green-card:before, .quote-card.green-card:after {

	color:#59E063 ;

}



.quote-card.red-card {

	background: #F61E32;

	color: #ffffff;

	box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);

}

.quote-card.red-card:before, .quote-card.red-card:after {

	color:#F65665 ;

}



.quote-card.yellow-card {

	background: #F9A825;

	color: #222222;

	box-shadow: 0 1px 2px rgba(34, 34, 34, 0.12), 0 2px 4px rgba(34, 34, 34, 0.24);

}

.quote-card.yellow-card:before, .quote-card.yellow-card:after {

	color: #FBC02D;

}



/* END Rabok */

/* SATPOL INTRO */

#intro{

	width: 100vw;

	height: 100vh;

	overflow: hidden;

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	margin-top: -40px;

}

#intro .enter-btn{

	display: inline-block;

	padding:10px 15px;

	border-radius: 50px;

	color:#fff;

	font-weight: bold;

	font-size: 11px;

	z-index: 999;

	background:#135297;

	text-decoration: none;

	border:0px solid #fff;

}

#intro:before{

	content: "";

	position: fixed;

	top:0;

	left:0;

	bottom:0;

	right:0;

	background:rgba(0,0,0,0.5);

	z-index: 99;

	overflow: auto;

}

#intro-video{

	position: fixed;

	top: 50%;

	left: 50%;

	min-width: 100%;

	min-height: 100%;

	width: auto;

	height: auto;

	z-index:-1;

	transform: translateX(-50%) translateY(-50%);

	background-size: cover;

	transition: 1s opacity;

}

#intro .caption{

	position: absolute;

	top:50px;

	left: 50%;

	color:#fff;

	z-index: 99;

	/* width: 580px; */

	transform: translateX(-50%);

	-webkit-transform: translateX(-50%);

	text-align: center;

}

#intro .caption h2{

	font-weight: bold;

	font-size:30px;

	margin:0;

}

#intro .caption p{

	font-size:20px;

	font-weight: 200;

}



.intro-searchform{

	width: 400px;

	max-width: 100%;

	margin:0 auto 10px;

	background:rgba(255,255,255,0.7);

	/* border:1px solid rgba(255,255,255,0.8); */

	border-radius: 100px;

	overflow: hidden;

}



.intro-searchform .form-control{

	border:none;

	background:none;

	color:#fff;

	font-weight: bold;

}



.intro-searchform .btn{

	border-radius: 50%!important;

	padding:0;

	width: 30px;

	height: 30px;

	line-height: 30px;

	margin:2px;

}

.app {

	display: flex!important;

	justify-content: center!important;

}



.app .cpanel-item{

	padding:55px;

}



.app .cpanel-item .icon img{

	height: 150px;

	width: auto;

}



.app .cpanel-item .title {

	bottom: 12px;

}



.cpanel{

	list-style: none;

	padding:0;

	text-align: center;

}

.cpanel > li{

	display: inline-block;

}

.cpanel > li:nth-child(8n+2){

}

.cpanel-item{

	text-align: center;

	display: block;

	margin:0 15px -10px;

	position: relative;

}

.cpanel-item:hover{

	z-index: 10;

}

.cpanel-item .icon{

	position: relative;

	width: 80px;

	height: 80px;

	display: block;

}

.cpanel-item .icon img{

	height: 50px;

	width: auto;

	position: absolute;

	top:50%;

	left:50%;

	transform: translate(-50%,-50%);

	-webkit-transform: translate(-50%,-50%);

}



.cpanel-item .icon:before{

	content: "";

	display: block;

	width: 80px;

	height: 80px;

	background:rgba(255,255,255,0.2);

	position: absolute;

	top:0;

	left:0;

	transform: rotate(45deg);

	-webkit-transform: rotate(45deg);

	border-radius: 10px;

}

.cpanel-item .icon:hover:before{

	background:#c0392b;

	opacity: 1;

}

.cpanel-item .title{

	white-space: nowrap;

	display: inline-block;

	background:#fff;

	color:#333;

	padding:2px 15px;

	border-radius: 20px;

	text-transform: uppercase;

	font-size:11px;

	font-weight: bold;

	position: absolute;

	bottom:0px;

	left:50%;

	transform: translate(-50%,0) scale(0);

	-webkit-transform: translate(-50%,0) scale(0);

	opacity: 0;

	transition: 300ms ease;

	-webkit-transition: 300ms ease;

}

.cpanel-item:hover .title{

	transform: translate(-50%,15px) scale(1);

	-webkit-transform: translate(-50%,15px) scale(1);

	opacity: 1;

}



.cpanel.colorfull li:nth-child(1n) .icon:before{

	background:#bdf3bc70;

}

.cpanel.colorfull li:nth-child(2n) .icon:before{

	background:#ab4c4cbf;

}

.cpanel.colorfull li:nth-child(3n) .icon:before{

	background:#fe4d2366;

}

.cpanel.colorfull li:nth-child(4n) .icon:before{

	background:#73bc0b7d;

}

.cpanel.colorfull li:nth-child(5n) .icon:before{

	background:#074a7e6b;

}

.cpanel.colorfull li:nth-child(6n) .icon:before{

	background:#999999;

}

.cpanel.colorfull li:nth-child(7n) .icon:before{

	background:#135297;

}

.cpanel.colorfull li:nth-child(8n) .icon:before{

	background:#fee30d;

}

.cpanel.colorfull li:nth-child(9n) .icon:before{

	background:#6fddd4;

}

@media (max-width: 992px){

	

}

@media (max-width: 767px){

	

	#intro{

		background: none;

		height: auto;

	}

	#intro:before{

		

		background:rgba(0,0,0,0.4);

	}

	#intro-video{

		display: none;

	}

	#intro .caption{

		position: relative;

		top: auto;

		left: auto;

		-webkit-transform: none!important;

		transform: none!important;

		width: auto;

		padding: 50px;

	}

	.intro-searchform{

		width: auto;

	}

	.cpanel-item{

		margin:5px;

	}

	.cpanel-item .icon{

		width: auto;

		border:1px solid rgba(255,255,255,0.3);

		position: static;

	}

	.cpanel-item .icon:before{

		transform: rotate(0);

		-webkit-transform: rotate(0);

		display: none;

	}

	.cpanel{

		display: flex;

		flex-wrap:wrap;

		margin:0 -50px;

	}

	.cpanel > li{

		display: block;

		width: 33%;

		position: static;

	}

	

	.logo img{

		width: 100%;

		height: auto;

	}

	.app .cpanel-item {

		padding: 15px 50px;

	}

	.app .cpanel-item .icon img{

		height: 110px;

		width: auto;

	}

}



/*css3 design scrollbar*/

::-webkit-scrollbar {

	width: 10px;

}



::-webkit-scrollbar-track {

	background: #fff;

}



::-webkit-scrollbar-thumb {

	background: #999999;

	border-radius:10px;

}

@import url(//fonts.googleapis.com/css?family=Roboto+Slab:400);



.tv {

	position: absolute;

	top: 0;

	left: 0;

	z-index: 1;

	width: 100%;

	height: auto;

	

	overflow: hidden;

	

}



.screen {

	position: fixed;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	z-index: 1;

	

	margin: auto;

	

	opacity: 0.9;

	transition: opacity .5s;

	

	&.active {

		opacity: 1;

	}

}

/* END SATPOL INTRO */

/* Administrator Modul Karyawan */

.ganti_user {

	margin: -30px auto 0 auto;

}



.ganti_user input[type="file"] {

	display: none;

}



.ganti_user .custom-file-upload {

	display: block;

	cursor: pointer;

	text-align: center;

}

.widget-user-image>img {

	border: 3px solid #fff;

	height: 90px !important;

	width: 90px;

}

.ganti_user .custom-file-upload i {

	font-size: 22px;

	color: #fff;

	text-shadow: 2px 2px 5px black;

}

.ganti_user .custom-file-upload i:hover {

	/*font-size: 25px;*/

	color: #17a2b8;

}



.checkbox-scroll {

	border:1px solid #ccc;

	width:100%;

	height: 114px;

	padding-left:8px;

	overflow-y: scroll;

}

.tabbable .nav {

	overflow-x: auto;

	overflow-y:hidden;

	flex-wrap: nowrap;

}

.tabbable .nav .nav-link {

	white-space: nowrap;

}

.tabbable .nav .nav-link.active {

	background: #17a2b8;

	color: #fff;

}



.menu ul {

	background: none;

	padding: 0 0px;

	list-style: none;

	position: relative;

	width: 100%;

	font-family: ‘helvetica’, arial;

}



.menu ul:after {

	content: "";

	clear: both;

	display: block;

}



.menu  ul li {

	float: left;

}



.menu ul li:hover {

	background-color: #222;

	

}



.menu ul li a {

	display: block;

	padding: 10px 15px;

	text-decoration: none;

	color: #fff;

}



.menu ul li a:hover{

	color: #fff;

}



.menu ul ul {

	display: none;

	background: #111;

	padding: 0;

	position: absolute;

	top: 100%;

	max-width: 300px;

	width: auto;

}



.menu ul ul li {

	float: none;

	border-bottom: 1px solid rgba(0,0,0,.2);

	position: relative;

}



.menu ul li:hover > ul {

	display: block;

}



.menu ul ul li a {

	padding: 10px 15px;

	color: #fff;

	

}



.menu ul ul li a:hover {

	background: #222;

}



.menu ul ul ul {

	position: absolute;

	left: 100%;

	top:0;

	width: 200px;

}



section {

	background-color: #eeeeee;

}

section,

.container,

.container-fluid {

	position: relative;

	word-wrap: break-word;

}

section {

	background-position: 50% 50%;

	background-repeat: no-repeat;

	background-size: cover;

}



section .background-video,

section .background-video-preview {

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	top: 0;

}

.section-title {

	font-style: normal;

	line-height: 1.2;

}

.section__comments .row {

	justify-content: center;

	-webkit-justify-content: center;

}

.section-subtitle {

	line-height: 1.3;

}

.section-text {

	font-style: normal;

	line-height: 1.6;

}

.section-btn {

	margin-left: -0.25rem;

	margin-right: -0.25rem;

	font-size: 0;

}



.section-btn a.btn:not(.btn-form) {

	border-radius: 100px;

}





nav .section-btn {

	margin-left: 0rem;

	margin-right: 0rem;

}



/*! Full-screen */

.fullscreen .overlay {

	min-height: 100vh;

}



.overlay {

	background-color: #000;

	bottom: 0;

	left: 0;

	opacity: .5;

	position: absolute;

	right: 0;

	top: 0;

	z-index: 0;

	pointer-events: none;

}



@media (max-width: 767px) {

	.text-left,

	.text-center,

	.text-right,

	.section-btn,

	.section-title {

		text-align: center;

	}

}

.fullscreen {

	display: flex;

	display: -moz-flex;

	display: -ms-flex;

	display: -o-flex;

	align-items: center;

	-webkit-align-items: center;

	min-height: 100vh;

	padding-top: 3rem;

	padding-bottom: 3rem;

}



.kc-arrow-up {

	bottom: 25px;

	right: 90px;

	position: fixed;

	text-align: right;

	z-index: 5000;

	color: #ffffff;

	font-size: 32px;

	transform: rotate(180deg);

	-webkit-transform: rotate(180deg);

}



.kc-arrow-up a {

	background: rgba(0, 0, 0, 0.2);

	border-radius: 3px;

	color: #fff;

	display: inline-block;

	height: 60px;

	width: 60px;

	outline-style: none !important;

	position: relative;

	text-decoration: none;

	transition: all 0.3s ease-in-out;

	cursor: pointer;

	text-align: center;

}



.kc-arrow-up a:hover {

	background-color: rgba(0, 0, 0, 0.4);

}



.kc-arrow-up a i {

	line-height: 60px;

}



.kc-arrow-up-icon {

	display: block;

	color: #fff;

}



.kc-arrow-up-icon::before {

	content: '\203a';

	display: inline-block;

	font-family: serif;

	font-size: 32px;

	line-height: 1;

	font-style: normal;

	position: relative;

	top: 6px;

	left: -4px;

	-webkit-transform: rotate(-90deg);

	transform: rotate(-90deg);

}



/*! Arrow Down */

.kc-arrow {

	position: absolute;

	bottom: 45px;

	left: 50%;

	width: 60px;

	height: 60px;

	cursor: pointer;

	background-color: rgba(80, 80, 80, 0.5);

	border-radius: 50%;

	-webkit-transform: translateX(-50%);

	transform: translateX(-50%);

}



.kc-arrow > a {

	display: inline-block;

	text-decoration: none;

	outline-style: none;

	-webkit-animation: arrowdown 1.7s ease-in-out infinite;

	animation: arrowdown 1.7s ease-in-out infinite;

}



.kc-arrow > a > i {

	position: absolute;

	top: -2px;

	left: 15px;

	font-size: 2rem;

}



@keyframes arrowdown {

	0% {

		transform: translateY(0px);

		-webkit-transform: translateY(0px);

	}

	50% {

		transform: translateY(-5px);

		-webkit-transform: translateY(-5px);

	}

	100% {

		transform: translateY(0px);

		-webkit-transform: translateY(0px);

	}

}



@-webkit-keyframes arrowdown {

	0% {

		transform: translateY(0px);

		-webkit-transform: translateY(0px);

	}

	50% {

		transform: translateY(-5px);

		-webkit-transform: translateY(-5px);

	}

	100% {

		transform: translateY(0px);

		-webkit-transform: translateY(0px);

	}

}



@media (max-width: 500px) {

	.kc-arrow-up {

		left: 50%;

		right: auto;

		transform: translateX(-50%) rotate(180deg);

		-webkit-transform: translateX(-50%) rotate(180deg);

	}

}



/*Gradients animation*/

@keyframes gradient-animation {

	from {

		background-position: 0% 100%;

		-webkit-animation-timing-function: ease-in-out;

		animation-timing-function: ease-in-out;

	}

	to {

		background-position: 100% 0%;

		-webkit-animation-timing-function: ease-in-out;

		animation-timing-function: ease-in-out;

	}

}



@-webkit-keyframes gradient-animation {

	from {

		background-position: 0% 100%;

		-webkit-animation-timing-function: ease-in-out;

		animation-timing-function: ease-in-out;

	}

	to {

		background-position: 100% 0%;

		-webkit-animation-timing-function: ease-in-out;

		animation-timing-function: ease-in-out;

	}

}



.bg-gradient {

	background-size: 200% 200%;

	animation: gradient-animation 5s infinite alternate;

	-webkit-animation: gradient-animation 5s infinite alternate;

}



/* Others*/

.note-check a[data-value=Rubik] {

	font-style: normal;

}



.kc-arrow a {

	color: #ffffff;

}



@media (max-width: 767px) {

	.kc-arrow {

		display: none;

	}

}



.videoplay {

	padding-top: 75px;

	padding-bottom: 75px;

}

.videoplay .media span {

	font-size: 48px;

	cursor: pointer;

	background-color: #ffffff;

	border-radius: 50%;

	width: 6rem;

	height: 6rem;

	line-height: 6rem;

	position: relative;

	display: inline-block;

	transition: all 0.25s;

	color: #353535;

}

.videoplay .media span.kci-play:before {

	position: absolute;

	left: 50%;

	-webkit-transform: translateX(-35%);

	-moz-transform: translateX(-35%);

	-ms-transform: translateX(-35%);

	-o-transform: translateX(-35%);

	transform: translateX(-35%);

}

.videoplay .modalWindow {

	position: fixed;

	z-index: 5000;

	left: 0;

	top: 0;

	background-color: rgba(61, 61, 61, 0.65);

	width: 100%;

	height: 100%;

}

.videoplay .modalWindow .modalWindow-container {

	display: table-cell;

	vertical-align: middle;

}

.videoplay .modalWindow .modalWindow-video {

	height: calc(44.9943757vw);

	width: 80vw;

	margin: 0 auto;

}

.videoplay a.close {

	position: absolute;

	right: 4vw;

	top: 4vh;

	color: #ffffff;

	z-index: 5000000;

	font-size: 37px;

	background: #000;

	padding: 20px;

	border-radius: 50%;

}

.videoplay a.close:hover {

	color: #ffffff;

}



.olAngka {

	color: #767676;

}

.olAngka ol {

	margin-bottom: 0;

	counter-reset: myCounter;

}

.olAngka ol li {

	margin-bottom: 1rem;

}

.olAngka ol li {

	list-style: none;

	padding-left: .5rem;

	position: relative;

}

.olAngka ol li:before {

	position: absolute;

	left: -56px;

	margin-top: -10px;

	counter-increment: myCounter;

	content: counter(myCounter);

	display: inline-block;

	text-align: center;

	margin: 5px 10px;

	line-height: 40px;

	transition: all .2s;

	color: #ffffff;

	background: #149dcc;

	width: 40px;

	height: 40px;

	border-radius: 50%;

}



.ulCheck {

	color: #767676;

}

.ulCheck ul {

	margin-bottom: 0;

}

.ulCheck ul li {

	margin-bottom: 1rem;

	list-style: none;

	position: relative;

}

.ulCheck ul li:before {

	position: absolute;

	left: -56px;

	margin-top: -10px;

	padding-top: 3px;

	content: '';

	display: inline-block;

	text-align: center;

	margin: 5px 10px;

	line-height: 20px;

	transition: all .2s;

	color: #ffffff;

	background: #149dcc;

	width: 25px;

	height: 25px;

	border-radius: 50%;

	content: '✓';

}



.bg-gradient-black {

	background-color: #000;

	color: #ffffff !important;

}



.bg-gradient-black.btn.disabled, .bg-gradient-black.btn:disabled, .bg-gradient-black.btn:not(:disabled):not(.disabled):active, .bg-gradient-black.btn:not(:disabled):not(.disabled).active,

.show > .bg-gradient-black.btn.dropdown-toggle {

	background-image: none !important;

}



.bg-gradient-black.btn:hover {

	border-color: #d91a72;

	color: #ececec;

}



.bg-gradient-black.btn:hover {

	background: #e41c78 linear-gradient(180deg, #e83e8c, #e41c78) repeat-x !important;

}



.bg-gradient-black.btn:not(:disabled):not(.disabled):active, .bg-gradient-black.btn:not(:disabled):not(.disabled).active, .bg-gradient-black.btn:active, .bg-gradient-black.btn.active {

	border-color: #ce196c;

	color: #ffffff;

}



.bg-gradient-black.btn:not(:disabled):not(.disabled):active, .bg-gradient-black.btn:not(:disabled):not(.disabled).active, .bg-gradient-black.btn:active, .bg-gradient-black.btn.active {

	background: #d91a72 linear-gradient(180deg, #df3c87, #d91a72) repeat-x !important;

}



#breadcumb .breadcrumb {

	margin: 7vh 0 -100px;

}

#breadcumb .breadcrumb .breadcrumb-item:before {

	content: ""

}

.pricingTable {

	text-align: center

}



.pricingTable .pricingTable-header {

	padding: 30px 0;

	background: #4d4d4d;

	position: relative;

	transition: all .3s ease 0s

}



.pricingTable:hover .pricingTable-header {

	background: #09b2c6

}



.pricingTable .pricingTable-header:after,

.pricingTable .pricingTable-header:before {

	content: "";

	width: 16px;

	height: 16px;

	border-radius: 50%;

	border: 1px solid #d9d9d8;

	position: absolute;

	bottom: 12px

}



.pricingTable .pricingTable-header:before {

	left: 40px

}



.pricingTable .pricingTable-header:after {

	right: 40px

}



.pricingTable .heading {

	font-size: 20px;

	color: #fff;

	text-transform: uppercase;

	letter-spacing: 2px;

	margin-top: 0

}



.pricingTable .price-value {

	display: inline-block;

	position: relative;

	font-size: 45px;

	font-weight: 700;

	color: #09b1c5;

	transition: all .3s ease 0s

}



.pricingTable:hover .price-value {

	color: #fff

}



.pricingTable .currency {

	font-size: 24px;

	font-weight: 700;

	position: absolute;

	top: 5px;

	left: -42px

}



.pricingTable .month {

	font-size: 13px;

	color: #fff;

	position: absolute;

	bottom: 15px;

	right: -42px;

	text-transform: capitalize

}



.pricingTable .pricing-content {

	padding-top: 50px;

	background: #fff;

	position: relative

}



.pricingTable .pricing-content:after,

.pricingTable .pricing-content:before {

	content: "";

	width: 16px;

	height: 16px;

	border-radius: 50%;

	border: 1px solid #7c7c7c;

	position: absolute;

	top: 12px

}



.pricingTable .pricing-content:before {

	left: 40px

}



.pricingTable .pricing-content:after {

	right: 40px

}



.pricingTable .pricing-content ul {

	padding: 0 20px;

	margin: 0;

	list-style: none

}



.pricingTable .pricing-content ul:after,

.pricingTable .pricing-content ul:before {

	content: "";

	width: 8px;

	height: 46px;

	border-radius: 3px;

	background: linear-gradient(to bottom, #818282 50%, #727373 50%);

	position: absolute;

	top: -22px;

	z-index: 1;

	box-shadow: 0 0 5px #707070;

	transition: all .3s ease 0s

}



.pricingTable:hover .pricing-content ul:after,

.pricingTable:hover .pricing-content ul:before {

	background: linear-gradient(to bottom, #40c4db 50%, #34bacc 50%)

}



.pricingTable .pricing-content ul:before {

	left: 44px

}



.pricingTable .pricing-content ul:after {

	right: 44px

}



.pricingTable .pricing-content ul li {

	font-size: 15px;

	font-weight: 700;

	color: #777473;

	padding: 10px 0;

	border-bottom: 1px solid #d9d9d8

}



.pricingTable .pricing-content ul li:last-child {

	border-bottom: none

}



.pricingTable .read {

	display: inline-block;

	font-size: 16px;

	color: #fff;

	text-transform: uppercase;

	background: #d9d9d8;

	padding: 8px 25px;

	margin: 30px 0;

	transition: all .3s ease 0s

}



.pricingTable .read:hover {

	text-decoration: none

}



.pricingTable:hover .read {

	background: #09b1c5

}



@media screen and (max-width:990px) {

	.pricingTable {

		margin-bottom: 25px

	}

	

	nav.sosmed {

		top: 20% !important;

	}

}



nav.sosmed {

	position: fixed;

	top: 30%;

	width: 40px;

	transition: all 0.3s linear;

	/*box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .4);*/

	z-index:99999999;

}



nav.sosmed ul {

	margin: 0 0 0 -40px;

	list-style: none;

}



nav.sosmed li {

	height: 40px;

	position: relative

}



nav.sosmed li a {

	display: block;

	height: 100%;

	width: 100%;

	line-height: 45px;

	padding-left: 25%;

	border-bottom: 1px solid rgba(0, 0, 0, .4);

	transition: all .3s linear;

	text-decoration: none !important

}



nav.sosmed li a i {

	position: absolute;

	top: 14px;

	left: 14px;

	font-size: 15px

}



nav.sosmed ul li a span {

	display: none;

	font-weight: bold;

	letter-spacing: 1px;

	text-transform: uppercase

}



nav.sosmed a:hover {

	z-index: 1;

	width: 200px;

	border-bottom: 1px solid rgba(0, 0, 0, .5);

	box-shadow: 0 0 1px 1px rgba(0, 0, 0, .3)

}



nav.sosmed ul li:hover a span {

	padding-left: 30%;

	display: block;

	font-size: 15px

}

.main-header {

	border: 0;

	box-shadow: 0px 2px 20px 2px #000;

}

@media (min-width: 768px){

	.navbar-expand-md .navbar-nav .nav-link {

		padding-right: 5px;

		padding-left: 5px;

	}

}

@media all and (min-width: 992px) {

	.navbar-expand-md .navbar-nav .nav-link {

		padding-right: 10px;

		padding-left: 10px;

	}

	.navbar-expand-md .navbar-nav .dropdown-menu {

		position: absolute;

		top: 30px;

		z-index: 9999;

	}

	.dropdown-submenu>.dropdown-menu {

		left: 100%;

		margin-left: 0;

		margin-top: 0;

		top: -7px!important;

	}

	.dropdown-menu li{ position: relative; 	}

	.nav-item .submenu{ 

		display: none;

		position: absolute;

		left:100%;

		top:-7px;

	}

	.nav-item .submenu-left{ 

		right:100%; 

		left:auto;

	}

	.dropdown-menu > li:hover{ background-color: #f1f1f1 }

	.dropdown-menu > li:hover > .submenu{ display: block; }

	.animate {

		animation-duration: 0.3s;

		-webkit-animation-duration: 0.3s;

		animation-fill-mode: both;

		-webkit-animation-fill-mode: both;

	}

	

	

	@keyframes slideIn {

		0% {

			transform: translateY(1rem);

			opacity: 0;

		}

		100% {

			transform:translateY(0rem);

			opacity: 1;

		}

		0% {

			transform: translateY(1rem);

			opacity: 0;

		}

	}

	

	@-webkit-keyframes slideIn {

		0% {

			-webkit-transform: transform;

			-webkit-opacity: 0;

		}

		100% {

			-webkit-transform: translateY(0);

			-webkit-opacity: 1;

		}

		0% {

			-webkit-transform: translateY(1rem);

			-webkit-opacity: 0;

		}

	}

	

	.slideIn {

		-webkit-animation-name: slideIn;

		animation-name: slideIn;

	}

}





.vh-80{

	min-height:80vh;

}

.vh-70{

	min-height:70vh;

}



@media screen and (min-width: 576px){

	

	.vh-sm-50{

		min-height:50vh;

	}

	

}



.accordion .card-body p{

	margin:0 !important;

	padding:0 !important;

}

.ts-mdb{

	text-shadow: 2px 2px 2px #000;

}

.ts-smb{

	text-shadow: 1px 0px 2px #000;

}

.ts-mdw{

	text-shadow: 2px 2px 2px #fff;

}

.ts-smw{

	text-shadow: 1px 0px 2px #fff;

}

.putar {

	-webkit-animation: fa-spin 5s linear infinite;

	animation: fa-spin 5s linear infinite;

}

.putar.spin-reverse{

	-webkit-animation-direction:reverse;

	-moz-animation-direction:reverse;

	animation-direction:reverse;

}



#footer-bar {

	position: fixed;

	bottom: 0;

	left: 0;

	right: 0;

	z-index: 9998;

	/* -webkit-backdrop-filter: saturate(180%) blur(20px);

	backdrop-filter: saturate(180%) blur(20px);*/

	background-color: rgba(255, 250, 240, 1); 

	display: flex;

	min-height: 61px;

	border-top: solid 1px rgba(0, 0, 0, .05);

	text-align: center;

	transition: transform 350ms ease!important

}



#footer-bar a {

	color: #17a2b8;

	padding-top: 12px;

	position: relative;

	flex: 1 1 auto

}

#footer-bar a:hover {

	background-image: linear-gradient(to bottom,#17a2b8 0%,#17a2b8 100%)!important;

	color: #FFFAF0;

}

#footer-bar a span {

	position: relative;

	z-index: 2;

	display: block;

	font-size: 13px;

	font-weight: 700;

	margin-top: -6px;

	opacity: .7;

	font-family: roboto, sans-serif!important

}



#footer-bar a i {

	font-size: 22px;

	position: relative;

	z-index: 2

}



#footer-bar a svg {

	transform: translateY(-6px)

}



#footer-bar .badge {

	font-style: normal;

	z-index: 5;

	top: 0;

	position: absolute;

	margin-left: 3px;

	color: #fff!important;

	width: 18px;

	text-align: center;

	line-height: 18px;

	padding: 0;

	padding-left: 0!important;

	border-radius: 18px;

	margin-top: 7px;

	font-size: 11px

}



#footer-bar.position-relative {

	z-index: 2!important

}

/* 

	#footer-bar {

	height: calc(65px + (constant(safe-area-inset-bottom))*1.1);

	height: calc(65px + (env(safe-area-inset-bottom))*1.1)

} */



.footer-bar-6 u {

	background-color: #17a2b8;

}



/* .footer-bar-6 {

	margin-left: -3px

} */



.footer-bar-6 span {

	font-size: 14px!important

}



.footer-bar-6 i {

	transform: translateY(-2px);

	opacity: 1;

}



.footer-bar-6 .circle-nav strong {

	position: absolute;

	width: 50px;

	height: 50px;

	border-radius: 50px;

	left: 50%;

	top: -23px;

	z-index: 0;

	transform: translateX(-50%);

	box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .09);

	animation: footerAni 1s infinite;

	background-image: linear-gradient(to bottom, #17a2b8 0%, #17a2b8 100%)!important

}





.footer-bar-6 .circle-nav strong,

.footer-bar-6 .active-nav em {

	background-image: linear-gradient(to bottom, #17a2b8 , #17a2b8)!important

}





.footer-bar-6 .circle-nav span {

	font-size: 14px!important;

	margin-top: -8px!important

}



.footer-bar-6 .circle-nav i {

	transform: translateY(-21px) translateX(0px);

	color: #fff!important;

	opacity: 1!important;

	font-size: 20px!important;

	position: relative;

	z-index: 2

}



.footer-bar-6 .circle-nav svg {

	width: 25px!important;

	height: 25px!important;

	stroke: #fff!important;

	fill: rgba(255, 255, 255, .1)!important;

	transform: translateY(-25px) translateX(-1px)!important;

	position: relative;

	z-index: 2

}



.footer-bar-6 .circle-nav u {

	position: absolute;

	left: 0;

	right: 0;

	width: 50px;

	border-radius: 50px;

	height: 50px;

	z-index: 0

}



.footer-bar-6 .active-nav em {

	position: absolute;

	width: 60px;

	height: 4px;

	border-radius: 60px;

	left: 50%;

	top: 57px;

	transform: translateX(-50%);

	background-image: linear-gradient(to bottom, #17a2b8 0%, #17a2b8 100%)!important

}



@keyframes footerAni {

	0% {

		transform: scale(1, 1) translateX(-50%)

	}

	50% {

		transform: scale(1.05, 1.05) translateX(-48%)

	}

}

.modal-fullscreen {

	width: 100vw;

	max-width: none;

	height: 100%;

	margin: 0;

}

.dropdown-hover:hover > .dropdown-menu, .dropdown-hover.nav-item.dropdown:hover > .dropdown-menu,

.dropdown-hover .dropdown-submenu:hover > .dropdown-menu, .dropdown-hover.dropdown-submenu:hover > .dropdown-menu {

	display: block;

}