#main {font-family: "sofia-pro", sans-serif;font-weight: 400;font-style: normal;background: #fff;}

#header {background-image: url(img/bg01.png);background-size: cover;}
#header h1 {font-family: 'Poppins', sans-serif;font-weight: 900;color: #fff;text-align: center;font-size: 64px;padding: 10vh 0;max-width: 700px;margin: 0 auto;}

#hubs {min-height: 100vh;padding-bottom: 50px;}
#hubs .headline {text-align: center;padding: 8vh 0 5vh;}
#hubs .headline h3 {color: #989898;text-transform: uppercase;font-size: 18px;font-weight: 900;letter-spacing: 2px;margin: 0 0 5px;}
#hubs .headline p {color: #989898;}

#hubs #hubs-list {display: flex;flex-wrap: wrap;width: 100%;justify-content: center; row-gap: 50px;}
#hubs #hubs-list .hub { text-align: center;position: relative;flex: 0 0 32%;}
#hubs #hubs-list .hub .logo  { padding: 0 0 2vh;}
#hubs #hubs-list .hub .logo img {display: block;max-width: 70%;margin: 0 auto;transition: all 0.3s ease;}
#hubs #hubs-list .hub .access {color: #989898;text-decoration: none;font-weight: 800; padding: 0 0 5px;}
#hubs #hubs-list .hub .access::before {content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#hubs #hubs-list .hub:hover .logo img {transform: scale(1.025);}
#hubs #hubs-list .hub:hover .access {text-decoration: none;color: #2BC5DB;border-bottom: 2px solid #2BC5DB;}
#hubs #hubs-list .sep {width: 1px;background: #b7b9bd;/* height: 100%; */}

@media (max-width: 1000px) {
	#header { }
	#header h1 {font-size: 30px;padding: 5vh 0;}
	#hubs #hubs-list {flex-flow: column;}
	#hubs #hubs-list .sep { display: none; }
	#hubs #hubs-list .hub .logo { padding:0 0 15px;}
	#hubs #hubs-list .hub .logo img {max-width: 300px;width: 80%;}
}