html,
body {
    margin: 0;
    overflow: hidden;
	
    height: 100%;
	font-family: "Lucida Sans Unicode";
}


#logo-animate-div {
	padding-top: 18%;
	text-align: center;
	height: 100%;
}


#logo-animate {
	font-size: 	90px;
	font-weight: 900;
	font-family: 'Signika';
	color: #424242;
	padding-top: 15px;
}



#logo-animate-icon-div {
	height: 140px;
	width: 100%;
	display: none;
	text-align: center;
	vertical-align: middle;
}


#logo-animate-icon {
	height: 140px;
	width: auto;

}


/* Scale canvas with resize attribute to full size */
#canvas[resize] {
    width: 100%;
    height: 100%;
}


.navbar {
	padding-top: 0;
	padding-bottom: 5px;
}



.nav-item {
	font-size: 16px;
	font-family: "Lucida Sans Unicode";
	font-weight: 600;
}


.fa-water {
	color: #B8DDFC;
	font-size: 20px;
	margin-top: 12px;
	font-weight: 700;
}


.nav-icon1 {
	color: #FE5645;
	font-size: 20px;
	margin-right: 5px;
}

#nav-icon2 {
	color: #FFD134;
	font-size: 20px;
	margin-right: 5px;
}


#water {
	
	padding-left: 80%;	
	
}



#what-content, #who-content, #contact-content, #logo-content {
	display: none;
	position: absolute;
	background-color: white;
	max-width: 350px;
	min-width: 250px;
	min-height: 400px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	margin-top: 5px;
	margin-left: -150px;
	padding: 20px;
	font-size: 16px;
	color: #454444;
	z-index: 1;
	text-align: center;
	font-weight: 200;
}


#logo-content {
	margin-left: 10px;
	text-align: left;
	min-height: 300px;
	 cursor: default;
	 pointer-events: none;
}


#water-content {
	display: none;
	position: absolute;
	background-color: white;
	margin-top: 0px; 
	text-align: left;
	
	max-width: 350px;
	max-height: 250px;
	font-size: 13px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	color: #454444;
	z-index: 1;
	font-weight: 200;
	padding: 15px;
}



#contact-content {
	margin-left: -180px;
	min-height: 300px;
}


#water:hover #water-content, #what:hover #what-content, #who:hover #who-content, #contact:hover #contact-content, #logo:hover #logo-content {
	display: block;
}



#logo-icon-1 {
	height: 50px;
	width: auto;
	margin: 0;
	padding: 0;
}


#logo-icon-2 {
	height: 35px;
	width: auto;
}


#tacuity {
	font-size: 35px;
	font-weight: 700;
	color: #464545;
	
}


#noun {
	font-size: 17px;
	color: purple;
	font-weight: 700;
	font-style: italic;
}


#pron1, #pron2, #pron3 {
	font-size: 13px;
	
}


#pron2 {
	font-weight: bold;
}


#def1 {
	color: #ACABAB;
	font-size: 20px;
	
}


#def2 {
	color: #464545;
	font-size: 16px;
	padding-top: 10px;	
}



#showcase1, #showcase2, #showcase3 {
	min-height: 530px;
	max-height: 8500px;
	display: none;
	position: absolute;
	left: -2000px;
	overflow-y: auto;	
}


#project-pic-1-div, #project-pic-2-div, #project-pic-3-div, #project-pic-4-div, #project-pic-5-div {
	padding-bottom: 100px;
}


#project-pic-1 {
	margin-top: 10px;
	margin-left: 70px;
	border: 1px solid #E2E2E2;
	box-shadow: 4px 4px #817E7E;
	border-radius: 15px;
}


#project-pic-5 {
	margin-top: 20px;
	margin-left: 70px;
	border: 1px solid #E2E2E2;
	box-shadow: 4px 4px #817E7E;
	border-radius: 15px;
}



#project-pic-2, #project-pic-3, #project-pic-4  {
	padding: 0px;
	margin-top: 20px;
	margin-left: 40px;
	border: 1px solid #E2E2E2;
	box-shadow: 4px 4px #817E7E;
	border-radius: 15px;
	max-height: 700px;
	text-align: center;

}



@keyframes zoomout {
    0% {
        transform: scale(1.05,1.05);
    }
   	
    100% {
        transform: scale(0.95,0.95);
    }
}


@keyframes zoomin {
    0% {
        transform: scale(0.95,0.95);
    }
 
    100% {
        transform: scale(1.05,1.05);
    }
}


#project-pic-1-div img, #project-pic-2-div img, #project-pic-3-div img, #project-pic-4-div img, #project-pic-5-div img {
	animation: zoomout 2s forwards;
}

#project-pic-1-div:hover img, #project-pic-2-div:hover img, #project-pic-3-div:hover img, #project-pic-4-div:hover img, #project-pic-5-div:hover img  {
	animation: zoomin 3s forwards;
}



#project-text-div-1 {
	margin-left: 30px;
	margin-top: 30px;
	text-align: justify;
	height: auto;
	font-size: 17px;
	
	
}


.project-text-div-2n3n4 {
	margin-left: 30px;
	margin-right: 30px;
	margin-top: 50px;
	text-align: justify;
	height: auto;
	font-size: 18px;
	padding: 0px;
	
}



#project-text-div-5 {
	margin-left: 20px;
	margin-top: 30px;
	
	height: auto;
	font-size: 17px;
	padding: 0px;
	
}


ul.bullet-list {
	list-style-type: circle;
}


.scrollLink-div {
	height: 100%;
	width: 100%;
	margin-bottom: 10px;
	
}


.scrollLink, #slash {
	text-align:right;
	vertical-align: bottom;
	color: #B65DF9;
	font-size: 15;
	font-weight: 400;
}



.fa-chevron-right, .fa-chevron-left {
	font-size: 28px;
	color: #FE5645;
}

.fa-chevron-right:hover, .fa-chevron-left:hover {
	color: #FFD134;
}



/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 40%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-weight: bold;

	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
}

/* Position the "next button" to the right */
.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
	background-color: #FAF7F7;
	
}

@
-webkit-keyframes fade {
	from {opacity: .4
}

to {
	opacity: 1
}
}

@
keyframes fade {
	from {opacity: .4
}

to {
	opacity: 1
}

}


.subtitle {
	margin-left: 20px;	
	margin-top: 12px;
}