/*  ========================================================================

    Project:            Radioplayer.co.uk
    Author:             David Kenny
    Author URL          http://davidkenny.me
    Last updated:       05.03.2015

    TABLE OF CONTENTS:
    reset.css ......... Normalizes elements and fixes missing defaults.
    base.css .......... General styling.
    layout.css ........ Page foundations and grid structure.
    components.css .... Header, Main navigation and Footer.
    patterns.css ...... Commonly used markup.

    COLOR PALLETTE:

    Temp grey			GREY			#7f888f		RGBa(127,136,143,1)

    Body copy			CHARCOAL		#404040		RGBa(0, 0, 0, 0.75)
    Caption text		DARK GREY		#999999		RGBa(153, 153, 153, 1)
    Normal links        SKY BLUE		#1a9fd6		RGBa(26, 159, 214, 1)
    Code				PINK			#ec008c     RGBa(236, 0, 140, 1)
    Lighter shade		LIGHT GREY      #f8f8f8     RGBa(248, 248, 248, 1)
    Light shade			LIGHT GREY      #e6e6e6     RGBa(230, 230, 230, 1)
    Dark shade       	BLACK        	#333333     RGBa(51, 51, 51, 1)
    Background          WHITE	       	#ffffff     RGBa(255, 255, 255, 1)
    Borders + dividers	LIGHT GREY		#e6e6e6		RGBa(0, 0, 0, 0.1)


    ======================================================================== */

/*  ========================================================================
    Base styles
    ======================================================================== */


html,
button,
input,
select,
textarea {
    color: #404040;
    font-family: 'Lato', sans-serif;
    font-weight: normal;
    font-style: normal;
}

html {
    font-size: 1em;
    line-height: 1.5;
    background: #fff;
    background: RGBa(255, 255, 255, 1);
}

@media screen and (max-width: 400px) {
	html {
	    font-size: 0.8em;

	}
}

@media screen and (max-width: 770px) {
	html {
	    font-size: 0.9em !important;

	}
}

/*
 * Remove text-shadow in selection highlight,
 * These selection rule sets have to be separate.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule.
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #e6e6e6;
    border-color: RGBa(230, 230, 230, 1);
    margin: 2em 0;
    padding: 0;
}

/*
 * Remove the gap between images, videos, audio and canvas and the bottom of
 * their containers.
 */

audio,
canvas,
video {
    vertical-align: middle;
}

/*
 * Fix images.
 */

img {
    border: 0;
    -ms-interpolation-mode: bicubic;
    vertical-align: middle;
    max-height: 100%;
    max-width: 100%;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

.no-touch {
    overflow-y: scroll;
}





/*  ========================================================================
    Browse Happy prompt
    ======================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}





/*  ========================================================================
    Text-level semantics
    ======================================================================== */

a {
    color: #1a9fd6;
    color: RGBa(26, 159, 214, 1);
	text-decoration: underline;
}
    a:focus {
        outline: 0;
    }
    a:hover {
        color: #222;
    }
    a:link, a:visited, a:hover {
    }
    a:active {
        color: #222;
        transition: none;
    }

em, i, cite, var {
    font-family: Georgia,serif;
    font-style: italic;
    line-height: 90%;
}

strong, b {
    color: #333;
    font-weight: 300;
    line-height: 90%;
}

:lang(en-gb) > q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}
    q::before {
        content: open-quote;
    }
    q::after {
        content: close-quote;
    }

abbr {
    color: #666;
    font-size: 0.875em;
    line-height: 90%;
    letter-spacing: 0.0357em; /* 0.5px */
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted rgba(0,0,0,0.3);
    cursor: help;
}

code, samp {
    font-family: 'DejaVu Sans Mono',Inconsolata,Consolas,'Lucida Console',monospace;
    font-size: 1em; /* 16px */
    line-height: 150%;
}
    code {
        color: #ec008c;
        color: RGBa(236, 0, 140, 1);
    }
    code .comment {
        color: #404040;
        color: RGBa(0, 0, 0, 0.75)
    }

