/*
Theme Name: Telos A&S
Author: KMSTUDIO
Version: 1.0
*/

:root {
	--telos-red: #E63029;
	--telos-red-brighter: #e85f5a;
	--telos-gray: #707070;
	--bs-border-radius: 0;
	--wp--preset--color--vivid-red: var(--telos-red);
}
:focus-visible { outline: 2px solid var(--telos-red); outline-offset: 3px; }

html { font-size: 1rem; }
body {
	background-color: #fff;
	color: var(--telos-gray);
	font-family: Poppins, sans-serif;
	font-weight: 400;
	padding: 0;
	margin: 0;
}

a { color: var(--telos-red); text-decoration: none; }
b,strong { font-weight: 500; }
h2,h3,h4,h5,h6 { font-weight: 400; }
p { margin: 0 0 1.5rem 0; line-height: 1.6; }
p:last-child { margin-bottom: 0; }
mark { padding: 0; }
hr { border: 0; border-bottom: 1px solid #eee; margin: 3em 0; }
figure { margin: 0; }
figure img { display: block; }
figure svg { display: block; max-width: 100%; height: auto; }

.telos-red { color: var(--telos-red); }
.nsb { margin-left: -.25rem; } /* No space before */
.nsa { margin-right: -.25rem; } /* No space after */

/*.logo svg .telos-svg-payoff-it, .logo svg .telos-svg-payoff-en { display: none; }
html[lang="it-IT"] .logo svg .telos-svg-payoff-it { display: block; }
html[lang="en-US"] .logo svg .telos-svg-payoff-en { display: block; }*/
.logo svg .telos-svg-payoff-en { display: none; }

.otgs-development-site-front-end { display: none !important; }
#smooth-wrapper { height: 100vh !important; }

/* <HAMBURGER> */
.hamburger-btn {
	display: block;
	padding: 1rem;
	cursor: pointer;
	box-sizing: content-box;
	z-index: 11;
}
.hamburger-bar {
	display: block;
	width: 1.5rem;
	height: 2px;
	background-color: #000;
	margin: 0 0 6px;
}
.hamburger-bar:last-child { margin: 0; }
/* </HAMBURGER> */

/* <SIDE-NAV> */
.side-nav {
	display: block;
	position: fixed;
	top: 0; bottom: 0; left: auto; right: -30rem;
	background: #fff;
	width: 90vw;
	max-width: 30rem;
	padding-top: 2rem;
	transition: right .5s;
	z-index: 1004;
}
.side-nav.expanded { right: 0; }
.side-nav nav { padding-bottom: 2rem; border-bottom: 1px solid #eee; }
.side-nav nav ul { list-style-type: none; margin: 0; padding: 0; }
.side-nav nav > ul > li > a {
	display: block;
	font-size: 1.25rem;
	padding: .5rem 2rem;
	text-transform: uppercase;
	color: inherit;
	transition: opacity .25s;
}
.side-nav nav > ul > li.primopiano-scala-c > a { text-transform: none; }
.side-nav-overlay {
    background-color: #000;
    display: block;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1003;
	opacity: .5;
}
/* </SIDE-NAV> */

/* <FIXED-NAV> */
.fixed-nav { position: fixed; top: -5rem; left: 0; width: 100%; background: #fff; box-shadow: 0 0 1rem #00000020; z-index: 1002; }
.fixed-nav.expanded { top: 0; transition: top .25s; }
body.admin-bar .fixed-nav { top: -5rem; }
body.admin-bar .fixed-nav.expanded { top: 32px; }
.fixed-nav > .container-fluid { --bs-gutter-x: 3rem; padding-top: .75rem; padding-bottom: .75rem; }
.fixed-nav nav ul { font-size: .9rem; list-style-type: none; gap: .75rem; margin: 0; padding: 0; }
.fixed-nav nav ul li a { display: block; text-transform: uppercase; transition: color .25s, background-color .25s, border-color .25s; }
.fixed-nav nav ul li.primopiano-scala-c a { text-transform: none; }
.fixed-nav nav.main { display: none; padding-right: .7rem; border-right: 1px solid #eee; }
.fixed-nav nav.main ul li a { position: relative; color: var(--telos-gray); white-space: nowrap; }
.fixed-nav nav.main ul li a::before { content: ''; display: block; position: absolute; right: 0; bottom: 0; background-color: var(--telos-red); width: 0; height: 2px; transition: width .5s; }
.fixed-nav nav.main ul li a:hover::before { width: 100%; left: 0; }
.fixed-nav nav.reserved-area { display: none; }
.fixed-nav nav.reserved-area li a { color: var(--telos-gray); padding: .2rem .4rem; margin: 0 .2rem; }
.fixed-nav nav.reserved-area li a:hover { color: var(--telos-red); background-color: #f8f8f8; }
.fixed-nav nav.lang-switcher { padding-left: .7rem; border-left: 1px solid #eee; margin-left: -1rem; order: 2; }
.fixed-nav nav.lang-switcher li a { padding: .1rem; width: 1.6rem; line-height: 1; text-align: center; border: 2px solid var(--telos-red); }
.fixed-nav nav.lang-switcher li a:hover { color: #fff; background-color: var(--telos-red); }
.fixed-nav .logo { position: relative; left: -.75rem; margin: 0; width: 5rem; min-width: 3rem; z-index: 2; }
.fixed-nav .hamburger-btn { margin-right: .7rem; }
/* </FIXED-NAV> */

/* <FANCYBOX> */
.fancybox__dialog .has-html5video .f-html,
.fancybox__dialog .has-youtube .f-html,
.fancybox__dialog .has-vimeo .f-html {
	max-width: 1600px;
	max-height: 900px;
}
/* </FANCYBOX> */

.btn { text-transform: uppercase; font-size: .75rem; }
.btn-primary { background-color: var(--telos-red); border-color: var(--telos-red); color: #fff; }
.btn-primary:active,
.btn-primary:hover { background-color: var(--telos-red-brighter) !important; border-color: var(--telos-red-brighter) !important; }

.share-n-print .share-socials p { color: #000; margin: 0; text-transform: uppercase; }
.share-n-print .share-on { list-style-type: none; padding: 0; margin: 0; }
.share-n-print .share-on a { display: block; color: #fff; font-size: 1.35rem; padding: .1rem; background-color: #000; border-radius: 3px; }
.share-n-print .print-page { padding-left: 1rem; margin-left: 1.25rem; border-left: 1px solid #ccc; }
.share-n-print .print-page a { color: #000; text-transform: uppercase; transition: color .25s; }
.share-n-print .print-page a:hover { color: var(--telos-red); }
.share-n-print .print-page a i { font-size: 1.6rem; vertical-align: -.15rem; }

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 3rem; }
.layout-row .container, .layout-row .container-fluid { padding-top: 5rem; padding-bottom: 5rem; }
.layout-row .container-wider { --bs-gutter-x: 3rem; max-width: 70rem; margin: 0 auto; }

header.layout-row { background-color: #fff; user-select: none; }
header.layout-row > .container-fluid { --bs-gutter-x: 3rem; padding-top: .75rem; padding-bottom: .75rem; }
header.layout-row h1 { display: none; }
header.layout-row .nav-wrapper { gap: .75rem; }
header.layout-row nav ul { font-size: .9rem; list-style-type: none; gap: .75rem; margin: 0; padding: 0; }
header.layout-row nav ul li a { display: block; text-transform: uppercase; transition: color .25s, background-color .25s, border-color .25s; }
header.layout-row nav.main { display: none; /* (DA DECOMMENTARE SE ATTIVO IL TASTO "AREA RISERVATA"): padding-right: .7rem; border-right: 1px solid #eee; */ }
header.layout-row nav.main ul li.primopiano-scala-c a { text-transform: none; }
header.layout-row nav.main ul li a { position: relative; color: var(--telos-gray); white-space: nowrap; }
header.layout-row nav.main ul li a::before { content: ''; display: block; position: absolute; right: 0; bottom: 0; background-color: var(--telos-red); width: 0; height: 2px; transition: width .5s; }
header.layout-row nav.main ul li a:hover::before { width: 100%; left: 0; }
header.layout-row nav.reserved-area { display: none; }
header.layout-row nav.reserved-area li a { color: var(--telos-gray); padding: .2rem .4rem; margin: 0 -.4rem; }
header.layout-row nav.reserved-area li a:hover { color: var(--telos-red); background-color: #f8f8f8; }
header.layout-row nav.lang-switcher { padding-left: .7rem; border-left: 1px solid #eee; margin-left: -1rem; order: 2; }
header.layout-row nav.lang-switcher li a { padding: .1rem; width: 1.6rem; line-height: 1; text-align: center; border: 2px solid var(--telos-red); }
header.layout-row nav.lang-switcher li a:hover { color: #fff; background-color: var(--telos-red); }
header.layout-row .logo { position: relative; left: -.75rem; margin: 0; width: 5rem; min-width: 4rem; z-index: 2; }

footer.layout-row { position: relative; z-index: 3; background-color: #fff; }
footer.layout-row > .container-fluid { --bs-gutter-x: 3rem; padding-top: 3rem; padding-bottom: 3rem; }
footer.layout-row > .container-fluid > .wrapper > * { margin-bottom: 2rem; }
footer.layout-row .contacts h4 { font-size: 1rem; color: #000; margin: 0 0 .15rem 0; }
footer.layout-row .contacts p { font-size: .8rem; margin: 0; line-height: 1.5; }
footer.layout-row .partners { gap: 1.5rem; }
footer.layout-row .partners figure { max-width: 10rem; margin-bottom: 1rem; }
footer.layout-row .partners figure img { width: auto; max-height: 3rem; margin: 0 auto; }
footer.layout-row .partners figure figcaption { font-size: .6rem; line-height: 1.1; padding: 0 1rem; margin-top: .5rem; text-align: center; }
footer.layout-row .follow-us { max-width: 10rem; }
footer.layout-row .follow-us p { text-transform: uppercase; color: var(--telos-red); margin-bottom: .5rem; }
footer.layout-row .follow-us ul { list-style-type: none; margin: 0; padding: 0; gap: .25rem; }
footer.layout-row .follow-us ul a { display: block; color: #fff; font-size: 1.35rem; padding: .1rem; background-color: #000; border-radius: 3px; }
footer.layout-row .follow-us ul a i { color: #fff; }
footer.layout-row .legal { list-style-type: none; margin: 1rem 0 0 0; padding: 0; gap: .5rem; }
footer.layout-row .legal a { font-size: .8rem; }
footer.layout-row .line { position: absolute; display: block; width: 50vw; height: .75rem; background-color: var(--telos-red); }
footer.layout-row .line-top { top: 0; left: 0; }
footer.layout-row .line-bottom { bottom: 0; right: 0; }

.layout-row-page article.hentry > .container { position: relative; padding-top: 2rem; padding-bottom: 2rem; }
.layout-row-page article.hentry > header { position: relative; overflow: hidden; height: 7rem; pointer-events: none; user-select: none; background: #eee; }
.layout-row-page article.hentry > header h1 { position: absolute; bottom: 0; left: 0; width: 100vw; color: #fff; margin: 0; padding: 1rem 1.5rem 1rem; text-align: center; line-height: 1; text-transform: uppercase; }
.layout-row-page article.hentry > header h1::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--telos-red); mix-blend-mode: multiply; z-index: 0; }
.layout-row-page article.hentry > header h1 span { position: relative; z-index: 1; }
.layout-row-page article.hentry > header figure { position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); }
.layout-row-page article.hentry > header figure img { width: 100%; }
.layout-row-page article.hentry .wp-block-quote { margin-bottom: 1.75rem; }
.layout-row-page article.hentry .wp-block-quote p { font-size: 1.5rem; line-height: 1.3; }
.layout-row-page .floating-el { position: absolute; z-index: -1; }
.layout-row-page .floating-el-1 { right: -8rem; top: 10%; width: 10rem; height: 10rem; background-color: var(--telos-red); }
.layout-row-page .floating-el-2 { right: -10rem; top: 14%; width: 7rem; height: 7rem; background-color: #000; opacity: .9; }
.layout-row-page .floating-el-3 { left: -8rem; top: 70%; width: 10rem; height: 10rem; transform: rotate(10deg); background-color: var(--telos-red); }
.layout-row-page .floating-el-4 { left: -10rem; top: 74%; width: 7rem; height: 7rem; transform: rotate(-18deg); background-color: #000; opacity: .9; }

.layout-row-page .w-side-nav { gap: 5rem; padding-top: 2rem; padding-bottom: 2rem; }
.layout-row-page .w-side-nav .content { padding-top: 3rem; }
.layout-row-page .w-side-nav .side-nav-wrapper { position: relative; order: 2; }
.layout-row-page .w-side-nav aside.side-nav-pages { position: relative; color: #fff; background-color: var(--telos-red); padding: 4rem 3rem; margin-left: calc(var(--bs-gutter-x) * -.5); min-width: 18rem; }
.layout-row-page .w-side-nav aside.side-nav-pages ul { list-style-type: none; margin: 0; padding: 0; }
.layout-row-page .w-side-nav aside.side-nav-pages li { margin-bottom: .5rem; }
.layout-row-page .w-side-nav aside.side-nav-pages li:last-child { margin-bottom: .0; }
.layout-row-page .w-side-nav aside.side-nav-pages li a { position: relative; display: inline-block; font-weight: 300; color: #fff; opacity: .85; transition: opacity .5s; padding: .1rem 0; }
.layout-row-page .w-side-nav aside.side-nav-pages li a::before { content: ''; display: block; position: absolute; left: 0; bottom: 0; background-color: #fff; width: 0; height: 2px; transition: width .5s; }
.layout-row-page .w-side-nav aside.side-nav-pages li a:hover { opacity: 1; }
.layout-row-page .w-side-nav aside.side-nav-pages li a:hover::before { width: 100%; }
.layout-row-page .w-side-nav aside.side-nav-pages li.active a { font-weight: 500; opacity: 1; }
.layout-row-page .w-side-nav aside.side-nav-pages li.active a::before { width: 100%; }
.layout-row-page .w-side-nav aside.side-nav-pages .decorative-line { position: absolute; background-color: #000; z-index: 1; }
.layout-row-page .w-side-nav aside.side-nav-pages .decorative-line-up { top: 0; left: 0; width: 4rem; height: .75rem; }
.layout-row-page .w-side-nav aside.side-nav-pages .decorative-line-down { bottom: 0; right: 0; width: .75rem; height: 4rem; }