/* GENERAL */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #111;	
	font-size: 1vw;
	font-family: 'Roboto Slab', serif;
}

h1 {
	font-size: 200%;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	padding: 1em 0;
}
h2 {
	font-size: 150%;
	margin: 0;
	padding: 0.5em 0;	
}

h3 {
	font-size: 125%;
	margin: 0;
}
p {
	margin: 0;
	padding: 0.5em 0;
}
a {
	color: white;
}

.color {
	color: #e94c6f;
}

/* TABLE WRAPPER */
#wrapper {
	position: relative;
	width: 96em;
	height: 100%;
	padding: 2em;
	font-size: 100%;
}

#wrapper td {
	height: 100%;
	vertical-align: center;
}

/* MENU */
#menu {
	width: 38em;
	height: 50em;
	color: white;
}
#menu .profile, #menu .astronomy, #menu .games, #menu .photography, #menu .writing {
	position: relative;
	width: 38em;
	height: 10em;
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
}
#menu .profile {
	background-image: url('images/profile.jpg');
}
#menu .astronomy {
	background-image: url('images/astronomy.jpg');
}
#menu .games {
	background-image: url('images/games.jpg');
}
#menu .photography {
	background-image: url('images/photography.jpg');
}
#menu .writing {
	background-image: url('images/writing.jpg');
}
#menu div .icon {
	position: absolute;
	left: 2em;
	top: calc(50% - 0.9em);
	width: 1.9em;
	height: 1.4em;
	padding-top: 0.4em;
	font-size: 200%;	
	text-align: center;
	background-color: rgba(255,255,255,0.15);
	border: 0.05em solid rgba(0,0,0,0);
	border-radius: 2em;
	cursor: pointer;
}
#menu div .title {
	position: absolute;
	left: 7em;
	top: calc(50% - 1.5em);
	display: inline-block;
	width: auto;
	font-size: 150%;
	text-transform: uppercase;
}
#menu div .subtitle {
	position: absolute;	
	left: 10.5em;
	top: calc(50% + 0.5em);
	display: inline-block;	
	width: auto;
	font-style: italic;	
}


/* HOME */
#home {
	width: 58em;
	height: 50em;
	color: white;
	background-image: url('images/dj.jpg');
	background-size: cover;
	text-align: center;	
}
#home .hello {
	position: relative;
	font-size: 300%;
	padding-top: 6.5em;
	text-align: center;
	text-transform: uppercase;
}
#home .about {
	position: relative;
	font-size: 150%;
	margin-top: 2em;
}
#home .about .detail {
	font-size: 80%;
}
#home .social {
	position: relative;
	margin-top: 3em;
	font-size: 180%;
}
#home .social i {
	padding: 0 0.5em;
}
#home .social i:hover {
	font-size: 110%;
}
.tooltip {
	position: absolute;
	z-index: 100;
	display: block;
	font-size: 100%;
	line-height: 1.5em;
	text-align: left;
	text-align: start;

}
#home .social .tooltip {
	font-size: 70%;
	color: #e94c6f;	
}
.tooltip.in {
	filter: alpha(opacity=90);
	opacity: .9;
}
.tooltip.bottom {
	padding: 0.1em 0;
	margin-top: 0.5em;
}



/* CONTENT */
.content {
	position: relative;
	display: none;
	width: 54em;
	height: 50em;
	color: black;
	background-color: #fff;
	padding: 0 2em;
}
.content .close {
	display: none;
	position: absolute;
	top: 0.5em;
	left: 0.5em;
	width: 2em;
	height: 1.5em;
	padding-top: 0.5em;
	text-align: center;
	font-size: 110%;
	color: white;
	background-color: rgba(233,76,111,0.8);
/*	background-color: rgba(34,34,34,0.8);*/
	border-radius: 2em;
	cursor: pointer;	
}
.content p {
	font-size: 110%;
}
.content .link {
	display: inline-block;
	width: auto;
	font-size: 110%;
	line-height: 1em;	
	margin: 1em 3em 0 0;
}
.content .link a {
	color: #000;
}
.content .link img {
	height: 1em;
	padding-right: 0.5em;
}
.content a {
	color: #e94c6f;
	text-decoration: none;
}
.content a i {
	padding-right: 0.5em;
}
.content {
	
}