@charset "utf-8";

/* IMPORT RESET */
@import url("normalize.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");


/* Global */

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
 
::-webkit-scrollbar-track {
    background:#fff; 
}
 
::-webkit-scrollbar-thumb {
    background: #de5842; 
    /*border: 1px solid #fff;*/
}

html, body {
	height: 100%;
}

body {
	/*font-family: "Times New Roman", Times, serif;*/
	font-size: 1em;
	/*color: #000;*/
	background: #000;
	line-height: normal !important;
}
img {
	max-width: 100%;
}
a {
	/*color: #074995;*/
	text-decoration: none;
}
a:focus {
	outline: 0px;
}
a:hover {
	/*color: #00aeef;*/
	text-decoration: none;
}

@font-face
{
	font-family: myriad;
	src: url('../font/MyriadPro-Regular.otf');
}

@font-face
{
	font-family: bebas;
	src: url('../font/BEBASNEUE.OTF');
}

@font-face
{
	font-family: roboto;
	src: url('../font/Roboto-Regular.ttf');
}

@font-face
{
	font-family: open;
	src: url('../font/OpenSans-Light_0.ttf');
}


.percentage {
	position: fixed;
	font-size: 250px;
	font-family: open;
	font-weight: 100;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	display: block;
	z-index: 9999;
	color: #fff;
	text-align: center;
	background: transparent !important;
}

.percentage span {
	font-size: 250px;
	/*margin: auto;*/
	/*top: 50%;*/
	/*margin-top: -150px;*/
	position: absolute;
	/*left: 0px;*/
	/*right: 0px;*/
	font-family: bebas;
	line-height: normal;
}

.percentage .mid {
	font-size: 250px;
}

.percentage .mid span {
	position: relative;
	display: block;
	font-family: bebas;
	line-height: normal;
	top: 17px;
}

.circle {
	z-index: 10;
}

.button-close-load {
	position: absolute;
	display: table;
	opacity: 0;
	text-align: center;
	font-size: 24px;
	color: #fff;
	font-family: open;
	font-weight: 100;
	z-index: 1000;
}

/*----- Hover Menu Switch -----*/

.switch-active .loader {
	opacity: 1;
	-webkit-animation: end 1.1s !important;
	animation: end 1.1s !important;
}

.switch-active .loader1 {
	opacity: 1;
	-webkit-animation: end1 1.1s !important;
	animation: end1 1.1s !important;
}

.switch-active {
	border: 1px solid transparent !important;
}

.switch-active .menuline {
	background: rgba(255, 131, 0, 1);
}

