/* general media queries */

/* bigger than xss - general

   this is implicitly (orientation: landscape) as the the next rule below specifies portrait
   the reason we don't explicilty specify landscape here is that the respond.min.js has issues
   with media queries containing orientation. Adam 28/11/15
*/
@media (min-width: 481px)  {



    h1 , .sample-playlist .top-caption h2  {
        font-size: 4rem;
        margin: 0 0 1rem 0;
    }

    h2 {
        font-size: 3rem;
        margin: 0 0 1rem 0;
    }

    h3 {
        font-size: 2.35rem;
        margin: 0 0 .75rem 0;
    }


    h4 {  font-size: 2rem; }

    h5 {  font-size: 1rem; }

    a,p { font-size: 1rem; }

    .nobr-xs-plus {
        white-space:nowrap;
    }
    .static-section .static-caption {
        padding: 3rem ;
    }

    .caption-inner {
        max-width: 500px;
    }

    .case-study-container {
        max-width: 500px;
    }

    /* on larger devices use full page less menu bar */
    .custom-header {

        min-height: 30rem;

        height: calc(100% - 50px); /* if using static menu */

        height: 100%; /*if using fixed menu */


        max-height: 1200px; /*reset */
    }


    .custom-feature-full {
        min-height: 40rem;
        height: 100%;
        max-height: 1200px; /*reset */
    }

    .custom-feature-our-service {
        min-height: 25rem;
        height: 100%;
        max-height: 1200px;
    }

    .custom-feature-long {
        min-height: 40rem;
        height: 100%;
        max-height: 800px; /*reset */

    }

    /*ensure xss is hidden above xss size*/
    .visible-xss {
        display: none !important;
        visibility: hidden !important;
    }

    #our-service-feature-case-studies .carousel-top {
        padding: 5rem 0 0 0;
        height: 280px;
    }

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

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

    #process-orbit.orbital-carousel {
        height: 420px;
        width: 420px;
    }

    #process-orbit .orbit {
        margin-left: -160px;
        margin-top: -161px;
        width: 320px;
        height: 320px;

    }

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

    #process-orbit .orbiter {
        width:96px;
        height: 96px;
        margin-left: -48px;
        margin-top: -48px;
    }


    #process-orbit .process-copy-middle {
        top: 36%;
    }

    #process-orbit .consult {  background:  url(../../../images/icons/common/sprites.png) -650px -136px  no-repeat; }
    #process-orbit .curate {  background:  url(../../../images/icons/common/sprites.png) -1034px -136px  no-repeat; }
    #process-orbit .install {  background:  url(../../../images/icons/common/sprites.png) -938px -136px  no-repeat; }
    #process-orbit .maintain {  background:  url(../../../images/icons/common/sprites.png) -842px -136px  no-repeat; }
    #process-orbit .evolve {  background:  url(../../../images/icons/common/sprites.png) -746px -136px  no-repeat; }

    #secretdj-feature-download .secretdj-tag {
        margin: 1rem 0;
    }

    #secretdj-feature-download .secretdj-bodytext {
        text-align: center;
    }

    .exhibition-banner-2018 {
        position: fixed;
        bottom: auto;
        margin-top: 50px;
    }

    .exhibition-banner-2018 img {
        max-width: 728px;
    }

}

@media (min-width: 481px) and (orientation: portrait)  {
    .custom-feature-our-service {
        height: 55%;
        height: 75vw;
    }
}

