/**
 * 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;
}

::-webkit-scrollbar {
  width: 0px;
}

body {
padding: 2em;
margin: 2.5em;
overflow-x: hidden;
padding-top: 0em;
margin-top: 2em;
padding-bottom: 0;
}

img {
	max-width: 100%;
}

svg {
  fill: currentColor;
}

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

li{
	width: auto;
	display: block;
}

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
 *
 */

 .logo{
 	width:calc(50vw - 24px);
 	padding: 0;
	position: fixed;
	top:15px;
	left:20px;
	z-index: 100;
 }

.nav_bar{
	position: fixed;
	width: 45%;
	right: -45%;
	height: 102vh;
	z-index: 100;
	top:0;
	margin: 0;
	padding: 2em 2em 0em 2em;
	overflow-y: scroll;
	transition: 1s;
	display: inline;
}

.nav_bar.active{
	right: 0%;
	transition: 1s;
	margin-bottom: 2em;
	padding-bottom: 2em;
}

.nav_bar_clicker{
	position: fixed;
list-style-type: none;
margin: 0;
padding-top: 31px;
right: 0;
top:0;
z-index: 2000000;
text-transform: uppercase;
height: 102%;
width: 2.5em;
cursor: pointer;
transition: 1s;
word-wrap: unset;
}
.nav_bar_clicker.active{
right: 44%;
transition: 1s;
background-color: #EFF254;
}

.nav_bar2{
	position: fixed;
	width: 45%;
	left: -45%;
	height: 102vh;
	z-index: 100;
	top:0;
	margin: 0;
	padding: 2em 2em 0em 2em;
	overflow-y: scroll;
	transition: 1s;
	display: inline;
}

.nav_bar2.active{
	left: 0%;
	transition: 1s;
	margin-bottom: 2em;
	padding-bottom: 2em;
}

.nav_bar_clicker2{
	position: fixed;
list-style-type: none;
margin: 0;
padding-top: 31px;
left: 0;
top:0;
z-index: 2000000;
text-transform: uppercase;
height: 102%;
width: 2.5em;
cursor: pointer;
transition: 1s;
word-wrap: unset;
}
.nav_bar_clicker2.active{
left: 45%;
transition: 1s;
background-color: #EFF254;
}

.clicker-text{
	transform: rotate(90deg);
	margin-right: 2px;
	word-wrap: unset;
	word-break: inherit;
	position: absolute;
	top:3.5em;
	white-space: nowrap;
	margin: 0;
	margin-bottom: 0;


}
.click2{
bottom: 8em;
top: unset;
transform: translate(-35%, 0%) rotate(90deg);
}

.click4{
right:-4px;
	transform: rotate(-90deg);
}

.click3{
bottom: 8em;
right:-4px;
top: unset;
transform: translate(35%, 0%) rotate(-90deg);

}

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

.sidenav {
  width: 100%;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: black;
  overflow-x: hidden;
  transition: 0.5s;
	z-index: 10002;
	color: white;
	fill: white;
}

#indicator{
float:right;
padding-right: 13px;
	width: 50%;
max-height: 1.25em;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: right;
text-transform: capitalize;
}

.menu_border {
	padding:25px;
}


.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%;
}
/*********************************************************************
 * 3. Main content and sidebar
 *
 */

#main {
	margin-top: 0em;
	clear: both;
}

.content {

	animation: fadein 4s;
	-moz-animation: fadein 4s; /* Firefox */
	-webkit-animation: fadein 4s; /* Safari and Chrome */
	-o-animation: fadein 4s; /* Opera */
}

.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: #333;
	}

.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;
	width: 1px;
	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{
	display: block;
	  margin-left: auto;
	  margin-right: auto;
	  width: 25%;
		position: absolute;
		top: 1em;
		left: 50%;
		transform: translate(-50%, 0%);
		z-index: 100;
}

#startlogowrapper2{
	display: block;
	  margin-left: auto;
	  margin-right: auto;
	  width: 15%;
		position: absolute;
		top: 0.5em;
		left: 50%;
		transform: translate(-50%, 0%);
		z-index: 100;
		position: fixed;
}

#logowrapper{

}


#logo_part2{
	margin-left: -65px;
}

 #homelogo{
	 width: 55%;
	 margin-left: auto;
	 margin-right: auto;
	 margin-top: 3em;
	 animation: fadein 4s;
	 -moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
 }

 @keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}

/*********************************************************************
 * 4. work
 *
 */
#contentwork{
	width: 100vw;
	height: 100vh;
position:fixed;
z-index: 100;
top:0;
right:0;
-webkit-transform:translateX(100%);
	animation: slidein-from-right 2s;
	-moz-animation: slidein-from-right 2s;
	-webkit-animation: slidein-from-right 2s;
	-o-animation: slidein-from-right 2s;
}

