/* Resetando os estilos padrões */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Open Sans", sans-serif;
}

body {
    background-color: #e0e0e0;
    color:#333;
}

a {
    color:#831e02;
    text-decoration:none;
}

p {
    font-size:14px;
}

button {
    background: #831e02;
    border: none;
    outline: none;
    color: #fff;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 26px;
    cursor:pointer;
    white-space:nowrap;
    transition:background ease .3s;
}

.loader {
    width:30px;
    height:30px;
    margin:-11px -9px -11px -2px;
}

button.loading {
    pointer-events:none;
    opacity:.6;
}

button:hover {
    background:#531200;
}

button.light {
    background:#eee;
    color:#333;
    border:1px solid #ccc;
}

button.light:hover {
    background:#eaeaea;
}

button.success {
    background:#22BB33;
}

button i {
    font-size:12px;
    margin-left:3px;
}

.page {
    display:flex;
    align-items:center;
    justify-content:center;
}

.info {
    flex:0 0 40%;
    padding:50px 50px 0;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
}

.social {
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
}

.address {
    flex:0 0 auto;
    margin-top:50px;
    text-align:center;
    position:sticky;
    bottom:0;
    background-color: #e0e0e0;
    z-index:2;
    padding:30px 0 50px;
    border-top:1px solid #bbb;
    box-shadow:0px -47px 26px -47px rgba(0,0,0,0.5);
}

.logo {
    width:260px;
    display:block;
    margin:0 auto;
}

.swiper#info {
    width:380px;
    padding:50px 0;
}

.container_form {
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.container_form form {
    right:0;
    transition:right .5s ease 0s;
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
}

.buttons {
    margin-top:40px;
    display:flex;
    gap:25px;
    align-items:center;
    justify-content:center;
    background-color:#e0e0e0;
    position:relative;
    transition:transform ease .5s;
    transform:translateX(0);
}

.buttons:before,
.buttons:after {
    content:'';
    position:absolute;
    width:1px;
    height:50%;
    left:0;
    background:#bbb;
    transform:scaleY(0);
    transition:transform 1s ease .2s;
}

.buttons:before {
    top:0;
    transform-origin:bottom;
}

.buttons:after {
    top:50%;
    transform-origin:top;
}

.button {
    width:88px;
    padding: 12px 18px;
    box-shadow: 12px 12px 24px 0 rgba(0, 0, 0, 0.2), -12px -12px 24px 0 rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius:10px;
    transition: all ease .3s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:15px;
}

.button:active {
    box-shadow: inset 6px 6px 10px 0 rgba(0, 0, 0, 0.2), inset -6px -6px 10px 0 rgba(255, 255, 255, 0.5);
}

.buttons img {
    height:27px;
    display:block;
}

.buttons a  {
    text-decoration:none;
}

.buttons span {
    font-weight:600;
    font-size:14px;
}

.background_container {
    position:relative;
}

/* FORM */
input,
select,
textarea {
    border:1px solid #ddd;
    border-radius:6px;
    padding:10px 15px;
    outline:none;
    font-size:15px;
}

select {   
    cursor:pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    display:block;
    width:100%;
}

.select {
    position:relative;
    width:100%;
}

.select:after {
    content: "\f078";
    position: absolute;
    right: 15px;
    top: calc(50% - 7px);
    font-weight: 900;
    font-family: "Font Awesome 6 Free";
    font-size: 11px;
}

textarea {
    height:100px;
}

.form_buttons {
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:15px;
    margin-bottom:30px;
}

/* SWIPER */
#background {
    position:relative;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    overflow:hidden;
}

#background .swiper {
    width:100%;
    height:100%;
}

#background,
#background * {
    pointer-events:none;
}

#background .swiper-slide {
    background-size:cover;
    background-position:center;
}

#background .swiper:after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    z-index:2;
}

.separator {
    position:relative;
    margin-top:15px;
    text-align:center;
}

.separator:before {
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:100%;
    height:1px;
    background:#aaa;
}

.separator span {
    background:#e0e0e0;
    display:inline-block;
    padding:0 10px;
    position:relative;
    z-index:2;
}

.grecaptcha-badge {
    display:none;
}

@media screen and (max-width:500px){
    .page {
        flex-direction:column;
    }

    #background {
        width:100%;
        flex:0 0 40vh;
        border-bottom-left-radius: 50px;
        border-bottom-right-radius: 50px;
        overflow: hidden;
    }

    #background .swiper {
        width:100%;
        height:40vh;
    }

    .info {
        width:86%;
        margin:-100px auto 0;
        position:relative;
        padding:30px;
        z-index:3;
        background:#e0e0e0;
        border-radius:20px;        
    }

    .logo {
        width:180px;
        margin:0 auto;
        display:block;
    }

    .social, 
    .social > div {
        width:100%;
    }

    .buttons {
        gap:15px;
    }

    .button {
        width:60px;
        box-shadow:4px 6px 22px 0 rgba(0, 0, 0, 0.2), -12px -12px 24px 0 rgba(255, 255, 255, 0.5);
    }

    .buttons img {
        height:22px;
    }
}