@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {

	--bs-primary: #c91615 ;
	--bs-primary-rgb: 201, 22, 21 ;

	--bs-secondary: #fe6130 ;
	--bs-secondary-rgb: 254, 97, 48 ;

    --bs-warning: #FA7E0F ;
	--bs-warning-rgb: 250, 126, 15 ;

	--bs-info: #eade84;
	--bs-info-rgb: 234, 222, 132 ;

	--bs-dark: #510d0d;
	--bs-dark-rgb: 81, 13, 13 ;

	--bs-light: #edddb9 ;
	--bs-light-rgb: 237, 221, 185 ;

	--bs-font-sans-serif: "Montserrat", Arial, sans-serif ;
	--bs-body-font-size: 14px;
	--bs-body-color: #000 ;
	--bs-body-font-weight: 400;

	--bs-link-color: #fff ;
	--bs-link-hover-color: #fe6130;
}

body {
    background-color: var(--bs-primary);
}

.h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5 {
	font-family: "Montserrat", Arial, sans-serif ;
	font-weight: 700;
    text-transform: uppercase;
}

.text-justify {
  text-align: justify !important;
}

.lead {
	font-weight: 400;
}

.btn {
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 36px;
    font-size: 16px;
    padding: 8px 36px;
	font-family: "Montserrat", Arial, sans-serif ;
}

.btn-lg {
    font-size: 20px;
}

.ff-secondary {
	font-family: "Montserrat", Arial, sans-serif ;
}

.bg-dark a,
.bg-primary a,
.bg-img-02 a {
    color: var(--bs-light);
}

.bg-light a,
.bg-info a,
.bg-img-01 a  {
    color: var(--bs-dark);
}

small { font-size: 12px; }

.btn-primary {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-bg: var(--bs-info);
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-info);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: #016BFF;
    --bs-btn-active-border-color: #016BFF;
    --bs-btn-disabled-color: #EEE;
    --bs-btn-disabled-bg: var(--bs-info);
    --bs-btn-disabled-border-color: transparent;
    color: var(--bs-dark)!important;
    box-shadow: 1px 3px 1px var(--bs-secondary);
    background: linear-gradient(125deg, #bc974e, var(--bs-info) 30%, var(--bs-info) 70%, #bc974e);
}
.btn-primary:hover {
    background: linear-gradient(160deg, #bc974e, var(--bs-info) 35%, var(--bs-info) 65%, #bc974e);
    color: var(--bs-primary)!important;
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-dark);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-light);
    --bs-btn-hover-bg: var(--bs-dark);
    --bs-btn-hover-border-color: var(--bs-dark);
    --bs-btn-active-color: var(--bs-light);
    --bs-btn-active-border-color: var(--bs-light);
    --bs-btn-disabled-color: var(--bs-dark);
    --bs-btn-disabled-border-color: var(--bs-dark);
    border-width: 2px;
}

.btn-light {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: White;
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-focus-shadow-rgb: 211,212,213;
    --bs-btn-active-color: var(--bs-primary);
    --bs-btn-active-bg: #fff;
    --bs-btn-active-border-color: #fff;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: #fff;
    --bs-btn-disabled-border-color: #fff;
}

.btn-secondary {
    --bs-btn-color: White;
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-secondary);
    --bs-btn-hover-bg: White;
    --bs-btn-hover-border-color: White;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-color: var(--bs-light);
    --bs-btn-disabled-bg: var(--bs-secondary);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}
.btn-outline-secondary {
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: White;
    --bs-btn-hover-bg: var(--bs-secondary);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-disabled-color: var(--bs-light);
    --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-sm {
    font-size: 14px;
    padding: 8px 24px;
}

.form-label { margin-bottom: .125rem; }

.form-control,
.form-select {
    border-radius: 16px;
    background-color: #FFF4BD;
    border-color: transparent;
    color: Black;
    padding: 12px 20px;
    font-size: 18px;
    box-shadow: inset 1px 3px 5px rgba(0, 0, 0, .2);
}

.form-group label {
    font-weight: 500;
	color: var(--bs-primary);
    max-width:90%;
}

.input-group-text {
    color: var(--bs-light);
    background-color: rgba(0, 0, 0, .5);
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 3rem;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-striped-bg: rgba( 212,164,123, 0.3) ;
}

/* Header */

.bg-header {
    background-color: #EFE9C9CC;
    z-index: 100;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .2);
    padding-top: 6px;
    padding-bottom: 6px;
}

