button:focus {
    outline: none;
}

html,body {
    height:100%;
    width: 100%;
    font-size: 16px;
}

h1,h2,h3,h4,h5,h6,small {
    margin: 0;
    padding: 0;
    text-align: left;
    text-shadow: none;
}

h1 , .sample-playlist .top-caption h2 {
    font-size: 2.5rem;
    margin: 0 0 .75rem 0;
    font-weight: 700;
    line-height: 0.9;
    text-transform: uppercase;

}

h2 {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0 0 .5rem 0;
}

h3 {
    font-size: 1.67rem;
    font-weight: 700;
    line-height: 1.1;   /* for blog titles*/
    text-transform: uppercase;
    margin: 0 0 .5rem 0;
}

h4{
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0 0 .5rem 0;
}

h5 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.3rem 0;
}

h6 {
    font-size: 0.866rem;
    font-weight: 400;
}

a,p {
    font-size: .9rem;
    padding: 0 0 0 0;
    margin: 0;
    text-shadow: none;
    text-align: left;
}

a {
    font-weight: 700;
}
a,a:hover {
    text-decoration: none !important;
}

a:visited {
    text-decoration: none !important;
}

p {
    font-weight: 400;
    margin:  0 0 0.5rem 0;
}

blockquote {
    border: none;
    padding: 0;
    margin: 0;
}

.nobr	{ white-space:nowrap; }

/*form autofill stuff */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #15bb9f !important;

}

.inline {
    display: inline !important;
}

.white {
    color: #ffffff;
}

.green {
    color: #15bb9f;
}

.darkgreen {
    color: #0f8773;
}

.red {
    color: red;
}

.darkred {
    color: darkred;
}

.green-bg {
    background-color: #15bb9f;
}

.darkgreen-bg {
    background-color: #0f8773;
}

.orange-bg {
    background-color: darkorange;
}

.purple-bg {
    background-color: mediumpurple;
}

.blue-bg {
    background-color: cornflowerblue;
}

.pink-bg {
    background-color: lightpink;
}

.yellow-bg {
    background-color: lightgoldenrodyellow;
}

.plum-bg {
    background-color: plum;
}

.darkred-bg {
    background-color: darkred;
}

.medgrey-bg {
    background-color: #383838;
}

.bg-panel {
    position: relative;
    padding: 1rem;
    background-color: #202020; /* IE8 fallback */
    background-color:rgba(32,32,32,0.9);
}


/* custom headers / features

   mobile first so make sizes fixed as android
   jumps around when browser bar disappears if we
   user percentages

   full page is used in the media queries
*/

.custom-header {

    height: 100%;  /*fallback*/

    height: 140vw;
    max-height: 93vh;
    padding-top: 50px;

}

.custom-feature-full,.custom-feature-our-service {
    height: 100%;  /*fallback*/

    height: 140vw;
    max-height: 100vh;
}

.custom-feature-long {
    height: 640px;  /*fallback*/
    height: 40rem;
}


.divider {
    height: 1rem;
    border-bottom: 1px solid #393939;
    margin-bottom: 1rem;
}

.max-container-width {
    max-width: 1600px;
    margin: 0 auto;
}


/*static section*/
.static-section {
    height: 100%;
    position: relative;
}

.static-section .static-image {
    position: relative;
    height: 100%;
}


.static-section .static-caption, .carousel-caption {

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/gradients/hires/gradient-bottom.png', sizingMethod=scale);
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/gradients/hires/gradient-bottom.png', sizingMethod='scale')";
    background: url(../../../images/gradients/hires/gradient-bottom.png) 0% 100% / contain repeat-x ;
    background: linear-gradient( rgba(0,0,0,0), rgba(0,0,0,0.7) );

    margin: 0;
    padding-top: 1rem;  /* if using static menu*/
    padding-bottom: 3rem;

}

