html{
	/*font-size: 62.5%;  Now 10px = 1rem! */

}
html,body{
    font-family: 'Montserrat', sans-serif;
}

@media (min-width: 768px){
    .container {
        max-width: 828px;
    }
}

.highlight {
    background: #8bb5be;
    padding: 1rem;
    text-align: left;
}

/*HEADER*/
.navbar{
	padding: 0.5rem 4rem;
    background: white;
    -webkit-box-shadow: 0px 12px 50px 5px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 12px 50px 5px rgba(0,0,0,0.1);
    box-shadow: 0px 12px 50px 5px rgba(0,0,0,0.1);

}

.navbar-nav{
    text-align: right;
}

img.header_logo {
    height: 3rem;
}
.nav-link{
	font-weight: 400;
	color: #737373;
}
.nav-link.feedhref {
    /*temporary disable*/
    /*display: none;*/
}

.nav-link:focus, .nav-link:hover, .nav-link.current {
    color: black;
    font-weight: 700;
}

nav>.navbar-brand{
    transform: scale(1) rotate(0deg); 
    transition: all .1s;
}

nav>.navbar-brand:hover {
    /*transform: scale(1.2) rotate(180deg); */
    transform: scale(1.2);
    transition: all .2s;
}

#submenu {
    padding: 2.6rem 0rem 0rem 4rem;
    background-color: #ffffff;
    top: 4.5rem;
    height: 5rem;
}
@media only screen and (max-width: 542px) {
    #submenu {
        display: none;
    }
}

.submenu-item {
    float: left;
    margin-right: 1.5rem;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.submenu-item:last-child {
    margin-right: 0rem;
}

@media only screen and (max-width: 542px) {
    .navbar {
        padding: 0.5rem; 
    }
    #submenu {
    margin: 0rem 0rem 0px;
    margin-bottom: 1rem;
    padding: 0;
    top: 1.5rem;
    height: 4rem;
    position: relative;
    z-index: 0;
    }
    .submenu-item {
        margin-right: 0.7rem;
        font-size: 0.85rem;   
    }
    .submenu-item:before {
        visibility: visible;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

.submenu-item:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.submenu-item:hover:before,.submenu-item.active:before  {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


/*GENERAL*/


.container{
    margin-bottom: 4rem;
}
@media only screen and (max-width: 768px) {

    .container {
        margin-bottom: 2rem;
    }
    .imagegrid{
        margin-top: 1rem;
    }
}

.imagegrid.container {
    margin-bottom: 0;
}

/*ABOUT*/

#about {
    margin-top: 5rem;
}

.about_header{
    margin-bottom: 2rem;
}

section.about {
    padding-top: 100px;
}




h1.header_h1{
    font-weight: 700;
}


@media only screen and (max-width: 542px) {
    section.about {
        padding-top: 20px;
    }

    h1.header_h1{
        font-size: 1.5rem;
    }

}


@media (min-width: 1200px){
    .container.aboutcontent{
        max-width: 760px;
        margin-bottom: 3rem;
    }
}

h2.core_team{
    margin-bottom: 4rem;
    font-weight: 700;
    font-size: 2.5rem;
}

h3.collaborators {
    font-weight: 700;
    font-size: 1.2rem;
    margin-top: 4rem;
}

h2.collegues{
    font-weight: 700;
}

.row.core{
    margin-bottom: 3rem;
}

.core>div {
    margin-bottom: 2rem;
}

.about .row .col-sm-6, .about .row .col-sm-4 {
    padding-bottom: 3rem;
}

h3.name {
    font-weight: 700;
    font-size: 1.2rem;
}

.hr {
    display: block;
    height: 3px;
    width: 10px;
    background: black;
    margin: 0 auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

ul.list {
    margin: 0;
    padding: 0;
}

ul.list li {
    text-decoration: none;
    list-style: none;
    text-align: center;
    white-space: nowrap;
}

.map{
    filter: saturate(0) contrast(1);
}
.map>div {
    border: 4px black solid;
    height: 20rem;

}

.contact_us h1{
    font-weight: 700;
    margin-bottom: 4rem;
}

.contact-content {
    padding-left: 3rem;
    padding-top: 3rem;
    background-color: black;
    color: white;
    height: 20rem;
    font-size: 1.5rem;
}
.contact-content a {
    color: white;
    text-decoration: none;
}
.contact-content a:hover {
    color: white;
    font-weight: 700;
    text-decoration: none;
}

.social {
    margin-top: 1.5rem;
    padding-right: 3rem;

}

.contact-content img {
    width: auto;
    height: 4rem;
    margin-right: 1.7rem;
}

.contact-content img:hover {
    filter: brightness(.5);
}

.contact-content a img :last-child {
    margin-right: 0rem;
}



@media only screen and (max-width: 542px) {
    .text_area{
        padding-left: 1.5rem
    }

    .contact-content {
       padding-left: 0rem;
    }
    .contact-content img {
    
        width: auto;
        height: 4rem;
        margin-right: 1rem;
    }
    .contact-content a img :last-child {
        margin-right: 0rem;
    }

    .social {

        margin-top: 1.5rem;
        width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}


hr.small{
   	height: .25rem;
    width: 2.2rem;
    background-color: white;
    margin: 0;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

#single_project hr{
    max-width: 760px;
    margin: 0 auto;
    margin-top: 1rem;
}

#single_project h4, h6{
    max-width: 760px;
    margin: 0 auto;
    margin-top: 1rem;
}
#single_project h6{
    max-width: 760px;
    margin: 0 auto;
    margin-top: 0rem;
    margin-bottom: 1rem;

}


/*maps*/
a[href^="http://maps.google.com/maps"]{display:none !important}
a[href^="https://maps.google.com/maps"]{display:none !important}

.gmnoprint a, .gmnoprint span, .gm-style-cc {
    display:none;
}
.gmnoprint div {
    background:none !important;
}


/*PROJECTS*/

body#projects{
    margin-top: 10rem;
}

@media only screen and (max-width: 542px){
    body#projects {
        margin-top: 5rem;

    }
}

