html {
  background: #e4e4e4;
}

.edusystem-wrapper {
  display: flex;
  flex-direction:column;
  align-items:center;
  margin-top: 100px;
}

h1, h3 {
  text-align:center;
  font-family:sans-serif;
  color:#8954a2;
}

#edusystem {
    width: 358px;
    height:97px;
    background: url(img/dreyfous.png) no-repeat;
    background-size: 358px 97px;
    margin-bottom:55px;
}



.button {
  background-color: #875da7;
  font-family: monospace;
  border-radius: 4px;
  font-size: 20pt;
  font-weight: bold;
  cursor: pointer;
  color: #ffffff;
  margin-right: 20px;
  padding: 15px 10px 5px 10px;
}

.question.collapsed .button {
  background-color: #d3d3d3;
}

.premise {
  color: #875da7;
  font-size: 13pt;
  font-weight: bold;
}

.question.collapsed .premise {
  color: #505050;
}


#faq {
  display: flex;
  flex-direction: column;
  background-color:#ffffff;
  border: 1px solid #b79999;
  padding:25px 20px;
  border-radius: 5px;
}

.question {
  display: flex;
  margin-bottom: 35px;
}

.question .content {
  flex-grow: 1;
  border-bottom: 1px solid #e5e5e5;;
}

.question:last-child .content {
  border-bottom: none;
}

.question .answer ul {
  padding-left: 20px;
  color: #8e8383;
}

.question .answer li {
  margin-top: 10px;
}
.question .answer li:first-child {
  margin-top: 0;
}


.question.collapsed .answer {
  display:none;
}

#contact {
 color: #4e4545;
}

.contact-form {
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  background-color: #ffffff;
  border: 1px solid #b79999;
  padding:25px 20px;
  border-radius: 5px;
}

.contact-form .row {
  display: flex;
  margin-bottom: 15px;
}

.contact-form .row:last-child {
  margin-bottom: 0;
}

.contact-form .row .field {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex: 1 1 0;
  margin-left: 20px;
}

.contact-form .row .field:first-child {
  margin-left: 0;
}

.contact-form .row .input {
  flex-grow: 1;
  display: flex;
}

.contact-form .row .input input,
.contact-form .row .input select,
.contact-form .row .input textarea {
  width: 100%;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
}

.contact-form .row .field.required .input input,
.contact-form .row .field.required .input select,
.contact-form .row .field.required .input textarea {
  border: 2px solid #ca6060;
}


.contact-form .row .label {
  font-weight: bold;
  margin-bottom: 5px;
}

.contact-form .row .field.required .label {
  color: #ca6060;
}

.contact-form .submit {
  display: flex;
  justify-content: flex-end;
}

.contact-form .submit input {
  cursor: pointer;
  padding: 12px 20px;
  box-sizing: border-box;
  color: #1f1c1c;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-family: sans-serif;
  resize: none;
}
.contact-form .submit input:hover {
  transform: scale(1.03);
  color: #000;
  border: 2px solid #000;
}

#link > a {
  display: flex;
  width: 100px;
  height: 30px;
  font-size:13pt;
  background-color: #8955a2;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  text-decoration:none;
  color: #ffffff;
  border-radius: 5px;
}
#link > a:hover {
  background-color: #6e4e7d;
  text-decoration:underline;
}