/* ako-babymat.eu
-------------------------------------------------- */



/* inter
-------------------------------------------------- */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/inter-300-light.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  src: url(../fonts/inter-300-light-italic.woff2) format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/inter-500-medium.woff2) format('woff2');
}



/* basics
------------------------------------------------ */

* {
  box-sizing: border-box;
  margin: 0;
}

*::before, *::after {
  box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-wrap: anywhere;
  color: rgba(51, 51, 51, 1);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 100%;
  font-weight: 300;
  line-height: 1.75; /* 28 */
  letter-spacing: 0.015625rem; /* 1/64 */
}

img, video {
  display: block;
  width: 100%;
}



/* typo
------------------------------------------------ */

h1, h2 {
  font-weight: 300;
}

h3, h4, h5, h6, strong {
  font-weight: 500;
}

/* typo
------------------------------------------------ */

ul, ol {
  padding-left: 1.75rem;
}

ul {
  list-style: "\00BB\0020";
}

ul[class] {
  list-style: none;
  padding: 0;
}

/* typo
------------------------------------------------ */

h1 {
  font-size: 2.25rem;
  line-height: 1.167;
}

h2 {
  font-size: 1.5rem;
  line-height: 1.167;
}

h3, h4, h5, h6 {
  font-size: 1rem;
  line-height: 1.75;
}

blockquote, dl, figure, ol, p, pre, ul {
  font-size: 1rem;
  line-height: 1.75;
}

figcaption {
  font-size: 0.875rem;
  line-height: 1.5;
}

@media all and (min-width: 60em) {
  h1 {
    font-size: 4.5rem;
    line-height: 1.167;
  }
  h2 {
    font-size: 2.25rem;
    line-height: 1.167;
  }
}

/* typo
------------------------------------------------ */

h1, h2, figure {
  margin-top: 2.625rem; /* 1/1 gutter */
}

h3, h4, h5, h6 {
  margin-top: 1.75rem; /* 2/3 gutter */
}

blockquote, dl, ol, p, pre, ul {
  margin-top: 1.75rem; /* 2/3 gutter */
}

dd, dt, figcaption, li {
  margin-top: 0.875rem; /* 1/3 gutter */
}

hr {
  margin-top: 1.75rem; /* 2/3 gutter */
}

ul[class],
li[class] {
  margin-top: 0;
}

/* typo
------------------------------------------------ */

.block-site img {
  display: inline-block; /* text-align */
  margin-top: 0.875rem;
}

.block-site .site-logo img {
  max-width: 21rem; /* 8/1 */ /* height: 2.625rem */
}

.block-site .site-icon img {
  max-width: 10.5rem; /* 1/1 */ /* height: 10.5rem */
}

.block-site .site-languages li {
  display: inline-block;
}

.block-site .site-links li {
  display: inline-block;
}

/* typo
------------------------------------------------ */

.block-intro blockquote, .block-intro dl, .block-intro ol, .block-intro p, .block-intro pre, .block-intro ul {
  font-size: 1.25rem;
  line-height: 1.4;
}



/* link
------------------------------------------------ */

.header a {
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
}

.header a:hover, .header a:focus {
  text-decoration: underline;
}

.navigation a {
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
}

.navigation a:hover, .navigation a:focus {
  text-decoration: underline;
}

.main a {
  color: rgba(153, 153, 153, 1);
  text-decoration: underline;
}

.main a:hover, .main a:focus {
  color: rgba(51, 51, 51, 1);
}

.footer a {
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
}

.footer a:hover, .footer a:focus {
  text-decoration: underline;
}



/* background
------------------------------------------------ */

.header-block,
.navigation-block,
.main-block,
.footer-block {
  background-color: rgba(255, 255, 255, 1);
}

.main-block > * {
  background-color: rgba(238, 238, 238, 1);
}



/* width
------------------------------------------------ */

.header-block,
.navigation-block,
.main-block,
.footer-block {
  max-width: 90rem;
  margin: 0 auto 0;
}



/* flex
------------------------------------------------ */

.block-site,
.block-colours,
.block-intro,
.block-text,
.block-video,
.block-view {
  display: flex;
  flex-wrap: wrap;
}

.block-site {
  align-items: center; /* vertical */
}

.block-site > * {
  flex-basis: calc(100% - 2.625rem); /* 1/1 gutter */
  margin: 0 1.3125rem 0; /* 1/2 gutter */
}

.block-colours > *,
.block-intro > *,
.block-text > *,
.block-video > *,
.block-view > * {
  flex-basis: 100%;
  margin: 0;
}

/* flex
------------------------------------------------ */

.block-view .view-copy .copy-icons {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -0.875rem 0; /* 1/3 gutter */
}

.block-view .view-copy .copy-icons > * {
  flex-basis: calc(33.333% - 1.75rem); /* 2/3 gutter */
  margin: 0 0.875rem 0; /* 1/3 gutter */
}

/* flex @media
------------------------------------------------ */

@media all and (min-width: 15em) {
  .block-colours .colours-item {
    flex-basis: 50%;
  }
}

