/* ------------------------------ */


/* ------- general styles ------- */


/* ------------------------------ */


/* ---- typography ---- */

html {
    font-size: 62.5%;
    font-family: "open-sans", "Lucida Grande", sans-serif;
    font-weight: 400;
}

body {
    font-size: 1.6rem;
}

h1,
h2,
.header,
.headerWithIcon {
    font-family: "myriad-pro", "MyriadPro-Light", "Myriad Pro Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.header,
.headerWithIcon {
    font-weight: 300;
}

h1 {
    font-size: 4.8rem;
    margin-bottom: 0.2em;
}

h2 {
    font-size: 3.2rem;
}

h3 {
    font-size: 2.2rem;
}

h4 {
    font-size: 1.8rem;
}

nav {
    font-size: 1.8rem;
}

nav[role="sub"] {
    font-family: "myriad-pro", "MyriadPro-Light", "Myriad Pro Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
}

nav[role="sub"] .home {
    font-size: 3rem;
}

a.fancyLink {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.4;
}

.large {
    font-size: 2rem;
    line-height: 1.7em;
}

.medium {
    font-size: 1.8rem;
    line-height: 1.6em;
}

.small {
    font-size: 1.6rem;
    line-height: 1.3em;
}

.narrow {
    width: 22em;
}

.mediumwidth {
    width: 30em;
}

.wide {
    width: 35em;
}

.extrawide {
    width: 40em;
}

strong {
    font-style: normal;
    font-weight: 700;
}

#pageFooter {
    font-size: 1.4rem;
    line-height: 1.24em;
}

.toggle-button *,
.toggle-button:hover *,
.toggle-button:active * {
    font-size: 2.8rem;
    font-family: "myriad-pro", "MyriadPro-Light", "Myriad Pro Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    cursor: default;
}


/* ---- basic page appearance ---- */

html.light {
    background-color: #FAFAFA;
    color: #303030;
}

