/* AEV CI
colors:
- red: #af0d08
- dark green: #084401
- light green 1: #99cc99
- light green 2: #99d381
- light gray 1: #e6eae5
- light gray 2: #c3c3c3
fonts:
- PT Sans Narrow (normal, bold)
- Montserrat (normal, bold, ultrabold)
- Oswald (thin, normal, bold)
*/

/* fonts */
@import url("https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700");
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

@font-face {
    font-family: Dimbo;
    src: url("/wp-content/themes/jointswp/assets/fonts/Dimbo Regular.ttf");
}

/* foundation overwrites */
body {
    font-size: 16px;
    min-height: 100vh;
}

*,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "PT Sans Narrow", sans-serif;
}

.grid-padding-x > .main.cell {
    margin: 0 auto;
    padding: 1rem 2rem;
}

.birthday-page__image {
    display: none;
}

.birthday-page__container {
    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-color: #99d381;
    background-image: url(/wp-content/uploads/2019/10/datschi-sign.png);
    background-size: 1000px;
    background-position: center top;
    background-repeat: no-repeat;
}

.birthday-page__title {
    padding-top: 530px;
    padding-left: 15%;

    color: #084401;
    font-size: 40px;

    font-family: Dimbo;

    /* Rotate text to align with poster */
    transform: rotate(-4deg);
}

.birthday-page__name {
    color: #af0d08;
    font-size: 44px;

    font-family: Dimbo;
}

/*******************************************************************************
 * Old (possible obsolete?) styles (for the web version of the AEV app)
 * 
 * Styles that are required will be moved above this notice
 ******************************************************************************/

.grid-margin-x > .large-8 {
    width: calc(100% - 1.875rem);
}

.grid-margin-x > .medium-8 {
    width: calc(100% - 1.875rem);
}

.grid-margin-x > .small-12 {
    width: calc(100% - 1.25rem);
}

/* content */
.content-page {
    font-size: 1.4em;
}

.content-page > h1,
.content-page > h2,
.content-page > h3,
.content-page > p {
    padding: 0 15px;
}

.content-page h1 {
    margin: 0.3em 0 0.5em 0;
    font-size: 1.7em;
    line-height: 1.2em;
    font-weight: 700;
    color: #084401;
}

.content-page > h2 {
    margin: 0 0 0.5em 0;
    font-size: 1.5em;
    line-height: 1em;
    font-weight: 700;
}

.content-page > h3 {
    font-size: 1.3em;
    line-height: 1.3em;
}

/* content home match-status */
.gamefeed-container {
    position: relative;
    overflow: hidden;
}

#gamefeed-normal {
    z-index: 101;
}

#gamefeed-short {
    position: fixed;
    width: 100%;
    transform: translateY(-100%);
    transition: transform 0.1s;
    z-index: 100;
}

#gamefeed-short.gamefeed-short-visible {
    transform: translateY(0%);
    transition: transform 0.3s;
}

