/*
		 ██████  ██████  ██       ██████  ██    ██ ██████  ███████
		██      ██    ██ ██      ██    ██ ██    ██ ██   ██ ██
		██      ██    ██ ██      ██    ██ ██    ██ ██████  ███████
		██      ██    ██ ██      ██    ██ ██    ██ ██   ██      ██
		 ██████  ██████  ███████  ██████   ██████  ██   ██ ███████

		BS Blue - rgb(0,53,173)
		BS Blue Hover -  rgb(128,154,214)

		Bubble Blue - rgb(22, 65, 148)
		LightBlue - rgb(0,123,189)
		PaleBlue - rgb(16,177,237)
		LightestBlue - rgb(237,241,249)

		Teal - rgb(28,166,185)
		Teal Hover - rgb(142,211,220)

		Green - rgb(86,153,38)
		Green Hover - rgb(171,204,147)

		LightGreen - rgb(128,189,38)

		Pink - rgb(181,0,119)
		Pink Hover - rgb(218,128,187)

	NEW
    BS Green 2018 - rgb(101,179,46) (REPLACE BLUE AND GREEN)
  	BS Green 2018 Hover -  rgb(182, 220, 157)

		BS Fresh Green 2018 - rgb(180,204,4) (REPLACE TEAL + GREEN)

	*/

#video{
    margin-top: -30px;
    margin-bottom: -5px;
}

@font-face {
    font-family: 'FS Lola';
    src: url('../fonts/FSLola/FSLola-Light.eot');
    src: url('../fonts/FSLola/FSLola-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FSLola/FSLola-Light.woff2') format('woff2'),
        url('../fonts/FSLola/FSLola-Light.woff') format('woff'),
        url('../fonts/FSLola/FSLola-Light.ttf') format('truetype'),
        url('../fonts/FSLola/FSLola-Light.svg#FSLola-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Lola';
    src: url('../fonts/FSLola/FSLola.eot');
    src: url('../fonts/FSLola/FSLola.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FSLola/FSLola.woff2') format('woff2'),
        url('../fonts/FSLola/FSLola.woff') format('woff'),
        url('../fonts/FSLola/FSLola.ttf') format('truetype'),
        url('../fonts/FSLola/FSLola.svg#FSLola') format('svg');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Lola';
    src: url('../fonts/FSLola/FSLola-Medium.eot');
    src: url('../fonts/FSLola/FSLola-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FSLola/FSLola-Medium.woff2') format('woff2'),
        url('../fonts/FSLola/FSLola-Medium.woff') format('woff'),
        url('../fonts/FSLola/FSLola-Medium.ttf') format('truetype'),
        url('../fonts/FSLola/FSLola-Medium.svg#FSLola-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Lola';
    src: url('../fonts/FSLola/FSLola-Bold.eot');
    src: url('../fonts/FSLola/FSLola-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FSLola/FSLola-Bold.woff2') format('woff2'),
        url('../fonts/FSLola/FSLola-Bold.woff') format('woff'),
        url('../fonts/FSLola/FSLola-Bold.ttf') format('truetype'),
        url('../fonts/FSLola/FSLola-Bold.svg#FSLola-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Lola';
    src: url('../fonts/FSLola/FSLola-ExtraBold.eot');
    src: url('../fonts/FSLola/FSLola-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/FSLola/FSLola-ExtraBold.woff2') format('woff2'),
        url('../fonts/FSLola/FSLola-ExtraBold.woff') format('woff'),
        url('../fonts/FSLola/FSLola-ExtraBold.ttf') format('truetype'),
        url('../fonts/FSLola/FSLola-ExtraBold.svg#FSLola-ExtraBold') format('svg');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'lunchbox';
    src: url(../fonts/lunchboxw01-regular.eot);
    src: url(../fonts/lunchboxw01-regular.eot?#iefix) format('embedded-opentype'),
    url(../fonts/lunchboxw01-regular.woff2) format('woff2'),
    url(../fonts/lunchboxw01-regular.woff) format('woff'),
    url(../fonts/lunchboxw01-regular.ttf) format('truetype'),
    url(../fonts/lunchboxw01-regular.svg#lunchboxw01-regularregular) format('svg');
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'eirik';
    src: url(../fonts/eirik_raude.eot);
    src: url(../fonts/eirik_raude.eot?#iefix) format('embedded-opentype'),url(),
    url(../fonts/eirik_raude.woff2) format('woff2'),
    url(../fonts/eirik_raude.woff) format('woff'),
    url(../fonts/eirik_raude.ttf) format('truetype'),
    url(../fonts/eirik_raude.svg#eirik_raude) format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'trebuchet';
  src: url(../fonts/TrebuchetMS-Bold.eot);
  src: url(../fonts/TrebuchetMS-Bold.eot#iefix) format('embedded-opentype'),
  url(../fonts/TrebuchetMS-Bold.woff2) format('woff2'),
  url(../fonts/TrebuchetMS-Bold.woff) format('woff'),
  url(../fonts/TrebuchetMS-Bold.ttf) format('truetype'),
  url(../fonts/TrebuchetMS-Bold.svg#TrebuchetMS-Bold) format('svg');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'trebuchet';
  src: url(../fonts/TrebuchetMS.eot);
  src: url(../fonts/TrebuchetMS.eot#iefix) format('embedded-opentype'),
  url(../fonts/TrebuchetMS.woff2) format('woff2'),
  url(../fonts/TrebuchetMS.woff) format('woff'),
  url(../fonts/TrebuchetMS.ttf) format('truetype'),
  url(../fonts/TrebuchetMS.svg#TrebuchetMS) format('svg');
  font-weight: normal;
  font-style: normal;
}

*{
    font-family: 'FS Lola', sans-serif;
}


body {
    padding: 0;
    margin: 0;
    overflow-y: scroll;
}

h1,
h2,
h3,
h4,
h5,
p,
pre {
    padding: 0;
    margin: 0;
    line-height: inherit;
    white-space: normal;
    display: block;
    font-weight: inherit;
    font: inherit;
    vertical-align: baseline
}

a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
    color: inherit
}

a img {
    border: inherit
}

input,
textarea,
input:active,
textarea:active,
input:focus,
textarea:focus,
input:hover,
textarea:hover {
    border: none;
    outline: none;
    background: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    -ms-border-radius: 0;
    -khtml-border-radius: 0;
    padding: 5px
}

html {
    /* max-width: 1600px;*/
    margin: 0 auto;
}

body {
    font-family: 'trebuchet', sans-serif;
    font-size: 14px;
    color: #111;
    font-weight: 400;
    line-height: 18px;
    background: #fff;
    width: 100%
}

#bodyWrapper {
    width: 100%;
    overflow-x: hidden
}

body.fix {
    overflow: hidden;
    position: fixed
}

h1,
h2 {
    font-family: 'eirik'
}

h2 {
    font-size: 33px;
    color: rgb(101,179,46);
    line-height: 30px;
    padding-bottom: 10px
}

h2 big {
    font-family: helvetica;
    font-size: 30px;
}

.lg h2{
    font-size: 41px;
    line-height: 36px;
}

h3 {
    font-size: 40px;
    line-height: 40px;
    color: rgb(101,179,46);
    font-weight: 300
}

h4 {
    font-size: 24px;
    padding: 5px 0;
    line-height: 28px;
    color: rgb(101,179,46);
    font-weight: 400
}

strong {
    font-weight: 500
}

em {
    font-style: normal
}

u,
ins {
    text-decoration: underline;
    padding: 0;
    margin: 0;
    font-style: normal
}

ol {
    margin: 0;
    padding-left: 38px;
    list-style-type: none
}

ol li {
    padding-top: 14px
}

ol li ol {
    padding-left: 48px
}

ol li em:first-child {
    display: inline-block;
    margin-left: -38px;
    margin-right: 5px;
    color: rgb(101,179,46);
    width: 30px;
    text-align: right;
    vertical-align: top
}

table {
    border: 1px solid rgb(85, 189, 241);
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 13px;
    line-height: 17px;
}

table th {
    color: rgb(101,179,46)
}

table th,
table td {
    padding: 5px 8px;
    min-width: 80px
}

table em{
    font-style: italic;
}

ul li {
    padding: 5px 0
}

a.link:hover {
    text-decoration: underline
}

a.link2:hover {
    opacity: 0.6
}

.clear {
    clear: both
}

.noSelect {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.right {
    float: right
}

.left {
    float: left
}

.center {
    text-align: center
}

.maxbox {
    width: 100%;
    overflow-x: hidden;
    position: r
}

.text-left {
    text-align: left
}

.sprite {
    background: url(../images/svg-fallback/sprites.png) 0 0 no-repeat;
    background: linear-gradient(transparent, transparent), url(../images/sprites.svg) 0 0 no-repeat;
    background-size: auto 82px;
}

.greyBG {
    background: rgb(231, 231, 231)
}

.lightGreyBg {
    background: rgb(247, 247, 247)
}

.lightestBlueBg {
    background: rgb(237, 241, 249)
}

.button {
    background: linear-gradient(to right, #65b32e, #dfd901);
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    -ms-border-radius: 30px;
    -khtml-border-radius: 30px;
    padding: 7px 20px;
    color: #fff!important;
    display: inline-block;
    font-size: 18px;
    line-height: 22px;
}

.button:hover {
    background: rgb(182, 220, 157);
}

.wrap960 {
    width: 960px;
    margin: 0 auto;
    max-width: 96%
}

.wrap740 {
    max-width: 100%;
    width: 770px;
    margin: 0 auto;
    padding: 10px 25px 25px 25px;
    box-sizing: border-box
}

.wrap740 hr {
    display: block;
    padding: 0;
    margin: 22px 0;
    height: 0;
    border: none;
    border-bottom: 1px solid rgb(85, 189, 241)
}

#cookieBar{
    display: none;
    width:100%;
    line-height: 30px;
    padding:10px 35px;
    z-index: 10;
    position: fixed;
    bottom:0;
    left:0;
    background: #fff;
    color: rgb(101,179,46);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    box-sizing:border-box;
    font-size: 14px;
}

#header-dummy {
    height: 140px;
    display: none;
}

#header {
    height: 140px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    color: #fff;
    text-align: center;
    background: #fff;
    z-index: 9;
    transition: 0.3s;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}
#header.header-scroll{
    height: 115px;
}

#hamburger {
    width: 68px;
    height: 87px;
    display: none;
    padding: 32px 17px;
    box-sizing: border-box;
    top: 0;
    right: 0;
    position: absolute;
    cursor: pointer;
    z-index: 10
}

#mobSearch {
    width: 68px;
    height: 87px;
    padding: 28px 19px;
    display: none;
    box-sizing: border-box;
    top: 0%;
    right: 70px;
    position: absolute;
    cursor: pointer;
    z-index: 10
}

#mobSearch em.sprite {
    width: 30px;
    height: 30px;
    background-position: -334px 1px;
    display: block
}

#hamburger em {
    background: rgb(101,179,46);
    display: block;
    width: 100%;
    height: 3px;
    margin-bottom: 7px
}

#hamburger.hamOpen em,
#hamburger:hover em{
    background: rgb(128, 154, 214);
}

#hamburger.hamOpen .ham1 {
    transform: rotate(45deg);
    margin-top: 9px;
    margin-left: 2px
}

#hamburger.hamOpen .ham2 {
    display: none
}

#hamburger.hamOpen .ham3 {
    transform: rotate(-45deg);
    margin-top: -10px;
    margin-left: 2px
}

#mobSearch:hover,
#mobSearch.hamOpen {
    background: rgb(128, 154, 214)
}

#mobSearch:hover em.sprite, #mobSearch.hamOpen em.sprite {
    background-position: -369px 1px
}

#logo {
    padding: 18px 0 9px 24px;
    width:308px;
    display: block;
    float: left;
    transition: 0.3s
}

.logo-container{
    display: inline-flex;
    align-items: center;
    position: absolute;
    top: 20px;
    left: 20px;
    gap: 50px;
}
.logo-container .logo #royal{
    height: 100px;
}
.logo-container .logo #bs-logo{
    height: 65px;
}
.header-scroll .logo-container .logo #royal{
    height: 75px;
}
.header-scroll .logo-container .logo #bs-logo{
    height: 48px;
}

#header ul {
    background: rgb(101,179,46);
    display: inline-block;
    margin-top: -3px;
    padding: 0;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -khtml-border-radius: 4px 4px 0 0;
    position: relative;
    z-index: 2;
    line-height: 0;
    font-size: 0;
    top: 120px;
}

#header.header-scroll ul{
    top: 95px;
}

#header > ul {
    transition: 0.3s
}

#searchbar-mobile {
    display: none;
    position: fixed;
    width: 100%;
    color: #111;
    top: 103px;
    left: 0;
    height: 45px;
    box-sizing: border-box;
    line-height: 27px;
    font-size: 14px;
    padding: 8px 20px;
    z-index: 2;
    border: none;
    border-bottom: 2px solid rgb(101,179,46);
    background: #eee;
}

#searchbar {
    position: absolute;
    display: none;
    width: 100%;
    color: #111;
    top: 100%;
    height: 45px;
    background: #fff;
    border-bottom: 2px solid rgb(101,179,46);
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
    line-height: 27px;
    font-size: 14px;
    padding: 8px 20px;
    z-index: 2
}

#searchbar em.close,
#searchbar-mobile em.close {
    width: 19px;
    height: 19px;
    background-position: -245px 1px;
    cursor: pointer;
    margin: 4px 0 0 4px;
    vertical-align: top;
    display: inline-block
}

#searchbar input[type="text"],
#searchbar-mobile input[type="text"] {
    height: 27px;
    width: 470px;
    background: #f7f7f7;
    border: 1px solid #ebebeb;
    padding: 5px 10px;
    margin: 0 10px
}

#searchbar input[type="submit"],
#searchbar-mobile input[type="submit"] {
    background: rgb(101,179,46);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    padding: 7px 20px;
    color: #fff!important;
    display: inline-block;
    cursor: pointer
}

#searchbar input[type="submit"]:hover #searchbar-mobile input[type="submit"]:hover {
    background: rgb(128, 154, 214)
}

#header ul li {
    display: inline-block;
    padding: 0;
    margin: 0;
    height: 46px;
    vertical-align: middle;
    font-size: 14px;
    line-height: 24px
}

#header ul li a {
    display: block;
    padding: 11px 19px
}

#header ul li:hover{
    background: rgb(182, 220, 157);
}

#header ul li.navon {
    background: rgb(180,204,4);
}

#header ul li:hover > ul {
    display: block
}

#header ul li ul {
    display: none;
    background: #fff;
    position: absolute;
    line-height: 18px;
    top: 100%;
    width: 100%;
    margin: 0!important;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    -ms-border-radius: 0;
    -khtml-border-radius: 0;
    left: 0;
    z-index: 3;
    font-size: 14px;
    text-align: left;
    padding: 0;
    box-sizing: border-box;
    color: #111;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4)
}

#header.header-scroll ul li ul{
    margin-top: -50px!important;
}

#header > ul > li > ul {}

#header ul li ul li {
    padding: 6px 5px 6px 25px;
    display: block;
    height: auto;
    line-height: 18px;
    width: 33.333%;
    float: left;
    font-weight: 500;
    box-sizing: border-box
}

#header ul li ul li.navImage {
    padding: 0 25px 15px 25px;
    height: 100%;
    font-size: 10px;
    line-height: 15px;
    float: right;
    width: 26.5%;
    font-weight: 400
}

#header .navLinks {
    height: 100%;
    float: left;
    width: 73.5%;
    font-weight: 400;
    padding: 10px 0 5px 0;
    margin-top: 0;
}

#header ul li ul li.navImage:hover {
    background: rgb(231, 231, 231)!important;
    color: #111!important
}

#header ul li ul li.navImage img {
    display: block;
    width: 100%
}

#header ul li ul li.navImage p {
    padding: 10px 0 0 0;
    margin: 0
}

#header ul li ul li a {
    padding: 5px
}

#header ul li ul li:hover,
#header ul li ul li.navon {
    background: none;
    color: rgb(101,179,46)
}

#header ul li ul li em.sprite {
    background-position: 0 -12px;
    width: 11px;
    height: 10px;
    margin-left: -16px;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px
}

#header ul li ul li ul li:hover em.sprite,
#header ul li ul li ul li.navon em.sprite {
    /*background-position: 0 0*/
}

#header ul li ul li ul {
    position: static;
    display: block;
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 0;
    box-shadow: none
}

#header ul li ul li ul li {
    float: none;
    width: 100%;
    max-width: 100%;
    font-weight: 400;
    font-size: 13px;
    padding: 0 0 0 30px
}

#header ul li ul li ul li ul li {
    padding: 0;
    font-size: 12px;
}

#header ul li ul li ul li ul li span{
    padding-right:6px;
}

#header em.sprite.navArrow {
    background-position: -312px 7px;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    display: none;
    vertical-align: middle;
    cursor: pointer
}

#header .open > em.sprite.navArrow {
    background-position: -312px -7px
}

em.magnify {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    display: inline-block;
    background-position: -109px 1px
}

#header > ul > li:first-child {
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
    -o-border-radius: 4px 0 0 0;
    -ms-border-radius: 4px 0 0 0;
    -khtml-border-radius: 4px 0 0 0
}

#header ul li.last-child {
    border-radius: 0 4px 0 0;
    -webkit-border-radius: 0 4px 0 0;
    -moz-border-radius: 0 4px 0 0;
    -o-border-radius: 0 4px 0 0;
    -ms-border-radius: 0 4px 0 0;
    -khtml-border-radius: 0 4px 0 0
}

#social-media {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    height: 40px;
    transition: 0.3s
}

#social-media a {
    display: block;
    float: left;
    margin: 0;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px
}

#social-media em {
    width: 34px;
    height: 34px;
    display: block;
    margin: 7px
}

#social-media em.twitter.lg{
    display: none;
}

#social-media a.text-link{
    font-size: 0;line-height: 0;border:2px solid transparent;box-sizing: border-box;
}
#social-media a.text-link > img{
    padding:5px;display:block;margin:5px;border:none;
}
#social-media a.text-link:hover{
    border:2px solid rgb(182, 220, 157);background: none;
}

.twitter {
    background-position: -10px 3px
}

.linkedin {
    background-position: -35px 3px
}

.twitter.lg {
    background-position: -504px -44px
}

.instagram.lg{
    background-position: -406px -44px;
}

.linkedin.lg {
    background-position: -504px 4px
}

.phone.lg {
    background-position: -601px 4px
}

#social-media a:hover {
    background: rgb(182, 220, 157)
}

#social-media a:hover em.twitter.lg {
    background-position: -556px -44px
}

#social-media a:hover em.linkedin.lg {
    background-position: -554px 4px
}

#social-media a:hover em.instagram.lg {
    background-position: -456px -44px
}

#social-media a:hover em.phone.lg {
    background-position: -651px 4px
}

#header.mini {
    height: 87px;
    transition: 0.3s
}

#header.mini #logo {
    padding: 12px 0 0 24px;
    height: 53px;
    transition: 0.3s
}

#header.mini > ul {
    margin-top: -12px;
    transition: 0.3s
}

#header.mini #social-media {
    padding: 18px;
    transition: 0.3s
}

/* Basterdize Nav - START */

#header ul li{
    position: relative;
}

#header .navLinks{
    width: 100%;
    padding: 10px 0;
}

#header ul li ul li {
    float: none;
    display: block;
    width: 100%;
    border-top: 1px solid #eee;
    border:none
}

#header ul li ul li:first-child, #header ul li ul li ul li{
    border:none
}

#header ul li ul{
    width:230px;
    left:50%;
    margin-left: -115px!important;
}

#header > ul li:first-child + li ul{
    left:0;
    margin-left: 0!important;
}

#header ul li ul li ul{
    width: 100%;
    left:0;
    margin-left: 0!important;
}

/* Basterdize Nav - END */

p {
    padding-top: 15px
}

#slideshow {
    width: 100%;
    overflow: hidden;
    position: relative
}

.desktop {
    display: block!important
}

.mobile {
    display: none!important
}

#slideshow img {
    display: block
}

#slideshow img.desktop {
    width: 100%;
    min-width: 1366px
}

#slideshow .bubble {
    width: 574px;
    height: 574px;
    position: absolute;
    right: -70px;
    bottom: -100px;
    border-radius: 300px;
    -webkit-border-radius: 300px;
    -moz-border-radius: 300px;
    -o-border-radius: 300px;
    -ms-border-radius: 300px;
    -khtml-border-radius: 300px;
    padding: 115px;
    box-sizing: border-box;
    color: #fff;
    font-size: 25px;
    text-align: center;
    line-height: 30px;
    /* background: rgb(22, 65, 148);
    background: rgba(22, 65, 148, 0.87) */
    background-image: url('/images/bubble.png');
}

#slideshow .bubble h1 {
    font-size: 65px;
    line-height: 60px
}

#slideshow .bubble {
    width: 474px;
    height: 474px;
    padding: 90px 90px 80px 75px;
    font-size: 22px;
    line-height: 26px;
}
#slideshow .bubble h1 {
    font-size: 54px;
    line-height: 49px;
}

#slideshow .bubble p {
    padding-top: 40px
}

#arc-box {
    background: rgb(237, 248, 249);
    margin-top: 270px;
    position: relative
}

#arc-box .bg {
    width: 100%;
    display: block;
    position: absolute;
    bottom: 100%;
    left: 0
}

#arc-box .content {
    padding: 1px
}

#arc-box .triple {
    margin-top: -225px;
    position: relative;
    z-index: 2
}

#arc-box .triple.static {
    margin-top: -190px;
    margin-left: 0;
    margin-right: 50px
}

#arc-box .text-block.static {
    margin-top: -190px;
    z-index: 2;
    position: relative;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 30px
}

.triple {
    width: 734px;
    margin: 0 auto
}

.triple-1 {
    width: 371px;
    height: 259px;
    overflow: hidden;
    float: left
}

.triple-1.only-2{
    padding-top: 35px;
}

.triple-2 {
    float: right;
    padding-top: 48px;
    width: 333px;
    height: 446px;
    overflow: hidden
}

.triple-2.only-2{
    padding-top: 10px;
}

.triple-3 {
    padding-top: 28px;
    float: left;
    padding-left: 60px;
    width: 311px;
    height: 286px
}

.triple-1 img,
.triple-2 img,
.triple-3 img {
    width: 100%
}

.info {
    background: #fff;
    width: 320px;
    height: 318px;
    position: absolute;
    padding: 28px;
    padding:28px 23px 18px 23px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 16px;
}

.info h2 {
  font-size: 31px;
}

.triple .info {
    top: 96px;
    left: 50%;
    margin-left: -160px
}

.triple.static.md {
    padding-bottom: 50px
}

.triple.static.md .info {
    padding: 15px;
    top: 95px
}

.triple.static.md .info .center img {
    width: 100%;
    display: block;
    padding: 0 0 15px 0
}

.triple.static.md .info .center h2 {
    font-size: 42px;
    line-height: 37px
}

.triple.static.md .info h2 {
    text-align: inherit;
    display: block;
    font-size: 36px;
    line-height: 33px
}

.triple.static.md .info p {
    padding: 0 0 20px 0
}

.triple.static.md .triple-1 {
    padding-top: 0
}

.triple.static.md .triple-2 {
    padding-top: 50px
}

.triple.static.md .triple-3 {
    padding-left: 30px;
    padding-top: 36px;
    width: 255px;
    height: auto
}

.info h2 {
    text-align: center
}

.banner .info h2 {
    text-align: left
}

.info .button {
    margin: 20px 0 0 0
}

.banner {
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 2;
}

.banner.max550{
    max-height:515px
}

.banner img {
    display: block;
    width: 100%;
}

.banner img.singleImage {
    width: 492px;
    height: 438px;
    position: absolute;
    left: 16%;
    top: 50%;
    margin-top: -244px
}

.banner .info {
    right: 15%;
    top: 50%;
    margin-top: -159px
}

.banner.two .info {
    width: 422px;
    height: 380px;
    right: 9.25%;
    margin-top: -190px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.banner.reverse.two > .info{
    right: auto;
    left:9.25%;
}

.banner.reverse .triple{
    left: auto;
    right:9.25%;
}

.banner.two.two-b > .info {
    padding: 55px 47px
}

.banner.two.two-c > .info {
    padding: 55px 47px;
    height: 300px;
    margin-top: -150px;
}

.banner.one .info {
    width: 488px;
    height: 438px;
    padding: 90px 60px 20px 60px;
    right: 16%;
    margin-top: -194px;
    margin-top: -224px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.banner.one-c .info {
    width: 728px;
    height: 358px;
    padding: 55px;
    right: 16%;
    margin-top: -179px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.banner.one-b .info {
    width: 488px;
    height: 364px;
    padding: 70px 60px;
    /* right: 16%; */
    left:11%;
    margin-top: -182px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.info.absImg img:first-child {
    top: 30px;
    right: 30px;
    z-index: 2;
    position: absolute;
    width: auto
}

.banner .triple {
    position: absolute;
    width: 528px;
    left: 9.25%;
    height: 414px;
    top: 50%;
    margin: -207px 0 0 0
}

#hsim.hsim #step1{
    display: block;
}

#hsim.hsim h2 {
    font-size: 33px;
}

#hsim.banner .triple{
    height: 437px;
}

#hsim.banner .triple,
.open-plan.banner .triple {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0;
    left: auto;
    top: auto
}

#hsim.banner .triple .info,
.open-plan.banner .triple .info {
    display: table
}

#hsim.banner .triple .info h2,
.open-plan.banner .triple .info h2 {
    display: table-cell;
    vertical-align: middle;
    font-size: 33px;
    padding: 0;
    line-height: 35px
}

.open-plan.banner .triple .info h2 {
    font-size: 30px;
    line-height: 32px
}

#hsim.banner .info.right,
.open-plan.banner .info.right {
    float: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    display: inline-block;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    vertical-align: top;
    width: 440px;
    max-width: 90%;
    height: 330px;
    text-align: left;
    padding: 35px;
    margin: 20px 0 0 50px
}

.open-plan.banner .info.right {
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    width: 580px;
    box-shadow: none;
    height: auto;
    padding: 10px 15px;
    margin: 0 25px 0 25px
}

.open-plan.banner .triple .info {
    padding: 14px
}

#hsim.banner .info.right p,
.open-plan.banner .info.right p {
    padding: 7px 0
}

.open-plan.open-plan-2 .info.right{
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    background: #fff;
    padding:30px;
    margin: 60px 70px;
    width: 490px;
}

.future #hsim.banner .info.right {
    height: auto;
    margin-top: 75px
}

