/* FONTS
================================================== */
@font-face {
    font-family: 'Boton-Medium';
    src: url('webfont/Boton-Medium.eot?') format('eot'), url('webfont/Boton-Medium.woff') format('woff'), url('webfont/Boton-Medium.ttf') format('truetype'), url('webfont/Boton-Medium.svg#Boton-Medium') format('svg');
}

/* CLEAR FIX
================================================== */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: "";
    clear: both;
    height: 0;
}

/* LAYOUT
================================================== */
body {
    font-size: 16px;
    font-family: 'Boton-Medium';
    font-weight: 400;
    line-height: 1.2;
}

p {
    margin: 0 0 0.5em 0;
}

.si-gt-menu {
    width: 280px;
    margin: 0 auto;
}

@media only screen and (max-width: 767px) {
    .si-gt-menu {
        width: 100%
    }
}

    .si-gt-content-container {
        margin: 0 auto;
        text-align: center;
    }

    .si-gt-content {
        width: 655px;
        position: relative;
        max-width: 96%;
        margin: 0 auto;
        overflow: hidden;
    }

    .si-gt-progress-container {
        width: 100%;
        max-width: 768px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0px;
        padding: 1.563em 0;
    }

    .si-gt-progress {
        width: 90%;
        height: 0.3em;
        background-color: #fff;
        margin: 0 auto;
    }

    .si-gt-progressbar {
        height: 0.3em;
        background-color: #4a85ad;
        -webkit-transition: .7s ease;
        -moz-transition: .7s ease;
        -ms-transition: .7s ease;
        -o-transition: .7s ease;
        transition: .7s ease;
    }

    .si-gt-text-container {
        padding: 4em 0 1.5em 0;
    }

    .si-gt-demo-header-container {
        padding: 0;
        margin: 0;
    }

    .si-gt-question-container {
        padding: 1.5em 0 1.5em 0;
    }

    .si-gt-answer-container {
        margin: 0 0 3.5em 0;
    }

    .si-gt-answer-value-left {
        font-size: 0.850rem;
        float: left;
    }

    .si-gt-answer-value-right {
        font-size: 0.850rem;
        float: right;
    }

    .si-gt-button-container {
        max-width: 100%;
        margin: 1em auto 0 auto;
        padding: 0;
    }

    .si-gt-footer {
        color: #777;
        font-size: 0.850em;
        font-weight: 400;
        text-align: center;
        border: none;
        padding: 6em 0.5em 0.5em 0.5em;
    }

    .si-gt-float-left {
        width: 60%;
        float: left;
    }

    .si-gt-float-right {
        width: 40%;
        float: right;
    }

    .si-gt-footer-menu-mrgreen {
        display: none;
    }

    .clear {
        clear: both;
    }

    .si-gt-logotype {
        width: 91px;
        height: 91px;
        margin: 0 0 1em 0;
    }

    .si-gt-start-button {
        font-size: 1.5em;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin: 0 auto;
    }

    #si-gt-left-overlay {
        width: 768px;
        height: 550px;
        position: absolute;
        top: 0;
        left: -768px;
        z-index: 10000;
    }

    #si-gt-right-overlay {
        width: 768px;
        height: 550px;
        position: absolute;
        top: 0;
        left: 768px;
        z-index: 10000;
    }

    .si-gt-result-abouttext {
        font-size: 0.8em;
    }


    .btn:hover {
        color: #fff;
        background-color: #ea7b21;
    }

    .btn-active {
        background-color: #ea7b21;
        border-color: #fff;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }

    #si-gt-closebutton {
        font-size: 10px;
        max-width: 100px;
        float: right;
        margin: inherit;
    }

    .si-gt-secondary-tip-center {
        width: 100%;
        margin: 0 0 15px 0;
        padding: 15px;
        background-color: #fff;
        border: 1px solid #ddd;
        word-break: break-word;
    }

    .si-gt-result-tipscontainer .si-gt-secondary-tip-center {
        width: 100%;
        font-size: 0.9em;
        text-align: left;
        word-break: break-word;
    }

    .si-gt-secondary-tip-left .si-gt-question, .si-gt-secondary-tip-right .si-gt-question, .si-gt-secondary-tip-center .si-gt-question {
        font-weight: bold;
        font-size: 1.1em;
    }

    .si-gt-result-tipscontainer {
        padding: 0.5em 0 1.5em 0;
    }

    /* ===== MENU ===== */
    .si-gt-header {
        display: block;
        height: auto;
        width: 100%;
        max-width: 754px;
        margin: 0 auto;
    }

    .navbar-toggler {
        width: 47px;
        height: 34px;
        background-color: #999999;
        border: none;
    }

        .navbar-toggler .line {
            width: 100%;
            float: left;
            height: 2px;
            background-color: #fff;
            margin-bottom: 5px;
        }

    /* ===== NAV BUTTONS ===== */
    a.si-gt-button:link, a.si-gt-button:visited {
        color: #000;
        font-weight: 400;
        text-transform: uppercase;
        border: 1px solid #b0aa92;
        max-width: 70%;
        margin: 0 auto;
        background: #fddf8c;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZkZGY4YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmOGI3NDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top, #fddf8c 0%, #f8b743 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fddf8c), color-stop(100%,#f8b743));
        background: -webkit-linear-gradient(top, #fddf8c 0%,#f8b743 100%);
        background: -o-linear-gradient(top, #fddf8c 0%,#f8b743 100%);
        background: -ms-linear-gradient(top, #fddf8c 0%,#f8b743 100%);
        background: linear-gradient(to bottom, #fddf8c 0%,#f8b743 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fddf8c', endColorstr='#f8b743',GradientType=0 );
    }

    a.si-gt-button:hover {
        color: #000;
        font-weight: 400;
        text-transform: uppercase;
        border: 1px solid #b0aa92;
        background: #fce7ae;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZTdhZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmN2JlNWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top, #fce7ae 0%, #f7be5b 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fce7ae), color-stop(100%,#f7be5b));
        background: -webkit-linear-gradient(top, #fce7ae 0%,#f7be5b 100%);
        background: -o-linear-gradient(top, #fce7ae 0%,#f7be5b 100%);
        background: -ms-linear-gradient(top, #fce7ae 0%,#f7be5b 100%);
        background: linear-gradient(to bottom, #fce7ae 0%,#f7be5b 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fce7ae', endColorstr='#f7be5b',GradientType=0 );
    }

    a.si-gt-button:active {
        color: #000;
        font-weight: 400;
        text-transform: uppercase;
        border: 1px solid #b0aa92;
        background: #f8b743;
        background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y4Yjc0MyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZGRmOGMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
        background: -moz-linear-gradient(top, #f8b743 0%, #fddf8c 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8b743), color-stop(100%,#fddf8c));
        background: -webkit-linear-gradient(top, #f8b743 0%,#fddf8c 100%);
        background: -o-linear-gradient(top, #f8b743 0%,#fddf8c 100%);
        background: -ms-linear-gradient(top, #f8b743 0%,#fddf8c 100%);
        background: linear-gradient(to bottom, #f8b743 0%,#fddf8c 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b743', endColorstr='#fddf8c',GradientType=0 );
    }

    .si-gt-slide-counter {
        width: 200px;
        color: #fff;
        font-size: 0.750em;
        font-weight: 700;
        letter-spacing: 0.0625em;
        text-transform: uppercase;
        background-color: #ff0000;
        margin: 0 auto 2.5em auto;
        padding: 0.7em 0.5em 0.5em 0.5em;
    }


    /* TYPOGRAPHY & LINKS
================================================== */
    h1 {
        font-size: 2em;
        font-weight: 700;
    }

    h2 {
        font-size: 1.8em;
        font-weight: 700;
    }

    h3 {
        font-size: 1.2em;
        font-weight: 700;
    }

    .si-gt-standard-text {
        color: gray;
        padding: 0.5em 0 1.5em 0;
    }

    .si-gt-question {
        font-size: 1.8em;
    }

    .si-gt-footer a:link, .si-gt-footer a:visited {
        color: #777;
        font-weight: 400;
        text-decoration: none;
    }

    .si-gt-cookie-text-container {
        margin-top: 5%;
        text-align: left;
    }

    .si-gt-cookie-text {
        color: #999;
        margin: 0.5em 0 1em 0;
    }

/* PAGE SLIDE
================================================== */
    .si-gt-slide-container {
        min-height: 300px;
        overflow: hidden;
        -webkit-transition: height .5s ease;
        transition: height .5s ease;
    }

    .si-gt-slide {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
        width: 100%;
        max-width: 100%;
        min-height: 300px;
        position: absolute;
        -webkit-transition: -webkit-transform .7s ease, opacity .7s ease;
        -moz-transition: -moz-transform .7s ease, opacity .7s ease;
        -ms-transition: -ms-transform .7s ease, opacity .7s ease;
        -o-transition: -o-transform .7s ease, opacity .7s ease;
        transition: transform .7s ease, opacity .7s ease;
    }

    .prev {
        width: 100%;
        -webkit-transform: translate3d(-110%, 0, 0);
        -moz-transform: translate3d(-110%, 0, 0);
        -ms-transform: translate3d(-110%, 0, 0);
        -o-transform: translate3d(-110%, 0, 0);
        transform: translate3d(-110%, 0, 0);
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
    }

    .active {
        width: 100%;
        -moz-opacity: 1;
        opacity: 1;
        filter: alpha(opacity=100);
        visibility: visible;
    }

    .next {
        width: 100%;
        -webkit-transform: translate3d(110%, 0, 0);
        -moz-transform: translate3d(110%, 0, 0);
        -ms-transform: translate3d(110%, 0, 0);
        -o-transform: translate3d(110%, 0, 0);
        transform: translate3d(110%, 0, 0);
        -moz-opacity: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }




    /* 10 scale buttons */
    .sid-row-button {
        width: 8%;
        margin-left: 1%;
        padding-top: 5px;
        padding-bottom: 5px;
        display: block;
        float: left;
        border: 1px solid #000000;
        background-color: #2d5874;
    }

        .sid-row-button:hover,
        .sid-row-button:active {
            cursor: pointer
        }

    .button-row {
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .sid-row-button:first-child {
        margin: 0;
    }

    .button-row-under-left {
        font-size: 0.850rem;
        float: left;
    }

    .button-row-under-right {
        font-size: 0.850rem;
        float: right;
    }

    @media (max-width: 576px) {
        .button-row-under-left {
            margin-left: 10%;
        }

        .button-row-under-right {
            margin-right: 10%;
        }

        .sid-row-button:last-child {
            padding: 0;
        }
    }

    /* ===== DEMOGRAPHIC YES-NO BUTTONS ===== */
    .si-gt-yesno {
        margin-top: 5%;
    }

    .yesno-btn {
        background-color: #294054;
    }

    /* ===== DEMOGRAPHIC AGE ===== */
    #si-gt-age-container .si-gt-age {
        width: 250px;
        margin: 0 auto;
    }

    input[type=number]#si-gt-age {
        color: #000;
        font-size: 2.250em;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: normal;
        text-align: center;
    }

    /* remove arrow buttons in the text field */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* ===== DEMOGRAPHIC VISIT FREQUENCE ===== */
    .si-gt-visit-frequence-fieldset {
        margin-top: 5%;
    }

    .si-gt-visit-frequence-selector {
        background-color: #294054;
    }

    /* ===== DEMOGRAPHIC GAMES ===== */
    .si-gt-games-fieldset {
        margin-top: 5%;
    }

    .si-gt-games-selector {
        background-color: #294054;
    }

    /* CHART
================================================== */
    .si-gt-chart {
        padding: 0;
        margin: 0;
        width: 48%;
        float: left;
    }

        .si-gt-chart .si-gt-bar-1 {
            background-color: #9ecd4e;
            width: 50px;
        }

        .si-gt-chart .si-gt-bar-2 {
            background-color: #f5a927;
            width: 50%;
        }

        .si-gt-chart .si-gt-bar-3 {
            background-color: #df4c45;
            width: 100%;
        }

        .si-gt-chart li:first-child {
            margin: 0 0 10px 0;
        }

        .si-gt-chart li {
            height: 40px;
            margin: 0 0 10px 0;
            position: relative;
            background-color: #ededed;
            list-style: none;
            list-style: none;
        }

            .si-gt-chart li:last-child {
                margin-bottom: 0;
            }

    .si-gt-chart-label {
        text-align: left;
        height: 40px;
    }

    .si-gt-chart-icon {
        width: 30px;
        height: 30px;
        margin: 5px 0 5px 6px;
    }

    .si-gt-chart-text {
        width: 48%;
        padding: 0;
        margin: 0;
        font-size: 0.850em;
        float: right;
    }

        .si-gt-chart-text li {
            height: 40px;
            min-height: 40px;
            margin: 0 0 10px 0;
            position: relative;
            text-align: left;
            list-style: none;
        }

            .si-gt-chart-text li:last-child {
                margin-bottom: 0;
            }

        .si-gt-chart-text em {
            font-weight: 700;
        }

    /* FEEDBACK
================================================== */
    .si-gt-givefeedback-placeholder {
        min-height: 370px;
    }

    .si-gt-givefeedback-content {
        margin: 0 4px 1em 4px;
        padding: 15px;
        background-color: #fff;
        border: 1px solid #e9e9ec;
        -webkit-border-radius: 4px;
        border-radius: 4px;
        clear: both;
    }

    .si-gt-givefeedback-headline {
        color: #000;
        font-size: 1.250em;
        font-family: 'SvenskaSpelPlatform-Bold', 'PlatformRegularBold', "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 700;
        letter-spacing: 1px;
    }

    .si-gt-givefeedback-rate-text {
        width: 70%;
        line-height: 1.2;
        text-align: left;
        float: left;
    }

    .si-gt-givefeedback-field-text {
        text-align: left;
        vertical-align: middle;
        margin-bottom: 0.750em;
    }

    textarea#si-gt-feedbacktextbox {
        height: 100px;
        margin: 0 0 0.5em 0;
        padding: 7px;
        color: #000;
        text-align: left;
        background-color: #fff;
        border: 1px solid #d6d6d6;
        -webkit-border-radius: 0;
        border-radius: 0;
        display: block;
        box-shadow: none;
        resize: none;
    }

    .si-gt-givefeedback-rating {
        float: right;
    }

        .si-gt-givefeedback-rating img {
            width: 24px;
            height: 24px;
        }

    .si-gt-givefeedback-container .ui-btn {
        width: 150px;
        color: #fff;
        font-size: 0.850em;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-weight: 400;
        text-transform: uppercase;
        border: none;
        border-radius: 50px;
        margin: 0 auto;
        padding-top: 1em;
        background: #e21113;
        float: right;
        filter: none;
        -webkit-transition: .4s ease;
        -moz-transition: .4s ease;
        transition: .4s ease;
    }

    #si-gt-givefeedback-sent {
        font-size: 1.250em;
    }

    #si-gt-feedbacksubmit {
        max-width: 100px;
        font-size: 10px;
        float: right;
    }

    /* Spinner
================================================== */
    .spinner-border {
        vertical-align: inherit;
    }

    /* MEDIA QUERIES
================================================== */
    @media only screen and (max-width: 480px) {
        /* =====  TEST ===== */
        .si-gt-question {
            font-size: 1.5em;
        }

        .si-gt-standard-text {
            font-size: 1em;
            padding: 1.5em 0 1.5em 0;
        }

        .sid-row-button {
            font-size: 1em;
        }

        .si-gt-slide-counter {
            margin: 0 auto 1.5em auto;
        }

        .si-gt-progress-container {
            position: absolute;
            top: 0px;
            width: 85%;
            margin: 0 auto;
        }

        .si-gt-menu {
        }

        /* ===== RESULT ===== */
        .si-gt-result-container {
            padding: 0.5em;
        }

        .si-gt-result-message {
            padding: 1em;
        }

        .si-gt-result-text {
            width: 100%;
            max-width: 100%;
        }

        .si-gt-result-tipscontainer {
            padding: 1em;
        }

        .si-gt-result-tips-text {
            width: 100%;
            max-width: 100%;
        }

        .si-gt-result-tips-phone span.line1 {
            font-size: 3em;
        }

        .si-gt-result-tips-phone span.line2 {
            font-size: 5em;
        }

        .si-gt-secondary-tip-left, .si-gt-secondary-tip-right {
            width: 100%;
            height: auto;
            min-height: 50px;
            padding: 15px;
            float: none;
        }

        /* ===== CHART ===== */
        .si-gt-chart {
            height: 250px;
            margin: 0 auto 1em auto;
            padding: 0;
            width: 100%;
            float: none;
        }

            .si-gt-chart .si-gt-bar-1 {
                background-color: #9ecd4e;
                height: 50px;
                width: 100%;
            }

            .si-gt-chart .si-gt-bar-2 {
                background-color: #f5a927;
                height: 125px;
                width: 100%;
            }

            .si-gt-chart .si-gt-bar-3 {
                background-color: #df4c45;
                height: 250px;
                width: 100%;
            }

            .si-gt-chart li:first-child {
                margin: 0 2.5% 0 0;
            }

            .si-gt-chart li {
                display: inline-block;
                margin: 0 2.5% 0 2.5%;
                width: 15%;
                position: relative;
                text-align: center;
                vertical-align: bottom;
                bottom: 0;
                background-color: #ededed;
                height: 250px;
            }

                .si-gt-chart li:last-child {
                    margin: 0 0 0 2.5%;
                }

        .si-gt-chart-label {
            bottom: 0;
            position: absolute;
            overflow: hidden;
            width: 100%;
        }

        .si-gt-chart-icon {
            width: 70%;
            height: auto;
            margin: 15%;
            bottom: 0;
            position: absolute;
        }

        .si-gt-chart-text {
            padding: 0;
            margin: 0;
            width: 100%;
            float: none;
        }

            .si-gt-chart-text li:first-child {
                margin: 1em 0 1em 0;
            }

            .si-gt-chart-text li {
                margin: 0 0 1em 0;
                text-align: left;
            }

            .si-gt-chart-text em {
                font-weight: bold;
            }

        #si-gt-sendfeedback-container h2 {
		font-size: 1.1em;
	}

	.si-gt-givefeedback-content {
		font-size: 0.9em;
	}

	.si-gt-givefeedback-rate-text {
		margin-bottom: 0.5em;
	}

	.si-gt-givefeedback-rate-text,
	.si-gt-givefeedback-rating {
		width: 100%;
		float: none;
	}

	.si-gt-givefeedback-rating img {
		width: 30px;
		height: auto;
	}
}