/* FONTES */
@font-face {
    font-family: "Sicoob Regular";
    src: url("../fonts/sicoob/SicoobSansRC-Regular.ttf") format('truetype');
}
@font-face {
    font-family: "Sicoob Semibold";
    src: url("../fonts/sicoob/SicoobSansRC-Semibold.ttf") format('truetype');
}
@font-face {
    font-family: "Sicoob Bold";
    src: url("../fonts/sicoob/SicoobSansRC-Bold.ttf") format('truetype');
}
/*FIM FONTES*/

/* CORES */
:root{
    --turq-200: #00E0CA;
    --turq-300: #00CCB8;
    --turq: #00ae9d;
    --turq-500: #00A091;
    --turq-600: #009285;
    --verdee-200: #005566;
    --verdee-300: #004452;
    --verdee: #003641;
    --verdee-500: #002A33;
    --verdee-600: #001E24;
    --verdem-200: #92D421;
    --verdem-300: #86C21E;
    --verdem: #7DB61C;
    --verdem-500: #73A81A;
    --verdem-600: #679617;
    --verdec-200: #EAF500;
    --verdec-300: #D7E000;
    --verdec: #C9D200;
    --verdec-500: #B9C200;
    --verdec-600: #A6AD00;
    --roxo-200: #5956B3;
    --roxo-300: #4E4CA9;
    --roxo: #49479D;
    --roxo-500: #41408C;
    --roxo-600: #3B397E;
    --branco: #FFFFFF;
    --cinza-200: #F2F2F2;
    --cinza-300: #F9F9F9;
    --cinza-400: #D1D1D1;
    --cinza-500: #B4B4B4;
    --cinza-600: #9d9d9d;
    --cinza-700: #6e6e6e;
    --cinza-800: #5E5E5E;
    --cinza-900: #333;
    --preto: #000;
    --transparente: rgba(0, 0, 0, 0);
}
/* FIM CORES */
body{
    font-family: 'Sicoob Regular' !important;
    /* background-image: url("../img/background-large.png") !important; */
    /* background-image: url("../img/bg.jpg") !important;
    background-size: cover !important; */
    background-color: var(--turq);
    /* background: linear-gradient(180deg,rgba(0, 54, 65, 1) 0%, rgba(0, 54, 65, 0.87) 8%, rgba(0, 54, 65, 0) 15%), var(--turq); */
}

.bg-branco{
    background-color: var(--branco);
    color: var(--verdee-500);
}

.bg-turquesa{
    background-color: var(--turq);
    color: var(--branco);
}

.bg-verde-escuro{
    background-color: var(--verdee);
    color: var(--branco);
}

.bg-verde-medio{
    background-color: var(--verdem);
    color: var(--verdee);
}

.bg-verde-claro{
    background-color: var(--verdec);
    color: var(--verdee);
}

.text-verde-escuro{
    color: var(--verdee);
}

.text-verde-claro{
    color: var(--verdec);
}

.text-turquesa{
    color: var(--turq);
}

.text-branco{
    color: var(--branco);
}

.text-vermelho{
    color: red;
}

.text-bold{
    font-family: 'Sicoob Bold';
}

.text-semibold{
    font-family: 'Sicoob Semibold';
}

.size-grande{
    font-size: 2rem;
}

.size-medio{
    font-size: 1.5rem;
}

.size-1{
    font-size: 1rem;
}

.size-pequeno{
    font-size: 0.8rem;
}

section:not(#menu){
    padding-top: 8vh;
    padding-bottom: 8vh;
}

img{
    width: 100%;
    height: auto;
}

.header{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 10vh;
    margin-left: 0;
    margin-right: 0;
    padding: 0 3vw 0 3vw;
    align-items: center;
    z-index: 999;
}

