@charset "UTF-8";

@page {
	size: A4 portrait;
	margin: 1,5cm;
	@top-left {
		content: "Hamlet";
	}
}

@font-face {
	font-display: swap;
}

/* 
***********************************************
VALORI BASE
***********************************************
*/

:root{
/* colore per scale monocromatiche */
	--st-color-mono-2: #002e17;
	--st-color-mono-1: #004C25;
	--st-color-mono: #006633;
	--st-color-mono--1: #0f7c44;
	--st-color-mono--2: #25945c;
/* colore secondario per scale bicromatiche */
	--st-color-bi-2: #011b2a;
	--st-color-bi-1: #022c45;
	--st-color-bi: #053c5d;
	--st-color-bi--1: #134e71;
	--st-color-bi--2: #276387;
/* colore terziario per scale adiacenti */
	--st-color-ad-2: #1e3c00;
	--st-color-ad-1: #316200;
	--st-color-ad: #428300;
	--st-color-ad--1: #5a9f13;
	--st-color-ad--2: #77be2f;

	--st-primary-color: var(--st-color-mono);
	--st-bg-color:white;
	--st-font-color: #011b2a;
	--st-brand-color: var(--st-color-mono);
	--st-brand-color-hover: #77be2f;

	--st-border-radius: 32px;
	--st-border-thin: 1px;
	--st-border-medium: 2px;
	--st-border-large: 4px;

	--st-cta-buy-txt: "Acquista ";
	--st-font-size: 16px;
	--st-cta-bg: #77be2f;
	--st-cta-bg-20: #77be2f20;
	--st-cta-bg-40: #77be2f40;
	--st-link-color: var(--st-color-mono);
	--st-alert-color: #006666;
	--st-alert-bg: #e2eff5;
	--st-alert-border-color: #006666;
	--st-btn-border-radius: 6px;
	--st-btn-padding: 6px 12px;
	--st-btn-color: #fff;
	--st-btn-bg: #00994d;
	--st-btn-font-size: 1rem;
	--st-btn-border-color: var(--st-color-mono);
	--st-btn-hover-color: #fff;
	--st-btn-hover-bg: var(--st-color-mono);
	--st-btn-hover-border-color: var(--st-color-mono);
	--st-btn-focus-shadow-rgb: 130, 138, 145;
	--st-btn-active-color: #fff;
	--st-btn-active-bg: var(--st-color-mono);
	--st-btn-active-border-color: var(--st-color-mono);
	--st-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	--st-btn-disabled-color: #fff;
	--st-btn-disabled-bg: #6c757d;
	--st-btn-disabled-border-color:#6c757d;

	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 16px;
	font-weight: 400;
	height: 24px;
}


/*
***********************************************
SELETTORI DI ELEMENTI HTML
***********************************************
*/
a:hover {
	text-decoration: underline;
}

fieldset {
	min-width: 0;
	padding: 0;
	margin: 0;
	border: 0;
}


img {
	display: inline-block;
}

figcaption {
	display: block;
	caption-side: bottom;
	font-weight: bolder;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	word-wrap: break-word;
}

input, textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.5rem 0.5rem !important;
	font-size: 1rem;
	line-height: 1.25;
	color: #495057;
	background-color: #fff;
	background-image: none;
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 0.25rem;
	transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}


label {
	display: block;
	margin-top:  1rem;
}

legend {
	float: left;
	width: 100%;
	padding: 0;
	padding-bottom: 10px;
	margin-bottom: .5rem;
	font-size: calc(1.275rem + .3vw);
	line-height: inherit;
}

/*
***********************************************
SELETTORI DI ID
***********************************************
*/

/*
***********************************************
                   specifici di Studio Technica
***********************************************
*/

#document_request {
	& button {
		display:block;
	}
}

/*
***********************************************
           personalizzazione di SP Page Builder
***********************************************
*/

#sp-top-bar {
	padding: 0px;
	background: linear-gradient(90deg, var(--st-primary), var(--st-accent))
}

#sp-header {
	background: #ffffff33;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

#sp-footer {
	background-color: var(--st-brand-color);
}

#sp-footer {
	& a{
		color: white;
	}
	& a:hover{
		text-decoration: underline;
	}
}

