body {
   background: white;
}

a.contato {
   transition: 0.4s all;
}

a.contato:hover {
   background: var(--theme-color-light);
}

#banner {
   padding-bottom: 30px;
}

#banner:before {
   content: '';
   display: block;
   position: absolute;
   bottom: 0;
   width: 0;
   background: transparent;
   /* height: 42px; */
   border-right: 38px solid transparent;
   border-left: 38px solid transparent;
   border-bottom: 42px solid white;
   margin: auto;
   left: 0;
   right: 0;
}

#banner #scroll {
   content: '';
   display: block;
   position: absolute;
   background: url(//transicaoerecolocacao.ponteprofissional.com.br/wp-content/themes/transicao/assets/css/../images/svg/scroll.svg);
   height: 20px;
   width: 22px;
   bottom: 0;
   left: 0;
   right: 0;
   padding: 16px 38px;
   background-position: center;
   margin: auto;
   cursor: pointer;
   background-repeat: no-repeat;
}

#banner h2 {
   color: white;
   font-family: 'Roboto Slab', sans-serif;
   font-size: 25px;
   margin-top: 0;
   font-weight: 600;
   margin-bottom: 10px;
}

#banner .w12 .logo {
   padding-top: 15px;
   text-align: center;
   max-width: 455px;
}

#banner h2 strong {
   font-weight: 900;
   color: var(--theme-color);
}

#banner h3 {
   color: white;
   font-size: 20px;
   font-weight: 400;
   line-height: 1.3;
}

#banner p {
   color: white;
   font-size: 25px;
   font-weight: 400;
   max-width: 470px;
   line-height: 1.5;
   margin-top: 30px;
   font-family: 'Roboto Slab', sans-serif
}

#banner p b {
   font-weight: 700;
}

#banner .w6 {
   margin-top: 30px;
   z-index: 9;
   display: inline-block;
   position: relative;
}

#banner .w6.form .inner_form {
   max-width: 370px;
   background: white;
   box-shadow: 0 3px 3px rgba(0, 0, 0, 0.09);
   border-radius: 11px;
   padding: 20px;
   margin-left: auto;
   position: relative;
   bottom: -90px;
}

#banner .w6.form {
   margin-top: -90px;
}

#banner .inner_form h2 {
   color: var(--theme-color-light);
   text-transform: uppercase;
   padding: 10px 0px 0 0;
   line-height: 1;
   text-align: center;
}

.input.w12 {
   margin-top: 10px;
   position: relative;
}

input.wpcf7-form-control.wpcf7-submit {
   display: block;
   width: 100%;
   background: var(--theme-color);
   color: white;
   text-align: center;
   font-size: 20px !important;
   font-family: 'Roboto Slab', sans-serif;
   border-radius: 4px;
   border: 0;
   text-transform: uppercase;
   padding: 7px 0;
   margin-top: 25px;
}

#banner small {
   margin-top: 15px;
   text-align: center;
   color: #bbbbbb;
   display: block;
   font-size: 12px;
   font-weight: 400;
}

form label {
   background: white;
   position: absolute;
   top: 9px;
   padding: 0 7px;
   z-index: 99;
   left: 10px;
}

#banner {
   background-position: center center !important;
   background-size: cover !important;
   position: relative;
}

/*
DIFERENCIAIS
*/

#diferenciais h2 {
   color: var(--theme-color);
   text-align: center;
   font-family: 'Roboto Slab', sans-serif;
   font-size: 40px;
   font-weight: bold;
   margin-bottom: 40px;
   padding-top: 60px;
}

#contato {
   background-color: #F9F9F9;
   padding: 50px 0;
}

#diferenciais .contato h2 {
   text-align: start;
   font-size: 35px;
}

#diferenciais {
   margin-top: 100px;
}

#diferenciais article.item {
   width: 33%;
   vertical-align: middle;
   display: inline-block;
   margin-bottom: 60px;
}

#diferenciais article.item .image_grid {
   width: 100%;
   margin: 0 auto;
   display: block;
   text-align: center;
}

#diferenciais article.item p {
   text-align: center;
   min-height: 90px;
}

