// Import vars & import files
@import "vars";

// DEFAULT FRAMEWORK MODULES
@import "framework/framework";

// Import base folder
/* .. */

// Import layout folder
@import "layout/footer";

// Import elements folder
@import "elements/blocks/contentblocks";
@import "elements/blocks/courses";
@import "elements/blocks/newsitems";
@import "elements/blocks/infographics";
@import "elements/blocks/blocks";
@import "elements/blocks/flash";
@import "elements/slick";
@import "elements/pikaday";
@import "elements/cookie";
@import "elements/fancybox";
@import "elements/modal";
@import "elements/reservations";
@import "elements/alert";

/* ------- Fade elements in AFTER defer is ready ------- */

strong,b {
    font-family: $font-bold;
}

.after-defer {
    opacity: 1;
}

.show-md {
    display: block;

    @include media-query(lg) {
        display: none;
    }
}

.row ._text .inner ul {
    padding: 0 2rem;
    margin-bottom: 2rem;
}

.homepage-lead {
    background: color(grey);
    padding: 12rem 0 0 0;

    @include media-query(lg){
        padding-top: 6rem;
    }

    .events-latest {
        margin-top: -5rem;
    }
}

.lead {
    background: color(grey);
    padding: 12rem 0 3rem 0; 

    @include media-query(lg) {
        padding: 12rem 0 7rem 0;
    }

    .lead__overview {
        padding-bottom: 2rem;
        @include media-query(lg) {
            padding-bottom: 5rem;
        }
        a {
            text-decoration: none;
            padding-left: 2rem;
            background: url('../img/icon-arrow-left.svg') no-repeat center left;
            background-size: 10px 10px;
            &:hover {
                color: color(green);
            }
        }
    }
}

#event-detail {
    background: color(grey);
    padding: 10rem 0 7rem 0;

    .event-detail__overview {
        background: url('../img/icon-arrow-left.svg') no-repeat left center;
        background-size: 8px 8px;
        padding-left: 2rem;
        text-decoration: none;
        &:hover {
            color: color(green)
        }
    }

    .column._text {
        .inner {
            padding-bottom: 5rem;

            a {
                color: color(blue);
            }
        }
    }

    .events-detail__route {
        padding-bottom: 3rem;
        margin-top: -1.5rem;
        color: rgba(color(brand), .8);
    }

    .event-detail__subscribe {
        clear: both;
        @include media-query(md){
            max-width: 65%;
        }

        p {
            padding-bottom: 3rem;
        }

        .button {
            margin-right: 3rem;
        }
    }

}

.infographics {
    background: color(grey);
    padding: 7rem 0 4rem 0;

    @include media-query(xl) {
        padding: 10rem 0 10rem 0;
    }

    .infographic {
        margin-bottom: 0;

        &:first-child {
            margin-bottom: 5rem;

            @include media-query(xxl) {
                margin-bottom: 0;
            }
        }

    }

    &.infographics--acount {
        padding: 0;
        background: transparent;
        margin-top: 16rem;
        width: calc(100% + 5rem);

        @include media-query(md) {
            margin-top: 10rem;
        }

        @include media-query(lap) {
            width: 100%;
        }
    }
}

.primary-section {
    background: color(brand-sec);
    padding: 5rem 0;

    @include media-query(lg) {
        padding: 10rem 0;
    }
}

.section-error-page {
    background: color(brand-sec);
    padding: 10rem 0;

    @include media-query(lg) {
        padding: 13rem 0;
    }
}

.secondary-section {
    background: color(grey);
    padding: 5rem 0;

    @include media-query(lg) {
        padding: 10rem 0;
    }

    &.secondary-section--no-padding-top {
        padding-top: 0;
    }

    &.secondary-section--no-padding {
        padding: 0;
    }
}

.events-section {
    padding-bottom: 0;
    padding-top: 7rem;
    @include media-query(lg) {
        padding-bottom: 10rem;
        padding-top: 5rem;
    }
}

.gradient-section {
    background: color(grey);
    background: gradient("grey");
}

.about {
    padding: 5rem 0;

    @include media-query(md) {
        padding: 10rem 0;
    }

    .column {
        &:first-child {
            .inner {
                padding-right: 0;
            }
        }

        &:last-child {
            .inner {

                @include media-query(md) {
                    padding-right: 10rem;
                }
            }
        }

        .image-wrapper {
            position: relative;
            margin-bottom: 5rem;

            &:after {
                content: "";
                position: absolute;
                width: 10rem;
                height: 10rem;
                background: url('../img/image-background.svg');
                background-size: 10rem 10rem;
                right: 0rem;
                bottom: -2rem;

                @include media-query(md) {
                    width: 17.4rem;
                    height: 17.4rem;
                    background-size: 17.4rem 17.4rem;
                    right: -3.75rem;
                    bottom: -3.75rem;
                }
            }

            img {
                float: left;
                position: relative;
                width: -webkit-calc(100% - 20px);
                width: calc(100% - 20px);
                height: auto;
                z-index: 1;

                @include box-shadow();

                @include media-query(md) {
                    float: right;
                    width: 100%;
                }
            }
        }
    }
}

