nav#yourvoice {
	margin-bottom:1.5em;
	padding-bottom:1.5em;
	border-bottom:2px dotted #ddd;
	position:relative;
}

#button-switcher {display:flex;}
#button-switcher .button {display:flex!important;align-items:center;justify-content:center;}

nav#yourvoice > div {
	display:block;
	float:left;
	height:100%;
	width:15%;
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
}

nav#yourvoice > div + div {
	margin-left:2%;
}

nav#yourvoice > div > a {
	display:block;
	width:100%;
	height:100%;
}

nav#yourvoice > div .yv-menu {
	position:absolute;
	top:100%;
	width:100%;
	margin-top:-2em;
	left:0;
	opacity:0;
	max-height:0;
	overflow:hidden;
	z-index:10;
}

nav#yourvoice > div .yv-menu > div {
	background:#eee;
	padding:25px;
	position:relative;
	box-shadow:0px 2px 3px rgba(0,0,0,0.2);
}

nav#yourvoice > div:hover .yv-menu {
	opacity:1;
	max-height:none;
	padding-top:20px;
	overflow:visible;
}

nav#yourvoice > div .yv-menu > div > div {
	overflow:hidden;
	background-color:inherit;
}

nav#yourvoice > div .yv-menu > div:before {
	content:"";
	position:absolute;
	top:0;
	margin-top:-20px;
	border:10px solid transparent;
	border-bottom-color:#eee;
	margin-left:-10px;
	left:24.5%;
}

nav#yourvoice > div.democracy .yv-menu > div:before {
	left:41.5%;
}

nav#yourvoice > div.policy .yv-menu > div:before {
	left:58.5%;
}

nav#yourvoice > div.campaign .yv-menu > div:before {
	left:75.5%;
}

nav#yourvoice > div.elected-officers .yv-menu > div:before {
	left:92.5%;
}

nav#yourvoice .yv-home {
	background-image:url(https://im.cardiffstudents.com/your-voice/home.svg);
}

nav#yourvoice .yv-home:hover, nav#yourvoice .yv-home.active {
	background-image:url(https://im.cardiffstudents.com/your-voice/home2.svg);
}

nav#yourvoice .reps {
	background-image:url(https://im.cardiffstudents.com/your-voice/student-reps.svg);
}

nav#yourvoice .reps:hover, nav#yourvoice .reps.active {
	background-image:url(https://im.cardiffstudents.com/your-voice/student-reps2.svg);
}

nav#yourvoice .democracy {
	background-image:url(https://im.cardiffstudents.com/your-voice/democracy.svg);
}

nav#yourvoice .democracy:hover, nav#yourvoice .democracy.active {
	background-image:url(https://im.cardiffstudents.com/your-voice/democracy2.svg);
}

nav#yourvoice .policy {
	background-image:url(https://im.cardiffstudents.com/your-voice/policy.svg);
}

nav#yourvoice .policy:hover, nav#yourvoice .policy.active {
	background-image:url(https://im.cardiffstudents.com/your-voice/policy2.svg);
}

nav#yourvoice .campaign {
	background-image:url(https://im.cardiffstudents.com/your-voice/campaign.svg);
}

nav#yourvoice .campaign:hover, nav#yourvoice .campaign.active {
	background-image:url(https://im.cardiffstudents.com/your-voice/campaign2.svg);
}

nav#yourvoice .elected-officers {
	background-image:url(https://im.cardiffstudents.com/your-voice/officers.svg);
}

nav#yourvoice .elected-officers:hover, nav#yourvoice .elected-officers.active {
	background-image:url(https://im.cardiffstudents.com/your-voice/officers2.svg);
}

nav#yourvoice h4 {
	font-family: 'langdonregular';
	font-weight:normal;
	text-align:center;
	margin-top:0;
	color:#fff;
	border-radius:5px;
	background:#95308b;
	padding:0.5em;
	text-transform:uppercase;
	font-size:1.5em;
	margin-bottom:0.5em;
}

nav#yourvoice .cta {
	font-family: 'langdonregular';
	font-weight:normal;
	text-align:center;
	color:#fff;
	border-radius:5px;
	padding:0.5em;
	text-transform:uppercase;
	font-size:1.5em;
	background:#444;
	display:inline-block;
	cursor:pointer;
}

nav#yourvoice .cta:hover {
	background:#95308b;
}

nav#yourvoice > div .yv-menu li {
	float:left;
	width:50%;
	padding-right:1.2em;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	margin-top:0.3em;
}

nav#yourvoice > div .yv-menu li a {
	color:#333;
	font-weight:700;
}

nav#yourvoice > div .yv-menu li a:hover {
	color:#95308b;
}

nav#yourvoice .image {
	display:inline-block;
	border-radius:100%;
	background:#ddd;
	background-position:center;
	background-size:cover;
}

