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


/* general */
html, body {
    margin: 0 auto;
    font-family: "Montserrat", sans-serif;
	font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 170%;
    overflow-x: hidden!important;
	color: #595D66;
}

.contact, .project, .home {
	overflow-y: hidden;
}

h1, h2, h3, h4, h5 {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1 {
	font-size: 75px;
	font-family: "amandine", sans-serif;
	font-weight: 700;
	line-height: 100%;
}

h2 {
	font-weight: 400;
	line-height: 160%;
}

a {
	color: #111111;
	text-decoration: none;
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
	-moz-transition: all ease .5s;
	font-weight: 500;
}

a:hover {
	color: #21ADA8!important;
	text-decoration: none;
}

.container-two a:hover, .contact-section a:hover, .footer:hover  {
	color: #fff;
}

.active a, .active {
	color: #21ADA8!important;
}

li {
	margin-bottom: 5px;
}

/* wrap */
.wrapper {
    max-width: 1400px;
    margin: 0 auto!important;
    padding: 0 2%;
}

/* jquery animation */
.splash-wrapper	{
	opacity: 0;
}

.headline	{
	opacity: 0;
	top: -25px;
}

.hide-me	{
	opacity: 0;
	margin-left: -50px;
}

.hide-me-right	{
	opacity: 0;
	margin-right: -50px;
}





.resume-linkedin a {
	font-size: 13px;
	color: #111111;
	letter-spacing: 1px;
	font-weight: 500;
}

.intro {
	opacity: 0;
}



.hide-me2, .hide-me3, .hide-me-start	{
	opacity: 0;
	top: 50px;
}

.about, .work, .project, .contact  {
	opacity: 0;
}


/* header */
.logo {
  transition: opacity 0.3s ease;
}
.header-wrapper	{
	position: fixed;
	top: 0; 
	left: 0;   
	right: 0;
	width: 100%;
	background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.7)
  );
	z-index: 9999;
	padding-bottom: 70px;
}

.header {
	max-width: 1400px;
	margin: 0 auto!important;
	padding: 15px 30px 5px 25px;
	display: flex;                        
	align-items: center;
	justify-content: space-between;
}

.header a:hover {
	color: #05e0d5!important;
}


/* when scrolled over white section */
.header-wrapper.scrolled .header a, .project .header a, .nav-link {
	color: #111111;
}

.header-wrapper.scrolled .header a:hover, .project .header a:hover, .nav-link.active  {
	color: #21ADA8!important;
}

.header-wrapper.scrolled {
	background: white;
	padding-bottom: 0;
}

.header-wrapper.scrolled .header, .project .header {
	background: white;
	padding: 5px 30px 0px 25px;
}


.header-wrapper.scrolled, .project .header-wrapper {
	background: white;
	padding-bottom: 0;
}

.header-wrapper.scrolled .header li:first-child a:after, .header-wrapper.scrolled .header li:nth-child(2) a:after, .project .header li:first-child a:after, .project .header li:nth-child(2) a:after {
	border-top: 1px solid #111111;
  	opacity: 0.5;
}


.project .header img {
	width: 50px;
	height: 50px;
}


.header a {
	color: white;
	float: left;
}

.header ul {
	float: right;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1px;
}

.header li {
	display: inline;
}

.header li a {
	padding: 0 25px;
}

.header li:last-child a {
	padding-right: 0;
}

.header li:first-child a:after, .header li:nth-child(2) a:after {
	margin-left: 5px;
	content: "";
	position: absolute;
	border-top:1px solid white;
	opacity: 0.6;
	width: 27px;
	transform: rotate(305deg);
	transform-origin: 105% 0%;
	-moz-transform: rotate(305deg);
	-moz-transform-origin: 105% 0%;
	-webkit-transform: rotate(305deg);
	-webkit-transform-origin: 105% 0%;
	-ms-transform: rotate(305deg);
	-ms-transform-origin: 105% 0%;
}


/* clear floats */
.clear	{
	clear: both;
}

/* headline */

.headline-background {
	padding-bottom: 75px;
    position: relative;
    z-index:99;
}

.headline	{
	position: relative;
	text-align: center;
	margin: 0 auto!important;
	max-width: 1000px;
	z-index: 99;
	padding: 0 30px;
	
}

.headline h1 {
    margin-top: -5%;
    margin-bottom: 20px;
    font-size: 100px;
	line-height: 105%;
	color: white;
	text-shadow: 0px 20px 30px #000000;
}

.headline h2 {
    font-size: 24px;
    margin: 0 auto!important;
    max-width: 700px;
	color: white;
	text-shadow: 0px 0px 15px #000000;
}





.splash-wrapper {
	position: relative;
	background: url("images/splash-background.jpg") no-repeat center bottom;
	background-size: cover;
	height: 100vh;
	display: flex;
	align-items: center;   /* vertical centering */
	justify-content: center; /* horizontal centering */
}

