/**
 * main.css
 *
 * 1. General HTML tags
 * 2. Masthead area
 * 3. Main content and sidebar
 * 4. Footer
 * 5. Media queries for responsive layout
 * 6. Accessibility helpers
 *
 */

/*********************************************************************
 * 1. General HTML tags
 *
 */

* {
	box-sizing: border-box;
}

body {
padding: 25px;
margin: 0;
overflow-x: hidden;
background-color: white;
 background-image: url("ivory-off-white-paper-texture.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  isolation: isolate;
}

body::after {
  content: "";
  position: fixed;
z-index: -1;
  inset:0;
  background: white;
opacity: 0.5;
mix-blend-mode: darken;
}

img {
	max-width: 100%;
	mix-blend-mode: multiply;

}


svg {
  fill: currentColor;
}

ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
	
}

li{
	width: auto;
	display: block;
}

li a{
	color: black;
}

p{
margin: 0;
font-size: 1.0em;
line-height: 1.25em;
margin-bottom: 1.25em;
}

pre, code {
	background: #eee;
	border: 2px solid #ddd;
}

pre {
	font-size: 14px;
	line-height: 1.4em;
	padding: 1em;
	border-left: 3px solid black;
}

#splash {
background-color: black;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 99999;
padding-top: 10px;
}

#splash_inside {
	width: 200px;
margin: auto;
align-content: center;
object-position: center;
padding-top: calc(50vh - 150px);
}
/*********************************************************************
 * 2. Masthead area
 *
 */

#frontpage{
position: relative;
 }

#header{
color: black;
font-size: 7.5em;
transition: 2s;
width: 60%;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.sidenav {
border-radius: 3em;
height: 0vh;
position: fixed;
top: 10px;
left: 10px;
overflow-x: hidden;
overflow-y: hidden;
transition: 0.5s;
z-index: 200;
color: black;
fill: black;
transition: 1s;
backdrop-filter: blur(5px);
background-color: #d7d7d783;
width: calc(100% - 25px);
height: 50px;
float: left;
filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.2));
}

.sidenav.active {
border-radius: 2em;
height:calc(100% - 25px);
}

.menu_s{
	width: 100%;
	display: inline-block;
	height: 3em;
	padding-top: 0.2em;
	padding-bottom: 0,2em;
	position: relative;
}


 .mw_logo{
	height: 100%;;
	 padding-left: 2em;
	 float:left;
	 z-index: 19999;
 }
 .menu {
float:right;
background-color: black;
width: 20px;
height: 20px;
transition: 1.5s;
border-radius: 100px;
margin-right: 1em;
z-index: 220;
position: absolute;
top: 52%;
right: 0em;
transform: translate(-50%, -50%);
cursor: pointer;
}

#logomenu{
	width: 39%;
}

.nav_bar{
margin: 4em 1.5em 0em 1.5em;
float: left;

}

.nav_bar li{
padding-left: 1em;
}


 .to-fade-in {
  opacity: 0;
  &.fade-in {
    animation: fade-in 3s forwards;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}




#header2 {
  color: black;
  font-size: 2em;
  display:none;
}

#logo{
	color: black;
	top:25px;
	left:25px;
	position: fixed;
	width: calc(100% - 50px);
	z-index: 100;
	margin:0;
	padding: 0;
}








#menubutton2:hover{
border-radius:0px;
}

#menubutton:hover{
border-radius:10px;
}




#indicator{
width: 50%;
margin: 10em 0em 10em 0em;
float: left;
}

.index{
color:black;
display: inline-block;
}

.menu_border {
margin-top: 4.5em;
}


.line{
margin-top: 1%;;
border: 3px solid black;
}

#menu-logo{
mix-blend-mode: difference;
position: absolute;
bottom: 25px;
}
.linewhite{
margin-top: 1%;;
border: 3px solid white;
}

.inline_flex{
	display: inline-flex;
	width: 100%;
}

.margintop{
margin-top: -0em;
margin-block-start: -0.2em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
/*********************************************************************
 * 3. Main content and sidebar
 *
 */

#main {
	margin-top: 0em;
	clear: both;
	min-height: 100vh;
}

.content {

	animation: fadein 2s;
	-moz-animation: fadein 2s; /* Firefox */
	-webkit-animation: fadein 2s; /* Safari and Chrome */
	-o-animation: fadein 2s; /* Opera */
	margin-top: 45px;
}

