<style type="text/css">

img.thumbnail {
	max-width: 40%;
}

img.thumbnail:hover {
	opacity:0.75;
}

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 60%;
	height: 70%;
	text-align: center;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0,0,0,0.85);
	background-color: rgba(0,0,0,0.85);
	border:3px solid #c0c0c0;
	box-shadow: 0px 0px 9px #A0A0A0;
	max-width: 100%;
	max-height: 100%;
	
	-webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.5s;
    animation-name: slideIn;
    animation-duration: 0.5s
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 95%;
	max-height: 85%;
	margin-top: 2%;
}

.lightbox div {
	/** Pad the lightbox image */
	max-width: 95%;
	max-height: 85%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

.btn--left {
  top: 50%;
  left: 40px;
  &:after { content: '<'; }
}

.btn--right {
  top: 50%;
  right: 20px;
  &:after { content: '>'; }
}


/* Add Animation */
@-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

@keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
}

    BODY {scrollbar-3dlight-color:#A9A9A9;
           scrollbar-arrow-color:#D3D3D3;
           scrollbar-base-color:#A9A9A9;
           scrollbar-track-color:#F5F5F5;
           scrollbar-darkshadow-color:#A9A9A9;
           scrollbar-face-color:#F5F5F5;
           scrollbar-highlight-color:#FFEBCD;
           scrollbar-shadow-color:#7F7F7F}

    P.title {
	font-size:2.7em;
	font-weight:bold;
	font-family: 'Crimson Text', serif;
	color:#2f5597;
	line-height:100%;
	margin-top:0.0em;
	margin-bottom:0.1em;
    }

    P.subtitle {
	font-size:2.4em;
	font-weight:bold;
	font-family: 'Crimson Text', serif;
	color:#2e75b6;
	margin-top:0.0em;
	margin-bottom:0.2em;
    }

    P.tagline {
	font-size:1.9em;
	font-weight:bold;
	font-family: 'Crimson Text', serif;
	color:#808080;
	margin-top:0.0em;
	line-height:1.3em;
    }

    a.nav {
	font-size:1.85em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#6f4e94;
	margin-top:0.0em;	
	margin-bottom:0.0em;
	text-decoration:none;
    }

    a.nav:hover {
	color:#9f7ec4;
    }

html {
	-webkit-text-size-adjust: none;
}

    body {
	line-height:0;
    }

    p {
	font-size:2.4em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#444444;
	line-height:160%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }

    p.blue {
	font-size:2.4em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#2f5597;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:0.0em;
    }
	
	p.offerings {
		margin-bottom:1.0em;
	}
	
	p.close-button {
		text-align:right; 
		color:#d0d0d0; 
		font-size:1.5em;
	}
	
    b {
	color:#2f5597;
    }

    ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
    }

    ul > li {
	position: relative;
  	padding-left: 12px;
    }

    ul > li:before {
	content: "•";
  	position: absolute;
  	left: 0;
    }

    li {
	font-size:2.4em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#404040;
	line-height:150%;
	margin-top:0.0em;
	margin-bottom:1.0em;
    }

    p.expertise-area {
		margin-bottom:0.7em;
    }
	
	p.img-caption {
		margin-top:0.3em;
		margin-bottom:0.4em;
		text-align:left;
	}
	
	p.marketing-img-caption {
		margin-top:0.3em;
		margin-bottom:0.4em;
		text-align:left;
	}

    a {
	font-size:1.0em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#6f4e94;
	margin-top:0.0em;	
	margin-bottom:0.0em;
	text-decoration:none;
    }

    a:hover {
	color:#9f7ec4;
    }

    h2 {
	font-size:2.8em;
	font-weight:normal;
	font-family: 'Open Sans', sans-serif;
	color:#2f5597;
	line-height:140%;
	margin-top:1.7em;
	margin-bottom:1.0em;
    }

    h3 {
	font-size:1.0em;
	font-weight:800;
	font-family: 'Open Sans', sans-serif;
	color:#2f5597;
	line-height:100%;
	margin-top:0.3em;
	margin-bottom:0.3em;
    }

    h3.impact {
	font-size:1.0em;
	font-weight:800;
	font-family: 'Open Sans', sans-serif;
	color:#2f5597;
	line-height:100%;
	margin-top:0.3em;
	margin-bottom:0.8em;
    }

    hr {
	margin-top:2.0em;
	margin-bottom:1.0em;
	border:1px solid #d8d8d8;
	border-top:0px;
	height:0px;
	width:100%;
    }

    div.next-button {
	margin-top:2.5em; 
	display:inline-block;
	padding-left:1.0em;
	padding-right:1.0em;
	padding-top:3px;
	padding-bottom:3px;
	margin-bottom:1.5em;
	height:2.0em; 
	background-color:#eCe7eC; 
	border:2px solid #c2c0c5; 
	font-size:2.4em;
	line-height:2.0em; 
	vertical-align:middle;
	border-radius:7px; 
    }

    div.next-button:hover {
	background-color:#f9f4fB;
	box-shadow: 0px 0px 5px #e9e4eB;
    }
		
	img.quote {
		height:10.0em; 
		vertical-align:top; 
		margin-top:16px;
		margin-right:0.7em;
		border:1px solid #d0d0d0; 
		box-shadow: 0px 0px 5px #E0E0E0;
		border-radius:12px; 
	}
	
	img.portfolio {
		border:1px solid #d0d0d0; 
		box-shadow: 0px 0px 4px #D0D0D0;
		vertical-align: middle;
	}
	
	img.portfolio:hover {
		opacity:0.5;
	}
	
	img.portfolio-large {
		border:2px solid #A0A0A0; 
		box-shadow: 0px 0px 5px #B0B0B0;
		vertical-align: middle;
	}
	
	img.icon {
		width:5.0em; 
		margin-top:12px;
		margin-right:2.0em;
		-webkit-filter: drop-shadow(1px 1px 1px #AAA);
		filter: drop-shadow(1px 1px 1px #AAA);
	}
	
	img.project-thumbnail {
		height:200px;
		border:1px solid #d0d0d0; 
		box-shadow: 0px 0px 4px #D0D0D0; 
		margin-top:1.5em; 
		margin-bottom:1.5em; 
		margin-right:2.0em;
	}
	
	img.marketing-thumbnail {
		width:200px;
		border:1px solid #d0d0d0; 
		box-shadow: 0px 0px 4px #D0D0D0; 
		margin-top:1.5em; 
		margin-bottom:1.5em; 
		margin-right:1.5em;
	}

</style>