html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font-size: 20px;
}
.hidden-md {
	display: none;
}
h1, h2, h3, h4, h5, h6, p {
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	font-weight: 500;
}
p {
	font-size: 1.1em;
}
#sub-page h1, #sub-page h2, #sub-page h3, #sub-page h4, #sub-page p, #sub-page a {
	font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
}
/* ----- HEADER ----- */
header {
	height: 100%;
	width: 450px;
	position: fixed;
	-webkit-transition: left 0.5s ease-out 0.25s, bottom 0.5s ease-out 0.25s, color 0.5s ease-out;
	-moz-transition: left 0.5s ease-out 0.25s, bottom 0.5s ease-out 0.25s, background-color 0.5s ease-out;
	transition: left 0.5s ease-out 0.25s, bottom 0.5s ease-out 0.25s, background-color 0.5s ease-out;
	background-color: #343436;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	-webkit-align-items: center;
	align-items: center;
	z-index: 50;
}
header.closed {
	left: -350px;
}
header.opened {
	left: 0px;
}
header.subpage i.fa-code {
	color: #343436;
}
header.subpage i.fa-gamepad{
	color: #343436;
}
header nav {
	background-color: #414143;
	text-align: center;
	height: 100%;
}
header nav div.flex-container {
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	height: 100%;
}
header nav a {
	display: block;
	font-size: 2em;
	font-family: Lucida Console, Monaco, monospace;
	text-decoration: none;
	color: #e6af4b;
	width: 100%;
	padding: 12px 30px 13px 30px;
}
header nav a:hover {
	background-color: #343436;
}
header i.fa-code {
	font-size: 80px;
	position: absolute;
	top: 0%;
	right: 0%;
	color: #4d4d50;
	padding: 8px 6px 0 0;
	opacity: 0.7;
}
header i.fa-gamepad{
	font-size: 80px;
	position: absolute;
	bottom: 0%;
	right: 0%;
	color: #4d4d50;
	padding: 0 6px 8px 0 ;
	opacity: 0.7;
}
#hamburger-icon-holder {
	width: 100px;
	height: 85px;
	position: relative;
	z-index: 100;
	padding: 20px;
	border-width: thin;
}
#hamburger-icon {
	width: 60px;
	height: 45px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}
#hamburger-icon	span {
	display: block;
	position: absolute;
	height: 9px;
	width: 100%;
	background: #e6af4b;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}
#hamburger-icon	span:nth-child(1) {
	top: 0px;
}
#hamburger-icon	span:nth-child(2), #hamburger-icon span:nth-child(3) {
	top: 18px;
}
#hamburger-icon span:nth-child(4) {
	top: 36px;
}
#hamburger-icon.open span:nth-child(1) {
	top: 18px;
	width: 0%;
	left: 50%;
}
#hamburger-icon.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
#hamburger-icon.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#hamburger-icon.open span:nth-child(4) {
	top: 18px;
	width: 0%;
	left: 50%;
}
#hamburger-icon.subpage span:nth-child(1) {
	left: -40%;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
#hamburger-icon.subpage span:nth-child(2) {
	left: -25%;
}
#hamburger-icon.subpage span:nth-child(3) {
	left: 25%;
}
#hamburger-icon.subpage span:nth-child(4) {
	left: -40%;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}
