#main {
    line-height: 1.6;
    margin: 0;
    font-size: 1.25rem;
    color: #282b2e;
}

#main p {
    margin-bottom: 2rem;
}

#main .heading {
    font-size: 2rem;
    margin-bottom: 40px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
}

#main .subheading {
    font-size: 26px;
    margin-bottom: 40px;
    font-weight: 500;
}

#main .subheading--pink {
    color: #fe90af;
}

#main .subheading--white {
    color: #fff;
}

#main .subheading--black {
    color: #282b2e;
}

#main ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.leaderboard-container {
    padding: 60px 100px;
}

.page-banner {
    background: #fff;
    background: url(../images/infographic/smartest-company-banner.jpg) center right no-repeat;
    background-size: 60% auto;
}

.page-banner--v2 {
    background-image: url(../images/infographic/virtual-guide-banner.jpg);
}

.page-banner p {
    padding-right: 75%;
}

.intro {
    position: relative;
    color: #fff;
}

.intro:before, .intro:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: #fff8fa;
    z-index: 1;
}

.intro:after {
    background: #282b2e;
    left: auto;
    right: 0;
}

.intro__left, .intro__right {
    position: relative;
    z-index: 2;
    float: left;
    width: 50%;
}

.intro__left {
    background: #fe90af;
}

.intro .logo {
    display: block;
    width: 270px;
    margin: 0 0 60px;
}

.intro .grid li {
    position: relative;
    float: left;
    width: 50%;
    margin: 0 0 50px;
}

.intro .grid li img {
    float: left;
    width: 90px;
}

.intro .grid li span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 130px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
}

.intro .links li {
    margin: 0 0 20px;
}

.intro .links li a {
    position: relative;
    display: block;
    color: #fe90af;
}

.intro .links li img {
    float: left;
    width: 70px;
}

.intro .links li span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 105px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
}

.intro .links li a:hover span {
    text-decoration: underline !important;
}

.intro .grid:after, .intro .grid li:after, .intro .links li a:after {
    content: '';
    clear: both;
    display: block;
}

.leaderboard__wrap {
    margin: 0 -40px;
}

.leaderboard__col {
    float: left;
    width: 50%;
    padding: 0 40px;
}

.leaderboard__col .subheading--img {
    position: relative;
    padding: 75px 0 20px 180px;
}

.leaderboard__col .subheading--img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 170px;
}

.leaderboard__wrap:after {
    content: '';
    clear: both;
    display: block;
}

.leaderboard-html li {
    position: relative;
    margin: 0 0 15px;
    height: 56px;
    padding: 7px 0 0 83px;
    color: #fff;
}

.leaderboard-html li .position {
    position: absolute;
    top: 0;
    left: 0;
    width: 56px;
    height: 56px;
    border-radius: 100%;
    background: #282b2e;
    border: 3px solid #fe90af;
    text-align: center;
    line-height: 50px;
    font-weight: 500;
    font-size: 24px;
}

.leaderboard-html li .bar {
    overflow: hidden;
    height: 42px;
    background: #20373f;
    border-radius: 50px;
}

.leaderboard-html li .bar__inner {
    position: relative;
    width: 100%;
    height: 42px;
    border-radius: 50px;
    background: linear-gradient(to right, #f287a6, #f2d8da);
    color: #282b2e;
    font-size: 21px;
    white-space: nowrap;
    font-weight: 500;
    line-height: 42px;
    box-shadow: 0 0 50px #000;
}

.leaderboard-html li .bar__label {
    padding: 0 80px 0 18px;
    text-overflow: ellipsis;
    overflow: hidden;
}

.leaderboard-html li .bar__percent {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 18px 0 0;
}

.leaderboard-html li:nth-child(1) .position {
    border-color: #e19d33;
}

.leaderboard-html li:nth-child(1) .bar {
    background: #e19d33;
}

.leaderboard-html li:nth-child(1) .bar__inner {
    background: #f4ab3b;
}

.leaderboard-html li:nth-child(2) .position {
    border-color: #808080;
}

.leaderboard-html li:nth-child(2) .bar {
    background: #808080;
}

.leaderboard-html li:nth-child(2) .bar__inner {
    background: #a2a2a2;
    color: #fff;
}

.leaderboard-html li:nth-child(3) .position {
    border-color: #986026;
}

.leaderboard-html li:nth-child(3) .bar {
    background: #986026;
}

.leaderboard-html li:nth-child(3) .bar__inner {
    background: #a47626;
    color: #fff;
}

.leaderboard-section--black-bg {
    background: #282b2e;
    color: #fff;
}

.leaderboard-section__row {
    margin: 0 0 100px;
}

.leaderboard-section__row:after {
    content: '';
    clear: both;
    display: block;
}

.leaderboard-section__row__left, 
.leaderboard-section__row__right {
    float: left;
    width: 50%;
}

.leaderboard-section__row__left p {
    font-size: 21px;
}

.leaderboard-section--pink-bg {
    background: #fe90af;
}

.leaderboard-section--pink-bg .heading {
    color: #fff;
}

.country-leaderboard {
    position: relative;
    margin: 0 0 130px;
    padding: 125px 200px 50px 150px;
}

.country-leaderboard:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/infographic/flag-uk-pink.jpg) top left no-repeat;
    background-size: 100%;
    width: 180px;
    height: 100%;
    pointer-events: none;
}

