back/* ---------------------- GENERAL SETTINGS ---------------------- */
html,body {
	margin:0;
	padding:0;
	background-color: var(--light-grey);
	color: var(--black-soft);
	font-size: 16px;
	font: 100% 'Roboto Flex', sans-serif;
}

#main-container {
	min-height:100%;
	position: absolute;
	width: 100%;
}

#body-container {
    /* padding:64px 0 0px; */
    margin:0 auto;
    width: 100%;
}

.block-container{
	position:relative;
	margin:0 auto;
	width:1400px;
	/* overflow:hidden; */
}

.block-container.full {
    width: 100%;
	padding: 0 24px;
}

.page-title {
	background-color: var(--dark-grey);
	color: var(--white);
	padding: 112px 24px 40px;
	text-align: center;
	background-image: url(../img/theme/page-title-background.jpg);
	background-position: center;
	background-size: cover;
}

.page-title .title {
	margin: 0;
	font-size: 2.0em;
}

@media only screen and (max-width: 1460px) {
    .block-container{
		width:100%;
        padding: 0 24px;
	}
}

@media only screen and (max-width: 960px) {
	#body-container{
		/* padding:56px 0 0px; */
		transition: 0.3s ease;
		-webkit-transition: 0.3s ease;
	}

	.page-title {
		padding: 88px 0 32px;
	}
}

@media only screen and (max-width: 720px) {
	.block-container{
		width:100%;
        padding: 0 8px;
	}

	.page-title {
		padding: 80px 0 24px;
	}

	.page-title .title {
		font-size: 1.4em;
	}
}

*, *::before, *::after {
    box-sizing: border-box;
	transition: 0.2s; -webkit-transition: 0.2s;
}

img {
	border:0;
}

/* colors */
:root {
	--grey: #d9dadd;
	--grey-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(467%) hue-rotate(312deg) brightness(85%) contrast(98%);
	--light-grey: #ebeff2;
	--light-grey-filter: brightness(0) saturate(100%) invert(98%) sepia(3%) saturate(244%) hue-rotate(165deg) brightness(94%) contrast(103%);
	--dark-grey: #97999b;
	--dark-grey-filter: brightness(0) saturate(100%) invert(76%) sepia(0%) saturate(1430%) hue-rotate(173deg) brightness(82%) contrast(86%);
	--black: #000000;
	--black-filter: invert(0%) sepia(100%) saturate(7500%) hue-rotate(183deg) brightness(88%) contrast(108%);
	--black-soft: #212830;
	--black-soft-filter: brightness(0) saturate(100%) invert(12%) sepia(28%) saturate(430%) hue-rotate(171deg) brightness(100%) contrast(94%);
	--white: #ffffff;
	--white-filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(123deg) brightness(97%) contrast(105%);

	--true-color: #00C851;
	--true-color-filter: brightness(0) saturate(100%) invert(59%) sepia(63%) saturate(3320%) hue-rotate(106deg) brightness(97%) contrast(102%);
	--error-color:#FF4444;
	--error-color-filter: brightness(0) saturate(100%) invert(36%) sepia(100%) saturate(1263%) hue-rotate(335deg) brightness(104%) contrast(101%);
	--alert-color:#F9E154;
	--alert-color-filter: brightness(0) saturate(100%) invert(80%) sepia(8%) saturate(2736%) hue-rotate(7deg) brightness(111%) contrast(95%);

	--blue-color: #01A5E0;
	--blue-color-filter: brightness(0) saturate(100%) invert(66%) sepia(20%) saturate(2636%) hue-rotate(174deg) brightness(98%) contrast(95%);
	--pink-color:#F78FBD;
	--pink-color-filter: brightness(0) saturate(100%) invert(77%) sepia(56%) saturate(1271%) hue-rotate(289deg) brightness(103%) contrast(94%);

	--gold-color: #F9CE64;
	--gold-color-filter: brightness(0) saturate(100%) invert(95%) sepia(27%) saturate(5851%) hue-rotate(310deg) brightness(99%) contrast(98%);
	--silver-color:#D2D2D2;
	--silver-color-filter: brightness(0) saturate(100%) invert(94%) sepia(0%) saturate(9%) hue-rotate(194deg) brightness(93%) contrast(86%);
	--bronze-color:#E68D3F;
	--bronze-color-filter: brightness(0) saturate(100%) invert(71%) sepia(13%) saturate(3666%) hue-rotate(333deg) brightness(97%) contrast(85%);

	--main-color:#29c8ff;
	--main-color-filter: brightness(0) saturate(100%) invert(59%) sepia(55%) saturate(1238%) hue-rotate(167deg) brightness(105%) contrast(103%);
	--secondary-color:#ff00ff;
	--secondary-color-filter: brightness(0) saturate(100%) invert(18%) sepia(99%) saturate(4265%) hue-rotate(293deg) brightness(114%) contrast(125%);
}

.grey {filter: var(--grey-filter) !important;}
.light-grey {filter: var(--light-grey-filter) !important;}
.dark-grey {filter: var(--dark-grey-filter) !important;}
.black {filter: var(--black-filter) !important;}
.white {filter: var(--white-filter) !important;}

.true-color {filter: var(--true-color-filter) !important;}
.error-color {filter: var(--error-color-filter) !important;}
.main-color {filter: var(--main-color-filter) !important;}
.secondary-color {filter: var(--secondary-color-filter) !important;}



/* inputs and buttons */
input {
	outline: none;
	height: 48px;
	line-height: 48px;
    padding: 0 20px;
	font-size: 1.0em;
	color: var(--black-soft);
    font-weight: 200;
	border: solid 1px var(--grey);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

input::placeholder {
	color: var(--dark-grey);
}

input:focus, input:hover {
	-webkit-box-shadow: 0px 0px 0px 4px var(--main-color); 
	box-shadow: 0px 0px 0px 4px var(--main-color);
}

input.error, textarea.error {
	border-bottom: solid 1px var(--error-color);
}

.form-group {
	position: relative;
	width: 100%;
}
  
.form-field {
	width: 100%;
	height: 48px;
	margin-top: 16px;
	border: solid 1px var(--grey);
	color: var(--black-soft);
	padding: 0;
	background: var(--white);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	padding: 0 16px;
	position: relative;
    background: transparent;
	z-index: 11;

	&::placeholder {
		color: transparent;
	}

	&:placeholder-shown ~ .form-label {
		cursor: text;
		top: 40px;
		color: var(--dark-grey);
	}
}

.form-field:focus, .form-field:hover {
	-webkit-box-shadow: none; 
	box-shadow: none;
}
  
.form-label {
	position: absolute;
    left: 16px;
	top: -4px;
	display: block;
	font-size: 0.85em;
	color: var(--grey);
	z-index: 10;
}
  
.form-field:focus {
~ .form-label {
	position: absolute;
	top: -4px;
	display: block;
	}
}

.form-group.error .form-field {
	border: solid 1px  var(--error-color);
}

.form-group.error .form-label {
	color: var(--error-color);
}

textarea {
	outline: none;
	border: solid 1px var(--grey);
	height: 160px;
	width: 100%;
    padding:16px;
	color: var(--black-soft);
	font-family: "Poppins", sans-serif;
    font-weight: 300;
	font-size: 1.0em;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

textarea::placeholder {
	color: var(--dark-grey);
}

textarea:focus, textarea:hover {
	color: var(--black-soft);
}

/* button */
.button {
	position: relative;
	height: 48px;
	align-items: center;
	justify-content: center;
	display: flex;
	padding: 0 24px;
	background-color: var(--main-color);
	border: 0;
	cursor: pointer;
	color: var(--white);
	text-transform: uppercase;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	font-size: 1.0em;
    letter-spacing: 0.1em;
}

.button:hover {
	-webkit-box-shadow: 0px 0px 0px 4px var(--main-color); 
	box-shadow: 0px 0px 0px 4px var(--main-color);
}

.button .icon {
	filter: var(--white-filter);
	height: 24px;
	margin-right: 8px;
}

.button.stroke {
	background-color: transparent;
	border: solid 1px var(--dark-grey);
	color: var(--dark-grey);
}

.button.stroke:hover {
	border-color: var(--main-color);
}

.button.stroke .icon {
	filter: var(--dark-grey-filter);
}

/* upload */
.upload-container {
	margin-bottom: 24px;
	display: flex;
	flex-wrap: wrap;
}

label.upload {
	display: inline-flex;
	cursor: pointer;
	margin-right: 16px;
}

#file-caricato {
	font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 1.0em;
	color: var(--dark-grey);
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

#file-caricato a:hover {
	opacity: 0.6;
}

#file-caricato .download-link {
	display: flex;
	align-items: center;
	color: var(--dark-grey);
}

#file-caricato .icon {
	width: 24px;
	margin-right: 12px;
	filter: var(--dark-grey-filter);
}

#file-caricato .delete-link {
	display: flex;
}

#file-caricato .icon-delete {
	width: 24px;
	margin-left: 12px;
	filter: var(--error-color-filter);
}

.upload-content {
	background-color: var(--light-grey);
	color: var(--dark-grey);
	padding: 16px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	-webkit-border-radius: 8px;	-moz-border-radius: 8px; border-radius: 8px;
}

.upload-content .text {
	width: 100%;
	padding: 16px 0;
	text-align: center;
}

.upload-content .placeholder {
	-webkit-border-radius: 8px;	-moz-border-radius: 8px; border-radius: 8px;
	max-width: 480px;
	max-height: 320px;
}

.upload-content .content-actions {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 24px;
}

.upload-content .content-actions .action {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--dark-grey);
}

.upload-content .content-actions .action:hover {
	opacity: 0.6;
}

.upload-content .content-actions .action .icon {
	filter: var(--dark-grey-filter);
	width: 24px;
	margin-right: 8px;
}

@media only screen and (max-width: 760px) {
	.upload-container {
		text-align: center;
	}

	label.upload {
		margin: 0 auto 16px;
	}
	
	#file-caricato {
		width: 100%;
	}

	.upload-content .placeholder {
		max-width: 100%;
	}
}

/* checkbox */
.checkbox-style {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	cursor: pointer;
	vertical-align:middle;
	background-color: var(--white);
	background-repeat: no-repeat;
	border: solid 1px var(--grey);
	outline: none;
	margin: 0 8px 0 0;
	padding: 0;
	-webkit-border-radius: 4px;	-moz-border-radius: 4px; border-radius: 4px;
}

.checkbox-style:focus, .checkbox-style:hover {
	box-shadow: none;
}

.checkbox-style:checked {
	background-image: url(../img/icon-check.svg);
}

.alert {
	display: block;
	color: var(--white);
	padding: 24px 24px 24px 64px;
	background-position: 16px center;
	background-size: 32px 32px;
	background-repeat: no-repeat;
	background-image: url(../img/icon-alert-valid.svg);
	text-align: left;
	background-color: var(--true-color);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	margin-top: 24px;
}

.alert.error {
	background-image: url(../img/icon-alert-error.svg);
	background-color: var(--error-color);
	border: 0;
}

