/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  background-color: #f3e7e5; }

h1 {
  font-family: "magpie";
  font-size: 6.5em;
  color: #f3e7e5; }
  @media screen and (max-width: 1300px) {
    h1 {
      font-size: 5.5em; } }
  @media screen and (max-width: 1100px) {
    h1 {
      font-size: 5em; } }
  @media screen and (max-width: 1000px) {
    h1 {
      font-size: 4.5em; } }
  @media screen and (max-width: 900px) {
    h1 {
      font-size: 4em; } }
  @media screen and (max-width: 800px) {
    h1 {
      font-size: 3.5em; } }
  @media screen and (max-width: 700px) {
    h1 {
      font-size: 3em; } }
  @media screen and (max-width: 600px) {
    h1 {
      font-size: 2.5em; } }
  @media screen and (max-width: 500px) {
    h1 {
      font-size: 2.2em; } }
  @media screen and (max-width: 450px) {
    h1 {
      font-size: 2em; } }

.i {
  font-family: "Georgia";
  font-size: 1.3em;
  color: #35130e;
  text-align: left;
  padding: 2% 0%;
  width: 60%;
  line-height: 1.3; }
  @media screen and (max-width: 850px) {
    .i {
      font-size: 1em; } }
  @media screen and (max-width: 600px) {
    .i {
      width: 100%; } }
  @media screen and (max-width: 500px) {
    .i {
      font-size: .9em;
      padding: 4% 0%; } }

.sb {
  font-family: "Georgia";
  font-size: 1.3em;
  color: #bf422e;
  text-align: right;
  padding: 2% 0%;
  width: 60%;
  line-height: 1.3; }
  @media screen and (max-width: 850px) {
    .sb {
      font-size: 1em; } }
  @media screen and (max-width: 600px) {
    .sb {
      width: 100%; } }
  @media screen and (max-width: 500px) {
    .sb {
      font-size: .9em;
      padding: 4% 0%; } }

.lyric1 {
  font-family: "magpie";
  font-weight: 400;
  font-size: 2em;
  font-style: italic;
  color: #bf422e;
  line-height: 1.5; }
  @media screen and (max-width: 850px) {
    .lyric1 {
      font-size: 1.3em; } }

.lyric2 {
  font-family: "magpie";
  font-weight: 400;
  font-size: 1.6em;
  font-style: italic;
  color: #f3e7e5;
  line-height: 1.3; }
  @media screen and (max-width: 850px) {
    .lyric2 {
      font-size: 1.1em; } }

.intro, .intro2, .intro3, .part1, .part2, .part2a, .part3, .part4, .part5 {
  width: 60%;
  margin: auto; }
  @media screen and (max-width: 1000px) {
    .intro, .intro2, .intro3, .part1, .part2, .part2a, .part3, .part4, .part5 {
      width: 70%; } }

header {
  background: url(images/guitar.gif) no-repeat center top;
  background-size: 100%;
  width: 100%;
  height: 37.5vw;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center; }

.right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
      -ms-flex-pack: end;
          justify-content: flex-end; }

.intro .i:first-child:first-letter {
  font-size: 3em;
  float: left;
  padding: 1%;
  font-family: "magpie";
  line-height: .7; }
.intro p:nth-child(3) {
  margin-left: 25%; }
.intro .right:nth-child(4) {
  margin-right: 25%; }

.moon {
  height: 20vw;
  padding-top: 5%; }
  @media screen and (max-width: 1100px) {
    .moon {
      padding-top: 7%;
      height: 30vw; } }
  @media screen and (max-width: 850px) {
    .moon {
      padding-top: 5%;
      height: 20vw; } }
  @media screen and (max-width: 700px) {
    .moon {
      height: 25vw; } }
  @media screen and (max-width: 600px) {
    .moon {
      height: 30vw; } }
  .moon p:nth-child(1) {
    margin-left: 25%; }
    @media screen and (max-width: 600px) {
      .moon p:nth-child(1) {
        margin-left: 10%; } }
  .moon p:nth-child(2) {
    margin-left: 30%; }
    @media screen and (max-width: 600px) {
      .moon p:nth-child(2) {
        margin-left: 15%; } }
  .moon p:nth-child(3) {
    margin-left: 35%; }
    @media screen and (max-width: 600px) {
      .moon p:nth-child(3) {
        margin-left: 20%; } }
  .moon p:nth-child(4) {
    margin-left: 40%; }
    @media screen and (max-width: 600px) {
      .moon p:nth-child(4) {
        margin-left: 25%; } }

