@charset "UTF-8";

/* Legal Disclaimer for Web licence. Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats. Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade. It is strictly prohibited to rename the font and to download or use these fonts in any other media. These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains: www.pollyapfelbaum.com (monthly pageviews: <50K) */
@font-face { font-family: "Circular"; src: url("../fonts/CircularXXWeb-MediumItalic.woff") format("woff"); font-style: italic; font-weight: normal;}
@font-face { font-family: "Circular"; src: url("../fonts/CircularXXWeb-MediumItalic.woff2") format("woff2"); font-style: italic; font-weight: normal;}
@font-face { font-family: "Circular"; src: url("../fonts/CircularXXWeb-Medium.woff") format("woff"); font-weight: normal;}
@font-face { font-family: "Circular"; src: url("../fonts/CircularXXWeb-Medium.woff2") format("woff2"); font-weight: normal;}

::selection { background: #EEEEEE; color: #000;}
::-moz-selection { background: #EEEEEE; color: #000;}
::-webkit-selection { background: #EEEEEE; color: #000;}

:root {
	--und: 1.25rem;
	--und2: 2.5rem;
	--m-l: 9.4rem;
	--m-m: 4.5rem;
	--h-footer: 7rem;
	--color: #0000FF;
}



/* General */

html { animation: fadein 1.5s;}
html.no-scroll { overflow: hidden; }

a, button { color: #000000; text-decoration: none;}
a:hover,
button:hover,
a.active { color: var(--color);}

.padd { padding: var(--und);}
.padd2 { padding: var(--und2);}
.padd-h { padding-right: var(--und); padding-left: var(--und);}
.padd-h2 { padding-right: var(--und2); padding-left: var(--und2);}

.col-main { width: 100%;}



/* Tipografía */

* { font-family: 'Circular', sans-serif;}
html { font-size: .52vw;}

h1, .txt-h1, .header, .content-bio h2{ font-size: 5.4rem; line-height: 1.075em;}
h2, .txt-h2 { font-size: 5.2rem; line-height: 1.2em;}
body, h3, p, .txt-h3 { font-size: 3.4rem; line-height: 1.2em;}
h4, h5, small, .txt-h4, .flickity-page-dots, figcaption, .content-bio h1, .content-bio h3, .content-bio p { font-size: 2.1rem; line-height: 1.2em;}

button { text-align: left; }

.content-bio p { padding-bottom: .3em;}

.content-txt h1, .content-txt h2, .content-txt h3, .content-txt h4, .content-txt h5, .content-txt p, .content-txt ul { padding-bottom: 1.2em;}
.content-txt > :last-child { padding-bottom: 0;}

.content-top-text small { line-height: 1.325em;}



/* Header & Footer */

.header { position: fixed; top: 0; z-index: 20; height: var(--m-l); width: 100%; padding: 0 var(--und); display: flex; align-items: center; justify-content: center;}
.header .col-main { padding: 0 var(--und); display: flex; align-items: center; justify-content: space-between;}

.menu ul { display: flex; list-style: none;}
.menu ul li + li { margin-left: 1em;}

.footer { height: var(--h-footer); width: 100%; padding: var(--und2) var(--und); display: flex; align-items: center; justify-content: flex-end;}
.footer .col-main { padding: 0 var(--und); display: flex; align-items: center; justify-content: flex-end;}

.scrolled .header { background: #FFF;}
.scrolled .home .header { background: transparent;}


/* Content */ 

.content { position: relative; z-index: 1; padding-top: var(--m-l); min-height: calc(100vh - var(--h-footer));}
.content img { max-width: 100%; display: block; height: auto;}
.content ul { list-style: none;}

.content-modul { padding-top: var(--m-m); padding-bottom: var(--m-m);}
.content-modul-g { padding-top: var(--m-l); padding-bottom: var(--m-l);}

.content-slider { position: absolute; top: 0; width: 100%; overflow: hidden; height: 100vh;}
.content-slider-item,
.content-slider-item-in { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;}
.content-slider-item-in-info { position: absolute; left: var(--und2); bottom: var(--und2); max-width: 80%;}
.content-slider-item img { max-width: 100%; max-height: 100%; display: block; margin: auto; height: auto;}
.content-slider figure { margin-bottom: 0; }
.content-slider .full img,
.content-slider .full svg { width: 100%; height: 100%;}
.content-slider .full.cover img { width: 100%; height: 100%; object-fit: cover;}
.content-slider .margins { padding: calc(var(--m-l) + var(--und2)) var(--und2) var(--m-l) var(--und2); }
.content-slider .margins img { width: 100%; height: 100%; object-fit: contain;}
.content-slider .flickity-button { background: transparent; width: 50%; top: var(--m-l); bottom: var(--m-l); height: auto; transform: translateY(0); border-radius: 0; opacity: 0;}
.content-slider .flickity-button svg { display: none;} 
.content-slider .flickity-prev-next-button.previous { left: 0; cursor: url(../img/icon-arrow-l.png) 47 28, auto;}
.content-slider .flickity-prev-next-button.next { right: 0; cursor: url(../img/icon-arrow-r.png) 47 28, auto;}
.content-slider .flickity-page-dots { position: absolute; right: var(--und2); bottom: var(--und2); width: auto; text-align: right; counter-reset: section;}
.content-slider .flickity-page-dots:after { display: inline-block; content:  '\0000a0 / ' counter(section);}
.content-slider .flickity-page-dots,
.content-slider .flickity-page-dots .dot,
.content-slider .flickity-page-dots:after { height: auto; line-height: 1em; vertical-align: middle; border: 0;}
.content-slider .flickity-page-dots .dot { width: 0; overflow: hidden; padding: 0; border-radius: 0; margin: 0; background: transparent; cursor: none;}
.content-slider .flickity-page-dots .dot, 
.content-slider .flickity-page-dots .dot:hover { opacity: 1;}
.content-slider .flickity-page-dots .dot:before { counter-increment: section; content: counter(section);}
.content-slider .flickity-page-dots .dot.is-selected { width: auto; padding: 0; background: transparent; border: 0;}

.content-grid { width: 100%; display: flex; flex-wrap: wrap;}
.content-grid-item { position: relative;}
.content-grid-item a { display: flex; align-items: center; justify-content: center; overflow: visible; text-align: center;}
.content-grid-item a:before { content: ''; display: block; width: 100%; padding-top: 60%;}
.content-grid-item h2 { position: absolute; z-index: 1;}
.content-grid-item img { position: absolute; z-index: 2; max-width: calc(100vw/6); max-height: calc(100vw/6); width: auto; height: auto; opacity: 0; pointer-events: none; transform: translate(15%, 15%);}
.content-grid-item img.r { transform: translate(-115%, 15%);}
.content-grid-item img.b { transform: translate(15%, -115%);}
.content-grid-item img.r.b { transform: translate(-115%, -115%);}
.content-grid-item a:hover h2 { color: var(--color);}
.content-grid-item a:hover img { opacity: 1;}
.mobile-device .content-grid-item a:hover img { opacity: 0;}

.content-main { display: flex; flex-wrap: wrap; justify-content: center; padding: var(--und2) var(--und2) var(--m-m) var(--und2);}
.content-main h1 { text-align: center;}
.content-main figcaption { padding: var(--und2) 0;}
.content-main img { max-height: calc(100vh - 25rem);}
.content-main-title { padding-bottom: var(--m-m);}

.content-mosaic { display: flex; flex-wrap: wrap;}
.content-mosaic-item { padding-bottom: var(--und2);}

.content-img-one figcaption,
.content-img-two figcaption { display: block; padding-top: var(--und2);}

.content-img-one img,
.content-img-two img { width: 100%;}

.content-img-full img { max-height: 90vh; object-fit: cover;}

.content-next-prev a { padding: 30rem var(--und); display: block;}

.content-next-prev .link-prev { cursor: url(../img/icon-arrow-l.png) 47 28, auto;}
.content-next-prev .link-next { text-align: right; cursor: url(../img/icon-arrow-r.png) 47 28, auto;}

.content-top-text { padding-top: var(--und2);}
.content-contact small { min-width: 15rem;}

.content-bio h3 { min-width: 6rem;}

.content-acordeon .content-acordeon-info { display: none; padding-left: var(--m-m); padding-right: var(--m-m);}
.content-acordeon .content-acordeon-info.simple { width: 33.333%; padding-top: var(--m-m); padding-bottom: var(--m-m);}
.content-acordeon .content-acordeon-info.columns { width: 100%; padding-top: var(--m-m); padding-bottom: var(--m-m); column-count: 3; column-gap: 5rem;}
.content-acordeon .content-acordeon-info.columns .row { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid;}
.content-acordeon .content-acordeon-info .row { padding-bottom: var(--und);}
.content-acordeon .content-acordeon-info .content-acordeon-info { padding-left: 0; padding-right: 0;}
.content-acordeon.active > .content-acordeon-info { display: block;}
.content-acordeon .content-acordeon-info a { border-bottom: .2rem solid;}

.content-popup { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background-color: #FFF; visibility: hidden; opacity: 0;}
.content-popup.active { visibility: visible; opacity: 1;}
.content-popup-in { position: absolute; z-index: 1; width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;}
.content-popup-btn { position: absolute; z-index: 2; top: 2rem; right: 2rem; width: 5rem; height: 5rem;}
.content-popup-btn:before,
.content-popup-btn:after { content: ''; display: block; width: 100%; height: .5rem; position: absolute; top: 50%; left: 0; background-color: #000;}
.content-popup-btn:before { transform: rotate(45deg); }
.content-popup-btn:after { transform: rotate(-45deg);}



/* Animate */

.content-grid-item a:hover img { transition: opacity .4s .4s ease, transform .4s ease;}
.content-grid-item img { transition: opacity .4s ease;}
.content-grid-item h2,
a { transition: color .6s ease;}
.content-acordeon { transition: height .6s ease;}
.menu { transition: transform .6s ease, top .6s ease;}
.content-popup { transition: all .6s; }

@keyframes fadein { from { opacity: 0;} to { opacity: 1;} }