$dark-blue: #013870;

body {
  margin: 0;
  padding: 0;
  z-index: 0;
  overflow-x: hidden;
}

@mixin moz-border-colors($color: none) {
  -moz-border-bottom-colors: $color;
  -moz-border-left-colors: $color;
  -moz-border-right-colors: $color;
  -moz-border-top-colors: $color;
}

@mixin triangle($color, $order) {
  @extend .triangle;
  border-top-color: $color;
  top: $order * -60px;
  z-index: $order + 1;
}

.triangle {
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-style: solid;
  border-width: 600px 600px 0;
  content: "";
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  @include moz-border-colors();
  @include filter(drop-shadow(-12px 10px 10px rgba(0, 0, 0, 0.4)));
}

.triangle--1 {
    @include triangle(lighten($dark-blue, 10%), 1);
}

.triangle--2 {
    @include triangle(lighten($dark-blue, 15%), 2);
}

.triangle--3 {
    @include triangle(lighten($dark-blue, 20%), 3);
}

.triangle--4 {
    @include triangle(lighten($dark-blue, 25%), 4);
}

.triangle--5 {
  @include triangle(lighten($dark-blue, 30%), 5);
        }