/* ----------------------------------------------------- */
/* CODE
/* The Anderen • December 2025
/* ----------------------------------------------------- */

*, *:before, *:after{
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
@font-face {
  font-family: 'un-11';
  src: url('../fonts/UN_11ST_Regular.woff2') format('woff2'),
     url('../fonts/UN_11ST_Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* ------------------------------------------------------------------- */
/* !$ Base */
/* ------------------------------------------------------------------- */

:root {
  --padding: calc(12px + (16 - 12) * ((100vw - 420px) / (1800 - 420)));
  --text-size: calc(12px + (16 - 12) * ((100vw - 420px) / (1800 - 420)));
  --line-height: 1.1;
  --col-dark: #000;
  --col-light: #fff;
  --col-grey: rgb(188,190,192);
  --col-pink: rgb(241,123,176);
  --col-green: rgb(65,173,73);
  --col-blue: rgb(28,114,182);
}

::selection {background: rgba(0,0,0,0.99); color: var(--col-light);}
::-moz-selection {background: rgba(0,0,0,0.99); color: var(--col-light);}

html {
	-webkit-text-size-adjust: 100%;
}
body {
	font-family: 'un-11', sans-serif;
  font-size: var(--text-size);
  line-height: var(--line-height);
  font-weight: normal;
	font-feature-settings: "liga", "dlig", "kern" 1;
	font-kerning: normal;
	-webkit-tap-highlight-color: transparent;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

svg {
	overflow: visible;
}
img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}
figure {
  position: relative;
  display: block;
}
figure picture {
  height: 0;
  padding-bottom: 80%;
  display: block;
}
figure.logo-symbol picture {
  padding-bottom: 91.357%;
}
figure.logo-breed picture {
  padding-bottom: 91.385%;
}
figure.logo-written picture {
  padding-bottom: 19.239%;
}

figure img {
  position: absolute;
  width: 100%;
  height: 100%;
}


@-webkit-keyframes slideIn {
  from { opacity: 0; -webkit-transform: translateY(calc(var(--padding) * -1)); }
  to   { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(calc(var(--padding) * -1)); }
  to   { opacity: 1; transform: translateY(0); }
}
@-webkit-keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.page-footer > * {
  opacity: 0;
  -webkit-animation: fadeIn 0.6s ease forwards 0.3s;
  animation: fadeIn 0.6s ease forwards 0.3s;
}
.home .video-item {
  opacity: 0;
  -webkit-animation: fadeIn 0.6s ease forwards 0.3s;
  animation: fadeIn 0.6s ease forwards 0.3s;
}
.home.featured .video-item:first-child mux-controller {
  opacity: 0;
  -webkit-animation: fadeIn 0.6s ease forwards 0.3s;
  animation: fadeIn 0.6s ease forwards 0.3s;
}



/* ------------------------------------------------------------------- */
/* !$ Link */
/* ------------------------------------------------------------------- */

a {
  color: currentcolor;
  text-decoration: none;
}
a:hover {
  
}
button {
  line-height: 1;
}

.text a {
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: calc(var(--text-size)/8);
}

/* ------------------------------------------------------------------- */
/* !$ Cursor */
/* ------------------------------------------------------------------- */

body,
a, .link, .btn {
  cursor: none;
}

#cursor {
  width: 30px;
  height: 40px;
  position: fixed;
  top: -30px;
  left: -40px;
  pointer-events: none;
  z-index: 999999;
  display: none;
}
#cursor img {
  position: absolute;
  display: none;
}
#cursor img.default {
  display: block;
}

.home.featured #cursor img,
.project #cursor img,
.locked #cursor img,
#cursor.inverted img {
  filter: brightness(0) invert(1); /* black -> white */
}



/* ------------------------------------------------------------------- */
/* !$ Text */
/* ------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-size: var(--text-size);
}
.text-L {
  font-size: var(--text-size);
}
.text-M {
  font-size: calc(var(--text-size)*1.5);
}

em {
  font-style: normal;
}
bold, strong {
  font-weight: normal;
}
.uppercase {
  text-transform: uppercase;
}

.text p {
  margin-bottom: calc(var(--text-size)*var(--line-height));
}
.text-M p {
  margin-bottom: calc(var(--text-size)*1.5*var(--line-height));
}
.text p:last-child {
  margin-bottom: 0;
}

button {
  line-height: var(--line-height);
}

/* ------------------------------------------------------------------- */
/* !$ Container */
/* ------------------------------------------------------------------- */