html.dark {
    background-color: #3A3A3A;
    background: url("../../Images/launchbar-beta/background.svg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #eee;
}

body {
    text-align: left;
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: subpixel-antialiased;
    /* 	min-width: 980px; /* iOS Positioning Fix */
    margin: 0;
    padding: 0;
}

@media (-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
    body {
        -webkit-font-smoothing: antialiased;
    }
}

p {
    padding-left: 0.3em;
    padding-right: 0.3em;
    margin: 1.5em auto;
    color: #666;
}

html.dark p {
    color: #bbb;
}


/* ---- header ---- */

h1,
h2,
h3,
h4,
h5,
h6,
.header,
.headerWithIcon {
    color: inherit;
    margin: 0;
    padding-bottom: 0;
}

h2 img {
    vertical-align: middle;
    margin-right: 1.5rem;
}

h2.left img {
    vertical-align: middle;
    margin-left: 0;
    margin-right: 1.5rem;
}

h2.right img {
    vertical-align: middle;
    margin-left: 1.5rem;
    margin-right: 0;
}

h2 span {
    vertical-align: middle;
}


/* ---- links ---- */

a,
a:active {
    color: #2FABE7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a.lighter {
    color: #a8d4ff;
}

a.fancyLink {
    padding-left: 38px;
    /* Image Size + 4px */
    background-size: 28px 28px;
    display: inline-block;
    margin-left: 1em;
    margin-right: 1em;
}

a.fancyLink.play {
    background: url("../../Images/buttons/fancyLink-play.png") no-repeat 0% 100%;
}

a.fancyLink.buy {
    background: url("../../Images/buttons/fancyLink-buy.png") no-repeat 0% 100%;
}

a.fancyLink.docu {
    background: url("../../Images/buttons/fancyLink-documentation.png") no-repeat 0% 100%;
}

a.fancyLink.download {
    background: url("../../Images/buttons/fancyLink-download.png") no-repeat 0% 100%;
}

a.fancyLink.goTo {
    background: url("../../Images/buttons/fancyLink-goTo.png") no-repeat 0% 100%;
}

a.fancyLink.submit {
    background: url("../../Images/buttons/fancyLink-submit.png") no-repeat 0% 100%;
}

div.fancyButton.od-sales-badge {
    position: relative;
}

div.fancyButton.od-sales-badge:after {
    position: absolute;
    width: 141px;
    height: 47px;
    content: "";
    left: -3px;
    transform: translateY(-75%); 
    background: url("../../Images/badges/badge-sale-medium.png") no-repeat;
    background-size: 141px 47px;
}

section.teaser div.fancyButton.od-sales-badge:after {
    position: absolute;
    width: 134px;
    height: 136px;
    content: "";
    top: 4px;
    left: 138px;
    z-index: 10;
    background: url("../../Images/badges/badge-sale-big.png") no-repeat;
    background-size: 134px 136px;
}

div.fancyButton {
    color: white;
    display: inline-block;
    padding: 0 3px;
    border: 1px solid #55ACEE;
    border-radius: 3px;
    background-color: #55ACEE;
    margin-right: 0.5em;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

div.fancyButton:last-of-type {
    margin-right: 0;
}

div.fancyButton:hover {
    border-color: #5A99D7;
    background-color: #5A99D7;
}

div.fancyButton.dark {
    border-color: #9B9B9B;
    background-color: #9B9B9B;
}

div.fancyButton.dark:hover {
    border-color: #8A8A8A;
    background-color: #8A8A8A;
}

div.fancyButton.downloadButton {
    border-color: #79C22B;
    background-color: #79C22B;
}

div.fancyButton.downloadButton:hover {
    border-color: #70b328;
    background-color: #70b328;
}

div.fancyButton.light {
    border-color: #9B9B9B;
    background-color: transparent;
    color: #9B9B9B;
}

div.fancyButton.light:hover {
    border-color: #9B9B9B;
    background-color: rgba(0, 0, 0, 0.05);
}

div.fancyButton a,
div.fancyButton a:active,
div.fancyButton a:hover {
    font-size: 2rem;
    text-decoration: none;
}

div.fancyButton a {
    color: inherit;
    padding: 0.6rem 0em 0.6rem 0em;
    padding-left: 48px;
    /* Image Size + 16px */
    padding-right: 12px;
    background-size: 32px 32px !important;
    background-position: 8px center !important;
    display: inline-block;
    line-height: 32px;
    /*
	margin-left: 0.7em;
	margin-right: 1em;
*/
}

div.fancyButton.iconless a {
    padding-left: 12px;
}

div.fancyButton a.buy {
    background: url("../../Images/buttons/fancyButton-buy-hover.png") no-repeat 0% 100%;
}

div.fancyButton a.download {
    background: url("../../Images/buttons/fancyButton-download-hover.png") no-repeat 0% 100%;
}

div.fancyButton a.releasenotes {
    background: url("../../Images/buttons/fancyButton-learn-more-hover.png") no-repeat 0% 100%;
}

div.fancyButton a.learnmore {
    background: url("../../Images/buttons/fancyButton-learn-more-hover.png") no-repeat 0% 100%;
}

div.fancyButton a.book {
    background: url("../../Images/buttons/fancyButton-book.png") no-repeat 0% 100%;
}

div.fancyButton.light a.buy {
    background: url("../../Images/buttons/fancyButton-buy.png") no-repeat 0% 100%;
}

div.fancyButton.light a.download {
    background: url("../../Images/buttons/fancyButton-download.png") no-repeat 0% 100%;
}

div.fancyButton.light a.releasenotes {
    background: url("../../Images/buttons/fancyButton-learn-more.png") no-repeat 0% 100%;
}

div.fancyButton.light a.learnmore {
    background: url("../../Images/buttons/fancyButton-learn-more.png") no-repeat 0% 100%;
}

div.fancyButton.light a.book {
    background: url("../../Images/buttons/fancyButton-book.png") no-repeat 0% 100%;
}

a.incognito {
    color: inherit;
    text-decoration: inherit;
}


/* ---- toggle-button ---- */

.toggle-button {
    margin-top: 4.5rem;
    margin-bottom: 3rem;
}

.toggle-button *,
.toggle-button:hover *,
.toggle-button:active * {
    color: inherit;
    text-decoration: inherit;
    padding: 0.15em 0.8em 0.15em 0.8em;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0);
}

.toggle-button .active {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.15);
}


