@font-face
{
	font-family:"Oxygen";
	src: url('Oxygen-Regular.ttf');
}

@font-face
{
	font-family:"Poppins";
	src: url('Poppins-Regular.ttf');
}

@font-face
{
	font-family:"Muli";
	src: url('Muli-Regular.ttf');
}

body
{
	font-family:"Muli";
}

.font-size-01
{
	font-size: calc(12px + (14 - 12) * ((100vw - 375px) / (1360 - 375)));
}

.font-size-02
{
	font-size: calc(12px + (16 - 12) * ((100vw - 375px) / (1360 - 375)));
}

.font-size-03
{
	font-size: calc(10px + (14 - 10) * ((100vw - 375px) / (1360 - 375)));
}

.font-size-05
{
	font-size: calc(7px + (14 - 7) * ((100vw - 375px) / (1360 - 375)));
}

.font-size-06
{
	font-size: calc(14px + (16 - 14) * ((100vw - 375px) / (1360 - 375)));
}

.footer
{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
}

/* ====== DESIGN UNTUK LOGIN ====== */
	div.bgn-login
	{
		height: 100vh;
		width : 100%;
		background-image: url("../images/background/citraland-cibubur-bg.jpg");
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}

	div.bgn-login-overlay
	{	
		position: fixed;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		overflow-y: auto;
	}

	div.bgn-login-form
	{
		position: relative;
		top: 50%;
		left: 50%;
		right: 50%;
		transform: translate(-50%, -50%);
		max-width: 95%; max-height: 95%;
	}
	
	div.shadow-dark
	{
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.6), 0px 0px 8px 0px rgba(0, 0, 0, 0.6);
		border: 1px solid #888;
	}
	
	div.shadow-light
	{
		box-shadow: 0px 0px 2px 0px rgba(255, 255, 255, 0.6), 0px 0px 4px 0px rgba(255, 255, 255, 0.6);
		border: 1px solid #888;
	}
	
	.text-darkblue
	{
		color: #00366f;
	}
	
	.text-monterrey
	{
		color: #1e1919;
	}
	
	.show-pass
	{
		cursor: pointer;
		user-select: none;
		-webkit-user-select: none;
	}
	

	
/* ====== PRELOADER CSS ====== */	
	.loader {
	  border: 10px solid transparent;
	  border-radius: 50%;
	  border-top: 10px solid #008060;
	  border-bottom: 10px solid #003975;
	  width: 20vh;
	  height: 20vh;
	  -webkit-animation: spin 2s linear infinite;
	  animation: spin 2s linear infinite;
	}

	@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}

	.preloader {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  z-index: 9999;
	  background:rgba(255,255,255,0.6);
	}

	.preloader .loading {
	  position: absolute;
	  left: 50%;
	  top: 50%;
	  transform: translate(-50%,-50%);
	  font-size: 14px;
	}
	
	
/* ====== DESIGN UNTUK SITEPLAN / PILIH UNIT ====== */

	.view-siteplan
	{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 1031;
		background:#edf2f9;
	}
	
	.img-siteplan
	{
		position: relative;
		left: 0px;
		top: 0px;
		z-index: 0;
	}
	
	.dots
	{
		background-position: top center;
		background-repeat: no-repeat;
		background-size: contain;
		position: absolute;
		user-select: none;
		-webkit-user-select: none;
	}
	
	.dots:hover
	{
		cursor: pointer;
		opacity: 1.0 !important;
	}
	
	.dots:hover > .pin-text
	{
		display: block;
	}
	
	.pin-text
	{
		/*z-index: 9999;*/
		position: absolute;
		top:0;
		transform:translateY(-255%);
		left:-2px;
		white-space:nowrap;
		display: none;
	}

	.pin-text h6
	{
		color:white;
		text-shadow: 1px 1px 1px #000;
	}
	
	#slide{
		transition: transform .3s;
	}
	
	.dragscroll
	{
		cursor : -webkit-grab;
		cursor : -moz-grab;
		cursor : -o-grab;
		cursor : grab;
	}

	.dragscroll:active 
	{
		cursor : -webkit-grabbing;
		cursor : -moz-grabbing;
		cursor : -o-grabbing;
		cursor : grabbing;
	}
	
	/* Mobile Device Zoom */
	.transition{
	  transition: -moz-transform ease 200ms;
	  transition: -ms-transform ease 200ms;
	  transition: -o-transform ease 200ms;
	  transition: -webkit-transform ease 200ms;
	  transition: transform ease 200ms;
	}
	