samp {
    background-color: #f8f8f8;
    background-color: RGBa(248, 248, 248, 1);
    padding: 0.25em;
}

kbd {
    color: #666;
    font-family: inherit;
    font-size: 87.5%;
    line-height: 90%;
    background-color: #f8f8f8;
    background-color: RGBa(248, 248, 248, 1);
    margin: 0 0.25em; /* 0 4px */
    border: 1px solid #b3b2b2;
    border-radius: 3px;
    padding: 0.3334em 0.5em;
    box-shadow: inset 0 1px 0 #fff;
}





/*  ========================================================================
    Grouping
    ======================================================================== */

p, pre, blockquote, ul, ol, dl, figure, figcaption, table, fieldset, details {
    font-size: 1em;
    line-height: 1.5em;
    margin: 0 0 2em;
}

pre {
    margin-left: 1.5em;
    white-space:  pre-wrap;
}
    pre code,
    pre samp {
        line-height: 1.5em;
    }

blockquote {
    margin: 2em 12%;
    font-size: 1.25em;
    line-height: 1.75em;
    color: #333;
}
    blockquote p {
        margin-bottom: 0.5em;
    }
    blockquote::before, blockquote::after {
        font-size: 440%;
        line-height: 0em;
        vertical-align: bottom;
    }
    blockquote::before {
        content: "\201C";
        padding-right: 6px;
    }
    blockquote::after {
        content: "\201D";
        padding-left: 6px;
    }

/*  Grouping > Lists  */
ol {
    list-style-type: decimal;
    padding: 0;
}

ul {
    list-style-type: square;
    padding: 0;
}
    ul li li {
        list-style-type: circle;
    }

    ul li ul	{
	    margin-bottom: 0;
    }

dt {
    font-size: 1em; /* 16px */
    font-weight: 700;
    line-height: 1.5; /* 24px */
}

dd, li {
    margin-left: 1.5em; /* 24px */
    }
    dd > *, li > * {
        margin-top: 0;
    }

/*  Grouping > Figures  */
figcaption {
    color: #999999;
    color: RGBa(153, 153, 153, 1);
    font-size: 0.75em; /* 12px */
    line-height: 1.3334; /* 16px */
    padding: 0.6667em 0; /* 8px 0 */
    clear: left;
}
    blockquote + figcaption {
        margin: 0 12%;
    }
        blockquote + figcaption::before {
            content: "\2014";
        }





/*  ========================================================================
    Sectioning
    ======================================================================== */

h1 {
	font-family: texgyreadventorregular, verdana, sans-serif;
    font-weight: 300;
    font-size: 2em; /* 32px */
    line-height: 1.25em; /* 32px */
    /*letter-spacing: 0.03125em; /* -1px */
    margin: 0.5em 0; /* 16px 0 */
    -webkit-font-smoothing: antialiased;
    color:#333;
}

h2,
article > h1,
section > h1,
nav > h1 {
	font-family: texgyreadventorregular, verdana, sans-serif;
    font-weight: 300;
    font-size: 1.5em; /* 24px */
    line-height: 1.25em; /* 24px */
    margin: 1.3334em 0 0.3334em; /* 32px 0 8px */
    -webkit-font-smoothing: antialiased;
    color:#333;
}

h3,
legend,
article article > h1,
article section > h1,
section section > h1,
section article > h1 {
	font-family: texgyreadventorregular, verdana, sans-serif;
    font-weight: 300;
    font-size: 1.3125em; /* 21px */
    line-height: 1.1429em; /* 24px */
    margin: 1.1429em 0 0.3810em; /* 24px 0 8px */
    -webkit-font-smoothing: antialiased;
    color:#333;
}

h4 {
	font-family: texgyreadventorregular, verdana, sans-serif;
    font-weight: 300;
    font-size: 1.125em; /* 18px */
    line-height: 1.3334em; /* 24px */
    margin: 1.3334em 0 0.4444em; /* 24px 0 8px */
    -webkit-font-smoothing: antialiased;
    color:#333;
}

