/*
* skeleton redefined version.
*/

    .container                                  { width: 90%; max-width:1300px; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 0.625%; margin-right: 0.625%; margin-top: 1%; margin-bottom:1%; }
    .row                                        { margin-bottom: 20px; }

    .container img                              { max-width: 100%; }

    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    .container .one.column,
    .container .one.columns                     { width: 5.00%;  }
    .container .half.column                     { width: 1.875%; }
    .container .two.columns                     { width: 11.25%; }
    .container .three.columns                   { width: 17.50%; }
    .container .four.columns                    { width: 23.75%; }
    .container .five.columns                    { width: 30.00%; }
    .container .six.columns                     { width: 36.25%; }
    .container .seven.columns                   { width: 42.50%; }
    .container .eight.columns                   { width: 48.75%; }
    .container .nine.columns                    { width: 55.00%; }
    .container .ten.columns                     { width: 61.25%; }
    .container .eleven.columns                  { width: 67.50%; }
    .container .twelve.columns                  { width: 73.75%; }
    .container .thirteen.columns                { width: 80.00%; }
    .container .fourteen.columns                { width: 86.25%; }
    .container .fifteen.columns                 { width: 92.50%; }
    .container .sixteen.columns                 { width: 98.75%; }

    .container .one-third.column                { width: 30%; }
    .container .two-thirds.column               { width: 65%; }


/* Arrow span
================================================== */
    input.selfarrow {
        text-align:left;padding:0.8em;margin:0;width:6.5em;
        background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
        background-position: calc(100% - 20px) calc(1em + 7px), calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.8em;
        background-size: 6px 5px, 6px 5px, 1px 1.5em;
        background-repeat: no-repeat;

    }

    select.selfarrow {
        background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
        background-position: calc(100% - 20px) calc(1em + 7px), calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.8em;
        background-size: 6px 5px, 6px 5px, 1px 1.5em;
        background-repeat: no-repeat;
    }

/*  #mobile (portrait)
================================================== */
    /* note: design for a width of 320px */

    @media only screen and (max-width: 767px) {
        table.multi-columns {width: 100%; margin: 0px; padding:0px;overflow: auto; }
    }

/* #mobile (landscape)
================================================== */
    /* note: design for a width of 480px */

    @media only screen and (min-width: 280px) and (max-width: 768px) {
        .container .seven.columns { width: 90%;margin-left: 5%;margin-right: 0; }
    }

    @media only screen and (min-width: 280px) and (max-width: 767px) {
        .container { width: 100%; }
        .container .columns,
        .container .column { margin: 0; }
        .container .half.column { width: 0px; }
        .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns,
        .container .six.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns,
        .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column,
        .container .two-thirds.column { width: 90%; margin-left:5%;margin-right:0; }

        label{ width:100%; }
        .threeCols, .twoCols{ width: 90%; margin-left:5%;margin-right:0;margin-bottom: 3em; }
        footer .threeCols { text-align: center;margin-bottom:0em; }
        .backgroundDots .eight.columns { text-align: center; }
        .headlline { max-width:none !important; }
        #count1, #count2, #count3 { width: 33% !important; margin:0 !important; min-width:33% !important; }
    }

/* #clearing
================================================== */
    /* self clearing goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* use clearfix class on parent to clear nested columns, or wrap each row of columns in a <div class="row"> */
    .clearfix:before, .clearfix:after, .row:before, .row:after {
        content: '\0020';display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;
    }
    .row:after, .clearfix:after { clear: both; }
    .row, .clearfix { zoom: 1; }

    /* you can also use a <br class="clear" /> to clear columns */
    .clear { clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0; }