@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
body {
    margin: 0;
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fade {
  border-width: 0 0 1px;
  border-image: linear-gradient(
    90deg,
    hsla(0, 0%, 100%, 0),
    hsla(0, 0%, 100%, 0.5) 50%,
    hsla(0, 0%, 100%, 0) 100%) 0 0 100%;
  border-style: solid;
}
a:link {
    color: #FFFFFF;
    text-decoration: none;
}
a:visited {
    color: #FFFFFF;
    text-decoration: none;
}
A:active {
    color: #FFFFFF;
    text-decoration: none;
}
A:hover {
    color: #FFFFFF;
    text-decoration: none;
}
.header {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);
    color: white;
}
.inner-header {
    height: 7vh;
    width: 100%;
    margin: 0;
    padding: 0;
}
.main {
    text-align: left;
    margin: 40;
    padding: 0;
}
.flex { /*Flexbox for containers*/
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px; /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}
.content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: white;
}
/* Animation */

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
}
.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}
.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}
.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}
.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}


/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
    height: 40px;
    min-height: 40px;
}
.content {
    height: 30vh;
}