/*

OPW - Flood Risk Management
Styles for About page

*/
/* About Skip to Anchor */
a.anchor {
    display: block;
    position: relative;
    top: -80px;
    visibility: hidden;
}
/* About banner */
#about-banner {
padding-top: 120px;
padding-bottom: 120px;
}
#about-banner:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 75%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(6,123,145,1) 100%);
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(6,123,145,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(6,123,145,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#067b91',GradientType=0 );
}

/* About general */
.about-white {
padding-top: 100px;
padding-bottom: 100px;
background: #f2f2f2;
}
.about-white .bg-graphic {
position: absolute;
top: 0;
right: 0;
width: 60%;
}
.about-white article {
margin-bottom: 80px;
}

/* About maps */
.about-green1 {
padding-top: 100px;
padding-bottom: 100px;
background: #006981;
color: #ffffff;
}
.about-green1 .bg-graphic {
position: absolute;
top: 0;
right: 40%;
width: 60%;
}
.about-green1 article {
margin-bottom: 80px;
}
.about-green1 article h2,
.about-green1 article h3,
.about-green1 article h4,
.about-green1 article h5,
.about-green1 article h6 {
color: #ffffff;
}
.about-green1 article ul li:before {
background: #0089a8;
}
.about-green1 article .row .image-cover {
height: 160px;
margin-bottom: 20px;
border: 5px solid #0089a8;
}

/* About plans */
.about-green2 {
padding-top: 100px;
padding-bottom: 100px;
background: #0089a8;
color: #ffffff;
}
.about-green2 .bg-graphic {
position: absolute;
top: 0;
right: 40%;
width: 60%;
}
.about-green2 article {
margin-bottom: 80px;
}
.about-green2 article h2,
.about-green2 article h3,
.about-green2 article h4,
.about-green2 article h5,
.about-green2 article h6 {
color: #ffffff;
}
.about-green2 article ul li:before {
background: #006981;
}






@media screen and (max-width: 1500px) {

} /* end max-width 1500px */







@media screen and (max-width: 1199px) {

  /* About banner */
  #about-banner {
  padding-top: 80px;
  padding-bottom: 80px;
  }

  /* About general */
  .about-white {
  padding-top: 70px;
  padding-bottom: 70px;
  background: #f2f2f2;
  }
  .about-white .bg-graphic {
  position: absolute;
  top: 0;
  right: 0;
  width: 70%;
  }

  /* About maps */
  .about-green1 {
  padding-top: 70px;
  padding-bottom: 70px;
  background: #006981;
  color: #ffffff;
  }
  .about-green1 .bg-graphic {
  position: absolute;
  top: 0;
  right: 30%;
  width: 70%;
  }

  /* About plans */
  .about-green2 {
  padding-top: 70px;
  padding-bottom: 70px;
  background: #0089a8;
  color: #ffffff;
  }
  .about-green2 .bg-graphic {
  position: absolute;
  top: 0;
  right: 30%;
  width: 70%;
  }

} /* end max-width 1199px */






@media screen and (max-width: 991px) {

  /* About banner */
  #about-banner {
  padding-top: 60px;
  padding-bottom: 60px;
  }

} /* end max-width 991px */






@media screen and (max-width: 768px) {

  .about-green1 article .row .image-cover {
  height: 160px;
  max-width: 300px;
  margin: 0 auto;
  margin-bottom: 20px;
  border: 5px solid #0089a8;
  }

} /* end max-width 768px */






@media screen and (max-width: 450px) {

  /* About banner */
  #about-banner {
  padding-top: 50px;
  padding-bottom: 50px;
  }

  /* About general */
  .about-white {
  padding-top: 50px;
  padding-bottom: 50px;
  background: #f2f2f2;
  }
  .about-white .bg-graphic {
  position: absolute;
  top: 0;
  right: -150px;
  width: auto;
  height: 500px;
  }

  /* About maps */
  .about-green1 {
  padding-top: 50px;
  padding-bottom: 50px;
  background: #006981;
  color: #ffffff;
  }
  .about-green1 .bg-graphic {
  position: absolute;
  top: 0;
  right: -150px;
  width: auto;
  height: 500px;
  }

  /* About plans */
  .about-green2 {
  padding-top: 50px;
  padding-bottom: 50px;
  background: #0089a8;
  color: #ffffff;
  }
  .about-green2 .bg-graphic {
  position: absolute;
  top: 0;
  right: -150px;
  width: auto;
  height: 500px;
  }

} /* end max-width 450px */

.about-infographic{
    padding-top: 20px;
    padding-bottom: 20px;
    background: #f2f2f2;
}