/* sm screens and above */
@media screen and (min-width: 768px) {

    .live-stat-content {
        max-width: none;
    }


    .live-stat-icon {
        width: 100%;
        float: none;
        padding-right: 0;
    }

    .live-stat-icon .green-icon-80 {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }

    .live-stat-text {
        width: 100%;
    float: none;
    }

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

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


    #home-feature-stats.feature-static {
        padding-top: 3rem;
        padding-bottom: 4rem;
    }


    #clients-static .caption-inner p {
        padding-right: 1rem;
    }

    .case-study-header .client-logo {
        float: right;
    }


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

    #our-service-feature-our-process .process-intro {
        margin: 7rem 0 0 1rem;
    }


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

    #our-service-feature-our-process .process-intro p {
        max-width: 16rem;
    }

    #process-orbit.orbital-carousel {
        margin: 0;
    }
    #case-study-sohohouse .overview {
        margin-right: 3rem;
    }

    .music-feature-container,.contact-form-container {
        max-width: 600px;
        margin: 0rem 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;
    }

    #music-feature-highend-restaurant .top-caption p {
        padding-right: 2rem;
    }

    #music-feature-boutique-hotel .top-caption p {
        padding-right: 1rem;
    }

    #music-control-feature-intelligent .music-control-illustration { padding: 2rem 0 0 0;}
    #music-control-feature-robust .music-control-illustration { padding: 2.5rem 0 0 0;}
    #music-control-feature-multi-zone .music-control-illustration { padding: 3rem 0 0 0;}
    #music-control-feature-music-updates .music-control-illustration { padding: 2rem 1rem 2rem 0;}
    #music-control-feature-legal .music-control-illustration { padding: 2rem 0 0 2rem;}

    #music-control-feature-specification ul {
        max-width: inherit;
        margin: 0;
    }


    .music-control-container,.caption-inner,.case-study-container,.tech-feature-container {
        max-width: 640px;
    }



}

/* md screens and above */
@media (min-width: 992px) {
    h1 , .sample-playlist .top-caption h2  {
        font-size: 5rem;
        margin: 0 0 1.25rem 0;
    }

    h2 {
        font-size: 4rem;
        margin: 0 0 1rem 0;
    }

    h3 {
        font-size: 2.66rem;
        margin: 0 0 1rem 0;
    }


    h4 {  font-size: 2.33rem; }

    h5 {  font-size: 1rem; }


    .carousel-control {
        width: 18%;
    }

    .revolutionlx .product-outline {
        margin: 95px auto 94px  auto;
    }

    .revolutionbe .product-outline {
        margin: 38px auto 38px  auto;
    }

    .case-study-leftcol {
        display: block;
    }

    .case-study-section [class^="case-study-image"] {
        display: none;
    }

    .case-study-content p {
        padding-right: 0.5rem;
    }

    /* trimming to line images with text */
    #case-study-liberty .case-study-leftcol [class^="case-study-image"]  {
        margin-bottom: 2.3rem;
    }

    #case-study-greeneking .case-study-leftcol [class^="case-study-image"]  {
        margin-bottom: 2.6rem;
    }

    #case-study-leon .case-study-leftcol [class^="case-study-image"]  {
        margin-bottom: 2rem;
    }

    #case-study-sohohouse .case-study-leftcol [class^="case-study-image"]  {
        margin-bottom: 2.5rem;
    }

    .music-control-container,.tech-feature-container {
        max-width: 1050px;
    }

    .caption-inner {
        max-width: 800px;
    }

    .case-study-container {
        max-width: 850px;
    }

    .music-feature-container,.sample-playlist,.contact-form-container {
        max-width: 850px;
    }

    .sample-playlist {
        padding: 4rem 0;
    }

    #featured-albums,#recommended-albums {
        margin: 0 20%;
    }

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

    #music-control-feature-intelligent .music-control-illustration { padding: 1rem;}
    #music-control-feature-robust .music-control-illustration { padding: 1rem;}
    #music-control-feature-multi-zone .music-control-illustration { padding: 1rem 1rem 0 0;}
    #music-control-feature-music-updates .music-control-illustration { padding: 1rem 3rem 2rem 1rem;}
    #music-control-feature-legal .music-control-illustration { padding: 1rem 1rem 0 0;}


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

    #secretdj-feature-download .secretdj-image .secretdj-bodytext {
        position: absolute;
        bottom: 5rem;
        right: 6.5rem;
        width: 17rem;
        margin: 0;
    }


    .secretdj-image .appstore-logos {
        padding-bottom: 15px;
        padding-right: 80px;
    }

    #secretdj-feature-download {
        padding-bottom: 2rem;
    }

    #secretdj-feature-download .secretdj-bodytext {
        padding: 0;
        margin: 1rem;
        text-align: center;
    }

    .secretdj-bodytext, .secretdj-toptext {
        margin-left: 68px;
    }


    .secretdj-wrapper {
        width: 759px;
    }

    .secretdj-image {
        height: 506px;
    }

    .secretdj-image .appstore-logos {
        padding-bottom: 20px;
        padding-right: 80px;
    }

    #secretdj-header-static .secretdj-bodytext { padding-right: 3rem; }
    #secretdj-feature-fat-jukebox .secretdj-bodytext { padding-right: 0; }
    #secretdj-feature-am-the-jam .secretdj-bodytext { padding-right: 2rem; }
    #secretdj-feature-soul-sound .secretdj-bodytext { padding-right: 1rem; }
    #secretdj-feature-customise .secretdj-bodytext { padding-right: 4rem; }

    .order-item-holder {
        min-height: 10rem;
    }

}