.how-it-works {
    padding-top: 7rem;
}

.partners {
    background: color(grey);
    padding: 5rem 0;

    @include media-query(md) {
        padding: 10rem 0;
    }

    h2 {
        max-width: 40rem;
    }

    .courses-collection {

        .slick-list {
            margin-left: -5rem !important;
        }

        .column {
            &:first-child {

                .course {
                    &:after {
                        content: "";
                        position: absolute;
                        width: 10rem;
                        height: 10rem;
                        background: url('../img/image-background.svg');
                        background-size: 10rem 10rem;
                        left: -2.2rem;
                        bottom: -2.2rem;

                        @include media-query(lg){
                            width: 17.4rem;
                            height: 17.4rem;
                            left: -3.75rem;
                            bottom: -3.75rem;
                        }
                    }
                }
            }
        }
    }

    .more-partners {
        text-align: center;
        padding-top: 7rem;

        p {
            font-size: 2.4rem;
            line-height: 2.7rem;
            font-family: "Axiforma-Medium";

            @include media-query(md) {
                font-size: 3rem;
                line-height: 4.2rem;
            }
        }
    }
}


.rankings {
    background: color(grey);
    padding: 5rem 0 1rem 0;

    @include media-query(md) {
        padding: 10rem 0;
    }

    p {
        padding: 0;
        margin: 0;
    }

    .ranking-years {
        ul {
            display: flex;
            list-style: none;
            padding: 0 0 5rem 0;
            margin: 0;

            @include media-query(md){
                margin: 3rem 0 0;
            }

            li {
                display: inline-block;
                margin-right: 1rem;

                a {
                    height: auto;
                    width: auto;
                    background: color(brand-sec);
                    padding: .6rem 2rem;
                    border: 0.1rem solid rgba(color(brand), 0.09);
                    color: color(blue);
                    text-decoration: none;
                    font-size: 1.4rem;
                    line-height: 3.3rem;
                    display: inline-block;
                }

                &.active {
                    a {
                        background: color(blue);
                        color: color(brand-sec);
                    }
                }
            }
        }
    }

    .js-rankings {
        h2 {
            font-size: 3rem;
            padding-bottom: 1.5rem;
        }
    }
}

.news {
    @extend .gradient-section;
    padding: 12rem 0 10rem 0;

    a {
        text-decoration: none;
    }

    .more-news {
        text-align: center;
        padding-top: 7rem;

        p {
            font-size: 2.4rem;
            line-height: 2.7rem;

            @include media-query(md) {
                font-size: 3rem;
                line-height: 4.2rem;
            }
        }
    }
}

.join {
    position: relative;
    padding: 5rem 0;
    background: color(blue);
    text-align: center;

    @include media-query(lg) {
        padding: 10rem 0;
    }

    .container {
        position: relative;
        &:after {
            display: none;

            @include media-query(lg) {
                display: block;
                content: "";
                position: absolute;
                width: 17rem;
                height: 17rem;
                background: url('../img/footer-background.svg');
                background-size: 17rem 17rem;
                right: 3.5rem;
            }
        }
    }

    h2 {
        color: color(brand-sec);
        font-size: 3rem;
        line-height: 3.6rem;
        padding-bottom: 3rem;

        @include media-query(md) {
            font-size: 4.2rem;
            line-height: 5.2rem;
        }
    }

    p {
        color: color(brand-sec);
        padding-bottom: 3.5rem;
    }
}

.map {
    width: 100%;
    padding: 0;

    .container-fluid {
        padding-left: 0;
        padding-right: 0;
    }

    .container {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        bottom: 50px;
        z-index: 2;
    }

    .row {
        padding: 0;
        margin: 0;

        .column {
            padding: 0;
            margin: 0;
        }
    }

    .inner {
        p {
            display: none;
        }
    }

    .search {
        position: absolute;
        width: -webkit-calc(100% - 3rem);
        width: calc(100% - 3rem);
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(90%);
        transform: translateX(-50%) translateY(90%);
        bottom: 0;
        padding: 30px;
        background: color(brand-sec);

        @include media-query(lg) {
            width: 33%;
            left: 3.5rem;
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }

        .input-group {
            &:before {
                background: url("/igolf/img/icon-route.svg") no-repeat left bottom;
                background-size: 1.2rem;
            }
        }
    }

    #map {
        position: relative;
        width: 100%;
        height: 37rem;
        z-index: 1;

        @include media-query(lg) {
            height: 60rem;
        }
    }
}