.menu-switch:hover .loader {
	opacity: 1;

	-webkit-animation: end 1.1s;
	animation: end 1.1s;

	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.loader {
	opacity: 0;
	top: -1px;
	left: -1px;
	position: absolute;
	border-top: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 2px solid #e70000;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: start 1.1s;
	animation: start 1.1s;

	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.loader,
.loader:after {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

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

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

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

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


.menu-switch:hover .loader1 {
	opacity: 1;

	-webkit-animation: end1 1.1s;
	animation: end1 1.1s;

	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.loader1 {
	opacity: 0;
	top: -1px;
	left: -1px;
	position: absolute;
	border-top: 6px solid transparent;
	border-right: 2px solid #e70000;
	border-bottom: 6px solid transparent;
	border-left: 6px solid transparent;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-animation: start1 1.1s;
	animation: start1 1.1s;

	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.loader1,
.loader1:after {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

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

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

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

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

/* Presets */

.none { /* this class is used to hid the skip to content link at the beginning of the document for accessibility */
	display: none;
}
.clear {
	clear: both;
}
.left {
	float: left;
}
.right {
	float: right;
}
.aligncenter {
	text-align: center;
}
.alignleft {
	text-align: left;
}
.alignright {
	text-align: right;
}

/* Global Styles */

#jpreSlide {
	position: relative !important;
	width: 100%;
	/*height: 100px;*/
	/*background: url('../img/front/logo1.png') 50% 50% no-repeat;*/
}

#jpreLoader {
	top: auto !important;
	bottom: 0px !important;
	opacity: 0;
}

#jprePercentage {
	font-family: sans-serif !important;
	/*font-size: 0px;*/
	font-size: 200px;
	line-height: 200px;
	/*padding-top: 50px;*/
	opacity: 0;
	color: #fff !important;
}

.table {
	position: relative;
	display: table;
	width: 100%;
	height: 100%;
}

.mid {
	position: relative !important;
	display: table-cell !important;
	width: 100% !important;
	height: 100% !important;
	vertical-align: middle !important;
	font-size: 0px;
}

.container {
	position: relative;
	display: block;
	width: 100%;
	background: #000;
	/*padding-top: 65px;*/
}

.navigation {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 100;
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100%;
	text-align: center;
	z-index: 100;
	padding-top: 100px;
	display: none;
}

.nav-batas {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: auto;
}

.nav-item:first-child {
	margin-bottom: 12px;
}

.nav-item {
	color: rgba(255, 255, 255, 0.6);
	position: relative;
	display: table;
	text-align: center;
	margin: auto;
	margin-bottom: 20px;
	line-height: normal;
	top: 50px;
	opacity: 0;
	font-size: 24px;
	padding-bottom: 5px;
	font-family: roboto;
	cursor: pointer;
	line-height: 19px;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}

.nav-item-border {
	position: absolute;
	bottom: 0px;
	left: 0px;
	background: #fff;
	width: 0%;
	height: 1px;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-ms-transition: width 0.3s;
	transition: width 0.3s;
}

.nav-item:hover {
	color: #fff;
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	-ms-transition: color 0.3s;
	transition: color 0.3s;
}

.nav-item:hover .nav-item-border {
	width: 100%;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-ms-transition: width 0.3s;
	transition: width 0.3s;
}

.nav-item-active {
	color: #fff !important;
}

.nav-item-active .nav-item-border {
	width: 100% !important;
}

.nav-small {
	font-size: 16px;
	line-height: 15px;
	margin-bottom: 12px;
}

.nav-small:last-child {
	margin-bottom: 20px;
}

.header-container {
	width: 100%;
	height: 36px;
	background: rgba(0, 0, 0, 0.8);
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 1000;
}

.logo {
	position: relative;
	display: inline-block;
	vertical-align: top;
	display: table;
	padding: 7px 15px 7px 15px;
	/*background: #000;*/
	width: 190px;
	/*top: 23px;*/
	z-index: 100;
	/*margin-left: 30px;*/
}

.logo:hover .logo-image {
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.logo-image {
	width: 159px;
	position: relative;
	top: 0px;
	left: 0px;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.logo-image1 {
	width: 159px;
	position: absolute;
	top: 7px;
	left: 15px;
}

/*Logo revisi*/
.logo-sayogo {
	width: 400px;
    height: 262px;
    margin: 0 auto;
    background: url('../img/front/logo-sayogo.png') left top !important;
    background-size: cover !important;
    animation: play 2s steps(41) infinite;
}

@keyframes play {
    100% { background-position: -16400px 0px; }
}

@-webkit-keyframes play {
    100% { background-position: -16400px 0px; }
}

@-moz-keyframes play {
    100% { background-position: -16400px 0px; }
}

.header-right {
	position: absolute;
	right: 0px;
	height: 100%;
	top: 0px;
	font-size: 0px;
	padding-right: 5px;
	display: table;
}

.header-item {
	position: relative;
	display: inline-block;
	vertical-align: top;
	padding: 0px 10px;
	font-size: 11px;
	color: #fff;
	font-family: roboto;
	opacity: 0.7;
	-webkit-transition: opacity 0.7s;
	-moz-transition: opacity 0.7s;
	-ms-transition: opacity 0.7s;
	transition: opacity 0.7s;
}

.header-item:hover {
	opacity: 1;
	-webkit-transition: opacity 0.7s;
	-moz-transition: opacity 0.7s;
	-ms-transition: opacity 0.7s;
	transition: opacity 0.7s;
}

.footer-container {
	font-family: roboto;
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 36px;
	background: rgba(0, 0, 0, 0.8);
	font-size: 0px;
	padding: 0px 15px;
	color: #fff;
	display: table;
}

.footer-left {
	position: absolute;
	left: 0px;
	top: 10px;
	bottom: 0px;
	font-size: 11px;
	width: 70%;
	margin: auto;
	/*display: table;*/
}

.footer-right {
	position: absolute;
	right: 0px;
	top: 13px;
	bottom: 0px;
	font-size: 0px;
	text-align: right;
	width: 50%;
	margin: auto;
	/*display: table;*/
}

.menu-switch {
	display: none;
	position: fixed;
	z-index: 100;
	right: 15px;
	top: 0px;
	/*border: 1px solid rgba(255, 255, 255, 0.3);*/
	/*border-radius: 50%;*/
	width: 35px;
	height: 35px;
	cursor: pointer;
	z-index: 1000;
	/*padding-top: 12px;*/
	-webkit-transition: border 0.5s;
	-moz-transition: border 0.5s;
	-ms-transition: border 0.5s;
	transition: border 0.5s;
}

.menu-switch .table {
	position: absolute;
	top: 0px;
	left: 0px;
}

.menu-switch svg path {
	stroke-dasharray: 0, 0, 300;
	-webkit-transition: stroke-dasharray 0.7s;
	-moz-transition: stroke-dasharray 0.7s;
	-ms-transition: stroke-dasharray 0.7s;
	transition: stroke-dasharray 0.7s;
}

.menu-switch:hover svg path {
	stroke-dasharray: 0, 300, 300;
	-webkit-transition: stroke-dasharray 0.7s;
	-moz-transition: stroke-dasharray 0.7s;
	-ms-transition: stroke-dasharray 0.7s;
	transition: stroke-dasharray 0.7s;
}

.menuline {
	position: relative;
	display: block;
	width: 25px;
	height: 2px;
	margin: 0 auto;
	margin-bottom: 4px;
	/*background: #c46718;*/
	/*background: rgba(255, 255, 255, 0.4);*/
	background: #ccc;
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	-ms-transition: background 0.4s;
	transition: background 0.4s;
}

.menuline:last-child {
	margin-bottom: 0px;
}

.menu-switch:hover .menuline {
	background: rgba(255, 131, 0, 1);
	-webkit-transition: background 0.4s;
	-moz-transition: background 0.4s;
	-ms-transition: background 0.4s;
	transition: background 0.4s;
}

.content {
	width: 100%;
	position: relative;
	display: block;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	/*min-height: 400px;*/
	/*padding-top: 10px;*/
	/*padding-bottom: 45px;*/

	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);

	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	-ms-transition: -ms-transform 0.4s;
	transition: transform 0.4s;
}

.content-blur {
	opacity: 0.1;
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;

	-webkit-transition-delay: 0.2s;
	-moz-transition-delay: 0.2s;
	-ms-transition-delay: 0.2s;
	transition-delay: 0.2s;
}

.content-active {
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);

	-webkit-transition: -webkit-transform 0.4s;
	-moz-transition: -moz-transform 0.4s;
	-ms-transition: -ms-transform 0.4s;
	transition: transform 0.4s;
}

.footer {
	position: relative;
	display: block;
	width: 100%;
	font-size: 0px;
	padding-bottom: 20px;
	z-index: 200;
}

.footer-item {
	width: 100%;
	display: inline-block;
	vertical-align: top;
	font-size: 11px;
	font-family: myriad;
	color: #fff;
}

.footer-item:first-child {
	margin-bottom: 20px;
	margin-top: 50px;
	font-size: 0px;
}

.footer-item a {
	color: #fff;
}

.footer-icon {
	position: relative;
	display: inline-block;
	cursor: pointer;
	vertical-align: top;
	margin-right: 15px;
	opacity: 0.8;
	/*width: 30px;*/
	/*height: 30px;*/
	/*padding-top: 8px;*/
	/*top: 30px;*/
	/*opacity: 0;*/
	/*border: 1px solid #c46718;*/
	/*border-radius: 50%;*/
}

.footer-icon:last-child {
	opacity: 1;
	padding: 0px 3px;
}

.footer-mute-switch {
	opacity: 1;
	padding: 0px 3px;
	margin-right: 0px;
}

.footer-play-switch {
	display: none;
}

.footer-mute-switch:hover .footer-mute {
	width: 100%;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-ms-transition: width 0.3s;
	transition: width 0.3s;
}

.footer-play-switch .footer-mute {
	width: 100%;
}
/*
.footer-play-switch:hover .footer-mute {
	width: 0%;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-ms-transition: width 0.3s;
	transition: width 0.3s;
}*/

.footer-mute {
	position: absolute;
	left: 0px;
	top: 7px;
	height: 2px;
	background: #fff;
	width: 0px;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-ms-transition: width 0.3s;
	transition: width 0.3s;
}

.footer-mute-active .footer-mute {
	width: 100% !important;
}

.footer-play-active .footer-mute {
	width: 0% !important;
}

.footer-icon svg { 
	position: absolute;
	top: 0px;
	display: block; 
}

.footer-icon .table { 
	position: absolute;
	top: 0px;
	left: 0px;
}

.footer-icon svg polygon {
	stroke-dasharray: 0, 0, 300;
	-webkit-transition: stroke-dasharray 0.7s;
	-moz-transition: stroke-dasharray 0.7s;
	-ms-transition: stroke-dasharray 0.7s;
	transition: stroke-dasharray 0.7s;
}

.footer-icon:hover svg polygon {
	stroke-dasharray: 0, 300, 300;
	-webkit-transition: stroke-dasharray 0.7s;
	-moz-transition: stroke-dasharray 0.7s;
	-ms-transition: stroke-dasharray 0.7s;
	transition: stroke-dasharray 0.7s;
}

#hex1 {
	width: 28px;
	height: 28px;

	top: 1px;
	left: 1px;
}

#hex2 {
	width: 30px;
	height: 30px;
}

#hex3 {
	width: 200px;
	height: 200px;
}

#color1 {
	background-color: #000; 
}

#color2 {
	background-color: #f5811e;
}

#color3 {
	background-color: #D93;
}

.hexagon-wrapper {
	text-align: center;
	/*margin: 20px;*/
	position: absolute;
	/*display: inline-block;*/
	left: 0px;
	top: 0px;
}

.hexagon {
	height: 100%;
	width: calc(100% * 0.57735);
	display: inline-block;
}

.hexagon:before {
	position: absolute;
	top: 0;
	right: calc((100% / 2) - ((100% * 0.57735) / 2));
	background-color: inherit;
	height: inherit;
	width: inherit;
	content: '';
	transform: rotateZ(60deg);
}

.hexagon:after {
	position: absolute;
	top: 0;
	right: calc((100% / 2) - ((100% * 0.57735) / 2));
	background-color: inherit;
	height: inherit;
	width: inherit;
	content: '';
	transform: rotateZ(-60deg);
}

.footer-icon:last-child {
	margin-right: 0px;
}

.footer-icon img {
	height: 12px;
	position: relative;
	display: block;
	margin: auto;
}


/*----- HOME CSS -----*/

.home-container {
	position: relative;
	top: 0px;
	left: 0px;
	display: block;
	height: 100%;
	width: 100%;
	margin: auto;
	overflow: hidden;
	/*z-index: 10;*/
}

#voices {
	display: none;
}

