* {
    font-family: Arial,Verdana,Geneva,Helvetica,sans-serif;
}

html {
    overflow-y: scroll;
}

body {
    margin: 10px 10px;
    background-color: #ffffff; /* background-image: url(/img/background.png); */
    background-repeat: repeat-x;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

#page {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

#topvisual {
    width: 100%;
    display: none;
}

    #topvisual ol {
        padding: 0;
        list-style-type: none;
    }

    #topvisual h1, #topvisual li, #topvisual p {
        padding: 0;
        height: 0;
        color: #4b959e;
        position: relative;
        line-height: 17px;
    }

#isbn_eingabe_outer {
    background: #ffffff;
    -webkit-box-shadow: 0 0 11px 0 #888888;
    -ms-box-shadow: 0 0 11px 0 #888888;
    box-shadow: 0 0 11px 0 #888888;
    height: 92px;
    margin-top: 40px;
    margin-bottom: 35px;
    padding: 4px;
    width: 100%;
}

.isbn_eingabe_inner {
    position: relative;
    display: flex; /* damit eingabefeld und submit immer in einer zeile bleiben */
    background: #f9970e;
    margin: 0;
    height: 92px;
    width: 100%;
}

.blauverlauf {
    position: relative;
    display: flex; /* damit eingabefeld und submit immer in einer zeile bleiben */
    margin: 0;
    height: 92px;
    width: 100%;
    background: -moz-linear-gradient(bottom,#c8dee1,#f5f9fa); /* Firefox */
    background: -webkit-gradient(linear,left top,left bottom,from(#c8dee1),to(#f5f9fa)); /* Chrome, Safari */
    -moz-filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#c8dee1',endColorstr='#f5f9fa');
    -o-filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#c8dee1',endColorstr='#f5f9fa');
    -webkit-filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#c8dee1',endColorstr='#f5f9fa');
    filter: progid:DXImageTransform.Microsoft.gradient(StartColorstr='#c8dee1',endColorstr='#f5f9fa'); /* Internet Explorer */
    font-size: 21px;
    font-weight: bold;
    color: #4b959e;
}


.isbn_eingabe {
    width: 100%;
    height: 45px;
    padding-left: 10px;
    border: 1px #4b959e solid;
    font-size: 14px;
    font-weight: bold;
    color: #4b959e;
}

#topvisual p {
    z-index: 1;
}

#topvisual ol li img {
    position: absolute;
    top: -83px;
}


.eanlink {
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
}

#meta {
    z-index: 15;
    font-size: 12px;
    font-weight: normal;
    color: #665b5b;
}

#countryselector {
    position: absolute;
    right: 0;
    top: -10px;
}

#navcontainer {
    float: left;
}

    #navcontainer ul {
        list-style-type: none;
        text-align: center;
        margin-top: 5px;
    }


        #navcontainer ul li {
            display: inline;
        }

#footernavcontainer li + li:before {
    content: " | ";
    padding: 0 5px;
}

.delbutton {
    margin-left: 0;
    margin-right: 5px;
}

#navcontainer ul li a {
    text-decoration: none;
    padding: 2px 6px;
    /* padding: 1.5em; */
    color: #665b5b;
}

    #navcontainer ul li a.link:hover {
        color: #7ca33b;
    }

#zustand_small_link, #zustand_small_link a, #zustand_small_link a:hover {
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
    color: #624149;
}

    #zustand_small_link a:hover {
        color: #7ca33b;
    }

#navcontainer ul li .active {
    color: #ffffff;
    background-color: #a59c94;
}

#country_flyout {
    font-size: 13px;
    font-weight: bold;
    z-index: 8;
    position: absolute;
    z-index: -1;
    top: -220px;
}

    #country_flyout li, #country_flyout li a, #country_flyout li a:hover {
        list-style-type: none;
        line-height: 30px;
        color: #ffffff;
        text-decoration: none;
        margin-left: -30px;
        padding-left: 25px;
    }

        #country_flyout li.active {
            background-image: url(/img/flyout_active_background.png);
            background-repeat: no-repeat;
        }

#marginal {
    float: left;
    margin-top: 15px;
}

#content input {
    color: #624149;
    font-size: 14px;
}

.orange_button {
    float: right;
    padding: 0;
    margin: 9px 5px 0 0;
}

    .orange_button:visited, .orange_button:hover {
        text-decoration: none;
    }


.smalllink {
    margin-left: 8px;
    color: #f9970e;
    font-size: 10px;
    clear: both;
    display: inline-block;
}

