@import url("variables.css");

/******************************************************
* SWAZOOM COMMON STYLES (front + backend)
*
* Author: SowiesoDigital - https://sowiesodigital.nl/
*
*******************************************************/


/* button */

.btn {
	position: relative;
	display: inline-block;
	cursor: pointer;
	background-color: inherit;
	font-size: 18px;
	letter-spacing: 1px;
	text-decoration: none;
	color: var(--white);
	font-weight: 700;
	border-radius: 12px;
	padding: 15px 14px 15px 14px;
	margin: 10px 20px 25px 20px;
	/* min-width: 233px; */
}
.btn,
.btn:focus {
	outline: 0 !important;
	box-shadow: none !important;
}
.btn:hover {
	color: var(--white);
}
.btn i {
	margin-left: 1rem;
}

.btn.bg-geel {
	color: var(--black);
}

.btn.btnarrow {
	padding: 30px 12px 35px 12px !important;
}

.btn-arrow {
	position: absolute;
	right: 10px;
	bottom: 10px;
}

button:focus {
	outline: 0;
}

/* Gutenberg buttons */
.wp-block-button {
	margin: 0;
}

.wp-block-button__link {
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: 1px !important;
	text-decoration: none !important;
	position: relative !important;
	display: inline-block !important;
	border-radius: 12px !important;
	padding: 15px 30px !important;
	margin: 0px 10px 20px 10px !important;
}

.wp-block-button__link.has-yellow-background-color:hover,
.wp-block-button__link.has-yellow-background-color:active {
	background-color: var(--yellow-2)!important;	
}


@media (max-width: 768px) {
	.btn {
		font-size: 16px;
		margin: 5px 15px 21px 15px;
	}
	.btn.btnarrow {
		padding: 26px 8px 31px 8px !important;
	}
}


/* Old colors */
.bg-lime {
	background-color: #dae13b !important;
}
.bg-lichtlime {
	background-color: #f5f7cf !important;
}
.bg-paars {
	background-color: #513174 !important;
}
.bg-lichtpaars {
	background-color: #d5cdde !important;
}
.text-lime {
	color: #dae13b !important;
}
.text-paars {
	color: #513174 !important;
}


/* Brand colors */

.bg-groen,
.has-green-background-color {
	background-color: var(--green) !important;
}
.bg-lichtgroen,
.has-green-bg-background-color {
	background-color: var(--green-4) !important;
}
.btn.bg-groen:hover,
.wp-block-button__link.has-green-background-color:hover {
	background-color: var(--green-2) !important;
}

.bg-blauw,
.has-blue-background-color {
	background-color: var(--blue) !important;
}
.bg-lichtblauw,
.has-blue-bg-background-color {
	background-color: var(--blue-4) !important;
}
.btn.bg-blauw:hover,
.wp-block-button__link.has-blue-background-color:hover {
	background-color: var(--blue-2) !important;
}

.bg-rood,
.has-red-background-color {
	background-color: var(--red) !important;
}
.bg-lichtrood,
.has-red-bg-background-color {
	background-color: var(--red-4) !important;
}
.btn.bg-rood:hover,
.wp-block-button__link.has-red-background-color:hover {
	background-color: var(--red-2) !important;
}

.bg-geel,
.has-yellow-background-color {
	background-color: var(--yellow) !important;
}
.bg-lichtgeel,
.has-yellow-bg-background-color {
	background-color: var(--yellow-4) !important;
}
.btn.bg-geel:hover,
.wp-block-button__link.has-yellow-background-color:hover {
	background-color: var(--yellow-2) !important;
}

.bg-zwart,
.has-black-bg-background-color {
	background-color: var(--black) !important;
}
.btn.bg-zwart:hover,
.wp-block-button__link.has-black-bg-background-color:hover {
	background-color: var(--dark-gray) !important;
}

.text-groen,
.has-green-color {
	color: var(--green) !important;
}
.text-blauw,
.has-blue-color {
	color: var(--blue) !important;
}
.text-rood,
.has-red-color {
	color: var(--red) !important;
}
.text-geel,
.has-yellow-color {
	color: var(--yellow) !important;
}
.text-zwart,
.has-black-color {
	color: var(--black) !important;
}
.text-grijs,
.has-dark-gray-color {
	color: var(--dark-gray) !important;
}

.text-wit,
.has-white-color {
	color: #ffffff !important;
}

.text-400 {
	font-weight: 400 !important;
}

.text-500 {
	font-weight: 500 !important;
}

.text-600 {
	font-weight: 600 !important;
}

.text-700 {
	font-weight: 700 !important;
}

.text-800 {
	font-weight: 800 !important;
}

.table-no-border td, .table-no-border th {
	border: none !important;
	padding: 1rem!important;
}

.cols-rounded .wp-block-column {
	display: flex;
	flex-direction: column;
	border-radius: 20px 20px 0 0;
	padding: 1.25rem !important;
}
.cols-rounded .wp-block-column h2 {
	padding-top: 0 !important;
}
.cols-rounded .wp-block-column .wp-block-buttons {
	margin-top: auto;
}