html, body {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;

		
}

html.is-touch {
		height: 100vh;
		overflow: hidden;
		
	}

		html.is-touch #wrapper {
			-webkit-backface-visibility: hidden;
			-webkit-overflow-scrolling: touch;
			-webkit-transform: translate3d(0, 0, 0);
			height: 100vh;
			overflow: auto;
			
			-webkit-background-size: cover;
  		 	-moz-background-size: cover;
   			-o-background-size: cover;
   			 background-size: cover;
			background-position:center;
		}

/* Container for fullpage bg-images */
#bgImageContainer {
	width: 100%;
	height: 100%;
	position: fixed;
	-webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-attachment:fixed;
	background-position:center;
	top:0px;
	left:0px;

}

.slide {
	position:relative;
	width:100%;
}

/* Reset links behavior*/
a:link, a:hover {
	text-decoration:none;
}

/* Header section - first page */

#header {
    height: 100vh;
    position: relative;
    text-align: center;
}

	section header {
		background:transparent;
		text-align:center;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height:100%;	
		margin:0;
		padding:0;

	}

	@media (min-width:768px){
		section header {
			top: 50%;
			left: 0px;
			margin-top:-230px;	
			position: fixed;	
		}
	}
	
	h1.header-title-1 {
		font-family: 'Fjalla One', sans-serif;
		color:#fff;
		font-size:15vmin;
		width:auto;
	}

	@media (min-width:768px){
		h1.header-title-1 {
			font-size:120px;
			}
		}

		/* White line after text */
		h1.header-title-1:after {
			background: #fff;
			content: '';
			display: block;
			height: 1px;
			margin: 10px auto;
			position: relative;
			width: 98%;
		}
			
		h2.header-title-2 {
			font-family: 'Fjalla One', sans-serif;
			color:#fff;
			font-size:8vmin;
			width:auto;
		}
		
		@media (min-width:768px){
			h2.header-title-2 {
				font-size:65px;
			}
		}

		@media( max-height: 600px ) {
			
			

			h1.header-title-1 {
				font-size:15vmin;
			}

			h2.header-title-2 {
			font-size:8vmin;
		}
		}

		
	.button  {
		margin:0 auto;
		border: 2px solid #01c9c7;
		width: 100%;
		height:auto;
		padding:8% 0 7% 0;
		line-height:0px;
		border-radius:30px;
		color:#01c9c7;
		font-family: 'Fjalla One', sans-serif;
		font-size:5vmin;
		cursor:pointer;
		display:block;
	}

	.button:hover, .button:active {
			text-decoration:none;
			border: 2px solid #766fae !important;	
			color:#766fae !important;		
		}

	.button:focus {color: auto !important;	}
	
	@media (min-width:768px){	
		.button  {
			border: 4px solid #01c9c7;
			width: 75%;
			font-size:33px;
		}
	
	
		.button:hover, .button:active{
			border: 4px solid #766fae !important;		
			}
		}