.home-image {
	/*background: url('../img/front/home-background.jpg') no-repeat;*/
	/*background-position: 50% !important;*/
	/*background-size: cover !important;*/
	position: absolute;
	display: block;
	top: 0px;
	left: 0px;

	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);

	/*-webkit-transform-origin : 50%;*/
	/*-moz-transform-origin : 50%;*/
	/*-ms-transform-origin : 50%;*/
	/*transform-origin : 50%;*/

	-webkit-transition: -webkit-transform 0.5s ease, opacity 0.8s;
	-moz-transition: -moz-transform 0.5s ease, opacity 0.8s;
	-ms-transition: -ms-transform 0.5s ease, opacity 0.8s;
	transition: transform 0.5s ease, opacity 0.8s;

	-webkit-transition-delay: 0.3s;
	-moz-transition-delay: 0.3s;
	-ms-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.home-image-click {
	opacity: 0;

	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	transform: scale(2);

	-webkit-transform-origin : 50% 90%;
	-moz-transform-origin : 50% 90%;
	-ms-transform-origin : 50% 90%;
	transform-origin : 50% 90%;

	-webkit-transition: -webkit-transform 0.8s ease, opacity 0.5s;
	-moz-transition: -moz-transform 0.8s ease, opacity 0.5s;
	-ms-transition: -ms-transform 0.8s ease, opacity 0.5s;
	transition: transform 0.8s ease, opacity 0.5s;
}

.home-lamp {
	position: absolute;
	width: 0.633%;
	height: 0.869%;
	background-size: contain !important;
	background: url('../img/front/lamp.png') no-repeat;
}

.home-lamp1 {
	left: 17.110%;
	top: 55.304%;
	-webkit-animation: lamp1 7s infinite;
	-moz-animation: lamp1 7s infinite;
	-ms-animation: lamp1 7s infinite;
    animation: lamp1 7s infinite;
}

