@charset "UTF-8";
/* CSS Document */

body{
	background-color: #3D464D;
	font-family: Roboto, sans-serif;
	color: #fff;
	margin: 0 auto;
	padding: 0 auto;
}

canvas{
	display:block;
	position: absolute;
	top: 0;
}

#container{
	width: 100%;
	height: 100%;
}

.shadow{
	box-shadow: 0px 4px 12px 0px rgba(0,0,0, 0.6);
}

.global{
		margin: 20.5px;
	}

.exphr-img{
			display: none;
		}

	/*SCROLL ANIMATION...............................................*/
	.scroll-text{
		width: 64px;
		display: block;
	}

	.mouse{
		margin: 8px 16px;
		width: 32px;
	}

.focus-area{
    font-weight:300;
    line-height:24px;
}

	/*BUTTON OUTLINE.................................*/

	.profile{
		font-family: Roboto, sans-serif;
		border-radius: 4px;
		background-color: rgba(0,0,0, 0);
		border: 1.5px solid #41B3FF;
		color: #fff;
		font-weight: 300;
		font-size: 14px;
		cursor: pointer;
		margin-top: 24px;
		line-height: 40px;
		text-align: center;
		display: inline-block;
		width: 160px;
	}

/*ACTIVITY TILES............STARTS..........................*/
	.profile:hover{
		background-color: #41B3FF;
		font-weight: 500;
	}
	.project-tiles .tile-des{
		box-shadow: 0 2px 8px 0 rgba(0,0,0,0.4)!important;
		background-color: rgba(0,0,0, 0.5)!important;
	}

/*NAVIGATION BACK............STARTS..........................*/
	.menu {
		width: 100%;
		height: 64px;
		background-color: #131D25;
		position: fixed;
		top: 0;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		z-index: 900;
		float: left;
	}

	.logo{
		width: 56px;
		height: 72px;
		opacity: 1;
		background-color: #41b3ff;
		margin:0px 0px 0 40px;
		float: left;
		text-align: center;
		display: table;
		font-size: 24px;
	}
	
	.logo-text{
		vertical-align: middle;
		width: 40px;
		margin-top: 16px;
		display: inline-block;
	}

	.share{
		width: 64px;
		height: 64px;
		background-color: #41b3ff;
		display: inline-block;
		float: right;
	}

	#menu-center {
		height: 64px;
		float: left;
		background-color: #0A161E;
		margin-left: 0px;
	}

	.back-icon{
		font-size: 24px !important;
		float: left;
		margin-right: 16px;
	}

	.back{
		padding: 20px 40px 21px 24px;
		float: left;
	}

	.back-label{
		line-height: 24px;
		float: left;
		font-style: normal;
	}

	a {
		color: rgba(216,216,216, 1);
		text-decoration: none;
		font-weight: 300;
	}

	a[href^="tel"] {
	  color: inherit; /* Inherit text color of parent element. */
	  text-decoration: none; /* Remove underline. */
	  /* Additional css `propery: value;` pairs here */
	}

/* NEW FOOTER............STARTS..........................*/
.footer{
	width: 100vw;
	background-color: rgba(0,0,0,1);
	z-index: 900;
	text-align: center;
	font-size: 14px;
	display: inline-block;
	padding: 40px;
	box-sizing: border-box;
	color: rgba(255,255,255,0.9);
	}

.footer-contents{
	max-width: 360px;
}

.footer-contents-1{
	float: left;
	display: inline-block;
	text-align: left;
	margin: 0 0 40px 0;
}

.footer-contents-2{
	display: inline-block;
	text-align: left;
	float: left;
	margin: 0 0 40px 0;
}

.footer-header{
	font-size: 30px;
	font-weight: 700;
	margin: 0px 0 16px 0;
	letter-spacing: 2px;
}

.footer-text{
	margin: 0 0 0px 0;
	line-height: 20px;
	font-weight: 300;
}

.footer-message{
		padding: 80px 0 24px 0;
	}

.copy {
    font-size: 16px!important;
    align-self: center;
    margin-right: 2px;
	}

.copy-right{
		font-weight: 300;
		line-height: 24px;
		margin: 0px 0 10px 0;
		display: inline-flex;
		font-size: 14px;
	}

.footer-links{
	display: inline-block;
	margin: 20px 0 0px 0;
}

.footer-icons{
	height: 24px;
	width: 24px;
	float: left;
	margin: 0 8px 0 0;
}

