body {
                      /* Better Font Rendering */
                        text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
                        text-rendering: optimizeLegibility !important;
                        -webkit-font-smoothing: antialiased !important;
                                            }
                html, body {
                    height: 100%;
                }
                body {
                    background: #f8f7f4;
                    color: #333333;
                    padding: 0;
                    margin: 0;
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 1.5;
                    position: relative;
                    cursor: default;
                }
                .row {
                    max-width: 1200px;
                }
                header .sticky {
                    overflow: hidden;
                    margin: 0 !important;
                    background: #ed3136;
                    color: #ffffff;
                    width: 100%;
                    height: 72px;
                    z-index: 99999;
                    position: fixed;
                    top: 0;
                    transition: top 0.2s ease-in-out;
                    padding: 0;
                    border: none;
                }
                .logo {
                    position: relative;
                    margin-top: 18px;
                    height: 38px;
                }
                .logo2 {
                    height: 35px; 
                    float:right; 
                    margin-top:18px;
                }
                header .logo-top {
                    text-indent: -99999px;
                }
                header .header-logo {
                        width: 156px;
                        height: 33px;
                        background-image: url(../images/logo.png);
                        background-repeat: no-repeat;
                        background-size: contain;
                        vertical-align: bottom;
                        display: inline-block;
                        position: absolute;
                        bottom: 0;
                        margin-right: 10px;
                    }

                    header .second-logo {
                        width: 188px;
                        height: 30px;
                        background-image: url(../images/sub-logo.png);
                        background-repeat: no-repeat;
                        background-size: contain;
                        vertical-align: bottom;
                        display: inline-block;
                        position: absolute;
                        opacity: 0.7;
                        bottom: -5px;
                        left: 175px;
                    }

                .nav-up .sticky {
                    top: -72px;
                }
                main {
                    overflow: hidden;
                    margin-top: 85px;
                }

                a {
                    color: #333;
                    text-decoration: underline;
                }
                a:hover {
                    color: #ed3136;
                }
                h1, h2, h3, h4, h5, h6 {
                        font-family: Roboto, Arial, sans-serif; }
                
                h1 {
                    color: #333;
                    font-size: 60px;
                    font-weight: 300;
                    letter-spacing: -1px;
                    line-height: 58px;
                    margin-bottom: 30px;
                }
                h2 {
                    color: #333;
                    font-size: 45px;
                    font-weight: 100;
                    letter-spacing: -1px;
                    line-height: 50px;
                }
                h3 {
                    color: #333;
                    font-weight: 300;
                    margin-left: 10px;
                }
                .description {
                    text-align: right;
                }


		    	.svg-container {
				    display: inline-block;
				    position: relative;
				    width: 100%;
				    padding-bottom: 100%; /* aspect ratio */
				    vertical-align: top;
				    overflow: hidden;
				}
				.svg-content-responsive {
				    display: inline-block;
				    position: absolute;
				    top: 10px;
				    left: 0;
				}

        		#intro-section {
                    height: 100%;
                    z-index: -1 !important;
                }
                #topImage {
                    padding: 0;
                    float: none;
                    width: 100%;
                    overflow: hidden;
                    max-height: 390px;
                }
                #topImage img {
                    position: relative;
                    top: -55px;
                }
                .boxed {
                    background-color: #fff;
                    box-shadow: 1px 1px 3px 0 rgba(0,0,0,.1);
                }
                .questionWrap .boxed {
                    padding-top: 60px;
                    padding-left: 15%;
                    padding-right: 15%;
                    height: 100%;
                    position: relative;
                }
                .graphArea {
                    padding-top: 20px;
                    padding-left:  10%;
                }

                .amount {
                    font-size: 25px;
                    font-weight: 300;
                }
                #intro-section .column {
                    padding-top: 20px;
                    padding-left: 15%;
                    padding-right: 15%;
                }
                #intro-section .row {
                    min-height: 75%;
                    padding-bottom: 80px;
                }
                #intro-section h1 {
                    width: 100%;
                }
                #intro-section {

                }
                .skrollable {
                    height: 100%;
                    width:100%;
                }
                .questionWrap {
                    top:9999px;
                    padding-top: 5px;

                }
                 .odd {

                }
                .even {


                }
                .slick-slide, .slick-slide:focus {outline: none;}
                .slick-prev:before, .slick-next:before { 
                        color:#333 !important;
                    }
                #selection:focus {outline: none;}
                #selection {
                    font-size: 1.2em;
                    height: 3rem;
                    padding-left: 2%;
                    width: 60%;
                    float: right;
                }
                .right {
                    float: right;
                }
                select {
                        background-size: 20px 10px;
                        background-color: #f8f7f4;
                }
                #mapArea {
                    position: absolute;
                    top: 50px;
                }
                #mapArea path {
                        stroke: #fff;
                        stroke-width: .5px;
                        fill-opacity:0.6;
                    }

                #mapArea path:hover {
                        fill-opacity:1;
                    }
                #mapArea text {
                        fill: #000;
                        font-family: sans-serif;
                    }

                .tooltip:before {
                        border: none;
                    }
                .tooltip {
                        padding: 2px 10px;
                        max-width: 15em;
                        pointer-events: none;
                        background: rgba(0,0,0,0.7);
                    }
                .hidden {
                        display: none;
                    }
                .selected {
                        fill: #ED3136;
                    }
            .description.right h2 {
                font-size: 38px;
            }

            @media(max-width: 1400px) {
                 .graphArea {
                    padding-left:  20%;
                    margin-top: 40px;
                }
            }

            /* medium screens */
            @media(max-width:960px) {
                main {
                    margin-top: 70px;
                }
                .questionWrap .boxed {
                    padding-top: 60px;
                    padding-left: 10px;
                    padding-right: 10px;
                }
                .graphArea {
                    padding-left: 10%;
                }
                .slick-slider button {
                    display: none !important;
                }
                #topImage img {
                    position: relative;
                    top: 0;
                }


            }

            /* medium mobile screens */
            @media(max-width:640px) {
                body {
                    background-color: #fff;
                }
                #intro-section .row {
                    padding-bottom: 20px;
                }

                .boxed {
                    height: 90%;
                    background-color: #fff;
  
                    overflow: visible;
                }
                .graphArea {
                    padding-top: 10px;
                    padding-left:  10%;
                }
                .description {
                    padding-top: 0;
                    text-align: left;
                }
                h2 {
                    font-size: 40px;
                    line-height: 35px;
                }
                #selection {
                    font-size: 1em;
                    height: 2.3rem;
                    padding-left: 10px;
                    width: 100%;
                }
                #mapArea {
                    position: relative;
                    top: 0;
                    text-align: center;
                }
                #question7 .graphArea {
                    margin-top: -30px;
                }

            }

            /* small mobile screens */
            @media(max-width:480px) {
               header .sticky {
                   height: 50px;
               }
               .logo {
                height: 20px;
               }
               .logo2 {
                    height: 27px; 
                    margin-top:12px;
                }
               header .header-logo {
                height: 20px;
               }
                main {
                    margin-top: 48px;
                }
                .boxed {
                        height: 100%;
                }
                .graphArea {
                    padding-top: 10px;
                    padding-left:  5%;
                }
                #intro-section .column {
                    padding-top: 20px;
                     padding-left: 5%; 
                    padding-right: 5%; 
                }
                h1 {
                    font-size: 40px;
                    line-height: 40px;
                    margin-bottom: 30px;
                }
                h2 {
                    font-size: 22px;
                    line-height: 30px;
                    font-weight: 300;
                }
                h3 {
                    text-align: center;
                    margin: 0;
                }
                .description.right h2 {
                    font-size: 22px;
                }
                #selection {
                    font-size: 0.8em;
                    width: 100%;
                }


            }