@import url('https://fonts.googleapis.com/css2?family=Signika+Negative:wght@300;500&display=swap');
:root{
	--j-primary-color: #38ef7d;
	--j-primary-transparent-color: #38ef7daa;
	--j-secondary-color: #11998e;
	--j-secondary-transparent-color: #11998eaa;
	--sal-duration: .8s; 
	--sal-delay: .1s;
	--j-white-color: #ffffff;
	--j-black-color: #010101;
}
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

html{
	max-width: 100vw;
    overflow-x: hidden;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	font-family: 'Signika Negative', sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	    max-width: 100vw;
    overflow-x: hidden;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*Utility*/
.j_flex_row{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.j_flex_inner_row{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.j_flex_column{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.blocco{
	display: flex;
	flex-direction: row;
	padding: 3rem;
	padding-bottom: 0px;
	background: white;
	z-index: 5;
	position: relative;
	padding-top: 8rem;
}
.card{
    margin-bottom: 1.5rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    overflow: hidden;
}
.card .cardContent{
	padding: 1rem;
}
.card .cardContent p{
	font-weight: 100;
	padding: 15px;
	text-align: justify;
}
.cardContent h3{
	font-weight: 500;
	font-size: 1.25rem;
	text-transform: uppercase;
	color: var(--j-secondary-color);;
}
.cardImage{
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 2;
}
.cardImage img{
	width: 100%;
	aspect-ratio: 1.5;
	object-fit: cover;
}
.cardActions {
    display: flex;
    padding: 0.5rem;
    justify-content: center;
    margin-top: auto;
}
.cardActions a{
	color: var(--j-secondary-color);
	text-transform: uppercase;
}
.w33{
	width: 33%;
}
.w66{
	width: 66%;
}
button{
	cursor: pointer;
}
.mt-1{
	margin-top: 0.5rem;
}
/*menu*/
.logo_menu{
	max-width: 250px;
	border-radius: 5px;
}
.topBar{
	z-index: 5;
    position: relative;
    align-items: center;
	padding: 7px;
	background: #11998e;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}
.menu_items ul{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	height: 100%;
    align-items: center;
}
.menu_items ul li {
	padding: 10px;
	position: relative;
}
.menu_items ul li a{
	text-decoration: none;
	color: inherit;
	color: var(--j-white-color);
	position: relative;
}
.menu_items ul li:hover a{
	color: var(--j-primary-color);
}
.menu_items ul li:hover:after{
	content: ' ';
	position: absolute;
	display: block;
	bottom: 0px;
	left: 0px;
	width: 0%;
	height: 2px;
	background-color:var(--j-primary-color);
	animation-name: menu_link_animation;
  	animation-duration: 350ms;
  	animation-iteration-count: 1;
  	animation-fill-mode: forwards
}
nav.mobile{
	display: none;
}
.hamburger{
	display: none;
}
@keyframes menu_link_animation{
	to  {
		width: 100%;
	}
}



/*HOME*/
	/*hero*/
	.hero{
		max-width: 100%;
		height: calc(100vh - 70px);
		overflow: hidden;
		display: flex;
		align-items: center;
    	justify-content: right;
	}
	.hero video{
		min-width: 100%;
		aspect-ratio: 1.78;
		object-fit: cover;
	    position: fixed;
	}
	.hero img{
		object-fit: contain;
    	max-width: 100%;
	}
	.testo_in_sovraimpressione{
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
		position: absolute;
	    width: 500px;
	    background: ;
	    padding: 70px;
	    border-radius: 5px;
	    margin-right: 70px;
	    background: #11998eaa;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #38ef7d77, #11998e77);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #38ef7d77, #11998e77); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	    color: var(--j-white-color);
	    border-radius: 10px;
	    font-family: 'Signika Negative', sans-serif;
	    backdrop-filter: blur(3px);
	    max-width: calc(100% - 50px);

	}
	.testo_in_sovraimpressione h1{
		font-size: 3rem;
		margin-bottom: .5rem;
	}
	.testo_in_sovraimpressione h2{
		font-size: 1.5rem;
		margin-bottom: 1rem;
		line-height: 1.5rem;
		font-weight: 100;
	}
	/*sottopancia*/
	.sottopancia{
		justify-content: center;
		flex-direction: column;
		background: white;
	}
	.sottopancia h2{
		font-size: 3rem;
		text-align: center;
		text-transform: uppercase;
		margin-bottom: 1.75rem;
		color: var(--j-primary-color);
	}
	.sottopancia p{
		font-weight: 100;
		color: var(--j-black-color);
		line-height: 1rem;
		line-height: 1.75rem;
    	font-size: 18px;
    	text-align: center;
	}
	.hero em{
		font-weight: 100;
		font-style: italic;
		text-align: right;
		display: block;
		margin-left: auto;
	}
	/*Primo Blocco*/
	.primo_blocco{
		justify-content: space-around;
		padding-bottom: 8rem;

	}
	.primo_blocco a{
		text-decoration: 0;
		transition: transform 250ms ;
		color: inherit;
	}
	.primo_blocco a:hover{
		transform: scale(1.05);
	}
	.contatore {
	    font-size: 50px;
	    padding: 1.5rem 1.5rem;
	    margin: 1.5rem 0px;
	    background: red;
	    border-radius: 50%;
	    width: 150px;
	    aspect-ratio: 1;
	    margin: auto;
	    text-align: center;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    color: white;
	    background: #11998e;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to bottom, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to bottom, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

	}
	.label_contatore{
		font-size: 2rem;
		text-align: center;
		font-weight: 100;
		max-width: 70%;
		margin: 1.75rem auto;
	}
	/*secondo_blocco*/
	.secondo_blocco{
		background-image: url("/tema_divisione_collaudo/static/img/bomboleBG.JPG");
		height: 400px;
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		justify-content: center;
		align-items: center;
		padding-top: 0;
		color: white;
		box-shadow: rgba(0, 0, 0, 0.7) 0px 10px 50px 50px inset;
	}
	.secondo_blocco div{
		padding: 1.75rem;
		border-radius: 10px;
		background-color: rgba(0, 0, 0, 0.3);
		backdrop-filter: blur(3px);
		font-size: 40px;
		box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

	}
	.secondo_blocco h3,.secondo_blocco h4{
	    text-align: center;
	    padding: 1rem;
	    text-transform: uppercase;
	    font-size: 1.5rem;
	}
	.secondo_blocco h4{
		font-size: 1.25rem;
	}
	/*terzo*/
	.terzo_blocco{
		    justify-content: space-between;
	}
	.terzo_blocco .card{
	    width: 30%;
	}
	/*quarto*/
	.quarto_blocco{
		flex-direction: column;
		padding-top: 0;
	}
	.quarto_blocco h2 {
	    font-size: 4rem;
	    line-height: 3rem;
	    text-transform: uppercase;
	    font-weight: 900;
	    color: var(--j-primary-color);
	    margin-bottom: 0.5rem;
	}
	.quarto_blocco h3{
		font-size: 1.5rem;
	    font-weight: 100;
	    margin-bottom: 1.5rem;
	}
	.quarto_blocco p {
		line-height: 1.5rem;
	    font-weight: 100;
	    padding-bottom: 0;
	    text-align: justify;
	}
	.quarto_blocco ul {
		padding-bottom: 1.5rem;
	}
	.quarto_blocco li {
		margin-top: 0.5rem;
		font-weight: 100;
	}
	.quarto_blocco video{
		width: 100%;
		aspect-ratio: 1.78;
		object-fit: cover;
	}
	.quarto_blocco .w66{
		padding-left: 2rem;
		align-items: center;
    	display: flex;
	}
	.quinto_blocco{
		background-image: url("/tema_divisione_collaudo/static/img/1469.jpg");
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		justify-content: center;
		align-items: center;
		padding-top: 0;
		color: white;
	}
	.quarto_blocco:not(.certificazioni) .j_flex_row{
		padding-bottom: 3rem;
	}
	.j_flex_inner_row{
		justify-content: space-around;
	}
	.j_flex_inner_row img{
		width: 40%;
		height: auto;
	}
	/*EVENTI*/
	.eventi{
		display: flex;
		/*backdrop-filter: blur(9px);
		background-color: rgba(255,255,255,.1);
	    border-radius: 10px;*/
	    padding: 40px;
	    /*border: 2px solid rgba(255,255,255,.3);*/
	}

	.evento{
		display: flex;
		margin: 0rem 10px;
		flex-direction: column;
	    border-radius: 10px;
	    padding: 15px;
	    background-color: white;
    	color: black;
    	width: 33%;
    	justify-content: center;
	}
	.evento p{
		text-align: justify;
		font-weight: 100;
	}
	.evento a{
		margin: auto;
	}
	.evento .data{
		border-radius: 100%;
		aspect-ratio: 1;
		width: 33%;
		background: #11998e;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to bottom, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to bottom, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 45%;
		color: white;
	}
	.evento .giorno {
	    font-size: 3rem;
	}
	.evento .titoloEvento{
		display: flex;
	    align-items: flex-end;
	    padding-right: 5px;
	}
	.evento .j_flex_row{
		margin-bottom: 1rem;
	}
	.evento img{
		margin: auto;
		max-width: 100%;
	}
	.eventi{
		display: flex;
		flex-direction: row;
	}
	.certificazioni .w33>div{
		width: 100%;
		padding: 120px;
	}
	.certificazioni img{
		width: 50%;
	}
	.certificazioni img:nth-child(2){
		justify-self: flex-end;
	}
	.certificazioni .w66.j_flex_column{
		justify-content: center;
	}
	.certificazioni .w66.j_flex_column h2{
		margin-bottom: 1.5rem;
	}
	.certificazioni.quarto_blocco.blocco{
		padding-top: 0;
	}
	.evento img {
	    
	}
	.evento{

	}
/*FOOTER*/

	.footer{
		background: #11998e;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to bottom, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to bottom, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		color: white;
		font-weight: 100;
		padding-top: 2rem;
		padding-bottom: 2rem;
		justify-content: space-evenly
	}
	.footer div{
		padding: .5rem;
	}
	.underfooter{
		background: black;
    	color: white;
    	text-align: center;
    	font-weight: 100;
    	border-bottom: 4px solid black;
    	position: relative;
    	z-index: 10;
	}

	.footer h5 {
	    margin-bottom: 2rem;
	}
	.footer a {
	   text-decoration: none;
	   line-height: 1.5rem;
	   color: white !important;
	}


/*STORIA*/
.storia .hero{
	height: 66vh
}
#storia, #chisiamo{
	padding-top: 5rem;
}
#storia{
	padding-bottom: 3rem;
}
#storia p, #chisiamo p, #certificati p{
	font-weight: 100;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    padding: 0 2rem;
}
#storia p::first-letter, #chisiamo p::first-letter, #certificati p::first-letter{
	font-size: 200%;
  	color: var(--j-primary-color);
}

#certificati p{
	margin-top: 1rem;
}
.certificatiDivisione{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 1rem;
}
.certificatiDivisione img {
    max-width: 30%;
}
.certificatiDivisione.last{
	padding-bottom: 5rem;
}
.fotoDivisione img {
    max-width: 50%;
}
.fotoDivisione{
	padding-top: 2rem;
}
/*Le Nostre Sedi*/
.lenostresedi p::first-letter{
	font-size: 200%;
  	color: var(--j-primary-color);
}
.lenostresedi .hero{
	height: 66vh
}
.lenostresedi p{
	font-weight: 100;
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    padding: 0 2rem;
}
.sedi_primo{
	padding-bottom: 4rem;
    padding-top: 4rem;
}
.sedi{
	padding: 0 3rem;
	display: flex;
	flex-wrap: wrap;

}
.sedi h5{
	width: 100%;
	font-size: 20px;
}
.sedi > * {
  margin: 18px;
}