@-webkit-keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }

@keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
#l1, #l2, #l3, #l4 {
  opacity: 0; }

.l1-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1; }

.l2-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: .5s;
          animation-delay: .5s; }

.l3-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 1s;
          animation-delay: 1s; }

.l4-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s; }

.leave {
  height: 10vw;
  padding-top: 5%; }
  @media screen and (max-width: 1100px) {
    .leave {
      height: 17vw; } }
  .leave p:nth-child(1) {
    margin-left: 25%; }
    @media screen and (max-width: 600px) {
      .leave p:nth-child(1) {
        margin-left: 10%; } }
  .leave p:nth-child(2) {
    margin-left: 30%; }
    @media screen and (max-width: 600px) {
      .leave p:nth-child(2) {
        margin-left: 15%; } }

#l5, #l6 {
  opacity: 0; }

.color {
  background: url(images/color.jpg) no-repeat center top;
  background-size: 100%;
  height: 75vw;
  margin: 3% 0%; }
  @media screen and (max-width: 630px) {
    .color {
      height: 75vw;
      padding-top: 80%; } }
  @media screen and (max-width: 530px) {
    .color {
      height: 65vw; } }
  @media screen and (max-width: 450px) {
    .color {
      height: 70vw; } }
  .color .fall {
    padding-top: 15%;
    padding-left: 3%; }
    @media screen and (max-width: 720px) {
      .color .fall {
        padding-top: 5%; } }
    .color .fall p {
      font-size: 3em;
      line-height: 1; }
      @media screen and (max-width: 630px) {
        .color .fall p {
          color: #bf422e; } }
    .color .fall p:nth-child(1) {
      font-size: 2em;
      margin-left: 3%; }
      @media screen and (max-width: 1300px) {
        .color .fall p:nth-child(1) {
          font-size: 1.5em;
          line-height: 1.2; } }
      @media screen and (max-width: 600px) {
        .color .fall p:nth-child(1) {
          font-size: 1.2em; } }
      @media screen and (max-width: 530px) {
        .color .fall p:nth-child(1) {
          font-size: 1em; } }
    .color .fall p:nth-child(2) {
      font-size: 2em;
      line-height: 1.5;
      margin-left: 10%; }
      @media screen and (max-width: 1300px) {
        .color .fall p:nth-child(2) {
          font-size: 1.5em;
          line-height: 1.2; } }
      @media screen and (max-width: 910px) {
        .color .fall p:nth-child(2) {
          margin-left: 4%; } }
      @media screen and (max-width: 600px) {
        .color .fall p:nth-child(2) {
          font-size: 1.2em; } }
      @media screen and (max-width: 530px) {
        .color .fall p:nth-child(2) {
          font-size: 1em; } }
    .color .fall p:nth-child(3) {
      padding-top: 1%;
      margin-left: 15%; }
      @media screen and (max-width: 1300px) {
        .color .fall p:nth-child(3) {
          font-size: 2em; } }
      @media screen and (max-width: 910px) {
        .color .fall p:nth-child(3) {
          margin-left: 8%; } }
      @media screen and (max-width: 600px) {
        .color .fall p:nth-child(3) {
          font-size: 1.5em; } }
      @media screen and (max-width: 530px) {
        .color .fall p:nth-child(3) {
          font-size: 1.2em; } }
    .color .fall p:nth-child(4) {
      margin-left: 18%; }
      @media screen and (max-width: 1300px) {
        .color .fall p:nth-child(4) {
          font-size: 2em; } }
      @media screen and (max-width: 910px) {
        .color .fall p:nth-child(4) {
          margin-left: 11%; } }
      @media screen and (max-width: 600px) {
        .color .fall p:nth-child(4) {
          font-size: 1.5em; } }
      @media screen and (max-width: 530px) {
        .color .fall p:nth-child(4) {
          font-size: 1.2em; } }
    .color .fall p:nth-child(5) {
      margin-left: 21%; }
      @media screen and (max-width: 1300px) {
        .color .fall p:nth-child(5) {
          font-size: 2em; } }
      @media screen and (max-width: 910px) {
        .color .fall p:nth-child(5) {
          margin-left: 14%; } }
      @media screen and (max-width: 600px) {
        .color .fall p:nth-child(5) {
          font-size: 1.5em; } }
      @media screen and (max-width: 530px) {
        .color .fall p:nth-child(5) {
          font-size: 1.2em; } }
    .color .fall p:nth-child(6) {
      margin-left: 24%; }
      @media screen and (max-width: 1300px) {
        .color .fall p:nth-child(6) {
          font-size: 2em; } }
      @media screen and (max-width: 910px) {
        .color .fall p:nth-child(6) {
          margin-left: 17%; } }
      @media screen and (max-width: 600px) {
        .color .fall p:nth-child(6) {
          font-size: 1.5em; } }
      @media screen and (max-width: 530px) {
        .color .fall p:nth-child(6) {
          font-size: 1.2em; } }
    .color .fall p:nth-child(7) {
      margin-left: 27%; }
      @media screen and (max-width: 1300px) {
        .color .fall p:nth-child(7) {
          font-size: 2em; } }
      @media screen and (max-width: 910px) {
        .color .fall p:nth-child(7) {
          margin-left: 20%; } }
      @media screen and (max-width: 600px) {
        .color .fall p:nth-child(7) {
          font-size: 1.5em; } }
      @media screen and (max-width: 530px) {
        .color .fall p:nth-child(7) {
          font-size: 1.2em; } }
  .color .seedlings {
    padding-top: 10%;
    padding-left: 3%; }
    @media screen and (max-width: 1300px) {
      .color .seedlings {
        padding-right: 3%;
        z-index: -999; } }
    @media screen and (max-width: 1000px) {
      .color .seedlings {
        padding-right: 3%; } }
    @media screen and (max-width: 850px) {
      .color .seedlings {
        padding-top: 3%; } }
    .color .seedlings p {
      font-size: 2em;
      line-height: 1.5; }
      @media screen and (max-width: 1300px) {
        .color .seedlings p {
          font-size: 1.5em;
          line-height: 1.2; } }
      @media screen and (max-width: 630px) {
        .color .seedlings p {
          color: #bf422e; } }
      @media screen and (max-width: 600px) {
        .color .seedlings p {
          font-size: 1.2em; } }
      @media screen and (max-width: 530px) {
        .color .seedlings p {
          font-size: 1em; } }
    .color .seedlings p:nth-child(1) {
      margin-left: 75%; }
      @media screen and (max-width: 910px) {
        .color .seedlings p:nth-child(1) {
          margin-left: 0%;
          text-align: right;
          padding-right: 6%; } }
    .color .seedlings p:nth-child(2) {
      margin-left: 65%; }
      @media screen and (max-width: 910px) {
        .color .seedlings p:nth-child(2) {
          margin-left: 0%;
          text-align: right;
          padding-right: 6%; } }
    .color .seedlings p:nth-child(3) {
      font-size: 3em;
      margin-left: 55%; }
      @media screen and (max-width: 1300px) {
        .color .seedlings p:nth-child(3) {
          font-size: 2em;
          line-height: 1.2; } }
      @media screen and (max-width: 910px) {
        .color .seedlings p:nth-child(3) {
          margin-left: 0%;
          text-align: right;
          padding-right: 6%; } }
      @media screen and (max-width: 600px) {
        .color .seedlings p:nth-child(3) {
          font-size: 1.5em; } }
      @media screen and (max-width: 530px) {
        .color .seedlings p:nth-child(3) {
          font-size: 1.2em; } }
    .color .seedlings p:nth-child(4) {
      margin-left: 45%; }
      @media screen and (max-width: 910px) {
        .color .seedlings p:nth-child(4) {
          margin-left: 0%;
          text-align: right;
          padding-right: 6%; } }
    .color .seedlings p:nth-child(5) {
      margin-left: 35%; }
      @media screen and (max-width: 910px) {
        .color .seedlings p:nth-child(5) {
          margin-left: 0%;
          text-align: right;
          padding-right: 6%; } }
    .color .seedlings p:nth-child(6) {
      margin-left: 25%; }
      @media screen and (max-width: 910px) {
        .color .seedlings p:nth-child(6) {
          margin-left: 0%;
          text-align: right;
          padding-right: 5%; } }

#l7, #l8, #l9, #l10, #l11, #l12, #l13, #l14, #l15, #l16, #l17, #l18, #l19 {
  opacity: 0; }

.l9-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s; }

.l10-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 1.75s;
          animation-delay: 1.75s; }

.l11-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 2s;
          animation-delay: 2s; }

