body.body--hidden {overflow: hidden;}
.nav-container, .splash-nav{background: linear-gradient( #08070e 0%, rgb(0 0 0 / 67%) 20%, rgba(255, 255, 255, 0) 100%) !important;}

.about-container {
	margin: 4.1em auto;
	padding: 0 10px;
	text-align: center;
}

.presentation {
	margin: 0 auto;
	max-width: 990px;
}

.presentation-order {
	gap: 10px;
	display: inline-flex;
	align-items: center;
	flex-direction: row;
}

.presentation h1, .presentation p{margin: 0;}
.presentation h1{font-size: clamp(2.2em, 4.3vw, 4.4em);}

.presentation .about-logo{
	height: auto;
	width: 270px;
	vertical-align: middle;
}

.presentation p{
	margin: 0 auto;
	line-height: 1.15;
	font-weight: 400;
	font-size: clamp(0.9em, 2vw, 1.25em);
}

/* Pattern */
.content{margin-top: 40px;}

.pattern {
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pattern--hidden {
	visibility: hidden;
	opacity: 0;
}

.pattern--hidden .polygon {transition-duration: 0ms;}

.pattern svg {
	width: 100%;
	height: 100%;
}

.polygon {
	transition: -webkit-transform 300ms ease-in-out, opacity 300ms ease-in-out;
	transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transform-origin: center bottom;
	transform-origin: center bottom;
	fill: transparent;
}

.polygon--hidden {
	opacity: 0;
	-webkit-transform: scale(0);
	transform: scale(0);
}
/* disable scale on firefox */

.ff .polygon {
	-webkit-transform: scale(1)!important;
	transform: scale(1)!important;
}

/* Card */
.wrapper {
	display: grid;
	grid-gap: 35px;
	padding: 0 30px;
	margin: 60px auto;
	max-width: 1600px;
	justify-items: center;
	justify-content: center;
	grid-template-rows: repeat(2, 310px);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 30em), 1fr));
}

.card { width: 100%; height: 100%; text-align: left; position: relative; }

.card__container {
	top: 0;
	left: 0;
  z-index: 1;
	width: 100%;
	height: 100%;
	position: fixed;
	overflow-y: auto;
	overflow-x: hidden;
	border-radius: 20px;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-overflow-scrolling: touch;
}

.card__container--closed {
	position: absolute;
	overflow: hidden;
}

.card__image {
	left: 50%;
/* 	width: 100%; */
	width: 216%;
	height: 100%;
	display: block;
	position: relative;
	max-height: 500px;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}

.card__container--closed .card__image {cursor: pointer;}

.card__content {
	width: 100%;
	height: auto;
	margin: 0 auto;
	position: relative;
	padding: 30px 40px 22px;
	background-color: #252830;
}

.card__container--closed .card__content {
	margin-top: 0;
	padding: 5px 16px;
	pointer-events: none;
	background: transparent;
}

.card__caption {
	font-size: 2em;
	margin: 0 auto;
	padding: 35px 0 0;
	max-width: 1035px;
}

.card__container--closed .card__caption {
	font-size: 1em;
	max-width: none;
	padding: 30px 10px;
	-webkit-transform: translateY(-100%);
	-ms-transform: translateY(-100%);
	transform: translateY(-100%);
}

.card__title {
	padding: 0;
	color: white;
	line-height: 1;
	margin: 5px 0 0 0;
	font-size: clamp(2em, 3vw, 2.9em) !important;
}

.card__title, .card__subtitle{
	height: 100%;
	text-shadow: -11px 1px 20px rgb(0 8 0);
}

.card__container--closed .card__title, .card__container--closed .card__subtitle {color: #fff;}
.card__container--closed .card__btn-close {display: none;}

.sticky-close{
	top: 5em;
	position: sticky;
}

.card__btn-close {
	top: 0;
	right: 1em;
	color: white;
	padding: 20px;
	cursor: pointer;
	font-size: 45px;
	position: absolute;
}

.card__subtitle {
	color: red;
	line-height: 1;
	margin: 5px 0 0;
	font-size: .95em;
}

.card__copy {
	margin: 0 auto;
	font-size: 18px;
	max-width: 1035px;
	padding: 25px 0 100px;
}

.card__copy a{color: firebrick;}
.card__copy a:hover{color: maroon;}

.card__copy img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  margin-right: 5px;
  display: inline-block;
  border-radius: 20px;
}

.card__container--closed .meta {visibility: hidden;}

.publi-space {margin: 0 auto !important;}
.mobile-ad{display: none;}

footer{
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	position: fixed;
	text-align: center;
	padding: 0 10px !important;
	background: rgb(23 23 23 / 50%);
  box-shadow: 0 4px 30px rgb(0 0 0 / 10%);
}

footer p{font-size: clamp(.9em, 1.3vw, 1.25em) !important;}
footer p a{color: white;}
footer a:hover{color: firebrick !important;}

/* Responsive Mode */
@media (max-width: 1920px) {
	.about-container {margin: 4.1em auto 8.5em;}
}

@media (max-width: 1620px) {
	.wrapper {grid-template-columns: repeat(auto-fill, minmax(min(100%, 25vw), 1fr));}
}

@media (max-width: 1100px) {
	.card__container--closed .card__content {padding: 5px 0px;}
}

@media (max-width: 980px) {
	.presentation-order {margin-bottom: 10px;}
	.presentation .about-logo {width: 180px;}

	.wrapper {grid-template-columns: repeat(auto-fill, minmax(min(100%, 45%), 1fr));}

	.card__title{
    display: block;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden !important;
	}

	.desktop-ad{display: none;}
	.mobile-ad{display: block;}
}

@media (max-width: 600px) {
	.about-container {margin: 6.5em auto 0;}

	.presentation-order {
    gap: 0;
    flex-direction: column;
    margin-bottom: 30px;
	}

	.presentation h1{line-height: 1;}
	.presentation .about-logo {width: 230px;}

	.wrapper {
		margin: 0 auto;
		padding: 0 10px;
		grid-template-rows: repeat(5, 210px);
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 100%), 1fr));
	}

	.card__btn-close {top: -80px;}
	.card__container--closed .card__content {padding: 5px;}
	.card__content {padding: 0 10px;}
	.card__image {max-height: 250px;}
	.card__copy{padding: 25px 0 50px;}
	.card__title {font-size: clamp(1.3em, 3vw, 2.9em) !important;}
	.card__subtitle {font-size: 14px;}

	.the-info h3 {
		width: 100%;
    line-height: 1;
	}

  .the-info p{font-size: 14px;}
  .publi-space {margin: 4em auto 1em !important;}
	footer{position: relative;}
}

@media (max-width: 360px) {
	.card__caption {
		font-size: 1.25em;
		padding: 35px 0px 0px;
	}

	.meta {padding: 0 0 25px 0;}

	.card__copy {
		font-size: 90%;
		padding: 25px 0px 100px;
	}
}