@font-face {
  font-family: DIN Round Pro Medi;
  src: url(../css/fonts/gonso-fonts/DINRoundPro-Medi.woff);

}

@font-face {
  font-family: DIN Round Pro Light;
  src: url(../css/fonts/gonso-fonts/DINNextRoundedLTPro-Light.woff);
  
}

:root {
  --background-color-1: #000 !important; /* background-color */
  --background-color-2: #ececec; /* background-color */
  --background-color-3: #fff; /* background-color */
  --background-color-4: #ffce2e; /* background-color */
  --border-color: #000; /* border-color */
  --text-color-1: #ffffff; /* text-color */
  --text-color-2: #222; /* text-color */
  --text-color-3: #ffce2e; /* text-color */
  --link-color: #ee9000; /* link-color */
  --button-color: #ee9000; /* btn-color */
  --fonts: "DIN Round Pro Medi", sans serif;
  --fonts-1: "DIN Round Pro Light", sans serif;
}

body,
html {
  font-family: var(--fonts)!important;
  font-weight: 400;
  font-size: 14px;
}

#index .container {
  width: 100%;
}

#content-wrapper {
  background: unset !important;
}

#index section .page-home {
  margin-bottom: 5%;
}

#wrapper {
  background: unset;
  display: unset !important;
}

#wrapper .breadcrumb {
  margin: 20px 15px;
}

.material-icons {
  color: var(--text-color-2);
}

a {
  color: var(--text-color-2);
  font-weight: 700;
}

a:hover {
  color: var(--text-color-3);
}

a:focus {
  color: var(--text-color-3);
  text-decoration: none;
}

.btn-primary:hover {
  background-color: var(--text-color-3);
}

.pagination .current a {
  color: var(--text-color-2);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--fonts);
  font-weight: 600;
}

@media screen and (min-width: 765px) {
  #main {
    margin-top: 10% !important;
    margin-bottom: 14% !important;
  }
}

@media screen and (min-width: 1000px) {
  body,
  html {
    font-size: 14px;
  }
}

/*header */
/* header */
.nav-container {
  width: 1400px !important;
}

.header-banner,
.header-nav,
#header,
#header .header-nav .blockcart {
  border: unset !important;
  background: unset !important;
  
}

#header .header-nav {
  max-height: 60px;
  background: var(--background-color-1) !important;
}

.header-top {
  background: var(--background-color-3) !important;
  padding: 1rem !important;
}

.container-top {
  width: 1400px !important;
}

.header-top-right {
  text-align: right;
}

#header .top-logo img {
  max-height: 5rem!important;
}

#header .top-logo {
  justify-content: center;
}

#header .header-nav #menu-icon .material-icons {
  color: var(--text-color-1);
}

.cart-products-count {
  color: var(--text-color-1);
}

.left-nav {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 50px;
}

.right-nav {
  margin-top: unset;
  height: 50px;
  align-items: center;
}

.left-nav *,
.right-nav * {
  color: var(--text-color-1) !important;
  font-weight: 400;
  font-size: 12px;
}

.left-nav *,
.right-nav * a {
  font-family: var(--fonts);
}

#header a:hover,
#header li:hover,
#footer a:hover,
#footer li:hover {
  color: var(--text-color-3) !important;
}

#_desktop_contact_link {
  margin-left: 5%;
}

#_mobile_contact_link {
  font-family: var(--fonts);
}

#header .header-nav .cart-preview .shopping-cart {
  color: var(--text-color-1) !important;
}

.user-info .material-icons {
  color: var(--text-color-1) !important;
}

#header .header-nav .material-icons {
  line-height: normal;
}

#header .header-nav .blockcart {
  font-family: var(--fonts);
}

.language-selector-wrapper {
  margin-left: 8%;
  font-family: var(--fonts);
  font-size: 1rem;
}

.dropdown select {
  background: var(--background-color-1) !important;
  color: var(--text-color-1) !important;
}

#header .language-selector .dropdown-menu .dropdown-item:hover {
  color: var(--text-color-2) !important;
}

@media screen and (max-width: 1024px) {
  .nav-container {
    width: unset !important;
  }

  .container-top {
    width: unset !important;
  }
}

@media screen and (min-width: 776px) {
  .left-nav *,
  .right-nav * {
    font-size: 14px;
  }

  .logo {
    width: 120px;
  }

  #_desktop_logo {
    text-align: center;
  }

  #header .header-nav .user-info {
    margin-top: unset;
  }

  #header .header-nav .language-selector {
    margin-top: unset;
  }

  .svg-inline--fa {
    margin: 0 2% 0 2%;
  }
  .language-selector-wrapper .language-selector .dropdown-menu .dropdown-item {
    color: var(--text-color-2) !important;
  }
  #header .header-nav .language-selector {
    margin-top: 1px !important;
  }
}

/* start tck USP's */
#usps {
  background: var(--background-color-2) !important;
}

.usps-top {
  width: 100%!important;
}

.usp {
  /* padding-top: 15px; */
  display: flex;
  align-items: center;
  color: var(--text-color-2) !important;
  justify-content: center;
  flex-direction: column;
}

.usp p {
  margin-top: 15px;
  color: var(--text-color-2) !important;
  text-align: center;
  font-size: 0.7rem;
}