#diferenciais article.item>* {
   display: inline-block;
   vertical-align: middle;
}

#diferenciais article.item img {
   height: 60px;
   width: auto;
}

#diferenciais article.item .right {
   width: 100%;
   margin: 0 auto;
   display: block;
   max-width: 64%;
}

#diferenciais article.item .right h3 {
   color: var(--theme-color);
   font-family: 'Roboto Slab', sans-serif;
   font-size: 20px;
   font-weight: bold;
   line-height: 1;
   margin-top: 15px;
   text-align: center;
}

#diferenciais .w12 {
   margin-top: 10px;
}

#diferenciais .w12 .texto {
   margin-top: 0;
}

#diferenciais .w12>div {
   display: inline-block;
   vertical-align: middle;
}

#diferenciais .w12 .texto p {
   color: var(--text-color);
   font-size: 16px;
   font-weight: 400;
}

#diferenciais .w12 a {
   background: var(--theme-color);
   color: white;
   font-family: 'Roboto Slab', sans-serif;
   font-size: 20px;
   display: block;
   max-width: 270px;
   text-align: center;
   padding: 10px;
   border-radius: 4px;
   margin-top: 35px;
   text-transform: uppercase;
}

/* 
*******
PLANOS
******* */

#planos {
   padding-top: 60px;
}

#planos h2 {
   font-weight: bold;
   color: #239888;
   font-size: 30px;
   font-family: 'Roboto Slab', sans-serif;
   margin-bottom: 30px;
}

#planos .flex {
   justify-content: space-between;
}

#planos ul {
   list-style: none;
   padding: 35px;
}

#planos ul li {
   line-height: 28px;
   margin-bottom: 20px;
   color: white;
   font-size: 18px;
   font-weight: 500;
   padding-left: 32px;
   position: relative;
   font-family: 'Roboto Slab', sans-serif;
}

#planos ul li:before {
   content: url(../images/svg/green-check.svg);
   display: block;
   position: absolute;
   left: 0;
   top: 6px;
   height: 22px;
   margin: auto;
}

.planos {
   background-size: cover;
   background-repeat: no-repeat;
   width: 49%;
}

.para-profissionais {
   background-image: url('../images/para-profissionais.jpg');
}

.para-empresas {
   background-image: url('../images/para-empresas.jpg');
}

/*
*******
PLANOS
*******
*/

/*
***********
DEPOIMENTOS
***********
*/

#depoimentos {
   padding: 110px 0 100px;
}

#depoimentos h2, #podcast h2 {
   text-align: center;
   color: var(--theme-color-light);
   font-size: 33px;
   font-weight: bold;
   margin-bottom: 40px;
   font-family: 'Roboto Slab', sans-serif;
}

#podcast h2 {
   margin-top: 40px;
}

#podcast .bnt-spotfy {
   background: var(--theme-color);
   color: #fff;
   font-family: 'Roboto Slab', sans-serif;
   font-size: 20px;
   display: block;
   max-width: 270px;
   text-align: center;
   padding: 10px;
   border-radius: 4px;
   margin-top: 35px;
   text-transform: uppercase;
   margin: 20px auto 0 auto;
}

#depoimentos .swiper-slide {
   position: relative;
   padding: 0 20px;
}

#depoimentos .swiper-slide .textos {
   position: relative;
}

#depoimentos .swiper-slide .textos:before {
   background: url(//transicaoerecolocacao.ponteprofissional.com.br/wp-content/themes/transicao/assets/css/../images/svg/aspas.svg);
   content: '';
   display: block;
   height: 40px;
   position: absolute;
   width: 51px;
   background-size: cover !important;
   background-position: center;
   opacity: .5;
   top: -25px;
   left: 10px;
}

#depoimentos .swiper-slide p {
   text-align: center;
   padding: 0 10px;
   font-weight: 300;
   font-family: var(--main-font);
   font-size: 18px;
   color: #555555;
}

#depoimentos .dados {
   padding-bottom: 25px;
}

#depoimentos .grid {
   position: relative;
}

