@charset "UTF-8";
/* CSS Document */

header
,nav
,section
,article
,aside
,footer
,hgroup
{
    position:relative;
    display: block;
}
div {
    position: relative;
}
body {
    font-family: 'Roboto', sans-serif;
    font-family: 'Poppins', sans-serif;
    background-color: #F9F9F9;
    color:#333;
    overflow-x: hidden;
    max-width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
@media (max-width: 768px) {

}
h1 a, h2 a, h3 a, h1 a:hover, h2 a:hover, h3 a:hover {
    text-decoration:none;
    color:inherit;
}
h1, h2, h3, h4, h5 {
    font-weight: 600;
}
h1 {

}
h2 {

}
h3 {
    font-weight: 600;
    margin-bottom: 20px;
}
h4 {
    font-weight: 600;
    margin-bottom: 20px;
}
a,a:hover {
    color:inherit;
}
strong {

}
*[data-href]:not([data-href=""]) {
    cursor:pointer;
}
.row.pad25 {
    margin-right:-25px;
    margin-left:-25px;
}
.row.pad25 > [class*='col-'] {
    padding-right:25px;
    padding-left:25px;
}
.row.pad10 {
    margin-right:-10px;
    margin-left:-10px;
}
.row.pad10 > [class*='col-'] {
    padding-right:10px;
    padding-left:10px;
}
.row.pad5 {
    margin-right:-5px;
    margin-left:-5px;
}
.row.pad5 > [class*='col-'] {
    padding-right:5px;
    padding-left:5px;
}
.row.no-pad {
    margin-right:0;
    margin-left:0;
}
.row.no-pad > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

img:not(.media-object), video {
    max-width:100%;
    height:auto !important;
}
section {

}
.noPad {
    padding:0;
}
.clickable,a[onclick] {
    cursor: pointer;
}
.greybg {
    background-color: #EFEFEF;
}
@media (min-width: 767px) {
    .row.equal {
        display: flex;
        flex-wrap: wrap;
    }

}
.row.equal div[class*="col-"] > div {
    height: 100%;
}

big, .input-lg, .input-group-lg input {
    font-size: 16px;
}

section[data-sectionfluid="fluid"] > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.will_animate {
    visibility: hidden;
}

.container {
    position: relative;
}


.navbar-default {
    background-color: #FFFFFF;
    border-radius: 0;
    border:0;
    border-bottom:1px solid #efefef;
}
.navbar-brand {
    position: relative;
    max-width: 220px;
    z-index: 1001;
}
.navbar-collapse {
    padding: 8px 0;
}
.navbar-right {
    margin-top: 10px;
}


.table-noborder * {
    border:0 !important;
}
.table-noborder {
    margin-bottom: 0;
}
.table-noheadborder thead th {
    border-bottom:0 !important;
}
.table-tbodyborder thead th, .table-tbodyborder tfoot * {
    border:0 !important;
}
.table .accentRow td {
    background-color: #f9f9f9;
}
.table .accentRow td:first-child {
    border-radius: 7px 0 0 7px;
}
.table .accentRow td:last-child {
    border-radius: 0 7px 7px 0;
}
.table .accentRow big {
    font-weight: 600;
}
.table-noborder:not(.table-condensed) tbody tr:last-child td {
    padding-bottom: 25px;
}
.table-noborder tfoot tr td:first-child {
    padding-left: 15px;
}
.table-noborder tfoot tr td:last-child {
    padding-right: 15px;
}




.btn {
    transition: all 0.2s;
    border-radius: 7px;
}
.btn-success {
    background-color: #53B18B;
    border-color:#53B18B;
}
.btn-success:hover {
    background-color: #4BA17F;
    border-color:#4BA17F;
}

.media {
    margin-top: 35px;
}
.text-bold {
    font-weight: bold;
}
@media (min-width: 1100px) {
    .modal-lg {
        width: 1080px;
    }
}
.modal-content {
    border-radius: 20px;
}
.modal-content > * {
    padding: 40px;
}
.modal-body .modal-close {
    z-index: 10;
    cursor: pointer;
    background-color: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 45px;
    text-align: center;
    padding-top:12px;
    margin-top: -15px; margin-right: -15px;
    border:1px solid #efefef;
    transition: all 0.2s;
}
.modal-body .modal-close:hover {
    background-color: #efefef;
}

.panel-default {
    border-radius: 10px;
    background-color: #FFF;
    border:0;
    box-shadow: none;
}
.panel-default .panel-heading {
    /*background-color: #333;*/
    /*color: #FFF;*/
    background-color: #FFF;
    border-bottom:2px solid #f9f9f9;
    border-radius: 10px 10px 0 0;
    padding: 20px 30px;
}
.panel-default .panel-heading h3 {
    font-weight: 700;
}
.panel-body {
    padding: 25px;
}
.form-control[readonly] {
    background-color: #f9f9f9;
    box-shadow: none;
}
.form-group label {
    margin-left: 15px;
    font-weight: 500;
}
.form-grey-input .form-control {
    background-color: #f9f9f9;
    box-shadow: none;
}



.productModal {

}
.productModal .image img {
    border-radius: 15px;
}
.productModal .brand {
    font-weight: bold;
    font-size: 16px;

}
.productModal .title {
    font-weight: 700;
    font-size: 30px;
    line-height: 31px;
}
.productModal .cartRow {
    font-size: 16px;
}
.productModal h4 {
    font-weight: 700;
}
.productModal .cartRow input {
    background-color: #F9F9F9;
}

.productModal .productInfoText {
    max-height: 2.8em;
    overflow: hidden;
}
.productModal .productInfoText.showall {
    max-height: 1000px;
}
.productModal .productInfoText p {
    margin-bottom: 0;
    font-size: 13px;
}
.productCard {
    background-color: #FFF;
    border-radius: 10px;
    transition: all 0.2s;
    box-shadow: 0px 0px 0px rgba(0,0,0,0);
    padding:25px;
    margin-top: 10px;
    cursor: pointer;
}
.productCard:hover {
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
    text-decoration: none;
}

.productCard .media-left {
    padding-right: 15px;
}
.productCard .image img {
    border-radius: 10px;
}
.productCard .brand {
    margin-top: 4px;
}
.productCard .title {
    font-weight: 700;
    font-size: 16px;
}
.productCard .code {

}
.productCard .attributes {
    padding-top: 10px;
}





.modal {
    text-align: center;
    padding: 0!important;
}
@media (min-width: 560px) {
    .modal:before {
        content: '';
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        margin-right: -4px; /* Adjusts for spacing */
    }

    .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }
}
.modal-backdrop.in {
    filter: alpha(opacity=70);
    opacity: .7;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}


