@import "../../variables.scss";


.ThankYouBlock {
    .ThankYouHeading {
        padding-bottom: $pad + 40;
        @media (max-width: $lg) {
            padding-bottom: $pad + 20;
        }
        @media (max-width: $md) {
            padding-bottom: $pad + 10;
        }
        h2 {
            font-size: $font + 30;
            font-weight: $font-weight-heavy;
            text-transform: uppercase;
            margin-bottom: 0;

            @media (max-width: $lg) {
                font-size: $font + 20;
            }
            @media (max-width: $md) {
                font-size: $font + 15;
            }
        }
        span {
            display: block;
            font-size: $font + 10;
            font-weight: $font-weight-bold;
            color: $black;
            @media (max-width: $lg) {
                font-size: $font + 6;
            }
            @media (max-width: $md) {
                font-size: $font + 4;
            }
        }
    }
    .ThankYouBlockOuter {
        max-width: 1100px;
        margin: 0 auto;
    }
    .ThankYouInfoCard {
        border: solid 2px $blue;
        border-radius: $bdr-rds + 8;
        padding: $pad + 18;
        background-color: $white;
        box-shadow: 0 12px 20px rgba($black, 0.18);
        margin-bottom: $mrg + 30;
        height: calc(100% - 40px);
        color: $black;
        @media (max-width: $lg) {
            padding: $pad + 15;
        }
        @media (max-width: $md) {
            padding: $pad + 5;
            margin-bottom: $mrg + 20;
            height: auto;
        }
        p {
            font-size: $font + 6;
            color: $black;
            @media (max-width: $lg) {
                font-size: $font + 5;
            }
        }
        h3 {
            text-align: center;
            font-size: $font + 15;
            color: rgba($black, 0.8);
            font-weight: $font-weight-heavy;
            text-transform: uppercase;
            margin-bottom: $mrg + 15;
            @media (max-width: $lg) {
                font-size: $font + 10;
            }
        }
        ul {
            max-width: 930px;
            margin: 0 auto;
            @media (max-width: $md) {
                display: block !important;
            }
            &.UlListCol {
                max-width: 95%;
                li{
                    width: 25%;
                    flex: 0 0 25%;
                    @media (max-width: $xl) {
                        width: 33.333%;
                        flex: 0 0 33.333%;
                    }
                    @media (max-width: $lg) {
                        width: 50%;
                        flex: 0 0 50%;
                    }
                    @media (max-width: $md) {
                        width: 100%;
                    }
                }
            }
            li {
                width: 50%;
                flex: 0 0 50%;
                font-size: $font + 6;
                color: $black;
                position: relative;
                padding-left: $pad + 15;
                margin: $pad - 4 0;
                @media (max-width: $md) {
                    width: 100%;
                }
                &:before {
                    position: absolute;
                    left: 0;
                    top: 5px;
                    width: 8px;
                    height: 13px;
                    content: "";
                    background: url(/assets/arrowIcon.png) no-repeat;
                }
            }
        }
        .ThankYouInfoCardPrice {
            h5 {
                font-size: $font + 15;
                color: rgba($black, 0.8);
                font-weight: $font-weight-heavy;
                text-transform: uppercase;
                margin-bottom: $mrg + 20;
                @media (max-width: $xl) {
                    font-size: $font + 10;
                }
                @media (max-width: $lg) {
                    margin-bottom: $mrg + 5;
                }
            }
            .PriceTag {
                display: block;
                color: $lightblue;
                font-size: $font + 38;
                font-weight: $font-weight-heavy;
                margin-bottom: $mrg + 40;
                @media (max-width: $xl) {
                    font-size: $font + 28;
                }
                @media (max-width: $lg) {
                    font-size: $font + 20;
                    margin-bottom: $mrg + 30;
                }
                @media (max-width: $md) {
                    font-size: $font + 16;
                    margin-bottom: $mrg + 10;
                }
                small {
                    display: block;
                    font-size: $font + 12;
                    font-weight: $font-weight-bold;
                    padding-top: $pad;
                    @media (max-width: $xl) {
                        font-size: $font + 8;
                        padding-top: $pad - 5;
                    }
                    @media (max-width: $lg) {
                        font-size: $font + 4;
                    }
                }
            }
            h6 {
                font-size: $font + 8;
                color: rgba($black, 0.8);
                font-weight: $font-weight-heavy;
                text-transform: uppercase;
                margin-bottom: $mrg - 5;
                @media (max-width: $lg) {
                    font-size: $font + 6;
                }
            }
            p{
                font-size: $font + 6;
            }
        }
        .ThankYouValuation {
            text-align: center;
            padding-bottom: $pad + 10;
            p {
                font-size: $font + 6;
            }
        }

        
    }
}