@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:400,400i,700,700i|PT+Sans:400,400i,700,700i');

*{
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans', sans-serif;
}

.spinner {
  width: 40px;
  height: 40px;
  background-color: #ddd;
    position: absolute;
top: 48%;
left: 48%;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
  z-index: 10000;
}

.spinner-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #333;
    z-index: 9999;
}

@-webkit-keyframes sk-rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes sk-rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

body{
	color: #281f48;
	font-family: 'Barlow Semi Condensed', sans-serif;
}

.top-bar{
	height: 50px;
	background: #1f1f1f;
	position: fixed; 
	margin-top: 0;
	width: 100%;
	z-index: 99;
}

.top-bar .menu-text{
	padding-top: 5px;
	color: #fff;
}

.menu-text a{
	color: #fff;
}

.top-bar ul{
	background: #1f1f1f;

}

.top-bar .top-bar-right ul li{
	background: #1f1f1f;
	display: inline-block;
	list-style-type: none;
	padding-right: 30px;
}

.top-bar .top-bar-right ul li a{
	text-decoration: none;
	background: none;
	color: #fff;
	font-size: 1.2em;
	font-family: 'Barlow Semi Condensed', sans-serif;
}

.hero{
	width: 100%;
	padding-top: 40px;
	min-height: 450px;
	background: url("../images/aboutBK.png")center center no-repeat fixed;
	background-size: cover;
	/*-webkit-filter: sepia(55%);*/
	/*filter: sepia(55%);*/
	/* border-bottom: 5px solid #281f48; */
}

.hero .row{
	max-width: 80rem;
	padding-right: 0;
}

.hero h1{
	/*color: #fff !important;*/
	font-size: 3em;
	font-weight: bold;
	margin-left: 52%;
	margin-top: 150px;
	margin-bottom: 0;
	background: #fff;
	padding: 10px 10% 10px 2.5%;
}

.hero p{
	margin-left: 52%;
	color: #281f48 !important;
	font-size: 1.2em;
	background: #fff;
	padding: 0px 10% 20px 5%;
}

h1, h2, h3, h4{
	font-weight: bold;
	font-family: 'PT Sans', sans-serif;
}

span{
	font-family: 'PT Sans', sans-serif;
}

.colorBar{
  width:100%;
   background-image: -webkit-linear-gradient(left, 
    #8F2D6E,
    #8F2D6E 20%,
    #D7138C 20%,
    #D7138C 40%,
    #F68C46 40%,
    #F68C46 60%,
    #68CBDD 20%,
    #68CBDD 80%,
    #1896A6 20%);
  background-image: -moz-linear-gradient(left, 
    #8F2D6E,
    #8F2D6E 20%,
    #D7138C 20%,
    #D7138C 40%,
    #F68C46 40%,
    #F68C46 60%,
    #68CBDD 20%,
    #68CBDD 80%,
    #1896A6 20%);
  background-image: -ms-linear-gradient(left, 
    #8F2D6E,
    #8F2D6E 20%,
    #D7138C 20%,
    #D7138C 40%,
    #F68C46 40%,
    #F68C46 60%,
    #68CBDD 20%,
    #68CBDD 80%,
    #1896A6 20%);
  background-image: linear-gradient(to right, 
    #8F2D6E,
    #8F2D6E 20%,
    #D7138C 20%,
    #D7138C 40%,
    #F68C46 40%,
    #F68C46 60%,
    #68CBDD 20%,
    #68CBDD 80%,
    #1896A6 20%);
  height:10px;
}

/*Profile Image*/
.profile-image{
	height: 260px;
	width: 220px;
	padding: 10px 10px 50px 10px;
	position: absolute;
	clear: both;
	top: 350px;
	left: 20%;
	text-align: center;
	background-image: -webkit-linear-gradient(top, 
    #fff,
    #fff 20%,
    #fff 20%,
    #fff 40%,
    #fff 40%,
    #fff 60%,
    #fff 20%,
    #fff 85.75%,
    #fff 20%);
}

.profile-image img{
	max-width: 180px;
}

.profile-image div.social{
	display: inline-block;
}

.profile-image div.social a i{
	color: #281f48;
	height: 24px;
	width: 24px;
	border-radius: 11px;
	display: inline-block;
	margin: 9px 10px 5px 10px;
	opacity: 1;
	transition: all 0.3s ease-in-out;
}

.profile-image div.social a:hover i{
    opacity: 0.7;
    cursor: pointer;
}

#about{
	/*background: url("../images/aboutBK.png")center center no-repeat fixed;*/
	/*background-size: cover;*/
	background: #281f48;
	color: #fff; /*indigo-purple*/
	min-height: 500px;
	padding-top: 150px;
	padding-bottom: 100px;
}

#about h2{
	margin-top: 50px;
	margin-bottom: 40px;
}

#work{
	color: #281f48;
	min-height: 700px;
	padding-top: 100px;
	padding-bottom: 100px;
	box-shadow: inset 0px 5px 15px 5px #666666;
	background: #efefef;
}

#work h2{
	color: #F68C46;
}

.deskTimeline{
	margin-top: 75px;
}

.mobileTimeline{
	margin-top: 50px;
}

.deskTimeline .item{
	display: inline-block;
	list-style-type: square;
	border-left: 2px solid #281f48;
	padding-left: 70px;
	padding-bottom: 50.5px;
}

.deskTimeline .item:before{
	content: "";
	width: 14px;
	height: 14px;
	background: #fff;
	position: absolute;
	left: 9px;
	top: 5px;
	border: 2px solid #281f48;
}

.mobileTimeline .lineItem{
	border-left: 2px solid #281f48;
	padding-left: 15px;
	padding-bottom: 45px;
}

.deskTimeline .item-name .item {
    padding-bottom: 5px;
}

.item-name, .item-title{
	font-weight: bold;
	font-size: 1.05em;
}

.item-name,
.item-desc {
    margin-bottom: 0;
}

/*Work Experience Timeline */
.workExpTitle{
	margin-top: 150px;
}

.workTimeline{
	margin-top: 75px;
}

.workTimeline > li{
	overflow: hidden;
	margin: 0;
	position: relative;
}

.workTimeline li{
	list-style-type: none;
}

.workTimeline li.row div:first-child(){
	margin-top: 20px;
}

.witem-title{
	padding-top: 25px;
	font-weight: bold;
	font-size: 1.05em;
	width: 120px;
}

.wtimeline-date{
	width: 110px;
	float: left;
}

.wtimeline-content{
	width: 100%;
	float: left;
	border-left: 3px solid #281f48;
	padding-left: 40px;
	padding-top: 25px;
}

.wtimeline-content:before{
	content: "";
	width: 14px;
	height: 14px;
	background: #fff;
	position: absolute;
	left: 10.5px;
	top: 32px;
	border: 2px solid #281f48;
	/*border-radius: 100%;*/
}

/*Work Timeline in Mobile View*/
.workTimeline.mobile .wtimeline-content:before{
	display: none;
}

/*Case Studies*/
#skills{
	min-height: 700px;
	padding-top: 100px;
	padding-bottom: 100px;
	color: #fff;
	background: #281f48;
}