.header .header-item{
    float: right;
    margin-left: 1rem;
    color: var(--branco);
    text-transform: uppercase;
    padding-bottom:1px;
    background-image: linear-gradient(var(--verdec) 0 0);
    background-position: 0 100%; /*OR bottom left*/
    background-size: 0% 2px;
    background-repeat: no-repeat;
    transition:
        background-size 0.3s,
        background-position 0s 0.3s; /*change after the size immediately*/
}

.header .header-item:not(.icon):hover{
    text-decoration: none;
    background-position: 100% 100%; /*OR bottom right*/
    background-size: 100% 2px;
}

.spacer{
    height: 12vh;
}

/* section::before {
    content: "";
    display: block;
    height: 15vh;
    margin-top: -15vh;
} */

/* COLUNAS PROMOÇÃO */
section#titulo-promo{
    padding-top: 0;
    padding-bottom: 8%;
    position: relative;
    /* height: 100vh; */
    align-content: center;
    background: linear-gradient(360deg, rgba(0, 54, 65, 0.6) 0%, rgba(0, 54, 65, 0.4) 12%, rgba(0, 54, 65, 0) 25%);
}

.text-ilustrativo{
    font-size: 0.7rem;
    writing-mode: sideways-lr;
    position: absolute;
    margin: 0;
    height: 80vh;
    right: 1vw;
    bottom: 10vh;
}

#titulo-promo .col-promocao-1, #titulo-promo .col-promocao-2{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#titulo-promo .col-promocao-1{
    width: 40%;
    padding-left: 30%;
    padding-top: 10%;
    position: relative;
}

#titulo-promo .col-promocao-1 div.row{
    position: absolute;
    width: 90%;
    height: 90%;
}

#titulo-promo .col-promocao-2{
    width: 60%;
    padding-right: 10%;
}

#titulo-promo p{
    text-align: left;
}
/* COLUNAS PROMOÇÃO */

#section-como-participar{
    background-color: var(--verdee-500);
}
#section-como-participar p>a{
    text-decoration: underline;
}
#section-como-participar p.conta{
    border-radius: 10px;
}

#section-faq{
    padding-inline: 3rem!important;
}

#section-faq span{
    white-space: normal;
    text-align: left;
}

#section-faq .btn-collapse .collapse-icon .fa-minus,
#section-faq .btn-collapse.collapsed .collapse-icon .fa-plus{
    display: none;
}

#section-faq .btn-collapse .collapse-icon .fa-plus,
#section-faq .btn-collapse.collapsed .collapse-icon .fa-minus{
    display: block;
}

#section-faq .btn-collapse{
    text-decoration: none;
}

#section-faq .card{
    margin-bottom: 1rem;
    margin-inline: 10%;
    border: 2px solid var(--turq);
    border-radius: 10px;
}

#section-faq .card .card-header{
    border: none;
    background-color: transparent;
}

#section-faq .card .card-header button{
    font-size: 1rem;
    font-weight: bold;
    padding: 0;
    color: var(--verdee);
}

.content{
    position: relative;
    /* margin-top: 8vh; */
    font-size: 1.2rem;
    min-height: 90vh;
}

.content .left-selo img, .content .right-selo img{
    height: 80%;
    width: auto;
}

.content .pill{
    /* padding-left: 2vw;
    padding-right: 2vw; */
    padding: 8px 24px;
    /* border-radius: 1vw; */
    border-radius: 10px;
}

.content .pill-filter{
    padding: 1.5rem;
    font-size: 1.5rem;
    border-radius: 10vh;
    width: 100%;
    border: none;
}

.content .pill-filter img{
    transform: rotate(0deg);
    transition-duration: 0.8s;
    transition-property: transform;
    -webkit-transform: rotate(0deg);
}

.content .pill-filter.collapsed img{
    transform: rotate(-90deg);
    transition-duration: 0.8s;
    transition-property: transform;
    -webkit-transform: rotate(-90deg);
}

.content .premios img{
    width: 100vw;
    height: auto;
}

.content .chances img{
    width: 80vw;
    height: auto;
}