.nav {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.padding1{
	padding: 1em 0em 1em 0em;
}

.padding0.5{
	padding: 0.5em 0.5em 0.5em 0.5em;
}

	.nav .nav {
		padding-left: 1.5em;
		list-style: disc;
	}
	.nav li {
		margin: 1em 0;
	}

	.nav-tree li {
		margin-top: 0;
		margin-bottom: 0;
	}

	.nav a {
		font-weight: bold;
	}

	.nav-tree li a {
		color: black;
	}

	.nav .current > a {
		color: #d0b88f;
	}

.align_left {
	/* for images placed in rich text editor */
	float: left;
	margin: 0 1em 0.5em 0;
	position: relative;
	top: 0.5em;
	max-width: 50%;
}

.align_right {
	/* for images placed in rich text editor */
	float: right;
	margin: 0 0 0.5em 1em;
	max-width: 50%;
}

.align_center {
	/* for images placed in rich text editor */
	display: block;
	margin: 1em auto;
	position: relative;
	top: 0.5em;
}

figure {
	display: table;
	margin: 1em 0;
}

figure img {
	display: table-row;
	margin-bottom: 0.5em;
}

figure figcaption {
	display: table-row;
	font-size: smaller;
	color: black;
	line-height: 1.4em;
}

.ias-trigger{
	text-align: right;
	padding: 0.5em;
	font-size: 25px;
	float: right;
	padding-top: 1em;
}
/*********************************************************************
 * 4. ?
 *
 */
#front_page{
width: 100%;
position: fixed;
height: 100%;
top: 0;
right: 0;
cursor: pointer;
}

#startlogowrapper{
width: 100vw;
height: 95vh;

}

#logowrapper{

}
.jGravity{
width: 150px;
cursor: pointer;
}

.frontpage{
	width: calc(100vw - 75px);
	height: calc(100vh - 50px);
	display: inline-flex;
}

.frontpage_link{
	height: 100%;
	width: 5%;
	z-index: 1;
}

.frontpage_link:hover + .absolute_img {

	opacity: 1;
}

.absolute_img {
position: absolute;
top: 2%;
left:10%;
max-height: 80%;
max-width: 90%;
transition: 0.5s;
opacity: 0;
}



.absolute_img:nth-child(3n+0) {
  left: 27%;
	top: 19%;
}

.absolute_img:nth-child(2n+0) {
  left: 3%;
	top: 15%;
}

#text{
    margin-top:2em;
    width:80%;
}
#text > p{
    margin-bottom:25px;
}

/*********************************************************************
 * 4. events
 *
 */


#work_wrapper{
	margin-left: 3em;
margin-right: 3em;
}

.projects_wrapper{
width: calc(100%);
margin: 0em 0em 0em 0em;
}

.event_wrapper{
width: calc(100%);
margin: 0em 0em 0em 0em;
}

.content_link{
/* float: left; */
padding: 0.5em 0.5em 0.5em 0.5em;
margin: 0 0 2.5em 0;
display: inline-block;
align-content: top;
vertical-align: top;
}



.event_link{
display: inline-block;
align-content: top;
vertical-align: top;
width: 50%;
padding: 0.5em 0.5em 0.5em 0.5em;
margin: 0 0 2.5em 0;
}

.content_sizer,
.content_link {
  width: 33.33333%;
}

.content_sizer_event,
.event_link{
	width: 50%;	
}


.images img{
border-radius: 75px;
transition: 0.5s;
}

.images img:hover {
border-radius: 0px;
}



.content_link img{
border-radius: 0px;
transition: 0.5s;
}

.content_link:hover img{
border-radius: 50px;
}


.texststart{margin: 5em 0em 3em 0em;
}

.texststart_2{margin: 5em 0em 3em 0em;
}

#tag_wrapper{
width: 100%;
height: 5em;
display: inline-block;
}

.clearfix{
clear: both;
padding: 0em 0 0em 0;
}
.start{
	margin: 5em 0em 4em 0em;
}

.twoblock{
width: 100%;
margin: 0;
padding: 0;

}

.block{
width: 50%;
float: right;
}

.block_2{
width: 50%;
padding: 1em 2em 1em 0;
margin: 0 0 0 0;
float: left;

}

.content_link_wrap{
width: 100%;
}

.title{
width: 75%;

}

.title h5{
width: 100%;
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}

.tag{
float: right;
max-width: 25%;
}

