@charset "UTF-8";
/* ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ */
/* ~~~~~~~~~~~~~~~~~~~~ Reset ~~~~~~~~~~~~~~~~~~~~ */
/* ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ */
html,
a, abbr, address, article, aside, audio,
body, blockquote, button,
canvas, cite, code,
dd, del, details, dfn, div, dl, dt,
embed,
fieldset, figure, figcaption, footer, form,
h1, h2, h3, h4, h5, h6, header,
hr,
iframe, img, input, ins, kbd,
label, legend, li,
mark,
nav,
object, ol, output,
p, pre,
q,
samp, section, select, small, span, strong, sub, sup,
textarea, time,
ul,
var,
video {
 background-repeat: no-repeat;
 background-color: transparent;
 font-weight: normal;
 font-style: normal;
 padding: 0;
 margin: 0;
 border: 0;
 vertical-align: top;
 overscroll-behavior: none;
}
html,
body {
 height: 100%;
 max-height: 100%;
}
hr {
 overflow: visible;
}
/* ••••••••••••••••••••••••••••••• */
/* ·········· Struttura ·········· */
/* ••••••••••••••••••••••••••••••• */
body {
 background: var(--bg-terso);
 color: var(--bg-fosco-6);
 font-family: 'Sansation Regular', sans-serif;
 font-size: var(--font-body);
 line-height: var(--lh-body);
 text-align: center;
 text-size-adjust: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
 -webkit-text-size-adjust: none;
}
/* •••••••••••••••••••••••••••••••• */
/* ·········· Box-sizing ·········· */
/* •••••••••••••••••••••••••••••••• */
html {
 box-sizing: border-box;
}
/* ••••••••••••••••••••••••••••••• */
/* ·········· Selezioni ·········· */
/* ••••••••••••••••••••••••••••••• */
::selection {
 background: var(--rosso);
 color: var(--crema);
}
/* ••••••••••••••••••••••••••••• */
/* ·········· Effetti ·········· */
/* ••••••••••••••••••••••••••••• */
animazione-all {
 transition: all .4s linear;
}
.animazione-background {
 transition: background-color .4s ease-in-out;
}
animazione-txtcolor {
 transition: color .4s ease-in-out;
}
.rota-90 {
 right: 50%;
 top: calc(100% - var(--rota));
 transform: scale(-1) translate(-50%, 50%);
 writing-mode: vertical-lr;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}
