/* -== SOL Homepage 2025 v1.01 ==- */

body { background-color: #FFFFFF; }
#centerstage ul li { margin-bottom: 10px; }
#centerstage ul li img { display: block; width: 100%; }

ul.tiles li img { display: block; width: 100%; }

#hlisting-section {
    margin-bottom: 5px;
}
#hlisting-section ul li {
    opacity: 0.6;
    transition: opacity 0.5s ease-in-out;
}
#hlisting-section ul li.active-tile {
    opacity: 1;
}

.hscroll-outer {
    position: relative;
    overflow: hidden;
}
.hscroll-outer .hscroll {
    display: flex;
    left: 0px;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -ms-overflow-style: none;  /* Hide scrollbar in IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar in Firefox */
}
.hscroll-outer .hscroll::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers */
}

.hscroll-outer .hscroll ul {
    gap: 0;
    display: flex;
}
.hscroll-outer .hscroll li {
    display: inline-block;
    width: 50vw;
    overflow: hidden;
    white-space: nowrap;
    margin: 0px 5px;
}
.hscroll-outer .hscroll li img {
    display: block;
    width: 100%;
}
.hscroll-controls {
    padding: 0px 25px;
    margin-bottom: 25px;
    text-align: right;
}
.hscroll-controls .hscroll-play {
    display: inline-block;
    width: 35px; height: 35px;
    background: #cacad0 url('/images/hscroll_play.svg') center no-repeat;
    background-size: 12px auto;
    border-radius: 25px;
    cursor: pointer;
}
.hscroll-controls .hscroll-play.playing {
    background-image: url('/images/hscroll_pause.svg');
}

.pagination-container {
    display: block;
    position: static;
    text-align: center;
}
.pagination-container span {
    display: inline-block;
    width: 8px; height: 8px;
    background-color: #8e8e8f;
    border-radius: 25px;
    margin: 0px 7px;
    cursor: pointer;
}
.pagination-container span.active {
    background-color: #000000;
}

#testimonials-container {
    position: relative;
    overflow: hidden;
}

#testimonials-section .hscroll {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px;
    gap: 10px;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* Hide scrollbar in IE and Edge */
    scrollbar-width: none;  /* Hide scrollbar in Firefox */
    white-space: normal;
}

#testimonials-section .hscroll::-webkit-scrollbar {
    display: none; /* Hide scrollbar in WebKit browsers */
}

#testimonials-section ul li {
    flex: 0 0 auto;
    width: 235px;
    border-radius: 15px;
    overflow: hidden;
    font-size: 1.2em;
    background-color: #FFFFFF;
    box-shadow: #777 0px 0px 7px;
}

#testimonials-section ul li p.endorser-img img {
    display: block;
    width: 100%;
}
#testimonials-section ul li .t-container {
    padding: 0px 15px
}

#testimonials-section ul li .t-container p.quote {
    padding-top: 35px;
    background: url('/images/endorser25_quotes_1@2x.jpg') no-repeat;
    background-size: 38px auto;
}

#testimonials-section ul li .t-container p.pieces {
    font-size: 14px;
}

@media only screen and (min-width: 480px) {
	
	
}

@media only screen and (min-width: 768px) {
	
    ul.tiles li {
        width: 50%;
        float: left;
    }
	ul.tiles li.no-bottom-desktop {
        margin-bottom: 0px;
    }

    
    ul.tiles li a {
        display: block;
        padding: 0px 6px;
    }
    
    .hscroll-outer .hscroll ul li {
        display: inline-block;
    }
    
    #testimonials-section ul li {
        width: 33%;
    }
}


@media only screen and (min-width: 1140px) {
	#testimonials-section ul li {
        width: 25%;
    }
}


