/* media queries for scaled images by device size. Adam 28/11/15 */ /* all : retina */ @media (min-resolution: 120dpi),(-webkit-min-device-pixel-ratio: 2) { .c-burn-music-logo { height: 50px; width: 40px; display: inline-block; background: url(../../../images/icons/common/logo-x2.png) no-repeat; background-size: 40px 50px; } } /* lg - Large desktops and laptops */ @media screen and (min-width: 1200px) { /*home*/ #home-carousel .header-slide1 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/header-0921-slide1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/header-0921-slide1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/home/lg/header-0921-slide1.jpg) 50% 25% / cover no-repeat; } #home-carousel .header-slide2 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/header-0921-slide2.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/header-0921-slide2.jpg', sizingMethod='scale')"; background: url(../../../images/pages/home/lg/header-0921-slide2.jpg) 50% 50% / cover no-repeat; } #home-carousel .header-slide3 { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/header-0921-slide3.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/header-0921-slide3.jpg', sizingMethod='scale')"; background: url(../../../images/pages/home/lg/header-0921-slide3.jpg) 50% 0% / cover no-repeat; } #home-feature-music, #music-static { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/feature-music-1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/feature-music-1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/home/lg/feature-music-1.jpg) 100% 0% / cover no-repeat; } #home-feature-tech { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/feature-tech-1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/feature-tech-1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/home/lg/feature-tech-1.jpg) 100% 50% / cover no-repeat; } #home-feature-clients { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/feature-clients-1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/feature-clients-1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/home/lg/feature-clients-1.jpg) 50% 50% / cover no-repeat; } .feature-contact { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/feature-contact-1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/lg/feature-contact-1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/home/lg/feature-contact-1.jpg) 50% 50% / cover no-repeat; } /*our service*/ #our-service-feature-who-we-are { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/lg/feature-who-we-are.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/lg/feature-who-we-are.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/lg/feature-who-we-are.jpg) 0% 0% / cover no-repeat; background: url(../../../images/pages/our-service/lg/feature-who-we-are-1.jpg) 0% 0% / cover no-repeat; /*background: url(../../../images/pages/our-service/lg/feature-who-we-are-2.jpg) 0% 0% / cover no-repeat;*/ } #our-service-feature-what-we-do { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/lg/feature-what-we-do.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/lg/feature-what-we-do.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/lg/feature-what-we-do.jpg) 50% 0% / cover no-repeat; } /* #our-service-feature-what-we-offer { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/lg/feature-what-we-offer-bg.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/lg/feature-what-we-offer-bg.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/lg/feature-what-we-offer-bg.jpg) 50% 50% / cover no-repeat; } */ /*music #music-static { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/music/lg/header-static-1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/music/lg/header-static-1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/lg/header-static-1.jpg) 100% 0% / cover no-repeat; background: red; } */ #music-feature-mainstream-bar { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-mainstream-bar.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-mainstream-bar.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/lg/feature-mainstream-bar.jpg) 0% 0% / cover no-repeat; } #music-feature-style-bar { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-style-bar.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-style-bar.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/lg/feature-style-bar.jpg) 100% 0% / cover no-repeat; } #music-feature-boutique-hotel { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-boutique-hotel.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-boutique-hotel.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/lg/feature-boutique-hotel.jpg) 100% 50% / cover no-repeat; } #music-feature-highend-restaurant { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-highend-restaurant.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-highend-restaurant.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/lg/feature-highend-restaurant.jpg) 100% 100% / cover no-repeat; } #music-feature-fashion-retail { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-fashion-retail.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-fashion-retail.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/lg/feature-fashion-retail.jpg) 50% 50% / cover no-repeat; } #music-feature-hipster-restaurant { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-hipster-restaurant.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-hipster-restaurant.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/lg/feature-hipster-restaurant.jpg) 100% 0% / cover no-repeat; } #music-feature-gastro-pub { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-gastro-pub.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-gastro-pub.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/lg/feature-gastro-pub.jpg) 100% 50% / cover no-repeat; } #music-feature-album-recommendations { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-album-recommendations.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/lg/feature-album-recommendations.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/lg/feature-album-recommendations.jpg) 50% 50% / cover no-repeat; } /*tech*/ #tech-static { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/tech/lg/header-static-1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/tech/lg/header-static-1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/tech/lg/header-static-1.jpg) 50% 20% / cover no-repeat; } #tech-feature-music-control { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/tech/lg/feature-hardware-1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/tech/lg/feature-hardware-1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/tech/lg/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-secretdj .bg-image { width: 958px; height: 520px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/tech/lg/feature-secretdj.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/tech/lg/feature-secretdj.jpg', sizingMethod='scale')"; background: url(../../../images/pages/tech/lg/feature-secretdj.jpg) 50% 50% no-repeat; } /*music control*/ #music-control-static { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/music-control/lg/header-static-1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/music-control/lg/header-static-1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music-control/lg/header-static-1.jpg) 100% 25% / cover no-repeat; } /* clients */ #clients-static { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/our-service/lg/header-static-1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/our-service/lg/header-static-1.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/lg/header-static-1.jpg) 50% 50% / cover no-repeat; } /* case studies*/ .case-study-container { margin-left: auto; margin-right: auto; } #case-study-meatliquor .fixed-bg, .meatliquor-bg { background: url('../../../images/pages/case-studies/lg/meatliquor-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-sohohouse .fixed-bg, .sohohouse-bg { background: url('../../../images/pages/case-studies/lg/sohohouse-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-liberty .fixed-bg, .liberty-bg { background: url('../../../images/pages/case-studies/lg/liberty-case-study-bg.jpg') 100% 100% / cover no-repeat; } #case-study-carhartt .fixed-bg, .carhartt-bg { background: url('../../../images/pages/case-studies/lg/carhartt-case-study-bg.jpg') 50% 0% / cover no-repeat; } #case-study-loungers .fixed-bg, .loungers-bg { background: url('../../../images/pages/case-studies/lg/loungers-case-study-bg.jpg') 0% 50% / cover no-repeat; } #case-study-greeneking .fixed-bg, .greeneking-bg { background: url('../../../images/pages/case-studies/lg/greeneking-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-leon .fixed-bg, .leon-bg { background: url('../../../images/pages/case-studies/lg/leon-case-study-bg.jpg') 50% 50% / cover no-repeat; } #blog-feature-news .image-bg { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/blog/lg/feature-news.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/blog/lg/feature-news.jpg', sizingMethod='scale')"; background: url(../../../images/pages/blog/lg/feature-news.jpg) 50% 100% / cover no-repeat; } #christmas-static { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/lg/header-static-1-2020.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/lg/header-static-1-2020.jpg', sizingMethod='scale')"; background: url(../../../images/pages/christmas/lg/header-static-1-2020.jpg) 0% 50% / cover no-repeat; } #christmas-feature-albums { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/lg/feature-albums.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/lg/feature-albums.jpg', sizingMethod='scale')"; background: url(../../../images/pages/christmas/lg/feature-albums.jpg) 100% 50% / cover no-repeat; } } /* lg : retina */ @media (min-width: 1200px) and (min-resolution: 120dpi), (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2) { #tech-feature-secretdj .bg-image { width: 958px; height: 520px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/tech/lg/feature-secretdj.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/tech/lg/feature-secretdj.jpg', sizingMethod='scale')"; background: url(../../../images/pages/tech/lg/feature-secretdj-x2.jpg) 50% 50% /contain no-repeat; } } /* md or bigger */ @media (min-width: 992px) { #secretdj-header-static .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-header.jpg) 0 0 no-repeat; } #secretdj-feature-fat-jukebox .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-fat-jukebox.jpg) 0 0px no-repeat; } #secretdj-feature-am-the-jam .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-am-the-jam.jpg) 0 0 no-repeat; } #secretdj-feature-soul-sound .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-soul-sound.jpg) 0 0 no-repeat; } #secretdj-feature-customise .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-customise.jpg) 0 0 no-repeat; } #secretdj-feature-download .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-download.jpg) 0 0 no-repeat; } } /* md or bigger :retina*/ @media (min-width: 992px) and (min-resolution: 120dpi), (min-width: 992px) and (-webkit-min-device-pixel-ratio: 2) { #secretdj-header-static .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-header-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-fat-jukebox .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-fat-jukebox-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-am-the-jam .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-am-the-jam-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-soul-sound .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-soul-sound-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-customise .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-customise-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-download .secretdj-image { background: url(../../../images/pages/secretdj/md/secretdj-download-x2.jpg) 0 0 / contain no-repeat; } } /* md only - Landscape tablets and medium desktops */ @media (min-width: 992px) and (max-width: 1199px) { /*home*/ #home-carousel .header-slide1 { background: url(../../../images/pages/home/md/header-0921-slide1.jpg) 50% 0% / cover no-repeat; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/md/header-0921-slide1.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/pages/home/md/header-0921-slide1.jpg', sizingMethod='scale')"; } #home-carousel .header-slide2 { background: url(../../../images/pages/home/md/header-0921-slide2.jpg) 0% 50% / cover no-repeat; } #home-carousel .header-slide3 { background: url(../../../images/pages/home/md/header-0921-slide3.jpg) 50% 0% / cover no-repeat; } #home-feature-music { background: url(../../../images/pages/home/md/feature-music-1.jpg) 50% 0% / cover no-repeat; } #home-feature-tech { background: url(../../../images/pages/home/md/feature-tech-1.jpg) 100% 50% / cover no-repeat; } #home-feature-clients { background: url(../../../images/pages/home/md/feature-clients-1.jpg) 50% 50% / cover no-repeat; } .feature-contact { background: url(../../../images/pages/home/md/feature-contact-1.jpg) 50% 50% / cover no-repeat; } /* our service */ #our-service-feature-who-we-are { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/md/feature-who-we-are.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/md/feature-who-we-are.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/md/feature-who-we-are.jpg) 0% 0% / cover no-repeat; } #our-service-feature-what-we-do { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/md/feature-what-we-do.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/md/feature-what-we-do.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/md/feature-what-we-do.jpg) 50% 0% / cover no-repeat; } /*music*/ #music-static { background: url(../../../images/pages/music/md/header-static-1.jpg) 100% 0% / cover no-repeat; } #music-feature-boutique-hotel { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-boutique-hotel.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-boutique-hotel.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/md/feature-boutique-hotel.jpg) 100% 50% / cover no-repeat; } #music-feature-style-bar { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-style-bar.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-style-bar.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/md/feature-style-bar.jpg) 100% 0% / cover no-repeat; } #music-feature-highend-restaurant { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-highend-restaurant.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-highend-restaurant.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/md/feature-highend-restaurant.jpg) 100% 100% / cover no-repeat; } #music-feature-fashion-retail { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-fashion-retail.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-fashion-retail.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/md/feature-fashion-retail.jpg) 50% 50% / cover no-repeat; } #music-feature-mainstream-bar { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-mainstream-bar.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-mainstream-bar.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/md/feature-mainstream-bar.jpg) 0% 0% / cover no-repeat; } #music-feature-hipster-restaurant { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-hipster-restaurant.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-hipster-restaurant.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/md/feature-hipster-restaurant.jpg) 100% 0% / cover no-repeat; } #music-feature-gastro-pub { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-gastro-pub.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-gastro-pub.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/md/feature-gastro-pub.jpg) 50% 50% / cover no-repeat; } #music-feature-album-recommendations { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-album-recommendations.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/md/feature-album-recommendations.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/md/feature-album-recommendations.jpg) 50% 50% / cover no-repeat; } /*tech*/ #tech-static { background: url(../../../images/pages/tech/md/header-static-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-hardware { background: url(../../../images/pages/tech/md/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-music-control { background: url(../../../images/pages/tech/md/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-secretdj .bg-image { background: url(../../../images/pages/tech/md/feature-secretdj.jpg) 50% 50% no-repeat; width: 814px; height: 442px; } /*music control*/ #music-control-static { background: url(../../../images/pages/music-control/md/header-static-1.jpg) 100% 25% / cover no-repeat; } /* clients */ #clients-static { background: url(../../../images/pages/our-service/md/header-static-1.jpg) 50% 50% / cover no-repeat; } /* case studies */ #case-study-meatliquor .fixed-bg, .meatliquor-bg { background: url('../../../images/pages/case-studies/md/meatliquor-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-sohohouse .fixed-bg , .sohohouse-bg { background: url('../../../images/pages/case-studies/md/sohohouse-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-liberty .fixed-bg, .liberty-bg { background: url('../../../images/pages/case-studies/md/liberty-case-study-bg.jpg') 100% 100% / cover no-repeat; } #case-study-carhartt .fixed-bg, .carhartt-bg { background: url('../../../images/pages/case-studies/md/carhartt-case-study-bg.jpg') 0% 0% / cover no-repeat; } #case-study-loungers .fixed-bg, .loungers-bg { background: url('../../../images/pages/case-studies/md/loungers-case-study-bg.jpg') 0% 50% / cover no-repeat; } #case-study-greeneking .fixed-bg, .greeneking-bg { background: url('../../../images/pages/case-studies/md/greeneking-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-leon .fixed-bg, .leon-bg { background: url('../../../images/pages/case-studies/md/leon-case-study-bg.jpg') 50% 50% / cover no-repeat; } #blog-feature-news .image-bg { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/blog/md/feature-news.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/blog/md/feature-news.jpg', sizingMethod='scale')"; background: url(../../../images/pages/blog/md/feature-news.jpg) 50% 0% no-repeat; } #christmas-static { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/md/header-static-1-2020.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/md/header-static-1-2020.jpg', sizingMethod='scale')"; background: url(../../../images/pages/christmas/md/header-static-1-2020.jpg) 0% 50% / cover no-repeat; } #christmas-feature-albums { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/md/feature-albums.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/md/feature-albums.jpg', sizingMethod='scale')"; background: url(../../../images/pages/christmas/md/feature-albums.jpg) 0% 50% / cover no-repeat; } } /* md only : retina */ @media (min-width: 992px) and (max-width: 1199px) and (min-resolution: 120dpi), (min-width: 992px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 2) { #tech-feature-secretdj .bg-image { background: url(../../../images/pages/tech/md/feature-secretdj-x2.jpg) 50% 50% / contain no-repeat; width: 814px; height: 442px; } } /* sm size 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) - landscape small desktops*/ @media (min-width: 768px) and (max-width: 991px) { /*home*/ #home-carousel .header-slide1 { background: url(../../../images/pages/home/sm/landscape/header-0921-slide1.jpg) 50% 0% / cover no-repeat; } #home-carousel .header-slide2 { background: url(../../../images/pages/home/sm/landscape/header-0921-slide2.jpg) 100% 50% / cover no-repeat; } #home-carousel .header-slide3 { background: url(../../../images/pages/home/sm/landscape/header-0921-slide3.jpg) 50% 0% / cover no-repeat; } #home-feature-music { background: url(../../../images/pages/home/sm/landscape/feature-music-1.jpg) 50% 0% / cover no-repeat; } #home-feature-tech { background: url(../../../images/pages/home/sm/landscape/feature-tech-1.jpg) 100% 50% / cover no-repeat; } #home-feature-clients { background: url(../../../images/pages/home/sm/landscape/feature-clients-1.jpg) 50% 50% / cover no-repeat; } .feature-contact { background: url(../../../images/pages/home/sm/landscape/feature-contact-1.jpg) 50% 50% / cover no-repeat; } /* our service */ #our-service-feature-who-we-are { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/sm/landscape/feature-who-we-are.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/sm/landscape/feature-who-we-are.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/sm/landscape/feature-who-we-are.jpg) 0% 0% / cover no-repeat; } #our-service-feature-what-we-do { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/sm/landscape/feature-what-we-do.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/sm/landscape/feature-what-we-do.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/sm/landscape/feature-what-we-do.jpg) 50% 0% / cover no-repeat; } /*music*/ #music-static { background: url(../../../images/pages/music/sm/landscape/header-static-1.jpg) 100% 0% / cover no-repeat; } #music-feature-boutique-hotel { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-boutique-hotel.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-boutique-hotel.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/sm/landscape/feature-boutique-hotel.jpg) 100% 50% / cover no-repeat; } #music-feature-style-bar { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-style-bar.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-style-bar.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/sm/landscape/feature-style-bar.jpg) 100% 0% / cover no-repeat; } #music-feature-highend-restaurant { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-highend-restaurant.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-highend-restaurant.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/sm/landscape/feature-highend-restaurant.jpg) 100% 100% / cover no-repeat; } #music-feature-mainstream-bar { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-mainstream-bar.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-mainstream-bar.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/sm/landscape/feature-mainstream-bar.jpg) 0% 0% / cover no-repeat; } #music-feature-fashion-retail { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-fashion-retail.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-fashion-retail.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/sm/landscape/feature-fashion-retail.jpg) 50% 50% / cover no-repeat; } #music-feature-hipster-restaurant { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-hipster-restaurant.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-hipster-restaurant.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/sm/landscape/feature-hipster-restaurant.jpg) 0% 0% / cover no-repeat; } #music-feature-gastro-pub { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-gastro-pub.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-gastro-pub.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/sm/landscape/feature-gastro-pub.jpg) 100% 50% / cover no-repeat; } #music-feature-album-recommendations { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-album-recommendations.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='((../../../images/pages/music/sm/landscape/feature-album-recommendations.jpg', sizingMethod='scale')"; background: url(../../../images/pages/music/sm/landscape/feature-album-recommendations.jpg) 50% 50% / cover no-repeat; } /*tech*/ #tech-static { background: url(../../../images/pages/tech/sm/landscape/header-static-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-hardware { background: url(../../../images/pages/tech/sm/landscape/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-music-control { background: url(../../../images/pages/tech/sm/landscape/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-secretdj .bg-image { background: url(../../../images/pages/tech/sm/landscape/feature-secretdj.jpg) 50% 50% no-repeat; width: 667px; height: 362px; } /*music control*/ #music-control-static { background: url(../../../images/pages/music-control/sm/landscape/header-static-1.jpg) 100% 25% / cover no-repeat; } /* clients */ #clients-static { background: url(../../../images/pages/our-service/sm/landscape/header-static-1.jpg) 50% 50% / cover no-repeat; } /* case studies */ #case-study-meatliquor .fixed-bg, .meatliquor-bg { background: url('../../../images/pages/case-studies/sm/landscape/meatliquor-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-sohohouse .fixed-bg, .sohohouse-bg { background: url('../../../images/pages/case-studies/sm/landscape/sohohouse-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-liberty .fixed-bg, .liberty-bg { background: url('../../../images/pages/case-studies/sm/landscape/liberty-case-study-bg.jpg') 100% 100% / cover no-repeat; } #case-study-carhartt .fixed-bg, .carhartt-bg { background: url('../../../images/pages/case-studies/sm/landscape/carhartt-case-study-bg.jpg') 50% 0% / cover no-repeat; } #case-study-loungers .fixed-bg, .loungers-bg { background: url('../../../images/pages/case-studies/sm/landscape/loungers-case-study-bg.jpg') 0% 50% / cover no-repeat; } #case-study-greeneking .fixed-bg, .greeneking-bg { background: url('../../../images/pages/case-studies/sm/landscape/greeneking-case-study-bg.jpg') 0% 50% / cover no-repeat; } #case-study-leon .fixed-bg, .leon-bg { background: url('../../../images/pages/case-studies/sm/landscape/leon-case-study-bg.jpg') 50% 50% / cover no-repeat; } #secretdj-header-static .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-header.jpg) 0 0 no-repeat; } #secretdj-feature-fat-jukebox .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-fat-jukebox.jpg) 0 0px no-repeat; } #secretdj-feature-am-the-jam .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-am-the-jam.jpg) 0 0 no-repeat; } #secretdj-feature-soul-sound .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-soul-sound.jpg) 0 0 no-repeat; } #secretdj-feature-customise .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-customise.jpg) 0 0 no-repeat; } #secretdj-feature-download .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-download.jpg) 0 0 no-repeat; } #blog-feature-news .image-bg { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/blog/sm/landscape/feature-news.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/blog/sm/landscape/feature-news.jpg', sizingMethod='scale')"; background: url(../../../images/pages/blog/sm/landscape/feature-news.jpg) 50% 0% no-repeat; } #christmas-static { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/sm/landscape/header-static-1-2020.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/sm/landscape/header-static-1-2020.jpg', sizingMethod='scale')"; background: url(../../../images/pages/christmas/sm/landscape/header-static-1-2020.jpg) 0% 50% / cover no-repeat; } #christmas-feature-albums { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/sm/landscape/feature-albums.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/sm/landscape/feature-albums.jpg', sizingMethod='scale')"; background: url(../../../images/pages/christmas/sm/landscape/feature-albums.jpg) 0% 50% / cover no-repeat; } } /* sm only :retina*/ @media (min-width: 768px) and (max-width: 991px) and (min-resolution: 120dpi), (min-width: 768px) and (max-width: 991px)and (-webkit-min-device-pixel-ratio: 2) { #tech-feature-secretdj .bg-image { background: url(../../../images/pages/tech/sm/landscape/feature-secretdj-x2.jpg) 50% 50% / contain no-repeat; width: 667px; height: 362px; } #secretdj-header-static .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-header-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-fat-jukebox .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-fat-jukebox-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-am-the-jam .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-am-the-jam-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-soul-sound .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-soul-sound-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-customise .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-customise-x2.jpg) 0 0 / contain no-repeat; } #secretdj-feature-download .secretdj-image { background: url(../../../images/pages/secretdj/sm/secretdj-download-x2.jpg) 0 0 / contain no-repeat; } } /* sm (2) - Portrait tablets ONLY */ @media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) { /*home*/ #home-carousel .header-slide1 { background: url(../../../images/pages/home/sm/portrait/header-0921-slide1.jpg) 50% 0% / cover no-repeat; } #home-carousel .header-slide2 { background: url(../../../images/pages/home/sm/portrait/header-0921-slide2.jpg) 50% 50% / cover no-repeat; } #home-carousel .header-slide3 { background: url(../../../images/pages/home/sm/portrait/header-0921-slide3.jpg) 50% 0% / cover no-repeat; } #home-feature-music { background: url(../../../images/pages/home/sm/portrait/feature-music-1.jpg) 50% 0% /cover no-repeat; } #home-feature-tech { background: url(../../../images/pages/home/sm/portrait/feature-tech-1.jpg) 100% 50% /cover no-repeat; } #home-feature-clients { background: url(../../../images/pages/home/sm/portrait/feature-clients-1.jpg) 50% 50% / cover no-repeat; } .feature-contact { background: url(../../../images/pages/home/sm/portrait/feature-contact-1.jpg) 50% 50% / cover no-repeat; } /* our service */ #our-service-feature-who-we-are { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/sm/portrait/feature-who-we-are.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/sm/portrait/feature-who-we-are.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/sm/portrait/feature-who-we-are.jpg) 50% 50% / cover no-repeat; } #our-service-feature-what-we-do { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/sm/portrait/feature-what-we-do.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/our-service/sm/portrait/feature-what-we-do.jpg', sizingMethod='scale')"; background: url(../../../images/pages/our-service/sm/portrait/feature-what-we-do.jpg) 50% 50% / cover no-repeat; } /*music*/ #music-static { background: url(../../../images/pages/music/sm/portrait/header-static-1.jpg) 100% 0% / cover no-repeat; } #music-feature-boutique-hotel { background: url(../../../images/pages/music/sm/portrait/feature-boutique-hotel.jpg) 100% 50% / cover no-repeat; } #music-feature-style-bar { background: url(../../../images/pages/music/sm/portrait/feature-style-bar.jpg) 100% 0% / cover no-repeat; } #music-feature-highend-restaurant { background: url(../../../images/pages/music/sm/portrait/feature-highend-restaurant.jpg) 50% 100% / cover no-repeat; } #music-feature-fashion-retail { background: url(../../../images/pages/music/sm/portrait/feature-fashion-retail.jpg) 50% 100% / cover no-repeat; } #music-feature-mainstream-bar { background: url(../../../images/pages/music/sm/portrait/feature-mainstream-bar.jpg) 0% 0% / cover no-repeat; } #music-feature-hipster-restaurant { background: url(../../../images/pages/music/sm/portrait/feature-hipster-restaurant.jpg) 75% 0% / cover no-repeat; } #music-feature-gastro-pub { background: url(../../../images/pages/music/sm/portrait/feature-gastro-pub.jpg) 50% 50% / cover no-repeat; } #music-feature-album-recommendations { background: url(../../../images/pages/music/sm/portrait/feature-album-recommendations.jpg) 50% 50% / cover no-repeat; } /*tech*/ #tech-static { background: url(../../../images/pages/tech/sm/portrait/header-static-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-hardware { background: url(../../../images/pages/tech/sm/portrait/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-music-control { background: url(../../../images/pages/tech/sm/portrait/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } /*music control*/ #music-control-static { background: url(../../../images/pages/music-control/sm/portrait/header-static-1.jpg) 100% 0% / cover no-repeat; } /* clients */ #clients-static { background: url(../../../images/pages/our-service/sm/portrait/header-static-1.jpg) 50% 50% / cover no-repeat; } /* case studies */ #case-study-meatliquor .fixed-bg, .meatliquor-bg { background: url('../../../images/pages/case-studies/sm/portrait/meatliquor-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-sohohouse .fixed-bg, .sohohouse-bg { background: url('../../../images/pages/case-studies/sm/portrait/sohohouse-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-liberty .fixed-bg, .liberty-bg { background: url('../../../images/pages/case-studies/sm/portrait/liberty-case-study-bg.jpg') 50% 0% / cover no-repeat; } #case-study-carhartt .fixed-bg, .carhartt-bg { background: url('../../../images/pages/case-studies/sm/portrait/carhartt-case-study-bg.jpg') 50% 100% / cover no-repeat; } #case-study-loungers .fixed-bg, .loungers-bg { background: url('../../../images/pages/case-studies/sm/portrait/loungers-case-study-bg.jpg') 0% 50% / cover no-repeat; } #case-study-greeneking .fixed-bg, .greeneking-bg { background: url('../../../images/pages/case-studies/sm/portrait/greeneking-case-study-bg.jpg') 0% 50% / cover no-repeat; } #case-study-leon .fixed-bg, .leon-bg { background: url('../../../images/pages/case-studies/sm/portrait/leon-case-study-bg.jpg') 50% 50% / cover no-repeat; } #secretdj-header-static .header-logo { width: 250px; height: 359px; margin: 1.5rem -1rem 0 0; background: url(../../../images/pages/secretdj/sm/secretdj-header.jpg) 0 0 no-repeat; } #secretdj-header-static .header-phone { width: 208px; height: 405px; margin-left: 2rem; background: url(../../../images/pages/secretdj/sm/secretdj-header.jpg) -250px 0 no-repeat; } #secretdj-feature-fat-jukebox .fat-jukebox-tag { width: 343px; height: 338px; margin: 36px 0 0 -3rem; background: url(../../../images/pages/secretdj/sm/secretdj-fat-jukebox.jpg) 0 0px no-repeat; } #secretdj-feature-fat-jukebox .fat-jukebox-phone { width: 189px; height: 401px; margin-right: 3rem; background: url(../../../images/pages/secretdj/sm/secretdj-fat-jukebox.jpg) -343px 0px no-repeat; } #secretdj-feature-am-the-jam .am-the-jam-tag { width: 359px; height: 308px; margin: 52px -1rem 0 0; background: url(../../../images/pages/secretdj/sm/secretdj-am-the-jam.jpg) 0 -0px no-repeat; } #secretdj-feature-am-the-jam .am-the-jam-phone { width: 192px; height: 401px; margin-left: 1rem; background: url(../../../images/pages/secretdj/sm/secretdj-am-the-jam.jpg) -359px 0px no-repeat; } #secretdj-feature-soul-sound .soul-sound-tag { width: 360px; height: 360px; margin: 38px 0 0 -3rem; background: url(../../../images/pages/secretdj/sm/secretdj-soul-sound.jpg) 0 0 no-repeat; } #secretdj-feature-soul-sound .soul-sound-phone { width: 208px; height: 405px; margin-right: 3rem; background: url(../../../images/pages/secretdj/sm/secretdj-soul-sound.jpg) -360px 0px no-repeat; } #blog-feature-news .image-bg { background: url(../../../images/pages/blog/sm/portrait/feature-news.jpg) 50% 0% no-repeat; } #christmas-static { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/sm/portrait/header-static-1-2020.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/sm/portrait/header-static-1-2020.jpg', sizingMethod='scale')"; background: url(../../../images/pages/christmas/sm/portrait/header-static-1-2020.jpg) 0% 50% / cover no-repeat; } #christmas-feature-albums { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/sm/portrait/feature-albums.jpg', sizingMethod=scale); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='(../../../images/pages/christmas/sm/portrait/feature-albums.jpg', sizingMethod='scale')"; background: url(../../../images/pages/christmas/sm/portrait/feature-albums.jpg) 0% 50% / cover no-repeat; } } /* xs -size this is implicitly (orientation: landscape) as the the next rule below specifies portrait the reason we don't explicitly specify landscape here is that the respond.min.js has issues with media queries containing orientation. Adam 28/11/15 */ @media (max-width: 767px) { /*home*/ #home-carousel .header-slide1 { background: url(../../../images/pages/home/xs/landscape/header-0921-slide1.jpg) 50% 0% / cover no-repeat; } #home-carousel .header-slide2 { background: url(../../../images/pages/home/xs/landscape/header-0921-slide2.jpg) 50% 50% / cover no-repeat; } #home-carousel .header-slide3 { background: url(../../../images/pages/home/xs/landscape/header-0921-slide3.jpg) 50% 0% / cover no-repeat; } #home-feature-music { background: url(../../../images/pages/home/xs/landscape/feature-music-1.jpg) 50% 0% / cover no-repeat; } #home-feature-tech { background: url(../../../images/pages/home/xs/landscape/feature-tech-1.jpg) 100% 50% / cover no-repeat; } #home-feature-clients { background: url(../../../images/pages/home/xs/landscape/feature-clients-1.jpg) 50% 50% / cover no-repeat; } .feature-contact { background: url(../../../images/pages/home/xs/landscape/feature-contact-1.jpg) 50% 50% / cover no-repeat; } /* our service */ #our-service-feature-who-we-are { background: url(../../../images/pages/our-service/xs/landscape/feature-who-we-are.jpg) 50% 100% / cover no-repeat; } #our-service-feature-what-we-do { background: url(../../../images/pages/our-service/xs/landscape/feature-what-we-do.jpg) 50% 100% / cover no-repeat; } /*music*/ #music-static { background: url(../../../images/pages/music/xs/landscape/header-static-1.jpg) 100% 0% / cover no-repeat; } #music-feature-boutique-hotel { background: url(../../../images/pages/music/xs/landscape/feature-boutique-hotel.jpg) 100% 50% / cover no-repeat; } #music-feature-style-bar { background: url(../../../images/pages/music/xs/landscape/feature-style-bar.jpg) 100% 0% / cover no-repeat; } #music-feature-highend-restaurant { background: url(../../../images/pages/music/xs/landscape/feature-highend-restaurant.jpg) 100% 100% / cover no-repeat; } #music-feature-fashion-retail { background: url(../../../images/pages/music/xs/landscape/feature-fashion-retail.jpg) 50% 50% / cover no-repeat; } #music-feature-mainstream-bar { background: url(../../../images/pages/music/xs/landscape/feature-mainstream-bar.jpg) 0% 0% / cover no-repeat; } #music-feature-hipster-restaurant { background: url(../../../images/pages/music/xs/landscape/feature-hipster-restaurant.jpg) 50% 0% / cover no-repeat; } #music-feature-gastro-pub { background: url(../../../images/pages/music/xs/landscape/feature-gastro-pub.jpg) 100% 50% / cover no-repeat; } #music-feature-album-recommendations { background: url(../../../images/pages/music/xs/landscape/feature-album-recommendations.jpg) 50% 50% / cover no-repeat; } /*tech*/ #tech-static { background: url(../../../images/pages/tech/xs/landscape/header-static-1.jpg) 50% 50% / cover no-repeat; } /* #tech-feature-hardware { background: url(../../../images/pages/tech/xs/landscape/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } */ #tech-feature-music-control { background: url(../../../images/pages/tech/xs/landscape/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-secretdj .bg-image { background: url(../../../images/pages/tech/xs/landscape/feature-secretdj.jpg) 50% 50% no-repeat; } /*music control*/ #music-control-static { background: url(../../../images/pages/music-control/xs/landscape/header-static-1.jpg) 100% 25% / cover no-repeat; } /* clients */ #clients-static { background: url(../../../images/pages/our-service/xs/landscape/header-static-1.jpg) 50% 50% / cover no-repeat; } /* case studies */ #case-study-meatliquor .fixed-bg, .meatliquor-bg { background: url('../../../images/pages/case-studies/xs/landscape/meatliquor-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-sohohouse .fixed-bg, .sohohouse-bg { background: url('../../../images/pages/case-studies/xs/landscape/sohohouse-case-study-bg.jpg') 50% 50% / cover no-repeat; } #case-study-liberty .fixed-bg, .liberty-bg { background: url('../../../images/pages/case-studies/xs/landscape/liberty-case-study-bg.jpg') 100% 100% / cover no-repeat; } #case-study-carhartt .fixed-bg, .carhartt-bg { background: url('../../../images/pages/case-studies/xs/landscape/carhartt-case-study-bg.jpg') 50% 0% / cover no-repeat; } #case-study-loungers .fixed-bg, .loungers-bg { background: url('../../../images/pages/case-studies/xs/landscape/loungers-case-study-bg.jpg') 0% 50% / cover no-repeat; } #case-study-greeneking .fixed-bg, .greeneking-bg { background: url('../../../images/pages/case-studies/xs/landscape/greeneking-case-study-bg.jpg') 0% 50% / cover no-repeat; } #case-study-leon .fixed-bg, .leon-bg { background: url('../../../images/pages/case-studies/xs/landscape/leon-case-study-bg.jpg') 50% 50% / cover no-repeat; } #blog-feature-news .image-bg { background: url(../../../images/pages/blog/xs/landscape/feature-news.jpg) 50% 0% no-repeat; } #christmas-static { background: url(../../../images/pages/christmas/xs/landscape/header-static-1-2020.jpg) 0% 50% / cover no-repeat; } #christmas-feature-albums { background: url(../../../images/pages/christmas/xs/landscape/feature-albums.jpg) 0% 50% / cover no-repeat; } } /* xs (2) portrait tablets */ @media (max-width: 767px) and (orientation: portrait) { /*home*/ #home-carousel .header-slide1 { background: url(../../../images/pages/home/xs/portrait/header-0921-slide1.jpg) 50% 0% / cover no-repeat; } #home-carousel .header-slide2 { background: url(../../../images/pages/home/xs/portrait/header-0921-slide2.jpg) 50% 50% / cover no-repeat; } #home-carousel .header-slide3 { background: url(../../../images/pages/home/xs/portrait/header-0921-slide3.jpg) 50% 50% / cover no-repeat; } #home-feature-music { background: url(../../../images/pages/home/xs/portrait/feature-music-1.jpg) 50% 0% / cover no-repeat; } #home-feature-tech { background: url(../../../images/pages/home/xs/portrait/feature-tech-1.jpg) 100% 50% / cover no-repeat; } #home-feature-clients { background: url(../../../images/pages/home/xs/portrait/feature-clients-1.jpg) 50% 50% / cover no-repeat; } .feature-contact { background: url(../../../images/pages/home/xs/portrait/feature-contact-1.jpg) 50% 50% / cover no-repeat; } /* our service */ #our-service-feature-who-we-are { background: url(../../../images/pages/our-service/xs/portrait/feature-who-we-are.jpg) 50% 50% / cover no-repeat; } #our-service-feature-what-we-do { background: url(../../../images/pages/our-service/xs/portrait/feature-what-we-do.jpg) 50% 50% / cover no-repeat; } /*music*/ #music-static { background: url(../../../images/pages/music/xs/portrait/header-static-1.jpg) 100% 0% / cover no-repeat; } #music-feature-style-bar { background: url(../../../images/pages/music/xs/portrait/feature-style-bar.jpg) 100% 0% / cover no-repeat; } #music-feature-boutique-hotel { background: url(../../../images/pages/music/xs/portrait/feature-boutique-hotel.jpg) 100% 50% / cover no-repeat; } #music-feature-highend-restaurant { background: url(../../../images/pages/music/xs/portrait/feature-highend-restaurant.jpg) 50% 100% / cover no-repeat; } #music-feature-fashion-retail { background: url(../../../images/pages/music/xs/portrait/feature-fashion-retail.jpg) 50% 100% / cover no-repeat; } #music-feature-mainstream-bar { background: url(../../../images/pages/music/xs/portrait/feature-mainstream-bar.jpg) 0% 0% / cover no-repeat; } #music-feature-hipster-restaurant { background: url(../../../images/pages/music/xs/portrait/feature-hipster-restaurant.jpg) 0% 0% / cover no-repeat; } #music-feature-gastro-pub { background: url(../../../images/pages/music/xs/portrait/feature-gastro-pub.jpg) 50% 100% / cover no-repeat; } #music-feature-album-recommendations { background: url(../../../images/pages/music/xs/portrait/feature-album-recommendations.jpg) 50% 50% / cover no-repeat; } /*tech*/ #tech-static { background: url(../../../images/pages/tech/xs/portrait/header-static-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-hardware { background: url(../../../images/pages/tech/xs/portrait/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-music-control { background: url(../../../images/pages/tech/xs/portrait/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } /*music control*/ #music-control-static { background: url(../../../images/pages/music-control/xs/portrait/header-static-1.jpg) 100% 0% / cover no-repeat; } /* clients */ #clients-static { background: url(../../../images/pages/our-service/xs/portrait/header-static-1.jpg) 50% 50% / cover no-repeat; } /* case studies */ #case-study-meatliquor .fixed-bg, .meatliquor-bg { background: url('../../../images/pages/case-studies/xs/portrait/meatliquor-case-study-bg.jpg') 50% 0% / contain no-repeat; } #case-study-sohohouse .fixed-bg, .sohohouse-bg { background: url('../../../images/pages/case-studies/xs/portrait/sohohouse-case-study-bg.jpg') 50% 0% / contain no-repeat; } #case-study-liberty .fixed-bg, .liberty-bg { background: url('../../../images/pages/case-studies/xs/portrait/liberty-case-study-bg.jpg') 50% 0% / contain no-repeat; } #case-study-carhartt .fixed-bg, .carhartt-bg { background: url('../../../images/pages/case-studies/xs/portrait/carhartt-case-study-bg.jpg') 50% 0% / contain no-repeat; } #case-study-loungers .fixed-bg, .loungers-bg { background: url('../../../images/pages/case-studies/xs/portrait/loungers-case-study-bg.jpg') 0% 0% / contain no-repeat; } #case-study-greeneking .fixed-bg, .greeneking-bg { background: url('../../../images/pages/case-studies/xs/portrait/greeneking-case-study-bg.jpg') 0% 0% / contain no-repeat; } #case-study-leon .fixed-bg, .leon-bg { background: url('../../../images/pages/case-studies/xs/portrait/leon-case-study-bg.jpg') 50% 0% / contain no-repeat; } #blog-feature-news .image-bg { background: url(../../../images/pages/blog/xs/portrait/feature-news.jpg) 50% 0% no-repeat; } #christmas-static { background: url(../../../images/pages/christmas/xs/portrait/header-static-1-2020.jpg) 0% 50% / cover no-repeat; } #christmas-feature-albums { background: url(../../../images/pages/christmas/sm/portrait/feature-albums.jpg) 0% 50% / cover no-repeat; } } /* xs only i.e. not xss */ @media (min-width: 481px) and (max-width: 767px) { .secretdj-phone { height: 373px; } #secretdj-header-static .secretdj-image { background: url(../../../images/pages/secretdj/xs/secretdj-header.jpg) no-repeat; background-position: -44px 0; background-size: 530px 353px; height: 360px; } #secretdj-feature-fat-jukebox .secretdj-phone { width: 178px; background: url(../../../images/pages/secretdj/xs/secretdj-fat-jukebox.jpg) no-repeat; background-position: -46px 0; background-size: 560px 373px } #secretdj-feature-fat-jukebox .secretdj-tag { width: 262px; height: 245px; margin: -10px 0 0 -10px; background: url(../../../images/pages/secretdj/xs/secretdj-fat-jukebox.jpg) no-repeat; background-position: -200px -17px; background-size: 440px 293px; } #secretdj-feature-am-the-jam .secretdj-phone { width: 178px; background: url(../../../images/pages/secretdj/xs/secretdj-am-the-jam.jpg) no-repeat; background-position: -383px 0px; } #secretdj-feature-am-the-jam .secretdj-tag { width: 242px; height: 216px; margin-top: 20px; background: url(../../../images/pages/secretdj/xs/secretdj-am-the-jam.jpg) no-repeat; background-position: -23px -36px; background-size: 405px 269px; } #secretdj-feature-soul-sound .secretdj-phone { width: 184px; height: 351px; background: url(../../../images/pages/secretdj/xs/secretdj-soul-sound.jpg) no-repeat; background-position: -45px 0 ; background-size: 527px 351px; } #secretdj-feature-soul-sound .secretdj-tag { width: 259px; height: 230px; margin: -15px 0 0 -5px; background: url(../../../images/pages/secretdj/xs/secretdj-soul-sound.jpg) no-repeat; background-position: -196px -25px; background-size: 438px 291px; } #secretdj-feature-customise .secretdj-image { width: 460px; height: 311px; background: url(../../../images/pages/secretdj/xs/secretdj-customise.jpg) no-repeat; background-size: 460px 311px; } #secretdj-feature-download .secretdj-phone { width: 178px; background: url(../../../images/pages/secretdj/xs/secretdj-download.jpg) no-repeat; background-position: -46px 0; background-size: 560px 373px } } /* xs only i.e. not xss : retina */ @media (min-width: 481px) and (max-width: 767px) and (min-resolution: 120dpi), (min-width: 471px) and (max-width: 767px)and (-webkit-min-device-pixel-ratio: 2) { #tech-feature-secretdj .bg-image { background: url(../../../images/pages/tech/xs/landscape/feature-secretdj-x2.jpg) 50% 50% / contain no-repeat; width: 460px; height: 260px; } #secretdj-header-static .secretdj-image { background-image: url(../../../images/pages/secretdj/xs/secretdj-header-x2.jpg); } #secretdj-feature-fat-jukebox .secretdj-phone, #secretdj-feature-fat-jukebox .secretdj-tag { background-image: url(../../../images/pages/secretdj/xs/secretdj-fat-jukebox-x2.jpg); } #secretdj-feature-am-the-jam.secretdj-phone, #secretdj-feature-am-the-jam .secretdj-tag { background-image: url(../../../images/pages/secretdj/xs/secretdj-am-the-jam-x2.jpg); } #secretdj-feature-soul-sound .secretdj-phone, #secretdj-feature-soul-sound .secretdj-tag { background-image: url(../../../images/pages/secretdj/xs/secretdj-soul-sound-x2.jpg); } #secretdj-feature-customise .secretdj-image { background-image: url(../../../images/pages/secretdj/xs/secretdj-customise-x2.jpg); } #secretdj-feature-download .secretdj-phone { background-image: url(../../../images/pages/secretdj/xs/secretdj-download-x2.jpg); } } /* xss - Portrait phones and smaller */ @media (max-width: 480px) and (orientation: portrait) { /*home*/ #home-static { background: url(../../../images/pages/home/xss/portrait/header-0921-static1.jpg) 50% 50% / cover no-repeat; } #home-static-mic-2018 { background: url(../../../images/pages/home/xss/portrait/header-static-mic-2018.jpg) 50% 50% / cover no-repeat; } #home-feature-music { background: url(../../../images/pages/home/xss/portrait/feature-music-1.jpg) 50% 0% / cover no-repeat; } #home-feature-tech { background: url(../../../images/pages/home/xss/portrait/feature-tech-1.jpg) 100% 50% / cover no-repeat; } #home-feature-clients { background: url(../../../images/pages/home/xss/portrait/feature-clients-1.jpg) 50% 50% / cover no-repeat; } .feature-contact { background: url(../../../images/pages/home/xss/portrait/feature-contact-1.jpg) 50% 50% / cover no-repeat; } /* our service */ #our-service-feature-who-we-are { background: url(../../../images/pages/our-service/xss/portrait/feature-who-we-are.jpg) 50% 100% / cover no-repeat; } #our-service-feature-what-we-do { background: url(../../../images/pages/our-service/xss/portrait/feature-what-we-do.jpg) 50% 50% / cover no-repeat; } /*music*/ #music-static { background: url(../../../images/pages/music/xss/header-static-1.jpg) 100% 0% / cover no-repeat; } #music-feature-boutique-hotel { background: url(../../../images/pages/music/xss/feature-boutique-hotel.jpg) 100% 50% / cover no-repeat; } #music-feature-style-bar { background: url(../../../images/pages/music/xss/feature-style-bar.jpg) 0% 0% / cover no-repeat; } #music-feature-highend-restaurant { background: url(../../../images/pages/music/xss/feature-highend-restaurant.jpg) 50% 100% / cover no-repeat; } #music-feature-fashion-retail { background: url(../../../images/pages/music/xss/feature-fashion-retail.jpg) 50% 50% / cover no-repeat; } #music-feature-mainstream-bar { background: url(../../../images/pages/music/xss/feature-mainstream-bar.jpg) 0% 0% / cover no-repeat; } #music-feature-hipster-restaurant { background: url(../../../images/pages/music/xss/feature-hipster-restaurant.jpg) 75% 0% / cover no-repeat; } #music-feature-gastro-pub { background: url(../../../images/pages/music/xss/feature-gastro-pub.jpg) 50% 100% / cover no-repeat; } #music-feature-album-recommendations { background: url(../../../images/pages/music/xss/feature-album-recommendations.jpg) 50% 50% / cover no-repeat; } /*tech*/ #tech-static { background: url(../../../images/pages/tech/xss/portrait/header-static-1.jpg) 50% 100% / cover no-repeat; } #tech-feature-hardware { background: url(../../../images/pages/tech/xss/portrait/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-music-control { background: url(../../../images/pages/tech/xss/portrait/feature-hardware-1.jpg) 50% 50% / cover no-repeat; } #tech-feature-secretdj .header-image { background: url(../../../images/pages/tech/xss/portrait/secretdj-header.jpg) 50% 50% / contain no-repeat; } #tech-feature-secretdj .bg-image { background: url(../../../images/pages/tech/xss/portrait/secretdj-phone.jpg) 50% 50% no-repeat; background-size: 290px 571px; } /*music control*/ #music-control-static { background: url(../../../images/pages/music-control/xss/portrait/header-static-1.jpg) 100% 0% / cover no-repeat; } /* clients */ #clients-static { background: url(../../../images/pages/our-service/xss/portrait/header-static-1.jpg) 50% 50% / cover no-repeat; } #case-study-meatliquor .fixed-bg, .meatliquor-bg { background: url('../../../images/pages/case-studies/xss/portrait/meatliquor-case-study-bg.jpg') 50% 0% /contain no-repeat; } #case-study-sohohouse .fixed-bg, .sohohouse-bg { background: url('../../../images/pages/case-studies/xss/portrait/sohohouse-case-study-bg.jpg') 50% 0% / contain no-repeat; } #case-study-liberty .fixed-bg, .liberty-bg { background: url('../../../images/pages/case-studies/xss/portrait/liberty-case-study-bg.jpg') 50% 0% / contain no-repeat; } #case-study-carhartt .fixed-bg, .carhartt-bg { background: url('../../../images/pages/case-studies/xss/portrait/carhartt-case-study-bg.jpg') 50% 0% / contain no-repeat; } #case-study-loungers .fixed-bg, .loungers-bg { background: url('../../../images/pages/case-studies/xss/portrait/loungers-case-study-bg.jpg') 0% 0% / contain no-repeat; } #case-study-greeneking .fixed-bg, .greeneking-bg { background: url('../../../images/pages/case-studies/xss/portrait/greeneking-case-study-bg.jpg') 0% 0% / contain no-repeat; } #case-study-leon .fixed-bg, .leon-bg { background: url('../../../images/pages/case-studies/xss/portrait/leon-case-study-bg.jpg') 50% 0% / contain no-repeat; } #blog-feature-news .image-bg { background: url(../../../images/pages/blog/xssd/portrait/feature-news.jpg) 50% 0% no-repeat; } #christmas-static { background: url(../../../images/pages/christmas/xss/portrait/header-static-1-2020.jpg) 0% 50% / cover no-repeat; } #christmas-feature-albums { background: url(../../../images/pages/christmas/xss/portrait/feature-albums.jpg) 0% 50% / cover no-repeat; } } /* xss retina */ @media (max-width: 480px) and (min-resolution: 120dpi), (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { #tech-feature-secretdj .header-image { background: url(../../../images/pages/tech/xss/portrait/secretdj-header-x2.jpg) 50% 50% / contain no-repeat; } #tech-feature-secretdj .bg-image { background: url(../../../images/pages/tech/xss/portrait/secretdj-phone-x2.jpg) 50% 50% no-repeat; background-size: 290px 571px; } }