html, body {
  -webkit-scroll-snap-type: y mandatory;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 0;
}
html, .home.featured {
  height: 100%;
  overflow-y: scroll;
}
.home.featured .video-item {
  -webkit-scroll-snap-align: start;
  scroll-snap-align: start;
}
.home.featured .page-footer {
  -webkit-scroll-snap-align: end;
  scroll-snap-align: end;
}

.scroll-container {
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
.scroll-container.horizontal {
  overflow-y: hidden;
  overflow-x: scroll;
}
.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.no-drag {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  touch-action: manipulation;
}

.section, .block {
  margin-bottom: var(--padding);
}
.section:last-child, .block:last-child {
  margin-bottom: 0;
}
.block.text-M {
  margin-bottom: calc(var(--text-size)*1.5*var(--line-height)*2);
}

.color-1 {
  background-color: var(--col-grey);
}
.color-2 {
  background-color: var(--col-pink);
}
.color-3 {
  background-color: var(--col-green);
}
.color-4 {
  background-color: var(--col-blue);
}




/* ------------------------------------------------------------------- */
/* !$ Header */
/* ------------------------------------------------------------------- */

.menu.home,
.menu.main,
.menu.back,
.menu.toggle {
  position: fixed;
  z-index: 9;
  top: 0;
  padding: var(--padding);
}
.menu.home {
  left: 0;
  width: 100%;
  padding-bottom: calc(var(--padding)*2);
}
.menu.main,
.menu.back,
.menu.toggle {
  right: 0;
}
.menu.back {
  -webkit-animation: fadeIn 0.3s ease forwards;
  animation: fadeIn 0.3s ease forwards;
}
.menu.back a {
  display: block;
}
.menu.categories {
  margin-right: var(--padding);
}

.menu.main li,
.menu.categories a {
  display: inline-block;
  margin-right: calc(var(--padding)/2);
}
.menu.categories a.director,
.menu.main li:last-child,
.menu.categories a:last-child {
  margin-right: 0;
}

.menu.main a,
.menu.categories a,
.block.text a {
  position: relative;
}
.menu.main a[aria-current]:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(75%);
  transform: translateY(75%);
  height: calc(var(--padding)/2);
  background-image: url('../static/underline-1-black.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.menu.main li:nth-child(3n+2) a[aria-current]:after {
  background-image: url('../static/underline-2-black.png');
}
.menu.main li:nth-child(3n+3) a[aria-current]:after {
  background-image: url('../static/underline-3-black.png');
}
.home.featured .menu.main a[aria-current]:after {
  background-image: url('../static/underline-1-white.png');
}
.home.featured .menu.main li:nth-child(3n+2) a[aria-current]:after {
  background-image: url('../static/underline-2-white.png');
}
.home.featured .menu.main li:nth-child(3n+3) a[aria-current]:after {
  background-image: url('../static/underline-3-white.png');
}

.menu.main {
  width: 100%;
  height: 100%;
  background: var(--col-light);
  display: none;
  opacity: 0;
}
.home.featured .menu.main,
.project.featured .menu.main {
  background: var(--col-dark);
  color: var(--col-light);
}
.menu.main li {
  display: block;
  font-size: calc(var(--text-size)*3);
  opacity: 0;
  margin-bottom: calc(var(--padding)/2);
}
.menu.toggle {
  padding-top: calc(var(--padding)/2);
}
#btn-menu {
  position: relative;
  width: calc(var(--padding)*5);
}
.icon-menu {
  display: flex;
  flex-direction: column;
  gap: calc(var(--padding)/4);
}
.icon-menu .line {
  height: calc(var(--padding)*0.66);
}


/* ------------------------------------------------------------------- */
/* !$ Main */
/* ------------------------------------------------------------------- */

body.home.featured, body.project, body.locked {
  background-color: var(--col-dark);
  color: var(--col-light);
}

.page-main {
  position: relative;
  padding: var(--padding);
}
.default .page-main,
.error .page-main {
  padding-right: calc(var(--padding)*6);
}
.home.featured .page-main {
  padding: 0;
}

.home.filtered .page-main {
  padding: 0;
  margin: calc(var(--padding)*5) auto 0 auto;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--padding);
}




/* ------------------------------------------------------------------- */
/* !$ Video */
/* ------------------------------------------------------------------- */

