#message {
  margin-top: -80px;
  padding-top: 80px;
  position: absolute;
  margin-top: -70px; }

.font-small {
  font-size: 70%; }
  @media only screen and (max-width: 768px) {
    .font-small {
      font-size: 100%; } }

.bg-gray {
  background: #f9f9f9;
  padding: 3rem 1rem; }

.bg-white {
  background: #fff;
  padding: 3rem 1rem; }

.card {
  counter-reset: num;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; }
  .card h2 {
    width: 100%;
    margin-bottom: 30px; }
  .card section {
    box-sizing: border-box;
    position: relative;
    counter-increment: num;
    padding: 2rem 0.6rem;
    margin: 0;
    width: 32%;
    background: #F9F9F9;
    /*border:0.5px solid #005bac;
    border-radius: 6px;*/
    margin-bottom: 50px; }
  .card section::before {
    position: absolute;
    left: 50%;
    top: -15px;
    content: counter(num);
    font-size: 3rem;
    margin-left: -1.2rem;
    text-align: center;
    line-height: 30px;
    color: #F4246B;
    width: 30px; }
  .card section h3 {
    text-align: center;
    font-weight: bold;
    margin-bottom: 25px;
    color: #005bac;
    font-size: 1.5rem; }
  @media only screen and (max-width: 768px) {
    .card {
      display: inline-block; }
      .card section {
        width: 100%;
        padding: 2rem 3rem; }
        .card section h3 {
          font-size: 1.3rem; } }

.image-teach {
  width: 100%; }

.p-message {
  font-size: 1.1em;
  line-height: 160%;
  /*color:#0C0D3E ;	*/
  margin-bottom: 65pt; }
  .p-message p {
    margin-bottom: 10px; }
  .p-message .name {
    text-align: right;
    font-size: 1.2em; }

.profile {
  line-height: 140%;
  color: #444F70; }
  .profile h3 {
    font-size: 1.2em; }
  .profile p {
    margin-bottom: 10px; }

.wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 6px;
  /*color:#005bac;
  background:#f8e45e;*/
  font-family: 'Yu Gothic medium';
  font-weight: bold;
  background: #F9F9F9;
  border: 2px solid #0C5BA8;
  color: #0C5BA8;
  -webkit-transition: 0.1s;
  -moz-transition: 0.1s;
  -o-transition: 0.1s;
  -ms-transition: 0.1s;
  transition: 0.1s; }
  .wrap img {
    display: block;
    width: 18%;
    height: auto; }
  .wrap span {
    width: 80%; }
  @media only screen and (max-width: 768px) {
    .wrap {
      font-size: 0.9rem; } }

.wrap:hover {
  /*background:#F3E991;
  color:#005bac;*/
  color: #fff;
  background: #0C5BA8;
  font-weight: normal; }
