/*
Theme Name: The twoScript default theme
Theme URI: https://twoscript.nl
Author: twoScript
Author URI: https://twoscript.nl
Description: The default custom theme for twoScript
Version: 1.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ts_theme
*/
* {
  margin: 0;
  padding: 0;
}

.slick-slider * {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* Standaard */
}

h1, h2, h3, h4, h5, h6, p {
  color: white;
}

body {
  background-color: #040404 !important;
}

.btn {
  padding: 9px 20px;
  border-radius: 0.375rem;
}

.content-block {
  max-width: 1900px;
  width: 80%;
  margin: 80px auto;
}

.border-radius {
  border-radius: 0.375rem;
}

section {
  padding-top: 3em;
  padding-bottom: 3em;
}

.btn-primary {
  background-color: #182354;
  color: white;
  border: 1px solid transparent;
}

.btn-invert-primary {
  background-color: white;
  color: #182354;
  border: 1px solid #182354;
}

.btn-primary:hover {
  background-color: white;
  color: #182354;
  border: 1px solid #182354;
}

.btn-invert-primary:hover {
  background-color: #182354;
  color: white;
  border: 1px solid transparent;
}

text-primary {
  color: "primary";
}

.btn-secondary {
  background-color: #18A0FB;
  color: white;
  border: 1px solid transparent;
}

.btn-invert-secondary {
  background-color: white;
  color: #18A0FB;
  border: 1px solid #18A0FB;
}

.btn-secondary:hover {
  background-color: white;
  color: #18A0FB;
  border: 1px solid #18A0FB;
}

.btn-invert-secondary:hover {
  background-color: #18A0FB;
  color: white;
  border: 1px solid transparent;
}

text-secondary {
  color: "secondary";
}

.btn-tertiary {
  background-color: #F5AE66;
  color: white;
  border: 1px solid transparent;
}

.btn-invert-tertiary {
  background-color: white;
  color: #F5AE66;
  border: 1px solid #F5AE66;
}

.btn-tertiary:hover {
  background-color: white;
  color: #F5AE66;
  border: 1px solid #F5AE66;
}

.btn-invert-tertiary:hover {
  background-color: #F5AE66;
  color: white;
  border: 1px solid transparent;
}

text-tertiary {
  color: "tertiary";
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  color: white;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.overlay a {
  text-decoration: none;
}

.imgholder-img {
  height: 250px;
  object-fit: cover;
}

.slider-bg {
  position: relative;
}

.Bologna {
  font-family: "Bologna Script", cursive !important;
}

.home .Bologna {
  display: none;
}

.Bolognaanimation {
  font-family: "Bologna Script", cursive !important;
  border-right: 2px solid;
  white-space: nowrap;
  width: 0;
  animation: type 4s steps(15, end), blink 0.5s step-end infinite alternate;
  font-size: 6rem;
  padding: 25px;
  position: absolute;
  overflow: hidden;
  text-align: center;
}

@keyframes type {
  from {
    width: 0;
  }
  to {
    width: 100% !important; /* Adjust this to the length of your text */
  }
}
@keyframes blink {
  from {
    border-color: transparent;
  }
  to {
    border-color: inherit;
  }
}
.btn-primary {
  background-color: #F1AE00 !important;
  border-color: #F1AE00 !important;
}

.btn-primary:hover {
  background-color: #D69C00 !important;
  border-color: #D69C00 !important;
}

.text-btn {
  color: rgba(241, 174, 0, 0.63) !important;
}

.text-btn:hover {
  color: #F1AE00 !important;
}

.woocommerce .button {
  background-color: #F1AE00 !important;
  border-color: #F1AE00 !important;
  color: white !important;
}

.default-collor {
  color: #6b472c;
  text-shadow: -0.5px -0.5px 0 #d1ae98, 0.5px -0.5px 0 #d1ae98, -0.5px 0.5px 0 #d1ae98, 0.5px 0.5px 0 #d1ae98;
}

.wpcf7-response-output {
  color: white !important;
}

@media (min-width: 970px) {
  .product-template-default main.site-main div.product {
    display: table;
  }
}
#header {
  width: 100%;
  z-index: 9999;
}
#header .row {
  display: flex;
  align-items: center;
  max-width: 1900px;
  width: 80%;
  margin: 0 auto;
}
#header .logo img {
  height: 100px;
  width: auto;
  padding: 10px;
}
#header .desktop-menu {
  display: flex;
}
@media (max-width: 960px) {
  #header .desktop-menu {
    display: none;
  }
}
#header .menu {
  display: flex;
  align-items: center;
  margin: 0;
}
#header .custom-menu-class {
  list-style: none;
  margin: 0;
  padding: 0;
}
#header .custom-menu-class li {
  position: relative;
  list-style: none;
  margin-right: 20px;
}
#header .custom-menu-class a {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s ease-in-out;
}
#header .custom-menu-class a:hover {
  color: #6b472c;
}
#header .custom-menu-class .sub-menu {
  display: none; /* Hide sub-menu by default */
  position: absolute; /* Position sub-menu below parent menu item */
  top: 100%; /* Position at the bottom of the parent menu item */
  left: 0; /* Align to the left side of the parent menu item */
  background-color: #000000; /* Background color for sub-menu */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  z-index: 1000; /* Ensure sub-menu appears above other content */
  width: 200px; /* Set a fixed width for the sub-menu, adjust as needed */
}
#header .custom-menu-class li:hover > .sub-menu {
  display: block; /* Show sub-menu when hovering over parent menu item */
}
#header .custom-menu-class {
  /* Sub-menu item styles */
}
#header .custom-menu-class .sub-menu > li {
  list-style: none; /* Remove list item styles */
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  border-top: 1px solid rgba(22, 22, 22, 0.7); /* Add a top border to separate sub-menu items */
}
#header .custom-menu-class .sub-menu > li a {
  display: block; /* Make entire sub-menu item clickable */
  padding: 10px 15px; /* Add padding to sub-menu items */
  color: #ffffff; /* Set sub-menu item color */
  transition: background-color 0.3s ease-in-out; /* Smooth background color transition */
}
#header .custom-menu-class .sub-menu > li a:hover {
  background-color: #6b472c; /* Change background color on hover */
}
#header .login-register {
  justify-content: end;
  display: flex;
  margin-left: auto;
}
#header .login-register a:first-child {
  margin-right: 15px;
}
#header #mobile-menu {
  display: none;
}
#header #mobile-menu .menu {
  flex-direction: column;
  align-items: start;
  padding: 0;
}
#header #mobile-menu .menu .custom-menu-class {
  width: 100%;
}
#header #mobile-menu .menu .custom-menu-class li {
  padding: 20px 0;
  border-top: 1px solid #ffffff;
  width: 100%;
}
#header #mobile-menu .menu .custom-menu-class li a {
  width: 80%;
  margin: 0 auto;
  display: block;
}
#header #mobile-menu-icon {
  display: none;
}
@media (max-width: 960px) {
  #header #mobile-menu-icon {
    display: flex;
    align-items: end;
    flex-direction: column;
  }
}
#header #mobile-menu-icon .bar {
  width: 25px;
  height: 3px;
  background-color: #ffffff; /* Adjust color as needed */
  margin: 2px 0;
}

