/* ============================================================
   Foundation - vector-style fluid scaling (templatemo site recipe).
   Root font-size scales linearly with viewport above 1440 (1.1111vw),
   floored at 16px below. Container scales fluidly to 95vw with a
   73.125rem (1170px-at-baseline) cap. h1-h6 use rem so headings ride
   the root scaling; values match BS3 defaults so layouts don't shift.
   ============================================================ */
html {
    font-size: max(16px, 1.1111vw);
}

.container {
    width: min(73.125rem, 95vw);
    max-width: none;
}

/* Container nesting fix - templatemo's navbar HTML nests .container
   inside .container (Bootstrap 3 docs explicitly forbid this). The
   fluid .container rule above would then apply twice, making the inner
   container overflow its parent by ~30px and pushing the hamburger
   dropdown past the navbar's right edge. This one rule makes any
   nested .container collapse to 100% of its parent's content area. */
.container .container {
    width: 100%;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 0.875rem; }
h6 { font-size: 0.75rem; }

/* (was: body, html { overflow-x: hidden } - removed in cleanup pass.
   This was a band-aid masking horizontal overflow from other rules;
   the responsive overhaul fixed the underlying causes. If horizontal
   overflow reappears, find and fix the offending element rather than
   re-enabling this rule. The scoped overflow-x: hidden inside the
   carousel rules below is unrelated and stays.) */

body {
    background: url('../images/Menu2.jpg') ;
	-webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;
        overflow-x: hidden;
        max-width: 100%;
    font-family:  'Open Sans', Arial, Helvetice Neue, sans-serif;
    font-size: 0.75rem;
	text-shadow: 0.125rem 0.125rem #000000;
	
	font-weight: 300; 
	font-style: normal; 
	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
	-webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, span, p { font-family: 'Open Sans', Arial, Helvetice Neue, sans-serif; }

* {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

.templatemo_clear {
	clear: both;
}

.height30 {
	height: 1.875rem;
}

.templatemo-top-bar {
    min-height: 2.5rem;
    background: url('../images/bg2.jpg') no-repeat center center;
}

.templatemo-top-menu {
    min-height: 6.875rem;
    background: url('../images/bg2.jpg') no-repeat center center;
    /* z-index needs a non-static position to take effect. Without
       this, the hamburger dropdown rendered behind the carousel
       sibling at <768 viewport, making the menu look broken. */
    position: relative;
    z-index: 5000;
    width: 100%;
}

/* (was: .templatemo-top-menu .-toggle - whitespace in the selector
   broke the descendant chain so the rule matched nothing; removed.) */

.templatemo-top-menu .navbar-brand {
    padding: 0;
    margin: 1.875rem 0 0 0;
}

/* Logo viewport-scaling. Intrinsic 246x52; the original max-height: 5rem
   never shrank the logo (already smaller than the cap). Replace with an
   explicit viewport-scaled height so the logo shrinks at narrow widths,
   freeing horizontal space so the inline menu stays one row deeper into
   narrow viewports before collapsing.
   Math: 52px = intrinsic ceiling; 3.6vw = 52/1440 (preserves baseline at
   the design viewport); 1.5rem (24px) floor leaves enough horizontal
   space for the longer nav labels (DISCOGRAPHY / BIOGRAPHY) before the
   early-collapse threshold below. */
.templatemo-top-menu .navbar-brand img {
    height: clamp(1.5rem, 3.6vw, 52px);
    width: auto;
}

/* ============================================================
   Carousel consolidation (templatemo site recipe section 3).
   The original templatemo CSS had three carousel sections
   (#templatemo-carousel, -carousel2, -carousel3) where most inner
   rules in sections 2 and 3 typo-targeted #templatemo-carousel
   instead of their own selector. The result was a buggy cascade
   where section 3's rules won, giving the homepage carousel an
   item box at 6.25rem (100px) tall with a 21.875rem (350px) top
   margin - putting the caption well below the visible area. That
   buggy cascade IS the original visible state on the live site,
   so we preserve it explicitly here rather than "fix" the geometry.
   The mobile pass at the end of this file overrides the height
   and margin at <=767px so the homepage caption shows on phones.
   Vendor prefixes (-webkit/-moz/-o-background-size) from the
   original CSS were dropped - unprefixed background-size has been
   universally supported since IE10.
   ============================================================ */

/* ---- Homepage hero ---- */
#templatemo-carousel {
    background: url('../images/bg3.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow-x: hidden;
    margin-bottom: 0;
    height: 50rem;
    border: 0.125rem solid #ccffff;
    color: #ffffff;
}

#templatemo-carousel .carousel-caption {
    z-index: 10;
    color: #ffffff;
    text-shadow: 0.1875rem 0.1875rem 0.1875rem #000000;
}

/* Preserved cascade-winner values from the original buggy CSS
   (came from #templatemo-carousel3's typo-targeted rules). The
   item box is much shorter than the container and the large
   top margin moves it past the visible area. Mobile block below
   overrides both. */
#templatemo-carousel .item {
    height: 6.25rem;
    margin-top: 21.875rem;
}

