@import url("https://use.typekit.net/vlo4bpe.css");

body {
  background-color: #dddddd;
  margin: 0px;
  font-family: adobe-jenson-pro, serif;
  font-weight: 300;
  font-size: 0;
  color: #323237;
}

h3 {
  margin: 20px 0px 0px 0px;
  font-size: 14pt;
  font-weight: bold;
  font-style: italic;
}

.paragraph {
  font-size: 12pt;
  line-height: 12pt;
  text-align: justify;
  margin: 12px 15px 12px 8px;
}

.form-cell {
  font-size: 12pt;
  line-height: 11pt;
  width: 80px;
}

.contact-form-table {
  width: calc(100% - 15px);
}


.header-input {
  width: 100%;
}

.body-input {
  width: 100%;
  height: 200px;
}

.paragraph-no-font {
  font-size: 8pt;
  line-height: 11pt;
  text-align: justify;
  margin: 12px 15px 12px 8px;
}

.footnote {
  font-size: 9pt;
  text-align: justify;
  margin-left: 10%;
}

.keyword { /* e.g. "MFOA" or "Mira Bernstein" */
  color: #0053a1;
  font-family: ff-nuvo-web-pro, sans-serif;
  font-weight: bold;
}

.title { /* e.g. "Executive Director" */
   font-weight: bold;
   color: #eb0a2d;
}

.emph {
  font-style: italic;
}

a {
  text-decoration: none;
  color: inherit;
}

.mfoa-footer a {
  color: #ffdba6;
}

.mfoa-footer a:hover {
  color: #ffffa6;
}

.mfoa-title a {
  color: #ffffff;
}


.affiliation {
  margin-left: 8px;
  margin-bottom: 8px;
}

@media (min-width: 980px) {
  .container {
    width: 960px;
    background-color: #ffffff;
    margin: 0px auto;
  }

  .mfoa-header {
    width: 100%;
  }

  .mfoa-logo {
    display: inline-block;
    width: 129px;
    height: 78px;
    vertical-align: middle;
    margin: 12px;
  }

  .mfoa-title {
    display: inline-block;
    width: 807px;
    height: 102px;
    font-size: 39pt;
    text-align: center;
    vertical-align: middle;
    background-color: #0053a1;
    color: #ffffff;
    line-height: 110px;
  }

  .piping {
    background-color: #c2c7f2;
    width: 100%;
    height: 9px;
  }

  .mfoa-body {
    display: block;
    background-color: #ffffff;
    min-height: 861px;
    width: 100%;
  }

  .mfoa-footer {
    background-color: #0053a1;
    height: 33px;
    font-size: 12pt;
    color: #ffffff;
    text-align: center;
    line-height: 36px;
  }

  .separator {
    display: inline-block;
    background-image: url("images/separator.png");
    width: 5px;
    height: 5px;
    vertical-align: middle;
    background-size: 5px 5px;
  }

  .mfoa-button-panel {
    float: left;
    width: 498px;
    height: 861px;
  }
 
  .mathcamp-button {
    width: 468px;
    height: 185px;
    margin: 15px;
    background-image: url("images/button_retina.png");
    background-size: 100% 100%;
  }

  .mfoa-photo {
    margin: 15px;
    width: 468px;
    height: 520px;
    background-image: url("images/bridge_tall.jpg");
    background-size: 100% 100%;
  }

  .bounded-image {
    width: 100%;
    height: 100%;
  }

  .other-button-box {
    margin: 15px;
    width: 468px;
    height: 96px;
  }
  

  .other-button {
    float: left;
    height: 96px;
    width: 228px;
    cursor: pointer;
    background-color: #e8e8ed;
  }

  .second-button {
   margin-left: 12px;
  }
  
  .other-button-text {
    height: 82px;
    width: 160px;
    padding-top: 14px;
    font-family: ff-nuvo-web-pro, sans-serif;
    font-size: 20pt;
    font-weight: 800;
    color: #333333;
    text-align: center;
    margin: auto;
  }

  .mfoa-info-panel {
    float: left;
    width: 462px;
  }

  .clear {
    clear: both;
  }

}


