body {
    font-family: Karla, sans-serif !important;
}

strong {
    font-weight: 700;
}

.container {
    max-width: 100% !important;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.small40 {
    font-size: 40%;
}

.small45 {
    font-size: 45%;
}

.small50 {
    font-size: 50%;
}

.small60 {
    font-size: 60%;
}

.small65 {
    font-size: 65%;
}

.small70 {
    font-size: 70%;
}

.small75 {
    font-size: 75%;
}

.small80 {
    font-size: 80%;
}

.small85 {
    font-size: 85%;
}

.small90 {
    font-size: 90%;
}

.small95 {
    font-size: 95%;
}

.lge100 {
    font-size: 100%;
}

.lge105 {
    font-size: 105%;
}

.lge110 {
    font-size: 110%;
}

.lge115 {
    font-size: 115%;
}

.lge120 {
    font-size: 120%;
}

.grey50 {
    background-color: #f2f2f2;
}

.black80Txt {
    color: #333333 !important;
}


@media (min-width: 576px) {
    .modal-dialog {
        max-width: 900px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px !important;
    }

    .container-fluid {
        padding-right: 15px;
        padding-left: 15px;
    }
}

@media print {
    .noPrint, .noPrint * {
        display: none !important;
    }
}

/* Google font latin */
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 400;
    src: local('Karla'), local('Karla-Regular'), url('/include/theme/sw20/font/karla-v13.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .mega-dropdown .dropdown-menu.mega-menu {
    max-height: none;
    overflow-x: auto;
    overflow-y: auto;
    margin-top: 0;
}

.navbar .dropdown-menu a {
    display: block;
}

.navbar .dropdown-menu a:hover {
    padding-left: 8px;
    margin-left: -12px;
    border-left: 4px solid #7FDED9 !important;
}

.mainNavBar .navbar-nav .active > .nav-link,
.mainNavBar .navbar-nav .nav-link.active,
.mainNavBar .navbar-nav .nav-link.show,
.mainNavBar .navbar-nav .show > .nav-link {
    color: #000000 !important;
}

.navbar.navbar-dark .navbar-nav .nav-item .nav-link {
    color: #000000;
}

.borderBlack {
    border-color: #000000 !important;
}

.borderDarkGrey {
    border-color: #575757 !important;
}

.borderLightGrey {
    border-color: #cccccc !important;
}

@media (min-width: 992px) {
    .mainNavBarContainer {
        background-color: #000;
    }

    .navbar.navbar-dark .navbar-nav .nav-item .nav-link {
        color: #ffffff;
    }

    .nav-item.dropdown.mega-dropdown:hover {
        color: #fff;
        background: linear-gradient(70deg, #000000 15%, #00AEA9 16.5%, #00AEA9 83%, #000000 84.5%);
        background-repeat: no-repeat;
    }
}

.breadcrumbs {
    white-space: nowrap;
}

.swimmer-turquoise {
    background-color: #00aea9 !important;
}

.swimmer-lightblue {
    background-color: #9ad9e9 !important;
}

.swimmer-berry {
    background-color: #f04e69 !important;
}

.swimmer-sunshine {
    background-color: #fdb525 !important;
}

.txtBerry {
    color: #f04e69;
}

.txtSunshine {
    color: #fdb525;
}

.txtLightBlue {
    color: #9ad9e9;
}

.txtTurquoise {
    color: #00aea9;
}

.btn-swimmer {
    background-color: #fff !important;
    border: 2px solid #222;
    color: #222 !important;
}

.btn-swimmer.btn-sm {
    border: none;
}

.btn-swimmer-dark {
    background-color: #222;
    color: #fff;
}

.btn-swimmer-dark:hover {
    background-color: #5a5959;
    color: #fff;
}

.btn-sw,
.btn-swimmer-turquoise {
    background-color: #00aea9;
    color: #fff;
}
.btn-swimmer-turquoise:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.swimmer-turquoise-text {
    color: #00aea9 !important;
}

a.active {
    color: #222;
    border-bottom: 2px solid #7FDED9 !important;
}

.overlay {
    position: fixed;
    display: none;
    z-index: 2;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.97);
    cursor: pointer;
}

.checkout {
    position: absolute;
    z-index: 9999999;
    top: 2em;
    right: 1em;
    width: 325px;
    margin-left: auto;
    transition: max-height .6s;
    transition-delay: .25s;
    max-height: calc(100vh - 200px);
    display: none;
}

.checkout::before {
    transition: opacity .6s;
    transition-delay: .25s;
    z-index: 1;
    content: "";
    width: 0;
    border-bottom: 11px solid #eee;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    top: 0;
    right: 1em;
    opacity: 1;
}

.checkout-content {
    background-color: #fff;
    margin-top: 10px;
}

.searchProduct {
    position: relative;
}

.searchProduct .top-right {
    position: absolute;
    top: 12px;
    right: 28px;
}

.circle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 0;
    padding: 20px 0;
    border-radius: 50%;
    border: 1px solid #00aea9;
    background: #fff;
    color: #00aea9;
    font-size: 11px;
    line-height: 2px;
    text-align: center;
}

