/*FONT*/
@font-face {
    font-family: 'Conv_Gotham Rounded Book';
	src: url('fonts/Gotham Rounded Book.eot');
	src: local('☺'), url('fonts/Gotham Rounded Book.woff') format('woff'), url('fonts/Gotham Rounded Book.ttf') format('truetype'), url('fonts/Gotham Rounded Book.svg') format('svg');
	font-weight:normal;
	font-style:normal;
	font-display: swap;
}

:root {
	--bg: #fbf9f5;
	--f-gotham: 'Conv_Gotham Rounded Book';
	--c-black: #515151;
	--c-white: #ffffff;
	--f-25: 25px;
	--lh-25 : 35px;
	--letter-1: 1px;
	--line-1 : 1px solid #b7b7b4;
	--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: 'open_sansbold';}

	
/*	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:hover{color: #24354c;}
img{border:none; outline:0; max-width: 100%;}
.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);}

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

/*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;}

body, html{height: 100%;}
body {
	width: 100%;
	margin:0 auto;	
	-webkit-text-size-adjust: 100%;
	overflow:hidden;
	background: var(--bg) url("../img/bg-desktop.jpg") no-repeat top center;
	background-size: auto 100%;
	color: var(--c-black);
	font-size: var(--f-25);
	line-height: var(--lh-25);
	font-family: var(--f-gotham);
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/*preloader*/
#preloader {position: fixed; top:0; left:0; right:0; bottom:0; background: var(--bg); z-index:120;}
.preloader-content{position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; transform: translate(0, -50%); width: 180px;}
.preloader-content img{max-width: 100%;}
.loading-bar{width: 160px; height: 2px; margin: auto; background: #fff; margin-top: 22px; position: relative; overflow: hidden;}
.loading-bar::before{content: ''; width: 68px; height: 2px; background: #26923c; position: absolute; left: -34px; animation: bluebar 1.5s infinite ease;}
@keyframes bluebar{
	50%{left: 96px;}
}

/*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, .footer *{transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s;}

/*icon*/
.logo-kara, .logo-tokopedia, .logo-shopee{display: block; background: url(../img/sprite.png) no-repeat;}
	.logo-kara{background-position: 0 0; width: 157px; height: 64px;}
	.logo-tokopedia{background-position: -194px 0; width: 83px; height: 97px; margin: 0 10px 0 30px;}
	.logo-shopee{background-position: -302px 0; width: 86px; height: 97px; margin: 0 30px 0 10px;}
	.logo-tokopedia:hover, .logo-shopee:hover{transform: scale(1.1) !important;}

/*container*/
.container{position: relative; width: 80%; height: 100%; margin: auto;}

/*column*/
.row{display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;}
	.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._item-start{align-items: flex-start;}
	.row._item-end{align-items: flex-end;}
	.row._item-center{align-items: center;}
	.row._item-stretch{align-items: stretch;}
.header{position: absolute; width: 80%; top: 0; left: 0; right: 0; margin: auto;}
.text1{display: block; position: absolute; bottom: 190px; left: 0; right: 0; text-align: center;}
.footer{position: absolute; bottom: 60px; left: 0; right: 0; margin: auto; justify-content: center; align-items: center; font-weight: bold;}

.banner{display: none;}

@media only screen and (min-width: 10px) and (max-width: 999px) {
	:root {
		--f-25: calc(25px * 0.6);
		--lh-25: calc(35px * 0.6);
	}
	body{background: linear-gradient(180deg, #faf9f7 50%, #e8ded4 50%); overflow-y:auto;}
	.header{width: 100%;}
	.container{position: absolute; width: 100%; height: auto; top: 50%; transform: translate(0,-50%);}
	.banner{display: block;}
	.logo-kara, .logo-tokopedia, .logo-shopee{transform: scale(.6);}
		.logo-tokopedia{margin: 0 calc(10px * 0.1) 0 calc(30px * 0.1);}
		.logo-shopee{margin: 0 calc(30px * 0.1) 0 calc(10px * 0.1);}
	.logo{position: absolute; z-index: 9999; top: 0; left: 0; transform-origin: top left;}
		.logo-kara{transform-origin: top left;}
	.text1, .footer{position: relative; bottom: auto;}
}


@media only screen and (min-width: 1000px) and (max-width: 1600px) {
	:root {
		--f-25: calc(25px * 0.7);
		--lh-25: calc(35px * 0.7);
	}
	
	.logo-kara{transform: scale(.7);}
	.logo-tokopedia, .logo-shopee{transform: scale(.6);}
		.logo-tokopedia{margin: 0 calc(10px * 0.2) 0 calc(30px * 0.2);}
		.logo-shopee{margin: 0 calc(30px * 0.2) 0 calc(10px * 0.2);}
		.logo-tokopedia:hover, .logo-shopee:hover{transform: scale(1) !important;}
	.logo-kara{transform-origin: top left;}
	
	.text1{bottom: calc(190px  * 0.8);}
	.footer{bottom: calc(60px  * 0.8); font-size: 15px; line-height: 25px;}
}