@media (min-width: 480px) and (max-width: 979px) {
  .container {
    width: 100%;
    background-color: #ffffff;
    margin: 0px auto;
  }

  .mfoa-header {
    width: 100%;
    background-color: #0053a1;
  }

  .mfoa-logo {
    display: inline-block;
    width: 14%;
    vertical-align: middle;
    padding: 12px;
    background-color: #ffffff;
  }

  .mfoa-title {
    display: inline-block;
    width: calc(86% - 24px);
    font-size: 40px;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
  }

  .piping {
    background-color: #c2c7f2;
    width: 100%;
    height: 9px;
  }

  .mfoa-body {
    display: block;
    background-color: #ffffff;
    width: 100%;
    min-height: 522px;
  }

  .mfoa-footer {
    background-color: #0053a1;
    height: 67px;
    font-size: 11pt;
    color: #ffffff;
    text-align: center;
    line-height: 18pt;
  }
  
  .footer-content {
    width: 480px;
    margin: auto;
    padding-top: 10px;
  }

  .separator {
    display: inline-block;
    background-image: url("images/separator.png");
    width: 5px;
    height: 5px;
    vertical-align: middle;
    background-size: 5px 5px;
  }
  
  .mid-separator {
    display: none;
  }

  .mfoa-button-panel {
    float: left;
    width: 264px;
    height: 522px;
  }

  .mathcamp-button {
    width: 234px;
    height: 92px;
    margin: 15px;
    background-image: url("images/button_retina.png");
    background-size: 100% 100%;
  }

  .mfoa-photo {
    margin: 15px;
    width: 234px;
    height: 274px;
    background-image: url("images/bridge_retina.png");
    background-size: auto 100%;
    background-position: 33% 0;
}

  .bounded-image {
    width: 100%;
    height: 100%;
  }

  .other-button-box {
    margin: 15px;
    width: 234px;
    height: 96px;
  }

  .other-button {
    float: left;
    height: 42px;
    width: 234px;
    cursor: pointer;
  }

  .second-button {
    margin-top: 12px;
  }
  
  .other-button-text {
    height: 32px;
    font-family: ff-nuvo-web-pro, sans-serif;
    background-color: #e8e8ed;
    font-size: 14pt;
    font-weight: 800;
    color: #333333;
    text-align: center;
    padding-top: 8px;
  }

  .mfoa-info-panel {
    float: left;
    width: calc(100% - 264px);
    min-height: 492px;
    margin: 15px 0;
  }

  .first-header {
    margin-top: 0px;
  }

  .clear {
    clear: both;
  }

}

@media (min-width: 480px) and (max-width: 719px) {
  .mfoa-title {
    font-size: 26px;
  }
}

@media (min-width: 480px) {
  .small-only {
	display: none;
  }
}

@media (max-width: 479px) {
  .mfoa-logo {
	display: none;
  }
  
  .mfoa-title {
    display: inline-block;
    width: 100%;
	height: 36px;
	font-size: 16pt;
    text-align: center;
    vertical-align: middle;
    background-color: #0053a1;
    color: #ffffff;
    line-height: 36px;
  }
  
  .piping {
    background-color: #c2c7f2;
    width: 100%;
    height: 8px;
	clear: both;
  }
  
  .mfoa-body {
    display: block;
    background-color: #ffffff;
  }
  
  .mfoa-footer {
    background-color: #0053a1;
    font-size: 12pt;
    color: #ffffff;
    text-align: center;
  }

  .separator {
    display: inline-block;
    background-image: url("images/separator.png");
    width: 5px;
    height: 5px;
    vertical-align: middle;
    background-size: 5px 5px;
  }

  .mfoa-button-panel {
  }

  .mfoa-photo {
	width: 100%;
  }

  .bounded-image {
    width: 100%;
    height: 100%;
  }

  .other-button-box {
	text-align: center;
  }

  .other-button {
    display: inline-block;
    width: 96px;
    height: 48px;
    cursor: pointer;
    background-color: #e8e8ed;
	margin: 8px 0;
  }

  .second-button {
    margin-left: 8px;
  }
  
  .other-button-text {
	padding-top: 2px;
    height: 46px;
    width: 96px;
    font-family: ff-nuvo-web-pro, sans-serif;
    font-size: 12pt;
    font-weight: 800;
    color: #333333;
    text-align: center;
  }
  
  .darker-button {
	background-color: #c7c7cc;
  }
  
  .mathcamp-image {
	width: 72px;
  }
  
  .mfoa-info-panel {
    padding: 0px 0px 8px 8px;
  }
  
  
  .not-small {
	display: none;
  }
}

@media (min-width: 300px) {
  .mfoa-short-title {
	display: none;
  }
}

@media (max-width: 299px) {
  .mfoa-full-title {
	display: none;
  }
}