.header-dek {
    font:30px/36px "HaasDisplayBold", Helvetica, Arial, sans-serif;
}

.copywidth{
    min-width: initial;
}
.article-title.copywidth{
    max-width: 760px;
    width: 80%;
}

#scroll-container {
    position: relative;
}
.customContainer {
    margin: 0px auto;
    max-width: 1160px;
    overflow: visible;
}
.rightContainer {
    display: block;
    width:100%;
    right: 0px;
    top: 0px;
    z-index: -10;
    margin:0px;
    /*padding-top:100px;*/
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
.scroll-block {
    position: absolute;
}
.scroll-block.graph-scroll-fixed{
    position: fixed;
}
.scroll-block.graph-scroll-below{
    position: absolute;
    top: initial;
    bottom: -32px;
    margin-bottom: 40px;
    height: inherit;
}

.leftContainer {
    z-index:10;
    position: relative;
}
#map {
    width:40%;
    max-width: 498px;
    position: relative;
    float: right;
    right: 0px;
    top:0px;
    z-index: -10.1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
#map img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -5;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}

#map text {
    font-family: 'BWHaasText-55Roman', 'HaasText', sans-serif;
    font-size:13px;
}

#map path {
    opacity: 1;
}

#map path, circle {
    stroke: #939598;
    stroke: ;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}

#map circle {
    stroke-width: 0px !important;
    transition: stroke-width 0.3s;
}
#map circle#dot0 {
    stroke-width: 2px !important;
}
#map circle.arrived {
   stroke-width: 2px !important;
}

#map .routes path {
    fill: none;
    stroke: #231f20;
    stroke-miterlimit: 10;
    stroke-width: 3px
}
@keyframes dash {
    to {
        stroke-dashoffset:0;
    }
}
#map-mobile {
    display: none;
}

.bodycopy {
	width:60%;
	min-width:500px;
    max-width: 640px;
    padding-left: 30px;
	font: 500 1.1em/1.6em "TiemposTextWeb-Regular", "Georgia";
	color: #3c3c3c;
	text-align: left;
}
.video-container {
    margin:50px 0px 50px 0px;
}
.video-container p{
    font:500 0.8em/1em "TiemposTextWeb-Regular","Georgia";
    color: #3c3c3c;
    margin-top:0px;
    -webkit-margin-before:0;
}
.customHeader {
    position: relative;
    width: 100%;
    min-height: 500px;
    margin-bottom: -150px;
    max-height: 712px;
    overflow: visible;
    background: url(../img/header-1600.png) no-repeat center center;
    background-size: cover;
}
.header-text {
    width: 60%;
    max-width: 1160px;
    background:#ffffff;
    position: relative;
    margin: 0px auto 0px;
    /*top:125px;*/
    padding: 0px 30px 0px 30px;
}
.customHeader .article-title,
.header-dek p,
.bydek{
    /*color:#ffffff;*/
    text-decoration: none;
    text-align: center;
}

.header-dek {
    width:100%;
}
.header-dek p {
    font-family:"TiemposHeadline-Medium","Georgia";
    font-size: 0.8em;
}

/*
This styles define how it works, best to leave them alone
*/

/*.trigger{
    border-bottom: 3px dashed coral;
    opacity: 0.2;
}
.trigger.graph-scroll-active{
    opacity: 1;
 }*/

.mouse-over-img > span {
    position: relative;
    background: #eee;
}

.mouse-over-img img {
    position: absolute;
    z-index: 1; /* so other .mouse-over-img which are above this don't trigger */
    transform: scale(0, 0);
}

.mouse-over-img:hover img {
    transform: scale(1, 1)
}

/*
The styles below change how it looks, you can play with them :)
*/
.mouse-over-img {
    padding-right: .5em;
}
.mouse-over-img:hover{
    text-decoration: underline;
    cursor: pointer;
}
.mouse-over-img > span {
    display: inline-block;
    vertical-align: text-bottom;
    height: 1.2em;
    background-size: cover;
}
.mouse-over-img.town > span {
    background-image: url('../img/town-icon.png');
    width: 0.8em;
}
.mouse-over-img.popchart > span {
    background-image: url('../img/chart-icon.png');
    width: 1.2em;
}
.mouse-over-img img {
    transition: all 500ms ease-in-out;
    transition: all 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
    border: 1px solid black;
    opacity: 0;
}
.mouse-over-img.town img {
    top: -180px;
    left: -112px;
}
.mouse-over-img.popchart img {
    top: -180px;
    left: -112px;
}
.mouse-over-img.hasSource img {
    top: -180px;
}
.mouse-over-img.mouse-over-img-left img {
    left: 0px;
}
.mouse-over-img.mouse-over-img-right img {
    left: auto;
    right: 0px;
}
.mouse-over-img:hover img {
    opacity: 1;
}

@media only screen and (max-width: 942px){
    .article-title, .video-title, .cta-text {
        font-size: 38px;
        line-height: 42px;
    }
    .header-dek p {
        font-size: 0.8em;
    }

}

@media only screen and (max-width: 799px){
    body, html {
        overflow-x:hidden;
    }
    .article-title, .video-title, .cta-text {
        font-size: 34px;
        line-height: 38px;
    }
    .header-dek p {
        font-size: 0.7em;
        padding:0px 20px 0px 20px;
    }
    .customHeader,
    .customHeader img,
    .customContainer,
    .bodycopy {
        min-width: 200px;
        max-width: 799px;
        width: 100%;
        box-sizing:border-box;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
    }
    .desktopOnly {
        display: none;
    }
    .customContainer {
        margin: 30px auto;
        margin-top:0px;
    }
    .bodycopy {
        padding: 0px 30px 0px 30px;
    }
    .header-text {
        top:0px;
        padding:20px 0px 0px 0px;
        width: 100%;
    }
    #map-mobile {
        display: block;
        width: 100%;
    }

}

@media only screen and (max-width: 400px){
    .bodycopy {
        padding: 0px 18px;
    }
    video{
        width: 100%;
        height: inherit;
    }
    #map-mobile {
        display: block;
        width: 100%;
    }
    #map-mobile img {
        width: 100%;
    }
}