@charset "UTF-8";
/* CSS Main Styles */

* {
	margin: 0;
	padding: 0;
	font-family: 'Quattrocento Sans', sans-serif;
}

a {
	color: black;
}

a:hover {
	font-weight: bold;
}

body {
	background: rgb(255,241,222);
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

/* Home Format */

#home-page {
	position: relative;
	height: 100%;
	width: 100%;
}

/* Left Bar */

#home-logo-frame {
	height: 100%;
	position: absolute;
	z-index: 10;
	background: rgb(255,241,222);
}

#home-logo {
	background: rgb(0,56,93);
	position: absolute;
	height: 100%;
}

#home-logo img {
	padding-top: 20px;
}

#contact {
	color: white;
	margin-top: 40px;
	margin-left: 40px;
}

#contact p {
	margin-bottom: 5px;
}

#contact a {
	color: white;
	text-decoration: none;
}

.social {
	background: url('image/home/social_media.png');
	width: 50px;
	height: 50px;
	float: left;
	margin-right: 5px;
}

.contact-icon {
	background: url('image/home/contact.png');
	width: 15px;
	height: 15px;
	margin-right: 5px;
	float: left;
}

/* Center Links */

#home-link {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}

#home-link a {
	height: 10px;
	width: 50px;
	clear: both;
	margin-bottom: 10px;
	overflow: hidden;

}

.portfolio {
	background: rgb(0,143,208);
	width: 100%;
	position: absolute;
	overflow: hidden;
}

#illustration-portfolio {
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
}

#design-portfolio {
	bottom: 0;
}

.portfolio-image {
	height: 100%;
	position: absolute;
	text-align: right;
}

.portfolio-title {
	position: absolute;
	font-weight: bold;
	color: white;
	z-index: 10;
	-webkit-text-stroke-color: rgb(0,56,93);
}

#home-about, #home-illustration, #home-design {
	height: 100%;
	width: 100%;
	position: relative;
}

.gradient-cover {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 4;
}

.home-link-cover {
	mix-blend-mode: multiply;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 6;
}

.portfolio:hover > .home-link-cover {
	background-color: rgba(0,56,222,.6);
}

/* Right Side */

#home-side-frame {
	background: rgb(255,241,222);
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 8;
}

#home-side {
	background: rgb(0,56,93);
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
}

/* About */

#about {
	height: 100%;
	overflow: hidden;
	position: relative;
	margin-top: 20px;
}

#about-image-frame {
	position: relative;
	float: left;
	margin-right: 30px;
	max-height: 100%;
}

#about-picture {
	position: absolute;
}

#about-text {
	overflow: scroll;
}

#about-social {
	margin-top: 30px;
	height: 50px;
}

/* Resume */

.resume-side-bar {
	position: relative;
}

#download {
	padding-top: 3px;
	padding-bottom: 5px;
	background: rgb(0,143,208);
	position: absolute;
	left: 50%;
	top: 10px;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	color: white;
	text-align: center;
}

#resume {
	width: 100%;
	overflow: scroll;
	position: absolute;
}

#resume-misc {
	text-align: right;
	position: absolute;
	left: 0;
}

#resume-main {
	position: absolute;
}

.group-1, .group-2, .group-3, .group-4 {
	font-weight: bold;
}

.group-1 {
	color: rgb(0,55,93);
}

.group-2 {
	color: rgb(61,171,217);
}

.group-3 {
	color: rgb(0,163,225);
}

.group-4 {
	color: rgb(0,109,182);
}
	
/* Main Styles */

/* Header */

#header, #home-page, .image, #description-button {
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#header {
	width: 100%;
	position: relative;
}

#header a {
	color: white;
	text-decoration: none;
	margin: 5px;
}

#home {
	background: rgb(0,56,93);
	position: absolute;
	z-index: 2;
	overflow: hidden;
}

#home-small, #home-large {
	max-width: 80%;
	max-height: 80%;
}

#main-nav {
	background: rgb(0,143,208);
	position: relative;
}

#sec-nav {
	background: rgb(67,170,216);
	position: absolute;
	transition: all .3s ease;
	left: -800px;
}

/* Body */

#page {
	width: 100%;
	position: relative;
}

/* Side Bar */

#side-bar {
	height: 100%;
	float: left;
}

/* Text */

#exit-button {
	background: url('image/home/description_exit.png');
	position: absolute;
	z-index: 10;
}

.text {
	position: absolute;
	overflow-y: scroll;
	padding: 10px 25px 10px 15px;
}

/* Icons */

#icons-frame, #extra-icons {
	background: rgb(0,56,93);
	position: absolute;
	padding-top: 8px;
	padding-bottom: 3px;
}

#description-button {
	background: rgb(0,143,208);
	text-align: center;
	color: white;
	position: absolute;
	cursor: pointer;
}

#icon-title {
	width: 30px;
	height: 30px;
}

.title, .title-turn {
	text-align: center;
	background: rgba(191,205,213,.85);
	font-weight: bold;
	cursor: pointer;
}

#main-icons, #sec-icons {
	position: absolute;
}

.icon {
	width: 50px;
	height: 50px;
	float: left;
	margin: 0 0 5px 5px;
	cursor: pointer;
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	background: url('image/home/sprite.jpg');
}

.icon:hover, .icon-select {
	outline: 1px solid white;
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
}

#content {
	height: 100%;
	position: absolute;
	right: 0;
}

/* Slideshow Navigation */

#slide-nav {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	text-align: center;
}

.previous, .next {
	position: absolute;
	background: rgb(67,170,216);
	font-weight: bold;
	cursor: pointer;
	color: white;
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


#extra-return, #extra-frame {
	position: absolute;
}

.extra-button, .double-left, .double-right {
	font-weight: bold;
	cursor: pointer;
	color: white;
}

.extra-link {
	float: left;
	position: absolute;
	width: 100%;
	height: 100%;
}

.extra-button, .double-left, .double-right {
	background: rgb(0,56,93);
}

.double-left, .double-right {
	position: absolute
}

.double-right {
	right: 0;
}

.slide-image {
	position: absolute;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	max-height: 80%;
	max-width: 90%;
	cursor: zoom-in;
}

/* Full */

#full {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
	top: 0;
	z-index: 50;
}

.full-previous, .full-next {
	background: rgba(0,0,0,.2);
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 55;
	color: white;
	font-size: 8em;
	cursor: pointer;
}

.full-arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
}

.full-previous {
	left: 0;
}

.full-next {
	right: 0;
}

.full-image {
	max-width: 95%;
	max-height: 95%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	outline: 1px solid white;
}

/* IE Error */

#ie-error {
	width: 100%;
	height: 100%;
	background: rgb(255,241,222);
	position: absolute;
	top: 0;
	z-index: 300;
}

#error-msg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

#error-msg h1 {
	padding: 25% 10%;
	position: relative;
	margin: auto;
	font-size: 20px;
}

#error-msg h1 a {
	color: rgb(0,143,208);
}

#ie-error img {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: 0;
}