﻿* {
    margin: 0;
    padding: 0;
    outline: 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

code, input, isindex, kbd, listing, plaintext, pre, samp, select, textarea, tt, var, xmp {
    font: inherit;
    white-space: normal
}

address, cite, dfn, em, i, var {
    font-style: normal
}

a, a img, abbr, acronym, applet, fieldset, form, iframe, img, object, table {
    border: none;
    text-decoration: none
}

caption, center, td, th {
    text-align: left;
    vertical-align: middle
}

q {
    quotes: "" ""
}

dir, menu, ol, ul {
    list-style: none
}

a {
    color: inherit
}

font {
    color: inherit !important;
    font: inherit !important
}

blink {
    text-decoration: none
}

nobr {
    white-space: normal
}

.clear {
    clear: both;
    display: block
}

a, abbr, address, b, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, kbd, label, legend, li, object, ol, p, pre, q, samp, small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline
}

body {
    line-height: 1;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #5d7082;
    font-weight: 400;
    background: #fff
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

article, aside, dialog, figure, footer, header, nav, section {
    display: block;
    margin: 0;
    position: relative;
    padding: 0;
    z-index: 2
}

strong {
    font-weight: 700
}

input[type=button] {
    transition: background-color 1s ease
}

    input[type=button]:hover {
        background-color: #ffca28
    }

input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {
    background-color: #fff !important
}

body {
    font-family: Roboto,sans-serif;
    font-weight: 300;
    font-size: 14px
}

h1, h3, h4, h5, h6 {
    font-weight: 700
}

h2 {
    font-family: Montserrat,Helvetica,Arial,sans-serif;
    font-size: 40px
}

.voltarTopo {
    display: block;
    height: 100px;
    width: 100px;
    background: #0f293c;
    color: #fff;
    cursor: pointer;
    padding: 20px;
    text-align: center;
    position: fixed;
    z-index: 99;
    right: 10px;
    bottom: 10px;
    font-size: 10px;
    border-radius: 10px
}

    .voltarTopo svg {
        display: block;
        width: 20px;
        margin: 5px auto 15px;
        transform: rotate(180deg)
    }

#myVideo {
    position: fixed;
    right: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: 1
}

.header {
    display: table;
    width: 100%;
    height: 100vh;
    z-index: 99
}

.content {
    display: table;
    width: 90%;
    margin: 0 auto
}

.header nav {
    position: fixed;
    top: 0;
    left: 2%;
    display: flex;
    flex-wrap: nowrap;
    padding: 15px 2%;
    margin: 0;
    width: 96%;
    height: 80px;
    border-bottom: 2px solid #fff;
    transition: all ease-in-out .3s
}

    .header nav ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        position: relative;
        z-index: 100
    }

        .header nav ul li {
            width: auto;
            height: 50px;
            display: flex;
            align-items: center;
            flex-grow: 1
        }

            .header nav ul li:last-child {
                justify-content: flex-end
            }

                .header nav ul li:last-child a {
                    line-height: normal;
                    margin-top: 6px;
                    cursor: pointer
                }

                .header nav ul li:last-child svg {
                    height: 20px
                }

            .header nav ul li a {
                color: #fff;
                font-size: 14px;
                padding: 0;
                text-align: center;
                width: 100px;
                transition: all .3s ease-out;
                height: 30px;
                margin-top: 15px
            }

                .header nav ul li a:hover:after {
                    content: "";
                    display: block;
                    position: relative;
                    height: 8px;
                    width: 8px;
                    border-radius: 5px;
                    background: #fff;
                    margin: 7px auto 0;
                    transition: all .3s ease-out
                }

            .header nav ul li.lnkLogin {
                border-left: 2px solid #fff;
                padding-left: 30px;
                margin-left: 10px;
                flex-grow: 2;
                justify-content: flex-end
            }

                .header nav ul li.lnkLogin a {
                    margin-top: 0;
                    width: auto;
                    cursor: pointer;
                    float: right;
                    height: 40px;
                    line-height: 35px;
                    background: 0 0;
                    font-size: 14px;
                    border-radius: 20px;
                    border: 2px solid #fff;
                    padding: 0 40px;
                    transition: all .3s ease-out;
                    font-weight: 700
                }

                    .header nav ul li.lnkLogin a:hover:after, .header nav ul li:last-child a:hover:after {
                        display: none
                    }

.header h1 {
    float: left;
    padding: 5px 60px 0 30px
}

    .header h1 svg {
        display: block;
        height: 50px
    }

.header svg {
    fill: #fff;
    transition: all ease-in-out .3s
}