.triple.static {
    width: 534px;
    min-height: 336px;
    position: relative;
    display: inline-block;
    margin-left: 90px
}

.triple.static .info {
    top: 56px;
    left: 50%;
    width: 272px;
    height: 223px;
    margin-left: -136px;
    padding: 25px
}

.triple.static .info h2 {
    font-size: 30px;
    text-align: left;
    line-height: 29px
}

.triple.static .info img{
    height: auto!important;
    max-width: 100%;
}

.static .triple-1 {
    width: 281px;
    height: auto;
    padding-top: 23px
}

.static .triple-2 {
    width: 233px;
    height: auto;
    padding-top: 0
}

.banner .triple-1 {
    width: 268px;
    height: auto
}

.banner .triple-2 {
    width: 240px;
    height: auto
}

.banner .triple-3 {
    width: 222px;
    padding-left: 46px;
    padding-top: 20px;
    height: auto
}

.banner .triple .info {
    width: 234px;
    height: 216px;
    top: 95px;
    left: 50%;
    margin: 0 0 0 -117px;
    box-shadow: none
}

.triple .info {
    display: table
}

.triple .info h2 {
    display: table-cell;
    vertical-align: middle;
    font-size:34px;
}

.triple.notable .info h2 {
    display: block
}

.triple.notable .info{
    height:auto;
}

.banner.two.smaller .info {
    width: 480px
}

.banner.smaller .triple .info {
    width: 274px;
    margin: 0 0 0 -137px;
    padding: 25px
}

.banner.smaller .triple .info h2 {
    font-size: 28px;
    line-height: 30px
}

.banner.smaller .info h2 {
    text-align: left
}

.banner.two.smaller.flip .triple{
    left:auto;
    right:9.25%;
    margin-top: -179px;
}

.banner.two.smaller.flip .info.right {
    right: auto;
    left: 9.25%;
    padding: 30px;
    text-align: left;
    height: 260px;
    margin-top: -130px;
}

.banner.two.smaller.flip .triple .info h2 {
    font-size: 26px;
    padding:0;
}

.staggered-box {
    width: 594px;
    position: relative;
    display: inline-block;
    text-align: right;
    padding: 70px 0;
    overflow: hidden;
    margin-right: 20px;
    margin-left: 10px;
}

.staggered-box .info {
    width: 380px;
    height: 340px;
    top: 50%;
    left:10px;
    text-align: left;
    margin-top: -172px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.smaller-staggered .staggered-box .info {
    width: 330px;
    height: 300px;
    margin-top: -150px;
}

.staggered-box > img{
    margin-right: -40px;
}

.grey h2,
.grey h4,
.grey h3 strong,
.grey strong {
    color: rgb(128, 128, 128)
}

.teal h2,
.teal h4,
.teal h3 strong,
.teal strong {
    color: rgb(180,204,4)
}

.teal .button {
    background: rgb(180,204,4)
}

.purple h2,
.purple h4,
.purple h3 strong,
.purple strong {
    color: rgb(46, 23, 94)
}

.lightgreen h2,
.lightgreen h4,
.lightgreen h3 strong,
.lightgreen strong {
    color: rgb(128, 189, 38)
}

.teal .button:hover {
    background: rgb(142, 211, 220)
}

.green h2,
.green h4,
.green h3 strong,
.green strong {
    color: rgb(86, 153, 38)
}

.green .button {
    background: rgb(86, 153, 38)
}

.green .button:hover {
    background: rgb(171, 204, 147)
}

.britishSugarGreen h2,
.britishSugarGreen h4,
.britishSugarGreen h3 strong,
.britishSugarGreen strong {
  color: rgb(101, 179, 46);
}


.pink h2,
.pink h4,
.pink h3 strong,
.pink strong {
    color: rgb(181, 0, 119)
}

.pink .button {
    background: rgb(181, 0, 119)
}

.pink .button:hover {
    background: rgb(218, 128, 187)
}

.lightblue h2,
.lightblue h4,
.lightblue h3 strong,
.lightblue strong {
    color: rgb(0, 123, 189)
}

.lightblue .button {
    background: rgb(0, 123, 189)
}

.lightblue .button:hover {
    background: rgb(128, 189, 222)
}

.paleblue h2,
.paleblue h4,
.paleblue h3 strong,
.paleblue strong {
    color: rgb(16, 177, 237)
}

.blue h2,
.blue h4,
.blue h3 strong,
.blue strong {
  color: rgb(22,166,185);
}

.blue .button {
  background: rgb(22,166,185);
}

.blue .button:hover {
  background: rgb(128, 189, 222);
}

.blue strong {
    /* color: rgb(101,179,46) */
}

.black h2,
.black h4,
.black h3 strong,
.black strong {
    color: #111
}

h2.teal {
    color: rgb(180,204,4)
}

.granulatedGreen h2,
.granulatedGreen h4,
.granulatedGreen h3 strong,
.granulatedGreen strong {
  color: rgb(95,173,37);
}

.granulatedGreen .button {
  background-color: rgb(95,173,37);
}

.granulatedGreen .button:hover {
  background-color: rgb(182, 220, 157);
}

.casterOrange h2,
.casterOrange h4,
.casterOrange h3 strong,
.casterOrange strong {
  color: rgb(236,114,6);
}

.casterOrange .button {
  background-color: rgb(236,114,6);
}

.casterOrange .button:hover {
  background-color: #ffa666;
}

.caneGreen h2,
.caneGreen h4,
.caneGreen h3 strong,
.caneGreen strong {
  color: rgb(41,76,44);
}

.caneGreen .button {
  background-color: rgb(41,76,44);
}

.caneGreen .button:hover {
  background-color: #618e6e;
}

.brownSugar h2,
.brownSugar h4,
.brownSugar h3 strong,
.brownSugar strong {
  color: rgb(116,43,31);
}

.brownSugar .button {
  background-color: rgb(116,43,31);
}

.brownSugar .button:hover {
  background-color: rgb(158, 104, 81);
}

.icingPurple h2,
.icingPurple h4,
.icingPurple h3 strong,
.icingPurple strong {
  color: rgb(128,55,119);
}

.icingPurple .button {
  background-color: rgb(128,55,119);
}

.icingPurple .button:hover {
  background-color: rgb(171, 107, 163);
}

.liquidYellow h2,
.liquidYellow h4,
.liquidYellow h3 strong,
.liquidYellow strong {
  color: rgb(225,157,0);
}

.liquidYellow .button {
  background-color: rgb(225,157,0);
}

.liquidYellow .button:hover {
  background-color: #ffc049;
}

.pharmaGreen h2,
.pharmaGreen h4,
.pharmaGreen h3 strong,
.pharmaGreen strong {
  color: rgb(0,133,113);
}

.pharmaGreen .button {
  background-color: rgb(0,133,113);
}

.pharmaGreen .button:hover {
  background-color: #28b39a;
}

#related-links {
    background: rgb(231, 231, 231);
    padding: 50px 10px 20px 10px;
    font-size: 0
}

#related-links .related {
    width: 388px;
    height: 306px;
    height: auto;
    font-size: 16px;
    vertical-align: top;
    line-height: 21px;
    padding: 12px;
    text-align: left;
    display: inline-block;
    margin: 25px 0 30px 0;
    box-sizing: border-box
}

#related-links .related.four {
    width: 306px;
    height: 226px
}

#related-links .related.four h4 {
    font-size: 20px;
    line-height: 22px
}

#related-links .related img {
    width: 100%;
    height: auto;
    outline: 1px solid #ddd;
}

#related-links .related p {
    padding:4px 0 0 0;
}

#related-links .related:hover {
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

#footer {
    background: rgb(70, 71, 73);
    color: #fff;
    padding: 25px 50px;
    position: relative
}

#footer .address {
    float: right;
    text-align: right
}

#footer .peripherals {
    position: absolute;
    bottom: 35px;
    width: 500px;
    left: 50%;
    margin-left: -250px
}

#footer .peripherals a {
    padding: 3px 18px;
    display: inline-block
}

#footer #logo-w {
    position: absolute;
    bottom: 35px;
    left: 50px;
    width: 192px
}

#title {
    position: relative;
    margin-bottom: 50px
}

#title img {
    display: block;
    width: 100%
}

#title div {
    background: rgb(101,179,46);
    color: #fff;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px;
    position: absolute;
    height: 136px;
    width: 592px;
    z-index: 3;
    bottom: -68px;
    left: 50%;
    margin-left: -296px;
    padding: 25px 10px;
    box-sizing: border-box
}

#title h1 {
    font-family: 'eirik', sans-serif;
    font-size: 38px;
    line-height: 40px;
    font-weight: 300;
    display: inline-block;
    padding-bottom: 10px
}

#title hr {
    display: block;
    padding: 0;
    margin: 0 auto 15px auto;
    height: 0;
    width: 200px;
    border: none;
    border-bottom: 1px solid #fff
}

#title div.teal {
    background: rgb(180,204,4)
}

#title div.green {
    background: rgb(86, 153, 38)
}

#title div.lightgreen {
    background: rgb(128, 189, 38)
}

#title div.pink {
    background: rgb(181, 0, 119)
}

#title div.lightblue {
    background: rgb(0, 123, 189)
}

.text-block {
    width: 420px;
    display: inline-block;
    text-align: left;
    vertical-align: top;
    padding: 30px 15px
}

.text-block-wide {
    width: 735px;
    text-align: left;
    display: inline-block;
    vertical-align: top;
    padding: 0 15px 5px 15px;
    margin-top: -5px;
    max-width: 90%;
    box-sizing: border-box
}

.text-block-wide p {
    padding: 0 0 10px 0
}

.text-block-wide h2 {
    text-align: center
}

.text-block.counter {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    color: rgb(101,179,46)
}
.text-block.counter .count{
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 10px;
}

.counter p,
.counter p small,
.diagram p small {
    font-size: 18px;
    line-height: 25px;
}
.counter > p {
    color: #111
}

.counter span p {
    font-size: inherit;
    padding: 0
}

.counter .ball {
    font-family: 'eirik';
    border: 3px solid rgb(0,53,173);
    width: 163px;
    height: 163px;
    box-sizing: border-box;
    border-radius: 83px;
    -webkit-border-radius: 83px;
    -moz-border-radius: 83px;
    -o-border-radius: 83px;
    -ms-border-radius: 83px;
    -khtml-border-radius: 83px;
    text-align: center;
    padding: 52px 0;
    font-size: 0;
    line-height: 0;
    margin: 0 auto
}

.counter .ball span {
    font-size: 30px;
    display: inline-block;
    line-height: 26px;
    vertical-align: middle;
    text-align: left;
}

.counter .ball em {
    font-size: 49px;
    display: inline-block;
    vertical-align: middle;
    padding: 0 3px;
    line-height: 45px
}

.counter .ball em.single {
    line-height: 72px
}

.card {
    width: 508px;
    display: inline-block;
    margin: 50px 50px 110px 50px;
    position: relative;
    max-width: 90%
}

.card img {
    display: block;
    width: 100%;
    height: auto
}

.card .label {
    background: #fff;
    display: block;
    position: absolute;
    bottom: -57px;
    height: 122px;
    padding: 18px;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    left: 50%;
    width: 280px;
    margin-left: -140px;
    z-index: 2
}

.sugar-range .card{
    width:386px;
    height:478px;
    font-size: 13px;
    margin: 30px 18px 10px 18px;
}

.sugar-range .card .label{
    width:340px;
    height:310px;
    bottom:auto;
    top:170px;
    margin-left:-170px;
    padding:15px 25px;
}

.sugar-range .card .label div{
    font-size: 0;
    position: absolute;
    top:-245px;
    color:#fff;
}

.sugar-range .card .label h2{
    padding-bottom: 40px;
    font-size: 26px;
}

.sugar-range .card .label p{
    text-align: left;
}

.sugar-range .card .label span.button{
    position: absolute;
    text-align: center;
    padding:7px;
    box-sizing: border-box;
    bottom:20px;
    width:260px;
    left:50%;
    margin-left:-130px;
    font-size: 12px;
}

.sugar-range .staggered-box{
    margin-left: 100px;
}

.sugar-range .staggered-box .info{
    padding:40px 45px;
}

.sugar-range .staggered-box .info h2, .smaller-staggered .staggered-box .info h2{
    text-align: left;
}

.curr-vac{
    background: #fff;
    vertical-align: top;
    display: inline-block;
    height: 135px;
    padding: 23px 18px 15px 18px;
    box-sizing: border-box;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    width: 223px;
    margin: 10px 0 10px 40px;
}

.curr-vac.centered{
    margin: 0 0 40px 0;
}

.card .label p {
    padding: 0
}

.card em {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto
}

.card.green em {
    background-position: -135px 1px
}

.card.teal em {
    background-position: -135px 1px
}

.card.pink em {
    background-position: -135px 1px
}

.curr-vac em {
    display: block;
    width: 20px;
    height: 20px;
    margin: 10px auto 0 auto;
    background-position: -198px 1px
}

.card.lightblue em {
    background-position: -135px 1px
}

.card.lightgreen em {
    background-position: -135px 1px;
}

.card.lightblue .step.on em {
    background-position: -135px -25px
}

.card.lightblue .step.on .label h2{
    color:rgb(86,153,38)
}

.banner.three .behind {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1
}

.banner.three .card {
    width: 386px;
    margin: 0 15px 110px 15px
}

.banner.three .info {
    position: static;
    top: auto;
    right: auto;
    background: none;
    width: 100%;
    padding: 40px 20px;
    width: 650px;
    max-width: 100%;
    margin: 0 auto;
    height: auto
}

.banner.three .info p {
    text-align: left
}

.banner.three .card .label {
    width: 300px;
    height: 132px;
    bottom: -64px;
    margin-left: -150px;
    padding: 15px 10px
}

.banner.three .card .label h3 {
    font-weight: 400;
    font-family: 'eirik';
    font-size: 25px;
    color: rgb(128, 128, 128);
    padding-bottom: 8px;
    line-height: 28px
}

.banner.two .card {
    width: 291px;
    margin: 0 22px 70px 22px;
    margin: 0 11px 70px 11px;
}

.banner.two .card .label {
    width: 250px;
    height: 106px;
    bottom: -55px;
    margin-left: -125px;
    padding: 11px 10px
}

.banner.two .card .label h3 {
    font-size: 21px;
    padding-bottom: 8px;
    line-height: 20px
}

.banner.two .card.wide {
    width: 604px
}

.banner.two .button {
    font-size: 12px;
    line-height: 15px
}

#post-container {
    padding: 55px;
    box-sizing: border-box;
    max-width: 1366px;
    margin: 0 auto;
}

#post {
    padding: 0 60px;
    width: 820px;
    box-sizing: border-box;
    float: left;
    border-right: 1px solid rgb(101,179,46)
}

#post img {
    max-width: 100%;
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: 12px;
    outline: 1px solid #ddd
}

#post h2:first-child {
    width: 550px;
    float: left;
    max-width: 100%;
}

.share {
    color: rgb(0, 123, 189);
    width: 130px;
    text-align: right;
    float: right;
    padding-top: 3px
}

.share em {
    width: 26px;
    height: 26px;
    display: inline-block;
    margin: 0 0 0 10px;
    vertical-align: middle
}

#post-container h2 {
    font-family: 'trebuchet', sans-serif;
    font-size: 25px;
    line-height: 32px
}

#post-container h2.cs {
    padding: 10px 0 0 0
}

#post-container h3 {
    color: rgb(128, 189, 38);
    font-size: 15px;
    line-height: 22px;
    font-weight: 500;
    padding: 0
}

#post-container h4 {
    font-family: 'eirik';
    font-size: 25px;
    line-height: 32px;
    width: 550px;
    float: left;
    padding: 0;
    color: rgb(128, 128, 128)
}

#post-container h4.green strong {
    color: rgb(86, 153, 38)
}

#post-container h4.lightblue strong {
    color: rgb(0, 123, 189)
}

#post-container h4.teal strong {
    color: rgb(180,204,4)
}

#post-container .sidebar {
    width: 370px;
    float: right;
    padding: 0 60px 0 10px;
    box-sizing: border-box
}

#post-container .sidebar p {
    padding: 5px 0
}

#post-container .sidebar .post-short {
    padding: 13px 0 6px 0;
    border-bottom: 1px solid rgb(190, 190, 190)
}

#post-container .sidebar .post-short ul {
    margin: 0;
    padding: 0
}

#post-container .sidebar .post-short ul li {
    margin: 0;
    padding: 0;
    list-style: none
}

#post-container .sidebar .post-short .black h3 {
    font-size: inherit;
    color: inherit;
    font-weight: inherit;
    line-height: inherit;
    padding: 5px 0
}

#post-container .sidebar .post-short h4 {
    font-family: inherit;
    font-size: 12px;
    line-height: 20px;
    padding-bottom: 3px;
    color: inherit;
    width:auto;
    float:none;
    font-weight: 500;
}

#post-container .case-side h3 {
    color: rgb(128, 128, 128);
    font-size: 23px;
    padding-bottom: 8px;
    line-height: 21px
}

#archiveTab {
    width: 283px;
    text-align: center;
    background: #fff;
    height: 30px;
    font-size: 15px;
    line-height: 20px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    margin-top: 30px
}

#archiveTab em {
    width: 85px;
    float: left;
    height: 30px;
    padding: 5px 0;
    box-sizing: border-box;
    color: #fff;
    display: block;
    background: rgb(101,179,46)
}

#archiveTab a {
    width: 66px;
    font-weight: 500;
    float: left;
    display: block;
    height: 20px;
    margin: 5px 0;
    box-sizing: border-box;
    border-right: 1px solid rgb(101,179,46)
}

#archiveTab a.last {
    border: none
}

#archiveTab a.on {
    color: rgb(101,179,46);
    text-decoration: underline
}

blockquote{
    margin: -11px 0 0 0;
    padding: 10px;
    background: #eee;
    color: #777;
    font-style: italic;
    outline: 1px solid #ddd;
    font-size: 12px;
}

.blockquote p{
    padding:0;
}

.latest-news-all {
    position: relative
}

.latest-news-all #archiveTab {
    position: absolute;
    top: -15px;
    z-index: 2;
    right: 0;
    margin: 0
}

.relative{
    position: relative;
}
.absolute{
    position: absolute;
}

.half {
    width: 50%;
    float: left
}

.quatre {
    width: 25%;
    float: left
}

.case-studies .quatre,
.case-studies .half {
    display: inline-block;
    float: none;
    width: 674px;
    max-width: 100%
}

.case-studies .quatre {
    width: 337px
}

.latest-news {
    width: 522px;
    min-height: 510px;
    text-align: left;
    display: inline-block;
    background: #fff;
    margin: 30px 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.latest-news-a{
    display: none;
}

.latest-news-b{
    display: block;
}

.latest-news img {
    border-bottom: 1px solid #ddd;
    max-width: 100%;
}

.latest-news .content {
    padding: 20px 35px
}

.latest-news .content h2 {
    font-size: 30px;
    line-height: 29px;
    padding: 5px 0 0 0
}

.latest-news .content p {
    padding: 5px 0
}

.latest-news-all .content p {
    padding: 0 0 10px 0
}

.latest-news .content strong + h2 + p,
.latest-news-all .content strong + h2 + p {
    padding: 9px 0 5px 0
}

.half .latest-news .content ul{
    margin-top:4px;
    margin-bottom:4px;
}

.half .latest-news .content ul li{
    display: none;
}

.half .latest-news .content ul li:first-child{
    display: list-item;
}

.news .content .button,
.blogs .content .button {
    float: left;
    margin-top: 6px
}

.news .content .share,
.blogs .content .share {
    float: left;
    padding-top: 10px
}

.news1 {
    display: none;
    clear: both
}

#post-container .sidebar strong,
.latest-news strong,
.latest-news-all strong {
    font-weight: 400
}

.moreNews {
    margin: 15px 0;
    padding: 15px 50px;
    box-sizing: border-box
}

.news .moreNews {
    border-right: 1px solid rgb(22, 65, 148)
}

.news .button {
    background: rgb(128, 189, 38)
}

.news .button:hover {
    background: rgb(171, 204, 147)
}

.news .share {
    color: rgb(128, 189, 38)
}

.blogs .button {
    background: rgb(241, 222, 0)
}

.blogs .button:hover {
    background: rgb(128, 189, 222)
}

.blogs .share {
    color: rgb(0, 123, 189)
}

.post-more {
    width: 100%;
    height: 157px;
    margin: 20px 0 25px 0;
    position: relative
}

.post-more img {
    height: 157px;
    width: 220px;
    display: block;
    outline: 1px solid #ddd
}

.post-more .content {
    text-align: left;
    width: 66.61%;
    height: 143px;
    top: 7px;
    padding: 18px 30px;
    box-sizing: border-box;
    right: 0;
    z-index: 2;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.post-more .content ul {
    margin: 0;
    padding: 0;
    display: inline;
}

.post-more .content ul li {
    padding: 0 0 5px 0;
    list-style: none;
    display: inline;
}

.post-more .content h3 {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    padding: 8px 0 2px 0
}

.post-more .content .black h3,
.post-more .content p {
    display: inline
}

.news .post-more .content h3,
.news .post-more .content .share {
    color: rgb(0, 123, 189)
}

.blogs .post-more .content h3,
.blogs .post-more .content .share {
    color: rgb(180,204,4)
}

#pressOffice {
    background: rgb(240, 245, 205);
    width: 790px;
    margin: 70px auto 40px auto;
    padding: 60px 40px;
    box-sizing: border-box;
    position: relative;
    font-size: 16px;
    line-height: 22px
}

#pressOffice .half {
    padding: 0 40px;
    box-sizing: border-box
}

#pressOffice h3 {
    background: rgb(128, 189, 38);
    height: 64px;
    text-align: center;
    font-size: 35px;
    font-family: 'eirik';
    line-height: 64px;
    color: #fff;
    width: 310px;
    position: absolute;
    top: -32px;
    left: 50%;
    margin-left: -155px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px
}

#pressOffice h4 {
    font-family: 'eirik';
    font-size: 35px;
    line-height: 32px
}

#pageNumbers {
    vertical-align: middle;
    padding: 10px 15px 40px 15px;
    font-size: 0;
    line-height: 23px
}

#pageNumbers a {
    margin: 0 15px;
    vertical-align: middle;
    font-size: 17px;
    display: inline-block
}

#pageNumbers a.page-dots {
    width: 10px;
    height: 10px;
    margin: 0 4px;
    background: rgb(166, 166, 166);
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -khtml-border-radius: 4px
}

#pageNumbers a.page-dots.active {
    background: rgb(101,179,46)
}

.news .latest-news-all .post-more.odd .content h3,
.news .latest-news-all .post-more.odd .content .share {
    color: rgb(0,123,189);
}

.news .latest-news-all .post-more.odd .button {
    background: rgb(0,123,189);
}

.news .latest-news-all .post-more.even .content h3,
.news .latest-news-all .post-more.even .content .share,
#latest-news-1 .post-more .content h3,
#latest-news-1 .post-more .content .share {
    color: rgb(128, 189, 38)
}

.news .latest-news-all .post-more.even .button,
#latest-news-1 .post-more .button {
    background: rgb(128, 189, 38)
}

.latest-news-all .post-more {
    height: auto;
    margin: 20px 0 0 0;
    padding-bottom: 25px
}

.latest-news-all .post-more .content {
    width: 54.5%;
    height: 250px;
    top: 25px;
    padding: 30px
}

.latest-news-all .post-more img {
    width: 478px;
    height: 300px
}

.latest-news-all .content h3 {
    padding: 10px 0;
    font-family: 'eirik';
    font-size: 30px;
    line-height: 29px
}

.latest-news-all .post-more .content .black h3 {
    padding: 0 0 3px 0;
    color: inherit!important;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    font-weight: inherit
}

.latest-news-all .post-more .content .black br + br {
    display: none;
}

.latest-news-all h2 {
    display: inline-block;
    vertical-align: bottom
}

.pageCount {
    font-size: 14px;
    line-height: 17px;
    display: inline-block;
    vertical-align: bottom;
    padding: 0 0 13px 20px;
    color: rgb(102, 102, 102)
}

.co-products .card,
.future .card {
    width: 256px;
    height: 216px;
    margin: 10px 15px 40px 15px
}

.co-products .card img,
.future .card img {
    width: 256px;
    height: 182px
}

.co-products h4,
.future h4 {
    font-family: 'eirik';
    font-size: 29px;
    line-height: 30px
}

.co-products .card .label,
.future .card .label {
    bottom: 0;
    width: 218px;
    padding: 10px 4px;
    height: 72px;
    margin-left: -109px
}

.co-products .card .label h2,
.future .card .label h2 {
    font-size: 22px;
    line-height: 30px
}

.future #hsim {
    overflow: visible!important;
}

.future .card {
    position: relative;
    padding-bottom: 36px;
    height: auto;
    max-width: 21%;
    margin-top:50px;
}

.future .card img {
    width: 100%;
    height: auto
}

.timeline {
    width: 286px;
    height: 36px;
    margin: 0 auto;
    position: relative
}

.timeline .prong {
    position: absolute;
    background: #333
}

.teal .timeline .prong {
    background: rgb(180,204,4)
}

.green .timeline .prong {
    background: rgb(86, 153, 38)
}

.lightgreen .timeline .prong {
    background: rgb(128, 189, 38)
}

.pink .timeline .prong {
    background: rgb(181, 0, 119)
}

.lightblue .timeline .prong {
    background: rgb(0, 123, 189)
}

.timeline .prong.h {
    height: 3px;
    top: 17px;
    width: 100%
}

.timeline .prong.l {
    height: 17px;
    width: 3px;
    bottom: 0;
    left: 0
}

.timeline .prong.r {
    height: 17px;
    width: 3px;
    bottom: 0;
    right: 0
}

.timeline .prong.m {
    height: 18px;
    width: 3px;
    top: 0;
    left: 50%;
    margin-left: -1px
}

.timeline .prong.m2 {
    height: 36px;
    width: 3px;
    top: 0;
    left: 50%;
    margin-left: -1px
}

.co-products .popup {
    background: rgb(50, 50, 50);
    background: rgba(0, 0, 0, 0.4);
    outline: 100px solid rgba(0,0,0,0.4);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 11;
    display: table;
    display: none;
    position: fixed
}

.co-products .popup-table {
    display: table-cell;
    vertical-align: middle
}

