/*-- fonts --*/
@import url('https://fonts.googleapis.com/css2?family=Allerta&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');


:root {
--yellow:#FFD500;
--blue: #0C487D;
}



* {margin: 0; padding: 0; box-sizing: border-box;}
body {color:#666666; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; line-height: 1.5em; background: var(--yellow);}
.block { float: left; position: relative; width: 100%; height: auto; min-height: 100vh;}
.blueblock {background: radial-gradient(circle, rgba(16,108,190,1) 32%, rgba(13,85,148,1) 75%, rgba(18,87,147,1) 100%); border-bottom: solid 20px #F1C231;}
.yellowblock {background:#FFD500; border-bottom: solid 20px #194A7F;}


.firstblock:before {content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;  background:url(img/bandelle.png) no-repeat left bottom; background-size:100% auto; opacity: 0.5;}
.cover {position: absolute; top: 50%; left: 10%; transform: translateY(-50%); display: grid; grid-template: auto / 70% 30%; width: 75vw;}
.cover {font-family: 'Allerta', sans-serif; color: #fff; text-transform: uppercase; line-height: 5em;}

.cover .logo {grid-column: 2/3; grid-row: 1/4; background: url("img/logo_istituzionale.svg") center no-repeat; background-size: contain;}
.cover .title {display: flex; line-height: 1em; white-space:nowrap;}
.cover span {font-size: 3vw; color: transparent; background: url("img/scritta.svg") no-repeat left center; background-size: contain;}
.cover h1 {align-items: flex-end; font-size: 11vw; animation: primotitolo 2s ease-in;}
.cover h2 {align-items: flex-start; font-size: 4.2vw; animation: secondotitolo 2s ease-in;}

@keyframes primotitolo {
	0% { opacity: 0; }
	50% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes secondotitolo {
	0% { opacity: 0; }
	75% { opacity: 0; }
    100% { opacity: 1; }
}

/*----------------------- SECONDO BLOCCO -----------------*/
.secondblock:before {content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;  background:url(img/orologio.png) no-repeat left center; background-size:auto 100%; opacity: 0.3; z-index: 1;}

.secondblock {padding: 5%; display: grid; grid-template: auto auto / 1fr 1fr 1fr; grid-gap: 20px;}
.secondblock .colonna {padding:15px; background:rgba(255,255,255,0.5); font-size: 1.3em; border-radius: 10px; z-index: 2;}
.secondblock .colonna h1 {font-family: 'Lobster', cursive; color: var(--blue); font-size: 1.8em; line-height: 1.2em; margin-bottom: 10px;}
.secondblock .line {display: block; width:100%; height: 2px; background:linear-gradient(90deg, rgba(15,83,145,0) 0%, rgba(15,83,145,1) 20%, rgba(15,83,145,1) 80%, rgba(15,83,145,0) 100%); margin-bottom: 20px;}
.secondblock .colonna p {margin-bottom: 1.5em;}

.secondblock .storia, .secondblock .esperiacremona {grid-row: 1/3;}
.secondblock .esperiagiovani {grid-row: 1/2;}

/*--- tabella squadre ---*/
.tabellasquadre {display:grid; grid-template: auto / 50% 50%; z-index: 2; border: solid 15px rgba(255,255,255,0.5); border-radius: 10px;}

.tabellasquadre .squadreesp {display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; font-size: 1.2em; line-height: inherit;}
.squadreesp:nth-child(1) {font-size: 1.5em; font-weight: bold;}
.squadreesp:nth-child(1), .tabellasquadre span:nth-child(n+10) {grid-column: 1/3;}

.squadreesp:nth-child(1),
.squadreesp:nth-child(n+5):nth-child(-n+10) {color: var(--blue); background:var(--yellow);}

.squadreesp:nth-child(11),
.squadreesp:nth-child(n+2):nth-child(-n+4)  {color: var(--yellow); background:var(--blue);}

@media (max-width: 1000px) {
	.secondblock {grid-template: auto auto / 1fr 1fr;}
	.secondblock .storia, .secondblock .esperiacremona {grid-row: 1/2;}
	.secondblock .esperiagiovani, .tabellasquadre {grid-row: 2/3;}
}

@media (max-width: 850px) {
	.secondblock {grid-template: auto auto auto 500px / 100%; }
	.secondblock .storia, .secondblock .esperiacremona {grid-row: auto;}
	.secondblock .esperiagiovani, .tabellasquadre {grid-row: auto;}
}




/*------------------------- TERZO BLOCCO --------------------*/
.tirdlock {display:grid; grid-template: repeat(4, 1fr) / repeat(3, 1fr);}

.tirdlock .images {background-size:cover !important; background-position: center !important; background-repeat: no-repeat !important;}
.tirdlock .images:nth-child(1) {background: url(img/foto/01.jpg); grid-column: 1/2; grid-row: 1/3;}
.tirdlock .images:nth-child(2) {background: url(img/foto/02.jpg); grid-column: 2/3; grid-row: 1/2;}
.tirdlock .images:nth-child(3) {background: url(img/foto/03.jpg); grid-column: 3/4; grid-row: 1/3;}
.tirdlock .images:nth-child(4) {background: url(img/foto/04.jpg); grid-column: 1/2; grid-row: 3/5;}
.tirdlock .images:nth-child(5) {background: url(img/foto/05.jpg); grid-column: 2/3; grid-row: 4/5;}
.tirdlock .images:nth-child(6) {background: url(img/foto/06.jpg); grid-column: 3/4; grid-row: 3/5;}
.tirdlock .images:nth-child(7) {background: url(img/foto/07.jpg); grid-column: 2/3; grid-row: 2/4; border: solid 25px #106CBE; box-sizing: content-box;}



/*------------------------ QUARTO BLOCCO ---------------------*/
.fourthblock:before {content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;  background:url(img/skyline.png) no-repeat bottom center; background-size:100% auto; opacity: 1; z-index: 1;}
.fourthblock:after {content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%;  background:url(img/monte.png) no-repeat; background-position: bottom right;opacity: 1; z-index: 1;}
@media (max-width: 750px) {.fourthlock:after {background-position: bottom left;}}


.fourthblock {display: grid; grid-template: auto / 55% 35%; padding: 10% 0 0 10%; grid-gap: 20px;}
.fourthblock h1.slogan {display: inline; background:rgba(255,255,255,0.2); font-size: 2em; line-height: 1.3em; padding: 0 15px; text-transform: uppercase; color: #fff;}
.fourthblock h1.slogan em {font-style: normal; color: var(--yellow);}
.fourthblock p {margin-top: 40px; color: #fff;}
.fourthblock .gamer {background: url(img/gamer.png) no-repeat; background-position: center bottom; background-size: contain;}

@media (max-width: 750px) {
	.fourthblock {grid-template: auto 700px / 100%; padding: 10% 10% 0 10%;}
	.fourthblock .gamer {background-size: auto 90%;}
}


/*------------------ QUINTO BLOCCO ---------------------------*/
.fifthblock {display: grid; grid-template: auto / 40% 60%; border-bottom: solid 20px #194A7F !important;}

.fifthblock .title {display: block; color: #fff;  font-family: 'Lato', sans-serif; line-height: 2em; text-transform: uppercase; font-size: 2vw; padding: 10%; margin-top: 20vh;}
.fifthblock .title em {font-style: normal; color: var(--yellow);}

.fifthblock .testo {padding: 10% 10% 10% 20%; color: var(--blue); background: var(--yellow); mask-image: url("img/dxmask.svg"); -webkit-mask-image: url("img/dxmask.svg"); mask-size: cover; -webkit-mask-size: cover; mask-position:left top; -webkit-mask-position:left top;}
.fifthblock .testo p {margin-bottom: 25px; font-size: 1.2em;}

@media (max-width: 900px) {
	.fifthblock {grid-template: 35vw auto / 100%;}
	.fifthblock .title {margin-top: 0; font-size: 5vw;}
	.fifthblock .testo {padding: 20% 10% 10% 10%; mask-image: url("img/downmask.svg"); -webkit-mask-image: url("img/downmask.svg"); mask-size: cover; -webkit-mask-size: cover; mask-position:center top; -webkit-mask-position:center top;}
}




/*----------------- SESTO BLOCCO --------------------*/
.sixthblockcontainer:before {content:""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: var(--yellow); mask-image: url("img/dxreversemask.svg"); -webkit-mask-image: url("img/dxreversemask.svg"); mask-size: cover; -webkit-mask-size: cover; mask-position:right center; -webkit-mask-position:right center; z-index: 0;
 border-bottom: solid 20px #194A7F !important;}

.sixthblockcontainer {}
.sixthblock {background:url(img/tifo.png) no-repeat bottom;  background-size: 100% auto;}
.sixthblock .title {display: block; margin: 40px 0 0 5%; color: var(--blue); font-family: 'Lato', sans-serif; line-height: 2em; text-transform: uppercase; font-size: 4vw; border-bottom: solid 1px var(--blue);}
.sixthblock .title em {font-style: normal; color:#fff;}
.sixthblock .title:after {content:"ES"; color:transparent; display:inline-block; background:url(img/logo_istituzionale.svg) no-repeat center; background-size:contain;}



/*--------------- BLOCCO PREZZI ----------------*/
.bloccosponsor {float: left; clear: both; width: 70%; margin: 30px 5%;}
.bloccosponsor .titolosponsor {font-family:'Sacramento', cursive; font-size: 4em; margin: 30px 0; background: rgba(255,255,255,0.2); width:100%;}
.bloccosponsor .titolosponsor:before {content: "sp"; color:transparent; mask-image: url("img/arrow.svg"); -webkit-mask-image: url("img/arrow.svg"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; margin-right: 10px;}
.bloccosponsor .prezzosponsor {color: #333;}
.bloccosponsor ul {float: left; display: block; margin: 20px; line-height: 1.3em; color: var(--blue);}



/*-- colori sponsor ---*/
.silver {color:#808080;} .silver:before {background:linear-gradient(180deg, rgba(223,223,223,1) 0%, rgba(128,128,128,1) 100%);}
.gold {color:#333;} .gold:before {background:linear-gradient(180deg, rgba(219,172,45,1) 0%, rgba(179,140,38,1) 100%);}
.platinium {color:#666;} .platinium:before {background:linear-gradient(180deg, rgba(102,102,102,1) 0%, rgba(71,71,71,1) 100%);}
.comain {color:var(--blue);} .comain:before {background:linear-gradient(180deg, rgba(13,103,179,1) 0%, rgba(10,70,120,1) 100%);}
.main {color:#AF181A;} .main:before {background:linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(167,198,224,1) 100%);}

@media (max-width: 1000px) {
	.sixthblockcontainer:before {mask-image: none; -webkit-mask-image:none;}
	.bloccosponsor {float: left; clear: both; width: 90%; margin: 30px 5%;}
	.bloccosponsor .titolosponsor {font-size: 7vw;}
}

@media (max-width: 900px) {
	.sixthblock .title {font-size: 7vw;}
}

@media (max-width: 550px) {
	.bloccosponsor .titolosponsor {font-size: 9vw;}
}



/*---------------------- SETTIMO BLOCCO LOGHI SPONSOR -----------------*/
.seventhblock {display: grid; grid-template: 20vw 90vw / 100%; margin-bottom: 20px;}

.seventhblock .title {color: #fff;  font-family: 'Lato', sans-serif; line-height: 1em; text-transform: uppercase; font-size: 4vw; text-align: center; padding: 5% 10%; border-bottom: 0 !important;}
.seventhblock .title em {font-style: normal; color: var(--yellow);}

.loghisponsor {float: left; margin: 10%; display: grid; grid-template: auto / 1fr 1fr 1fr; grid-gap: 10%; box-sizing: border-box;}
.loghisponsor img {width: 100%;}

@media (max-width: 550px) {
	.loghisponsor {grid-gap: 5%;}
}



/*--------- PDF, INDIRIZZO & CONTATTI -----------*/
.pdf a:before {content: "DL"; color: transparent; background: red; mask-image: url("https://simpleicons.org/icons/adobeacrobatreader.svg"); -webkit-mask-image: url("https://simpleicons.org/icons/adobeacrobatreader.svg"); mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-position: center; -webkit-mask-position: center; margin-right: 8px;}
.pdf a {font-family: 'Lato', sans-serif; line-height: 1em; color: var(--blue); font-size: 1.5em; text-decoration: none;}
.pdf a:hover {text-decoration: underline;}

address {grid-column: 2/4; font-style: normal;}
address h2 {display: block; width: 100%; white-space: nowrap; color: transparent; font-size: 3em; background: url(https://www.usesperia.it/wp-content/uploads/2019/11/usesperia.png) no-repeat left center; background-size: contain;}
address a {color: var(--blue); font-weight: bold; text-decoration: none; width: 100%;}
address a:hover {text-decoration: underline;}

address span {width:100%; float: left; clear: both;}

.gridspace {height: 20px;}

@media (max-width: 550px) {
	address {font-size: 0.7em; line-height: 1em;}
	address h2 { line-height: 1.5em;}
	.pdf a {font-size: 1em;}
}