.header nav.on {
    left: 0;
    width: 100%;
    padding: 15px 4%;
    height: 80px;
    background: #5e768e;
    border-bottom: 2px solid #fff
}

    .header nav.on ul li a {
        color: #fff
    }

    .header nav.on svg {
        fill: #fff
    }

.boxBanner1 {
    display: flex;
    height: 400px;
    width: 96%;
    color: #fff;
    margin-left: 2%;
    padding-left: 20px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: nowrap;
    margin-top: 25vh
}

    .boxBanner1 h3 {
        margin: 20px 0 30px;
        font-size: 20px;
        font-weight: 300
    }

    .boxBanner1 a {
        float: right;
        height: 45px;
        line-height: 45px;
        background: #ff9f00;
        font-size: 15px;
        border-radius: 25px;
        padding: 0 35px;
        transition: all .3s ease-out;
        font-weight: 700
    }

.voltarTopo {
    display: table;
    background: #fff;
    padding: 20px;
    position: fixed;
    z-index: 100000;
    bottom: 10px;
    right: 10px;
    color: #000
}

#comofunciona {
    display: table;
    width: 100%;
    background: #fff;
    overflow: hidden
}

    #comofunciona > svg {
        display: block;
        width: 100%;
        margin-top: 50px
    }

    #comofunciona h2 {
        text-align: center;
        width: 100%;
        color: #5e768e;
        margin: 100px 0 40px
    }

        #comofunciona h2:after {
            content: "";
            display: block;
            clear: both;
            margin: 10px auto;
            height: 5px;
            width: 110px;
            background: #ff9f00
        }

    #comofunciona .passo {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        justify-content: center;
        align-items: flex-start;
        padding: 10px
    }

        #comofunciona .passo.p1 section > div, #comofunciona .passo > div {
            width: 290px;
            margin: 0 5px;
            text-align: center;
            font-size: 16px;
            transition: all ease-in-out .3s;
            position: relative;
            z-index: 10
        }

        #comofunciona .passo.p1 section {
            display: flex;
            flex-wrap: nowrap;
            width: 100%;
            justify-content: center;
            align-items: flex-start;
            padding: 10px;
            position: absolute;
            z-index: 900
        }

            #comofunciona .passo.p1 section > div:first-child strong, #comofunciona .passo.p1 section > div:last-child strong {
                color: #7da4c5;
                background: #fff;
                border-radius: 20px;
                box-shadow: 4px 3px 10px 1px rgba(0,0,0,.35);
                padding: 10px 0;
                margin-bottom: 0
            }

            #comofunciona .passo.p1 section > div:first-child, #comofunciona .passo.p1 section > div:last-child {
                width: 310px;
                padding: 20px 10px 0;
                transition: all ease-in-out .3s
            }

            #comofunciona .passo.p1 section > div {
                width: 270px
            }

        #comofunciona .passo.p1 {
            height: 219px;
            z-index: 11
        }

            #comofunciona .passo.p1.on section > div:first-child, #comofunciona .passo.p1.on section > div:last-child {
                background: #fff;
                background: linear-gradient(90deg,rgba(255,255,255,0) 0,#fff 5%,#fff 95%,rgba(255,255,255,0) 100%)
            }

            #comofunciona .passo.p1 section > div svg {
                height: 150px;
                margin-bottom: 10px;
                transition: all ease-in-out .3s
            }

        #comofunciona .passo.p2 > div img {
            display: block;
            height: 150px;
            margin: 0 auto
        }

        #comofunciona .passo.p3 > div img.dot {
            display: block;
            height: 150px;
            margin: 0 auto
        }

        #comofunciona .passo.p3 > div img {
            display: block;
            height: 200px;
            margin: 160px auto 0
        }

        #comofunciona .passo.p4 > div svg {
            height: 120px;
            margin-bottom: 10px
        }

        #comofunciona .passo.p5 > div img {
            display: block;
            height: 220px;
            margin: 0 auto
        }

        #comofunciona .passo.p5 > div > strong {
            padding-top: 90px
        }

        #comofunciona .passo.p6 > div svg {
            height: 200px;
            margin-bottom: 10px
        }

        #comofunciona .passo div strong {
            display: block;
            width: 100%;
            margin-bottom: 10px
        }

        #comofunciona .passo div .moreInfo {
            font-size: 14px;
            margin: 30px 15px 0;
            position: relative;
            background: #fff;
            padding: 20px 15px;
            border-radius: 1.1em;
            box-shadow: 2px 4px 10px 0 rgba(0,0,0,.35)
        }

            #comofunciona .passo div .moreInfo:after {
                content: '';
                position: absolute;
                top: 0;
                left: 50%;
                width: 28px;
                height: 20px;
                background: url(img/dot.png) no-repeat;
                border-top: 0;
                margin-left: -14px;
                margin-top: -20px
            }

            #comofunciona .passo div .moreInfo strong {
                color: #ff9f00
            }

        #comofunciona .passo.p6 div .moreInfo {
            color: #fff;
            background: #5e768e;
            font-size: 14px
        }

            #comofunciona .passo.p6 div .moreInfo:after {
                background: url(img/dot2.png) no-repeat
            }

