@font-face {
	font-family: 'Montserrat-Medium';
	src: url('/fonts/montserrat/Montserrat-Medium.ttf');
	src: url('/fonts/montserrat/Montserrat-Medium.ttf') format('ttf'),
	     url('/fonts/montserrat/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'Nunito-Regular';
	src: url('/fonts/nunito/Nunito-Regular.ttf');
	src: url('/fonts/nunito/Nunito-Regular.ttf') format('ttf'),
	     url('/fonts/nunito/Nunito-Regular.ttf') format('truetype');
}


@font-face {
	font-family: 'Poppins-Medium';
	src: url('/fonts/poppins/Poppins-Medium.ttf');
	src: url('/fonts/poppins/Poppins-Medium.ttf') format('ttf'),
	     url('/fonts/poppins/Poppins-Medium.ttf') format('truetype');
}


@font-face {
	font-family: 'ScandiaLine-Regular';
	src: url('/fonts/scandia/ScandiaLine-Regular.ttf');
	src: url('/fonts/scandia/ScandiaLine-Regular.ttf') format('ttf'),
	     url('/fonts/scandia/ScandiaLine-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'trueno';
	src: url('/fonts/trueno/trueno.otf');
	src: url('/fonts/trueno/trueno.otf') format('ttf'),
	     url('/fonts/trueno/trueno.otf') format('truetype');
}

.trueno
{
    font-family:'trueno';
}


.scandia
{
    font-family:'ScandiaLine-Regular';
}

.nunito
{
    font-family: 'Nunito-Regular';
}

.mons
{
    font-family: 'Montserrat-Medium';
}

.itim
{
    font-family: 'Itim', cursive;
}

.bold
{
    font-weight: bold;
}

.popins
{
    font-family: 'Poppins-Medium';
}

.bg-green-500
{
    background:#00a6d8 !important;
}

.bg-green-600
{
	background:#0058b2 !important;
}

.cl-green-500
{
    color:#0058b2 !important;
}

.small
{
    font-size:12px !important;
}

.small-lg
{
    font-size:13px;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    /* background:gainsboro; */
}
::-webkit-scrollbar-track {
    /* -webkit-box-shadow:0 0 6px white; */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    /* -webkit-box-shadow: inset 0 0 6px #c0db48; */
    background: gainsboro;
}

.fs-30
{
	font-size:30px;
}


.image-thumbnail
{
	height:200px;
	overflow:hidden;
	transition:0.2s;
}

.hover
{
	transition:0.2s;
}

.hover:hover
{
	margin-top:-4px;
	transition:0.2s;
}

.image-thumbnail img
{
	transition:0.2s;
}

.image-thumbnail img:hover
{
	transform:scale(1.1);
	transition:0.2s;
}

.go-up
{
	width:50px;
	height:50px;
	position:fixed;
	bottom:30px;
	right:30px;
}

.header {
	width: 100%;
}

.progress-bar {
	height: 7px;
	background: ;
	width: 0%;
}

/*  */


.main-item {
	padding: 10px;
	background-color: #fff;
	width: 700px;
  }
  
  .background-masker {
	background-color: #fff;
	position: absolute;
  }
  
  .btn-divide-left {
	top: 0;
	left: 25%;
	height: 100%;
	width: 5%;
  }
  
  @keyframes placeHolderShimmer {
	0% {
	  background-position: -800px 0
	}
	100% {
	  background-position: 800px 0
	}
  }
  
  .animated-background {
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
	animation-name: placeHolderShimmer;
	animation-timing-function: linear;
	background-color: #f6f7f8;
	background: linear-gradient(to right, #eeeeee 8%, #bbbbbb 18%, #eeeeee 33%);
	background-size: 800px 104px;
	height: 70px;
	position: relative;
  }
  
  .static-background {
	background-color: #f6f7f8;
	background-size: 800px 104px;
	height: 70px;
	position: relative;
	margin-bottom: 20px;
  }
  
  .shared-dom {
	width: 800px;
	height: 110px;
  }
  .sub-rect {
	border-radius: 100%;
	width: 70px;
	height: 70px;
	float: left;
	margin: 20px 20px 20px 0;
  }
  .pure-background {
	background-color: #eee;
  }
  
  .css-dom:empty {
	width: 280px;
	height: 220px;
	border-radius: 6px;
	box-shadow: 0 10px 45px rgba(0, 0, 0, .2);
	background-repeat: no-repeat;
	
	background-image:
	  radial-gradient(circle 16px, lightgray 99%, transparent 0),
	  linear-gradient(lightgray, lightgray),
	  linear-gradient(lightgray, lightgray),
	  linear-gradient(lightgray, lightgray),
	  linear-gradient(lightgray, lightgray),
	  linear-gradient(#fff, #fff); 
	
	background-size:
	  32px 32px,
	  200px 32px,
	  180px 32px,
	  230px 16px,
	  100% 40px,
	  280px 100%;
	
	background-position:
	  24px 30px,
	  66px 30px,
	  24px 90px,
	  24px 142px,
	  0 180px,
	  0 0;
}

.hide-wide
{
	display:none;
}

div.scrollmenu {
	background-color:;
	overflow: auto;
	white-space: nowrap;
	transition: 0.3s;
}
  
  
div.scrollmenu a {
	display: inline-block;
	text-align: center;
	border-radius: 10px;
	padding: 5px;
	padding-left: 15px;
	padding-right: 15px;
	/* padding-top: 5px; */
	text-decoration: none;
}

.mt-t
{
	margin-top:1px;
}

.galeri-foto
{
	height:150px;
	overflow:hidden;
}

.circle
{
	width:80px;
	height:80px;
	margin-top:-70px;
	font-size:30px;
}

@media(max-width:768px)
{
	.hide-768
	{
		display:none;
	}

	.hide-wide
	{
		display:block;
	}

	.mt-t
	{
		margin-top:75px;
	}
	
	.go-up
	{
		bottom:70px;
		right:20px;
	}

}