/***** resets *****/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

img {
    display: block;
}

@media only screen and (min-width: 1920px) {
    html {
        font-size: 100%;
    }
}

/***** module *****/

.mod_b2b_viewer {
    height: 100vh;

    .slick-slider {
        height: 100vh;

        .slick-list {
            height: 100vh;

            .slick-track {
                height: 100vh;

                .slick-slide {

                    .video-container {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100vh;
                        padding: 5rem;
                        background: #00448a;

                        video {
                            width: auto;
                            height: auto;
                            min-height: 100%;
                            max-height: 100%;
                            border-radius: 0.625rem;
                            border: 10px solid white;
                        }
                    }

                    .aidadvertising-container {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        height: 100vh;
                        padding: 5rem;
                        background: #00448a;

                        .image-container {
                            &.object-cover img {
                                object-fit: cover;
                            }

                            &.object-contain img {
                                object-fit: contain;
                            }

                            &.object-fill img {
                                object-fit: contain;
                            }
                        }

                        img {
                            height: 90vh;
                            width: 90vw;
                        }
                    }

                    .inside {
                        display: flex;

                        .image-container,
                        .content-container {
                            width: 50%;
                            background: #00448a;
                        }

                        .image-container {
                            position: relative;
                            display: flex;
                            height: 100vh;

                            picture {
                                display: flex;
                                width: 100%;
                                height: 100%;
                            }

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

                            &.object-cover img {
                                object-fit: cover;
                            }

                            &.object-contain img {
                                object-fit: contain;
                            }

                            &.object-fill img {
                                object-fit: contain;
                            }

                            .price-container {
                                position: absolute;
                                top: 8rem;
                                right: 3rem;
                                left: 10rem;
                                display: flex;

                                .price {
                                    position: relative;

                                    .current-container {
                                        .current {
                                            font-weight: 900;
                                            color: red;
                                            letter-spacing: -4px;
                                            text-shadow: 0 0 0.625rem #00000099;

                                            .pre {
                                                font-size: 6rem;
                                                line-height: 6rem;
                                                -webkit-text-stroke: 2px white;
                                            }

                                            .post {
                                                vertical-align: top;
                                                font-size: 3.5rem;
                                                line-height: 4rem;
                                                -webkit-text-stroke: 2px white;
                                            }
                                        }
                                    }

                                    .before-container {
                                        position: absolute;
                                        top: -2rem;
                                        right: -1rem;

                                        .before {
                                            position: relative;
                                            font-weight: 900;
                                            color: black;
                                            letter-spacing: -2px;
                                            text-shadow: 0 0 0.625rem #00000099;

                                            .pre {
                                                font-size: 2.25rem;
                                                line-height: 2.25rem;
                                                -webkit-text-stroke: 1.5px white;
                                            }

                                            .post {
                                                vertical-align: top;
                                                font-size: 1.5rem;
                                                line-height: 1.5rem;
                                                -webkit-text-stroke: 1.5px white;
                                            }

                                            .line {
                                                position: absolute;
                                                top: 0;
                                                right: 0;
                                                bottom: 0;
                                                left: 0;
                                                background: linear-gradient(to bottom right, transparent 0%, transparent calc(50% - 2px), red, transparent calc(50% + 2px), transparent 100%)
                                            }
                                        }
                                    }

                                    .saving-container {
                                        position: absolute;
                                        top: -2.75rem;
                                        left: -5.5rem;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        width: 220px;
                                        height: 77.7px;
                                        background: url('../images/bg_price_saving.png') center center no-repeat;
                                        background-size: cover;
                                        transform: rotateY(40deg) rotateZ(-4deg);

                                        .saving {
                                            padding: 0 0 0.375rem;
                                            font-weight: 900;
                                            font-size: 2rem;
                                            color: white;
                                            transform: rotate(-5deg);
                                        }
                                    }
                                }
                            }

                            .title {
                                position: absolute;
                                right: 3rem;
                                bottom: 3.5rem;
                                left: 3rem;
                                font-weight: 700;
                                font-size: 3rem;
                                line-height: 3.25rem;
                                color: white;
                                text-shadow: 0 0 1.25rem black;
                            }
                        }

                        .content-container {
                            display: flex;
                            flex-direction: column;

                            .content {
                                padding: 5rem 4rem;
                                height: 100vh;
                                background: #00448a;
                                background-size: 90%;

                                .inside {
                                    position: relative;
                                    display: flex;
                                    align-items: center;
                                    height: 100%;

                                    .title {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        font-weight: 700;
                                        font-size: 3rem;
                                        line-height: 3.25rem;
                                        color: white;
                                    }

                                    .headline {
                                        font-weight: 700;
                                        font-size: 2.5rem;
                                        line-height: 3rem;
                                        color: white;

                                        +.description {
                                            padding: 2.5rem 0 0;
                                        }

                                        +.list {
                                            margin-top: 2.5rem;
                                        }
                                    }

                                    .list {
                                        margin: 0 0 0 3.25rem;
                                        padding: 0.5rem 0 0.5rem 1rem;
                                        font-size: 2rem;
                                        line-height: 2.5rem;
                                        color: white;
                                        list-style-type: none;
                                        border-left: 2px solid white;

                                        li {
                                            &:not(:first-of-type) {
                                                padding: 2.5rem 0 0;
                                            }

                                            .top {
                                                font-weight: 700;
                                            }

                                            .bottom {
                                                font-style: italic;
                                            }
                                        }
                                    }

                                    .description {
                                        padding: 5rem 0 0;
                                        font-weight: 700;
                                        font-size: 2rem;
                                        line-height: 2.5rem;
                                        color: white;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    @media (orientation: portrait) {
        .slick-slider .slick-list .slick-track .slick-slide {
            flex-direction: column;

            .image-container,
            .video-container,
            .content-container {
                width: 100%;
            }

            .image-container,
            .video-container {
                height: 35vh;
            }

            .content-container {
                height: 65vh;

                .category {
                    height: 0;
                }
            }
        }
    }
}


@media(max-width: 1040px) {
    html {
        font-size: 7px;
    }
}