﻿@charset "UTF-8";

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

body,
h1,
h2,
h3,
h4,
h5,
ul {
    margin: 0;
}

legend,
td,
th,
ul {
    padding: 0;
}

.hide-text,
a {
    background-color: transparent;
}

#main #services a,
a:hover {
    text-decoration: underline;
}

.valign,
sub,
sup {
    position: relative;
}

#main #form form fieldset .checkbox.col,
.nowrap,
body > .container > header .logo {
    white-space: nowrap;
}

a:active,
a:hover,
body > .container > header h2.toggle:focus {
    outline: 0;
}

#main a:hover,
a {
    text-decoration: none;
}

#main #form form:after,
.clearfix:after {
    clear: both;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden],
template {
    display: none;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,
optgroup,
strong {
    font-weight: 700;
}

dfn {
    font-style: italic;
}

h1 {
    font-size: 2em;
}

mark {
    background: #ff0;
    color: #000;
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 1em 40px;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

pre,
textarea {
    overflow: auto;
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
html input[type='button'],
input[type='reset'],
input[type='submit'] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled],
html input[disabled] {
    cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

input {
    line-height: normal;
}

input[type='radio'] {
    box-sizing: inherit;
    -webkit-appearance: radio;
    padding: 0;
    vertical-align: middle;
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    height: auto;
}

input[type='search'] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

#main #form form,
body > .container > header {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.clearfix:after,
.clearfix:before {
    display: table;
    content: '';
    line-height: 0;
}

.valign {
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.hide-text {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    border: 0;
}

body {
    -webkit-backface-visibility: hidden;
    background-color: #efefef;
    color: #636363;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    font-size: 0.93333333em;
}

.fillmode {
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

@-webkit-keyframes fadeInDownBig {
    0% {
        -webkit-transform: translateY(-100px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInDownBig {
    0% {
        -moz-transform: translateY(-100px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInDownBig {
    0% {
        -o-transform: translateY(-100px);
    }
    100% {
        -o-transform: translateY(0);
    }
}

@keyframes fadeInDownBig {
    0% {
        transform: translateY(-100px);
    }
    100% {
        transform: translateY(0);
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    -moz-animation-name: fadeInDownBig;
    -o-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    -moz-animation-name: fadeInLeft;
    -o-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes fadeInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes fadeInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(20px);
    }
    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.fadeInRight {
    -webkit-animation-name: fadeInRight;
    -moz-animation-name: fadeInRight;
    -o-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

input,
select,
textarea {
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}

p {
    margin: 0 0 1em;
    line-height: 1.5em;
}

ul {
    list-style: none;
    text-align: left;
    line-height: 2;
}

ol {
    padding-left: 1.6em;
}

a {
    color: inherit;
    cursor: pointer;
}

.container {
    margin: 0 auto;
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

@media only screen and (min-width: 600px) {
    .container {
        width: 95%;
    }
}

@media only screen and (min-width: 970px) {
    .container {
        width: 970px;
    }
}

@media only screen and (min-width: 1170px) {
    .container {
        width: 1170px;
    }
}

body > .container > header .logo,
body > .container > header .logo a {
    width: 64px;
    height: 32px;
    display: block;
}

body > .container > header {
    box-sizing: border-box;
    background-color: #fff;
    position: relative;
    padding: 20px;
    -webkit-transition: top 0.3s;
    -moz-transition: top 0.3s;
    -o-transition: top 0.3s;
    transition: top 0.3s;
}

@media only screen and (min-width: 970px) {
    body > .container > header {
        padding: 30px 30px 0;
    }
}

body > .container > header .logo {
    background: url(../images/dx-logo@2x.png) left top no-repeat;
    overflow: hidden;
    text-indent: 100%;
    background-size: contain;
}

body > .container > header h2.toggle {
    background: 0 0;
    color: #1c62b0;
    display: block;
    font-size: 0.7em;
    position: absolute;
    right: 20px;
    top: 20px;
    margin: 0;
    padding: 36px 0 0;
    width: 45px;
    height: 51px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: none;
    border-radius: none;
    border: 0;
    cursor: pointer;
    -webkit-transition: background 0.25s;
    -moz-transition: background 0.25s;
    -o-transition: background 0.25s;
    transition: background 0.25s;
    text-transform: uppercase;
    z-index: 1001;
}

@media only screen and (min-width: 970px) {
    body > .container > header h2.toggle {
        display: none;
    }
    body > .container > header nav {
        margin: 0 -30px;
    }
}

body > .container > header h2.toggle span {
    font-size: 0;
    display: block;
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 7px;
    background-color: #009ee2;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -pie-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: background 0s 0.25s;
    -moz-transition: background 0s 0.25s;
    -o-transition: background 0s 0.25s;
    transition: background 0s 0.25s;
}

body > .container > header h2.toggle span:after,
body > .container > header h2.toggle span:before {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 7px;
    background-color: #009ee2;
    content: '';
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -pie-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition-duration: 0.25s, 0.25s;
    transition-duration: 0.25s, 0.25s;
    -webkit-transition-delay: 0.25s, 0s;
    transition-delay: 0.25s, 0s;
}

#main #coming-soon:after,
#main .action:after,
#main .roundal a:after,
body > .container > header #nav li a:before {
    content: '';
}

body > .container > header h2.toggle span:before {
    top: -12px;
    -webkit-transition-property: top, -webkit-transform;
    transition-property: top, transform;
}

body > .container > header h2.toggle span:after {
    bottom: -12px;
    -webkit-transition-property: bottom, -webkit-transform;
    transition-property: bottom, transform;
}

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

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

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

@media only screen and (max-width: 970px) {
    body > .container > header h2.toggle.active + #nav {
        height: 340px;
    }
    body > .container > header h2.toggle.active + #nav li {
        -webkit-animation-name: fadeInRight;
        -moz-animation-name: fadeInRight;
        -o-animation-name: fadeInRight;
        animation-name: fadeInRight;
    }
    body > .container > header h2.toggle.active + #nav li.exchange {
        -webkit-animation-duration: 0.2s;
        -moz-animation-duration: 0.2s;
        -o-animation-duration: 0.2s;
        animation-duration: 0.2s;
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        -o-animation-delay: 0s;
        animation-delay: 0s;
    }
    body > .container > header h2.toggle.active + #nav li.tracked {
        -webkit-animation-duration: 0.2s;
        -moz-animation-duration: 0.2s;
        -o-animation-duration: 0.2s;
        animation-duration: 0.2s;
        -webkit-animation-delay: 0.1s;
        -moz-animation-delay: 0.1s;
        -o-animation-delay: 0.1s;
        animation-delay: 0.1s;
    }
    body > .container > header h2.toggle.active + #nav li.secure {
        -webkit-animation-duration: 0.2s;
        -moz-animation-duration: 0.2s;
        -o-animation-duration: 0.2s;
        animation-duration: 0.2s;
        -webkit-animation-delay: 0.2s;
        -moz-animation-delay: 0.2s;
        -o-animation-delay: 0.2s;
        animation-delay: 0.2s;
    }
    body > .container > header h2.toggle.active + #nav li.collect {
        -webkit-animation-duration: 0.2s;
        -moz-animation-duration: 0.2s;
        -o-animation-duration: 0.2s;
        animation-duration: 0.2s;
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        -o-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
    body > .container > header h2.toggle.active + #nav li.mailshot {
        -webkit-animation-duration: 0.2s;
        -moz-animation-duration: 0.2s;
        -o-animation-duration: 0.2s;
        animation-duration: 0.2s;
        -webkit-animation-delay: 0.4s;
        -moz-animation-delay: 0.4s;
        -o-animation-delay: 0.4s;
        animation-delay: 0.4s;
    }
}

body > .container > header h2.toggle.active span {
    background: 0 0;
}

body > .container > header h2.toggle.active span:after,
body > .container > header h2.toggle.active span:before {
    background-color: #009ee2;
    -webkit-transition-delay: 0s, 0.25s;
    transition-delay: 0s, 0.25s;
}

body > .container > header h2.toggle.active span:before {
    top: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

body > .container > header h2.toggle.active span:after {
    bottom: 0;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

body > .container > header #nav {
    height: 0;
    z-index: 2;
    position: relative;
    top: 100%;
    left: 0;
    background-color: #fff;
    overflow: hidden;
    padding: 20px 0 0;
    margin: 0;
    -webkit-transition: height 0.5s;
    -moz-transition: height 0.5s;
    -o-transition: height 0.5s;
    transition: height 0.5s;
    font-size: 1.26666667em;
    font-weight: 500;
}

@media only screen and (min-width: 970px) {
    body > .container > header #nav {
        display: table;
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: visible;
        height: auto;
        font-size: 1.06666667em;
        font-weight: 400;
    }
}

body > .container > header #nav li {
    border-bottom: 2px solid #009ee2;
}

body > .container > header #nav li a {
    color: #808285;
    display: block;
    padding: 10px 0;
    text-decoration: none;
    white-space: nowrap;
}

body > .container > header #nav li a:focus,
body > .container > header #nav li a:hover {
    color: #505154;
}

body > .container > header #nav li a:before {
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    display: inline-block;
    vertical-align: middle;
    margin-right: 16px;
    width: 45px;
    height: 45px;
}

body > .container > header #nav li.exchange {
    border-color: #009ee2;
}

body > .container > header #nav li.exchange a {
    color: #312781;
}

body > .container > header #nav li.exchange a:before {
    background-image: url(../images/exchange-icon@2x.png);
}

body > .container > header #nav li.tracked {
    border-color: #5b9b8f;
}