h5 {
	font-family: texgyreadventorregular, verdana, sans-serif;
    font-weight: 300;
    font-size: 1em; /* 16px */
    line-height: 1.25em; /* 16px */
    margin: 1.5em 0 0.5em; /* 24px 0 8px */
    -webkit-font-smoothing: antialiased;
    color:#333;
}

h6 {
	font-family: texgyreadventorregular, verdana, sans-serif;
    font-weight: 300;
    font-size: 0.875em; /* 14px */
    line-height: 1.1429em; /* 16px */
    /*letter-spacing: 0.05em;
    margin: 1.7143em 0 0.5714em; /* 24px 0 8px */
    -webkit-font-smoothing: antialiased;
    color:#333;
}





/*  ========================================================================
    Example media queries
    ======================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}





/*  ========================================================================
    Helper classes
    ======================================================================== */

.centred	{
	text-align: center;
}

.shade	{
	background:#f8f8f8;
	background:RGBa(248, 248, 248, 1);
}

.shady	{
	background: #e6e6e6;
}

.shaded	{
	background: #404040;
}



/*
 * For floating items to the left of the page,
 * Adds margin to floated images.
 */

.pull-left {
    float: left;
}

img.pull-left {
    margin: 0 1em 0.5em 0; /* 0 16px 8px 0 */
}

/*
 * For floating items to the right of the page.
 * Adds margin to floated images.
 */

.pull-right {
    float: right;
}

img.pull-right {
    margin: 0 0 0.5em 1em; /* 0 0 8px 16px */
}

/*
 * For removing margin from last item in floated lists to fit width.
 */

.last {
    margin-right: 0 !important;
}

/*
 * For removing bullet styling from list items.
 */

.no-bullets li {
    list-style: none;
    margin-left: 0;
}

/*
 * Image replacement.
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers.
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders.
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard.
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout.
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/*
 * Embed YouTube videos responsively.
 */

.youtube_container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;  /* Standard HD widescreen aspect ratio. Adjust if video isn't in 16:9 widescreen (unlikely) */
    margin:2em 0;
}

.youtube_container iframe,
.youtube_container object,
.youtube_container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}





/*  ========================================================================
    Print styles.
    Inlined to avoid required HTTP connection:
    ======================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links.
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999999;
        border-color: RGBa(153, 153, 153, 1);
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

#main .content-block > div, .wrap {
    position: relative;
    max-width: 1200px;
    padding: 5em 5%;
    margin: 0 auto;
}

/*  ========================================================================
    Content foundations
    ======================================================================== */

#main .content-block {
    width: 100%;
    position: relative;
}
    #main .content-block > div, .wrap {
        position: relative;
        max-width: 1200px;
        padding: 5em 5%;
        margin: 0 auto;
    }

	.lt-ie9 #main .content-block > div, .lt-ie9 .wrap {
        max-width: 1200px;
        width:1200px !important;
    }

@media only screen and (max-width : 640px), only screen and (orientation : landscape) and (min-aspect-ratio : 16/9) and (max-width : 966px) {
	#main .content-block > div, .wrap {
	    padding: 12% 7.5% ;
	}
}

@media screen and (min-width: 1650px) {
	#main .content-block > div, .wrap {
        max-width: 1500px;
        padding: 5em 5%;
    }
}





/*  ========================================================================
    Grid structure
    ======================================================================== */

/**
 *  Twelve columns measuring 3.75% across, divided with a 5% margin.
 */

.col-one    {width: 3.75%;      margin: 0 5% 0 0;}  /*12 equal columns*/
.col-two    {width: 12.5%;      margin: 0 5% 0 0;}  /*6 equal columns*/
.col-three  {width: 21.25%;     margin: 0 5% 0 0;}  /*4 equal columns*/
.col-four   {width: 30%;        margin: 0 5% 0 0;}  /*3 equal columns*/
.col-five   {width: 38.75%;     margin: 0 5% 0 0;}
.col-six    {width: 47.5%;      margin: 0 5% 0 0;}  /*2 equal columns*/
.col-seven  {width: 56.25%;     margin: 0 5% 0 0;}
.col-eight  {width: 65%;        margin: 0 5% 0 0;}  /*2 thirds*/
.col-nine   {width: 73.75%;     margin: 0 5% 0 0;}  /*3 quarters*/
.col-ten    {width: 82.5%;      margin: 0 5% 0 0;}
.col-eleven {width: 91.25%;     margin: 0 5% 0 0;}

