@font-face {
    font-family: 'neo_sansbold';
    src: url("../static/ufonts.com_neo-sans-bold.eot");
    src: url("../static/ufonts.com_neo-sans-bold.eot?#iefix") format("embedded-opentype"), url("../static/ufonts.com_neo-sans-bold.woff2") format("woff2"), url("../static/ufonts.com_neo-sans-bold.woff") format("woff"), url("../static/ufonts.com_neo-sans-bold.ttf") format("truetype"), url("../static/ufonts.com_neo-sans-bold.svg#neo_sansbold") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'neo_sanslight';
    src: url("../static/ufonts.com_neo-sans-light.eot");
    src: url("../static/ufonts.com_neo-sans-light.eot?#iefix") format("embedded-opentype"), url("../static/ufonts.com_neo-sans-light.woff2") format("woff2"), url("../static/ufonts.com_neo-sans-light.woff") format("woff"), url("../static/ufonts.com_neo-sans-light.ttf") format("truetype"), url("../static/ufonts.com_neo-sans-light.svg#neo_sanslight") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'neo_sansmedium';
    src: url("../static/ufonts.com_neo-sans-medium.eot");
    src: url("../static/ufonts.com_neo-sans-medium.eot?#iefix") format("embedded-opentype"), url("../static/ufonts.com_neo-sans-medium.woff2") format("woff2"), url("../static/ufonts.com_neo-sans-medium.woff") format("woff"), url("../static/ufonts.com_neo-sans-medium.ttf") format("truetype"), url("../static/ufonts.com_neo-sans-medium.svg#neo_sansmedium") format("svg");
    font-weight: normal;
    font-style: normal
}

@font-face {
    font-family: 'neo_sansregular';
    src: url("../static/ufonts.com_neo-sans.eot");
    src: url("../static/ufonts.com_neo-sans.eot?#iefix") format("embedded-opentype"), url("../static/ufonts.com_neo-sans.woff2") format("woff2"), url("../static/ufonts.com_neo-sans.woff") format("woff"), url("../static/ufonts.com_neo-sans.ttf") format("truetype"), url("../static/ufonts.com_neo-sans.svg#neo_sansregular") format("svg");
    font-weight: normal;
    font-style: normal
}

.icon {
    display: inline-block;
    height: 1em;
    line-height: 1em;
    margin-left: .2em;
    margin-right: .2em;
    speak: none;
    width: 1em
}

body {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    background: #3a3a3a;
    color: #3a3a3a;
    font-size: 18px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    position: relative
}

*, *:before, *:after {
    box-sizing: inherit
}

h1, h2, h3, h4, h5, h6 {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: 1em;
    line-height: 1.2em;
    margin: 0;
    padding: 0
}

strong {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium'
}

p {
    margin: 0;
    padding: 0
}

a {
    color: inherit;
    text-decoration: none
}

a img {
    border: none
}

.cake-debug-output, .cake-debug {
    color: #ffffff
}

.js .collapsed:not(.open) {
    display: none
}

#packagingCalculator {
    border: none;
    width: 100%;
    height: 1800px
}

.logos {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: center;
    margin: 1em 0
}

.logos img {
    height: 55px;
    vertical-align: middle
}

.logos img:not(:last-child) {
    margin-right: 2em
}

#content .calculator .errors {
    list-style: none;
    margin: 0;
    padding: 0
}

#content .calculator .errors li {
    border-radius: 2px;
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansbold';
    background: rgba(220, 83, 80, 0.2);
    border: 2px solid #dc5350;
    padding: 10px 20px;
    list-style: none;
    margin: 0 0 10px
}

#content .calculator .info {
    display: inline-block;
    position: relative;
    margin-bottom: 5px
}

#content .calculator .info .infoIcon {
    border-radius: 50%;
    color: #ffffff;
    background: #dc5350;
    width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    font-size: 16px;
    text-align: center;
    margin-right: 5px
}

#content .calculator .info .infoIcon .icon {
    vertical-align: -2px
}

#content .calculator .info .infoIcon .icon path {
    fill: #ffffff
}

#content .calculator .info .content {
    transition: transform 0.2s ease, opacity 0.2s ease;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    z-index: 99;
    color: #3a3a3a;
    font-size: 16px;
    line-height: 21px;
    position: absolute;
    width: 340px;
    left: 50%;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px
}

#content .calculator .info .content:after {
    content: "";
    position: absolute;
    margin-left: -10px;
    border: 10px solid transparent
}

#content .calculator .info .content:not(.left) {
    margin-left: -34px
}

#content .calculator .info .content:not(.left):after {
    left: 10%
}

#content .calculator .info .content:not(.left):not(.top) {
    transform-origin: 10% 0%
}

#content .calculator .info .content:not(.left).top {
    transform-origin: 10% 100%
}

#content .calculator .info .content.left {
    margin-left: -306px
}

#content .calculator .info .content.left:after {
    left: 90%
}

#content .calculator .info .content.left:not(.top) {
    transform-origin: 90% 0%
}

#content .calculator .info .content.left.top {
    transform-origin: 90% 100%
}

#content .calculator .info .content:not(.top) {
    bottom: 100%;
    margin-bottom: 15px
}

#content .calculator .info .content:not(.top):after {
    bottom: -10px;
    border-bottom-width: 0;
    border-top-color: rgba(255, 255, 255, 0.9)
}

#content .calculator .info .content.top {
    top: 100%;
    margin-top: 15px
}

#content .calculator .info .content.top:after {
    top: -10px;
    border-top-width: 0;
    border-bottom-color: rgba(255, 255, 255, 0.9)
}

#content .calculator .info:not(.open) .content {
    transform: scale(0);
    pointer-events: none;
    opacity: 0
}

#content .calculator .header {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansbold';
    font-size: 14px;
    line-height: 20px;
    color: #ffffff;
    margin-bottom: 5px
}

#content .calculator .header:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both
}

#content .calculator .header .step {
    background: #c2c2c2;
    width: 33.33333%;
    float: left;
    padding: 7px 40px;
    position: relative
}

#content .calculator .header .step:first-child {
    border-radius: 2px 0 0 2px
}

#content .calculator .header .step:last-child {
    border-radius: 0 2px 2px 0
}

#content .calculator .header .step:not(:last-child):before, #content .calculator .header .step:not(:last-child):after {
    content: "";
    position: absolute;
    top: 0;
    right: -10px;
    border-style: solid;
    border-color: transparent transparent transparent #c2c2c2;
    border-width: 18px 0 18px 10px;
    z-index: 1
}

#content .calculator .header .step:not(:last-child):before {
    border-left-color: #f1f1f1;
    right: -13px;
    border-width: 22px 0 22px 13px;
    top: -4px
}

#content .calculator .header .step.active {
    background: #3a3a3a
}

