@font-face {
    font-family: 'PFDin';
    font-weight: 800;
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_0_0.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_0_0.eot?v=0.1.1?#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/pfdin/22ABA3_0_0.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/pfdin/22ABA3_0_0.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/pfdin/22ABA3_0_0.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'PFDin';
    font-weight: 600;
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_1_0.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_1_0.eot?v=0.1.1?#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/pfdin/22ABA3_1_0.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/pfdin/22ABA3_1_0.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/pfdin/22ABA3_1_0.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'PFDin';
    font-weight: 400;
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_2_0.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_2_0.eot?v=0.1.1#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/pfdin/22ABA3_2_0.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/pfdin/22ABA3_2_0.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/pfdin/22ABA3_2_0.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'PFDin';
    font-weight: 300;
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.eot?v=0.1.1?#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'PFDin';
    font-weight: 200;
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.eot?v=0.1.1?#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/pfdin/22ABA3_3_0.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 900;
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Black.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Black.eot?v=0.1.1?#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Black.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Black.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Black.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 700;
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Bold.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Bold.eot?v=0.1.1?#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Bold.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Bold.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Bold.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 600;
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.eot?v=0.1.1#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-SemiBold.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 400;
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Regular.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Regular.eot?v=0.1.1?#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Regular.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Regular.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 300;
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Light.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Light.eot?v=0.1.1?#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Light.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Light.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-Light.ttf?v=0.1.1") format("truetype")
}

@font-face {
    font-family: 'Source Sans Pro';
    font-weight: 200;
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.eot?v=0.1.1");
    src: url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.eot?v=0.1.1?#iefix") format("embedded-opentype"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.svg?v=0.1.1") format("svg"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.woff?v=0.1.1") format("woff"), url("/static/assets/dist/fonts/Source_Sans_Pro/SourceSansPro-ExtraLight.ttf?v=0.1.1") format("truetype")
}

.sale-boxes {
    font-family: "Source Sans Pro", sans-serif;
}

.sale-box {
    box-shadow: 0 0 1.5rem -0.5rem #cccccc;
    border-radius: 2.5rem;
    padding: 2rem;
    min-width: 200px;
    max-width: 320px;
    min-height: 380px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden
}

.sale-box__header {
    margin: -2rem -2rem 0;
    padding: 2rem 2rem;
    position: relative;
}

.sale-box__title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #4194f8;
    margin: 0;
    position: relative;
    z-index: 1;
    font-family: "Source Sans Pro", sans-serif;
    max-width: 100px;
}

.sale-box__subtitle {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ea5756;
    text-transform: capitalize;
    margin: 0;
    position: relative;
    z-index: 1;
    font-family: "Source Sans Pro", sans-serif
}

.sale-box__flag {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top right;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 21rem;
    background-position-x: 1px;
    background-position-y: -1px;
}

.sale-box__flag--germany {
    background-image: url(/static/assets/img/flags/cropped/germany.png)
}

.sale-box__flag--us {
    background-image: url(/static/assets/img/flags/cropped/usa.png);
    background-position-x: -68px;
    background-size: 123%;
}

.sale-box__flag--finland {
    background-image: url(https://cdn.privex.io/img/flags/svg/fi.svg);
    background-size: auto;
    background-position-x: 149px
}

.sale-box__flag--sweden {
    background-image: url(https://cdn.privex.io/img/flags/svg/se.svg);
    background-size: auto;
    background-repeat: repeat-x;
}

.sale-box__flag--netherlands {
    background-repeat: repeat-x;
    background-size: auto;
    background-image: url(https://cdn.privex.io/img/flags/svg/nl.svg);
}

.sale-box__flag--canada {
    background-repeat: repeat-x;
    background-size: auto;
    background-position-x: 110px;
    background-image: url(https://cdn.privex.io/img/flags/svg/ca.svg);
}

.sale-box__flag--japan {
    background-repeat: repeat-x;
    background-size: auto;
    background-position-x: 160px;
    background-image: url(https://cdn.privex.io/img/flags/svg/jp.svg);
}

.sale-box__flag > svg {
    display: block;
    filter: drop-shadow(2px 0px 9px rgba(0, 0, 0, 0.3));
    transform-origin: bottom right
}

.sale-box__order-btn {
    display: block;
    padding: 0.8rem 0 0.9rem;
    border-radius: 10rem;
    background-color: #ea5756;
    font-size: 1.45rem;
    color: white;
    text-align: center;
    margin: 0 auto 0.8rem;
    max-width: 210px;
    width: 100%;
    transition: background-color 0.2s, transform 0.2s;
    user-select: none
}

.sale-box__order-btn:hover, .sale-box__order-btn:focus {
    background-color: #e7403f;
    color: white;
    text-decoration: none;
    transform: scale(1.075)
}

.sale-box-payment {
    color: #ea5756;
    text-align: center;
    margin: 2rem 0 0
}

.sale-box-payment__price {
    font-weight: 700;
    font-size: 2.8rem;
    line-height: 1;
    vertical-align: top;
    display: inline-block
}

.sale-box-payment__price--cents {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.4;
    vertical-align: top
}

.sale-box-payment__frequency {
    display: inline-block;
    margin: 0 0 0 0.75rem;
    padding: 0 0 0 0.75rem;
    position: relative;
    font-weight: 200;
    font-size: 1.2rem;
    line-height: 1.8rem;
    letter-spacing: 0.15rem;
    text-align: left;
    text-transform: uppercase
}

.sale-box-payment__frequency::before {
    content: "";
    width: 0.15rem;
    position: absolute;
    top: 0.35rem;
    bottom: 0.35rem;
    left: 0;
    background: #ea5756;
    transform: translate(-100%, 0);
    border-radius: 30%
}

.sale-box-list {
    list-style: none;
    text-align: center;
    margin: 2rem 0;
    padding: 0;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: flex-end
}

.sale-box-list__item {
    margin: 0.25rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: gray
}

.sale-box-list__item--fee {
    flex-grow: 1;
    align-items: flex-start;
    font-weight: bold;
    color: black
}