/* STYLESHEET */
/* PAGE: Hfbk */
/* AUTHOR: hyperstud.io */


@font-face {
    font-family: 'polder_grotesk';
    src: url('../fonts/poldergroteskbeta03.eot');
    src: url('../fonts/poldergroteskbeta03.eot?#iefix') format('embedded-opentype'),
         url('../fonts/poldergroteskbeta03.woff2') format('woff2'),
         url('../fonts/poldergroteskbeta03.woff') format('woff'),
         url('../fonts/poldergroteskbeta03.ttf') format('truetype'),
         url('../fonts/poldergroteskbeta03.svg#polder_grotesk_beta_03regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
	font-family: 'PolderArrows';
	src:url('../fonts/PolderArrows.eot?-2eluj2');
	src:url('../fonts/PolderArrows.eot?#iefix-2eluj2') format('embedded-opentype'),
		url('../fonts/PolderArrows.woff?-2eluj2') format('woff'),
		url('../fonts/PolderArrows.ttf?-2eluj2') format('truetype'),
		url('../fonts/PolderArrows.svg?-2eluj2#PolderArrows') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="polder-"], [class*=" polder-"] {
	font-family: 'PolderArrows';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.polder-arrow_down:before {
	content: "\e100";
}

.polder-arrow_left:before {
	content: "\e101";
}

.polder-arrow_right:before {
	content: "\e102";
}

.polder-arrow_up:before {
	content: "\e103";
}





.polder-arrow_down, .polder-arrow_left, .polder-arrow_right, .polder-arrow_up{
	font-size:14px;
	margin-top:2px;
}



i{
	-webkit-transition: -webkit-transform 0.2s ease-out;
	-moz-transition:    -moz-transform 0.2s ease-out;
	-o-transition:      -o-transform 0.2s ease-out;
	-ms-transition:     -ms-transform 0.2s ease-out;
	transition:         transform 0.2s ease-out;
}













html, body{
	margin:0;
	padding:0;
	font-family: 'polder_grotesk', Helvetica, Arial, Sans-serif;
	color:#111;
	font-size:16px;
	width:100%;
	min-width:100%;
	min-height:100%;
	overflow-x:hidden;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
}


html, body, h1, h2, h3, h4, p, span, a, div, img{
    /*-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
}


a, a:focus, a:visited, img{
    outline:none;
    border:none;
}

a, a:visited{
	text-decoration: none;
}


a, h1, h2, h3, h4, h5, p, span{
	color:#111;
}




h2{
	margin-bottom:30px;
}

h3{
	display:inline-block;
}

#veranstaltungen h2{
	margin-bottom:60px;
}


.btn{
	display:inline-block;
	margin-top:20px;
	cursor:pointer;
}


b, strong{
	border-bottom:2px solid #111;
}


p{
	line-height:1.3em;
}



/* Structure */


#left, #right{
	position:fixed;
	top:0;
	width:50%;
    height: 100%;
    overflow: hidden;
    background:#fff;
    display:none;
    z-index:5;
}

#left{
	left:-50%;
	border-right:2px solid #111;
	margin-left:-2px;
}

#right{
	right:-50%;
	border-left:2px solid #111;
	margin-right:-2px;
}




.content{
    position: absolute;
    top: 58px;
    bottom: 0;
    left: 0;
    right: 0px; /* Increase this value (in negative) for cross-browser compatibility*/
    overflow-x:hidden;
    overflow-y:scroll;
    text-align:left;

    overflow: -moz-scrollbars-vertical;

}

#left .content{
	direction: rtl;
}


.content::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
.content::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}




.header{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	background:#fff;
	border-bottom:2px solid #111;
	z-index:10;
}

.arrow-back{
	position:absolute;
	top:0;
	
	padding:20px 15px 20px 15px;

	display:none;
	cursor:pointer;
}

#left .arrow-back{
	right:0;
}

#right .arrow-back{
	left:0;
}


.menu{
	display:block;
	width:100%;
	text-align:center;
	margin-top:20px;
	margin-bottom:20px;
}

