@keyframes rotateInfinite{
    
    0%{
        transform:translate(-60%, -50%) rotate(0deg)
    }

    100%{
        transform:translate(-60%, -50%) rotate(360deg)
    }

}

.heroImage img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.heroImage {
    height: 100%;
    width: 100%;
    position: relative;
}


.heroRow {
    height: 100vh;
    width: 100%;
    position: relative;
}

.heroImage::after {
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 34, 49, 0.54);
    position: absolute;
    z-index: 0;
}

.heroText {
    position: absolute;
    left: 20.7%;
    top: 37%;
}

.heroText h2 {
    font-family: 'Campton';
    font-weight: 700;
    color: white;
    margin: 0;
    font-size: 5.3em;
    padding-bottom: 10vh;
    white-space: nowrap;
}

.heroText a {
    color: white;
    font-style: italic;
    text-decoration: unset;
    font-family: 'Campton';
    font-weight: 500;
    font-size: 1.4em;
}

.topConfetti img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.secondRow {
    display: flex;
    flex-direction: row;
    padding: 0 15%;
    padding-top:17vh;
    position:relative;
}

.topConfetti {
    width: 100%;
    transform: translateY(-50%);
    z-index: -1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.topConfetti img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


.secondRowFlexBig {
    width: 60%;
    padding-right: 11%;
    box-sizing: border-box;
}

.secondRowFlexSmall {
    width: 40%;
    box-sizing: border-box;
    padding-left: 11%;
    padding-right: 10%;
}

.secondRowFlexSmall h4 {
    font-family: 'Campton';
    font-weight: 500;
    font-size: 1.5em;
    margin: 0;
}

.categoryBlurb {
    padding-top: 1vh;
    padding-bottom: 3.5vh;
}

.categoryBlurb a {
    text-decoration: none;
    font-family: 'Campton';
    font-size: 0.9em;
    color: rgb(215, 94, 48);
    font-weight: 100;
}

.secondRowFlexSmall p {
    font-family: 'Campton';
    font-weight: 300;
    font-size: 1.1em;
    margin: 0;
}

.secondRowFlexBig h3 {
    font-family: 'Campton';
    font-weight: 500;
    color: black;
    font-size: 1.5em;
    margin: 0;
}


.secondRowTextBlock :is(p,h2,li) {
    color: black;
    font-family: 'Campton';
    margin: 0;
}

.secondRowTextBlock h2 {
    font-size: 1.8em;
}

.secondRowTextBlock h2 {
    font-size: 1.8em;
    margin-bottom: 0.5em;
    font-weight: 700;
}


.extraMargin {
    font-style: italic;
    margin: 1.2em 0;
}

.secondRowTextBlock p {
    font-weight: 300;
    font-size: 1.1em;
    margin: 0.9em 0;
}

.secondRowTextBlock {
    padding: 5vh 0;
}

.secondRowTextBlock ul {
    padding-top: 0.5vh;
}


.secondRowTextBlock ul>li:first-child {
    margin-top: unset;
}

.secondRowTextBlock ul>li:last-child {
    margin-bottom: unset;
}

.secondRowTextBlock {
    padding: 5vh 0;
    padding-bottom: 3vh;
}

.secondRowTextBlock  li {
    margin: 1.6em 0px;
    font-weight: 300;
}

.titleBlock {
    padding-left: 43%;
}

.titleBlock h2 {
    margin: 0;
    padding: 0.5em 0;
    background-color: #d75e30;
    color: white;
    font-style: italic;
    font-family: 'Campton';
    font-weight: 700;
    padding-left: 1.4%;
}

.titleBlock p, .titleBlock li {
    font-weight: 300;
    font-size: 1.1em;
    margin: 0.9em 0;
    color: black;
    font-family: 'Campton';
    padding-right: 44%;
    margin: 1em 0;
    margin-bottom: 0;
}

.titleBlock li {
    margin: 0.3em 0;
}

.titleBlock {
    padding-left: 43%;
    padding-bottom: 7vh;
}

.ruletaImageRow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ruletaImageRowSmall {
    width: 48%;
    display: flex;
    flex-direction: row;
}

.ruletaImageRowBig {
    width: 52%;
    position: relative;
}

.ruletaImageRow {
    display: flex;
    flex-direction: row;
}

.ruletaImageBackground img {
    object-fit: cover;
}

.ruletaImageBackground {
    height: 100%;
}


.ruletaImage {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translate(-60%, -50%);
    height: 120%;
    width: 70%;
    /*animation: rotateInfinite 13s linear infinite;*/
}

.ruletaImageRow {
    padding-bottom: 6.6vh;
    position: relative;
}

.ruletaImageRow > p, .sorteoRow > p, .swiper > p {
    position: absolute;
    top: 0;
    left: 100%;
    font-family: 'Montserrat';
    font-size: 1.1em;
    font-weight: 300;
    font-style: italic;
    color: rgb(215, 94, 48);
    text-wrap: nowrap;
    white-space: nowrap;
}

.ruletaImageRow > p {
    transform: translate(-235%, -205%);
}

.sorteoRow > p {
    transform: translate(-190%, -205%);
}

.swiper > p {
    transform: translate(-160%, -205%);
}

.sorteoRow {
    background-color: rgb(70, 23, 16);
    margin-bottom: 6.6vh;
    position: relative;
}

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

.firstSorteoRow {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(70, 23, 16);
}

.sorteoRowImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.swiper {
    background-color: #da683d;
    margin-bottom: 6.6vh;
    position: relative;
    padding: 2.5vh 2.5% !important;
    cursor: pointer;
    padding-bottom: 30px !important;
    overflow: visible !important;
}

.swiper-slide {
    height: 65vh !important;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper .swiper-pagination {
    top: 100%;
    transform: translate(0, -100%);
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.swiper .swiper-pagination-bullet {
    background: rgb(141, 67, 39, 1);
    height: 10px;
    width: 10px;
}

@media only screen and (max-width: 1600px) {

    .heroText {
        top: 41%;
        left: 50%;
        width: 62%;
        transform: translateX(-50%);
    }

    .heroText br {
        display: block;
    }

    .heroText h2 {
        font-size: 4.6em;
    }

    .secondRow {
        padding: unset;
        padding-top: 13.5vh;
        padding-bottom: 6vh;
    }

    .secondRowFlexSmall {
        padding-left: 11%;
        padding-right: 6%;
    }

    .secondRowFlexBig {
        padding-right: 11%;
    }

    .firstSorteoRow .sorteoRowImg:is(:nth-of-type(1), :nth-of-type(3)) {
        padding: 0 30px;
    }

}

@media only screen and (max-width: 1200px) {

    .heroText {
        width: 90%;
    }

    .secondRowFlexSmall {
        padding-left: 6%;
    }

    .secondRowFlexBig {
        padding-right: 6%;
    }

    .secondRowTextBlock li {
        margin: 1.3em 0px;
    }

    .secondRowTextBlock p, .secondRowFlexSmall p, .titleBlock p, .titleBlock li, .sorteoRow > p, .swiper p, .ruletaImageRow p {
        font-size: 1em;
    }

    .secondRowTextBlock h2 {
        font-size: 1.7em;
    }

    .titleBlock {
        padding-left: 30%;
    }

    .titleBlock h2 {
        font-size: 1.2em;
    }

    .titleBlock p, .titleBlock li {
        padding-right: 15%;
    }

    .ruletaImageRow > p {
        transform: translate(-195%, -205%);
    }

    .sorteoRow > p {
        transform: translate(-155%, -205%);
    }

    .swiper > p {
        transform: translate(-145%, -205%);
    }

}

@media only screen and (max-width: 800px) {

    .heroText h2 {
        font-size: 3.2em;
    }

    .ruletaImageRow {
        flex-direction: column;
        align-items: center;
    }

    .ruletaImageRowSmall {
        width: 100%;
    }

    .ruletaImageRowBig {
        width: 100%;
    }

}

@media only screen and (max-width: 600px) {

    .heroText h2 {
        font-size: 1.8em;
        padding-bottom: 7vh;
    }

    .heroText a {
        font-size: 1em;
    }
    
    .topConfetti {
        height: 10vh;
    }

    .secondRow {
        flex-direction: column;
        align-items: center;
        padding-top: 9vh;
        padding-right: 6%;
        padding-left: 6%;
        padding-bottom: 0;
    }

    .secondRow > .secondRowFlexSmall, .secondRowFlexBig h3 {
        padding-bottom: 5.6vh !important;
    }

    .secondRow > .secondRowFlexSmall, .secondRow > .secondRowFlexBig {
        width: 100%;
        padding: 0;
    }

    .categoryBlurb {
        padding-bottom: unset;
    }

    .secondRowFlexSmall p {
        padding-top: 9.5vh;
    }

    .secondRowFlexSmall {
        padding-bottom: 3.5vh;
    }

    .secondRowTextBlock {
        padding: 5vh 0;
        padding-bottom: 6vh;
    }

    .secondRowTextBlock:nth-of-type(2) {
        padding-top: 2vh;
    }

    .titleBlock {
        padding-left: 15%;
        padding-bottom: 7vh;
    }

    .titleBlock h2 {
        padding-left: 10px;
    }

    .titleBlock li {
        padding-top: 1vh;
    }

    .firstSorteoRow, .secondSorteoRow {
        flex-direction: column;
    }

    .firstSorteoRow .sorteoRowImg:is(:nth-of-type(1), :nth-of-type(3)) {
        padding: 2vh 0;
        width: 85%;
    }

    .sorteoRowImg {
        width: 100%;
    }

    .ruletaImageRow > p, .sorteoRow > p, .swiper > p {
        font-size: 0.9em;
    }

    .ruletaImageRow > p {
        transform: translate(-130%, -205%);
    }

    .sorteoRow > p {
        transform: translate(-125%, -205%);
    }

    .swiper > p {
        transform: translate(-120%, -205%);
    }

}