@font-face {
    font-family: 'Open Sans';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/opensans-regular-webfont.eot');
    src: url('../fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-regular-webfont.woff2') format('woff2'), url('../fonts/opensans-regular-webfont.woff') format('woff'), url('../fonts/opensans-regular-webfont.ttf') format('truetype'), url('../fonts/opensans-regular-webfont.svg#open_sansregular') format('svg');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: normal;
    font-style: italic;
    src: url('../fonts/opensans-italic-webfont.eot');
    src: url('../fonts/opensans-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-italic-webfont.woff2') format('woff2'), url('../fonts/opensans-italic-webfont.woff') format('woff'), url('../fonts/opensans-italic-webfont.ttf') format('truetype'), url('../fonts/opensans-italic-webfont.svg#open_sansitalic') format('svg');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: 600;
    font-style: normal;
    src: url('../fonts/opensans-semibold-webfont.eot');
    src: url('../fonts/opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-semibold-webfont.woff2') format('woff2'), url('../fonts/opensans-semibold-webfont.woff') format('woff'), url('../fonts/opensans-semibold-webfont.ttf') format('truetype'), url('../fonts/opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: 600;
    font-style: italic;
    src: url('../fonts/opensans-semibolditalic-webfont.eot');
    src: url('../fonts/opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-semibolditalic-webfont.woff2') format('woff2'), url('../fonts/opensans-semibolditalic-webfont.woff') format('woff'), url('../fonts/opensans-semibolditalic-webfont.ttf') format('truetype'), url('../fonts/opensans-semibolditalic-webfont.svg#open_sanssemibold_italic') format('svg');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: bold;
    font-style: normal;
    src: url('../fonts/opensans-bold-webfont.eot');
    src: url('../fonts/opensans-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-bold-webfont.woff2') format('woff2'), url('../fonts/opensans-bold-webfont.woff') format('woff'), url('../fonts/opensans-bold-webfont.ttf') format('truetype'), url('../fonts/opensans-bold-webfont.svg#open_sansbold') format('svg');
}

@font-face {
    font-family: 'Open Sans';
    font-weight: bold;
    font-style: italic;
    src: url('../fonts/opensans-bolditalic-webfont.eot');
    src: url('../fonts/opensans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/opensans-bolditalic-webfont.woff2') format('woff2'), url('../fonts/opensans-bolditalic-webfont.woff') format('woff'), url('../fonts/opensans-bolditalic-webfont.ttf') format('truetype'), url('../fonts/opensans-bolditalic-webfont.svg#open_sansbold_italic') format('svg');
}
/*!
 * Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
    font-family: 'Font Awesome';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/fa-regular-400.eot");
    src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg");
}
@font-face {
  font-family: 'Font Awesome';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/fa-solid-900.eot");
  src: url("../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-solid-900.woff2") format("woff2"), url("../fonts/fa-solid-900.woff") format("woff"), url("../fonts/fa-solid-900.ttf") format("truetype"), url("../fonts/fa-solid-900.svg#fontawesome") format("svg"); }
/** BEGIN Portrait */
@media all {
    /** BEGIN reset */
    a,
    abbr,
    acronym,
    address,
    applet,
    article,
    aside,
    audio,
    b,
    big,
    blockquote,
    body,
    button,
    canvas,
    caption,
    center,
    cite,
    code,
    dd,
    del,
    details,
    dfn,
    div,
    dl,
    dt,
    em,
    embed,
    fieldset,
    figcaption,
    figure,
    footer,
    form,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    header,
    hgroup,
    html,
    i,
    iframe,
    img,
    input,
    ins,
    kbd,
    label,
    legend,
    li,
    mark,
    menu,
    nav,
    object,
    ol,
    output,
    p,
    pre,
    q,
    ruby,
    s,
    samp,
    section,
    small,
    span,
    strike,
    strong,
    sub,
    summary,
    sup,
    table,
    tbody,
    td,
    textarea,
    tfoot,
    th,
    thead,
    time,
    tr,
    u,
    ul,
    var,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        vertical-align: baseline;
        font: inherit;
        font-size: 100%;
    }
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol,
    ul {
        list-style: outside none none;
    }
    li {
        margin-bottom: .5em;
    }
    sup {
        vertical-align: top;
    }
    table,
    pre,
    blockquote,
    figcaption {
        margin-bottom: 1em;
    }
    figure,
    figcaption {
        margin-bottom: .5em;
    }
    blockquote {
        quotes: none;
		padding-left: 1.5em;
        font-style: italic;
	}
    blockquote:before,
    blockquote:after {
        content: '';
        content: none;
    }
	blockquote:before {
		color: #777;
		content: "“";
		display: block;
		font: italic 2.5em/1 Cochin,Georgia,"Times New Roman",Times,serif;
		margin-left: -0.75em;
		height: 0;
		text-align: left;
	}
	blockquote footer {
		margin-top: -.25em;
		text-align:right;
	}
	blockquote footer cite {
		font-size: 0.75em;
		font-variant:small-caps;
	}
    *,
    *:before,
    *:after {
        box-sizing: inherit;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
    }
    html {
        box-sizing: border-box;
    }
    /** BEGIN Icons */
    .icon::before {
        display: inline-block;
        font-family: "Font Awesome";
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        padding-right: .5em;
    }
    .icon-calendar-check:before {
        font-weight: 400;
        content: "\f274";
    }
    .icon-hand-point-up:before {
        font-weight: 400;
        content: "\f0a6";
    }
    .icon-plus-square:before {
        font-weight: 400;
        content: "\f0fe";
    }
    .icon-check-double:before {
        font-weight: 900;
        content: "\f560";
    }
    .icon-chevron-left:before {
        font-weight: 900;
        content: "\f053";
    }
    .icon-chevron-right:before {
        font-weight: 900;
        content: "\f054";
    }
    .icon-dolly-flatbed:before {
        font-weight: 900;
        content: "\f474";
    }
    .icon-map-marked-alt:before {
        font-weight: 900;
        content: "\f5a0";
    }
    .icon-paper-plane:before {
        font-weight: 900;
        content: "\f1d8";
    }
    .icon-redo:before {
        font-weight: 900;
        content: "\f01e";
    }
    .icon-truck:before {
        font-weight: 900;
        content: "\f0d1";
    }
    .icon-user-friends:before {
        font-weight: 900;
        content: "\f500";
    }
    /** BEGIN Icons in main nav 
     * Switch off icons on all pages but page 1
     */
    body > header .icon::before {
        padding-right: 0;
        max-width: 0;
        overflow: hidden;
    }
    .viewing-page-1 > header .icon::before {
        padding-right: .5em;
        max-width: 100px;
    }
    /** END Icons in main nav */
    /** END Icons */
    
    /** BEGIN Fontsize */
    body {
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        -webkit-text-size-adjust: none;
    }
    body > header {
        font-size: -webkit-calc(.6em + 0.0045 * (100vh - 320px) + 0.003 * (100vw - 450px));
        font-size: calc(.6em + 0.0045 * (100vh - 320px) + 0.003 * (100vw - 450px));
    }
    body > main,
    body > aside {
        font-size: -webkit-calc(.6em + 0.005 * (100vh - 320px) + 0.0035 * (100vw - 450px));
        font-size: calc(.6em + 0.005 * (100vh - 320px) + 0.0035 * (100vw - 450px));
    }
    body > footer {
        font-size: -webkit-calc(.6em + 0.004 * (100vh - 320px) + 0.0025 * (100vw - 450px));
        font-size: calc(.6em + 0.004 * (100vh - 320px) + 0.0025 * (100vw - 450px));
    }
    /** END Fontsize */
    
    html {
        height: 100%;
    }
    body {
        background-color: #f3f3f3;
    }
    body[class^=viewing-page] {
        overflow: hidden;
    }
    p {
        line-height: -webkit-calc(1em + 1vh);
        line-height: calc(1em + 1vh);
        margin-bottom: 3vh;
        letter-spacing: .05vw;
        text-align: center;
    }
    ul {
        margin-bottom: 3vh;
    }
    #start > div img {
        height: 80%;
        width: auto;
        max-width: 800px;
    }
    section {
        padding-top: -webkit-calc(5vh + 40px);
        padding-top: calc(5vh + 40px);
        padding-bottom: -webkit-calc(8vh + 30px);
        padding-bottom: calc(8vh + 30px);
        overflow: hidden;
        min-height: 100vh;
    }
    section#start {
        background: transparent url("../img/bg.1920x1080.jpg") no-repeat center;
        background-size: cover;
        position: relative;
        padding-top: 50vh;
    }
    section > * {
        height: 100%;
        text-align: center;
    }
    section > article {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        height: 100%;
    }
    section > article > h2 {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0;
            -ms-flex: 0 0;
                flex: 0 0;
    }
    section > article > .content {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1;
            -ms-flex: 1 1;
                flex: 1 1;
    }
    section > article > .content {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: space-evenly;
        -webkit-justify-content: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-align-content: stretch;
            -ms-flex-line-pack: stretch;
                align-content: stretch;
        padding-left: 1em;
        padding-right: 1em;
    }
    
    _:-ms-lang(x),
	section > article > .content {
        padding-top: 6em;
    }
    footer.main {
        border: 1px solid rgba(96,96,96,.95);
        border-width: 2px 0;
        margin: 0 auto;
        text-align:center;
        position: fixed;
        bottom: 0;
        display: block;
        width: 100%;
        background-color: rgba(96,96,96,.8);
        z-index: 100;
        color: #eee;
        
        display: -webkit-box;
        
        display: -webkit-flex;
        
        display: -ms-flexbox;
        
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-flex-wrap: wrap-reverse;
            -ms-flex-wrap: wrap-reverse;
                flex-wrap: wrap-reverse;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    footer.main ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-box-pack: space-evenly;
        -webkit-justify-content: space-evenly;
            -ms-flex-pack: space-evenly;
                justify-content: space-evenly;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
        padding-left: 10px;
        
        list-style: none outside none;
        margin-bottom: 0;
    }
    footer.main li {
        margin: 0;
        padding: 0;
    }
    footer.main a {
        text-decoration: none;
        color: #eee;
        text-transform: uppercase;
        padding: 0 10px;
    }
    footer.main ul li > * {
        display: inline-block;
    }
    footer.main small,
    footer.main a {
        line-height: 2em;
    }
    h2, h3, h4 {
        text-align: center;
        color: #912229;
        padding: .5em 0;
    }
    h2 {
        font-size: 2em;
        line-height: 2em;
    }
    h3 {
        font-size: 1.4em;
        line-height: 1em;
    }
    h4 {
        font-size: 1em;
        line-height: 1em;
        font-weight: bold;
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
    .content > div {
        text-align: center;
    }
    /** BEGIN main-navigation */
    body > header {
        border:1px solid #ccc;
        border-width:1px 0;
        margin:0 auto;
        padding:0;
        text-align:center;
        position: fixed;
        top: 0;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        width: 100%;
        background-color: rgba(255,255,255,.8);
        z-index: 100;
    }
    body > header ul {
        list-style: none outside none;
        text-align: center;
        margin: 1vh 1vw;
    }
    body > header li {
        display: inline;
    }
    body > header a.logo {
        width: -webkit-calc(125px + 5vw);
        width: calc(125px + 5vw);
        position: relative;
    }
    _:-ms-lang(x),
	body > header a.logo {
        height: calc(0.310667 * (125px + 5vw));
        display: block;
        overflow:hidden;
    }
    body > header a.logo svg {
        width: 100%;
        height: auto;
        pointer-events: none;
    }
    body > header a.logo h1,
    body > header a.logo p {
        position: absolute;
        left: -32767px;
    }
    body > header nav a {
        display: inline-block;
        padding: 20px 10px;
        text-transform: uppercase;
        text-decoration: none;
        color: #555;
    }
    body > header nav a:hover,
    body > header nav a:focus {
        outline: .1em solid #912229;
    }
    .viewing-page-2 > header li:nth-child(1) a,
    .viewing-page-3 > header li:nth-child(2) a,
    .viewing-page-4 > header li:nth-child(3) a,
    .viewing-page-5 > header li:nth-child(4) a,
    .viewing-page-6 > header li:nth-child(5) a,
    .viewing-page-7 > header li:nth-child(6) a {
        background-color: #912229;
        color: #fff;
    }
    .viewing-page-1 > header {
        position: absolute;
        top: 0;
        left:0;
        right:0;
        display: block;
        height: auto;
        text-align: center;
        border: 0 none transparent;
        background-color: transparent;
    }
    .viewing-page-1 > header a.logo {
        display: block;
        text-align: center;
        width: 100%;
        margin-top: 4vh;
    }
    .viewing-page-1 > header a.logo svg {
        width: 25vw;
    }
    .viewing-page-1 > header ul {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        margin-top: 5vh;
    }
    .viewing-page-1 > header li {
        -webkit-flex-basis: 16.666%;
            -ms-flex-preferred-size: 16.666%;
                flex-basis: 16.666%;
        padding: 0 1vw;
    }
    .viewing-page-1 > header nav a {
        border: .1em solid #912229;
        background-color: #fff;
        height: 100%;
        padding: 1.25vh 1vw .75vh;
    }
    .viewing-page-1 > header nav a:hover {
        background-color: #912229;
        color: #fff;
    }
    body > header nav p {
        overflow: hidden;
        max-width: 0;
        max-height: 0;
        text-transform: none;
        font-size: .75em;
        text-align: justify;
        padding: 0;
        margin: 0;
    }
    .viewing-page-1 > header nav p {
        max-width: 100vw;
        max-height: 100vh;
        padding-top: 1vh;
    }
    .viewing-page-1 > header nav p:after {
        position: absolute;
        bottom: 0;
        right: 0;
        left: 0;
        content: " ... mehr";
        padding: 0 1vw 0 0;
        text-align: right;
        background-color: #fff;
        background: -webkit-gradient(linear, left top, right top, from(rgba(255,255,255,0)),color-stop(33%, rgba(255,255,255,0)),color-stop(66%, rgba(255,255,255,1)),to(rgba(255,255,255,1)));
        background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 33%,rgba(255,255,255,1) 66%,rgba(255,255,255,1) 100%);
        background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 33%,rgba(255,255,255,1) 66%,rgba(255,255,255,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffffff', GradientType=1);
        font-weight: bold;
        line-height: -webkit-calc(1em + 1vh);
        line-height: calc(1em + 1vh);
    }
    .viewing-page-1 > header nav a:hover p:after {
        background-color: #912229;
        background: -webkit-gradient(linear, left top, right top, from(rgba(145,34,41,0)),color-stop(33%, rgba(145,34,41,0)),color-stop(66%, rgba(145,34,41,1)),to(rgba(145,34,41,1)));
        background: -webkit-linear-gradient(left, rgba(145,34,41,0) 0%,rgba(145,34,41,0) 33%,rgba(145,34,41,1) 66%,rgba(145,34,41,1) 100%);
        background: linear-gradient(to right, rgba(145,34,41,0) 0%,rgba(145,34,41,0) 33%,rgba(145,34,41,1) 66%,rgba(145,34,41,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00912229', endColorstr='#ff912229', GradientType=1);
    }
    .viewing-page-1 > header nav p:after {
        display:none;
    }
    
    /** END main-navigation */
    /** BEGIN Flip-Dialog */
	#contact {
		-webkit-perspective: 1000px;
		        perspective: 1000px;
	}
    #state-flip:checked ~ #contact {    
        z-index: 9999;
        height: 100vh;
    }
	#state-flip:checked ~ #contact #dialog {
		-webkit-transform: rotateX(180deg);
		        transform: rotateX(180deg);
	}
	#dialog {
		-webkit-transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1), transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		-webkit-transform-style: preserve-3d;
		        transform-style: preserve-3d;
		-webkit-transform-origin: 50% 50%;
		    -ms-transform-origin: 50% 50%;
		        transform-origin: 50% 50%;
	}
	#front, #back {
		-webkit-backface-visibility: hidden;
		        backface-visibility: hidden;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	#front {
		z-index: 2;
		-webkit-transform: rotateX(0deg);
		        transform: rotateX(0deg); 	/* for firefox 31 */
	}
	#back {
		-webkit-transform: rotateX(180deg);
		        transform: rotateX(180deg);
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
	}
    /** BEGIN Flip-Dialog for IE10 + IE11 */
    _:-ms-lang(x),
    #front {
        transform: rotateX(0deg);
    }
    _:-ms-lang(x),
    #back {
        transform: rotateX(-90deg);
    }
    _:-ms-lang(x),
	#state-flip:checked ~ #contact #dialog {
		-ms-transform: none;
		    transform: none;
	}
    _:-ms-lang(x),
	#state-flip:checked ~ #contact #front {
		transform: rotateX(90deg);
	}
    _:-ms-lang(x),
	#state-flip:checked ~ #contact #back {
		transform: rotateX(0deg);
	}
    /** END Flip-Dialog for IE10 + IE11 */
	/** END Flip-Dialog */
	
	/** Additional */
	#front, #back {
		color:#fff2ff;
	}
	#front {
		background-color:#912229;
		display: block;
		cursor: pointer;
        font-size: 2.5vh;
        text-align: center;
        line-height: 6vh;
	}
    #back a {
        text-decoration: none;
        color: #fff;
    }
	#back  {
		background-color:#912229;
	}
	#back h2 {
		text-align:center;
        color: #fff;
	}
	#front strong {
        position: relative;
        letter-spacing: .15em;
        text-transform: uppercase;
	}
    #front .icon {
        position: absolute;
        top: 85%;
        left: 45%;
        line-height: 1em;
    }
    /*
	#back h2 {
		font-size: 3vh;
		line-height: 4vh;
		margin-top: 1.5vh;
	}
    */
	.state {
		position: absolute;
		left: -32767px;
	}
	/** END Additional */
	
	/** Positioning */
	html, body {
        height: 100% !important;
        position: relative;
	}
	#contact {
        position: fixed !important;
        width:100%;
        bottom:0;
        left:0;
        height: -webkit-calc(8vh + 30px);
        height: calc(8vh + 30px);
	}
	* html #contact {
		height: 100% !important;
	}
	#dialog {
		position:absolute;
		top: 0vh;
		right: 32.8vw;
		bottom: 40px;
		left: 32.8vw;
	}
    #state-flip:checked ~ #contact > #dialog {
		top: -webkit-calc(30vh - 86px);
		top: calc(30vh - 86px);
		right: -webkit-calc(20vw - 54px);
		right: calc(20vw - 54px);
		bottom: -webkit-calc(30vh - 86px);
		bottom: calc(30vh - 86px);
		left: -webkit-calc(20vw - 54px);
		left: calc(20vw - 54px);
	}
    #contact .grid {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        padding: 1em 1em 2em;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;    /* for portrait: column */
        -webkit-flex-wrap: nowrap;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
        -webkit-justify-content: space-around;
            -ms-flex-pack: distribute;
                justify-content: space-around;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }
    #contact .grid > div:first-child {
        -webkit-box-flex: 1;
        -webkit-flex: 1 3 20em;
            -ms-flex: 1 3 20em;
                flex: 1 3 20em;
    }
    #contact .grid > div:last-child {
        -webkit-box-flex: 3;
        -webkit-flex: 3 1 20em;
            -ms-flex: 3 1 20em;
                flex: 3 1 20em;
    }
    #contact .grid > div {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    #contact .grid > div:first-child > * {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1;
            -ms-flex: 1 1;
                flex: 1 1;
    }
    #contact .grid > div:first-child > *:last-child {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0;
            -ms-flex: 0 0;
                flex: 0 0;
    }
    #contact .grid > div:last-child > h2 {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }
    #contact .grid > div:last-child > form {
        -webkit-box-flex: 8;
        -webkit-flex: 8;
            -ms-flex: 8;
                flex: 8;
    }
	/** END Positioning */
	
	/** Close Icon */
	.icon-close {
		position: absolute;
		top: 1vh;
		right: 1.5vh;
		width: 3vh;
		height: 3vh;
		border: 0.3vh solid #fff2ff;
		border-radius: 0.6vh;
        z-index: 100;
        cursor: pointer;
	}
	.icon-close span {
		position: absolute;
		left: -32767px;
	}
	.icon-close:before {
		width: 3.75vh;
		height: 3.75vh;
		display: inline-block;
		position: absolute;
		top: -.675vh;
		left: -.675vh;
		content: "\00d7";
		font-size: 3.75vh;
		line-height: 3.75vh;
		text-align: center;
	}
	/** END Close Icon */
	
	
	
	/** Blur layering */
	.main {
		-webkit-transform-origin: 50% 50%;
		    -ms-transform-origin: 50% 50%;
		        transform-origin: 50% 50%;
		-webkit-transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
		transition: 0.3s all cubic-bezier(0.250, 0.460, 0.450, 0.940);
	}
	#state-flip:checked ~ .main {
		-webkit-filter: blur(2px);
		        filter: blur(2px);
	}
    
	#layer {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
		visibility: hidden;
		cursor: pointer;
		-webkit-transition: visibility 0s linear 0.5s, opacity 0.5s ease-in-out;
		transition: visibility 0s linear 0.5s, opacity 0.5s ease-in-out;
		zoom: 1;
		filter: alpha(opacity=0);
		opacity: 0;
	}
	#state-flip:checked ~ #layer {
        display: block;
		visibility:visible;
		filter: alpha(opacity=25);
		opacity: 0.25;
		-webkit-transition-delay: 0s;
		        transition-delay: 0s;
	}
    .show-sent {
        display: none !important;
    }
    #state-sent:checked ~ #contact .show-sent {
        display: block !important;
    }
    #state-sent:checked ~ #contact .hide-sent {
        display: none;
    }
    /** Form */
	form {
		margin: 0 2em;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
	}
    #CustomForm_ContactForm_FormMessages {
        display: none;
    }
    #CustomForm_ContactForm_FormMessages p {
        line-height: 1.2em;
    }
    #CustomForm_ContactForm_FormMessages.error {
        display:block;
    }
    form > #CustomForm_ContactForm_FormMessages {
        -webkit-box-flex: 0;
        -webkit-flex: 0 0;
            -ms-flex: 0 0;
                flex: 0 0;
    }
    form fieldset {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 2em;
            -ms-flex: 1 1 2em;
                flex: 1 1 2em;
    }
    form fieldset:nth-of-type(3) {
        -webkit-box-flex: 4;
        -webkit-flex: 4 4 8em;
            -ms-flex: 4 4 8em;
                flex: 4 4 8em;
    }
	fieldset {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
        -webkit-align-content: stretch;
            -ms-flex-line-pack: stretch;
                align-content: stretch;
		overflow:hidden;
	}
    fieldset > * {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1;
            -ms-flex: 1 1;
                flex: 1 1;
    }
	.field {
		position: relative;
		overflow:hidden;
	}
	.middleColumn {
		position: absolute;
        top: 0;
        right: .15em;
        bottom: .15em;
        left: 0;
	}
	input.action,
    button.action,
    .button{
		display: block;
        background: #5ccd00;
		background: -webkit-gradient(linear, left bottom, left top, from(#5ccd00), to(#4aa400));
		background: -webkit-linear-gradient(bottom, #5ccd00 0%, #4aa400 100%);
		background: linear-gradient(to top, #5ccd00 0%, #4aa400 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4aa400', endColorstr='#ff5ccd00', GradientType=0);
		color: #fff;
		line-height: -webkit-calc(2vh + 25px);
		line-height: calc(2vh + 25px);
		border: 1px solid #459A00;
		text-align:center;
        font-weight: bold;
        width: -webkit-calc(100% - .15em);
        width: calc(100% - .15em);
		height: -webkit-calc(2vh + 25px);
		height: calc(2vh + 25px);
	}
    .button {
        width: auto;
        margin: 0 auto;
        padding: 0 1em;
    }
	input.text,
	textarea {
		border: 1px solid #ccc;
		height: 100%;
		outline: 0 none;
		padding: 0.8em 5px 0.4em;
		width: 100%;
        border-radius: 0;
	}
    textarea {
        padding-top: 1em;
        resize: none;
    }
	input, select {
		vertical-align: middle;
	}
	.field > label {
		color: #2b812b;
		line-height: -webkit-calc(0.7vh + 13px);
		line-height: calc(0.7vh + 13px);
		left: 5px;
		opacity: 1;
		position: absolute;
		top: 0;
		-webkit-transition: all 0.333s ease 0s;
		transition: all 0.333s ease 0s;
        z-index: 9999;
        font-size: .5em;
	}
	.js-hide-label > label {
		opacity: 0;
		top: -webkit-calc(0.9vh + 13px);
		top: calc(0.9vh + 13px);
	}

	.js-unhighlight-label > label {
		color: #999;
	}
    form img.mail-ok {
        width: 30%;
        max-width: 250px;
        margin: 1em auto;
    }
	/** END Form */
    
    ul.polaroids {
        /*float: left;*/
        width: 15vw;
        padding: 0 1vw 0 4vw;
        position: absolute;
    }
    ul.polaroids-big {
        width: 22.5vw;
    }
    ul.polaroids ~ div {
        margin-left: auto;
        margin-right: auto;
        max-width: 65vw;
    }
    ul.polaroids-big ~ div {
        max-width: 50vw;
    } 
    ul.polaroids-left {
        left: 0;
    }
    ul.polaroids-right {
        right: 0;
        padding: 0 4vw 0 1vw;
    }
    ul.polaroids li {
        display:inline;
    }
    ul.polaroids img {
        width: 100%;
        height: auto;
    }
    ul.polaroids-title a {
        font-size: .75em;
    }
    ul.polaroids-title a:after {
        content: attr(title);
        position: relative;
        bottom: -.5em;
        font-size: 90%;
    }
    
    /* By default, we tilt all our images -2 degrees */
    ul.polaroids a {
        background: #fff;
        display: inline;
        float: left;
        width: auto;
        padding: .5vw .5vw .75vw;
        text-align: center;
        text-decoration: none;
        color: #333;
        box-shadow: 0 0.2vh 0.4vh rgba(0,0,0,.25);
        -webkit-transition: -webkit-transform .15s linear;
        transition: -webkit-transform .15s linear;
        transition: transform .15s linear;
        transition: transform .15s linear, -webkit-transform .15s linear;
        -webkit-transform: rotate(-2deg);
            -ms-transform: rotate(-2deg);
                transform: rotate(-2deg);
    }

    /* Rotate images */
    ul.polaroids li:nth-child(even) a {
        -webkit-transform: rotate(4deg);
            -ms-transform: rotate(4deg);
                transform: rotate(4deg);
    }
    ul.polaroids li:nth-child(odd) a {
        -webkit-transform: rotate(-4deg);
            -ms-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }
    ul.polaroids-right li:nth-child(even) a {
        -webkit-transform: rotate(-4deg);
            -ms-transform: rotate(-4deg);
                transform: rotate(-4deg);
    }
    ul.polaroids-right li:nth-child(odd) a {
        -webkit-transform: rotate(4deg);
            -ms-transform: rotate(4deg);
                transform: rotate(4deg);
    }

    /* Don't rotate every third image, but offset its position */
    ul.polaroids li:nth-child(1) a {
        position: relative;
        left: .5vw;
        z-index: 4;
    }
    ul.polaroids li:nth-child(2) a {
        position: relative;
        top: -1vw;
        left: -1.5vw;
        z-index: 3;
    }
    ul.polaroids li:nth-child(3) a {
        position: relative;
        top: -2vw;
        left: 1.5vw;
        z-index: 2;
    }
    ul.polaroids li:nth-child(4) a {
        position: relative;
        top: -3vw;
        z-index: 1;
    }
    
    /* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
    ul.polaroids a:hover {
        -webkit-transform: scale(1.25);
            -ms-transform: scale(1.25);
                transform: scale(1.25);
        position: relative;
        z-index: 5;
    }
    a[href^="mailto:"] {
        direction: rtl;
        unicode-bidi: bidi-override;
        text-transform: none;
    }
    .timetable {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-flex-wrap: wrap;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        margin: 0 auto;
    }
    .timetable > div {
        margin: 0 auto;
        padding: .5em 1em;
    }
    .timetable > div > * {
        text-align: center;
    }
    .content ul.list {
        display: inline-block;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        max-width: 90%;
    }
    .route:before {
        content: "";
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: 800px;
        height: 100%;
        background: url('../img/route.png') no-repeat center;
        background-size: contain;
    }
    .route > * {
        position: absolute;
        left: -32767px;
    }
    svg.content-logo {
        max-width: 250px;
        width: 100%;
        height: auto;
    }
    [class^="icon-flag"] {
        position: absolute;
        right: .5em;
        top: .5em;
        overflow: hidden;
        cursor: pointer;
        z-index: 9999;
    }
    [class^="icon-flag"]::before {
        display: inline-block;
        content: "";
        height: 1.333em;
        line-height: 1.333em;
        width: 2em;
        border: .15em solid #fff;
        margin: 0;
        padding: 0;
    }
    [class^="icon-flag"]:hover::before {
        border-color: #912229;
    }
    .icon-flag-italy:before {
        background-image: -webkit-gradient(linear, left top, right top, color-stop(33.333%, #009246), color-stop(33.333%, #ffffff), color-stop(66.667%, #ffffff), color-stop(66.667%, #ce2b37));
        background-image: -webkit-linear-gradient(left, #009246 33.333%, #ffffff 33.333%, #ffffff 66.667%, #ce2b37 66.667%);
        background-image: linear-gradient(to right, #009246 33.333%, #ffffff 33.333%, #ffffff 66.667%, #ce2b37 66.667%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff009246', endColorstr='#ffce2b37', GradientType=1);
    }
    .icon-flag-germany:before {
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(33.333%, #000000), color-stop(33.333%, #dd0000), color-stop(66.667%, #dd0000), color-stop(66.667%, #ffce00));
        background-image: -webkit-linear-gradient(top, #000000 33.333%, #dd0000 33.333%, #dd0000 66.667%, #ffce00 66.667%);
        background-image: linear-gradient(to bottom, #000000 33.333%, #dd0000 33.333%, #dd0000 66.667%, #ffce00 66.667%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff000000', endColorstr='#ffffce00', GradientType=0);
    }
    [class^="icon-flag"] > * {
        position: absolute;
        left: -32767px;
    }
    
    aside#message-italy {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999;
    }
    aside#message-italy > label {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    aside#message-italy > div {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        border: .25em solid #912229;
        border-radius: .15em;
        font-size: 150%;
        width: -webkit-calc(25vw + 100px);
        width: calc(25vw + 100px);
        height: -webkit-calc(25vh + 100px);
        height: calc(25vh + 100px);
        background-color: #ddd;
        background-color: #fff;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
        
    }
    aside#message-italy p {
        padding: 1em;
    }
    aside#message-italy .icon-close {
        border-color: #912229;
    }
    #state-italy:checked ~ aside#message-italy {
        display: block;
    }
    #state-italy:checked ~ .main,
    #state-italy:checked ~ aside#contact {
        -webkit-filter: blur(2px);
                filter: blur(2px);
    }
}
@media all and (orientation: landscape) {
    #background picture.landscape {
        display: block;
    }
    section > article > p {
        max-width: 66vw;
    }
    section > article > ul {
        max-width: 50vw;
    }
}
@media all and (orientation: portrait) {
    #background picture.portrait {
        display: block;
    }
    /** BEGIN Fontsize */
    body > header {
        font-size: -webkit-calc(.6em + 0.0045 * (100vw - 320px) + 0.003 * (100vh - 450px));
        font-size: calc(.6em + 0.0045 * (100vw - 320px) + 0.003 * (100vh - 450px));
    }
    body > main,
    body > aside {
        font-size: -webkit-calc(.6em + 0.005 * (100vw - 320px) + 0.0035 * (100vh - 450px));
        font-size: calc(.6em + 0.005 * (100vw - 320px) + 0.0035 * (100vh - 450px));
    }
    body > footer {
        font-size: -webkit-calc(.6em + 0.004 * (100vw - 320px) + 0.0025 * (100vh - 450px));
        font-size: calc(.6em + 0.004 * (100vw - 320px) + 0.0025 * (100vh - 450px));
    }
    /** END Fontsize */
    #start > div img {
        width: 80%;
        height: auto;
        max-width: 800px;
    }
    section {
        padding-bottom: -webkit-calc(8vh + 50px);
        padding-bottom: calc(8vh + 50px);
    }
    .viewing-page-1 > header a.logo svg {
        width: 61.8vw;
    }
    .viewing-page-1 > header li {
        -webkit-flex-basis: 33%;
            -ms-flex-preferred-size: 33%;
                flex-basis: 33%;
    }
    #state-flip:checked ~ #contact > #dialog {
		top: -webkit-calc(20vh - 54px);
		top: calc(20vh - 54px);
		right: -webkit-calc(30vw - 86px);
		right: calc(30vw - 86px);
		bottom: -webkit-calc(20vh - 54px);
		bottom: calc(20vh - 54px);
		left: -webkit-calc(30vw - 86px);
		left: calc(30vw - 86px);
	}
	#contact {
        height: -webkit-calc(8vh + 50px);
        height: calc(8vh + 50px);
	}
	#dialog {
		right: 28vw;
		bottom: 50px;
		left: 28vw;
	}
    #contact .grid {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
            -ms-flex-direction: column;
                flex-direction: column;
    }
}
@media all and (orientation: portrait) and (max-width: 640px) {
    .viewing-page-1 > header nav p {
        height: -webkit-calc(3em + 4vh);
        height: calc(3em + 4vh);
        position: relative;
    }
    .viewing-page-1 > header nav p:after {
        display: block;
    }
}
@media all and (orientation: portrait) and (max-width: 400px){
    .viewing-page-1 > header ul {
        margin-top: 10vh;
    }
    .viewing-page-1 > header li {
        -webkit-flex-basis: 50%;
            -ms-flex-preferred-size: 50%;
                flex-basis: 50%;
    }
    .viewing-page-1 > header nav a {
        width: 30vw;
        padding: 2vh 2vw;
    }
    .viewing-page-1 > header nav p,
    .viewing-page-1 > header nav p:after {
        display: none;
    }
    
}
@media all and (orientation: portrait) and (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2),
 all and (orientation: portrait) and (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2) {
    /** BEGIN Fontsize */
    body {
        font-size: 16px;
    }
    /** END Fontsize */
}
@media all and (orientation: portrait) and (max-width: 320px) {
    /** BEGIN Fontsize */
    body {
        font-size: 8px;
    }
    body > header {
        font-size: 1em; 
    }
    body > main,
    body > aside {
        font-size: 1em;
    }
    body > footer {
        font-size: 1em;
    }
}
@media all and (orientation: portrait) and (max-height: 460px) and (-webkit-device-pixel-ratio: 2) {
    #state-flip:checked ~ #contact #dialog {
    }
    #contact  #dialog #back{
        bottom: 50px;
        /*overflow: hidden;*/
    }
}
@media all and (orientation: portrait) and (max-height: 450px) {
    #state-flip:checked ~ #contact > #dialog {
        top: 10px;
        bottom: 10px;
    }
}
@media all and (orientation: landscape) and (max-width: 640px) {
    .viewing-page-1 > header li {
        -webkit-flex-basis: 33%;
            -ms-flex-preferred-size: 33%;
                flex-basis: 33%;
    }
    .viewing-page-1 > header nav a {
        width: 25vw;
    }
}
@media all and (orientation: landscape) and (max-width: 500px) {
    section {
        padding-bottom: -webkit-calc(8vh + 50px);
        padding-bottom: calc(8vh + 50px);
    }
	#contact {
        height: -webkit-calc(8vh + 40px);
        height: calc(8vh + 40px);
	}
	#dialog {
		bottom: 40px;
	}
}
@media all and (orientation: landscape) and (max-height: 640px) {
    .viewing-page-1 > header nav p {
        height: -webkit-calc(3em + 4.1vh);
        height: calc(3em + 4.1vh);
        position: relative;
    }
    .viewing-page-1 > header ul {
        margin-top: 5vh;
    }
    .viewing-page-1 > header nav p:after {
        display: block;
    }
}
@media all and (orientation: landscape) and (max-height: 400px){
    .viewing-page-1 > header nav a {
        padding: 2vh 2vw;
    }
    .viewing-page-1 > header nav p,
    .viewing-page-1 > header nav p:after {
        display: none;
    }
    svg.content-logo {
        display:none;
    }
    
}
@media all and (orientation: landscape) and (max-height: 320px) {
    /** BEGIN Fontsize */
    body {
        font-size: 7px;
    }
    body > header {
        font-size: 1em; 
    }
    body > main,
    body > aside {
        font-size: 1em;
    }
    body > footer {
        font-size: 1em;
    }
    /** END Fontsize */
}
@media all and (max-width: 1600px) {
    
}
@media all and (max-width: 1200px) {
    
}
@media all and (max-width: 960px) {
    ul.polaroids {
        display: none;
    }
    ul.polaroids ~ div {
        max-width: 100vw;
    }
}
@media all and (max-width: 540px) {
    body > header nav a {
        padding-left: .5em;
        padding-right: .5em;
        text-align: center;
    }
}
@media all and (max-width: 480px) {
    section {
        padding-top: -webkit-calc(5vh + 40px);
        padding-top: calc(5vh + 40px);
    }
    footer.main small {
        font-size: 75%;
    }
}
@media all and (max-width: 400px) {
    body > header nav li {
        width: 16vw;
    }
    body > header nav ul {
        width: 100vw;
    }
    body > header nav a {
        padding: .5em;
        text-align: center;
    }
}
@media all and  (orientation: portrait) and (max-width: 320px) {
    #state-flip:checked ~ #contact #dialog {
        left: 10px;
        right: 10px;
    }
}
@media all and  (orientation: landscape) and (max-width: 450px) {
    #state-flip:checked ~ #contact #dialog {
        left: 10px;
        right: 10px;
    }
}
@media all and  (orientation: landscape) and (max-height: 320px) {
    #state-flip:checked ~ #contact #dialog #back {
        
        top: 10px;
        bottom: 10px;
    }
}