html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

body {
	margin: 0 auto;
	background-image: url("_img/flower_.png");
    /*background-color: lightgray;*/
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

body.pagescroll {
	background-attachment: fixed;
	background-size: cover;
	overflow: visible;
}

nav1.pagescroll {
    background-attachment: fixed;
    background-size: cover;
	overflow: visible;
}

#container {
	margin: 0 auto;
	position: relative;
	width: 100%;
	height: 100%;
	display: -moz-flex;
	display: -webkit-flex;
    display: flex;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
}

section{
    min-height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#nav1 {
    height: 700px;
	width: 100%;
	margin: 0 auto;
}

#navigation {
	height: 60px;
	width: 100%;
	margin: 0 auto;
	display: -moz-inline-flex;
	display: -webkit-inline-flex;
    display: inline-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

#links div a {
    height: 60px;
    width: 100%;
	text-decoration: none;
	color: white;
    font-family: "GreatVibes-Regular", "sans-serif";
	font-size: 1.8em;
    vertical-align: middle;
    display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    text-align: center;
}


#links  {
	height: 60px;
	width: 100%;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    text-align: center;
}

#links div a:hover {
	color: #377492;
}

#links div {
    height: 60px;
    width: 120px;
    display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    text-align: center; 
}
    
#space1 {
	height: 170px;
	width: 100%;
	margin: 0 auto;
    display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

#space2 {
	height: 260px;
	width: 100%;
	margin: 0 auto;
    display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    
}

#name {
	margin: 0 auto;
    /*background-image: url("_img/CSE.svg");*/
	height: 170px;
	width: 100%;
    filter: drop-shadow(3px 2px 2px #377492);
    display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    
 
}

#name img {
    height: 100%;
    width:100%;
    margin: 0 auto;
    display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;

}



#jobname {
	height: 40px;
	width: 100%;
	display: -flex;
	display: -webkit-flex;
	display: -moz-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

#jobname p {
    margin: 0 auto;
    height: 100%;
	width: 100%;
	font-family: "Exo-Light", "sans-serif";
	font-size: 1.8em;
    text-align: center;
	color: white;
    text-shadow: 3px 3px #377492;
	display: -flex;
	display: -webkit-flex;
	display: -moz-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
    


#nav2 {
	height: 700px;
	width: 100%;
    background-image: url("_img/nav2_sample2.svg");
	/*background-color: white;*/
	margin: 0 auto;
	opacity: .90;
    background-repeat: no-repeat;
    background-size: cover;
}

#nav6 {
	height: 600px;
	width: 100%;
    background-image: url("_img/nav60_bckgrnd0.svg");
	/*background-color: darkslategrey;*/
	margin: 0 auto;
    opacity: .95;
    background-repeat: no-repeat;
    background-size: cover;

}

#skills_image {
    height: 600px;
	width: 100%;
	margin: 0 auto;
    opacity: .95;
    display: block;
}

#skills_image img {
    height: 100%;
	width: 100%;
    display: block;
}

#skills_imagemob {
    height: 414px;
	width: 100%;
	margin: 0 auto;
    opacity: .95;
    display:none;
}

#skills_imagemob img {
    height: 100%;
	width: 100%;
	margin: 0 auto;
    opacity: .95;
    display:none;
}


#mywork p, #aboutme p, #myskills p {
	margin: 0 auto;
	font-family: "GreatVibes-Regular", "sans-serif";
	font-size: 2.4em;
	color: #377492;
	height: 100px;
	width: 100%;
	text-align: center;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
}


#aboutme p, #myskills p {
	color: white;
}

#portfolio {
	/*background-color: #babcba;*/
	height: 600px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	display: -flex;
	display: -webkit-flex;
	display: -moz-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: flex-end;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
}

#boxes ul {
    margin: 0 auto;
    height: 550px;
    width: 90%;
    display: -flex;
	display: -webkit-flex;
	display: -moz-flex;
	-moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;

}