.gm-style {
    .gm-style-iw-c {
        border-radius: 0 !important;
    }
    .gm-style-iw-d {
        overflow: auto !important;
    }
}

.gm-style-iw {
    padding: 0 !important;
    border-radius: 0;

    >button {
        top: 0 !important;
        right: 0 !important;
        background: url('../img/close-white.svg') no-repeat center center !important;
        background-size: 10px 10px !important;
        img {
            visibility: hidden !important;
        }
    }

    .marker-infowindow {
        padding: 0;
        width: 32.5rem;

        img {
            display: none;

            @include media-query(lg) {
                display: block;
                width: 100%;
            }
        }

        .course-infowindow__image {
            display: none;

            @include media-query(xxl) {
                display: block;
            }
        }


        .content {
            padding: 1.5rem 2rem;
            font-family: $font-base;
            size: 1.4rem;
        }
    }
}

.courses {
    padding: 18rem 0 7rem 0;

    @include media-query(lg) {
        padding: 7rem 0;
    }
}

.pagination {
    margin-top: 2rem;

    ul {
        list-style: none;
        padding: 0;

        li {
            a {
                float: left;
                width: 46px;
                height: 46px;
                line-height: 46px;
                text-align: center;
                background: color(brand-sec);
                color: color(blue);
            }

            &.active {
                a {
                    background: color(blue);
                    color: color(brand-sec);
                }
            }
        }
    }
}

.course-section {
    background: color(grey);
    padding: 10rem 0 10rem 0;
}

.course-section__schedule, .course-section__program {

    &.course-section__schedule-table {
        table {
            tr {
                td {
                    @media only screen and (max-width: 768px) {
                        width: 100% !important;
                        height: auto !important;
                    }
                }
            }
        }
    }

    table {
        width: 100%;
        border-collapse:separate;
        border-spacing:0 0.5rem;
        margin-bottom: 5rem;

        tr {
            width: 100%;
            -webkit-box-shadow: 0px 0px 5px 2px rgba(color(brand),0.02);
            box-shadow: 0px 0px 5px 2px rgba(color(brand),0.02);

            td {
                position: relative;
                display: block;
                width: 100%;
                padding: 0;
                padding-left: 6rem;
                background: color(brand-sec);

                @include media-query(md) {
                    display: table-cell;
                    width: auto;
                    padding: 1rem;
                    margin-bottom: 0.5rem;
                }

                &:first-child {
                    @include media-query(md) {
                        padding-left: 3rem;
                    }
                }

                &:last-child {
                    @include media-query(md) {
                        padding-right: 3rem;
                    }
                }

                &.icon {
                    width: 8rem;
                    img {
                        float: left;
                        margin: 1rem 2rem 0 0;
                        width: auto;
                    }
                }

                .name {
                    font-family: $font-heading;
                    font-size: 2.1rem;
                }

                .ranking {
                    opacity: 0.5;
                }

                .date {
                    position: relative;

                    &:before {
                        content: "";
                        display: inline-block;
                        width: 2rem;
                        height: 2rem;
                        background: url('/igolf/img/icon-calendar-green.svg');
                        background-size: 2rem 2rem;
                        margin: 0 1rem -0.3rem 0;
                    }
                }

                .button {

                    background-color: transparent;
                    border: 0.1rem solid color(blue);
                    color: color(blue);

                    @include media-query(md) {
                        float: right;
                    }
                }
            }
        }
    }
}

