/*
 * Author: Maximilian Stoiber
 */

/* General styles */

	body {
		margin: 0;
		background-color: #00C8C8;

		text-rendering: optimizelegibility;
		
		-webkit-tap-highlight-color:rgba(0,0,0,0);
		-webkit-text-size-adjust: none;
		-webkit-font-smoothing: antialiased;
		
		-moz-tap-highlight-color:rgba(0,0,0,0); 
		-moz-text-size-adjust: none;
		-moz-font-smoothing: antialiased;
		
		-ms-tap-highlight-color:rgba(0,0,0,0); 
		-ms-text-size-adjust: none;
		-ms-font-smoothing: antialiased;
	}

	html {
		overflow-x: hidden;
		-webkit-font-smoothing: antialiased;
	}



/* Typography */

	html { font-size: 62.5%!important; } 
	body { font-size: 18px; font-size: 1.8rem; } 
	h1 { font-size: 48px; font-size: 4.8rem; }
	h2 { font-size: 36px; font-size: 3.6rem; }
	h3 { font-size: 20px; font-size: 2.0rem; }
	p { font-size: 16px; font-size: 1.6rem; }
	button { font-size: 16px; font-size: 1.6rem;}

	p {
		font-family: "Roboto", sans-serif;
		font-weight: 300;
		text-align: left;
		padding-top: 0px;
		margin-top: 0px;
		line-height: 1.5em;
	}

	a {
		font-family: "Roboto", sans-serif;
		color: inherit;
		text-decoration: underline;
	}

	a:hover {
		color: rgba(0,200,200, 0.75);
	}



/* Layout */

	.container {
		overflow: hidden;
		background-color: #000;

		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
	}

	header {
		height: 60px;
		position: relative;
		background-color: transparent;
		margin-top: -15px;
	}

	header h1 {
		color: #0C797B;
		text-align: left;
		font-size: 27px;
		line-height: 60px;
		font-weight: 700;
		padding-left: 20px;
		padding-top: 0;
	}

	.burger {
		position: absolute;
		float: left;
		padding: 10px;
		top: 4px;
		left: 10px;
		
		display: none;
	}

	.burger li {
		width: 30px;
		height: 4px;
		background-color: #fff;
		border-radius: 3px;
		margin: 5px 0;
	}

	.burger.open li {background-color: #d9dde1;}

	nav {
		position: absolute;
		width: 100%;
		top: 0;
		right: 0;
		text-align: center;
	}

	nav ul {
		display: inline-block;
		padding-left: 0;
	}

	nav li {
		display: inline-block;
	}

	nav li a {
		font-size: 16px;
		color: #0C797B;
		padding: 0 30px;
		margin-top: -18px;
		display: block;
		line-height: 60px;
		font-weight: 300;
	}

	nav li a:hover,
	nav li a.active {
		color: #fff;
	}

	nav .fa {
		padding-right: 7px;
	}

	section {
		padding: 20px 0;
		border-top: 1px solid #d6d6d6;
		transform: skewY(-3deg);
	}

	section:first-child {
		border-top: none;
	}

	section h1 {
		text-align: center;
	}

	.grid-container {
		transform: skewY(3deg);
		padding-bottom: 3em;
	}



/* Headings */

	h1 {
		margin: 0.5em 0;
		font-family: "Roboto", sans-serif;
		font-weight: 700;
		line-height: 1em;
		text-align: left;
		padding-top: 0.5em;
	}

	h2 {
		font-family: 'Roboto', sans-serif;
		font-weight: 300;
		margin: 0;
		padding-top: 0.5em;
		margin-top: 0.5em;
		text-align: left;
		line-height: 1.5em;
	}

	h3 {
		font-family: 'Roboto', sans-serif;
		font-weight: 100;
		margin-top: 0;
		margin-bottom: 0.5em;
	}



/* Buttons */

	/* General Buttons
	 * r: 0.69523809523
	 * g: 0.69849246231
	 * b: 0.69565217391 */

	button {
		position: relative;
		display: inline-block;
		border-radius: 5px;
		border: none;
		padding: 1.2rem 1.8em;
		background: #69c773;
		box-shadow: 0 6px #498b50;
		color: white;
		font-weight: 300;
		margin: 0;
		vertical-align: middle;
		text-align: center;
		margin-bottom: 10px;
	}

	button:hover, button:focus {
		opacity: 0.75;
		cursor: pointer;
		box-shadow: 0 4px #498b50;
		top: 2px;
	}

	button:active {
		opacity: 1;
		box-shadow: 0 0 #498b50;
		top: 6px;
	}
	/* Button Colors */

	.btn-blue {
		background-color: #00C8C8;
	}

	.btn-green {
		background-color: #45C7AB;
		border-color: rgb(48, 139, 119);
	}

	.btn-dis {
		background-color: rgb(192, 192, 192);
		border-color: rgb(133, 134, 134);
	}

	.btn-dis:hover {
		cursor: not-allowed;
		opacity: 1;
	}

	/* Call To Action Button */

	.btn-callToAction {
		font-size: 20px;
		font-size: 2.0rem;
	}

	.grid-100 {
		text-align: center;
	}



/* Frontpage */

	#frontpage {
	 	transform: skewY(0deg);
		background-color: #00C8C8;
		position: relative;
		z-index: 0;
		margin-bottom: -60px;
		padding-top: 115px;
		padding-bottom: 155px;
	}

	#frontpage .grid-container {
		transform: skewY(0deg);
		text-align: center;
	}

	.fptext {
		color: white;
		margin: 0;
		text-align: center;
		padding: 0;
	}

	.title {
		font-family: 'Roboto', sans-serif;
		font-weight: 900;
		margin-bottom: 0;
		text-decoration: none;
		font-size: 60px;
		font-size: 6.0rem;
	}

	.subtitle {
		font-family: 'Roboto', sans-serif;
		font-weight: 100;
		margin-top: 0.25em;
		color: white;
		line-height: 1em;
	}

	li a {
		text-decoration: none!important;
	}