/* Radio */
.radio{
	display: block;
	cursor: pointer; 
	user-select:none;
	line-height: 1.2em;
	font-family: "Poppins", sans-serif;
    font-weight: 300;
	text-align: left;
	&+.radio{
	  margin-top: 12px;
	}
	input{
	  display: none;
	  &+span{
		display: flex;
		position: relative;
		align-items: center;

		&:before{
			content: '';
			display: block;
			margin-right: 12px;
			width: 24px;
			height: 24px;
			background-color: var(--grey);
			-webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
		}

		&:after{
			content: '';
			display: block;
			width: 16px;
			height: 16px;
			background: var(--white);
			position: absolute;
			border-radius: 50%;
			margin-top: -8px;
			top: 50%;
			left: 4px;
			opacity: 0;
			transform: scale(0,0); 
			transition: all .2s cubic-bezier(0.64, 0.57, 0.67, 1.53);
		}
	  }

	  &:checked+span:after{
		opacity: 1;
		transform: scale(1,1);
	  }

	  &:checked+span:before {
		background-color: var(--main-color);
	  }
	}
  }


/* switch */
.form-group.checkbox-switch {
	display: flex;
	align-items: center;
}

.form-group.checkbox-switch .switch {
	margin-right: 16px;
}

.switch {
	--button-width: 40px;
	--button-height: 24px;
	--toggle-diameter: 1.1em;
	--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);
	--toggle-shadow-offset: 10px;
	--toggle-wider: 2.1em;
	cursor: pointer;
	display: inline-flex;
   }
   
.slider {
	display: inline-block;
	width: var(--button-width);
	height: var(--button-height);
	background-color: var(--grey);
	border-radius: calc(var(--button-height) / 2);
	position: relative;
	transition: 0.3s all ease-in-out;
}

.slider::after {
	content: "";
	display: inline-block;
	width: var(--toggle-diameter);
	height: var(--toggle-diameter);
	background-color: var(--white);
	border-radius: calc(var(--toggle-diameter) / 2);
	position: absolute;
	top: var(--button-toggle-offset);
	transform: translateX(var(--button-toggle-offset));
	box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
	transition: 0.3s all ease-in-out;
}

.switch input[type="checkbox"]:checked + .slider {
	background-color: var(--main-color);
}

.switch input[type="checkbox"]:checked + .slider::after {
	transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset)));
	box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1);
}

.switch input[type="checkbox"] {
	display: none;
}

.switch input[type="checkbox"]:active + .slider::after {
	width: var(--toggle-wider);
}

.switch input[type="checkbox"]:checked:active + .slider::after {
	transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset)));
}


/* select */
.select {
	position: relative;
	width: 100%;
	font-family: "Poppins", sans-serif;
	font-weight: 300;
}
  
.select-text {
	position: relative;
	background-color: var(--white);
	width: 100%;
	height: 48px;
	padding: 0 16px;
	margin-top: 16px;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	border: 1px solid var(--grey);
	font-family: "Poppins", sans-serif;
	font-weight: 300;
	font-size: 1.0em;
}

.select-text:focus {
	outline: none;
}

.select .select-text {
	appearance: none;
	-webkit-appearance:none
}
  
.select:after {
	position: absolute;
	top: 38px;
    right: 8px;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 8px solid var(--grey);
	pointer-events: none;
}
  
.select-label {
	color: var(--dark-grey);
	font-size: 0.85em;
	font-weight: normal;
	position: absolute;
	pointer-events: none;
	left: 16px;
    top: 40px;
}
  
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
	top: -4px;
}

.select option {
	padding: 8px;
}

.form-group.error .select .select-text {
	border: solid 1px  var(--error-color);
}

.form-group.error .select .select-label {
	color: var(--error-color);
}



/* formattazione testo */
a {
	text-decoration:none;
	outline:none;
}

p {
	padding:0;
	margin:0 0 24px 0;
	line-height: 1.6em;
}

ul {
	margin-bottom: 24px;
}

hr {
	padding:0;
	margin:0 0 24px 0;
	border: 0;
	border-top: solid 1px var(--grey);
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 24px;
	line-height: 1.1em;
	font-family: "Poppins", sans-serif;
	font-style: italic;
}

.text-center {
	text-align: center;
}

@media only screen and (max-width: 760px) {
	
}

/* table */
.table-container {
    overflow-x: auto;
    display: block;
    width: 100%;
}

table {
    border-collapse: collapse;
}

table th {
    color: var(--main-color);
    font-weight: normal;
	font-size: 0.8em;
	border-bottom: solid 1px var(--grey);
	padding-bottom: 8px;
}

table tbody tr {
	color: var(--black);
}

table tbody td {
	padding: 16px;
	font-size: 0.9em;
	border-bottom: solid 1px var(--grey);
}

table tbody tr:last-child td {
	border-bottom: 0;
}

/* margins */
.mb0 {margin-bottom: 0 !important;}
.mb8 {margin-bottom: 8px !important;}
.mb16 {margin-bottom: 16px !important;}
.mb24 {margin-bottom: 24px !important;}
.mb32 {margin-bottom: 32px !important;}
.mb48 {margin-bottom: 48px !important;}
.mb64 {margin-bottom: 64px !important;}

.mt0 {margin-top: 0 !important; }
.mt8 {margin-top: 8px;}
.mt16 {margin-top: 16px;}
.mt24 {margin-top: 24px !important;}
.mt32 {margin-top: 32px;}
.mt48 {margin-top: 48px;}

.mr0 {margin-right: 0px !important;}
.mr16 {margin-right: 16px;}

.ml0 {margin-left: 0px;}
.ml16 {margin-left: 16px;}

/* paddings */
.pb0 {padding-bottom: 0;}
.pb8 {padding-bottom: 8px;}
.pb16 {padding-bottom: 16px;}
.pb24 {padding-bottom: 24px;}
.pb32 {padding-bottom: 32px;}
.pb48 {padding-bottom: 48px;}

.pt0 {padding-top: 0 !important;}
.pt8 {padding-top: 8px !important;}
.pt16 {padding-top: 16px !important;}
.pt32 {padding-top: 32px !important;}
.pt48 {padding-top: 48px !important;}

.pl24 {padding-left: 24px;}
.pl32 {padding-left: 32px;}
.pl48 {padding-left: 48px;}

.pr24 {padding-right: 24px;}
.pr32 {padding-right: 32px;}
.pr48 {padding-right: 48px;}


/* ---------------------- PAGE CONTENTS - Colonne ---------------------- */
.columns {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 12px;
}

.columns.half .col {
	width: 50%;
}

.columns.half.right-small .col:first-child  {
	width: 70%;
}

.columns.half.right-small .col:last-child {
	width: 30%;
}

.columns.half.left-small .col:first-child  {
	width: 30%;
}

.columns.half.left-small .col:last-child {
	width: 70%;
}

.columns.half .col:nth-child(odd) {
	padding-right: 12px;
}

.columns.half .col:nth-child(even) {
	padding-left: 12px;
}

.columns.third .col {
	width: 33.33%;
	padding: 0 12px;
}

.columns.third .col:nth-child(3n+1), .columns.third .col:nth-child(3n+1) {
    padding: 0 12px 0 0;
}

.columns.third .col:nth-child(3n+3), .columns.third .col:nth-child(3n+3) {
    padding: 0 0 0 12px;
}

.columns .col.full {
	width: 100% !important;
	padding: 0 !important;
}


@media only screen and (max-width: 1024px) {
	.columns.third .col {
		width: 50%;
	}

	.columns.third .col:nth-child(3n+1), .columns.third .col:nth-child(3n+1) {
		padding: 0;
	}
	
	.columns.third .col:nth-child(3n+3), .columns.third .col:nth-child(3n+3) {
		padding: 0;
	}

	.columns.third .col:nth-child(odd) {
		padding: 0 12px 0 0;
	}
	
	.columns.third .col:nth-child(even) {
		padding: 0 0 0 12px;
	}
}


@media only screen and (max-width: 720px) {
	.columns {
		padding: 0 8px;
	}

	.columns.half .col:nth-child(odd), .columns.half .col:nth-child(even), .columns.third .col:nth-child(odd), .columns.third .col:nth-child(even) {
		padding: 0;
		width: 100%;
	}

	.columns.half.right-small .col:first-child, .columns.half.right-small .col:last-child, .columns.half.left-small .col:first-child, .columns.half.left-small .col:last-child  {
		width: 100%;
	}
}


/* ---------------------- PAGE CONTENTS - Colonne Gestionale con Nav ---------------------- */
.col-gest {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 12px;
}

.col-gest .col-nav {
	width: 20%;
	padding-right: 12px;
}

.col-gest .col-content {
	width: 80%;
	padding-left: 12px;
}

.gest-nav {
	padding: 0;
	margin: 0;
	list-style: none;
}

.gest-nav li {
	display: block;
	margin-bottom: 8px;
}

.gest-nav li:last-child {
	margin-bottom: 0;
}

.gest-nav li:first-child {
	padding-top: 0 !important;
}

.gest-nav li.nav-title {
	text-transform: uppercase;
	color: var(--main-color);
	font-size: 0.8em;
	padding-top: 16px;
	letter-spacing: 0.2em;
	border-bottom: solid 1px var(--grey);
    padding-bottom: 8px;
	font-weight: 400;
}

.gest-nav li a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	color: var(--black-soft);
	min-height: 32px;
	margin-bottom: 0px;
}

.gest-nav li a .icon {
	filter: var(--dark-grey-filter);
	width: 20px;
	margin-right: 12px;
}

.gest-nav li a span{
	opacity: 1.0;
	text-transform: uppercase;
	font-family: "Poppins", sans-serif;
	color: var(--black-soft);
	font-weight: 400;
	letter-spacing: 0.1em;
	font-size: 0.9em;
	line-height: 1.1em;
}

.gest-nav li a:hover {
	opacity: 0.4;
}

#gest-toggle, .gest-toggle {
	display: none;
}

@media only screen and (max-width: 1024px) {
	.col-gest .col-nav, .col-gest .col-content {
		padding: 0;
		width: 100%;
	}

	.gest-nav li {
		width: 100%;
	}

	.gest-nav li.nav-title {
		border-bottom: solid 1px rgba(255,255,255,0.2);
	}

	.gest-nav li a span {
		color: var(--white);
	}

	.col-gest .col-nav {
		margin-bottom: 24px;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		height: 100%;
	}

	.gest-nav {
		display: none;
		max-height: 0;
		opacity: 0;
		/* filter: blur(8px); */
		width: 100%;
		background-color: var(--black-soft);
		padding: 0 24px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
	}

	.gest-toggle {
		cursor: pointer;
		outline: none;
		height: 24px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		align-self: center;
		text-transform: uppercase;
		font-family: "Poppins", sans-serif;
		color: var(--black-soft);
		font-weight: 400;
		letter-spacing: 0.1em;
		font-size: 0.9em;
		line-height: 1.1em;
		margin-bottom: 0;
	}
	
	.gest-toggle::before {
		content: "";
		width: 16px;
		height: 16px;
		margin-right: 12px;
		background-image: url(../img/icon-menu-arrow.svg);
		background-position: center;
		background-size: cover;
	}
	
	.gest-toggle::after {
		content: "Gestione";
	}

	#gest-toggle:checked ~ .gest-nav {
		opacity: 1;
		max-height: 3000px;
		/* filter: blur(0px); */
		display: block;
		padding: 24px;
	}
	
	#gest-toggle:checked ~ .gest-nav li {
		opacity: 1;
	}
	
	#gest-toggle:checked ~ .gest-toggle:before {
		transform: rotate(180deg);
	}
	
	#gest-toggle:checked ~ .gest-toggle:after {
		
	}
	
    #gest-toggle:checked ~ .gest-toggle {
        margin-bottom: 24px;
    }
}


