html, body {
	margin: 0;
	height: 100%;
	width: 100%;
	min-height: 100%;
}

section {
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#intro {
	background: url(../images/backgrounds/golden_gate.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	color: #fff;
	//position: fixed;
}

#gradient-overlay-intro {
	width: 100%;
	height: 100%;
	background:-webkit-linear-gradient(0deg, rgba(215,146,81,0.7) 0%, rgba(215,98,35,0.7) 50%, rgba(192,63,85,0.7) 100%);
}

#intro-svg-container {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

#intro-icons-container {
	position: absolute;
	text-align: center;
	width: 100%;
	margin: 0 auto;
	top: 60%;
	left: 0;
	right: 0;
}

#intro-icons-container img {
	margin: 0 5%;
	width: 5vw;
	-webkit-filter: brightness(10)
}

#intro-icons-container p {
	margin: 0 2%;
	font-size: 1vw;
}

#caption-container {
	position: absolute;
	text-align: right;
	width: 100%;
	top: 47%;
	font-size: 6vh;
	font-family: 'Advent Pro', sans-serif;
	font-weight: 300;
	right: 2.5vw;
}

#caption-container div{
	display: inline-block;
	margin: 0 1.5vw;
}

#arrow {
  position: absolute;
  bottom: 3vh;
  left: 50%;
  margin-left:-2.5vw;
  width: 5vw;
  height: 5vw;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
  background-size: contain;
  cursor: pointer;
}

.transparent {
	opacity: 0;
}

.fadein {
	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;
}

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

.tooltip {
    display: inline;
    position: relative;
    text-align: center;
}

.tooltip:after {

    color: rgba(250,250,250,0.5);
	-webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}

.tooltip:hover:after{
	font-family: 'Advent Pro', sans-serif;
	font-size: 2vw;
    top: 15px;
    content: attr(name);
    left: 0%;
    color: #fff;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    text-align: center;
    width: 85%;
}

.nameoutline {
  stroke-dasharray: 1000;
  stroke-dashoffset: 100;
  -webkit-animation: outline 2.5s linear alternate;
}


/* iOS SLIDER SECTION ******************************************** */

#ios-section {
	background: url(../images/backgrounds/app_dev.jpg) no-repeat center center;	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-height: 100vh;
	overflow: hidden;
}

.gradient-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-transition: opacity 1.5s ease;
	-moz-transition: opacity 1.5s ease;
	-o-transition: opacity 1.5s ease;
	transition: opacity 1.5s ease;
}

#umlaundry-gradient-overlay {
	background: -webkit-linear-gradient(0deg, rgba(81, 209, 215, 0.7) 0%, rgba(56, 126, 199, 0.7) 50%, rgba(0, 43, 140, 0.7) 100%);
}

#ontask-gradient-overlay {
	background: -webkit-linear-gradient(0deg, rgba(241, 194, 108, 0.7) 0%, rgba(226, 134, 39, 0.7) 50%, rgba(255, 118, 0, 0.7) 100%);
}

#spudy-gradient-overlay {
	background: -webkit-linear-gradient(0deg, rgba(204, 177, 127, 0.7) 0%, rgba(146, 99, 50, 0.79) 50%, rgba(109, 61, 19, 0.7) 100%);
}

#qwicknc-gradient-overlay {
	background: -webkit-linear-gradient(0deg, rgba(226, 216, 197, 0.7) 0%, rgba(173, 93, 93, 0.79) 50%, rgba(101, 3, 3, 0.7) 100%);
}

#itacademy-gradient-overlay {
	background: -webkit-linear-gradient(0deg, rgba(217, 228, 236, 0.7) 0%, rgba(117, 177, 195, 0.79) 50%, rgba(2, 50, 68, 0.7) 100%);
}

#wl4fitness-gradient-overlay {
	background: -webkit-linear-gradient(0deg, rgba(217, 228, 236, 0.7) 0%, rgba(86, 115, 123, 0.79) 50%, rgba(39, 70, 82, 0.7) 100%);
}

#ios-section-label {
	position: absolute;
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 5vw;
	top: 5vh;
	left: 2vw;
	/*-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);*/
}

#ios-slider-container {
	position: absolute;
	//background-color: #000;
	//height: 95vh;
	width: 30vw;
	right: 10vw;
	top: 2.5vh;
}