.col-one, .col-two, .col-three, .col-four, .col-five, .col-six, .col-seven, .col-eight, .col-nine, .col-ten, .col-eleven    {
    float: left;
}
    .grid *:last-child {
        margin-right: 0;
    }




/*  ========================================================================
    Core components
    ======================================================================== */

/*  Header  */
header[role="banner"] {
    background: #fff	;
    background: RGBa(255,255,255,1);
    color: #404040;
    color: RGBa(0,0,0,0.75);
    position: absolute;
    position: fixed;
    top: 0;
    left:0;
    -webkit-backface-visibility: hidden;
    width: 100%;
    z-index: 99999;
    border-bottom: 1px solid #e6e6e6;
}
	.lt-ie9 header[role="banner"] {
    position: relative;
}
	header[role="banner"] .wrap	{
		position: relative;
		padding-top:2em;
		padding-bottom:2em;
	}
	header[role="banner"] #logo {
		float: left;
		height:2.65em;
		width: 200px;
		margin: 0;
		background-image: url('./logo-header.png');
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 200px 30px;
		border-bottom:none;
	}
		.no-svg header[role="banner"] #logo	{
			background-image: url('./logo-header.jpg');
			background-repeat: no-repeat;
		}
		header[role="banner"] #logo span	{
			display: none;
		}
		/*iPad header padding fix*/
		@media only screen
		and (min-device-width : 768px)
		and (max-device-width : 1024px)
		and (orientation : landscape) {
			header[role="banner"] .wrap	{
				padding-top:1em;
				padding-bottom:1em;
			}
			header[role="banner"] #logo {
				height:2em !important;
				margin-top: .35em;
			}
		}

/*  Navigation  */
#menu-button	{
	display: none;
}
header[role="banner"] #listen-button-mini	{
	display:none;
}
header[role="banner"] #listen-button	{
	margin: 0 0 0 1em;
	float: right;
	font-size: 1em !important;
}
#global-nav	{
	float: right;
}
	#global-nav ul li	{
		margin-top: .75em;
	}
		#global-nav ul li a	{
			color: #000; /*#1a9fd6;
			color: RGBa(26, 159, 214, 1);*/
			text-decoration: none !important;
		}
	header[role="banner"] .wrap #global-nav ul  li a:hover 	{
		border-bottom:none;
		background:RGBa(0,0,0,0.02);
	}

		@media only screen
		and (min-device-width : 768px)
		and (max-device-width : 1024px)
		and (orientation : landscape) {
			header[role="banner"] #listen-button	{
				font-size: 0.8em !important;
				line-height: 1em;
			}
			#global-nav ul li	{
				margin-top: .4em;
			}
		}

/*	Page  */
#main 	{
	margin-top: 94px !important;
}
@media screen and (max-width: 770px) {
	#main 	{
		margin-top: 100px !important;
	}
}
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
		#main 	{
			margin-top: 57px !important;
		}
	}