.tag h5{
max-width: 100%;
overflow:hidden;
display:inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}


.images{
margin-bottom: 0.5em;
}

.title2{
width: 30%;
float: left;
text-align: right;
}

.title0_1{
width: 70%;
float: left;
margin-top: 0.5em;
}

.title0_2{
width: 30%;
float: left;
text-align: right;
margin-top: 0.5em;
}

.title3{
float: left;
}

.hide{
display: none;
}

.content_text{
margin: 0em;
bottom: 0;
margin-right: 0.5em;
padding:0.3em 0.5em 0.3em 0.5em;
backdrop-filter: blur(5px);
background-color: #d7d7d783;
transition: 0.5s;
filter: drop-shadow(0 0.1rem 0.1rem rgba(0, 0, 0, 0.2));
text-align: center;
}

.content_text:hover{
border-radius: 100px;
background-color: #bababa88;
}


.content_type{
width: 50%;
float: left;
}

.content_year{
width: 50%;
float: left;
text-align: right;
}

/*********************************************************************
 * 4. index
 *
 */

.theory_txt{
padding: 0;
top: 60px;
}
.summary{
	width: 70%;
}

.readmore{
	position: absolute;
	right: 0;
	bottom: 0;
}
.index_projects{
position: relative;
left: 25%;

}

.index_type{
	width: 25%;
padding-right: 100px;
}
.index_type2{
	width: 25%;
padding-right: 100px;
}

.index_title{
width: 40%;
}

.min-height{
	min-height: 200px;
	border-top: 3px solid black;
	position: relative;
}
/*********************************************************************
 * 4. Footer
 *
 */
 #footer_relative {
 	clear: both;
 	position: relative;
 }

#footer {
min-height: 230px;
z-index: 1;
padding: 1em;
backdrop-filter: blur(5px);
background-color: #d7d7d783;
width: calc(100vw - 50px);

filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.2));
border-radius: 2em;
}

#footer_span1{
	display: inline-block;
width: 60%;
padding: 0.5em;
padding-left:  1em;
padding-right: 8em;
vertical-align:top;
}

#footer_span2{
	display: inline-block;
	width: 22%;
	padding: 0.5em;
	vertical-align:top;	
}

#footer_span3{
		display: inline-block;
	width: 15%;
	padding: 0.5em;
	vertical-align:top;
}


/*********************************************************************
 * 5. about
 *
 */
.wrapper_padding{
  padding: 0 5px 0 5px;
}

 #about_right{
 	width: 50%;
 float: left;
 margin-top: 2em;
 padding: 0 5px 0 5px;
 }

 #about_left {
padding-left: 10px;
 width: 50%;
 position: -webkit-sticky;
 position: fixed;
 top: 0em;
 right: 0;
 }

 #adress{
	 width: 100%;
	 padding-right: 1em;
 }
 #contact{
	width: 100%;
 }

.block1{
	width: 33%;
	margin:0em 0.5em 0em 0.5em;
}

#contact1{
margin: 1em 1em 2em 0em;
}
#contact2{
	margin: 1em 1em 2em 0em;
}

.block2{
	width: 67%;
}

.colophon {
position: relative;
clear: both;
font-size: 0.6em;
padding-top: 5em;
padding-bottom: 2em;
}

.list_content{
	border-bottom: 3px solid black;
}
.list_content:hover{
		color: #d0b88f;
		text-decoration: none;
		transition: 1s;
		cursor: pointer;
	}

.project_content{
display: none;	list-style-type: circle;
}

.about_ul p{
	margin: 0;

}
.about_ul{
	margin-top: 0.5em;
	margin-bottom: 1em;
}

.about2_ul p{
	margin: 0;

}
.about2_ul{
	margin-top: 0.5em;

}

.list_title{
margin-bottom: 0.2em;}




/*********************************************************************
 * 6. artcile pages + event pages
 *
 */
.cover_img{
	max-height: 100vh;
width: calc(50%);
-o-object-fit: cover;
object-fit: cover;
padding: 0px 5px 5px 5px;
float: left;
}

.startinfo{
font-size: 1em;
width: 50%;
float: left;
text-align: left;
margin: 0;
min-height: 22px;
/* min-height: 45px; */
/* max-height: 90px; */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: 0.8em;
padding-right: 1em;
}

.starttext{
width:50%;

margin-top: 3.2em;
}

.image_carousel{
width: 100vw;
margin-left: -1.55em ;
}