.caption-inner {
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

.caption-box {
    background: rgba(0,0,0,0.5);
    padding: 1rem 2rem 0.5rem 1rem;
    margin-bottom: 1rem;
}

.static-section .top-caption-gradiant {
    position: absolute;
    width:100%;
    height: 50%;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/gradients/hires/gradient-top.png', sizingMethod=scale);
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/gradients/hires/gradient-top.png', sizingMethod='scale')";
    background: url(../../../images/gradients/hires/gradient-top.png) 0 0 / contain repeat-x;
    background: linear-gradient( rgba(0,0,0,0.7), rgba(0,0,0,0) );
    margin: 0;
    z-index: 0;

}

.static-section .top-caption {
    position: relative;
    padding-top: 3rem;
}

.caption-inner a {
    display: block;
    padding-top: 0.5rem;
}

.caption-inner a > .glyphicon , .caption-inner.glyphicon {
    padding-left: 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
}



.caption-inner p {
    max-width: 35rem;
}

.carousel-top {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    padding: 3rem 0 3rem 0;
    background: url(../../../images/gradients/hires/gradient-top.png) repeat-x;
    background: linear-gradient( rgba(0,0,0,0.7), rgba(0,0,0,0) );

}

.carousel-shortcuts a {
    font-size: 1.25rem;
    color: white;
}

.carousel-shortcuts a:hover {
    color: #15bb9f;
}

.header-carousel,
.header-carousel > .carousel-inner,
.header-carousel > .carousel-inner .item,
.header-carousel  .carousel-inner .carousel-item {
    height: 100%;
}

.feature-static {
    padding-top: 3rem; /* if using static menu */
    padding-bottom: 3rem ; /* if using static menu */
    /*padding: 3rem 0 6rem 0;   if using fixed menu*/
}

.large-chevron-up {
    display: inline-block;
    margin: 0 0 .5rem .5rem;
    transform:scale(2,1);
    -webkit-transform:scale(2,1);

}

.center-block {
    display: block;
    text-align: center;
    width: 100%;
}
/*  coverart */
.logo-med {
    width: 195px;
    height: 195px;
    background-color: hotpink;
}

.logo-med img {
    display: block;
    width: 100%;
    height: auto;
}

/* icons */
.green-icon-56 {
    width: 56px;
    height: 56px;
}

.green-icon-80 {
    width: 80px;
    height: 80px;
}


.facebook {  background: url(../../../images/icons/common/sprites.png) -168px 0  no-repeat; }
.twitter {  background: url(../../../images/icons/common/sprites.png) -224px 0  no-repeat; }
.linkedin {  background: url(../../../images/icons/common/sprites.png) -280px 0  no-repeat; }

.song-note {  background: url(../../../images/icons/common/sprites.png) 0 -56px  no-repeat; }
.place {  background: url(../../../images/icons/common/sprites.png) -80px -56px  no-repeat; }
.downdel {  background: url(../../../images/icons/common/sprites.png) -160px -56px  no-repeat; }
.quote {  background: url(../../../images/icons/common/sprites.png) -240px -56px  no-repeat; }
.globe {  background: url(../../../images/icons/common/sprites.png) -320px -56px  no-repeat; }

.social-icons {
    text-align: center;
    margin-top: 1rem;
}
.social-icons-inner {
    display:inline-block;
}

.social-icons .green-icon-56 {
    display:inline-block;
    margin: 0 .25rem;
}

.social-icons a:hover {
    opacity: 0.8;
}



a.navbar-brand:hover {
    opacity: 0.9;
}

/*hide home menu item as need it for joomla routing but we use logo */
.nav>li>a.homepage-menu-item {
    display: none;
}


/* logos */

.c-burn-music-logo {
    height: 50px;
    width: 40px;
    display: inline-block;
    background: url(../../../images/icons/common/sprites.png) 0 -462px  no-repeat;

}

/* product outlines */
.products {
    padding: 1.5rem 0;
}

/*
.products .divider {
    margin-top: 2rem;
}
*/

.product-outline {
    margin: 1rem auto 1rem auto;
}

.product {
    margin: 0 auto;
    min-height: 223px;

}

.product h4 {
    text-align: center;
    font-size: 1.8rem;
}

.product p {
    text-align: center;
    max-width: 260px;
    margin: 0 auto;
}



.revolutionlx .product-outline {
    background: url(../../../images/icons/common/sprites.png) 0 -732px  no-repeat;
    width: 290px;
    height: 64px;
}


.revolutionbe .product-outline {
    margin-top: 20px;
    background: url(../../../images/icons/common/sprites.png) -173px  -539px no-repeat;
    width: 196px;
    height: 176px;

}

.revolution100 .product-outline {
    background: url(../../../images/icons/common/sprites.png) 0  -511px no-repeat;
    width: 170px;
    height: 223px;
}

/* live stats & quotes */
.live-stat {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.live-stat-content {
    width:90%;
    margin: 0 auto;
    max-width: 18rem;
}

.live-stat-icon {
    width: 40%;
    float: left;
    padding-right: 1rem;
}


.live-stat-icon .green-icon-80 {
    float: right;
    margin-bottom: 1rem;
}

.live-stat-text {
    width: 60%;
    float: right;
}

.live-stat h3 {
    color: #15bb9f;
}
.live-stat h3,
.live-stat h5,
.live-stat a,
.live-stat p {
    text-align: center;
}

.live-stat a {
    display: block;
}

.live-stat .client-quote-four-line {
    max-width: 20rem;
    margin: 0 auto;
}

/* section specific*/

/*home - clients */


#home-feature-clients .carousel {
    padding: 1rem 0 2rem 0;
}

#home-feature-clients .logo-slide-container {
    width: 95%;
}

