﻿.hero {
    position: relative;
    max-height: 100vh;
    height: calc(var(--vh, 1vh) * 128);
    min-height: 480px;
    overflow: hidden;
}

    .hero .slide-inner .scrim-nav {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        background: linear-gradient(180deg, rgba(2, 9, 13, .75) 0%, rgba(2, 9, 13, 0) 85%);
        z-index: 1;
        height: 50%;
        pointer-events: none;
    }

    .hero .slide-inner .scrim-nav.purple {
        background: linear-gradient(180deg, rgba(52, 5, 32, .8) 0%, rgba(52, 5, 32, 0) 85%);
    }

    .hero .swiper-navigation {
        position: absolute;
        bottom: 50px;
        left: 0;
        z-index: 10;
    }

    .hero .swiper-container-vertical > .swiper-pagination-bullets {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

.theme-dark .hero:first-child .slide-inner .scrim-dark {
    content: '';
    display: block;
    position: absolute;
    left: -2px;
    z-index: 1;
    bottom: 0;
    right: -2px;
    height: 360px;
    width: calc(100% + 4px);
    background: linear-gradient(0deg, #02090d 0%, rgba(2, 9, 13, 0) 100%);
}

.hero .swiper-slide {
    transform: translateZ(0);
    position: relative;
    overflow: hidden;
}

    .hero .swiper-slide .container,
    .hero .swiper-slide .row {
        height: 100%;
    }

.hero:not(.hero--short) .swiper-slide .row {
    align-items: start;
    padding-top: 12rem;
}

@media (min-width: 768px) {
    .hero:not(.hero--short) .swiper-slide .row {
        align-items: center;
        padding-top: 0;
    }
}

/*.hero.hero--short .swiper-slide .row {
    align-items: start;
    padding-top: 22rem;
}*/

.hero.hero--short {
    max-height: 63vh;
}

@media (min-width: 768px) and (max-height: 979px) {
    .hero.hero--short {
        max-height: 69vh;
    }
}

@media (min-width: 2400px) {
    .hero.hero--short {
        max-height: 69vh;
    }
}

.hero.hero--short .swiper-slide .row {
    align-items: center;
}

.hero .slide-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    will-change: transform;
    overflow: hidden;
}

.hero.hero--with-ads .slide-inner {
    transition: height 0.25s ease-in;
    height: calc((var(--vh, 1vh) * 100) - 106px);
}

@media (min-width: 768px) {
    .hero.hero--with-ads .slide-inner {
        height: calc(100% - 152px);
    }
}

.hero--with-ads .ads-container {
    transition: top 0.25s ease-in;
    position: absolute;
    z-index: 2;
    top: calc((var(--vh, 1vh) * 100) - 122px);
    width: 100%;    
    background-color: #FFF;
}

@media (min-width: 768px) {
    .hero--with-ads .ads-container {
        top: unset;
        bottom: 0;
        padding-bottom: 2.5rem;
    }
}

.hero--with-ads .ads__content {
    position: relative;
    background-color: #D9DADB;
    width: 320px;
    height: 100px;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .hero--with-ads .ads__content {
        width: 980px;
        height: 120px;
    }
}

.hero .hero__content {
    opacity: 0;
    transition: opacity .25s linear 0s, transform .5s ease .5s;
    max-width: 600px;
    transform: translateY(12px);
}

.hero .slide-inner__image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.slide-inner__image.apply-scrim:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    opacity: 1;
    background: rgba(0,0,0,.45);
}

.hero .u_image-cover, .hero .flockler__item img, .flockler__item .hero img, .hero .three-column .image img, .three-column .image .hero img,
.hero .scrim-nav,
.hero .scrim-dark {
    transition: transform .6s ease;
    transform: scale(1.08, 1.08);
}

.hero .swiper-slide-active .u_image-cover, .hero .swiper-slide-active .flockler__item img, .flockler__item .hero .swiper-slide-active img, .hero .swiper-slide-active .three-column .image img, .three-column .image .hero .swiper-slide-active img,
.hero .swiper-slide-active .scrim-nav,
.hero .swiper-slide-active .scrim-dark {
    transform: scale(1, 1);
}

.hero .swiper-slide-active .hero__content {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 1s ease .3s, transform .65s ease .2s;
}

.hero .hero__content {
    position: relative;
    z-index: 10;
}

.hero .hero__carousel {
    height: calc(100% + 2px);
}

.hero .swiper-pagination {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hero .swiper-pagination-bullet {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.75);
    opacity: 1;
}

@media (min-width: 768px) {
    .hero .swiper-pagination-bullet {
        width: 4px;
        height: 4px;
    }
}

