body { margin: 0px; padding: 0px; background: #fafafa; font: 400 normal 16px/26px 'Libre Franklin', sans-serif; min-width: 768px; color: #203d51; }
.clear:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
.center { text-align: center; }
.right { text-align: right; }

.wrapper { max-width: 1100px; margin: 0px auto; }
header { text-align: left; }
nav { font-size: 12px; line-height: 12px; font-weight: 500; margin: 0 0 60px 0; }
nav ul { list-style: none; padding: 20px 0 5px 0; margin: 0 0 0 54px; border-bottom: 1px solid #efefef; width: calc(100% - 208px); }
nav ul li { display: inline-block; padding: 0 10px 0 0; }
nav ul li a { color: #29475a; text-decoration: none; box-shadow: none; }
nav ul li a:hover { box-shadow: inset 0 -3px 0 #9dd6f0; }

.divider { border-top: 1px solid #efefef; }
img { max-width: 100%; }

main .logo { position: absolute; right: 10px; top: 10px; width: 124px; height: 200px; background: no-repeat url('../images/norramarkstudios.png') 0 0;  background-size: cover;  overflow: hidden; text-indent: -9999px; }

main { background: #fff; position: relative; display: block; }
main h2 { padding: 0; margin: 0 0 8px 0; font-size: 28px; }
main h2:after { width: 30px; content: ''; display: block; border-bottom: 2px solid #efefef; margin: 8px 0 10px 0; }
main h4 { font-size: 16px; margin: 0 0 4px 0; font-weight: 500; }
main p { margin: 0 0 28px 0; }
main p+p { text-indent: 35px; }

main .invoice p { margin: 0 0 8px 0; }
main .invoice h4 { font-size: 13px; margin: 0; }
main .invoice-text { margin: 0 0 28px 0; }

.three .column { float: left; width: 30%; }
.three .column.mid { margin: 0 5%; }

.two .column { float: left; width: 40%; }
.two .column.two { width: 55%; }
.two .column.first { margin: 0 5% 0 0; }

.two.flip .column { float: right; }

.two.projects { margin: 0 0 50px 0; }
.two.projects .frame { border: 1px solid #efefef; overflow: hidden; width: 100%; position: relative; display: inline-block; }
.two.projects .frame .dummy { padding-top: 85%; }
.two.projects .frame img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
.two.projects p { margin: 0 0 2px 0; }
main .column p { font-size: 14px; line-height: 24px; }
main .column .meta { font-size: 11px; line-height: 13px; margin: 0 0 4px 0; font-style: italic; }
main .column .meta:before { width: 30px; content: ''; display: block; border-bottom: 2px solid #efefef; margin: 0px 0 6px 0; }
main .column .link { font-size: 11px; }

main .contact { margin: 50px 0 0 0; }
main a { color: #203d51; text-decoration: none; box-shadow: inset 0 -3px 0 #ceeaf8; }
main a:hover { box-shadow: inset 0 -3px 0 #9dd6f0; }
main .text-input { -webkit-appearance: none; border-radius: 0px; padding: 0 0 4px 0; font-size: 15px; font-family: 'Libre Franklin'; font-weight: 400; font-style: normal; width: 100%; background: #fff; border: 0; outline: 0; border-bottom: 1px solid #ccc; }
main .text-input:focus, main .text-input.required-field:focus { border-bottom: 1px solid #ceeaf8; background: #fafafa; }
main .text-input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }
main .text-input:-webkit-autofill:disabled { -webkit-text-fill-color: #ccc; }
main .text-input:disabled { color: #ccc; }
main .text-input.required-field { border-bottom: 1px solid #f00; }
main .button {	display: inline-block; padding: 0; font-size: 15px; font-family: 'Libre Franklin'; font-weight: 400; font-style: normal; cursor: pointer; -webkit-appearance: none; outline: none; border-radius: 0; text-decoration: none; outline:none; border: none; background: none; color: #203d51; box-shadow: inset 0 -14px 0 #ceeaf8; }
main .button:hover { box-shadow: inset 0 -14px 0 #9dd6f0; }
main .button:disabled, main .button:hover:disabled { color: #ccc; box-shadow: inset 0 -14px 0 #fafafa; cursor: default; }

main .form-message.error { color: #f00; }

main.home { background: no-repeat url('../images/home.jpg') 50% 50%; background-size: cover; }
main.home .text { font-weight: 300; font-size: 60px; line-height: 86px; opacity: 0.25; padding: 80px 0 0 0; }
footer { font-size: 10px; line-height: 12px; color: #ccc; padding: 15px 0 50px 0; }
footer h5 { margin: 0 0 4px 0; padding: 0; font-size: 10px; text-transform: uppercase; color: #bbb; }
footer p { margin: 0 0 2px 0; }
footer a { color: #ccc; text-decoration: none; }
footer a:hover { color: #999; box-shadow: inset 0 -3px 0 #ceeaf8; }
footer .islands { width: 20px; height: 30px; margin: 0px auto; display: block; background: no-repeat url('../images/islands.png') 0 0; background-size: cover; }


.holder { margin: 0px 0 0 44px; min-height: 600px; width: calc(100% - 188px); }
.content { padding: 10px; }

#contact-form {	margin: 25px 0; }

#contact-form .text-input { margin: 0 0 15px 0; }

#contact-form textarea { min-height: 100px; }

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

	body, html { min-width: 320px; }
	.wrapper { width: 100%; }
	.holder { margin: 0; width: 100%; }
	.content, header { padding: 20px; }

	nav { font-size: 14px; line-height: 14px; }
	nav ul {  width: calc(100% - 62px); margin: 0; }
	main .logo { width: 62px; height: 100px; }

	main.home .text { font-size: 36px; line-height: 42px; padding: 0; }

	.three .column, .two .column, .two .column.two, .two .column.first, .two.flip .column { float: none; width: 100%; }
	.three .column.mid { margin: 0; }

	footer .three .column { text-align: center; }
	footer .three .column.mid { margin: 25px auto; }

}