.splash-wrapper:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 0;
}

.splash-wrapper::before {
  content: "";
  position: absolute;
  bottom: 0!important;
  left: 0;
  width: 100%;
  height: 100vh;  
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.6),
    rgba(0, 0, 0, 0)
  );
  z-index: 0;
  pointer-events: none;
}

#down, #down-hover	{
	position: absolute;
	width: 58px;
	height: 58px;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	bottom: 25px;
}

.button-text-works	{
	position: absolute;
	text-align: center;
	font-size: 13.5px;
	color: #fff;
	letter-spacing: 1px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    bottom: 90px;
    text-shadow: 0px 0px 10px rgba(50, 50, 50, .75);
}


#down-hover	{
	z-index: 99;
	stroke-dasharray: 140 540;
 	stroke-dashoffset: -474;
	transition: all .8s cubic-bezier(0, .75, .75, 1);
	-webkit-transition: all .8s cubic-bezier(0, .75, .75, 1);
	-moz-transition: all .8s cubic-bezier(0, .75, .75, 1);
}

#down-hover:hover	{
	stroke-dashoffset: 0;
	stroke-dasharray: 760;
}

/* portfolio section */
.portfolio-section	{
	overflow: hidden;
  	background: #ffffff;
}

.subheader h1 {
	color: #595D66;
	border-bottom: 1px dashed #C29864;
	padding-top: 75px;
	padding-left: 8%;
	padding-bottom: 10px;
	padding-right: 28px;
	display: inline-block;
}


.projects-tint {
    opacity: 0;
    position: absolute;
    background: rgba(41,63,66,.85);
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: all ease .5s;
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    cursor: pointer;
}

.project-header {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.projects-tint:hover {
	opacity: 1;
}

.portfolio-section h2 {
	font: 40px "amandine", sans-serif;
	margin-top: 14px;
	padding: 0 10px;
 	line-height: 120%;
}

.portfolio-section p {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	letter-spacing: 1px;
	color: #fff;
	margin-top: -15px;
	margin-bottom: 23px;
	padding: 0 10px;
	white-space: nowrap;
}

.project-header hr {
	border: none;
	border-top: 1px #ffe3b3 solid;
	width: 78%;
	transition: all ease .75s;
	-moz-transition: all ease .75s;
	-webkit-transition: all ease .75s;
}

.portfolio-section img {
	height: auto;
}

.container-one {
	width: 45%;
	height: auto;
	padding-left: 13%;
	padding-top: 3%;
	float: left;
}

.container-two	{
	width: 26%;
	height: auto;
	padding-right: 13%;
	padding-top: 3%;
	float: right;
	position: relative;
}

.container-three {
	width: 45%;
	height: auto;
	padding-left: 13%;
	padding-top: 3%;
	padding-bottom: 115px;
	float: left;
}

.view-project-img-mobile	{
	display: none;
}

.projects-one	{
	position: relative;
	text-align: center;
	background:url(images/FECC-case-study.jpg) no-repeat center;
	background-size: 100% 100%;
	transition: all ease .75s;
	-webkit-transition: all ease .75s;
	-moz-transition: all ease .75s;
}

.projects-two	{
	position: relative;
	text-align: center;
	background:url(images/OC-case-study.jpg) no-repeat center;
	background-size: 100% 100%;
	transition: all ease .75s;
	-webkit-transition: all ease .75s;
    -moz-transition: all ease .75s;
}

.projects-three	{
	position: relative;
	text-align: center;
	background:url(images/widget-case-study.jpg) no-repeat center;
	background-size: 100% 100%;
	transition: all ease .75s;
	-webkit-transition: all ease .75s;
	-moz-transition: all ease .75s;
}

.projects-one:hover {
	background-size: 130% 130%;
}

.projects-one:hover hr {
	width: 100%;
}

.projects-two:hover {
	background-size: 130% 130%;
}

.projects-two:hover hr {
	width: 100%;
}

.projects-three:hover {
	background-size: 130% 130%;
}

.projects-three:hover hr {
	width: 100%;
}

#view-all, #view-all-hover, .button-text-view	{
	position: absolute;
	margin-top: 3%;
	right: 67%;
	transform: translate(50%, 50%);
	-moz-transform: translate(50%, 50%);
	-ms-transform: translate(50%, 50%);
	-webkit-transform: translate(50%, 50%);
	width: 110px;
	height: 110px;
}

#view-all-hover, #send-hover	{
	z-index: 99;
	stroke-dasharray: 140 540;
 	stroke-dashoffset: -474;
	transition: all .8s cubic-bezier(0, .2, .75, 1);
	-webkit-transition: all .8s cubic-bezier(0, .2, .75, 1);
	-moz-transition: all .8s cubic-bezier(0, .2, .75, 1);
}

