@font-face {
    font-family: dinot;
    src: local(dinot), url('../fonts/DINOT.otf') format('opentype');
    
    font-family: didot;
    src: local(didot), url('../fonts/Didot.ttc') format('opentype');
}

body { margin: 0 auto; text-align: center; font-family: dinot; font-size: 12px; color: #3c3b3a; background: white; }
#main { margin: 0 auto; margin-top: 60px; width: 1024px; background: white; text-align: center; overflow: hidden; min-width: 800px; }
#main-left { width: 460px; height: 518px; display: inline-block; border-right: 2px solid #3c3b3a; margin: 0 auto; }
#main-right { min-width: 547px; display: inline-block; margin: 0 auto; }
	#main-right ul { list-style: none; display: inline-block; position: absolute; top: 325px; width: 470px; }
	#main-right ul li { display: inline; float: left; text-transform: uppercase; font-size: 16px; padding: 0 10px; letter-spacing: 3px; font-weight: 100; }
#logoLg { width: 348px; height: 254px; margin: 0 auto; margin-top: 136px; background: transparent url(../images/logo-med2.jpg) center center no-repeat; cursor: pointer; }
a, a:visited, a:active { text-decoration: none; color: #2491a4; letter-spacing: 3px; font-weight: bold; }
a:hover { text-decoration: underline; }
h1 { margin: 0; font-size: 48px; }
h2 { margin: 0; font-size: 28px; }
#contact, #contactInfo { margin-top: 10px; text-transform: uppercase; font-size: 16px; }
#contactInfo { height: 60px; display: none; }
#social { width: 100%; text-align: right; }
#footer { font-family: dinot; font-size: 12px; color: #7f7f7f; letter-spacing: normal; margin-top: 20px;, padding-right:200px; }
.tiny { font-size: 14px;line-height: 50px; }
.medium { font-size: 24px; line-height: 30px; }
.social-icon { width: 54px; height: 53px; padding: 0 8px; }

/* ---- landing ---- */
#landing-left { width: 224px; height: 616px; display: inline-block; border-right: 2px solid #3c3b3a; margin: 0 auto; vertical-align: top; }
	#landing-left ul { width: 165px; list-style: none; display: block; margin-top: 50px; }
	#landing-left ul li { display: block; text-transform: uppercase; font-size: 14px; padding: 20px 0; text-align: left; letter-spacing: 3px; font-weight: bold; }
#landing-right { width: 780px; height: 616px; display: inline-block; margin: 0 auto; }
#logoSm { width: 156px; height: 42px; background: transparent url(../images/logo-sm.png) bottom left no-repeat; margin: 0 auto; padding-top: 10px; cursor: pointer; }

/* ---- projects ---- */
.project-item { width: 180px; height: 180px; float: left; margin: 0 0 60px 62px; font-size: 14px; font-weight: 600; color: white; text-transform: uppercase; text-align: left; cursor: pointer; }

/* ---- project detail ---- */
#project-image { width:560px; height: 360px; margin-left: 60px; background: transparent center left no-repeat; position: relative; overflow: hidden; float: left; }
#project-details { width:490px; height: 320px; background: transparent url(../images/overlay.png); position: absolute; top:0px; left: 560px; text-align: justify; padding: 20px 35px; color: #fff; font-size: 16px; line-height: 20px; letter-spacing: 1px; font-weight: 500; }
#view-details { width:62px; background: transparent center left no-repeat; background-image: url(/images/details-arrow.png); margin-left: 3px; text-align: right; color: #898989; font-size: 10px; float: left; cursor: pointer; }
#controls { margin: 22px 0 0 60px; }
#button-left { width: 13px; height: 27px; background: transparent url(/images/arrow-left-large.png) center center no-repeat; float: left; cursor: pointer; }
#button-right { width: 13px; height: 27px; background: transparent url(/images/arrow-right-large.png) center center no-repeat; float: left; margin-left: 5px; cursor: pointer; }
#numbers { width:150px; margin: 5px 0 0 30px; color: #898989; font-size: 12px; text-align: left; float: left; }

/* ---- services ---- */
.service-item { display: block; width: 701px; height: 221px; float: left; margin: 0 0 0 60px; }
p.service { font-size: 12px; text-align: left; font-weight: 100; margin: 34px 0 0 60px; }
.bold-heading { font-size:13px; font-weight: bold; color: #2491a4; letter-spacing: 3px; }
	.bold-heading span { font-size: 10px; color: #3c3b3a; font-weight: normal; margin-left: 12px; }
.caption { margin-top: 5px; font-size: 12px; color: #7c7c7c; }

/* ---- about ---- */
.person { width: 701px; height: 200px; margin: 0 0 0 60px; }
	.person p { font-size: 12px; text-align: justify; }
.headshot { float: left; margin: 0 20px 0 0; }
	.headshot img { width:132px; height:177px; }
#approachContainer { width:646px; height: 329px; padding: 50px 0; margin-left: 60px; }
#approachOverlay { background: transparent url(../images/overlay.png); width:576px; height: 289px; text-align: justify; padding: 20px 35px; color: #fff; font-size: 16px; line-height: 20px; letter-spacing: 1px; font-weight: 500; }

/* ---- contact ---- */
#contact-image { width: 271px; height: 408px; float: left; margin: 0 0 30px 60px; }
.contact-item { text-align: left; letter-spacing: 3px; font-size: 14px; font-weight: bold; margin-left: 60px; }
	.contact-item a { font-family: dinot; font-weight: normal; letter-spacing: normal; }
ul.contact-list { list-style: none; float: left; margin:51px 0 0 38px; }
ul.contact-list li { display: inline-block; margin-right: 40px; }