/*COLOR*/
	/*
	RED 		#bd4941
	BLUE 		#3e8192
	YELLOW 		#d9c05a
	NAVY 		#384f61
	GREEN		#8cad4e
	BLACK 		#000000
	BLACK LIGHT	#282828
	GREY 		#d1cec7
	GREY DARK	#8f887b
	WHITE 		#ffffff
	WHITE DARK 	#ecebe7
	*/
	
/*FONT*/
@font-face {
    font-family: 'gt_walsheim_pro_regularRg';
    src: url('fonts/gt-walsheim-pro-regular-webfont.woff2') format('woff2'),
         url('fonts/gt-walsheim-pro-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'gt_walsheim_probold';
    src: url('fonts/gt-walsheim-pro-bold-webfont.woff2') format('woff2'),
         url('fonts/gt-walsheim-pro-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}
@font-face {
    font-family: 'humanst521_btroman';
    src: url('fonts/hum521n-webfont.woff2') format('woff2'),
         url('fonts/hum521n-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

:root {
	--bg: #d1cec7;
	--f-pro: 'gt_walsheim_pro_regularRg';
	--f-prob: 'gt_walsheim_probold';
	--f-human: 'humanst521_btroman';
	--c-black: #000000;
	--c-blackl: #282828;
	--c-white: #ffffff;
	--c-whited: #ecebe7;
	--c-grey: #d1cec7;
	--c-greyd: #8f887b;
	--c-red: #bd4941;
	--c-blue: #3e8192;
	--c-yellow: #d9c05a;
	--c-navy: #20415a;
	--c-green: #8cad4e;
	--f-12: calc(12px * .9);
	--f-16: calc(16px * .9);
	--f-20: calc(20px * .9);
	--f-30: calc(30px * .9);
	--f-40: calc(40px * .9);
	--f-80: calc(80px * .9);
	--f-100: calc(100px * .9);
	--f-350: calc(350px * .9);
	--lh-12: calc(24px  * .9);
	--lh-16: calc(36px  * .9);
	--lh-30: calc(50px  * .9);
	--lh-40: calc(50px  * .9);
	--lh-80: calc(90px  * .9);
	--lh-100: calc(100px * .9);
	--lh-350: calc(350px * .9);
	--letter-1: 1px;
	--line-0 : 1px solid #8f887b;
	--line-1 : 2px solid #000000;
	--line-2 : calc(5px * .9) solid #bd4941;
	--line-3 : calc(8px * .9) solid #000000;
	--space-1 : 10px;
	--space-0 : calc(var(--space-1)/2);
	--space-2 : calc(var(--space-1)*2);
	--space-3 : calc(var(--space-1)*3);
	--space-4 : calc(var(--space-1)*4);
	--space-5 : calc(var(--space-1)*5);
	--space-6 : calc(var(--space-1)*6);
	--space-7 : calc(var(--space-1)*7);
	--space-8 : calc(var(--space-1)*8);
}

i{font-family: 'italic';}
b, strong{font-family: 'gt_walsheim_probold';}

	
/*	Resets
	------	*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;		
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video, img {
	display: block;
}

h1, h2, h3, h4, h5, h6{font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; line-height: inherit;}
*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline:none; box-sizing: border-box; margin: 0; padding: 0;}
a {text-decoration:none; border:none; outline:0; color: inherit;}
a strong{letter-spacing: var(--letter-1);}
img{border:none; outline:0;}
.cursor{cursor:pointer;}
textarea {resize: none;}
ul li{padding:0; list-style:none;}
/* ol li{} */
.is-block{display: block;}
.is-inline{display: inline-block;}
.is-absolute{position: absolute;}
.is-relative{position: relative;}
.f-left{float: left;}
.f-right{float: right;}
.is-left{text-align: left;}
.is-right{text-align: right;}
.is-center{text-align: center;}
.hidden{visibility:hidden; width:0px !important; height:0px !important; margin:0px !important; padding:0px !important;}

.m-no{display:block;}
.m-yes{display:none;}
	
.clear{clear:both; height:0;}	

.line{border-bottom: var(--line-1);}

video {z-index: 0;}

/*FONT*/
.f-12{font-size:var(--f-12); line-height: var(--lh-12);}
.f-16{font-size:var(--f-16); line-height: var(--lh-16);}
.f-20{font-size:var(--f-20); line-height: var(--lh-20);}
.f-30{font-size:var(--f-30); line-height: var(--lh-30);}
.f-40{font-size:var(--f-40); line-height: var(--lh-40);}
.f-80{font-size:var(--f-80); line-height: var(--lh-80);}
.f-100{font-size:var(--f-100); line-height: var(--lh-100);}
.f-350{font-size:var(--f-350); line-height: var(--lh-350);}
.f-30 strong, .f-40 strong, .f-80 strong, .f-100 strong{font-family: var(--f-human);}

/*COLOR*/
._black{color: var(--c-black);}
._white{color: var(--c-white);}
._grey{color: var(--c-grey);}
._greyd{color: var(--c-greyd);}

/*SPACE*/
.space-0{margin-top: calc(var(--space-1)/2);}
.space-1{margin-top: calc(var(--space-1)*1);}
.space-2{margin-top: calc(var(--space-1)*2);}
.space-3{margin-top: calc(var(--space-1)*3);}
.space-4{margin-top: calc(var(--space-1)*4);}
.space-5{margin-top: calc(var(--space-1)*5);}
.space-6{margin-top: calc(var(--space-1)*6);}
.space-7{margin-top: calc(var(--space-1)*7);}
.space-8{margin-top: calc(var(--space-1)*8);}


/*FIELD*/
button{font-family: 'Conv_Montserrat-Regular';}
select {-webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: '';}
input {outline: none;}
input[type="text"], input[type="password"], input[type="date"], textarea, select, option{font-family: inherit;}
input:required, textarea:required  {box-shadow: none}
::-webkit-input-placeholder{color: var(--c-black);}
:-ms-input-placeholder{color: var(--c-black);}
::-moz-placeholder{color: var(--c-black); opacity: 1;}
:-moz-placeholder {color: var(--c-black); opacity: 1;}
::-webkit-calendar-picker-indicator {position:absolute; width:100%; height:100%; top:0; right:0; bottom:0; opacity:0; cursor:pointer;}
input[type="date"]:hover::-webkit-calendar-picker-indicator, input[type="date"]:hover::-webkit-calendar-picker-indicator:hover{ opacity:0;}

/*INPUT*/
.input-field, .input-select, .input-area{font-size: var(--f-16); padding: 0; padding-bottom: var(--space-2); display:block; width:100%; height: 42px; background: none; border: none; border-bottom: var(--line-1); border-color: var(--c-grey); color: var(--c-blackl);}
	.input-area{height: 90px; padding: var(--space-2) 0;}

.input-style{position:relative; margin-bottom: var(--space-1);}

.floating-label, .floating-label2-1,.floating-label2-2 {position:relative; margin-bottom: var(--space-1); font-size: var(--f-small); }
	.floating-label2-1{width: 49%; float: left;}
	.floating-label2-2 {width: 49%; float: right;}
.floating-input , .floating-select {font-family: var(--f-mu5); font-size: var(--f-small); padding: var(--space-2) 0 0 var(--space-2); display:block; width:100%; height:52px; background: var(--c-grey); border:none;}
.floating-input:focus , .floating-select:focus {outline:none;}
.floating-label label, .floating-label2-1 label, .floating-label2-2 label {color: var(--c-black); position:absolute; pointer-events:none; top: 18px; left: var(--space-2); transition: 0.3s ease all;}
.floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label {top: var(--space-0); color: var(--c-grey);}
.floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label {top: var(--space-0); color: var(--c-grey);}
.floating-textarea {min-height: 52px; max-height: 260px; overflow:hidden; overflow-x: hidden;}


/*RADIO*/
.radio{width: 100%; vertical-align:middle; font-size: var(--f-small); padding-top:15px; text-transform: uppercase; cursor:pointer;}
.radio input[type="radio"] {display:none;}
.radio input[type="radio"] + label {padding: var(--space-1) 0; cursor: pointer;}
.radio input[type="radio"] + label span {
	display:inline-block; margin-top: -1px; vertical-align:middle;
	background: var(--c-grey); border-radius: 50%; margin-right: var(--space-1);
	width: 18px; height: 18px; cursor:pointer;
}
.radio input[type="radio"]:checked + label span {
	background: var(--c-black);
}

/*CHECKBOX*/
.check{width: 100%; vertical-align:middle; font-size: var(--f-small); padding-top:15px; text-transform: uppercase; cursor:pointer;}
.check input[type="checkbox"] {display:none;}
.check input[type="checkbox"] + label {padding: var(--space-1) 0; cursor: pointer;}
.check input[type="checkbox"] + label span {
	display:inline-block; margin-top: -1px; vertical-align:middle;
	background: var(--c-grey); margin-right: var(--space-1);
	width: 18px; height: 18px; cursor:pointer;
}
.check input[type="checkbox"]:checked + label span {
	background: var(--c-black);
}

body {
	position: relative;
	width: 100%;
	left: 0;
	-webkit-text-size-adjust: 100%;
	overflow-x:hidden;
	background: var(--c-white);
	color: var(--c-black);
	font-size: var(--f-16);
	line-height: var(--lh-16);
	font-family: var(--f-pro);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	transition: all .8s;
	scroll-behavior: smooth;
}
body.side{left: -200px;}

/*preloader*/
#preloader {position: fixed; top:0; left:0; right:0; bottom:0; background-color:#e0ddd7; z-index:120;}
#container {
	/* Center the text in the viewport. */
	position: absolute;
	margin: auto;
	width: 100vw;
	height: 80pt;
	top: 0;
	bottom: 0;
	
	/* This filter is a lot of the magic, try commenting it out to see how the morphing works! */
	filter: url(#threshold) blur(0.6px);
}

/* Your average text styling */
#text1, #text2 {
	position: absolute;
	width: 100%;
	display: inline-block;
	
	font-family: 'humanst521_btroman';
	font-size: var(--f-100);
	font-weight: bold;
	text-align: center;
	
	user-select: none;
}

/*cursor*/
.touch {width: 60px; height: 60px; border-radius: 100%; border: 3px solid #00b3f3; position: absolute; z-index: 9999; left: 50%; transform: scale(.5); display: none;}
.touch.active {display: block; animation: touch .4s ease-out forwards;}
@keyframes touch {
	from {transform: scale(.2); opacity: 1;}
	to {transform: scale(1); opacity: 0;}
}

/*button*/
.fade-link, .menu a{transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s;}
.btn-main{display: inline-block; padding: 12px 20px; font-family: 'Conv_HELR65W'; font-size: 24px; border-radius: 12px; border: solid 2px #b0dedb; color: #33425b; cursor: pointer; background: transparent;}
	.btn-main:hover{background: #b0dedb; border: solid 2px #b0dedb;}
	.btn-main.active{background: #d53939; border: solid 2px #d53939; color: #fff;}

.btn-rec{display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border: var(--line-1);}
.arrow-up{width: 19px; height: 11px; background: url("../img/arrow-up.png") no-repeat center; background-size: 19px 11px;}
.arrow-down{width: 19px; height: 11px; background: url("../img/arrow-down.png") no-repeat center; background-size: 19px 11px;}
.arrow-right{width: 11px; height: 19px; background: url("../img/arrow-right.png") no-repeat center; background-size: 11px 19px;}
.arrow-left{width: 11px; height: 19px; background: url("../img/arrow-left.png") no-repeat center; background-size: 11px 19px;}

/*icon*/
.icon-share{background: url(../img/home/btn-share.png) no-repeat; width: 133px; height: 146px; transform: scale(.8);}
.icon-share:hover{transform: scale(1);}

.contact{position: fixed; z-index: 10; bottom: 50px; right: 5%; width: 280px; cursor: pointer; transition: all .8s;}
	.contact-icon{position: absolute; z-index: 2; bottom: 15px; right: -5px;}
	.contact-btn{position: absolute; z-index: 3; bottom: 0px; right: 0px;}
	.active .contact-btn{width: 55px; height: 74px; background: url("../img/chat-cir.png") no-repeat;}
	.contact-btn#morph{width: 170px; height: auto; bottom: -5px; right: -90px;}
	.dot-elastic, .dot-elastic::before, .dot-elastic::after{position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--c-blackl);}
	.dot-elastic {bottom: 35px; right: 30px; animation: dotElastic 1s infinite linear;}
	.dot-elastic::before, .dot-elastic::after {content: ''; display: inline-block; top: 0;}
	.dot-elastic::before {left: -10px;animation: dotElasticBefore 1s infinite linear;}
	.dot-elastic::after {left: 10px; animation: dotElasticAfter 1s infinite linear;}
	@keyframes dotElasticBefore {
		0% {transform: scale(1, 1);}
		25% {transform: scale(1, 1.5);}
		50% {transform: scale(1, 0.67);}
		75% {transform: scale(1, 1);}
		100% {transform: scale(1, 1);}
	}
	@keyframes dotElastic {
	  0% {transform: scale(1, 1);}
	  25% {transform: scale(1, 1);}
	  50% {transform: scale(1, 1.5);}
	  75% {transform: scale(1, 1);}
	  100% {transform: scale(1, 1);}
	}
	@keyframes dotElasticAfter {
	  0% {transform: scale(1, 1);}
	  25% {transform: scale(1, 1);}
	  50% {transform: scale(1, 0.67);}
	  75% {transform: scale(1, 1.5);}
	  100% {transform: scale(1, 1);}
	}

.side .contact{right: 245px;}
.icon-sosmed.wa{background-position: 0 0px;}
.icon-sosmed.mail{background-position: -53px 0px;}
.icon-sosmed.ig{background-position: -112px 0px;}
.icon-sosmed.lo{background-position: -168px 0;}
.icon-sosmed{display: inline-block; background: url(../img/sosmed.png) no-repeat; width: 28px; height: 28px; margin-left: -25px; transition: all .6s; -moz-transition: all .6s; -webkit-transition: all .6s; -o-transition: all .6s; opacity: 0;}
.show .icon-sosmed, .active .icon-sosmed{margin: 0 10px; transform: translateX(-80px); opacity: 1;}

.icon-hubungi.wa, .icon-hubungi.loc{display: block; width: 46px; height: 47px; background: url(../img/icon-hubungi.png) no-repeat; background-size: 121px 47px; margin-top: var(--space-2); opacity: .5; transition: .3s all; transform-origin: top left;}
.icon-hubungi.wa{background-position: 0 0; margin-right: 10%;}
.icon-hubungi.loc{background-position: -84px 0;}
.icon-hubungi.wa:hover, .icon-hubungi.loc:hover{opacity: 1;}

.icon-works{display: block; width: 27px; height: 22px; background: url(../img/icon-works.png) no-repeat; background-size: 272px 22px; opacity: 1; margin: auto;}
.icon-works.read{background-position: 0 0;}
.icon-works.watch{background-position: -82px 0;}
.icon-works.share{background-position: -171px 0;}
.icon-works.visit{background-position: -249px 0;}
.icon-works.prev, .icon-works.next{display: block; width: 11px; height: 22px; cursor: pointer; transition: all .4s;}
.icon-works.prev{background: url(../img/arrow-left.png) no-repeat center; background-size: auto 19px;}
.icon-works.next{background: url(../img/arrow-right.png) no-repeat center; background-size: auto 19px;}
.icon-works.close{display: block; width: 20px; height: 22px; cursor: pointer; transition: all .4s; background: url(../img/menu-close.png) no-repeat center;background-size: auto 20px;}


.important{position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; margin: auto; width: 100%; height: 50px; display: flex; flex-direction: column; justify-content: center; text-align: center; background: var(--c-red); color: var(--c-white); font-size: var(--f-16);}
.important ._list li{display: none;}

/*container*/
section{position: relative; display: block; width: 100%; margin: auto;}
.container, .container-fluid, .wrapper{position: relative; width: 80%; margin: auto;}
.container{max-width: 1360px;}
.container-fluid{width: 100%;}
	.container-fluid .ml{margin-left: 10%;}
	.container-fluid .mr{margin-right: 10%;}
.wrapper{width: 90%;}

.row {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.col {flex: 1 1 8%; box-sizing: border-box;}
/* nested grids */
.row .row, .row.nested {flex: 1 1 auto;}
/* full width grids */
.row.wide-fit {margin-left: -10px; margin-right: -10px;}
/* center grids */
.row.reverse{flex-direction: row-reverse;}
.row.start{justify-content: flex-start;}
.row.end{justify-content: flex-end;}
.row.center{justify-content: center;}
.row.around{justify-content: space-around;}
.row.evenly{justify-content: space-evenly;}
.row.top{align-items: flex-start;}
.row.bottom{align-items: flex-end;}
.row.middle{align-items: center;}
.row.stretch{align-items: stretch;}
.center .col {flex-grow: 0; flex-shrink: 0;}

/* columns widths */
.col-1 {flex-basis: 8.3333%;}
.col-2 {flex-basis: 16.6666%;}
.col-3 {flex-basis: 25%;}
.col-4 {flex-basis: 31%;}
.col-5 {flex-basis: 41.6666%;}
.col-6 {flex-basis: 48%;}
.col-7 {flex-basis: 58.3333%;}
.col-8 {flex-basis: 66.6666%;}
.col-9 {flex-basis: 75%;}
.col-10 {flex-basis: 83.3333%;}
.col-11 {flex-basis: 91.6666%;}
.col-12 {flex-basis: 100%;}

.row .row .col-6{flex-basis: 48%;}

/* examples */
.fixed-width {flex: 0 0 500px; background-color: rgba(255,0,0,0.1) !important;}

@media all and (max-width: 568px) {
	.col-1, .col-2, .col-3, .col-4, .col-5 {flex-basis: 50%;}
	.col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {flex-basis: 100%;}
	.nested .col {flex-basis: 100%;}  
}

/*header*/
header{position: fixed; top: 0px; left: 0; right: 0; z-index: 90; padding-top: 70px;}
	header .wrapper{height: 76px; padding-top: 20px; background: url("../img/year-black.webp") no-repeat top right; background-size: auto 76px;}
	header a{color: var(--c-black); transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; transform: translateY(0);}
	header a:hover{transform: translateY(-5px);}
	header .f-12{display: block; letter-spacing: 1.2px; opacity: .7; padding-top: var(--space-2);}
	header .f-12 span{opacity: .6;}
header.small{background: var(--c-navy); top: -80px; transition: all .2s; -moz-transition: all .2s; -webkit-transition: all .2s; -o-transition: all .2s; padding-top: 0;}
	header.small._detail{top: 0;}
	header.small .wrapper{height: 59px; padding: 15px 0; background: url("../img/year-grey.webp") no-repeat top right;}
	header.small .f-12{display: none;}
	header.small a{color: var(--c-grey); transform: translateY(0);}
	header.small a:hover{transform: translateY(-5px);}
header a.logo:hover, header.small a.logo:hover{transform: none;}

.logo{display: block;}
	header .logo{position: relative; width: 182px; height: 72px; background: url("../img/logo-black.png") no-repeat bottom left; background-size: 182px auto;}
	header.small .logo{width: 180px; height: 30px; background: url("../img/logo-grey.png") no-repeat bottom left; background-size: 182px auto;}
	footer .logo{position: relative; display: block; width: 182px; height: 32px; background: url(../img/logo-black.png) no-repeat 0 9px; background-size: 182px auto;}
	header .logo .dot, footer .logo .dot{position: absolute; display: block; width: 6px; height: 6px; background: var(--c-black); border-radius: 50%; top: 0; left: 0; margin-left: 57px; animation: dotJump .5s ; transform: translateY(0px); animation-iteration-count: 10;}
	header.small .logo .dot{background: var(--c-greyd);}
	@keyframes dotJump {
		0% {transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
		40% {}
		50% {transform: translateY(0px); height: 6px; -webkit-animation-timing-function: ease-out;}
		55% {transform: translateY(6px); height: 2px; -webkit-animation-timing-function: ease-in;}
		65% {transform: translateY(3px); height: 6px; -webkit-animation-timing-function: ease-out;}
		95% {transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
		100% {transform: translateY(0px); -webkit-animation-timing-function: ease-in;}
	}
	header .logo:hover .dot, header.small .logo:hover .dot, footer .logo:hover .dot{animation-iteration-count:infinite;}

#morph{width: 100px; height: auto;}

.menu {width: 100%;}
.menu-container {margin: 0 auto; background: #e9e9e9;}
.menu a.logo {width: 19%; float: left;}
.main-menu{float: right;}
.menu img {max-width: 100%;}
.menu-mobile {display: none; padding: 20px;}
header .main-menu .active a{color: var(--c-navy);}
header.small .main-menu .active a{color: var(--c-whited);}

.menu-mobile:after{background: url("../img/menu-open.png") no-repeat;}
.menu-mobile.active:after {background: url("../img/menu-close.png") no-repeat;}
	.menu-mobile:after, .menu-mobile.active:after{content: " "; padding: 0; float: right; position: relative; top: 50%; -webkit-transform: translateY(-25%); transform: translateY(-25%); background-size: 20px; width: 20px; height: 20px; transition: all .4s;}
.menu-dropdown-icon:before {background: url("../img/submenu-open.png") no-repeat center;}
.menu-dropdown-icon.show:before {background: url("../img/submenu-close.png") no-repeat center;}
	.menu-dropdown-icon:before, .menu-dropdown-icon.show:before {content: " "; display: none; cursor: pointer; float: right; background-size: 20px; width: 20px; height: 20px; margin-right: 20px;}

.menu > ul {margin: 0 auto; width: auto; list-style: none; padding: 0; position: relative; box-sizing: border-box; clear: right; font-family: var(--f-human); font-size: var(--f-16); font-weight: bold; padding-top: 0; padding-right: 140px;}
.menu > ul:before, .menu > ul:after {content: ""; display: table;}
.menu > ul:after {clear: both;}
.menu > ul > li {float: left; padding: 0; margin: 0;}
	.menu > ul > li.menu-dropdown-icon{background:#e9e9e9 url(../img/arrow-down.png) no-repeat right; background-size: 15px 9px;}
.menu > ul > li a {text-decoration: none; padding: 0 2em; display: block;}
/* .menu > ul > li:hover {} */
.menu > ul > li:hover.menu-dropdown-icon:hover{background:#f0f0f0 url(../img/arrow-down.png) no-repeat right; background-size: 15px 9px;}
.menu > ul > li > ul {display: none; width: 100%; background: #f0f0f0; padding: 20px; position: absolute; z-index: 99; left: 0; margin: 0; list-style: none; box-sizing: border-box;}
.menu > ul > li > ul:before, .menu > ul > li > ul:after {content: ""; display: table;}
.menu > ul > li > ul:after {clear: both;}
.menu > ul > li > ul > li {margin: 0; padding-bottom: 0; list-style: none; width: 25%; background: none; float: left;}
.menu > ul > li > ul > li a {color: #777; padding: .2em 0; width: 95%; display: block; border-bottom: 1px solid #ccc;}
.menu > ul > li > ul > li a:hover{color:#03a9f4;}
.menu > ul > li > ul > li > ul {display: block; padding: 0; margin: 10px 0 0; list-style: none; box-sizing: border-box;}
.menu > ul > li > ul > li > ul:before, .menu > ul > li > ul > li > ul:after {content: ""; display: table;}
.menu > ul > li > ul > li > ul:after {clear: both;}
.menu > ul > li > ul > li > ul > li {float: left; width: 100%; padding: 10px 0; margin: 0; font-size: .8em;}
.menu > ul > li > ul > li > ul > li a {border: 0; font-size: 14px;}
.menu > ul > li > ul.normal-sub {width: 300px; left: auto; padding: 10px 20px;}
.menu > ul > li > ul.normal-sub > li {width: 100%;}
.menu > ul > li > ul.normal-sub > li a {border: 0; padding: 1em 0;}

/*sidebar*/
.sidebar{position: fixed; z-index: 99; top: 0; right: -200px; height: 100%; color: var(--c-blackl); text-transform: uppercase; cursor: pointer; transition: all .8s; background: none;}
	.sidebar ._list{display: flex; flex-direction: column; justify-content: center; padding-left: 30px; width: 212px; height: 100%; border-left: var(--line-0);}
	.sidebar ._list li{padding-bottom: 2vh; transition: all .4s; font-weight: normal;}
	.sidebar ._list li:hover, .sidebar ._list li.active{font-weight: bold;}
	.sidebar ._list li:nth-last-child(1){padding-bottom: 0px;}
	.sidebar ._handle{position: absolute; top: 50%; transform: translate(0,-50%); left: -30px; width: 30px; height: 100%; display: flex; flex-direction: column; justify-content: center;}
	.sidebar ._handle div{width: 30px; height: 1px; background: var(--c-greyd);}
	.sidebar.colorW{background: var(--c-white);}
	.sidebar.colorG{background: var(--c-grey);}
	.sidebar.home.side{right: 0; background: var(--c-grey);}
	.sidebar.services.side, .sidebar.side{right: 0; background: var(--c-white);}

/*carousel*/
.owl-carousel .owl-item img{width: auto; max-width: 100%; margin: 5px auto;}
.owl-carousel .owl-nav{position: absolute; top: 5px; width: 100%;}
.owlPrev, .owlNext, .disabled .owlPrev, .disabled .owlNext{position: absolute; z-index: 10; top: 0; display: block; width: 50px; height: 50px; cursor: pointer; transition: all .4s; border: var(--line-1);}
.owlPrev, .disabled .owlPrev{left: 0; background: url(../img/arrow-left.png) no-repeat center; background-size: auto 19px;}
.owlNext, .disabled .owlNext{right: 0px; background: url(../img/arrow-right.png) no-repeat center; background-size: auto 19px;}
.disabled .owlPrev, .disabled .owlNext{opacity: 0;}
.owl-dots {text-align: center; padding-top: var(--space-6);}
.owl-dots button.owl-dot {width: 15px; height: 15px; border-radius: 0; display: inline-block; background: #e5e5e5; margin: 0 3px; border: var(--line-1); border-color: #e5e5e5;}
.owl-dots button.owl-dot.active {background: #ffffff; border-color: var(--c-black);}
.owl-dots button.owl-dot:focus {outline: none;}

/*footer*/
footer{position: relative; width: 100%; height: 290px; background: var(--c-white); padding: 105px 0; margin: auto;}
	footer nav{position: absolute; top: 50%; transform: translate(0,-50%); left: 50%; margin-left: -8vw;}
	footer .contact{position: relative; bottom: auto; right: auto;}

/*animate*/
@keyframes pulse {
	from {transform: scale3d(1.2, 1.2, 1.2);}
	50% {transform: scale3d(1.05, 1.05, 1.05);}
	to {transform: scale3d(1.2, 1.2, 1.2);}
}
.pulse {animation-name: pulse; animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: infinite; }

@keyframes fadeInGo {
  from {opacity: 0;}
  to {opacity: 1;}
}
.fadeInGo {animation-name: fadeInGo;}

@keyframes fadeOutGo {
	from {opacity: 1;}
	to {opacity: 0;}
}
.fadeOutGo {animation-name: fadeOutGo;}

@keyframes fadeInDownGo {
	from {opacity: 0; transform: translate3d(0, -100%, 0);}
	to {opacity: 1; transform: none;}
}
.fadeInDownGo {animation-name: fadeInDownGo;}

@keyframes fadeInUpGo {
	from {opacity: 0; transform: translate3d(0, 100%, 0);}
	to {opacity: 1; transform: none;}
}
.fadeInUpGo {animation-name: fadeInUpGo;}

@keyframes fadeInRightGo {
	from {opacity: 0; transform: translate3d(20%, 0, 0);}
	to {opacity: 1; transform: none;}
}
.fadeInRightGo {animation-name: fadeInRightGo;}

@keyframes fadeInLeftGo {
	from {opacity: 0; transform: translate3d(-20%, 0, 0);}
	to {opacity: 1; transform: none;}
}
.fadeInLeftGo {animation-name: fadeInLeftGo;}

@keyframes zoomInGo {
	from {opacity: 0; transform: scale3d(.3, .3, .3);}
	50% {opacity: 1;}
}
.zoomInGo {animation-name: zoomInGo;}

.bounceGo {
  animation: bounceGo 2s infinite;
}

@keyframes bounceGo {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.bounceGoR {
  animation: bounceGoR 2s infinite;
}

@keyframes bounceGoR {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(0);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(5px);
  }
}

/*tooltip*/
.tooltip {margin: 16px; position: relative; width: 150px;}
.tooltip-button {
	cursor: pointer;
	position: relative;
	align-items: center;
	background: #e5efe9;
	border: 1px solid #5a72b5;
	border-radius: 4px;
	color: #121943;
	display: flex;
	font-size: 1em;
	font-weight: 700;
	height: 40px;
	justify-content: center;
	width: 150px;
}
.tooltip-content {
  background-color: #121943;
  border-radius: 4px;
  color: #fff;
  display: flex;
  opacity: 0;
  padding: 12px;
  position: absolute;
  text-align: center;
  transition: opacity 0.25s ease-in-out;
  visibility: hidden;
  white-space: nowrap;
  z-index: 10;
}
.tooltip-content::before {
  content: "";
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #121943;
  height: 0;
  position: absolute;
  width: 0;
  z-index: 10;
}
.tooltip-button:hover + .tooltip-content,
.tooltip-button:focus + .tooltip-content {opacity: 1; transition: opacity 0.25s ease-in-out; visibility: visible;}
.tooltip-button.top + .tooltip-content {top: 0px; left: 50%; transform: translate(-50%, calc(-100% - 12px));}
.tooltip-button.top + .tooltip-content::before {bottom: -20px; left: 50%; transform: translate(-50%, calc(-100% - 5px)) rotate(180deg);}
.tooltip-button.right + .tooltip-content {top: 0; right: 0; transform: translateX(calc(100% + 12px));}
.tooltip-button.right + .tooltip-content::before {top: 50%; left: -32px; transform: translate(calc(100% + 5px), -50%) rotate(-90deg);}
.tooltip-button.bottom + .tooltip-content {bottom: 0; left: 50%; transform: translate(-50%, calc(100% + 12px));}
.tooltip-button.bottom + .tooltip-content::before {top: -20px; left: 50%; transform: translate(-50%, calc(100% + 5px)) rotate(0deg);}
.tooltip-button.left + .tooltip-content {top: 0; left: 0; transform: translateX(calc(-100% - 12px));}
.tooltip-button.left + .tooltip-content::before {top: 50%; right: -32px; transform: translate(calc(-100% - 5px), -50%) rotate(90deg);}

/*accordion*/
.accordion {width: 380px; margin: 20px auto;}
.accordion h1, h2, h3, h4 {cursor: pointer;}
.accordion h1 {padding: 15px 20px; background-color: #333; font-size: 1.5rem; font-weight: normal; color: #1abc9c;}
.accordion h1:hover {color: #4afcdc;}
.accordion h1:first-child {border-radius: 10px 10px 0 0;}
.accordion h1:last-of-type {border-radius: 0 0 10px 10px;}
.accordion h1:not(:last-of-type) {border-bottom: 1px dotted #1abc9c;}
.accordion div, .accordion p {display: none;}
.accordion h2 {padding: 5px 25px; background-color: #1abc9c; font-size: 1.1rem; color: #333;}
.accordion h2:hover {background-color: #09ab8b;}
.accordion h3 {padding: 5px 30px; background-color: #b94152; font-size: .9rem; color: #ddd; }
.accordion h3:hover {background-color: #a93142;}
.accordion h4 {padding: 5px 35px; background-color: #ffc25a; font-size: .9rem; color: #af720a;}
.accordion h4:hover {background-color: #e0b040;}
.accordion p {padding: 15px 35px; background-color: #ddd; font-family: "Georgia"; font-size: .8rem; color: #333; line-height: 1.3rem;}
.accordion .opened{display: block;}

.text{position: absolute; left: 0; right: 0; margin: auto;}
.obj, .cloud, .bird, .brain, .shape, .stabber, .rec, .cir, .srec, .scir, .butterfly, .tri, .bg{position: absolute;}
	.cloud{top: 480px; z-index: 1;}
	.tri img{max-width: 100%;}
.guide-line{position: fixed; top: 0; left: 0; right: 0; z-index: 99; border: var(--line-1); width: 1330px; height: 100%; pointer-events: none; margin: auto;}
a strong{border: var(--line-1); border-color: var(--c-blackl); padding: var(--space-1) var(--space-2); transition: all .3s; cursor: pointer;}
a:hover strong{background: var(--c-blackl); color: var(--c-white); transition: all .3s;}
.important a strong{border: none; padding: 0;}
.img-s{position: relative; margin-bottom: var(--space-4);}
.img-sr img{border-radius: 50%; transition: all .3s;}
.img-s img, .img-sr img{-webkit-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3); box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);}
.img-sr:hover img{box-shadow: none;}
.overlay{position: absolute; z-index: 8; top: 50%; left: 0; right: 0; margin: auto; transform: translate(0,-50%);}

/*home*/
.section1{min-height: 100vh; background: var(--c-grey);}
	.section1 .container{position: absolute; top: 50%; transform: translate(0,-50%); left: 0; right: 0; margin: auto;}
	.section1 .btn-rec{position: absolute; bottom: -110px; margin-left: 510px;}
	.s1-1, .s1-3, .s1-4{color: var(--c-blackl);}
		.s1-1{margin-bottom: -120px; margin-left: 360px;}
		.s1-2{font-family: var(--f-human);}
		.s1-3{margin-top: -20px; margin-left: 510px;}
		.s1-4{margin-top: 20px; margin-left: 585px;}
	.obj._1-1, .obj._1-2, .obj._1-3, .obj._1-4, .obj._1-5, .obj._1-6{top: 50%; left: 50%; z-index: -1; margin-top: -30px;}
		.obj._1-1{margin-left: -450px;}
		.obj._1-2{margin-left: -280px;}
		.obj._1-3{margin-left: -280px;}
		.obj._1-4, .obj._1-5{border-radius: 50%; border: var(--line-2);}
		.obj._1-4{margin-left: -460px; margin-top: 15px; width: 16px; height: 16px;}
		.obj._1-5{margin-left: -330px; margin-top: 100px; width: 28px; height: 28px;}
		.obj._1-6{margin-left: -380px; margin-top: 50px; width: 182px; height: 30px; background: var(--c-red); transform-origin: right;}
.section2{height: 110vh;}
	.section2 .container{position: absolute; z-index: 2; top: 50%; left: 0; right: 0; margin: auto; transform: translate(0,-50%); width: 880px;}
	.section2 .video{position: absolute; top: 0; left: 0; right: 0; margin: auto; height: 110vh; z-index: -1; }
	.section2 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
	.section2 .overlay{position: absolute; z-index: 1; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.1); transform: none;}
	.s2-1, .s2-2, .s2-3{color: var(--c-whited);}
		.s2-2{font-family: var(--f-human); font-weight: bold;}
		.s2-3{width: 360px; margin-top: 60px; margin-left: 410px;}
.sectionC1{background: var(--c-grey);}
.section3{min-height: 1000px;}
	.section3 .brain{z-index: 3; margin-top: 90px; left: 50%; margin-left: -182px; opacity: 0;}
	.section3 .shape{z-index: 1; border: var(--line-3); width: 580px; height: 580px; margin-top: 235px; left: 50%; margin-left: -290px; opacity: 0;}
	.section3 .stabber{z-index: 3; margin-top: 235px; left: 50%; opacity: 0;}
	.section3 .bird{top: 0; left: 50%; margin: 310px 0 0 -465px; opacity: 0;}
	.obj._3-1, .obj._3-2, .obj._3-3, .obj._3-4, .obj._3-5, .obj._3-6, .obj._3-7, .obj._3-8, .obj._3-9, .obj._3-10, .obj._3-11{top: 0; left: 50%; opacity: 0;}
		.section3 .video{position: absolute; z-index: 1; top: 0; left: 50%; margin: 338px 0 0 -144px;}
		.obj._3-1{z-index: 2; margin: 285px 0 0 -430px;}
		.obj._3-2{z-index: 3; margin: 555px 0 0 -290px;}
		.obj._3-3{z-index: 4; margin: 575px 0 0 -10px;}
		.obj._3-4{z-index: 2; margin: 670px 0 0 8px;}
		.obj._3-5{z-index: 2; margin: 670px 0 0 8px;}
		.obj._3-6{z-index: 5; margin: 676px 0 0 52px;}
		.obj._3-7{z-index: 6; margin: 546px 0 0 115px;}
		.obj._3-8{z-index: 2; margin: 330px 0 0 205px;}
		.obj._3-9{z-index: 2; margin: 415px 0 0 150px;}
		.obj._3-10{z-index: 3; margin: 635px 0 0 -423px; width: 182px; height: 30px; background: var(--c-red); transform-origin: left;}
		.obj._3-11{z-index: 3; margin: 745px 0 0 -55px; width: 28px; height: 28px; border-radius: 50%; border: var(--line-2);}
	.rec._3-1, .rec._3-2, .rec._3-3, .rec._3-4, .rec._3-5{width: 29px; height: 29px; left: 50%; z-index: 2; margin-top:326px; margin-left:329px;}
		.rec._3-1, .rec._3-2{border: var(--line-2); border-color: var(--c-blue);}
		.rec._3-3, .rec._3-4, .rec._3-5{background: var(--c-blue);}
	.s3-1, .s3-2{position: absolute; z-index: 2; opacity: 0;}	
		.s3-1{font-family: var(--f-human); margin: 600px 0 0 85px;}
		.s3-2{margin: 940px 0 0 390px; width: 610px;}
.section4{min-height: 1300px; background: url("../img/people/bg.jpg") no-repeat bottom; margin-top: 120px;}
	.section4 .brain{z-index: 3; margin-top: 78px; left: 50%; margin-left: -182px; opacity: 0;}
	.section4 .shape{z-index: 2; border: var(--line-3); width: 626px; height: 626px; left: 50%; margin-top: 208px; margin-left: -299px; border-radius: 50%; opacity: 0;}
	.section4 .stabber{z-index: 3; margin-top: 209px; left: 50%; margin-left: -138px; opacity: 0;}
	.section4 .butterfly{z-index: 6; top: 0; left: 50%; margin: 466px 0 0 -494px; opacity: 0;}
		.obj._4-1, .obj._4-2, .obj._4-3, .obj._4-4, .obj._4-5, .obj._4-6, .obj._4-7, .obj._4-8, .obj._4-9, .obj._4-10, .obj._4-11, .obj._4-12, .obj._4-13, .obj._4-14, .obj._4-15, .obj._4-16{top: 0; left: 50%; opacity: 0;}
			.obj._4-1{z-index: 1; margin: 545px 0 0 -349px;}
			.obj._4-2{z-index: 2; margin: 274px 0 0 -406px;}
			.obj._4-3{z-index: 1; margin: 306px 0 0 -34px;}
			.obj._4-4{z-index: 3; margin: 448px 0 0 -326px;}
			.obj._4-5{z-index: 3; margin: 585px 0 0 -474px;}
			.obj._4-6{z-index: 3; margin: 585px 0 0 -474px; transform-origin: bottom center;}
			.obj._4-7{z-index: 2; margin: 253px 0 0 156px;}
			.obj._4-8{z-index: 3; margin: 253px 0 0 156px;}
			.obj._4-9{z-index: 0; margin: 648px 0 0 -154px; transform-origin: left}
			.obj._4-10{z-index: 1; margin: 461px 0 0 -76px; transform-origin: bottom}
			.obj._4-11{z-index: 3; margin: 712px 0 0 -46px; width: 24px; height: 182px; background: var(--c-red); transform-origin: bottom;}
			.obj._4-12, .obj._4-13, .obj._4-14, .obj._4-15, .obj._4-16{z-index: 3; width: 28px; height: 28px; border-radius: 50%; border: var(--line-2);}
			.obj._4-12{margin: 458px 0 0 98px;}
			.obj._4-13{margin: 275px 0 0 206px;}
			.obj._4-14{margin: 249px 0 0 262px; width: 46px; height: 46px; border-color: var(--c-navy);}
			.obj._4-15{margin: 302px 0 0 302px; width: 18px; height: 18px;}
			.obj._4-16{margin: 802px 0 0 -330px; width: 18px; height: 18px;}
		.tri._4-1, .tri._4-2, .tri._4-3, .tri._4-4, .tri._4-5, .tri._4-6, .tri._4-7, .tri._4-8{z-index: 3; top: 0; left: 50%; opacity: 0;}
			.tri._4-1, .tri._4-2, .tri._4-3, .tri._4-4{margin: 752px 0 0 136px;}
			.tri._4-5, .tri._4-6, .tri._4-7, .tri._4-8{width: 20px; height: 17px; margin: 803px 0 0 212px;}
		.s4-1, .s4-2, .s4-3{position: absolute; z-index: 1; left: 50%; opacity: 0;}	
			.s4-1{font-family: var(--f-human); margin: 622px 0 0 -476px; color: var(--c-greyd);}
			.s4-2{margin: 950px 0 0 -390px; width: 430px; color: var(--c-white); letter-spacing: var(--letter-1);}
			.s4-3{margin: 950px 0 0 150px; width: 350px; color: var(--c-white); letter-spacing: var(--letter-1);}
.section5{min-height: 1000px; color: var(--c-blackl); background: rgb(225,226,228); background: linear-gradient(180deg, rgba(225,226,228,1) 0%, rgba(255,255,255,1) 75%); padding-top: 200px;}
	.section5.active{filter: blur(0px);}
	.section5 .container-fluid{z-index: 3;}	
	.section5 .f-16{width: 360px;}
	.obj._5-1, .obj._5-2, .obj._5-3, .obj._5-4, .obj._5-5, .obj._5-6, .obj._5-7, .obj._5-8, .obj._5-9, .obj._5-10, .obj._5-11, .obj._5-12{top: 0; left: 50%; opacity: 0;}
		.obj._5-1{z-index: 2; margin: 384px 0 0 -72px;}
		.obj._5-2{z-index: 1; margin: 600px 0 0 -137px;}
		.obj._5-3{z-index: 1; margin: 309px 0 0 520px;}
		.obj._5-4{z-index: 1; margin: 550px 0 0 -632px;}
		.obj._5-5{z-index: 1; margin: 679px 0 0 682px;}
		.obj._5-6{z-index: 1; margin: 508px 0 0 -530px;}
		.obj._5-7{z-index: 1; left: auto; right: 0; margin: 321px 0 0 0;}
		.obj._5-8{z-index: 1; margin: 662px 0 0 -421px;}
		.obj._5-9{z-index: 1; margin: 118px 0 0 733px;}
		.obj._5-10{z-index: 3; margin: 735px 0 0 -172px;}
		.obj._5-11{z-index: 3; margin: 360px 0 0 -116px;}
		.obj._5-12{z-index: 3; margin: 457px 0 0 459px;}
	.rec._5-1{display: block; width: 670px; height: 520px; top: 0; left: 50%; z-index: 2; border: var(--line-2); border-color: var(--c-black); margin: 380px 0 0 -75px;}
	.section5 .scaled{position: absolute; z-index: 1; width: 100%; height: 100vh; top: 0; right: 0;}
	.section5 .row.start{position: absolute; z-index: 2;}
.section6{min-height: 100vh; color: var(--c-blackl); background: #fff; padding-top: 200px}
	.section6 .f-16{width: 500px;}
	.section6 .container-fluid{z-index: 3;}	
	.section6 .container{padding-top: 240px;}	
	.obj._6-1, .obj._6-2, .obj._6-3, .obj._6-4, .obj._6-5, .obj._6-6, .obj._6-7, .obj._6-8{z-index: 2; top: 0; left: 0; opacity: 0; margin-left: 10px;}
	.rec._6-1{display: block; width: 520px; height: 680px; top: 0; left: 0; z-index: 1; border: var(--line-2); border-color: var(--c-black); margin: 220px 0 0 240px;}
.section7{min-height: 100vh; color: var(--c-blackl); background: #fff; padding-top: 200px;}
	.section7 .container-fluid{padding-top: 50px; z-index: 3;}
	.section7 .is-relative{margin-left: -300px;}
	.section7 .f-16{width: 410px;}
	.obj._7-1, .obj._7-2, .obj._7-3, .obj._7-4, .obj._7-5{z-index: 2; top: 0; right: 0; opacity: 0;}
	.rec._7-1, .rec._7-2, .rec._7-3, .rec._7-4, .rec._7-5, .rec._7-6, .rec._7-7, .rec._7-8, .rec._7-9, .rec._7-10, .rec._7-11{display: block; width: 108px; height: 142px; top: 0; right: 0; z-index: 1; border: var(--line-3); border-color: var(--c-black); transform:rotate(-30deg); margin: 90px 650px 0 0;}
.section8{min-height: 100vh; color: var(--c-blackl); background: #fff; padding-top: 200px;}
	.section8 .container{padding-top: 150px; padding-bottom: 50px;}
	.section8 .f-16{width: 480px;}
	.obj._8-1, .obj._8-2, .obj._8-3, .obj._8-4{z-index: 2; top: 0; left: 0; opacity: 0;}
	.rec._8-1{display: block; width: 622px; height: 622px; top: 0; left: 0; z-index: 1; border: var(--line-3); border-color: var(--c-black); border-radius: 50%; margin: 329px 0 0 160px; opacity: 0;}
.section9{min-height: 100vh; color: var(--c-blackl); background: #fff; padding-top: 200px;}
	.section9 .container{padding-top: 150px; padding-bottom: 50px;}
/*	.section9 .is-relative{overflow: hidden;}*/
	.section9 .f-16{width: 500px;}
	.obj._9-1, .obj._9-2, .obj._9-3, .obj._9-4, .obj._9-5, .obj._9-6, .obj._9-7, .obj._9-8, .obj._9-9{z-index: 2; top: 0; left: 50%;}
		.obj._9-1{margin: 249px 0 0 -293px;}
		.obj._9-2{margin: 230px 0 0 -571px;}
		.obj._9-3{margin: 230px 0 0 -571px;}
		.obj._9-4{margin: 354px 0 0 -293px;}
		.obj._9-5{margin: 669px 0 0 -429px;}
		.obj._9-6{margin: 712px 0 0 -550px;}
		.obj._9-7{margin: 744px 0 0 -635px;}
		.obj._9-8{margin: 547px 0 0 -612px;}
		.obj._9-9{margin: 521px 0 0 -609px;}
	.rec._9-1{display: block; width: 404px; height: 404px; top: 0; left: 50%; z-index: 1; border: var(--line-3); border-color: var(--c-black); margin: 242px 0 0 -300px;}
.section10{min-height: 100vh; color: var(--c-blackl); background: #fff; margin-bottom: 100px; padding-top: 200px;}
	.section10 .col-6{flex-basis: 46%;}
	.section10 .col-6:nth-child(1){padding-left: 10%;}
	.section10 .col-6:nth-child(2){padding-right: 10%;}
.section11{color: var(--c-blackl); background: #fff; margin: 100px auto;}
	.section11 .f-16{width: 90%;}

/*services*/
.services1{min-height: 100vh;}
	.services1 .bg{z-index: -1; left: 0%; margin-top: 400px; margin-left: 0; opacity: 0;}
	.services1 .brain{z-index: 3; margin-top: 90px; left: 50%; margin-left: -182px; opacity: 0;}
	.services1 .shape{z-index: 2; border: var(--line-3); width: 580px; height: 580px; margin-top: 190px; left: 50%; margin-left: -340px; opacity: 0;}
	.services1 .stabber{z-index: 3; left: 50%; margin-top: 190px; margin-left: -190px; opacity: 0;}
	.obj._s1-1, .obj._s1-2, .obj._s1-3, .obj._s1-4, .obj._s1-5, .obj._s1-6, .obj._s1-7, .obj._s1-8, .obj._s1-9, .obj._s1-10{top: 0; left: 50%; opacity: 0;}
		.obj._s1-1{z-index: 2; margin: 400px 0 0 -520px;}
		.obj._s1-2{z-index: 2; margin: 460px 0 0 -340px;}
		.obj._s1-3{z-index: 2; margin: 330px 0 0 -320px;}
		.obj._s1-4{z-index: 2; margin: 350px 0 0 -140px;}
		.obj._s1-5{z-index: 2; margin: 260px 0 0 -130px;}
		.obj._s1-6{z-index: 2; margin: 710px 0 0 -410px;}
		.obj._s1-7{z-index: 2; margin: 710px 0 0 -410px;}
		.obj._s1-8{z-index: 3; margin: 210px 0 0 -510px;}
		.obj._s1-9{z-index: 3; margin: 775px 0 0 -515px; width: 182px; height: 44px; background: var(--c-red); transform-origin: right;}
	.srec._1-1, .srec._1-2, .srec._1-3, .srec._1-4, .scir._1-1{z-index: 3; top: 0; left: 50%; opacity: 0;}
		.srec._1-1, .srec._1-2, .srec._1-3{width: 30px; height: 30px; background: var(--c-green);}
		.srec._1-1{margin: 355px 0 0 338px;}
		.srec._1-2{margin: 355px 0 0 338px;}
		.srec._1-3{margin: 355px 0 0 338px;}
		.srec._1-4{z-index: 1; border: 5px solid var(--c-red); width: 48px; height: 48px; margin: 385px 0 0 290px;}
		.scir._1-1{z-index: 1; border-radius: 50%; border: 5px solid var(--c-red); width: 36px; height: 36px; margin: 275px 0 0 -355px;}
	.sf1-1, .sf1-2{position: relative; opacity: 0;}	
		.sf1-1{font-family: var(--f-human); margin: 0 auto; padding-top: 620px;}
		.sf1-2{margin: 30px 0 0 355px; width: 820px; letter-spacing: var(--letter-1);}
		.sf1-3{margin: 30px 0 0 355px; width: 820px; letter-spacing: var(--letter-1);}
		.sf1-3 li{padding: 0;}
.services2{padding: 100px 0;}
	.services2 .row .col-2{position: relative;}
	.services2 .row .f-16{text-transform: uppercase;}
	.services2 ._years{font-family: var(--f-prob); width: 85px; padding: 1px; background: var(--c-white); position: absolute; z-index: 1; top: 50%; left: 50%; line-height: 16px; transform: translate(0,-50%); margin-top: -12px; margin-left: -65px;}
.services3{padding: 100px 0; background: #e0ddd6;}
	.services3 img{object-fit: contain; max-width: 100%;}
	.services3 .row li{width: 12%; padding: 1% 2%;}
	.services3 .row li.half{width: 10%; padding: 1% 2%;}
	.services3 .row li.double{width: 18%; padding: 1% 2%;}
	.moreServices{display: inline-block; font-family: var(--f-prob); border: var(--line-1); border-color: var(--c-blackl); padding: var(--space-1) var(--space-2); transition: all .3s; cursor: pointer; min-width: 120px;}
		.moreServices:hover{background: var(--c-blackl); color: var(--c-white); transition: all .3s;}
	.servicesList{display: none; padding-top: 50px;}
/* .services4{} */
.services4 img{max-width: 100%;}
	.services4 ._overlay{position: absolute; top: 50%; left: 0; right: 0; margin: auto; transform: translate(0,-50%); color: var(--c-white); text-align: center;}
.services5{margin-top: -10%;}
	.services5 .container{padding: 100px; background: var(--c-white);}
	.services5 img{max-width: 100%;}
	.services5 .col-6{flex-basis: 45%;}


/*works*/
.works1{position: relative; min-height: 100vh; padding-top: 300px; padding-bottom: 100px; background: var(--c-grey);}
	/* .works1 *{transition: all .3s;} */
	.works1 .client-list li{text-align: center; margin: 0 6%; padding: 40px 0;}
		.works1 .client-list img{-webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2); display: inline-block;}
		.works1 .client-list img:hover{transform: scale(1.05);}
		.works1 .client-list .center li{border: var(--line-3); border-color: var(--c-blackl);}
	.works-icon{width: 60%; margin: auto; font-size: var(--f-16); line-height: var(--lh-16); font-weight: bold; text-align: center;}
	.works-icon li:hover .icon-works{transform: translateY(-5px);}
	.works-title{width: 80%; margin: auto;}
	.works-icon, .works-title{opacity: 0;}
	.center .works-icon, .center .works-title{opacity: 1;}
	.works1 .center a{pointer-events: auto;}
.autoplay{position: absolute; z-index: 80; bottom: 120px; left: 5%;}
.autoplay *{transition: all .4s;}
.autoplay .play, .autoplay .stop{position: absolute; display: flex; justify-content: center; align-items: center; width: 52px; height: 52px; border: var(--line-1); border-color: var(--c-blackl); cursor: pointer;}
	.autoplay .play img, .autoplay .stop img{width: 11px; height: 19px;}
	.autoplay .play:hover, .autoplay .stop:hover{transform: translateY(-5px);}
	.autoplay .play{opacity: 0; pointer-events: none;}
	.autoplay .stop{opacity: 1; pointer-events: auto;}
	.autoplay.active .play{opacity: 1; pointer-events: auto;}
	.autoplay.active .stop{opacity: 0; pointer-events: none;}
	
.works2{position: relative; display: block;}
	.works2 .overlay{position: absolute; z-index: 2; top: 50%; left: 0; right: 0; margin: auto; transform: translate(0,-50%); color: var(--c-white); letter-spacing: var(--letter-1);}
	.works2 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
	.works2 a strong{border-color: var(--c-white); color: var(--c-white);}
	.works2 a strong:hover{background: var(--c-white); color: var(--c-blackl);}
    .works2 .f-80{padding-top: 80px;}
    .works2 .f-16{width: 600px; margin-top: 40px;}

.works1._detail{padding-top: 120px; padding-bottom: 20px;}
	.works1._detail ._next, .works1._detail ._prev{position: fixed; top: 70%; transform: translate(0,-50%); font-size: var(--f-16); line-height: var(--f-16); width: 80px; transition: all .3s; overflow: hidden; opacity: .4;}
	.works1._detail ._prev img{float:right;}
	.works1._detail ._next:hover, .works1._detail ._prev:hover{width: 160px; opacity: 1;}
	.works1._detail ._next{right: 0;}
	.works1._detail ._prev{left: 0;}

.detailImg{padding-top: 25px;}
.detailBtn{cursor: pointer;}
.detailBtn ._watch{display: block;}
.detailBtn ._hide{display: none;}
.preview .detailBtn ._watch{display: none;}
.preview .detailBtn ._hide{display: block;}
/* .detailVideo iframe{position: relative; display: none; top: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%; z-index: 8;}
.preview .detailVideo iframe{display: block; width: 975px; height: 548px;} */
.detailVideo iframe{position: relative; display: block; width: 975px; height: 548px; margin: auto;}
.preview .works-list{display: none;}
.works-list .item{position: relative; width: 1280px; padding: 0 10%;}
.works-list .item._mobile img{width: 380px;}
.works-list #play-video, .works-list #stop-video{position: absolute; z-index: 99; top: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100vh; cursor: pointer;}
.works-list #play-video{display: block;}
.works-list #stop-video{display: none; height: 440px; top: 55px;}

/*projects*/
/* .projects1{min-height: 150vh; margin-top: 150px;}
	.projects1 .brain{z-index: 3; margin-top: 230px; left: 50%; margin-left: -342px; opacity: 0;}
	.obj._p1-1, .obj._p1-2, .obj._p1-3, .obj._p1-4, .obj._p1-5, .obj._p1-6, .obj._p1-7, .obj._p1-8, .obj._p1-9, .obj._p1-10{top: 0; left: 50%; opacity: 0;}
		.obj._p1-1{z-index: 2; margin: 760px 0 0 -650px;}
		.obj._p1-2{z-index: 2; margin: 750px 0 0 -525px;}
		.obj._p1-3{z-index: 2; margin: 160px 0 0 -480px; transform-origin: right;}
		.obj._p1-4{z-index: 2; margin: 480px 0 0 -330px;}
		.obj._p1-5{z-index: 4; margin: 120px 0 0 -330px; transform-origin: center;}
		.obj._p1-6{z-index: 4; margin: 860px 0 0 -420px;}
		.obj._p1-7{z-index: 2; margin: 900px 0 0 -100px;}
		.obj._p1-8{z-index: 2; margin: 260px 0 0 -30px;}
		.obj._p1-9{z-index: 3; margin: 380px 0 0 -400px;}
		.obj._p1-10{z-index: 3; margin: 380px 0 0 -400px;}
	.prec1-1, .pcir1-1, .pcir1-2{position: absolute; z-index: 2; top: 0; left: 50%; opacity: 0;}
		.prec1-1{z-index: 3; border: 5px solid var(--c-red); width: 48px; height: 48px; margin: 790px 0 0 -250px;}
		.pcir1-1, .pcir1-2{z-index: 3; border-radius: 50%; border: 5px solid var(--c-red);}
		.pcir1-1{width: 31px; height: 31px; margin: 680px 0 0 -580px;}
		.pcir1-2{width: 46px; height: 46px; margin: 720px 0 0 -520px;}
	.pf1-1{position: absolute; opacity: 0; z-index: 5; right: 0;}	
		.pf1-1{width: 320px; float: right; margin-right: 80px; padding-top: 600px;} */
.projects1{min-height: 150vh; margin-top: 150px;}
	.projects1 .brain{z-index: 3; margin-top: 230px; left: 50%; margin-left: -342px; opacity: 0;}
	.obj._p1-1, .obj._p1-2, .obj._p1-3, .obj._p1-4, .obj._p1-5, .obj._p1-6, .obj._p1-7, .obj._p1-8, .obj._p1-9, .obj._p1-10{top: 0; left: 50%; opacity: 0;}
		.obj._p1-1{z-index: 2; margin: 760px 0 0 -650px;}
		.obj._p1-2{z-index: 2; margin: 750px 0 0 -525px;}
		.obj._p1-3{z-index: 2; margin: 160px 0 0 -480px; transform-origin: right;}
		.obj._p1-4{z-index: 2; margin: 480px 0 0 -330px;}
		.obj._p1-5{z-index: 4; margin: 120px 0 0 -330px; transform-origin: center;}
		.obj._p1-6{z-index: 4; margin: 860px 0 0 -420px;}
		.obj._p1-7{z-index: 2; margin: 900px 0 0 -100px;}
		.obj._p1-8{z-index: 2; margin: 260px 0 0 -30px;}
		.obj._p1-9{z-index: 3; margin: 380px 0 0 -400px;}
		.obj._p1-10{z-index: 3; margin: 380px 0 0 -400px;}
	.prec1-1, .pcir1-1, .pcir1-2{position: absolute; z-index: 2; top: 0; left: 50%; opacity: 0;}
		.prec1-1{z-index: 3; border: 5px solid var(--c-red); width: 48px; height: 48px; margin: 790px 0 0 -250px;}
		.pcir1-1, .pcir1-2{z-index: 3; border-radius: 50%; border: 5px solid var(--c-red);}
		.pcir1-1{width: 31px; height: 31px; margin: 680px 0 0 -580px;}
		.pcir1-2{width: 46px; height: 46px; margin: 720px 0 0 -520px;}
	.pf1-1{position: absolute; opacity: 0; z-index: 5; right: 0;}	
		.pf1-1{width: 320px; float: right; margin-right: 80px; padding-top: 600px;}
.projects2{min-height: 100vh; margin-top: 60px;}	
	.projects2 .col-6{margin-right: 20px;}	
	.projects2 .col-6:nth-child(2){padding-right: 200px;}	
	.projects2 .row.start div{margin: 10px;}	
.projects3{min-height: 100vh; margin-top: 60px;}	
	.obj._p3-1, .obj._p3-2, .obj._p3-3, .obj._p3-4, .obj._p3-5{top: 0; left: 50%; opacity: 0;}
		.obj._p3-1{z-index: 2; margin: -60px 0 0 -50px;}
		.obj._p3-2{z-index: 2; margin: 110px 0 0 -230px;}
		.obj._p3-3{z-index: 2; margin: 250px 0 0 -400px;}
		.obj._p3-4{z-index: 2; margin: -80px 0 0 -130px;}	
	.projects3 .col-6:nth-child(1){padding-right: 160px;}	
.projects4{min-height: 100vh; margin-top: 60px;}	
	.obj._p4-1, .obj._p4-2{top: 0; left: 0; opacity: 0;}
		.obj._p4-1{z-index: 2; margin: -50px 0 0 -50px;}
		.obj._p4-2{z-index: 2; margin: -50px 0 0 -50px;}
	.projects4 .col-4{padding-top: 100px;}
.projects5{min-height: 110vh; padding: 150px 0; background: #e24b54;}	
	.obj._p5-1, .obj._p5-2, .obj._p5-3, .obj._p5-4, .obj._p5-5, .obj._p5-6{top: 0; left: 0; opacity: 1; z-index: 2; margin: 0px 0 0 50px;}
	.projects5 a strong{color: var(--c-black); border-color: var(--c-black);}	
	.projects5 .f-40, .projects5 .f-16{padding-right: 20px;}
	.projects5 .col-2{padding-top: 180px;}	
	.projects5 .col-3{padding-top: 80px;}	
	a.disabled{pointer-events: none;}
.projects6{background: #111111;}	
	.projects6 ._bg{width: 100%; min-height: 100vh; padding: 180px 0; background: url(../img/projects/adaptshirt-1.jpg) no-repeat top right; background-size: auto 100%; opacity: 0;}
	.projects6 a:hover strong{color: var(--c-white); border-color: var(--c-white);}
	.projects6 .col-5 {z-index: 2;}
.projects7{margin-top: -100px;}	
	.projects7 .col-4{margin-top: 320px;}	
.projects8{min-height: 100vh; padding-top: 150px;}
	.projects8 .scaled{position: absolute; z-index: 1; width: 130%; height: 100vh; top: 0; right: -12%;}
	.projects8 .row.start{position: absolute; z-index: 2;}
	.projects8 .col-6{margin-top: 140px; padding-right: 150px;}	
	.obj._p8-1, .obj._p8-2, .obj._p8-3, .obj._p8-4{top: 0; left: 50%; opacity: 0;}
	.obj._p8-1{z-index: 2; margin: 0;}
	.obj._p8-2{z-index: 3; margin: 0;}
	.obj._p8-3{z-index: 4; margin: 0;}
	.obj._p8-4{z-index: 5; margin: 0;}		
	.projects8{
		background-color:hsla(0,0%,100%,1);
		background-image:
		radial-gradient(at 51% 30%, hsla(222,96%,78%,1) 0px, transparent 50%),
		radial-gradient(at 63% 66%, hsla(265,94%,80%,1) 0px, transparent 50%),
		radial-gradient(at 40% 66%, hsla(180,100%,80%,1) 0px, transparent 50%);
		animation: gradient 8s ease infinite;
		 background-size: 150% 150%;
	 }
	 @keyframes gradient {
		 0% {
			 background-position: 0% 20%;
		 }
		 25% {
			 background-position: 100% 50%;
		 }
		 50% {
			 background-position: 50% 70%;
		 }
		 100% {
			 background-position: 0% 20%;
		 }
	 }
.projects9{min-height: 100vh; padding-top: 130px; background: #464DE6 url(../img/projects/bg-sekelola.webp) no-repeat center; background-size: 100% auto;}
.projects9 .scaled{position: absolute; z-index: 1; width: 100%; height: 100vh; top: 0; right: 0;}
.projects9 img.logo{height: 48px; max-width: 100%;}
	.projects9 .row.start{position: absolute; z-index: 2;}
	.projects9 .col-6{margin-top: 140px; padding-right: 150px;}	
	.obj._p9-1{top: 0; left: 50%; opacity: 0; z-index: 2; margin: 0;}
.projects9 a strong{border-color: var(--c-white);}
.projects9 a:hover strong{border-color: var(--c-white); background: var(--c-white); color: var(--c-black);}

.projects4 img, .projects5 img, .projects7 img, .projects8 img{max-width: 100%;}
.projects2 p, .projects3 p, .projects4 p, .projects5 p, .projects6 p, .projects7 p, .projects8 p{padding-bottom: 30px;}
.projects2 .scaled, .projects3 .scaled, .projects4 .scaled, .projects5 .scaled, .projects8 .scaled{margin-top: 120px;}


/*hubungi*/
.hubungi{min-height: 100vh;}
	.hubungi .brain{z-index: 3; margin-top: 120px; left: 50%; margin-left: -210px; opacity: 0;}
	.hubungi .shape{z-index: 2; border: var(--line-3); width: 580px; height: 580px; margin-top: 233px; left: 50%; margin-left: -345px; opacity: 0;}
	.hubungi .stabber{z-index: 5; left: 50%; margin-top: 233px; margin-left: -260px; opacity: 0;}
	.hubungi .stabber._desktop{display: block;}
	.hubungi .stabber._mobile{display: none;}
	.obj._h1-1, .obj._h1-2, .obj._h1-3, .obj._h1-4, .obj._h1-5, .obj._h1-6, .obj._h1-7, .obj._h1-8, .obj._h1-9, .obj._h1-10{top: 0; left: 50%; opacity: 0;}
		.obj._h1-1{z-index: 1; margin: 260px 0 0 -325px; opacity: 1;}
		.obj._h1-2{z-index: 1; margin: 287px 0 0 -90px;}
		.obj._h1-3{z-index: 1; margin: 359px 0 0 -576px;}
		.obj._h1-4{z-index: 4; margin: 660px 0 0 -400px;}
		.obj._h1-5{z-index: 4; margin: 580px 0 0 50px;}
		.obj._h1-6{z-index: 4; margin: 255px 0 0 -411px;}
		.obj._h1-7{z-index: 3; margin: 459px 0 0 44px;}
			.obj._h1-10{z-index: 4; margin: 560px 0 0 20px;}
		.obj._h1-8{z-index: 4; margin: 420px 0 0 -140px;}
		.obj._h1-9{z-index: 4; margin: 420px 0 0 -140px;}
	.tri._h1-1, .tri._h1-2, .tri._h1-3, .tri._h1-4, .tri._h1-5, .tri._h1-6, .tri._h1-7, .tri._h1-8{z-index: 2; top: 0; left: 50%; margin: 258px 0 0 280px; opacity: 0;}
		.tri._h1-5, .tri._h1-6, .tri._h1-7, .tri._h1-8{margin: 292px 0 0 338px;}
	.rec._h1-1{display: block; width: 182px; height: 24px; background: var(--c-red); transform-origin: right; top: 0; left: 50%; margin: 360px 0 0 96px; z-index: 3; opacity: 0;}
	.cir._h1-1, .cir._h1-2{display: block; z-index: 4; border-radius: 50%; border: 5px solid var(--c-red); width: 28px; height: 28px; margin: 750px 0 0 -140px; top: 0; left: 50%; opacity: 0;}
		.cir._h1-2{width: 18px; height: 18px; margin: 819px 0 0 -205px;}
	.hf1-1, .hf1-2{position: relative; color: var(--c-black); z-index: 3; opacity: 0;}	
		.hf1-1{font-family: var(--f-human); margin: 0 auto; padding-top: 375px; margin-left: 85px; letter-spacing: 10px;}
		.hf1-2{margin: 255px auto 0 auto; width: 1070px;}
		.hf1-3{margin: 60px auto 0 auto; width: 1070px; opacity: 0;}
	.hb1-1, .hb1-2, .hb1-3{position: relative; display: block; z-index: 1; font-family: var(--f-prob); font-size: var(--f-16); width: 100%; margin-bottom: var(--space-2); border: var(--line-1); text-align: center; padding: var(--space-0) 0; transition: all .3s;}	
		.hb1-1{background: var(--c-white); border-color: var(--c-black);}
			.hb1-1:hover{background: var(--c-black); color: var(--c-white);}
		.hb1-2{background: var(--c-black); border-color: var(--c-black); color: var(--c-white);}
			.hb1-2:hover{background: var(--c-white); color: var(--c-black);}
		.hb1-3{background: var(--c-red); border-color: var(--c-red); color: var(--c-white);}	
			.hb1-3:hover{background: var(--c-white); color: var(--c-red);}	
	._hl div{transition: all .3s;}
		._hl img{max-width: 100%;}
		._hl div:hover{transform: translateY(-5px);}


/*card*/
.card{min-height: 100vh;}
	.card .brain{z-index: 2; margin-top: 91px; left: 50%; margin-left: -188px; opacity: 0;}
	.card .shape{z-index: 1; border: var(--line-3); width: 464px; height: 464px; margin-top: 182px; left: 50%; margin-left: -292px; opacity: 0;}
	.card .stabber{z-index: 5; left: 50%; margin-top: 182px; margin-left: -228px; opacity: 0;}
	.card .stabber._desktop{display: block;}
	.card .stabber._mobile{display: none;}
	.card .col-12{flex-basis: 60%;}
	.card ._mobile{display: none;}
	.obj._c1-1, .obj._c1-2, .obj._c1-3, .obj._c1-4, .obj._c1-5, .obj._c1-6, .obj._c1-7, .obj._c1-8, .obj._c1-9, .obj._c1-10, .obj._c1-jr{top: 0; left: 50%; opacity: 0;}
		.obj._c1-1{z-index: 1; margin: 205px 0 0 -278px; opacity: 1;}
		.obj._c1-2{z-index: 1; margin: 228px 0 0 -100px;}
		.obj._c1-jr._desktop{display: block; z-index: 4; margin: 212px 0 0 -485px; z-index: 2;}
			.obj._c1-jr._mobile{display: none;}
		.obj._c1-4{z-index: 4; margin: 660px 0 0 -400px;}
		.obj._c1-5{z-index: 4; margin: 580px 0 0 50px;}
		.obj._c1-6{z-index: 4; margin: 255px 0 0 -411px;}
		.obj._c1-7{z-index: 3; margin: 459px 0 0 44px;}
			.obj._c1-10{z-index: 4; margin: 560px 0 0 20px;}
		.obj._c1-8{z-index: 4; margin: 420px 0 0 -140px;}
		.obj._c1-9{z-index: 4; margin: 420px 0 0 -140px;}
	.tri._c1-1, .tri._c1-2, .tri._c1-3, .tri._c1-4, .tri._c1-5, .tri._c1-6, .tri._c1-7, .tri._c1-8{z-index: 2; top: 0; left: 50%; margin: 200px 0 0 206px; opacity: 0;}
		.tri._c1-5, .tri._c1-6, .tri._c1-7, .tri._c1-8{margin: 227px 0 0 254px;}
	.rec._c1-1{display: block; width: 145px; height: 20px; background: var(--c-red); transform-origin: right; top: 0; left: 50%; margin: 283px 0 0 60px; z-index: 3; opacity: 0;}
	.cir._c1-1, .cir._c1-2{display: block; z-index: 4; border-radius: 50%; border: 5px solid var(--c-red); width: 22px; height: 22px; margin: 661px 0 0 -132px; top: 0; left: 50%; opacity: 0;}
		.cir._c1-2{width: 14px; height: 14px; margin: 716px 0 0 -185px;}
	.cf1-1{position: absolute; z-index: 0; top: 0; left: 50%; margin: 760px 0 0 -292px; width: 792px; padding-bottom: 80px; color: var(--c-black); z-index: 3; opacity: 0; font-size: 24px;}
		.row._cl{justify-content: flex-start; gap: 30px;}
	.cb1-1, .cb1-2, .cb1-3{position: relative; display: block; z-index: 1; font-family: var(--f-prob); font-size: var(--f-16); width: 100%; margin-bottom: var(--space-2); border: var(--line-1); text-align: center; padding: var(--space-1) 0; transition: all .3s;}	
		.cb1-1{background: var(--c-white); border-color: var(--c-black);}
			.cb1-1:hover{background: var(--c-black); color: var(--c-white);}
		.cb1-2{background: var(--c-black); border-color: var(--c-black); color: var(--c-white);}
			.cb1-2:hover{background: var(--c-white); color: var(--c-black);}
		.cb1-3{background: var(--c-red); border-color: var(--c-red); color: var(--c-white);}	
			.cb1-3:hover{background: var(--c-white); color: var(--c-red);}	
	._cl div{transition: all .3s;}
		._cl img{max-width: 100%;}
		._cl div:hover{transform: translateY(-5px);}
	._ci a{transition: all .3s; opacity: .8;}
		._ci a:hover{opacity: 1;}

/*indofood*/
.indofood1{min-height: 100vh; color: var(--c-blackl); background: #fff; padding-top: 100px;}
	.indofood1 .container{padding-top: 220px; margin-left: -100px; z-index: 3;}	
	.obj._in1-1, .obj._in1-2, .obj._in1-3, .obj._in1-4, .obj._in1-5, .obj._in1-6, .obj._in1-7, .obj._in1-8{z-index: 2; top: 0; left: 0; opacity: 0; margin-left: 10px;}
	.rec._in1-1{display: block; width: 520px; height: 680px; top: 0; left: 50%; z-index: 1; border: var(--line-2); border-color: var(--c-black); margin: 220px 0 0 -300px;}
	.f-16 a:nth-child(1){margin-right: var(--space-3);}
.indofood2{margin-top: 180px;}	
	.indofood2 .overlay{width: 141px;}
.indofood3{margin-top: 100px;}
	.indofood3 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
.indofood4{margin-top: 100px;}
	.indofood4 .row-2{margin-top: -100px; margin-left: -50px;}
	.indofood4 .row-3{margin-top: 100px;}
	.indofood4 .row-3 .row-3-1{position: relative;}
	.indofood4 .row-3 .row-3-1 .overlay{top: 380px; width: 141px; transform: none; left: 0; right: 0; margin: auto;}
	.indofood4 .row-3 .row-3-1 .img-s img{margin-left: var(--space-2);}
	.indofood4 .row-3 .row-3-2{padding-left: 20px;}
.indofood5, .indofood6, .indofood7{padding: 50px 0;}
.indofood2 img, .indofood4 img, .indofood5 img, .indofood6 img, .indofood7 img{max-width: 100%;}
	.indofood5 .container-fluid, .indofood6 .container-fluid{padding-left: 15%;}
	.indofood7 .overlay{width: 120px; top: 0; margin-top: 200px;}

/*danone*/
.danone1{min-height: 1050px; color: var(--c-blackl); background: rgb(225,226,228); background: linear-gradient(180deg, rgba(225,226,228,1) 0%, rgba(255,255,255,1) 75%);}
	.danone1.active{filter: blur(0px);}
	.danone1 .container-fluid{padding-top: 260px; z-index: 2;}	
	.danone1 .f-16{width: 500px;}
	.danone1 .obj._5-1, .danone1 .obj._5-2, .danone1 .obj._5-3, .danone1 .obj._5-4, .danone1 .obj._5-5, .danone1 .obj._5-6, .danone1 .obj._5-7, .danone1 .obj._5-8, .danone1 .obj._5-9, .danone1 .obj._5-10, .danone1 .obj._5-11, .danone1 .obj._5-12, .danone1 .rec._5-1{top: -7%;}
	.danone1 .obj._5-4{left: 0; margin: 735px 0 0 50px;}
	.danone1 .obj._5-8{left: 0; margin: 800px 0 0 -50px;}
	.danone1 .obj._5-13{top: 50%; left: 50%; z-index: 3; margin: 0px 0 0 195px;}
	.danone1 .scaled{position: absolute; z-index: 1; width: 100%; height: 100vh; top: 0; right: 0; transform-origin: right;}
	.danone1 .row.start{position: absolute; z-index: 2;}
.danone2, .danone3, .danone4, .danone5{margin-top: 100px;}
.danone2 img, .danone4 img, .danone5 img, .danone6 img{max-width: 100%;}
	.danone2 img{display: inline-block;}
	.danone2 .col-4:nth-child(2){text-align: center;}
	.danone3 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
.danone6{margin-top: 200px; margin-bottom: 5%;}
	.danone6 .container-fluid{padding-left: 14.5%;}
	.danone6 .col-4{padding-right: 80px;}
	.danone6 .col-8{text-align: right;}
	.danone6 .col-8 img{display: inline-block;}

/*abc*/
.abc1{min-height: 100vh; color: var(--c-blackl); background: #fff; padding-top: 200px;}
	.abc1 .scaled{transform-origin: right;}
	.abc1 .container-fluid{padding-top: 50px; z-index: 3;}
	.abc1 .container-fluid .ml{margin-left: 14.5%;}
	.abc1 .is-relative{margin-left: -300px;}
	.abc1 .f-16{width: 680px;}
	.abc1 .obj._7-1, .abc1 .obj._7-2, .abc1 .obj._7-3, .abc1 .obj._7-4, .abc1 .obj._7-5{top: 5%;}
	.abc1 .rec._7-1, .abc1 .rec._7-2, .abc1 .rec._7-3, .abc1 .rec._7-4, .abc1 .rec._7-5, .abc1 .rec._7-6, .abc1 .rec._7-7, .abc1 .rec._7-8, .abc1 .rec._7-9, .abc1 .rec._7-10, .abc1 .rec._7-11{top: 5%;}
.abc2{margin-top: -25vw; z-index: 4;}
.abc3, .abc4, .abc5, .abc6, .abc7, .abc8{margin-top: 100px;}
	.abc3 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
	.abc3 .col-3{margin-bottom: -50px;}
	.abc8{margin-bottom: 100px;}
.abc1 .img img, .abc2 img, .abc4 img, .abc5 img, .abc6 img, .abc7 img, .abc8 img{max-width: 100%;}

/*pg*/
.pg1{min-height: 100vh; color: var(--c-blackl); background: #fff; padding-top: 200px;}
	.pg1 .scaled{transform-origin: left;}
	.pg1 .container{padding-top: 200px;}
	.pg1 .f-16, .pg1 .f-30{width: 500px;}
	.obj._8-1, .obj._8-2, .obj._8-3, .obj._8-4{z-index: 2; top: 0; left: 0; margin-left: 80px; opacity: 0;}
	/* .rec._8-1{display: block; width: 626px; height: 626px; top: 0; left: 50%; z-index: 1; border: var(--line-3); border-color: var(--c-black); margin: 327px 0 0 -307px; opacity: 0;} */
.pg2{margin-top: 200px;}
.pg3, .pg4, .pg5, .pg6, .pg7, .pg8{margin-top: 100px;}
	.pg3 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
	.pg7 .img img{object-fit: cover; width: 100%; height: 100%;}
	.pg7 .overlay._1{width: 140px; z-index: 4;}
	.pg7 .overlay._2{z-index: 2;}
.pg8 .container-fluid{padding-left: 15%;}
.pg2 img, .pg4 img, .pg5 img, .pg6 img, .pg7 img, .pg8 img{max-width: 100%;}

/*smailing*/
.smailing1{min-height: 100vh; color: var(--c-blackl); background: #fff; margin-top: 100px;}
	.smailing1 .scaled{transform-origin: right;}
	.smailing1 .col-6.container{padding-top: 200px;}
	.smailing1 .f-16{width: 500px;}
	.smailing1 .overlay{width: 140px;}
	.smailing1 .obj._9-1, .smailing1 .obj._9-2, .smailing1 .obj._9-3, .smailing1 .obj._9-4, .smailing1 .obj._9-5, .smailing1 .obj._9-6, .smailing1 .obj._9-7, .smailing1 .obj._9-8, .smailing1 .obj._9-9, .smailing1 .rec._9-1{top: 7%;}
.smailing2, .smailing3, .smailing4, .smailing5, .smailing6{margin-top: 100px;}
	.smailing2 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
	.smailing2 .col-4{margin-top: -70px; margin-right: 300px;}
	.smailing2 .col-4 .f-16{padding-right: 80px;}
.smailing5 .col-5{flex-basis: 40.3333%;}
.smailing5 .col-7{flex-basis: 57%;}
.smailing6 .container-fluid{padding-left: 15%;}
.smailing1 .container img, .smailing .logo img, .smailing3 img, .smailing4 img, .smailing5 img, .smailing6 img, .smailing7 img, .smailing8 img{max-width: 100%;}

/*lippo*/
.lippo1{min-height: 100vh; color: var(--c-blackl); background: #fff; padding-top: 200px;}
	.lippo1 .scaled{transform-origin: left;}
	.lippo1 .col-8{margin-top: 160px; margin-left: -7%;}
	.lippo1 .col-4{z-index: 2;}
	.lippo1 .overlay{width: 140px;}
	.lippo1 .obj._l1-1, .lippo1 .obj._l1-2, .lippo1 .obj._l1-3, .lippo1 .obj._l1-4, .lippo1 .obj._l1-5{z-index: 2; top: 0; left: 0; opacity: 0;}
	.lippo1 .obj._l1-1 img{width: 1066px; margin-top: -1px; margin-left: 20px;}
	.lippo1 .rec._l1-1{display: block; width: 730px; height: 360px; top: 0; left: 0; z-index: 1; border: var(--line-2); border-color: var(--c-black); margin: -3px 0 0 213px;}
.lippo2, .lippo3, .lippo4{margin-top: 100px;}
	.lippo2 .owl-carousel .owl-item{padding: 20px 0;}
	.lippo2 .owl-carousel .owl-item img{width: 600px;}
	.lippo3 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
	.lippo4{margin-bottom: 100px;}
.lippo2 img, .lippo3 img, .lippo4 img{max-width: 100%;}

/*kalbe*/
.kalbe1{min-height: 100vh; color: var(--c-blackl); background: #fcfcfc; padding-top: 200px;}
	.kalbe1 .col-5 .container{padding-top: 100px;}
	.kalbe1 .f-16{width: 500px;}
	.kalbe1 .overlay{width: 140px;}
	.kalbe1 .obj._k1-1, .kalbe1 .obj._k1-2, .kalbe1 .obj._k1-3, .kalbe1 .obj._k1-4, .kalbe1 .obj._k1-5{z-index: 2; top: 0; left: 0; opacity: 0;}
	.kalbe1 .rec._k1-1{display: block; width: 596px; height: 394px; top: 0; left: 0; z-index: 1; border: var(--line-2); border-color: var(--c-black); margin: 260px 0 0 60px;}
.kalbe2, .kalbe3, .kalbe4, .kalbe5{margin-top: 100px;}
	.kalbe2 .col-6{opacity: 0;}
	.kalbe3 .col-5:nth-child(2){margin-top: 220px; margin-left: -100px;}
	.kalbe3 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
	.kalbe4 .overlay{width: 140px;}
	.kalbe5 .container-fluid{padding-left: 15%;}
	.kalbe5 .owl-carousel .owl-item{padding: 20px 0;}
	.kalbe5 .owl-carousel .owl-item img{width: 600px;}
.kalbe2 img, .kalbe4 img, .kalbe5 img{max-width: 100%;}

/*kara*/
.kara1{min-height: 100vh; color: var(--c-blackl); background: #fff; margin-top: 100px;}
	.kara1 .scaled{transform-origin: bottom;}
	.kara1 .container{padding-top: 100px; z-index: 3;}
	.kara1 .f-16{width: 600px;}
.kara2, .kara4, .kara5, .kara6{margin-top: 100px;}
	.kara2 .scaled{transform-origin: bottom; display: flex; justify-content: flex-end;}
	.kara2 .f-16{width: 600px;}
.kara4{position: relative;}
	.kara4 .client-single{width: 48%;}
.kara5 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
	.kara5 .f-16{padding-right: 50px;}
.kara6{position: relative; margin-bottom: var(--space-4);}
	.kara6 .client-single{width: 48%;}
.kara1 .container img, .kara1 .logo img, .kara3 img, .kara4 img, .kara5 img, .kara6 img{max-width: 100%;}

/*danamon*/
.danamon1{min-height: 100vh; color: var(--c-blackl); background: #fff; margin-top: 100px;}
	.danamon1 .scaled{transform-origin: bottom; padding-top: 100px;}
	.danamon1 .col-6.container{padding-top: 100px;}
	.danamon1 .f-16{width: 600px;}
.danamon3, .danamon4, .danamon5{margin-top: 100px;}
.danamon3{position: relative;}
	.danamon3 .client-single{width: 48%; text-align: center;}
	.danamon3 .scaled{transform-origin: bottom; display: flex; justify-content: flex-end;}
	.danamon3 .f-16{width: 600px;}
.danamon4 video{object-fit: cover; width: 100%; height: 100vh; min-height: 100%;}
	.danamon4 .f-30{padding-right: var(--space-5);}
.danamon5 .row{align-items: center;}
.danamon6{margin-bottom: var(--space-5);}
.danamon1 img, .danamon1 .logo img, .danamon3 img, .danamon4 img, .danamon5 img, .danamon6 img{max-width: 100%;}

/* .more{} */
	.more .col-6{position: relative; flex-basis: 50%; height: 690px; overflow: hidden;}
	.more li *{transition: all .6s;}
	.more strong{font-size: var(--f-40);}
	.more .logo img{max-width: 450px;}
	.more .color{display: block; width: 100%; height: 100%;}
	.more #xplore, #xplore .color{background: var(--c-grey);}
	.more #discover, #discover .color{color: var(--c-white); background: var(--c-navy);}
	.more #xplore::after, .more #discover::after{content: " "; opacity: .6; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: 1;}
	.more .action{position: absolute; z-index: 2; top: 50%; transform: translate(0,-50%); left: 50%; margin-left: -160px; }
	.more .overlay{position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; margin: auto; z-index: 3; transform: none;}
	.more li .overlay{opacity: 0;}
	.more li .overlay img{width: 100%; height: 100%; object-fit: cover;}
	.more li:hover .overlay{opacity: 1;}	
	.more .link{position: absolute; z-index: 4; top: 0; left: 0; right: 0; margin: auto; width: 100%; height: 100%;}
	.more li .box{position: absolute; z-index: 5; top: 50%; left: 0; right: 0; margin: auto; transform: translate(0,-50%); width: 40%; height: 50%; display: flex; justify-content: center; align-items: center; color: var(--c-navy);}
	.more li .box::before, .more li .box::after {box-sizing: inherit; content: ""; position: absolute; width: 100%; height: 100%;}
	.more li .box {transition: color 0.2s;}
	.more li .box::before, .more li .box::after {border: 2px solid transparent; width: 0; height: 0;}
	.more li .box::before {top: 0; left: 0;}
	.more li .box::after {bottom: 0; right: 0;}
	.more li:hover .box {color: var(--c-white);}
	.more li:hover .box::before, .more li:hover .box::after {width: 100%; height: 100%;}
	.more li:hover .box::before {border-top-color: var(--c-white); border-right-color: var(--c-white); transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;}
	.more li:hover .box::after {border-bottom-color: var(--c-white); border-left-color: var(--c-white); transition: border-color 0s ease-out 0.3s, width 0.15s ease-out 0.3s, height 0.15s ease-out 0.45s;}

/*print*/
.print{color: var(--c-blackl); background: #fcfcfc; padding-top: 220px;}
/* List */
.print ul {counter-reset: index;}
.print .col-8 ul {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start;}
/* List element */
.print li {counter-increment: index; display: flex; align-items: center; padding: var(--space-1) 0; box-sizing: border-box; font-size: var(--f-30);}
.print .col-8 li {font-size: var(--f-16); padding: 0; width: 30%; margin-right: 5%;}
.print .col-8 li:nth-child(3n) {margin-right: 0;}
/* Element counter */
.print li::before {
	content: counters(index, ".", decimal-leading-zero) ".";
	font-size: var(--f-40);
	text-align: left;
	font-weight: bold;
	min-width: 60px;
	padding-right: var(--space-2);
	align-self: flex-start;
	background-image: linear-gradient(to bottom, #282828, #3e8192);
	background-attachment: fixed;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}  
.print .col-8 li::before{font-size: var(--f-20); min-width: 20px;}
.print li:hover{font-weight: bold;}

/*mail*/
.mailStyle{font-size: var(--f-30);}
.mailStyle a{transition: all .3s;}
.mailStyle a:hover{color: var(--c-navy);}
.grecaptcha-badge{display: none;}
button.g-recaptcha{font-family: var(--f-prob); font-size: var(--f-16); border: var(--line-1); border-color: var(--c-blackl); color: var(--c-black); background: var(--c-white); padding: var(--space-1) var(--space-2); transition: all .3s; letter-spacing: var(--letter-1); cursor: pointer;}
button.g-recaptcha:hover{color: var(--c-white); background: var(--c-blackl);}

/*DOM*/
/* .fancybox-bg{background: transparent;}
.fancybox-is-open .fancybox-bg{background: transparent;} */
.animated-modal *{transition: all .4s;}
.animated-modal li{margin-left: 40px;}
.animated-modal li:nth-last-child(1){margin-left: 5px;}
.animated-modal {display: none; max-width: 1300px; overflow: hidden; transform: scale(0.2); transition: all .7s; border: var(--line-3); border-color: var(--c-blackl);}
.animated-modal.show {position: relative; display: block; transform: none; border: none;}
.fancybox-content{padding: 40px;}
.animated-modal .works-icon {opacity: 1; width: 100%;}
.animated-modal .owl-carousel .owl-item img{width: auto; max-width: 88%;}
.animated-modal img{max-width: 100%; margin-bottom: var(--space-2); -webkit-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.2); box-shadow: 0px 10px 15px 0px rgba(0,0,0,0.2);}
.animated-modal .col-6 {transform: translateX(-50px); opacity: 0; transition-property: transform, opacity;}
.animated-modal .col-5 {transform: translateX(50px); opacity: 0; transition-property: transform, opacity;}
.fancybox-slide--current .animated-modal{transform: scale(1); opacity: 1;}
.fancybox-slide--current .animated-modal .col-6, .fancybox-slide--current .animated-modal .col-5 {transform: translateX(0); opacity: 1; transition-delay: .5s}
img.fancybox-image{border: var(--line-3);}
.fancybox-button{width: 70px; height: 70px;}
.fancybox-slide--html .fancybox-close-small{width: 50px; height: 50px; border: var(--line-1); top: 35px; right: 40px;}
.animated-modal.show .col-6, .animated-modal.show .col-5{opacity: 1; transform: none; padding-right: 0; padding-top: 20px;}

/* .animated-modal.show .owl-carousel .owl-nav{position: absolute; top: 50%; width: 100%;} */
.animated-modal.show .owlPrev, .animated-modal.show .owlNext, .animated-modal.show .disabled .owlPrev, .animated-modal.show .disabled .owlNext{position: fixed; z-index: 10; top: 315px; display: block; width: 50px; height: 50px; cursor: pointer; transition: all .4s; border: var(--line-1);}
.animated-modal.show .owlPrev, .animated-modal.show .disabled .owlPrev{left: 14.5%; background: url(../img/arrow-left.png) no-repeat center; background-size: auto 19px;}
.animated-modal.show .owlNext, .animated-modal.show .disabled .owlNext{right: 17.5%; background: url(../img/arrow-right.png) no-repeat center; background-size: auto 19px;}

/*masonry*/
.grid:after {content: ''; display: block; clear: both;}
.grid {max-width: 100%;}
/*grid item*/
.grid-item{width: 24%;}
.grid-col-sizer {width: 25%;}  
.grid-item {position: relative; margin-bottom: var(--space-2); float: left; cursor: pointer;}  
.grid-item *{transition: all .6s;}
.grid-item ._overlay{position: absolute; z-index: 2; background: var(--c-white); width: 100%; height: 100%; top: 0; left: 0; right: 0; margin: auto; font-size: var(--f-16); text-transform: uppercase; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0;}  
.grid-item:hover ._overlay{opacity: 1;}
.grid-item ._overlay ._title{font-family: var(--f-prob);}
.grid-item ._overlay ._subtitle{font-family: var(--f-pro);}
 
/*grid overlay*/
.grid-item img {display: block; max-width: 100%;}
.grid-item .box{position: absolute; z-index: 5; top: 50%; left: 0; right: 0; margin: auto; transform: translate(0,-50%); width: 100%; height: 100%;}
.grid-item .box::before, .grid-item .box::after {box-sizing: inherit; content: ""; position: absolute; width: 100%; height: 100%;}
.grid-item .box {transition: color 0.2s;}
.grid-item .box::before, .grid-item .box::after {border: 4px solid transparent; width: 0; height: 0;}
.grid-item .box::before {top: 0; left: 0;}
.grid-item .box::after {bottom: 0; right: 0;}
.grid-item:hover .box {color: var(--c-blackl);}
.grid-item:hover .box::before, .grid-item:hover .box::after {width: 100%; height: 100%;}
.grid-item:hover .box::before {border-top-color: var(--c-blackl); border-right-color: var(--c-blackl); transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;}
.grid-item:hover .box::after {border-bottom-color: var(--c-blackl); border-left-color: var(--c-blackl); transition: border-color 0s ease-out 0.3s, width 0.15s ease-out 0.3s, height 0.15s ease-out 0.45s;}

/*grid filter*/
.grid-filter{display: flex; justify-content: center; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4);}
.grid-filter li{padding: var(--space-1) var(--space-3); background: transparent; border: var(--line-1); cursor: pointer; transition: all .4s;}
.grid-filter li:hover{padding-top: var(--space-0); padding-bottom: calc(var(--space-1) + var(--space-0));}
.grid-filter li:hover, .grid-filter li.active{background: var(--c-red);  border-color: var(--c-red); color: #fff;}

/*card*/
header.cards, footer.cards, .contact.cards{visibility: hidden; pointer-events: none;}
footer.cards{height: 0; padding: 0;}

/*share*/
#st-1 .st-btn{height: 50px !important; line-height: 50px !important;}
#st-1 .st-btn[data-network='sharethis']{background-color: transparent !important;}
#st-1 .st-btn > img{top: 0 !important;}
.share-this ._text{pointer-events: none; margin-top: -27px;}