.menu a{
	margin-right:10px;
}


.selected{
	border-top:2px solid #111 !important;
}



#language{
	position:absolute;
	right:50px;
	top:20px;
}











.box{
	display:block;
	width:100%;
	border-bottom:2px solid #111;
}

.padding{
	padding:50px;
}





/* Components */

.dropdown{
	display:inline-block;
	width:100%;
	height:auto;
	border-bottom:2px solid #111;
	direction: ltr;
}

.dropdown-title{
	padding:10px 0 10px 0;
	cursor:pointer;
	position: relative;
	line-height:1.3em;
}

.dropdown-title span{
	display:inline-block;
	vertical-align: top;
}

.dropdown-title-date{
	width:27%;
	word-wrap: break-word;
	word-break: break-all;
}

.dropdown-title-title{
	width:70%;
}

.dropdown-title i{
	position:absolute;
	top:12px;
	right:0;
}

.dropdown-inside{
	padding:0 0 30px 0;
	display:none;
	overflow: hidden;
	width:100%;
	min-width:100%;
}

.dropdown-inside p{
	padding-top:20px;
}

.rotate{
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}



#klasse .dropdown-title i{


	margin-top:3px;
}







/* Klasse */

.dropdown-footer{
	display:block;
	position:relative;
	margin-top:20px;
}

.subtitle, .infografik, #btn-metaballs{
	display:inline-block;
	cursor:pointer;
}

.infografik, #btn-metaballs{
	margin-top:20px;
}

.subtitle i, .bilder i{
	margin-left:10px;
}

.subtext{
	display:none;
	width:100%;
	min-width: 100%;
}

.subtext p{
	padding-top:20px;
}

.bilder{
	display:inline-block;
	position: absolute;
	top:0;
	right:0;
	cursor: pointer;
}


/* Grafik */



.table{
	display:table;
	width:100%;
	border-collapse: collapse;
}

.table-row{
	display:table-row;
}

.table-cell{
	display:table-cell;
	vertical-align: middle;
	padding:10px 0 10px;
	direction: ltr;
}



.table-row{
	border-bottom:2px solid #111;
	position:relative;
}

.last-child{
	border-bottom:inherit;
}


#grafik-header{
	position:relative;
	background:#fff;
	z-index:6;
	direction: ltr;
}



.grafik-jahr, .grafik-titel{
	border-right:2px solid #111;
}

.grafik-jahr{
	padding-right:20px;
}

.grafik-titel, .grafik-grafik{
	padding-left:20px;
	padding-right:20px;
}

.grafik-jahr{
	width:16%;
	word-wrap: break-word;
	word-break: break-all;
}

.grafik-titel{
	width:42%;
}

.grafik-grafik{
	width:42%;
}

.portfolio-hover{
	display:block;
	cursor:pointer;
	padding-top:0px;
	padding-bottom:0px;
	margin:0;
	position:relative;
	margin-top:-2px;
	background:url(../img/trans.png);
}

.portfolio-hover i{
	position:absolute;
	bottom:12px;
	right:10px;
	opacity:1;
	filter:alpha(opacity=1);
}


/* Lehre */

#lehre .table-row{
	border-bottom:inherit;
}

#lehre .table-cell{
	vertical-align: top;
}

.lehre-n{
	width:7%;
}

.lehre-text{
	width:93%;

}




/* Veranstaltungen */

.table-v{
	display:inline-block;
	width:100%;
}

.table-v li{
	float:left;
}

.table-header{

}

.table-v-cell{
	border-bottom:2px solid #111;
	padding:20px;
	position: relative;
}


.veranstaltung-category{
	width:12%;
}

.veranstaltung-category .table-v-cell{
	padding-left:inherit;
}



.veranstaltung-title{
	width:36%;
}


.veranstaltung-text{
	width:49%;
}


.veranstaltung-title{
	border-left:2px solid #111;
	border-right:2px solid #111;
}

.veranstaltung-title p{
	display: block;
	margin-right: 10px;
}

