html, body{
	font-family: 'Signika', sans-serif;
	color:white;
}

h2,h3{
	font-family: 'Signika', sans-serif;
	color:white;
}

h1{
	font-family: 'Signika', sans-serif;
	color:white;
}

a{
	color:black;
}

a:hover{
	color:red;
}

/****************************************************************************** NavBar*/


#sidenav{
	width: 37px;
	height:100%;
	background-color: rgba(0,0,0,0.15);
	display: inline-block;
	opacity:0.9;
	position:absolute;
	box-shadow: 7px 0px 10px -2px rgba(0, 0, 0, 0.4);

	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
  box-sizing: border-box;

	transition: 0.7s;


}

#sidenav:hover{
	width:155px;
	background-color:rgba(0,0,0, 0.4);
}


#sidenav:hover .navtext{
	padding-top: 10px;

	font-size: 14px;
	font-weight: 500;
	transition:0.3s;
	transition-delay:0.1s;
}

#sidenav:hover .navitem{
	background-color: rgba(0, 0, 0, 0.5);
}

#sidenav:hover .arrows{
	display:none;
}



.navtext{
	color:white;
	float:left;
	font-size: 0;
	margin-left: 16px;



}

.navitem{
	height:35px;
	width:35px;
	display:block;
	float:right;
	color:rgba(255, 255, 255, 1);

	transition:0.5s;
}

.navbox{
	display:inline-block;
	width:100%;
	height:35px;


}

.navbox:hover .navtext{
	border-bottom: 1px solid white;
}

.navbox:hover{
	background-color: rgba(0, 0, 0, 0.9);
}

.navitemcontainer{
	margin-top: 150px;
}

.arrows{
	position:absolute;
	top:25px;
	color:white;

	animation-name: glow;
	animation-duration:2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
}

@keyframes glow{
		0%{opacity: 1;}
    100% {opacity:0;}

}

/****************************************MOBILE NAVBAR*/

#mobilenav{

	position: absolute;
	display: none;
	z-index: 1;
	top: 0;
	right:0;
	margin-top: 7px;
	margin-right: 7px;
}

.mobilenavitem{
	margin-right: 3px;
	padding:2px;

	background-color: rgba(100,100,100,0.5);


}


/*********************************************************************************************** Main Content area */


#particles-js {
  width:95%;
  height:90%;
  border-style: 2px solid black;
  clear:both;
  margin-top: 60px;
  margin-left: 2.5%;
  box-shadow: 0px 5px 20px -2px #444444;
	background: linear-gradient(180deg, rgba(70, 134, 164,1) 60%, rgba(235, 235, 235, 0.6));


	position: relative;

}

#particles-js::before{
	content:' ';
	width:100%;
	height:100%;
	position: absolute;
	background-repeat: no-repeat;
	background-size: contain;
	background-image:url('../images/mountain.png');
	background-position: 0% 122%;
	-webkit-filter: invert(5%);


}


#displaybox{
	margin-left:75px;
	margin-top: 10px;
	display:-webkit-inline-flex;
	flex-direction: column;
	display:inline-flex;

	width:92%;
	height:92%;
	position: absolute;
	overflow: auto;
	text-align: center;
	padding-right: 10px;
	padding-top: 30px;
}

.cloud{
	position:absolute;
	width: 40%;
	bottom:-7%;
	right:30%;
	-webkit-filter:invert(75%);
	z-index: 1;

}

/********************************************************************************** Logo and Soc icons */

#logo{
	height:60px;
	position:absolute;
	top:0;
	left:150px;
	box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 1);
	z-index:1;

	transition:0.6s;
}

#logo:hover{
	height:80px;
	box-shadow: 0px 2px 10px 3px rgba(0, 0, 0, 0.6);
}

#github{
	height:35px;
	position: absolute;
	right:150px;
	top:12px;
	opacity: 0.6;
}

#linkedin{
	height:35px;
	position: absolute;
	right:110px;
	top:12px;
	opacity: 0.6;

}

#github:hover,#linkedin:hover{
	opacity:1;
}

/***************************************************************** Front Page*/

#displaybox h3{
	padding: 10px 15%;

}

#displaybox .rounded{
	margin-left: auto;
	margin-right: auto;
	border-radius:50%;
	height:180px;
	border: 6px solid white;
	box-shadow: 0px 10px 25px 5px rgba(0, 0, 0, 0.7);
}

.title{
	font-size:2.4em;
	font-weight: 100;
	width:70%;
	margin: 5% auto 0 10%;
	text-align: left;
}

.flicker{
	animation: flicker 0.34s infinite alternate;
	font-size: 1.2em;
	color: silver;
}

.subtitle{
	padding-left: 10px;
	font-family: "Courier New", Courier, monospace;
	font-size:1.0em;
	font-weight:100;
	width: 70%;
	margin:20px auto 20px 10%;
	text-align: left;
	background-color: rgba(0, 0, 0, 0.35);
	overflow: auto;
	box-shadow: 0px 0px 14px 3px rgba(0, 0, 0, 0.6);



}

.indent{
	margin-left: 30px;
}

.orange{
	color:#ffa726;
}

.blue{
	color:#03a9f4;

}

.green{
	color:#00e676;
}


.red{
	color:rgb(255, 91, 91);
}

.underline{
	text-decoration: underline;
}

.btnbox{
	width: 180px;
	height: 44px;
	position:relative;
	display: inline-block;
	padding-top: 4px;
	margin: auto;
	text-align: center;

}

.btnicon{

	float:left;
	color:white;
	background-color: black;
	border-radius: 3px;
	margin-left: 12px;


}

