/***** Fonts *****/

@font-face {
    font-family: 'Chilanka';
    src: url('../resources/fonts/Chilanka-Regular.woff2') format('woff2'), url('../resources/fonts/Chilanka-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Kaisei HarunoUmi';
    src: url('../resources/fonts/KaiseiHarunoUmi-Regular.woff2') format('woff2'), url('../resources/fonts/KaiseiHarunoUmi-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/***** Fallback message *****/

.fallback-message {
    font-family: sans-serif;
    width: 780px;
    padding: 10px 10px 0;
    margin: 20px auto;
    border: 1px solid #E4C652;
}

.impress-supported .fallback-message {
    display: none;
}


/***** Defaults *****/

body {
    font-family: 'Kaisei HarunoUmi', serif;
    min-height: 950px;
    background: #fff;
}

h1 {
    font-size: 3em;
}

h1,
h2,
h3 {
    color: #403c33;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    text-align: center;
    line-height: 1em;
    font-weight: normal;
}

h2,
p,
li,
table {
    font-family: 'Chilanka', 'Open Sans', sans-serif;
}

h2 {
    text-align: right;
}

h4 {
    font-weight: normal;
    margin: 0;
    padding: 0;
}

h5 {
    /* font-size: 0.75em; */
    font-size: 1.9em;
    font-weight: normal;
    margin-top: 0;
}

/* p {
    font-size: 0.7em;
    text-align: justify;
} */

li {
    margin: 0.2em;
}

a {
    color: inherit;
    text-decoration: none;
    padding: 0;
}

a:hover,
a:focus {
    color: rgb(103, 103, 103);
}

pre {
    font-size: small;
}
.largecode pre {
    font-size: x-large;
}

code {
    background-color: #f4f3efa6!important;
}

hr {
    border-width: 2px;
    border-style: solid;
}


/***** General Presentation *****/

.step {
    position: relative;
    box-sizing: border-box;
    width: 1500px;
    height: 950px;
    padding: 40px 60px;
    margin: 20px auto;
    color: rgb(90, 90, 90);
    font-size: 30px;
    line-height: 1.3;
    /* border: solid red 1px; */
}

img {
    width: 90%;
    float: left;
    margin-left: 40px;
    margin-top: 0px;
}

/* fade out inactive slides */
.step {
    transition: display 1s;
    margin: 0;
}
.step.active {
    display: inherit;
}

.overview {
    z-index: -99;
}

.overview.step.future,
.overview.step.past {
    display: none;
}

/***** Mermaid *****/

.mermaid {
    text-align: center;
}

.mermaid svg {
    max-width: fit-content!important;
}

g#subGraph2 rect, g#subGraph5 rect{
    fill: #e0e0e0!important;
}
g#subGraph0 rect, g#subGraph1 rect, g#subGraph3 rect, g#subGraph4  rect{
    fill: #e6f5d0!important;
}

/*************** Slide specific things ****************************/
/***** Welcome Slide *****/

div#welcome {
    background: url(../resources/img/newspaper-background-5.jpg);
    background-position: unset;
}

div#welcome h3.vol1 {
    position: absolute;
    top: 6.3em;
    right: 1.7em;
}

div#welcome #welcome-actinia-header {
    width: 245px;
    float: right;
    position: absolute;
    top: 0;
    right: 0;
}
div#welcome #welcome-grass-header {
    width: 75px;
    float: right;
    position: absolute;
    top: 50px;
    right: 79px;
}

div#welcome #header-stamp {
    position: absolute;
    top: 1em;
    left: 3em;
    transform: rotate(-18deg);
    font-size: smaller;
    color: red;
}

div#welcome #welcome-mundialis,
div#welcome #welcome-fahhrad,
/* div#welcome #welcome-grass, */
div#welcome #welcome-kompass {
    position: absolute;
    width: 55px;
    top: 6.5em;
    /* left: 1em; */
}