.veranstaltung-title p, .veranstaltung-category h3{
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;	
}


.no-border{
	border:none;
}

.no-border-bottom{
	border-bottom:inherit;
}

.border-top{
	border-top:2px solid #111;
}

.ulfix{
	margin-top:-2px;
}


.veranstaltung-hover{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	cursor:pointer;
	background:url(../img/trans.png);
}

.veranstaltung-hover i{
	position: absolute;
	bottom:20px;
	right:10px;
}








/* Metaballs */

#metaballs{
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	margin:auto;
}

#metaballs-parent{
	display:block;
	height:100%;
	margin-left:50px;
	margin-right:50px;
	position:relative;
}

#metaballs-canvas{
	display:block;
	width:100%;
	height:100%;

}


#metaballs-hover{
	position:absolute;
	left:0;
	right:0;
	top:0;
	width:100%;
	height:100%;
}


.metaball{
	position:absolute;
	width:8%;
	height:auto;
	border-radius:50%;
	overflow: hidden;
}

.metaball img{
	width:100%;
	height:auto;
}

.metaball-text{
	position:absolute;
	top:0;	
	left:0;
	width:100%;
	height:100%;
}

.metaball-table{
	display:table;
	width:100%;
	height:100%;
}

.metaball-cell{
	display:table-cell;
	vertical-align: middle;
	width:100%;
	height:100%;
}

.metaball-inside{
	display:inline-block;
	color:#fff;
	font-size:1em;
	line-height:1.3em;
	text-align:center;
	width:100%;
	min-width:100%;
}


#metaballs-cursor{
	position:absolute;
	width:13.7%;
	height:auto;
	overflow:hidden;
	cursor: none;

	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);

}

#metaballs-cursor-hover{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#metaballs-cursor img{
	width:100%;
	height:auto;
}

#metaballs-cursor .table{
	width:100%;
	height:100%;
}

#metaballs-cursor p{
	color:#fff;
	font-size:1em;
	background:#000;
	text-align:center;
}












/* Blog */

#blog{
	display:block;
	min-height:100%;
	font-size:0;
	margin-left:60px;
	margin-right:60px;
	padding-top:10px;

	display:none;
}

#blog-content{
	display:block;
	width:100%;
	height:auto;
}

#blog .entry{
	width:33.33%;
	display:inline-block;
	vertical-align: top;
	position:relative;
}

#blog .entry .padding{
	position:relative;
	padding:10px;
}

#blog .entry img{
	width:100%;
	height:auto;
}

#blog .entry.invisible{
	opacity:0 !important;
}

#blog .blog-date{
	display:block;
	width:100%;
	position:absolute;
	bottom:7%;
	text-align:center;
	color:#fff;
	font-size:16px;
}

#blog .preloader{
	display:block;
	text-align:center;
	padding:60px 0 60px 0;
}







/* projekte */

#projekte{
	display:block;
	width:100%;
	min-height:100%;
	text-align: center;
	position: relative;
	display:none;
}


.projekte-container{
	display:block;
	width:100%;
	min-height:100%;
}


#photos-wrapper{
	display:inline-block;
	width:auto;
	min-height:100%;
	margin-top:-8px;
}

#photos{
	display:inline-block;
	overflow:hidden;
	position: relative;
	margin-top:50px;

	/* Safari Fix: */
	width:100%;
}

#photo-dummy{

	/* Safari Fix: */
	height:100%;
}

#photos-container{
	position:absolute;
	top:0;
	left:0;
	display:inline-block;
	width:100%;
	height:100%;

}

#photos img{
	display:block;
	width:auto;
	height:100%;
	min-height:100%;
}


#photos-container img{
	/*float:left;*/
}

.info{
	display:block;
	width:auto;
	height:auto;
	text-align:left;
	padding:10px 0 10px 0;
	border-bottom:1px solid #111;
}



#photos-info{
	display:block;
	position: relative;
	margin-top:10px;
	height:40px;
	padding-bottom: 10px;
}

