/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em;
  line-height: 1.5;
  font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
  color: #032238;
  margin: 0;
  padding: 0;
  background: #F5F8FA;
}

/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a     { text-decoration: underline; font-style: none; }
a:link    { color: #032238; -webkit-transition: color 0.3s ease-in-out; -moz-transition: color 0.3s ease-in-out; -o-transition: color 0.3s ease-in-out; transition: color 0.3s ease-in-out;}
a:visited { color: #032238; }
a:hover,
a:focus   { color: #284254; text-decoration: none;}
a:active  { color: #284254; position: relative; top: 1px; }
a.selected  { color: #141823; }

/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }

/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices smaller than 400px */
@media (min-width: 320px) {
  .container {
    width: 85%;
    padding: 0;
  }
  .blurred-header {
    width: 100%;
    min-height: 250px;
    padding-top: 0;
    background: rgb(187,211,217);
    background: linear-gradient(180deg, rgba(187,211,217,1) 0%, rgba(202,218,229,1) 35%, rgba(238,239,242,1) 65%, rgba(245,248,250,1) 100%);
  }
  .logo {
    padding-top: 10.5rem;
  }
  p.michelle {
    margin: 0 0 !important;
  }
  p.benjamin, p.rights {
    float: left;
  }
  .intro {
    padding-top: 40px;
    margin-bottom: 60px;
  }
  .full-width {
    padding: none;
  }
  .center.footer {
    margin-top: 0;
  }
  p.album-description {
    clear: left;
  }
  p.benjamin, p.rights {
    float: left;
  }
  p.album-number, p.album-date {
    opacity: .3;
  }

  p.album-number {
    margin-bottom: 0;
  }

  p.album-date {
    text-transform: uppercase;
  }

  p.album-title {
    font-size: 2.6rem;
    font-weight: bold;
    margin: 0;
  }
  .album {
    margin-bottom: 4rem;
  }
  iframe {
    margin-bottom: 2rem;
  }
  .footer {
    width: 100%;
    padding: none;
    margin: 0 0 80px 0;
  }
  .footer p {
    float: none;
  }
}

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0;
  }
  .blurred-header {
    width: 100%;
    min-height: 300px;
    padding-top: 0;
    background: rgb(187,211,217);
    background: linear-gradient(180deg, rgba(187,211,217,1) 0%, rgba(202,218,229,1) 35%, rgba(238,239,242,1) 65%, rgba(245,248,250,1) 100%);
  }
  .logo {
    padding-top: 12.5rem;
  }
  p.michelle {
    margin: 0 0 !important;
  }
  p.benjamin, p.rights {
    float: left;
  }
  .center p {
    font-size: 2rem;
  }
  .center h1 {
    font-size: 3rem;
    font-weight: bold;
  }
  .intro {
    padding-top: 50px;
    margin-bottom: 80px;
  }
  p.album-number, p.album-date {
    opacity: .3;
  }

  p.album-number {
    margin-bottom: 0;
  }

  p.album-date {
    text-transform: uppercase;
  }

  p.album-title {
    font-size: 2.6rem;
    font-weight: bold;
    margin: 0;
  }
  .album, .bios {
    margin-bottom: 80px;
  }
  iframe {
    float: none;
    margin-bottom: 2.5rem;
  }
  .footer {
    width: 100%;
    padding: none;
    margin: 0 0 80px 0;
  }
  .footer p {
    float: none;
  }
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  .container {
    width: 85% !important;
    padding: 0;
  }
  .full-width {
    padding: none;
  }
  .center {
    padding-top: 30px;
  }
  .center p {
    font-size: 2rem;
  }
  .center h1 {
    font-size: 3rem;
    font-weight: bold;
  }
  .center.footer {
    margin-top: 0;
  }
  p.album-description {
    clear: left;
  }
  p.benjamin, p.rights {
    float: left;
  }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 85%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

    .column-1 { width: 8.333333333333332% }
    .column-2 { width: 16.666666666666664% }
    .column-3 { width: 25% }
    .column-4 { width: 33.33333333333333% }
    .column-5 { width: 41.66666666666667% }
    .column-6 { width: 50% }
    .column-7 { width: 58.333333333333336% }
    .column-8 { width: 66.66666666666666% }
    .column-9 { width: 75% }
    .column-10 { width: 83.33333333333334% }
    .column-11 { width: 91.66666666666666% }
    .column-12 { width: 100% }

  .inner-wrap {
    padding: 30px;
  }

  .full-width {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .full-width.start {
    padding-top: 0px;
  }

  .center {
    width: 75%;
    text-align: left;
    padding-top: 100px;
    margin: 0 auto;
  }

  .center p {
    font-size: 2.4rem;
    margin-top: 0;
    margin-bottom: 1.9rem;
  }

  .center h1 {
    font-size: 3rem;
    margin-top: 0;
    font-weight: bold;
  }

  p.album-number, p.album-date {
    opacity: .3;
  }

  p.album-number {
    margin-bottom: 0;
  }

  p.album-date {
    text-transform: uppercase;
    margin-bottom: 4rem;
  }

  p.album-title {
    font-size: 6rem;
    font-weight: bold;
    margin: 0;
  }

  p.michelle {
    color: #032238 !important;
  }

  p.benjamin {
    color: #032238 !important;
    float: left;
    margin: none;
  }

  .blurred-header {
    width: 100%;
    min-height: 400px;
    padding-top: 0;
    background: rgb(187,211,217);
    background: linear-gradient(180deg, rgba(187,211,217,1) 0%, rgba(202,218,229,1) 35%, rgba(238,239,242,1) 65%, rgba(245,248,250,1) 100%);
  }

  .musicians {
    padding-top: 0;
  }

  .parent {
    position: relative;
  }

  .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 50px;
  }

  .credits {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 70px;
  }

  .album-wrapper {

  }

  iframe {
    width: 100%;
    margin: 0 0 50px 0;
  }

  .footer {
    margin-top: 100px;
  }

  section, .album, .content {
    clear: both;
  }

  svg {
    margin: 0 0 0 0;
  }

  p.album-description {
    clear: none;
  }

  .michelle-bio {
    float: left;
    width: 46%;
    margin-right: 8%;
  }

  .benjamin-bio {
    float: left;
    width: 46%;
  }

  .michelle-photo {
    display: block;
    box-sizing: content-box;
    background-image: url(../img/Michelle-Seaman.jpg);
    border-radius: 50%;
    height: 120px;
    width: 120px;
    margin-bottom: 2rem;
  }

  .benjamin-photo {
    display: block;
    box-sizing: content-box;
    background-image: url(../img/Benjamin-Dauer.jpg);
    border-radius: 50%;
    height: 120px;
    width: 120px;
    margin-bottom: 2rem;
  }

  p.michelle-name, p.benjamin-name {
    font-weight: bold;
  }

}

/* Larger than tablet */
@media (min-width: 750px) {
  .blurred-header {
    min-height: 600px;
  }

  p.benjamin {
    float: left;
  }

  p.rights {
    float: left;
    width: 46%;
  }
  p.copyright {
    float: left;
    width: 46%;
    margin-right: 8%;
  }
}

/* Larger than desktop */
@media (min-width: 1000px) {
  .blurred-header {
    min-height: 600px;
  }

  p.benjamin {
    float: right;
  }

  p.rights {
    float: left;
    width: 46%;
  }
  p.copyright {
    float: left;
    width: 46%;
    margin-right: 8%;
  }
}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}


/* CSS Page Load Fade
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {
    opacity:0;
    -webkit-animation:fadeIn ease-in 1;
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;

    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;

    -webkit-animation-duration: .5s;
    -moz-animation-duration: .5s;
    animation-duration: .5s;
}

.fadeIn.one {
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
animation-delay: 0s;
}

.fadeIn.two {
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}

.fadeIn.three {
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
}

.fadeIn.four {
-webkit-animation-delay: 1.25s;
-moz-animation-delay: 1.25s;
animation-delay: 1.25s;
}

.fadeIn.five {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
animation-delay: 1.5s;
}

.fadeIn.six {
-webkit-animation-delay: 1.75s;
-moz-animation-delay: 1.75s;
animation-delay: 1.75s;
}