/* ---------------------- PAGE CONTENTS - Box e Container ---------------------- */
.box-content {
	background-color: var(--white);
	padding: 24px;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}


/* ---------------------- PAGE CONTENTS - Titles ---------------------- */
.block-title {
	display: flex;
    justify-content: center;
    align-items: center;
    color: var(--black);
    border-bottom: solid 1px var(--grey);
    padding-bottom: 24px;
    margin-bottom: 24px;
}

.block-title .title-icon {
	height: 20px;
	margin-right: 12px;
	filter: var(--main-color-filter);
}

.block-title span {
	text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15em;
	font-size: 0.9em;
}

/* ---------------------- PAGE CONTENTS - Switch List ---------------------- */


.form-list {
	padding: 0;
	margin: 0;
	list-style: none;
	width: 100%;
	display: block;
}

.form-list .form-item {
	display: flex;
    margin-bottom: 24px;
    align-items: center;
	line-height: 1.2em;
}

.form-list .form-item:last-child {
	margin-bottom: 0;
}

.form-list .form-item .switch {
	margin-right: 16px;
}

.form-list .form-item .text{
	display: block;
	color: var(--black-soft);
    font-family: "Poppins", sans-serif;
    font-weight: 300;
}

.form-list .form-item .text .sub {
	color: var(--dark-grey);
	font-size: 0.8em;
	display: block;
}

.form-list .form-title {
	text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15em;
	color: var(--dark-grey);
	display: block;
	margin-bottom: 24px;
	font-size: 0.8em;
}


/* ---------------------- PAGE CONTENTS - Form Footer ---------------------- */
.form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: solid 1px var(--grey);
	padding-top: 24px;
}

.form-footer .left-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-footer .left-content .switch {
	margin-right: 16px;
}

.form-footer .right-content {
	display: flex;
	align-items: center;
	justify-content: center;
}

.form-footer .right-content .button.stroke {
	margin-right: 16px;
}

.form-footer .center-content {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.form-footer .center-content .button  {
	margin: 0 8px;
	width: auto !important;
	padding: 0 24px;
}

@media only screen and (max-width: 720px) {
	.form-footer {
		flex-wrap: wrap;
	}
	
	.form-footer .left-content {
		width: 100%;
		margin-bottom: 32px;
	}

	.form-footer .right-content {
		width: 100%;
	}
}


/* ---------------------- HEADER ---------------------- */
header {
	position: fixed;
	top: 0;
	width: 100%;
	padding: 16px 0;
	z-index: 100;
	-webkit-transition: all 0.2s ease;
    background-color: var(--black);
}

header .head-container {
	position: relative;
	display: flex;
    justify-content: space-between;
	align-items: center;
	height: 100%;
    z-index: 80;
    transition: 0.3s ease;
	overflow: visible;
}

.head-logo {
	flex: 1 0;
	height: 40px;
}

.head-logo img {
    display: block;
    height: 100%;
}

@media only screen and (max-width: 960px) {
    .head-signature-logo {
        
    }
}

.sticky {
	transition: all 0.2s ease;
	-webkit-transition: all 0.2s ease;
}

.sticky .head-logo {
	height: 24px;
}

.sticky .nav li a {
	/* line-height: 66px; */
}

header .nav {
	list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

header .nav hr {
		display: none;
	}

header .nav li {
	display: inline-block;
	height: 100%;
    padding: 0;
    background-image: none;
    line-height: normal;
    margin-bottom: 0;
}

header .nav li a {
    color: var(--white);
    font-weight: 500;
    font-size: 1.0em;
    letter-spacing: 0.05em;
    margin-left: 24px;
    height: 100%;
    display: block;
	position: relative;
    transition: 0.2s ease;
	-webkit-transition: 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 120;
	text-transform: uppercase;
}

header .nav li a:hover {
	opacity: 0.7;
}

header .nav li a.active::after {
	content: "";
	position: absolute;
	bottom: -8px;
	left: 0;
	height: 2px;
	width: 100%;
	background-color: var(--main-color);
}

header .nav li a.login  {
	color: var(--main-color);
}

header .nav li .icon {
	filter: var(--white-filter);
	width: 22px;
	margin-right: 8px;
}

header .nav li a.login .icon {
	filter: var(--main-color-filter);
}

#toggle, .toggle {
	display: none;
	z-index: 100;
}

@media only screen and (max-width: 960px) {
    .sticky {
        padding: 16px 0;
    }
	
	header .head-logo {
		height: 24px;
	}

	header .nav li a {
		font-size: 0.9em;
		margin-left: 20px;
	}

	header .nav li a.login .icon {
		width: 20px;
		margin-right: 8px;
	}
}

@media only screen and (max-width: 720px) {
	header .block-container{
        padding: 0 24px;
	}

	header .nav {
		position:fixed;
		/* display: none; */
		top: 0;
		left: 0;
		z-index:120;
		float:left;
		overflow:hidden;
		height:0.1%;
		opacity: 0;
		margin:0;
		padding: 0 24px;
		width:100%;
		transition: 0.3s;
		-webkit-transition: 0.3s;
        background-color: var(--grey);
        background-image: url(../img/theme/logo.svg);
        background-repeat: no-repeat;
        background-position: 24px 16px;
        background-size: auto 24px;
		background-color: var(--black);
	}

	header .nav hr {
		display: block;
		width: 100%;
		border-color: var(--white);
		opacity: 0.4;
	}
	
	header .nav li {
		width: 100%;
        height: auto;
        position: relative;
        display: flex;
        justify-content: start;
    }

	header .nav li:first-child {
		margin-top: 80px;
		transition: 0.2s ease;
		-webkit-transition: 0.2s ease;
	}
	
	header .nav li a {
		margin: 0 0 24px;
        line-height: normal;
        font-size: 1.2em;
        font-weight: 500;
	}

	header .nav li a.active::after {
		display: none;
	}

	header .nav li a.login .icon {
		width: 24px;
		margin-right: 12px;
	}

	header .nav li a.nav-icon label{
		display: block;
	}
	
	.toggle {
		cursor: pointer;
		outline: none;
		display: block;
		height: 21px;
		position: relative;
		float:right;
		z-index: 150;
		margin-top: 0px;
		cursor: pointer;
		display: flex;
		position: relative;
		width: 24px;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		background-image: linear-gradient( #fff 0, #fff 100%);
		background-size: 66% 3px;
		background-position: right;
		background-repeat: no-repeat;
		align-self: center;
	}
	
	.toggle::before {
		background-color: var(--white);
		content: "";
		display: block;
		height: 3px;
		left: 0;
		position: absolute;
		top: 0;
		width: 100%;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		-webkit-backface-visibility: hidden;
	  }
	
	.toggle::after {
		background-color: var(--white);
		content: "";
		display: block;
		float: left;
		height: 3px;
		right: 0;
		position: absolute;
		bottom: 0;
		width: 33%;
		-ms-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		-webkit-backface-visibility: hidden;
	}

	#toggle:checked ~ .nav {
		opacity: 1;
		display: block;
		height:100%;
	}
	
	#toggle:checked ~ .nav li {
		opacity: 1;
	}

	#toggle:checked ~ .nav li:first-child {
		margin-top: 100px;
	}
	
	#toggle:checked ~ .toggle:before {
		width: 100%;
		/* background-color: var(--yellow); */
		-ms-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		top: 50%;
		left: 50%;
		margin-top: -2px;
		margin-left: calc(-50% + 0.5px);
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		height: 3px;
		width: 100%;
	}
	
	#toggle:checked ~ .toggle:after {
		width: 100%;
		/* background-color: var(--yellow); */
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		bottom: 50%;
		margin-right: -1px;
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-ms-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		-webkit-border-radius: 1px;
		-moz-border-radius: 1px;
		border-radius: 1px;
		height: 3px;
		width: 100%;
	}
	
    #toggle:checked ~ .toggle {
        background-image: linear-gradient( transparent 0, transparent 100%);
        -webkit-transition: all 0.2s ease-in-out;
        -moz-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
        -o-transition: all 0.2s ease-in-out;
        transition: all 0.2s ease-in-out;
        background-position: right center;
        background-size: 0% 3px;
		transform: rotate(-360deg);
    }
}
/* ---------------------- fine HEADER ---------------------- */


/* ---------------------- FOOTER ---------------------- */
footer {
	/* background-color: var(--grey); */
	color: var(--dark-grey);
	font-size: 0.9em;
	padding: 24px 0;
}

footer a:hover {
	opacity: 0.6;
}

footer .footer-top {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: solid 1px var(--grey);
}

footer .footer-top .footer-logo {
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	float: left;
}

footer .footer-top .footer-logo img {
	display: block;
	height: 100%;
	filter: var(--dark-grey-filter);
}

footer .footer-top .links {
	float: right;
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0;
	padding: 0;
}

footer .footer-top .links li a {
	color: var(--dark-grey);
	text-transform: uppercase;
	margin-left: 24px;
	letter-spacing: 0.05em;
}

footer .footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	width: 100%;
}

footer .footer-text {
	float: left;
	flex: 1 0;
}

footer .social-links {
	float: right;
	display: flex;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0 24px 0 0;
	padding: 0;
}

footer .social-links a {
	margin-left: 24px;
}

footer .social-links img {
	width: 24px;
	filter: var(--dark-grey-filter);
}

footer .footer-signature {
	display: flex;
	align-items: center;
	float: right;
	color: var(--dark-grey);
	text-transform: uppercase;
	font-size: 0.8em;
}

footer .footer-signature img {
	filter: var(--dark-grey-filter);
	width: 24px;
	margin-right: 8px;
}

@media only screen and (max-width: 960px) {
	footer .footer-top .footer-logo {
		width: 100%;
		margin-bottom: 24px;
		height: 24px;
	}

	footer .footer-top .links {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}


	footer .footer-top .links li a {
		margin: 0 12px;
	}

	footer .footer-bottom {
		justify-content: center;
	}

	footer .footer-text {
		width: 100%;
		text-align: center;
		margin-bottom: 24px;
	}

	footer .social-links {
		width: 100%;
		justify-content: center;
		margin: 0 0 24px;
	}

	footer .social-links a {
		margin: 0 16px;
	}
}

