:root{
	--text: #374151;
  --pink: #E3469D;
  --gray: #ccc;
  --light-gray: #eee;
  --lightest-gray: #f5f5f5;
}

html{
  font-size: 18px;
}

body{
  font-family: "lexia", serif;
  font-size: 1rem;
  color: var(--text);
  line-height: 1.5rem;
}

img{
  max-width: 100%;
}

a{
  color: var(--text);
  text-decoration: none;
}

a:hover, a:focus, a:active{
  color: var(--pink);
}

#lp-content section, #lp-content footer{
  padding: 3rem 0;
}

.page-nav{
  padding: 30px 0;
  background: #fff;
  z-index: 999;
}

.page-nav ul{
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}

.page-nav a{
  padding: 20px;
}

h1{
  color: var(--pink);
  font-weight: 800;
  font-size: 2rem;
}

h2{
  font-weight: bold;
  font-size: 1.75rem;
}

#hero{
  background: url(../img/02.jpg) no-repeat top right / contain;
}

.btn-primary{
  border-radius: 500px;
  background: var(--pink);
  border-color: var(--pink);
  font-weight: bold;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active{
  background: var(--text)
}

.bullet-p, .alert-p{
  border-bottom: 1px solid var(--light-gray);
  padding: 0 0 1rem 1.5rem;
  margin-bottom: 1rem;
  position: relative;
}

.alert-p{
  font-weight: bold;
}

.bullet-p:last-of-type, .alert-p:last-of-type{
  border: none;
  margin: 0;
  padding-bottom: 0;
}

.bullet-p::before, .alert-p::before{
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  background: url(../img/03.png) no-repeat center left;
}

.alert-p::before{
  top: .25rem;
  background: url(../img/03.png) no-repeat center left;
}

#voce-sabia{
  background: var(--lightest-gray)
}

#voce-sabia h2{
  color: var(--pink);
}

.card{
  border: none;
  position: relative;
  visibility: visible;
  justify-content: center;
  display: flex;
}

#voce-sabia .card::before{
  content: "";
  position: absolute;
  top: -47px;
  left: 50%;
  transform: translateX(-50%);
  width: 95px;
  height: 95px;
  background: url(../img/04.png) no-repeat center center / contain;
}

.card h3{
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pink);
}

.card p{
  margin-bottom: 0;
}

#potassio{
  background: var(--lightest-gray)
}

#potassio h2{
  color: var(--pink);
}

#potassio .col-lg-4:first-of-type .card::before{
  content: "";
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  width: 30px;
  height: 1px;
  background: var(--text);
}

#sintomas{
  background: var(--lightest-gray)
}

#sintomas h2{
  color: var(--pink);
}

#sintomas .bullet-p{
  border-bottom: 1px solid var(--gray);
}

#sintomas .bullet-p::before{
  top: .25rem;
}

#sintomas .bullet-p:last-of-type{
  border: none;
}

#lp-content #tratamento {
  padding-bottom: 7rem;
}

#tratamento .card{
  border: 1px solid var(--pink);
}

#ebook {
  background: var(--pink);
}

#ebook h2, #ebook p{
  color: #fff
}

#ebook img{
  margin-top: -125px;
}

.btn-inverse{
  border: var(--pink);
  color: var(--pink);
  background: #fff;
}

footer{
  background: var(--text);
  color: #fff;
  font-size: .8rem;
  margin-bottom: -30px;
}

footer a{
  color: #fff;
  text-decoration: underline;
}

footer a:hover, footer a:focus, footer a:active{
  color: #fff;
}

@media only screen and (max-width: 1900px) {

  header img{
    max-width: 125px;
  }
  
}  

@media only screen and (max-width: 900px) {

  header img{
    max-width: 125px;
  }

  #lp-content section, #lp-content footer{
    padding: 2rem 0;
  }

  #lp-content #hero{
    background: url(../img/02.jpg) no-repeat top right / 200%;
    padding-top: 400px
  }

  h1 {
    font-size: 1.5rem;
  }

  #voce-sabia .row{
    display: block;
  }

  .card{
    margin-bottom: 2rem;
  }

  #voce-sabia .card{
    margin-bottom: 2.5rem;
  }

  #potassio .col-lg-4:first-of-type .card::before {
    top: auto;
    left: 50%;
    right: auto;
    bottom: -30px;
    transform: translateX(-50%);
    width: 1px;
    height: 30px;
  }

  #lp-content #tratamento {
    padding-bottom: 2rem;
  }

  #ebook img {
    margin-top: 0px;
  }

}