#templatemo-carousel .carousel-inner > .item > img {
    position: absolute;
    min-width: 100%;
    height: 6.25rem;
    left: 0;
    top: 0;
}

@media (min-width: 768px) {
    #templatemo-carousel .carousel-caption p {
        margin-bottom: 1.25rem;
        line-height: 1.4;
        font-size: 1.3125rem;
    }
    #templatemo-carousel .carousel-caption {
        padding-bottom: 2.5rem;
        right: 20%;
        left: 20%;
    }
}

@media (max-width: 768px) {
    #templatemo-carousel .carousel-caption {
        padding-bottom: 2.5rem;
    }
}

/* Cascade winner from original section 3 - swaps to the smaller bg
   image and forces height: 6.25rem at <=1024. Also part of the
   buggy cascade; preserved to match original visible state. */
@media (max-width: 1024px) {
    #templatemo-carousel {
        background: url('../images/bg3(small).jpg') no-repeat center center;
        background-size: cover;
        overflow-x: hidden;
        margin-bottom: 0;
        height: 6.25rem;
    }
}

/* ---- Sub-page hero ---- */
#templatemo-carousel2 {
    background: url('../images/bg3.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow-x: hidden;
    margin-bottom: 0;
    height: 25rem;
    border: 0.125rem solid #ccffff;
}

/* ---- Store minimal hero ---- */
#templatemo-carousel3 {
    background: url('../images/bg3.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow-x: hidden;
    margin-bottom: 0;
    height: 6.25rem;
    border: 0.125rem solid #ccffff;
    color: #ffffff;
}

/* ------ Welcome & Slogna ------ */
.templatemo-welcome {
    border-bottom: 0.0625rem solid #cccccc;
    min-height: 14.375rem;
}

.templatemo-slogan {
    font-family:  'Open Sans', sans-serif;
	
    font-weight: normal;
    font-size: 2.625rem;
    margin: 3.75rem 0;
    color: #cccccc;
}

.templatemo-service {
    margin-bottom: 1.5625rem;
    margin-top: 1.5625rem;
}

.templatemo-service-item {
    font-family:  'Open Sans', sans-serif;
    margin-bottom: 0.625rem;
    font-size: 1.25rem;
}


.templatemo-service-item p {
    font-weight: lighter; 
    text-align: justify; 
    margin-top: 1.5625rem;
    font-size: 0.875rem;
    color: #00ced1;
}

.subheader {
    font-family: 'Open Sans', sans-serif;
    font-weight: normal;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: #b0e0e6;
}


.btn-orange {
    background-color: #605ba7;
    border-bottom:0.125rem solid #663366;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color:#ffffff;
}

.btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active, .open .dropdown-toggle.btn-orange {
    background-color: #6633cc;
    color:#cccccc;
}

