/*** General Settings ***/
html {
   	height: 102%;
}

body{
	font-family: "Georgia", Times, serif;
	/*color:#c0c9cb;*/
	color:#666666;
	font-size:16px;
	background-color: #ffffff;
}


h2 {
    color: #FB6C39;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.8em;
    font-weight: normal;
    margin-bottom: 30px;
    /*border-bottom: 1px solid #dddddd;*/
}

h3 {
	color: #FB6C39;
    font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.3em;
    font-weight: normal;
    text-transform: uppercase;
    line-height: 1.2;
}

.clear{
	clear:both;
}

.left{
	float:left;
}

.right{
	float:right;
}

/*** Layout ***/
#content {
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

#header{
	height: 130px;
}

#logo {
    background: url("../img/newlogo2.png") no-repeat center transparent;
	-webkit-background-size: contain;
	-moz-background-size: contain;
	-o-background-size: contain;
	background-size: contain;
    float: left;
    height: 97px;
    margin-top: 25px;
    width: 508px;

    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#hero{
}

#heroimages{
	padding-top:30px;
}

#heroimages .left{
	width:555px;
	height:57px;
}

#heroimages .right{
	width:457px;
	height:71px;
}

#herotext{
	font-style:italic;
	letter-spacing:0.025em;
	line-height:1.35em;
	padding-top:20px;
	font-size: 1.1em;
}

#herotext p {
	padding-bottom:30px;
}

#herotext p:last-child {
	padding-bottom: 0;
}

#herotext img{
	padding:0px;
	margin:0px;
	line-height:1.0em;
	display:inline;
}


a:link, a:visited {
	text-decoration:none;
	color:#fb6c39;
}

a:hover, a:active{
	text-decoration:underline;
	color:#fb6c39;
}

/*** Main Content ***/
#main{

}


.box {
    float: left;
    line-height: 1.3em;
    overflow: hidden;
    position: relative;
    width: 67%;
}

.box h2 {
	margin: 10px 10px 0 10px; 
	color:#FFF; 
}

.disclaimer {
    float: left;
    padding-left: 10px;
    padding-top: 10px;
    width: 67%;
}

.box p {
	color: #aaa;
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: .65em;
	line-height: 1.2em;
}

.box strong {
	font-weight:bold;
}

.links {
	float:right;
}

.box a{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	color:#fb6c39;
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	padding: 0 10px;
	float:right;
}

.box img{ 
	border: 1px solid #dddddd;
	display: block;
	width: 100%;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;
}

.boxcaption{
	float: left;
	position: absolute; 
	background: #000; 
	height: 25%;
	width: 100%;
	opacity: .8; 
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
	top: 100%;
	left: 0px;
}

.description {
	line-height: 1.4em;
    width: 30%;
}

.deliverables, .skills, .descriptiontext{
	font-family: "Georgia", serif;
	font-style:italic;
	font-size:.9em;
}

.deliverables, .skills {
	margin-bottom: 1em;
}

.descriptiontext{
	font-size: .95em;
}

.description .descriptiontext a {
	float: none;
}

.description h4{
	font-style:normal;	
	font-weight:bold;
	color:#8f9fa3;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:.9em;
	text-transform:uppercase;
}

.description a {
	float:right;
	font-size:.8em;
	font-weight:bold;
	text-transform:uppercase;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#main hr{
	color: #dddddd;
	background-color: #dddddd;
	height: 1px;
	margin: 30px auto;
    width: 100%;
    border: 0;
}

/*** Footer ***/
#footer {
	padding-bottom: 30px;
	overflow: hidden;
}

#services, #expertise{
	width: 32%;
	margin-right: 2%;
}

#footer ul{
	font-size:.9em;
	font-style:italic;
	line-height:1.3em;
	margin-top:5px;
}

#footer ul li{

}

#footer a:link, #footer a:visited {
	text-decoration:none;
	color:#777777;
}

#footer a:hover, #footer a:active{
	color:#fb6c39;
}

#contact{
	width: 30%;
}

/*** Contact Form ***/
#contact-area{
}

#message-area{
	height:30px;
	color: #fb6c39;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#contact-area input, #contact-area textarea {
	padding: 1px;
	margin:1px;
	width: 67%;
	font-size: .9em;
	border: 1px solid #ccc;
	color:#666666;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	float:right;
}

#contact-area textarea {
	height: 55px;
}

#contact-area textarea:focus, #contact-area input:focus {
	border: 1px solid #fb6c39;
}

#contact-area input.submit-button {
	margin-top:5px;
	width: 33%;
	float: right;
	background-color:#f5fbfc;
}

label {
	float: left;
	text-align:right;
	width: 20px;
	font-size: .9em;
	font-style:italic;
}

/* For large screens */
@media only screen and (min-width: 1067px) {
	#content {
		width: 960px;
	}
}

@media only screen and (max-width: 768px) {
	#content {
		width: 96%;
		margin: 0 auto;
	}
	#header {
    	width: 100%;
	}
	#logo {
	    width: 66%;
	    margin-left: 30px;
	}

	#contact label {
		display: block;
		float: none;
		width: auto;
		text-align: left;
	}

	.box {
		width: 48%;
	}

	.box:hover {
		cursor: pointer;
		opacity: .9;
		-moz-opacity: .9;
		-webkit-opacity: .9;
	}

	.description {
		width: 48%;
	}

	#contact-area input, #contact-area textarea {
		width: 100%;
	}

	span.arrow {
		display: none;
	}

	.description a {
    	float: left;
	}

	.disclaimer {
		display: none;
	}
}

@media only screen and (max-width: 480px) {
	h2 {
		text-align: center;
	}

	hr {
		display: none;
	}

	#logo {
		width: 90%;
		float: none;
		margin: 0 auto;
	}

	#header {
		height: auto;
	}

	#herotext p:last-child {
		display: none;
	}

	#herotext p {
		/*text-align: justify;*/
		font-size: 20px;
		color: #777777;
		line-height: 1.3;
		text-align: center
	}

	.box {
		float: none;
		width: 100%;
		margin: 0;
	}

	.boxcaption {

	}

	.description {
		float: none;
		width: 100%;
		margin-top: 30px;
	}

	#services, #expertise, #contact, #contact-area {
		width: auto;
		margin: 0;
		margin-bottom: 20px;
		font-size: 20px;
		float: none;
		text-align: center;
	}

	#contact label {
		display: block;
		float: none;
		text-align: center;
		width: auto;
	}

	#contact-area input, #contact-area textarea {
		width: 98%;
		margin: 0 auto;
	}

	#contact-area input.submit-button {
		width: 80%;
		float: none;
	}

	.flash {
		display: none;
	}

	.description a {
		float: none;
		font-size: inherit;
		text-align: center;
		display: block;
		margin-bottom: 2em;
	}

	.description .descriptiontext a {
		float: none;
		display: inline;
		margin: 0;
		text-align: left;
	}

}

@media only screen and (max-width: 320px) {

	.deliverables {
		display: none;
	}

	.descriptiontext, .skills {
		font-size: 18px;
	}

	.description h4 {
		font-size: 1.1em;
		padding-bottom: .5em;
	}

}