html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x:hidden;
	-webkit-overflow-scrolling: touch;
	font-family: 'Work Sans';
}

#tech-logos {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: center;
}
#tech-logos > img {
	width: auto;
	height: calc(10vh);
}

.tag {
	padding: 1px;
	font-size: 1.2em;
	font-family: 'Work Sans';
}

.bg-navy { background-color: #001f3f; }
.bg-blue { background-color: #0074D9; }
.bg-aqua { background-color: #7FDBFF; }
.bg-teal { background-color: #39CCCC; }
.bg-olive { background-color: #3D9970; }
.bg-green { background-color: #2ECC40; }
.bg-lime { background-color: #01FF70; }
.bg-yellow { background-color: #FFDC00; }
.bg-orange { background-color: #FF851B; }
.bg-red { background-color: #FF4136; }
.bg-maroon { background-color: #85144b; }
.bg-fuchsia { background-color: #F012BE; }
.bg-purple { background-color: #B10DC9; }
.bg-black { background-color: #111111; }
.bg-gray { background-color: #AAAAAA; }
.bg-silver { background-color: #DDDDDD; }
.bg-white { background-color: #FFFFFF; }

/* Phone Slider */

#skills { 
	background: cyan;
	background: -webkit-linear-linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
	background: -o-linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
	background: -moz-linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
	background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}

#phoneDisplay {
	background: cyan;
	background: -webkit-linear-linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
	background: -o-linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
	background: -moz-linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
	background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}

/* SVG Name */

#nameSVG {
	opacity: 0;
	fill-opacity: 0;
  	transition: fill-opacity 1s;
}
#nameSVG.finished * {
  fill-opacity: 1;
}
#name-below {
	opacity: 0;
}

/* Slideout Menu */

.slideout-menu {
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 0;
	width: 256px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	display: none;
	background-color: #80CBC4;
}

.slideout-panel {
	position: relative;
	z-index: 1;
}

.slideout-open,
.slideout-open body,
.slideout-open .slideout-panel {
	overflow: hidden;
}

.slideout-open .slideout-menu {
	display: block;
}

#panel {
	opacity: 1;
}

#opener { 
	width: 100%;
	height: calc(100vh);
	display: table;
	font-family: 'Work Sans'; 
}

.layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100vh);
	display: table;
}
.bottom { z-index: 1 }
.middle { z-index: 2 }
.top { z-index: 3 }

.center-content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.full-screen {
	width: calc(100vw);
	height: calc(100vh);
	padding: 0;
	margin: 0;
}

.break-screen {
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: calc(75vh);
	width: 100%;
	display: table;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
}

.break-screen-content {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}

.header { font-size: 3em; }
.subtitle { font-size: 1.5em; }

/* Nav */
#nav-main {
	white-space: nowrap;
	padding: 20px;
}
#nav-main span {
	font-size: 1.5em;
	line-height: 1.5em;
}
#nav-main span a {
	text-decoration: none;
	color: #FFFFFF;
}
#nav-menu {
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
	cursor: pointer;
	-moz-user-select: none; 
	-khtml-user-select: none; 
	-webkit-user-select: none; 
	-o-user-select: none;
	margin: 1em;
	padding: 0.3em;
	border-radius: 0.4em 0.4em 0.4em 0.4em;
	border: 0.4em solid #212121;
	background-color: #FFFFFF;
}

/* Colors from http://clrs.cc/ */
.navy { color: #001f3f; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.maroon { color: #85144b; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.black { color: #111111; }
.gray { color: #AAAAAA; }
.silver { color: #DDDDDD; }
.white { color: #FFFFFF; }

/* General Styles */

.content {
	width: 90%;
	height: auto;
	padding: calc(5vw);
	background: #FFFFFF;
}

img {
	width: 100%;
	height: auto;
}
.img-margin {
	padding: calc(1vh);
}
.text-margin {
	padding: calc(1vh);	
}
.text-center {
	text-align: center;
}

.font-lato { 
	font-family:'Lato'; 
	line-height: 1.5em;
}
.font-lg { font-size: 1.5em; }
.font-md { font-size: 1.2em; }

#footer { background-color: #282828; }

blockquote {
	border-left: 4px solid #ccc;
	padding-left: 10px;
	font-family:'Lato';
}
blockquote .author {
	color: #a5a4a4;
	font-style: italic;
	font-size: 0.8em;
}

/* Code Box */

.codebox {
	background-color:#282828;
	box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
	font-family: Consolas, monaco, monospace;
	border-radius: 10px;
	padding: 4%;
	margin: 2%;
	width: 88%;
	height: auto;
}
.codebox .code-header {
	color: #01FF70;
	line-height: 3em;
}
.codebox .code-text {
	color: #FFFFFF;
}
.codebox .code-line {
	color: #7FDBFF;
}

/* Arrow */

@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.arrow {
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -20px;
  width: 40px;
  height: 40px;
  background-image: url("./imgs/arrow.svg");
  background-size: contain;
}

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite;
}

/* http://codepen.io/anon/pen/amjNaZ */
/* http://lorempixel.com/480/200/city/9/cc/ */
/* Clip text element */
.clip-text {
    font-size: calc(10vh);
    font-weight: 900;
    font-family: 'Oswald', sans-serif;
    background-image: inherit;
    /* Color fallback */
    color: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.clip-text_one {
    background-image: url("./imgs/goldengate.jpeg");
}