@media all and (min-width: 30em) {
  .block-site .site-logo {
    flex-basis: calc(33.333% - 2.625rem);
  }
  .block-site .site-icon {
    flex-basis: calc(33.333% - 2.625rem);
  }
  .block-site .site-languages {
    flex-basis: calc(33.333% - 2.625rem);
  }
  .block-site .site-contents {
    flex-basis: calc(50% - 2.625rem);
  }
  .block-colours .colours-item--01-03 {
    flex-basis: 33.333%;
  }
  .block-colours .colours-item--01-04 {
    flex-basis: 25%;
  }
}

@media all and (min-width: 45em) {
  .block-site .site-contents {
    flex-basis: calc(33.333% - 2.625rem);
  }
}

@media all and (min-width: 60em) {
  .block-site .site-contents {
    flex-basis: calc(25% - 2.625rem);
  }
  .block-view > * {
    flex-basis: 50%;
  }
}



/* blocks
------------------------------------------------ */

.block-site {
  padding: 0 0 0.875rem;
}

.block-site .site-logo,
.block-site .site-icon,
.block-site .site-languages,
.block-site .site-links {
  text-align: center;
}

.block-site .site-languages li {
  margin-left: 0.21875rem;
  margin-right: 0.21875rem;
}

.block-site .site-links li {
  margin-left: 0.4375rem;
  margin-right: 0.4375rem;
}

@media all and (min-width: 30em) {
  .block-site .site-logo {
    text-align: left;
  }
  .block-site .site-icon {
    text-align: center;
  }
  .block-site .site-languages {
    text-align: right;
  }
  .block-site .site-links {
    text-align: left;
  }
}

@media all and (min-width: 30em) {
  .block-site .site-languages li {
    margin-left: 0.4375rem;
    margin-right: 0m;
  }
  .block-site .site-links li {
    margin-left: 0;
    margin-right: 0.875rem;
  }
}

/* blocks
------------------------------------------------ */

.block-banner {
  padding: 0;
}

.block-banner {
  position: relative;
}

.block-banner .banner-media {
  overflow: hidden;
  height: 0;
}

.block-banner .banner-media {
  padding-bottom: 75%; /* 04/03 */
}

.block-banner .banner-copy {
  color: rgba(255, 255, 255, 1);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 10% 5.25rem 10%;
}

.block-banner .banner-copy *:first-child {
  margin-top: 0; /* reset */
}

@media all and (min-width: 60em) {
  .block-banner .banner-copy > * {
    padding-right: 35%; /* 10+25 */
  }
}

/* blocks
------------------------------------------------ */

.block-colours {
  padding: 0;
}

.block-colours .colours-item figure {
  position: relative;
  margin-top: 0; /* reset */
}

.block-colours .colours-item figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-top: 0; /* reset */
  padding: 0.4375rem 0.875rem 0.4375rem;
  background-color: rgba(255, 255, 255, 1);
}

/* blocks
------------------------------------------------ */

.block-intro {
  padding: 3.9375rem 0 3.9375rem;
}

.block-intro .intro-column {
  padding: 1.3125rem 10% 1.3125rem;
}

.block-intro .intro-column *:first-child {
  margin-top: 0; /* reset */
}

@media all and (min-width: 60em) {
  .block-intro .intro-column {
    padding-right: 35%; /* 10+25 */
  }
}

/* blocks
------------------------------------------------ */

.block-text {
  padding: 1.3125rem 0 1.3125rem;
}

.block-text .text-column {
  padding: 1.3125rem 10% 1.3125rem;
}

.block-text .text-column *:first-child {
  margin-top: 0; /* reset */
}

@media all and (min-width: 60em) {
  .block-text .text-column {
    padding-right: 35%; /* 10+25 */
  }
}

/* blocks
------------------------------------------------ */

.block-video {
  padding: 0;
}

.block-video .video-item figure:first-child {
  margin-top: 0; /* reset */
}

.block-video .video-item figcaption {
  margin-top: 0; /* reset */
  padding: 0.875rem 10% 0.875rem;
}

/* blocks
------------------------------------------------ */

.block-view {
  padding: 1.3125rem 0 1.3125rem;
}

.block-view .view-media {
  padding: 1.3125rem 0 1.3125rem;
}

.block-view .view-media figure:first-child {
  margin-top: 0; /* reset */
}

.block-view .view-media figcaption {
  margin-top: 0; /* reset */
  padding: 0.875rem 1.3125rem 0.875rem;
}

.block-view .view-copy {
  padding: 1.3125rem 10% 1.3125rem;
}

.block-view .view-copy h2:first-child {
  margin-top: 0; /* reset */
}

@media all and (min-width: 60em) {
  .block-view--reverse {
    flex-direction: row-reverse;
  }
}



/* sticky
------------------------------------------------ */

.navigation {
  z-index: 999;
}

@media all and (min-width: 45em) {
  .navigation {
    position: -webkit-sticky; /* safari */
    position: sticky;
    top: 0;
  }
  .main-block {
    scroll-margin-top: 3.5rem; /* navigation */
  }
}