@media (min-width: 320px) and (max-width: 475.9px){

	.menu {
		width: 100%;
		height: 56px;
		background-color: #131D25;
		position: fixed;
		top: 0;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		z-index: 900;
		float: left;
	}

	.logo{
		height: 64px;
		margin: 0 0 0 16px;
	}
	
	.logo-text{
		display: inline-block;
		vertical-align: middle;
		font-size: 24px;
		width: 32px;
		margin-top: 14px
	}

	.share{
		width: 56px;
		height: 56px;
		background-color: #41b3ff;
		display: inline-block;
		float: right;
	}

	.contact{
		width: 56px;
		height: 56px;
		background-color: #41b3ff;
		display: inline-block;
		float: right;
	}

	#menu-center {
		height: 56px;
		float: left;
		background-color: #0A161E;
		margin-left: 0px;
	}

	.back-icon{
		font-size: 24px !important;
		float: left;
		margin-right: 16px;
	}

	.back{
		padding: 16px 40px 16px 24px;
		float: left;
	}

	.back-label{
		line-height: 24px;
		float: left;
		font-style: normal;
	}
	
	.global{
		margin: 16px;
	}
	/*HERO............STARTS...................................*/
	#hero {
		height: 100vh;
		width: 100vw;
		position: relative;
		top: 0;
		background-color: #53585D;
		background-image: url( ../assets/Images/shantanu.jpg);
		background-repeat: no-repeat;
		background-position: 94% 8%;
		background-size: 220%;
	}
	
	.profile-text{
		width: 48%;
		float: right;
		position: absolute;
		top: 32%;
		right: 5%;
	}

	#scroll{
		display: inline-block;
		position: absolute;
		z-index: 600;
		bottom: 0;
		left: 46%;
	}

	/*WHO AM I............STARTS...............................*/
	.section-header {
		width: 100vw;
		box-sizing: border-box;
		padding:32px 0 0 0;
		margin: 0;
		display: inline-block;
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;
		text-align: center;
		clear: both;
	}

	.section-header-line{
		width: 32px;
		border: 1.5px solid #41b3ff;
		float: left;
		margin-top: 20px;
	}

	.header-one{
		font-family: Roboto condensed, sans-serif;
		font-size: 40px;
		line-height: 40px;
		vertical-align: middle;
		font-weight: 700;
		color: rgba(255,255,255, 0.40);
		margin: 0 0 0 8px;
		float: left;
		display: inline-block;
	}

	.profile-tagline{
		font-family: Roboto condensed, sans-serif;
		font-size: 20px;
		font-weight: 700;
		margin: 0px 0 16px 0%;
	}

	.profile-description{
		font-size: 16px;
		font-weight: 300;
		margin: 0 0 0px 0;;
	}

	/*SKILLS............STARTS..................................*/
	.skill-summary{
		width: 100%;
		clear: left;
		margin: 24px 0 48px 0px;
		box-sizing: border-box;
		padding: 0 40px;
		display: block;
		letter-spacing: 0.25px;
		float: left;
		text-align: left;
	}

	.skill-set{
		float: left;
		width: 100%;
		margin: 0 0 24px 0;
	}

	.skill-icon{
		width: 48px;
		float: left;
		margin-right: 16px;
	}
	
	.hero-head{
		margin: 0px 0 8px 0;
		font-weight: 500;
	}

	.skill-description{
		font-size: 14px;
		font-weight: 300;
		font-style: normal;
		display: table;
		margin: 0;
	}

	/*EXPERIENCE............STARTS....................................*/
	.experience{
		width: 100%;
		margin: 32px 0 32px 0;
		box-sizing: border-box;
		padding: 0 40px;
		display: inline-block;
		letter-spacing: 0.25px;
	}
	
	.exp-img{
		width: 100%;
		display: inline-block;
	}

	/*ACTIVITES............STARTS..................................*/
	.activity-summary{
		width: 100%;
		margin: 32px 0 32px 0;
		box-sizing: border-box;
		padding: 0 40px;
		display: inline-block;
		letter-spacing: 0.25px;
		text-align: left;
	}
	
	.project-tiles{
		width: 96%;
		max-width: 360px;
		height: 175px;
		background-repeat: no-repeat;
		background-size: 100%;
		float: left;
		background-color: azure;
		margin: 0 0px 24px 0px;	
	}

	.project-pic{
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	.project-tiles .tile-des{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0, 0.6);
		float: left;

	}
	.tile-label{
		font-weight: 700;
		margin: 24px 40px 8px 24px;
	}

	.tile-services{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 25px;
	}

	.source{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 13px;
		position: relative;
		bottom: -64px;
	}
	
	/*---------------FOOTER CUSTOM-------------*/
	.footer-contents-2{
		display: inline-block;
		text-align: left;
		float: left;
		margin: 0 0 30px 0;
	}
	
	.footer-header{
	font-size: 24px;
	font-weight: 700;
	margin: 0px 0 10px 0;
	letter-spacing: 2px;
	}
}

