/**
 *	libraict medusa.css
 *	v1.0 - 16-10-2025 - Shadn Reda - Algemene layout met custom kleuren
 *	Copyright 2006 Medusa, Media Usage Advice B.V. All rights reserved.
 * 
 */

 /* menu header */
body {
  min-width: 320px;
}

.menuContainerSecurityFirst,
.menuContainerBeheerTechniek {
	position: relative;
}
.menuContainerSecurityFirst:after,
.menuContainerBeheerTechniek:after {
	content: "";
	width: 1px;
	height: 110%;
	background-color:var(--e-global-color-240d833);
	background-color:var(--e-global-color-3b433bc);
	display: block;
	position: absolute;
	top: -5%;
	right: 30px; 
}
 .e-n-menu-content-2081 {
	display:block;
 }
.SecurityFirst a{
    font-weight: 700 !important;
    color: #000000 !important;
}
.BeheerEnTechniek a{
    font-weight: 700 !important;
    color: var(--e-global-color-accent) !important;
}
.bewustwordingEnTrainingen a{
    font-weight: 700 !important;
    color: var(--e-global-color-primary) !important;
}
.LibraICT a{
    font-weight: 700 !important;
}
.security-first-cont nav ul li a:hover,
.BeheerEnTechniek-cont nav ul li a:hover,
.bewustwordingEnTrainingen-cont nav ul li a:hover{
    text-decoration: underline;
}
.security-first-cont nav ul li a:hover::before,
.security-first-cont nav ul li a.elementor-item-active::before,
.BeheerEnTechniek-cont nav ul li a:hover::before,
.BeheerEnTechniek-cont nav ul li a.elementor-item-active::before,
.bewustwordingEnTrainingen-cont nav ul li a:hover::before,
.bewustwordingEnTrainingen-cont nav ul li a.elementor-item-active::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061";
    margin-left: 10px;
    font-size: 16px;
    vertical-align: middle;
    padding: 7px 15px 0px 0px;
    position: absolute;
    top: 0;
    left: -21px;
    width: 34px;
    height: 100%;
    z-index: 0;
    transition: all 0.3s;
}
.security-first-cont nav ul li a:hover::before,
.security-first-cont nav ul li a.elementor-item-active::before {
    color: var(--e-global-color-text);
}
.BeheerEnTechniek-cont nav ul li a:hover::before,
.BeheerEnTechniek-cont nav ul li a.elementor-item-active::before {
    color: var(--e-global-color-accent);
}
.bewustwordingEnTrainingen-cont nav ul li a:hover::before,
.bewustwordingEnTrainingen-cont nav ul li a.elementor-item-active::before {
    color: var(--e-global-color-primary);
}

/* ---template (Hoe wij jouw ICT veilig maken) */
#security-first {
    background-color: var(--e-global-color-text);
    display: flex;
    justify-content: space-between;
}



#beheerEnTechniek {
    background-color: var(--e-global-color-accent);
        display: flex;
    justify-content: space-between;
}
#bewustwordingTrainingen {
    background-color: var(--e-global-color-primary);
        display: flex;
    justify-content: space-between;
}

@media (min-width:1180px) { 
	#security-first .e-n-tab-icon,
	#beheerEnTechniek .e-n-tab-icon,
	#bewustwordingTrainingen .e-n-tab-icon{
		display: none;
	}
}

@media (max-width:1179px) { 
	.driePijlers:before {
		display: none;
	}
}	