#content .calculator .header .step.active:not(:last-child):after {
    border-left-color: #3a3a3a
}

#content .calculator .header.twoSteps .step {
    width: 50%
}

#content .calculator .intro {
    font-size: 14px;
    line-height: 18px;
    margin: 20px 0 10px
}

#content .calculator form fieldset {
    border: none;
    margin: 0;
    padding: 0
}

#content .calculator form fieldset legend {
    margin: 0 0 10px;
    padding: 15px 25px;
    display: block;
    border-bottom: 1px dashed #3a3a3a;
    width: 100%
}

#content .calculator form .segment {
    border-bottom: 1px dashed #3a3a3a;
    margin: 0 0 20px;
    padding: 0 0 20px
}

#content .calculator form .box {
    border-radius: 2px;
    background: #ffffff;
    margin: 10px 0 0;
    padding: 10px 0
}

#content .calculator form .box.simple {
    padding: 20px 25px
}

#content .calculator form .box.total {
    padding: 20px 25px;
    font-size: 14px;
    line-height: 18px
}

#content .calculator form .box.total dl, #content .calculator form .box.total .plan {
    margin: 0 0 15px;
    padding: 0 0 15px;
    border-bottom: 1px dashed #3a3a3a
}

#content .calculator form .box.total dl dt, #content .calculator form .box.total dl dd {
    margin: 0;
    padding: 5px 0
}

#content .calculator form .box.total dl dd {
    text-align: right
}

#content .calculator form .box.total .plan:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both
}

#content .calculator form .box.total .plan .title, #content .calculator form .box.total .plan .packages, #content .calculator form .box.total .plan .price {
    width: 33.33333%;
    float: left
}

#content .calculator form .box.total .plan .title, #content .calculator form .box.total .plan .price {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium'
}

#content .calculator form .box.total .plan .packages {
    text-align: center
}

#content .calculator form .box.total .plan .price {
    text-align: right
}

#content .calculator form .box.total > .price {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    font-size: 18px;
    line-height: 22px;
    text-align: right;
    padding: 10px 0
}

#content .calculator form .box.total > .price label {
    display: inline-block;
    margin-right: 50px
}

#content .calculator form .box.total > .price .footnote {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    font-size: 14px;
    line-height: 18px;
    color: rgba(58, 58, 58, 0.5);
    margin-top: 10px
}

#content .calculator form .submit {
    text-align: right;
    padding: 0 25px
}

#content .calculator form .submit + .footnote {
    margin-top: 40px;
    font-size: 14px;
    line-height: 18px;
    color: rgba(58, 58, 58, 0.5)
}

#content .calculator form .submit button {
    margin-bottom: 5px
}

#content .calculator form .input {
    padding: 3px 25px
}

#content .calculator form .input.plan {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sanslight';
    color: #143966;
    margin: 0 -10px;
    font-size: 16px;
    line-height: 25px;
    padding: 0
}

#content .calculator form .input.plan .column {
    width: 25%;
    padding: 0 10px;
    text-align: center
}

#content .calculator form .input.plan .plan {
    background: #cbdbdf;
    padding: 10px 10px 120px;
    position: relative
}

#content .calculator form .input.plan input {
    display: none
}

#content .calculator form .input.plan input:checked + label {
    border-color: #dc5350
}

#content .calculator form .input.plan input:checked + label:before {
    background: #dc5350
}

#content .calculator form .input.plan label {
    transition: color 0.15s linear;
    border-radius: 2px;
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    position: relative;
    background: transparent;
    padding: 15px 30px;
    line-height: 20px;
    font-size: 16px;
    text-transform: uppercase;
    border: 2px solid #143966;
    color: #ffffff;
    display: inline-block;
    cursor: pointer;
    z-index: 0
}

#content .calculator form .input.plan label:before {
    transition: height 0.15s ease;
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #143966;
    z-index: -1
}

#content .calculator form .input.plan label:hover {
    color: #143966
}

#content .calculator form .input.plan label:hover:before {
    height: 0%
}

#content .calculator form .input.plan label span {
    display: none
}

#content .calculator form .input.plan a.button, #content .calculator form .input.plan label {
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px
}

#content .calculator form .input.plan .title {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    margin: 15px 0
}

#content .calculator form .input.plan .title span {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    display: block;
    font-size: 50px;
    line-height: 1.2em
}

#content .calculator form .input.plan .price {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    font-size: 32px;
    line-height: 1.2em
}

#content .calculator form .input.begin, #content .calculator form .input.end {
    margin: -10px 0
}

#content .calculator form .input.begin .column:first-child, #content .calculator form .input.end .column:first-child {
    padding-top: 0;
    padding-bottom: 0
}

#content .calculator form .input.begin .column:last-child, #content .calculator form .input.end .column:last-child {
    text-align: right
}

#content .calculator form .input.begin input, #content .calculator form .input.end input {
    max-width: 150px;
    border: none;
    background: transparent;
    padding: 0
}

#content .calculator form .input.begin {
    margin-top: 15px;
    position: relative
}

#content .calculator form .input.begin .datepickerIcon {
    transition: transform 0.15s linear;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 25px
}

#content .calculator form .input.begin .datepickerIcon:hover {
    transform: scale(1.15)
}

#content .calculator form .input.begin .datepickerIcon:before {
    content: url("../img/datepicker.png")
}

#content .calculator form .input.coupon label, #content .calculator form .input.price label {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium'
}

#content .calculator form .input.price .column:last-child {
    position: relative
}

#content .calculator form .input.price input {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    background: #3a3a3a;
    color: #ffffff;
    text-align: right
}

#content .calculator form .input.price .unit {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    font-size: 24px;
    line-height: 40px;
    position: absolute;
    right: -16px;
    top: 0
}

#content .calculator form .input.price .footnote {
    font-size: 12px;
    line-height: 1.2em;
    margin-top: 10px
}

#content .calculator form dl {
    margin: 0;
    padding: 0 25px
}

#content .calculator form dl:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both
}

#content .calculator form dl dt, #content .calculator form dl dd {
    display: block;
    padding: 10px 0
}

#content .calculator form dl dt {
    clear: left;
    float: left;
    width: 33.33333%;
    max-width: 210px;
    padding-right: 20px
}

#content .calculator form dl dd:after {
    content: " "
}

@media (max-width: 1528px) {
    #content .calculator .header .step {
        border-radius: 2px !important;
        width: auto;
        float: none;
        text-align: center
    }

    #content .calculator .header .step:not(.active) {
        display: none
    }

    #content .calculator .header .step:before, #content .calculator .header .step:after {
        display: none;
        content: none
    }

    #content .calculator .header.twoSteps .step {
        width: auto
    }

    #content .calculator form .input.plan .title span {
        font-size: 40px;
        line-height: 1.2em
    }

    #content .calculator form .input.plan .price {
        font-size: 25px;
        line-height: 1.2em
    }
}

