img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom; }

body {
  margin: 0;
  padding: 0;
  position: relative; }

.content {
  margin: 0;
  padding: 0;
  display: flex;
  max-width: inherit;
  width: 100%; }
  @media only screen and (max-width: 768px) {
    .content {
      flex-direction: column; } }
  .content .sub {
    background: #e70014;
    display: flex;
    align-items: center;
    flex-direction: column; }
    @media only screen and (max-width: 768px) {
      .content .sub {
        width: 100%; } }
    @media only screen and (min-width: 769px) {
      .content .sub {
        width: 33%; } }
    .content .sub img {
      width: 100%;
      height: auto; }
    .content .sub .twitter {
      background: #fff; }
      @media only screen and (max-width: 768px) {
        .content .sub .twitter {
          position: absolute;
          bottom: 76px; } }
      @media only screen and (min-width: 769px) {
        .content .sub .twitter {
          width: 100%; } }
      @media only screen and (max-width: 768px) {
        .content .sub .twitter iframe {
          width: 740px !important; } }
  @media only screen and (max-width: 768px) {
    .content .main {
      width: 100%;
      margin: 0 0 465px; } }
  @media only screen and (min-width: 769px) {
    .content .main {
      width: 67%; } }
  .content .main h2 {
    background: #e70014;
    color: #fff;
    padding: 8px 15px;
    text-align: center; }
    @media only screen and (max-width: 768px) {
      .content .main h2 {
        margin: 25px 10px 25px; } }
    @media only screen and (min-width: 769px) {
      .content .main h2 {
        font-size: 1.2rem;
        margin: 25px 25px 25px; } }
  .content .main .topics_list {
    list-style: none;
    padding: 0;
    width: 100%;
    display: -ms-flexbox;
    display: -moz-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap; }
    @media only screen and (max-width: 768px) {
      .content .main .topics_list {
        margin: 0; } }
    @media only screen and (min-width: 769px) {
      .content .main .topics_list {
        margin: 0 0 7px; } }
    .content .main .topics_list .topic {
      background: #fff;
      box-sizing: border-box;
      border-radius: 10px; }
      @media only screen and (max-width: 768px) {
        .content .main .topics_list .topic {
          width: 46%;
          margin: 0 6px 20px; } }
      @media only screen and (min-width: 769px) {
        .content .main .topics_list .topic {
          width: 30.2%;
          display: -ms-flexbox;
          display: -moz-box;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          flex-direction: column;
          margin: 0 10px 25px; } }
      .content .main .topics_list .topic:first-child {
        margin-top: 0; }
      .content .main .topics_list .topic figure {
        width: 100%;
        position: relative;
        overflow: hidden;
        background: #f1f1f1;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0; }
        @media only screen and (max-width: 768px) {
          .content .main .topics_list .topic figure {
            height: 120px; } }
        @media only screen and (min-width: 769px) {
          .content .main .topics_list .topic figure {
            height: 150px; } }
        @media only screen and (min-width: 769px) {
          .content .main .topics_list .topic figure:hover img {
            opacity: 0.8; } }
        .content .main .topics_list .topic figure a {
          display: block; }
          .content .main .topics_list .topic figure a img {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto; }
      .content .main .topics_list .topic .caption {
        box-sizing: border-box; }
        @media only screen and (max-width: 768px) {
          .content .main .topics_list .topic .caption {
            width: 100%;
            margin: 10px 0 0; } }
        @media only screen and (min-width: 769px) {
          .content .main .topics_list .topic .caption {
            width: 100%;
            margin: 13px 0 0; } }
        .content .main .topics_list .topic .caption h3 {
          background: #fff;
          font-weight: bold;
          width: 100%;
          margin: 0;
          padding: 0;
          text-overflow: ellipsis;
          overflow: hidden; }
          @media only screen and (max-width: 768px) {
            .content .main .topics_list .topic .caption h3 {
              font-size: 14px;
              height: 78px;
              line-height: 20px; } }
          @media only screen and (min-width: 769px) {
            .content .main .topics_list .topic .caption h3 {
              padding: 0;
              font-size: 16px;
              height: 68px;
              overflow: hidden;
              line-height: 23px; } }
          @media only screen and (max-width: 768px) {
            .content .main .topics_list .topic .caption h3 a {
              text-decoration: none;
              text-overflow: ellipsis;
              white-space: normal; } }
          @media only screen and (min-width: 769px) {
            .content .main .topics_list .topic .caption h3 a {
              text-decoration: none; } }
          .content .main .topics_list .topic .caption h3 a:hover {
            text-decoration: underline;
            color: 000; }
        .content .main .topics_list .topic .caption .date {
          text-align: right;
          color: #555; }
          @media only screen and (max-width: 768px) {
            .content .main .topics_list .topic .caption .date {
              margin: 10px 0 0;
              font-size: 14px; } }
          @media only screen and (min-width: 769px) {
            .content .main .topics_list .topic .caption .date {
              margin: 8px 0 0;
              font-size: 15px; } }
  .content .main .more {
    text-align: center; }
    @media only screen and (max-width: 768px) {
      .content .main .more {
        margin: 30px 0 0; } }
    @media only screen and (min-width: 769px) {
      .content .main .more {
        margin: 30px 0 0; } }
    .content .main .more a {
      background: #fed201;
      color: #e70014;
      font-weight: bold; }
      @media only screen and (max-width: 768px) {
        .content .main .more a {
          padding: 15px 100px; } }
      @media only screen and (min-width: 769px) {
        .content .main .more a {
          padding: 18px 150px; } }
      .content .main .more a:hover {
        background: #e70014;
        color: #fed201;
        text-decoration: none; }

.global_head {
  margin: 0; }

footer {
  background: #e70014; }
  @media only screen and (min-width: 769px) {
    footer {
      padding: 20px 0 0; } }