/* ==========================================================
   C.A.O.S. SOFTAIR
   GARA
   PARTE 1
==========================================================*/

/* HERO */

.gara-description{

    display:block;

    margin-top:25px;

    font-size:1.3rem;

    color:#cfcfcf;

    letter-spacing:2px;

}

/* ==========================================================
   COUNTDOWN
==========================================================*/

.countdown-container{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    flex-wrap:wrap;

    margin-top:40px;

}

.count-box{

    width:140px;

    height:140px;

    background:#111;

    border:2px solid #4c7d39;

    border-radius:12px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    transition:.3s;

    box-shadow:0 0 25px rgba(0,0,0,.6);

}

.count-box:hover{

    transform:translateY(-8px);

    border-color:#6ab04c;

    box-shadow:0 0 25px rgba(106,176,76,.4);

}

.count-box span{

    font-size:3rem;

    font-weight:bold;

    color:#fff;

}

.count-box small{

    margin-top:10px;

    color:#9e9e9e;

    letter-spacing:2px;

}

/* ==========================================================
   PODIO
==========================================================*/

.podium{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:30px;

    flex-wrap:wrap;

    margin-top:60px;

}

.podium-card{

    width:240px;

    background:#111;

    border:2px solid #333;

    border-radius:12px;

    text-align:center;

    transition:.4s;

    overflow:hidden;

    box-shadow:0 0 25px rgba(0,0,0,.6);

}

.podium-card:hover{

    transform:translateY(-10px);

    border-color:#6ab04c;

}

.podium-card.first{

    min-height:360px;

    border-color:#d4af37;

}

.podium-card.second{

    min-height:300px;

}

.podium-card.third{

    min-height:260px;

}

.medal{

    font-size:4rem;

    margin-top:25px;

}

.podium-name{

    margin-top:25px;

    font-size:2rem;

    font-family:'Black Ops One',cursive;

    letter-spacing:2px;

}

.podium-score{

    margin-top:20px;

    margin-bottom:30px;

    font-size:2.3rem;

    color:#6ab04c;

    font-weight:bold;

}

/* ==========================================================
   CLASSIFICA
==========================================================*/

.leaderboard{

    width:100%;

    max-width:1100px;

    margin:60px auto 0;

}

/* ==========================================================
   INTESTAZIONE CLASSIFICA
========================================================== */

.ranking-header{

    display:grid;

    grid-template-columns:
    80px
    180px
    1fr
    120px
    140px;

    align-items:center;

    gap:20px;

    padding:12px 20px;

    margin-bottom:15px;

    background:#6ab04c;

    color:#000;

    border-radius:10px;

    font-family:"Black Ops One",sans-serif;

    text-transform:uppercase;

    letter-spacing:1px;

}

.ranking-head{

    text-align:center;

    font-size:.9rem;

    font-weight:bold;

}

.ranking-title{

    text-align:center;

    font-family:"Black Ops One", sans-serif;

    font-size:0.95rem;

}

.ranking-header .ranking-row:hover{

    transform:none;

    box-shadow:none;

}

.ranking-row{

    display:grid;

    grid-template-columns:
    80px
    180px
    1fr
    180px
    100px;

    align-items:center;

    gap:20px;

    padding:20px;

    margin-bottom:12px;

    background:#111;

    border-left:5px solid #6ab04c;

    border-radius:10px;

    transition:.25s;

}

.ranking-row:hover{

    transform:translateX(10px);

    background:#171717;

}

.ranking-position{

    text-align:center;

    font-size:2rem;

}

.ranking-operator{

    font-weight:bold;

    letter-spacing:2px;
	
	font-size:1.6 rem;

    color:#fff;

}

.ranking-name{

    color:#cfcfcf;
    font-size:1.8rem;
}

.ranking-time{

  text-align:right;

   font-size:1.2rem;

    font-weight:bold;

    color:#6ab04c;

	font-family:monospace;
}

.ranking-score{

    text-align:center;

    font-size:1.8rem;

    color:#6ab04c;

    font-weight:bold;

}

/* ==========================================================
   ULTIMO AGGIORNAMENTO CLASSIFICA
========================================================== */

.ranking-last-update{

    text-align:right;

    margin-top:-5px;

    margin-bottom:15px;

    padding-right:20px;

    color:#8e8e8e;

    font-family:'Oswald',sans-serif;

    font-size:.9rem;

    letter-spacing:1px;

}

/* ==========================================================
   HALL OF FAME
==========================================================*/

.hall-of-fame{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

    margin-top:50px;

}

.hall-card{

    background:#111;

    border:2px solid #333;

    border-radius:12px;

    padding:30px;

    text-align:center;

    transition:.3s;

    box-shadow:0 0 25px rgba(0,0,0,.5);

}