.content .sorteios img{
    width: 50vw;
    height: auto;
}

.content .periodo{
    width: 70vw;
    margin-left: 15vw;
}

.content .periodo .periodo-cell{
    align-content: center;
    background-color: var(--verdec);
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    height: 100%;
}

.content .periodo .periodo-cell-container{
    padding-inline: 6px;
    /* overflow-wrap: break-word; */
}

.content .periodo .periodo-cell-transparente{
    background-color: transparent;
    color: var(--branco);
    padding-top: 8px;
    padding-bottom: 8px;
    text-align: center;
    border: 1px solid var(--verdec);
}

.content .footer img{
    width: 80vw;
    height: auto;
}

.content .chances{
    margin-left: 0;
    margin-right: 0;
    margin-top: 5vh;
    margin-bottom: 10vh;
    position: relative;
}

#atencao-promo .btn-cadastro{
    background-color: var(--turq);
    color: var(--branco);
    /* border: 1px solid var(--turq); */
    padding: 10px 3rem 10px 3rem;
    border-radius: 10px;
}

#descadastro-promo{
    margin-top: -20px;
}
.btn-descadastro{
    background-color: var(--verdee);
    color: var(--branco);
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
}

/* #atencao-promo a{
    font-family: 'Sicoob Semibold' !important;
} */

.atencao{
    font-family: 'Sicoob Bold' !important;
    background-color: rgba(255, 255, 255, 0.2);
}

#consulte-promo .atencao{
    width: 100%;
}

#consulte-promo .msg{
    width: 50%;
}

#consulte-data .consulte-nome{
    font-size: 60px;
    border: 1px solid var(--verdec);
    width: 70vw;
    text-align: center;
    padding: 20px;
    border-radius: 6px;
}

.informativo{
    margin-top: 10vh;
    font-weight: 100;
}

/* TABELA NÚMEROS DA SORTE */
/* #consulte-data table th,
#consulte-data table td{
    padding: 5px;
    height: 100%;
}
#consulte-data table td:first-child{
    min-width: 30vw;
}
#consulte-data table th>div{
    padding: 10px;
    text-align: center;
    background-color: var(--verdec);
    color: var(--verdee)
}
#consulte-data table td>div{
    padding: 10px;
    text-align: center;
    border: 1px solid var(--verdec);
}
#consulte-data .limpar-tabela{
    color: var(--branco);
    text-decoration: underline;
    cursor: pointer;
} */
/* FIM TABELA NÚMEROS DA SORTE */

#footer-promo{
    padding-bottom: 8vh;
}

.input-promo{
    color: var(--branco);
    background-color: transparent;
    font-family: 'Sicoob Semibold';
    width: 32vw;
    text-align: center;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid var(--verdec);
    font-size: 1.2rem;
}

.input-promo::placeholder {
    color: var(--branco);
    opacity: 1;
}

.input-promo.form-control:focus {
    color: var(--branco);
    background-color: transparent;
    border: none;
    box-shadow: 0 0 0 .2rem rgba(52, 144, 220, .25);
}

.error{
    border: 2px solid red;
}
.error-text{
    color: red;
    font-size: 0.8rem;
    margin-top: 0;
}

#ganhadores{
    min-height: 70vh;
    /* background-image: linear-gradient(90deg, rgba(0, 54, 65, 0.9) 0%, rgba(0, 54, 65, 0.9) 35%, rgba(0, 54, 65, 0) 60%), url('../img/ganhadores.jpg'); */
    background-image: url('../img/ganhadores.png');
    background-size: cover;
    background-position: center; /* Centers the image */
    width: 100%; /* Example width */
    height: auto; /* Example height */
    padding-left: 15%;
    align-content: center;
}

#ganhadores .btn-buscar{
    padding: 8px 24px !important;
    margin-inline: 10px;
    text-align: center;
}

/* SLIDER */
.wrapper {
    margin-inline: 10%;
    position: relative;
}

