/*
* skeleton redefined version.
*/

    .container                                  { width: 90%; max-width:1700px; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 0.625%; margin-right: 0.625%; }
    .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%; }

    #ticket{
        width:50%;
        text-align:center;
        cursor:pointer;
    }

    #lineleft{
        float:left;
        text-align:left;
        margin-left:240px;
    }
    #lineright{
        float:right;
        text-align:right;
        margin-right:1%;
    }

    #cntbottomselect{ display: none; width: 100%; text-align: left; background-color:#ededed; padding:5%; }
    #cntbottomselect select{
        border: none;
        width: 90%;
        margin-bottom: 5px;
        text-align: center;
        font-weight: 300;
        background-color: transparent; /* old verion --> url('/graphik/btn/chevron-down.png') no-repeat right #ededed; */
    }
    .headercontainer{
        float:right;
        margin-right:15px;
        font-size: 12px;
        text-align: center;
        line-height: 13px;
        max-width:90px;
    }

    #overlayerdiv {
        position:absolute;
        z-index: 2300;
        top: 94px;
        width: 100%;
        height: 100%;
    }


/* Arrow span
================================================== */

    input.selfarrow {
        border-radius: 0;box-shadow: 3px 3px 3px 1px #ccc;
        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;

    }
    input.selfarrowsecond {
        background-image: url('/graphik/btn/sort-solid.svg');
        background-position: calc(100% - 10px) calc(11px), calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.8em;
        background-size: 9px;
        background-repeat: no-repeat;
        border: 1px solid #8aadbd;
        margin-bottom: 1em !important;
    }
    datalist{
        text-align:left;padding:0.8em;margin:0;width:6.5em;
    }

    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;
        border: 1px solid #8aadbd;
        margin-bottom: 1em !important;
    }
    select.selfarrowsecond {
        background-image: url('/graphik/btn/sort-solid.svg');
        background-position: calc(100% - 10px) calc(11px), calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.8em;
        background-size: 9px;
        background-repeat: no-repeat;
        border: 1px solid #8aadbd;
        margin-bottom: 1em !important;
    }


@media only screen and (min-width: 1451px) {
        span.arrow-article { right: 1.5em; }
    }

    @media only screen and (min-width: 800px) and (max-width: 1000px){
        span.arrow-article { right: 1.5em; }
    }

    @media only screen and (min-width: 800px) and (max-width: 850px) {
        #last5_left > div, #last5_right > div { padding-left: 15% !important; }
    }

    @media only screen and (min-width: 768px) and (max-width: 1000px){
        #last5_left { margin-left: 1% !important; }
        #last5_left, #last5_right { width: 48% !important;margin:1%; }
        #last5_left > div, #last5_right > div { padding-left: 10% !important; }
    }

    @media only screen and (min-width: 1001px) and (max-width: 1150px){
        span.arrow-article { right: 1.5em; }
        #last5_left > div, #last5_right > div { padding-left: 5% !important; }
    }

    @media only screen and (min-width: 1151px) {
        span.arrow-article { right: 1.5em; }
    }

    @media only screen and (min-width: 1021px){
        span.arrow-payment { right: 18%; }
    }

    @media only screen and (min-width: 768px) and (max-width: 821px){
        span.arrow-team { right: 0px;float: right;top: -35px; }
    }

    @media only screen and (min-width: 768px) and (max-width: 875px){
        select#myfilter { margin-right: -10px !important; }
    }

    @media only screen and (min-width: 768px){
        select#menArticle, select#menPayment { width: 100%; }
        span.arrow-easyship { position: relative;top: -32px;right: 5%; }
    }

    @media only screen and (max-width: 767px) and (min-width: 480px){
        select#menArticle, select#menPayment { width: 100%; }
        select#myfilter { font-size: 0.8em;width: 250px !important; }
        input#sipbMember { width: 260px; }
        span.arrow-team { right: -245px;float: right; }
        span.arrow-easyship { position: relative;top: -32px;right: 5%; }
        footer #footer-menu a { display: block; }
    }

    @media only screen and (max-width: 479px) {
        select#menArticle, select#menPayment { width: 100%; }
        select#myfilter { font-size: 0.8em;width: 100% !important; }
        span.arrow-team { right: 15px;float: right;top: -35px; }
        span.arrow-easyship { position: relative;top: -32px;right: 5%; }
        footer #footer-menu a { display: block; }
        footer #languageselect { font-size: 12px; padding-left:30px !important; }
        footer #selectCountryBottom { font-size: 12px; padding-left:30px !important; }
        select.selfarrowsecond {
            background-image: url('/graphik/btn/sort-solid.svg');
            background-position: calc(100% - 10px) calc(11px), calc(100% - 15px) calc(1em + 7px), calc(100% - 2.5em) 0.8em;
            background-size: 7px;
            background-repeat: no-repeat;
            border: 1px solid #8aadbd;
            margin-bottom: 1em !important;
        }
        footer #languageselectglobe{ top:-41px !important; }
    }

