*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html{
	font-size: 16px;
}
body{
	opacity: 0;
	transition: 1s;
	border-left:solid 5px #7e347e;
	border-right:solid 5px #7e347e;
	background: white;
	font-family: 'Exo 2', sans-serif;
	font-weight: 200;
	color: #424242;
}
a{
	text-decoration: none;
	color: #6f336f;
	transition: .5s;
}
a:hover{
	color: #7bbe5e;
}
h2{
	margin-bottom: .5rem;
	color: #6f336f;
}
h3{
	font-size: 1.3em;
	margin-bottom: .5rem;
	color: #6f336f;
}
.container{
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  justify-content: center;
}
.subsection{
	width: 100%;
	padding: .5rem .5rem;
}

.section>.fp-tableCell{
	opacity: 0;
	transition: .5s;
	transform: translate(0,100px);
}
.section.active>.fp-tableCell {
	transition-delay: .5s;
	opacity: 1;
	transform: translate(0);
}
.section.active.loaded>.fp-tableCell {
	transition-delay: .5s;
	opacity: 1;
	transform: translate(0);
}

#slider>.fp-slides, div.fp-controlArrow.fp-prev, div.fp-controlArrow.fp-next{
	opacity: 0;
	transition: .5s;
	transition-delay: .5s;
	transform: translate(0,100px);
}
#photo{
	width: 40vw;
	min-width: 150px;
	height: 40vw;
	min-height: 150px;
	max-width: 260px;
	max-height: 260px;
	margin-bottom: 1rem;
	background: url(../images/profile-photo-min.png);
	background-size: contain;
}
#headline{
	border-top: solid .2em lightgray;
	width: 80vw;
	color: #6f336f;
	font-size: 1rem;
	padding: 0 .5rem;
	overflow: hidden;
	text-align: center;
}
#headline h2{	
	width: 100%;
	font-weight: 100;
}
#headline h1{
	font-family: 'Teko', sans-serif;
	font-weight: 700;
	letter-spacing: -1px;
	line-height: 1em;
	width: 100%;
}
#headline p{
	margin-bottom: 0;
	text-align: center;
	color: #424242;
}
a.arrow{
	position: absolute;
	bottom: 1rem;
	text-align: center;
	font-size: 1.2rem;
	color: #424242;
	transform: translate(0);
	left: 0;
	right: 0;
	z-index: 100;
}
a.arrow p{
	text-align: center;
}
a.arrow i{
	animation: bounce .7s infinite alternate ease-in;
	color: #afafaf;
}
@keyframes bounce {
    0%   {transform: translate(0)}
    100% {transform: translate(0,2vh)}
}
/* Navigation background color*/
#fp-nav ul li a span, .fp-slidesNav ul li a span{
	background: #afafaf;
}
#summary{
	width:90%;
}
.section{
	width: 100%;
	font-size: 1rem;
	padding: 5px;
}

.section p{
	text-align: justify;
}
.section .small-icons{
	font-weight: 400;
	margin-bottom: .1vh;
}
.randoms .section{
	font-size: .95rem;
}
#skills{
	text-align: center;
}
#skills img{
	margin-top: .5rem;
	width: 75%;
	margin: auto;
}
.slider h2{
	position: absolute;
}
div.fp-controlArrow.fp-prev {
    left: 5vw;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #e4e4e4 transparent transparent;
    border-radius: 50px;
		opacity: 0;
		transition: .5s;
		z-index: 100;
		transform: translate(0,100px);
		display: none;
}
div.fp-controlArrow.fp-next {
    right: 5vw;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #e4e4e4;
		border-radius: 50px;
		opacity: 0;
		transition: .5s;
		z-index: 100;
		transform: translate(0,100px);
		display:none;
}
#projectsH{
  position: absolute;
  color: #e4e4e4;
  left:0;
	right:0;
  top: 1em;
	text-align: center;
}
#slider.active>.fp-slides ,#slider.active>div.fp-controlArrow.fp-prev, #slider.active>div.fp-controlArrow.fp-next, #slider.active>.arrow{
	transition: .5s;
	transition-delay: .5s;
	opacity: 1;
	transform: translate(0);
}
.slide .fp-tableCell{
	vertical-align: top;
	padding-top: 2.5em;
}
.container{
	max-width: 1050px;
	margin: auto;
}
.project p{
	text-align: justify;
}
.project-img{
	color: #6f336f;
	padding: .5rem;
}
.project-img a{
	font-weight: 400;
	text-decoration: none;
}
.project-img img{
	width: 100%;
}
.crossfade {
  position:relative;	
	width: 100%;
	padding: 0;
}
.crossfade img.bottom{
  margin: 0;
}
.crossfade img.top{
	position: absolute;
	left: 0;
	right: 0;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
  transition: opacity .5s ease-in-out;
}
.crossfade img.transparent {
opacity:0;
}
.randoms .crossfade{
	width: 72%;
	margin: auto;
}
/*
navigation dots on the right 
*/

