/* = Button
---------------------------------------------------- */

.button{
	display: inline-block;
	overflow: hidden;
	z-index: 1;

	transition: background-color 0.25s,
		border-color 0.25s, color 0.25s;

	border-style: solid;
	border-radius: 5px;

	font-weight: 400;
	text-decoration: none;
	text-align: center;
}

.button:hover,
.button:active,
.button:focus{
	text-decoration: none;
}

/* colors */

.button.primary.empty{
	border-color: var(--blue);
	color: var(--blue);
}

.button.primary.empty:hover,
.button.primary.empty:active,
.button.primary.empty:focus{
	background-color: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

.button.primary.filled{
	background-color: var(--blue);
	border-color: var(--blue);
	color: var(--white);
}

.button.primary.filled:hover,
.button.primary.filled:active,
.button.primary.filled:focus{
	background-color: var(--dark-blue);
	border-color: var(--dark-blue);
	color: var(--white);
}

.button.secondary.empty{
	border-color: var(--red);
	color: var(--red);
}

.button.secondary.empty:hover,
.button.secondary.empty:active,
.button.secondary.empty:focus{
	background-color: var(--red);
	border-color: var(--red);
	color: var(--white);
}

.button.secondary.filled{
	background-color: var(--red);
	border-color: var(--red);
	color: var(--white);
}

.button.secondary.filled:hover,
.button.secondary.filled:active,
.button.secondary.filled:focus{
	background-color: var(--dark-red);
	border-color: var(--dark-red);
	color: var(--white);
}

/* size */

.button.big{
	padding: 15px 30px;
	border-width: 2px;

	font-size: 18px;
	line-height: 26px;
}

.button.normal{
	padding: 12px 30px;
	border-width: 1px;

	font-size: 16px;
	line-height: 24px;
}

.button.small{
	padding: 7px 25px;
	border-width: 1px;

	font-size: 16px;
	line-height: 24px;
}

/* margins */

.button.with-margins{
	margin: 0 10px 10px;
}

/* disabled */

.button.disabled{
	cursor: not-allowed;
	opacity: 0.3;
}

/* = Topics
---------------------------------------------------- */

div.topics-list > ul{
	margin-left: 0;
}

.topics-list > ul > li{
	break-inside: avoid;
	list-style: none;

	margin-bottom: 0.5em;
}

.topics-list > ul > li ul{
	list-style-position: outside;
	list-style-type: disc;

	margin: 1em 0 1em 2.5em;
}

.topics-list > ul > li ul li{
	margin-bottom: 5px;
}

/* = Text
---------------------------------------------------- */

/* colors */

.color-blue{
	color: var(--blue);
}

.color-red{
	color: var(--red);
}

/* style */

.caps{
	text-transform: uppercase;
}

.underline{
	text-decoration: underline;
}

.highlight{
	font-weight: 600;
	color: #89bd3f;
}

/* = Helpers
---------------------------------------------------- */

.desktop-content{
	display: none;
}

.mobile-content{
	display: block;
}

/* = Resize: Width
---------------------------------------------------- */

@media only screen and (min-width: 768px){

	/* = Columns
	---------------------------------------------------- */

	/* basic columns */

	.one-half,
	.one-third,
	.two-third,
	.three-fourth,
	.one-fourth,
	.one-fifth,
	.two-fifth,
	.three-fifth,
	.four-fifth,
	.one-sixth,
	.five-sixth{
		margin-right: 4%;
		float: left;
	}
	.one-half{
		width: 48%;
	}
	.one-third{
		width: 30.5666%;
	}
	.two-third{
		width: 65.2332%;
	}
	.one-fourth{
		width: 22%;
	}
	.three-fourth{
		width: 74%;
	}
	.one-fifth{
		width: 16.8%;
	}
	.two-fifth{
		width: 37.6%;
	}
	.three-fifth{
		width: 58.4%;
	}
	.four-fifth{
		width: 79.2%;
	}
	.one-sixth{
		width: 13.3333%;
	}
	.five-sixth{
		width: 82.6665%;
	}
	.last{
		margin-right: 0;
		clear: right;
	}

	/* two level columns */

	.one-half .one-half{
		margin-right: 8.3333%;
		width: 45.8333%;
	}
	.one-half .one-third{
		margin-right: 8.3333%;
		width: 27.7778%;
	}
	.one-half .two-third{
		margin-right: 8.3333%;
		width: 63.8889%;
	}
	.two-third .one-third{
		margin-right: 6.1224%;
		width: 29.2517%;
	}
	.two-third .two-third{
		margin-right: 6.1224%;
		width: 64.6258%;
	}
	.two-third .one-fourth{
		margin-right: 6.1224%;
		width: 20.4082%;
	}

	/* = Topics
	---------------------------------------------------- */

	.topics-list{
		columns: 2;
	}

	.topics-list > ul > li{
		padding-right: 1em;
	}

	.topics-list > ul > li ul li{
		margin-bottom: 8px;
	}

	/* = Helpers
	---------------------------------------------------- */

	.desktop-content{
		display: block;
	}

	.mobile-content{
		display: none;
	}

}

@media only screen and (min-width: 1024px){

	/* = Topics
	---------------------------------------------------- */

	.topics-list{
		columns: 3;
	}

}