.btn-green {
    background-color:#009999;
    border-bottom:0.125rem solid #330066;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    color:#ffffff;
}

.btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .open .dropdown-toggle.btn-green {
    background-color: #3399cc;
    color:#ffffff;
}

.nav > li > a {
    padding: 0.625rem 1.25rem;
}

/* Hover/focus on nav links. Original `#black`/`#white` are invalid CSS
   (color names don't take a hash prefix), so hover did nothing visible
   - which made it impossible to tell the user was on a link before
   clicking. Use the same blue family as the active state at lower
   alpha so hover reads as a subtler shade of "this is interactive". */
.nav > li > a:hover,
.nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: rgba(102, 204, 255, 0.15);
    color: #ffffff;
}

/* Nav link text legibility. Body is 0.75rem (12px) weight 300 - nav
   inherits and looks thin/wispy on the dark bg. Bump nav text only
   (scoped via .templatemo-top-menu), and shrink the padding so each
   link's overall rectangle stays close to its previous size and the
   navbar's inline width - and the wrap threshold - don't shift. */
.templatemo-top-menu .navbar-nav > li > a {
    font-size: 0.8125rem;
    padding: 0.5625rem 1.0625rem;
}

/* Inline-margin replacement (cleanup pass). Every navbar <ul> in the
   templatemo HTML had an inline style="margin-top: 40px" to drop the
   nav links to roughly the vertical centre of the logo at desktop.
   That inline style has been swept out of all HTML files; this CSS
   rule preserves the desktop spacing. The early-collapse rule (768-
   774) and mobile pass (<=767) further down the file override this
   with !important on narrow viewports. */
.templatemo-top-menu ul.nav.navbar-nav {
    margin-top: 2.5rem;
}

/* Early hamburger collapse - custom range above BS3's default 768.
   With the templatemo logo plus 6 nav links (some long: DISCOGRAPHY,
   BIOGRAPHY), the inline menu wraps to two rows around 768-790
   viewport. Force the collapsed state slightly earlier so the
   doubling never shows. The 774 ceiling matches MR/BB/EM - bump
   higher if AT's nav still doubles up; drop if you want a wider
   inline range. */
@media (min-width: 768px) and (max-width: 774px) {
    .templatemo-top-menu .navbar-header {
        float: none;
    }
    .templatemo-top-menu .navbar-toggle {
        display: block;
    }
    .templatemo-top-menu .navbar-collapse.collapse {
        display: none !important;
    }
    .templatemo-top-menu .navbar-collapse.collapse.in {
        display: block !important;
    }
    .templatemo-top-menu ul.nav.navbar-nav {
        float: none;
        /* overrides the inline style="margin-top: 40px" on every navbar <ul>
           - inline beats CSS without !important. The mobile pass at the
           bottom of this file does the same at <=767. */
        margin-top: 0.46875rem !important;
        margin-left: -0.9375rem;
        margin-right: -0.9375rem;
    }
    .templatemo-top-menu .navbar-nav > li {
        float: none;
    }
    .templatemo-top-menu .navbar-nav > li > a {
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
}


.nav > li > a {
    color: #cccccc;
}
.navbar-default {
    background-color:#000022;
    border:none;
	
	border: 0.125rem solid #ccffff;
}

/* Active page indicator. Original used opacity: 0.25 which faded the
   entire link including the text - making the current page the LEAST
   readable in the menu. Also used invalid `color: #white` (color names
   don't take a hash prefix). Use an rgba background instead so the
   tint is on the background only, with full-opacity white text.
   rgba(102,204,255,0.25) is the same effective shade as the original
   #66ccff at 25% opacity over the #000022 navbar bg. */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: rgba(102, 204, 255, 0.25);
    color: #ffffff;
}

.navbar {
    margin-bottom: 0rem;
}

.templatemo-service-item-header {
    margin-left: -0.625rem; 
    padding: 1rem 1.25rem 1.25rem; 
    font-weight: bold;
    display: inline-block;
	color: #ffffff;
	text-align: center;
}

