@charset "UTF-8";

/*******************************************************************
PAGE LAYOUT
*******************************************************************/
* { 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}
html { 
	width:100%;
	height:auto;
}

body { 
	width:100%;
	background-color:#fff;
	height:auto;
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	color:#67696C;
}
h1, h2, h3, h5, h6 {
	font-family: 'Quicksand', sans-serif;
	font-weight: 400; 
	line-height: 1;
}

#proposal_content h4 {
	font-family: 'Lobster Two', cursive;
	font-weight: 300; 
	line-height: 1;
	border-bottom: 2px dotted #E7F0ED ;
	color: #c5d1d1;
	font-size: 1.7em !important;
}

hr {
	border:1px solid #117899;
	margin:0;
}
a {
	text-decoration: none;
	color: #ADDDD5;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
a:hover {
	color: #2C5775;
}
p {
	line-height: 1.5em;
	margin:0;
	padding: 0 16px;
	color:#85878A;
}
p a {
	color:#343434;
	font-weight:700;
	padding:5px 0;
}
#wrapper {
	position:relative;
	width: 100%;
	margin: 0 auto; 
	overflow: hidden;
}
footer {
	clear: both;
	width:  100%;
	background-color: #85878A;
	color: #1a1a1a;
	font-size: 14px;
}
footer p {
	color:#fff;
	padding:4px 16px 4px 0;
}
footer p a {
	color:#e8e9e8;
}

#footer_content {
	max-width: 1340px;
	width:100%;
	text-align:center;
	background-color: #85878A;
	padding:20px 10px;
	color:#fff;
	margin: 0 auto;
}

#copyright { 
	width: 100%;
	text-align: right;
}

#developed { 
	width: 50%;
	float: left;
	text-align: right;
}

.cta { 
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	border:2px solid #AADBD5;
	background-color: #AADBD5;
	color: #FFF;
	border-radius: 20px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.cta:hover, .cta:active {
	background-color:#2C5775;
	border:2px solid #2C5775;
	color: #FFF;
}
.left {
	float: left;
}
.right {
	float: right;
}

/** clearfix **/
.clearfix:after {
	visibility: hidden;
	display: block;
	content: "";
	clear: both;
	height: 0; 
}
html[xmlns] .clearfix { 
	display: block; 
}
* html .clearfix { 
	height: 1%; 
}

/** Navigation **/
.active { 
	color: #ADDDD5; 
}
.container {
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 35px;
}
header {
	width: 100%;
	height: 115px;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	background-color: white;
	-webkit-box-shadow: 0 0 4px 4px rgba(0,0,0,.05);
	box-shadow: 0 0 4px 4px rgba(0,0,0,.05);
}
header #logo {
	display: block;
	height: 115px;
	float: left;
}
header #logo img{
	display: inline-block;
    height: auto;
    width: 290px;
    margin-top: 7px;
}
header nav {
	display: inline-block;
	float: right; 
}
header nav a {
	line-height: 115px;
	margin-left: 40px;
	color: #A2A4A6;
	font-weight: 300;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s; 
}
header nav a:hover { 
	text-decoration: none; 
}
header nav a:first-of-type {
	margin-left: 0px;
}
header nav a:last-of-type {
	margin-left: 34px;
}
header.smaller { 
	height: 75px; 
}
header.smaller #logo img {
	width: 268px;
	height: 32px;
	margin-top: 21px;
	line-height: 75px;
	font-size: 30px; 
}
header.smaller nav a { 
	line-height: 75px; 
}

@media screen and (max-width: 950px) {
	header nav a {
		margin-left: 20px;
	}
}

@media screen and (max-width: 900px) {
	header nav {
		padding-right: 0;
	}
	.container { 
  		width: 100%;
		padding: 0; 
	}
	#contact_info { 
		padding-left: 35px;
	} 
	#dcall {
		display:none;
	}
	#mcall {
		display:inherit;
	}
	header {
		min-height:130px;  
	}
	header #logo {
		display: block;
		float: none;
		margin: 0 auto;
		height: 50px;
		text-align: center; 
	}
	header #logo img{
		display: block;
		margin: 0 auto;
		height: 77px;
		width: 200px;
	}
	header nav {
		display: block;
		float: none;
		height: 50px;
		text-align: center;
		margin: 30px auto 0; 
	}
	header nav a {
		line-height: 50px;
		margin: 10px 8px; 
	}
	header nav a:last-of-type {
		margin-left: 6px;
	}
	header.smaller { 
		height: 95px; 
	}
	header.smaller #logo {
		height: 35px;
	}
	header.smaller #logo img{
		height: 28px;
		width: 219px;
		margin-top: 10px;
	}
	header.smaller nav { 
		height: 40px; 
	}
    header.smaller nav a { 
		line-height: 35px; 
	} 
	#social {
		padding-right:35px;
	}
}

