/*
Theme Name: German Pop Art 2025
Theme URI: http://www.typolar.de
Author: Thomas Beisiegel
Author URI: http://www.typolar.de
Description: 
Version: 1
License: 
License URI: 
Tags: 
*/


@font-face {
    font-family: 'TBold';
    src: url('fonts/TBold.woff2') format('woff2'),
         url('fonts/TBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IL';
    src:  url('fonts/IL.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'IL_Rev';
    src:  url('fonts/IL_Rev.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'SE';
    src:  url('fonts/SE.woff2') format('woff2'),
    font-weight: normal;
    font-style: normal;
}
@starting-style {
	#nav.open {
		opacity: 0;
	}
	#navBG, #wordmark{
		scale:0;
	}
}

*{
	box-sizing: border-box;
}
body, html{
    position: relative;
    min-height: 100vh;
    background-color: #0F0F0F;
    background-image: url(img/BG.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
    border: 0;
	box-sizing: border-box;
	overflow-x:hidden;
}
header{
	position: relative;
    width: 100%;
    height: 100vh;
}
header.smaller{
	position: relative;
    width: 100%;
    height: 200px;
}
#paper{
	position: absolute;
	top:0;
	left:0;
	//width:100%;
}
@keyframes fadeIn { 
    from {opacity: 0% }
    to { opacity: 100% }
}
@keyframes scaleIn { 
    from {scale: 0 }
    to { scale: 1 }
}
@keyframes displayOut { 
    from {display:block }
    to { display:none }
}

#branding{
	position: relative;
	height:70%;
	top:15%;
	width:100%;
	overflow: hidden;
}

#logo{
	scale:0;
	position: fixed;
    height: 55%;
    width: 100%;
	opacity:1;
	top:15%;
    background-image: url(img/logo.svg);
    background-repeat: no-repeat;
    background-position: center top;
	animation: scaleIn 300ms 100ms ease-in-out forwards;
	transition: all 300ms ease;
	z-index: 7;
}
#logoSmall{
	scale:0;
	position: fixed;
    width: 100%;
	opacity:1;
    background-image: url(img/logo.svg);
    background-repeat: no-repeat;
    background-position: center top;
	animation: scaleIn 300ms 100ms ease-in-out forwards;
	transition: all 300ms ease;
	z-index: 7;
	height:15%;
	top:5%;
}
#signature{
	scale:0;
	position: fixed;
    height: 15%;
	top:70%;
    width: 100%;
    background-image: url(img/signature.svg);
    background-position: center bottom;
    background-repeat: no-repeat;
	animation: scaleIn 300ms 200ms ease-in-out forwards;
	transition: opacity 300ms ease;
	opacity:1;
}
#wordmark{
	position: fixed;
	opacity: 1;
	scale:0;
	animation: scaleIn 300ms 200ms ease-in-out forwards;
    height: 30%;
    top: 35%;
    width: 100%;
    background-image: url(img/wordmark.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
	transition: opacity 500ms ease;
}
img{
	max-width:100%;
	height: auto;
}
main img{
	float: left;
	margin:10px;
}
#branding.small > #signature{
	opacity:0;
	transition: opacity 300ms ease;
}
#branding.small > #wordmark{
	transition: all 500ms ease;
	opacity:0;
	//animation-iteration-count: revert;
	//animation: fadeIn 1s reverse ease backwards;
}
#branding.small > a #logo{
	transition: all 300ms ease;
	height:15%;
	top:5%;
}
#menuOpen{
    width: 400px;
    height: 400px;
    top: 0;
    right: 0;
    position: fixed;
    background-image: url(img/menuSlpat.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 200% 171%;
    background-clip: content-box;
	opacity: 0;
	scale:0;
	animation: fadeIn 200ms 200ms ease-in-out forwards, scaleIn 300ms 200ms ease-in-out forwards;
	z-index: 20;
}
.menuRat{
	transform-origin: center;
	position: relative;
    width: 50%;
    height: 50%;
	left:45%;
	top:20%;
    background-image: url(img/menuRat.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
	cursor: pointer;
	transition: scale 100ms ease-out;
	scale:1;
}
.menuRat.close{
	position: relative;
    width: 50%;
    height: 50%;
	left:45%;
	top:20%;
    background-image: url(img/menuRat.svg);
    background-repeat: no-repeat;
    background-size: cover;
	cursor: pointer;
	background-position: right center;
}
.menuRat:hover{
	transition: scale 100ms ease-out;
	scale:1.05;
}
#navBG{
	transition: scale 300ms ease-out;
	width:100vw;
	height:100vw;
	transform-origin: 94% 9%;
	position: fixed;
	top:-10%;
	left:0;
	background-color: #aa01f7;
	scale:0;
 	z-index: 10;
	border-radius: 50%;
}
#navBG.open{
	transition: border-radius 400ms ease-out,scale 400ms ease-out;
	scale:1;
	border-radius: 0;
}
#nav.open{
	transition: opacity .3s 200ms ease, display .3s 200ms ease allow-discrete;
	opacity: 1;
	display: block;
}
#nav{
    transition: opacity .1s  ease, display .3s  ease allow-discrete;
    opacity: 0;
    display: none;
    padding: 50px 0 0 50px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    color: #FFF;
    font-family: "TBold";
    font-size: 3em;
    line-height: 1.4em;
    text-transform: uppercase;
    background-image: url(img/menuBG.svg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
	z-index: 1000;
}