#left,
#right{
    position: absolute;
    top: calc(50% - 1em);
    cursor: pointer;
    z-index: 1;
}

#left{
    left: 10%;
}

#right{
    right: 10%;
}

.wrapper .carousel {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% / 4);
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: 0;
}

#invisible{
    color: transparent;
    background-color: transparent;
}

.carousel::-webkit-scrollbar {
    display: none;
}

.carousel :where(.card, .img) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel.dragging {
    scroll-snap-type: none;
    scroll-behavior: auto;
}

.carousel.no-transition {
    scroll-behavior: auto;
}

.carousel.dragging .card {
    cursor: grab;
    user-select: none;
}

.carousel .card {
    scroll-snap-align: start;
    height: 25vh;
    list-style: none;
    background: #fff;
    border-radius: 8px;
    display: flex;
    cursor: pointer;
    width: 100%;
    /* padding-bottom: 15px; */
    align-items: center;
    justify-content: start;
    padding: 10px 30px;
    flex-direction: row;
    background-color: var(--branco);
}

.carousel #one{
    background-color: var(--turq);
}

.carousel #one p{
    width: 100%;
}

.carousel .card h2{
    width: 25%;
    float: left;
    color: var(--turq);
    font-weight: bold;
}

.carousel .card p{
    font-weight: bold;
    line-height: normal;
    font-size: 1.5vw;
    width: 75%;
}

/* :is(li, .indicator):nth-of-type(1) { --hue: 0;}
:is(li, .indicator):nth-of-type(2) { --hue: 140;}
:is(li, .indicator):nth-of-type(3) { --hue: 45;}
:is(li, .indicator):nth-of-type(4) { --hue: 210;}
:is(li, .indicator):nth-of-type(5) { --hue: 280;} */

.carousel_indicators {
	height: 20px;
	position: absolute;
	top: calc(50% + ((var(--card-width) * (3 / 4)) * 0.5) + 2rem);
	left: 50%;
	translate: -50% 0;
	display: flex;
}
.indicator {
	--color: hsl(var(--hue, 0) 0% 86%);
	background: linear-gradient(var(--color), var(--color)) padding-box;
	flex: 1;
	border-radius: 100px;
	height: 100%;
	min-width: 20px;
	cursor: pointer;
	padding: 0;
    position: relative;
	border: 4px solid transparent;
}

.indicator::after {
    content: "";
    border-radius: 100px;
    position: absolute;
    inset: 0;
    background: var(--turq);
}

@supports (animation-timeline: scroll()) {

	.wrapper {
		timeline-scope: --one, --two, --three, --four;
	}
	
	.carousel_indicators {
		aspect-ratio: 4 / 1;
	}
	
	li:nth-of-type(1) { view-timeline: --one inline;  }
	li:nth-of-type(2) { view-timeline: --two inline;  }
	li:nth-of-type(3) { view-timeline: --three inline;}
	li:nth-of-type(4) { view-timeline: --four inline; }
	
	.indicator {
		--buffer: calc(var(--card-width) * 0.9);
		animation: blink both linear;
		animation-range: contain calc(50% - var(--buffer)) contain calc(50% + var(--buffer));
	}
	
	.indicator:nth-of-type(1) { animation-timeline: --one; }
	.indicator:nth-of-type(2) { animation-timeline: --two; }
	.indicator:nth-of-type(3) { animation-timeline: --three; }
	.indicator:nth-of-type(4) { animation-timeline: --four; }

	@keyframes blink {
		50% { flex: 3; }
	}
  
  .indicator::after {
		--buffer: calc(var(--card-width) * 0.9);
    opacity: 0;
		animation: show both linear;
		animation-range: contain calc(50% - var(--buffer)) contain calc(50% + var(--buffer));
	}
	
	.indicator:nth-of-type(1)::after { animation-timeline: --one; }
	.indicator:nth-of-type(2)::after { animation-timeline: --two; }
	.indicator:nth-of-type(3)::after { animation-timeline: --three; }
	.indicator:nth-of-type(4)::after { animation-timeline: --four; }

	@keyframes show {
		50% { opacity: 1; }
	}
}

