body {
  font-family: Lato;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

header {
  height: 100px;
  background: #00a8d5;
  width: 100%;
  box-shadow: 0px 6px 2.88px 0.12px rgba(0, 0, 0, 0.2);
  position: relative; }
  @media screen and (max-width: 1600px) {
    header > .spectralock-cap {
      margin: 0px 97px; } }
  @media screen and (max-width: 767px) {
    header > .spectralock-cap {
      margin: 0px 97px;
      margin-right: 15px; } }
  header .headerlogo {
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    padding: 10px;
    background: #000; }
    header .headerlogo > img {
      height: 100%; }
  header > div h1 {
    margin: 0;
    color: white;
    font-size: 30px;
    line-height: 1em;
    text-transform: uppercase;
    font-family: 'playfair display';
    letter-spacing: 0.025em;
    margin-left: 4%;
    padding-top: 19px; }
    @media screen and (max-width: 1600px) {
      header > div h1 {
        margin-left: 55px; } }
    @media screen and (max-width: 767px) {
      header > div h1.desktop_sspg {
        display: none; } }
    header > div h1.mobile_sspg {
      display: none; }
      @media screen and (max-width: 767px) {
        header > div h1.mobile_sspg {
          display: block; } }
    @media screen and (max-width: 991px) {
      header > div h1 {
        padding-top: 23px;
        font-size: 25px; } }
    @media screen and (max-width: 767px) {
      header > div h1 {
        font-size: 17px;
        padding-top: 27px;
        letter-spacing: 0.05em; } }

.spect_herobg {
  width: 100%;
  position: relative; }
  .spect_herobg > .main_bg {
    background: url("../img/Capa.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 500px; }
    @media screen and (max-width: 991px) {
      .spect_herobg > .main_bg {
        height: 400px; } }
    @media screen and (max-width: 767px) {
      .spect_herobg > .main_bg {
        height: 150px; } }
  .spect_herobg > div {
    position: relative; }
    .spect_herobg > div .product_bg {
      position: absolute;
      width: 25%;
      bottom: 0px;
      left: 8.333333%;
      min-width: 200px;
      transform: translateY(50%);
      -o-transform: translateY(50%);
      -moz-transform: translateY(50%);
      -webkit-transform: translateY(50%); }

.spectralock-cap {
  max-width: 1386px;
  display: block;
  margin: 0 auto; }

.third-part-bg {
  background: url("../img/spectralock_fb_wo.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }

.spectralock-content .first-part {
  margin-bottom: 100px; }
  @media screen and (max-width: 991px) {
    .spectralock-content .first-part {
      margin-top: 100px;
      margin-bottom: 75px; } }
  .spectralock-content .first-part h1 {
    color: #00a8d5;
    font-size: 34px;
    line-height: 38px;
    letter-spacing: 0.025em;
    margin: 50px 0px 20px; }
    .spectralock-content .first-part h1 > span {
      white-space: nowrap; }
    @media screen and (max-width: 351px) {
      .spectralock-content .first-part h1 {
        font-size: 30px;
        line-height: 34px; } }
  .spectralock-content .first-part h3 {
    color: #6d6d6d;
    font-size: 27px;
    line-height: 38px;
    letter-spacing: 0.025em;
    font-weight: 300; }
    @media screen and (max-width: 351px) {
      .spectralock-content .first-part h3 {
        font-size: 24px;
        line-height: 34px; } }
  .spectralock-content .first-part a {
    font-size: 20px;
    padding: 15px 75px;
    background: #00a8d5;
    color: white;
    float: right; }
    @media screen and (max-width: 991px) {
      .spectralock-content .first-part a {
        margin-top: 15px; } }
    @media screen and (max-width: 767px) {
      .spectralock-content .first-part a {
        float: left;
        width: 100%;
        text-align: center;
        padding: 15px 0px;
        margin-top: 15px; } }
    @media screen and (max-width: 351px) {
      .spectralock-content .first-part a {
        font-size: 16px; } }
    .spectralock-content .first-part a:hover {
      color: white;
      text-decoration: none; }
.spectralock-content .second-part {
  margin-bottom: 100px; }
  .spectralock-content .second-part p {
    color: #6d6d6d;
    font-size: 20px;
    line-height: 34px;
    letter-spacing: 0.025em;
    margin-bottom: 40px; }
    .spectralock-content .second-part p > span {
      color: #00a8d5; }
    @media screen and (max-width: 351px) {
      .spectralock-content .second-part p {
        font-size: 16px;
        line-height: 30px; } }
  .spectralock-content .second-part .sub-img {
    width: 96%;
    margin-left: 4%;
    margin-top: 10px;
    position: relative; }
    @media screen and (max-width: 1199px) {
      .spectralock-content .second-part .sub-img {
        margin-left: 10px;
        width: calc((100%) - 20px); } }
    @media screen and (max-width: 991px) {
      .spectralock-content .second-part .sub-img {
        margin-top: 50px; } }
    .spectralock-content .second-part .sub-img:before {
      content: '';
      position: absolute;
      top: calc(50% + 9px);
      left: -10px;
      width: 50%;
      height: 50%;
      border: 10px solid #b2e5f2;
      border-top: none;
      border-right: none; }
    .spectralock-content .second-part .sub-img:after {
      content: '';
      position: absolute;
      top: -9px;
      right: -10px;
      width: 50%;
      height: 50%;
      border: 10px solid #b2e5f2;
      border-bottom: none;
      border-left: none; }
    .spectralock-content .second-part .sub-img > img {
      width: 100%; }
.spectralock-content .third-part {
  letter-spacing: 0.025em;
  color: white;
  padding: 35px 0px; }
  .spectralock-content .third-part h2 {
    font-size: 34px;
    letter-spacing: 0.025em;
    line-height: 1em;
    margin-bottom: 45px;
    position: relative; }
    @media screen and (max-width: 351px) {
      .spectralock-content .third-part h2 {
        font-size: 30px; } }
    .spectralock-content .third-part h2:after {
      content: '';
      position: absolute;
      width: 10%;
      max-width: 80px;
      bottom: -15px;
      left: 3px;
      height: 1px;
      background: white; }
  .spectralock-content .third-part p {
    font-size: 20px;
    line-height: 22px;
    margin-bottom: 5px;
    letter-spacing: 0.025em;
    padding-left: 10px;
    position: relative; }
    .spectralock-content .third-part p:before {
      content: '-';
      position: absolute;
      left: 0;
      top: 0px; }
    @media screen and (max-width: 351px) {
      .spectralock-content .third-part p {
        font-size: 16px;
        line-height: 28px; } }
.spectralock-content .fourth-part {
  margin-top: 45px;
  margin-bottom: 40px; }
  .spectralock-content .fourth-part h1 {
    text-transform: uppercase;
    color: #6b6b6b;
    font-size: 26px;
    letter-spacing: 0em;
    text-align: center;
    font-weight: 300;
    margin: 0px; }
    @media screen and (max-width: 369px) {
      .spectralock-content .fourth-part h1 {
        font-size: 22px; } }
  .spectralock-content .fourth-part a {
    text-decoration: none;
    color: #6b6b6b; }
    .spectralock-content .fourth-part a:hover {
      text-decoration: none;
      color: #6b6b6b; }
    .spectralock-content .fourth-part a:active {
      text-decoration: none;
      color: #6b6b6b; }
  .spectralock-content .fourth-part p {
    text-transform: uppercase;
    letter-spacing: 0em;
    color: #6b6b6b;
    text-align: center;
    font-size: 12px; }
    @media screen and (max-width: 369px) {
      .spectralock-content .fourth-part p {
        font-size: 10px; } }

/*# sourceMappingURL=spectraLock.css.map */