/* Easyship
================================================== */
    @media only screen and (min-width: 768px) and (max-width: 1180px){
        div#easyshipproductprice {
            float: none !important;
            padding-top: 5px !important;
            padding-bottom: 10px;
            padding-left: 8px;
        }

        div#easyshipproduct {
            padding-top: 0px !important;
            padding-bottom: 0px;
            float: none !important;
        }

        div#esaSum {
            height: 140px !important;
        }
    }

    @media only screen and (max-width: 767px) and (min-width: 100px){
        .basketResponsive{
            display:none;
        }
        #basketmenubuttons{
            position:sticky;
            bottom:5px;
            background-color:white;
        }
        #moreInformationProduct { display:none ;}
        div#easyshipproductprice {
            float: none !important;
            padding-top: 5px !important;
            padding-bottom: 10px;
            padding-left: 8px;
        }

        div#easyshipproduct {
            padding-top: 0px !important;
            padding-bottom: 0px;
            float: none !important;
        }

        div#treethirdLine, div#treesecondLine {
            display: none;
        }
        .treeQuater {
            width: 19%;
            margin-left: 3%;
            margin-right: 3%;
        }

        div#esaSum {
            height: 140px !important;
        }
    }
    @media only screen and (max-width: 490px) and (min-width: 100px){
        .scrollMenu{
            overflow: auto;overflow-scrolling: auto;-webkit-overflow-scrolling: touch;scroll-behavior: auto;
            background-color: #fff;top: 0;position: fixed;width: 100%;height: 100vh;max-width: none;
            max-height: 100vh;float: right;right: 0px !important;
        }
    }

/* Einstellungen Avatar
================================================== */
    @media only screen and (max-width: 1451px) and (min-width: 900px){
        .settingsAvatarDiv {
            margin-right: 3%;
        }
    }

    @media only screen and (max-width: 899px) {
        .settingsAvatarDiv {
            display: none;
        }
    }


/* #tablet (portrait)
================================================== */

    /* note: design for a width of 768px */
    @media only screen and (min-width: 900px) and (max-width: 1250px) {
        .dashboardCol{ width: 33.3%; }
    }
    @media only screen and (min-width: 550px) and (max-width: 899px) {
        .dashboardCol{ width: 50%; }
    }
    @media only screen and (min-width: 300px) and (max-width: 549px) {
        .dashboardCol{ width: 100%; }
        .centerColumn{ width: 100% !important; float:none !important; text-align:center !important; margin-bottom: 1em; }
        .centerColumn select, .centerColumn input{ float:none !important; margin-left: auto; margin-right: auto; }
    }
    @media only screen and (min-width: 768px) and (max-width: 1119px) {
        #cntbottomselect{ display: none; }

        .headercontainer{
            float:right;
            margin-right:6px;
            margin-top:10px;
        }
        #lineleft{
            width:50%;
            float:left;
            text-align:left;
            margin-left:0px;
        }
        #lineright{
            width:50%;
            float:left;
            text-align:right;
        }
        .userpic{ display:none; }
        .userpicgreen{ display:none; }
        .userpicblack{ display:none; }
        .userpicblue{ display:none; }
        .userpiccustomer{ display:none; }

        #myarrow{ left:57%; }

        .activestate { margin-top:0px;margin-left:2px; }
        .divarticlengcol1{
            vertical-align:top;
            min-width:270px;
            width:100%;
            float:left;
            padding:0px;
            margin:0px;
            text-align:center;
        }
        .divarticlengcol2{
            vertical-align:top;
            min-width:270px;
            width:100%;
            float:left;
            padding:0px;
            margin:0px;
        }
    }