.btn{
	width:100%;
	height:100%;
	top:0;
	left:0
	background-color: rgb(113,149,163);
	color:white;
	position: absolute;

	outline: solid 2px #FFF;
	opacity:0.4;

	transition: 1s;

	/**box-shadow: 0px 10px 30px 5px rgba(0, 0, 0, 0.5);**/
}

.btnbox a{
	text-decoration: none;
	width: 100%;
	height: 100%;

}

.btn a:hover{
	color: inherit;
}

.btnbox h2{
	margin-top: 7px;
}

.btn:hover{
	animation: pulse 1.2s infinite alternate;
	background-color: rgba(0, 0, 0, 0.1);
	/*text-shadow: 0px 0px 1px #ffc, 0px 0px 1px #fff;*/
}

@keyframes pulse{
	0%{
		transform: scale(1,1);
		opacity:0.4;

	}

	100%{
		transform: scale(1.02,1.1);
		opacity:1.0;


	}
}

@keyframes flicker{
	0%{
		opacity:0;

	}

	100%{
		opacity:1.0;
	}
}



/***************************************************************** About*/

.lakers{
	position:absolute;
	width: 300px;
	top:20px;
	right:30px;
	opacity:0.5;

	transition: 0.5s;
}

.usc{
	position:absolute;
	width: 150px;
	top:220px;
	right:50px;
	opacity:0.5;

	transition: 0.5s;
}


/***************************************************************** Works*/
#portfoliobox{
	display: -webkit-flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;


}

.headerbox{
	width:211px;
	font-size:2.4em;
	font-weight: 100;
	display: block;
	margin: 0;
}

.workbox{
	width:30%;
	height:400px;
	background-color: rgba(0,0,0,0.5);
	margin: 10px;
	display:block;
	box-shadow: 0px 2px 7px 1px rgba(24, 24, 24, 0.8);

}

.imageholder{
	width:100%;
	height: 200px;
	background-size: cover;
	display: block;
	background-position: center;
	margin-bottom:10px;
	cursor: pointer;

}

.worktype{

}

.linkbutton{
	display: block;
	background-color: rgba(0, 0, 0, 0.3);
	width:40%;
	margin: auto;
	border: white 1px solid;
	border-radius: 5px;

	transition:0.5s;
}

.linkbutton a{
	text-decoration: none;
}

.linkbutton:hover{
	background-color: rgba(0, 0, 0, 1);

}

.linkbutton h2{
	margin:10px 0;
}


.image1{
	background-image: url('../images/302.png');
}

.image1:hover{
	background-image:url('../images/plus.png'),url('images/302.png');
	background-size: 25%,cover;
	background-repeat: no-repeat;

	opacity:0.5;
}

.image2{
	background-image: url('../images/pizza.png');


}

.image2:hover{
	background-image:url('../images/plus.png'),url('../images/pizza.png');
	background-size: 25%,cover;
	background-repeat: no-repeat;

	opacity:0.5;

}

.image3{
	background-image: url('../images/bender.png');


}

.image3:hover{
	background-image:url('../images/plus.png'),url('../images/bender.png');
	background-size: 25%,cover;
	background-repeat: no-repeat;

	opacity:0.5;

}

.image4{
	background-image: url('../images/guestbook.png');


}

.image4:hover{
	background-image:url('../images/plus.png'),url('../images/guestbook.png');
	background-size: 25%,cover;
	background-repeat: no-repeat;

	opacity:0.5;

}

.image5{
	background-image: url('../images/draftscreenshot.png');


}

.image5:hover{
	background-image:url('../images/plus.png'),url('../images/draftscreenshot.png');
	background-size: 25%,cover;
	background-repeat: no-repeat;

	opacity:0.5;

}

.image6{
	background-image: url('../images/brasilpost.png');


}

.image6:hover{
	background-image:url('../images/plus.png'),url('../images/brasilpost.png');
	background-size: 25%,cover;
	background-repeat: no-repeat;

	opacity:0.5;

}


/***************************************************************** Skills*/

#skills{
	font-size: 1.13em;
}

.subtext{
	font-size: 0.7em;
}

/***************************************************************** Contact*/


#contact a:hover{
	color:white;
}




/********************************************************************************** Media queries*/


@media (max-width: 600px) {

	.indent{
		margin-left: 5px;
	}

	#portfoliobox{
		margin-left: 3%;
	}


	#particles-js::before{
		background-position: 0% 100%;

	}

  #logo{
		left:60px;
  }

	#github{

		right:90px;

	}

	#linkedin{

		right:50px;

	}

	.title{
		width:92%;
		margin: 0 auto;
	}

	.subtitle{
		width: 92%;
		margin-left: 8%;
	}

	.moremargin{
		margin: 8% auto 0 10%;
	}

	.moremargintop{
		margin-top:30px;
	}

	.workbox{
		width:100%;
		height:350px;

	}

}

@media only screen and (min-width: 600px){
	.workbox{
		width:90%;
	}

	#particles-js::before{
		background-position: 0% 120%;

	}


}

@media only screen and (min-width: 900px) {

	.workbox{
		width:45%;
	}



}

@media (max-width:900px){
	#sidenav{
		display: none;
	}

	#portfoliobox{
		margin-left: 10%;
	}

	#mobilenav{
		display:block;
	}

	.lakers{

		opacity:0.2;
	}

	.usc{
		opacity:0.2;
	}

	.subtitle{
		width:90%;
	}

	#displaybox{
		margin-left:0;
	}

	#particles-js::before{
		background-position: 0% 100%;

	}
}

@media only screen and (min-width: 1200px) {

	.workbox{
		width:30%;
	}

}