.square {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 0;
    padding: 10px 0;
    border-radius: 0%;
    border: 1px solid #00aea9;
    background: #fff;
    color: #00aea9;
    font-size: 11px;
    line-height: 2px;
    text-align: center;
}

.searchProduct .video {
    position: absolute;
    right: 15%;
    width: 25px;
    height: 25px;
}

.videoPlayThumb {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navScroll {
    padding-left: 2px;
    max-height: 250px;
    overflow-x: auto;
    overflow-y: auto;
}

.facetBullet,
.paymentOption {
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/></svg>");
    background-repeat: no-repeat;
    background-size: 0.9rem 0.9rem;
    background-position-y: center;
    padding-left: 2.8em;

}
.paymentOption {
    background-position-x: 1em;
}
.btn.paymentOption {
    font-size: 1rem;
    padding-right: 1em;
}
.facetBullet:hover,
.facetBulletActive,
.paymentOption:hover,
.paymentOptionActive {
    background-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' fill='%2300aea9' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='8'/></svg>");
}

.facetBulletActive:hover,
.paymentOptionActive:hover {
    background-image: url("data:image/svg+xml,<svg width='1em' height='1em' viewBox='0 0 16 16' fill='%23aaaaaa' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='8'/></svg>");
}

#thumbs img:hover {
    cursor: pointer;
}

.col-sm-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}

.col-xs-8 {
    flex: 0 0 50%;
    max-width: 50%;
}

/* the only solution I can find to correcting the width of cols within table cells in mdb */
td.col, td.col-1, td.col-10, td.col-11, td.col-12, td.col-2, td.col-3, td.col-4, td.col-5, td.col-6, td.col-7, td.col-8, td.col-9, td.col-auto, td.col-lg, td.col-lg-1, td.col-lg-10, td.col-lg-11, td.col-lg-12, td.col-lg-2, td.col-lg-3, td.col-lg-4, td.col-lg-5, td.col-lg-6, td.col-lg-7, td.col-lg-8, td.col-lg-9, td.col-lg-auto, td.col-md, td.col-md-1, td.col-md-10, td.col-md-11, td.col-md-12, td.col-md-2, td.col-md-3, td.col-md-4, td.col-md-5, td.col-md-6, td.col-md-7, td.col-md-8, td.col-md-9, td.col-md-auto, td.col-sm, td.col-sm-1, td.col-sm-10, td.col-sm-11, td.col-sm-12, td.col-sm-2, td.col-sm-3, td.col-sm-4, td.col-sm-5, td.col-sm-6, td.col-sm-7, td.col-sm-8, td.col-sm-9, td.col-sm-auto, td.col-xl, td.col-xl-1, td.col-xl-10, td.col-xl-11, td.col-xl-12, td.col-xl-2, td.col-xl-3, td.col-xl-4, td.col-xl-5, td.col-xl-6, td.col-xl-7, td.col-xl-8, td.col-xl-9, td.col-xl-auto {
    width: auto;
}

.modal {
    margin: 2% !important;
}


.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

label.error, label.help-block, .errorMsg {
    color: red;
    font-style: italic
}

#paymentErrorMsg {
    padding: 10px;
    color: red;
    font-style: italic
}

#paymentErrorMsg:empty {
    padding: 0;
}

.wrap {
    flex-wrap: wrap;
}

.noWrap {
    white-space: nowrap;
}

.scrollX {
    overflow-x: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.scrollX::-webkit-scrollbar {
    display: none;
}

.productDescriptionShorten {
    position: relative;
    height: 450px;
    overflow: hidden;
    /*opacity: 0.7;*/
}

.productDescriptionShorten:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
}

.productDescriptionFull {
    height: auto;
}

.cFlag {
    width: 16px;
    height: 11px;
    background: url(../img/icons/flags.png) no-repeat;
    display: inline-block;
}

.cFlag.cFlag-au {
    background-position: -16px 0
}

.cFlag.cFlag-ca {
    background-position: -32px 0
}

.cFlag.cFlag-ch {
    background-position: -48px 0
}

.cFlag.cFlag-dk {
    background-position: -64px 0
}

.cFlag.cFlag-eu {
    background-position: 0 -11px
}

.cFlag.cFlag-gb {
    background-position: -16px -11px
}

.cFlag.cFlag-hk {
    background-position: -32px -11px
}

.cFlag.cFlag-jp {
    background-position: -48px -11px
}

.cFlag.cFlag-kr {
    background-position: -64px -11px
}

.cFlag.cFlag-my {
    background-position: 0 -22px
}

.cFlag.cFlag-no {
    background-position: -16px -22px
}

.cFlag.cFlag-nz {
    background-position: -32px -22px
}

.cFlag.cFlag-ph {
    background-position: -48px -22px
}

.cFlag.cFlag-se {
    background-position: -64px -22px
}

.cFlag.cFlag-sg {
    background-position: 0 -33px
}