/* just making the paragraphs inline */
.devider > .index {display: inline-block;}

/* appending the commas */
.devider > .index:after {content:"◾ ";
font-size:0.85em;
font-stretch:extra-expanded;
}

/* removing it for the last index */
.devider > .index:last-of-type:after {content:""}

/* just making the paragraphs inline */
p > a {display: inline-block;}

/* appending the commas */
.listitem > a:after {content:"◾ ";
font-size:0.85em;
font-stretch:extra-expanded;}


/* removing it for the last index */
p > a:last-of-type:after {content:""}



#image_box{
font-size:0.8em;
margin-bottom: 2em;
margin-top: 3.2em;
}

#image_box img{
padding:0.5em 0em 0.5em 0em;
}


.left{
	float: left;
	width: 50%;
	padding-right: 1em;
}

.right{
	float: right;
	width: 50%;
	padding-left: 1em;
}

#breadtext{
	width: 100%;
	margin-bottom: 9em;
	margin-top: 4.5em;
}

#breadtext p{
	width: 50%;
	
}

#breadtext figure{
	width: 100%;
	
}

#breadtext2{
	width: 100%;
	margin-bottom: 9em;
	margin-top: 4.5em;
}

#breadtext2 p{
	width: 100%;
	
}

#breadtext2 figure{
	width: 50%;
	
}

.wrapper_left{
width:calc(50% - 2em);
/*left: 0px;
top: 0px;
margin: 0 0em 0 0em;*/
float:left;
}

.image_s_left{
	width: calc(50% - 2em);
	float: left;
}
.image_xl{
	width: calc(100%);
	margin: auto;
	
}

.image_xl iframe{
	border-radius:50px;
	height: calc(100vh - 80px);
	object-fit: cover;
	width: 100%;
}

.image_xl img{
	border-radius:50px;
	height: calc(100vh - 80px);
	object-fit: cover;
	width: 100%;
}


.event_info{
	width:50%;
	padding: 0em 0em 0em 0em;
	margin-top: 2em;
	/*position:fixed;*/
	right:0;
	float:right;
}

.event_info p{
margin-bottom: 0px;
}



/*********************************************************************
 * 6. other
 *
 */
table{
	border-width: 0px;
}

tbody{
	vertical-align: top;
}

#next_text_wrapper{
	width: 50%;
	padding: 0em 0em 0em 2em;
	margin-top: 3.2em;
	position: fixed;
	right: 0;
	bottom: 2em;
}

#next_text_wrapper p{

	margin-bottom: 0em;

}
.book{
	background-color: lightgrey;
	border-radius: 50px;
height: calc(90vh - 50px);
object-fit: cover;
position: relative;
}
.book img{
max-height: 80%;
border-radius: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: normal;
filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 1, 0, 0.4));
}

.text{
	width: 50%;
margin-top: 0vh;
margin-bottom: 1em;
float: right;
padding: 0.5em 0.5em 0.5em 0.5em;
}

.text iframe{
	width: 100%;
}

.vp-title {
display: none;
}
.player .vp-sidedock, .player .vp-sidedock .sidedock-inner {
display: none;

}

.photo{

}

.wrapper_left3{
clear:both;
margin: -0.5em;}

.lowercase{
text-transform: lowercase;
}

/*********************************************************************
 * 5. Media queries for responsive layout
 *
 */
 @media only screen and (max-width: 1024px) {
 /* ipad layout */
 .content {
 float: none;
 width: auto;
 padding: 0;
 }

 .content_sizer, .content_link, .event_link {
 width: 50%;
 width: calc(100% / 2);
 }


/********basepage*/

.cover_img{
	width: calc(100% - 1em);
}

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



body{
	padding: 10px;
}

.menu_border {
padding: 10px;

}
.left{
	width: 100%;
}
.right{
	width: 100%;
	
}
#footer{
	width: 100%;
}

.images img {
border-radius: 50px;
transition: 0.5s;
}

.book {
border-radius: 50px;
height: calc(75vh - 50px);
margin-bottom: 2em;
}
.texststart {
margin: 6em 0em 3em 0em;
}

.texststart_2{margin: 3em 0em 1.5em 0em;
}

.book img {
max-width: 75%;
border-radius: 0px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
mix-blend-mode: normal;
filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 1, 0, 0.4));
}

.nav_bar{

margin-top: 3em;}

