* {
    box-sizing: border-box;
    font-family: 'Barlow', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    background-color: #eee;
}

.container-fluid {
    max-width: 1140px;
    padding: 0;
}

.wrapper {
    float: left;
    width: 100%;
    position: relative;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
}

.wrapper_alto {
    min-height: 100vh;
}

.page_data {
    float: left;
    width: 100%;
}

.tasto {
    display: inline-block;
    background-color: #092550;
    color: #FFF;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 14px;
    transition: background 200ms linear;
}

.tasto:active {
    background-color: #3a5173;
}

.sfumatura_home {
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 0;
    height: 40vh;
    z-index: 0;
    float: left;
    opacity: 0.5;
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); 
}

/* ------------------------------------------------------------------- TOP ---------------------------------------------------------------------- */
.top {
    float: left;
    width: 100%;
    text-align: center;
    background-color: #092550;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.top img {
    display: inline-block;
    height: 50px;
}

.top_descrizione {
    float: left;
    width: 100%;
    text-align: center;
    background-color: #092550;
    color: #FFF;
    font-size: 13px;
    line-height: 18px;
    padding: 10px 20px 10px 20px;
    margin-top: -1px;
}

/* -------------------------------------------------------------- FOOTER ------------------------------------------------------------ */
footer {
    float: left;
    width: 100%;
    background-color: #092550;
    color: #FFF;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

footer a {
    color: #FFF;
    text-decoration: none;
    transition: color 200ms linear;
}

footer a:hover,
footer a:active {
    color: #35aed5;
}

.footer_fisso {
    position: absolute;
    bottom: 0;
    left: 0;
}

/* ------------------------------------------------------------------- CONTENUTO HOME ---------------------------------------------------------------------- */
.contenuto_home {
    float: left;
    width: 100%;
    position: relative;
    z-index: 1;
}

.titolo_risultati {
    float: left;
    width: 100%;
    text-align: center;
    color: #092550;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    margin-top: 10px;
}

.titolo_risultati strong {
    font-weight: 700;
    font-size: 24px;
}

/* ----------------------------- grafico passeggiata ----------------------------- */
.area_grafico_passeggiata {
    float: left;
    width: 100%;
    margin-top: 20px;
    position: relative;
    z-index: 1;
    text-align: center;
}

.area_grafico_passeggiata .contenitore_grafico_passeggiata {
    width: 260px;
    height: 260px;
    background: linear-gradient(180deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 85%);
    border-radius: 100%;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #999;
    font-size: 40px;
    box-shadow: 0 -5px 10px rgba(204,204,204,0.2);
}

.area_grafico_passeggiata .grafico_passeggiata {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 240px;
}

.area_grafico_passeggiata .base_grafico {
    fill: transparent;
    stroke: #ebebec;
    stroke-width: 20;
    stroke-dasharray: 640;
    stroke-linecap:round;
}

.area_grafico_passeggiata .grafico {
    stroke-dasharray: 640;
    fill:none;
    stroke:url(#gradiente_grafico);
    stroke-width:20;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-miterlimit:10;
    animation: grafico_passeggiata 3s ease-out both;
}
            
/*
@keyframes grafico_passeggiata {
    from {stroke-dashoffset: 640;}
    to {stroke-dashoffset: 0;}
}
*/

.area_grafico_passeggiata .grafico_info {
    display: inline-block;
    padding-top: 10px;
    color: #092550;
}
            
.area_grafico_passeggiata .animazione_cane {  
    width: 160px;
    height: 160px;
    margin-top:0;
    display: inline-block;
    position: relative;
    z-index: 10;
    background-image: url(/img/animazione_cane_dog_walking.png);
    background-size: 1920px, 160px;
    background-position: left;
    background-repeat: no-repeat;
    animation-duration: 500ms;
    animation-timing-function: steps(11);
    animation-name: corri_cane_corri;
    animation-iteration-count: infinite;
}

@keyframes corri_cane_corri {
  from {
    background-position: left;
  }
  to { 
    background-position: right;
  }
}


.area_grafico_passeggiata .grafico_percentuale {
    float: left;
    width: 100%;
    text-align: center;
    font-size: 30px;
    line-height: 30px;
    padding-bottom: 4px;
    margin-bottom: 4px;
    font-weight: 700;
    margin-top: -15px;
}
            
.area_grafico_passeggiata .grafico_percentuale span {
    font-weight: 400;
}

/* ------------------------------------------------------------------------ DATI PASSEGGIATA --------------------------------------------------------- */
.dati_colonna {
    float: left;
    width: 100%;
    margin-top: 30px;
    position: relative;
    z-index: 1;
}

.colonna_blocco {
    float: left;
    width: 33%;
    text-align: center;
}

.blocco_avanzamento {
    margin-top: -40px;
}

.colonna_blocco_titolo {
    float: left;
    width: 100%;
    text-align: center;
    color: #092550;
    font-size: 16px;
    line-height: 16px;
    font-weight: 700;
}

.blocco_velocita_media {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background-color: #092550;
    color: #FFF;
    display: inline-block;
    margin-top: 10px;
    padding-top: 18px;
    font-size: 20px;
    font-weight: 700;
    line-height: 16px;
}
    
.blocco_velocita_media span {
    font-size: 14px;
    font-weight: 400;
}

.blocco_tempo_impiegato {
    width: 70px;
    height: 70px;
    border-radius: 100%;
    background-color: #092550;
    color: #FFF;
    display: inline-block;
    margin-top: 10px;
    padding-top: 25px;
    font-size: 18px;
    font-weight: 700;
    line-height: 16px;
}

/* --- grafico dog walking --- */ 
.dogwalking_grafico {
    width: 80px;
    height: 80px;
    border-radius: 100%;
    background-color: #FFF;
    border:5px solid #dddddd;
    color: #092550;
    font-size: 20px;
    line-height: 20px;
    font-weight: 600;
    display: inline-block;
    margin-top: 10px;
    position: relative;
}

.dogwalking_grafico_percentuale {
    display: block;
    width: 100%;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    margin-top: 15px;
}

.dogwalking_grafico_percentuale span {
    font-weight: 500;
}

.dogwalking_grafico_distanza {
    display: block;
    width: 100%;
    font-size: 14px;
    text-align: center;
    font-size: 400;
}

.dogwalking_grafico_distanza i{
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
}

.valore_grafico {
    position: absolute;
    top: -9px;
    left: -9px;
    width: 88px;
    height: 88px;
    z-index: 2;
    stroke-dasharray: 150;
    fill:none;
    stroke:#092550;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
    transform: rotate(90deg);
    animation: grafico_progressi 3s ease-out both;
}

/* -------------------------------------------------------- MAPPA ------------------------------------------- */
.contenitore_mappa {
    float: left;
    width: 100%;
    text-align: center;
    margin-bottom: 30px;
}

.mappa {
    display: inline-block;
    margin-top: 0px;
    width: 260px;
    height: 260px;
    border:2px solid #092550;
    border-radius: 100%;
    overflow: hidden;
}

.mappa iframe {
    float: left;
    width: 110%;
    height: 110%;
    margin: -5% 0 0 -5%;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------- VIDEO TUTORIAL --------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.elenco_video_tutorial {
    float: left;
    width: 100%;
}

.singolo_video {
    float: left;
    width: 100%;
    position: relative;
    padding: 10px 15px 10px 70px;
    border-bottom: 1px solid #eee;
    transition: opacity 200ms linear;
    background-color: #FFF;
    min-height: 80px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.singolo_video:hover,
.singolo_video:active {
    opacity: 0.7;
}

.singolo_video svg {
    position: absolute;
    width: 40px;
    fill:#092550;
    left: 15px;
    top: 50%;
    margin-top: -20px;
    stroke:#092550;
}

.singolo_video_titolo {
    float: left;
    width: 100%;
    font-weight: 500;
    font-size: 18px;
    line-height: 20px;
}

/* --------------- popup video ------------ */
.popup_video {
    position: fixed;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    float: left;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.bg_pop_video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    float: left;
    z-index: 0;
    background: rgba(9,37,80,0.7);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);  
}

.video_play {
    display: inline-block;
    position: relative;
    z-index: 5;
}

.video_play video {
    max-width: 90vw;
    max-height: 90vh;
    border:5px solid #FFF;
    display: inline-block;
}

.close_video {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #FFF;
    top: -13px;
    right: 0;
    margin-right: -13px;
    cursor: pointer;
    transition: background 200ms linear;
}

.close_video svg {
    stroke:#092550;
    transition:all 200ms linear;
}

.close_video:active {
    background: #35aed5;
}

.close_video:active svg {
    stroke:#FFF;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------- INFO CONCORSO ---------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.contenitore_contenuti {
    display: block;
    width: 100%;
    padding: 16px;
    margin-top: 70px;
}

.titolo_pagina {
    font-weight: 600; 
    font-size: 20px; 
    line-height: 24px; 
    color: #092550; 
    display: block; 
    width: 100%; 
    margin-bottom: 10px;}

.descrizione {
    font-size: 16px; 
    line-height: 22px; 
    color: #555; 
    display: block; 
    width: 100%; 
    margin-bottom: 20px;
}
    
.descrizione strong {
    font-weight: 600;
    color: #092550;
}

.descrizione_small {
    font-size: 12px;
    line-height: 16px;
}

.separatore {
    display: block;
    width: 100%;
    margin: 10px 0;
    border-top: 1px solid #eee;
}

.premio {
    display: block;
    width: 100%;
    margin-bottom: 20px;
}
    
.premio .titolo_premio {
    display: block;
    width: 100%;
    position: relative;
    padding: 14px 14px 14px 50px;
    background-color: #092550;
    color: #FFF;
    font-size: 16px;
    text-align: right;
    margin-bottom: 10px;
}
        
.premio .titolo_premio .numero_premio {
    font-weight: 700;
    font-size: 24px;
    line-height: 24px;
    position: absolute;
    top: 50%;
    left: 15px;
    margin: -12px 0 0 0;
}
    
 .premio .descrizione_premio {
    display: block;
    width: 100%;
    text-align: right;
    font-size: 13px;
    color: #777;
}
        
.premio .descrizione_premio strong {
    color: #555;
    font-size: 14px;
    font-weight: 700;
}

.premio img {
    width: 100%;
    max-width: 640px;
}

.contenitore_tabella {
    display: block;
    width: 100%;
    overflow-x: auto;
    margin-bottom: 15px;
}
    
.contenitore_tabella table {
    font-size: 14px; 
    color: #777;
    width: 100%;
}
        
.contenitore_tabella tr {
    border-top: 1px solid #eee; 
    border-left: 1px solid #eee;
}
            
.contenitore_tabella td {
    padding: 8px; 
    border-right: 1px solid #eee; 
    border-bottom: 1px solid #eee;
    text-align: center;
}
        
.contenitore_tabella td strong {
    color:  #092550;
    font-weight: 600;
}
            
.contenitore_tabella .titolo_cella,
.contenitore_tabella .cella_data {
    font-size: 13px;
}

.contenitore_contenuti .tasto_default {
    display: inline-block;
    background-color: #092550;
    color: #FFF;
    padding: 8px 20px;
    border-radius: 4px;
    text-decoration: none;
}

.contenitore_contenuti .tasto_default:active {
    opacity: 0.5;
}

/* -------------------------------------------------------------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------- PRIVACY ------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
.titolo_privacy {
    float: left;
    width: 100%;
    padding: 20px 20px 0 20px;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.testo_privacy {
    font-size: 13px;
    line-height: 17px;
    color: #333;
    padding: 20px;
    float: left;
    width: 100%;
    margin-bottom: 30px;
}

.privacy_titolo_capitolo {
    color: #111;
    font-size: 16px;
    font-weight: 700;
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.privacy_titolo_capitolo_secondario {
    color: #555;
    font-size: 14px;
    font-weight: 700;
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

.privacy_descrizione {
    color: #777;
    font-size: 13px;
    float: left;
    width: 100%;
    margin-bottom: 5px;
}

.privacy_descrizione strong {
    color: #333;
    font-weight: 600;
}

.separatore_privacy {
    float: left;
    width: 100%;
    margin: 20px 0;
    border-top:1px solid #ccc;
}

.separatore_privacy_dot {
    float: left;
    width: 100%;
    margin: 20px 0;
    border-top:1px dotted #ddd;
}