@media print, screen and (min-width: 769px) {
  article section.section01,
  article section.section02 div,
  article section.section03,
  article section.section04 div {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto; }
  article section:last-of-type {
    margin-bottom: 0; }
  article section.section01 {
    margin: 0 auto 60px; }
    article section.section01 h3 {
      font-size: 1.75em;
      line-height: 1.5em;
      font-weight: bold;
      margin-bottom: 30px;
      text-align: center; }
    article section.section01 figure {
      text-align: center; }
  article section.section02 {
    padding: 60px 0;
    background: #f2f7fa;
    margin: 0 auto 60px; }
  article section.section04 {
    padding: 60px 0;
    background: #f2f7fa;
    margin: 0 auto; }
  article section.section02 div > h4,
  article section.section03 > h4,
  article section.section04 div > h4 {
    width: 100%;
    margin-bottom: 45px; }
    article section.section02 div > h4 a,
    article section.section03 > h4 a,
    article section.section04 div > h4 a {
      background: #000;
      display: block; }
      article section.section02 div > h4 a img,
      article section.section03 > h4 a img,
      article section.section04 div > h4 a img {
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        width: 100%; }
    article section.section02 div > h4 a:hover img,
    article section.section03 > h4 a:hover img,
    article section.section04 div > h4 a:hover img {
      opacity: 0.75; }
  article section.section02 div > h5,
  article section.section03 > h5,
  article section.section04 div > h5 {
    width: 80%;
    max-width: 400px;
    position: relative;
    margin: 0 auto 30px; }
    article section.section02 div > h5 a,
    article section.section03 > h5 a,
    article section.section04 div > h5 a {
      display: block;
      width: 100%;
      height: 60px;
      line-height: 60px;
      border: 3px solid #000;
      font-family: 'Ropa Sans', sans-serif;
      font-size: 1.85em;
      text-align: center;
      font-weight: bold;
      text-decoration: none;
      color: #000;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out; }
    article section.section02 div > h5 a:hover,
    article section.section03 > h5 a:hover,
    article section.section04 div > h5 a:hover {
      color: #FFF;
      background: #000; }
  article section.section02 div > h6,
  article section.section03 > h6,
  article section.section04 div > h6 {
    font-size: 1.75em;
    line-height: 1em;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    width: 100%; }
  article section.section02 div > p,
  article section.section03 > p,
  article section.section04 div > p {
    font-size: 1.25em;
    text-align: center;
    line-height: 1.75em;
    margin-bottom: 45px;
    width: 100%; }
  article section.section02 div > section,
  article section.section03 > section,
  article section.section04 div > section {
    margin: 0 auto 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap; }
    article section.section02 div > section > div,
    article section.section03 > section > div,
    article section.section04 div > section > div {
      width: 32%;
      position: relative;
      margin-bottom: 60px;
      overflow: hidden; }
      article section.section02 div > section > div > div,
      article section.section03 > section > div > div,
      article section.section04 div > section > div > div {
        position: absolute;
        left: 0;
        top: 50%;
        -webkit-transform: translate(0, -50%);
        -moz-transform: translate(0, -50%);
        -o-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        z-index: 20;
        width: 100%; }
        article section.section02 div > section > div > div h4,
        article section.section03 > section > div > div h4,
        article section.section04 div > section > div > div h4 {
          text-align: center;
          z-index: 50;
          font-size: 2em;
          letter-spacing: 0.1em;
          font-weight: bold;
          color: #fff;
          margin-bottom: 15px; }
        article section.section02 div > section > div > div p,
        article section.section03 > section > div > div p,
        article section.section04 div > section > div > div p {
          text-align: center;
          z-index: 50;
          color: #fff;
          font-weight: bold;
          padding: 0 10px;
          margin: 0; }
      article section.section02 div > section > div img,
      article section.section03 > section > div img,
      article section.section04 div > section > div img {
        width: 100%;
        position: relative;
        z-index: 0;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
      article section.section02 div > section > div a,
      article section.section03 > section > div a,
      article section.section04 div > section > div a {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100; }
    article section.section02 div > section div:nth-last-of-type(1),
    article section.section02 div > section div:nth-last-of-type(2),
    article section.section02 div > section div:nth-last-of-type(3),
    article section.section03 > section div:nth-last-of-type(1),
    article section.section03 > section div:nth-last-of-type(2),
    article section.section03 > section div:nth-last-of-type(3),
    article section.section04 div > section div:nth-last-of-type(1),
    article section.section04 div > section div:nth-last-of-type(2),
    article section.section04 div > section div:nth-last-of-type(3) {
      margin-bottom: 0; }
    article section.section02 div > section > div:before,
    article section.section03 > section > div:before,
    article section.section04 div > section > div:before {
      content: "";
      display: block;
      opacity: 0.6;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 20;
      background: #000;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out; }
    article section.section02 div > section > div:after,
    article section.section03 > section > div:after,
    article section.section04 div > section > div:after {
      content: "";
      display: block;
      opacity: 0.75;
      width: 0;
      height: 40%;
      position: absolute;
      left: 0;
      top: 30%;
      z-index: 5;
      background: #000;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out; }
    article section.section02 div > section div:hover img,
    article section.section02 div > section div > a:focus + img,
    article section.section03 > section div:hover img,
    article section.section03 > section div > a:focus + img,
    article section.section04 div > section div:hover img,
    article section.section04 div > section div > a:focus + img {
      -webkit-transform: scale(1.1);
      -moz-transform: scale(1.1);
      -ms-transform: scale(1.1);
      -o-transform: scale(1.1);
      transform: scale(1.1); }
    article section.section02 div > section div:hover:before,
    article section.section02 div > section div.hover:before,
    article section.section03 > section div:hover:before,
    article section.section03 > section div.hover:before,
    article section.section04 div > section div:hover:before,
    article section.section04 div > section div.hover:before {
      opacity: 0; }
    article section.section02 div > section div:hover:after,
    article section.section02 div > section div.hover:after,
    article section.section03 > section div:hover:after,
    article section.section03 > section div.hover:after,
    article section.section04 div > section div:hover:after,
    article section.section04 div > section div.hover:after {
      width: 100%; }
  article section.section03 {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto 60px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap; }
    article section.section03 div {
      width: 47.5%;
      position: relative; }
      article section.section03 div a {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100; }
      article section.section03 div img {
        width: 100%;
        position: relative;
        z-index: 0;
        display: block;
        margin-bottom: 30px; }
      article section.section03 div h4 {
        text-align: center;
        font-size: 1.5em;
        margin-bottom: 10px;
        font-weight: bold;
        position: relative; }
      article section.section03 div p:nth-of-type(1) {
        font-size: 1.1em;
        text-align: center;
        margin-bottom: 10px; }
      article section.section03 div p:nth-of-type(2) {
        font-size: 1em;
        margin: 0 auto;
        text-align: center;
        width: 70%;
        height: 45px;
        line-height: 45px;
        border-radius: 22.5px;
        border: 2px solid #000;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; }
    article section.section03 div:hover p:nth-of-type(2) {
      background: #000;
      color: #fff; }
    article section.section03 div:nth-of-type(1) h4:before {
      content: "PRO AUDIO";
      color: #fff;
      background: #000;
      padding: 5px 10px;
      top: -50px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      position: absolute;
      z-index: 10;
      font-size: 0.7em;
      font-weight: normal;
      white-space: nowrap; }
    article section.section03 div:nth-of-type(2) h4:before {
      content: "FA SYSTEM";
      color: #fff;
      background: #000;
      padding: 5px 10px;
      top: -50px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      position: absolute;
      z-index: 10;
      font-size: 0.7em;
      font-weight: normal;
      white-space: nowrap; }
    article section.section03 div:nth-of-type(3) h4:before {
      content: "VEHICLE UNIT";
      color: #fff;
      background: #000;
      padding: 5px 10px;
      top: -50px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      position: absolute;
      z-index: 10;
      font-size: 0.7em;
      font-weight: normal;
      white-space: nowrap; }
  article section.section04 div > a {
    display: block;
    width: 80%;
    max-width: 400px;
    height: 45px;
    border-radius: 22.5px;
    margin: 0 auto;
    background: #7966C1;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-decoration: none;
    text-align: center;
    line-height: 45px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  article section.section04 div > a:hover {
    opacity: 0.7;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2)); } }
@media screen and (max-width: 768px) {
  article section {
    margin: 0 auto 30px; }
  article section:last-of-type {
    margin-bottom: 0; }
  article section.section01 {
    margin-bottom: 45px; }
    article section.section01 h3 {
      font-size: 1.75em;
      line-height: 1.5em;
      font-weight: bold;
      margin-bottom: 30px;
      text-align: center; }
    article section.section01 figure {
      text-align: center; }
  article section.section02 {
    padding: 0 0 30px 0;
    background: #f2f7fa;
    margin: 0 auto 30px; }
  article section.section04 {
    padding: 45px 0;
    background: #f2f7fa;
    margin: 0 auto; }
  article section.section02 div > h4,
  article section.section03 > h4,
  article section.section04 div > h4 {
    width: 100%;
    margin-bottom: 30px; }
    article section.section02 div > h4 a,
    article section.section03 > h4 a,
    article section.section04 div > h4 a {
      background: #000;
      display: block; }
      article section.section02 div > h4 a img,
      article section.section03 > h4 a img,
      article section.section04 div > h4 a img {
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        width: 100%; }
    article section.section02 div > h4 a:hover img,
    article section.section03 > h4 a:hover img,
    article section.section04 div > h4 a:hover img {
      opacity: 0.75; }
  article section.section02 div > h5,
  article section.section03 > h5,
  article section.section04 div > h5 {
    width: 80%;
    position: relative;
    margin: 0 auto 30px; }
    article section.section02 div > h5 a,
    article section.section03 > h5 a,
    article section.section04 div > h5 a {
      display: block;
      width: 100%;
      height: 60px;
      line-height: 60px;
      border: 3px solid #000;
      font-family: 'Ropa Sans', sans-serif;
      font-size: 1.5em;
      text-align: center;
      font-weight: bold;
      text-decoration: none;
      color: #000;
      -webkit-transition: all .3s ease-in-out;
      -moz-transition: all .3s ease-in-out;
      -ms-transition: all .3s ease-in-out;
      -o-transition: all .3s ease-in-out;
      transition: all .3s ease-in-out; }
    article section.section02 div > h5 a:hover,
    article section.section03 > h5 a:hover,
    article section.section04 div > h5 a:hover {
      color: #FFF;
      background: #000; }
  article section.section02 div > h6,
  article section.section03 > h6,
  article section.section04 div > h6 {
    font-size: 1.25em;
    line-height: 1.5em;
    font-weight: bold;
    margin-bottom: 15px;
    text-align: center;
    width: 100%; }
  article section.section02 div > p,
  article section.section03 > p,
  article section.section04 div > p {
    font-size: 1em;
    text-align: center;
    line-height: 1.75em;
    margin-bottom: 45px;
    width: 100%; }
  article section.section02 div > section,
  article section.section03 > section,
  article section.section04 div > section {
    width: 90%;
    margin: 0 auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap; }
    article section.section02 div > section > div,
    article section.section03 > section > div,
    article section.section04 div > section > div {
      width: 46.5%;
      position: relative;
      overflow: hidden;
      margin-bottom: 30px; }
      article section.section02 div > section > div > div,
      article section.section03 > section > div > div,
      article section.section04 div > section > div > div {
        width: 100%;
        margin-bottom: 30px; }
        article section.section02 div > section > div > div h4,
        article section.section03 > section > div > div h4,
        article section.section04 div > section > div > div h4 {
          font-size: 1.2em;
          letter-spacing: 0.1em;
          font-weight: bold;
          margin-bottom: 15px; }
        article section.section02 div > section > div > div p,
        article section.section03 > section > div > div p,
        article section.section04 div > section > div > div p {
          font-size: 0.9em;
          letter-spacing: 0;
          line-height: 1.5em;
          text-align: left;
          margin-bottom: 0; }
          article section.section02 div > section > div > div p br,
          article section.section03 > section > div > div p br,
          article section.section04 div > section > div > div p br {
            display: none; }
      article section.section02 div > section > div img,
      article section.section03 > section > div img,
      article section.section04 div > section > div img {
        width: 100%;
        position: relative;
        z-index: 0;
        margin-bottom: 15px; }
      article section.section02 div > section > div a,
      article section.section03 > section > div a,
      article section.section04 div > section > div a {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100; }
    article section.section02 div > section div:nth-last-of-type(1),
    article section.section02 div > section div:nth-last-of-type(2),
    article section.section03 > section div:nth-last-of-type(1),
    article section.section03 > section div:nth-last-of-type(2),
    article section.section04 div > section div:nth-last-of-type(1),
    article section.section04 div > section div:nth-last-of-type(2) {
      margin-bottom: 0; }
  article section.section03 {
    margin: 0 auto 45px; }
    article section.section03 div {
      width: 90%;
      position: relative;
      margin: 0 auto 30px; }
      article section.section03 div a {
        opacity: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 100; }
      article section.section03 div img {
        width: 100%;
        position: relative;
        z-index: 0;
        display: block;
        margin-bottom: 30px; }
      article section.section03 div h4 {
        text-align: center;
        font-size: 1.5em;
        margin-bottom: 10px;
        font-weight: bold;
        position: relative; }
      article section.section03 div p:nth-of-type(1) {
        font-size: 1.1em;
        text-align: center;
        margin-bottom: 10px; }
      article section.section03 div p:nth-of-type(2) {
        font-size: 1em;
        margin: 0 auto;
        text-align: center;
        width: 70%;
        height: 45px;
        line-height: 45px;
        border-radius: 22.5px;
        border: 2px solid #000;
        -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
        -ms-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out; }
    article section.section03 div:hover p:nth-of-type(2) {
      background: #000;
      color: #fff; }
    article section.section03 div:nth-of-type(1) h4:before {
      content: "PRO AUDIO";
      color: #fff;
      background: #000;
      padding: 5px 10px;
      top: -50px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      position: absolute;
      z-index: 10;
      font-size: 0.7em;
      font-weight: normal;
      white-space: nowrap; }
    article section.section03 div:nth-of-type(2) h4:before {
      content: "FA SYSTEM";
      color: #fff;
      background: #000;
      padding: 5px 10px;
      top: -50px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      position: absolute;
      z-index: 10;
      font-size: 0.7em;
      font-weight: normal;
      white-space: nowrap; }
    article section.section03 div:nth-of-type(3) h4:before {
      content: "VEHICLE UNIT";
      color: #fff;
      background: #000;
      padding: 5px 10px;
      top: -50px;
      left: 50%;
      -webkit-transform: translate(-50%, 0);
      -moz-transform: translate(-50%, 0);
      -o-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
      transform: translate(-50%, 0);
      position: absolute;
      z-index: 10;
      font-size: 0.7em;
      font-weight: normal;
      white-space: nowrap; }
  article section.section04 div > a {
    display: block;
    width: 80%;
    height: 45px;
    border-radius: 22.5px;
    margin: 0 auto;
    background: #7966C1;
    font-size: 1.1em;
    font-weight: bold;
    color: #fff;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    text-decoration: none;
    text-align: center;
    line-height: 45px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); }
  article section.section04 div > a:hover {
    opacity: 0.7;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.2)); } }

section.section02 section div.placeholder {
  visibility: hidden;
}