#home-feature-clients .logo-tile {
    margin: 0 auto 1.75rem auto;
    overflow: hidden;
}

#home-feature-clients img {
    width: 100%;
    max-width: 260px;
    height: auto;
}


#home-feature-clients a {
    display: block;
    margin: 0 auto;
    z-index: 1000;
}

#home-feature-stats.feature-static,
#client-feature-stats.feature-static,
#tech-feature-stats.feature-static {
    padding-bottom: 1rem;
}

/* contact feature*/
.feature-contact {
    padding-top: 5rem;
}

.feature-contact .title-row {
    padding: 0 0 1.5rem 0;
}

.feature-contact .contact-col {
    padding-bottom: 1.5rem;
}

.feature-contact .form-title {
    padding-bottom: 1rem;
}

.feature-contact a {
    padding: 0;
}

.feature-contact h4{
    text-transform: none;
}

.feature-contact form {
    padding: 0 0 1.5rem 0;
}

.feature-contact textarea {
    height: 229px;
}


.feature-contact .sanity {
    /*spam guard*/
    position: absolute;
    left: -50000px;

    /* alternative if tht does'nt work
    height: 0px;
    width: 0px;
    padding: 0;
    border: 0;
    */


}

.warning, .feature-contact .form-control.warn::-webkit-input-placeholder {
    color: darkred;
}

.legal {
    display: block;
    text-align: center;
}

#contact-submit,#order-music {
    font-size: 1.25rem;
    text-transform: uppercase;
}

.submit-success {
    font-size: 1.25rem;
    padding: 0;
}

.submit-warn.active {
    color: darkred;
    padding-bottom: 1rem;
}


/* clients */
#our-service-feature-case-studies {
    position: relative;

    height: 100%;
    width: 100%;

  }

#our-service-feature-case-studies .case-studies-title {
    position: absolute;
    top: 3rem;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 3;
}


#our-service-feature-case-studies .carousel-top {
    width: 100%;
    padding: 4rem 0 0 0;
    height: 200px;
    background: linear-gradient( rgba(0,0,0,0.95), rgba(0,0,0,0) );
}


#our-service-feature-case-studies .carousel-top-inner {
    position: relative;
    width: 80%;
    margin: 0 auto;

}


#our-service-feature-case-studies .icon-carousel-wrapper {
    width: 90%;

    margin: 0 auto;
}

#our-service-feature-case-studies .carousel-caption {
    background: url(../../../images/gradients/hires/gradient-bottom-abrupt.png) repeat-x;
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.9));
}

#our-service-feature-case-studies .carousel-control {
    width: 5%;
    background-image: none;
    text-align: center;
}

#our-service-feature-case-studies .carousel-control.left span{
    padding-right: 1rem;

}

#our-service-feature-case-studies a.carousel-logo,.case-study-header .client-logo {
    width: 162px;
    height:104px;
}

.case-study-label {
    padding-bottom: 1rem;
}

.case-study-slide-label {
    padding-bottom: 0.75rem;
}

