/* main stuff */

body, html {
	color: rgb(51,51,51);
	/*background: white;*/
	background: rgb(235 236 234);
	font-family: Lato, Poppins, sans-serif;
}

body {
	margin: 8px;
	padding-bottom: 4.5em;
}

div, p, fieldset, section, footer {
	box-sizing: border-box;
}

footer {
	position: fixed;
	bottom: 0;
	background: rgb(51,51,51);
	height: 4.5em;
	width: 100%;
	display: flex;
	margin: 0 0 -8px -8px;
	padding : 1em;
	z-index: 11;
}

footer .feedback {
	flex: 1;
}

footer .contact {
	flex: 5;
	text-align: right;
	color: white;
}

footer .contact a {
	font-weight: bold;
}

a {
	color: #F00000;
}

header {
	display: flex;
	gap: 1rem;
}

header>.logo {
	flex: 2;
	display: flex;
}

header .logo>a.logo {
	flex: 4;
}

header .logo>a img {
	max-width: 300px;
}

header .logo>img {
	flex: 1;
}

header .booklet {
	flex: 3;
}

.respSubHeader {
	display: none;
	text-align: right;
	padding: 1em 0;
}

.respSubHeader a.btn {
	text-decoration: none;
	padding: 0.4em 1.5em;
}

.logo .countryLogoFlag {
	max-width: 90px;
	max-height: 90px;
	
	min-width: 0;
	height: 100%;
	margin-right: 1em;
}

.booklet {
	padding: 0.5em 1em;
	text-align: right;
	width: 100%;
	box-sizing: border-box;
}


/* HP stuff */

.navhelp {
	text-align: center;
	font-size: 1.5em;
}

.navhelp__resp {
	display: none;
}

.europemap {
	width: 100%;
	margin: auto;
	/*background: pink;*/
	max-width: 660px;
}

.europemap path {
	fill: gray;
	stroke: rgb(160,160,160);
	stroke-width: 0.1em;
}

.europemap path.hasURL {
	cursor: pointer;
}

.countryMenu {
	display: none;
}

.booklet__bottom {
	margin-top: 2em;
	display: none;
}

/* login stuff */

.login .message {
	text-align: center;
	background: rgb(51,51,51);
	color: white;
	width: 100%;
	max-width: 550px;
	margin: auto;
	margin-bottom: 2em;
	padding: 1em;
	border-radius: 5px;
}

.login .message.message--error {
	background: #F00000;
}

.login fieldset {
	width: 100%;
	max-width: 550px;
	margin: auto;
	border: 2px solid #F00000; 
	border-radius: 5px;
	box-sizing: border-box;
}

.login .formRow {
	width: 100%;
	display: flex;
	margin: 0.5em 0;
}

.login .formRow label {
	width: 30%;
}

.login .formRow input{
	width: 70%;
	border: 1px solid rgb(51,51,51);
	border-radius: 4px;
}