body > .container > header #nav li.tracked a {
    color: #5b9b8f;
}

body > .container > header #nav li.tracked a:before {
    background-image: url(../images/tracked-icon@2x.png);
}

body > .container > header #nav li.secure {
    border-color: #dc622e;
}

body > .container > header #nav li.secure a {
    color: #dc622e;
}

body > .container > header #nav li.secure a:before {
    background-image: url(../images/secure-icon@2x.png);
    background-position: 25% center;
}

body > .container > header #nav li.collect {
    border-color: #7c4d67;
}

body > .container > header #nav li.collect a {
    color: #505876;
}

body > .container > header #nav li.collect a:before {
    background-image: url(../images/collect-icon@2x.png);
}

body > .container > header #nav li.mailshot {
    border-color: #312781;
}

body > .container > header #nav li.mailshot a {
    color: #312781;
}

body > .container > header #nav li.mailshot a:before {
    background-image: url(../images/mailshot-icon@2x.png);
}

@media only screen and (min-width: 970px) {
    body > .container > header #nav li {
        display: table-cell;
        width: 20%;
        vertical-align: middle;
        text-align: center;
        border-width: 8px;
    }
    body > .container > header #nav li a {
        padding: 22px 0;
    }
    body > .container > header #nav li a:before {
        display: none;
    }
    body > .container > header.sticky nav {
        background-color: #fff;
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        -webkit-animation-duration: 0.5s;
        -moz-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-delay: 0s;
        -moz-animation-delay: 0s;
        -o-animation-delay: 0s;
        animation-delay: 0s;
        -webkit-animation-name: fadeInDownBig;
        -moz-animation-name: fadeInDownBig;
        -o-animation-name: fadeInDownBig;
        animation-name: fadeInDownBig;
        width: 970px;
        margin: 0 auto;
        z-index: 20;
    }
}

@media only screen and (min-width: 1170px) {
    body > .container > header.sticky nav {
        width: 1170px;
    }
}

@media only screen and (max-width: 970px) {
    body > .container {
        padding-top: 70px;
    }
    body > .container header {
        background-color: #fff;
        z-index: 10;
        height: auto !important;
        padding: 20px 20px 0;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
    }
    body > .container header nav {
        background-color: #fff;
        padding: 10px 0;
    }
    body > .container header nav #nav {
        padding: 0;
    }
}

#main {
    background-color: #fff;
}

#main .action:after {
    display: inline-block;
    background: url(../images/dot-more@2x.png) center center no-repeat;
    background-size: contain;
    margin-left: 10px;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

#main .roundal {
    background-color: #62a51f;
    color: #fff;
    display: block;
    font-size: 0.86666667em;
    width: 100px;
    height: 100px;
    -webkit-border-radius: 55px;
    -moz-border-radius: 55px;
    -pie-border-radius: 55px;
    border-radius: 55px;
    text-align: center;
    padding: 5px;
    position: absolute;
    left: 20px;
    top: 20px;
}

#main .roundal a {
    display: block;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

#main .roundal a:after {
    background: url(../images/dot-more-reverse@2x.png) center center no-repeat;
    background-size: contain;
    display: block;
    width: 18px;
    height: 18px;
    margin: 9px auto 0;
}

#main #form {
    background: url(../images/bg-banner-mobile@2x.jpg) center top no-repeat #312781;
    background-size: contain;
    padding-top: 56%;
    position: relative;
}

@media only screen and (min-width: 970px) {
    #main .roundal {
        width: 140px;
        height: 140px;
        -webkit-border-radius: 75px;
        -moz-border-radius: 75px;
        -pie-border-radius: 75px;
        border-radius: 75px;
        font-size: 1.2em;
        line-height: 1.4em;
        left: 40px;
        top: 40px;
    }
    #main .roundal a:after {
        width: 25px;
        height: 25px;
    }
    #main #form {
        background-image: url(../images/bg-banner-desktop@2x.jpg);
        padding: 0;
    }
}