#view-all-hover:hover, #send-hover:hover	{
	stroke-dashoffset: 0;
	stroke-dasharray: 760;
}

.button-text-view, .button-text-more, .button-text-send	{
	z-index: 99;
	text-align: center;
	font-size: 13.5px;
	color: #ffffff;
	letter-spacing: 1px;
	padding: 32.5px 0 0 1.5px;
	line-height: 140%;
}


/* about section */
.about-section {
	position: relative;
	text-align: center;
	margin: 0 auto!important;
	background: #ffffff;
	padding: 0 30px 125px;
}

.intro {
	max-width: 650px;
	margin: 0 auto!important;
	text-align: center;
	padding-bottom: 25px;
}

.profile	{
	margin: -35px auto 0!important;
	width: 150px;           
	aspect-ratio: 1;        
	border-radius: 50%;     
	object-fit: cover;     
	display: block;
	border: 5px solid #ddd;
}
.intro p {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 17px;
	color: #595D66;
	white-space: normal;
	margin-top: 10px;
}

.experience-section {
	max-width: 550px;
	margin: 0 auto!important;
}

.experience-section h2 {
	font-family: "Montserrat", sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1px;
	margin-bottom: 20px;
	color: #7f7f7f;
}

.experience-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 20px 0;
	border-bottom: 1px solid #ddd;
}

.experience-item:last-child {
	border-bottom: none;
}

.role {
	font-size: 20px;
	font-weight: 500;
	color: #111111;
	text-align: left;
	padding-right: 10px;
}

.company {
	text-align: right;
}

.company-name {
	font-size: 18px;
	color: #111111;
}

.date {
	font-size: 14px;
	color: #888888;
	margin-top: 5px;
}






/* footer */
.footer, .footer-home {
	position: relative;
	text-align: center;
	padding: 35px 0 8px;
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    background: #111111;
}

.footer-home {
	position: relative;
	text-align: center;
	padding: 20px 0 50px;
    background: #111111;
}

.footer-home h2 {
	font: 40px "amandine", sans-serif;
	font-size: 50px;
	color: white;
	margin-bottom: 20px;
}

.footer p, .footer-home p {
	color: #fff;	
	font-size: 16px;
	letter-spacing: 1px;
	margin-top: 0;
	font-weight: 400;
}

.footer p {
	font-size: 15px;
}


.footer a p:hover, .footer-home a p:hover {
	color: #05e0d5!important;
	text-decoration: none;
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
}

/* about */
.subpage-header {
	position: relative;
	text-align: center;
	margin: 0px auto!important;
}

.subpage-header2 {
	padding-top: 25px;
}

.subpage-header h1 {
	color: #111111;
	font-weight: 500;
	padding: 50px 30px 0;
}


.skills-columns {
	padding-left: 27px;
}

.skills-column {
	float: left;
	padding-right: 64px;
	padding-top: 35px;
	height: 225px;
}

.skills-columns .skills-column:first-child, .skills-column:nth-child(2)  {
	border-right: 1px solid #949494;
}

.skills-columns ul {
	list-style-type: none;
	margin-left: -37px;
	padding-top: 8px;
	margin-bottom: 10px;
}

.skills-columns li {
	padding-bottom: 5px;
}

h3.column-padding {
	padding-left: 68px;
}

ul.column-padding {
	margin-left: 30px;
}



/* contact */
.contact-info {
	text-align: center;
	padding-top: 40px;
	font-weight: 400;
}

.contact .subpage-header {
	max-width: 320px;
}

.contact-section .wrapper {
	position: relative;
	max-width: 2100px;
}

.contact-section img	{
	float: left;
	width: 50%;
	padding-top: 60px;
	max-width: 1000px;
	min-width: 480px;
}

form {
	position: relative;
	float: right;
	width: 45%;
	padding-top: 8%;
}

form p {
	padding-bottom: 5px;
}

.errorMessage {
	color: #913236!important;
	margin-top: 1px;
	line-height: 120%;
}

#ajax-result {
	margin-left: 5px;
	margin-top: -5px;
}

input, textarea {
	font: 16px "Montserrat", sans-serif;
	font-weight: 300;
	color: #595D66;
	width: 350px;
	padding: 10px 12px 10px;
	border: 1px solid #ADB3BD;
}

textarea {
	height: 100px;
}

input:focus, textarea:focus {
    outline: medium none;
	outline: 1px solid #b2acae;
}

.button-text-send {
	text-align: left;
	padding: 36px 0 0 23px;
}

#send, #send-hover, .button-text-send {
	position: absolute;
	margin-top: -5px;
	left: 280px;
	width: 85px;
	height: 85px;
}

.contact-footer {
	background: #595D66;
	height: 40px;
}


/* work */
.work .subpage-header {
	max-width: 335px;
}

.work-menu {
	text-align: center;
	margin-left: -60px;
	margin-bottom: 51px;
}