.l12-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 2.25s;
          animation-delay: 2.25s; }

.l13-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s; }

.l14-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
  -webkit-animation-delay: 3s;
          animation-delay: 3s; }

.l15-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 3.5s;
          animation-delay: 3.5s; }

.l16-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 4s;
          animation-delay: 4s; }

.l17-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s; }

.l18-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 5s;
          animation-delay: 5s; }

.l19-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 5.5s;
          animation-delay: 5.5s; }

.part2 .right:nth-child(3) {
  margin-right: 15%; }

.briars {
  height: 15vw;
  padding-top: 5%; }
  @media screen and (max-width: 1100px) {
    .briars {
      height: 20vw; } }
  @media screen and (max-width: 600px) {
    .briars {
      height: 25vw; } }
  @media screen and (max-width: 600px) {
    .briars p {
      font-size: 1.1em; } }
  .briars p:nth-child(1) {
    margin-left: 10%; }
    @media screen and (max-width: 600px) {
      .briars p:nth-child(1) {
        margin-left: 0%;
        text-align: left;
        padding-left: 10%; } }
  .briars p:nth-child(2) {
    margin-left: 15%; }
    @media screen and (max-width: 600px) {
      .briars p:nth-child(2) {
        margin-left: 0%;
        text-align: left;
        padding-left: 10%; } }
  .briars p:nth-child(3) {
    margin-left: 20%; }
    @media screen and (max-width: 600px) {
      .briars p:nth-child(3) {
        margin-left: 0%;
        text-align: left;
        padding-left: 10%; } }
  .briars p:nth-child(4) {
    margin-left: 25%; }
    @media screen and (max-width: 600px) {
      .briars p:nth-child(4) {
        margin-left: 0%;
        text-align: left;
        padding-left: 10%; } }