.flex-container {
	display: -webkit-flex;
	display: flex;
}
.borderline {
	border-bottom-style: solid;
	border-bottom-width: thin;
	margin-left: 10%;
	margin-right: 10%;
	width: 80%;
	margin-top: 20px;
	margin-bottom: 10px;
	border-color: #939393;
}
#intro .brainimage {
	opacity: 0.2;
	z-index: -1;
	background-position: center;
	background-size: auto 100%;
	-webkit-transition: width 0.75s;
	-moz-transition: width 0.75s;
	transition: width 0.75s;
	width: 0%;
}
#intro .brainimage.open {
	width:100%;
}
#work-sample {
	height :auto;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#resume {
	height: auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#intro, #about, #resume, #resume1, #work-sample, #arts, #contact {
	margin-left: 100px;
	width : calc(100% - 100px);
	max-width: 1500px;
}
.subpage-impact {
	position: relative;
	left: 0px;
	overflow-x: hidden;
	-webkit-transition: left 0.75s;
	-moz-transition: left 0.75s;
	transition: left 0.75s;
}
#resume1 {
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
}
#intro, #about {
	height :100%;
	padding: 0 20px;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
}
#work-sample, #arts {
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
#intro p {
	text-align: center;
	position: relative;
	right: -25%;
	margin-top: 20px;
	font-size: 1.1em;
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	font-weight: 500;
}
#intro h1 {
	text-align: center;
	font-family: Copperplate Gothic Light, sans-serif;
	font-weight: normal;
	padding: 10px 30px;
	color: white;
	background-color: #414143;
}
#intro h3 {
	text-align: center;
	font-style: italic;
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	font-weight: bold;
}
#new-portfolio {
	font-size: 1.1em;
	color: black;
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	text-decoration: none;
	padding: 4px 15px 6px 15px;
	position: relative;
	text-shadow: 1px 1px 1px #000000;
	-webkit-transition: padding 2s;
	-moz-transition: padding 2s;
	transition: padding 2s;
}
#new-portfolio .bg {
	width: 0%;
	position: absolute;
	height: 3px;
	top: 0%;
	left: 0%;
	background-color: black;
	-webkit-transition: width 0.75s;
	-moz-transition: width 0.75s;
	transition: width 0.75s;
}
#new-portfolio:hover .bg {
	width: 100%;
}
#about h1, #about h2, #about h3 {
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
} 
#about p {
	font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
	text-align: justify;
}
#about {
	color: white;
	background: -webkit-radial-gradient(rgba(55, 55, 112,0.8) 0%, rgba(55, 55, 112,0.9) 45%, rgba(55, 55, 112,1) 90% );
	background: -moz-radial-gradient(rgba(55, 55, 112,0.8) 0%, rgba(55, 55, 112,0.9) 45%, rgba(55, 55, 112,1) 90% );
	background: radial-gradient(rgba(55, 55, 112,0.8) 0%, rgba(55, 55, 112,0.9) 45%, rgba(55, 55, 112,1) 90% );
}
#work-sample {
	background-color : #dddfd4; 
}
#about .borderline {
	border-color: transparent;
}
#about .image-container {
    position: absolute;
    border-width: 15px;
    border-radius: 50%;
    border-color: ivory;
    border-style: solid;
    top: 10%;
    overflow: hidden;
	-webkit-transition: left 0.75s, opacity 0.75s, right 0.75s;
	-moz-transition: left 0.75s, opacity 0.75s, right 0.75s;
	transition: left 0.75s, opacity 0.75s, right 0.75s;
}
#about .image-container.a1.open {
    left: 40%;
    opacity: 0;
}
#about .image-container.a2.open {
    right: 40%;
    opacity: 0;
}
#about .image-container.a1 {
    left: 10%;
    opacity: 1;
}
#about .image-container.a2 {
    right: 10%;
    opacity: 1;
}
#resume1 .titlecard , #work-sample > .flex-container.titlecard , #arts > .flex-container.titlecard{
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	text-align: center;
	padding: 30px 0px 15px 0px;
}
h3.trophy {
	color: gold;
}
#work-sample > .flex-container {
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
div.list-container {
	overflow-x: scroll;
	overflow-y: hidden;
	width: 100%;
	height: auto;
}
div.list-container > .flex-container {
	-webkit-flex-direction: row;
	flex-direction: row;	
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: flex-start;
	align-items: flex-start;
}
.resume-download{	
	text-align: center;
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	background-color: #ECF0F1;
	color: #2D3E50;
	position: relative;
	z-index: 2;
}
.resume-download .flex-item {
	-webkit-transition: transform 1s, color 1s;
	-moz-transition: transform 1s, color 1s;
	transition: transform 1s, color 1s;
}
.resume-download:hover .icon {
	transform: scale(1.3);
}
.resume-download:hover .flex-item {
	color: #19198c;
}
.gradient-bg {
	z-index: 1;
	height: 100%;
	width: 100%;
	color: white;
	opacity: 1;
	position: absolute;    
	text-shadow: 2px 2px 4px #000000;
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	background: -webkit-radial-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 90% );
	background: -moz-radial-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 90% );
	background: radial-gradient(rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 90% );
}
.gradient-bg-hover {
	z-index: 1;
	height: 100%;
	width: 0%;
	position: absolute;
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	background: rgba(25,25,112,0.7);
	-webkit-transition: width 0.5s;
	-moz-transition: width 0.5s;
	transition: width 0.5s;
}
.gradient-bg h3.trophy, .gradient-bg-hover h3.trophy {
	position: static;
	top: 0px;
	right: 0px;
}
.subpage-impact .image-bg {
	height: 100%;
	width: 100%;
	position: absolute;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-transition: transform 2s ;
	-moz-transition: transform 2s;
	transition: transform 2s;
}
.hover-text {
	padding-top: 15px;
	width: 100%;
	height: 100%;
	z-index: 2;
	top: 0%;
	opacity: 0;
	color: white;
	text-shadow: 2px 2px 4px #000000;
	text-align: center;
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	position: absolute;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
iframe.videos  {
	width: 100%;
	height: auto;
}

#arts .photography .clickable, #arts .performing .clickable {
	position: relative;
	border-radius: 0px;
	border-width: 0px;
}
#arts .photography div.flex-container {
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
#arts .performing div.flex-container {
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
}
#arts .performing div.flex-container span {
	background-size: cover;
	border-style: solid;
	border-width: thin;
	border-color: white;
}
.slideElement {
	position: relative;
}
.slideElement.slide-right {
	left: 50%;
	opacity: 0;
}
.slideElement.slide-left {
	left: -50%;
	opacity: 0;
}
.clickable {
	overflow: hidden;
	position: absolute;
	border-style: solid;
	border-radius: 50%;
	border-width : 15px;
	border-style : solid;
	border-color : #e6af4b;
	z-index: 3;
	-webkit-transition: border-color 1s;
	-moz-transition: border-color 1s;
	transition: border-color 1s;
}
.clickable p {
	margin-bottom: 10px;
}
.image-bg-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
}
.clickable:hover {
	border-color: #19198c;
}
.clickable:hover .image-bg {
	-webkit-transform: scale(1.15);
	-moz-transform: scale(1.15);
	transform: scale(1.15);
}
.clickable:hover .gradient-bg {
	opacity: 0;
}
.clickable:hover .gradient-bg-hover {
	width: 100%;
}
.clickable:hover .hover-text {
	opacity: 1;
}
#resume .clickable {
	position : absolute;
}
#resume .image-bg-container.flex-container {
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
.hover-text.mobile {
	height: 100%;
	top: 0px;
	opacity: 1;
}
.clickable:hover .hover-text.mobile {
	opacity: 1;
}
#sub-page .photography {
	background-color: #262626;
}
#sub-page .photography > div.flex-container {
	width: 100%;
	height: 100%;
}
#sub-page .photography span {
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position:absolute;
	-webkit-transition: left 0.75s;
	-moz-transition: left 0.75s;
	transition: left 0.75s;
}
#sub-page .photography span .image-bg {
	width: 100%;
	height: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
