body {
height: 100%;
width: 100%;
margin: 0px;
background-color: #fff;
}


img {
border-width: 0px;
}


@font-face {
    font-family: "AlteDIN1451Mittelschrift";
    src: url('../font/AlteDIN1451Mittelschrift.eot');
    src: url('../font/AlteDIN1451Mittelschrift.eot') format('embedded-opentype'),
         url('../font/AlteDIN1451Mittelschrift.woff') format('woff'),
         url('../font/AlteDIN1451Mittelschrift.ttf') format('truetype'),
         url('../font/AlteDIN1451Mittelschrift.svg#AlteDIN1451Mittelschrift') format('svg');
}


#preload {
display: none;
}


#award {
position: fixed;
top: -35%;
left: 12%;
width: auto;
height: 35%;
z-index: 109;
}
@media screen and (orientation:portrait) {
#award {
left: 23%;
}
}


#intro {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
z-index: 100;
}
@media screen and (orientation:portrait) {
#intro {
}
}


#intro_logo {
position: absolute;
width: 15%;
height: auto;
}
@media screen and (orientation:portrait) {
#intro_logo {
width: 60%;
}
}


#menu_mini {
position: fixed;
top: -10%;
left: 0px;
width: 100%;
height: 5%;
background-color: transparent;
display: flex;
justify-content: right;
align-items: center;
font-family: "AlteDIN1451Mittelschrift", Arial, Helvetica, sans-serif;
font-size: 4vh;
line-height: 3.5vh;
color: #fff;
z-index: 111;
}
@media screen and (orientation:portrait) {
#menu_mini {
height: 200px;
}
}


#shadow {
position: fixed;
top: -12%;
left: 0px;
width: 100%;
height: 9%;
background-image: url('../img/shadow.png');
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 100;
}
@media screen and (orientation:portrait) {
#shadow {
height: 250px;
}
}


#menu_mini span {
margin-right: 3%;
letter-spacing: 0.1vw;
font-size: 0.7vw;
line-height: 1vw;
cursor: pointer;
text-decoration: none;
background: linear-gradient(currentColor, currentColor) bottom / 0 .1em no-repeat;
transition: 0.3s background-size;
display: block; 
}
@media screen and (orientation:portrait) {
#menu_mini span {
display: none;
}
}


#menu_mini span:hover {
background-size: 50% .1em;
}


#logo_mini {
position: absolute;
top: 27%;
right: 31.5%;
height: 46%;
width: auto;
background: linear-gradient(currentColor, currentColor) bottom / 0 .1em no-repeat;
transition: 0.3s background-size;
}
@media screen and (orientation:portrait) {
#logo_mini {
}
}


#logo_mini:hover {
background-size: 50% .1em;
}


#selected {
opacity: 0.33;
}


#open_philosophy {
width: auto;
height: 55%;
margin-right: 3%;
display: block;
cursor: pointer;
}


#close_philosophy {
width: auto;
height: 55%;
margin-right: 3%;
display: none;
cursor: pointer;
}


#philosophy_layer {
position: fixed;
top: 0px;
right: -41%;
width: 41%;
height: 100%;
background-color: transparent;
z-index: 99;
}
@media screen and (orientation:portrait) {
#philosophy_layer {
}
}


#philosophy {
position: fixed;
top: 0px;
right: -41%;
width: 41%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 98;
display: flex;
align-items: center;
}
@media screen and (orientation:portrait) {
#philosophy {
}
}


#philosophy .content {
margin-left: 10%;
width: 55%;
color: #fff;
font-family: "AlteDIN1451Mittelschrift", Arial, Helvetica, sans-serif;
font-size: 1.1vh;
line-height: 1.4vh;
}
@media screen and (orientation:portrait) {
#philosophy .content {
}
}


#philosophy .content span {
font-size: 1.8vh;
line-height: 1.8vh;
}
@media screen and (orientation:portrait) {
#philosophy .content span {
}
}


#isotype {
position: absolute;
top: 10%;
left: 5%;
width: auto;
height: 80%;
cursor: pointer;
}
@media screen and (orientation:portrait) {
#isotype {
top: 25%;
height: 60%;
}
}


