/*
  With Intent — inner page / article styles
  Ported from the Xavier theme (css/inside_posts.css), plus the column rules
  that used to come from the Advanced WP Columns plugin.
*/

.intro-post {
  font-size: 3.2vw !important;
  margin-bottom: 7.2vw !important;
}

.inside_description {
  flex-direction: row-reverse;
}

.description-post {
  margin: 100px 9vw;
  font-size: 3.4vw;
  font-style: oblique;
  width: 65%;
}

.content {
  flex-direction: column;
  height: 100%;
}

.content > div {
  display: flex;
  text-align: left;
  justify-content: center;
}

.content p {
  line-height: 2vw;
}

.content div div {
  font-size: 1.4vw;
}

.content h2 {
  font-weight: bold;
  font-size: 3.1vw;
  margin-bottom: 1.3vw;
}

.content strong {
  font-weight: bold;
}

.content a {
  color: inherit;
}

.logo_middle {
  margin-top: 8vw;
  margin-bottom: 3vw;
}

.logo_middle img {
  height: 10vw;
}

.logo_bottom_posts {
  text-align: right;
  position: relative;
  right: 30px;
  bottom: -30px;
}

.logo_bottom_posts img {
  height: 8vw;
}

/*---------------- COLUMNS ----------------*/
/* Was Advanced WP Columns. Column widths stay as inline styles on the markup. */

.csRow {
  display: flex;
  flex-direction: row;
  text-align: left;
  justify-content: center;
}

.csRow::after {
  content: '';
  display: block;
  clear: both;
}

img.aligncenter {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/*---------------- CONTACT PAGE ----------------*/

.sector-field {
  padding: 5px;
  border: 1px solid;
  border-radius: 3px;
  font-size: 1.1em;
  width: 97.8%;
  margin: .5em 0;
  font-family: inherit;
  box-sizing: border-box;
}

.contact-form {
  width: 50%;
  margin: 0 auto;
}

/* The two name fields sit side by side; everything else is full width. */
.field--half {
  width: 45%;
  float: left;
}

.field--right {
  float: right;
}

.first-name,
.last-name {
  width: 100%;
}

/* Labels exist for screen readers and autofill; the design uses placeholders. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Spam trap — off-screen rather than display:none, which some bots skip. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.field-error {
  margin: 0 0 .5em;
  font-size: .95em;
  line-height: 1.3;
  color: #b3261e;
}

.sector-field[aria-invalid="true"] {
  border-color: #b3261e;
  border-width: 2px;
}

.form-status {
  clear: both;
  margin: 1.5em auto 0;
  padding: 1em 1.2em;
  max-width: 34em;
  border-radius: 3px;
  line-height: 1.4;
  text-align: center;
}

.form-status--ok {
  background-color: #ffffff;
  border: 1px solid rgb(88, 89, 91);
}

.form-status--error {
  background-color: #ffffff;
  border: 1px solid #b3261e;
  color: #b3261e;
}

.submit-wrapper input.submit[disabled] {
  opacity: .6;
  cursor: default;
}

.message {
  height: 8em;
}

.submit-wrapper {
  text-align: center;
  clear: both;
}

.submit-wrapper input.submit {
  font-weight: bold;
  padding: 10px 20px;
  border: 1px rgb(88, 89, 91);
  height: auto;
  cursor: pointer;
}

#main #main-inner {
  padding: 30px 30px 0 30px;
  height: 100%;
  flex-direction: column;
}

#main-inner * {
  font-family: 'apercuregular', verdana, sans-serif;
}

/* Direct children only — the address block and the form wrapper. Scoping this
   matters: the form's own field wrappers are divs too. */
#main-inner > div {
  width: 50%;
  margin: 0 auto;
}

#main-inner h2 {
  text-transform: uppercase;
}

#main {
  background-color: #f7e5d1;
}