/* custom scrollbar */
/* Let's get this party started */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
button[aria-expanded=true] .fa-chevron-down {
	display: none;
}

button[aria-expanded=false] .fa-chevron-up {
	display: none;
}
/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

@keyframes blink {
	50% {
		opacity: 0.0;
	}
}
.blink {
	animation: blink 1s step-start 0s infinite;
} 
@font-face {
    font-family: 'jonathanregular';
    src: url('jonathan-webfont.woff2') format('woff2'),
	url('jonathan-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	
}
.jonathan{
	font-family: jonathanregular;
}
.freehand521{
	font-family: Freehand521 BT;
}
::-webkit-scrollbar {
    width: 5px;  /* Total width including `border-width` of scrollbar thumb */
    height: 5px;
	cursor: auto;
}

/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(250,250,250,0.3);
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	height: 1em;
	border: 0.5em solid rgba(0, 0, 0, 0);  /* Transparent border together with `background-clip: padding-box` does the trick */
	background-clip: padding-box;
	-webkit-border-radius: 1em;
	background: rgba(var(--bs-link-color-rgb),0.8);
	-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.025);
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(var(--bs-link-color-rgb),0.4);
}
::-webkit-scrollbar-button {
	width: 0;
	height: 0;
	display: none;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: rgba(var(--bs-link-color-rgb));
}

::-webkit-scrollbar-corner {
	background-color: transparent;
}
.noselect {
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.fixed-te{
	padding: 5px 35px 5px 5px;
	position : fixed;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index : 99999;
	animation: fadein 1s linear 1 forwards;
}
.fixed-te .btn-close{
	width: 0;
	height: 0;
	padding: 1rem;
}
.fixed-te.fade:not(.show) {
	opacity: 0;
	top: -100%
}
.btn-group-xs > .btn, .btn-xs {
	padding: 1px 5px;
	font-size: 12px;
	line-height: 1.5;
	border-radius: 3px;
}
.input-group-xs>.btn, .input-group-xs>.form-control, .input-group-xs>.form-select, .input-group-xs>.input-group-text {
	padding: 0;
	font-size: .875rem;
	border-radius: 0.2rem;
}
i.badge {
	font-size: 10px;
}
.fa-2x .badge {
	font-size: 13px;
}

@media (max-width: 575.98px) {
	.up-10{margin-top: -10px}
	.up-20{margin-top: -20px}
	.up-30{margin-top: -30px}
	.up-50{margin-top: -50px}
	.up-60{margin-top: -60px}
	.up-70{margin-top: -70px}
	.up-80{margin-top: -80px}
	.up-90{margin-top: -90px}
	.up-100{margin-top: -100px}
	.up-110{margin-top: -110px}
	.up-120{margin-top: -110px}
	.up-130{margin-top: -130px}
	.up-150{margin-top: -150px;}
	.up-180{margin-top: -180px}
	.up-200{margin-top: -200px}
	.up-240{margin-top: -240px}
	.min-h25{min-height:25px !important}
	.min-h50{min-height:50px !important}
	.min-h75{min-height:75px !important}
	.min-h100{min-height:100px !important}
	.small {
		font-size: 11px;
	}
	
	i.badge {
		font-size: 8px;
	}
	
	.fa-2x .badge {
		font-size: 11px;
	}
	
	p,b{
		font-size: 13px;
		line-height: 1;
	}
	
	.blog .card-body {
		margin: -15px 10px 0 10px;
		background: #ffffff;
		border-radius: 15px;
	}
	.blog .card {
		background: none;
	}
	.fixed-te{
		margin: 5% auto;
		left: 0;
		right: 0;
		transform: translateX(0);
	}
}
@media (max-width: 767.98px) {
	.bottom-sm-20{margin-bottom: 20px}
	.bottom-sm-30{margin-bottom: 30px}
	.bottom-sm-40{margin-bottom: 40px}
	.bottom-sm-50{margin-bottom: 50px}
	.bottom-sm-60{margin-bottom: 60px}
	.bottom-sm-70{margin-bottom: 70px}
	#tabContent .nav-item .nav-link{
		font-size: 12px;
		padding: 5px;
	}
}
@media (max-width: 991.98px) {
	
}
@media (max-width: 1199.98px) {
	
}
@media (max-width: 1399.98px) {
	
}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.up-sm-10{margin-top: -10px}
	.up-sm-20{margin-top: -20px}
	.up-sm-30{margin-top: -30px}
	.up-sm-50{margin-top: -50px}
	.up-sm-60{margin-top: -60px}
	.up-sm-70{margin-top: -70px}
	.up-sm-80{margin-top: -80px}
	.up-sm-90{margin-top: -90px}
	.up-sm-100{margin-top: -100px}
	.up-sm-110{margin-top: -110px}
	.up-sm-120{margin-top: -110px}
	.up-sm-130{margin-top: -130px}
	.up-sm-150{margin-top: -150px;}
	.up-sm-180{margin-top: -180px}
	.up-sm-240{margin-top: -240px}
	#wallet p.small {
		font-size: .775em ;
	}
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.up-md-10{margin-top: -10px}
	.up-md-20{margin-top: -20px}
	.up-md-30{margin-top: -30px}
	.up-md-50{margin-top: -50px}
	.up-md-60{margin-top: -60px}
	.up-md-70{margin-top: -70px}
	.up-md-80{margin-top: -80px}
	.up-md-90{margin-top: -90px}
	.up-md-100{margin-top: -100px}
	.up-md-110{margin-top: -110px}
	.up-md-120{margin-top: -110px}
	.up-md-130{margin-top: -130px}
	.up-md-150{margin-top: -150px;}
	.up-md-180{margin-top: -180px}
	.up-md-240{margin-top: -240px}
}

