/* --------------------------------------------------- GLOBAL DEFINITIONS --------------------------------------------------------------------------- */
    * {
      margin: 0;
      padding: 0;
    }

    *, *:before, *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }


  @font-face {
      font-family: 'Source Sans Pro';
      font-style: normal;
      font-weight: 400;
      src: local(''),
           url('../fonts/source-sans-pro-v21-latin-regular.woff2') format('woff2')
    }

  @font-face {
      font-family: 'Josefin Sans';
      font-style: normal;
      font-weight: 400;
      src: local(''),
           url('../fonts/josefin-sans-v25-latin-regular.woff2') format('woff2'),
    }

  @font-face {
      font-family: 'Dancing Script';
      font-style: normal;
      font-weight: 400;
      src: local(''),
           url('../fonts/DancingScript-VariableFont_wght.ttf') format('truetype'),
    }

    @font-face {
      font-family: 'Indie Flower';
      font-style: normal;
      font-weight: 400;
      src: local(''),
           url('../fonts/IndieFlower.ttf') format('truetype'),
    }

    @keyframes fadein {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes expand {
      0% {
        font-size: .1em;
        opacity: 0;
      }

      30% {
        opacity: 0;
      }

      40% {
        font-size: 1em;
      }

      100% {
        opacity: 1;
      }
    }

    @keyframes shrink {
      0% {
        font-size: 2em;
        opacity: 0;
      }

      30% {
        font-size: 1em;
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      font-family: 'Source Sans Pro', sans-serif;
      background: rgb(253, 253, 253);
      animation: fadein ease-in 1.5s;
      overflow-x: hidden;
    }

    h1, h2, h3 {
      font-family: 'Josefin Sans', sans-serif;
      hyphens: none;
    }

    p {
      font-family: 'Source Sans Pro', sans-serif;
      -moz-hyphens: auto;
      -o-hyphens: auto;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }

    a {
      font-family: 'Source Sans Pro', sans-serif;
      text-decoration: none;
      color: rgb(0, 100, 200);
      hyphens: none;
    }

    a:hover {
      text-decoration: underline;
      text-shadow: 0 0 .03em;
      transition: all ease-in .3s;
    }


    /* ----------------------------------------------------------------- HEADER ---------------------------------------------------------------------- */
 

    header {
      display: block;
      position: relative;
      float: left;
      width: 100%;
      height: 100vh;
      top: 0;
      margin: 0;
      padding: 0;
      height: auto;
      background: transparent;
      z-index: 2;
    }

    img.cover {
      display: block;
      position: fixed;
      float: left;
      width: 100%;
      height: 100vh;
      object-fit: cover;
      object-position: 50% 0%;
      margin: 0;
      z-index: 2;
    }

    img.dummy {
      display: block;
      position: relative;
      float: left;
      width: 100%;
      height: 100vh;
      object-fit: cover;
      object-position: 50% 0%;
      margin: 0;
      z-index: 1;
    }

    header h1 {
      position: fixed;
      font-size: 6em;
      line-height: 1.2em;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: .25em;
      margin: .6em 0 0 3%;
      color: rgb(120, 0,0);
      z-index: 3;
    }

    .imgtriangle {
      display: flex;
      position: fixed;
      justify-content: center;
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
      z-index: 2;
    }

    img.triangle {
      position: fixed;
      justify-content: center;
      bottom: 0;
      width: 5.2em;
      height: 3.9em;
      bottom: 1em;
      padding: 1em;
      filter: brightness(95%);
      z-index: 2;
    }

    img.triangle:hover {
      padding: 1em .8em .75em .8em;
      filter: brightness(100%);
      transition: all ease-in .3s;
    }


    /* ----------------------------------------------------------------- NAVIGATION ---------------------------------------------------------------- */


    nav {
      position: absolute;
      width: 30%;
      top: 0;
      padding: 0;
      margin: 0 0 0 70%;
    }

    .area {
      display: block;
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      background-image: linear-gradient(to left, rgba(0, 50, 20, .85) 30%, rgba(250, 250, 250, .75) 30%);
      animation: fadein ease-in-out .4s;
      z-index: 4;
    }

    nav ul {
      display: block;
      position: absolute;
      width: 100%;
      height: auto;
      margin: 8em 0 0 0;
      padding: 0;
      border-top: none;
      list-style-type: none;
      animation: fadein ease-in-out .4s;
      z-index: 4;
    }

    nav ul li {
      width: 100%;
      padding-top: 0;
    }

    nav ul li a {
      width: 100%;
      float: left;
      font-size: 2em;
      letter-spacing: .05em;
      padding: .8em 0 .8em 3em;
      color: rgb(250, 250, 250);
    }

    nav ul li a.select {
      border-bottom: none;
      padding-left: 2.8em;
      border-left: solid .2em rgb(250, 250, 250);
    }

    nav ul li a:hover {
      padding-left: 2.8em;
      color: rgb(255, 255, 255);
      border-left: solid .2em rgb(255, 255, 255);
      text-shadow: 0 0 .03em;
      text-decoration: none;
      transition: none;
      transition: color ease-in .2s;
    }

    nav ul li a.select:hover {
      color: rgb(250, 250, 250);
      border-left: solid .2em rgb(250, 250, 250);
      text-decoration: none;
      text-shadow: none;
      transition: none;
    }

    nav ul.menu {
      display: block;
      position: absolute;
      width: 5.5em;
      right: 0;
      margin: 3.8em 8em 0 0;
      padding: 0;
      border: none;
      animation: none;
      z-index: 2;
    }

    nav ul.menu li a {
      float: right;
      margin: 0;
      padding: 0;
    }

    nav ul.menu li a:hover {
      padding: 0;
      border: none;
    }

    nav img {
      display: block;
      position: fixed;
      width: 4.2em;
      margin: 0;
      padding: .25em;
      filter: brightness(95%);
      animation: fadein ease-in-out .5s;
      z-index: 2;
    }

    nav img:hover {
      padding: .25em .25em 0 0;
      filter: brightness(100%);
      transition: all ease-in .2s;
    }

    .toggleBox1 {
      position: relative;
    }

    .toggleBox1 input {
      position: absolute;
      left: -9999px;
    }

    .open,
    .close {
      font-size: 1em;
    }

    .expand {
      animation: expand 1.5s;
    }

    .shrink {
      animation: shrink 1.5s;
    }

    .toggleBox1 input:not(:checked)~.close,
    .toggleBox1 input:checked~.open {
      display: none;
    }

    .toggleBox1 input:checked~div {
      display: none;
    }


    /* -------------------------------------------------------------- ARTICLE ---------------------------------------------------------------------- */
    

    main {
      display: block;
      position: relative;
      float: left;
      width: 100%;
      background-color: rgba(253, 253, 253);
      z-index: 3;
    }

    div.dark {
      position: relative;
      float: left;
      width: 100%;
      margin: 0;
      padding: 0;
      background: rgb(5, 5, 5);
    }

    div.dark1 {
      float: left;
      width: 50%;
    }

    div.dark2 {
      float: right;
      width: 50%;
    }

    .main {
      padding: 0 15% 0 15%;
    }

    article {
      display: block;
      position: relative;
      margin: 15em 0 15em 0;
      border-radius: .3em;
      padding: 0 0 1.5em 0;
      border-radius: .5em; 
      border-style: solid;
      border-bottom: solid .2em rgb(218, 215, 211);
      border-image: linear-gradient(to right, transparent, transparent 30%, rgb(120, 0, 0) 30%, rgb(120, 0, 0) 70%, transparent 70%);
      border-image-slice: 0 0 1 0;
    }

    article.border1 {
      padding: 2em 1em 0 0;
      border: none;
      border-top: solid 7.5em rgb(225, 225, 225);
      border-right: solid 15em rgb(225, 225, 225);
    }

    article.border2 {
      padding: 1em 0 0 2em;
      border: none;
      border-bottom: solid 7.5em rgb(225, 225, 225);
      border-left: solid 15em rgb(225, 225, 225);
    }

    article.red {
      padding: 3.5em 3em 2.5em 3.5em;
      background: rgb(100, 0, 0);
      border: none;
    }

    article.none {
      border: none;
    }

    article:first-child {
      margin-top: 15em;
      border: none;
    }

    article:last-child {
      margin-bottom: 13em;
    }

    .container {
      display: inline-block;
    }

    h1 {
      font-size: 3.5em;
      line-height: 1.1em;
      font-weight: normal;
      text-transform: uppercase;
      letter-spacing: .2em;
      margin: 0;
      padding: 0;
      padding-bottom: 2em;
      text-shadow: none;
      color: rgb(0, 100, 0);
    }

    h2 {
      font-size: 2em;
      line-height: 1.1em;
      font-weight: bold;
      letter-spacing: .1em;
      padding-bottom: 2em;
      color: rgb(60, 70, 80);
    }

    h2.abstract {
      font-size: 3em;
      line-height: 1.1em;
      font-weight: normal;
      text-transform: uppercase;
      margin: 0;
      text-shadow: none;
      color: rgb(0, 100, 0);
    }

    h2.text {
      padding-bottom: .8em;
      -moz-hyphens: auto;
      -o-hyphens: auto;
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
    }

    h3 {
      font-size: 1.5em;
      line-height: 1.1em;
      font-weight: bold;
      padding-top: 1.5em;
      padding-bottom: 1.7em;
      letter-spacing: .05em;
      color: rgb(60, 70, 80);
    }

    p {
      font-size: 1.5em;
      line-height: 1.7em;
      margin: 0;
      padding: 0 0 1.5em 0;
      color: rgb(80, 85, 90);
    }

    p.dark1 {
      font-family: 'Indie Flower';
      font-size: 1.7em;
      line-height: 1.1em;
      padding: .4em 0 .2em 6.5%;
      color: rgb(130, 130, 130);
      hyphens: none;
    }

    p.dark2 {
      text-align: right;
      font-size: 1.9em;
      line-height: 1.1em;
      padding: .1em 8% 0 0;
      color: rgb(170, 0, 0);
      hyphens: none;
    }

    p.quote {
      font-style: italic;
      color: rgb(115, 120, 125);
    }

    h1.red,
    h2.red,
    h3.red,
    p.red {
      color: rgb(250, 250, 250);
    }

    img {
      display: block;
      float: right;
      border-radius: .3em;
    }

    img.right {
      float: right;
      width: 45%;
      margin: 0 0 1.5em 2em;
    }

    img.left {
      float: left;
      width: 45%;
      margin: 0 2em 1.5em 0;
      border-radius: .3em;
    }

    img.landscape {
      width: 60%;
      margin: 0 0 1.5em 2em;
    } 

    img.portrait {
      width: 40%;
      margin: 0 0 1.5em 2em;
    }

    /* Versspalten */
    .column {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    .column-flex {
      flex: 1;
      margin-top: 5em;
    }

    .column-flex:first-child {
      margin-top: 0;
    }

    .img-flex {
      display: inline-block;
      width: 100%;
    }

    img.flex {
      float: left;
      width: 90%;
      margin: -6em 0 2em 0;
      border-radius: .3em;
    }

    @media only screen and (max-width: 80em) {
    .column {
      flex-direction: column;
      margin-top: 0;
    }

    .column-flex {
      margin-top: 0;
    }

    img.flex {
      float: left;
      width: 75%;
      margin: 1.5em 0 2em 0;
      border-radius: .3em;
    }
    } 

    /* Adressdaten */
    p span.spam {
      display: none;
    }

    p span.address1::before {
      content: "annabelle";
    }
    
    p span.address2::after {
      content: "annabelle-schickentanz.de";
    } 

    p span.address3::before {
      content: "Jahnplatz 10";
    }

    p span.address4::before {
      content: "33602 Bielefeld";
    }

    p span.address5::before {
      content: "j.flassbeck";
    }

    p span.address6::after {
      content: "co-abhaengig.de";
    }

    p span.address1,
    p span.address2,
    p span.address3, 
    p span.address4,
    p span.address5,
    p span.address6 {
      display: inline-block;
    }

    p span.address5 {
      padding-bottom: .5em;
    }



    /* -------------------------------------------------------------- FOOTER -------------------------------------------------------------------- */


    footer {
      display: block;
      position: relative;
      float: left;
      width: 100%;
      margin: 0;
      padding: 3em 15% 5.5em 15%;
      background: rgb(60, 0, 0);
      z-index: 4;
    }

    .menu1,
    .menu2 {
      margin: 0;
      padding: 0
    }

    footer ul {
      display: block;
      float: left;
      width: 17em;
      margin: 0 0 2em 0;
      list-style: none;
    }

    footer ul li {
      width: 100%;
      margin: 0 0 .3em 0;
    }

    footer ul li a {
      font-size: 1.4em;
      line-height: 1.3em;
      letter-spacing: .05em;
      padding: .2em 0 .2em 1em;
      color: rgb(230, 230, 230);
    }

    footer ul li a.select {
      padding-left: .85em;
      color: rgb(230, 230, 230);
      border-left: solid .15em rgb(230, 230, 230);
      text-decoration: none;
    }

    footer ul li a:hover {
      color: rgb(255, 255, 255);
      border-left: solid .15em rgb(255, 255, 255);
      padding-left: .85em;
      text-shadow: 0 0 .03em;
      text-decoration: none;
      transition: color ease-in-out .2s;
    }

    footer ul li a.select:hover {
      color: rgb(230, 230, 230);
      border-left: solid .15em rgb(230, 230, 230);
      text-decoration: none;
      text-shadow: none;
      transition: none;
    }

    .eye {
      justify-content: flex-end;
      width: 100%;
      margin-right: 0;
      padding: 0;
      opacity: 0.75;
    } 

    footer img.eye {
      width: 11em;
      margin: 0;
      padding: 0;
    } 

    p.copyright {
      display: block;
      position: absolute;
      text-align: center;
      left: 0;
      right: 0;
      font-family: 'Indie Flower';
      font-size: 1.6em;
      line-height: 1.2em;
      margin: 0;
      padding: 0;
      bottom: 2em;
      color: rgb(130, 130, 130);
    } 

    /* Lightbox */
    footer ul.lightbox {
      margin: 0;
      padding: 0;
    }

    footer ul.lightbox li {
      overflow: hidden;
      position: absolute;
      width: 0;
      height: 0;
      left: 0;
      top: 0;
      opacity: 0;
    }

    footer ul.lightbox li:target {
      display: block;
      position: fixed;
      width: 100%;
      height: 100%;
      opacity: 1;
      background: rgba(250, 250, 250, .75);
      -webkit-transition: opacity 1.5s;
      -moz-transition: opacity 1.5s;
      -ms-transition: opacity 1.5s;
      -o-transition: opacity 1.5s;
      transition: opacity 1.5s;
      z-index: 5;
    }

    footer ul.lightbox li a img {
      position: absolute;
      width: 30em;
      height: auto;
      top: -9999px;
      bottom: -9999px;
      left: -9999px;
      right: -9999px;
      margin: auto;
      border-radius: .5em;
      animation: fadein ease-in-out 1s;
    }

    footer ul.lightbox li a img:hover {
      opacity: 0.8;
      transistion: opacity .5s;
    }


    /* -------------------------------------------------------------- Bildschirm klein ------------------------------------------------------------- */
  


    @media only screen and (max-width: 125em) {

    header h1 {
      font-size: 5em;
    }
 
    img.triangle {
      width: 4.8em;
      height: 3.7em;
      bottom: .5em;
    }

    nav {
      width: 35%;
      margin: 0 0 0 65%;
    }

    .area {
      background-image: linear-gradient(to left, rgba(0, 50, 20, .85) 35%, rgba(250, 250, 250, .75) 35%);
    }

    nav ul {
      margin: 7.5em 0 0 0;
    }

    nav ul li a {
      font-size: 1.9em;
      letter-spacing: .05em;
      padding: .8em 0 .8em 3em;
    }

    nav ul.menu {
      width: 5.3em;
      margin: 3.1em 6em 0 0;
    }

    nav img {
      width: 4.1em;
    }

    .main {
      padding: 0;
    }

    article {
      margin: 12em 12em 12em 12em;
      border-radius: 0;
    }

    article.border1 {
      margin: 12em 0 12em 12em;
      padding: 2em 1em 0 0;
      border-top: solid 6em rgb(225, 225, 225);
      border-right: solid 12em rgb(225, 225, 225);
      border-radius: 1em 0 0 0;
    }

    article.border2 {
      margin: 12em 12em 12em 0;
      padding: 1em 0 0 2em;
      border-bottom: solid 6em rgb(225, 225, 225);
      border-left: solid 10.1em rgb(225, 225, 225);
      border-radius: 0 0 1em 0;
    }

    article.red {
      margin: 12em 0 12em 0;
      padding: 3em 12em 1em 12em;
    }

    article:first-child {
      margin-top: 12em;
    }

    article:last-child {
      margin-bottom: 10em;
    }

    h1 {
      font-size: 3.3em;
      padding-bottom: 1.9em;
      letter-spacing: .1em;
    }

    h2 {
      font-size: 1.9em;
      padding-bottom: 1.9em;
      letter-spacing: .05em;
    }

    h2.abstract {
      font-size: 2.8em;
    }

    h3 {
      font-size: 1.4em;
      padding-top: 1.4em;
      padding-bottom: 1.6em;
      letter-spacing: .02em;
    }

    p {
      font-size: 1.4em;
      line-height: 1.7em;
      padding-bottom: 1.4em;
    }

    p.dark1 {
      font-size: 1.6em;
    }

    p.dark2 {
      font-size: 1.8em;
    }

    img.right {
      margin: 0 0 1.4em 1.9em;
    }

    img.left {
      margin: 0 1.9em 1.4em 0;
    }

    img.landscape {
      margin: 0 0 1.4em 1.9em;
    } 

    img.portrait {
      width: 40%;
      margin: 0 0 1.4em 1.9em;
    }

    footer {
      padding: 3em 11em 5.5em 11em;
    }

    footer ul {
      width: 15em;
    }

    footer ul li {
      margin: 0 0 .3em 0;
    }

    footer ul li a {
      font-size: 1.3em;
    }

    footer img.eye {
      width: 10em;
    } 

    .copyright {
      bottom: -2.5em;
    } 

    p.copyright {
      font-size: 1.5em;
    } 
} 


    /* ------------------------------------------------------------- Tablet ------------------------------------------------------------ */
 


    @media only screen and (max-width: 100em) {
 
    div.imgtriangle {
      margin-left: -1.8em;
      bottom: 0;
    }

    img.triangle {
      width: 4.6em;
      height: 3.5em;
    }

    header h1 {
      font-size: 4em;
    }  

    nav {
      width: 45%;
      margin: 0 0 0 55%;
    }

    .area {
      background-image: linear-gradient(to left, rgba(0, 50, 20, .85) 45%, rgba(250, 250, 250, .75) 45%);
    }

    nav ul {
      margin: 7em 0 0 0;
    }

    nav ul li a {
      font-size: 1.6em;
      letter-spacing: .04em;
      padding: .8em 0 .8em 3em;
    }

    nav ul.menu {
      width: 5em;
      margin: 2.2em 4em 0 0;
    }

    nav img {
      width: 3.9em;
    }

    article {
      margin: 10em 10em 10em 10em;
    }

    article.border1 {
      margin: 10em 0 10em 10em;
      padding: 2em 1em 0 0;
      border-top: solid 4em rgb(225, 225, 225);
      border-right: solid 8em rgb(225, 225, 225);
    }

    article.border2 {
      margin: 10em 10em 10em 0;
      padding: 1em 0 0 2em;
      border-bottom: solid 4em rgb(225, 225, 225);
      border-left: solid 8em rgb(225, 225, 225);
    }

    article.red {
      margin: 4.5em 0 4.5em 0;
      padding: 3em 10em 1em 10em;
    }

    article:first-child {
      margin-top: 10em;
    }

    article:last-child {
      margin-bottom: 8em;
    }

    h1 {
      font-size: 3.1em;
      padding-bottom: 1.5em;
    }

    h2 {
      font-size: 1.8em;
      padding-bottom: 1.5em;
    }

    h2.abstract {
      font-size: 2.6em;
    }

    h3 {
      font-size: 1.3em;
      padding-top: 1.3em;
      padding-bottom: 1.3em;
    }

    p {
      font-size: 1.3em;
      line-height: 1.6em;
      padding-bottom: 1.3em;
    }

    p.dark1 {
      font-size: 1.5em;
      padding: .4em 0 0 6.5%;
    }

    p.dark2 {
      font-size: 1.7em;
      padding: .1em 8% 0 0;
    }

    img.right {
      width: 45%;
      margin: 0 -10em 1.3em 1.8em;
    }

    img.left {
      width: 45%;
      margin: 0 1.8em 1.3em -10em;
    }

    img.landscape {
      width: 65%;
      margin: 0 -10em 1.3em 1.5em;
    } 

    img.portrait {
      width: 45%;
      margin: 0 -10em 1.3em 1.5em;
    }

    footer {
      padding: 3em 10em 5.5em 10em;
    }

    footer ul {
      width: 14em;
    }

    footer ul li {
      margin: 0 0 .3em 0;
    }



    /* -------------------------------------------------------------- SMARTPHONE 1 --------------------------------------------------------------- */



    @media only screen and (max-width: 70em) {

    div.imgtriangle {
      margin-left: -1.7em;
    }

    img.triangle {
      width: 3.8em;
      height: 3em;
      bottom: -2em;
    }

    header img.logo {
      width: 20em;
      margin: 1em 0 0 .5em;
    }    

    nav {
      width: 60%;
      margin: 0 0 0 40%;
    }

    header h1 {
      font-size: 3em;
    }

    .area {
      background-image: linear-gradient(to left, rgba(0, 50, 20, .85) 60%, rgba(250, 250, 250, .75) 60%);
    }

    nav ul {
      margin: 6em 0 0 0;
    }

    nav ul li a {
      font-size: 1.5em;
      letter-spacing: .04em;
      padding: .8em 0 .8em 3em;
    }

    nav ul.menu {
      width: 4.8em;
      margin: 1.5em 2.5em 0 0;
    }

    nav img {
      width: 3.7em;
      filter: brightness(100%);
    }

    article {
      margin: 8em 4em 8em 4em;
    }

    article.border1 {
      margin: 8em 0 8em 4em;
      padding: 2em 1em 0 0;
      border-top: solid 3em rgb(225, 225, 225);
      border-right: solid 3em rgb(225, 225, 225);
    }

    article.border2 {
      margin: 8em 4em 8em 0;
      padding: 1em 0 0 1em;
      border-bottom: solid 3em rgb(225, 225, 225);
      border-left: solid 3em rgb(225, 225, 225);
    }

    article.red {
      margin: 8em 0 8em 0;
      padding: 3em 4em 1em 4em;
    }

    article:first-child {
      margin-top: 8em;
    }

    article:last-child {
      margin-bottom: 6em;
    }

    h1 {
      font-size: 2.9em;
      padding-bottom: 1.1em;
      letter-spacing: .05em;
    }

    h2 {
      font-size: 1.7em;
      padding-bottom: 1.1em;
      letter-spacing: .03em;
    }

    h2.abstract {
      font-size: 2.4em;
    }

    h2.text {
      padding-bottom: .65em;
    }

    h3 {
      font-size: 1.2em;
      padding-top: 1.2em;
      padding-bottom: .9em;
      letter-spacing: .01em;
    }

    p {
      font-size: 1.2em;
      line-height: 1.5em;
      padding-bottom: .9em;
    }

    p.dark1 {
      font-size: 1.15em;
    }

    p.dark2 {
      font-size: 1.25em;
    }

    img.right {
      width: 50%;
      margin: 0 -4.1em 1.2em 1.6em;
    }

    img.left {
      width: 50%;
      margin: 0 1.6em 1.2em -4.1em;
    }

    img.landscape {
      width: 70%;
      margin: 0 -4.1em 2em 1em;
    } 

    img.portrait {
      width: 50%;
      margin: 0 -4.1em 2em 1em;
    }

    footer {
      flex-direction: column;
      padding: 3em 4em 4em 3em;
    }

    footer ul {
      width: 11em;
    }

    footer ul li {
      margin: 0 0 .3em 0;
    }

    footer ul li a {
      font-size: 1.2em;
    }

    footer ul.lightbox li a img {
      width: 25em;
    }

    footer img.eye {
      width: 6em;
    } 

    p.copyright {
      font-size: 1.3em;
    } 
} 


    /* ----------------------------------------------------------- SMARTPHONE 2 ----------------------------------------------------------------- */
       

    @media only screen and (max-width: 35em) {

    header h1 {
      font-size: 2em;
    }

    div.imgtriangle {
      margin-left: -1.65em;
    }

    img.triangle {
      width: 3.6em;
      height: 2.9em;
    } 

    nav {
      width: 85%;
      margin: 0 0 0 15%;
    }

    .area {
      background-image: linear-gradient(to left, rgba(0, 50, 20, .85) 85%, rgba(250, 250, 250, .75) 85%);
    }

    nav ul {
      margin: 5.5em 0 0 0;
    }

    nav ul li a {
      font-size: 1.3em;
      letter-spacing: .03em;
      padding: .8em 0 .8em 3em;
    }

    nav ul.menu {
      width: 4.6em;
      margin: .9em 1em 0 0;
    }

    nav img {
      width: 3.4em;
    }

    article {
      margin: 7em 1.5em 7em 1.5em;
    }

    article.border1 {
      margin: 7em 0 7em 1.5em;
      padding: 2em .5em 0 0;
      border-top: solid 2.5em rgb(225, 225, 225);
      border-right: solid 1em rgb(225, 225, 225);
      border-radius: .3em; 
    }

    article.border2 {
      margin: 7em 1.5em 7em 0;
      padding: 1em 0 0 .7em;
      border-bottom: solid 2.5em rgb(225, 225, 225);
      border-left: solid 1em rgb(225, 225, 225);
      border-radius: .3em;
    }

    article.red {
      margin: 7em 0 7em 0;
      padding: 3em 1.5em 1em 1.5em;
    }

    article:first-child {
      margin-top: 7em;
    }

    article:last-child {
      margin-bottom: 5em;
    }

    h1 {
      font-size: 2.7em;
      padding-bottom: 1em;
      letter-spacing: 0;
    }

    h2 {
      font-size: 1.5em;
      padding-bottom: 1em;
      letter-spacing: 0;
    }

    h2.abstract {
      font-size: 2.1em;
    }

    h2.text {
      padding-bottom: .7em;
      letter-spacing: 0;
    }

    h3 {
      font-size: 1.1em;
      padding-top: 1.1em;
      padding-bottom: .8em;
    }

    p {
      font-size: 1.1em;
      line-height: 1.4em;
      padding-bottom: 1em;
    }

    p.dark1 {
      font-size: 1.05em;
    }

    p.dark2 {
      font-size: 1.1em;
    }

    img.right {
      width: 55%;
      margin: 0 -1.6em 1.1em 1.5em;
    }

    img.left {
      width: 55%;
      margin: 0 1.5em 1.1em -1.6em;
    }

    img.landscape {
      width: 100%;
      margin: 0 0 1em 0;
    } 

    img.portrait {
      width: 55%;
      margin: 0 -1.6em 2em .5em;
    }

    footer {
      padding: 2.7em 1.5em 3.7em 1.2em;
    }

    footer ul {
      width: 7em;
    }

    footer ul li {
      margin: 0 0 .3em 0;
    }

    footer ul li a {
      font-size: .95em;
      padding-left: .5em;
    }

    footer ul li a.select,
    footer ul li a:hover,
    footer ul li a.select:hover {
      padding-left: .35em;
    }

    footer ul.lightbox li a img {
      width: 90%;
    }

    footer img.eye {
      width: 5em;
    } 

    p.copyright {
      font-size: 1em;
    } 
}