.hero .swiper-pagination-bullet:focus {
    outline: 0 !important;
}

.hero .swiper-pagination-bullets {
    right: 75px;
    text-align: left;
    bottom: 110px;
    padding-left: 8.33333%;
}

@media (min-width: 768px) {
    .hero .swiper-pagination-bullets {
        bottom: 130px;
    }
}

.hero .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 18px;
}

@media (min-width: 1025px) {
    .hero .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 23px 0;
    }
}

.hero .swiper-pagination-bullet-active {
    background: #ffffff;
}

    .hero .swiper-pagination-bullet-active .path.circle {
        opacity: 1;
        -webkit-animation: dash 1s ease-in-out;
        animation: dash 1s ease-in-out;
    }

.hero .swiper-pagination-bullet {
    position: relative;
}

.hero .pagination-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.hero svg:not(.icon-arrow, .hero__masked, .svg-concave-short) {
    width: 24px;
    height: 24px;
    display: block;
}

@media (min-width: 768px) {
    .hero svg:not(.icon-arrow, .hero__masked, .svg-concave-short) {
        width: 34px;
        height: 34px;
    }
}

.hero .path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

    .hero .path.circle {
        opacity: 0;
    }

.hero .button--primary {
    margin-top: 1rem;
    border: 1px solid transparent;
    color: #ffffff;
}

@media (min-width: 1200px) and (min-height: 720px) {
    .hero .button--primary {
        margin-top: 5rem;
    }
}

.hero__content__header {
    padding-top: 2rem;
    margin: 0 auto;
    max-width: 600px;
}

@media (min-width: 768px) {
    .hero__content__header {
        position: relative;
    }
}

@media (min-width: 992px) {
    .hero__content__header {
        position: static;
    }
}

.hero__logo {
    width: 89px;
    margin: 0;
}

@media (min-width: 768px) {
    .hero__logo {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -32%;
    }
}

@media (min-width: 992px) {
    .hero__logo {
        width: 178px;
        right: calc((28% + 178px) * -1);
    }
}

@media (min-width: 1200px) {
    .hero__logo {
        right: calc((56% + 178px) * -1);
    }
}

.hero__logo + .h1 {
    margin-top: 3.2rem;
}

@media (min-width: 768px) {
    .hero__logo + .h1 {
        margin-top: 0;
    }
}

.hero__logo--sm {
    margin-bottom: 3.2rem;
}

@media (min-width: 768px) {
    .hero__logo--sm {
        display: none;
    }
}

.hero__logo--lg {
    display: none;
    right: 8.33333%;
}

@media (min-width: 768px) {
    .hero__logo--lg {
        display: block;
    }
}

@media (min-width: 1025px) {
    .hero__logo--lg {
        right: 155px;
    }
}

.hero + .two-column {
    padding-top: 0;
    margin-top: -25px;
}

.hero__show-scroll {
    position: absolute;
    bottom: 80px;
    left: 7.85%;
    width: 46px;
    height: 46px;
    display: none;
    pointer-events: none;
    z-index: 2;
}

@media (min-height: 800px) {
    .hero__show-scroll {
        bottom: 20%;
        left: calc(100vw - 117px);
    }
}

@media (min-width: 1640px) {
    .hero__show-scroll {
        left: calc(100vw - 125px);
    }
}

.hero__show-scroll img {
    width: 100%;
    height: 100%;
}

@media (min-width: 1200px) and (min-height: 720px) {
    .hero:first-child .hero__show-scroll {
        display: block;
    }
}

.bg-video-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

    .bg-video-container .bg-video {
        width: 100%;
        height: 100%;
    }


.slide-inner__image .u_image-cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    background-position: center center;
}

/* EG Hero */

.hero__content__header h1 {
    font-size: 3rem;
    font-weight: 700;
}

@media (min-width: 576px) {
    .hero__content__header h1 {
        font-size: 2.8rem;
    }
}

@media (min-width: 768px) {
    .hero__content__header h1 {
        font-size: 3rem;
    }
}

@media (min-width: 992px) {
    .hero__content__header h1 {
        font-size: 3.8rem;
    }
}

@media (min-width: 1120px) {
    .hero__content__header h1 {
        font-size: 4.4rem;
    }
}

@media (min-width: 1260px) {
    .hero__content__header h1 {
        font-size: 5.5rem;
    }
}

.hero__content__header h3 {
    font-size: 1.6rem;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .hero__content__header h3 {
        font-size: 2.2rem;
        margin-top: 2rem;
    }
}

.hero__content {
    margin-left: 0;
}