.case-study-header .client-logo {  margin: 2rem auto 0rem auto; }

#case-study-greeneking .case-study-header .client-logo {  margin-top: 1.25rem; }
#case-study-loungers .case-study-header .client-logo {  margin-top: 1rem; }

#our-service-feature-case-studies a.carousel-logo {
    display: block;
    float: left;
    margin: 0 5px;
    overflow: hidden;
}

#our-service-feature-case-studies a.carousel-logo:hover {
    opacity: .9;
}


a.carousel-logo.sohohouse,#case-study-sohohouse .client-logo {   background: url(../../../images/client-logos/lg/logo-sprites.png) 0 0; }
a.carousel-logo.meatliquor,#case-study-meatliquor .client-logo {  background: url(../../../images/client-logos/lg/logo-sprites.png) -162px 0; }
a.carousel-logo.carhartt,#case-study-carhartt .client-logo {  background: url(../../../images/client-logos/lg/logo-sprites.png) -324px 0; }
.carousel-logo.loungers,#case-study-loungers .client-logo {  background: url(../../../images/client-logos/lg/logo-sprites.png) -486px 0; }
.carousel-logo.liberty,#case-study-liberty .client-logo {  background: url(../../../images/client-logos/lg/logo-sprites.png) -648px 0 ; }
.carousel-logo.greeneking,#case-study-greeneking .client-logo {  background: url(../../../images/client-logos/lg/logo-sprites.png) -810px 0; }
.carousel-logo.leon,#case-study-leon .client-logo {  background: url(../../../images/client-logos/lg/logo-sprites.png) -972px 0; }

#case-study-carousel .caption-inner p {
    max-width: none;
}



.fixed-bg  {
    position: fixed;
    left: 0;
    top: 50px;

    width: 100%;
    height: 100%;



}


.case-study-container {
    position: relative;
    margin: 0 auto;
    margin-top: 18rem;
    margin-top: 60vh;
    padding: 1rem;
}

.case-study-container-bg {
    z-index: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;

    /* IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* IE 5-7 */
    filter: alpha(opacity=50);

    opacity: 0.8;
}

.case-study-content {
    position: relative;
    z-index: 1;
}

.case-study-header {
    margin-bottom: 1rem;
}




.case-study-body {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.case-study-section {
    margin-bottom: 2rem;
    padding-left: 15px;
}

.case-study-section img {
    margin-top: 1rem;
}

[class^="case-study-image"] {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}
.case-study-leftcol  [class^="case-study-image"] {
    background-color: black;
    width: 100%;
    height: auto;
    margin-bottom: 2rem;

}

.case-study-section [class^="case-study-image"] {
    background-color: #202020; /*IE8 Fallback */
    background-color:rgba(32,32,32,0.8);

}

.case-study-testimonial {
    margin-bottom: 2rem;
}

.case-study-testimonial p {
    font-style: italic;
}

.case-study-testimonial footer {
    margin: 0;
    color: #15bb9f;
}

.case-study-music iframe {
    margin: 1rem 0;
}

.more-case-studies {
    display: block;
    margin-top: 1rem;
    text-transform: uppercase;
}




#case-study-liberty .case-study-image2 {  background: url('../../../images/pages/case-studies/640px/liberty-case-study2.jpg') 50% 0 / cover no-repeat; }
#case-study-liberty .case-study-image3 {  background: url('../../../images/pages/case-studies/640px/liberty-case-study3.jpg') 50% 0 / cover no-repeat; }


#our-service-feature-our-process {
    padding: 0;
}

#our-service-feature-our-process .process-intro {
    max-width: 35rem;
    margin: 3rem auto 2rem auto;
}

#our-service-feature-our-process .process-intro h2,
#our-service-feature-our-process .process-intro p {
    text-align: center;

}

#process-orbit-container {
    padding-left: 0;
    padding-right: 0;
}
#process-orbit.orbital-carousel {
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    height: 310px;
    width: 320px;
}

#process-orbit .orbit {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -115px;
    margin-top: -115px;
    width: 230px;
    height: 230px;


}