/* ------------------------------ */


/* ---- convenience section ----- */


/* ------------------------------ */

.licensekey {
    font-family: monospace;
    white-space: nowrap;
}

.dark-font {
    color: #303030;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
    margin-left: 0;
}

.right {
    text-align: right;
    margin-right: 0;
}

.blue {
    color: rgb(128, 212, 255);
}

.hidden {
    display: none !important;
}


/* ------------------------------ */


/* ------- header section ------- */


/* ------------------------------ */


/* ---- layout ---- */

nav[role="main"] {
    padding-top: 8px;
    min-height: 44px;
}

nav[role="main"] div.menu-wrapper {
    position: relative;
    padding: 0;
    margin: 0 auto;
}

nav[role="main"] .menubutton:not(.logo) {
    height: 32px;
    margin-right: 0px;
    padding: 8px 12px 8px 38px;
}

nav div.menu-wrapper {
    margin: 0px auto;
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}

nav[role="sub"] div.menu-wrapper {
    border-bottom: 1px #e7e7e7 solid;
}


/* ---- styling ---- */

nav[role="sub"] {
    margin-top: 0.5em;
}

.dark nav a,
.dark nav a:hover,
.dark nav a:active {
    text-decoration: none;
    color: #eee;
}

.light nav a,
.light nav a:hover,
.light nav a:active {
    text-decoration: none;
    color: #303030;
}

input.mm-trigger,
input.sm-trigger {
    display: none;
}

nav[role="main"] label,
nav[role="sub"] label {
    display: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

nav[role="sub"] a,
nav[role="sub"] a:active,
nav[role="sub"] a:focus {
    padding: 0px 5px;
    display: inline-block;
    vertical-align: text-top;
    border-bottom: 2px solid transparent;
}

nav[role="sub"] .home.mobile a {
    cursor: default;
    pointer-events: none;
}

.dark nav[role="main"] .menubutton:not(.logo):not(.menu):hover {
    background-color: rgba(255, 255, 255, 0.33);
    border-radius: 3px;
}

.light nav[role="main"] .menubutton:not(.logo):not(.menu):hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
}

nav[role="main"] .menubutton {
    margin-left: 17px;
    height: 42px;
}

nav[role="main"] .menubutton.logo {
    background-image: url("../../Images/navigation/menubutton-logo-light.png");
    background-size: 172px 42px;
    background-repeat: no-repeat;
    background-position: left bottom;
    width: 172px;
    display: block;
    text-indent: -9999px;
    margin-left: 0px;
    height: 44px;
}

nav[role="main"] .menubutton.jobs {
    position: relative;
    padding-right: 2.2rem;
}

nav[role="main"] .menubutton.jobs:after {
    content: " ";
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    right: 7px;
    top: 6px;
    background-image: url("../../Images/jobs/jobs-badge.png");
    background-size: 15px 15px;
    background-repeat: no-repeat;
    background-position: center center;
}

.dark nav[role="main"] .menubutton.logo {
    background-image: url("../../Images/navigation/menubutton-logo-light.png");
}

.light nav[role="main"] .menubutton.logo {
    background-image: url("../../Images/navigation/menubutton-logo-dark.png");
}

input.mm-trigger:checked~nav[role="main"] label {
    background: url("../../Images/navigation/menubutton-main-menu-expanded.png") no-repeat 15px center;
    background-size: 18px 14px;
}

nav[role="main"] label {
    background: url("../../Images/navigation/menubutton-main-menu-collpased.png") no-repeat 15px center;
    background-size: 18px 14px;
}

input.sm-trigger:checked~nav[role="sub"] label {
    background: url("../../Images/navigation/menubutton-sub-menu-expanded@2x.png") no-repeat 15px center;
    background-size: 18px 14px;
}

