/* Global */
  :root {
    --black :#171918;
    --orange: #ff8000;
    --orange-hover: #d7710b;
    --light-orange: #d7710b; 
    --blue-box: #019eaf;
    --light-blue: #63BDC5;
    --blue: #0098a5;
    --dark-blue: #419BA3;
    --light-grey: #F4F4F4;
    --light-grey-hover: #e2e2e2;
    --medium-grey: #707070;
    --dark-grey: #1d1e1d;
  }
  body{
    font-family: 'Quicksand', sans-serif;
    overflow-x: hidden !important
  }
  body.noscroll{ overflow-y: hidden }
  .unselectable { user-select: none !important }
  p { margin: 0 }
  .fw-700 { font-weight: 700 }
  .text-blue { color: var(--blue) }
  .text-red { color: var(--orange) }
  a.text-blue:hover { color: var(--dark-blue) }
  a.text-red:hover { color: var(--orange-hover) }
  .mt-6 { margin-top: 4rem !important }
  .pb-6 { padding-bottom: 4rem !important }
  .pb-7 { padding-bottom: 5rem !important 
  }
  .px-75 {
    padding-left: .75rem !important;
    padding-right: .75rem !important
  }
  .w-60 { width: 60% }
  .w-70 { width: 70% }
  .w-80 { width: 80% }
  .w-90 { width: 90% }
  a:hover:not(.disabled) { transition: color .3s }
  .ts-bkgd:not(.disabled) { transition: background-color .3s }
  .ts-opacity { transition: opacity .3s }
  .btn-rounded {
   border-radius: 50px
  }
  header .my-nav-button.social {
    background-color: #2d2d2d;
    padding: 4px;
    width: 33px;
    height: 33px;
    cursor: pointer
  }

  header .my-nav-button.large {
    width: auto
  }
  header .my-nav-button:hover { background-color: var(--dark-grey) }
  ::placeholder {
    font-size: 13px;
    color: rgba(155,155,155,.2)
  }
  ::-webkit-input-placeholder {
    font-size: 13px;
    color: rgba(155,155,155,.2w)
  }
  ::-moz-placeholder {
    font-size: 13px;
    color: rgba(155,155,155,.2)
  }
  /* form { display: contents } */
  form input[type="radio"] {
    height: 15px;
    width: 15px;
    float: left;
    cursor: pointer;
    margin: 0
  }
  p.error_form {
    text-align: center;
    color: goldenrod;
    font-size: 12px !important
  }
  p.error_form.success {
    color: #D69A04;
    font-size: 16px
  }
  a.my-btn { text-decoration: none }
  .my-btn {
    font-weight: bold;
    text-transform: uppercase;
    padding: 0 20px;
    cursor: pointer;
    user-select: none;
    border: 0;
    border-radius: 5px;
    transition: background-color .4s, transform .035s
  }
  .my-btn.disabled {
    cursor: not-allowed;
    opacity: .5
  }
  .my-btn:not(:disabled):active { transform: scale(0.97) }
  .my-btn.black {
    background-color: var(--dark-grey-hover);
    color: white
  }
  .my-btn.black:not(.nohover):hover { background-color: var(--black) }
  .my-btn.white {
    background-color: white;
    color: black
  }
  .my-btn.white:not(.nohover):hover { background-color: #ddd }
  .my-btn.light-grey {
    background-color: var(--light-grey);
    color: black
  }
  .my-btn.light-grey:not(.nohover):hover { background-color: var(--light-grey-hover) }
  .my-btn.grey {
    background-color: var(--grey);
    color: white
  }
  .my-btn.grey:not(.nohover):hover { background-color: var(--grey-hover) }
  .my-btn.btn-orange {
    background-color: var(--orange);
    color: white
  }
  .my-btn.btn-orange:not(.nohover):hover { background-color: var(--orange-hover) }
  .my-btn.blue {
    background-color: var(--blue);
    color: white
  }
  .my-btn.blue:not(.nohover):hover { background-color: var(--dark-blue) }
  .my-btn.transp { background-color: transparent }
  .my-btn.transp.white {
    border: 1px solid white !important;
    color: white
  }
  .my-btn.transp.white:hover {
    background-color: white;
    color: black
  }
  .my-alert {
    display: none;
    width: 500px;
    left: -50%;
    right: -50%;
    position: fixed;
    top: 25%;
    z-index: 10;
    background-color: var(--dark-grey);
    color: white;
    opacity: 0;
    border-radius: 7px
  }
  .my-alert.show {
    opacity: 1;
    transition: opacity .5s
  }
  .modal i.btn-close {
    font-size: 25px;
    color: white;
    position: absolute;
    top: 20px;
    right: 20px;
    opacity: .5;
    cursor: pointer;
    z-index: 10
  }
  .modal i.btn-close:hover { opacity: 1 }
/* Correções Bootstrap 4.3 / Fontawesome */
  a,
  a:focus,
  img,
  img:focus,
  button,
  button:focus {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important
  }
  input,
  input:focus,
  select,
  select:focus,
  textarea,
  textarea:focus {
    outline: none !important;
    box-shadow: none !important
  }
  .form-group {
    margin-bottom: 10px
  }
  i {
    text-shadow: none !important
  }
  [type=button].disabled,
  [type=submit].disabled,
  button.disabled,
  input.disabled {
    cursor: not-allowed !important;
    pointer-events: none !important
  }
/* Correções Select2 */
  /* Form Adesão */
  .select2-container--default .select2-selection--multiple {
    border: 1px solid #ccc !important
  }
  .select2.select2-container,
  .select2-selection.select2-selection--multiple {
    height: 80px
  }
  input.select2-search__field {
    height: 50px !important;
    margin: 0 !important
  }
  .select2-container--default .select2-selection--multiple ul.select2-selection__rendered {
    height: 80px !important;
    padding: 7px !important;
    overflow-y: scroll
  }
  ul.select2-selection__rendered {
    font-size: 13px !important
  }
  ul.select2-selection__rendered li {
    border: 0 !important
  }
  li.select2-selection__choice {
    margin: 5px !important
  }
  .select2-results__option {
    font-size: 14px !important;
    padding: 7px 15px !important
  }
  .select2-results__option.select2-results__message {
    font-size: 13px !important;
    padding: 12px !important
  }
  /* Correções Croppie */
  .croppie-container .cr-slider-wrap {
    margin: 5px 0 !important
  }
  .cr-slider {
    border: 0 !important;
    height: 40px !important
  }
  section.stores a:not(:last-of-type) {
      /* section.stores a { */
      text-decoration: none;
      /* Dimensão para thumbs com link */
      max-width: 13%;
      flex: 0 0 13%
  }

  section.compromisso.form form .preview input {
    border: 0 !important
  }
/* Header */
  header {
    background-color: black;
    color: white;
    height: 65px;
    transition: height .5s;
    z-index: 1000
  }
  header.height-offers { height: 75px }
  header .col-slogan p { font-size: 13px }
  header * {
    z-index: 1000
  }
  header.fixed {
    position: fixed;
    top: 0;
    width: 100%
  }
  header .logo img {
    height: 42px;
    transition: height .5s
  }
  /* header.fixed .logo img {
    height: 35px;
  } */
  header p {
    margin: 0
  }
  header a:hover {
    text-decoration: none
  }
  header a {
    color: white;
    text-transform: uppercase
  }
  header ul li {
    font-size: 13px
  }
  header ul.links {
    margin-left: 10px
  }
  /* header.fixed ul.links {
    margin-left: 25px;
  } */
  header ul.links a:hover {
    color: var(--orange)
  }
  header ul.right a:hover {
    color: white
  }
  /* header ul.links li:last-child a:before {
    content: "|";
    margin: 0 7px 0 0;
    color: rgba(255,255,255,.5)
  } */
  header .btn-anuncie { cursor: pointer }
  header .btn-anuncie:hover { color: var(--orange); }
  header .btn-anuncie.active {
    background-color: var(--orange);
    color: black
  }
  header .btn-anuncie.active:hover {
    background-color: var(--orange-hover);
    color: white
  }
  header ul.offers {
    height: 65px;
    background-color: black
  }
  header ul.offers b.btn-login {
    cursor: pointer
  }
  /* Menu reduzido */
  header .menu-reduced {
    position: fixed;
    width: 300px;
    top: -100%;
    right: 0;
    background-color: black;
    color: white;
    transition: top .5s ease-out;
    z-index: 30
  }
  header .menu-reduced.show { top: 98px }
  header.fixed .menu-reduced.show { top: 65px }
  header .menu-reduced ul li.dividier {
    height: 15px;
    border-bottom: 1px solid rgba(155,155,155,.3)
  }
  header .menu-reduced ul li a:hover {
    color: var(--orange)
  }
  header .menu-reduced ul li a.yellow {
    color: var(--orange);
    font-weight: bold
  }
  header .menu-reduced ul li a.yellow:hover {
    color: var(--yellow-hover)
  }
  header .menu-reduced ul.nav.social button {
    width: 33px;
    height: 33px;
    padding: 0
  }
  header .menu-reduced ul.nav.social button i {
    font-size: 14px
  }
  /* Search Ofertas */
  header .search-offers a {
    color: var(--orange)
  }
  header .search-offers a:hover {
    color: var(--yellow-hover)
  }
  header .search-offers input {
    height: 45px;
    border: 0;
    font-size: 13px;
    padding-right: 85px
  }
  header .search-offers p.btn-clear-search {
    color: var(--dark-grey);
    font-size: 12px;
    position: absolute;
    top: 15px;
    right: 30px;
    cursor: pointer;
    opacity: 0;
    text-transform: initial
  }
  header .search-offers p.btn-clear-search.active {
    opacity: 1
  }
  header .search-offers button {
    background-color: white;
    width: 50px;
    height: 45px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 1px solid rgba(155,155,155,.35) !important;
    padding: 10px;
    position: absolute;
    top: 0;
    right: -30px
  }
  header .search-offers button:hover {
    background-color: var(--light-grey);
  }
  header .search-offers button img {
    width: 19px;
  }
  /* Search Mobile */
  header button.btn-search-mobile {
    background-color: transparent;
  }
  header .search-mobile {
      position: absolute;
      top: 0;
      right: -100%;
      width: 100%;
      height: 65px;
      z-index: 1200;
      transition: right .3s ease-out
  }
  header .search-mobile * {
      z-index: 1300
  }
  header .search-mobile.show {
      right: 15px                    
  }
  header .search-mobile button {
      background-color: transparent;
      width: 65px;
      height: 65px;
      position: absolute;
  }
  header .search-mobile button.btn-return {
      background-color: black;
      width: 65px;
      height: 65px;
      color: var(--orange);
      z-index: 1350;
      font-size: 33px;
      position: absolute;
      right: 0px
  }
  header .search-mobile button[type="submit"] {
      right: 10px
  }
  header .search-mobile input {
      height: 65px;
      border-radius: 0;
      padding-right: 65px
  }
/* Compromisso */
    section.compromisso {
        background-color: var(--dark-grey);
        color: white;
    }
    section.compromisso p {
        font-size: 15px;
    }
    section.compromisso p span {
        font-size: 26px;
    }
    section.compromisso .row.whats img {
        width: 220px;
        height: auto;
    }
    section.compromisso .row:not(:last-child) {
        border-bottom: 1px solid rgba(255,255,255,.25);
    }
    section.compromisso.form {
        background-color: white;
        color: black
    }
    section.compromisso.form .container {
        width: 75%;
    }
    section.lojista.form .container {
        width: 60%;
    }
    section.compromisso.form a,
    section.lojista.form a {
        text-decoration: underline;
        color: black;
        font-weight: bold;
    }
    section.compromisso.form .container > div.row:first-of-type p,
    section.lojista.form .container > .row:first-of-type p {
        font-size: 33px;
    }
    section.compromisso.form p:first-of-type,
    section.lojista.form p:first-of-type {
        font-size: 18px;
    }
    section.compromisso.form form label,
    section.lojista.form form label {
        font-weight: bold;
        margin: 15px 0 3px;
        font-size: 12px
    }
    section.compromisso.form form input:not([type="radio"]),
    section.compromisso.form form select,
    section.lojista.form form input:not([type="radio"]),
    section.lojista.form form textarea {
        border: 1px solid #CCC !important;
        height: 50px;
        font-size: 14px
    }
    section.compromisso.form form .preview input.cr-slider{
        border: 0 !important;
    }
    section.compromisso.form form .preview input[type="file"] {
        position: absolute
    }
    section.compromisso.form form input.select2-search__field {
        border: 0 !important
    }
    section.compromisso.form form .preview {
        border: 1px solid var(--light-grey-hover) !important;
        background-color: var(--light-grey);
        height: 178px;
        margin-top: 10px;
        color: var(--dark-grey);
        transition: height .5s
    }
    section.compromisso.form form .preview.active {
        height: 190px;
    }
    section.compromisso.form form .preview button {
        border: 1px solid var(--light-grey-hover) !important;
        transition: width .65s;
    }
    section.compromisso.form form .preview .thumb.croppie-container {
        width: 250px;
        height: 100px;
    }
    section.compromisso.form form .preview img.thumb-cropped {
        width: 275px;
        height: 100px;
    }
    section.compromisso.form form .preview button.btn-crop.disabled,
    section.compromisso.form form .preview button.btn-crop.disabled:hover {
        background-color: initial !important;
        cursor: default !important
    }
    section.compromisso.form form .preview button.btn-crop {
        width: 125px;
        position: absolute;
        top: 0;
        right: 0;
        font-size: 9.5px;
        transition: width .4s, right .3s linear, border-width .3s
    }
    @keyframes btn-focus {
        0% { opacity: 1 }
        50% { opacity: .75 }
        100% { opacity: .25 }
    }
    section.compromisso.form form .preview button.btn-crop.focus {
        border: 2px solid red !important;
        animation: btn-focus .75s
    }
    section.compromisso.form form .preview button.btn-crop.small {
        width: 35px;
        right: 50px
    }
    section.compromisso.form form .preview button.btn-send.small {
        width: 185px;
        font-size: 10px;
        position: absolute;
        right: 0;
        bottom: 0;
        padding: 0;
    }
    section.compromisso.form form .size-preview,
    section.compromisso.form form .name-preview {
        font-size: 13px;
    }
    section.compromisso.form form .name-preview {
        height: 30px;
    }
    section.compromisso.form form input[type="radio"] + p,
    section.lojista.form form input[type="radio"] + p {
        font-size: 13px;    
    }
    section.compromisso.form .log p {
        font-size: 20px;
    }
/* Lojas Main */
    section.lojistas.main {
        background-color: var(--dark-grey);
        color: white
    }
    section.lojistas.main .question {
        position: absolute;
        top: 100px;
        right: 10px
    }
    section.lojistas.main .question a {
        color: white;
        text-decoration: none
    }
    section.lojistas.main .question a:hover {
        color: var(--orange)
    }
    section.lojistas.main .question p {
        font-size: 15px;
        cursor: pointer
    }
    section.lojistas.main i {
        opacity: .65;
        color: white
    }
    section.lojistas.main i.active {
        opacity: 1;
    }
    section.lojistas.main img {
        width: 140px;
        height: auto
    }
    section.lojistas.main p {
        font-size: 17px;
    }
    section.lojistas.main .search input {
        color: white;
        background-color: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255,255,255,.45) !important
    }
    section.lojistas.main .search input + img.icon {
        position: absolute;
        height: 17px;
        width: auto;
        bottom: 15px;
        right: 15px;
        cursor: pointer
    }
    section.lojistas.main .search p.btn-clean-search {
        font-size: 11px;
        position: absolute;
        right: 10px;
        bottom: -28px;
        cursor: pointer
    }