a.smalllink:hover {
    color: #abbc48;
}

.errorlist {
    border-width: 1px;
    border-color: #ff0000;
    color: #ff0000;
    border-style: solid;
    padding-top: 10px;
    padding-left: 10px;
    font-weight: bold;
}

#marginal h3 {
    margin: 20px 0;
    font-weight: bold;
    font-size: 24px;
    color: #4b959e;
    padding-left: 8px;
}

#marginal h4 {
    margin: 16px 0;
    font-weight: bold;
    font-size: 16px;
    color: #624149;
    padding-left: 8px;
}

.arrowlink {
    float: right;
    font-weight: bold;
    font-size: 14px;
    color: #f9970e;
    text-decoration: none;
    padding-left: 8px;
    margin-right: 10px;
}

#marginal .arrowlink {
    float: left;
    text-align: right;
    width: 236px;
    max-width: 236px;
}

a.arrowlink:hover {
    color: #abbc48;
}

.achievments {
    width: 210px;
    padding-top: 7px;
    padding-bottom: 7px;
    float: left;
    text-align: center;
}

.vorteile {
    width: 335px;
    padding-top: 7px;
    padding-bottom: 7px;
    float: left;
    text-align: left;
    font-size: 14px;
}

#marginal p {
    font-weight: normal;
    font-size: 14px;
    color: #624149;
    padding-left: 8px;
    line-height: 19px;
    width: 221px;
    margin-bottom: 0;
}

#kontostand h5 {
    margin-left: 8px;
    font-size: 18px;
    font-weight: bold;
    color: #4b959e;
}

#summary {
    padding: 10px;
    height: 53px;
    width: 201px;
    background-color: #e1eff2;
    margin-left: 8px;
    color: #4b959e;
}

    #summary table td {
        padding: 0;
        margin: 0;
    }

.summaryh1 {
    font-size: 12px;
    font-weight: normal;
}

.summaryh2 {
    line-height: 25px;
    font-size: 20px;
    font-weight: bold;
}

#content {
    float: right;
    border: 0 solid;
    color: #624149;
}

    #content h2 {
        margin: 12px 0 12px 0;
        text-transform: uppercase;
        line-height: 30px;
        font-weight: bold;
        font-size: 18px;
        color: #624149;
    }

#shopauskunft_div {
    padding-left: 8px;
    margin-bottom: 20px;
}

#home #content h2 div {
    margin-bottom: 12px;
}

#data h2 {
    text-transform: uppercase;
    font-weight: bold;
    font-size: 18px;
    color: #ffffff;
    padding: 20px;
    margin: 0;
}

#data {
    background-color: #4b959e;
    margin: 0;
}

    #data img {
        float: left;
        padding: 10px 30px 30px 20px;
    }

span.label {
    line-height: 26px;
    font-size: 14px;
    display: block;
    float: left;
    width: 180px;
}

#content p, #content li, #content table {
    font-weight: normal;
    font-size: 14px;
    color: #624149;
    line-height: 24px;
    background-repeat: no-repeat;
    background-position: 0 0;
}

#content .vielendank {
    padding: 0;
}

    #content .vielendank li {
        padding-left: 50px;
        padding-bottom: 15px;
    }

#content table td {
    margin: 0;
    padding: 3px 0 3px 10px;
}

#content ul {
    padding-left: 15px;
}

#content h3 {
    margin: 15px 0;
    font-weight: bold;
    font-size: 18px;
    color: #624149;
}

#content h4 {
    font-weight: bold;
    font-size: 14px;
    color: #624149;
}

.radiobuttons input {
    display: block;
    float: left;
    margin-right: 10px;
    margin-top: 7px;
    cursor: pointer;
}

.radiobuttons label {
    display: block;
    margin-left: 30px;
    margin-bottom: 20px;
    cursor: pointer;
}

.radiobuttons td label {
    margin-bottom: 5px;
}

span.labelDruck {
    margin-left: 30px;
}

/* CHANGE 1, formfields */
.textrow {
    border-color: #3e8d9e;
    border-style: solid;
    border-width: 1px;
    float: left;
    border-width: 1px;
    margin-left: 160px;
    display: block;
    width: 219px;
    height: 22px;
}

    span.label + .textrow, .textrow + .textrow {
        margin-left: 0;
    }
/* / CHANGE 1 */

/* CHANGE 2, hint */
span.hint {
    margin-left: 180px;
}
/* /CHANGE 2 */

.textdiv {
    clear: both;
    width: 420px;
    height: 26px;
}



