/** MATCH HEADER CHOOSE KOMMUNAL OR REGIONAL **/

.dr-form.find-constituency.boxed.question { padding:0px !important; }
.site-content > [class*="-result"] {
    position: relative;
    margin: 20px 0 0;
    &.boxed {
        margin: 20px 10px 0;
    }
} 

.choose-election {
    //margin-bottom:20px;
    position:relative;
    //background:url('../images/match-top-choose-side-bg.gif') repeat-y top left;
    //background-color: @primary-30;
    padding:35px 50px 20px 50px;

    div {
        font:42px/1 "gibsonSemiBold","Arial Black",sans-serif;
        width: 680px;
    }
    span {
            padding:10px 0 20px 0;
            display:block;
            font:18px/20px "gibsonRegular","Arial",sans-serif;
            color:@secondary;
        }

    .meta-txt {
        padding-top:0;
        font:12px/1 "gibsonRegular","Arial",sans-serif;
        color:@primary-100-fallback;
        color:@primary-100;
    }
    span.num { display:inline; }
    .choose-k-r {
        display:inline-block;
        li {
            float: left;
            padding-right: 20px;

            span {
                padding-top:20px;
            }
            a {
                background-color:@secondary-light;
                height:58px;
                text-align:center;
                font:24px/58px "gibsonRegular","Arial",sans-serif;
                &.selected {
                    background-color:#000;
                }
            }

            &:after {
                clear:both;
                content:".";
                display:block;
                visibility:hidden;
                height:0;
                line-height:0;
            }
            
        }
    }
        .dr-ui-button {
            
            &.selected {
                background-color:#000;
            }
                &:hover {
                background-color:@secondary;
            
        }
    }


}

.question-container
{
    position: relative;

    &.dr-list
    {
        overflow: visible;
    }

    font: 14px/30px "gibsonRegular","Arial",sans-serif;

    .region-select-area
    {
        p
        {
            font: 18px/20px "gibsonRegular","Arial",sans-serif;
            color: @secondary;
            text-align: center;
            //font-weight: bold;
            //text-transform: uppercase;
            span
            {
                font: 42px/1 "gibsonSemiBold","Arial Black",sans-serif;
                color: #000;
            }
        }

        .change-region
        {
            position: relative;
            top: 0;
            text-aling: center;
            margin: 0 auto;
            //background-color:transparent !important;
            border: 0;
            //color:@primary;
            font: 12px/1 "gibsonRegular","Arial",sans-serif;
            width: 580px !important;

            &.dr-icon-search
            {
                width: 145px !important;
            }

            &:before
            {
                //color:@primary;
            }
        }
    }

    .submit-container
    {
        border: none;
        overflow: auto;
    }

    .question-submit
    {
        float: right;
        height: 60px;
        width: 257px;
        font: 24px/26px "gibsonRegular","Arial",sans-serif;
        background-color: @secondary-nature;

        &:hover
        {
            background-color: #1E6523;
        }
    }

    > .dr-link-readmore
    {
        &.hidden
        {
            display: none;
        }

        background: none;
        padding-bottom: 0;
        position: absolute;
        right: 0;
        top: 0px;
        margin-right: 20px;
    }

    .question-overlay
    {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.7);
        width: 100%;
        height: 100%;

        &.hide
        {
            display: none;
        }
    }

    .constituency
    {
        background-color: #afbec2;

        p
        {
            font: 18px/21px "gibsonRegular","Arial",sans-serif;
            color: #0d3945;
        }
    }

    .chosen-constituency
    {
        background-color: #afbec2;

        &:after
        {
            clear: both;
            display: block;
            line-height: 0;
            height: 0;
            visibility: hidden;
            content: ".";
        }

        > h2
        {
            text-transform: none;
            font: 30px/30px "gibsonSemiBold","Arial Black",sans-serif;
            border: 0;
            margin-bottom: 0;
            padding-bottom: 10px;
        }

        > p
        {
            font: 18px/21px "gibsonRegular","Arial",sans-serif;
            float: left;
            width: 55%; //470px

            button.change {
                color:@dark-blue;
                float: none;
                margin-top: 0;
                font: inherit;
                background: none;
                text-transform: uppercase;
                display: inline;
                padding: 0;
                font-size: 14px;
                text-decoration: underline;
            }
        }

        p.buttons.question
        {
            float: right;
            width: 35%; //270px

            button
            {
                font-size: 24px;
                height: 60px;
                margin-top: -10px;
                width: 257px;
            }
        }
    }
}


