body {font-family: AvenirRoman; background-color: #000; color:#333; font-size: 14px; margin: 0px;}

.wrapper {background-color: #FFF;}

p {line-height: 1.5em; }

a {text-decoration: none;}

.debug {border: 1px solid red;}
.red {color: #F00;}
.pink {color: #ec008c;}
.darkGrey {color: #333;}
.divider {border: solid #ec008c; border-width: 1px 0px 0px 0px;}
.space {height: 100px;}
.large {font-size: 1.2em;}
.top {vertical-align: top;}
.noOutline {outline: none;}
.outerLink {outline: none; color: #333;}
.italic {font-family: AvenirOblique;}
.italic2 {font-family: AvenirBookOblique;}
.italic3 {font-family: AvenirMediumOblique;}
.italic4 {font-family: AvenirBookOblique; font-weight: bold;}

#header {display: table; width: calc(100% - 140px); margin: 0px auto; height: 100px;}

#textLogoDiv {display: table-cell; vertical-align: middle;}
#textLogo {font-size: 1.8em;}

#menuDiv {display: table-cell; vertical-align: middle; text-align: right;}
#topMenu {list-style: none; padding: 0px; }
#topMenu li {display: inline-block; margin: 4px 8px;}
#topMenu li a {color: #333; }
#topMenu li a:hover,#topMenu li.selected a {color: #ec008c;}
#menuButton {display: none; float: right; cursor: pointer; position: relative; top: -1px;}


.mainBanner {height: 30vh; font-size: 2.1em; color: #FFF; text-align: center; padding: 4vh 20px 20px; background-size: cover; background-repeat: no-repeat; background-position: center;}
#mainBanner1 {background-image: url(../images/fire.jpg);}
#mainBanner2 {background-image: url(../images/typewriter.jpg);}
#mainBanner3 {background-image: url(../images/tab.jpg);}
#mainBanner4 {background-image: url(../images/press.jpg);}
#mainBanner5 {background-image: url(../images/phone.jpg);}

#main {margin: 30px 25vw;}
.pageHeader {color: #ec008c; font-size: 1.8em; margin-bottom: 30px;}
.pageSubHeader {font-size: 1.6em;}
.subHeaderSeparator {color: #ec008c;}
.section {margin: 40px 0px;}
.sectionHeader {color: #ec008c; margin-bottom: 5px; font-size: 1.4em;}
.sectionList {padding-left: 16px; }
.sectionList li {line-height: 1.5em;}

#policyPane {display: table; width: 100%; position: fixed; background-color: #ec008c; color: #FFF; padding: 15px 0px; bottom: 0px;}
.policyLeft {display: table-cell; padding: 0px 15px;}
.policyRight {display: table-cell; vertical-align: middle; padding: 0px 15px;}
.policyHeader {font-size: 1.6em; color:#ec008c; margin: 20px 0px;}
.policySubHeader {font-size: 1.6em; margin: 25px 0px;}
.statementHeader {font-size: 1.6em; margin-bottom: 10px;}
#acceptPolicy {border: 1px solid white; cursor: pointer; padding: 5px; white-space: nowrap; text-align: center; max-width: 150px;}
.policyLink {color: #FFF; text-decoration: underline;}
.policyLinkDiv {margin-top: 30px;}
.commonPolicyLink {color: #FFF; line-height: 1.5em;}

#main2 {margin: 30px calc(25vw - 325px);}
.sectionAbout0 {margin: 30px 0px 40px; display: table;}
.sectionAbout {margin: 40px 0px; display: table;}
.aboutLeft,.aboutLeft0 {display: table-cell;  vertical-align: top; width: 300px; padding-right: 25px; }
.aboutCenter {display: table-cell; vertical-align: top;}
.aboutRight {display: table-cell; vertical-align: top; width: 300px; padding-left: 25px;}

#main3 {margin: 30px 25vw; position: relative;}
.sectionWork {margin: 30px 0px 25px; display: table; table-layout: fixed; width: calc(100% + 20px); position: relative; left: -10px;}
.workCell {display: table-cell; position: relative; text-align: center; vertical-align: middle; padding: 10px; cursor: pointer;}
.workCell img {width: 100%; margin: auto;}
.workCell:not(.big) img {opacity: 0.6;}
.cellCaption {position: absolute; top: 20px; left: 20px; color: #FFF; font-size: 1em; z-index: 5; margin-right: 15px; text-align: left;}
.activeCell img {box-shadow: 0 0 10px rgba(0,0,0,0.6);}
.activeCell .cellCaption,.workCell:hover .cellCaption {color: #ec008c;}
.sectionContent {display: none; border: solid transparent; border-width: 1px 0px;}
.workSectionHeader {font-size: 1.8em; color:#ec008c;}
.workList li {margin: 15px 0px;}
.thinkingImg {margin-right: 20px;}
#mastheads {width: 384px;}
.dcom {display: table; table-layout: fixed;}
.cell {display: table-cell; padding-right: 20px;}
.outerLinkImg {margin-bottom: 15px; width: 100%; max-width: 300px;}

#footer,#footer2 {background-color: #000; padding: 30px 25vw;}
#rightFooter {float: right;}
#copyRight {color: #FFF; margin-top: 30px;}
#socialIcons {margin-top: 10px;}
.footerInner {color: #FFF;}
.socialIcon {margin-right: 15px;}
.bottom-nav {margin-top: 0px; list-style: none; padding-left: 0px;}
.bottom-nav li { line-height: 1.5em;}
.bottom-nav a {color: #FFF;}

.contactForm td {padding-top: 2px; padding-bottom: 2px;}
.formCaption {text-align: right; padding-right: 10px; }
.contactForm input, .contactForm textarea {border: none; background-color: #E9E9E9; font-size: 1em; font-family: AvenirRoman; padding: 5px; width: 300px;}
#submitContactForm {width: 160px; padding: 6px; color: #FFF; border: none; background-color: #ec008c; cursor: pointer;}
#contactFormLoader {margin: 2px 0px 2px 0px;}

@media (max-width: 1380px) {
  #main2 {margin: 30px 20px;}
  #footer2 {padding: 30px 345px;}
}

@media (max-width: 1100px) {
  .aboutLeft,.aboutLeft0,.aboutRight {width: 30%;}
  .aboutImg {width: 100%;}
  .cellCaption {font-size: 0.8em; top: 18px; left: 15px;}
  #footer2 {padding: 30px 30vw;}
}

@media (max-width: 800px) {
  .space {height: 10px;}
  #header {width: calc(100% - 40px);}
  #menuDiv {position: relative; top: 0px; right: 0px; width: 110px;}
  #menuButton {display: block;}
  #topMenu {display: none; position: absolute; top: 70px; right: -20px; background-color: rgba(255,255,255,0.95);}
  #topMenu li {display: block; margin: 0px 20px 10px 20px;}
  #main,#main2,#main3 {margin: 30px 8vw;}
  .aboutLeft0 {display: none;}
  .aboutLeft {display: block; padding-right: 0px; margin-bottom: 20px; width: 100%;}
  .aboutCenter {display: block;}
  .aboutRight {display: none; }
  .aboutImg {width: 50%; min-width: 240px;}
  .cellCaption {font-size: 0.8em; top: 20px; left: 18px; margin-right: 18px;}
  #footer,#footer2 {padding: 30px 8vw;}
  #mastheads {width: 100%;}
}

@media (max-width: 700px) {
  .workCell {display: block; max-width: 300px; margin: auto;}
  .cellCaption {font-size: 1.2em; top: 20px; left: 30px;}
  .sectionContent {margin: 20px 0px;}
  .dcom {display: block;}
  .cell {display: block; padding-right: 0px; margin-bottom: 20px;}
  .outerLinkImg {margin-bottom: 15px; width: 100%; max-width: 300px;}
  .policyLeft {display: block;}
  .policyRight {display: block; padding-top: 20px;}
}

@media (max-width: 500px) {
.contactForm {width: 100%;}
.contactForm input, .contactForm textarea {width: 100%;}
}