@-webkit-keyframes slidein-from-right {
	0% {
			opacity: 0.8;
			-webkit-transform:translateX(50%);
}
	80%{
		opacity: 0.8;
	}
	100% {
			opacity: 0.8;
			-webkit-transform:translateX(100%);
	}
}

#contentwork2{
	width: 100vw;
	height: 100vh;
position:fixed;
z-index: 100;
top:0;
right:0;
-webkit-transform:translateX(-100%);
	animation: slidein-from-left 2s;
	-moz-animation: slidein-from-left 2s;
	-webkit-animation: slidein-from-left 2s;
	-o-animation: slidein-from-left 2s;
}
@-webkit-keyframes slidein-from-left {
    0% {
        opacity: 0.8;
        -webkit-transform:translateX(-50%);
}
		80%{
			opacity: 0.8;
		}
		100% {
        opacity: 0.8;
        -webkit-transform:translateX(-100%);
    }
}

#cover_image{
	height: 85vh;
width: calc(100% - 9em);
padding: 0.5em;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: fixed;
}
.work_start{
	padding:0.5em;
	margin-bottom: 1em;
	height: 90vh;
	width: 100%;
}

.work_start2{
	padding:0.5em;
	margin-bottom: 1em;
	width: 100%;
}

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

}
#projects_wrapper{
	width: 100vw;
	position: relative;
	z-index: 99;
	margin-left: -4.5em;
	padding: 4.5em;
}

.content_link{
padding: 0.5em 3em 0.5em 3em !important;
vertical-align: top;
display: inline-block;
margin-bottom: 7em !important;
}
@media screen and (max-width: 767px) {
	.content_link{
		padding: 0.5em 0.7em 0.5em 0.7em !important;
		margin-bottom: 3em !important;
	}
	
}
.content_link:hover .hide{
	display: block;
}

.content_link img{

}

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


.start{
	margin: 5em 0em 4em 0em;
}

.twoblock{
width: 100vw;
height: 102vh;
display: inline-flex;
margin: -1em 0em 0em -1em;
padding: 0em 0em 0em 0em;

}
.twoblock1{
width: 100%;
display: inline-flex;
margin: 3em -0.5em 3em -0.5em;
padding: 0em 0em 0em 0em;
}

.twoblock2{
width: 100%;
display: inline-flex;
margin: 1em 0em 2em 0em;
padding: 0em 0em 0em 0em;
}


.block{
width: 50%;
text-align: center;
}

.block1{
width: 95%;
padding: 0.5em;
margin-top: 5em;
padding-bottom: 1em;
}

.block2{
	padding: 0.5em;
width: 55%;
padding-bottom: 2em;
}

.block3{
width: 45%;
margin: 0.5em;
}

.block4{
    width:30%;
    float: left;
    margin: 0.5em;

}

.colourblock{
	height: 33.3333333333%;
width: 100%;
margin: 0;
}

.start_title{
	position: absolute;
top: 49%;
left: 25%;
transform: translate(-50%, -50%);
}

.start_title2{
	position: absolute;
top: 48%;
right: ;
transform: translate(-50%, -50%);
}

.content_link_wrap{
width: 100%;
}

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

.hide{
display: none;
text-align: right;
}

.content_text{
margin: 0;
bottom: 0;
font-family: 'glossy';
padding-top: 14px;
font-size: 16px;

}

.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 #34382A;
	position: relative;
}
/*********************************************************************
 * 4. Footer
 *
 */
 #footer_relative {
 	clear: both;
 	position: relative;
 }

#footer {
clear: both;
display: inline-block;
z-index: 1;
position: absolute;
width: 100vw;
position: relative;
z-index: 99;
margin-left: -4.5em;
padding: 1em 4.5em 0em 4.5em;
animation: fadein 4s;
-moz-animation: fadein 4s; /* Firefox */
-webkit-animation: fadein 4s; /* Safari and Chrome */
-o-animation: fadein 4s; /* Opera */
}

#logofooter{
	width: calc(80%);
}

#footer_span1{
	display: inline-block;
width: 25%;
padding: 0.5em;
padding-left:  1em;
vertical-align:top;

}

#footer_span2{
	display: inline-block;
	width: 25%;
	padding: 0.5em;
	vertical-align:top;
margin-bottom: 3em;
}

#footer_span3{
		display: inline-block;
	width: 25%;
	padding: 0.5em;
	vertical-align:top;
margin-bottom: 3em;
}

#footer_span4{
		display: inline-block;
	width: 25%;
	padding: 0.5em;
	vertical-align:top;
margin-bottom: 3em;
}

