@font-face {
    font-family: 'KGHAPPYSolid';
    src: url('//js.cardiffstudents.com/fonts/KGHAPPYSolid-webfont.woff2') format('woff2'),
         url('//js.cardiffstudents.com/fonts/KGHAPPYSolid-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {background:#74c043 url(/pageassets/about-cusu/umcc/umcc.jpg) no-repeat center top;}

#umcc-nav {margin-bottom:2em;display:flex;justify-content:space-between;}
#umcc-nav span {display:inline-block;width:15%;background-size:contain;background-repeat:no-repeat;background-position:center top;padding-bottom:12%;position:relative;}
#umcc-nav span a {position:absolute;top:0;left:0;right:0;bottom:0;}

#umcc-nav span.cartref {background-image:url(//im.cardiffstudents.com/umcc/cart-1.png);}
#umcc-nav span.cymdeithasau {background-image:url(//im.cardiffstudents.com/umcc/cym-1.png);}
#umcc-nav span.dysgwyrus  {background-image:url(//im.cardiffstudents.com/umcc/pyw-1.png);}
#umcc-nav span.pwyllgor  {background-image:url(//im.cardiffstudents.com/umcc/dig-1.png);}
#umcc-nav span.gwasanaethau {background-image:url(//im.cardiffstudents.com/umcc/gwas-1.png);}
#umcc-nav span.digwyddiadau {background-image:url(//im.cardiffstudents.com/umcc/dysg-1.png);}

#umcc-nav span.cartref:hover, #umcc-nav span.cartref.active {background-image:url(//im.cardiffstudents.com/umcc/cart-2.png);}
#umcc-nav span.cymdeithasau:hover, #umcc-nav span.cymdeithasau.active {background-image:url(//im.cardiffstudents.com/umcc/cym-2.png);}
#umcc-nav span.dysgwyrus:hover, #umcc-nav span.pwyllgor.active {background-image:url(//im.cardiffstudents.com/umcc/pyw-2.png);}
#umcc-nav span.pwyllgor:hover, #umcc-nav span.digwyddiadau.active {background-image:url(//im.cardiffstudents.com/umcc/dig-2.png);}
#umcc-nav span.gwasanaethau:hover, #umcc-nav span.gwasanaethau.active {background-image:url(//im.cardiffstudents.com/umcc/gwas-2.png);}
#umcc-nav span.digwyddiadau:hover, #umcc-nav span.dysgwyrus.active {background-image:url(//im.cardiffstudents.com/umcc/dysg-2.png);}


#ban {margin:2em 0;}
#ban img {width:80%;max-width:30em;}

#main.fancy h2 {font-family: 'KGHAPPYSolid';color:#74c043;letter-spacing:-.01em;}

@media screen and (max-width:760px){

#umcc-nav span {width:30%;padding-bottom:20%;}
#umcc-nav span:nth-child(n+4) {margin-top:1em;}
#umcc-nav {flex-wrap:wrap;}

}