.info-box-questions {
    display: none;
    border: 3px #ff0000 solid;
    background-color: #fff;
    padding: 10px;
    //margin-bottom:20px;
    font: 18px/24px "gibsonRegular","Arial",sans-serif;
    span {
        color:#000;
        font-family: "gibsonSemiBold","Arial Black",sans-serif;
    }
    p { padding:0; }
    &.show {
        display: block;
    }
}


.questions
{

    .item
    {
        position: relative;
        background-image: none;
        border-top: #cdcdcd 1px solid;
        padding-left: 6.6%;
        margin-bottom: 10px;
        margin-left: -20px;
        margin-right: -20px;

        > *
        {
            margin-right: 20px;
            margin-left: 20px;
        }

        &:first-child
        {
            border-top: 0;
        }

        &:last-child
        {
            border-bottom: #cdcdcd 1px solid;
            margin-bottom: 20px;
        }

        &.missing
        {
            //border:3px #ff0000 solid;
            outline: 3px #ff0000 solid;
            margin: 0 -15px 10px;
            padding-left: 77px;

            .icon
            {
                right: 140px;
            }

            p.txt
            {
                width: 59%;
            }
        }

        .metainfo
        {
            //background:url("../images/num-circle.gif") no-repeat top left;
            border-radius: 20px;
            background: #000;
            font: 24px/40px "gibsonLight","Arial",sans-serif;
            margin-left: -4%;
            width: 40px;
            height: 40px;
            text-align: center;
            color: #FFF;

            span.hidden
            {
                display: none;
            }
        }

        h3
        {
            font: 18px/30px "gibsonRegular","Arial",sans-serif;
            color: @primary-100;
            text-transform: uppercase;
            margin-top: -30px;
            margin-bottom: 4px;
        }

        p
        {
            font: 24px/28px "gibsonSemiBold","Arial Black",sans-serif;
            color: #000;
            width: 60%;
        }

        .description
        {
            font: 14px/16px "gibsonRegular","Arial",sans-serif;
            color: #3c4750;


            ol.for-against
            {
                background: url("http://www.dr.dk/assets/img/border.svg") repeat-x -2px -2px;
                margin-top: 15px;

                &:after
                {
                    clear: both;
                    content: ".";
                    visibility: hidden;
                    line-height: 0;
                    height: 0;
                }

                li.item
                {
                    padding: 10px 0 0;
                    margin: 0 0 10px;
                    background: none;
                    width: 45%;
                    float: left;
                    font:14px/1 "GibsonRegular";
                    color:@blue-grey;

                    &:first-child
                    {
                        margin-right:20px;
                    }

                    span[class*="-icon"]
                    {
                        margin: 0 0 10px;
                        display: block;
                        font-family:GibsonSemiBold;                 
                        text-transform:uppercase;                        

                        &:before
                        {
                            content: " ";
                            padding: 16px 15px 0 7px;
                            display: inline-block;
                        }
                    }

                    span.for-icon
                    {
                        &:before
                        {
                            background: url("../images/match-for-icon.png") no-repeat top left;
                        }
                    }

                    span.against-icon
                    {
                        &:before
                        {
                            background: url("../images/match-aginst-icon.png") no-repeat top left;
                            margin: 0 0 -4px;
                        }
                    }

                    &:last-child
                    {
                        border: 0;
                    }
                }
            }
        }




        dl
        {
            //border-top: solid 1px @grey-80;
            margin-top: 20px;
            height: 50px;

            dt
            {
                font: 14px/30px "gibsonRegular","Arial",sans-serif;
                padding-bottom: 4px;
            }

            dd
            {
                float: left;
                margin-right: 2%;
                margin-bottom: 10px;

                button
                {
                    width: 150px;
                    background-color: rgba(85,116,124,1);

                    &.selected, &:hover
                    {
                        background-color: @primary;
                    }
                }
            }
        }
    }
}