#main #form .intro {
    color: #fff;
    padding: 20px;
}

@media only screen and (min-width: 970px) {
    #main #form .intro {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: left;
        width: 50%;
        margin-top: 34.9%;
        padding-left: 5%;
    }
    #main #form .intro a.action {
        display: none;
    }
}

#main #form h1 {
    font-size: 1.46666667em;
    font-weight: 700;
    margin-top: 0;
}

#main #form h1 span {
    color: #009ee2;
}

@media only screen and (min-width: 970px) {
    #main #form h1 {
        font-size: 2.33333333em;
    }
}

@media only screen and (min-width: 1170px) {
    #main #form .intro {
        width: 55%;
    }
    #main #form h1 {
        font-size: 2.46666667em;
    }
}

#main #form .action {
    display: block;
    margin-top: 1em;
    font-weight: 700;
}

#main #form .action.active:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}

#main #form .form-wrapper {
    overflow: hidden;
    height: 0;
    -webkit-transition: height 0.4s;
    -moz-transition: height 0.4s;
    -o-transition: height 0.4s;
    transition: height 0.4s;
}

@media only screen and (min-width: 970px) {
    #main #form .form-wrapper {
        overflow: visible;
        float: right;
        width: 45%;
        margin-top: 30px;
        margin-right: 30px;
        margin-bottom: 30px;
    }
}

@media only screen and (min-width: 1170px) {
    #main #form .form-wrapper {
        width: 460px;
    }
}

#main #form form {
    box-sizing: border-box;
    background-color: #fff;
    color: #312781;
    padding: 20px;
}

#main #form form:after,
#main #form form:before {
    display: table;
    content: '';
    line-height: 0;
}

@media only screen and (min-width: 970px) {
    #main #form form {
        padding: 30px;
    }
}

#main #form form fieldset {
    border: 0;
    margin: 0 -5px;
    padding: 0;
}

#main #form form fieldset .checkbox,
#main #form form fieldset .text {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#main #form form fieldset .checkbox.col,
#main #form form fieldset .text.col {
    display: inline-block;
    width: 50%;
    margin-right: -5px;
}

#main #form form fieldset .text {
    padding: 5px;
}

#main #form form fieldset .checkbox {
    padding: 5px 0 5px 5px;
}

@media only screen and (min-width: 970px) {
    #main #form form fieldset .checkbox.col {
        margin-left: -5px;
    }
    #main #form form fieldset .checkbox.col.Tracked-Mail,
    #main #form form fieldset .checkbox.col.tracked {
        width: 32%;
    }
    #main #form form fieldset .checkbox.col.SecureDX,
    #main #form form fieldset .checkbox.col.secure {
        width: 28%;
    }
    #main #form form fieldset .checkbox.col.collect {
        width: 39%;
    }
    #main #form form fieldset .checkbox.col.Mailshot,
    #main #form form fieldset .checkbox.col.mailshot {
        width: 21%;
    }
    #main #form form fieldset .checkbox label {
        font-size: 0.86666667em;
        vertical-align: bottom;
    }
}

#main #form form fieldset legend {
    font-size: 1.13333333em;
    padding-left: 5px;
    padding-bottom: 10px;
}

@media only screen and (min-width: 970px) {
    #main #form form fieldset legend {
        letter-spacing: -0.02em;
        font-weight: 200;
        width: 40%;
        float: left;
        line-height: 1.1em;
        font-size: 2.26666667em;
    }
    #main #form form fieldset legend .cap {
        text-transform: capitalize;
    }
    #main #form form fieldset legend span.mobile {
        display: block;
        position: absolute;
        left: -999em;
        top: -999em;
    }
}

#main #form form fieldset input,
#main #form form fieldset label,
#main #form form fieldset label.radio-button {
    font-size: 0.86666667em;
    margin: 0;
}

#main #form form fieldset label {
    cursor: pointer;
}

#main #form form fieldset label.hidden {
    position: absolute;
    left: -999em;
    top: -999em;
}

#main #form form fieldset input[type='checkbox'] {
    -webkit-appearance: checkbox;
    margin-right: 10px;
    vertical-align: middle;
}

#main #form form fieldset input[type='radio'] {
    margin-right: 10px;
    box-sizing: border-box;
    border-radius: 10px;
}

#main #form form fieldset input[type='text'] {
    font-size: 0.93333333em;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #d9f1fb;
    border: 0;
    padding: 10px;
    width: 100%;
}

#main #form form fieldset input[type='text'] .placeholder {
    color: #312781;
}

#main #form form fieldset input[type='text']::-webkit-input-placeholder {
    color: #312781;
}

#main #form form fieldset input[type='text']::-moz-placeholder {
    color: #312781;
}

#main #form form fieldset input[type='text']:-ms-input-placeholder {
    color: #312781;
}

#main #form form fieldset input[type='text']:-moz-placeholder {
    color: #312781;
}

#main #form form fieldset input[type='text']:focus::-webkit-input-placeholder {
    color: rgba(49, 39, 129, 0.4);
}

#main #form form fieldset input[type='text']:focus::-moz-placeholder {
    color: rgba(49, 39, 129, 0.4);
}

#main #form form fieldset input[type='text']:focus:-ms-input-placeholder {
    color: rgba(49, 39, 129, 0.4);
}

#main #form form fieldset input[type='text']:focus:-moz-placeholder {
    color: rgba(49, 39, 129, 0.4);
}

#main #form form button {
    background-color: #62a51f;
    color: #fff;
    border: 0;
    font-weight: 400;
    padding: 10px 25px;
    float: right;
    margin-top: 10px;
}

#main #form form .call {
    float: left;
    font-size: 1.06666667em;
    font-weight: 200;
    line-height: 40px;
    margin-top: 10px;
}

#main #form form .call span {
    font-weight: 700;
}

#main #form ol.services {
    display: none;
}