.querere:hover::after, .logo:hover::after, .sonito:hover::after, .celio:hover::after {
	animation-name: rotate; 
	animation-duration: 1s; 
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	animation-play-state: running;
}
/* •••••••••••••••••••••••••••••••••• */
/* ·········· Form - input ·········· */
/* •••••••••••••••••••••••••••••••••• */
input-placeholder {
 color: var(--lavanda);
}
input, textarea, select {
 appearance: none;
 border-radius: 0;
 box-shadow:none;
}
input {}
select {}
label {}
/* •••••••••••••••••••••••••• */
/* ·········· Link ·········· */
/* •••••••••••••••••••••••••• */
a {
 text-decoration: none;
}
a:focus {
 outline: none;
}
a img {
 border: 0;
}
.tel a[href=tel] {
 color: var(--nero);
 text-decoration: none;
}
/* ••••••••••••••••••••••••••••••••• */
/* ·········· Navigazione ·········· */
/* ••••••••••••••••••••••••••••••••• */
ol, ul {
	list-style: none;
}
.crappa li a {
	display: block;
	font-size: 0;
	height: 100%;
	text-indent: -1000px;
	width: 100%;
}
/* •••••••••••••••••••••••••••• */
/* ·········· Header ·········· */
/* •••••••••••••••••••••••••••• */
.crappa {
	background: var(--bg-terso);
 display: grid;
	grid-template: repeat(2, var(--vw-4)) / repeat(2, var(--vw-4)) 1fr 28vw 1fr repeat(2, var(--vw-4));
	position: fixed;
 width: 100%;
}
.crappa::before {
	border-radius: 2vw 2vw 0 0;
	box-shadow: inset 100vw var(--vw-4) 0 var(--fosco-06);
}
.crappa::after {
	border-radius: var(--vw-4);
	box-shadow: inset 100vw var(--vw-4) 0 var(--fosco-02);
}
.crappa::before, .crappa::after {
	background: var(--bg-domo);
	height: var(--vw-4);
	top: var(--vw-4);
	width: 100%;
}
.manca {
 grid-area: 1 / 1 / 3 / 3;
}
.dritta {
 grid-area: 1 / -3 / 3 / -1;
}
.manca::before {
	border-radius: 0 var(--vw-4) var(--vw-4) 0;
}
.dritta::before {
	border-radius: var(--vw-4) 0 0 var(--vw-4);	
}
.manca::before, .dritta::before {
	background: var(--bg-fosco);
	bottom: calc(var(--vw-4) * -1);
	box-shadow: inset 8vw var(--vw-4) 0 0 var(--fosco-12);
	height: var(--vw-4);
	width: 8vw;
}
.manca::after {
	box-shadow: inset 8vw var(--vw-4) 0 0 var(--fosco-06);
	right: 0;
}
.dritta::after {
	box-shadow: inset var(--vw-4) 8vw 0 0 var(--fosco-06);
}
.manca::after, .dritta::after {
	background: var(--bg-fosco);
	border-radius: 0 0 var(--vw-4) var(--vw-4);
	height: 12vw;
	width: var(--vw-4);
}
.querere {
	left: 1vw;
}
.sonito {
	right: 1vw;
}
.querere, .sonito {
	background: var(--bg-terso);
	height: 2vw;
	right: 1vw;
	top: 5vw;
	width: 2vw;
}
.querere::before {
	margin: auto auto auto 7.75vw;
}
.sonito::before {
	margin: auto 7.75vw auto auto;
}
.querere::before, .sonito::before {
	background: var(--fosco-06);
	border-radius: 1.25vw;
	height: 1.25vw;
	inset: 0;
	width: 2.5vw;
}
.querere::after {
	border-radius: .25vw;
	height: .25vw;
	transform: rotate(-45deg);
	width: 1.25vw;
}
.sonito::after {
	height: 1vw;
	aspect-ratio: cos(30deg);
	clip-path: polygon(-50% 50%,50% 100%,150% 50%,50% 0);
}
.querere::after, .sonito::after {
	animation-play-state: paused;
	background: var(--bg-domo);
	inset: 0;
	margin: auto;
}
.querere a {
	display: block;
	height: 100%;
	width: 100%;
}
.querere a::before {
	margin: auto auto auto 12.375vw;
}
.sonito a::before {
	margin: auto 12.375vw auto auto;
}
.querere a::before, .sonito a::before {
	background: var(--fosco-04);
	height: 1.25vw;
	inset: 0;
	width: 1.25vw;
}
.querere a::after {
	margin: -4.375vw auto auto 4.375vw;
}
.sonito a::after {
	margin: -4.375vw 4.375vw auto auto;
}
.querere a::after, .sonito a::after {
	background: var(--bg-terso);
	border-radius: 1.25vw;
	height: 2.5vw;
	inset: 0;
	width: 1.25vw;
}
.logo {
	background: var(--bg-terso);
	left: 5vw;
}
.celio {
	right: 5vw;
}
.logo, .celio {
	height: 2vw;
	top: 9vw;
	width: 2vw;
}
.logo::before {
	margin: auto auto auto -3.625vw;
}
.celio::before {
	margin: auto -3.625vw auto auto;
}
.logo::before, .celio::before {
	background: var(--bg-domo);
	height: 1.25vw;
	inset: 0;
	width: 1.25vw;
}
.logo::after {
	background: var(--bg-fosco);
	border-radius: .25vw;
	height: 1.25vw;
	width: .25vw;
}
.celio::after {
	background: url("../img/loghi/rondella.svg") center/100% 100% no-repeat;
}
.logo::after, .celio::after {
	animation-play-state: paused;
	inset: 0;
	margin: auto;
}
.logo a::before {
	box-shadow: var(--vw-4) 0 0 0 var(--terso-03);
}
.celio a::before {
	box-shadow: calc(var(--vw-4) * -1) 0 0 0 var(--terso-03);
}
.logo a::before, .celio a::before {
	background: var(--bg-fosco);
	height: var(--vw-4);
	inset: 0;
	margin: -5vw auto auto -1vw;
	width: var(--vw-4);
}
.logo a::after, .celio a::after {
	background: var(--bg-domo);
	height: 1.25vw;
	inset: 0;
	margin: -3.625vw auto auto auto;
	width: 1.25vw;
}
/* ••••••••••••••••••••••••••• */
/* ·········· Testi ·········· */
/* ••••••••••••••••••••••••••• */
strong, b {
 font-family: 'JsansSB';
 font-weight: bold;
}
em, i {
 font-family: 'JsansIT';
 font-style: italic;
}
p {
 padding: var(--p);
}
/* •••••••••••••••••••••••••••••••••• */
/* ·········· Intestazioni ·········· */
/* •••••••••••••••••••••••••••••••••• */
h1,
h2,
h3,
h4,
h5,
h6 {
 letter-spacing: var(--l-s);
}
/* •••••••••••••••••••••••••••••• */
/* ·········· Immagini ·········· */
/* •••••••••••••••••••••••••••••• */
img {
 max-width: 100%;
}
/* ••••••••••••••••••••••••••••••••••••••• */
/* ·········· Struttura interna ·········· */
/* ••••••••••••••••••••••••••••••••••••••• */

