@font-face {
    font-family:'RedHatDisplay regular';
    src: url("../fonts/RedHatDisplay-Regular.woff2") format("woff2"),
    url("../fonts/RedHatDisplay-Regular.woff") format("woff");
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family:'RedHatDisplay black';
    src: url("../fonts/RedHatDisplay-Black.woff2") format("woff2"),
    url("../fonts/RedHatDisplay-Black.woff") format("woff");
    font-weight:normal;
    font-style:normal;
}

body {
    font-family:'RedHatDisplay regular', sans-serif;
    background-color: #F8F4ED;
}

.color-secondary {
    color: #E95492;
}

.text-regular {
    font-size: 16px;
    line-height: 24px;
}

.title-font {
    font-family: "bacalar-regular", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-black {
    font-family:'RedHatDisplay black', sans-serif;
    font-weight: 400;
    font-style: normal;
}

.font-regular {
    font-family:'RedHatDisplay black', sans-serif;
    font-weight: 400;
    font-style: normal;
}


@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1280px;
    }
}

.relative {
    position: relative;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-30 {
    margin-bottom: 30px;
}

.col-pr-0 {
    padding-right: 0;
}

.button-primary {
    color: #ffffff;
    background-color: #E95492;
    font-size: 16px;
    padding: 12px 30px;
    border-radius: 24px;
    text-decoration: none;
}

.header-wrapper {
    background-image: url(../images/hero-image.png);
    background-position: center;
    background-size: cover;
    position: relative;
}

.header-wrapper:before {
    content: '';
    background-image: url(../images/header-top.svg);
    background-size: cover;
    width: 100vw;
    position: absolute;
    height: 60px;
    background-repeat: no-repeat;
    z-index: 1;
}

.header-wrapper-top {
    justify-content: center;
    z-index: 2;
    position: relative;
    padding-top: 20px;

}

.header-wrapper-inner {
    padding-bottom: 150px;
}

.logo:before {
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: rgba(255,255,255,.5);
    top: calc(50% + 10px);
}

.logo img {
    z-index: 2;
}

.header-text {
    width: 56%;
    padding-bottom: 56px;
    position: relative;
    display: inline-block;
}

.header-text:after {
    content: '';
    position: relative;
    width: 89%;
    height: 2px;
    background-color: rgba(255, 255, 255, .5);
    display: block;
    margin-top: 40px;
}

.header-text h3 {
    padding-bottom: 18px;
    margin-bottom: 0;
    font-size: 24px;
}

.header-text h1 {
    font-size: 86px;
    line-height: 86px;
    margin-bottom: 0;
    text-transform: uppercase;
}

.header-block {
    width: calc(44% - 5px);
    display: inline-flex;
    justify-content: end;
    vertical-align: top;
    top: 40px;
    position: relative;
}

.header-highlight {
    padding: 70px 70px 53px 70px;;
    background-image: url(../images/highlight-block.svg);
    max-width: 422px;
    background-repeat: no-repeat;
}

.header-highlight .date {
    font-size: 36px;
    line-height: 36px;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.header-highlight a p {
    margin-left: 12px;
}

.header-highlight a:hover p {
    text-decoration: underline;
}

.header-button {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 36px;
}

.wrapper {
    padding-top: 144px;
}

.text-image h2 {
    text-transform: uppercase;
    font-size: 46px;
    line-height: 46px;
    color: #11111F;
    margin-bottom: 40px;
}

.text-image p {
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 0;
    color: #11111F;
}

.button-skewed {
    background-image: url(../images/rectangle-skewed.svg);
    display: inline-block;
    padding: 15px 32px 14px 31px;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
}

.button-pink {
    background-image: url(../images/rectangle-pink.svg);
    padding: 17px 32px 15px 31px;
    background-repeat: no-repeat;
    display: block;
    position: relative;
    top: -2px;
    z-index: 1;
}

.button-group {
    margin: 30px 0;
}

.information {
    background-color: #11111F;
    margin-top: 80px;
    position: relative;
    padding-bottom: 90px;
}

.information:before {
    content: '';
    background-image: url(../images/information-top.svg);
    background-size: cover;
    width: 100vw;
    position: absolute;
    height: 40px;
    background-repeat: no-repeat;
    z-index: 1;
}

.information h2 {
    padding-top: 120px;
    font-size: 36px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.information ul {
    padding-left: 0;
    list-style: none;
}

.information ul li:before {
    content: "•";
}

.information ul li {
    line-height: 26px;
}

.information ul li span {
    padding-left: 21px;
    color: #E95492;
    padding-right: 5px;
}

.information:after {
    content: '';
    background-image: url(../images/information-bottom.svg);
    background-size: cover;
    width: 100vw;
    position: absolute;
    height: 40px;
    background-repeat: no-repeat;
    z-index: 1;
    bottom: -40px;
}

.text {
    padding-top: 180px;
    padding-bottom: 42px;
}

.text h2 {
    text-transform: uppercase;
    color: #11111F;
    font-size: 46px;
    line-height: 46px;
    margin-bottom: 40px;
    margin-top: 14px;
}

.text p {
    color: #11111F;
    margin-bottom: 24px;
}

.text__image {
    display: flex;
    justify-content: end;
}

.text-image img,
.text__image img {
    max-width: 100%;
}

.order {
    background-image: url(../images/tickets-bg.png);
    background-position: center;
    background-size: cover;
    position: relative;
    text-align: center;
    padding: 200px 0;
}

.order:before {
    content: '';
    background-image: url(../images/tickets-top.svg);
    background-size: cover;
    width: 100vw;
    position: absolute;
    height: 40px;
    background-repeat: no-repeat;
    z-index: 1;
    left: 0;
    top: 0;
}


.order h2 {
    font-size: 86px;
    line-height: 86px;
    text-transform: uppercase;
}

.order-item {
    background-image: url(../images/tickets-rectangle.svg);
    padding: 17px 32px 15px 32px;
    background-repeat: no-repeat;
    display: inline-block;
    position: relative;
    top: -25px;
    z-index: 1;
    margin-bottom: -15px;
}

.order p {
    line-height: 24px;
}

.order .button {
    margin-top: 4px;
    display: inline-block;
}

.order:after {
    content: '';
    background-image: url(../images/tickets-bottom.svg);
    background-size: cover;
    width: 100vw;
    position: absolute;
    height: 40px;
    background-repeat: no-repeat;
    z-index: 1;
    left: 0;
    bottom: 0;
}

.highlight-footer:before {
    content: '';
    height: 207px;
    width: 100vw;
    position: absolute;
    background-color: #D9D5CE;
}

.highlight-footer__block {
    padding: 66px 70px 57px 70px;;
    background-image: url(../images/highlight-block-footer.svg);
    max-width: 422px;
    background-repeat: no-repeat;
    position: relative;
    margin-top: 10px;
}

@media (min-width: 576px) and (max-width: 767px) {
    .highlight-footer__block {
        background-image: url(../images/highlight-block-footer-sm.svg);
        height: 260px;
        padding: 50px 30px 30px 30px;
    }
}

@media (min-width: 501px) and (max-width: 575px) {
    .highlight-footer__block {
        background-image: url(../images/highlight-block-footer-sm.svg);
        height: 280px;
        padding: 50px 30px 30px 30px;
    }
}

@media (max-width: 500px) {
    .highlight-footer__block {
        background-image: url(../images/highlight-block-footer-xs.svg);
        height: 500px;
        background-size: contain!important;
        padding: 50px 30px 30px 30px!important;
    }
}



.highlight-footer__block h3 {
    font-size: 36px;
    text-transform: uppercase;
    line-height: 36px;
    margin-bottom: 30px;
}
.highlight-footer__block .footer-text {
    margin-bottom: 30px;
}

.highlight-footer__block a p {
    margin-left: 12px;
}

.footer {
    background-color: #fff;
    padding-bottom: 60px;
}

.footer-contact {
    position: relative;
    margin-top: 70px;
    margin-bottom: 90px;
}

.footer-contact p {
    color: #11111F;
    margin-bottom: 0;
}

.footer-contact a {
    color: #11111F;
    text-decoration: none;
    line-height: 24px;
    display: inline-block;
}

.footer-contact a:hover {
    text-decoration: underline;
}

.footer-contact-items {
    padding-top: 50px;
}

.footer-contact-items img {
    max-width: 100%;
}

.footer-contact-items p {
    border-bottom: 1px solid #D9D5CE;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.button {
    -webkit-transition: background-color 100ms linear;
    -ms-transition: background-color 100ms linear;
    transition: background-color 100ms linear;
}

.button:hover {
    color: #fff;
    background-color: rgba(233,84,146, .9);
    text-decoration: underline;
}


.flex-link {
    display: inline-flex;
    height: 100%;
    justify-content: end;
    align-items: center;
    width: 100%;
}

@media (min-width: 768px) {
    /*.footer-contact-items .col-md-3 {*/
    /*    flex: 0 0 auto;*/
    /*    width: calc(25% + 34px);*/
    /*}*/

    /*.footer-contact-items .col-md-3:last-child {*/
    /*    margin-left: calc(10% + 10px);*/
    /*}*/
}

@media (min-width: 1280px) and (max-width: 1399px) {
    /*.footer-contact-items .col-md-3 {*/
    /*    flex: 0 0 auto;*/
    /*    width: calc(25% + 27px);*/
    /*}*/
}

@media (min-width: 992px) and (max-width: 1279px) {
    .header-text h1 {
        font-size: 61px;
        line-height: 61px;
    }

    .highlight-footer__block {
        padding: 45px 38px 35px 38px;
        background-size: contain;
    }

    .text-image h2,
    .text h2 {
        font-size: 42px;
        line-height: 42px;
    }

    /*.footer-contact-items .col-md-3:last-child {*/
    /*    margin-left: 6%;*/
    /*}*/
}

@media (min-width: 768px) and (max-width: 1399px) {
    .information ul li {
        display: flex;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .information ul li span{
        min-width: 124px;
    }
}

@media (min-width: 992px) and (max-width: 1279px) {
    .highlight-footer__block {
        padding: 45px 60px 35px 38px;
        background-size: contain;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .header-text h1 {
        font-size: 34px;
        line-height: 40px;
    }
    .header-highlight {
        width: 330px;
        background-size: contain;
        padding: 25px 25px 13px 25px;
    }

    .header-highlight .date {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .header-highlight a svg {
        width: 36px;
    }

    .col-higlight-block {
        width: 50%;
    }

    .highlight-footer__block {
        padding: 26px 20px 20px 20px;
        background-size: contain;
    }

    .highlight-footer__block h3 {
        font-size: 28px;
        line-height: 28px;
    }

    .highlight-footer__block .footer-text {
        padding-right: 14px;
    }

    .highlight-footer__block a svg{
        width: 36px;
    }

    .order h2 {
        font-size: 76px;
        line-height: 76px;
    }

    .text-image h2 {
        font-size: 32px;
        line-height: 32px;
        margin-bottom: 24px;
    }

    .information {
        margin-top: 44px;
        padding-bottom: 40px;
    }

    .information h2 {
        padding-top: 80px;
        font-size: 32px;
    }

    .text {
        padding-top: 110px;
        padding-bottom: 10px;
    }

    .text h2 {
        font-size: 32px;
        line-height: 32px;
    }

    /*.footer-contact-items .col-md-3 {*/
    /*    width: 50%;*/
    /*}*/

    /*.footer-contact-items .col-md-3:last-child {*/
    /*    margin-left: 0;*/
    /*}*/
}

@media (max-width: 767px) {
    .header-button {
        display: none;
    }

    .header-wrapper {
        background-image: url(../images/hero-image-mobile.png);
        background-position: center;
        background-size: cover;
        position: relative;
    }

    .logo img {
        max-width: 100px;
    }

    .header-block,
    .header-text {
        width: 100%;
    }

    .header-text {
        padding-bottom: 0;
    }

    .header-block {
        padding-bottom: 140px;
    }

    .header-highlight {
        max-width: 100%;
        background-size: contain;
        position: absolute;
        background-image: url(../images/highlight-block-mobile.svg);
        padding-bottom: 35%;
    }

    .header-text h3 {
        line-height: 23px;
        font-size: 18px;
    }

    .header-wrapper-top {
        padding-top: 10px;
    }

    .header-text h1 {
        font-size: 52px;
        line-height: 52px;
    }

    .header-text:after {
        width: 100%;
    }

    .header-wrapper:before {
        content: '';
        background-image: url(../images/header-top-mobile.svg);
        height: 40px;
        background-size: 100%;
    }

    .header-highlight svg {
        width: 42px;
    }

    .header-highlight .date {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .wrapper {
        padding-top: 60%;
    }

    .text-regular {
        font-size: 15px;
        line-height: 22px;
    }

    .mb-30 {
        margin-bottom: 20px;
    }

    .text-image h2 {
        font-size: 36px;
        line-height: 36px;
        margin-top: 40px;
    }

    .text-image p {
        font-size: 15px;
        line-height: 22px;
    }

    .button-skewed {
        background-size: contain;
        font-size: 15px;
    }
    .button-pink {
        background-size: contain;
        font-size: 15px;
        top: -3px;
    }

    .information:before {
        background-image: url(../images/information-top-mobile.svg);
        background-size: 106%;
        height: 20px;
        top: -1px;
        position: absolute;
    }

    .information {
        padding-bottom: 60px;
    }

    .information h2 {
        padding-top: 80px;
        font-size: 30px;
        margin-bottom: 30px;
    }

    .information ul {
        position: relative;
        margin-bottom: 0;
    }

    .information ul li {
        padding-left: 21px;
        font-size: 15px;
        line-height: 24px;
    }

    .information ul li span {
        padding-left: 0;
    }

    .information ul li:before {
        position: absolute;
        left: 0;
    }

    .information:after {
        background-image: url(../images/information-bottom-mobile.svg);
        height: 20px;
        background-size: 106%;
        bottom: -19px;
        position: absolute;
        left: 0;
        right: 0;
    }

    .text {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .text h2 {
        font-size: 36px;
        line-height: 36px;
    }

    .text p {
        font-size: 15px;
        line-height: 22px;
    }

    .text__image {
        margin-top: 40px;
    }

    .order {
        padding: 100px 0 80px 0;
    }

    .order:before {
        background-image: url(../images/tickets-top-mobile.svg);
        background-size: 100%;
        height: 20px;
        top: -1px
    }

    .order h2 {
        font-size: 52px;
        line-height: 52px;
        text-transform: uppercase;
    }

    .order-item {
        font-size: 15px;
        background-size: contain;
        top: -20px;
        margin-bottom: -10px;
    }

    .order:after {
        background-image: url(../images/tickets-bottom-mobile.svg);
        background-size: 100%;
        height: 20px;
        bottom: -12px;
    }

    .order p {
        font-size: 15px;
        line-height: 22px;
    }

    .order .button {
        font-size: 15px;
    }

    .footer {
        background-color: #D9D5CE;
        padding-bottom: 0;
    }

    .highlight-footer {
        padding-top: 40px;
        overflow: hidden;
    }

    .footer-contact p,
    .footer-contact a {
        font-size: 15px;
        line-height: 22px;
    }

    .highlight-footer__block {
        background-size: 100% auto;
        max-width: unset;
        padding: 50px 30px 50px 30px;
    }

    .highlight-footer__block h3 {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .highlight-footer__block .footer-text {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 20px;
    }

    .highlight-footer__block svg {
        width:42px;
    }

    .highlight-footer__block a p {
        margin-left: 12px;
        font-size: 15px;
        margin-bottom: 0;
        line-height: 22px;
    }

    .footer-contact {
        position: relative;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .footer-contact-items {
        padding-top: 0;
    }

    .footer-contact-items .row {
        background-color: #fff;
        position: relative;
    }

    .footer-contact-items .row:before {
        content: "";
        position: absolute;
        width: 999px;
        height: 100%;
        background-color: #fff;
        left: -999px;
        top: 0;
    }

    .footer-contact-items .row:after {
        content: "";
        position: absolute;
        width: 999px;
        height: 100%;
        background-color: #fff;
        right: -999px;
        top: 0;
    }

    .footer-contact-items .row.row-nopseudo:before,
    .footer-contact-items .row.row-nopseudo:after {
        display: none;
    }

    .row-pt {
        padding-top: 40px;
    }

    .row-pb {
        padding-bottom: 50px;
    }

    .footer-contact-items p {
        font-size: 15px;
        line-height: 24px;
    }

    .col-logo {
        width: auto;
    }

    .logos {
        margin-top:30px
    }
}

@media (min-width: 377px) and (max-width: 405px) {
    .highlight-footer__block {
        padding: 50px 30px 80px 30px;
    }
}

@media (min-width: 406px) and (max-width: 434px) {
    .highlight-footer__block {
        padding: 50px 30px 130px 30px;
    }
}

@media (min-width: 435px) and (max-width: 500px) {
    .highlight-footer__block {
        padding: 50px 30px 222px 30px;
    }
}

@media (min-width: 501px) and (max-width: 767px) {
    .highlight-footer__block {
        background-size: 100% auto;
        max-width: unset;
        padding: 50px 30px 65px 30px;
    }
}

@media (min-width: 540px) and (max-width: 575px) {
    .highlight-footer__block {
        background-size: 100% auto;
        max-width: unset;
        padding: 50px 30px 32px 30px;
    }
}

@media (max-width: 635px) {
    .wrapper {
        padding-top: 70%;
    }
}

@media (max-width: 562px) {
    .wrapper {
        padding-top: 84%;
    }
}

@media (max-width: 387px) {
    .wrapper {
        padding-top: 75%;
    }
}

@media (max-width: 400px) {
    .header-highlight {
        padding: 50px 40px 50px 40px;
        background-image: url(../images/highlight-block-mobile-alt.svg);
    }
}

@media (max-width: 400px) {
    .header-highlight {
        padding: 26px 40px 20px 40px;
    }
}

@media (max-width: 320px) {
    .header-highlight .date {
        font-size: 26px;
        line-height: 26px;
        margin-bottom: 10px;
    }
}

@media (min-width: 371px) and (max-width: 400px){
    .header-highlight {
        padding: 66px 40px 40px 40px;
    }
}

@media (max-width:371px) {
    .header-highlight .date {
        margin-bottom: 14px;
    }

    .mb-30 {
        margin-bottom: 10px;
    }
}

.button-link .ring-color {
    display: none;
}

.button-link:hover .ring-color {
    display: block;
}

.logo-115 {
    max-width: 115px!important;
    width: 100%;
}

.logo-80 {
    max-width: 80px!important;
    width: 100%;
}

.logo-70 {
    max-width: 70px!important;
    width: 100%;
}