.loginBottomRow {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.loginButtonBox {
	flex: 1;
}

.loginLinkBox {
	flex: 1;
	text-align: right;
}

.btn {
	background: #F00000;
	color: white;
	border-radius: 4px;
	border: 0;
	font-weight: bold;
	padding: 0.5em 1.5em;
	white-space: nowrap;
	line-height: 2.5em;
}

.btn a {
	color: white;
	text-decoration: none;
}

.btn.btn--dark {
	background: rgb(51,51,51);
}

.btn--xl {
	font-size: 130%;
}

.btn__icon--animated {
	display: inline-block;
	animation: moveRight 1s infinite alternate;
}



/* machinelist stuff */
.machinelist {
	display: flex;
	gap: 1rem;
	/*align-items: end;*/
	flex-wrap: wrap;
}


.machinelist .machine {
	flex: 1;
	text-align: center;
	display: flex;
	flex-flow: column;
	min-width: 300px;
}

.machinelist .machine h3, .machinelist .machine .machineimage {
	width: 100%;
}

.machinelist .machine h3 {
	font-weight: normal;
	font-size: 2em;
}

.machinelist .machine h3 a {
	text-decoration: none;
	color: rgb(51,51,51);
}

.machinelist .machine .machineimage {
	flex-grow: 1;
}

.machinelist .machine .machinebtn {
	padding-top: 1em;
}
.machinelist .machine .machinebtn a {
	text-decoration: none;
}


/* manuallist stuff */

h1 {
	text-align: center;
	font-size: 2em;
	font-weight: normal;
	margin-bottom: 0;
}

h1 strong {
	font-size: 120%;
}

h2 {
	text-align: center;
	font-size: 2em;
	font-weight: normal;
	margin-bottom: 0;
}

.subtitle {
	text-align: center;
	margin-top: 0;
}

.navLinks {
	display: flex;
	padding: 1rem 0;
}

.navLinks a {
	text-decoration: none;
}

.manuallist {
	display: flex;
	gap: 1rem;
	/*align-items: end;*/
	flex-wrap: wrap;
}


.manuallist .manual {
	flex: 1;
	text-align: center;
	display: flex;
	flex-flow: column;
	min-width: 300px;
}

.manuallist .manual h3, .manuallist .manual .manualimage {
	width: 100%;
}

.manuallist .manual h3 {
	font-weight: normal;
	font-size: 1.2em;
	flex: 3;
	font-weight: bold;
}

.manuallist .manual h3 a {
	text-decoration: none;
}

.manuallist .manual .manualimage {
	flex-grow: 1;
	flex: 4;
	display: flex;
	flex-flow: row;
}

.padder {
	flex-grow: 1;
}

.manuallist .manual .manualimage .pictureCont {
	position: relative;
	flex-grow: 0;
}

.manuallist .manual .manualimage .pictureCont img {
	border-radius: 10px;
}


.manuallist .manual .manualbtn {
	padding-top: 1em;
	flex: 1;
}
.manuallist .manual .manualbtn a {
	text-decoration: none;
	flex: 1;
	text-align: left;
}

.manuallist .manual .manualbtn {
	text-align: center;
}


.manuallist .manual .flag {
	position: absolute;
	width: 60px;
	height: 60px;
	top: -15px;
	z-index: 10;
	border-radius: 50%;
	display: flex;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	font-size: 0.8em;
	display: flex;
	flex-flow: column;
	line-height: 0.9;
}

.manuallist .manual .flag .flagIn {
	flex-grow: 0;
	font-size: 80%;
}

.videoSubtext {
	text-align: center;
}

.videoCatLabel {
	/*text-decoration: underline;*/
	margin-top: 2em;
	margin-bottom: 0;
	/*cursor: pointer;*/
	text-align: center;
	color: #F00000;
}

.videoCatLabel span {
	font-size: 80%;
}

h4.videoCatLabel {
	font-size: 90%;
}

.videolist {
	display: flex;
	gap: 1rem;
	/*align-items: end;*/
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
}


.videolist .video {
	flex: 1;
	text-align: center;
	display: flex;
	flex-flow: column;
	min-width: 400px;
	max-width: 600px;
	height: 500px;
}


.videolist .video iframe {
	height: 100%;
	flex: 7;
	border-radius: 10px;
}

.videolist .video h3 {
	flex: 1;
}

.intros {
	margin-top: 4em;
}

.intros h3 {
	text-align: center;
}

.intros .introlist {
	display: flex;
	gap: 2em;
	justify-content: center;
}

.notificationlist {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.notificationlist .notification {
	flex: 1;
	min-width: 400px;
	max-width: 600px;
	display: flex;
	flex-flow: column;
}

.notificationlist .notification h3 {
	flex: 2;
	text-align: center;
}

.notificationlist .notification .notificationdate {
	font-style: italic;
	flex: 1;
}

.notificationlist .notification .notificationperex {
	flex: 4;
}

.notificationlist .notification .notificationdetailbtn {
	flex: 1;
	text-align: center;
}

.notificationdetail .notificationcontent {
	width: 100%;
	max-width: 800px;
	margin: auto;
}

.btnRow {
	text-align: center;
	margin-top: 3em;
}

.pulsing {
	border-radius: 50%;
	width: 1.4em;
	height: 1.4em;
	background: red;
	color: white;
	text-align: center;
	padding: 0.1em;
	font-size: 1em;
	display: inline-block;


	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}

@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(5px);
  }
}

@keyframes moveUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5px);
  }
}

.bannerList {
	width: 100%;
	margin: auto;
	/*border-bottom: 1px solid #F00000; */
	margin-bottom: 3em;
	background: #F0D0D0;
	padding: 0.5em;
}

.bannerList .bannerItem {
	width: 100%;
	max-width: 1200px;
	margin: auto;
}

.bannerItem .bannerItem--header {
	font-size: 1.4em;
	margin-top: 0;
	padding: 0;
}

.bannerItem .bannerItem--more {
	text-align: right;
}

.bannerItem .bannerItem--header a {
	text-decoration: none;
}

.bannerItem .bannerItem--header a {
	text-decoration: none;
}

.topLink {
	display: none;
	position: fixed;
	right: 1em;
	bottom: 5em;
	animation: moveUp 1s infinite alternate;
}

.topLink i {
	font-size: 200%;
}


/* responsive stuff */

	
@media (max-width: 420px) {
	header .logo>a img {
		max-width: 100%;
	}
	
	header .logo>a.withflag img {
		max-width: 250px;
	}
	
	header .logo>a.withflag {
		text-align: right;
	}
}
@media (max-width: 600px) {
	.countryMenu {
		display: block;
	}
	
	.europemap svg {
		display: none;
	}

	.navhelp {
		font-size: 1.2em;
		text-align: left;
		display: none;
	}

	.navhelp.navhelp__resp {
		display: block;
	}

	.login fieldset {
		width: 100%;
	}
}

@media (max-width: 750px) {

	.booklet {
		display: none;
	}

	.respSubHeader {
		display: block;
	}
	
	.booklet__bottom {
		display: block;
		text-align: left;
		padding: 0;
	}
	footer {
		font-size: 80%;
	}

	footer .btn  {
		padding: 0.5em;
	}
}