.icon {
  width: 222px;
  height: 165px;
  float: right;
  overflow:hidden;
  background-image: url("../images/fv15-question-icons.png");
  background-repeat: no-repeat;

  &.icon-1  {background-position: 0 -3416px;}
  &.icon-2  {background-position: 0 -3251px;}
  &.icon-3  {background-position: 0 -3080px;}
  &.icon-4  {background-position: 0 -2905px;}
  &.icon-5  {background-position: 0 -2732px;}
  &.icon-6  {background-position: 0 -2559px;}
  &.icon-7  {background-position: 0 -2384px;}
  &.icon-8  {background-position: 0 -2170px;}
  &.icon-9  {background-position: 0 -1999px;}
  &.icon-10 {background-position: 0 -1829px;}
  &.icon-11 {background-position: 0 -1653px;}
  &.icon-12 {background-position: 0 -1471px;}
  &.icon-13 {background-position: 0 -1301px;}
  &.icon-14 {background-position: 0 -1128px;}
  &.icon-15 {background-position: 0 -950px;}
  &.icon-16 {background-position: 0 -768px;}
  &.icon-17 {background-position: 0 -600px;}
  &.icon-18 {background-position: 0 -417px;}
  &.icon-19 {background-position: 0 -244px;}
  &.icon-20 {background-position: 0 -64px;}

}



@media (max-width: 959px)
{
    .question-container .constituency
    {
        .dr-form.find-constituency
        {
            label
            {
                margin-bottom: 20px;

                &.postnumber,
                &.streetname,
                &.streetnumber
                {
                    width: 100%;
                }
            }

            p
            {
                &.buttons
                {
                    button
                    {
                        width:100%;
                        margin-top:0;
                    }
                }
            }
        }
    }
}



@media (max-width: 870px)
{
    .question-container
    {
        .chosen-constituency
        {
            > p
            {
                &.buttons.question
                {
                    button
                    {
                        width:200px;
                    }
                }
            }
        }
    }
}

@media (max-width: 700px) {
    .questions .item p.description { width:85%; }
    .question-container,
    .question-result {
        .chosen-constituency
        {
            > p
            {
                width: 100%;
                font-size: 16px;
                line-height: 18px;

                button.change
                {
                    height:18px;
                }

                &.buttons.question
                {
                    width: 100%;
                    float: none;
                    margin: 0;

                    button
                    {
                        width: 100%;
                        height: 40px;
                        margin:10px 0 0;
                    }
                }
            }
        }
    }

    .icon {
        width:120px; //133px
        height:94px;
        background-image: url("../images/fv15-question-icons.png");

        &.icon-1  {background-position: -265px -3454px;}
        &.icon-2  {background-position: -265px -3281px;}
        &.icon-3  {background-position: -265px -3104px;}
        &.icon-4  {background-position: -265px -2928px;}
        &.icon-5  {background-position: -265px -2752px;}
        &.icon-6  {background-position: -265px -2575px;}
        &.icon-7  {background-position: -265px -2399px;}
        &.icon-8  {background-position: -265px -2217px;}
        &.icon-9  {background-position: -265px -2044px;}
        &.icon-10 {background-position: -265px -1867px;}
        &.icon-11 {background-position: -265px -1690px;}
        &.icon-12 {background-position: -265px -1510px;}
        &.icon-13 {background-position: -265px -1338px;}
        &.icon-14 {background-position: -265px -1160px;}
        &.icon-15 {background-position: -265px -984px;}
        &.icon-16 {background-position: -265px -802px;}
        &.icon-17 {background-position: -265px -632px;}
        &.icon-18 {background-position: -265px -450px;}
        &.icon-19 {background-position: -265px -276px;}
        &.icon-20 {background-position: -265px -100px;}

    }

    .choose-election {
        div {
            font:32px/1 "gibsonSemiBold","Arial Black",sans-serif;
        }

        .choose-k-r {
            width:100%;
            li {
                &:first-child {
                    margin:0 0 20px 0;
                }
                span {
                    display: none;
                }

                .dr-ui-button {
                    padding:0 10px;
                    width:100%;
                    font:20px/58px "gibsonRegular","Arial",sans-serif;
                }
            }
        }
    }
}