.briars2 {
  height: 15vw;
  padding-top: 3%;
  padding-bottom: 4%; }
  @media screen and (max-width: 1100px) {
    .briars2 {
      height: 20vw; } }
  @media screen and (max-width: 600px) {
    .briars2 {
      height: 25vw; } }
  @media screen and (max-width: 600px) {
    .briars2 p {
      font-size: 1.1em; } }
  .briars2 p:nth-child(1) {
    margin-left: 40%; }
    @media screen and (max-width: 600px) {
      .briars2 p:nth-child(1) {
        margin-left: 0%;
        text-align: right;
        padding-right: 10%; } }
  .briars2 p:nth-child(2) {
    margin-left: 45%; }
    @media screen and (max-width: 600px) {
      .briars2 p:nth-child(2) {
        margin-left: 0%;
        text-align: right;
        padding-right: 10%; } }
  .briars2 p:nth-child(3) {
    margin-left: 50%; }
    @media screen and (max-width: 600px) {
      .briars2 p:nth-child(3) {
        margin-left: 0%;
        text-align: right;
        padding-right: 10%; } }
  .briars2 p:nth-child(4) {
    margin-left: 55%; }
    @media screen and (max-width: 600px) {
      .briars2 p:nth-child(4) {
        margin-left: 0%;
        text-align: right;
        padding-right: 10%; } }

