body    {
        background-repeat: repeat-x;
        background-color: #FFFFFF;
        font-family: 'BigRiver', sans-serif;
        font-size: 16px;
        color: #445566;
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        }


@font-face 	{
            font-family: 'BigRiver';
            font-style: normal;
  		    font-weight: normal;
            src: url('https://www.jakobrudolph.com/images/fonts/bigriver/bigriverthin.woff2') format('woff2'), 
					   /* für moderne Browser */
                 url('https://www.jakobrudolph.com/images/fonts/bigriver/bigriverthin.woff') format('woff'); 
					   /* für normale Browser */
            }


@font-face 	{
  		    font-family: 'BigRiver';
            font-style: normal;
            font-weight: bold;
            src: url('https://www.jakobrudolph.com/images/fonts/bigriver/bigriverbold.woff2') format('woff2'), 
					   /* für moderne Browser */
                 url('https://www.jakobrudolph.com/images/fonts/bigriver/bigriverbold.woff') format('woff'); 
					   /* für normale Browser */
            }


@font-face 	{
            font-family: 'Zenia';
            font-style: normal;
  		    font-weight: normal;
            src: url('https://www.jakobrudolph.com/images/fonts/Zenia/zenia.woff2') format('woff2'), 
					   /* für moderne Browser */
                 url('https://www.jakobrudolph.com/images/fonts/Zenia/zenia.woff') format('woff'); 
					   /* für normale Browser */
            }


html    {-webkit-text-size-adjust: none;}


a:link { color: #445566; text-decoration: none; }
a:visited { color: #445566; text-decoration: none; }
a:focus { color: #663399; text-decoration: none; }
a:hover { color: #663399; text-decoration: none; }
a:active { color: #445566; text-decoration: none; }



article#site    {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                justify-content: space-between;
                left: 0;
                top: 0;
                min-width: 100%;
                min-height: 100vh;
                border: 0 none #FFFFFF;
                visibility: visible;
                z-index: 2;
                padding: 0;
                margin: 0;
                }

.boxo   {
        flex-basis: auto;
        align-items: flex-start;
        text-align: center;
        border: 0 none transparent;
        }

.boxm   {
        flex-basis: auto;
        align-items: center;
        text-align: center;
        border: 0 none transparent;
        }

.boxu   {
        flex-basis: auto;
        align-items: flex-end;
        text-align: center;
        border: 0 none transparent;
        }


/* Text */

@media screen and (min-width: 30.01em) {
p.txt   {
        font-size: 1.5em;
        font-weight: normal;
        font-style: normal;
        line-height: 1.3;
        letter-spacing: 0.02em;
        }

p.txtlo {
        font-size: 3.0em;
        font-weight: normal;
        font-style: normal;
        color: #663399;
        line-height: 1.6;
        letter-spacing: 0.02em;
        }}


@media screen and (max-width: 30em) {
p.txt   {
        font-size: 1.0em;
        font-weight: normal;
        font-style: normal;
        line-height: 1.3;
        letter-spacing: 0.02em;
        }

p.txtlo {
        font-size: 2.25em;
        font-weight: normal;
        font-style: normal;
        color: #663399;
        line-height: 1.4;
        letter-spacing: 0.02em;
        }}



ul  {
    display: inline-block;
    list-style-type: none;
    text-align: center;
    border: 0 none transparent;
    margin: 0;
    padding: 0.5em 0.75em 0.25em 0.75em;
    }

li  {
    display: inline-block;
    border: 0 none transparent;
    padding: 0 0.75em 0 0.75em;
    margin: 0;
    }


@media screen and (max-width: 30em) {
img.log {
        width: 300px;
        height: auto;
        border: 0 none transparent;
        }}

@media screen and (min-width: 30.01em) {
img.log {
        width: 600px;
        height: auto;
        border: 0 none transparent;
        }}