:root{
  --ThemeBlueGreen: #5aa7b9;
  --DarkBlueGreen: #395d8e;
}

*{
  box-sizing: border-box;
}

body{
  font-family: roboto, Google Sans;
  padding: 0;
  margin: 0;
  font-size: 18px;
}

.ResultMessage{
  margin: 0.5rem 1rem;
  text-align: center;
}

.ErrorMessage{
  color: red;
}

.SuccessMessage{
  color: green;
}



#TopBanner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#TopBannerImageContainer{
  width: 100%;
}

#TopBannerLogo{
  position: absolute;
  width: 20%;
  left: 5rem;
  top: 1rem;
}

#TopBannerImage{
  width: 100%;
}

#TopBannerContactFormContainer{
  left: calc(1rem + 3%);
  position: absolute;
  background: #fff;
  padding: 2rem;
  width: 40%;
}

#TopBannerCity{
  font-size: 25px;
  font-weight: bold;
  color: var(--ThemeBlueGreen);
}

#TopBannerPostCode{
  font-weight: bold;
  color: var(--ThemeBlueGreen);
}

#TopBannerAddress{
  font-weight: bold;
  color: #fff;
  margin: 0.5rem 1rem;
  padding: 0.5rem;
  background: var(--DarkBlueGreen);
}

#TopBannerDescription{
  font-weight: bold;
  color: var(--ThemeBlueGreen);
}

#TopBannerPrices{
  color: var(--ThemeBlueGreen);
}

#TopBannerContactFormTitle{
  margin-top: 1rem;
  font-weight: bold;
  color: var(--DarkBlueGreen);
}

.TopBannerContactLine{
  display: flex;
  justify-content: space-between;
}

#TopBannerContactInputName{
  width: 100%;
}

.TopBannerContactInput{
  color: var(--DarkBlueGreen);
  border: 1px solid gray;
  border-radius: 0.5rem;
  padding: 0.5rem;
  margin: 0.5rem 0;
  width: calc(50% - 0.5rem);
}

#TopBannerContactSubmitButton{
  color: #fff;
  background: var(--ThemeBlueGreen);
  border: none;
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  padding: 0.5rem;
  margin-top: 1rem;
  width: 100%;
  cursor: pointer;
}






#DomiciliationContainer{
  right: calc(1rem + 3%);
  position: absolute;
  padding: 3rem 0;
  width: 40%;
  font-weight: bold;
}

#DomiciliationSpecialOffer{
  position: absolute;
  top: 0;
  left: 2rem;
  border-radius: 10rem;
  background: #fff;
  height: 6rem;
  width: 6rem;
  color: var(--DarkBlueGreen);
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

#DomiciliationInfos{
  position: relative;
  border: 2px solid #fff;
  background: #fffc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 3.5rem 2rem;
}

#DomiciliationInfosTitle{
  font-size: 20px;
  padding: 0.25rem 0.5rem;
  background: #fff;
  color: var(--DarkBlueGreen);
}

#DomiciliationInfosDescription{
  margin: 1rem 0;
  color: var(--DarkBlueGreen);
}

#DomiciliationInfosGift{
  color: var(--ThemeBlueGreen);
}

#DomiciliationInfosGiftComment{
  position: absolute;
  left: 2rem;
  bottom: 0.1rem;
  color: var(--ThemeBlueGreen);
}




#FirmSection{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#FirmSection h1{
  font-size: 35px;
  width: 100%;
  text-align: center;
  color: var(--DarkBlueGreen);
}

#SpacesSurfaceContainer{
  position: relative;
  height: 55px;
  max-width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1.5rem;
  font-weight: bold;
}

#SpacesSurfaceBackground{
  position: absolute;
  left: 0;
  top: 0;
  background: var(--ThemeBlueGreen);
  border-radius: 10rem;
  width: 80%;
  height: 100%;
  z-index: 1;
}

#SpacesSurfaceTitle{
  color: #fff;
  font-size: 22px;
  z-index: 2;
}

#SpacesSurfaceValue{
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% + 1rem);
  margin-left: 1rem;
  padding: 0.5rem;
  color: var(--DarkBlueGreen);
  background: #82c8d9;
  border-radius: 10rem;
  z-index: 2;
}

#FirmSectionCharacteristicsContainer{
  margin: 3rem 0;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.FirmSectionCharacteristics{
  position: relative;
  width: max(10%, 10rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem 0;
}

.FirmSectionCharacteristicsImage{
  width: 50%;
  margin-bottom: 1rem;
}

.FirmSectionCharacteristicsText{
  width: 100%;
  text-align: center;
  color: var(--ThemeBlueGreen);
  font-weight: bold;
}










#CitySection{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#CitySectionImage{
  width: 100%;
  z-index: 1;
}

#CityInformationContainer{
  position: absolute;
  right: calc(1rem + 3%);
  width: 40%;
  z-index: 2;
}

#CityInformationTitle{
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  text-align: center;
}

#CityInformationWindow{
  padding: 1.5rem;
  background: #fff;
}

#CityInformationWindowTitle{
  color: var(--ThemeBlueGreen);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}