#sub-page .photography span.current {
	left:0px;
}
#sub-page .photography span.previous {
	left:-100%;
}
#sub-page .photography span.next {
	left:+100%;
}
#sub-page .photography .nav-arrows {
	padding: 0 15px;
	width: 100%;
	height: 100%;
	color: white;
	text-align: center;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	background: -webkit-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.4) 100% );
	background: -moz-linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.4) 100% );
	background: linear-gradient(left, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.1) 90%, rgba(0,0,0,0.4) 100% );
	position: absolute;
	top: 0px;
}
#work-sample .flex-container.text , #arts .flex-container.text {
	margin: 20px 20px 5px 30px;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
}
#sub-page {
	-webkit-transition: left 0.75s;
	-moz-transition: left 0.75s;
	transition: left 0.75s;
	height: auto;
	position: absolute;
	top: 0px;
	overflow: hidden; 
}
#contact {
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	height: 50%;	
	color: #eaeaef;
	background-color: #373770;
}
#contact a {
	color: #eaeaef;
}
#contact .list-container {
	width: 100%;
	height: 3em;
	overflow: hidden;
	margin-bottom: 1.5em;
}
#contact .list-container span{
	position: absolute;
	width: 100%;
	left: 0px;
	text-align: center;
}
#contact > .flex-container {
	-webkit-flex-direction: row;
	flex-direction: row;	
	-webkit-justify-content: space-around;
	justify-content: space-around;
	-webkit-align-items: center;
	align-items: center;
}
#contact > .flex-container > .flex-container {
	-webkit-flex-direction: row;
	flex-direction: row;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	height: 70px;
}
#contact .icon {
	font-size : 45px;
	text-shadow: 0px;
	-webkit-transition: transform 0.75s;
	-moz-transition: transform 0.75s;
	transition: transform 0.75s;
	cursor: pointer;
}
#contact i.icon {
	font-size : 51px;
	text-shadow: 0px;
}
#contact .icon:hover {
	transform: scale(1.3);
	text-shadow: 2px 2px 4px #000000;
}
#sub-page {
	background-color : #52abb4;
}
#sub-page h1, #sub-page h2, #sub-page h3, #sub-page h4, #sub-page p, #sub-page li, #sub-page a {
	color: #ffffff;
	margin-bottom: 0px;
}
#sub-page p, #sub-page li {
	font-size: 1.2em;
	padding-bottom: 4px;
}
#sub-page .experience-page {
	-webkit-flex-direction: row;
	flex-direction: row;	
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
#sub-page .experience-page .empty-div {
	height: 10%;
}
#sub-page .experience-page .titlecard ,
#sub-page .experience-page .circle-container {
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	text-align: center;
	position: relative;
}
#sub-page .experience-page .titlecard {
	left: -100%;
	opacity: 0;
}
#sub-page .experience-page .circle-container.before {
	opacity: 0;
	-webkit-transform: rotate(-180deg);
	-moz-transform: rotate(-180deg);
	transform: rotate(-180deg);
}
#sub-page .experience-page .circle-container{
	opacity: 1;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: transform 0.5s, opacity 0.5s;
	-moz-transition: transform 0.5s, opacity 0.5s;
	transition: transform 0.5s, opacity 0.5s;
}
#sub-page .experience-page .titlecard {
	height: 200px;
}
#sub-page .experience-page .dot-container {
	-webkit-flex-direction: row;
	flex-direction: row;	
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-align-items: center;
	align-items: center;
	position: absolute;
	z-index: 3;
}
#sub-page .experience-page .dots.null div {
	width: 0.6em;
	height: 0.6em;	
	background-color: #ffffff;
	border-radius: 50%;
	opacity: 0.4;
}
#sub-page .experience-page .dots.full {
	cursor: pointer;
}
#sub-page .experience-page .dots.full ,
#sub-page .experience-page .dot-bg .dot-bg-content {
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;	
}
#sub-page .experience-page .dot-bg .dot-bg-content,
#sub-page .experience-page .circle-content .dot-bg-content {
	display: none;	
}
#sub-page .experience-page .dots.full .icon {
	color: #ffffff;
	-webkit-transition: transform 0.3s;
	-moz-transition: transform 0.3s;
	transition: transform 0.3s;
}
#sub-page .experience-page .dots.full.hover .icon{
	-webkit-transform: scale(1.5) rotate(360deg);
	-moz-transform: scale(1.5) rotate(360deg);
	transform: scale(1.5) rotate(360deg);
}
#sub-page .experience-page .dot-bg {
	border-radius: 50%;
	overflow: hidden;
	text-align: center;
	position: absolute;
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
#sub-page .experience-page .dot-bg .check-link {
	z-index: 10;
}
#sub-page .experience-page .dot-bg .duration span {
	font-size: 24px;
}
#sub-page .experience-page .dot-bg .flex-container {
	width: 100%;
	left: 0px;
	text-align: center;
}
#sub-page .experience-page .circle-content {
	height: 100px;
}
#sub-page .experience-page .circle-content > .flex-container {
	padding: 40px 0;
	-webkit-flex-direction: row;
	flex-direction: row;	
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
}
#sub-page .experience-page .circle-content {
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: flex-start;
	justify-content: flex-start;
	-webkit-align-items: center;
	align-items: center;
}
.inline {
	display: inline;
}
#sub-page .circle-content .skills,
#sub-page .circle-content .skills .skill-icons1,
#sub-page .circle-content .skills .skill-icons2 {
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
#sub-page .circle-content .skills .skill-icons1,
#sub-page .circle-content .skills .skill-icons2 {
	-webkit-flex-direction: row;
	flex-direction: row;	
}
#sub-page .circle-content iframe.videos {
	height: 500px;	
}
#sub-page .experience-page .circle-content .skills .image-bg {
	display: inline-block;
	height: 125px;
	margin: 25px 0;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}