.fp-slidesNav.bottom{
	bottom: 4em;
	text-align: center;
	width: 40%;
	margin: auto;
}
#get-in-touch{
	padding-top:.5rem;
	padding-left: .5rem;
	padding-right: .5rem;
	padding-bottom: 0;
}
#get-in-touch h3{


}
#get-in-touch p{
	text-align: justify;
	margin-bottom: .5em;
}
#mailform{
	color: #6f336f;
	padding: 0 1rem;

}
#mailform h3{
	
}
#mailform img{
	margin-top: 2vh;
	width: 100%;
}
.contact.active>.fp-tableCell {
	transition-delay: .5s;
	opacity: 1;
	transform: translate(0);
}
#fp-nav{
	display: none;
}

@media screen and (max-width: 330px) {
  .slide p, .contact p{
    font-size: .8rem;
  }
	.randoms p {
		font-size: .75rem;
	}
	#mailform{
		padding: 0 1rem;
	}	
}
@media screen and (max-width: 360px) {
  .slide p{
    font-size: .9rem;
  }
}
@media screen and (max-width: 390px) {
  .slide p{
    font-size: .95rem;
  }
	#message{
		height: 8rem;
	}
}
@media screen and (max-width: 479px) {
  .slide .fp-tableCell{
		vertical-align: top;
		margin-top: .5rem;
		padding-top: 0;
	}
	.summary-skills .fp-tableCell{
		vertical-align: top;
		margin-top: .5rem;
	}
	.contact .fp-tableCell{
		vertical-align: top;
		margin-top: .5rem;
	}
	#projectsH{
		opacity: 0;
	}
	.fp-slidesNav.bottom{
		bottom:3.1rem;
	}
	.crossfade img.curriculum.top{
		display: none;
	}
	.hideMobile{
		display: none;
	}
}
@media screen and (min-width: 480px) {
  .project-img{
    width: 90%;
  }
	
}
@media screen and (min-width: 650px) {
  .project-img{
    width: 80%;
  }
	#skills{
		width:65%;
	}
	.contact .container{
		max-width: 500px;
	}
	div.fp-controlArrow.fp-next, div.fp-controlArrow.fp-prev{
		display: block;
	}
	#fp-nav{
		display: block;
	}
	
}
@media screen and (min-width: 800px) {
  .subsection{
    width: 50%;
		padding: .5rem 1rem;
  }
	.project.subsection{
		width: 45%;
		margin-bottom: 3rem;
	}
	.project-img.subsection{
		width: 55%;
	}
	.slide .fp-tableCell{
	vertical-align: middle;
	}
	#summary{
		width: 45%;
	}
	#skills{
		padding: 0 0;
		width:55%;
	}
	#skills h2{
		text-align: left;
		margin-left: 10%;
		opacity: 0;
	}
	.contact .container{
		max-width: 1050px;
	}
	div.fp-controlArrow.fp-next, div.fp-controlArrow.fp-prev{
		top:unset ;
		bottom:10%;
	}
	#photo{
	width: 15vw;	
	height: 15vw;
	margin-bottom:unset;
	margin-right: 20px;
	}
	#headline{
		font-size: 25px;
		width: 65%;
		border-top: unset;
		text-align: left;
		border-left: solid .2em lightgray;
		padding: .5rem .5rem;
	}
	#headline p{
		text-align: left;
	}
}
@media screen and (min-width: 900px) {
	.section{
		font-size: 1.2rem;
	}
}
@media screen and (min-width: 1200px) {
	div.fp-controlArrow.fp-next, div.fp-controlArrow.fp-prev{
		top:50% ;
		bottom:unset;
	} 
}
/*650px */