* { padding: 0; margin: 0; }

html { font-size: 10px; font-family: arial,helvetica; height:100%; }

.page { background: white; text-align:center;}


.parallax {
  position: relative;
  background-image: url("/images/dart_view.png");
  overflow-x: hidden;
  opacity: 0.95;
  max-width: 100%;
  background-attachment: fixed;
  background-position: left top;
  background-repeat: no-repeat;
  xxbackground-size: cover; /* set by javascript */
}

.rootnote-big {
  position: absolute;
  left:20%;
  top: 5%;
  width: 60%;
}

.rootnote {
  width: 80%;
  clear:both;
}

.rootnotefull {
  width: 60%;
  clear:both;
}

.musicians {
  position: absolute;
  left:0;
  bottom: 0;
  width: 100%;
}

.caption {
  border-radius:5px;
  position: absolute;
  opacity:0.75;
  left:25%;
  top: 10%;
  width: 50%;
  text-align: center;
  background-color: #fff;
  color: #000;
  font-size: 2rem;
  padding: 1rem;
  clear:both;
}

.inotes {
  vertical-align:top;
  width:2rem;
  height:2rem;
  margin:0 1rem 0 1rem;
}

.content {
  text-align: left;
  font-size: 2rem;
  padding: 2rem 4rem 2rem 4rem;  
}



.hero {
  width:100%;
  padding:0;
  margin:0;
}

.sh { color:#adcbed; font-size:6rem; font-family:arial,helvetica; margin: }
.toggle1 { display:inline; }
.toggle2 { display:none; }


.top { color:yellow; font-weight:normal; font-size:4rem; font-family:arial,helvetica; margin: }

.note {color:#adcbed; font-size:3rem; font-family:arial,helvetica; }
.notew {color:white; font-size:3rem; font-family:arial,helvetica; }
.note a {color:#adcbed; text-decoration:none; }

h1 {color: white; font-family: arial,helvetica; font-size: 2rem; }


.logo-mask {
  -webkit-mask-image: url(/images/sh-smooth.svg);
  mask-image: url(/images/sh-smooth.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  vertical-align:middle;
}

p {
  line-height: 4rem; padding-bottom: 2rem;
}

.break { clear:both; }

.wrap { padding:0 2rem 0 2rem; text-align:left; }

section:nth-of-type(odd) {
  background-color: #dddddd;
}

section:nth-of-type(even) {
  background-color: #ffffff;
}

section:nth-of-type(4) {
  background-color: #000000;
}


.wave-1 { width:100%; }


.section-divider {
  aaaspect-ratio: 959/127;
  background: no-repeat center;
  background-size: cover;
}

.wave {
  background-image: url(/images/wave-1.svg);
}


@media only screen and (max-width : 820px) {
  .toggle1 { display:none; }
  .toggle2 { display:inline; }
  .logo-mask { vertical-align:sub; max-width:350px; }
  html { font-size: 8px; }
}

@media only screen and (max-width : 640px) {
  .toggle1 { display:none; }
  .toggle2 { display:inline; }
  .logo-mask { vertical-align:sub; max-width:350px; }
  .caption { width:90%; left:3%; xbottom: 0%; top: 2%; }
  .rootnote { width:90%; }
  html { font-size: 8px; }
}