.work-menu ul {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
}

.work-menu li {
	display: inline;
	cursor: pointer;
	padding: 0 23px;
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
}

.work-menu li:hover {
	color: #21ADA8;
	display: inline;
	cursor: pointer;
}

.work-menu li:last-child {
	padding-right: 0;
}

.work-menu li:first-child:after, .work-menu li:nth-child(2):after, .work-menu li:nth-child(3):after {
	margin-left: 5px;
	content: "";
	position: absolute;
	border-top:1px solid #111111;
	opacity: 0.5;
	width: 27px;
	transform: rotate(305deg);
	transform-origin: 105% 0%;
	-moz-transform: rotate(305deg);
	-moz-transform-origin: 105% 0%;
	-ms-transform: rotate(305deg);
	-ms-transform-origin: 105% 0%;
	-webkit-transform: rotate(305deg);
	-webkit-transform-origin: 105% 0%;
}

.thumbnail-project img {
	opacity: 0;
	width: 75%;
	height: auto;
}

.thumbnail-section {
	margin-left: -3px;
	margin-right: -3px;
}

.thumbnail-section h2 {
	font: 38px "Montserrat", sans-serif;
	font-weight: 500;
	line-height: 120%;
	color: white;
	margin-top: 14px;
	padding: 0 20px;
}

.thumbnail-section p {
	font: 14px "Montserrat", sans-serif;
	font-weight: 400;
	letter-spacing: 1px;
	color: #fff;
	padding: 0 10px;
	margin-top: -12px;
	margin-bottom: 20px;
	white-space: nowrap;
}

.thumb-header {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translate(0, -50%);
	-moz-transform: translate(0, -50%);
	-ms-transform: translate(0, -50%);
	-webkit-transform: translate(0, -50%);
}

.thumb-header hr {
	border: none;
	width: 100%;
	transition: all ease .75s;
	-webkit-transition: all ease .75s;
    -moz-transition: all ease .75s;
}

.thumbnail-container {
	border: 2px solid white;
	box-shadow: inset 0px 0px 0px 2px white;
	box-sizing: border-box; /* Include padding and border in element's width and height */
	width: 33.33%;
	height: auto;
	float: left;
}

.thumbnail-project	{
	position: relative;
	text-align: center;
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
}