#boxes li {
	height: 250px;
	width: 250px;
	margin: 15px 15px;
	/*background-color: #93aa9b;*/
	opacity: 1;
    font-size: 1.75em;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	-moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    
    cursor: pointer;
}


#boxes {
	margin: 0 auto;
	font-size: 15px;
    height: 550px;
    width: 100%;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    cursor: pointer;
	text-decoration: none;

}

#boxes a {
	margin: 0 auto;
	font-family: "Exo-Light", "sans-serif";
	font-size: 15px;
	color: #2b5b74;
	opacity: 1;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    cursor: pointer;
	text-decoration: none;

}



#details p {
	font-family: "Exo-light", "sans-serif";
	width: 80%;
	line-height: 150%;
	font-size: .9em;
	
}

.box1 {
	background-image: url(_img/box1.jpg);
	background-size: cover;
	overflow: hidden;
    opacity: 0;
    cursor: pointer;
}

.box2 {
	background-image: url(_img/box2.jpg);
	background-size: cover;
	overflow: hidden;
    opacity: 1;
    cursor: pointer;
}

.box3 {
	background-image: url(_img/box3.jpg);
	background-size: cover;
	overflow: hidden;
    opacity: 1;
    cursor: pointer;
}

.box4 {
	background-image: url(_img/box4.jpg);
	background-size: cover;
	overflow: hidden;
    opacity: 1;
    cursor: pointer;
}

.box5 {
	background-image: url(_img/box5.jpg);
	background-size: cover;
	overflow: hidden;
    opacity: 1;
    cursor: pointer;
    
}

.box6 {
	background-image: url(_img/box6.jpg);
	background-size: cover;
	overflow: hidden;
    opacity: 1;
    cursor: pointer;
}

#nav7 {
    height: 600px;
	width: 100%;
	margin: 0 auto;
}

#nav3 {
	margin: 0 auto;
	/*background-color: white;
	opacity: .3;*/
	height: 300px;
	width: 100%;
	text-align: center;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
	 -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

#psd a {
    margin: 0 auto;
	font-family: "Exo-Light", "sans-serif";
	font-size: 1em;
	color: black;
}



#details {
    background: url("_img/me_color0.png");
	height: 250px;
	width: 570px;
    text-align: left;
	background-color: white;
	border-radius: 15px;
	display: block;
    justify-content: left;
    -webkit-justify-content: left;
    -moz-justify-content: left;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    padding-left: 30px;
    opacity: .9;
   
}

#details img {
    padding-top: 25px;
    height: 40px;
    width: 40px;
    display: block;
}

#details a {
    height: 150px;
    width: 360px;
    font-family: "Exo-Light", "sans-serif";
	font-size: 1em;
	color: black;
    display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: left;
    -webkit-justify-content: left;
    -moz-justify-content: left;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    
    
}

#nav4 div {
	font-family: "GreatVibes-Regular", "san-serif";
	font-size: 1.7em;
	color: white;
	background-color: #000;
	opacity: .6;
	border: 1px solid white;
	border-radius: 10px;
	margin-left: 5px;
	margin-right: 5px;
	height: 40px;
	width: 200px;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

#nav4 div:active {
	background-color: white;
	opacity: .8;
	color: #000;
	border: 1px solid #000;
}

#nav4, #nav5 {
	height: 75px;
	width: 100%;
	margin: 0 auto;
	/*background-color: red;*/
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

#nav4 a {
	text-decoration: none;
    text-align:center;
	color: white;
    cursor: pointer;
}



#nav5 div {
	font-family: "Exo-Light", "san-serif";
	font-size: .9em;
	color: white;
	background-color: #000;
	opacity: .6;
	border: 1px solid white;
	border-radius: 10px;
	margin-left: 5px;
	margin-right: 5px;
	height: 40px;
	width: 100px;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

#nav5 a {
	text-decoration: none;
	color: white;
    text-align: center;
    display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    
}