.video-item {
  position: relative;
  display: block;
}
.home.featured .page-main .video-item {
  width: 100%;
  height: 100vh;
  @supports (height: 100dvh) {
    height: 100dvh;
  }
}
.project .video-item {
  padding-top: calc(var(--padding)*6);
  padding-bottom: calc(var(--padding)*6);
}

.video-item a {
  display: block;
  height: 100%;
}
.media-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}
.home.filtered .page-main .video-item a .media-wrapper {
  transform-origin: center bottom;
  transition: 0.3s ease-in-out;
}
.home.filtered .page-main .media-wrapper {
  height: 0;
  padding-bottom: 80%;
}

media-controller {
  width: 100%;
  height: 100%;
  --media-background-color: transparent;
}
.home .page-main media-controller {
  --media-object-fit: cover;
}
.home.filtered .page-main media-controller {
  position: absolute;
  width: 100%;
  height: 100%;
}
.project media-controller {
  --media-object-fit: contain;
  overflow: visible;
}


mux-video {
  outline: none;
}
@media (max-width: 768px) and (orientation: portrait) {
  .home.featured .page-main mux-video {
    min-height: 100vh;
  }
}

.page-overlay .video-item {
  opacity: 0;
}
.page-overlay .video-item[data-metadata-loaded="true"] {
  -webkit-animation: fadeIn 0.3s ease forwards;
  animation: fadeIn 0.3s ease forwards;
}