#app-info-container {
	position: relative;
	width: 45vw;	
	margin-top: 17vh;
	left: 0;
	padding-left: 12vw;
	color: #fff;
	font-family: 'Lato', sans-serif;
	//background: rgba(250,250,250,0.4);
	height: 25vh;
	max-height: 25vh;
	z-index: 90;
}

.app-info {
	position: absolute;
	-webkit-transition: opacity 0.7s linear;
	-moz-transition: opacity 0.7s linear;
	-o-transition: opacity 0.7s linear;
	transition: opacity 0.7s linear;
}

.app-name-header {
	font-size: 3vw;
	font-weight: 400;
}

.app-description {
	margin-top: 2vh;
	font-weight: 300;
	font-size: 1.5vw;
}

.app-info-buttons {
	margin-top: 3vh;
}

.app-info-buttons button {
	background: none;
	padding: 3px 2vw;
	border: 2px solid #fff;
	color: #fff;
	font-family: 'Lato', sans-serif;
	outline: none;
	margin-right: 20px;
	font-weight: 300;
	font-size: 1.2vw;
	cursor: pointer;
}

.app-info-buttons button:hover {
	opacity: 0.6;
}

.app-info-buttons button img {
	vertical-align: middle;
	width: 2.3vw;
	margin-right: 10px
}

#app-icon-grid {
	position: relative;
	width: 45vw;	
	height: 100px;
	margin-top: 5vh;
	margin-left: 10vw;
	//background: #939;
	z-index: 100;
}

.app-icon-container {
	position: relative;
	min-width: 10vw;
	min-height: 10vw;
	background: #000;
	margin: 2vw;
	float: left;
	//color: #fff;
	overflow: hidden;	
	cursor: pointer;

	-webkit-transition: opacity 0.7s linear;
	-moz-transition: opacity 0.7s linear;
	-o-transition: opacity 0.7s linear;
	transition: opacity 0.7s linear;
}

.app-icon {
	position: absolute;
	width: 100%;
	height: 100%;	
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.app-name {
	position: absolute;
	height: 20%;
	width: 100%;
	bottom: -20%;
	background: rgba(250,250,250,0.3);
	font-family: 'Lato', sans-serif;
	font-size: 100%;
	font-weight: 300;
	text-align: center;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.app-icon-container:hover {
	opacity: 1.0 !important;
}

.app-icon-container:hover > .app-icon {
	margin-top: -10%;
}

.app-icon-container:hover > .app-name {
	bottom: 0;
}

#umlaundry-icon-container {
	color: #fff;
	background: #236DD9;
}

#umlaundry-icon {
	background: url(../images/iOS_icons/app_icons/umlaundry_transparent.png);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#spudy-icon-container {
	color: #8A775C;
	background: #EAD7B9;
}

#spudy-icon {
	background: url(../images/iOS_icons/app_icons/spudy.png);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#ontask-icon-container {
	color: #fff;
	background: #FF8000;
}

#ontask-icon {
	background: url(../images/iOS_icons/app_icons/ontask.png);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#qwicknc-icon-container {
	color: #000;
	background: url(../images/iOS_icons/app_icons/qwicknc_background.png);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#qwicknc-icon {
	background: url(../images/iOS_icons/app_icons/qwicknc.png);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#itacademy-icon-container {
	color: #3B65AA;
	background: #DCF1FA;
}

#itacademy-icon {
	background: url(../images/iOS_icons/app_icons/itacademy.png);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#wl4fitness-icon-container {
	color: #4A4846;
	background: #CACACA;
}

#wl4fitness-icon {
	background: url(../images/iOS_icons/app_icons/wl4fitness.png);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/* WEB DEV SECTION ********************************* */

#web-section {
	//overflow: hidden;
	//background: url(../images/backgrounds/web_dev_small.jpg);
	//background: -webkit-linear-gradient(0deg, rgb(21, 30, 41) 0%, rgb(185, 0, 0) 50%, rgb(247, 235, 207) 100%);
	//background: -webkit-linear-gradient(0deg, rgb(10, 14, 21) 0%, rgb(17, 46, 70) 30%, rgb(185, 0, 0) 50%, rgb(247, 235, 207) 100%);
	//background: -webkit-linear-gradient(0deg, rgb(22, 34, 46) 0%, rgb(185, 0, 0) 20%, rgb(109, 159, 159) 40%, rgb(121, 182, 216) 60%, rgb(168, 144, 119) 80%, rgb(183, 218, 175) 100%);
	//background: -webkit-linear-gradient(0deg, rgb(22, 34, 46) 5%, rgb(193, 97, 97) 20%, rgb(109, 159, 159) 40%, rgb(121, 182, 216) 60%, rgb(168, 144, 119) 80%, rgb(183, 218, 175) 100%);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#web-section-label {
	//-webkit-transform: rotate(-90deg);
	text-align: center;
	font-family: 'Source Code Pro', sans-serif;
	color: #D8366C; /* pink */
	//color: #D7D874;
	font-weight: 300;
	font-size: 6vh;
	line-height: 10vh;
	background: #2C2C27;
}