#l20, #l21, #l22, #l23, #l24, #l25, #l26, #l27 {
  opacity: 0; }

.part2a p:nth-child(2) {
  margin-left: 25%; }
.part2a p:nth-child(6) {
  margin-left: 25%; }
.part2a .right:nth-child(3) {
  margin-right: 10%; }
.part2a .right:nth-child(5) {
  margin-right: 20%; }
.part2a .right:nth-child(7) {
  margin-right: 30%; }

.rain {
  height: 15vw;
  padding-top: 5%;
  padding-bottom: 5%; }
  @media screen and (max-width: 1000px) {
    .rain {
      height: 18vw; } }
  @media screen and (max-width: 800px) {
    .rain {
      height: 20vw; } }
  @media screen and (max-width: 600px) {
    .rain {
      height: 25vw; } }
  @media screen and (max-width: 450px) {
    .rain p {
      font-size: 1em; } }
  .rain p:nth-child(1) {
    margin-left: 25%; }
    @media screen and (max-width: 600px) {
      .rain p:nth-child(1) {
        margin-left: 10%; } }
  .rain p:nth-child(2) {
    margin-left: 30%; }
    @media screen and (max-width: 600px) {
      .rain p:nth-child(2) {
        margin-left: 15%; } }
  .rain p:nth-child(3) {
    margin-left: 35%; }
    @media screen and (max-width: 600px) {
      .rain p:nth-child(3) {
        margin-left: 20%; } }
  .rain p:nth-child(4) {
    margin-left: 40%; }
    @media screen and (max-width: 600px) {
      .rain p:nth-child(4) {
        margin-left: 25%; } }

#l28, #l29, #l30, #l31 {
  opacity: 0; }

#vine1 {
  background: url(images/vine.gif) no-repeat center top;
  background-size: 100%;
  position: relative;
  z-index: -999;
  width: 100%;
  height: 100vw;
  margin-top: -100%;
  opacity: 0; }
  @media screen and (max-width: 600px) {
    #vine1 {
      opacity: .2; } }

.stage {
  background: url(images/stage.jpg) no-repeat center top;
  background-size: 100%;
  height: 68vw; }
  @media screen and (max-width: 630px) {
    .stage {
      height: 85vw; } }
  @media screen and (max-width: 450px) {
    .stage {
      height: 90vw; } }
  .stage p {
    font-size: 3em; }
  .stage p:nth-child(1) {
    font-size: 2.5em;
    padding-top: 15%;
    padding-left: 5%; }
    @media screen and (max-width: 1200px) {
      .stage p:nth-child(1) {
        font-size: 2em; } }
    @media screen and (max-width: 900px) {
      .stage p:nth-child(1) {
        font-size: 1.8em; } }
    @media screen and (max-width: 800px) {
      .stage p:nth-child(1) {
        padding-top: 35%; } }
    @media screen and (max-width: 630px) {
      .stage p:nth-child(1) {
        padding-top: 70%;
        color: #bf422e;
        padding-left: 20%; } }
    @media screen and (max-width: 500px) {
      .stage p:nth-child(1) {
        padding-left: 10%; } }
  .stage p:nth-child(2) {
    padding-top: 40%;
    padding-left: 50%; }
    @media screen and (max-width: 1200px) {
      .stage p:nth-child(2) {
        font-size: 2.5em; } }
    @media screen and (max-width: 900px) {
      .stage p:nth-child(2) {
        font-size: 2.1em;
        padding-top: 30%; } }
    @media screen and (max-width: 800px) {
      .stage p:nth-child(2) {
        padding-top: 15%; } }
    @media screen and (max-width: 630px) {
      .stage p:nth-child(2) {
        padding-top: 2%;
        color: #bf422e;
        padding-left: 30%;
        font-size: 1.8em; } }