/* global knopen */
.elementor-button {
    position: relative;
    display: inline-block;
    color: #fff;
    font-weight: 600;
    font-family: Arial, sans-serif;
    padding: 12px 48px 12px 24px;
    text-decoration: none;
    border: none;
    overflow: visible;
    transition: background 0.3s ease;
    /* clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%); */
    z-index: 1;
}
.elementor-button::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061";
    margin-left: 10px;
    font-size: 25px;
    vertical-align: middle;
    padding: 9px 15px 0px 0px;
    position: absolute;
    top: 0;
    right: -53px;
    width: 54px;
    height: 100%;
    background-color: #B2C76E;
    color: #ffffff;
    clip-path: polygon(0% 0%, 100% 0%, 0% 300%);
    z-index: 0;
    transition: all 0.8s;
    /* transition: all .25s cubic-bezier(.2,.9,.2,1); */
    will-change: padding, color, width, right;
}
.knopGrijsLicht .elementor-button::after {
    background-color: var(--e-global-color-f96d010);
}
.knopGrijsDonker .elementor-button::after {
    background-color: var(--e-global-color-3b433bc);
}
.elementor-button:hover.elementor-button::after {
    margin-left: 10px;
    padding: 9px 15px 0px 0px;
    top: 0;
    right: -74px;
    width: 75px;
    height: 100%;
    /* background-color: #B2C76E; */
    clip-path: polygon(0% 0%, 100% 0%, 0% 300%);
    animation: moveArrow 1000ms linear infinite;
    /* animation-timing-function: cubic-bezier(.25,.8,.25,1); */
    animation-fill-mode: both;
    animation-play-state: running;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.quoteGroen {
	color: var(--e-global-color-primary);
}
.btnZwart .elementor-button::after {
    background-color: #5A5E66;
    color: #ffffff;
}
.btnBlauw .elementor-button::after {
    background-color: #6D899F;
    color: #ffffff;
}
.btnZonder .elementor-button::after {
    content: "";
    margin-left: 0px;
    font-size: 25px;
    vertical-align: middle;
    position: absolute;
    top: 0;
    right: 0px;
    width: 0px;
    height: 0%;
    clip-path: polygon(0% 0%, 100% 0%, 0% 300%);
    z-index: 0;
    transition: all 0.8s;
    display: none;
}
@keyframes moveArrow {
    0% {
        padding: 9px 15px 0px 0px;
        color: #ffffff;
    }

    50% {
        padding: 9px 30px 0px 0px;
        color: #ffffff94;

    }

    100% {
        padding: 9px 15px 0px 0px;
        color: #ffffff;

    }
}

/* Drie-bouwstenen template */
.Drie-L-shadow::after {
    content: "";
    position: absolute;
    top: 0;
    left: -45px;
    width: 46px;
    height: 100%;
    background-color: #1d242b;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 85%);
    z-index: 0;
}
.Drie-R-shadow::after {
    content: "";
    position: absolute;
    top: 0;
    right: -45px;
    width: 46px;
    height: 100%;
    background-color: #619627;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0% 100%);
    z-index: 0;
}
.buttonNoAfter .elementor-button:after {
    display: none !important;
}
.boxShadowIcon .elementor-icon {
	box-shadow: 0px 3px 5px 2px #0000001A !important;
}
.colorGroen {
	color: var(--e-global-color-primary) !important;
	font-weight: 700 !important;
}
.colorOranje {
	color: var(--e-global-color-1bc7ee1) !important;
	font-weight: 700 !important;
}
.colorGrijsBlauw {
	color: var(--e-global-color-accent) !important;
	font-weight: 700 !important;
}
.zoom-hover {
    overflow: hidden;
    text-align: center; /* afbeelding gecentreerd houden */
}
.zoom-bg,
.zoom-hover img {
    transition: transform 0.8s ease;
    display: inline-block; /* behoudt centrering */
}
.zoom-hover:hover img {
    transform: scale(1.04);
}

.zoom-hover {
    overflow: hidden;
}
.zoom-bg:hover{
    transform: scale(1.04);
}
.driePijlers {
	position:relative;
}
.driePijlers:before {
	content: "";
	width: 1728px;
	height:100%;
	position:absolute;
	z-index: 0;
	left: -14.9vw;
	background-image: url("https://www.libra.nl/wp-content/uploads/2025/10/Bouwblokken-DEF-02-scaled.webp");
	background-size: 93%;
	background-position: center bottom 8px;
	transform: rotate(0deg);
	left: 50%;
  transform: translateX(-50%);
}
.fillSvgPath-lichtgroen path {
	fill: var(--e-global-color-94c8cc1) !important;
}

.laatsteNieuwsAfbeelding img {
	aspect-ratio: 1.2;
	object-fit: cover;
}



.paddingUitzondering{
    background-position-x: -58vw;
}
@media (max-width:1180px) {
.paddingUitzondering {
    background-position-x: -30vw;
    }
}
@media (max-width:767px) {
.paddingUitzondering {
    background-position-x: -5vw !important;
    }
}