/*
Theme Name: Zakra Child
Theme URI: https://zakratheme.com/
Template: zakra
Author: ThemeGrill
Author URI: https://themegrill.com
Description: Zakra is flexible, fast, lightweight and modern multipurpose theme that comes with many starter free sites (currently 10+ free starter sites and more will be added later) that you can use to make your site beautiful and professional. Check all the starter sites at https://zakratheme.com/demos. Suitable for personal blog, portfolio, WooCommerce stores, business websites and niche-based sites (like Cafe, Spa, Charity, Yoga, Wedding, Dentist, Education etc) as well. Works with Elementor plus other major page builders so you can create any layout you want. The theme is responsive, Gutenberg compatible, SEO friendly, translation ready and major WordPress plugins compatible.
Tags: one-column,two-columns,left-sidebar,right-sidebar,custom-background,custom-colors,custom-logo,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments,translation-ready,blog,news,e-commerce,rtl-language-support
Version: 1.4.6.1594636276
Updated: 2020-07-13 10:31:16

*/

@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap");

.elementor-page-links {
  display: none;
}

.post-page-numbers {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.post-page-numbers a:hover {
  color: white;
}

.app-logo {
  width: 50px;
  margin-right: 20px;
}

.app-container {
  display: flex;
  align-items: center;
  font-weight: bold;
  margin: 15px 0;
  cursor: pointer;
}

.app-container i {
  transform: translateX(-25px);
}

.app-container:hover i {
  transform: translateX(0px);
}

.app-container img {
  transition: all 250ms ease-in;
}

.app-container:hover img {
  transform: rotate(10deg);
}

.app-container:hover a {
  color: #108eed;
}

.app-container a {
  font-weight: bold;
}

.app-arrow {
  position: absolute;
  right: 0;
}

.card-container {
  min-height: 114px;
  background-color: #6582bf;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  border-radius: 10px;
  position: relative;
  background-size: cover;
}

.card-background {
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 5px 5px 10px 10px;
  width: 100%;
  padding: 7px 10px;
  z-index: 1;
  transition: all 200ms ease;
}

.card-background:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.card-background:hover a {
  text-decoration: underline;
}

.card-link {
  font-weight: bold;
  color: white;
  line-height: 0.5px;
  z-index: 1;
}

.card-link-container {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}

.post-content {
  position: relative;
}

.post-content img {
  margin-bottom: 1.6em;
}

.post-page-numbers:hover {
  background-color: #108eed;
  color: white;
}

.sidebar-list {
  list-style: none;
  text-decoration: underline;
  margin: 20px 0;
}

.sidebar-list li {
  padding: 5px 0;
}

.sidebar-list-item a {
  transition: all 100ms ease;
}

.app-arrow-right {
  font-size: 16px;
  color: #ebedeb;
  border-radius: 50%;
  padding: 7px;
  background-color: #108eed;
  margin-left: 10px;
  transition: all 350ms ease;
}

.beginscherm-link {
  color: rgb(16, 142, 237);
  font-size: 20px;
  font-weight: bold;
}

.beginscherm-link:hover {
  text-decoration: underline;
}

.overzicht-knop {
  background-color: #108eed;
  border-radius: 10px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  margin-top: 25px;
  line-height: 1.4;
  min-height: 50px;
}

.overzicht-pijl {
  color: white;
  margin-right: 20px;
}

.overzicht-knop:hover {
  color: rgba(77, 77, 77, 1);
  background-color: #ebedeb;
}

.overzicht-knop:hover .overzicht-tekst {
  color: rgba(77, 77, 77, 1);
  text-decoration: underline;
}

.overzicht-knop:hover .overzicht-pijl {
  color: rgba(77, 77, 77, 1);
}

.overzicht-tekst {
  color: white;
  font-weight: bold;
}

.categorie_icoon {
  width: 70px;
  height: 70px;
}

.categorie_icoon img {
  width: 70px;
  height: 70px;
}

.category-description {
  font-size: 19px;
  color: #131313;
}

.zoekresultaten-tekst {
  margin-bottom: 50px;
}

.tip {
  display: flex;
  padding: 20px;
  border-radius: 10px;
  background-color: #f0f0f0;
}

.tip p {
  margin: 0;
}

.tip-image {
  width: 43px;
  height: 43px !important;
  margin-right: 20px;
}

.link-breed::before {
  transition: all 200ms ease-in;
  color: #108eed;
  margin-right: 14px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
}

.link-breed {
  transition: all 300ms ease;
  width: 100%;
  padding: 11px 20px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(77, 77, 77, 1) 0%,
    rgba(60, 112, 139, 1) 50%,
    rgba(77, 77, 77, 1) 100%
  );
  background-size: 200% 100%;
}