.templatemo-header-orange {
    background-color: #cccccc;
    min-width: 18.625rem;
    height: 4.1875rem;
    color: black;            /* was invalid #black */
}

.team_hr {
    border: 0.0625rem solid #fff; 
    width: 39.5%; 
    float: left;
}

.team_hr_left {
    margin-right: 1.875rem;
    margin-left: 0.9375rem; 
}

.team_hr_right {
    margin-left: 1.875rem;
}

.hr_gray {
    border: 0.0625rem solid #cccccc; 
}
.team_hr2 {
    border: 0.0625rem solid #fff; 
    width: 29.5%; 
    float: left;
}

.team_hr_left2 {
    margin-right: 1.25rem;
    margin-left: 0.9375rem; 
}

.team_hr_right2 {
    margin-left: 1.25rem;
}

.templatemo-team {
    background: url('../images/background.png') ; 
    font-family:  'Open Sans', sans-serif;
    min-height:36.875rem;
    color:#ffffff;
	border: 0.125rem solid #ccffff;

}

.templatemo-team2 {
    background: url('../images/Menu2.jpg') ; max-width: 100%;
    font-family:  'Open Sans', sans-serif;
    min-height:36.875rem;
    color:#ffffff;
	border: 0.125rem solid #ccffff;

}
.templatemo-line-header {
    margin-top:1.5625rem;
    margin-bottom:5rem;
}

.member-thumb:hover .thumb-overlay {
    transition: all 0.3s ease-in-out 0s;
    visibility: visible;
    opacity: 1;
}

.member-thumb {
    position: relative;
    overflow: hidden;
	border: 0.125rem solid #000000;
}

.member-thumb .thumb-overlay {
    /* (was: background-color: ; - empty value, browser ignored; removed) */
    border: 0.125rem solid #660066;
    position: absolute;
    visibility: hidden;
    padding-top: 0;
    padding-left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    right: 0;
    top: 0;
	float:inherit
	
}

.thumb-overlay a {
    float:left;
    margin-right: 0.3125rem;
}



.team-inner {
    margin-top:0.625rem;
}

.team-inner-header {
    font-family: 'Open Sans', sans-serif;
    font-weight:600;
    font-size:0.75rem;
}

.team-inner-subtext {
    font-weight:normal;
    font-size:0.75rem;
}

.row_team {
    margin-left:-3.125rem;
    margin-top:4.375rem;
}

.row_team li {
    list-style: none;
}

/* Bootstrap 3 has no breakpoint below xs (768). The discography grid
   uses col-xs-6 which gives 2 cols at any viewport below sm (767), all
   the way down to 320px - cards get crushed. Force one column when
   the viewport drops to phone-sized so the grid finishes the ladder
   at 5->4->3->2->1 instead of bottoming out at 2 cols. */
@media (max-width: 480px) {
    .row_team > li {
        width: 100%;
    }
}

/* 5c: cap .member-thumb at the album image's intrinsic size at narrow
   viewports. Without a cap, when the column gets wider than the image,
   the .img-responsive image is visually stretched to fill (pixelating),
   and the .thumb-overlay (which fills the .member-thumb container)
   renders into the empty stretched rectangle around the actual image.
   31.25rem = 500px matches the album thumbnails after the 5d swap. */
@media (max-width: 767px) {
    .member-thumb {
        max-width: 31.25rem;
        margin-left: auto;
        margin-right: auto;
    }
}

.templatemo-project-box {
    background-size: cover;
    position: relative;
    overflow: hidden;
    cursor:pointer;
    height: 12.5rem;
    width: 12.5rem;
}

.templatemo-project-box:hover .project-overlay {
    transition: all 0.3s ease-in-out .0s;
    visibility: visible;
    opacity: 1;
}

.project-overlay {
    background : rgba(0,0,0,.75);
    border : 0.125rem solid #660066;
    visibility: hidden;
    position: absolute;
    text-align:center;
    padding-top:2.5rem;
    color: #ffffff;
    height: 100%;
    width: 100%;
    opacity: 0;
    right: 0;
    top: 0;
}