@media only screen and (min-width: 970px) {
    #main #form form button {
        float: left;
    }
    #main #form form .call {
        float: right;
        font-size: 1.26666667em;
    }
    #main #form ol.services {
        clear: both;
        background-color: #fff;
        display: block;
        padding: 30px;
    }
    #main #form ol.services li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        width: 24%;
        vertical-align: top;
        text-align: center;
        position: relative;
        min-height: 18em;
        padding: 0 2% 2em;
    }
    #main #form ol.services li h2:before,
    #main #form ol.services li:before {
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
        display: block;
    }
    #main #form ol.services li:before {
        background-position: left center;
        vertical-align: top;
        margin: 0 auto 1em;
        width: 25px;
        height: 25px;
        position: relative;
        top: 0;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    #main #form ol.services li h2 {
        margin-bottom: 1em;
        font-size: 1.06666667em;
    }
    #main #form ol.services li h2:before {
        background-position: center center;
        vertical-align: middle;
        margin: 0 auto 1em;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }
    #main #form ol.services li:hover:before {
        top: -10px;
    }
    #main #form ol.services li:hover h2:before {
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -ms-transform: scale(1.2);
        -o-transform: scale(1.2);
        transform: scale(1.2);
    }
    #main #form ol.services li p {
        margin: 0;
        font-size: 0.86666667em;
    }
    #main #form ol.services li .action {
        color: #62a51f;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }
    #main #form ol.services li.exchange:before {
        background-image: url(../images/dot-1@2x.png);
    }
    #main #form ol.services li.exchange h2 {
        color: #312781;
    }
    #main #form ol.services li.exchange h2:before {
        background-image: url(../images/exchange-icon@2x.png);
        width: 53px;
        height: 53px;
    }
    #main #form ol.services li.tracked:before {
        background-image: url(../images/dot-2@2x.png);
    }
    #main #form ol.services li.tracked h2 {
        color: #5b9b8f;
    }
    #main #form ol.services li.tracked h2:before {
        background-image: url(../images/tracked-icon@2x.png);
        width: 64.5px;
        height: 53px;
    }
    #main #form ol.services li.secure:before {
        background-image: url(../images/dot-3@2x.png);
    }
    #main #form ol.services li.secure h2 {
        color: #dc622e;
    }
    #main #form ol.services li.secure h2:before {
        background-image: url(../images/secure-icon@2x.png);
        width: 37px;
        height: 53px;
    }
    #main #form ol.services li.collect:before {
        background-image: url(../images/dot-4@2x.png);
    }
    #main #form ol.services li.collect h2 {
        color: #505876;
    }
    #main #form ol.services li.collect h2:before {
        background-image: url(../images/collect-icon@2x.png);
        width: 52px;
        height: 53px;
    }
}

@media only screen and (min-width: 1170px) {
    #main #form ol.services li {
        min-height: 17em;
        padding: 0 3% 2em;
    }
    #main #form ol.services li h2 {
        font-size: 1.13333333em;
    }
}

#main #coming-soon {
    background: #f6f6f6;
    min-height: 170px;
    padding: 20px 45% 20px 20px;
    position: relative;
}

#main #coming-soon h2 {
    color: #62a51f;
    font-size: 1.33333333em;
    margin-bottom: 0.25em;
    text-transform: uppercase;
}

#main #coming-soon p {
    font-size: 0.86666667em;
}

#main #coming-soon:after {
    background: url(../images/man-laptop-small@2x.png) right bottom no-repeat;
    background-size: contain;
    display: block;
    width: 142px;
    height: 186px;
    position: absolute;
    right: 0;
    bottom: 0;
}

#main #services > div h2:before,
#main #services > div p.lead:after,
#main #services > div q:after,
#main #tools .tool a:before {
    background-size: contain;
    background-repeat: no-repeat;
    content: '';
}

@media only screen and (min-width: 970px) {
    #main #coming-soon {
        height: 170px;
        margin-top: 3em;
    }
    #main #coming-soon .content {
        position: relative;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        width: 110%;
        padding-left: 350px;
    }
    #main #coming-soon .content h2.newnotification {
        font-size: 1.86666667em;
    }
    #main #coming-soon .content h2 {
        font-size: 2em;
    }
    #main #coming-soon .content p {
        font-size: 0.93333333em;
    }
    #main #coming-soon:after {
        content: '';
        background-image: url(../images/man-laptop-large@2x.png);
        width: 260px;
        height: 250px;
        right: auto;
        left: 80px;
    }
}

#main #tools {
    background-color: #312781;
    color: #fff;
    padding: 20px;
    text-align: center;
}

#main #tools p.lead {
    font-size: 1.2em;
}

@media only screen and (min-width: 970px) {
    #main #tools p.lead {
        font-size: 1.46666667em;
        font-weight: 200;
        max-width: 730px;
        margin: 1em auto;
    }
}

#main #tools .tool {
    padding: 0 10%;
}

#main #tools .tool a {
    display: inline-block;
}

#main #tools .tool a:before {
    background-position: center center;
    display: block;
    margin: 0.5em auto;
    width: 60px;
    height: 50px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

#main #tools .tool a:hover:before {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

#main #tools .tool.directory a {
    max-width: 240px;
}

#main #tools .tool.directory a:before {
    background-image: url(../images/info-icon@2x.png);
}

#main #tools .tool.address-book a {
    max-width: 210px;
}

#main #tools .tool.address-book a:before {
    background-image: url(../images/address-icon@2x.png);
}

#main #tools .tool.help a {
    max-width: 280px;
}

#main #tools .tool.help a:before {
    background-image: url(../images/help-icon@2x.png);
}

#main #tools .tool p {
    font-size: 1.06666667em;
    font-weight: 700;
    margin-bottom: 0.5em;
}

#main #tools .tool .action {
    font-size: 0.86666667em;
    line-height: 1.5em;
}

#main #tools .tool .action:after {
    display: block;
    margin: 0.5em auto 1.5em;
}

@media only screen and (min-width: 970px) {
    #main #tools .tool {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        width: 32.8%;
        padding: 0 2%;
        vertical-align: top;
    }
    #main #services {
        padding: 30px 60px;
    }
}

#main #services > div {
    padding: 20px;
}

#main #services > div h2 {
    color: #312781;
    font-size: 1.46666667em;
    margin-bottom: 0.4em;
    letter-spacing: -0.02em;
}

@media only screen and (min-width: 970px) {
    #main #services > div {
        position: relative;
        padding: 30px 0;
    }
    #main #services > div .overview {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        padding-right: 480px;
        position: relative;
    }
    #main #services > div .overview:after {
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center bottom;
        content: '';
        display: block;
        position: absolute;
    }
    #main #services > div h2 {
        font-size: 2.13333333em;
        margin-top: 0;
    }
}

#main #services > div h2:before {
    background-position: center center;
    display: inline-block;
    width: 28px;
    height: 28px;
    margin-right: 12px;
    vertical-align: middle;
    margin-top: -0.2em;
}

#main #services > div p.lead {
    font-size: 1.4em;
    line-height: 1.3em;
    border-bottom: 2px solid #009ee2;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
    font-weight: 200;
    letter-spacing: -0.03em;
}

#main #services > div p.lead:after {
    background-position: center bottom;
    display: block;
    width: 216px;
    margin: 0.5em auto 0;
}

#main #services > div p.lead.desktop {
    display: none;
}