.cloud {
    display: block;
    opacity: 1;
    position: absolute;
    z-index: 1
}

    .cloud.cld1 {
        margin-top: 50px;
        height: 80px;
        animation: movCloud1 40s linear infinite
    }

    .cloud.cld2 {
        margin-top: 400px;
        height: 50px;
        animation: movCloud2 45s linear infinite
    }

    .cloud.cld3 {
        margin-top: 800px;
        height: 70px;
        animation: movCloud3 30s linear infinite
    }

    .cloud.cld4 {
        margin-top: 1200px;
        height: 60px;
        animation: movCloud1 50s linear infinite
    }

    .cloud.cld5 {
        margin-top: 1500px;
        height: 90px;
        animation: movCloud2 40s linear infinite
    }

@keyframes movCloud1 {
    0% {
        margin-left: 30%;
        opacity: 1
    }

    60% {
        margin-left: 120%;
        opacity: 1
    }

    61% {
        margin-left: 120%;
        opacity: 0
    }

    62% {
        margin-left: -50%;
        opacity: 0
    }

    63% {
        margin-left: -50%;
        opacity: 1
    }

    100% {
        margin-left: 30%;
        opacity: 1
    }
}

@keyframes movCloud2 {
    0% {
        margin-left: 10%;
        opacity: 1
    }

    60% {
        margin-left: 120%;
        opacity: 1
    }

    61% {
        margin-left: 120%;
        opacity: 0
    }

    62% {
        margin-left: -50%;
        opacity: 0
    }

    63% {
        margin-left: -50%;
        opacity: 1
    }

    100% {
        margin-left: 10%;
        opacity: 1
    }
}

@keyframes movCloud3 {
    0% {
        margin-left: 70%;
        opacity: 1
    }

    60% {
        margin-left: 120%;
        opacity: 1
    }

    61% {
        margin-left: 120%;
        opacity: 0
    }

    62% {
        margin-left: -50%;
        opacity: 0
    }

    63% {
        margin-left: -50%;
        opacity: 1
    }

    100% {
        margin-left: 70%;
        opacity: 1
    }
}

#numeros {
    display: table;
    width: 100%;
    min-height: 960px;
    margin-top: -121px;
    background-image: url(img/bg-nossos_numeros.png);
    background-repeat: no-repeat;
    background-size: cover
}

    #numeros h2 {
        text-align: center;
        width: 100%;
        color: #fff;
        margin: 100px 0 40px
    }

        #numeros h2:after {
            content: "";
            display: block;
            clear: both;
            margin: 10px auto;
            height: 5px;
            width: 110px;
            background: #ff9f00
        }

    #numeros ul.vant {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        flex-wrap: nowrap;
        width: 100%;
        margin-top: 50px
    }

        #numeros ul.vant li {
            padding: 30px 20px;
            border-right: 1px solid #fff;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
            color: #fff;
            width: 16%
        }

            #numeros ul.vant li:last-child {
                border-right: none
            }

            #numeros ul.vant li strong {
                color: #ff9f00;
                width: 100%;
                font-size: 20px;
                display: block;
                padding: 2px 0;
                text-align: center
            }

            #numeros ul.vant li img {
                height: 40px;
                margin-bottom: 15px
            }

    #numeros .slider {
        margin: 80px auto 0
    }

        #numeros .slider img {
            display: block;
            margin: 0 auto;
            max-width: 1005px
        }

