body{ 
margin: 0;
font-size: 100%;
font-family: "Inter", Helvetica, sans-serif; 
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; 
width: 100%; 
height: auto; 
color: #191919;
}
body button{ border: none; background: none; font-style: normal; font-size: inherit; cursor: pointer; outline: none; text-align: left; }
body a{ text-decoration: none; color: inherit; }
body ul{ list-style-type: none; }
body address{ font-style: normal; } 

main{ 
	font-size: 16px; line-height: 20px; box-sizing: border-box; 
	padding: 80px 100px 0 100px;
}
main h2, main h3, main h4, main h5, main h6{ 
	font-family: "Heebo", Helvetica, sans-serif; 
}
main h2, main h3{ 
	font-size: 20px; line-height: 24px; 
}
main h4{ font-size: 18px; line-height: 22px;  }
main h5, main h6, main p{ font-size: 16px; line-height: 20px; }
main .tinytext{ font-size: 14px; line-height: 18px; }
main .opacity{ opacity: .5; }

.TWOCol{
	display: flex;
	width: 100%;		
}
.Col{ box-sizing: border-box; }
.Col-1{
	width: calc(100% / 1.55); 
	padding: 0 2em 0 0;
}
.Col-2, .title-page{  
	flex: 1;
} 

.TopNav {
	 box-sizing: border-box;
	 font-size: 14px;
	 line-height: 18px;
	 height: 80px;
	 z-index: 30000;
	 width: 100%;
	 display: flex;
	 position: fixed;
	 top: 0;
	 left: 0;
}
 .TopNav .title-page {
	 box-shadow: -2px 4px 12px 0 rgba(0, 0, 0, .4);
	 display: flex;
	 z-index: 3;
	 height: 80px;
	 background-color: #171717;
	 color: #fff;
	 align-items: center;
}
 .TopNav .title-page h2 {
 	 font-family: "Heebo", Helvetica, sans-serif;
	 font-size: 18px;
}
 .TopNav .title-page a {
	 width: 50px;
	 height: 100%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
}
 .TopNav .title-page a:hover {
	 background-color: #000;
}
 .TopNav .title-page a .icon {
	 width: 2em;
	 height: 2em;
	 fill: #fff;
}
.menuBar {
	z-index: 20000;
}
/* QUERY */
@media screen and (max-width: 1024px){ 
main{ padding: 80px 50px 0 50px  }
 .TWOCol{ flex-direction: column;  }
 .title-page{ display: none; position: absolute; left: -1000px;  }
 .Col-1{ padding: 0; }
 .Col-1, .Col-1-L, .Col-2-schedule, .Col-2-publication{ width: 100%; }
}

@media screen and (max-width: 768px){
 main{ font-size: 15px; line-height: 18px;  padding: 80px 25px 0 50px; } 
 /*Font size*/
 main h2, main h3{ font-size: 18px; line-height: 20px; }
 main h4{ font-size: 16px; line-height: 18px; }
 main h5, main h6, main p{ font-size: 15px; line-height: 18px; }
 .tinytext{ font-size: 13px; line-height: 15px; }

 .TopNav{ font-size: 13px; line-height: 15px;  }
 .title-page h2{ font-size: 16px; line-height: 18px; }
 .tile-page, .Col2{ flex: auto; width: 100%; }
}

@media screen and (max-width: 368px){ 
  main{ font-size: 14px; line-height: 16px; padding: 50px 25px 0 40px;  }
  /*Font size*/
  main h2, main h3{ font-size: 16px; line-height: 18px;  }
  main h4{ font-size: 15px; line-height: 17px; }
  main h5, main h6, main p{ font-size: 14px; line-height: 16px; }
 .TopNav{ height: 50px }
 .title-page h2{ font-size: 15px; line-height: 17px;  }
}