/*
Theme Name: Elixer Recepten
Theme URI: https://elixermedia.nl.nl/
Description: Elixer Recepten - Thema
Author: Elixer Media
Author URI: https://elixermedia.nl/
Version: 2.0
*/

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");

/* =WordPress Core
-------------------------------------------------------------- */
.alignnone{margin:0}
.aligncenter,div.aligncenter{display:block;margin:5px auto 5px auto}
.alignright{float:right;margin:0 0 15px 15px}
.alignleft{float:left;margin:0 15px 15px 0}
.aligncenter{display:block;margin:5px auto 5px auto}
a img.alignright{float:right;margin:0 0 15px 15px}
a img.alignnone{margin:0}
a img.alignleft{float:left;margin:0 15px 15px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{max-width:100%}
.wp-caption.alignnone{margin:0}
.wp-caption.alignleft{margin:0 15px 15px 0}
.wp-caption.alignright{margin:0 0 15px 15px}
.wp-caption img{border:0 none;height:auto;margin:0;max-width:100%;padding:0;width:auto}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

/* Custom CSS
-------------------------------------------------------------- */
body{
	color:#000;
	font-family:'Raleway',sans-serif;
	font-size:15px;
	font-weight:300;
	line-height:30px;
	padding-top: 106px;
	background: #f7f7f7;
}

article h1 {font-size: 1.5rem}
article h2 {font-size: 1.25rem}
article h3, article h4 {font-size: 1.05rem}

.socialblock {color:#fff;padding:3rem 0}
.socialblock:hover{color:#fff}
.socialblock span{font-weight:700;font-size:2.5rem}
.socialblock p{margin:0}

.fixed-top.navbar{box-shadow:0 3px 2px -2px rgba(0, 0, 0, 0.3)}
.navbar-brand img{max-height:70px;width:auto;margin:5px 0}
.navbar-dark .navbar-nav .active>.nav-link{color:#fff;font-weight: 700}

.fixed-top{
  background-color: #fff !important;
  box-shadow: 0 3px 2px -2px rgba(0, 0, 0, 0.3);
}

.navbar.fixed-top a{color:#000}
.navbar.fixed-top a:hover{color:#000;opacity:0.5}
.navbar.fixed-top.navbar-dark .navbar-nav .active>.nav-link{color:#000;font-weight: 700}

@media (max-width: 767.98px) {
	body{padding-top: 96px}
	.fixed-top #logo_norm{max-height:60px;width:auto}
}

.navbar.fixed-top.navbar-dark .navbar-toggler{color:#fff; border-color:#fff}

.masthead{background-position:center center;background-repeat:no-repeat;background-size:cover;background-attachment:scroll;height:25vh}

.menu-block{background:#00ace7;}
.menu-block a{color:#fff!important}

/* Footer */
footer h5{font-weight:700;color:#fff}

footer,
footer h5,
footer a,
footer a:hover,
footer p{color:#fff}

footer a{opacity:1}
footer a:hover{opacity:0.8}

#copyright,
#copyright a{color:#000}
#copyright p{margin:0}

/* Globals */
.pagination{margin-bottom: 0}
.b-shadow{box-shadow: 4px 3px 5px 0px rgba(0, 0, 0, 0.03)}
.img-responsive{max-width:100%;height:auto}
.bg-cover{-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover}
.text-shade{text-shadow:1px 1px 3px rgba(0,0,0)}
.grecaptcha-badge { visibility: hidden; }
.max-width-60{max-width: 60px; height: auto; }

.star-rating input[type="radio"] {
	display: none;
  }
  
  .star-rating label:before {
	content: "\2606";
	font-size: 1.5rem;
	color: #ddd;
	display: inline-block;
  }
  
  .star-rating input[type="radio"]:checked + label:before {
	content: "\2605";
	color: #FFD700;
  }

.card-title a{color: var(--primary-color)}

/* Buttons */
.btn-em-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-text-color);
    transition: background 0.3s ease, border-color 0.3s ease;
}

	.btn-em-primary:hover {
		background: color-mix(in srgb, var(--primary-color) 80%, black 20%);
		border-color: color-mix(in srgb, var(--primary-color) 80%, black 20%);
		color: var(--primary-text-color);
	}

.btn-em-secondary{
	background: var(--secondary-color);
	border-color: var(--secondary-color);
	color: var(--secondary-text-color);
	transition: background 0.3s ease, border-color 0.3s ease;
}
	.btn-em-secondary:hover{
		background: color-mix(in srgb, var(--secondary-color) 80%, black 20%);
		border-color: color-mix(in srgb, var(--secondary-color) 80%, black 20%);
		color: var(--secondary-text-color);
	}

.bg-em-primary{background: var(--primary-color);color: var(--primary-text-color)}
.bg-em-secondary{background: var(--secondary-color);color: var(--secondary-text-color)}
.bg-em-tagline{background: var(--outline-color);color: var(--outline-text-color)}

.list-inline-item + .list-inline-item::before {
    content: "|";
    margin: 0 6px;
}

.list-inline-item a {
    text-decoration: none;
    color: var(--primary-color);
    transition: color 0.3s ease;
}

.list-inline-item a:hover {
    color: color-mix(in srgb, var(--primary-color) 80%, black 20%);
}

.list-inline-item:not(:last-child) {
    margin-right: 0;
}