* {
    border-radius: 0;
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100%;
}

body {
    background: #fff;
    color: #000;
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.6em;
}

a,
a:hover {
    color: #d13835;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Roboto", Helvetica, Arial, sans-serif;
    color: #3b3c43;
    font-weight: 700;
}

ul,
ol {
    margin-top: 1em;
    padding-left: 2em;
}

ul.infolist,
ol.infolist {
    list-style: none;
    margin-bottom: 2em;
    margin-top: 2em;
}

ul.infolist li,
ol.infolist li {
    margin-bottom: 0.3em;
}

table tr th,
table tr td {
    font-size: 11px;
}

table tr th {
    background: #ddd;
    border-bottom: 0 !important;
    border-color: #ccc !important;
    padding: 4px 6px 6px !important;
}

table tr td {
    padding: 8px 8px 4px !important;
}

table tr td .btn {
    font-size: 0.85em;
    position: relative;
    top: -2px;
}

/* Datatables */
div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
    float: right;
}

div.dataTables_wrapper table.datatable {
    margin-top: 2em !important;
}

.dataTables_paginate,
.dataTables_info {
    display: inline-block;
    font-size: 13px;
}

.dataTables_paginate {
    float: right;
}

input.datepicker {
    background: url(../img/calendar.png) no-repeat 5% center / 20px;
    padding-left: 3em;
}

.form-control {
    border-radius: 0;
    border: 1px solid #ddd;
    box-shadow: none;
    color: #333;
    cursor: pointer;
}

.form-control:hover {
    border-color: #aaa;
}

.modal-open .modal {
    z-index: 10000;
}

.control-label {
    font-weight: 500;
    position: relative;
    top: -5px;
}

.control-label.required::after {
    color: #e87777;
    content: '*';
    font-size: 12px;
    position: relative;
    top: 1px;
    right: -3px;
    vertical-align: super;
}

