@import url("//hello.myfonts.net/count/346cf7");

@font-face {
    font-family: 'LunchBoxSlab';
    src: url('//js.cardiffstudents.com/fonts/346CF7_0_0.eot');
    src: url('//js.cardiffstudents.com/fonts/346CF7_0_0.eot?#iefix') format('embedded-opentype'), url('//js.cardiffstudents.com/fonts/346CF7_0_0.woff2') format('woff2'), url('//js.cardiffstudents.com/fonts/346CF7_0_0.woff') format('woff'), url('//js.cardiffstudents.com/fonts/346CF7_0_0.ttf') format('truetype');
}

body {background:#f5f6f6 url(//im.cardiffstudents.com/societies/gos-background.png) no-repeat top center;}
#container.guild-2017 #main {margin-top:14em;}
#societies-nav {display:flex;margin-top:-.5em;margin-bottom:2.5em;justify-content:space-between;position:relative;}
#societies-nav > span {width:14%;height:12em;}
#societies-nav > span > a {display:block;/*position:absolute;top:0;left:0;right:0;bottom:0;*/width:100%;height:100%;background-size:contain;background-position:center;background-repeat:no-repeat;position:relative;}
#societies-nav > span > a:after {content:"";opacity:0;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;background-size:contain;background-position:center;background-repeat:no-repeat;
transition: all 0.2s;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
-o-transition: all 0.2s;
}
#societies-nav > span:hover > a:after {opacity:1;}

#main h2, h1, .soc-content h2, .msl-poll-title, #main.nus h2, #main.fancy h2 {font-family: 'LunchBoxSlab';font-size:6em;line-height:.8em;color:#2EA3DC;margin-top:.2em;margin-bottom:.4em;}

#main h2:first-child, #main h3:first-child, .soc-content h3:first-child, .soc-content h2:first-child, h1:first-child, #main #banner + h2, #cymraeg-link + h2, #cymraeg-link + h1 {margin-top:-.1em!important;}

#societies-nav > span.involved > a {background-image:url(//im.cardiffstudents.com/societies/involved.svg);}
/*#societies-nav > span.involved:hover > a, */#societies-nav > span.involved/*:hover*/ > a:after {background-image:url(//im.cardiffstudents.com/societies/involved-blue.svg);}

#societies-nav > span.events a {background-image:url(//im.cardiffstudents.com/societies/events.svg);}
/*#societies-nav > span.events:hover a, */#societies-nav > span.events/*:hover*/ a:after {background-image:url(//im.cardiffstudents.com/societies/events-blue.svg);}

#societies-nav > span.start a {background-image:url(//im.cardiffstudents.com/societies/start.svg);}
/*#societies-nav > span.start:hover a, */#societies-nav > span.start/*:hover*/ a:after {background-image:url(//im.cardiffstudents.com/societies/start-blue.svg);}

#societies-nav > span.resources a {background-image:url(//im.cardiffstudents.com/societies/resources.svg);}
/*#societies-nav > span.resources:hover a, */#societies-nav > span.resources/*:hover*/ a:after {background-image:url(//im.cardiffstudents.com/societies/resources-blue.svg);}

#societies-nav > span.contac a {background-image:url(//im.cardiffstudents.com/societies/contact.svg);}
/*#societies-nav > span.contac:hover a, */#societies-nav > span.contac/*:hover*/ a:after {background-image:url(//im.cardiffstudents.com/societies/contact-blue.svg);}

#societies-nav .mslwidget {position:absolute;top:100%;left:0;padding-top:20px;width:100%;height:0;z-index:10;display:none;}
#societies-nav .msl_navbar {padding:0;list-style-type:none;margin:0;background:#2EA3DC;color:#fff;border-radius:5px;padding:0 .5em;display:inline-block;}
#societies-nav .msl_navbar:before {position:absolute;bottom:100%;left:7%;content:"";border:8px solid transparent;border-bottom-color:#2EA3DC;display:block;margin-bottom:-20px;margin-left:-8px;}
#societies-nav .msl_navbar li {display:inline-block;white-space:nowrap;margin:0 !important;}
#societies-nav .msl_navbar li a {color:#fff;display:inline-block;padding:.6em .85em;font-weight:700;}

#societies-nav > span:hover .mslwidget {display:block;}

.left-content, .right-content {
transition: opacity 0.2s;
-moz-transition: opacity 0.2s;
-webkit-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
}

#societies-nav:hover ~ .left-content, #societies-nav:hover ~ .right-content {opacity:.5;}

#container.guild-2017 .soc-hr {clear:both;margin:2em 0;}

#ctl00_groupinglist_pnlSearch {margin-bottom:1.5em;}
#ctl00_groupinglist_pnlSearch input {height:32px;display:inline-block;vertical-align:middle;}
#ctl00_groupinglist_pnlSearch input[type=text] {border:1px solid #ddd;outline:none;margin-right:5px;}

#working-on {margin-top:1em;border-radius:10px;overflow:hidden;}
#working-on > div {opacity:1;}
#working-on > div#full-list {overflow-y:scroll;max-height:70vh!important;border-radius:10px;display:flex;flex-wrap:wrap;align-items:stretch;}

#full-list article {width:18%;display:flex;justify-content:center;flex-direction:column;}

#society-otm .button-wrapper {display:flex;font-size:1.2em;}
#society-otm .button {flex-grow:1;}
#society-otm .button + .button {margin-left:1em;}
#society-otm .image {border-radius:5px;}

.cat0.on,.cat0:hover {background:#EA0B73 !important; }
.cat1.on,.cat1:hover {background:#8CC43F !important; }
.cat2.on,.cat2:hover {background:#F47721 !important; }
.cat3.on,.cat3:hover {background:#902A8D !important; }
.cat4.on,.cat4:hover {background:#E01C24 !important; }
.cat5.on,.cat5:hover {background:#2EA3DC !important; }
.cat6.on,.cat6:hover {background:#E9CB00 !important; }

@media screen and (max-width: 1140px), screen and (max-height: 810px) {

#main h2, h1, .soc-content h2, .msl-poll-title, #main.nus h2, #main.fancy h2 {font-size:5em;}
#societies-nav > span {width:15%;height:11em;}
#societies-nav {margin-bottom:2em;}

}


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

#main h2, h1, .soc-content h2, .msl-poll-title, #main.nus h2, #main.fancy h2 {font-size:4em;}
#societies-nav > span {height:18vw;}
#full-list article {width:23%;}

}

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

body {background-size:1600px;}
#container.guild-2017 #main {margin-top:11em;}
#societies-nav {margin-bottom:1em;}
#society-otm .button-wrapper {max-width:30em;margin-left:auto;margin-right:auto;}
#main h2, h1, .soc-content h2, .msl-poll-title, #main.nus h2, #main.fancy h2 {font-size:10vw;}
#full-list article {width:31%;)

}

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

#full-list article {width:48%;)

}

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

#full-list article {width:98%;)

}