#sp-left .sp-module, #sp-right .sp-module {
	border: hidden;
	& a{
		color: var(--st-brand-color) !important;
		line-height: var(--bs-body-line-height) !important;
	}
	& a:hover{
		text-decoration: underline;
	}
}
#sp-main-body .sp-module-content {
		margin: 2rem 0;
}

/*
***********************************************
SELETTORI DI CLASSE
***********************************************
*/

/*
***********************************************
      selettori di classe derivati da Bootstrap
***********************************************
*/
.jumbotron {
	padding: 2rem 1rem;
	margin-bottom: 2rem;
	background-color: #e9ecef;
	border-radius: .3rem;
}

.jumbotron-excel {
	margin: 2rem 0;
	padding: 2rem 1rem;
	margin-bottom: 2rem;
	background-color: #D4F3E4;
	border-radius: .3rem;
}

.jumbotron-word {
	color: var(--st-color-bi);
	margin: 2rem 0;
	padding: 2rem 1rem;
	margin-bottom: 2rem;
	background-color: #CFE3EF;
	border-radius: .3rem;
}

.jumbotron-word a{
	color: var(--st-color-bi);
}

.jumbotron-word .sppb-icon-container{
	color: var(--st-color-bi);
}

/*
***********************************************
           personalizzazione di SP Page Builder
***********************************************
*/
.sp-profile-dropdown { /*Menu utente nella vista compatta*/
	left: 0;
	right: unset;
	z-index:100
}

.sp-profile-dropdown li a {
    font-size: 14px;
}

.sp-profile-dropdown > li:not(:last-child) {
    border-bottom: 1px solid #e4e4e4;
    padding-bottom: 5px;
    margin-bottom: 5px;
    line-height:1.3
}

.sppb-btn-width-full {
	margin: 1rem 0;
	width:100%
}
.sppb-btn {
	color:white;
	background-color: var(--st-btn-bg);
	border: 1px solid;
	border-color: var(--st-btn-border-color);
	border-radius: var(--st-btn-border-radius);
}

.sppb-btn:hover {
	color:white;
	background-color: var(--st-primary-color);
	border: 1px solid;
	border-color: var(--st-btn-border-color);
	border-radius: var(--st-btn-border-radius);
}

.sppb-icon-container{
	color: var(--st-brand-color);
	font-weight: 700;
	font-size: 2.5rem;
}

.sppb-pricing-box{
	background-color: white;
	margin: 0 1rem;
	border: var(--st-border-medium) solid var(--st-cta-bg);
	border-radius: var(--st-border-radius);
}

.sppb-pricing-header{
	display:flex;
	flex-direction: column;
	text-align: center;
	border: none;
	background-color: var(--st-cta-bg);
	padding: 1rem;
	border-radius: calc(var(--st-border-radius) - var(--st-border-medium)) calc(var(--st-border-radius) - var(--st-border-medium)) 0 0;
}

.sppb-pricing-features{
	padding: 1rem;
	background-color: white;
}

.sppb-pricing-features ul {
	&::before{
	content:"Comprende:";
	font-weight: 700;
	margin: 1rem 0;
	}
	& li{
		list-style:disc inside;
	}
}

.sppb-pricing-footer{
	border: none;
	padding: 1rem;
	background-color: none;
	text-align: center;
}

.sppb-pricing-price{
	color: var(--st-cta);
	font-weight: 700;
	font-size: 2.5em;
}

.sppb-pricing-title{
	color: var(--st-brand-color);
	font-weight: 700;
	font-size: 2em;
}
.sppb-animated-number{
	font-size: 3rem;
	font-weight: 800;
}

.social-wrap .social-icons {
	display: none;
}

.animated-text-words-wrapper{
	color:var(--st-brand-color);
}
.overlay-image-title {
	& .sppb-addon-subtitle, .sppb-addon-title{
	color:black;
	}
}

/*
***********************************************
                   specifici di Studio Technica
***********************************************
*/

.btn {
	color:white;
	font-size: 1em;
	background-color: var(--st-btn-bg);
	border: 1px solid;
	border-color: var(--st-btn-border-color);
	border-radius: var(--st-btn-border-radius);
}
.btn_word{
	before:
}

.btn_download{
	margin: 1rem 0;
}

.btn:hover {
	color:white;
	background-color: var(--st-primary-color);
	border: 1px solid;
	border-color: var(--st-btn-border-color);
	border-radius: var(--st-btn-border-radius);
}