#web-section-languages {
	font-family: 'Source Code Pro', sans-serif;
	font-weight: 400;
	position: absolute;
	width: 100%;
	height: 10%;	
	color: #D7D874;								
}

.language-container {
	position: absolute;
	text-align: center;
	width: 40vw;
	top: 50%;

	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	transform: translateY(-50%);
}

.language-container span {
	margin: 0 3vw;
	-webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	transition: all 0.5s linear;
}

#language-container1 {				
	left: 0;
}

#language-container2 {
	right: 0;
}

#web-apps-container {
	position: absolute;
	width: 100%;
	height: 90%;
	bottom: 0;
	right: 0;
	padding: 0;
}

#web-apps-table {
	//border-spacing: 1vw;	
	border-collapse: collapse;			
}

#web-apps-table tr {
	//height: 42.5vh;
	height: 45vh;
}

#web-apps-table td {
	//width: 32vw;
	//border: 2px solid #fff;
	width: 33%;
	position: relative;
	overflow: hidden;
	color: #fff;
}

.web-app-name {
	text-align: center;
	//-webkit-filter: blur(5px);

	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
}

.web-app-name img {
	width: 60%;
}

#gravityfour-cell {
	
	background: url(../images/backgrounds/stars_background.jpg);
	-webkit-background-size: 100% 100%;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 100% 100%;

}

#gravityfour-app-logo {
	font-family: "lato", sans-serif;
		font-weight: 300;
		letter-spacing: 3px;
		color: #fff;
		background: -webkit-linear-gradient(white, #38495a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.3vw;
    text-align: center;
}

#continue-cell {
	background: #B90000;
}

#oldsite-cell {
	
	background: url(../images/backgrounds/building_small.jpg);
	-webkit-background-size: 100% 100%;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 100% 100%;

}

#rhymealine-cell {
	
	background: url(../images/web/rhymealine_background.jpg);
	-webkit-background-size: 100% 100%;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: 100% 100%;

}

#cuperccino-cell {
	background: #A89077;
}

#grad-cell {
	background: #E7F2DE;
}

#grad-app-logo img {
	width: 50%;
}

#web-apps-table td:hover > .web-app-name {
	-webkit-filter: blur(5px);
}

#continue-cell:hover > .web-app-name {
	opacity: 0.6;
}

#web-apps-table td:hover > .web-app-info {
	opacity: 1;
}

.web-app-info {
	position: absolute;
	width: 90%;
	left: 5%;
	font-family: 'Lato', sans-serif;
	font-size: 2.5vmin;
	font-weight: 300;
	text-align: center;
	top: 50%;
	cursor: default;
	-webkit-transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-o-transform: translate(0, -50%);
	transform: translate(0,-50%);

	opacity: 0;

	-webkit-transition: opacity 1s ease;
	-moz-transition: opacity 1s ease;
	-p-transition: opacity 1s ease;
	transition: opacity 1s ease;
}


.web-app-info button {
	background: none;
	padding: 3px 2vw;
	border: 2px solid #fff;
	color: #fff;
	font-family: 'Lato', sans-serif;
	outline: none;
	margin: 5px;
	font-weight: 300;
	font-size: 1.2vw;
	cursor: pointer;
}

.web-app-info button:hover {
	opacity: 0.6;
}

.web-app-info button img {
	vertical-align: middle;
	width: 2.3vw;
	margin-right: 10px
}

