/*
 * Content box (General container of all content boxes.)
 */
.content-container,
.content-container-textbox

/*General text container*/
    {
    /*Flexbox*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/*
  * Headline of container box
  */
.content-container-textbox>h2 {
    /*Pos*/
    margin: 50px 0px;
    font-size: 3em;
    text-align: left;
    width: 100%;

    /*Border*/
    border-bottom-style: solid;
    border-width: 10px;
    border-color: var(--TEXT-COLOR);
}

/*
  * Container with image/video/3d model and text
  */
.content-component {
    /*Pos*/
    margin: 15px 0px;
    width: 100%;

    /*Flexbox*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
}

.content-link {
    cursor: pointer;
}

/*
  * Reverse every 2nd container
  */
.content-component:nth-child(odd) {
    flex-direction: row-reverse;
}

/*
 * Define the containers of a content box. (content-media and content-text)
 */
.content-component>* {
    /*Pos*/
    max-width: 45%;
    padding: 20px;
    margin: 20px 10px;
}

/*
 * Media box
 */
.content-media {
    /*Pos*/
    position: relative;
    /*Flexbox*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /*Style*/
    cursor: pointer;
}


/*
 * Hide content.
 */
.content-hidden {
    display: none;
}

/*
 * Content of media box.
 */
.content-media-display {
    /*Pos*/
    padding: 10px;
    max-width: 90%;
    max-height: 750px;

    /*Style*/
    background-color: var(--TEXT-COLOR);
    transition: .5s;
}

.content-trailer-display {
    /*Style*/
    background-color: transparent;
    border-color: var(--TEXT-COLOR);
    border-radius: 2px;
    border-style: solid;
    border-radius: 25px;
}

/*
 * Zoom if hovered above media
 */
.content-media-display:hover {
    transform: scale(101%);
}

/*
 * Default text layout 
 */
.content-text {
    flex-grow: 1;

    /*Style*/
    font-size: 1.75em;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/*
 * Text header
 */
.content-text h3 {
    /*Pos*/
    padding: 0px;

    /*Style*/
    font-size: 2.0em;
    color: var(--TEXT-COLOR);
}

/*
 * Trailer box.
 */
.content-download {
    /*Pos*/
    width: 100%;

    /*Flexbox*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.content-download>a {
    /*Style*/
    font-size: 1.75em;

    text-decoration: none;
    padding: 10px 50px;

    border-color: var(--TEXT-COLOR);
    border-radius: 1px;
    border-style: solid;
    border-radius: 20px;
}

.content-download>a:hover {
    background-color: var(--TEXT-COLOR);
}

/*
 * Trailer box.
 */
.content-trailer {
    /*Flexbox*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.content-media-gallery {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-control {
    width: 100%;
    padding: 10px;
}

/*
 * Controll area and caption
 */
.gallery {
    /*Flexbox*/
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    /*Disable user selection*/
    user-select: none;
}

.gallery-caption {
    order: -1;
    padding: 10px;
}

/*
 * Caption of picture
 */
.gallery-caption>span {
    border-color: var(--TEXT-COLOR);
    border-radius: 1px;
    border-style: solid;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;

    min-width: 55%;
    text-align: center;
    padding: 10px 50px;
}

.gallery-control>* {
    text-align: center;
    flex-grow: 1;
    /*Center stuff*/
    font-size: 1.5em;
}

.gallery-index {
    border-color: var(--TEXT-COLOR);
    border-radius: 1px;
    border-style: solid;
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.gallery-previous::before,
.gallery-previous::after {
    content: '<';
    opacity: 0;

    transition: .6s;
}

.gallery-previous:hover::before,
.gallery-previous:hover::after {
    opacity: 1;
}

.gallery-next::before,
.gallery-next::after {
    content: '>';
    opacity: 0;

    transition: .6s;
}

.gallery-next:hover::before,
.gallery-next:hover::after {
    opacity: 1;
}

@media screen and (max-width: 2000px) {
    .content-media-display {
        max-height: 500px;
    }
}

@media screen and (max-width: 1400px) {

    /*
     * Content box
     */
    .content-container-textbox>h2 {
        margin: 35px 0px;
        font-size: 2.25em;
        text-align: center;
        /* Center headline of container*/
    }

    /* 
     * Change position of content childs
     */
    .content-component {
        /*Pos*/
        margin-bottom: 10px;

        /*Flexbox*/
        flex-direction: column;
        align-items: center;
    }

    /* 
     * Also the odd childs
     */
    .content-component:nth-child(odd) {
        flex-direction: column;
    }

    /*
     * Change margin and padding of childs
     */
    .content-component>* {
        margin: 5px 0px;
        padding: 0px;
        max-width: 100%;
    }

    /*
     * Change text size
     */
    .content-text {
        font-size: 1.5em;
    }

    .content-text h3 {
        font-size: 2em;
    }
}

@media screen and (max-width: 700px) {

    /*
     * Change img and iframe max height to scale properly
     */
    .content-media-display {
        max-height: 250px;
    }

    /*
     * Content box
     */
    .content-container-textbox>h2 {
        margin: 20px 0px;
        font-size: 1.5em;
    }

    /*
     * Change text size
     */
    .content-text {
        font-size: 1.0em;
    }

    .content-text h3 {
        font-size: 1.1em;
    }
}