@media (min-width: 476px) and (max-width: 575.9px){

	/*HERO............STARTS...................................*/
	.menu {
		width: 100%;
		height: 56px;
		background-color: #131D25;
		position: fixed;
		top: 0;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		z-index: 900;
		float: left;
	}

	.logo{
		height: 64px;
		margin: 0 0 0 24px;
	}
	
	.logo-text{
		display: table-cell;
		vertical-align: middle;
		font-size: 24px;
		width: 32px;
		margin-top: 14px
	}

	.share{
		width: 56px;
		height: 56px;
		background-color: #41b3ff;
		display: inline-block;
		float: right;
	}

	.contact{
		width: 56px;
		height: 56px;
		background-color: #41b3ff;
		display: inline-block;
		float: right;
	}

	#menu-center {
		height: 56px;
		float: left;
		background-color: #0A161E;
		margin-left: 0px;
	}

	.back-icon{
		font-size: 24px !important;
		float: left;
		margin-right: 16px;
	}

	.back{
		padding: 16px 40px 16px 24px;
		float: left;
	}

	.back-label{
		line-height: 24px;
		float: left;
		font-style: normal;
	}
	
	.global{
		margin: 16px;
	}
	
	#hero {
		height: 100vh;
		width: 100vw;
		position: relative;
		top: 0;
		background-color: #53585D;
		background-image: url( ../assets/Images/shantanu.jpg);
		background-repeat: no-repeat;
		background-position: 112% 10%;
		background-size: 180%;
	}
	
	.profile-text{
		width: 48%;
		float: right;
		position: absolute;
		top: 36%;
		right: 5%;
	}

	#scroll{
		display: inline-block;
		position: absolute;
		z-index: 600;
		bottom: 0;
		left: 46%;
	}

	/*WHO AM I............STARTS...............................*/
	.section-header {
		width: 100vw;
		box-sizing: border-box;
		padding:40px 0 0 0;
		margin: 0;
		display: inline-block;
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;
		background-position-x: 88%;
		text-align: center;
		clear: both;
	}

	.section-header-line{
		width: 40px;
		border: 1.5px solid #41b3ff;
		float: left;
		margin-top: 20px;
	}

	.header-one{
		font-family: Roboto condensed, sans-serif;
		font-size: 40px;
		line-height: 40px;
		vertical-align: middle;
		font-weight: 700;
		color: rgba(255,255,255, 0.40);
		margin: 0 0 0 8px;
		float: left;
		display: inline-block;
	}

	.profile-summary{
		max-width: 540px;
	}
	
	.experience{
		width: 88%;
		margin: 32px 0 32px 0;
		display: inline-block;
		letter-spacing: 0.25px;
	}

	.profile-tagline{
		font-family: Roboto condensed, sans-serif;
		font-size: 20px;
		font-weight: 700;
		margin: 0px 0 16px 0%;
	}

	.profile-description{
		font-size: 16px;
		font-weight: 300;
		margin: 0 0 0px 0;;
	}

	/*SKILLS............STARTS..................................*/
	.skill-summary{
		width: 100%;
		clear: left;
		margin: 32px 0 56px 0px;
		display: block;
		letter-spacing: 0.25px;
		float: left;
		text-align: left;
		box-sizing: border-box;
		padding: 0 48px;
	}

	.skill-set{
		float: left;
		width: 100%;
	}
	
	.skill-two{padding: 0px 0px 32px 32px;}

	.skill-icon{
		width: 64px;
		float: left;
		margin-right: 16px;
	}
	
	.hero-head{
		margin: 0px 0 8px 0;
		font-weight: 500;
	}

	.skill-description{
		font-size: 14px;
		font-weight: 300;
		font-style: normal;
		display: table;
		margin: 0;
	}

	/*EXPERIENCE............STARTS....................................*/
	.experience{
		width: 100%;
		margin: 32px 0 32px 0;
		box-sizing: border-box;
		padding: 0 48px;
		display: inline-block;
		letter-spacing: 0.25px;
	}
	
	.exp-img{
		width: 96%;
		display: inline-block;
	}

	/*ACTIVITES............STARTS..................................*/
	.activity-summary{
		width: 100%;
		margin: 32px 0 32px 0;
		box-sizing: border-box;
		padding: 0 40px;
		display: inline-block;
		letter-spacing: 0.25px;
		text-align: left;
		text-align: center;	
	}
	
	.project-tiles{
		width: 88%;
		height: 220px;
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: azure;
		margin: 0 0px 24px 0px;	
		text-align: left;
		display: inline-block;
	}

	.project-pic{
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	.project-tiles .tile-des{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0, 0.6);
		float: left;

	}
	.tile-label{
		font-weight: 700;
		margin: 24px 40px 8px 24px;
		max-width: 300px;
	}

	.tile-services{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 24px;
	}

	.source{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 25px;
		position: relative;
		bottom: -96px;
	}
	
		/*-----------------CUSTOMR FOOTER -------------*/
	
	.footer-contents-2{
		display: inline-block;
		text-align: left;
		float: left;
		margin: 0 0 30px 0;
	}
	
	.footer-header{
	font-size: 26px;
	font-weight: 700;
	margin: 0px 0 10px 0;
	letter-spacing: 2px;
	}
}

