@charset "UTF-8";

/*
General Stuff
*/

html, body {
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 1em;

    background-color: #f6f6f6;
    /* color: #ee0808; */
    color: #cf0505;	

    min-height: 100%;
    height: 100%;

    min-width: 100%;
    width: 100%;

    margin: auto;
}

a {
    color:inherit;
    font-weight: bold;
}

p {
    max-width: calc(100% - 2em);
    text-align: center;
    margin: auto;
}

h1 {
    font-size: 1.7em;
    font-weight: normal;
    margin-top: 0;
}

/* Header */
.header {
    overflow: hidden;
    height: 13.19em;

    color: #ffffff;

    display: flex;
    align-items: flex-end;

    background-image:
            url(./img/phone_logo_pages.png),
            linear-gradient(rgba(238, 0 , 5, 1.0), rgba(238, 0, 5, 1.0)),
            url(./img/phone_banner_pages.png);


    background-position:
            center,
            center,
            center;

    background-size:
            13.19em auto,
            auto,
            cover;

    background-repeat:
            no-repeat,
            repeat,
            repeat;

    background-blend-mode: normal, multiply;
}

.header .header_content {
    width: 100%;
    margin: 0 1em;

    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-end;

    position: relative;
}

.header .url_name {
    font-size: 1.68em;
    padding-bottom: 0.75em;

    position: absolute;
    left: 0;
}

.header .main_menu {
    display: flex;
    flex-direction: row;
    font-size: 1.0em;
    align-items: center;
}

.header .main_menu .main_menu_entry {
    margin-left: 1.25em;
}

.main_menu_entry a {
    text-decoration: none;
    cursor: pointer;
    font-weight: normal;
}

/* Footer */
.bottom {
}

.footer {
    overflow: hidden;
    height: 10.5em;
    color: #f6f6f6;
    background-color: #cf0505;
}

.footer .to_bar_box {
    height: 0.19em;
    background-color: #cf0505;
}

.footer .base_box {
    height: 10.5em;
    background-color: #cf0505;

    box-shadow: 0 0 1.313em 0 black inset;

    padding-top: 0.75em
}

.footer .base_box::after {
    box-shadow: 0 0 1.313em 0 black inset;
}

.footer .middle_box {
    height: 4.69em;
    background-color: #ae0000;
    color: #f6f6f6;

    box-shadow: 0 0 1em 0 black inset;

    padding-top: 1.25em;
}

.footer .name {
    font-weight: bold;
}

.go-to-top{
    margin-top: 3.75em;
    margin-bottom: 1em;
}

.go-to-top img {
    height: 3em;
}