@media only screen and (min-width: 970px) {
    #main #services > div p.lead {
        border: 0;
        font-size: 1.93333333em;
    }
    #main #services > div p.lead:after {
        width: 270px;
        border-bottom: 2px solid #009ee2;
        padding: 0 35px;
        position: absolute;
        right: 60px;
        top: 0;
    }
    #main #services > div p.lead.mobile {
        display: none;
    }
    #main #services > div p.lead.desktop {
        display: block;
    }
}

#main #services > div ul {
    font-size: 0.86666667em;
    list-style: disc;
    margin-left: 1.6em;
}

#main #services > div ul li {
    color: #009ee2;
    margin: 0.5em 0;
}

#main #services > div ul li span {
    color: #636363;
}

@media only screen and (min-width: 970px) {
    #main #services > div ul {
        font-size: 0.93333333em;
    }
}

#main #services > div q {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    font-size: 1.06666667em;
    max-width: 200px;
    position: relative;
    margin: 1.8em 0 2em 1.3em;
}

@media only screen and (min-width: 970px) {
    #main #services > div q {
        margin-left: 0;
    }
}

#main #services > div q:before {
    content: '';
}

#main #services > div q:after {
    background-position: center center;
    width: 80px;
    height: 60px;
    position: absolute;
    left: 100%;
    top: -20%;
}

#main #services > div .action {
    font-weight: 700;
    color: #62a51f;
    text-decoration: none;
    margin-left: 1.5em;
}

@media only screen and (min-width: 970px) {
    #main #services > div .action {
        margin-left: 0;
    }
    #main #services > div .table-wrapper {
        background-color: #009ee2;
        margin: 4em -60px 0;
        padding: 20px 120px;
    }
}

#main #services > div table {
    background-color: #e7e8e9;
    width: 100%;
    margin-top: 1.5em;
}

#main #services > div table td,
#main #services > div table th {
    font-size: 0.86666667em;
    padding: 8px;
    text-align: center;
    vertical-align: middle;
}

@media only screen and (min-width: 970px) {
    #main #services > div table {
        background-color: #fff;
        border: 10px solid #fff;
        margin-top: 0;
    }
    #main #services > div table td,
    #main #services > div table th {
        font-size: 0.93333333em;
        padding: 12px;
    }
}

#main #services > div table td {
    font-weight: 700;
}

#main #services > div table td span {
    color: #312781;
    display: block;
}

#main #services > div table td span.supporting {
    font-weight: 200;
    font-size: 0.9em;
    color: #636363 !important;
}

#main #services > div table td.n-a span {
    background: url(../images/icon-no.png) center center no-repeat;
    background-size: contain;
    text-indent: -999em;
}

#main #services > div table td.yes span {
    background: url(../images/icon-yes.png) center center no-repeat;
    background-size: contain;
    text-indent: -999em;
}

#main #services > div table th {
    background-color: #009ee2;
    color: #fff;
    font-weight: 400;
}

@media only screen and (max-width: 970px) {
    #main #services > div table {
        display: block;
        border-bottom: 0;
        position: relative;
        overflow: hidden;
    }
    #main #services > div table tbody,
    #main #services > div table td,
    #main #services > div table th,
    #main #services > div table thead,
    #main #services > div table tr {
        display: block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    #main #services > div table thead tr th {
        border-right: 1px solid #fff;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #009ee2;
        height: 100%;
        text-indent: -999em;
        width: 50%;
    }
    #main #services > div table td {
        background: 0 0;
        border-bottom: 1px solid #fff;
        padding: 8px 0;
        position: relative;
        text-align: left;
        overflow: hidden;
        vertical-align: middle;
    }
    #main #services > div table td:before,
    #main #services > div table td > span {
        display: inline-block;
        width: 50%;
        vertical-align: middle;
        text-align: center;
    }
    #main #services > div table td > span {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0 8px;
    }
    #main #services > div table td:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        content: attr(data-label);
        margin: -8px 8px -8px -8px;
        color: #fff;
        font-weight: 400;
        padding: 8px 0 8px 16px;
        position: relative;
    }
}

#main #services > div#dx-exchange,
#main #services > div#dx-mailshot {
    position: relative;
}

#main #services > div#dx-exchange .overview .roundal {
    display: none;
}

@media only screen and (min-width: 970px) {
    #main #services > div#dx-exchange .overview {
        min-height: 340px;
    }
    #main #services > div#dx-exchange .overview:after {
        background-image: url(../images/exchange-2@2x.png);
        background-position: center bottom;
        width: 340px;
        height: 400px;
        right: 60px;
        bottom: -60px;
    }
    #main #services > div#dx-exchange .overview .roundal {
        display: block;
        left: auto;
        top: auto;
        right: 35%;
        bottom: -40px;
        font-size: 0.8em;
        z-index: 10;
    }
    #main #services > div#dx-exchange .overview .roundal a {
        padding: 0 18px;
        text-decoration: none;
    }
}

#main #services > div#dx-exchange h2:before {
    background-image: url(../images/dot-1@2x.png);
}

#main #services > div#dx-exchange li {
    color: #009ee2;
}

#main #services > div#dx-exchange .lead:after {
    background-image: url(../images/exchange-1@2x.png);
    border-color: #009ee2;
    height: 108px;
}

#main #services > div#dx-exchange .table-wrapper,
#main #services > div#dx-exchange table tr th {
    background-color: #009ee2;
}

#main #services > div#dx-exchange table tr td span {
    color: #312781;
}

#main #services > div#dx-tracked .action,
#main #services > div#dx-tracked h2,
#main #services > div#dx-tracked li,
#main #services > div#dx-tracked q,
#main #services > div#dx-tracked table tr td span {
    color: #5b9b8f;
}

@media only screen and (min-width: 970px) {
    #main #services > div#dx-exchange .lead:after {
        height: 135px;
        border-color: #009ee2;
    }
    #main #services > div#dx-tracked .overview {
        padding-left: 450px;
        padding-right: 0;
        min-height: 420px;
    }
    #main #services > div#dx-tracked .overview:after {
        background-image: url(../images/tracked-2@2x.png);
        background-position: center bottom;
        width: 340px;
        height: 400px;
        left: 60px;
        bottom: -60px;
    }
    #main #services > div#dx-tracked .lead {
        margin-right: -100px;
    }
}

#main #services > div#dx-tracked h2:before {
    background-image: url(../images/dot-2@2x.png);
}

#main #services > div#dx-tracked q:after {
    background-image: url(../images/tracked-clock@2x.png);
}

#main #services > div#dx-tracked .action:after {
    background-image: url(../images/dot-more-aqua@2x.png);
}

#main #services > div#dx-tracked .lead {
    border-color: #5b9b8f;
}

#main #services > div#dx-tracked .lead:after {
    background-image: url(../images/tracked-1@2x.png);
    height: 144px;
}

#main #services > div#dx-tracked .table-wrapper,
#main #services > div#dx-tracked table tr th {
    background-color: #5b9b8f;
}

