/*regole da brand manual*/

/*COLORI*/
:root {
    --vk-verde: #00AC46;
    --vk-antracite: #23282A;
    --vk-gr-basic: #919394;
    --vk-gr-mid: #DCDFDC;
    --vk-gr-light: #F3F5F3;
}

/*FONT*/
html, body {
	font-family: 'Vorwerk', Arial, sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	color: var(--antracite);
}
strong, b {font-weight: 700}


/*fontsize --> nel BM sono in pt, li converto in px e aggiungo 4px, se no restano piccoli dato che sono per editoriale*/
/*nb alle interline aggiungo 0.2 punti percentuale a quelle indicate nel BM se no troppo strette per stesso motivo...*/
p, .vk-copy, .vk-copy-headline {
	font-size: 16px; /*es: 8.5pt --> 11px + 5 = 16px*/
	line-height: 1.6;
	text-align: left !important; /*solo*/
}
p, .vk-copy { 
	font-weight: 300;	
}
.vk-copy-headline { 
	font-weight: 700; 	
	color:var(--vk-antracite); /*può essere anche tutto verde*/	
}

.vk-top-title { /*font-size flessibile, solo centrato*/
	font-weight: 300;
	text-align: center !important;
	color:var(--vk-antracite); /*può essere anche bianco e con highlights*/
	line-height: 1.1;
}
.vk-headline { /*font-size flessibile, allineamento left o center*/
	font-weight: 300;
	color:var(--vk-antracite); /*può essere anche bianco e con highlights*/
	line-height: 1.3;
} 
.vk-subheadline { /*left o center*/
	font-weight: 700;
	color:var(--vk-antracite); /*solo*/
	font-size: 29px;
	line-height: 1.35;
}
.vk-intro { 
	font-weight: 400; 
	text-align: left !important; /*solo*/
	color:var(--vk-antracite); /*solo*/
	font-size: 26px;
	line-height: 1.5;
}
.vk-caption { 
	font-weight: 400; 
	text-align: left !important; /*solo*/
	color:var(--vk-antracite); /*solo*/
	font-size: 14px;
	line-height: 1.6;
}


/*pulsanti*/
.btn {
    min-height: 40px;
    border-radius: 4px;
}

.btn-primary,
.btn-primary:focus {
	background-color: var(--vk-verde); 
	border: none;
}
.btn-primary:hover {
	background-color: var(--vk-verde); 
	box-shadow: 0 3px 6px rgb(0 0 0 / 25%);
}
.btn-primary:active {
    background-color: var(--vk-verde) !important;
    box-shadow: inset 0 3px 6px rgb(0 0 0 / 15%);
}

.btn-primary[disabled],
.btn-primary[disabled]:focus {
	background-color: var(--vk-verde); 
	border: none;
	opacity: 0.35;
}


.btn-secondary {
	background-color: transparent; 
	border: 1.5px solid var(--vk-verde);
	color: var(--vk-verde);
}
.btn-secondary:hover {
	background-color: rgb(0 172 70 / 5%); 
	color: var(--vk-verde);
}
.btn-secondary:focus {
	background-color: rgb(0 172 70 / 15%); 
	border: 2px solid var(--vk-verde);
	color: var(--vk-verde);
}
.btn-secondary:active {
    background-color: transparent !important;
	color: var(--vk-verde);
}

.btn-secondary-neg {
	background-color: transparent; 
	border: 1px solid #fff;
	color: #fff !important;
}
.btn-secondary-neg:hover {
	background-color: rgb(255 2552 255 / 5%);  
	border: 1px solid #fff;
	color: #fff !important;
}
.btn-secondary-neg:focus {
	background-color: rgb(255 2552 255 / 15%); 
	border: 1px solid #fff;
	color: #fff !important;
}
.btn-secondary-neg:active {
    background-color: transparent !important;
	border: 1px solid #fff;
	color: #fff !important;
}


.btn-link { 
	color: var(--vk-verde);
	text-decoration: none;
	padding-top: 8px;
	letter-spacing: 0.3px;
}
.btn-link:hover {
	color: var(--vk-verde);
	text-decoration: underline;
}
.btn-link-secondary { 
	color: #fff;
	text-decoration: none;
	letter-spacing: 0.3px;
}
.btn-link-secondary:hover {
	color: #fff;
	text-decoration: underline;
}


