a{
 text-decoration: none;
}



#header{
	padding-top: 60px;
	position: relative;
	text-align: center;
	height: 35.2vw;
    margin-top: 150px;
}


#i-am-aim {
	font-size: 12vw;
	font-family: 'Noto Sans', sans-serif;
	text-align: center;
	position: relative;
	display:block;
	animation: myRule 3s forwards;
	margin-bottom: 0px;
    margin-top: 0px;
    height: 14.5vw;

}
body{
	text-align: center;
	overflow-x: hidden;
	overflow-y: hidden;
	height: 100%;
}
html{
	text-align: center;
	overflow-x: hidden;
}

@keyframes myRule{ 
	from {top : 150px; }
    to {top: -30px; }
  }

#graphic-designer{
	font-size: 2.3vw;
	display:inline-block;
	position: relative;
	margin: 0px;
	top:0px;
	font-family: 'Noto Sans', sans-serif;
	text-align: center;
	animation: myRule 3s forwards;
}

#come-look{
	position: relative;
	font-family: 'Noto Sans', sans-serif;
	top: -6.7vw;
	text-align: center;
	border: none;
	background: white;
	font-size: 12px;
	bottom:0px;
}
/*
#nav{
	display: block;
	position: relative;
	padding:20px;
	font-family: 'Noto Sans', sans-serif;
	top: 0px;
	overflow: hidden;
	border-top: solid 0.5px #CCCCCC;
	text-align: center;
}
*/
/*ul {list-style: none;
	text-align: center;
	position: relative;
	left:50%;
	right:50%;
	float:left;
	display:block;
	padding-left: 0px;
}*/

/*#nav-list{
	font-size: 0.8em;
	float:left;
	position: relative;
	display: block;
	margin:10px;
	right:50%;
	color:grey;
}
*/

#projects{
	width: 98vw;
	position: relative;
	display: inline-block;
	top:0px;
}
.image-container{
	width:33%;
	display: inline-block;
	position: relative;
	height:40vh;
	overflow:hidden;


}

.invisible-image-container{
	width:33%;
	display: inline-block;
	position: relative;
	height:40vh;
	overflow:hidden;
	visibility: hidden;


}

#menu{
	z-index: 100;
	position: absolute;
	float:right;
	top:45px;
	right:40px;
	display: block;
	width:50px;
}

#logo{
  z-index: 100;
  position: absolute;
  float:left;
  top: 40px;
  left: 40px;
  display: block;
  width:50px;
}
.project-title{
	z-index: 100;
	font-family: 'Noto Sans', sans-serif;
	font-weight:400;
	text-align: center;
	font-size: 8px;
	position: absolute;
	top: 130px;
    left: 0;
    width: 100%;
    margin: 0 auto;
    color: white;
    opacity: 0.0;

}
.boldtitle{
	font-size: 20px;
}



.image-project img{
    width: auto;
    max-width: 500px;
    height: auto;
    max-height: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); 
}





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


.image-container:hover .image-project img{
	opacity: 0.1;
	 -webkit-transition: 0.5s ease-in-out;
	   max-width: 550px;
	     max-height: 330px;
	      /*filter: blur(3px)*/


}


.image-container:hover .project-title{
	z-index: 100;
	font-family: 'Noto Sans', sans-serif;
	text-align: center;
	font-size: 12px;
	position: absolute;
	top: 17.5vh;
    left: 0;
    width: 100%;
    margin: 0 auto;
    color: black;
    opacity: 1.0;
    -webkit-transition: 0.4s ease-in-out;
}

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

#companylogo{
		opacity: 0.3;
		 width: 100%;

}
.companylogo{
	width:70vw;
}
#Footer{
	position: relative;
	display: inline-block;
	padding-bottom: 60px;
	text-align: center;
	margin: 0px;
	width:100%;
}
#Worked{
	position: relative;
	font-family: 'Noto Sans', sans-serif;
	top: 10px;
	text-align: center;
	border: none;
	font-size: 12px;
}
/*#see-me{
	position: relative;
	font-family: 'Noto Sans', sans-serif;
	top: 10px;
	text-align: center;
	border: none;
	font-size: 12px;
}*/
#arrow-up{
	display: block;
	position: relative;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    top:10px;
    width:20px;
    margin-bottom: 15px;
}
.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;
}

.currentLink{ 
	text-decoration: line-through;
	color:black;
 }


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

a:visited{
	text-decoration: none;
	color:black;
}
a:hover{
	text-decoration:none;
	color:grey;
}
a:active{
	text-decoration: none;
	color:grey;
}
#invisible{
	visibility: hidden;
}

#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;
  
}


@media (min-width: 650px) and (max-width: 1100px){
#i-am-aim{ font-size:13vw; 
height: 15vw;}
#header{height: 47vw;}
#come-look{	top: -3vw;}
.image-container{width:50%;
float:left;
margin:auto;
height:270px;}
.project-title{bottom:13vw;
top: 100px;}
#Worked{top:20px;
margin-bottom: 10px}
#projects{
	width: 97vw;}

}

@media (min-width: 300px) and (max-width: 650px){
#i-am-aim{ font-size:12vw;
height: 14vw; }
#header{height: 80vw;}
#come-look{	top: -10vw;}
ul {width: 85%;}
.image-container{width:100%;
float:left;
margin:auto;
height:260px;}
.project-title{bottom:30vw;
    top: 112px;}
.companylogo{
	width:100vw;}
#Worked{top:20px;
margin-bottom: 15px}
#projects{
	width: 95vw;}
	.image-project img{
    width: auto;
    max-width: 110%;}

}

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

	}