* {
        margin: 0;
        padding: 0;
    }
    
    .wrapper {
        margin: 0 auto;
        max-width: 1200px;
    }
    
    /* Geral */
    
    body {
        background-color: #F9FAFD;
        font-family: 'Work Sans', sans-serif;
        overflow: hidden;
    }
    
    /* Cartão */
    
    .cartao {
        color: #fff;
        display: grid;
        font-weight: 300;
        height: 100vh;
        text-align: center;
        text-transform: uppercase;
    }
    
    .cartao .previa {
        align-content: center;
        display: grid;
        justify-content: center;
        padding-bottom: 7%;
        position: relative;
    }
    
    .cartao .previa .proximo-passo {
        align-content: center;
        display: grid;
    }
    
    .cartao .previa .proximo-passo .escolhe-fundo, .cartao .previa .proximo-passo .informacoes-pessoais {
        display: inline;
    }
    
    .cartao .previa .proximo-passo div span, .cartao .previa .proximo-passo i {
        color: #146cf9;
        text-transform: uppercase;
    }
    
    .cartao .previa .proximo-passo div span.numero {
        align-items: center;
        border: 0.1rem solid #146cf9;
        border-radius: 50%;
        display: inline-flex;
        height: 25px;
        justify-content: center;
        padding: 15px;
        width: 25px;
    }
    
    .cartao .previa .proximo-passo div span.numero.preenchido {
        align-items: center;
        background-color: #146cf9;
    }
    
    .cartao .previa .proximo-passo div span.numero.preenchido i {
        color: #fff;
    }
    
    .cartao .previa .botao-finalizar {
        position: absolute;
        bottom: 0;
        width: 100%;
    }
    
    .cartao .previa .botao-finalizar .btn {
        background-color: #538796;
        border-radius: 0px;
        color: #fff;
        display: none;
        font-size: 1.2em;
        padding: 0.5em 0em;
        text-transform: uppercase;
        width: 100%;
    }
    
    .cabecalho .proximo-passo i {
        margin: 0px 10px;
    }
    
    /* Conteúdo do Cartão */
    
    .cartao .conteudo {
        align-content: center;
        background-position: center;
        background-size: cover;
        display: grid;
        padding: 5em 3em;
        position: relative;
    }
    
    .cartao .conteudo .logo {
        padding: 15px;
        position: absolute;
        left: -30;
        top: 0;
        width: 100%;
    }
    
    .cartao .conteudo .logo img {
        float: right;
        width: 50px;
    }
    
    .cartao .conteudo .segura {
        display: grid;
        justify-content: center;
        padding: 3em;
    }
    
    .cartao .imagem img {
        border: 3px solid #445E9B;
        border-radius: 50%;
        margin-bottom: 1em;
        width: 75px;
    }
    
    .cartao .texto .nome {
        display: block;
        font-size: 1.5em;
        font-weight: 700;
        margin-bottom: 15px;
        text-transform: capitalize;
    }
    
    .cartao .texto .descricao {
        display: block;
        font-size: 1em;
        font-weight: 200;
        margin-bottom: 1.5em;
        text-transform: none;
    }
    
    .cartao .texto .botao {
        border: 1px solid #fff;
        font-size: 0.75em;
        padding: 1em 2em;
    }
    
    .cartao .numeros {
        display: grid;
        grid-gap: 1em;
        grid-template-columns: 1fr 1fr 1fr;
        margin-top: 4em;
    }
    
    .cartao .links {
        display: grid;
        grid-gap: 1em;
        grid-template-columns: 1fr 1fr 1fr;
        margin-top: 2em;
    }
    
    .cartao .numeros a, .cartao .links a {
        color: #fff;
        display: block;
        text-decoration: none;
    }
    
    .cartao .numeros a:hover, .cartao .links a:hover {
        text-decoration: none;
    }
    
    .cartao .numeros a i, .cartao .links a i {
        font-size: 2.5em;
        margin-bottom: 0.5em;
    }
    
    .cartao .numeros a span, .cartao .links a span {
        border: 1px solid #fff;
        border-radius: 25px;
        display: block;
        font-size: 0.8em;
        padding: 10px 30px;
    }
    
    .cartao .botoes {
        align-self: flex-start;
    }
    
    .cartao .texto-preto {
        color: #000;
    }
    
    .cartao .texto-preto .botao {
        border: 1px solid #000;
    }
    
    .cartao .texto-preto i {
        color: #000;
    }
    
    .cartao .texto-preto .numeros a span, .cartao .texto-preto .links a span {
        border: 1px solid #000;
        color: #000;
    }
    
    /* Responsivo */
    
    @media (max-width: 768px) {
        
        .cabecalho .col-lg-12 {
            grid-template-columns: 1fr;
            justify-items: center;
        }
        
        .cabecalho .proximo-passo {
            margin-top: 2em;
        }
        
        .passos-cartao {
            padding: 1em 0em;
        }
        
        .cartao .campos .botao {
            display: none;
        }
        
        .cartao .previa {
            padding: 1.5em 0em;
        }
        
        .cartao .previa .proximo-passo {
            margin-bottom: 1.5em;
        }
        
        /* Conteúdo do Cartão */
    
        .cartao .conteudo {
            align-content: center;
            background-position: center;
            background-size: cover;
            display: grid;
            padding: 0 !important;
            position: relative;
        }
        
        .cartao .conteudo .logo {
            padding: 15px;
            position: absolute;
            left: -30;
            top: 0;
            width: 100%;
        }
        
        .cartao .conteudo .logo img {
            float: right;
            width: 50px;
        }
        
        .cartao .conteudo .segura {
            padding: 3em;
        }
        
        .cartao .imagem img {
            border: 3px solid #445E9B;
            border-radius: 50%;
            margin-bottom: 1em;
            width: 85px;
        }
        
        .cartao .texto .nome {
            display: block;
            font-size: 1.25em !important;
            font-weight: 700;
            margin-bottom: 10px;
            text-transform: capitalize;
        }
        
        .cartao .texto .descricao {
            display: block;
            font-size: 1em;
            font-weight: 200;
            margin-bottom: 2em;
            text-transform: none;
        }
        
        .cartao .texto .botao {
            border: 1px solid #fff;
            font-size: 1em;
            padding: 1em 2em;
        }
        
        .cartao .numeros {
            display: grid;
            grid-gap: 1em;
            grid-template-columns: 1fr 1fr 1fr;
            margin-top: 5em;
        }
        
        .cartao .links {
            display: grid;
            grid-gap: 1em;
            grid-template-columns: 1fr 1fr 1fr;
            margin-top: 2em;
        }
        
        .cartao .numeros a, .cartao .links a {
            color: #fff;
            display: block;
            text-decoration: none;
        }
        
        .cartao .numeros a:hover, .cartao .links a:hover {
            text-decoration: none;
        }
        
        .cartao .numeros a i, .cartao .links a i {
            font-size: 3em;
            margin-bottom: 0.5em;
        }
        
        .cartao .numeros a span, .cartao .links a span {
            border: 1px solid #fff;
            border-radius: 25px;
            display: block;
            font-size: 0.75em;
            padding: 5px 10px;
        }
        
        .cartao .botoes {
            align-self: flex-start;
        }
        
        .cartao .texto-preto {
            color: #000;
        }
        
        .cartao .texto-preto .botao {
            border: 1px solid #000;
        }
        
        .cartao .texto-preto i {
            color: #000;
        }
        
        .cartao .texto-preto .numeros a span, .cartao .texto-preto .links a span {
            border: 1px solid #000;
            color: #000;
        }
        
    }
    
    /* Croppie */
    
    .croppie-container .cr-image {
        position: static !important;
    }