body, html {
    min-height: 100%;
    display: inline-block;
    float: left;
    width: 100%;
    height: 100% !important;
}

body {
    font-family: 'Roboto', sans-serif;
}

header {
    z-index: 9999;
    float: left;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}

.navbar {
    float: left;
    width: 100%;
    padding: 0 1rem;
    z-index: 9999;
}

.navbar .navbar-nav .nav-link {
    font-size: 15px;
    font-family: 'Gotham Bold', sans-serif;
    padding: 12px 20px;
    color: #748B8F;
    font-weight: bold;
    margin: 0 5px;
}

.navbar .navbar-toggler {
    background: transparent;
    border: 0
}

.navbar .navbar-nav .btn-encontre {
    border-radius: 10px;
    background: #4380A8;
    padding: 8px 20px;
    color: #fff
}

.navbar .navbar-nav .btn-encontre:hover,
.navbar .navbar-nav .btn-ecoclub:hover,
.navbar .navbar-nav .btn-login:hover {
    color: #fff;
}

.navbar .navbar-nav .btn-ecoclub {
    border-radius: 10px;
    background: #18B773;
    padding: 8px 20px;
    color: #fff
}

.navbar .navbar-nav .btn-login {
    border-radius: 30px;
    background: #18B773;
    padding: 8px 20px;
    color: #fff
}

.navbar-collapse-right .nav-link {
    font-size: 17px;
    font-family: 'Gotham Bold', sans-serif;
    color: #748B8F;
    padding: 0;
    font-weight: bold;
    margin: 5px 0;
}

.close-navbar-right {
    position: absolute;
    left: 30px;
    top: 20px
}

.navbar-collapse-right {
    position: absolute;
    top: 0;
    right: 0;
    padding: 130px 80px 100px 30px;
    background: #fff;
    min-height: 100%;
    z-index: 9999;
}

.navbar-collapse-right.collapsing {
    height: auto;
    -webkit-transition: left 0.3s ease;
    -o-transition: left 0.3s ease;
    -moz-transition: left 0.3s ease;
    transition: left 0.3s ease;
    right: -100%;
}

.navbar-collapse-right.show {
    right: 0;
    -webkit-transition: left 0.3s ease-in;
    -o-transition: left 0.3s ease-in;
    -moz-transition: left 0.3s ease-in;
    transition: left 0.3s ease-in;
}

/** BTNS **/

.title {
    font-size: 50px;
    color: #4380A8;
    font-weight: bold;
    font-family: 'Gotham Bold', sans-serif;
}

.ecoclub-title {
    font-size: 28px;
    color: #18B773;
    font-weight: bold;
    font-family: 'Gotham Bold', sans-serif;
}

.subtitle {
    font-size: 24px;
    color: #4380A8;
    font-weight: bold;
    font-family: 'Gotham Bold', sans-serif;
}

.btn-primary {
    background: #18B773;
    font-family: 'Gotham Bold', sans-serif;
    border-radius: 50px;
    padding: 10px 50px !important;
    font-size: 15px;
    cursor: pointer;
    border: 0
}

.btn-primary:hover {
    background: #01EB92;
}

.btn-secondary {
    background: transparent;
    border: 2px solid #FF2D31;
    color: #FF2D31;
    border-radius: 50px;
    padding: 10px 50px !important;
    font-size: 16px;
    cursor: pointer;
}

.btn-secondary:hover {
    background: #FF2D31;
    border: 2px solid #FF2D31
}

/** HOME **/
#banners {
    position: relative;
    background: #FAFAFA url('../images/background-verde.png') right center no-repeat;
    background-size: auto 100%;
    min-height: 100% !important;
}

#banners h2 {
    color: #4380A8;
    font-size: 45px;
    font-family: 'Gotham Bold', sans-serif;
}

#sobre p {
    color: #748B8F;
    font-size: 17px;
    font-family: 'Museo', sans-serif;
}

footer {
    background: url('../images/background-footer.png') no-repeat;
    background-size: cover
}

footer p {
    color: #fff!important;
    float: left;
    width: 100%;
    font-family: 'Museo', sans-serif;
    font-size: 18px
}

footer .redes li {
    float: left;
    display: inline-block;
    margin: 0 3px
}

footer ul.nav-footer {
    list-style: none;
    padding: 0;
    float: left;
    width: 100%;
    display: inline-block
}