/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.up-lg-10{margin-top: -10px}
	.up-lg-20{margin-top: -20px}
	.up-lg-30{margin-top: -30px}
	.up-lg-50{margin-top: -50px}
	.up-lg-60{margin-top: -60px}
	.up-lg-70{margin-top: -70px}
	.up-lg-80{margin-top: -80px}
	.up-lg-90{margin-top: -90px}
	.up-lg-100{margin-top: -100px}
	.up-lg-110{margin-top: -110px}
	.up-lg-120{margin-top: -110px}
	.up-lg-130{margin-top: -130px}
	.up-lg-150{margin-top: -150px;}
	.up-lg-180{margin-top: -180px}
	.up-lg-240{margin-top: -240px}
}
.rounded-start-20{
	border-top-left-radius: 20px!important;
	border-bottom-left-radius: 20px!important;
}
.rounded-end-20{
	border-top-right-radius: 20px!important;
	border-bottom-right-radius: 20px!important;
}
.rounded-top-20{
	border-top-right-radius: 20px!important;
	border-top-left-radius: 20px!important;
}
.rounded-bottom-20{
	border-bottom-right-radius: 20px!important;
	border-bottom-left-radius: 20px!important;
}
.rounded-20{
	border-radius: 20px 20px;
}
body {
	overflow-x: hidden; /* Prevent scroll on narrow devices */
}
.title {
	font-size: 1.2em !important;
	font-weight:700;
}
.timeline {
	color: #8b4513;
	font-size: .8em;
}
.intro{
	color: #707070;
	margin-top: 10px;
	text-align: justify;
}
.intro p,
.intro a,
.intro b,
.intro span,
.intro ul,
.intro ol{
	color: #707070 !important;
	font-size: 1em !important;
}
.tag a{
	font-size: .8em;
	color: #999;
}
.tag a:hover{
	color: #8b4513;
}
.wrap {
	padding-top: 56px;
	padding-bottom:56px;
	background: transparent;
	min-height: 100vh;
}

.wrap  a {
	text-decoration: none!important;
}