@media only screen and (min-width: 970px) {
    #main #services > div#dx-tracked .lead:after {
        height: 180px;
        border-color: #5b9b8f;
        left: 60px;
        right: auto;
        top: -40px;
    }
    #main #services > div#securedx .overview {
        min-height: 420px;
    }
    #main #services > div#securedx .overview:after {
        background-image: url(../images/secure-2@2x.png);
        background-position: right bottom;
        width: 500px;
        height: 200px;
        right: -60px;
        bottom: -60px;
    }
}

@media only screen and (min-width: 1170px) {
    #main #services > div#securedx .overview:after {
        width: 625px;
        height: 250px;
    }
}

#main #services > div#securedx .action,
#main #services > div#securedx h2,
#main #services > div#securedx q {
    color: #dc622e;
}

#main #services > div#securedx h2:before {
    background-image: url(../images/dot-3@2x.png);
}

#main #services > div#securedx li {
    color: #e29233;
}

#main #services > div#securedx q:after {
    background-image: url(../images/secure-clock@2x.png);
}

#main #services > div#securedx .action:after {
    background-image: url(../images/dot-more-orange@2x.png);
}

#main #services > div#securedx .lead {
    border-color: #dc622e;
}

#main #services > div#securedx .lead:after {
    background-image: url(../images/secure-1@2x.png);
    height: 148px;
}

@media only screen and (min-width: 970px) {
    #main #services > div#securedx .lead:after {
        height: 185px;
        border-color: #dc622e;
    }
    #main #services > div#dx-collect-deliver:after {
        margin: 0 -60px;
    }
}

#main #services > div#securedx .table-wrapper {
    background-color: #e29233;
}

#main #services > div#securedx table tr th {
    background-color: #dc622e;
}

#main #services > div#securedx table tr td span {
    color: #dc622e;
}

#main #services > div#dx-collect-deliver:after {
    content: '';
    display: block;
    border-bottom: 5px solid #7c4d67;
}

@media only screen and (min-width: 970px) {
    #main #services > div#dx-collect-deliver .overview {
        padding-left: 400px;
        padding-right: 0;
    }
    #main #services > div#dx-collect-deliver .overview ul {
        width: 60%;
    }
}

@media only screen and (min-width: 1170px) {
    #main #services > div#dx-collect-deliver .overview {
        padding-right: 200px;
    }
    #main #services > div#dx-collect-deliver .overview:after {
        width: 340px;
        height: 275px;
    }
}

#main #services > div#dx-collect-deliver h2,
#main #services > div#dx-collect-deliver q {
    color: #505876;
}

#main #services > div#dx-collect-deliver h2:before {
    background-image: url(../images/dot-4@2x.png);
}

#main #services > div#dx-collect-deliver li {
    color: #7c4d67;
}

#main #services > div#dx-collect-deliver q:after {
    background-image: url(../images/collect-location@2x.png);
}

#main #services > div#dx-collect-deliver .lead {
    border-color: #7c4d67;
}

#main #services > div#dx-collect-deliver .lead:after {
    background-image: url(../images/collect-1@2x.png);
    height: 120px;
}

#main #services > div#dx-mailshot .desktop {
    display: none;
}

@media only screen and (min-width: 970px) {
    #main #services > div#dx-collect-deliver .lead:after {
        height: 150px;
        border-color: #7c4d67;
        left: 0;
        right: auto;
    }
    #main #services > div#dx-mailshot h3.desktop,
    #main #services > div#dx-mailshot p.desktop {
        display: block;
    }
    #main #services > div#dx-mailshot span.desktop {
        display: inline;
    }
    #main #services > div#dx-mailshot .overview {
        padding-right: 50%;
    }
}

#main #services > div#dx-mailshot h2,
#main #services > div#dx-mailshot li,
#main #services > div#dx-mailshot li b {
    color: #312781;
}

#main #services > div#dx-mailshot h2:before {
    display: none;
}

#main #services > div#dx-mailshot h3 {
    color: #312781;
    margin-bottom: 0.75em;
}

#main #services > div#dx-mailshot .lead,
#main #services > div#dx-mailshot .lead:after {
    border: none;
}

#main #services > div#dx-mailshot blockquote {
    margin: 2em 0 0;
}

#main #services > div#dx-mailshot blockquote p {
    font-weight: 700;
    color: #312781;
    font-size: 1.06666667em;
}

#main #services > div#dx-mailshot blockquote p:after,
#main #services > div#dx-mailshot blockquote p:before {
    background: url(../images/quote-open@2x.png) no-repeat;
    background-size: contain;
    content: '';
    display: inline-block;
    width: 29px;
    height: 21px;
    margin-right: 5px;
}

#main #services > div#dx-mailshot blockquote p:after {
    background: url(../images/quote-close@2x.png) no-repeat;
    background-size: contain;
    margin-left: 5px;
    margin-right: 0;
    vertical-align: top;
}

#main #services > div#dx-mailshot blockquote footer {
    font-style: italic;
    font-size: 0.85em;
}

#main #services > div#dx-mailshot blockquote:after {
    background: url(../images/man-safe@2x.png) no-repeat;
    background-size: contain;
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 80%;
    margin: 2em auto 0;
}

@media only screen and (min-width: 600px) {
    #main #services > div#dx-mailshot blockquote:after {
        width: 394px;
        padding-bottom: 50%;
    }
}

@media only screen and (min-width: 970px) {
    #main #services > div#dx-mailshot blockquote:after {
        padding-bottom: 90%;
    }
    #main #services > div#dx-mailshot blockquote {
        position: absolute;
        right: 0;
        top: 0;
        width: 45%;
    }
}

.back-to-top {
    clear: both;
    display: block;
    background-color: #312781;
    color: #fff;
    font-size: 1.46666667em;
    font-weight: 700;
    text-align: center;
    padding: 20px;
}

@media only screen and (max-width: 970px) {
    .back-to-top.sticky {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
    }
}

body > .container > footer {
    font-family: Arial, sans-serif;
    font-size: 0.86666667em;
    color: #898989;
}

body > .container > footer a {
    color: #898989;
    text-decoration: none;
}

body > .container > footer a:hover {
    text-decoration: underline;
}

body > .container > footer .box {
    border: 1px solid #ebebeb;
    overflow: auto;
    margin: 0 0 20px;
    background: #f5f5f5;
    text-align: center;
}

body > .container > footer .box .last p {
    font-size: 0.9em;
    margin: 0;
    max-width: 90%;
}

body > .container > footer .box .last li {
    border-top: 1px solid #ebebeb;
    padding-top: 10px;
    margin-bottom: 10px;
}

body > .container > footer .box .last li:first-child {
    padding-top: 2px;
    border: 0;
}

