/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   general
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a:hover {
	text-decoration-line: none;
}
/* --------------
 * separator
 * -------------- */
.separator {
	margin-bottom: 40px;
	background-color: var(--color-prime);
	border-style: solid;
	border-width: 1px;
	border-color: #507070 #205050 #205050 #507070;
}
@media screen and (min-width: 591px) {
	.separator { height: 20px; }
}
@media screen and (max-width: 590px) {
	.separator { height: 22px; }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   alert
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#alert-section {
	margin-bottom: 60px;
}
#alert-title {
	margin-top: 40px;
	margin-bottom: 32px;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
}
#alert-wrapper {
	margin: auto;
	max-width: 650px;
}
#alert-box {
	margin: 0 40px;
	border-radius: 4px;
	box-shadow: 2px 2px 8px 2px #cccccc;
}
/* -- media ------ */
@media screen and (min-width: 701px) {
	#alert-box {
		padding: 15px 30px;
		border-left: 1px solid #cccccc;
		border-right: 1px solid #cccccc;
	}
}
@media screen and (max-width: 700px) {
	#alert-box {
		padding: 15px 25px;
		border-left: 1px solid #aaaaaa;
		border-right: 1px solid #aaaaaa;
	}
}
/* -------
 * colors
 * ------- */
.alert-color-white {					/* white */
	border-top: 4px solid #999999;
	border-bottom: 4px solid #999999;
}
.alert-color-white:hover {
	background-color: #f0f0f0;
}
.alert-color-beige {					/* beige */
	background-color: #fef7e9;
	border-top: 4px solid #99948b;
	border-bottom: 4px solid #99948b;
}
.alert-color-beige:hover {
	background-color: #f6f2df;
}
.alert-color-yellow {					/* yellow */
	background-color: #fef6ae;
	border-top: 4px solid #99948b;
	border-bottom: 4px solid #99948b;
}
.alert-color-yellow:hover {
	background-color: #faf19d;
}
.alert-color-red {						/* red */
	background-color: #feb9b6;
	border-top: 4px solid #998b8b;
	border-bottom: 4px solid #998b8b;
}
.alert-color-red:hover {
	background-color: #fbaba8;
}
/* ------
 * text
 * ------ */
#href-alert {
	color: #333333;
}
#href-alert:hover {
	color: #111111;
}
#pre-alert {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	text-align: center;
	white-space: pre-wrap;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   lists  -->  news / offers
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.list-section {
	margin: 0 auto 80px auto;
	max-width: 820px;
}
.list-title {
	margin-top: 40px;
	margin-bottom: 25px;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
}
.list-container {
	margin: 0 8px;
	box-shadow: 2px 2px 8px 2px #cccccc;
}
@media screen and (min-width: 651px) {
	.list-container {
		border-top: 4px solid var(--color-prime);
		border-bottom: 4px solid var(--color-prime);
		border-left: 1px solid #cccccc;
		border-right: 1px solid #cccccc;
		border-radius: 4px;
	}
}
@media screen and (max-width: 650px) {
	.list-container {
		border-top: 5px solid #999999;
		border-bottom: 5px solid #999999;
		border-left: 1px solid #aaaaaa;
		border-right: 1px solid #aaaaaa;
		border-radius: 6px;
	}
}
/* ------------
 * button more
 * ------------ */
