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

/* Home Format */

/* Left Bar */

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

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

/* Center Links */

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

.portfolio {
	height: 31%;
}

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

#about-title {
	left: 500px;
}

#illustration-title {
	left: 400px;
}

#design-title {
	left: 300px;
}

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

#about-image {
	right: 20px;
}

#illustration-image {
	right: 80px;
}

#design-image {
	right: 168px;
}

.back-gradient {
	background: -webkit-linear-gradient(right, rgb(0,143,208) 50%, rgb(0,56,93) 75%);
	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: 230px;
	-webkit-clip-path: polygon(230px 0, 0 100%, 100% 100%, 100% 0);
}

/* About */

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

#about-picture {
	right: 0;
	max-width: 100%;
	max-height: 100%;
}

/* Resume */

#download {
	width: 180px;
}

#resume {
	top: 60px;
}

#resume-misc {
	width: 260px;
	padding: 10px;
}

#resume-main {
	left: 300px;
	padding: 10px;
}

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

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

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

ul {
	margin-left: 60px;
}

/* Main Styles */

/* Header */

#header {
	height: 150px;
}

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

#home-small {
	display: none;
}

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

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

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

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

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

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

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

/* Side Bar */

#side-bar {
	width: 280px;
	outline: 5px solid rgb(0,143,208);
}

/* Text */

#description {
	width: 280px;
}

#exit-button {
	display: none;
}

.text {
	width: 240px;
}

/* Icons */

#icons-frame, #extra-icons {
	width: 280px;
	height: 110px;
	bottom: 0;
}

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

#description-button {
	display: none;
}

/* Slide Navigation */

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

.previous, .next, .double-left, .double-right {
	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%)
}

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

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

.slide-image {
	top: 70px;
}

.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);
}

.short {
	display: none;
}

/* Full */

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