@media (min-width: 576px) and (max-width: 767.9px){
	.menu {
		width: 100%;
		height: 56px;
		background-color: #131D25;
		position: fixed;
		top: 0;
		-webkit-transition: all 0.3s ease;
		-moz-transition: all 0.3s ease;
		-o-transition: all 0.3s ease;
		transition: all 0.3s ease;
		z-index: 900;
		float: left;
	}

	.logo{
		height: 64px;
		margin: 0 0 0 24px;
	}
	
	.logo-text{
		display: table-cell;
		vertical-align: middle;
		font-size: 24px;
		width: 32px;
		margin-top: 14px
	}

	.share{
		width: 56px;
		height: 56px;
		background-color: #41b3ff;
		display: inline-block;
		float: right;
	}

	#menu-center {
		height: 56px;
		float: left;
		background-color: #0A161E;
		margin-left: 0px;
	}

	.back-icon{
		font-size: 24px !important;
		float: left;
		margin-right: 16px;
	}

	.back{
		padding: 16px 40px 16px 24px;
		float: left;
	}

	.back-label{
		line-height: 24px;
		float: left;
		font-style: normal;
	}
	
	.global{
		margin: 16px;
	}
	
	/*HERO............STARTS...................................*/
	#hero {
		height: 100vh;
		width: 100vw;
		position: relative;
		top: 0;
		background-color: #53585D;
		background-image: url( ../assets/Images/shantanu.jpg);
		background-repeat: no-repeat;
		background-position: 150% 10%;
		background-size: 150%;
	}
	
	.profile-text{
		width: 44%;
		float: right;
		position: absolute;
		top: 40%;
		right: 5%;
	}

	#scroll{
		display: inline-block;
		position: absolute;
		z-index: 600;
		bottom: 0;
		left: 46%;
	}

	/*WHO AM I............STARTS...............................*/
	.section-header {
		width: 100vw;
		box-sizing: border-box;
		padding:40px 0 4px 0;
		margin: 0;
		display: inline-block;
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;
		background-position-x: 88%;
		text-align: center;
		clear: both;
	}

	.section-header-line{
		width: 40px;
		border: 1.5px solid #41b3ff;
		float: left;
		margin-top: 18.5px;
	}

	.header-one{
		font-family: Roboto condensed, sans-serif;
		font-size: 40px;
		line-height: 40px;
		vertical-align: middle;
		font-weight: 700;
		color: rgba(255,255,255, 0.40);
		margin: 0 0 0 8px;
		float: left;
		display: inline-block;
	}

	.profile-summary{
		max-width: 640px;
	}
	
	.experience{
		width: 88%;
		margin: 32px 0 32px 0;
		display: inline-block;
		letter-spacing: 0.25px;
	}

	.profile-tagline{
		font-family: Roboto condensed, sans-serif;
		font-size: 24px;
		font-weight: 500;
		margin: 0px 0 16px 0%;
	}

	.profile-description{
		font-size: 16px;
		font-weight: 300;
		margin: 0 0 0px 0;;
	}

	/*SKILLS............STARTS..................................*/
	.skill-summary{
		width: 100%;
		clear: left;
		margin: 32px 0 56px 0px;
		display: block;
		letter-spacing: 0.25px;
		float: left;
		text-align: left;
		box-sizing: border-box;
		padding: 0 56px;
	}

	.skill-set{
		float: left;
		width: 88%;
		box-sizing: border-box;
		padding-bottom: 24px;
		max-width: 420px;
		text-align: left;
	}

	.skill-icon{
		width: 48px;
		float: left;
		margin-right: 16px;
	}
	
	.hero-head{
		margin: 0px 0 8px 0;
		font-weight:500;
	}

	.skill-description{
		font-size: 14px;
		font-weight: 300;
		font-style: normal;
		display: table;
		margin: 0;
	}

	/*EXPERIENCE............STARTS....................................*/
	.experience{
		width: 100%;
		margin: 32px 0 32px 0;
		box-sizing: border-box;
		padding: 0 56px;
		display: inline-block;
		letter-spacing: 0.25px;
	}
	
	.exp-img{
		width: 80%;
		display: inline-block;
	}

	/*ACTIVITES............STARTS..................................*/
	.activity-summary{
		width: 100%;
		margin: 32px 0 32px 0;
		box-sizing: border-box;
		padding: 0 56px;
		display: inline-block;
		letter-spacing: 0.25px;
		text-align: left;
		text-align: center;	
	}
	.project-tiles{
		width: 240px;
		height: 140px;
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: azure;
		margin: 0 20px 20px 0px;	
		text-align: left;
		display: inline-block;
		float: left
	}

	.tile-two{margin: 0 0px 20px 0px;}

	.project-tiles .tile-des{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0, 0.6);
		float: left;

	}
	.tile-label{
		font-weight: 500;
		margin: 24px 40px 8px 24px;
		max-width: 300px;
	}

	.tile-services{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 25px;
	}
	
	/*........................IMPACT.................*/
	.impact-container{
		width: 100%;
		background-color: #2F81FF;
		float: left;
		box-sizing: border-box;
		padding: 40px 40px 30px 56px;
		margin: 16 0 0px 0;
		font-size: 14px;
	}
	
	.imc{
		max-width: 620px;
	}
	
	.impact-caption{
		font-size: 12px;
		font-weight: 300;
		float: right;
		position: relative;
		top: 16px;
	}
}

