/* All posts page css */
.posts {
    margin: 0px;
    background-size: cover;
    width: 100%;
    min-height: 100vh;
    margin-top: 70px;
    background-color: white;
    padding-bottom: 70px;
}

/* Headings css */

.posts-page-headings {
    padding-top: 50px;
    margin-bottom: 40px;
    text-align: center !important;
    word-wrap: break-word;
}

.posts-main-heading {
    font-size: 40px;
}

.posts-sub-heading {
    font-weight: 500;
    font-size: 20px;
}

/* Images css */
.featureImageContainer {
    height: 550px;
    overflow: hidden;
    z-index: -1;
}

.post-picture {
    display: block;
    margin-right: auto;
    margin-left: auto;
    width: 50%;
    position: relative;
}

.post-picture img {
    display: block;
    width: 100%;
    height: auto;
}

.post-picture-overlay {
    position: absolute;
    bottom: 10px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5); /* Black see-through */
    color: #f1f1f1;
    width: 100%;
    opacity: 1;
    color: white;
    font-size: 20px;
    padding: 50px;
    text-align: center;
}

.post-preview-image-container {
    height: 200px;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    overflow: hidden;
}

.post-preview-image * {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.substitute-picture * {
    width: 60%;
    padding-top: 20px;
    padding-bottom: 10px;
}

#featureImage {
    z-index: -1;
    width: 100%;
}

/* Button css */
#fb-link {
    background-color: #3b5998;
    box-shadow: inset 0 0 0 0 #3b5998;
    border-color: #3b5998;
}

#fb-link:hover {
    background-color: transparent;
    box-shadow: inset 400px 0 0 0 transparent;
    color: black;
}

#ticket-link {
    background-color: #1e5afe;
    border-color: transparent;
    color: white;
    font-size: x-large;
}

.back {
    /* Container for the generic post page call to action */
    text-align: center !important;
}

.back .button {
    background-color: transparent;
    border: 2px solid #d64a4a;
    color: #d64a4a;
}

.back .button:hover {
    background-color: transparent;
    border: 2px solid #d64a4a;
    color: white;
}


.button {
    background-color: #d64a4a;
    border: none;
    padding: 10px 14px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
}

.button a {
    color: white;
}

.event-links {
    /* Container for the generic post page call to action */
    text-align: center;
    padding-bottom: 5%;
}

.event-links-flex {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.event-links-flex * {
    margin: 10px;
}

.event-links h5 {
    margin-bottom: 20px;
    text-transform: uppercase;
}

.event-links .button {
    background-color: transparent;
    border: 2px solid #d64a4a;
    color: #d64a4a;
}

.event-links .button:hover {
    background-color: transparent;
    border: 2px solid #d64a4a;
    color: white;
}

.event-people {
    padding-bottom: 0;
    margin-bottom: -5%;
}

.event-people .button {
    background-color: black;
    border-color: black;
    color: white;
}

.tickets .button {
    background-color: #d64a4a;
    color: white;
    font-size: large;
}

.tickets .button:hover {
    background-color: transparent;
    box-shadow: inset 400px 0 0 0 transparent;
    color: black;
}

/* Post preview css (posts.html) */
.post {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.13), 0 6px 20px 0 rgba(0, 0, 0, 0.048);
    width: 350px;
    display: inline-block;
    margin: 20px;
}

.postHeading {
    margin-top: 0px;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: bold;
}

.post-inner-container {
    padding: 20px;
    text-align: left;
}

#posts-container {
    width: 90%;
    margin: auto;
    text-align: center;
}

/* Post page specific css */
h5 {
    font-size: 25px;
    margin-bottom: -5px;
}

p {
    font-size: 18px;
}

.center-text {
    text-align: center;
}

.event-picture * {
    max-width: 500px;
    margin-bottom: 50px;
}

.post-link {
    color: #0077b5;
    font-weight: bold;
    text-decoration: none;
}

.post-link:hover {
    color: #3b5998;
}

.post-sponsor {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.13), 0 6px 20px 0 rgba(0, 0, 0, 0.048);
    width: 350px;
    height: 200px;
    position: relative;
    display: inline-block;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    text-align: center;
    margin: 20px;
}

.text {
    margin: 5% 15%;
}

/* Distortion Event */
#distortion-speakers {
    background-color: #111111;
    color: white;
}

.gold-sponsor-row:after {
    content: "";
    display: table;
    clear: both;
}

.gold-sponsor-column-text {
    text-align: left;
    float: left;
    width: 80%;
}

.gold-sponsor-column-picture {
    margin-left: initial;
    float: left;
    width: 20%;
}

/* Video embedd */

iframe {
    width: 70%;
    height: 415px;
}

.iframe-container {
    text-align: center;
    padding-top: 50px;
    padding-bottom: 10px;
}

/* @media for different sized viewports */

/* @media, viewport is width <= 1300px */
@media (max-width: 1300px) {
    .text {
        margin: 5% 10%;
    }
}

/* @media, viewport is width <= 888px */
@media (max-width: 888px) {

    .iframe-container iframe {
        width: 90%;
    }

    .post {
        /* text and button on banner image need to move up => done with padding-top */
        width: 90%;
        margin: 0;
        margin-bottom: 20px;
    }

    .posts-page-headings {
        padding-top: 30px;
        margin: 5% 5%;
    }

    .post-picture {
        width: 90%;
    }

    .substitute-picture * {
        width: 75%;
    }

    .text {
        margin: 8% 5%;
        text-align: justify;
    }
}

@media (max-width: 500px) {
    .iframe-container {
        margin-left: 10%;
        margin-right: 10%;
    }

    .iframe-container iframe {
        width: 100%;
        height: 300px;
    }

    .posts-page-headings {
        padding-top: 20px;
        word-wrap: break-word;
        line-height: 35px;
    }

    .substitute-picture * {
        width: 80%;
    }

    .post-picture {
        width: 90%;
    }
}

@media (max-width: 350px) {

    .iframe-container {
        margin-left: 1%;
        margin-right: 1%;
    }

    .iframe-container iframe {
        width: 100%;
        height: 250px;
    }

    .posts-page-headings {
        padding-top: 10px;
        margin: 5% 2%;
    }

    .post-picture {
        width: 90%;
    }

    .posts-sub-heading {
        line-height: normal;
        text-align: justify;
    }

    .text {
        margin: 8% 2%;
    }

    .substitute-picture {
        width: 98%;
    }
}