.btn-icon-sm {
	box-sizing: content-box;
	color: var(--st-btn-bg);
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}

.btn-icon {
	box-sizing: content-box;
	color: none;
	border: none;
	background-color: transparent;
	padding: 0px;
	text-align: center;
	line-height: 2em;
	font-size: 2em;
	font-weight: bold;
}

.btn-rounded {
	box-sizing: content-box;
	border: 1px solid black;
	padding: 0px;
	border-radius: 50%;
	background-color: var(--st-btn-bg);
	width: 40px;
	height: 40px;
	color: white;
	line-height: 40px;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
}
	
.btn-rounded-sm {
	padding: 0px;
	box-sizing: content-box;
	border: 1px solid black;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	color: white;
	line-height: 20px;
	text-align: center;
	font-size: 1em;
	font-weight: bold;
}

.btn-bg-red{
	background-color: red;
}

.btn-bg-white{
	background-color: white;
}

.btn-bg-default{
	background-color: var(--st-btn-bg);
}
.btn-secondary{
	color:white;
	background-color: var(--st-btn-bg);
}

.st-cta-btn{
	position:absolute;
	bottom: 0px;
	right: 0px;
	color: white;
	font-size: var(--st-btn-font-size);
	padding: var(--st-btn-padding);
	background-color: var(--st-brand-color);
	border:none;
	border-color: var(--st-btn-border-color);
	border-radius: var(--st-btn-border-radius) 0 0 0;
	& a{
		color:white;
	}
	& .buy::before{
		content: var(--st-cta-buy-txt);
	}
}

.foglio {
	position: relative;
	border: 1px solid black;
}

.stamp-line {
	position: absolute;
	right: 25px;
	top: 25px;
	opacity: 1.0;
	z-index: 99;}

/* Definisce il bollino tondo con il prezzo sul foglio */

stamp {
	background-color: var(--st-cta-bg);
	border: 0.5rem solid white;
	border-radius: 50%;
	border-radius	
	width: 80px;
	height: 80px;
	position: absolute;
	right: 25px;
	top: 25px;
	opacity: 1.0;
	z-index: 99;
	color: white;
	line-height: 80px;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	transform: rotate(-30deg);
	-webkit-transform: skew(30deg, -30deg);
	-o-transform: skew(30deg, -30deg);
	-moz-transform: skew(30deg, -30deg)
}

.stamp-rounded {
	box-sizing: content-box;
	background-color: var(--st-cta-bg);
	border: 0.5rem solid white;
	border-radius: 50%;
	box-shadow: 0.2rem 0.2rem 1rem 0.01rem gray;
	width: 80px;
	height: 80px;
	color: white;
	line-height: 80px;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	transform: rotate(-30deg);
	-webkit-transform: skew(30deg, -30deg);
	-o-transform: skew(30deg, -30deg);
	-moz-transform: skew(30deg, -30deg)
}

.stamp-rounded.red {
	text-align: center;
	color:red;
}

.stamp-rounded:empty {display: none;}

.whatsapp {
	text-align: right;
	color: #006633;
}

.elenco_tabulato {
	display:table;
	width: 100%;
	column-gap: 1rem;
}

.elenco_riga {
	display: table-row;
}

.elenco_label {
	font-weight: bold;
}
.elenco_riga > div {
	display:table-cell;
	border-bottom: 1px solid var(--st-color-mono);
	padding: 0 1rem;
}

.pj_line {
	display: inline-flex;
	width: 100%;
}

.pj_title {
	font-weight: 800;
	margin:2rem 0;
	width: 100%;
}

.pj_text{
	margin:1rem 0;
}

.pj_command_line {
	display: flex;
	flex: auto;
	justify-content: right;
	gap: 0.5rem;
	margin: 1rem 0;
}

.pj_command_line-center {
	display: flex;
	flex: auto;
	justify-content: center;
	gap: 0.5rem;
	margin: 1rem 0;
}

.tr-button {
	box-shadow: 20px 38px 34px -26px hsla(0,0%,0%,.2);
	border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
	&:hover{
		box-shadow:2px 8px 4px -6px hsla(0,0%,0%,.3);
	} 
	&.lined.thick{
		border:solid 7px #41403E;
	}
	&.lined.thin{
		border:solid 2px #41403E;
	}
}
/*
***********************************************
specifici di Category BLOG - Immagini Categoria
***********************************************
*/