@media (max-width: 729px) {
    #content .calculator .column {
        float: none;
        padding: 0;
        width: auto
    }

    #content .calculator form .input.begin .column, #content .calculator form .input.end .column {
        display: inline
    }

    #content .calculator form .input.begin label:after, #content .calculator form .input.end label:after {
        content: ":"
    }

    #content .calculator form .input.plan .column {
        width: auto;
        margin-bottom: 10px
    }

    #content .calculator form .input.plan .plan {
        min-height: 0 !important
    }

    #content .calculator form dl dt {
        -webkit-font-smoothing: antialiased;
        font-weight: normal !important;
        font-style: normal !important;
        font-family: 'neo_sansmedium';
        float: none;
        width: auto;
        max-width: none;
        padding-right: 0;
        padding-bottom: 0
    }

    #content .calculator form dl dd {
        padding-top: 0;
        margin: 0
    }

    #content .calculator form .box.total dl dt {
        padding-bottom: 0
    }

    #content .calculator form .box.total dl dd {
        padding-top: 0;
        text-align: left
    }

    #content .calculator form .box.total .plan .title, #content .calculator form .box.total .plan .packages, #content .calculator form .box.total .plan .price {
        width: auto;
        float: none;
        text-align: left
    }

    #content .calculator form .box.total > .price {
        text-align: left
    }

    #content .calculator form .box.total > .price label {
        display: block;
        margin-right: 0;
        font-size: 14px
    }
}

#content #fullServiceCalculator .box.amounts .column:first-child {
    width: 66%
}

#content #fullServiceCalculator .box.amounts .column + .column {
    width: 33%;
    position: relative
}

#content #fullServiceCalculator .box.amounts .column + .column .unit {
    position: absolute;
    right: -12px;
    top: 0.3em
}

#contactForm, #content .wrap #retoureForm {
    border-top: 1px dashed #3a3a3a;
    padding-top: 17px
}

#contactForm .input .error-message, #content .wrap #retoureForm .input .error-message {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    clear: both;
    color: #dc5350;
    margin-bottom: 10px;
    margin-left: 33.33333%;
    padding: 10px 0 10px 12px
}

#contactForm .input.checkbox, #content .wrap #retoureForm .input.checkbox {
    margin-left: 33.33333%;
    padding: 10px 0 10px 12px
}

#contactForm .input.checkbox .error-message, #content .wrap #retoureForm .input.checkbox .error-message {
    margin-left: 0;
    padding: 10px 0
}

#contactForm .submit, #content .wrap #retoureForm .submit {
    border-top: 1px dashed #3a3a3a;
    padding-top: 20px;
    margin-top: 17px;
    text-align: right
}

#content .wrap h1, .modalContent h1 {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansbold';
    font-size: 48px;
    line-height: 1.2em;
    margin-bottom: 20px
}

#content .wrap h2, .modalContent h2 {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    font-size: 22px;
    margin: 40px 0 20px;
    color: #3a3a3a
}

#content .wrap h2 + h3, .modalContent h2 + h3 {
    margin-top: 20px
}

#content .wrap h3, .modalContent h3 {
    border-radius: 2px;
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    color: #ffffff;
    background: #3a3a3a;
    font-size: 16px;
    line-height: 20px;
    padding: 13px 20px;
    position: relative;
    margin: 40px 0 20px
}

#content .wrap p, .modalContent p {
    margin: 0 0 20px
}

#content .wrap p.intro, .modalContent p.intro {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    font-size: 24px;
    line-height: 30px
}

#content .wrap a, .modalContent a {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    text-decoration: underline
}

#content .wrap ul.ticks, .modalContent ul.ticks {
    list-style: none;
    margin: 0 0 20px;
    padding: 0
}

#content .wrap ul.ticks li, .modalContent ul.ticks li {
    position: relative;
    padding: 0.5em 0 0.5em 2em
}

#content .wrap ul.ticks li:before, .modalContent ul.ticks li:before {
    content: "";
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzcwLjA0MiAxMjkwLjA1OSI+PHRpdGxlPnRpY2s8L3RpdGxlPjxwYXRoIGQ9Ik00MTIuMzE2LDg1MC44QTM4MzEuNCwzODMxLjQsMCwwLDEsNzI2LjgwNyw0NDguOTE2YzE3Ny4yMjEtMTk3LjU1OSwyODMuMDM3LTI3My40NDMsMzExLjM2NC0yOTMuMzQ1LDAsMCwxNDAuNTg1LTk5LjU3NCwyNzguODE0LTE1Mi44NTZBMzguNzU3LDM4Ljc1NywwLDAsMSwxMzI4LjQ2Ni4wOTFjMTYuMi0xLjEzMiwzMC42MjgsOC40NTksNDEuNTc2LDE4Ljk0My04Ljc5Myw4Ljc4OS0yMC41MzcsMjAuNDQ4LTM0Ljc0NiwzNC4zMTEtMjYuNjg2LDI2LjAzOS00Ni42NzYsNDQuODQ4LTQ5LjUyOSw0Ny41NDFDMTEyOC4wMzIsMjQ5LjgxMSw5OTQuODczLDQwNS41MTksOTk0Ljg3Myw0MDUuNTE5Uzg0NC43NDksNTgxLjA2Niw3MTkuNDI3LDc3My42MzZjLTE1LjA2OSwyMy4xNTUtMjguODIyLDQ1LjQ3LTI4LjgyMiw0NS40Ny0yOC45NTQsNDcuNTE3LTQ1LjQsODAuNDQ1LTE2Ny40ODYsMjgxLjE1OC00OC45MjIsODAuNDI4LTg5LjY4OCwxNDcuOC0xMTcuMiwxODkuOEgzNzcuNzExYy0yMy44NzQtMzQtNzkuNzgzLTEzNS41MTQtMTI2LjEyMy0yNDguOSwwLDAtNjkuMTU0LTE3MS4yNzctMTM0LjQ4Ni0yNTQuMjI0LTUuNTkyLTcuMS0xNi4wMzUtMTkuNjg5LTMzLjk1LTI5LjMyMkM1MS40MTMsNzQwLjU0MywxNy42ODksNzQ1LjAyNSwwLDc0OC44NTNhMTE5Ljk1NSwxMTkuOTU1LDAsMCwxLDkuODQtMzUuMzc2YzI1LjQ1NS01NS45MSw5NC43NTUtODkuMzI5LDE1My4wMi04OS4wMzIsMTA5LjExNy41NTcsMTg1LjQ1OCwxMTkuNSwyMTkuOTM1LDE3My4yQTQ3OC45NTgsNDc4Ljk1OCwwLDAsMSw0MTIuMzE2LDg1MC44WiIgc3R5bGU9ImZpbGw6IzAwNTczZSIvPjwvc3ZnPg==") no-repeat center/contain;
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    top: calc(50% - 0.75em);
    left: 0
}

