body {
  height: 2000px;
  min-width: 700px;
  position: relative;
  padding-top: 70px;
}

.extendable {
  min-height: 0px;
  height: auto;

  overflow: hidden;
  transition: min-height 0.3s ease-out;
}
.extendable.extended {
  min-height: 60px;
}
.extendable.extended_even_MORE {
  min-height: 30px;
}

.footer {
  margin-bottom: 10px;
  margin-left: 20px;
  background: none;
  bottom: 0;
  position: absolute;
}

.pulsing {
    opacity: 0;
}
.pulsing.fade1 {
  animation: fade1 2.5s linear forwards;
  -moz-animation: fade1 2.5s linear forwards;
  -webkit-animation: fade1 2.5s linear forwards;
  -o-animation: fade1 2.5s linear forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}
.pulsing.fade2 {
  animation: fade2 2.5s linear forwards;
  -moz-animation: fade2 2.5s linear forwards;
  -webkit-animation: fade2 2.5s linear forwards;
  -o-animation: fade2 2.5s linear forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}
.pulsing.fade3 {
  animation: fade3 2.5s linear forwards;
  -moz-animation: fade3 2.5s linear forwards;
  -webkit-animation: fade3 2.5s linear forwards;
  -o-animation: fade3 2.5s linear forwards;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
}

/* Sourced from https://stackoverflow.com/a/14448027 with modifications */

.arrow, .arrow:before, .arrow:after {
  width: 5em;
  height: 5em;
}
.arrow {
	overflow: hidden;
	position: relative;
	margin: 7em auto 0;
	border-radius: 20%;
	transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
	pointer-events: none;
}
.arrow:before, .arrow:after {
	position: absolute;
  background: #ababab;
	pointer-events: auto;
	content: '';
}
.arrow:before {
	border-radius: 20% 20% 20% 53%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
			skewX(30deg) scaleY(.866) translateX(-24%);
}
.arrow:after {
	border-radius: 20% 20% 53% 20%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
			skewX(-30deg) scaleY(.866) translateX(24%);
}

/* END */

#dots {
  padding-top: 30px;
}

#dots .dot {
  background: #ababab;
  border-radius: 30px;
}

#dots div {
  margin: auto;
  margin-top: 20px;
  width: 30px;
  height: 50px;
}

#arrow_head {
  margin: auto;
  margin-top: -80px;

  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

#intro {
  width: 100%;
  display: inline-block;
}

#intro h1 {
  float: left;
  margin-left: -5px;

  animation: fadein 3s;
  -moz-animation: fadein 3s; /* Firefox */
  -webkit-animation: fadein 3s; /* Safari and Chrome */
  -o-animation: fadein 3s; /* Opera */
}

#intro a {
  opacity: 0;
  margin-left: 20px;
  margin-bottom: 10px;

  animation: fadein 0.6s ease-in 1s forwards;
  -moz-animation: fadein 0.6s ease-in 1s forwards; /* Firefox */
  -webkit-animation: fadein 0.6s ease-in 1s forwards; /* Safari and Chrome */
  -o-animation: fadein 0.6s ease-in 1s forwards; /* Opera */
}

@-webkit-keyframes showHide { /* Chrome, Safari */
    0% { width: 100% }
  100% { width: 0% }
}
@-moz-keyframes showHide { /* FF */
    0% { width: 100% }
  100% { width: 0% }
}
@-ms-keyframes showHide { /* IE10 */
    0% { width: 100% }
  100% { width: 0% }
}
@-o-keyframes showHide { /* Opera */
    0% { width: 100% }
  100% { width: 0% }
}
@keyframes showHide {
    0% { width: 100% }
  100% { width: 0% }
}

@keyframes fade1 {
  0%, 80% { opacity: 0 }
  40% { opacity: 1 }
}
@-moz-keyframes fade1 { /* Firefox */
  0%, 80% { opacity: 0 }
  40% { opacity: 1 }
}
@-webkit-keyframes fade1 { /* Safari and Chrome */
  0%, 80% { opacity: 0 }
  40% { opacity: 1 }
}
@-o-keyframes fade1 { /* Opera */
  0%, 80% { opacity: 0 }
  40% { opacity: 1 }
}

@keyframes fade2 {
  0%, 10%, 90% { opacity: 0 }
  50% { opacity: 1 }
}
@-moz-keyframes fade2 { /* Firefox */
  0%, 10%, 90% { opacity: 0 }
  50% { opacity: 1 }
}
@-webkit-keyframes fade2 { /* Safari and Chrome */
  0%, 10%, 90% { opacity: 0 }
  50% { opacity: 1 }
}
@-o-keyframes fade2 { /* Opera */
  0%, 10%, 90% { opacity: 0 }
  50% { opacity: 1 }
}

@keyframes fade3 {
  0%, 20%, 100% { opacity: 0 }
  60% { opacity: 1 }
}
@-moz-keyframes fade3 { /* Firefox */
  0%, 20%, 100% { opacity: 0 }
  60% { opacity: 1 }
}
@-webkit-keyframes fade3 { /* Safari and Chrome */
  0%, 20%, 100% { opacity: 0 }
  60% { opacity: 1 }
}
@-o-keyframes fade3 { /* Opera */
  0%, 20%, 100% { opacity: 0 }
  60% { opacity: 1 }
}

@keyframes fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}
@-moz-keyframes fadein { /* Firefox */
  from { opacity: 0; }
  to { opacity: 1; }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
  from { opacity: 0; }
  to { opacity: 1; }
}
@-o-keyframes fadein { /* Opera */
  from { opacity: 0; }
  to { opacity: 1; }
}