.project-overlay hr {
    width : 70%;
	
}

.templatemo-project-gallery li {
    margin:0.9375rem;
}

.txt_darkgrey {
    color: #ffffff;
}

.txt_orange {
    color: #fffff;
}

.txt_slogan {
    font-size:0.875rem; 
    color:#fffff;
}

.templatemo-line-header span {
    font-size: 1.125rem; 
    float :left; 
    margin-top: 0.625rem;
}

.team_box  div {
    text-align: center; 
    padding-top: 6.25rem;
}

.span_blog {
    margin-bottom: 5rem;
}

.blog_post {
    color: #ccccc; 
    padding: 0.625rem;
}

.blog_header {
    font-weight: bold; 
    font-size: 1rem; 
}

.blog_text {
    text-align: justify; 
    font-size: 0.875rem; 
    margin-top: 1.25rem;
}

#templatemo-contact {
	margin-top:1.5625rem; 
	border-top: 0.0625rem solid #ccffff; 
	font-size:0.875rem;
	
}
.templatemo-contact-map {
    margin-bottom: 0.9375rem;
    height: 23.625rem;
	

}

.head_contact {
    padding-bottom:5rem; 
    margin-bottom:0;
}

.contact_right img {
	margin-right:0.3125rem;
}

.contact_right form {
	padding-left:0.9375rem;
	padding-right:0.9375rem
}

.tweet_txt {
	border-left:0.125rem solid #ccffff; 
	min-height:10rem;
}

.twitter_user {
	color: #FFFF33; 
	font-size: 0.875rem;
	float: right;
}

.templatemo-partners {
	border-top: 0.125rem solid #ccffff;
}

.templatemo-partners .templatemo-partner-item {
    margin-bottom: 0.3125rem;
}

.templatemo-footer {
	border-top: 0.125rem solid #ccffff; 
	margin-top: 6.25rem;
}

.footer_container {
	margin-top:3.75rem; 
	margin-bottom:1.25rem;
}

.footer_bottom_content {
	margin: auto;
	margin-bottom: 1.875rem;
	font-size: 0.875rem;
	color:#333333;
}

.social-icon-fb {
    background: url('../images/icons/transparent/Facebook.png') no-repeat;
    width: 4.5rem;
    height: 4.5rem;
    display: block;
}

/* Overlay scaling (templatemo recipe section 5e). The original
   .artist (31.25rem / 500px) and .artist2 (15.625rem / 250px) used
   fixed sizes that didn't scale with the album column - at narrow
   viewports the overlay was much wider than its album, bleeding
   sideways. Replace with percentage-based sizing scoped against a
   .thumb-overlay > a that's now position: relative + full size, so
   the overlay can absolute-position relative to its actual card.
   The 190.48% figure = 500 / 262.5 where 500 was the original
   .artist fixed pixel size and 262.5 is the baseline album column
   width (col-lg-3 customized to 20% inside a 1170 container, minus
   gutter). Both .artist and .artist2 collapse to the same percentage
   so the hover overlay looks identical regardless of which class
   the HTML uses.
   Source GIF swapped from the 250-size to the 500-size variant
   (7(250)(transparent).gif -> 7(transparent).gif) so the higher
   resolution doesn't pixelate when scaled up at wide viewports. */
.member-thumb .thumb-overlay a {
    display: block;
    width: 100%;
    height: 100%;
    float: none;
    margin-right: 0;
    position: relative;
}

.artist,
.artist2 {
    background: url('../images/animated/7(transparent).gif') no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 190.48%;
    height: 190.48%;
    display: block;
}


a:hover .social-icon-fb {
    background: url('../images/icons/transparent/facebook3.gif') no-repeat;
}

.social-icon-rss {
    background: url('../images/icons/transparent/Googleplus.png') no-repeat;
    width: 4.5rem;
    height: 4.5rem;
    display: block;
}