/* Lojas */
  section.lojas {
    min-height: 430px
  }
  section.lojas .loja {
    margin-top: 2.5%
  }
  section.lojas .loja .content {
    box-shadow: 0 0 12px -5px #c5c5c5;
    border-radius: 3px;
    font-size: 13px
  }
  section.lojas .loja div.logo {
    border-bottom: 1px solid var(--light-grey);
    height: 80px
  }
  section.lojas .loja div.logo img {
    max-height: 65px;
    width: auto 
  }
  section.lojas .loja .name {
    height: 55px
  }
  section.lojas .loja .name p {
    font-size: 14px;        
  }
  section.lojas .loja div.rating img {
    width: 37px;
    height: auto
  }
  section.lojas .loja button {
    font-weight: normal;
    font-size: 14px
  }
  section.lojas .ver-mais {
    font-size: 18px;
    position: fixed;
    bottom: 40px;
    left: 50%;
    margin-left: -90px;
    background-color: rgba(255,255,255,.75);
    font-weight: normal;
    cursor: default;
    user-select: none
  }
  section.lojas .ver-mais i {
    -webkit-animation: arrow-jump 1s infinite;
    -moz-animation:    arrow-jump 1s infinite;
    -o-animation:      arrow-jump 1s infinite;
    animation:         arrow-jump 1s infinite
  }

  @-webkit-keyframes arrow-jump {
    0% {
      opacity: .5;
      -webkit-transform: translateY(-2.5px);
      -moz-transform: translateY(-2.5px);
      -0-transform: translateY(-2.5px);
      transform: translateY(-2.5px)
    }
    100% {
      opacity: 1; 
      -webkit-transform: translateY(2.5px);
      -moz-transform: translateY(2.5px);
      -0-transform: translateY(2.5px);
      transform: translateY(2.5px)
    }
  }
  section.lojas .empty-content p {
    font-size: 14px
  }
  section.lojas .empty-content p:first-of-type,
  section.ofertas .empty-content p:first-of-type {
    border-bottom: 1px solid rgba(155,155,155,.4);
    font-size: 22px
  }