/* ============================================================
   Homepage page-specific styles
   (originally inline <style> in /_pages/_homepage/index.php)
   ============================================================ */
	body { background-color: #f4f4f4; }
	.wrapper.big {
        max-width: none;
    }
	.product-listing.promo:after {
        display: block;
        position: absolute;
        content: "";
        top: -15px;
        right: -3px;
        width: 64px;
        height: 60px;
        background: url('/images/promo_sticker_save-30@2x.png') no-repeat;
        background-size: 64px auto;
    }
	.product-listing.promo.save-33:after {
        background: url('/images/promo_sticker_save-33@2x.png') no-repeat;
        background-size: 64px auto;
    }
    .product-listing.promo.save-40:after {
        background: url('/images/promo_sticker_save-40@2x.png') no-repeat;
        background-size: 64px auto;
    }
    .product-listing.promo.save-45:after, #listing-EW-280.promo:after {
        background: url('/images/promo_sticker_save-45@2x.png') no-repeat;
        background-size: 64px auto;
    }
    .product-listing.promo.save-50:after {
        background: url('/images/promo_sticker_save-50@2x.png') no-repeat;
        background-size: 64px auto;
    }

    .product-listing.promo.save-60:after  {
        background: url('/images/promo_sticker_save-60@2x.png') no-repeat;
        background-size: 64px auto;
    }

    .product-listing.promo.save-65:after  {
        background: url('/images/promo_sticker_save-65@2x.png') no-repeat;
        background-size: 64px auto;
    }
	.product-listing.promo.save-70:after  {
        background: url('/images/promo_sticker_save-70@2x.png') no-repeat;
        background-size: 64px auto;
    }
	#listing-hollywood-bundle:after, #listing-future-bundle:after, #listing-ancient-bundle:after, #listing-pop-bundle:after, #listing-rock-bundle:after {
		background: url('/images/promo_sticker_save-80@2x.png') no-repeat;
        background-size: 64px auto;
	}
	
	#listing-EW-280 {
		display: none;
	}
	
	#purchase-cc-opt { max-width: 440px; }
	
	 .price-list {
        position: relative;
        display: inline-block;
        padding-top: 3px;
        margin-right: 8px;
        text-decoration: line-through;
        vertical-align: top;
        height: 28px;
        line-height: 1em;
    }
    .price-online {
        color: #ee2128;
        font-weight: bold;
        font-size: 20px;
        font-weight: 800;
    }
    .price-list.price-from { padding-top: 8px; }
    .price-list.price-from::before {
        content: "from";
        display: block;
        left: 7px;
        font-size: 12px;
        text-decoration: none;
        text-align: left;
        position: absolute;
        top: -5px;
    }
    
    .divider-or { position: relative; margin-bottom: 25px; }
    .divider-or:before, .divider-or:after {
        display: block;
        content: "";
        position: absolute;
        top: 33px;
        left: 0px;
        width: 35%;
        height: 2px;
        background-color: #000000;
    }
    .divider-or:after { right: 0px; left: auto; }
    .divider-or h3 {
        font-size: 60px;
        text-align: center;
        margin: 0px;
        line-height: 1em;
        color: #000000;
        font-weight: 800;
    }
	
	#purchase-cc-opt { margin-bottom: 45px; }
	
    @media only screen and (min-width: 480px) {
        h4.title { font-size: 23px; }
		
		
    }
    
    @media only screen and (min-width: 768px) {
        h4.title { font-size: 25px; }
        .divider-or h3 {
            font-size: 68px;
        }
        .divider-or:before, .divider-or:after {
            width: 43%;
        }
		.no-wrap {
			white-space: nowrap;
		}
		
    }
    /* ===== HERO FREE TRIAL BANNER (copied from /composercloud) =====
       The CTA is a span (not <a>) because the whole slide is one link to
       /composercloud — nesting an <a> inside it would be invalid HTML and
       break the link. .hero-logo img is re-scoped under #hero-free-trial so
       it beats #centerstage ul li img's higher specificity. text-decoration
       is reset here because the sitewide "a { color: #e94b4b }" underline
       otherwise paints through .hero-panel's content on mobile, where
       display:contents (vs. desktop's position:absolute) keeps it in-flow. */
    #centerstage-banners .hero-banner-link { display: block; text-decoration: none; }
    #hero-free-trial {
        position: relative;
        overflow: hidden;
        background: #fff;
    }
    #hero-free-trial .hero-media img {
        width: 100%;
        height: auto;
        display: block;
    }
    /* All selectors scoped to #hero-free-trial to override .product-page p { color:#fff } */

    .hero-logo {
        text-align: center;
    }
    #hero-free-trial .hero-logo img {
        width: clamp(80px, 21vw, 230px);
        display: inline-block;
    }

    #hero-free-trial .hero-heading {
        font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 900;
        font-style: italic;
        text-transform: uppercase;
        font-size: clamp(14px, 5.5vw, 34px);
        line-height: 1.03;
        color: #111;
        letter-spacing: -0.2px;
        text-align: center;
        margin: 0;
    }
    /* Mobile: logo, heading, image, then content, stacked in that order */
    @media only screen and (max-width: 719px) {
        #hero-free-trial {
            display: flex;
            flex-direction: column;
        }
        #hero-free-trial .hero-panel {
            display: contents;
        }
        #hero-free-trial .hero-media {
            order: 3;
        }
        #hero-free-trial .hero-logo {
            order: 1;
            padding: 24px 22px 0;
            margin-bottom: 0px;
        }
        #hero-free-trial .hero-logo img {
            width: clamp(120px, 37.5vw, 300px);
        }
        #hero-free-trial .hero-heading {
            order: 2;
            padding: 12px 18px 20px;
            padding-bottom: 0px;
        }
        #hero-free-trial .hero-content {
            order: 4;
            padding: 20px 22px 28px;
            padding-top: 5px;
            text-align: center;
        }
    }
    #hero-free-trial .hero-body {
        font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.25;
        color: #222;
        max-width: 450px;
        margin: 0 auto;
        margin-bottom: 18px;
    }
    #hero-free-trial p.hero-cta { margin: 0; text-align: center; }
    #hero-free-trial p.hero-cta a,
    #hero-free-trial p.hero-cta span.plans-link {
        display: inline-block;
        font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 700;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        color: #fff !important;
        background-color: #e22728;
        border-radius: 30px;
        padding: 8px 30px;
        text-decoration: none;
        cursor: pointer;
        line-height: 1;
        box-shadow: 2px 3px 8px rgba(0,0,0,0.3);
    }
    #hero-free-trial p.hero-cta a:hover,
    #hero-free-trial p.hero-cta span.plans-link:hover { background-color: #cf1819; }
    #hero-free-trial p.hero-fine-print {
        font-family: 'Gotham A', 'Gotham B', "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 11px;
        color: #111;
        margin: 8px 0 0;
        line-height: 1.3;
    }
    @media only screen and (min-width: 720px) {
        /* hero-panel is the absolutely-positioned left panel on desktop, sized
           to exactly match the image (border-box keeps padding inside the 100% height)
           so justify-content: center centers the content within the image itself. */
        #hero-free-trial .hero-panel {
            position: absolute;
            top: 0; left: 0;
            width: 39%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 5% 1.5% 5% 2%;
            text-align: center;
        }
        #hero-free-trial .hero-heading {
            margin: 0 0 0.4em;
            font-size: clamp(18px, 2.6vw, 40px);
        }
        #hero-free-trial .hero-body {
            font-size: clamp(15px, 1.8vw, 28px);
            color: #222;
            max-width: 90%;
            margin: 0 auto;
            margin-bottom: 0.9em;
        }
        #hero-free-trial p.hero-cta a,
        #hero-free-trial p.hero-cta span.plans-link {
            font-size: clamp(13px, 1.3vw, 19px);
            padding: clamp(7px, 0.8vw, 11px) clamp(22px, 2.2vw, 40px);
        }
        #hero-free-trial p.hero-fine-print {
            font-size: clamp(9px, 0.8vw, 13px);
            margin-top: 0.5em;
        }
    }