#sub-page .experience-page .circle-content .smallab {
	-webkit-flex-direction: row;
	flex-direction: row;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: flex-start;
	align-items: flex-start;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;
}
#sub-page .experience-page .circle-content .smallab .text {
	padding: 0 10px;
}
#sub-page .experience-page .sample-container .dot-bg-content {
	width: 100%;
	height: 100%;
}
#sub-page .experience-page .sample-container iframe.videos {
	width: 100%;
	height: 57%;
	z-index: 10;
}
#sub-page .experience-page .sample-container .image-bg {
	display: block;
	width: 100%;
	height: 100%;
	background-size: 100% auto;
	background-position: center;
	background-repeat: no-repeat;
}
#sub-page .experience-page .sample-container .text {
	position: absolute;
	color: #ffffff;
	bottom: 10%;
	width: 100%;
	text-shadow: 2px 2px 4px #000000;
}
#sub-page .experience-page .design-download {
	height: 100%;
	-webkit-flex-direction: column;
	flex-direction: column;	
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-align-items: center;
	align-items: center;
}
#sub-page .image-tile-game , #sub-page .intuit-parking {
	width: 100%;
	display: none;
}
#sub-page .loading {
	text-align: center;
	display: block;
}
#sub-page .loading .icon {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: transform 1s;
	-moz-transition: transform 1s;
	transition: transform 1s;
}
#sub-page .loading .icon.rotate1 {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	transform: rotate(0deg);
}
#sub-page .loading .icon.rotate2 {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	transform: rotate(180deg);
}
/* ----- MEDIA QUERIES ----- */
@media screen 
and (min-device-width: 1024px)  { 
}

