@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(/assets/webfonts/google/open-sans.ttf) format('truetype');
}
*, *::before, *::after {
	box-sizing: border-box;
}
:root {
	--site-width-sm: 100%;
	--site-width-md: 85%;
	--site-width-lg: 75%;
	--site-width-xl: 65%;
	--gap-xl: 2em;
	--gap-lg: 1em;
	--gap-md: .5em;
	--gap-sm: .5em;

	--mt-green: #009e7f;
}
body, html {
	background-color: #FFF;
	padding: 0;
	margin: 0;
	font-family: 'Open Sans',sans-serif;

	width: 100%;
	height: 100%;

	box-sizing: border-box;
	transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
}
a, a:hover { 
	color: #000;
	text-decoration: none; 
}
img { border: 0px; }
img.autoscale {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

h1, h2, h3, h3, h4, h5, h6 {
	font-family: 'Open Sans',sans-serif;
	font-weight: 700;
	margin: 1em 0;
}
h1 {
	font-size: 24pt;
}
h2 {
	font-size: 18pt;
}
h3 {
	font-size: 14pt;
	margin:  1.2em 0;
}

[popover] {
	position-anchor: auto;
	margin: 0;
	padding: 0;
	border: 1px solid #000;
	inset: auto;
	top: anchor(bottom);
	right: anchor(right);

	a {
		display: block;
		padding: .25em .5em;
	}
}

.v-center {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.v-top {
	display: flex;
	flex-direction: row;
	align-items: top;
}

.text-start{ text-align: start; }
.text-end  { text-align: end; }
.text-cnt  { text-align: center; }

.content {
	width: var(--site-width-sm);
}

header {
	background-color: #222;
	background-image: url('/assets/img/bk.png');
	background-repeat: repeat-y;
	background-position: 0 0;
	padding: 0;
	margin: 0;
	color: #FFF;
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;

	& .brand {
		background-color: #FFF;

		display: flex;
		flex-direction: column;

		& .logo {
			padding: 0;
			margin: 0;

			display: flex;
			flex-direction: row;
			justify-content: end;

			& img {
				max-width: 100%;
			}
		}

		& .menu {
			display: none;
			flex-direction: row;
			justify-content: start;
			padding: .5em 0 .5em 1em;

			a {
				padding: 0 .5em;
			}
		}

		& .menu-sm {
			display: flex;
			flex-direction: row;
			justify-content: end;

			button {
				background-color: transparent;
				border: 0;
				padding: .5em;
				margin-right: 5px;
				font-size: +1em;
			}
		}

		& .icons {
			display: flex;
			flex-direction: row;
			justify-content: center;
			padding: 1em 0 0 1em;

			& .lang {
				color: #000;
			}
			& .active {
				color: var(--mt-green);
			}

			& .links {
				margin-left: 1em;
				img {
					width: 25px; 
					padding: .25em;
				}
			}
		}

		hr {
			margin: 0 5px;
		}
	}
	
	& .main-image {
		height: 100%;
	}
} 
/* end header */

.main {
	min-width: 100%;
	max-width: 100%;

	display: flex;
	flex-direction: column;
	align-items: center;

	& .news {
		display: flex;
		flex-direction: column;
		align-items: start;
		gap: var(--gap-sm);
		
		& .entry {
			flex-basis: 50%;

			& .image {
				& img {
					max-width: 100%;
				}
			}
		}
	}

	& .project {
		& .images {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: var(--gap-sm);

			& img {
				max-width: 100%;
			}
		}
	}

	& .video {
		display: flex;
		flex-direction: column;

		& .videos {
			display: grid;
			grid-template-columns: 1fr;
			gap: .5em;

			& a {
				& img {
					width:100%; 
				}
			}
		}
	}
}

@media only screen and (min-width: 1200px) {
	.content {
		width: var(--site-width-xl);
	}

	.main {
		& .news {
			flex-direction: row;
			gap: var(--gap-xl);
		}

		& .project {
			& .images {
				flex-direction: row;
				gap: var(--gap-xl);
			}
		}

		& .video {
			& .videos {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
			}
		}
	}
}


@media only screen and (min-width: 992px) and (max-width: 1199px) {
	.content {
		width: var(--site-width-lg);
	}

	.main {
		& .news {
			flex-direction: row;
			gap: var(--gap-lg);
		}

		& .project {
			& .images {
				flex-direction: row;
				gap: var(--gap-lg);
			}
		}

		& .video {
			& .videos {
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
			}
		}
	}
}


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

	& .content {
		width: var(--site-width-md);
	}

	.main {
		& .news {
			flex-direction: row;
			gap: var(--gap-md);
		}

		& .project {
			& .images {
				flex-direction: row;
				gap: var(--gap-xl);
			}
		}

		& .video {
			& .videos {
				display: grid;
				grid-template-columns: 1fr 1fr;
			}
		}
	}
}

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

	header {
		padding: 10px 0 0 0;

		& .brand {
			& .menu {
				display: flex;
			}

			& .menu-sm {
				display: none;
			}
		}
		& .icons {
			justify-content: start!important;
		}
	}
}