.text-center.masonry-grid {
    min-height: calc(100vh - 280px) !important;
    margin-top: 80px;
}


.thumb{
    transition: opacity 1s;
}
.thumb.hidden{
    opacity: 0;
}


.thumb.small{
    width: 50%;
}
.thumb.large{
    width: 100%;
}
.thumb.portrait{
    width: 100%;
}
.thumb.landscape{
    width: 100%;
}
.thumb.small .inner{
    padding-bottom: 100%;
}
.thumb.large .inner{
    padding-bottom: 100%;
}

.thumb.portrait .inner{
    padding-bottom: 100%;
}
.thumb.landscape .inner{
   	padding-bottom: 50%;
}


 .nested {
/*    width: calc(100% - 8%);
    height: calc(100% - 8%);*/
    width: 92%;
    height: 92%;
    position: absolute;
    left: calc(50% + 0px);
    top: calc(50% + 0px);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.thumb.portrait .nested{
/*	width: calc(100% - 4%);
    height: calc(100% - 4%);*/
    width: 96%;
    height: 96%;
}
.thumb.landscape .nested{
    width: 96%;
	/*width: calc(100% - 4%);*/
}
.thumb.large .nested {
    width: 96%;
    height: 96%;

/*	width: calc(100% - 4%);
    height: calc(100% - 4%);*/
}

/*Extra small devices (smart phones, less than 34em)*/
@media only screen and (min-width: 33.9em) { 

    .thumb.small{
	    width: 25%;
	}
	.thumb.large{
	    width: 50%;
	}
	.thumb.portrait{
	    width: 25%;
	}
	.thumb.landscape{
	    width: 50%;
	}

	.thumb.small .inner{
	    padding-bottom: 100%;
	}
	.thumb.large .inner{
	    padding-bottom: 100%;
	}

	.thumb.portrait .inner{
	    padding-bottom: 200%;
	}
	.thumb.landscape .inner{
	   	padding-bottom: 50%;
	}

	.thumb.portrait .nested{
        width: 92%;
        height: 96%;
		/*width: calc(100% - 8%);*/
	    /*height: calc(100% - 4%);*/
	}
	

}

/*Small devices (phones, tablets less than 48em)*/
@media only screen and (min-width: 47.9em) {

    .thumb.small{
	    width: 16.667%;
	}
	.thumb.large{
	    width: 33.3334%;
	}
	.thumb.portrait{
	    width: 16.667%;
	}
	.thumb.landscape{
	    width: 33.334%;
	}

}

/*Medium devices (tablets, small laptops less than 62em)*/
@media only screen and (min-width: 61.9em) {

	.thumb.small{
	    width: 16.667%;
	}
	.thumb.large{
	    width: 33.3334%;
	}
	.thumb.portrait{
	    width: 16.667%;
	}
	.thumb.landscape{
	    width: 33.334%;
	}
    .codevember-thumb.large{
        width: 25%;
    }

 }

/*Large devices (desktops, screens less than 75em)*/
@media only screen and (min-width: 74.9em) { 

	.thumb.small{
	    width: 12.5%;
	}
	.thumb.large{
	    width: 25%;
	}
	.thumb.portrait{
	    width: 12.5%;
	}
	.thumb.landscape{
	    width: 25%;
	}
    .codevember-thumb.thumb.large{
        width: 20%;
    }

}




.thumbnail{
    background-size: cover;
    background-position: center;
    /*padding-top: 100%;*/
}

#videothumb{
    transition: all 1s; 
    
}