.co-products .popup-box {
    background: #fff;
    width: 90%;
    padding: 50px;
    box-sizing: border-box;
    position: relative;
    display: inline-block;
    text-align: left;
    max-width: 884px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.co-products .popup-box em.close {
    top: 15px;
    right: 15px;
    position: absolute;
    width: 21px;
    height: 21px;
    background-position: -221px 1px;
    cursor: pointer
}

.co-products .popup img {
    float: right;
    width: 236px;
    height: 214px;
    margin-left: 30px;
    margin-bottom: 20px;
    border: 4px solid rgb(101,179,46)
}

.co-products .teal .popup img {
    border-color: rgb(180,204,4)
}

.co-products .green .popup img {
    border-color: rgb(86, 153, 38)
}

.co-products .lightgreen .popup img {
    border-color: rgb(128, 189, 38)
}

.co-products .pink .popup img {
    border-color: rgb(181, 0, 119)
}

.co-products .lightblue .popup img {
    border-color: rgb(0, 123, 189)
}

.co-products .popup h2,
.co-products .popup p {
    padding: 0 0 13px 0
}

.card-block {
    width: 976px;
    height: 339px;
    display: inline-block;
    position: relative;
    padding: 55px 0;
    max-width: 100%
}

.card-block img {
    width: auto;
    height: auto
}

.card-block img.left {
    padding: 5px 25px 10px 0
}

.card-block .info {
    width: 593px;
    height: 263px;
    padding: 33px;
    position: absolute;
    left: 0;
    top: 50%;
    text-align: left;
    margin-top: -131px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4)
}

.card-block .info.right {
    left: auto;
    right: 0;
    width: 653px
}

.card-block .info h2 {
    text-align: left
}

.card-block .text-block.counter {
    padding: 0 15px 0 55px;
    width: 159px
}

.card-block .counter .ball {
    width: 145px;
    height: 145px;
    padding: 33px 0
}

.results {
    width: 840px;
    margin: 0 auto;
    max-width: 100%;
    padding: 0 20px;
    box-sizing: border-box
}

.search-result {
    border-bottom: 1px solid rgb(128, 128, 128);
    padding: 15px 0 25px 0
}

.search-result .keyword {
    color: rgb(128, 189, 38)
}

#steps, .mobilesteps{
    position: relative;
    margin: 20px 0 40px 0
}

.mobilesteps{
    display: none;
}

#steps img, .mobilesteps img{
    vertical-align: middle
}

.mobilesteps img.mobilestep {
    width: 96px;
    height: 96px;
    display: inline-block;
    position: relative;
    z-index: 3
}

#steps span {
    vertical-align: middle;
    display: inline-block;
    z-index: 2;
    position: relative;
    background: #fff;
    font-size: 0
}

#steps .dots , .mobilesteps .dots{
    height: 6px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -3px;
    background: url(../images/svg-fallback/dot.png) 1px 0 repeat-x;
    background: linear-gradient(transparent, transparent), url(../images/dot.svg) 1px 0 repeat-x;
    z-index: 1
}

#steps .step {
    opacity: 0.4;
    cursor: pointer
}

#steps .step.on {
    opacity: 1
}

.step-block {
    display: none
}

em.greaterthan {
    width: 21px;
    height: 21px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 54px;
    background-position: -266px 1px;
    z-index: 2;
    position: relative
}

#map {
    margin-top: -50px;
    position: relative
}

.infomsg {
    display: none
}

#googleMap {
    height: 420px
}

#mapPopup {
    width: 292px;
    position: absolute;
    margin-top:56px;
    z-index: 5;
    right: 50px;
    top: 25px;
    background: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
    display: none;
    padding: 20px 25px;
    padding-bottom: 101px;
    box-sizing: border-box
}

#mapPopup em.close {
    top: 14px;
    right: 14px;
    position: absolute;
    width: 29px;
    height: 29px;
    background-position: -287px 7px;
    cursor: pointer;
    z-index: 3
}

#mapPopup img {
    height: 81px;
    width: 292px;
    position: absolute;
    bottom: 0;
    left: 0
}

#mapPopup h2 {
    font-size: 27px;
    line-height: 30px;
    padding-bottom: 8px
}

#mapPopup div {
    padding: 4px 0 5px 0
}

#mapPopup p {
    padding: 0 0 1px 0
}

.banner.contact {
    overflow: hidden;
    position: relative;
    z-index: 1
}

.banner img.bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 1366px;
    height: auto;
    min-width: 100%;
    min-height: 100%
}

.banner .title {
    left: 0;
    top: 0;
    padding: 40px 10px;
    box-sizing: border-box
}

.banner.contact .card {
    width: 531.941px;
    height: 367px;
    margin: 20px 35px
}

.banner.contact .card .info {
    right: auto;
    left: 0;
    width: 292px;
    text-align: left;
    height: 292px;
    margin-top: -146px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    padding: 23px 25px
}

.banner.contact .card .info p {
    padding-top: 5px
}

.banner.contact .card .info .button {
    margin: 15px 0 0 0
}

.banner.contact .card img {
    width: 387px;
    height: 367px;
    float: right
}

h2.title img {
    display: inline-block;
    vertical-align: bottom;
    width: auto
}

.two-third {
    display: inline-block;
    width: 61%;
    padding: 0 50px 30px 50px;
    box-sizing: border-box;
    vertical-align: top;
    margin: 20px 0 40px 0
}

.third {
    display: inline-block;
    width: 32%;
    padding: 0 50px 30px 50px;
    box-sizing: border-box;
    vertical-align: top;
    border-left: 1px solid rgb(200, 200, 200);
    margin: 20px 0 40px 0
}

.two-third p,
.third p {
    padding-top: 10px
}

.plain-tem h2 {
    color: rgb(86, 153, 38)
}

#vf-filters {
    padding: 20px 30px 0 30px;
    box-sizing: border-box;
    font-size: 0;
    margin: 0 auto 20px auto;
    width: 1100px;
    max-width: 100%;
    text-align: left;
    color: rgb(0, 123, 189);
    font-weight: 500
}

#vf-filters label {
    display: inline-block;
    padding: 0 10px 20px 10px;
    width: 33.333%;
    box-sizing: border-box
}

#vf-filters label span {
    display: inline-block;
    font-size: 12px;
    text-align: right;
    margin-right: 20px;
    vertical-align: middle;
    width: 65px
}

#vf-filters select {
    display: inline-block;
    background: #fff;
    width: 230px;
    font-size: 12px;
    max-width: 67%;
    vertical-align: middle
}

#vacancies .advert {
    text-align: left;
    box-sizing: border-box;
    padding: 45px 75px;
    position: relative;
    width: 840px;
    display: block;
    max-width: 90%;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
    background: #fff;
    margin: 0 auto 30px auto;
}

#vacancies .advert .attribute {
    width: 33.33%;
    float: left;
    padding-top: 5px;
    min-width: 220px
}

#vacancies .advert strong {
    color: #111
}

#vacancies .advert p strong {
    font-weight: 400
}

#vacancies .advert .button {
    background: rgb(128, 189, 38)
}

#vacancies .advert .button:hover {
    background: rgb(171, 204, 147)
}

#careers .card-block{
    width: 863px;
    height: 359px;
}

#careers .card-block .info {
    height: auto;
    margin-top: -155px;
}

#career-reasons{
    width:1190px;
    max-width: 100%;
    margin:0 auto;
    padding: 25px 0;
}

#careers .card{
    width: 49.4%;
    position: relative;
    float: right!important;
    margin: 0;
    padding: 25px;
    box-sizing: border-box;
}

#careers .card p{
    padding:10px 0 0 0
}

#careers .card.odd{
    float:left!important;
}

#careers .card img{
    width:350px;
    height:255px;
    float:right;
}

#careers .card .number{
    font-size: 100px;
    line-height: 100px;
    padding:40px 20px 0 20px;
    color:rgb(128,154,214);
    font-weight: 500;
    position: absolute;
    right:375px;

}

#careers .card .label{
    clear: both;
    width:92.7%;
    padding:20px 35px 30px 35px;
    height: auto;
    text-align: left;
    position: relative;
    left: 0;
    top:0;
    z-index: 2;
    margin:-80px 0 0 0;
    float:left;
}

#careers .card.right img{
    float:left;
}

#careers .card.right .label{
    float:right;
}

#careers .card.right .number{
    right:auto;
    left:375px;
}

.intro-wide{
    width:55%;
    max-width: 1000px;
    display: inline-block;
    vertical-align: top;
    padding:0 40px 0 20px;
    border-right:1px solid rgb(128,128,128);
}

.vacancies.banner.two > .info {
    height: 480px;
    margin-top: -240px;
}

.our-future .triple .info{
    top:58px;
}

.growing.banner.two > .info {
    height: 250px;
    margin-top: -125px;
}

.beetReview.growing.banner.two > .info {
  height: auto;
  margin-top: -210px;
}

.beetReview .triple.static .triple-3 {
  padding-left: 0px;
  margin-left: -20px;
}

.beetReview .triple .info a {
  color: #0035ad;
}

.beetReview .info a {
  color: #0034ad;
}

.social .card-block .info {
    height: 370px;
    margin-top: -185px;
}

.social .card-block .text-block.counter {
    padding: 45px 0px 96px 25px;
}

.social .card-block .info.right{
    width:733px;
}

.social .card-block img.left{
    height:323px;
    margin-top:3px;
}

.banner.two .environmental.info{
    padding: 45px;
    height: 330px;
    margin-top: -165px;
}

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

.carousel{
    position: relative;
    overflow: hidden;
    width:1020px;
    padding:0 20px;
    box-sizing: border-box;
}

.carousel-inner{
    width:400%;
    position: relative;
    left:0;
}

.carousel .post-more{
    float:left;
    width:23%;
    margin:35px 1% 0 1%!important;
    padding-bottom: 40px;
}

.carousel .left.sprite{
    position: absolute;
    top: 50%;
    left: 0;
    width: 40px;
    height: 82px;
    margin-top: -41px;
    cursor: pointer;
    background-position: -706px 1px;
    z-index: 3;
}

.carousel .right.sprite{
    position: absolute;
    top:50%;
    right:0;
    width: 40px;
    height: 82px;
    margin-top: -41px;
    background-position: -754px 1px;
    z-index: 3;
    cursor: pointer;
    z-index: 3;
}

.carousel .left.sprite:hover, .carousel .right.sprite:hover{
    opacity: 0.7;
}

#cookieBar .button.right {
    margin: 0 0 0 10px;
}

.toTop{
    font-size: 16px;
}

.sugar-functionality .headers > h2{
    width: 210px;
    min-height: 90px;
    font-size: 25px;
    text-align: center;
    vertical-align: baseline;
    display: inline-block;
    padding: 20px 2px 0px 2px;
    line-height: 26px;
    cursor: pointer;
}

.sugar-functionality .headers > h2 em {
    display: block;
    width: 20px;
    height: 20px;
    margin: 10px auto 0 auto;
    background-position: -198px 1px;
}

.sugar-functionality .headers > h2.open em {
    background-position: -135px 1px;
}

.sugar-functionality .headers h2.open{
    color:rgb(97, 166, 59);
}

.sugar-functionality .banners .banner{
    display: none;
}

.sugar-functionality .banners #step1.banner{
    display: block;
}

.sugar-functionality .banners .banner .info h2{
    font-size: 30px;
}

.sugar-functionality .banners .banner .info{
    width: 518px;
    height:auto;
    min-height: 400px;
    max-height: 594px;
    margin-top: 47px;
    top:0;
    right:auto;
    left:51%;
    padding-top:13px;
}

.sugar-functionality .banners .banner .info.left{
    left:auto;
    right:51%;
    padding-top:28px;
}

.sugar-functionality .banners .banner .info strong{
    color:#111!important;
}

.sugar-functionality .banners .banner .info a strong, .sugar-functionality .banners .banner .info strong a{
    color:rgb(86,153,38)!important;
}

.sugar-functionality .banners .banner .info a strong:hover, .sugar-functionality .banners .banner .info strong a:hover{
    opacity: 0.6
}

.sugar-functionality .staggered-box, .sugar-properties .staggered-box{
    padding: 35px 0;
}

.sugar-functionality .staggered-box .info, .sugar-properties .staggered-box .info{

}

.sugar-properties .quatre {
    width: 286px;
    float:none;
    display: inline-block;
}

.sugar-properties.co-products .card .label{
    height: 100px;
}

.sugar-properties.co-products .card {
    height: 244px;
    margin: 10px 15px 20px 15px;
}

.sugar-properties.co-products .card .label > h2 em {
    left:50%;
    bottom:15px;
    margin-left:-10px;
    position: absolute;
}

.sugar-properties.co-products .card .label > h2 {
    font-size: 26px;
    line-height: 27px;
}

.sugar-properties.co-products .popup-box {
    max-width: 754px;
}

.desktop-functionality{
    display: block;
}

.mobile-functionality{
    display: none;
}

.sugar-functionality .headers .sugar-functionality-mobile .label{
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    background: #fff;
    padding: 6px 38px 6px 175px;
    box-sizing: border-box;
    position: relative;
    width:600px;
    height:82px;
    display: table;
    min-width: 300px;
    margin:30px auto 50px auto;
}
.sugar-functionality .headers .sugar-functionality-mobile .label > h2{
    font-size: 35px;
    line-height: 35px;
    display: table-cell;
    padding:0;
    width:auto;
    cursor: pointer;
    vertical-align: middle;
}

.sugar-functionality .headers .sugar-functionality-mobile .label > img{
    position: absolute;
    top:50%;
    margin-top:-54px;
    left:-5px;
}

.sugar-functionality .headers .sugar-functionality-mobile h2 em{
    width: 27px;
    background-position: -800px 0px;
    height: 17px;
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -9px;
}

.functionality-description{
    display: none;
    text-align: left;
    width: 80%;
    margin: 0 auto 35px auto;
    min-width: 290px;
}

.faqs{
    height:390px;
    width:955px;
    margin:0px auto;
    padding:80px 0;
    position: relative;
}

.faqs .questions{
    padding:40px;
    box-sizing: border-box;
    width:460px;
    background: #fff;
    height:350px;
    position: absolute;
    top:50%;
    text-align: left;
    font-size: 13px;
    left:0;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    margin-top:-175px;
    z-index: 2;
}

.faqs .questions.lessheight{
    height: 280px;
    margin-top: -140px;
}

.faqs .questions a em{
    width: 20px;
    height: 20px;
    top:0;
    left:1px;
    position: absolute;
    background-position: -198px 1px;
}

.faqs .questions a.on{
    color:rgb(180, 204, 4);
}

.faqs .questions a.on em{
    background-position: -135px 1px
}

.faqs .questions > p > a{
    cursor: pointer;
    display: block;
    position: relative;
    padding-left:26px;
}

.faqs .questions > p > a span.button{
    margin-left: -26px;
}

.faqs .questions a:hover{
    color:rgb(0,123,189)
}

.faqs .questions p {
    padding-top: 10px;
}

.faqs .answers{
    height:390px;
    width:680px;
    text-align: left;
    background: #fff;
    box-sizing: border-box;
    padding: 70px 80px 30px 260px;
    position: absolute;
    right:0;
    top:50%;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    margin-top:-196px;
}

.faqs ol{
    padding-left:10px;
    list-style-type:decimal;
}

.faqs ol li, .faqs ul li{
    padding-top:5px;
    padding-bottom: 0;
}

.faqs .answers.lesspadd{
    padding: 30px 80px 30px 240px;
}

.faqs .answers div{
    display: none;
}

.faqs .answers div#answer1{
    display: block;
}

.mobile-answer{
    display: none;
}

.squashInfo .triple .info {
    height:200px;
}

.squashInfo .triple .info h2{
    padding:0
}

.card-block.long-card .info{
    width:470px;
}

.card-block.tall-card {
    height: 400px;
    margin: 30px 0;
    padding: 0;
}

.card-block.tall-card img{
    margin-top:30px;
}

.card-block.tall-card .info{
    height: 420px;
    margin-top: -10px;
    top:0;
}

.card-block.wide-card .info {
    width:520px;
}

.card-block.wide-card p{
    padding-top: 6px;
}

.card-block.high-card{
    height: 439px;
}

.card-block.short-card{
    height:339px;
}

.card-block.high-card img, .card-block.short-card img{
    padding-top:0!important;
    padding-bottom: 0!important;
}

.card-block.high-card .info{
    height:350px;
    margin-top: -175px;
}

.card-block.short-card .info{
    height:250px;
    margin-top:-125px;
}

.card-block.high-card img.left + .info, .card-block.short-card img.left + .info{
    left:auto;
    right:0;
}

.card-block ul{
    padding-left: 25px;
}

.banner.two-abs > img{
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0
}

.executive-team .quatre {
    width: 30%;
}

.executive-team .card img {
    width: 275px;
    height: 268px;
}

.executive-team.co-products .card {
    height: 335px;
}

.executive-team.co-products .card .label {
    width: 235px;
    height:110px;
}

.executive-team .card .label p {
    height: 35px;
}

.executive-team .popup img {
  width: 240px;
  height: 345px;
  border: none;
  float: left;
  margin-left: -280px;
}

.executive-team .popup-box {
    width: 35%;
    padding-left: 70px;
}

.executive-team .popup h2 {
  margin-top: 20px;
  padding-bottom: 0px;
  font-size: 50px;
}

.executive-team .popup h2 strong {
    color: #000000;
    font-family: 'trebuchet';
    font-size: 16px;
}

.executive-team .popup h2:nth-of-type(2) {
    margin-top: 0px;
    margin-bottom: 30px;
}

.executive-team .popup {
    background: rgba(0,0,0,0.8);
}

.executive-team .popup-table {
    position: relative;
    left: 100px;
}

.executive-team img.arrow {
    height: 100px;
    width: auto;
    position: absolute;
    top: 40%;
}

.executive-team img.arrow.greaterThen {
    right: -50px;
}

.executive-team img.arrow.lessThen {
    left: 20px;
}

.stat-container{
    width:700px;
    display: inline-block;
}

.stat-container .counter .ball{
    padding: 40px 0;
}

.stat-container .text-block.counter {
    width: 170px;
    padding: 30px 10px;
}

.banner.inline{
    position: relative;
    overflow: visible;
    width: auto;
    z-index: 2;
}

.banner.inline .triple {
    position: relative;
    left: 0;
    top: 0;
    margin: 0;
}

.inline-top{
    display: inline-block;
    vertical-align: top;
}

.timeline{
    display: inline-block;
    width:700px;
    max-width: 90%;
    padding: 0 0 80px 0;
}

.timeline .timeline-section{
    width:33.333%;
    float:left;
    text-align: center;
    position: relative;
    z-index: 2;
    cursor: pointer;
}

.timeline .timeline-section.left{
    text-align: left;
}

.timeline .timeline-section.right{
    text-align: right;
}

.timeline .timeline-section em{
    display: block;
    margin:2px auto 0 auto;
    width:23px;
    height:22px;
    box-sizing: border-box;
    border-radius: 30px;
    border:4px solid rgb(247, 247, 247);
    background-color: rgb(101,179,46);
    background-position: 0 22px;
}

.timeline .timeline-section h4{
    color:rgb(101,179,46);
}

.factory-page .card.on{

}

.timeline .timeline-section.on{
    cursor: default;
}

.timeline .timeline-section.on h4{
    color:rgb(0,53,173);
}

.timeline .timeline-section.on em{
    background-color: rgb(247, 247, 247);
    background-position: -314px 3px;
    border:4px solid rgb(0,53,173);
}

.timeline .timeline-section.left em{
    margin:2px 0 0 50px;
    float:left;
}
.timeline .timeline-section.right em{
    margin:2px 50px 0 0;
    float:right;
}

.timeline .timeline-line{
    clear: both;
    width: 83%;
    position: absolute;
    top: 52px;
    left: 8.5%;
    border-top: 2px solid rgb(101,179,46);
}

.factory-slides-wrapper{
    position: relative;
    width:950px;
    margin:0 auto 20px auto;
    z-index: 2;
}

.factory-slides{
    width:100%;
    overflow: hidden;
}

.factory-slides-container{
    width:300%;
}

.factory-slides .factory-slide{
    width: 33.333%;
    float:left;
}

.factory-slides-wrapper em.sprite.arrow-l{
    position: absolute;
    left: -50px;
    width: 35px;
    height: 81px;
    margin-top: -20px;
    top: 50%;
    cursor: pointer;
    background-position: -707px 0;
}

.factory-slides-wrapper em.sprite.arrow-r{
    position: absolute;
    right: -50px;
    width: 35px;
    height: 81px;
    margin-top: -20px;
    top: 50%;
    cursor: pointer;
    background-position: -757px 0;
}

.factory-slides-wrapper em.sprite.arrow-r:hover,
.factory-slides-wrapper em.sprite.arrow-r:hover{
    opacity: 0.6;
}

.factory-slide .card-block{
    width:100%;
    height:auto;
    max-width: 880px;
}

.factory-slide .card-block .info{
    padding:30px;
    width: 610px;
    font-size: 12px;
    line-height: 16px;
}

.factory-slide .card-block .info h2{
    padding:0;
}

.factory-slide .text-and-triple .text-block{
    width:300px;
}

.factory-slide .text-and-triple .triple.static{
    margin:60px 0 0 20px;
}

.factory-content{
    display: none;
}

.factory-content.on{
    display: block;
}

.factory-co-product {
    background: #fff;
    width: 280px;
    float: left;
    position: relative;
    height: 76px;
    padding: 15px 20px;
    box-sizing: border-box;
    margin: 15px 0 15px 192px;
    text-align: center;
    box-shadow: 0 0 5px rgba(0,0,0,0.4);
    display: none;
    cursor: pointer;
}

.factory-co-product.show{
    display: block;
}

.factory-co-product img {
    position: absolute;
    left: -100px;
    top: 50%;
    margin-top: -45px;
    z-index: -1;
    width: 119px;
    height: 90px;
}

.factory-co-product em.sprite{
    background-position: -198px 1px;
    display: block;
    width:20px;
    height:20px;
    margin:0 auto;
}

.factory-co-product h4 {
    padding: 0;
    font-size: 26px;
    line-height: 28px;
}

.factory-co-product p {
    padding: 8px 0 0 0;
    font-size: 12px;
    line-height: 16px;
}

.factory-slide .dots em{
    width:12px;
    height: 12px;
    background: rgb(176,176,176);
    border-radius: 12px;
    margin:0 5px;
    display: inline-block;
    cursor: pointer;
}

.factory-slide .dots em.on{
    background: rgb(95,95,95);
    cursor: default;
}

#arc-box.yellow {
  background:rgb(252,250,218);
}

.twitter.triple {
  margin-left: 80px;
  float:left;
  display: inline-block;
  width:60%;
  max-width: 734px;
}

#twitter-feed {
  display: inline-block;
  float: left;
  left: 40px;
  width: 25%;
  margin-right: 0px!important;
  margin-top:-150px!important;
}

img.infographic {
  float: right;
  margin-right: 40px;
  margin-bottom: 40px;
  margin-top: -415px;
  position: relative;
}

.text-infographic .text-block {
  width: 330px;
  margin-top: -330px;
  position: relative;
}

.text-infographic {
  margin-bottom: -40px;
  margin-top: 440px!important;
}

.overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
}

.overlay.open {
  display: block;
}

.overlay .tint {
  width:100%;
  height:100%;
  position: absolute;
  background-color: #000000;
  opacity: 0.2;
  top:0px;
}

.overlay .modal {
  background-color: #ffffff;
  /* margin:0 auto; */
  margin-top: 40px;
  position: relative;
  z-index: 9;
  box-shadow: 0px 0px 10px #a5a5a5;
  /* height: 400px; */
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
}


.banner .modal img {
  height:auto;
  width: auto;
  margin: 0 auto;
  max-width: 100vw;
}

.modal .close img {
  width: 20px;
  top: 10px;
  right: 10px;
  position: absolute;
  padding: 0px;
  cursor: pointer;
}

.home.content {
  max-width: 1366px;
  margin:0 auto;
}

.green .sprite {
    background-position: -135px 1px;
    display: inline-block;
    width:18px;
    height:18px;
}

.link-container p {
  width: 90%;
}

.link-container .sprite {
  float: right;
  margin-top: -40px;
}

.banner.two.center > img {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
}

.banner.two.center .triple {
  display: block;
  margin: 0 auto;
  position: relative;
  height: auto;
  margin-bottom: 40px;
  left: auto;
  top: auto;
}

.banner.two .info.smaller {
  height: 440px;
  margin-top: -220px;
}

.banner.two .info.smaller h2 {
  font-size: 26px;
}

.banner.two .info.smaller p {
  font-size: 13px;
}

.center.future {
  margin-top: -40px;
}

.sugar-functionality .banners .info.green p {
  padding: 0px;
  padding-bottom: 15px;
}

.sugar-functionality .banners .info.green h6 {
  padding: 0px;
  margin: 0px;
  font-size: 14px;
  line-height: 16px;
}

.sugar-functionality .banners .info.green h6 strong {
  color: #43b700!important;
  font-weight: 600;
}

/* SCALE UP */

