@media screen and (max-width: 768px) {
  article section#speakers_detail {
    width: 90%;
    margin: 0 auto 60px auto;
    clear: both; }
    article section#speakers_detail figure {
      width: 80%;
      margin: 0 auto 30px auto;
      position: relative;
      left: -20px;
      -webkit-transition: all .5s ease-in-out;
      -moz-transition: all .5s ease-in-out;
      -ms-transition: all .5s ease-in-out;
      -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      opacity: 0; }
      article section#speakers_detail figure img {
        width: 100%; }
    article section#speakers_detail figure:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      z-index: 100;
      background: #000000;
      position: absolute;
      right: 0;
      -webkit-transition: all .5s ease-in-out;
      -moz-transition: all .5s ease-in-out;
      -ms-transition: all .5s ease-in-out;
      -o-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out; }
    article section#speakers_detail figure.animate {
      left: 0;
      opacity: 1; }
    article section#speakers_detail figure.animate:before {
      width: 0%; }
    article section#speakers_detail div {
      width: 100%; }
      article section#speakers_detail div h3 {
        font-size: 3em;
        line-height: 1em;
        margin-bottom: 10px;
        position: relative;
        left: -20px;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        opacity: 0;
        color: #000000;
        text-align: center;
        font-family: 'Sanomat Sans Web Bold';
        letter-spacing: 0.1em; }
      article section#speakers_detail div h4 {
        margin-bottom: 30px;
        line-height: 1.5em;
        font-size: 1.5em;
        position: relative;
        left: -20px;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
        opacity: 0;
        text-align: center; }
      article section#speakers_detail div h3:before,
      article section#speakers_detail div h4:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: #000000;
        position: absolute;
        right: 0;
        -webkit-transition: all .5s ease-in-out;
        -moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out; }
      article section#speakers_detail div h3.animate,
      article section#speakers_detail div h4.animate {
        left: 0;
        opacity: 1; }
      article section#speakers_detail div h3.animate:before,
      article section#speakers_detail div h4.animate:before {
        width: 0%; }
      article section#speakers_detail div p {
        font-size: 1em;
        margin-bottom: 10px;
        line-height: 1.5em; }
      article section#speakers_detail div ul {
        padding: 15px 0; }
        article section#speakers_detail div ul li {
          clear: both;
          margin-bottom: 10px;
          line-height: 1.3em;
          padding-left: 20px;
          position: relative; }
        article section#speakers_detail div ul li:before {
          content: "";
          display: block;
          border: 1px solid #999;
          width: 8px;
          height: 8px;
          position: absolute;
          left: 0;
          top: 4px;
          border-radius: 50%;
          background: #eee; }
      article section#speakers_detail div dt {
        font-size: 1.2em;
        margin-bottom: 5px;
        position: relative;
        color: #aaaaaa; }
      article section#speakers_detail div dt:after {
        content: "";
        display: inline-block;
        width: 20px;
        height: 1px;
        position: relative;
        margin-left: 10px;
        background: #aaaaaa; }
      article section#speakers_detail div dd {
        font-size: 1em;
        margin-bottom: 30px;
        line-height: 1.5em; }
        article section#speakers_detail div dd h5 {
          font-size: 1.2em; }
        article section#speakers_detail div dd table {
          position: relative;
          top: 10px;
          margin-bottom: 30px; }
        article section#speakers_detail div dd th, article section#speakers_detail div dd td {
          font-size: 0.9em;
          line-height: 1.5em;
          padding: 15px; }
        article section#speakers_detail div dd tr:nth-child(odd) {
          background: #f3f3f3; }
        article section#speakers_detail div dd th {
          width: 100px;
          vertical-align: top; } }