/* Main Content Area */

	.skills {
		background-color: #FF6100;
		color: #FFF;
		padding-top: 90px;
		padding-bottom: 115px;
	}

	.cyan {
		background-color: #00C8C8;
		color: #fff;
	}

	.skills .grid-container {
		position: relative;
		padding-bottom: 0;
	}

	.skills h1 {
		text-align: left;
		font-weight: 700;
		margin-bottom: 10px;
	}

	.skills h3 {
		margin-bottom: 20px;
	}

	#process {
		background-color: #00C8C8;
		color: white;
	}

	#contact {
		background-color: #FF6100;
		color: white;
		position: relative;
		z-index: 1;
	}

	#contact h1 {
		margin-bottom: 0;
	}

	#contact h3 {
		text-align: center;
		margin-top: 0;
		padding-top: 0;
	}

	*, *:before, *:after {
		box-sizing: border-box;
	}

	.field {
		margin: 1em 0;
	}

	label {
		display: block;
		margin-top: 2em;
		margin-bottom: 0.5em;
		color: #fff;
	}

	input {
		color: #000;
		width: 100%;
		padding: 0.5em 0.5em;
		font-size: 1.2em;
		border-radius: 3px;
		border: 1px solid #D9D9D9;
	}

	textarea {
		color: #000;
		width: 100%;
		height: 200px;
		padding: 0.5em 0.5em;
		font-size: 1.2em;
		border-radius: 3px;
		border: 1px solid #D9D9D9;
	}



/* Footer */

 	/* General Footer Styling */

	#footer {
		background-color: #00C8C8;
		padding-top: 1.5em;
		transform: skewY(0deg);
		position: relative;
		z-index: 0;
		padding: 125px 100px 35px 100px; /* instead of padding-top 100*/
		margin-top: -75px;
	}

	.end {
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		position: relative;
		z-index: 0;
	}

	.end ul {
		-webkit-padding-start: 0px;
		padding-left: 0px;
		margin-top: 0;
		margin-bottom: 0;
		padding-bottom: 1em;
	}

	.end ul li {
		display: inline;
		font-size: 75%;
		padding-right: 5px;
	}

	/* Social Buttons */

	.fa-black {
		color: white;
		transition:.3s;
	}


	.fa-envelope:hover {
		color: #FF6100;
	}

	.fa-facebook:hover {
		color: #3B5998;
	}

	.fa-twitter:hover {
		color: #4099FF;
	}

	.fa-google-plus:hover {
		color: #dd4b39;
	}

	.fa-github:hover {
		color: #000;
	}

	.fa-gavel:hover {
		color: #FF6100;
	}