.fa-3x {
  font-size: 2rem;
}

/* einde tck USP's */

/* footer */

.grijze-balk {
  height: 60px;
  background: var(--background-color-2);
}

.copy {
  background: var(--background-color-2);
  height: 50px;
}

#footer {
  color: var(--text-color-2) !important;
  font-size: 0.875rem;
  padding-top: 1rem;
  font-family: var(--fonts);
  
}

#footer .container {
  width: 100%;
}

.footer-container {
  background: var(--background-color-3) !important;
}

#footer h3 {
  text-transform: uppercase;
  color: var(--text-color-3) !important;
  text-align: center;
  margin-top: 3%;
  font-weight: 400;
}

#footer a {
  color: var(--text-color-2) !important;
  font-family: var(--fonts-1);
  text-align: center;
  font-weight: 400;
}

#footer span {
  font-family: var(--fonts-1);
}

#footer .fa {
  color: var(--text-color-2) !important;
}

#footer ul {
  text-align: center;
}

#ps_banner {
  display: block;
  text-align: center;
  padding-top: 5vh;
}

#contact-infos {
  text-align: center;
}

.betalingslogos {
  width: 50px;
  padding: 1%;
  border-radius: 10px;
}

.verzendpartner img {
  width: 100px;
  padding: 1%;
  border-radius: 15px;
}

.mb-2 {
  margin-bottom: 0 !important;
}

.footer-container .text-center {
  text-align: center;
}

@media screen and (min-width: 767px) {

  
  /*desktop*/

  #footer {
    background: var(--background-color-1) !important;
    color: var(--text-color-2) !important;
    font-size: 0.875rem;
    padding-top: 0rem !important;
    margin-top: 9.5rem;
  }

  #footer .footer-container .container {
    width: 1400px;
    margin-bottom: 3%;
    text-align: center;
  }

  #footer h3 {
    float: unset;
    margin-bottom: unset;
    text-transform: uppercase;
    margin-bottom: 20px;
  }

  #footer a {
    color: var(--text-color-2) !important;
    font-weight: 400;
  }

  #footer .fa {
    color: var(--text-color-2) !important;
  }

  #ps_banner {
    display: block;
    text-align: center;
    padding-top: 0;
  }

  .betaalmethoden {
    margin-bottom: 10%;
  }
}

@media screen and (min-width: 600px) {
  /* tablet */
}

/* Winkelwagen */

.cart-grid-body a.label:hover {
    color: var(--text-color-2)!important;
}

.btn-primary {
    background-color: var(--background-color-4)!important;
    color: var(--text-color-2)!important;
    font-weight: 400;
  }

  .btn-primary, .btn-secondary, .btn-tertiary {
    font-weight: 400!important;
  }

  #cart .promo-code-button a {
    color: var(--text-color-3)!important;
    font-weight: 400;
  }
  
  #cart .promo-code-button a:hover {
    color: var(--text-color-2);
  }
  
  #cart .product-price {
    color: var(--text-color-2);
  }

/*inlog*/
#main .page-header {
  text-align: center;
  margin-top: 5%;
}

.page-customer-account #content .forgot-password a {
  color: var(--text-color-2);
}

#submit-login {
  background: var(--background-color-1);
}

.page-customer-account #content .no-account a {
  color: var(--text-color-2);
}

.form-footer {
  text-align: center;
}

.form-control:focus {
  outline: 0.1875rem solid var(--border-color) !important;
  border-color: var(--border-color) !important;
}

#back-to-login {
  color: var(--text-color-2) !important;
}

.forgotten-password .form-fields .center-email-fields button {
  background: var(--background-color-1) !important;
}

@media screen and (min-width: 600px) {
  .forgotten-password .form-fields label.required {
    width: 170px !important;
  }
}

/* CMS pagina's */

.page-content.page-cms {
  font-family: var(--fonts);
}

.page-content.page-cms ul {
  list-style-type:circle!important;
}

ol {
  font-size: 12px;
}

.page-content.page-cms ul p {
  font-size: 13px!important;
}

#cms a {
  color: var(--link-color);
}

/* checkout */



.step-number {
  background-color: var(--background-color-1)!important;
  color: var(--text-color-1);
}

.custom-radio input[type="radio"]:checked+span {
  background-color: var(--background-color-1)!important;
}

.done {
  color: var(--text-color-2)!important;
}

body#checkout section.checkout-step .address-item.selected {
  border-color: var(--border-color)!important;
}

#checkout-personal-information-step a {
  color: var(--text-color-2);
}

#checkout-personal-information-step a:hover {
  color: var(--text-color-3)!important;
}

#js-checkout-summary span {
  font-size: 1rem;
}
#js-checkout-summary p {
  font-size: 1rem;
}
#js-checkout-summary a {
  color: var(--text-color-2);
}
#js-checkout-summary a:hover {
  color: var(--text-color-3)!important;
}

.js-conditions-to-approve a {
  color: var(--text-color-2)!important;
}
.js-conditions-to-approve a:hover {
  color: var(--text-color-3)!important;
}
#checkout-payment-step a {
  color: var(--text-color-1);
}
#checkout-payment-step a:hover {
  color: var(--text-color-1);
}