/* ----- MEDIA QUERY - TABLET ----- */
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) {
	.hidden-sm {
		display: none;
	}
	#hamburger-icon.subpage span {
		width: 83%;
	}
	#hamburger-icon.subpage span:nth-child(1) {
		left: -26%;
		top: 2px;
	}
	#hamburger-icon.subpage span:nth-child(2) {
		left: -18%;
	}
	#hamburger-icon.subpage span:nth-child(3) {
		left: 30%;
	}
	#hamburger-icon.subpage span:nth-child(4) {
		left: -26%;
		top: 34px;
	}
	#sub-page .experience-page .circle-content > .flex-container {
		padding:30px 0;
	}
	#sub-page .circle-content iframe.videos {
		height: 400px;	
	}
	html, body {
		font-size: 16px;
	}
}
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: portrait) {
	header {
		height: 305px;
		width: 100%;
		left: 0px;
		background-color: #343436;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;	
	}
	header.closed {
		bottom: -230px;
		left: 0px;
	}
	header.opened {
		bottom: 0px;
		left: 0px;
	}
	header nav {
		padding: 15px 0 10px 0;
		height: auto;
		width: 100%;
	}
	header nav div.flex-container {
		height: auto;
		width: 100%;
	}
	header nav a {
		font-size: 1.5em;
		font-family: Lucida Console, Monaco, monospace;
		line-height: 41px;
		padding: 0;
	}
	header i.fa-code {
		font-size: 70px;
		top: 0%;
		left: 0%;
		padding: 0px 0 0 10px;
	}
	header i.fa-gamepad{
		font-size: 70px;
		top: 0%;
		right: 0%;
		padding: 0px 10px 0 0;
	}
	#hamburger-icon-holder {
		height: 75px;
		width: 90px;
		padding: 15px;
	}
	.borderline {
		margin-left: 10%;
		margin-right: 10%;
		width: 80%;
	}
	#intro, #about {
		height: calc(100% - 75px);
	}
	#intro, #about, #resume1, #resume, #work-sample, #arts, #contact {
		margin-left: 0px;
		width: 100%;
	}
	#intro p {
		right: 0%;
	}
	.medium-portrait-offset-1 {
		margin-left: 0%;
	}
	.medium-portrait-1 {
		width: 8.33%;
	}
	.medium-portrait-offset-1 {
		margin-left: 8.33%;
	}
	.medium-portrait-2 {
		width: 16.67%;
	}
	.medium-portrait-offset-2 {
		margin-left: 16.67%;
	}
	.medium-portrait-3 {
		width: 25%;
	}
	.medium-portrait-offset-3 {
		margin-left: 25%;
	}
	.medium-portrait-4 {
		width: 33.33%;
	}
	.medium-portrait-offset-4 {
		margin-left: 33.33%;
	}
	.medium-portrait-5 {
		width: 41.67%;
	}
	.medium-portrait-offset-5 {
		margin-left: 41.67%;
	}
	.medium-portrait-6 {
		width: 50%;
	}
	.medium-portrait-offset-6 {
		margin-left: 50%;
	}
	.medium-portrait-7 {
		width: 58.33%;
	}
	.medium-portrait-offset-7 {
		margin-left: 58.33%;
	}
	.medium-portrait-8 {
		width: 66.67%;
	}
	.medium-portrait-offset-8 {
		margin-left: 66.67%;
	}
	.medium-portrait-9 {
		width: 75%;
	}
	.medium-portrait-offset-9 {
		margin-left: 75%;
	}
	.medium-portrait-10 {
		width: 83.33%;
	}
	.medium-portrait-offset-10 {
		margin-left: 83.33%;
	}
	.medium-portrait-11 {
		width: 91.67%;
	}
	.medium-portrait-offset-11 {
		margin-left: 91.67%;
	}
	.medium-portrait-12 {
		width: 100%;
	}
	.medium-portrait-offset-12 {
		margin-left: 100%;
	}
}
@media only screen 
and (min-device-width: 768px) 
and (max-device-width: 1024px) 
and (orientation: landscape)  {
}


