/*
  A common approach is to use googleapis.com to generate css for the webfonts you want to use.
  The downside of this approach is that you have to be online. So below I have simply saved
  the output of the googleapis url into a file. Then you of course also have to make sure
  the webfonts are locally installed to make offline usage work. For Ubuntu (or Debian) I
  successfully used the script from here to do that: 
  http://www.webupd8.org/2011/01/automatically-install-all-google-web.html
*/

/* @import url(http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic|Cutive+Mono); */
@import url(fonts.css);

/*
    We display a fallback message for users with browsers that don't support
    all the features required by it. All of the content will be still fully 
    accessible for them, but some more advanced effects would be missing.
    When impress.js detects that browser supports all necessary CSS3 features, 
    the fallback-message style is hidden.
*/

.fallback-message {
    font-family: sans-serif;
    line-height: 1.3;

    width: 780px;
    padding: 10px 10px 0;
    margin: 20px auto;

    border: 1px solid #E4C652;
    border-radius: 10px;
    background: #EEDC94;
}

.fallback-message p {
    margin-bottom: 10px;
}

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


/*
  The body background is the background of "everything". Many
  impress.js tools call it the "surface". It could also be a
  picture or pattern, but we leave it as light gray.
*/

body {
    font-family: 'PT Sans', sans-serif;
    min-height: 740px;

    background: white;/*#878f8b;*/
    /*color: #ff4466; MG:14.07.2021*/
    color: #362f30;
}

/*
Meine Anpassungen GridLayout
*/

.mgslidecontainer{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 0.25fr 0.25fr 0.25fr 0.25fr; /* 1 fr 2 fr 3 fr 4 fr 5*/
    grid-template-rows: 1fr 5fr 5fr 1fr; /*titel content content footer*/
    grid-gap: 0px 0px; /* row column */
}

.mgslidetitle{
    /*background: lightblue;*/
    grid-column: 1 / 5;
    grid-row: 1 / 2;
    border-bottom: 1px solid black;
}

.mgslidefooter{
    /*background: rgb(230, 173, 187);*/
    grid-column: 1 / 5;
    grid-row: 4 / 5;
    border-top: 1px solid black;
    font-size: 0.6em;
    padding-top: 0.1em;
}

.mgslidecontent_all{
    background: rgb(200, 173, 187);
    grid-column: 1 / 5;
    grid-row: 1 / 5;
}

/* 100% der Spalten c...column */
.mgslidecontent_100c{
    /*background: lightgray;*/
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 4;
}

.mgslidecontent_100c_center{
    /*background: lightgray;*/
    grid-column-start: 1;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 4;
    justify-self: center;
}

/* 3/4, 1/4 Teilung 75% links, 25% rechts
_______
| x | |
| x | |
-------
*/
.mgslidecontent_75c25c_left{ /* linke Spalte */
    /*background: lightsalmon;*/
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
}

/* 3/4, 1/4 Teilung 75% links, 25% rechts
_______
|   |x|
|   |x|
-------
*/
.mgslidecontent_75c25c_right{ /* rechte Spalte */
    /*background: rgb(176, 230, 173);*/
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 4;
}

/* 3/4, 1/4 Teilung 75% links, 25% rechts
_______
|   |x|
|   | |
-------
*/

.mgslidecontent_75c25c_right_top{
    /*background: rgb(176, 230, 173);*/
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
}

/* 3/4, 1/4 Teilung 75% links, 25% rechts
_______
|   | |
|   |x|
-------
*/

.mgslidecontent_75c25c_right_bottom{
    /*background: rgb(60, 143, 55);*/
    grid-column-start: 4;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
}

.mgslidecontent_25c75c_left{
    /*background: lightsalmon;*/
    grid-column: 1 / 2;
    grid-row: 2 / 4;
}

.mgslidecontent_50c50c_left{
    /*background: lightsalmon;*/
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 4;
    align-self: self-start;
}

.mgslidecontent_50c50c_center{
    /*background: lightsalmon;*/
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    align-self: self-start;
}

.mgslidecontent_50c50c_right{
    /*background: rgb(176, 230, 173);*/
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 4;
    /*align-self: center;*/
}

/* 50% links, 50% rechts, 50% oben 50% unten
_________
| x |   |
|   |   |
---------
*/
.mgslidecontent_50c50c_left_top{
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}

/*
_________
|   | x |
|   |   |
---------
*/
.mgslidecontent_50c50c_right_top{
    grid-column: 3 / 5;
    grid-row: 2 / 3;
}

/*
_________
|   |   |
|   | x |
---------
*/
.mgslidecontent_50c50c_right_bottom{
    grid-column: 3 / 5;
    grid-row: 3 / 4;
}

/*
_________
|   |   |
| x |   |
---------
*/
.mgslidecontent_50c50c_left_bottom{
    grid-column: 1 / 3;
    grid-row: 3 / 4;
}

