#header{
	padding-top: 60px;
	position: fixed;
	text-align: center;
    margin-top: 0px;
    height:800vh;

}

strong{
	font-size: 2vw;
}

#i-am-aim {
	font-size: 12vw;
	font-family: 'Noto Sans', sans-serif;
	text-align: center;
	position: fixed;
	display:block;
	animation: myRule 2s forwards;
	margin-bottom: 0px;
    margin-top: 105px;
    height: 200vw;
    width:100%;

}

iframe{
	width:100%;
	height:566.5px;
}



a{
 text-decoration: none;
}

a:link{
	text-decoration: underline;
	color:black;
}

a:visited{
	text-decoration: none;
	color:black;
}
a:hover{
	text-decoration: none;
	color:black;
}
a:active{
	text-decoration: none;
	color:black;
}


@keyframes myRule{ 

	 from { opacity: 1.0;}
     to { opacity: 0.03; }

}

body{
	text-align: center;
	overflow-x: hidden;
}

.center-page{
	text-align: center;
	display: inline-block;
	position: relative;
	padding-bottom: 40px;
	width:70vw;
}

#logo{
  z-index:900;
  position: fixed;
  float:left;
  top: 40px;
  left: 40px;
  display: block;
  width:50px;
}

#menu{
	z-index: 100;
	position: absolute;
	float:right;
	top:45px;
	right:40px;
	display: block;
	width:50px;
}
.project-title-page{
		font-size: 0.9em;
		font-family: 'Noto Sans', sans-serif;
		text-align: left;
		position: relative;
		width:100%;
		z-index: 100;
		padding-top: 35px;
		padding-bottom: 28px;
}

.project-title-page2{
		font-size: 0.9em;
		font-family: 'Noto Sans', sans-serif;
		text-align: left;
		position: relative;
		width:100%;
		z-index: 100;
		padding-top: 25px;
		padding-bottom: 28px;
}

.image-container{
	text-align: center;
	position: relative;
}

.image-small
{
	width:30%;
}

.image-medium
{
	width:50%;
}

.image-medium-large
{
	width:72%;
}

.image-project{
	-webkit-filter: grayscale(100%);
	-webkit-transition: .5s ease-in-out;
	opacity: 0.2;
	opacity-transition: .5s ease-in-out;
	width:auto;
	top: 0px; bottom: 0px;
}

.image-project:hover{
	opacity: 1.0;	
	opacity-transition: .5s ease-in-out; 
	-webkit-filter: grayscale(0%);
	-webkit-transition: .5s ease-in-out;

}
.button-container{
	width:50%;
	display: inline-block;
	position: relative;
	height:27vh;
	overflow:hidden;
	float:left;
	background: white;
}


.button-text{
	z-index: 100;
	font-family: 'Noto Sans', sans-serif;
	text-align: center;
	font-size: 18px;
	position: absolute;
	top: 90px;
    left: 0;
    width: 100%;
    margin: 0 auto;
    color: white;
}

img{
	width: 100%;
}



body{
	-webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

/*#arrow-up{
	display: block;
	position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    padding-bottom: 10px;
    width:20px;
    margin-bottom: 20px;
}*/

#see-me{
	position: relative;
	font-family: 'Noto Sans', sans-serif;
	top: 10px;
	text-align: center;
	border: none;
	font-size: 12px;

}

.project-date{
		font-size: 0.8em;
		font-family: 'Noto Sans', sans-serif;
		text-align: center;
		position: relative;
		width:100%;
		z-index: 100;
		padding-top: 35px;
		padding-bottom: 28px;
}


#Footer{
	position: relative;
	display: inline-block;
	top:30px;
	padding-bottom: 45px;
	text-align: center;
	margin: 0px;
	width:100%;
}

#or{
	position: relative;
	font-family: 'Noto Sans', sans-serif;
	top: 10px;
	text-align: center;
	border: none;
	font-size: 12px;
}

.Mail-me{
	position: relative;
	font-family: 'Noto Sans', sans-serif;
	top: 10px;
	text-align: center;
	border: none;
	font-size: 12px;
	display: block;
	padding-bottom: 20px;
}


#logo-bottom{
  position: relative;
  top: 10px;
  text-align: center;
  display:inline-block;
  width:40px;
}

#arrow-up{
	display: block;
	position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    top:20px;
    width:20px;
    margin-bottom: 15px;
}

#arrow-up{
	display: block;
	position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    top:20px;
    width:20px;
}
.smoothScroll:link{
	text-decoration: none;
	color:black;
}

.smoothScroll:visited{
	text-decoration: none;
	color:black;
}
.smoothScroll:hover{
	text-decoration: none;
	color:grey;
}
.smoothScroll:active{
	text-decoration: none;
	color:black;
}

video{
	top:20px;
}

@media (min-width: 650px) and (max-width: 1100px){
#i-am-aim{ font-size:13vw; 
    height: 15vw;}
#header{height: 47vw;}
.center-page{width:70%;}
.project-title-page{font-size: 0.8em;}
.button-container{height:20vh;}
.button-text{top: 60px;}
iframe{width:100%;
	height:450px;}
strong{font-size: 2.5vw;}


}

@media (min-width: 300px) and (max-width: 650px){
#i-am-aim{ font-size:12vw;
    height: 14vw; }
#header{height: 80vw;}
.center-page{width:90%;
	padding-bottom: 20px;}
.project-title-page{font-size: 0.8em;
		padding-top: 80px;}
.button-container{height:15vh;}
.button-text{top: 40px;}
#logo{position: absolute;}
#menu{position: absolute;}
#Footer{top:10px;}
iframe{width:100%;
	height:350px;}
strong{font-size: 4.5vw;}
}

@media screen and (max-width: 500px) {
	   overflow-x: hidden;
	   
	}