/*
Theme Name:   De Afbraak
Theme URI:    https://www.deafbraak.nl
Description:  Custom theme for deafbraak.nl
Author:       2atWork.com + 5701.nl
Template:     platform
Version:      1.0
Text Domain:  platform-child
*/

:root {
	--blue: #150b85;
	--dark-blue: #090168;
	--red: #ff2027;
	--dark-red: #e4252a;
	--white: #ffffff;
}

body {
	line-height: 1.5;
	width: 100%;
}


a {
	color: var(	--dark-blue);
	transition: all 300ms ease;
}

a:hover {
	color: var(--blue);
}

.bg-red {
	background: var(--dark-red) !important;
	transition: all 300ms ease;
}

.bg-red.hover:hover {
	background: var(--red) !important;
}

.bg-red.hover:hover .bg-blue {
	background: var(--blue) !important;
}

.bg-blue {
	background: var(--dark-blue) !important;
	transition: all 300ms ease;
}

.bg-blue.hover:hover {
	background: var(--blue) !important;
}

.bg-blue.hover:hover .bg-red {
	background: var(--red) !important;
}

span[style="color: #ff0000;"] {
	color: var(--dark-red) !important;	
}

span[style="color: #000080;"] {
	color: var(--dark-blue) !important;	
}

.header-bg {
	position: relative;
	color: var(--white);
    text-align: center;
	z-index: 0;
}

.header-bg div {
	position: absolute;
	height: 100%;
	width: 2.5rem;
	z-index: 1;
}

.header-bg span {
	position: relative;
	margin-left: 3rem;
	padding: 1rem;
	z-index: 0;
}

.swiper-slide {
	height: 240px;
	width: 100% !important;
}

.swiper-slide img {
	height: 240px;
	width: 100%;
	object-fit: cover;
}

@media (min-width: 1200px) {
	.swiper-slide {
		height: inherit;
	}
	.swiper-slide img {
		height: auto;
		object-fit: none;
	}
}

.border-red {
	border-color: var(--dark-red) !important;
}

.border-bottom-20 {
	border-width: 20px !important;
}

.border-blue {
	border-color: var(--dark-blue) !important;
}

.border-top-20 {
	border-width: 20px !important;
}