a:hover .social-icon-rss {
    background: url('../images/icons/transparent/googleplus.gif') no-repeat;
}

.social-icon-twitter {
    background: url('../images/icons/transparent/Twitter.png') no-repeat;
    width: 4.5rem;
    height: 4.5rem;
    display: block;
}

a:hover .social-icon-twitter {
    background: url('../images/icons/transparent/twitter.gif') no-repeat;
}

.social-icon-linkedin {
    background: url('../images/icons/transparent/Soundcloud.png') no-repeat;
    width: 4.5rem;
    height: 4.5rem;
    display: block;
}

a:hover .social-icon-linkedin {
    background: url('../images/icons/transparent/soundcloud.gif') no-repeat;
}

.social-icon-dribbble {
    background: url('../images/icons/transparent/Youtube.png') no-repeat;
    width: 4.5rem;
    height: 4.5rem;
    display: block;
}

a:hover .social-icon-dribbble {
    background: url('../images/icons/transparent/youtube.gif') no-repeat;
}

ul.templatemo-project-gallery  li  a img:hover {
    border: 0.1875rem solid #ff7600;
}

.templatemo-gallery-category a {
	color:#333333; 
}

.templatemo-gallery-category a.active {
	color:#e67e22; 
	text-decoration:none;
}

.templatemo-gallery-category a:focus {
	color:#e67e22;
	text-decoration:none;	
}

.templatemo-gallery-category a:hover {
	color:#e67e22; 
	text-decoration:none;
}

.link_orange:hover {
    text-decoration:none;
}
.templatemo-project-gallery {         
    margin:0 0 0 0;
    margin-top:1.875rem;
    margin-left: -2.5rem;
}
.templatemo-project-gallery li {     
    list-style:none;
    margin-bottom:1.5625rem;           
}
.templatemo-project-gallery li img {
  cursor: pointer;
}

.templatemo-tweets {
    background-color: #8996a0;
    min-height:12.5rem;
    font-family:  'Open Sans', sans-serif;
    font-size:1.25rem;
    color:#ffffff;
    margin-top:6.25rem;
}

.form-control {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-style: italic;
}

.btn_loadmore {
	margin-top:1.875rem; 
	margin-bottom:5rem;
}

.blog_box {
	margin-left: -0.75rem;
}

@media (min-width:991px) and (max-width:1200px) {
    .templatemo-project-box, .project-overlay {
        height:10.625rem;
        width:10.625rem;
    }

    .templatemo-project-gallery {
        margin-left: -4.375rem;
    }

    .templatemo-service-item-header {
        padding: 1rem 0.625rem 1.25rem;
    }

    .templatemo-header-orange {
        min-width: 14.375rem;
    }

    .team_box,  .team_box_over {
        height:13.75rem;
        width:13.75rem;
    }
	
}


@media (max-width:991px) {
    .team-inner {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
    }
	
    .templatemo-btn-read-more {
        float:right;
        margin-bottom :2.5rem; 
    }
}


@media (min-width:768px) and (max-width:990px) {
    /* (removed: .member-thumb .thumb-overlay padding-left: 30% -
       artifact of the old float-based overlay layout; the new
       percentage-based .artist/.artist2 in section 5e replaces it.) */
    .templatemo-project-box , .project-overlay {
       height:8.125rem;
       width:8.125rem;
       padding-top: 0rem;
    }

    .templatemo-project-gallery {
       margin-left: 0.625rem; 
    }

    .blog_box{
       margin-right: -8.75rem;
    }
}


@media (min-width: 768px) {
  .navbar-nav > li > a {
    padding-top: 0.5625rem;
    padding-bottom: 0.5625rem;
  } 
}

@media (max-width: 768px) {
    /* (removed: .member-thumb .thumb-overlay padding-left: 10% -
       same reason as the 768-990 block above.) */
    .templatemo-btn-read-more {
            float:right;
            margin-bottom :2.5rem;
      }
}