#photos-info h4{
	display: block;
	margin-right: 150px;
	margin-left: 150px;
	line-height: 1.3em;
	position:relative;
	top:-2px;
}


#previous, #next{
	display:inline-block;
	position:absolute;
	top:0;	
	cursor:pointer;
}


#previous{
	left:0;
}

#next{
	top:0;
	right:0;
}

#previous span{
	margin-left:10px;
	display:inline-block;
	vertical-align: top;
}

#next span{
	margin-right:10px;
	display:inline-block;
	vertical-align: top;	
}






/* projekte share */

#share{
	position:absolute;
	top:0px;
	left:0px;
	padding:25px;
	cursor:pointer;
	display:none;
	z-index:3;
}

#share div{
	vertical-align: top;
	white-space: nowrap;
}

#share-title{
	display:inline-block;
	color:#fff;
}

#share-content{
	display:none;
}

#share-content a, #share-content a:visited, #share-content span{
	color:#fff;
	margin-left:15px;
}

#share-content a, #share-content span{
	display:inline-block;
	vertical-align: top;
}





/* projekte thumbnails */

#thumbnails{
	display:inline-block;
	vertical-align: top;
	padding-bottom:30px;
}

.thumbnail{	
	float:left;
	width:31.8%;
	height:auto;
	margin: 0px 2.3% 2% 0px;
	position: relative;
	overflow: hidden;
	cursor:pointer;
}

.thumbnail img{
	display:block;
	width:100%;
	height:auto;
	position:relative;
}

.thumbnail-content{
	position:absolute;
	top:0;
	left:0;
	width:100%;

}

.thumbnail-title{
	display:block;
	height:auto;
	background:#fff;
	padding:8px 0 8px 0;
	border-bottom:1px solid #111;
}



.no-margin-right{
	margin-right:inherit !important;
}

#photo-up, #photo-down{
	position:absolute;
	left:0;
	width:100%;
	height:50%;
	cursor:none;
	background:url(../img/trans.png);
	z-index: 2;
}

#photo-up{
	top:0;
}

#photo-down{
	top:50%;
}


#mouse{
	position:absolute;
	top:0;
	left:0;
	cursor:none;
	pointer-events: none;
	transform:translate(-50%,-50%);
	text-shadow:1px 1px 0px #fff;

	display:none;
}

#mouse i{
	display:block;
	text-align:center;
	font-size:24px;
	margin:10px 0 10px 0;
}

#mouse span{
	display:block;
	text-align:center;
	font-size:24px;
}


/* Infografik */

#infografik{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	text-align: center;
	overflow:hidden;

	display:none;
	cursor:pointer;
}


#infografik-inside{
	position:absolute;
	width:700px;
	height:700px;
	top:0;
	left:0;
	right:0;
	bottom:0;
	margin:auto;
	/*overflow:hidden;*/
}

.infografik-center{
	width:700px !important;
	height:700px !important;
	top:0 !important;
	left:0 !important;
	right:0 !important;
	bottom:0 !important;
	margin:auto !important;	


    -webkit-transition: all 0.8s ease-out;
    -moz-transition: all 0.8s ease-out;
    -ms-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;

}


.circle{
	display:table;
	margin:0 auto;
	width:90px;
	height:90px;
	background:#111;
	border-radius:50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;

	position:absolute;
	top:50%;
	left:50%;
	margin-top:-45px;
	margin-left:-45px;
}

.circle-cell{
	display:table-cell;
	width:90px;
	height:90px;
	vertical-align: middle;
}

.circle .text{
	display:inline-block;
	color:#fff;
	font-size:12px;
	line-height:1.3em;
}

.circle-big{
	width:180px;
	height:180px;
}

.circle-big .circle-cell{
	width:180px;
	height:180px;
}

.circle-animation{
    -webkit-transition: all 0.8s ease-in-out;
    -moz-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}


/* Studenten */

#studenten{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	text-align: center;
	overflow:hidden;
	background:#000;

	display:none;

}