#videothumb.active{
    transform: scale(2);
}

a.project{
    text-align: left;
}

.project_thumb .imgWrapper {
    overflow: hidden;
    width: 100%;
    position: absolute;
    height: 100%;

    /*height: 31rem;
    width: 31rem;*/
}
/* Landscape phone to portrait tablet */
/*@media (max-width: 600px) { 
 
    a.project {    
        width: 100%;
        height: 19.5rem;
        overflow: hidden;
    }

    body#projects .page_content {
        margin-top: 6rem;
    }
}
*/
/* Portrait tablet to landscape and desktop */
/*@media (min-width: 601px) and (max-width: 979px) { 
    .project_thumb .imgWrapper {
        height: 50rem;
        width: 50rem;
    }
    a.project {    
        width: 49%;
    }
    #about .person_desc{
        max-width: 100%;
    }

    
 }*/

/*a.project:before {
    content: '';
    display: inline-block;
    padding-top: 0%;
}*/

.project_thumb {
  /*  width: 100%;
    height: 0;
    padding-bottom: 100%;*/
 /*   margin-left: 0.1rem;
    margin-bottom: 0.1rem;*/
/*    overflow: hidden;*/
}

.project_thumb .thumbnail {
    min-width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    background-color: black;
    
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    transition: transform 0.4s;

    transform: scale(1);
    -webkit-filter: saturate(100%) blur(0px);
}

.project_thumb:hover > .imgWrapper .thumbnail{
    transition: transform .4s;
    -webkit-filter: saturate(300%) blur(2px);
    transform: scale(1.5);
}

.project_thumb:hover> .imgWrapper .teaser{
    display: block;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    opacity: 1;
    transform: scale(1.1);
}

.teaser {
    transition: all .4s;
    opacity: 0;
    transform: scale(1.5);
    background-color: rgba(0, 0, 0, .4);
    position: absolute;
    
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 3px;
    z-index: 1;

}

.teaser_content {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    position: absolute;
    text-align: center;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
/* .project_thumb:hover > .teaser_content .highlight{
    background: rgba(0, 0, 0, 0);

} */

.teaser_content .highlight {
    display: inline;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
}

@media only screen and (max-width: 542px) {
    .teaser {
        opacity: 1;
        transform: scale(1.5);
        background-color: rgba(0, 0, 0, 0.5);
}


    }


/*FEED*/

#feed{
    margin-top: 5rem;

}

#feed .feed_wrapper{
    min-height: 100%;
    margin-bottom:50px;
}

#feed footer{
    position: absolute;
}

.feed_thumb .thumbnail {
    min-width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
   
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: all 0.4s .4s;
}

.wrap{
    top: 80px;
    width: 100%;
    display: block;
    position: absolute;
    height: calc(100vh - 80px);
    z-index: 111111;
    background: rgba(10,10,10,.7);

}

div#embed_overlay {
/*    position: absolute;
    display: block;
    width: 100%;
    padding: 0;
    top: 84px;
    overflow: hidden;
    height: calc(100% - 214px);
    pointer-events: none;*/
}
.embed-responsive-insta {
position: relative;
z-index: 100;
    height: 100%;
/*    width: 400px;
*/    /*padding-top: 141.6%;*/
/*    overflow: hidden;
*/    margin: 0 auto;
}