@media screen and (max-width: 800px) {
	#wrapper {
		margin-top: 130px;
	}
	#copyright { 
		width: 100%;
		float: none;
		text-align: center;
	}
	#developed { 
		width: 100%;
		float: none;
		text-align: center;
		margin-top: 10px;
	}
}

@media all and (max-width: 600px) {
	header nav a {
		font-size:15px;
	}
	.first {
		margin-left: 0;
	}
	#contact_info {
		text-align:center;
		padding: 1px;
	}
	#social {
		width:100%;
		padding: 0;
		text-align:center;
	}
	.social_icon {
		margin: 30px 0 30px 10px;
	}
	#info-bar a { 
		display: block; 
	}
	#info-bar span.all-tutorials, #info-bar span.back-to-tutorial { 
		width: 100%; 
	}
	#info-bar span.all-tutorials, #info-bar span.back-to-tutorial { 
		float: none;
		text-align: center; 
	}
	#info-bar span.all-tutorials { 
		border-bottom: solid 1px #0793e2; 
	} 
	.right {
		float:none;
	}
	.left {
		float:none;
	}
}


@media all and (max-width: 442px) {
	header.smaller { 
		height: 130px; 
	}
	header nav .cta { 
		padding: 5px 16px;
	}
	#proposal_content h4 {
		margin-bottom: .33em;
	}
}


/*******************************************************************
INDEX
*******************************************************************/
.content_hero {
	background-image: url('../images/home_hero3.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.hero_text {
	padding-top:280px;
	max-width: 720px;
	width: 100%;
	height: 600px;
	margin: 0 auto;
}
.hero_text i {
	padding-left: 10px;
}
.hero_text p {
	font-size: 50px;
	font-weight: 300;
	letter-spacing: 1px;
	line-height: 1.25em;
	color:#5a5c5e;
	text-transform:uppercase;
	text-align:center;
	xxtext-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
	text-shadow: 0 0 30px rgba(255, 255, 255, 1.0);
}
.content {
	margin: 0 auto;
	max-width: 800px;
	padding: 60px 16px;
	text-align:center;
}
.content i {
	color: #2C5775;
}
.home.content h2 {
	margin-bottom: 0;
}
.home.content h3 {
	margin-top:.5em;
}
.home.content p {
	margin: 0 0 .5em 0;
}

.splitwrap {
	background-image: url('../images/home_banner1.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: 300px;
}
.split_left {
	width:66.3%;
	display: inline-block;
}
.split_right {
	width: 33.66%;
	text-align: center;
	padding: 30px 20px;
	display: inline-block;
	float: right;
	background-color:#F7F7F5;
	min-height: 300px;
}
.split_right i {
	color: #2C5775;
}

.splitwrap2 {
	background-image: url('../images/home_banner2.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	min-height: 300px;
}
.split_left2Mobile {
	display: none;
}
.split_left2 {
	width: 33.66%;
	text-align: center;
	padding: 30px 20px;
	display: inline-block;
	float: left;
	background-color:#F5FAFD;
	min-height: 300px;
}
.split_left2 i {
	color: #2C5775;
}
.split_right2 {
	width:66.3%;
	display: inline-block;
}

.bottom_content {
	margin: 0 auto;
	max-width: 1340px;
	padding: 60px 16px 40px;
	text-align:left;
}
.bottom_content p {
 	padding: 0;
}

.bottom_left, .bottom_right {
	width:50%;
	display:inline-block;
}
.bottom_right {
	float:right;
}

.bottom_content i {
	padding-left: 20px;
}

@media(min-width:1200px) {
  .animate-reveal2 {
    opacity: 0;
    -webkit-animation: reveal2 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards !important;
    -moz-animation: reveal2 1s ease-in 1 normal forward;
    -o-animation: reveal2 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
    animation: reveal2 1s cubic-bezier(0, 1, 0.5, 1) 1 normal forwards;
  }

  .animate-reveal2:nth-child(2) {
    margin-top: 3% !important;
  }

  .animate-first {
    -webkit-animation-delay: 1500ms;
    -moz-animation-delay: 1500ms;
    -o-animation-delay: 1500ms;
    animation-delay: 1500ms;
  }

  .animate-second {
    -webkit-animation-delay: 2000ms;
    -moz-animation-delay: 2000ms;
    -o-animation-delay: 2000ms;
    animation-delay: 2000ms;
  }

  .animate-third {
    -webkit-animation-delay: 2500ms;
    -moz-animation-delay: 2500ms;
    -o-animation-delay: 2500ms;
    animation-delay: 2500ms;
  }

  @keyframes reveal2 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }
  }

@-webkit-keyframes reveal2 {
    0% {
      opacity: 0;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
    }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
      -o-transform: translateY(0);
      transform: translateY(0);
    }
  }
}