/* •••••••••••••••••••••••••••••••••••••••••• */
/* ·········· Struttura principale ·········· */
/* •••••••••••••••••••••••••••••••••••••••••• */

/* •••••••••••••••••••••••••••••••• */
/* ·········· Background ·········· */
/* •••••••••••••••••••••••••••••••• */

/* ••••••••••••••••••••••••••••• */
/* ·········· Display ·········· */
/* ••••••••••••••••••••••••••••• */
.rel, .crappa a {
 position: relative;
}
.ab {
 position: absolute;
}
.carica img {
 display: none;
}
.celio::before,
.sonito,
.sonito a::before,
.querere,
.querere a::before,
.logo,
.logo::before,
.logo a::after,
.celio a::after {
 border-radius: 100%;
}
.crappa::before,
.crappa::after,
.manca::before,
.manca::after,
.querere::before,
.querere::after,
.querere a::before,
.querere a::after,
.logo::before,
.logo::after,
.logo a::before,
.logo a::after,
.celio::before,
.celio::after,
.celio a::before,
.celio a::after,
.sonito::before,
.sonito::after,
.sonito a::before,
.sonito a::after,
.dritta::before,
.dritta::after {
 content: '';
	cursor: default;
	display: block;
	pointer-events: none;
	position: absolute;
}
/* ••••••••••••••••••••••••••••• */
/* ·········· z-index ·········· */
/* ••••••••••••••••••••••••••••• */
.manca, .dritta {
 z-index: 1;
}
.querere,
.logo,
.sonito,
.celio {
 z-index: 2;
}

/* •••••••••••••••••••••••••••• */
/* ·········· colori ·········· */
/* •••••••••••••••••••••••••••• */
:root {
	--vw-4: 4vw;
	--terso-03: rgba(255, 255, 255, .03);
	--fosco-02: rgba(0, 0, 0, .02);
	--fosco-03: rgba(0, 0, 0, .03);
	--fosco-04: rgba(0, 0, 0, .04);
	--fosco-06: rgba(0, 0, 0, .06);
	--fosco-12: rgba(0, 0, 0, .12);
	--bg-fosco: #474C52;
	--bg-fosco-3: #454A50;
	--bg-fosco-6: #43484D;
	--bg-fosco-12: #3F4348;
	--bg-terso: #FDF5E6;
	--bg-domo: #B6A2B1;
	--bg-domo-2: #B29FAE;
	--bg-domo-4: #AF9CAA;
	--bg-domo-6: #AB98A7;
	--bg-telari: #A0ABAF;
	--bg-minute: #9BAC99;
	--bg-info: #D49973;
	--bg-plus: #FA8072;
	--a-domo: #897985;
	--a-telari: #788083;
	--a-minute: #758073;
	--a-info: #9D7358;
	--a-plus: #C35A4E;
	--txt-domo: #72646E;
	--txt-telari: #63686B;
	--txt-minute: #60695F;
	--txt-info: #7B6150;
	--txt-plus: #9E4D43;
}
.domo {
	background-color: var(--bg-domo);
	color: var(--txt-domo);
}
.telari {
	background-color: var(--bg-telari);
	color: var(--txt-telari);
}
.minute {
	background-color: var(--bg-minute);
	color: var(--txt-minute);
}
.info {
	background-color: var(--bg-info);
	color: var(--txt-info);
}
.plus {
	background-color: var(--bg-plus);
	color: var(--txt-plus);
}
/* •••••••••••••••••••••••••••••••••••• */
/* ·········· Apple iPhone 5 ·········· */
/* •••••••••••••••••••••••••••••••••••• */
@media screen and (min-width: 10px)
              and (max-width: 360px) {}