nav[role="sub"] label {
    background: url("../../Images/navigation/menubutton-sub-menu-collpased@2x.png") no-repeat 15px center;
    background-size: 18px 14px;
}

nav[role="main"] .menubutton.more {
    background: url("../../Images/navigation/menubutton-more.png") no-repeat 19px center;
    background-size: 22px 22px;
}

nav[role="main"] .menubutton.snitch {
    background: url("../../Images/product-icons/littlesnitch_32.png") no-repeat 14px center;
}

nav[role="main"] .menubutton.microsnitch {
    background: url("../../Images/product-icons/microsnitch_32.png") no-repeat 14px center;
}

nav[role="main"] .menubutton.launchbar {
    background: url("../../Images/product-icons/launchbar_32.png") no-repeat 14px center;
}

.dark nav[role="main"] .menubutton.jobs {
    background: url("../../Images/navigation/menubutton-jobs-light.png") no-repeat 0% 50%;
}

.dark nav[role="main"] .menubutton.jobs:after {
    background-image: url("../../Images/jobs/jobs-badge-light.png");
}

.dark nav[role="main"] .menubutton.blog {
    background: url("../../Images/navigation/menubutton-blog-light.png") no-repeat 0% 50%;
}

.dark nav[role="main"] .menubutton.products {
    background: url("../../Images/navigation/menubutton-products-light.png") no-repeat 0% 50%;
}

.dark nav[role="main"] .menubutton.support {
    background: url("../../Images/navigation/menubutton-support-light.png") no-repeat 0% 50%;
}

.dark nav[role="main"] .menubutton.shop {
    background: url("../../Images/navigation/menubutton-shop-light.png") no-repeat 0% 50%;
}

.dark nav[role="main"] .menubutton.cart {
    background: url("../../Images/navigation/menubutton-shopping-light.png") no-repeat 0% 50%;
}

.light nav[role="main"] .menubutton.blog {
    background: url("../../Images/navigation/menubutton-blog-dark.png") no-repeat 0% 50%;
}

.light nav[role="main"] .menubutton.jobs {
    background: url("../../Images/navigation/menubutton-jobs-dark.png") no-repeat 0% 50%;
}

.light nav[role="main"] .menubutton.products {
    background: url("../../Images/navigation/menubutton-products-dark.png") no-repeat 0% 50%;
}

.light nav[role="main"] .menubutton.support {
    background: url("../../Images/navigation/menubutton-support-dark.png") no-repeat 0% 50%;
}

.light nav[role="main"] .menubutton.shop {
    background: url("../../Images/navigation/menubutton-shop-dark.png") no-repeat 0% 50%;
}

.light nav[role="main"] .menubutton.cart {
    background: url("../../Images/navigation/menubutton-shopping-dark.png") no-repeat 0% 50%;
}


/* ------------------------------ */


/* --------- content ------------ */


/* ------------------------------ */

.pageContent {
    text-align: center;
    margin: 0 auto;
    background-color: inherit;
    max-width: 100%;
}

section {
    padding: 0;
    padding-top: 3em;
    width: 100%;
}

section div {
    max-width: 850px;
    margin: 0 auto;
}

section p.width-limited {
    margin: 4.8rem auto;
    max-width: 600px;
}


/* -----  teaser ----- */

section.teaser div.teaser-image {
    padding: 3em;
    padding-top: 4em;
}

section.teaser {
    margin-top: 0;
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 3em;
}

section.teaser:after {
    content: "";
    clear: both;
    display: block;
}

section.teaser .description {
    float: left;
    width: 60%;
}

section.teaser .description .slogan {
    margin-top: 3em;
}

section.teaser .description .links {
    margin-top: 3em;
}

section.teaser .hero {
    float: left;
}

section.teaser h1 {
    font-size: 6.2rem;
}

section.teaser h2 {
    color: #666;
}


/* -----  dot navigations ----- */