.bg-header .nav-link {
    text-transform: uppercase;
    color: rgba(var(--bs-dark-rgb),1);
    font-weight: 700;
    font-size: 14px;
    transition: .3s all;
}
.bg-header .nav-link:hover {
    color: rgba(var(--bs-dark-rgb),.7);
}
.bg-header .btn {
    padding: 4px 16px;
    font-size: 15px;
}

#topo {
    position: relative;
}

#top_menu {
    position: fixed;
    top: 0;
}

.navbar-brand {
    width: 33px;
    height: 38px;
    background-image: url(../img/logo.png);
    background-size: 105px;
    background-position: left center;
    background-repeat: no-repeat;
    display: inline-block;
}

/* Webdoor */

.bg-webdoor {
    background-image: url(../img/bg-webdoor.png?v2);
    background-position: top 26px center;
    background-size: 580px;
    background-repeat: no-repeat;
    height: 264px;
    position: relative;
}
.webdoor-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/bg-curva-02-mobile.png);
    background-position: bottom center;
    background-size: 560px;
    background-repeat: no-repeat;
    width: 100%;
    height: 48px;
    z-index: 50;
}
.webdoor-conteudo {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../img/webdoor-modelo.png), url(../img/webdoor-selo.png), url(../img/webdoor-brindes.png), url(../img/webdoor-sorteio.png), url(../img/webdoor-1-ano-compras-gratis.png);
    background-position: top 40px left -18px, top 0px center, top 6px right 24px, top 102px right 8px, top 148px center;
    background-size: 141px, 150px, 84px, 106px, 154px;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    z-index: 30;
}

/* Moedas */

#coin_container {
    position: relative;
    width: 100%;
    pointer-events: none;
    overflow: hidden;
}

.coin {
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.coin-1 { background-image: url(../img/coin-1.png); }
.coin-2 { background-image: url(../img/coin-2.png); }
.coin-3 { background-image: url(../img/coin-3.png); }
.coin-4 { background-image: url(../img/coin-4.png); }

.coin-size-1 { width: 40px; height: 40px; z-index: 1; filter: blur(4px); top: -60px; }
.coin-size-2 { width: 60px; height: 60px; z-index: 2; top: -90px; }
.coin-size-3 { width: 70px; height: 70px; z-index: 3; top: -130px; }
.coin-size-4 { width: 180px; height: 180px; z-index: 5; filter: blur(6px); top: -400px; }

/* Animação CSS de queda */
@keyframes fall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0; /* Começa invisível e vai surgindo */
    }
    5% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    100% {
        /* Cai até cruzar a altura total da tela + uma margem */
        transform: translateY(calc(100vh + 400px)) rotate(360deg);
        opacity: 0;
    }
}


/* Content */

.bg-img-01 {
    background-image: url(../img/bg-01.png);
    background-size: 1980px;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: var(--bs-light);
    color: var(--bs-dark);
}

.bg-img-02 {
    background-image: url(../img/bg-02.png);
    background-size: 1980px;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: var(--bs-dark);
    color: White;
}

.bg-primary-degrade {
    background-image: linear-gradient(180deg, transparent 90px, var(--bs-dark) 90px, var(--bs-primary)),
                      url(../img/bg-curva-01.png),
                      url(../img/bg-01.png);
    background-size: cover,
                     1980px,
                     1980px;
    background-position: top center, top 10px center, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-color: var(--bs-dark);
    color: White;
}

