@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


@media (min-device-width: 1920px){
.main{
  max-width: 75vw;

}

.footer_links > li > a{
  font-size: 30px;}

  
.content_bottom_left, .content_bottom_right, .content_bottom_center{
  font-size: 30px
}

}

@media (max-device-width: 1920px){
.main{
  max-width: 1640px;
}

}

#landshut {
  font-family: 'Open Sans',serif;
  font-size: 1vw;
  font-weight: 300;
}

#shanghai
{
  font-family: 'Open Sans',serif;
  font-size: 1vw;
  font-weight: 300;
}

.main{
    position: relative;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }


@media (min-device-width: 600px){
.row_r > .col50 > h1{
  text-align: right;
}

.row_r > .col50 > p{
  text-align: right;
}

.row_r>.col50>.discover_more{
  float: right;
}

}


.content > h1{
text-shadow: 3px 3px 3px rgba(0,0,0,0.9);
color: #FFFFFF;

}

.row_l{
  flex-direction: column-reverse;
}

.row_r{
  flex-direction: column;
}

.imgBx_hide{
  display: none;
}

*{
  text-decoration: none;
  color: black;
  scroll-behavior: smooth;
}
body, html {
  margin:0;
  padding:0;
  box-sizing: border-box;

}

.black{
  color: #000;
}

body{
  min-height: 1000px;
}

p {
  font-family: 'Open Sans',serif;
  font-size: 1.2vw;
}

h1{
  font-family: 'Playfair Display', serif;
  font-size: 4vw;
  font-weight: 800;
  color: #fff;
}





.homepage_image{
  width: 100%;
}

.banner{
  position: relative;
}

.content{
  position: absolute;
  bottom: 10%;
  left: 8%;
}

header{
  top: 0;
  left: 0;
  min-width: 85%;
  position: fixed;

  padding: 40px 8%;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 0.5s;
}

header.sticky{
  background: #DCD6CB;

  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}


header .navigation{
  position: relative;
  display: flex;
}

header .navigation li{
  margin-left: 30px;
  width: max-content;
  list-style: none;
}

header .navigation li a{
  text-decoration: none;
  color: #fff;
  font-weight: 300;
}

.logo{
  width: 10vw;
  height: auto;

}
.navigation{
  font-family: 'Open Sans',serif;
  font-size: 1.1vw;

}

.design_container{
  padding: 100px;
  position: relative;
  display: block;
    margin-left: auto;
    margin-right: auto;
}


.row_l {
  display: flex;
  flex-direction: row-reverse;
  gap: 50px;
}

.row_r {
  display: flex;
  flex-direction: row;
  gap: 50px;
}

.col50{
  width: 48%;
  margin-left:50px;
  position: relative;
  align-self: center;

}


img{
  width: 100%
}


.design_and_architecture{
  color: #000000 !important;
}

.discover_more{
  font-family: 'Playfair Display', serif;
  font-weight: bold;
  font-size: 2vw;
  text-decoration: none;
  color: #000000;


}

.row_l > .col50 > .discover_more_border{
  border-bottom: solid 2px #0089B6;
  width: 60%;
}

.row_r > .col50 > .discover_more{
  text-align: right;
  border-bottom: solid 2px #0089B6;
  width: 60%;
}

.footer{
  position: relative;
}

.footer_bottom{
  font-family: 'Open Sans',serif;
  font-weight: 300;
  font-size: 17px;
  color: #000000 ;
  position: relative;
  background-color: #DCD6CB;
  height: 100px;
  width: 100%

}



.content_bottom_left{
    position: absolute;
    margin-bottom: 50px;
    top: 40px;
    left: 60px;
}

.content_bottom_right{
  position: absolute;
  margin-bottom: 50px;
  top: 40px;
  right: 60px;
}

.content_bottom_center{
  position: relative;
  text-align: center;
  object-position: center;
  top: 35px;
}

.footer_links > li{
  margin: 20px;
  text-decoration: none;
  font-family: 'Open Sans',serif;
  font-size: 17px;

}
.footer_links {
   list-style: none;
   display: flex;
   align-items: left;
   justify-content: left;
}

.grid_container{
  padding-top: 40px;
  padding-bottom: 100px;
  display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}





@media (max-device-width: 1250px){


  h1{
    font-size: 4vw;
  }


  a{

    text-decoration: none;
    color: black;

  }
  header .navigation{
    display: none;
  }

  header.sticky{
    background: #DCD6CB;
    padding-bottom: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  }

  .meanuToggle{
    position: relative;
    width: 80px;
    height: 80px;
    background: url(images/menu.png);
    background-size: 80px;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  .meanuToggle.active{
    background: url(images/close.png);

    background-size: 70px;
    background-repeat: no-repeat;
  }
  header.sticky.meanuToggle
  {
    filter: invert(1);
  }
  header .navigation.active{
    width: 100%;
    height: calc(100% - 90px);
    position: fixed;
    top :130px;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #DCD6CB;
  }

  header .navigation li {
    margin-left: 0px;
}

header .navigation li a {
  font-size: 1.6em;
  text-decoration: none;
  color: #111;
  font-weight: 300;
}

@media (max-device-width: 600px){
  .grid_container {
    grid-template-areas: "img";
    grid-gap: 10px;
  }

.design_container{
  padding: 60px;
}
.row_l {
  flex-direction: column-reverse;
}

.row_r{
  flex-direction: column-reverse;
}

.col50 {
  width: 100%;
  position: relative;
  margin-left: 0px;
}
h1{
  font-size: 4.5vw;
}

p{
  font-size: 3vw;
}

.discover_more{
  font-size: 3.5vw;
}

li {
  font-size: 2.5vw;
}

.footer_links{
  display: none;
}

.footer_bottom{
  font-size: 2.4vw;
}

.content_bottom_left {
    position: absolute;
    margin-bottom: 50px;
    top: 40px;
    left: 20px;
}

.content_bottom_right{
  position: absolute;
  margin-bottom: 50px;
  top: 40px;
  right: 20px;
}

#landshut {
  font-family: 'Open Sans',serif;
  font-size: 6px;
  font-weight: 300;
}

#shanghai
{

  font-family: 'Open Sans',serif;
  font-size: 6px;
  font-weight: 300;
}

.logo{
  width: 10vw;
  height: auto;

}

}




@media (min-device-width: 1920px){

  .main{
  max-width: 60vw;
}

 .logo{
   width: 250px;
 }
  .navigation{
    font-size: 35px;
  }

  h1{
    font-size: 100px
  }


  #shanghai{
    font-size: 30px;
  }

  #landshut{
    font-size: 30px;
  }

  .footer_bottom{
    font-size: 30px;
  }

  .footer_links > li {
    font-size: 30px;
  }


}