/* Illu Colors */

.illucolor .small-heading.species-coloring:after,
.small-heading.species-colored.illucolor:after,
.illucolor .text-image.species-coloring:before,
.text-image.species-colored.illucolor:before {
	background: var(--illucolor);
}

/* General Admin */


.admin-wrapper {
margin: auto;
position: relative;
max-width:600px;
width:100%;
padding:20px 20px;
background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
margin-top:20px;
}

.admin-content {
padding: 40px 40px 40px;	 
background: var(--color-overlay:);
}

.admin-header {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 10px;
margin-bottom:40px;
padding-bottom:40px;
border-bottom:1px solid var(--color-opac-border);
}

.admin-icon {
    grid-area: 1 / 1 / 2 / 2;
    color: var(--color-main);
    font-size: 20px;
    padding: 20px;
    border: 1px solid var(--color-main);
    margin-right: 20px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.admin-title {
grid-area: 1 / 2 / 2 / 3;
width:350px;
} 

.admin-title h1 {
font-family: var(--display-font);
  color: var(--color-main);
  transition: color 0.3s ease;
  text-transform: uppercase;
  font-size: 22px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-main);
margin-bottom:5px;
}

.admin-title span {
font-family: var(--main-font);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-main);
  text-align: left;	
}

.admin-text {
font-family: var(--main-font);
  color: var(--color-main);
  font-size: 11.5px;
  letter-spacing: 1px;
  text-align: justify;
  line-height: 240%;	
  text-transform:none;
  font-weight:400;
}

.admin-text b,
.admin-text i {
font-family: var(--main-font);
  color: var(--color-accent1);
letter-spacing: 3px;
  font-size: 11.5px;

}

.admin-text img {
filter: grayscale(1);	
outline-offset: 10px;
outline: 1.5px solid var(--color-main);
margin-top:10px;
margin-bottom:10px;
  max-width:420px;
 height:auto;
}

.admin-text-emoji img {
	outline: 0px solid var(--color-main);
	filter: grayscale(1);	
}

.admin-text-emoji img:hover {
filter: grayscale(0);	
outline: 0px solid var(--color-accent1);	
}


.admin-text img:hover {
filter: grayscale(0);	
outline-offset: 10px;
outline: 1.5px solid var(--color-accent1);	
}

/* WOB */


.wob-wrapper {
margin: auto;
position: relative;
max-width:600px;
width:100%;
padding:20px 20px;
background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
margin-top:20px;
}

.wob-content {
padding: 40px 40px 40px;	 
background: var(--color-overlay:);
}

.wob-header {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 10px;
margin-bottom:40px;
padding-bottom:40px;
border-bottom:1px solid var(--color-background-opac);
}

.wob-icon {
    grid-area: 1 / 1 / 2 / 2;
    color: var(--color-main);
    font-size: 20px;
    padding: 20px;
    border: 1px solid var(--color-main);
    margin-right: 20px;

    display: flex;
    align-items: center;
    justify-content: center
} 

.wob-title {
grid-area: 1 / 2 / 2 / 3;
	width:350px;
} 

.wob-title h1 {
font-family: var(--display-font);
  color: var(--color-main);
  transition: color 0.3s ease;
  text-transform: uppercase;
  font-size: 22px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-main);
margin-bottom:5px;

}

.wob-title span {
font-family: var(--main-font);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-main);
  text-align: left;	
}

.wob-text {
font-family: var(--main-font);
  color: var(--color-main);
  font-size: 11.5px;
  letter-spacing: 1px;
  text-align: justify;
  line-height: 240%;	
  text-transform:none;
  font-weight:400;
}

.wob-text b,
.wob-text i {
font-family: var(--main-font);
  color: var(--color-accent1);
letter-spacing: 3px;
  font-size: 11.5px;

}

.wob-text img {
filter: grayscale(1);	
outline-offset: 10px;
outline: 1.5px solid var(--color-main);
margin-top:10px;
margin-bottom:10px;
  max-width:250px;
 height:auto;
}

.wob-text img:hover {
filter: grayscale(0);	
outline-offset: 10px;
outline: 1.5px solid var(--color-accent1);	
}

/* Konzepte */

.konzept-wrapper {
margin: auto;
position: relative;
max-width:600px;
width:100%;
padding:20px 20px;
background-color: var(--color-background-opac);
  background-blend-mode: overlay;
  background-attachment: fixed;
  background-image: var(--accent-bg);
margin-top:20px;
}

.konzept-content {
padding: 40px 40px 40px;	 
background: var(--color-overlay:);
}

.konzept-header {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 10px;
margin-bottom:40px;
padding-bottom:40px;
border-bottom:1px solid var(--color-background-opac);
}

.konzept-icon {
    grid-area: 1 / 1 / 2 / 2;
    color: var(--color-main);
    font-size: 20px;
    padding: 20px;
    border: 1px solid var(--color-main);
    margin-right: 20px;

    display: flex;
    align-items: center;
    justify-content: center
} 

.konzept-title {
grid-area: 1 / 2 / 2 / 3;
	width:350px;
} 

.konzept-title h1 {
font-family: var(--display-font);
  color: var(--color-main);
  transition: color 0.3s ease;
  text-transform: uppercase;
  font-size: 22px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--color-main);
margin-bottom:5px;

}

.konzept-title span {
font-family: var(--main-font);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--color-main);
  text-align: left;	
}

.konzept-text {
font-family: var(--main-font);
  color: var(--color-main);
  font-size: 11.5px;
  letter-spacing: 1px;
  text-align: justify;
  line-height: 240%;	
  text-transform:none;
  font-weight:400;
}

.konzept-text b,
.konzept-text i {
font-family: var(--main-font);
  color: var(--color-accent1);
letter-spacing: 3px;
  font-size: 11.5px;

}

.konzept-text img {
filter: grayscale(1);	
outline-offset: 10px;
outline: 1.5px solid var(--color-main);
margin-top:10px;
margin-bottom:10px;
  max-width:250px;
 height:auto;
}

.konzept-text img:hover {
filter: grayscale(0);	
outline-offset: 10px;
outline: 1.5px solid var(--color-accent1);	
}