:root {
	--font-family : 'Arial', sans-serif;
    --font-size   : 18px;

    --border-radius : 1rem;
}
body {
	overflow         : hidden;
	font-family      : var(--font-family);
    font-size        : var(--font-size);
	background-color : #FFFFFF;
    background-image : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.07' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
#main-frame {
	position: absolute;
	overflow: hidden;
	z-index: 0;
}

#img-logo {
	width: 25%;
	height: auto;
}
#img-logo-name {
	width: 75%;
	height: auto;
}

.link-logo {
	width: 128px;
	height: auto;
}

#about-us, #facility-management, #services, #banking, .back-slider {
	cursor: pointer;
}
#content-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0;
	min-width:100vw;
	min-height:100vh;
}
.back-slider {
	position: fixed;
	z-index: 2;
	width: 48px;
	height: 48px;
	background-color: #FFFFFF;
	box-shadow: 0 0 5px rgba(0,0,0,0.8);
	border-radius: 50%;
}
#slide-up {
	bottom: 1.5em;
	left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
}
#slide-right {
	left:1.5em;
	top: 50vh;
}
#slide-left {
	right:1.5em;
	top: 50vh;
}
#slide-down {
	bottom: 1.5em;
	left:0;
    right:0;
    margin-left: auto;
    margin-right: auto;
}

#email-form {
	position: absolute;
	bottom: -1300px;
	width: 20vw;
	border-radius: 20px;
	border: 1px solid #D9D9D9;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	z-index: 1;
	background-color: #FFFFFF;
}
#send-email {
	transition: width 1s;
}

#close-email-form {
	cursor:  pointer;
}

.m-logo-height {
	min-height: 32vh;
}
.m-item-height {
	min-height: 12vh;
}
.m-item-height-last {
	min-height: 15vh;
}
.m-top-divider {
	border: 1px solid #d9d9d9;
}
.m-top-divider:hover, .m-top-divider:active{
	background-color: rgba(217, 217, 217, 0.33);
}
.m-text-start {
	text-align: left!important;
}
.m-text-end {
	text-align: right!important;	
}

#green_cert {
	width  : 82px;
	height : 82px;
}

@media screen and (max-width: 1200px) {

	.logo-wrapper {
		width: 90%;
		display: block;
		margin: auto;
	}
	.back-slider {
		height: 84px;
		width: 84px;
		font-size: 28px;
	}
	.m-text-start, .m-text-end {
		text-align: center!important;
	}
	#email-form {
		width: 90vw;
		left:  50%;
		margin-left: -45vw;
	}
	#green_cert {
		width  : 48px;
		height : 48px;
	}
}

/* Shining */
.shine {
	position : relative;
	overflow : hidden;
}

.shine::after {
	content    : '';
	position   : absolute;
	top        : 0;
	left       : -100%;
	width      : 100%;
	height     : 100%;
	background : linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.8) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	animation : shine 3s infinite alternate;
	animation-delay : var(--delay, 0s);
}

/* Zoom */
.zoom {
	transition : transform 0.3s;
}
.zoom:hover, .zoom:active {
	transform : scale(1.05);
}

.shine::after {
	content    : '';
	position   : absolute;
	top        : 0;
	left       : -100%;
	width      : 100%;
	height     : 100%;
	background : linear-gradient(
		120deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.8) 50%,
		rgba(255, 255, 255, 0) 100%
	);
	animation : shine 3s infinite alternate;
	animation-delay : var(--delay, 0s);
}

@keyframes shine {
	0% {
		left : -100%;
	}
	100% {
		left : 100%;
	}
}

.idx-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 0.25rem;

    padding         : 0.75rem 1.5rem;
    font-size       : inherit;
    transition      : background-color 0.3s, color 0.3s, transform 0.3s;
    cursor          : pointer;
    border-radius   : 1.5rem!important;

    user-select     : none;

    color            : #CC0000;
    background-color : #F0F0F0;
    border           : none!important;

    margin           : 0.5rem;

    text-decoration  : none;
}
.idx-btn:hover {
    color            : #FFFFFF;
    background-color : #CC0000;
}
.idx-btn:active {
    color            : #FFFFFF;
    background-color : #CC0000;
	transform        : scale( 0.9 );
}

.form-control:focus {
    border-color : var(--color-1);
    box-shadow   : 0 0 0 0.25rem rgba(var(--color-1-rgb), 0.25);
}

.error-label {
    color : #FF0000;
}

.color-text-grey {
    color : #C8C8C8;
}