.pointer{
	cursor: pointer;
}
.imgShadow{
	filter: drop-shadow(-5px 3px 5px #000000);
}
.imgShadow-3{
	filter: drop-shadow(-3px 1px 3px #000000);
}

.imgShadow-2{
	filter: drop-shadow(-2px 0px 2px #000000);
}

.btn-group-xs>.btn, .btn-xs {
	padding: 0.1rem 0.25rem;
	font-size: .675rem;
	border-radius: 0.2rem;
}
/* Position */
.tLeft{
	position: absolute;
	top: 0;
	left:0;
	margin: 5px;
	z-index: 2;
}
.tCenter{
	position: absolute;
	top: -10%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	margin: 5px;
	text-align: center;
	z-index: 2;
}
.tRight{
	position: absolute;
	top: 0;
	right:0;
	margin: 5px;
	z-index: 2;
}
.bLeft{
	position: absolute;
	bottom: 0;
	left:0;
	margin: 5px;
	z-index: 2;
}

.bCenter{
	position: absolute;
	bottom: -10%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	margin: 5px;
	text-align: center;
	z-index: 2;
}
.bRight{
	position: absolute;
	top: 100%;
	right:0;
	margin: 5px;
	z-index: 2;
}
.middle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	margin: 5px;
	text-align: center;
	z-index: 2;
}

.offcanvas-body::-webkit-scrollbar {
	height: 3px;
	width: 3px;
	background: #212529;
}
.offcanvas-body::-webkit-scrollbar-thumb {
	background: #393812;
	-webkit-border-radius: 1ex;
	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}
.offcanvas-body::-webkit-scrollbar-corner {
	background: #000;
}

.scrollnav .nav::-webkit-scrollbar {
	width: 1em;
}


.scrollnav {
	position: relative;
	z-index: 2;
	/*height: 2.75rem;*/
	overflow-y: hidden;
}

.scrollnav .nav {
	display: flex;
	flex-wrap: nowrap;
	padding: 5px;
	overflow-x: auto;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
}

.scrollnav .nav-link {
	padding-top: .75rem;
	padding-bottom: .75rem;
	font-size: .875rem;
}

.flex-scroll {display: flex;flex-wrap: nowrap;overflow-x: auto;padding-bottom: 5px;}
.flex-scroll .widget-product{flex: 0 0 auto;width: 150px;min-height:310px;margin-right:10px}
.flex-scroll .scroll-category{flex: 0 0 auto;width: 80px;border-radius: 5px;}
.flex-scroll .scroll-col{flex: 0 0 auto;width: 120px;margin-right: 10px;border-radius: 5px;}
.flex-scroll .col-240{flex: 0 0 auto;width: 240px;margin-right: 10px;border-radius: 5px;}
.flex-scroll .col-240 img{border-radius: 5px 0px 0px 5px;}
.flex-scroll .card-direct{flex: 0 0 auto;width:250px;margin-right: 10px;}

.scrollnav .nav-link.active {
	color: #d87e7e;
	padding: 10px 15px;
	/* border-radius: 30%; */
	border-bottom: 3px solid #d17979;
}

.navbar-brand.center{
	transform: translateX(-50%);
	left: 50%;
	position: absolute;
}

.badge-notification {
	position: absolute;
	font-size: .6rem;
	margin-top: -0.1rem;
	margin-left: -0.5rem;
	padding: 0.2em 0.45em;
	right: 0;
}

.badge-verified {
	font-size: .6rem;
	padding: 0.2em 0.45em;
}

/*
	* Dummy devices (replace them with your own or something else entirely!)
*/

.product-device {
	position: absolute;
	right: 10%;
	bottom: -30%;
	width: 300px;
	height: 540px;
	background-color: #333;
	border-radius: 21px;
	transform: rotate(30deg);
}

.product-device::before {
	position: absolute;
	top: 10%;
	right: 10px;
	bottom: 10%;
	left: 10px;
	content: "";
	background-color: rgba(255, 255, 255, .1);
	border-radius: 5px;
}

.product-device-2 {
	top: -25%;
	right: auto;
	bottom: 0;
	left: 5%;
	background-color: #e5e5e5;
}


/*
	* Extra utilities
*/

.flex-equal > * {
	flex: 1;
}
@media (min-width: 768px) {
	.flex-md-equal > * {
		flex: 1;
	}
}
.flag {
	width: 110px;
	height: 56px;
	box-sizing: content-box;
	padding-top: 15px;
	position: relative;
	background: #32557f;
	color: #7eb4e2;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-align: center;
	text-transform: uppercase;
	
	&::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 0;
	border-bottom: 13px solid #7eb4e2;
	border-left: 55px solid transparent;
	border-right: 55px solid transparent;
}
}
.b-example-divider {
	height: 3rem;
	background-color: rgba(0, 0, 0, .1);
	border: solid rgba(0, 0, 0, .15);
	border-width: 1px 0;
	box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.bi {
	vertical-align: -.125em;
	fill: currentColor;
}

.feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: 1rem;
	font-size: 2rem;
	color: #fff;
	border-radius: .75rem;
}

.icon-link {
	display: inline-flex;
	align-items: center;
}
.icon-link > .bi {
	margin-top: .125rem;
	margin-left: .125rem;
	transition: transform .25s ease-in-out;
	fill: currentColor;
}
.icon-link:hover > .bi {
	transform: translate(.25rem);
}

.icon-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	font-size: 1.5rem;
	border-radius: .75rem;
}