body.left #content .wrap .button, body.right #content .wrap .button, body.full #content .wrap .button, body.over #content .wrap .button, body.left .modalContent .button, body.right .modalContent .button, body.full .modalContent .button, body.over .modalContent .button {
    transition: color 0.15s linear;
    border-radius: 2px;
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    position: relative;
    background: transparent;
    padding: 15px 30px;
    line-height: 20px;
    font-size: 16px;
    text-transform: uppercase;
    border: 2px solid #3a3a3a;
    color: #ffffff;
    display: inline-block;
    cursor: pointer;
    z-index: 0;
    text-decoration: none
}

body.left #content .wrap .button:before, body.right #content .wrap .button:before, body.full #content .wrap .button:before, body.over #content .wrap .button:before, body.left .modalContent .button:before, body.right .modalContent .button:before, body.full .modalContent .button:before, body.over .modalContent .button:before {
    transition: height 0.15s ease;
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    border: none;
    background: #3a3a3a;
    z-index: -1
}

body.left #content .wrap .button:hover, body.right #content .wrap .button:hover, body.full #content .wrap .button:hover, body.over #content .wrap .button:hover, body.left .modalContent .button:hover, body.right .modalContent .button:hover, body.full .modalContent .button:hover, body.over .modalContent .button:hover {
    color: #3a3a3a
}

body.left #content .wrap .button:hover:before, body.right #content .wrap .button:hover:before, body.full #content .wrap .button:hover:before, body.over #content .wrap .button:hover:before, body.left .modalContent .button:hover:before, body.right .modalContent .button:hover:before, body.full .modalContent .button:hover:before, body.over .modalContent .button:hover:before {
    height: 0%
}

body.left #content .wrap .button.ghost, body.right #content .wrap .button.ghost, body.full #content .wrap .button.ghost, body.over #content .wrap .button.ghost, body.left .modalContent .button.ghost, body.right .modalContent .button.ghost, body.full .modalContent .button.ghost, body.over .modalContent .button.ghost {
    color: #3a3a3a
}

body.left #content .wrap .button.ghost:before, body.right #content .wrap .button.ghost:before, body.full #content .wrap .button.ghost:before, body.over #content .wrap .button.ghost:before, body.left .modalContent .button.ghost:before, body.right .modalContent .button.ghost:before, body.full .modalContent .button.ghost:before, body.over .modalContent .button.ghost:before {
    height: 0%
}

body.left #content .wrap .button.ghost:hover, body.right #content .wrap .button.ghost:hover, body.full #content .wrap .button.ghost:hover, body.over #content .wrap .button.ghost:hover, body.left .modalContent .button.ghost:hover, body.right .modalContent .button.ghost:hover, body.full .modalContent .button.ghost:hover, body.over .modalContent .button.ghost:hover {
    color: #ffffff
}

body.left #content .wrap .button.ghost:hover:before, body.right #content .wrap .button.ghost:hover:before, body.full #content .wrap .button.ghost:hover:before, body.over #content .wrap .button.ghost:hover:before, body.left .modalContent .button.ghost:hover:before, body.right .modalContent .button.ghost:hover:before, body.full .modalContent .button.ghost:hover:before, body.over .modalContent .button.ghost:hover:before {
    height: 100%
}

@media (max-width: 669px) {
    #content .wrap h1, .modalContent h1 {
        font-size: 36px;
        line-height: 1.2em
    }
}

@media (max-width: 479px) {
    #content .wrap h1, .modalContent h1 {
        font-size: 28px;
        line-height: 1.2em
    }

    #content .wrap p.intro, .modalContent p.intro {
        font-size: 18px;
        line-height: 24px
    }
}

#content {
    background: #f1f1f1;
    position: relative;
    overflow: hidden
}

#content .wrap {
    margin: 0 auto;
    max-width: 1690px;
    padding: 50px 0 150px
}

body.left #content .wrap h1, body.left #content .wrap a {
    color: #143966
}

body.left #content .wrap h3 {
    background-color: #143966
}

body.left #content .wrap a:before {
    border-bottom-color: #143966
}

body.left #content .wrap .button {
    border-color: #143966
}

body.left #content .wrap .button:before {
    background: #143966
}

body.left #content .wrap .button:hover {
    color: #143966
}

body.left #content .wrap .button.ghost {
    color: #143966
}

body.right #content .wrap h1, body.right #content .wrap a {
    color: #00573e
}

body.right #content .wrap h3 {
    background-color: #00573e
}

body.right #content .wrap a:before {
    border-bottom-color: #00573e
}

body.right #content .wrap .button {
    border-color: #00573e
}

body.right #content .wrap .button:before {
    background: #00573e
}

body.right #content .wrap .button:hover {
    color: #00573e
}

body.right #content .wrap .button.ghost {
    color: #00573e
}

@media (max-width: 1329px) {
    #content .wrap {
        padding-left: 50px;
        padding-right: 50px
    }
}

@media (max-width: 379px) {
    #content .wrap {
        padding-left: 10px;
        padding-right: 10px
    }
}

#datepicker {
    border-radius: 3px;
    background: #ffffff;
    border: 1px solid #dddddd;
    padding: 10px
}

#datepicker .year, #datepicker .month {
    text-align: center;
    margin-bottom: 10px;
    line-height: 16px
}

#datepicker .year:after, #datepicker .month:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both
}

#datepicker .year .icon, #datepicker .month .icon {
    width: 16px;
    height: 16px
}

#datepicker .year .fa-caret-left, #datepicker .month .fa-caret-left {
    float: left
}

#datepicker .year .fa-caret-right, #datepicker .month .fa-caret-right {
    float: right
}

#datepicker .year .fa, #datepicker .month .fa {
    transition: opacity 0.2s linear;
    cursor: pointer;
    opacity: .5
}

#datepicker .year .fa:hover, #datepicker .month .fa:hover {
    opacity: 1
}

#datepicker .year span, #datepicker .month span {
    font-weight: bold;
    font-size: 14px
}

#datepicker table {
    margin-top: 10px;
    font-size: 14px
}

#datepicker th {
    padding: 2px 5px
}

#datepicker td.day {
    transform: background 0.2s linear;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #dddddd;
    padding: 2px 5px
}

#datepicker td.day.selected {
    background: #eeeeee
}

#datepicker td.day:hover {
    background: #dddddd
}

#content .wrap ul.downloads, .modalContent ul.downloads {
    margin: 0;
    padding: 0;
    list-style: none
}

#content .wrap ul.downloads li, .modalContent ul.downloads li {
    margin: 0;
    padding: 2px 0
}

#content .wrap ul.downloads a, .modalContent ul.downloads a {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular'
}

#content .wrap ul.downloads a:before, .modalContent ul.downloads a:before {
    content: url("../img/file.png");
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
    position: static;
    width: auto;
    height: auto;
    border: none
}