/*  #mobile (portrait)
================================================== */

    /* note: design for a width of 320px */

    @media only screen and (max-width: 767px) {

        #cntbottom{ display: none; }

        #cntbottomselect{ display: block; }
        #footer-menu-year{ display:none; }
        #footer-menu-year-full{ display:block; }
        #footer-menu{ text-align:center; display:block; }
        #lineleft{
            width:50%;
            float:left;
            text-align:left;
            margin-left:0px;
        }
        #lineright{
            width:50%;
            float:left;
            text-align:right;
        }
        table.basketsmall { width:94%; min-width:94%; margin-left:4%; overflow: auto; display: block; }
        table.multi-columns {width: 100%; margin: 0px; padding:0px;overflow: auto; }
        table.multi-columns-t4c {width: 100%; margin: 0px; padding:0px; overflow: auto; }
        #overlayerdiv {
            position: absolute;
            z-index: 2300;
            top: 140px;
            width: 100%;
            height: 100%;
        }
        .userpicbig{ display:none; }
        .userpic{ display:none; }
        .userpicgreen{ display:none; }
        .userpicblack{ display:none; }
        .userpicblue{ display:none; }
        .userpiccustomer{ display:none; }

        #myarrow{ left:57%; }
        .activestate { margin-top:0px;margin-left:2px; }
        .divarticlengcol1{
            vertical-align:top;
            min-width:270px;
            width:100%;
            float:left;
            padding:0px;
            margin:0px;
            text-align:center;
        }
        .divarticlengcol2{
            vertical-align:top;
            min-width:270px;
            width:100%;
            float:left;
            padding:0px;
            margin:0px;
        }
        .settingscenterdiv{
            width: 60%;
            min-height: 170px;
            float:left;
        }
        .settingsavatardiv{
            margin: 0;
            float:right;
            text-align:left;
        }
        span.arrow {
            right: 40px;
        }
    }