/* SLIDER */

.btn-buscar{
    background-color: var(--turq);
    color: var(--branco)!important;
    cursor: pointer;
}

.btn-buscar:hover{
    color: var(--verdee-600)!important;
    text-decoration: underline!important;
}

.topnav .icon {
    display: none;
}

#consulte-promo{
    font-family: 'Sicoob Regular'!important;
}

#consulte-promo table th, #consulte-promo table td{
    text-align: center;
    padding: 10px 20px;
}

#consulte-promo table{
    margin-bottom: 5vh;
}

#consulte-promo table thead, #consulte-promo table tbody{
    border-bottom: 1px solid var(--branco);
}

#consulte-promo .pagination{
    display: flex;
    gap: 2vw;
}

#section-numero-sorte .pagination{
    width: 100%;
    justify-content: center;
    margin-top: 1em;
}

#section-numero-sorte #numeracao{
    margin: 10px;
}

#section-numero-sorte .informativo a{
    text-decoration: underline;
}

#section-numero-sorte .text-small{
    font-size: 0.8em;
}

.outline-verdec-button:not(:disabled):hover{
    cursor: pointer;
    background-color: var(--verdee-200);
    color: var(--verdec-200);
    text-decoration: underline;
}

.outline-verdec-button{
    font-family: 'Sicoob Regular'!important;
    background-color: transparent;
    color: var(--verdec);
    border: 1px solid var(--verdec);
    border-radius: 25px;
    padding: 5px 20px;
}

.text-sublinhado{
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* DATATABLES */
input#dt-search-0.dt-input,
input#dt-search-1.dt-input{
    width: 80%;
    border-radius: 10px;
    padding: 8px;
    padding-left: 15px;
    margin-left: 10%;
    border: none;
    color: var(--turq);
    font-family: 'Sicoob Semibold';
    margin-bottom: 2rem;
}
#table-sorteio thead,
#table-premios thead,
#table-carros thead{
    background-color: var(--verdec);
    color: var(--verdee);
    font-family: 'Sicoob Bold';
    cursor: pointer;
    text-transform: uppercase;
}
#table-sorteio tbody tr,
#table-premios tbody tr,
#table-carros tbody tr{
    background-color: var(--transparente);
    color: var(--branco);
    /* font-family: 'Sicoob Semibold'; */
}
#table-sorteio thead th, #table-sorteio tbody td,
#table-premios thead th, #table-premios tbody td,
#table-carros thead th, #table-carros tbody td{
    padding: 10px;
    text-align: center;
}
#table-sorteio tbody td,
#table-premios tbody td,
#table-carros tbody td{
    border: 1px solid var(--verdec);
}
#table-sorteio tbody:before,
#table-premios tbody:before,
#table-carros tbody:before {
    content:"@";
    display:block;
    line-height:0.2rem;
    text-indent:-99999px;
}
#table-sorteio_wrapper{
    min-width: 50%;
}
#table-sorteio,
#table-premios,
#table-carros{
    font-size: 1rem;
    border-collapse: separate;
    border-spacing: 5px 5px;
    border-bottom: 1px solid white;
    padding-bottom: 3rem;
    margin-bottom: 1rem;
}
#table-premios,
#table-carros{
    width:96% !important; 
    margin-left: 2%;
}
#table-sorteio thead tr th:first-child{
    width: 40%;
}
#table-premios thead tr th:first-child,
#table-carros thead tr th:first-child{
    width: 30%;
    max-width: 30%;
}
/* #table-premios tr td:first-child,
#table-carros tr td:first-child{ border-top-left-radius: 10px; }
#table-premios tr td:last-child,
#table-carros tr td:last-child{ border-top-right-radius: 10px; }
#table-premios tr td:first-child,
#table-carros tr td:first-child{ border-bottom-left-radius: 10px; }
#table-premios tr td:last-child,
#table-carros tr td:last-child{ border-bottom-right-radius: 10px; } */

