@charset "UTF-8";
/* CSS Document */

.menu-placeholder { height: 80px; }

main {
	padding-top: 50px;
	padding-bottom: 50px;
}
main h1 {
	font-family: Prata;
    font-size: 4rem;
    line-height: 1.1;
    color: var(--steel);
    text-align: left;
    margin-bottom: 50px;	
}

main h2 {
	margin-top: 30px;
	margin-bottom: 10px;
	color: var(--steel);
}

main .lead {
	font-size: 1.3rem;
	line-height: 1.4;
}
	.tpl-about-us main .lead {
		padding-block:55px;
		background-color: var(--steel_extralight);
	}
	.tpl-about-us main .lead .inset {
		padding-left:10%;
		padding-right: 15%;
	}
	main .lead h3 {
		max-width: 33%;
		text-wrap:balance;
	}
	main figure.about-us {
		background-image: url("../../images/picto/29.png");
		float: right;
		width: auto;
		height: 300px;
		aspect-ratio: 4 / 2;
		position: relative;
		top: -60px;
		margin-bottom: -60px;
	}
	
/* story */

	ul.story {}
	ul.story li {
		margin-bottom: 15px;
	}
	
/* why-choose-us */
	
	ul.why-choose-us {
		padding: 0 0 0 1.25em;
	}
	ul.why-choose-us li {
		margin-bottom: 15px;
		list-style:disc;
	}


/* timeline */

	/* shared */
			.timeline {
				overflow: hidden;
				padding-top: 20px;
				margin-top: -20px;
			}
			.timeline ul {
				font-size: 0; line-height: 0;
				margin: 0;
				padding: 0;
			}
			.timeline ul li {
				vertical-align: top;
				font-size: 1.3rem;
				line-height: 1.2;
			}
			.timeline ul li:before {
				display: block;
				position: relative;
				content:"";
			}
			.timeline[data-count="4"] ul li {width: 25%;}
			.timeline ul li i {
				display: inline-block;
				position: relative;
				vertical-align: top;
				position: relative;
				background-color: white;
			}
			.timeline ul li i:before {
				display: block;
				position: absolute;
				inset:0;
				content:"";
				background-image: url(../../images/page/about-us/flag.png);
				background-size: contain;
				background-repeat: no-repeat;
			}
			.timeline ul li:last-child i:before {filter: invert(52%) sepia(25%) saturate(7443%) hue-rotate(73deg) brightness(103%) contrast(80%);}
			.timeline ul li .year {
				display: block;
				font-size: 3rem;
				color: var(--steel);
			}
			.timeline ul li .event {
				display: block;
				text-wrap:balance;
				font-size: 1.1rem;
				line-height: 1.4;
				color: var(--steel);
			}
			.timeline ul li:last-child .event {
				color: var(--steel_dark);
				font-weight: 600;
			}
			ul.story {
				padding: 0 0 0 1.25em;
			}
			ul.story li {
				list-style: disc;
			}

		/* desktop */	@media screen and (min-width:960px){
			.timeline ul li {
				display: block;
				min-width: 300px;
				text-align: left;
				margin-bottom: 20px;
			}
			.timeline ul li:before {
				display: block;
				width: 0;
				height: 100%;
				transform:translateX(-50%);
				border-left: 2px dotted var(--steel_light);
			}
			.timeline ul li i {
				display: inline-block; 
				vertical-align: top; 
				top:-15px;
				position: relative;
				vertical-align: top;
				top:          -5px;
				width:         30px;
				height:        35px;
				border-radius: 35px;
			}
			.timeline ul li .year { 
				display: inline-block; 
				vertical-align: top;
				font-size: 1.8rem; 
				line-height: 1.2;
				margin-bottom: 10px;
			}
			.timeline ul li .event { 
				text-align: left;
				display: block;
				text-wrap:balance;
				padding-left:30px;
				padding-right:10px;
			}
		}
		
		/* mobile */	@media screen and (min-width:700px) and (max-width:959px){
			.timeline ul li {
				display: inline-block;
				text-align: center;
			}
			.timeline ul li:before {
				display: block;
				height: 0;
				transform:translateY(-50%);
				border-top: 2px dotted var(--steel_light);
			}
			.timeline ul li i {
				display: inline-block; 
				vertical-align: top; 
				top:-15px;
				position: relative;
				vertical-align: top;
				top:          -20px;
				width:         40px;
				height:        40px;
				border-radius: 40px;
			}
			.timeline ul li .year {
				display: block; 
				font-size: 2.5rem; 
				line-height: 1.2;
				margin-bottom: 5px;
			}
			.timeline ul li .event {
				display: block;
				text-wrap:balance;
				padding-left:15%;
				padding-right:15%;
			}
			.columns.timeline-templates         { display: block; width: 100%; }
			.columns.timeline-templates .column { display: block; width: 100%; }
		}
		/* mobile */	@media screen and (min-width:310px) and (max-width:699px){
			.timeline ul li {
				display: block;
				text-align: left;
				min-height: 50px;
				margin-bottom: 10px;
			}
			.timeline ul li:before { display: none; }
			.timeline ul li i {
				display: block; 
				vertical-align: top; 
				position: relative;
				vertical-align: top;
				width:         30px;
				height:        30px;
				margin: 0 0 -30px 0;
				border-radius: 30px;
				top:            0px;
			}
			.timeline ul li .year {
				display: block; 
				position: relative;
				height:        30px;
				margin: 0 0 -30px 40px;
				font-size: 2.0rem; 
				line-height: 1.2;
			}
			.timeline ul li .event {
				display: block; 
				position: relative;
				margin: 0 0 0 130px;
				text-wrap:balance;
			}
			.columns.timeline-templates         { display: block; width: 100%; }
			.columns.timeline-templates .column { display: block; width: 100%; }
			.timeline[data-count="4"] ul li {width: 100%;}
			
		}
	
		@media screen and (min-width:1440px)                        { }
		@media screen and (min-width:1240px) and (max-width:1439px) { }
		@media screen and (min-width:1040px) and (max-width:1239px) { }
		@media screen and (min-width: 960px) and (max-width:1039px) { }
		@media screen and (min-width: 860px) and (max-width: 959px) { }
		@media screen and (min-width: 700px) and (max-width: 859px) { }
		@media screen and (min-width: 580px) and (max-width: 699px) { }
		@media screen and (min-width: 310px) and (max-width: 579px) { }
		@media screen and (min-width:   0px) and (max-width: 309px) { }



		/* desktop */	@media screen and (min-width:960px){
		}
		/* tablet */	@media screen and (min-width:700px) and (max-width:959px){
		}
		/* mobile */	@media screen and (max-width:699px){
		}

		
/* removing Read more.. button on the page, where the button leads */

	.column[data-content="about-us"] a.inline-button { display: none; }