.btn {
    border-radius: 2px !important;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.btn:active,
.btn:focus {
    outline: none;
}

.btn+.btn {
    margin-left: 3px !important;
}

.btn-warning {
    background: #FBAC2B;
}

.btn-social {
    display: block;
    margin: 0 auto;
    max-width: 240px;
}

.btn-group .btn+.btn {
    margin-left: 0 !important;
}

.btn.btn-line {
    background: #fff !important;
    border-color: #d13835 !important;
    color: #d13835 !important;
    font-weight: bold;
    outline: none !important;
    text-transform: uppercase !important;
}

.btn.btn-line:hover {
    background: #d13835 !important;
    color: #fff !important;
}

.btn.btn-line:hover i {
    color: #fff !important;
}

.dt-buttons .btn {
    margin-right: 5px;
}

.action-bar {
    /* border-bottom:1px solid #ddd; */
    /* margin-bottom:1em; */
    padding-bottom: 1em;
}

.modal-backdrop {
    z-index: 1000;
}

.site-bd .page-header {
    /* background: #d13835; */
    border-bottom: 0;
    margin: 0 0 0.5em;
    padding: 0;
}

.site-bd .page-header .container {
    background: url(../img/exit-arrow.png) no-repeat 98% center / 54px;
    padding: 0.5em 1em;
}

.site-bd .page-header h1 {
    /* color: #fff; */
    font-size: 1.8em;
    margin: 0;
    text-transform: uppercase;
}

.site-bd .page-header .breadcrumb {
    background: transparent;
    margin: 4px 0 0;
    padding: 0;
}

.site-bd .page-header .breadcrumb li,
.site-bd .page-header .breadcrumb li a {
    /* color: #fff; */
}

.nav-pills {
    margin-bottom: 1em;
    margin-top: 0;
}

.nav-pills>li>a {
    background: #eee;
    user-select: none;
}

.nav-tabs {
    margin-top: 0;
}

.tab-pane {
    background: #fff;
    border: 1px solid #ddd;
    border-top: 0;
    padding: 1em;
}

.panel,
.input-group-addon {
    border-radius: 2px;
}

.panel h3 {
    font-size: 1.1em;
}

div.dataTables_wrapper div.dataTables_filter {
    text-align: right;
    display: inline-block;
    float: right;
}

input.datepicker {
    background: url(../img/calendar.png) no-repeat 5% center / 20px;
    padding-left: 3em;
}

.alert {
    border-radius: 0;
    margin-bottom: 10px;
    padding: 4px 15px;
}

p.error {
    color: red;
    font-style: italic;
    padding: 0.6em 0;
}

.breadcrumb {
    border-radius: 0;
    font-size: 11px;
    margin-top: 10px;
    padding: 3px 1em;
}

.slick-slider {
    max-height: 95vh;
    overflow: hidden;
}

.slick-slide img {
    width: 100%;
}

.container,
.jumbotron .container {
    max-width: 1280px;
    width: auto;
}

.page-wrapper {
    padding-bottom: 5em;
}

.accordion .panel-title,
.accordion .panel-title a {
    text-decoration: none;
}

.page-content {
    font-size: 15px;
}

.wrapper {
    padding: 0;
    min-height: 100%;
}

.topbar {
    background: #F3F0EB;
    text-align: right;
}

.topbar .nav {
    float: right;
}

.topnav span {
    color: #777;
    margin-left: 10px;
}

.topnav span a {
    background: #d13835 !important;
    color: #fff;
    display: inline-block;
    padding: 4px 10px;
    text-decoration: none;
}

.topbar i.icon {
    font-size: 1.1em;
    margin-right: 3px;
    position: relative;
    top: 1px;
}

.navbar {
    border: 0;
    border-bottom: 1px solid #ddd;
    border-radius: 0;
    box-shadow: none;
    height: auto;
    margin-bottom: 0;
    min-height: auto;
}

.navbar-default {
    background: #fff;
}

.navbar-brand {
    height: auto;
    margin-right: 20px;
    padding: 6px 15px;
}

.navbar-brand img {
    height: 3em;
}

.navbar-custom {
    z-index: 999;
}

.bx-wrapper .bx-controls-direction a {
    z-index: 998;
}

.navbar-custom .navbar-brand {
    opacity: 1.0;
    padding-left: 0;
}

.navbar-nav:not(.topnav)>li:not(:last-child)::after {
    content: '';
    display: inline-block;
    background: #CBCACB;
    width: 0.0625rem;
    width: .0625rem;
    height: 30px;
    height: 1.25rem;
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg);
    margin-left: 0;
    bottom: 0;
    position: absolute;
    top: 50%;
    margin-top: -.5625rem;
    right: -1px;
}

.navbar-nav>li>a {
    background: transparent;
    font-size: 1.1em;
    font-weight: bold;
    padding: 25px 20px;
    text-transform: uppercase;
    transition: all ease-in 100ms;
}

.site-bd .navbar-nav>li:last-child>a {
    padding-right: 0;
}

.navbar-nav>li>a:hover,
.home-bd .home-lnk,
.about-bd .about-lnk,
.product-bd .product-lnk,
.service-bd .service-lnk,
.port-bd .port-lnk,
.contact-bd .contact-lnk {
    color: #d13835 !important;
}

.navbar-nav>li:hover>.dropdown-menu {
    display: block;
    margin: 0;
    padding: 0;
    top: 99%;
    transition: all ease-in 300ms;
}

.dropdown-menu>li>a {
    padding: 10px 20px;
    text-transform: uppercase;
    transition: all ease-in 300ms;
}

.dropdown-menu>li>a:hover {
    color: #d13835;
}

.navbar-toggle {
    background: #fff !important;
    border: 0;
    margin-top: 0;
}

.navbar-toggle .icon-bar {
    background: #aaa;
    height: 3px;
    width: 35px;
}

.navbar-toggle .icon-bar+.icon-bar {
    margin-top: 6px;
}

.docs-header {
    padding-top: 0;
}