/*HOME 2025*/
	
    img{
        display: block;
    }
	#header.header-transparent{
		background: none;
		background-image: linear-gradient(to bottom, rgba(0,0,0,0.75), transparent);
		box-shadow: 0px 0px 0px;
	}
	#header.header-transparent #logo{
		width: 308px;
	}
    .logo-line{
        width: 2px;
        height: 90px;
        background: linear-gradient(to bottom, #65b32e, #f1de00);
        top: 50%;
        right: 0;
        transform: translate(25px, -50%);
    }
    .header-transparent .logo-line{
        background: #fff;
    }
    .header-scroll .logo-line{
        height: 65px;
    }
	#header.header-transparent > ul{
	    background: none;
	    position: absolute;
	    right: 0;
	    top: 15px;
	}
	#header.header-transparent .sprite{
		filter: brightness(5);
	}
	#header.header-transparent #social-media{
		padding: 20px 10px 0 39px;
	}
	/*.video{
        width: 100vw;
        height: calc(100vw * 9 / 16);
        max-height: 100vh;
        overflow: hidden;
        margin: auto;
        position: relative;
	}*/
    .video .overlay-copy{
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 2;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        padding: 0 30px;
        box-sizing: border-box;
    }
    .video .overlay-copy h4{
        color: #fff;
        font-size: 54px;
        line-height: 65px;
        font-weight: 100;
    }
	/*.video iframe{
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}*/
	.video > img{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.overlay-icon{
		position: absolute;
		bottom: 30px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
        cursor: pointer;
        width: 10vw;
        max-width: 100px;
	}
    .txt-center{
        text-align: center;
    }
    #latest-media{
        padding-top: 50px;
        padding-bottom: 50px;
    }
	.overlay-icon img{
		width: 100%;
	}
    #what-we-do{
        position: relative;
        overflow: hidden;
    }
    #what-we-do .line,
    #what-we-do .circle,
    #what-we-do .dot{
        top: 39%;
    }
    #our-factories .line,
    #our-factories .circle,
    #our-factories .dot{
        top: 36%;
    }
    #our-factories .container{
        display: flex;
        align-items: center;
    }
    #what-we-do-facts .container{
        position: relative;
        padding-top: 75px;
        padding-bottom: 50px;
    }
    #what-we-do-facts .background-image-top{
        top: 0;
        right: 0;
        transform: translate(33.33%, -33.33%) scaleX(-1);
    }
    #what-we-do-facts .background-image-bottom{
        bottom: 0;
        left: 0;
        transform: translate(-33.33%, 33.33%) scaleX(-1);
    }
    #what-we-do-facts .background-image-top img{
        width: 80%!important;
    }
    #what-we-do .container{
        display: flex;
        align-items: center;
        max-height: 420px;
        justify-content: end;
    }
    #what-we-do .image-right{
        width: 50%;
    }
    #what-we-do .image-right.faded-in{
        margin-bottom: 0!important;
    }
    #what-we-do .image-right img{
        width: auto;
        height: 100%;
        transform: scale(1.02);
    }
    #what-we-do .image-left{
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translate(-33%, 33%);
    }
    #what-we-do-facts .copy,
    #what-we-do-facts .facts{
        box-sizing: border-box;
        padding: 0;
        width: calc(100% - 550px);
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }
    #what-we-do-facts .facts{
        max-width: 1366px;
    }
    /*.diagram-inner img{
        position: absolute;
        right: 10px;
        height: 85px!important;
        top: 10px;
    }*/
    .facts .diagram-inner{
        width: 15%;
        min-width: 205px;
        position: relative;
    }
    .facts .diagram-inner p{
        font-size: 18px;
        line-height: 22px;
    }
    .facts .diagram-inner p strong{
        font-size: 30px;
        line-height: 32px;
        font-weight: 600;
    }
    .facts .counter .ball{
        border: none;
        width: 100%;
        height: auto;
        padding: 0;
    }
    #what-we-do-facts .facts{
        display: flex;
        flex-wrap: wrap;
        column-gap: 70px;
        row-gap: 35px;
        justify-content: center;
        align-items: center;
    }
    .fact{
        width: calc(35% - 70px);
        display: flex;
        align-items: center;
    }
    .fact.img-left .content{
        text-align: right;
    }
    .fact.img-left .image{
        display: block;
        width: 105px;
    }
    .fact.img-left .image img{
        width: 100%;
        height: auto;
    }
    .fact .content p{
        font-size: 20px;
        line-height: 30px;
    }
    .fact .content p strong{
        font-size: 30px;
        line-height: 32px;
        color: #65b32e;
        font-weight: 600;
    }
    .fact .image{
        display: none;
    }
    #what-we-do-facts .copy{
        padding-bottom: 30px;
    }
    #what-we-do-facts .copy .line-container .line{
        width: 20vw;
        margin-left: 0;
    }
    #what-we-do-facts .copy .line-container{
        top: 0;
        left: 0;
        transform: translateY(50%) translateX(-100%);
    }
    #keith .copy h2{
        font-size: 34px;
        line-height: 41px;
    }
    .copy h2{
        font-size: 39px;
        line-height: 46px;
        color: #666666;
    }
    .copy h3{
        font-size: 26px;
        line-height: 31px;
        color: #666666;
        padding-top: 20px;
    }
    .copy h4{
        font-size: 18px;
        line-height: 22px;
        color: #666666;
    }
    .copy h2 strong{
        font-size: 45px;
        line-height: 53px;
        font-weight: 700;
        background: -webkit-linear-gradient(left, #48731f, #a9c90a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .container.paper-clip .copy h2,
    .container.paper-clip .copy h2 strong,
    .container.paper-clip .copy h4{
        color: #fff;
        background: none;
        -webkit-text-fill-color: #fff;
    }
    .container.paper-clip{
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        max-height: 420px;
    }
    .container.what-we-do.paper-clip{
        max-height: none;
    }
    .container.paper-clip .clip-image{
        display: inline-block;
        margin-left: 10%;
        margin-top: -25px;
    }
    .container.what-we-do.paper-clip .clip-image{
        margin-left: 0;
        margin-right: 15%;
        width: 20%;
    }
    #keith .container.what-we-do.paper-clip .clip-image{
        position: absolute;
        width: 250px;
        margin: 0;
        top: -30px;
        right: 30px;
    }
    .container.what-we-do.paper-clip .clip-image img{
        width: 100%;
        height: auto;
    }
    #how-sugar-is-made .container.paper-clip .clip-image{
        padding-bottom: 115px;
    }
    #how-sugar-is-made .copy .button{
        background: rgba(255,255,255,0.35);
        border: 2px solid #fff;
    }
    #sustainability .container.paper-clip .clip-image{
        padding-bottom: 40px;
        position: relative;
        z-index: 2;
    }
    .container.paper-clip .copy{
        display: inline-block;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 10%;
    }
    #sustainability .container.paper-clip .copy{
        width: 33.33%;
    }
    .container.paper-clip .copy.col-2{
        width: 65%;
        color: #fff;
        column-count: 2;
        column-gap: 35px;
        position: static;
        margin: 0 auto;
        display: block;
        padding: 60px 0;
        transform: translateY(0%);
        padding-right: 100px;
        box-sizing: border-box;
    }
    .image-right{
        display: inline-block;
        float: right;
    }
    #our-factories,
    #what-we-do{
        overflow: hidden;
        position: relative;
    }
    #our-factories .copy,
    #what-we-do .copy{
        width: 50%;
        padding-left: 30%!important;
        max-width: 100%;
        padding-right: 0px;
        padding-left: 0px;
        box-sizing: border-box;
        position: relative;
        z-index: 3;
    }
    .line-container{
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        transform: translateY(50%);
        align-items: center;
    }
    .line{
        position: relative;
        height: 3px;
        width: 30vw;
        margin-left: -60px;
        background-image: linear-gradient(to left, #65b32e, #f1de00);
        z-index: 3;
    }
    .circle{
        position: relative;
        width: 24px;
        height: 24px;
        border-radius: 48px;
        background: #fff;
        border: 2px solid #67a826;
        z-index: 4;
    }
    .dot{
        width: 12px;
        height: 12px;
        border-radius: 32px;
        background: #67a826;
        position: relative;
        transform: translateX(-165%);
        z-index: 5;
    }
    .images-tri-block{
        position: relative;
        width: calc(100% - 720px);
        min-width: 50%;
    }
    .images-tri-block.faded-in{
        margin-bottom: 0!important;
    }
    .image-one img{
        height: 500px;
        object-fit: cover;
        width: 100%;
    }
    .images-tri-block .white-circle{
        position: absolute;
        width: 680px;
        z-index: 2;
        top: 50%;
        left: 0;
        transform: translate(-80%, -50%);
    }
    .images-tri-block .image-one{
        position: relative;
        z-index: 1;
    }
    .images-tri-block .image-two{
        position: absolute;
        top: 0%;
        right: 0%;
        border: 6px solid #fff;
        border-radius: 500px;
        z-index: 2;
        width: 500px;
        height: 500px;
        transform: translate(33.33%, -50%);
        background-size: 70%;
        background-repeat: no-repeat;
        background-position-x: 0px;
        background-position-y: 185px;
    }
    .images-tri-block .image-two img{
        border-radius: 500px;
        width: 100%;
        height: auto;
    }
    .images-tri-block .image-three{
        width: 750px;
        height: 750px;
        position: absolute;
        /* transform: translate(50%, 50%); */
        bottom: 0%;
        right: 0%;
        z-index: 3;
        border: 6px solid #fff;
        border-radius: 500px;
        transform: translate(60%, 50%);
        overflow: hidden;
        background-size: 60%;
        background-position-x: -150px;
    }
    .images-tri-block .image-three img{
        border-radius: 500px;
        width: 100%;
    }
    .images-tri-block .image-one img{
        width: 100%;
    }
        #sustainability .copy .button{
        background: rgba(255,255,255,0.35);
        border: 2px solid #fff;
    }
    .media h3{
        display: none;
    }
    .media a.related-post{
        width: 364px;
        display: block;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        border-radius: 20px;
        transition: 0.3s ease-in-out;
    }
    .media a.related-post:hover{
        box-shadow: 0 0 10px rgba(180, 204, 4, 0.8);
    }
    .media a.related-post .image img{
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    .media a.related-post .image{
        padding-bottom: 10px;
    }
    .media a.related-post .title h5{
        font-size: 18px;
        line-height: 22px;
    }
    .media a.related-post .news p{
        font-size: 18px;
        line-height: 22px;
        color: #65b32e;
        padding-top: 5px;
    }
    .media a.related-post .time p{
        font-size: 18px;
        line-height: 22px;
        color: #999999;
        padding-top: 5px;
    }
    .media{
        display: flex;
        justify-content: space-between;
        padding: 50px 80px 0 80px;
        gap: 30px;
        width: 1366px;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        flex-wrap: wrap;
    }
    .media a.related-post .content{
        min-height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 0 20px 20px 20px;
    }
    #latest-media{
        position: relative;
    }
    .line-bottom{
        bottom: 0;
        width: 100%;
        height: 10px;
        background-image: linear-gradient(to right, #65b32e, #f1de00);
        position: absolute;
    }
    video{
        width: 100%;
        height: auto;
        aspect-ratio: auto 1920 / 1080;
    }
    .overlay-icon{
        width: 180px;
        height: 180px;
        border-radius: 500px;
        bottom: calc(11% - -3px);
        max-width: 180px;
    }

    #header.header-scroll ul .navLinks li ul{
        margin-top: 0!important;
    }

/*HOME 2025*/

/*IN THE*/
    .diagram.britain .img-left{
        position: absolute;
        bottom: -10px;
        left: 20px;
        transform: rotate(-6deg);
    }
    .zero-waste .txt-left{
        width: 160px;
    }
    .diagram.zero-waste .img-right{
        position: absolute;
        top: 15px;
        right: 15px;
    }
    .diagram.sugar-products .img-right{
        position: absolute;
        top: -20px;
        right: 35px;
    }
    .diagram.sites .img-left{
        position: absolute;
        left: 30px;
        bottom: 20px;
    }
    .diagram.sugar-beet .counter-block{
        font-weight: 600;
        color: #65b32e;
        font-size: 28px;
        line-height: 32px;
    }
    .tonnes-of-sugar .txt-right{
        width: 130px;
    }
    .diagram.tonnes-of-sugar .img-left{
        position: absolute;
        top: -5px;
        left: 10px;
    }
    .diagram.tonnes-of-sugar .img-left .counter-block{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
    }
    .diagram.tonnes-of-sugar .img-left .counter-block .counter-span{
        font-size: 51px;
        line-height: 26px;
        font-weight: 600;
        color: #65b32e;
    }
    .diagram .top,
    .diagram .middle,
    .diagram .bottom{
        position: relative;
    }
    .top .counter-block .counter-span{
        font-weight: 600;
        position: absolute;
        font-size: 57px;
        line-height: 0px;
        color: #65b32e;
        top: -15px;
        left: -5px;
    }
    .middle .counter-block .counter-span{
        font-weight: 600;
        position: absolute;
        font-size: 57px;
        line-height: 0px;
        color: #65b32e;
        top: 0px;
        left: 20px;
    }
    .bottom .counter-block .counter-span{
        font-weight: 600;
        position: absolute;
        font-size: 57px;
        line-height: 0px;
        color: #65b32e;
        top: 50%;
        left: 70px;
        transform: translateY(-50%);
    }
    .diagram.sites .top{
        width: 160px;
    }
    .diagram p strong{
        color: #65b32e;
    }
    .diagram .txt-right{
        text-align: right;
    }
    .diagram h2{
        font-size: 38px;
        line-height: 32px;
    }
    .diagram h3{
        font-size: 30px;
        line-height: 32px;
    }
    .diagram h4{
        font-size: 24px;
        line-height: 32px;
        padding-bottom: 0;
    }
    .diagram.img-left{
        align-items: end!important;
        justify-content: end!important;
        width: 225px;
        position: relative;
    }
    .diagram.img-right{
        align-items: start!important;
        justify-content: start!important;
        width: 225px;
        position: relative;
    }
    .diagram .img-left{
        width: 100px;
    }
    .diagram .img-right{
        width: 85px;
    }
    .diagram p{
        padding-bottom: 0;
    }
    .in-the{
        width: 1200px;
        max-width: 100%;
        padding-left: 30px;
        padding-right: 30px;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding-top: 50px;
        padding-bottom: 50px;
        align-items: center;
    }
    .in-the.container{
        width: 100%;
        position: relative;
        z-index: 2;
        padding-top: 30px;
        padding-bottom: 30px;
        max-height: none;
    }
    .in-the.container .copy .button{
        background: rgba(255, 255, 255, 0.35);
        border: 2px solid #fff;
    }
    .in-the.container .overlay.tint{
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        top: 0;
        left: 0;
        z-index: 1;
    }
    .in-the.container.paper-clip .clip-image{
        position: relative;
        width: 45%;
        max-width: none;
        height: 360px;
        z-index: 2;
        border: 8px solid #fff;
        background-size: cover;
        background-position: center;
        margin-top: 0;
    }
    .in-the.container.paper-clip .copy{
        width: 25%;
    }
    .in-the.container.paper-clip .clip-image img{
        width: 100%;
        height: auto;
        position: relative;
        z-index: 2;
        border: 8px solid #fff;
        box-sizing: border-box;
        filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.75));
    }
    .in-the.img-left{
        display: none;
    }
    .in-the .copy{
        position: relative;
        z-index: 2;
    }
    .in-the .copy .button{
        margin-top: 15px;
    }
    .in-the .line-container{
        transform: translateY(50%) translateX(-100%);
    }
    .in-the .line-container .line{
        width: 25vw;
    }
    .in-the.img-left .copy .line{
        left: auto;
        right: -75px;
        transform: translateX(100%);
    }
    .in-the.img-left .copy .circle{
        left: auto;
        right: -75px;
    }
    .in-the.img-left .line-container{
        left: auto;
        right: 0;
        transform: translateY(50%) translateX(0);
    }
    .in-the.img-left .line-container .dot{
        transform: translateX(55px);
    }
    .in-the .copy{
        width: 38%;
    }
    .in-the.img-left .copy{
        text-align: right;
        width: 38%;
    }
    .in-the .image{
        position: relative;
        width: 50%;
        max-width: 465px;
    }
    .in-the .image img.foreground{
        width: 100%;
        height: auto;
        position: relative;
        z-index: 2;
        border: 8px solid #fff;
        box-sizing: border-box;
        filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.75));
    }
    .in-the .image img.background{
        position: absolute;
        top: 50%;
        width: 133.33%;
        transform: translateY(-50%);
        z-index: 1;
        right: -90%;
    }
    .in-the.img-left .image img.background{
        left: -90%;
    }
    #abf .container{
        width: 85%;
        display: flex;
        margin: 0 auto;
        gap: 100px;
        border: 2px solid #d0043c;
        border-bottom: none;
        padding: 50px 70px;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        background: #ffffff;
        z-index: 2;
    }
    #abf .logo img{
        width: 260px;
    }
    #abf .copy{
        width: calc(100% - 260px);
    }
    #abf .copy a{
        color: #d0043c;
    }
    .diagram.sugar-beet .counter .ball em{
        margin-left: -35px;
        padding-right: 10px;
    }
    .img-left .counter .ball{
        position: absolute;
        top: 50%;
        transform: translateY(-25%);
    }
/*IN THE*/

.fade-in{
    opacity: 0;
    margin-top:30px;
    margin-bottom: -30px;
    transition: 0.75s;
}

.faded-in{
    opacity: 1!important;
    margin-top:0px!important;
    margin-bottom:30px!important;
    transition: 0.75s;
}

@media screen and (min-width: 2250px){
    #what-we-do-facts .facts{
        max-width: 100%;
    }
}

@media screen and (min-width:1400px) {
    .banner .triple, .banner.two.smaller.flip .info.right {
        left: 13.25%;
    }

    .banner.two .info, .banner.two.smaller.flip .triple{
        right: 13.25%;
    }

    .banner.reverse.two > .info{
        left:13.25%;
    }

    .banner.reverse .triple{
        right: 13.25%;
    }
}

@media screen and (min-width:1500px) {
    .banner .triple, .banner.two.smaller.flip .info.right {
        left: 15.25%;
    }

    .banner.two .info, .banner.two.smaller.flip .triple{
        right: 15.25%;
    }

    .banner.reverse.two > .info{
        left:15.25%;
    }

    .banner.reverse .triple{
        right: 15.25%;
    }
}

@media screen and (min-width:1600px) {
    .banner .triple, .banner.two.smaller.flip .info.right {
        left:  18.25%;
    }

    .banner.two .info, .banner.two.smaller.flip .triple{
        right: 18.25%;
    }

    .banner.reverse.two > .info{
        left:18%;
    }

    .banner.reverse .triple{
        right: 18%;
    }

    #slideshow .bubble {
        width: 574px;
        height: 574px;
        font-size: 27px;
        line-height: 36px;
        background-size: 574px 574px;
    }

    #slideshow .bubble h1 {
        font-size: 65px;
        line-height: 60px;
    }
}

@media screen and (min-width:1700px) {
    .banner .triple, .banner.two.smaller.flip .info.right {
        left:  20.25%;
    }

    .banner.two .info, .banner.two.smaller.flip .triple{
        right: 20.25%;
    }

    .banner.reverse.two > .info{
        left:20.25%;
    }

    .banner.reverse .triple{
        right: 20.25%;
    }
}

@media screen and (min-width:1800px) {
    .banner .triple{
        left:  21.5%;
    }

    .banner.two .info{
        right: 21.5%;
    }

    .banner.reverse.two > .info{
        left:20.5%;
    }

    .banner.reverse .triple{
        right: 20.5%;
    }

    .banner.two.smaller.flip .info.right{
        left:21%;
    }

    .banner.two.smaller.flip .triple{
        right:21%;
    }
}

@media screen and (min-width:1900px) {
    #slideshow .bubble {
        width: 700px;
        height: 700px;
        font-size: 37px;
        line-height: 46px;
        background-size: 700px 700px;
        padding: 130px 90px 80px 75px;
    }

    #slideshow .bubble h1 {
        font-size: 84px;
        line-height: 78px;
    }
}

/* SCALE DOWN */

@media screen and (max-width: 2000px){
    .in-the .image img.background{
        right: -70%;
    }
    .in-the.img-left .image img.background{
        left: -70%;
    }
}

@media screen and (max-width: 1550px){
    #our-factories .copy{
        width: 660px;
        max-width: 100%;
    }
    .images-tri-block{
        width: calc(100% - 660px);
        min-width: 0px;
    }
    .in-the{
        width: 900px;
    }
}

@media screen and (max-width: 1366px){
    .in-the.container.paper-clip .copy{
        width: 37%;
    }
    #what-we-do .image-right img{
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: left;
    }
    #what-we-do .container{
        max-height: 300px;
    }
    .images-tri-block .white-circle{
        transform: translate(-90%, -50%);
    }
    .images-tri-block{
        width: calc(100% - 500px);
    }
    #our-factories .copy{
        width: 500px;
    }
    .images-tri-block .image-two{
        width: 375px;
        height: 375px;
        background-position-y: 140px;
    }
    .images-tri-block .image-three{
        width: 560px;
        height: 560px;
        background-position-x: -100px;
    }
    .image-one img{
        height: 375px;
    }
    #our-factories .copy{
        padding-left: 20%!important;
    }
    #our-factories .line{
        width: 20vw;
    }
    .logo-container .logo #bs-logo{
        height: 52px;
    }
    .logo-container .logo #royal{
        height: 80px;
    }
    .logo-container{
        top: 20px;
    }
    .container.paper-clip .copy{
        right: 5%;
        width: 350px;
    }
    #what-we-do-facts .copy, #what-we-do-facts .facts{
        width: calc(100% - 300px);
    }
    .container.paper-clip .clip-image{
        margin-left: 5%;
    }
    .media{
        padding: 50px 40px 0 40px;
        gap: 20px;
        justify-content: center;
    }
    .media a.related-post{
        width: 30%;
        min-width: 320px;
    }
    .media a.related-post .image img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .media a.related-post .image{
        max-height: 225px;
        position: relative;
        height: 250px;
    }
}

@media screen and (max-width:1310px) {
    .sugar-functionality .headers > h2{
        width: 170px;
        font-size: 24px;
    }

    .sugar-functionality .banners .banner img{
        min-height: 625px;
    }

    .sugar-functionality .banners .banner .info {
        margin-top: 2.6%;
    }
}

@media screen and (max-width:1300px) {
    #post-container .sidebar {
        width: 320px;
        float: right;
        padding: 0 10px 0 10px;
        box-sizing: border-box
    }
    #post {
        padding: 0 60px 0 0;
        width: 760px
    }
    .executive-team .popup-box{
      width:60%
    }
}

@media screen and (max-width:1260px) {
    .banner.two .card {
        margin: 0 66px 75px 66px;
    }

    .banner img {
        max-height: none;
    }

    .twitter.triple {
      width:63%;
    }

}

@media screen and (max-width:1200px) {
    #post {
        padding: 0 40px 0 0;
        width: 700px
    }
    #post-container .sidebar {
        width: 290px
    }
    #logo {
        padding: 15px 0 10px 34px;
        height: 52px;
        width: auto
    }
    .banner {
        height: 510px
    }
    #contact .banner, #hsim.banner, .banner.open-plan{
        height: auto
    }
    .banner > img {
        height: 100%;
        width: auto
    }
    .sugar-functionality .banners .banner{
        height:auto;
    }
    .sugar-functionality .banners .banner img{
        height:625px;
    }
    .sugar-functionality .banners .banner .info {
        width: 470px;
    }
    .sugar-functionality .banners .banner .info p{
        padding-top:8px;
        font-size: 13px;
    }
    .text-block {
        margin: 0 auto;
        max-width: 100%;
        padding: 30px 20px;
        box-sizing: border-box
    }
    .pre-counter {
        display: block
    }
    .center .text-block.counter {
        display: inline-block
    }
    .banner.two,
    .banner.three,
    .banner.two-abs {
        height: auto;
        padding: 40px 0
    }
    .banner.two > img,
    .banner.three > img,
    .banner.two-abs > img {
        z-index: -1;
        position: absolute;
        top: 0;
        left: 0
    }
    .banner.two .triple {
        display: block;
        margin: 0 auto;
        position: relative;
        height: auto;
        margin-bottom: 40px;
        left: auto;
        top: auto
    }
    .banner.reverse.two .triple{
        margin-top: 40px;
        margin-bottom: 0;
        right:auto;
    }
    .banner.two > .info {
        display: block;
        margin: 0 auto!important;
        position: static;
        max-width: 85%;
        height: auto!important
    }
    .card-block .text-block.counter {
        padding: 0 15px 0 55px
    }
    .card-block .text-block {
        box-sizing: content-box
    }
    .banner.two.smaller.flip .triple{
        clear: both;
        margin-top: 50px;
        right: 0;
    }
    .banner.two.smaller.flip .info.right{
        float: none;
    }
    #related-links .related {
        width: 312px
    }
    #related-links .related .intro h4 {
        font-size: 19px
    }
    #related-links .related.four {
        width: 240px;
        height: 200px
    }
    #related-links .related.four .intro h4 {
        font-size: 15px
    }
    .banner.two-abs .card-block{
        height: auto;
        margin:0;
    }
    .banner.two-abs .card-block .info{
        position: relative;
        margin: 0 auto;
        height:auto;
    }
    .banner.two-abs .card-block img{
        float: none;
        margin: 30px auto 0 auto;
    }

    .text-infographic {
      margin-top: 0px!important;
    }

    .text-infographic .text-block {
      display: block;
      margin:0 auto;
      top: -300px
    }

    .text-infographic .infographic {
      margin:0 auto;
      width:50%;
      display: block;
      float:none;
      padding-bottom: 40px;
      top:-300px;
    }

    .banner.two .info {
      margin-bottom: 40px!important;
    }

    .text-infographic#arc-box {
      top:300px;
    }

}

@media screen and (max-width:1160px) {
    .logo-line{
        height: 60px;
    }
    #what-we-do .copy{
        padding-left: 15%!important;
    }
    #what-we-do .line-container .line{
        width: 15vw;
    }
    #what-we-do-facts .facts{
        width: calc(100% - 100px);
    }
    .sugar-range .staggered-box{
        margin-left: 10px;
    }
    .co-products .card > img {
        width: 216px;
        height: 153px
    }
    .co-products .card {
        width: 216px;
        height: 189px;
        margin: 10px 15px 40px 15px
    }
    .co-products .card .label {
        width: 178px;
        margin-left: -89px
    }
    .co-products .card .label h2 {
        font-size: 21px;
        line-height: 28px
    }

    .sugar-properties.co-products .card > img{
        width: 100%;
        height: auto;
    }

    .sugar-properties.co-products .card{
        width: 256px;
        height: 244px;
        margin: 10px 15px 20px 15px;
    }

    .sugar-properties.co-products .card .label {
        width: 218px;
        margin-left: -109px;
    }

    .sugar-properties.co-products .card .label > h2{
        font-size: 28px;
        line-height: 27px;
    }

    .executive-team.co-products .card {
      height: 320px;
    }

    .twitter.triple{
      margin-left: 40px;
    }

    .home .triple-1 {
      width: 300px!important;
      height: 230px!important;
    }

    .home .triple-2 {
      width: 300px!important;
      height: 400px!important;
    }
    .home .triple-3 {
      width: 270px!important;
      height: 250px!important;
      padding-left: 30px;
    }
    #header.header-transparent ul li a{
        padding: 10px;
    }
    #header ul li{
        font-size: 12px;
        line-height: 22px;
    }
}

