/*

Theme Name: Strasbourg Galerie Tour
Author: Stéphane Bourgeaud-Lignot
Description: Thème du Strasbourg Galerie Tour
Version: 1.0

*/


/* ----- Imports ----- */

/*@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Inter:ital,wght@0,100..900;1,100..900&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap');

/* ----- CSS RESET ----- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* ----- Structure ----- */

.wcontainer {width:100%; padding:0; box-sizing: border-box;}
.ncontainer {max-width:1100px; margin:auto; box-sizing: border-box; padding: 30px;}

.ncontainer.shaped {border-radius: 40px 0 40px 0;}
.ncontainer.shaped.main {position: relative; top:-80px; z-index:999; background-color:#FFF; }

.flex2cols {display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: flex-end; gap: 50px;}
.flex2cols div { min-width:300px;}

#image600 {width:100%; height:600px; background-color: #0C4A7B; z-index:100;}
#image600 img {object-fit: cover; width:100%; height: 600px;}



/* ----- Fonts ----- */
html, p { font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 400; color:#000; font-size:16px; margin: 0 0 20px; line-height: 1.15;}
h1 {  font-family: "Inter", serif; font-optical-sizing: auto; font-weight: 700; color: #000; font-size: 64px; line-height: 60px;}
h2 {  font-family: "Inter", sans-serif; font-optical-sizing: auto; font-weight: 700; color: #000; font-size: 24px; margin:50px 0 30px;}
h3 {  font-family: "Inter", serif; font-optical-sizing: auto; font-weight: 700; color: #000; font-size: 21px; margin:30px 0 30px;}
strong {text-transform: uppercase; color:#0C4A7B; font-size:12px; font-weight: 800;}

p {text-align: justify;}
a {text-decoration: none; color: inherit;}
a:hover {text-decoration: underline; color:#F00;}

p.overtitle {font-size:21px; margin:0px; text-transform: uppercase; font-weight: 400; line-height: 1;}
p.subtitle {font-size:21px;font-weight: 700; line-height: 1;}



/* -------- Navig --------- */
nav {position:fixed; top:30px; left:0; width:100%; padding:0; box-sizing: border-box; z-index: 9999;}
nav .ncontainer {height: 80px; position: relative; line-height: 80px; padding:0;  background: rgba(255, 255, 255, 0.5); border-radius: 40px 0 40px 0; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
#logo {position: absolute; top:5px; left: 5px;}
nav .ncontainer ul {position:absolute; top:0; right:40px;}
nav .ncontainer li {display:inline-block; width: auto; line-height: 74px; padding:0 15px; margin: 0 10px; }
nav .ncontainer li:hover {border-bottom: 3px solid #000;}



/* -------- Tiles -------- */

.tile_container {display:flex; column-gap: 50px; overflow: scroll; margin:-50px; padding: 50px; box-sizing: border-box;}
.tile_250 {background-color: #FFF; width:250px; height:400px; filter: drop-shadow(0px 15px 15px #CCC); position: relative;}
.tile_250 img {width:250px; height: 250px; object-fit: cover;}

.tile_250 .label {display:inline; font-size: 10px; text-transform: uppercase; background: rgba(255, 255, 255, 0.5); padding: 10px 20px; border-radius: 15px 0 15px 0; width: auto; position: absolute; top:235px; right:0; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.tile_250 h3 { padding: 0 10px; position: absolute; left: 0; top:240px; max-height:75px; overflow: hidden; line-height: 22px;}
.tile_250 .date {padding: 0 10px; position: absolute; left: 0; top:345px;}
.tile_250 .place {padding: 5px 10px; position: absolute; left: 0; top:370px; width: 100%; border-top: 1px solid #CCC; box-sizing: border-box;} 


.tile_350 {background-color: #FFF; width:350px; height:395px; filter: drop-shadow(0px 15px 15px #CCC);}









@media (max-width: 940px) { 

	#image600 {height:400px;}
	.flex2cols {display:block;}
	.tile_container {margin:0px; padding: 30px;}
	p {text-align: left;}





}