/*
==============
CSS for - Personal Website
Muhammad Adam Firdaus 2016
==============
 */
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, section {
	display: block;
}
html, body {
	font-family:"DINPro-Light";
	margin:0;
	padding:0;
	height:100%;
}

img {
	display:block;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.container {
	height:100%;
	position:relative;
}

header {
	height:60px;
	box-shadow:0 5px 5px #ccc;
	z-index:7;
	position:absolute;
	top:0;
	width:100%;
}

.wrapper {
	padding:0 20px;
	position:relative;
}

.main {
	padding:0 20%;
}

/* MENU */

#oxvlomenu {
	position:absolute;
	right:40px;
}
#oxvlomenu ul,
#oxvlomenu ul li,
#oxvlomenu ul li a,
#oxvlomenu #menu-button {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#oxvlomenu:after,
#oxvlomenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#oxvlomenu #menu-button {
  display: none;
}
#oxvlomenu {
  width: auto;
  line-height: 1;
  float:right;
}
#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background:#019875;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
#oxvlomenu > ul > li {
  float: left;
}
#oxvlomenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#oxvlomenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#oxvlomenu.align-center ul ul {
  text-align: left;
}
#oxvlomenu.align-right > ul > li {
  float: right;
}
#oxvlomenu.align-right ul ul {
  text-align: right;
}
#oxvlomenu > ul > li > a {
  padding: 20px;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  color: #757575;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#oxvlomenu > ul > li:hover > a,
#oxvlomenu > ul > li.active > a {
  color: #019875;;
}
#oxvlomenu > ul > li.has-sub > a {
  padding-right: 25px;
}
#oxvlomenu > ul > li.has-sub > a::after {
  position: absolute;
  top: 21px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
#oxvlomenu > ul > li.has-sub:hover > a::after {
  border-color: #009ae1;
}
#oxvlomenu ul ul {
  position: absolute;
  left: -9999px;
}
#oxvlomenu li:hover > ul {
  left: auto;
}
#oxvlomenu.align-right li:hover > ul {
  right: 0;
}
#oxvlomenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#oxvlomenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#oxvlomenu ul ul li {
  height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}
#oxvlomenu ul li:hover > ul > li {
  height: 32px;
}
#oxvlomenu ul ul li a {
  padding: 10px 20px;
  width: 160px;
  font-size: 12px;
  background: #333333;
  text-decoration: none;
  color: #dddddd;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#oxvlomenu ul ul li:hover > a,
#oxvlomenu ul ul li a:hover {
  color: #ffffff;
}
#oxvlomenu ul ul li.has-sub > a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: "";
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
#oxvlomenu.align-right ul ul li.has-sub > a::after {
  right: auto;
  left: 10px;
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}
#oxvlomenu ul ul li.has-sub:hover > a::after {
  border-color: #ffffff;
}


main {
	display:table;
	width:100%;
	height:100%;
}

section {
	display:table-cell;
	vertical-align:middle;
}

.col {
	float:left;
}


.profile {
	width:600px;
	margin:0 auto;
}

.profile-pic,
.profile-data {
	width:50%;
}

.profile-pic {
	display:table;
	height:364px;
}

.profile-pic a {
	display:table-cell;
	vertical-align:middle;
	width:50%;
	height:100px;
}

.profile-pic svg {
	height:200px;
}

.profile-pic img {
	margin:0 auto;
}


.personal-details {
	font-size:16px;
}

.personal-details,
.personal-details li a {
	color:#757575;
}

.personal-details ul {
	list-style:none;
}

.personal-details li {
	padding:20px 0;
}

.personal-details li:nth-child(1) {
	text-transform:uppercase;
}

.personal-details li span {
	font-size:12px;
}

.uc {
	margin:0 auto;
	width:50%;
}

.uc img {
	width:100%;
}

.portfolio {
	display:none;
}

