body{
    margin:0;
}
#wrapper{
    max-width:860px;
    position: relative;
    margin:0 auto;
    font-family:'Guardian Egyptian Web';
    color:#333;
    -webkit-font-smoothing:antialiased;
    border-top:3px solid #4bc6df;
    background: #F6f6f6;
}
h1{
    font-size:12px;
    line-height:1em;
    margin:0.3em 0;
    font-weight:bold;
    color:#f37021;
    font-family:'Guardian Text Sans Web';
    display: none;
}
p{
    font-size:14px;
    line-height:1.2em;
}
svg tspan, svg, svg text{
    /*-webkit-font-smoothing:auto;*/
}
.progressBar{
    width:100%;
    height:6px;
    position: relative;
    border-radius: 3px;
    overflow: hidden;
    margin-top:10px;
    background:#DCDCDC;
}
.progressContainer{
    width:100%;
    overflow:hidden;
}

.progressContainer div:nth-child(2):before{
    background:transparent !important;
}
.chapter:before{
    display:none;
    width:1px;
    height:8px;
    background:rgba(0,0,0,0.2);
    content:'';
    position: absolute;
    left:0;
    transition:0.6s background;
}
.chapter.active:before{
    background:#7D3104;
    z-index:10;
}
.progressLine{
    background:#005689;
    position: absolute;
    left:0;
    height:100%;
    z-index:5;
    transition:0.4s width;
}
.graphic{
    width:100%;
    height:auto;
    border-top:1px solid #dcdcdc;
}
.graphic .svg-container{
    margin-top:-1px;
    line-height: 0;
}
.graphic svg .active{
    stroke:#4bc6df;
    stroke-width:2;
    stroke-opacity:1;
    fill:#fff;
    fill-opacity:0.2;
    transition:200ms stroke-opacity;
}
.content{
    /*height:140px;*/
    position: relative;
    padding:0 10px;
    box-sizing:border-box;
    margin-top:0;
}
.content p span{
    background:#ddd;
    cursor:pointer;
    padding:3px 0;
}
.content p span:hover{
    background:#4bc6df;
}
.content p{
    margin-right:0;
    margin-top:0;
    min-height:195px;
}
.navigation{
    position: absolute;
    right:10px;
    margin: 0;
    /*border-bottom:1px solid #dcdcdc;*/
    bottom:0;
    text-align: right;
}
.navigation button{
    font-family:'Guardian Text Sans Web';
    font-weight:bold;
    border:none;
    font-size:13px;
    cursor:pointer;
    height:30px;
    display: block;
    -webkit-font-smoothing:antialiased;
    position: relative;
    width:70px;
}
.navigation button:focus{
    outline:0;
}
.navigation button#next{
    background:#005689;
    color:#fff;
    padding:0 35px 0 8px;
    line-height: 1em;
    border-radius:9999px;
}
.navigation button#next:after{
    background-image:url(../img/arrow_button.svg);
    content:'';
    height:30px;
    width:30px;
    display:block;
    position: absolute;
    top:0;
    right:0;
    background-repeat: no-repeat;
    background-position: center center;
}
.navigation button#next:disabled{
    background:#ddd !important;
    color:#fff !important;
    cursor:default;
    display:none;
}
.navigation button#next:disabled:after{
    background-image:url(../img/arrow_button.svg) !important;
}
.navigation button#next:hover{
    background: #4bc6df;
    color:#333;
}
.navigation button#next:hover:after{
    background-image:url(../img/arrow_button_dark.svg);
    }
.navigation button#previous{
    background:transparent;
    border:none;
    color:#444;
    cursor:pointer;
    font-weight:normal;
    background:#dcdcdc;
    border-radius:9999px;
    padding:0 8px;
    margin-right:5px;
    margin:5px 0;
}
.navigation button#previous.previousHighlight{
    background:#005689;
    color:#fff;
    margin:0;
}

.navigation button#previous.previousHighlight:hover{
    background:#4bc6df;
    text-decoration: none;
}
.navigation button#previous:disabled{
    color:#bbb !important;
    text-decoration: none !important;
    cursor: default;
}
.navigation button#previous:hover{
    color:#333;
    background:#bdbdbd;
}
.progressBar{
        margin-bottom:10px;
    }
.graphic img{
    max-width:100%;
}
@media(min-width:380px){
    .content p{
        min-height:162px;
    }
}
@media(min-width:480px){
    .navigation{
        position: absolute;
        right:10px;
        width:auto;
        margin:0;
        padding:0;
        border:none;
        top:15px;
    }
    .navigation button#previous{
        position: absolute;
        top:30px;
        right:0;
    }
    .navigation button#previous.previousHighlight{
        top:0;
    }
    .content p{
        width:390px;
        margin-right:0;
        min-height:110px;
    }
    
}

@media(min-width:540px){
    .content p{
        width:420px;
    }
}

/*NEXT GEN BREAKOUT*/
@media(min-width:780px){
    .graphic{
        border:none;
    } 
    .navigation button{
        height:30px;
        display: inline-block
    }
    .activeStep{
        overflow:hidden;
    }
    .graphic{
        float:right;
        right:0;
        top:0;
        width:620px;
    }
    
    .content{
        min-height:420px;
        float:left;
        padding:10px 0 0 5px;
        width:155px;
    }
    .progressBar{
        margin-top:0;
    }
    .content:after{
        width:1px;
        height:100%;
        content:'';
        display:block;
        position: absolute;
        background:#dcdcdc;
        right:-6px;
        top:0;
    }
    .content p{
        width:auto;
    }
    .navigation{
        position: absolute;
        bottom:10px;
        top:auto;
        right:0;
    }
    .navigation button#previous{
        position: relative;
        top:auto;
        right:auto;
        display: inline-block;
        margin:0 3px 0 0;
    }
}
/*NEXT GEN BREAKOUT II*/
@media(min-width:860px){
    .content{
        min-height:310px;
        width:230px;
        padding:10px 0 0 10px;
    }
    .content:after{
        right:-11px;
    }
}