.st-category-item {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 30px;
}
.st-category-item {
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid #e5e5e5;
}
.st-category-image {
    flex: 0 0 100px;
}

.st-category-image a {
    display: block;
}

.st-category-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.st-category-img {
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,.15);
}
.st-category-content {
    flex: 1 1 auto;
    min-width: 0;
}

.st-category-title {
    margin-top: 0;
    margin-bottom: 10px;
}

.st-category-description {
    margin: 0;
}

@media (max-width: 767px) {

    .st-category-item {
        display: block;
        text-align: center;
    }

    .st-category-image {
        width: 100%;
        margin: 0 auto 20px auto;
        text-align: center;
    }

    .st-category-img {
        width: auto;
        max-width: 220px;
        height: auto;
        display: inline-block;
    }

    .st-category-content {
        text-align: left;
    }

    .st-category-title {
        text-align: center;
        margin-bottom: 15px;
    }

    .st-category-description {
        text-align: left;
    }
}
/*
***********************************************
                            specifici di Joomla
***********************************************
*/

.readmore{
	display: contents;
}

.readmore a{
	color: white;
	font-size: var(--st-btn-font-size);
	text-align: right;
	margin-bottom: var(--st-font-size);
	background-color: var(--st-btn-bg);
	border: 1px solid;
	border-color: var(--st-btn-border-color);
	border-radius: var(--st-btn-border-radius);
	padding: var(--st-btn-padding);
}

.article h2{
	font-size: 2rem;
}

.article-info {
	justify-content: right;
	padding: 1rem 0;
	border-top: 1px solid #f5f5f5;
	margin-bottom: 1rem;
	& .createdby , .modified{
		font-size: 1em;
	}
}

.article-list .article .article-header h2 a {
	color: var(--st-link-color);
}

.article-list .article .readmore a:hover{
	color:white;
	background-color: var(--st-btn-hover-bg);
}

.blogportfolio .article-list .article {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2em;
	border-style: solid;
	border-width: 2px;
	border-color: var(--st-btn-border-color);
	border-radius: var(--st-btn-border-radius);
	background-color: var(--st-bg-color);
	padding: 0;
	& .article-intro-image{
		flex-basis: 25%;
		margin: 0;
		padding: 1rem;
		border: none;
		min-width: 200px;
		height: auto !important;
		& img{
			position: relative;
			top: auto;
			left: auto;
			transform:none;
			width: 100%;
			height: auto;
			border-style: solid;
			border-width: thin;
			border-color: var(--st-brand-color);
			box-shadow: 0 0 10px rgba(0,0,0,0.24);
		}
	}
	& .article-body{
		flex: 1;
		min-width: 300px;
		padding: 1rem;
	}
	& .readmore a{
		color: white;
		font-size: var(--st-btn-font-size);
		text-align: right;
		margin-bottom: var(--st-font-size);
		background-color: var(--st-btn-bg);
		border: 1px solid;
		border-color: var(--st-btn-border-color);
		border-radius: var(--st-btn-border-radius);
		padding: var(--st-btn-padding);
	}
}

.blogsoftware-serie > .article-list  .article {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2em;
	border-style: solid;
	border-width: 2px;
	border-color: var(--st-btn-border-color);
	border-radius: var(--st-btn-border-radius);
	background-color: var(--st-bg-color);
	padding: 0;
	& .article-intro-image{
		flex-basis: 25%;
		margin: 0;
		padding: 1rem;
		border: none;
		min-width: 200px;
		height: auto !important;
		& img{
			position: relative;
			top: auto;
			left: auto;
			transform:none;
			width: 100%;
			height: auto;
			border-style: solid;
			border-width: thin;
			border-color: var(--st-brand-color);
			box-shadow: 0 0 10px rgba(0,0,0,0.24);
		}
	}
	& .article-body{
		flex: 1;
		min-width: 300px;
		padding: 1rem;
	}
	& .readmore a{
		color: white;
		font-size: var(--st-btn-font-size);
		text-align: right;
		margin-bottom: var(--st-font-size);
		background-color: var(--st-btn-bg);
		border: 1px solid;
		border-color: var(--st-btn-border-color);
		border-radius: var(--st-btn-border-radius);
		padding: var(--st-btn-padding);
	}
}


