/* user.css */
:root {
	--green:#075A00;
	--purple-dark:#551362;
	--purple-purpurea:#8d6795;
	--purple-light: #82448E;
	--cassiopeia-color-primary:#551362;
	--cassiopeia-color-hover:var(--green);
	--body-font-family: "TitilliumRegular";
	--cassiopeia-color-link: #000;
	--cassiopeia-font-weight-headings: 600;
}

body {
	padding-right: 0px !important;
	overflow: unset !important;
}

.offcanvas-body li.current > ul,
.offcanvas-body li.active > ul
  {
   display:block !important;
  }

@font-face {
    font-family: TitilliumRegular;
    src: url(/templates/luoghidellacultura/fonts/TitilliumWeb-Regular.ttf);
}
@font-face {
    font-family: TitilliumBold;
    src: url(/templates/luoghidellacultura/fonts/TitilliumWeb-Bold.ttf);
}
@font-face {
    font-family: TitilliumSemiBold;
    src: url(/templates/luoghidellacultura/fonts/TitilliumWeb-SemiBold.ttf);
}
@font-face {
    font-family: TitilliumLight;
    src: url(/templates/luoghidellacultura/fonts/TitilliumWeb-Light.ttf);
}
.ff-tr{
	font-family: "TitilliumRegular";
}
.fs-20px{
	font-size:1.25rem;
}
.fs-35px{
	font-size:2.1875rem;
}
.text-purple {
	color: var(--purple-dark) !important;
}
h2 {
    font-size: 1.875rem;
}
h3 {
    font-size: 1.1625rem;
}
h4 {
    font-size: 1.125rem;
}
p {
    font-size:1.25rem;
}
.bg-purple-dark {
	background-color: var(--purple-dark);
}
.bg-purple-purpurea{
	background-color: var(--purple-purpurea);
}
.bg-purple-light {
	background-color: var(--purple-light);
}
.opacity-80 {
	opacity: .8 !important;
}
a:hover {
	text-decoration-color: var(--purple-dark);
}
/*a:focus:not(:focus-visible) {
	text-decoration-color: var(--green) !important;
}*/
*:focus {
	outline: 1px solid var(--purple-dark)!important;
    /*text-decoration: underline !important;*/
	outline-offset: 0!important;
	-webkit-box-shadow: 0 0 0 0.1rem rgb(240, 137, 30, 0.25)!important;
    box-shadow: 0 0 0 0.1rem rgb(240, 137, 30, 0.25)!important;
}
*:focus:not(:focus-visible) {
    outline:none !important;
	-webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
    box-shadow: none!important;
}
/*.position-sticky img:focus-visible,*/
.position-sticky button:focus-visible,
.position-sticky a.brand-logo:focus-visible,
.mod-articlesnews-horizontal h3 a:focus-visible,
.footer a:focus-visible{
	outline-color: white !important;
}
a:focus-visible,
div.image:focus-visible {
	outline: 1px solid var(--purple-dark)!important;
}
/*button:focus-visible,
a:focus-visible {
    background-color:var(--green) !important;
	color: white !important;
}*/

