/*
 *	MP3 Styles for K 2022
 *	@Bootstrap
 *	@Animate css
 *
 */

:root {
	--offset-top: 66px;
	--offset-left: 0px;
}

.accordion{
	--bs-accordion-active-color: #fff !important;
	--bs-accordion-active-bg: rgb(227, 6, 19) !important;
	--bs-accordion-btn-active-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;	
}

body{ margin:0; padding:0; }

/* General Animation Styles */

.delay200		{ -webkit-animation-delay: 0.2s; -moz-animation-delay: 0.2s; animation-delay: 0.2s; }
.delay400		{ -webkit-animation-delay: 0.4s; -moz-animation-delay: 0.4s; animation-delay: 0.4s; }
.delayHalf		{ -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; }
.delayHalf, .delay500	{ -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s; }
.delay600		{ -webkit-animation-delay: 0.6s; -moz-animation-delay: 0.6s; animation-delay: 0.6s; }
.delay800		{ -webkit-animation-delay: 0.8s; -moz-animation-delay: 0.8s; animation-delay: 0.8s; }
.delayOne		{ -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.delayOneHalf	{ -webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s; }
.delayTwo		{ -webkit-animation-delay: 2s; -moz-animation-delay: 2s; animation-delay: 2s; }
.delayThree		{ -webkit-animation-delay: 3s; -moz-animation-delay: 3s; animation-delay: 3s; }

/* Index Block Styles */

#page-wrapper{ position:relative; height:100vh; width:100vw; overflow:hidden; }
#page-background{ position:absolute; top:0; right:0; left:0; bottom:0; background:url('../img/isolinear.svg') fixed repeat center center / 4000px auto #fff; z-index:1; opacity:0.8; }
#mp3-logo { position: absolute; top: 30px; left: 30px; height: 200px; width: 380px; margin: 0; padding: 0; z-index:10;}
#logo-payoff { margin-top: -127px; width: 361px; margin-left: -3px; }


/* Shape Styles */

.shape-wrapper { background-color: rgba(255,255,255,0.5); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); height: 215px; width: 378px; position: absolute; z-index: 5; }
.shape-wrapper.big { height: 430px; width: 756px; }
.shape-wrapper.half-left { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 50% 50%); }
.shape-wrapper.half-right { clip-path: polygon(50% 0%, 50% 50%, 50% 100%, 0% 50%); }
.shape-wrapper.grey { background-color: #d5d5d5; opacity: 0.8; }
.shape-wrapper.white { background-color: #fff; opacity: 0.8; }
.shape-wrapper.ruby { background-color: rgb(227, 6, 19); opacity: 0.6; }
.shape-wrapper.blue { background-color: rgb(0, 28, 72); opacity: 0.6; }

.shape-wrapper .cover { position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 1; background-color: rgba(155, 3, 12, 0.2); }
.shape-wrapper .cover.blue { background-color:rgba(0, 28, 72, 0.4); }
.shape-wrapper .cover.white { background-color:#fff !important; }
.cover.ruby { background-color: rgba(227, 6, 19, 0.7) !important; }
.shape-wrapper .cover.left { right:50%;}
.shape-wrapper .cover.left.stack{ border-right: 1px solid rgba(255,255,255,0.5); }
.shape-wrapper .cover.right { left:50%; }
.shape-wrapper .cover.right.stack{ border-left: 1px solid rgba(255,255,255,0.5); }

.shape{background-size: cover; background-position: center; background-attachment: scroll; opacity:0.9; }
.sheet-1{ background-image:url('../img/lastre.jpg'); width: 591px; height: 775px; }
.sheet-2{ background-image:url('../img/lastre-2.jpg'); width: 709px; height: 873px; }
.reel-1{ background-image:url('../img/bobine.jpg'); width: 1380px; height: 1083px; }
.reel-2 { background-image: url('../img/ilpa-mp3-bobine-1920x760.jpg'); width: 1920px; height: 760px; }
.company{ background-image:url('../img/ilpa-mp3-stabilimento-aerea.jpg'); width: 1380px; height: 1083px; }
.trattore{ background-image:url('../img/trattore.jpg'); width: 1380px; height: 1083px; }
.vasca{ background-image:url('../img/vasca.jpg'); width: 1380px; height: 1083px; }
.yogurt{ background-image:url('../img/yogurt.jpg'); width: 1380px; height: 1083px; }


/* Isometric Text */

.isolink { position: absolute; z-index: 10; font-size: 70px; text-transform: uppercase; text-decoration: none; display: block; color: #e30613; text-shadow: 0 0 3px rgba(0, 0, 128, 0.25); font-weight: 700; transform: skew(5deg,30deg); letter-spacing: -3px; }
.isolink:after { content:var(--link-value); position:absolute; top:6px; left:-6px; text-shadow:1px -1px 1px #bf0510, 2px -2px 1px #bf0513, 3px -3px 1px #bf0513, 4px -4px 1px #bf0513, 5px -5px 2px #bf0513, 6px -6px 2px #bf0513, 7px -7px 2px #bf0513; }
.isolink:hover { color:#fd5965; }
.isolink:active, .isolink:visited, .isolink:focus { color:#fd5965; }

/* PDF Lightbox */

.pdf-lightbox { position: absolute; z-index: 30; aspect-ratio: 679 / 960; overflow: hidden; max-width: 300px; }
.pdf-lightbox > img { width:100%; height:100%; }
div.page{ background-position:right center; background-repeat:no-repeat; background-size:contain; }
.book-close { position: absolute; top: 1em; right: 1em; font-size: 3em; background-color: #e5e5e5; width: 1.5em; height: 1.5em; line-height: 1.5em; text-align: center; border-radius: 100%; }

.qrcode { z-index: 5; padding: 3em; background-color:#e5e5e5; }
.qrcode img { text-align: center; margin: 0 auto; border: 2em solid #fff; }

/* Deco Title */


.deco-title { margin-bottom:1.6em; line-height:1em; color: var(--tertiary-color);  }

.deco-title { font-weight:300; position:relative; }
.deco-eylet { font-weight:300; display: block; font-size: 0.5em; margin: 0; }

.deco-title.with-image { display:flex; flex-direction: row; align-items: flex-end; }
.deco-title.with-image .deco-title-image { margin: 0 0.5em; max-width:30%;}

.deco-title.sinistra,.deco-eylet.sinistra { text-align:left; }
.deco-title.destra,.deco-eylet.destra { text-align:right; }
.deco-title.centro,.deco-eylet.centro { text-align:center; }
.deco-title.sinistra.with-image { text-align:left; flex-direction: row;}
.deco-title.destra.with-image { text-align:right; flex-direction: row-reverse;}
.deco-title.centro.with-image { text-align:center; justify-content: center;}
.text-white .deco-title, .deco-title.text-white, .text-white .deco-eylet, .deco-eylet.text-white { color:#fff; }
.text-dark .deco-title, .deco-title.text-dark, .text-dark .deco-eylet, .deco-eylet.text-dark { color:var(--primary-color); }

.double-title .deco-title{margin-bottom:0.8em; }
.double-title .deco-eylet{margin-bottom:-0.2em;}

.title-tan .deco-title, .subtitle-tan .deco-subtitle {color:#f8da9b; }

.deco-title:after { content: ''; border-bottom: 4px solid  #d00c15; display: block; width: 3em; margin-top: 0.8em; position:absolute;  }
.deco-title.text-white:after .text-white .deco-title:after { border-bottom: 4px solid #fff; }
.deco-title.text-dark:after .text-dark .deco-title:after{ border-bottom: 4px solid #30353a; }
.deco-title.sinistra:after { left:0; }
.deco-title.destra:after { right:0; }
.deco-title.centro:after { left:calc(50% - 1.5em); }

h1.deco-title{ font-size:2.5rem;}
h2.deco-title{ font-size:2.3rem;}
h3.deco-title{ font-size:2rem;}
h4.deco-title{ font-size:1.75rem;}
h5.deco-title{ font-size:1.5rem;}

h2.deco-eylet{ font-size:2rem;}
h3.deco-eylet{ font-size:1.9rem;}
h4.deco-eylet{ font-size:1.4rem;}
h5.deco-eylet{ font-size:1.1rem;}
h6.deco-eylet{ font-size:0.8rem;}

.deco-title mark { background: none; padding: 0; font-weight:800; }
.deco-title.sub-block mark { display: block; }
.deco-title.sub-dark mark { color: var(--primary-color); }
.text-white .deco-title.sub-dark mark { color: var(--primary-color); }
.text-white .deco-title mark { color:#fff; font-weight:800; }
.text-white .deco-title:after { border-bottom: 4px solid #fff; }

/* Text Column Styles */

.text-column-2, .text-column-3, .text-column-4, .text-column-5{ column-gap:2em; text-align:justufy; }

.text-column-2{ columns:2; }
.text-column-3{ columns:3; }
.text-column-4{ columns:4; }
.text-column-5{ columns:5; }

/* Product Gallery Styles */

.product-gallery-list { margin: calc(var(--bs-accordion-body-padding-y) * -1) calc(var(--bs-accordion-body-padding-x) * -1); padding: 0; list-style: none inside; }
.product-gallery-list li { background-color:var(--pcolor); padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x); border-bottom: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color); text-align: right; letter-spacing: 2px; }
.product-gallery-list li:last-child { border:none; }
.product-gallery-list li:after { content: ''; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 0.8em; margin: 0 0.5em; }
.product-gallery-list li.selected { background-color: #bb0000; color: #fff; }
.product-gallery-list li.none { color: #ccc; }
.product-gallery-list li.none:after { content: ''; }
img.gallery-item { max-width: 100%; }