@font-face {
  font-family: 'light';
  src: url('../fonts/klavika-light-webfont.woff2') format('woff2'),
       url('../fonts/klavika-light-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'book';
  src: url('../fonts/klavika-regular-webfont.woff2') format('woff2'),
       url('../fonts/klavika-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'medium';
  src: url('../fonts/klavika-medium-webfont.woff2') format('woff2'),
       url('../fonts/klavika-medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face { font-family: 'bold'; src: url('../fonts/klavika-bold-webfont.woff2') format('woff2'), url('../fonts/klavika-bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }


/* ---------------------------------------------------------------------------------------
fonts
--------------------------------------------------------------------------------------- */
/*
@font-face              { font-family: "light"; src: url("/fonts/futura_light_font-webfont.woff2") format("woff2"), url("/fonts/futura_light_font-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face              { font-family: "book"; src: url("/fonts/futura_book_font-webfont.woff2") format("woff2"), url("/fonts/futura_book_font-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face              { font-family: "medium"; src: url("/fonts/futura_medium_bt-webfont.woff2") format("woff2"), url("/fonts/futura_medium_bt-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face              { font-family: "bold"; src: url("/fonts/futura_bold_font-webfont.woff2") format("woff2"), url("/fonts/futura_bold_font-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
@font-face              { font-family: "heavy"; src: url("/fonts/futura_heavy_font-webfont.woff2") format("woff2"), url("/fonts/futura_heavy_font-webfont.woff") format("woff"); font-weight: normal; font-style: normal; }
*/



/* ---------------------------------------------------------------------------------------
basic tags
--------------------------------------------------------------------------------------- */
body                    { margin: 0 0 150px 0; padding: 0; font-family: 'book', 'arial', 'verdana'; font-size: 16px; letter-spacing: 0; color: #223f3f; }
a                       { color: #2ccccc; text-decoration: none; }
p                       { font-size:16px; margin:0 0 15px 0; line-height:150%; hyphens:auto; text-align:justify; } /* padding:1%; */

/* fix für line-height problem bei sub */
sup, sub                { vertical-align: baseline; position: relative; top: -0.4em; }
sub                     { top: 0.4em; }

p.indent                { text-indent:-20px; }

p a                     { color: #059b9b; }
h1, h2, h3, h4          { font-weight:normal; margin:0 0 20px 0; }
h1                      { font-size:35px; font-family:'bold'; line-height:100%; }
h2                      { font-size:30px; font-family:'bold'; }
h3                      { font-size:25px; font-family:'book'; }
h4                      { font-size:19px; font-family:'book'; color: #223f3f; }
h1.indent,
h2.indent,
h3.indent,
h4.indent,
div.indent               { margin-left:-20px; }

h1.devider,
h2.devider,
h3.devider,
h4.devider              { padding-bottom:100px; margin-top:0px; height:auto; margin-bottom:0px; background: url(/artworks-by-art-director-in-berlin-marcus-lepie/bg-stripes-yellow.gif) repeat-x bottom; }

.diff                 { color: #76a3a3; white-space: nowrap; }
strong                  { font-weight:normal; font-family: 'medium'; }
.lite                   { color: #a2c9c9 }
header                  { margin-top: 100px; margin-bottom:30px; }

nav                     { position:absolute; width:100%; height:500px; overflow:hidden; z-index:500; left:0px; top:0px; pointer-events:none; }
nav ul                  { list-style:none; padding:0; margin:0; transform-origin:50% 50%; width:400px; height:30px; display:flex; flex-direction:row; justify-content:center; align-items:center; position:absolute; }
nav li                  { margin:0 12px 0 12px; padding:0; color:#fff; pointer-events:auto; }
nav a                   { font-family:'medium'; font-size:16px; color:#fff; opacity:0.6; }
nav a.active            { border-bottom:2px solid #fff; cursor:default; }
nav a:not(.active):hover{ color:#000; } /* border-bottom:2px solid #000; */

aside                  { position:fixed; width:500px; height:30px; bottom:290px; z-index:501; right:-150px; text-align:right; font-size:14px; color:#dfeef1; pointer-events:none; 
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg); }
/* aside ul               { list-style:none; margin:0; padding:0; width:100%; height:100%; display:flex; flex-direction:row; justify-content:center; align-items:center; position:absolute; }
aside li               { margin:0 10px 0 10px; padding:0; color:#c3d8dd; pointer-events:auto; white-space:nowrap; } */
aside a                { font-family:'medium'; font-size:14px; color:#c3d8dd; }
aside a.active         { border-bottom:2px solid #c3d8dd; }
aside                  {  }

footer                 { margin:200px 0 100px 0; color:#a2c9c9; }
/* footer .tiny_url       { font-size: 14px; color:#dfeef1; float:right; } */
footer a               { color:#a2c9c9; }
footer a.active            { border-bottom:2px solid #a2c9c9; cursor:default; }
footer a:not(.active):hover{ color:#000; } /* border-bottom:2px solid #000; */

img.standard            { padding: 0 25px 5px 5px; }

#year                   { font-size:100px; line-height:70%; position:absolute; left:30px; top:220px; 
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);; color:#e5f2f5; } /* padding:6px 5px 10px 5px; border:5px solid #e5f2f5; */
#contact                { margin-top:100px; }
#contact h4             { text-align:left; }

/* ---------------------------------------------------------------------------------------
basic tags
--------------------------------------------------------------------------------------- */
.lang                   { display:none !important; }
.lang.de                { display:block !important; }
.langswitch             { text-transform:uppercase; font-size:85%; }


.prev-next              { margin-bottom:10px; }
.prev-next a, .prev-next span  { color:#c3d8dd; font-family:'medium'; font-size:100%; }
.shadow                 { -webkit-box-shadow: 0px 0px 30px 0px rgba(3,37,41,0.3); box-shadow: 0px 0px 30px 0px rgba(3,37,41,0.3); }

.tiny                   { text-transform: uppercase; font-size:70%; line-height:150%; display:inline-block; }

/* ---------------------------------------------------------------------------------------
stage
--------------------------------------------------------------------------------------- */
.stage                  { margin-left:auto; margin-right:auto; }
.stage.narrow           { width:50%; max-width: 400px; }
.stage.norm             { width:80%; max-width: 960px; }
.stage.plus             { width:90%; max-width: 1200px; }
.stage.max              { width:100%; margin-left:0; margin-right:0; }
.stage ul               { list-style:none; margin:0 0 5px 0; padding:0; border-top:1px solid #a9b7c4; }
.stage ul li            { padding: 5px 0 5px 0px; line-height:130%; border-bottom:1px solid #a9b7c4; }

/* .stage ul li:before     { content: '::: '; font-family:'book'; padding-right: 5px; letter-spacing: -0.1em; }
ul.no-bullet li:before  { content: ''; } */


/* ---------------------------------------------------------------------------------------
grid
--------------------------------------------------------------------------------------- */
.grid                   { list-style:none; display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; margin:0; padding:0; }
.projectinfo       { align-items:flex-start; margin-top:50px; }
.projectinfo > *   { /* border-top:1px solid #a9b7c4; */ }

.grid.border-h li       { border-bottom:1px solid #a9b7c4; /* border-top:1px solid #a9b7c4; margin-bottom:-1px; */ }
.grid.border-v li       { border-left:1px solid #a9b7c4; border-right:1px solid #a9b7c4; margin-left:-1px; }

.grid.rows-2            { margin-left:-2%; margin-right:-2%; }
.grid.rows-2 > *        { width:46%; margin:0 2% 0 2%; padding:20px 0 20px 0; }
.grid.rows-2 img        { width:90%; }
.grid.rows-3            { margin-left:-2%; margin-right:-2%; }
.grid.rows-3 > *        { width:29.333333333333333%; margin:0 2% 0 2%; padding:20px 0 20px 0; }
.grid.rows-3 img        { width:90%; }
.grid.rows-4            { margin-left:-2%; margin-right:-2%; }
.grid.rows-4 > *        { width:21%; margin:0 2% 0 2%; padding:20px 0 20px 0; }
.grid.rows-4 img        { width:90%; }


/* ---------------------------------------------------------------------------------------
stuff
--------------------------------------------------------------------------------------- */
.clientlogo             { width:90%; }
.devider                { margin-top:100px; margin-bottom:50px; height:100px; background:url(/artworks-by-art-director-in-berlin-marcus-lepie/bg-stripes-yellow.gif) repeat-x }
.clearfix::after        { content:""; clear:both; display:table; visibility:hidden; height:0px; }
.arrow,
.arrow.right            { background:url('/mix/icon-arrow-right.svg') no-repeat left center; background-size: 20px auto; padding: 0 0 0 30px; display:inline-block; }
.arrow.left             { background-image:url('/mix/icon-arrow-left.svg'); }

.arrow.lang             { display:none !important; }
.arrow.lang.de                { display:inline-block !important; }

.fullwidth              { width:100%; margin-left:0; margin-right:0; }
.responsive             { width:100%; }
.lazy                   { border-style:none; border:0; outline:0; }
.underline              { border-bottom: 5px solid #ffd200; }
.flex                   { display: flex; flex-wrap: wrap; align-items: center; }
.hilite                 { color: #ffd200; font-family:'book'; } /* war mal light */

.heavy                  { font-size: 120%; font-family:'bold'; vertical-align: baseline; padding-bottom: -2px; }
.hyphenate p            { -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; word-wrap: break-word; }

.conditional            { display:none; }

/* 
.table                  { display: table; }
.tr                     { display: table-row; }
.td                     { display: table-cell; }
.cols-2                 { -webkit-columns: 300px 2; -moz-columns: 300px 2; columns: 300px 2; }
 */

/* ---------------------------------------------------------------------------------------
typed.js
--------------------------------------------------------------------------------------- */
.typed-cursor						{ opacity: 1; font-family:'bold'; color:#000; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; -ms-animation: blink 0.7s infinite; -o-animation: blink 0.7s infinite; animation: blink 0.7s infinite; }
@-keyframes blink				{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}
@-webkit-keyframes blink{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}
@-moz-keyframes blink		{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}
@-ms-keyframes blink		{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}
@-o-keyframes blink			{ 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; }}


/* ---------------------------------------------------------------------------------------
Desktop, 1800 x 1300
--------------------------------------------------------------------------------------- */
@media all and (min-width:1601px) 
{ 
  #ma-latin img         { width:100%; margin-left:0; margin-right:0; }
  .stage.norm           { max-width: 960px; }
  .stage.norm p         { max-width: 65%; }
  .stage.plus           { max-width: 1200px; }
  .show-on-desktop      { display: initial; }
  .hide-on-desktop      { display: none; }
}


/* ---------------------------------------------------------------------------------------
Laptop, 1400 x 800
--------------------------------------------------------------------------------------- */
@media all and (min-width:769px) and (max-width:1600px)
{
  header                { margin-top: 50px; }
  .stage.norm           { max-width: 700px; }
  .stage.plus           { max-width: 900px; }
  .show-on-laptop      { display: initial; }
  .hide-on-laptop      { display: none; }
}


/* ---------------------------------------------------------------------------------------
tablet, Beispiel 768 x 1024
--------------------------------------------------------------------------------------- */
@media all and (min-width:576px) and (max-width:768px)
{
  .show-on-tablet      { display: initial; }
  .hide-on-tablet      { display: none; }

  footer               { text-align: center; margin-top:50px; margin-bottom:30px; }
  aside                { position:relative; margin-top:30px; width:100%; bottom:auto; left:0px; right:0; text-align:center; 
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);; }
  aside ul             { width:100%; height:30px; }

  #year {
    font-size: 100px;
    line-height: 70%;
    position: relative;
    
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);;
    text-align:center;
    left:auto; top:auto;
    margin-top:20px;
}
}


/* ---------------------------------------------------------------------------------------
Phone
--------------------------------------------------------------------------------------- */
@media all and (max-width:575px)
{
  body                  { margin: 15px; }
  header                { margin-top: 20px; margin-bottom: 20px; }
  header h1             { text-align: center; }
  .prev-next            { text-align: center; }
  h1, h2, h3, h4, p     { text-align: center; }
  #contact h4             { text-align:center; }
  li                    { text-align: center; }
  .diff                 { color: #76a3a3; white-space: normal; }

  .indent               { text-indent:0 !important; }

  aside                { position:relative; margin-top:30px; width:100%; bottom:auto; left:0px; right:0; text-align:center; 
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);; }
  aside ul             { width:100%; height:30px; }

  footer                    { text-align: center; margin-top:100px; margin-bottom:30px; }

  .stage.plus           { width: 100%; margin-left: 0; margin-right: 0; }
  .stage.norm           { width: 95%; }

  .show-on-phone      { display: initial; }
  .hide-on-phone      { display: none; }

  .grid.rows-3            { margin-left:0; margin-right:0; }
  .grid.rows-3 li         { width:100%; margin:0 0 -1px 0; padding:0; border-bottom:1px solid #a9b7c4; }
  .grid.rows-3 img        { padding:2.5%; width:95%; }
  .grid.rows-4            { margin-left:0; margin-right:0; }
  .grid.rows-4 li         { width:100%; margin:0 0 -1px 0; padding:0; border-bottom:1px solid #a9b7c4; }
  .grid.rows-4 img        { padding:2.5%; width:95%; }

  .projectinfo            { margin-top:0; }
  .projectinfo li         { display:block; padding-top:8px !important; padding-bottom:8px !important; }

  .grid.rows-3 > *        { width: 100%; margin-left:0; margin-right:0; padding: 20px 0 20px 0; }

  .grid.rows-3 li         { padding-bottom: 10px; }
  .grid.rows-3 li div     { padding: 2.5% 15% 0 15%; width: 70%; }
  .grid.rows-3 li div img { width:100%; padding:0; }

  #year {
    font-size: 100px;
    line-height: 70%;
    position: relative;
    
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);;
    text-align:center;
    left:auto; top:auto;
    margin-top:20px;
}
}