@import url("styles.css");

.index section.seperator {
  margin-right: 20vw !important;
  padding-left: 20vw !important;
}

.index .intro {
  padding-left: 0px;
  padding-right: 0px;
  padding-top: 5vw;
  text-align: center;
  font-size: 1.8vw;
  font-family: 'Roboto-MediumItalic';
}

.index .ordered.contactus.right .pg-container {
  width: 100%;
}

.index .ordered.contactus.right img.pg-contactus {
  width: 45vw;
}

.index .pg-text-content:last-child p {
  padding-bottom: 0px;
  margin-bottom: 1.5vw;
}

.index a.styled-link:last-child {
  margin-top: 1vw;
  font-size: 2vw;
}

.index .ordered img,
.index .ordered figure.right img {
  width: 35vw;
}

.index img.pg-osallistu {
  width: 35vw;
}

.index section {
  padding-left: 10vw;
}

.index .left .pg-text-button .styled-link {
  margin-left: 10vw;
}

.index div.contactus {
  justify-content: space-between;
}

.index .contactus .pg-text-button .pg-container .pg-text {
  width: 100% !important;
}

.index .contactus figure.contactus {
  padding-right: 5vw;
}

/**
  Mobile Devices
*/
@media only screen and (max-width: 767px) {
  .index .intro {
    font-size: 3.5vw;
    margin-top: 3vw;
    margin-bottom: 10vw;
  }

  .index section {
    padding-left: 0vw;
    padding-right: 0vw;
    width: 80%;
    margin: auto;
  }

  .index a.styled-link {
    margin-top: 5vw !important;
  }

  .index a.styled-link {
    width: auto;
    height: 10vw;
  }

  .index img.pg-onnenpantti,
  .index img.pg-lahjoitukset,
  .index img.pg-osallistu,
  .index img.pg-contactus {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    width: 100vw !important;
  }

  .index div.lahjoitukset .pg-container,
  .index div.osallistu .pg-container,
  .index div.contactus .pg-container,
  .index div.onnenpantti .pg-container {
    padding-top: 10vw !important;
  }

  .index div.pg-text-button .pg-container {
    padding-bottom: 0vw !important;
  }

  .index div.pg-text-button,
  .index div.onnenpantti .pg-container {
    padding-bottom: 10vw !important;
  }

  .index .contactus figure.contactus {
    padding-right: 0px;
    margin-left: 5vw;
  }

  .index .lahjoitukset a.styled-link,
  .index .osallistu a.styled-link {
    margin-left: 20% !important;
    /* offset the section.content width and centering */
  }

  .index .contactus a.styled-link {
    margin-left: 30% !important;
    /* offset the section.content width */
  }
}

/**
  Tablet Devices
*/
@media only screen and (min-width: 768px) and (max-width: 1023px) {

  .index .intro {
    font-size: 2vw;
    padding-top: 5vw;
  }

  .index section.seperator,
  .index div.seperator {
    margin-right: 25vw !important;
  }

  .index div.seperator {
    margin-left: 10vw !important;
  }

  .index .ordered.left .pg-container {
    padding-left: 0px;
  }

  .index img.pg-onnenpantti,
  .index img.pg-lahjoitukset {
    width: 34vw !important;
  }

  .index img.pg-osallistu {
    width: 32vw !important;
  }

  .index a.styled-link {
    margin-top: 2.5vw;
    width: 30vw;
    height: 5vw;
  }

  .index section {
    padding-left: 5vw;
  }

  .index .pg-container .pg-text {
    width: 75%;
  }

  .index .left .pg-text-button .styled-link {
    margin-left: 8vw;
  }
}

/**
  Desktop Devices
*/
@media only screen and (min-width: 1024px) {
  .index .intro {
    font-size: 2vw;
  }

  .index img.pg-onnenpantti,
  .index img.pg-lahjoitukset {
    width: 25vw !important;
  }

  .index .pg-container .pg-text {
    width: 75% !important;
  }

  .index .ordered.right .pg-text {
    width: 87% !important;
  }

  .index section.seperator,
  .index section div.seperator {
    margin-right: 19vw !important;
  }

  .index .ordered.contactus.right .pg-container {
    width: 100%;
  }



  .index .contactus h6 {
    margin-bottom: 0px !important;
  }
}

@media only screen and (min-width: 1279px) {

  .index img.pg-onnenpantti,
  .index img.pg-lahjoitukset {
    width: 20vw !important;
  }

  .index a.styled-link:last-child {
    font-size: 1.4vw;
    width: 26vw;
  }

  .index a.styled-link {
    height: 4vw !important;
  }
}

/**
  Medium Desktop Devices
*/
@media only screen and (min-width: 1440px) and (max-width: 1920px) {}

/**
  Large Desktop Devices
*/
@media only screen and (min-width: 1921px) {}