/* STYLESHEET */
/* PAGE: Gabischillig.de */
/* AUTHOR: hyperstud.io */

@font-face {
    font-family: 'circular';
    src: url('../fonts/lineto-circular-bold-c.eot');
    src: url('../fonts/lineto-circular-bold-c.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lineto-circular-bold-c.woff') format('woff'),
         url('../fonts/lineto-circular-bold-c.ttf') format('truetype'),
         url('../fonts/lineto-circular-bold-c.svg#circular') format('svg');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}



html, body{
	background:#fff;
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    font-family: Helvetica, Arial;
    font-size:11px;
    color:#111;
    letter-spacing:0.092em;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
}


h1{
	color:#111;
}

p{
	color:#111;
}

a, a:visited{
	color:#111;
    text-decoration:none;
}

a:hover{
    color:#939598;
}

a, a:visited, a:hover{
    outline:none;
}

table{
    font-size:11px;
}


#newsmenu .news-date,
#newsmenu .label, #menu .label,
#news-more,
#news .news-date,
#menu p,
.menu-title,
#about-network h4,
.selection-title,
#index .extra-menu .label,
.index-title,
#index-extra-cat .menu-content a,
.tags-entry-title,
#work-title, #research-title,
.font-bold,
#selection .reiter span,
#footer{
    font-family: 'circular', Helvetica, Arial;
    font-size:12px !important;
}

#selection #main-title h3, #index #main-title h3, #about #main-title h3, #tags h3, #contact h3, #news #main-title h3,
#contact-main p, #contact-main p a{
    font-family: 'circular', Helvetica, Arial;
    font-size:48px;
}

.underlined{
    text-decoration:underline !important;
}

#background{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    display:none;
}

#background .background{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-repeat:no-repeat;
    background-position: center center;
    display:none;
}

#background .background img{
    width:100px;
    height:100px;
    visibility: hidden;
}

#wrapper{
    position:relative;
    width:100%;
    min-height:100%;
    z-index:1;
}

#wrapper, #footer{
    min-width:980px;
}

#newsmenu, #menu, .extra-info{
    width:254px;
    min-height:24px;
    padding:15px 30px 8px 30px;
    line-height:1.3em;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display:inline-block;
    vertical-align: top;
    height:auto;
    z-index:2;
    color:#111;
}

#newsmenu{
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}

#newsmenu .news-entry{
    display:block;
}


#newsmenu .label, #menu .label{
    opacity:1;
}

#home #newsmenu, #home #menu{
    color:#fff;
}

#home #newsmenu .label, #home #menu .label{
    color:#fff;
}





/* Menu */

#menu{
    position:fixed;
    top:0;
    left:41%;
}

.bg{
    position:absolute;
    top:0;
    left:0;
    background:#fff;
    width:100%;
    height:100%;
    opacity:0.5;
    filter:alpha(opacity=50);
}

.front{
    position:relative;
    float:left;
    display:inline-block;
    width:100%;
    height:auto;
}

.clickable{
    cursor:pointer;
}

#newsmenu a{
    display:block;
    margin:15px 0;
}

#newsmenu .news-date{

}

#news-more{
    margin-top:16px;
    margin-bottom:2px !important;
}

#menu a, #menu a:visited{
    display:block;
}


#menu p{
    margin-top:20px;
}

.menu-content{
    display:inline-block;
    width:100%;
    height:auto;
    padding-bottom:8px;
    display:none;
}

.menu-title{
    display:block;
    text-transform: uppercase;
    margin-top:20px;
    margin-bottom:2px;
}

#menu #tags{
    display:inline-block;
    width:100%;
    color:#111;
}

#menu #tags a{
    display:inline-block;
    font-size:10px;
}





/* Main */

#main{
    width:100%;
    position:relative;
    padding-top:52px;
    padding-bottom:124px; /* must be identical with footer height */
    display:none;
}

#home #main{
    padding-top:120px;
}

.mi{
    margin-left:30px;
}

.left{
    display:inline-block;
    vertical-align: top;
    width:41%;
}

.right{
    display:inline-block;
    vertical-align: top;
    width:59%;

}

#home #main .right h1, #home #main .right h2{
    color:#fff;
    font-size:44px;
    font-family: 'circular', Helvetica, Arial;
    letter-spacing: 0.02em;
    margin-left:10px;
    line-height:1.1em;
}

#home #main .right h2{
    margin-bottom:40px;
}

