﻿.configDisplay {
    padding: 50px 0;
    background-color: #f4f4f4;
}

    .configDisplay .headline {
        color: #062f6e;
        font-weight: 700;
        font-size: 25px;
    }

    .configDisplay .tabContainer {
        font-family: sans-serif;
        margin-top: 50px;
    }

        .configDisplay .tabContainer .tabs {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            border-bottom: 1px solid #8a241b
        }

            .configDisplay .tabContainer .tabs .tab {
                padding: 0.5rem 1rem;
                cursor: pointer;
                border-bottom: 3px solid #f4f4f4;
                transition: all 0.4s ease;
                font-weight: 600;
            }

                .configDisplay .tabContainer .tabs .tab:hover {
                    border-bottom: 3px solid #8a241b;
                    color: #062f6e;
                    font-weight: 700;
                }

                .configDisplay .tabContainer .tabs .tab.active {
                    border-bottom: 3px solid #8a241b;
                    color: #062f6e;
                    font-weight: 700;
                }

    .configDisplay .tabContent {
      
        opacity: 0;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: all 1s ease-in-out;
    }

        .configDisplay .tabContent .title {
            font-size: 19px;
            font-weight: 700;
        }

        .configDisplay .tabContent.active {
            margin-top: 50px;
            opacity: 1;
            height: auto;
            visibility: visible;
        }

        .configDisplay .tabContent .contentWrap {
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
        }

            .configDisplay .tabContent .contentWrap .copyWrap {
                padding-right: 20px;
            }

            .configDisplay .tabContent .contentWrap .rotatorWrap {
                width: 50%;
                padding-left: 20px;
            }

    .configDisplay .rotatorWrap .mainR .swiper-slide .imgContainer {
        min-height: 450px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        height: 100%;
    }

    .configDisplay .rotatorWrap .mainR .swiper-slide img {
        max-width: 100%;
        margin: 0 auto;
    }

.thumbsContainer .swiper-thumbs .swiper-wrapper .swiper-slide {
    cursor: pointer;
}

@media screen and (max-width: 1250px) {
    .configDisplay .tabContent .contentWrap {
        flex-direction: column;
    }

        .configDisplay .tabContent .contentWrap .rotatorWrap {
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
            padding: 30px 0;
        }

            .configDisplay .tabContent .contentWrap .rotatorWrap .swiper-slide img {
                max-width: 650px;
            }

            .configDisplay .tabContent .contentWrap .rotatorWrap .swiper-thumbs .swiper-slide img {
                max-width: 100%;
            }
}

@media screen and (max-width: 750px) {
    .configDisplay .tabContent .contentWrap .rotatorWrap .swiper-slide img {
        max-width: 100%;
    }
}