@media (min-width: 768px) and (max-width: 991.9px){	
	/*.............CUSTOM COMMON....................*/
	.logo{
		margin-left: 32px;
	}
	
	/*HERO............STARTS...................................*/
	#hero {
		height: 100vh;
		width: 100vw;
		position: relative;
		top: 0;
		background-color: #53585D;
		background-image: url( ../assets/Images/shantanu.jpg);
		background-repeat: no-repeat;
		background-position: 170% 12%;
		background-size: 140%;
	}
	
	.profile-text{
		width: 40%;
		float: right;
		position: absolute;
		top: 40%;
		right: 5%;
	}

	#scroll{
		display: inline-block;
		position: absolute;
		z-index: 600;
		bottom: 0;
		left: 46%;
	}

	/*WHO AM I............STARTS...............................*/
	.section-header {
		width: 100vw;
		box-sizing: border-box;
		padding:48px 0 8px 0;
		margin: 0;
		display: inline-block;
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;
		background-position-x: 88%;
		text-align: center;
		clear: both;
	}

	.section-header-line{
		width: 48px;;
		border: 1.5px solid #41b3ff;
		float: left;
		margin-top: 22.5px;
	}

	.header-one{
		font-family: Roboto condensed, sans-serif;
		font-size: 48px;
		line-height: 48px;
		vertical-align: middle;
		font-weight: 700;
		color: rgba(255,255,255, 0.40);
		margin: 0 0 0 8px;
		float: left;
		display: inline-block;
	}

	.profile-summary{
		max-width: 740px;
	}
	
	.experience{
		width: 88%;
		margin: 32px 0 0px 0;
		display: inline-block;
		letter-spacing: 0.25px;
	}

	.profile-tagline{
		font-family: Roboto condensed, sans-serif;
		font-size: 20px;
		font-weight: 700;
		margin: 0px 0 16px 0%;
	}

	.profile-description{
		font-size: 16px;
		font-weight: 300;
		margin: 0 0 0px 0;;
	}

	/*SKILLS............STARTS..................................*/
	.skill-summary{
		width: 100%;
		clear: left;
		margin: 32px 0 40px 0px;
		display: block;
		letter-spacing: 0.25px;
		float: left;
		text-align: left;
		box-sizing: border-box;
		padding: 0 64px;
	}

	.skill-set{
		width: 50%;
		box-sizing: border-box;
		padding: 0px 32px 0px 0px;
		text-align: left;
		float: left;
		max-width: 460px;
	}
	
	.skill-two{padding: 0px 0px 0px 32px; margin-bottom: 32px;}

	.skill-icon{
		width: 64px;
		float: left;
		margin-right: 16px;
	}
	
	.hero-head{
		margin: 4px 0 8px 0;
		font-weight:500;
		font-size: 18px;
	}

	.skill-description{
		font-size: 14px;
		font-weight: 300;
		font-style: normal;
		display: table;
		margin: 0;
	}

	/*EXPERIENCE............STARTS....................................*/
		.experience{
			width: 100%;
			margin: 32px 0 32px 0;
			box-sizing: border-box;
			padding: 0 64px;
			display: inline-block;
			letter-spacing: 0.25px;
		}

		.exp-img{
			width: 80%;
			display: none;
		}
	
	.exphr-img{
			width: 100%;
			display: inline-block !important;
			margin: 0px 0 16px 0;
		}

	/*ACTIVITES............STARTS..................................*/
	.activity-summary{
		width: 100%;
		margin: 32px 0 32px 0;
		box-sizing: border-box;
		padding: 0 64px;
		display: inline-block;
		letter-spacing: 0.25px;
		text-align: left;
		text-align: center;	
	}
	
	.project-tiles{
		width: 240px;
		height: 140px;
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: azure;
		margin: 0 10px 24px 10px;	
		text-align: left;
		float: left;
	}

	.project-tiles .tile-des{
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0, 0.6);
		float: left;

	}
	.tile-label{
		font-weight: 500;
		margin: 24px 40px 8px 24px;
		max-width: 300px;
	}

	.tile-services{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 25px;
	}
	
	/* CUSTOM FOOTER............STARTS..........................*/
	.footer-contents{
		width: 100%;
		display: inline-block;
		max-width: 800px;
	}

	.footer-contents-1{
		margin: 0 0 30px 16px;
		max-width: 320px;
	}

	.footer-contents-2{
		float: right;
		margin: 0 0 0px 0;
	}

	.footer-links{
		display: inline-block;
		margin: 30px 0 0px 0;
	}
}

