:root {
	--font-size: 3vw;
	--margin: 1vw;
	--padding: 1vw;
	--width: 100vw;
	--icon-size: calc(var(--width)/9);
	--radius: 10%;
}

body {
	-moz-column-count: 1;
		column-count: 1;
	-moz-column-fill: balance;
		column-fill: balance;
  	-moz-column-gap: 0px;
		column-gap: 0px;
	padding-left: env(safe-area-inset-left);
}

h1{
	font-size: calc(var(--font-size)*3.5)!important;
	margin-top: var(--margin);
	color: var(--theme-gb);
	margin-bottom: 0px !important;
	line-height: calc(var(--font-size)*3);
	margin-top: calc(var(--padding)*2);
}

h2{
	font-size: calc(var(--font-size)*2)!important;
}

h3{
	font-size: calc(var(--font-size)*1.8)!important;
}

h4{
	font-size: calc(var(--font-size)*1.4)!important;
}

h5{
	font-size: calc(var(--font-size)*1.2)!important;
}

h6{
	font-size: calc(var(--font-size)*1)!important;
}

hr {
	margin: calc(var(--padding)*5) 0 calc(var(--padding)*5) 0;
}

a:hover {
	color: var(--card-font-color);
	text-decoration: none;
}

.sezione {
  	display: inline-block;
  	page-break-inside: avoid;
  	-moz-column-break-inside: avoid;
       break-inside: avoid;
  	width: 100%;
	border: solid var(--margin);
	border-color: var(--theme-gb);
	background: var(--card-gb);
    justify-content: center;
	padding: var(--padding);
}

.float-lang {
	display: flex;
    flex-direction: column;
	top: calc(var(--padding)*1.3);
    right: calc(var(--padding)*2);
    z-index: 99999;
	margin-top: env(safe-area-inset-top);
}

.float-lang .btn-group {
	justify-content: flex-end;
}

.bottone-lingue{
    background: transparent;
	border:none;
    /*border: solid 1px;
    border-color: var(--card-font-color);*/
    overflow: hidden;
    color: var(--card-font-color);
    text-align: center;
    vertical-align: middle;
	float: right;
    display: block;
}

.immagine-profilo {
	border-radius: var(--radius);	
    width: calc(var(--width)/2.5);
    height: calc(var(--width)/2.5);
	margin-top: env(safe-area-inset-top);
}

.profilo {
	text-align: center;
}

.dettagli-contatto {
	font-size: calc(var(--font-size)*1.8);
	padding-left: var(--padding);
    padding-bottom: calc(var(--padding)*1.0);
}

.dettagli-contatto li {
	width: 100%;
    display: block;
    text-align: left;
	margin-bottom: var(--margin);
}

.riga {
	display: flex;
	padding-left: var(--padding);
	padding-bottom: calc(var(--padding)/2);
	overflow: hidden;
	height: auto;
	cursor: pointer;
	position: relative;
	-webkit-align-items: center;
	-moz-box-align: center;
	align-items: center;
	-webkit-justify-content: flex-start;
	-moz-box-pack: start;
}

.riga .icona {
	display: flex;
	text-align: center;
	justify-content: center;
	align-items: center;
	background: var(--theme-gb);
	font-size: calc(var(--font-size)*2.2);
	height: var(--icon-size);
	width: var(--icon-size);
	min-width: var(--icon-size);
	min-height: var(--icon-size);
	border-radius: var(--radius);
	padding: 0 10px;
}

.riga .icona i {
	font-size: calc(var(--font-size)*1.6);
}

.riga .testo{
	font-size: calc(var(--font-size)*1.8);
	margin-left: calc(var(--padding)*4);
}

.riga .testo.indirizzo {
	font-size: calc(var(--font-size)*1.3);
	line-height: calc(var(--font-size)*1.5);
	padding-right: calc(var(--padding)*3);
}


