/* This is similar free font for ff din pro (eth). The designer
provides also bold and italic versions. So far we do not use this, we
leave it to the browser. Aditional @font-face constructs with
font-weight: bold; etc would be needed. */

@font-face {
    font-family: cabin-eth;
    src: url(Cabin-Regular-TTF.ttf);
    /* conf:2 */
}

body {
    /* test if css visible in the browser */
    /* background-color: lightblue;*/
    background-color: white;
    padding: 0;
    margin: 0;
    /* browsers have different defaults */
    /* font-size: 100%; */
}

.eth-font {
    font-family: cabin-eth, sans-serif;
}

.eth-left {
    padding-left: 64px;
    padding-right: 32px;
}

@media screen and (max-width: 800px) {
    .eth-left {
        padding-left: 16px;
        padding-right: 8px;
    }
}

.eth-color {
    /* background-color: #0069B4; */
    background-color: #3A5F9A;
    /* Pantone 2935 */

    /* other ETH  Fachwelt Colors
       Pantone 2935 #0069B4
       Pantone 392 #72791c
       Pantone 234 #91056a
       Pantone Cool Gray 9 #6f6f6e
       Pantone 1797 #a8322d
       Pantone 633 #007a92
       Pantone 7512 #956013 */
}


.eth-color a {
    color: white;
    /* the color for the text with eth-color background */
}

.eth-color-sec-bg {
    /*color: lighten(black, 50%);*/
    background-color: red;
}

/* header formating */
#eth-header {
    /* Generally no new line because of float, float means that other
       elements float arounf this element. Here we need new line, so no
       float. Float is needed in subsequent elements (dimage)
       */
    margin: 0px;
    padding-top: 32px;
    padding-bottom: 32px;

    /* border: 1px solid black; */
    /* for testing */
}

/* content div formating */
.content {
    margin: 0px;
    padding-left: 64px;
    padding-top: 0px;

    /* border: 1px solid black;*/
}

/* decorative image div */
#dimage {
    float: right;
    width: 200px;
    height: 1000px;
    background-color: #EAECEE;
    opacity: 1.0;
    /* border: 1px solid black; */
    background-repeat: no-repeat;
    background-position: right;
    -webkit-animation: mymove 20s infinite;
    /* Chrome, Safari, Opera */
    animation: mymove 20s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    0% {
        background-position: top left;
    }

    100% {
        background-position: bottom right;
    }
}

/* Standard syntax */
@keyframes mymove {
    0% {
        background-position: top left;
    }

    100% {
        background-position: bottom right;
    }
}

/* small screen sizes */
@media screen and (max-width: 900px) {

    /* conf:6 */
    .desktop-only {
        display: none !important;
    }

    /* html {font-size: 120% } */
    /* conf:7 */
}

/* footer formating */
#eth-footer {
    clear: both;
    margin: 0px;
    padding-top: 0px;
    padding-bottom: 0px;

    /* border: 1px solid black;*/
}