@charset "utf-8";

body {
	font-family: 'Montserrat';
	background: #0c0c0c;
	color: #ffffff;
}

a.social-icon {
	margin-right: 10px;
	margin-top: 10px;
	color: #ffffff;
	text-decoration: none;
}

a {
	color: #9e9e9e;
	text-decoration: none;
}

a:hover {
	color: #1a1a1a;
	text-decoration: none;
}

a.social-icon:hover {
	color: #ffffff;
	text-decoration: none;
}

.about-text {
	margin-top: 40px;
	margin-bottom: 40px;
}

.content-container {
	background: #ffffff;
	color: #0c0c0c;
	font-size: 12px;
	font-family: 'Roboto Slab';
}

.content-title {
	color: #1a1a1a;
	font-family: 'Montserrat';
}

.highlight-section {
	margin-top: 40px;
}

.highlight-section-inner {
	display: inline-block;
	width: 100%;
}

.highlight-section-content {
	color: #1a1a1a;
	font-size: 14px;
	font-family: 'Montserrat';
}

.highlight-section-title {
	color: #1a1a1a;
	font-size: 14px;
	font-family: 'Montserrat';
}

.highlight-section-sub-title {
	color: #777676;
	font-size: 10px;
	font-family: 'Montserrat';
	margin-top: 5px;
}

.highlight-section-text {
	color: #0c0c0c;
	font-size: 12px;
	font-family: 'Roboto Slab';
	margin-top: 5px;
}

.highlight-section-separator {
	border-bottom: 1px solid #bebebe;
	margin-top: 40px;
}

.info-circle-container {
	margin-top: 15px;
}

.info-circle-container span{
	margin-right: 5px;
}

.nav-default {
	color: #bebebe;
	cursor: pointer;
}

.nav-default:hover {
	cursor: pointer;
	color: #ffffff;
}

.nav-selected {
	color: #ffffff;
}

.sidebar-container {
	position: fixed;
}

.sidebar-user-img {
	border-radius: 50%;
}

.sidebar-user-position {
	color: #777676;
}

.skills-container {
	display: inline-block;
}

.skills-ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

.skills-ul li {
	display: inline-block;
	float: left;
	width: 170px;
	margin-top: 15px;
}

@media only screen and ( min-width: 1000px ) { /* desktop: do things when size it 1000px or greater */
	.content-container {
		width: 790px;
		float: right;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.content-container-inner {
		padding: 40px;
	}

	.content-title {
		font-size: 14px;
		margin-bottom: 40px;
	}

	.highlight-section-icon {
		float: left;
	}

	.highlight-section-icon img {
		width: 100px;
		display: block;
		border-radius: 5px;
	}

	.highlight-section-content {	
		float: left;
		width: 550px;
	}

	.highlight-section-content-inner {
		padding-left: 25px;
	}

	.hover-grow {
		display: inline-block;
		vertical-align: middle;
		-webkit-transform: perspective( 1px ) translateZ( 0 );
		transform: perspective( 1px ) translateZ( 0 );
		box-shadow: 0 0 1px transparent;
		-webkit-transition-duration: 0.3s;
		transition-duration: 0.3s;
		-webkit-transition-property: transform;
		transition-property: transform;
	}
	.hover-grow:hover, 
	.hover-grow:focus, 
	.hover-grow:active {
		-webkit-transform: scale( 1.5 );
		transform: scale( 1.5 );
	}

	.hover-360 {
		-webkit-transition: -webkit-transform 1s ease-in-out;
		transition: transform 1s ease-in-out;
	}

	.hover-360:hover {
		-webkit-transform: rotate( 360deg );
		transform: rotate( 360deg );
		cursor:pointer;
	}

	.main-container {
		width: 1000px;
		margin: 0 auto;
	}

	.mobile-menu {
		display: none;
	}

	.nav-default {
		font-size: 10px;
	}

	.sidebar-container {
		width: 190px;
		float: left;
		margin-top: 40px;
	}

	.sidebar-nav-container {
		width: 100%;
		margin-top: 30px;
	}

	.sidebar-social-container {
		display: block;
		width: 100%;
		margin-top: 30px;
		font-size: 16px;
	}

	.sidebar-user-img {
		height: 175px;
		width: 175px;
		margin-left: 7px;
	}

	.sidebar-user-name {
		font-size: 26px;
		margin-top: 15px;
	}
}

@media only screen and ( max-width: 1000px ) { /* mobile: do things when size it 1000px or less */
	.content-container {
		margin-top: 65px;
	}

	.content-container-inner {
		padding: 20px;
	}

	.content-title {
		font-size: 12px;
		margin-bottom: 20px;
	}

	.highlight-section-icon {
		width:100%;
		text-align: center;
	}

	.highlight-section-icon img {
		width: 50px;
		border-radius: 5px;
	}

	.highlight-section-content {
		width: 100%;
		margin-top: 10px;
	}

	.highlight-section-title,
	.highlight-section-sub-title {
		text-align: center;
	}

	.mobile-menu {
		display: block;
		float: right;
		font-size: 35px;
		cursor: pointer;
	}

	.nav-default {
		font-size: 20px;
	}

	.sidebar-container {
		padding: 10px;
		left: 0;
		top: 0;
		right: 0;
		background: #0c0c0c;
	}

	.sidebar-nav-container {
		width: 100%;
		display: none;
		text-align: center;
	}

	.sidebar-social-container {
		display: none;
	}

	.sidebar-user-img {
		height: 50px;
		width: 50px;
		float: left;
	}

	.sidebar-user-info {
		display: inline-block;
		margin-left: 10px;
	}

	.sidebar-user-name {
		width: 140px;
		font-size: 20px;
		float: left;
	}

	.sidebar-user-position {
		width: 140px;
		font-size: 12px;
	}
}