#menuClose{
	width: 400px;
    height: 400px;
    top: 0;
    right: 0;
    position: fixed;
    background-image: url(img/menuSlpatClose.svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 200% 171%;
    background-clip: content-box;
}
nav ul li, nav ul{
	list-style-type: none;
	margin:0;
	padding:0;
}
nav ul li a{
	color:#fff;
	text-decoration: none;
	transition: color 200ms ease-out;
}
nav ul li a:hover{
	transition: color 200ms ease-out;
	color:#000;
}
main{
    display: flex;
    flex-direction: column;
    color: #E9E9E9;
    font-family: 'SE';
    width: 70%;
    margin: 0 auto;
}
main>p{
	align-self: flex-end;
	width:70%;
	z-index: 5;
	font-size: 1.2em;
	line-height: 1.9em;
}
p.left{
	align-self: flex-start;
	position: relative;
	left:0;
}
p a{
	text-decoration: underline;
	//color: #aa01f7;
	color:#E9E9E9;
}
h1{
	font-family: 'TBold';
	font-size: 5em;
	font-weight: normal;
	text-transform: uppercase;
	color:#E9E9E9;
	z-index: 3;
}
h1::before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 500px;
    top: 0px;
	margin-left: -150px;
    z-index: -1;
    background-image: url(img/headlineBG.svg);
    background-position: left top;
    background-size: contain;
    background-repeat: no-repeat;
}
h2,h3,h4{
	font-size:35px;
	font-weight: normal;
	font-family: "IL";
	color:#FFF;
	transform-origin: center;
	transform: rotate(-7deg);
}
h2 bold, h2 strong,h3 bold, h3 strong,h4 bold, h4 strong{
	font-size:35px;
	font-weight: normal;
	font-family: "IL";
	color: #aa01f7;
}
#headImage>img{
	width:100%;
	height:auto;
	margin-top:-30%;
	-webkit-mask-image: url("img/headImageMask.svg");
  	mask-image: url("img/headImageMask.svg");
  	mask-repeat: no-repeat;
}

/*img.drop{
	width:100%;
	height:auto;
	margin-top:-30%;
}*/
.imgMask{
	-webkit-mask-image: url("img/imgMask2.svg");
  	mask-image: url("img/imgMask2.svg");
  	mask-repeat: no-repeat;
}
.inFront{
	z-index:5;
}
blockquote{
	align-self: center;
	font-family: 'TBold';
	font-size: 4.2em;
	line-height: 1.2em;
	z-index: 3;
	width:50%;
	margin-left: 25%;
	text-transform: uppercase;
}
blockquote::before {
    content: " ";
    position: absolute;
    width: 70%;
    height: 1000px;
	margin-left: -35%;
    z-index: -1;
    background-image: url(img/quoteBG1.svg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}
footer{
    width: 100%;
    min-height: 100px;
	padding-left:15%;
	background-color: #aa01f7;
}

footer > nav ul li a {
	font-family: 'TBold';
	letter-spacing: 0.03em;
	font-size: 1.5em;
	margin-right: 30px;
	float:left;
	text-transform: uppercase;
}


@media screen and (max-width: 500px) {
	#wordmark{
		width: 90%;
		left:5%;
	}
	#navBG{
		height:100vh;
		top:0;
	}
	#menuOpen, #menuClose{
		width: 200px;
		height: 200px;
	}
	#nav{
		padding: 50px 0 0 50px;
		font-size: 2em;
		line-height: 1.4em;
	}
	#nav ul li a{
		position: relative;
		z-index: 100;
	}
	#logoSmall, #branding.small > a #logo{
		background-position: 10% top;
	}
	blockquote{
		width:100%;
		font-size: 3em;
		line-height: 1.2em;
	}
	blockquote::before {
		width: 100%;
		height: 1000px;
		margin-left: -30%;
		margin-top: -50%;
	}
	img.imgMask{
		max-width:150%;
		width:200%!important;
		margin-left: -20%;
	}
	main{
		width:80%;
	}
	main img{
		margin:0;
	}
	main>p{
		width:100%;
		z-index: 5;
		font-size: 1em;
		line-height: 1.9em;
	}
	h1{
		font-size: 3.5em;
	}
	h1::before {
		background-position: left center;
	}
	#headImage>img{
		width:200%;
		max-width:200%;
		margin-top:-80%;
		margin-left: -20%;
	}
	h2,h3,h4,h2 bold, h2 strong,h3 bold, h3 strong,h4 bold, h4 strong{
		font-size:22px;
	}
}