.country-leaderboard:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    background: url(../images/infographic/flag-us-pink.jpg) bottom left no-repeat;
    background-size: 100%;
    width: 200px;
    height: 100%;
    pointer-events: none;
}

.country-leaderboard .leaderboard-html {
    position: relative;
    z-index: 2;
}

.country-leaderboard .leaderboard-html li {
    margin-bottom: 100px;
}

.country-leaderboard .leaderboard-html li:last-child {
    margin-bottom: 0;
}

.map-img {
    text-align: center;
}

.map-img img {
    max-width: 500px;
}

.leaderboard-html--alt li .bar {
    background: #282b2e;
}

.leaderboard-html--alt li .bar__inner {
    background: linear-gradient(to right, #282b2e, #a4a5a6);
    color: #fff;
}

.leaderboard-html--white li .bar {
    background: #fe90af !important;
}

.leaderboard-html--white li .bar__inner {
    background: linear-gradient(to right, #fff, #ffb3c8) !important;
    color: #fff;
    box-shadow: none;
}

.leaderboard-html--white li .bar__label {
    padding-right: 15px;
    color: #282b2e;
}

.leaderboard-html--white li .position {
    background: #fff;
    border-color: #282b2e !important;
    color: #282b2e;
}

.leaderboard-html--purple li .bar {
    background: #fe90af !important;
}

.leaderboard-html--purple li .bar__inner {
    background: linear-gradient(to right, #430d38, #8f234a) !important;
    color: #fff;
    box-shadow: none;
}

.leaderboard-html--purple li .bar__label {
    padding-right: 15px;
    color: #fff;
}

.leaderboard-html--purple li .position {
    background: linear-gradient(to right, #430d38, #8f234a) !important;
    border-color: #282b2e !important;
    color: #fff;
}

.subheading--img {
    position: relative;
    min-height: 60px;
    padding: 12px 0 0 75px;
}

.subheading--img img {
    width: 60px;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}

.page-footer {
    color: #fff;
    background: url(../images/infographic/smartest-footer-banner.jpg) center right no-repeat #282b2e;
    background-size: 50% auto;
    padding: 50px 0;
}

.page-footer p {
    max-width: 480px;
}

@media (max-width: 1280px) {
    .leaderboard-container {
        padding: 40px 50px;
    }
    
    .intro .grid li img {
        width: 50px;
    }
    
    .intro .grid li span {
        left: 70px;
        font-size: 18px;
    }
    
    .intro .links li img {
        width: 50px;
    }
    
    .intro .links li span {
        left: 70px;
        font-size: 18px;
    }
}

@media (max-width: 1020px) {
    .leaderboard-container {
        padding: 35px 35px;
    }
    
    .page-banner {
        background: #fff !important;
        min-height: 0 !important;
    }
    
    .page-banner p {
        padding-right: 0;
    }
    
    .intro .logo {
        width: 220px;
    }
    
    #main .subheading {
        font-size: 22px;
    }
    
    .leaderboard-html li {
        padding-left: 65px;
    }
    
    .leaderboard-html li .bar__inner {
        font-size: 16px;
    }
    
    .leaderboard__col {
        padding: 0 20px;
    }
    
    .leaderboard__wrap {
        margin: 0 -20px;
    }
    
    .leaderboard-html li .bar__label {
        padding-right: 50px;
    }
    
    .leaderboard-section__row__right.map-img {
        width: 30%;
        float: right;
        padding-top: 75px;
    }
    
    .leaderboard-section__row__left--counties {
        width: 65%;
    }
    
    .leaderboard-section__row__right.map-img img {
        max-width: 100%;
    }
    
    .leaderboard-section__row__left p {
        font-size: 18px;
    }
    
    .page-footer {
        background-size: calc(100% - 500px);
    }
}

@media (max-width: 860px) {
    .country-leaderboard {
        padding: 75px 100px 0 100px;
    }
    
    .country-leaderboard:before {
        width: 120px;
    }
    
    .country-leaderboard:after {
        width: 120px;
    }
}

@media (max-width: 820px) {    
    .leaderboard-section__row__right.map-img {
        display: none !important;
    }
    
    .leaderboard-section__row__left--counties {
        width: 100% !important;
    }
}

@media (max-width: 760px) {
    .page-banner h1 br {
        display: none;
    }
    
    .intro__left, .intro__right {
        width: 100%;
    }
    
    .intro:before, .intro:after {
        display: none;
    }
    
    .intro__right {
        background: #282b2e;
    }
    
    .intro__right .grid {
        max-width: 480px;
    }
    
    .intro .logo {
        width: 180px;
        margin-bottom: 25px;
    }
    
    .leaderboard-container {
        padding: 30px 25px;
    }
    
    .country-leaderboard {
        padding: 0;
    }
    
    .country-leaderboard:before, .country-leaderboard:after {
        display: none;
    }
    
    .country-leaderboard .leaderboard-html li {
        margin-bottom: 25px;
    }
    
    .leaderboard-section__row__left, .leaderboard-section__row__right {
        width: 100%;
    }
    
    .leaderboard-section__row__right img {        
        width: 500px;
        max-width: 100%;
    }
    
    .page-footer {
        background: #282b2e;
    }
    
    .page-footer p {
        max-width: none;
    }
    
    .leaderboard__wrap {
        margin: 0;
    }
    
    .leaderboard__col {
        padding: 0;
        width: 100%;
    }
    
    .leaderboard__wrap .leaderboard__col:first-child {
        margin-bottom: 30px;
    }
    
    .leaderboard__col .subheading--img img {
        width: 75px;
    }
    
    .leaderboard__col .subheading--img {
        padding: 30px 0 0 90px;
        margin-bottom: 20px;
    }
    
    .leaderboard-html li {
        padding-top: 0;
        padding-left: 45px;
    }
    
    .leaderboard-html li .position {
        width: 42px;
        height: 42px;
        line-height: 38px;
        font-size: 18px;
    }
    
    .leaderboard-html li .bar__inner {
        font-size: 15px;
    }
    
    .leaderboard-html li .bar__label {
        padding: 0 45px 0 10px;
    }
    
    .leaderboard-html li .bar__percent {
        padding-right: 7px;
    }
    
    #main {
        font-size: 16px;
    }
}

@media (max-width: 500px) {
    .leaderboard-container {
        padding: 25px 15px;
    }
}

.pink-intro-section {
    background: #fe90af;
    color: #fff;
}

.pink-intro-section .logo {
    margin: 0 0 60px;
    display: block;
    max-width: 220px;
}

.pink-intro-section .grid {
    margin: 0 -60px;
}

.pink-intro-section .grid:after {
    content: '';
    display: block;
    clear: both;
}

.pink-intro-section__col {
    float: left;
    padding: 0 60px;
    width: 50%;
}

.pink-intro-section .map {
    margin: 60px auto 0;
    display: block;
    width: 730px;   
}

.two-col-section--white {
    background: #fff;
    color: #282b2e;
}

.two-col-section--white .heading, 
.two-col-section--white .subheading {
    color: #282b2e;
}

.two-col-section--pink {
    background: #fe90af;
    color: #282b2e;
}

.two-col-section--pink .heading, 
.two-col-section--pink .subheading {
    color: #282b2e;
}

.two-col-section--black {
    background: #282b2e;
    color: #fff;
}

.two-col-section--black .heading, 
.two-col-section--black .subheading {
    color: #fff;
}

.white-txt {
    color: #fff;
}

.two-col-section .grid {
    margin: 0 -60px;
    position: relative;
}

.two-col-section .grid:after {
    content: '';
    clear: both;
    display: block;
}

.two-col-section__col {
    float: left;
    width: 50%;
    padding: 0 60px;
    position: relative;
}

.virtual-cutout-img {
    position: absolute;
    top: -90px;
    right: 0;
    width: 280px;
}

.work-hours-graph {
    width: 860px;
    display: block;
    margin: 220px auto 0;
}

.two-col-section__col .heading {
    padding-top: 0;
}

.client-entertain-graph {
    width: 500px;
    display: block;
    margin: 0;
}

.popular-graph {
    width: 500px;
    display: block;
    margin: 0;
}

.thursday-graph {
    width: 350px;
    display: block;
    margin: 0;
}

.thursday-img {
    width: 480px;
    display: block;
    margin: 0;
}

.positive-img {
    width: 350px;
    display: block;
    margin: 0;
}

.percent-stat {
    position: relative;
    margin: 0 0 40px;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1pt;
}

.percent-stat__percent, .percent-stat strong {
    font-size: 40px;
}

.arrow-stat {
    position: relative;
    padding: 0 0 0 140px;
    background: url(../images/infographic/icon-arrow.jpg) top left no-repeat;
    background-size: 140px auto;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1pt;
    min-height: 210px;
}

.arrow-stat__stat {
    font-size: 40px;
}

.two-col-section .grid.grid--margin-top {
    margin-top: 100px;
}

.carbon-img {
    display: block;
    width: 445px;
    margin: 0 0 60px;
}

.carbon-stat__heading, .carbon-stat__subheading {
    position: relative;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 1pt;
}

.carbon-stat__subheading {
    font-size: 40px;
}

.alchohol-1, .alchohol-2 {
    width: 350px;
    margin: 0 auto;
    display: block;
}

.page-banner--v3 {
    background-image: url(../images/infographic/uk-us-banner.jpg);
    min-height: 600px;
}

.uk-us-graph {
    width: 550px;
    display: block;
    margin: 0 0 60px;
}

.uk-us-work-graph {
    width: 1000px;
    display: block;
    margin: 0 auto;
}

.uk-us-alcohol-img {
    display: block;
    width: 560px;
}

.wine-stat {
    margin: 0 0 60px;
    padding: 40px 0 0 150px;
    background: url(../images/infographic/glass-icon-1.jpg) top left no-repeat;
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 1pt;
    background-size: auto 200px;
}

.wine-stat strong {
    font-size: 48px;
    display: block;
}

.wine-stat--alt {
    background-image: url(../images/infographic/glass-icon-2.jpg);
}

#main .heading--black {
    color: #282b2e;
}

.us-company-section-banner {
    text-align: center;
    padding: 50px 0 0;
    margin: 0 0 75px;
}

.us-company-section-banner img {
    display: block;
    margin: 0 auto 50px auto;
    width: 960px;
}

.uk-fast-payers {
    display: block;
    width: 1000px;
    margin: 0 auto 80px auto;
}

.us-fast-payers, .us-slow-payers {
    width: 400px;
}

.subheading--uk, .subheading--us {
    position: relative;
    padding: 50px 0 50px 180px;
    background: url(../images/infographic/flag-uk.jpg) center left no-repeat;
    background-size: auto 160px;
    min-height: 170px;
}

.subheading--us {
    background-image: url(../images/infographic/flag-us.jpg);
}

.subheading--us-alt {
    background: none;
    padding-left: 0;
}

@media (max-width: 1280px) {
    .virtual-cutout-img {
        display: none;
    }
    
    .work-hours-graph {
        margin-top: 0;
    }
    
    .two-col-section .grid {
        margin: 0 -40px;
    }
    
    .two-col-section__col {
        padding: 0 40px;
    }
}



@media (max-width: 1020px) {    
    .pink-intro-section .logo {
        width: 190px;
        margin: 0 0 30px;
    }    
}

@media (max-width: 760px) {    
    .two-col-section .grid, .pink-intro-section .grid {
        margin: 0 0px;
    }
    
    .two-col-section__col, .pink-intro-section__col {
        padding: 0 0 40px;
        width: 100% !important;
    }
    
    .pink-intro-section__col {
        padding: 0;
    }
    
    .two-col-section__col--spacer {
        display: none !important;
    }
    
    .uk-us-graph, .uk-us-alcohol-img {
        width: 380px;
    }
    
    .subheading--uk, .subheading--us {
        background: none !important;
        padding: 0;
        min-height: 0;
    }
    
    .two-col-section .grid {
        margin-top: 0 !important;
    }
    
    .country-leaderboard {
        margin-bottom: 50px;
    }
    
    .country-leaderboard {
        margin-top: 30px;
    }
    
    .leaderboard-section__row {
        margin-bottom: 30px;
    }
    
    .wine-stat {
        background-size: auto 125px;
        padding: 0 0 0 100px;
        font-size: 15px;
    }
    
    .wine-stat strong {
        font-size: 32px;
    }
    
    .arrow-stat__stat {
        font-size: 32px;
    }
    
    .arrow-stat {
        font-size: 15px;
    }
}

@media (max-width: 991px) {
    #main .heading {
        font-size: 24px;
        margin-bottom: 25px;
    }
}