#main-title{
    position:relative;
    height:auto;
    min-height: 45px;
}




/* General */

.btn-back{
    position:fixed;
    bottom:20px;
    left:10px;
    z-index:99;
    margin-bottom:0;
}

.btn-back a{
    display:block;
    padding:20px;
}

.btn-back-arrow{
    font-size:38px;
    font-family: 'circular', Helvetica, Arial;
    width:16px;
    height:26px;
    display:inline-block;
    background:url(../img/btnback.png);
    background-repeat:no-repeat;
}

.btnbackhover{
    background-position:-16px 0;
}

.btn-back-title{
    margin-left:10px;
    letter-spacing: 0.045em;
    position: relative;
    top: -1px;
    text-transform: capitalize;
}


/* Work Info */

.extra-info{
    position:absolute;
    top:92px;
    left:0px;
    cursor:pointer;
    width:inherit;
    width:auto;
}

.extra-info .menu-content{
    width:500px;
}

.extra-info .label{
    display:block;
}

.extra-info p{
    margin-top:20px;
}

.extra-info p a{
    text-decoration: underline;
}

#work #main .extra-info{
    padding-top:0px;
    padding-bottom:7px;
    margin-top:16px;
}

#news .news-entry{
    max-width:520px;
}

#about .max-width{
    max-width:720px;
}





/* News */

#news-list{
    display:block;
    margin-left:30px;
    margin-top:40px;
}

#news-entries{
    position:relative;
    display:block;
}

#news .news-entry{
    position:relative;
    display:inline-block;
    margin-bottom:60px;
    width:80%;
    min-height:180px;
}

#news .news-header{
    display:table;
    margin-bottom:10px;
    width:100%;
    margin-left:2px;
}

#news .news-date{
    display:table-cell;
    vertical-align: top;
    width:40%;
    min-width:120px;
    white-space: nowrap !important;
    padding-right: 10px;
}

#news .news-tags{
    display:table-cell;
    vertical-align: top;
    width:60%;
}

#news .news-tags a{
    margin-right:5px;
    display: inline-block;
    font-size:10px !important;
    position: relative;
    top: 1px;
    white-space: nowrap;
}

#news .news-entry h3{
    font-size:38px;
    font-family: 'circular', Helvetica, Arial;
    margin-top: 14px;
    display:block;
    margin-left:-1px;
}

#news .news-entry p{
    margin-top:20px;
    line-height:1.4em;
    margin-left:1px;
}

/* About */

#about #main h3{
    font-size:38px;
    font-family: 'circular', Helvetica, Arial;
    line-height:1.4em;
}


#about .left p{
    line-height:1.5em;
    width:80%;
    margin-bottom:20px;
}

#about-about{
    margin-left:30px;
}

#about-about p{
    margin-top:40px;
}

#about-statement{
    display:block;
    margin-top:30px;
    margin-left:30px;
}

#about-statement p{
    margin-top:10px;
}


/* Network */

#about-network{
    margin-left:30px;
    line-height:1.3em;
}

#about-network h3{
    margin-bottom:20px;
}

.network-entries{
    margin-bottom:20px;
    display:table;
    padding:0;
    border-spacing: 0px;
    border-collapse: separate;
    *border-collapse: expression('separate', cellSpacing = '0');
    border-spacing: 0 4px;
}

.network-entry{
    display:table-row;
    line-height: 1.3em;
}

.network-entry a{
    display:inline-block;
    vertical-align: top;
    margin-right:5px;
}

.network-name{
    display:table-cell;
    vertical-align: top;
    width:250px;
} 

.network-projects{
    display:table-cell;
    vertical-align: top;
}

#about-img{
    margin-left:30px;
    margin-top:40px;
    width:284px;
}

.about-pdf{
    display:inline-block;
    margin-top:0px;
    text-decoration: underline;
}

.network-projects a{
    font-size:10px;
}


/* Selections */

#selection #main-title h3, #index #main-title h3, #about #main-title h3, #tags h3, #contact h3, #news #main-title h3{
    font-size:38px;
    line-height:0.7em;
    margin-left:30px;
    margin-top:10px;
}

#selections{
    display:block;
    max-width:100%;
    margin-left:30px;
}

.selection{
    display:inline-block;
    vertical-align: top;
    width: 284px;
    height: auto;
}

.selection.double{
    width:590px;
}

.selection-img{
    display:block;
    width:100%;
    position: relative;
    overflow: hidden;
    margin-bottom:5px;
    background:#ddd;
}

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