#studenten-scroll{

	position: absolute;
	width: 80%;
	height: 100%;
	bottom: 0px;
	left: 0;
	right: 0;
	margin:0 auto;
	overflow: hidden;

	
	-webkit-transform-origin: 50% 100%;
	-moz-transform-origin: 50% 100%;
	-ms-transform-origin: 50% 100%;
	-o-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
	-webkit-transform: perspective(45em) rotateX(20deg);
	-moz-transform: perspective(45em) rotateX(20deg);
	-ms-transform: perspective(45em) rotateX(20deg);
	-o-transform: perspective(45em) rotateX(20deg);
	transform: perspective(45em) rotateX(20deg);

}

.scroll-text span {
	margin: 0 35px
}

#studenten-scroll:after
{
	
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;

	background-image: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: -o-linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;


}



#studenten-scroll-inside{

	position: absolute;
	display:block;
	width:100%;
	height:auto;
	top: 100%;

}


#studenten-scroll-inside p{
	font-size:1em;
}


/* animation */


#studenten-scroll-inside span{
	color:#fff;
	line-height:1.6em;
}

#studenten-scroll-inside span a, #studenten-scroll-inside span a:visited{
	color:#fff;
}

#studenten-scroll-inside span a:hover{
	border-bottom:2px solid #fff;
}









#hfbk{
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	text-align:center;
	height:60px;
	margin-top:-30px;

	display:none;
}

#hfbk h1{
	font-size:60px;
	letter-spacing:0.2em;
}

#hfbk img{
	width:auto;
	height:100%;
}



#intro{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	text-align:center;
}

#intro-top{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:50%;
}

#intro-bottom{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:50%;
}

#intro img{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	margin:0 auto;

	height:90%;
	width:auto;
}

#intro-bottom img{
	top:0;
	left:0;
	right:0;
	bottom:inherit;
}


.intro-ratio{
	width:90% !important;
	height:auto !important;
}








/* Kontakt */

#kontakt{
	position:relative;
}


#btn-impressum{
	display:inline-block;
	float:right;
	margin-top:-18px;
}

#btn-impressum i{
	float:right;
	margin-left:10px;
	position:relative;
	top:-1px;
}

#impressum{
	margin-top:30px;
	width:100%;
	min-width:100%;
	display:none;

}


/* General */

#info{
	position:fixed;
	top:0;
	left:0;
	padding:20px;
	display:inline-block;
	color:#fff;
	background:blue;
	z-index:999;
	display:none;
}


.hidden{
	opacity:0 !important;
	filter:alpha(opacity=0) !important;
}


.mobile-only{
	display:none;
}

.desktop-only{
	display:inline-block;
}










/* Mobile */

#mobile{
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	background:#fff;
	z-index: -1;
	display:none;
	overflow:hidden;
}

#mobile .content{
	top:0;
}

#mobile-menu{
	display:block;
}

#mobile-menu .left, #mobile-menu .right{
	display:inline-block;
	vertical-align: top;
	width:50%;
}

#mobile-menu a{
	display:block;
	/*margin-left:20px;*/
	margin-right:20px;
	padding:10px 0 10px 0;
	border-bottom:2px solid #111;
}

#mobile-menu .right a{
	margin-right:0px;
}

#mobile-content{
	display:block;
	margin-top:30px;
}





.header-mobile{
	position:absolute;
	top:0;
	left:0;
	display:block;
	width:100%;
	height:45px;
	background:#fff;
	border-bottom:2px solid #111;
	z-index:10;	
	cursor:pointer;
	display:none;
}

.header-mobile .mobile-back, #studenten .mobile-back{
	position:absolute;
	top:15px;
}

#left .header-mobile .mobile-back, #studenten .header-mobile .mobile-back{
	right:20px;
}

#right .header-mobile .mobile-back{
	left:20px;
}

.header-mobile h2, #studenten .header-mobile h2{
	position:absolute;
	top:15px;
	text-transform: capitalize;
}

#left .header-mobile h2, #studenten .header-mobile h2{
	left:20px;
}

#right .header-mobile h2{
	right:20px;
}




