body {
    background-color: #fff;
    font-family: 'Dosis', sans-serif;
}

h1, h2, h3, h4, h5, h6, p, a, span, i {
    color: #0087e6;
}

a:hover, a:focus {
    color: #0087e6;
}

h1 {
    font-family: 'Baloo', cursive;
}

.container {
    padding: 5px 20px;
}

.row {
    margin-bottom: 20px;
}

img, svg {
    max-width: 100%;
}

@-webkit-keyframes waves {
    50% {
        -webkit-transform: translateX(5px) rotate(0.5deg);
        transform: translateX(5px) rotate(0.5deg);
    }
}
@keyframes waves {
    50% {
        -webkit-transform: translateX(5px) rotate(0.5deg);
        transform: translateX(5px) rotate(0.5deg);
    }
}

@-webkit-keyframes boat {
    50% {
        -webkit-transform: rotate(-2deg) translateY(-3px);
        transform: rotate(-2deg) translateY(-3px);
    }
}

@keyframes boat {
    50% {
        -webkit-transform: rotate(-2deg) translateY(-3px);
        transform: rotate(-2deg) translateY(-3px);
    }
}

@-webkit-keyframes boat-rotate {
    50% {
        -webkit-transform: rotate(-2deg) translateY(5px) translateX(-2px);
        transform: rotate(-2deg) translateY(5px) translateX(-2px);
    }
}

@keyframes boat-rotate {
    50% {
        -webkit-transform: rotate(-2deg) translateY(5px) translateX(-2px);
        transform: rotate(-2deg) translateY(5px) translateX(-2px);
    }
}

@-webkit-keyframes boat-reverse {
    50% {
        -webkit-transform: rotate(2deg) translateY(10px) translateX(2px);
        transform: rotate(2deg) translateY(10px) translateX(2px);
    }
}

@keyframes boat-reverse {
    50% {
        -webkit-transform: rotate(2deg) translateY(10px) translateX(2px);
        transform: rotate(2deg) translateY(10px) translateX(2px);
    }
}

.boat {
    -webkit-animation: boat 3s ease-in-out infinite;
    animation: boat 3s ease-in-out infinite;
    -webkit-transform-origin: center;
    transform-origin: center;
}

.boat-rotate {
    -webkit-animation: boat-rotate 6s ease-in-out infinite;
    animation: boat-rotate 6s ease-in-out infinite;
    -webkit-transform-origin: center;
    transform-origin: center;
}

.boat-reverse {
    -webkit-animation: boat-reverse 4s ease-in-out infinite;
    animation: boat-reverse 4s ease-in-out infinite;
    -webkit-transform-origin: center;
    transform-origin: center;
}

#waves path {
    -webkit-animation: waves 6s ease-in-out infinite;
    animation: waves 6s ease-in-out infinite;
    -webkit-transform-origin: center;
    transform-origin: center;
}

#waves path:nth-child(1) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

#waves path:nth-child(2) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

#waves path:nth-child(3) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}

#waves path:nth-child(4) {
    -webkit-animation: none;
    animation: none;
}

#waves path:nth-child(5) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

#waves path:nth-child(6) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}

html {
    height: 100%;
}