html, body { position: relative; background-color: #121930; color: #121930; width: 100%; height: 100%; }

a { color: #40BFE2; }
a:hover { color: #40BFE2; }
a:visited { color: #40BFE2; }

.callout { color: #40BFE2; }

.bar-shadow, .content-box, header, .landing .banner { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); }

h1, h2, h3 { font-family: 'Avenir Next', 'Nunito', sans-serif; font-weight: bold; }

h1 { font-size: 48px; font-size: 4.8rem; border-bottom: 2px solid #40BFE2; font-family: 'Avenir Next', 'Nunito', sans-serif; font-weight: bold; padding: 10px 0; }

.content-box { font-size: 16px; font-size: 1.6rem; z-index: 10; background-color: rgba(243, 241, 242, 0.85); margin-top: 150px; padding-top: 10px 20px; }
.content-box p { padding: 10px 0; }

.details-display { background: rgba(243, 241, 242, 0.85); margin-bottom: 40px; padding: 20px; position: absolute; top: 120px; width: 750px; }

header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: #f3f1f2; height: 50px; padding: 0 20px; width: 100%; }
header .logo-name { font-size: 28px; font-size: 2.8rem; font-family: 'Avenir Next', 'Nunito', sans-serif; font-weight: bold; line-height: 50px; text-transform: uppercase; }
header .logo-callout > sup { font-size: 16px; font-size: 1.6rem; }
header a { color: #121930; }
header a:hover { color: #121930; text-decoration: none; }
header a:visited { color: #121930; }
header .shortcuts > a { font-size: 18px; font-size: 1.8rem; font-family: 'Avenir Next', 'Nunito', sans-serif; font-weight: bold; color: #121930; line-height: 50px; padding: 0 15px; }
header .shortcuts > a:hover { color: #40BFE2; text-decoration: none; }
header .shortcuts > a:visited { color: #121930; }

.landing { position: relative; width: 100%; height: 100%; }
.landing .bg-landing { background: url(../images/landing.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.landing .logo-hero { -webkit-filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); position: absolute; top: 70px; left: 0; right: 0; bottom: 220px; background: url(../images/devarc.svg) no-repeat center center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; }
.landing .banner { background-color: rgba(243, 241, 242, 0.8); padding: 20px 0; position: absolute; bottom: 40px; left: 0; right: 0; }
.landing .banner > .content { font-size: 40px; font-size: 4rem; font-family: 'Avenir Next', 'Nunito', sans-serif; font-weight: bold; margin: auto; text-align: center; width: 730px; }

.guide { position: relative; width: 100%; height: 100%; }
.guide .bg-guide { background: url(../images/guide.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.services { position: relative; width: 100%; height: 100%; }
.services .bg-services { background: url(../images/services.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.services .details-display { right: 0; }

.clients { background-color: #fff; padding: 50px; }
.clients .logos { padding: 80px 30px; text-align: center; }
.clients .logo { display: inline-block; height: 100px; width: 150px; margin: 20px; }
.clients .adobe { background: url(../images/logos/adobe.png) no-repeat center center; }
.clients .avaak { background: url(../images/logos/avaak-logo.jpg) no-repeat center center; }
.clients .bluekai { background: url(../images/logos/bluekai.gif) no-repeat center center; }
.clients .bulleit-group { background: url(../images/logos/bulleit-group.png) no-repeat center center; }
.clients .corelogic { background: url(../images/logos/corelogic-logo.png) no-repeat center center; }
.clients .dhap { background: url(../images/logos/dhap.png) no-repeat center center; }
.clients .digitalthrottle { background: url(../images/logos/digital-throttle.png) no-repeat center center; }
.clients .hhg { background: url(../images/logos/hhg.png) no-repeat center center; }
.clients .fitstar { background: url(../images/logos/fitstarlogo.png) no-repeat center center; }
.clients .jloop { background: url(../images/logos/logo-jloop.png) no-repeat center center; }
.clients .lucilles { background: url(../images/logos/lucilles_logo.png) no-repeat center center; }
.clients .pedanco { background: url(../images/logos/pedanco.png) no-repeat center center; }
.clients .primemind { background: url(../images/logos/primemind.jpg) no-repeat center center; }
.clients .vmware { background: url(../images/logos/vm-ware.jpg) no-repeat center center; }
.clients .yahoo { background: url(../images/logos/yahoo.png) no-repeat center center; }

.contact { color: #f3f1f2; position: relative; width: 100%; min-height: 100%; padding-top: 50px; }
.contact h1 { padding-top: 40px; border: none; }
.contact .contact-us { font-size: 18px; font-size: 1.8rem; }
.contact .headshot { float: left; width: 100px; height: 100px; border: 2px solid #f3f1f2; border-radius: 100px; margin: 0 20px 5px 0; }
.contact .headshot-aaron { background: url(../images/aaron-200px.jpg) no-repeat center center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; }
.contact .headshot-james { background: url(../images/james-200px.jpg) no-repeat center center; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: contain; }
.contact .profile { margin: 40px 0 60px; }
.contact .profile .name { font-size: 24px; font-size: 2.4rem; font-weight: bold; }
.contact .profile .title { font-size: 18px; font-size: 1.8rem; font-style: italic; }
.contact .profile .description { margin-top: 5px; }

footer { font-size: 12px; font-size: 1.2rem; position: absolute; bottom: 0; left: 0; right: 0; background: #000; color: #f3f1f2; height: 40px; line-height: 40px; padding: 0 20px; z-index: 1000; text-align: right; }

@media (min-width: 320px) and (max-width: 736px) { .landing .banner > .content { font-size: 20px; font-size: 2rem; font-family: 'Avenir Next', 'Nunito', sans-serif; font-weight: bold; margin: auto; text-align: center; width: 320px; }
  .details-display { position: relative; width: inherit; top: auto; }
  .services, .guide { height: auto; min-height: auto; }
  header .shortcuts, .bg-guide, .bg-services { display: none; }
  .clients { padding: 10px 10px; }
  .clients .logos { padding: 10px; text-align: center; }
  .clients .logo { margin: 10px; }
  .contact { padding-top: 0; }
  .contact h1 { padding-top: 0; }
  h1 { font-size: 24px; font-size: 2.4rem; }
  .content-box { font-size: 14px; font-size: 1.4rem; background-color: #f3f1f2; margin-top: 60px; padding-top: 10px 20px; }
  .content-box p { padding: 5px 0; }
  footer { font-size: 9px; font-size: 0.9rem; } }