#content .wrap ul.downloads a[href$=".pdf"]:before, .modalContent ul.downloads a[href$=".pdf"]:before {
    content: url("../img/file-pdf.png")
}

#content .wrap ul.downloads a:hover, .modalContent ul.downloads a:hover {
    text-decoration: underline
}

footer {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    font-size: 12px;
    line-height: 15px;
    color: #ffffff
}

footer p {
    margin-bottom: 15px
}

footer .wrap {
    max-width: 1690px;
    margin: 0 auto;
    padding: 20px 90px
}

footer .wrap:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both
}

@media (max-width: 1329px) {
    footer .wrap {
        max-width: 845px;
        padding: 20px 50px
    }
}

footer .logo {
    float: right;
    margin-top: -5px
}

footer .logo img {
    width: 100px;
    line-height: 0;
    vertical-align: middle
}

footer nav a {
    display: inline-block
}

footer nav a:not(:last-child) {
    margin-right: 20px
}

footer .certificates {
    pointer-events: none;
    text-align: center;
    list-style: none;
    margin: 40px auto 0;
    padding: 0;
    clear: both
}

footer .certificates li {
    margin: 0 20px;
    padding: 0;
    display: inline-block
}

@media (min-width: 1450px) {
    footer .certificates {
        transform: translateY(-60px)
    }
}

@media (max-width: 479px) {
    footer {
        text-align: center
    }

    footer .logo {
        display: inline-block;
        float: none;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto
    }

    footer nav {
        text-align: center
    }
}

@media (max-width: 379px) {
    footer .wrap {
        padding-left: 10px;
        padding-right: 10px
    }
}

form .input {
    padding: 3px 0;
    margin: 0
}

form .input:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both
}

form .input .column {
    float: left;
    padding: 0 12px
}

form .input .column:first-child {
    padding-left: 0;
    width: 33.33333%;
    padding-top: 8px;
    padding-bottom: 8px
}

form .input .column + .column {
    padding-right: 0;
    width: 66.66667%
}

form .input input[type="text"], form .input input[type="number"], form .input select, form .input textarea {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    border-radius: 2px;
    box-shadow: none;
    background: #ffffff;
    outline: none;
    color: inherit;
    border: 2px solid #3a3a3a;
    font-size: inherit;
    line-height: 20px;
    padding: 8px 15px;
    width: 100%
}

form .input input[type="text"]:hover, form .input input[type="text"]:active, form .input input[type="text"]:focus, form .input input[type="number"]:hover, form .input input[type="number"]:active, form .input input[type="number"]:focus, form .input select:hover, form .input select:active, form .input select:focus, form .input textarea:hover, form .input textarea:active, form .input textarea:focus {
    border-color: rgba(58, 58, 58, 0.6)
}

form .input textarea {
    resize: vertical
}

form .input select {
    height: 40px
}

form .input.radio input {
    display: none
}

form .input.radio input + label:not(:last-child) {
    margin-right: 30px
}

form .input.radio input + label:before {
    border-radius: 50%;
    content: "";
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: inline-block;
    border: 5px solid #3a3a3a;
    background: #3a3a3a;
    vertical-align: middle;
    cursor: pointer
}

form .input.radio input:checked + label:before {
    background: #ffffff
}

form .input.checkbox input {
    display: none
}

form .input.checkbox input + label {
    display: block;
    margin-left: 30px;
    font-size: 14px;
    line-height: 24px
}

form .input.checkbox input + label:before {
    content: "";
    width: 20px;
    height: 20px;
    display: inline-block;
    float: left;
    border: 2px solid #3a3a3a;
    margin-left: -30px;
    margin-top: 2px;
    cursor: pointer
}

form .input.checkbox input:checked + label:before {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    content: '×';
    line-height: 18px;
    text-align: center;
    font-size: 25px
}

@media (max-width: 479px) {
    form .input .column {
        float: none;
        padding-left: 0;
        padding-right: 0
    }

    form .input .column:first-child {
        width: auto;
        padding-bottom: 0
    }

    form .input .column + .column {
        width: auto
    }
}

header {
    background: #ffffff
}

header .wrap {
    max-width: 1690px;
    margin: 0 auto;
    padding: 50px 90px 40px;
    min-height: 155px;
    position: relative
}

header .wrap:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both
}

header #navToggle {
    width: 28px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 90px;
    transform: translateY(-50%)
}

header #navToggle div {
    border-radius: 2px;
    transition: background 0.15s linear, transform 0.25s ease, top 0.25s 0.25s ease;
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: #3a3a3a
}

header #navToggle div:nth-child(1) {
    top: 0
}

header #navToggle div:nth-child(2) {
    top: 8px
}

header #navToggle div:nth-child(3) {
    top: 16px
}

body.navOpen header #navToggle div {
    border-radius: 2px;
    transition: background 0.15s linear, transform 0.25s 0.25s ease, top 0.25s ease;
    top: 8px
}

body.navOpen header #navToggle div:nth-child(1), body.navOpen header #navToggle div:nth-child(3) {
    transform: rotate(45deg)
}

body.navOpen header #navToggle div:nth-child(2) {
    transform: rotate(135deg)
}

header #navToggle:hover div {
    background: #7a7a7a
}

header .logo {
    float: right
}

header .logo img {
    width: 150px;
    line-height: 0;
    vertical-align: middle
}

header .claim {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sanslight';
    font-size: 42px;
    line-height: 45px;
    margin-top: 5px;
    margin-left: 80px
}

@media (max-width: 1429px) {
    header .claim {
        font-size: 32px;
        line-height: 38px;
        margin-top: 8px
    }
}

@media (max-width: 1329px) {
    header .wrap {
        max-width: 845px;
        padding: 20px 50px 20px;
        min-height: 0
    }

    header #navToggle {
        left: 50px
    }

    header .claim {
        display: none
    }
}

@media (max-width: 379px) {
    header .wrap {
        padding-left: 10px;
        padding-right: 10px
    }

    header #navToggle {
        left: 10px
    }
}

body.over #content .wrap {
    color: #ffffff;
    pointer-events: none;
    flex-basis: 100%;
}

body.over #content .wrap:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both
}

body.over #content .wrap > * {
    pointer-events: auto
}

body.over #content .rightContents {
    text-align: center
}

body.over #content .headline {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sanslight';
    font-size: 30px;
    top: 50px;
    line-height: 1.2em;
    position: absolute
}

body.over #content .headline.right {
    width: 100%
}

body.over #content .wrap .content {
    width: 50%
}

body.over #content .wrap .content.right {
    margin: 200px auto 0
}

body.over #content .wrap .content.right .button:not(.ghost) {
    border-color: #143966
}

body.over #content .wrap .content.right .button:not(.ghost):before {
    background: #143966
}