@media (min-width: 992px) and (max-width: 1199.9px){	
	/*.............CUSTOM COMMON....................*/
	.logo{
		margin-left: 34px;
	}
	
	/*HERO............STARTS...................................*/
	#hero {
		height: 100vh;
		width: 100vw;
		position: relative;
		top: 0;
		background-color: #53585D;
		background-image: url( ../assets/Images/shantanu.jpg);
		background-repeat: no-repeat;
		background-position: 300% 10%;
		background-size: 108%;
	}
	
	.profile-text{
		width: 34%;
		float: right;
		position: absolute;
		top: 32%;
		right: 5%;
	}

	#scroll{
		display: inline-block;
		position: absolute;
		z-index: 600;
		bottom: 0;
		left: 46%;
	}

	/*WHO AM I............STARTS...............................*/
	.section-header {
		width: 100vw;
		box-sizing: border-box;
		padding:56px 0 16px 0;
		margin: 0;
		display: inline-block;
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;
		background-position-x: 88%;
		text-align: center;
		clear: both;
	}

	.section-header-line{
		width: 56px;
		border: 1.5px solid #41b3ff;
		float: left;
		margin-top: 26.5px;
	}

	.header-one{
		font-family: Roboto condensed, sans-serif;
		font-size: 56px;
		line-height: 56px;
		vertical-align: middle;
		font-weight: 700;
		color: rgba(255,255,255, 0.40);
		margin: 0 0 0 8px;
		display: inline-block;
		float: left;
	}

	.profile-summary{
		max-width: 800px;
	}

	.profile-tagline{
		font-family: Roboto condensed, sans-serif;
		font-size: 24px;
		font-weight: 500;
		margin: 0px 0 16px 0%;
	}

	.profile-description{
		font-size: 16px;
		font-weight: 300;
		margin: 0 0 0px 0;;
	}

	/*SKILLS............STARTS..................................*/
	.skill-summary{
		width: 100%;
		clear: left;
		margin: 32px 0 40px 0px;
		display: block;
		letter-spacing: 0.25px;
		float: left;
		text-align: left;
		box-sizing: border-box;
		padding: 0 72px;
	}

	.skill-set{
		width: 50%;
		box-sizing: border-box;
		padding: 0px 40px 0px 0px;
		text-align: left;
		float: left;
	}
	
	.skill-two{padding: 0px 0px 40px 40px;}

	.skill-icon{
		width: 64px;
		float: left;
		margin-right: 16px;
	}
	
	.hero-head{
		margin: 4px 0 8px 0;
		font-weight: 500;
		font-size:18px;
	}

	.skill-description{
		font-size: 14px;
		font-weight: 300;
		font-style: normal;
		display: table;
		margin: 0;
	}

	/*EXPERIENCE............STARTS....................................*/
		.experience{
			width: 100%;
			margin: 32px 0 40px 0;
			box-sizing: border-box;
			padding: 0 72px;
			display: inline-block;
			letter-spacing: 0.25px;
		}

		.exp-img{
			width: 80%;
			display: none;
		}
	
		.exphr-img{
			width: 100%;
			display: inline-block !important;
			margin: 0px 0 16px 0;
		}

	/*ACTIVITES............STARTS..................................*/
	.activity-summary{
		width: 100%;
		margin: 32px 0 40px 0;
		box-sizing: border-box;
		padding: 0 72px;
		display: inline-block;
		letter-spacing: 0.25px;
		text-align: left;
		text-align: center;	
	}
	
	.project-tiles{
		width: 280px;
		height: 160px;
		background-repeat: no-repeat;
		background-size: 100%;
		background-color: azure;
		margin: 0 10px 30px 10px;	
		text-align: left;
		float: left;
	}

	/*.tile-two{margin: 0 0px 20px 0px;}*/

	.project-tiles .tile-des{
		width: 100%;
		height: 100%;
		float: left;

	}
	.tile-label{
		font-weight: 500;
		margin: 24px 40px 8px 24px;
		max-width: 300px;
	}

	.tile-services{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 25px;
	}
	
	/* CUSTOM FOOTER............STARTS..........................*/
	.footer-contents{
		width: 88%;
		max-width: 960px;
		display: inline-block;
	}

	.footer-contents-1{
		margin: 0 0 30px 0;
		max-width: 460px;
	}

	.footer-contents-2{
		float: right;
		margin: 0 0 0px 0;
	}

	.footer-links{
		display: inline-block;
		margin: 30px 0 0px 0;
	}
}