/*altro*/
.vk-info-cont {
	border-radius: 4px;
	background-color:var(--vk-gr-light);
	padding: 20px;
} 



/*SWING*/
/*Gli swing sono quei blocchi bianchi all'interno di cui ci sono varie info e seguono la logica della griglia 6x6, dove 1/6 è il respiro da dare al contenuto*/

/*la suddivisione degli swing o degli hero usano la griglia 6x6 come un bootstrap in veriticale...perciò è quello che creo:*/
/*(ma senza le divisioni per media, sono abbastanza netti gli spazi verticali, sempre in percentuali)*/

/*l'offset da alto o basso è sempre solo uno*/ 

.col-vk-full, 
.col-vk-swing {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.col-vk-full {
	text-align: center;
}
.col-vk-full > [class*="col"]:not([class*="col-h"]), 
.col-vk-swing > [class*="col"]:not([class*="col-h"]) {
	height: 100%;
}
.col-vk-swing {
	background-color: #fff;
}

/*usato per separare elementi che non contegono uno swing*/
.sep-vk-swing {
	/*il background è deciso dalle classi dei bg, es: .vk-bg-verde*/
	/*il radius è deciso dalle classi dei border radius es: vk-rad-b*/
	position: relative;
	border-radius: 0 !important; 
}
/*lo swing è sempre bianco*/
.sep-vk-swing::before {
	content: "";
	position: absolute;
	background-color: #fff;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 10;
}

.col-h-1  {height: 8.33333333%;}
.col-h-2  {height: 16.66666667%;}
.col-h-3  {height: 25%;}
.col-h-4  {height: 33.33333333%;}
.col-h-5  {height: 41.66666667%;}
.col-h-6  {height: 50%;}
.col-h-7  {height: 58.33333333%;}
.col-h-8  {height: 66.66666667%;}
.col-h-9  {height: 75%;}
.col-h-10 {height: 83.33333333%;}
.col-h-11 {height: 91.66666667%;}
.col-h-12 {height: 100%;}

/*il logo è sempre centrato*/
.col-h-logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

/*il radius può essere solo in alto a sinistra o in basso a destra (devono essere felici e puntare in alto)*/
/*applicato a col-vk-swing, e si riferisce sempre al lato corto, quindi controllo orientamento display*/
@media(orientation:landscape){
	.vk-rad-t, .sep-vk-swing.vk-rad-t::before {border-radius: calc(100vh * 0.18) 0 0 0}
	.vk-rad-b, .sep-vk-swing.vk-rad-b::before {border-radius: 0 0 calc(100vh * 0.18) 0}
	
	/*swing sep prende altezza  che è = al radius + 50px*/
	.sep-vk-swing {height: calc(100vh * 0.18);}

	/*Half of full width radius form smaller modules/components (banner/cards) */
	.vk-rad-t-half {border-radius: calc((100vh * 0.18)/2) 0 0 0}
	.vk-rad-b-half {border-radius: 0 0 calc((100vh * 0.18)/2) 0}
}
@media(orientation:portrait){
	.vk-rad-t, .sep-vk-swing.vk-rad-t::before {border-radius: calc(100vw * 0.18) 0 0 0}
	.vk-rad-b, .sep-vk-swing.vk-rad-b::before {border-radius: 0 0 calc(100vw * 0.18) 0}
	
	/*swing sep prende altezza  che è = al radius + 50px*/
	.sep-vk-swing {height: calc(100vw * 0.18);}
	
	/*Half of full width radius form smaller modules/components (banner/cards) */
	.vk-rad-t-half {border-radius: calc((100vw * 0.18)/2) 0 0 0}
	.vk-rad-b-half {border-radius: 0 0 calc((100vw * 0.18)/2) 0}
}


/* eye catcher / badges */
/*Default è -sm */
.eye-catcher {
	position: relative;
	/*padding-top:100% !important;*/ /*è quadrato*/
	background-color: var(--vk-verde);
	border-radius: 50%; 
	font-size: 15px;
	width: 90px;
	height: 90px;
}
.eye-catcher.is-rotated {
	transform: rotate(-5deg);
}
.eye-catcher span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 85%;
    height: 85%;
    text-align: center !important;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    border-radius: 50%;
	display: flex;
	flex-direction: column;
    align-items: center;
    justify-content: center;
	letter-spacing: 0.75px;
}
.eye-catcher img {
    width: 28px;
    height: 28px;
	margin-top:-9px;
	margin-bottom:3px;
}