body.over #content .wrap .content .button {
    display: block;
    text-align: center
}

body.over #content .wrap .content .button:not(.ghost) {
    font-size: 24px;
    line-height: 32px
}

body.over #content .wrap .content .button:not(.ghost) span {
    max-width: 300px;
    display: block;
    margin: 0 auto
}

body.over #content .wrap .content .button:not(.ghost):hover {
    color: #ffffff
}

body.over #content .wrap .content .button.ghost {
    color: #ffffff;
    border-color: #ffffff
}

body.over #content .wrap .content .button.ghost:before {
    background: #ffffff
}

body.over #content .wrap .content .button.ghost:hover {
    color: #3a3a3a
}

body.over #content .moreDetails {
    margin-top: 200px;
    font-size: 16px;
    line-height: 1.2em
}

body.over #content .moreDetails h2 {
    font-size: 18px;
    line-height: 1.2em;
    margin: 0 0 10px;
    color: #ffffff
}

body.over #content .moreDetails a.uncollapse {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    font-size: 14px;
    text-transform: uppercase;
    display: inline-block;
    padding-right: 20px;
    position: relative
}

body.over #content .moreDetails a.uncollapse:before {
    border-bottom-color: #ffffff
}

body.over #content .moreDetails a.uncollapse .icon {
    position: absolute;
    right: 0;
    top: 50%;
    width: 10px;
    height: 10px;
    margin-top: -5px
}

body.over #content .moreDetails a.uncollapse .icon path {
    fill: #ffffff
}

body.over #content h1 {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansbold';
    font-size: 36px;
    line-height: 1.2em;
    margin-bottom: 0
}

@media (max-width: 1329px) {
    body.over #content .social {
        display: none
    }

    body.over #content .leftContents, body.over #content .rightContents {
        padding: 50px 0 150px
    }

    body.over #content .leftContents .headline.left, body.over #content .leftContents .headline.right, body.over #content .leftContents .content.left, body.over #content .leftContents .content.right, body.over #content .rightContents .headline.left, body.over #content .rightContents .headline.right, body.over #content .rightContents .content.left, body.over #content .rightContents .content.right {
        max-width: 845px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 50px;
        padding-right: 50px
    }

    body.over #content .leftContents {
        background: #98ba86
    }

    body.over #content .rightContents {
        background: #96bbc4
    }

    body.over #content .headline.left, body.over #content .headline.right {
        position: relative;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0
    }

    body.over #content .wrap {
        max-width: initial;
        padding: 0
    }

    body.over #content .wrap .content.left, body.over #content .wrap .content.right {
        margin-top: 40px !important;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        float: none;
        width: auto
    }

    body.over #content .moreDetails {
        margin-top: 40px
    }

    body.over #content .content:before {
        display: block;
        margin-bottom: 20px
    }

    body.over #content .content.left:before {
        content: url("../static/electronics-illustrations.svg")
    }

    body.over #content .content.right:before {
        content: url("../static/electronics-illustrations.svg")
    }
}

@media (max-width: 479px) {
    body.over #content h1 {
        font-size: 28px;
        line-height: 1.2em
    }

    body.over #content .headline {
        font-size: 24px;
        line-height: 1.2em
    }

    body.over #content .wrap .content .button:not(.ghost) {
        font-size: 16px;
        line-height: 20px
    }

    body.over #content .leftContents, body.over #content .rightContents {
        padding: 30px 0 50px
    }
}

@media (max-width: 379px) {
    body.over #content .leftContents .headline.left, body.over #content .leftContents .headline.right, body.over #content .leftContents .content.left, body.over #content .leftContents .content.right, body.over #content .rightContents .headline.left, body.over #content .rightContents .headline.right, body.over #content .rightContents .content.left, body.over #content .rightContents .content.right {
        padding-left: 10px;
        padding-right: 10px
    }
}

.illustrations {
    transition: opacity 0.15s linear;
    position: relative
}

.illustrations svg {
    width: 100%
}

.illustrations .info {
    position: absolute;
    margin-left: -11px;
    margin-top: -11px
}

.illustrations .info .infoIcon {
    border-radius: 50%;
    color: #ffffff;
    background: #dc5350;
    width: 22px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    font-size: 24px;
    text-align: center
}

.illustrations .info .infoIcon:before {
    content: '+'
}

.illustrations .info .infoIcon .icon {
    display: none
}

.illustrations .info .content {
    transition: transform 0.2s ease, opacity 0.2s ease;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    z-index: 99;
    color: #3a3a3a;
    font-size: 16px;
    line-height: 21px;
    position: absolute;
    left: 50%;
    width: 340px;
    background: rgba(255, 255, 255, 0.9);
    padding: 15px
}

.illustrations .info .content h2 {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    margin-bottom: 5px
}

.illustrations .info .content a {
    text-decoration: underline
}

.illustrations .info .content:after {
    content: "";
    position: absolute;
    margin-left: -10px;
    border: 10px solid transparent
}

.illustrations .info .content:not(.left) {
    margin-left: -34px
}

.illustrations .info .content:not(.left):after {
    left: 10%
}

.illustrations .info .content.left {
    margin-left: -306px
}

.illustrations .info .content.left:after {
    left: 90%
}

.illustrations .info .content:not(.top) {
    top: 100%;
    margin-top: 15px
}

.illustrations .info .content:not(.top):after {
    top: -10px;
    border-top-width: 0;
    border-bottom-color: rgba(255, 255, 255, 0.9)
}

.illustrations .info .content:not(.top):not(.left) {
    transform-origin: 10% 0%
}

.illustrations .info .content:not(.top).left {
    transform-origin: 90% 0%
}

.illustrations .info .content.top {
    bottom: 100%;
    margin-bottom: 15px
}

.illustrations .info .content.top:after {
    bottom: -10px;
    border-bottom-width: 0;
    border-top-color: rgba(255, 255, 255, 0.9)
}

.illustrations .info .content.top:not(.left) {
    transform-origin: 10% 100%
}

.illustrations .info .content.top.left {
    transform-origin: 90% 100%
}

.illustrations .info:not(.open) .content {
    transform: scale(0);
    pointer-events: none;
    opacity: 0
}

#packagingSvg-book, #packagingSvg-pallette, #electronicsSvg-fridge, #electronicsSvg-washing-machine, #electronicsSvg-box, #electronicsSvg-book, .info[data-element="packagingSvg-book"], .info[data-element="packagingSvg-pallette"], .info[data-element="electronicsSvg-fridge"], .info[data-element="electronicsSvg-washing-machine"], .info[data-element="electronicsSvg-box"], .info[data-element="electronicsSvg-book"] {
    transition: opacity 0.15s linear
}