/* md only - Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}


/* sm only - general

   this is implicitly (orientation: landscape) as the the next rule below specifies portrait
   the reason we don't explicilty specify landscape here is that the respond.min.js has issues
   with media queries containing orientation. Adam 28/11/15 */

/* sm (1) - all incl. landscape small desktops / tablets */
@media (min-width: 768px) and (max-width: 991px)  {

    .revolutionlx,.revolutionbe {
        padding-top: 2rem;
    }

    .revolutionlx .product-outline {
        margin: 88px 0 94px  -60px;
    }

    .revolutionbe .product-outline {
        margin:50px auto 38px  auto;
    }

    .product h4,.product p {
        text-align: left;
        margin: 0 0 0.25rem 0;
    }
    .product h4 {
        padding-top: 4.5rem;
    }

    #music-control-feature-specification .music-control-container {
        max-width: 768px;
    }

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


    .secretdj-wrapper {
        width: 607px;
    }

    .secretdj-image {
        height: 405px;
    }

    .secretdj-image .appstore-logos {
        padding-bottom: 20px;
        padding-right: 65px;
    }

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

    .secretdj-bodytext,.secretdj-toptext {
        margin-left: 3.5rem;
    }

    #secretdj-feature-download .secretdj-image .secretdj-bodytext {
        position: absolute;
        bottom: 3.75rem;
        right: 3rem;
        width: 17rem;
        margin: 0;
    }

    .secretdj-image .appstore-logos {
        padding-bottom: 0px;
        padding-right: 30px;
    }

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

    .secretdj-bodytext,.secretdj-toptext {
        margin-left: 3.5rem;
    }


    #secretdj-header-static .secretdj-bodytext { padding-right: 3.5rem; }
    #secretdj-feature-fat-jukebox .secretdj-bodytext { padding-right: 3.5rem; }
    #secretdj-feature-am-the-jam .secretdj-bodytext { padding-right: 0rem; }
    #secretdj-feature-soul-sound .secretdj-bodytext { padding-right: 0; }
    #secretdj-feature-customise .secretdj-bodytext {padding-right:  1.5rem; }

}

/* sm only - portrait tablets */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
    .custom-feature-long {
        height: 75%; /*fallback*/
        height: 100vw;
    }


    .custom-feature-our-service {
        height: 55%;
        height: 75vw;
    }

}

/* xs only */
@media (min-width: 481px) and (max-width: 767px) {

    .secretdj-bodytext {
        margin-top: 0;
    }

    .secretdj-bodytext,.secretdj-toptext {
        font-size: 95%;
    }


    #secretdj-feature-download .secretdj-tag {
        margin: 1rem 0 1rem 0;
    }
}
/* xs or smaller - general

   this is implicitly (orientation: landscape) as the the next rule below specifies portrait
   the reason we don't explicilty specify landscape here is that the respond.min.js has issues
   with media queries containing orientation. Adam 28/11/15 */

@media (max-width: 767px) {

    .revolutionlx {
        padding-top: 3rem;
    }

    .nav > li > a {
        font-size: 20px;
    }

    #featured-albums, #recommended-albums {
        margin: 0 10%;
    }

}

@media (max-width: 767px) and (orientation: landscape) {

    /*because for 2020 their is more text in xss landscape*/
    #christmas-static {
        margin-top: 8rem;
    }
}

/* xs or smaller - portrait */
@media (max-width: 767px) and (orientation: portrait) {}


/* xs only */
@media (min-width: 481px) and (max-width: 767px) {

    #tech-feature-secretdj .bg-image {
        width: 460px;
        height: 260px;
    }

    .secretdj-wrapper {
        width: 460px;
    }

    .secretdj-image {
        height: 375px;
    }

    #secretdj-header-static .secretdj-bodytext { width: 450px; }

    #secretdj-feature-fat-jukebox .secretdj-bodytext {
        margin-left: 3px;
        max-width: 248px;
    }

    #secretdj-feature-customise .secretdj-bodytext,
    #secretdj-feature-customise .secretdj-toptext {
        padding: 0 1rem 0 1rem;
    }

}
/* bigger than xss - portrait devices */
@media (orientation: portrait) and (min-width: 481px) {

    /*custom html wrapper for header / features*/
    .custom-header, .custom-feature-full {
        height: 75%; /*fallback*/
        height: 100vw;
        max-height: 800px; /*reset */
    }
    .custom-feature-long {
        height: 100%;
    }

    .case-study-container {
        margin-top: 30rem;
        margin-top: 50vh;

    }
}