#process-orbit .orbit.dash { background:  url(../../../images/pages/our-service/lg/circle-dash-230.png) 0 0  no-repeat;}
#process-orbit .orbit.solid { background:  url(../../../images/pages/our-service/lg/circle-solid-230.png) 0 0  no-repeat;}


#process-orbit .orbiter {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0.6;
    width:70px;
    height: 70px;
    margin-left: -35px;
    margin-top: -35px;
}

.process-copy-middle {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 43%;
    width: 200px;
}

.process-copy-middle .caption {
    text-align: center;
    color: #15bb9f;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.6rem;
}

.process-copy-middle .bodytext,
.process-copy-bottom .bodytext{
    text-align: center;
    font-size: 1rem;
}

.process-copy-bottom  {
    min-height: 4rem;

    width: 300px;
    margin: 0 auto 1rem auto;
}



#process-orbit .consult {  background:  url(../../../images/icons/common/sprites.png) -400px -56px  no-repeat; }
#process-orbit .curate {  background:  url(../../../images/icons/common/sprites.png) -470px -56px  no-repeat; }
#process-orbit .install {  background:  url(../../../images/icons/common/sprites.png) -540px -56px  no-repeat; }
#process-orbit .maintain {  background:  url(../../../images/icons/common/sprites.png) -610px -56px  no-repeat; }
#process-orbit .evolve {  background:  url(../../../images/icons/common/sprites.png) -680px -56px  no-repeat; }

.rotateToPos1 {
    -webkit-animation: kf-rotateToPos1 1s ease-in-out 1 forwards;
    -moz-animation: kf-rotateToPos1 1s ease-in-out 1 forwards;
    -o-animation: kf-rotateToPos1 1s ease-in-out 1 forwards;
    animation: kf-rotateToPos1 1s ease-in-out 1 forwards;
}

@-webkit-keyframes kf-rotateToPos1 { from { 	-webkit-transform: rotate(0deg) ; }  to { 	-webkit-transform: rotate(72deg); } }
@-moz-keyframes kf-rotateToPos1 { from { 	-moz-transform: rotate(0deg) ; }  to { 	-moz-transform: rotate(72deg); } }
@-o-keyframes kf-rotateToPos1 { from { 	-o-transform: rotate(0deg) ; }  to { 	-o-transform: rotate(72deg); } }
@keyframes kf-rotateToPos1 { from { 	transform: rotate(0deg); }  to { 	transform: rotate(72deg); } }

/*
.orbitToPos1 {  animation: kf-orbitToPos1 1s ease-in-out 1 forwards; }
.orbitToPos2 {  animation: kf-orbitToPos2 1s ease-in-out 1 forwards; }
.orbitToPos3 {  animation: kf-orbitToPos3 1s ease-in-out 1 forwards; }
.orbitToPos4 {  animation: kf-orbitToPos4 1s ease-in-out 1 forwards; }
.orbitToPos5 {  animation: kf-orbitToPos5 1s ease-in-out 1 forwards; }


@keyframes kf-orbitToPos1 {
    from { 	transform: rotate(198deg) translateX(208.3%) rotate(-198deg) ;opacity: 0.6; }
    to { 	transform: rotate(270deg) translateX(208.3%) rotate(-270deg) ; opacity:1.0;}
}

@keyframes kf-orbitToPos2 {
    from { 	transform: rotate(-90deg) translateX(208.3%) rotate(90deg) ;opacity: 1.0; }
    to   {  transform: rotate(-18deg) translateX(208.3%) rotate(18deg); opacity: 0.6;}
}

@keyframes kf-orbitToPos3 {
    from   {  transform: rotate(-18deg) translateX(208.3%) rotate(18deg); }
    to { 	transform: rotate(54deg) translateX(208.3%) rotate(-54deg) ; }
}

@keyframes kf-orbitToPos4 {
    from    { 	transform: rotate(54deg) translateX(208.3%) rotate(-54deg) ; }
    to { 	transform: rotate(126deg) translateX(208.3%) rotate(-126deg) ; }
}

@keyframes kf-orbitToPos5 {
    from { 	transform: rotate(126deg) translateX(208.3%) rotate(-126deg) ; }
    to { 	transform: rotate(198deg) translateX(208.3%) rotate(-198deg) ; }
}
*/