body > .container > footer .box.inline button {
    background: -moz-linear-gradient(left, #2f3291 0, #009ee6 100%);
    background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #2f3291),
        color-stop(100%, #009ee6)
    );
    background: -webkit-linear-gradient(left, #2f3291 0, #009ee6 100%);
    background: -o-linear-gradient(left, #2f3291 0, #009ee6 100%);
    background: -ms-linear-gradient(left, #2f3291 0, #009ee6 100%);
    background: linear-gradient(to right, #2f3291 0, #009ee6 100%);
    filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr='#2f3291', endColorstr='#009ee6', GradientType=1)";
    display: none;
    font-size: 1em;
    padding: 8px 15px;
    color: #fff !important;
    border: 0;
    height: auto;
    text-align: center;
    text-transform: uppercase;
}

body > .container > footer .box.inline ul li {
    line-height: 1.5em;
    list-style: none;
}

body > .container > footer .box.inline ul li:last-child {
    border-right: 0;
}

body > .container > footer .box.terms {
    padding-top: 15px;
    padding-bottom: 15px;
}

body > .container > footer .box.terms ul {
    margin: 10px 0;
}

body > .container > footer .social {
    min-width: 210px;
}

body > .container > footer .social span {
    margin: 7px 5px;
    vertical-align: top;
    display: block;
}

body > .container > footer .social a {
    width: 30px;
    height: 30px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    margin: 2px 5px 0;
    display: inline-block;
    overflow: hidden;
    text-indent: -500%;
}

body > .container > footer .social a#facebook {
    background-image: url(../images/facebook2x.png);
}

body > .container > footer .social a#twitter {
    background-image: url(../images/twitter2x.png);
}

body > .container > footer .social a#linkedin {
    background-image: url(../images/linkedin2x.png);
}

@media only screen and (min-width: 800px) {
    body > .container > footer .inline a,
    body > .container > footer .inline button,
    body > .container > footer .inline li,
    body > .container > footer .inline p,
    body > .container > footer .inline span,
    body > .container > footer .inline ul {
        float: left;
        margin-bottom: 0;
    }
    body > .container > footer .inline li {
        border-right: 1px solid #898989;
        margin-right: 20px;
        padding-right: 20px;
    }
    body > .container > footer footer .active {
        max-height: 800px;
        padding: 40px;
        border: 1px solid #ebebeb;
    }
    body > .container > footer .terms ul {
        margin-left: 10px;
        float: left;
    }
    body > .container > footer .social span {
        display: inline-block;
    }
    body > .container > footer .social,
    body > .container > footer .terms button,
    body > .container > footer .terms ul {
        display: inline-block;
        vertical-align: top;
    }
    body > .container > footer .terms button {
        margin-right: 20px !important;
        width: auto;
        display: inline-block !important;
        margin: 0;
    }
}

@media only screen and (min-width: 1170px) {
    body > .container > footer footer .terms {
        text-align: left;
    }
    body > .container > footer footer .inline button,
    body > .container > footer footer .inline ul {
        float: left;
    }
    body > .container > footer .terms button {
        float: left;
        margin-right: 20px;
    }
    body > .container > footer .social {
        float: right;
    }
}

html.lt-ie9 body > .container > header .logo {
    background-image: url(../images/dx-logo@1x.png);
}

html.lt-ie9 body > .container > header #nav li.exchange a:before {
    background-image: url(../images/exchange-icon@1x.png);
}

html.lt-ie9 body > .container > header #nav li.tracked a:before {
    background-image: url(../images/tracked-icon@1x.png);
}

html.lt-ie9 body > .container > header #nav li.secure a:before {
    background-image: url(../images/secure-icon@1x.png);
}

html.lt-ie9 body > .container > header #nav li.collect a:before {
    background-image: url(../images/collect-icon@1x.png);
}

html.lt-ie9 body > .container > header #nav li.mailshot a:before {
    background-image: url(../images/mailshot-icon@1x.png);
}

html.lt-ie9 #main .action:after {
    background-image: url(../images/dot-more@1x.png);
}

html.lt-ie9 #main .roundal a {
    top: 0;
}

html.lt-ie9 #main .roundal a:after {
    background-image: url(../images/dot-more-reverse@1x.png);
}

html.lt-ie9 #main #form {
    background-image: url(../images/bg-banner-mobile@1x.png);
}

@media only screen and (min-width: 970px) {
    html.lt-ie9 body > .container > header #nav {
        display: table;
        width: 100%;
        padding: 0;
        margin: 0;
        overflow: visible;
        height: auto;
        font-size: 1.06666667em;
        font-weight: 400;
    }
    html.lt-ie9 #main #form {
        background-image: url(../images/bg-banner-desktop@1x.png);
    }
    html.lt-ie9 #main ol.services li.exchange:before {
        background-image: url(../images/dot-1@1x.png) !important;
    }
    html.lt-ie9 #main ol.services li.exchange h2:before {
        background-image: url(../images/exchange-icon@1x.png) !important;
    }
    html.lt-ie9 #main ol.services li.tracked:before {
        background-image: url(../images/dot-2@1x.png) !important;
    }
    html.lt-ie9 #main ol.services li.tracked h2:before {
        background-image: url(../images/tracked-icon@1x.png) !important;
    }
    html.lt-ie9 #main ol.services li.secure:before {
        background-image: url(../images/dot-3@1x.png) !important;
    }
    html.lt-ie9 #main ol.services li.secure h2:before {
        background-image: url(../images/secure-icon@1x.png) !important;
    }
    html.lt-ie9 #main ol.services li.collect:before {
        background-image: url(../images/dot-4@1x.png) !important;
    }
    html.lt-ie9 #main ol.services li.collect h2:before {
        background-image: url(../images/collect-icon@1x.png) !important;
    }
}

html.lt-ie9 #main #coming-soon:after {
    background-image: url(../images/man-laptop-small@1x.png);
}

@media only screen and (min-width: 970px) {
    html.lt-ie9 #main #coming-soon:after {
        background-image: url(../images/man-laptop-large@1x.png);
    }
}

html.lt-ie9 #main #tools .tool.directory a:before {
    background-image: url(../images/info-icon@1x.png);
}

html.lt-ie9 #main #tools .tool.address-book a:before {
    background-image: url(../images/address-icon@1x.png);
}

html.lt-ie9 #main #tools .tool.help a:before {
    background-image: url(../images/help-icon@1x.png);
}

html.lt-ie9 #main #services table td {
    font-weight: 700;
}

html.lt-ie9 #main #services table td.n-a span {
    background-image: url(../images/icon-no.png);
}

html.lt-ie9 #main #services table td.yes span {
    background-image: url(../images/icon-yes.png);
}