@media (min-width: 576px) {
	:root {
	--font-size: 1.5vw;
	--margin: .2vw;
	--padding: .8vw;
	--width: 50vw;
	--icon-size: calc(var(--width)/9);
	}
	body {
		-moz-column-count: 2;
         	column-count: 2;
	}
	h1{
		margin-top: calc(var(--padding)*2.5);
	}
	.float-lang {
		right: 51vw;
		top:var(--margin);
	}
	.riga .testo{
	margin-left: calc(var(--padding)*2);
	}
}

@media (min-width: 960px){
	:root {
		--font-size: 1vw;
		--margin: .1vw;
		--padding: .5vw;
		--width: 30vw;
		--icon-size: calc(var(--width)/9);
	}
	body {
		-moz-column-count: 3;
         	column-count: 3;
	}
	h1{
		margin-top: calc(var(--padding)*2.5);
	}
	hr {
		margin: calc(var(--padding)*4) 0 calc(var(--padding)*4) 0;
	}
	.float-lang {
		right: 67.3vw;
		top:var(--margin);
	}
	.riga .testo{
	margin-left: calc(var(--padding)*2.5);
	}
}

@media (min-width: 1600px){
	:root {
		--font-size: .8vw;
		--margin: .1vw;
		--padding: .5vw;
		--width: 25vw;
		--icon-size: calc(var(--width)/9);
	}
	body {
		-moz-column-count: 4;
         	column-count: 4;
	}
	h1{
		margin-top: var(--padding);
	}
	hr {
		margin: calc(var(--padding)*3) 0 calc(var(--padding)*3) 0;
	}
	.float-lang {
		right: 75.5vw;
		top:var(--margin);
	}
	.riga .testo{
	margin-left: calc(var(--padding)*2);
	}
}


















/* OLD */

.social-button {
width: 40px;
height: 40px;
outline: 0 !important;
cursor: pointer;
font-size: 15px;
border: none;
margin-right: 10px;
border-radius: 50%;
box-shadow: 20px 20px 60px #cacaca, -20px -20px 60px #ffffff;
color: var(--card-font-color);
}

.social-button:active {
border-radius: 50%;
background: linear-gradient(145deg, #d6d6d6, #ffffff);
box-shadow: inset 20px 20px 60px #cacaca, inset -20px -20px 60px #ffffff
}

.contact-details .icon-circle {
display: flex;
text-align: center;
justify-content: center;
align-items: center;
background: linear-gradient(145deg, var(--card-font-color), #ffffff);
box-shadow: 20px 20px 60px var(--card-font-color), -20px -20px 60px #ffffff;
font-size: 21px !important;
height: 42px;
width: 42px;
padding: 0 10px;
}

.card-profile-image {
    max-width: 144px;
    max-height: 144px;
    width: 144px;
    height: 144px;
}



@media (min-width: 576px) {
	.box-principale {
		max-width: 83%;
	}
	.avatar {
		width:8vw!important;
	}
	.box-principale  {
		margin-bottom: 2%;
	}
	.referenze-titolo, .sezione-custom-titolo h4, .contact-details-item h6 {
		font-size: 5vw!important;
	}
	.referenze-testo, .sezione-custom-testo p {
		font-size: 2.2vw!important;
		line-height: 3.3vw!important;
	}
}

@media (min-width: 960px){
	.box-principale {
		max-width: 66%;
	}
	.avatar {
		width:12vw!important;
	}
	.box-principale  {
		margin-bottom: 1%;
	}
	.referenze-titolo, .sezione-custom-titolo h4, .contact-details-item h6 {
		font-size: 5vw!important;
	}
	.referenze-testo, .sezione-custom-testo p {
		font-size: 2vw!important;
		line-height: 3vw!important;
	}
}		

@media (min-width: 1024px){
	.box-principale {
		max-width: 50%;
	}
	.avatar {
		width:16vw!important;
	}
	.box-principale  {
		margin-bottom: 1%;
	}
	.referenze-titolo, .sezione-custom-titolo h4, .contact-details-item h6 {
		font-size: 2.5vw!important;
	}
	.referenze-testo, .sezione-custom-testo p {
		font-size: 0.8vw!important;
		line-height: 1.2vw!important;
	}
}


.referenze-testo {
	font-weight: 100;
    font-size: 3vw;
	text-align: center;
	color: var(--card-font-color);
}