#l32, #l33 {
  opacity: 0; }

.part3 .right:nth-child(1) {
  width: 110%;
  margin-left: -10%;
  padding-top: 7%; }
.part3 .right:nth-child(3) {
  width: 110%;
  margin-left: -20%; }
  @media screen and (max-width: 600px) {
    .part3 .right:nth-child(3) {
      width: 100%;
      margin-left: 0%; } }
.part3 .right:nth-child(4) {
  margin-right: 20%; }
  @media screen and (max-width: 600px) {
    .part3 .right:nth-child(4) {
      margin-right: 0%; } }

.profile {
  background: url(images/profile.jpg) no-repeat center top;
  background-size: 100%;
  height: 65vw;
  margin-top: 5%; }
  @media screen and (max-width: 630px) {
    .profile {
      background-image: url(images/sun.jpg);
      height: 70vw;
      padding-top: 73%; } }
  @media screen and (max-width: 550px) {
    .profile {
      height: 85vw; } }
  @media screen and (max-width: 550px) {
    .profile {
      height: 90vw; } }
  @media screen and (max-width: 1250px) {
    .profile p {
      font-size: 1.4em; } }
  @media screen and (max-width: 950px) {
    .profile p {
      font-size: 1.2em; } }
  @media screen and (max-width: 700px) {
    .profile p {
      font-size: 1.1em; } }
  @media screen and (max-width: 630px) {
    .profile p {
      color: #bf422e; } }
  @media screen and (max-width: 450px) {
    .profile p {
      font-size: 1em; } }
  .profile .p1 {
    padding-top: 7%;
    padding-left: 35%; }
    @media screen and (max-width: 1250px) {
      .profile .p1 {
        padding-top: 4%;
        padding-left: 30%; } }
    @media screen and (max-width: 1000px) {
      .profile .p1 {
        padding-top: 3%; } }
    @media screen and (max-width: 800px) {
      .profile .p1 {
        padding-left: 25%; } }
    @media screen and (max-width: 630px) {
      .profile .p1 {
        padding-left: 5%; } }
    .profile .p1 p:nth-child(2) {
      padding-left: 5%; }
      @media screen and (max-width: 415px) {
        .profile .p1 p:nth-child(2) {
          padding-left: 0%; } }
  .profile .p2 {
    padding-left: 60%; }
    @media screen and (max-width: 1250px) {
      .profile .p2 {
        padding-left: 55%; } }
    @media screen and (max-width: 1000px) {
      .profile .p2 {
        margin-top: -2%; } }
    @media screen and (max-width: 800px) {
      .profile .p2 {
        padding-left: 52%; } }
    @media screen and (max-width: 630px) {
      .profile .p2 {
        padding-left: 40%; } }
    @media screen and (max-width: 500px) {
      .profile .p2 {
        padding-left: 48%; } }
    .profile .p2 p:nth-child(2) {
      padding-left: 5%; }
      @media screen and (max-width: 415px) {
        .profile .p2 p:nth-child(2) {
          padding-left: 0%; } }
  .profile .p3 {
    padding-top: 2%;
    padding-left: 40%; }
    @media screen and (max-width: 1250px) {
      .profile .p3 {
        padding-left: 35%; } }
    @media screen and (max-width: 800px) {
      .profile .p3 {
        padding-left: 30%; } }
    @media screen and (max-width: 630px) {
      .profile .p3 {
        padding-left: 10%; } }
    @media screen and (max-width: 500px) {
      .profile .p3 {
        padding-left: 5%; } }
    .profile .p3 p:nth-child(2) {
      padding-left: 5%; }
      @media screen and (max-width: 415px) {
        .profile .p3 p:nth-child(2) {
          padding-left: 0%; } }
  .profile .p4 {
    padding-left: 65%; }
    @media screen and (max-width: 1250px) {
      .profile .p4 {
        padding-left: 60%; } }
    @media screen and (max-width: 1000px) {
      .profile .p4 {
        margin-top: -2%; } }
    @media screen and (max-width: 800px) {
      .profile .p4 {
        padding-left: 57%; } }
    @media screen and (max-width: 630px) {
      .profile .p4 {
        padding-left: 45%; } }
    @media screen and (max-width: 500px) {
      .profile .p4 {
        padding-left: 48%; } }
    .profile .p4 p:nth-child(2) {
      padding-left: 5%; }
      @media screen and (max-width: 415px) {
        .profile .p4 p:nth-child(2) {
          padding-left: 0%; } }
  .profile .p5 {
    padding-top: 2%;
    padding-left: 45%; }
    @media screen and (max-width: 1250px) {
      .profile .p5 {
        padding-left: 40%; } }
    @media screen and (max-width: 800px) {
      .profile .p5 {
        padding-left: 35%; } }
    @media screen and (max-width: 630px) {
      .profile .p5 {
        padding-left: 15%; } }
    @media screen and (max-width: 500px) {
      .profile .p5 {
        padding-left: 5%; } }
    .profile .p5 p:nth-child(2) {
      padding-left: 5%; }
      @media screen and (max-width: 415px) {
        .profile .p5 p:nth-child(2) {
          padding-left: 0%; } }
  .profile .p6 {
    padding-left: 70%; }
    @media screen and (max-width: 1250px) {
      .profile .p6 {
        padding-left: 65%; } }
    @media screen and (max-width: 1000px) {
      .profile .p6 {
        margin-top: -2%; } }
    @media screen and (max-width: 800px) {
      .profile .p6 {
        padding-left: 62%; } }
    @media screen and (max-width: 630px) {
      .profile .p6 {
        padding-left: 50%; } }
    @media screen and (max-width: 500px) {
      .profile .p6 {
        padding-left: 48%; } }
    .profile .p6 p:nth-child(2) {
      padding-left: 5%; }
      @media screen and (max-width: 415px) {
        .profile .p6 p:nth-child(2) {
          padding-left: 0%; } }
  .profile .p7 {
    padding-top: 4%;
    padding-left: 55%; }
    @media screen and (max-width: 1250px) {
      .profile .p7 {
        padding-left: 50%; } }
    @media screen and (max-width: 800px) {
      .profile .p7 {
        padding-left: 45%; } }
    @media screen and (max-width: 630px) {
      .profile .p7 {
        padding-left: 25%; } }
    .profile .p7 p:nth-child(2) {
      padding-left: 5%; }
      @media screen and (max-width: 415px) {
        .profile .p7 p:nth-child(2) {
          padding-left: 0%; } }
  .profile .p8 {
    padding-top: 4%;
    padding-left: 65%; }
    @media screen and (max-width: 1250px) {
      .profile .p8 {
        padding-left: 60%; } }
    @media screen and (max-width: 1000px) {
      .profile .p8 {
        margin-top: -2%; } }
    @media screen and (max-width: 800px) {
      .profile .p8 {
        padding-left: 55%; } }
    @media screen and (max-width: 630px) {
      .profile .p8 {
        padding-left: 35%; } }
    .profile .p8 p:nth-child(1) {
      font-size: 2em; }
      @media screen and (max-width: 1250px) {
        .profile .p8 p:nth-child(1) {
          font-size: 1.7em; } }
      @media screen and (max-width: 700px) {
        .profile .p8 p:nth-child(1) {
          font-size: 1.4em; } }
      @media screen and (max-width: 450px) {
        .profile .p8 p:nth-child(1) {
          font-size: 1.2em; } }
    .profile .p8 p:nth-child(2) {
      padding-left: 10%;
      font-size: 2.5em; }
      @media screen and (max-width: 1250px) {
        .profile .p8 p:nth-child(2) {
          font-size: 1.7em; } }
      @media screen and (max-width: 700px) {
        .profile .p8 p:nth-child(2) {
          font-size: 1.4em;
          padding-left: 13%; } }
      @media screen and (max-width: 450px) {
        .profile .p8 p:nth-child(2) {
          font-size: 1.2em; } }

#l34, #l35, #l36, #l37, #l38, #l39, #l40, #l41, #l42, #l43, #l44, #l45, #l46, #l47, #l48, #l49 {
  opacity: 0; }

.l20-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 6s;
          animation-delay: 6s; }