.web-app-info2 {
	position: absolute;
	left: 0;
	width: 100%;
	font-family: 'Lato', sans-serif;
	font-size: 2.5vmin;
	font-weight: 300;
	bottom: -80%;
	cursor: default;
	background: rgba(250,250,250,.4);

	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-p-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.web-app-info2 p {
	padding: 0 5%;
}

.web-app-info2 button {
	//float: left;
	border: 2px solid #fff;
	width: 50%;
	//background: rgba(250,250,250,.4);
	background: none;
	padding: 3px 2vw;
	color: #fff;
	font-family: 'Lato', sans-serif;
	outline: none;
	font-weight: 300;
	font-size: 1.2vw;
	cursor: pointer;
}

.web-app-info2 button img {
	vertical-align: middle;
	width: 2.3vw;
	margin-right: 10px
}

.first-button {
	//margin-left: -1px;
	float: left;
}

.second-button {
	//margin-left: 1px;
	float: right;
}

.web-app-name2 {
	position: absolute;
	width: 100%;
	text-align: center;	
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);

	-webkit-transition: top 0.5s ease;
	-moz-transition: top 0.5s ease;
	-p-transition: top 0.5s ease;
	transition: top 0.5s ease;			
}

.web-app-name2 img {
	width: 60%;
	top: 0;
}

.style2:hover > .web-app-name2 {
	top: 25%;
}

.style2:hover > .web-app-info2 {
	bottom: 0;
}

#rhymealine-info {
	color: #FDB831;
	text-shadow: 0 0 3px #000;
}

#rhymealine-info button {
	/* color: #FDB831; */
}

#grad-info {
	//color: #5AAA54;
	color: #1D461B;
}

#grad-info button {
	//color: #5AAA54;
	color: #1D461B;
	border-color: #1D461B;
}

.highlighted {
	color: #88D4EB;	
	//text-decoration: underline;
	border: 1px solid #88D4EB;
	padding: 5px;
}

/* AT A GLANCE SECTION */

#quicklinks-overlay {
	background: -webkit-linear-gradient(0deg, rgba(121, 182, 216, 0.75) 0%, rgba(184, 220, 253, 0.63) 50%, rgba(209, 232, 253, 0.67) 100%);
	position: absolute;
	width: 100%;
	height: 100%;
}

#quicklinks-table {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size: 4vmin;	
	font-family: 'Lato', sans-serif;
	font-weight: 300;

}

#quicklinks-table tr {
	height: 10vmin;
	cursor: pointer;
}

#quicklinks-table tr:hover {
	opacity: 0.6;
}

#quicklinks-table td {			
	vertical-align: middle;
}

#quicklinks-table img{
	width: 4vmin;
	display: table-cell;
}

.link-container {
	margin: 5%;
	display: table;
}

.link-icon {
	display: table-cell;
	vertical-align: middle;
}

.link-icon img {
	width: 4vmin;
}

.link-name {
	display: table-cell;
	font-size: 4vmin;
	font-family: 'Lato', sans-serif;
	vertical-align: middle;
}

#interests-container {
	background: #456;
	position: absolute;
	width:100%;
	height: 50%;
	top: 0;
	text-align: center;
	vertical-align: middle;
}

#interests-content {
	padding-top: 15%;
}

#quicklinks-container {
	background: #243;
	position: absolute;
	width:100%;
	height: 50%;
	bottom: 0;
	text-align: center;
}

#about-label-section {
	height: 10vh;
	text-align: center;
	background: #435;
}

#about-label {
	position: absolute;
	width: 100%;
	text-align: center;
	font-size: 2vw;
	font-family: 'Lato', sans-serif;
	color: #fff;
	top: 50%;
	-web-transform: translateY(-50%);
	transform: translateY(-50%);
}

#about-section {
	overflow: hidden;
	height: 50%;
}

#developer-label {
	position: absolute;
	z-index: 1;
	width: 100%;
	text-align: center;
	font-family: 'Source Code Pro', sans-serif;
	font-size: 1.7vw;
	margin-top: 5%;
	color: #fff;
}

.language-td {
	width: 15vw;
}

#bars-container {
	position: absolute;
	width: 80%;
	top: 20%;
	left: -5%;
}

#bars-container table{
	//float: right;
	margin-bottom: 2vh;
	float: right;
}

#skills td {
	//border: 2px solid #fff;
	color: #fff;
	vertical-align: middle;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	text-align: right;
	font-size: 80%;
}

#skills tr {
	height: 3vh;
}

.skills-language-name {
	width: 30px;
	overflow: hidden;
}

#skills {
	position: absolute;
	width: 40vw;
	height: 100%;
	left: 30vw;
	//background: #2779A7;
	background: url(../images/backgrounds/web_dev_small.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#developer-overlay {
	background: -webkit-linear-gradient(0deg, rgba(231, 242, 222, 0.8) 0%, rgba(93, 134, 116, 0.8) 50%, rgba(51, 85, 98, 0.8) 100%);
	position: absolute;
	width: 100%;
	height: 100%;
}

