@font-face {
    font-family: "Sailec Regular";
    font-weight: 400;
    src: url(../assets/fonts/sailecregular.woff) format("woff"), url(../assets/fonts/sailecregular.woff2) format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Sailec Medium";
    font-weight: 700;
    src: url(../assets/fonts/sailecmedium.woff) format("woff"), url(../assets/fonts/sailecmedium.woff2) format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Sailec Bold";
    font-weight: bolder;
    src: url(../assets/fonts/sailecbold.woff) format("woff"), url(../assets/fonts/sailecbold.woff2) format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Sailec";
    font-weight: 700;
    src: url(../assets/fonts/sailecbold.woff) format("woff"), url(../assets/fonts/sailecbold.woff2) format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Sailec";
    font-weight: 500;
    src: url(../assets/fonts/sailecmedium.woff) format("woff"), url(../assets/fonts/sailecmedium.woff2) format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Sailec";
    font-weight: 400;
    src: url(../assets/fonts/sailecregular.woff) format("woff"), url(../assets/fonts/sailecregular.woff2) format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Akkordeon Three";
    font-weight: lighter;
    src: url(../assets/fonts/akkordeon.woff) format("woff"), url(../assets/fonts/akkordeon.woff2) format("woff2");
    font-display: swap;
}
html {
    scroll-behavior: smooth;
    font-size: 16px !important;
    line-height: 1.4em !important;
    font-family: Sailec Regular, sans-serif !important;
    color: #14145a !important;
}
body {
    margin: 0;
    padding: 0;
}
@media screen and (min-width: 1541px) {
    html {
        font-size: 1.05vw;
    }
}
@media screen and (max-height: 600px) {
    html {
        font-size: 0.9rem;
    }
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
ol,
ul {
    list-style: none;
}
h1 {
    font-family: "Sailec Medium";
    font-size: 2.375rem;
    line-height: 3.325rem;
    padding-bottom: 1.25rem;
    font-weight: 700;
}
h2 {
    font-family: "Sailec Medium";
    font-size: 2rem;
    line-height: 2.8rem;
    padding-bottom: 1.25rem;
    font-weight: 700;
}
h3 {
    font-family: "Sailec Medium";
    font-size: 1.5rem;
    line-height: 2.1rem;
    padding-bottom: 1.25rem;
    font-weight: 700;
}
h4 {
    font-family: "Sailec Medium";
    font-size: 1.25rem;
    line-height: 1.75rem;
    padding-bottom: 1.25rem;
    font-weight: 700;
}
h5 {
    font-family: "Sailec Medium";
    font-size: 1rem;
    line-height: 1.4rem;
    font-weight: 700;
}
@media screen and (max-width: 1080px) {
    h1 {
        font-size: 2rem;
        line-height: 2.8rem;
    }
    h2 {
        font-size: 1.5rem;
        line-height: 2.1rem;
    }
    h3 {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}
p {
    font-family: "Sailec Regular";
    font-size: 1rem;
    line-height: 1.4rem;
    padding-bottom: 1.25rem;
}
span {
    font-size: 1rem;
    line-height: 1.4rem;
}
p,
span {
    font-size: 1rem;
    line-height: 1.4rem;
}
a.unstyled {
    text-decoration: none;
}
a {
    text-decoration: underline;
    color: inherit;
    transition: color 0.25s ease;
}
a:hover {
    color: #f07350;
}
.small-text {
    font-size: 0.875rem;
    line-height: 1rem;
}
.nested-text {
    font-size: 1rem;
    display: inline;
    font-family: "Sailec Regular";
}
.slate {
    color: #96aab9;
}
.aqua {
    color: #a5e0f0;
}
.navy {
    color: #14145a;
}
b,
strong {
    font-weight: 700;
}
.orange-button {
    border-color: #f07350;
    background-color: #f07350;
    color: #fff;
}
.navy-button {
    border-color: #14145a;
    background-color: #14145a;
    color: #fff;
}
.white-button {
    border-color: #14145a;
    background-color: #fff;
    transition: all 0.25s ease;
}
.rounded-button.white-button a,
.white-button a {
    color: #14145a;
    transition: color 0.25s ease;
}
.white-button:hover {
    background-color: #14145a;
}
.white-button:hover a {
    color: #fff;
}
.blue-button {
    border-color: #1e73dc;
    background-color: #1e73dc;
    transition: all 0.25s ease;
}
.blue-button a {
    color: #fff;
    transition: color 0.25s ease;
}
.blue-button:hover {
    background-color: #14145a;
    border-color: #14145a;
}
.transparent-button {
    border-color: #14145a;
    background-color: transparent;
    transition: all 0.25s ease;
}
.transparent-button a {
    color: #14145a;
    transition: color 0.25s ease;
}
.transparent-button:hover {
    background-color: #14145a;
}
.transparent-button:hover a {
    color: #fff;
}
@media screen and (max-width: 450px) {
    .rounded-button {
        width: 100%;
        text-align: center;
    }
}
.rounded-select-container {
    position: relative;
}
.rounded-select-container .rounded-select {
    display: block;
    font-size: 1rem;
    font-family: "Sailec Regular", sans-serif;
    color: #14145a;
    line-height: 2rem;
    padding: 0.75rem 2rem;
    outline: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid #d3dae8;
    border-radius: 5rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    cursor: pointer;
}
.rounded-select-container .rounded-select:active,
.rounded-select-container .rounded-select:hover {
    border-color: #14145a;
}
.rounded-select-container .dropdown-arrow {
    position: absolute;
    right: 0.5rem;
    top: 0.75rem;
    padding: 0.5rem 1.5rem;
    background: #fff;
}
.rounded-select-container .dropdown-arrow svg path {
    stroke: #14145a;
}
.pad-2 {
    padding: 2.5rem;
}
.pad-v-2 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}
.pad-h-2 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}
.pad-b-2 {
    padding-bottom: 2.5rem;
}
.pad-t-2 {
    padding-top: 2.5rem;
}
.pad-l-2 {
    padding-left: 2.5rem;
}
.pad-r-2 {
    padding-right: 2.5rem;
}
@media screen and (max-width: 1080px) {
    .pad-2 {
        padding: 1.25rem;
    }
    .pad-v-2 {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
    .pad-h-2 {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .pad-b-2 {
        padding-bottom: 1.25rem;
    }
    .pad-t-2 {
        padding-top: 1.25rem;
    }
    .pad-l-2 {
        padding-left: 1.25rem;
    }
    .pad-r-2 {
        padding-right: 1.25rem;
    }
}
.pad-1 {
    padding: 1.25rem;
}
.pad-v-1 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
.pad-h-1 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
.pad-b-1 {
    padding-bottom: 1.25rem;
}
.pad-t-1 {
    padding-top: 1.25rem;
}
.flex-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin: 0 auto;
}
.column-12 {
    grid-column: span 12;
}
.column-11 {
    grid-column: span 11;
}
.column-10 {
    grid-column: span 10;
}
.column-9 {
    grid-column: span 9;
}
.column-8 {
    grid-column: span 8;
}
.column-7 {
    grid-column: span 7;
}
.column-6 {
    grid-column: span 6;
}
.column-5 {
    grid-column: span 5;
}
.column-4 {
    grid-column: span 4;
}
.column-3 {
    grid-column: span 3;
}
.column-2 {
    grid-column: span 2;
}
.column-1 {
    grid-column: span 1;
}
.column-hide {
    display: none;
}
@media screen and (max-width: 1080px) {
    .lg-column-12 {
        grid-column: span 12;
    }
    .lg-column-11 {
        grid-column: span 11;
    }
    .lg-column-10 {
        grid-column: span 10;
    }
    .lg-column-9 {
        grid-column: span 9;
    }
    .lg-column-8 {
        grid-column: span 8;
    }
    .lg-column-7 {
        grid-column: span 7;
    }
    .lg-column-6 {
        grid-column: span 6;
    }
    .lg-column-5 {
        grid-column: span 5;
    }
    .lg-column-4 {
        grid-column: span 4;
    }
    .lg-column-3 {
        grid-column: span 3;
    }
    .lg-column-2 {
        grid-column: span 2;
    }
    .lg-column-1 {
        grid-column: span 1;
    }
    .lg-column-hide {
        display: none;
    }
}
@media screen and (max-width: 770px) {
    .md-column-12 {
        grid-column: span 12;
    }
    .md-column-11 {
        grid-column: span 11;
    }
    .md-column-10 {
        grid-column: span 10;
    }
    .md-column-9 {
        grid-column: span 9;
    }
    .md-column-8 {
        grid-column: span 8;
    }
    .md-column-7 {
        grid-column: span 7;
    }
    .md-column-6 {
        grid-column: span 6;
    }
    .md-column-5 {
        grid-column: span 5;
    }
    .md-column-4 {
        grid-column: span 4;
    }
    .md-column-3 {
        grid-column: span 3;
    }
    .md-column-2 {
        grid-column: span 2;
    }
    .md-column-1 {
        grid-column: span 1;
    }
    .md-column-hide {
        display: none;
    }
}
@media screen and (max-width: 450px) {
    .sm-column-12 {
        grid-column: span 12;
    }
    .sm-column-11 {
        grid-column: span 11;
    }
    .sm-column-10 {
        grid-column: span 10;
    }
    .sm-column-9 {
        grid-column: span 9;
    }
    .sm-column-8 {
        grid-column: span 8;
    }
    .sm-column-7 {
        grid-column: span 7;
    }
    .sm-column-6 {
        grid-column: span 6;
    }
    .md-column-5 {
        grid-column: span 5;
    }
    .sm-column-4 {
        grid-column: span 4;
    }
    .sm-column-3 {
        grid-column: span 3;
    }
    .sm-column-2 {
        grid-column: span 2;
    }
    .sm-column-1 {
        grid-column: span 1;
    }
    .sm-column-hide {
        display: none;
    }
}
@media screen and (max-width: 1080px) {
    .lg-order-0 {
        order: 0;
    }
    .lg-order-1 {
        order: 1;
    }
    .lg-order-2 {
        order: 2;
    }
    .lg-order-3 {
        order: 3;
    }
}
@media screen and (max-width: 770px) {
    .md-order-0 {
        order: 0;
    }
    .md-order-1 {
        order: 1;
    }
    .md-order-2 {
        order: 2;
    }
    .md-order-3 {
        order: 3;
    }
}
@media screen and (max-width: 450px) {
    .sm-order-0 {
        order: 0;
    }
    .sm-order-1 {
        order: 1;
    }
    .sm-order-2 {
        order: 2;
    }
    .sm-order-3 {
        order: 3;
    }
}
.main-content-wrapper {
    position: relative;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .column-1 {
        width: 8%;
        display: inline-block;
        vertical-align: top;
    }
    .column-2 {
        width: 16%;
        display: inline-block;
        vertical-align: top;
    }
    .column-3 {
        width: 24.5%;
        display: inline-block;
        vertical-align: top;
    }
    .column-4 {
        width: 32.5%;
        display: inline-block;
        vertical-align: top;
    }
    .column-5 {
        width: 41%;
        display: inline-block;
        vertical-align: top;
    }
    .column-6 {
        width: 49.5%;
        display: inline-block;
        vertical-align: top;
    }
    .column-7 {
        width: 58%;
        display: inline-block;
        vertical-align: top;
    }
    .column-8 {
        width: 65%;
        display: inline-block;
        vertical-align: top;
    }
    .column-9 {
        width: 75%;
        display: inline-block;
        vertical-align: top;
    }
    .column-10 {
        width: 83%;
        display: inline-block;
        vertical-align: top;
    }
    .column-11 {
        width: 91%;
        display: inline-block;
        vertical-align: top;
    }
    .column-12 {
        width: 100%;
        display: inline-block;
        vertical-align: top;
    }
    .accessories-select-section {
        width: 60%;
        display: inline-block;
        vertical-align: top;
    }
    .lens-results-column {
        width: 23%;
        display: inline-block;
        vertical-align: top;
    }
    .social-link-overlay img {
        width: 50px;
        margin: 0 auto;
    }
}
.product-carousel-purchase-section {
    top: 135px;
}
input#search_query {
    width: 93%;
    border: 0;
    border-bottom: 0;
    outline: 0;
    font-size: 20px;
    display: inline-block;
    color: #fff;
    padding: 12px 0;
    padding-left: 0;
    margin-bottom: 10px;
    background: 0 0;
    transition: border-color 0.2s;
}
input#search_query::placeholder {
    color: #fff;
    font-size: 20px;
}
@media all and (min-width: 600px) and (max-width: 1024px) {
    input#search_query {
        width: 85% !important;
        margin-left: 20px;
        font-size: 17px;
    }
    input#search_query::placeholder {
        font-size: 17px;
    }
}
@media all and (max-width: 599px) {
    input#search_query {
        width: 75% !important;
        margin-left: 20px;
        font-size: 14px;
    }
    input#search_query::placeholder {
        font-size: 14px;
    }
}
.search_form.search-wrapper {
    background-color: #f07350;
}
.search-dialogue .search-dialogue-box {
    margin-top: 30px;
}
.search-dialogue .search-dialogue-box .search-bar-section {
    padding: 0 !important;
}
.search_form.search-wrapper .dynamic-results-area {
    background-color: #fff !important;
}
.search_form.search-wrapper .search-button svg g {
    fill: #fff;
}
.close-search-dialogue g#Menu-Cart-Hover {
    fill: #fff;
}
.close-search-dialogue {
    width: 2%;
    vertical-align: middle;
    display: inline-block;
    padding: 15px;
    float: none !important;
    position: absolute;
    top: 35px;
    right: 25px;
}
.button-search.btn-search {
    display: inline-block;
    width: 2%;
    padding: 5px;
    margin: 5px;
    vertical-align: middle;
}
div#top-header-transparent {
    height: 0;
}
#covid-notice {
    text-align: center;
}
.heading-2 {
    font-size: 2rem;
    line-height: 2.8rem;
}
.heading-3 {
    font-size: 1.5rem;
    line-height: 2.1rem;
}
.heading-3-cat {
    font-family: Sailec Medium;
    padding-bottom: 1.25rem;
    font-weight: 700;
}
.heading-4 {
    font-size: 1.25rem;
    line-height: 1.75rem;
}
.heading-4-cat {
    font-family: Sailec Medium;
    padding-bottom: 1.25rem;
    font-weight: 700;
}
.heading-5 {
    font-family: Sailec Medium;
    font-size: 1rem;
    line-height: 1.4rem;
    font-weight: 700;
}
.helper-links .heading-5 {
    margin-bottom: 1rem;
}