@media screen and (max-width:1100px) {
    .container.paper-clip .copy.col-2{
        width: 100%;
        padding-left: 60px;
        padding-right: 30%;
    }
    #post {
        padding: 0 20px 0 0;
        width: 660px;
    }
    #post-container {
        padding: 55px 25px;
    }
    .triple.static {
        margin-left: 20px
    }
    .post-more .content h3 {
        font-size: 14px;
        line-height: 19px
    }
    .latest-news-all .post-more .content h3 {
        font-size: 30px;
        line-height: 29px
    }
    .latest-news .content h2 {
        font-size: 26px;
        line-height: 26px
    }
    .post-more .content {
        min-width: 320px
    }
    .latest-news {
        width: 468px;
        height: 510px
    }
    .latest-news > img {
        max-width: 100%;
        display: block
    }
    .sugar-functionality .headers > h2{
        width: 155px;
        font-size: 21px;
        line-height: 22px;
    }

    img.infographic {
      width:50%;
    }
}

@media screen and (max-width:1080px) {
    .stat-container {
        margin-top: -100px;
        width: 100%;
        max-width: 700px;
    }

    .stat-container .text-block.counter{
        width: 200px;
    }

    .factory-slides-wrapper em.sprite.arrow-l {
        left: -10px;
        z-index: 3;
    }

    .factory-slides-wrapper em.sprite.arrow-r {
        right: -10px;
        z-index: 3;
    }
}

@media screen and (max-width:1024px) {
    .in-the.container{
        flex-direction: row;
    }
    .in-the.container.paper-clip .clip-image{
        margin-left: 0;
    }
    .in-the.container.paper-clip .copy{
        width: 45%;
    }
    .media a.related-post{
        width: 48%;
    }
    .media{
        flex-wrap: wrap;
    }
    #keith .container.what-we-do.paper-clip .clip-image{
        width: 175px;
        top: -20px;
        right: 10px;
    }
    .container.paper-clip .copy.col-2{
        padding-right: 20%;
    }
    .in-the .line-container .line{
        width: 20vw;
    }
    #abf .container{
        padding: 25px 35px;
        width: 85%;
        gap: 50px;
    }
    .in-the{
        flex-direction: column;
        gap: 40px;
        padding-bottom: 30px;
    }
    .in-the.img-left{
        flex-direction: column-reverse;
    }
    .in-the .copy,
    .in-the.img-left .copy{
        width: 550px;
    }
    .in-the:last-child{
        padding-bottom: 100px;
    }
    .in-the .image{
        width: 100%;
    }
    .images-tri-block .white-circle{
        display: none;
    }
    .images-tri-block,
    #our-factories .copy{
        width: 100%;
        float: none;
    }
    .image-one img{
        height: 250px;
    }
    .images-tri-block{
        padding-top: 00px;
        overflow: hidden;
    }
    .images-tri-block .image-two{
        background-position-x: right;
        right: auto;
        left: 0;
        top: 0;
        transform: translate(-33.33%, -40%);
    }
    #our-factories .copy{
        padding-bottom: 20px;
    }
    #our-factories .container{
        flex-direction: column;
        padding-top: 30px;
        max-height: 420px;
    }
    #sustainability .container.paper-clip .copy{
        width: 50%;
    }
    .container.paper-clip .clip-image{
        margin-top: -15px;
        width: 300px;
    }
    .container.paper-clip .clip-image img{
        width: 100%;
    }
    .container.paper-clip .copy{
        width: 50%;
        right: 20px;
    }
    #googleMap{
        height: 360px!important;
    }

    #mapPopup {
        padding-bottom: 20px;
        width: 100%;
        position: relative;
        top: 0px!important;
        margin: 0 0 -20px 0;
        left: 0;
    }

    #mapPopup p br {
        display: none;
    }

    #mapPopup img {
        display: none;
    }

    #social-media {
        padding: 12px 39px 0 39px
    }

    #hsim.banner .info.right {
        margin-bottom: 10px;
    }
    #title div {
        font-size: 13px;
        height: 95px;
        width: 500px;
        bottom: -43px;
        margin-left: -250px;
        padding: 10px 10px
    }
    #title h1 {
        font-size: 28px;
        line-height: 33px;
        padding-bottom: 7px;
    }
    #title p {
        padding-top: 12px;
    }
    #arc-box .triple.static {
        margin-right: 20px
    }

    .twitter.triple {
      width:60%;
    }

    #twitter-feed {
      left:40px!important;
    }

    .home .triple-1 {
      width:250px!important;
    }

    .home .triple-2 {
      width:260px!important;
    }

    .home .triple-3 {
      width:230px!important;
    }
}

@media screen and (max-width:1010px) {
    #arc-box .triple.static {
        margin-right: 0;
        margin-bottom: 0;
        position: relative;
        left: 50%;
        margin-left: -267px;
        display: block;
        margin-top: -230px
    }
    #arc-box .text-block.static {
        margin-top: 50px;
        display: block;
        width: 800px;
        max-width: 93%
    }

    #twitter-feed {
      margin-left: 0px!important;
    }
}

@media screen and (max-width:1000px) {
    .card-block {
        margin-left: 70px
    }
    .card-block.card-block-right {
        margin-left: 0;
        margin-right: 70px
    }
    .factory-slide .card-block{
        margin:0;
    }
    .co-products .half {
        width: 100%
    }
    .co-products .quatre {
        width: 50%
    }
    .sugar-properties.co-products .quatre{
        width: 286px;
    }
    #footer {
        padding: 25px 50px 125px 50px
    }
    #footer #logo-w {
        top: 25px;
        bottom: auto
    }
    #footer .peripherals {
        bottom: auto;
        top: 150px
    }
}

@media screen and (max-width:999px) {
    .desktop-functionality{
        display: none;
    }

    .mobile-functionality{
        display: block;
    }
    #contact .third,
    #contact .two-third {
        width: 650px;
        max-width: 100%;
        margin: 0;
        border: none;
    }
    #contact .two-third br + h2 {
        margin-top: 30px;
    }
    #contact .two-third .half {
        min-width: 250px;
    }
    #post {
        width: 100%;
        padding: 0 0 20px 0;
        border: none;
        border-bottom: 1px solid rgb(101,179,46);
        margin-bottom: 20px;
    }
    #post-container .sidebar {
        width: 100%
    }
    .center.half.news {
        width: 100%
    }
    .center.half.blogs,
    .news2 {
        display: none
    }
    .blogSplit{
        border-top: 1px solid rgb(101,179,46);
        margin-top: 30px;
    }
    .news1 {
        display: block;
        width: 62%;
        margin: 0 auto
    }
    #media {
        background: rgb(231, 231, 231);
        padding: 0 20px;
        clear: both
    }
    .post-more {
        width: 550px;
        margin: 0 auto 20px auto;
        max-width: 100%
    }
    .latest-news-all .post-more {
        width: 96%;
        margin: 20px auto 0 auto
    }
    .latest-news-all .post-more .content {
        width: 530px
    }
    .news .moreNews {
        border: none
    }

    .carousel .post-more{
        width:23%;
        margin: 35px 1% 0 1%;
    }

    .faqs {
        width: 800px;
    }

    .faqs .questions {
        padding: 33px 22px;
        width: 420px;
    }

    .faqs .answers {
        width: 480px;
        padding: 55px 50px 30px 130px;
    }

    .faqs .answers.lesspadd {
        padding: 30px 30px 30px 130px;
        width: 480px;
    }

    .faqs .questions.lessheight{
        padding:40px;
    }
}

@media screen and (max-width:980px) {
    .factory-slides-wrapper {
        width: 95%;
    }

    .factory-co-product {
        width: 240px;
        padding: 15px;
        margin:15px 0 15px 170px;
    }

    .factory-slide .card-block .info {
        margin-right: 30px;
    }
}

@media screen and (max-width:920px) {
    .logo-container{
        top: 10px;
    }
    #header.header-transparent > ul{
        background: #fff;
        position: fixed;
        top: 0;
        z-index: 10;
    }
    #header.header-transparent #hamburger{
        z-index: 11;
    }
    #header.header-scroll{
        height: 85px;
    }
    #header.header-scroll #searchbar-mobile{
        top: 103px;
    }
    #searchbar-mobile{
        top: 103px;
    }
    #header.header-scroll #mobSearch{
        padding: 30px 19px;
    }
    #header.header-scroll #hamburger{
        padding: 33px 17px;
    }
    .video .overlay-copy h4{
        font-size: 33px;
        line-height: 46px;
    }
    .header-scroll .logo-container .logo #royal{
        height: 65px;
    }
    .logo-container .logo #bs-logo{
        height: 45px;
    }
    #careers .card {
        width: 80%;
    }

    #careers .card img{
        float:right!important;
    }

    #careers .card .label{
        float:left!important;
    }

    #careers .card .number {
        left: auto!important;
        right: 375px!important;
    }

    #careers .card.odd img{
        float:left!important;
    }

    #careers .card.odd .label{
        float:right!important;
    }

    #careers .card.odd .number {
        right: auto!important;
        left: 375px!important;
    }

    #steps{
        display: none;
    }

    .mobilesteps, #steps + #hsim .step-block {
        display: block!important;
    }

    #hsim.banner .info.right {
        box-shadow: none;
        height: auto
    }

    .future .card {
        top: 0;
        margin-bottom: 0;
        width: 256px;
        max-width: 100%;
        display: block;
        margin: 20px auto 20px auto
    }
    .future #step1 {
        display: none
    }
    .future .step-block {
        display: none
    }
    .future .step-block .triple {
        display: none!important
    }
    .future #hsim.banner .info.right {
        margin: 0;
        padding: 5px 15px;
        box-shadow: none
    }
    .future #hsim.lightestBlueBg {
        background: none;
        margin-top: 0
    }
    #header #social-media,
    #header ul li:hover > ul,
    #header ul li ul li.navImage,
    #header ul li ul li ul,
    #header ul li ul li em.sprite,
    #header ul {
        display: none
    }
    #header .navLinks {
        height: auto;
        float: none;
        width: auto
    }
    #header {
        height: 103px;
        transition: 0.3s
    }
    #header.header-scroll{
        height: 85px;
    }
    #header #logo,
    #header.mini #logo {
        padding: 17px 0 0 14px;
        height: 53px
    }
    #header-dummy {
        height: 85px
    }
    #header.header-scroll #mobSearch{
        height: 85px;
    }
    #mobSearch{
        height: 103px;
        padding: 38px 19px;
    }
    #header.header-scroll > ul, #header.mini.header-scroll > ul{
        top: 103px;
    }
    #header > ul, #header.mini > ul{
        top: 85px;
    }
    #hamburger{
        height: 85px;
        padding: 40px 17px;
    }
    #header.header-scroll ul{
        top: 86px;
    }
    #hamburger,
    #mobSearch {
        display: block
    }
    #slideshow img {
        width: 100%
    }
    #header > ul,
    #header.mini > ul {
        background: #fff;
        width: 265px;
        height: 100%;
        position: fixed;
        box-shadow: -464px 200px 0 200px rgba(0, 0, 0, 0.7);
        border-radius: 0;
        box-sizing: border-box;
        right: 0;
        color: #111;
        border-top: 2px solid rgb(101,179,46);
        padding: 30px 0;
        text-align: left;
        transition: 0s!important;
        margin: 0;
        top: 103px;
        height: calc(100% - 87px);
        overflow: auto
    }
    #header ul li {
        font-weight: 500;
        display: block;
        padding: 0 30px;
        border-radius: 0!important;
        height: auto
    }
    #header ul li:hover,
    #header ul li.open,
    #header ul li.navon {
        background: none;
        color: rgb(101,179,46)
    }
    #header ul li:hover em.sprite.navArrow {
        filter: saturate(0%) brightness(1000%) contrast(1000%);
        filter: none
    }
    #header ul li a {
        display: inline-block;
        padding: 6px 0
    }
    #header em.sprite.navArrow {
        display: inline-block
    }
    #header ul li ul {
        position: static;
        background: none;
        box-shadow: none;
        border: none;
        margin-left:0!important;
    }
    #header ul li ul li {
        width: 100%;
        float: none;
        padding: 2px 0 2px 10px;
        font-weight: 400
    }
    #header ul li ul li ul li {
        font-weight: 300;
        padding: 1px 0 1px 15px;
        font-size: 12px
    }
    .desktop {
        display: none!important
    }
    .mobile {
        display: block!important
    }
    #pressOffice .half {
        width: 100%;
        text-align: center;
        padding: 0 5px 30px 5px
    }
    #pressOffice {
        padding: 60px 40px 10px 40px;
        max-width: 90%
    }
    .banner.one-c .info {
        width: 90%;
        right: 5%;
        height: auto;
        margin-top: 40px;
        top: 0
    }

    div#twitter-feed {
      width: 534px;
      min-height: 336px;
      position: relative;
      display: block;
      margin: 0 auto!important;
      left: unset!important;
      float: none;
    }

    .twitter.triple {
      float: none;
      width: 100%;
      margin: 0 auto;
      display: block;
    }
}

@media screen and (max-width:910px) {
    .factory-slide .text-and-triple .triple.static{
        width:434px;
        margin:0;
    }

    .factory-page .card {
        display: inline-block;
        margin: 17px 24px;
    }

    .factory-slide .text-and-triple .triple.static .triple-1 {
        width: 231px;
    }

    .factory-slide .text-and-triple .triple.static .triple-2 {
        width: 183px;
    }

    .factory-co-product {
        width: 50%;
        padding: 15px;
        float:none;
        margin:20px 35%;
    }

    .factory-slide .card-block .info {
        margin-right: 56px;
    }

    .factory-slide .text-and-triple .text-block {
        width: 84%;
    }

    .factory-slide .card-block img {
        float: none;
        margin: 0 auto;
        display: block;
        padding: 0;
    }

    .factory-slide .card-block .info {
        position: relative;
        margin: -20px auto 0 auto;
        width: 70%;
        height: auto;
        padding: 40px;
        font-size: 14px;
        line-height: 18px;
    }
}

@media screen and (max-width:900px) {
    #vf-filters label {
        width: 50%
    }
}

@media screen and (max-width:850px) {
    .card-block {
        margin-left: 20px;
    }
    .card-block p br{
        display: none;
    }
    .card-block .info {
        width: 400px;
    }
    .card-block.long-card .info {
        padding: 30px;
        font-size: 12px;
        line-height: 16px;
    }
    .card-block .text-block.counter {
        padding: 0 15px 0 20px;
    }
    .social .card-block .text-block.counter {
        padding: 45px 0 45px 15px;
    }
    .social .card-block .info {
        margin-top: -155px;
    }
    .card-block .info p{
        padding-top: 5px;
    }
    .card-block .info h2 {
        font-size: 28px;
        line-height: 28px;
        padding-bottom: 5px;
    }
    .card-block img.right {
        margin-right:-65px;
    }
    #careers .card-block .info {
        width: 74%;
        height: auto;
    }

    .socialmsos.social .card-block > img{
        display: none;
    }

    .socialmsos.social .card-block .info.right{
        width:96%;
        margin-left:2%;
        left:0;
        height: auto;
    }

    .mobile-answer.on{
        display: block;
        padding: 0 0 10px 26px;
    }

    .faqs{
        height: auto;
        width:100%;
    }

    .faqs .answers{
        display: none;
    }

    .faqs .questions {
        position: static;
        top: auto;
        left: auto;
        margin: 0 auto!important;
        height: auto!important;
        max-width: 90%;
    }

    .faqs .questions .mobile-answer h2{
        display: none;
    }
}

@media screen and (max-width:800px) {
    .in-the{
        width: 90%;
    }
    #map {
        margin-top: -10px!important;
    }
    .co-products .popup-box {
        padding: 30px 50px 30px 30px;
        position: fixed;
        top: 5%;
        left: 5%;
        width: 90%;
        max-height: 90%;
        overflow: auto
    }
    .co-products .popup p {
        font-size: 12px;
        line-height: 16px
    }
    .co-products .popup img {
        height: 137px;
        width: 151px
    }
    #title {
        margin-bottom: 10px
    }
    #title h1 {
        font-size: 28px;
        line-height: 33px;
        padding-bottom: 7px
    }
    #title p {
        padding-top: 12px
    }
    .triple.static {
        margin: 0 0 20px 0;
        left: auto
    }
    .banner .triple,
    .banner.two .triple,
    .triple.static.non-static {
        display: block!important
    }
    #related-links h3 {
        padding-bottom: 25px
    }
    #related-links .center .button {
        margin: 15px 0
    }
    #related-links .related,
    #related-links .related.four {
        width: 90%;
        height: auto;
        padding: 0;
        margin: 0 0 10px 0;
        position: relative;
        background: #fff;
        font-size: 13px;
        line-height: 17px
    }
    #related-links .related img {
        width: 39%;
        float: left
    }
    #related-links .related .intro {
        width: 61%;
        box-sizing: border-box;
        padding: 10px 20px;
        position: absolute;
        top: 0;
        right: 0;
        top: 50%;
        transform: translateY(-50%)
    }
    #related-links .related .intro p {
        padding: 5px 0
    }
    .latest-news-all .post-more img {
        width: 398px;
        height: 250px
    }
    .latest-news-all .post-more .content {
        height: 200px;
        font-size: 13px
    }
    .latest-news-all .post-more .content h3 {
        font-size: 24px;
        line-height: 23px;
        padding: 5px 0
    }

    .triple-1,
    .banner .triple-1,
    .home .triple-1 {
        width: 241px!important;
        height: 173px!important;
    }

    .triple-2,
    .banner .triple-2,
    .home .triple-2 {
        width: 222px!important;
        height: 302px!important;
        padding-top: 32px!important;
    }

    .triple-2.only-2{
        padding-top: 10px!important;
    }

    .triple-3,
    .banner .triple-3,
    .home .triple-3 {
        padding-top: 11px!important;
        padding-left: 33px!important;
        width: 208px!important;
        height: 196px!important;
    }

    .static .triple-1,
    .static .triple-2,
    .static .triple-3{
        height: auto!important
    }

    .triple,
    .banner .triple {
        width: 477px!important;
        left: 50%!important;
        margin-left: -238px!important;
        display: block!important;
        height: auto;
        min-height: auto!important;
        padding-bottom:10px;
    }

    .triple .info,
    .banner .triple .info {
        font-size: 12px;
        line-height: 16px;
        top: 62px!important;
        left: 50%;
        width:240px!important;
        padding: 18px!important;
        margin-left: -120px!important;
    }

    .triple .info p,
    .banner .triple .info p{
        padding-top: 5px;
    }

    .triple .info h2,
    .banner .triple .info h2,
    #hsim.banner .triple .info h2,
    .triple h2 big{
        padding-bottom: 5px;
        font-size: 27px!important;
        line-height: 25px!important;
    }

    .latest-news-all .post-more .content {
        padding: 15px 20px;
        width: 470px;
        top: 11px;
        height: 185px;
    }

    .latest-news-all .post-more img {
        width: 330px;
        height: 208px;
    }
    #arc-box.our-future {
        padding-bottom: 140px;
    }

    .executive-team .popup img {
      margin-left: 0px;
      height: auto;
      margin-top: -100px;
      width:140px;
    }

    .executive-team .popup-box {
      overflow: initial;
      top: 10%;
    }

    .executive-team .popup h2 {
      margin-left: 200px;
    }

    .co-products .popup p{
      clear:both;
    }

    .executive-team .popup .arrow {
      display: none;
    }

    .executive-team .popup-box {
      padding-top: 60px;
    }

    .executive-team .popup p {
      padding-bottom: 5px;
    }

    #twitterHeader {
      margin-top: 40px;
    }
}

@media screen and (max-width:768px) {
    .in-the.container{
        flex-direction: column-reverse;
        gap: 0;
    }
    .in-the.container.paper-clip .clip-image{
        width: 100%;
        height: 200px;
    }
    .in-the.container.paper-clip .copy{
        position: static;
        width: 100%;
        transform: none;
        padding: 0;
        text-align: left;
    }
    .images-tri-block .image-two,
    .images-tri-block .image-three{
        display: none;
    }
    #what-we-do-facts .facts{
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
    }
    .media a.related-post{
        width: 100%;
    }
    #sustainability .container.paper-clip .clip-image{
        margin-top: -35px;
    }
    #sustainability .container.paper-clip{
        padding-top: 25px;
        padding-bottom: 25px;
    }
    .container.paper-clip .copy.col-2{
        width: 90%;
        column-count: 1;
        padding-right: 0;
        padding-top: 150px;
        padding-left: 0;
    }
    #keith .container.what-we-do.paper-clip .clip-image{
        width: 150px;
        top: -17px;
    }
    .in-the.img-right .image img.background,
    .in-the.img-left .image img.background{
        width: 125%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .in-the{
        padding-top: 30px;
    }
    #abf .container{
        flex-direction: column;
        gap: 25px;
    }
    #abf .copy{
        width: 100%;
    }
    .image-one img{
        height: 125px;
    }
    .container.paper-clip .copy h2{
        font-size: 35px;
        line-height: 42px;
    }
    .container.paper-clip .copy h2 strong{
        font-size: 41px;
        line-height: 49px;
    }
    .container.paper-clip .copy h4{
        font-size: 14px;
        line-height: 18px;
    }
    .container.paper-clip .clip-image{
        width: 225px;
    }
    .container.paper-clip .clip-image{
        margin-top: -12px;
    }
    #searchbar-mobile{
        padding:8px;
    }
    #searchbar-mobile input[type="text"]{
        width: 65%;
    }
    .carousel{
        max-width: 100%;
    }

    .carousel .post-more .content {
        height: 220px;
        top: 15px;
        width: 400px;
    }

    .intro-wide {
        width: 100%;
        padding: 0 25px 25px 25px;
        border:none;
        box-sizing: border-box;
    }

    #careers .card{
        width: 100%;
        max-width: 100%;
    }

    #careers .card .label{
        width:550px;
    }
    .banner.two .card {
        margin: 0 5px 75px 5px;
    }
    #cookieBar .button.right {
        margin: 10px 0 10px 10px;
    }
}

@media screen and (max-width:728px) {
    .curr-vac{
        margin-left: 0
    }
    #title {
        height: 89px
    }
    #title img {
        height: 89px;
        width: 729px;
        position: relative;
        left: 50%;
        margin-left: -365px
    }
    .center .text-block.counter {
        padding: 5px 5px 20px 5px;
        width: 119px
    }
    .center .counter .ball{
        width: 110px;
        height: 110px;
        padding: 28px 0
    }
    .card-block .counter .ball{
        width: 130px;
        height: 130px;
        padding: 28px 0
    }
    .center .counter .ball span{
        font-size: 20px;
        line-height: 20px
    }
    .center .card-block .counter .ball span{
        font-size: 25px;
    }
    .center .counter .ball em,
    .card-block .counter .ball em{
        font-size: 45px;
        line-height: 52px
    }
    .center .counter p {
        font-size: 12px;
        line-height: 17px
    }
    .card-block {
        height: auto;
        padding: 0;
        margin: 50px 0
    }
    .socialmsos.social .card-block .info.right{
        position: relative;
        top: 0;
        margin-top: 0;
        float: none;
    }
    /*
    .card-block img.right {
        position: absolute;
        top: -5%;
        left: 30%;
        height: 110%
    }
    .card-block .text-block.counter {
        display: block;
        float: none;
        padding: 0 0 30px 0
    }
    .card-block .info {
        height: auto;
        position: relative;
        left: 0;
        top: 0;
        margin: 0;
        z-index: 2;
        margin-left: 6%;
        width: 80%
    }

    .card-block .counter .ball em {
        font-size: 45px;
        line-height: 52px
    }
    .card-block .counter .ball span {
        font-size: 30px;
        line-height: 26px
    }
    .social .card-block .info{
        height: auto;
        margin:0 0 0 6%;
    }
    .socialmsos.social .card-block .info.right{
        margin:0 0 0 2%;
        float:none;
    }

    .socialmsos.social .card-block .info.right img{
        float: none!important;
        height: 100px!important;
        margin:0 auto 25px auto!important;
        display: block!important;
        width: 100px!important;
    }

    .social .card-block .text-block.counter{
        padding: 0 0 30px 0;
    }
    */

    .banner.socialmsos{
        height: auto;
    }

    #careers .card-block{
        height:auto;
    }

    .stat-container .counter .ball{
        padding: 17px 0;
    }
}

@media screen and (max-width:700px) {
    .latest-news-all #archiveTab {
        position: relative;
        top: 30px;
        margin: 0 auto 20px auto
    }
    #latest-news-1,
    #latest-news-1.latest-news-all .post-more {
        width: 100%;
        max-width: 100%
    }
    #latest-news-1.latest-news-all .post-more img {
        width: 100%;
        height: auto;
        min-height: 170px
    }
    #latest-news-1.latest-news-all .post-more .content {
        position: relative;
        width: 90%;
        top: 0;
        left: 5%;
        right: auto;
        height: auto;
        margin: -100px 0 29px 0;
    }

    .latest-news-all .post-more .content {
        width: 380px;
        top: -40px;
        height: auto;
        position: relative;
        margin: 0 auto;
    }

    .latest-news-all .post-more img {
        width: 450px;
        height: auto;
        margin:0 auto
    }

    .latest-news-all .post-more {
        margin: 10px 0 0 0;
        padding-bottom: 0;
    }

    .text-infographic .infographic {
      width:80%;
    }
    #what-we-do .copy{
        padding-left: 13%;
    }
    #what-we-do .copy h2 strong{
        font-size: 43px;
        line-height: 49px;
    }
    #what-we-do .copy h2{
        font-size: 37px;
        line-height: 44px;
    }
}

