body {
  height: 100%;
  background: url('../images/clouds.png') rgb(83, 168, 223);
  background-repeat: no-repeat;
  background-size: auto auto;
  background-position: 100% 200px;
  font: 400 1.125em/1.38 Muli;
  color: rgb(0, 0, 0);
}

.button-about {
  display: block;
  float: left;
  width: 6.5%;
  height: 21px;
  margin: 82px 0 0 8.375%;
  background-image: none, url('../images/buttonAbout.png');
  background-repeat: repeat, no-repeat;
  background-size: auto auto, auto auto;
  background-position: left top, center center;
  background-attachment: scroll, scroll;
}

.button-about:hover {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  background-image: url('../images/buttonAbout_on.png'), none;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
}

.button-about:active {
  background-image: url('../images/buttonAbout_on.png'), none;
}

.button-media {
  display: block;
  float: left;
  width: 5.9166666666%;
  height: 21px;
  margin: 82px 0 0 1.31771%;
  background: none, url('../images/buttonMedia.png') rgba(222, 222, 222, 0);
  background-repeat: repeat, no-repeat;
  background-size: auto auto, auto auto;
  background-position: left top, center center;
  background-attachment: scroll, scroll;
}

.button-media:hover {
  background-image: url('../images/buttonMedia_on.png'), none;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
}

.button-media:active {
  background-image: url('../images/buttonMedia_on.png'), none;
}

.button-story {
  display: block;
  float: left;
  width: 6.5%;
  height: 24px;
  margin: 82px 0 0 1.21875%;
  background: none, url('../images/buttonStory.png') rgba(222, 222, 222, 0);
  background-repeat: repeat, no-repeat;
  background-size: auto auto, auto auto;
  background-position: left top, center center;
  background-attachment: scroll, scroll;
}

.button-story:hover {
  background-image: url('../images/buttonStory_on.png'), none;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
}

.button-story:active {
  background-image: url('../images/buttonStory_on.png'), none;
}

.button-support {
  display: block;
  float: left;
  width: 9.0833333333%;
  height: 24px;
  margin: 82px 0 0 1.22396%;
  background: none, url('../images/buttonSupport.png') rgba(222, 222, 222, 0);
  background-repeat: repeat, no-repeat;
  background-size: auto auto, auto auto;
  background-position: left top, center center;
  background-attachment: scroll, scroll;
}

.button-support:hover {
  background-image: url('../images/buttonSupport_on.png'), none;
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
}

.button-support:active {
  background-image: url('../images/buttonSupport_on.png'), none;
}

.container {
  float: left;
  width: 100%;
  height: 196px;
}

.fivefanslogo {
  display: block;
  float: left;
  width: 15.6666666666%;
  height: 172px;
  margin-left: 5.11198%;
}

.fivefanslogo .image {
  width: 188px;
}

.header {
  float: left;
  width: 100%;
  margin-top: 24px;
}

.image {
  display: block;
  float: left;
  height: auto;
  overflow: hidden;
}

.logo {
  display: block;
  float: left;
  width: 30.4166666666%;
  height: 118px;
  margin-top: 35px;
}

.logo .image {
  width: 359px;
  margin-left: -0.06055%;
}

.mainblocktext {
  float: left;
  clear: both;
  max-width: 1000px;
  margin-left: 2%;
  font-size: 1.3em;
  font-family: 'Varela Round', sans-serif;
  line-height: 1.38;
  color: rgb(0, 0, 0);
}

.mainblocktext-1 p {
  margin-bottom: 1em;
}

.image-3 {
  clear: both;
  width: 1024px;
  margin: 102px 0 0 2%;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, .5);
}

.image-4,
.image-5 {
  clear: both;
  width: 1024px;
  margin: 60px 0 0 2%;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, .5);
}

.image-6 {
  clear: both;
  width: 903px;
  margin: 18px 0 0 2%;
}

.image-7 {
  clear: both;
  width: 769px;
  margin: 24px 0 0 10%;
}

.image-8 {
  position: relative;
  clear: both;
  z-index: 7;
  width: 1536px;
  margin-top: 45px;
}

.image-9 {
  position: relative;
  clear: both;
  z-index: 3;
  width: 421px;
  margin: -255px 0 0 50%;
}

.mainblocktext-1 {
  min-height: 307px;
  margin-top: 42px;
}