.selection .modal{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    min-height:100%;
    background-image:url(../img/greybg3.png);
    
    opacity:0;
    filter:alpha(opacity=0);
    /*-webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;*/
    
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    -o-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    cursor:pointer;
}

.selection .modal:hover{
    opacity:1;
    filter:alpha(opacity=100);
}

.selection .modal a{
    font-family: 'circular', Helvetica, Arial;
    display:block;
    height:100%;
    padding:26px 30px 30px 30px;
    font-size:20px;
    line-height:1.16em;
    color:#fff;

}

.selection-title{
    letter-spacing:0.025em;
    width:50%;
    display:inline-block;
    vertical-align: top;
    line-height: 1.1em;
    padding-right:2%;
}

.selection-tags{
    display:inline-block;
    vertical-align: top;
    width:48%;
    float:right;
    text-align:right;
}

.selection-tags a{
    display:inline-block;
    margin-left:5px;
    line-height:1.3em;
    font-size: 10px;
}

.selection-title{
    display: inline-block;
    width: 50%; 
}



/* Index */


#index-list{
    display:block;
    margin-left:30px;
    margin-top:62px;
}


.index-table{
    display:table;
    width:100%;
    padding:0;
    border-spacing: 0px;
    border-collapse: separate;
    *border-collapse: expression('separate', cellSpacing = '0');
    border-spacing: 0 4px;
}

.index-entry{
    display:table-row;
    width:100%;
    cursor:pointer;
    color:#111;
    line-height:1.3em;
}

.index-cat{
    display:table-cell;
    vertical-align: top;
    width:70px;
    text-transform: capitalize;
}

.index-title{
    display:table-cell;
    vertical-align: top;
    position:relative;
    width:190px;
    padding-right:10px;
}

.index-title a{
    display:inline-block;
}

.index-tags{
    display:table-cell;
    vertical-align: top;
}

.index-tags .tag{
    position:relative;
    display:inline-block;
    vertical-align: top;
    margin-right:5px;
    font-size: 10px;
}

.selected, .selected a, .selected a:visited, .selected a:hover{
    color:#939598 !important;
}

#footer a.selected{
    text-decoration: none !important;
}

#news-img{
    position:fixed;
    background:#333333;
    width:280px;
    font-size:0;
    top:200px;
}

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

#index-img{
    position:relative;
    margin-left:12px;  
    display:inline-block;
    background:#333333;
    width:284px; 
    height:auto;
    font-size:0;
}

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

#news-img-dummy{
    display:inline-block;
    position:relative;
    width:280px;
    height:350px;
}

#index .extra-menu{
    display:block;
    min-width:400px;
    position:absolute;
    top:110px;
    left:0px;
}

#index .extra-info{
    position:relative;
    top:0;
    left:0;
}

#index .extra-info .menu-content{
    width:280px;
    margin-top:10px;
}

#index .extra-info .menu-content a{
    display:block;
}

#index-extra-cat{
    /*width:80px;*/
    width:70px;
    padding-right:inherit;

    top: 1px !important;

}

#index-extra-search{
    display:inline-block;
    vertical-align: top;
    padding:16px 0 0 0;
    min-width:200px;
    line-height:1.3em;
}

#index-extra-search .label{
    letter-spacing:0.02em;
}

#index-extra-search input[type=text]{
    display:none;
    border:none;
    background:none;
    width:150px;
    letter-spacing:0.02em;
    font-family:Arial, Helvetica;
    line-height:1.3em;
    position:relative;
    left:-1px;
    letter-spacing:0.044em;
}

input:focus{
    outline-width: 0;
}

.hiddenfromsearch{
    display:none;
}


#index-extra-tags{
    position:relative;
    top:0;
    left:0;
    padding:16px 0 0 0;
}

#index-extra-tags .menu-content{
    width:360px !important;
}

#index-extra-tags .menu-content a{
    display:inline-block !important;
    vertical-align: top;
    margin-right:5px;
}


/* Work */

.reiter{ 
    margin-top:26px; 
    display:table;
}

#work .reiter, #research .reiter{
    margin-top:28px;
}

#work-work, #research-work{
    display:table-cell;
    vertical-align: top;
    text-transform:capitalize;
    width:100px;
}

#work-title, #research-title{
    display:table-cell;
    vertical-align: top;
    width:190px;
    padding-right:10px;
}

#work-tags, #research-tags{
    display:table-cell;
    vertical-align: top;
    max-width:338px;
    line-height:1.3em;
}

