@-webkit-keyframes move-bg {
  0% {
    background-position: 100% 0%; }

  100% {
    background-position: 0% 0%; } }
@keyframes move-bg {
  0% {
    background-position: 100% 0%; }

  100% {
    background-position: 0% 0%; } }
@-moz-keyframes move-bg {
  0% {
    background-position: 100% 0%; }

  100% {
    background-position: 0% 0%; } }
@-webkit-keyframes move-bg2 {
  0% {
    background-position: 0% 0%; }

  100% {
    background-position: 100% 0%; } }
@keyframes move-bg2 {
  0% {
    background-position: 0% 0%; }

  100% {
    background-position: 100% 0%; } }
@-moz-keyframes move-bg2 {
  0% {
    background-position: 0% 0%; }

  100% {
    background-position: 100% 0%; } }
.reveal-animation.ng-enter {
  -webkit-transition: 1s linear all;
  /* Safari/Chrome */
  transition: 1s linear all;
  /* All other modern browsers and IE10+ */
  /* The animation preparation code */
  opacity: 0; }

/*
 Keep in mind that you want to combine both CSS
 classes together to avoid any CSS-specificity
 conflicts
*/
.reveal-animation.ng-enter.ng-enter-active {
  /* The animation code itself */
  opacity: 1; }

body, html {
  background-color: #fff;
  background-image: url("../images/dirt.png");
  color: #fff;
  width: 100%; }

.staticwater, .boatcover {
  width: 100%;
  height: 300px;
  background-color: #1a395e;
  position: absolute;
  top: 0;
  left: 0; }

.boatcover {
  z-index: 999;
  background-color: #1a395e; }

.tpl.section, .footer {
  z-index: 999; }

.waves {
  margin-top: 1px;
  width: 100%;
  height: 70px;
  background: transparent url("../images/wave.png") repeat scroll 0% 0%;
  -webkit-animation: move-bg 15s linear alternate infinite;
  -moz-animation: move-bg 15s linear alternate infinite;
  animation: move-bg 15s linear alternate infinite;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999; }

.distantwaves {
  margin-top: 1px;
  width: 100%;
  height: 50px;
  background: transparent url("../images/distantwave.png") repeat scroll 0% 0%;
  -webkit-animation: move-bg2 20s linear alternate infinite;
  -moz-animation: move-bg2 20s linear alternate infinite;
  animation: move-bg2 20s linear alternate infinite;
  position: absolute;
  top: 0;
  left: 0; }

.top-bar {
  font-size: 1.5em;
  height: 3em; }
  .top-bar .rightbar {
    margin: -2em 1em 0 0;
    position: absolute;
    right: 0;
    top: 0; }

.logo {
  margin: 1em; }

h1,
h2,
h3,
h4,
h5 {
  text-align: center;
  width: 100%;
  color: white; }

h5 {
  text-align: left; }

.causesandeffect {
  color: #142c56;
  text-transform: uppercase;
  font-family: Arial;
  font-weight: bold;
  font-size: 3.5em;
  margin-bottom: 0.1em;
  margin-top: 2em; }

.alookat {
  margin-top: -0.3em;
  color: rgba(20, 44, 86, 0.7);
  font-style: italic;
  font-size: 1.8em;
  font-family: Georgia; }

.allintro {
  color: rgba(0, 0, 0, 0.8);
  line-height: 2em;
  font-family: Arial;
  font-size: 1em;
  margin-bottom: 3em; }

.boatwrapper {
  width: 100%;
  height: auto;
  display: block;
  float: left;
  z-index: 99; }
  .boatwrapper svg {
    width: 100%;
    height: auto;
    display: block;
    float: left; }

.boat_i {
  cursor: pointer; }

svg\:svg {
  display: none; }

.svg_error {
  color: red;
  font-weight: bold; }

#i_Inflattable {
  border: 3px solid red; }

.sealife {
  position: absolute;
  z-index: 9999; }

.section {
  width: 100%; }
  .section h1 {
    margin: 0; }
  .section .timestamp {
    font-size: 1.65em;
    text-align: center;
    font-family: Georgia;
    font-style: italic; }
  .section .paragraph {
    color: white;
    font-family: Arial;
    font-size: 1.15em;
    line-height: 1.7em;
    z-index: 99999; }

.container {
  margin: auto; }

.row {
  max-width: 960px !important;
  margin: auto; }

p#footer {
  margin: 3em;
  margin-top: 6em;
  font-size: 0.8em;
  color: rgba(255, 255, 255, 0.66);
  word-wrap: break-word; }

a {
  color: rgba(255, 255, 255, 0.66);
  font-style: italic;
  word-wrap: break-word; }

a:hover {
  color: rgba(255, 255, 255, 0.77);
  font-style: italic; }

.top-bar {
  background-color: #FFF;
  color: #142c56;
  border-bottom: 3px solid #f3f3f3; }

.top-bar-section ul li {
  background-color: #142c56 !important;
  color: #FFF; }

.top-bar-section li:not(.has-form) a:not(.button) {
  background-color: #FFF;
  color: #142c56;
  font-weight: bold; }

.onclick-effect {
  background: transparent;
  position: absolute;
  top: -100%;
  left: -100%;
  margin: -16px 0 0 -16px;
  width: 32px;
  height: 32px;
  pointer-events: none; }

.onclick-effect::after {
  background: rgba(255, 255, 0, 0.7);
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -35px 0 0 -35px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none; }

.onclick-effect.in::after {
  animation: anim-effect-boris 1s alternate infinite;
  -webkit-animation: anim-effect-boris 1s alternate infinite; }

.omgyellow {
  color: #ffdd00; }

.references {
  width: 100%;
  text-align: center;
  font-family: Georgia;
  font-size: 1.3em; }
  .references a {
    color: #fff;
    font-family: arial; }

.fixed {
  z-index: 9999999; }

.alltop1 {
  padding-top: 20px; }

.titlegadget {
  text-transform: uppercase; }

@keyframes anim-effect-boris {
  0% {
    transform: scale3d(0.3, 0.3, 1);
    opacity: 1; }

  25%, 50% {
    opacity: 1; }

  100% {
    transform: scale3d(1.2, 1.2, 1);
    opacity: 1; } }
@-webkit-keyframes anim-effect-boris {
  0% {
    transform: scale3d(0.3, 0.3, 1);
    opacity: 1; }

  25%, 50% {
    opacity: 1; }

  100% {
    transform: scale3d(1.2, 1.2, 1);
    opacity: 1; } }