@import url('https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900');



body {color: #231f20; font-family: 'Heebo', sans-serif;}
a {color: #333;}
a:hover{text-decoration: none;}

/* Other stuff */
.w-70 {width: 70% !important;}
.w-80 {width: 80% !important;}
.w-90 {width: 90% !important;}


/* Theme colors */
.bg-blue {background-color: #1a9fda;}
.bg-black {background-color: #231f20;}
.bg-pink {background-color: #eb1889;}
.bg-yellow {background-color: #f4e32d;}
.bg-orange {background-color: #f39732;}
.bg-green {background-color: #73bb44;}
.bg-grey {background-color: #f2f2f2;}
.bg-dark-grey {background-color: #ececec;}
.bg-darker {background-color: #2a2e31;}

.gradient-green-blue {background-color: #1a9fda; background-image: linear-gradient(141deg, #73bb44 0%, #1a9fda 51%, #1a9fda 75%); color: white; opacity: 0.95;}
.gradient-yellow-orange {background-color: #f4e32d; background-image: linear-gradient(141deg, #f4e32d 0%, #f39223 51%, #f39223 75%); color: white; opacity: 0.95;}

/* Buttons */
.btn {border-radius: 0px; min-width: 120px; padding: 8px 20px; clip-path: polygon(20% 0%, 80% 0%, 100% 0, 100% 100%, 80% 100%, 20% 100%, 0 100%, 0 0); transition: all 0.1s ease 0.2s;}
.btn:hover {clip-path: polygon(10% 0%, 90% 0%, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0% 80%, 0% 20%); transition:all 0.5s ease;}
.btn:active {clip-path: polygon(10% 0%, 90% 0%, 100% 20%, 100% 80%, 90% 100%, 10% 100%, 0% 80%, 0% 20%);}
.btn-dark {background-color: #2a2e31;}
.btn-primary {background-color: #1a9fda; border: 0px; color: #fff !important;}
.btn-primary:hover {background-color: #73bb44;}

/* Global stuff */
.bg-image {background-size: cover; background-position: center;}
.padding-top {padding-top: 150px;}
.padding-bottom {padding-bottom: 150px;}
.margin-top {margin-top: 150px;}
.margin-bottom {margin-bottom: 150px;}
.mini-padding-top {padding-top: 75px;}
.mini-padding-bottom {padding-bottom: 75px;}
.side-padding {padding: 0px 20px;}
.scroll-down {font-size: 60px;}
.scroll-down a {color: #333;}

/* Multi page stuff */
.tas-tegel {padding: 25px;}
.tas-tegel-inner {min-height: 350px;  }
.tas-tegel .tas-tegel-next {font-size: 180px; text-align: center; padding-top: 25px; padding-left: 15px; color:  #e8e8e8;}
/* Nav stuff */
.logo {height: 100px;}
.navbar .nav-link {padding: 5px 10px !important;}
.navbar-light .navbar-nav .nav-link {color: #231f20;}

/* Footer */
.footer-container {color: #333;}
.footer-container .footer-top {}
.footer-container .footer-bottom {border-top: 1px solid #e8e8e8; color: #5a5a5a;}
.footer-container a {color: #333;}

/* Homepage */
.homepage-header-image {padding: 0px 20px;}
.homepage-header-image .homepage-header-image-inner {height: 10vh;}

/* Diensten */
.dienst-icon {padding: 0px 80px 40px 80px; max-height: 190px; }
.dienst-icon img {width: 60px;}

/* Preview tas section */
.preview-tas-section {background-color: #e8e8e8;}

/* Product overview page */
.product-item-overview {}
.product-item {border: 1px solid #ced4da; background-color: #fff; margin-bottom: 20px; }
.product-item .product-item-image {min-height: 150px;}
.product-item h2 {font-weight: 300; font-size: 18px; padding-top: 10px;}
.product-item {font-weight: 300; min-height: 245px; padding: 5px;}
.product-item .product-item-title {padding-bottom: 0px;}

/* Product header */
.product-header-image-container {padding: 0px 20px;}
.product-header-image {min-height: 560px; }
.product-title {background-color: #fff; color: #6c757d; padding: 0px 20px; opacity: 0.75;}
.product-title-container {padding-top: 220px;}

/* Product contact section */
.product-contact-form input {margin-top: 10px; border-bottom:1px solid #fff !important; border-right: none; border-left: none; border-top:none; background: transparent; color: #fff;}
.product-contact-form .wpcf7-textarea {margin-top: 10px; border-bottom:1px solid #fff !important; border-right: none; border-left: none; border-top:none; background: transparent; color: #fff;}
.product-contact-form .wpcf7-submit {border: 1px #fff solid !important; color: #fff;}

.contact-product-page {background-color: #f5f5f5;}

/* About page */
.about-overlap-element {background-color: rgb(202, 218, 225); color: #354b54;}
/* About page werkwijzen */
.werkwijzen .werkwijzen-item {width: 100px; height: 100px; background-color: #73bb44; border-radius: 50%; margin-left: -10px;}
.werkwijzen .werkwijzen-item .stap {width: 100%; color: #fff; font-weight: 500; }
.werkwijzen .werkwijzen-verbinder {width: 80px; height: 10px; background-color: #73bb44; margin-left: -10px;}

/* Contact page */
.contact-page {background-color: #f39223; }

/* Contact form */
.contact-form input {max-width: 100% !important; border: 1px solid #eaeaea !important;}
.contact-form textarea {max-width: 100% !important; border: 1px solid #eaeaea !important;}
.contact-form label {font-weight: 300 !important;}
.contact-form button {font-weight: 300;}


/* Animations */

.animated-loop {
    animation-duration: 1s;
    animation-delay: 6s;
}