html {scroll-behavior: smooth;} 
#headline {margin-bottom:0;} 
#head-text {width:100%; aspect-ratio:1920/410; background:url('../toulouse/cmf-2023.jpg'); background-size:cover; position:relative; background-position:right center;} 
@media only screen and (max-width: 1000px) { 
#head-text {width:100%; aspect-ratio:1/1; height:213px; background-position:30% center;} 
} 
#content {width:95%; max-width:1780px; margin:0 auto;}
#content h1 {padding:0 0 20px 20px; margin:0; font:60px/60px 'gothammediumregular', arial, sans-serif; color:#445460;} 
#content h1 span {color:#e8473c;}  
#content h3 {padding:0 0 10px 20px; margin:0; font:24px/24px 'gothammediumregular', arial, sans-serif; color:#070C19;} 
#content p {padding:0 0 0 20px; margin:0; font:18px/18px 'gothammediumregular', arial, sans-serif; color:#070C19;} 
#content p span {color:#e8473c;}  
#content h4 {padding:0 0 10px 20px; margin:0; font:22px/40px 'gothammediumregular', arial, sans-serif; color:#070C19;}  
#content h4 a {color:#1B8CAE;} 
@media only screen and (max-width: 900px) {
#content h1 {font:60px/60px 'gothammediumregular', arial, sans-serif;} 
} 
@media only screen and (max-width: 600px) {
#content h1 {font:40px/40px 'gothammediumregular', arial, sans-serif;} 
} 
#text-panel {width:95%; max-width:1410px; margin:100px auto;} 
#text-panel h4 {padding:45px 13%; margin:0; font:26px/30px 'gotham_bookitalic', arial, sans-serif; color:#070C19; background:url('../partenaires/icon-guillemet.png') no-repeat 20px top, url('../partenaires/icon-guillemet-close.png') no-repeat right bottom;} 
#text-panel p {padding:40px 13% 80px 13%; margin:0; font:24px/24px 'gothammediumitalic', arial, sans-serif; color:#070C19;} 
#text-panel p a {color:#1B8CAE;} 
@media only screen and (max-width: 600px) {
#text-panel h4 {font:20px/26px 'gothammediumitalic', arial, sans-serif;} 
#text-panel p {font:16px/16px 'gothammediumitalic', arial, sans-serif;} 
} 
#logos {width:95%; max-width:1410px; margin:50px auto;} 
#logos .section {width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; margin:70px 0; gap:20px;} 
#logos .section.centered {justify-content:center;} 
#logos .section .logo {width:320px; aspect-ratio:320/180; position:relative; margin:15px 0;} 
#logos .section .blank {width:320px;} 
#logos .section .logo img {display:block; opacity:1; position:relative; z-index:10; transition:0.5s;} 
#logos .section .logo img:hover {transform:scale(1.05); filter: grayscale(1);} 
@media only screen and (max-width: 750px) {
#logos .section .logo {width:250px; aspect-ratio:320/180; position:relative; margin:15px 0;} 
#logos .section .blank {width:250px;} #logos .section .logo img {width:250px;} 
} 
@media only screen and (max-width: 550px) {
#logos {width:250px;} 
} 

/* update to add styles for headings */
#heading {text-align:center;}
#heading h1 {display:inline-block; font:80px/121px 'gothambold', arial, sans-serif; color:#070c19; padding:0 35px; position:relative;}
#heading h1 img {display:block; position:absolute; right:0; top:0;}
h2.icons {font:30px/40px 'gotham_blackregular', arial, sans-serif; color:#070c19; text-align:center; margin-top:160px;}

/* update to flex-boxes to allow various numbers on each line and centered logos */
#logos .section {margin:40px 0 70px 0;} 

#logos .section.inst {justify-content: space-evenly; gap:10px;}
#logos .section.inst .logo {width:260px;}
#logos .section.inst .logo img {width:100%; display:block;}

#logos .section.diamant { justify-content: space-evenly; gap:10px;}
#logos .section.diamant .logo {width:320px;}
#logos .section.diamant .logo img {width:100%; display:block;}

#logos .section.platine { justify-content: space-evenly; gap:10px;}
#logos .section.platine .logo {width:300px;}
#logos .section.platine .logo img {width:100%; display:block;}

#logos .section.or { justify-content: space-evenly; gap:10px;}
#logos .section.or .logo {width:190px;}
#logos .section.or .logo img {width:100%; display:block;}

/* grid styles for left aligned last line */
#logos .section-grid {display:grid; justify-content:space-between;}
#logos .section-grid.inst {grid-template-columns:repeat(auto-fill, 260px); gap:40px 10px;}
#logos .section-grid.inst .logo img {width:260px; display:block;}

#logos .section-grid.platine {grid-template-columns:repeat(auto-fill, 300px); gap:40px 10px;}
#logos .section-grid.platine .logo img {width:260px; display:block;}

#logos .section-grid.or {grid-template-columns:repeat(auto-fill, 190px); gap:40px 10px;}
#logos .section-grid.or .logo img {width:190px; display:block;}

#logos .section-grid .logo img {display:block; opacity:1; position:relative; z-index:10; transition:0.5s;} 
#logos .section-grid .logo img:hover {transform:scale(1.05); filter: grayscale(1);} 

/* media query to reduce font sizes */
@media only screen and (max-width: 900px) {
	#heading h1 {display:inline-block; font:40px/60px 'gothambold', arial, sans-serif; color:#070c19; padding:0 17px; position:relative;}
	#heading h1 img {display:block; position:absolute; right:0; top:0; height:60px;}
	h2.icons {font:20px/25px 'gotham_blackregular', arial, sans-serif; color:#070c19; text-align:center; margin-top:160px;}
}
@media only screen and (max-width: 450px) {
	#heading h1 {display:inline-block; font:30px/45px 'gothambold', arial, sans-serif; color:#070c19; padding:0 12px; position:relative;}
	#heading h1 img {display:block; position:absolute; right:0; top:0; height:45px;}
	h2.icons {font:20px/25px 'gotham_blackregular', arial, sans-serif; color:#070c19; text-align:center; margin-top:160px;}
}