/* Menu */
.active_menu {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

.active_menu a {
    text-decoration: underline;
}

.active_menu .menu_text {
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    padding: 0.0em 0.5em 0.2em 0.5em;
    white-space: nowrap;
}

.active_menu .color_red {
    background-color: #e82125;
    color: #ffffff;
}

.active_menu .color_white {
    background-color: #f6f6f6;
    color: #e82125;
}

.active_menu .menu_text {
    padding: 0.75em 1em;
}

.active_menu .color_red_left {
    width: 0.5em;
    background-image: url(./img/link_corner_red_left.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.active_menu .color_red_right {
    width: 0.5em;
    background-image: url(./img/link_corner_red_right.png);
    background-repeat: no-repeat;
    background-position: bottom left;
}

.active_menu .color_white_left {
    width: 0.5em;
    background-image: url(./img/link_corner_white_left.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}

.active_menu .color_white_right {
    width: 0.5em;
    background-image: url(./img/link_corner_white_right.png);
    background-repeat: no-repeat;
    background-position: bottom left;
}

/*
Welcome / Start Page
*/
.start_page .welcome_banner {
    overflow: hidden;
    height: 35em;

    background-image:
            url(../content/img/phone_logo_home_with_welcome.png),
            linear-gradient(rgba(238, 0 , 5, 1.0), rgba(238, 0, 5, 1.0)),
            url(../content/img/phone_banner_home.png);


    background-position:
            center 8em,
            center,
            center;

    background-size:
            auto,
            auto,
            cover;

    background-repeat:
            no-repeat,
            repeat,
            repeat;

    background-blend-mode: normal, multiply;

    margin-bottom: 3.75em;
}

.start_page .welcome_icons {
    width: calc(100% * 0.8);
    margin: auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 3.75em;
}

.start_page .welcome_icons a{
    flex-grow: 1;
}

.start_page .latest_work_teaser {
    margin-top: 3.75em;
}

.start_page .latest_work_teaser .selection_tab {
    display: flex;
    flex-direction: row;
    font-size: 1.0em;
    align-items: center;
    justify-content: center;
}

.start_page .latest_work_teaser .preview {
    border-style: solid;
    border-color: #e82125;
    border-radius: 0.5em;

    margin: 0 auto;

    width: calc(100% - 2em);

    min-height: 5em;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

.start_page .preview {
    border-color: #e82125;
    border-style: solid;
    border-width: 0.17em;
    border-radius: 1.33em;
    box-sizing: border-box;
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    box-shadow: 0 0 1.313em 0 black inset;

}

.start_page .preview .image_container {
    border-color: #f6f6f6;
    border-width: 0.25em;
    border-style: solid;
	border-radius: 0.5em;

    box-shadow: 0 0 1.313em 0 black;

    position: relative;

    margin: 0.5em;

    width: 160px;
    height: 120px;
}

.start_page .preview .image_container .image_overlay {
    position: absolute;
    bottom: 0px;

    width: 100%;
    height: 2em;

    background-color: #EE0005;
    mix-blend-mode: multiply;
	
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
}

.start_page .preview .image_container .image_title {
    position: absolute;
    bottom: 0px;

    width: 100%;
    height: 2em;

    color: #f6f6f6;

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

.start_page .preview .image_container a {
    text-decoration: none;
}

.start_page .preview .image_container a img {
	border-radius: 0.5em;
}

.start_page .welcome_content p {
	/* Safari does not support text-align-last§
	text-align: justify;
	-webkit-text-align-last: center;
	text-align-last: center;
	*/
	text-align: center;
}

/*
Regular Content
*/
.page_content {
    overflow: hidden;
    /*                      header   go-to to  footer: top box + base box */
    min-height: calc(100% - 13.19em - 7.75em - 0.19em - 10.5em);

    width: 100%;
    max-width: calc(100% - 2em);
    margin: 0 auto;

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

.page_content .content.left {
    min-height: calc( 100% - 3.75em);
    width: calc( 100% - 2em);

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 3.75em;
}

.page_content .content.right {
    min-height: calc( 100% - 3.75em);
    width: calc( 100% - 2em);

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 3.75em;
}

.page_content .content.right .text {
    text-align: left;
}

.page_content .content.right .text p {
    text-align: justify;
}

.page_content .content.right .text h1, .page_content .content.right .text h2, .page_content .content.right .text h3 {
    text-align: center;
}

.page_content .content.right .text input, .page_content .content.right .text textarea {
    width: 95%;
    line-height: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    border: 1px solid #e82125;
    border-radius: 0.5em;
}

.page_content .content.right .text textarea {
    height: 10em;
}

.page_content .content.right .text input[type=submit] {
    width: auto;
    color: #ffffff;
    background-color: #e82125;
    border: none;
    border-radius: 0.5em;
    min-width: 5em;
    font-size: 0.8em;
}

/*
Gallery
*/
.portfolio_page {
    flex-direction: column !important;
    justify-content: flex-start !important;
}

.portfolio_page .selection_tab {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 3.75em;
}

.portfolio_page .portfolio_cat_content {
    min-height: calc( 100% - 3.75em - 1em - 0.75em - 0.75em);
    overflow: auto;

    border-color: #e82125;
    border-style: solid;
    border-width: 0.17em;
    border-radius: 1.33em;
    box-sizing: border-box;
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    justify-content: center;
    align-items: center;

    box-shadow: 0 0 1.313em 0 black inset;

}

.portfolio_page .selection_tab .menu_entry{
    box-shadow: inset 0px 1px 0 #ee0808,
                inset 1px 0px 0 #ee0808,
                inset -1px 0px 0 #ee0808;
    box-sizing: border-box;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    height: 100%;
    padding: 0.75em 1em;
    border-bottom-style: none;
    margin-left: 0.3em;
    margin-right: 0.3em;
}

.portfolio_page .portfolio_cat_content .placeholder_text {
    min-height: calc(120px + 1em + 0.5em);
    display: flex;
    justify-content: center;
    align-items: center;
}

.portfolio_page .portfolio_cat_content .image_container {
    border-color: #f6f6f6;
    border-width: 0.25em;
    border-style: solid;
	border-radius: 0.5em;

    box-shadow: 0 0 1.313em 0 black;

    position: relative;

    margin: 0.5em;

    width: 160px;
    height: 120px;
}

.portfolio_page .portfolio_cat_content .image_container .image_overlay {
    position: absolute;
    bottom: 0px;

    width: 100%;
    height: 2em;

    background-color: #EE0005;
    mix-blend-mode: multiply;
	
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
}

.portfolio_page .portfolio_cat_content .image_container .image_title {
    position: absolute;
    bottom: 0px;

    width: 100%;
    height: 2em;

    color: #f6f6f6;

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

.portfolio_page .portfolio_cat_content .image_container a {
    text-decoration: none;
}

.portfolio_page .portfolio_cat_content .image_container a img {
	border-radius: 0.5em;
}

/***********************************************************************************************************************
*
*   Tablet, because "Mobile First"
*
***********************************************************************************************************************/
@media screen and (min-width: 48em) and (max-width: 67em){

    .page_content {
        flex-direction: row;
    }

    .page_content .content.left {
        width: 50%;
    }

    .page_content .content.right {
        border-left: thin solid #ff0000;
        width: 50%;
    }

    .page_content .content.right .text {
        text-align: left;
        padding-left: 1em;
    }

    .start_page .welcome_banner {
        background-image:
                url(../content/img/logo_home_with_welcom.png),
                linear-gradient(rgba(238, 0 , 5, 1.0), rgba(238, 0, 5, 1.0)),
                url(../content/img/banner_home.png);

        background-size: calc(100% - 2em) auto,
                auto,
                cover;
    }

    .header {
        background-image:
                url(./img/logo_pages.png),
                linear-gradient(rgba(238, 0 , 5, 1.0), rgba(238, 0, 5, 1.0)),
                url(./img/banner_pages.png);
    }
}

/***********************************************************************************************************************
*
*   Desktop, because "Mobile First"
*
***********************************************************************************************************************/
@media screen and (min-width: 67em) {

    p {
        width: 100%;
        max-width: 67em;
    }

    .header .header_content {
        margin: 0em auto;
        max-width: 67em;
    }

    .page_content {
        max-width: 67em;
        flex-direction: row;
    }

    .page_content .content.left {
        width: 50%;
    }

    .page_content .content.right {
        border-left: thin solid #ff0000;
        width: 50%;
    }

    .page_content .content.right .text {
        text-align: left;
        padding-left: 1em;
    }

    .start_page .welcome_banner {
        background-image:
                url(../content/img/logo_home_with_welcom.png),
                linear-gradient(rgba(238, 0 , 5, 1.0), rgba(238, 0, 5, 1.0)),
                url(../content/img/banner_home.png);

        background-size: 67em auto,
                auto,
                cover;
    }

    .start_page .welcome_icons {
        width: 100%;
        max-width: calc(67em * 0.8);
    }

    .start_page .latest_work_teaser .preview {
        width: 100%;
        max-width: 67em;
    }

    .header {
        background-image:
                url(./img/logo_pages.png),
                linear-gradient(rgba(238, 0 , 5, 1.0), rgba(238, 0, 5, 1.0)),
                url(./img/banner_pages.png);
    }
}