/* font families */
/*font-family: 'Raleway', sans-serif;
/*font-family: 'Open Sans', sans-serif;*/

body {
  font: 18px 'Raleway', sans-serif;
  padding: 0px;
  background-color: #E7E8E6;
}

h3 {
  margin:0;
  padding:0;
  padding-left: 108px;
}

h4 {
  margin:0;
  padding:0px 0 12px 108px;
  /*padding-left: 100px;*/
  font-size: 12px;
  font-style: italic;
  color: #1e1e1e;
}

.container {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
}

.container * {
  box-sizing: border-box;
}

::placeholder {
  font-style: italic;
  opacity: 0.6;
}


.flex-outer {
  list-style-type: none;
  padding: 0;
}

.flex-outer {
  max-width: 800px;
  margin: 0 auto;
}

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: left;
}


.flex-outer > li:not(:last-child) {
  margin-bottom: 20px;
}

.flex-outer li label,
.flex-outer li p {
  padding: 8px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li > label + *{
  flex: 1 0 220px;
}

.flex-outer li p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  padding: 15px;
  border: none;
}

.flex-outer li button {
  margin-left: auto;
  padding: 16px 16px;
  border: none;
  background: #333;
  color: #f2f2f2;
  text-transform: uppercase;
  letter-spacing: .09em;
  border-radius: 2px;
}

.flex-outer li button:hover {
  background-color: #41B3A3;
}

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}