.contentWrapper:not([data-layout="cart"]):not([data-layout="orderComplete"]):not([data-layout="orderIncomplete"]):not([data-layout="orderimport"]) {
    width: calc(100vw - 400px);
}
@media (min-width: 1640px) {
    .contentWrapper:not([data-layout="cart"]):not([data-layout="orderComplete"]):not([data-layout="orderIncomplete"]):not([data-layout="orderimport"]) .navbar-fixed-top {
        padding-right: 400px;
    }
}
.cartHolder {
    position: fixed;
    right:0; top:0;
    width:400px;
    height: 100vh;
    z-index: 1049;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
    padding:25px;
    transition: all 0.3s;
    background-color: #FFF;
}
.cartHolder .checkoutHolder {
    position: absolute;
    left:0; bottom:0;
    width: 100%;
    padding: 25px;
}

@media (max-width: 1640px) {
    .contentWrapper {
        width: 100vw !important;
    }
    .cartHolder {
        transform: translate3d(420px,0,0);
    }
    .cartHolder.show {
        transform: translate3d(0,0,0);
    }
}

.cartHolder h4 {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 20px;
}
.cartHolder .media .title {
    font-weight: 500;
    font-size: 14px;
}
.cartHolder .media .price {
    font-weight: bold;
    margin-left: 15px;
}
.qInput {
    position: absolute;
    right:0; bottom:0;
    z-index: 10;
}
.qInput input {
    border-top:1px solid #CCCCCC;
    border-bottom:1px solid #CCCCCC;
    border-left:1px solid #CCCCCC;
}
.cartHolder .media {
    border-bottom: 1px solid #efefef;
    margin-top: 10px;
    padding-bottom: 10px;
}