@media (max-width: 380px) {
    /* (removed: .member-thumb .thumb-overlay padding-left: 30% -
       same reason as the 768-990 block above.) */
	.templatemo-service-item-header {
		font-size: 1rem;
		
		padding: 1.4375rem 0.625rem 1.375rem;
	}
	.templatemo-header-orange {
		min-width: 0rem;
	}
	
}

@media (min-width:991px) and (max-width: 1200px) {
	 .team_hr {
		width: 37%; 
	}
}

@media (min-width:683px) and ( max-width: 991px) {
	 .team_hr {
		width: 33%;
	}
}

/* (removed: original templatemo CSS had a stepped .team_hr width
   ladder at 30%/28%/21%/11% across 585-683 / 536-585 / 410-536 /
   max-410, plus a .thumb-overlay padding-left at 25% in the
   585-683 block. All artifacts of the old float-based section-
   header layout; the mobile pass below centers headers with
   flexbox, making the mobile-range ladder redundant. The
   desktop/tablet .team_hr widths at 991-1200 (37%) and 683-991
   (33%) above are still in use for desktop centering. */

/* =====================================================
   Mobile pass (templatemo site recipe section 6).
   Phone-specific overrides scoped to <=767. Each chunk
   addresses a specific issue visible only at phone width.
   ===================================================== */

@media (max-width: 767px) {
    /* Chunk A - Homepage hero. The buggy carousel cascade preserved
       at desktop (height 6.25rem container + 21.875rem top margin)
       puts the caption entirely off-screen on phone. Give the
       container a phone-proportioned height and put .item back
       inside the visible area. */
    #templatemo-carousel {
        height: 16rem;
    }
    #templatemo-carousel .item {
        height: 100%;
        margin-top: 0;
    }

    /* Chunk B - Kill the 40px gap at the top of the hamburger
       dropdown. The inline style margin-top: 40px on every navbar
       <ul> aligns inline links with the logo at desktop but creates
       an awkward empty band above the first dropdown item at mobile.
       !important required because we are overriding inline style. */
    .templatemo-top-menu ul.nav.navbar-nav {
        margin-top: 0.46875rem !important;
    }

    /* Chunk C - Sub-page hero was 25rem (400px) tall with no mobile
       override, eating ~50% of a phone viewport for a purely
       decorative banner (caption divs are empty on sub-pages). */
    #templatemo-carousel2 {
        height: 10rem;
    }

    /* Chunk D - Center the section headers (OUR ARTISTS / GUEST
       ARTISTS / DISCOGRAPHY style). The original float-based layout
       uses HR widths tuned by a stepped media-query ladder (now
       removed); at phone widths the math leaves the row packed
       against the left edge. Flexbox auto-centers the text between
       two equal-width decorative HRs at every mobile viewport. */
    .templatemo-line-header .text-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .templatemo-line-header hr {
        float: none;
        flex: 1 1 auto;
        margin: 0 0.625rem;
        width: auto;
    }
    .templatemo-line-header span {
        float: none;
        margin: 0;
        flex-shrink: 0;
    }

    /* Chunk E - Body text legibility. 0.75rem (12px) Open Sans Light
       reads small and fuzzy on phone. Bump body and grid-card labels
       independently since some labels have explicit font-size. */
    body {
        font-size: 0.875rem;
    }
    .team-inner-header {
        font-size: 0.9375rem;
    }
    .team-inner-subtext {
        font-size: 0.875rem;
    }
    /* Keep the carousel caption smaller - long captions can otherwise
       push past the hero on phones. */
    .carousel-caption {
        font-size: 0.75rem;
    }

    /* Chunk H - Shrink the welcome-section slogan. Desktop 2.625rem
       (42px) wraps to 3+ lines on a 375px phone. Clamp scales it
       gracefully: ~20px at 320 to ~28px at 560+. Per-site tunable
       if AT has a much longer slogan than MR/EM. */
    .templatemo-slogan {
        font-size: clamp(1.25rem, 5vw, 1.75rem);
        margin: 2rem 0;
    }

    /* Chunk I - Shrink the navbar wrapper 6.875rem (110px) min-height
       at mobile. With the logo at the ~24px clamp floor plus its
       30px top margin, actual navbar content is ~62px; the 110px
       wrapper floor adds a ~48px gap below the navbar. 5.5rem (88px)
       keeps about half that as a deliberate visual separator.
       Adjust to taste - 0 removes the gap entirely, 6.875rem
       restores the original. Always use min-height (not padding-
       bottom) so stickUp.js measures the wrapper correctly. */
    .templatemo-top-menu {
        min-height: 5.5rem;
    }

    /* Chunk G - Shrink footer social icons. Five icons at 4.5rem
       (72px) plus list-inline gutters comes to ~410px which overflows
       360px Android. 3rem (48px) is still well above the 44px tap-
       target floor. */
    .social-icon-fb,
    .social-icon-rss,
    .social-icon-twitter,
    .social-icon-linkedin,
    .social-icon-dribbble {
        width: 3rem;
        height: 3rem;
    }
}