#CityInformationText{
  color: var(--DarkBlueGreen);
  text-align: justify;
  font-weight: bold;
}









#BuildingPositionContainer{
  height: 10rem;
  background: #000;
  width: 80%;
  margin: 3rem 0;
}









#BuildingSection{
  margin: 2rem 0;
  padding: 0 2rem;
}

#BuildingSectionTitle{
  font-size: 35px;
  width: 100%;
  text-align: center;
  color: var(--DarkBlueGreen);
}

#BuildingSectionCharacteristicsContainer{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.BuildingSectionCharacteristics{
  position: relative;
  width: max(12%, 12rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 1rem;
  background: #e9f2ff;
  font-weight: bold;
  text-align: center;
  margin: 0.25rem;
}

.BuildingSectionCharacteristicsText{
  color: var(--ThemeBlueGreen);
  margin-bottom: 1rem;
}

.BuildingSectionCharacteristicsImage{
  width: 50%;
}









#BurogridSection{
  margin: 3rem 0;
}

#BurogridSectionTitle{
  margin: 0 2rem;
  color: var(--ThemeBlueGreen);
  font-weight: bold;
  font-size: 30px;
}

#BurogridSectionContainer{
  width: 100%;
  background: var(--ThemeBlueGreen);
  padding: 1rem 4rem;
  color: #fff;
  font-weight: bold;
}

#BurogridSectionContainerTitle{
  font-size: 30px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#BurogridSectionContainerTitle span{
  margin: 0 0.5rem;
}

#BurogridSectionContainerTitleImage{
  height: 30px;
}

#BurogridSectionText{
  margin: 2rem 0;
  text-align: justify;
}

#BurogridSectionActionContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 10%;
  font-size: 25px;
}

#BurogridSectionActionQuestion{
  color: var(--DarkBlueGreen);
  margin: 0.5rem 1rem;
  text-align: center;
}

#BurogridSectionAction{
  border: none;
  border-radius: 1rem;
  background: var(--DarkBlueGreen);
  padding: 0.8rem 1rem;
  color: #fff;
  font-weight: bold;
  font-size: 25px;
  text-decoration: none;
}






#VirtualTourSection{

}

#VirtualTourSectionTitle{
  font-size: 30px;
  font-weight: bold;
  color: var(--DarkBlueGreen);
  text-align: center;
}

#VirtualTourImages{
 margin: 1rem 0;
 width: 100%;
 display: flex;
 justify-content: space-evenly;
 flex-wrap: wrap;
}

.VirtualTourImage{
 width: calc(25% - 0.5rem);
 margin: 0.25rem 0;
}

#VirtualTourVideoContainer{
  padding: 0 calc(10% + 1rem);
}

#VirtualTourVideo{
  width: 100%;
}







#ContactUsSection{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#ContactUsSectionImage{
  width: 100%;
}

#ContactUsSectionWindow{
  position: absolute;
  background: #5aa7b9bb;
  padding: 1.5rem;
}

#ContactUsSectionTitle{
  color: #fff;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
  font-size: 22px;
}

#ContactUsSectionLine{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ContactUsInput{
  width: 100%;
  margin: 0.5rem 0;
  padding: 0.25rem 0.5rem;
  border: none;
  border-radius: 0.25rem;
  font-size: 18px;
}

#ContactUsSectionLine .ContactUsInput{
  width: calc(50% - 1rem);
}

#ContactUsButton{
  padding: 1rem 0.5rem;
  min-width: 70%;
  border-radius: 0.25rem;
  color: #fff;
  font-size: 22px;
  border: none;
  background: var(--DarkBlueGreen);
  cursor: pointer;
  margin-top: 1rem;
}







#Footer{
  width: 100%;
  background: #000;
  padding: 3rem 2rem;
  color: #fff;
}

#FooterLogo{
  width: 20%;
  margin-bottom: 1rem;
}








@media screen and (max-width: 1000px) {
  #TopBannerContactFormContainer{
    left: unset;
    margin: 0 calc(1rem + 3%);
    position: relative;
    width: 80%;
  }

  #DomiciliationContainer{
    display: none;
  }

  #SpacesSurfaceContainer{
    max-width: 95%;
    padding: 0.5rem 0 0.5rem 1.5rem;
  }

  #CityInformationTitle{
    color: var(--DarkBlueGreen);
  }

  #CityInformationContainer{
    position: relative;
    right: unset;
    width: 100%;
    margin: 1rem calc(1rem + 3%);
    z-index: 2;
  }

  #ContactUsSectionImage{
    display: none;
  }

  #ContactUsSectionWindow{
    position: relative;
  }
}

@media screen and (max-width: 500px) {
  #FirmSectionCharacteristicsContainer{
    flex-direction: column;
    align-items: center;
  }

  #BuildingSectionCharacteristicsContainer {
    flex-direction: column;
    align-items: center;
  }

  #SpacesSurfaceTitle{
    font-size: 18px;
  }

  #SpacesSurfaceValue{
    font-size: 16px;
  }

  #BurogridSectionContainerTitle{
    flex-direction: column;
  }
}