.icona {
    /* width: 9.375rem; */
}
/* BANNER */
/*.container-banner {
	margin-top: -126px !important;
}*/
/* SHADOW */
.shadow-custom {
	box-shadow: 0px 3px 6px #5B565C;
}
.shadow-custom-bottom {
	box-shadow: 0px 3px 6px -2px rgb(54, 53, 53);
}
/* PLUGIN */
.btn-green{
	background-color:var(--green);
	color: #fff;
}
.btn-green:hover {
	background-color: var(--purple);
}
/* HEADER */
.container-header .mod-menu .parent>ul {
    background-color: white;
}
.container-header{
	background-image: none;
	background-color: transparent;
}
.offcanvas-header{
	z-index: 1000;
}
.offcanvas-header .btn-close {
    position: absolute;
    right: .8rem;
    top: .5rem;
}
.offcanvas.show {
	visibility: visible;
}
.mod-menu_dropdown-metismenu{
	display: block !important;
}
.sticky-top .container-topbar {
	display: none;
} /*
.layout-sticky .container-topbar {
	display: none;
}*/
#navbarscollapse {
   /* position: absolute; */
    position: relative;
	z-index: 1000;
    right: 0.5rem;
}
.navbar .container-fluid {
    display: block !important;
    text-align: right !important;
}
.fa-bars {
	font-size: 3rem;
	
}
.container-header .navbar-toggler {
	border: none;
	color: var(--purple-dark) !important;
}
.navbar-toggler:focus {
	box-shadow: none;
}
.navbar-toggler:focus-visible {
    box-shadow: 0 0 0 .25rem;
    outline: 0;
    text-decoration: none;
}
/* SIDEBAR LEFT */
.sidebar-left {
	border: none;
	border-right: 8px solid var(--purple-light);
	border-radius: 0;
} 
.itinerari .sidebar-left {
	border-right: 8px solid var(--green);
} 
/* CARD */
.card-header {
	background-color: transparent;
	border: none;
}
/* MODAL */
.modal.show .modal-dialog {
	max-width: 90%;
}
/* GALLERY */
#gallery .image {
	position: relative;
	overflow: hidden;
	padding-bottom: 100%;
	background-position: center;
	background-size: cover;
}
#gallery .image:hover {
	cursor: pointer;
}
/* HOME */
.home h1 {
	display: none;
}
/* MOD_LIST */
ul.mod-list li .card:hover .card-body {
	background-color: var(--purple-dark);
}
ul.mod-list li .card:hover .card-body h3 a {
	text-decoration: underline!important;
}
/* CATEGORY LIST */
.category-list .card:hover .card-body {
	background-color: var(--purple-dark);
}
.category-list .card:hover .card-body h3 a {
	text-decoration: underline!important;
}
/* LUOGHI */
.luoghi h1,
.luoghi h2,
.luoghi h2 a {
	color: var(--purple-light);
}
.luoghi .category-list .card-body,
.luoghi .mod-list .card-body {
	background-color: var(--purple-light);
	min-height: 4rem;
}
/* MOD_LIST - ITINERARI */
.itinerari h1,
.itinerari h2,
.itinerari h2 a {
	color: var(--green);
}
.itinerari .category-list .card-body,
.itinerari .mod-list .card-body {
	background-color: var(--green);
	min-height: 4rem;
}
/* FOOTER */
.footer {
	background-color: transparent;
	background-image: none;
	color: white;
}
.footer dt{
	font-family: "TitilliumLight";
	font-size:1.75rem ;
}
.footer dd{
	font-family: "TitilliumRegular";
	font-size:1.25rem ;
}
.menu-footer ul {
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.menu-footer li {
	align-self: center;
	padding-left: 1rem;
	padding-right: 1rem;
	font-size: 1.25rem;
}

/** MEDIA QUERIES **/
/* ############################################# 
Classi Bootstrap per le diverse risoluzioni:
Extrasmall 	<576px 	
Small 		≥576px 	
Medium 		≥768px 	
Large 		≥992px 	
Extra large	≥1200px
----------------------------------------------------------------------------------------------------
Max container width 	None (auto) 		540px 			720px 			960px 			1140px
Class prefix 			.col- 				.col-sm- 		.col-md- 		.col-lg- 		.col-xl-
################################################# */

/* Small devices (landscape phones, 544px and up) */
@media (min-width: 280px) {
	/* BODY DEBUG */
	body {
		/* min-width: 280px */
	}
	.position-absolute{
		position: absolute !important;
	}
	.position-sticky {
		position: sticky !important;
	}
	.modal {
		width: 270vw !important;
	}
	#navbarscollapse {
		background-color:black;
		height: auto;
		align-items: baseline;
		position:absolute;
		right: 0rem;
		width: 100%;
		margin-top: 0.8rem;
	}
	.metismenu.mod-menu{
		padding-bottom: 1.35rem;
		padding-top: 1rem;
	}
	.container-header .mod-menu .parent>ul {
		position: relative !important;
		background-color:var(--purple-dark) !important;
		box-shadow:none;
		color: white !important;
		width: 100%;
	  }
	  /* CARATTERISTICHE STICKY */
	  
	  .position-sticky .brand-logo .logoColor {
			display: none !important;
	  }
	  .position-sticky .brand-logo .logoWhite {
		display:inline !important;
  	  }
	 .position-sticky .navbar {
		opacity: 1 !important;
		background-color: var(--purple-dark) !important;
	 }
	 .position-sticky button.navbar-toggler {
		color: white !important;
	 }
	 /*
	 
	.layout-sticky .brand-logo .logoColor {
		display: none !important;
	}
	.layout-sticky .brand-logo .logoWhite {
		display:inline !important;
		}
	.layout-sticky .navbar {
		opacity: 1 !important;
		background-color: var(--purple-dark) !important;
	}
	.layout-sticky button.navbar-toggler {
		color: white !important;
	} 
*/
	.metismenu.mod-menu .mm-collapse:not(.mm-show) {
		display: none;
	}
	.metismenu.mod-menu .metismenu-item>a, 
	.metismenu.mod-menu .metismenu-item>button, 
	.metismenu.mod-menu .metismenu-item>span {
		white-space:initial;
		text-align: left;
		color: white;
	}
	.metismenu.mod-menu .metismenu-item.level-1{
		font-size:1.5rem;
		line-height: 1.2;
	}
	.metismenu.mod-menu .metismenu-item.level-2{
		font-size:1.3rem;
		line-height: 1.1;
	}
	/**/
}
@media (min-width: 576px) {
	/* BODY DEBUG */
	body {
		/* min-width: 576px */
	}
    
	/**/
}
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
	/* BODY DEBUG */
	body {
		/* min-width: 768px */
	}
	.mw-md-75 {
        max-width: 75% !important;
    }
	.mw-md-50 {
        max-width: 50% !important;
    }
	.mw-md-30 {
        max-width: 30% !important;
    }
	.modal{
		width: 100% !important;
	}
	/**/
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	/* BODY DEBUG */
	body {
		/* min-width: 992px */
	}
	.modal{
		width: 100% !important;
	}
	/**/
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	/* BODY DEBUG */
	body {
		/* min-width: 1200px */
	}
	/**/
}
/* Set width to make card deck cards 100% width */
@media (min-width: 950px) and (max-width:1100px) {
	/* BODY DEBUG */
	body {
		/* min-width: 950px and max-width:1100px */
	}
	/**/
}
/*************************************** fine media query ***********************************/