@font-face {
  font-family: 'Gotham-Bold';
  src: url("../fonts/GothamBold.ttf") format("truetype");
  src: url("../fonts/Gotham-Bold.eot");
  src: url("../fonts/Gotham-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Gotham-Bold.woff2") format("woff2"), url("../fonts/Gotham-Bold.woff") format("woff"), url("../fonts/Gotham-Bold.svg#Gotham-Bold") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-Book';
  src: url("../fonts/Gotham-Book.ttf") url("../fonts/Gotham-Book.ttf") format("truetype");
  src: url("../fonts/Gotham-Book.eot");
  src: url("../fonts/Gotham-Book.eot?#iefix") format("embedded-opentype"), url("../fonts/Gotham-Book.woff2") format("woff2"), url("../fonts/Gotham-Book.woff") format("woff"), url("../fonts/Gotham-Book.svg#Gotham-Book") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-Black';
  src: url("../fonts/Gotham-Black.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-Light';
  src: url("../fonts/Gotham-Light.otf");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Gotham-Medium';
  src: url("../fonts/Gotham-Medium.otf");
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Gotham-Book';
}

b, strong, h1, h2 {
  font-family: 'Gotham-Bold';
}

ul {
  -webkit-padding-start: 0;
          padding-inline-start: 0;
  list-style-type: disc;
  list-style-position: outside;
}

section {
  background-color: #f2f2f2;
}

section h1 {
  font-size: 3rem;
  line-height: 3rem;
}

section p {
  font-size: 1.3rem;
  line-height: 1.3em;
}

section p.small {
  font-size: 0.8rem;
  line-height: 1rem;
}

section.section-header {
  color: #ffffff;
  background-image: url("../img/sc1-bg3.png"), url("../img/sc1-bg1.jpg"), url("../img/sc1-bg2.jpg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right bottom, left top, right top;
  background-size: 80% , contain, cover;
}

section.section-header .logo-lenovo img {
  position: absolute;
  width: 3rem;
  right: 0;
}

section.section-header .animate-garantia {
  width: 4rem;
}

section.two {
  min-height: auto;
  background: #e11309;
  background: -webkit-gradient(linear, left top, right top, from(#e11309), color-stop(25%, #e11309), color-stop(25%, #f2f2f2), to(#f2f2f2));
  background: linear-gradient(90deg, #e11309 0%, #e11309 25%, #f2f2f2 25%, #f2f2f2 100%);
}

section.two .img-container img {
  width: 100%;
  height: auto;
}

section.three {
  background-color: transparent;
  height: auto;
}

section.three p {
  max-width: 800px;
}

section.three .txt {
  position: absolute;
  z-index: 50;
}

section.three .img-container {
  width: 100%;
  height: 100%;
}

section.three .img-container img {
  width: 100%;
  left: 0;
}

section.three .img-container p {
  bottom: 0;
  left: 50%;
  padding: 0;
  margin-left: -6rem;
}

section.three .footer {
  position: relative;
  bottom: 0;
  width: auto;
  height: auto;
  border: 1px solid red;
}

section.four {
  color: #ffffff;
  min-height: 740px;
  background: #e11309;
  background: -webkit-gradient(linear, left top, right top, from(#e11309), color-stop(60%, #e11309), color-stop(60%, #f2f2f2), to(#f2f2f2));
  background: linear-gradient(90deg, #e11309 0%, #e11309 60%, #f2f2f2 60%, #f2f2f2 100%);
}

section.four .img-container img {
  width: 100%;
  height: auto;
}

section.five {
  color: #000000;
  min-height: auto;
  background: #e1ffff;
  background: -webkit-linear-gradient(0deg, #e11309 0%, #e11309 20%, white 20%, white 100%);
  background-image: url("../img/sc5-bg1.png"), url("../img/sc5-folhas2.png"), -webkit-gradient(linear, left bottom, left top, from(#e11309), color-stop(20%, #e11309), color-stop(20%, white), to(white));
  background-image: url("../img/sc5-bg1.png"), url("../img/sc5-folhas2.png"), linear-gradient(0deg, #e11309 0%, #e11309 20%, white 20%, white 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain, auto 80%;
}

section.five .logos img {
  width: 100%;
  height: auto;
}

section.garantia {
  background: #f2f2f2;
}

section.garantia h1 {
  font-size: 2.5rem;
  line-height: 2.5rem;
}

/*  HELPERS BOOTSTRAP

    *ALINHAMENTO VERTICAL DE COLUNAS DENTRO DE ROW 

    .align-items-start  - aplicar na row
    .align-items-center - aplicar na row
    .align-items-end    - aplicar na row

    .align-self-start   - aplicar na col
    .align-self-center  - aplicar na col
    .align-self-end     - aplicar na col

    **********************************************

    *ALINHAMENTO VERTICAL DE COLUNAS DENTRO DE ROW 

    .justify-content-start  - aplicar na row
    .justify-content-center - aplicar na row
    .justify-content-end    - aplicar na row
    .justify-content-around - aplicar na row
    .justify-content-btween - aplicar na row

*/
@media screen and (max-width: 767px) {
  section {
    min-height: auto;
  }
  section h1 {
    font-size: 1.3rem;
    line-height: 1.5rem;
  }
  section p, section ul {
    font-size: 0.8rem;
    line-height: 1.2em;
  }
  section.section-header {
    padding: 0px;
  }
  section.section-header .logo-lenovo img {
    position: absolute;
    width: 2rem;
    right: 0;
  }
  section.two {
    min-height: auto;
    background: #e11309;
    background: -webkit-gradient(linear, left bottom, left top, from(#e11309), color-stop(25%, #e11309), color-stop(25%, #f2f2f2), to(#f2f2f2));
    background: linear-gradient(0deg, #e11309 0%, #e11309 25%, #f2f2f2 25%, #f2f2f2 100%);
  }
  section.two .img-container img {
    width: 75%;
    height: auto;
  }
  section.three {
    background-position: center top;
    background-size: cover;
  }
  section.three .txt {
    position: relative;
  }
  section.three .footer {
    position: relative;
    bottom: 1rem;
    width: auto;
    height: auto;
    border: 1px solid red;
  }
  section.four {
    color: #ffffff;
    min-height: 540px;
    background: #e11309;
    background: -webkit-gradient(linear, left top, left bottom, from(#e11309), color-stop(60%, #e11309), color-stop(60%, #f2f2f2), to(#f2f2f2));
    background: linear-gradient(180deg, #e11309 0%, #e11309 60%, #f2f2f2 60%, #f2f2f2 100%);
  }
  section.four .img-container img {
    width: 75%;
    height: auto;
  }
  section.five {
    background-size: contain, auto 70%;
  }
  section.garantia {
    background: #f2f2f2;
  }
  section.garantia h1 {
    font-size: 1.5rem;
    line-height: 1.8rem;
  }
}