/* Timeline */

	.timeline {
		list-style: none;
		padding: 20px 0 20px;
		position: relative;
	}

	.timeline:before {
		top: 10%;
		bottom: 0;
		position: absolute;
		content: " ";
		width: 3px;
		background-color: #eeeeee;
		left: 50%;
		margin-left: -1.5px;
		height: 65%;
	}

	.timeline > li {
		margin-bottom: 20px;
		position: relative;
	}

	.timeline > li:before,
	.timeline > li:after {
		content: " ";
		display: table;
	}

	.timeline > li:after {
		clear: both;
	}

	.timeline > li:before,
	.timeline > li:after {
		content: " ";
		display: table;
	}

	.timeline > li:after {
		clear: both;
	}

	.timeline > li > .timeline-panel {
		width: 46%;
		float: left;
		border: 1px solid #0C797B;
		border-radius: 2px;
		padding: 0px 36px 36px 36px;
		position: relative;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.350);
		background-color: #0C797B;
	}

	.timeline > li > .timeline-panel:before {
		position: absolute;
		top: 26px;
		right: -15px;
		display: inline-block;
		border-top: 15px solid transparent;
		border-left: 15px solid #0C797B;
		border-right: 0 solid #0C797B;
		border-bottom: 15px solid transparent;
		content: " ";
	}

	.timeline > li > .timeline-panel:after {
		position: absolute;
		top: 27px;
		right: -14px;
		display: inline-block;
		border-top: 14px solid transparent;
		border-left: 14px solid #0C797B;
		border-right: 0 solid #0C797B;
		border-bottom: 14px solid transparent;
		content: " ";
	}

	.timeline > li > .timeline-badge {
		color: #fff;
		width: 50px;
		height: 50px;
		line-height: 50px;
		font-size: 1.4em;
		text-align: center;
		position: absolute;
		top: 16px;
		left: 50%;
		margin-left: -25px;
		background-color: #0C797B;
		z-index: 100;
		border-top-right-radius: 50%;
		border-top-left-radius: 50%;
		border-bottom-right-radius: 50%;
		border-bottom-left-radius: 50%;
	}

	.timeline > li.timeline-inverted > .timeline-panel {
		float: right;
	}

	.timeline > li.timeline-inverted > .timeline-panel:before {
		border-left-width: 0;
		border-right-width: 15px;
		left: -15px;
		right: auto;
	}

	.timeline > li.timeline-inverted > .timeline-panel:after {
		border-left-width: 0;
		border-right-width: 14px;
		left: -14px;
		right: auto;
	}

	.timeline-title {
		margin-top: 0;
		color: inherit;
	}

	.timeline-body > p,
	.timeline-body > ul {
		margin-bottom: 0;
	}

	.timeline-body > p + p {
		margin-top: 5px;
	}