oxv{cursor:pointer;display:inline-block;padding:5px 10px;background:#019875;color:#fff;font:14px/18px "RobotoDraft", arial;margin-bottom:4px;}
oxv:hover {transition:0.8s ease;background:#1BBC9B;}
.tooltip{width:200px;position:absolute;background:linear-gradient(top, rgba(118,118,118,1) 4%,rgba(110,110,110,1) 8%,rgba(21,21,21,1) 80%);background:-o-linear-gradient(top, rgba(118,118,118,1) 4%,rgba(110,110,110,1) 8%,rgba(21,21,21,1) 80%);background:-moz-linear-gradient(top, rgba(118,118,118,1) 4%, rgba(110,110,110,1) 8%, rgba(21,21,21,1) 80%);background:-webkit-gradient(linear, left top, left bottom, color-stop(4%,rgba(118,118,118,1)), color-stop(8%,rgba(110,110,110,1)), color-stop(80%,rgba(21,21,21,1)));background:-webkit-linear-gradient(top, rgba(118,118,118,1) 4%,rgba(110,110,110,1) 8%,rgba(21,21,21,1) 80%);background:-ms-linear-gradient(top, rgba(118,118,118,1) 4%,rgba(110,110,110,1) 8%,rgba(21,21,21,1) 80%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#767676', endColorstr='#6E6E6E',GradientType=0);color:#fff;font-size:smaller;box-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);-moz-box-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);-webkit-box-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);}
span.tooltip {padding:8px;font:12px/18px "Cuprum", arial;}

footer {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
}

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, rgba(189, 189, 189, 0), rgba(189, 189, 189, 0.65), rgba(189, 189, 189, 0));
}

.footer {
	height:80px;
	text-align:center;
	padding-top:20px;
}

.footer p {
	padding-top:15px;
}

.social-icons li {display:inline;list-style:none;text-indent:-9999px;float:left;-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;margin:0px 6px 6px 0px;padding:0;}
.social-icons li a{background-repeat:no-repeat;background-position:0 0;display:block;height:28px;width:28px;}
.social-icons li:hover{background-position:0 -38px;}
#social a{width:28px;height:28px;margin:0 6px 6px 0;display:block;text-indent:-9999px;background-position:0 -38px;}
#social a{float:left;}
#social a img{border:none;}
.facebook{background:url(http://www.muhammadadamfirdaus.com/images/facebook.png) no-repeat;}
.googleplus{background:url(http://www.muhammadadamfirdaus.com/images/googleplus.png) no-repeat;}
.line{background:url(http://www.muhammadadamfirdaus.com/images/linkedin.png) no-repeat;}
.twitter{background:url(http://www.muhammadadamfirdaus.com/images/twitter.png) no-repeat;}

@media all and (max-width: 960px) {
	#oxvlomenu {
		width: 100%;
		z-index:999;
		position:static;
	}
	#oxvlomenu ul {
		width: 100%;
		display: none;	
	}
	#oxvlomenu.align-center > ul,
	#oxvlomenu.align-right ul ul {
		text-align: left;
	}
	#oxvlomenu ul li,
	#oxvlomenu ul ul li,
	#oxvlomenu ul li:hover > ul > li {
		width: 100%;
		height: auto;
		border-top: 1px solid rgba(120, 120, 120, 0.15);
		background:#eeeeee;
	}
	#oxvlomenu ul li a,
	#oxvlomenu ul ul li a {
		width: 100%;
	}
	#oxvlomenu > ul > li,
	#oxvlomenu.align-center > ul > li,
	#oxvlomenu.align-right > ul > li {
		float: none;
		display: block;
	}
	#oxvlomenu ul ul li a {
		padding: 20px 20px 20px 30px;
		color: #000000;
		background: none;
	}
	#oxvlomenu ul ul li:hover > a,
	#oxvlomenu ul ul li a:hover {
		color: #000000;
	}
	#oxvlomenu ul ul ul li a {
		padding-left: 40px;
	}
	#oxvlomenu ul ul,
	#oxvlomenu ul ul ul {
		position: relative;
		left: 0;
		right: auto;
		width: 100%;
		margin: 0;
	}
	#oxvlomenu > ul > li.has-sub > a::after,
	#oxvlomenu ul ul li.has-sub > a::after {
		display: none;
	}
	#menu-line {
		display: none;
	}
	#oxvlomenu #menu-button {
		display: block;
		padding: 22px 20px;
		color: #000000;
		cursor: pointer;
		text-transform: uppercase;
	}
	#oxvlomenu #menu-button::after {
		content: '';
		position: absolute;
		top: 20px;
		right: 20px;
		display: block;
		width: 15px;
		height: 2px;
		background: #000000;
	}
	#oxvlomenu #menu-button::before {
		content: '';
		position: absolute;
		top: 25px;
		right: 20px;
		display: block;
		width: 15px;
		height: 3px;
		border-top: 2px solid #000000;
		border-bottom: 2px solid #000000;
	}
	#oxvlomenu .submenu-button {
		position: absolute;
		z-index: 10;
		right: 0;
		top: 0;
		display: block;
		border-left: 1px solid rgba(120, 120, 120, 0.15);
		height: 52px;
		width: 52px;
		cursor: pointer;
	}
	#oxvlomenu .submenu-button::after {
		content: '';
		position: absolute;
		top: 21px;
		left: 26px;
		display: block;
		width: 1px;
		height: 11px;
		background: #000000;
		z-index: 99;
	}
	#oxvlomenu .submenu-button::before {
		content: '';
		position: absolute;
		left: 21px;
		top: 26px;
		display: block;
		width: 11px;
		height: 1px;
		background: #000000;
		z-index: 99;
	}
	#oxvlomenu .submenu-button.submenu-opened:after {
		display: none;
	}
	
	.profile {
		width:100%;
	}
	
	.profile-pic a {
		display:block;
		margin:0 auto;
	}
	
	.profile-pic img {
		width:100%;
	}
	
	.personal-details ul {
		display:inline-block;
	}
	
	.personal-details li {
		text-align:center;
	}
}

@media screen and (max-width: 480px) {
	header,
	footer {
		position:static;
	}

	main {
		font-size:120%;
	}
	
	section {
		padding:10% 0;
	}
	
	.profile-pic,
	.profile-data {
		width:100%;
	}
	
	.profile-pic a {
		height:auto;
	}
	
	.personal-details {
		width:90%;
		margin:0 auto;
	}
	
	.personal-details ul {
		margin:0 auto;
	}
}