:root{
  --main-bg-color: aquamarine;
  --main-font-color: black;
  --table-bg-color-odd: rgb(255, 255, 255,.5);
  --table-bg-color-even: rgb(147, 147, 147,.5);;
}
html{
  color: var(--main-font-color);
  font-family: helvetica;
  font-size:large;
}
.outer-container{
  display: grid;
  grid-template-columns: 50% 50%;
}
.picture-container figure {
  width: 100%;
}
.picture-container{
  width: 77%;
}
.text-container p{

}
.text-container{
  width: 94%;
}
body {
  background-size:cover;
}
.heading{
  color: white;
  width: 51%;
  font-size: 272%;
}body{
   padding:1%
}
main { 
    margin-top: 17%;
}

figure{
  width: 60%;
}
img{
   max-width: 100%;
}
.main-text{
  width: 65%;
  padding-left: 21%;

}
.main-text p{
  text-align: center;
  font-size: 180%;
}
.address{
  width: 101%;
  /*! float: right; */
  text-align: right;
  
}
.address p{
   color: white;
}
cite{
  font-size: xx-small;
}
nav a{
  padding: .5%}nav a:hover{
                   background-color: lightgreen;
                   color: black;
                   text-decoration: underline;
               }
nav a{
  display: inline-block;
  width: 19%;
}
.info{
  display: grid;
  width: 99%;
  grid-template-columns: auto auto;
}

.text-container p {
  font-size: 157%;
  margin: 18%;
  text-align: center;
}nav a {
   border: solid green;
   background-color: rgba(255,255,255,.5);
   text-align: center;
   color: brown;
}
.logo img {
  max-width: 100%;
  border: 1px solid black;
  border-radius: 5%;
}
nav{
  position: fixed;
  top: 0%;
  width: 100%;
  height: 14em;  
}
nav section{
  padding: 0%;
}
footer{

  background: forestgreen;
  padding: 3%;
}
footer p{
  text-align: center;
}
nav{
  background: forestgreen;
  display: inline-grid;
  grid-template-columns: 20% auto;
}

.team3{
  text-align:center;
  background-color:rgba(175, 35, 31);
  margin: auto;
  padding: 10%;
}
.team2{
  text-align:center;
  background-color:rgba(175, 35, 31);
  margin: auto;
  padding: 10%;
}
.team1{
  text-align:center;
  background-color:rgba(175, 35, 31);
  margin: auto;
  padding: 10%;
}
.visual3{
  text-align:center;
  background-color:rgba(175, 35, 31);
  margin: auto;
  padding: 10%;
  
}
.visual2{
  text-align:center;
  background-color:rgba(175, 35, 31);
  margin: auto;
  padding: 10%;
}
.visual1{
  text-align:center;
  background-color:rgba(175, 35, 31);
  margin: auto;
  padding: 5%;
}
.openings{
  background-color: red;
}
.openings p{
  color:snow
}
.openings h2{
  color: snow;
}
.page-layout article{
  display: grid;
  grid-template-areas: 
  "Basic-services visual1"
  "visual2 Security"
  "Subject visual3";
} 
.page-layout .Basic-services{
    grid-area: Basic-services;
}
.page-layout .visual1{
    grid-area: visual1;
}
.page-layout .Security{
    grid-area: Security;
}
.page-layout .visual2{
  grid-area: visual2;
}
.page-layout .Subject{
  grid-area: Subject;
}
.page-layout .visual3{
  grid-area: visual3;
}
img{
  max-width: 100%;
}

section{
  padding: 5%;
  margin: auto;
}
header{
  background-color: gainsboro;
}
footer{
  background-color: forestgreen;
  padding:3em;
}
footer p, h3{
  color: white;
}

.team-layout article{
  display: grid;
  grid-template-areas: 
  "renovation team1"
  "team2 estate"
  "specialist team3"
  "openings openings";
} 
.team-layout .renovation{
    grid-area: renovation;
}
.team-layout .team1{
    grid-area: team1;
}
.team-layout .estate{
    grid-area: estate;
}
.team-layout .team2{
  grid-area: team2;
}
.team-layout .specialist{
  grid-area: specialist;
}
.team-layout .team3{
  grid-area: team3;
}
.team-layout .openings{
  grid-area: openings;
}
p{
  color:forestgreen;
  font-size: 130%
}
ul{
  color:red;
  font-size: 130%
}
h2{
  font-size: 200%
}
.visual1 img {
  width: 100%;
  height:100%
}
textarea{
  width:100%;
}