@media (min-width: 1200px) {
    .percent-stat { font-size: 20px; }    
    .percent-stat__percent, .percent-stat strong { font-size: 80px; }
    .arrow-stat { font-size: 20px; }
    .arrow-stat__stat { font-size:62px; line-height:1; }
}

.mfp-content #experience-custom-modal {
    display: block !important;
}

.page-banner--v4 {
    background-image: url(../images/infographic/christmas-1.jpg);
}

.leaderboard-container--contain {
    position: relative;
    max-width: 1500px;
    margin: 0 auto;
    z-index: 2;
}

.feature-block-txt {
    position: relative;
    margin: 0 0 40px;
    padding: 0 0 55px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1pt;
    font-size: 30px;
}
.feature-block-txt .sm {
    font-size: 18px;
}
.feature-block-txt:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 8px;
    background: #fff;
}
.feature-block-txt:last-child {
    margin-bottom: 0;
}
.feature-block-txt:last-child:after {
    display: none;
}

.two-col-section--white-pink {
    position: relative;
}
.two-col-section--white-pink:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 50%;
    height: 100%;
    background: #fe90af;
}

.two-col-section--black-white {
    position: relative;
}
.two-col-section--black-white:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 50%;
    height: 100%;
    background: #fff;
}

.christmas-low-spenders:after {
    content: '';
    clear: both;
    display: block;
}

