:root {
  --mainsize: 16px;
  --mainratio: 1.5;
  --br: 12px;

  --lineheight: calc(var(--mainsize) * var(--mainratio));
  --gap: var(--lineheight);

  --text: calc(var(--mainsize) * 1);

  --shadow-color: 202deg 100% 9%;
  --shadow-elevation-low:
    0px 1px 1.1px hsl(var(--shadow-color) / 0.25),
    0.1px 1.6px 1.8px -1.2px hsl(var(--shadow-color) / 0.26),
    0.1px 3.5px 4px -2.3px hsl(var(--shadow-color) / 0.27);
  --shadow-elevation-medium:
    0px 1px 1.1px hsl(var(--shadow-color) / 0.21),
    0.1px 2.5px 2.9px -0.6px hsl(var(--shadow-color) / 0.21),
    0.2px 4.7px 5.4px -1.2px hsl(var(--shadow-color) / 0.22),
    0.4px 9.3px 10.7px -1.8px hsl(var(--shadow-color) / 0.22),
    0.7px 17.7px 20.3px -2.3px hsl(var(--shadow-color) / 0.23);
  --shadow-elevation-high:
    0px 1px 1.1px hsl(var(--shadow-color) / 0.19),
    0.2px 4.1px 4.7px -0.3px hsl(var(--shadow-color) / 0.19),
    0.3px 7.1px 8.2px -0.5px hsl(var(--shadow-color) / 0.2),
    0.4px 10.5px 12.1px -0.8px hsl(var(--shadow-color) / 0.2),
    0.6px 15.1px 17.3px -1px hsl(var(--shadow-color) / 0.2),
    0.8px 21.5px 24.7px -1.3px hsl(var(--shadow-color) / 0.2),
    1.2px 30.2px 34.7px -1.6px hsl(var(--shadow-color) / 0.21),
    1.6px 42px 48.2px -1.8px hsl(var(--shadow-color) / 0.21),
    2.2px 57.4px 65.9px -2.1px hsl(var(--shadow-color) / 0.21),
    3px 77px 88.4px -2.3px hsl(var(--shadow-color) / 0.21);
}
}

.color--1 {color: var(--color--1);}
.color--1--0 {color: var(--color--1--0);}
.color--1--25 {color: var(--color--1--25);}
.color--1--50 {color: var(--color--1--50);}
.color--1--75 {color: var(--color--1--75);}
.color--1--85 {color: var(--color--1--85);}

.color--2 {color: var(--color--2);}
.color--2--0 {color: var(--color--2--0);}
.color--2--25 {color: var(--color--2--25);}
.color--2--50 {color: var(--color--2--50);}
.color--2--75 {color: var(--color--2--75);}

.color--3 {color: var(--color--3);}
.color--3--0 {color: var(--color--3--0);}
.color--3--25 {color: var(--color--3--25);}
.color--3--50 {color: var(--color--3--50);}
.color--3--75 {color: var(--color--3--75);}

.color--4 {color: var(--color--4);}
.color--4--0 {color: var(--color--4--0);}
.color--4--25 {color: var(--color--4--25);}
.color--4--50 {color: var(--color--4--50);}
.color--4--75 {color: var(--color--4--75);}

.color--5 {color: var(--color--5);}
.color--5--0 {color: var(--color--5--0);}
.color--5--25 {color: var(--color--5--25);}
.color--5--50 {color: var(--color--5--50);}
.color--5--75 {color: var(--color--5--75);}

.color--6 {color: var(--color--6);}
.color--6--0 {color: var(--color--6--0);}
.color--6--25 {color: var(--color--6--25);}
.color--6--50 {color: var(--color--6--50);}
.color--6--75 {color: var(--color--6--75);}

.lh08 {line-height: .8!important;}
.lh09 {line-height: .9!important;}
.lh1 {line-height: 1!important;}
.lh11 {line-height: 1.1!important;}
.lh12 {line-height: 1.!important;}
.lh13 {line-height: 1.3!important;}
.lh14 {line-height: 1.4!important;}
.lh15 {line-height: 1.5!important;}
.lh16 {line-height: 1.6!important;}

.uc {text-transform: uppercase;}
.lc {text-transform: lowercase;}
.nouc, .nolc {text-transform: none;}
.em {font-style: italic!important;}
.list-style-none {list-style: none;}
img {
  width: 100%;
  height: auto;
}

a, a:hover, a:focus, a:link a:visited, a:active, a.active, .active {
  outline: none!important;
  text-shadow: none!important;
  box-shadow: none!important;
  text-decoration: none;
  color: inherit;
}

.no--btn {
  background: unset;
  border: unset;
  border-radius: unset;
  padding: unset;
  margin: unset;
  color: inherit;
  font-family:inherit;
  font-weight: inherit;
  font-style: normal;
}

.btn {
  outline: none!important;
  box-shadow: none!important;
  border-radius: var(--br);
  font-weight: bold;
  text-transform: lowercase;
}

.text {
  font-size: var(--text);
  line-height: var(--lineheight);
}

.text--sm {
  font-size: calc(var(--text) * .666);
  line-height: calc(var(--lineheight) * .666)
}

.text--xs {
  font-size: calc(var(--text) * .444);
  line-height: calc(var(--lineheight) * .444)
}

.text--lg {
  font-size: calc(var(--text) * 1.444);
  line-height: calc(var(--lineheight) * 1.444)
}


/* ########## figure picture image ########## */

figure.image {
  margin-bottom: 0;
  position: relative;
  background: var(--black);
}

figure.image picture {
  position: relative;
  display: block;
  --w: 4;
  --h: 5;
  margin: 0;
  padding: 0;
  padding-bottom: calc(100% / var(--w) * var(--h));
  background-size: 100px auto!important;
  background-repeat: no-repeat!important;
  background-position: center!important;
  background: url("../images/loading.gif") var(--color--5);

}

figure.image picture img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  -webkit-transition: opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 3s cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 0;
}

figure.image picture[data-contain] img {object-fit: contain;}

figure.image picture img.img--loaded {opacity: 1!important;}

figure.image small {
  position: absolute;
  bottom: calc(var(--gap) * .5);
  right: calc(var(--gap) * .5);
  margin: 0;
  padding: 0;
  display: flex;
  align-items:flex-start;
  justify-content: flex-end;
  writing-mode: sideways-lr;
  text-transform: uppercase;
  letter-spacing: calc(var(--mainsize) * .0675);
  z-index: 100;
}

figure.image figcaption {
  position: absolute;
  bottom: -20px;
  right: calc(var(--gap) * .5);
  line-height: 1;
}

/* ########## transitions ########## */
.transition--all {
  -webkit-transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: all 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--color {
  -webkit-transition: color .35s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: color .35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--height {
  -webkit-transition: height .5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: height .5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--opacity {
  -webkit-transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: opacity 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--color, .text a {
  -webkit-transition: color 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: color 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--color--short, .text a {
  -webkit-transition: color .35s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: color .35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--border {
  -webkit-transition: border 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: border 1.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--top {
  -webkit-transition: top .6s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: top .6s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--top--speedy {
  -webkit-transition: top .3s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: top .3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--padding {
  -webkit-transition: padding .5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: padding .5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--background {
  -webkit-transition: background 1s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition: background 1s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.transition--transform {
  -webkit-transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1)!important;
  transition: transform 1s cubic-bezier(0.25, 0.1, 0.25, 1)!important;
}