/* nd Fonts CSS
 * ---------------------------------- */

/* Roslindale */
@font-face {
  src: url('../fonts/roslindale/Roslindale-DisplayCondensedExtraLight.woff2') format("woff2"),
       url('../fonts/roslindale/Roslindale-DisplayCondensedExtraLight.woff') format("woff");
  font-family: 'Roslindale';
  font-style: normal;
  font-weight: 200;
}


@font-face {
  src: url('../fonts/roslindale/Roslindale-DisplayCondensedLight.woff2') format("woff2"),
       url('../fonts/roslindale/Roslindale-DisplayCondensedLight.woff') format("woff");
  font-family: 'Roslindale';
  font-style: normal;
  font-weight: 300;
}


/* GT Alpina */
@font-face {
    font-family: 'Gt alpina standard';
    src: url('../fonts/gt-alpina/GT-Alpina-Standard-Light.woff2') format('woff2'),
		 url('../fonts/gt-alpina/GT-Alpina-Standard-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

/* nd Fonts CSS Ende
 * ---------------------------------- */





/* Typography Layer
 * ---------------------------------- */
:root {
  --color: tomato;
}

.typoblock {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    z-index:1
}

.typoblock__header {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 90%;
    justify-content: center;
    left: 0;
    opacity: 1;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}

.loaded .typoblock__header {
    opacity: 1;
    transition:opacity 0.4s ease
}


#logo img { 
	height: 40px;
	margin-top: 16px;
	margin-left: 20px;
	} 	

.typoblock__title {
    font-family: 'Roslindale', serif; 
	font-weight: 300;
	font-size: 6em;
	line-height: 90%;
	margin-bottom: 20px; /* zuvor: 20px */
	text-align: center;
	mix-blend-mode: darken;
	z-index: 1000;
}


.subline { 
	font-family: 'Roslindale', serif;
	font-weight: 300;
	font-size: 2em;
	letter-spacing: 0.1em;
	margin-top: 0.2em; /* zuvor:0.6em */
}


.nav-area { 
	font-family: 'Roslindale', serif; 
	font-weight: 300;
	font-size: 5.2em;
    position: fixed;
    bottom: 20px;
	height: auto;
    left: 20px;
    right: 20px;
	z-index: 2;
}

.nav { display:flex }
.nav div:first-child {
   width:100%;
   text-align:left;
   }
.nav div:last-child {
   width:100%;
   text-align:right;
   }




@media (max-width: 1024px) { 
.typoblock__title { font-size: 4.8em; margin-bottom:16px; } 
.subline { font-size: 1.8em; margin-top: 0.2em; } 
.nav-area { font-size: 5.2em; }	
}


@media (max-width: 768px) { 
.typoblock__title { font-size: 4.2em; margin-bottom:14px; }
.subline { font-size: 1.6em; margin-top: 0.2em; }
.nav-area { font-size: 4.2em; }	
}

	
@media (max-width: 640px) { 
.typoblock__title { font-size: 3.4em; margin-bottom:10px; }
.subline { font-size: 1.2em; margin-top: 0.2em; }
.nav-area { font-size: 2.2em; }	
#logo img { height: 30px; } 		
}