.cFlag.cFlag-th {
    background-position: -16px -33px
}

.cFlag.cFlag-us {
    background-position: -32px -33px
}

.footerTxt, .footerTxt a, .footerTxt a:visited {
    color: #000000;
}

.footerTxt a {
    line-height: 2em;
}

.accordionPanel {
    position: relative;
    cursor: pointer;
}

.accordionPanel::after,
.iconChevronDown {
    content: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3E%3C/svg%3E%0A");
}

.iconChevronLeft {
    content: url("data:image/svg+xml,%3Csvg width='2em' height='2em' viewBox='0 0 16 16' class='bi bi-chevron-left' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.iconChevronRight {
    content: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-chevron-right' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.accordionPanel::after {
    color: #333;
    top: 0;
    right: 0;
    position: absolute;
}

.accordionPanel[aria-expanded="true"]::after,
.iconDash {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
    width: 1em;
    height: 1em;
}

.iconMinus {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' class='bi bi-dash-circle' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath fill-rule='evenodd' d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
    width: 1em;
    height: 1em;
    position: relative;
}

.iconPlus {
    content: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-plus-circle' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath fill-rule='evenodd' d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    width: 1em;
    height: 1em;
    position: relative;
}

.iconSupport {
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23555555' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 1a5 5 0 0 0-5 5v4.5H2V6a6 6 0 1 1 12 0v4.5h-1V6a5 5 0 0 0-5-5z'/%3E%3Cpath d='M11 8a1 1 0 0 1 1-1h2v4a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1V8zM5 8a1 1 0 0 0-1-1H2v4a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8z'/%3E%3Cpath fill-rule='evenodd' d='M13.5 8.5a.5.5 0 0 1 .5.5v3a2.5 2.5 0 0 1-2.5 2.5H8a.5.5 0 0 1 0-1h3.5A1.5 1.5 0 0 0 13 12V9a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M6.5 14a1 1 0 0 1 1-1h1a1 1 0 1 1 0 2h-1a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 2.8em;
    height: 1.8em;
    padding: 0;
    margin-bottom: -5px;
    background-size: auto;
    background-position-y: bottom;
}

.iconBag {
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 16 16' class='bi bi-bag' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 1a2.5 2.5 0 0 0-2.5 2.5V4h5v-.5A2.5 2.5 0 0 0 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V5H2z'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    width: 2em;
    height: 2em;
    background-size: auto;
    background-position-y: bottom;
}

.iconSearch {
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' class='bi bi-search' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z'/%3E%3Cpath fill-rule='evenodd' d='M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 1.5em;
    height: 1.5em;
    background-size: auto;
}

.iconClose {
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-x-circle' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath fill-rule='evenodd' d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 1em;
    height: 1em;
    background-size: auto;
}

.iconHelp {
    display: inline-block;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='1em' height='1em' viewBox='0 0 16 16' class='bi bi-question-circle' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 1em;
    height: 1em;
    background-size: auto;
}

.iconMuted {
    opacity: 0.4;
}

.icon100 {
    width: 1.0em;
    height: 1.0em;
}

.icon110 {
    width: 1.1em;
    height: 1.1em;
}

.sortChevron {
    position: relative;
    color: #333;
    top: 4px;
}

.carousel-control-prev .iconChevronLeft,
.carousel-control-next .iconChevronRight {
    width: 1.8em;
    height: 1.8em;
}

.homeTxt a {
    color: #222;
    border-bottom: 2px solid #7FDED9 !important;
}

.pagination a.page-link {
    color: #000;
}

.videoTitle {
    background-color: #00aea9;
    color: white;
    padding: 5px;
    text-align: center;
    font-size: 0.8em;
}

#accordionPayments .card {
    border: 1px solid black;
    border-radius: 0.8rem;
    margin-bottom: 5px;
}

.formErrors input:invalid,
.formErrors textarea:invalid,
#checkout input:user-invalid,
#checkout textarea:user-invalid {
    border: 2px solid red;
}
#checkout input:valid {
    border: 1px solid #ced4da;
}

/**
 * XS & SM view
 */
@media (max-width: 768px) {
    .productDescriptionShorten {
        height: 150px;
    }

    .carousel-indicators li {
        background-color: #aaaaaa;
    }

    .carousel-indicators li.active {
        width: 24px;
        border-radius: 4px;
        background-color: #333;
    }
}

/**
 * Product page - sticky right column with scrollable image grid
 */
.product-info-sticky {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}

/**
 * Only show thumbnails in large+ view
 * Shows dot indicators in mobile
 */
@media (min-width: 768px) {
    .carousel-thumbnails2 .carousel-indicators {
        position: static;
        left: initial;
        width: initial;
        margin-right: initial;
        margin-left: initial;
        overflow-x: auto;
        white-space: nowrap
    }

    .carousel-thumbnails2 .carousel-indicators > li {
        width: initial;
        height: initial;
        text-indent: initial
    }

    .carousel-thumbnails2 .carousel-indicators > li .active img {
        opacity: 1
    }
}