@font-face {
    font-family: 'HelveticaNeue';
    src: local('HelveticaNeue Thin'), local('HelveticaNeueThin'),
        url('media/files/fonts/HelveticaNeueThin.woff2') format('woff2'),
        url('media/files/fonts/HelveticaNeueThin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
}
@font-face {
    font-family: 'HelveticaNeue';
    src: local('HelveticaNeue Light'), local('HelveticaNeueLight'),
        url('media/files/fonts/HelveticaNeueLight.woff2') format('woff2'),
        url('media/files/fonts/HelveticaNeueLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'HelveticaNeue';
    src: local('HelveticaNeue Bold'), local('HelveticaNeueBold'),
        url('media/files/fonts/HelveticaNeueBold.woff2') format('woff2'),
        url('media/files/fonts/HelveticaNeueBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'HelveticaNeue';
    src: local('HelveticaNeue Heavy'), local('HelveticaNeueHeavy'),
        url('media/files/fonts/HelveticaNeueHeavy.woff2') format('woff2'),
        url('media/files/fonts/HelveticaNeueHeavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'AlwaysForever';
    src: url('media/files/fonts/AlwaysForever.woff2') format('woff2'),
        url('media/files/fonts/AlwaysForever.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AlwaysForever';
    src: url('media/files/fonts/AlwaysForever-Bold.woff2') format('woff2'),
        url('media/files/fonts/AlwaysForever-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


/* Allgemein */
.mobile {
		display: none;
	}
body {
    margin: 0;
    padding: 0;
    font-family: 'HelveticaNeue';
    font-weight: 100;
    font-size: 2.4vw;
    text-rendering: optimizeLegibility;
    text-rendering: geometricPrecision;
}
img {
	max-width: 100%;
	border: 0;
	height: auto;	
	
}
p, ul {
    margin-bottom: 15px;
    margin-top: 15px;
}
h1 {
    width: 100%;
    text-align: center;
    line-height: 0.6;
    font-weight: 900;
    font-size: 120px;
    letter-spacing: -4px;
    z-index: 99;
    margin: 0 0 12% 0;
}
h2 {
    font-size: 30px;
    margin-top: 50px;
    margin-bottom: 20px;
    font-weight: 600;
}
h3 {
    font-size: 22px;
    font-weight: 900;
}
a {
    text-decoration: none;
    color: #000;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}
a:hover {
	 text-decoration: none;
	 color: #FF00DE
}
a img {
	transition: transform .3s ease-out;
	will-change: transform;
}
a:hover img {
    transform: scale(1.1);
	will-change: transform;
}

/* ENDE Allgemein */

/* Logo */
.logo {
    color: #000;
    position: fixed;
    left: 3.5vw;
    top: 2.2vw;
    z-index: 9;
    font-weight: 900;
    letter-spacing: -0.1vw;
    font-size: 2.3vw;
    line-height: 1;
}
.logo:hover {
	color: #000;
}

/* Menu */
#navigation {
    width: 100%;
    height: 100%;
    overflow: visible;
    padding-top: 10%;
    display: block !important;
    position: fixed;
    background: rgba(255,255,255,1);
    z-index: 99999;
    right: 100%;
    top: 0;
    -moz-transition: right 0.3s;
    -webkit-transition: right 0.3s;
    transition: right 0.3s;
}
#navigation A {
    color: #000;
    padding: 0;
    width: 100%;
    display: block;
    text-align: left;
    line-height: 1;
    font-size: 8.5vw;
    font-weight: 900;
    letter-spacing: -7px;
    letter-spacing: -0.5vw;
}
#navigation A:hover, #navigation A.selected {
    color: #FF00DE;
}
.hamburger {
    display: block;
    position: fixed;
    width: 3vw;
    height: 3vw;
    right: 0;
    top: 0;
    cursor: pointer;
    padding: 0;
    /* background: #fff; */
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 9999;
    /* border-radius: 50%; */
    opacity: 1;
    transition: transform .6s ease-out 6s, top 0.6s ease-out;
    padding-top: 3vw;
    padding-right: 3.4vw;
}
.hamb_line {
    height: 3px;
    width: 3vw;
    border-radius: 3px;
    background: #000;
    margin-bottom: 0.6vw;
    float: right;
    transition: transform .3s ease-out, width .3s;
}
.hamb_line:last-child {
    width: 1.8vw;
}
.hamburger:hover .hamb_line:last-child {
    width: 3vw;
}
.active .hamb_line:first-child {
    transform: translateY(0.7vw) rotate(225deg);
}
.active .hamb_line:last-child {
    transform: translateY(0vw) rotate(-225deg);
    width: 3vw;
}

@media (hover: hover) {	
	.menu-toggle:hover .hamb_line:first-child {
		transform: rotate(180deg);
	}
	.menu-toggle:hover .hamb_line:nth-child(2) {
		transform: rotate(-180deg);
	}
	.menu-toggle:hover .hamb_line:last-child {
		transform: rotate(180deg);
	}

	.menu-toggle.active:hover .hamb_line:first-child {
		transform: translateY(0.5vw) rotate(405deg);
	}
	.menu-toggle.active:hover .hamb_line:nth-child(2) {
		transform: translateY(0vw) rotate(-405deg);
	}	
}

.menu {
    margin: 0;
    padding-left: 0;
    display: block !important;
    position: fixed;
    z-index: 9999;
    right: 0;
    top: 14vh;
    width: 60vw;
    transform: translateX(60vw);
    -moz-transition: transform .6s ease-out .2s;
    -webkit-transition: transform .6s ease-out .2s;
    transition: transform .6s ease-out .2s;
}
.active .menu {
    -moz-transition: width .8s cubic-bezier(.46,.05,.18,.99) .0s;
    -webkit-transition: width .8s cubic-bezier(.46,.05,.18,.99) .0s;
    transition: width .8s cubic-bezier(.46,.05,.18,.99) .0s;
	transform: translateX(0);
}
.hamburger:before {
    content: "";
    width: 100vw!important;
    height: 100vw!important;
    overflow: visible;
    display: block !important;
    position: absolute;
    background: #fff;
    right: -50vw;
    top: -50vw;
    border-radius: 50%;
    transform: scale(0);
    -moz-transition: transform .6s .2s;
    -webkit-transition: transform .6s .2s;
    transition: transform .6s .2s;
}
.active .hamburger:before {
    transform: scale(2.5);
    -moz-transition: transform .6s;
    -webkit-transition: transform .6s;
    transition: transform .6s;
}

.menu a {
    border-bottom: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(100vw);
    text-align: right;
    font-weight: 700;
    -moz-transition: transform .8s cubic-bezier(.46,.05,.18,.99), opacity .6s .2s;
    -webkit-transition: transform .8s cubic-bezier(.46,.05,.18,.99), opacity .6s .2s;
    transition: transform .8s cubic-bezier(.46,.05,.18,.99), opacity .6s .2s;
    float: none;
	float: left;
    position: relative;
    font-weight: 400;
}
.active .menu a {
    transform: translateX(0);
    opacity: 1;
}
.active .menu a:nth-child(2) {
    transition-delay: .05s;
}
.active .menu a:nth-child(3) {
    transition-delay: .15s;
}
.active .menu a:nth-child(4) {
    transition-delay: .2s;
}
.active .menu a:nth-child(5) {
    transition-delay: .25s;
}
/* ENDE Menu */


/* Home */
@keyframes zoomin {
   0%   { transform:rotate(-8deg) scale(0);}
   35%   { transform:rotate(-8deg) scale(1.2);}
   100%   { transform:rotate(-8deg) scale(1);}
}
@keyframes zoomout {
   0%   { transform:rotate(-8deg) scale(1);}
   100%   { transform:rotate(-8deg) scale(0);}
}
.infokreis {
    border-radius: 50%;
    background: rgba(255,147,0,.84);
    overflow: hidden;
    width: 32vw;
    height: 32vw;
    position: fixed;
    z-index: 99;
    left: 3.5vw;
    top: calc(38vh - 15vw);
    font-size: 4.5vw;
    line-height: 0.8;
    letter-spacing: 0.1vw;
    font-weight: normal;
    transition: transform .8s ease-in-out 0s;
    color: #fff;
    font-family: 'AlwaysForever';
}
.infokreis.start {
	animation: zoomin 2s ease-in-out;
}
.infokreis.shown {
	transform:rotate(-8deg) scale(0);
}
.infotext {
    position: absolute;
    left: 15%;
    top: 50%;
    transform: translateY(-50%);
    width: 75%;
}
.infokreis p {
    margin: 1.5vw 0;
}
.title {
    position: fixed;
    left: 50%;
    top: 50%;
    font-weight: 900;
    font-size: 14.5vw;
    z-index: -1;
    transform: translate(-50%, -58%);	
	transition: opacity .6s ease;
}

.pagecontent {
    width: 100%;
    margin: 60vh auto 60vh;
}
.pagecontent2 {
    margin: 20vh 15vw;
    width: 70vw;
}
.move {
    margin-left: 3.5vw;
	width: 93%;
	position: relative;
	opacity: 0;
	transition: opacity 1.5s ease-in;
}
.move.scroll {
	opacity: 1;
}
.pagecontent h1 {
}
.pagecontent2 p {
    font-weight: normal;
    font-size: 21px;
    line-height: 1.4;
}
.clear {
	 clear: both}		
.t-space {
    margin-left: -0.8vw;
}			
.e-space {
    margin-left: -0.8vw;
    margin-right: -0.8vw;
}

/* Home */
.row {
    width: 100%;
    display: block;
    clear: both;
    float: left;
    position: relative;
    text-transform: lowercase;
}
figure {
    margin: 0;
}
figure.right {
    float: right;
}
figure.left {
    float: left;
}
/* ENDE Home */	

/* About */
div.text {
    float: right;
    font-size: 2vw;
    line-height: 1.25;
    letter-spacing: 0.1vw;
}
div.right.text {
    float: right;
    width: 37.5vw;
}
div.left.text {
    float: left;
    margin-left: 6vw;
}
/* ENDE About */


/* Footer */
.footer {
    margin: 4vw 3.5vw;
    font-size: 1.4vw;
    text-transform: uppercase;
    float: right;
    max-width: 100vw;
}
.footer a {
    color: #000;
}
.footer a:hover {
    color: #FC05ED;
}
#inst-icon {
    width: 4%;
    margin: 2% 0.5% 0 0.5%;
	-moz-transition: transform 0.3s;
	-webkit-transition: transform 0.3s;
	transition: transform 0.3s
}
#inst-icon:hover {
	transform:scale(1.2);
}	
.mail {
    color: #fff;
    -moz-transition: font-size 0.3s;
    -webkit-transition: font-size 0.3s;
    transition: font-size 0.3s;
    line-height: 1.5;
}
.mail:hover {
	font-size: 110%;
}
/* ENDE Footer */	


/* Responsive */

@media only screen and (max-width:1920px) {	
	.footercontent, .footercontent_2 {
		font-size: 1.8vw;
	}
	h1 {
		font-size: 6.2vw;
		letter-spacing: -0.2vw;
	}
	h2 {
		font-size: 1.6vw;
	}
}	


@media only screen and (max-width:1280px) {	
	.pagecontent p {		
		font-size: 19px;
	}
}
@media only screen and (max-width:1024px) {		
	.footercontent {
		top: 49%;
	}
	.footercontent, .footercontent_2 {
		font-size: 27px;
	}
}

/* Mobile */
@media only screen and (max-width:768px) {
	.mobile {
		display: initial;
	}
	.desktop {
		display: none;
	}
	.logo {
		font-size: 8vw;
		line-height: 0.7;
	}
	#navigation {
		padding-top: 20%;
	}
	.hamburger {
		width: 10vw;
		height: 10vw;
		padding-top: 4vw;
		padding-right: 4vw;
	}
	.hamb_line {
		width: 10vw;
		height: 2px;
		margin-bottom: 2vw;
	}
	.hamb_line:last-child {
		width: 7vw;
	}
	.hamburger:hover .hamb_line:last-child, .active .hamb_line:last-child {
		width: 10vw;
	}	
	.active .hamb_line:first-child {
		transform: translateY(2.7vw) rotate(225deg);
	}
	.active .hamburger:before {
		transform: scale(4.5);
	}
	.menu {
		text-align: center;
		width: 100%;
		transform: translateX(100vw);
	}
	#navigation A {
		font-size: 18vw;
		text-align: center;
	}	
	.infokreis {
		width: 64vw;
		height: 64vw;
		top: calc(43vh - 65vw);
		font-size: 9.5vw;
		font-weight: bold;
	}
	.infotext {
		left: 13%;
		width: 78%;
	}
	.pagecontent {
		margin: 60vh auto 6vh;
		width: 90%;
		padding: 5%;
	}	
	.pagecontent2 {
		margin: 20vh 5vw 10vw;
		width: 90vw;
	}
	.pagecontent2 h1 {
		font-size: 8vw;
		text-align: left;
	}
	.pagecontent2 h2 {
		font-size: 19px;
	}
	.pagecontent2 p {
		font-size: 17px;	
	}
	.title {
		font-size: 24vw;
	}
	div.text {
		font-size: 19px;
	}
	div.right.text {
		float: right;
		width: 50vw;
	}

	div#footer {
		margin: 0 3.5vw 8vw 3.5vw;
		font-size: 16px;
		float: right;
	}
}