nav#yourvoice .image img {
	width:100%;
	vertical-align:middle;
	opacity:0;
}

nav#yourvoice .voice-divider {
	clear:both;
	border-bottom:2px dotted #ddd;
	margin-bottom:2em;
	padding-top:2em;
}

nav#yourvoice .voice-divider + .third {
	margin-left:0;
}

nav#yourvoice .democracy .third .image {
	width:36%;
	margin-right:4%;
}

nav#yourvoice .democracy .third div {
	vertical-align:middle;
}

nav#yourvoice .democracy .third .cta {
	width:50%;
}

nav#yourvoice .campaign .third {
	text-align:center;
}

nav#yourvoice .campaign .third .image {
	width:60%;
	max-width:200px;
}

nav#yourvoice .campaign .third .cta {
	width:70%;
	margin:1em auto 0;
	font-size:1.8em;
	max-width:240px;
	display:block;
}

nav#yourvoice .quarter {
	width:22%;
	float:left;
	text-align:center;
}

nav#yourvoice .quarter + .quarter {
	margin-left:4%;
}

nav#yourvoice .policy .quarter .image {
	width:80%;
}

nav#yourvoice .policy .quarter .cta {
	width:90%;
	margin-top:1em;
	font-size:1.8em;
}

nav#yourvoice .elected-officers .quarter .image {
	width:45%;
	background-size:175%;
	background-color:#f9f9f9;
	background-position:50% 5%;
	background-repeat:no-repeat;
}

nav#yourvoice .elected-officers .cta {
	width:60%;
	margin-top:1em;
}

nav#yourvoice .yv-menu a:hover .cta {
	background:#95308b;
}

nav#yourvoice a {
	text-decoration:none;
	cursor:pointer;
}

.flex {display:flex;align-items:stretch;justify-content:space-between;}

#twitter-feed {
	border-radius:5px;
	position:relative;
border:1px solid rgba(144,42,141,0.3);height:100%;
	border-radius:5px;
}

#twitter-feed > div {
	padding:10px;
position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden;
	padding-top:50px;
	overflow:hidden;
}

#twitter-feed header {
	padding:10px;
	border-radius:5px 5px 0 0;
	border-bottom:1px solid rgba(144,42,141,0.3);
	font-weight:700;
	text-decoration:none;
	color:rgb(144,42,141);
	position:absolute;top:0;left:0;right:0;
}

#twitter-feed article {
	color:#555;
	font-size:0.8em;
}

#twitter-feed article + article {
	border-top:1px dotted #ddd;
	margin-top:1em;
	padding-top:1em;
}

@media screen and (max-width: 980px){
	
	nav#yourvoice .campaign .third {
		width:33.3%!important;
		float:left;
	}

	nav#yourvoice .campaign .third .cta {
		width:80%;
		font-size:1.6em;
		
	} 
	
	#button-switcher {flex-wrap:wrap;}
	
	#button-switcher .button + .button {margin-left:0!important;}
	
	#button-switcher .button {width:48%!important;}
	
	#button-switcher .button:nth-child(2n+2) {margin-left:4%!important;}
	#button-switcher .button:nth-child(n+3) {margin-top:1em;}
}
@media screen and (max-width: 760px){
	.flex {flex-wrap:wrap;}

	#yourvoice > div > a{
		pointer-events: none;
	}
	
	.cta {
		box-sizing:border-box;
		-moz-box-sizing:border-box;
	}

	nav#yourvoice .quarter .image, nav#yourvoice .democracy .third .image, nav#yourvoice .campaign .third .image {
		display:none !important;
	}

	nav#yourvoice .voice-divider {
		margin-bottom:1.2em;
		padding-top:.5em;
		display:none;
	}

	nav#yourvoice .quarter {
		float:none;
		width:100%;
		display:block;
	}

	nav#yourvoice .quarter + .quarter {
		margin:1em 0 0;
	}

	nav#yourvoice .policy .quarter .cta, nav#yourvoice .democracy .third .cta, nav#yourvoice .campaign .third .cta, nav#yourvoice .elected-officers .cta {
		width:100%;
		margin:0 auto;
		display:block;
		max-width:13em;
	}

	nav#yourvoice .policy .quarter .cta, nav#yourvoice .campaign .third .cta {
		max-width:10em;
	}

	nav#yourvoice .voice-divider + .quarter {
		margin-top:1em;
	}

	nav#yourvoice {
		padding-bottom:1em;
		margin-bottom:1em;
	}

	nav#yourvoice .campaign .third {
		float:none;
		width:100% !important;
		display:block;
	}

	nav#yourvoice .campaign .third + .third {
		margin-top:1em;
	}

	nav#yourvoice .campaign .third .cta {
		font-size:1.8em;
	}
}
@media screen and (max-width:480px){
	nav#yourvoice > div .yv-menu li {
		float:none;
		width:100%;
	}
}