@media all and (max-width: 800px) {
	.hero_text {
		padding-top:150px;
		height: 400px;
	}
	.hero_text p {
		font-size: 40px;
	}
	.bottom_left {
		width: 70%;
	}
	.bottom_right {
		width: 30%;
	}
	.bottom_right img {
		width: 150%;
		float: right;
	}
	.animate-reveal2:nth-child(2) {
    	margin-top: 4% !important;
	}
}

@media all and (max-width: 442px) {
	.content {
		padding: 40px 16px;
	}
	.hero_text {
		padding-top:50px;
		height: 250px;
	}
	.hero_text p {
		font-size: 30px;
	}
	.split_left {
		width: 100%;
		min-height: 80px;
	}
	.split_right {
		width: 100%;
	}
	.splitwrap2 {
		background-position: right bottom;
	}
	.split_left2Mobile {
		display: block;
		width: 100%;
		min-height: 80px;
	}
	.split_left2 {
		width: 100%;
	}
	.split_right2 {
		display:none !important;
		width: 100%;
		min-height: 80px;
	}
	.bottom_content {
		padding: 10px 16px 0px;
	}
	.bottom_left, .bottom_right {
		width: 100%;
	}
	.bottom_right img {
		width: 70%;
	}
}


/*******************************************************************
PORTFOLIO
*******************************************************************/
.portfolio_hero {
	background-image: url('../images/portfolio/hero/portfolio_hero_julia_benedict_hero.jpg');
	background-repeat: no-repeat;
	margin: 50px auto 0;
	max-width: 1340px;
	min-height: 550px;
}
.portfolio_hero_text {
	padding: 200px 16px 0;
	max-width: 700px;
	width: 100%;
}
.portfolio_hero_text p {
	font-size: 40px;
	font-weight: 300;
	letter-spacing: 1px;
	color:#67696c;
	text-align:left;
}
.portfolio_hero_text h3 {
	padding: 0 16px;
	line-height:1.15;
}
.portfoliopg_content i {
	padding-left: 10px;
}
.portfolio_head {
	margin: 0 auto ;
	max-width: 1340px;
	padding: 0 16px;
}
.portfolio_head h2 {
	border-bottom: 1px solid #EBEBEB;
	padding-bottom: 0.83em;
}
.portfolio_group {
	margin: 0;
	padding: 0;
}
.portfolio_group li {
	list-style-type:  none;
}
.portfolio-item {
	width: 31.33%;
	margin: 0 1% 20px;
	float: left;
	display: inline-block;
}
.portfolio_group .portfolio-item .image_frame {
	margin-bottom: 0;
	width: 100%;
	border: 8px solid #f8f8f8;
}
.image_frame .image_wrapper {
	overflow: hidden;
	position:realtive;
	max-height:288px;
}
.portfolio_group .portfolio-item .image_frame .image_wrapper img {
	transition: all .2s ease-in-out;
	transform: scale(1.0);
	width: 100%;
	max-height: 288px;
}
.portfolio_group .portfolio-item:hover .image_frame .image_wrapper img {
	transform: scale(1.1);
}
.portfolio_group .portfolio-item .desc {
	background: #fff none repeat scroll 0 0;
	overflow: hidden;
	padding: 15px;
}
.portfolio_group .portfolio-item:hover .desc a {
	color: #2C5775;
}
.portfolio_group .portfolio-item .desc h4 {
	margin: 0;
}
.portfolio_group .portfolio-item .desc i {
	float: right;
}