body.over #packagingSvg-book, body.over #packagingSvg-pallette, body.over #electronicsSvg-fridge, body.over #electronicsSvg-washing-machine, body.over #electronicsSvg-box, body.over #electronicsSvg-book, body.over .info[data-element="packagingSvg-book"], body.over .info[data-element="packagingSvg-pallette"], body.over .info[data-element="electronicsSvg-fridge"], body.over .info[data-element="electronicsSvg-washing-machine"], body.over .info[data-element="electronicsSvg-box"], body.over .info[data-element="electronicsSvg-book"] {
    opacity: 0
}

#loader {
    transition: transform 0.2s ease;
    position: fixed;
    top: 0;
    right: 0;
    width: 110px;
    height: 110px;
    text-align: center;
    z-index: 99999
}

#loader .loading {
    font-size: 66px;
    line-height: 110px;
    color: #ffffff
}

#loader .loading .icon path {
    fill: #ffffff
}

#loader:before {
    transform-origin: 100% 0%;
    transform: rotate(-135deg);
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    right: 220px;
    top: 0;
    background: #143966
}

#loader:not(.visible) {
    transform: translate(220px, -220px)
}

.loading {
    animation: spin 2s infinite linear
}

#loadingLabel {
    border-radius: 5px;
    margin: 60px 0 0;
    text-align: center;
    padding: 50px 20px;
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.15)
}

#loadingLabel .loading {
    font-size: 100px;
    line-height: 1em
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(359deg)
    }
}

#loginForm .input {
    margin-bottom: 5px
}

#loginForm .input:after {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    clear: both
}

#loginForm .input label {
    line-height: 20px;
    padding: 8px 0;
    display: inline-block
}

#loginForm .input input {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    border-radius: 2px;
    background: #ffffff;
    outline: none;
    color: inherit;
    border: 2px solid #3a3a3a;
    font-size: inherit;
    line-height: 20px;
    padding: 8px 15px;
    width: 66.66667%;
    float: right
}

#loginForm .input input:hover, #loginForm .input input:active, #loginForm .input input:focus {
    border-color: rgba(58, 58, 58, 0.6)
}

#loginForm .submit {
    text-align: right
}

.message {
    margin: 10px 0 20px;
    background: #ffffff;
    border-bottom: 3px solid #3a3a3a;
    padding: 10px
}

.message .icon {
    display: none
}

.message.error {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    color: #991111;
    border-bottom-color: #991111
}

.modal .message {
    background: transparent;
    border-bottom: none;
    padding: 0
}

.modal {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0px;
    z-index: 8
}

.modal .modalOuter {
    display: table;
    height: 100%;
    text-align: center;
    width: 100%
}

.modal .modalInner {
    display: table-cell;
    vertical-align: middle
}

.modal .modalContent {
    border-radius: 5px;
    position: relative;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0px auto;
    text-align: left;
    overflow-y: auto;
    max-width: 690px;
    padding: 15px;
    font-size: 16px
}

.modal .modalContent h1 {
    font-size: 28px;
    line-height: 1.2em
}

.modal .modalContent h2 {
    font-size: 20px
}

.modal .modalContent .wrap {
    margin: 0 auto 2rem auto;
    max-width: 80%;
    text-align: center;
    color: rgba(0, 0, 0, 0.5)
}

.modal .modalContent .wrap h2, .modal .modalContent .wrap strong {
    color: rgba(0, 0, 0, 0.6)
}

.modal .modalContent .wrap a.button {
    text-decoration: none
}

.modal .modalContent .wrap a.button:before {
    background-color: #00573e
}

.modal .modalClose {
    transition: transform 0.15s linear;
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    cursor: pointer;
    float: right;
    font-size: 35px;
    height: 30px;
    line-height: 26px;
    text-align: center;
    width: 30px
}

.modal .modalClose:hover {
    transform: scale(1.15)
}

.modal .modalClose::before {
    content: "×"
}

nav#main {
    box-shadow: 8px 0 0 rgba(0, 0, 0, 0.3);
    transform: translateX(-120%);
    transition: transform 0.5s ease;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding-right: 75px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 99;
    font-size: 16px;
    line-height: 20px
}

body.navOpen nav#main {
    transform: translateX(0)
}

body.no-js nav#main {
    display: none
}

nav#main a {
    transition: color 0.15s linear;
    outline: none
}

nav#main a:hover, nav#main a:active, nav#main a:focus {
    color: #7a7a7a
}

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

nav#main > ul > li {
    padding-left: 75px;
    margin-top: 40px;
    position: relative
}

nav#main > ul > li > a {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium'
}

nav#main > ul > li > a .icon {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 5px;
    top: -2px;
    margin: 0
}

nav#main > ul > li > a .icon path {
    transition: fill 0.15s linear;
    fill: #3a3a3a
}

nav#main > ul > li > a:hover .icon path, nav#main > ul > li > a:active .icon path, nav#main > ul > li > a:focus .icon path {
    fill: #7a7a7a
}

nav#main > ul > li li {
    margin-top: 10px
}

nav#side {
    position: fixed;
    top: 300px;
    left: 0;
    z-index: 9
}

nav#side ul, nav#side li {
    list-style: none;
    margin: 0;
    padding: 0
}

nav#side li {
    transition: max-width 0.15s ease;
    margin-bottom: 1px;
    line-height: 0;
    max-width: 65px;
    overflow: hidden
}

nav#side li:hover, nav#side li.active {
    max-width: 200px
}

nav#side li:hover a, nav#side li.active a {
    background: #ffffff
}

nav#side li:hover a .icon path, nav#side li.active a .icon path {
    fill: #3a3a3a
}

nav#side a {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansmedium';
    transition: background 0.15s ease;
    background: rgba(255, 255, 255, 0.5);
    display: inline-block;
    font-size: 16px;
    height: 55px;
    line-height: 25px;
    padding: 15px 25px 15px 70px;
    white-space: nowrap;
    position: relative
}

nav#side a .icon {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 14px;
    top: 12px
}

nav#side a .icon path {
    transition: fill 0.15s ease;
    fill: #ffffff
}

body.left nav#side, body.full nav#side {
    left: auto;
    right: 0;
    text-align: right
}

body.left nav#side li, body.full nav#side li {
    text-align: right;
    margin: 0 0 1px auto
}

body.left nav#side a, body.full nav#side a {
    text-align: right;
    float: right;
    margin: 0 0 1px auto;
    padding: 15px 0 15px 25px;
    padding: 15px 70px 15px 25px
}

body.left nav#side a .icon, body.full nav#side a .icon {
    left: auto;
    right: 14px
}

@media (max-width: 1329px) {
    nav#side {
        display: none
    }
}

#content {
    min-height: calc(100vh - 310px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #96bbc4
}

#content .panel {
    transition: transform 0.5s ease;
    bottom: 0;
    padding: 50px 90px 40px;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 2
}

#content .panel:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0
}

#content .panel.right {
    transform-origin: 100% 50%;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    background: #96bbc4;
    width: 100%
}

