/* Basic Styles
 * ------------------------------------	 */
body {
  font-size: 14px;
  line-height: 1.6;
  font-family: "Open Sans", sans-serif; }

a {
  text-decoration: none;
  outline: 0; }

header nav a, footer nav a {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase; }

header {
  height: 450px;
  background: url("../img/20230822_0069.jpg") center 20%;
  background-size: cover; }
  header nav {
    float: left;
    padding: 30px 30px 0 0; }
    header nav a {
      font-size: 1vw;
      display: inline-block;
      margin-left: 20px;
      color: white; }
      header nav a:hover {
        color: grey; }
    header nav .fab.fa-instagram {
      font-size: 3vw; }
  header h1 {
    text-align: center;
    font-size: 72px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    clear: both;
    padding-top: 200px;
    margin-bottom: 10px;
    line-height: 1; }
    header h1 span {
      display: inline-block;
      padding: 0.3em 0.5em 0.1em;
      border: white solid 10px; }
  header .kicker {
    text-align: center;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: white; }

footer {
  height: 100px;
  background: grey; }
  footer .lockup {
    margin: 30px; }
    footer .lockup .content-wrap {
      float: left; }
      footer .lockup .content-wrap .copyright {
        text-transform: uppercase;
        font-size: 12px; }
  footer nav {
    float: left;
    padding: 30px 30px 0 0; }
    footer nav a {
      display: inline-block;
      margin-right: 20px;
      color: white; }
      footer nav a:hover {
        color: grey; }
    footer nav .fab.fa-instagram {
      font-size: 3vw; }

.yhtye-header {
  width: 70%;
  min-width: 700px;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: 1vw; }
  .yhtye-header h2 {
    font-size: 3vw; }
  @media (max-width: 600px) {
    .yhtye-header {
      width: 90%;
      font-size: 3vw; }
      .yhtye-header h2 {
        font-size: 4vw; } }

.yhtye-div {
  width: 70%;
  min-width: 700px;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: clamp(1rem, 3vw, 2rem); }
  .yhtye-div h2 {
    font-size: 3vw; }
  @media (max-width: 600px) {
    .yhtye-div {
      width: 90%;
      font-size: 4vw; }
      .yhtye-div h2 {
        font-size: 4vw; } }

.muusikko-header {
  width: 70%;
  min-width: 700px;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: 1vw; }
  .muusikko-header h2 {
    font-size: 3vw; }

.muusikko-div {
  width: 70%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: clamp(1rem, 3vw, 2rem); }
  .muusikko-div .muusikko-img {
    flex: 10%;
    margin-right: 20px; }
  .muusikko-div .muusikko-text {
    flex: 25%; }
  @media (max-width: 600px) {
    .muusikko-div .muusikko-img {
      flex: 25%; }
    .muusikko-div .muusikko-text {
      flex: 100%; } }

.media-header {
  width: 70%;
  min-width: 700px;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: 1vw; }
  .media-header h2 {
    font-size: 3vw; }
  @media (max-width: 600px) {
    .media-header {
      font-size: 3vw; }
      .media-header h2 {
        font-size: 4vw; } }

.media-div {
  width: 70%;
  min-width: 700px;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: clamp(1rem, 3vw, 2rem); }
  .media-div h2 {
    font-size: 3vw; }

.yhteys-header {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: 1vw; }
  .yhteys-header h4 {
    font-size: 3vw; }
  .yhteys-header h2 {
    font-size: 3vw; }

.yhteys-div {
  width: 70%;
  margin: 0 auto;
  margin-bottom: 50px;
  font-size: clamp(1rem, 3vw, 2rem); }
  .yhteys-div h4 {
    font-size: 3vw; }
  .yhteys-div h2 {
    font-size: 2vw; }