div#welcome #welcome-mundialis {
    left: 1em;
}
div#welcome #welcome-kompass {
    left: +100px;
}

div#welcome #welcome-fahhrad {
    left: +170px;
    width: 42px;
}
/* div#welcome #welcome-grass {
    left: +300px;
} */

#skyline {
    margin-top: -38px;
    width: 200px;
    margin-right: 100px;
}

div#welcome .content {
    display: flex;
}

.side-column .center {
    box-sizing: border-box;
}

.side-column-left {
    margin-right: 1.2em;
    width: 25%;
}

.side-column-right {
    margin-left: 1.2em;
    width: 10%;
}

div#welcome .side-column img {
    width: 100%;
    margin: 0;
}

div#welcome .side-column img.icon {
    width: 10px;
    padding-left: .3em;
    padding-right: .3em;
    float: none;
}

div#welcome .center {
    flex-grow: 1;
    max-width: 56%;
    column-count: 2;
    column-gap: 40px;
    column-rule: 1px solid #403c33;
}

div#welcome .center p {
    font-size: 0.5em;
}

div#welcome .center div {
    margin: 0;
    height: 274px;
    overflow: hidden;
    margin-bottom: 1em;
    column-span: all;
}

div#welcome .center img {
    margin: 0;
    width: 100%;
    opacity: 80%;
}

/***** actinia-intro Slides *****/

/* .impress-on-actinia-intro1 div#welcome .side-column img {
    opacity: 0;
} */

div#actinia-intro2 img{
    width: 130%;
    margin-left: -100px;
    margin-top: -100px;
}

div#actinia-intro3 img {
    width: 90%;
    margin-left: 107px;
    margin-top: -59px;
}

div#actinia-intro3 p {
    text-align: center;
}

div#actinia-intro4 ul {
    margin-left: 8em;
}

div#actinia-intro4 li {
    margin-bottom: 1.5em;
}

/***** kneo Slides *****/
div#cloud1 h4 {
    margin-top: 4em;
}

div#cloud1 .logo {
    width: 248px;
    float: none;
}
div#cloud1 li {
    margin-bottom: 1.5em;
}
div#cloud1 li.nomargin {
    margin-bottom: 0;
}

div#cloud2 img {
    margin-top: 4em;
}

div#cloud3 ul.top {
    margin-top: 4em;
    float: left;
    width: 48%;
}
div#cloud3 li {
    margin-bottom: 1.5em;
}
div#cloud3 li.nomargin {
    margin-bottom: 0;
}
div#cloud3 code {
    margin-top: 7em;
    font-size: 1.5em;;
}

/* fade out inactive slides */

.step {
    /* opacity: 1; */
    transition: opacity 1s;
    margin: 0;
}

.step.active {
    opacity: 1
}

#actinia-intro2.actinia-intro.future.step:not(.active),
#actinia-intro2.actinia-intro.past.step:not(.active),
#actinia-intro3.actinia-intro.future.step:not(.active),
#actinia-intro4.actinia-intro.future.step:not(.active) {
    opacity: 0
}

body.impress-on-actinia-intro2 #actinia-intro3 { opacity: 0 }
body.impress-on-cloud1 #welcome { opacity: 0.7 }
body.impress-on-cloud2 #welcome { opacity: 0.7 }
body.impress-on-cloud3 #welcome { opacity: 0.7 }

/***** features kleinanzeigen Slides *****/

div#kleinanzeigen {
    column-count: 3;
    column-gap: 40px;
    column-rule: 4px solid #403c33;
}

div#kleinanzeigen h5 {
    column-span: all;
    margin-bottom: 1em;
}

div#kleinanzeigen p {
    text-align: left;
    font-size: 0.9em;
}

/***** the-end Slides *****/

div#overview h1 {
    font-size: 2em;
    text-align: left;
    margin-left: 1em;
}

div#overview h1:nth-of-type(1) {
    margin-top: 2em
}