#page-hero	{
	color:#fff;
	background: #1a9fd6;

	background: -moz-linear-gradient(-45deg, rgba(65,111,175,1) 0%, rgba(26,159,214,1) 30%, rgba(26,159,214,1) 70%, rgba(68,113,175,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(65,111,175,1)), color-stop(30%,rgba(26,159,214,1)), color-stop(70%,rgba(26,159,214,1)), color-stop(100%,rgba(68,113,175,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg, rgba(65,111,175,1) 0%,rgba(26,159,214,1) 30%,rgba(26,159,214,1) 70%,rgba(68,113,175,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(-45deg, rgba(65,111,175,1) 0%,rgba(26,159,214,1) 30%,rgba(26,159,214,1) 70%,rgba(68,113,175,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(-45deg, rgba(65,111,175,1) 0%,rgba(26,159,214,1) 30%,rgba(26,159,214,1) 70%,rgba(68,113,175,1) 100%); /* IE10+ */
	background: linear-gradient(135deg, rgba(65,111,175,1) 0%,rgba(26,159,214,1) 30%,rgba(26,159,214,1) 70%,rgba(68,113,175,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#416faf', endColorstr='#4471af',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    position: relative;
    z-index: 399;
    text-align: center;
    padding:0;
}
#page-hero h1	{
	font-weight: normal;
	color: #fff;
	}
#page-hero .lede	{
	font-size: 1em;
	margin-top: .75em;
}

#main header h1	{
	margin:0;
}
#secondary-cta	{
	text-align: center;
	background: #1a9fd6;
    background:	RGBa(26, 159, 214, 1);
}
	@media only screen
	and (min-device-width : 768px)
	and (max-device-width : 1024px)
	and (orientation : landscape) {
		#secondary-cta > div	{
			padding-top: 2.5em !important;
			padding-bottom:2.5em !important;
		}
	}

/*  Footer  */
footer[role="content-info"] {
    background: #333333;
    background: RGBa(51, 51, 51, 1);
    text-align: center;
}
		footer[role="content-info"] #sitemap	{
			margin-bottom: 0;
		}
		footer[role="content-info"] #sitemap .tabbed-nav a:hover	{
			background: RGBa(0,0,0,.075);
		}
		footer[role="content-info"] #sitemap .tabbed-nav:first-child a.active	{
			color:#fff;
		}
        footer[role="content-info"] #sitemap nav {
            margin: 0 0 1em;
        }
        footer[role="content-info"] #sitemap .tabbed-nav:last-child	{
	        margin-bottom:0;
        }
	        footer[role="content-info"] #sitemap .tabbed-nav:last-child a,  footer[role="content-info"] #sitemap .tabbed-nav:last-child a.active  {
				color: #999999;
				color: RGBa(153, 153, 153, 1);
	        }
		footer[role="content-info"] #sitemap li	{
					margin-bottom: 1em;
				}
        footer[role="content-info"] #copyright    {
            color: #999999;
			color: RGBa(153, 153, 153, 1);
			font-size: 85%;
        }

		footer[role="content-info"] #copyright p    {
			margin: 0;
			padding:1.5em 0 0 1em;
		}
		footer[role="content-info"] #copyright #logo-secondary {
				background-image: url(/_img/logo-footer-legacy.jpg);
				background-repeat: no-repeat;
			}

		footer[role="content-info"] #copyright #logo-secondary {
			display: inline-block;
			padding: 0;
			margin-top:.35em;
			height: 33px;
			width: 75px;
			background-image: url(/_img/logo-footer.png);
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 75px 30px;
			border:none;
		}
			footer[role="content-info"] #logo-secondary:hover {
				border:none;
			}

			footer[role="content-info"] #logo-secondary span	{
				display: none;
			}

@media screen and (min-width: 1000px) {
	footer[role="content-info"] #sitemap	{
		width: 70%;
		float:left;
		margin-right:5%;
		text-align: left;
	}
	footer[role="content-info"] #sitemap li	{
		margin-bottom: 1.25em;
	}
	footer[role="content-info"] #copyright #logo-secondary {
		background-position: right center;
	}
	footer[role="content-info"] #copyright    {
		width: 25%;
	    float: right;
	    text-align:right;
	}

}
@media screen and (max-width: 1000px) {
	footer[role="content-info"] #sitemap	{
		margin-bottom:2em;
	}
	}

@media screen and (max-width: 800px) {
	header[role="banner"] #logo {
		height:3em;
		width: 125px;
		background-size: 125px 19px;
	}
}

