*,:after,:before { box-sizing:border-box; }
* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
*:focus {
    outline: none !important;
}
:root { font-size:18px; }
body,html { height:100%; width:100%; position:relative; }
body { margin:0; --color-text:#fff; --color-text-alt:#848484; --color-title:#d3d3d3; --color-bg:#121212; --color-link:rgb(249,89,89); --color-link-hover:#000; color:var(--color-text); background:#121212; --cursor-stroke:rgb(249,89,89); --cursor-fill:none; --cursor-stroke-width:1px; --cursor-text:rgb(249,89,89); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-family: "Open Sans", arial, sans-serif; }
a { text-decoration:underline; color:var(--color-link); outline:none; }

.grid__item .grid__item-img, .grid__item-text { webkit-transition:opacity .5s ease-in-out; -moz-transition:opacity .5s ease-in-out; -o-transition:opacity .5s ease-in-out; -ms-transition:opacity .5s ease-in-out; transition:opacity .5s ease-in-out; }
#change-class-1, #change-class-1:before, #change-class-2, #change-class-2:before, #change-class-3, #change-class-3:before, #pdf-class, .preview__item-back span, .change-class-buttons { webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; transition: all .5s ease-in-out; }

a:focus,a:hover { text-decoration:none; color:var(--color-link-hover); outline:none; }
.unbutton { background:none; border:0; padding:0; margin:0; font:inherit; cursor:pointer; }
.unbutton:focus { outline:none; }
.js .loading:after,.js .loading:before { 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:.4; background:var(--color-link); animation:loaderAnim .7s linear infinite alternate forwards; }@keyframes loaderAnim { to { opacity:1; transform:scale3d(.5,.5,1); }; }
.message { z-index:100; background:var(--color-text); color:var(--color-bg); padding:.5rem; font-size:.75rem; position:relative; }
.no-select { -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; }
.grid { position:absolute; width:120%; height:120%; top:-10%; left:-10%; display:grid; grid-template-columns:repeat(50,2%); grid-template-rows:repeat(50,2%); perspective:3000px; }
.grid--inactive { pointer-events:none; }

.grid-container.change-foto-1 .grid__item.pos-0 .grid__item-img { background-image:url(../fotos/img1-1.jpg); }
.grid-container.change-foto-1 .grid__item.pos-1 .grid__item-img { background-image:url(../fotos/img1-2.jpg); }
.grid-container.change-foto-1 .grid__item.pos-2 .grid__item-img { background-image:url(../fotos/img1-3.jpg); }
.grid-container.change-foto-1 .grid__item.pos-3 .grid__item-img { background-image:url(../fotos/img1-4.jpg); }
.grid-container.change-foto-1 .grid__item.pos-4 .grid__item-img { background-image:url(../fotos/img1-5.jpg); }
.grid-container.change-foto-1 .grid__item.pos-5 .grid__item-img { background-image:url(../fotos/img1-6.jpg); }

.grid-container.change-foto-2 .grid__item.pos-0 .grid__item-img { background-image:url(../fotos/img2-1.jpg); }
.grid-container.change-foto-2 .grid__item.pos-1 .grid__item-img { background-image:url(../fotos/img2-2.jpg); }
.grid-container.change-foto-2 .grid__item.pos-2 .grid__item-img { background-image:url(../fotos/img2-3.jpg); }
.grid-container.change-foto-2 .grid__item.pos-3 .grid__item-img { background-image:url(../fotos/img2-4.jpg); }
.grid-container.change-foto-2 .grid__item.pos-4 .grid__item-img { background-image:url(../fotos/img2-5.jpg); }
.grid-container.change-foto-2 .grid__item.pos-5 .grid__item-img { background-image:url(../fotos/img2-6.jpg); }

.grid-container.change-foto-3 .grid__item.pos-0 .grid__item-img { background-image:url(../fotos/img3-1.jpg); }
.grid-container.change-foto-3 .grid__item.pos-1 .grid__item-img { background-image:url(../fotos/img3-2.jpg); }
.grid-container.change-foto-3 .grid__item.pos-2 .grid__item-img { background-image:url(../fotos/img3-3.jpg); }
.grid-container.change-foto-3 .grid__item.pos-3 .grid__item-img { background-image:url(../fotos/img3-4.jpg); }
.grid-container.change-foto-3 .grid__item.pos-4 .grid__item-img { background-image:url(../fotos/img3-5.jpg); }
.grid-container.change-foto-3 .grid__item.pos-5 .grid__item-img { background-image:url(../fotos/img3-6.jpg); }

.pos-6 { --grid-row:30; --grid-column:40; }

.grid__item { grid-area:var(--grid-row)/var(--grid-column)/span 22/span 10; }
.pos-0 { --grid-row:7; --grid-column:12; }
.pos-1 { --grid-row:26; --grid-column:6; }
.pos-2 { --grid-row:6; --grid-column:23; }
.pos-3 { --grid-row:27; --grid-column:17; }
.pos-4 { --grid-row:7; --grid-column:34; }
.pos-5 { --grid-row:26; --grid-column:28; }

@media screen and (max-aspect-ratio: 16/16) {
	.grid__item { grid-area:var(--grid-row)/var(--grid-column)/span 10/span 12; }
	.pos-0 { --grid-row:14; --grid-column:7; }
	.pos-1 { --grid-row:26; --grid-column:2; }
	.pos-2 { --grid-row:13; --grid-column:20; }
	.pos-3 { --grid-row:27; --grid-column:15; }
	.pos-4 { --grid-row:14; --grid-column:33; }
	.pos-5 { --grid-row:26; --grid-column:28; }
}

.grid__item { z-index:1; }
.grid__item:hover { z-index:3; }
.grid__item, .grid__item-img { position:relative; will-change:transform; }
.grid__item .grid__item-img { width:100%; height:100%; background-size:cover; background-position:50% 50%; text-align:center; }
.grid__item strong { display:block; font-family: "Open Sans", arial, sans-serif; text-decoration:none!important; z-index:10; color:rgba(249,89,89,.75); /*display:none!important;*/ }
.grid__item strong span { letter-spacing:.025em; color:rgb(249,89,89); display:none; } 
.grid__item-text { position:absolute; width:100%; height:100%; display:flex; flex-wrap:wrap; }
.grid__item strong span { font-family: 'Trirong', serif; }
.grid__item:hover .grid__item-text { opacity:0; }

#grid-wrapper { opacity:1; webkit-transition:opacity .5s ease-in-out; -moz-transition:opacity .5s ease-in-out; -o-transition:opacity .5s ease-in-out; -ms-transition:opacity .5s ease-in-out; transition:opacity .5s ease-in-out;  }
#grid-wrapper.imagen-remove { opacity:0; }

.char { will-change:transform; }

@media screen and (min-width:769px) {
	.grid__item strong { font-size:4vw; font-weight:700; }
	.grid__item strong span { font-size:4.25vw; font-weight:100; }
	.grid__item-text { background:rgba(18,18,18,.75); justify-content:center; align-items:center; }
	.grid-container.change-foto-1 .grid__item strong span.item-ca, .grid-container.change-foto-2 .grid__item strong span.item-es, .grid-container.change-foto-3 .grid__item strong span.item-en { display:inline-block!important; }
}	
@media screen and (max-width:768px) {
	.grid__item strong { font-size:7vw; font-weight:700; line-height:8.25vw; padding-bottom:5vw; }
	.grid__item strong span { font-size:7.25vw; font-weight:100; }
	.grid__item-text { /*background: linear-gradient(0deg, rgba(18,18,18,0.75) 0%, rgba(18,18,18,0.75) 25%, rgba(18,18,18,0) 75%, rgba(18,18,18,0) 100%);*/ justify-content:center; align-items:flex-end; }
	.grid-container.change-foto-1 .grid__item strong span.item-ca, .grid-container.change-foto-2 .grid__item strong span.item-es, .grid-container.change-foto-3 .grid__item strong span.item-en { display:block!important; }
}

@media only screen and (hover: none) and (pointer: coarse){
	.grid__item .grid__item-img { opacity:.75!important; }
	.grid__item strong { display:block; }
	.grid__item { z-index:4; }
}
/*@media screen and (min-aspect-ratio: 10/16) {
	.grid__item strong { display:none; }
}*/

/* Button change class */
#change-class-1, #change-class-2, #change-class-3, #pdf-class { background:none; cursor:pointer; width:50px; height:50px; line-height:46px; border-radius:100%; display:block; text-align:center; border:1px solid rgb(249,89,89); color:rgb(249,89,89); font-size:15px; font-weight:normal; text-decoration:none; transform: scale(.9); }
.change-foto-1 #change-class-1, .change-foto-2 #change-class-2, .change-foto-3 #change-class-3 { border:none; background:rgb(249,89,89); color:#121212; cursor:default; font-weight:bold; }
#grid-container.nav-remove .change-class-buttons { opacity:0; }

@media screen and (min-width:769px) {
	.change-class-buttons { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:50px; height:100%; position:fixed; bottom:0; left:30px; }
	.grid-container:not(.change-foto-1) #change-class-1:hover, .grid-container:not(.change-foto-2) #change-class-2:hover, .grid-container:not(.change-foto-3) #change-class-3:hover, #pdf-class:hover { transform: scale(1.1); }
}
@media screen and (max-width:768px) {
	.change-class-buttons { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; width:100%; position:absolute; bottom:80px; left:0; }
	#change-class-1, #change-class-2, #change-class-3, #pdf-class { display:inline-block; }
	/*#pdf-class { line-height:56px; }
	.grid-container:not(.change-foto-1) #change-class-1:hover, .grid-container:not(.change-foto-2) #change-class-2:hover, .grid-container:not(.change-foto-3) #change-class-3:hover { transform: scale(.5); }*/
}

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

.content__title { font-size:12vw; margin:0; line-height:1.2; position:relative; color:rgba(227,21,77,.05); text-transform:uppercase; pointer-events:none; }
.content__title-line { display:block; position:relative; overflow:hidden; line-height:1; }
.content__title-line--1 { margin-left:-5vw; }
.content__title-line--2 { margin-right:-5vw; }
.preview { position:relative; pointer-events:none; }
.js .preview { width:100%; height:100%; position:absolute; top:0; left:0; }
.preview__item { position:relative; margin:0 auto; display:grid; grid-template-rows:auto auto auto; grid-template-columns:50% 50%; grid-template-areas:"preview-back preview-back" "preview-img preview-title" "preview-content preview-content"; }
.js .preview__item { perspective:1000px; }
.js .preview__item:not(.preview__item--open) { position:absolute; overflow:hidden; height:0; opacity:0; }
.js .preview__item--open { pointer-events:auto; }
.preview__item-back span { display:inline-block; width:60px; height:60px; line-height:62px; text-align:center; color:var(--color-link); border:1px solid var(--color-link); border-radius:100%; }
.preview__item-back:hover span { opacity:1; background:var(--color-link); color:rgb(18,18,18); }
.preview__item-back span:before { content: "\00d7"; display:inline-block; font-size:45px; font-weight:100; }
.preview__item-title { color:var(--color-link); font-family: 'Trirong', serif; font-size:2.5em; line-height:1em; margin-right:30%; margin-top:130px!important; padding-top:30px!important; }
.preview__item-title strong { font-family: "Open Sans", arial, sans-serif; display:inline-block; padding-right:5px; }
.preview__item-title em { font-weight:100; display:none; font-style:normal; padding-right:10px; }
.change-foto-1 .preview__item-title em.item-ca, .change-foto-2 .preview__item-title em.item-es, .change-foto-3 .preview__item-title em.item-en { display:inline-block; }

.preview__item-imgwrap { width:100px; height:150px; border-radius:0; overflow:hidden; grid-area:preview-img; transform-origin:50% 100%; }
.preview__item-img { width:100%; height:100%; background-size:cover; background-position:50% 50%; }

.preview__item-content { grid-area:preview-content; margin-right:10%; padding-right:10%; overflow:auto; /*background:#121212;*/ }
.preview__item-cat, .preview__item-es, .preview__item-en { display:none; }
.change-foto-1 .preview__item-cat, .change-foto-2 .preview__item-es, .change-foto-3 .preview__item-en { display:block; }
.preview__item-description { font-size:18px; line-height:28px; color:rgba(255,255,255,.5); padding-bottom:30px!important; }
.preview__item:not(#preview-6) .preview__item-meta { display:none!important; }
.preview__item-meta { color:var(--color-link); text-transform:uppercase; font-size:18px; margin-top: 20px; }
.preview__item-meta strong { opacity:1; }
.preview__item-meta b { opacity:.75; font-weight:normal; }
.preview__item-meta em { opacity:.5; }

.preview__item-button { color:#fff; border:0; border-radius:2rem; text-transform:uppercase; font:inherit; font-size:.875rem; font-weight:500; background:#000; padding:1rem 2rem; display:inline-block; cursor:pointer; margin-bottom:0; }
.preview__item-button:active,.preview__item-button:focus,.preview__item-button:hover { outline:none; background:var(--color-link); }
.cursor { display:none; }

@media screen and (min-width:769px) {
	body,html { overflow:hidden; }
	.message { display:none; }
	.preview__item-imgwrap { width:80%; height:100%; grid-row-start:1; }
	.preview__item { height:100%; width:100%; grid-template-columns:40% 58%; grid-template-areas:"... ..." "preview-back ..." "preview-title preview-title" "preview-img preview-content"; }
}

@media screen and (max-width:768px) {
	.preview__item-content { margin-left:15px; margin-right:15px; padding-right:15px; }
	.preview__item { height:100%; width:100%; grid-template-columns:100%; grid-template-areas:"..." "preview-title" "preview-content"; }
	.preview__item-description { padding-bottom:60px!important; }
	.preview__item-title { margin-right:0; margin-left:15px; border-top:none; display:block; width:90%; }
	.preview__item-imgwrap { display:none!important; }
}

@media (any-pointer:fine) { 
	.cursor { display:block; width:100%; height:100%; z-index:9999;
}
	
.cursor,.cursor__svg { position:absolute; top:0; left:0; pointer-events:none; /*display:none!important;*/ }
.cursor__svg-circle { fill:var(--cursor-fill); stroke:var(--cursor-stroke); stroke-width:var(--cursor-stroke-width); /*display:none!important;*/ }
.cursor__text { position:absolute; top:1.875rem; left:80px; font-size:14px; text-transform:uppercase; font-weight:bold!important; fill:var(--cursor-text); color:var(--cursor-text); /*display:none!important;*/ }
.splitting .char,.splitting .word { display:inline-block; }
.splitting .char { position:relative; }
.splitting .char:after,.splitting .char:before { content:attr(data-char); position:absolute; top:0; left:0; visibility:hidden; transition:inherit; user-select:none; }
.splitting { --word-center:calc(var(--word-total)/2 - 0.5); --char-center:calc(var(--char-total)/2 - 0.5); --line-center:calc(var(--line-total)/2 - 0.5); }
.splitting .word { --word-percent:calc(var(--word-index)/var(--word-total)); --line-percent:calc(var(--line-index)/var(--line-total)); }
.splitting .char { --char-percent:calc(var(--char-index)/var(--char-total)); --char-offset:calc(var(--char-index) - var(--char-center)); --distance:calc(var(--char-offset)*var(--char-offset)/var(--char-center)); --distance-sine:calc(var(--char-offset)/var(--char-center)); --distance-percent:calc(var(--distance)/var(--char-center)); }
.splitting.cells img { width:100%; display:block; }@supports (display:grid) { .splitting.cells { position:relative; overflow:hidden; background-size:cover; visibility:hidden; }
.splitting .cell-grid { background:inherit; position:absolute; top:0; left:0; width:100%; height:100%; display:grid; grid-template:repeat(var(--row-total),1fr)/repeat(var(--col-total),1fr); }
.splitting .cell { background:inherit; position:relative; overflow:hidden; }
.splitting .cell-inner { background:inherit; position:absolute; visibility:visible; width:calc(100%*var(--col-total)); height:calc(100%*var(--row-total)); left:calc(-100%*var(--col-index)); top:calc(-100%*var(--row-index)); }
.splitting .cell { --center-x:calc(var(--col-total)/2 - 0.5); --center-y:calc(var(--row-total)/2 - 0.5); --offset-x:calc(var(--col-index) - var(--center-x)); --offset-y:calc(var(--row-index) - var(--center-y)); --distance-x:calc(var(--offset-x)*var(--offset-x)/var(--center-x)); --distance-y:calc(var(--offset-y)*var(--offset-y)/var(--center-y)); }