.course-section__schedule {
    table {
        tr {
            position: relative;

            td {
                &:first-child {
                    padding-top: 2rem;

                    @include media-query(md) {
                        padding-top: 1rem;
                        width: 30rem;
                    }

                    &:before {
                        content: "";
                        position: absolute;
                        display: inline-block;
                        width: 2rem;
                        height: 2rem;
                        background: url('../img/icon-calendar.svg');
                        background-size: 2rem 2rem;
                        top: 2.8rem;
                        left: 2rem;

                        @include media-query(md) {
                            position: relative;
                            margin: 0 1rem -0.4rem 0;
                            top: auto;
                            left: auto;
                        }
                    }
                }

                &:nth-child(2) {
                    color: rgba(color(brand), 0.5);
                    padding-bottom: 1.5rem;

                    @include media-query(md) {
                        padding-bottom: 1rem;
                    }
                }

                &:last-child {
                    padding-bottom: 3rem;
                    margin-bottom: 1rem;

                    @include media-query(md) {
                        padding-bottom: 1rem;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

.course-section__program {
    table {
        tr {
            position: relative;

            td {
                &:first-child {
                    padding-top: 2rem;

                    @include media-query(md) {
                        padding-top: 1rem;
                        width: 30rem;
                    }

                    &:before {
                        content: "";
                        position: absolute;
                        display: inline-block;
                        width: 2rem;
                        height: 2rem;
                        background: url('../img/icon-time.svg');
                        background-size: 2rem 2rem;
                        top: 2.8rem;
                        left: 2rem;

                        @include media-query(md) {
                            position: relative;
                            margin: 0 1rem -0.4rem 0;
                            top: auto;
                            left: auto;
                        }
                    }
                }

                &:nth-child(2) {
                    color: rgba(color(brand), 0.5);
                    padding-bottom: 1.5rem;

                    @include media-query(md) {
                        padding-bottom: 1rem;
                    }
                }

                &:last-child {
                    padding-bottom: 3rem;
                    margin-bottom: 1rem;

                    @include media-query(md) {
                        padding-bottom: 1rem;
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}

.course-section__content {
    padding: 0 0 10rem 0;
    background: color(grey);
}

.course-options {
    background: color(grey);
}

.blocks {
    display: flex;

    .column {
        margin-bottom: 3rem;
    }
}

.container--course-carousel {
    @media screen and (max-width: 992px) {
        width: 100%;
        max-width: 100%;
        padding: 0;

        .carousel {
            &:after {
                display: none;
            }
        }
    }
}

.carousel {
    margin: 0;

    .slick-list {
        position: relative;
        z-index: 2;
    }

    &:after {
        content: "";
        position: absolute;
        width: 17.4rem;
        height: 17.4rem;
        background: url('../img/image-background.svg');
        background-size: 17.4rem 17.4rem;
        right: -1.8rem;
        bottom: -2.3rem;
        z-index: 1;
    }
}

.news-content {
    padding: 5rem 0;
}

.contact-blocks {
    background: color(grey);
    padding-top: 3rem;

    .column {
        margin-bottom: 3rem;

        &:last-child {
            .inner {
                background: color(blue);
                color: color(brand-sec);

                h2 {
                    color: color(brand-sec);
                }
            }
        }

        .inner {
            position: relative;
            height: 100%;
            padding: 3rem;

            background: color(brand-sec);
            -webkit-box-shadow: 0px 0px 5px 2px rgba(color(brand),0.02);
            box-shadow: 0px 0px 5px 2px rgba(color(brand),0.02);

            .image-wrapper {
                display: inline-block;
                height: 4.5rem;
                width: 100%;
                text-align: center;

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

            h2 {
                font-size: 3rem;
                line-height: 4.2rem;
                padding: 1rem 0;
                margin: 0;
            }

            p {
                line-height: 2.4rem;
            }

            &:after {
                content: "";
                position: absolute;
                width: 4rem;
                height: 9rem;
                background: url('../img/article-background.svg');
                background-size: 4rem 9rem;
                background-position: top center;
                top: 3rem;
                right: 0;
                z-index: 1;
            }
        }
        &:nth-child(3) .inner:after {
            background-image: url('../img/article-background-light.svg');
        }
    }
}

.events {
    .column {
        margin-bottom: 3rem;
    }
}

.contact-form {

    form {
        margin-bottom: 5rem;

        .col-xs-12 {
            width: 100%;
            padding-right: 1.5rem;
            padding-left: 1.5rem;

            &:nth-child(1) {
                .input-group {
                    &:before {
                        background-image: url('../img/icon-input-name.svg');
                    }
                }
            }

            &:nth-child(2) {
                .input-group {
                    &:before {
                        background-image: url('../img/icon-input-email.svg');
                    }
                }
            }

            &:nth-child(3) {
                .input-group {
                    &:before {
                        background-image: url('../img/icon-input-comment.svg');
                    }
                }
            }

            .input-group {
                position: relative;
                width: 100%;

                textarea {
                    background: none;
                    height: 7.5rem;
                    overflow: hidden;
                    padding-left: 3rem;
                    border: 0;
                    border-bottom: 0.1rem solid rgba(18,40,54,0.2);
                    -webkit-transition: all 0.3s ease;
                    transition: all 0.3s ease;

                    @include media-query(sm){
                        height: 5.2rem;
                    }

                    &.parsley-error {
                        border: 0 !important;
                        border-bottom: 0.1rem solid red !important;
                        margin-bottom: 0.5rem !important;
                    }
                }
            }
        }
    }
}

.sitekick {

    .pagination {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }

    ul.pagination {
        margin: 2rem 0 0 0;
        border-radius: 0;

        li {
            a {
                border-radius: 0 !important;
                border: 0;
                float: left;
                width: 4.6rem;
                height: 4.6rem;
                line-height: 4.6rem;
                padding: 0;
                text-align: center;
                background: transparent;
            }

            &.active {
                a {
                    background: color(blue);
                }
            }
        }
    }
}

.sitekick-upload-container {
    .images-list {
        .thumbnail-holder {
            float: none;
        }
    }
}