/* custom flex grid for display */

/* layout:
    headline
    banner
    grid
        img row
            info - wiese/slideshow - sensor/slideshow
        data rows
            charts 1-3
            charts 4-6
            charts 7-9

    footer
*/

/* colors from cz logo:
rot: f93822
dunkel: 9a8700
mittel: a69621
heller : cbc282
ganz hell: d8d1a5
weiß : f6f6f6
top-dark:
#9a8700,#a69621,#cbc282,#d8d1a5
bottom-dark:
#d8d1a5,#cbc282,#a69621,#9a8700
*/


/* font */
/*
@import url('https://fonts.googleapis.com/css?family=Butterfly+Kids|Roboto');
@import url('../Inria_Sans/InriaSans-Regular.ttf');

*/

/* Define a custom web font reference:
// https://www.filamentgroup.com/lab/font-loading.html

@font-face {
  font-family: 'MyWebFont';
  url('webfont.woff2') format('woff2'),
  url('webfont.woff') format('woff'),
  url('webfont.ttf')  format('truetype'),
}
// Use that font in a page 
body {
  font-family: 'MyWebFont', sans-serif;
}
*/

@font-face {
  font-family: 'Mohave';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/Mohave/Mohave-Italic.woff2') format('woff2'),
  url('../fonts/Mohave/Mohave-Italic.woff') format('woff'),
  url('../fonts/Mohave/Mohave-Italic.ttf') format('ttff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Mohave';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Mohave/Mohave-Regular.woff2') format('woff2'),
  url('../fonts/Mohave/Mohave-Regular.woff') format('woff'),
  url('../fonts/Mohave/Mohave-Regular.ttf') format('ttff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Mohave';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/Mohave/Mohave-Bold.woff2') format('woff2'),
  url('../fonts/Mohave/Mohave-Bold.woff') format('woff'),
  url('../fonts/Mohave/Mohave-Bold.ttf') format('ttff');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



html, body {
    /*
    font-family: "Open Sans",sans-serif;
    font-family: "Inria Sans",sans-serif;
    */
    font-family: "Mohave",sans-serif;
    font-size: 1.2em;
    color: #F93822;
	/*
    background-image: url("../img/observatory.jpg");
	*/
    background-image: linear-gradient(#d8d1a5,#cbc282,#a69621,#9a8700);
    background-size: cover;
    margin: 5px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Mohave",sans-serif;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em;
}



#framing {
    background-color: rgba(250,250,250,.7);
	width: 96%;
    margin-left: 2%;
}

#langswitch {
    background-color: #4dcddd;
    position: absolute;
}

#headline {
    font-weight: normal;
    text-align:center;
}


#headline h1 {
    /* margin for button */
    margin:0 24px 0 24px;
}

#banner {
	width: 96%;
    margin-left: 2%;
}

#content {
	width: 96%;
    margin-left: 2%;
}

#footer {
    width: 100%;
    background-color: #4dcddd; /*rgba(40,40,40.5);*/
    padding: 2px 2% 2px;
	/*
    padding: 5px;
    margin-left:2%;
    color: #ccc;
    background-color: rgba(40,40,40.5);
	*/
}

#footer p {
    padding-left: 5px;
}

.info {

}



.data {
    background-image:url("../img/bg.png");
    background-size :cover;
}

.data.c3 {
    width: 95%;
    height: auto;
    max-height: 300px !important;
}




.row {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 33%;
  max-width: 33%;
  padding: 5px;
  border:solid #f6f6f6 2px;
}

.column img {
  vertical-align: middle;
  width: 100%;
}


.column p {
  background-color: rgba(220,220,220,.5);
}

.separator {
    height: 5px;
    width: 100%;
}

.column.scroll {
    position: relative;
}

.scroll p {
    position: absolute;
    margin-top:0; /* (or -10)*/
    height:90%;
    overflow-y:scroll;
}

/* place image caption on top of image*/
#wiese {
    position: relative;
}

.wcaption {
    position:absolute;
    z-index: 10;
}

.wimage {
    z-index: 0;
}

.video {
    max-width:100%;
    max-height:100%;
}


/* c3 overrides */

.c3-line {
    stroke-width: 2px;
}

.c3 svg {
	transform: scaleX(.9);
}

.c3-axis-y-label {
    font-size: 1.2em;
}

.c3-axis-x-label {
    font-size: 1.2em;
}


#updating {
  /*
  width: 100px;
  height: 100px;
  background-color: red;
  */
  animation-name: updating;
  animation-duration: 3s;
  animation-iteration-count:infinite;
}

@keyframes updating {
/*
  0%   {background-color: red;}
  50%  {background-color: yellow;}
  100% {background-color: green;}
*/
  0%   {color: black;}
  50%  {color: blue;}
  100% {color: green;}
}



/* Responsive layout - makes a one column-layout instead of two columns */
/*
@media screen and (max-width: 800px) {
  .column {
    flex: 49%;
    max-width: 49%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {

    /*
    body {
        font-size: .8em;
    }
    */
    h1 {
        font-size: 2em;
    }
    #headline h1 {
        /* margin for button */
        margin:0 18px 0 18px;
    }

    h2 {
        font-size: 1.5em;
    }

  .column {
    flex: 100%;
    max-width: 100%;
  }

    .scroll p {
        position: relative;
        margin-top:0;
        height:90%;
        overflow-y:scroll;
    }

    /* w3 overides */
    .w3-xlarge {
        font-size:16px !important;
    }

    #langswitch button {
        padding: 4px;
    }

}