@media only screen and (min-width: 970px) {
    html.lt-ie9 #main #services #dx-exchange .overview:after {
        background-image: url(../images/exchange-2@1x.png);
    }
}

html.lt-ie9 #main #services #dx-exchange .overview h2:before {
    background-image: url(../images/dot-1@1x.png);
}

html.lt-ie9 #main #services #dx-exchange .overview .lead:after {
    background-image: url(../images/exchange-1@1x.png);
}

@media only screen and (min-width: 970px) {
    html.lt-ie9 #main #services #dx-tracked .overview:after {
        background-image: url(../images/tracked-2@1x.png);
    }
}

html.lt-ie9 #main #services #dx-tracked h2:before {
    background-image: url(../images/dot-2@1x.png);
}

html.lt-ie9 #main #services #dx-tracked q:after {
    background-image: url(../images/tracked-clock@1x.png);
}

html.lt-ie9 #main #services #dx-tracked .action:after {
    background-image: url(../../images/dot-more-aqua@1x.png);
}

html.lt-ie9 #main #services #dx-tracked .lead:after {
    background-image: url(../images/tracked-1@1x.png);
}

@media only screen and (min-width: 970px) {
    html.lt-ie9 #main #services #securedx .overview:after {
        background-image: url(../images/secure-2@1x.png);
    }
}

html.lt-ie9 #main #services #securedx h2:before {
    background-image: url(../images/dot-3@1x.png);
}

html.lt-ie9 #main #services #securedx q:after {
    background-image: url(../images/secure-clock@1x.png);
}

html.lt-ie9 #main #services #securedx .action:after {
    background-image: url(../images/dot-more-orange@1x.png);
}

html.lt-ie9 #main #services #securedx .lead {
    border-color: #dc622e;
}

html.lt-ie9 #main #services #securedx .lead:after {
    background-image: url(../images/secure-1@1x.png);
}

html.lt-ie9 #main #services #dx-collect-deliver h2:before {
    background-image: url(../images/dot-4@1x.png);
}

html.lt-ie9 #main #services #dx-collect-deliver q:after {
    background-image: url(../images/collect-location@1x.png);
}

html.lt-ie9 #main #services #dx-collect-deliver .lead:after {
    background-image: url(../images/collect-1@1x.png);
}

html.lt-ie9 #main #services #dx-mailshot blockquote p:after,
html.lt-ie9 #main #services #dx-mailshot blockquote p:before {
    background-image: url(../images/quote-open@1x.png);
}

html.lt-ie9 #main #services #dx-mailshot blockquote p:after {
    background-image: url(../images/quote-close@1x.png);
}

html.lt-ie9 #main #services #dx-mailshot blockquote:after {
    background-image: url(../images/man-safe@1x.png);
}

html.lt-ie9 body > .container > footer .social a#facebook {
    background-image: url(../images/facebook1x.png);
}

html.lt-ie9 body > .container > footer .social a#twitter {
    background-image: url(../images/twitter1x.png);
}

html.lt-ie9 body > .container > footer .social a#linkedin {
    background-image: url(../images/linkedin1x.png);
}

.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#main #form form fieldset .radio-button {
    padding: 0;
}

#main #form form fieldset label.radio-button {
    display: inline;
}

#main #form form fieldset .checkbox.privacypolicy_checkbox {
    margin-left: 0;
}

#main #form form fieldset .privacypolicy_span span {
    font-size: 0.86666667em;
    margin: 0;
}

#main #form form fieldset p {
    margin: 0 0 0 5px;
    font-size: 1em;
}

#main #form form fieldset .privacypolicy_span {
    margin-left: 5px;
}

#main #form form fieldset .checkbox.checkbox.privacypolicy_checkbox {
    padding: 0 0 5px 5px;
}

#main #form form fieldset .privacypolicy_terms {
    font-size: 0.866667em;
    font-weight: 600;
}

input[type='checkbox'].error + label,
input[type='checkbox'].input-validation-error + label,
input[type='radio'].error + label,
input[type='radio'].input-validation-error + label {
    color: red !important;
}

.gf__control {
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

.gf__control__label {
    padding: 5px;
}

.gf__control__input-container {
    padding: 5px;
    margin-left: -5px;
}

.gf__control__input--text {
    font-size: 0.93333333em;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #d9f1fb;
    border: 0;
    padding: 10px;
    width: 100%;
}

div[class*='gf__control--Findoutmoreabout--'] .gf__control__label {
    letter-spacing: -0.02em;
    font-weight: 200;
    line-height: 1.1em;
    font-size: 2.26666667em;
}

div[class*='gf__control--Findoutmoreabout--'] + * {
    margin-top: 25px;
}

.gf__control__input-container__inner {
    margin-left: -15px;
}

.gf__control__radio-wrapper:first-child {
    padding: 0 0 5px 15px;
}

.gf__control__radio-wrapper {
    padding: 5px 0 5px 15px;
    float: left;
}

.gf__control__input--checkbox,
.gf__control__input--radio {
    margin-right: 5px;
}

.gf__control__label__checkbox,
.gf__control__label__radio {
    vertical-align: middle;
}

div[class*='gf__control--Termsconditions--'] {
    margin: 15px 5px 0;
    grid-template-columns: 100%;
}

div[class*='gf__control--Termsconditions--'] + * {
    margin-top: 25px;
}

.gf__control input[type='checkbox'] {
    -webkit-appearance: checkbox;
    margin-right: 10px;
    vertical-align: middle;
}

.gf__submit {
    background-color: #62a51f;
    color: #fff;
    border: 0;
    font-weight: 400;
    padding: 10px 25px;
    float: right;
    margin-top: 10px;
}

.gf__control--submit:after {
    content: 'Or call 0843 90 33 300';
    display: block;
    font-size: 1.26666667em;
    font-weight: 200;
    line-height: 40px;
    margin-top: 10px;
    margin-right: 10px;
    text-align: right;
}

.gf__text {
    font-weight: 400;
    font-size: 1.1em;
}

.gf__text a,
.gf__text a:hover {
    text-decoration: underline;
}

.gf__text > p {
    margin-top: 10px;
    font-size: 0.9em;
}

div[class*='gf__text--TextBlock-1--'] {
    margin: 25px 5px 0;
}

div[class*='gf__text--TextBlock-1--']:before {
    content: 'Terms & conditions';
    letter-spacing: -0.02em;
    font-weight: 400;
    font-size: 0.93333333em;
    line-height: 1.1em;
    display: block;
}

div[class*='gf__control--Wouldyoulikeustogetintouch--'] {
    grid-template-columns: 100%;
    gap: 5px;
}

div[class*='gf__control--Wouldyoulikeustogetintouch--'] .gf__control__input-container {
    margin: 0;
}

.gf__control--submit {
    margin-top: 25px;
}