.skills-language-container {
	width: 100%;
	height: 1vh;
	//background: #948;
	border: 2px solid #fff;
	//padding: 3px;
	margin-top: 0.5vh;
}

.skills-percentage-bar {
	height: 100%;		
	background: #fff;
	width: 0;
	-webkit-transition: width 0.75s ease;
	-moz-transition: width 0.75s ease;
	transition: width 0.75s ease;
}

/*
#html-percentage {
	width: 95%;			
}

#javascript-percentage {
	width: 95%;			
}

#jquery-percentage {
	width: 55%;			
}

#php-percentage {
	width: 70%;			
}

#objectivec-percentage {
	width: 50%;			
}

#java-percentage {
	width: 95%;			
}

#c-percentage {
	width: 55%;			
}

#matlab-percentage {
	width: 30%;			
}

#git-percentage {
	width: 70%;			
}
*/

#about-left-container {
	position: absolute;
	height: 100%;
	width: 30vw;
	left: 0;
	background: #893;
}

#about-right-container {
	position: absolute;
	height: 100%;
	width: 30vw;
	right: 0;
	//background: #893;
	text-align: center;
	background-color: #fff;
	background: url(../images/backgrounds/connect.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

#bayarea-container {
	background: url(../images/backgrounds/golden_bridge.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	position: absolute;
	width:100%;
	height: 50%;
	top: 0;
	text-align: center;
}

#bayarea-content {
	position: absolute;
	top: 50%;
	width: 100%;
	margin: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;

	font-family: 'Marck Script', sans-serif;
	font-size: 3vw;
	color: #fff;
}		

#bayarea-content img {
	height: 9vh;
	vertical-align: middle;
}


#michigan-container {
	background: url(../images/backgrounds/michigan_stadium_small.jpg);
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	position: absolute;
	width:100%;
	height: 50%;
	bottom: 0;
}

#michigan-overlay {
	background: -webkit-linear-gradient(0deg, rgba(81, 209, 215, 0.4) 0%, rgba(56, 126, 199, 0.4) 50%, rgba(0, 43, 140, 0.4) 100%);
	position: absolute;
	width: 100%;
	height: 100%;
}

#michigan-content {
	position: absolute;
	top: 50%;
	width: 100%;
	margin: 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;

	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 1.4vw;
	color: #fff;
	white-space: nowrap;
}

#michigan-content img {
	position: absolute;
	height: 9vh;
	vertical-align: middle;
	left: 5%;
	margin-right: 5%;

	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

#michigan-content div {
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	right: 5%;
}

#michigan-content p {
	margin: 0;
}

.yellow-text {
	color: #FDCA1A;
}


/*  CONTACT SECTION */



#contact {
	width: 100%;
	height: 100%;
	//font-family: 'Lato', sans-serif;
}

#contact input {			
	font-size: 3vh;
	font-family: 'Lato', sans-serif;
	padding-left: 2%;
	outline: none;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

#email {
	position: absolute;
	height: 10%;
	width: 80%;
	right: 10%;
	top: 5%;
}

#subject {
	position: absolute;
	height: 10%;
	width: 80%;
	right: 10%;
	top: 20%;
}

#message {
	position: absolute;
	height: 45%;
	width: 80%;
	right: 10%;
	top: 35%;
	outline: none;
	padding: 2%;
	font-family: 'Lato', sans-serif;
	font-size: 2vh;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

#send {
	position: absolute;
	height: 10%;
	width:20%;
	right: 10%;
	bottom: 5%;
	font-family: 'Lato', sans-serif;
	font-size: 3vh;
	background-color: #4988FC;
	color: #fff;
	border: none;
	outline: none;
	cursor: pointer;
	-webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#send:hover {
	background-color: #3664B7;
}


#contact-section {
	background: url(../images/backgrounds/geometric_background.png);
	overflow: hidden;
}

#contact-header {
	position: absolute;
	width: 100%;
	left:0;
	top: 5%;
	text-align: center;
	font-size: 5vh;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: #fff;
}

#contact-table {			
	width: 100%;
	bottom: 0;
}

#contact-table tr {
	height: 20vh;
}

#contact-table td {
	width: 33%;
	text-align: center;
	cursor: pointer;
}

#contact-table td:hover {
	opacity: 0.7;
}