/* Loja Info */
  section.lojista.info .top .toback a {
    color: white;
    text-decoration: none
  }
  section.lojista.info .top .toback a:hover {
    color: var(--orange)
  }
  section.lojista.info .top {
    background-color: var(--dark-grey);
    color: white
  }
  section.lojista.info .top .thumb {
    background-color: white;
    border-radius: 3px
  }
  section.lojista.info .top .thumb img {
    max-width: 70%;
    height: auto;
    max-height: 70px;
    width: auto
  }
  section.lojista.info .top .rate {
    border-left: 1px solid rgba(155,155,155,.6)
  }
  section.lojista.info .top .rate p.total {
    font-size: 12px
  }
  section.lojista.info .desc {
    box-shadow: 0 10px 15px -5px #DADADA; 
  }
  section.lojista.info .desc p {
    font-size: 17px
  }
/* Loja Form */
  section.lojista.form form textarea {
    height: 185px
  }
  section.lojista.form .rating img {
    width: 55px;
    height: auto;
    cursor: pointer
  }
  section.lojista.form .rating img.selected {
    opacity: .6 !important;
    border-radius: 50px !important
  }
  section.lojista.form .rating img.selected.positivo {
    border: 3px solid #064e06 !important
  }
  section.lojista.form .rating img.selected.negativo {
    border: 3px solid #823721 !important
  }