iframe.instagram-media {
   /* position: absolute;
    z-index: 111111;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 550px !important;*/
     position: absolute;
  /*width: 100% !important;*/
  /*height: 100% !important;*/
    left: 0; top: 0;
    left: 50%;
    transform: translate(-50%);
}

/**/

/*_________SINGLE PROJECT___________*/

#single_project{
	padding: 0;
    margin-top: 5rem;
    /*background: url('../assets/test/layout_wireframe-05.png');    */
}

/*.imagegrid.container{
    margin: 0;
}
*/

@media (min-width: 768px){
    .imagegrid figure {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        padding: 15px;
    }

    .imagegrid figure:nth-child(odd){
        padding-left: 0;
    }
    .imagegrid figure:nth-child(even){
        padding-right: 0;
    }
}

#single_project h1{
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
}

#single_project p, #single_project h2,  #single_project h3 {
    max-width: 760px;
    margin: 0 auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
}
#single_project h2{
    padding: 1rem 0;
    font-size: 1.5rem;
    font-weight: 700;
}

#single_project .single-head{
    margin-bottom: 2rem;
    margin-top: 10rem;
}
#single_project .single-head * {
    max-width: 760px;
    margin: 0 auto;
}


#single_project .hero-img{
    margin-bottom: 2rem;
}

.parallax { 

    height: 425px;
 /*   background-attachment: fixed;
    background-repeat: no-repeat;*/
    background-size: cover;
    width: 100%;
}

@media (min-width: 1200px){
    .container {
        max-width: 1200px;
    }
}

.container-fluid{
    padding: 0rem 0;
}

.container-fluid.padding{
    padding: 0rem 4rem;
}

.container.padding.credits {
    margin: 0 auto;
    margin-bottom: 4rem;
    color: white;
    background: black;
    width: auto;
    padding: 8rem 8rem;
}

#single_project  .container.padding.credits p {
    padding:0;
    margin: 0;
}
#single_project .credits a, #single_project .credits a:hover{
    color: #ffffff;
    text-decoration: underline;
}

@media only screen and (max-width: 542px) {
    .container.padding.credits {
        padding: 1rem 1rem;

    }


}

#single_project .hero {
    width: 100%;
    /* max-height: 38rem; */
    overflow: hidden;
    height: 35rem;
    background-repeat: no-repeat;
    background-size: cover;
}

#single_project .hero img {
    width: 100%;
    min-width: 100%;
    min-height: 100%;
}

#single_project .excerpt {
    font-size: 2.7rem;
    font-weight: 500;
    line-height: 3.3rem;
    margin-left: 2rem;
    margin-right: 1rem;
    margin-bottom: 1.2rem;
    color: #444;
    /* font-style: italic; */
    max-width: 95rem;
}

#single_project  span.date {
    font-size: 3.2rem;
}
/*

#single_project .excerpt {
    font-family: 'Playfair Display', serif;
    font-size: 3.8rem;
    letter-spacing: 0.1rem;
    font-weight: 100;
    font-style: italic;
    line-height: 4rem;
    margin-left: 2rem;
    margin-bottom: 2rem;
    color: #444444;
}

*/


#single_project iframe {
/*    margin-top: 1rem;
    margin-bottom: 1rem;*/
    position: relative;
    display: block;
    border: 0;
    /*
    todo fix!!!

    height: 54rem;
    width: 96rem;
    */
}


#codevember{
    padding: 0;
    margin-top: 5rem;
}
@media (min-width: 1200px){
    .codevember-container{
        max-width: 1200px;

    }
}
.codevember-container {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 5rem;
}
/*
#codevember a.project {
    display: inline-block;
    text-align: left;
    margin-bottom: .5%;
    width: 19.5%;
}

#codevember .project_thumb {
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    position: relative;
    display: inline-block;
}

#codevember .project_thumb .imgWrapper {
    height: 18rem;
    width: 18rem;
}
#codevember .project_thumb img {
    min-width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
   }

#codevember .wrapper {
    max-width: 98.5rem;
    padding: 2% 2% 0;
    text-align: justify;
    font-size: 0;
}*/

.codevember .cp_embed_wrapper,.codevember .st_embed_wrapper {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1200px;
}

#single_project.codevember p{
    max-width: initial;
    margin-top: 0; 
}
.codevember .back.container {
    padding-top: 1rem;
}

.codevember .container{
    margin-bottom: 1rem;
}

.codevember iframe{
    width: 100%
}