.table {
    width: 100%;
}


.tablehead {
    font-size: 14px;
    font-weight: bold;
    height: 32px;
}

.tableheadcell {
    background-image: url(/img/th_background.png);
    background-repeat: repeat-x;
}

.roweven {
    background-color: #eff7f7;
/*   background-image: url(/img/table_bg_odd.gif);
    background-repeat: repeat-x;
    background-position: bottom;
    */
}

.rowodd {
    /*
    background-image: url(/img/table_bg_even.gif);
    background-repeat: repeat-x;
    background-position: bottom;
        */
}

.tablebody {
    font-size: 14px;
    font-weight: bold;
    border-bottom: 1px solid #4b959e;
}

.tableerror {
    background-color: #ff003e;
    color: #ffffff;
}

.tablefooter {
    background-image: url(/img/table_footer_bg.gif);
    background-repeat: repeat-x;
    background-position: bottom;
    height: 3px;
    padding: 0;
}

.visuallink, .visuallink:active {
    font-size: 14px;
    font-weight: bold;
    color: #fa980e;
    text-decoration: none;
}

    .visuallink:hover {
        color: #7ca33b;
    }

#content .sumfooter {
    font-weight: bold;
    padding-right: 42px;
}

td {
    padding-left: 10px;
    padding-top: 3px;
    padding-bottom: 7px;
    padding-right: 10px;
}

#footer {
    clear: both;
    color: #665b5b;
    font-weight: normal;
    font-size: 12px;
    text-align: center;
    margin-bottom: 30px;
    padding-top: 40px;
}

#footernavcontainer ul {
    list-style-type: none;
    text-align: center;
    margin-top: 5px;
    padding-left: 0;
}

    #footernavcontainer ul li {
        display: inline;
    }

        #footernavcontainer ul li a {
            text-decoration: none;
            padding: 2px 0;
            line-height: 40px;
            color: #665b5b;
        }

        #footernavcontainer ul li .active {
            color: #ffffff;
            background-color: #a59c94;
        }

        #footernavcontainer ul li a:hover {
            color: #7ca33b;
        }

.error {
    border: 1px solid red;
}

.defaultTextActive {
    font-weight: bold;
}


/* Responsive design enhancments */

img, embed, object, video, .vorteile, .buchpaket_dummy {
    max-width: 100%;
}

/* small displays */
#header {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    order: -10;
}

    #header #logo {
        width: 80%;
    }

    #header #logo {
        height: 72px;
        background-repeat: no-repeat;
        -ms-background-size: contain;
        background-size: contain;
        -moz-background-position-x: center;
        -o-background-position-x: center;
        background-position-x: center;
    }

        #header #logo.de {
            background-image: url(../img/logos_quer_de.png);
        }

        #header #logo.at {
            background-image: url(../img/logos_quer_at.png);
        }

        #header #logo.lu {
            background-image: url(../img/logos_quer_lu.png);
        }

        #header #logo.be {
            background-image: url(../img/logos_quer_be.png);
        }

    #header #topNav {
        display: none;
    }

    #header #heading {
        width: 100%;
    }

        #header #heading h1, #header #heading span.firstline {
            margin: 0;
            font-size: 1.5em;
            font-weight: bold;
            color: #624149;
            text-transform: uppercase;
        }

            #header #heading h1.secondline, span.secondline {
                color: #624149;
                font-size: 1em;
                font-weight: normal;
                text-transform: none;
            }



    #header #hamburger {
        width: 20%;
        text-align: right;
    }

    /* Off Canvas Menu aufbauen */

    #header #topNav.active {
        display: block;
        width: 100%;
    }

        #header #topNav.active #navcontainer {
            position: relative;
            height: 100%;
            top: 0;
            right: 0;
            margin-right: 0;
            float: right;
            border: 1px;
            border-style: solid;
        }

        #header #topNav.active #countryselector {
            display: none;
        }

        #header #topNav.active #navcontainer ul {
            padding-left: 0;
            margin: 0;
        }

            #header #topNav.active #navcontainer ul li {
                display: table;
                padding-top: 20px;
                padding-bottom: 20px;
                background-color: orange;
                width: 100%;
            }

#navcontainer li + li:before {
    content: " ";
}

#header #meta {
    width: 100%;
}

#header #shopauskunft_siegel {
    position: relative;
    z-index: -16;
    display: none;
    width: 15%;
    text-align: center;
    float: right;
}

#topvisual {
    width: 100%;
    order: 2;
    display: none;
    flex-wrap: wrap;
}