/* .dt-paging{
    justify-content: center;
    display: flex;
}
.dt-paging nav{
    column-gap: 100px;
    display: flex;
}
.dt-info{
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
    font-family: 'Sicoob Semibold';
    color: var(--branco);
} */
#table-sorteio_wrapper .dt-paging{
    margin-right: -10%;
}
#table-sorteio_info.dt-info{
    margin-left: -10%;
}

.dt-info{
    width: 50%;
    float: left;
    color: var(--verdec);
}
.dt-paging{
    width: 50%;
    float: right;
    display: flex;
    justify-content: end;
}
.dt-paging-button.previous, .dt-paging-button.next, 
.dt-paging-button.disabled.previous, .dt-paging-button.disabled.next{
    font-family: 'Sicoob Regular' !important;
    background-color: transparent;
    color: var(--branco);
    border: 1px solid var(--verdec);
    border-radius: 25px;
    padding: 5px 20px;
    cursor: pointer;
    margin-inline: 6px;
}
.dt-paging-button{
    border: none;
    background-color: transparent;
color: var(--verdec);
    cursor: pointer;
}
.dt-paging-button.current{
    background-color: var(--verdec);
    color: var(--branco);
    width: 2rem;
    height: 2.5rem;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 1rem;
}
#premios-data{
    overflow-x: auto;
}
#carros-data{
    overflow-x: auto;
}
/* DATATABLES FIM */

@media only screen and (max-width: 1366px) and (min-width: 1281px) {
    /* body{ */
        /* background-image: url("../img/background-medium.png") !important; */
        /* background-image: url("../img/bg.jpg") !important; */
    /* } */
    .content .periodo{
        width: 80vw;
        margin-left: 10vw;
    }
}

@media only screen and (max-width: 1280px) and (min-width: 901px) {
    .content .chances img{
        width: 80vw;
        height: auto;
    }
    .content .sorteios img{
        width: 80vw;
        height: auto;
    }
    
    #section-faq{
        padding-inline: 1rem!important;
    }

    .content .periodo{
        width: 92vw;
        margin-left: 4vw;
    }
    
    .input-promo{
        width: 50vw;
    }

    #ganhadores .btn-buscar{
        padding-inline: 8rem!important;
    }

    /* SLIDER */
    .wrapper {
        max-width: 75%;
    }
    
    .wrapper .carousel {
        grid-auto-columns: auto;
    }
    
    .carousel .card {
        height: 25vh;
        width: 20vw;
    }

    .carousel .card h2{
        width: 30%;
        font-size: 2rem;
    }

    .carousel .card span{
        font-size: 1.5vw;
    }
    /* SLIDER */
}