#content .panel.left {
    transform-origin: 0% 50%;
    left: 0;
    background: #98ba86;
    padding-right: 90px
}

#content .panel.left:before {
    right: -1px;
    border-right: 1px solid #ffffff
}

#content .panel .illustrations {
    margin-top: 120px;
    width: 50%
}

#content .panel .illustrations#packagingIllustrations {
    margin-left: -10px
}

#content .panel .illustrations img {
    width: 100%;
    margin: 0;
    display: block;
    line-height: 0
}

#content .background {
    position: absolute;
    left: 50%;
    right: 0;
    bottom: 0;
    top: 0
}

#content .background .top, #content .background .bottom {
    position: absolute;
    left: 0;
    right: 0
}

#content .background .top:before, #content .background .bottom:before {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 50px;
    left: 50px;
    right: 50px;
    bottom: 50px;
    content: ""
}

#content .background .top {
    top: 0;
    bottom: 50%;
    background: #98ba86
}

#content .background .top:before {
    background-image: url("../img/packaging-illustrations.svg")
}

#content .background .bottom {
    top: 50%;
    bottom: 0;
    background: #96bbc4
}

#content .background .bottom:before {
    background-image: url("../static/electronics-illustrations.svg")
}

body.retoure #content .background .bottom {
    top: 0
}

#content #backHome {
    transition: transform 0.15s linear;
    position: absolute;
    top: 10px;
    right: 50%;
    color: #3a3a3a;
    margin-right: 35px;
    font-size: 35px
}

#content #backHome:hover {
    transform: scale(1.15)
}

#content #backHome .icon path {
    fill: #3a3a3a
}

body.over #content #backHome {
    display: none
}

body.left #content #backHome {
    color: #143966
}

body.left #content #backHome .icon path {
    fill: #143966
}

body.right #content #backHome {
    color: #00573e;
    left: 50%;
    margin-left: 35px;
    right: auto;
    margin-right: 0
}

body.right #content #backHome .icon {
    width: 35px;
    height: 35px;
    margin: 0
}

body.right #content #backHome .icon path {
    fill: #00573e
}

body.full #content .panel.left, body.left #content .panel.left {
    transform: rotateY(-90deg);
    pointer-events: none
}

body.full #content .panel.right, body.right #content .panel.right {
    transform: rotateY(90deg);
    pointer-events: none
}

body.left #content .wrap, body.right #content .wrap, body.full #content .wrap {
    max-width: 845px
}

body.left #content .wrap, body.full #content .wrap {
    padding-right: 35px;
    margin-right: 50%
}

body.right #content .wrap {
    padding-left: 35px;
    margin-left: 50%
}

body.over #content .wrap {
    position: relative;
    z-index: 3
}

body:not(.full) #content .background {
    display: none
}

@media (max-width: 1329px) {
    #content .background {
        display: none
    }

    body.left #content .wrap, body.right #content .wrap, body.full #content .wrap {
        max-width: 845px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 50px;
        padding-right: 50px
    }

    #content .panel {
        display: none
    }

    #content .metaWrap {
        width: 100%;
        max-width: 845px;
        margin-right: auto;
        margin-left: auto;
        position: absolute;
        top: 0;
        left: 50%
    }

    body.left #content #backHome, body.right #content #backHome, body.full #content #backHome {
        right: auto;
        left: -50%;
        margin-left: 50px
    }
}

@media (max-width: 379px) {
    body.left #content .wrap, body.right #content .wrap, body.full #content .wrap {
        padding-left: 10px;
        padding-right: 10px
    }

    body.left #content #backHome, body.right #content #backHome, body.full #content #backHome {
        margin-left: 10px
    }
}

#content .wrap #retoureForm {
    margin-top: 20px
}

#content .wrap #retoureForm .footnote {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    font-size: 14px;
    line-height: 18px;
    color: #9d9d9d;
    margin-top: 10px
}

#content .wrap .locationMap {
    margin-bottom: 20px
}

#content .wrap .locationMap .gm-style-iw {
    -webkit-font-smoothing: antialiased;
    font-weight: normal !important;
    font-style: normal !important;
    font-family: 'neo_sansregular';
    font-size: 14px;
    line-height: 18px
}

#content .wrap .locationMap .gm-style-iw h3 {
    margin-bottom: 10px
}

#content .wrap .locationMap .gm-style-iw address {
    border-left: 2px solid #143966;
    padding: 10px 20px;
    background: rgba(0, 0, 0, 0.05);
    font-style: normal
}

#content .wrap .locationMap .gm-style-iw dl {
    margin: 10px 0 0;
    padding: 0
}

#content .wrap .locationMap .gm-style-iw dl dt, #content .wrap .locationMap .gm-style-iw dl dd {
    display: block
}

#content .wrap .locationMap .gm-style-iw dl dt {
    float: left;
    width: 90px
}

#content .wrap .locationMap .gm-style-iw dl dd {
    margin-left: 100px
}

.social {
    transition: max-width 0.15s ease;
    position: absolute;
    top: 10px;
    z-index: 5;
    max-width: 31px;
    overflow: hidden
}

.social .wrapper {
    width: 95px
}

.social .share, .social a {
    transition: all 0.15s linear;
    display: inline-block;
    margin-right: 1px
}

.social .share {
    width: 31px;
    height: 31px;
    line-height: 31px;
    color: #ffffff;
    text-align: center
}

.social .share .icon {
    vertical-align: -2px
}

.social .share .icon path {
    transition: fill 0.15s linear;
    fill: #ffffff
}

.social a:before {
    vertical-align: middle;
    line-height: 0
}

.social a.facebook:before {
    content: url("../img/facebook.png")
}

.social a.twitter:before {
    content: url("../img/twitter.png")
}

.social.left {
    right: 50%;
    margin-right: 35px
}

.social.left .wrapper {
    float: right
}

.social.left .share {
    margin-right: 0
}

.social.left .share, .social.left a {
    float: right
}

body.left .social.left, body.full .social.left {
    display: none
}

.social.right {
    left: 50%;
    margin-left: 35px
}

.social.right .share, .social.right a {
    float: left
}

.social.right .twitter {
    margin-right: 0
}

body.right .social.right {
    display: none
}

.social:hover {
    max-width: 95px
}

.social:hover .share {
    background: #ffffff;
    color: #3a3a3a
}

.social:hover .share .icon path {
    fill: #3a3a3a
}

@media (max-width: 1329px) {
    body.left .social.right, body.right .social.right, body.full .social.right {
        display: none
    }

    body.left .social.left, body.right .social.left, body.full .social.left {
        display: block;
        margin-right: 50px
    }

    .social .share {
        color: #3a3a3a
    }
}

@media (max-width: 379px) {
    body.left .social.left, body.right .social.left, body.full .social.left {
        margin-right: 10px
    }
}