.blogarticoli-serie .article-list .article {
	border-top: 5px solid var(--st-brand-color);
	border-bottom: 1px solid var(--st-brand-color);
	& .article-intro-image {
		display:none;
		padding: 1em;
		border-bottom: none;
		text-align: center;
		& img{
			border-style: solid;
			border-width: thin;
			border-color: var(--st-brand-color);
			height: auto;
			width:auto;
			max-height: 200px;
			max-width: 200px;
		}
	}
	& .readmore {
		& a{
			display: block;
			justify-content: right;
			color: black;
			font-size: var(--st-btn-font-size);
			text-align: right;
			margin-bottom: var(--st-font-size);
			background-color: transparent;
			border: none;
			padding: var(--st-btn-padding);
				& :hover{
				text-decoration: underline;
			}
		}
	}
	& .article-introtext{
		display: block;
	}
	& .article-info{
		display: none;
	}
}

.portfolio-list .article{
	display: block;
	border-style: solid;
	border-width: 2px;
	border-color: #006633;
	border-radius: 10px;
	background-color: #FFF;
	padding: 10px;
}
.portfolio-list .article figure{
	padding: 10px;
	float:left;
}
.portfolio-list .article figure img{
	border-style: solid;
	border-width: thin;
	border-color: #006633;
	box-shadow: 0 0 10px rgba(0,0,0,0.24);
}

.alert-info {
	background-color: var(--st-alert-bg);
	border-color: var(--st-alert-border-color);
	color: var(--st-alert-color);
}

/* ==========================================
   TOP BAR HELIX A TUTTA LARGHEZZA
   ========================================== */

#sp-top-bar {
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}

/* Elimina il limite di larghezza del container */
#sp-top-bar > .container,
#sp-top-bar > .container-fluid {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Elimina gli spazi interni */
#sp-top-bar .container-inner {
    width: 100%;
    max-width: none;
    padding: 0 !important;
    margin: 0 !important;
}

#sp-top-bar .row {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Porta top1 a tutta larghezza */
#sp-top-bar #sp-top1 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Nasconde l'eventuale seconda colonna */
#sp-top-bar #sp-top2 {
    display: none !important;
}

/* Rimuove gli spazi del modulo Joomla */
#sp-top-bar .sp-module,
#sp-top-bar .moduletable,
#sp-top-bar .mod-custom,
#sp-top-bar .custom {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 !important;
}

/* Banner */
#sp-top-bar .st-banner {
    width: 100%;
    max-width: none;
    margin: 0;
}
























/* Definisce il foglio come contenitore di tipo relative */

/* specifici per l'elenco software delle categorie */




/* Colore e allineamento del link a whatsapp negli articoli software */



/*SPECIFICI PER I PROGETTI*/


/* stili specifici per la stampa */
@media print{
	body{
		font-size: 12pt !important;
		color: black;
	}
	
	header{ /* nasconde l'header */
		display: none;
	}
	#sp-component{ /* espande il testo su tutta la pagina */
		width: 100%;
	}
/* 
	a:after{
		content: "("attr(href)")";
	}
 */
	#g-mainbar{
		font-size: 10 pt;
		color: black;
	}
	#g-navigation, aside, footer, form, .size-25 { /* nasconde questi elementi */
		display: none !important;
		width: 0%;
	}
	.size-25 {
		width: 0%;
		flex: 0;
	}
	.size-75 {
		width: 100%;
		flex: 1;
	}
	.g-container {
		width: 100%;
	}
	.com-content-article__body{
		column-width: 17em;
		column-gap: 3em;
	}
	.adsbygoogle, .google-auto-placed, .trustpilot-widget{
		display: none !important;
	}
	img, table, svg{
		break-inside: avoid;
	}
	img.excel {
		border-style: solid;
		border-width: thin;
		margin: 0px;
	}
	img.dark {
		filter: invert(100%) hue-rotate(180deg) brightness(100%) contrast(100%)
	}
	img[src*=_dark_] {
		filter: invert(100%) hue-rotate(180deg) brightness(100%) contrast(100%);
	}
	img[src*=_excel_] {
		border-style: solid;
		border-width: thin;
		margin: 0px;
	}

	main::after {
		content: "©Copyright Studio Technica Associazione Professionale, Via del Caravaggio, 43 Firenze • www.studiotechnica.net";
		display: block;
		text-align: center;
		font-size: 8pt;
	}
}