/* Templatemo HTML quirk: many sub-pages have mismatched </div> tags
   that leave the .carousel-control chevrons outside of any actual
   .carousel element. They are also typically dead links (the href
   targets a carousel id that does not exist on the current page).
   Hide every chevron by default and re-show only ones that are
   direct children of an actual .carousel. Catches the bug regardless
   of which exact mismatch pattern landed the orphan (MR pattern:
   child of <body>; BB pattern: child of an unstyled wrapper div). */
.carousel-control {
    display: none;
}
.carousel > .carousel-control {
    display: block;
}

/* ============================================================
   Samantha Bouquin site-specific design overrides
   Everything above this point is the shared templatemo baseline
   with the full responsive overhaul applied. Rules below preserve
   SB's existing visual aesthetic: dark page background with a
   LIGHT center panel containing BLACK text, matching the look of
   the original Dreamweaver-era site. Keep this block at the end
   so source order beats the templatemo defaults on equal
   specificity.
   ============================================================ */

/* Body background uses Menu2.jpg (sourced from TSDF as a placeholder
   until SB-specific bg art is created). background-size: 100% scales
   it to viewport width; it tiles vertically below the natural-height
   strip. Same pattern as the other sister sites. The light-cream
   welcome panel (defined below) sits on top of this, giving SB its
   "dark page framing a light center panel" aesthetic. */
body {
    background: url('../images/Menu2.jpg');
    background-size: 100%;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;
}

/* Override default white nav-link color so it reads on the dark
   navbar (which keeps templatemo's dark blue bg). */
.nav > li > a {
    color: #ffffff;
}

/* Welcome-section panel - SB's signature look. Light parchment-cream
   background (matches the visual feel of mainbackground.jpg's center
   panel), centered, with a subtle cyan border to retain a thread of
   the sister-site family identity. Black body text inside so it
   reads on the light bg. */
.templatemo-welcome {
    width: 80%;
    margin: 1.5rem auto;
    padding: 2rem 1.5rem;
    border: 0.125rem solid #ccffff;
    background-color: rgba(250, 244, 224, 0.95);
    color: #000000;
}
.templatemo-welcome .container {
    width: 100%;
}
.templatemo-welcome,
.templatemo-welcome p,
.templatemo-welcome span,
.templatemo-welcome a {
    color: #000000;
    text-shadow: none;
}
.templatemo-welcome a {
    text-decoration: underline;
}
.templatemo-welcome a:hover {
    color: #333366;
}

/* Slogan / heading inside welcome - black + heavier weight,
   matching SB's original .text style (Arial bold center). */
.templatemo-welcome .templatemo-slogan {
    color: #000000;
    font-weight: bold;
    text-align: center;
    font-size: 1.5rem;
    margin: 1rem 0;
}
.templatemo-welcome .txt_darkgrey,
.templatemo-welcome .txt_orange {
    color: #000000;
}