#tech-feature-secretdj
{
    width: 100%;
    background: #c02c98;
}


.sample-playlist .bg-panel h4 {
    margin-bottom: 0.5rem;
}

#tech-feature-secretdj.feature-static {
    padding: 3rem 0 2rem 0;
}

#tech-feature-secretdj .bg-image {
    margin: 1rem auto 0 auto;
}


#tech-feature-secretdj h2 {
    margin-bottom: 0;
}


#tech-feature-secretdj .call-to-action {
    padding-top: 1rem;
    width: 100%;
}

#tech-feature-secretdj .call-to-action a {
    color: white;
}


.music-control-illustration {
    display: block;
    width: 100%;
    height: auto;
}



#music-control-feature-specification ul {
    padding-bottom: 0;
    max-width: 320px;
    margin: 0 auto;
}

#music-control-feature-specification li {
    font-size: 0.8rem;
}

#music-control-feature-specification .divider {
    margin-bottom: 2rem;
}

.secretdj-wrapper {
    margin: 0 auto;
}

.secretdj-wrapper b {
    font-size: 100%;
}

.secretdj-image {
    position: relative;
    width: 100%;
}


.secretdj-image .appstore-logos {
    position: absolute;
    bottom: 0;
    right: 0;
}

.secretdj-image .appstore-logos a {
    padding-left: 1rem;
}


.secretdj-toptext {
    margin: 0 0 1rem 0;
}

.secretdj-toptext b {
    font-size: 130%;
    text-transform: uppercase;
}


.secretdj-bodytext {
    margin-top: 1rem;
}


#secretdj-header-static {
    background-color: #c02c98;
    padding: 6rem 0 2rem 0;
}


#secretdj-feature-fat-jukebox {
    background-color: #30b246;
    padding: 2rem 0 1rem 0;
}

#secretdj-feature-am-the-jam {
    background-color: #2c7cc0;
    padding: 2rem 0 1rem 0;
}

#secretdj-feature-soul-sound {
    background-color: #801a4d;
    padding: 2rem 0 1rem 0;
}

#secretdj-feature-customise {
    background-color: #efab1e;
    padding: 2rem 0 1rem 0;
}

#secretdj-feature-customise .secretdj-bodytext {
    margin-top: 0;
    padding-top: 0;
}

#secretdj-feature-download {
    background-color: #282828;
}


#music-feature-mainstream-bar .top-caption-gradiant {
    height: 65%;
}

#music-feature-album-recommendations {
    padding-top: 6rem;
    position: relative;
}

#blog-feature-news {
    background-color: #000000;
}

#blog-feature-news .image-bg {

    position: absolute;
    height: 100%; /*fallback*/
    height: 100vh;
    width: 100%;
    left: 0;
    top: 50px;
}

.blog-intro {
    margin: 3rem 0 3rem 0;
}


.music-feature-container,.contact-form-container {
    max-width: 500px;
    margin: 0 auto 0  auto;
}

.music-feature-container  h2 {
    margin-bottom: 0.5rem;
}

.music-feature-container h5 {
    font-weight: 800;
    font-size: 1.2rem;
    color: #d4d4d4;
    margin-bottom: 1rem;
}


/*font awesome checkboxes*/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
    display: inline-block;
    font-family: FontAwesome;
    color: #15bb9f;
}

label {
    font-weight: normal;
    color: #15bb9f;
}

input[type=checkbox] + label:before { content: "\f096";font-weight: bold; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 9.5px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f046";font-weight: bold; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 7px; } /* allow space for check mark */

.order-item-group {
    margin-bottom: 1rem;
}

.order-item-holder {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 1rem 2rem 0.5rem 1rem;
    font-size: 18px;
    margin-bottom: 1rem;
}

.exhibition-banner-2018 {
    position: fixed;
    bottom: 0;
    margin-top: 50px;
    z-index: 2;
    width: 100%;
    background-color: #000;
    opacity: 0.9;
}

.exhibition-banner-2018 img {
    margin: 0 auto;
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
}

/*because 2021 has even more text and breaks on mobile*/
.custom-header-christmas {
    height: 100%;
}

.custom-header-christmas .caption-box p {
    max-width: none;
    font-size: 1.2rem;
}