@media (min-width: 576px) {
    .hero__content {
        margin-left: 3rem;
    }
}

@media (min-width: 1000px) {
    .hero__content {
        margin-left: 8rem;
    }
}

@media (min-width: 1900px) {
    .hero__content {
        margin-left: 3rem;
    }
}

.hero__content__header p {
    font-size: 1rem;
    margin-top: 2rem;
}

@media (min-width: 576px) {
    .hero__content__header p {
        font-size: 1rem;
        margin-top: 1rem;
    }
}

@media (min-width: 768px) {
    .hero__content__header p {
        font-size: 1.2rem;
        margin-top: 2rem;
    }
}

@media (min-width: 992px) {
    .hero__content__header p {
        font-size: 1.5rem;
        margin-top: 2.5rem;
        line-height: 1.9rem;
    }
}

@media (min-width: 1120px) {
    .hero__content__header p {
        font-size: 1.6rem;
        margin-top: 2.5rem;
        line-height: 2rem;
    }
}

.hero__content h4 {
    color: #ffffff;
}

.hero__show-scroll {
    display: none !important;
}

.slide-inner .offset-1 {
    margin-left: 1rem;
}

@media (min-width: 760px) {
    .slide-inner .offset-1 {
        margin-left: unset;
    }
}

.hero .svg-container svg {
    width: 100%;
}

.hero__mobile img {
    max-width: unset;
}

.hero--short .hero__content {
    text-align: center !important;
    max-width: unset !important;
    margin-left: unset !important;
}

/**/

.slide-inner__image .svg-container {
    position: absolute;
    bottom: -2px;
    width: calc(100% + 10px);
    left: -5px;
    z-index: 99;
}

.slide-inner__image.default-image .svg-container {
    bottom: 4vw;
}

@media (min-width: 576px) {
    .slide-inner__image .svg-container,
    .slide-inner__image.default-image .svg-container {
        bottom: -9vw;
    }
}

svg.pagination-circle circle {
    stroke: #ffffff;
}

/**/

@media (max-width: 992px) {
    .page-igbenefits .hero__content__header h3,
    .page-igolfinsurance .hero__content__header h3,
    .page-igolflogin .hero__content__header h3,
    .page-igolfnewsletter .hero__content__header h3,
    .page-igolfsignup .hero__content__header h3,
    .page-igolfsignupconfirmation .hero__content__header h3,
    .page-igolfsignupnoeligibilitycheck .hero__content__header h3,
    .page-igolfsignuppaymentunsuccessful .hero__content__header h3,
    .page-igolftermsandconditions .hero__content__header h3,
    .page-igolfvoucher .hero__content__header h3,
    .page-igolfvoucherconfirmation .hero__content__header h3,
    .page-igolfvoucherpaymentfailed .hero__content__header h3,
    .page-igolfvouchertermsandconditions .hero__content__header h3 {
        display: none;
    }
}

.hero__show-scroll {
    display: none !important;
}

.course-detail__hero,
.short__hero {
    overflow: hidden;
    position: relative;
}

    .course-detail__hero:before {
        content: '';
        display: block;
        width: 100%;
        height: 50px;
        background-color: #02090D;
        position: absolute;
        left: 0;
    }

@media (min-width: 768px) {

    .course-detail__hero:before,
    .short__hero:before {
        height: 225px;
    }
}

@media (min-width: 992px) {

    .course-detail__hero:before,
    .short__hero:before {
        height: 210px;
    }
}

.course-detail__hero .hero,
.short__hero .hero {
    min-height: 0;
    height: 192px;
}

@media (min-width: 1638px) {
    .course-detail__hero .hero {
        margin-left: calc((100vw - 1636px) / 2 * -1);
    }
}

@media (min-width: 576px) {

    .course-detail__hero .hero,
    .short__hero .hero {
        height: 240px;
    }
}

@media (min-width: 768px) {

    .course-detail__hero .hero,
    .short__hero .hero {
        height: 360px;
    }
}

@media (min-width: 992px) {

    .course-detail__hero .hero,
    .short__hero .hero {
        height: 460px;
    }
}

@media (min-width: 992px) and (min-width: 1025px) {
    .course-detail__hero .hero {
        margin-right: -50px;
    }
}

@media (min-width: 1025px) {

    .course-detail__hero .swiper-pagination-bullets .swiper-pagination-bullet,
    .short__hero .swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 20px 0;
    }
}

.course-detail__hero .hero .swiper-pagination-bullets,
.short__hero .hero .swiper-pagination-bullets {
    bottom: 34px;
}