.christmas-low-spenders img {
    float: left;
    width: 33.33%;
}

.christmas-2 {
    display: block;
}

.christmas-9 {
    display: block;
    width: 500px;
    margin: 0 auto;
}

.image-feature-block {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1pt;
    color: #282b2e;
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 50px;
}

.image-feature-block strong {
    font-size: 72px;
    display: block;
}

.image-feature-block:after {
    content: '';
    clear: both;
    display: block;
}

.image-feature-block img {
    float: left;
    width: 320px;
    margin-right: 50px;
}

.image-feature-block--alt img {
    float: right;
    margin: 0 0 0 50px;
}

.image-feature-block--no-img {
    color: #fe90af;
    text-align: center;
    margin: 0;
}

.image-feature-block--no-img strong {
    display: inline-block;
}

@media (max-width: 760px) {
    .christmas-2 {
        margin-top: -60px;
        width: 500px;
    }
    
    .christmas-low-spenders img {
        float: none;
        width: 75%;
    }
    
    .christmas-8 {
        display: none;
    }
    
    .two-col-section--white-pink:after, .two-col-section--black-white:after {
        display: none;
    }
    
    .feature-block-txt .white-txt {
        color: #fe90af;
    }
    
    .feature-block-txt:after {
        background: #fe90af;
        left: 50%;
        margin-left: -40px;
    }
    
    .feature-block-txt {
        font-size: 24px;
        text-align: center;
    }
    
    .feature-block-txt .sm {
        font-size: 16px;
    }
    
    .two-col-section__col--bg-white {
        background: #fff;
        padding: 30px 25px;
        margin: 0 -25px;
        width: auto !important;
    }
    
    .image-feature-block {
        font-size: 24px;
    }
    
    .image-feature-block strong {
        font-size: 42px;
    }
}

@media (max-width: 650px) {
    
    .image-feature-block img {
        display: none;
    }
    
    .image-feature-block {
        text-align: center;
    }
    
}

@media (max-width: 480px) {
    
    .image-feature-block img {
        display: none;
    }
    
    .image-feature-block {
        text-align: center;
        font-size: 17px;
    }
    
    .image-feature-block strong {
        font-size: 32px;
    }
    
}