section {
  width: 100%;
  max-width: 1024px; }
  @media only screen and (max-width: 1200px) {
    section {
      padding: 24px; } }
  @media only screen and (max-width: 749px) {
    section {
      padding: 8px; } }

body h4 {
  padding: 0 12px 40px; }
  @media only screen and (min-width: 750px) and (max-width: 1200px) {
    body h4 {
      font-size: 30px; } }

nav section {
  max-width: 1488px; }

nav .nav-right li a#faq {
  color: #DB3700; }

/* ----------- topbanner ---------- */
.topbanner {
  color: #fff;
  padding: 120px 0 50px;
  background-image: url("../images/red_bg2.jpg");
  background-position: 50% 100%; }
  .topbanner h2 {
    text-align: center; }
  @media only screen and (max-width: 1200px) {
    .topbanner {
      background-image: url("../images/red_bg.jpg");
      background-size: auto 130%; }
      .topbanner h2 {
        font-size: 56px; }
      .topbanner section {
        padding: 6px 24px; } }

/* ----------- headlines ---------- */
.headlines {
  padding: 60px 0; }
  .headlines h4 {
    padding: 40px 12px; }
  .headlines .container {
    column-count: 2;
    max-width: 760px;
    margin: 0 auto; }
  .headlines a {
    display: inline-block;
    width: 100%;
    font-family: 'Helvetica Neue LT Std 65 Medium', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 18px;
    text-decoration: underline;
    cursor: pointer;
    padding: 12px 0; }
    .headlines a:hover {
      color: #DB3700; }
  @media only screen and (max-width: 1200px) {
    .headlines {
      padding: 0 0 24px; }
      .headlines h4 {
        padding: 20px 12px 10px; }
      .headlines a {
        font-size: 16px; }
      .headlines .container {
        margin: 0 8%; } }
  @media only screen and (max-width: 749px) {
    .headlines {
      padding-top: 12px; }
      .headlines h4 {
        font-size: 30px; }
      .headlines .container {
        column-count: 1; } }

/* ----------- subsection ---------- */
.subsection {
  padding-bottom: 135px; }
  .subsection a {
    text-decoration: underline; }
  .subsection .faq_list {
    padding: 45px 0;
    margin: 0 12px;
    border-top: 1px solid #eee; }
    .subsection .faq_list .question {
      position: relative;
      font-size: 25px;
      padding-right: 60px;
      cursor: pointer; }
    .subsection .faq_list .answer {
      display: none;
      font-size: 18px;
      line-height: 1.6;
      padding: 20px 15% 30px 5%; }
    .subsection .faq_list .question:after {
      content: "";
      width: 20px;
      height: 20px;
      transition: 300ms;
      background-image: url("../images/ico-arrow.svg");
      background-repeat: no-repeat;
      background-position: 50% 50%;
      position: absolute;
      top: calc(50% - 10px);
      right: 10px;
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg); }
    .subsection .faq_list.opened .question:after {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg); }
    .subsection .faq_list li {
      margin-left: 20px;
      padding: 2px 0; }
    .subsection .faq_list p {
      padding: 4px 0; }
    .subsection .faq_list .red {
      color: #DB3700; }
  @media only screen and (max-width: 1200px) {
    .subsection {
      padding-bottom: 20px; }
      .subsection .faq_list {
        padding: 32px 0; }
        .subsection .faq_list .question {
          font-size: 18px; }
        .subsection .faq_list li {
          font-size: 14px;
          padding-bottom: 5px; }
        .subsection .faq_list .answer {
          padding: 20px 15% 0 0; } }
  @media only screen and (max-width: 749px) {
    .subsection {
      padding-bottom: 40px; }
      .subsection .faq_list .question {
        padding-right: 30px; }
      .subsection .faq_list .question:after {
        width: 12px;
        height: 12px;
        background-size: 100%; }
      .subsection .faq_list .answer {
        padding-right: 0; }
      .subsection h4 {
        font-size: 30px; } }