Skip to content

Instantly share code, notes, and snippets.

@MrVIncentRyan

MrVIncentRyan/index.html

Last active January 7, 2019 11:56
Show Gist options
  • Save MrVIncentRyan/3cbe4cfc2339d1dd746bf72a084cd24d to your computer and use it in GitHub Desktop.
Save MrVIncentRyan/3cbe4cfc2339d1dd746bf72a084cd24d to your computer and use it in GitHub Desktop.
Download ZIP
The sound of the pound stepline
Raw
index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</meta>
<head>
</head
<body>
<div class="intro">
<div class="flexwrap">
<div class="headline">
<div class="topline">
<!-- <time class="date">01.03.2018</time> -->
<h1 class="title">The sound of the pound</h1>
<h3 class="introtext">From flash crashes, to snap elections, the pound has been rattling around currency markets as Brexit threatens to play a new tune with the UK's economy.</h3>
</div>
<div id="audioviz">
<button id="buttons" onclick="playAudio()" class="start">Start</button>
<button id="buttons" onclick="audio.stop()" class="reset">Reset</button>
</div>
<audio id="myAudio">
<source src="https://res.cloudinary.com/dxeddkkwh/video/upload/v1546177352/soundofthepound2yearFull320bpm_1545903041694_1_1.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
</div>
<div class="annotation-list layout-small" id="surveychart-annotations">
<div class="flexwrap">
<div class="annotation-list__item">
<div class="annotation-list__number">1</div>
<div class="annotation-list__text">
<h3>Brexit referendum June 23 2016</h3>
<div class="annotation-list__img-box"><img class="annotation-list__img" src="https://cdn.images.express.co.uk/img/dynamic/139/590x/Farage-649750.jpg"/></div>
<p>Following the vote for Brexit on June 23 the pound plunged <strong>from $1.43</strong> the week before the Brexit vote <strong>to $1.36</strong> as the market panicked following the result. <strong>David Cameron</strong> the Prime Minister resigned and Theresa May emerged as an unlikely leader to see Brexit through.</p>
<div class="annotation-list__item">
<div class="annotation-list__number">2</div>
<div class="annotation-list__text">
<h3>The Flash Crash</h3>
<div class="annotation-list__img-box"><img class="annotation-list__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPkdWlBt8kFazKP5eE-YzLIlW_yuKHsHf3tOx3Pt9Ewo52cz84Qw"/></div>
<p> The pound lost an unprecedented 10% of its value in late night trading in asia. Sterling plunged to<strong>$1.21</strong> . The huge collapse in value overnight prompted a Bank of England to launch an investigation. In the early morning of Octeber 7th sterling plunged 9 per cent and recoved at the start of the Asian trading day.</p>
</div>
<div class="annotation-list__item">
<div class="annotation-list__number">3</div>
<div class="annotation-list__text">
<h3>The Snap General Election 2017</h3>
<div class="annotation-list__img-box"><img class="annotation-list__img" src="https://news.images.itv.com/image/file/1278747/stream_img.jpg"/></div>
<p>TTheresa May’s gamble on a snap election did not pay off. She had hoped for a stronger mandate to deliver Brexit. Instead it resulted in a hung parliament, leaving the Conservative relying on Northern Ireland's DUP to stay in power.
The pound fell from as high as <strong>$1.29</strong> on Thursday June 8th 2017 to a multi-month low of <strong>$1.26</strong> on Friday morning.
</p>
</div>
<div class="annotation-list__item">
<div class="annotation-list__number">4</div>
<div class="annotation-list__text">
<h3>Theresa May's Florence Speech</h3>
<div class="annotation-list__img-box"><img class="annotation-list__img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRFfXFCb4MUK_HO4fEa4uz37SiifNPbuBXBvJxgLT-Zdt_kEyRWWA"/></div>
<p>Prime Minister Theresa May used a speech in Florence to set out the UK's position on how to move Brexit talks forward, focusing on Trade, Citizen Rights and a Transition Period.
The market reacted in the midst of her landmark address when she confirmed that the UK would still eventually leave the single market and customs union as part of its divorce from the EU.
Her speech originally sent the pound to daily lows against the US dollar to <strong>$1.35</strong>.</p>
</div>
<div class="annotation-list__item">
<div class="annotation-list__number">5</div>
<div class="annotation-list__text"><h3>The Irish Border Backstop disagreement</h3>
<div class="annotation-list__img-box"><img class="annotation-list__img" src="https://spectatorblogs.imgix.net/files/2018/09/Screen-Shot-2017-12-04-at-23.36.36.jpeg?auto=compress,enhance,format&crop=faces,entropy,edges&fit=crop&w=820&h=550"/></div>
<p>The pound began a downward spiral as it emerged that there was no simple means to solve the issue of the Irish Border backstop.
This sticking point made the prospect of a No Deal Brexit increasingly likely. The markets reacted by pummeling the pound. The bad news increased as the house of Lords voted against the government forcing a meaningful vote on Brexit.</p>
</div>
<div class="annotation-list__item">
<div class="annotation-list__number">6</div>
<div class="annotation-list__text"><h3>Conservative rebles seek vote of no confidence in May</h3>
<div class="annotation-list__img-box"><img class="annotation-list__img" src="https://www.platinumpublishing.co.uk/uploads/magazines/platinum-business/rees-mogg_topHat.jpg"/></div>
<p>Just as the mood seemed to be improving both in Brussels and Downing street with the pount recovering to highs of close to <strong>$1.30</strong> Tory hard Brixiteers tried to stage a mutiiny.
The prolonged wait for letters to try and oust the Prime Minister dragged the pound down. As it became clear May would survive the pound continued to fall to <strong>$1.25</strong> as the markets stared at the uncertain government and waited for the opposition to react.</p>
</div>
Raw
script.js
var audio = document.getElementById("myAudio");
function playAudio() {
audio.volume = 1;
audio.play();
}
Audio.prototype.stop = function() {
this.pause();
this.currentTime = 0;
};
var dataset = [
{date: "08/01/2016", GBPUSD:1.45},
{date: "15/01/2016", GBPUSD:1.42},
{date: "22/01/2016", GBPUSD:1.42},
{date: "29/01/2016", GBPUSD:1.42},
{date: "05/02/2016", GBPUSD:1.45},
{date: "12/02/2016", GBPUSD:1.45},
{date: "19/02/2016", GBPUSD:1.44},
{date: "26/02/2016", GBPUSD:1.38},
{date: "04/03/2016", GBPUSD:1.42},
{date: "11/03/2016", GBPUSD:1.43},
{date: "18/03/2016", GBPUSD:1.44},
{date: "25/03/2016", GBPUSD:1.41},
{date: "01/04/2016", GBPUSD:1.42},
{date: "08/04/2016", GBPUSD:1.41},
{date: "15/04/2016", GBPUSD:1.41},
{date: "22/04/2016", GBPUSD:1.44},
{date: "29/04/2016", GBPUSD:1.46},
{date: "06/05/2016", GBPUSD:1.44},
{date: "13/05/2016", GBPUSD:1.43},
{date: "20/05/2016", GBPUSD:1.44},
{date: "27/05/2016", GBPUSD:1.46},
{date: "03/06/2016", GBPUSD:1.45},
{date: "10/06/2016", GBPUSD:1.42},
{date: "17/06/2016", GBPUSD:1.43},
{date: "24/06/2016", GBPUSD:1.36},
{date: "01/07/2016", GBPUSD:1.32},
{date: "08/07/2016", GBPUSD:1.29},
{date: "15/07/2016", GBPUSD:1.31},
{date: "22/07/2016", GBPUSD:1.31},
{date: "29/07/2016", GBPUSD:1.32},
{date: "05/08/2016", GBPUSD:1.30},
{date: "12/08/2016", GBPUSD:1.29},
{date: "19/08/2016", GBPUSD:1.30},
{date: "26/08/2016", GBPUSD:1.31},
{date: "02/09/2016", GBPUSD:1.32},
{date: "09/09/2016", GBPUSD:1.32},
{date: "16/09/2016", GBPUSD:1.30},
{date: "23/09/2016", GBPUSD:1.29},
{date: "30/09/2016", GBPUSD:1.29},
{date: "07/10/2016", GBPUSD:1.24},
{date: "14/10/2016", GBPUSD:1.21},
{date: "21/10/2016", GBPUSD:1.22},
{date: "28/10/2016", GBPUSD:1.21},
{date: "04/11/2016", GBPUSD:1.25},
{date: "11/11/2016", GBPUSD:1.26},
{date: "18/11/2016", GBPUSD:1.23},
{date: "25/11/2016", GBPUSD:1.24},
{date: "02/12/2016", GBPUSD:1.27},
{date: "09/12/2016", GBPUSD:1.25},
{date: "16/12/2016", GBPUSD:1.24},
{date: "23/12/2016", GBPUSD:1.22},
{date: "30/12/2016", GBPUSD:1.23},
{date: "06/01/2017", GBPUSD:1.22},
{date: "13/01/2017", GBPUSD:1.21},
{date: "20/01/2017", GBPUSD:1.23},
{date: "27/01/2017", GBPUSD:1.25},
{date: "03/02/2017", GBPUSD:1.24},
{date: "10/02/2017", GBPUSD:1.24},
{date: "17/02/2017", GBPUSD:1.24},
{date: "24/02/2017", GBPUSD:1.24},
{date: "03/03/2017", GBPUSD:1.22},
{date: "10/03/2017", GBPUSD:1.21},
{date: "17/03/2017", GBPUSD:1.23},
{date: "24/03/2017", GBPUSD:1.24},
{date: "31/03/2017", GBPUSD:1.25},
{date: "07/04/2017", GBPUSD:1.23},
{date: "14/04/2017", GBPUSD:1.25},
{date: "21/04/2017", GBPUSD:1.28},
{date: "28/04/2017", GBPUSD:1.29},
{date: "05/05/2017", GBPUSD:1.29},
{date: "12/05/2017", GBPUSD:1.28},
{date: "19/05/2017", GBPUSD:1.30},
{date: "26/05/2017", GBPUSD:1.28},
{date: "02/06/2017", GBPUSD:1.28},
{date: "09/06/2017", GBPUSD:1.27},
{date: "16/06/2017", GBPUSD:1.27},
{date: "23/06/2017", GBPUSD:1.27},
{date: "30/06/2017", GBPUSD:1.30},
{date: "07/07/2017", GBPUSD:1.28},
{date: "14/07/2017", GBPUSD:1.30},
{date: "21/07/2017", GBPUSD:1.29},
{date: "28/07/2017", GBPUSD:1.31},
{date: "04/08/2017", GBPUSD:1.30},
{date: "11/08/2017", GBPUSD:1.30},
{date: "18/08/2017", GBPUSD:1.28},
{date: "25/08/2017", GBPUSD:1.28},
{date: "01/09/2017", GBPUSD:1.29},
{date: "08/09/2017", GBPUSD:1.31},
{date: "15/09/2017", GBPUSD:1.35},
{date: "22/09/2017", GBPUSD:1.34},
{date: "29/09/2017", GBPUSD:1.33},
{date: "06/10/2017", GBPUSD:1.30},
{date: "13/10/2017", GBPUSD:1.32},
{date: "20/10/2017", GBPUSD:1.31},
{date: "27/10/2017", GBPUSD:1.31},
{date: "03/11/2017", GBPUSD:1.30},
{date: "10/11/2017", GBPUSD:1.31},
{date: "17/11/2017", GBPUSD:1.32},
{date: "24/11/2017", GBPUSD:1.33},
{date: "01/12/2017", GBPUSD:1.34},
{date: "08/12/2017", GBPUSD:1.33},
{date: "15/12/2017", GBPUSD:1.33},
{date: "22/12/2017", GBPUSD:1.33},
{date: "29/12/2017", GBPUSD:1.35},
{date: "05/01/2018", GBPUSD:1.35},
{date: "12/01/2018", GBPUSD:1.37},
{date: "19/01/2018", GBPUSD:1.38},
{date: "26/01/2018", GBPUSD:1.41},
{date: "02/02/2018", GBPUSD:1.41},
{date: "09/02/2018", GBPUSD:1.38},
{date: "16/02/2018", GBPUSD:1.40},
{date: "23/02/2018", GBPUSD:1.39},
{date: "02/03/2018", GBPUSD:1.38},
{date: "09/03/2018", GBPUSD:1.38},
{date: "16/03/2018", GBPUSD:1.39},
{date: "23/03/2018", GBPUSD:1.41},
{date: "30/03/2018", GBPUSD:1.40},
{date: "06/04/2018", GBPUSD:1.40},
{date: "13/04/2018", GBPUSD:1.42},
{date: "20/04/2018", GBPUSD:1.40},
{date: "27/04/2018", GBPUSD:1.37},
{date: "04/05/2018", GBPUSD:1.35},
{date: "11/05/2018", GBPUSD:1.35},
{date: "18/05/2018", GBPUSD:1.34},
{date: "25/05/2018", GBPUSD:1.33},
{date: "01/06/2018", GBPUSD:1.33},
{date: "08/06/2018", GBPUSD:1.34},
{date: "15/06/2018", GBPUSD:1.32},
{date: "22/06/2018", GBPUSD:1.32},
{date: "29/06/2018", GBPUSD:1.32},
{date: "06/07/2018", GBPUSD:1.32},
{date: "13/07/2018", GBPUSD:1.32},
{date: "20/07/2018", GBPUSD:1.31},
{date: "27/07/2018", GBPUSD:1.31},
{date: "03/08/2018", GBPUSD:1.30},
{date: "10/08/2018", GBPUSD:1.27},
{date: "17/08/2018", GBPUSD:1.27},
{date: "24/08/2018", GBPUSD:1.28},
{date: "31/08/2018", GBPUSD:1.29},
{date: "07/09/2018", GBPUSD:1.29},
{date: "14/09/2018", GBPUSD:1.30},
{date: "21/09/2018", GBPUSD:1.30},
{date: "28/09/2018", GBPUSD:1.30},
{date: "05/10/2018", GBPUSD:1.31},
{date: "12/10/2018", GBPUSD:1.31},
{date: "19/10/2018", GBPUSD:1.30},
{date: "26/10/2018", GBPUSD:1.28},
{date: "02/11/2018", GBPUSD:1.29},
{date: "09/11/2018", GBPUSD:1.29},
{date: "16/11/2018", GBPUSD:1.28},
{date: "23/11/2018", GBPUSD:1.28},
{date: "30/11/2018", GBPUSD:1.27},
{date: "07/12/2018", GBPUSD:1.27},
{date: "14/12/2018", GBPUSD:1.25},
{date: "21/12/2018", GBPUSD:1.26},
{date: "27/12/2018", GBPUSD:1.26},];
var multiDataset = d3.range(dataset.length-1).map( i => [dataset[i], dataset[i+1] ] );
// Calculate Margins and canvas dimensions
var margin = {top: 40, right: 40, bottom: 40, left: 60},
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
//Parsers and Formaters
var parseTime = d3.timeParse("%d/%m/%Y");
var formatTime = d3.timeFormat("%a/%b/%Y");
// Scales
var x = d3.scaleTime()
.range([0, width]);
var y = d3.scaleLinear()
.range([height, 0]);
// Line
var line = d3.line()
.x(function(d) { return x(this.parseTime(d.date)).toFixed(1); })
.y(function(d) { return y(d.GBPUSD).toFixed(1); })
.curve(d3.curveStepAfter)
var svg = d3.select("#audioviz").append("svg")
.style("background-color", '#')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Arguments for axes : Ranges for X, y
x.domain(d3.extent(dataset, function(d) { return parseTime(d.date); }));
y.domain(d3.extent(dataset, function(d) { return d.GBPUSD; }));
// Axes
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(y));
// Labels
svg.append("text")
.attr("text-anchor", "middle")
.style("font-size", "14px")
.attr("transform", "translate("+ (margin.left - 94 ) +","+(height/2)+")rotate(-90)")
.text("Value of the Pound");
svg.append("text")
.style("font-size", "14px")
.attr("text-anchor", "middle")
.attr("transform", "translate("+ (width/2) +","+(height-(margin.bottom -74))+")")
.text("Date");
// Chart Title
svg.append("text")
.attr("x", (width / 2))
.attr("y", 20 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.text("Weekly USD/GBP since 01/01/2016");
// Data Lines:
d3.select(".start").on("click", function() {
console.log('sdfsdf');
var path = svg.selectAll(".line")
.data(multiDataset)
.enter()
.append("path")
.attr("class", "line")
.attr("d", line);
var text1 = svg.append("text")
.attr("id","text1")
.transition()
.delay(4700)
.attr('x', 95)
.attr('y', 120)
.attr("font-size", "13px")
.text('<-- 1.Brexit');
var text1 = svg.append("text")
.attr("id","text1")
.transition()
.delay(7600)
.attr('x', 32)
.attr('y', 240)
.attr("font-size", "13px")
.text('2.Flash crash-->');
var text1 = svg.append("text")
.attr("id","text1")
.transition()
.delay(14200)
.attr('x', 285)
.attr('y', 240)
.attr("font-size", "13px")
.text('<---3.General Election');
var text1 = svg.append("text")
.attr("id","text1")
.transition()
.delay(17000)
.attr('x', 115)
.attr('y', 145)
.attr("font-size", "13px")
.text('4.Thresa May Florence Speech-->');
var text1 = svg.append("text")
.attr("id","text1")
.transition()
.delay(22800)
.attr('x', 240)
.attr('y', 55)
.attr("font-size", "13px")
.text('5.Irish border disagreement-->');
var text1 = svg.append("text")
.attr("id","text1")
.transition()
.delay(27550)
.attr('x', 350)
.attr('y', 205)
.attr("font-size", "13px")
.text('6.Letters of no confidnce -->');
path.each( function (d,i) { d.totalLength = this.getTotalLength(); })
var segmentDuration = 29700/multiDataset.length;
path
.attr("stroke-dasharray", d => d.totalLength + " " + d.totalLength)
.attr("stroke-dashoffset", d => d.totalLength)
.transition() // Call Transition Method
.duration(150) // Set Duration timing (ms)
.delay( (d,i) => i*segmentDuration)
.ease(d3.easeLinear)
.attr("stroke-dashoffset", 0); // Set final value of dash-offset for transition
});
// Reset Animation
d3.select(".reset").on("click", function() {
d3.selectAll(".line").remove()
d3.selectAll("#text1").remove();
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
Raw
style.css
body{
background-color: #;
font-family: arial, sans-serif;
font-size: 20px;
padding: 10px;
}
.axis {
font: 10px sans-serif;
}
.axis text{
/* stroke:tomato;
stroke-width : 1; */
}
.axis path,
.axis line {
fill: none;
/* stroke: tomato; */
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: red;
stroke-width: 3px;
}
.buttons {display: inline-block;}
/* normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace,monospace;font-size:1em;}a{background-color:transparent;-webkit-text-decoration-skip:objects;}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em;}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{display:inline-block;vertical-align:baseline;}textarea{overflow:auto}[type="checkbox"],[type="radio"]{-moz-box-sizing:border-box;box-sizing:border-box;padding:0;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px;}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}.story{width:100%}.bg-wrap{background:#f9f9f9;overflow:hidden}.layout-small{max-width:760px;margin:20px auto;padding:0 15px;position:relative}.layout-large{max-width:1080px;margin:20px auto;padding:0 15px;position:relative}.layout-full{width:100%;margin:20px auto;padding:0;position:relative}.layout-flex{width:100%;max-width:1600px;margin:20px auto;padding:0 15px;position:relative}.intro .layout-full{margin:0 auto}html.fullscreen,html.fullscreen body{overflow:hidden;height:100%}html.fullscreen .intro{height:100%;margin-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}html.fullscreen .intro .topheader{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}html.fullscreen .intro .layout-full{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative}@media screen and (min-width:375px){.layout-small,.layout-large,.layout-flex{padding:0 7%}}@media screen and (min-width:640px){.layout-small,.layout-large,.layout-flex,.layout-full{margin:30px auto}}@media screen and (min-width:760px){.layout-small{padding:0 60px}}@media screen and (min-width:768px){.layout-small,.layout-large,.layout-flex,.layout-full{margin:40px auto 30px}}@media screen and (min-width:960px){.layout-small,.layout-large,.layout-flex{padding:0 60px}.layout-small,.layout-large,.layout-flex,.layout-full{margin:50px auto 40px}.intro .layout-small,.intro .layout-large,.intro .layout-flex{margin:30px auto 30px}.layout-flex{width:70%;padding:0}}@media screen and (min-width:1280px){.layout-small,.layout-large,.layout-flex,.layout-full{margin:60px auto 50px}}@media screen and (min-width:1480px){.layout-small,.layout-large,.layout-flex,.layout-full{margin:70px auto 60px}}.intro{position:relative}.headline{max-width:1080px;margin:0 auto;padding:0 15px;}.headline .topline{font-size:1.3rem;color:#777;}.headline .topline .date{margin-right:.5em}.headline .topline .kicker{font-weight:900}.headline .topline + .title{margin-top:.8rem}.headline .title{margin:.4rem 0 .8rem;font-size:2.6rem;font-weight:900}.headline .subtitle{margin:.8rem 0;font-size:1.8rem;font-weight:300}.headline .introtext{margin:.8rem 0;font-size:1.4rem;font-family:'Playfair Display',Georgia,serif;font-weight:400;line-height:1.5;color:#5a5a5a}.headline.layout-flex{max-width:1600px;}.headline.layout-flex .title,.headline.layout-flex .introtext{max-width:1200px}.intro-fullscreen .headline{position:absolute;top:65px;left:0;right:0;z-index:700;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none;}.intro-fullscreen .headline .introtext{color:#222}.intro-fullscreen .layout-full{z-index:500;margin:0 auto}.intro-fullscreen.animate-headline .headline{-webkit-transition:top .3s,left .3s,opacity .3s,-webkit-transform .3s;transition:top .3s,left .3s,opacity .3s,-webkit-transform .3s;transition:top .3s,left .3s,opacity .3s,transform .3s;transition:top .3s,left .3s,opacity .3s,transform .3s,-webkit-transform .3s;margin-left:0;margin-right:0;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);left:50%;width:100%}.intro-fullscreen.animate-headline .topheader-headline{opacity:0;-webkit-transition:opacity .3s .2s;transition:opacity .3s .2s}.intro-fullscreen.is-animated-headline .topheader-headline{opacity:1}.intro-fullscreen.is-animated-headline .headline{top:10px;left:52px;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:0;width:auto;}.intro-fullscreen.is-animated-headline .headline >*{display:none}.intro-fullscreen.is-animated-headline .headline .title{font-size:1.4rem;display:block}@media screen and (min-width:375px){.headline{padding:0 7%}}@media screen and (min-width:640px){.intro{margin-bottom:40px}.headline,.headline.layout-flex{margin-top:15px;}.headline .title,.headline.layout-flex .title{font-size:3.2rem;margin:.25em 0}.headline .subtitle,.headline.layout-flex .subtitle{font-size:2rem;margin:.4em 0}.headline .introtext,.headline.layout-flex .introtext{font-size:1.9rem;margin:.421em 0}.intro-fullscreen .headline{top:100px}.intro-fullscreen.is-animated-headline .headline{top:0;left:227px;font-size:1.7rem}}@media screen and (min-width:768px){.intro-fullscreen{margin-bottom:60px}}@media screen and (min-width:960px){.intro{margin-bottom:60px}.intro-fullscreen{margin-bottom:80px}.headline{margin-top:20px;padding:0 60px;}.headline .title{font-size:3.8rem}.headline.layout-flex{padding:0;margin-top:20px;width:70%}}@media screen and (min-width:1280px){.headline .introtext{font-size:2rem}}@media screen and (min-width:1600px){.intro{margin-bottom:80px}.headline,.headline.layout-flex{margin-top:50px;margin-bottom:40px;}.headline .title,.headline.layout-flex .title{font-size:4.8rem}.headline .subtitle,.headline.layout-flex .subtitle{font-size:2.4rem}.headline .introtext,.headline.layout-flex .introtext{font-size:2.3rem}}.topheader{width:100%;background:#fff;padding:8px 8px 8px 13px;}.topheader a,.topheader a:hover{border:none;line-height:1}.topheader .topheader-logo{float:left;}.topheader .topheader-logo .logo{height:auto;}.topheader .topheader-logo .logo.large{width:200px;display:block}.topheader .topheader-logo .logo.small{width:30px;display:block}.topheader .topheader-headline{float:left;position:relative;top:.5em;margin-left:22px;}.topheader .topheader-headline > *{display:inline-block;font-size:1.4rem;margin-top:0;margin-bottom:0;margin-right:.3em}.topheader .topheader-headline .kicker{font-weight:700}.topheader .topheader-headline .title{font-weight:700}.topheader .topheader-headline .subtitle{color:#777}.topheader .topheader-headline .kicker + .title{font-weight:400;display:none}.topheader .topheader-headline:before{position:absolute;content:'';height:1em;width:1px;background:#ccc;left:-12px;top:.35em}.topheader .topheader-social{float:right;margin-left:8px;position:relative;top:1px;}.topheader.intro-fullscreen .topheader{padding-left:13px}}@media screen and (min-width:500px){.topheader{padding-left:13px;}.topheader .topheader-headline .kicker + .title{display:inline-block}}@media screen and (min-width:960px){.topheader{padding-left:15px;}.topheader .topheader-headline{top:.3em;margin-left:27px;}.topheader .topheader-headline > *{font-size:1.7rem}.topheader .topheader-headline:before{top:.5em;left:-15px}.topheader .topheader-social iframe{width:115px;display:inline-block;position:relative;top:6px;margin-right:8px}}.text-wrap{padding:0 15px;max-width:1080px;margin:0 auto;}.text-wrap p{max-width:640px;margin:1.5em auto;font-family:'Playfair Display',Georgia,serif;font-size:1.5rem;line-height:1.7}.text-wrap h2,.text-wrap h3,.text-wrap .text-headline{max-width:640px;margin:1em auto;font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:300;font-size:2.2rem;line-height:1.3}.text-wrap aside,.text-wrap .text-sidebox{max-width:640px;margin:.7em auto 1.5em;padding:1.5em 0;font-size:1.4rem;line-height:1.6;border:1px solid #ddd;border-width:1px 0;}.text-wrap aside h2,.text-wrap .text-sidebox h2,.text-wrap aside h3,.text-wrap .text-sidebox h3,.text-wrap aside .sidebox-headline,.text-wrap .text-sidebox .sidebox-headline{font-size:1em;font-weight:700;margin:0 0 1em}.text-wrap aside.media,.text-wrap .text-sidebox.media{border:none;padding:0;float:right;max-width:140px;margin-left:20px;margin-top:0}@media screen and (min-width:375px){.text-wrap{padding:0 7%}}@media screen and (min-width:640px){.text-wrap p{font-size:1.9rem;line-height:1.65}.text-wrap h2,.text-wrap h3,.text-wrap .text-headline{margin:1.5em auto;font-size:3rem}.text-wrap aside,.text-wrap .text-sidebox{font-size:1.6rem;}.text-wrap aside.media,.text-wrap .text-sidebox.media{max-width:240px;margin-left:30px;margin-top:.4em}}@media screen and (min-width:960px){.text-wrap{padding:0 60px;}.text-wrap aside,.text-wrap .text-sidebox,.text-wrap .text-sidebox.media{max-width:320px;float:right;margin-left:30px}}footer{margin-top:20px;padding-bottom:20px;}footer hr{margin:25px auto;width:100%;max-width:200px;height:1px;border:none;background-color:#ddd}footer .footer-contactbox,footer .footer-credits{margin:0 auto;max-width:680px;padding:0 15px;font-size:1.3rem;color:#777;text-align:center}footer .footer-credits .footer-imprint .footer-imprint-title,footer .footer-credits .footer-imprint .footer-imprint-link{display:block;margin-top:.5em}@media screen and (min-width:375px){footer .footer-contactbox,footer .footer-credits{padding:0 7%}}@media screen and (min-width:640px){footer{margin-top:40px;padding-bottom:40px}}@media screen and (min-width:768px){footer{margin-top:60px;padding-bottom:60px}}@media screen and (min-width:960px){footer{margin-top:80px;padding-bottom:80px;}footer .footer-contactbox,footer .footer-credits{font-size:1.4rem;padding:0 60px}}input,input[type=text],input[type=date],input[type=email],input[type=file],input[type=password],input[type=search],input[type=number],input[type=datetime],input[type=datetime-local],input[type=url]{border:1px solid #ccc;border-radius:4px;font-size:1.4rem;color:#222;padding:.643em .571em;line-height:1;height:34px;-moz-box-sizing:border-box;box-sizing:border-box;display:block;outline:none;font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;}input::-webkit-input-placeholder,input[type=text]::-webkit-input-placeholder,input[type=date]::-webkit-input-placeholder,input[type=email]::-webkit-input-placeholder,input[type=file]::-webkit-input-placeholder,input[type=password]::-webkit-input-placeholder,input[type=search]::-webkit-input-placeholder,input[type=number]::-webkit-input-placeholder,input[type=datetime]::-webkit-input-placeholder,input[type=datetime-local]::-webkit-input-placeholder,input[type=url]::-webkit-input-placeholder{line-height:normal}button,.btn{display:block;border:1px solid #ccc;background:#fff;font-size:1.4rem;border-radius:4px;font-weight:700;padding:.643em 1.5em;margin:5px;font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;line-height:1;outline:none;border-bottom-color:#a3a3a3;box-shadow:0 1px 1px rgba(0,0,0,0.15);cursor:pointer;}button:hover,.btn:hover{background:#f9f9f9;cursor:pointer}button:active,.btn:active,button.active,.btn.active{background:#eee;box-shadow:0 1px 1px rgba(0,0,0,0.15),0 3px 7px rgba(0,0,0,0.15) inset}button.ghost,.btn.ghost{background:transparent;color:#222;border:1px solid #222;box-shadow:none;}button.ghost:hover,.btn.ghost:hover{color:#fff;background:#222}button.ghost:active,.btn.ghost:active,button.ghost.active,.btn.ghost.active{background:#3c3c3c;border-color:#3c3c3c}button.ghost.white,.btn.ghost.white{color:#fff;border-color:#fff;}button.ghost.white:hover,.btn.ghost.white:hover{color:#222;background:#fff}button.ghost.white:active,.btn.ghost.white:active,button.ghost.white.active,.btn.ghost.white.active{background:#e6e6e6;border-color:#e6e6e6}button.ghost.accent1,.btn.ghost.accent1{color:#db4240;background:transparent;border-color:#db4240;}button.ghost.accent1:hover,.btn.ghost.accent1:hover{color:#fff;background:#db4240;border-color:#db4240}button.ghost.accent1:active,.btn.ghost.accent1:active,button.ghost.accent1.active,.btn.ghost.accent1.active{color:#fff;background:#c32725;border-color:#c32725}button.ghost.accent2,.btn.ghost.accent2{color:#4c80bc;background:transparent;border-color:#4c80bc;}button.ghost.accent2:hover,.btn.ghost.accent2:hover{color:#fff;background:#4c80bc;border-color:#4c80bc}button.ghost.accent2:active,.btn.ghost.accent2:active,button.ghost.accent2.active,.btn.ghost.accent2.active{color:#fff;background:#3a679b;border-color:#3a679b}button.circle,.btn.circle{width:2.5em;height:2.5em;padding:.75em;border-radius:50%;line-height:1}button.flat,.btn.flat{box-shadow:none;background:#db4240;border-color:#db4240;color:#fff;}button.flat:hover,.btn.flat:hover{background:#d72d2b;border-color:#d72d2b}button.flat:active,.btn.flat:active,button.flat.active,.btn.flat.active{background:#c32725;border-color:#c32725}button.flat.accent1,.btn.flat.accent1{background:#db4240;border-color:#db4240;}button.flat.accent1:hover,.btn.flat.accent1:hover{background:#d72d2b;border-color:#d72d2b}button.flat.accent1:active,.btn.flat.accent1:active,button.flat.accent1.active,.btn.flat.accent1.active{background:#c32725;border-color:#c32725}button.flat.accent2,.btn.flat.accent2{background:#4c80bc;border-color:#4c80bc;}button.flat.accent2:hover,.btn.flat.accent2:hover{background:#4173ae;border-color:#4173ae}button.flat.accent2:active,.btn.flat.accent2:active,button.flat.accent2.active,.btn.flat.accent2.active{background:#3a679b;border-color:#3a679b}button.accent1,.btn.accent1{background:#db4240;color:#fff;border-color:#c32725;border-bottom-color:#ae2321;}button.accent1:hover,.btn.accent1:hover{background:#d72d2b;border-bottom-color:#981e1d}button.accent1:active,.btn.accent1:active,button.accent1.active,.btn.accent1.active{background:#c32725}button.accent2,.btn.accent2{background:#4c80bc;color:#fff;border-color:#3a679b;border-bottom-color:#335b88;}button.accent2:hover,.btn.accent2:hover{background:#4173ae;border-bottom-color:#2c4e76}button.accent2:active,.btn.accent2:active,button.accent2.active,.btn.accent2.active{background:#3a679b}button.dark,.btn.dark{background:#9a9a9a;border-color:#777;border-bottom-color:#5a5a5a;color:#fff;}button.dark:hover,.btn.dark:hover{background:#8d8d8d}button.dark:active,.btn.dark:active,button.dark.active,.btn.dark.active{background:#818181}button.close,.btn.close{width:40px;height:40px;padding:0;position:absolute;top:-20px;right:-20px;font-size:2rem;border-radius:50%;border-width:0 0 1px 0;background-color:#9a9a9a;color:#fff;border-color:#777;}button.close:hover,.btn.close:hover{background-color:#a3a3a3;border-color:#9a9a9a}.btn-group{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.btn-group button,.btn-group .btn{border-radius:0;border-right-width:0;margin:0;}.btn-group button:first-child,.btn-group .btn:first-child{border-radius:4px 0 0 4px}.btn-group button:last-child,.btn-group .btn:last-child{border-right-width:1px;border-radius:0 4px 4px 0}.btn-group.vertical{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:200px;}.btn-group.vertical button,.btn-group.vertical .btn{border-right-width:1px;border-bottom-width:0;}.btn-group.vertical button:first-child,.btn-group.vertical .btn:first-child{border-radius:4px 4px 0 0}.btn-group.vertical button:last-child,.btn-group.vertical .btn:last-child{border-bottom-width:1px;border-radius:0 0 4px 4px}.btn-group.dark button,.btn-group.dark .btn{background:#9a9a9a;border-color:#777;border-bottom-color:#5a5a5a;color:#fff;}.btn-group.dark button:hover,.btn-group.dark .btn:hover{background:#8d8d8d}.btn-group.dark button:active,.btn-group.dark .btn:active,.btn-group.dark button.active,.btn-group.dark .btn.active{background:#818181}.input-group{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:290px;}.input-group input{border-right:none;border-radius:4px 0 0 4px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}.input-group button,.input-group .btn{border-bottom-color:#ccc;border-radius:0 4px 4px 0;box-shadow:none;margin:0;white-space:nowrap;position:relative;vertical-align:middle}.input-group .btn-group{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.input-group .btn-group button:first-child,.input-group .btn-group .btn:first-child{border-radius:0}.media img,.media video{width:100%;height:auto;display:block}.media video{cursor:pointer}.media h2,.media h3,.media .media-headline{font-size:1.6rem;font-weight:700;margin:0 auto .625em}.media-sub{margin-top:.667em;font-size:1.2rem}.media-credit{float:right;margin-left:.5em;color:#777}.media.layout-large .media-headline{max-width:640px}.lazy{position:relative}.lazyloader{position:absolute;width:25px;height:25px;top:0;left:0;right:0;bottom:0;margin:auto;z-index:100;font-size:25px}@media screen and (min-width:640px){.media h2,.media h3,.media .media-headline{font-size:2rem}}@media screen and (min-width:768px){.media-sub{font-size:1.3rem}}@media screen and (min-width:960px){.media.layout-large h2,.media.layout-large h3,.media.layout-large .media-headline{max-width:none}}body.dark{background:#111;color:#fff}.dark .topheader{background:#111;color:#fff;}.dark .topheader .topheader-headline:before{background:#444}.dark .introtext{color:#a3a3a3}.dark .intro-fullscreen .introtext{color:#fff}.dark footer hr{background:#333}.dark .story aside,.dark .story .sidebox{border-color:#333}.gallery .topheader{background:#222}.gallery .headline{margin-top:10px}.gallery .story .media,.gallery .story .slider{margin-bottom:30px}.gallery footer.background{background:#eee;padding-top:20px;color:#222}@media screen and (min-width:640px){.gallery .headline{margin-top:15px}}@media screen and (min-width:960px){.gallery .headline{margin-top:40px;}.gallery .headline .title{font-size:4rem}.gallery .story .media h2,.gallery .story .slider h2,.gallery .story .media h3,.gallery .story .slider h3,.gallery .story .media .media-headline,.gallery .story .slider .media-headline{font-size:2.6rem}}@media screen and (min-width:1600px){.gallery .headline{margin-top:70px;margin-bottom:90px;}.gallery .headline .title{font-size:4.8rem}.gallery .story .media,.gallery .story .slider{margin-bottom:100px}}.teaser-wrapper{display:block;color:#fff;background-size:cover;background-position:50% 0%;width:100%;min-height:300px;position:relative;}.teaser-wrapper:link,.teaser-wrapper:hover,.teaser-wrapper:visited,.teaser-wrapper:active{border:none;color:#fff}.teaser-wrapper .teaser-gradient{background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%);background-image:linear-gradient(to bottom,rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.3) 100%);width:100%;height:100%;position:absolute;z-index:50;pointer-events:none}.teaser-wrapper .teaser-text{position:relative;z-index:100;padding:0 15px;}.teaser-wrapper .teaser-text .teaser-cta{font-size:1.6rem;font-weight:700;margin:1em 0}.teaser-wrapper .teaser-text .teaser-title{font-size:2.6rem;font-weight:900;line-height:1.1;margin-bottom:.25em}.teaser-wrapper .teaser-text .btn-teaser{margin-top:1.5em}@media screen and (min-width:375px){.teaser-wrapper .teaser-text{padding:0 7%}}@media screen and (min-width:640px){.teaser-wrapper{min-height:400px;}.teaser-wrapper .teaser-text .teaser-cta{margin:1.5em 0 2em}.teaser-wrapper .teaser-text .teaser-title{font-size:3.2rem;max-width:12em}.teaser-wrapper .teaser-text .teaser-desc{font-size:1.5rem;max-width:25em}.teaser-wrapper .teaser-text .btn-teaser{margin-top:2.5em}}@media screen and (min-width:960px){.teaser-wrapper{min-height:500px;}.teaser-wrapper .teaser-text{padding:0 60px;}.teaser-wrapper .teaser-text .teaser-cta{font-size:2rem;margin:2em 0 3em}.teaser-wrapper .teaser-text .teaser-title{font-size:4.2rem}.teaser-wrapper .teaser-text .teaser-desc{font-size:1.6rem}}.iframe-overlay{display:none;position:absolute;top:0;left:0;z-index:1000000;background:rgba(245,245,245,0.4);width:100%;height:100%;text-align:center;cursor:pointer;-webkit-transition:background .5s;transition:background .5s;}.iframe-overlay:hover{background:rgba(0,0,0,0.2);}.iframe-overlay:hover .embed-inner{opacity:1}.iframe-overlay .icon-close{position:absolute;top:10px;right:10px;font-size:2rem}.iframe-overlay .embed-inner{width:100%;width:160px;text-align:center;position:absolute;opacity:0;top:50%;left:50%;margin-left:-80px;background:rgba(0,0,0,0.75);color:#fff;border-radius:50%;height:160px;-webkit-transition:background .3s,opacity .3s;transition:background .3s,opacity .3s;}.iframe-overlay .embed-inner:hover{background:rgba(0,0,0,0.9)}.iframe-overlay .embed-inner .icon-interaktiv{position:absolute;top:20px;left:50%;margin-left:-20px;font-size:4rem}.iframe-overlay .embed-title{font-size:1.2rem;position:absolute;bottom:40px;width:80%;left:10%}.has-touch .iframe-overlay .embed-inner{opacity:.8}html.is-embed-overlay body{overflow:hidden}html.is-embed-overlay .iframe-overlay{display:block}html.is-embed-overlay .info-btn{display:none}.info-button{position:absolute;right:1em;top:3em;cursor:pointer;font-size:2.5rem;color:#9a9a9a;z-index:500;}.info-button.is-fixed{position:fixed;bottom:1em;left:1em;top:auto;right:auto}.info-button:hover{color:#777}.info-box{display:none;background:#fff;position:fixed;top:3%;left:4%;width:92%;height:94%;box-shadow:0 3px 4px rgba(0,0,0,0.15);z-index:1600;-webkit-animation-timing-function:cubic-bezier(.25,0,.4,1);animation-timing-function:cubic-bezier(.25,0,.4,1);-webkit-animation-duration:.35s;animation-duration:.35s;-webkit-animation-name:infoboxOn;animation-name:infoboxOn;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;}.info-box .info-box-content{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:1.4rem;line-height:1.6;padding:10px 15px;}.info-box .info-box-content p{font-family:'Playfair Display',Georgia,serif}.info-box.is-active{display:block}.info-box .close{top:-15px;right:-15px;z-index:1700}.info-box .info-title{margin-bottom:.25em;font-weight:700;font-size:1.8rem}.info-box-is-active{overflow:hidden}.overlay{display:none;width:100%;position:fixed;height:100%;left:0;top:0;background:rgba(0,0,0,0.7);z-index:1500;cursor:pointer;}.overlay.is-active{display:block}@media screen and (min-width:768px){.info-box{width:600px;margin-left:-300px;left:50%;top:10%;height:80%;max-height:650px;}.info-box .info-box-content{padding:20px 30px}}@-webkit-keyframes infoboxOn{0%{-webkit-transform:scale(.9);transform:scale(.9)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}100%{-webkit-transform:none;transform:none;color:#222}}@keyframes infoboxOn{0%{-webkit-transform:scale(.9);transform:scale(.9)}50%{-webkit-transform:scale(1.05);transform:scale(1.05)}100%{-webkit-transform:none;transform:none;color:#222}}.search{width:250px;position:relative;}.search .search-input-form{width:100%}.search .result-list{position:absolute;list-style:none;margin:0;padding:0;z-index:1000;width:100%}.search .result-list-item{padding:7px 10px;background:#fff;text-overflow:ellipsis;white-space:nowrap;width:100%;overflow:hidden;}.search .result-list-item.active{background:#ddd}#map .search{position:absolute;top:20px;left:20px;z-index:1000}.resp-content{display:inline-block;position:relative;width:100%;padding-bottom:100%;vertical-align:middle;overflow:hidden;}.resp-content >*{display:inline-block;position:absolute;top:0;left:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,div,summary,ul,li{-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;color:#222}body{line-height:1.5;font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.3rem;background:#fff}body,html{-webkit-font-smoothing:antialiased;width:100%;-webkit-overflow-scrolling:touch}h1,h2,h3,h4,h5,h6{line-height:1.2}a,a:visited{color:#4c80bc;text-decoration:none}a:hover{border-bottom:1px solid #4c80bc}.icon{width:1em;height:1em;vertical-align:-.15em;fill:currentColor;overflow:hidden}.hidden{display:none !important;visibility:hidden}.clearfix{zoom:1}.clearfix:before,.clearfix:after{content:"";display:table}.clearfix:after{clear:both}.spin{-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.headline .kicker{font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;text-transform:uppercase;color:#9a9a9a;font-size:1.1rem;letter-spacing:.05em;}.headline .kicker .icon{font-size:1.2em;vertical-align:-.2em}.headline .title{font-family:'Playfair Display',Georgia,serif;font-weight:700;font-size:2.9rem;margin-bottom:.5em}.headline .introtext{font-family:'Roboto Mono',monospace;font-size:1.2rem;color:#777}@media screen and (min-width:375px){.headline .title{font-size:3.1rem}}@media screen and (min-width:400px){.headline{margin-top:10px;}.headline .kicker{font-size:1.2rem}.headline .title{font-size:3.3rem}.headline .introtext{font-size:1.4rem}}@media screen and (min-width:500px){.headline{margin-top:15px;}.headline .kicker{font-size:1.3rem}.headline .title{font-size:3.8rem}}@media screen and (min-width:640px){.headline .title{font-size:4.6rem}.headline .introtext{font-size:1.4rem}}@media screen and (min-width:768px){.headline .title{font-size:5.6rem}.headline .introtext{font-size:1.6rem}}@media screen and (min-width:960px){.intro .flexwrap{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.flexwrap .headline{width:40%;padding:0 25px 0 50px;max-width:500px;margin-left:0;margin-right:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}.flexwrap .audioviz-wrap{width:60%;max-width:900px;padding:0 50px 0 25px;margin-left:0;margin-right:0}.headline{margin-top:20px;}.headline .title{font-size:5.2rem}.headline .topline + .title{margin:1em 0 1.3em}.headline .introtext{font-size:1.5rem}}@media screen and (min-width:1200px){.headline .title{font-size:5.7rem}}@media screen and (min-width:1400px){.headline{margin-top:40px;}.headline .title{font-size:5.9rem;width:95%}}@media screen and (min-width:1800px){.intro{margin-bottom:120px}.headline{margin-top:70px;}.headline .title{font-size:7rem;width:100%}.headline .introtext{font-size:1.7rem}.flexwrap .headline{padding:0 80px 0 50px;max-width:600px}}@media screen and (max-width:960px){html.mobile-fullscreen,html.mobile-fullscreen body{overflow:hidden;height:100%}html.mobile-fullscreen .intro{height:100%;margin-bottom:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}html.mobile-fullscreen .intro .topheader,html.mobile-fullscreen .intro .control-bar{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0}html.mobile-fullscreen .intro .audioviz-wrap{width:100%;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative}}.audioviz-wrap{margin-top:10px}#audioviz{position:relative;min-height:300px}.legend{margin-bottom:-15px;margin-top:-8px;z-index:700;position:relative;}.legend .icon-spd{font-size:3rem}.legend__list{font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.2rem;line-height:1.2;color:#777;margin-left:auto;width:12em;position:absolute;top:241px;right:0}.legend__item{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.legend__item .icon{margin-right:.5em}.cta-box{position:absolute;top:27%;left:50%;margin-left:-7em;width:14em;}.cta-box .start{width:100%;margin:0;font-size:1.8rem;}.cta-box .start .icon{font-size:.7em;vertical-align:0;margin-left:.25em;opacity:.6}.cta-box .cta-text{margin-top:.75em;font-size:1.3rem;color:#777;text-align:center;font-family:'Roboto Mono',monospace}.controls-box{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.controls-box .btn{padding:.5em 1em;color:#5a5a5a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.replay.disabled{pointer-events:none;opacity:.5}@media screen and (min-width:400px){.legend{margin-bottom:-15px;margin-top:-5px;}.legend__list{top:268px}.cta-box{font-size:1.4rem;}.cta-box .start{font-size:1.4em}.cta-box .cta-text{font-size:1em}}@media screen and (min-width:640px){.cta-box .start{font-size:1.6em}.controls-box{position:absolute;left:40px;bottom:40px}}@media screen and (min-width:768px){.legend__list{top:448px}.cta-box{top:40%;font-size:1.6rem;}.cta-box .start{font-size:1.4em}.controls-box{bottom:37px}}@media screen and (min-width:960px){.legend{margin-top:-20px;}.legend__list{top:392px}.cta-box{top:35%}.controls-box{bottom:45px;left:45px}}@media screen and (min-width:1400px){.legend{margin-top:0;margin-bottom:0;}.legend__list{top:400px}.legend .icon-spd{font-size:4rem}}@media screen and (min-width:1800px){.legend{margin-top:-30px;margin-bottom:-10px;}.legend__list{top:515px}.legend .icon-spd{font-size:5rem}.controls-box{bottom:40px;left:45px}.flexwrap .audioviz-wrap{margin-top:80px}}.svg-wrapper{position:relative;font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;z-index:0;}.svg-wrapper canvas{position:absolute;top:0;left:0;pointer-events:none;z-index:-1}.svg-wrapper .line{fill:none;stroke:#db4240;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5}.svg-wrapper .line-label{font-weight:700}.svg-wrapper .grid-line{stroke-dasharray:2 2;shape-rendering:crispedges}.svg-wrapper .axis-y line,.svg-wrapper .axis-x line{stroke:#ccc;shape-rendering:crispedges}.svg-wrapper .axis-y path,.svg-wrapper .axis-x path{stroke:#5a5a5a}.svg-wrapper .axis-x text{fill:#5a5a5a}.svg-wrapper .tick text{font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.1rem}.svg-wrapper .highlight-circle{fill:#db4240}.svg-wrapper .mini-circle{fill:#db4240}.svg-wrapper .annotation{cursor:pointer;}.svg-wrapper .annotation:hover{opacity:.8}.svg-wrapper .annotation line,.svg-wrapper .annotation path{stroke:#ccc;shape-rendering:crispedges;fill:none}.svg-wrapper .annotation circle{fill:#ccc}.svg-wrapper .annotation text{pointer-events:none;fill:#222;font-weight:700;text-anchor:middle;alignment-baseline:central;dominant-baseline:central;line-height:1}.svg-wrapper .line-label{font-size:1.2rem;font-weight:400;color:#222}@media screen and (min-width:400px){.svg-wrapper .tick text{font-size:1.2rem}}.annotation-list__item{margin-bottom:2em;font-size:1.2rem;}.annotation-list__item h3{font-size:1.8em;font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;margin-top:.5em}.annotation-list__number{color:#fff;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:.5em;font-weight:700;font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#222;width:2em;height:2em;border-radius:50%}.annotation-list__img-box{float:right;width:120px;height:120px;margin:0 0 .5em 1em;top:0;bottom:0;left:0;right:0;border-radius:50%;background-color:#808080;-webkit-perspective:100;perspective:100;overflow:hidden;}.annotation-list__img-box img{width:100%;height:auto}.annotation-list__up{font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:1.3rem;}.annotation-list__up a{display:inline-block;padding:.25em 0;}.annotation-list__up a:link,.annotation-list__up a:visited{color:#9a9a9a}.annotation-list__up a:hover{border-bottom:0;color:#4c80bc}.annotation-list__up a .icon{font-size:.9em;margin-left:.25em;vertical-align:-.1em}@media screen and (min-width:375px){.annotation-list__item{font-size:1.3rem}.annotation-list__up{font-size:1em}}@media screen and (min-width:400px){.annotation-list__item{font-size:1.4rem;}.annotation-list__item h3{font-size:2em;line-height:1.3}.annotation-list__up{font-size:1.4rem}}@media screen and (min-width:640px){.annotation-list__item{margin-bottom:3em;}.annotation-list__item h3{width:75%}.annotation-list__img-box{width:180px;height:180px}}@media screen and (min-width:768px){.annotation-list__item{font-size:1.5rem;margin-bottom:3em;}.annotation-list__item h3{line-height:1.3}}@media screen and (min-width:960px){.annotation-list{max-width:none;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}.annotation-list:before{content:'';width:40%;max-width:500px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding:0 25px 0 50px;display:block;-moz-box-sizing:border-box;box-sizing:border-box}.annotation-list .flexwrap{max-width:900px;width:60%;padding:0 50px 0 30px}.annotation-list__item{position:relative;max-width:640px;}.annotation-list__item h3{width:auto}.annotation-list__img-box{float:none;position:absolute;left:-280px;top:4em}}@media screen and (min-width:1800px){.annotation-list:before{max-width:600px;padding:0 80px 0 50px}.annotation-list__img-box{left:-310px}}footer.bg-wrap{background-color:#db4240;color:#fff}.remix{font-size:1.2rem;margin-bottom:4em;}.remix__title{font-family:'Playfair Display',Georgia,serif;font-size:3em;}.remix__title .light{color:#eb9796}.remix__dl-title{font-weight:700;}.remix__dl-title .light{font-weight:400;color:#eb9796}.remix__dl-img{width:100%;max-width:300px;height:auto}.remix__dl-btn{margin:1em 0;font-size:1.6rem;color:#5a5a5a;}.remix__dl-btn .icon{opacity:.4;margin-left:.25em;font-size:.7em;vertical-align:0}footer .footer-contactbox,footer .footer-credits{font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;color:#fff;}footer .footer-contactbox a:link,footer .footer-credits a:link,footer .footer-contactbox a:visited,footer .footer-credits a:visited{color:#fff;border-bottom:1px solid rgba(255,255,255,0.3)}footer .footer-contactbox a:hover,footer .footer-credits a:hover{color:#fff;border-color:#fff}footer hr{background-color:#c32725}@media screen and (min-width:375px){.remix{font-size:1.3rem}}@media screen and (min-width:400px){.remix__title{font-size:3em}}@media screen and (min-width:640px){.remix{font-size:1.4rem;}.remix__title{font-size:4em}.remix__dl-btn{font-size:1.8rem}}@media screen and (min-width:768px){.remix{font-size:1.5rem;}.remix__dl-btn{font-size:2rem}}@media screen and (min-width:960px){.remix{max-width:none;margin-left:0;margin-right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0;}.remix__header{width:40%;max-width:500px;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;padding:0 25px 0 50px}.remix__title{margin-top:.5em}.remix__dl{width:60%;max-width:900px;padding:0 50px 0 35px;top:9.5em;position:relative}}@media screen and (min-width:1100px){.remix__dl{top:4.9em}}@media screen and (min-width:1400px){.remix__title{font-size:5em;margin-top:0}footer .footer-second{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;padding:0;}footer .footer-second:before{content:'';-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;max-width:500px;width:40%;padding:0 25px 0 50px;-moz-box-sizing:border-box;box-sizing:border-box}footer .footer-second .flexwrap{width:60%;max-width:900px;padding:0 50px 0 35px}footer .footer-second hr{margin-left:0;margin-right:0}footer .footer-contactbox,footer .footer-credits{text-align:left;margin-left:0;padding:0;max-width:500px}}@media screen and (min-width:1800px){.remix__header{max-width:600px;padding:0 80px 0 50px}footer .footer-second:before{max-width:600px;padding:0 80px 0 50px}}body{font-family:'Roboto Mono',monospace}.text-wrap p{font-family:'Roboto Mono',monospace}.text-wrap h2,.text-wrap h3,.text-wrap .text-headline{font-family:'Roboto Mono',monospace;font-weight:700}.teaser-wrapper{font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif}@media screen and (max-width:768px){.info-button.is-fixed{display:none}}.info-box .info-title{font-family:'Roboto Condensed','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2em}.info-box .info-box-content{font-family:'Roboto Mono',monospace;font-size:1.2rem;}.info-box .info-box-content p{font-family:'Roboto Mono',monospace}@media screen and (min-width:375px){.info-box .info-box-content{padding:15px 20px}}@media screen and (min-width:500px){.info-box .info-box-content{font-size:1.3rem;padding:20px 30px}}@media screen and (min-width:768px){.info-box .info-box-content{font-size:1.4rem}}
Raw
the-sound-of-the-pound-stepline.markdown

The sound of the pound stepline

The sound of the pound is a data visualisation tracking and explaining the impact the Brexit has had on the value of GBP/USD

A Pen by Vincent Ryan on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment