/* ==========================================================================
   Sostituisce le sole classi di Material Design Bootstrap effettivamente usate
   da index.aspx e dai suoi include, per poter rimuovere mdb.min.css/mdb.min.js.
   I valori sono ripresi tali e quali da mdb.min.css, cosi' l'aspetto non cambia.
   Le animazioni in fondo provengono da animate.css (MIT), la libreria che MDB
   incorpora e da cui dipendono le classi wow/fadeIn*.
   ========================================================================== */

/* --- colori del testo --- */
.white-text  { color: #fff !important; }
.grey-text   { color: #9e9e9e !important; }
.blue-text   { color: #2196f3 !important; }
.orange-text { color: #ff9800 !important; }
.purple-text { color: #9c27b0 !important; }

/* --- colori di sfondo --- */
.primary-color     { background-color: #4285f4 !important; }
.rgba-grey-slight  { background-color: rgba(158, 158, 158, 0.1); }
.mdb-color         { background-color: #45526e !important; }
.mdb-color.lighten-3 { background-color: #929fba !important; }
.light-blue        { background-color: #03a9f4 !important; }
.light-blue.darken-3 { background-color: #0277bd !important; } /* = blu del brand TPC */

/* --- gradienti usati dalle card dei prezzi (valori esatti di mdb.min.css) --- */
.aqua-gradient   { background: linear-gradient(40deg, #2096ff, #05ffa3) !important; }
.peach-gradient  { background: linear-gradient(40deg, #ffd86f, #fc6262) !important; }
.purple-gradient { background: linear-gradient(40deg, #ff6ec4, #7873f5) !important; }

/* Le card dei prezzi hanno .white-text sul contenitore, ma il corpo resta su fondo
   bianco: il testo era bianco su bianco gia' con MDB, perche' le classi che avrebbero
   dovuto colorarlo (card-background, striped, *-striped) non sono definite in nessuna
   versione di MDB. Qui il corpo torna al colore di testo predefinito, mentre intestazione
   e pulsanti restano bianchi sopra il gradiente. */
.pricing-card .card-body { color: #212529; }
.pricing-card .card-body .btn { color: #fff; }

/* Intestazione del piano (BASE / PRO / AZIENDA). La classe .option esiste solo in MDB Pro
   e non era definita da nessuna parte: senza regola il titolo restava allineato a sinistra
   e attaccato ai bordi della fascia colorata. Qui e' centrato e distanziato. */
.pricing-card .option {
  margin: 0;
  padding: 1.1rem 1rem;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* --- footer --- */
.page-footer      { bottom: 0; color: #fff; }
.footer-copyright { overflow: hidden; color: rgba(255,255,255,0.6); background-color: rgba(0,0,0,0.2); }

/* Il collegamento nel piede segue il testo che gli sta intorno invece del blu dei
   link. Su quel fondo scuro il blu di Bootstrap non si legge, e la sottolineatura
   al passaggio del puntatore lo faceva risaltare piu' della riga stessa.
   La regola e' quella della barra in alto: chiaro, un po' piu' chiaro sotto il
   puntatore, mai sottolineato. */
.page-footer a,
.footer-copyright a         { color: #fff; text-decoration: none; }
.page-footer a:hover,
.page-footer a:focus,
.footer-copyright a:hover,
.footer-copyright a:focus   { color: #fff; text-decoration: none; opacity: .8; }

/* --- immagini responsive (classe Bootstrap 3 usata nella hero) --- */
.img-responsive { max-width: 100%; height: auto; }

/* --- utilita' tipografiche e di layout --- */
.hr-light      { border-top: 1px solid #fff; }
.h1-responsive { font-size: 150%; }
@media (max-width:  740px) { .h1-responsive { font-size: 150%; } }
@media (min-width:  576px) { .h1-responsive { font-size: 170%; } }
@media (min-width:  768px) { .h1-responsive { font-size: 200%; } }
@media (min-width:  992px) { .h1-responsive { font-size: 200%; } }
@media (min-width: 1200px) { .h1-responsive { font-size: 250%; } }
.w-responsive  { width: 75%; }
.flex-center   { display: flex; align-items: center; justify-content: center; height: 100%; }

/* --- pulsanti --- */
.btn-outline-white { color: #fff !important; background-color: transparent !important; border: 2px solid #fff !important; }
.btn-outline-white:hover, .btn-outline-white:focus, .btn-outline-white:active,
.btn-outline-white:active:focus, .btn-outline-white.active { color: #fff !important; background-color: transparent !important; border-color: #fff !important; }
.btn-rounded { border-radius: 10em; }

/* --- sezione "view" con immagine di sfondo e velatura --- */
.view { position: relative; overflow: hidden; cursor: default; }
.mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background-attachment: fixed; }

/* --- navbar che si compatta allo scroll (la classe viene aggiunta da index.aspx) --- */
.scrolling-navbar { padding-top: 12px; padding-bottom: 12px; transition: background .5s ease-in-out, padding .5s ease-in-out; }
.top-nav-collapse { padding-top: 5px; padding-bottom: 5px; }

/* --- freccia dell'accordion che ruota quando il pannello e' aperto --- */
.md-accordion .card .card-header a:not(.collapsed) .rotate-icon { transform: rotate(180deg); }
.rotate-icon { transition: transform .3s; }

/* --- animazioni d'ingresso (animate.css) usate da WOW.js --- */
.animated { animation-duration: 1s; animation-fill-mode: both; }
@keyframes fadeIn      { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInLeft  { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); }  to { opacity: 1; transform: none; } }
.fadeIn      { animation-name: fadeIn; }
.fadeInLeft  { animation-name: fadeInLeft; }
.fadeInRight { animation-name: fadeInRight; }