@media screen and (max-width:640px) {
        #what-we-do .copy{
            padding: 20px!important;
            width: 100%;
            background: rgba(255,255,255,0.85);
        }
        #what-we-do .copy.faded-in{
            margin-bottom: 0!important;
        }
        #what-we-do .image-right.right{
            width: 100%;
            float: none;
            top: 50%;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        #what-we-do-facts .copy{
            width: 100%;
            padding-left: 20px;
            padding-right: 20px;
            box-sizing: border-box;
        }
        #what-we-do-facts .container{
            padding-top: 30px;
            padding-bottom: 30px;
        }
    .line-container{
        display: none;
    }
    #our-factories .copy{
        padding-left: 30px;
    }
    #how-sugar-is-made .container.paper-clip .clip-image,
    #sustainability .container.paper-clip .clip-image{
        width: 350px;
        padding-bottom: 30px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: border-box;
        margin: -18px 0 0 50%;
        transform: translateX(-50%);
        max-width: 96%;
    }
    #sustainability .container.paper-clip .clip-image {
        margin-top: -40px;
        z-index: 3;
    }
    #how-sugar-is-made .container.paper-clip .clip-image{
        position: relative;
        z-index: 3;
    }
    #sustainability .container.paper-clip .copy{
        width: 100%;
    }
    .container.paper-clip .copy{
        position: static;
        transform: none;
        width: 100%;
        text-align: center;
        padding: 0 20px 30px 20px;
        box-sizing: border-box;
    }
    .sugar-functionality .headers .sugar-functionality-mobile .label{
        width:500px;
    }
    .card-block .info {
        width: 88%;
        left: 6%;
        position: relative;
        margin-top:250px!important;
        z-index: 2;
    }
    .card-block.long-card img.right,.card-block.long-card img.left,.card-block.long-card img, .card-block.wide-card img{
        margin: 0;
        left: 5%;
        width: 90%;
    }
    .card-block.long-card.high-card, .card-block.long-card.short-card{
        height:auto;
    }
    .card-block.long-card.high-card img, .card-block.long-card.short-card img{
        position: relative;
        padding:0;
        float:none;
        display: block;
    }
    .card-block.long-card.high-card .info, .card-block.long-card.short-card .info{
        top: 0;
        margin-top: -100px!important;
        margin-bottom: 0;
    }
    .card-block.long-card .info {
        width: 80%;
        left: 10%!important;
        margin-top: 250px!important;
        height:auto!important;
    }
    .banner.two-abs .card-block.long-card .info, .banner.two-abs .card-block.wide-card .info {
        width: 80%;
        left: 0!important;
        margin-top: 0!important;
    }
    .banner.two-abs .card-block img, .banner.two-abs .card-block img{
        position: relative;
        left: 0;
        margin: 30px auto 0 auto;
    }
    #careers .card-block .info {
        margin-top: -155px!important;
        position: absolute!important;
    }

    .socialmsos .card-block .info{
        margin-top:0!important;
    }
    .socialmsos .card-block .info h2 img{
        width:100px!important;
        height: 100px!important;
    }
    .card-block img.right {
        float: none;
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -225px;
    }
    .card-block .text-block.counter {
        padding: 0 0 35px 15px;
    }
    #contact.banner.contact .card{
        float: left;
    }
    #contact .banner .info{
        margin-left: 0;
        float
    }
    #vf-filters label {
        padding: 0 10px 15px 10px;
        width: 100%;
        text-align: center
    }
    #vacancies .advert {
        padding: 25px 35px
    }
    .banner .info {
        right: auto;
        left: 50%;
        margin-left: -157px
    }
    .banner.one-c,
    .banner.one {
        height: auto
    }
    .banner.one-c .info,
    .banner.one .info {
        left: 5%;
        margin: 50px 0;
        width: 90%;
        position: relative;
        top: 0;
        height: auto;
        padding-left: 30px;
        padding-right: 30px
    }
    .banner.one-c > img,
    .banner.one > img {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1
    }
    .banner .info h2 {
        /*
        why?
        text-align: center
        */
    }
    .staggered-box {
        padding: 30px 20px;
        float: left;
        width:100%;
        box-sizing: border-box;
    }
    .staggered-box.two {
        float: right;
        text-align: left
    }
    .staggered-box.two .info {
        right: 20px
    }
    .staggered-box .info{
        width:280px;
        padding: 18px;
        font-size: 12px;
        line-height: 15px;
        height: auto;
        top: 40px;
        margin-top: 0;
    }
    .smaller-staggered .staggered-box .info {
        width: 280px;
        padding: 18px;
        font-size: 13px;
        line-height: 18px;
        height: auto;
        top: 55px;
        margin-top: 0;
    }
    .staggered-box .info h2 {
        font-size: 26px;
        line-height: 24px;
        padding-bottom: 4px;
    }
    .staggered-box > img{
        height: 320px;
        width: auto;
    }
    #slideshow .bubble {
        width: 444px;
        height: 444px;
        padding: 80px 76px 76px 56px;
        font-size: 21px;
        line-height: 26px
    }
    #slideshow .bubble h1 {
        font-size: 51px;
        line-height: 46px
    }
    #slideshow .bubble p {
        padding-top: 25px
    }
    #title div {
        height: 94px;
        width: 420px;
        bottom: -47px;
        margin-left: -220px;
        font-size: 12px
    }
    #title h1 {
        font-size: 26px;
        line-height: 31px
    }
    .banner.one-b .info {
        position: relative;
        left: 0;
        top: 0;
        margin: 90px auto;
        display: block;
        max-width: 80%;
        padding: 30px;
        height: auto
    }
    .banner.one-b > img {
        position: absolute;
        top: 0;
        left: 0
    }
    .sugar-functionality .staggered-box .info, .sugar-properties .staggered-box .info {

    }

    .factory-slide .card-block .info{
        margin: -20px auto 0 auto!important;
        left:0 !important
    }

    .factory-slide .card-block {
        width: 90%;
    }

    .timeline .timeline-line {
        width: 76%;
        left: 12%;
    }
    #our-factories .copy{
        padding: 20px!important;
    }
    #our-factories .container{
        padding-top: 0;
    }
}

@media screen and (max-width:600px) {
    .in-the .copy,
    .in-the.img-left .copy{
        width: 100%;
    }
    .video .overlay-copy h4{
        font-size: 22px;
        line-height: 36px;
    }
    .overlay-icon{
        bottom: 15px;
    }
    #contact .two-third .half{
        width: 100%;
    }
    #cookieBar {
        line-height: 20px;
        padding: 7px 20px;
        font-size: 11px;
    }
    .lg h2 {
        font-size: 33px;
        line-height: 29px;
    }
    #careers .card img{
        margin-right:-25px;
    }
    #careers .card.odd img{
        margin-right:0;
        margin-left:-25px;
    }
    #careers .card .label{
        width: 100%;
    }
    #careers .card-block img.left {
        padding: 5px 25px 10px 0;
        margin-left: -40px;
    }
    #careers .card-block .info {
        width: 65.5%;
    }
    .co-products .quatre {
        width: 100%
    }
    .triple.static.md .info p {
        padding: 0 0 10px 0
    }
    .triple.static.md .info p:first-child + h2 {
        display: block
    }
    .latest-news-all .post-more .content .black {
        display: none
    }
    .latest-news-all .post-more .content .black.date {
        display: block
    }
    .latest-news-all .post-more .content {
        height: 150px;
        padding: 20px 30px;
        width: 420px
    }
    .latest-news-all .post-more img {
        width: 319px;
        height: 200px
    }
    .latest-news-all .post-more .content h3 {
        font-size: 22px
    }
    .carousel{
        padding:0;
    }
    .carousel .post-more .content {
        height: 170px;
        width: 320px;
        top:-25px!important;
    }
    .latest-news-b{
        display: none;
    }

    .latest-news-a{
        margin: 15px auto;
        display: block;
    }
    .banner.contact .card {
        height: 330px;
    }
    .banner.contact .card img {
        width: 348px;
        height: 330px;
    }
    .banner.contact .card .info {
        padding: 15px;
        font-size: 11px;
        line-height: 15px;
        width: 200px;
        height: 244px;
        margin-top: -122px;
    }

    .banner .card .info h2{
        font-size: 25px;
        line-height: 23px;
    }

    .sugar-properties.co-products .quatre {
        width: 246px;
    }

    .sugar-properties.co-products .card .label {
        width: 198px;
        margin-left: -99px;
    }

    .sugar-properties.co-products .card {
        margin: 10px 5px 20px 5px;
        height: 224px;
    }

    .executive-team.co-products .card {
      height: 290px;
    }

    .executive-team .popup h2:nth-of-type(2) {
      line-height: 15px;
    }

    .executive-team .popup h2{
      margin-left: 180px;
      font-size: 40px;
    }
}

@media screen and (max-width:560px) {
    .moreNews {
        padding: 15px 0
    }
    .triple.static {
        margin-left: -267px;
        left: 50%;
        display: block
    }
    .sugar-functionality .headers .sugar-functionality-mobile .label{
        width:400px;
    }
    .sugar-functionality .headers .sugar-functionality-mobile .label > h2 {
        font-size: 24px;
        line-height: 26px;
    }
     #abf .container{
        padding: 20px;
    }
    #abf .container h3{
        font-size: 18px;
        line-height: 23px;
    }
    #abf .logo img{
        width: 100%;
    }
}

@media screen and (max-width:540px) {
    .banner.contact .card{
        width: 100%;
        max-width: 96%;
        margin: 20px 0;
    }
    #hsim.banner .triple {
        left: 50%;
        margin-left: -264px;
        display: block
    }
    #hsim.banner .info.right {
        margin: 0;
        padding: 35px 20px;
        max-width: 100%;
        box-sizing: border-box
    }

    .factory-slides-container {
        width: 100%;
        margin-left: 0!important;
    }

    .factory-slides-wrapper em.sprite.arrow-l,
    .factory-slides-wrapper em.sprite.arrow-r{
        display: none;
    }

    .factory-slides .factory-slide {
        width: 100%;
        float: none;
    }

    .factory-slide .dots,
    .timeline{
        display: none;
    }
}

@media screen and (max-width:500px) {
    .logo-line{
        display: none;
    }
    .media a.related-post{
        min-width: 280px;
    }
    #searchbar-mobile{
        top: 103px;
    }
    #header.header-scroll ul{
        top: 103px;
    }
    .logo-container{
        gap: 20px;
        top: 50%;
        transform: translateY(-50%);
    }
    .logo-container .logo #bs-logo{
        height: 35px;
    }
    #header.header-transparent #logo{
        width: 180px;
    }
    #header.header-scroll{
        height: 103px;
    }
    #header.header-scroll #mobSearch,
    #header #mobSearch{
        padding: 0;
        width: 30px;
        height: 30px;
        bottom: 15px;
        top: auto;
        right: 15px;
    }
    #header.header-scroll #hamburger,
    #header #hamburger{
        position: absolute;
        padding: 0;
        top: 15px;
        right: 15px;
        width: 30px;
        height: 30px;
    }
    .card-block.long-card .info {
        margin-top: 220px!important;
    }
    #careers .card img {
        width: 250px;
        height: 182px;
    }
    #careers .card .number {
        left: auto!important;
        padding: 20px 20px 0 20px;
        right: 250px!important;
    }
    #careers .card.odd .number {
        right: auto!important;
        left: 250px!important;
    }
    #careers .card .label{
        margin-top: -50px;
    }
    .latest-news-all .post-more {
        width: 100%
    }
    .latest-news-all .post-more img {
        width: 255px;
        height: 160px
    }
    .latest-news-all .post-more .content {
        height: auto;
        padding: 20px;
        width: 320px;
        top: -25px
    }
    .latest-news-all .post-more .content h3 {
        font-size: 19px;
        line-height: 20px
    }
    table th,
    table td {
        padding: 2px 3px;
        min-width: 50px
    }
    table {
        font-size: 12px
    }
    .news1 {
        width: 280px
    }
    .co-products .popup img {
        float: left;
        margin: 0 0 20px 0
    }
    .co-products .popup h2 {
        display: block;
        clear: both
    }
    .co-products .card img {
        width: 150px;
        height: 106px
    }
    .co-products .card {
        width: 150px;
        height: 138px;
        margin: 10px 6px 40px 6px
    }
    .co-products .card .label h2 {
        font-size: 15px;
        line-height: 21px
    }
    .timeline {
        width: 180px
    }
    .co-products .card .label {
        width: 128px;
        margin-left: -64px;
        height: 62px
    }
    .center .text-block.counter {
        padding: 5px 0 20px 0
    }
    .center .counter p {
        padding: 10px 8px 0 8px;
        box-sizing: border-box
    }
    .card {
        margin: 40px 0 80px 0
    }
    .related h4 {
        font-size: 17px;
        line-height: 24px
    }
    .card .label {
        width: 220px;
        margin-left: -110px
    }
    .card .label h2 {
        font-size: 26px;
        line-height: 28px
    }
    #logo {
        padding: 35px 0 0 30px;
        width: 192px;
        height: 49px
    }
    #slideshow .bubble {
        width: 346px;
        height: 346px;
        padding: 66px 73px 84px 45px;
        font-size: 16px;
        line-height: 21px;
        bottom: -85px;
        background-size:346px 346px;
    }
    #slideshow .bubble p {
        padding-top: 15px
    }
    #slideshow .bubble h1 {
        font-size: 40px;
        line-height: 35px
    }
    #related-links .related {
        font-size: 12px;
        line-height: 15px
    }
    #footer {
        font-size: 12px;
        padding: 25px 20px 125px 20px
    }
    #footer #logo-w {
        left: 20px
    }
    #footer .peripherals {
        left: 0;
        margin: 0;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box
    }
    #title div {
        height: 88px;
        width: 310px;
        bottom: -44px;
        margin-left: -155px;
        font-size: 10px
    }
    #title h1 {
        font-size: 19px;
        line-height: 27px
    }
    #title p {
        padding-top: 10px
    }
    #header-dummy,
    #header,
    #header.mini {
        height: 103px
    }
    #hamburger {
        height: 63px;
        padding: 21px 13px;
        width: 60px
    }
    #mobSearch {
        height: 63px;
        padding: 17px 9px;
        width: 48px;
        right: 60px
    }
    #header #logo,
    #header.mini #logo {
        padding: 11px 0 0 14px;
        height: 41px;
        width: auto
    }
    #header > ul,
    #header.mini > ul {
        top: 103px;
        height: calc(100% - 103px)
    }
    .carousel .post-more{
        width:23%;
    }
    .button {
        font-size: 13px;
        padding: 6px 12px
    }
    .staggered-box .info {
        width: 250px;
        padding: 12px;
        font-size: 11px;
        line-height: 14px;
        top: 20px;
    }
    .smaller-staggered .staggered-box .info{
        width: 250px;
        padding: 12px;
        font-size: 11px;
        line-height: 14px;
        top: 45px;
    }
    .staggered-box > img{
        height: 250px;
        width: auto;
    }

    .sugar-functionality .staggered-box .info, .sugar-properties .staggered-box .info {

    }

    .executive-team .popup-box {
      padding-top: 40px;
    }

    .executive-team .popup img {
      height: auto;
      margin-top: -70px;
      width: 130px;
    }

    .executive-team.co-products .popup h2{
      font-size: 25px;
      clear:none;
      margin-left: 150px;
    }

    .executive-team .popup h2 strong {
      font-size: 13px;
    }
}

@media screen and (max-width:468px) {
    .card-block.long-card .info {
        margin-top: 200px!important;
    }
    .card-block .text-block.counter{
        padding: 0 0 20px 0!important;
        float: none;
        margin: 0 auto;
        display: block;
    }
    .socialmsos .card-block .info h2 img{
        margin: 0px 20px 10px 0!important;
    }
    .banner.contact .card img {
        width: 290px;
        height: 275px;
    }
    .banner.contact .card {
        height: 275px;
    }
    #searchbar-mobile input[type="text"] {
        width: 50%;
    }
    .latest-news > img {
        height: auto;
        min-height: 170px
    }
    .latest-news {
        width: 100%;
        height: auto;
        background: none;
        box-shadow: none;
        margin-top: 0
    }
    .latest-news .content {
        width: 90%;
        background: #fff;
        margin: -100px 0 0 5%;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
        box-sizing: border-box;
        z-index: 2;
        position: relative
    }
    #careers .card-block img.left {
        width: 190px;
    }
    #careers .card-block .info {
        width: 68.5%;
        margin-top: -260px;
    }
    #careers .card-block .info h2{
        font-size: 25px;
        line-height: 24px;
    }

    .carousel .post-more .content {
        width: 290px;
        min-width: 290px;
    }
    .center.half.news .latest-news img{
        height: auto;
    }
    .latest-news.latest-news-a{
        margin-top:-22px;
    }
    .latest-news.latest-news-a img{
        height: auto;
    }

    #hsim.banner .triple{
        height: auto;
    }

    .triple-1,
    .banner .triple-1,
    .home .triple-1{
        width: 189px!important;
        height: 138px!important;
    }

    .triple-2,
    .banner .triple-2,
    .home .triple-2{
        width: 176px!important;
        height: 241px!important;
        padding-top: 24px!important;
    }

    .triple-3,
    .banner .triple-3,
    .home .triple-3 {
        padding-top: 14px!important;
        padding-left: 20px!important;
        width: 165px!important;
        height: 157px!important;
    }

    .static .triple-1,
    .static .triple-2,
    .static .triple-3{
        height: auto!important
    }

    .triple,
    .banner .triple {
        width: 380px!important;
        margin-left: -190px!important;
    }

    .triple .info,
    .banner .triple .info {
        font-size: 11px;
        line-height: 15px;
        top: 42px!important;
        width:220px!important;
        min-height: 180px!important;
        height:auto!important;
        padding: 20px 15px!important;
        margin-left: -110px!important;
    }

    .triple .info p,
    .banner .triple .info p{
        padding-top: 5px;
    }

    .triple .info h2,
    .banner .triple .info h2,
    #hsim.banner .triple .info h2,
    .triple h2 big{
        padding-bottom: 5px!important;
        font-size: 23px!important;
        line-height: 21px!important;
    }

    .squashInfo .triple .info {
        min-height: 160px!important;
    }

    .staggered-box .info p{
        padding-top: 6px;
    }
    .staggered-box .info {
        width: 220px;
    }
    .button {
        font-size: 12px;
        padding: 6px 9px;
    }
    .sugar-functionality .headers .sugar-functionality-mobile .label{
        width:350px;
        padding: 6px 38px 6px 160px;
    }
    .sugar-functionality .headers .sugar-functionality-mobile .label > h2 {
        font-size: 19px;
        line-height: 22px;
    }
    .stat-container {
        margin-top: -190px;
    }

    .factories-top .text-block{
        width:100%;
    }

    .factory-co-product {
        padding:15px 10px;
    }

    .factory-co-product h4 {
        font-size: 22px;
    }
}

@media screen and (max-width:400px) {
    .video .overlay-copy h4{
        font-size: 18px;
        line-height: 32px;
    }
    .video .overlay-copy{
        padding-left: 15px;
        padding-right: 15px;
    }
    .card-block.long-card .info {
        margin-top: 180px!important;
    }
    .info.absImg img:first-child {
        top: 0;
        right: 0;
        width: 68px!important;
        height: auto!important;
        z-index: 2;
        position: relative;
        width: auto;
    }
    h2 {
        font-size: 32px;
        line-height: 30px;
        padding-bottom: 5px;
    }
    #hsim.hsim h2 {
        font-size: 29px;
    }
    .banner{
        height: 450px;
    }
    .staggered-box > img {
        height: 200px;
        width: auto;
        margin-top: 30px;
        margin-bottom: 30px;
    }
    #googleMap{
        height: 230px!important;
    }
    #cookieBar {
        line-height: 16px;
        padding: 7px 15px;
    }
    .banner.one-b .info {
        margin: 50px auto;
    }
    .banner.two.two-b > .info, .banner.two.two-c > .info  {
        padding: 25px;
    }
    #arc-box .text-block.static{
        margin-top:0;
    }
    #careers .card-block .info h2{
        font-size: 22px;
        line-height: 21px;
    }
    #careers .card-block .info {
        padding: 22px;
    }
    #title div {
        font-size: 9px;
    }
    #post-container h2 {
        font-size: 21px;
        line-height: 27px;
    }
    #pressOffice {
        padding: 40px 15px 10px 15px;
        font-size: 14px
    }
    #pressOffice h3 {
        background: rgb(128, 189, 38);
        height: 44px;
        text-align: center;
        font-size: 27px;
        font-family: 'eirik';
        line-height: 44px;
        color: #fff;
        width: 260px;
        position: absolute;
        top: -22px;
        left: 50%;
        margin-left: -130px;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -o-border-radius: 4px;
        -ms-border-radius: 4px;
        -khtml-border-radius: 4px
    }
    #pressOffice h4 {
        font-size: 27px
    }
    .post-more .content {
        min-width: 290px;
        padding: 15px;
        height: 133px;
        top: 12px
    }
    .carousel{
        min-height: 330px;
    }
    .carousel .post-more .content {
        width: 240px;
        min-width: 240px;
        height: auto;
        min-height: 126px;
        top: -14px;
        width: 260px;
        top: 122px;
        left: 50%;
        margin-left: -130px;
    }
    #media{
        padding: 0 10px;
    }
    .carousel .post-more img {
        margin: 0 auto;
    }
    #title div {
        bottom: -34px;
    }
    .two-third {
        padding: 0 30px 30px 40px;
    }
    #contact .banner.contact .card .info {
        height: auto;
        width: 180px;
        margin-left: 10px;
        margin-top: -114px;
    }
    .banner .card .info h2 {
        font-size: 23px;
        line-height: 21px;
        padding-bottom: 5px;
    }
    .banner.contact .card {
        max-width: 100%;
        min-width: 350px;
    }
    .banner.one-c .info, .banner.one .info{
        padding:30px;
    }
    #related-links h3 {
        font-size: 23px;
        line-height: 18px;
    }
    .smaller-staggered .staggered-box .info{
        width: 200px;
        font-size: 10px;
        line-height: 13px;
        top:54px;
        margin-top:20px;
    }

    .smaller-staggered .staggered-box{
        margin-top:-30px;
    }

    .sugar-functionality .staggered-box .info{

    }
    .sugar-properties .staggered-box .info {

    }

    .sugar-range .card {
        width: 310px;
        height:auto;
    }

    .sugar-range .card .label span.button {
        position: static;
        width: 220px;
        margin:15px auto 0 auto;
    }

    .sugar-range .card .label {
        width: 270px;
        height:auto;
        margin-left: -135px;
        position: relative;
        top: 0;
        margin-top: -50px;
    }

    .sugar-range .card .label h2 {
        padding-bottom: 15px;
    }

    .executive-team .popup-box {
      padding: 40px 15px 20px 15px;
    }

    .factory-co-product {
        width:200px;
        margin:20px 29%;
    }

    .factory-co-product img{
        left:-75px;
        margin-top:-42px;
        height:84px;
        width:111px;
    }
}

@media screen and (max-width:390px) {
    .latest-news-all .post-more .content {
        padding: 12px 20px;
        width: 290px
    }
    .carousel .post-more .content {
        width: 260px;
    }
    #logo {
        padding: 39px 0 0 15px;
        height: 41px;
        width: 161px
    }
    #footer #logo-w {
        width: 140px
    }
    .staggered-box.two img {
        padding: 0 0 0 60px
    }
    .info {
        width: 274px;
        height: 328px;
        padding: 23px 28px
    }
    #related-links .related {
        font-size: 11px;
        line-height: 14px
    }
    #related-links .related {
        width: 94%
    }
    #related-links .related .intro {
        padding: 6px 6px 6px 8px;
    }
    .banner .info {
        margin-left: -137px
    }
}

@media screen and (max-width:380px) {
    .sugar-functionality .headers .sugar-functionality-mobile .label {
        width: 300px;
        padding: 6px 43px 6px 140px;
    }

    .sugar-functionality .headers .sugar-functionality-mobile .label > img {
        margin-top: -48px;
        height: 96px;
        width: 140px;
    }

    .triple-1,
    .banner .triple-1,
    .home .triple-1{
        width: 153px!important;
        height: 113px!important;
    }

    .triple-2,
    .banner .triple-2,
    .home .triple-2{
        width: 148px!important;
        height: 204px!important;
        padding-top: 24px!important;
    }

    .triple-3,
    .banner .triple-3,
    .home .triple-3 {
        padding-top: 5px!important;
        padding-left: 10px!important;
        width: 143px!important;
        height: 140px!important;
    }

    .static .triple-1,
    .static .triple-2,
    .static .triple-3{
        height: auto!important
    }

    .triple,
    .banner .triple {
        width: 310px!important;
        margin-left: -155px!important;
    }

    .triple .info,
    .banner .triple .info {
        font-size: 10px;
        line-height: 13px;
        top: 32px!important;
        width: 196px!important;
        min-height: 150px!important;
        height: auto!important;
        padding: 20px 15px!important;
        margin-left: -98px!important;
    }

    .triple .info p,
    .banner .triple .info p{
        padding-top: 3px;
    }

    .triple .info h2,
    .banner .triple .info h2{
        padding-bottom: 3px!important;
        font-size: 20px!important;
        line-height: 18px!important;
    }
}

@media screen and (max-width:360px) {
    .two-third p, .third p {
        padding-top: 5px;
    }
    #contact .two-third br + h2 {
        margin-top: 20px;
    }
    #contact .third {
        padding: 0 30px 30px 40px;
    }
    .carousel .right.sprite {
        width: 20px;
        background-position: -771px 1px;
    }
    .carousel .left.sprite {
        width: 20px;
        background-position: -709px 1px;
    }
    #media {
        padding: 0 5px;
    }
    #contact .banner.contact .card .info {
        width: 160px;
        padding: 10px;
    }
    table {
        font-size: 10px;
        line-height: 14px
    }
    .post-more .content {
        min-width: 250px
    }
    .post-more .content h3 {
        font-size: 12px;
        line-height: 17px
    }
    .share {
        width: 110px
    }
    .share em {
        margin: 0
    }
    .co-products .card img {
        width: 140px;
        height: 99px
    }
    .co-products .card {
        width: 140px;
        height: 130px
    }
    .co-products .card .label h2 {
        font-size: 15px;
        line-height: 21px
    }
    .co-products .card .label {
        width: 118px;
        margin-left: -59px
    }
    .banner.three .card .label {
        width: 250px;
        height: 132px;
        bottom: -64px;
        margin-left: -125px;
        padding: 15px 10px
    }
    .banner.three .card .label h3 {
        font-size: 24px
    }
    .banner.two > .info {
        font-size: 12px;
        line-height: 16px;
        padding: 15px
    }
    #related-links {
        padding: 30px 10px 20px 10px
    }
    .banner .info h2 {
        font-size: 20px;
        line-height: 21px;
        padding: 0
    }
    .banner.one-b .info {
        font-size: 11px;
        line-height: 14px;
    }
    .card .label h2 {
        font-size: 22px;
        line-height: 24px;
    }
    #careers .card .label {
        font-size: 11px;
        line-height: 14px;
        padding: 20px;
    }
    .banner .triple .info h2 {
        font-size: 33px;
        line-height: 32px
    }
    .text-block.counter {
        display: block;
        margin: 0 auto
    }
    .text-block.counter {
        width: 149px
    }
    .counter .ball {
        width: 140px;
        height: 140px;
        padding: 41px 0
    }
    .related h4,
    #related-links .related.four h4 {
        font-size: 15px;
        line-height: 22px
    }
    #related-links .related .intro h4{
        font-size: 16px;
    }
    .card {
        margin: 40px 0 100px 0
    }
    .card .label {
        bottom: -67px
    }
    #slideshow .bubble {
        width: 316px;
        height: 316px;
        padding: 64px 73px 84px 45px;
        font-size: 14px;
        line-height: 18px;
        bottom: -90px;
        background-size:316px 316px;
    }
    #slideshow .bubble h1 {
        font-size: 34px;
        line-height: 29px
    }
    #slideshow .bubble p {
        padding-top: 10px
    }
    #media {
        padding: 0 5px
    }
    .button {
        font-size: 11px;
        padding: 4px 6px
    }
    .info .button {
        margin: 8px 0 0 0;
    }
    .staggered-box{
        margin: 0;
    }
    .staggered-box .info {
        width: 200px;
        font-size: 10px;
        line-height: 13px;
        top:30px;
    }
    .staggered-box > img {
        margin-right: -65px;
    }
    .staggered-box.two img {
        padding: 0 0 0 90px
    }
    #logo {
        padding: 41px 0 0 15px;
        height: 37px;
        width: 145px
    }
    #related-links .related {
        width: 98%;
        font-size: 10px;
        line-height: 13px
    }
    #footer #logo-w {
        left: 50%;
        margin-left: -70px
    }
    #footer .address {
        padding-top: 65px;
        width: 100%;
        text-align: center
    }
    #footer {
        padding: 25px 20px 165px 20px
    }
    #footer .peripherals {
        top: 210px
    }
    #footer .peripherals {
        padding: 0 5px
    }
    .case-studies .banner.three .card .label {
        height: 106px;
        bottom: -55px
    }
    body{
        font-size: 12px;
        line-height: 16px;
    }
    p {
        padding-top: 5px;
    }
    .executive-team .popup img {
      height: auto;
    }

    .factory-slide .card-block .info{
        padding: 15px;
        margin-top: -50px!important;
    }

    .stat-container .counter .ball{
        width: 110px;
        height:110px;
    }
}