@media screen and (max-width: 700px) {
	#sub-nav	{
		text-align: center;
	}
	header[role="banner"] .wrap	{
		padding-top:1em;
		padding-bottom:1em;
	}
	#main 	{
		margin-top: 62px !important;
	}
	#menu-button    {
		display: block;
	    height: 3em;
	    width: 30px;
	    padding: 0;
	    cursor: pointer;
	    float:right;
	    position:relative;
	    margin-left:2em;
	}
	#menu-button span {
	    display:block;
	    width:30px;
	    height:3px;
	    right:0;
	    background: #1a9fd6;
		background: RGBa(26, 159, 214, 1);
	    position:absolute;
	    -webkit-transition: all 300ms ease;
	    -moz-transition: all 300ms ease;
	    -ms-transition: all 300ms ease;
	    -o-transition: all 300ms ease;
	    transition: all 300ms ease;
	}
	#menu-button span:nth-of-type(1), .no-touch #menu-button.active:hover span:nth-of-type(1) {
	    top:10px;
	}
	.no-touch #menu-button:hover span:nth-of-type(1) {
	    top:5px;
	}
	#menu-button span:nth-of-type(2) {
	    top:19px;
	}
	#menu-button span:nth-of-type(2):before {
	    content:'';
	    display:block;
	    position:absolute;
	    top:0;
	    left:0;
	    background: #1a9fd6;
		background: RGBa(26, 159, 214, 1);
	    width:100%;
	    height:100%;
	}
	#menu-button span:nth-of-type(3), .no-touch #menu-button.active:hover span:nth-of-type(3) {
	    top:28px;
	}
	.no-touch #menu-button:hover span:nth-of-type(3) {
	    top:33px;
	}
	#menu-button.active span:nth-of-type(1), #menu-button.active span:nth-of-type(3){
	    opacity:0;
	}
	#menu-button.active span:nth-of-type(2) {
	    -webkit-transform:rotate(45deg);
	    -moz-transform:rotate(45deg);
	    -ms-transform:rotate(45deg);
	    -o-transform:rotate(45deg);
	    transform:rotate(45deg);
	}
	#menu-button.active span:nth-of-type(2):before {
	    -webkit-transform:rotate(90deg);
	    -moz-transform:rotate(90deg);
	    -ms-transform:rotate(90deg);
	    -o-transform:rotate(90deg);
	    transform:rotate(90deg);
	}
	header[role="banner"] #listen-button {
		display: none;
	}
	header[role="banner"] #listen-button-mini {
		display: block;
		margin: 0 0 0 1em;
		float: right;
		font-size: 1em !important;
	}
	#global-nav {
		margin-top:-20em;
	    position: relative;
	    z-index: 2;
	    -webkit-transition: all 300ms ease;
	    -moz-transition: all 300ms ease;
	    -ms-transition: all 300ms ease;
	    -o-transition: all 300ms ease;
	    transition: all 300ms ease;
	    color:#404040;
	    color:RGBa(0,0,0,.75);
	    float: none;
	}
	#global-nav ul {
		margin-bottom: 2em;
		display: block;
	}
	#global-nav ul li	{
		display:block;
		font-size: 1.5em;
		line-height: 1.5em;
		margin:0 0 0.25em;
	}
		#global-nav ul li a	{
			display: block;
			background:RGBa(0,0,0,.02);
			border-bottom: 0;
			padding: .75em 1em;
			font-size: 85%;
		}
	#global-nav.menu-open {
		margin-top: 0;
	}
}
@media screen and (max-width: 400px) {
	header[role="banner"] #listen-button-mini {
		display: none;
	}
}


.cookie-button {
  margin: 24px auto;
  padding: 12px 24px;
  border-radius: 5px;
  outline: 0;
  background-color: #1a9fd6;
  box-shadow: none;
  border: 0px;
  color: #fff;
}

.cookie-button:hover {
  background-color: #337ab7;
}

.clearCookiesSuccess {
  background-color: #009688;
}

.clearCookiesError {
  background-color: #f44336;
}

#analyticsIframe {
  height: 1px;
  width: 1px;
  position: absolute;
  top: 0;
  left: -2000px;
  visibility: hidden;
}

.germany-only, .analytics-only {
  display: none;
}