media-control-bar {
  --media-font-family: 'un-11';
  --media-font-weight: normal;
  --media-font-size: var(--text-size);
  --media-control-background: transparent;
  --media-control-hover-background: transparent;
  --media-primary-color: var(--col-light);
  --media-control-height: var(--text-size);
  --media-cursor: none;
  width: 100%;
  flex-direction: column;
  position: absolute;
  top: 50%;
  padding-top: calc(var(--ratio, 56.25%)/2 + var(--padding)/2);
  opacity: 0;
  -webkit-animation: fadeIn 0.3s ease forwards 0.3s;
  animation: fadeIn 0.3s ease forwards 0.3s;
}
.contained media-control-bar {
  position: absolute;
  top: inherit;
  bottom: 0;
  left: 50%;
  padding-top: calc(var(--padding)/2);
  -webkit-transform: translate(-50%, 100%);
  transform: translate(-50%, 100%);
}
media-controller[mediaisfullscreen] {
  cursor: auto;
}
media-controller[mediaisfullscreen] media-control-bar {
  --media-cursor: inherit;
  position: absolute;
  top: inherit;
  bottom: 0;
  padding: var(--padding);
}
.contained media-controller[mediaisfullscreen] media-control-bar {
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
media-controller:not([mediaisfullscreen]) media-control-bar {
  opacity: 0;
  -webkit-animation: fadeIn 0.6s ease forwards 0.3s;
  animation: fadeIn 0.6s ease forwards 0.3s;
}
media-controller[mediaisfullscreen][userinactive] media-control-bar {
  opacity: 0 !important;
}

media-time-range {  
  --media-range-padding: 0;
  --media-range-track-height: 1px;
  --media-range-thumb-width: 1px;
  --media-range-thumb-height: 1px;
  --media-range-thumb-border-radius: 0;
  width: 100%;
}

.button-wrapper {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  margin-top: calc(var(--padding)/2);
}
.button-group > * {
  margin-left: var(--padding);
}




/* ------------------------------------------------------------------- */
/* !$ Home */
/* ------------------------------------------------------------------- */

.logo-overlay {
  color: var(--col-light);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  width: 180px;
  max-width: 33.33%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.logo-overlay.visible {
  opacity: 1;
}

.home.featured .video-item:first-child {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.home.featured .video-item:first-child.visible {
  opacity: 1;
}



/* ------------------------------------------------------------------- */
/* !$ Info */
/* ------------------------------------------------------------------- */

.block.info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: var(--padding);
  margin: 0;
  z-index: 2;
}

.home.featured .page-main .block.info {
  opacity: 0;
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.home.featured .page-main .video-item.visible .block.info {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.home.filtered .page-main .block.info {
  position: relative;
  padding: calc(var(--padding)/2) 0 0 calc(var(--padding)/4);
}
.home.filtered .page-header h1.filter-title {
  position: fixed;
  z-index: 2;
  top: var(--padding);
  left: var(--padding);
}

.project .block.info {
  transition: 0.3s ease-in-out;
}
.project .block.info.visible {
  background-color: rgba(0,0,0,0.8);
}

.block.info .title {
  display: inline-flex;
  opacity: 0;
  -webkit-animation: slideIn 0.6s ease forwards 0.3s;
  animation: slideIn 0.6s ease forwards 0.3s;
}
.block.info .title img.active {
  display: none;
}
.block.info.visible .title img.active {
  display: block;
}
.block.info .note {
  display: block;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  -webkit-transform: translateY(var(--text-size));
  transform: translateY(var(--text-size));  
  transition: 0.3s ease-in-out;
}
.block.info .note .categories {
  display: inline-block;
  vertical-align: baseline;
  margin-bottom: calc(var(--padding)/2);
}
.block.info.visible .note {
  opacity: 1;
  max-height: 300px;
  -webkit-transform: translateY(0);
  transform: translateY(0); 
  margin-top: calc(var(--padding)/2);
  overflow: visible;
}





/* ------------------------------------------------------------------- */
/* !$ Project */
/* ------------------------------------------------------------------- */

.project .page-main {
  padding: 0;
  height: 100vh;
}

.swiper {
  --swiper-pagination-bottom: var(--padding);
  --swiper-navigation-size: var(--padding);
  --swiper-navigation-sides-offset: calc(var(--padding)*1.25);
  --swiper-theme-color: var(--col-light);
  height: 100%;
}
.swiper-pagination {
  width: auto;
  text-align: right;
  right: var(--padding);
  left: inherit;
}
.swiper-slide {
  padding: var(--padding);
  display: flex;
  align-items: center;
  justify-content: center; 
}
.swiper-button-next, 
.swiper-button-prev {
  height: calc(var(--swiper-navigation-size)*2);
}
.swiper-button-disabled {
  display: none;
}

.icon-close {
  width: calc(var(--text-size)*4);
}
.icon-circle {
  position: relative;
  width: var(--text-size);
  height: var(--text-size);
  display: inline-block;
  margin-left: calc(var(--padding)/2);
}
.icon-circle img {
  position: absolute;
}


.page-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-color: var(--col-dark);
  color: var(--col-light);
  z-index: 12;
  opacity: 0;
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}
.page-overlay.visible {
  opacity: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}




/* ------------------------------------------------------------------- */
/* !$ Default */
/* ------------------------------------------------------------------- */

.default .page-content,
.error .page-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
  min-height: 100vh;
}
.column-wrapper {
  width: 100%;
}



/* ------------------------------------------------------------------- */
/* !$ Footer */
/* ------------------------------------------------------------------- */

.page-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
}
.home .page-footer {
  justify-content: end;
  min-height: 100vh;
}
.home .page-footer,
.default .page-footer,
.error .page-footer {
  padding: var(--padding);
  width: 100%;
}

.page-footer .sticky-wrapper {
  width: 100%;
}
.home.filtered .page-footer {
  padding-top: calc(var(--padding)*5);
}
.home.filtered .page-footer .sticky-wrapper {
  position: -webkit-sticky;
  position: sticky;
  bottom: var(--padding);
}

.page-footer .logo-wrapper {
  width: 66.66%;
  display: flex;
  align-items: end;
  justify-content: start;
}
body.default .page-footer .logo-wrapper {
  mix-blend-mode: multiply;
}
.page-footer .logo-wrapper .logo-symbol {
  width: 45%;
}
.page-footer .logo-wrapper .logo-breed {
  width: 55%;
}
.page-footer .logo-written {
  width: 77.77%;
  margin-top: calc(var(--padding));
}
.default .page-footer .logo-written,
.error .page-footer .logo-written {
  display: none;
}

.logout {
  position: fixed;
  bottom: var(--padding);
  left: 50%;
  z-index: 9;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  max-width: 100%;
}
.logout a {
  display: inline-block;
  padding: calc(var(--padding)/2) var(--padding);
  color: var(--col-dark);
  border: 1px solid;
  border-radius: calc(var(--padding)*2);
}
body.home.featured .logout a,
body.locked .logout a,
body.project .logout a {
  color: var(--col-light);
}




/* ------------------------------------------------------------------- */
/* !$ Error */
/* ------------------------------------------------------------------- */

.error .page-header .menu.home,
.locked .page-header {
  display: none;
}





/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* !$ ~~~~~~~~~~ Media Queries */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media screen and (max-device-width: 736px){
	body{
		-webkit-text-size-adjust: none;
	}
}


/* ------------------------------------------------------------------- */
/* !$ screen > 460px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 460px) {


.page-footer .logo-wrapper {
  width: 55.55%;
}
.page-footer .logo-written {
  width: 66.66%;
}

}

/* ------------------------------------------------------------------- */
/* !$ screen > 720px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 720px) {

.menu.main {
  width: auto;
  height: auto;
  background: transparent;
  display: block !important;
  opacity: 1 !important;
}
.home.featured .menu.main,
.project.featured .menu.main {
  background: transparent;
}
.menu.main li {
  display: inline-block;
  font-size: inherit;
  opacity: 1 !important;
  margin-bottom: inherit;
}
.menu.main li.home {
  display: none;
}
.menu.toggle {
  display: none;
}


.home.featured .page-main .block.info h1,
.home.filtered .page-header h1.filter-title {
  font-size: calc(var(--text-size)*3);
  line-height: 0.9;
}

.home.filtered .page-main {
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--padding);
}
.home.filtered .page-main .media-wrapper {
  padding-bottom: 56.25%;
}
.home.filtered .page-main .video-item .block.info {
  padding-left: 0;
}
.home.filtered .page-main .video-item:nth-child(2n+1) .block.info {
  padding-left: calc(var(--padding)/4);
}
.page-footer .logo-wrapper {
  width: 44.44%;
}
.page-footer .logo-written {
  width: 55.55%;
}

.page-footer {
  flex-direction: row;
  align-items: end;
}

}

/* ------------------------------------------------------------------- */
/* !$ screen > 960px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 960px) {

.page-footer .sticky-wrapper {
  display: flex;
  align-items: end;
  gap: var(--padding);
}
.column-wrapper {
  display: flex;
  gap: var(--padding);
}
.column-wrapper .column {
  flex: 1;
  margin-bottom: 0;
}


.page-footer .logo-wrapper {
  width: 33.33%;
}
.default .page-footer .logo-written,
.error .page-footer .logo-written {
  display: block;
}
.page-footer .logo-written {
  width: 44.44%;
}


}





/* ------------------------------------------------------------------- */
/* !$ screen > 1200px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 1200px) {

.home.filtered .page-main {
  grid-template-columns: repeat(3, 1fr);
}
.home.filtered .page-main .video-item:nth-child(2n+1) .block.info {
  padding-left: 0;
}
.home.filtered .page-main .video-item:nth-child(3n+1) .block.info {
  padding-left: calc(var(--padding)/4);
}


}



/* ------------------------------------------------------------------- */
/* !$ screen > 1440px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 1440px) {



}


/* ------------------------------------------------------------------- */
/* !$ screen > 1800px */
/* ------------------------------------------------------------------- */

@media all and (min-width: 1800px) {

.home.filtered .page-main {
  grid-template-columns: repeat(4, 1fr);
}
.home.filtered .page-main .video-item:nth-child(3n+1) .block.info {
  padding-left: 0;
}
.home.filtered .page-main .video-item:nth-child(4n+1) .block.info {
  padding-left: calc(var(--padding)/4);
}

}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* !$ ~~~~~~~~~~ Hover */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@media (hover: hover) {

#cursor {
  display: block;
}

.menu.main a:hover:after,
.menu.categories a:hover:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(75%);
  transform: translateY(75%);
  height: calc(var(--padding)/2);
  background-image: url('../static/underline-1-black.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.menu.main li:nth-child(3n+2) a:hover:after,
.menu.categories a:nth-child(3n+2):hover:after  {
  background-image: url('../static/underline-2-black.png');
}
.menu.main li:nth-child(3n+3) a:hover:after,
.menu.categories a:nth-child(3n+3):hover:after {
  background-image: url('../static/underline-3-black.png');
}
.home.featured .menu.main a:hover:after,
.menu.categories a:hover:after {
  background-image: url('../static/underline-1-white.png');
}
.home.featured .menu.main li:nth-child(3n+2) a:hover:after,
.menu.categories a:nth-child(3n+2):hover:after {
  background-image: url('../static/underline-2-white.png');
}
.home.featured .menu.main li:nth-child(3n+3) a:hover:after,
.menu.categories a:nth-child(3n+3):hover:after{
  background-image: url('../static/underline-2-white.png');
}

/* .home.filtered .video-item a:hover .media-wrapper {
  -webkit-transform: scale(1.033);
  transform: scale(1.033);
  transition-duration: 0.15s;
}  */

.block.info .title:hover img.active {
  display: block;
}


}