html {
font-family: sans-serif;
line-height: 1.15;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}
body {
margin: 0; background:#333
}
a {
background-color: transparent
}
a:active, a:hover {
outline-width: 0
}
small {
font-size: 80%
}
img {
border-style: none
}
svg:not(:root) {
overflow: hidden
}
html {
font-size: 62.5%;
color: #333
}
h1{ font-size:50px !important}
@media only screen and (min-width:2000px) {
html {
font-size: 100%
}
}
p, li, dl, address {
font-size: 1.5rem;
margin: 0 0 2rem;
line-height: 2.3rem
}
p.lead {
font-size: 2rem
}
address {
font-style: normal
}
a {
color: inherit;
text-decoration: none
}
a:hover {
text-decoration: none
}
.link-reset {
color: inherit;
text-decoration: none
}
ul, ol {
margin: 0;
padding: 0 0 0 2rem
}
ul ul, ol ol, ul ol, ol ul {
padding: 1.5rem 0 0 4rem
}
ol ol {
list-style: lower-roman
}
li li {
font-size: 1rem
}
nav li {
list-style: none
}
.reset-list {
list-style: none;
margin: 0;
padding: 0
}
hr {
border: 0;
border-top: 1px solid #ccc;
margin: 3rem 0
}
img {
max-width: 100%;
height: auto
}
html {
box-sizing: border-box
}
*, *:before, *:after {
box-sizing: inherit
}
.off-canvas-container {
padding-top: 5rem
}
@media only screen and (min-width:1024px) {
.off-canvas-container {
padding-top: 0
}
}
.preload * {
transition: none!important
}
img {
image-rendering: auto
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px
}
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto
}
.clearfix:before, .clearfix:after {
content: " ";
display: table
}
.clearfix:after, .clear-both {
clear: both
}
.hide {
display: none
}
.text-align-right {
text-align: right
}
.preload * {
-webkit-transition: none!important;
-moz-transition: none!important;
-ms-transition: none!important;
-o-transition: none!important
}
.relative {
position: relative
}
.form-elements {
margin: 0 0 20px
}
fieldset {
border: none;
border-bottom: 1px solid #ccc;
margin: 0 0 20px;
padding: 0 0 10px
}
legend {
font-size: 1.4em;
margin: 0 0 20px;
border-bottom: 1px solid #ccc;
padding: 0 0 10px;
display: block;
width: 100%
}
label {
display: block;
margin: 0 0 3px
}
label.has-error {
color: #ff665a
}
.lg-input {
font-size: 2em
}
@media only screen and (min-width:480px) {
.sm-input {
font-size: 1.1em
}
}
@media only screen and (min-width:1024px) {
.form-inline p, .form-inline legend {
display: inline-block;
margin: 0 10px 0 0
}
.form-inline label {
display: inline-block;
padding: 0 3px 0 0
}
.form-inline input {
width: auto!important
}
.form-inline fieldset {
border: none
}
.form-inline legend {
width: auto;
float: left;
border: none;
padding: 12px 0 0
}
.form-horizontal label {
display: inline-block;
width: 200px;
text-align: right;
padding-right: 10px
}
.form-horizontal .checkbox label, .form-horizontal .radio label {
text-align: left
}
.form-horizontal .checkbox, .form-horizontal .radio {
padding-left: 204px
}
}
input, textarea, select {
-moz-appearance: none;
-webkit-appearance: none
}
textarea {
height: 100px;
resize: vertical
}
select {
position: relative;
background: #fff url(https://www.digitalmarmalade.co.uk/vendor/dm/img/xselect-arrow.png.pagespeed.ic.mlWhl6wvww.png) no-repeat center right 5px;
border: 1px solid #ccc;
padding: 0 30px 0 10px
}
.standard-form-control {
border: 1px solid #ccc;
padding: 10px;
background: #fff;
transition: border-color .2s, box-shadow .2s;
max-width: 400px;
width: 100%;
outline-width: 0
}
em.has-error {
font-style: normal;
color: #ff665a;
font-size: 75%;
padding: 3px 0 0;
position: absolute;
left: 0;
bottom: -7px;
background: #fff
}
textarea+em.has-error {
vertical-align: top
}
.summary-of-errors {
color: #ff665a
}
.form-has-error {
position: relative
}
@media only screen and (max-width:550px) {
.standard-form-control {
font-size: 1.14em
}
}
.input-focus-expand {
display: block;
position: relative;
border: none;
border-bottom: 1px solid #ccc;
max-width: 400px
}
.input-focus-expand .standard-form-control {
border: none
}
.input-focus-expand--decoration {
position: absolute;
display: block;
left: 0;
right: 100%;
bottom: 0;
height: 3px;
background: #79dce8;
transition: all .25s ease
}
.input-focus-expand :focus+.input-focus-expand--decoration {
left: 0;
right: 0;
max-width: 400px
}
.animated-label {
position: relative;
padding-top: 10px
}
.animated-label label {
position: absolute;
left: 10px;
top: 20px;
background: #fff;
transition: all .25s;
padding-right: 5px
}
.animated-label ::-webkit-input-placeholder {
color:#fff
}
.animated-label :-ms-input-placeholder {
color:#fff
}
.animated-label ::placeholder {
color:#fff
}
.animated-label :valid+label, .animated-label :focus+label {
left:0;
top:0;
font-size:75%
}
.help-block, .help-inline {
color: #666
}
.help-block {
display: block;
padding: 4px 0 0
}
.help-inline {
display: inline-block;
margin: 0 0 0 10px
}
body {
-webkit-animation: bugfix infinite 1s
}
@-webkit-keyframes bugfix {
from {
padding: 0;
}
to {
padding: 0;
}
}
input+label {
display: inline-block
}
.checkbox [type="checkbox"] {
position: absolute;
left: -9999px
}
.checkbox [type="checkbox"]+label {
position: relative;
padding-left: 25px;
cursor: pointer
}
.checkbox [type="checkbox"]+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 1px solid #ccc;
background: #fff;
border-radius: 0;
transition: border-color .2s, box-shadow .2s
}
.checkbox [type="checkbox"]+label:after {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 12px;
height: 12px;
text-align: center;
color: #79dce8;
transition: all .2s;
display: block;
background: #79dce8;
border-radius: 0
}
.checkbox [type="checkbox"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0)
}
.checkbox [type="checkbox"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
.checkbox :focus+label::before {
border-color: #79dce8;
box-shadow: 0 0 10px rgba(0,0,0,.2)
}
.radio [type="radio"]+label {
display: inline-block
}
.radio [type="radio"] {
position: absolute;
left: -9999px
}
.radio [type="radio"]+label {
position: relative;
padding-left: 25px;
cursor: pointer
}
.radio [type="radio"]+label:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 1px solid #ccc;
background: #fff;
border-radius: 50%;
transition: border-color .2s, box-shadow .2s
}
.radio [type="radio"]+label:after {
content: '';
position: absolute;
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #79dce8;
transition: all .2s
}
.radio [type="radio"]:not(:checked) + label:after {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0)
}
.radio [type="radio"]:checked+label:after {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1)
}
.radio [type="radio"]:checked:focus + label:before, [type="radio"]:not(:checked):focus + label:before {
outline: none
}
.radio :focus+label::before {
border-color: #79dce8;
box-shadow: 0 0 10px rgba(0,0,0,.2)
}
.radio-inline p, .checkbox-inline p {
display: inline-block;
margin-right: 10px;
margin-bottom: 20px
}
.checkbox-switch [type="checkbox"] {
position: absolute;
left: -9999px
}
.checkbox-switch [type="checkbox"]+label {
position: relative;
padding-left: 70px;
cursor: pointer
}
.checkbox-switch__label {
margin: 0;
position: relative;
height: 30px;
line-height: 30px
}
.checkbox-switch__inner {
display: block;
position: absolute;
left: 0;
top: 0;
height: 30px;
width: 65px;
overflow: hidden;
border-radius: 15px;
background: #ff665a
}
.checkbox-switch__inner:before, .checkbox-switch__inner:after {
display: block;
position: absolute;
top: 0;
height: 30px;
width: 65px;
color: #fff;
font-weight: 700;
padding: 0 10px;
transition: all .25s;
line-height: 30px;
box-shadow: inset 0 0 2px rgba(0,0,0,.3);
border-radius: 15px
}
.checkbox-switch__inner:before {
content: 'OFF';
left: 0;
background: #ff665a;
text-align: left
}
.checkbox-switch__inner:after {
content: 'ON';
left: 65px;
background: #79dce8;
text-align: right
}
:checked+label .checkbox-switch__inner:before {
left: -65px
}
:checked+label .checkbox-switch__inner:after {
left: 0
}
.checkbox-switch__handle {
position: absolute;
display: block;
background: #fff;
height: 16px;
width: 16px;
border-radius: 50%;
left: 43px;
top: 50%;
margin: -8px 0 0;
transition: all .25s;
box-shadow: 0 0 2px rgba(0,0,0,.4)
}
:checked+label .checkbox-switch__handle {
left: 6px
}
.radio-switch [type="radio"] {
position: absolute;
left: -9999px
}
.radio-switch [type="radio"]+label {
position: relative;
padding-left: 70px;
cursor: pointer
}
.radio-switch__label {
margin: 0;
position: relative;
height: 30px;
line-height: 30px
}
.radio-switch__inner {
display: block;
position: absolute;
left: 0;
top: 0;
height: 30px;
width: 65px;
overflow: hidden;
border-radius: 15px;
background: #ff665a
}
.radio-switch__inner:before, .radio-switch__inner:after {
display: block;
position: absolute;
top: 0;
height: 30px;
width: 65px;
color: #fff;
font-weight: 700;
padding: 0 10px;
transition: all .25s;
line-height: 30px;
box-shadow: inset 0 0 2px rgba(0,0,0,.3);
border-radius: 15px
}
.radio-switch__inner:before {
content: 'OFF';
left: 0;
background: #ff665a;
text-align: left
}
.radio-switch__inner:after {
content: 'ON';
left: 65px;
background: #79dce8;
text-align: right
}
:checked+label .radio-switch__inner:before {
left: -65px
}
:checked+label .radio-switch__inner:after {
left: 0
}
.radio-switch__handle {
position: absolute;
display: block;
background: #fff;
height: 16px;
width: 16px;
border-radius: 50%;
left: 43px;
top: 50%;
margin: -8px 0 0;
transition: all .25s;
box-shadow: 0 0 2px rgba(0,0,0,.4)
}
:checked+label .radio-switch__handle {
left: 6px
}
.radio-switch :focus+label .radio-switch__inner, .checkbox-switch :focus+label .checkbox-switch__inner {
box-shadow: 0 0 10px rgba(0,0,0,.4)
}
.standard-form-control:disabled {
opacity: .3
}
.js .inputfile {
width: .1px;
height: .1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1
}
.inputfile+label {
color: #fff;
background-color: #333;
display: inline-block;
padding: 10px
}
.inputfile+label svg {
fill: currentColor;
margin-right: 10px
}
.inputfile:focus+label, .inputfile+label:hover {
background-color: #006778
}
.inputfile+label {
cursor: pointer
}
.inputfile:focus+label, .inputfile.has-focus+label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px
}
.inputfile+label * {
pointer-events: none
}
.no-js .inputfile+label {
display: none
}
@media only screen and (max-width:768px) {
.page-heading__search-form .icon-form-control {
width: 100%
}
.section h2 {
font-size:24px;
color: #222;
line-height: 200%
}
}
@media only screen and (min-width:768px) {
.page-heading__search-form {
position: absolute;
right: 0;
top: 0
}
}
.icon-form-control {
display: table;
position: relative;
border: 1px solid #ccc;
padding-right: 40px;
border-radius: 4px;
overflow: hidden
}
.icon-form-control svg {
height: 16px;
width: 16px
}
.icon-form-control button {
position: absolute;
right: 1px;
top: 1px;
bottom: 1px;
width: 40px;
background: none;
border: none;
background: #ededed
}
.icon-form-control input {
border: none;
background: none
}
.site-header {
background: #f17b2d;
height: 50px;
padding: 1rem;
transition: background-color .5s ease
}
.dm-logo-holder {
text-align: center
}
.social-icons {
display: -webkit-box;
display: flex;
margin: 0 2rem 0 4.2rem
}
.social-icons li {
text-align: left;
-webkit-box-flex: 1;
flex: 1
}
.social-icons svg {
width: 3rem;
height: 3rem
}
.social-icons .st0 {
fill: #fff
}
.social-icons .st1 {
fill: #f17b2d;
transition: all .5s ease
}
@media only screen and (max-width:1023px) {
.site-header {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 100
}
.logo-text {
display: none
}
.dm-logo-holder {
height: 4rem;
overflow: hidden
}
.dm-logo-holder svg {
width: 6.4rem;
height: 6rem
}
}
@media only screen and (min-width:1024px) {
.site-header {
position: fixed;
left: 0;
top: 0;
width: 20rem;
height: 100%;
z-index: 2300;
padding: 4rem 0
}
body {
margin:0 auto
}
.main-navigation {
position: absolute;
left: 0;
bottom: 2rem;
width: 100%
}
.dm-logo-holder svg {
width: 10.8rem;
height: 10.2rem
}
.social-icons {
margin: 0;
padding: 0 2rem 0 4.2rem;
width: 100%
}
}
.site-footer {
background: #111;
color: #fff;
padding: 5rem 2rem;
position: relative
}
.address-company-name {
font-weight: 700;
font-size: 1.4rem
}
.address-contact-methods a {
display: table;
padding:.5rem 1rem;
background: #f17b2d;
font-size: 1.4rem;
font-weight: 700
}
.company-address p {
font-size: 1.2rem;
line-height: 1.4
}
.footer-legal-links {
display: block;
padding: 1rem 0 2rem
}
.footer-legal-links a {
text-decoration: underline
}
.footer-legal-links a:hover {
text-decoration: none
}
@media only screen and (min-width:768px) {
.site-footer {
padding: 3rem 5rem
}
.company-address {
min-height: 10rem
}
.address-contact-methods {
position: absolute;
right: 5rem;
top: 3rem;
text-align: right
}
.address-contact-methods a {
margin-left: auto;
font-size: 1.6rem
}
.address-company-name {
font-size: 1.8rem
}
.company-address p {
font-size: 1.5rem
}
.footer-legal-text {
float: left;
max-width: 75%
}
.footer-legal-links {
float: right;
padding: 0
}
}
.section {
padding: 0
}
.section--primary {
background: #003b45;
color: #fff
}
.section--grey {
background: #ededed
}
.holder {
max-width: 480px;
margin: 0 auto;
padding: 0 35px
}
[class*="-col-"] {
float:left;
padding-left:35px;
width:100%
}
.xs-col-1-1 {
width: 100%
}
.xs-col-1-2 {
width: 50%
}
.xs-col-1-3 {
width: 33.33%
}
.xs-col-2-3 {
width: 66.66%
}
.xs-col-1-4 {
width: 25%
}
.xs-col-3-4 {
width: 75%
}
.xs-push-1-4 {
margin-left: 25%
}
.xs-push-3-4 {
margin-left: 75%
}
.xs-push-1-2 {
margin-left: 50%
}
.xs-push-1-3 {
margin-left: 33.33%
}
.xs-push-2-3 {
margin-left: 66.66%
}
.row {
margin-left: -35px
}
.row:before, .row:after {
content: "";
display: table
}
.row:after {
clear: both
}
.row+.row {
margin-top: 35px
}
.centre-col {
margin-left: auto;
margin-right: auto;
float: none!important
}
.xs-width-1-1 {
width: 100%
}
.xs-width-1-2 {
width: 50%
}
.xs-width-1-3 {
width: 33.33%
}
.xs-width-1-4 {
width: 25%
}
.panel {
border: 1px solid #999;
padding: 15px
}
@media only screen and (min-width:480px) {
.holder {
max-width: 768px
}
.sm-col-1-1 {
width: 100%
}
.sm-col-1-2 {
width: 50%
}
.sm-col-1-3 {
width: 33.33%
}
.sm-col-1-4 {
width: 25%
}
.sm-col-3-4 {
width: 75%
}
.sm-col-1-5 {
width: 20%
}
.sm-col-2-5 {
width: 40%
}
.sm-col-3-5 {
width: 60%
}
.sm-col-4-5 {
width: 80%
}
.sm-push-1-4 {
margin-left: 25%
}
.sm-push-3-4 {
margin-left: 75%
}
.sm-push-1-2 {
margin-left: 50%
}
.sm-push-1-3 {
margin-left: 33.33%
}
.sm-push-2-3 {
margin-left: 66.66%
}
.sm-push-1-5 {
margin-left: 20%
}
.sm-push-2-5 {
margin-left: 40%
}
.sm-width-1-1 {
width: 100%
}
.sm-width-1-2 {
width: 50%
}
.sm-width-1-3 {
width: 33.33%
}
.sm-width-1-4 {
width: 25%
}
}
@media only screen and (min-width:768px) {
.holder {
max-width: 1024px;
padding: 0 35px
}
.row {
margin-left: -35px
}
.row+.row {
margin-top: 35px
}
.panel {
padding: 20px
}
[class*="-col-"] {
float:left;
padding-left:35px
}
.md-col-1-1 {
width: 100%
}
.md-col-1-2 {
width: 50%
}
.md-col-1-3 {
width: 33.33%
}
.md-col-2-3 {
width: 66.66%
}
.md-col-3-4 {
width: 75%
}
.md-col-1-4 {
width: 25%
}
.md-col-1-5 {
width: 20%
}
.md-col-2-5 {
width: 40%
}
.md-col-3-5 {
width: 60%
}
.md-col-4-5 {
width: 80%
}
.md-col-1-6 {
width: 16.66%
}
.md-col-5-6 {
width: 83.3%
}
.md-col-1-7 {
width: 14.28%
}
.md-col-2-7 {
width: 28.56%
}
.md-col-3-7 {
width: 42.84%
}
.md-col-4-7 {
width: 57.12%
}
.md-col-5-7 {
width: 71.4%
}
.md-col-6-7 {
width: 85.68%
}
.md-col-1-8 {
width: 12.5%
}
.md-col-3-8 {
width: 37.5%
}
.md-col-5-8 {
width: 62.5%
}
.md-col-7-8 {
width: 87.5%
}
.md-push-1-4 {
margin-left: 25%
}
.md-push-3-4 {
margin-left: 75%
}
.md-push-1-2 {
margin-left: 50%
}
.md-push-1-3 {
margin-left: 33.33%
}
.md-push-2-3 {
margin-left: 66.66%
}
.md-push-1-5 {
margin-left: 20%
}
.md-push-2-5 {
margin-left: 40%
}
.md-push-1-7 {
margin-left: 14.28%
}
.md-push-2-7 {
margin-left: 28.56%
}
.md-push-3-7 {
margin-left: 42.84%
}
.md-push-4-7 {
margin-left: 57.12%
}
.md-push-5-7 {
margin-left: 71.4%
}
.md-push-6-7 {
margin-left: 85.68%
}
.md-push-1-8 {
margin-left: 12.5%
}
.md-push-3-8 {
margin-left: 37.5%
}
.md-push-5-8 {
margin-left: 62.5%
}
.md-push-7-8 {
margin-left: 87.5%
}
.md-width-1-1 {
width: 100%
}
.md-width-1-2 {
width: 50%
}
.md-width-1-3 {
width: 33.33%
}
.md-width-1-4 {
width: 25%
}
}
@media only screen and (min-width:1024px) {
.holder {
max-width: 1366px
}
.lg-col-1-1 {
width: 100%
}
.lg-col-1-2 {
width: 50%
}
.lg-col-1-3 {
width: 33.33%
}
.lg-col-2-3 {
width: 66.66%
}
.lg-col-3-4 {
width: 75%
}
.lg-col-1-4 {
width: 25%
}
.lg-col-1-5 {
width: 20%
}
.lg-col-2-5 {
width: 40%
}
.lg-col-3-5 {
width: 60%
}
.lg-col-4-5 {
width: 80%
}
.lg-col-1-6 {
width: 16.66%
}
.lg-col-5-6 {
width: 83.3%
}
.lg-col-1-7 {
width: 14.28%
}
.lg-col-2-7 {
width: 28.56%
}
.lg-col-3-7 {
width: 42.84%
}
.lg-col-4-7 {
width: 57.12%
}
.lg-col-5-7 {
width: 71.4%
}
.lg-col-6-7 {
width: 85.68%
}
.lg-col-1-8 {
width: 12.5%
}
.lg-col-3-8 {
width: 37.5%
}
.lg-col-5-8 {
width: 62.5%
}
.lg-col-7-8 {
width: 87.5%
}
.lg-push-1-4 {
margin-left: 25%
}
.lg-push-3-4 {
margin-left: 75%
}
.lg-push-1-2 {
margin-left: 50%
}
.lg-push-1-3 {
margin-left: 33.33%
}
.lg-push-2-3 {
margin-left: 66.66%
}
.lg-push-1-5 {
margin-left: 20%
}
.lg-push-2-5 {
margin-left: 40%
}
.lg-push-1-7 {
margin-left: 14.28%
}
.lg-push-2-7 {
margin-left: 28.56%
}
.lg-push-3-7 {
margin-left: 42.84%
}
.lg-push-4-7 {
margin-left: 57.12%
}
.lg-push-5-7 {
margin-left: 71.4%
}
.lg-push-6-7 {
margin-left: 85.68%
}
.lg-push-1-8 {
margin-left: 12.5%
}
.lg-push-3-8 {
margin-left: 37.5%
}
.lg-push-5-8 {
margin-left: 62.5%
}
.lg-push-7-8 {
margin-left: 87.5%
}
.lg-width-1-1 {
width: 100%
}
.lg-width-1-2 {
width: 50%
}
.lg-width-1-3 {
width: 33.33%
}
.lg-width-1-4 {
width: 25%
}
}
@media only screen and (min-width:1366px) {
.holder {
max-width: 1366px
}
[class*="xl-col-"] {
float:left;
padding-left:35px
}
.xl-col-1-1 {
width: 100%
}
.xl-col-1-2 {
width: 50%
}
.xl-col-1-3 {
width: 33.33%
}
.xl-col-2-3 {
width: 66.66%
}
.xl-col-3-4 {
width: 75%
}
.xl-col-1-4 {
width: 25%
}
.xl-col-1-5 {
width: 20%
}
.xl-col-2-5 {
width: 40%
}
.xl-col-3-5 {
width: 60%
}
.xl-col-4-5 {
width: 80%
}
.xl-col-1-6 {
width: 16.66%
}
.xl-col-5-6 {
width: 83.3%
}
.xl-col-1-7 {
width: 14.28%
}
.xl-col-2-7 {
width: 28.56%
}
.xl-col-3-7 {
width: 42.84%
}
.xl-col-4-7 {
width: 57.12%
}
.xl-col-5-7 {
width: 71.4%
}
.xl-col-6-7 {
width: 85.68%
}
.xl-col-1-8 {
width: 12.5%
}
.xl-col-3-8 {
width: 37.5%
}
.xl-col-5-8 {
width: 62.5%
}
.xl-col-7-8 {
width: 87.5%
}
.xl-push-1-4 {
margin-left: 25%
}
.xl-push-3-4 {
margin-left: 75%
}
.xl-push-1-2 {
margin-left: 50%
}
.xl-push-1-3 {
margin-left: 33.33%
}
.xl-push-2-3 {
margin-left: 66.66%
}
.xl-push-1-5 {
margin-left: 20%
}
.xl-push-2-5 {
margin-left: 40%
}
.xl-push-1-7 {
margin-left: 14.28%
}
.xl-push-2-7 {
margin-left: 28.56%
}
.xl-push-3-7 {
margin-left: 42.84%
}
.xl-push-4-7 {
margin-left: 57.12%
}
.xl-push-5-7 {
margin-left: 71.4%
}
.xl-push-6-7 {
margin-left: 85.68%
}
.xl-push-1-8 {
margin-left: 12.5%
}
.xl-push-3-8 {
margin-left: 37.5%
}
.xl-push-5-8 {
margin-left: 62.5%
}
.xl-push-7-8 {
margin-left: 87.5%
}
.xl-width-1-1 {
width: 100%
}
.xl-width-1-2 {
width: 50%
}
.xl-width-1-3 {
width: 33.33%
}
.xl-width-1-4 {
width: 25%
}
}
.row--collapse {
margin-left: 0
}
.row--collapse [class*="-col-"] {
padding-left: 0
}
@media only screen and (max-width:479px) {
[class*="-col-"]+[class*="-col-"] {
margin-top:20px
}
.carousel [class*="-col-"]+[class*="-col-"] {
margin-top:0
}
}
.theme--ux {
background: #f04576;
color: #fff
}
.theme--ux .btn:after {
color: #f04576
}
.theme--ux .delayed-image {
background-color: #f04576
}
.theme--app-dev {
background: #702c82;
color: #fff
}
.theme--app-dev .btn:after {
color: #702c82
}
.theme--app-dev .delayed-image {
background-color: #702c82
}
.theme--video {
background: #a9c000;
color: #fff
}
.theme--video .btn:after {
color: #a9c000
}
.theme--video .delayed-image {
background-color: #a9c000
}
.theme--marketing {
background: #d96e28;
color: #fff
}
.theme--marketing .btn:after {
color: #d96e28
}
.theme--marketing .delayed-image {
background-color: #d96e28
}
.theme--ecommerce {
background: #52c7eb;
color: #fff
}
.theme--ecommerce .btn:after {
color: #52c7eb
}
.theme--ecommerce .delayed-image {
background-color: #52c7eb
}
.page-theme--ux .site-header, .page-theme--ux .next-page-transition-cover, .page-theme--ux .previous-page-transition-cover, .page-theme--ux .page-transition-cover {
background-color: #f04576
}
.page-theme--ux .main-navigation a:before {
color: #f04576
}
.page-theme--app-dev .site-header, .page-theme--app-dev .next-page-transition-cover, .page-theme--app-dev .previous-page-transition-cover, .page-theme--app-dev .page-transition-cover {
background-color: #702c82
}
.page-theme--app-dev .main-navigation a:before {
color: #702c82
}
.page-theme--ecommerce .site-header, .page-theme--ecommerce .next-page-transition-cover, .page-theme--ecommerce .previous-page-transition-cover, .page-theme--ecommerce .page-transition-cover {
background-color: #52c7eb
}
.page-theme--ecommerce .main-navigation a:before {
color: #52c7eb
}
.page-theme--video .site-header, .page-theme--video .next-page-transition-cover, .page-theme--video .previous-page-transition-cover, .page-theme--video .page-transition-cover {
background-color: #a9c000
}
.page-theme--video .main-navigation a:before {
color: #a9c000
}
.purple-background .plyr__play-large {
background: #702c82
}
.purple-background .plyr--video .plyr__controls button.tab-focus:focus, .purple-background .plyr--video .plyr__controls button:hover {
background: #702c82
}
.purple-background .plyr__progress--played, .purple-background .plyr__volume--display {
color: #702c82!important
}
.purple-background input[type="range"]:focus::-moz-range-thumb {
background-color:#702c82!important
}
.purple-background input[type="range"]:focus::-webkit-slider-thumb {
background-color:#702c82!important
}
.purple-background input[type="range"]:focus::-ms-thumb {
background-color:#702c82!important
}
.purple-background .widget--quote blockquote, .purple-background progress.reading-progress {
color: #702c82
}
.purple-background progress::-moz-progress-bar {
background:#702c82
}
.purple-background progress.reading-progress::-webkit-progress-value {
background:#702c82
}
.purple-background .news-article-text-column a:not(.btn), .purple-background .reading-progress__bar {
background: #702c82
}
.purple-background .navigation-list a::before {
color: #702c82
}
.purple-background .site-header, .purple-background .next-page-transition-cover, .purple-background .previous-page-transition-cover, .purple-background .page-transition-cover {
background-color: #702c82
}
.pink-background .plyr__play-large {
background: #f04576
}
.pink-background .plyr--video .plyr__controls button.tab-focus:focus, .pink-background .plyr--video .plyr__controls button:hover {
background: #f04576
}
.pink-background .plyr__progress--played, .pink-background .plyr__volume--display {
color: #f04576!important
}
.pink-background input[type="range"]:focus::-moz-range-thumb {
background-color:#f04576!important
}
.pink-background input[type="range"]:focus::-webkit-slider-thumb {
background-color:#f04576!important
}
.pink-background input[type="range"]:focus::-ms-thumb {
background-color:#f04576!important
}
.pink-background .widget--quote blockquote, .pink-background progress.reading-progress {
color: #f04576
}
.pink-background progress::-moz-progress-bar {
background:#f04576
}
.pink-background progress.reading-progress::-webkit-progress-value {
background:#f04576
}
.pink-background .news-article-text-column a:not(.btn), .pink-background .reading-progress__bar {
background: #f04576
}
.pink-background .navigation-list a::before {
color: #f04576
}
.pink-background .site-header, .pink-background .next-page-transition-cover, .pink-background .previous-page-transition-cover, .pink-background .page-transition-cover {
background-color: #f04576
}
.blue-background .plyr__play-large {
background: #52c7eb
}
.blue-background .plyr--video .plyr__controls button.tab-focus:focus, .blue-background .plyr--video .plyr__controls button:hover {
background: #52c7eb
}
.blue-background .plyr__progress--played, .blue-background .plyr__volume--display {
color: #52c7eb!important
}
.blue-background input[type="range"]:focus::-moz-range-thumb {
background-color:#52c7eb!important
}
.blue-background input[type="range"]:focus::-webkit-slider-thumb {
background-color:#52c7eb!important
}
.blue-background input[type="range"]:focus::-ms-thumb {
background-color:#52c7eb!important
}
.blue-background .widget--quote blockquote, .blue-background progress.reading-progress {
color: #52c7eb
}
.blue-background progress::-moz-progress-bar {
background:#52c7eb
}
.blue-background progress.reading-progress::-webkit-progress-value {
background:#52c7eb
}
.blue-background .news-article-text-column a:not(.btn), .blue-background .reading-progress__bar {
background: #52c7eb
}
.blue-background .navigation-list a::before {
color: #52c7eb
}
.blue-background .site-header, .blue-background .next-page-transition-cover, .blue-background .previous-page-transition-cover, .blue-background .page-transition-cover {
background-color: #52c7eb
}
.green-background .plyr__play-large {
background: #a9c000
}
.green-background .plyr--video .plyr__controls button.tab-focus:focus, .green-background .plyr--video .plyr__controls button:hover {
background: #a9c000
}
.green-background .plyr__progress--played, .green-background .plyr__volume--display {
color: #a9c000!important
}
.green-background input[type="range"]:focus::-moz-range-thumb {
background-color:#a9c000!important
}
.green-background input[type="range"]:focus::-webkit-slider-thumb {
background-color:#a9c000!important
}
.green-background input[type="range"]:focus::-ms-thumb {
background-color:#a9c000!important
}
.green-background .widget--quote blockquote, .green-background progress.reading-progress {
color: #a9c000
}
.green-background progress::-moz-progress-bar {
background:#a9c000
}
.green-background progress.reading-progress::-webkit-progress-value {
background:#a9c000
}
.green-background .news-article-text-column a:not(.btn), .green-background .reading-progress__bar {
background: #a9c000
}
.green-background .navigation-list a::before {
color: #a9c000
}
.green-background .site-header .next-page-transition-cover, .green-background .previous-page-transition-cover, .green-background .page-transition-cover {
background-color: #a9c000
}
.orange-background .plyr__play-large {
background: #d96e28
}
.orange-background .plyr--video .plyr__controls button.tab-focus:focus, .orange-background .plyr--video .plyr__controls button:hover {
background: #d96e28
}
.orange-background .plyr__progress--played, .orange-background .plyr__volume--display {
color: #d96e28!important
}
.orange-background input[type="range"]:focus::-moz-range-thumb {
background-color:#d96e28!important
}
.orange-background input[type="range"]:focus::-webkit-slider-thumb {
background-color:#d96e28!important
}
.orange-background input[type="range"]:focus::-ms-thumb {
background-color:#d96e28!important
}
.orange-background .widget--quote blockquote, .orange-background progress.reading-progress {
color: #d96e28
}
.orange-background progress::-moz-progress-bar {
background:#d96e28
}
.orange-background progress.reading-progress::-webkit-progress-value {
background:#d96e28
}
.orange-background .news-article-text-column a:not(.btn), .orange-background .reading-progress__bar {
background: #d96e28
}
.orange-background .navigation-list a::before {
color: #d96e28
}
.orange-background .site-header .next-page-transition-cover, .orange-background .previous-page-transition-cover, .orange-background .page-transition-cover {
background-color: #d96e28
}
.c-hamburger {
display: block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 50px;
height: 50px;
font-size: 0;
text-indent: -9999px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
box-shadow: none;
border-radius: none;
border: none;
cursor: pointer;
transition: background .3s
}
.c-hamburger:focus {
outline: none
}
.c-hamburger span {
display: block;
position: absolute;
top: 23px;
left: 10px;
right: 10px;
height: 4px;
background: #fff
}
.c-hamburger span::before, .c-hamburger span::after {
position: absolute;
display: block;
left: 0;
width: 100%;
height: 4px;
background-color: #fff;
content: ""
}
.c-hamburger span::before {
top: -10px
}
.c-hamburger span::after {
bottom: -10px
}
.c-hamburger--to-cross {
background-color: transparent
}
.c-hamburger--to-cross span {
transition: background 0s .3s
}
.c-hamburger--to-cross span::before, .c-hamburger--to-cross span::after {
transition-duration: .3s, .3s;
transition-delay: .3s, 0s
}
.c-hamburger--to-cross span::before {
transition-property: top, -webkit-transform;
transition-property: top, transform;
transition-property: top, transform, -webkit-transform
}
.c-hamburger--to-cross span::after {
transition-property: bottom, -webkit-transform;
transition-property: bottom, transform;
transition-property: bottom, transform, -webkit-transform
}
.c-hamburger--to-cross.is-active {
background-color: transparent
}
.c-hamburger--to-cross.is-active span {
background: none
}
.c-hamburger--to-cross.is-active span::before {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.c-hamburger--to-cross.is-active span::after {
bottom: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.c-hamburger--to-cross.is-active span::before, .c-hamburger--to-cross.is-active span::after {
transition-delay: 0s, .3s
}
.navigation-list {
position: relative;
padding: 0 2.7rem 2rem 4.2rem
}
.navigation-list li {
margin: 0 0 1.9rem
}
.navigation-list a {
text-decoration: none;
font-family: 'bebas_neuebold', Arial, Helevtica, sans-serif;
color: #fff;
font-size: 2.1rem;
line-height: 2.1rem;
padding:.3rem 0 .1rem;
position: relative;
display: table;
height: 2.5rem;
overflow: hidden;
text-indent:.3rem;
text-transform: uppercase
}
.navigation-list a:before {
display: block;
content: attr(data-title);
background: #fff;
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
padding:.3rem 0 .1rem;
color: #f17b2d;
overflow: hidden;
transition: width .25s ease;
white-space: nowrap;
text-indent:.3rem
}
.navigation-list a:hover {
padding-right:.3rem
}
.navigation-list a:hover:before {
width: 100%
}
.navigation-marker {
content: '';
display: block;
width: 3rem;
height:.2rem;
background: #fff;
position: absolute;
left: 0;
top: 1.3rem;
transition: all .25s ease
}
.section-expertise .navigation-marker {
top: 5.7rem
}
.section-portfolio .navigation-marker {
top: 10rem
}
.section-case-studies .navigation-marker {
top: 14.5rem
}
.section-our-story .navigation-marker {
top: 18.9rem
}
.section-news .navigation-marker {
top: 23.3rem
}
.section-contact .navigation-marker {
top: 27.7rem
}
.section-none .navigation-marker {
left: -3rem
}
@media screen and (max-width:1023px) {
.off-canvas-container {
overflow: hidden
}
.c-hamburger--to-cross {
position: fixed;
left: 5rem;
top: 0;
z-index: 1501;
margin-left: -4rem;
transition: all .15s ease 0s
}
.nav-expanded .c-hamburger--to-cross {
left: 30rem;
transition: all .15s ease 0s;
margin-left: -5.5rem
}
.main-navigation {
display: none
}
.main-navigation-cloned {
display: block
}
.main-navigation--off-canvas-left {
position: fixed;
z-index: 10;
bottom: 0;
width: 30rem;
left: -30rem;
top: 0;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: #f17b2d;
padding: 60px 40px 0 0;
display: block;
transition: all .15s ease 0s;
box-shadow: inset 0 0 25px rgba(0,0,0,.4)
}
.main-navigation--off-canvas-left.expanded {
left: 0;
transition: all .15s ease 0s
}
.navigation-list {
position: relative;
left: -50px;
transition: all .15s ease .15s
}
.nav-expanded .navigation-list {
left: 0;
transition: all .15s ease 0s
}
.navigation-list ul {
position: relative;
left: -50px;
transition: all .15s ease 0s
}
.nav-expanded .navigation-list ul {
left: 0;
transition: all .15s ease .1s
}
.main-content {
position: relative;
left: 0;
transition: all .15s ease 0s
}
.nav-expanded .main-content {
left: 30rem;
transition: all .15s ease 0s
}
.site-header {
transition: all .15s ease 0s
}
.nav-expanded .site-header {
left: 30rem;
transition: all .15s ease 0s;
right: -30rem
}
.social-icons {
-webkit-transform: translateX(-50px);
transform: translateX(-50px);
transition: all .15s ease 0s
}
.nav-expanded .social-icons {
-webkit-transform: translateX(0);
transform: translateX(0);
transition: all .15s ease .1s
}
}
@media screen and (min-width:1024px) {
.c-hamburger, .main-navigation-cloned {
display: none
}
.navigation-list {
padding-bottom: 5rem
}
}
.main-navigation__icon {
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
fill: currentColor
}
.dropdown-expanded .main-navigation__icon {
-webkit-transform: scaleY(-1);
transform: scaleY(-1)
}
.main-navigation__mutlilevel-dropdown {
height: 0;
overflow: hidden;
margin: 3px 0;
background: #ededed;
transition: all .25s ease
}
.dropdown-expanded .main-navigation__mutlilevel-dropdown {
height: auto
}
.main-navigation__mutlilevel-dropdown ul {
padding: 8px;
margin: 0
}
.btn {
display: inline-block;
padding: 10px 25px;
margin-bottom: 0;
font-weight: 400;
line-height: 1.4rem;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
text-decoration: none;
transition: background .2s, border-color .2s, color .2s;
font-family: 'bebas_neuebold', sans-serif;
font-size: 1.4rem
}
@media only screen and (min-width:600px) {
.btn {
font-size: 1.8rem;
line-height: 1.8rem
}
}
.btn {
color: #333;
background-color: #fff;
border-color: #ccc
}
.btn svg {
fill: #fff
}
.btn--primary {
color: #fff;
background-color: #006778;
border-color: #003b45
}
.btn--primary:active, .btn--primary:focus, .btn--primary:hover {
color: #fff;
background-color: #00515f;
border-color: #00252c
}
.btn--primary svg {
fill: #fff
}
.btn--secondary {
color: #fff;
background-color: #a5d867;
border-color: #8dce3e
}
.btn--secondary:active, .btn--secondary:focus, .btn--secondary:hover {
color: #fff;
background-color: #b1dd7b;
border-color: #99d353
}
.btn--secondary svg {
fill: #fff
}
.btn--tertiary {
color: #fff;
background-color: #c30;
border-color: #992600
}
.btn--tertiary:active, .btn--tertiary:focus, .btn--tertiary:hover {
color: #fff;
background-color: #b32d00;
border-color: #802000
}
.btn--tertiary svg {
fill: #fff
}
.btn--lg {
font-size: 150%;
padding: 15px 30px
}
.btn--sm {
font-size: 90%;
padding: 7px 15px
}
.btn--icon-left {
padding-right: 30px
}
.btn--icon-left svg {
margin-right: 10px
}
.btn--icon-right {
padding-left: 30px
}
.btn--icon-right svg {
margin-left: 10px
}
.btn-plain {
color: inherit;
text-decoration: none
}
.btn-plain .icon {
height: 7px;
width: 7px;
margin-left: 3px;
position: relative;
top: -1px
}
.btn-plain:hover {
text-decoration: underline
}
.btn---anim {
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.c-ripple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: transparent;
display: block
}
.c-ripple__circle {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
opacity: 0;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255,255,255,.25)
}
.c-ripple.is-active .c-ripple__circle {
-webkit-animation: a-ripple .6s ease-in;
animation: a-ripple .6s ease-in
}
@-webkit-keyframes a-ripple {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
width: 300%;
padding-bottom: 300%;
opacity: 0;
}
}
@keyframes a-ripple {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
width: 300%;
padding-bottom: 300%;
opacity: 0;
}
}
.btn--outline, .btn--outline:after {
border: 1px solid #fff;
background: none;
color: #fff;
letter-spacing:.1rem;
position: relative
}
.btn--outline--dark {
border-color: #333;
color: #333
}
.btn:after {
position: absolute;
display: block;
content: attr(data-title);
padding: 10px 0;
left: 0;
top: 0;
width: 0%;
background: #fff;
color: #333;
text-indent: 2.5rem;
transition: all .25s ease;
overflow: hidden;
border: none;
bottom: 0
}
.btn:active:after, .btn:focus:after, .btn:hover:after {
width: 100%;
padding-right: 25px
}
.btn--outline--dark:after {
border-color: #333;
color: #fff;
background: #333
}
.lazyload {
opacity: 0
}
.no-js .lazyload {
opacity: 1
}
.lazyloaded {
opacity: 1;
transition: opacity 1s
}
.overlay-bg {
background: #fff;
position: fixed;
left: 100%;
top: 0;
right: 0;
height: 100%;
transition: all .25s linear .25s;
z-index: 2499
}
.overlay-bg.overlay-bg--visible {
left: 0;
transition-delay: 0s
}
.overlay {
position: fixed;
left: 150%;
top: 50%;
width: 560px;
height: 500px;
background: #fff;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
transition: all .25s linear 0s;
z-index: 2500
}
.overlay.overlay--visible {
transition-delay: .25s;
left: 50%
}
.overlay.overlay--tall {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0)
}
@media screen and (min-width:1366px) {
.overlay {
margin-left: 10rem
}
}
.overlay--massive {
width: 300px;
height: auto;
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0)
}
.overlay--modal {
width: 320px;
height: 230px;
text-align: center
}
.overlay--modal__actions {
padding: 20px 0
}
.overlay--modal__actions li {
display: inline-block;
margin: 0 20px
}
.overlay__content-holder--modal {
display: -webkit-box;
display: flex;
height: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column
}
.overlay__modal-text {
-webkit-box-flex: 1;
flex-grow: 1
}
.overlay.overlay--full {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: fixed;
-webkit-transform: translate(0, 0);
transform: translate(0, 0)
}
.overlay--fixed {
position: fixed
}
.overlay--fixed.overlay--tall {
top: 20px;
bottom: 20px;
height: auto
}
.overlay__close {
position: absolute;
right: 0;
top: 0;
cursor: pointer;
padding: 15px;
z-index: 2000
}
.overlay__content-holder {
overflow: auto;
-webkit-overflow-scrolling: touch;
height: 100%;
padding: 50px 20px 20px
}
@media screen and (min-width:768px) {
.overlay-showing .main-content {
-webkit-filter: grayscale(80%);
filter: grayscale(80%)
}
.overlay--video {
max-width: 1024px;
height: auto;
width: 100%
}
}
.map {
height: 75vh
}
.map-box {
padding: 1rem 1rem 1rem 2rem;
margin-right: -1rem
}
.map-box__image {
background: #f17b2d;
margin: 0 0 1rem;
height: 5rem
}
.map-box__heading {
font-size: 1.4rem;
margin:0 0 .5rem
}
.map-box__content p {
font-size: 1rem;
margin: 0
}
ul.share-buttons {
list-style: none;
padding: 0;
margin: 0
}
ul.share-buttons li {
display: inline-block;
margin:0 .6rem 0 0
}
ul.share-buttons a {
display: inline-block
}
ul.share-buttons a svg {
width: 3.2rem;
height: 3.2rem
}
ul.share-buttons .st0 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
transition: all .15s ease
}
ul.share-buttons .st1 {
fill: #000;
transition: all .5s ease
}
.news-teasers {
background: #f5f5f5;
padding: 1rem
}
.news-teaser-list {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
max-width: 112rem;
margin: 0 auto
}
.news-teaser-holder {
padding: 1rem
}
.news-teaser {
background: #fff;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
padding: 1rem;
-webkit-box-pack: center;
justify-content: center;
height: 30rem;
position: relative
}
.news-teaser__headline {
-webkit-box-flex: 1;
flex-grow: 1;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
transition: color .25s ease
}
.news-teaser__headline:hover {
color: #666
}
.news-teaser__tags {
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
color: #999;
text-transform: uppercase;
margin: 0;
font-size: 1.4rem;
line-height: 1.4rem;
margin: 0
}
.news-teaser__tags a {
color: inherit;
text-decoration: none;
transition: color .25s ease
}
.news-teaser__tags a:hover {
color: #333
}
.news-indicator {
position: absolute;
left: 1rem;
top: 1rem;
height:.5rem;
background: #f17b2d;
width: 6rem;
display: block;
transition: width .25s ease .5s
}
.js .news-indicator {
width: 0
}
.js .come-in .news-indicator, .js .already-visible .news-indicator {
width: 6rem
}
.news-teaser-pending {
position: absolute;
right: 0;
top:.7rem;
background: #f17b2d;
padding: 5px 10px;
text-transform: uppercase;
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
color: #fff;
font-size: 2rem;
height: 34px
}
.news-teaser-pending:before {
width: 0;
height: 0;
border-style: solid;
border-width: 17px 20px 17px 0;
border-color: transparent #f17b2d transparent transparent;
content: '';
display: block;
position: absolute;
left: -20px;
top: 0
}
.news-teaser__headline {
transition: all .25s
}
@media only screen and (min-width:768px) {
.news-teaser {
padding: 2rem;
height: 35rem
}
.news-indicator {
left: 2rem;
top: 2rem
}
.news-teaser__headline {
font-size: 3.6rem;
line-height: 3.4rem
}
}
@media only screen and (min-width:0) and (max-width:767px) {
.news-teaser-holder {
width: 50%
}
.news-teaser-holder {
padding:.5rem
}
.news-teaser {
padding: 1rem
}
.news-indicator {
left: 1rem;
top: 1rem
}
.come-in:nth-child(2n+1) .news-indicator {
transition-delay: .2s
}
.come-in:nth-child(2n) .news-indicator {
transition-delay: .4s
}
}
@media only screen and (min-width:768px) and (max-width:1365px) {
.news-teaser-holder {
width: 33.33333%
}
.come-in:nth-child(3n+1) .news-indicator {
transition-delay: .2s
}
.come-in:nth-child(3n+2) .news-indicator {
transition-delay: .3s
}
.come-in:nth-child(3n) .news-indicator {
transition-delay: .4s
}
.news-teasers--small .news-teaser-holder:nth-child(4n) {
display: none
}
}
@media only screen and (min-width:1366px) {
.news-teaser-holder {
width: 25%
}
.come-in:nth-child(4n+1) .news-indicator {
transition-delay: .2s
}
.come-in:nth-child(4n+2) .news-indicator {
transition-delay: .3s
}
.come-in:nth-child(4n+3) .news-indicator {
transition-delay: .4s
}
.come-in:nth-child(4n) .news-indicator {
transition-delay: .5s
}
}
.news-teaser.clone {
transition: all .25s;
position: fixed;
z-index: 3;
opacity: 1
}
.expand-outro .news-teaser.clone {
opacity: 1
}
.news-teaser.animate {
-webkit-transform: scale(2);
transform: scale(2);
left: 50%!important;
top: 50%!important;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
box-shadow: 0 0 20px rgba(0,0,0,.3)
}
.news-teaser.animate:after {
background: #fff;
content: '';
display: block;
left: 0;
top: 0;
right: 0;
bottom: 0
}
.news-teaser.animate .news-indicator {
width: 6rem;
transition: none
}
.news-teaser.animate a {
pointer-events: none
}
.news-teaser.animate .news-teaser__headline:hover {
color: #333
}
.spinner {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/dm---spinner.gif.pagespeed.ce.Ccrpv2p_9y.gif) no-repeat center center;
height: 100px;
display: none
}
.spinner.spinner--visible {
display: block
}
.news-article {
background: #fff
}
.news-article__feature-image {
position: relative;
padding-bottom: 24.375%
}
.news-article__feature-image img {
width: 100%;
position: absolute;
height: auto;
left: 0;
top: 0
}
.news-article__headline {
font-size: 3.2rem;
line-height: 3.2rem;
margin: 1.5rem 0 1rem
}
@media only screen and (min-width:480px) {
.news-article__headline {
font-size: 4rem;
line-height: 4rem
}
}
.news-article__date {
font-family: 'bebas_neueregular', sans-serif;
margin: 0 0 2rem;
font-size: 1.8rem
}
.news-article__client-logo {
border: 1px solid #ccc;
margin: 0 0 4rem;
max-width: 22.6rem
}
.news-article-tags {
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
color: #999;
text-transform: uppercase;
margin: 0 0 2rem;
font-size: 1.8rem;
line-height: 1.8rem
}
.news-article-tags a {
color: inherit;
text-decoration: none;
transition: color .25s ease
}
.news-article-tags a:hover {
color: #333
}
.news-article-tags span {
color: #333
}
.news-article-cat {
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
font-size: 1.6rem;
margin: 0 0 1rem;
line-height: 1.6rem
}
.news-article-cat span {
margin-right: 1rem
}
.news-article-content {
max-width: 112rem;
margin: 0 auto;
padding: 2.5rem 1.5rem
}
.news-article-content .news-indicator {
position: static;
transition: width .25s ease;
margin:0 0 .5rem
}
.loaded .news-article-content .news-indicator {
width: 10.5rem
}
.news-article-previous, .news-article-next {
display: none
}
.news-article-pending {
position: relative;
background: #333;
padding: 5px 10px;
text-transform: uppercase;
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
color: #fff;
font-size: 2rem;
height: 34px;
display: table;
-webkit-transform-origin: left;
transform-origin: left;
width: 10rem
}
.news-article-pending:before {
width: 0;
height: 0;
border-style: solid;
border-width: 17px 0 17px 20px;
border-color: transparent transparent transparent #333;
content: '';
display: block;
position: absolute;
right: -20px;
top: 0
}
@media screen and (min-width:768px) {
.news-article-previous, .news-article-next {
display: -webkit-box;
display: flex;
position: fixed;
top: 50%;
background: #999;
width: 4rem;
height: 4rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 10;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center
}
.news-article-previous svg, .news-article-next svg {
width: 2.6rem;
height: 2.6rem
}
.news-article-previous:hover, .news-article-next:hover {
background: #333
}
.show-next-teaser.loaded .news-article-previous, .news-article-previous {
left: -5rem;
transition: all .25s ease
}
.show-next-teaser.loaded .news-article-next, .news-article-next {
right: -5rem;
transition: all .25s ease
}
.loaded .news-article-previous {
left: 0
}
.loaded .news-article-next {
right: 0
}
}
@media screen and (min-width:1024px) {
.loaded .news-article-previous {
left: 20rem
}
}
.news-article-share {
border-top: 1px solid #ccc;
padding-top: 2rem
}
.news-article-share h2 {
display: inline-block;
vertical-align: middle;
font-size: 1.8rem;
margin: 0 1rem 0 0
}
.news-article-share .share-buttons {
display: inline-block;
vertical-align: middle
}
@media screen and (min-width:1366px) {
.news-article-tags-and-share {
display: -webkit-box;
display: flex;
padding: 2rem 0 0
}
.news-article-share {
border-top: none;
padding-top: 0
}
.news-article-tags {
-webkit-box-flex: 1;
flex-grow: 1;
margin: 0;
padding: 1rem 3rem 0 0
}
}
@media screen and (min-width:480px) {
.news-article-content {
max-width: 40rem;
padding: 2.6rem 0
}
.news-article-text-column {
max-width: 40rem;
margin: 0 auto 3rem
}
.news-article-text-column .widget--image, .news-article-text-column .widget--video {
margin-left: calc(-100vw / 2 + 40rem / 2);
margin-right: calc(-100vw / 2 + 40rem / 2)
}
}
@media screen and (min-width:768px) {
.news-article-cat {
font-size: 2rem;
line-height: 2rem;
margin: 0 0 1.6rem
}
.news-article__headline {
font-size: 6rem;
line-height: 5.4rem
}
.news-article__date {
font-size: 2.8rem
}
.news-article-content {
max-width: 60rem;
padding: 2.5rem 0
}
.news-article__feature-image {
margin: 0
}
.news-article__feature-video {
margin: 6rem auto 0;
max-width: 120rem
}
.news-article-text-column {
max-width: 100%;
margin: 0 auto 3rem
}
.news-article-text-column .widget--image, .news-article-text-column .widget--video {
margin-left: calc(-100vw / 2 + 50rem / 2);
margin-right: calc(-100vw / 2 + 50rem / 2)
}
}
@media screen and (min-width:1024px) {
.news-article-content {
max-width: 100%;
padding: 4rem
}
.news-article-text-column {
position: relative;
padding-right: 24.6rem
}
.news-article-text-column .widget--image, .news-article-text-column .widget--video {
margin-left: 0;
margin-right: 0
}
.news-article__client-logo {
position: absolute;
right: 0;
top: 6rem
}
}
@media screen and (min-width:1366px) {
.news-article-cat {
font-size: 2.4rem;
line-height: 2.4rem
}
.news-article__headline {
font-size: 7.2rem;
line-height: 6.6rem
}
.news-article__date {
font-size: 2.8rem;
margin: 0 0 4rem
}
.news-article-content {
max-width: 100rem;
padding: 8rem 6rem
}
.news-article-text-column {
margin: 0 0 3rem
}
.news-article-text-column .widget--text p, .news-article-text-column .widget--text li {
font-size: 1.7rem;
line-height: 2.6rem
}
.news-article-text-column .widget--image, .news-article-text-column .widget--video {
margin-left: 0;
margin-right: 0
}
}
.news-article-text-column a:not(.btn) {
transition: background-color .25s ease;
padding:0 .5rem;
color: #fff;
background-color: #f17b2d;
border-radius: 2px
}
.news-article-text-column a:not(.btn):hover {
background: #333!important
}
.news-search {
position: relative;
margin: 0 auto;
max-width: 40rem
}
.news-search input {
border: 1px solid #fff;
background: #fff;
height: 5rem;
line-height: 5rem;
width: 100%;
padding: 0 5rem 0 1rem;
font-size: 1.6rem
}
.news-search input:focus {
border-color: #f17b2d;
outline: none
}
.news-search button {
position: absolute;
right: 0;
top: 0;
width: 5rem;
background: #f17b2d;
border: none;
height: 5rem;
padding: 1.5rem;
cursor: pointer;
transition: background .25s ease
}
.news-search button svg {
width: 2rem;
height: 2rem;
fill: #fff
}
.news-search button:hover {
background: #333
}
.empty-search-results {
text-align: center;
padding: 5rem 5rem 4rem;
width: 50%;
font-style: italic;
border-top: 1px solid rgba(0,0,0,.1);
margin: 0 auto 4rem
}
.news-cat-ux .news-indicator {
background: #f04576
}
.news-cat-app-dev .news-indicator {
background: #702c82
}
.news-cat-video .news-indicator {
background: #a9c000
}
.news-cat-ecommerce .news-indicator {
background: #52c7eb
}
.news-cat-marketing .news-indicator {
background: #d96e28
}
.news-cat-ux.news-cat-app-dev .news-indicator {
background: linear-gradient(to right, #f04576 0%, #f04576 50%, #52c7eb 50.1%, #52c7eb 100%)
}
.news-cat-ux.news-cat-video .news-indicator {
background: linear-gradient(to right, #f04576 0%, #f04576 50%, #a9c000 50.1%, #a9c000 100%)
}
.news-cat-ux.news-cat-marketing .news-indicator {
background: linear-gradient(to right, #f04576 0%, #f04576 50%, #d96e28 50.1%, #d96e28 100%)
}
.news-cat-app-dev.news-cat-video .news-indicator {
background: linear-gradient(to right, #702c82 0%, #702c82 50%, #a9c000 50.1%, #a9c000 100%)
}
.news-cat-app-dev.news-cat-marketing .news-indicator {
background: linear-gradient(to right, #702c82 0%, #702c82 50%, #d96e28 50.1%, #d96e28 100%)
}
.news-cat-video.news-cat-marketing .news-indicator {
background: linear-gradient(to right, #a9c000 0%, #a9c000 50%, #d96e28 50.1%, #d96e28 100%)
}
.article-theme--ux .news-article-text-column a:not(.btn), .article-theme--ux .plyr--video .plyr__controls button.tab-focus:focus, .article-theme--ux .plyr--video .plyr__controls button:hover, .article-theme--ux .plyr__play-large, .article-theme--ux .news-indicator {
background: #f04576
}
.article-theme--ux .plyr__progress--played, .article-theme--ux .plyr__volume--display, .article-theme--ux .widget--quote blockquote {
color: #f04576!important
}
.article-theme--ux .news-article-text-column a:not(.btn) {
color: #fff
}
.article-theme--app-dev .news-article-text-column a:not(.btn), .article-theme--app-dev .plyr--video .plyr__controls button.tab-focus:focus, .article-theme--app-dev .plyr--video .plyr__controls button:hover, .article-theme--app-dev .plyr__play-large, .article-theme--app-dev .news-indicator {
background: #702c82
}
.article-theme--app-dev .plyr__progress--played, .article-theme--app-dev .plyr__volume--display, .article-theme--app-dev .widget--quote blockquote {
color: #702c82!important
}
.article-theme--app-dev .news-article-text-column a:not(.btn) {
color: #fff
}
.article-theme--video .news-article-text-column a:not(.btn), .article-theme--video .plyr--video .plyr__controls button.tab-focus:focus, .article-theme--video .plyr--video .plyr__controls button:hover, .article-theme--video .plyr__play-large, .article-theme--video .news-indicator {
background: #a9c000
}
.article-theme--video .plyr__progress--played, .article-theme--video .plyr__volume--display, .article-theme--video .widget--quote blockquote {
color: #a9c000!important
}
.article-theme--video .news-article-text-column a:not(.btn) {
color: #fff
}
.article-theme--ecommerce .news-article-text-column a:not(.btn), .article-theme--ecommerce .plyr--video .plyr__controls button.tab-focus:focus, .article-theme--ecommerce .plyr--video .plyr__controls button:hover, .article-theme--ecommerce .plyr__play-large, .article-theme--ecommerce .news-indicator {
background: #52c7eb
}
.article-theme--ecommerce .plyr__progress--played, .article-theme--ecommerce .plyr__volume--display, .article-theme--ecommerce .widget--quote blockquote {
color: #52c7eb!important
}
.article-theme--ecommerce .news-article-text-column a:not(.btn) {
color: #fff
}
@media only screen and (max-width:1023px) {
.news-cat-ux .main-navigation--off-canvas-left {
background: #f04576
}
.news-cat-app-dev .main-navigation--off-canvas-left {
background: #702c82
}
.news-cat-video .main-navigation--off-canvas-left {
background: #a9c000
}
.news-cat-marketing .main-navigation--off-canvas-left {
background: #d96e28
}
}
progress.reading-progress {
position: -webkit-sticky;
position: sticky;
left: 0;
top: 5.1rem;
z-index: 20000;
width: 100%;
height:.25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
background-color: transparent;
color: #f17b2d
}
@media screen and (min-width:1024px) {
progress.reading-progress {
top: 0
}
}
progress.reading-progress::-webkit-progress-bar {
background-color:transparent
}
progress.reading-progress::-webkit-progress-value {
background-color:#f17b2d
}
progress::-moz-progress-bar {
background:#f17b2d
}
.reading-progress__bar {
background-color: #f17b2d;
width: 50%;
display: block;
height: inherit
}
@media screen and (min-width:1024px) {
progress.reading-progress {
left: 20rem;
width: calc(100%-20rem);
height:.6rem
}
.reading-progress__container {
width: calc(100%-20rem);
height:.6rem
}
}
.icon {
height: 24px;
width: 24px;
display: inline-block;
vertical-align: middle
}
.js .staggered-entry.not-visible {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0
}
.staggered-entry.come-in {
-webkit-transform: translateY(50px);
transform: translateY(50px);
opacity: 0;
-webkit-animation: come-in .5s ease forwards;
animation: come-in .5s ease forwards
}
.js .scaled-entry.not-visible {
-webkit-transform: scale(.4, .4);
transform: scale(.4, .4)
}
.scaled-entry.come-in {
-webkit-transform: scale(.4, .4);
transform: scale(.4, .4);
-webkit-animation: scale-in .5s ease forwards;
animation: scale-in .5s ease forwards
}
.js .right-entry.not-visible {
-webkit-transform: translateX(10rem);
transform: translateX(10rem)
}
.right-entry.come-in {
-webkit-transform: translateX(10rem);
transform: translateX(10rem);
-webkit-animation: right-in .5s ease forwards;
animation: right-in .5s ease forwards
}
.js .left-entry.not-visible {
-webkit-transform: translateX(-10rem);
transform: translateX(-10rem)
}
.left-entry.come-in {
-webkit-transform: translateX(-10rem);
transform: translateX(-10rem);
-webkit-animation: left-in .5s ease forwards;
animation: left-in .5s ease forwards
}
.js .bottom-entry.not-visible {
-webkit-transform: translateY(10rem);
transform: translateY(10rem)
}
.bottom-entry.come-in {
-webkit-transform: translateY(10rem);
transform: translateY(10rem);
-webkit-animation: bottom-in .5s ease forwards;
animation: bottom-in .5s ease forwards
}
.services-slice:nth-child(2n+1) a.come-in {
-webkit-animation-duration: .6s;
animation-duration: .6s
}
.services-slice:nth-child(2n) a.come-in {
-webkit-animation-duration: 1s;
animation-duration: 1s
}
@media only screen and (min-width:0) and (max-width:767px) {
.news-teaser-holder.come-in:nth-child(2n+1) {
-webkit-animation-duration: .6s;
animation-duration: .6s
}
.news-teaser-holder.come-in:nth-child(2n) {
-webkit-animation-duration: .8s;
animation-duration: .8s
}
.client-logo.come-in:nth-child(3n+1) {
-webkit-animation-duration: .6s;
animation-duration: .6s
}
.client-logo.come-in:nth-child(3n+2) {
-webkit-animation-duration: .8s;
animation-duration: .8s
}
.client-logo.come-in:nth-child(3n) {
-webkit-animation-duration: 1s;
animation-duration: 1s
}
}
@media only screen and (min-width:768px) and (max-width:1023px) {
.news-teaser-holder.come-in:nth-child(3n+1) {
-webkit-animation-duration: .6s;
animation-duration: .6s
}
.news-teaser-holder.come-in:nth-child(3n+2) {
-webkit-animation-duration: .8s;
animation-duration: .8s
}
.news-teaser-holder.come-in:nth-child(3n) {
-webkit-animation-duration: 1s;
animation-duration: 1s
}
}
@media only screen and (min-width:1024px) {
.news-teaser-holder.come-in:nth-child(4n+1) {
-webkit-animation-duration: .6s;
animation-duration: .6s
}
.news-teaser-holder.come-in:nth-child(4n+2) {
-webkit-animation-duration: .8s;
animation-duration: .8s
}
.news-teaser-holder.come-in:nth-child(4n+3) {
-webkit-animation-duration: 1s;
animation-duration: 1s
}
.news-teaser-holder.come-in:nth-child(4n) {
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s
}
}
@media only screen and (min-width:768px) and (max-width:1365px) {
.team-card.come-in:nth-child(2n+1) {
-webkit-animation-duration: .6s;
animation-duration: .6s
}
.team-card.come-in:nth-child(2n) {
-webkit-animation-duration: .8s;
animation-duration: .8s
}
}
@media only screen and (min-width:1366px) and (max-width:1499px) {
.team-card.come-in:nth-child(3n+1) {
-webkit-animation-duration: .6s;
animation-duration: .6s
}
.team-card.come-in:nth-child(3n+2) {
-webkit-animation-duration: .8s;
animation-duration: .8s
}
.team-card.come-in:nth-child(3n) {
-webkit-animation-duration: 1s;
animation-duration: 1s
}
}
@media only screen and (min-width:1500px) {
.team-card.come-in:nth-child(4n+1) {
-webkit-animation-duration: .6s;
animation-duration: .6s
}
.team-card.come-in:nth-child(4n+2) {
-webkit-animation-duration: .8s;
animation-duration: .8s
}
.team-card.come-in:nth-child(4n+3) {
-webkit-animation-duration: 1s;
animation-duration: 1s
}
.team-card.come-in:nth-child(4n) {
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s
}
}
.js .staggered-entry.already-visible {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-animation: none;
animation: none
}
.js .scaled-entry.already-visible {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
opacity: 1;
-webkit-animation: none;
animation: none
}
.js .right-entry.already-visible {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation: none;
animation: none
}
.js .left-entry.already-visible {
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-animation: none;
animation: none
}
.js .bottom-entry.already-visible {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation: none;
animation: none
}
@-webkit-keyframes come-in {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@keyframes come-in {
to {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
@-webkit-keyframes scale-in {
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@keyframes scale-in {
to {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
}
}
@-webkit-keyframes right-in {
to {
-webkit-transform: translateX(0rem);
transform: translateX(0rem);
}
}
@keyframes right-in {
to {
-webkit-transform: translateX(0rem);
transform: translateX(0rem);
}
}
@-webkit-keyframes left-in {
to {
-webkit-transform: translateX(0rem);
transform: translateX(0rem);
}
}
@keyframes left-in {
to {
-webkit-transform: translateX(0rem);
transform: translateX(0rem);
}
}
@-webkit-keyframes bottom-in {
to {
-webkit-transform: translateY(0rem);
transform: translateY(0rem);
}
}
@keyframes bottom-in {
to {
-webkit-transform: translateY(0rem);
transform: translateY(0rem);
}
}
@media only screen and (min-width:768px) {
.client-logo.come-in:nth-child(5n+1) {
-webkit-animation-duration: .6s;
animation-duration: .6s
}
.client-logo.come-in:nth-child(5n+2) {
-webkit-animation-duration: .8s;
animation-duration: .8s
}
.client-logo.come-in:nth-child(5n+3) {
-webkit-animation-duration: 1s;
animation-duration: 1s
}
.client-logo.come-in:nth-child(5n+4) {
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s
}
.client-logo.come-in:nth-child(5n) {
-webkit-animation-duration: 1.4s;
animation-duration: 1.4s
}
}
video.plyr--setup {
width: 100%
}
@-webkit-keyframes plyr-progress {
to {
background-position: 25px 0;
}
}
@keyframes plyr-progress {
to {
background-position: 25px 0;
}
}
.plyr {
position: relative;
max-width: 100%;
min-width: 200px;
font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
direction: ltr
}
.plyr, .plyr *, .plyr *::after, .plyr *::before {
box-sizing: border-box
}
.plyr a, .plyr button, .plyr input, .plyr label {
touch-action: manipulation
}
.plyr:focus {
outline: 0
}
.plyr video, .plyr audio {
width: 100%;
height: auto;
vertical-align: middle;
border-radius: inherit
}
.plyr input[type="range"] {
display: block;
height: 20px;
width: 100%;
margin: 0;
padding: 0;
vertical-align: middle;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
border: none;
background: transparent
}
.plyr input[type="range"]::-webkit-slider-runnable-track {
height:8px;
background:transparent;
border:0;
border-radius:4px;
-webkit-user-select:none;
user-select:none
}
.plyr input[type="range"]::-webkit-slider-thumb {
-webkit-appearance:none;
margin-top:-4px;
position:relative;
height:16px;
width:16px;
background:#fff;
border:2px solid transparent;
border-radius:100%;
transition:background .2s ease, border .2s ease, -webkit-transform .2s ease;
transition:background .2s ease, border .2s ease, transform .2s ease;
transition:background .2s ease, border .2s ease, transform .2s ease, -webkit-transform .2s ease;
box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
box-sizing:border-box
}
.plyr input[type="range"]::-moz-range-track {
height:8px;
background:transparent;
border:0;
border-radius:4px;
-moz-user-select:none;
user-select:none
}
.plyr input[type="range"]::-moz-range-thumb {
position:relative;
height:16px;
width:16px;
background:#fff;
border:2px solid transparent;
border-radius:100%;
transition:background .2s ease, border .2s ease, -webkit-transform .2s ease;
transition:background .2s ease, border .2s ease, transform .2s ease;
transition:background .2s ease, border .2s ease, transform .2s ease, -webkit-transform .2s ease;
box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
box-sizing:border-box
}
.plyr input[type="range"]::-ms-track {
height:8px;
background:transparent;
border:0;
color:transparent
}
.plyr input[type="range"]::-ms-fill-upper {
height:8px;
background:transparent;
border:0;
border-radius:4px;
-ms-user-select:none;
user-select:none
}
.plyr input[type="range"]::-ms-fill-lower {
height:8px;
background:transparent;
border:0;
border-radius:4px;
-ms-user-select:none;
user-select:none;
background:#f17b2d
}
.plyr input[type="range"]::-ms-thumb {
position:relative;
height:16px;
width:16px;
background:#fff;
border:2px solid transparent;
border-radius:100%;
transition:background .2s ease, border .2s ease, -webkit-transform .2s ease;
transition:background .2s ease, border .2s ease, transform .2s ease;
transition:background .2s ease, border .2s ease, transform .2s ease, -webkit-transform .2s ease;
box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(0,0,0,.15);
box-sizing:border-box;
margin-top:0
}
.plyr input[type="range"]::-ms-tooltip {
display:none
}
.plyr input[type="range"]:focus {
outline: 0
}
.plyr input[type="range"]::-moz-focus-outer {
border:0
}
.plyr input[type="range"].tab-focus:focus {
outline-offset: 3px
}
.plyr input[type="range"]:active::-webkit-slider-thumb {
background:#f17b2d;
border-color:#fff;
-webkit-transform:scale(1.25);
transform:scale(1.25)
}
.plyr input[type="range"]:active::-moz-range-thumb {
background:#f17b2d;
border-color:#fff;
transform:scale(1.25)
}
.plyr input[type="range"]:active::-ms-thumb {
background:#f17b2d;
border-color:#fff;
transform:scale(1.25)
}
.plyr--video input[type="range"].tab-focus:focus {
outline: 1px dotted rgba(255,255,255,.5)
}
.plyr--audio input[type="range"].tab-focus:focus {
outline: 1px dotted rgba(86,93,100,.5)
}
.plyr__sr-only {
clip: rect(1px,1px,1px,1px);
overflow: hidden;
position: absolute!important;
padding: 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important
}
.plyr__video-wrapper {
position: relative;
background: #000;
border-radius: inherit;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC)
}
.plyr__video-embed {
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: inherit
}
.plyr__video-embed iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.plyr__video-embed>div {
position: relative;
padding-bottom: 200%;
-webkit-transform: translateY(-35.95%);
transform: translateY(-35.95%)
}
.plyr .plyr__video-embed iframe {
pointer-events: none
}
.plyr video::-webkit-media-text-track-container {
display:none
}
.plyr__captions {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease;
color: #fff;
font-size: 16px;
text-align: center;
font-weight: 400
}
.plyr__captions span {
border-radius: 2px;
padding: 3px 10px;
background: rgba(0,0,0,.7);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 150%
}
.plyr__captions span:empty {
display: none
}
@media (min-width:768px) {
.plyr__captions {
font-size: 24px
}
}
.plyr--captions-active .plyr__captions {
display: block
}
.plyr--fullscreen-active .plyr__captions {
font-size: 32px
}
.plyr--hide-controls .plyr__captions {
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
.plyr ::-webkit-media-controls {
display:none
}
.plyr__controls {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
line-height: 1;
text-align: center
}
.plyr__controls>button, .plyr__controls .plyr__progress, .plyr__controls .plyr__time {
margin-left: 5px
}
.plyr__controls>button:first-child, .plyr__controls .plyr__progress:first-child, .plyr__controls .plyr__time:first-child {
margin-left: 0
}
.plyr__controls .plyr__volume {
margin-left: 5px
}
.plyr__controls [data-plyr="pause"] {
margin-left: 0
}
.plyr__controls button {
position: relative;
display: inline-block;
flex-shrink: 0;
overflow: visible;
vertical-align: middle;
padding: 7px;
border: 0;
background: transparent;
border-radius: 3px;
cursor: pointer;
transition: background .3s ease, color .3s ease, opacity .3s ease;
color: inherit
}
.plyr__controls button svg {
width: 18px;
height: 18px;
display: block;
fill: currentColor
}
.plyr__controls button:focus {
outline: 0
}
.plyr__controls .icon--exit-fullscreen, .plyr__controls .icon--muted, .plyr__controls .icon--captions-on {
display: none
}
@media (min-width:480px) {
.plyr__controls>button, .plyr__controls .plyr__progress, .plyr__controls .plyr__time {
margin-left: 10px
}
}
.plyr--hide-controls .plyr__controls {
opacity: 0;
pointer-events: none
}
.plyr--video .plyr__controls {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 50px 10px 10px;
background: linear-gradient(transparent, rgba(0,0,0,.5));
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
color: #fff;
transition: opacity .3s ease
}
.plyr--video .plyr__controls button.tab-focus:focus, .plyr--video .plyr__controls button:hover {
background: #f17b2d;
color: #fff
}
.plyr--audio .plyr__controls {
padding: 10px;
border-radius: inherit;
background: #fff;
border: 1px solid #dbe3e8;
color: #565d64
}
.plyr--audio .plyr__controls button.tab-focus:focus, .plyr--audio .plyr__controls button:hover {
background: #f17b2d;
color: #fff
}
.plyr__play-large {
display: none;
position: absolute;
z-index: 1;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 10px;
background: #f17b2d;
border: 4px solid currentColor;
border-radius: 100%;
box-shadow: 0 1px 1px rgba(0,0,0,.15);
color: #fff;
transition: all .3s ease
}
.plyr__play-large svg {
position: relative;
left: 2px;
width: 20px;
height: 20px;
display: block;
fill: currentColor
}
.plyr__play-large:focus {
outline: 1px dotted rgba(255,255,255,.5)
}
.plyr .plyr__play-large {
display: inline-block
}
.plyr--audio .plyr__play-large {
display: none
}
.plyr--playing .plyr__play-large {
opacity: 0;
visibility: hidden
}
.plyr__controls [data-plyr="pause"], .plyr--playing .plyr__controls [data-plyr="play"] {
display: none
}
.plyr--playing .plyr__controls [data-plyr="pause"] {
display: inline-block
}
.plyr--fullscreen-active .icon--exit-fullscreen, .plyr--muted .plyr__controls .icon--muted, .plyr--captions-active .plyr__controls .icon--captions-on {
display: block
}
.plyr--fullscreen-active .icon--exit-fullscreen+svg, .plyr--muted .plyr__controls .icon--muted+svg, .plyr--captions-active .plyr__controls .icon--captions-on+svg {
display: none
}
.plyr [data-plyr="captions"], .plyr [data-plyr="fullscreen"] {
display: none
}
.plyr--captions-enabled [data-plyr="captions"], .plyr--fullscreen-enabled [data-plyr="fullscreen"] {
display: inline-block
}
.plyr__tooltip {
position: absolute;
z-index: 2;
bottom: 100%;
margin-bottom: 10px;
padding: 5px 7.5px;
pointer-events: none;
opacity: 0;
background: rgba(0,0,0,.7);
border-radius: 3px;
color: #fff;
font-size: 14px;
line-height: 1.3;
-webkit-transform: translate(-50%, 10px) scale(.8);
transform: translate(-50%, 10px) scale(.8);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
transition: opacity .2s .1s ease, -webkit-transform .2s .1s ease;
transition: transform .2s .1s ease, opacity .2s .1s ease;
transition: transform .2s .1s ease, opacity .2s .1s ease, -webkit-transform .2s .1s ease
}
.plyr__tooltip::before {
content: '';
position: absolute;
width: 0;
height: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
bottom: -4px;
border-right: 4px solid transparent;
border-top: 4px solid rgba(0,0,0,.7);
border-left: 4px solid transparent;
z-index: 2
}
.plyr button:hover .plyr__tooltip, .plyr button.tab-focus:focus .plyr__tooltip, .plyr__tooltip--visible {
opacity: 1;
-webkit-transform: translate(-50%, 0) scale(1);
transform: translate(-50%, 0) scale(1)
}
.plyr button:hover .plyr__tooltip {
z-index: 3
}
.plyr__controls button:first-child .plyr__tooltip {
left: 0;
-webkit-transform: translate(0, 10px) scale(.8);
transform: translate(0, 10px) scale(.8);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%
}
.plyr__controls button:first-child .plyr__tooltip::before {
left: 16px
}
.plyr__controls button:last-child .plyr__tooltip {
right: 0;
-webkit-transform: translate(0, 10px) scale(.8);
transform: translate(0, 10px) scale(.8);
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%
}
.plyr__controls button:last-child .plyr__tooltip::before {
left: auto;
right: 16px;
-webkit-transform: translateX(50%);
transform: translateX(50%)
}
.plyr__controls button:first-child:hover .plyr__tooltip, .plyr__controls button:first-child.tab-focus:focus .plyr__tooltip, .plyr__controls button:first-child .plyr__tooltip--visible, .plyr__controls button:last-child:hover .plyr__tooltip, .plyr__controls button:last-child.tab-focus:focus .plyr__tooltip, .plyr__controls button:last-child .plyr__tooltip--visible {
-webkit-transform: translate(0, 0) scale(1);
transform: translate(0, 0) scale(1)
}
.plyr__progress {
display: none;
position: relative;
-webkit-box-flex: 1;
flex: 1
}
.plyr__progress input[type="range"] {
position: relative;
z-index: 2
}
.plyr__progress input[type="range"]::-webkit-slider-runnable-track {
background:transparent
}
.plyr__progress input[type="range"]::-moz-range-track {
background:transparent
}
.plyr__progress input[type="range"]::-ms-fill-upper {
background:transparent
}
.plyr__progress .plyr__tooltip {
left: 0
}
.plyr .plyr__progress {
display: inline-block
}
.plyr__progress--buffer, .plyr__progress--played, .plyr__volume--display {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin: -4px 0 0;
padding: 0;
vertical-align: top;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: none;
border-radius: 100px
}
.plyr__progress--buffer::-webkit-progress-bar, .plyr__progress--played::-webkit-progress-bar, .plyr__volume--display::-webkit-progress-bar {
background:transparent
}
.plyr__progress--buffer::-webkit-progress-value, .plyr__progress--played::-webkit-progress-value, .plyr__volume--display::-webkit-progress-value {
background:currentColor;
border-radius:100px;
min-width:8px
}
.plyr__progress--buffer::-moz-progress-bar, .plyr__progress--played::-moz-progress-bar, .plyr__volume--display::-moz-progress-bar {
background:currentColor;
border-radius:100px;
min-width:8px
}
.plyr__progress--buffer::-ms-fill, .plyr__progress--played::-ms-fill, .plyr__volume--display::-ms-fill {
border-radius:100px
}
.plyr__progress--played, .plyr__volume--display {
z-index: 1;
color: #f17b2d;
background: transparent;
transition: none
}
.plyr__progress--played::-webkit-progress-value, .plyr__volume--display::-webkit-progress-value {
min-width:8px;
max-width:99%;
border-top-right-radius:0;
border-bottom-right-radius:0;
transition:none
}
.plyr__progress--played::-moz-progress-bar, .plyr__volume--display::-moz-progress-bar {
min-width:8px;
max-width:99%;
border-top-right-radius:0;
border-bottom-right-radius:0;
transition:none
}
.plyr__progress--played::-ms-fill, .plyr__volume--display::-ms-fill {
display:none
}
.plyr__progress--buffer::-webkit-progress-value {
transition:width .2s ease
}
.plyr__progress--buffer::-moz-progress-bar {
transition:width .2s ease
}
.plyr__progress--buffer::-ms-fill {
transition:width .2s ease
}
.plyr--video .plyr__progress--buffer, .plyr--video .plyr__volume--display {
background: rgba(255,255,255,.25)
}
.plyr--video .plyr__progress--buffer {
color: rgba(255,255,255,.25)
}
.plyr--audio .plyr__progress--buffer, .plyr--audio .plyr__volume--display {
background: rgba(198,214,219,.67)
}
.plyr--audio .plyr__progress--buffer {
color: rgba(198,214,219,.67)
}
.plyr--loading .plyr__progress--buffer {
-webkit-animation: plyr-progress 1s linear infinite;
animation: plyr-progress 1s linear infinite;
background-size: 25px 25px;
background-repeat: repeat-x;
background-image: linear-gradient(-45deg, rgba(0,0,0,.15) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.15) 50%, rgba(0,0,0,.15) 75%, transparent 75%, transparent);
color: transparent
}
.plyr--video.plyr--loading .plyr__progress--buffer {
background-color: rgba(255,255,255,.25)
}
.plyr--audio.plyr--loading .plyr__progress--buffer {
background-color: rgba(198,214,219,.67)
}
.plyr__time {
display: inline-block;
vertical-align: middle;
font-size: 14px
}
.plyr__time+.plyr__time {
display: none
}
@media (min-width:768px) {
.plyr__time+.plyr__time {
display: inline-block
}
}
.plyr__time+.plyr__time::before {
content: '\2044';
margin-right: 10px
}
.plyr__volume {
display: none
}
.plyr .plyr__volume {
-webkit-box-flex: 1;
flex: 1;
position: relative
}
.plyr .plyr__volume input[type="range"] {
position: relative;
z-index: 2
}
@media (min-width:480px) {
.plyr .plyr__volume {
display: block;
max-width: 60px
}
}
@media (min-width:768px) {
.plyr .plyr__volume {
max-width: 100px
}
}
.plyr--is-ios .plyr__volume, .plyr--is-ios [data-plyr="mute"] {
display: none!important
}
.plyr--fullscreen-active {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 10000000;
background: #000;
border-radius: 0!important
}
.plyr--fullscreen-active video {
height: 100%
}
.plyr--fullscreen-active .plyr__video-wrapper {
height: 100%;
width: 100%
}
.plyr--fullscreen-active .plyr__controls {
position: absolute;
bottom: 0;
left: 0;
right: 0
}
.plyr--fullscreen-active.plyr--vimeo .plyr__video-wrapper {
height: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.text-page-content {
max-width: 60rem;
margin: 0 auto;
padding: 2rem
}
@media only screen and (min-width:768px) {
.text-page-content {
padding: 4rem
}
}
.widget {
margin: 0 0 2rem
}
.widget--snippet {
background: #ededed;
padding:2rem 2rem .1rem;
margin: 0 0 2rem
}
.widget--snippet h2 {
margin: 0 0 1.5rem
}
@media only screen and (min-width:480px) {
.widget--snippet {
background: #ededed;
padding: 4rem 4rem 2rem;
margin: 0 0 2rem
}
.widget--snippet h2 {
margin: 0 0 1.5rem;
font-size: 3rem
}
}
.widget--section-title {
margin: 2rem 0 1.5rem
}
.widget--section-title h2 {
margin: 0
}
@media only screen and (min-width:480px) {
.widget--section-title {
margin: 4rem 0 1.5rem
}
.widget--section-title h2 {
font-size: 5rem
}
}
.widget--image {
margin: 0 0 2rem
}
.widget--image img {
width: 100%;
height: auto
}
.widget--video {
margin: 0 0 2rem
}
.widget--quote {
margin: 0 0 3rem
}
.widget--quote figure {
padding: 0;
margin: 0
}
.widget--quote blockquote {
padding: 0;
margin: 0;
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
font-size: 2rem;
color: #f17b2d
}
@media only screen and (max-width:479px) {
.widget--quote_footer cite {
display: table;
padding:.5rem 1rem;
background: #333;
font-size: 1.8rem;
font-family: 'bebas_neueregular', sans-serif;
margin: 1rem 0 0;
color: #fff;
font-style: normal
}
.widget--quote_footer cite+cite {
margin:.2rem 0 0
}
}
@media only screen and (min-width:480px) {
.widget--quote_footer {
display: table;
padding:.5rem 1rem;
background: #333;
font-size: 1.8rem;
font-family: 'bebas_neueregular', sans-serif;
margin: 1rem 0 0;
color: #fff
}
.widget--quote_footer cite {
font-style: normal
}
.widget--quote_footer cite+cite {
margin:0 0 0 .5rem
}
.widget--quote blockquote {
font-size: 3rem
}
}
.widget--text a:not(.btn) {
transition: background-color .25s ease;
padding:0 .5rem;
color: #fff;
background-color: #f17b2d;
border-radius: 2px
}
.widget--text a:not(.btn):hover {
background: #333!important
}
.slick-loading .slick-list {
background: #fff url(https://www.digitalmarmalade.co.uk/vendor/dm/img/ajax-loader.gif.pagespeed.ce.xc1_UwBXar.gif) center center no-repeat;
min-height: 400px
}
.slick-prev, .slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0;
font-size: 0;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
outline: none;
background: transparent;
color: transparent
}
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
opacity: 1
}
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
opacity: .25
}
.slick-prev:before, .slick-next:before {
font-family: "slick";
font-size: 20px;
line-height: 1;
color: #006778;
opacity: .75;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.slick-prev {
left: 10px
}
[dir="rtl"] .slick-prev {
left: auto;
right: -25px
}
.slick-prev:before {
content: "←"
}
[dir="rtl"] .slick-prev:before {
content: "→"
}
.slick-next {
right: -25px
}
[dir="rtl"] .slick-next {
left: -25px;
right: auto
}
.slick-next:before {
content: "→"
}
[dir="rtl"] .slick-next:before {
content: "←"
}
.slick-dotted.slick-slider {
margin-bottom: 30px
}
.slick-dots {
position: absolute;
bottom: -25px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%
}
.slick-dots li {
position: relative;
display: inline-block;
height: 20px;
width: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer
}
.slick-dots li button {
border: 0;
background: transparent;
display: block;
height: 20px;
width: 20px;
outline: none;
line-height: 0;
font-size: 0;
color: transparent;
padding: 5px;
cursor: pointer
}
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
opacity: 1
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "slick";
font-size: 6px;
line-height: 20px;
text-align: center;
color: #000;
opacity: .25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.slick-dots li.slick-active button:before {
color: #000;
opacity: .75
}
.slick-slide .lazyloaded {
width: 100%
}
.feature-banner {
position: relative;
width: 100%;
overflow: hidden
}
.feature-banner__control {
padding: 10px;
background: #006778;
border-radius: 50%;
position: absolute;
top: 50%;
width: 30px;
height: 30px;
margin-top: -15px;
cursor: pointer;
transition: all .25s;
fill: #fff
}
.feature-banner__control:hover {
width: 50px;
height: 50px;
margin-top: -25px
}
.feature-banner__control--previous {
left: -100px
}
.feature-banner:hover .feature-banner__control--previous {
left: 25px
}
.feature-banner:hover .feature-banner__control--previous:hover {
left: 15px
}
.feature-banner__control--next {
right: -100px
}
.feature-banner:hover .feature-banner__control--next {
right: 25px
}
.feature-banner:hover .feature-banner__control--next:hover {
right: 15px
}
.feature-banner__text {
position: absolute;
z-index: 10;
left: 0;
width: 100%;
bottom: -150px;
background: rgba(0,0,0,.6);
padding: 20px;
color: #fff;
transition: bottom .75s ease;
opacity: 0
}
.slick-current .feature-banner__text {
bottom: 0;
opacity: 1
}
@media only screen and (min-width:768px) {
.feature-banner__text {
left: 100px;
bottom: -250px;
width: auto
}
.slick-current .feature-banner__text {
bottom: 50px
}
}
html {
overflow-y: scroll
}
.page-transition-cover, .next-page-transition-cover, .previous-page-transition-cover {
position: fixed;
left: 0;
top: 0;
width: 0;
height: 100vh;
background-color: #f17b2d;
background-repeat: no-repeat;
background-position: center center;
z-index: 2100;
background-size: 10rem 10rem;
transition: background-color .5s ease, all .25s;
overflow: hidden
}
.page-transition-cover::before, .next-page-transition-cover::before, .previous-page-transition-cover::before {
position: absolute;
left: 50%;
top: 50%;
display: block;
content: '';
width: 1rem;
-webkit-transform: translate(-50%, 8rem);
transform: translate(-50%, 8rem);
height:.6rem;
background: #fff;
transition: all 0s;
opacity: .1;
border-radius:.2rem
}
.page-transition-cover::after, .next-page-transition-cover::after, .previous-page-transition-cover::after {
position: absolute;
left: 50%;
top: 50%;
display: block;
content: '';
width: 1rem;
-webkit-transform: translate(-50%, 8.2rem);
transform: translate(-50%, 8.2rem);
height:.2rem;
background: #fff;
transition: all 0;
opacity: .8
}
.next-page-transition-cover {
width: 0;
right: 0;
left: 100%
}
.previous-page-transition-cover {
width: 0;
left: 0;
right: 100%
}
.outro .page-transition-cover {
width: 100vw
}
.outro .page-transition-cover::before {
width: 70%;
transition: all 4s;
max-width: 30rem
}
.outro .page-transition-cover::after {
width: 70%;
transition: all 14s;
max-width: 30rem
}
.next-page-outro .next-page-transition-cover::before {
width: 70%;
transition: all 4s;
max-width: 30rem
}
.next-page-outro .next-page-transition-cover::after {
width: 70%;
transition: all 14s;
max-width: 30rem
}
.next-page-outro .next-page-transition-cover {
left: 0;
width: auto
}
.next-page-loaded .next-page-transition-cover {
right: 100%
}
.previous-page-outro .previous-page-transition-cover::before {
width: 70%;
transition: all 4s;
max-width: 30rem
}
.previous-page-outro .previous-page-transition-cover::after {
width: 70%;
transition: all 14s;
max-width: 30rem
}
.previous-page-outro .previous-page-transition-cover {
right: 0;
width: auto
}
.previous-page-loaded .previous-page-transition-cover {
left: 100%
}
.contact {
padding: 2rem;
background-color: #333;
background-size: cover;
background-position: center bottom;
color: #fff;
position: relative
}
.contact .address-contact-methods {
position: static;
text-align: left
}
.contact .address-contact-methods a {
margin: 0;
background: #d96e28
}
.contact .address-contact-methods p {
margin:0 0 .3rem
}
.map {
background: #ccc
}
.js .contact:after {
content: '';
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
transition: height 1s ease;
background: #333
}
.js .contact.image--loaded:after {
height: 0
}
@media only screen and (min-width:768px) {
.contact-and-map {
display: -webkit-box;
display: flex
}
.contact {
width: 50%;
padding: 5rem
}
.map {
width: 50%;
background: #ccc
}
}
@media only screen and (min-width:1024px) {
.contact {
width: 40%
}
.map {
width: 60%
}
}
.case-study-list {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
background: #333
}
.case-study-slice-holder {
width: 100%;
overflow: hidden;
height: 85vh;
max-height: 67rem
}
.case-study-slice {
width: 100%;
position: relative;
color: #fff;
background-color: #000;
height: 90vh;
min-height: 30rem;
max-height: 80rem;
background-size: cover;
background-position: left top
}
.case-study-slice-text {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: absolute;
left: 2rem;
bottom: 2rem;
min-height: 22rem;
right: 2rem;
z-index: 1
}
.case-study-slice-heading {
font-size: 3.6rem;
line-height: 3.4rem;
margin:.5rem 0 2rem;
position: relative;
-webkit-box-ordinal-group: 3;
order: 2;
-webkit-box-flex: 1;
flex-grow: 1
}
.case-study-slice-heading:before {
content: '';
display: block;
height:.5rem;
width: 6rem;
background: #fff;
margin: 0 0 1rem;
transition: width .25s ease 1s
}
.js .case-study-slice-heading:before {
width: 0
}
.js .come-in .case-study-slice-heading:before, .js .already-visible .case-study-slice-heading:before {
width: 6rem
}
.left .case-study-slice-heading:before {
transition-delay: 1.2s
}
.right .case-study-slice-heading:before {
transition-delay: 1.4s
}
.case-study-slice-client {
-webkit-box-ordinal-group: 2;
order: 1;
font-size: 2.1rem;
margin:0 0 .5rem;
text-transform: uppercase
}
.case-study-slice-action {
-webkit-box-ordinal-group: 4;
order: 3
}
.js .case-study-slice:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 100%;
transition: width 1s ease
}
.pink-cover, .pink-cover:after {
background-color: #f04576;
transition-delay: .1s
}
.blue-cover, .blue-cover:after {
background-color: #52c7eb;
transition-delay: .2s
}
.purple-cover, .purple-cover:after {
background-color: #702c82;
transition-delay: .3s
}
.green-cover, .green-cover:after {
background-color: #a9c000;
transition-delay: .4s
}
.orange-cover, .orange-cover:after {
background-color: #f17b2d;
transition-delay: .5s
}
.js .case-study-slice.image--loaded:after {
width: 0
}
.js .case-study-slice-heading {
-webkit-transform: translateX(-20rem);
transform: translateX(-20rem);
transition: all .5s ease .5s;
opacity: 0
}
.js .already-visible .case-study-slice-heading, .js .come-in .case-study-slice-heading {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
.js .case-study-slice-client {
-webkit-transform: translateX(-20rem);
transform: translateX(-20rem);
transition: all .5s ease .6s;
opacity: 0
}
.js .already-visible .case-study-slice-client, .js .come-in .case-study-slice-client {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
.js .case-study-slice-action {
-webkit-transform: translateX(-20rem);
transform: translateX(-20rem);
transition: all .5s ease .4s;
opacity: 0
}
.js .already-visible .case-study-slice-action, .js .come-in .case-study-slice-action {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1
}
@media only screen and (min-width:400px) {
.case-study-slice-text {
left: 4rem;
right: 4rem;
bottom: 4rem
}
}
@media only screen and (min-width:768px) {
.case-study-slice-text {
left: 5rem;
bottom: 5rem;
min-height: 33.5rem;
max-width: calc(75% - 5rem)
}
.case-study-slice-heading {
font-size: 6rem;
line-height: 5rem
}
.case-study-slice-heading:after {
height:.8rem;
width: 10.6rem;
margin: 0 0 1.5rem
}
.js .come-in .case-study-slice-heading:before, .js .already-visible .case-study-slice-heading:before {
width: 10.6rem
}
.case-study-slice-client {
font-size: 3rem;
margin:0 0 .5rem
}
.case-study-slice--half-width {
width: 50%
}
.case-study-slice--half-width .case-study-slice-text {
max-width: calc(100% - 10rem)
}
}
@media only screen and (min-width:1366px) {
.case-study-slice-text {
max-width: 50rem;
min-height: 32rem
}
.case-study-slice-heading {
font-size: 7rem;
line-height: 6rem
}
.case-study-slice-heading:after {
height:.8rem;
width: 10.6rem;
margin: 0 0 1.5rem
}
.case-study-slice-client {
font-size: 3rem;
margin:0 0 .5rem
}
}
.contact-footer {
background: #ededed;
padding: 2rem;
text-align: center
}
@media only screen and (min-width:768px) {
.contact-footer {
padding: 5rem
}
}
.contact-footer-heading {
font-size: 4rem;
line-height: 3.8rem;
margin: 0 0 2rem
}
@media only screen and (max-width:1023px) {
.contact-footer-links {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
margin: 0 -1rem
}
.contact-footer-links .btn {
width: calc(50% - 2rem);
margin: 0 1rem 1.5rem;
padding: 10px 0;
text-align: center
}
}
@media only screen and (min-width:1024px) {
.contact-footer-links .btn {
margin:0 .7rem
}
}
.no-js .filter {
display: none
}
.filter {
border: 1px solid #1b1b1b;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
background: #ededed;
z-index: 100
}
.filter a {
-webkit-box-flex: 1;
flex: 1;
margin: 0;
font-size: 1.2rem;
line-height: 1.2rem;
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
padding: 1rem;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
text-align: center;
transition: all .25s
}
.filter a:not(:first-child) {
border-left: 1px solid #1b1b1b
}
.filter a:hover {
background: #333;
color: #fff
}
.filter a.active {
background: #1b1b1b;
color: #fff
}
.filter--light {
border-color: #fff
}
.filter--light a:not(:first-child) {
border-left: 1px solid #fff
}
.filter--light a.active {
background: #fff;
color: #1b1b1b
}
.team-card-back .filter {
background: transparent
}
@media only screen and (min-width:768px) {
.filter a {
padding: 1.5rem;
font-size: 1.6rem
}
}
.filter-cloned {
position: fixed;
left: 0;
width: 100vw;
top: 5rem
}
@media only screen and (min-width:1024px) {
.filter-cloned {
top: 0;
left: 20rem;
width: calc(100vw - 20rem)
}
}
@media only screen and (max-width:1023px) {
.filter-cloned {
transition: all .15s ease 0s
}
.nav-expanded .filter-cloned {
left: 30rem
}
}
.top-header {
background-color:#f04576;
color:#ededed;
}
.page-header {
background: #111;
/*background: #ededed;*/
padding: 10px; color:#fff
}
.page-header.page-header--with-filter {
padding-bottom: 0
}
.page-header.page-header--with-filter .filter {
margin: 0 -2rem
}
.page-header--with-search {
background: none;
padding:1rem .5rem
}
.page-header--white {
background: #fff
}
@media only screen and (min-width:768px) {
.page-header {
padding: 8rem 5rem 5rem
}
.page-header h1,.top-header h1 {
font-size: 7.2rem;
text-align: center;
margin: 0 0 5rem; font-family: 'Luckiest Guy';
}
.page-header_single-column {
text-align: center;
max-width: 70rem;
margin: -2rem auto 0
}
.column-text {
display: -webkit-box;
display: flex;
margin: 0 -3rem
}
.column {
-webkit-box-flex: 1;
flex: 1;
padding: 0 3rem
}
.page-header.page-header--with-filter .filter {
margin: 0 -5rem
}
}
.delayed-image {
position: relative
}
.delayed-image:after {
position: absolute;
width: 100%;
height: 100%;
background-color: inherit;
content: '';
display: block;
transition: all .5s ease
}
.delayed-image--from-top:after {
bottom: 0;
left: 0
}
.delayed-image--from-bottom:after {
top: 0;
left: 0
}
.delayed-image--from-left:after {
top: 0;
right: 0
}
.delayed-image--from-right:after {
top: 0;
left: 0
}
.delayed-image.image--loaded.delayed-image--from-bottom:after, .delayed-image.image--loaded.delayed-image--from-top:after {
height: 0
}
.delayed-image.image--loaded.delayed-image--from-right:after, .delayed-image.image--loaded.delayed-image--from-left:after {
width: 0
}
.mobile-read-more.triggered, .no-js .mobile-read-more {
display: none
}
@media only screen and (max-width:767px) {
.js .mobile-read-more-content {
display: none
}
.js .mobile-read-more-content.expanded {
display: block
}
.mobile-read-more {
border-top: 1px solid rgba(0,0,0,.1);
background: linear-gradient(to bottom, rgba(0,0,0,.05) 0%, transparent 50%);
text-align: center;
font-family: "bebas_neuebold", Impact, Charcoal;
text-transform: uppercase;
font-size: 2rem
}
.mobile-read-more a {
display: table;
padding: 1rem 1rem 0;
margin: 0 auto
}
}
@media only screen and (min-width:768px) {
.mobile-read-more {
display: none
}
}
.client-testimonial-holder {
background-size: cover;
background-position: center
}
.client-testimonial {
margin: 0;
padding: 0;
color: #fff;
padding: 2rem
}
.client-testimonial blockquote {
margin: 0;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 2.15rem;
line-height: 1.4
}
.client-testimonial-footer {
display: table;
padding:.5rem 1rem;
background: #f17b2d;
font-size: 1.8rem;
font-family: 'bebas_neueregular', sans-serif;
margin: 1rem 0 0;
color: #fff
}
.client-testimonial-footer cite {
font-style: normal
}
@media only screen and (min-width:768px) {
.client-testimonial {
padding: 5rem
}
.client-testimonial blockquote, .client-testimonial footer {
max-width: 70%
}
.client-testimonial blockquote {
font-size: 3rem;
line-height: 3.6rem
}
.client-testimonial .client-testimonial-footer {
font-size: 2.4rem;
margin: 2.5rem 0 0
}
}
@media only screen and (min-width:1024px) {
.client-testimonial {
padding: 10rem 5rem
}
}
.client-testimonial--on-light {
color: #333;
background-image: none
}
.testimonial--the-name {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/xeinstein.png.pagespeed.ic.H0Xr_vbeh6.png) no-repeat right center;
background-size: auto 100%
}
.expertise-slice {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column
}
.expertise-slice-text {
padding: 3rem 2rem 2rem
}
.expertise-slice-image {
background-size: cover;
background-position: center center
}
.expertise-slice-heading {
font-size: 4rem;
line-height: 3.8rem;
margin: 0 0 2rem
}
.expertise-slice-links {
padding-top: 2rem
}
.expertise-slice-links .btn {
margin: 0 1.5rem 1.5rem 0
}
@media only screen and (max-width:767px) {
.expertise-slice-image {
height: 40vh
}
}
@media only screen and (min-width:768px) {
.expertise-slice {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row
}
.expertise-slice-text {
padding: 5rem;
width: 50%;
-webkit-box-ordinal-group: 2;
order: 1
}
.expertise-slice-text p {
margin: 0 0 2rem
}
.expertise-slice-image {
width: 50%;
-webkit-box-ordinal-group: 3;
order: 2
}
.expertise-slice-heading {
font-size: 6rem;
line-height: 5.4rem;
margin: 0 0 2rem
}
.expertise-slice-links {
padding-top: 5rem
}
.expertise-slice-image--app-dev {
background-size: cover;
background-position: 75% center
}
}
@media only screen and (min-width:1366px) {
.expertise-slice-text {
width: 37%
}
.expertise-slice-image {
width: 63%
}
}
.feature-grid {
background: #f17b2d;
overflow: hidden;
color: #fff
}
.feature-grid {
height: calc(100vh - 50px);
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
position: relative
}
.slice {
height: 20%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
padding: 0 1rem;
position: relative
}
.site-title {
font-size: 3.6rem;
line-height: 3.4rem;
margin:.5rem 0 0;
position: relative
}
.site-title:before {
content: '';
display: block;
height:.5rem;
width: 6rem;
background: #fff;
margin: 0 0 1rem
}
.preload .feature-slice-content {
display: none
}
.js .feature-slice-content {
display: block;
position: absolute;
z-index: 30;
background: none!important;
overflow: hidden;
pointer-events: none;
transition: all .25s ease
}
.js .feature-slice-content h2 {
transition: all .15s ease 0s;
margin: 0 0 1rem
}
.js .feature-slice-content h3, .js .feature-slice-content p {
opacity: 0;
transition: all .15s ease 0s;
-webkit-transform: translateY(5rem);
transform: translateY(5rem)
}
.js .feature-slice-content h3 {
position: relative
}
.js .feature-slice-content h3:before {
content: '';
display: block;
height:.5rem;
width: 6rem;
background: #fff;
margin: 0 0 1rem
}
.b, .b.slice--image:after {
background: #f04576;
transition-delay: .1s
}
.c, .c.slice--image:after {
background: #52c7eb;
transition-delay: .2s
}
.d, .d.slice--image:after {
background: #702c82;
transition-delay: .3s
}
.e, .e.slice--image:after {
background: #a9c000;
transition-delay: .4s
}
.feature-slice-content.expanded {
pointer-events: auto
}
.feature-slice-content.expanded h2 {
transition: all .15s ease
}
.feature-slice-content.expanded h3, .feature-slice-content.expanded p {
transition: all .15s ease .3s
}
.has-slice-expanded .feature-slice-content:not(.expanded) {
opacity: 0;
transition: all .15s ease 0s
}
.feature-slice-close {
position: absolute;
right: 2rem;
top: -4rem;
width: 4rem;
height: 4rem;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
z-index: 30;
transition: all .15s ease 0s
}
.feature-slice-close svg {
height: 2.4rem;
width: 2.4rem;
fill: #fff
}
.has-slice-expanded .feature-slice-close {
top: 2rem;
transition: all .15s ease .3s
}
.b, .c, .d, .e {
background-size: cover!important
}
.scroll-to-next {
position: absolute;
left: 50%;
bottom: 0;
display: block;
width: 4rem;
height: 3rem;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 20;
background: #f17b2d;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center
}
.scroll-to-next svg {
fill: #fff;
width: 1.4rem;
height: 1.4rem
}
@media only screen and (max-height:550px) {
.site-title {
font-size: 2.8rem;
line-height: 2.6rem
}
}
@media only screen and (max-width:1023px) {
.slice--image:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
top: 0;
width: 100%;
transition: width 1s ease
}
.slice--image.image--loaded:after {
width: 0
}
.a {
-webkit-box-ordinal-group: 4;
order: 3
}
.b {
background-position: 0 -20rem;
-webkit-box-ordinal-group: 2;
order: 1
}
.c {
background-position: 0 -20rem;
-webkit-box-ordinal-group: 3;
order: 2
}
.d {
background-position: 0 -20rem;
-webkit-box-ordinal-group: 5;
order: 4
}
.e {
background-position: 0 -20rem;
-webkit-box-ordinal-group: 6;
order: 5
}
.b.feature-slice-content {
top: 0
}
.c.feature-slice-content {
top: 20%
}
.d.feature-slice-content {
top: 60%
}
.e.feature-slice-content {
top: 80%
}
.slice {
transition: all .15s ease
}
.has-slice-expanded .slice {
height: 0;
overflow: hidden
}
.has-slice-expanded .slice.expanded {
height: 100%;
background-position: 0 top
}
.js .site-title {
transition: opacity .15s .3s;
opacity: 1
}
.has-slice-expanded .site-title {
opacity: 0;
transition: opacity .15s 0s
}
.js .feature-slice-content {
height: 20%;
width: 100%;
padding: 1rem
}
.js .feature-slice-content h2 {
font-size: 1.6rem
}
.js .feature-slice-content h3 {
font-size: 4rem;
line-height: 3.6rem
}
.feature-slice-content.expanded {
top: 50%;
height: auto;
left: 0;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
.feature-slice-content.expanded h2 {
font-size: 2.1rem;
left: 0;
-webkit-transform: translateX(0%);
transform: translateX(0%)
}
.feature-slice-content.expanded h3 {
margin: 0 0 1rem
}
.feature-slice-content.expanded h3, .feature-slice-content.expanded p {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
.slice--text {
background: #a9c000
}
}
@media only screen and (min-width:768px) {
.site-title {
font-size: 7rem;
line-height: 6rem
}
.site-title:after {
height:.8rem;
width: 10.6rem;
margin: 0 0 1rem
}
.js .feature-slice-content {
padding: 2rem
}
.js .feature-slice-content h3 {
font-size: 9.6rem;
line-height: 8.6rem;
margin: 0
}
.feature-slice-content.expanded h2 {
transition: all .15s ease 0s
}
.feature-slice-content.expanded h3, .feature-slice-content.expanded p {
transition: all .15s ease .75s
}
.feature-slice-content.expanded h2 {
font-size: 3.6rem;
left: 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
margin: 0 0 1rem
}
.feature-slice-content.expanded h3 {
margin: 0 0 3rem
}
.feature-slice-content.expanded h3:after {
height:.8rem;
width: 10.6rem;
-webkit-transform: translateY(-1rem);
transform: translateY(-1rem)
}
.feature-slice-content.expanded h3, .feature-slice-content.expanded p {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
}
@media only screen and (min-width:1024px) {
.feature-grid {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
height: 100vh
}
.slice--image:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100%;
transition: height 1s ease
}
.slice--image.image--loaded:after {
height: 0
}
.slice--text {
height: auto;
pointer-events: none;
position: absolute;
top: 50%;
left: 5.5rem;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
max-width: 75%;
z-index: 10;
transition: opacity .15s .5s;
opacity: 1
}
.has-slice-expanded .slice--text {
opacity: 0;
transition: opacity .15s 0s
}
.site-title {
font-size: 9.6rem;
line-height: 8.6rem;
transition: -webkit-transform .15s .5s;
transition: transform .15s .5s;
transition: transform .15s .5s, -webkit-transform .15s .5s
}
.has-slice-expanded .site-title {
-webkit-transform: translateY(5rem);
transform: translateY(5rem);
transition: -webkit-transform .15s 0s;
transition: transform .15s 0s;
transition: transform .15s 0s, -webkit-transform .15s 0s
}
.b.feature-slice-content {
left: 0
}
.c.feature-slice-content {
left: 25%
}
.d.feature-slice-content {
left: 50%
}
.e.feature-slice-content {
left: 75%
}
.slice--image {
height: 100%;
width: 25%;
padding: 0;
transition: all .15s ease
}
.has-slice-expanded .slice--image {
width: 0
}
.has-slice-expanded .slice--image.expanded {
width: 100%;
background-position: 0 top
}
.b {
background-position: -660px top;
-webkit-box-ordinal-group: 2;
order: 1
}
.c {
background-position: -680px top;
-webkit-box-ordinal-group: 3;
order: 2
}
.d {
background-position: -602px top;
-webkit-box-ordinal-group: 5;
order: 4
}
.e {
background-position: -560px top;
-webkit-box-ordinal-group: 6;
order: 5
}
.js .feature-slice-content {
width: 25%;
top: 4rem;
opacity: 1;
padding: 0 5.5rem
}
.js .feature-slice-content h2 {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: table;
margin: 0;
white-space: nowrap
}
.feature-slice-content.expanded {
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 90%;
left: 0;
padding: 0 5.5rem
}
.feature-slice-content.expanded h2 {
transition: all .15s ease 0s
}
.feature-slice-content.expanded h3, .feature-slice-content.expanded p {
transition: all .15s ease .75s
}
.feature-slice-content.expanded h2 {
font-size: 3.6rem;
left: 0;
-webkit-transform: translateX(0%);
transform: translateX(0%);
margin: 0 0 1rem
}
.feature-slice-content.expanded h3 {
margin: 0 0 3rem
}
.feature-slice-content.expanded h3:after {
height:.8rem;
width: 10.6rem;
-webkit-transform: translateY(-1rem);
transform: translateY(-1rem)
}
.feature-slice-content.expanded h3, .feature-slice-content.expanded p {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1
}
.scroll-to-next {
width: 10rem;
height: 4rem
}
.scroll-to-next svg {
width: 2.6rem;
height: 2.6rem
}
}
.link-cover {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
cursor: pointer
}
.has-slice-expanded .link-cover {
display: none
}
@media only screen and (min-width:1366px) {
.site-title {
font-size: 12rem;
line-height: 11rem
}
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0 0 1.5rem;
line-height: 1.2;
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
text-transform: uppercase
}
h1, .h1 {
font-size: 3.6rem;
line-height: 1
}
h2, .h2 {
font-size: 2.4rem;
line-height: 1
}
h3, .h3 {
font-size: 1.8rem;
line-height: 1
}
h4, .h4 {
font-size: 1.6rem;
line-height: 1
}
h5, .h5 {
font-size: 1.4rem;
line-heigh: 1
}
h6, .h6 {
font-size: 1.2rem;
line-height: 1
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
font-size: 65%;
color: #666
}
*+h1, *+h2, *+h3, *+h4, *+h5, *+h6 {
margin-top: 2.5rem
}
.centre-heading {
text-align: center;
margin: 3rem 0
}
@media only screen and (min-width:1024px) {
.centre-heading {
margin: 5rem 0 3rem;
font-size: 4rem
}
}
.heading-underline {
font-size: 2.4rem;
line-height: 2.4rem;
margin: 0;
position: relative;
-webkit-box-ordinal-group: 3;
order: 2;
-webkit-box-flex: 1;
flex-grow: 1;
text-align: center
}
.heading-underline:after {
content: '';
display: block;
height:.5rem;
width: 6rem;
background: #f17b2d;
transition: width .25s ease 1s;
margin: 1rem auto 2rem;
transition: width .25s ease .25s
}
.js .heading-underline:after {
width: 0
}
.js .already-visible.heading-underline:after, .js .come-in.heading-underline:after {
width: 6rem
}
@media only screen and (min-width:768px) {
.heading-underline {
font-size: 3.6rem;
line-height: 3.6rem
}
.heading-underline:after {
margin: 2rem auto 5rem
}
}
.services-grid {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
position: relative;
color: #fff
}
.services-slice {
width: 50%;
padding: 2rem
}
.services-slice a {
text-decoration: none;
color: inherit;
display: block;
text-align: center;
padding: 0 1rem
}
.services-slice h2 {
margin: 0;
-webkit-transform: translateY(0);
transform: translateY(0);
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease, -webkit-transform .25s ease
}
.services-grid-icon {
width: 6rem;
height: 6rem;
margin: 0 0 1.5rem;
-webkit-transform: translateY(0);
transform: translateY(0);
transition: -webkit-transform .25s ease;
transition: transform .25s ease;
transition: transform .25s ease, -webkit-transform .25s ease
}
.services-slice a:hover .services-grid-icon {
-webkit-transform: translateY(-1rem);
transform: translateY(-1rem)
}
.services-slice a:hover h2 {
-webkit-transform:translateY(.5rem);
transform:translateY(.5rem)
}
@media only screen and (min-width:768px) {
.services-slice a {
padding: 3rem
}
.services-slice h2 {
font-size: 3.6rem;
line-height: 3.6rem
}
}
@media only screen and (min-width:1024px) {
.services-slice h2 {
font-size: 4.8rem;
line-height: 4.8rem
}
.services-grid-icon {
width: 10rem;
height: 10rem;
margin: 0 0 1.5rem
}
}
.more-link {
text-align: center;
padding: 2rem 0
}
@media only screen and (min-width:768px) {
.more-link {
padding: 4rem 0 5rem
}
}
.client-logo-list {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
padding: 0 1rem
}
.client-logo {
width: 33.333%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding:2rem .75rem
}
.client-logo svg {
max-width: 100%;
height: auto
}
@media only screen and (max-width:479px) {
.client-logo:nth-child(10) {
display: none
}
}
@media only screen and (min-width:480px) {
.client-logo-list {
padding: 0 2rem
}
.client-logos {
padding: 2rem 0 5rem
}
.client-logo {
width: 20%;
padding: 2rem
}
}
@media only screen and (min-width:1366px) {
.client-logo-list {
padding: 0 4rem 4rem
}
.client-logo {
padding: 4rem
}
}
.meet-the-team {
background: #ededed
}
@media only screen and (min-width:768px) {
.meet-the-team {
margin-top: -6rem
}
}
.team-list {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
overflow: hidden;
background: #f04576
}
.team-card {
color: #fff;
position: relative;
background-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.2) 50%, transparent 100%)
}
.team-card-front {
position: relative
}
.team-card-back {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: 2;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.team-card:nth-child(5n) {
background-color: #f04576
}
.team-card:nth-child(5n+1) {
background-color: #52c7eb
}
.team-card:nth-child(5n+2) {
background-color: #702c82
}
.team-card:nth-child(5n+3) {
background-color: #a9c000
}
.team-card:nth-child(5n+4) {
background-color: #f17b2d
}
.team-card-front, .team-card-back {
transition: 1s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden
}
.team-card-front .filter, .team-card-back .filter {
position: absolute;
left: 1rem;
right: 1rem;
top: -5rem;
z-index: 2;
transition: top .5s ease 0s;
width: auto
}
.flipped .team-card-back .filter {
top: 1rem;
transition: top .5s ease .75s
}
.team-card-front__image {
position: relative;padding-bottom:92.5%;
/*padding-bottom: 132.5%;*/
height: 0;
overflow: hidden;
cursor: pointer
}
.team-card-front__image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease;
-webkit-transform-origin: right bottom;
transform-origin: right bottom
}
.team-card-front__text {
/*position: absolute;*/
background:rgba(0, 0, 0, 0.8);
width:90%;
padding:15px;
left: 2rem;
bottom: 2rem;
text-shadow:2px 2px 4px #000000; margin:0 auto;
}
.team-card-name span {
display: block
}
.team-card {
width: 100%
}
.team-card-position {
font-weight: normal;
margin:0 0 .7rem;
line-height: 2.4rem;
font-family: 'bebas_neueregular', sans-serif;
text-transform: uppercase;
font-size: 2.1rem
}
.team-card-name {
font-size: 3.0rem;
line-height: 4.4rem;
margin:.5rem 0 2rem;
position: relative;
-webkit-box-ordinal-group: 3;
order: 2;
-webkit-box-flex: 1;
flex-grow: 1
}
.team-card-name:before {
content: '';
display: block;
height:.5rem;
width: 6rem;
background: #fff;
margin: 0 0 1rem;
transition: width .25s ease .5s
}
.js .team-card-name:before {
width: 0
}
.js .come-in .team-card-name:before, .js .already-visible .team-card-name:before {
width: 6rem
}
.flipped .team-card-front {
pointer-events: none;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg)
}
.flipped .team-card-back {
pointer-events: auto;
-webkit-transform: rotateY(0deg);
transform: rotateY(0deg)
}
.team-stat {
display: -webkit-box;
display: flex;
padding:.2rem 1rem;
margin: 0
}
.team-stat dt {
width: 47%;
text-align: right;
padding: 0 1rem 0 0;
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
text-transform: uppercase; background:rgba(255,255,255,0.8); color:#000
}
.team-stat dd {
padding: 0;
margin: 0;
width: 53%
}
.team-stat-value {
background:rgba(0, 0, 0, 0.8);
text-align: right;
padding:0 .5rem;
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
text-transform: uppercase;
display: table;
transition: width .25s ease;
width: 0
}
.team-background-holder {
width: 300%;
display: -webkit-box;
display: flex;
position: absolute;
left: 0;
top: 0;
bottom: 0;
pointer-events: none;
transition: left .5s ease
}
.show-background-2 .team-background-holder {
left: 0%
}
.show-background-2 .team-background-holder {
left: -100%
}
.show-background-3 .team-background-holder {
left: -200%
}
.team-background-card {
-webkit-box-flex: 1;
flex: 1;
background-size: cover;
background-position: center top;
position: relative
}
.team-background-card:after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #52c7eb;
opacity: 1;
transition: top .25s ease
}
.team-background-card--2:after {
background-color: #a9c000
}
.team-background-card--3:after {
background-color: #702c82
}
.team-background-card.image--loaded:after {
top: 100%
}
.team-stat-card {
position: absolute;
left: 2rem;
right: 2rem;
bottom: 2rem
}
@media only screen and (min-width:768px) {
.team-card {
width: 50%
}
.team-background-card {
padding: 3rem
}
}
@media only screen and (min-width:1366px) {
.team-card {
width: 33.3333%
}
}
@media only screen and (min-width:1500px) {
.team-card {
width: 25%
}
}
.portfolio-list {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
-webkit-box-pack: center;
justify-content: center;
background: #f4f0f0;
overflow: hidden
}
.portfolio-slice {
padding: 3rem 2rem;
width: 100%;
overflow: hidden
}
.portfolio-slice.filtered {
display: none
}
.portfolio-heading {
font-size: 3rem;
line-height: 3.2rem;
margin: 1rem 0 1.5rem; color:#fff
}
.portfolio-text {
min-height:140px;margin: 0;color:#efefef
}
.portfolio-text p {
font-size: 1.4rem;
margin: 0 0 1.3rem;
text-align:justify;
font-weight:500 !important;
font-family:Arial, Helvetica, sans-serif
}
.portfolio-image-holder {
margin: 0 0 2rem;
position: relative;
padding-bottom: 79.20937%;
height: 0;
overflow: hidden
}
.portfolio-image-holder img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
display: block
}
.portfolio-slice--full-width {
width: 100%;
padding-bottom: 0;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column
}
.portfolio-slice--full-width .portfolio-image-holder {
padding-bottom: 0;
height: auto;
margin: 0
}
.portfolio-slice--full-width .portfolio-image-holder img {
position: static
}
.portfolio-slice--full-width .portfolio-image-holder {
-webkit-box-ordinal-group: 3;
order: 2;
margin: 0 auto
}
.portfolio-slice--full-width .portfolio-info {
max-width: 60rem;
-webkit-box-ordinal-group: 2;
order: 1;
margin: 0 auto 3rem;
text-align: left;
width: 100%
}
.portfolio-slice--video .portfolio-info {
max-width: 60rem;
-webkit-box-ordinal-group: 2;
order: 1;
margin: 2rem auto 3rem;
text-align: left;
width: 100%
}
.portfolio-links {
margin:0 -.5rem
}
.portfolio-links .btn {
margin:0 .5rem;
padding: 1rem 2rem
}
.portfolio-links .btn:after {
text-indent: 2rem
}
.portfolio-slice--video {
padding: 0
}
@media only screen and (max-width:600px) {
.portfolio-image {
padding-bottom: 0!important
}
}
@media only screen and (min-width:601px) {
.portfolio-image {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25367%
}
.portfolio-image img {
position: absolute;
left: 0;
top: 0;
width: 100%
}
}
@media only screen and (max-width:767p@media only screen and (max-width:767px) {
.portfolio-slice--half-width+.portfolio-slice--half-width {
border-top:.1rem solid #333
}
.portfolio-slice--half-width .portfolio-image-holder {
max-width: 68rem;
margin: 0 auto 2rem
}
.portfolio-slice--half-width .portfolio-info {
max-width: 60rem;
margin: 0 auto 3rem
}
}
@media only screen and (max-width:1365px) {
.portfolio-slice--full-width .portfolio-image-holder {
margin: 0 -2rem 2rem;
padding: 0 3rem;
position: relative
}
.portfolio-slice--full-width .portfolio-image-holder img {
margin: 0 auto
}
.portfolio-slice--full-width .portfolio-image-holder:after {
content: '';
display: block;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.1) 100%);
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10rem
}
}
@media only screen and (min-width:768px) {
.portfolio-slice--full-width .portfolio-info {
margin: 0 auto 3.5rem;
text-align: center
}
.portfolio-slice--half-width {
width: 50%
}
.portfolio-slice--half-width .portfolio-content {
max-width: 51rem;
margin: 0 auto;
height: 100%;
position: relative;
padding-bottom: 4rem;
width: 100%
}
.portfolio-slice--half-width .portfolio-content .portfolio-links {
position: absolute;
left: 0;
bottom: 0
}
.portfolio-slice--half-width img {
box-shadow: 0 0 10px rgba(0,0,0,.15)
}
.portfolio-slice--half-width--right {
padding: 2rem 2rem 2rem 1rem
}
.portfolio-slice--half-width--left {
padding: 2rem 1rem 2rem 2rem
}
}
.timeline-title:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-bottom-color: #f17b2d;
border-width: 10px;
margin-left: -10px
}
) {
.portfolio-slice--half-width+.portfolio-slice--half-width {
border-top:.1rem solid #333
}
.portfolio-slice--half-width .portfolio-image-holder {
max-width: 68rem;
margin: 0 auto 2rem
}
.portfolio-slice--half-width .portfolio-info {
max-width: 60rem;
margin: 0 auto 3rem
}
}
@media only screen and (max-width:1365px) {
.portfolio-slice--full-width .portfolio-image-holder {
margin: 0 -2rem 2rem;
padding: 0 3rem;
position: relative
}
.portfolio-slice--full-width .portfolio-image-holder img {
margin: 0 auto
}
.portfolio-slice--full-width .portfolio-image-holder:after {
content: '';
display: block;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.1) 100%);
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 10rem
}
}
@media only screen and (min-width:768px) {
.portfolio-slice--full-width .portfolio-info {
margin: 0 auto 3.5rem;
text-align: center
}
.portfolio-slice--half-width {
width: 50%
}
.portfolio-slice--half-width .portfolio-content {
max-width: 51rem;
margin: 0 auto;
height: 100%;
position: relative;
padding-bottom: 4rem;
width: 100%
}
.portfolio-slice--half-width .portfolio-content .portfolio-links {
position: absolute;
left: 0;
bottom: 0
}
.portfolio-slice--half-width img {
box-shadow: 0 0 10px rgba(0,0,0,.15)
}
.portfolio-slice--half-width--right {
padding: 2rem 2rem 2rem 1rem
}
.portfolio-slice--half-width--left {
padding: 2rem 1rem 2rem 2rem
}
}
@media only screen and (min-width:1366px) {
.portfolio-slice--full-width {
padding: 5rem 5rem 0
}
.portfolio-slice--half-width {
width: 50%;
max-width: 60rem;
padding: 5rem
}
.portfolio-slice--image-right .portfolio-content {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
max-width: 110rem;
width: 100%;
margin: 0 auto
}
.portfolio-slice--image-right .portfolio-content .portfolio-image-holder {
width: 70%;
-webkit-box-ordinal-group: 3;
order: 2;
padding-left: 3rem
}
.portfolio-slice--image-right .portfolio-content .portfolio-info {
width: 30%;
-webkit-box-ordinal-group: 2;
order: 1;
text-align: left
}
.portfolio-slice--half-width--right {
padding: 5rem 5rem 5rem 2.5rem
}
.portfolio-slice--half-width--left {
padding: 5rem 2.5rem 5rem 5rem
}
.portfolio-slice--image-left .portfolio-content {
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
-webkit-box-align: center;
align-items: center;
max-width: 110rem;
width: 100%;
margin: 0 auto
}
.portfolio-slice--image-left .portfolio-content .portfolio-image-holder {
width: 70%;
-webkit-box-ordinal-group: 2;
order: 1;
padding-right: 3rem
}
.portfolio-slice--image-left .portfolio-content .portfolio-info {
width: 30%;
-webkit-box-ordinal-group: 3;
order: 2;
text-align: left
}
.portfolio-slice--image-bottom .portfolio-content {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column
}
.portfolio-slice--image-bottom .portfolio-content .portfolio-image-holder {
max-width: 100rem;
-webkit-box-ordinal-group: 3;
order: 2;
margin: 0 auto;
width: 100%
}
.portfolio-slice--image-bottom .portfolio-content .portfolio-info {
width: 60rem;
-webkit-box-ordinal-group: 2;
order: 1;
margin: 0 auto;
text-align: center
}
}
.portfolio-slice--video {
padding: 0;
max-width: none
}
.portfolio-slice--video .portfolio-content {
max-width: none
}
.portfolio-slice--video .portfolio-info {
padding: 0 2rem
}
.pink-background {
background-color: #f04576;
color: #fff
}
.blue-background {
background-color: #52c7eb;
color: #fff
}
.green-background {
background-color: #a9c000;
color: #fff
}
.purple-background {
background-color: #702c82;
color: #fff
}
.orange-background {
background-color: #f17b2d;
color: #fff
}
.burnt-orange-background {
background-color: #d96e28;
color: #fff
}
.portfolio__video-holder {
position: relative;
height: 0;
overflow: hidden;
padding-bottom: 56.25367%
}
.portfolio__video {
position: absolute;
left: 0;
top: 0;
width: 100%
}
.our-story-timeline {
padding: 2rem 0;
background: #ededed
}
.timeline {
position: relative;
max-width: 1120px;
margin: 0 auto
}
.timeline:after {
content: '';
display: block;
width:.2rem;
position: absolute;
left: 50%;
top: 0;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background: #333
}
.timeline-block {
position: relative;
margin: 0 2rem 3rem;
z-index: 1
}
.timeline-year {
background: #333;
border-radius: 50%;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
color: #fff;
font-size: 3rem;
width: 7rem;
height: 7rem;
margin: 0 auto 4rem
}
.timeline-text {
background: #fff;
padding:0 2rem .1rem
}
.timeline-title {
background: #f17b2d;
margin: 0 -2rem 2rem;
padding: 2rem;
color: #fff;
font-size: 2.4rem;
position: relative
}
.timeline-title:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-bottom-color: #f17b2d;
border-width: 10px;
margin-left: -10px
}
@media only screen and (min-width:768px) {
.our-story-timeline {
padding: 5rem 0 2rem
}
.timeline-block {
padding: 2.3rem 50% 0 0
}
.timeline-text {
margin: 0 6rem 0 2rem
}
.timeline-year {
font-size: 4.8rem;
width: 11rem;
height: 11rem;
position: absolute;
left: 50%;
top: 0;
margin-left: -5.5rem
}
.timeline-title:before {
top: 50%;
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-left-color: #f17b2d;
border-width: 10px;
margin: -10px 0 0 0
}
.timeline-block--right {
padding: 2.3rem 0 0 50%
}
.timeline-block--right .timeline-text {
margin: 0 2rem 0 6rem
}
.timeline-block--right .timeline-title:before {
top: 50%;
right: 100%;
left: auto;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: transparent;
border-right-color: #f17b2d;
border-width: 10px;
margin: -10px 0 0 0
}
.timeline-block:last-of-type {
background: #ededed
}
}
.back-to-top {
position: fixed;
right: 0;
bottom: 0;
text-transform: uppercase;
background: #333;
color: #fff;
padding: 10px 20px;
font-family: "bebas_neuebold", Arial, Helevtica, sans-serif;
font-size: 1.6rem;
display: none
}
.sitemap {
padding: 4rem;
width: 80%;
max-width: 50rem;
margin: 0 auto;
text-align: left
}
.sitemap ul {
font-size: 1.4rem;
list-style: none;
text-align: left;
margin: 0;
padding: 1.5rem 0 0
}
.sitemap li {
font-size: 1.4rem;
padding: 0
}
.sitemap a:hover {
text-decoration: underline
}
.case-study-wrapper section {
padding: 30px 20px;
height: auto;
position: relative;
overflow: hidden
}
.case-study-wrapper .row {
position: relative
}
.section p{ font-family:Arial, Helvetica, sans-serif}
@media only screen and (max-width:1024px) {
.case-study-wrapper .campaigns {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column
}
.case-study-wrapper .campaigns .col-1 {
-webkit-box-ordinal-group: 3;
order: 2
}
.case-study-wrapper .campaigns .col-2 {
-webkit-box-ordinal-group: 2;
order: 1
}
}
.case-study-wrapper p:last-child {
margin-bottom: 0
}
.case-study-wrapper p+h2 {
margin-top: 60px
}
.case-study-wrapper .holder {
padding: 0
}
.case-study-wrapper .copy-vertical-align-middle a {
text-decoration: underline
}
.case-study-wrapper .header {
height: auto;
position: relative
}
.case-study-wrapper .header-gradient {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1
}
.case-study-wrapper .logo {
width: 50%;
max-width: 220px;
height: auto;
z-index: 2;
position: relative
}
.case-study-wrapper .header .copy-content {
position: relative;
z-index: 2;
padding-top: 80%
}
.case-study-wrapper h2 {
font-size: 2.5em;
width: 100%;
margin: 0 0 3rem
}
.case-study-wrapper .centre-heading {
text-align: left;
margin: 0 0 3rem
}
.case-study-wrapper h2:after {
content: '';
display: block;
height:.4rem;
width: 5rem;
background: #f17b2d;
margin:.75rem 0 0
}
.case-study-wrapper .header h1, .case-study-wrapper .header h2, .case-study-wrapper .header p {
color: #fff
}
.case-study-wrapper .header h1 {
margin: 0 0 30px;
padding: 0;
font-size: 4em
}
.case-study-wrapper .header h1 span:after {
content: '';
display: block;
height:.5rem;
width: 6rem;
background: #fff;
margin: 1rem 0 1rem
}
.case-study-wrapper .header h1 span {
padding: 0;
margin: 0 0 15px;
font-size: 60%
}
.case-study-wrapper .header .cta {
margin-top: 20px;
display: inline-block;
margin-right: 10px
}
.case-study-wrapper .social {
position: relative;
z-index: 2;
margin-top: 30px
}
.case-study-wrapper .social ul {
list-style: none;
display: inline-block;
vertical-align: middle;
margin-left: -10px
}
.case-study-wrapper .social p {
font-family: 'bebas_neuebold', sans-serif;
font-size: 1.8em
}
.case-study-wrapper .social p, .case-study-wrapper .social ul li {
display: inline-block
}
.case-study-wrapper .social ul li {
margin: 0 2px;
width: 32px;
height: 32px
}
.case-study-wrapper .social svg {
width: 3rem;
height: 3rem;
margin-top: -2px
}
.case-study-wrapper section.social-bottom {
z-index: 80
}
.case-study-the-chapel section.social-bottom, .case-study-the-times section.social-bottom, .case-study-swim-wales section.social-bottom {
background-color: #eae8e9
}
.case-study-wrapper .header {
background-color: #333;
background-repeat: no-repeat;
background-size: 100%;
background-position: 0 0
}
.case-study-the-little-green-kit .header {
background-image: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/the-little-green-kit/xcase-study-the-little-green-kit-header-mobile.jpg.pagespeed.ic.CNRL-XCRgw.jpg)
}
.case-study-the-times .header {
background-image: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/the-times/case-study-the-times-header-mobile.jpg.pagespeed.ce.bt1gZ6C3oX.jpg)
}
.case-study-charity-choice .header {
background-image: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/charity-choice/xcase-study-charity-choice-header-mobile.jpg.pagespeed.ic.MTSIZdXvuj.jpg)
}
.case-study-sport-passport .header {
background-image: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/sport-passport/xcase-study-sport-passport-header-mobile.jpg.pagespeed.ic.p92T0yGhBT.jpg)
}
.case-study-news-uk .header {
background-image: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/news-uk/xcase-study-news-uk-header-mobile.jpg.pagespeed.ic.ys10JtwtSK.jpg)
}
.case-study-swim-wales .header {
background-image: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/swim-wales/xcase-study-swim-wales-header-mobile.jpg.pagespeed.ic.G4knejkYOj.jpg)
}
.case-study-fusion .header {
background-image: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/fusion/xcase-study-fusion-header-mobile.jpg.pagespeed.ic.g3lK1XczlW.jpg)
}
.case-study-the-chapel .header {
background-image: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/the-chapel/case-study-the-chapel-header-mobile.jpg.pagespeed.ce.A3NMvj3GuO.jpg)
}
.case-study-monarch .header {
background-image: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/monarch/case-study-monarch-header-mobile.jpg.pagespeed.ce.WlIl1scRQn.jpg)
}
.case-study-wrapper .grey-bg {
background-color: #eae8e9
}
.case-study-wrapper .drop-shadow-images img {
box-shadow: 0 -6px 20px rgba(0,0,0,.2)
}
.case-study-wrapper .video {
position: relative;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
padding-bottom: 56.25%
}
.case-study-wrapper .video iframe, .case-study-wrapper .video object, .case-study-wrapper .video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%
}
.case-study-wrapper ul+h2 {
margin-top: 60px
}
.case-study-wrapper .multiple-ipads picture {
margin-left: -50%
}
.case-study-wrapper .multiple-ipads picture img {
max-width: 200%
}
.case-study-wrapper img {
max-width: 100%
}
.case-study-wrapper .screenshot {
margin-top: 20px;
margin-bottom: -35px
}
.case-study-the-little-green-kit .trilogy-books img {
max-width: 200%
}
.case-study-the-little-green-kit .posters img:first-child {
margin-bottom: 20px
}
.case-study-charity-choice .microsite picture img {
margin-bottom: -35px
}
.case-study-swim-wales .pools-clubs img {
width: 40%;
margin: 0 auto;
display: block
}
.case-study-swim-wales .courses .screenshot img {
margin-bottom: -38px
}
.case-study-swim-wales .pools-clubs img {
width: 40%;
margin: 0 auto;
display: block
}
.case-study-wrapper .case-study-call-out {
color: #f17b2d;
font-family: "bebas_neuebold", Impact, Charcoal;
border-top: 6px solid #f17b2d;
border-bottom: 2px solid #f17b2d;
padding: 20px 0;
margin-bottom: 20px
}
.case-study-wrapper .case-study-call-out p {
font-size: 3em;
position: relative;
margin-left: 2.75em;
line-height: 1em
}
.case-study-wrapper .case-study-call-out span.figure {
font-size: 250%;
display: inline;
position: absolute;
left: -1.1em;
top: .2em
}
.case-study-monarch .monarch-app img {
max-width: 125%;
margin-bottom: -40px
}
@media only screen and (min-width:414px) {
.case-study-wrapper .case-study-call-out p {
font-size: 4em
}
}
.case-study-charity-choice .revenue-copy ul, .case-study-monarch .monarch-app ul {
list-style: none
}
.case-study-charity-choice .revenue-copy ul li, .case-study-monarch .monarch-app ul li {
background-color: #dbdbdb;
margin-left: -20px;
padding: 10px;
display: inline-block;
width: auto
}
.case-study-wrapper .slick-slide {
height: auto
}
.case-study-wrapper .slide-ipad-portrait-bg {
position: relative;
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/xbg-ipad-portrait.png.pagespeed.ic.A3H9UUhnsR.png) no-repeat center center;
background-size: 100%;
width: 260px;
height: 360px;
margin: 0 auto 80px auto
}
.case-study-wrapper .slide-ipad-portrait {
position: absolute;
width: 83%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 1px
}
.case-study-wrapper .slide-iphone-portrait-bg {
position: relative;
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/xbg-iphone-portrait.png.pagespeed.ic.HFw8D4Ne65.png) no-repeat 0 center;
background-size: 100%;
margin: 0 auto 0 auto;
width: 260px;
height: 580px;
left: -2px;
margin-top: -1px
}
.case-study-wrapper .slide-iphone-portrait {
position: absolute;
width: 80.5%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: -4px;
margin-left: 2px
}
.case-study-wrapper .slide-ipad-landscape-bg {
position: relative;
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/xbg-ipad-landscape.png.pagespeed.ic.NX9I7Bzrz8.png) no-repeat center center;
background-size: 100%;
width: 260px;
height: 230px;
margin: 0 auto 20px auto
}
.case-study-wrapper .slide-ipad {
position: absolute;
width: 79.5%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
margin-top: 0;
margin-left: -1px
}
.case-study-wrapper .slick-prev, .case-study-wrapper .slick-next {
position: absolute;
display: block;
height: 30px;
width: 30px;
cursor: pointer;
background: #f17b2d;
top: 50%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
border: none;
outline: none;
font-size: 0
}
.case-study-wrapper .slick-prev:before, .case-study-wrapper .slick-next:before {
opacity: 1;
font-family: 'Arial', sans-serif;
font-weight: bold;
font-size: 30px;
margin-top: -4px;
display: block;
color: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.case-study-wrapper .slick-next:before {
content: "\203A"
}
.case-study-wrapper .slick-prev:before {
content: "\2039"
}
.case-study-wrapper .slick-next {
right: -52px
}
.case-study-wrapper .slick-prev {
left: -52px
}
.case-study-wrapper .slick-dots {
position: absolute;
bottom: -50px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%;
opacity: 1
}
.case-study-wrapper .slick-dots button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent
}
.case-study-wrapper .slide-iphone-portrait .slick-dots {
bottom: -70px
}
.case-study-wrapper .slide-ipad .slick-dots {
bottom: -20px;
left: 0
}
.case-study-wrapper .slide-ipad .slick-next {
right: -60px
}
.case-study-wrapper .slide-ipad .slick-prev {
left: -60px
}
.case-study-wrapper .slick-dots li {
position: relative;
display: inline-block;
height: 15px;
width: 15px;
margin: 0;
padding: 0;
cursor: pointer
}
.slick-dots li button:before {
position: absolute;
top: 0;
left: 0;
content: "•";
width: 20px;
height: 20px;
font-family: "Arial", sans-serif;
font-size: 30px;
line-height: 20px;
text-align: center;
color: #000;
opacity: .25;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
}
.slick-dots li.slick-active button:before {
color: #f17b2d;
opacity: 1
}
.case-study-wrapper .award {
text-align: center;
position: relative
}
.case-study-wrapper .award img {
position: absolute;
top: 0;
margin-top: 0;
right: 45%;
margin-right: -90px
}
.case-study-the-chapel .award img {
margin-top: 40px;
right: 45;
margin-right: -90px
}
.case-study-wrapper .award p {
padding-top: 130px
}
.case-study-wrapper .recognition .award-wrapper p {
margin-top: 10px;
text-align: center
}
.case-study-wrapper .recognition .award-wrapper span {
display: block;
font-family: "bebas_neuebold", Impact, Charcoal;
font-size: 125%
}
.case-study-wrapper .recognition .award-wrapper {
padding: 20px;
margin-bottom: 20px
}
.case-study-the-little-green-kit .trilogy-books picture {
margin-left: -50%
}
.case-study-the-chapel .feature-rich-content img {
max-width: 120%;
margin-left: -35px
}
@media only screen and (max-width:414px) {
.case-study-news-uk .the-time-puzzle-development .row:nth-child(2n), .case-study-monarch .app-content-management-system .row:nth-child(2n), .case-study-monarch .increasing-coversion-rates .row:nth-child(2n) {
margin-top: 0
}
}
@media only screen and (min-width:375px) {
.case-study-wrapper .header h1 {
font-size: 5em
}
.case-study-wrapper .slick-next {
right: -70px
}
.case-study-wrapper .slick-prev {
left: -70px
}
.case-study-wrapper .slide-ipad .slick-next {
right: -70px
}
.case-study-wrapper .slide-ipad .slick-prev {
left: -70px
}
}
@media only screen and (min-width:568px) {
.case-study-wrapper .header .copy-content {
padding-top: 15%
}
.case-study-wrapper .social {
margin-top: 0;
right: 0;
left: auto;
bottom: 0;
position: absolute
}
.case-study-wrapper section.social-bottom {
padding: 30px 40px 20px 40px;
min-height: 85px
}
.case-study-wrapper section.social-bottom .social {
margin-top: -5px;
right: 0;
left: auto;
bottom: 0;
top: 0
}
.case-study-wrapper section.social-bottom .news-article-tags {
max-width: 55%;
margin-bottom: 5px
}
.case-study-wrapper .social:last-child {
bottom: -5px
}
.case-study-wrapper .bottom-share {
border: 1px solid red
}
.case-study-wrapper .multiple-ipads picture {
margin-left: 0
}
.case-study-the-little-green-kit .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/the-little-green-kit/xcase-study-the-little-green-kit-header.jpg.pagespeed.ic.SQ8WFKZJKu.jpg) no-repeat 0 center;
background-size: 150%
}
.case-study-the-times .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/the-times/xcase-study-the-times-header.jpg.pagespeed.ic.-Ag_8kExYV.jpg) no-repeat 0 0;
background-size: 150%
}
.case-study-charity-choice .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/charity-choice/xcase-study-charity-choice-header.jpg.pagespeed.ic.GM0JnwIPfU.jpg) no-repeat 0 0;
background-size: 150%
}
.case-study-sport-passport .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/sport-passport/case-study-sport-passport-header.jpg.pagespeed.ce.rxYSoBKTYx.jpg) no-repeat -200px 0;
background-size: 150%
}
.case-study-news-uk .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/news-uk/xcase-study-news-uk-header.jpg.pagespeed.ic.WDXUj595Xx.jpg) no-repeat 0 0;
background-size: 150%
}
.case-study-swim-wales .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/swim-wales/xcase-study-swim-wales-header.jpg.pagespeed.ic.r_bG25o9Jd.jpg) no-repeat 0 0;
background-size: 125%
}
.case-study-fusion .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/fusion/xcase-study-fusion-header.jpg.pagespeed.ic._vqXESuWKU.jpg) no-repeat -300px 0;
background-size: 150%
}
.case-study-the-chapel .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/the-chapel/case-study-the-chapel-header.jpg.pagespeed.ce.g96y4XxPwx.jpg) no-repeat -100px 0;
background-size: 150%
}
.case-study-monarch .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/monarch/case-study-monarch-header.jpg.pagespeed.ce.Pytc7ieOz5.jpg) no-repeat 0 0;
background-size: 150%
}
}
@media only screen and (min-width:667px) {
.case-study-wrapper .multiple-ipads picture img {
max-width: 150%
}
}
@media only screen and (min-width:768px) {
.case-study-wrapper section {
padding: 80px 40px
}
.case-study-wrapper img {
max-width: 200%
}
.case-study-wrapper .multiple-devices img {
margin-top: 40px;
max-width: 100%
}
.case-study-wrapper .multiple-ipads {
margin-bottom: -160px
}
.case-study-wrapper .multiple-ipads picture {
z-index: 1;
position: relative;
margin: 0 0 0 -25%;
top: -100px
}
.case-study-wrapper .multiple-ipads .copy {
z-index: 2;
position: relative
}
.case-study-the-times .multiple-ipads picture {
z-index: 1;
position: relative;
margin: 0 0 0 -25%;
top: -120px
}
.case-study-wrapper .screenshot img {
margin-bottom: -80px
}
.case-study-wrapper .screenshot-left img {
max-width: 125%;
margin-left: -25%
}
.case-study-wrapper .header {
height: auto;
position: relative;
padding: 40px
}
.case-study-wrapper .header .copy-content {
padding: 45% 0 0 0
}
.case-study-wrapper .header .cta {
margin-top: 50px
}
.case-study-wrapper .centre-heading {
text-align: center
}
.case-study-wrapper .centre-heading:after {
margin:.75rem 0 0 47%
}
.case-study-wrapper .centre-paragraph {
text-align: center
}
.case-study-wrapper .award p {
padding-top: 0;
text-align: left;
margin: 0
}
.case-study-wrapper .award img {
right: 0;
top: -5px;
margin-right: 0;
margin-top: 0
}
.case-study-the-little-green-kit .trilogy-books .copy {
position: relative;
z-index: 2
}
.case-study-the-little-green-kit .trilogy-books picture {
top: -170px;
margin: 0 0 0 90px;
position: relative;
z-index: 1
}
.case-study-the-little-green-kit .trilogy-books picture img {
max-width: 150%
}
.case-study-the-little-green-kit .trilogy-books .copy:last-child {
position: relative;
top: -400px
}
}
@media only screen and (min-width:768px) and (min-width:1366px) {
.case-study-the-little-green-kit .trilogy-books .copy:last-child {
position: relative;
top: -500px
}
.case-study-wrapper .award img {
top: -15px
}
}
@media only screen and (min-width:768px) {
.case-study-wrapper .header h1 {
font-size: 7.2em
}
.case-study-wrapper h2 {
font-size: 4em
}
.case-study-fusion .digital-roadmap {
padding: 240px 40px
}
.case-study-fusion .center-management {
padding: 140px 40px
}
.case-study-fusion .center-management img {
max-width: 200%;
margin-left: -100%
}
.case-study-swim-wales .content-management .copy {
position: relative;
z-index: 2
}
.case-study-sport-passport .powerful-lesson-management {
}
.case-study-sport-passport .powerful-lesson-management img {
max-width: 125%;
margin-left: -25%;
margin-bottom: -20px
}
.case-study-charity-choice .fundraising {
padding: 260px 40px
}
.case-study-charity-choice .fundraising img {
margin-bottom: 0;
max-width: 100%
}
.case-study-charity-choice .revenue img {
margin-bottom: 0
}
.case-study-swim-wales .pools-clubs {
padding: 120px 40px
}
.case-study-swim-wales .pools-clubs img {
width: 75%
}
.case-study-swim-wales .shop {
padding: 120px 40px
}
.case-study-swim-wales .shop img {
margin-bottom: -40px
}
.case-study-wrapper .award {
padding: 40px
}
.case-study-the-chapel .award p {
padding-right: 10px
}
.case-study-the-little-green-kit .posters {
margin-top: 60px
}
.case-study-the-little-green-kit .posters img {
max-width: 100%;
margin-top: 0
}
.case-study-charity-choice .microsite img {
max-width: 100%;
margin-top: 40px
}
.case-study-fusion .campaigns-products img {
max-width: 100%
}
.case-study-fusion .campaigns-products .screenshot {
margin-bottom: -30px;
margin-top: 80px
}
.case-study-fusion .campaigns-products .screenshot-left img {
margin-left: 0
}
.case-study-wrapper .copy-vertical-align-middle {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 45%
}
.case-study-wrapper .copy-vertical-align-middle-sm {
text-align: center;
position: relative;
top: 0;
-webkit-transform: translateY(50%);
transform: translateY(50%);
width: 100%;
padding-bottom: 40px;
margin: 0 auto
}
.case-study-the-chapel .online-shop img {
margin-top: 85%
}
.case-study-the-chapel .online-shop .col-2 {
margin-top: -140%
}
.case-study-monarch .booking-process-overview img {
max-width: 130%
}
.case-study-wrapper .case-study-call-out p {
font-size: 3.75em;
line-height: 1.1
}
.case-study-wrapper .case-study-call-out span.figure {
top: -.1em
}
.case-study-monarch .monarch-overseas .copy {
z-index: 2;
position: relative
}
.case-study-monarch .monarch-overseas img {
max-width: 150%;
margin-bottom: -380px
}
.case-study-monarch .monarch-app img {
max-width: 125%;
margin-left: 0;
margin-bottom: -400px;
margin-top: 40px
}
.case-study-wrapper h3 {
font-size: 3em
}
.case-study-monarch .inflight {
padding: 180px 60px
}
.case-study-wrapper .slick-slide img {
max-width: 100%
}
.case-study-wrapper .slide-ipad-landscape-bg {
position: relative;
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/xbg-ipad-landscape.png.pagespeed.ic.NX9I7Bzrz8.png) no-repeat center center;
background-size: 100%;
width: 600px;
height: 500px;
margin: 0 auto 20px auto;
left: -35px
}
.case-study-wrapper .slide-ipad .slick-prev {
left: -110px
}
.case-study-wrapper .slide-ipad .slick-next {
right: -110px
}
.case-study-wrapper .slide-ipad .slick-dots {
bottom: -50px;
left: 0
}
.case-study-swim-wales .shop img {
margin-bottom: -95px
}
.case-study-monarch .booking-process-overview {
padding: 180px 40px
}
.case-study-monarch .center-management img {
position: absolute;
top: -20px;
left: 15%;
max-width: 60%
}
.case-study-the-little-green-kit .award img {
top: -15px
}
.case-study-the-little-green-kit section.posters {
background-color: #fff;
margin-top: -400px
}
.case-study-charity-choice .client-testimonial-holder {
top: -35px
}
.case-study-the-times .client-testimonial-holder {
top: -53px;
z-index: 20000
}
.case-study-swim-wales .content-management img {
max-width: 225%;
margin: 20em 0 0 -70%
}
}
@media only screen and (min-width:1024px) {
.case-study-fusion .campaigns-products img {
max-width: 125%
}
.case-study-fusion .campaigns-products .screenshot-left img {
margin-left: -35%
}
.case-study-fusion .copy-vertical-align-middle-sm {
text-align: left;
position: absolute;
top: 50%;
-webkit-transform: translateY(-35%);
transform: translateY(-35%);
width: 25%
}
.case-study-fusion .copy-vertical-align-middle-sm-right {
margin-left: 70%
}
.case-study-swim-wales .shop {
padding: 80px 0
}
.case-study-swim-wales .shop img {
max-width: 80%;
margin-left: -15%
}
.case-study-wrapper .screenshot img {
margin-bottom: -52px
}
.case-study-wrapper .slide-ipad {
width: 79.75%;
margin-top: 1px
}
.case-study-monarch .booking-process-overview {
padding: 80px 40px
}
.case-study-monarch .monarch-overseas img {
max-width: 250%;
margin-top: 150px;
margin-bottom: -80px;
margin-left: -100%
}
}
@media only screen and (min-width:1366px) {
.case-study-wrapper img {
max-width: 150%
}
.case-study-wrapper section {
padding: 80px 60px
}
.case-study-wrapper .header {
background-position: 0 0;
background-size: 100%
}
.case-study-the-chapel .online-shop .col-2 {
margin-top: -100%
}
.case-study-the-chapel .online-shop img {
margin-top: 0;
max-width: 100%
}
.case-study-the-chapel .feature-rich-content img {
max-width: 175%;
margin-left: -37.5%
}
.case-study-wrapper section .screenshot-left img {
max-width: 100%;
margin-left: -12.5%
}
.case-study-wrapper .header {
padding: 40px 60px 60px 60px
}
.case-study-wrapper .header .copy-content {
padding: 35% 0 0 0
}
.case-study-wrapper .multiple-ipads picture {
top: -160px;
margin-left: -25%
}
.case-study-the-little-green-kit .trilogy-books img {
max-width: 200%
}
.case-study-wrapper .gamified-learning .image-desktop {
display: block;
margin: 0 auto;
width: 75%
}
.case-study-wrapper .ipad-landscape-bg {
width: 40%;
height: 410px
}
.case-study-wrapper .award {
padding: 60px
}
.case-study-wrapper .copy-vertical-align-middle {
width: 45%
}
.case-study-wrapper .copy-vertical-align-middle-sm {
width: 20%
}
.case-study-wrapper .copy-vertical-align-middle-sm-right {
margin-left: 0
}
.case-study-fusion .campaigns-products .screenshot-left img {
margin-left: 0
}
.case-study-fusion .campaigns-products img {
max-width: 100%
}
.case-study-fusion .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/fusion/xcase-study-fusion-header.jpg.pagespeed.ic._vqXESuWKU.jpg) no-repeat 0 0;
background-size: 100%
}
.case-study-wrapper .multiple-devices img {
max-width: 125%;
margin-left: -12.5%
}
.case-study-fusion .digital-roadmap {
padding: 140px 40px
}
.case-study-fusion .digital-roadmap img {
max-width: 150%;
margin-left: -10%
}
.case-study-fusion .center-management img {
max-width: 900px;
margin-left: -40%
}
.case-study-fusion .center-management {
padding: 100px 40px
}
.case-study-swim-wales .content-management .copy {
margin-top: 25%
}
.case-study-swim-wales .pools-clubs {
padding: 80px 40px
}
.case-study-swim-wales .pools-clubs img {
width: 50%
}
.case-study-sport-passport .header {
background: url(https://www.digitalmarmalade.co.uk/vendor/dm/img/case-studies/sport-passport/case-study-sport-passport-header.jpg.pagespeed.ce.rxYSoBKTYx.jpg) no-repeat 0 0;
background-size: 100%
}
.case-study-sport-passport .gamified-learning img {
max-width: 100%;
margin-left: 0
}
.case-study-sport-passport .awards img {
max-width: 100%;
margin-left: 0
}
.case-study-wrapper .screenshot img {
margin-bottom: -52px
}
.case-study-charity-choice .fundraising .screenshot-left img {
margin-bottom: 0;
margin-top: -40px
}
.case-study-wrapper .slide-ipad-portrait-bg {
width: 500px;
height: 700px;
margin: 0 auto 60px auto
}
.case-study-wrapper .slick-dots {
bottom: -80px
}
.case-study-wrapper .slick-next {
right: -80px
}
.case-study-wrapper .slick-prev {
left: -80px
}
.case-study-monarch .booking-process-overview img {
max-width: 75%
}
.case-study-wrapper .case-study-call-out {
margin: 40px 0
}
.case-study-wrapper .case-study-call-out p {
font-size: 6em
}
.case-study-wrapper .case-study-call-out span.figure {
font-size: 250%;
left: -1.1em
}
.case-study-monarch .monarch-overseas img {
margin-top: 0;
margin-bottom: -90px
}
.case-study-monarch .monarch-app img {
max-width: 100%;
margin-left: 0;
margin-top: 40px
}
.case-study-monarch .monarch-app picture img {
margin-bottom: -400px
}
.case-study-wrapper .multiple-devices img {
max-width: 100%;
margin-left: 0
}
.case-study-monarch .inflight {
padding: 80px 60px
}
.case-study-wrapper .brand-evolution img {
max-width: 708px;
margin: 0 auto;
display: block
}
.case-study-wrapper section.social-bottom {
padding: 40px 60px
}
.case-study-wrapper .social:last-child {
bottom: -20px
}
.case-study-the-chapel .online-shop .col-2 {
margin-top: -40%
}
.case-study-monarch .center-management .screenshot-left img {
max-width: 55%;
margin-left: -22.5%;
margin-top: 60px
}
.case-study-charity-choice .fundraising {
padding: 100px 40px
}
.case-study-wrapper .slide-ipad {
width: 79.5%;
margin-top: 1px
}
.case-study-the-little-green-kit .award img {
top: -25px
}
.case-study-wrapper section.social-bottom {
min-height: 105px
}
.case-study-wrapper section.social-bottom .social {
margin-top: 5px
}
.case-study-the-times .client-testimonial-holder {
top: -200px
}
.case-study-swim-wales .content-management img {
max-width: 175%;
margin: 0 0 0 -40%
}
}
@media only screen and (min-width:1366px) and (max-height:768px) {
.case-study-wrapper .case-study-call-out p {
font-size: 5em;
line-height: 1
}
.case-study-wrapper .case-study-call-out span.figure {
font-size: 250%;
left: -1.1em
}
.case-study-monarch .booking-process-overview img {
max-width: 100%
}
.case-study-wrapper .slide-ipad-portrait-bg {
width: 400px;
height: 550px
}
.case-study-wrapper img {
max-width: 150%
}
.case-study-wrapper .header {
background-size: 115%
}
.case-study-the-chapel .online-shop .col-2 {
margin-top: -100%
}
.case-study-the-chapel .feature-rich-content img {
max-width: 150%;
margin-left: -25%
}
.case-study-swim-wales .content-management .copy {
margin-top: 0
}
.case-study-wrapper .multiple-devices img {
max-width: 125%;
margin-left: -12.5%
}
.case-study-the-chapel .online-shop .col-2 {
margin-top: -45%
}
.case-study-swim-wales .content-management img {
max-width: 175%;
margin: 0 0 0 -40%
}
}
@media only screen and (min-width:1024px) and (max-height:768px) and (orientation:landscape) {
.case-study-swim-wales .content-management img {
max-width: 200%;
margin: 50% 0 0 -50%
}
}
@media only screen and (min-width:1024px) and (max-height:1366px) and (orientation:portrait) {
.case-study-swim-wales .content-management img {
max-width: 200%;
margin: 50% 0 0 -50%
}
}
@media only screen and (min-width:1366px) and (max-height:1024px) and (orientation:landscape) {
.case-study-swim-wales .content-management img {
max-width: 175%;
margin: 10% 0 0 -50%
}
}
@media only screen and (min-width:1366px) and (max-height:768px) and (orientation:landscape) {
.case-study-swim-wales .content-management img {
max-width: 160%;
margin: 0 0 0 -40%
}
}
@media only screen and (max-width:414px) {
.case-study-monarch .monarch-overseas img {
box-shadow: 0 -6px 20px rgba(0,0,0,.2)
}
}
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0
}
.slick-list:focus {
outline: none
}
.slick-list.dragging {
cursor: pointer;
cursor: hand
}
.slick-slider .slick-track, .slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.slick-track {
position: relative;
top: 0;
left: 0;
display: block
}
.slick-track:before, .slick-track:after {
display: table;
content: ''
}
.slick-track:after {
clear: both
}
.slick-loading .slick-track {
visibility: hidden
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px
}
[dir="rtl"] .slick-slide {
float: right
}
.slick-slide img {
display: block
}
.slick-slide.slick-loading img {
display: none
}
.slick-slide.dragging img {
pointer-events: none
}
.slick-initialized .slick-slide {
display: block
}
.slick-loading .slick-slide {
visibility: hidden
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent
}
.slick-arrow.slick-hidden {
display: none
}
.slick-dots li button::before {
content: '.'!important;
font-size: 60px;
font-family: times, serif
}
.slick-dots li:hover button:before {
color: #f17b2d
}