.no-data {
    background: #eee;
    color: #888;
    font-size: 1.3em;
    margin-top: 2em;
    padding: 1em;
}

/* Home */
#banner-slide {
    position: relative;
}

#banner-slide .slide-caption {
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    max-width: 450px;
    padding: 1.5em;
    position: absolute;
    bottom: 2em;
    left: 0;
    right: 0;
    z-index: 100;
}

#banner-slide .slick-arrow:before {
    color: #444;
    font-size: 25px;
}

.slick-prev,
.slick-next {
    top: 45%;
    z-index: 100;
}

.slick-prev {
    left: 25px !important;
}

.slick-next {
    right: 30px !important;
}

.slide-caption p {
    color: #fff;
    font-size: 1.5em;
    margin-bottom: 1em;
    text-transform: uppercase;
}

.slide-caption .btn {
    font-size: 1em;
}

section {
    padding: 4em 0 5em;
}

section h2 {
    margin: 0 0 1em;
    text-align: center;
    text-transform: uppercase;
}

section p {
    font-size: 1.1em;
    line-height: 1.8em;
}

.section-about {
    background: #333;
    color: #fff;
}

.section-about h2 {
    color: #fff;
}

/* Home */
.quote-slide {
    margin: 0 auto !important;
    max-width: 720px;
}

.quote-slide .slick-dots {
    position: relative;
    bottom: 0;
}

.quote-slide .slick-dots li button:before {
    color: #ccc;
    font-size: 15px;
}

.quote-box {
    background: url(../img/quote-left.png) no-repeat left top / 72px,
        url(../img/quote-right.png) no-repeat bottom right / 72px;
    outline: none !important;
    padding-left: 7em;
}

.quote-box p {
    font-size: 1.4em;
    margin-bottom: 1.5em;
}

.quote-box h4 {
    color: #ddd;
    margin-bottom: 6px;
}

.quote-box span {
    color: 1em;
}

/* Products */
.product-bd {
    background: #f6f6f6;
}

.product-sidebar>div {
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgb(0, 0, 0, 0.1);
    overflow: hidden;
}

.product-sidebar .panel {
    border: 0;
    margin-bottom: 0;
}

.product-sidebar .panel:last-child {
    border-top: 0;
}

.product-sidebar .panel:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.product-sidebar .panel-heading {
    background: #fff;
    border: 0;
    padding: 10px 15px;
}

.product-sidebar .panel-heading h3 {
    font-size: 0.9em;
    text-transform: uppercase;
}

.product-sidebar .panel-body {
    padding: 0 1em;
}

.product-sidebar .filter-list {
    list-style: none;
    margin-top: 0;
    padding-left: 0;
}

.filter-list>li {
    background: url(../img/right-chevron.png) no-repeat -10px 2px / 18px;
    padding-left: 10px;
    padding-bottom: 2px;
}

.filter-list li a {
    font-size: 0.85em;
}

.filter-list li a.active {
    font-weight: bold;
    text-decoration: underline;
}

.filter-list>li>ul {
    list-style: none;
    margin-top: 0;
    padding-left: 1em;
}

.filter-list li ul a {
    color: #777;
    font-size: 0.8em;
}

.product-box a {
    background: #fff;
    /* border: 1px solid #ddd; */
    cursor: pointer;
    display: block;
    margin: 0 0 1em;
    padding: 1em;
    position: relative;
    text-align: center;
    text-decoration: none;
}

.product-box img {
    height: 180px;
    margin: 0 auto;
    object-fit: cover;
    transition: all ease-in 200ms;
}

.product-box:hover img {
    transform: scale(1.05);
}

.product-box h4 {
    color: #333;
    font-size: 0.95em;
    font-weight: normal;
    height: 2em;
}

.product-box .btn-cart {
    /* visibility: hidden; */
    margin-top: 2em;
}

.product-box:hover .btn-cart {
    /* visibility: visible; */
}

.product-view h3 {
    margin-top: 0;
}

.product-photo {
    background: #fff;
}

