* {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 100 !important;
}

body {
    margin: 0 !important;
    padding: 1rem 1.4rem !important;
    width: 100vw;
    height: 90vh;
    background: #000;
}

.container-fluid {
    width: 100%;
    height: 100%;
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: row;
    vertical-align: middle;
    justify-content: space-evenly;
    padding: 1rem !important;
    align-content: space-between;
}

.pl,
.en {
    display: flex;
    text-align: center;
    align-items: center;
    flex-direction: column !important;
    vertical-align: middle;
    justify-content: center;
}

.card {
    background: #3E3E3E;
    /* border: 2px solid #fff; */
    margin: 1rem auto;
    color: #fff;
    padding: 1.4rem 2rem;
    min-width: 20rem;
    max-width: 20rem;
}

.moonwood {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.moonwood ul {
    width: 100% !important;
    margin: 0 auto;
    padding: 0;
}

.moonwood ul li {
    list-style: none;
    text-transform: uppercase;
    font-size: .7rem;
}

.card .header {
    font-size: 1.3rem !important;
    font-weight: 900 !important;
    text-transform: uppercase;
}

.sub-header {
    font-size: .84rem !important;
}

.thumbnail {
    width: 100%;
    opacity: .7;
}

.lang-line {
    display: flex;
    padding: .3rem .2rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.spacer {
    border-bottom: 1px solid #fff;
    width: 80%;
    opacity: .2;
}

.logo {
    width: 15rem;
    /* margin: 2rem auto; */
    display: block;
    text-align: center;
}

.moonwood a {
    color: #fff;
    text-decoration: none;
    font-weight: 900 !important;
}

.moonwood a:hover {
    opacity: 0.7;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 4) and (orientation: portrait) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}

@media only screen and (min-device-width: 834px) and (max-device-width: 834px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1024px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}

@media (max-device-width: 800px) and (orientation: portrait) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}

@media (max-device-width: 800px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .container-fluid {
        display: flex;
        text-align: center;
        align-items: center;
        flex-direction: column !important;
        vertical-align: middle;
        justify-content: flex-start;
    }
}