@media (min-width: 1200px) and (max-width: 1460.9px){	
	
	/*HERO............STARTS...................................*/
	#hero {
		height: 100vh;
		width: 100vw;
		position: relative;
		top: 0;
		background-color: #53585D;
		background-image: url( ../assets/Images/shantanu.jpg);
		background-repeat: no-repeat;
		background-position: -60% 8%;
		background-size: 80%;
	}
	
	.profile-text{
		width: 34%;
		float: right;
		position: absolute;
		top: 32%;
		right: 5%;
	}

	#scroll{
		display: inline-block;
		position: absolute;
		z-index: 600;
		bottom: 0;
		left: 46%;
	}

	/*WHO AM I............STARTS...............................*/
	.section-header {
		width: 100vw;
		box-sizing: border-box;
		padding:56px 0 24px 0;
		display: inline-block;
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;
		background-position-x: 88%;
		text-align: center;
		clear: both;
	}
	
	.section-header-line{
		width: 64px;
		border: 1.5px solid #41b3ff;
		float: left;
		margin-top: 30.5px;
	}

	.header-one{
		font-family: Roboto condensed, sans-serif;
		font-size: 64px;
		line-height: 64px;
		vertical-align: middle;
		font-weight: 700;
		color: rgba(255,255,255, 0.40);
		margin: 0 0 0 8px;
		display: inline-block;
		float: left;
	}
	
	.profile-summary{
		max-width: 900px;
	}

	.profile-tagline{
		font-family: Roboto condensed, sans-serif;
		font-size: 24px;
		font-weight: 500;
		margin: 0px 0 16px 0%;
	}

	.profile-description{
		font-size: 16px;
		font-weight: 300;
		margin: 0 0 0px 0;;
	}

	/*SKILLS............STARTS..................................*/
	.skill-summary{
		width: 100%;
		clear: left;
		margin: 40px 0 40px 0px;
		display: block;
		letter-spacing: 0.25px;
		float: left;
		text-align: left;
		box-sizing: border-box;
		padding: 0 80px;
	}

	.skill-set{
		width: 46%;
		box-sizing: border-box;
		padding: 0px 40px 0px 0px;
		text-align: left;
		float: left;
		max-width: 600px;
	}
	
	.skill-two{padding: 0px 0px 48px 40px;}

	.skill-icon{
		width: 80px;
		float: left;
		margin-right: 20px;
	}
	
	.hero-head{
		margin: 4px 0 12px 0;
		font-size: 20px;
		font-weight:500;
	}

	.skill-description{
		font-size: 14px;
		font-weight: 300;
		font-style: normal;
		display: table;
		margin: 0;
	}

	
	/*EXPERIENCE............STARTS....................................*/
		.experience{
			width: 100%;
			margin: 40px 0 40px 0;
			box-sizing: border-box;
			padding: 0 80px;
			display: inline-block;
			letter-spacing: 0.25px;
		}

		.exp-img{
			width: 80%;
			display: none;
		}
	
		.exphr-img{
			width: 100%;
			display: inline-block !important;
			margin: 0px 0 16px 0;
		}

	/*ACTIVITES............STARTS..................................*/
	.activity-summary{
		width: 100%;
		margin: 40px 0 40px 0;
		box-sizing: border-box;
		padding: 0 80px;
		display: inline-block;
		letter-spacing: 0.25px;
		text-align: left;
		text-align: center;	
	}
	
	.project-tiles{
		width: 300px;
		height: 180px;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: azure;
		margin: 0 10px 20px 10px;	
		text-align: left;
		float: left;
	}

	/*.tile-two{margin: 0 0px 20px 0px;}*/

	.project-tiles .tile-des{
		width: 100%;
		height: 100%;
		float: left;

	}
	.tile-label{
		font-weight: 500;
		margin: 24px 40px 8px 24px;
		max-width: 240px;
	}

	.tile-services{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 25px;
	}
	
	/* CUSTOM FOOTER............STARTS..........................*/
	.footer-contents{
		width: 88%;
		max-width: 960px;
		display: inline-block;
	}

	.footer-contents-1{
		margin: 0 0 30px 0;
		max-width: 460px;
	}

	.footer-contents-2{
		float: right;
		margin: 0 0 0px 0;
	}

	.footer-links{
		display: inline-block;
		margin: 30px 0 0px 0;
	}
}