footer ul.nav-footer > li {
    display: inline;
    margin: 0 15px;
    float: left;
}

footer ul.nav-footer > li > a {
    color: #fff;
    font-size: 18px;
    margin-bottom: 8px;
    float: left;
    display: table;
    font-weight: bold;
}

footer h3 {
    color: #fff;
    font-size: 22px;
    font-family: 'Gotham Bold', sans-serif;
}

.copyright {
    background: #18B773;
    padding: 12px 0;
}

.copyright a, .copyright p {
    color: #fff;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
    font-weight: normal;
}


#beneficios {
    position: relative;
}

#beneficios .card {
    border: 0;
    border-radius: 10px;
    min-height: 320px
}

#beneficios .card-body {
    background: #fff;
    border-radius: 0 0 10px 10px;
    text-align: center
}

#beneficios .card-body p {
    color: #748B8F;
    font-size: 20px;
    font-family: 'Gotham Bold', sans-serif;
    margin-top: 25px
}

#beneficios .card-body h3 {
    color: #18B773;
    font-size: 20px;
}

#como-funciona h4 {
    color: #4380A8;
    font-size: 25px;
    font-family: 'Gotham Bold', sans-serif;
}

#como-funciona p {
    color: #748B8F;
    font-size: 15px;
    font-family: 'Museo', sans-serif;
    font-weight: 100;
}


#socioambiental .card {
    border-radius: 5px;
    border: 0;
    min-height: 450px;
}

#socioambiental .card h5 {
    color: #4380A8;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    min-height: 65px;
}

#socioambiental .card p {
    font-size: 15px;
    color: #748B8F;
    font-family: 'Museo', sans-serif;

}

#capa-pages {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}

#capa-pages h2 {
    color: #fff;
    font-size: 50px;
    font-family: 'Gotham Bold', sans-serif;
}


#depoimentos {
    position: relative
}

#depoimentos .card {
    border: 0;
    border-radius: 10px
}

#depoimentos .bx-viewport {
    padding-bottom: 10px
}

#depoimentos .bx-wrapper img {
    display: inline-block;
    max-width: 120px
}

#depoimentos .bx-prev.disabled, #depoimentos .bx-next.disabled {
    display: none
}

#depoimentos .bx-prev, #depoimentos .bx-next {
    padding: 19px 25px 19px 25px;
    border-radius: 50%;
    display: inline-block;
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

#depoimentos .bx-prev {
    left: -10px;
    top: 42%;
    position: absolute;
    z-index: 999
}

#depoimentos .bx-next {
    right: -10px;
    top: 42%;
    position: absolute;
    z-index: 999
}

#depoimentos h6 {
    color: #4380A8;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
}

#depoimentos p {
    font-size: 16px;
    color: #707070;
}

#depoimentos h5 {
    color: #959494;
    font-size: 15px;;
    font-weight: 600;
}



#ecomachine {
    position: relative
}

#ecomachine .card {
    border: 0;
    border-radius: 10px
}

#ecomachine .bx-viewport {
    padding-bottom: 10px
}

#ecomachine .bx-wrapper img {
    display: inline-block;
    max-width: 120px
}

#ecomachine .bx-prev.disabled, #ecomachine .bx-next.disabled {
    display: none
}

#ecomachine .bx-prev, #ecomachine .bx-next {
    padding: 19px 25px 19px 25px;
    border-radius: 50%;
    display: inline-block;
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

#ecomachine .bx-prev {
    left: -10px;
    top: 42%;
    position: absolute;
    z-index: 999
}

#ecomachine .bx-next {
    right: -10px;
    top: 42%;
    position: absolute;
    z-index: 999
}

#ecomachine h6 {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    margin-top: 30px;
}

#ecomachine p {
    font-size: 16px;
    color: #707070;
}


.panel-group .panel {
    border: 0;
    margin-bottom: 20px;
    border-radius: 30px;
    background: #fff
}

.panel-default > .panel-heading {
    border: 0 !important;
    background: transparent;
    position: relative;
    z-index: 999
}

.panel-body {
    border: 0 !important;
    padding-left: 30px;
    font-size: 16px;
    background: #fff;
    color: #000
}

.panel-title {
    color: #fff;
    font-size: 20px;
    position: relative;
    font-weight: bold;
    border-radius: 30px;
}

