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

/* Home Format */

/* Left Bar */

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

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

/* Center Links */

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

.portfolio {
	height: 32%;
}

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

#about-title {
	left: 400px;
}

#illustration-title {
	left: 320px;
}

#design-title {
	left: 240px;
}

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

#about-image {
	right: 20px;
}

#illustration-image {
	right: 80px;
}

#design-image {
	right: 168px;
}

.back-gradient {
	background: -webkit-linear-gradient(right, rgb(0,143,208) 80%, rgb(0,56,93) 100%);
	width: 100%;
	height: 100%;
}

/* Right Side */

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

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

/* About */

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

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

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

#about-text {
	clear: both;
}

/* Resume */

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

#download {
	width: 140px;
}

#resume {
	top: 60px;
}

#resume-misc {
	width: 165px;
	padding: 3px;
}

#resume-main {
	left: 180px;
	padding: 3px;
}

.group-1, .group-2, .group-3, .group-4 {
	font-size: 1.5em;
}

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

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

ul {
	margin-left: 60px;
}

/* Main Styles */

#page {
	overflow: scroll;
}

/* Header */

#header {
	height: 150px;
}

#home {
	width: 215px;
	height: 135px;
	-webkit-clip-path: polygon(0 0, 0 100%, 175px 100%, 100% 0);
	top: 15px;
}

#home-large {
	display: none;
}

#home-small {
	padding: 13px 12px;
}

#main-nav {
	width: 790px;
	top: 30px;
	-webkit-clip-path: polygon(0 0, 0 100%, 760px 100%, 100% 0);
	height: 50px;
}

#main-links {
	margin-left: 230px;
	padding-top: 12px;
	font-size: 1.4em;
}

#main-links a {
	padding: 10px 10px;
}

#sec-nav {
	width: 740px;
	height: 30px;
	-webkit-clip-path: polygon(0 0, 0 100%, 705px 100%, 100% 0);
	top: 90px;
}

#sketch-links {
	margin-left: 200px;
	padding-top: 1px;
	font-size: 1em;
}

.sketch-link {
	padding: 0px 10px;
	float: left;
}

/* Side Bar */

#side-bar {
	width: 172px;
}

/* Text */

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

#exit-button {
	width: 25px;
	height: 25px;
	background-size: 25px 25px;
	right: 4%;
	bottom: 34%;
}

/* Icons */

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

#description-button {
	width: 130px;
	height: 40px;
	bottom: 60px;
	padding: 15px 8px;
	left: 13px;
}


.title, .title-turn {
	position: absolute;
	width: 97%;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 5px 5px 10px 10px;
	top: 180px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
}

/* Slide Navigation */

#slide-nav {
	width: 600px;
	height: 60px;
}

.previous, .next, .double-right, .double-left {
	width: 150px;
	padding-top: 13px;
	padding-bottom: 14px;
}

.previous {
	-webkit-clip-path: polygon(0% 50%, 30px 100%, 100% 100%, 120px 50%, 100% 0%, 20% 0%);
}

.next {
	-webkit-clip-path: polygon(0% 0%, 30px 50%, 0% 100%, 120px 100%, 100% 50%, 80% 0%);
	left: 450px;
}

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

.double-left {
	width: 180px;
	-webkit-clip-path: polygon(0 50%, 30px 100%, 125px 100%, 165px 0%, 30px 0);
}

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

#extra-frame {
	width: 300px;
	float: left;
	height: 50px;
	left: 150px;
}

.extra-button {
	padding-top: 13px;
	padding-bottom: 14px;
}

.slide-image {
	top: 70px;
}

.short {
	display: none;
}

/* Full */

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