.l21-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
  -webkit-animation-delay: 6.5s;
          animation-delay: 6.5s; }

.l22-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 7.5s;
          animation-delay: 7.5s; }

.l23-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 8s;
          animation-delay: 8s; }

.l24-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 9s;
          animation-delay: 9s; }

.l25-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 10s;
          animation-delay: 10s; }

.l26-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 11s;
          animation-delay: 11s; }

.l27-animate {
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-delay: 12s;
          animation-delay: 12s; }

.part4 {
  padding-top: 5%; }
  .part4 p:nth-child(2) {
    margin-left: 5%; }
  .part4 .right:nth-child(3) {
    margin-right: 15%; }

#bird {
  background: url(images/bird.gif) no-repeat center top;
  background-size: 80%;
  position: relative;
  width: 100%;
  height: 50vw;
  margin-top: 5%;
  opacity: 0; }
  @media screen and (max-width: 500px) {
    #bird {
      height: 60vw; } }
  #bird p:nth-child(1) {
    color: #35130e;
    padding-top: 10%;
    margin-left: 12%; }
    @media screen and (max-width: 450px) {
      #bird p:nth-child(1) {
        margin-left: 5%; } }
  #bird p:nth-child(2) {
    color: #35130e;
    margin-left: 20%; }
    @media screen and (max-width: 800px) {
      #bird p:nth-child(2) {
        margin-left: 15%; } }
    @media screen and (max-width: 450px) {
      #bird p:nth-child(2) {
        margin-left: 10%; } }
  #bird p:nth-child(3) {
    color: #35130e;
    margin-left: 32%; }
    @media screen and (max-width: 800px) {
      #bird p:nth-child(3) {
        margin-left: 20%; } }
    @media screen and (max-width: 450px) {
      #bird p:nth-child(3) {
        margin-left: 15%; } }
  #bird p:nth-child(4) {
    margin-left: 38%; }
    @media screen and (max-width: 800px) {
      #bird p:nth-child(4) {
        margin-left: 25%; } }
    @media screen and (max-width: 450px) {
      #bird p:nth-child(4) {
        margin-left: 20%; } }
  #bird p:nth-child(5) {
    color: #35130e;
    padding-top: 15%;
    margin-left: 60%; }
    @media screen and (max-width: 800px) {
      #bird p:nth-child(5) {
        margin-left: 65%; } }

#l50, #l51, #l52, #l53, #l54 {
  opacity: 0; }

.l1b-animate {
  -webkit-animation: fade2 2s;
          animation: fade2 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0; }

.l1c-animate {
  -webkit-animation: fade2 2s;
          animation: fade2 2s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  opacity: 0;
  -webkit-animation-delay: 4.5s;
          animation-delay: 4.5s; }

@-webkit-keyframes fade2 {
  0% {
    opacity: 0; }
  100% {
    opacity: .3; } }

@keyframes fade2 {
  0% {
    opacity: 0; }
  100% {
    opacity: .3; } }
.part5 {
  margin-top: 7%;
  margin-bottom: 5%; }
  .part5 p:nth-child(1) {
    margin-left: 15%; }
  .part5 p:nth-child(2) {
    margin-left: 25%; }
  .part5 .right:nth-child(3) {
    margin-right: 25%; }
  .part5 .right:nth-child(4) {
    margin-right: 32%; }

footer {
  width: 100%; }
  footer img {
    width: 100%; }

/*# sourceMappingURL=style.css.map */