#black {
display: none;
}
@media screen and (orientation:portrait) {
#black {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
text-align: right;
display: none;
z-index: 110;
}
}


.black_logo {
position: relative;
margin-top: 30%;
margin-right: 7%;
width: 38%;
height: auto;
}


.black_item {
position: relative;
margin-right: 7%;
font-family: "AlteDIN1451Mittelschrift", Arial, Helvetica, sans-serif;
font-size: 8vw;
line-height: 12vw;
color: #fff;
letter-spacing: 0.1vw;
cursor: pointer;
text-decoration: none;
background: linear-gradient(currentColor, currentColor) bottom / 0 .1em no-repeat;
transition: 0.3s background-size;
}


#black_open {
display: none;
}
@media screen and (orientation:portrait) {
#black_open {
position: absolute;
top: 26%;
right: 7%;
height: 60%;
width: auto;
display: block;
}
}


#black_close {
display: none;
}
@media screen and (orientation:portrait) {
#black_close {
position: absolute;
top: 26%;
right: 7%;
height: 60%;
width: auto;
display: none;
}
}


#trailer {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
object-fit: cover;
display: none;
z-index: 95;
}
@media screen and (orientation:portrait) {
#trailer {
}
}


#trailer_layer {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 96;
}
@media screen and (orientation:portrait) {
#trailer_layer {
}
}


#section_content {
position: absolute;
bottom: 80px;
left: 130px;
width: 40%;
font-family: "AlteDIN1451Mittelschrift", Arial, Helvetica, sans-serif;
font-size: 1.3vh;
line-height: 1.5vh;
color: #fff;
z-index: 97;
}
@media screen and (orientation:portrait) {
#section_content {
top: 40%;
width: 70%;
font-size: 4vw;
line-height: 4.5vw;
}
}


#section_content span {
font-size: 2.5vh;
line-height: 3vh;
}
@media screen and (orientation:portrait) {
#section_content span {
font-size: 6vw;
line-height: 6.5vw;
}
}


#gallery {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1
}
@media screen and (orientation:portrait) {
#gallery {
left: 0px;
width: 100%;
}
}


.project_top {
position: relative;
margin-bottom: 20px;
width: 100%;
height: 100%;
background-color: white;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (orientation:portrait) {
.project_top {
}
}


.project_top img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
transition: transform .7s;
}
@media screen and (orientation:portrait) {
.project_top img {
}
}


.project_top img:hover {
transform: scale(1.05);
}


.project {
position: relative;
float: left;
width: 50%;
height: 50%;
background-color: white;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (orientation:portrait) {
.project {
float: inherit;
margin-bottom: 20px;
width: 100%;
height: 100%;
}
}


.project img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
transition: transform .7s;
}
@media screen and (orientation:portrait) {
.project img {
}
}


.project img:hover {
transform: scale(1.05);
}


.data {
position: absolute;
left: 130px;
bottom: 90px;
font-family: "AlteDIN1451Mittelschrift", Arial, Helvetica, sans-serif;
font-size: 5vh;
line-height: 2.5vh;
color: #fff;
z-index: 2;
}
@media screen and (orientation:portrait) {
.data {
left: 75px;
}
}


.data .address {
font-size: 1.4vh;
line-height: 0.5vh;
}
@media screen and (orientation:portrait) {
.data .address {
}
}


.data .type {
font-size: 2.2vh;
margin-bottom: 5vh;
}
@media screen and (orientation:portrait) {
.data .type {
}
}




.line_top {
height: 10px;
background-color: #fff;
margin-top: 1.1vh;
margin-bottom: 0.6vh;
border-width: 0px;
}
@media screen and (orientation:portrait) {
.line_top {
}
}


.line_bottom {
background-color: #fff;
margin-top: 1.6vh;
margin-bottom: 1.5vh;
border-color: #fff;
}
@media screen and (orientation:portrait) {
.line_bottom {
}
}


.icon_data {
transform: inherit !important;
min-width: inherit !important;
width: 2vh;
}
@media screen and (orientation:portrait) {
.icon_data {
}
}