.bg-secondary-radial {
    background-image: radial-gradient(#FFB372, transparent);
    background-color: var(--bs-secondary);
    color: var(--bs-dark);
}

.bg-info-degrade {
    background-image: linear-gradient(180deg, #F3C888, #FFFFFF);
    background-position: center;
    background-repeat: no-repeat;
}


.bg-misty {
    background-color: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 1rem;
    padding: 1rem;
    color: White;
}

.bg-inner-header {
    background-image: url(../img/bg-curva-02-mobile.png), url(../img/webdoor-modelo.png),
                      url(../img/webdoor-selo.png), url(../img/webdoor-brindes.png),
                      url(../img/webdoor-sorteio.png), url(../img/webdoor-1-ano-compras-gratis.png),
                      url(../img/bg-inner-header.png);
    background-position: bottom center, bottom left -18px, top 42px left 124px,
                         top 96px right 6px, top 64px right 96px,
                         bottom 22px center, top center;
    background-size: 100%, 138px, 125px, 86px, 112px, 140px, 100%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    height: 224px;
}

.bg-roleta {
    background-image: url(../img/bg-roleta.png);
    background-size: 1920px ;
    background-position: bottom center ;
    background-repeat: no-repeat ;
}

.pull-up-container {
    margin-bottom: -2rem;
}
.pull-up {
    margin-top: -2rem;
}

.rounded-end-6 {
    border-radius: 0 5rem 5rem 0;
    padding: 2.5rem 5rem 2.5rem 0;
}

.box {
	background-color: white ;
	color: black ;
	padding: 3rem 1rem 1rem 1rem;
	border-radius: 8px ;
	margin-bottom: 4rem ;
}

.accordion {
    border-radius: 8px;
}

.accordion-button::after {
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23510d0d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after {
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23510d0d'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-item {
    background-color: transparent;
    border-color: rgba(var(--bs-dark-rgb), .3);
}
.accordion-button {
    color: var(--bs-dark);
    background-color: transparent;
    font-size: 18px;
    font-weight: 700;
}
.accordion-button:not(.collapsed) {
    color: var(--bs-dark);
    background-color: transparent;
	box-shadow: none;
}
.accordion-body {
    color: black;
    background-color: transparent;
	padding-top: 0;
}


.nav-tabs {
    border: none;
}
.nav-tabs .nav-item {
    width: 100% ;
}
.nav-tabs .nav-link {
    background-color: rgba(255, 255, 255, .8);
    color: var(--bs-secondary);
    font-size: 16px;
    border: none;
    padding: 0.75rem 1rem 0.5rem 1rem;
    border-radius: 16px ;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px ;
    width: 100% ;
}
.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    background-color: White;
    box-shadow: 5px 0px 6px rgba(0, 0, 0, 0.125);
    z-index: 2;
    position: relative;
}
.tab-pane {
    background-color: White;
    padding: .5rem;
    border-radius: 8px;
    border: none;
	position: relative;
	z-index: 4;
    max-height: 600px;
    overflow-y: auto;
}

.prize {
    position: relative;
    margin-bottom: 2rem;
}
.prize-content {
    width: 95%;
    margin-left: 5%;
}
.prize-header {
    background: linear-gradient( 180deg, #E39321, #E39321, #FBAE17 ) ;
    border: 2px solid #FBAE17 ;
    border-radius: 16px 16px 0 0 ;
    padding: 8px ;
    margin-left: 3rem;
}
.prize-image {
    position: absolute;
    width: 40%;
    top: -2rem;
}

.bg-rodape-home .order-lg-2 {
    background-color: var(--bs-primary);
}

@keyframes appear {
    0%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes ride-up {
    0%  { opacity: 0; top: 30rem; }
    100% { opacity: 1; top: 27rem; }
}

@keyframes ride-in {
    0%  { opacity: 0; left: 35rem; }
    100% { opacity: 1; left: 30rem; }
}

.shake-x {
    animation: shake-sides 2s infinite;
}

@keyframes shake-sides {
    0%  { margin-left: .25rem; margin-right: 1rem; }
    50% { margin-left: 1.25rem; margin-right: 0; }
    100% { margin-left: .25rem; margin-right: 1rem; }
}


/* Passos */

.passo {
    width: 100%;
    position: relative;
    display: inline-block;
    margin-top: 16px;
    padding: 32px 24px 8px 24px;
    background-color: var(--bs-primary);
    border-radius: 2rem;
    border: 4px dashed var(--bs-dark);
    color: var(--bs-light);
}
.passo-numero {
    position: absolute;
    top: -38px;
    left: 24px;
    width: 54px;
    height: 54px;
    display: block;
    background: linear-gradient(125deg, black, var(--bs-info) 30%, var(--bs-info) 70%, black);
    color: var(--bs-primary);
    border-radius: 50%;
    text-align: center;
    font-weight: 700;
    font-size: 36px;
}

.circle-dark {
    display: inline-block;
    width: 120px;
    height: 120px;
    text-align: center;
    background-color: var(--bs-dark);
    border-radius: 50%;
    padding-top: 28px;
}


/* Lojas */

.brands-swiper {
    height: 110px;
}
.brands-swiper .swiper-slide {
    height: 100px;
    padding: 0;
    text-align: center;
}


/* Footer */

.social a {
    display: inline-flex;
    font-size: 24px;
    background: linear-gradient(125deg, black, var(--bs-info) 30%, var(--bs-info) 70%, black);
    color: var(--bs-dark);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
}
.social a:first-child {
    margin-left: 0;
}
.social a:last-child {
    margin-right: 0;
}

.alert-danger {
    --bs-alert-color: white;
    --bs-alert-bg: var(--bs-danger);
}
.alert-success {
    --bs-alert-color: White;
    --bs-alert-bg: var(--bs-success);
}
.alert-info {
    --bs-alert-color: var(--bs-dark);
    --bs-alert-bg: var(--bs-light);
}

@media (min-width: 576px)
{
    .nav-tabs {
        margin-left: 1rem;
    }
    .nav-tabs .nav-item {
        width: auto ;
    }
    .nav-tabs .nav-link {
        border-radius: 16px 16px 0 0;
        margin-right: 8px;
        margin-bottom: 0px ;
        width: auto ;
    }

    .bg-webdoor {
        background-position: top 26px center;
        background-size: 770px;
        height: 280px;
    }
    .webdoor-footer {
        background-image: url(../img/bg-curva-02.png);
        background-size: 770px;
        height: 32px;
    }
    .webdoor-conteudo {
        top: 50px;
        background-position: top 30px left 0, top 12px center, top 6px right 24px, top 120px right 8px, top 158px center;
        background-size: 176px, 168px, 97px, 118px, 176px;
    }

    .bg-inner-header {
        background-image: url(../img/coin-2.png), url(../img/bg-curva-02.png),
                        url(../img/webdoor-modelo.png), url(../img/webdoor-selo.png), url(../img/webdoor-brindes.png),
                        url(../img/webdoor-sorteio.png), url(../img/webdoor-1-ano-compras-gratis.png), url(../img/bg-inner-header.png);
        background-position: bottom left calc(((100% - 576px) / 2)),
                             bottom center,
                             top 60px left calc(((100% - 576px) / 2) + 50px),
                             top 66px left calc(((100% - 576px) / 2) + 212px),
                             top 100px right calc(((100% - 576px) / 2) + 58px),
                             top 48px right calc(((100% - 576px) / 2) + 186px),
                             top 174px left calc(((100% - 576px) / 2) + 364px),
                             top center ;
        background-size: 56px, 100%, 160px, 146px, 104px, 140px, 172px, 100%;
        height: 248px;
    }
}

@media (min-width: 768px)
{
    .bg-webdoor {
        background-size: 1000px;
        height: 380px;
    }
    .webdoor-footer {
        background-size: 1000px;
        height: 60px;
    }
    .webdoor-conteudo {
        top: 50px;
        background-position: top 97px left 0, top 53px center, top 13px right 55px, top 179px right 8px, top 17px left 19px;
        background-size: 234px, 265px, 143px, 172px, 194px;
    }

    .coin-size-1 { width: 60px; height: 60px; }
    .coin-size-2 { width: 90px; height: 90px; }
    .coin-size-3 { width: 130px; height: 130px; }
    .coin-size-4 { width: 320px; height: 320px; }

    .visible-1,
    .visible-2,
    .visible-3,
    .visible-4,
    .visible-5 {
        opacity: 0 ;
    }

    .animate .visible-1 { animation: appear 0.3s forwards; animation-delay: 0s; }
    .animate .visible-2 { animation: appear 0.3s forwards; animation-delay: 0.2s; }
    .animate .visible-3 { animation: appear 0.3s forwards; animation-delay: 0.4s; }
    .animate .visible-4 { animation: appear 0.3s forwards; animation-delay: 0.6s; }
    .animate .visible-5 { animation: appear 0.3s forwards; animation-delay: 0.8s; }

    .bg-inner-header {
        background-image: url(../img/coin-1.png), url(../img/coin-2.png), url(../img/bg-curva-02.png),
                        url(../img/webdoor-modelo.png), url(../img/webdoor-selo.png), url(../img/webdoor-brindes.png),
                        url(../img/webdoor-sorteio.png), url(../img/webdoor-1-ano-compras-gratis.png), url(../img/bg-inner-header.png);
        background-position: bottom -9px right calc(((100% - 768px) / 2) + 124px),
                             bottom -8px left calc(((100% - 768px) / 2)),
                             bottom center,
                             top 68px left calc(((100% - 768px) / 2) + 60px),
                             top 66px left calc(((100% - 768px) / 2) + 270px),
                             top 100px right calc(((100% - 768px) / 2) + 78px),
                             top 62px right calc(((100% - 768px) / 2) + 242px),
                             top 210px left calc(((100% - 768px) / 2) + 445px),
                             top center;
        background-size: 64px, 68px, 100%, 210px, 184px, 120px, 160px, 200px, 100%;
        height: 308px;
    }
}

@media (min-width: 992px)
{
	:root {
		--bs-body-font-size: 16px;
	}

	small {
		font-size: 14px;
	}

    .lead {
        font-size: 1.25rem;
    }

    .btn-lg {
        font-size: 24px;
    }

    @keyframes ride-up {
        0%  { opacity: 0; top: 30rem; }
        100% { opacity: 1; top: 26rem; }
    }

    @keyframes ride-in {
        0%  { opacity: 0; left: 24rem; }
        100% { opacity: 1; left: 16rem; }
    }

    .bg-header {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .navbar-brand {
        width: 180px;
        height: 50px;
        background-size: 160px;
    }

    .bg-webdoor {
        background-position: top -36px center;
        background-size: 1200px;
        height: 460px;
    }
    .webdoor-footer {
        background-size: 1200px;
        height: 60px;
    }
    .webdoor-conteudo {
        top: 50px;
        background-position: top 88px left 20px, top 22px center, top 19px right 72px, top 220px right 4px, top 300px center;
        background-size: 280px, 286px, 176px, 220px, 270px;
    }

    .rotate-lg {
        transform: rotateZ(-90deg);
    }

	.tab-pane {
		padding: 2rem;
		border-radius: 16px;
	}

	.nav-tabs {
		margin-left: 2rem;
	}
	.nav-tabs .nav-link {
		font-size: 18px;
		padding: 0.75rem 2rem 0.5rem 2rem;
	}

    .bg-rodape-home {
        background-image: linear-gradient(180deg, transparent, transparent 200px, #032E17 200px, #032E17);
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom center;
    }
    .bg-rodape-home .order-lg-2 {
        background-color: transparent ;
    }

    footer .container {
        background-repeat: no-repeat;
        background-position: right 6rem top -2rem;
        background-size: 500px;
    }

    .bg-inner-header {
        background-position: bottom -9px right calc(((100% - 992px) / 2) + 120px),
                            bottom -8px left calc(((100% - 992px) / 2) ),
                            bottom center,
                            top 68px left calc(((100% - 992px) / 2) + 60px),
                            top 80px left calc(((100% - 992px) / 2) + 294px),
                            top 100px right calc(((100% - 992px) / 2) + 54px),
                            top 84px right calc(((100% - 992px) / 2) + 236px),
                            top 220px left calc(((100% - 992px) / 2) + 559px),
                            top center;
        background-size: 72px, 68px, 100%,
                        250px, 196px, 146px,
                        181px, 250px, 100%;
        height: 344px;
    }
}

@media (min-width: 1200px)
{
    #top_menu {
        position: fixed;
        top: 0;
        bottom: auto;
    }

    .bg-header {
        padding-top: 12px;
        padding-bottom: 12px;
        background-color: transparent;
        box-shadow: none;
    }

    .bg-header .container {
        background-color: #EFE9C9CC;
        padding: 12px 18px;
        border-radius: 48px;
        box-shadow: 0 4px 4px #510D0D;
    }

    .bg-header .navbar-expand-xl .navbar-nav .nav-link {
		padding-left: 16px;
        padding-right: 16px;
	}
	.logged-user .nav-link {
		font-size: 14px ;
	}

    .navbar-brand {
        width: 230px;
        height: 64px;
        background-size: 210px;
    }

    .bg-webdoor {
        background-position: top 0 center;
        background-size: 1400px;
        height: 650px;
    }
    .webdoor-footer {
        background-size: 1400px;
        height: 64px;
    }
    .webdoor-conteudo {
        top: 50px;
        background-position: bottom 0 left 0, top 64px center, top 49px right 42px, bottom 63px right 8px, bottom 48px center;
        background-size: 356px, 350px, 234px, 266px, 354px;
    }

    @keyframes ride-up {
        0%  { opacity: 0; top: 31rem; }
        100% { opacity: 1; top: 27rem; }
    }

    @keyframes ride-in {
        0%  { opacity: 0; left: 30rem; }
        100% { opacity: 1; left: 26rem; }
    }

    .bg-inner-header {
        background-position: bottom -9px right calc(((100% - 1200px) / 2) + 180px),
                            bottom -8px left calc(((100% - 1200px) / 2) ),
                            bottom center,
                            top 80px left calc(((100% - 1200px) / 2) + 92px),
                            top 108px left calc(((100% - 1200px) / 2) + 366px),
                            top 120px right calc(((100% - 1200px) / 2) + 97px),
                            top 112px right calc(((100% - 1200px) / 2) + 333px),
                            top 226px left calc(((100% - 1200px) / 2) + 644px),
                            top center;
        background-size: 87px, 84px, 100%,
                        286px, 222px, 164px,
                        202px, 288px, 100%;
        height: 362px;
    }
}

@media (min-width: 1400px)
{
    .bg-webdoor {
        background-position: top -102px center;
        background-size: 1980px;
        height: 720px;
    }
    .webdoor-footer {
        background-size: 2000px;
        height: 80px;
    }
    .webdoor-conteudo {
        background-position: bottom 0 left 0, top 40px center, top 60px right 70px, bottom 40px right 0, bottom 36px center;
        background-size: 440px, 454px, 270px, 330px, 400px;
    }

    .bg-inner-header {
        background-position: bottom -9px right calc(((100% - 1400px) / 2) + 177px),
                            bottom -8px left calc(((100% - 1400px) / 2) - 52px),
                            bottom center,
                            top 80px left calc(((100% - 1400px) / 2) + 100px),
                            top 108px left calc(((100% - 1400px) / 2) + 457px),
                            top 120px right calc(((100% - 1400px) / 2) + 24px),
                            top 112px right calc(((100% - 1400px) / 2) + 282px),
                            top 226px left calc(((100% - 1400px) / 2) + 780px),
                            top center;
        background-size: 112px, 100px, 100%,
                        324px, 271px, 188px,
                        238px, 330px, 100%;
        height: 390px;
    }
}