#depoimentos {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    width: 100%;
    background: #fff;
    padding: 70px 0 20px
}

    #depoimentos > div {
        width: 50%
    }

    #depoimentos h2 {
        padding-left: 30px;
        font-weight: 300;
        font-size: 25px;
        margin: 0 0 0 586px;
        position: absolute;
        top: 100px
    }

        #depoimentos h2 strong {
            display: inline-block;
            font-weight: 900;
            font-size: 50px;
            margin-left: -25px
        }

        #depoimentos h2 span {
            padding-left: 20px
        }

    #depoimentos .slider {
        margin: 20px auto 0;
        width: 100%;
        max-width: 100vw
    }

        #depoimentos .slider .qot {
            display: inline-block;
            float: left;
            margin-top: 160px;
            margin-right: 15px;
            height: 60px;
            width: 80px
        }

        #depoimentos .slider p {
            font-size: 16px;
            float: left;
            font-style: italic;
            margin-top: 160px;
            display: inline-block;
            width: 400px;
            line-height: 20px
        }

            #depoimentos .slider p span {
                padding-top: 15px;
                display: table;
                font-style: normal;
                width: 100%;
                font-size: 14px;
                color: #adadad
            }

                #depoimentos .slider p span strong {
                    font-weight: 700;
                    font-size: 21px;
                    color: #737373
                }

        #depoimentos .slider .dep {
            display: block;
            margin: 0 15px 0 0;
            float: left
        }

        #depoimentos .slider .imgMask {
            width: 585px;
            float: left
        }

        #depoimentos .slider .slick-arrow {
            display: none !important
        }

    #depoimentos .slick-dots {
        text-align: left;
        width: auto;
        position: absolute;
        margin-left: 45%;
        bottom: 30px
    }

        #depoimentos .slick-dots li button {
            border: 1px solid #5d7082
        }

        #depoimentos .slick-dots li.slick-active button {
            background: #5d7082
        }

#sobrenos {
    display: table;
    padding: 100px 20px 40px;
    background: url(img/br-quemsomos.jpg) top center;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    height: 1100px;
    color: #fff
}

    #sobrenos h2 {
        text-align: center;
        width: 100%;
        margin: 0 0 80px 0
    }

        #sobrenos h2:after {
            content: "";
            display: block;
            clear: both;
            margin: 10px auto;
            height: 5px;
            width: 110px;
            background: #ff9f00
        }

    #sobrenos div {
        float: right;
        width: 700px;
        padding: 25px;
        margin: 0 15px;
        font-size: 20px;
        border-radius: 15px;
        background: rgba(119,190,215,.85);
        border: 1px solid #fff
    }

        #sobrenos div p {
            padding-bottom: 15px;
            line-height: 25px
        }

#valores {
    display: table;
    padding: 100px 20px 20px;
    background: #4F6275;
    width: 100%;
    color: #fff
}

    #valores h2 {
        text-align: center;
        width: 100%;
        margin: 0 0 80px 0
    }

        #valores h2:after {
            content: "";
            display: block;
            clear: both;
            margin: 10px auto;
            height: 5px;
            width: 110px;
            background: #ff9f00
        }

  /*  #valores div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: flex-start
    }*/

        #valores div h3 {
            width: 100%;
            text-align: center;
            font-weight: 300;
            margin-bottom: 80px;
            font-size: 16px;
            padding: 0 10px
        }

            #valores div h3 svg {
                width: 150px;
                fill: #fff;
                margin-bottom: 20px
            }

.ourValues {
    width: 83vw;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#valores div section {
    margin: 0 30px 40px;
    width: 350px;
    padding: 15px 30px;
    border: 1px solid #fff;
    height: 110px;
    border-radius: 150px;
    text-align: left
}

            #valores div section img {
                height: 80px;
                float: left;
                margin-left: -60px;
                margin-right: 20px
            }

            #valores div section h4 {
                margin: 4px 0 5px
            }

            #valores div section:nth-child(2) {
                transition-delay: .5s
            }

                #valores div section:nth-child(2) img {
                    height: 60px;
                    margin: 5px 20px 0 -70px
                }

            #valores div section:nth-child(3) {
                transition-delay: 1s
            }

            #valores div section:nth-child(4) {
                transition-delay: 1.5s
            }

            #valores div section:nth-child(5) {
                transition-delay: 2s
            }

            #valores div section:nth-child(6) {
                transition-delay: 2.5s
            }

                #valores div section:nth-child(6) img {
                    height: 60px;
                    margin: 5px 20px 0 -70px
                }