.cartHolder .modal-close {
    display: block;
    z-index: 10;
    cursor: pointer;
    background-color: #ffffff;
    width: 45px;
    height: 45px;
    border-radius: 45px;
    text-align: center;
    padding-top:12px;
    margin-top: -15px; margin-right: -15px;
    border:1px solid #efefef;
    transition: all 0.2s;
}
.cartHolder .modal-close:hover {
    background-color: #efefef;
}
@media (min-width: 1640px) {
    .cartHolder .modal-close {
        display: none;
    }
}
@media (min-width: 768px) {
    .cartHolder .cartContents {
        max-height: calc(100vh - 170px);
        overflow-y: scroll;
    }
}




.categoryCard {
    text-align: center;
    padding: 20px;
    border:0px solid #efefef;
    background-color: #FFF;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    margin-bottom: 20px;
    transition: all 0.2s;
    box-shadow: 0px 0px 0px rgba(0,0,0,0);

}
.categoryCard:hover {
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
    text-decoration: none;
}


.downloadCard {
    text-align: center;
    padding: 20px;
    border:1px solid #efefef;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    margin:10px 0;
}

.well {
    padding: 25px;
}
.well.white {
    background-color: #FFF;
    border-radius: 10px;
    box-shadow: none;
    border: 0;
    box-shadow: 0px 0px 20px rgba(0,0,0,0.1);
}

.list-group {

}
.list-group * {
    border-color: #F5F5F5;
}
.list-group-item {
    padding: 20px;
}
.list-group-item:hover {
    background-color: #FAFAFA !important;
}
.list-group-item:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.list-group-item:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.breadcrumb {
    background-color: #FFF;
}
.btn {
    padding-left: 30px;
    padding-right: 30px;
    font-weight: 700;
}
.btn.btn-lg {
    padding-left: 40px;
    padding-right: 40px;
    font-size: 16px;
}

.btn-template {
    background-color: #2d8ba3;
    border-color: #2d8ba3;
    color:#FFF;
}
.btn-template-inverse {
    background-color: #FFFFFF;
    border-color: #ED2616;
    color:#000;
}
.label-success {
    background-color: #5CC77E;
}
.label {
    border-radius: 120px;
}

.btn-white {
    background-color: #FFFFFF;
    border-color: #FFFFFF;
}
.ymmHolder {
    /*background-color: #FFFFFF;*/
    padding:20px 0 00px 0;
}
.ymmHolder .form-control {
    background-color: #FFF;
    border-color:#FFF;
    box-shadow: none;
    border-radius: 4px;
}
.ymmHolder.smaller {
    padding-top: 10px;
}
.ymmHolder.smaller .form-control {
    margin:5px 0;
}

.filterGroup {
    margin-top: 25px;
}
.filterGroupTitle {
    background-color: #E8E8E8;
    padding: 9px 10px;
    border-radius: 4px;
    display: block;
    margin-bottom: 20px;
    font-weight: 600;
    color:#4B4B4B;
}
.filterList.max5 > div:nth-of-type(1n+6){
    display: none;
}
.filterGroup .showMore {
    display: none;
}

.form-control {
    box-shadow: none;
    border-radius: 10px;
    border:0;
    /*box-shadow: 0px 0px 10px rgba(0,0,0,0.1);*/
}
.navbar-form .form-control {
    background-color: #F5F5F5;
    border-color:#FFF;
    box-shadow: none;
    border:0;
    border-radius: 5px;
}
.navbar-form > .input-group {
    width: 700px;
}
.navbar-form .input-group .btn-default {
    border:0;
    background-color: #E8E8E8;
    font-size: 16px;
}
.navbar-form {
    margin-bottom: 15px;
}

.navbar + * {
    margin-top: 120px;
}
.checkbox .num {
    color:#777777;
}
.checkbox {
    margin-bottom: 12px;
}
input[type="checkbox"] {
    width:17px; height: 17px;
    margin-left: -29px !important;
    margin: 1px 0 0;
}
.checkbox label {
    padding-left: 30px;
}
/* Hide the browser's default checkbox */
.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 4px;
    background-color: #FFF;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
    background-color: #2D8BA3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
    left: 7px;
    top: 4px;
    width: 7px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}






























.bannerHolder {

}

.bannerHolder > div {
    width: 100%;
    padding-bottom: 40%;
    background: #D9D9D9;
    border-radius: 10px;
}
.bannerHolder + .bannerHolder {
    margin-top: 13px;
}

