/*////////////////////////

- fonts
- bootstrap's vars
- reset
- page-loader
- main
- project
- gallery

colors:
blue: #005cb8;
rgba: rgba(0,92,184,.5);

red: #a50200;
rgba: rgba(165,2,0,.5);
////////////////////////*/



/* fonts */
@font-face {
	font-family: "tenon";
	src: url("../fonts/tenon-light.woff2") format("woff2"),
		url("../fonts/tenon-light.woff") format("woff"),
		url("../fonts/tenon-light.otf") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 300;
	font-stretch: normal;
}
@font-face {
	font-family: "tenon";
	src: url("../fonts/tenon-regular.woff2") format("woff2"),
		url("../fonts/tenon-regular.woff") format("woff"),
		url("../fonts/tenon-regular.otf") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 400;
	font-stretch: normal;
}
@font-face {
	font-family: "tenon";
	src: url("../fonts/tenon-bold.woff2") format("woff2"),
		url("../fonts/tenon-bold.woff") format("woff"),
		url("../fonts/tenon-bold.otf") format("opentype");
	font-display: auto;
	font-style: normal;
	font-weight: 700;
	font-stretch: normal;
}
@font-face {
    font-family: 'Angilla Tattoo';
    src: url('../fonts/angillaTattoo.eot');
    src: local('Angilla Tattoo'), local('AngillaTattoo'),
        url('../fonts/angillaTattoo.eot?#iefix') format('embedded-opentype'),
        url('../fonts/angillaTattoo.woff2') format('woff2'),
        url('../fonts/angillaTattoo.woff') format('woff'),
        url('../fonts/angillaTattoo.ttf') format('truetype'),
        url('../fonts/angillaTattoo.svg#angillaTattoo') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.tk-tenon { font-family: "tenon", sans-serif; }
.angilla {
    font-family: 'Angilla Tattoo';
    font-weight: normal;
    font-style: normal;
}
/* end fonts */


/* IMPORTANT with bootstrap */
@media (prefers-reduced-motion: no-preference) {
  :root {
	scroll-behavior: initial;
  }
}

/* bootstrap's vars light */
[data-bs-theme="light"] {
	--bs-body-bg: #e1e1e1;
	--kbz-btn-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230F0'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
/* bootstrap's vars dark */
[data-bs-theme="dark"] {
	--bs-body-bg: #333;
	--kbz-btn-close: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23F90'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
/* end bootstrap's vars */
















*,
*::after,
*::before {
	box-sizing: border-box;
}
.no-padding {
	padding: 0!important
}

/* https://vegaprotocol.github.io/alpha-lyrae/ */

@font-face {
	font-family: 'AlphaLyrae';
	src: url('../fonts/AlphaLyrae-Medium.woff2') format('woff2'),
	url('../fonts/AlphaLyrae-Medium.woff') format('woff');
	font-style: normal;
}

@font-feature-values 'AlphaLyrae' {
  @styleset { ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5 }
}

html, body {
	overflow-x: hidden;
	width: 100vw;
}

:root {
	font-size: 14px;
	--color-text: #fff;
	/*--color-bg: #0b0826;*/
	--color-bg: #000000;
	--color-bg-alt: hsl(222.55deg 100% 0%);
	--color-link: #fff;
	--color-link-hover: #fff;
	--color-title: #fff;
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: 'tenon', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Page Loader */
.js .loading::before,
.js .loading::after {
	content: '';
	position: fixed;
	z-index: 1000;
}

.js .loading::before {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--color-bg);
}

.js .loading::after {
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border-radius: 50%;
	opacity: 0.4;
	background: var(--color-link);
	animation: loaderAnim 0.7s linear infinite alternate forwards;
}

@keyframes loaderAnim {
	to {
		opacity: 1;
		transform: scale3d(0.5,0.5,1);
	}
}

a {
	text-decoration: none;
	color: var(--color-link);
	outline: none;
	cursor: pointer;
}

a:hover {
	color: var(--color-link-hover);
	outline: none;
}

/* Better focus styles from https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible */
a:focus {
	/* Provide a fallback style for browsers
	 that don't support :focus-visible */
	outline: none;
	background: lightgrey;
}

a:focus:not(:focus-visible) {
	/* Remove the focus indicator on mouse-focus for browsers
	 that do support :focus-visible */
	background: transparent;
}

a:focus-visible {
	/* Draw a very noticeable focus style for
	 keyboard-focus on browsers that do support
	 :focus-visible */
	outline: 2px solid red;
	background: transparent;
}

.unbutton {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: pointer;
}

.unbutton:focus {
	outline: none;
}


body #cdawrap {
	justify-self: start;
}


/* intro */
.intro {
	/*height: calc(100vh - 3rem);*/
	/*padding-top: 10vh;*/
	/*margin-bottom: 80vh;*/
	height: 100%;
	height: 100vh;
	height: 100svh;
	text-align: center;
	place-items: center;
	display: grid;
	grid-template-areas: 'intro';
	background: linear-gradient(0deg, transparent, var(--color-bg-alt));
}
.intro__title {
	grid-area: intro;
	place-items: center;
	margin: 0;
	display: grid;
	position: relative;
	z-index: 100;
}
.intro .intro__brand {
	display: none;
}
.intro__brand {
	max-width: 720px;
	width: 100%;
	height: auto;
}
body.mobile .intro__brand {
	width: 85%;
	opacity: .9;
}
@media(max-width: 600px;) {
	.intro__brand {
		width: 85%;
		opacity: .9;
	}
}
.intro__title-pre {
	font-size: clamp(2rem,20vw,10rem);
	color: var(--color-title);
	font-weight: 400;
	/*text-transform: uppercase;*/
	font-family: 'AlphaLyrae', sans-serif
}
.intro__info {
	max-width: 35ch;
	opacity: .6;
	margin-bottom: 4rem;
	padding-bottom: 1rem;
	line-height: 1.2;
	position: relative;
	align-self: end;
}
.intro__info::after {
	content: "";
	width: 1px;
	height: 2rem;
	background: #fff;
	position: absolute;
	top: 100%;
	left: 50%;
}
@media only screen and (max-height: 575.98px) {
	section.intro .content__img-inner {
		background-image: url(/images/chinga2-art-intro-04.jpg)!important;
	}
}
@media only screen and (max-height: 575.98px) {
	section.item-1 .content__img-inner.first {
		background-image: url(/images/chinga2-art-002.jpg)!important;
	}
}
/* end intro */








.content {
	flex: none;
	display: grid;
	place-items: center;
	line-height: 1.2;
	grid-template-areas: 'title' 'layout' '...';
	/*grid-template-rows: 3.5vw auto 3.5vw;*/
	grid-template-rows: auto;
	gap: 1rem;
	gap: 0;
}
.content.item-1 {
	/*margin-top: calc(100svh - 120svh);*/
	/*height: 100svh!important;*/
	/*border: 1px solid red!important;*/
}

.item-1__title {
	grid-area: layout;
	place-items: center;
	margin: 0;
	display: grid;
	position: relative;
	z-index: 100;
}


.content--intro {
	grid-area: intro;
}

.content__img-wrap {
	grid-area: layout;
}

.content__img {
	--img-width: 60vw;
	--img-height: 40vh;
	--img-ar: auto;
	--img-inner-margin-x: 0px;
	--img-inner-margin-y: 0px;
	position: relative;
	overflow: hidden;
	display: grid;
	place-items: center;
	width: var(--img-width);
	height: var(--img-height);
	aspect-ratio: var(--img-ar);
}

@media (orientation: landscape) {
	.content__img--1 {
		--img-width: 100svw;
		--img-height: 100svh;
		--img-ar: 1/1;
	}
	.content__img--2 {
		--img-width: 100vw;
		--img-height: 100vw;
		--img-ar: 1/1;
	}
}
@media (orientation: portrait) {
	.content__img--1 {
		--img-width: 70vw;
		--img-height: auto;
		--img-ar: 1/1;
	}
	section.intro .content__img--1,
	.content__img--2 {
		--img-width: 100svw;
		--img-height: 100svh;
	}
	.content__img--2 {
		/*--img-width: 100vw;*/
		/*--img-height: 100vw;*/
		--img-width: 100svw;
		--img-height: 100svh;
		--img-ar: 1/1;
	}
}
.content__img-inner {
	grid-area: 1 / -1;
	width: calc(100% + var(--img-inner-margin-x) * 2);
	height: calc(100% + var(--img-inner-margin-y) * 2);
	background-position: 50% 50%;
	background-size: cover;
	background-size: cover;
	background-size: 100% auto;
}
section.intro .content__img-inner {
	background-repeat: no-repeat;
}

.content__img-inner--hidden {
	opacity: 0;
}
.content__text {
	font-family: 'AlphaLyrae', sans-serif;
	position: relative;
	z-index: 100;
	grid-area: title;
	text-transform: uppercase;
	font-size: clamp(2rem, 6vw, 4rem);
	margin: 0;
	display: flex;
	flex-direction: column;
	font-weight: 400;
	line-height: 0.8;
	font-family: 'AlphaLyrae', sans-serif;
}

.content__text span span {
	display: inline-block;
}

.content__text span span.whitespace {
	white-space: pre;
}

.content__text span:nth-child(3n) {
	font-feature-settings: 'ss01' 1;
}

.content__text--large {
	font-size: clamp(2rem, 7vw, 6rem);
}

.content__text--center {
	text-align: center;
	align-self: stretch;
	justify-content: space-between;
	grid-row: 1 / span 3;
}

.content__text--left {
	justify-self: start;
	/*padding: 3rem;*/
	grid-area: layout;
	align-self: center;
	margin: 0 auto;
}
img.img-chinga2 {
	width: 100%;
	height: auto;
	margin-bottom: 30px;
}
.content__text-tiny {
	color: #fff;
	text-transform: none;
	font-family: 'tenon', sans-serif;
	font-size: 1.5rem;
	font-weight: 300;
	line-height: 1.2;
	margin-top: 10vh;

	max-width: 75%;
	margin: 0 auto;
	background-color: rgba(0,0,0,.75);
	padding: 30px;
	background-color: rgba(165,2,0,1);
}
.content__text-tiny span {
	/*color: #fff;*/
	font-weight: bold;
}
body.mobile .content__text-tiny {
	font-size: 1.2rem;
	max-width: 100%;
	padding: 30px;
	min-height: 100%;
	min-height: 100vh;
	min-height: 100svh;
}
@media(max-width: 600px) {
	.content__text-tiny {
		font-size: 1.2rem;
		max-width: 100%;
		padding: 30px;
		min-height: 100%;
		min-height: 100vh;
		min-height: 100svh;
	}
}


a.btn {
	color: #fff;
	font-size: 32px;
	font-family: 'Angilla Tattoo';
	font-weight: normal;
	font-style: normal;
	background-color: #000;
	padding: 0px 32px;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
a.btn:hover,
a.btn:focus {
	color: #000;
	background-color: #fff;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}

/* netsocials */
ul.netsocials {
	padding: 12svh 0;
	display: block;
	list-style: none;
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 0px;
	margin: 0 auto;
	/*background-color: #a50200;*/
	/*border-top: 6px solid #a50200;*/
	/*border-bottom: 6px solid #a50200;*/
}
ul.netsocials li {
	display: inline-block;
	margin: 0 24px;
}
ul.netsocials li a i {
	font-size: 6em;
	color: #a50200;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
@media(max-width: 757px) {
	ul.netsocials li {
		margin: 0 12px;
	}
	ul.netsocials li a i {
		font-size: 3.2em;
	}
}
ul.netsocials li a:hover i,
ul.netsocials li a:focus i {
	color: #fff;

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
@media(max-width: 500px) {
	ul.netsocials {
		/*padding: 15px 0;*/
	}
}
/* end netsocials */

/* video */
section.video {
	overflow: hidden;
	z-index: 0!important;
}
video {
	display: block;
	width: 100svw;
	height: 100svh;
	margin: 0;
	opacity: .7;
	object-fit: cover;
	/*border: 1px solid red;*/

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
video:hover,
video:focus {
	opacity: .7;
	/*opacity: 1;*/

	-webkit-transition: all 333ms linear;
	-moz-transition: all 333ms linear;
	-o-transition: all 333ms linear;
	transition: all 333ms linear;
}
body.mobile video,
body.mobile video:hover,
body.mobile video:focus {
	opacity: 1;
	transition: none;
}
@media(max-width: 600px;) {
	video,
	video:hover,
	video:focus {
		opacity: 1;
		transition: none;
	}
}
/* end video */

section.video-over {
	position: relative;
	margin: 0 auto;
	text-align: center;
	max-width: 60vw;
	margin-top: -50vh;
	z-index: 1001!important;
}
section.video-over .video-responsive {
	border: 6px solid #a50200!important;
	z-index: 1001!important;
}
body.mobile section.video-over {
	max-width: 90%;
}
@media(max-width: 600px;) {
	section.video-over {
		max-width: 90%;
	}
}

section.videos {
	padding: 90px 0;
	/*background-image: url(/images/photos/chinga2-01.jpg)!important;*/
}

.video-wrapper {
	margin: 0 auto;
	text-align: center;
}

/*** Videos ***/
.video-responsive {
  overflow: hidden;
  padding-bottom: 54%;
  position: relative;
  height: 0;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 0;
}
iframe {
  border: 0;
}
/* end videos */




/* spotify */
section.spotify {
	padding: 60px;
	padding-top: 0;
}
@media only screen and (max-height: 575.98px) {
	section.spotify {
		padding: 10svh 0;
	}
}
section.spotify iframe {
	height: 80svh!important;
	position: relative;
	z-index: 1000;
}









ul.mini-covers {
	display: block;
	list-style-type: none;
	margin-block-start: 0em;
	margin-block-end: 0em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
	padding-inline-start: 0px;
	text-align: center;
	padding-bottom: 15px;
}
ul.mini-covers li {
	margin: 15px;
	padding: 7px;
	list-style: none;
	display: inline-block;
	border: 6px solid #000000!important;
}
ul.mini-covers li:hover,
ul.mini-covers li:focus {
	border: 6px solid #a50200!important;
}
ul.mini-covers li img {
	width: 150px;
	height: auto;
}
@media(max-width: 767px) {
	ul.mini-covers {
		text-align: center;
	}
}
body.album-2 li.album-2 {
	border: 6px solid #a50200!important;
}
body.album-1 li.album-1 {
	border: 6px solid #a50200!important;
}




/* end spotify */



/* featerings */
section.featurings {
	padding: 60px 0;
	z-index: 1002!important;
}
.content__title {
	color: #a50200;
	font-family: 'Angilla Tattoo';
	font-weight: normal;
	font-style: normal;
	font-size: 6rem;
	font-weight: normal;
	margin-bottom: 60px;
}
@media only screen and (max-height: 575.98px) {
	.content__title {
		font-size: 4rem;
	}
}
.card {
	background-color: transparent!important;
	border: none;
}
body.mobile .card {
	width: 80%;
	margin: 0 auto;
}
@media(max-width: 600px;) {
	.card {
		width: 80%;
		margin: 0 auto;
	}
}
.card-wrap {
	display: grid;
	grid-gap: 2rem;
	grid-auto-flow: row;
	grid-template-columns: 250px;
}
.card__image {
	display: block;
	border-radius: 7px;
	background-size: cover;
	background-position: 50% 50%;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	margin-bottom: 15px;
	border: 6px solid #a50200;
}
.card__title {
	font-weight: normal;
	font-size: 1.5rem;
}
body.mobile .card__title {
	text-align: center;
}
@media(max-width: 600px;) {
	.card__title {
		text-align: center;
	}
}
.card__title a {
	font-family: 'Angilla Tattoo';
	font-weight: normal;
	font-style: normal;
	font-size: xx-large
}
.content-wrap {
	display: grid;
	/*gap: 40vh;*/
	/*margin-bottom: 40vh;*/

	/*height: 100svh!important;*/
	/*border: 1px solid red;*/
}
/* end featerings */



/* credits */
section.credits {
	height: 60px;
}
.credits {
	font-size: 1rem;
	text-align: center;
}
.credits p,
.credits a {
	color: #CCC;
	text-decoration: none;
}
.credits a:hover,
.credits a:focus {
	color: #fff;
	text-decoration: none;
}
.credits p {
	margin: 30px 0;
}
/* end credits */

.photofooter img {
	width: 100%;
	height: auto;
	max-width: 60vw;
	filter: grayscale(1);
}
@media(max-width: 768px) {
	.photofooter img {
		max-width: 100%;
		min-height: 100svh;
		filter: grayscale(1);
	}
}

@media screen and (min-width: 53em) {
	.title {
		font-size: clamp(2rem,15vw,9rem);
	}

	.content__img--4 {
		--img-width: 30vw;
	}

	.content__img--5 {
		--img-width: 40vw;
	}

	.card-wrap {
		grid-template-columns: repeat(3,250px);
	}

	body #cdawrap {
		justify-self: end;
	}
}