/* Header */

@media (min-width: 950px) {
	body > header > .header-info {
		width: 40vw;
	}

	body > header > .header-info .contact {
		display: flex;
		align-items: center;
		justify-content: center;

		flex-basis: 50%;

		transition: background .5s ease-in-out;
	}

	body > header > .header-info .contact:hover {
	  background-color: rgba(50,50,50,.4);
	}

	body > header > .header-info .contact .button {
	  padding: 10px 30px;
	  background: var(--color-trans);
	  outline: none;
	  color: var(--color-font-light);
	  border: solid 3px var(--color-font-light);
	  border-radius: 9px;
	  font-weight: bold;
	  font-size: 15px;
	  cursor: pointer;

	  transition: background .2s ease-in-out, color .2s ease-in-out;
	}

	body > header.original > .header-info .contact .button {
	  border: solid 3px var(--color-back);
	  color: var(--color-back);
	}

	body > header > .header-info .contact .button:hover {
		background-color: rgba(255,255,255, .5);
		color: var(--color-back);
	}
}

/* Columns */
@media (min-width: 950px) {
	.cols {
	  display: flex;
	  flex-direction: row;
	}

	.cols .news-col {
		order: 2;
	}

	.cols main {
	  flex-grow: 0;
	  flex-shrink: 0;

	  flex-basis: 60%;
	  
	  order: 1;
	}

	.cols main .info-box {
		margin: 50px 25px;
		padding: 0;
		min-height: 300px;
	}
	.cols main .info-box.event {
		display: flex;
		align-items: center;
	}
	.cols main .info-box.event:nth-child(2n+1) {
		flex-direction: row-reverse;
	}

	.cols main .info-box.event .watermark-wrapper {
		display: flex;
		align-items: center;
		flex-basis: 33%;
		overflow: hidden;
	}
	.cols main .info-box.event .watermark-wrapper img {
		width: 200%;
		object-fit: contain;
		margin-left: -100%;
		max-height: 80%;
	}
	.cols main .info-box.event:nth-child(2n+1) .watermark-wrapper img {
		margin-left: auto;
		margin-right: -100%;
	}

	.cols main .info-box.event .article {
		flex-grow: 1;
		padding: 40px 60px;
	}

	.cols main .info-box.event h2 {
		margin: 10px 0;
	}


	.cols > .news-col {
		flex-grow: 1;
		flex-shrink: 1;

		flex-basis: 20%;
	}
	.cols > .news-col .title {
		position: sticky;
		top: 80px;
	}
	.cols > .news-col ul {
		position: sticky;
		top: 120px;
	}
}

@media (min-width: 1150px) {
	.cols > .nav-left {
		display: block;
		flex-grow: 1;
		flex-shrink: 1;

		flex-basis: 20%;

		padding: 100px 0;
	}
	.cols > .nav-left ul {
		position: sticky;
		top: 200px;

		list-style: none;
		margin: 0;
		padding: 0 15%;
	}
	.cols > .nav-left ul li {
		margin: 10px 0 0;
	}
	.cols > .nav-left a {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0;
		margin: 0;
		text-decoration: none;
	}
	.cols > .nav-left ul .outer-circle {
		border: solid 3px var(--color-color);
		border-radius: 1000px;
		padding: 5px;
		margin: 0 20px 0 0;
		transition: border-color .2s ease-in-out;
	}
	.cols > .nav-left ul .inner-circle {
		display: none;
	}

	.cols > .nav-left ul li:hover .outer-circle,
	.cols > .nav-left ul a.active .outer-circle {
		border-color: var(--color-light);
	}

	.cols main .info-box {
		/*height: 500px;*/
		min-height: 500px;
	}
}

@media (min-width: 550px) {
	.info-box.images {
		grid-template-columns: minmax(250px, 1.5fr) repeat(auto-fit, minmax(250px, 1fr));
	}
}



@media (min-width: 450px) {
	.cols main .info-box.menus {
		display: flex;
		flex-direction: column;
	}
	.cols main .info-box.menus > h2 {
		margin: 30px 30px 0;
	}

	.cols main .info-box.menus .menus-wrapper {
		display: flex;
		flex-grow: 1;
		flex-direction: column;
		padding: 0 15px;
	}

	.cols main .info-box.menus .menu {
		height: auto;
		margin: 15px;
	}
	.cols main .info-box.menus .menu .thumbnail {
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;

		height: 240px;
	}
}

@media (min-width: 680px) {
	.cols main .info-box.menus {
		height: 400px;
	}
	.cols main .info-box.menus .menus-wrapper {
		flex-direction: row;
		height: auto;
	}
}

@media (min-width: 1570px) {
	.cols main .info-box.menus {
		height: 500px;
	}
	.cols main .info-box.menus > h2 {
		margin: 60px 60px 0;
	}

	.cols main .info-box.menus .menus-wrapper {
		padding: 0 30px;
	}

	.cols main .info-box.menus .menu {
		margin: 30px;
	}
}