/* Fonts */

@font-face {
  font-family: "CornerDisplay";
  src: url("fonts/CornerDisplayWEB-Regular.woff2") format('woff2');
}

@font-face {
  font-family: "CornerDisplay";
  src: url("fonts/CornerDisplayWEB-Bold.woff2") format('woff2');
  font-weight: bold;
}


/* Generic rules */

:focus {
  outline: none;
}

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  border: 0;
  height: 100%;
}

body {
  font-size: 16px;
  line-height: 24px;
  font-family: CornerDisplay, sans-serif, arial, Helvetica;
  color: #fff;
  background-color: #4864e2;
  display: flex;
  flex-direction: column;
  transition: background-color .2s ease;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

h1, h2, h3, h4, h5, h6 {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.1;
  word-wrap: break-word;
}

a, a:hover, a:active, a:focus, a:visited {
  color: #1d2859;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}


/* Main */

main {
  flex: 1 0 auto;
  overflow: hidden;
  position: relative;
}

main img {
  max-width: 100%;
  display: block;
}

section {
  position: relative;
}

section.labels {
  padding: 32px 16px;
  display: flex;
  justify-content: center;
}

section.labels .container {
  padding: 56px 24px;
  background-color: #fff;
  border-radius: 32px;
  overflow: hidden;
}

section.labels .title {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.36px;
  display: flex;
  justify-content: center;
}

section.labels .title > div {
  margin-bottom: 32px;
  position: relative;
}

section.labels .title > div::before,
section.labels .title > div::after {
  content: "";
  background-image: url(images/gold-leaves.svg);
  background-repeat: no-repeat;
  background-size: 36px auto;
  height: 48px;
  width: 34px;
  position: absolute;
  top: -5px;
  opacity: 0;
  transition: all ease-out 1s, opacity ease-out .5s;
  transform-origin: bottom right;
}

section.labels .title > div::before {
  left: -38px;
  transform: rotate(-45deg);
}

section.labels .title > div::after {
  right: -4px;
  transform: scaleX(-1) rotate(-45deg);
}

section.labels .title > div span {
  color: #1d2859;
  display: block;
  opacity: 0;
  transform: translateY(25px);
  transition: transform ease-out .8s, opacity ease-out .5s;
}

section.labels .title.visible > div::before {
  opacity: 1;
  transform: none;
}

section.labels .title.visible > div::after {
  opacity: 1;
  transform: scaleX(-1);
}

section.labels .title.visible > div span {
  opacity: 1;
  transform: none;
}

section.labels .items {
  opacity: 0;
  transition: transform ease-out .8s, opacity ease-out .5s;
  transform: translateY(25px);
}

section.labels .items.visible {
  opacity: 1;
  transform: none;
}

section.labels .items .holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  outline: none;
  user-select: none;
  will-change: transform;
}

section.labels .item:first-child {
  padding-bottom: 24px;
}

section.labels .item > div {
  padding: 16px 24px 24px;
  background-color: #fff;
  border-radius: 23px;
  border: 2px solid transparent;
  background: 
    linear-gradient(to bottom, #fff, #fff), 
    linear-gradient(83deg, #e6c39e 8%, #fff8f0 44%, #ffe2c3 84%);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  box-shadow: 0 0 50px 0 rgba(230, 195, 158, 0.3);
}

section.labels .item .img img {
  width: 260px;
  margin: 0 auto 16px;
}

section.labels .item .info {
  color: #e6c39e;
  text-align: center;
}

section.labels .item h3 {
  font-size: 18px;
  letter-spacing: -0.36px;
  margin-bottom: 6px;
}

section.labels .desc {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: -0.28px;
}

@media screen and (min-width: 769px) {
  
  section.labels {
    padding: 56px 40px;
  }
  
  section.labels .container {
    flex: 0 1 976px;
    padding: 72px 40px 80px;
  }
  
  section.labels .title {
    font-size: 24px;
  }
  
  section.labels .title > div {
    margin-bottom: 45px;
  }
  
  section.labels .title > div::before, 
  section.labels .title > div::after {
    background-size: 62px auto;
    height: 78px;
    width: 54px;
    top: -14px;
  }
  
  section.labels .title > div::before {
    left: -78px;
  }
  
  section.labels .title > div::after {
    right: -28px;
  }
  
  section.labels .items {
    opacity: 1;
    transform: none;
  }
  
  section.labels .items .holder {
    flex-direction: row;
    gap: 32px;
  }
  
  section.labels .item {
    opacity: 0;
    transition: transform ease-out .8s, opacity ease-out .5s;
  }
  
  section.labels .item:first-child {
    padding: 0;
    transform: translateX(-25px);
  }

  section.labels .item:last-child {
    transform: translateX(25px);
  }

  section.labels .items.visible .item {
    opacity: 1;
    transform: none;
  }
  
}


/* IE11/Edge specific rules */

_:-ms-fullscreen, :root body { 
  min-height: 100vh;
}