.nav_bar li{
	padding-left: 0.3em;
}

ul{
	margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 0px;
}
.mw_logo {
padding-left: 1.5em;
}

#logomenu {
width: 100%;
}
.content {
margin-top: 5em;
}
	.logo {
	width: 50px;
	margin: 10px 0 0 10px;
	}

	.logo1 {
	width: 50px;
	margin: 10px 0 0 10px;
	}
	#startlogowrapper {
margin-top: 4em;
}
.jGravity {
width: 60px;
}

#logo_part1{
position: absolute;
top:45px;
left:15px ;
}

#logo_part2{
position: absolute;
top:45px;
left:53px ;
}

#logo_part3{
position: absolute;
top:45px;
left: 125px;
}
#logo_part4{
position: absolute;
top:45px;
left: 188px;
}
#logo_part5{
position: absolute;
top:45px;
left:253px;
}

	.start {
		width: calc(100vw - 40px);
	margin-left: -0.5em;
	}


	.line {
	margin-top: 1%;
	border: 3px solid black;
	}
	.hide{
		display: block;
	}
/********index*/

#indicator {
width: 100%;
margin: 0.5em 0em 1em 0em;
}

	_link {
	width: 100%;
	width: calc(100% / 1);
	}

	.twoblock {
		width: 100%;
	display: block;
margin: 0.5em 0em 0.5em 0em;
padding: 0 0 0 0;
	}
	.block {
	width: 100%;
	float: left;
	}

.block_2{
width: 100%;
padding: 1em 0em 1em 0;
float: left;
padding-left:3em;
}

	.content_link, .event_link {
		width: 100%;
		width: calc(100% / 1);
		padding: 0;
	}
.event_link {
	border-radius:10px ;
}


.theory_txt {
padding-bottom: 10px;
top: 100px;
margin-left: 0;
}

.min-height{
	min-height: 150px;
}

.index_projects {
left: 20%;
font-size: 20px;
margin-bottom: 0.5em;
}

	.index_type {
display: none;
}

.index_title {
width: 70%;
}

/********NAVIGATION*/
#li_logo{
width: calc(22%);
margin-left: 0em;
margin-right: 30px;
margin-top: 0em;}

.topnav li{
float: left;
margin-left: 0;
font-size: 0.9em;
margin-right: 1%;
margin-right: 20px;
margin-top: -1px;}


/********about & contact*/

.twoblock1 {
display: inline;

}
.block1 {
width: 100%;
}
#contact1 {
width: 100%;
}
#contact2 {
width: 100%; d
}
.block2 {
width: 100%;
}
/********basicpage*/
.startinfo{
	font-size: .6em;
}
.starttext{
width: 100%;
padding: 5px;
margin: 0;
}
.event_info {
width: 100%;
padding: 0em 0.5em 0em 0.5em;
float: right;
margin-top: 0em;
margin-bottom: 4em;
}

.image_box {
width: calc(100%);
padding: 0.25em 0.5em 0.25em 0.5em;
}

.image_box {
width: calc(100%);
padding: 0.25em 0.5em 0.25em 0.5em;
}

.text{
width: 100%;
padding: 0.25em 0.5em 0.25em 0.5em;
}

.summary{
	width: 100%}

	.readmore {
position: relative;
width: 100%;
right: 0;
bottom: 0;
}
.inline_flex{
	display: block;
}
	/********footer*/
#footer{
	margin:0;
}

	#footer_span1{
		width: 100%;
		padding: 0em;
	}
	#footer_span2{
		width: 100%;
		padding: 0em;
		
	}
	#footer_span3{
		width: 100%;
			padding: 0em;
			
	}
	.wrapper_left {
width: calc(100%);
}

#next_text_wrapper{
    display:none;
}
	.event_info{
	position:relative;
}
#text{
    width:100%;
}
}

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



}

@media only screen and (min-width: 1) {
	/* extra-wide desktop layout */


/*********************************************************************
 * 6. Accessibility helpers
 *
 */

/* Hide visually, but remain approachable for screenreader */
	body, td, textarea {
		font-size: 115%;
	}

}


.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	white-space: nowrap;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* Show bypass link on hover */

.element-focusable:focus {
	clip: auto;
	overflow: visible;
	height: auto;
}

/* Sample styling for bypass link */

.bypass-to-main:focus {
	top: 0;
	left: 0;
	width: 100%;
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #333;
	color: black;
}
}