@media screen and (max-width:340px) {
    .card-block.long-card.short-card .info{
        margin-top: -60px!important;
    }
    .sugar-functionality .headers .sugar-functionality-mobile .label {
        width: 290px;
        min-width: 290px;
        padding: 6px 38px 6px 140px;
        margin: 30px auto 35px auto;
    }

    .sugar-functionality .headers .sugar-functionality-mobile .label > img {
        margin-top: -48px;
        height: 96px;
        width: 140px;
    }
    .sugar-functionality .headers .sugar-functionality-mobile h2 em {
        right: 10px;
    }
    .button {
        font-size: 11px;
        padding: 3px 11px
    }
    .carousel .left.sprite, .carousel .right.sprite {
        margin-top: 15px;
    }
    #careers .card img {
        width: 235px;
        height: 171px;
    }

    #careers .card .number {
        left: auto!important;
        right: 235px!important;
        font-size: 80px;
        line-height: 80px;
    }

    #careers .card.odd .number {
        right: auto!important;
        left: 235px!important;
    }

    .sidebar #archiveTab {
        margin-left: -17px;
    }
    #title div {
        width: 294px;
        margin-left: -147px
    }
}

@page {
    size: 42cm 59.4cm;
    margin: 5mm
}

@media print {
    * {
        page-break-inside: auto
    }
    #header-dummy {
        display: none
    }
    #header {
        position: relative
    }
}


/*GENERAL - START*/
@font-face {
    font-family: 'FS Lola';
    src: url('../../../fonts/FSLola.eot');
    src: url('../../../fonts/FSLola.eot?#iefix') format('embedded-opentype'),
        url('../../../fonts/FSLola.woff2') format('woff2'),
        url('../../../fonts/FSLola.woff') format('woff'),
        url('../../../fonts/FSLola.ttf') format('truetype'),
        url('../../../fonts/FSLola.svg#FSLola') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Lola';
    src: url('../../../fonts/FSLola-Light.eot');
    src: url('../../../fonts/FSLola-Light.eot?#iefix') format('embedded-opentype'),
        url('../../../fonts/FSLola-Light.woff2') format('woff2'),
        url('../../../fonts/FSLola-Light.woff') format('woff'),
        url('../../../fonts/FSLola-Light.ttf') format('truetype'),
        url('../../../fonts/FSLola-Light.svg#FSLola-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Lola';
    src: url('../../../fonts/FSLola-Bold.eot');
    src: url('../../../fonts/FSLola-Bold.eot?#iefix') format('embedded-opentype'),
        url('../../../fonts/FSLola-Bold.woff2') format('woff2'),
        url('../../../fonts/FSLola-Bold.woff') format('woff'),
        url('../../../fonts/FSLola-Bold.ttf') format('truetype'),
        url('../../../fonts/FSLola-Bold.svg#FSLola-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Lola';
    src: url('../../../fonts/fslola-ExtraBold.eot');
    src: url('../../../fonts/fslola-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../../../fonts/fslola-ExtraBold.woff2') format('woff2'),
        url('../../../fonts/fslola-ExtraBold.woff') format('woff'),
        url('../../../fonts/fslola-ExtraBold.ttf') format('truetype'),
        url('../../../fonts/fslola-ExtraBold.svg#FSLola-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'FS Lola';
    src: url('../../../fonts/FSLola-Medium.eot');
    src: url('../../../fonts/FSLola-Medium.eot?#iefix') format('embedded-opentype'),
        url('../../../fonts/FSLola-Medium.woff2') format('woff2'),
        url('../../../fonts/FSLola-Medium.woff') format('woff'),
        url('../../../fonts/FSLola-Medium.ttf') format('truetype'),
        url('../../../fonts/FSLola-Medium.svg#FSLola-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

h6{
    margin: 0;
}
.hide,
.hidden{
    display: none!important;
}
.border-box{
    box-sizing: border-box;
}
.relative{
    position: relative;
}
.block{
    display: block;
}
.inline-block{
    display: inline-block;
}
.width100{
    width: 100%;
}
.absolute{
    position: absolute;
}
.left{
    float: left;
}
.right{
    float: right;
}
.width30{
    width: 30%;
}
.width33{
    width: 33.333%;
}
.width70{
    width: 70%;
}
.width50{
    width: 50%;
}
.width60{
    width: 60%;
}
.width100{
    width: 100%!important;
}
.width40{
    width: 40%;
}
.paddL40{
    padding-left: 40px;
}
.paddR40{
    padding-right: 40px;
}
.paddB20{
    padding-bottom: 20px;
}
.padd30v{
    padding-top: 30px;
    padding-bottom: 30px;
}
.padd40v{
    padding-top: 40px;
    padding-bottom: 40px;
}
.padd60v{
    padding-top: 60px;
    padding-bottom: 60px;
}
.padd35v{
    padding-top: 35px;
    padding-bottom: 35px;
}
.padd20v{
    padding-top: 20px;
    padding-bottom: 20px;
}
.paddB30{
    padding-bottom: 30px;
}
.paddT85{
    padding-top: 85px;
}
.wrapper1100{
    width: 1100px;
    max-width: 100%;
    margin: 0 auto;
}
.padd60v{
    padding-top: 60px;
    padding-bottom: 60px;
}
.padd120h{
    padding-left: 120px;
    padding-right: 120px;
}
.col-2{
    column-count: 2;
}
.sustainability-sprite{
    background: url(../../../images/svg-fallback/sustainability-sprites.png) 0 0 no-repeat;
    background: linear-gradient(transparent, transparent), url(../../../images/sustainability-sprites.svg) 0 0 no-repeat;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-size: auto 64px;
    vertical-align: middle;
}
/* GENERAL - END*/

.title-center{
    display: flex;
    justify-content: center;
}
#case-studies{
    background: url('../../../images/case-studies-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
#case-studies .card img{
    border-radius: 10px;
}
#case-studies .card em{
    width: 24px;
    height: 24px;
}
#case-studies .card .sustainability-sprite{
    background-size: auto 48px;
}
#case-studies .card.lightblue.our-people em{
    background-position: -48px 0;
}
#case-studies .card.lightblue.responsible-sourcing em{
    background-position: 0px 0;
}
#case-studies .card.lightblue.sustainable-agriculture em{
    background-position: -24px -24px;
}
#case-studies .card.lightblue.consuming-resources em{
    background-position: 0px -24px;
}
#case-studies .banner.three .card .label h3{
    color: rgb(101,179,46);
}
#case-studies .banner.three .card.our-people .label h3{
    color: #ffc900;
}
#case-studies .banner.three .card.responsible-sourcing .label h3{
    color: #23aeb7;
}
#case-studies .banner.three .card.sustainable-agriculture .label h3{
    color: #3d731f;
}
#case-studies .banner.three .card.consuming-resources .label h3{
    color: #b4cc04;
}
#case-studies .banner.two .card .label{
    border-radius: 10px;
}
#case-studies .banner.two .card .label h3{
    font-size: 18px;
    line-height: 20px;
}
#climate-change.col-2{
    column-gap: 100px;
}
#climate-change.consuming-resources.col-2{
    column-gap: 50px;
}
#climate-change.sustainable-agriculture .col-2{
    column-gap: 60px;
}
#climate-change.sustainable-agriculture .col-2 p strong{
    color: #65b32e;
}
#climate-change .wrapper1100{
    font-size: 15px;
    line-height: 20px;
}

#climate-change h5{
    color: #65b32e;
    font-weight: 600;
    font-size: 24px;
    line-height: 27px;
    padding-bottom: 15px;
}
#climate-change.our-people h5{
    padding-bottom: 0;
    color: #ffc900;
}
.our-people h3,
.our-people h4{
    color: #ffc900;
}
.consuming-resources h3,
.consuming-resources h4{
    color: #b4cc04;
}
.col-3{
    column-count: 3;
}
.overlay{
    display: block;
    z-index: 1;
}
.sustainability-child-hero img{
    width: auto!important;
    overflow: hidden;
    max-height: 260px;
}

/*HERO - START*/
.sustainability-child-icon{
    width: 128px;
    height: 128px;
    border-radius: 500px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(50%);
    z-index: 3;
    background-size: auto 256px;
}
    /*HERO - COLOURS - START*/
        .sustainability-child-icon.green{
            background-position: -640px -128px;
        }
        .sustainability-child-icon.lime{
            background-position: -768px -128px;
        }
        .sustainability-child-icon.teal{
            background-position: -768px 0px;
        }
        .sustainability-child-icon.yellow{
            background-position: -640px 0px;
        }
        .sustainability-child-icon.blue{
            background-position: -896px 0;
        }
        .overlay.green{
            background: rgba(61, 115, 31, 0.8);
        }
        .overlay.lime{
            background: rgba(180, 204, 4, 0.8);
        }
        .overlay.teal{
            background: rgba(35, 174, 183, 0.8);
        }
        .overlay.yellow{
            background: rgb(255, 201, 0, 0.8);
        }
        .overlay.blue{
            background: rgba(44, 100, 173, 0.8);
        }
    /*HERO - COLOURS - END*/
#title{
    background-position: 50% 0;
}
#title div.overlay-gradient{
    border-radius: 0px;
    height: 100%;
    width: 100%;
    bottom: auto;
    top: 0;
    left: 0;
    padding: 0;
    margin-left: 0;
    z-index: 2;
    background: linear-gradient(to right, #f1de00, #b4cc04, #65b32e);
    opacity: 0.6;
}
#title.special h1,
.page-title.special h1{
    font-size: 40px;
    line-height: 50px;
    color: #fff;
    z-index: 2;
}
.sustainability-child-hero,
.sustainability-hero{
    min-height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#title p,
.page-title p{
    font-size: 20px;
    line-height: 23px;
    color: #fff;
    z-index: 2;
}
#title div.page-title,
.page-title{
    background: none;
    top: 50%;
    left: 50%;
    height: auto;
    width: 100%;
    bottom: auto;
    margin-left: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    z-index: 3;
    text-align: center;
}
/*HERO - END*/

#sustainability-approach,
#our-progress{
    background-image: url('../../../images/approach-sustainability-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}
.overlay-box.yellow{
    background: rgba(251, 247, 191, 0.92);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
#sustainability-approach .wrapper1100,
#our-progress .wrapper1100{
    z-index: 2;
    position: relative;
}
#our-progress .wrapper1100{
    padding-top: 45px;
    padding-bottom: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#sustainable-future .content{
    padding-bottom: 50px;
    padding-top: 50px;
}
#sustainable-future{
    background: linear-gradient(to right, #fff 50%, #b7db9d);
}
.images.triple{
    margin: 0 0 0 auto;
    width: 55%;
    max-width: 585px;
    padding-left: 40px;
    box-sizing: border-box;
}
.images.triple img{
    border-radius: 10px;
    overflow: auto;
    box-shadow: 0px 2px 4px 1px #000;
}
.triple-1{
    overflow: visible;
    width: 225px;
    height: 165px;
    padding-left: 30px;
}
.triple-2{
    width: 150px;
    height: 220px;
    padding-right: 110px;
}
.triple-3{
    width: 185px;
    height: 120px;
    padding-top: 15px;
    padding-left: 80px;
}
#our-progress.msos-sustainability .triple-3{
    padding-top: 30px;
}
.msos-sustainability .wrapper1100 ul{
    margin: 0px;
}
.journey-inner.col-3{
    column-gap: 40px;
}
.journey-inner.col-3 img{
    margin-top: 55px;
}
.info{
    position: static;
    background: none;
    width: 45%;
    height: auto;
    padding: 0;
    padding-right: 10px;
}
.info h2,
#sustainability-approach h4,
h4.title-text,
#climate-change .info.left h4{
    text-align: left;
    background: -webkit-linear-gradient(left, #48731f, #a9c90a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    padding-bottom: 20px;
    display: inline-block;
}
h4{
    font-size: 32px;
    line-height: 40px;
}
.info h2{
    font-size: 50px;
    line-height: 60px;
    padding-bottom: 0;
}
.info h3{
    font-size: 20px;
    line-height: 24px;
    font-weight: 600;
    padding-bottom: 15px;
}
p,li{
    font-size: 18px;
    line-height: 23px;
    padding-top: 0;
    padding-bottom: 15px;
}
.info hr{
    border: none;
    width: 110px;
    height: 3px;
    background: linear-gradient(to right, #3d731f, #b3cc04);
    margin: 0;
    margin-top: 25px;
    margin-bottom: 25px;
}
.video{
    margin-top: 30px;
}
#sustainability-approach .width45{
    max-width: 500px;
}
.sustainability-link{
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 500px;
    outline: 3px solid transparent;
    outline-offset: -4px;
    background-size: auto 192px;
}
.sustainability-link p{
    text-align: center;
    font-size: 13px;
    line-height: 13px;
    padding-top: 28px;
    opacity: 0;
    transition: opacity 0.3s;
}
.sustainability-link:hover{
    background-image: none!important;
    background: #fff!important;
}
.sustainability-link:hover p{
    opacity: 1;
}
#sustainable-agriculture.sustainability-link{
    left: 120px;
    top: -30px;
    background-position: -480px -96px;
    color: #3d731f;
}
#sustainable-agriculture.sustainability-link:hover{
    border: 2px solid #3d731f;
}
#consuming-resources.sustainability-link{
    top: 155px;
    left: -30px;
    background-position: -576px -96px;
    color: #b4cc04;
}
#consuming-resources.sustainability-link:hover{
    border: 2px solid #b4cc04;
}
#responsible-sourcing.sustainability-link{
    top: 115px;
    right: -25px;
    background-position: -576px 0px;
    color: #23adb6;
}
#responsible-sourcing.sustainability-link:hover{
    border: 2px solid #23adb6;
}
#people-communities.sustainability-link{
    top: 345px;
    right: 50px;
    background-position: -480px 0;
    color: #ffc900;
}
#people-communities.sustainability-link:hover{
    border: 2px solid #ffc900;
}
.heading-image.accreditations-image img{
    border-radius: 0;
    box-shadow: 0px 0px 0px 0px;
}
.heading-image img{
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 8px 1px;
}
.heading-image{
    max-width: 622px;
}
.heading{
    padding-top: 50px;
}
#journey{
    background: linear-gradient(to bottom, #cbd9ec 33%, transparent 66%);
}
strong{
    font-weight: 600;
}
.diagram{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.diagram-inner{
    display: inline-block;
    text-align: center;
}
#slide-1{
    display: block;
}
.slideshow-slide{
    display: none;
}
.slideshow-line{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 60px;
}
.slideshow-line-inner{
    display: inline-block;
}
.slideshow-line-inner h4{
    display: inline-block;
    max-width: 250px;
    text-align: center;
    font-size: 30px;
    line-height: 38px;
}
.diagram-inner img{
    height: 100px;
    width: auto;
    display: block;
    margin-bottom: 15px;
    margin: 0 auto 15px auto;
}
.diagram-inner h3,
.diagram-inner h4,
.counter .ball em
{
    font-weight: 600;
}
.counter .ball em,
.counter .ball em.single{
    line-height: 40px;
    font-size: 40px;
}
.diagram-inner h4{
    font-size: 26px;
    line-height: 30px;
    padding: 0;
}
.diagram-inner p{
    font-size: 13px;
    line-height: 21px;
    padding-bottom: 0;
}
#key-focus-slideshow.responsible-sourcing,
#key-focus-slideshow.sustainable-agriculture{
    background: linear-gradient(to top, rgba(35, 174, 183, 0.15) 10%, transparent 33%)
}
#key-focus-slideshow.consuming-resources{
    background: linear-gradient(to top, rgba(180, 204, 4, 0.15) 10%, transparent 33%);
}
#key-focus-slideshow.our-people{
    background: linear-gradient(to top, rgba(255, 201, 0, 0.15) 10%, transparent 33%);
}
/*#key-focus-slideshow.sustainable-agriculture{
    background: linear-gradient(to top, rgba(180, 204, 4, 0.15) 10%, transparent 33%);
}*/
#key-focus-slideshow.sustainable-agriculture .timeline .timeline-section,
#key-focus-slideshow.responsible-sourcing .timeline .timeline-section{
    width: 33%;
}
.line-dot{
    width: 25px;
    height: 25px;
    margin: 0 auto;
    border-radius: 500px;
    margin-top: 10px;
}
.our-people .line-dot{
    background: #ffc900;
}
.consuming-resources .line-dot{
    background: #b4cc04;
}
.slideshow-video{
    padding-left: 30px;
    box-sizing: border-box;
}
.slideshow-video .video{
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #000;
    padding-top: 56.25%;
}
.slideshow-video iframe{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.slideshow-image img{
    border-radius: 15px;
}
.slideshow-image img{
    max-width: 450px;
}
.slideshow-copy h4{
    font-weight: 600;
    padding-bottom: 25px;
}
.slideshow-slides .arrow-left,
.slideshow-slides .arrow-right{
    height: 48px;
    width: 48px;
    position: absolute;
    top: 50%;
    cursor: pointer;
    background-size: auto 96px;
}
.slideshow-slides{
    position: relative;
}
.slideshow-slides .arrow-left{
    left: -96px;
    transform: translateY(-50%) scaleX(-1);
}
.slideshow-slides .arrow-right{
    right: -96px;
    transform: translateY(-50%);
}
.sustainability-related-container{
    display: flex;
    justify-content: space-between;
}
.sustainability-related-return a{
    display: inline-flex;
    gap: 20px;
    padding-top: 30px;
}
.sustainability-related-return .arrow img{
    width: 32px;
    height: auto;
}
.sustainability-related-return h5{
    line-height: 32px;
    font-size: 18px;
    background: -webkit-linear-gradient(right, #48731f, #a9c90a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    display: inline-block;
}
.sustainability-text{
    text-align: center;
    font-weight: 600;
}
.sustainability-related-inner{
    width: 20%;
}
.sustainability-related-inner{
    border-radius: 15px;
    box-shadow: 0px 3px 5px 1px #000;
    position: relative;
    background: #fff;
    transition: 0.3s;
}
.sustainability-related-inner:hover{
    color: #fff!important;
    outline: 2pxd solid #fff!important;
}
.sustainability-related-inner.blue{
    outline: 2px solid #2d67b2;
    color: #2d67b2;
}
.sustainability-related-inner.blue:hover{
    background: #2d67b2;
}
.sustainability-related-inner.yellow{
    outline: 2px solid #ffc900;
    color: #ffc900;
}
.sustainability-related-inner.yellow:hover{
    background: #ffc900;
}
.sustainability-related-inner.lime{
    outline: 2px solid #b4cc04;
    color: #b4cc04;
}
.sustainability-related-inner.lime:hover{
    background: #b4cc04;
}
.sustainability-related-inner.teal{
    outline: 2px solid #23aeb7;
    color: #23aeb7;
}
.sustainability-related-inner.teal:hover{
    background: #23aeb7;
}
.sustainability-related-inner.green{
    outline: 2px solid #3d731f;
    color: #3d731f;
}
.sustainability-related-inner.green:hover{
    background: #3d731f;
}
.sustainability-text p{
    padding-bottom: 0;
}
.sustainability-text{
    padding: 50px 0 15px 0;
}
#areas-of-focus h4.title-text{
    padding-bottom: 60px;
}
.sustainability-icon{
    position: absolute;
    width: 64px;
    height: 64px;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    border-radius: 500px;
    background-size: auto 128px;
}
.sustainability-related-inner .button-icon{
    width: 24px;
    height: 24px;
    margin: 0 auto;
    border-radius: 500px;
    display: block;
    background-size: auto 48px;
    margin-bottom: 15px;
}
.button-icon.teal{
    background-position: 0 0;
}
.button-icon.yellow{
    background-position: -48px 0px;
}
.button-icon.blue{
    background-position: -24px 0px;
}
.button-icon.green{
    background-position: -24px -24px;
}
.button-icon.lime{
    background-position: 0 -24px;
}
.sustainability-icon.sustainability-sprite.blue{
    background-position: -448px 0;
}
.sustainability-icon.sustainability-sprite.yellow{
    background-position: -320px 0px;
}
.sustainability-icon.sustainability-sprite.teal{
    background-position: -384px 0px;
}
.sustainability-icon.sustainability-sprite.lime{
    background-position: -384px -64px;
}
.sustainability-icon.sustainability-sprite.green{
    background-position: -320px -64px;
}
.sustainability-link-button{
    opacity: 0;
    width: 16px;
    height: 16px;
    background-size: auto 32px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
}
.sustainability-link:hover .sustainability-link-button{
    opacity: 1;
}
#people-communities .sustainability-link-button{
    background-position: -32px 0;
}
#consuming-resources .sustainability-link-button{
    background-position: 0px -16px;
}
#responsible-sourcing .sustainability-link-button{
    background-position: 0px 0;
}
#sustainable-agriculture .sustainability-link-button{
    background-position: -16px -16px;
}
#key-focus-slideshow .timeline{
    width: 100%;
    max-width: 100%;
}
#key-focus-slideshow .timeline .timeline-section{
    width: 25%;
    display: flex;
    align-items: end;
    justify-content: center;
}
#key-focus-slideshow .timeline-section h4{
    padding: 0;
    text-align: center;
    font-weight: 600;
}
#key-focus-slideshow.consuming-resources .timeline-section.on h4{
    color: #b4cc04;
}
#key-focus-slideshow .timeline-line{
    top: 91px;
}
#key-focus-slideshow .timeline-section{
    min-height: 65px;
}
#key-focus-slideshow em.sustainability-sprite{
    position: absolute;
    bottom: -38px;
    left: 50%;
    transform: translateX(-50%);
}
.factory-slides .factory-slide{
    width: 25%;
}
.factory-slides-container{
    width: 400%;
}
.slideshow-copy{
    text-align: left;
}
#our-progress .text-block.counter{
    width: auto;
    padding: 0;
    float: none;
}
#our-progress .ball{
    width: auto;
    height: auto;
    border: none;
    padding: 0;
    border-radius: 0;
}
#our-progress.msos-sustainability .col-2{
    column-gap: 30px;
}
#our-progress.msos-sustainability .col-2 h5{
    color: rgb(44, 100, 173);
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    padding-bottom: 15px;
    padding-top: 30px;
    margin-top: 30px;
}
.text-block{
    display: block;
}
.timeline .timeline-section.left em{
    margin: 2px 0 0 0;
}
.timeline .timeline-section.on em{
    border: 2px solid transparent;
}
#key-focus-slideshow .timeline .timeline-section.on em{
    background-size: auto 48px;
    width: 24px;
    height: 24px;
    border: none;
    background-color: #fff;
}
#key-focus-slideshow.consuming-resources .timeline .timeline-section em{
    background-color: #b4cc04;
}
#case-studies.consuming-resources .banner.two .card .label h3{
    color: #b4cc04;
}
#case-studies .banner.two .card .label h3{
    font-size: 13px;
    line-height: 15px;
}
.banner.two .card .label{
    height: 85px;
}
#case-studies.consuming-resources .card.lightblue em{
    background-position: 0 -24px;
}
#key-focus-slideshow em.sustainability-sprite.arrow-l,
#key-focus-slideshow em.sustainability-sprite.arrow-r{
    bottom: auto;
    top: 50%;
    width: 32px;
    height: 48px;
    background-size: auto 96px;
    cursor: pointer;
}
#key-focus-slideshow em.sustainability-sprite.arrow-l{
    left: -48px;
}
#key-focus-slideshow em.sustainability-sprite.arrow-r{
    transform: scaleX(-1) translateX(50%);
    right: -48px;
    left: auto;
}
#key-focus-slideshow .factory-content .factory-slides-wrapper{
    width: auto;
    max-width: 1100px;
}
#key-focus-slideshow .factory-slide .card-block{
    max-width: 1100px;
    padding-bottom: 0;
}
.card-block{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 20px 0;
}
/*SLIDESHOW - PAGE SPECIFIC COLOURING - START*/
    #key-focus-slideshow.consuming-resources .timeline .timeline-section.on em,
    #key-focus-slideshow.sustainable-agriculture .timeline .timeline-section.on em{
        background-position: -168px -24px;
        background-color: #fff;
    }
    #key-focus-slideshow.consuming-resources .timeline .timeline-line,
    #key-focus-slideshow.sustainable-agriculture .timeline .timeline-line{
        border-top: 2px solid #3d731f;
    }
    #key-focus-slideshow.consuming-resources em.sustainability-sprite.arrow-l,
    #key-focus-slideshow.consuming-resources em.sustainability-sprite.arrow-r,
    #key-focus-slideshow.sustainable-agriculture em.sustainability-sprite.arrow-l,
    #key-focus-slideshow.sustainable-agriculture em.sustainability-sprite.arrow-r{
        background-position: -537px -48px;
    }
    #key-focus-slideshow.consuming-resources .timeline .timeline-section.on h4,
    #key-focus-slideshow.sustainable-agriculture .timeline .timeline-section.on h4,
    #key-focus-slideshow.consuming-resources .timeline .timeline-section h4{
        color: #3d731f;
    }

    #key-focus-slideshow.consuming-resources .timeline .timeline-section.on em{
        background-position: -216px -24px;
    }
    #key-focus-slideshow.consuming-resources .timeline .timeline-line{
        border-top: 2px solid #b4cc04;
    }
    #key-focus-slideshow.consuming-resources em.sustainability-sprite.arrow-l,
    #key-focus-slideshow.consuming-resources em.sustainability-sprite.arrow-r{
        background-position: -537px 0px;
    }
    #key-focus-slideshow.consuming-resources .timeline .timeline-section.on h4,
    #key-focus-slideshow.consuming-resources .timeline .timeline-section h4{
        color: #b4cc04;
    }
    #key-focus-slideshow.consuming-resources .slideshow-copy h4.title-text{
        color: #b4cc04;
        background: #b4cc04;
        -webkit-background-clip: text;
    }

    #key-focus-slideshow.our-people .timeline .timeline-section.on em{
        background-position: -192px 0px;
    }
    #key-focus-slideshow.our-people .timeline .timeline-line{
        border-top: 2px solid #ffc900;
    }
    #key-focus-slideshow.our-people em.sustainability-sprite.arrow-l,
    #key-focus-slideshow.our-people em.sustainability-sprite.arrow-r{
        background-position: -489px 0px;
    }
    #key-focus-slideshow.our-people .timeline .timeline-section.on h4,
    #key-focus-slideshow.our-people .timeline .timeline-section h4,
    #key-focus-slideshow.our-people .factory-slides .slideshow-copy h4.title-text{
        color: #ffc900;
    }
    #key-focus-slideshow.our-people .factory-slides .slideshow-copy h4.title-text{
        background: -webkit-linear-gradient(left, #ffc900, #ffc900);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #key-focus-slideshow.responsible-sourcing .timeline .timeline-section.on em{
        background-position: -192px -24px;
    }
    #key-focus-slideshow.responsible-sourcing .timeline .timeline-line{
        border-top: 2px solid #23aeb7;
    }
    #key-focus-slideshow.responsible-sourcing em.sustainability-sprite.arrow-l,
    #key-focus-slideshow.responsible-sourcing em.sustainability-sprite.arrow-r{
        background-position: -489px -48px;
    }
    #key-focus-slideshow.responsible-sourcing .timeline .timeline-section.on h4,
    #key-focus-slideshow.responsible-sourcing .timeline .timeline-section h4{
        color: #23aeb7;
    }
    .timeline-section h4{
        font-size: 24px;
        line-height: 32px;
    }
    #key-focus-slideshow.sustainable-agriculture .timeline-section h4
    {
        color: #3d731f;
    }
    #key-focus-slideshow.sustainable-agriculture .slideshow-copy h4.title-text{
        color: #3d731f;
        background: #3d731f;
        -webkit-background-clip: text;
    }
    #key-focus-slideshow.responsible-sourcing .slideshow-copy h4.title-text{
        color: #23aeb7;
        background: #23aeb7;
        -webkit-background-clip: text;
    }
    #key-focus-slideshow.sustainable-agriculture{
        background: linear-gradient(to top, rgba(61, 115, 31, 0.15) 10%, transparent 33%);
    }
    .climate-change.breaker{
        height: 5px;
        background: #23aeb7;
    }
    #our-people.breaker{
        height: 5px;
        background: #ffc900;
    }
    .graphic{
        width: 350px;
        right: 0;
        opacity: 0.1;
        top: -35px;
    }
