﻿.pcs-wrapper {
    font-family: 'Montserrat', sans-serif;
}

    .pcs-wrapper .content {
        margin: 3vw 25vw;
        border: 1pt solid #afb8c6;
        border-radius: 5px;
        min-height: 32vw;
        border: 1pt solid #000;
        -moz-box-shadow: 0 0 15px #999;
        -webkit-box-shadow: 0 0 15px #999;
        box-shadow: 0 0 15px #999;
    }

    .pcs-wrapper .header {
        background-color: #2baae0;
        display: flex;
        flex-direction: row;
    }

        .pcs-wrapper .header .video {
            overflow: hidden;
            width: 25%;
        }

        .pcs-wrapper .header video {
            width: 19vw;
            margin: -4vw 0;
        }

        .pcs-wrapper .header .header-text {
            width: 100vw;
            color: #f7f7f7;
            text-align: center;
            margin-top: 2vw;
        }

            .pcs-wrapper .header .header-text div {
            }

                .pcs-wrapper .header .header-text h1:nth-child(1) {
                    font-size: 1.15vw;
                    font-weight: bold;
                }

                .pcs-wrapper .header .header-text h2:nth-child(2) {
                    font-size: 2vw;
                    font-weight: bold;
                    margin: 2vw 0;
                }

                .pcs-wrapper .header .header-text div:nth-child(3) {
                    color: #18a0dc;
                    font-size: 1.1vw;
                    font-weight: bold;
                    margin-top: 1.5vw;
                    line-height: 1.5;
                }

    .pcs-wrapper .super-text {
        width: 60%;
        color: #13387f;
        text-align: center;
        font-weight: bold;
        margin: 2vw auto;
        font-size: 1vw;
        line-height: 1.5;
    }

    .pcs-wrapper .select {
        text-align: center;
        margin: 2vw 0;
    }

    .pcs-wrapper .select {
        cursor: pointer;
    }

        .pcs-wrapper .select .select-header {
            max-width: 65%;
            color: #13387f;
            font-weight: bold;
            font-size: 1.25vw;
            border: 2pt solid;
            margin: auto;
            position: relative;
            text-align: left;
            border: 1pt solid #000;
        }

            .pcs-wrapper .select .select-header .select-content {
                display: none;
            }

            .pcs-wrapper .select .select-header .select-content {
                padding-top: 1vw;
                border-top: 2pt solid;
                padding-top: 1vw;
                position: absolute;
                z-index: 2;
                background: #fff;
                width: 100.5%;
                border: 2pt solid;
                overflow-y: scroll !important;
                height: 17vw;
                border: 1pt solid #000;
                left: -0.25%;
                z-index: 3;
            }

            .pcs-wrapper .select .select-header .select-header-slide {
                display: flex;
                align-items: center;
                position: relative;
                padding: 1vw 0;
            }

                .pcs-wrapper .select .select-header .select-header-slide .text {
                    width: 90%;
                    padding-left: 1vw;
                }

                .pcs-wrapper .select .select-header .select-header-slide img {
                    width: 1.5vw;
                    right: -0.35vw;
                    position: relative;
                }

            .pcs-wrapper .select .select-header .o-group {
                font-weight: bold;
                font-size: 1.35vw;
                margin-bottom: 1vw;
                padding-left: 1vw;
            }

                .pcs-wrapper .select .select-header .o-group .header {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    background: none;
                }

                    .pcs-wrapper .select .select-header .o-group .header .text {
                        width: 91.25%;
                    }

                .pcs-wrapper .select .select-header .o-group img {
                    width: 2vw;
                    right: -0.35vw;
                    position: relative;
                }

            .pcs-wrapper .select .select-header .o-cf {
                font-size: 1vw;
            }

            .pcs-wrapper .select .select-header .o-sf {
                color: #18a0dc;
                font-size: 1vw;
            }

            .pcs-wrapper .select .select-header .o-cf, .pcs-wrapper .select .select-header .o-sf {
                margin: 0.5vw 0;
            }

            .pcs-wrapper .select .select-header .select-content .locations {
                display: none;
            }

    .pcs-wrapper .join {
        text-align: center;
        display: flex;
        justify-content: center;
        margin-bottom: 2vw;
    }

        .pcs-wrapper .join .btn-join {
            border: none;
            background: #2baae0;
            padding: 1vw 4vw;
            font-size: 1.25vw;
            text-decoration: none;
            color: #fff;
        }

    .pcs-wrapper .fine-print {
        text-align: center;
        font-size: 1vw;
        width: 65%;
        margin: 1vw auto;
    }

@media screen and (max-width: 1028px) {
    .pcs-wrapper {
        padding: 20vw 0 25vw 0;
    }

        .pcs-wrapper .content {
            margin: 0 5vw;
        }

        .pcs-wrapper .header {
            flex-direction: column;
        }

            .pcs-wrapper .header .video {
                overflow: hidden;
                width: 100%;
                text-align: center;
            }

            .pcs-wrapper .header video {
                width: 35vw;
                margin: -8vw auto;
            }

            .pcs-wrapper .header .header-text {
                width: 90%;
                margin: 5vw auto;
                line-height: 1.5;
            }

                .pcs-wrapper .header .header-text h1:nth-child(1) {
                    font-size: 3.5vw;
                }

                .pcs-wrapper .header .header-text h2:nth-child(2) {
                    font-size: 7vw;
                }

                .pcs-wrapper .header .header-text div:nth-child(3) {
                    font-size: 3vw;
                }

        .pcs-wrapper .super-text {
            width: 90%;
            font-size: 3.5vw;
            margin: 5vw auto;
        }

        .pcs-wrapper .select select {
            max-width: 90%;
            font-size: 2.5vw;
            padding: 2vw;
        }

        .pcs-wrapper .select .select-header {
            max-width: 90%;
        }

            .pcs-wrapper .select .select-header .select-header-slide {
                padding: 2vw 0 2vw 1vw;
            }

                .pcs-wrapper .select .select-header .select-header-slide .text {
                    font-size: 4vw;
                }

            .pcs-wrapper .select .select-header .select-content {
                padding-top: 3vw;
                height: 70vw;
            }

            .pcs-wrapper .select .select-header .select-header-slide img {
                width: 5vw;
            }

            .pcs-wrapper .select .select-header .o-group {
                margin-bottom: 3vw;
            }

                .pcs-wrapper .select .select-header .o-group .header .text {
                    font-size: 5vw;
                }

                .pcs-wrapper .select .select-header .o-group img {
                    width: 5vw;
                    right: .75vw;
                }

            .pcs-wrapper .select .select-header .o-sf, .pcs-wrapper .select .select-header .o-cf {
                font-size: 3.5vw;
            }

            .pcs-wrapper .select .select-header .o-group .locations div {
                margin: 3vw 0;
            }

        .pcs-wrapper .join {
            margin-top: 7vw;
            margin-bottom: 7vw;
        }

            .pcs-wrapper .join .btn-join {
                border: none;
                padding: 3vw 5vw;
                font-size: 5vw;
                width: 90%;
            }

        .pcs-wrapper .fine-print {
            font-size: 2vw;
            width: 75%;
            margin: 10vw auto 2vw auto;
        }
}

@media screen and (max-width: 768px) {
    .pcs-wrapper {
        padding: 35vw 0 25vw 0;
    }
}