nav[role="dot-nav"] ul {
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

nav[role="dot-nav"] ul li {
    position: relative;
    /* required by child[a] */
    display: inline-block;
    /* 12px */
    width: 0.685em;
    height: 0.685em;
    margin-left: 0.3em;
    margin-right: 0.3em;
}

nav[role="dot-nav"] a {
    position: absolute;
    /* needed due to text-indent, requires non-static parent */
    /* needed for setting size, as links are usually inline (only) */
    cursor: pointer;
    text-indent: -99999px;
    width: 0.457em;
    height: 0.457em;
    z-index: 100;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    /* 1px */
    margin-left: 0.063em;
    margin-top: 0.063em;
    border: 0.057em solid transparent;
}

nav[role="dot-nav"] a.active {
    /* 1px */
    border: 0.057em solid #fff;
    /* 10px */
    width: 0.571em;
    /* ~12px with border */
    height: 0.571em;
    margin-left: 0.057em;
    margin-top: 0.057em;
    margin: 0;
}


/* color adjustments for light and dark pages */

nav[role="dot-nav"] a {
    background-color: #fff;
}

nav[role="dot-nav"] a.active {
    background-color: transparent;
}

nav[role="dot-nav"].dark a {
    border-color: #E0E0E0;
    background-color: transparent;
}

nav[role="dot-nav"].dark a:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

nav[role="dot-nav"].dark a.active {
    background-color: #666;
    border: none;
}


/* Twitter Section */

#twitter.row.dark-bg {
    background-color: #3A3A3A !important;
    background: url('../../Images/launchbar/dark-background.svg') no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-top: 2.5em !important;
    padding-bottom: 0.8em !important;
    color: #eee;
}

#twitter.scroll-link {
    opacity: 1.0;
    -webkit-transition: opacity 0.15s ease-in-out;
    -moz-transition: opacity 0.15s ease-in-out;
    transition: opacity 0.15s ease-in-out;
}

#twitter.scroll-link:hover {
    opacity: 0.7;
}

.tweet {
    position: absolute;
    opacity: 0;
    z-index: 0;
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    vertical-align: middle;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

#twitter .feature-container {
    height: 330px;
}

#twitter nav {
    margin-bottom: 20px;
}

.tweet.visible {
    opacity: 1;
    z-index: 50;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

#twitter .ddd .content {
    font-family: "myriad-pro", "MyriadPro-Light", "Myriad Pro Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 300;
    line-height: 1.2em;
    font-size: 2em;
}

#twitter .ddd a {
    text-decoration: none;
}

.tweet .profile-image {
    height: 100%;
    float: left;
}

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

.tweet .profile-image img {
    width: 80px;
    height: 80px;
    margin-top: 62px;
    background-color: #818181;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2)/* , 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2) */
    ;
    -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2)/* , 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2) */
    ;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2)/* , 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2) */
    ;
}

.tweet p {
    margin: 0;
}

.tweet .ddd {
    margin-left: 100px;
}

div#twitter .tweet .ddd .content {
    color: #FFF;
    margin-bottom: 0.5em;
}

div#twitter .tweet .ddd .handle a {
    color: #666;
}

.tweet .ddd .handle:before {
    content: "– ";
}

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

.tweet .ddd {
    margin-top: 60px;
}


/* ------------------------------ */


/* ----------- footer ----------- */


/* ------------------------------ */

footer {
    margin-top: 32px;
    margin-bottom: 32px;
}

#pageFooter {
    margin: 0 auto;
    max-width: 850px;
    font-size: 0.8em;
}

#pageFooter .mobile,
#pageFooter .language .legend {
    display: none;
}

footer.light #pageFooter {
    color: #aaa !important;
}

#pageFooter .language {
    float: right;
}

#pageFooter .left {
    text-align: left;
}

#pageFooter .outlined {
    padding: 0.6em 1em;
    border-radius: 5px;
    border: 1px solid #B4B4B4;
}

#pageFooter .copyright {
    padding: 0;
    margin-top: 0.5em;
    color: #aaa !important;
}

footer.light #pageFooter a:hover {
    color: #3A3A3A !important;
}

footer.dark #pageFooter a:hover {
    color: #c2c2c2 !important;
}

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


/* =============================================================== */