.question-container, .question-result, .result-container {
    &.hidden {
        display: none;
    }
}

.questions .item p.description-teaser {
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;

    &[class*="dr-icon-arrow-"][class*="-boxed"] {
        &:before {
            background-color: @primary;
            border-radius: 8px;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
        }
    }
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}


@media (max-width: 480px) {

    /*.section > h2, .dr-form > h2 {
        padding-bottom:10px;
        padding-top:10px;
        margin: -10px -10px 10px;
    }*/
    .section.boxed {
        > h2 {
            margin: -10px -10px 10px;
            padding: 10px;
        }
    }
    /*.section.question-container.boxed {
        > h2 {
            margin: -20px -20px 10px;
        }
    }*/
    .site-content .candidate-list .candidate-item .question-result .subheadline,
    .site-content .candidate-list .question-result .item [class*="heading-"] { 
        width:100%; 
        word-wrap: break-word;
    }
    .question-container, .question-result {
        /*.boxed > h2 {
            margin: -20px -20px 10px;
        }*/
        > .dr-link-readmore {
            top: -5px;
        }
        .chosen-constituency
        {
            h2
            {
                font-size: 22px;
                line-height: 22px;
                margin-bottom:0;
            }

            > p
            {
                //width: 67%;

                &.buttons.question
                {
                    //width:32%;
                }
            }
        }
    }
    .choose-election {
        padding:10px;

        div {
            font:26px/1 "gibsonSemiBold","Arial Black",sans-serif;
            text-align:center;
            span {
                font:16px/20px "gibsonRegular","Arial",sans-serif;
                padding: 10px 0 10px 0;
            }
        }

        span {
          padding: 10px 0 10px 0;
        }
        .choose-k-r {
            width:100%;
            li {
                //margin: 0 2% 0 0;
                //width:210px;
                .dr-ui-button {
                    padding:0 10px;
                    width:100%;
                    //font: 20px/58px "gibsonRegular","Arial",sans-serif;
                    height: 40px;
                    font: 20px/40px "gibsonRegular","Arial",sans-serif;
                }

            }
        }
    }
    .question-container .question-submit { width:100%; }
    .question-container .region-select-area .change-region { width:250px !important; }
    .questions
    {
        li
        {
            padding-bottom: 10px;

            &.item
            {

                *
                {
                    margin: 10px 0;
                }

                p.description-teaser
                {
                    font-family: "gibsonRegular","Arial",sans-serif;
                    font-size: 12px;
                }

                .description
                {
                    ol.for-against
                    {
                        margin-bottom: 0;

                        li.item
                        {
                            width: 100%;
                            float: none;
                         
                            &:last-child
                            {
                                margin-bottom:0;
                            }
                        }                        
                    }
                }

                button
                {
                    margin: 0;
                }

                &.missing
                {
                    margin: 10px 0;
                    padding-left: 5px;
                    padding-right: 5px;
                }

                padding-left: 0;
                padding: 0px 20px 10px 20px;

                .icon
                {
                    margin: -30px -10px 0px -5px;
                }

                p
                {
                    font-size: 18px;
                    line-height: 20px;
                    width: 100%;
                    margin: 0;
                    /*
                    &.metainfo
                    {
                        height: 15px;
                        margin: 0 0 10px 0;
                        text-align: left;
                        background: transparent;
                        //width:auto;
                        //background:url("../images/question-mobile-bar.png") no-repeat top left;
                        //background-size:100%;
                        span.hidden
                        {
                            display: block;
                            position: absolute;
                            top: -2px;
                            //background:url("../images/num-circle.gif") no-repeat top left;
                            //background-size:33px;
                            border-radius: 15px;
                            background-color: #000;
                            width: 30px;
                            height: 30px;
                            //color:#FFF;
                            font: 14px/30px "gibsonRegular","Arial",sans-serif;
                            text-align: center;
                        }
                        //.icon-1,.icon-RV-1 { left: 0px; }
                            //.icon-2,.icon-RV-2 { left: 9%; }
                            //.icon-3,.icon-RV-3 { left: 18%; }
                            //.icon-4,.icon-RV-4 { left: 27%; }
                            //.icon-5,.icon-RV-5 { left: 36%; }
                            //.icon-6,.icon-RV-6 { left: 45%; }
                            //.icon-7,.icon-RV-7 { left: 54%; }
                            //.icon-8,.icon-RV-8 { left: 63%; }
                            //.icon-9,.icon-RV-9 { left: 72%; }
                            //.icon-10,.icon-RV-10 { left: 81%; }
                            //.icon-11,.icon-RV-11 { left: 90%; }
                                
                    }
                        */
                }

                h3
                {
                    margin-top: 20px;
                    margin-bottom: 0;
                    font-size: 14px;
                }

                dl
                {
                    margin-top: 20px;
                    height: auto;

                    dd
                    {
                        float: none;

                        button
                        {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    .span-12 [class*="dr-list"] li {
      padding-bottom: 0px;
    }

    .icon {
        width:102px;
        height:80px;
        background-image: url("../images/fv15-question-icons.png");

        &.icon-1  {background-position: -460px -3454px;}
        &.icon-2  {background-position: -460px -3281px;}
        &.icon-3  {background-position: -460px -3104px;}
        &.icon-4  {background-position: -460px -2928px;}
        &.icon-5  {background-position: -460px -2752px;}
        &.icon-6  {background-position: -460px -2575px;}
        &.icon-7  {background-position: -460px -2399px;}
        &.icon-8  {background-position: -460px -2217px;}
        &.icon-9  {background-position: -460px -2044px;}
        &.icon-10 {background-position: -460px -1867px;}
        &.icon-11 {background-position: -460px -1690px;}
        &.icon-12 {background-position: -460px -1510px;}
        &.icon-13 {background-position: -460px -1338px;}
        &.icon-14 {background-position: -460px -1160px;}
        &.icon-15 {background-position: -460px -984px;}
        &.icon-16 {background-position: -460px -802px;}
        &.icon-17 {background-position: -460px -632px;}
        &.icon-18 {background-position: -460px -450px;}
        &.icon-19 {background-position: -460px -276px;}
        &.icon-20 {background-position: -460px -100px;}

    }
}

@media (max-width: 340px) {
     .question-container, .question-result {
        .chosen-constituency {
            h2 {
                font-size: 20px;
                line-height: 20px;
            }

            > p {
                //width: 67%;

                &.buttons.question {
                    //width:32%;
                }
            }
        }

        .constituency p {
            &.formTxt { padding-bottom:20px;}
            font-size: 14px; line-height: 18px;
        }
    
    }
    .questions {
        li {
            &.item {
                margin-left: -10px;
                margin-right: -10px;
            }
            .icon {
                margin: -30px -5px 0 -10px;
            }
        }
    }
}

.bg() {
    @iterations: 11;
    .loopingClass (@index) when (@index > 0) {
        // NEXT ITERATION
        .loopingClass(@index - 1);
    }
    // END THE LOOP WHEN INDEX IS 0
    .loopingClass (0) {}

    // START LOOPING
    .loopingClass (@iterations);
}