@media only screen and (max-width: 720px) {
	footer .footer-top .links li {
		margin-bottom: 16px;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	footer .footer-top .links li:last-child {
		margin-bottom: 0;
	}
}
/* ---------------------- fine FOOTER ---------------------- */


/* ---------------------- LOGIN ---------------------- */
.login-box {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	padding: 24px 0;
}

.login-box .login-content {
	display: block;
	padding: 24px;
	background-color: var(--white);
	width: 400px;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

.login-box .login-content .actions-box {
    display: flex;
    width: 100%;
}

.login-box .login-content .actions-box.center {
	justify-content: center;
}

.login-box .login-content .actions-box .half {
    float: left;
    width: 50%;
    transition: 0.3s ease;
}

.login-box .login-content .actions-box .half .button {
	margin: 0 16px 0 auto;
	font-size: 1.0em;
}

.login-box .login-content .actions-box .half.links {
	color:var(--aqua);
	font-size: 0.9em;
	text-align: left;
	padding-left: 16px;
    border-left: solid 1px var(--light-grey);
}

.login-box .login-content .actions-box .half.links a, .login-box .login-content .text-link {
	color: var(--aqua);
	display: block;
	margin-bottom: 16px;
}

.login-box .login-content .actions-box .half.links a:hover, .login-box .login-content .text-link:hover {
	opacity: 0.6;
}

.login-box .login-content .actions-box .half.links a:last-child {
	margin-bottom:0;
}

.login-box .login-content .actions-box .input-box {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.login-box .login-content .actions-box .input-box .checkbox-style {
	min-width: 20px;
}

@media only screen and (max-width: 420px) {
	.login-box .login-content {
		width: 100%;
	}

	.login-box .login-content .actions-box {
		display:inline-block;
	}

	.login-box .login-content .actions-box .half {
		width: 100%;
	}

	.login-box .login-content .actions-box .half .button {
		margin: 0 0 32px;
	}

	.login-box .login-content .actions-box.center .half .button {
		margin: 0;
	}

	.login-box .login-content .actions-box .half.links {
		text-align: center;
		padding: 0;
		display: flex;
		justify-content: space-between;
		text-align: left;
		border: 0;
	}

	.login-box .login-content .actions-box .half.links.rescue {
		justify-content: center;
	}

	.login-box .login-content .actions-box .half.links a { 
		display: flex;
		align-items: center;
	}

	.login-box .login-content .actions-box .half.links a:last-child {
		text-align: right;
		border-left: solid 1px var(--light-grey);
		padding-left: 16px;
	}

	.login-box .login-content .actions-box .input-box {
		justify-content: center;
		margin-bottom: 0;
		padding-right: 16px;
	}
}


/* ---------------------- PAGE CONTENTS - List ---------------------- */
.block-list {
	position: relative;
    display: block;
    max-width: 1200px;
    margin: 0 auto;
}

.block-list .list-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	background-color: var(--white);
	padding: 24px;
	margin-bottom: 8px;
	position: relative;
}

input.tap-button {
	display: none;
}

.block-list .list-item a.left-link {
	display: flex;
	cursor: pointer;
}

.block-list .list-item a.left-link.full {
	width: 100%;
}

.block-list .list-item a.left-link:hover {
	opacity: 0.6;
}

.block-list .list-item .left-content {
	flex: 1 0;
	display: flex;
	align-items: center;
}

.block-list .list-item .left-icon {
	min-width: 40px;
	max-width: 40px;
	filter: var(--grey-filter);
	margin-right: 16px;
}

.block-list .list-item .left-img {
	min-width: 64px;
	max-width: 64px;
	margin-right: 16px;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

.block-list .list-item .left-content .cat {
	display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	line-height: 0.9em;
    height: 40px;
    width: 40px;
	min-width: 40px;
    color: var(--white);
    font-size: 0.9em;
    font-weight: 700;
    margin-right: 16px;
	-webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px;
}

.block-list .list-item .left-content .cat.M {
	background-color: var(--blue-color);
}

.block-list .list-item .left-content .cat.F {
	background-color: var(--pink-color);
}

.block-list .list-item .left-content .inside-content, .block-list .list-item a.left-link .inside-content {
	display: block;
}

.block-list .list-item .left-content name, .block-list .list-item a.left-link name {
	display: block;
	font-size: 1.1em;
	font-weight: 700;
    font-style: italic;
	color: var(--black);
    font-family: "Poppins", sans-serif;
	line-height: 1.1em;
}

.block-list .list-item .left-content .scadenze-label {
	width: 100%;
	display: block;
}

.block-list .list-item .left-content .scadenze-label label {
	display: inline-block;
	font-size: 0.8em;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	padding: 4px 8px;
	margin-bottom: 8px;
	margin-right: 4px;
}

.block-list .list-item .left-content .scadenze-label label.in-scadenza {
	color: var(--black-soft);
	background-color: var(--alert-color);
}

.block-list .list-item .left-content .scadenze-label label.scaduto {
	color: var(--white);
	background-color: var(--error-color);
}

.block-list .list-item .left-content span, .block-list .list-item a.left-link span {
	color: var(--dark-grey);
	font-size: 0.9em;
}

.block-list .list-item .left-content .date, .block-list .list-item a.left-link .date, .comunicati-date {
	display: block;
	color: var(--main-color);
	font-size: 0.9em;
	font-style: italic;
	margin-bottom: 4px;
}

.block-list .list-item.read .left-content .date, .block-list .list-item.read a.left-link .date, .block-list .list-item.read .left-content name, .block-list .list-item.read a.left-link name {
	color: var(--dark-grey) !important;
}

.block-list .list-item .action-content {
	display: inline-flex;
	justify-content: flex-end;
    align-items: center;
}

.block-list .list-item .action-content .icon-buttons {
	display: flex;
}

.block-list .list-item .action-content .action {
	margin-left: 8px;
    align-items: center;
    display: flex;
    padding: 4px;
}

.block-list .list-item .action-content .action:hover .icon {
	transform: scale(1.15); -webkit-transform: scale(1.15);
}

.block-list .list-item .action-content .action .icon {
	display: block;
	filter: var(--dark-grey-filter);
	height: 24px;
}

.block-list .list-item .action-content .action .icon.red {
	filter: var(--error-color-filter);
}

.block-list .list-item .switch {
	margin-right: 8px;
}

@media only screen and (max-width: 720px) {
	.block-list .list-item {
		flex-wrap: wrap;
		padding: 16px;
	}

	.block-list .list-item .left-icon {
		min-width: 32px;
		max-width: 32px;
	}

	.block-list .list-item .left-content, .block-list .list-item .action-content {
		width: 100%;
	}

	.block-list .list-item .action-content {
        border-top: solid 1px var(--grey);
		justify-content: space-between;
	}

	.block-list .list-item .action-content.static {
        margin-top: 16px;
		padding-top: 16px;
	}

	.block-list .list-item .left-content name {
		font-size: 1.0em;
	}
	
	input.tap-button[type="checkbox"] {
		display: block;
        appearance: none;
        position: absolute;
        left: 0;
        right: 0;
        height: 100%;
        -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
        box-shadow: none;
		border: none;
		z-index: 10;
	
		& ~ .action-content {
			height: 0;
			max-height: 0;
			opacity: 0;
			margin: 0;
			padding: 0;
			overflow: hidden;
			transition: max-height 0.5s opacity 0.5s;
		}
	
		&:checked ~ .action-content {
			display: inline-flex;
			max-height: 200px;
			height: auto;
			margin-top: 16px;
			padding-top: 16px;
			opacity: 1;
			z-index: 20;
		}
	}
}


/* ---------------------- PAGE CONTENTS - Paginazione ---------------------- */
.paginazione {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.paginazione .left-block {
	display: flex;
	align-items: center;
	justify-content: end;
	flex: 1 0;
}

.paginazione .right-block {
	display: flex;
	align-items: center;
	justify-content: start;
	flex: 1 0;
}

.paginazione .left-block .paginazione-list, .paginazione .right-block .paginazione-list {
	border: 0;
}

.paginazione-list {
	list-style: none;
	padding: 0 8px;
	margin: 16px 0 0 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	border: solid 1px var(--grey);
}

.paginazione-list li {
	display: inline-block;
	position: relative;
	margin: 0 2px;
}

.paginazione-list li a {
	display: block;
	color: var(--dark-grey);
	line-height: 40px;
	padding: 0 8px;
}

.paginazione-list li a:hover {
	transform: scale(1.3); -webkit-transform: scale(1.3);
}

.paginazione-list li a.active {
	opacity: 0.3;
	cursor: default;
}

.paginazione-list li a.active:hover {
	transform: scale(1); -webkit-transform: scale(1);
}

.paginazione-list li a.icon-arrow img {
	display: block;
	height: 16px;
	filter: var(--dark-grey-filter);
}

.paginazione-list li a.icon-arrow.fwd img {
	transform: rotate(180deg); -webkit-transform: rotate(180deg);
}


/* ---------------------- PAGE CONTENTS - Title Nav ---------------------- */
.title-nav {
	position: relative;
	/* max-width: 1200px; */
	margin: 0 auto 24px;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 24px;
    border-bottom: solid 1px var(--grey);
}

.title-nav .title {
	display: flex;
	align-items: center;
	flex: 1 0;
	float: left;
	height: auto;
}

.title-nav .title .back-arrow {
	filter: var(--dark-grey-filter);
    height: 24px;
	padding-right: 16px;
    display: flex;
    align-items: center;
}

.title-nav .title .back-arrow:hover {
	animation: arrow-float 0.4s alternate infinite; -webkit-animation: arrow-float 0.4s alternate infinite;
}

@keyframes arrow-float {
    0% {transform: translateX(0px); -webkit-transform: translateX(0px);}
    100% {transform: translateX(-4px); -webkit-transform: translateX(-4px);}
}

.title-nav .title .back-arrow img {
	display: block;
	height: 20px;
}

.title-nav .title span {
	text-transform: uppercase;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--dark-grey);
    font-size: 1.0em;
}

.title-nav .button {
	float: right;
}

.title-nav .search-box {
	height: 48px;
    position: absolute;
    right: 152px;
	display: flex;
    justify-content: space-between;
}

.title-nav .search-box .input-container {
	width: 280px;
	display: block;
}

.title-nav .search-box input {
	width: 100%;
    background-image: url(../img/icon-search.svg);
    background-repeat: no-repeat;
    background-size: 24px;
    background-position: 12px center;
    padding-left: 40px;
}

.title-nav .search-box .button {
	padding: 0;
	width: 48px;
	margin-right: 16px;
}

.title-nav .search-box .button .icon {
	margin-right: 0;
}

.search-content {
	width: 100%;
	margin-top: 24px !important;
	overflow: hidden;
	opacity: 1;
}

.search-content.closed {
	height: 0;
    opacity: 0;
    margin: 0 !important;
	padding: 0 !important;
}

@media only screen and (max-width: 1200px) {
	.title-nav {
		margin: 8px auto 24px;
	}
}

@media only screen and (max-width: 960px) {
	.title-nav .button {
		padding: 0;
		width: 48px;
	}

	.title-nav .button span {
		display: none;
	}

	.title-nav .button .icon {
		margin-right: 0;
	}

	.title-nav .search-box {
		right: 64px;
	}

	.title-nav .search-box .input-container {
		width: 240px;
	}
}

@media only screen and (max-width: 720px) {
	.title-nav .title span {
		font-size: 0.9em;
	}

	.title-nav .search-box {
		position: relative;
		width: 100%;
		right: 0;
		margin-top: 16px;
	}

	.title-nav .search-box .input-container {
		width: auto;
		flex: 1 0;
	}
}


/* ---------------------- PAGE CONTENTS - Status Box ---------------------- */
.status-box {
	padding: 0 12px 24px;
}

.status-box .content {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	background-color: var(--light-grey);
	color: var(--dark-grey);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	padding: 16px;
}

.status-box .content .right-content label {
	font-weight: 500;
	margin-left: 4px;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	display: inline-block;
    padding: 4px 12px;
	background-color: var(--grey);
	color: var(--black-soft);
}

.status-box .content .right-content label.in-scadenza {
	color: var(--black-soft);
    background-color: var(--alert-color);
}

.status-box .content .right-content label.scaduto {
	color: var(--white);
    background-color: var(--error-color);
}

@media only screen and (max-width: 720px) {
	.status-box {
		padding: 0 0 24px;
	}
}


/* ---------------------- PAGE CONTENTS - Contatti Buttons ---------------------- */
.contatti-buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 24px;
}

.contatti-buttons .button {
	margin: 0 12px 24px;
}


/* ---------------------- PAGE CONTENTS - Wallet ---------------------- */
.wallet-saldo {
	padding: 0 12px 24px;
}

.wallet-saldo .content {
	display: flex;
	justify-content: space-between;
	align-items: center;
    width: 100%;
	color: var(--dark-grey);
}

.wallet-saldo .content .text {
	flex: 1 0;
	display: flex;
}

.wallet-saldo .content .saldo {
	color: var(--black-soft);
	font-weight: bold;
	font-size: 1.4em;
	display: flex;
	align-items: center;
}

.wallet-saldo .content .saldo .edit-button {
	filter: var(--dark-grey-filter);
	display: block;
	margin-left: 12px;
	width: 24px;
}

.wallet-saldo .content .saldo a:hover .edit-button {
	opacity: 0.6;
}

.wallet-saldo .content .saldo-edit {
	display: flex;
	align-items: center;
	    justify-content: space-between;
}

.wallet-saldo .content .saldo-edit .form-field {
	margin-top: 0;
	width: 160px;
	flex: 1 0;
	text-align: right;
}

.wallet-saldo .content .saldo-edit .button {
	margin-left: 8px;
}

.wallet-saldo .content .saldo-edit .button .icon {
	margin-right: 0px;
}

.wallet-saldo .content .hidden {
	display: none;
}

.wallet-movimenti {
	padding: 0;
	list-style: none;
	margin: 0;
}

.wallet-movimenti li {
	border-bottom: solid 1px var(--grey);
	padding-bottom: 16px;
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.wallet-movimenti li:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.wallet-movimenti time {
	color: var(--dark-grey);
}

.wallet-movimenti time::after {
	content: " • ";
	margin: 0 8px;
}

.wallet-movimenti name {
	font-weight: bold;
}

.wallet-movimenti li.totale {
	border: 0;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	background-color: var(--light-grey);
	padding: 16px;
	color: var(--dark-grey);
	margin-bottom: 24px;
}

.wallet-movimenti li.totale .money::before {
	display: none;
}

.wallet-movimenti li .money {
	font-weight: 700;
	color: var(--true-color);
	font-size: 1.1em;
	display: flex;
	margin-left: 16px;
}

.wallet-movimenti li .money.minus {
	color: var(--error-color);
}

.wallet-movimenti li .money.total{
	color: var(--black);
}

.wallet-movimenti li .money::before {
	content: "+ €";
	margin-right: 4px;
}

.wallet-movimenti li .money.minus::before {
	content: "- €";
}

@media only screen and (max-width: 720px) {
	.wallet-saldo .content {
		justify-content: center;
		flex-wrap: wrap;
	}

	.wallet-saldo .content .text {
		flex: auto;
		width: 100%;
		justify-content: center;
		margin-bottom: 24px;
	}

	.wallet-saldo .content .saldo, .wallet-saldo .content .saldo-edit {
		width: 100%;
		justify-content: center;
	}

	.wallet-movimenti li {
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
	}

	.wallet-movimenti li .money {
		margin: 8px 0 0;
		width: 100%;
		justify-content: center;
	}

	.wallet-movimenti time {
		display: block;
	}

	.wallet-movimenti time::after {
		display: none;
	}
}


/* ---------------------- PAGE CONTENTS - Prestazioni ---------------------- */
.prestazioni {
	padding: 0 12px 24px;
	font-size: 0.9em;
}

.prestazioni .content {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	background-color: var(--light-grey);
	color: var(--dark-grey);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	padding: 24px 16px;
}

.prestazioni .content .block-title {
	width: 100%;
}

.prestazioni .content .row {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: solid 1px var(--grey);
    padding-bottom: 12px;
    margin-bottom: 12px;
	color: var(--black-soft);
}

.prestazioni .content .row:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.prestazioni .content .row .left-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.prestazioni .content .row .type {
	background-color: var(--grey);
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	padding: 4px 12px;
	font-weight: bold;
	font-style: italic;
	font-size: 1.1em;
	margin-right: 12px;
	flex: 1 0;
	text-align: center;
}

.prestazioni .content .row data {
	font-weight: bold;
}

.prestazioni .content .row data::after {
	content:"•";
	margin: 0 8px;
}

.prestazioni .content .row time {
	font-weight: bold;
	margin-left: 16px;
}

.prestazioni.gold .content, .prestazioni.silver .content, .prestazioni.bronze .content {
	background-color: var(--white);
	border: solid 3px var(--grey);
}

.prestazioni.gold .content .block-title span, .prestazioni.silver .content .block-title span, .prestazioni.bronze .content .block-title span {
	font-weight: 700;
}

.prestazioni.gold  .content {
	border-color: var(--gold-color);
}

.prestazioni.gold .content .block-title {
	color: var(--gold-color);
}

.prestazioni.gold .content .block-title .title-icon {
	filter: var(--gold-color-filter);
}

.prestazioni.gold .content .row .type {
	background-color: var(--gold-color);
	color: var(--white);
}

.prestazioni.silver .content {
	border-color: var(--silver-color);
}

.prestazioni.silver .content .block-title {
	color: var(--silver-color);
}

.prestazioni.silver .content .block-title .title-icon {
	filter: var(--silver-color-filter);
}

.prestazioni.silver .content .row .type {
	background-color: var(--silver-color);
	color: var(--white);
}

.prestazioni.bronze .content {
	border-color: var(--bronze-color);
}

.prestazioni.bronze .content .block-title {
	color: var(--bronze-color);
}

.prestazioni.bronze .content .block-title .title-icon {
	filter: var(--bronze-color-filter);
}

.prestazioni.bronze .content .row .type {
	background-color: var(--bronze-color);
	color: var(--white);
}

.prestazioni .content-link {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-top: 12px;
}

.prestazioni .content-link .link {
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--dark-grey);
}

.prestazioni .content-link .link:hover {
	opacity: 0.6;
}

.prestazioni .content-link .link .icon {
	filter: var(--dark-grey-filter);
	width: 18px;
	margin-left: 8px;
	transform: rotate(180deg); -webkit-transform: rotate(180deg);
}

@media only screen and (max-width: 720px) {
	.prestazioni {
		padding: 0 0 24px;
	}

	.prestazioni .content .row {
		justify-content: center;
		flex-wrap: wrap;
	}

	.prestazioni .content .row .left-content {
		display: block;
		width: 100%;
		text-align: center;
		margin-bottom: 8px;
	}

	.prestazioni .content .row .type {
		display: block;
        margin: 0 0 8px;
	}

	.prestazioni .content .row data {
		font-weight: bold;
		display: block;
		margin-bottom: 4px;
	}

	.prestazioni .content .row data::after {
		display: none;
	}

	
}


/* ---------------------- PAGE CONTENTS - Profilo Personale ---------------------- */
.profilo-personale {
	display: flex;
	padding: 0 12px 24px;
}

.profilo-personale .img-profilo img {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	max-width: 160px;
	min-width: 160px;
	margin-right: 24px;
}

.profilo-personale .dati-profilo ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.profilo-personale .dati-profilo ul li {
	margin-bottom: 16px;
}

.profilo-personale .dati-profilo ul li:last-child {
	margin-bottom: 0px;
}

.profilo-personale .dati-profilo ul label {
	display: block;
	font-size: 0.8em;
	color: var(--dark-grey);
}

@media only screen and (max-width: 720px) {
	.profilo-personale {
		flex-wrap: wrap;
		padding: 0 0 24px;
	}

	.profilo-personale .img-profilo {
		flex: auto;
		display: flex;
		width: 100%;
		justify-content: center;
		margin-bottom: 24px;
	}

	.profilo-personale .img-profilo img {
		margin-right: 0;
	}

	.profilo-personale .dati-profilo {
		width: 100%;
		text-align: center;
	}
}


/* ---------------------- PAGE CONTENTS - Lista Atleti ---------------------- */
.atleti .col {
	margin-bottom: 24px;
}

.atleti-item {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	background-color: var(--white);
	padding: 16px;
	height: 100%;
	display: flex;
	align-items: flex-start;
}

.atleti-item .img-profile {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	max-width: 160px;
	min-width: 160px;
	margin-right: 16px;
}

.atleti-item .dati-profilo {
	padding: 0;
	margin: 0;
	list-style: none;
	width: stretch;
}

.atleti-item .dati-profilo hr {
	margin: 16px 0;
}

.atleti-item .dati-profilo li {
	margin-bottom: 8px;
	display: block;
}

.atleti-item .dati-profilo li:last-child {
	margin-bottom: 0px;
}

.atleti-item .dati-profilo label {
	display: block;
	font-size: 0.8em;
	color: var(--dark-grey);
}

.atleti-item .dati-profilo .cat {
	color: var(--white);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	font-weight: 700;
	padding: 4px 8px;
	display: inline-block;
	font-size: 0.8em;
}

.atleti-item .dati-profilo .cat.M {
	background-color: var(--blue-color);
}

.atleti-item .dati-profilo .cat.F {
	background-color: var(--pink-color);
}

@media only screen and (max-width: 1024px) {
	.atleti-item .img-profile {
		max-width: 96px;
		min-width: 96px;
	}
}

@media only screen and (max-width: 720px) {
	.atleti .col {
		margin-bottom: 8px;
	}

	.atleti-item .img-profile {
		max-width: 64px;
		min-width: 64px;
	}
}


/* ---------------------- PAGE CONTENTS - Convenzioni ---------------------- */
.profile-center-title {
	display: block;
	width: 100%;
	text-align: center;
	border-bottom: solid 1px var(--grey);
	padding-bottom: 24px;
	margin-bottom: 24px;
	color: var(--dark-grey);
}

.profile-center-title .icon {
	width: 40px;
	margin-bottom: 8px;
	filter: var(--main-color-filter);
}

.profile-center-title name {
	display: block;
	font-weight: bold;
	color: var(--black);
	font-style: italic;
	font-size: 1.4em;
	margin-bottom: 8px;
}

.convenzioni-contatti {
	list-style: none;
	padding: 0;
	margin: 0;
}

.convenzioni-contatti li {
	margin-bottom: 16px;
}

.convenzioni-contatti li:last-child {
	margin-bottom: 0;
}

.convenzioni-contatti a {
	display: flex;
	align-items: center;
	color: var(--black);
}

.convenzioni-contatti a:hover {
	opacity: 0.6;
}

.convenzioni-contatti a .icon {
	filter: var(--main-color-filter);
	width: 20px;
	margin-right: 8px;
}

.grey-general-box {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	background-color: var(--light-grey);
	padding: 16px;
	width: 100%;
	display: block;
}


/* ---------------------- PAGE CONTENTS - Classifica ---------------------- */
table.classifica {
	width: 100%;
}

table.classifica tbody th, table.classifica tbody td {
	padding: 12px;
	text-align: right;
}

table.classifica tbody th:first-child, table.classifica tbody td:first-child, table.classifica tbody th:last-child, table.classifica tbody td:last-child {
	padding: 12px 0;
}

table.classifica tbody th:first-child, table.classifica tbody td:first-child, table.classifica tbody th:nth-child(2), table.classifica tbody td:nth-child(2) {
	text-align: left;
}

table.classifica .name, table.classifica .punti {
	font-weight: bold;
}

table.classifica .position {
	display: inline-flex;
	align-items: center;
    background-color: var(--light-grey);
	color: var(--black);
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
    padding: 8px 12px;
    font-weight: bold;
    font-style: italic;
}

table.classifica .position .icon {
	display: block;
	width: 24px;
	filter: var(--white-filter);
	margin-right: 8px;
}

table.classifica tbody tr:nth-child(2) .position {
	background-color: var(--gold-color);
	color: var(--white);
	font-size: 1.2em;
}

table.classifica tbody tr:nth-child(3) .position {
	background-color: var(--silver-color);
	color: var(--white);
	font-size: 1.2em;
}

table.classifica tbody tr:nth-child(4) .position {
	background-color: var(--bronze-color);
	color: var(--white);
	font-size: 1.2em;
}

.tab-input.pos {
	width: 112px;
}

.tab-input.tempo {
	width: 112px;
}

@media only screen and (max-width: 720px) {
	table.classifica .position .icon {
		width: 18px;
	}
}


/* ---------------------- PAGE CONTENTS - Gare Utente ---------------------- */
.gare-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.gare-list .gara-item {
	display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 16px;
    background-color: var(--light-grey);
    border-radius: 8px;
    padding: 16px;
	border: solid 1px var(--grey);
}

.gare-list.white-bgd .gara-item {
	background-color: var(--white);
}

.gare-list.page .gara-item:last-child {
	margin-bottom: 0;
}

.gare-list .gara-item.finished {
	
}

.gare-list .gara-item .content {
	flex: 1 0;
	margin-right: 16px;
}

.gare-list .gara-item .data {
	position: relative;
	flex:1 0;
	background-color: var(--black);
	color: var(--white);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	text-transform: uppercase;
	margin-right: 16px;
	margin-top: -20px;
	max-width: 54px;
	min-width: 54px;
    padding: 16px 0 0;
    line-height: 1.2em;
    font-size: 0.9em;
}

.gare-list .gara-item .data::after {
	content: "";
	width: 100%; height: 0;
	border-style: solid;
	border-width: 0px 24px 8px 24px;
	border-color: transparent transparent var(--light-grey) transparent;
	transform: rotate(0deg);
	margin-top: 12px;
}

.gare-list .gara-item .data span {
	width: 100%;
	text-align: center;
}

.gare-list .gara-item .data span:first-child {
	font-size: 1.3em;
}

.gare-list .gara-item title {
	display: block !important;
	font-style: italic;
	font-weight: bold;
	margin-bottom: 4px;
}

.gare-list .gara-item .km {
	display: block;
	margin-bottom: 16px;
}

.gare-list .gara-item .km span {
	display: inline-block;
	background-color: var(--main-color);
	color: var(--white);
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	padding: 4px 8px;
    margin-right: 8px;
    font-size: 0.9em;
    font-weight: bold;
    font-style: italic;
}

.gare-list .gara-item time, .gare-list .gara-item .location, .gare-list .gara-item .scadenza {
	display: flex;
	align-items: center;
	width: 100%;
	color: var(--dark-grey);
	margin-bottom: 4px;
}

.gare-list .gara-item time .icon, .gare-list .gara-item .location .icon, .gare-list .gara-item .scadenza .icon {
	width: 18px;
	margin-right: 12px;
	filter: var(--dark-grey-filter);
}

.gare-list .gara-item.finished a {
	display: flex;
	align-items: start;
	justify-content: space-between;
	color: var(--black);
	width: 100%;
}

.gare-list .gara-item.finished .data {
	background-color: var(--grey);
}

.gare-list .gara-item .action-content {
	display: inline-flex;
	justify-content: flex-end;
    align-items: center;
}

.gare-list .gara-item .action-content .action {
	margin-left: 8px;
    align-items: center;
    display: flex;
    padding: 4px;
}

.gare-list .gara-item .action-content .icon-buttons {
	display: flex;
}

.gare-list .gara-item .action-content .action:hover .icon {
	transform: scale(1.15); -webkit-transform: scale(1.15);
}

.gare-list .gara-item .action-content .action .icon {
	display: block;
	filter: var(--dark-grey-filter);
	height: 24px;
}

.gare-list .gara-item .action-content .action .icon.red {
	filter: var(--error-color-filter);
}

.advice-block {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	background-color: var(--light-grey);
	display: block;
	padding: 24px;
}

.advice-block .download-link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: var(--black);
}

.advice-block .download-link:hover {
	opacity: 0.6;
}

.advice-block .download-link .icon {
	width: 24px;
    margin-right: 12px;
    filter: var(--black-filter);
}

@media only screen and (max-width:860px) {
	.gare-list .gara-item {
		flex-wrap: wrap;
		justify-content: center;
	}

	.gare-list .gara-item .content {
		width: 100%;
		flex: auto;
		margin-bottom: 24px;
	}

	.gare-list .gara-item .data {
		min-width: 100% !important;
		max-width: 100% !important;
		flex: auto;		       
        flex-wrap: nowrap;
        justify-content: center;
        margin: 0 0 16px;
		padding: 10px;
		-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	}

	.gare-list .gara-item .data::after {
		display: none;
	}

	.gare-list .gara-item .data span, .gare-list .gara-item .data span:first-child {
		width: auto;
		font-size: 1.0em;
		margin: 0 4px;
	}
}

@media only screen and (max-width: 720px) {
	.gare-list .gara-item.finished a {
		flex-wrap: wrap;
		justify-content: center;
	}
}


/* ---------------------- PAGE CONTENTS - Risultati ---------------------- */
table.risultati {
	width: 100%;
}

table.risultati tbody th, table.risultati tbody td {
	padding: 12px;
	text-align: right;
}

table.risultati tbody th:first-child, table.risultati tbody td:first-child, table.risultati tbody th:last-child, table.risultati tbody td:last-child {
	padding: 12px 0;
}

table.risultati tbody th:first-child, table.risultati tbody td:first-child, table.risultati tbody th:nth-child(2), table.risultati tbody td:nth-child(2) {
	text-align: left;
}

table.risultati tbody th:first-child, table.risultati tbody td:first-child {
	width: 48px;
}

table.risultati.auto-width tbody th:first-child, table.risultati.auto-width tbody td:first-child {
	width: auto;
}

table.risultati .name, table.risultati .punti {
	font-weight: bold;
	font-size: 1.1em;
}

table.risultati .position {
	display: inline-flex;
	align-items: center;
    background-color: var(--light-grey);
	color: var(--black);
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
    padding: 8px 12px;
    font-weight: bold;
    font-style: italic;
}

table.risultati .cat {
	display: flex;
    justify-content: center;
    align-items: center;
	text-align: center;
	line-height: 0.9em;
    height: 40px;
    width: 40px;
	min-width: 40px;
    color: var(--white);
    font-size: 0.9em;
    font-weight: 700;
	-webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px;
}

table.risultati .cat.M {
	background-color: var(--blue-color);
}

table.risultati .cat.F {
	background-color: var(--pink-color);
}

table.risultati .delete-icon {
	filter: var(--error-color-filter);
	width: 24px;
}

table.risultati .link {
	display: flex;
    align-items: center;
    justify-content: end;
}

table.risultati .link:hover {
	opacity: 0.6;
}

.risultati-top {
	display: flex;
	align-items: start;
	justify-content: space-between;
	border-bottom: solid 1px var(--grey);
	padding-bottom: 24px;
	margin-bottom: 24px;
}

.risultati-top .left-content {
	flex: 1 0;
}

.risultati-top .left-content title {
	font-weight: bold;
	font-style: italic;
	font-size: 1.3em;
	display: block;
}

.risultati-top .left-content .sub-content {
	display: block;
}

.risultati-top .left-content .sub-content .km {
	display: inline-block;
    background-color: var(--light-grey); -webkit-border-radius: 4px; -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 4px 8px;
    margin-right: 8px;
    font-size: 0.9em;
    font-weight: bold;
    font-style: italic;
	margin: 8px 8px 0 0;
}

.risultati-top .left-content .scadenza {
	display: inline-block;
    background-color: var(--light-grey);
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
    padding: 4px 8px;
    margin: 8px 8px 0 0;
    font-size: 0.9em;
}

.risultati-top .left-content .scadenza.scaduto {
	background-color: var(--error-color);
	color: var(--white);
}

.risultati-top .left-content .scadenza.iscritto {
	background-color: var(--true-color);
	color: var(--white);
}

.risultati-top .action-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: end;
}

