html {font-size: 100%}
body {font-family: Arial, sans-serif; font-size: 1.33rem; line-height: 2rem; font-weight:bold; text-decoration:none; color:black; background-color: white}
  
a                               {color: #000; text-decoration: underline}  
a:hover                         {filter: blur(2px)}
a:active                        {filter: blur(4px)}
a.anchor                        {display: block; position: relative; top: -80px; visibility: hidden}
#logo a:hover, #logo a:active   {filter: none}
#works-block a, #back       {text-decoration: none}
#works-block a:hover           {filter: blur(2px)}
#logo {padding-bottom: 1.5%}

/*MENU*/  

.button         {display: inline; float:left; padding-left: 1.5%; padding-top: 0.5%; padding-bottom: 0.5%; padding-right: 1.5%; color:darksalmon;  z-index: 2;font-size: 1.33rem; line-height: 2rem; text-align:left; text-transform: uppercase; font-weight: bold}
.title_big      {font-size: 5.33rem; line-height: 4rem; font-weight: bold; text-transform: uppercase}
.title_small    {font-size: 2.66rem; line-height: 2.66rem; font-weight: bold; text-transform: uppercase}

#button_1, #works-block h1, #works-block h2, #works-block, #works-block a, #back, #title_header      {color: cornflowerblue}
#button_2, #info-block .title_big, #info-block, #info-block a                       {color: darksalmon}
#button_3, #imprint-block                                                           {color: darkgrey}
#button_4                                                        {color:darkolivegreen}
#title_header                                                                       {float: right}
#header     {position: fixed; z-index: 2; display: block; width: 97%; top: 0; margin:0 ;background-color: white; padding-left: 1.5%; padding-right: 1.5%; padding-bottom: 5px; padding-top: 5px; box-shadow: 0 0 100px 0 darksalmon}
#footer a   {display: block; background-color: white; color: cornflowerblue; text-align: left; text-transform: uppercase}
#back h1      {transform:scale(-1, 1)}

/*CONTENT*/

#content {position: relative; margin-top: 90px}
#info-block, #works-block, #imprint-block, #footer {padding: 1.5%}

.content-block          {display: block}
.content-block:after    {clear: both;content: ".";display: block; height: 0; visibility:hidden}

.responsive-video           {position: relative;padding-bottom: 56.28%; /* Default for 1600x900 videos 16:9 ratio*/padding-top: 0;height: 0;overflow: hidden;margin-bottom: 40px}
.responsive-video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

img {width:100%;}

.element_full   {width: 100%}
.element_1      {width: 30.33%; float: left; padding: 1.5%}
.element_2      {width: 63.66%; float: left; padding: 1.5%}
.element_0      {width: 97%;  padding: 1.5%}

h1, h2, h3  {font-size: 1.33rem; font-weight: bold; text-transform: uppercase}
h4          {font-size:0.66rem; line-height: 1rem; font-weight: bold} /*bildunterschrift*/

p           {font-weight: bold}
p a, li a   {text-decoration: underline}
li          {line-height: 1.33rem; margin-bottom: 10px}
  
.underline  {text-decoration: underline}



@media only screen and (max-width:1280px) 
{
    .element_1, .element_2  {width: 97%;  padding: 1.5%} 
    body                    {font-size: 1.33rem}
    .title_big      {font-size: 4rem; line-height: 4rem; font-weight: bold; text-transform: uppercase}
}