#contact-table td img {
	width: 3vw;
}

#email-thanks {
	position: absolute;			
	width: 70%;
	height: 60%;
	left: 15%;
	top: 20%;
	font-size: 5vh;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color: #4988FC;	
	padding-top: 10%;
	text-align: center;
	overflow: hidden;
}

#social-message {
	font-size: 4vh;
	color: #fff;
}


#envelope {
	position: absolute;
	background: #545454;
	width: 70%;
	height: 60%;
	left: 15%;
	top: 25%;
	-webkit-transition: left 2s ease;
	-moz-transition: left 2s ease;
	transition: left 2s ease;
}

#bottom-envelope {
	position: absolute;
	width: 104%;
	height: 102%;
	bottom: -2%;
	left: -2%;
	z-index: 9;
	//background-color: rgba(34,34,234, 0.5);
	background: url(../images/backgrounds/envelope_bottom2.png) no-repeat center center;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;			
}

#top-envelope {
	position: absolute;
	width: 104%;
	height: 70%;
	top: 0;
	left: -2%;
	z-index: 10;
	//background-color: rgba(34,34,234, 0.5);
	background: url(../images/backgrounds/envelope_top2.png) no-repeat center center;
	-webkit-background-size: 100% 100%;
	-moz-background-size: 100% 100%;
	-o-background-size: 100% 100%;
	background-size: 100% 100%;		
}

.invisible {
	visibility: hidden;
}

.start-down {
	-webkit-transform: perspective(400) rotateX(-90deg);
	-webkit-transform-origin: 50% 100%;
	-moz-transform: perspective(400) rotateX(-90deg);
	-moz-transform-origin: 50% 100%;
	transform: perspective(400) rotateX(-90deg);
	transform-origin: 50% 100%;
}

.start-up {
	-webkit-transform: perspective(400) rotateX(90deg);
	-webkit-transform-origin: 50% 0%;
	-moz-transform: perspective(400) rotateX(90deg);
	-moz-transform-origin: 50% 0%;
	transform: perspective(400) rotateX(90deg);
	transform-origin: 50% 0%;
}

.rotate-up {
	-webkit-animation: rotate-up-animation 0.75s ease 0s;
	-moz-animation: rotate-up-animation 0.75s ease 0s;
	-animation: rotate-up-animation 0.75s ease 0s;
}

.rotate-down {
	-webkit-animation: rotate-down-animation 0.75s ease 0s;
	-moz-animation: rotate-down-animation 0.75s ease 0s;
	animation: rotate-down-animation 0.75s ease 0s;
}

@-webkit-keyframes rotate-up-animation {
    from {
       -webkit-transform: perspective(400) rotateX(-90deg);
       -webkit-transform-origin: 50% 100%;
    }
    to {
       -webkit-transform: perspective(400) rotateX(0deg);
        -webkit-transform-origin: 50% 100%;
    }
}

@-webkit-keyframes rotate-down-animation {
    from {
       -webkit-transform: perspective(400) rotateX(90deg);
       -webkit-transform-origin: 50% 0%;
    }
    to {
       -webkit-transform: perspective(400) rotateX(0deg);
        -webkit-transform-origin: 50% 0%;
    }
}

@-moz-keyframes rotate-up-animation {
    from {
       -webkit-transform: perspective(400) rotateX(-90deg);
       -webkit-transform-origin: 50% 100%;
    }
    to {
       -webkit-transform: perspective(400) rotateX(0deg);
        -webkit-transform-origin: 50% 100%;
    }
}

@-moz-keyframes rotate-down-animation {
    from {
       -webkit-transform: perspective(400) rotateX(90deg);
       -webkit-transform-origin: 50% 0%;
    }
    to {
       -webkit-transform: perspective(400) rotateX(0deg);
        -webkit-transform-origin: 50% 0%;
    }
}

@keyframes rotate-up-animation {
    from {
       -webkit-transform: perspective(400) rotateX(-90deg);
       -webkit-transform-origin: 50% 100%;
    }
    to {
       -webkit-transform: perspective(400) rotateX(0deg);
        -webkit-transform-origin: 50% 100%;
    }
}

@keyframes rotate-down-animation {
    from {
       -webkit-transform: perspective(400) rotateX(90deg);
       -webkit-transform-origin: 50% 0%;
    }
    to {
       -webkit-transform: perspective(400) rotateX(0deg);
        -webkit-transform-origin: 50% 0%;
    }
}