@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');


* {margin: 0; padding: 0; box-sizing: border-box;}
html {font-size: 62.5%; scroll-behavior: smooth;}
body {font-family: 'Open Sans', sans-serif; color: #fff; background: #000; font-size: 1.7rem; line-height: 1.5; }
hr {margin: 3rem auto;}
ul {list-style: none;}
.body {max-width: 200rem; margin: 0 auto; background: #010102; overflow: hidden; min-height: 100vh;}

a { text-decoration: none; color: #fff; transition: all .3s; cursor: pointer;}
button {border: none; cursor: pointer; font-family: 'Open Sans', sans-serif; background: transparent; transition: all .4s;}
input, textarea {font-family: 'Open Sans', sans-serif;}
.clear { clear: both;}
.clearfix::after { content: ""; display: table; clear: both; }
.center { text-align: center;}
.container {max-width: 142rem; padding: 0 2%; margin: 0 auto;}
.container-2 {max-width: 174rem; padding: 0 2%; margin: 0 auto;}
.errore { font-weight: 600; font-size: 9rem;}
.flex {display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;  width: 100%; flex-wrap: wrap;}
.tabella-1 .row .flex {flex-wrap: nowrap;}

.mrg-btm-small {margin-bottom: 1.5rem!important;}
.mrg-btm-medium {margin-bottom: 2.5rem!important;}
.mrg-btm-large {margin-bottom: 6rem!important;}
.mrg-btm-xlarge {margin-bottom: 9rem!important;}

.btn { display: inline-block; padding: 1rem 8rem; font-weight: 500; font-size: 1.7rem; line-height: 1;}
.btn:hover {transform: scale(1.1);}

.white-bg {background: #fff;}
.white {color: #fff;}
.black {color: #010102;}
.blu {color: #007cff;}
.blu-bg {background-color: #007cff;}
.dark-grey-bg {background-color: #616161;}
.red {color: #cb323d;}
.red-bg {background-color:#cb323d;}
.azz-bg {background-color: #719bc7;}

.hidden {opacity: 0;}
.visible {opacity: 1; }

.bg-pattern {background-size: contain; background-position: top center; background-repeat: no-repeat;}
.bg-pattern.no-webp {background-image: url("../images/sfondo.jpg");}
.bg-pattern.webp {background-image: url("../images/sfondo.webp");}

header {padding: 2rem 0;}
header .flex {align-items: center; justify-content: space-between;}
.logo {width: 25rem; display: inline-block; margin: 0 15rem 0 0; position: relative;}
.logo img {width: 100%;}
.login {margin: 0 0 0 auto;}
.login img {width: 1.5rem; height: 1.5rem; display: inline-block; vertical-align: middle;}
.line {height: 1px; width: 98%; margin: 2rem auto;}

.block-main {/*width: 60%; display: inline-block; vertical-align: top; margin: 0 5% 0 0;*/ width: 100%; display: block; margin: 0 auto 4rem;}
.spalla {/*width: 35%; margin: 0; display: inline-block; vertical-align: top;*/ width: 100%; margin: 0 auto 3rem; display: block;}
.tit {font-size: 3rem; font-style: italic; text-transform: capitalize;}
.tit2 {font-size: 2rem;}
.tit::first-letter {font-size: 4.5rem;}
.tabella-1 { width: 100%; margin: 2rem 0 6rem;}
.tabella-1 .row { margin: .5rem 0;}
.tabella-1 .row .bl-1 { padding: 1rem 2rem; font-weight: 600; display: inline-block; flex-grow: 2;}
/*.tabella-1 .row .bl-3 { width: 20%; padding: 1rem 2rem; font-weight: 600; display: inline-block; border-left: 2px solid #000;}*/
.tabella-1 .row .bl-2 { width: 20%; padding: 1rem 2rem; display: inline-block; text-align: center;}
.dot-live { width: 2rem; height: 2rem; background: #cb323d; display: inline-block; border-radius: 50%; vertical-align: top; margin: 2px 5px 0 0;}
.finish { width: 2.5rem; height: 2.5rem;}

section.circuiti-home {margin: 0 auto 7rem;}
.img-circuiti-home { width: 30%; float: left; margin: 0 4% 2rem 0;}
.btn-100 { display: inline-block; padding: 1rem; text-align: center; font-weight: 600;}
.btn-100:hover {transform: scale(1.1);}

section.transponder {padding: 2rem;}
.img-transponder {display: block; width: 100%; margin: -5rem auto 2rem;}

ul.breadcrumb {font-size: 1.3rem; padding: 0 0 2rem;}
ul.breadcrumb li {display: inline-block; padding: 0 .5rem;}
.txt {font-size: 1.6rem; line-height: 1.7;}
ul.breadcrumb li a span {padding: 0 0 0 1rem; display: inline-block;}
section.circuiti-pag .flex {justify-content: center;}
section.circuiti-pag .flex .box {width: calc(25% - 4rem); margin: 2rem; display: inline-block; vertical-align: top; text-align: center; transition: all .3s;}
.tit3 {font-size: 2.2rem; font-style: italic; text-transform: uppercase;}
section.circuiti-pag .flex .box .white-bg {padding: 2rem;}
.img-circuito {width: 100%; margin: 1.5rem auto 0;}
section.circuiti-pag .flex .box .btn-100 {margin: 0.8rem auto 0;}
section.circuiti-pag .flex .box:hover {transform: scale(1.05);}

section.circuito-dett .bl-1 {width: 75%; padding: 1rem 2rem; font-weight: 600; display: inline-block; text-align: center;}
section.circuito-dett .bl-2 {width: 25%; padding: 1rem 2rem; display: inline-block; text-align: center;}
section.circuito-dett .spalla {width: 35%; margin: 0; display: inline-block; vertical-align: top;}
section.circuito-dett .block-main {margin: 1.5rem 0 0 5%; width: 55%; display: inline-block; vertical-align: top;}

.storia {padding: .5rem 0; border-top: 1px solid #9c9c9c; border-bottom: 1px solid #9c9c9c; margin: 4rem auto;}
.storia .tit2 { display: inline-block; vertical-align: middle;}
.collapsible-content .txt { padding: 0 0 1rem;}

.info .box {width: 50%;}
.info .box:first-of-type {width: calc(50% - 3rem); padding: 0 3rem 0 0; margin: 0 3rem 0 0; border-right: 1px solid;}

.live {position: absolute; top: 2rem; right: -10rem; transform: scale(1.3);}
.live .dot-live {border: 2px solid #fff;}
.intestazione .tit, .intestazione .barre, .intestazione .btn-modal {display: inline-block; vertical-align: middle;}
.barre {width: 4rem; margin: 1.5rem 1rem 0;}
.barre img {width: 100%;}
.btn-modal {padding: 1rem; margin: 1.5rem 0 0; font-weight: 600;}
.btn-modal span {display: inline-block; padding: .5rem 1rem; margin: 0 .5rem 0 0; border-radius: .5rem; cursor: pointer;}

.flag, .intestazione .row .txt-small { display: inline-block; vertical-align: middle;}
.flag { width: 5rem; height: 5rem;}
.txt-small {font-size: 1.4rem;}
.txt-small.brd-right {padding: 0 1rem 0 0; border-right: 1px solid; margin-right: 1rem;}
.yellow {font-size: 1.6rem; color: #fffc00; font-weight: 600;}
.green {font-size: 1.6rem; color: #80ff00; font-weight: 600;}
.tabella-live {margin: 4rem auto 8rem;}
.logo-track {width: 150px; display: inline-block; vertical-align: middle; margin: 0 0 0 10px; cursor: pointer;}
.logo-track img {width: 100%; }

.box-toggle { border-bottom: 1px solid #b1b1b1; color: #fff;}
.box-toggle .cont { display: flex; width: 95%; margin: 0 0 0 auto;}
.sub-box-toggle { display: flex; justify-content: flex-start; align-items: center; padding: 0 25px; background: #676767; width: 95%; margin: 0 0 0 auto; position: relative; height: 55px;}
.angle-1 {position: relative; top: 0; height: 55px; margin: 0 -1px 0 0;}
.angle-1 img {height: 100%;}
.sub-box-toggle .tit {width: calc(100% - 400px); text-align: left;}
.bottom-toggle {border-top: 1px solid #b1b1b1; margin: -5px auto 0;}
.bottom-toggle .cont {width: 95%; display: flex; margin: 0 0 0 auto;}
.bottom-toggle-content {background: #676767; width: 95%; margin: 0 0 0 auto; height: 55px; position: relative;}

#triggerToggle {width: 100%;}
.btn-show {position: relative; padding: 10px; display: inline-block; color: yellow; border: 1px solid; border-radius: 10px; background: #313131; width: 190px; font-size: 16px; margin-left: 10px; } 

.btn-backto {position: relative; padding: 10px; display: inline-block; color: #FFF; border: 1px solid; border-radius: 10px; background: #313131; width: 190px; font-size: 16px; } 

#target {background: #232323; margin: -5px auto 0;}
#target .flex {width: 90%; margin: 0 5%; padding: 2rem 0 6rem;}
.box-toggle-content-1 { width: 37%; margin: 0 3% 0 0;}
.box-toggle-content-2 { width: calc(60% - 8rem); margin: 0 3rem 0 0;}
.tab-pilota { margin: 4rem 0 0;}
.tab-pilota .row-legenda, .tab-pilota .row-dettagli-pilota { display: flex; width: 100%; justify-content: space-between; padding: 5px 20px; background: #424242;}
.tab-pilota .row-dettagli-pilota:nth-child(even) {background: #525252;}
.tab-pilota .row-legenda {font-size: 15px; font-weight: 900; background: #000; margin: 0 0 3px;}
.tab-pilota .cl_lap {width: 15%; padding: 0 1rem 0 0;}
.tab-pilota .row-dettagli-pilota .cl_lap {color: deeppink;}
.tab-pilota .cl_laptime {width: 42.5%; padding: 0 1rem;}
.tab-pilota .row-dettagli-pilota .cl_laptime {color: orangered;}
.tab-pilota .cl_timeday {width: 42.5%; padding: 0 0 0 1rem;}
.tab-pilota .row-dettagli-pilota .cl_timeday {color: greenyellow;}
.cl_position_pilota_legenda img {display: none;}

/* MODAL */
.overlay { display: none; width: 100%; position: fixed; z-index: 10; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); overflow-y: hidden; transition: 0.5s; height: 0%; padding: 8rem 15rem; background-size: cover; background-position: center; background-repeat: no-repeat;}
.overlay.webp {background-image: url(../images/race-bg.webp);}
.overlay.no-webp {background-image: url(../images/race-bg.jpg);}
.overlay-content { position: relative; width: 100%; text-align: center;}
.overlay a { padding: .5rem;  text-decoration: none; font-size: 2.7rem; color: #fff; display: block;transition: 0.3s; line-height: 1.3; text-transform: uppercase;}
.overlay a.btn {max-width: 42rem; margin: 1rem auto;}
.overlay .closebtn {position: absolute;top: 2rem;right: 4rem;font-size: 60px;line-height: 1;}
.open {display: block; height: 90%; width: 95%; margin: 2.5%; box-shadow: 0 0 10rem #525252;}

.bl-sx { width: 30%; display: inline-block; vertical-align: top; margin: 0 10% 0 0;}
.circuito_logo, .circuito_logo img {width: 100%;}
.circuito_tracciato { width: 100%; margin: 5rem auto 0;}
.circuito_tracciato img {width: 100%;}
.bl-dx { width: 59%; text-align: left; display: inline-block;}
.circuito_data_evento.yellow {display: block; font-size: 2rem;}
.overlay-content .bl-dx .txt-small { display: inline-block; min-width: 14rem;}
.overlay-content .bl-dx .txt-big { font-size: 2.2rem; text-transform: uppercase;}
ul.social {margin: 3rem 0 0!important; height: auto!important;}
ul.social li {display: inline-block!important; padding: 0!important; width: 4rem!important; height: auto!important; min-height: inherit!important;}
ul.social-vert {width: 5rem; margin: 0; text-align: center; display: inline-block; vertical-align: top;}
ul.social-vert li {display: block!important; padding: 0!important; width: 4rem!important; height: auto!important; min-height: inherit!important;}
.ico-social {width: 3rem; margin: 5px auto 0;}

.pilota-intestazione {margin: 0 auto 6rem;}
.pilota-intestazione.flex .bl {width: calc(50% - 5rem); margin: 0 2rem 0 0; display: inline-block; vertical-align: top;}
.pilota-flag {width: 6rem; display: inline-block; vertical-align: middle; margin: 0 1rem 0 0;}
.numero-pilota {display: inline-block; width: 10rem; vertical-align: middle; font-size: 4rem; font-weight: 600;}
.pilota-intestazione .bl .tit {display: inline-block; width: calc(100% - 19rem); vertical-align: middle;}
.date-right {text-align: right;}

section.banner {/* margin: 8rem auto; */margin: 0;width: calc(100% - 40rem);/* height: 14rem; */}
section.banner .flex {/* justify-content: space-between; */justify-content: flex-start; align-items: center; flex-wrap: wrap;}
section.banner .flex a {width: 22rem; text-align: center; margin: 0 0.5%;}
div[class^="banner"] {display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center; width: 100%;margin: 0 1rem 0 0;padding-bottom: 56.27%;}
/* .banner_1 {max-width: 490px; height: 13vw; max-height: 160px; margin: 0 auto 0 0; display: inline-block; vertical-align: middle;}
.banner_2 {max-width: 728px; height: 90px; margin: 0 0 0 auto; display: inline-block; vertical-align: middle;} */

footer {margin: 8rem auto 2rem;}
p.credits {padding: 2rem 4rem; text-align: center; font-size: 1.3rem; color: #c7d7e8;}
p.credits a:hover {color: #fff;}


ul.sitemap {padding: 0; list-style: none; margin: 0 auto 5rem; font-size: 1.8rem;}
ul.sitemap li {padding: .5rem 0;}
ul.sitemap li a {transition: all .4s;}
ul.sitemap li a:hover {color: #a90d37; }


/*PRIVACY*/
.privacy ul {list-style: none;}
.accetta{text-align: center; margin-bottom:50px; display: inline-block;}
.accetta button:first-child {background-color: #f1f1f1!important; color:#191919;  }
.accetta button { background-color:white; font-weight: bold; padding:5px 10px; }
.accetta button { border:2px solid white; }
.input-privacy {margin: 5px 0;}


@media screen and (min-width: 1920px) {
	html {font-size: 75%;}
	
}


@media screen and (max-width: 1420px) {

}


@media screen and (max-width: 1280px) {
	/*.banner_1, .banner_2 {margin: 0 auto 2rem;}*/
		
}


@media screen and (max-width: 1024px) {
	section.circuiti-pag .flex .box { width: calc(33.3% - 4rem);}
	.overlay {padding: 8rem 4rem;}
	.pilota-intestazione.flex .bl { width: 100%; margin: 0 auto 3rem; display: block;}
	.pilota-intestazione.flex .bl#bl2 {width: calc(100% - 8rem); margin: 0 auto 0 0;}
	
	.box-toggle-content-1 { width: 100%; margin: 0 auto 40px;}
	.box-toggle-content-2 { width: calc(100% - 8rem); margin: 0 auto;}

	.logo {display: block; margin: 0 auto 1.5rem; text-align: center;}
	section.banner {width: 100%;}
	section.banner .flex {justify-content: center;}
}


@media screen and (max-width: 768px) {
	.spalla {text-align: center;}
	section.circuito-dett .spalla {width: 100%; display: block;}
	section.circuito-dett .spalla .img-circuito {width: 100%; max-width: 400px;}
	section.circuito-dett .block-main {width: 100%; display: block;}
	.img-circuiti-home { width: 100%; float: none;}
	.img-circuiti-home, .img-transponder { max-width: 40rem; margin: 0 auto 2rem;}
	/*.tabella-1 .row .bl-1, .tabella-1 .row .bl-3, .tabella-1 .row .bl-2 {width: auto;}*/
	section.circuiti-pag .flex .box { width: calc(50% - 4rem);}
	section.circuito-dett .block-main { margin: 3rem auto 0; border-top: 1px solid; padding: 3rem 0 0;}
	ul.breadcrumb {padding: 2rem 0 0;}
	.intestazione .tit {display: block;}
	.intestazione .barre { display: none;}
	.intestazione .btn-modal { margin: 0 0 2rem; padding: .5rem 0;}
	.open {height: 95%;}
	.overlay { padding: 4rem;}
	.overlay .closebtn { top: .5rem; right: 1rem; line-height: 0.6;}
	
	.lista_posizioni .flex div {font-size: 14px;}
	.btn-show, .btn-backto {width: 40px;}
	.btn-show span, .btn-backto span {display: none;}
	.sub-box-toggle .tit { width: calc(100% - 100px);}
	
}


@media screen and (max-width: 580px) {
	.logo { width: 100%; display: block; margin: 0 auto 1.5rem; text-align: center;}
	.logo img {width: 23rem; margin: 0 auto; max-width: 100%;}
	.login { margin: 0 auto;}
	section.circuiti-pag .flex .box { width: calc(100% - 4rem);}
	.live { top: 0; left: inherit; right: 0; transform: inherit;}
	.live strong {display: none;}
	.open { height: 97%;}
	.overlay {overflow: scroll;}
	.bl-sx { width: 100%; display: block; margin: 2rem auto 0;}
	.circuito_tracciato {margin: 1rem auto;}
	.bl-dx { width: 100%; display: block;}
	.pilota-intestazione .bl .tit { width: calc(100% - 9rem);}
	.numero-pilota { display: block; width: 100%;}
	
	.intestazione .row {text-align: center;}
	
	/*.tabella-1 .row .bl-1, .tabella-1 .row .bl-3, .tabella-1 .row .bl-2 {padding: 1rem;}*/
	
	.sub-box-toggle {flex-wrap: wrap; padding: 0 10px 0 0;}
	.sub-box-toggle .txt-small {display: none;}
	.sub-box-toggle .tit { width: calc(100% - 60px); font-size: 2.5rem;}
	.btn-show, .btn-backto { width: 25px; padding: 3px;}
	.box-toggle-content-1 .numero-pilota {width: 100px; display: inline-block;}
	.box-toggle-content-2 {width: 100%;}
	ul.social-vert {width: 100%; display: block;}
	#target ul.social-vert li {display: inline-block!important; padding: 0 10px!important; margin: 10px 0 0; }
	
	/* div[class^="banner"]{width: 15rem;} */
	section.banner .flex a { width: 49%;}
	/* .banner_1 { height: 30vw; margin: 0 auto 2rem;} */
	
}

@media screen and (max-width: 400px) {
	.tabella-1 .row .bl-1, .tabella-1 .row .bl-3, .tabella-1 .row .bl-2 {font-size: 14px;}
	.tabella-1 .row .bl-2 {width: 30%;}
	.info .box, .info .box:first-of-type {width: 100%; padding: 0 0 2rem; margin: 0 auto 1rem;}
	.info .box:first-of-type {border-right: none; border-bottom: 1px solid;}
	
	.sub-box-toggle .tit {font-size: 18px;}
	
}

@media screen and (max-height: 375px) {
	.overlay a { font-size: 2rem; line-height: 1.2; text-transform: uppercase;}
}