.panel-title a {
    position: relative;
    background: #fff;
    display: block;
    font-size: 18px;
    color: #748B8F;
    padding: 13px 50px 13px 60px;
    text-decoration: none !important;
    border-radius: 30px;
}

.panel-title > a:after {
    float: right !important;
    content: "";
    background: url('../images/Icon-check-faq.png');
    height: 33px;
    width: 33px;
    position: absolute;
    left: 10px;
    top: 7px;
}

.panel-title > a:before {
    float: right !important;
    font-family: 'FontAwesome';
    content: "\f068";
    padding-right: 5px;
    color: #18B773;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    line-height: 50px;
    font-size: 20px;
    font-weight: normal;
    margin: auto;
}

.panel-title > a.collapsed:before {
    content: "\f067";
}

.panel-title > a:hover, .panel-title > a:active, .panel-title > a:focus {
    text-decoration: none;
}

.panel-collapse {
    margin-top: -10px
}

.panel .panel-body {
    padding-top: 30px !important;
}
.panel .panel-body p{    color: #748B8F;}

.panel-group .panel-heading {
    padding: 0 !important;
}

#pac-input {
    font-size: 15px;
    text-overflow: ellipsis;
    width: 400px;
    max-width: 90% !important;
    margin-top: 80px;
    margin-left: 50%;
    transform: translateX(-100%);
    padding: 12px 20px;
    border-radius: 30px;
    outline: none !important;
    position: relative;
    font-weight: bold;
    background: #fff url('../images/icon-search.png') no-repeat right 20px center;
}

#pac-input:focus {
    border-color: #18B773;
}

input.form-control {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important;
    border-radius: 50px;
    padding: 12px 30px;
    font-size: 18px;
    border: 1px solid #f3f3f3;
    height: auto !important;
}

textarea.form-control {
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08) !important;
    border-radius: 10px;
    padding: 12px 30px;
    font-size: 18px;
    border: 1px solid #f3f3f3;
    height: auto !important;
}

.contato input {
    border-radius: 50px;
    height: auto;
    padding: 15px 25px;
    font-size: 16px;
    color: #BBBBBB;
    border: 1px solid #AFAFAF
}

.contato textarea {
    padding: 15px 25px;
    font-size: 16px;
    border-radius: 10px;
    color: #BBBBBB;
    border: 1px solid #AFAFAF
}

button.close {
    position: absolute;
    z-index: 999999;
    right: -28px;
    top: 0;
    color: #fff;
    opacity: 1;
    text-shadow: none;
    font-size: 31px;
    font-weight: 100;
}

.modal {
    z-index: 99999;
}

.modal-backdrop {
    z-index: 9999;
}

/* Cookie Dialog */
#gdpr-cookie-message {
    position: fixed;
    right: 30px;
    bottom: 30px;
    max-width: 600px;
    background-color: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.25);
    margin-left: 30px;
    z-index: 999;
}

#gdpr-cookie-message h4 {
    background: url('../images/cookies.png?v=2') no-repeat left center;
    padding-left: 100px;
    height: 54px;
    color: #000;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    padding-top: 14px;
}

#gdpr-cookie-message h5 {
    color: #000;;
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: bold;
}

#gdpr-cookie-message p, #gdpr-cookie-message ul {
    color: #404040;
    font-size: 15px;
    line-height: 1.5em;
}

#gdpr-cookie-message p:last-child {
    margin-bottom: 0;
    text-align: right;
}

#gdpr-cookie-message li {
    width: 49%;
    display: inline-block;
}

#gdpr-cookie-message a {
    color: #4380A8;
    text-decoration: none;
    font-size: 15px;
    padding-bottom: 2px;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.75);
    transition: all 0.3s ease-in;
}

#gdpr-cookie-message a:hover {
    color: #4380A8;
    border-bottom-color: var(--red);
    transition: all 0.3s ease-in;
}

#gdpr-cookie-message button,
button#ihavecookiesBtn {
    border: none;
    background: #18B773;
    color: #fff;
    font-size: 15px;
    padding: 10px 20px;
    border-radius: 30px;
    margin-left: 15px;
    cursor: pointer;
    transition: all 0.3s ease-in;
}

#gdpr-cookie-message button:hover {
    background: #277ae5;
    transition: all 0.3s ease-in;
}