/* ••••••••••••••••••••••••••••••••••••••••••••• */
/* ·········· Apple iPhone 6/7/8 Plus ·········· */
/* ••••••••••••••••••••••••••••••••••••••••••••• */
@media screen and (min-width: 361px)
              and (max-width: 539px) {}
/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
/* ·········· Motorola E / Samsung Galaxy / Sony Xperia M4 ·········· */
/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */
@media screen and (min-width: 540px)
              and (max-width: 767px) {}
/* ••••••••••••••••••••••••••••••••••••• */
/* ·········· Apple iPad mini ·········· */
/* ••••••••••••••••••••••••••••••••••••• */
@media screen and (min-width: 768px)
              and (max-width: 960px) {}
/* ••••••••••••••••••••••••••••••••••••••••••••••• */
/* ·········· Apple iPad mini Landscape ·········· */
/* ••••••••••••••••••••••••••••••••••••••••••••••• */
@media screen and (min-width: 961px)
              and (max-width: 1024px) {}
/* ••••••••••••••••••••••••••••••••• */
/* ·········· Laptop 1024 ·········· */
/* ••••••••••••••••••••••••••••••••• */
@media screen and (min-width: 1025px)
              and (max-width: 1280px) {}
/* ••••••••••••••••••••••••••••••••• */
/* ·········· Laptop 1366 ·········· */
/* ••••••••••••••••••••••••••••••••• */
@media screen and (min-width: 1281px)
              and (max-width: 1439px) {}
/* ••••••••••••••••••••••••••••• */
/* ·········· Desktop ·········· */
/* ••••••••••••••••••••••••••••• */
@media screen and (min-width: 1440px)
              and (max-width: 1600px) {}
@media screen and (min-width: 1601px)
              and (max-width: 1919px) {}
@media screen and (min-width: 1920px) {}
/* ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ */
/* ~~~~~~~~~~~~~~~~~~~~ Elementi in comune ~~~~~~~~~~~~~~~~~~~~ */
/* ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ */

/* ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ */
/* ~~~~~~~~~~~~~~~~~~~~ Fix assortiti ~~~~~~~~~~~~~~~~~~~~ */
/* ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ */
@media screen and (max-height: 50.75vw) {}
/* ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ */
/* ~~~~~~~~~~~~~~~~~~~~ Caricalesto ~~~~~~~~~~~~~~~~~~~~ */
/* ≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈≈ */
@font-face {
 font-family: 'Sansation Italic';
 src: url('fonts/sansation-italic.woff2') format('woff2'),
      url('fonts/sansation-italic.woff') format('woff'),
      url('fonts/sansation-italic.ttf') format('truetype'),
      url('fonts/sansation-italic.svg#font') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'Sansation Regular';
 src: url('fonts/sansation-regular.woff2') format('woff2'),
      url('fonts/sansation-regular.woff') format('woff'),
      url('fonts/sansation-regular.ttf') format('truetype'),
      url('fonts/sansation-regular.svg#font') format('svg');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'Ailerons';
 src: url('fonts/ailerons.woff2') format('woff2'),
      url('fonts/ailerons.woff') format('woff'),
      url('fonts/ailerons.ttf') format('truetype'),
      url('fonts/ailerons.svg#font') format('svg');
 font-weight: normal;
 font-style: normal;
}