.product-photo img {
    margin: 0 auto;
}

/* Portfolio */
.portfolio-box {
    cursor: pointer;
    margin-bottom: 1em;
    text-align: start;
}

.portfolio-box h4 {
    color: #d13835;
    font-size: 1em;
    height: 48px;
    text-transform: uppercase;
}

.portfolio-image {
    border: 1px solid #eee;
    overflow: hidden;
    position: relative;
}

.portfolio-box:hover img {
    transform: scale(1.02);
    transition: all ease-in-out 400ms;
}

.portfolio-info {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.9em;
    padding: 1em;
    position: absolute;
    bottom: -100%;
    left: 0;
    right: 0;
    text-align: start;
    transition: all ease-in-out 400ms;
}

.portfolio-box:hover .portfolio-info {
    bottom: 0;
}

/* Login */
.login-box {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin: 4em auto;
    max-width: 400px;
    padding: 2em;
}

.quote-cart {
    background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: fixed;
    right: 1em;
    bottom: 0;
    max-width: 25em;
    width: 100%;
    z-index: 2;
}

.cart-header {
    background: #d13835;
    color: #fff;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
    padding: 0.8em 1em;
}

.btn-toggle-cart {
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    float: right;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 15px;
    padding: 5px;
    position: relative;
    right: -5px;
    top: -5px;
    transition: 200ms ease-in-out all;
    user-select: none;
}

.cart-closed .btn-toggle-cart {
    transform: rotate(180deg);
}

.cart-body {
    height: 40em;
    padding: 1em;
    padding-bottom: 4.5em;
    position: relative;
}

.cart-closed .cart-body {
    display: none;
    padding-bottom: 0;
}

.cart-body .cart-btn {
    background: blue;
    bottom: 1em;
    left: 1em;
    right: 1em;
    position: absolute;
}

.cart-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    position: absolute;
    bottom: 1em;
    left: 1em;
    right: 1em;
    top: 1em;
}

.cart-item {
    border-bottom: 1px solid #ddd;
    min-height: 5em;
    list-style: none;
    margin-bottom: 1em;
    padding-left: 5em;
    padding-right: 2em;
    padding-bottom: 1em;
    overflow: hidden;
    position: relative;
}

.cart-item:last-child {
    border-bottom: 0;
}

.cart-item img {
    background: #fff;
    /* border: 1px solid #ddd; */
    position: absolute;
    left: 0;
    height: 4em;
    margin-bottom: 1em;
    width: 4em;
    object-fit: cover;
    padding: 0;
}

.cart-item h5 {
    font-weight: normal;
    margin-top: 0;
    margin-bottom: 5px;
}

.cart-meta {
    color: #777;
    display: none;
    font-size: 11px;
    text-transform: uppercase;
}

.cart-remove {
    background: #f26d6b;
    border-radius: 3px;
    color: #fff;
    cursor: pointer;
    float: right;
    font-size: 1.2em;
    line-height: 15px;
    padding: 3px 6px 4px;
    position: absolute;
    right: 0;
    top: 0;
    user-select: none;
}

.cart-remove:hover {
    background: #eb0300;
}

footer {
    background: #555;
    color: #fff;
    font-size: 11px;
    padding: 2em 0;
    position: relative;
}

footer h3,
footer h4 {
    color: #fff;
}

footer h3 {
    font-size: 1.5em;
    margin-bottom: 20px;
}

footer h4 {
    font-size: 1em;
    margin-top: 15px;
    margin-bottom: 2px;
    text-transform: uppercase;
}

footer ul {
    margin-top: 0;
    padding-left: 1em;
}

footer ul li {
    margin-bottom: 4px;
}

footer ul li a,
footer ul li a:hover,
footer ul li a:active {
    border-bottom: 1px dotted #eee;
    color: #eee;
    text-decoration: none;
}

@media (max-width: 992px) {
    body {
        padding-top: 0;
    }

    .navbar-custom .navbar-brand {
        width: auto !important;
        overflow: hidden;
    }
}