#nav5 div:active {
	background-color: white;
	opacity: .8;
	color: #000;
	border: 1px solid #000;
}



#copyright {
	font-family: "Exo-Light", "san-serif";
	height: 50px;
	width: 100%;
	font-size: .8em;
	color: white;
	display: inline-flex;
	display: -webkit-inline-flex;
	display: -moz-inline-flex;
    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

.reveal{
  position: relative;
  transform: translateY(100px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}





/*Mobile media query*/
	@media screen and (min-width: 360px){
         
        #nav1 {
            height: 600px;
            width: 100%;
        }
        
    	#navigation {
    		height: 60px;
            justify-content: center;
            width: 100%;
    	}

    	#links {
    		width: 100%;
    		height: 60px;
            align-items: center;
            align-content: center;
    	}
        
        #links div  {
            width: 100px;
            height: 60px;
        }
        
        #links a {
            font-size: 1.5em;
            vertical-align: middle;
            height: 60px;
            width: 100%;
        }
        
        #name {
            height: 140px;
            width: 100%
        }
 
		#name img {
			height:100%;
            width: 100%;
		}

        #jobname {
            height: 60px;
            width: 100%;
        }
        #jobname p {
            font-size: 1.3em;
            width: 80%;
        }

		#space1 {
			height: 170px;
            width: 100%;
		}
        
        #space2 {
			height: 170px;
            width: 100%;
		}
        
        #mywork p, #aboutme p, #myskills p {
            font-size: 2.6em;
            height: 100px;
            width: 100%;
        }
        
        #nav2 {
            height: 700px;
            width: 100%;
        }
        
        #mywork div {
            height: 100px;
            width: 100%;
        }
        
        #portfolio {
            height: 550px;
            width: 100%;
        }
        
        #boxes { 
            height: 500px;
            width: 100%;
            
        }
        
        #boxes ul, #boxes  {
            width: 100%;
            height: 500px;
        }
        

		#boxes li {
			height: 150px;
			width: 150px;
            margin: 10px 10px;
		}
        
		#boxes a {
			height: 70px;
			width: 100px;
		}
        
        #nav6 {
            height: 700px;
            width: 100%;
        }
        
        #skills_image {
            height: 500px;
            width: 100%;
            display: none;
        }
        
        #skills_image img {
            height: 100%;
            width: 100%;
            display: none;
        }
        
        #skills_imagemob {
            height: 600px;
            width: 100%;
            display:block;
        }

        #skills_imagemob img {
            height: 600px;
            width: 100%;
            display:block;
        }
        
        #details a {
            height: 150px;
            width: 320px;
        }
        

		#copyright {
			height: 60px;
		}

   	}


   	@media screen and (min-width: 600px){
 
        #nav2 {
            height: 550px;
            width: 100%;
        }
        
        #mywork div {
            height: 100px;
            width: 100%;
        }
        
        #portfolio {
            height: 400px;
            width: 100%;
        }
        
        #boxes ul, #boxes {
            width: 100%;
            height: 350px;
        }
        

		#boxes li {
			height: 150px;
			width: 150px;
            margin: 10px 10px;
		}
        
		#boxes a {
			height: 70px;
			width: 100px;
		}
        
   	}

		

   	/*Tablet Media Query*/
   	@media screen and (min-width: 768px){  


        
        #nav2 {
            height: 650px;
            width: 100%;
        }
        
        #mywork div {
            height: 100px;
            width: 100%;
        }
        
        #mywork p, #aboutme p, #myskills p {
            font-size: 2.8em;
        }
        
        #portfolio {
            height: 500px;
            width: 100%;
        }
        
        #boxes ul, #boxes  {
            width: 100%;
            height: 450px;
        }
        

		#boxes li {
			height: 210px;
			width: 210px;
            margin: 10px 10px;
		}
        
		#boxes a {
			height: 70px;
			width: 150px;
            font-size: .7em;
		}
        
        #nav6 {
            height: 700px;
            width: 100%;
        }

   	}
   		
  	
    

	/*Desktop media Query*/
	/*from 1000px to inifinity*/
 @media screen and (min-width: 1024px){   
      	
        #nav1 {
            height: 700px;
            width: 100%;
        }
     
        #space1 {
            height: 170px;
            width: 100%;
        }
     
        #name {
            height: 170px;
            width: 100%;
        }
     
        #name img {
            height: 100%;
            width: 100%;
        }
     
        #jobname {
            height: 40px;
            width: 100%;
        }
     
        #jobname p {
            font-size: 1.8em;
        }
     
        #space2 {
            height: 260px;
            width: 100%;
        }
        
     
        #nav2 {
            height: 700px;
            width: 100%;
        }
        
        #mywork div {
            height: 100px;
            width: 100%;
        }
     
        #mywork p, #aboutme p, #myskills p {
            font-size: 2.8em;
        }
        
        #portfolio {
            height: 580px;
            width: 100%;
        }
        
        #boxes ul, #boxes  {
            width: 90%;
            height: 550px;
        }
        

		#boxes li {
			height: 250px;
			width: 250px;
            margin: 10px 10px;
		}
        
		#boxes a {
			height: 70px;
			width: 150px;
            font-size: .7em;
		}
        
        #nav6 {
            height: 700px;
            width: 100%;
        }
     
        #skills_image {
            height: 600px;
	       width: 100%;
	       margin: 0 auto;
            opacity: .95;
            display: block;
        }

        #skills_image img {
            height: 100%;
	       width: 100%;
            display: block;
        }

        #skills_imagemob {
            height: 414px;
	       width: 100%;
	       margin: 0 auto;
            opacity: .95;
            display:none;
        }

        #skills_imagemob img {
            height: 100%;
	       width: 100%;
	       margin: 0 auto;
            opacity: .95;
            display:none;
}

   	}


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

       #nav2 {
            height: 700px;
            width: 100%;
        }
        
        #mywork div {
            height: 100px;
            width: 100%;
        }
    
        #mywork p, #aboutme p, #myskills p {
            font-size: 2.8em;
        }
        
        #portfolio {
            height: 580px;
            width: 100%;
        }
        
        #boxes ul, #boxes  {
            width: 90%;
            height: 550px;
        }
        

		#boxes li {
			height: 250px;
			width: 250px;
            margin: 10px 10px;
		}
    
        #nav6 {
            height: 750px;
            width: 100%;
        }
}

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

       #nav2, #nav1, #nav7 {
            height: 1080px;
            width: 100%;
        }
    
        #links {
    		width: 100%;
    		height: 100px;
            align-items: center;
            align-content: center;
    	}
    
    
        #space1 {
            height: 300px;
            width: 100%;
        }
     
        #name {
            height: 250px;
            width: 100%;
        }
     
        #name img {
            height: 100%;
            width: 100%;
        }
     
        #jobname {
            height: 80px;
            width: 100%;
        }
     
        #jobname p {
            font-size: 2.1em;
        }
     
        #space2 {
            height: 350px;
            width: 100%;
        }
        
        
        #mywork p, #aboutme p, #myskills p {
            font-size: 3em;
            height: 180px;
        }
                
    
        #mywork div {
            height: 100px;
            width: 100%;
        }
        
        #portfolio {
            height: 800px;
            width: 90%;
        }
        
        #boxes ul, #boxes  {
            width: 90%;
            height: 700px;
        }
        

		#boxes li {
			height: 350px;
			width: 350px;
            margin: 10px 10px;
		}
    
        #boxes a {
			height: 70px;
			width: 300px;
            font-size: 1.2em;
		}
    
        #nav6 {
            height: 1080px;
            width: 100%;
        }
    
        #skills_image {
            height: 900px;
	       width: 100%;
	       margin: 0 auto;
            opacity: .95;
            display: block;
        }
    

}