body
{
	background-color:#1b1941;
}
#center
{
	position:absolute;
	left:50%;
	top:50%;
	transform:translateY(-50%) translateX(-50%);
}
.circle
{
	width:50px;
	height:50px;
	background-color:#fff;
	display:inline-block;
	border-radius:50%;
	margin:0 (50px/3);
	box-shadow:0 -5px 5px 1px rgba(0,0,0,0.2);
}
.circle-1
{
	background-color:#ffc300;
	background:linear-gradient(tint(#ffc300,-100%),tint(#ffc300,20%));
}
.circle-2
{
	background-color:#ff004b;
	background:linear-gradient(tint(##ff004b;,-10%),tint(##ff004b;,30%));
}
#bodyBackground
{
	background-image:url("coverImage.jpg");
	height:100%;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:fixed;
}
html
{
	height:100%;
	margin:0%;
	font:font: 400 15px/1.8 "Lato", sans-serif;
	color:#777;
}
.overlay 
{
	height: 0%;
	width: 100%;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.9);
	overflow-y: hidden;
	transition: 0.5s;
}

.overlay-content 
{
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}
.overlay a 
{
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.overlay a:hover, .overlay a:focus 
{
  color: #f1f1f1;
}

.overlay .closebtn 
{
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
  font-size: 40px;
  top: 15px;
  right: 35px;
  }
}
	#skillsDiv
	{
		background-image:url("images\\coding1.jpg");
		background-attachment:fixed;
		background-position:no-repeat;
		background-position:center;
		background-size:cover;
		height:85vh;
		opacity:0.8;
		overflow:hidden;
		color: #58D68D;
		text-align:center;
		text-align: justify;
		z-index:1;
		
		
	}
	#img2 .wrapper
	{
		display:block;
		float:left;
		margin:50px auto 200px;
		width:100%;
		padding:0;
		
		
		
	
	}
	#Project
	{
		background-color:#fff;
		color:#777;
		height:100vh;
		font-size:64px;
		text-align:center;
		text-align: justify;
		background-color:black;
		color:#fff;
		z-index:-1;
		
	}
	#Project .wrapper
	{
		display:block;
		float:left;
		margin:50px auto 200px;
		width:100%;
	}
	#interestDiv
	{
		//background-image:url("images\\Resume5.jpg");
		//background-attachment:fixed;
		height:600px;
		//padding-top:60px;
		
	}
	#about
	{
		color: #58D68D  ;
		background-color:#5D6D7E;
		text-align:center;
		text-align: justify;
		height:70vh; 
		width:auto;
	}
	#about .wrapper
	{
		display:block;
		float:none;
		width:100%;
	}
	#contactDiv
	{
		background-image:url("videoplayback.gif");
		background-attachment:fixed;
		background-position:center;
		background-repeat:no-repeat;
		background-size:cover;
		height:80vh;
	}
	#contact
	{
		height:25vh;
		position:relative;
		top:350px;
		border-radius:25px;
		background-color:rgb(0,0,0,0.5);
		
	}
	#aboutMe,fa-empire
	{
		font-size:5vw;
		position:relative;
	}
	.animslide2
	{
		visibility:hidden;
	}
	.fa-book
	{
		font-size:60px;
	}
	.Aptech
	{
		position:relative;
		padding-left:2vw;
		font-size:1vw;
	}
	.fa-code
	{
		font-size:9vw;
		position:relative;
		text-align:center;
		display:inline-block;
	}
	#education
	{
	`	color: #777 ;
		background-color:#fff;
		text-align: justify;
		height:100vh;
		z-index:2;
	
	}
	.animslide
	{
		visibility:hidden;
	}
	.slide
	{
		animation-name:slide;
		animation-duration:2s;
		visibility:visible;
	}
	.fa-facebook-square:hover
	{
		color:#3B5998;
		
	}
	.fa-facebook-square
	{
		color:#fff;
		font-size:100px;
	}
	.fa-github:hover
	{
		color:#c9510c;
	}
	.fa-github
	{
		color:#fff;
		font-size:100px;
	}
	.fa-linkedin-square:hover
	{
		color:#007bb6;
	}
	.fa-linkedin-square
	{
		color:#fff;
		font-size:100px;
	}
	#mail
	{
		color:#fff;
		font-size:100px;
	}
	#mail:hover
	{
		color:#c71610;
	}
	@keyframes icons
	{
		//0%{ font-size:140px;}
		0%{font-size:125px;}
		100%{ font-size:100px;}
	}
	#main
	{
		position:relative;
		animation:move 5s infinite;
	}
	#drama
	{	height:400px;;
		background-color:rgb(254, 0, 61,0.5);
		color:#fff;
		position:relative;
		padding: 10px ;
	}
	#dramapic
	{
		height:300px;
		width:400px;
		background-color:#fff;
	}
	@keyframes move
	{
		0% {top:0px;}
		25% {top:100px;}
		50% {top:0px;}
		75% {top:100px;}
		100% {top:0px;}
	}
	.bg-grey 
	{
      background-color: #f6f6f6;
	}
	#logo
	{
		position:relative;
		height:auto;
		width:120px;
		//padding-bottom:40px;
		//top:0px;
	}
	#profilePic
	{
		height:25vw;
		display:block;
		margin: 0 auto;
	}
	#mainContent
	{
		color:#fff;
		font-size:2vw;
	}
	#blockQuoteText
	{
		color:#fff;
		font-size:1vw;
	}
	#creativeContent
	{
		color:#58D68D;
		font-size:2vw;
	}
	#contentCenter
	{
		text-align:center;
	}
	#educationHeading
	{
		text-align:center;
		font-size:5vw;
	}
	#redLine
	{
		border-bottom:2px solid red;
		position:relative;
		padding-right:10px;
		width:10vw;
	}
	#timePeriod
	{
		color:#3640D7;
		font-size:2vw;	
	}
	#aptechEducation
	{
		font-size:2vw;
	}
	#educationEm
	{
		font-size:1vw;
	}
	#skills
	{
		 color:#fff; 
		 font-size:5vw; 
		 position:relative;
		 top:1px;	
	}
	#star
	{
		color:#F9E79F;
	}
	#barField
	{
		color:#fff; 
		font-size:2vw;		
	}
	#interests
	{
		font-size:5vw;
	}
	#findMe
	{
		color:#fff;
		font-size:3vw;
		font-family:'Paprika';
	}
	#contactIcons
	{
		font-size:7vw;
	}
	#map
	{
		height:30vh; 
		width:100%; 
		position:relative;
		padding-top:10px;
	}
	#copyright
	{
		height:5vh;
		background-color:black;
		color:#fff;
		padding:1px;
		text-align: justify;
	}
	#copyrightContent
	{
		//padding-top:10px;
		font-size:1vw;
	}
	#code-icon
	{
		text-align:center;
	}
	 @keyframes slide {
    0% {
      opacity: 0;
      transform: translateY(70%);
    } 
    100% {
      opacity: 1;
      transform: translateY(0%);
    }
  }