#depoimentos .swiper-slide .dados h3 {
   color: var(--theme-color-light);
   font-family: 'Roboto Slab', sans-serif;
   font-size: 22px;
   text-align: center;
   font-weight: bold;
   margin-top: 20px;
}

#depoimentos .swiper-slide .dados .cargo {
   font-family: 'Roboto Slab', sans-serif;
   font-size: 14px;
   text-align: center;
   font-weight: bold;
   display: block;
   color: #555555;
   padding-top: 5px;
}

#depoimentos .swiper-slide img {
   width: 87px;
   height: 87px;
   border-radius: 50%;
   object-fit: cover;
   display: block;
   margin: auto;
   margin-top: 20px;
   margin-bottom: 5px;
}

#depoimentos .swiper-button-next, #depoimentos .swiper-button-prev {
   background: url(../images/svg/arrow.svg);
   width: 20px;
   height: 49px;
}

#depoimentos .swiper-button-prev {
   left: -30px;
}

#depoimentos .swiper-button-next {
   right: -30px;
   transform: rotate(180deg);
}

/*
***********
INTERESSE
***********
*/

#interesse {
   background-size: cover !important;
   background-position: center !important;
   padding: 70px 0 50px;
}

#interesse h2 {
   text-align: center;
   color: white;
   font-size: 40px;
   font-weight: bold;
   font-family: 'Roboto Slab', sans-serif;
}

#interesse a.contato {
   text-align: center;
   display: block;
   text-transform: uppercase;
   background: white;
   font-size: 19px;
   font-weight: bold;
   padding: 11px;
   font-family: 'Roboto Slab', sans-serif;
   max-width: 486px;
   color: var(--theme-color);
   border-radius: 4px;
   margin: auto;
   margin-top: 35px;
   transition: ease all 0.5s;
   border: 1px solid white
}

#interesse a.contato:hover {
   background: transparent;
   color: white;
   border: 1px solid white;
}

#video {
   background: #239888;
   padding: 30px 0;
}

#video h2 {
   text-align: center;
   color: white;
   font-size: 35px;
   font-weight: bold;
   font-family: 'Roboto Slab', sans-serif;
   padding-bottom: 30px;
}

@media (max-width: 600px) {
   #banner h2 {
      font-size: 28px !important;
      max-width: 320px;
      margin: auto;
      margin-bottom: 20px;
      text-align: center;
   }
   #planos ul li:before, #diferenciais .w12 .texto p br {
      display: none;
   }
   #banner .w6 {
      margin-top: 0;
   }
   #banner .inner {
      display: flex;
      flex-direction: column;
   }
   #banner p {
      max-width: 400px;
      margin: auto;
      font-size: 13px!important;
      text-align: center;
      margin-top: 10px;
   }
   #diferenciais article.item {
      width: 100%;
      margin-bottom: 30px;
   }
   #diferenciais article.item .image_grid {
      width: 50px;
   }
   #diferenciais article.item .right {
      width: 70%;
   }
   #planos .w4 {
      width: 100%;
   }
   #planos h2 {
      font-size: 30px!important;
      padding-left: 10px;
   }
   #planos {
      padding: 30px 0 30px;
   }
   #depoimentos {
      padding: 30px 0 40px;
   }
   #depoimentos .swiper-button-prev {
      left: 10px;
   }
   #depoimentos .swiper-button-next {
      right: 10px;
   }
   #depoimentos .swiper-button-next, #depoimentos .swiper-button-prev {
      height: 30px;
      width: 12px;
      background-size: cover !important;
   }
   #interesse h2 {
      font-size: 30px!important;
   }
   #interesse {
      padding: 40px 0 40px;
   }
   footer #logo {
      display: block;
      text-align: center;
   }
   footer .site-info .grid {
      text-align: center;
      padding: 10px 0 !important;
   }
   footer ul li {
      font-size: 16px!important;
   }
   #banner {
      padding-bottom: 155px;
   }
   #planos ul li {
      font-size: 16px;
      padding-left: 10px;
   }
   #planos ul li br {
      display: none;
   }
   #planos ul {
      padding: 0 0;
   }
   #planos .para-empresas {
      margin-top: 30px;
   }
}