*{
	margin: 0px;
}
.viewport{
	width: 100%;
}
.background{
	display:block;
	position:relative;
	min-height: 400px;
	height: 100vh;
}
#intro.background{
	background-color: white important!;
}
#skills.background{
	/*background-color: #2645FF;*/
	background: linear-gradient( 135deg, #2645FF, red );
}
.content{
	max-width: 1440px;
	height:100%;
}
.space{
	display: inline-block;
	position: relative;
	width: 200px;
	height: 100%;
	float: left;
}
.left-side{
	position: relative;
	width: calc(50% - 100px);
	height: 100%;
	float: left;
}
.left-side H1{
	position: relative;
	top: 150px;
	left: 200px;
	font-family: 'Open Sans', sans-serif;
	font-size: 36px;
	font-weight: 700;
	color: #2645FF;
}
.left-side H2{
	position: relative;
	top: 175px;
	left: 200px;
	font-family: 'Open Sans', sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: #2645FF;
}
.left-side p{
	position: relative;
	top: 250px;
	left: 200px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 20px;
}
.left-side #ticker{
	display: inline-block;
	vertical-align: top;
	overflow: hidden;
	position: relative;
	height: 45px;
	width: 500px;
}
.left-side #ticker .item{
	position: absolute;
}
.right-side{
	position: relative;
	width: calc(50% - 100px);
	height: 100%;
	float: right;
}
.right-side img{
	position: relative;
	top: 100px;
	right: 100px;
	float: right;
}
#skills{
	min-height: 900px;
}
.container{
	display: inline-block;
	position: relative;
	width: calc(100% - 200px);
	box-sizing: border-box;
	padding: 50px;
	height: 100%;
	float: right;
}
#skill-levels{
	display: block;
	position: relative;
	height: 100px;
}
.stars{
	display: inline-block;
	box-sizing: border-box;
	width: 33.33333333%;
	height: 100%;
}
.star-container{
	position: relative;
	top: calc(100% - 40px);
	height: 40px;
	padding: 5px;
	border: 4px solid transparent;
	border-image-slice: 1;
}
#skill1 .star-container{
	width: 40px;
	left: calc(50% - 20px);
}
#skill2 .star-container{
	width: 80px;
	left: calc(50% - 40px);
}
#skill3 .star-container{
	width: 120px;
	left: calc(50% - 60px);
}
#skills-container{
	display: block;
	width: 100%;
	height: calc(100% - 100px);
}
.dotted-line{
	display: inline-block;
	box-sizing: border-box;
	width: 33.33333333%;
	height: 100%;
	border-right: 2px dashed white;
}
#skills-items{
	display: block;
	position: absolute;
	top: 150px;
	height: calc(100% - 200px);
	width: calc(100% - 100px);
}
.skill-item{
	display: block;
	position: relative;
	overflow: hidden;
	flex-grow: 1;
	width: 100%;
	height: 12.5%;
	z-index: 6;
}
.skill-item:hover .fb-mask{
	left: 100%;
}
.skill-item:hover .fb-mask H1{
	left: calc(-100% + 20px);
}
.skill-item:hover .fb-content{
	left: 0px;
}
.skill-item:hover .fb-content H1{
	left: 20px; 
}
.fb-mask{
	position: absolute;
	height: 40px;
	width: 100%;
	overflow: hidden;
	background-clip:content-box;
	transition: left 0.5s;
	top: calc((100% - 40px)/2);
	left: 0px;
	z-index: 5;
}
.fb-mask H1{
	position: relative;
	font-family: 'Open Sans', sans-serif;
	text-align: left;
	font-size: 24px;
	font-weight: 700;
	color: white;
	left: 20px;
	transition: left 0.5s;
}
.fb-content{
	position: absolute;
	width: 100%;
	height: 40px;
	top: calc((100% - 40px)/2);
	left: -100%;
	transition: left 0.5s;
	background-color: white;
	z-index: 4;
}
.fb-content H1{
	position: relative;
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: #2645FF;
	left: calc(100% + 20px);
	transition: left 0.5s;
	text-align: left;
}
.nav-wrapper{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	width: 0px;
}
.nav{
	position: relative;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	min-height: 400px;
	height: 100vh;
	width: 200px;
	z-index: 100;
	overflow: hidden;
}
.white{
	color: #2645FF;
}
.blue{
	color: white;
}
.nav .nav-content{
	position: relative;
	height: 100%;
	width: 100%;
	left: 0px;
	top: 0px;
}
.nav .nav-content H1{
	position: absolute;
	text-align: right;
	right: 0px;
	top: 75px;
	font-family: 'Open Sans', sans-serif;
	font-size: 32px;
	font-weight: 700;

}
.nav .nav-content .bottom{
	position: absolute;
	width: 100%;
	height: 60%;
	bottom: 0px;
}
.nav .nav-content .bottom ul{
	list-style-type: none;
	font-size: 18px;
	text-align: right;
}
.nav .nav-content .bottom ul li{
	font-family: 'Roboto', sans-serif;
	margin-bottom: 5px;
	cursor: pointer;
}
.nav .nav-content .bottom li a:hover{
	text-decoration: underline !important;
}
.nav .nav-content .bottom .pages{
	position: absolute;
	width: 100%;
	top: 0px;
}
.nav .nav-content .bottom .links{
	position: absolute;
	width: 100%;
	bottom: 50px;
	text-decoration: none;
	color: inherit;
}

@media screen and (max-width: 1440px) {

	.space{
		display: block;
		width: 100%;
		height: 75px;
		float: left;
	}
	.left-side{
		width: 50%;
		height: calc(100% - 75px);
	}
	.left-side H1{
		left: 100px;
	}
	.left-side H2{
		left: 100px;
	}
	.left-side p{
		left: 100px;
	}
	.right-side{
		width: 50%;
		height: calc(100% - 75px);
	}
	.container{
		width: 100%;
		height: calc(100% - 75px);
	}
	.nav{
		position: relative;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		width: 100vw;
		height: 100vh;
		min-height: 0px;
		overflow: hidden;
	}
	.nav .nav-content{
		position: relative;
		height: 75px;
		width: 100vw;
		left: 0px;
		top: 0px;
	}
	.white .nav-content{
		background-color: white;
	}
	/*.blue .nav-content{
		background-color: #2645FF;
	}*/
	.nav .nav-content H1{
		display: block;
		position: relative;
		font-size: 28px;
		top: 15px;
		left: 100px;
		float: left;
	}
	.nav .nav-content br{
		display: none;
	}
	.nav .nav-content .bottom{
		display: block;
		position: relative;
		height: 100%;
		width: 100%;
		left: 0px;
		right: 0px;
	}
	.nav .nav-content .bottom ul{
		display: inline;
		list-style-type: none;
		font-size: 18px;
		text-align: none;
	}
	.nav .nav-content .bottom ul li{
		display: inline;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 0px;
	}
	.nav .nav-content .bottom .pages{
		display: inline-block;
		width: auto;
		position: relative;
		left: 100px;
		float: left;
		top: 25px;
	}
	.nav .nav-content .bottom .links{
		display: none;
	}
}