.hall-card:hover{

    transform:translateY(-8px);

    border-color:#d4af37;

}

.hall-medal{

    font-size:3rem;

    margin-bottom:15px;

}

.hall-score{

    font-size:2.8rem;

    color:#6ab04c;

    font-weight:bold;

}

.hall-operator{

    margin-top:15px;

    font-size:1.5rem;

    font-family:'Black Ops One',cursive;

}

.hall-event{

    margin-top:15px;

    color:#bdbdbd;

}

.hall-date{

    margin-top:10px;

    color:#8e8e8e;

    font-size:.9rem;

}

/* ==========================================================
   PREMI
==========================================================*/

.prizes-grid{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:30px;

    flex-wrap:nowrap;

    margin-top:50px;

}

.prize-card{

    flex:1;

    max-width:360px;

    background:#111;

    border:2px solid #333;

    border-radius:12px;

    overflow:hidden;

    text-align:center;

    transition:.35s;

    box-shadow:0 0 20px rgba(0,0,0,.45);

}

.prize-card:hover{

    transform:translateY(-8px);

    border-color:#6ab04c;

}

.prize-image{

    width:100%;

    height:250px;

    object-fit:cover;

}

.prize-card h3{

    margin:20px 0;

    font-size:1.6rem;

}

.prize-card p{

    padding:0 25px 25px;

    color:#cfcfcf;

    line-height:1.6;

}

/* ==========================================================
   DOWNLOAD PDF
==========================================================*/

.download-card{

    width:420px;

    max-width:95%;

    margin:auto;

    background:#111;

    border:2px solid #444;

    border-radius:12px;

    text-align:center;

    padding:40px;

}

.download-icon{

   width:200px;

  	height:90px;
 
    margin-bottom:20px;

}

.download-card h3{

    margin-bottom:20px;

}

.download-card p{

    margin-bottom:30px;

}

/* ==========================================================
   GALLERY GARA
==========================================================*/

#garaGallery{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-top:50px;

}

#garaGallery img{

    width:100%;

    height:220px;

    object-fit:cover;

    border-radius:10px;

    cursor:pointer;

    transition:.35s;

}

#garaGallery img:hover{

    transform:scale(1.05);

    box-shadow:0 0 25px rgba(106,176,76,.4);

}

/* ==========================================================
   LIGHTBOX
==========================================================*/

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.92);

    display:none;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.lightbox.active{

    display:flex;

}

.lightbox img{

    max-width:90%;

    max-height:90%;

}

.lightbox-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:70px;

    height:70px;

    border:none;

    background:rgba(0,0,0,.35);

    color:#fff;

    font-size:2rem;

    cursor:pointer;

}

.lightbox-arrow.left{

    left:40px;

}

.lightbox-arrow.right{

    right:40px;

}

#closeLightbox{

    position:absolute;

    top:35px;

    right:45px;

    font-size:3rem;

    color:white;

    cursor:pointer;

}

/* ==========================================================
   RESPONSIVE
==========================================================*/

@media(max-width:900px){

    .ranking-row{

        grid-template-columns:
        55px
        1fr;

        gap:10px;

    }

    .ranking-score{

        text-align:left;

    }

    .podium{

        flex-direction:column;

        align-items:center;

    }

    .podium-card{

        width:95%;

        min-height:auto !important;

    }
	
	.prizes-grid{

		flex-wrap:wrap;

	}

    .count-box{

        width:110px;

        height:110px;

    }

    .count-box span{

        font-size:2.2rem;

    }

}

@media(max-width:600px){

    .countdown-container{

        gap:12px;

    }

    .count-box{

        width:80px;

        height:80px;

    }

    .count-box span{

        font-size:1.6rem;

    }

    .count-box small{

        font-size:.7rem;

    }

    .lightbox-arrow{

        width:50px;

        height:50px;

        font-size:1.3rem;

    }

    .lightbox-arrow.left{

        left:10px;

    }
	
	.prize-card{

		max-width:100%;

	}
	

    .lightbox-arrow.right{

        right:10px;

    }

    #closeLightbox{

        top:15px;

        right:20px;

        font-size:2rem;

    }

}

/* ==========================================================
   PODIO NASCOSTO FINO ALLA FINE DELLA COMPETIZIONE
========================================================== */

.podium-hidden{

    display:none;

}

/* ==========================================================
   TOP 10 CLASSIFICA
========================================================== */

.ranking-row.top-ten{

    border-left-color:#d4af37;

    box-shadow:
        0 0 12px rgba(212,175,55,.15);

}