/* #mobile (landscape)
================================================== */

    /* note: design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 768px) {

        .container .seven.columns {
            width: 90%;
            margin-left: 5%;
            margin-right: 0;
        }
    }
    @media only screen and (min-width: 480px) 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; }

        #copyFeeter, #linkFeeter{
            text-align:center !important;
        }
        #cntbottomselect{ display: block; }
        #footer-menu-year{ display:none; }
        #footer-menu-year-full{ display:block; }
        #footer-menu{ text-align:center !important; display:block !important; margin-bottom:1em; }

        label{
            width:100%;
        }
        input#resetpwd {
            width:52%;
        }
        input[type="text"], input[type="password"], input[type="email"], input[readonly], input[readonly="readonly"], textarea, select{
            width:100%;
        }

        table.basketsmall { width:94%; min-width:94%; margin-left:4%; overflow: auto; display: block; }

        .userpicbig, .userpic, .userpicgreen, .userpicblack, .userpicblue, .userpiccustomer{ display:none; }{ display:block; }

        .usereasyshipnew, .userdirectpartnernew, .userdirectpartnerteamnew { width: 75px !important; height: 75px !important; }
        .usersignblank.easyactive, .usersignblank.blue, .usersignblank { top: 50px !important; }
        div#usersignblank2 { top: 29px !important; left: 50px !important; }
        div#usersignblank1 { top: 30px !important; left: 50px !important; }
        div#circle { margin-top: 0px; margin-right: 0px;}
        canvas#chart-tqv, canvas#chart-lvl { width: 68px !important; height: 68px !important; }

        #myarrow{ left:71%; }
        .activestate { margin-top:-58px;margin-left:2px; }

    }

    @media only screen and (min-width: 100px) and (max-width: 449px) {
        #last5_left, #last5_right { width: 49% !important;margin:0.5% !important;min-width:auto !important;max-width:none; }
        #last5_left > div, #last5_right > div { padding-left: 2% !important; }
        #last5_left > div > div > div > img, #last5_right > div > div > div > img { width: 20px; }
        #last5_left > div > div > div, #last5_right > div > div > div { min-width:25px !important; }
        #last5_left > div > div > div:nth-child(2n), #last5_right > div > div > div:nth-child(2n) { max-width: 115px !important; }
    }

    @media only screen and (min-width: 450px) and (max-width: 599px) {
        #last5_left, #last5_right { width: 49% !important;margin:0.5% !important;min-width:auto !important;max-width:none; }
        #last5_left > div, #last5_right > div { padding-left: 10% !important; }
        #last5_left > div > div > div > img, #last5_right > div > div > div > img { width: 30px; }
        #last5_left > div > div > div, #last5_right > div > div > div { min-width:40px !important; }
        #last5_left > div > div > div:nth-child(2n), #last5_right > div > div > div:nth-child(2n) { max-width: 130px !important; }
    }

    @media only screen and (min-width: 600px) and (max-width: 767px) {
        #last5_left, #last5_right { width: 49% !important;margin:0.5% !important;min-width:auto !important;max-width:none; }
        #last5_left > div, #last5_right > div { padding-left: 2% !important; }
        #last5_left > div > div > div > img, #last5_right > div > div > div > img { width: 30px; }
        #last5_left > div > div > div, #last5_right > div > div > div { max-width:40px; }
    }

    @media only screen and (min-width: 500px) and (max-width: 767px) {
        .twoCols { max-width: 170px;min-width: 168px;margin-left: 0%; }
        .twoCols table tr td a { font-size: 0.9em; }
    }

    @media only screen and (min-width: 100px) and (max-width: 767px) {
        div.treesearchfield {
            height: 550px;
        }
        div#searchfield {
            width: 100%;
            margin-bottom: 0%;
        }
        div#treeviewinfobox {
            width: 100%;
        }
        div#shipMember {
            width: 64%;
            text-align: center;
            margin-left: auto;
            margin-right: auto;
        }
        div#tree {
            width: 140%;
            margin-left: -20%;
        }
        #ticket {
            width: 100%;
        }
    }

    @media only screen and (min-width: 100px) and (max-width: 379px) {

        #myarrow{ left:71%; }

        #footer-menu-year{ display:none; }
        #footer-menu-year-full{ display:block !important; }
        #footer-menu{ text-align:center !important; display:block !important; margin-bottom:1em; }
        label{
            width:100%;
        }
        input[type="text"], input[type="password"], input[type="email"], input[readonly], input[readonly="readonly"], textarea, select{
            width:100%;
        }
        .settingscenterdiv{
            width: 100%;
            max-width: 800px;
            min-height: 170px;
            vertical-align: middle;
            height:auto;
        }
        .settingsavatardiv{
            margin:0;
            width:100%;
            text-align:center;
        }
    }

    @media only screen and (max-width: 805px) and (min-width: 768px) {
        div#tabs-4 .container-dashboard-top .twoCols {
            min-width: 255px;
        }
    }

    @media only screen and (max-width: 980px) and (min-width: 768px){
        footer #footer-menu nav li a {
            font-size: 0.8em;
        }
        div#treethirdLine {
            display: none;
        }
        .treeQuater {
            width: 19%;
            margin-left: 3%;
            margin-right: 3%;
        }
    }

    @media only screen and (max-width: 1450px) {
        table#bestelluebersicht {
            width: 100%;
            margin: 0px;
            padding:0px;
            display: block;
            overflow: auto;
        }
    }

    @media only screen and (max-width: 980px) {
        div#downline {
            margin-top:0px;
        }
    }

    @media only screen and (min-width: 769px) {
        div#cntBottomSelect {
            display: none !important;
        }
    }

    @media only screen and (min-width: 100px) and (max-width: 768px) {
        #footer-menu-year{ display:none; }
        #footer-menu-year-full{ display:block !important; }
        #footer-menu{ text-align:center !important; display:block !important; margin-bottom:1em; }
        footer div#cntBottomSelect {
            display: block !important;
        }
        main div#cntBottomSelect {
            display: block !important;
        }
    }
/* #clearing
================================================== */

/* #mobile (landscape)
================================================== */

/* note: design for a width of 200px */

@media only screen and (min-width: 200px) and (max-width: 579px) { /*479px*/
    .userpicbig, .userpic, .userpicgreen, .userpicblack, .userpicblue, .userpiccustomer{ display:none; }{ display:block; }

    .usereasyshipnew, .userdirectpartnernew, .userdirectpartnerteamnew { width: 75px !important; height: 75px !important; }
    .usersignblank.easyactive, .usersignblank.blue, .usersignblank { top: 50px !important; }
    div#usersignblank2 { top: 29px !important; left: 50px !important; }
    div#usersignblank1 { top: 30px !important; left: 50px !important; }
    div#circle { margin-top: 0px; margin-right: -3px;}
    canvas#chart-tqv, canvas#chart-lvl { width: 68px !important; height: 68px !important; }

    .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.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% !important; margin-left: 5% !important; margin-right: 5% !important; }
    .container { width: 100% !important; }
    #footer-menu-year{ display:none; }
    #footer-menu-year-full{ display:block !important; }
    #footer-menu{ text-align:center !important; display:block !important; margin-bottom:1em; }
    #copyFeeter, #linkFeeter{
        text-align:center !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;
    }