.OC {
	background: url(images/works/OC-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.OC:hover {
	background-size: 124% 149%;
}

.music {
	background: url(images/works/music-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.music:hover {
	background-size: 124% 149%;
}

.widget {
	background: url(images/works/widget-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.widget:hover {
	background-size: 124% 149%;
}

.stock {
	background: url(images/works/stock-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.stock:hover {
	background-size: 124% 149%;
}


.retirement {
	background: url(images/works/retirement-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.retirement:hover {
	background-size: 124% 149%;
}

.marketing {
	background: url(images/works/marketing-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.marketing:hover {
	background-size: 124% 149%;
}

.PSA-video {
	background: url(images/works/PSA-video-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.PSA-video:hover {
	background-size: 124% 149%;
}

.loans {
	background: url(images/works/loans-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.loans:hover {
	background-size: 124% 149%;
}

.cloud {
	background: url(images/works/cloud-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.cloud:hover {
	background-size: 124% 149%;
}

.PSA {
	background: url(images/works/PSA-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.PSA:hover {
	background-size: 124% 149%;
}

.car {
	background: url(images/works/car-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.car:hover {
	background-size: 124% 149%;
}

.penthouse {
	background: url(images/works/penthouse-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.penthouse:hover {
	background-size: 124% 149%;
}

.epicurean {
	background: url(images/works/epicurean-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.epicurean:hover {
	background-size: 124% 149%;
}

.FECC {
	background: url(images/works/FECC-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.FECC:hover {
	background-size: 124% 149%;
}

.tech {
	background: url(images/works/cloud-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.tech:hover {
	background-size: 124% 149%;
}

.AV {
	background: url(images/works/AV-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.AV:hover {
	background-size: 124% 149%;
}

.marketing2 {
	background: url(images/works/marketing2-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.marketing2:hover {
	background-size: 124% 149%;
}

.executive2 {
	background: url(images/works/executive2-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.executive2:hover {
	background-size: 124% 149%;
}

.medicine {
	background: url(images/works/medicine-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.medicine:hover {
	background-size: 124% 149%;
}

.hearing-aids {
	background: url(images/works/hearing-aids-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.hearing-aids:hover {
	background-size: 124% 149%;
}

.networks {
	background: url(images/works/networks-thumb.jpg) no-repeat center;
	background-size: 104% 129%;
}

.networks:hover {
	background-size: 124% 149%;
}

.project-tint {
	opacity: 0;
	position: absolute;
	background: linear-gradient(45deg,rgba(61, 5, 125, 1) 0%, rgba(0, 171, 165, 1) 100%);
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
	cursor: pointer;
}


.thumbnail-project:hover .project-tint  {
	opacity: 0.95;
}

/* project */
.project-wrapper-cover {
	margin: 50px auto 50px!important;

}

.project-cover {
	width: 100%;
	margin-bottom: -7px;
}

.project-padding-none {
	margin: 0 auto!important;
}

.project-image {
	width: 100%;
	margin: -50px 0 18px;
	cursor: -moz-zoom-in; 
	cursor: -webkit-zoom-in;
	cursor: zoom-in;
}

.project-image2 {
	width: 100%;
	margin: 50px 0 50px;
	cursor: none;
}

.project-wrapper {
	max-width: 700px;
	padding: 20px 10% 65px;
}

.gray {
	background: #f1f5f4;
}

.gray-2 {
	background: #eceeed;
}


.project-wrapper-img {
	max-width: 900px;
}

.project-wrapper-img2 {
	max-width: 850px;
}

.project-wrapper-img3 {
	max-width: 450px;
}

.project-wrapper-img4 {
	max-width: 1000px;
}

.project-wrapper-img5 {
	max-width: 600px;
}

.project-wrapper-img6 {
	max-width: 1400px;
}

.project-wrapper-img7 {
	max-width: 1200px;
}

.video-wrapper {
    max-width: 800px;
    margin: 0 auto!important;
    padding: 85px 2%;
}

.responsive-video {
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
	height: 0;
}


.responsive-video iframe {
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	position: absolute;
}


.project-subhead, .project-insights, .project-HMW {
    font-size: 14px;
    letter-spacing: 1px;
    color: #21ADA8;
    font-weight: 700;
    margin-bottom: -15px;
}

.project-insights {
	margin-top: -10px;
	color: #595D66;
}

.project-HMW {
	font-size: 20px;
    letter-spacing: 0;
	line-height: 140%;
	margin-bottom: 25px;
	font-weight: 500;

}



.prototype {
	margin: 0 auto 85px;!important;
	padding: 0 2%!important;
	text-align: center;

}

.prototype a {
	font-size: 14px;
	letter-spacing: 1px;
	font-weight: 400;
}

.project-subhead span {
	color: #595D66;
	font-weight: 400;
}

.project-subhead2 {
	font-family: "Montserrat", sans-serif;
	font-size: 35px;
	font-weight: 600;
	line-height: 120%;
	color: #111111;
	margin-top: 55px;
}

.project-subhead3 {
	font-size: 18px;
	letter-spacing: 1px;
	font-weight: 600;
	color: #21ADA8;
	margin-top: 35px;
	margin-bottom: -10px;
}

.view-website a {
	font-size: 13px;
	letter-spacing: 1px;
	font-weight: 400;
}


.project-web, .project-social {
	text-align: center;
	padding: 100px 8% 100px;
}

.project-print {
	text-align: center;
	padding:75px 8% 75px;
}


.project-banner {
	max-width: 1000px;
	margin: 0 auto!important;
	text-align: center;
	padding: 100px 0 30px;
}

.project-banner img {
	float: left;
	padding: 0 40px;
}

.project-banner img:first-child {
	padding-top: 150px;
}

.project-banner img:nth-child(4) {
	float: right;
	padding-top: 70px;
}

.banner-background {
	height: 965px;
}

.project-web img {
	max-width: 1000px;
	width: 100%;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
}

.project-social img {
	max-width: 950px;
	margin-bottom: 6%;
	width: 100%;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
}

.project-social img:nth-child(7) {
	margin-bottom: 0!important;
}

.project-print img {
	max-width: 779px;
	width: 100%;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
}

.project-print2 img {
	max-width: 675px;
}

.shadow-none img {
	box-shadow: none!important;
}

.project-responsive, .project-inside, .project-mobile {
	text-align: center;
	background: #f1f5f4;
	vertical-align: bottom;
	padding: 85px 0;
}

.project-no-padding {
	padding: 0!important;
}

.project-responsive img:first-child {
	padding-right: 50px;
	max-width: 621px;
	width: 100%;
}

.project-responsive img:nth-child(2) {
	padding-left: 50px;
	max-width: 283px;
	width: 55%;
}


.project-subpage {
	text-align: center;
	padding-bottom: 100px;
}

.project-subpage img {
	max-width: 40%;
	margin: 5px 1.5% 0;
	vertical-align:top;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
}

img.health-web {
	max-width: 900px;
}

.project-mobile img:first-child {
	padding-right: 50px;
	max-width: 283px;
	width: 55%;
}

.project-mobile img:nth-child(2) {
	padding-left: 50px;
	max-width: 283px;
	width: 55%;
}

img.marketing-branding {
	max-width: 1000px;
	box-shadow: none;
}

img.medicine-branding {
	max-width: 869px;
	box-shadow: none;
}

img.wedding-invite {
	max-width: 650px;
}

.project-inside {
	padding:75px 8% 75px;
	padding-left: 8%;
	padding-right: 8%;
}

.project-inside img {
	width: 100%;
	max-width: 1440px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.10);
}

.project-inside img:first-child {
	margin-left: 1px;
}

.project-inside2 img {
	width: 100%;
	max-width: 950px;
	box-shadow: none;
}



.nav-projects {
	position: relative;
	text-align: center;
	height: 160px;
	max-width: 350px;
	padding-top: 60px;
    margin: 0 auto!important;
}

#view-all2, #view-all-hover2, .button-text-view2	{
	position: absolute;
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 125px;
	width: 105px;
	height: 105px;
}

#view-all-hover2	{
	z-index: 99;
	stroke-dasharray: 140 540;
 	stroke-dashoffset: -474;
	transition: all .8s cubic-bezier(0, .2, .75, 1);
	-webkit-transition: all .8s cubic-bezier(0, .2, .75, 1);
	-moz-transition: all .8s cubic-bezier(0, .2, .75, 1);
}

#view-all-hover2:hover	{
	stroke-dashoffset: 0;
	stroke-dasharray: 760;
}

.button-text-view2	{
	z-index: 99;
	text-align: center;
	font-size: 13px;
	color: #fff;
	letter-spacing: 1px;
	padding: 47px 0 0 1.5px;
	line-height: 140%;
}

.previous, .next {
	font-size: 12px;
	letter-spacing: 1px;
	border-bottom: 1px solid #111111;
	width: 75px;
	margin-top: 44px;
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
	-moz-transition: all ease .5s;
	font-weight: 400;
}

.previous:hover, .next:hover {
	width: 85px;
	border-bottom: 1px solid #21ADA8;
}

.previous {
	float: left;
	text-align: right;
}

.next {
	float: right;
	text-align: left;
}

/* The Modal (background) */
.modal, .modal2 {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 95%; /* Full height */
    overflow: scroll!important; /* Enable scroll if needed */
    background-color: #f1f5f4; /* Fallback color */
    background-color: #f1f5f4;
}

.modal2 {
	background-color: #fff; /* Fallback color */
	background-color: #fff;
}


html.modal-open {
    overflow: hidden!important;
}

/* Modal Content (image) */
.modal-content, .modal-content2, .modal-content3 {
    margin: auto;
    display: block;
    width: 100%;
    height: auto;
    max-width: 1400px;
    padding-bottom: 50px;
}

.modal-content2 {
    max-width: 800px;
}

.modal-content3 {
    max-width: 2000px;
}


/* Close Button */
.close, .close2, .close3, .close4, .close5, .close6, .close7 {
    position: fixed;
    text-align: center;
    top: 15px;
    right: 35px;
    color: #595D66;
    font-size: 30px;
    transition: 0.3s;
    background-color: rgba(231, 235, 233, 0.75);
    padding: 3.5px 0 2.5px;
    width: 35px;
    height: 29px;
    border-radius: 50%;
}

.close2, .close4, .close5, .close6 {
	background-color: rgba(241, 245, 244, 0.75);
}

.close:hover,
.close:focus, .close2:hover, .close2:focus, .close3:hover, .close3:focus, .close4:hover, .close4:focus, .close5:hover, .close5:focus, .close6:hover, .close6:focus, .close7:focus, .close7:hover {
    color: #21ADA8;
    text-decoration: none;
    cursor: pointer;
}

/* Password */
#login-form h2 {
	font-weight: 600;
	font-size: 20px;
}

.password-wrapper {
	text-align: center;
	height: 65vh;
	display: flex;
    flex-direction: column;    /* stack elements vertically */
    align-items: center;       /* center horizontally */
    justify-content: center;   /* center vertically within 65vh */
}

#login-form input {
	border-radius: 5px;
	width: 250px;
	font-weight: 400;
}

#login-form button {
	display: block;
    font-family:  "Montserrat", sans-serif;
	font-size: 13px;
    font-weight: 400;
	letter-spacing: 1px;
	background: #21ADA8;
	color: #ffffff;
	border-radius: 100px;
	border: none;
	margin: 16px auto;
    padding: 12px 18px;
	cursor: pointer;
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
	-moz-transition: all ease .5s;
}

#login-form button:hover {
	background: #1b918d;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
	.modal-content {
		width: 100%;
    }
	
	h1 {
		font-size: 60px;
	}
	
    .headline h1  {
    	font-size: 70px!important;
    }
	
	.headline h2  {
		font-size: 20px!important;
	}
	


}

@media (max-width: 480px)   {
	body  {
		-webkit-text-size-adjust: none;
	}

    h1 {
		font-size: 45px;
    }

    .project .subheader h1 {
  		padding-left: 10%;
  		font-size: 30px;
  		width: 100%;
		max-width: 90%;
  	}

    .subheader h1 {
		padding-top: 15%!important;
    }

	.header {
		text-align: center;
	}

	.header a, .header ul {
		float: none;
	}

	.header ul {
		margin-left: -55px;
	}

    .headline h1  {
    	font-size: 50px!important;
    }
	
	.headline h2  {
		font-size: 16px!important;
	}

	.header li  {
		margin-left: 5px;
	}

	.header li a {
		padding: 0 15px;
	}

	.header li:first-child a:after, .header li:nth-child(2) a:after {
		margin-left: 0;
	}
	
	.profile	{
		margin-top: -15px!important;
	}

	.work-menu li {
    	padding: 0 19px;
	}

	.work-menu li:first-child:after, .work-menu li:nth-child(2):after, .work-menu li:nth-child(3):after {
		margin-left: 1px;
	}

	.button-text-works {
		display: none;
	}

    .thumbnail-container {
		width: 50%!important;
		border: 1px solid white;
		box-shadow: inset 0px 0px 0px 1px white;
      }

    .contact-section img  {
		margin-left: -90px;
    }

    form {
		right:7%!important;
      }

    .thumbnail-section h2 {
		font-size: 25px!important;
    }

    .thumbnail-section p {
		font-size: 12px!important;
    }

    .subpage-header h1 {
		margin-bottom: -30px;
		line-height: 120%;
		padding-left: 5%;
		padding-right: 5%;
    }

	.subpage-header2 h1, .work .subpage-header h1, .about .subpage-header h1, .contact .subpage-header h1 {
		margin-bottom: 30px;
	}

	.project-subhead2 {
		font-size: 33px;
	}
	.close, .close2, .close3, .close4, .close5, .close6, .close7 {
		right: 15px;
	}
	.role {
	font-size: 18px;
	}

	.company-name {
		font-size: 16px;
	}

	.date {
		font-size: 14px;

	}
}

@media (min-width: 481px) and (max-width: 767px)   {


	.thumbnail-container {
		width: 50%!important;
	}


	.project-mobile img:first-child {
		padding-right: 0;
	}

	.project-mobile img:nth-child(2) {
		padding-left: 0;
	}

	.project-subpage {
		padding-bottom: 50px;
	}

	.project-subpage img {
	    max-width:83.75%;
		margin: 0 8% 35px;
	}
}





@media (min-width: 768px) and (max-width: 979px)     {
	.thumbnail-container {
		width: 33.33%!important;
	}
}



@media (max-width: 600px)     {
	.headline {
		padding-left: 10%;
		padding-right: 10%;
	}


	.work-menu ul {
		padding-top: 25px;
	}

}


@media (max-width: 924px)     {

	.container-one, .container-two, .container-three	{
		float: none;
		padding: 3% 8%;
	}

  .subheader h1 {
		padding-top: 5%;
  }

	.view-project-img-mobile	{
		display: block;
	}

	.view-project-img	{
		display: none;
	}

	.container-one {
		width: 84%;
	}

	.container-two	{
		width: 84%;
	}

	.container-three {
		width: 84%;
	}

	.projects-two	{
		background:url(images/OC-case-study-mobile.jpg) no-repeat center;
		background-size: 100% 100%;
	}

	.projects-three	{
		background:url(images/widget-case-study.jpg) no-repeat center;
		background-size: 100% 100%;
	}


	.container-three	{
		padding-bottom: 245px!important;
	}

	#view-all, #view-all-hover, .button-text-view	{
		margin-top: 55%;
		right: 50%;
	}


	.skills-columns {
		padding-left: 0;
		margin-top: 10px;
		text-align: center;
	}

	.skills-column {
		float: none;
		padding-right: 0;
		height: 210px;
	}

	.skills-columns .skills-column:first-child, .skills-column:nth-child(2)  {
		border: none;
	}

	.skills-columns ul {
		margin-left: -37px;
	}

	h3.column-padding {
		margin-left: -68px;
	}

	.skills-columns .skills-column:nth-child(3) {
		padding-top: 5px;
	}



	form {
		position: absolute;
		left: 0;
		right: 3%;
		margin: 0 auto!important;
		float: none;
		width: 70%;
		padding-top: 6%!important;
	}

	input, textarea {
		width: 100%;
		padding: 10px 10px 10px;
		-webkit-appearance: none;
		border-radius: 0;
		-moz-border-radius: 0;
		-webkit-border-radius: 0;
	}

	form p {
		padding-bottom: 0;
	}

	#ajax-result {
		text-align: center;
		margin-left: 15px;
		margin-top: 0;
		margin-bottom: 15px;
	}

	.button-text-send {
		padding: 35px 0 0 44.5px!important;
	}

	#send, #send-hover, .button-text-send {
		left: 4%;
		right: 0;
		margin: 0 auto!important;
	}

	.project-responsive img:first-child {
		width: 80%;
	}


}

@media (max-width: 990px)     {
	.portfolio-section h2 {
		font-size: 25px!important;
	}

	.portfolio-section p {
		font-size: 12px!important;
		margin-top: -15px;
	}
	
	.intro p {
		font-size: 16px!important;
	}
	
	.experience-section h2 {
		font-size: 18px!important;
	}
	
	.footer-home h2 {
		font-size: 40px!important;
	}
	
	.footer-home p {
		font-size: 16px!important;
		margin-top: 0;
	}
	
	.footer p {
		font-size: 15px!important;
		margin-top: 0;
	}
}

@media (max-width: 1024px)     {
	.project-responsive img:first-child {
		padding-right: 0!important;
	}

	.project-responsive img:nth-child(2) {
		padding-left: 0!important;
	}

	.project-mobile img:first-child {
		padding-right: 0!important;;
	}

	.project-mobile img:nth-child(2) {
		padding-left: 0!important;;
	}

	.thumbnail-section h2 {
		font-size: 33px;
	}

	.thumbnail-section p {
		font-size: 13px;
	}

}



@media (min-width: 925px) and (max-width: 1280px)     {
	form {
		padding-top: 5%!important;
	}

	.contact-section img	{
		margin-left: -75px!important;
		width: 58%;
	}

	form p {
		padding-bottom: 0;
	}
}




@media (max-width: 1280px)	{

	.portfolio-section h2 {
		font-size: 30px;
	}

	.portfolio-section p {
		font-size: 13px;
	}

	.button-text-works  {
		bottom: 85px;
	}

	#down, #down-hover	{
		width: 52px;
		height: 52px;
	}

	#view-all, #view-all-hover, .button-text-view	{
		width: 108px;
		height: 108px;
	}

	.button-text-view, .button-text-more, .button-text-send	{
		font-size: 13px;
		padding-top: 32px;
	}

	.button-text-send {
		text-align: left;
		padding: 34px 0 0 22px;
	}

	#send, #send-hover, .button-text-send {
		width: 82px;
		height: 82px;
	}


	.thumbnail-container {
		width: 33.33%;
	}

	form {
		padding-top: 5%;
	}

	input, textarea {
		font-size: 16px;
	}


	.experience-section h2 {
		font-size: 18px!important;
	}
	
	.intro p {
		font-size: 16px!important;
	}
	
	.footer-home h2 {
		font-size: 40px!important;
	}
	
	.footer-home p {
		font-size: 16px!important;
		margin-top: 0;
	}
	
	.footer p {
		font-size: 15px!important;
		margin-top: 0;
	}
}


@media (max-width: 1350px)	{

	form {
		padding-top: 4%;
	}

}

@media (max-width: 1440px) {
	.project-no-padding{
		padding: 25px 0!important;
	}
	
	.project-web img {
		max-width: 900px;
	}

	.project-print img {
		max-width: 650px;
	}

	.project-print2 img {
		max-width: 550px;
	}

	.project-social img {
		max-width: 850px;
	}

	.project-inside2 img {
		max-width: 795px;
	}

	.project-responsive img:first-child {
		max-width: 545px;
		padding-right: 35px;
	}

	.project-responsive img:nth-child(2) {
		max-width: 245px;
		padding-left: 35px;
	}

	img.health-web {
		max-width: 800px;
	}

	.project-mobile img:first-child {
		max-width: 245px;
		padding-right: 35px;
	}

	.project-mobile img:nth-child(2) {
		max-width: 245px;
		padding-left: 35px;
	}

	img.marketing-branding {
		max-width: 900px;
	}

	img.medicine-branding {
		max-width: 769px;
	}

	img.wedding-invite {
		max-width: 550px;
	}
}



@media (min-width: 1281px) and (max-width: 1440px) 	{




	form {
		padding-top: 5%;
	}

	.thumbnail-section h2 {
		font-size: 27px;
	}

}


@media (max-width: 1690px) and (max-height: 1050px) 	{

	.header ul {
		margin-top: 20px;
	}


}

@media (min-width: 1441px) and (max-width: 1680px) {
	form {
		padding-top: 7%;
	}
}


@media (max-width: 1025px) {

	.project-banner img {
		float: none;
		padding: 0 20px;
	}

	.project-banner img:first-child {
		padding-bottom: 200px!important;
	}

	.project-banner img:nth-child(4) {
		float: none;
		padding-top: 20px;
	}

	.banner-background {
		height: 920px;
	}
}

@media (max-width: 900px) {
	.project-banner img:first-child {
		padding: 0!important;
	}
	.project-banner img:nth-child(2), .project-banner img:nth-child(3), .project-banner img:nth-child(4)  {
		display: none;
	}
	.banner-padding {
		height: 0;
	}

	.banner-background {
		height: 450px;
	}

}