@-webkit-keyframes lamp1 {
    0% {
    	opacity: 0;
    }
    10% {
    	opacity: 1;
    }
    20% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp2 {
	left: 17.833%;
	top: 54.505%;
	-webkit-animation: lamp2 5s infinite;
	-moz-animation: lamp2 5s infinite;
	-ms-animation: lamp2 5s infinite;
    animation: lamp2 5s infinite;
}

@-webkit-keyframes lamp2 {
    40% {
    	opacity: 0;
    }
    50% {
    	opacity: 1;
    }
    60% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp3 {
	left: 21.863%;
	top: 55.304%;
	-webkit-animation: lamp3 5s infinite;
	-moz-animation: lamp3 5s infinite;
	-ms-animation: lamp3 5s infinite;
    animation: lamp3 5s infinite;
}

@-webkit-keyframes lamp3 {
    40% {
    	opacity: 0;
    }
    50% {
    	opacity: 1;
    }
    60% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp4 {
	left: 23.447%;
	top: 54.505%;
	-webkit-animation: lamp4 7s infinite;
	-moz-animation: lamp4 7s infinite;
	-ms-animation: lamp4 7s infinite;
    animation: lamp4 7s infinite;
}

@-webkit-keyframes lamp4 {
    40% {
    	opacity: 0;
    }
    50% {
    	opacity: 1;
    }
    60% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp5 {
	left: 17.833%;
	top: 55.304%;
	-webkit-animation: lamp5 7s infinite;
	-moz-animation: lamp5 7s infinite;
	-ms-animation: lamp5 7s infinite;
    animation: lamp5 7s infinite;
}

@-webkit-keyframes lamp5 {
    50% {
    	opacity: 0;
    }
    60% {
    	opacity: 1;
    }
    70% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp6 {
	left: 34.727%;
	top: 54.505%;
	-webkit-animation: lamp6 5s infinite;
	-moz-animation: lamp6 5s infinite;
	-ms-animation: lamp6 5s infinite;
    animation: lamp6 5s infinite;
}

@-webkit-keyframes lamp6 {
    20% {
    	opacity: 0;
    }
    30% {
    	opacity: 1;
    }
    40% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp7 {
	left: 43.409%;
	top: 55.304%;
	-webkit-animation: lamp7 7s infinite;
	-moz-animation: lamp7 7s infinite;
	-ms-animation: lamp7 7s infinite;
    animation: lamp7 7s infinite;
}

@-webkit-keyframes lamp7 {
    30% {
    	opacity: 0;
    }
    40% {
    	opacity: 1;
    }
    50% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp8 {
	left: 50.380%;
	top: 55.304%;
	-webkit-animation: lamp8 7s infinite;
	-moz-animation: lamp8 7s infinite;
	-ms-animation: lamp8 7s infinite;
    animation: lamp8 7s infinite;
}

@-webkit-keyframes lamp8 {
    10% {
    	opacity: 0;
    }
    20% {
    	opacity: 1;
    }
    30% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp9 {
	left: 56.173%;
	top: 54.505%;
	-webkit-animation: lamp9 5s infinite;
	-moz-animation: lamp9 5s infinite;
	-ms-animation: lamp9 5s infinite;
    animation: lamp9 5s infinite;
}

@-webkit-keyframes lamp9 {
    70% {
    	opacity: 0;
    }
    80% {
    	opacity: 1;
    }
    90% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp10 {
	left: 66.566%;
	top: 54.505%;
	-webkit-animation: lamp10 7s infinite;
	-moz-animation: lamp10 7s infinite;
	-ms-animation: lamp10 7s infinite;
    animation: lamp10 7s infinite;
}

@-webkit-keyframes lamp10 {
    10% {
    	opacity: 0;
    }
    20% {
    	opacity: 1;
    }
    30% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp11 {
	left: 68.948%;
	top: 55.304%;
	-webkit-animation: lamp11 7s infinite;
	-moz-animation: lamp11 7s infinite;
	-ms-animation: lamp11 7s infinite;
    animation: lamp11 7s infinite;
}

@-webkit-keyframes lamp11 {
    60% {
    	opacity: 0;
    }
    70% {
    	opacity: 1;
    }
    80% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp12 {
	left: 76.072%;
	top: 54.505%;
	-webkit-animation: lamp12 7s infinite;
	-moz-animation: lamp12 7s infinite;
	-ms-animation: lamp12 7s infinite;
    animation: lamp12 7s infinite;
}

@-webkit-keyframes lamp12 {
    10% {
    	opacity: 0;
    }
    20% {
    	opacity: 1;
    }
    30% {
    	opacity: 0;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp13 {
	left: 79.354%;
	top: 55.304%;
	-webkit-animation: lamp13 7s infinite;
	-moz-animation: lamp13 7s infinite;
	-ms-animation: lamp13 7s infinite;
    animation: lamp13 7s infinite;
}

@-webkit-keyframes lamp13 {
    80% {
    	opacity: 0;
    }
    90% {
    	opacity: 1;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp14 {
	right: 21.229%;
	top: 42.347%;
	-webkit-animation: lamp14 10s infinite;
	-moz-animation: lamp14 10s infinite;
	-ms-animation: lamp14 10s infinite;
    animation: lamp14 10s infinite;
}

@-webkit-keyframes lamp14 {
    80% {
    	opacity: 0;
    }
    90% {
    	opacity: 1;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp15 {
	right: 29.784%;
	top: 43.217%;
	-webkit-animation: lamp15 7s infinite;
	-moz-animation: lamp15 7s infinite;
	-ms-animation: lamp15 7s infinite;
    animation: lamp15 7s infinite;
}

@-webkit-keyframes lamp15 {
    80% {
    	opacity: 0;
    }
    90% {
    	opacity: 1;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp16 {
	right: 16.349%;
	top: 43.217%;
	-webkit-animation: lamp16 5s infinite;
	-moz-animation: lamp16 5s infinite;
	-ms-animation: lamp16 5s infinite;
    animation: lamp16 5s infinite;
}

@-webkit-keyframes lamp16 {
    80% {
    	opacity: 0;
    }
    90% {
    	opacity: 1;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp17 {
	right: 42.468%;
	top: 42.347%;
	-webkit-animation: lamp17 7s infinite;
	-moz-animation: lamp17 7s infinite;
	-ms-animation: lamp17 7s infinite;
    animation: lamp17 7s infinite;
}

@-webkit-keyframes lamp17 {
    80% {
    	opacity: 0;
    }
    90% {
    	opacity: 1;
    }
    100% {
    	opacity: 0;
    }
}

.home-lamp18 {
	right: 54.562%;
	top: 43.217%;
	-webkit-animation: lamp18 10s infinite;
	-moz-animation: lamp18 10s infinite;
	-ms-animation: lamp18 10s infinite;
    animation: lamp18 10s infinite;
}

@-webkit-keyframes lamp18 {
    80% {
    	opacity: 0;
    }
    90% {
    	opacity: 1;
    }
    100% {
    	opacity: 0;
    }
}

.home-sayogo {
	position: absolute;
	z-index: 1;
	width: 64.299%;
	height: 17.304%;
	left: calc(17.818% + 5px);
	/*left: 0px;*/
	/*right: 0px;*/
	/*margin: auto;*/
	top: 29.434%;
    background: url('../img/front/home-logo-desk.png');
	background-size: contain !important;
	background-position: 0px !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.home-sayogo-active {
	-webkit-animation: mymove 3s infinite;
	-moz-animation: mymove 5s infinite;
	-ms-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
}

@-webkit-keyframes mymove {
    0% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    1% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    2% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    3% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    4% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    29% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    30% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    32% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    60% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    61% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    66% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    68% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    70% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    96% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    97% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    98% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
}

@keyframes mymove {
    0% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    1% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    2% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    3% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    4% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    29% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    30% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    32% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    60% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    61% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    66% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    68% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    70% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    96% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
    97% {
    	background-image: url('../img/front/home-logo-desk1.png');
    	background-size: contain !important;
    }
    98% {
    	background-image: url('../img/front/home-logo-desk.png');
    	background-size: contain !important;
    }
}

.home-sayogo1 {
	position: absolute;
	z-index: 1;
	width: 6.206%;
	height: 5.043%;
	right: 29.385%;
	bottom: 31.913%;
    background: url('../img/front/incorporated1.png');
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-position: 0px !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.home-sayogo1-active {
	-webkit-animation: mymove1 3s infinite;
	-moz-animation: mymove1 5s infinite;
	-ms-animation: mymove1 5s infinite;
    animation: mymove1 5s infinite;
}

@-webkit-keyframes mymove1 {
    0% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    11% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    12% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    13% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    14% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    39% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    40% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    42% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    70% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    71% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    76% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    78% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    80% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    96% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    97% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    98% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
}

@keyframes mymove1 {
    0% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    9% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    10% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    12% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    30% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    31% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    32% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    33% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    34% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    70% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    71% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    76% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    78% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    80% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    96% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
    97% {
    	background-image: url('../img/front/incorporated11.png');
    	background-size: contain !important;
    }
    98% {
    	background-image: url('../img/front/incorporated1.png');
    	background-size: contain !important;
    }
}

.home-sayogo-ticket-switch {
	position: absolute;
	width: 7.541%;
	height: 18.347%;
	right: 28.770%;
	top: 62.956%;
	z-index: 1;
	cursor: pointer;
}

.home-background {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url('../img/front/home-background3.jpg') 50% no-repeat;
	background-size: cover !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.home-taxi1 {
	position: absolute;
	width: 43.850%;
	height: 25.130%;
	background: url('../img/front/taxi1.png') no-repeat;
	background-size: contain !important;
	background-position: 0px !important;
	left: -7.406%;
	bottom: 2.695% !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.home-taxi2 {
	position: absolute;
	width: 40.629%;
	height: 25.130%;
	background: url('../img/front/taxi2.png') no-repeat;
	background-size: contain !important;
	background-position: 0px !important;
	right: -12.086%;
	bottom: 2.695% !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.home-people1 {
	position: absolute;
	width: 30.988%;
	height: 61.043%;
	background: url('../img/front/people1.png') no-repeat;
	background-size: contain !important;
	background-position: 0px !important;
	right: -2.534%;
	top: 53.749% !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.home-people2 {
	position: absolute;
	width: 16.223%;
	height: 73.913%;
	background: url('../img/front/people2.png') no-repeat;
	background-size: contain !important;
	background-position: 0px !important;
	left: 2.534%;
	top: 60.347% !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.home-people3 {
	position: absolute;
	width: 13.941%;
	height: 58.782%;
	background: url('../img/front/people3.png') no-repeat;
	background-size: contain !important;
	background-position: 0px 0px !important;
	left: -5.069%;
	top: 63.913% !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.home-active {
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	filter: grayscale(0%);

	-webkit-transition: 0.5s linear;
	-moz-transition: 0.5s linear;
	-ms-transition: 0.5s linear;
	transition: 0.5s linear;
}

.home-enter-switch {
	width: 130px;
	height: 130px;
	position: absolute;
	display: table;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0);
	margin: auto;
	left: calc((100% - 130px) / 2);
	/* right: 0px; */
	cursor: pointer;
	bottom: 20.608%;
	backface-visibility: hidden;
	-webkit-animation: flip 13s infinite;
	-moz-animation: flip 13s infinite;
	-ms-animation: flip 13s infinite;
    animation: flip 13s infinite;
}

.home-enter-outer {
	background: rgba(0, 0, 0, 0.8);
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	border-radius: 50%;
}

.home-enter:hover .home-enter-outer {
	-webkit-animation: enter 0.4s;
	-moz-animation: enter 0.4s;
	-ms-animation: enter 0.4s;
    animation: enter 0.4s;
}

@-webkit-keyframes enter {
    0% {
    	width: 130px;
		height: 130px;
		bottom: 20.608%;
    }
    40% {
    	width: 140px;
		height: 140px;
		bottom: calc(20.608% - 5px);
    }
    50% {
    	width: 130px;
		height: 130px;
    }
    60% {
    	width: 135px;
		height: 135px;
		bottom: calc(20.608% - 2px);
    }
    100% {
    	width: 130px;
		height: 130px;
		bottom: 20.608%;
    }
}

@keyframes enter {
    0% {
    	-webkit-transform: scale(1);
    	-moz-transform: scale(1);
    	-ms-transform: scale(1);
    	transform: scale(1);
    }
    40% {
    	-webkit-transform: scale(1.1);
    	-moz-transform: scale(1.1);
    	-ms-transform: scale(1.1);
    	transform: scale(1.1);
    }
    50% {
    	-webkit-transform: scale(1);
    	-moz-transform: scale(1);
    	-ms-transform: scale(1);
    	transform: scale(1);
    }
    60% {
    	-webkit-transform: scale(1.05);
    	-moz-transform: scale(1.05);
    	-ms-transform: scale(1.05);
    	transform: scale(1.05);
    }
    100% {
    	-webkit-transform: scale(1);
    	-moz-transform: scale(1);
    	-ms-transform: scale(1);
    	transform: scale(1);
    }
}

.home-enter .mid {
	font-size: 24px;
	text-align: center;
	line-height: 22px;
	color: #fff;
	font-family: bebas;
}

@keyframes flip {
    0% {
    	-webkit-transform: scaleX(1);
    	-moz-transform: scaleX(1);
    	-ms-transform: scaleX(1);
    	transform: scaleX(1);
    }
    6% {
    	-webkit-transform: scaleX(-1);
    	-moz-transform: scaleX(-1);
    	-ms-transform: scaleX(-1);
    	transform: scaleX(-1);
    }
    12% {
    	-webkit-transform: scaleX(1);
    	-moz-transform: scaleX(1);
    	-ms-transform: scaleX(1);
    	transform: scaleX(1);
    }
    50% {
    	-webkit-transform: scaleX(1);
    	-moz-transform: scaleX(1);
    	-ms-transform: scaleX(1);
    	transform: scaleX(1);
    }
    56% {
    	-webkit-transform: scaleX(-1);
    	-moz-transform: scaleX(-1);
    	-ms-transform: scaleX(-1);
    	transform: scaleX(-1);
    }
    62% {
    	-webkit-transform: scaleX(1);
    	-moz-transform: scaleX(1);
    	-ms-transform: scaleX(1);
    	transform: scaleX(1);
    }
}


/*----- Profile CSS -----*/

.hide-it {
	display: none !important;
}

/*.profile-render {
	background: url('../img/front/profile-background.jpg') 50% no-repeat;
	background-attachment: fixed;
	background-size: cover !important;
}
*/
.profile-back {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	background: url('../img/front/profile-background1.jpg') 50% no-repeat;
	background-size: cover !important;
	overflow: auto;
	/*display: none;*/
	z-index: 10;
}

.profile-container {
	z-index: 10;
	position: relative;
	/*display: none;*/
	top: 0px;
	left: 0px;
	/*width: 100vw;*/
	padding-top: 100px;
}

.profile-item {
	position: relative;
	display: block;
	width: 100%;
	margin: auto;
	text-align: center;
	font-size: 0px;
	color: #fff;
	/*color: #b9b9b9;*/
	padding: 0px 20px;
}

.profile-logo {
	position: relative;
	display: block;
	margin: 0px auto 40px;
}

.profile-top-text {
	position: relative;
	display: table;
	margin: 0px auto 30px;
	font-size: 14px;
	font-family: roboto;
	line-height: 24px;
	max-width: 560px;
	width: 100%;
}

.profile-photo {
	position: relative;
	display: table;
	margin: auto;
}

.profile-item-border {
	position: relative;
	display: block;
	margin: 60px auto;
	width: 100%;
	max-width: 560px;
	height: 1px;
	background: rgba(255, 255, 255, 0.3);
}

.profile-graha {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 50%;
	text-align: right;
	padding-right: 25px;
}

.profile-graha-text {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 50%;
	padding-left: 25px;
	font-size: 14px;
	font-family: roboto;
	text-align: left;
	line-height: 24px;
}

.profile-item-menu {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 33.33%;
	padding: 0px 25px;
}

.profile-item-menu-big span {
	position: relative;
	display: block;
	padding-right: 15px;
	color: #f5811e;
	font-size: 30px;
	font-family: bebas;
	line-height: 28px;
	text-align: right;
}

.profile-item-menu-ver {
	position: absolute;
	right: 25px;
	top: 0px;
	width: 1px;
	height: 100%;
	background: rgba(255, 255, 255, 0.3);
}

.profile-item-menu-ver:last-child {
	right: 30px;
}

.profile-menu-title {
	position: relative;
	display: block;
	font-size: 20px;
	font-family: bebas;
	color: #fff;
	/*color: #b9b9b9;*/
	text-transform: uppercase;
	margin-bottom: 10px;
	text-align: left;
}

.profile-menu-title1 {
	margin-top: 30px;
}

.profile-menu-list {
	position: relative;
	display: block;
	font-family: 'roboto';
	font-size: 14px;
	color: #fff;
	/*color: #b9b9b9;*/
	text-align: left;
	margin-bottom: 10px;
	line-height: 14px;
}

.profile-one {
	position: relative;
	display: block;
	width: 100vw;
	height: 1200px;
	padding: 175px 10px 100px;
	background: url('../img/front/profile-color.jpg') 50% no-repeat;
	background-size: cover !important;
}

.profile-one-logo {
	position: relative;
	display: table;
	margin: 0 auto 15px;
}

.profile-one-logo-text {
	position: relative;
	display: table;
	text-align: center;
	margin: auto;
	width: 100%;
	padding: 0px 10px;
	max-width: 300px;
	font-size: 14px;
	font-family: roboto;
	line-height: 24px;
	color: #000;
}

.profile-one-box-out {
	margin: auto;
	position: absolute;
	top: auto;
	bottom: 100px;
	left: 0px;
	right: 0px;
	display: table;
	width: calc(100% - 30px);
	max-width: 646px;
	border: 1px solid rgba(0, 0, 0, 0.5);
	padding: 8px;
}

.profile-one-box-in {
	position: relative;
	display: block;
	width: 100%;
	border: 1px solid rgba(0, 0, 0, 0.2);
	padding: 75px 32px;
	text-align: center;
}

.profile-one-box-title {
	position: relative;
	display: block;
	font-size: 30px;
	font-family: bebas;
	color: #f5811e;
	/*margin-bottom: 10px;*/
}

.profile-one-box-tag {
	position: relative;
	display: block;
	font-size: 14px;
	color: #000;
	font-family: roboto;
	line-height: 24px;
}

.profile-item:last-child {
	padding-top: 60px;
}

.profile-last-text {
	position: relative;
	display: block;
	width: 100%;
	max-width: 354px;
	font-size: 14px;
	font-family: roboto;
	line-height: 24px;
	margin: auto;
	margin-bottom: 34px;
}

.profile-item-icon {
	width: 25%;
	height: 112px;
	position: relative;
	display: inline-block;
	text-align: center;
	vertical-align: top;
}

.profile-button-group {
	position: relative;
	display: block;
	text-align: center;
	margin: 100px auto 0px;
}

.profile-contact {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 100%;
	max-width: 400px;
	background: #fff;
	color: #000;
	font-size: 24px;
	font-family: bebas;
	padding: 15px 0px;
}


/*----- Client CSS -----*/

.client-render {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100vw;
	height: 100vh;
	background: url('../img/front/load-backgound2.jpg') 50% no-repeat;
	background-size: cover !important;
}

.client-container {
	position: fixed;
	width: 100%;
	height: 100vh !important;
	background: transparent;
	padding: 15px 15px 50px;
	padding-top: 50px;
	font-size: 0px;
	top: 0px;
	left: 0px;
	display: none;
	z-index: 9999;
}

.client-close {
	position: absolute;
	width: 35px;
	height: 35px;
	top: 40px;
	left: 0px;
	cursor: pointer;
	z-index: 9999;
	right: 0px;
	margin: auto;
}

.gallery-close {
	position: fixed;
	width: 35px;
	height: 35px;
	top: 40px;
	left: 0px;
	cursor: pointer;
	z-index: 9999;
	right: 0px;
	margin: auto;
}

.client-line {
	position: absolute;
	width: 100%;
	height: 2px;
	top: 16px;
	background: #fff;
}

.client-line:first-child {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.client-line:last-child {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.client-border {
	position: relative;
	display: block;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	width: 100%;
	height: 100%;
	border: 10px solid rgba(245, 129, 30, 0.2);

	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);

	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	-ms-transition: -ms-transform 0.5s;
	transition: transform 0.5s;

	-webkit-transition-delay: 0.4s;
	-moz-transition-delay: 0.4s;
	-ms-transition-delay: 0.4s;
	transition-delay: 0.4s;
}

.client-border-active {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);

	-webkit-transition: -webkit-transform 0.5s;
	-moz-transition: -moz-transform 0.5s;
	-ms-transition: -ms-transform 0.5s;
	transition: transform 0.5s;

	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.client-left {
	position: absolute;
	width: 50%;
	height: 100%;
	left: 0px;
	/*top: 30px;*/
	/*opacity: 0;*/
}

.client-left .mid {
	padding-right: 65px;
	font-family: bebas;
	text-align: right;
	color: #fff;
	font-weight: 100;
	font-size: 48px;
	line-height: 37px;
}

.client-left .mid span {
	font-size: 72px;
	color: #f5811e;
	line-height: 55px;
}

.client-right {
	position: absolute;
	width: 50%;
	height: calc(100% + 25px);
	right: 0px;
	/*top: 30px;*/
	overflow: auto;
	padding-left: 65px;
	padding-top: 40px;
	/*opacity: 0;*/
}

.client-right-title {
	position: relative;
	display: block;
	text-align: center;
	font-size: 48px;
	font-family: bebas;
	color: #fff;
	font-weight: 100;
	margin-bottom: 50px;
	display: none;
	line-height: 37px;
}

.client-right-title span {
	font-size: 72px;
	color: #f5811e;
	line-height: 55px;
}

.client-group {
	position: relative;
	display: block;
	margin-bottom: 45px;
	color: #fff;
	font-family: open;
}

.client-category {
	position: relative;
	display: block;
	font-size: 30px;
	margin-bottom: 10px;
	font-family: bebas;
	text-transform: uppercase;
}

.client-list {
	position: relative;
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-family: roboto;
	text-transform: uppercase;
}

.client-ctn {
	opacity: 0;
	top: 30px;
}


/*----- Contact CSS -----*/

.contact-ajax-result {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 0px;
	opacity: 1;
	width: 100%;
	height: 100vh;
	background: #000;
	overflow: hidden;
}

.contact-render {
	width: 100vw;
	height: 100vh;
	position: fixed;
	left: 0px;
	top: 0px;
	background: url('../img/front/profile-background1.jpg') 50% no-repeat;
	background-size: cover !important;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	filter: grayscale(100%);
}

.contact-container {
	background: transparent;
	/*position: relative;
	width: 100%;
	height: calc(100vh - 85px) !important;
	padding: 15px;
	top: 85px;
	font-size: 0px;
	left: 0px;*/
}

.contact-back-left {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: 50%;
	background: url('../img/front/contact.jpg') 50% no-repeat;
	background-size: auto 100% !important;
}

.contact-border {
	/*position: absolute;
	display: block;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: auto;
	border: 10px solid rgba(245, 129, 30, 0.2);
	font-size: 0px;
	width: calc(100% - 25px);
	height: calc(100% - 25px);*/
/*
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);

	-webkit-transition: -webkit-transform 0.3s linear;
	-moz-transition: -moz-transform 0.3s linear;
	-ms-transition: -ms-transform 0.3s linear;
	transition: transform 0.3s linear;

	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;*/
}

.contact-border-active {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);

	-webkit-transition: -webkit-transform 0.3s linear;
	-moz-transition: -moz-transform 0.3s linear;
	-ms-transition: -ms-transform 0.3s linear;
	transition: transform 0.3s linear;

	-webkit-transition-delay: 0.5s;
	-moz-transition-delay: 0.5s;
	-ms-transition-delay: 0.5s;
	transition-delay: 0.5s;
}

.contact-animate {
	top: 30px;
	opacity: 0;
}

.contact-animate2 {
	top: 30px;
	opacity: 0;
}

.contact-left {
	position: relative;
	width: 50%;
	height: 100%;
	display: inline-block;
	vertical-align: top;
	text-align: center;
}
/*
.contact-left .mid {
	font-size: 40px;
	font-family: open;
	font-weight: 100;
	color: #fff;
}*/

.contact-left .mid {
	padding-right: 65px;
	font-family: bebas;
	text-align: right;
	color: #fff;
	font-weight: 100;
	font-size: 48px;
	line-height: 37px;
}

.contact-left .mid span {
	font-size: 96px;
	color: #f5811e;
	line-height: 78px;
}

.contact-right {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 50%;
	height: calc(100% + 25px);
	padding-left: 60px;
	padding-right: 15px;
	font-family: open;
	color: #fff;
	overflow: auto;
}

.contact-title {
	position: relative;
	display: block;
	font-size: 30px;
	font-weight: 100;
	padding: 0px;
	color: #fff;
	margin: 40px 0px 25px 0px;
}

.contact-item {
	position: relative;
	display: block;
	font-family: roboto;
	font-size: 12px;
	opacity: 0.7;
	margin-bottom: 15px;
}

.contact-form {
	position: relative;
	display: block;
	padding-top: 15px;
	font-size: 0px;
	width: 100%;
	max-width: 440px;
	margin-bottom: 50px;
}

.contact-text {
	position: relative;
	display: block;
	width: 100%;
	border: 1px solid #535353;
	color: #fff;
	padding: 0px 10px;
	font-family: roboto;
	font-size: 12px;
	max-width: 440px;
	height: 30px;
	background: rgba(0, 0, 0, 0.5);
	margin-bottom: 12px;
}

.contact-text:focus {
	outline: 0px;
}

.contact-small {
	display: inline-block;
	vertical-align: top;
	width: calc(50% - 6px);
}

.contact-small1 {
	margin-right: 12px;
}

.contact-area {
	height: 125px;
	resize: none;
	padding: 10px;
}

.blur {
	position: fixed;
	top: 0px;
	left: 0px;
	display: block;
	width: 100vw;
	height: 100vh;
	padding: 20px;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.8);
}

.success-message {
	position: relative;
	display: table;
	width: 100%;
	max-width: 350px;
	background: #fff;
	text-align: center;
	padding: 20px;
	margin: auto;
	min-height: 100px;
}

.success-message .mid {
	font-size: 16px;
	color: #000;
	font-family: "arial";
	line-height: 24px;
}

.validation-message {
	position: relative;
	display: block;
	width: 100%;
	padding: 8px 10px;
	margin-bottom: 10px;
	background: #ff0000;
	color: #fff;
	max-width: 440px;
	font-size: 13px;
	font-family: 'arial';
}

.success-close {
	position: absolute;
	width: 30px;
	height: 30px;
	right: -35px;
	top: 0px;
	cursor: pointer;
}

.success-close-line {
	position: absolute;
	left: 0px;
	top: 10px;
	width: 100%;
	height: 1px;
	background: #fff;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

.success-close-line:last-child {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.contact-submit {
	position: relative;
	display: block;
	width: 80px;
	height: 30px;
	font-size: 14px;
	border: 1px solid rgba(204, 106, 23, 0.3);
	color: #f5811e;
	background: #000;
	margin: 0 auto;
}

.contact-submit:focus {
	outline: 0;
}

#map_canvas {
	position: relative;
	display: block;
	width: 100%;
	opacity: 0.5;
	height: 220px;
	max-width: 440px;
	margin-bottom: 50px;
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;
}

#map_canvas:hover {
	opacity: 1;
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;
}


/*----- Gallery CSS -----*/

.fancybox-blur {
	position: fixed;
	width: 100vw;
	height: 100vh;
	top: 0px;
	left: 0px;
	background: rgba(0, 0, 0, 0.8);
	display: none;
	z-index: 9999;
}

.gallery-ajax-result {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: none;
}

.gallery-container {
	position: relative;
	/*display: none;*/
	width: 100%;
	height: 100%;
	font-size: 0px;
	/*z-index: 999;*/
}

.gallery-item {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: 33.33%;
	cursor: pointer;
	height: 100%;
	background-size: cover !important;
	background-position: 50% !important;
	padding: 30px;
}

.gallery-item-hover {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background-size: cover !important;
	background-position: 50% !important;
	opacity: 1;
	-webkit-transition: opacity 0.6s;
	-moz-transition: opacity 0.6s;
	-ms-transition: opacity 0.6s;
	transition: opacity 0.6s;
}

.gallery-item:hover .gallery-item-hover {
	opacity: 0;
	-webkit-transition: opacity 0.6s;
	-moz-transition: opacity 0.6s;
	-ms-transition: opacity 0.6s;
	transition: opacity 0.6s;
}

.gallery-item-corporate {
	background: url('../img/front/corporate1.jpg');
}

.gallery-item-corporate .gallery-item-hover {
	background: url('../img/front/corporate.jpg');
}

.gallery-item-wedding {
	background: url('../img/front/wedding1.jpg');
}

.gallery-item-wedding .gallery-item-hover {
	background: url('../img/front/wedding.jpg');
}

.gallery-item-birthday {
	background: url('../img/front/birthday1.jpg');
}

.gallery-item-birthday .gallery-item-hover {
	background: url('../img/front/birthday.jpg');
}

.gallery-item-blur {
	position: relative;
	display: table;
	width: 100%;
	max-width: 330px;
	margin: auto;
	/*top: 50px;*/
	opacity: 0;
	padding: 20px;
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;
}

.gallery-item:hover .gallery-item-blur {
	opacity: 1;
	-webkit-transition: opacity 0.4s;
	-moz-transition: opacity 0.4s;
	-ms-transition: opacity 0.4s;
	transition: opacity 0.4s;
}

.gallery-item:hover .gallery-item-text {
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.5) !important;
	-webkit-transition: border 0.4s, color 0.4s;
	-moz-transition: border 0.4s, color 0.4s;
	-ms-transition: border 0.4s, color 0.4s;
	transition: border 0.4s, color 0.4s;
}

.gallery-item-black {
	position: absolute;
	top: 100%;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	opacity: 0;
	-webkit-transition: opacity 0.6s, top 0.3s;
	-moz-transition: opacity 0.6s, top 0.3s;
	-ms-transition: opacity 0.6s, top 0.3s;
	transition: opacity 0.6s, top 0.3s;
}

.gallery-item:hover .gallery-item-black {
	opacity: 1;
	top: 0px;
	-webkit-transition: opacity 0.6s, top 0.3s;
	-moz-transition: opacity 0.6s, top 0.3s;
	-ms-transition: opacity 0.6s, top 0.3s;
	transition: opacity 0.6s, top 0.3s;

	-webkit-transition-delay: 0.1s;
	-moz-transition-delay: 0.1s;
	-ms-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

.gallery-item-text {
	position: relative;
	display: block;
	width: 100%;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	font-size: 14px;
	font-family: open;
	text-align: center;
	color: #fff;
}

.gallery-ajax-show {
	position: fixed;
	top: 0px;
	display: none;
	left: 0px;
	overflow: auto;
	background: #000;
	padding-top: 90px;
	width: 100%;
	height: 100%;
	font-size: 0px;
	text-align: center;
}

.gallery-ajax-item {
	position: relative;
	display: inline-block;
	/*top: 30px;*/
	/*opacity: 0;*/
	vertical-align: top;
	width: calc(30% - 15px);
	margin: 0px 7px 15px;
}


/*----- COBA CSS ------*/

.coba-container {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 20px;
}

.coba-skew {
	position: absolute;
	display: block;
	width: 250px;
	height: 200px;
	padding: 20px;
	top: auto;
	bottom: 30px;
	left: 0px;
	right: 0px;
	border: 2px solid #fff;
	margin: auto;
	text-align: center;
	-webkit-transform: perspective(300px) rotateX(40deg);
}

.coba-3d {
	position: absolute;
	bottom: 3px;
	height: 30px;
	width: 100%;
	max-width: 318px;
	margin: auto;
	left: 0px;
	font-size: 16px;
	text-align: center;
	color: rgba(0, 0, 0, 0.5);
	right: 0px;
	font-weight: 600;
	padding-top: 6px;
	background: #fff;
}

.new-slider span {
	position: absolute;
	bottom: -16px;
	left: -2px;
	font-size: 11px;
	font-weight: 100;
	color: rgba(255, 255 ,255 , 0.3);
}

.coba-result {
	position: relative;
	display: block;
	width: 90%;
	max-width: 500px;
	margin: auto;
	height: 300px;
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.coba-result1 {
	position: absolute;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background: red;
	display: block;
}

.coba-result2 {
	position: absolute;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background: green;
	display: none;
}

.coba-result3 {
	position: absolute;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background: purple;
	display: none;
}

.coba-result4 {
	position: absolute;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background: orange;
	display: none;
}

.coba-result5 {
	position: absolute;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background: white;
	display: none;
}

.coba-result6 {
	position: absolute;
	width: calc(100% - 40px);
	height: calc(100% - 40px);
	background: blue;
	display: none;
}

.voice {
	/*opacity: 0;*/
	position: relative;
	/*left: 0px;*/
	/*top: 0px;*/
	display: block;
}

.click-to-backsound {
	display: none;
}



/* ----- browser ----- */

.browser-container {
	width: 100%;
	height: 100%;
	text-align: center;
	padding-top: 20%;
	background: url('../img/front/browser-background.jpg');
    background-position: 50%;
}

.browser-container h1 {
	font-size: 36px;
	color: #fff;
	font-family: bebas;
	font-weight: 100;
	margin: 0;
    margin-bottom: 20px;
	line-height: 32px;
}

.browser-container span {
	font-size: 13px;
	font-family: roboto;
	color: #fff;
	display: block;
	margin-bottom: 10px;
}

.browser-container img {
	height: 41px;
}



/* Desktops and laptops */
@media screen and (max-width : 1224px) {
	.footer-play-switch {
		display: inline-block;
	}

	.footer-mute-switch {
		display: none;
	}

	.percentage span {
		font-size: 200px;
	}

	.percentage .mid {
		font-size: 200px;
	}

	.circle {
		width: 40vw !important;
		height: 40vw !important;
	}

	/*----- Home CSS -----*/

	.home-container > .mid {
		max-width: 768px;
		display: block !important;
		margin: auto;
	}

	.home-item {
		width: 50%;
	}

	.home51 {
		display: none;
	}

	.home-center {
		display: block;
		width: 100%;
	}
}

/* Tablet */
@media screen and (max-width: 1024px) {
	.percentage span {
		font-size: 170px;
	}

	.percentage .mid {
		font-size: 170px;
	}

	.circle {
		width: 40vw !important;
		height: 40vw !important;
	}

	.client-left {
		display: none;
	}

	.client-right {
		width: 100%;
		padding-left: 0px;
		text-align: center;
	}

	.client-right-title {
		display: block;
	}

	/*----- Home CSS -----*/

	.home-item {
		width: 50%;
	}

	.home51 {
		display: none;
	}

	.home-center {
		display: block;
		width: 100%;
	}

	.click-to-backsound {
        width: 70px;
	    height: auto;
	    font-size: 10px;
	    color: #fff;
	    z-index: 12;
	    bottom: 50px;
	    right: 10px;
	    position: fixed;
	    text-align: right;
	    display: block;
	}

	.backsound-line1 {
        position: absolute;
	    width: 1px;
	    height: 17px;
	    background: #fff;
	    right: 15px;
	    bottom: -20px;
	}

	.backsound-line2 {
        position: absolute;
	    width: 5px;
	    height: 5px;
	    background: #fff;
	    border: solid 1px #fff;
	    border-radius: 5px;
	    right: 13px;
	    bottom: -23px;
	}
}

/* Mobile */
@media screen and (max-width: 768px) {
	.profile-back {
		background: url('../img/front/profile-background1.jpg') 100% 50% no-repeat;
	}

	.incorporated-desc-image {
		background-size: 120% !important;
	}

	#jpreSlide {
		background-size: 160px auto !important;
		/*height: 70px;*/
	}

	#jprePercentage {
		font-size: 150px;
	}

	.percentage .mid {
		font-size: 120px;
	}

	.circle {
		width: 40vw !important;
		height: 40vw !important;
	}

	.header-container {
		/*display: none;*/
	}

	.header-right {
		display: none;
	}

	.menu-switch {
		display: block;
	}


	.home-enter-switch {
		width: 80px;
		height: 80px;
		bottom: 18.608%;
		left: calc((100% - 80px) / 2);
	}

	.home-enter .mid {
		font-size: 14px;
		line-height: 14px;
	}

	/*---- Profile CSS -----*/

	.profile-logo {
		width: 220px;
	}

	.profile-photo {
		/*width: 100px;*/
	}

	.profile-graha {
		display: block;
		width: 240px;
		margin: auto;
		margin-bottom: 20px;
		padding: 0px;
	}

	.profile-graha-text {
		width: 100%;
		display: block;
		text-align: center;
		padding: 0px;
		margin: auto;
		max-width: 560px;
	}

	.profile-item2 {
		max-width: 630px !important;
	}

	.profile-item-menu {
		width: 50%;
	}

	.profile-item-menu-big {
		/*padding: 0px;*/
		width: 100%;
		margin-bottom: 30px;
	}

	.profile-item-menu-big span {
		text-align: center;
		padding: 0px;
	}

	.profile-item-menu-ver {
		display: none;
	}

	.profile-one {
		padding: 100px 10px 50px;
		height: 1000px;
	}

	.profile-one-logo {
		width: 230px;
	}

	.profile-one-box-out {
		max-width: 500px;
		bottom: 50px;
	}

	.profile-one-box-in {
		padding: 35px 25px;
	}

	.profile-item-icon {
		width: 50%;
	}

	.profile-item:last-child {
		max-width: 560px !important;
	}


	/*----- Profile CSS -----*/

	.profile-button-group {
		margin-top: 50px;
	}

	.profile-contact-back {
		position: absolute;
		bottom: -80px;
		margin-bottom: 0px;
	}



	/*----- Home CSS -----*/

	.home-container {
		background-position: top calc(50% - 30px) left 50% !important;
	}

	.home-item {
		width: 50%;
	}

	.home51 {
		display: none;
	}

	.home-center {
		display: block;
		width: 100%;
	}

	.home-background {
		background: url('../img/front/home-background4.jpg') no-repeat;
	}

	.home-sayogo {
		background: url('../img/front/home-logo-mob.png') no-repeat;
		width: 50.031%;
		height: 17.130%;
		left: calc(24.667% + 5px);
		margin: auto;
		top: 30.695%;
	}

	@-webkit-keyframes mymove {
	    0% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    1% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    2% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    3% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    4% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    29% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    30% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    32% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    60% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    61% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    66% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    68% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    70% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    96% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    97% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    98% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	}

	@keyframes mymove {
	    0% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    1% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    2% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    3% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    4% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    29% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    30% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    32% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    60% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    61% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    66% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    68% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    70% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    96% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	    97% {
	    	background-image: url('../img/front/home-logo-mob1.png');
	    	background-size: contain !important;
	    }
	    98% {
	    	background-image: url('../img/front/home-logo-mob.png');
	    	background-size: contain !important;
	    }
	}


	/*----- Xenia CSS -----*/

	.xenia-back {
		width: 150% !important;
		max-width: none !important;
		left: -25% !important;
	}

	.ajax1-title {
		font-size: 30px !important;
		bottom: 60px !important;
	}

	.ajax1-flower {
		width: 88.93% !important;
	    height: 92.87% !important;
	    top: 8.77% !important;
	}

	.ajax1-woman {
		width: 69.11% !important;
	    height: 106.59% !important;
	    top: 1.60% !important;
	}

	.ajax1-lightsmall {
	    width: 82.34% !important;
	    height: 87.44% !important;
	    top: -2.47% !important;
	}

	.ajax1-lightmid {
	    width: 82.34% !important;
	    height: 87.44% !important;
	    top: -2.47% !important;
	}

	.ajax1-lightbig {
	    width: 82.34% !important;
	    height: 87.44% !important;
	    top: -2.47% !important;
	}

	.xenia-info-item {
		width: 100%;
		/*padding: 0px 15px !important;*/
		margin: 0px !important;
		/*top: 0px !important;*/
		/*text-align: left;*/
	}


	/*----- Client CSS -----*/

	.client-left {
		display: none;
	}

	.client-right {
		width: 100%;
		padding-top: 30px;
		padding-left: 0px;
		text-align: center;
	}

	.client-right-title {
		display: block;
		margin-bottom: 40px;
		font-size: 37px;
		line-height: 29px;
	}

	.client-right-title span {
		font-size: 50;
		line-height: 39px;
	}

	.client-category {
		font-size: 23px;
		margin-bottom: 15;
	}

	.client-list {
		font-size: 12px;
		margin-bottom: 5px;
	}

	/*----- Contact CSS -----*/

	.contact-back-left {
		display: none;
	}

	.contact-left {
		display: none;
	}

	.contact-right {
		width: calc(100% + 40px);
		max-width: 768px;
		left: -20px;
		margin: auto;
		display: block;
		padding: 0px 50px;
		text-align: center;
	}

	.contact-form {
		max-width: none;
	}

	#map_canvas {
		max-width: none;
	}

	.contact-text {
		max-width: none;
	}

	/*----- Gallery Item -----*/

	.gallery-item {
		/*width: 100%;*/
		/*display: block;*/
	}

	.gallery-ajax-item {
		/*width: 40%;*/
	}

	.gallery-item-text {
		border: 1px solid rgba(255, 255, 255, 0.3);
		color: rgba(255, 255, 255, 0.5);
		-webkit-transition: border 0.4s, color 0.4s;
		-moz-transition: border 0.4s, color 0.4s;
		-ms-transition: border 0.4s, color 0.4s;
		transition: border 0.4s, color 0.4s;
	}

	/*browser*/
	.browser-container {
	    padding-top: 10%;
	}
}

@media screen and (max-width: 500px) {
	.profile-back {
		background: url('../img/front/profile-background1.jpg') 90% 50% no-repeat;
	}

	.success-close {
		top: -35px;
		right: 0px;
	}

	.success-close-line {
		top: 14px;
	}

	.logo-sayogo {
		width: 200px;
		height: 131px;
	}

	.navigation {
		padding-top: 42%;
	}

	.footer-left {
		top: 2px;
	}

	/*----- Gallery Item -----*/

	.gallery-container {
		padding-top: 36px;
		padding-bottom: 36px;
	}

	.gallery-item {
		width: 100%;
		height: 33% !important;
		display: block;
	}

	.gallery-ajax-item {
		width: 80%;
	}

	.gallery-item-blur {
		opacity: 1 !important;
	}

	.gallery-item-black {
		opacity: 0 !important;
		top: 0px;
	}


	.percentage .mid {
		font-size: 100px;
	}

	.circle {
		width: 50vw !important;
		height: 50vw !important;
	}

	.button-close-load {
		font-size: 19px;
	}

	.footer-item {
		width: 100%;
		display: block;
		text-align: center !important;
		padding: 5px 0px !important;
	}	


	/*----- Profile CSS -----*/

	.profile-item-menu {
		width: 100%;
		text-align: center;
	}

	.profile-menu-title {
		text-align: center;
	}

	.profile-menu-list {
		text-align: center;
	}

	.profile-item-menu:last-child {
		margin-top: 20px;
	}

	.profile-item-icon {
		display: block;
		margin: auto;
	}

	.profile-contact {
		font-size: 20px;
	}

	/*----- Home CSS -----*/

	.home-container {
		background-position: 50% !important;
	}

	.home-item {
		width: 100%;
	}

	/*----- Xenia CSS -----*/

	.xenia-back {
		width: 200% !important;
		max-width: none !important;
		left: -50% !important;
	}

	.ajax1-title {
		font-size: 30px !important;
		bottom: 60px !important;
	}

	.ajax1-flower {
		width: 128.93% !important;
	    height: 132.87% !important;
	    top: -10.77% !important;
	    left: -14% !important
	}

	.ajax1-woman {
		width: 109.11% !important;
	    height: 146.59% !important;
	    top: -17.60% !important;
	    left: -4% !important;
	}

	.ajax1-lightsmall {
	    width: 122.34% !important;
	    height: 127.44% !important;
	    top: -24.47% !important;
	    left: -11% !important;
	}

	.ajax1-lightmid {
	    width: 122.34% !important;
	    height: 127.44% !important;
	    top: -24.47% !important;
	    left: -11% !important;
	}

	.ajax1-lightbig {
	    width: 122.34% !important;
	    height: 127.44% !important;
	    top: -24.47% !important;
	    left: -11% !important;
	}

	.xenia-info-item {
		width: 100%;
		padding: 0px 15px !important;
		margin: 0px !important;
		top: 0px !important;
		text-align: center;
	}

	.xenia-info-item:first-child {
		margin-bottom: 20px !important;
	}

	/*----- Client css -----*/

	.client-close {
		/*width: 65px;*/
		top: 40px;
		/*left: 50px;*/
	}

	.gallery-close {
		/*width: 65px;*/
		top: 40px;
		/*left: 50px;*/
	}

	.contact-right {
		left: -20px;
		max-width: 500px;
	}

	/*browser*/
	.browser-container {
	    padding-top: 50%;
	}
}