/* Ofertas */
  /* section.ofertas:not(.categorias) { min-height: 700px } */
  /* section.ofertas.middle { min-height: initial } */
/* Footer */
  footer {
    background-color: black;
    color: white;
    font-size: 13px;
    color: #C9C9C9
  }
  footer img.logo { height: 125px }
  footer a {
    color: #C9C9C9;
    text-decoration: none
  }
  footer a:hover {
    color: var(--orange);
    text-decoration: none
  }
  footer a.yellow { color: var(--orange) }
  footer a.yellow:hover {
    color: var(--yellow-hover)
  }
  footer p.high { font-size: 16px }
  footer .top { width: 70% }
  footer .top .toborder { border-top: 1px solid rgba(155,155,155,.5) }
  footer .top .toborder p { font-size: 13px }
  footer .top ul.social button,
  footer button.social {
    width: 30px;
    height: 30px;
    padding: 0
  }
  footer button.social { border-radius: 100% }
  footer .bottom {
    font-size: 12px;
    background-color: var(--dark-grey);
    color: #e6e6e6
  }
/* Cookies */
    section.cookies {
      background-color: rgba(0,0,0,.95);
      color: #FFF;
      position: fixed;
      z-index: 9999;
      bottom: 0;
      padding: 20px 30px;
      font-size: 13px
    }
    section.cookies p {
      width: 80%;
      float: left;
      margin: 0
    }
    section.cookies a { color: var(--orange) }
    section.cookies button {
      float: right;
      padding: 5px 20px;
      border-radius: 5px
    }