#content {
    width: 100%;
    order: 3;
}

#marginal {
    width: 100%;
    order: 4;
}

#footer {
    width: 100%;
    order: 5;
}

.buchpaket {
    position: absolute;
    float: right;
    visibility: hidden;
    position: absolute;
    right: 0;
    bottom: 0;
}

.buchpaket_dummy {
    width: 0;
}

/* Buchpaket erschient neben dem Eingabefeld */
@media screen and (min-width: 650px) {
    .buchpaket {
        visibility: visible;
        width: auto;
    }

    .buchpaket_dummy {
        width: 380px;
    }

    #isbn_eingabe_outer {
        margin-right: 10px; /* Das Buchpaket ragt 10px über das div hinaus */
    }

    .blauverlauf {
        font-size: 28px;
    }
}

/* Ab 850px die große Topnavigation anstatt Hamburger menu anzeigen*/
@media screen and (min-width: 850px) {
    #header {
        width: 100%;
        order: -10;
    }

        #header #hamburger {
            display: none;
        }

        #header #logo {
            height: 138px;
            width: 20%;
        }

            #header #logo.de {
                background-image: url(../img/buchmaxe_de_logo.png);
            }

            #header #logo.at {
                background-image: url(../img/buchmaxe_at_logo.png);
            }

            #header #logo.lu {
                background-image: url(../img/buchmaxe_lu_logo.png);
            }

            #header #logo.be {
                background-image: url(../img/buchmaxe_be_logo.png);
            }

        #header #topNav {
            display: block;
            width: 80%;
            z-index: 1;
        }

    #navcontainer li + li:before {
        content: " | ";
        padding: 0 5px;
    }

    #header #heading {
        position: absolute;
        top: 50px;
        left: 237px;
        width: auto;
    }

        #header #heading h1, #header #heading span.firstline {
            font-size: 2em;
        }

            #header #heading h1.secondline, span.secondline {
                font-size: 1.25em;
            }
}

/* Ab 1040px Die Marginalspalte links vom content anzeigen */
@media screen and (min-width: 1040px) {
    #page {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    #topvisual {
        display: flex;
        order: 1;
    }


    #header #shopauskunft_siegel {
        display: inherit;
        margin-top: 45px;
    }


    #marginal {
        width: 30%;
        order: 2;
    }



    #content {
        width: 70%;
        order: 3;
    }

    #footer {
        width: 100%;
        order: 4;
    }
}

iframe[name='google_conversion_frame'] {
    height: 0 !important;
    width: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    margin-top: -13px;
    float: left;
}


#hamburger a:hover {
    display: inline-block;
    text-decoration: none;
    color: #7ca33b;
}

#hamburger a:active {
    display: inline-block;
    text-decoration: none;
    color: #624149;
}

#hamburger a:visited {
    display: inline-block;
    text-decoration: none;
    color: #624149;
}


/*
    Social Buttons
    */ 

@font-face {
    font-family: 'si';
    src: url('/img/social/socicon.eot');
    src: url('/img/social/socicon.eot?#iefix') format('embedded-opentype'),
         url('/img/social/socicon.woff') format('woff'),
         url('/img/social/socicon.ttf') format('truetype'),
         url('/img/social/socicon.svg#icomoonregular') format('svg');
    font-weight: normal;
    font-style: normal;
 
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family:si;
        src: url(/img/social/socicon.svg) format(svg);
    }
}

.soc {
    overflow:hidden;
    margin:0; padding:0;
    list-style:none;
}

.soc li {
    display:inline-block;
    *display:inline;
    zoom:1;
}

.soc li a {
    font-family:si!important;
    font-style:normal;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;

    -o-transition:.1s;
    -ms-transition:.1s;
    -moz-transition:.1s;
    -webkit-transition:.1s;
    transition:.1s;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    overflow:hidden;
    text-decoration:none;
    text-align:center;
    display:block;
    position: relative;
    z-index: 1;
    width: 41px;
    height: 41px;
    line-height: 41px;
    font-size: 22px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin-right: 10px;
    color: #ffffff;
    background-color: none;
}

.soc a:hover {
    z-index: 2;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.soc-icon-last{
    margin:0 !important;
}

.soc-facebook {
    background-color: #3e5b98;
}
.soc-facebook:before {
    content:'b';
}
.soc-instagram {
    background-color: #9c7c6e;
}
.soc-instagram:before {
    content:'x';
}
.soc-email2 {
    background-color: #578AD6;
}
.soc-email2:before {
    content:'.';
}


       /*
    END Buttons
    */