/* Some basics styles for anchorlinks and container bottom lines */	
	
	.anchor {
		position:relative;
		float:left;
		width:100%;
		height:auto;
		display:block;
		color:#01c9c7;
		padding-top:10px;
		background:#fff;
		opacity:0.98;
	}		
		
	.line {
			position:relative;
			float:left;
			border-top:1px solid #ccc;
			width:100%;
			height:1px;
			}	


	/* Content and page styling */
	.content-wrapper {
		 position: absolute;
		 bottom: 0; 
		 width:100%;
	
		}
		
	.content-start {
		position:relative;
		float:left;
		margin:0 auto;
		padding:32px;
		background:#fff;
		width:100%;
		max-width:767px;
		opacity:0.98;
	}
		
	.content {
		height:100vh;
		position:relative;
		float:left;
		margin:0 auto;
		padding:0px 22px;
		background:#fff;
		width:100%;
		max-width:767px;
		opacity:0.98;
	}

	
		
	@media (min-width:768px){
		.content-start {
			position:relative;
			float:left;
			margin:0 auto;
			padding:52px;
			background:#fff;
			width:100%;
			opacity:0.98;
		}
	
		
		.content {
			height:100vh;
			position:relative;
			float:left;
			margin:0 auto;
			padding:0px 52px;
			background:#fff;
			width:100%;
			opacity:0.98;
		}
	}
		
	.content.page-one, .content.page-two, .content.page-tree   {
		padding-top:10px;
		padding-bottom:30px;
	}

	.content.page-four {
		padding-top:30px;
		padding-bottom:60px;
		min-height:auto !important;
	}
			
	.content.footer {
		padding-top:60px;
		padding-bottom:30px;
		margin-bottom:60px;
		margin-top:30px;
		min-height:auto !important;
	}
		
		
	@media (min-width:768px){
			
		.content.page-one, .content.page-two, .content.page-tree  {
			padding-top:30px;
			padding-bottom:100px;
		}
	
	/*	.content.page-two {
			padding-top:150px;
			padding-bottom:150px;
		}
			
		.content.page-tree {
			padding-top:80px;
			padding-bottom:97px;
		} */
			
		.content.page-four {
			padding-top:30px;
			padding-bottom:60px;
			min-height:auto !important;
			}			
	}
		
	.page .content  {
		position:relative;
		float:left;
		font-family: 'Muli', sans-serif;
		font-size:14px;
		line-height:22px;
		color:#666;
		width:100%;
		height:100%;
		min-height:100vh;
	}

	@media (min-width:768px){
		.page .content  {
			position:relative;
			float:left;
			font-family: 'Muli', sans-serif;
			font-size:18px;
			line-height:30px;
			color:#666;
			width:100%;
			height:100%;
			min-height:100vh;
		}
	}
		
	.page .content p {
		padding-bottom:13px;
	}
			
	.page .content h1{
		padding-bottom:13px;
		font-size:18px;
		line-height:25px;
	}
			
	.arrow-button {
		width:118px;
		height:auto;
		margin:0 auto;
		display:table;
	}
		
		.arrow-button:hover {
			opacity:0.5;
		}

	@media (min-width:768px){
		.page .content   {			
			font-size:23px;
			line-height:35px;
		}
				
		.page .content h1{
			padding-bottom:13px;
			font-size:41px;
			line-height:41px;
		}
				
		.page .content p {
			padding-bottom:13px;
		}
	}
			
	.arrow-button img {
		display:block;
		width:50%;
		height:auto;
		margin:auto;
		cursor:pointer;
	}
			
	@media (min-width:768px){
		.arrow-button img {
			display:block;
			width:auto;
			height:auto;
			margin:auto;
			cursor:pointer;
		}
	}
		
/* Skills */

	.progress-bar {
		font-family: 'Muli', sans-serif !important;
		font-weight:bold !important;
		font-size:12px !important;
		text-align:left !important;
		overflow:hidden !important;
		line-height: 30px !important;
	}
		
	.skill {
		position:relative;
		float:left;
		width:100%;
		height:36px;
		background-color:#ccc;
		color:#fff;
		font-family: 'Muli', sans-serif !important;
		font-weight:bold !important;
		font-size:12px !important;
		margin-bottom:10px;
		margin-top:5px;
	}
		
	@media (min-width:768px){
		.progress-bar {
			font-size:19px !important;
		}
		
		.skill   {			
			font-size:19px !important;
			height:38px;
		}
	}
		
	.last {
		margin-bottom:40px;
	}
		
	.margin-button {
		padding-top:10px;
	}
		
	.web-design {
		background-color:#01c9c7;
		border-right:2px solid #fff;
		padding:3px 15px 2px 15px;
		height:36px;
		overflow:hidden;
		width:0;
	}
			
		.web-design:after {
			content:"Web-grafiikat";
		}
	
		.ui-design {
			background-color:#01c9c7;
			width:0;
			border-right:2px solid #fff;
			padding:3px 15px 2px 15px;
			height:36px;
			overflow:hidden;
		}
				
			.ui-design:after {
				content:"UI-suunnittelu";
			}
			
		.web-building {
			background-color:#01c9c7;
			width:0;
			border-right:2px solid #fff;
			padding:3px 15px 2px 15px;
			height:36px;
			}
				
				.web-building:after {
					content:"Web-Taitto";
				}
			
		.html {
			background-color:#01c9c7;
			width:0;
			border-right:2px solid #fff;
			padding:3px 15px 2px 15px;
			height:36px;
		}
			
		.css {
			background-color:#01c9c7;
			width:0;
			border-right:2px solid #fff;
			padding:3px 15px 2px 15px;
			height:36px;
		}
			
		.jquery {
			background-color:#01c9c7;
			width:0;
			border-right:2px solid #fff;
			padding:3px 15px 2px 15px;
			height:36px;
		}
			
		.photoshop {
			background-color:#01c9c7;
			width:0;
			border-right:2px solid #fff;
			padding:3px 15px 2px 15px;
			height:36px;
		}
			
		.illustrator {
			background-color:#01c9c7;
			width:0;
			border-right:2px solid #fff;
			padding:3px 15px 2px 15px;
			height:36px;
		}
			
		@media (min-width:768px){
				
			.web-design {
				background-color:#01c9c7;
				border-right:2px solid #fff;
				padding:5px 15px 2px 15px;
				height:38px;
				width:0;
			}
			
				.web-design:after {
					content:"Verkkosivustojen graafinen suunnittelu";
				}
			
			.ui-design {
				background-color:#01c9c7;
				border-right:2px solid #fff;
				padding:5px 15px 2px 15px;
				height:38px;
				width:0;
			}
				
				.ui-design:after {
					content:"Käyttöliittymäsuunnittelu";
					overflow:hidden;
				}
			
			.web-building {
				background-color:#01c9c7;
				border-right:2px solid #fff;
				padding:5px 15px 2px 15px;
				height:38px;
				width:0;
			}
				
				.web-building:after {
					content:"Verkkosivustojen ulkoasun taitto";	
				}
			
			.html {
				background-color:#01c9c7;
				width:0;
				border-right:2px solid #fff;
				padding:5px 15px 2px 15px;
				height:38px;
			}
			
			.css {
				background-color:#01c9c7;
				width:0;
				border-right:2px solid #fff;
				padding:5px 15px 2px 15px;
				height:38px;
			}
			
			.jquery {
				background-color:#01c9c7;
				width:0;
				border-right:2px solid #fff;
				padding:5px 15px 2px 15px;
				height:38px;
			}
			
			.photoshop {
				background-color:#01c9c7;
				width:0;
				border-right:2px solid #fff;
				padding:5px 15px 2px 15px;
				height:38px;
			}
			
			.illustrator {
				background-color:#01c9c7;
				width:0;
				border-right:2px solid #fff;
				padding:5px 15px 2px 15px;
				height:38px;
			}
		}
			