/* ====== DESIGN UNTUK SITEPLAN / PILIH UNIT ====== */
	.detail-unit
	{
		margin-top: -1px;
		position: fixed;
		z-index: 1032;
		width: 100%;
		height: 100%;
		background:#fbfbfb;
		top: 50%;
		left: 50%;
		right: 50%;
		transform: translate(-50%, -50%);
	}
	
	.div-overflow
	{
		overflow: auto;
	}
	
/* =========== NUP.CSS ========== */


	/*************************** Modal Image Checkbox Ver *****************************/

	#check:checked ~ label #cover
	{
		display:block;
	}

	#cover
	{
		display:none;
		position:fixed;
		top:0;
		bottom:0;
		left:0;
		right:0;
		background:rgba(0,0,0,0.7);
		user-select: none;
		-webkit-user-select: none;
		z-index: 6;
	}

	#box img
	{
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		max-width: 95%;
		max-height: 95%;
		transition: all 5s ease-in-out;
		user-select: none;
		-webkit-user-select: none;
	}

	#box .close {
		position: absolute;
		top: 0;
		right: 10px;
		transition: all 200ms;
		font-size: 50px;
		font-weight: bold;
		text-decoration: none;
		color: #ffffff;
		z-index: 3;
	}

	#box .close:hover {
		color: #06D85F;
	}


	/*************************** checkbox Button With Images ***************************/
	.input-hidden-checkbox {
	  position: absolute;
	  left: -9999px;
	}

	input[type=checkbox]:checked + label 
	{
		border-radius: 8px;
		box-shadow: 0 0 3px 3px #0065b6;
	}

	input[type=checkbox]:hover + label
	{
		border-radius: 8px;
		box-shadow: 0 0 3px 3px #ccc;
		cursor: pointer;
	}

	input[type=checkbox]:checked:hover + label
	{
		border-radius: 8px;
		box-shadow: 0 0 3px 3px #0065b6;
	}

	/* Stuff after this is only to make things more pretty */
	input[type=checkbox] + label
	{
		transition: 200ms all;
	}


	/*************************** TAB RADIO by CODEPEN.io ***************************/
	/*
	 CSS for the main interaction
	*/
	.tabset > input[type="radio"] {
	  position: absolute;
	  display:none;
	}

	.tabset .tab-panel {
	  display: none;
	}

	.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
	.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
	.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
	.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
	.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
	.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
	  display: block;
	}

	/*
	 Styling
	*/

	.tabset > label {
	  position: relative;
	  display: inline-block;
	  padding: 5px;
	  border: 1px solid transparent;
	  border-bottom: 0;
	  cursor: pointer;
	  user-select: none;
	  -webkit-user-select: none;
	}

	.tabset > input:checked + label {
	  border-color: #bababa;
	  border-bottom: 1px solid #fbfbfb;
	  margin-bottom: 0px;
	  border-radius: 5px 5px 0px 0px;
	  font-weight: 900;
	}

	.tab-panel {
	  padding: 10px;
	  border-top: 1px solid #ccc;
	}

	.tab_gap {
		margin-right: 10px;
	}


	/*** Responsive Embed Youtube Video ***/
	.embed-container 
	{
		position: relative;
		padding-bottom: 56.25%;
		height: 0;
		overflow: hidden;
		max-width: 100%;
	} 
	.embed-container iframe, 
	.embed-container object, 
	.embed-container embed 
	{ 
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
	}

	/************** Sticky Booking Button **************/
	.sticky-book-btn
	{
		bottom: 0;
		left:0;
		/*border: 1px solid #bababa;*/
		border-radius: 15px 15px 0px 0px;
		width:100%;
		position: -webkit-sticky;
		position: sticky;
		z-index: 5;
		background-color: #fbfbfb;
		padding-top: 8px;
		padding-bottom: 22px;
		box-shadow: 0 0 15px 3px #00795b;
	}