@media (min-width: 768px) {

    .course-detail__hero .hero .swiper-pagination,
    .short__hero .hero .swiper-pagination {
        padding-left: 0;
    }

    .course-detail__hero .hero .swiper-pagination-bullets,
    .short__hero .hero .swiper-pagination-bullets {
        bottom: 50px;
        text-align: center;
    }
}

@media (min-width: 1638px) {

    .mac .course-detail__hero .hero,
    .mac .short__hero .hero {
        margin-left: calc((((100vw - 1636px) / 2) + 10px) * -1);
    }
}


.hero__content__header h1 {
    font-size: 2.8rem;
    line-height: 1.254545454545455;
    letter-spacing: 0.01em;
}

@media (min-width: 375px) {
    .hero__content__header h1 {
        font-size: 28px;
    }
}

@media screen and (min-width: 375px) and (max-width: 375px) {
    .hero__content__headerh1 {
        font-size: calc(28px + 14 * ((100vw - 375px) / 445)) !important;
    }
}

@media screen and (min-width: 375px) and (min-width: 820px) {
    .hero__content__header h1 {
        font-size: 42px;
    }
}

@media (min-width: 820px) {
    .hero__content__header h1 {
        font-size: 42px;
    }
}

@media screen and (min-width: 820px) and (min-width: 820px) {
    .hero__content__header h1 {
        font-size: calc(42px + 13 * ((100vw - 820px) / 580));
    }
}

@media screen and (min-width: 820px) and (min-width: 1400px) {
    .hero__content__header h1 {
        font-size: 54px;
    }
}

.hero__content__header h3 {
    font-size: 2.2rem;
    line-height: 1.3125;
    letter-spacing: 0.01em;
}

@media (min-width: 375px) {
    .hero__content__header h3 {
        font-size: 22px;
    }
}

@media screen and (min-width: 375px) and (min-width: 375px) {
    .hero__content__header h3 {
        font-size: calc(12px + 6 * ((100vw - 375px) / 445));
    }
}

@media screen and (min-width: 375px) and (min-width: 820px) {
    .hero__content__header h3 {
        font-size: 14px;
    }
}

@media (min-width: 820px) {
    .hero__content__header h3 {
        font-size: 18px;
    }
}

@media screen and (min-width: 820px) and (min-width: 820px) {
    .hero__content__header h3 {
        font-size: calc(18px + 4 * ((100vw - 820px) / 580));
    }
}

@media screen and (min-width: 820px) and (min-width: 1400px) {
    .hero__content__header h3 {
        font-size: 18px;
    }
}

@media (min-width: 1200px) {
    .short__hero .col-xl-5 {
        flex: 0 0 70%;
        max-width: 70%;
    }
}

@media (min-width: 992px) {
    .short__hero .col-lg-6 {
        flex: 0 0 70%;
        max-width: 70%;
    }
}

.hero .hero__content {
    max-width: unset;
}

.hero__content__header h1 strong {
    font-weight: 700 !important;
}

@media screen and (max-width: 767px) {
    .hero__content__header img {
        width: 100px !important;
        height: 100px !important;
    }

    .hero__content__header table tr > td:first-child {
        width: 120px !important;
    }

    .hero__content__header h1 {
        font-size: 26px;
    }

    .hero .hero__content {
        margin-top: unset;
    }
}

@media only screen and (max-width: 575px) {
    .hero {
        min-height: 400px;
        max-height: calc(550px + (630 - 550) * ((100vw - 300px) / (425 - 300)));
    }

        .hero.hero--with-ads .slide-inner {
            max-height: calc(400px + (500 - 400) * ((100vw - 300px) / (425 - 300)));
        }

    .hero--with-ads .ads-container {
        top: calc(400px + (490 - 400) * ((100vw - 300px) / (425 - 300)));
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .hero {
        min-height: 450px;
        max-height: calc(600px + (630 - 550) * ((100vw - 300px) / (425 - 300)));
    }

        .hero.hero--with-ads .slide-inner {
            max-height: calc(450px + (500 - 400) * ((100vw - 300px) / (425 - 300)));
        }

    .hero--with-ads .ads-container {
        top: calc(450px + (490 - 400) * ((100vw - 300px) / (425 - 300)));
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero {
        min-height: 500px;
        max-height: calc(700px + (630 - 550) * ((100vw - 300px) / (425 - 200)));
    }

        .hero.hero--with-ads .slide-inner {
            max-height: calc(500px + (500 - 400) * ((100vw - 300px) / (425 - 200)));
        }

    .hero--with-ads .ads-container {
        top: calc(550px + (490 - 400) * ((100vw - 300px) / (425 - 200)));
    }
}