/* Job information */

	.job-row {
		position:relative;
		float:left;
		width:100%;
		height:auto;
		padding-bottom:7px;
		padding-top:8px;
	}
	
		h2.job-title {
			font-family: 'Muli', sans-serif;
			font-size:16px;
			line-height:20px;
			margin-top:0px;
			margin-bottom:0px;
		}

		h3.company {
			font-family: 'Muli', sans-serif;
			font-size:12px;
			line-height:20px;	
			margin-top:0px;
		}

		@media (min-width:768px){
			
			.job-row {
				position:relative;
				float:left;
				width:100%;
				height:auto;
				padding-bottom:13px;
				padding-top:8px;
			}
					
			h2.job-title {
				font-family: 'Muli', sans-serif;
				font-size:30px;
				line-height:35px;
				margin-top:0px;
			}

			h3.company {
				font-family: 'Muli', sans-serif;
				font-size:18px;
				line-height:30px;	
				margin-top:0px;
			}
		}		

/*Footer */

	.icon-wrapper {
		position:relative;
		float:left;
		width:100%;
		margin-bottom:20px;
	}
	
		.icon-img {
			position:relative;
			float:none;
			max-width:30px;
			max-height:30px;
			margin:0 auto;
			padding-left:0px;
		}
		
			.icon-img img{
				width:100%;
				height:50%;
			}
	
		.icon-texts {
			position:relative;
			float:left;
			margin-left:0px;
			width:100%;
			margin-top:10px;
			margin-bottom:10px;
			text-align:center;	
		}
		
			.icon-link a{
				color:#766fae !important;
				font-family: 'Muli', sans-serif;
				font-size:14px;
			
			}

				.icon-link a:hover{
				color:#01c9c7 !important;
			}

			.icon-link {
				position:relative;
				font-size:14px;
				margin-top:0px;
				line-height:20px;
			}
			
			.icon-text {
				position:relative;
				float:left;
				font-size:14px;
				margin-top:0px;
				line-height:20px;
				width:100%;
				}
				
				@media (min-width:768px){
					
					.icon-wrapper {
						position:relative;
						float:left;
						width:100%;
						margin-bottom:50px;
					}
						
					.icon-img {
						margin-left:0%;
						float:left;
						width:100%;
						height:100%;
						}
					
					.icon-img img{
						width:60px;
						height:60px;	
					}
	
					.icon-texts {
						width:500px;
						margin-left:50px;
						margin-top:5px;
						margin-bottom:0px;
						text-align:left;
					}
					
					.icon-link a{
						font-size:23px;
					}
			
					.icon-link {
						float:left;
						font-size:18px;
					}
			
					.icon-text {
						font-size:18px;
					}
				}