.mainblocktext-2 {
  width: 1024px;
  height: 52px;
  min-height: 84px;
  margin-top: 27px;
}

@media(max-width: 900px) {
  .container .header {
    width: 99.8890122086%;
  }

  .fivefanslogo .image {
    width: 100%;
    height: auto;
  }

  .header .button-about {
    position: relative;
    z-index: 11;
    width: 7.7862940368%;
    margin-top: 25px;
    margin-left: 2.39155%;
  }

  .header .button-media {
    position: relative;
    z-index: 13;
    width: 7.8975268088%;
    margin-top: -21px;
    margin-left: 44.15323%;
  }

  .header .button-story {
    position: relative;
    clear: both;
    z-index: 12;
    width: 9.788483932%;
    margin-top: -63px;
    margin-left: 37.36965%;
  }

  .header .button-support {
    position: relative;
    z-index: 14;
    width: 11.7906738272%;
    margin-top: 22px;
    margin-left: 49.3621399999%;
  }

  .header .fivefanslogo {
    width: 19.7997775305%;
    height: 155px;
    margin-top: -122px;
    margin-left: 3.91929%;
  }

  .header .logo {
    height: auto;
  }

  .image {
    height: auto;
  }

  .logo .image {
    width: 100%;
    height: auto;
    margin-left: -0.05699%;
  }

  .image-3,
  .image-4,
  .image-5 {
    width: 90%;
  }

  .image-6 {
    position: relative;
    z-index: 6;
    width: 90%;
    margin-top: -40px;
  }

  .image-7 {
    margin-top: 0;
    margin-left: 6.55556%;
  }

  .image-8 {
    position: relative;
    z-index: 7;
    width: 100%;
    margin-top: 127px;
  }

  .image-9 {
    position: relative;
    z-index: 3;
    margin-top: -217px;
  }

  .mainblocktext-1 {
    position: relative;
    z-index: 4;
    margin-top: 58px;
  }

  .mainblocktext-2 {
    width: 882px;
    height: 84px;
    margin-top: 17px;
  }
}

@media(max-width: 700px) {
  body {
    font-size: 1.125em;
  }

  .container {
    margin-top: 3156px;
  }

  .container .header {
    width: 97.3574408901%;
    margin-top: -3156px;
  }

  .fivefanslogo .image {
    width: 89.6021854191%;
    height: auto;
    margin-left: 0.0170699999%;
  }

  .header .button-about {
    position: relative;
    z-index: 11;
    width: 10%;
    margin-top: 15px;
    margin-left: 0.63509%;
  }

  .header .button-media {
    position: relative;
    z-index: 13;
    width: 10%;
    margin-top: -51px;
    margin-left: 45.19213%;
  }

  .header .button-story {
    position: relative;
    z-index: 12;
    width: 10%;
    margin-top: -80px;
    margin-left: 38.20846%;
  }

  .header .button-support {
    position: relative;
    z-index: 14;
    width: 15%;
    margin-top: -36px;
    margin-left: 63.47441%;
  }

  .header .fivefanslogo {
    width: 13.7931034482%;
    height: 68px;
    margin-top: -98px;
    margin-left: 84.51715%;
  }

  .header .logo {
    margin-top: 54px;
  }

  .image {
    height: auto;
  }

  .logo .image {
    height: auto;
    margin-left: -0.04885%;
  }

  .mainblocktext {
    clear: none;
  }

  .image-3 {
    margin-top: -3054px;
  }

  .image-4 {
    clear: none;
    margin-top: -2522px;
  }

  .image-5 {
    clear: none;
    margin-top: -1990px;
  }

  .image-6 {
    position: relative;
    clear: none;
    z-index: 6;
    margin-top: -1148px;
  }

  .image-7 {
    clear: none;
    width: 80%;
    margin-top: -895px;
    margin-left: 10%;
  }

  .image-8 {
    position: relative;
    clear: none;
    z-index: 7;
    margin-top: -312px;
  }

  .image-9 {
    position: relative;
    clear: none;
    z-index: 3;
    width: 50%;
    margin-top: -397px;
    margin-left: 47.37054%;
  }

  .mainblocktext-1 {
    position: relative;
    z-index: 4;
    margin-top: -1493px;
  }

  .mainblocktext-2 {
    width: 686px;
    margin-top: -1003px;
  }
}