#work-tags a, #research-tags a{
    display:inline-block;
}

#work-tags a, #research-tags a{
    margin-right:5px;
    white-space:nowrap;
    font-size:10px;
}


#work-photos{
    display:block;
    margin-left:30px;
}

#selections{
    margin-top:40px;
}

#work-photos{
    margin-top:40px;
}

.work-photo{
    display:inline-block;
    width:590px;
    height:auto;
}

.work-photo img{
    width:100%;
    height:auto;
    margin-bottom:5px;
}

.work-photo iframe{
    margin-bottom:4px;
}

.work-photo-title, .research-photo-title{
    display:block;
    letter-spacing:0.025em;
}

.research-photo-title{
    margin-top:5px;
}


#work-process{
    display:block;
    margin-left:30px;
    margin-top:40px;
    position:relative;
}

.work-process-photo{
    display:inline-block;
    width:284px;
    height:auto;
}

.work-process-photo img{
    width:100%;
    height:auto;
}


/* Teaching */

#research{
    background:#d5d0d4;
}

#research-text{
    display:block;
    margin-left:30px;
    margin-top:30px;
    line-height:1.5em;
    width:80%;
}

#research-text p{
    margin-bottom:20px;
}

#research-photos{
    display:block;
    width:284px;
    
    margin-top:30px;
    margin-left:30px;
}

.research-photo{
    width:284px;
    height:auto;
    margin-bottom:20px;
}

.research-photo img{
    width:100%;
    height:auto;
}

.research-pdf{
    display:block;
    width:80%;
    text-decoration: underline;
}




/* Tags */

#tags-entries{
    display:block;
    margin-left:30px;
    margin-top:80px;
}

.tags-entry{
    display:block;
    margin-bottom:20px;
    line-height:1.3em;
}

.tags-entry-title{
    display:block;
    margin-bottom: 3px;
}

/* Contact */

#contact-main{
    display:block;
    margin-left:30px;
    margin-top:90px;
}

#contact .contact-title{
    display:block;
    margin-bottom:10px;
    font-family:'Helvetica', Arial;
}

#contact-main p, #contact-main p a{
    font-size:38px;

}


/* Imprint */

#imprint-main{
    display:block;
    margin-top:30px;
    margin-left:30px;
}

#imprint-main p{
    line-height:1.3em;
}


/* Footer */

#footer{
    position: relative;
    margin-top: -124px; /* Negativer Wert der Footer-Höhe */
    height: 124px;
    clear:both;
    width:100%;
    z-index:1;
    line-height:1.3em;
    padding-top:30px;
}

#home #footer{
    padding-top:inherit !important;
}

#home #footer, #home #footer a, #home #footer a:visited{
    color:#fff;
}

#btn-imprint, #btn-privacypolicy{
    text-decoration: underline;
}


/* Global */

#menu p a,
.menu-title,
#newsmenu .label,
#newsmenu .news-date,
#news-more,
.network-entries h4,
.news-date,
.tags-entry-title,
#footer,
.extra-menu,
#contact .contact-title,
.btn-back-title,
{
    letter-spacing:0.2em !important;
}

.index-title, .font-bold{
    letter-spacing:0.074em;
}

#index .extra-menu .label{
    letter-spacing:0.074em;
}

.network-entries h4{
    margin-bottom:2px;
}

#newsmenu .news-date{
    margin-right:3px;
}

#selection .extra-info{
    margin-top:-2px;
}



strong{
    font-family: 'circular', Helvetica, Arial;
}

em{
    font-style:italic;
}



/* Preloader */

#preloader{
    position:absolute;
    top:50%;
    left:50%;
    display:inline-block;
    width:32px;
    height:32px;
    margin-top:-16px;
    margin-left:-16px;
    z-index:999;
}

#preloader2{
    position:relative;
    display:inline-block;
    width:32px;
    height:32px;
    z-index:999;    
    display:none;
}



#floatingCirclesG{
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:0.8s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:3px;
-webkit-animation-name:f_fadeG;
-webkit-animation-duration:0.8s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:3px;
-ms-animation-name:f_fadeG;
-ms-animation-duration:0.8s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:3px;
-o-animation-name:f_fadeG;
-o-animation-duration:0.8s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:3px;
animation-name:f_fadeG;
animation-duration:0.8s;
animation-iteration-count:infinite;
animation-direction:linear;
}

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

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

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

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

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

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

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

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

@-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}

}