#sejafreto {
    display: table;
    padding: 20px 20px;
    width: 100%;
    background-color: #fff;
    color: #5d7082
}

    #sejafreto h2 {
        text-align: center;
        width: 100%;
        color: #5d7082;
        margin: 80px 0 40px
    }

        #sejafreto h2:after {
            content: "";
            display: block;
            clear: both;
            margin: 10px auto;
            height: 5px;
            width: 110px;
            background: #ff9f00
        }

    #sejafreto h3 {
        text-align: center;
        font-weight: 300;
        font-size: 17px;
        padding-bottom: 20px;
        line-height: 20px
    }

        #sejafreto h3 strong {
            font-weight: 700
        }

    #sejafreto svg {
        height: 120px;
        margin-bottom: 30px
    }

    #sejafreto div {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start
    }

        #sejafreto div section p {
            padding-bottom: 40px;
            font-size: 14px;
            text-align: center
        }

        #sejafreto div section {
            width: 520px;
            padding: 10px 40px 40px;
            text-align: center
        }

            #sejafreto div section:first-child {
                border-right: 2px solid #bebebe
            }

                #sejafreto div section:first-child span {
                    padding-bottom: 10px;
                    float: left;
                    width: 100%
                }

        #sejafreto div #contactSentLoader img {
            display: block;
            height: 80px;
            border-radius: 10px;
            margin: 0 auto
        }

    #lnkGooglePlay2, #sejafreto #lnkGooglePlay {
        cursor: pointer
    }

#contactSentErrorMsg, #contactSentSuccessMsg {
    font-size: 18px;
    font-weight: 500
}

#contactSentErrorMsg {
    color: #fc6262
}

#contactSentSuccessMsg {
    color: #ed9b4a
}

#sejafreto div section input[type=text] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #c8c6c6;
    font-size: 12px;
    width: 100%;
    height: 35px;
    border-radius: 20px;
    padding: 5px 15px;
    color: #5d7082;
    margin-bottom: 10px;
    box-shadow: none !important
}

#sejafreto div section .btn {
    margin: 10px auto;
    width: 200px;
    border: none
}

#politicaPrivacidade, #termosDeUso {
    padding: 15px;
}

    #politicaPrivacidade > div,
    #termosDeUso > div {
        position: relative;
        display: flex;
        flex-direction: column;
        max-width: 60vw;
        margin-right: auto;
        margin-left: auto;
    }

#politicaPrivacidade > div .divTableCookies {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    flex-basis: auto;
}

        #politicaPrivacidade > div table {
            font-family: Roboto,sans-serif;
            border-collapse: collapse;
            width: 70%;
            /*margin-left: 15vw;*/
        }

        #politicaPrivacidade > div  table  td, #politicaPrivacidade  div  table  th {
            border: 1px solid #ddd;
            padding: 8px;
            line-height:20px
        }

        #politicaPrivacidade > div  table  tr:nth-child(even) {
            background-color: #f2f2f2;
        }

            #politicaPrivacidade > div table th {
                padding-top: 12px;
                padding-bottom: 12px;
                text-align: left;
                background-color: #5e768e;
                color: white;
            }
        #politicaPrivacidade > div ul,
        #termosDeUso  > div ul{
            display: flex;
            flex-wrap: nowrap;
            margin: 50px 0 40px 0;
        }

            #politicaPrivacidade > div ul li:first-child::after,
            #termosDeUso > div ul li:first-child::after,
            #politicaPrivacidade > div ul li.separador-link::after {
                content: "";
                content: "";
                border: solid;
                border-width: 0 2px 2px 0;
                display: inline-block;
                padding: 3px;
                margin: 0 5px 0 5px;
                transform: rotate(-45deg);
                -webkit-transform: rotate(-45deg);
            }

        #politicaPrivacidade > div h1,
        #termosDeUso > div h1 {
            font-size: 28px;
            font-weight: 700;
            line-height: 32px;
            margin: 0 0 30px;
            text-transform: uppercase;
        }

        #politicaPrivacidade > div h2,
        #termosDeUso > div h2 {
            font-family: Roboto,sans-serif;
            font-size: 19px;
            font-weight: 700;
            line-height: 26px;
            margin: 30px 0 20px;
            text-transform: uppercase;
        }

        #politicaPrivacidade > div p,
        #termosDeUso > div p {
            margin: 0 0 25px 0;
            font-size: 16px;
            font-weight: 300;
            line-height: 25px;
        }

    .btn {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        display: block;
        height: 40px;
        cursor: pointer;
        line-height: 40px;
        background: #ff9f00;
        color: #fff;
        font-size: 15px;
        border-radius: 20px;
        padding: 0 30px;
        transition: all .3s ease-out;
        font-weight: 700
    }

    .btn:hover {
        background: #ffca28 !important
    }