#codevember .single-head{
    margin-bottom: 2rem;
    margin-top: 10rem;
}
#codevember .single-head * {
    max-width: 760px;
/*    margin: 0 auto;
*/}
#codevember h1{
    font-weight: 700;
    margin-bottom: 0;
    padding-bottom: 0.5rem;
}



#single_project ul {
    list-style: none;
    padding: 0rem;
}

#single_project ul li {
    font-size: 1.2rem;
    font-weight: 400;
    margin: 0rem;
    margin-top: .5rem;
    word-break: break-word;
}

#single_project ul li ul {
    margin: 0rem;
    display: inline;
    color: #b1b1b1;
}

#single_project ul li ul li {
    display: list-item;
    padding: 0rem;
    font-size: 1.2rem;
    font-weight: 300;
}

/* #single_project ul li ul li:after {
    content: ", ";
}

#single_project ul li ul li:last-child:after {
    content: "";
} */


#single_project .tags {
    line-height: 2.6rem;
    font-size: 2.0rem;
    font-weight: 300;
    margin-left: 2rem;
    padding: 0rem;
    margin-top: 1.5rem;
}

#single_project .tag {
    margin-right: 1.2rem;
    padding: 0.7rem;
    border-radius: 0.5rem;

    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    transition: background-color 0.2s;
}

#single_project .tag:hover {
    background-color: #eee;
}

#single_project .tag:before {
    font-weight: 500;
    content: "#";
}

#single_project .institutes {
    font-size: 3.2rem;
    font-weight: 100;
    margin-left: 2rem;
    padding: 0rem;
}

#single_project .institute:after {
    content: ",";
}

#single_project .institute:last-child:after {
    content: "";
}

#single_project .year {
    line-height: 2.6rem;
    font-size: 2.0rem;
    font-weight: 300;
    margin-left: 0.5rem;
}

figure {
    display: block;
    -webkit-margin-before:0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

figure img {
    width: 100%;
    height: auto;
    pointer-events: none;
}

figure.block {
    max-width: 760px;
    margin: 2rem auto;
}

figure.full,figure.margin  {
    margin-top: 2rem;
    margin-bottom: 2rem;
}


figure.left30{
    margin-top: 2rem;
    margin-bottom: 2rem;
    margin-left: 1rem;
    width: calc(50% - 30px);}

#single_project figure.gif760 {
    max-width: 760px;
    margin: 0 auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
    /* padding: 0 8rem; */
}
#single_project figure.gif360 {
    max-width: 360px;
    margin: 0 auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
    /* padding: 0 8rem; */
}

@media only screen and (max-width: 767px) {

    .row figure {
        margin-bottom: 2rem;
        width: 100%;

    }
    .row figure:last-child {
        margin-bottom: 0;
    }
    
    
    figure.left30{
        margin-left: 0;
        width: initial;
    }
}

.imagegrid .row {
    display: flex; 
    align-items: stretch;
}

.figure {
    flex: 1; 
}

.flex-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
}


#single_project figcaption p {
    max-width: initial;
    padding: 0.5rem 0;
}

figcaption p {
    padding:0;
}

#single_project figure video {
    width: 100%;
}

#single_project figure.videowrap{
    max-width: 100%;
    margin: 0 auto;
    opacity: 0;
    margin-bottom: 2rem;
    margin-top: 2rem;
    /* padding: 0 8rem; */
}

#single_project figure.videowrap.reveal{
    opacity: 1;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

#single_project .page_content p a {
    padding: 0.6rem;
    padding-left: 0;
    color: white;
    background-color: #312E2E;

    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;

}
#single_project .page_content p a:hover {
    padding: 0.6rem;
    padding-left: 0;
    color: black;
    background-color: #FFFFFF;
}



/*FOOTER*/

.footer{
    height: 7.5rem;
    background-color: black;
    color: white;

}

#single_project > .credits + .footer{

    position: relative;
    bottom: 0;
}
#single_project >  .footer{

    position: relative;
    bottom: 0;
}

#footer-stuff{
    display: block;
    position: relative;
    float: left;
    margin-top: 1.4rem;
}

.footer span {
    margin-left: 1rem;
    font-size: 0.8rem;
}

.footer_logo {
    position: relative;
    padding: .5rem;
    padding-left: 4rem;
    width: 7.5rem;
}