html {
    height: 100%;
    width: 100%;
}

body {
    background-color: white;
    margin: 0;
    width: 100%;
    height: 100%;
}



.F1 {
    font-family: 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', sans-serif;
}

.F2 {
    font-family: 'Gotham XNarrow SSm A', 'Gotham XNarrow SSm B', sans-serif;
}

.F3 {
    font-family: 'garamond-premier-pro-display', sans-serif;
}


/* font size */

.S0 {
    font-size: 10px;
}

.S1 {
    font-size: 11px;
}

.S2 {
    font-size: 12px;
}

.S3 {
    font-size: 13px;
}

.S4 {
    font-size: 16px;
}

.S5 {
    font-size: 20px;
}

.S6 {
    font-size: 26px;
}

.S7 {
    font-size: 32px;
}


/* font uppercase */
.U1 {
    text-transform: none;
}

.U2 {
    text-transform: uppercase;
}


/* font letter-spacing */
.L1 {
    letter-spacing: 0.2px;
}

.L2 {
    letter-spacing: 1px;
}

.L3 {
    letter-spacing: 1.5px;
}

/* font weights */
.W1 {
    font-weight: 300;
}

.W2 {
    font-weight: 400;
}

.W3 {
    font-weight: 500;
}

.W4 {
    font-weight: 700;
}


/* colors */

.C0 {
    color: #F9F9F9;
}

.CH0:hover {
    color: #F9F9F9;
}

.BC0 {
    background-color: #F9F9F9;
}

.BCH0:hover {
    background-color: #F9F9F9;
}

.C1 {
    color: #FFFFFF;
}

.CH1:hover {
    color: #FFFFFF;
}

.BC1 {
    background-color: #FFFFFF;
}

.BCH1:hover {
    background-color: #FFFFFF;
}

.C2 {
    color: #F2F2F2;
}

.CH2:hover {
    color: #F2F2F2;
}

.BC2 {
    background-color: #F2F2F2;
}

.BCH2:hover {
    background-color: #F2F2F2;
}

.C3 {
    color: #ECECEC;
}

.CH3:hover {
    color: #ECECEC;
}

.BC3 {
    background-color: #ECECEC;
}

.BCH3:hover {
    background-color: #ECECEC;
}

.C4 {
    color: #E0E0E0;
}

.CH4:hover {
    color: #E0E0E0;
}

.BC4 {
    background-color: #E0E0E0;
}

.BCH4:hover {
    background-color: #E0E0E0;
}

.C5 {
    color: #D0D0D0;
}

.CH5:hover {
    color: #D0D0D0;
}

.BC5 {
    background-color: #D0D0D0;
}

.BCH5:hover {
    background-color: #D0D0D0;
}

.C6 {
    color: #BCBCBC;
}

.CH6:hover {
    color: #BCBCBC;
}

.BC6 {
    background-color: #BCBCBC;
}

.BCH6:hover {
    background-color: #BCBCBC;
}

.C7 {
    color: #868686;
}

.CH7:hover {
    color: #868686;
}

.BC7 {
    background-color: #868686;
}

.BCH7:hover {
    background-color: #868686;
}

.C8 {
    color: #444444;
}

.CH8:hover {
    color: #444444;
}

.BC8 {
    background-color: #444444;
}

.BCH8:hover {
    background-color: #444444;
}

.C9 {
    color: #1C1C1C;
}

.CH9:hover {
    color: #1C1C1C;
}

.BC9 {
    background-color: #1C1C1C;
}

.BCH9:hover {
    background-color: #1C1C1C;
}

.C10 {
    color: #FF232B;
}

.CH10:hover {
    color: #FF232B;
}

.BC10 {
    background-color: #FF232B;
}

.BCH10:hover {
    background-color: #FF232B;
}

.C11 {
    color: #F8DADB;
}

.CH11:hover {
    color: #F8DADB;
}

.BC11 {
    background-color: #F8DADB;
}

.BCH11:hover {
    background-color: #F8DADB;
}

.C12 {
    color: #CB1B21;
}

.CH12:hover {
    color: #CB1B21;
}

.BC12 {
    background-color: #CB1B21;
}

.BCH12:hover {
    background-color: #CB1B21;
}


.ptErrorPage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .ptErrorPage .errorLogo {
        position: absolute;
        top: calc(50% - 2.72% - 15px - 10%);
        left: calc(50% - 20px);
        width: 40px;
        height: 30px;
        background-image: url(resources/sprites/dashboard.svg?r=r166.5);
        background-position: -116px -587px;
    }

    .ptErrorPage .errorLogo.accountLogo {
        width: 100px;
        height: 50px;
        top: calc(50% - 2.72% - 25px - 10%);
        left: calc(50% - 50px);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .ptErrorPage .errorMainMessage {
        position: absolute;
        top: calc(50% - 2.72%);
        margin: 0 auto;
        width: 100%;
        text-align: center;
    }


    .ptErrorPage .errorSubMessage {
        position: absolute;
        top: calc(50% + 2.72% + 40px);
        width: 100%;
        text-align: center;
        line-height:150%;
    }

    .ptErrorPage .errorFooterMessage {
        position: absolute;
        bottom: 62px;
        width: 100%;
        text-align: center;
    }


@media only screen and (max-width: 1000px) {
    .ptErrorPage .errorMainMessage {
        font-size: 26px;
    }

    .ptErrorPage .errorSubMessage {
        font-size: 12px;
    }

    .ptErrorPage .errorFooterMessage {
        font-size: 11px;
    }
}


@media only screen and (min-width:1500px) and (max-width: 2000px) {
    .ptErrorPage .errorMainMessage {
        font-size: 44px;
    }

    .ptErrorPage .errorSubMessage {
        font-size: 16px;
    }

    .ptErrorPage .errorFooterMessage {
        font-size: 13px;
    }
}

@media only screen and (min-width: 2000px) {
    .ptErrorPage .errorMainMessage {
        font-size: 56px;
    }

    .ptErrorPage .errorSubMessage {
        font-size: 16px;
    }

    .ptErrorPage .errorFooterMessage {
        font-size: 13px;
    }
}