button#gdpr-cookie-advanced, button#gdpr-cookie-advanced:hover, button#gdpr-cookie-advanced:focus, button#gdpr-cookie-advanced:active {
    color: #4380A8 !important;
    padding: 0 !important;
    background: #fff !important;
}

#gdpr-cookie-message button:disabled {
    opacity: 0.3;
}

#gdpr-cookie-message input[type="checkbox"] {
    float: none;
    margin-top: 0;
    margin-right: 5px;
}

/**
Ecoclub
 */
.empresas .card{
    text-align: center;
    border-radius: 10px;
    min-height: 200px;
}
.empresas .card h3 {
    color: #748B8F!important;
    font-size: 13px!important;
    font-weight: bold!important;
}
.empresas .card p {
    color: #18B773!important;
    font-size: 10px!important;
    font-weight: bold!important;
    margin-bottom: 0!important;
}
.empresas .card a:hover{
    text-decoration: none!important;
}
.empresa h3 {
    color: #748B8F;
    font-size: 13px;
    font-weight: bold;
}

.recompensas  .card{border-radius: 10px}
.recompensas  .card h5{color: #748B8F!important;font-size: 13px!important;   font-family: 'Museo', sans-serif;}
.recompensas  .card p{font-weight: bold!important;color: #748B8F!important;font-size: 16px;}
.recompensas  .card span{color: #748B8F!important;font-size: 13px!important;}

#recompensas{position: relative;}
#recompensas .bx-wrapper .bx-viewport{padding-bottom: 20px!important;}
#recompensas .bx-wrapper img{display: inline-block}
#recompensas .bx-prev.disabled,#recompensas .bx-next.disabled{display: none}
#recompensas .bx-prev,#recompensas .bx-next{ padding: 19px 25px 19px 25px;border-radius: 50%;display: inline-block;background: #fff;box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;}
#recompensas .bx-prev{left: 0;top: 40%;position: absolute;z-index: 999}
#recompensas .bx-next{right: 0;top: 40%;position: absolute;z-index: 999}
#recompensas .card{border: 0;}
#recompensas .card-body{background: #fff;border-radius:  0 0 10px 10px;text-align: left}


#empresa h3 {
    color: #748B8F;
    font-size: 18px;
    font-weight: bold;
}
#empresa h4 {
    color: #18B773;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 0;
}
#empresa  .redes{
    display: block;
    width: 100%;
    float: left;
}
#empresa  .redes li {
    float: left;
    display: inline-block;
    margin: 0 3px
}
#empresa p{
    color: #000;
    font-size: 15px;
}

.regras{list-style: none;text-align: left}
.regras li{margin-bottom: 10px;font-size: 16px;position: relative;padding-left: 35px}
.regras li::before{
    position: absolute;
    top:3px;
    left:0;
    content: '';
    display: inline-block;
    height: 21px;
    width:21px;
    background-image: url('../images/icone-ok.png');
}

#beneficios{position: relative}
#beneficios .bx-wrapper img{display: inline-block;}
#beneficios .bx-viewport{padding-bottom: 20px;}
#beneficios .bx-prev.disabled,#beneficios .bx-next.disabled{display: none}
#beneficios .bx-prev,#beneficios .bx-next{ display: inline-block;padding: 0;box-shadow: none;background: #fff;border-radius: 100%;    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%) !important;}
#beneficios .bx-prev{left: -20px;top: 38%;position: absolute;z-index: 999;padding: 10px 16px 10px 13px}
#beneficios .bx-next{right: -20px;top: 38%;position: absolute;z-index: 999;padding: 10px 13px  10px 16px} 

.beneficios >div{width: 18%;margin: 1%;}

@media (max-width: 1200px) {

}

@media (max-width: 1140px) {

}

@media (max-width: 992px) {
    .navbar-collapse {
        position: absolute;
        left: 0;
        width: 100%;
        top: 79px;
        background: #fff;
        padding-bottom: 10px;
    }

    .navbar {
        padding-bottom: 10px
    }

    #banners h2 {
        color: #fff;
        font-size: 40px
    }
    .form-sms .input-group > .form-control:not(:last-child),.form-sms button,.form-sms .input-group-prepend{width: 100%;border-radius: 0!important;}
    .beneficios >div{width: 49%;margin: 1%;}
}

@media (max-width: 768px) {

}

@media (max-width: 576px) {
    #banners h2 {
        color: #fff;
        font-size: 30px
    }
    footer h3{font-size: 18px;}

}