.viewer{
	width:100%;
	height:auto;
	display:none;
	margin-top:0px;
	position:relative;
	overflow: hidden;
}

.viewer-dummy{
	width:100%;
	height:auto;
}

.viewer-content{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:auto;
	font-size:0;
	white-space: nowrap;
	direction: ltr;
}

.viewer-content img{
	width:100%;
	height:auto;
	display:inline-block;
	vertical-align: top;
}

.viewer-left, .viewer-right{
	position:absolute;
	top:0;	
	width:50%;
	height:100%;
	cursor:pointer;
	background:url(../img/trans.png);
}

.viewer-left{
	left:0;
}

.viewer-right{
	left:50%;
}

.viewer-paginator, .viewer-title{
	display:block;
	text-align:right;
	margin-top:10px;
}


#portfolio .info{
	border-bottom:inherit;
	margin-top:-30px;
}

.portfolio-mobile, .klasse-mobile{
	display:none;
	min-width:100%;
	width:100%;
}

.portfolio-hover .polder-arrow_down{
	position:absolute;
	top:14px;
	right:0px;
}

.klasse-mobile{
	margin-top:20px;
}

#klasse .viewer{
	display:block;
}

#klasse .viewer-paginator, .viewer-title{
	text-align:center;
}

.noborder{
	border:none !important;
}




@media (max-width:980px){


	#left, #right, #mobile{
		overflow-x: hidden;
		overflow-y: scroll;
	}

	#left, #right{
		top:0px;
		height:100%;
	}

	#left{
		border-right:inherit;
	}

	#right{
		border-left:inherit;
	}

	.content{
		top:48px;
	}

	.padding{
		padding: 10px 20px 20px 20px;
	}	


	#intro-top, #intro-bottom{
		left:0;
		top:0;
		bottom:inherit;
		height:100%;
	}

	#intro img, #intro-bottom img{
		top:0;
		left:0;
		bottom:inherit;
		height:100%;
	}

	#intro-top, #intro-bottom{
		left:100%;
	}







	.mobile-only{
		display:inline-block;
	}

	.desktop-only{
		display:none !important;
	}

	#mobile{
		display:block;
	}



	#blog{
		margin-left:0;
		margin-right:0;
	}

	#blog .entry{
		width:100%;
		margin-bottom:10px;
	}

	#blog .entry .padding{
		padding:0;
	}

	#left{
		width:100%;
		left:-100%;
	}

	#right{
		width:100%;
		right:-100%;
	}

	.header{
		display:none;
	}

	.header-mobile{
		display:block;
	}

	.box{
		border-bottom:inherit;
		direction: ltr;
	}

	.infografik, #btn-metaballs{
		display:none;
	}

	/* Klasse */

	.klasse-mobile{
		display:block;
	}

	.dropdown-title-date{
		display:block;
		width:100%;
	}

	.dropdown-title-title{
		display:block;
		width:100%;
	}

	#studium .dropdown i{
		top:10px;
	}





	.bilder{
		display:none;
	}





	/* Portfolio */

	.grafik-jahr, #grafik-header{
		display:none;
	}

	.grafik-titel, .grafik-grafik {
    	width: 100%;
    	display: block;
    	padding-left:inherit;
    	border-right:inherit;

	}

	.grafik-titel p{
		margin-right:20px;
	}

	.grafik-grafik p{
		padding-left:30px;
	}

	.table-cell{
		padding:inherit;
	}

	.portfolio-hover{
		padding: 10px 0 10px 0;
	}



	/* Studenten */


	/* Lehre */

	#lehre .padding, #veranstaltungen .padding{
		padding:inherit;
	}

	#lehre h2, #veranstaltungen h2{
		display:none;
	}





	/* Kontakt */

	#kontakt .padding{
		padding-top:30px;
	}

	#kontakt h2{
		display:none;
	}

	#portfolio .viewer{
		display:block;
	}

	#kontakt .dropdown{
		margin-top:20px;
	}




}















/* Preloader */

