/* ----------------------------------------      
HTML RESET
---------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font: inherit; vertical-align: baseline;
}

body { 
	font-size:100%; 
	line-height: 1;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
	text-shadow: none; 
	font-family: 'StabilGrotesk-Regular', Helvetica, Tahoma, Verdana, Arial, sans-serif;
	background: #141414;
	color: #fff;
	transition: .2s;
}

.body-bg { background: #141414; }

body .amazon-wrapper {
  background: #211e1f !important;
}

body .hum-wrapper {
  background-color: #ffa682;
}

body .dapper-wrapper {
  background-color: #DFDBFF;
  color: #000 !important;
  min-height: 100vh;
}

body .grip-bg {
  background-color: #232323;
  color: #fff !important;
}

.cast-bg {
  background-color: #F8DC6F;
}

.bg-color {
	background-image:  
	radial-gradient(at 40% 40%, hsla(28,100%,74%,1) 0, transparent 50%),  
	radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0, transparent 50%),  
	radial-gradient(at 0% 50%, hsla(355,85%,93%,1) 0, transparent 50%),  
	radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0, transparent 50%),  
	radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0, transparent 50%),  
	radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0, transparent 50%),  
	radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0, transparent 50%);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	transition: .2s;
}



.bg-color .links li a, .bg-color .job-title .c5, 
.bg-color .pink,.bg-color .grey,.bg-color .job-title::after, .bg-color .music p span {
	color: #fff !important;
}


.bg-color .job {
    border-bottom: 1px solid #fff;
}

.bg-color .accordion-wrapper {
    border-top: 1px solid #fff;
}

.bg-color .job:hover .job-title .c5, .bg-color .job:hover .job-title::after {
	color: #fff;
}


.bg-color .circle{
	background-color: #fff !important;
}



/* ----------------------------------------      
Text Select 
---------------------------------------- */
::selection { background: #EEBAC3; color: #141414; }
::-moz-selection { background: #EEBAC3; color: #141414;}


/* ----------------------------------------      
Custom Scroll Bar
---------------------------------------- */
::-webkit-scrollbar {
    width: 2.8em;
}
::-webkit-scrollbar-button {
    background: #141414;
}
::-webkit-scrollbar-track-piece {
    background: #290e0e;
}
::-webkit-scrollbar-thumb {
    background: #b6102c;
}



/* ----------------------------------------      
Labil
---------------------------------------- */

@font-face {
  font-family: 'StabilGrotesk-Regular';
  src: url('/fonts/StabilGrotesk-Regular.woff') format('woff'), url('/fonts/StabilGrotesk-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'StabilGrotesk-Bold';
  src: url('/fonts/StabilGrotesk-Bold.woff') format('woff'), url('/fonts/StabilGrotesk-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: bold;
}

@font-face {
  font-family: 'LabilGrotesk-Regular';
  src: url('/fonts/LabilGrotesk-Regular.woff') format('woff'), url('/fonts/LabilGrotesk-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

.bold {
  font-family: 'StabilGrotesk-Bold';
  font-weight: bold;
}


/* ----------------------------------------      
HTML RESET 
---------------------------------------- */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, label, legend { display: block; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-spacing: 0; }

/* ----------------------------------------      
Clearfixes 
---------------------------------------- */
.row:before,.row:after,.clearfix:before,.clearfix:after{content:'';display:table}
.row:after,.clearfix:after{clear:both}
.row,.clearfix{zoom:1}


/* ----------------------------------------      
Grid 
---------------------------------------- */
*{box-sizing:border-box; -ms-box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
body{margin:0 auto;  }
.grid{margin:0 auto; max-width:1600px; width:100%; padding: 5%; padding-top: 0px !important;} 
.grid100{margin:0 auto; max-width:100%; width:100%;} 
.g1600{margin:0 auto; max-width:1600px; width:100%;}
.grid1600{margin:0 auto; max-width:1600px; width:100%;   }
.g1500{margin:0 auto; max-width:1500px; width:100%;}
.g1400{margin:0 auto; max-width:1400px; width:100%;}
.g1200{margin:0 auto; max-width:1200px; width:100%;}
.g1140{margin:0 auto; max-width:1140px; width:100%;}
.g1024{margin:0 auto; max-width:1024px; width:100%;}
.g960{margin:0 auto; max-width:960px; width:100%;}
.row{width:100%; margin:0 auto;}
.c1{width:8.33%;}
.c2{width:16.66%;}
.c3{width:25%;}
.c4{width:33.3333333%;}
.c5{width:41.66%;}
.c6{width:50%;}
.c7{width:58.33%;}
.c8{width:66.66%;}
.c9{width:75%;}
.c10{width:83.33%;}
.c11{width:91.66%;}
.c12{width:100%; min-height:1px; float:left; position:relative;}
.c1-5{width:20%;}/* This column can be used as a one fifth of the row */
.c1-8{width:12.5%;}/* This column can be used as a one eigth of the row */ 
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c1-5,.c1-8 {
	min-height:1px; 
	float:left; 
	position:relative;
}

.c1.first,.c2.first,.c3.first,.c4.first,.c5.first,.c6.first,.c7.first,.c8.first,.c9.first,.c10.first,.c11.first,.c1-5.first,.c1-8.first {
	padding-left: 0; 
	position:relative;
}
.c1.last,.c2.last,.c3.last,.c4.last,.c5.last,.c6.last,.c7.last,.c8.last,.c9.last,.c10.last,.c11.last,.c1-5.last,.c1-8.last {
	padding-right: 0; 
	position:relative;
}

/* ----------------------------------------      
Alignments
---------------------------------------- */
.centered{float: none; margin: auto;}
.left {float: left;}
.right {float: right;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}

/* ----------------------------------------      
Spacing
---------------------------------------- */
.space-top {margin-top: 20px;}
.space10 {margin: 10px;}
.space-top7 {margin-top: 7px;}
.space-top {margin-top: 20px;}
.space-bot {margin-bottom: 20px;}
.space-top20 {margin-top: 20px;}
.space-top40 {margin-top: 40px;}
.space-bot40 {margin-bottom: 40px;}
.space-top60 {margin-top: 60px;}
.space-bot60 {margin-bottom: 60px;}
.space-top80 {margin-top: 80px;}
.space-bot80 {margin-bottom: 80px;}
.space-top100 {margin-top: 100px;}
.space-bot100 {margin-bottom: 100px;}
.space-top120 {margin-top: 120px;}
.space-bot120 {margin-bottom: 120px;}
.space-top150 {margin-top: 150px;}
.space-top200 {margin-top: 200px;}
.space-top300 {margin-top: 300px;}
.space-bot150 {margin-bottom: 150px;}
.space-bot200 {margin-bottom: 200px;}
.space-right20 { margin-right: 20px;}
.space-right40 { margin-right: 40px;}
.space-left20 { margin-left: 20px;}
.space-left40 { margin-left: 40px;}

.pad-top100 {padding-top: 100px;}
.pad-top200 {padding-top: 200px;}
.pad-bot100 {padding-bottom: 100px;}
.space-bot200 {margin-bottom: 200px;}
.pad-left5 { padding-left: 5%; }


/* ----------------------------------------      
Typography
---------------------------------------- */

ul {
	list-style-type: none;
}


a {
    text-decoration: none;
    line-height: inherit;
    color: inherit;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.big-type p {
  font-family: 'StabilGrotesk-Bold', Helvetica, Tahoma, Verdana, Arial, sans-serif;
	display:block;
	float: left;
	font-size: 3.5rem;
	line-height: 1.2;
	font-weight: bold;
	margin-bottom: 50px;
}

.bio p {
  max-width:775px;
}

p {
	font-size: 1.3rem;
	line-height: 1.3;
}

p.caption {
  font-size: 1rem;
  line-height: 1.3;
}

.med-large {
  font-size: 2.5rem;
}

.med-large a{
  text-decoration: underline;
}

.med-large a:hover{
  opacity: .75;
}


h1 {
	display: block;
	float:left;
	font-size: 1.5rem !important;
	line-height: 1.2 !important;
	margin: 0 !important;
	margin-right: 5px !important;
}


/* ----------------------------------------      
Color
---------------------------------------- */

.white {
	color: #fff;
}

.pink {
	color: #c21d39;
}

.grey { color: #6a6a6a; }

.green-bg { background-color: #006241;}
.green { color: #00754A;}
.lt-warm-bg {background-color: #F2F0EB;} 

.ah-blue-bg { background: #0000ff; }
.ah-grey-bg { background: #ececec; }
.ah-blue { color: #0000ff; }
.ah-pink-bg { background-color: rgb(245, 227, 223) !important; }
.ah-pink { color: rgb(245, 227, 223) !important; }
.purp-bg {background-color: #7464F0;}


/* ----------------------------------------      
Images
---------------------------------------- */
img { display: block; max-width: 100%; height: auto; }

video {
    display: block;
    min-height: 100%;
    min-width: 100%;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100% !important;
    height: auto !important;
}

.rounded img {
  border-radius: 8px;
}

.rounded video {
  border-radius: 8px;
}


/* ----------------------------------------      
Page fade
---------------------------------------- */

body {
  animation: fadein 1s;
    -moz-animation: fadein 1s; /* Firefox */
    -webkit-animation: fadein 1s; /* Safari and Chrome */
    -o-animation: fadein 1s; /* Opera */
}

@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}



/* ----------------------------------------      
Music
---------------------------------------- */

.music p {
	color: #fff;
	display:block;
	float: left;
	font-size: 1.6rem;
	width: 100%;
}

.music p span{
	color: #fff;
}

.music img {
	display:block;
	float:left;
	border-radius: 8px;
	max-width: 100px;
}

.music .song {
	font-size: 1.6rem;
}


/* ----------------------------------------      
Cursor
---------------------------------------- */

.bio img {
	max-width:275px;
	align-content: center;
}

p.header-about {
	display: block;
	float:none;
  font-size: 1.5rem !important;
  line-height: 1.2;
}

.main-bio a{
	text-decoration: underline;
}


.accordion-wrapper {
  position: relative;
  margin-bottom: .5rem;
  font-size: 1.3rem;
  border-top: 1px solid #6a6a6a;
}

.job {
	border-bottom: 1px solid #6a6a6a;
	cursor: pointer;
	padding-left: 10px;
}


.job-title {
  position: relative;
  padding-top: 20px;
  padding-bottom: 20px;
}

.job-title:hover {
  position: relative;
}

.job-title ul{
  position: relative;
  padding-top: 0px;
  padding-bottom: 30px;
}

.job-title img{
  display: block;
  float: left;
  border-radius: 20px;
  margin-right: 20px;
  margin-top: -6px;
  max-height: 60px;
  max-width: 60px;
}

.job:hover .job-title .c5{
	color: #fff;
	transition: .2s;
}

.job-title .c5{
  color: #6a6a6a;
  padding-top: 5px;
  transition: .2s;
}

.job-title::after {
  content: '▼';
  position: absolute;
  font-size: 1.6rem;
  right: 10px;
  bottom: 35px;
  color: #6a6a6a;
  transform: rotate(0deg);
  transition: .2s;
}

.job-title.active::after {
  content: '▲';
  position: absolute;
  right: 16px;
  right: 10px;
  color: #6a6a6a;
  transition: .2s;
}

.job:hover .job-title .c5{
	color: #fff;
	transition: .2s;
}

.job:hover .job-title::after {
	color: #fff;
	transition: .2s;
}

.job-description {
  display: none;
  font-size: 1.3rem;
  line-height: 1.5;
  padding-top: 10px;
  padding-bottom: 40px;
  padding-right: 5%;
}

.job-description a{
  text-decoration: underline;
}

.job-description img{
  padding-top: 20px;
  padding-bottom: 20px;
}

.job-description video{
  padding-top: 20px;
  padding-bottom: 20px;
}


.icon {
    display: block;
    float: left;
    position: relative;
    font-size: 32px;
    margin-right: 8px;
    margin-top: -5px;
    z-index: 9999;
}

.links li a{
	display:block;
	float: left;
	width: 100%;
	font-size: 3rem;
	line-height: 1.7;
	color: #6a6a6a;
	transition: .2s;
}

.links li a:hover{
	color: #fff;
	transition: .2s;
}

.links li a:hover::after {
	padding-left: 14px;
}

.links li a::after{
    content: '▸';
    padding-left: 10px;
    transition: .2s;
}




/* ------------------------------------- 
Work section
---------------------------------------- */

.project-description {
  padding-right: 50px;
    font-size: 1.25rem;
    line-height: 1.9rem;
    margin-top: 20px;
    margin-bottom: 40px;
}

.project {
  position:relative;
  overflow:hidden;
  border-radius: 8px;
  margin: 10px;
}

.project img {
  max-width:100%;
  -moz-transition:all .5s;
  -webkit-transition:all .5s;
  transition:all .5s;
  -webkit-backface-visibility:hidden;
  -webkit-transform:translateZ(0) scale(1.0,1)
}

.project video {
  max-width:100%;
  -moz-transition:all .5s;
  -webkit-transition:all .5s;
  transition:all .5s;
  -webkit-backface-visibility:hidden;
  -webkit-transform:translateZ(0) scale(1.0,1)
}

.project a {
  display:block;
  float:left;
  width:100%;
}

.project:hover  {
  cursor: pointer !important;
}

.project:hover img {
  cursor: pointer !important;
  -moz-transform:scale(1.05);
  -webkit-transform:scale(1.05);
  transform:scale(1.05)
}

.project:hover video {
  cursor: pointer !important;
  -moz-transform:scale(1.05);
  -webkit-transform:scale(1.05);
  transform:scale(1.05)
}

.project-details .c6 {
  padding-left:0;
}

.project-overlay {
    position: absolute;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -moz-transition: all .25s;
    -webkit-transition: all .25s;
    transition: all .25s;
    cursor: pointer !important;
}

.dapper .project-overlay {
  background: #8223df;
}

.hum .project-overlay {
  background: #211e1f;
}

.grip .project-overlay {
  background: #F5D259;
}

.grip .project-overlay .project-title{
  color: #232323 !important;
}
.grip .project-overlay .project-location{
  color: #232323 !important;
}
.internet .project-overlay {
  background: #0000ff;
}

.starbucks .project-overlay {
  background: #006241;
}

.amazon .project-overlay {
  background: #211e1f;
}

.kexp .project-overlay {
  background: #222222;
}

.kexp .project-overlay .project-title{
  color: #feac31;

}

.rachels-ginger-beer .project-overlay {
  background: #f47353;
}

.ore-studios .project-overlay {
  background: #676766;
}

.amateur-hour .project-overlay {
  background: #2900da;
}

.hire-the-donald .project-overlay {
  background: #ef0606;
}


.project:hover .project-overlay {
    display: block;
    opacity: .96;
}

.project-info {
  position:absolute;
    top: 20px;
    left: 20px;
  opacity:0;
  -moz-transition:all .75s;
  -webkit-transition:all .75s;
  transition:all .75s;
  height: 100%;
    width: 90%;
    padding-top: 20px;
    padding-left: 20px;
}

.project-title {
  color:#fff;
  font-family: 'StabilGrotesk-Bold', Sans-Serif;
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.5;

}

.project-location{
  color:#fff;
  font-size: 1.3rem;
  line-height:27px;
  width:90%;
}
.project:hover .project-info {
  display:block;
  opacity:1; 
  -webkit-animation-duration:.5s;
  animation-duration:.5s;
}

.project:hover .project-location {
  -webkit-animation-duration:1s;
  animation-duration:1s;
  -webkit-animation-fill-mode:both;
  animation-fill-mode:both;
  -webkit-animation-name:fadeInUp;
  animation-name:fadeInUp;
}


/* ----------------------------------------      
Amz
---------------------------------------- */
.amz-bg { background-color: #211e1f;}
.amz-bg .logo a { color: #fff;}
.amz-dark { color: #211e1f;}
.amz-orange { color: #FF9900;}


.password-page { height: 100vh;}
.password-page a { text-decoration: underline;}

.password-page button, input {
    padding: 10px;
    padding-bottom: 14px;
    display: inline;
    margin-bottom: 15px !important;
}

.password-page [type=submit], [type=reset], button, html [type=button] {
    -webkit-appearance: button !important;
    border: 2px solid #fff !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    color: #fff !important;
    margin-left: 20px !important;
     -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.password-page button:hover {
    -webkit-appearance: button;
    border: 2px solid #fff;
    background-color: #fff;
    color: #000;
     -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

.password-page button, input, optgroup, select, textarea {
    font: inherit;
    margin: 0;
    border-radius: 8px;
    outline: none;
    border: 2px solid white;
}

.amazon-wrapper .lt-grey {
  font-size: 1rem;
}

.job-icon img{
  display: block;
  float: left;
  border-radius: 20px;
  margin-right: 20px;
  max-height: 80px;
  max-width: 80px;
  margin-bottom: 20px;
  margin-top: 5px;
}


/* ----------------------------------------      
Sbux
---------------------------------------- */

body .starbucks-wrapper {background-color: #F2F0EB !important; color: #00754A !important;} 

.starbucks-wrapper .team .lt-grey {
  font-size: 1.5rem;
  line-height: 1.5;
}


blockquote {
  font-size: 1.4em;
  font-family: 'StabilGrotesk-Regular', Sans-Serif;
  font-style: italic;
  color: #464646;
  padding: 1.2em 30px 1.2em 75px;
  border-left: 4px solid #464646;
  line-height: 1.6;
  position: relative;
  background: #F2F0EB;
}

blockquote::before {
  font-family: 'arial', Sans-Serif;
  content: "\201C";
  color: #464646;
  font-size: 4em;
  position: absolute;
  left: 10px;
  top: -10px;
}

blockquote span {
  display: block;
  font-style: normal;
  font-weight: bold;
  margin-top: 1em;
}

/* ----------------------------------------      
Media Queries
---------------------------------------- */
/* Media query for 1024 Screens */
@media only screen and (max-width:1024px){
	.grid {padding:10px;}

  .med-large {
    font-size: 1.7rem;
  }

	.accordion-wrapper {
		font-size: 1rem;
	}

	.space-top200 {
	    margin-top: 80px;
	}

	.main-bio p {
		font-size: 1.5rem !important;
	}


	.job-description {
    	font-size: 1.3rem;
    	padding-right: 0px !important;
	}

	.job-title ul {
	    padding-top: 6px;
	    padding-bottom: 25px;
	}

	.c8 {
		width: 100%;
		padding: 20px;
		padding-left: 0px;
	}

	.space-top100 {margin-top: 60px;}


}

/* Media query for 960 Screens - sets nested grids to 100% */
@media only screen and (max-width:960px){
	.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12,.row .row .c1-5,.row .row .c1-8{
		width:100%;
		margin-bottom:20px;
		margin-left:0px;
		margin-right:0px; 
	}
	.row .row > div:last-child{margin-bottom:0 !important}

	.job .c5{width:41.66%;}

	.space-top100 {margin-top: 60px;}

	.music .c10{ width:75%; }

  .music img {
    max-width: 75px;
  }


	.music .song, .artist {margin-left: 10px; font-size: 1.3rem; display: inline-block;}

	.links li a{
		font-size: 2rem;
	}

  .starbucks-wrapper .green-bg {background-color: #F2F0EB !important;}
  .starbucks-wrapper .white { color: #00754A !important;}

    
}

/* Media query for iPad and tablets */
@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){
	body{font-size:90%}
	.row{margin-bottom:0!important}

	.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12,.c1-5,.c1-8{
		width:100%;
		margin-right:0;
		margin-left:0;
		margin-bottom:20px; 
		padding:0px;
	}

	.job .c5{width:60%;}

	.date {
		display: none;
	}

	.c1.first,.c2.first,.c3.first,.c4.first,.c5.first,.c6.first,.c7.first,.c8.first,.c9.first,.c10.first,.c11.first,.c1-5.first,.c1-8.first {
		padding-left: 0px; 
		position:relative;
	}

	.c1.last,.c2.last,.c3.last,.c4.last,.c5.last,.c6.last,.c7.last,.c8.last,.c9.last,.c10.last,.c11.last,.c1-5.last,.c1-8.last {
		padding-right: 0px; 
		position:relative;
	}

	/* ---- Spacing ---- */
	.space-top40 {margin-top: 20px;}
	.space-bot40 {margin-bottom: 20px;}
	.space-top60 {margin-top: 20px;}
	.space-bot60 {margin-bottom: 20px;}
	.space-top80 {margin-top: 20px;}
	.space-bot80 {margin-bottom: 20px;}
	.space-top100 {margin-top: 60px;}
	.space-bot100 {margin-bottom: 50px !important;}
	.space-top120 {margin-top: 20px;}
	.space-bot120 {margin-bottom: 20px;}
	.space-top150 {margin-top: 20px;}
	.space-bot150 {margin-bottom: 20px;}

  .pad-top100 {padding-top: 40px !important;}
  .pad-bot100 {padding-bottom: 40px !important;}
  .space-bot200 {margin-bottom: 100px !important;}
  .project img { 
    border-radius: 8px;
  }
  .project video { 
    border-radius: 8px;
  }

  .big-type p {
    font-size: 2.4rem;
  }
      .project-title {
        position: relative;
        bottom: 0;
        left: 0;
        opacity: 1;
        display: block;
        margin-top: 10px;
        width: 100%
    }
    .project-location {
        color: #c6c6c6;
        position: relative;
        top: 0;
        left: 0;
        opacity: 1;
        margin-top: 6px;
        margin-bottom: 0
    }
    .project-overlay {
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        height: auto;
        opacity: 1;
        background: transparent
    }
    .project-info {
        position: relative;
        left: 0;
        top: 0;
        display: block;
        opacity: 1;
        width: 90%;
        height: auto;
      padding-left: 0px;
      padding-top: 0px;
    }
    .project:hover img {
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    .project:hover .project-location {
    -webkit-animation-duration:1s;
    animation-duration:1s;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both;
    -webkit-animation-name:none;
    animation-name:none;
  }

  .project-overlay {
    background: none !important;
  }

  .project-title {
      font-size: 1.4rem;
      line-height: 2rem;
      margin-top: 10px;
      margin-bottom: 0px;
      font-weight: bold !important;
      color: #fff !important;
  }

  .project-location {
    margin-top: 0px;
    font-size: 1rem;
    line-height: 1.3rem;
    width: 95%;
    color: #fff !important;
  }

  .grip .project-overlay .project-title {
    color: #fff !important;
  }

  .grip .project-overlay .project-location {
    color: #fff !important;
  }


  .project-overlay {
      margin-bottom: 25px;
  }

  .name {
     margin-top: 75px !important;
     margin-left: 10px !important;
  }

  p {
    padding-right: 18px !important;
  }

  p.caption {
    padding-right: 0px !important;
  }

  .purp-bg {
    background-color: #DFDBFF !important;
  }

  .purp-bg p.caption{
    color: #7464F0 !important;
  }

}