@charset "utf-8";
/* CSS Document */

/*
iKenzz Official Website
Edition : Pre-Load StyleSheet 2018
File Type : CSS
Version : 1.0.0
Developed by Kantapong Chuechan
Contact Developer :
[Website] www.ikenzz.xyz
[Email] kenichi@ktpstudioth.com
©2018 by iKenzz and KTP Studio.
*/


/* RESET */
html,body {
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}
html {
	background-color:#fafafa;
}

/* DESIGN */
body {
	background:url(background.jpg) left center no-repeat no-repeat;
	background-size:cover;
	position:fixed;
	cursor:default;
}

.card {
	position:relative;
	background-color:#ffffff;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}

.container {
	position:absolute;
}
.image {
	width:calc(40% - 10%);
	height:calc(40% - 10%);
	padding:5%;
	margin:0;
}
.content {
	width:90%;
	height:50%;
	padding:0;
	margin:5%;
	overflow-x:hidden;
	overflow-y:auto;
}
.text {
	width:calc(100% - 2em);
	padding:0;
	padding-left:1em;
	padding-right:1em;
	font-size:1.2em;
	text-align:center;
	color:#616161;
}
.footer {
	width:calc(100% - 4em);
	padding:0;
	padding-left:2em;
	padding-right:2em;
	font-size:1em;
	line-height:1.5em;
	text-align:left;
	color:#757575;
}
.footer a {
	color:#757575;
	text-decoration:none;
	transition:0.3s;
}
.footer a:hover {
	color:#03a9f4;
	transition:0.3s;
}
.footer a.instagram:hover {
	color:#651FFF;
	transition:0.3s;
}
.copyright {
	width:calc(100% - 4em);
	padding:0;
	margin:0;
	padding-left:2em;
	padding-right:2em;
	font-size:0.9em;
	text-align:center;
	color:#9e9e9e;
}
.copyright a {
	color:#9e9e9e;
	text-decoration:none;
	transition:0.3s;
}
.copyright a:hover {
	color:#00BFA5;
	text-decoration:underline;
	transition:0.3s;
}

/* ORIENTATION */
@media screen and (orientation: landscape) {
	.card {
		width:75vh;
		height:75vh;
	}
}
@media screen and (orientation: portrait) {
	.card {
		width:75vw;
		height:75vw;
	}
}

/* RESPONSIVE */
@media only screen and (max-width: 640px) {
	.container {
		font-size:9px;
		padding:10px;
		width:calc(100% - 20px);
		height:calc(100% - 20px);
	}
	.header, .description {
		margin-top:0.5em;
	}
	.footer, .copyright {
		margin-top:1em;
	}
}
@media only screen and (min-width: 641px) and (max-width: 960px) {
	.container {
		font-size:12px;
		padding:15px;
		width:calc(100% - 30px);
		height:calc(100% - 30px);
	}
	.header, .description {
		margin-top:0.75em;
	}
	.footer, .copyright {
		margin-top:1.5em;
	}
}
@media only screen and (min-width: 961px) {
	.container {
		font-size:16px;
		padding:25px;
		width:calc(100% - 50px);
		height:calc(100% - 50px);
	}
	.header, .description {
		margin-top:1em;
	}
	.footer, .copyright {
		margin-top:2em;
	}
}

/* FONTS */
.f-light {
	font-weight:300;
}
.f-regular {
	font-weight:400;
}
.f-medium {
	font-weight:500;
}
.f-semi-bold {
	font-weight:600;
}
.f-bold {
	font-weight:700;
}
.f-normal {
	font-style:normal;
}
.f-italic {
	font-style:italic;
}
.f-roboto {
	font-family: 'Roboto', sans-serif;
}
.f-dosis {
	font-family: 'Dosis', sans-serif;
}
.f-josefin-sans {
	font-family: 'Josefin Sans', sans-serif;
}
.f-abel {
	font-family: 'Abel', sans-serif;
}
.f-questrial {
	font-family: 'Questrial', sans-serif;
}
.f-comfortaa {
	font-family: 'Comfortaa', cursive;
}
.f-didact-gothic {
	font-family: 'Didact Gothic', sans-serif;
}
.f-raleway {
	font-family: 'Raleway', sans-serif;
}
.f-quicksand {
	font-family: 'Quicksand', sans-serif;
}