.footer {
    background: #5d7082;
    color: #fff;
    padding: 20px 30px;
    display: table;
    width: 100%;
    font-size: 12px
}

    .footer section {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        padding: 20px 0 0 0;
        border-top: 2px solid #fff;
        margin-top: 15px;
    }

        /*.footer section div:first-child {
            padding: 15px 20px;
            border-right: 2px solid #fff
        }*/

            .footer section div:first-child svg {
                height: 35px;
                fill: #fff
            }

        .footer section div:last-child {
            padding: 15px 20px;
            font-size: 10px;
            display: flex;
            align-items: center;
            font-size: 14px
        }

            .footer section div:last-child svg {
                display: inline-block;
                height: 20px;
                fill: #fff;
                float: right;
                margin-left: 15px
            }

    .footer .content {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        align-content: stretch;
        width: 100%;
        flex-wrap: nowrap;
        padding: 20px;
    }

        .footer .content > div {
            margin-right: 40px
        }

            .footer .content > div h4 {
                font-size: 14px;
                font-weight: 900
            }

            .footer .content > div p {
                line-height: 20px
            }

            .footer .content > div:first-child {
                display: flex;
                border-right: 2px solid #fff;
                width: 250px !important
            }

            .footer .content > div:nth-child(4) {
                display: flex;
                flex-direction: column;
                flex-grow: 3;

            }

            .footer .content > div img {
                width: 200px;
                display: block;
                margin-top: 10px
            }

            .footer .content > div:last-child {
                /*width: 80px;*/
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-right: 0
            }

            .footer .content > div svg {
                fill: #fff;
                width: 80px
            }

            .footer .content > div svg:first-child {
                width: 200px
            }

    .footer .optanon-show-settings-popup-wrapper .optanon-show-settings-middle {
        background: transparent !important;
        border: none !important;
        height: auto !important;
        padding-top:0 !important;
    }

    .footer .optanon-show-settings-popup-wrapper .optanon-show-settings-left,
    .footer .optanon-show-settings-popup-wrapper .optanon-show-settings-right {
        display:none;
    }

    .footer .optanon-show-settings-popup-wrapper .optanon-show-settings-middle a.optanon-show-settings {
        color: #fff !important;
        line-height: 20px;
        font-weight: normal;
        font-size: 12px;
    }

.anim {
    position: relative;
    margin: 0 auto
}

.bounce-up * {
    opacity: 0;
    transition: all .7s ease-out;
    transform: translate3d(0,100px,0);
    backface-visibility: hidden
}

.bounce-up.in-view * {
    opacity: 1;
    transform: translate3d(0,0,0)
}

.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 90%;
    max-width: 90vw
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0
}

    .slick-list:focus {
        outline: 0
    }

    .slick-list.dragging {
        cursor: pointer;
        cursor: hand
    }

.slick-slider .slick-list, .slick-slider .slick-track {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto
}

    .slick-track:after, .slick-track:before {
        display: table;
        content: ''
    }

    .slick-track:after {
        clear: both
    }

.slick-loading .slick-track {
    visibility: hidden
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px
}

[dir=rtl] .slick-slide {
    float: right
}

.slick-slide img {
    display: block
}

.slick-slide.slick-loading img {
    display: none
}

.slick-slide.dragging img {
    pointer-events: none
}

.slick-initialized .slick-slide {
    display: block
}

.slick-loading .slick-slide {
    visibility: hidden
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent
}

.slick-arrow.slick-hidden {
    display: none
}

.slick-loading .slick-list {
    background: #fff url(ajax-loader.gif) center center no-repeat
}

.slick-next, .slick-prev {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: none !important;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0,-50%);
    -ms-transform: translate(0,-50%);
    transform: translate(0,-50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: 0;
    background: 0 0
}

    .slick-next:focus, .slick-next:hover, .slick-prev:focus, .slick-prev:hover {
        color: transparent;
        outline: 0;
        background: 0 0
    }

        .slick-next:focus:before, .slick-next:hover:before, .slick-prev:focus:before, .slick-prev:hover:before {
            opacity: 1
        }

    .slick-next.slick-disabled:before, .slick-prev.slick-disabled:before {
        opacity: .25
    }

    .slick-next:before, .slick-prev:before {
        font-family: slick;
        font-size: 20px;
        line-height: 1;
        opacity: .75;
        color: #fff;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale
    }

.slick-prev {
    left: -25px
}

[dir=rtl] .slick-prev {
    right: -25px;
    left: auto
}

.slick-prev:before {
    content: '';
    background-image: url(img/SVG/esq.svg);
    display: block;
    height: 50px;
    width: 20px;
    background-repeat: no-repeat;
    background-size: contain
}

[dir=rtl] .slick-prev:before {
    content: '→'
}

.slick-next {
    right: -25px
}

[dir=rtl] .slick-next {
    right: auto;
    left: -25px
}