#skills h2{
	margin-bottom: 40px;
}

.gallery{
	padding: 0px 0px 100px 0px;
}

.gallery .filters {
	background: rgba(0,0,0,0.3);
	width: 100%;
}

.gallery .filters ul {
	display: flex;
	margin-left: 0px;
	justify-content: center;
}

.gallery .filters ul li {
	display: inline;
	padding: 10px 15px;
	float: left;
	text-align: center;
	background: rgba(0,0,0,0);
	list-style-type: none;
	transition: 0.3s all ease-in-out;
}

.gallery .filters ul li:hover {
	cursor: pointer;
	background: rgba(0,0,0,0.4);
}

#gallery ul li {
	list-style-type: none;
	padding: 0px;
}

.large-up-4 > .column:nth-of-type(4n+1), .large-up-4 > .columns:nth-of-type(4n+1) {
    clear: inherit;
}

#gallery ul li div{
	width: 100%;
	height: 150px;
	background: #D3A972;
	padding: 0;
	border: none;
	margin-bottom: 0px;
	overflow: hidden;
	position: relative;
}

#gallery ul li .btn18 {
	background: #fff;
}

#gallery ul li div img {
	box-sizing: border-box;
	width: 100%;
	min-height: 100%;
	transition: all 0.5s ease-in-out;
}

#gallery ul li div:hover > img {
	-webkit-filter: grayscale(70%) brightness(50%);
	filter: grayscale(70%) brightness(50%);
}

#gallery ul li div span.hoverIcon {
	position: absolute;
	color: #fff;
	margin: 0 auto;
	left: 0;
	width: 100%;
	top: 100%;
	transition: 0.25s all ease-in-out;
}

#gallery ul li div span.hoverIcon i {
	font-size: 2.5em;
	margin-bottom: 5px;
}

#gallery ul li div:hover > span.hoverIcon {
	top: 37%;
}

#case8Modal > iframe,
#case9Modal > iframe {
	height: 20.5vw;
}

.progress.success{
	background: #9c9c9c;
}

.progress.success .progress-meter{
    position: relative;
	background: #efefef/*#4A306D#0E273C*/;
	width: 100%;
	-webkit-animation: shrinkBar 1s forwards cubic-bezier(0,0.7,0.3,1);
    animation: shrinkBar 1s forwards cubic-bezier(0,0.7,0.3,1);
}

@-webkit-keyframes shrinkBar {
    0% {
        width: 100%;
    }
    
    100% {
        width: 0%;
    }
}

@-keyframes shrinkBar {
    0% {
        width: 100%;
    }
    
    100% {
        width: 0%;
    }
}

.progress.success .progress-meter:before {
    position: absolute;
    right: 0;
    background: #9c9c9c;
    top: 0;
    z-index: 555;
    width: 10%;
}