.module-link {
	padding: 20px 8px 0 0;
}
.module-btn {
	float: right;
	padding: 0 10px;
	line-height: 35px;
	color: #223344;
	background-color: #d9d9d9;
	box-shadow: 2px 2px 8px 2px #cccccc;
	border-width: 1px;
	border-style: solid;
	border-color: #80a0a0 #205050 #205050 #80a0a0;
	border-radius: 5px;
}
.module-btn:hover {
	color: #112233;
	background-color: #cccccc;
}
.module-btn:active {
	color: #1c1c1c;
	background-color: #c0c0c0;
	border-color: #709090 #104040 #104040 #709090;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   news only
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.news-item {
	padding: 5px 15px;
	color: #444444;
	cursor: pointer;
}
.news-item:hover {
	background-color: #f0f0f0;
}
@media screen and (min-width: 591px) {
	.news-item       { border-bottom: 1px solid #d3d3d3; }
	.news-item:hover { border-bottom: 1px solid #c9c9c9; }
}
@media screen and (max-width: 590px) {
	.news-item { border-bottom: 1px solid #999999; }
}
/* ------ */
.news-date {
	font-size: 15px;
	color: #777777;
}
@media screen and (max-width: 600px) {
	.news-date {
		font-size: 17px;
	}
}
.news-headline {
	color: #113355;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   offers only
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* -----------
 * item
 * ----------- */
.ofr-item {
	color: #444444;
	cursor: pointer;
}
.ofr-item:hover {
	background-color: #f0f0f0;
}
@media screen and (min-width: 591px) {
	.ofr-item {
		display: flex;
		justify-content: space-between; 
		padding: 3px 10px 3px 15px;
		border-bottom: 1px solid #d3d3d3;
	}
	.ofr-item:hover { border-bottom: 1px solid #c9c9c9; }
}
@media screen and (max-width: 590px) {
	.ofr-item {
		padding: 5px 10px 5px 15px;
		border-bottom: 1px solid #999999;
	}
}
/* -----------
 * details
 * ----------- */
.ofr-date {
	font-size: 15px;
	color: #777777;
}
.ofr-cmp {
}
.ofr-title {
	color: #115577;
	font-weight: bold;
}
.ofr-op {
	display: inline-block;
	margin-right: 5px;
	padding: 0 8px;
	vertical-align: top;
	color: #ffffff;
	background-color: #dddddd;
	border-radius: 8px;
}
#op-label-B {
	color: #209050;
}
#op-label-S {
	background-color: #c24843;
}
#op-label-C {
	color: #307090;
}
.ofr-inf {
}
.ofr-val {
	display: inline-block;
	color: #777777;
}
/* --------- */
@media screen and (min-width: 591px) {
	.ofr-title {
	}
	.ofr-inf {
		font-size: 15px;
	}
	.ofr-cmp {
		margin-left: 10px;
		font-size: 17px;
		color: #777777;
		text-align: right;
	}
}
@media screen and (max-width: 590px) {
	.ofr-date {
		font-size: 17px;
	}
	.ofr-inf {
		font-size: 17px;
	}
	.ofr-cmp {
		display: none;
	}
}
@media screen and (min-width: 371px) {
}
@media screen and (max-width: 370px) {
	.ofr-inf {
		font-size: 16px;
	}
	.ofr-date {
		display: none;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   presentation
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#presentation-logo {
	margin-top: 70px;
	text-align: center;
}
#intro {
	margin-top: 40px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   activity
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#activity-container {
	margin: 30px 0 70px 0;
	display: flex;
	justify-content: center;
	gap: 20px;
	flex-wrap: wrap;
}
.activity-item {
	padding: 30px;
	width: 140px;
	height: 140px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	background-color: #f0f0f0;
	border-width: 1px;
	border-style: solid;
	border-color: #e0e0e0 #cccccc #cccccc #e0e0e0;
	border-radius: 20px;
	cursor: pointer;
}
.activity-item:hover {
	background-color: #e6e6e6;
}
.activity-content {
	text-align: center;
}
.activity-img {
	width: 80px;
	height: 80px;
	object-fit: contain;
}
.activity-name {
	margin-top: 10px;
	font-weight: bold;
	color: #001133;
}
/* ----------------- */
@media screen and (max-width: 600px) {
	.activity-item {
		padding: 5px;
	}
	.activity-name {
		margin-top: 0;
		font-size: 16px;
	}
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *   partners
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#partner-title {
	margin-top: 60px;
	margin-bottom: 30px;
	text-align: center;
	font-size: 25px;
	font-weight: bold;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *   screen size
 *
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~
 *   div blank
 * ~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 1331px) { #div-blank { height: 30px; } }
@media screen and (max-width: 1330px) { #div-blank { height: 20px; } }
@media screen and (max-width: 1200px) { #div-blank { height: 15px; } }
@media screen and (max-width:  651px) { #div-blank { height: 10px; } }