@media all and (max-width: 800px) {
	.portfolio_hero {
		background-image: none;
		min-height: 300px;
	}
	.portfolio_hero_text {
		padding: 0px 16px 0;
	}
	.portfolio_hero_text p {
		font-size: 30px;
	}
	.portfolio-item {
		width: 47.33%;
	}
}

@media all and (max-width: 442px) {
	.portfolio_hero_text p {
		font-size: 20px;
	}
	.portfolio-item {
		width: 100%;
	}
}


/*******************************************************************
PORTFOLIO PROJECT PAGES
*******************************************************************/
.portfoliopg {
	margin: 180px auto 0 ;
	max-width: 1340px;
	padding: 0 16px;
}
.portfoliopg_content {
	width:33.3%;
	display: inline-block;
	float: left;
	padding-bottom: 40px;
}
.portfoliopg_content p {
	padding: 0 ;
}
.portfoliopg_site {
	width:61.6%;
	display: inline-block;
	float: right;
	padding-bottom: 40px;
}
.portfoliopg_site img {
	width: 100%;
	border: 1px solid #F8F8F8;
}
@media all and (max-width: 800px) {
	.portfoliopg {
		margin: 20px auto 0 ;
	}
	.portfoliopg_content {
		width:100%;
	}
	.portfoliopg_site {
		width:100%;
	}
}

@media all and (max-width: 442px) {

}



/*******************************************************************
CONTACT
*******************************************************************/
.contact_hero {
	background-image: url('../images/contact/contact_hero.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.contact_hero_text {
	padding-top:250px;
	max-width: 720px;
	width: 100%;
	height: 500px;
	margin: 0 auto;
	text-align: center;
}
.contact_hero_text i {
	padding-left: 10px;
	color: #2C5775;
}
.contact_hero_text p {
	font-size: 50px;
	font-weight: 300;
	letter-spacing: 1px;
	line-height: 1.25em;
	color:#5a5c5e;
	text-transform:uppercase;
	text-align:center;
	xxtext-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
	text-shadow: 0 0 30px rgba(255, 255, 255, 1.0);
}

/****FORM STYLING****/
#contact_form {
	max-width: 100%;
	width: 600px;
	margin: 50px auto 0;
}
#contact_form label {
	color: #5A5B5D;
	float: left;
}
#name {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	height: 35px;
	padding: 6px;
	margin-bottom: 15px;
	background-color: #FAFAFA;
}
#name:focus {
	background-color: #FFFFFF;
	transition: background 0.1s ease-in 0s;
}

.names {
	width: 100%;
}

.names_left {
	width: 48%;
	margin-right:2%;
	float: left;
	text-align: left;
}

#first_name {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	height: 35px;
	padding: 6px;
	margin-bottom: 15px;
	background-color: #FAFAFA;

}
#first_name:focus {
	background-color: #FFFFFF;
	transition: background 0.1s ease-in 0s;
}

.names_right {
	width: 48%;
	margin-left:2%;
	float: left;
	text-align: left;
}

#last_name {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	height: 35px;
	padding: 6px;
	margin-bottom: 15px;
	background-color: #FAFAFA;
}
#last_name:focus {
	background-color: #FFFFFF;
	transition: background 0.1s ease-in 0s;
}

#message {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	height: 105px;
	padding: 6px;
	margin-bottom: 15px;
	background-color: #FAFAFA;
}
#message:focus {
	background-color: #FFFFFF;
	transition: background 0.1s ease-in 0s;
}


#submit {
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 600;
	text-transform: uppercase;
	border:2px solid #AADBD5;
	background-color: #AADBD5;
	color: #FFF;
	border-radius: 20px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

#submit:hover, #submit:active {
	background-color:#2C5775;
	border:2px solid #2C5775;
	color: #FFF;
}


@media all and (max-width: 800px) {
	.contact_hero_text {
		padding-top:120px;
		height: 300px;
	}
	.contact_hero_text p {
		font-size: 40px;
	}
	.contact_hero_text h3 a {
		color: #67696c;
	}
}

@media all and (max-width: 442px) {
	.contact_hero_text {
		padding-top:35px;
		height: 170px;
	}
	.contact_hero_text p {
		font-size: 30px;
	}
}