.sedi {
  display: inline-flex;
  flex-wrap: wrap;
  margin: -18px 0 0 -18px;
  width: calc(calc(100% + 18px) - 3rem);
}
.sede{
	display: flex;
	width: calc(50% - 36px);
	box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
	min-height: 250px;
	border-radius: 20px;
    overflow: hidden;
}
.sede .address{
	padding: 3rem;
}
.sedeDett{
	width: calc(50% - 36px);
}
.sedeDett ul{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	height: 100%;
}
.sedeDett ul li {
	list-style-type: circle;
}
.sede img{
	max-width: 33%;
	object-fit: cover;
}
/*CONTATTI*/
.contatti h2{
	color: var(--j-secondary-color);
}

.contatti .hero{
	height: 66vh
}
.contatti .sottopancia.blocco{
	padding-top: 3rem;
}
.contatti .form{
	display: flex;
    flex-direction: column;
    padding: 2rem;
    padding-top: 0 ;
}
.contatti .form * {
    margin: 0.5rem;
    font-size: 22px;
    border: none;
    border: 3px solid var(--j-secondary-color);
    border-radius: 15px;
    padding: 6px;
    padding-left: 10px;
    color: var(--j-secondary-color);
}
.contatti .form *:focus-visible{
	outline-color: var(--j-secondary-color);
}
.contatti .form code{
	border-color: red;
	color: red;
	transform: scaleY(0);
	transition: all 250ms;
	padding: 0;
	margin: 0;
	margin-bottom: -1.5rem;
	border-width: 0;
}
.contatti .form code.visible{
	transform: scaleY(1);
	padding: 6px;
    padding-left: 10px;
	margin: 0.5rem;
	border-width: 3px;
}
#bottoneContatti{
	background-color: var(--j-secondary-color);
	border-color: var(--j-secondary-color);
	color: white;
}
.contatti ::placeholder{
	color:  var(--j-secondary-color);
	opacity: .5;
}
/*VERIFICA*/
.verifica .hero{
	height: 66vh
}
.verifica .sottopancia.blocco{
	padding-top: 3rem;
}
.gallery{
	padding: 1rem 5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.gallery img {
    width: 30%;
    margin: 5px;
        object-fit: cover;
}

/*PRODOTTI*/

.verifica .sottopancia{
	align-items: center;
}
.verifica .sottopancia div{
	padding: 2rem 0;

}
@media all and (max-width: 1690px) { }
@media all and (max-width: 1280px) { 

}
@media all and (max-width: 980px) {
	.blocco{
		flex-direction: column;
		padding: 1rem;
		padding-top: 3rem;

	}
	.eventi{
		flex-direction: column;
		padding: 0px;
	}
	.evento{
		width: auto;
	}
	nav.desktop{
		display: none;
	}
	nav.mobile{
		display: flex;
	}
	nav.mobile button{
		width: 40px;
	    aspect-ratio: 1;
	    background: transparent;
	    border-radius: 10px;
	    box-shadow: none;
	    border: 2px solid white;
	}
	nav.mobile ul{
		display: flex;
	    flex-direction: column;
	    align-items: center;
	    width: 100%;
	}
	nav.mobile ul li{
		border-top: 1px solid #38ef7d;
		width: 100%;
		text-align: center;
	}

	nav.menu_items.mobile {
	    display: flex;
	    align-items: center;
	    top: 70px;
	    z-index: 3;
	    position: absolute;
	    width: 100vw;
	    height: fit-content;
	    background: #11998e;  /* fallback for old browsers */
		background: -webkit-linear-gradient(to right, #38ef7d, #11998e);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(to right, #38ef7d, #11998e); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		color: white;
		transform: translateY(-110%);
		transition: transform 300ms;
	}
	nav.menu_items.mobile.active{
		transform: translateY(0%);
	}
	.testo_in_sovraimpressione{
		margin-right: 0;
		padding: 25px;
		border-radius: 0;

	}
	.hero{
		align-items: flex-end;
	}
	.terzo_blocco .card{
		width: 100%;
	}
	.w33,.w66{
		width: 100%;
	}
	.j_flex_row:not(.topBar){
		flex-direction: column;
	}
	.eventi .j_flex_row{
		flex-direction: row;
	}
	.evento{
		margin-bottom: 1rem;
	}
	.quarto_blocco h2 {
		font-size: 3rem;
		text-align: center;
	}
	.quarto_blocco h3{
		text-align: center;
	}
	.quarto_blocco .w66{
		padding: 0;
	}
	.quinto_blocco{
		height: auto;
	}
	.evento .titoloEvento{
		font-size: 35px;
    	text-align: right;
	}
	.hamburger{
		display: flex;
	    width: 45px;
	    max-height: 45px;
	    aspect-ratio: 1;
	    background: transparent;
	    border: 2px solid white;
	    border-radius: 5px;
	    flex-direction: column;
	    justify-content: space-around;
	    align-items: center;
	}
	.hamburger>div:nth-child(1){
		margin-top: 7px;
	}
	.hamburger>div:nth-child(3){
		margin-bottom: 7px;
	}
	.hamburger>div{
		background: white;
		width: 32px;
		height: 2px
	}
	.fotoDivisione img{
		max-width: 100%;
	}
	.gallery {
    	padding: 1rem 1rem;
	}
	.verifica .hero {
	    height: auto;
	}
	.gallery img {
		width: 90%;
	}
	.verifica .sottopancia div {
	    padding: 2rem 0;
	    max-width: calc(100% - 4rem);
	    display: flex;
	}
	.verifica .sottopancia div img{
		max-width: 50%;
	    object-fit: cover;
	}
	.sede{
		width: calc(100% - 36px);
	}
	.sedeDett{
		width: calc(100% - 36px);
 	}
	.sedeDett ul{
		align-items: center;
		height: 100%;
	}
}
@media all and (max-width: 736px) { }
@media all and (max-width: 480px) { }