@font-face{
	font-family:font1;
	src:url(../font/EncodeSansCondensed-Regular.ttf);
}

#head{
	position:absolute;
	top:30px;
	left:50px;
}
#logo{
	float:left;
	margin:30px 30px 0 0;
	width:40px;
	height:40px;
	padding:12px;
	background:linear-gradient(#fedd77, #fec001);
	border-radius:10px;
	box-shadow:2px 0 2px #474747;
	transform:rotate(45deg);
}
.logo{
	width:100%;
	height:auto;
	transform:rotate(-45deg);
}
#logoText{
	float:left;
	margin-top:18px;
	font-family:font1;
	text-shadow:1px 1px 2px #212121;
	color:#fff;
}
#logoText h1{
	font-size:36px;
}
#logoText h3{
	font-size:28px;
}


#content{
	position:relative;
	top:180px;
	margin:auto;
	width:calc(100% - 40px);
}
#contentBox{
	margin:auto;
}
#box{
	float:left;
	width:33.33333%;
}
#box a{
	text-decoration:none;
	color:#474747;
}
#boxFill{
	margin:20px;
	height:250px;
	background:rgba(255,255,255,.7);
	border-radius:10px;
    transition:all .2s Ease;
}
#boxFill:hover{
	transform: scale(1.1);
}
#logoApp{
	margin:auto;
	width:120px;
	height:155px;
	padding-top:35px;
}
.choice{
	width:100%;
	height:auto;
}
#namaApp{
	padding-bottom:4px;
	font-family:font1;
	font-size:18px;
	font-weight:bold;
	line-height:56px;
	text-align:center;
	color:#212121;
	background:linear-gradient(rgba(254,221,119,.8), rgba(254,192,1,.8));
	border-radius:0 0 10px 10px;
}



@media only screen and (max-width:700px){
	#head{
		position:relative;
		top:30px;
		left:0;
		margin:auto;
		width:100%;
	}
	#logo{
		float: none;
		margin: auto;
	}
	.logo{
		width:100%;
		height:auto;
		transform:rotate(-45deg);
	}
	#logoText{
		float:none;
		margin:20px 0 0 0;
		text-align:center;
	}
	#logoText h1{
		font-size:20px;
	}
	#logoText h3{
		font-size:16px;
	}
	#content{
		top:50px;
	}
	#box{
		width:100%;
	}
	#boxFill{
		height:180px;
	}
	#logoApp{
		margin:auto;
		width:80px;
		height:101px;
		padding-top:30px;
	}
	#namaApp{
		line-height:45px;
	}

}