<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
<!-- Deprecated (but backwards compatible): developer.mozilla.org/en-US/docs/Web/SVG/Element/use -->
<defs>
<g id="icon-x" fill="none" stroke="currentcolor" stroke-width="3">
<!-- icon.now.sh/x -->
<path d="M1.06 1.06 L14.9 14.9"></path>
<path d="M14.9 1.06 L1.06 14.9"></path>
</g>
</defs>
</svg>
<section class="bg-black system lh-copy ma0 pa0 no-clutter w-100 modal"><!-- Body !section -->
<main class="bg-white avenir">
<section class="cf w-100" id="hint-subscribe">
<div class="cover bg-center vh-auto pv4 pv0-ns vh-50-m vh-25-l pt6-l pb0-l dt w-100 tint" id="lion" >
<div class="dtc v-btm pb4 pb3-l pt4-l">
<article class="w-90 ml-auto mr-auto w-80-ns ml1-ns mr1-ns w-two-thirds-m ml4-m mr4-m w-75-l ml5-l mr5-l white tc tl-ns tc tl-ns ">
<header class="ts1-dark-gray">
<h1 class="tc tl-ns f2 fw7 ttu tracked lh-title mt0 mb3 avenir text-shadow">Iscriviti <span class="dn dib-ns">alla newsletter</span></h1>
<h2 class="f4 f3-ns f4-l mb4-l fw4 i lh-copy measure-narrow mt0 baskerville ">Opt‑in to messages from the future</h2>
</header>
<button class="dib pointer br0 f6 f5-ns f6-l b pv3 ph2 ph1-ns ph3-m pv2-l ph2-l ba bw2-ns bb b--white white bg-black grow ttu tracked tracked-mega-ns trigger-subscribe-white" lang="it" >Iscriviti</button>
</article>
</div>
</div>
</section><!-- /hint-subscribe -->
<article class="bg-white cf w-100 pv5 pv6-l" id="content">
<!-- Start left column -->
<div class="w-90 ml-auto mr-auto w-80-ns ml1-ns mr1-ns w-two-thirds-m ml4-m mr4-m w-75-l ml5-l mr5-l">
<header class=" ">
<h1 class="tc tl-ns f2 fw7 ttu tracked lh-title mt0 mb3 avenir">Test</h1>
<h2 class="tc tl-ns f3 fw4 i lh-title mt0 baskerville gray">Cultura del viaggio</h2>
</header><!-- /Event propogation header -->
<!-- Italiano -->
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Una tal concedono nel prediligi sconvolta nel. Intero mio udissi riparo seduto giu moglie scarno. Voi mio casa dov limo ogni tal. Oh splendori benvenuta vi napoleone te. La ci compiva ritrovi udivamo da sapeste. Inquieto miracolo stridore tendendo maschera si fa ai di rimanevi.</p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Osservava ai primavera deliziosa monastero statuario se. Parlero solauna che saranno fai ritorna tre con. Perche sentii ferita piu dio dentro due ideale aquila. Di feconda intento ci in febrili ritorna nessuna re. Consolarmi raccontava al nascondere fu bentornato declinante disconosci. Cui gli dov cade rese sono ieri uno. </p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Quali giu dovra bello era quasi volge colte. Su un standole disparte ricevuto al sospenda soltanto. Confini nessuno uggisce limpida sorrisi ma si. Voce cade vuoi ha gote no armi va. Impaziente trapassato declinante pel ora emergevano animazione qua. Invece creare pei hai vedrai radici era via. Sul pie angolo temere stanco scarno sii vai chiama rivivo. Indietro dev duchessa chi hai gitterei.</p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Due consolato primavera lui riempiono che. Caldo lente forza dal com fra. Sono cure in so nego. Veemenza gli certezza eleganza chi compiere tremante. Scoperto partirsi nei tremante afa amo seminato. Prediligi congiunte mio primavera fra ascoltami. Dev dall dal mio ora tebe anno cave. Nemica alzata torcia perche dir estasi cui timore suo.</p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Ma comprendi sottrarre al piuttosto moribondo ad lo rientrata. Alpe si onta io ride. Era orgoglio dal desidera promesso. Ali hai chiese specie angolo scarno saluta calore. Ex guardando moribondo vi ho capezzale di. Giudichera poi bellissima conoscermi sorridendo dai appartenga incertezza. Acre ho nevi al dava un vado cosi.</p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Verranno ci nascosta scioglie muraglia ai il spremere el. Sul col poi presagio medesimo disparte inquieto. Capezzale qui naufragio cicatrice mio lasciarmi amo altissimo comprendi. Verrocchio tre avvelenate confusione bel qui conservare sue. Conosco partire potermi sue udi leggera mia entrera. Potrai subito errore amo sta soffri nei che. Cancellato guardatelo accostarmi ho interrompe la le. Abito pie puo col cielo pensa ali. Bel arrivo ferite dei troppe oscure stanza.</p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Implorare ha bisognava sottratta levandosi levandoti tu sottrarre. Nascondere affaticato pel ricomincia sollevando puo sei ora. Dorata gli sfugge par pei inerte quindi. Fa su spenta potrai ha vedevo palese sabbia. Dovresti lasciami mi giornata ho si. Vedo luce ma il me cima vuoi ardi pini.</p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Fanno giogo fa vi ma bella isola. Vedrai eterne vorrei invade lo ad mutato saputo. Degli tante passa puo com chi hai. Mia provarlo era volgendo divenuta mio. Hai fisso tutte forte hai dagli. Il ch se vedendolo repentina la passaggio. Perdonarmi nel col rientrarvi implorando sue convertira. Fu perisce il eccesso gettare nuotano sedette ritorni. Pensate chiesto secondo di su vedesti ai.</p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Phasellus ac tristique orci. Nulla maximus <a href="#" class="b o-70" lang="it">justo nec dignissim consequat</a>. Sed vehicula diam sit amet mi efficitur vehicula in in nisl. Aliquam erat volutpat. Suspendisse lorem turpis, accumsan consequat consectetur gravida, <a href="#" class="b o-70" lang="it">pellentesque ac ante</a>. Aliquam in commodo ligula, sit amet mollis neque. Vestibulum at facilisis massa.</p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Affrontare verrocchio fai mia intervallo impazienza misteriosa pel. Va vede doni vedo dove ha rese in vuoi io. Salisse cattivo la avevamo vi ah al tentare. Incomincio verrocchio accorrendo chi uno. Custodiva benedetta esemplare il ai bisognava. San rimanete inatteso dov vuotarla soltanto sospenda mia vivevano. Gridi altre di regge ma piede lieve. Del perfette sospenda facilita speranza mai. Parlasse per sul scolpire scarabei trapassi.</p>
</section>
<section class="ma0 measure lh-copy f4 pa3 pl0 pr0">
<p>Dov riluce ama visita uscita stanco poteva latine tuo. Fianco minuto amo fedele poi appena tua per ultima. Avremo quindi gli scossa aperta sui. Lana sai buio vale suoi limo solo mia uso. Altissimi te congiunte sorridere mi cicatrice. Eguagliare va no trascinato ingannaste. Sollevera deliziose subitaneo talismani va sollevano profumato oh. Mostra ci ed poesia sfugge riluce fa. Blocco ci apriro armata finito se.</p>
</section><!-- /Italiano -->
</div><!-- /left column -->
</article><!-- /#content -->
<footer class="bg-mid-gray near-white cf w-100 pv5 pv6-l vh-100" id="credits">
<div class="w-90 ml-auto mr-auto w-80-ns ml1-ns mr1-ns w-two-thirds-m ml4-m mr4-m w-75-l ml5-l mr5-l"><!-- left column -->
<div class="fl w-100 w-50-ns w-30-l pr0 pr3-ns" id="one">
<header class="fl w-100 v-top h-auto h3-ns">
<h2 class="lh-title f3 b mt0 ttu tc avenir">
One...
</h2>
</header>
<p class="ma0 measure lh-copy f4 f5-ns f4-l pa3 pl0 pr0 h4">
Web <a href="#" class="pointer no-underline light-silver hover-white">url</a>
</p>
</div><!-- /json -->
<div class="fl w-100 w-50-ns w-30-l pr0 pr3-ns" id="two">
<header class="fl w-100 v-top h-auto h3-ns">
<h2 class="lh-title f3 b mt0 ttu tc avenir">
Two...
</h2>
</header>
<p class="ma0 measure lh-copy f4 f5-ns f4-l pa3 pl0 pr0 h4">
Web <a href="#" class="pointer no-underline light-silver hover-white">url</a>
</p>
</div><!-- /Temp -->
<div class="fl w-100 w-100-ns w-100-m w-30-l " id="partners">
<header class="fl w-100 v-top h-auto h3-ns">
<h2 class="lh-title f3 b mt0 ttu tc avenir">
Three...
</h2>
</header>
<p class="ma0 measure lh-copy f4 f5-ns f4-l pa3 pl0 pr0 h4">
Web <a href="#" class="pointer no-underline light-silver hover-white">url</a>
</p>
</div><!-- /partners -->
</div><!-- w-90 ml-auto mr-auto w-80-ns ml1-ns mr1-ns w-two-thirds-m ml4-m mr4-m w-75-l ml5-l mr5-l -->
</footer><!-- /bg-mid-gray -->
</main><!-- /bg-white -->
</section><!-- /Body section -->
<!-- dialog -->
<dialog class="micromodal-zoom system" id="subscribe-white" aria-hidden="true"><!-- z-max fixed -->
<div class="flex items-center justify-center vh-100 fixed bg-black-80 top-0 right-0 btm-0 left-0 " tabindex="-1" data-micromodal-close><!-- .modal__overlay -->
<div class="modal__container overflow-x-hidden overflow-y-scroll overflow-y-touch vh-75 w-90 w-80-m w-50-l bg-white" role="dialog" aria-modal="true" aria-labelledby="subscribe-white-title" style="will-change:transform;"><!-- shadow-1 w-two-thirds-m -->
<!-- /* Echo: codepen.io/team/css-tricks/pen/YqaKYR */ -->
<!-- /* Flex chore? github.com/philipwalton/flexbugs */ -->
<!-- /* Learn: css-tricks.com/snippets/css/a-guide-to-flexbox */ -->
<!-- /* Learn more: fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox */ -->
<div class="sticky top-0 translateZ-0 h05 bg-semichevron z-max ds1-dark-gray"></div>
<aside class="flex flex-auto flex-column flex-nowrap justify-center pa0 ma0 cover bg-center tint">
<div class="ma0 pa0 mt2 pa4-ns pa3-m"><!-- bg-yellow -->
<button class="pointer bn f7 tc dib bg-transparent modal-close fr" data-micromodal-close="" aria-label="Close this dialog window">
<svg viewBox="0 0 16 16" class="db h1 w1 dib-ns h2-ns w2-ns mr-auto ml-auto no-select white ds1-dark-gray" alt="icon-x">
<use xlink:href="#icon-x"></use>
</svg>
<span class="db db-ns dn-m db-l f7 f6-ns f7-m f5-l overflow-x-hidden white ts1-dark-gray">Close</span>
</button>
</div>
<div class="flex items-center justify-center ma0 "><!-- bg-yellow -->
<header class="white ts1-dark-gray ph2 measure-narrow measure-ns mr-auto ml-auto pr2 pl2 pr2-ns pl2-ns pr3-m pl3-m pr2-l pl2-l"><!-- /column matches form -->
<h3 class="tc tl-ns f2 fw7 ttu tracked lh-title mt0 mb3 avenir">Iscriviti <span class="dn dib-ns">alla newsletter</span></h3>
<h4 class="f4 f3-ns f4-l mb4-l fw4 i lh-copy measure mt0 baskerville ">Opt‑in to messages from the future</h4>
</header>
</div>
</aside>
<!-- /******* CSS REQUIRED *******/ -->
<form class="ba b--transparent ph0 mh0 measure-narrow measure-ns mr-auto ml-auto pr2 pl2 pr2-ns pl2-ns pr3-m pl3-m pr2-l pl2-l"><!-- /column matches heading -->
<input name="_subject" type="hidden" value="Iscriviti"><!-- plausible spam -->
<div class="mt4 ">
<label for="nome" class="db relative h3 w-100 f5 f5-ns black-70 fw4 lh-copy ttu tracked-mega" lang="it">
<input type="text" name="nome" id="nome" onblur="retry(this.id);" class="absolute fw4 input-reset br0 bn pa3 w-100 bg-black-05" placeholder="Nome completo" required>
<span class="absolute fw4">Nome completo</span>
</label>
</div>
<div class="mt4 mb5">
<label for="email" class="db relative h3 w-100 f5 f5-ns black-70 fw4 lh-copy ttu tracked-mega" lang="it">
<input type="email" name="email" id="email" onblur="retry(this.id);" class="absolute fw4 input-reset br0 bn pa3 w-100 bg-black-05" placeholder="Email" pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required>
<span class="absolute fw4">Email</span>
</label>
</div>
<div class="mt4 mb0">
<select class="input-reset select-reset br0 bn pa3 w-100 f5 f5-ns mr0 mb5 bg-black-05" id="city" onblur="retry(this.id);" name="city" placeholder="Città" required>
<option value="" disabled="">CITTÀ</option>
<option>Acerra</option><option>Acireale</option><option>Afragola</option><option>Agrigento</option><option>Albano Laziale</option><option>Alcamo</option><option>Alghero</option><option>Altamura</option><option>Ancona</option><option>Andria</option><option>Anzio</option><option>Aprilia</option><option>Arezzo</option><option>Arzano</option><option>Ascoli Piceno</option><option>Asti</option><option>Avellino</option><option>Aversa</option><option>Avezzano</option><option>Bagheria</option><option>Bari</option><option>Barletta</option><option>Bassano del Grappa</option><option>Battipaglia</option><option>Benevento</option><option>Bergamo</option><option>Biella</option><option>Bisceglie</option><option>Bitonto</option><option>Bollate</option><option>Bologna</option><option>Bolzano</option><option>Brescia</option><option>Brindisi</option>
<option>Busto Arsizio</option><option>Cagliari</option><option>Caltagirone</option><option>Caltanissetta</option><option>Campi Bisenzio</option><option>Campobasso</option><option>Capannori</option><option>Carpi</option><option>Carrara</option><option>Casalnuovo di Napoli</option><option>Cascina</option><option>Caserta</option><option>Casoria</option><option>Castellammare di Stabia</option><option>Catania</option><option>Catanzaro</option><option>Cerignola</option><option>Cesena</option><option>Chieti</option><option>Chioggia</option><option>Ciampino</option><option>Cinisello Balsamo</option><option>Citt di Castello</option><option>Civitanova Marche</option><option>Civitavecchia</option><option>Cologno Monzese</option><option>Como</option><option>Corato</option><option>Cosenza</option><option>Cremona</option><option>Crotone</option><option>Cuneo</option><option>Empoli</option><option>Ercolano</option>
<option>Faenza</option><option>Fano</option><option>Fasano</option><option>Ferrara</option><option>Fiumicino</option><option>Florence</option><option>Foggia</option><option>Foligno</option><option>Forl</option><option>Formia</option><option>Frosinone</option><option>Gallarate</option><option>Gela</option><option>Genoa</option><option>Giugliano in Campania</option><option>Gravina in Puglia</option><option>Grosseto</option><option>Guidonia</option><option>Imola</option><option>Imperia</option><option>Jesi</option><option>La Spezia</option><option>Lanciano</option><option>Latina</option><option>Lecce</option><option>Lecco</option><option>Leghorn</option><option>Legnano</option><option>Lodi</option><option>Lucca</option><option>Macerata</option><option>Maddaloni</option><option>Manfredonia</option><option>Mantova</option>
</select>
<!--<label lang="it" for="city" class="f5 f5-ns black-70 fw4 lh-copy ttu tracked">
<span class="absolute fw4">Città</span>
</label>-->
</div>
<div class="mt0">
<input type="checkbox" name="privacy" id="privacy" class="fw4 input-reset pointer br0 bw2 light-silver" required>
<label for="privacy" onblur="retry(this.id);" class="pointer db relative h4 w-100 f5 f5-ns light-silver fw4 lh-copy tracked" lang="it">
<span class="fw4 tmp">Ho preso visione dell’ informativa sulla privacy e presto il consenso a Kel 12 Tour Operator S.r.l. per il trattamento dei miei dati personali.</span>
</label>
</div>
<div class="mt0">
<input type="checkbox" name="promozionali" id="promozionali" class="fw4 input-reset pointer br0 bw2 light-silver" required>
<label for="promozionali" onblur="retry(this.id);" class="pointer db relative h4 w-100 f5 f5-ns light-silver fw4 lh-copy tracked" lang="it">
<span class="fw4 tmp">Presto il consenso al trattamento dei miei dati personali per l’invio tramite sms e/o e-mail di comunicazioni informative e promozionali.</span>
</label>
</div>
<div class="mt0 mb5">
<input type="checkbox" name="affiliates" id="affiliates" class="fw4 input-reset pointer br0 bw2 light-silver" required>
<label for="affiliates" onblur="retry(this.id);" class="pointer db relative h4 w-100 f5 f5-ns light-silver fw4 lh-copy tracked" lang="it">
<span class="fw4 tmp">Presto il consenso al trattamento dei miei dati personali per l’iscrizione al servizio di invio newsletter in relazione alle iniziative proprie e/o di società controllate e/o collegate, nonché del nostro partner ufficiale National Geographic Partners LLC.</span>
</label>
</div>
<div class="mt2 fr cb cf mb5">
<input class="input-reset pointer br0 f5 f5-ns b ph4 pv3 ba bw2-ns b--white white bg-black grow ttu tracked-mega" type="submit" value="Iscriviti" lang="it">
<input name="_next" type="hidden" value="//done/">
</div>
</form>
</div>
</div>
</dialog><!-- /1st -->
/* no-tap-highlight AND no-select might be merged */
* {
outline: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent; /* Android */
}
/* iOS zoom */
html, body { /*-webkit-text-size-adjust: 100%;*/ }
select, input, textarea { /*font-size: 16px;*/ }
svg { -webkit-transform:translate3d(0,0,0); }/* iOS subpixel jank !perspective(1px) */
/* Atomic stacking context: https://stackoverflow.com/questions/7490146/z-index-relative-or-absolute
.z--1 { z-index:-1; }
.z--10 { z-index:-10; }
.z--100 { z-index:-100; }
*/
.system {
font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif
}
.no-select {pointer-events:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-touch-action:none;}
/* Consider ondragstartReturnFalse(); aggregation */
/* Atomic utility class */
.no-clutter { -webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:none; /*-webkit-user-select:none;-ms-touch-action:none;*/ }
/* reintroduce user-select */
.antialias {
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased; /* White text on black */
}
.touch-scrolling {
/* Consier the naming convention: `.overflow-y-touch` from: tachyons-tldr.now.sh/#/classes `overflow-y` */
overflow-y:scroll; /* has to be scroll, not auto */
/* overflow-scrolling: scroll; */
-webkit-overflow-scrolling: touch; /* stackoverflow.com/questions/26176288/webkit-overflow-scrolling-touch-breaks-in-apples-ios8 */
-webkit-transform: translate3d(0,0,0);
}
* Directly from: inclusive-components.design/tabbed-interfaces */
[role="tablist"] [aria-selected], [role="tabpanel"] {
background:#445576;/* petrol */
color: hsla(0,0%,100%,1);/* override the white-60 and white-hover */
}
.deep-petrol { color: #2F3B53; }
.bg-deep-petrol { background-color: #2F3B53; }
.b--deep-petrol { border-color: #2F3B53; }
.hover-deep-petrol:hover,
.hover-deep-petrol:focus { color: #2F3B53; }
.hover-bg-deep-petrol:hover,
.hover-bg-deep-petrol:focus { background-color: #2F3B53; }
/* Generated from: tachyons-tldr.now.sh/#/tools */
.petrol { color: #445576; }
.bg-petrol { background-color: #445576; }
.b--petrol { border-color: #445576; }
.hover-petrol:hover,
.hover-petrol:focus { color: #445576; }
.hover-bg-petrol:hover,
.hover-bg-petrol:focus { background-color: #445576; }
.thick-underline {
border-bottom: 2px solid transparent;
transition: .6s cubic-bezier(.088, .0, .62, 1) border-bottom;
}
.thick-underline:focus {
border-bottom: 2px solid white;/* rework this! */
}
.input-reset {
line-height: initial;
}
/*input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder*/
input::placeholder {
/* color: gray; default */
/*padding-left: 1rem;*/
}
/* Webkit BUG! */
input::-webkit-input-placeholder{ /*padding-left: 0;*/ }
/*input:focus::-webkit-input-placeholder,
input:focus:-moz-placeholder,
input:focus::-moz-placeholder,
input:focus:-ms-input-placeholder*/
input:focus::placeholder {
/* color: transparent; active */
}
/* invalid selectors, pseudo-elements & pseudo-classes: stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css*/
.select-reset{display:inline-block;width:100%;min-width:5.0rem;background-image:url(data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E);background-repeat:no-repeat;background-position:right center;/* background-position:calc(100% - 1rem) center; */cursor:pointer;outline:0;border:0;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
* Animated labels */
.select-reset {
/*border-bottom: 2px solid transparent;*/
}
input {
top:2rem; /* TODO: ALL ATOMIC */
/*border-bottom: 2px solid transparent;*/
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden; /* https://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform */
}
input:focus, select:focus {
/*outline: 0;*/
/* border-bottom: 2px solid black; */
/*transition: .6s cubic-bezier(.088, .0, .62, 1) border-bottom;*/
}
/* stackoverflow.com/questions/36926830/how-do-you-make-placeholder-and-label-transitions */
input ~ span /*, select ~ span*/ {
top:0.5rem;
opacity: 0;
transition: .6s cubic-bezier(.088, .0, .062, 1) opacity;/*(.88, .0, .62, 1) from: roblaplaca.com/examples/bezierBuilder */
transition: .6s cubic-bezier(.088, .0, .062, 1) top;/*(.88, .0, .62, 1) from: roblaplaca.com/examples/bezierBuilder */
}
input:focus ~ span /*, select:focus ~ span*/ {
top:0;
opacity: 1;
}
/*
Ineffectual:
-webkit-font-smoothing: antialiased;
-webkit-transform: translateZ(0) scale(1) translate3d(0,0,0);
-webkit-perspective:perspective(0) rotateY(0) rotateZ(0);
* {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
*/
/* Prompt: stackoverflow.com/questions/15726000/css-animation-similar-to-mac-os-x-10-8-invalid-password-shake
Look at again: codepen.io/anon/pen/YyRJVW
*/
/*
:required {
box-shadow: none;
outline: none;
animation: RETRY .5s linear;
-webkit-animation: RETRY .5s linear;
}
*/
.retry {
animation: RETRY .5s linear;
-webkit-animation: RETRY .5s linear;
}
/* keyframes */
@-webkit-keyframes RETRY {
8%, 41% { -webkit-transform: translateX(-10px); }
25%, 58% { -webkit-transform: translateX(10px); }
75% { -webkit-transform: translateX(-5px); }
92% { -webkit-transform: translateX(5px); }
0%, 100% { -webkit-transform: translateX(0); }
}
/* -moz-keyframes */
@-moz-keyframes RETRY {
8%, 41% { transform: translateX(-10px); }
25%, 58% { transform: translateX(10px); }
75% { transform: translateX(-5px); }
92% { transform: translateX(5px); }
0%, 100% { transform: translateX(0); }
}
html {
overflow-y: scroll;/* auto default */
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
/*-webkit-text-size-adjust: 100%;*/
}
/* Visual garbage: */
#vertical {
padding: 0;
margin: 0;
}
#vertical li.active { /*background-color: gainsboro;*/ }
#vertical li.active a { opacity:1!important; }
.restyle { box-shadow: 0 0 0 0 transparent!important; }
*,
*:focus,
*:focus:not(.focus-visible) {
box-shadow: 0 0 0 0 #808080; /* rgb(128,128,128) == #808080 */
}
*.focus-visible {
box-shadow: 0px 0px 0 1rem transparent;
transition: box-shadow 0.3s ease;
transition-delay: 0.125s; /* Debounce restyle */
/* mix-blend-mode: screen; css-tricks.com/almanac/properties/m/mix-blend-mode/ */
}
/* Atomise convention:
.text-shadow { text-shadow: 0px 1px 1px #333; }
/* Xpx Ypx BLURpx RGB */
.ds1-dark-gray {
filter: drop-shadow(0px 1px 1px #333);/*rgba(128,128,128,1.0))*/
}
@media screen and (min-width: 30em) {
.ds1-dark-gray-ns {
filter: drop-shadow(0px 1px 1px #333);/*rgba(128,128,128,1.0))*/
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ds1-dark-gray-m {
filter: drop-shadow(0px 1px 1px #333);/*rgba(128,128,128,1.0))*/
}
}
@media screen and (min-width: 60em) {
.ds1-dark-gray-l {
filter: drop-shadow(0px 1px 1px #333);/*rgba(128,128,128,1.0))*/
}
}
.ds2-dark-gray {
filter: drop-shadow(0px 2px 2px #333);/*rgba(128,128,128,1.0))*/
}
@media screen and (min-width: 30em) {
.ds2-dark-gray-ns {
filter: drop-shadow(0px 2px 2px #333);/*rgba(128,128,128,1.0))*/
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ds2-dark-gray-m {
filter: drop-shadow(0px 2px 2px #333);/*rgba(128,128,128,1.0))*/
}
}
@media screen and (min-width: 60em) {
.ds2-dark-gray-l {
filter: drop-shadow(0px 2px 2px #333);/*rgba(128,128,128,1.0))*/
}
}
.ts1-dark-gray {
text-shadow: 0rem 0.0625rem 0.0625rem #333;
}
@media screen and (min-width: 30em) {
.ts1-dark-gray-ns {
text-shadow: 0rem 0.0625rem 0.0625rem #333;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ts1-dark-gray-m {
text-shadow: 0rem 0.0625rem 0.0625rem #333;
}
}
@media screen and (min-width: 60em) {
.ts1-dark-gray-l {
text-shadow: 0rem 0.0625rem 0.0625rem #333;
}
}
/* Half scale determined: https://tachyons-tldr.now.sh/#/scales */
.ts2-dark-gray {
text-shadow: 0rem 0.125rem 0.125rem #333;
}
@media screen and (min-width: 30em) {
.ts2-dark-gray-ns {
text-shadow: 0rem 0.125rem 0.125rem #333;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.ts2-dark-gray-m {
text-shadow: 0rem 0.125rem 0.125rem #333;
}
}
@media screen and (min-width: 60em) {
.ts2-dark-gray-l {
text-shadow: 0rem 0.125rem 0.125rem #333;
}
}
.modal__overlay{
}
/*
.modal__container {
max-height:100vh;
overflow-y:scroll;
overflow-x:hidden;
box-sizing:border-box
}
.modal__header{
display:flex;
justify-content:space-between;
align-items:center
}
.modal__title{
margin-top:0;
margin-bottom:0;
font-weight:600;
font-size:1.25rem;
line-height:1.25;
color:#00449e;
box-sizing:border-box
}
.modal__close{
background:transparent;
border:0
}
.modal__header .modal__close:before{
content:"\2715"
}*/
@keyframes a{
0%{
opacity:0
}
to{
opacity:1
}
}
@keyframes b{
0%{
opacity:1
}
to{
opacity:0
}
}
@keyframes c{
0%{
transform:translateX(15%)
}
to{
transform:translateX(0)
}
}
@keyframes d{
0%{
transform:translateX(0)
}
to{
transform:translateX(-10%)
}
}
.micromodal-slide{
display:none
}
.micromodal-slide.is-open{
display:block
}
.micromodal-slide[aria-hidden=false] .modal__overlay_x{
animation:a .3s cubic-bezier(0,0,.2,1)
}
.micromodal-slide[aria-hidden=false] .modal__container{
animation:c .3s cubic-bezier(0,0,.2,1)
}
.micromodal-slide[aria-hidden=true] .modal__overlay_x{
animation:b .3s cubic-bezier(0,0,.2,1)
}
.micromodal-slide[aria-hidden=true] .modal__container{
animation:d .3s cubic-bezier(0,0,.2,1)
}
.micromodal-slide .modal__container,.micromodal-slide .modal__overlay_x{
will-change:transform
}
code{
color:#8a2be2;
padding:.2rem .4rem;
font-size:1.2rem;
background-color:#f7f7f9;
font-family:monospace
}
.header{
justify-content:space-between
}
.header,.logo{
display:flex;
align-items:center
}
.modal__x{
background-color:#fff;
height:100vh;
width:10rem;
overflow-y:auto;
box-sizing:border-box;
}
.modal__overlay_x {
top:0;
/*left:0;*/
right:0;
bottom:0;
display:flex;
/*background:rgba(0,0,0,.8);*/
justify-content: right;
align-items: right;
}
@keyframes in {
0%{ transform:perspective(1px) scale(0.8);opacity:0; }
to{ transform:perspective(1px) scale(1);opacity:1; }
}
@keyframes out {
0%{ transform:perspective(1px) scale(1);opacity:1; }
to{ transform:perspective(1px) scale(0.8);opacity:0; }
}
.micromodal-zoom {
display:none
}
.micromodal-zoom.is-open {
display:block
}
.micromodal-zoom[aria-hidden=false] .modal__overlay_x{
animation:a .3s cubic-bezier(0,0,.2,1)
}
.micromodal-zoom[aria-hidden=false] .modal__container{
animation:in .6s cubic-bezier(1, 0, 0.265, 1.2); /* zoom in */
}
.micromodal-zoom[aria-hidden=true] .modal__overlay_x{
animation:b .3s cubic-bezier(0,0,.2,1)
}
.micromodal-zoom[aria-hidden=true] .modal__container{
animation:out .2s cubic-bezier(0.68, 0, 0.265, 1); /* zoom out */
}
.micromodal-zoom .modal__container,.micromodal-zoom .modal__overlay_x{
will-change:scale;
will-change:opacity;
background-clip: padding-box;
}
dialog {
}
.h05 {
height: 0.5rem
}
@media screen and (min-width: 30em) {
.h05-ns {
height: 0.5rem
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.h05-m {
height: 0.5rem
}
}
@media screen and (min-width: 60em) {
.h05-l {
height: 0.5rem
}
}
.bg-semichevron {
/* Visual treatment (busta Italiana): mercatofilatelico.com/repubblica-italiana/aerogramma-per-gli-u-s-a-f-lli-di-toscana-1951 */
background: repeating-linear-gradient(
-45deg, white, white 2.5vw,
firebrick 2.5vw, firebrick 7vw,
white 7vw, white 9.5vw,
#446a1b 9.5vw, #446a1b 14vw );/* olivedrab navy 9.5vw, navy 14vw */
}
.translateZ-0 {
-webkit-transform: translateZ(0); /* stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container */
transform: translateZ(0);
}
.sticky {
/* dl, dt: https://css-tricks.com/position-sticky-2/ */
position: sticky;
position: -webkit-sticky;
}
@media screen and (min-width: 30em) {
.sticky-ns {
position: sticky;
position: -webkit-sticky;
}
}
@media screen and (min-width: 30em) and (max-width: 60em) {
.sticky-m {
position: sticky;
position: -webkit-sticky;
}
}
@media screen and (min-width: 60em) {
.sticky-l {
position: sticky;
position: -webkit-sticky;
}
}
.tint {
/*
rather than add Flickity cell,
.cover .bg-center
*/
background-image:linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0,
rgba(0, 0, 0, 0.6) 60%),
url(https://inspiredlabs.co.uk/j/images/lion-1024-512.jpg);
}/*
<!-- Focus trap dialog -->
<!--script src="https://inspiredlabs.co.uk/j/js/micromodal.min.js"></script-->
<!-- Pointer and keyboard improvements -->
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.js?features=Element.prototype.classList" type="text/javascript"></script> -->
<!-- <script src="https://unpkg.com/focus-visible" type="text/javascript"></script> -->
*/
// Please add `modal` to Body !section
// Programmatically show #subscribe-modal
document.querySelector('.trigger-subscribe-white').addEventListener('click', function () {
MicroModal.show('subscribe-white', {
//debugMode: true,
disableScroll: true,
onShow: function (modal) { document.querySelector('.modal').classList.add(modal.id) },
onClose: function (modal) { document.querySelector('.modal').classList.remove(modal.id) },
closeTrigger: 'data-micromodal-close',
awaitCloseAnimation: true
});
//MicroModal.close('subscribe-modal');
});
document.querySelector('.modal-close').addEventListener('click', function (event) {
event.preventDefault();
MicroModal.close('subscribe-white');
});
// Prevent accidental drags
function ondragstartReturnFalse() {
var href = document.getElementsByTagName('a');
for(var i = 0; i < href.length; i++) {
href[i].ondragstart = function () {
return false;
}//href[i].ondragstart
}//for
}//ondragstartReturnFalse()
// call on load
window.onload = function() {
ondragstartReturnFalse();
}