/*!
Theme Name: jman
Theme URI: http://underscores.me/
Author: Diego Brunero
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: jman
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

jman is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

@font-face {
    font-family: 'Montserrat'; 
	font-weight: '100';
    src: url('./assets/fonts/Montserrat-Thin.woff') format('opentype'); 
}
@font-face {
    font-family: 'Montserrat'; 
	font-weight: '300';
    src: url('./assets/fonts/Montserrat-Light.woff') format('opentype'); 
}

@font-face {
    font-family: 'Montserrat'; 
	font-weight: '400';
    src: url('./assets/fonts/Montserrat-Regular.woff') format('opentype'); 
}
@font-face {
    font-family: 'Montserrat'; 
	font-weight: '700';
    src: url('./assets/fonts/Montserrat-Bold.woff') format('opentype'); 
}

a {
	color: inherit;
	text-decoration: none;
}
 
a:hover{
	text-decoration:none!important;
}
*{
	font-family: "Montserrat", sans-serif;
	font-weight: 100;
	font-style: normal;
}

body::-webkit-scrollbar {
	display: none!important;
  }
  
  /* Hide scrollbar for IE, Edge and Firefox */
body {
	-ms-overflow-style: none!important;
	scrollbar-width: none!important;
  }

  .scontato{
	color: #838383;
	position: relative;
  }

  .scontato:after{
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background: rgba(255, 0, 0, 0.741);
	position: absolute;
	top:50%;
	left:0;
	transform: translate(0%, -50%);
  }
  .scontatod{
	color: #838383;
	position: relative;
	font-weight: lighter;
	margin-right: 4px;
  }

  .scontatod:after{
	content: '';
	display: block;
	width: 100%;
	height: 2px;
	background: rgba(255, 0, 0, 0.741);
	position: absolute;
	top:50%;
	left:0;
	transform: translate(0%, -50%);
  }

.montserrat-thin {
	font-family: "Montserrat", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.montserrat-light {
	font-family: "Montserrat", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.montserrat-regular {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.montserrat-bold {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-style: normal;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html,
body {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
	background: #000 !important;
}

/* CUSTOM */

.at{
	font-size: 2rem!important;
}

.menu {
	list-style: none;
	color: #fff;
}

.menu a {
	color: inherit;
	text-decoration: none;
	font-size: 1.4rem;
	position: relative;
}

.menu a::after{
	position: absolute;
	content: '';
	display: block;
	width: 100%;
	height: 0.3rem;
	background: #000;
	top:50%;
	left:0;
	transform: scaleX(0);
	transform-origin: left;
	transition: all 0.3s ease-in-out;
}

.riga{
	padding: 1rem 0;
	display: flex;
	justify-content:space-between;
	align-items: center;
}
.riga-desc{
	padding: 1rem 0;
	display: flex;
	color: #fff!important;
	flex-direction: column;
	/* justify-content:space-between;
	align-items: center; */
}
.tw{
	padding:8px 16px;
	border:1px solid #fff;
	margin:0 2px;
	font-weight: lighter!important;
	font-size: 12px!important;
}
.riga-desc p{
	color:#fff!important;
}

footer div{
	font-size: 10px;
	width: 100vw;
	/* position: absolute; */
	/* bottom: 0; */
	color: #fff!important;
	display: flex;
	justify-content: space-around;
	padding: 1rem;
}



.riga-immagini{
	padding: 0.5rem 0;
	margin-left: -0.5rem;
	display: flex;
	width: 100%;
	overflow-x: scroll;
	-ms-overflow-style: none!important;
	scrollbar-width: none!important;
	justify-content: flex-start;
}

.siw{
	margin:0.5rem;
	min-width: 80px;
	max-width: 80px;
	max-height: 100px;
	aspect-ratio: 4/5;
}

.small-image{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.main-image{
	width:100%;
	height: auto;
	/* aspect-ratio:4/5; */
	object-fit:cover;
}

.menu a:hover::after{
	transform: scaleX(1);
}

.menu a:hover{
	color: inherit;
	text-decoration:none;
}

header {
	width: 100vw;
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	padding: 2rem!important;
	background: #00000056;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	position: fixed;
	top:0;
	z-index: 100;
}

.article-title{
	color:#fff;
	padding: 2rem 0;
}

#menuwrap{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top:0;
	left:0;
	background: #000;
	transform: scaleY(0);
	z-index: 99;
	transition: all 0.3s ease-in-out;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#fff;
	transform-origin: top;
}

.open{
	transform: scaleY(1)!important;
}

.rotate{
	transform: rotate(90deg);
}

.hamburger {
	width: 60px;
	height: 20px;
	background: #fff;
	transition: all 0.3s ease-in-out;
}


.hph{
	position: absolute;
	display: flex;
	flex-direction: column;
	top:70vh;
	height: 100vh;
	padding:0 2rem;
}

.grid-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Imposta colonne responsive */
	gap: 2rem; /* Spazio tra le colonne */
}

/* Stile per l'immagine dell'articolo */
.grid-item img {
	object-fit: cover;
	width: 100%;
	aspect-ratio: 4/5;
	/* border-radius: 5px; */
}

/* Stile per il titolo dell'articolo */
.grid-item h2 {
	font-size: 1.2rem;
	margin-top: 16px;
	margin-bottom: 5px;
	color: #fff;
	font-weight: 200;
}

.grid-item {
	text-align: center;
	margin: 0 auto; /* Margini automatici per centrare la griglia */
}

/* Stile per la descrizione dell'articolo */
.grid-item p {
	font-size: 1rem;
	margin-top: 5px;
	color: #666;
}

.card {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	padding: 15px;
}

h2 {
	color: #333;
}

p {
	color: #666;
	margin-top: 5px;
}

.full-width-wrapper {
	position: fixed;
	top:0;
	left:0;
	width: 100vw;
	height: 100vh;
}


.wrap-detail{
	display: flex;
	flex-direction: row;
}

.wrap-detail .img{
	display: flex;
	flex-grow: 2;
	flex-basis: 800px;
}

.wrap-detail .desc {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	padding: 0 2rem;
	width: 100%;
}


/* MENU HOME */
.menu-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	width: 40vw;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.435);
	backdrop-filter: blur(10px);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	padding: 2rem;
}

.logo > img {
	width: 200px;
}

/* SLIDE HOME */
/* Estilo básico para el slideshow */
.slideshow-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	margin: auto;
}

.slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all 1.3s ease-in-out;
	scale: 1;
}

.slide > img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.prev,
.next {
	position: absolute;
	top: 50%;
	width: auto;
	margin-top: -22px;
	padding: 16px;
	color: white;
	font-size: 20px;
	cursor: pointer;
}

.prev {
	left: 0;
}

.next {
	right: 0;
}

.mobile{
	display: none;
}

.cw{
	color:#fff!important;
}

@media screen and (max-width: 880px) {
	
	.desktop{
		display:none;
	}
	.mobile{
		display: block;
	}
	.grid-wrapper {
		grid-template-columns: repeat(2, 1fr); /* Due colonne sulla vista mobile */
	}
	.slideshow-wrapper {
		position: fixed;
		top: 0;
	}

	.slide > img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

	.logo {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}

	.logo > img {
		width: 140px;
	}

	.menu-wrapper {
		position: absolute;
		top: 76vh;
		right: 0;
		width: 100vw;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.435);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		padding: 2rem;
	}
}


@media screen and (max-width: 420px) {
	footer div{
		font-size: 10px;
		width: 100vw;
		/* position: absolute; */
		/* bottom: 0; */
		color: #fff!important;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding: 1rem 2rem;
		/* border-top: 1px solid #fff; */
	}
}



.row-filter{
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: flex-end;
	height: 50px;
}

.row-filter div{
	display: flex;
	align-items: center;
}

.circle-filter{
	margin:2px;
	height: 10px;
	width: 10px;
	border-radius: 5px;
	background-color: #fff;
}

.custom-select {
	background-color: black;
	color: white;
	border: 1px solid #ccc;
	padding: 5px;
	border-radius: 4px;
	appearance: none; /* Per nascondere l'indicatore predefinito del browser */
	-webkit-appearance: none;
	-moz-appearance: none;
}
.custom-select option {
	background-color: black;
	color: white;
}



.loader-wrapper {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
	backdrop-filter: blur(10px);
    height: 100%;
	position: fixed;
	top:0;
	left:0;
}

.loader {
    border: 16px solid #f3f3f3; /* Colore di sfondo dello spinner */
    border-top: 16px solid #807f7f; /* Colore del bordo superiore */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}