/* shopdetail.aspx */

.mfp-bg { opacity:0.7; }

.shd main           { text-align:center; height:auto; min-height:auto; padding-top:4em; padding-bottom:4em; }

.shd .back                          { display:block; background-color:#e8ecef; max-width:50em; padding:1em; height:4em; position:relative; top:0em; left:0em; margin:0em auto 0em auto; }
.shd .back > span:first-child       { background-color:#A1DAF7; border-right:solid 2px white; background-image:url(/images/zurueck-blau@2x.png); background-repeat:no-repeat; background-size:3.5em; width:25%; height:100%; display:block; background-position:center center; position:absolute; top:0em; left:0em; }
.shd .back > span:last-child        { font-size:1.8em; color:#040404; }
        
.shd .link1 img     { margin-top:6em; max-width:100%; }

.shd .pic           { max-width:100%; max-height:40vh; margin:2em 0em -2em 0em; }

.shd .topimage                  { display:none; }
.shd.brille .topimage           { display:block; }

.shd .topimage                  { text-align:center; position:relative; top:0em; left:0em; }
.shd .topimage img              { margin:0em auto 0em auto; max-width:100%;  }
.shd .topimage img.main         { display:block; }
.shd .topimage img.side         { display:none; }
.shd .topimage > span           { position:absolute; left:50%; bottom:10%; display:block;   }
.shd .topimage > span > span    { position:relative; left:-50%; display:block; width:4em; height:4em; margin:0em auto 0em auto; background-image:url(/images/slidinginfo@2x.png); background-size:contain; background-repeat:no-repeat; }
.shd .zinfo                     { margin-bottom:2em; display:block; }
.shd .tophead       { font-size:1.6em; width:100%; text-align:center; color:#90A1A9; margin:0em 0em 0em 0em; }
.shd main h1        { font-size:7em; font-family:fed-gara; font-weight:normal; margin:0em 0em 0.2em 0em; line-height:1em; }
.shd main h2        { font-size:3em; font-weight:normal; margin:0em 0em 0.8em 0em; }
.shd main h3        { font-size:2em; font-weight:normal; margin:0em 0em 0em 0em; }

.shd.brille .textmodel  { margin-top:-0.5em; margin-bottom:2em; }
.shd.brille .model      { font-size:1.8em; color:#90A2AA; }
.shd.brille .orderdata  { max-width:45em; margin:3em auto 0em auto; text-align:center; }

.shd.brille .orderdata > div            { float: left; width: 50%; background-color: white; padding: 1em; }
.shd.brille .orderdata > div > div      { float: none; width: 100%; text-align: center; }
.shd.brille .orderdata > div > i        { width: 100%; display: block; color: white; padding: 0.3em 1em 0.3em 1em; margin: 0.2em 0em 0.8em 0em; text-transform: none; font-style: normal; cursor:pointer; font-size: 1.4em; text-align:left; font-weight:normal; position:relative; top:0em; left:0em; }
.shd.brille .orderdata > div > a        { width: 100%; display: block; color: white; padding: 0.3em 0.3em 0.3em 0.3em; font-size:2em; }
        
.shd.brille .orderdata > div > i > a    { float:right; color:white; border-left:solid 1px white; font-weight:bold; font-family:fed-gara; display:block; width:2em; text-align:center; position:absolute; right:0em; top:0em; height:100%; padding-top:0.3em; }

.shd.brille .orderdata > div > div > i    { font-size: 2.5em; font-weight: normal; font-style: normal; text-align:left; }
.shd.brille .orderdata > div > div > span { font-size: 4.5em; font-weight: normal; display: inline-block; padding: 0em 0.1em 0em 0.1em; }

.shd.brille .orderdata > div.eco      { color: #708327; }
.shd.brille .orderdata > div.eco > i  { background-color: #708327;  }
.shd.brille .orderdata > div.eco > a  { border-color:#708327; color:#708327; cursor:pointer; }
.shd.brille .orderdata > div.eco > a:hover { color:white; background-color: #708327;  }

.shd.brille .orderdata > div.life     { color: #009fe1; }
.shd.brille .orderdata > div.life > i { background-color: #009fe1; }
.shd.brille .orderdata > div.life > a { border-color:#009fe1; color:#009fe1; cursor:pointer; }
.shd.brille .orderdata > div.life > a:hover { color:white;  }

.shd.brille .orderdata.noeco > div.eco { display:none; }
.shd.brille .orderdata.noeco > div { margin:0em auto 0em auto; width:75%; float:none; }

.shd.brille .orderdata.nolife > div.life { display:none; }
.shd.brille .orderdata.nolife > div      { margin:0em auto 0em auto; width:75%; float:none; }

.shd.brille .orderdata.ecorequest > div.eco > div { visibility:hidden; }

.shd.brille.noorder .orderdata > div > a { opacity:0.5; }

.shd.zubehoer main .inner       { max-width:90em; text-align:center; margin:0em auto 0em auto; }
.shd.kontaktlinse main .inner   { max-width:90em; text-align:center; margin:0em auto 0em auto; }
        
.shd.zubehoer .pic { margin-bottom:0em; }

.shd.kontaktlinse main h3  { margin-top:1em; }
.shd.kontaktlinse .zinfo   { display: none; }

.prices             { width:100%; padding-top:6em; }
.priceinfo          { width:100%; clear:both; text-align:right; padding:0em 2em 1em 2em; }
.priceinfo > a      { font-size:1.4em; cursor:pointer; }
.priceinfo > img    { width:0.8em; margin-left:0.5em; cursor:pointer; }

.prices table               { width:100%; clear:both; }
.prices table td            { background-color:#f9fafc; padding:1em; text-align:left; border-bottom:solid 5px white; }
.prices table td.pack       { text-align:left; width:auto; padding-left:2em; }
.prices table td.type       { text-align:left; width:12em; }
.prices table td.amounts    { text-align:right; width:12em; padding-right:2em; }
.prices table td.amounts b  { min-width: 3.5em;display: inline-block; }

.prices table td > *                { font-size:1.6em; line-height:1.4em; }
.prices table td.pack > span        { clear:both; display:block; line-height:1.6em; }
.prices table td.pack .circle       {  }
.prices table td.pack .textsmall    { display:none; }

.prices td.type label       { position:relative; left:0.5em; top:-0.05em; }

.selection                  { width:100%; padding:1em 0em 1em 0em; margin-top:0.7em; border-top:solid 1px #c8d0d3; border-bottom:solid 1px #c8d0d3; min-height:6em; }
.selection > *              { width: 25%; display:inline-block; float:left; }
.selection > .button        { font-size:2em; }
.selection > span           { padding-top:1.3em; }
.selection > span > label   { font-size:1.6em; position:relative; top:-0.15em; left:0.5em; }

.shd.noorder .selection > .button { opacity:0.5; }

.shd.zubehoer .orderdata > div              { width:100%; float:none; max-width: 30em; margin: 0em auto 0em auto; }
.shd.zubehoer .orderdata > div > div > i    { font-size: 2.5em; font-weight: normal; font-style: normal; text-align:left; }
.shd.zubehoer .orderdata > div > div > span { font-size: 4.5em; font-weight: normal; display: inline-block; padding: 0em 0.1em 0em 0.1em; }
.shd.zubehoer .orderdata > div > a          { width: 100%; display: block; padding: 0.3em 0.3em 0.3em 0.3em; font-size:2em; margin-top:0.5em; }
.shd.zubehoer .orderdata > div > div > i:last-child { display:none; }
.shd.zubehoer .zinfo                        { display: none; }

.shd.zubehoer.noorder .orderdata > div > a  { opacity:0.5; }

.shd .buttons           { text-align:center; padding:2em; }
.shd .buttons a         { display:inline-block; padding:0.5em 0em 0.5em 4em; background-position:left center; background-size:contain; background-repeat:no-repeat; cursor:pointer; }
.shd .buttons a + a     { margin-left:4em; }
.shd a.book             { background-image:url(/images/wunschliste-on@2x.jpg); background-size:3em; }
.shd a.zoom             { background-image:url(/images/zoom@2x.png); background-size:3em; }
.shd .buttons a > span  { color:#66A9D1; font-size:1.8em; position:relative; top:0.1em; }
        
.shd .details                           { width:100%; max-width:40em; margin:6em auto 0em auto; clear:both; }
.shd .details table                     { text-align:left; margin:0em auto 0em auto;  }
.shd .details td:first-child            { padding-right:5em; }
.shd .details td:first-child > span     { font-weight:bold; }
.shd .details td > span                 { font-size:1.6em; line-height:1.6em; }

.mfp-iframe-holder .mfp-content { }

.bg-zoompanel               { display:none; position:fixed; text-align:center; top:0em; left:0em; z-index:99991; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.10); }
.zoompanel                  { z-index:99992; margin:auto; position:relative; width:100%; padding:3em; height:53em; max-width:90em;  background-color:white; border:1px solid #f2f2f2; border-radius:4px;  -webkit-box-shadow: 2px 2px 10px 2px rgba(196,196,196,1); -moz-box-shadow: 2px 2px 10px 2px rgba(196,196,196,1); box-shadow: 2px 2px 10px 2px rgba(196,196,196,1); }        
.zoompanel > .previews      { width:32%; float:left; height:100%; padding-right:5%; }
.zoompanel > .panel         { position:absolute; top:0em; right:0em; width:68%; float:right;  height:100%; }
.zoompanel > .panel a       { }
.zoompanel > .panel a img   { }
.zoompanel > .panel > p     { position:absolute; top:45%; width:100%; text-align:center; }
.zinfo                      { margin-bottom:2em; }


.nav-slit > a       { z-index:666; display:none; position:fixed; top:50vh; width:23em; padding:1em; background-color:#e8ecef; min-height:10em;  }
.nav-slit > a img   { max-width:100%; display:block; clear:both; margin-bottom:1em; min-height:8em; }
.nav-slit > a span  { position:absolute; top:0em; left:0em; background-color:#e8ecef; display:block; float:left; width:5em; height:100%;  min-height:10em; background-position:center; background-size:2em; background-repeat:no-repeat; }
.nav-slit > a h3    { color:#4a4a4a; font-weight:bold; font-size:1.6em; margin-left:0.5em; }
.nav-slit > a i     { color:#4a4a4a; font-weight:normal; font-size:1.4em; margin-left:0.6em; line-height:1.6em; font-style:normal; }
.nav-slit > a b     { font-size:1.4em; font-weight:normal; line-height:1.6em; }

.nav-slit > a.prev { left:-20em; text-align:left;  }
.nav-slit > a.next { right:-20em; text-align:left; }
.nav-slit > a.prev span  { right:0em; left:auto; background-image:url(/images/pfeil-links@2x.png);  background-position:center right 0.5em; }
.nav-slit > a.next span  {  background-image:url(/images/pfeil-rechts@2x.png);  background-position:center left 0.5em; }

.nav-slit > a.prev:hover { left:0em; }
.nav-slit > a.next:hover { right:0em; }
.nav-slit > a:hover span { display:none; }

.shd .ajax                  { margin-bottom:1em; }
.shd .ajax  h2              { margin-top:3em; }
.shd .ajax .prod            { text-align:center; display:inline-block; margin:0em auto 0em auto; }
.shd .ajax .prod img        { clear:both; max-width:100%; }
.shd .ajax .prod span       { clear:both;  font-size:1.6em; text-align:center; display:block; }
        
.shd .link1 img.mobi       { display:none; }
       
.shd.sonnenbrillen .topimage        { margin-bottom:2em; }
.shd.sonnenbrillen .topimage > span { bottom:3%;  }
.shd .pagination            { z-index:999; padding:0em 0em 2em 0em; }
.shd .pagination li         { z-index:888; opacity:0.6; clear:both; margin-bottom:1em; border-radius:50%; width:6em; height:6em; cursor:pointer; display:inline-block; background-repeat:no-repeat; background-size:5em; background-position:center;  border:solid 1px #e2e2e2; }
.shd .pagination li + li    { margin-left:1em; }
.shd .pagination li.active  { opacity:1; }


.lager__hint { display:inline-block; padding:0px 0px 0px 15px; cursor:pointer; }



@media screen and (max-width:768px) 
{
    .selection > *              { width: 33%; }
    .selection > .button        { float:none; clear:both; margin:0.8em auto 0em auto; }
    .shd .zinfo                 { display: none; }

    .nav-slit           { display:block; clear:both; margin-top:5em; margin-bottom:3em; }
    .nav-slit > a       { position:relative; top:0em; left:0em; width:48%; float:left; max-width:23em; min-height:21.5em;  }
    .nav-slit > a span  { display: none; }
    .nav-slit > a.prev  { left:0em; float:left;  }
    .nav-slit > a.next  { right:0em; float:right; }

    .shd .link1 img.desk       { display:none; }
    .shd .link1 img.mobi       { display:block; }
}
        
@media screen and (max-width:680px)
{
    /*.shd .back            { max-width:100%; width:100%; position:fixed; top: 10em; left:1em; width:calc(100% - 2em); z-index: 99999; }
    .shd.minimized .back    { max-width:100%; width:100%; position:fixed; top: 8em; z-index: 99999; }*/

    .shd main               { padding-top:0em; }

    .shd .pic               { margin-bottom: 1em; }

    .shd .topimage          { margin:6em 0em 3em 0em; }
    .shd .topimage img      { margin:0em auto 0em auto; max-width:100%;  }
    .shd .topimage > span   { bottom: 0em; }
    .shd.sonnenbrillen .topimage > span { bottom:-2.5em;  }
    .shd.sonnenbrillen .inner { padding-top:2em;  }

    .shd main h1        { font-size:4em; }
    .shd main h2        { font-size:3em; }

    .selection > *              { width: 33%; }
    .selection > .button        { width:100%; float:none; clear:both; margin:0.8em auto 0em auto; }

    .shd .buttons a + a         { margin-left:0em; }

    .zoompanel > .previews      { width:100%; float:left; height:95%; padding:0em; clear:both; }
    .zoompanel > .panel         { position:absolute; top:0em; margin-top:0em; width:100%; clear:both;  }

    .zoompanel > .previews a { height:20%; display:block; width:100%; border:solid 1px #e2e2e2; }
    .zoompanel > .previews a img { max-width:100%; height:100%; }

    .nav-slit > a img { min-height: 0rem; }
}

@media screen and (max-width:600px) 
{
    .prices table td.pack .text         { font-size:0.8em; position:relative; top:-0.2em; }
}

@media screen and (max-width:525px) 
{
    .prices table td.pack .text         { display:none; }
    .prices table td.pack .textsmall    { display:inline; }
}

@media screen and (max-width:475px) 
{
    .shd .buttons a { margin-bottom: 1em; }

    .shd.brille .orderdata > div > div > span { font-size: 3.2em; padding: 0em 0.1em 0em 0.3em; }

    .prices table td.amounts b  { min-width: 3em; }
}

@media screen and (max-width:425px) 
{
    .selection > *    { width: 100%; clear:both; }
    .selection > span { width:100%; display:block; text-align:left; padding-left:2em; }

    .shd.brille .orderdata > div > div > span { font-size: 3em; padding: 0em 0.1em 0em 0.3em; } 
}

@media screen and (max-width:414px) 
{
    .shd.brille .orderdata.ecorequest > div.eco > a { line-height:2.4em; }
}

@media screen and (max-width:375px) 
{
    .prices table tr                { display:block; width:100%; clear:both; }
    .prices table td.pack           { display:block; width:100%; clear:both;  border-bottom-width:0em; padding-right:2em; }
    .prices table td.type           { display:block; width:50%; border-bottom-width:0em; float:left; clear:none; }
    .prices table td.amounts        { display:block; width:50%; float:left; clear:none;  }
    .prices table td.pack > b       { display:inline-block; width:50%; clear:none; } 
    .prices table td.pack > span    { display:inline-block; width:50%; text-align:right; float:right; }

    .selection > *                  { width: 100%; clear:both; }
    .selection > span               { width:100%; display:block; text-align:left; padding-left:2em; float:right; }
}


/* anprobe */

.shd__anprobe           { margin:9rem 0rem; display:none; }
.brille .shd__anprobe   { display:block; }
.anprobe            { width:100%; text-align:center;  }
.anprobe__headline  { font-size:3rem; }
.anprobe__steps     { width:100%; max-width:110rem; margin:auto; padding-bottom:2rem; }
.anprobe__step      { display:inline-block; width:33%; padding:2rem 1rem; vertical-align:top; }
.anprobe__stepicon  { height:12rem; }
.anprobe__text      { font-size:1.4rem; line-height:2.0rem; padding-top:3rem; vertical-align:top; }
.anprobe__bold      { font-size:1.8rem; line-height:2.6rem; }
.anprobe__button    { background-color:#a1daf7; border-color:#a1daf7; color:#313234; max-width:32rem; margin:2rem auto 0em auto; display:block; }

@media screen and (max-width:767px)
{
    .shd__anprobe       { margin:12rem 0rem; }
    .anprobe__step      { width: 100%; max-width: 110rem; margin: auto; }
    .anprobe__button    { margin-top:1rem; }
}