.rounded-4 { border-radius: .5rem; }
.rounded-5 { border-radius: 1rem; }

.text-shadow-1 { text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25); }
.text-shadow-2 { text-shadow: 0 .25rem .5rem rgba(0, 0, 0, .25); }
.text-shadow-3 { text-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }

.card-cover {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.card-header{
	position: relative;
	background-color: transparent;
}
.card-footer{
	position: relative;
	background-color: transparent;
	border:0;
}

.card-header:nth-child(1) {
	transition: opacity 10s ease
}
.card-header:hover .replaceImage {
	display: block;
	animation: fade_in_show 0.5s
}
.replaceImage {
	display: none;
	position: absolute;
	bottom: 0;
	z-index: 1;
	transition: opacity 10s ease
}

.overlays {
	background-color: #000;
	bottom: 0;
	left: 0;
	opacity: .5;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 0;
	pointer-events: none;
}

.card-header .overlays
{
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000;
	overflow: hidden;
	width: 100%;
	height: 100%;
	transition:all .4s ease-out;
	z-index: 1;
}

.card-header .overlays.overlayZ {
	transform: scale(0);
}

.card-header .overlays.overlayF {
	opacity: 0;
}

.card-header .overlays.overlayL {
	width: 0;
	height: 100%;
}

.card-header .overlays.overlayR {
	left: 100%;
	width: 0;
	height: 100%;
}

.card-header .overlays.overlayB {
	width: 100%;
	height: 0;
	opacity: .8;
}
.card-header .overlays.overlayB20 {
	width: 100%;
	height: 0;
	opacity: .8;
}
.card-header .overlays.overlayT {
	bottom: 100%;
	width: 100%;
	height: 0;
}

.card-header:hover .overlays.overlayZ {
	transform: scale(1);
	opacity: .8;
}
.card-header:hover .overlays.overlayF {
	opacity: .8;
}
.card-header:hover .overlays.overlayL {
	width: 100%;
	opacity: .8;
}

.card-header:hover .overlays.overlayR {
	width: 100%;
	left: 0;
	opacity: .8;
}
.card-header:hover .overlays.overlayB {
	height: 100%;
}

.card-header:hover .overlays.overlayB20 {
	height: 20%;
}

.card-header:hover .overlays.overlayT {
	bottom: 0;
	height: 100%;
	opacity: .8;
}

@keyframes fadeInShow {
	0% {
		opacity: 0;
		transform: scale(0)
	}
	100% {
		opacity: 1;
		transform: scale(1)
	}
}
/* Change Avatar */
.card .user-image {
	left: 50%;
	margin-left: -45px;
	position: absolute;
	top: 40px;
}
.user-image>img {
	border: 3px solid #fff;
	height: auto;
	width: 90px;
}

.changeAvatar {
	margin: -20px auto 0 auto;
}
.changeAvatar label,.changeCover label {
	display: block;
	cursor: pointer;
	text-align: center;
}
.changeAvatar i,.changeCover i {
	font-size: 20px;
	color: #fff;
	text-shadow: 2px 2px 5px black;
}
.changeAvatar i:hover,.changeCover i:hover {
	font-size: 22px;
	text-shadow: 2px 2px 5px black;
}
.changeAvatar input[type="file"],.changeCover input[type="file"] {
	display: none;
}

.bg-curve {
	background-color: #e5a76b;
	min-height: 250px;
	border-radius: 0px 0px 20px 20px;
}
.scrollmenu {
	overflow: auto;
	overflow-y: hidden;
	-ms-overflow-y: hidden;
	white-space: nowrap;
	padding: 2px;
	height: 40px;
}

/*=== Social Media ===*/
.facebook,
.bg-facebook:hover,
.bg-facebook:focus {
	background: radial-gradient(circle at 30% 107%, #3A5795 0%, #4966A4 5%, #3A5795 45%, #2B4886 60%, #285AEB 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.twitter,
.bg-twitter:hover,
.bg-twitter:focus {
	background: radial-gradient(circle at 30% 107%, #55acee 0%, #55acee 5%, #55acee 45%, #55acee 60%, #285AEB 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.pinterest,
.bg-pinterest:hover,
.bg-pinterest:focus {
	background: radial-gradient(circle at 30% 107%, #bd081c 0%, #bd081c 5%, #bd081c 45%, #bd081c 60%, #285AEB 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.linkedin,
.bg-linkedin:hover,
.bg-linkedin:focus {
	background: radial-gradient(circle at 30% 107%, #0077B5 0%, #0077B5 5%, #0077B5 45%, #0077B5 60%, #285AEB 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.youtube,
.bg-youtube:hover,
.bg-youtube:focus {
	background: radial-gradient(circle at 30% 107%, #cd201f 0%, #cd201f 5%, #cd201f 45%, #cd201f 60%, #cd201f 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.instagram,
.bg-instagram:hover,
.bg-instagram:focus {
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.vimeo,
.bg-vimeo:hover,
.bg-vimeo:focus {
	background: radial-gradient(circle at 30% 107%, #0099CC 0%, #0099CC 5%, #0099CC 45%, #0099CC 60%, #0099CC 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.whatsapp,
.bg-whatsapp:hover,
.bg-whatsapp:focus {
	background: radial-gradient(circle at 30% 107%, #1ebea5 0%, #00e676 5%, #1ebea5 45%, #1ebea5 60%, #285AEB 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.google,
.bg-google:hover,
.bg-google:focus {
	background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.envelope,
.bg-envelope:hover,
.bg-envelope:focus {
	background: radial-gradient(circle at 30% 107%, #ea4335 0%, #ea4335 5%, #ea4335 45%, #ea4335 60%, #f4ab09 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.rss,
.bg-rss:hover,
.bg-rss:focus {
	background: radial-gradient(circle at 30% 107%, #f26522 0%, #fac4a9 5%, #f26522 45%, #f26522 60%, #FFFFFF 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.icon-dark:hover,
.icon-dark:focus {
	background: radial-gradient(circle at 30% 107%, #212529 0%, #212529 5%, #212529 45%, #212529 60%, #212529 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.icon-secondary {
	background: radial-gradient(circle at 30% 107%, #212529 0%, #212529 5%, #212529 45%, #212529 60%, #212529 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.icon-light:hover,
.icon-light:focus {
	background: radial-gradient(circle at 30% 107%, #f8f9fa 0%, #f8f9fa 5%, #f8f9fa 45%, #f8f9fa 60%, #f8f9fa 90%);
	-webkit-background-clip: text;
	/* Also define standard property for compatibility */
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.modal.left .modal-dialog, 
.modal.right .modal-dialog
.modal.bottom .modal-dialog{
	/*max-width: 380px;*/
	min-height: calc(100vh - 56px);
}
.modal.left.show .modal-dialog, 
.modal.right.show .modal-dialog,
.modal.bottom.show .modal-dialog{
	transform: translate(0, 0);
}
.modal.left .modal-content,
.modal.right .modal-content, 
.modal.bottom .modal-content{
	min-height: calc(100vh - 56px);
}
.modal.left .modal-dialog {
	transform: translate(-100%, 0);
	margin: 0 auto 0 0;
}
.modal.right .modal-dialog {
	transform: translate(100%, 0);
	margin: 0 0 0 auto;
}
.modal.bottom .modal-dialog {
	transform: translate(0,100%);
	margin: 0 auto 0  0 ;
}
.scroll-h{
	overflow-x:auto;
	white-space: nowrap;
}

.scroll-h > .row {
	overflow-x: auto;
	white-space: nowrap;
}

.scroll-h > .row > .col {
	display: inline-block;
	float: none;
}
/* Decorations
	.col:nth-child(2n+1) {
	background: green;
	}
	.col:nth-child(2n+2) {
	background: black;
	}
*/
/* Handle card-img Overlay on hover */
section, .container, .container-fluid {
    position: relative;
    word-wrap: break-word;
}

.card.card-bg {
	height: 100vh; /* Mengatur tinggi */
	background-size: cover;
	background-position: center;
	/*background-attachment: fixed;*/
	position: relative;
	cursor:pointer;
}
.card-bg .card-caption {
	position: absolute;
	z-index: 2; /* Menempatkan caption di atas overlay */
}

/* Tata letak caption di tengah */
.caption-center {
	position: absolute;
	top: 50%;
	left: 15%;
	right: 15%;
	text-align: center;
}
/* Tata letak caption di atas */
.caption-top {
	top: 20%;
	left: 15%;
	right: 15%;
	text-align: center;
}
/* Tata letak caption di kiri */
.caption-start {
	top: 50%;
	left: 10%;
	transform: translateY(-50%);
	text-align: left;
}

/* Tata letak caption di bawah */
.caption-bottom {
	right: 15%;
	bottom: 1.25rem;
	left: 15%;
	text-align: center;
}

/* Tata letak caption di kanan */
.caption-end {
	top: 50%;
	right: 10%;
	transform: translateY(-50%);
	text-align: right;
}
@media (max-width: 768px) {
    .card.card-bg {
		height: 50vh; /* Mengatur tinggi */
	}
}

.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%);
}

.img-textTransparent {
position: absolute;
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
color: #f1f1f1;
width: 100%;
padding: 10% 3% 1% 3%;
}

#gotoTop {
display: none;
position: fixed;
bottom: 50px;
right: 10px;
z-index: 99;
}	

/*Position*/
.top-unset {
top: unset !important;
}
.end-unset {
right: unset !important;
}
.bottom-unset {
right: unset !important;
}
.start-unset {
left: unset !important;
}

.top-5 {
top: 5% !important;
}
.end-5 {
right: 5% !important;
}
.bottom-5 {
right: 5% !important;
}
.start-5 {
left: 5% !important;
}

.top-10 {
top: 10% !important;
}
.end-10 {
right: 10% !important;
}
.bottom-10 {
right: 10% !important;
}
.start-10 {
left: 10% !important;
}

.top-15 {
top: 15% !important;
}
.end-15 {
right: 15% !important;
}
.bottom-15 {
right: 15% !important;
}
.start-15 {
left: 15% !important;
}

.top-20 {
top: 20% !important;
}
.end-20 {
right: 20% !important;
}
.bottom-20 {
right: 20% !important;
}
.start-20 {
left: 20% !important;
}

.top-30 {
top: 30% !important;
}
.end-30 {
right: 30% !important;
}
.bottom-30 {
right: 30% !important;
}
.start-30 {
left: 30% !important;
}

.top-35 {
top: 35% !important;
}
.end-35 {
right: 35% !important;
}
.bottom-35 {
right: 35% !important;
}
.start-35 {
left: 35% !important;
}

.top-40 {
top: 40% !important;
}
.end-40 {
right: 40% !important;
}
.bottom-40 {
right: 40% !important;
}
.start-40 {
left: 40% !important;
}

.top-45 {
top: 45% !important;
}
.end-45 {
right: 45% !important;
}
.bottom-45 {
right: 45% !important;
}
.start-45 {
left: 45% !important;
}

.top-55 {
top: 55% !important;
}
.end-55 {
right: 55% !important;
}
.bottom-55 {
right: 55% !important;
}
.start-55 {
left: 55% !important;
}

.top-60 {
top: 60% !important;
}
.end-60 {
right: 60% !important;
}
.bottom-60 {
right: 60% !important;
}
.start-60 {
left: 60% !important;
}

.top-65 {
top: 65% !important;
}
.end-65 {
right: 65% !important;
}
.bottom-65 {
right: 65% !important;
}
.start-65 {
left: 65% !important;
}

.top-70 {
top: 70% !important;
}
.end-70 {
right: 70% !important;
}
.bottom-70 {
right: 70% !important;
}
.start-70 {
left: 70% !important;
}

.top-80 {
top: 80% !important;
}
.end-80 {
right: 80% !important;
}
.bottom-80 {
right: 80% !important;
}
.start-80 {
left: 80% !important;
}

.top-85 {
top: 85% !important;
}
.end-85 {
right: 85% !important;
}
.bottom-85 {
right: 85% !important;
}
.start-85 {
left: 85% !important;
}

.top-90 {
top: 90% !important;
}
.end-90 {
right: 90% !important;
}
.bottom-90 {
right: 90% !important;
}
.start-90 {
left: 90% !important;
}

.top-95 {
top: 95% !important;
}
.end-95 {
right: 95% !important;
}
.bottom-95 {
right: 95% !important;
}
.start-95 {
left: 95% !important;
}