.bannerHolder .content {
    position: absolute;
    width: 100%; height: 100%;
}
.bannerHolder .content * {
    z-index: 2;
}
.bannerHolder .title {
    font-weight: 700;
    font-size: 40px;
    max-width: 460px;
}
.bannerHolder .subtitle {
    font-weight: 600;
    font-size: 16px;
}
.bannerHolder .textHolder {
    position: absolute;
    left:20px; top: 20px;
    color:#FFF;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.bannerHolder .buttonHolder {
    position: absolute;
    left:20px; bottom: 20px;
}
.bannerHolder .image {
    position: absolute;
    width: 100%; height: 100%;
    z-index: 1;
    border-radius: 10px;
    background-position: center center;
    background-size: cover;
}
.bannerHolder.small .title {
    font-size: 25px;
}
.bannerHolder .owl-carousel {
    height: 100% !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}
.bannerHolder .owl-carousel .owl-stage-outer,
.bannerHolder .owl-carousel .owl-stage,
.bannerHolder .owl-carousel .owl-item {
    height: 100%;
}

.bannerHolder .owl-nav {
    position: absolute;
    left:0;
    width: 100%;
    top:38%;
}
.bannerHolder.small .owl-nav {
    top:34%;
}
.bannerHolder .owl-nav > * {
    position: absolute;
    background-color: transparent !important;
    color:#FFF;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.5);

}
.bannerHolder .owl-nav .owl-prev {
    left:5px;
}
.bannerHolder .owl-nav .owl-next {
    right:5px;
}



.newsItem {

}
.newsItem img {
    border-radius: 10px 10px 0 0;
}
.newsItem .content {
    border:1px solid #efefef;
    border-radius: 0 0 10px 10px;
    padding:20px;
    background-color: #FFF;
}
.newsItem .date {
    font-size: 11px;
}
.newsItem .title {
    font-weight: bold;
    font-size: 16px;
    padding: 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

}
#newsSlider .owl-nav {
    position: absolute;
    left:0;
    width: 100%;
    top:38%;
}
#newsSlider .owl-nav > * {
    position: absolute;
    background-color: transparent;
    color:#999;

}
#newsSlider .owl-nav .owl-prev {
    left:-50px;
}
#newsSlider .owl-nav .owl-next {
    right:-50px;
}


#imagesSlider .owl-nav {
    position: absolute;
    left:0;
    width: 100%;
    top:38%;
}
#imagesSlider .owl-nav > * {
    position: absolute;

}
#imagesSlider .owl-nav .owl-prev {
    left:0px;
}
#imagesSlider .owl-nav .owl-next {
    right:0px;
}


.loadingFlagHolder {
    display: inline-block;
    width: 150px;
    height: 150px;
    border-radius: 100px;
    background-color: #FFF;
    padding-top: 20px;
}
.loadingFlagHolder img {
    border-radius: 100px;
}


.loginPanel {
    background-color: #FFF;
    border-radius: 25px;
}
.loginLogo {
    display: inline-block;
    max-width: 270px !important;
}
.loginImgColumn {
    background-image: url('/img/login.jpg');
    background-position: center center;
    background-size: cover;
    height: 600px;
    border-radius: 25px 0 0 25px;
}
.loginColumn {
    padding: 30px 50px 30px 40px;
}
.loginColumn h3 {
    font-family: 'Poppins';
}
.newAccountNotif {
    position: absolute;
    left:0; bottom:0;
    padding: 25px;
    color:#FFF;
    font-size: 15px;
}
.newAccountNotif a {
    color:#E30613;
}

#normalLogin input[name="username"] {
    background-image: url('/img/user-solid.svg');
    background-size: 16px;
    background-position: left 15px top 14px;
    background-repeat: no-repeat;
    padding-left: 40px;
}
#normalLogin input[name="password"] {
    background-image: url('/img/lock-solid.svg');
    background-size: 16px;
    background-position: left 15px top 14px;
    background-repeat: no-repeat;
    padding-left: 40px;
}

.loginSection {
    padding-top: 15vh
}

@media (max-width: 992px) {
    .loginImgColumn {
        border-radius: 25px 25px 0 0;
        margin:0 15px;
        height: 300px;
    }
    .loginSection {
        padding-top: 5vh
    }
}




footer {
    background-color: #E8E8E8;
    padding: 50px 0;
}