/*
_________
|   x   |
|       |
---------
*/
.mgslidecontent_100c_top{
    grid-column: 1 / 5;
    grid-row: 2 / 3;
}

/*
_________
|       |
|   x   |
---------
*/
.mgslidecontent_100c_bottom{
    grid-column: 1 / 5;
    grid-row: 3 / 4;
}

/** weitere Anpassungen **/
/*links nicht hervorheben, bspw. in Bildern.*/

.no_link:hover, .no_link{
    background: whitesmoke;
    border: none;
}

/* Versuch eines kleinen Popout-Effektes. Idee stammt von: https://www.w3schools.com/howto/howto_css_zoom_hover.asp*/
.zoom{
    transition: transform .2s;
}

.zoom:hover{
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(2);
}

/* Formatierung für Bilder */
figure{
    text-align: center;
    margin: 0;
}

figcaption{
    font-size: 0.6em;
    /*padding-top: 1em;*/
}

img{
    padding: 0.2em;
}

/* Allgemein, Objekte zentrieren. */
.center_this
{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Flex Layout zum Anordnen von mehreren Objekten innerhalb eines Grids (Bspw. Bilder zentriert in einer Reihe) */
.flexcontainer_center_horizontal{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Prezi-artige Rahmen als Hintergrundbild für Folien.
    sqframe: quadratisch (eckige Klammern)
    circframe: kreisförmig (runde Klammern)
    roundsqframe: quadratisch mit abgerundeten Ecken
*/
.sqframe{
    /*border: 2px solid black;*/
    background-image: url(../auge_bilder/frame.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.circframe{
    background-image: url(../auge_bilder/circframe.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.roundsqframe{
    background-image: url(../auge_bilder/roundsqframe_2.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* Neben notes noch die Möglichkeit der ausführlichen Beschreibung von Folieninhalten (ev. Transkription). */
.full_description {
    display: hidden;
}

/* Schriftgröße bei Zahlen auf den Folien zum binären Zählen mit Finger. */
.font-size_Fingerzaehlen{
    font-size: 7em;
}

/****************** Background images ******************/

img.bg {
    position: fixed;
    z-index: -100;
    opacity: 0.5;
    height: 100%;
    width: auto;
    transition:  opacity 2s;
}

#bg-image {
    left: 0px;
    bottom: 0px;
}

/* mit den impress-on-* Klassen kann dynamisch eine css-Klasse zu Body hinzugefügt werden, * wird durch die jeweilige 
Folien-ID oder step-x ersetzt.
Das erlaubt bspw. ein Hintergrundbild für einzelne Folien im Body der Webseite zu aktivieren.
Aus der Beschreibung für impress.js:

The impress-on-* class is added to the body element, the class name represents the active Step Element id. 
This allows for custom global styling, since you can't match a CSS class backwards from the active Step Element to the body.

Man könnte das Bild auch als background-image dem body zuweisen, so ist aber flexibler.
*/

/*
aktuell ist das Hintergrundbild global aktiv, aber nachfolgend ein Beispiel für die Titelfolie in der Präsi "Medienbegriff"

body.impress-on-01_Titelfolie_Medienbegriff #bg-image{
    opacity: 0.7;
    transition:  opacity 2s;
}*/

/*
    Now let's style the presentation steps.
*/

.slide{
    border: 1px solid #006fadff;
    background-color: white; /* #006fadff; Hintergrundfarbe des Seitenbildes mit Netzwerk. */
}

.step {
    position: relative;
    /*display: block; entfernt da im grid-layout sonst grid-column-end keine Wirkung hat, sagt der Webbrowser, warum auch immer*/

    width: 1800px;
    height: 900px;
    margin: 20px auto;
    padding: 40px 60px;

    /*text-shadow: 0 2px 2px rgba(0, 10, 0, .5);*/
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    font-size: 30px;
    /*letter-spacing: -1px;*/

}

.menu{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    opacity: 1;
}

.menuicon{
    height: 100px;
    width: 100px;
    border-radius: 50px 0px 0px 50px;
    border-top: 3px solid black;
    border-left: 3px solid black;
    border-bottom: 3px solid black;
    padding: 10px;
}
.menutitle{
    height: 100px;
    border-radius: 0px 50px 50px 0px;
    border-top: 3px solid black;
    border-right: 3px solid black;
    border-bottom: 3px solid black;
    padding: 10px;
}

/*
    Make inactive steps a little bit transparent.
*/
.impress-enabled .step {
    margin: 0;
    opacity: 0.3;
    transition:         opacity 1s;
}

.impress-enabled .step.active { opacity: 1 }

/* Bei mehrteiligen Folien, nicht-aktive Folien komplett ausblenden (Idee von Sebastian Wolf, Uni Bielefeld)*/

.impress-enabled .step.multi { opacity: 0; }
.impress-enabled .step.multi.active { opacity: 1; }

h1, 
h2, 
h3 {
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    text-align: center;
}

/*p {
    text-align: center;
    margin: 0.7em;
}*/

p {
    text-align: left;
    text-indent: 0em;
    padding: 0;
    margin-bottom: 0.8em;
}

p::first-letter {
    initial-letter: 2;
}

/*p::first-letter {
    font-size: 1.5em;
    font-weight: bold;
    color: #8A2BE2;
}*/

li {
    margin: 0.2em;    
}

/* Highlight.js used for coloring pre > code blocks. */
pre > code {
    font-size: 14px;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* Inline code, no Highlight.js */
code {
    font-family: "Cutive mono","Courier New", monospace;
}

a {
    color: inherit;
    text-decoration: none;
    padding: 0 0.1em;
    background: rgba(200,200,200,0.3);
    /*text-shadow: -1px 1px 2px rgba(100,100,100,0.9);*/
    border-radius: 0.2em;
    border-bottom: 1px solid rgba(100,100,100,0.4);
    border-left:   1px solid rgba(100,100,100,0.4);
    transition:         0.5s;
}

/* Wenn a auf eine Folie verweist, also den type "slide" hat, dann füge davor eine Kennzeichnung ein. So soll sichtbar sein, dass es sich um einen Verweis innerhalb der Präsi handelt. */
a[type="slide"]::before {
    background-image: url("../Bilder/Icons/slide-link_based_on_arrow-right-svgrepo-com.svg");
    background-size: 0.9em; /*25px*/
    background-repeat: no-repeat;
    display: inline-block;
    width: 0.9em; /*25px*/
    height: 1.6ex; /*24px*/
    content: "";
}

/*Dito wenn anchor weblink ist */
a[type="weblink"]::before {
    background-image: url("../Bilder/Icons/link-svgrepo-com.svg");
    background-size: 0.8em;
    background-repeat: no-repeat;
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    content: "";
}

/*Dito wenn anchor pdflink ist und auf eine PDF-Datei verweist */
a[type="pdflink"]::before {
    background-image: url("../Bilder/Icons/pdf-svgrepo-com.svg");
    background-size: 0.8em;
    background-repeat: no-repeat;
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    content: "";
}

/* alle Bildlinks sollen ohne die Standard-Hervorhebung (s.u.) dargestellt werden...*/
a:has(img), a:has(img):hover, a:has(img):visited, a:has(img):focus, a:has(img):active{
    background: none;
    border: none;
    text-decoration: none;
    text-shadow: none;
}

/* ...stattdessen umrahme das Bild wenn mit der Maus darüber gefahren wird.*/
a img:hover{
    border: 1px solid black;
}

a:hover,
a:focus {
    background: rgba(200,200,200,1);
    /*text-shadow: -1px 1px 2px rgba(100,100,100,0.5);*/
}

blockquote {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;    
}

em {
    text-shadow: 0 2px 2px rgba(0, 0, 0, .3);    
}

strong {
    text-shadow: -1px 1px 2px rgba(100,100,100,0.5);
}

q {
    font-family: 'PT Serif';
    font-style: italic;
    font-weight: 400;    
    text-shadow: 0 2px 2px rgba(0, 0, 0, .3);
}

strike {
    opacity: 0.7;
}

small {
    font-size: 0.4em;
}

#icecream.next{
    opacity: 1.0;
}

/****************** Background images **********************************************


img.bg {
    position: fixed;
    z-index: -100;
    opacity: 0;
    height: 50%;
    width: auto;
    transition:  opacity 2s;
}
img.bag{
    position: relative;
    height: 100%;
    width: auto;
}

#applepie-image {
    left: 0px;
    bottom: 0px;
}

body.impress-on-applepie #applepie-image,
body.impress-on-applepie-pro #applepie-image,
body.impress-on-applepie-con #applepie-image,
body.impress-on-conclusion #applepie-image,
body.impress-on-overview #applepie-image {
    opacity: 0.7;
    transition:  opacity 2s;
}

#icecream-image {
    left: 20px;
    top: 10%;
    height: 80%;
}

body.impress-on-icecream #icecream-image,
body.impress-on-icecream-pro #icecream-image,
body.impress-on-icecream-con #icecream-image,
body.impress-on-icecream-overview #icecream-image,
body.impress-on-conclusion #icecream-image,
body.impress-on-overview #icecream-image {
    opacity: 0.7;
    transition:  opacity 2s;
}

#crisps-image {
    right: 0px;
    bottom: 0px;
}

body.impress-on-crisps #crisps-image,
body.impress-on-crisps-pro #crisps-image,
body.impress-on-crisps-con #crisps-image,
body.impress-on-conclusion #crisps-image,
body.impress-on-overview #crisps-image {
    opacity: 0.7;
    transition:  opacity 2s;
}*/


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

#image-credits {
    color: #779988;
}