@charset "utf-8";
/* CSS Document */
/*// Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {}
/*// Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {}
/*// Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {}
/*// Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {}
/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {}
/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {}
/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {}
/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {}
/*
Dagny Pro Black Italic
font-family: ff-dagny-web-pro, sans-serif;
font-weight: 900;
font-style: italic;

Dagny Pro Bold Italic
font-family: ff-dagny-web-pro, sans-serif;
font-weight: 700;
font-style: italic;

Dagny Pro Italic
font-family: ff-dagny-web-pro, sans-serif;
font-weight: 400;
font-style: italic;

Dagny Pro Bold
font-family: ff-dagny-web-pro, sans-serif;
font-weight: 700;
font-style: normal;

Dagny Pro Regular
font-family: ff-dagny-web-pro, sans-serif;
font-weight: 400;
font-style: normal;

Dagny Pro Black
font-family: ff-dagny-web-pro, sans-serif;
font-weight: 900;
font-style: normal;
*/
/*Global Overides
=================================*/
body {
  padding-top: 67px;
  font-family: ff-dagny-web-pro, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: rgb(153, 160, 166);
  font-size: 14px;
}
strong {
  font-family: ff-dagny-web-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
}
hr {
  border-top: 1px solid rgb(240, 240, 240);
}
a {
  color: rgb(255, 121, 131);
}
a:hover {
  color: rgb(255, 121, 131);
}
/*Primary Navigation Styles
=================================*/
#kn-nav {
  padding: 1rem 1rem;
}
#kn-nav .navbar-nav {}
#kn-nav .navbar-nav .nav-item {}
#kn-nav .navbar-nav .nav-item .nav-link {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  color: rgb(153, 160, 166);
}
#kn-nav .navbar-nav .nav-item .nav-link:hover, #kn-nav .navbar-nav .nav-item .nav-link:active, #kn-nav .navbar-nav .nav-item .nav-link.active, #kn-nav .navbar-nav .nav-item .nav-link:focus, #kn-nav .navbar-nav .nav-item .nav-link.focus {
  color: rgb(42, 48, 53);
}
#kn-nav .navbar-nav .nav-item.active .nav-link {
  color: rgb(42, 48, 53);
}
#kn-nav-home {
  padding: 1rem 1rem;
}
#kn-nav-home .navbar-nav .nav-item .nav-link {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.navbar-brand {
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 992px) {
  .navbar-brand {
    margin-right: 0;
    margin-left: 1rem;
  }
}
.navbar-brand img {
  vertical-align: middle;
  width: 120px;
  height: 29px;
}
#nav-search .form-control {
  border: 1px solid rgb(240, 240, 240);
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
  color: rgb(153, 160, 166);
  border-right: none;
  font-size: 14px;
  padding: 0.5rem 1rem;
}
#nav-search .btn-search {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(240, 240, 240);
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
  color: rgb(153, 160, 166);
  border-left: none;
  font-size: 14px;
}
@media (max-width: 1200px) {
  #nav-search .form-inline {
    display: block;
  }
  #nav-search .form-group {
    margin-bottom: 0;
  }
  #nav-search .form-inline .input-group, #nav-search .form-inline .custom-select {
    width: 100%;
  }
}
#nav-menu.navbar-toggler .icon-bar + .icon-bar {
  margin-top: 1px
}
#nav-menu.navbar-toggler {
  background-color: transparent;
  border-color: rgb(240, 240, 240);
  border-radius: 50%;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  width: 35px;
  height: 35px;
  padding: 0;
}
#nav-menu.navbar-toggler .icon-bar {
  display: block;
  border-radius: 0;
  margin: 0 auto;
  width: 14px;
  height: 2px;
  background-color: rgb(153, 160, 166);
  position: relative;
  transition: all .1s ease-in-out
}
#nav-menu.navbar-toggler .icon-bar:nth-of-type(2) {
  top: 1px
}
#nav-menu.navbar-toggler .icon-bar:nth-of-type(3) {
  top: 2px
}
#nav-menu.navbar-toggler.active .icon-bar:nth-of-type(1) {
  background-color: rgb(42, 48, 53);
  top: 3px;
  transform: rotate(45deg)
}
#nav-menu.navbar-toggler.active .icon-bar:nth-of-type(2) {
  background-color: transparent
}
#nav-menu.navbar-toggler.active .icon-bar:nth-of-type(3) {
  background-color: rgb(42, 48, 53);
  top: -3px;
  transform: rotate(-45deg)
}
#nav-menu.navbar-toggler:hover .icon-bar, #nav-menu.navbar-toggler:active .icon-bar {
  background-color: rgb(42, 48, 53);
}
#nav-menu:focus, #nav-menu.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  box-shadow: none;
}
#nav-tools .active {
  color: rgb(255, 87, 100)
}
#nav-account .dropdown-toggle::after {
  display: none;
}
#nav-account .dropdown-menu {
  top: 49px;
  border: 1px solid rgb(240, 240, 240);
  border-radius: 0;
  font-size: 14px;
}
#nav-account .dropdown-item:link, #nav-account .dropdown-item:visited {
  color: rgb(153, 160, 166);
}
#nav-account .dropdown-item:hover, #nav-account .dropdown-item:focus {
  color: rgb(42, 48, 53);
  text-decoration: none;
  background-color: #f8f9fa;
}
#nav-account .dropdown-item.active, #nav-account .dropdown-item:active {
  color: rgba(0, 0, 0, .9);
  text-decoration: none;
  background-color: #f8f9fa;
}
/*Side Navigation Styles
=================================*/
#nav-sidebar > .nav-item {
  font-size: 18px;
  color: rgb(42, 48, 53);
}
#nav-sidebar > .nav-item:first-child {
  border-top: 1px solid rgb(240, 240, 240);
}
@media (max-width: 992px) {
  #nav-sidebar > .nav-item:first-child {
    border-top: none;
  }
}
#nav-sidebar > .nav-item > .nav-link {
  border-bottom: 1px solid rgb(240, 240, 240);
  padding: 0.5rem .75rem;
  color: rgb(153, 160, 166);
}
#nav-sidebar > .nav-item > .nav-link:hover, #nav-sidebar > .nav-item > .nav-link:active, #nav-sidebar > .nav-item > .nav-link.active, #nav-sidebar > .nav-item > .nav-link:focus, #nav-sidebar > .nav-item > .nav-link.focus {
  color: rgb(255, 87, 100);
}
#nav-sidebar > .nav-item > .nav {
  border-bottom: 1px solid rgb(240, 240, 240);
}
#nav-sidebar > .nav-item > .nav > .nav-item {
  font-size: 14px;
  font-weight: 600;
}
#nav-sidebar > .nav-item > .nav > .nav-item > .nav-link {
  border-bottom: none;
  color: rgb(153, 160, 166);
}
#nav-sidebar > .nav-item > .nav > .nav-item > .nav-link:hover, #nav-sidebar > .nav-item > .nav > .nav-item > .nav-link:active, #nav-sidebar > .nav-item > .nav > .nav-item > .nav-link.active, #nav-sidebar > .nav-item > .nav > .nav-item > .nav-link:focus, #nav-sidebar > .nav-item > .nav > .nav-item > .nav-link.focus {
  color: rgb(42, 48, 53);
}
#nav-sidebar > .nav-item > .nav > .nav-item > .nav > .nav-item {
  padding-left: 1rem;
  font-weight: 400;
}
#nav-sidebar > .nav-item > .nav > .nav-item > .nav > .nav-item > .nav-link {
  color: rgb(153, 160, 166);
}
#nav-sidebar > .nav-item > .nav > .nav-item > .nav > .nav-item > .nav-link:hover, #nav-sidebar > .nav-item > .nav > .nav-item > .nav > .nav-item > .nav-link:active, #nav-sidebar > .nav-item > .nav > .nav-item > .nav > .nav-item > .nav-link.active, #nav-sidebar > .nav-item > .nav > .nav-item > .nav > .nav-item > .nav-link:focus, #nav-sidebar > .nav-item > .nav > .nav-item > .nav > .nav-item > .nav-link.focus {
  color: rgb(42, 48, 53);
}
/*Banner Styles
=================================*/
#kn-banner {
  background-image: url("./../img/bg-home-illustration.png");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 880px;
  min-height: 500px;
}
@media (min-width: 1500px) {
  #kn-banner {
    background-size: 1020px;
  }
}
@media (max-width: 1200px) {
  #kn-banner {
    background-size: 780px;
    background-position: top 20px right;
  }
}
@media (max-width: 992px) {
  #kn-banner {
    background-size: 960px;
    background-position: top 90px right -100px;
  }
}
@media (max-width: 767px) {
  #kn-banner {
    background-size: 1300px;
    background-position: top 80px right -200px;
  }
}
#kn-banner h1 {
  font-family: ff-dagny-web-pro, sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 4rem;
}
/*Breadcrumb Styles
=================================*/
.breadcrumb {
  background-color: transparent;
  padding: 0.75rem 0;
  margin-bottom: 0;
}
.breadcrumb {
  background-color: transparent;
  padding: 0.75rem 0;
  margin-bottom: 0;
}
.breadcrumb-item.active {
  color: rgb(42, 48, 53);
}
/*Background Color Styles
=================================*/
.bg-navy {
  background-color: rgb(44, 46, 76);
}
.bg-coral {
  background-color: rgb(255, 87, 100);
}
.bg-grey {
  background-color: rgb(218, 221, 224);
}
.border-top {
  border-top: 1px solid rgb(240, 240, 240);
}
.border-bottom {
  border-bottom: 1px solid rgb(240, 240, 240);
}
/*Text Color Styles
=================================*/
.text-navy {
  color: rgba(44, 46, 76, 1) !important;
}
.text-coral {
  color: rgba(255, 87, 100, 1) !important;
}
/*Button Styles
=================================*/
.btn-outline-pill {
  border: 1px solid rgb(240, 240, 240);
  border-radius: 30px;
  padding: 0.375rem 1rem;
  color: rgb(153, 160, 166);
  font-size: 14px;
  min-height: 35px;
}
.btn-outline-pill:hover {}
.btn-outline-coral {
  border: 1px solid rgb(255, 87, 100);
  color: rgb(255, 87, 100) !important;
}
.btn-outline-coral:hover {
  background-color: rgb(255, 87, 100);
  border: 1px solid rgb(255, 87, 100);
  color: rgb(255, 255, 255) !important;
}
.btn-pill {
  background-color: rgb(153, 160, 166);
  border: 1px solid rgb(153, 160, 166);
  padding: 0.375rem 1rem;
  border-radius: 30px;
  color: rgb(255, 255, 255);
  font-size: 14px;
}
.btn-pill:hover {
  background-color: rgb(42, 48, 53);
  color: rgb(255, 255, 255);
}
.btn-coral {
  background-color: rgb(255, 87, 100);
  border: 1px solid rgb(255, 87, 100);
  color: rgb(255, 255, 255) !important;
}
.btn-coral:hover {
  background-color: rgb(255, 121, 131);
  border: 1px solid rgb(255, 121, 131);
  color: rgb(255, 255, 255);
}
.btn-icon {
  width: 35px;
  height: 35px;
  border: 1px solid rgb(240, 240, 240);
  border-radius: 50%;
  color: rgb(153, 160, 166);
  font-size: 14px;
  padding: 0.45rem;
}
.btn-social {
  width: 45px;
  height: 45px;
  border: 1px solid rgb(240, 240, 240);
  border-radius: 50%;
  color: rgb(153, 160, 166);
  font-size: 14px;
  padding: 0.6rem;
}
input.btn-link {
  padding: 0;
  font-size: 14px;
  color: rgb(153, 160, 166);
}
input.btn-link:hover {
  color: rgb(42, 48, 53);
  text-decoration: none;
}
/*Menu Button Styles
=================================*/
.btn-menu {
  background-color: transparent;
  border-top: 1px solid rgb(240, 240, 240);
  border-bottom: 1px solid rgb(240, 240, 240);
  border-radius: 0;
  padding: 0.5rem .75rem;
  font-size: 14px;
  font-weight: 600;
  color: rgb(153, 160, 166);
  text-align: left;
}
.btn-menu:hover, .btn-menu:active, .btn-menu.active, .btn-menu:focus, .btn-menu.focus {
  outline: none;
  box-shadow: none;
  color: rgb(42, 48, 53);
}
/*Caret Toggle Styles
=================================*/
[data-toggle="collapse"][aria-expanded="true"] > .rotate-collapse {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}
/*Log in Form Styles
=================================*/
.login-form .form-control {
  border-radius: 0;
  border: none;
  border-bottom: 1px solid #ced4da;
}
/*Card Link Styles
=================================*/
a.card {
  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
  text-decoration: none;
}
a.card:hover, a.card:active {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
a.card:focus, a.card.focus {
  box-shadow: none;
  opacity: .75;
}
/*Alert Styles
=================================*/
.alert-success {
  background-color: rgba(168, 202, 133, .25);
  color: rgb(42, 48, 53);
  border-color: rgb(168, 202, 133);
  border-color: transparent;
}
.alert-danger {
  background-color: rgba(255, 87, 100, .25);
  color: rgb(42, 48, 53);
  border-color: rgb(255, 87, 100);
  border-color: transparent;
}
.close {
  text-shadow: none;
}
.close:focus, .close.focus {
  outline: none;
}
/*Tag Link Styles
=================================*/
a.badge-coral {
  background-color: rgb(255, 87, 100);
  color: rgb(255, 255, 255);
  font-weight: 400;
  padding: .25rem .5rem;
}
/*Table Styles
=================================*/
.table {
  color: rgb(42, 48, 53);
}
.table-items-list {
  color: rgb(42, 48, 53);
}
.table-items-list thead th {
  border-bottom: 2px solid rgb(240, 240, 240);
}
.table-items-list th, .table-items-list td {
  border-top: 1px solid rgb(240, 240, 240);
}
.table-items-list tbody {
  border-bottom: 1px solid rgb(240, 240, 240);
}
.table-striped-blue tbody tr:nth-of-type(odd) {
  background-color: rgba(50, 161, 218, 0.05);
}
/*Form Styles
=================================*/
.list-item {}
.list-item .form-control {
  border-radius: 0;
  border: 1px solid rgb(240, 240, 240);
  color: rgb(42, 48, 53);
}
@media (max-width: 992px) {
  .list-item {
    border: 1px solid rgb(240, 240, 240);
    padding: 1rem;
  }
}
.form .form-control {
  border-radius: 0;
  border: 1px solid rgb(240, 240, 240);
  color: rgb(42, 48, 53);
}
.form .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: rgb(204, 204, 204);
  opacity: 1; /* Firefox */
}
.form .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: rgb(204, 204, 204);
}
.form .form-control::-ms-input-placeholder { /* Microsoft Edge */
  color: rgb(204, 204, 204);
}
.form-quantity {
  width: 90px;
}
.form-quantity > .input-group-sm > .form-control, .form-quantity > .input-group-sm > .custom-select, .form-quantity > .input-group-sm > .input-group-prepend > .input-group-text, .form-quantity > .input-group-sm > .input-group-append > .input-group-text, .form-quantity > .input-group-sm > .input-group-prepend > .btn, .form-quantity > .input-group-sm > .input-group-append > .btn {
  border-radius: 0;
}
.form-quantity .input-group-text {
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(240, 240, 240);
  color: rgb(42, 48, 53);
}
.form-quantity .form-control {
  border: 1px solid rgb(240, 240, 240);
  color: rgb(42, 48, 53);
}
.form .custom-control-input:checked ~ .custom-control-label::before {
  color: rgb(255, 255, 255);
  border-color: rgb(50, 161, 218);
  background-color: rgb(50, 161, 218);
}
.form .custom-checkbox .custom-control-label::before {
  border-radius: 0;
}
/*Footer Styles
=================================*/
.footer a:link, .footer a:visited {
  color: rgb(153, 160, 166);
}
.footer a:hover, .footer a:active, .footer a.active, .footer a:focus, .footer a.focus {
  text-decoration: none;
  color: rgb(42, 48, 53);
}