@media (min-width: 1461px) {
	
	/*HERO............STARTS...................................*/
	#hero {
		height: 100vh;
		width: 100vw;
		position: relative;
		top: 0;
		background-color: #53585D;
		background-image: url( ../assets/Images/shantanu.jpg);
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: -24% 8%;
		background-size: 80%;
	}

	.hero-bg{
		max-width: 480px;
		background-color: rgba(0,0,0,0.6);
		float: left;
		margin: 120px 8%;
		box-sizing: border-box;
		padding:32px 64px 8px 32px;
		display: block;
	}

	.hero-header{
		font-size: 48px;
		font-family: Roboto Condensed, sans-serif;
		font-weight: 700;
		margin-bottom: 32px;
		height: 240px;
		float: left;
	}

	.hero-label{
		width: 180px;
		font-size: 16px;
		float: left;
		margin-bottom: 24px;
	}

	.hero-head{
		font-weight: 500;
		margin: 0 0 4px 0;
	}

	.hero-content{
		font-weight: 300;
		margin: 0;
	}

	.hero-left{
		float: right;
	}

	.profile-text{
		width: 32%;
		float: right;
		position: absolute;
		top: 32%;
		right: 5%;
	}

	#scroll{
		display: inline-block;
		position: absolute;
		z-index: 600;
		bottom: 0;
		left: 49%;
	}
	.scroll-text{
		width: 64px;
		display: block;
	}

	.mouse{
		margin: 8px 16px;
		width: 32px;
	}


	/*WHO AM I............STARTS...............................*/
	.section-header {
		width: 100vw;
		box-sizing: border-box;
		padding:56px 0 24px 0;
		margin: 0;
		display: inline-block;
	  	background-position: center;
	  	background-repeat: no-repeat;
	  	background-size: cover;
		background-position-x: 88%;
		text-align: center;
		clear: both;
	}

	.section-header-line{
		width: 64px;;
		border: 1.5px solid #41b3ff;
		float: left;
		margin-top: 30.5px;
	}

	.header-one{
		font-family: Roboto condensed, sans-serif;
		font-size: 64px;
		line-height: 64px;
		vertical-align: middle;
		font-weight: 700;
		color: rgba(255,255,255, 0.40);
		margin: 0 0 0 8px;
		float: left;
		display: inline-block;
	}

	.profile-summary{
		max-width: 900px;
	}

	.profile-tagline{
		font-family: Roboto condensed, sans-serif;
		font-size: 28px;
		font-weight: 700;
		margin: 0px 0 20px 0%;
	}

	.profile-description{
		font-size: 16px;
		font-weight: 300;
		margin: 0 0 24px 0;
		line-height: 24px;
	}

	/*SKILLS............STARTS..................................*/

	.skill-summary{
		width: 80%;
		clear: left;
		margin: 40px 0 0px 0px;
		display: block;
		letter-spacing: 0.25px;
		float: left;
		text-align: left;
		box-sizing: border-box;
		padding: 0 80px;
	}

	.skill-set{
		width: 50%;
		box-sizing: border-box;
		padding: 0px 48px 0px 0px;
		text-align: left;
		float: left;
		max-width: 640px;
	}
	
	.skill-two{padding: 0px 0px 48px 48px;}

	.skill-icon{
		width: 80px;
		float: left;
		margin-right: 24px;
	}

	.skill-description{
		font-size: 16px;
		font-weight: 300;
		font-style: normal;
		display: table;
	}
	
	.hero-head{
		margin: 4px 0 12px 0;
		font-size:24px;
		
	}

	/*EXPERIENCE............STARTS....................................*/
		.experience{
			width: 100%;
			margin: 40px 0 40px 0;
			box-sizing: border-box;
			padding: 0 80px;
			display: inline-block;
			letter-spacing: 0.25px;
		}

		.exp-img{
			width: 80%;
			display: none;
		}
	
		.exphr-img{
			width: 100%;
			max-width: 2238px;
			display: inline-block !important;
			margin: 0px 0 16px 0;
		}

	/*ACTIVITES............STARTS..................................*/
	.activity-summary{
		width: 100%;
		margin: 40px 0 40px 0;
		box-sizing: border-box;
		padding: 0 80px;
		display: inline-block;
		letter-spacing: 0.25px;
		text-align: left;
		text-align: center;	
	}
	
	.project-tiles{
		width: 320px;
		height: 200px;
		background-repeat: no-repeat;
		background-size: cover;
		background-size: 100%;
		float: left;
		background-color: azure;
		margin: 0 24px 24px 0px;
		text-align: left;
	}

	.project-pic{
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
	}

	.project-tiles .tile-des{
		width: 100%;
		height: 100%;
		float: left;

	}
	.tile-label{
		font-weight: 700;
		margin: 24px 40px 8px 24px;
		max-width: 260px;
	}

	.tile-services{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 25px;
	}

	.source{
		font-size: 12px;
		font-weight: 300;
		margin: 0px 40px 0px 13px;
		position: relative;
		bottom: -64px;
	}
	
	/* CUSTOM FOOTER............STARTS..........................*/
	.footer-contents{
		width: 88%;
		max-width: 960px;
		display: inline-block;
	}

	.footer-contents-1{
		margin: 0 0 30px 0;
		max-width: 460px;
	}

	.footer-contents-2{
		float: right;
		margin: 0 0 0px 0;
	}

	.footer-links{
		display: inline-block;
		margin: 30px 0 0px 0;
	}
}