﻿.pride .performance-details {
    display: flex;
    flex-direction: column;
}

    .pride .performance-details .title-card {
        display: flex;
        position: relative;
        height: 332px;
        width: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        border-bottom: solid 4px #F5AB2C;
    }


        .pride .performance-details .title-card .new-tag {
            background: #F5AB2C;
            color: #FFFFFF;
            text-transform: uppercase;
            margin-left: 15%;
            position: absolute;
            bottom: 0;
            padding: 3px;
            padding-top: 1px;
            padding-bottom: 0;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            font-size: 16px;
        }


        .pride .performance-details .title-card .title-card-text {
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            font-size: 29px;
            line-height: 35px;
            display: flex;
            flex-direction: column;
            align-items: baseline;
            letter-spacing: 0.01em;
            color: #FFFFFF;
            justify-content: center;
            height: 100%;
            margin-left: 15%;
        }

            .pride .performance-details .title-card .title-card-text h1 {
                font-weight: 700;
                line-height: 1.2em;
                font-size: 7.5vh;
                color: #FFFFFF;
            }


@media (max-width: 767px) {

    .pride .performance-details .title-card .title-card-text {
        margin:0 auto;


    }
        .pride .performance-details .title-card .title-card-text h1 {
        line-height: 1.0em;
        font-size: 5.0vh;
    }

}


        .pride .performance-details .detail-header {
            display: flex;
            flex-direction: column;
            padding: 4rem;
            background: #FAFAFA;
        }


        .pride .performance-details .detail-header .header-row {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }



@media (max-width: 767px) {

    .pride .performance-details .detail-header .header-row {
        flex-direction: column;
        align-items: center;
    }
}


.pride .performance-details .detail-header .plot-traits {
    display: flex;
    flex-direction: row;
    height: 5rem;
    margin-left: 1.25rem;
}

    .pride .performance-details .detail-header .plot-traits img {
        height: 100%;
        margin-right: 40px;
    }

        .pride .performance-details .detail-header .header-links {
            display: flex;
            flex-direction: row;
        }


            .pride .performance-details .detail-header .header-links a {
                margin-left: 25px;
            }

                .pride .performance-details .detail-header .header-links a i {
                    margin-right: 5px;
                }


        .pride .performance-details .detail-header .detail-square {
            display: flex;
            flex-direction: column;
            width: 20rem;
            min-width: 150px;
            height: 8rem;
            min-height: 150px;
            background: #FFFFFF;
            border: 1px solid #E2DFDF;
            box-shadow: 0.4rem 0.4rem 1.4rem rgba(0,0,0,0.08);
            border-radius: .7rem;
            justify-content: center;
            align-items: center;
            text-transform: uppercase;
            margin: 1.25rem 1.25rem;
        }


    .pride .performance-details .detail-square .title {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 300;
        font-size: 2rem;
        line-height: 2.4rem;
        display: flex;
        align-items: center;
        text-align: center;
        letter-spacing: 0.01em;
        color: #757575;
    }

    .pride .performance-details .detail-square .value {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 700;
        font-size: 3.25rem;
        line-height: 4rem;
        display: flex;
        align-items: center;
        text-align: center;
        letter-spacing: 0.01em;
        /* Pride Red */
        color: #B12A2F;
    }

    .pride .performance-details .detail-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        width: 321px;
        min-height: 11rem;
        margin: 1rem;
    }



@media (max-width: 767px) {

    .pride .performance-details .detail-info {
        width: 100%;
    }
}


        .pride .performance-details .detail-info .detail-info-row {
            display: flex;
            flex-direction: row;
            width: 100%;
            justify-content: space-between;
        }


    .pride .performance-details .detail-info .detail-info-row .title {
        font-family: 'Montserrat';
        font-style: normal;
        font-weight: 400;
        font-size: 1.1rem;
        line-height: 1.1rem;
        /* identical to box height */
        display: flex;
        letter-spacing: 0.01em;
        color: #757575;
        text-transform: uppercase;
        text-align: left;
    }

            .pride .performance-details .detail-info .detail-info-row .value {
                font-family: 'Montserrat';
                font-style: normal;
                font-weight: 400;
                font-size: 1.1rem;
                line-height: 1.1rem;
                /* identical to box height */
                display: flex;
                letter-spacing: 0.01em;
                color: #000000;
                text-align: right;
            }


    .pride .performance-details .divider {
        width: 100%;
        border: #F5AB2C 4px solid;
    }



    .pride .performance-details table.plot-rows {
        width: 100%;
        text-align: center;
        border-collapse: collapse;
        background: #FFF; 
    }

    .pride .performance-details .lower-section {
        background: #FFF;
        padding: 4rem;
       overflow-x: auto;
    }

table.plot-rows tbody {
    border: 1px solid #E2DFDF;
    box-shadow: 8px 8px 44px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}


@media (max-width: 767px) {

    .pride .performance-details table.plot-rows tr {
       
    }
}


      

        .pride .performance-details table.plot-rows tbody tr:nth-child(odd) {
            background-color: #ECECEC;
        }

     


        .pride .performance-details table.plot-rows th {
            height: 78px;
            width: 100px;
            padding: 0;
        }





        .pride .performance-details table.plot-rows th, .pride .performance-details table.plot-rows td {
            color: #000;
            height: 100%;
            font-family: 'Montserrat';
            font-style: normal;
            font-weight: 400;
            font-size: .9rem;
            line-height: 17px;
            /* identical to box height */
            text-align: center;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            color: #B12A2F;
            height: 4.2rem;
        }

            .pride .performance-details table.plot-rows th.data-point div.th-wrapper {
                display: flex;
                align-items: center;
                justify-content: center;
                background: #F5AB2C;
                color: #000;
                height: 100%;
            }



            .pride .performance-details table.plot-rows th div.th-wrapper.first {
                border-top-left-radius: 10px;
            }

            .pride .performance-details table.plot-rows th div.th-wrapper.last {
                border-top-right-radius: 10px;
                margin-right: 25px;
            }




        .pride .performance-details table.plot-rows td {
            color: #000;
            padding: 0;
            height: 2.6rem;
        }



            .pride .performance-details table.plot-rows td.plot-averages div.td-wrapper {
                display: flex;
                align-items: center;
                justify-content: center;
                background: #F5AB2C;
                color: #000;
                height: 100%;
            }



                .pride .performance-details table.plot-rows td.plot-averages div.td-wrapper.first {
                    border-bottom-left-radius: 10px;
                }

                .pride .performance-details table.plot-rows td.plot-averages div.td-wrapper.last {
                    border-bottom-right-radius: 10px;
                    margin-right: 25px;
                }