/* =============================================================== */


/* MENU (non-responsive) */


/* =============================================================== */


/* =============================================================== */

nav .mobile,
nav .menubutton.mobile,
nav .a.mobile,
nav .menubutton.logo.mobile {
    display: none;
}

body {
    position: relative;
}

div#menu-overlay {
    display: none;
}

nav[role="main"] .menu-wrapper>div {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

nav[role="main"] div.menu-wrapper {
    max-width: 980px;
    min-width: 900px;
}

nav[role="main"] .menu-wrapper>div a {
    height: 44px;
    line-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
}

nav[role='sub'] div.menu-wrapper {
    max-width: 980px;
    min-width: 900px;
    margin: 0 auto;
}

nav[role="sub"] .buy-now {
    font-style: inherit;
    font-weight: 600;
}

nav[role='sub'] div.menu-wrapper>div:not(.home) {
    padding-left: 1.5em;
}

nav[role='sub'] div.menu-wrapper>div:not(.home) a {
    padding-bottom: 0.2em;
}

nav[role="sub"] div.menu-wrapper>div:not(.home) a.selected {
    border-bottom: 2px solid #209FDF;
}

nav[role="sub"] div.menu-wrapper>div:not(.home) a:hover {
    border-bottom: 2px solid #999;
}

nav div.menu-wrapper>.home,
nav div.menu-wrapper>.logo {
    margin-right: auto;
}


/* =============================================================== */


/* =============================================================== */


/* RETINA OVERRIDES */


/* =============================================================== */


/* =============================================================== */

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi) {
    /* ------ links ------ */
    a.fancyLink {
        background-size: 26px 26px !important;
    }
    a.fancyLink.play {
        background: url("../../Images/buttons/fancyLink-play@2x.png") no-repeat 0% 100%;
    }
    a.fancyLink.goTo {
        background: url("../../Images/buttons/fancyLink-goTo@2x.png") no-repeat 0% 100%;
    }
    a.fancyLink.download {
        background: url("../../Images/buttons/fancyLink-download@2x.png") no-repeat 0% 100%;
    }
    a.fancyLink.docu {
        background: url("../../Images/buttons/fancyLink-documentation@2x.png") no-repeat 0% 100%;
    }
    a.fancyLink.buy {
        background: url("../../Images/buttons/fancyLink-buy@2x.png") no-repeat 0% 100%;
    }
    a.fancyLink.submit {
        background: url("../../Images/buttons/fancyLink-submit@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton a.buy {
        background: url("../../Images/buttons/fancyButton-buy-hover@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton a.download {
        background: url("../../Images/buttons/fancyButton-download-hover@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton a.releasenotes {
        background: url("../../Images/buttons/fancyButton-learn-more-hover@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton a.learnmore {
        background: url("../../Images/buttons/fancyButton-learn-more-hover@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton a.book {
        background: url("../../Images/buttons/fancyButton-book@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton.light a.buy {
        background: url("../../Images/buttons/fancyButton-buy@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton.light a.download {
        background: url("../../Images/buttons/fancyButton-download@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton.light a.releasenotes {
        background: url("../../Images/buttons/fancyButton-learn-more@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton.light a.learnmore {
        background: url("../../Images/buttons/fancyButton-learn-more@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton.light a.book {
        background: url("../../Images/buttons/fancyButton-book@2x.png") no-repeat 0% 100%;
    }
    div.fancyButton.od-sales-badge:after {
        background: url("../../Images/badges/badge-sale-medium@2x.png") no-repeat;
        background-size: 141px 47px;
    }
    section.teaser div.fancyButton.od-sales-badge:after {
        background: url("../../Images/badges/badge-sale-big@2x.png") no-repeat;
        background-size: 134px 136px;
    }
    /* ------ menu buttons ------ */
    .dark nav[role="main"] .menu-wrapper>div:not(.products)>.menubutton:not(.logo):not(.menu),
    .light nav[role="main"] .menu-wrapper>div:not(.products)>.menubutton:not(.logo):not(.menu),
    nav[role="main"] .menu-wrapper>div:not(.products)>.menubutton:not(.logo):not(.menu) {
        background-size: 40px 25px;
    }
    nav[role="main"] .products .menubutton:not(.more) {
        background-size: 32px 32px;
    }
    nav[role="main"] .menubutton.more {
        background-image: url("../../Images/navigation/menubutton-more@2x.png");
    }
    input.sm-trigger:checked~nav[role="sub"] label {
        background-image: url("../../Images/navigation/menubutton-sub-menu-expanded@2x.png");
    }
    nav[role="sub"] label {
        background-image: url("../../Images/navigation/menubutton-sub-menu-collpased@2x.png");
    }
    input.mm-trigger:checked~nav[role="main"] label {
        background-image: url("../../Images/navigation/menubutton-main-menu-expanded@2x.png");
    }
    nav[role="main"] label {
        background-image: url("../../Images/navigation/menubutton-main-menu-collpased@2x.png");
    }
    nav[role="main"] .menubutton.snitch {
        background-image: url("../../Images/product-icons/littlesnitch_32@2x.png");
    }
    nav[role="main"] .menubutton.microsnitch {
        background-image: url("../../Images/product-icons/microsnitch_32@2x.png");
    }
    nav[role="main"] .menubutton.launchbar {
        background-image: url("../../Images/product-icons/launchbar_32@2x.png");
    }
    .dark nav[role="main"] .menubutton.logo {
        background-image: url("../../Images/navigation/menubutton-logo-light@2x.png");
    }
    .dark nav[role="main"] .menubutton.blog {
        background-image: url("../../Images/navigation/menubutton-blog-light@2x.png");
    }
    .dark nav[role="main"] .menubutton.products {
        background-image: url("../../Images/navigation/menubutton-products-light@2x.png");
    }
    .dark nav[role="main"] .menubutton.support {
        background-image: url("../../Images/navigation/menubutton-support-light@2x.png");
    }
    .dark nav[role="main"] .menubutton.jobs {
        background-image: url("../../Images/navigation/menubutton-jobs-light@2x.png");
    }
    .dark nav[role="main"] .menubutton.shop {
        background-image: url("../../Images/navigation/menubutton-shop-light@2x.png");
    }
    .dark nav[role="main"] .menubutton.cart {
        background-image: url("../../Images/navigation/menubutton-shopping-light@2x.png");
    }
    .dark nav[role="main"] .menubutton.logo {
        background-image: url("../../Images/navigation/menubutton-logo-light@2x.png");
    }
    .light nav[role="main"] .menubutton.logo {
        background-image: url("../../Images/navigation/menubutton-logo-dark@2x.png");
    }
    .light nav[role="main"] .menubutton.blog {
        background-image: url("../../Images/navigation/menubutton-blog-dark@2x.png");
    }
    .light nav[role="main"] .menubutton.products {
        background-image: url("../../Images/navigation/menubutton-products-dark@2x.png");
    }
    .light nav[role="main"] .menubutton.support {
        background-image: url("../../Images/navigation/menubutton-support-dark@2x.png");
    }
    .light nav[role="main"] .menubutton.jobs {
        background-image: url("../../Images/navigation/menubutton-jobs-dark@2x.png");
    }
    .light nav[role="main"] .menubutton.shop {
        background-image: url("../../Images/navigation/menubutton-shop-dark@2x.png");
    }
    .light nav[role="main"] .menubutton.cart {
        background-image: url("../../Images/navigation/menubutton-shopping-dark@2x.png");
    }
    nav[role="main"] .menubutton.jobs:after {
        background-image: url("../../Images/jobs/jobs-badge@2x.png");
    }
    .dark nav[role="main"] .menubutton.jobs:after {
        background-image: url("../../Images/jobs/jobs-badge-light@2x.png");
    }
    .dark nav[role="main"] .menubutton.mobile.logo,
    .light nav[role="main"] .menubutton.mobile.logo {
        background-image: url("../../Images/navigation/menubutton-logo-white-mobile@2x.png");
    }
}