/* ----- MEDIA QUERY - PHONE ----- */
@media screen 
and (min-device-width: 320px) 
and (max-device-width: 767px)  {
	html, body {
		font-size: 16px;
	}
	.hidden-xs {
		display: none;
	}
	#hamburger-icon.subpage span { 
		width: 65%;
	}
	#hamburger-icon.subpage span:nth-child(1) {
		left: -23%;
		top: 4px;
	}
	#hamburger-icon.subpage span:nth-child(2) {
		left: -20%;
	}
	#hamburger-icon.subpage span:nth-child(3) {
		left: 20%;
	}
	#hamburger-icon.subpage span:nth-child(4) {
		left: -23%;
		top: 32px;
	}
	#contact .list-container {
		margin-bottom: 0px;
	}
	#sub-page .experience-page .titlecard {
		height: 150px;
	}
	#sub-page .experience-page .dots div {
		width: 1.2em;
		height: 1.2em;
	}
	#sub-page .circle-content .skills .skill-icons1 {
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	#sub-page .experience-page .circle-content .skills .image-bg {
		margin: 10px 0;
	}
	#sub-page .experience-page .circle-content > .flex-container {
		padding: 20px 0;
	}
	#sub-page .circle-content iframe.videos {
		height: 300px;	
	}
	#sub-page .experience-page .circle-content .smallab {
		-webkit-flex-direction: column;
		flex-direction: column;
	}
	#sub-page .experience-page .circle-content .smallab .text {
		padding: 0 10px;
	}
	#resume .clickable {
		position : relative;
		opacity: 0;
	}
	.clickable {
		border-width: 10px;
	}
	.clickable .gradient-bg {
		background-color: rgba(0,0,0,0.4);
	}
	.clickable p, .clickable h3, .clickable h4 {
		margin-bottom: 0px;
	} 
	#resume { 
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap; 
	}
	#resume1 .titlecard , #work-sample > .flex-container.titlecard , #arts > .flex-container.titlecard{
		padding: 20px 0px 10px 0px;
	}
}