/*SLIDESHOW - PAGE SPECIFIC COLOURING - END*/
#journey strong{
    color: rgb(101,179,46);
}
#journey h5{
    font-size: 20px;
    line-height: 24px;
    color: rgb(101,179,46);
    font-weight: 600;
    padding-bottom: 15px;
}
.msos{
    min-height: 80px;
    position: relative;
    background-color: #2d67b2;
    transition: 0.3s;
}
.msos a{
    padding: 20px;
}
.msos h4{
    color: #fff;
    font-size: 24px;
    line-height: 32px;
    padding-left: 185px;
}
.msos:hover h4{
    color: #2d67b2;
}
.msos-logo{
    display: inline-block;
    position: absolute;
    width: 128px;
    height: 128px;
    top: -40px;
    z-index: 1;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
}
.msos-logo img{
    width: 100%;
}
.msos:hover{
    background: #fff;
}
.msos p{
    padding-bottom: 0;
    color: #fff;
    line-height: 25px;
    padding-left: 185px;
    padding-right: 50px;
    padding-top: 15px;
}
.msos:hover p{
    color: #2d66b1;
}
.sustainability-sprite.msos-logo{
    position: absolute;
    top: 50%;
    left: -2px;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    background-size: auto 128px;
    background-position: -448px 0;
    box-shadow: 0px 2px 4px 1px;
    border-radius: 32px;
    outline: 4px solid #fff;
    outline-offset: -4px;
}
.graphic-thumb{
    cursor: pointer;
}
.graphic.active{
    z-index: auto;
}
.graphic.close{
    position: absolute;
    width: 48px;
    height: 48px;
    top: -60px;
    right: 0;
    cursor: pointer;
    display: inline-block;
    background-size: auto 96px;
    vertical-align: middle;
    background-position: -626px -0px;
}
.graphic-popup-wrapper{
    display: none;
    z-index: 11;
    position: fixed;
    z-index: 10;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
    max-width: 1366px;
}
.graphic-popup-inner-wrapper{
    position: relative;
    width: 100%;
    left: 50%;
    top: 50%;
    outline: 2000px solid rgba(0, 0, 0, 0.75);
    transform: translateY(-50%) translateX(-50%);
    max-width: calc(100% - 50px);
}
.graphic-popup-inner-wrapper .inner iframe{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.graphic-popup-inner-wrapper .inner img{
    border-radius: 0px;
    display: block;
}
#related-links-sustainability .related{
    width: 322px;
    height: 222px;
    height: auto;
    font-size: 16px;
    vertical-align: top;
    line-height: 21px;
    text-align: left;
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    margin: 0 30px;
}
#related-links-sustainability .related:first-of-type{
    margin-left: 0;
}
#related-links-sustainability .related:last-of-type{
    margin-right: 0;
}
#related-links-sustainability .related img{
    width: 100%;
    height: auto;
}
#related-links-sustainability .related p{
    padding-bottom: 0;
    color: #fff;
    text-align: center;
}
#related-links-sustainability .related .intro{
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.msos-sustainability h3,
.msos-sustainability h4,
.msos-sustainability h5,
.msos-sustainability a,
.msos-sustainability strong{
    color: rgb(44, 100, 173)!important;
}
#our-progress.msos-sustainability .wrapper1100{
    display: block;
    color: rgb(44, 100, 173);
}
#our-progress.msos-sustainability h4{
    padding-bottom: 20px;
}
#our-progress.msos-sustainability .overlay-box.blue{
    background: rgba(255, 255, 255, 0.92);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
#case-studies .overlay-box-case.blue{
    background: #ecf8f9;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0.75;
}
#case-studies .padd20v{
    position: relative;
    z-index: 2;
}
#case-studies .title-center h4.title-text{
    padding-bottom: 0;
}
.sustainability-sprite.bs-swirl-device{
    width: 35%;
    height: 576px;
    max-width: 576px;
    background-size: auto 1152px;
    top: -125px;
    right: -100px;
    background-position: -6912px -576px;
}
#sustainability-future{
    z-index: 1;
}
#title{
    z-index: 2;
}
/*#key-focus-slideshow.consuming-resources,
#key-focus-slideshow.sustainable-agriculture,
#key-focus-slideshow.responsible-sourcing,
#key-focus-slideshow.our-people{
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.85) 100%, transparent), url(../../../images/approach-sustainability-bg.jpg);
}*/
/*#climate-change.sustainable-agriculture{
    background: linear-gradient(to bottom right, transparent 20%, #3d731f59 50%);
}
#climate-change.responsible-sourcing{
    background: linear-gradient(to bottom right, transparent 20%, #23aeb740 50%);
}
#climate-change.msos-sustainability{
    background: linear-gradient(to bottom right, transparent 20%, #2d66b152 50%);
}*/
#climate-change.responsible-sourcing.relative,
#climate-change.our-people.relative{
    z-index: 2;
    background: #fff;
}
#sustainable-future .content .triple .triple-2,
.triple-2{
    overflow: visible!important;
}
.images.triple{
    position: relative;
    z-index: 2;
}
#sustainability-approach strong{
    color: #65b32e;
}
#sustainability-approach h5{
    font-size: 20px;
    line-height: 25px;
    padding-bottom: 20px;
}
#sustainability-approach .width55.right a#consuming-resources p{
    padding-top: 23px;
}
#sustainability-approach .width55.right a#sustainable-agriculture p{
    padding-top: 30px;
}
#sustainability-approach .width55.right a#responsible-sourcing p{
    padding-top: 30px;
}
#sustainability-approach .width55.right a#people-communities p{
    padding-top: 23px;
}
.sustainability-link{
    box-sizing: border-box;
}
#related-links-sustainability img{
    border-radius: 10px;
    box-shadow: 0px 2px 4px 1px;
}
#related-links-sustainability a .overlay-effect{
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #65b32e 15%, transparent 50%), linear-gradient(to top, #f1de00 15%, transparent 50%);
    border-radius: 10px;
    opacity: 0.75;
}
/*.related .intro::after {
    content: "";
    width: 100px;
    height: 2px;
    position: absolute;
    background: #f1de00;
    left: 0;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}*/
#related-links-sustainability{
    background: linear-gradient(to bottom right, #f6f2c7, #e0f0d5);
}
#related-links-sustainability h4.title-text{
    padding-bottom: 40px;
}
.sustainable-agriculture .timeline .timeline-section em{
    background-color: #3d731f;
}
.consuming-resources .timeline .timeline-section em{
    background-color: #b4cc04;
}
.responsible-sourcing .timeline .timeline-section em{
    background-color: #23aeb7;
}
.our-people .timeline .timeline-section em{
    background-color: #ffc900;
}
#climate-change.msos-sustainability .col-2{
    column-gap: 50px;
}
#post-container h4.title-text{
    width: auto;
    margin-bottom: 20px;
    font-size: 32px;
    line-height: 40px;
}
#post-container h5{
    width: auto;
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 24px;
}
#post-container h5.green,
#post-container .post-short h3.sustainable-agriculture{
    color: #3d731f;
}
#post-container h5.lime,
#post-container .post-short h3.consuming-resources{
    color: #b4cc04;
}
#post-container h5.yellow,
#post-container .post-short h3.our-people{
    color: #ffc900;
}
#post-container h5.blue,
#post-container .post-short h3.msos{
    color: #2d66b1;
}
#post-container h5.teal,
#post-container .post-short h3.responsible-sourcing{
    color: #23aeb7;
}
#post-container hr{
    width: 120px;
    margin: 0 auto 0 0;
    height: 2px;
    border: none;
}
#post{
    width: 70%;
    padding: 0 100px 0 0;
}
#post-container .sidebar{
    width: 30%;
    padding: 0 00px 0 30px;
}
#post-container hr.green{
    background: #3d731f;
}
#post-container hr.lime{
    background: #b4cc04;
}
#post-container hr.yellow{
    background: #ffc900;
}
#post-container hr.teal{
    background: #23aeb7;
}
#post-container hr.blue{
    background: #2d66b1;
}
#post-container h2.cs,
#post-container h2{
    font-weight: 600;
    padding-bottom: 30px;
}
#post-container.case-study-green h2.cs,
#post-container.case-study-green h2{
    color: #3d731f;
}
#post-container.case-study-lime h2.cs,
#post-container.case-study-lime h2{
    color: #b4cc04;
}
#post-container.case-study-blue h2.cs,
#post-container.case-study-blue h2{
    color: #2d66b1;
}
#post-container.case-study-yellow h2.cs,
#post-container.case-study-yellow h2{
    color: #ffc900;
}
#post-container.case-study-teal h2.cs,
#post-container.case-study-teal h2{
    color: #23aeb7;
}
#post img{
    border-radius: 10px;
    box-shadow: 0px 2px 4px 1px;
    outline: none;
    margin-bottom: 40px;
}
#post.green{
    border-right: 3px solid #3d731f;
}
#post.lime{
    border-right: 3px solid #b4cc04;
}
#post.yellow{
    border-right: 3px solid #ffc900;
}
#post.teal{
    border-right: 3px solid #23aeb7;
}
#post.blue{
    border-right: 3px solid #2d66b1;
}
.case-study-icon.sustainability-child-icon{
    position: static;
    transform: none;
}
.case-study-icon.sustainability-child-icon{
    width: 96px;
    height: 96px;
    background-size: auto 192px;
    box-shadow: 0 0px 0px 0px;
    margin: 30px 10px 0 10px;
}
.case-study-icon.sustainability-child-icon:first-of-type{
    margin: 30px 10px 0 0;
}
.case-study-icon.sustainability-child-icon:last-of-type{
    margin: 30px 0 0 10px;
}
.case-study-icon.sustainability-child-icon.lime{
    background-position: -576px -96px;
}
.case-study-icon.sustainability-child-icon.green{
    background-position: -480px -96px;
}
.case-study-icon.sustainability-child-icon.yellow{
    background-position: -480px 0px;
}
.case-study-icon.sustainability-child-icon.blue{
    background-position: -576px 0;
}
.case-study-icon.sustainability-child-icon.teal{
    background-position: -576px 0px;
}
.case-side hr{
    margin-bottom: 40px;
}
.case-side div h2{
    padding-bottom: 10px;
}
.sidebar .post-short:last-of-type{
    padding-bottom: 75px;
}
.share strong{
    color: #000;
}
.green .share .sprite{
    width: 26px;
    height: 26px;
}
.green .share .sprite.twitter{
    background-position: -10px 3px;
}
.green .share .sprite.linkedin{
    background-position: -35px 3px;
}



@media screen and (min-width: 1900px){
    .sustainability-child-hero img{
        width: 100%!important;
        overflow: hidden;
        height: auto;
    }
}
@media screen and (max-width: 1366px){
    .sustainability-sprite.bs-swirl-device{
        right: -10px;
    }
}
@media screen and (max-width: 1350px){
    .case-study-icon.sustainability-child-icon {
        width: 48px;
        height: 48px;
        background-size: auto 96px;
    }
    .case-study-icon.sustainability-child-icon.green{
        background-position: -240px -48px;
    }
    .case-study-icon.sustainability-child-icon.lime{
        background-position: -240px -48px;
    }
    .case-study-icon.sustainability-child-icon.blue{
        background-position: -336px 0;
    }
    .case-study-icon.sustainability-child-icon.teal{
        background-position: -288px 0;
    }
    .case-study-icon.sustainability-child-icon.yellow{
        background-position: -240px 0px;
    }
}
@media screen and (max-width: 1250px){
    #key-focus-slideshow .factory-content .factory-slides-wrapper{
        padding-left: 60px;
        padding-right: 60px;
    }
    #key-focus-slideshow em.sustainability-sprite.arrow-l{
        left: 0px;
    }
    #key-focus-slideshow em.sustainability-sprite.arrow-r{
        right: 0px;
    }
}
@media screen and (max-width: 1200px){
    #key-focus-slideshow .timeline-section h4{
        font-size: 27px;
        line-height: 35px;
    }
    .msos{
        padding: 0 30px;
        box-sizing: border-box;
    }
    #case-studies .banner.three{
        padding: 0;
    }
}
@media screen and (max-width: 1150px){
    .wrapper1100{
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
    }
    .heading-copy.left{
        width: 50%;
    }
    .heading-image.right{
        width: 45%;
    }
    #related-links-sustainability .related{
        margin: 0 10px;
        width: 300px;
    }
}
@media screen and (max-width: 1100px){
    .images.triple{
        padding-left: 0;
    }
    .triple-3{
        padding-top: 35px;
    }
}
@media screen and (max-width: 1023px){
    .msos .msos-logo{
        display: none;
    }
    .msos p,
    .msos h4{
        padding-left: 0;
        padding-right: 0;
    }
    .sustainability-child-hero{
        min-height: 140px;
    }
    #our-progress.msos-sustainability .images{
        padding-bottom: 35px;
    }
    #key-focus-slideshow .timeline-section h4{
        font-size: 22px;
        line-height: 30px;
    }
    .card-block{
        padding: 55px 0;
    }
    .info,
    .images{
        width: 100%;
        float: none;
        padding-right: 0;
    }
    .images{
        margin: 0 auto;
        padding-top: 30px;
    }
    .images-right-txt-left{
        display: flex;
        flex-direction: column-reverse;
    }
    #sustainability-approach .wrapper1100 .width45.left,
    #sustainability-approach .wrapper1100 .width55.right{
        float: none;
        width: 100%;
        margin: 0 auto;
    }
    #sustainability-approach .wrapper1100 .width55.right{
        width: 443px;
        margin-top: 70px;
    }
    #sustainability-approach .width45{
        max-width: none;
    }
    .col-3{
        column-count: 2;
        column-gap: 50px;
    }
    #climate-change.col-2{
        column-gap: 25px;
    }
    #climate-change.wrapper1100.paddB30,
    #climate-change.responsible-sourcing.paddB30,
    #climate-change.sustainable-agriculture.paddB30,
    #climate-change.msos-sustainability.paddB30{
        padding-bottom: 10px;
    }
    #climate-change.wrapper1100.paddT85,
    #climate-change.responsible-sourcing.paddT85,
    #climate-change.sustainable-agriculture.paddT85,
    #climate-change.msos-sustainability.paddT85{
        padding-top: 50px;
    }
    .heading-copy,
    .heading-image{
        width: 100%!important;
        float: none;
        margin: 0 auto;
    }
    #our-progress .wrapper1100{
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #journey br{
        display: none;
    }
    .heading{
        padding-top: 25px;
    }
    #related-links-sustainability .related{
        width: 250px;
        margin: 0 5px;
    }
    #our-progress .wrapper1100{
        flex-direction: column;
        gap: 40px;
    }
    #our-progress .wrapper1100 .diagram-intro-copy,
    #our-progress .wrapper1100 .diagram{
        width: 100%;
        float: none;
    }
    #our-progress .wrapper1100 .diagram.width60{
        width: 600px;
    }
    .slideshow-image{
        padding-left: 30px;
        box-sizing: border-box;
    }
    #key-focus-slideshow em.sustainability-sprite.arrow-l,
    #key-focus-slideshow em.sustainability-sprite.arrow-r{
        top: 0;
        z-index: 2;
    }
    #key-focus-slideshow .factory-content .factory-slides-wrapper{
        padding-left: 0;
        padding-right: 0;
    }
    .sustainability-related-inner{
        width: 23%;
    }
    #title div.page-title,
    .page-title{
        width: 100%;
    }
    #title h1,
    .page-title h1{
        font-size: 40px;
        line-height: 45px;
    }
    .page-title h1 br{
        display: none;
    }
    .sustainability-child-hero img{
        width: 100%!important;
        min-height: 0px!important;
        height: auto;
    }
    .sustainability-child-icon{
        width: 64px;
        height: 64px;
        background-size: auto 128px;
    }
    .sustainability-child-icon.green{
        background-position: -320px -64px;
    }
    .sustainability-child-icon.yellow{
        background-position: -320px 0;
    }
    .sustainability-child-icon.teal{
        background-position: -384px 0;
    }
    .sustainability-child-icon.blue{
        background-position: -448px 0;
    }
    .sustainability-child-icon.lime{
        background-position: -384px -64px;
    }
    .paddT120{
        padding-top: 60px;
    }
    .paddB60{
        padding-bottom: 30px;
    }
    #key-focus-slideshow .factory-slide .card-block{
        padding: 70px 0px 55px 0;
    }
    .msos-sustainability .col-2{
        column-count: 1;
    }
    .images.triple{
        margin: 0 auto;
        width: 100%;
        max-width: 560px;
    }
    .sustainability-sprite.bs-swirl-device{
        height: 432px;
        max-width: 432px;
        background-size: auto 864px;
        right: 0;
        background-position: -5184px -432px;
    }
    #climate-change .col-2{
        column-count: 1;
    }
    #post{
        width: 100%;
        float: none;
        border-right: 0!important;
        padding: 0;
    }
    #post-container .sidebar{
        width: 100%;
        float: none;
        padding: 0;
    }
}
@media screen and (max-width: 900px){
    #key-focus-slideshow .factory-slide .card-block{
        flex-direction: column-reverse;
    }
    .slideshow-image.width50,
    .slideshow-copy.width50,
    .slideshow-video.width50,
    .factory-slide .card-block{
        width: 100%;
    }
    .factory-slide .card-block img{
        max-width: none!important;
    }
    .slideshow-image,
    .slideshow-video{
        padding-left: 0;
        padding-top: 30px;
    }
}
@media screen and (max-width: 850px){
    #related-links-sustainability .related{
        width: 200px;
    }
    #related-links-sustainability .related .intro{
        top: 10px;
    }
    #related-links-sustainability .related p{
        font-size: 13px;
        line-height: 16px;
    }
    #key-focus-slideshow .timeline-section h4{
        font-size: 20px;
        line-height: 24px;
    }
    #key-focus-slideshow .timeline-line{
        top: 63px;
    }
    #key-focus-slideshow .timeline-section{
        min-height: 45px;
    }
    #key-focus-slideshow em.sustainability-sprite{
        bottom: -32px;
    }
    .timeline{
        padding-bottom:  0 0 50px 0;
    }
    .card-block{
        padding: 25px 0;
    }
}
@media screen and (max-width: 820px){
    .sustainability-related-container{
        row-gap: 60px;
        flex-wrap: wrap;
    }
    .sustainability-related-inner{
        width: 48%;
    }
}
@media screen and (max-width: 800px){
    .sustainability-child-hero{
        min-height: 105px;
    }
    #climate-change.col-2{
        column-gap: 30px;
    }
    .paddB60{
        padding-bottom: 15px;
    }
    .paddT120{
        padding-top: 45px;
    }
    #title h1,
    .page-title h1{
        font-size: 30px;
        line-height: 35px;
    }
    .sustainability-child-icon{
        width: 48px;
        height: 48px;
        background-size: auto 96px;
    }
    .sustainability-child-icon.green{
        background-position: -240px -48px;
    }
    .sustainability-child-icon.lime{
        background-position: -288px -48px;
    }
    .sustainability-child-icon.teal{
        background-position: -288px 0;
    }
    .sustainability-child-icon.yellow{
        background-position: -240px 0;
    }
    .sustainability-child-icon.blue{
        background-position: -336px 0;
    }
    .triple-3, .banner .triple-3, .home .triple-3{
        height: 145px!important;
    }
}
@media screen and (max-width: 750px){
    #key-focus-slideshow .timeline-section h4{
        font-size: 13px;
        line-height: 17px;
    }
}
@media screen and (max-width: 728px){
    #title.sustainability-hero img{
        left: auto;
        margin-left: 0;
    }
    .col-3{
        column-gap: 25px;
    }
    .msos-logo{
        width: 96px;
        height: 96px;
        top: -25px;
    }
    .msos{
        padding: 0 15px;
    }
}
@media screen and (max-width: 680px){
    #related-links-sustainability .related{
        width: 100%;
        margin-top: 40px;
    }
    #related-links-sustainability .related:first-of-type{
        margin-top: 0;
    }
    #related-links-sustainability .related .intro{
        top: 30px;
    }
    #related-links-sustainability .related .intro p{
        font-size: 14px;
        line-height: 17px;
    }
}
@media screen and (max-width: 650px){
    .col-3{
        column-count: 1;
    }
    .diagram{
        flex-wrap: wrap;
        row-gap: 40px;
    }
    .diagram-inner{
        width: 50%;
    }
    #our-progress.sustainable-agriculture .diagram{
        justify-content: center;
    }
    #our-progress .wrapper1100 .diagram.width60{
        width: 100%;
    }
    h4.title-text{
        font-size: 26px;
        line-height: 34px;
    }
    .msos{
        min-height: 0px;
    }
    .msos-logo{
        width: 64px;
        height: 64px;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    .msos h4{
        font-size: 18px;
        line-height: 26px;
    }
}
@media screen and (max-width: 640px){
    #key-focus-slideshow .slideshow-image img{
        left: 0!important
    }
}
@media screen and (max-width: 600px){
    #climate-change.col-2{
        padding-top: 20px;
        padding-bottom: 20px;
        column-count: 1;
    }
    .sustainability-child-icon{
        display: none;
    }
    .case-study-icon.sustainability-child-icon{
        display: inline-block;
    }
}
@media screen and (max-width: 550px){
    .sustainability-sprite.msos-logo{
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    #sustainability-approach .wrapper1100 .width55.right{
        float: none;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    #sustainability-approach .width55.right img{
        display: none;
    }
    #sustainability-approach .width55.right a{
        position: static;
    }
    #sustainability-approach .width55.right a:first-of-type{
        margin-left: 0;
    }
    #sustainability-approach .width55.right a:last-of-type{
        margin-right: 0;
    }
    .sustainability-related-inner{
        width: 100%;
    }
}
@media screen and (max-width: 540px){
    #key-focus-slideshow em.sustainability-sprite.arrow-l,
    #key-focus-slideshow em.sustainability-sprite.arrow-r{
        display: none;
    }
    #key-focus-slideshow .factory-slide .card-block{
        padding: 0 0 0px 0;
    }
    .graphic{
        display: none;
    }
}
@media screen and (max-width: 500px){
    #video{
        margin-top: 103px;
    }
    .info h2{
        font-size: 30px;
        line-height: 40px;
    }
    #title h1,
    .page-title h1{
        font-size: 20px;
        line-height: 25px;
    }
    #our-progress.sustainable-agriculture .diagram .diagram-inner{
        width: 100%;
    }
}
@media screen and (max-width: 468px){
    .triple-3, .banner .triple-3, .home .triple-3{
        height: 115px!important;
    }
    .sustainability-related-return .arrow img{
        width: 16px;
        height: 16px;
    }
    .sustainability-related-return h5{
        font-size: 15px;
        line-height: 16px;
    }
}