.slick-next:before {
    content: '';
    background-image: url(img/SVG/dir.svg);
    display: block;
    height: 50px;
    width: 20px;
    background-repeat: no-repeat;
    background-size: contain
}

[dir=rtl] .slick-next:before {
    content: '←'
}

.slick-dotted.slick-slider {
    margin-bottom: 30px
}

.slick-dots {
    position: absolute;
    bottom: -55px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center
}

    .slick-dots li {
        position: relative;
        display: inline-block;
        width: 13px;
        height: 20px;
        margin: 0 10px;
        padding: 0;
        cursor: pointer
    }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 10px;
            height: 10px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: 0;
            background: 0 0;
            border: 1px solid #fff;
            border-radius: 10px
        }

            .slick-dots li button:focus, .slick-dots li button:hover {
                outline: 0
            }

                .slick-dots li button:focus:before, .slick-dots li button:hover:before {
                    opacity: 1
                }

            .slick-dots li button:before {
                font-family: slick;
                font-size: 6px;
                line-height: 20px;
                position: absolute;
                top: 0;
                left: 0;
                width: 20px;
                height: 20px;
                content: '•';
                text-align: center;
                opacity: .25;
                color: #000;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale
            }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            color: #000
        }

        .slick-dots li.slick-active button {
            background: #fff
        }



.slideshow-container {
    max-width: 1000px;
    position: relative;
    margin: auto;
    margin-top: 80px;
    height: 160px;
    margin-bottom: 40px;
 
}

.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    /* margin-top: -22px;*/
    margin-top: -45px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}


.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

.slideImg {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}

.dott {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    .active, .dott:hover {
        background-color: #717171;
    }


.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}




