/***********************************************
***********************************************
                H E R B E R T
                 !Y E A H !
***********************************************
***********************************************/




/***********************************************
               Reset & Basics
***********************************************/


html, body, div, span, applet,
object, iframe, h1, h2, h3, h4,
h5, h6, p, blockquote, pre, a,
abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd,
q, s, samp, small, strike, strong,
sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details,
embed, figure, figcaption, footer,
header, hgroup, menu, nav, output,
ruby, section, summary, time, mark,
audio, video                                    { margin: 0; padding: 0; border: 0; font-size:100%; font:inherit; vertical-align:baseline; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

article, aside, details, figcaption,
figure, footer, header, hgroup, menu,
nav, section                                    { display:block; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }

blockquote, q                                   { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after                               { content:''; content:none; }

html                                            { }
body                                            { margin:0; padding:0; background-color:#FFF; font-family:sans-serif; font-size:62.5%; line-height:20px; color:#000; }



/***********************************************
                    TYPO
***********************************************/

h1, h2, h3, h4, h5, h6                          { margin:0 0 1em; padding:0; color:#000; font-weight:normal; text-transform:uppercase }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a              { font-weight:inherit; color:inherit; }
h1                                              { font-size:38px; font-size:3.8rem;  }
h2                                              { font-size:32px; font-size:3.2rem; }
h3                                              { font-size:24px; font-size:2.4rem; }
h4                                              { font-size:17px; font-size:1.7rem;}
h5                                              { font-size:14px; font-size:1.4rem;}
h6                                              { font-size:11px; font-size:1.1rem; }

p                                               { margin:0 0 20px 0; padding:0; font-size:9px; font-size:0.9rem; line-height:20px; }

b, strong                                       { font-weight:bold; }
em                                              { font-style:italic; }
small                                           { font-size:11px; }

sup, sub                                        { height:0; line-height:0; vertical-align:baseline; _vertical-align:bottom; position:relative; font-size:80%; }
sup                                             { top:-5px; }
sub                                             { bottom:-5px; }

pre code                                        { margin:16px 0 26px 0; padding:16px; font-family: 'Consolas', Courier, monospace; font-size:12px; line-height:19px; color:#F1F1F1; display:block; background-color:#111; border:1px solid #111; }

abbr[title],
abbr[data-original-title]                       { border-bottom:1px dotted #999999; cursor:help; }
address                                         { margin:26px 0; padding:0; display:block; font-style:normal; line-height:20px; }

hr                                              { margin:20px 0; padding:0; border:0; border-top:1px solid #000; height:1px; width:100%; text-align:left; display:block; }


/***********************************************
       Lists
***********************************************/

ul, ol                                          { margin:0; padding:0; display:block; }
ol                                              { list-style:decimal; }
li                                              { margin:0; padding:0; }

ul ul, ul ol, ol ol, ol ul                      { margin:0; }

ul.square, ul.square ul,
ul.circle ul.square                             { list-style:square inside; }
ul.circle, ul.circle ul,
ul.square ul.circle                             { list-style:circle inside; }
ul.disc, ul.disc ul                             { list-style:disc inside; }
ul.square li,
ul.circle li,
ul.disc li                                      { margin:0; padding:0; line-height:18px; background:none; }

dl                                              { margin:16px 0 26px 0; padding:0; }
dt                                              { margin:0 0 10px 0; font-size:18px; line-height:20px; font-weight:bold; }
dd                                              { margin:0 0 10px 10px; }



/***********************************************
        Disable Chrome blue border
***********************************************/
input:focus, select:focus,
textarea:focus, button:focus                    { outline: none; }




/***********************************************
                  Links
***********************************************/
a                                               { color:#000; text-decoration:underline; outline:0; transition:all .1s linear 0s; -moz-transition:all .1s linear 0s; -webkit-transition:all .1s linear 0s; -o-transition:all .1s linear 0s; }
a:focus                                         { outline:none; -moz-outline-style:none; }


/***********************************************
           Images, iFrames & Videos
***********************************************/

img                                             { border:0; outline:none; vertical-align:middle; -ms-interpolation-mode:bicubic; }
.img-left                                       { float:left; margin:0 30px 30px 0; border:none; }
.img-right                                      { float:right; margin:0 0 30px 30px; border:none; }
.img-max                                        { margin:0 0 30px; width:100%; height:auto; }

.media                                          { position:relative; margin:0 0 15px 0; padding-bottom:51%; padding-top:30px; height:0; overflow:hidden; border:1px solid #ccc; }
.media iframe,
.media object,
.media embed                                    { position:absolute; top:0; left:0; width:100%; height:100%; }


/***********************************************
                   Tables
***********************************************/

table                                           { margin:20px 0 40px 0; width:100%; overflow:hidden; font-size:13px; line-height:17px; border-bottom:1px solid #000; border-collapse:collapse; border-spacing:0; }


tr                                              { background-color:#FFF; transition:all .1s linear 0s; -moz-transition:all .1s linear 0s; -webkit-transition:all .1s linear 0s; -o-transition:all .1s linear 0s; }
tr:hover                                        { background-color:#F1F1F1; transition:all .1s linear 0s; -moz-transition:all .1s linear 0s; -webkit-transition:all .1s linear 0s; -o-transition:all .1s linear 0s; }
tr.even                                         { background-color:#FFF; }
tr.odd                                          { background-color:#F1F1F1; }

th                                              { padding:8px; background-color:#F1F1F1; color:#000; font-weight:bold; border:none; border-bottom:3px solid #000; text-align:left; white-space:nowrap; }

td                                              { padding:8px; min-width:100px; background-color:transparent; color:#666; border:none; border-top:1px solid #D6D6D6; }
td.highlight                                    { padding:11px 8px; color:#EEE; font-weight:bold; display:block; font-size:inherit; border:none; background-color:#333; }





html, body{ height: 100%;}

body {
    font-family: Arial,Helvetica,sans-serif;
    background: #A4A49F;
}


body ::selection
    {
        color:      #fff;
        background: #000;
    }
body ::-moz-selection
    {
        color:      #fff;
        background: #000;
    }
    

/***********************************************
             header / navigation
***********************************************/


header {
background: #A4A49F;
width:100%;
height:6em;
position:fixed;
margin:0;
top:0;
z-index:500;
}



header nav
{
  margin: 1.7em 0 0 3em;

}

nav a {
  text-transform:uppercase;
  font-size:9px;
  font-size:.9rem;
  font-weight:500;
  letter-spacing:0.05rem;
  color:#fff;
}

header nav ul
{
  display:inline;
  list-style:none;
  height:5em;

}

header nav ul li
{
  display:inline;
  list-style:none;
  
}


.portfolioFilter a { 
  padding: .5rem; 
  text-decoration:none;
  outline:none;
}


.portfolioFilter a img { 
 width:18px;
 width:1.8rem;
 height:auto;
 padding:.3em;
 outline:none;


}

.portfolioFilter a img:hover { 

}


.portfolioFilter a.selected { 
    color:#000;
}



#logo {
  position:absolute;
  width:23em;
  height:8em;
  top:1em;
  right:1em;
  z-index:600;
  background: transparent url('http://scharaden.com/herbert/wp-content/uploads/2015/06/logo_herbert.svg') no-repeat;
  background-size:20em auto;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
cursor:pointer;
}





/***********************************************
                  container
***********************************************/



.portfolioContainer { 
    width:100%;
    margin:auto;
    margin-top:6em;
    
}


/***************** Beiträge ******************/

.portfolioContainer .beitrag {
  /*width:130px;*/
  width:14.9%;
  margin: 2.5%;
  padding-bottom:3em;

}

.portfolioContainer .as-seen img {
    padding: 2em 0 0 0;
}

.fancybox-overlay-fixed {
	cursor: pointer;
}

.fancybox-opened {
	cursor: default !important;
}

#ascrail2000 {
	z-index: 1000 !important;
}

@media screen and ( max-height: 600px ){
    .wp-image-2439 {

}
}



/********* Beitragsbildunterschriften ********/

.portfolioContainer .beitrag .caption {

    position: absolute;
    color: #000;
    z-index: 100;
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
    left: 0;
    font-size:9px;
    font-size:.9rem;
    font-weight:600;
    height:5em; /* beitrag margin 2 em + beitrag padding bottom 3em*/
    width: 11em;
    text-align: left;
    margin-top:0.5em;
    opacity: 0;
    text-transform:uppercase;
    
}


.portfolioContainer .beitrag:hover .caption {
    opacity: 1;
}


/*********** Bilder in Beiträgen ***********/


.portfolioContainer img {
    width:100%;
    margin:0;
    height: auto;
}








/******** Abstandvariationen Kategorien ********/

.portfolioContainer .klasse   img {padding: 1em 0 0 0;}
.portfolioContainer .asseen   img {padding: 2em 0 0 0;}
.portfolioContainer .events   img {padding: 4em 0 0 0;}
.portfolioContainer .research img { padding: 0;}


/* hover schwarzweiß zu farbe */

.portfolioContainer .beitrag img {

    z-index:10;
    -webkit-filter: grayscale(100%);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: grayscale(1);
    filter:gray;
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out;
    transition: all 400ms ease-out;
 
}


.portfolioContainer .beitrag img:hover {
   filter: none;
   -webkit-filter: none; 
   -webkit-filter: grayscale(0%);
   
}


.portfolioContainer .beitrag .b-overlay {
  position:absolute;
  width: 40px;
  height: 40px;
  z-index: 100;
  cursor: pointer;
  top: 0;
   
}

#fancybox-loading .part {
	width: 20px ;
	height: auto ;
}

#fancybox-loading img {
	width: 20px ;
	height: auto ;
}


.portfolioContainer .class .b-overlay{
  margin:-1em 0 0 14em;
  background: transparent url('(https://www.uni-weimar.de/projekte/grafikdesign/wp-content/uploads/2017/10/sticki-gelb.svg') no-repeat;
  background-size: 4em auto;
}

.portfolioContainer .as-seen .b-overlay{
  top:100%;
  margin:-5em 0 0 1em;
  background: transparent url('(https://www.uni-weimar.de/projekte/grafikdesign/wp-content/uploads/2017/10/sticki-blau.svg') no-repeat;
  background-size: 4em auto;
}


.portfolioContainer .events .b-overlay{
  margin:2em 0 0 1.5em;
  background: transparent url('(https://www.uni-weimar.de/projekte/grafikdesign/wp-content/uploads/2017/10/sticki-gruen.svg') no-repeat;
  background-size: 4em auto;
}


.portfolioContainer .research .b-overlay{
  top:100%;
  margin:-5em 0 0 15em;
  background: transparent url('(https://www.uni-weimar.de/projekte/grafikdesign/wp-content/uploads/2017/10/sticki-orange.svg') no-repeat;
  background-size: 4em auto;
}



/********** ABOUT Overlay ************/

.about {
  z-index:1000;
  cursor:pointer;
      overflow-y: scroll;

}

.about .img {width:40%;}

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  color:#fff;

}

/* Overlay closing cross */
.overlay .overlay-close {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border: none;
  background: url('') no-repeat center center;
  text-indent: 200%;
  color: transparent;
  outline: none;
  z-index: 1000;
  cursor:pointer;
}

/* Menu style */
.overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}



/* Effects */
.overlay-slidedown {
  visibility: hidden;
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
  transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-slidedown.open {
  visibility: visible;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
}


/***********************************************
                I S O T O P E
                    items
***********************************************/



.isotope-item {

    z-index: 2;
  

}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* duration */

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}



/* Loader
------------------------- */
.loader {
	width:100%;
	height:100%;
	background: #A4A49F;
	position: fixed;
	z-index: 9999;
	top:0;
}



.about {
  background:#000;
  color:#fff;
  padding:4%;

}



 .loading-animation{
  width: 24px;
  height: 24px;
  -webkit-transform:rotate(45deg);
      -ms-transform:rotate(45deg);
          transform:rotate(45deg);
  -webkit-animation:loading-ani1 1.5s ease-in-out infinite;
          animation:loading-ani1 1.5s ease-in-out infinite;
 
}
.loading-animation .part{
  width: 24px;
  height: 24px;
  display: inline-block;
  position:absolute;

}

.loading-animation .part img{
width:25px;
height:auto;
opacity:1;
filter: alpha(opacity=100);
}


.loading-animation div:nth-child(1){
  -webkit-transform: rotate(350deg);
      -ms-transform: rotate(350deg);
          transform: rotate(350deg);
  -webkit-transform:translate(0,50px);
      -ms-transform:translate(0,50px);
          transform:translate(0,50px);
  -webkit-animation:loading-ani2 3s ease-in-out infinite;
          animation:loading-ani2 3s ease-in-out infinite;
}
.loading-animation div:nth-child(2){
  -webkit-transform:rotate(72deg) translate(0,50px);
      -ms-transform:rotate(72deg) translate(0,50px);
          transform:rotate(72deg) translate(0,50px);
  -webkit-animation:loading-ani3 3s ease-in-out infinite;
          animation:loading-ani3 3s ease-in-out infinite;
}
.loading-animation div:nth-child(3){
  -webkit-transform:rotate(144deg) translate(0,50px);
      -ms-transform:rotate(144deg) translate(0,50px);
          transform:rotate(144deg) translate(0,50px);
  -webkit-animation:loading-ani4 3s ease-in-out infinite;
          animation:loading-ani4 3s ease-in-out infinite;
}
.loading-animation div:nth-child(4){
  -webkit-transform:rotate(216deg) translate(0,50px);
      -ms-transform:rotate(216deg) translate(0,50px);
          transform:rotate(216deg) translate(0,50px);
  -webkit-animation:loading-ani5 3s ease-in-out infinite;
          animation:loading-ani5 3s ease-in-out infinite;
}
.loading-animation div:nth-child(5){
  -webkit-transform:rotate(288deg) translate(0,50px);
      -ms-transform:rotate(288deg) translate(0,50px);
          transform:rotate(288deg) translate(0,50px);
  -webkit-animation:loading-ani6 3s ease-in-out infinite;
          animation:loading-ani6 3s ease-in-out infinite;
}
@-webkit-keyframes loading-ani1{
  25%{
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
  }
  50%{
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
  }
  75%{
    -webkit-transform:rotate(315deg);
            transform:rotate(315deg);
  }
  100%{
    -webkit-transform:rotate(405deg);
            transform:rotate(405deg);
  }
}
@keyframes loading-ani1{
  25%{
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
  }
  50%{
    -webkit-transform:rotate(0deg);
            transform:rotate(0deg);
  }
  75%{
    -webkit-transform:rotate(315deg);
            transform:rotate(315deg);
  }
  100%{
    -webkit-transform:rotate(405deg);
            transform:rotate(405deg);
  }
}
@-webkit-keyframes loading-ani2{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    -webkit-transform:translate(0,50px);
            transform:translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    -webkit-transform:translate(0,35px);
            transform:translate(0,35px);
  }
}
@keyframes loading-ani2{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    -webkit-transform:translate(0,50px);
            transform:translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    -webkit-transform:translate(0,35px);
            transform:translate(0,35px);
  }
}

@-webkit-keyframes loading-ani3{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    -webkit-transform:rotate(72deg) translate(0,50px);
            transform:rotate(72deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    -webkit-transform:rotate(72deg) translate(0,35px);
            transform:rotate(72deg) translate(0,35px);
  }
}

@keyframes loading-ani3{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    -webkit-transform:rotate(72deg) translate(0,50px);
            transform:rotate(72deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    -webkit-transform:rotate(72deg) translate(0,35px);
            transform:rotate(72deg) translate(0,35px);
  }
}
@-webkit-keyframes loading-ani4{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    -webkit-transform:rotate(144deg) translate(0,50px);
            transform:rotate(144deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    -webkit-transform:rotate(144deg) translate(0,35px);
            transform:rotate(144deg) translate(0,35px);
  }
}
@keyframes loading-ani4{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    -webkit-transform:rotate(144deg) translate(0,50px);
            transform:rotate(144deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    -webkit-transform:rotate(144deg) translate(0,35px);
            transform:rotate(144deg) translate(0,35px);
  }
}
@-webkit-keyframes loading-ani5{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    -webkit-transform:rotate(216deg) translate(0,50px);
            transform:rotate(216deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    -webkit-transform:rotate(216deg) translate(0,35px);
            transform:rotate(216deg) translate(0,35px);
  }
}
@keyframes loading-ani5{
  17.5%,25%,42.5%,50%,67.5%,75%,92.5%,100%{
    -webkit-transform:rotate(216deg) translate(0,50px);
            transform:rotate(216deg) translate(0,50px);
  }
  12.5%,37.5%,62.5%,87.5%{
    -webkit-transform:rotate(216deg) translate(0,35px);
            transform:rotate(216deg) translate(0,35px);
  }
}
@-webkit-keyframes loading-ani6{
  17%,25%,42%,50%,67%,75%,92%,100%{
    -webkit-transform:rotate(288deg) translate(0,50px);
            transform:rotate(288deg) translate(0,50px);
  }
  12%,37%,62%,87%{
    -webkit-transform:rotate(288deg) translate(0,35px);
            transform:rotate(288deg) translate(0,35px);
  }
}
@keyframes loading-ani6{
  17%,25%,42%,50%,67%,75%,92%,100%{
    -webkit-transform:rotate(288deg) translate(0,50px);
            transform:rotate(288deg) translate(0,50px);
  }
  12%,37%,62%,87%{
    -webkit-transform:rotate(288deg) translate(0,35px);
            transform:rotate(288deg) translate(0,35px);
  }
}


.loader-wrapper {
    left: 50%;
  position: absolute;
  top: 50%;
  margin-top: -12px;
  margin-left: -12px;
}


/***********************************************
(Smaller than 768px)
***********************************************/
@media screen and (max-width: 768px) {
	
	
	.loading5 {
		display:none !important;
	}

.portfolioContainer {
  width:98%;
  margin:auto;
  margin-top:6em;

}


.portfolioContainer .beitrag {
  width: 42%;
  margin:2em;
  padding-bottom:3em;

}

.portfolioFilter a.selected { 
    color:#A4A49F;
}


#logo {
  position:fixed;
  width:8.6em;
  height:12.4em;
  margin-top:1em;
  right:1em;
  z-index:600;
  background: transparent url('http://scharaden.com/herbert/wp-content/uploads/2015/06/fp_inv.png') no-repeat;
  background-size:8.6em auto;
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-ms-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
}



header {
  background: transparent;
}

header nav {
  background:#000;
  width:10rem;
  margin-left:0;
  padding:.5rem;
  margin-top: 0;
}



header nav ul
{ background:#000;
  display:inline;
  list-style:none;
  height:5em;

}

header nav ul li
{
  display:block;
  list-style:none;
  
}

  
  .overlay-slidedown.open {
    -webkit-transform: translateY(0%);
  transform: translateY(0%);
  }
  
  .about img {
    display:none;
  }

/***********************************************
           Mobile (portrait 667px)
***********************************************/
@media screen and (max-width: 667px) {



.portfolioContainer {
  width:90%;
  margin:auto;
  margin-top:6em;
  
}


.portfolioContainer .beitrag {
  width:90%;
  margin:2em;
  padding-bottom:3em;

}


.portfolioFilter a.selected { 
    color:#A4A49F;
}


header {
  background: transparent;
}

header nav {
  background:#000;
  width:10rem;
  margin-left:0;
  padding:.5rem;
  margin-top: 0;
}



header nav ul
{ background:#000;
 
  display:inline;
  list-style:none;
  height:5em;

}

header nav ul li
{
  display:block;
  list-style:none;
  
}



#logo {
  position:fixed;
  width:8.6em;
  height:12.4em;
  margin-top:1em;
  right:1em;
  z-index:600;
  background: transparent url('http://scharaden.com/herbert/wp-content/uploads/2015/06/fp_inv.png') no-repeat;
  background-size:8.6em auto;
}



/***********************************************
           Mobile (landscape 420px)
***********************************************/

@media only screen and (min-width: 480px) and (max-width: 767px) {

body                                       { 
 }


.portfolioContainer {
  width:90%;
  margin:auto;
  margin-top:6em;
 
}


.portfolioContainer .beitrag {
  width:90%;
  margin:5%;
  padding-bottom:3em;

}



.portfolioFilter a.selected { 
    color:#A4A49F;
}


#logo {
  position:fixed;
  width:8.6em;
  height:12.4em;
  margin-top:1em;
  right:1em;
  z-index:600;
  background: transparent url('http://scharaden.com/herbert/wp-content/uploads/2015/06/fp_inv.png') no-repeat;
  background-size:8.6em auto;
}

}

.nicescroll-rails {
	z-index: 1000 ;
}


/***********************************************
*************** colors & hints *****************

bg-grey: #A4A49F;
beige: #F0EBE4;
blau: #205F7F;
gelb: #F4DE39;
grün: #3FA361;
orange: #EF5F27;

***********************************************/