.match-status-short,
.match-status {
    position: absolute;
    width: 100%;
    padding: 5px 15px;
    color: #ffffff;
    background-color: #084401;
    background-image: url("https://www.aev-panther.de/pu_panther/images/1617/ap_1718_website_button_besucher.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    transition: transform 0.5s ease-in-out;
}

.match-slide-left {
    transform: translate(-100%, 0);
}

.gamefeed-container > div:last-of-type {
    position: relative;
}

.match-date {
    margin: 0.25em 0 0;
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
}

.match-status-short .match-date {
    margin: 0.25em 0 0;
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
}

.match-status.live .match-date {
    color: #af0d08;
}

.match {
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-align: center;
}

.match div {
    width: 30%;
}

.match .match-next,
.match .match-prev {
    position: relative;
    width: 5%;
    cursor: pointer;
}

.gamefeed-container > div:first-of-type .match-next,
.gamefeed-container > div:last-of-type .match-prev {
    cursor: default;
}

.match i {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.gamefeed-container > div:first-of-type .match-prev i,
.gamefeed-container > div:last-of-type .match-next i {
    display: none;
}

.match-status img {
    width: 90%;
    max-width: 90%;
}

.match-status-short img {
    width: 80%;
    max-width: 80%;
}

.match-status-short .match-score,
.match-status .match-score {
    position: relative;
    font-size: 4em;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.match-status-short .match-score {
    font-size: 3em;
}

.match-status-short.live .match-score,
.match-status.live .match-score {
    color: #af0d08;
}

.match-status-short .match-score span,
.match-status .match-score span {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    white-space: nowrap;
}

.match-info {
    margin: 0 0 0.5em;
    font-size: 1.5em;
    letter-spacing: 0.2em;
    text-align: center;
}

.match-info span {
    font-weight: 700;
    letter-spacing: 0;
}

.match-links {
    margin: 0 0 0.5em;
    font-size: 1.5em;
    text-align: center;
}

.match-links a {
    width: 5em;
    display: inline-block;
    padding: 0.1em 0.2em;
    color: #ffffff;
    border-top: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    background-color: transparent;
    transition: all 0.3s;
}

.match-links a:hover {
    color: #084401;
    background-color: #ffffff;
}

.match-links a:first-of-type {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.match-links a:last-of-type {
    border-right: 2px solid #ffffff;
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

/* content home news */
.news-item .news-img img {
    width: 100%;
}

.news-item .news-img .news-img-copy {
    display: inline-block;
    width: 100%;
    padding: 0 15px;
    text-align: right;
}

.news-item .news-info {
    padding: 0 15px 10px;
    font-size: 1.5em;
    line-height: 1.3;
    border-bottom: 5px solid #084401;
}

.news-item .news-day,
.news-item .news-time {
    font-size: 0.75em;
    color: #af0d08;
}

.news-item a {
    font-weight: 700;
    color: #084401;
}

.footer {
    margin: 0;
}

.bottom-more-link {
    display: block;
    background-color: #084401;
    text-align: right;
}

.bottom-more-link a {
    display: block;
    width: 100%;
    padding: 10px 15px 20px;
    font-size: 1.15em;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}

.bottom-more-link a i {
    position: relative;
    top: 0.12em;
    padding: 0 0 0 5px;
    font-size: 1.15em;
}

/* content single news */
.news-article .article-header > img {
    width: 100%;
}

.news-article .news-article-img-copy {
    display: inline-block;
    width: 100%;
    padding: 0 15px;
    text-align: right;
}

.news-article .news-article-date {
    display: inline-block;
    width: 100%;
    padding: 0 15px;
    font-size: 1.15em;
    color: #af0d08;
}

.news-article .news-article-title {
    padding: 0 15px;
    font-size: 1.7em;
    line-height: 1.2em;
    font-weight: 700;
    color: #084401;
}

.news-article .entry-content {
    padding: 0 15px;
    font-size: 1.4em;
}

.news-article .article-footer {
    border-top: 5px solid #99cc99;
    background-color: #084401;
}

.news-article .article-footer a {
    display: inline-block;
    width: 100%;
    padding: 10px 15px 20px;
    font-size: 1.15em;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
}

.news-article .article-footer a i {
    position: relative;
    top: 0.12em;
    font-size: 1.15em;
}

/* content page 'cfs' */
.content-page iframe {
    width: 100%;
}

.content-page #img-cfs-container {
    cursor: pointer;
}

/* small only */
@media screen and (max-width: 39.9375em) {
    body {
        font-size: 12px;
    }
}

/* medium and up */
@media screen and (min-width: 40em) {
}

/* medium only */
@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    body {
        font-size: 14px;
    }
}

/* large and up */
@media screen and (min-width: 64em) {
}

/* large only */
@media screen and (min-width: 64em) and (max-width: 74.9375em) {
}