#floatingCirclesG{
	display:inline-block;
	position:relative;
	width:32px;
	height:32px;
	-moz-transform:scale(0.6);
	-webkit-transform:scale(0.6);
	-ms-transform:scale(0.6);
	-o-transform:scale(0.6);
	transform:scale(0.6);



}

.f_circleG{
	position:absolute;
	background-color:#FFFFFF;
	height:6px;
	width:6px;
	-moz-border-radius:3px;
	-moz-animation-name:f_fadeG;
	-moz-animation-duration:1.04s;
	-moz-animation-iteration-count:infinite;
	-moz-animation-direction:linear;
	-webkit-border-radius:3px;
	-webkit-animation-name:f_fadeG;
	-webkit-animation-duration:1.04s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-direction:linear;
	-ms-border-radius:3px;
	-ms-animation-name:f_fadeG;
	-ms-animation-duration:1.04s;
	-ms-animation-iteration-count:infinite;
	-ms-animation-direction:linear;
	-o-border-radius:3px;
	-o-animation-name:f_fadeG;
	-o-animation-duration:1.04s;
	-o-animation-iteration-count:infinite;
	-o-animation-direction:linear;
	border-radius:3px;
	animation-name:f_fadeG;
	animation-duration:1.04s;
	animation-iteration-count:infinite;
	animation-direction:linear;
}

#frotateG_01{
	left:0;
	top:13px;
	-moz-animation-delay:0.39s;
	-webkit-animation-delay:0.39s;
	-ms-animation-delay:0.39s;
	-o-animation-delay:0.39s;
	animation-delay:0.39s;
}

#frotateG_02{
	left:4px;
	top:4px;
	-moz-animation-delay:0.52s;
	-webkit-animation-delay:0.52s;
	-ms-animation-delay:0.52s;
	-o-animation-delay:0.52s;
	animation-delay:0.52s;
}

#frotateG_03{
	left:13px;
	top:0;
	-moz-animation-delay:0.65s;
	-webkit-animation-delay:0.65s;
	-ms-animation-delay:0.65s;
	-o-animation-delay:0.65s;
	animation-delay:0.65s;
}

#frotateG_04{
	right:4px;
	top:4px;
	-moz-animation-delay:0.78s;
	-webkit-animation-delay:0.78s;
	-ms-animation-delay:0.78s;
	-o-animation-delay:0.78s;
	animation-delay:0.78s;
}

#frotateG_05{
	right:0;
	top:13px;
	-moz-animation-delay:0.91s;
	-webkit-animation-delay:0.91s;
	-ms-animation-delay:0.91s;
	-o-animation-delay:0.91s;
	animation-delay:0.91s;
}

#frotateG_06{
	right:4px;
	bottom:4px;
	-moz-animation-delay:1.04s;
	-webkit-animation-delay:1.04s;
	-ms-animation-delay:1.04s;
	-o-animation-delay:1.04s;
	animation-delay:1.04s;
}

#frotateG_07{
	left:13px;
	bottom:0;
	-moz-animation-delay:1.17s;
	-webkit-animation-delay:1.17s;
	-ms-animation-delay:1.17s;
	-o-animation-delay:1.17s;
	animation-delay:1.17s;
}

#frotateG_08{
	left:4px;
	bottom:4px;
	-moz-animation-delay:1.3s;
	-webkit-animation-delay:1.3s;
	-ms-animation-delay:1.3s;
	-o-animation-delay:1.3s;
	animation-delay:1.3s;
}

@-moz-keyframes f_fadeG{
	0%{
	background-color:#000000}

	100%{
	background-color:#FFFFFF}

}

@-webkit-keyframes f_fadeG{
	0%{
	background-color:#000000}

	100%{
	background-color:#FFFFFF}

}

@-ms-keyframes f_fadeG{
	0%{
	background-color:#000000}

	100%{
	background-color:#FFFFFF}

}

@-o-keyframes f_fadeG{
	0%{
	background-color:#000000}

	100%{
	background-color:#FFFFFF}

}

@keyframes f_fadeG{
	0%{
	background-color:#000000}

	100%{
	background-color:#FFFFFF}

}