@charset "UTF-8";
/* CSS Mobile Vertical Styles */

/* Home Format */

/* Left Bar */

#home-logo {
	width: 140px;
	-webkit-clip-path: polygon(0 0, 0 100%, 80px 100%, 100% 0);
}

#home-logo img {
	width: 90%;
}

#home-logo-frame {
	width: 145px;
	-webkit-clip-path: polygon(0 0, 0 100%, 85px 100%, 100% 0);
}

/* Center Links */

#home-link {
	-webkit-clip-path: polygon(145px 0, 85px 100%, 100% 100%, 100% 0);
}

.portfolio {
	height: 33%;
}

.portfolio-title {
	top: 15%;
	font-size: 2em;
	-webkit-text-stroke-width: 1px;
}

#about-title {
	left: 160px;
}

#illustration-title {
	left: 135px;
}

#design-title {
	left: 110px;
}

.gradient-cover {
	background: -webkit-linear-gradient(left, rgba(0,143,208,1) 15%, rgba(0,143,208,0) 45%);
}

#about-image {
	right: 5px;
}

#illustration-image {
	right: 20px;
}

#design-image {
	right: 30px;
}

/* Right Side */

#home-side-frame {
	width: 45px;
	-webkit-clip-path: polygon(40px 0, 0 100%, 100% 100%, 100% 0);
}

#home-side {
	width: 40px;
	-webkit-clip-path: polygon(40px 0, 0 100%, 100% 100%, 100% 0);
}

/* About */

#about {
	margin-left: 10px;
	width: 95%;
}

#about-image-frame {
	width: 100%;
	margin-bottom: 10px;
}

#about-picture {
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	max-width: 100%;
	max-height: 100%;
}

#about-text {
	clear: both;
}

/* Resume */

.resume-side-bar {
	outline: 1px solid rgb(0,143,208);
}

#download {
	width: 40px;
	font-size: .2em;
}

#resume {
	top: 40px;
}

#resume p, #resume ul {
	font-size: .2em;
}

#resume-misc {
	width: 55px;
	padding: 0px;
}

#resume-main {
	left: 65px;
	padding: 0px;
}

#resume-main p {
	margin-left: 10px;
}

#resume-main b {
	margin-left: -10px;
}

ul {
	margin-left: 20px;
}

/* Main Styles */

/* Header */

#header {
	height: 50px;
}

#home {
	width: 75px;
	height: 50px;
	-webkit-clip-path: polygon(0 0, 0 100%, 60px 100%, 100% 0);
}

#home-large {
	display: none;
}

#home-small {
	padding: 7px 2px;
}

#main-nav {
	height: 20px;
	width: 355px;
	-webkit-clip-path: polygon(0 0, 0 100%, 350px 100%, 100% 0);
	top: 4px;
}

#main-links {
	font-size: .7em;
	margin-left: 75px;
	padding-top: 6px;
}

#main-links a {
	padding: 0px 2px;
}

#sec-nav {
	display: none;
}

.long {
	display: none;
}

/* Side Bar */

#side-bar {
	width: 59px;
}

/* Text */

#description {
	position: absolute;
	height: 35%;
	width: 90%;
	left: 50%;
	bottom: 10px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	background: rgba(255,255,255,.75);
	z-index: 5;
	overflow: scroll;
}

#exit-button {
	width: 50px;
	height: 50px;
	right: 2%;
	bottom: 33%;
}

/* Icons */

#icons-frame, #extra-icons {
	width: 60px;
	height: 100%;
	top: 0;
	overflow: scroll;
}

.title {
	display: none;
}

#icon-title, #icon-return, .title-turn {
	display: none;
}

#description-button {
	font-size: .5em;
	top: 10px;
	padding: 4px 4px;
	left: 67px;
	z-index: 43;
}

/* Slide Navigation */

#content {
	font-size: .5em;
}

#slide-nav {
	width: 250px;
	height: 20px;
	top: 40px;
}

.previous, .next, .double-left, .double-right {
	width: 70px;
	padding-top: 4px;
	padding-bottom: 3px;
}

.previous {
	-webkit-clip-path: polygon(0% 50%, 10px 100%, 100% 100%, 60px 50%, 100% 0%, 10px 0%);
}

.next {
	-webkit-clip-path: polygon(0% 0%, 10px 50%, 0% 100%, 60px 100%, 100% 50%, 60px 0%);
	left: 180px;
}

.extra-link, .extra-button, #extra-return {
	width: 110px;
	-webkit-clip-path: polygon(10px 0%, 0% 50%, 10px 100%, 100px 100%, 100% 50%, 100px 0%)
}

.extra-button {
	padding-top: 4px;
	padding-bottom: 3px;
}

#extra-frame {
	left: 70px;
	width: 110px;
	float: left;
}

.double-left {
	width: 60px;
	-webkit-clip-path: polygon(0 50%, 10px 100%, 50px 100%, 55px 0%, 10px 0);
}

.double-right {
	width: 60px;
	-webkit-clip-path: polygon(10px 0, 5px 100%, 150px 100%, 100% 50%, 150px 0);
}

.slide-image {
	top: 60px;
}

.long {
	display: none;
}

/* Full */

.full-previous, .full-next {
	width: 100px;
}