/* xss or smaller - portrait phones and smaller */
@media (max-width: 480px) and (orientation: portrait) {
    .visible-xss {
        display: block !important;
        visibility: visible !important;
    }

    .hidden-xss {
        display: none !important;
        visibility: hidden !important;
    }

    #case-study-sohohouse .case-study-header h2 {
        font-size: 1.8rem;
    }
    .revolutionlx .product-outline {
        margin-left: -15px;
    }

    #tech-feature-secretdj .header-image {
        width: 290px;
        height: 71px;
        margin: 0 auto 0.5rem auto;
    }

    #tech-feature-secretdj .bg-image {
        width: 290px;
        height: 571px;
        margin: 1rem auto 0 auto;
    }

    .secretdj-wrapper {
        width: 90%;
        min-width: 280px;
    }

    .secretdj-bodytext
    {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .secretdj-toptext {
        max-width: 320px;
        text-align: left;
        margin: 0 auto 1.5rem auto;
    }

    .secretdj-toptext b {
        font-size: 100%;
        text-transform: none;
    }

    .secretdj-tag {
        position: relative;
        display: block;
        width: 100%;
        max-width: 320px;
        height: auto;
        margin: 0 auto 1rem auto;
    }


    .secretdj-phone {
        display: block;
        width: 100%;
        max-width: 320px;
        height: auto;
        margin: 0 auto 1rem auto;
    }

    .secretdj-tablet {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto 1rem auto;
    }

    #secretdj-feature-download.feature-static {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    #secretdj-feature-download .secretdj-bodytext {
        text-align: center;
    }

    .appstore-logos {
        width: 280px;
        margin: 1rem auto 0 auto;
    }

    .appstore-logo-col {
        float: left;
        display: block;
        width: 50%;
    }

    .appstore-logo-col a {
        padding: 0 .5rem;
    }

    .feature-contact h4.telephone {
        font-size: 1.9rem;
        padding-bottom: 0.5rem;
    }
    .feature-contact p {
        font-size: 1rem;
    }
    .feature-contact a {
        font-size: 1rem;
    }

}

/* lg only - Large desktops and laptops */
@media screen and (min-width: 1200px) {
    .product-left {
        float: right;
        width: 19rem;
    }

    .product-right {
        float: left;
        width: 19rem;
    }

    .music-feature-container,.sample-playlist,.contact-form-container  {
        max-width: 1100px;
    }

    .sample-playlist {
        padding: 6rem 0;
    }



    .music-control-container,.tech-feature-container {
        max-width: 1150px;
    }


    #music-control-feature-intelligent .music-control-illustration { padding: 1rem;}
    #music-control-feature-robust .music-control-illustration { padding: 1.5rem;}
    #music-control-feature-multi-zone .music-control-illustration { padding: 1rem;}
    #music-control-feature-music-updates .music-control-illustration { padding: 1rem 0 0 0;}
    #music-control-feature-legal .music-control-illustration { padding: 1rem 2rem 2rem 2rem;}

    .order-item-holder {
        min-height: 8rem;
    }



}

/* super big screens */

/*
@media   (min-width: 1600px) and (orientation: portrait),
         (min-width: 2500px) and (orientation: landscape)
{
    h1 {
        font-size: 8rem;
        margin: 0 0 2rem 0;
    }

    h2 {
        font-size: 6rem;
        margin: 0 0 1.5rem 0;
    }

    h3 {
        font-size: 4rem;
        margin: 0 0 1.5rem 0;
    }

    h4 {
        font-size: 3rem;
    }

    h5 {
        font-size: 2rem;
    }

    a,p {
        font-size: 2rem;
    }

    .navbar-nav>li>a {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .container {
        width: 1500px;
    }

    .static-section .static-caption p, .carousel-caption p {
        max-width: 56rem;
    }

    .live-stat {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

*/