/* Apply a fading gradient background at the top */
.scroll-fade {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px; /* Adjust the height of the fading effect */
  background: #040404;
  -webkit-box-shadow: 0px 200px 300px 200px rgb(22, 22, 22);
  -moz-box-shadow: 0px 200px 300px 200px rgb(22, 22, 22);
  box-shadow: 0px 200px 300px 200px rgb(22, 22, 22);
}

.slideshow {
  position: relative;
  overflow: hidden;
}
.slideshow .slider {
  overflow: hidden;
}
.slideshow .slider img {
  height: 100%;
}
.slideshow .slider-item {
  height: 200px;
  position: relative;
}
.slideshow .slider-item .hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s;
}
.slideshow .slider-item .hover-effect:hover {
  opacity: 1;
}

.slider-content {
  color: white;
  height: 100%;
  width: 20%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  background-color: rgba(22, 22, 22, 0.94);
  z-index: 2;
  box-shadow: 25px 2px 300px 200px rgb(22, 22, 22);
}
@media (max-width: 768px) {
  .slider-content {
    bottom: 0;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    background-color: rgba(22, 22, 22, 0.5);
    box-shadow: 25px 2px 300px 200px rgba(22, 22, 22, 0.5);
  }
}

.slider-botom .slick-list .slick-track {
  float: right !important;
}

.black-bg-logo {
  height: 500px;
  background-color: #040404;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Bologna Script", cursive;
}

.initial-hidden {
  display: none;
}

.slick-slide {
  margin: 0 27px;
}

.slick-list {
  height: 200px;
  margin: 0 -27px;
}

.btn-gal {
  margin: 10px;
  font-size: 50px;
  color: #777777;
}
@media (max-width: 768px) {
  .btn-gal {
    color: #fff;
  }
}

.btn-gal:hover {
  color: #6b472c;
}

#svg-container {
  position: absolute;
}

#svg-container svg {
  width: 100%;
  height: auto;
}

* {
  box-sizing: border-box;
}

.scroll-filler {
  height: 80vh;
}

.item:after {
  content: "";
  display: block;
  height: 100vh;
  margin-bottom: -100vh;
}

.item {
  position: relative;
}

.item:last-of-type:after {
  display: none;
}

.item:last-of-type {
  margin-bottom: 0;
}

.image-holder {
  position: sticky;
  top: 0;
  float: left;
  overflow: hidden;
  width: 50%;
  height: 100vh;
}

.image-holder img {
  position: relative;
  height: 70%;
  width: auto;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 15%;
  margin-bottom: 15%;
}

.text-holder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120vh;
  margin: 0 10%;
  padding: 1em;
}

.woocommerce {
  color: white;
}

.woocommerce-cart-form {
  margin-top: 2em;
}

.related {
  clear: both;
}

.woocommerce-checkout-payment {
  background: #292929 !important;
}

div.payment_box {
  background: #4b4b4b !important;
  color: white !important;
}

.product_title {
  color: #37a4a4 !important;
}

.up-sells {
  clear: both !important;
}

.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
  padding: 5px;
  border-radius: 4px;
}

.mijn-masonry-container {
  clear: both;
  margin: auto;
}

.mijn-masonry-container .product {
  width: calc(33.3333333333% - 20px) !important;
  margin: 10px !important;
}
@media (max-width: 960px) {
  .mijn-masonry-container .product {
    width: calc(50% - 20px) !important;
  }
}

.woocommerce div.product {
  display: inline-block;
  max-width: 100%;
}

.banner-kunst {
  text-align: center;
  color: #fff;
}

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

.request-form {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 20px;
  margin-top: 30px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  font-weight: bold;
}

#menu-footer-menu {
  list-style-type: none;
  display: flex;
  align-items: center;
  margin: 0;
}
#menu-footer-menu li {
  position: relative;
  list-style: none;
}
#menu-footer-menu li:not(:last-child)::after {
  content: "|";
}