/*********************************************************************
 * 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%;
 }



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

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

.list_content{
	border-bottom: 3px solid #34382A;
}

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

.about2_ul p{
	margin: 0;

}
.about2_ul{
	margin-top: 0.5em;

}

.list_title{
margin-bottom: 0.2em;}

.list_title2{
border-top: 3px solid black;}

.list_title3{
margin-bottom: 0.15em;
padding-top: 0.15em;}
/*********************************************************************
 * 6. basic page
 *
 */
.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%;
	padding: 0em 0em 0em 0em;
	float: left;
margin-top: 3.2em;
}

.tabletext{
	width:50%;
	padding: 0em 0.5em 0em 0.5em;
	float: right;
margin-top: 3.2em;
}
.tabletext p{
border-bottom: 2px solid black;
margin-bottom: -3px;

}
.tabletext p:nth-child(2){
border-top: 2px solid black;
margin-top: -3px;
}

.image_wrapper{
width: calc(100% + 2em);
float: left;
left: 0px;
top: 0px;
margin-bottom: 1em;
margin-top: 1em;
margin-left: -1em;
}


.image_box{
width: calc(40%);
float: left;
flex-flow: wrap;
position: relative;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
padding: 1em 1em 1em 1em;
}

.image_box:nth-child(2n+2){
display: block;
float: left;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
padding: 1em 1em 1em 5%;
width: calc(60%);
}

.image_box:nth-child(3n+3){
display: block;
float: left;
-o-object-fit: cover;
object-fit: cover;
overflow: hidden;
padding: 1em 2% 1em 2%;
width: calc(35%);
}

.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{

}

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

/*********************************************************************
 * 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 {
 width: 50%;
 width: calc(100% / 2);
 }


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

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

}

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

body{
	padding: 10px;
	margin: 1.5em;
	padding: 0.5em;
}
menu {
position: fixed;
width: 50%;
height: 102vh;

}

.twoblock {
width: 106vw;
height: 104vh;
}
 #startlogowrapper{
width: 60%;

 }

.clicker-text {
font-size: 0.65em;
}

.nav_bar_clicker{
	width: 1.5em;
}
.nav_bar_clicker2{
	width: 1.5em;
}
.nav_bar{
	width: 80%;
	right: -80%;
}
.nav_bar_clicker.active{
	right: 79%;
}

.nav_bar2{
	width: 80%;
	left: -80%;
}
.nav_bar_clicker2.active{
	left: 79%;
}

	.logo {
		width: calc(100vw - 40px);
	margin-left: -0.5em;
	}
	#startlogowrapper2{
		width: 60%;
	}

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


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



	.content_link:nth-child(6n+0){
		width: 100%;
		width: calc(100% / 1);
	}
.content_link:nth-child(7n+0){
		width: 100%;
		width: calc(100% / 1);
	}
	.content_link:nth-child(8n+0){
		width: 100%;
		width: calc(100% / 1);
	}
	/********index*/
#index_content{
padding-top: 1em;
margin-top: 2em;
}

.theory_txt {
padding-bottom: 10px;
top: 100px;
margin-left: 0;
}
.work_start{
margin-top: 2em;
height: 75vh;
}

#cover_image{
width: calc(100% - 3em);
height: 77vh;
margin-left: -1em;
}
#projects_wrapper{
	margin-left: -2em;
	padding: 2.5em;
}

.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*/
#about_right{
	width: 100%;
float: left;

}

#about_left {
	width: 100%;
	position: relative;
	padding: 5px;
}

/********basicpage*/
.startinfo{
	font-size: .6em;
}
.starttext{
width: 100%;
padding: 5px;
margin: 0;
}
.image_wrapper{
	width: 100%;
	margin-left: 0em;
}
.image_box {
width: calc(100%);
padding: 0.25em 0.5em 0.25em 0.5em;
}
.image_box:nth-child(2n+2) {
width: calc(100%);
padding: 0.25em 0.5em 0.25em 0.5em;
}
.image_box:nth-child(3n+3) {
width: calc(100%);
padding: 0.25em 0.5em 0.25em 0.5em;
}
.twoblock1{
	display:block;
	margin: 1em -0.5em 1em -0.5em;
}
.block1{
	width: 100%;
}
.block2{
	width: 100%;
}
.block3{
	width: 100%;
}

.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-left: -2em;
	padding: 2em;
}

#logofooter {
	width: 100%;
}

	#footer_span1{
		width: 100%;
			padding-left: 1.3em;
	}
	#footer_span2{
		width: 100%;
		padding: 0em;
		padding-left: 1.7em;
		margin-bottom: 1em;
	}
	#footer_span3{
		width: 100%;
			padding: 0em;
			padding-left: 1.7em;
			margin-bottom: 1em;
	}
	#footer_span4{
		width: 100%;
			padding: 0em;
			padding-left: 1.7em;
			margin-bottom: 1em;
	}

}

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



}

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

	body, td, textarea {
		font-size: 115%;
	}

}

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

/* Hide visually, but remain approachable for screenreader */

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

/* 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;
}