@media screen 
and (min-device-width: 320px) 
and (max-device-width: 767px)
and (orientation: portrait)  { 
	header {
		height: 240px;
		width: 100%;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
	}
	header.closed {
		bottom: -175px;
		left: 0px;
	}
	header.opened {
		bottom: 0px;
		left: 0px;
	}
	header nav {
		padding: 15px 0 10px 0;
		height: auto;
		width: 100%;
	}
	header nav div.flex-container {
		height: auto;
		width: 100%;
	}
	header nav a {
		font-size: 24px;
		font-family: Lucida Console, Monaco, monospace;
		line-height: 30px;
		padding: 0;
	}
	header i.fa-code {
		font-size: 45px;
		top: 0%;
		left: 0%;
		padding: 9px 0 0 10px;
	}
	header i.fa-gamepad{
		font-size: 50px;
		top: 0%;
		right: 0%;
		padding: 6px 9px 0 0;
	}
	#hamburger-icon-holder {
		height: 65px;
		width: 80px;
		padding: 10px;
	}
	.borderline {
		margin-left: 15%;
		margin-right: 15%;
		width: 70%;
	}
	#intro, #about {
		height: calc(100% - 65px);
		padding: 0 10px;
	}
	#intro, #about, #resume1, #resume, #work-sample, #arts, #contact {
		margin-left: 0px;
		width: 100%;
	}
	#intro p {
		right: 0%;
	}
}

@media screen 
and (min-device-width: 320px) 
and (max-device-width: 767px)
and (orientation: landscape)  { 
	header {
		height: 100%;
		width: 294px;
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
	header.closed {
		left: -214px;
	}
	header.opened {
		left: 0px;
	}
	header nav {
		padding: 0 20px 0 20px;
	}
	header nav a {
		font-size: 24px;
		font-family: Lucida Console, Monaco, monospace;
		padding: 20px 0 20px 0;
	}
	header i.fa-code {
		font-size: 50px;
		padding: 5px 13px 0 0 ;
	}
	header i.fa-gamepad{
		font-size: 50px;
		padding: 0 12px 8px 0;
	}
	#hamburger-icon-holder {
		height: 65px;
		width: 80px;
		padding: 10px;
	}
	.borderline {
		margin-left: 15%;
		margin-right: 15%;
		width: 70%;
	}
	#intro, #about {
		height :100%;
		padding: 0 15px;
	}
	#intro, #about, #resume1, #resume, #work-sample, #arts, #contact {
		margin-left: 80px;
		width : calc(100% - 80px);
	}
	.small-landscape-offset-1 {
		margin-left: 0%;
	}
	.small-landscape-1 {
		width: 8.33%;
	}
	.small-landscape-offset-1 {
		margin-left: 8.33%;
	}
	.small-landscape-2 {
		width: 16.67%;
	}
	.small-landscape-offset-2 {
		margin-left: 16.67%;
	}
	.small-landscape-3 {
		width: 25%;
	}
	.small-landscape-offset-3 {
		margin-left: 25%;
	}
	.small-landscape-4 {
		width: 33.33%;
	}
	.small-landscape-offset-4 {
		margin-left: 33.33%;
	}
	.small-landscape-5 {
		width: 41.67%;
	}
	.small-landscape-offset-5 {
		margin-left: 41.67%;
	}
	.small-landscape-6 {
		width: 50%;
	}
	.small-landscape-offset-6 {
		margin-left: 50%;
	}
	.small-landscape-7 {
		width: 58.33%;
	}
	.small-landscape-offset-7 {
		margin-left: 58.33%;
	}
	.small-landscape-8 {
		width: 66.67%;
	}
	.small-landscape-offset-8 {
		margin-left: 66.67%;
	}
	.small-landscape-9 {
		width: 75%;
	}
	.small-landscape-offset-9 {
		margin-left: 75%;
	}
	.small-landscape-10 {
		width: 83.33%;
	}
	.small-landscape-offset-10 {
		margin-left: 83.33%;
	}
	.small-landscape-11 {
		width: 91.67%;
	}
	.small-landscape-offset-11 {
		margin-left: 91.67%;
	}
	.small-landscape-12 {
		width: 100%;
	}
	.small-landscape-offset-12 {
		margin-left: 100%;
	}
}