@media (max-width: 767px) {

	.skills {
		color: #FFF;
	}

	#process {
		padding-top: 30px;
	}

	.timeline > li.timeline-inverted > .timeline-panel {
		width: 40%;
		float: left;
		border: 1px solid #0C797B;
		border-radius: 2px;
		padding: 20px;
		position: relative;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.350);
		width: 90%;
	}

	.timeline > li.timeline-inverted > .timeline-panel:before {
		position: absolute;
		top: 26px;
		right: -15px;
		display: inline-block;
		border-top: 15px solid transparent;
		border-left: 15px solid #00C8C8;
		border-right: 0 solid #00C8C8;
		border-bottom: 15px solid transparent;
		content: " ";
	}

	.timeline > li.timeline-inverted > .timeline-panel:after {
		position: absolute;
		top: 27px;
		right: -14px;
		display: inline-block;
		border-top: 14px solid transparent;
		border-left: 14px solid #00C8C8;
		border-right: 0 solid #00C8C8;
		border-bottom: 14px solid transparent;
		content: " ";
	}

	.timeline:before {
		left: 95%;
	}

	.timeline > li > .timeline-badge {
		left: 95%;
	}

	.timeline > li > .timeline-panel {
		width: 90%;
	}

	nav ul {
		padding-left: 0;
	}

	nav ul li {
		font-size: 11px;
		font-size: 1.1rem;
	}

	.grid-70 {
		margin-top: 0;
	}

	header {
		height: 60px;
		z-index: 2;
		background-color: transparent;
		
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		
			/* starting point */
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}

	header h1 {
		color: #ffffff;
		text-align: center;
		padding-left: 0;
		display: block;
	}

	.burger {
		display: block;
		list-style-type: none;
	}


	/*	Nav Drawer Layout  */

	nav {
		position: relative;
		text-align: left;
	}

	nav ul {
		height: 100%;
		width: 100%;
		overflow-y: auto;
	}

	nav li {
		display: block;
		float: none;
	}

	nav li a {
		padding: 22px 25px;
		letter-spacing: 3px;
		font-size: 14px;
	}

	nav li a.logo {
		display: none;
	}

	nav li a.active {
		color: #fff;
		background-color: #141e23;
	}

	nav li a:hover {
		color: #fff;
		background-color: #19252c;
	}

	nav li:first-child a.active,
	nav li:first-child a:hover 
	{border-radius: 10px 0 0 0;}

	.header-section {margin-top: 60px;}


	/* NAVIGATION ANNIMATION */

	nav {
		width: 93%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		margin: 0;
		background-color: #1d2d35;
		border-radius: 8px;
		
		/* starting point */
		opacity: .3;
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-moz-transform: translate3d(5%,0,0)scale(.97);
		transform: translate3d(5%,0,0)scale(.97);
	}

	nav ul {
		margin-top: 0;
	}

	nav li a {
		margin-top: 0;
	}

	/*Nav Expanding Open Effect*/

	nav.open {
		opacity: 1;

		-webkit-transform: translate3d(0,0,0)scale(1);
		-webkit-animation: slideIn .35s ease-in-out;
		
		-moz-transform: translate3d(0,0,0)scale(1);
		-moz-animation: slideIn .35s ease-in-out;
		
		transform: translate3d(0,0,0)scale(1);
		animation: slideIn .35s ease-in-out;
	}
	@-webkit-keyframes slideIn {
		0%       {opacity: .3;
					-webkit-transform: translate3d(5%,0,0)scale(.97);}
		100%  {opacity: 1;
					-webkit-transform: translate3d(0,0,0)scale(1);}
	}
	@-moz-keyframes slideIn {
		0%      {opacity: .3;
					-moz-transform: translate3d(5%,0,0)scale(.97);}
		100%  {opacity: 1;
					-moz-transform: translate3d(0,0,0)scale(1);}
	}
	@keyframes slideIn {
		0%      {opacity: .3;
					transform: translate3d(5%,0,0)scale(.97);}
		100%  {opacity: 1;
					transform: translate3d(0,0,0)scale(1);}
	}

	/*Nav Shrinking Closed Effect*/

	nav.close {
		opacity: .3;
		
		-webkit-transform: translate3d(5%,0,0)scale(.97);
		-webkit-animation: slideOut .3s ease-in-out;
		
		-moz-transform: translate3d(5%,0,0)scale(.97);
		-moz-animation: slideOut .3s ease-in-out;
		
		transform: translate3d(5%,0,0)scale(.97);
		animation: slideOut .3s ease-in-out;
	}
	@-webkit-keyframes slideOut {
		0%      {opacity: 1;
					-webkit-transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					-webkit-transform: translate3d(5%,0,0)scale(.97);}
	}
	@-moz-keyframes slideOut {
		0%      {opacity: 1;
					-moz-transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					-moz-transform: translate3d(5%,0,0)scale(.97);}
	}
	@keyframes slideOut {
		0%      {opacity: 1;
					transform: translate3d(0,0,0)scale(1);}
		100%  {opacity: .3;
					transform: translate3d(5%,0,0)scale(.97);}
	}



	/* CONTENT ANNIMATION */

	.content {
		/* starting point */
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		z-index: 1;
	}

	/*Content Sliding Open Effect*/

	header.open,
	.content.open 
	{   
		-webkit-transform: translate3d(240px,0,0);
		-webkit-animation: open .5s ease-in-out;
		
		-moz-transform: translate3d(240px,0,0);
		-moz-animation: open .5s ease-in-out;
		
		transform: translate3d(240px,0,0);
		animation: open .5s ease-in-out;
	}
	@-webkit-keyframes open {
		0%      {-webkit-transform: translate3d(0,0,0);}
		70%    {-webkit-transform: translate3d(260px,0,0);}
		100%  {-webkit-transform: translate3d(240px,0,0);}
	}
	@-moz-keyframes open {
		0%      {-moz-transform: translate3d(0,0,0);}
		70%    {-moz-transform: translate3d(260px,0,0);}
		100%  {-moz-transform: translate3d(240px,0,0);}
	}
	@keyframes open {
		0%      {transform: translate3d(0,0,0);}
		70%    {transform: translate3d(260px,0,0);}
		100%  {transform: translate3d(240px,0,0);}
	}

	/*Content Sliding Closed Effect*/

	header.close,
	.content.close 
	{
		-webkit-transform: translate3d(0,0,0);
		-webkit-animation: close .3s ease-in-out;
		
		-moz-transform: translate3d(0,0,0);
		-moz-animation: close .3s ease-in-out;
		
		transform: translate3d(0,0,0);
		animation: close .3s ease-in-out;
	}
	@-webkit-keyframes close {
		0%      {-webkit-transform: translate3d(240px,0,0);}
		100%  {-webkit-transform: translate3d(0,0,0);}
	}
	@-moz-keyframes close {
		0%       {-moz-transform: translate3d(240px,0,0);}
		100%  {-moz-transform: translate3d(0,0,0);}
	}
	@keyframes close {
		0%       {transform: translate3d(240px,0,0);}
		100%  {transform: translate3d(0,0,0);}
	}
}