@media only screen and (max-width: 900px) {
    #ganhadores {
        min-height: 25vh;
    }
    /* body{ */
        /* background-image: url("../img/background-small.png") !important; */
        /* background-image: url("../img/bg.jpg") !important; */
    /* } */
    .side-bg {
        display: none !important;
    }
    #footer-promo{
        display: none!important;
    }
    #footer-promo-mobile{
        display: block!important;
    }
    #atencao-promo .atencao{
        margin: 0;
    }
    #atencao-promo .btn-cadastro{
        text-align: center;
        margin-inline: 10px;
    }
    #consulte-promo .msg{
        width: 80%;
    }

    #consulte-data .consulte-nome{
        font-size: 40px;
        width: 90vw;
    }

    #section-faq{
        padding-inline: 0!important;
    }

    .content .periodo{
        width: 94vw;
        margin-left: 3vw;
        overflow-x: auto;
    }

    #ganhadores .btn-buscar{
        padding-inline: 5rem!important;
    }
    
    .content .periodo .cabecalho .periodo-cell{
        font-size: 1rem;
    }
    .content .periodo .periodo-cell,
    .content .periodo .periodo-cell-transparente{
        font-size: 0.9rem;
    }

    #titulo-promo .col-promocao-2 .row{
        width: 40%;
    }

    .content{
        font-size: 1rem;
    }
    p{
        font-size: 1rem;
        text-align: center;
        margin: 0 1rem;
    }
    #footer-promo-mobile p{
        width: 100%;
        text-align: left;
    }
    .content .premios img{
        width: 100vw;
        height: auto;
    }
    .content .chances img{
        width: 90vw;
        height: auto;
    }
    .content .sorteios img{
        width: 90vw;
        height: auto;
    }

    .topnav .header-item{
        display: none;
    }
    .topnav .header-item.icon{
        float: right;
        display: block;
        color: var(--turq)
    }
    .topnav.responsive{
        height: 25vh;
    }
    .content.responsive{
        margin-top: 30vh;
    }
    .content.responsive section::before{
        height: 30vh!important;
        margin-top: -30vh!important;
    }
    /* .topnav.responsive .header-item.icon{
        position: absolute;
        right: 3vw;
        top: 1vh;
    } */
    .topnav.responsive .header-item:not(.icon), .topnav.responsive div.items{
        float: left;
        display: block;
        width: 100%;
        text-align: left;
    }
    .header .header-item:not(.icon):hover{
        background-position: 20% 100%; /*OR bottom right*/
        background-size: 20% 2px;
    }
    .header .header-item{
        background-position: 0 100%; /*OR bottom left*/
    }
    .input-promo{
        width: 80vw;
    }
    .content .pill-filter{
        padding: 1rem;
        font-size: 1rem;
        border-radius: 10vh;
    }
    .dt-info{
        width: 100%;
        float: left;
    }
    .dt-paging{
        width: 100%;
        float: left;
    }
    
    section#titulo-promo {
        height: auto;
    }

    /* COLUNAS PROMOÇÃO */
    #titulo-promo .col-promocao-1, #titulo-promo .col-promocao-2{
        width: 100%;
        margin-left: 0;
        padding: 0;
    }
    #titulo-promo .col-promocao-1 div.row {
        position: relative;
        justify-content: center;
    }
    #titulo-promo .col-promocao-2 div.row {
        justify-content: center;
        width: 80%;
    }
    /* COLUNAS PROMOÇÃO */

    .size-grande{
        font-size: 1.8rem;
    }
    
    .size-medio{
        font-size: 1.2rem;
    }
    
    .size-pequeno{
        font-size: 0.7rem;
    }

    .text-ilustrativo{
        font-size: 0.6rem;
        height: 60vh;
        bottom: 6vh;
    }
    
    /* SLIDER */
    .wrapper {
        max-width: 75%;
    }
    
    .wrapper .carousel {
        grid-auto-columns: auto;
    }

    .carousel .card {
        width: 30vw;
    }

    .carousel .card h2{
        width: 30%;
    }

    .carousel .card span, 
    .carousel .card p{
        font-size: 1.2rem;
    }
    /* SLIDER */
}
@media only screen and (max-width: 600px) {
    #titulo-promo .col-promocao-2 .row{
        width: 70%;
    }
    /* SLIDER */
    .wrapper {
        max-width: 75%;
    }
    
    .wrapper .carousel {
        grid-auto-columns: auto;
    }

    .carousel .card {
        height: 25vh;
        width: 60vw;
    }

    .carousel .card span{
        font-size: 3.8vw;
    }
    /* SLIDER */

    .content .periodo-pai{
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    .content .periodo{
        overflow-x: auto;
        width: 150vw;
        margin-left: 3vw;
        display: block;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    #ganhadores .btn-buscar{
        padding-inline: 3rem!important;
    }
}