.link-breed:hover:before {
  transition: all 200ms ease-in;
  color: white;
  margin-right: 14px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f054";
}

.post-content p a:hover {
  text-decoration: underline;
}
.post-content p a {
  text-decoration: underline;
  color: rgb(16, 142, 237);
}

.link-video::before {
  transition: all 200ms ease-in;
  color: white;
  margin-right: 14px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f144";
}

.link-video:hover:before {
  transition: all 200ms ease-in;
  color: white;
  margin-right: 14px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f144";
}

.link-bericht::before {
  content: "\f02e";
}

.link-bericht:hover:before {
  content: "\f02e";
}

.link-video-container {
  margin: 10px 0;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  transition: all 300ms ease;
  width: 100%;
  padding: 11px 20px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(77, 77, 77, 1) 0%,
    rgba(60, 112, 139, 1) 50%,
    rgba(77, 77, 77, 1) 100%
  );
  background-size: 200% 100%;
}

.link-breed {
  font-weight: bold;
  color: white;
  display: block;
  width: 100%;
}

.link-video-container:hover,
.link-breed:hover {
  background-position: 100%;
  color: white;
}

.link-video-container:hover .link-video::before {
  color: white;
}

.link-video-inner-container {
  display: flex;
  flex-direction: column;
}

.link-video-inner-container span {
  font-weight: 400;
  font-family: "Work Sans", sans-serif;
  text-transform: uppercase;
  font-size: 15px;
  color: white;
}

.link-video {
  font-size: 15px;
  font-weight: bold;
  color: white;
}

.link-video:hover {
  font-size: 15px;
  font-weight: bold;
  color: white;
}

.link-video-icon {
  order: 3;
  color: white;
  width: 30px;
  height: 30px;
  font-size: 30px;
}

.step-container {
  display: flex;
  gap: 15px;
}

.video-container {
  border: 3px solid #edeeed;
}

.progres-bar {
  height: 3px;
  background-color: #108eed;
  transform: translateY(-3px);
}

.not-progressed-bar {
  height: 3px;
  width: 100%;
  background-color: #edeeed;
}

.wpcf7-submit {
  height: 50px !important;
  width: 100% !important;
  font-weight: 600 !important;
  font-family: Work Sans !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background-color: #108eed !important;
  transition: 0.3s !important;
  margin-top: -30px !important;
}

.wpcf7-submit:hover {
  color: #ffffff !important;
  background-color: #424242 !important;
  text-decoration: underline !important;
}

.wpcf7-textarea {
  border-radius: 10px;
}

.image-border img {
  outline: 2px !important;
  outline-color: #edeeed !important;
  outline-style: solid !important;
}

.app-icon img {
  display: inline-block !important;
  width: auto !important;
  height: 60px !important;
}

/* Tekst in footer

.elementor-element-a3d065d p, h2, h3 {
  color: #ffffff !important;
}

*/

.inline-link {
  display: inline-block;
  font-family: Work Sans;
  font-weight: 600;
  padding: 0px;
  background-color: transparent;
  cursor: default;
}

.inline-link:hover {
  background-color: transparent;
}

.inline-link a {
  color: #188141;
  text-decoration: underline;
  text-decoration-color: #424242;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.inline-link a:hover {
  color: #424242;
  text-decoration: underline;
  text-decoration-color: #424242;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  transition: all 200ms ease;
}

.footer-iphone {
  color: white !important;
}

#post-250 .entry-content {
  padding: 100px 0 !important; 
}