.progress.success .progress-meter.growBar {
    width: 0%;
    -webkit-animation: growBar 1s forwards cubic-bezier(0,0.7,0.3,1);
    animation: growBar 1s forwards cubic-bezier(0,0.7,0.3,1);
}

@-webkit-keyframes growBar {
    0% {
        width: 0%;
    }
    
    100% {
        width: 100%;
    }
}

@-keyframes growBar {
    0% {
        width: 0%;
    }
    
    100% {
        width: 100%;
    }
}

/*Contact Section*/
#contact{
	padding-top: 100px;
	paDDING-BOTTOM: 75px;
	background: #1f1f1f;
	color: #fff;
}

.contactA a{
		color: #68CBDD !important;
	}

.con2{
	padding: 50px;
	/*border-left: 1px solid #fff;*/
}

#contact .colorBar{
	height: 3px;
	width: 56%;
}

#contact .button{
	width: 100%;
	background: #8F2D6E;
}

#contact .button:hover{
	background: #F68C46;
}

form#contact{
	padding-top: 0;
	padding-right: 50px;
}


footer{
	background: #1f1f1f;
	color: #fff;
}

/*TABLET ONLY STYLES*/
@media (max-width: 1024px) {
	
}

/*MOBILE ONLY STYLES*/
@media (max-width: 639px) {
	.hamburger{
	  position: fixed;
	  top: 5px;
	  left: 75%;
	}
	

	nav.not-active{
	  display: none;
	}

	nav.is-active{
	  width: 100%;
	  text-align: center;
	  font-size: 3.75em;
	  margin: 0px auto auto -8px;
	  font-family: 'Cuprum', sans-serif;
	  background: rgba(0,0,0,0);
		animation-name: fadeUp;
		animation-duration: .25s;
		animation-timing-function: linear;
		animation-delay: 0s;
		animation-iteration-count: 1;	
	}

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

	nav.is-active ul a li{
	  display: block;
	  list-style-type: none;
	  padding: 30px 0;
	  color: #fff;
	  font-size: .65em;
	  margin-left: 8px;
	}

	.hamburger div{
	  height: 3px;
	  background: #fff;
	  width: 40px;
	  margin-top: 5px;
	  transition: .5s;
	}
	
	/*Hero Area*/
	#about .row .small-12, #work .row .small-12{
		padding: 0px 50px;
	}
	
	#skills .row .small-12, #contact .row .small-12{
		padding: 0px 25px;
	}
	
	#contact{
			margin: -1px auto;
	}
	
	form#contact{
		padding-right: 0;
		padding-bottom: 20px;
	}
	
	#contact .small-12.medium-12.large-12.columns{
		padding: 0px 0.625rem;
	}
	
	.con2{
		border-left: none;
	}
	
	.hero{
		width: 100%;
		min-height: 250px !important;
	}
	
	.hero h1{
		/*color: #fff !important;*/
		font-size: 2em;
		font-weight: bold;
		margin-left: 0%;
		margin-top: 55px;
		margin-bottom: 0;
		background: #fff;
		padding: 10px;
	}

	.hero p{
		margin-left: 0%;
		color: #281f48 !important;
		font-size: 1em;
		background: #fff;
		padding: 0px 20px 11px;
	}
	
	/*Profile Image*/
.profile-image{
		max-height: 260px;
		max-width: 220px;
		padding: 10px 10px 50px 10px;
		position: absolute;
		clear: both;
		top: 275px;
		left: calc((100% - 220px)/2);
		text-align: center;
		background-image: -webkit-linear-gradient(top, 
		#fff,
		#fff 20%,
		#fff 20%,
		#fff 40%,
		#fff 40%,
		#fff 60%,
		#fff 20%,
		#fff 85.75%,
		#fff 20%);
	}

	.profile-image img{
		max-width: 180px;
	}

	.profile-image div.social{
		display: inline-block;
	}

	.profile-image div.social a i{
		color: #281f48;
		height: 24px;
		width: 24px;
		border-radius: 11px;
		display: inline-block;
		margin: 9px 10px 5px 10px;
	}
	
	#about h2{
		margin-top: 150px;
		margin-bottom: 5px;
	}
	
	#about p{
		font-size: 1.1em;
	}
	
	#gallery ul li div{
		height: 185px;
	}
	
	/*Timeline*/
	.mobileTimeline .lineItem{
		border-left: none;
	}

	.workTimeline.show-for-small-only div .row.lineItem .small-12, .mobileTimeline.show-for-small-only .row.lineItem .small-12{
		padding: 0px 30px 0px 20px !important;
	} 

	.workTimeline.show-for-small-only div .row.lineItem{
		margin-bottom: 50px;
	}
	
	.item-title, .witem-title{
		font-size: 1.65em;
		font-weight: bold;
	}

	h2{
		font-size: 2.08em;
	}
	
	#work h2{
		color: #f68c46;
	}

	.contactA a{
		color: #68CBDD !important;
	}
}