.eye-catcher.eye-lg { 
	font-size: 21px;
	width: 130px;
	height: 130px;	
}
.eye-catcher.eye-lg img {
    width: 55px;
    height: 55px;
}
.eye-catcher.eye-md {
	font-size: 18px;
	width: 110px;
	height: 110px;		
}
.eye-catcher.eye-md img {
    width: 40px;
    height: 40px;
}
.eye-catcher.eye-xs {
	font-size: 13px;
	width: 70px;
	height: 70px;		
}
.eye-catcher.eye-xs img {
    width: 24px;
    height: 24px;
}


/*stile scrollbar*/
/* the scrollbar */
html::-webkit-scrollbar {
    width: 6px;
}
/* the progress bar of the scrollbar. */
html::-webkit-scrollbar-track {
    background: var(--vk-gr-mid);
    border-radius: 30px;
    border-right:2px solid #fff;
    border-left:2px solid #fff;
}
/* the draggable scrolling handle */
html::-webkit-scrollbar-thumb {
  background: var(--vk-gr-basic);
  border-radius: 0px;
} 


/*Lasciamo questi in fondo perché possono sovrascrivere precedenti (tranne important)*/

/*colori testi e bg: nb, c'è anche bianco ma uso bootstrap*/
.vk-t-verde {color:var(--vk-verde)}
.vk-t-antracite {color:var(--vk-antracite)}
.vk-t-gr-basic {color:var(--vk-gr-basic)}
.vk-t-gr-mid {color:var(--vk-gr-mid)}
.vk-t-gr-light {color:var(--vk-gr-light)}

.vk-bg-verde {background-color:var(--vk-verde)}
.vk-bg-antracite {background-color:var(--vk-antracite)}
.vk-bg-gr-basic {backgr--vk-gr-midound-color:var(--vk-gr-basic)}
.vk-bg-gr-mid {background-color:var(--vk-gr-mid)}
.vk-bg-gr-light {background-color:var(--vk-gr-light)}

/*Principio del Pick&Choose => prendere un colore di riferimento direttamente dall'immagine, possibilmente non deve essere nè troppo scuro nè chiaro...un valore medio, che comunque abbia un certo accento e si noti;
NB: NO COLORI NEON!*/
 
/*Colori secondari - possono essere usati quando il principio Pick&Choose non può essere applicato (technical restriction or when no strong color is given in the imagery*/
/*!! 100% oppure 15%, no vie di mezzo... e SOLO PER I BACKGROUND (più che altro la variante al 15%)*/
/*Una nota nel file dice *mostly for seasonal campaigns*/
.vk-bg-color-sec-yellow {background-color:rgb(250 212 0 / 100%)}
.vk-bg-color-sec-yellow-15 {background-color:rgb(250 212 0 / 15%)}

.vk-bg-color-sec-orange {background-color:rgb(245 160 30 / 100%)}
.vk-bg-color-sec-orange-15 {background-color:rgb(245 160 30 / 15%)}

.vk-bg-color-sec-red {background-color:rgb(240 65 95 / 100%)}
.vk-bg-color-sec-red-15 {background-color:rgb(240 65 95 / 15%)}

.vk-bg-color-sec-blue {background-color:rgb(55 130 205 / 100%)}
.vk-bg-color-sec-blue-15 {background-color:rgb(55 130 205 / 15%)}

.vk-bg-color-sec-purple {background-color:rgb(115 75 165 / 100%)}
.vk-bg-color-sec-purple-15 {background-color:rgb(115 75 165 / 15%)}