.risultati-top .action-content .wallet {
	margin-bottom: 8px;
	display: flex;
	justify-content: end;
	width: 100%;
}

.risultati-top .action-content .wallet:hover {
	opacity: 0.6;
}

.risultati-top .action-content .wallet .saldo {
	display: flex;
	align-items: center;
	color: var(--dark-grey);
	font-size: 0.9em;
}

.risultati-top .action-content .wallet .saldo .icon {
	width: 20px;
	margin-right: 10px;
	filter: var(--dark-grey-filter);
}

.risultati-top .action-content .wallet .value {
	font-weight: bold;
	color: var(--black);
	margin-left: 8px;
}

.risultati-top .action-content .button {
	display: inline-flex;
}

.gara-dettaglio {
	display: flex;
}

.gara-dettaglio .img-content {
	min-width: 320px;
	padding: 0 24px 24px 0;
	display: flex;
	justify-content: center;
	align-items: start;
}

.gara-dettaglio .img-content img {
	display: block;
	width: 100%;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

.gara-dettaglio .gara-info {
	margin-bottom: 24px;
}

.gara-dettaglio .gara-info .row {
	display: block;
	margin-bottom: 16px;
	width: 100%;
}

.gara-dettaglio .gara-info .row:last-child {
	margin-bottom: 0;
}

.gara-dettaglio .gara-info hr {
	width: 100%;
}

.gara-dettaglio .gara-info .row {
	width: 100%;
}

.gara-dettaglio .gara-info .row label {
	display: block;
    font-size: 0.8em;
    color: var(--dark-grey);
	width: 100%;
	margin-bottom: 4px;
}

.gara-dettaglio .gara-info .row .link {
	color: var(--black);
}

.gara-dettaglio .gara-info .row .link:hover {
	opacity: 0.6;
}

.gara-dettaglio .gara-info .row p:last-child {
	margin-bottom: 0;
}

.gara-doc {
	display: flex;
	align-items: center;
	color: var(--black);
}

.gara-doc:hover {
	opacity: 0.6;
}

.gara-doc .icon {
	min-width: 32px;
    max-width: 32px;
    filter: var(--grey-filter);
    margin-right: 10px;
}

.add-box {
	display: flex;
	justify-content: space-between;
	background-color: var(--light-grey);
    padding: 24px;
    -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

.add-box .left-content {
	padding-right: 16px;
	flex: 1 0;
}

.add-box .left-content .search-input {
	width: 100%;
}

.add-box .left-content .quota-input {
	width: 120px;
	margin-right: 16px;
}

.add-box .left-content .quota-input.auto-width {
	width: 100%;
}

.add-box .right-content .button {
	padding: 0 12px;
}

.add-box .right-content .button {
	display: inline-flex;
}

.export-link {
	display: flex;
	justify-content: center;
	width: 100%;
	border-top: solid 1px var(--grey);
    padding-top: 24px;
}

.export-link .link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	color: var(--black);
}

.export-link .link:hover {
	opacity: 0.6;
}

.export-link .link .icon {
	width: 24px;
	margin-right: 12px;
	filter: var(--black-filter);
}


@media only screen and (max-width: 1024px) {
	.gara-dettaglio .img-content {
		min-width: 240px;
	}
}


@media only screen and (max-width: 720px) {
	.risultati-top {
		flex-wrap: wrap;
		justify-content: center;
	}

	.risultati-top .left-content title {
		font-size: 1.15em;
	}

	.risultati-top .left-content {
		flex: auto;
		width: 100%;
		margin-bottom: 16px;
	}

	.risultati-top .action-content {
		width: 100%;
		justify-content: start;
		margin-top: 16px;
	}

	.risultati-top  .action-content .wallet {
		justify-content: start;
	}

	.gara-dettaglio {
		flex-wrap: wrap;
	}

	.gara-dettaglio .img-content {
		width: 100%;
		padding: 0 0 24px;
	}

	.gara-dettaglio .img-content img {
		width: 320px;
	}

	.gara-dettaglio .gara-info {
		width: 100%;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.gara-dettaglio .gara-info .row {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.gara-dettaglio .gara-info .row label {
		text-align: center;
	}

	.gara-doc {
		justify-content: center;
	}

	.add-box {
		padding: 16px;
	}

	.add-box .left-content .quota-input {
		margin: 0 0 16px 0;
		width: 100%;
	}

	.add-box .left-content .quota-input:last-child {
		margin: 0;
	}
}

@media only screen and (max-width: 360px) {
	.gara-dettaglio .img-content img {
		width: 100%;
	}
}


/* ---------------------- PAGE CONTENTS - Cat Box ---------------------- */
.cat-box-list {
	padding: 16px 16px 8px;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	background-color: var(--light-grey)
}

.cat-box-list li {
	display: inline-block;
	margin: 0 8px 8px 0;
}

.cat-box-list .cat-box {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	border: solid 1px var(--dark-grey);
	display: flex;
	align-items: center;
	padding: 8px 8px 8px 12px;
	font-size: 0.9em;
}

.cat-box-list .cat-box a {
	display: flex;
	align-items: center;
}

.cat-box-list .cat-box a:hover {
	opacity: 0.6;
}

.cat-box-list .cat-box a .icon {
	filter: var(--dark-grey-filter);
	width: 24px;
	margin-left: 8px;
}

.cat-edit {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
}

.cat-edit .left-content {
	display: flex;
	width: 50%;
}

.cat-edit .left-content .input {
	width: 100%;
}

.cat-edit .left-content .button {
	margin: 0 16px;
}

.cat-edit .left-content .button .icon {
	margin: 0;
}

.cat-edit .right-content .button .icon {
	width: 16px;
}

@media only screen and (max-width: 720px) {
	.cat-edit .left-content {
		width: auto;
	}

	.cat-edit .button {
		padding: 0 16px;
	}

	.cat-edit .right-content .button.reload span {
		display: none;
	}

	.cat-edit .right-content .button.reload .icon {
		margin: 0;
	}
}


/* ---------------------- PAGE CONTENTS - Dashboard ---------------------- */
.columns.half.dash-half {
	padding: 0;
}

.columns.half.dash-half .col:first-child  {
	width: 50%;
	padding-left: 0;
}

.columns.half.dash-half .col:last-child {
	width: 50%;
	padding-right: 0;
}

@media only screen and (max-width: 720px) {
	.columns.half.dash-half .col:first-child, .columns.half.dash-half .col:last-child {
		width: 100%;
	}
}

.profile-box {
	background-color: var(--black);
	color: white;
	background-image: url(../img/theme/page-title-background.jpg);
    background-position: center;
    background-size: cover;
}

.profile-box .profilo-personale .img-profilo img {
	border: solid 2px var(--main-color);
	box-shadow: 1px 0px 6px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 1px 0px 6px 2px rgba(0, 0, 0, 0.4);
}

.profile-box .profilo-personale .dati-profilo ul label {
	color: var(--main-color);
}

.profilo-personale.dashboard {
	padding: 0;
}

.wallet-saldo.dashboard {
	padding: 0;
}

.classifica-dashboard {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
}

.classifica-dashboard li {
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px var(--grey);
    padding-bottom: 12px;
    margin-bottom: 12px;
    color: var(--black);
	font-size: 0.9em;
}


.classifica-dashboard li:last-child {
	border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.classifica-dashboard li .left-content {
	display: flex;
    justify-content: space-between;
    align-items: center;
}

.classifica-dashboard li .left-content .type {
	background-color: var(--grey);
    -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
    padding: 4px 12px;
    font-weight: bold;
    font-style: italic;
    font-size: 1.1em;
    margin-right: 12px;
    flex: 1 0;
    text-align: center;
}

.classifica-dashboard.podio li:nth-child(1) .left-content .type {
	background-color: var(--gold-color);
	color: var(--white);
}

.classifica-dashboard.podio li:nth-child(2) .left-content .type {
	background-color: var(--silver-color);
	color: var(--white);
}

.classifica-dashboard.podio li:nth-child(3) .left-content .type {
	background-color: var(--bronze-color);
	color: var(--white);
}

.classifica-dashboard li time {
    margin-left: 16px;
}

.box-dashboard-bottom {
	display: block;
	border-top: solid 1px var(--grey);
    padding-top: 24px;
    margin-top: 12px;
}

.box-dashboard-bottom.no-line {
	border-top: 0;
	padding-top: 0;
}

.box-dashboard-bottom .link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dark-grey);
}

.box-dashboard-bottom .link:hover {
	opacity: 0.6;
}

.box-dashboard-bottom .link .icon {
	width: 16px;
	margin-left: 12px;
	filter: var(--dark-grey-filter);
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

.dashboard-comunicati {
	padding: 0;
	margin: 0;
	list-style: none;
}

.dashboard-comunicati li {
	width: 100%;
    border-bottom: solid 1px var(--grey);
    padding-bottom: 24px;
    margin-bottom: 24px;
    color: var(--black);
}

.dashboard-comunicati li:last-child {
	border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

.dashboard-comunicati li time {
	display: inline-block;
    color: var(--white);
	background-color: var(--secondary-color);
	padding: 4px 8px;
    margin-bottom: 8px;
	font-size: 0.9em;
	-webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.dashboard-comunicati li .title {
	display: block;
    font-size: 1.2em;
    font-weight: 700;
    font-style: italic;
    color: var(--black);
    line-height: 1.1em;
	margin-bottom: 8px;
}

.gare-list.dashboard .gara-item .data {
	font-size: 0.8em;
	max-width: 48px;
    min-width: 48px;
}

@media only screen and (max-width: 720px) {
	.gare-list.dashboard .gara-item .data {
		max-width: 100%;
		min-width: 100%;
	}
}


/* ---------------------- FRONTEND - Homepage Hero Section ---------------------- */
.page-title.homepage {
	padding: 250px 0 0;
	background-image: url(../img/theme/hero-section-img.jpg);
	background-color: var(--black);
	text-align: left;
}

.page-title.homepage .hero-section {
	background: #000000;
	background: -webkit-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 90%);
	background: -moz-linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 90%);
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 90%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000", GradientType=0);
	display: flex;
	padding-top: 96px;
}

.page-title.homepage .hero-section .title {
	text-transform: uppercase;
	font-size: 4.0em;
	font-weight: 900;
}

.page-title.homepage .hero-section .subtitle {
	margin-bottom: 24px;
	font-size: 2.4em;
}

.page-title.homepage .hero-section .next-race {
	display: flex;
	align-items: start;
	border-top: solid 1px rgba(255,255,255,0.3);
    padding-top: 24px;
    margin-bottom: 24px;
	font-size: 0.9em;
}

.page-title.homepage .hero-section .next-race .icon {
	width: 40px;
	filter: var(--main-color-filter);
	margin-right: 24px;
}

.page-title.homepage .hero-section .next-race .race-content {
	border-left: solid 1px rgba(255,255,255,0.3);
	padding-left: 24px;
}

.page-title.homepage .hero-section .next-race .race-content span {
	display: block;
	width: 100%;
}

.page-title.homepage .hero-section .next-race .race-content .label {
	color: var(--main-color);
	font-style: italic;
    text-transform: uppercase;
    font-weight: bold;
}

.page-title.homepage .hero-section .next-race .race-content .race-title {
	font-size: 1.4em;
	font-style: italic;
	font-weight: bold;
	margin-bottom: 16px;
}

.page-title.homepage .hero-section .next-race .race-content .detail {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

.page-title.homepage .hero-section .next-race .race-content .detail-icon {
	height: 18px;
	margin-right: 8px;
	filter: var(--main-color-filter);
}

.page-title.homepage .hero-section .next-race .race-content .detail span {
	opacity: 0.6;
}


@media only screen and (max-width: 960px) {
	.page-title.homepage {
		padding: 150px 0 0;
	}

	.page-title.homepage .hero-section .title {
		font-size: 3.2em;
	}

	.page-title.homepage .hero-section .subtitle {
		font-size: 2.0em;
	}

	.page-title.homepage .hero-section .next-race {
		font-size: 0.8em;
	}

	.page-title.homepage .hero-section .next-race .icon {
		width: 36px;
		margin-right: 18px;
	}
}


@media only screen and (max-width: 720px) {
	.page-title.homepage .block-container {
		padding: 0 24px;
	}

	.page-title.homepage .hero-section .next-race .icon {
		margin-right: 12px;
		width: 32px;
	}

	.page-title.homepage .hero-section .next-race .race-content {
		padding-left: 12px;
	}
}


@media only screen and (max-width: 520px) {
	.page-title.homepage {
		padding: 96px 0 0;
	}

	.page-title.homepage .hero-section .title {
		font-size: 2.0em;
	}

	.page-title.homepage .hero-section .subtitle {
		font-size: 1.2em;
	}
}


/* ---------------------- FRONTEND - Homepage Contents ---------------------- */
section.home-contents .title-nav {
	justify-content: center;
}

section.home-contents .title-nav .title {
	flex: none;
}

section.home-contents .title-nav .title span {
	text-transform: none;
	font-style: italic;
	font-weight: bold;
	letter-spacing: normal;
	color: var(--black);
	font-size: 1.4em;
}

section.team {
	padding: 48px 0;
	background-color: var(--black);
    color: white;
    background-image: url(../img/theme/page-title-background.jpg);
    background-position: center;
    background-size: cover;
	background-attachment: fixed;
}

section.team .central-logo {
	display: flex;
	justify-content: center;
	margin-bottom: 48px;
}

section.team .central-logo img {
	display: block;
	height: 64px;
}

section.team .team-title {
	text-align: center;
	display: block;
	border-bottom: solid 1px rgba(255,255,255,0.3);
	padding-bottom: 24px;
	font-size: 1.4em;
}

section.team .box-dashboard-bottom {
	width: 100%;
	border-top: solid 1px rgba(255,255,255,0.3);
	margin-top: 0;
}

section.team .box-dashboard-bottom .link {
	color: var(--main-color);
}

section.team .box-dashboard-bottom .link .icon {
	filter: var(--main-color-filter);
}

.contacts-list {
	list-style: none;
	padding: 16px;
	margin: 0;
	background-color: var(--light-grey);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

.contacts-list li {
	margin-bottom: 14px;
	border-bottom: solid 1px var(--grey);
	padding-bottom: 14px;
}

.contacts-list li:last-child {
	margin-bottom: 0;
	border-bottom: 0;
	padding-bottom: 0;
}

.contacts-list li a {
	display: flex;
	align-items: center;
	color: var(--black);
}

.contacts-list li a:hover {
	opacity: 0.6;
}

.contacts-list li a .icon {
	width: 20px;
	margin: 0 12px 0 0;
	filter: var(--main-color-filter);
}


@media only screen and (max-width: 720px) {
	section.team .columns {
		padding: 0 16px;
	}

	section.team .columns .col:first-child {
		margin-bottom: 48px;
	}
}


/* ---------------------- BLOG ---------------------- */
section.blog-page .title-nav {
    justify-content: center;
}

section.blog-page .title-nav .title {
    flex: none;
}

.blog {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 12px;
}

.blog .item {
	width: 50%;
}

.blog .item:nth-child(odd) {
	padding-right: 12px;
}

.blog .item:nth-child(even) {
	padding-left: 12px;
}

.blog.third .item {
	width: 33.33%;
	padding: 0 12px;
}

.blog.third .item:nth-child(3n+1), .blog.third .item:nth-child(3n+1) {
    padding: 0 12px 0 0;
}

.blog.third .item:nth-child(3n+3), .blog.third .item:nth-child(3n+3) {
    padding: 0 0 0 12px;
}

.blog.full {
	padding: 0;
}

.blog.full .item {
	width: 100%;
	padding: 0;
}

.blog .item .blog-link {
	display: block;
	overflow: hidden;
	position: relative;
	height: 100%;
	background-color: var(--black);
	color: var(--white);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

.blog .item .blog-link:hover .blog-img {
	opacity: 0.7;
}

.blog .item .blog-link .blog-img {
	display: block;
	width: 100%;
}

.blog .item .blog-link .blog-content {
	padding: 16px;
}

.blog .item .blog-link .blog-content time {
	position: absolute;
	top: 8px; left: 8px;
	background-color: var(--secondary-color);
	font-size: 0.8em;
	letter-spacing: 0.15em;
	padding: 4px 8px;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
	box-shadow: 1px 0px 6px 2px rgba(0, 0, 0, 0.4); -webkit-box-shadow: 1px 0px 6px 2px rgba(0, 0, 0, 0.4);
}

.blog .item .blog-link .blog-content title {
	display: block;
	font-style: italic;
	font-weight: bold;
	font-size: 1.4em;
	line-height: 1.1em;
	margin-bottom: 8px;
}

.blog .item .blog-link .blog-content span {
	color: var(--dark-grey);
}

.blog-bottom {
	display: block;
	width: 100%;
	border-top: solid 1px var(--grey);
    padding-top: 24px;
}

.blog-bottom .link {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--dark-grey);
}

.blog-bottom .link:hover {
	opacity: 0.6;
}

.blog-bottom .link .icon {
	width: 16px;
	margin-left: 12px;
	filter: var(--dark-grey-filter);
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
}

.blog-dettaglio {
	display: block;
	margin-bottom: 24px;
}

.blog-dettaglio .blog-img {
	display: block;
	width: 100%;
	margin-bottom: 24px;
	position: relative;
}

.blog-dettaglio .blog-img img {
	display: block;
	width: 100%;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

.blog-dettaglio time {
    position: absolute;
    top: 8px;
    left: 8px;
    background-color: var(--secondary-color);
	color: var(--white);
    font-size: 0.8em;
    letter-spacing: 0.15em;
    padding: 4px 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 1px 0px 6px 2px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 1px 0px 6px 2px rgba(0, 0, 0, 0.4);
}

.blog-dettaglio title {
	display: table;
    font-style: italic;
    font-weight: bold;
    font-size: 2.0em;
    line-height: 1.1em;
    margin-bottom: 24px;
}

.blog-dettaglio .subtitle {
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	background-color: var(--grey);
	padding: 16px;
	font-size: 1.1em;
	font-style: italic;
	margin: 0 0 24px;
}

.blog-dettaglio img {
	display: block;
	width: 100%;
	margin-bottom: 24px;
}

/* .blog-dettaglio .blog-content *:last-child {
	margin-bottom: 0 !important;
} */

.blog-dettaglio .back-link {
	display: inline-flex;
    align-items: center;
    justify-content: start;
    color: var(--dark-grey);
	margin-bottom: 8px;
}

.blog-dettaglio .back-link:hover {
	opacity: 0.6;
}

.blog-dettaglio .back-link .icon {
	width: 16px;
    margin: 0 12px 0 0;
    filter: var(--dark-grey-filter);
}


@media only screen and (max-width: 1024px) {
	.blog.third .item {
		width: 50%;
	}

	.blog.third .item:nth-child(3n+1), .blog.third .item:nth-child(3n+1) {
		padding: 0;
	}
	
	.blog.third .item:nth-child(3n+3), .blog.third .item:nth-child(3n+3) {
		padding: 0;
	}

	.blog.third .item:nth-child(odd) {
		padding: 0 12px 0 0;
	}
	
	.blog.third .item:nth-child(even) {
		padding: 0 0 0 12px;
	}
}


@media only screen and (max-width: 820px) {
	.blog {
		padding: 0 8px;
	}

	.blog .item:nth-child(odd), .blog .item:nth-child(even), .blog.third .item:nth-child(odd), .blog.third .item:nth-child(even) {
		padding: 0;
		width: 100%;
	}

	.blog-dettaglio title {
		font-size: 1.4em;
	}
}


/* ---------------------- GARE - Frontend ---------------------- */
.gare-front {
	background-color: var(--black);
	color: var(--white);
	background-image: url(../img/theme/page-title-background.jpg);
    background-position: center;
    background-size: cover;
}

.gare-front-title {
	text-align: center;
	font-size: 1.2em;
	margin-bottom: 24px;
	color: var(--main-color);
}

.gare-front hr {
	border-color: rgba(255, 255, 255, 0.3);
}

.gare-front-list {
	padding: 0;
	margin: 0 0 24px;
	list-style: none;
	border: solid 1px rgba(255, 255, 255, 0.3);
	background-color: rgba(0,0,0,0.3);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	padding: 24px 16px 8px;
}

.gare-front-list li {
	display: flex;
	align-items: center;
	margin-bottom: 16px;
}

.gare-front-list li .icon {
	width: 20px !important;
	margin: 0 12px 0 0 !important;
	-webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important;
	filter: var(--main-color-filter);
	display: inline-block !important;
}

.gare-front .box-dashboard-bottom {
	border-top: solid 1px rgba(255, 255, 255, 0.3);
}

.gare-front .box-dashboard-bottom .link {
	color: var(--main-color);
}

.gare-front .box-dashboard-bottom .link .icon {
	filter: var(--main-color-filter);
}

.gare-front-links {
	padding: 0;
	margin: 0;
	list-style: none;
}

.gare-front-links li {
	margin-bottom: 4px;
}

.gare-front-links li a {
	color: var(--white);
	display: flex;
	align-items: center;
	background-color: rgba(0,0,0,0.7);
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
	padding: 12px 16px;
}

.gare-front-links li a:hover .icon {
	margin: 0 20px 0 0 !important;
}

.gare-front-links li .icon {
	width: 20px !important;
	margin: 0 12px 0 0 !important;
	-webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important;
	filter: var(--main-color-filter);
	display: inline-block !important;
}


/* ---------------------- TEXT PAGE ---------------------- */
.text-page .box-content *:last-child {
	margin-bottom: 0;
}

.text-page .box-content img {
	width: 100%;
	display: block;
	margin-bottom: 24px;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

.text-page .box-content h2 {
	font-size: 1.6em;
}

.text-page .box-content h3 {
	font-size: 1.2em;
}

.text-page .box-content .link {
	color: var(--main-color);
	font-weight: bold;
}

.text-page .box-content .link:hover {
	opacity: 0.7;
}


/* ---------------------- EXTRA CONTENTS - Carousel Box ---------------------- */
.carousel-box {
	display: flex;
	justify-content: center;
	align-items: start;
	padding: 0;
	margin: 0;
	list-style: none;
}

.carousel-box li {
	width: 33%;
	padding: 0px 24px;
}

.carousel-box li a {
	display: block;
}

.carousel-box li a img {
	display: block;
	width: 100%;
	-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
}

.carousel-box li a:hover img {
	transform: scale(1.1); -webkit-transform: scale(1.05);
}

.carousel-box li a .name-text {
	color: var(--black);
	display: block;
	text-align: center;
	margin-top: 16px;
}