﻿
/* PLAYER SHOCASE MODULE */
.player-showcase-slider {
    width: 100%;
    overflow: hidden;
    display: flex;
    margin-bottom: 32px;
    z-index: 1;
    position: relative;
}

    .player-showcase-slider .player-showcase-wrapper.keeper {
        background-image: url(/Images/HomePage2021/Jogadores/keeper.svg);
        background-position-x: -115px;
        background-position-y: 150px;
    }

    .player-showcase-slider .player-showcase-wrapper.defense {
        background-image: url(/Images/HomePage2021/Jogadores/defense.svg);
        background-position-x: -35px;
        background-position-y: 155px;
        background-size: 90%;
    }

    .player-showcase-slider .player-showcase-wrapper.middle {
        background-image: url(/Images/HomePage2021/Jogadores/middle.svg);
        background-position-x: 0px;
        background-position-y: 160px;
        background-size: 90%;
    }

    .player-showcase-slider .player-showcase-wrapper.attack {
        background-image: url(/Images/HomePage2021/Jogadores/attack.svg);
        background-position-x: -100px;
        background-position-y: 150px;
        background-size: 90%;
    }

    .player-showcase-slider .player-showcase-wrapper {
        position: relative;
        min-height: 640px;
        overflow: hidden;
        background-color: #F4F4F4;
        background-repeat: no-repeat;
        background-position-x: -115px;
        background-position-y: 150px;
        border: none;
        border-right: 1px solid white;
        z-index: 1;
    }

        .player-showcase-slider .player-showcase-wrapper.swiper-slide-next:hover {
            cursor: pointer;
        }

        .player-showcase-slider .player-showcase-wrapper.swiper-slide-next .image-container {
            pointer-events: none;
            touch-action: none;
        }

        .player-showcase-slider .player-showcase-wrapper .text-container {
            width: 100%;
            z-index: 1;
        }

            .player-showcase-slider .player-showcase-wrapper .text-container .player-description {
                min-height: 240px;
                margin-bottom: 8px;
                margin-left: calc((14 / 375) * 100vw);
            }

                .player-showcase-slider .player-showcase-wrapper .text-container .player-description .player-number {
                    font-size: 200px;
                    font-weight: bold;
                    color: white;
                    line-height: 240px;
                    margin: 0;
                    margin-bottom: -80px;
                    padding: 0;
                }

                .player-showcase-slider .player-showcase-wrapper .text-container .player-description .player-name {
                    font-size: 36px;
                    font-weight: bold;
                    color: #242424;
                    line-height: 43px;
                    margin: 0;
                    margin-bottom: 5px;
                    margin-left: 17px;
                    padding: 0;
                    text-transform: none;
                }

                .player-showcase-slider .player-showcase-wrapper .text-container .player-description .player-position {
                    font-size: 20px;
                    font-weight: 500;
                    color: #242424;
                    line-height: 24px;
                    margin: 0;
                    margin-left: 17px;
                    padding: 0;
                    text-transform: none;
                }

            .player-showcase-slider .player-showcase-wrapper .text-container .player-social-wrapper {
                display: flex;
                justify-content: flex-start;
                margin-bottom: 18px;
                margin-left: calc((14 / 375) * 100vw);
                padding-left: 17px;
                grid-column-gap: 25px;
            }

                .player-showcase-slider .player-showcase-wrapper .text-container .player-social-wrapper a,
                .player-showcase-slider .player-showcase-wrapper .text-container .player-social-wrapper a .social {
                    width: 26px;
                    height: auto;
                    max-height: 24px;
                }

                    .player-showcase-slider .player-showcase-wrapper .text-container .player-social-wrapper a:hover .social {
                        fill: #c30000;
                    }

            .player-showcase-slider .player-showcase-wrapper .text-container .player-statistics-wrapper {
                display: flex;
                flex-direction: column;
                margin-left: calc((14 / 375) * 100vw);
                padding-left: 17px;
            }

                .player-showcase-slider .player-showcase-wrapper .text-container .player-statistics-wrapper .player-statistics-item {
                    display: flex;
                    flex-direction: column;
                    max-width: calc((115 / 375) * 100vw);
                    margin-bottom: 8px;
                }

                    .player-showcase-slider .player-showcase-wrapper .text-container .player-statistics-wrapper .player-statistics-item .statistic-value {
                        font-size: 70px;
                        font-weight: bold;
                        line-height: 85px;
                        color: #242424;
                        margin-bottom: -6px;
                    }

                    .player-showcase-slider .player-showcase-wrapper .text-container .player-statistics-wrapper .player-statistics-item .statistic-name {
                        font-size: 20px;
                        font-weight: 500;
                        line-height: 24px;
                        color: #242424;
                    }

        .player-showcase-slider .player-showcase-wrapper .image-container {
            position: absolute;
            bottom: 0;
            left: calc((110 / 375) * 100vw);
            z-index: 10;
            width: 100vw;
            max-height: 100%;
        }

.player-showcase-slider .swiper-pagination .swiper-pagination-bullet {
        background-color: #fff !important;
        opacity: .5;
}
.player-showcase-slider .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}


/* END of PLAYER SHOCASE MODULE */

@media (min-width: 768px) {
    /* PLAYER SHOCASE MODULE */
    .player-showcase-slider {
        margin-bottom: 97px;
    }

        .player-showcase-slider .player-showcase-wrapper.keeper {
            background-position-x: 50px;
            background-position-y: 0;
        }

        .player-showcase-slider .player-showcase-wrapper.defense {
            background-position-x: 35px;
            background-position-y: 0;
            background-size: unset;
        }

        .player-showcase-slider .player-showcase-wrapper.middle {
            background-position-x: 70px;
            background-position-y: -30px;
            background-size: unset;
        }

        .player-showcase-slider .player-showcase-wrapper.attack {
            background-position-x: -25px;
            background-position-y: 15px;
            background-size: unset;
        }

        .player-showcase-slider .player-showcase-wrapper {
            min-height: 768px;
            display: flex !important;
            background-position-x: 65px;
            background-position-y: 20px;
        }

            .player-showcase-slider .player-showcase-wrapper .text-container {
                max-width: min(calc((349 / 1366) * 100vw), 408px);
            }

                .player-showcase-slider .player-showcase-wrapper .text-container .player-description {
                    margin-top: 29px;
                    margin-bottom: 12px;
                    margin-left: calc((26 / 1366) * 100vw);
                }

                .player-showcase-slider .player-showcase-wrapper .text-container .player-social-wrapper {
                    margin-bottom: 43px;
                    margin-left: calc((26 / 1366) * 100vw);
                }

                .player-showcase-slider .player-showcase-wrapper .text-container .player-statistics-wrapper {
                    margin-left: calc((26 / 1366) * 100vw);
                }

                    .player-showcase-slider .player-showcase-wrapper .text-container .player-statistics-wrapper .player-statistics-item {
                        max-width: calc((115 / 1366) * 100vw);
                        margin-bottom: 28px;
                    }

            .player-showcase-slider .player-showcase-wrapper .image-container {
                position: relative;
                bottom: unset;
                left: unset;
                width: unset;
                display: flex;
                align-items: flex-end;
            }

                .player-showcase-slider .player-showcase-wrapper .image-container .image-inner {
                    position: relative;
                }

                .player-showcase-slider .player-showcase-wrapper .image-container img {
                    margin: 0 !important;
                }

    /* END of PLAYER SHOCASE MODULE */
}