.view_top {
position: relative;
margin-bottom: 20px;
width: 100%;
height: 100%;
background-color: white;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (orientation:portrait) {
.view_top {
}
}

.view_top img {
flex-shrink: 0;
min-width: 100%;
min-height: 100%;
}
@media screen and (orientation:portrait) {
.view_top img {
}
}


.view {
position: relative;
margin-bottom: 150px;
float: left;
width: 50%;
height: 50%;
background-color: white;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (orientation:portrait) {
.view {
float: inherit;
margin-bottom: 20px;
width: 100%;
}
}


#view_details {
}
@media screen and (orientation:portrait) {
#view_details {
height: 130%;
}
}


.view img {
min-width: 100%;
min-height: 100%;
}
@media screen and (orientation:portrait) {
.view img {
min-height: inherit;
height: auto;
}
}


.details {
position: absolute;
left: 130px;
top: 80px;
width: 90%;
font-family: "AlteDIN1451Mittelschrift", Arial, Helvetica, sans-serif;
font-size: 0.69vw;
line-height: 0.8vw;
}
@media screen and (orientation:portrait) {
.details {
width: 75%;
font-size: 3.7vw;
line-height: 4.2vw;
}
}


.details span {
font-size: 1.2vw;
line-height: 1vw;
}
@media screen and (orientation:portrait) {
.details span {
font-size: 5.5vw;
line-height: 3.8vw;
}
}


#press_gallery {
position: absolute;
top: 20%;
left: 4%;
width: 90%;
height: 92%;
z-index: 1
}
@media screen and (orientation:portrait) {
#press_gallery {
left: 0px;
width: 100%;
}
}


.release {
position: relative;
float: left;
width: 50%;
height: 50%;
background-color: white;
overflow: hidden;
text-align: left;
transition: transform .7s;
}
@media screen and (orientation:portrait) {
.release {
float: inherit;
width: 100%;
}
}


.release:hover {
transform: scale(1.05);
}


.open_link {
position: relative;
margin-top: 5%;
margin-left: 5%;
width: 4%;
height: auto;
}
@media screen and (orientation:portrait) {
.open_link {
margin-left: 10%;
width: 10%;
}
}


.website {
position: relative;
margin-top: 1%;
margin-left: 5%;
width: 50%;
height: auto;
}
@media screen and (orientation:portrait) {
.website {
margin-top: 3%;
margin-left: 10%;
width: 70%;
}
}


.description {
position: relative;
margin-left: 5%;
width: 50%;
height: auto;
font-family: "AlteDIN1451Mittelschrift", Arial, Helvetica, sans-serif;
font-size: 2vh;
line-height: 2vh;
color: #000;  
}
@media screen and (orientation:portrait) {
.description {
margin-left: 10%;
font-size: 4.5vw;
line-height: 5vw;
}
}


#contact_form {
position: absolute;
top: 20%;
left: 6%;
width: 70%;
height: 80%;
}
@media screen and (orientation:portrait) {
#contact_form {
top: 20%;
left: 14%;
height: 120%;
}
}


form {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
font-family: "AlteDIN1451Mittelschrift", Arial, Helvetica, sans-serif;
color: #000;
font-size: 1vw;
line-height: 1.3vw;
}
@media screen and (orientation:portrait) {
form {
font-size: 6.5vw;
line-height: 8vw;
}
}


form span {
font-size: 2vw;
line-height: 3.2vw;
}
@media screen and (orientation:portrait) {
form span {
font-size: 8vw;
line-height: 13vw;
}
}


form input {
width: 50%;
height: 9%;
font-family: "AlteDIN1451Mittelschrift", Arial, Helvetica, sans-serif;
color: #000;
font-size: 2vh;
border-width: 0px;
border-bottom: 1px;
border-style: solid;
border-color: #333333; 
background-color: transparent;
}
@media screen and (orientation:portrait) {
form input {
width: 95%;
font-size: 6vw;
}
}


#send {
border-bottom: 0px;
text-align: left;
cursor: pointer;
}


.social {
width: 10%;
height: auto;
cursor: pointer;
}
@media screen and (orientation:portrait) {
.social {
}
}