.bgfill {position: fixed; top:0; left:0; width:100vw; height:100vh; background: rgba(0,0,0,0.4); z-index: 2}
.fas {margin-right: 10px; margin-left: 10px;}
.ocean {
  height: 100vh;
	top:100%;
  width: 100%;
  position: absolute;
 
  left: 0;
 background: #14415f; /* Old browsers */
	mix-blend-mode:  hard-light;
	z-index: 2;

	
}

.circle2 {width:60px; height:60px; background: #14415f; position: absolute; left:50%; margin-left:-30px; border-radius: 60px; margin-top: 20px; border-width:4px; border-style:solid; border-color:#eee; }
.circle {width:60px; height:60px; background: #14415f; position: absolute; left:50%; margin-left:-30px; border-radius: 60px; margin-top: 50px; border-width:4px; border-style:solid; border-color:#eee   }

.circle p {color:#fff!important; font-size:30px; text-align: center; margin-top: -5px!important; line-height: 60px; font-weight: 800!important;  font-family: 'Source Sans Pro', sans-serif;}

.circle2 p {color:#fff!important; font-size:30px; text-align: center; margin-top: -5px!important; line-height: 60px; font-weight: 800!important;  font-family: 'Source Sans Pro', sans-serif;}

.linedown {width:4px; background: #aac6cf; position: absolute; left:50%; height:80px; margin-left: -2px;}


.staff {width:200px;}
.sideimage {width:45%; background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.0), 
      rgba(0,0,0,0.2)
    ),
    /* bottom, image */ url("img/ready.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover; position: absolute; left:55%; height:800px; top:0px; overflow: hidden;}

@media only screen and (max-width: 1028px) {
	.sideimage {display: none;}
}

.invest { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/invest.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}


.glebe { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("harrold/GlebeLake.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.estate { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/estate.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.retirement { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/retirement.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.business { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/business.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.contingency { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/contingency.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.family { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/family.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.seminar { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/seminar.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.what { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/what.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.strategy { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/strategy.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}


.thinking { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/ourthinking.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.case { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("img/casestudies.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}


.approach { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("local/harroldpark.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.about { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("local/bedford.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.contact { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(0,0,0,0.6), 
      rgba(0,0,0,0.6)
    ),
    /* bottom, image */ url("local/bedfordembankment.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}


.harrold { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(27, 87, 127, 0.8), 
      rgba(27, 87, 127, 0.95)
    ),
    /* bottom, image */ url("local/harrold2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.bedford { background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(27, 87, 127, 0.8), 
      rgba(27, 87, 127, 0.95)
    ),
    /* bottom, image */ url("local/bedfordembankment2.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;}

.wave {
  background: url(img/wave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
	
  -webkit-animation: wave 0.5s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
          animation: wave 0.5s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
  top: -175px;
  -webkit-animation: wave 2s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 7s ease -1.25s infinite;
          animation: wave 2s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite, swell 2s ease -1.25s infinite;
  opacity: 1;
}

@-webkit-keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}
@-webkit-keyframes swell {
  0%, 100% {
    -webkit-transform: translate3d(0, -25px, 0);
            transform: translate3d(0, -25px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }
}
@keyframes swell {
  0%, 100% {
    -webkit-transform: translate3d(0, -25px, 0);
            transform: translate3d(0, -25px, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 5px, 0);
            transform: translate3d(0, 5px, 0);
  }
}