body, html {
  margin: 0;
  height: 100%;
  margin-top: 5%;
}
.content{
  width: 100%;
  margin: 0%;

  overflow: hidden;
  margin-bottom: 6%;

}
.content-body{
  margin: 7% 0% 2% 0%;
}
.content-header{
  width: 100%;
  height: 18vw;

}
.content-header img{
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

.home-body{
  width: 90%;
  margin: 5%;
  overflow: hidden;
}
.home-body h2{

  margin: 0;
  font-size: 3vw;
   background: -webkit-linear-gradient(#c1b881, #85540f ,#c1b881);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}
.home-body p{
  margin: 0;
  margin-bottom: 5%;
  text-align: center;
}
.council{
  float: left;
  padding-top: 4%;
  width: 45%;
  cursor: pointer;

}
.credentials{
  width: 52%;
  float: left;
  margin-left: 3%;
  margin-top: 5%;
}
.credentials h3{
  font-size: auto;
  margin: 0%;
  font-size: 2vw;
  margin-top: 2%;
  margin-bottom: 2%;
}
.credentials p{
  margin-top: 2%;
  font-size: 1vw;
  line-height: 1.5vw;
  font-size: auto;
  margin: 0%;
  text-align: left;
  margin-left: 2%;

}
.council:hover{
  opacity: .8;
}
.council-img{
  -webkit-mask-image: url(images/w3logo2.png);
  mask-image: url(images/w3logo2.png);
}
.council-img-holder{
  margin-top: -83.5%;
  margin-left: 6.5%;
  z-index: 2;

}
.mask1 {
  margin-left: 10.5%;
   clip-path: circle(50%);
}
.home-body2{
  width: 90%;
  margin: 5%;
  overflow: hidden;
}
.home-body2 h2{
  text-align: center;
  margin: 0;
  font-size: 3vw;
   background: -webkit-linear-gradient(#c1b881, #85540f ,#c1b881);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 5%;

}
.home-body2 p{
  margin: 0;
  margin-bottom: 5%;
  text-align: center;
    font-size: 1vw;
}
.council2{
  float: left;
  width: 29.9%;
  height: 32vw;
  margin: 1.6679%;
  cursor: pointer;
}
.council-details2 h3{
  font-size: auto;
  margin: 0%;
  text-align: center;
  font-size: 1.5vw;
  margin-top: 2%;

}
.council-details2 p{
  text-decoration: underline;
  font-size: 1vw;
  font-size: auto;
  margin: 0%;
  text-align: center;
}
.council2:hover{
  opacity: .8;
}
.council-img2{
  -webkit-mask-image: url(images/w3logo2.png);
  mask-image: url(images/w3logo2.png);
}
.council-img-holder2{
  margin-top: -83.5%;
  margin-left: 6.5%;
  z-index: 2;
}
.mask12 {
  margin-left: 10.5%;
   clip-path: circle(50%);
}
a{
  color: black;
}
@media only screen and (max-width: 768px) {

.content-header{
  margin-top: 9%;
}
  .council{
  float: left;
  padding-top: 14%;
  width: 97%;
  cursor: pointer;

}
.credentials{
  width: 97%;
  float: left;
  margin-left: 3%;
}
.credentials h2{
  font-size: 7vw;
}
.credentials h3{
  font-size: 5vw;
}
.credentials p , .credentials b{
  font-size: 3vw;
  line-height: 4.5vw;

}
.council:hover{
  opacity: .8;
}
.council-img{
  -webkit-mask-image: url(images/w3logo2.png);
  mask-image: url(images/w3logo2.png);
}
.council-img-holder{
  margin-top: -84%;
  z-index: 2;
}
  .home-body2 h2{
  font-size: 7vw;

}
.home-body2 p{
  font-size: 3vw;
  margin-bottom: 10%;
}
  .council2{
  width: 97%;
  height: 105vw;
}
.council-details2 h3{

  font-size: 5vw;
}
.council-details2 p{
  font-size: 4vw;

}
 .content-header{
  height: 40vw;
}
.header-body{
      margin-top: 19%;
}
  .header-body h1{
        font-size: 8vw;
  }

  }


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