@media (max-width:480px) {
    #myVideo {
        height: 100vh;
        width: auto;
        right: auto;
        left: -140%
    }

    .header h1 {
        padding-left: 0;
        margin-left: 60px;
        position: fixed;
        z-index: 601
    }

        .header h1 svg {
            height: 38px
        }

    .header nav, .header nav.on {
        padding: 15px 2%;
        height: 70px
    }

        .header nav.on {
            padding: 15px 4%
        }

        .header nav div {
            display: block;
            background: 0 0;
            border: none;
            z-index: 601;
            cursor: pointer;
            height: 38px;
            width: 38px;
            margin: 0 10px 0 0;
            position: fixed;
            padding: 7px 5px
        }

            .header nav div span, .header nav div:after, .header nav div:before {
                display: block;
                height: 4px;
                width: 28px;
                background: #fff;
                transition: all ease-in-out .3s
            }

            .header nav div:after, .header nav div:before {
                content: ""
            }

            .header nav div span {
                margin: 6px 0
            }

            .header nav div.on span {
                opacity: 0
            }

            .header nav div.on:after {
                transform: rotate(-45deg);
                margin-top: -20px
            }

            .header nav div.on:before {
                transform: rotate(45deg);
                margin-top: 10px
            }

        .header nav ul {
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            height: 100vh;
            flex-direction: column;
            width: 100%;
            background: #5e768e;
            z-index: 9;
            padding-top: 80px
        }

            .header nav ul.open {
                display: flex
            }

            .header nav ul li {
                flex-grow: 0;
                width: 100%
            }

                .header nav ul li.lnkLogin {
                    flex-grow: 0
                }

                .header nav ul li a {
                    width: 100%;
                    line-height: 40px;
                    padding: 6px 5px;
                    margin-top: 0
                }

                .header nav ul li.lnkLogin {
                    border-left: 0;
                    margin: 30px 0 0 0;
                    border-top: 1px solid #fff;
                    padding: 20px 0 0;
                    justify-content: center;
                    height: 80px
                }

    .header h2 {
        width: 90%;
        font-size: 10vw
    }

    .header h3 {
        width: 90%;
        font-size: 5vw
    }

    #comofunciona h2 {
        font-size: 10vw
    }

    #comofunciona .passo.p1 section {
        padding: 30px 0 0;
        background: linear-gradient(0deg,rgba(255,255,255,0) 0,#fff 10%,#fff 90%,rgba(255,255,255,0) 100%)
    }

    #comofunciona .passo.p1 div:nth-child(2), #comofunciona .passo.p2 div:nth-child(2), #comofunciona .passo.p3 div:nth-child(2), #comofunciona .passo.p5 div:nth-child(2) {
        display: none
    }

    #comofunciona .passo.p1 section > div:first-child, #comofunciona .passo.p1 section > div:last-child {
        margin: 0 0;
        padding: 20px 2px 0 !important
    }

    #comofunciona .passo.p1 section > div, #comofunciona .passo > div {
        width: 45%
    }

        #comofunciona .passo.p1 section > div:first-child svg {
            height: 125px
        }

        #comofunciona .passo.p1 section > div:last-child svg {
            height: 112px;
            margin-bottom: 23px
        }

    #comofunciona .passo.p2 > div img {
        height: 70px
    }

    #comofunciona .passo.p4 > div, #comofunciona .passo.p6 > div {
        width: 100%
    }

        #comofunciona .passo.p4 > div:before, #comofunciona .passo.p6 > div:before {
            content: "";
            display: block;
            background-image: url(img/SVG/dot-2.svg);
            background-size: cover;
            width: 50%;
            height: 80px;
            margin: 0 auto 10px
        }

        #comofunciona .passo.p4 > div:after {
            content: "";
            display: block;
            background-image: url(img/SVG/dot-2.svg);
            background-size: cover;
            width: 50%;
            height: 80px;
            margin: 0 auto 10px;
            transform: rotate(180deg)
        }

    #comofunciona .passo.p5 > div > strong {
        padding-top: 0
    }

    #numeros {
        background-position: top center;
        margin-top: -24px
    }

        #numeros h2 {
            font-size: 10vw
        }

        #numeros ul.vant {
            flex-wrap: wrap
        }

            #numeros ul.vant li {
                width: 50%;
                border-right: none
            }

        #numeros .slider {
            margin: 0 0 100px 0
        }

        #numeros .slick-slider {
            width: 100%;
            max-width: 100vw
        }

        #numeros .slider h4.ban1, #numeros .slider h4.ban2, #numeros .slider h4.ban3 {
            width: 100%;
            font-size: 5vw;
            margin: 20px 0;
            position: relative
        }

    #depoimentos {
        flex-wrap: wrap
    }

        #depoimentos h2 {
            position: relative;
            margin: 20px 0 0 0;
            padding-left: 0;
            text-align: center;
            top: 0
        }

            #depoimentos h2 strong {
                margin-left: 0
            }

        #depoimentos .slider .imgMask {
            width: 100%
        }

        #depoimentos .slider .qot {
            display: inline-block;
            float: left;
            margin: 10px;
            height: 60px;
            width: 40px
        }

        #depoimentos .slider p {
            margin: 0 5% 0;
            width: 90%
        }

        #depoimentos .slick-dots {
            position: relative;
            bottom: auto;
            text-align: center;
            float: left;
            width: 100%;
            margin: 20px 0
        }

        #depoimentos .slider .dep {
            margin-bottom: 50px
        }

        #depoimentos .slick-slide {
            height: auto
        }

    #sobrenos h2 {
        font-size: 10vw
    }

    #sobrenos div {
        width: 100%;
        margin: 0;
        padding: 25px 10px;
        font-size: 5vw
    }

    #valores {
        padding: 100px 0 40px
    }

        #valores h2 {
            font-size: 10vw
        }

        #valores div section {
            width: 90vw;
            border-radius: 45vw;
            margin: 0 0 40px 0;
            text-align: center
        }

            #valores div section img {
                float: none;
                display: block;
                margin: -35px auto 10px !important;
                height: 40px !important
            }

    #sejafreto h2 {
        font-size: 10vw
    }

    #sejafreto {
        padding: 20px 0 0
    }

        #sejafreto div {
            flex-wrap: wrap
        }

            #sejafreto div section {
                width: 90%;
                padding: 10px 10px 40px
            }

                #sejafreto div section:first-child {
                    border-right: none
                }

                #sejafreto div section img {
                    max-width: 90%
                }

    #politicaPrivacidade,
    #termosDeUso {
        padding: 20px;
    }

        #politicaPrivacidade > div,
        #termosDeUso > div {
            max-width:90vw;
        }

        #politicaPrivacidade > div table {
            width: 100%;
            margin-left: 0;
        }



    .footer {
        padding: 20px 10px
    }

        .footer section div:last-child {
            flex-wrap: wrap;
            padding-right: 0;
            justify-content: flex-end
        }

        .footer .content {
            flex-wrap: wrap;
            justify-content: center;
            padding-bottom:20px;
        }

        .footer section div:first-child {
            padding: 15px 10px 15px 0;
            border-right: none
        }

        .footer .content div {
            margin-right: 0;
            margin-bottom: 20px
        }

            .footer .content div:first-child {
                border-right: none;
                width: auto !important
            }

            .footer .content div:nth-child(2),
            .footer .content div:nth-child(3),
            .footer .content div:nth-child(4) {
                text-align: center;
                width: 100%
            }
}
