/* shopsuche.aspx */

.shs main                   { height: auto; }
.shs main h1                { font-family:fed-gara; width:100%; text-align:center; font-size:4em; font-weight:normal; margin:0em; }

.shs .top                   { width: 100%; clear: both; min-height: 38em; }
.shs .top > .cat-mobile     { display: none; }
.shs .top > .cat-desktop    { width: 38em; float: left; min-height: inherit; padding: 4em 3em 1em 3em; background-color: #f3f3f3; }
.shs .top > .banner         { width: calc(100% - 38em); float: left; min-height: inherit; }
.shs .top > .banner > .image   { width:calc(100% - 47em); float:left; min-height:inherit; background:url(https://www.federerbuchs.ch/files/shop_werbung_04.jpg); background-size:cover; background-position:center center; }
.shs .top > .banner > .text    { width:47em; min-height:inherit; float:left; background-color:#8A8333; border-left:solid 2px white; color:white; text-align:center; padding:2em; position:relative; top:0em; left:0em; }

.shs .top > .banner > .text .big    { font-size:8em; font-family:fed-gara; padding:1em 0em 0em 0em; line-height:1em; }
.shs .top > .banner > .text .middle { font-size:4em; font-family:fed-gara; padding:0em; line-height:1em; }
.shs .top > .banner > .text .normal { font-size:2em; }
.shs .top > .banner > .text .aside  { font-size:2em; position:absolute; left:0em; bottom:1em; color:#DAD7A2; width:100%;  }

.shs .top > .banner.static.withdelay, .shs .banner.mobile  {  transition: background-image 1s ease-in-out 2s; }
   
.shs .top > .banner.static                  { border-left:solid 4px white; cursor:pointer; background-image: url(https://www.federerbuchs.ch/files/content/glassybanner/FED_Glassy_Desk_00.png); background-size: contain;  background-repeat: no-repeat;  background-color: #F5F5F5; background-position: center; }
.shs.kontaktlinsen .top > .banner.static    { background-image: url(https://www.federerbuchs.ch/files/content/glassybanner/FED_Glassy_Desk_00.png); background-size: contain;  background-repeat: no-repeat;  background-color: #F5F5F5; background-position: center;}


.shs .banner.mobile          { display:none; }
/*.shs.kontaktlinsen .banner.mobile   { display:none; }*/

.shs .top > .cat-desktop h1             { font-family: fed-gara; font-weight: normal; font-size: 6em; margin: 0em; }
.shs .top > .cat-desktop li             { padding: 1em 0em 1em 0em; font-weight: bold; }
.shs .top > .cat-desktop li > a         { font-size: 2em; text-transform: uppercase; color: #4a4a4a; }
.shs .top > .cat-desktop li.active > a  { color: #66A9D1; }
.shs .top > .cat-desktop li:last-child > a { line-height:1.6em; }

.shs .main      { clear: both; }
.shs .filter    { width: 38em; float: left; background-color: none; padding: 2em 2em 11em 2em; }
.shs .list      { width: calc(100% - 38em); float:left; padding:2em 0em 2em 0em; }

.shs .products  { text-align:center; }

.shs.nofilter .filter   { display:none; }
.shs.nofilter .list     { width:100%; margin-left:0em; }

.shs .filter .search    { width:100%; }
.shs .filter h3         { font-size: 2em; margin-bottom: 0.2em; margin-left: 0.2em; }
.shs .filter ul         { /*max-height:38em;*/ overflow-y: auto; overflow-x: hidden; }
.shs .filter li         { padding: 0.5em; cursor: pointer; }
.shs .filter li > span              { font-size: 1.4em; }
.shs .filter li input               { display: none; }
.shs .filter li.active              { background-color: #f3f3f3; background-image:url(/images/filter-loeschen@2x.png); background-size:1em; background-position:right 1em center; background-repeat:no-repeat; }
.shs .filter li.active + .active    { border-top: solid 1px white; }
       
.shs .field.palette ul           { padding-left: 0.4em; }
.shs .field.palette li           { float: left; width: 3em; height: 3em; height: 3em; border: solid 1px #CCCCCC; margin: 0em 0.5em 0.5em 0em; }
.shs .field.palette li > span    { display: none; }
.shs .field.palette li.active    { background-color: inherit; border: solid 2px black; background-size:0em; }
.shs .field.palette li.active.bg { background-size:cover; background-position:center; }
.shs .field.palette li.active + .active {  }

.shs .field.std.withicon li         { padding:0.2em 0.5em 0em 0em; }
.shs .field.std.withicon li img     { max-width:6em; margin-right:0.3em; }
.shs .field.std.withicon li > span  { position:relative; top:-0.6em; }
       
.shs .controls          { margin-top: 2em; padding: 2em 1em 2em 1em; position: fixed; bottom: 0em; left: 4em; width: 35em; background-color: white; }
.shs .controls.relative { position:relative; left:0em; width:100%; }
.shs .controls .button  { width: 100%; clear: both; display: block; margin-bottom: 0.5em; font-size:1.4em; }
.shs .controls .startsearch { display:none; }

.shs .state         { width:100%; border-bottom:solid 3px #e7e5e6; text-align:center; padding:0.5em 1em 1em 0.5em; margin-bottom:2em; }
.shs .state > span  { display:inline-block; font-size:1.4em; padding:0em 1em 0em 1em; margin-bottom:0.5em; border-right:solid 1px #e7e5e6;  }
.shs .state > span:last-child { border-right-width:0px;  }

.shs .prod                  { display:inline-block; width: 24.5%; padding-bottom: 3.5em; text-align: center; position: relative; overflow: hidden;  vertical-align:top; }
.shs .prod img              { max-width: 100%; margin-bottom: -1.5em; }
.shs .prod h3               { font-size: 2.5em; font-family: fed-gara; font-weight: bold; margin: 0em 0em 0.2em 0em; z-index: 1; }
.shs .prod span             { color: #90A1A9; font-weight: normal; font-size: 2em; z-index: 1; }
.shs .prod a:first-child    { position:relative; top:-14em; display:block; }
.shs .prod.brille > div     { min-height:12em; }
     
.shs.brillen .prod img          { max-height:160px; }
.shs.sonnenbrillen .prod img    { max-height:160px; margin-bottom:0em; }

.shs .prod .tops            { opacity: 0.9; max-width: 18%; position: absolute; top: 0.5rem; right: 12%; width: 5rem; height: 5rem; background-image: url(/images/bestseller@2x.png); background-repeat: no-repeat; background-size: contain; z-index: 10; }
.shs .prod .neuheit         { opacity: 0.9; max-width: 18%; position: absolute; top: 0.5rem; right: 12%; width: 5rem; height: 5rem; background-image: url(/images/neuheiten@2x.png); background-repeat: no-repeat; background-size: contain; z-index: 10; }

.shs.brille .prod h3    { font-size:3em; }

.shs.nobanner .prod:nth-child(4n+1)  { clear:both; }
.shs .prod[data-src] img    { width:40em;  background-image:url(/images/facebook.gif); background-repeat:no-repeat; background-position:center; background-size:2em; }

.shs .prod.kontaktlinse img         { margin-bottom: 0.5em; }
.shs .prod.kontaktlinse a + span    { display:block; clear:both; margin-bottom:0.5em; }
.shs .prod.kontaktlinse  h3         { }

.shs .prod.zubehör img             { margin-bottom: 0.5em; }
.shs .prod.zubehör a + span        { display:block; clear:both; margin-bottom:0.5em; }
.shs .prod.zubehör h3              { }

.shs .info                   { display:none; position: fixed; cursor:pointer; width:100%; height:38em;  background-color: transparent; z-index: 100; text-align:center; }
.shs .info > .inner          { width:100%; height:100%; max-width:40em; position:relative; top:0em; margin:0em auto 0em auto; border:solid 2px #e6e6e6; -webkit-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.2); }
.shs .info > .inner > .sub   { position: absolute; bottom: 0em; left: 0em; width: 100%; max-width: 40em; background-color: white; }

.shs.kontaktlinsen .info    { height:47em; }
.shs.zubehoer .info         { height:44em; }

.shs.sonnenbrillen .info { display: none; position: fixed; cursor: pointer; width: 100%; height: 45em; }

.shs .info .sub > div    { float: left; width: 50%; background-color: white; padding: 1em; }
.shs .sub > div > div    { float: none; width: 100%; text-align: center; }
.shs .sub > div > i      { width: 100%; display: block; color: white; padding: 0.5em 0.5em 0.5em 0.5em; margin: 0.2em 0em 1em 0em; text-transform: none; font-style: normal; font-size: 1.2em; text-align:left; position:relative; top:0em; left:0em; }
.shs .sub > div > a      { width: 100%; display: block; color: white; padding: 0.5em 0.5em 0.5em 0.5em; }

.shs .sub > div > i > a      { float:right; color:white; border-left:solid 1px white; font-weight:bold; font-family:fed-gara; font-size:1.2em; display:block; width:2em; text-align:center; position:absolute; right:0em; top:0em; height:100%; padding-top:0.3em; }

.shs .sub > div > div > i    { font-size: 2em; font-weight: normal; font-style: normal; text-align:left; }
.shs .sub > div > div > span { font-size: 4em; font-weight: normal; display: inline-block; padding: 0em 0.1em 0em 0.1em; }

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

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

.shs .info.noeco .sub > div.eco   { display:none; }
.shs .info.noeco .sub > div.life  { width:100%; }

.shs .info.nolife .sub > div.eco   { width:100%; }
.shs .info.nolife .sub > div.life  { display:none; }

.shs .info.ecorequest .sub > div.eco > div  { visibility:hidden; }

.shs .info--noorder .button { display:none; }

.shs .zubehoer .sub > div.eco        { display:none; }
.shs .zubehoer .sub > div            { width:100%; }
.shs .zubehoer .sub > div > div > i:last-child   { display: none; }
.shs .zubehoer .sub > div > i.tooltip { display:none; }



.shs .message       { width: 100%; text-align: center; padding-top:2em; }

.shs .info-2 .sub           { padding:1em 1em 0em 1em; }
.shs .info-2 .sub > div     { width:100%; clear:both; }
.shs .info-2 .packs         { width:100%; clear:both; }
.shs .info-2 .packs > div   { font-size:3em; }
.shs .info-2 .packs > span  { font-size:1.4em; } 
.shs .info-2 .button        { width:100%; display:block; clear:both; }

.shs .prod-banner               { clear:both; width:100%; text-align:center; }
.shs .prod-banner img           { max-width:100%; margin:0em 0em 4em 0em; }
.shs .prod-banner img.mobile    { display:none; }

.shs .showall { width:100%; text-align:center; clear:both; padding-top:2em; }

.shs .bannerlink                { display:block; width:100%; }
.shs.brillen .bannerlink        { display:none; }
.shs.sonnenbrillen .bannerlink  { display:none; }
.shs.sportbrillen .bannerlink   { display:none; }

.loadingpanel { display:block; }
        

@media screen and (max-width:1920px) 
{
    .shs .prod  { width:32.5%; }

    .shs.nobanner  .prod:nth-child(4n+1) { clear:none; }
    .shs.nobanner  .prod:nth-child(3n+1) { clear:both; }
}

@media screen and (max-width:1100px) 
{
    .shs .prod h3           { font-size: 2em; }

    .shs.brille .prod h3    { font-size:3em; }
}

@media screen and (max-width:1280px) 
{
    .shs .top                   { min-height: 32em; }
    .shs .top > .cat-desktop    { width: 25em; padding: 2em 1.5em 1.5em 1.5em; }
    .shs .top > .banner         { width: calc(100% - 25em); }
    .shs .top > .banner > .text .big { padding:0em; }

    .shs .top > .cat-desktop h1 { font-size: 4em; }
    .shs .top > .cat-desktop li { font-size:0.9em; }

    .shs .filter    { width: 25em; float: left; background-color: none; padding: 2em 2em 11em 2em; }
    .shs .list      { width: calc(100% - 25em);  padding: 2em; }

    .shs .controls  { width: 25em; }
}

@media screen and (max-width:1024px) 
{
    .shs .top > .banner > .image   { width:50%; }
    .shs .top > .banner > .text    { width:50%; }

    .shs .prod { width: 49.5%; }

    .shs.nobanner  .prod:nth-child(4n+1) { clear:none; }
    .shs.nobanner  .prod:nth-child(3n+1) { clear:none; }
    .shs.nobanner  .prod:nth-child(2n+1) { clear:both; }
}

@media screen and (max-width:768px) 
{
    .shs .top > .banner > .image   { width:100%; }
    .shs .top > .banner > .text    { display:none; }

    .shs .top                   { min-height: auto; }
    .shs .top > .cat-desktop    { display: none; }
    .shs .top > .cat-mobile     { display: block; }
    .shs .top > .banner         { display:none; }

    .shs .top > .cat-mobile > select            { float: left; width: 67%; margin-right: 3%; }
    .shs .top > .cat-mobile > .trigger          { float: left; width: 30%; background-color: #f8f8f8; display: block; padding: 1em 1em 1em 2em; background-image: url(/images/filter-off@2x.png); background-repeat: no-repeat; background-position: center right 1em; background-size: 3.5em; }
    .shs .top > .cat-mobile > .trigger > span   { font-size: 2em; font-weight: normal; color: #4a4a4a; }
    .shs .top > .cat-mobile > .trigger.active   { background-color: #313131; background-image: url(/images/filter-on@2x.png); }
    .shs .top > .cat-mobile > .trigger.active > span { color: white; }

    .shs .filter    { width: 100%; float: none; background-color: white; padding: 2em 2em 11em 2em; }
    .shs .list      { width: 100%; margin-left: 0em; padding: 2em 0em 2em 0em; }

    .shs .filter        { width: calc(100% - 2em); height: 100vh; display: none; padding-top: 2em; position: fixed; top: 14.9em; left: 1em; overflow: auto; border: solid 2px black; z-index: 99; background-color: white; }
    .shs .filter ul     { overflow-y: visible; max-height: 100%; }
    .shs .filter .inner { padding-bottom:15em; }
    .shs .controls .startsearch { display:inline-block; }

    .shs .controls                      { width: 100%; left: 0em; padding: 1.5em; -webkit-box-shadow: 0px -1px 12px 1px rgba(145,145,145,1); -moz-box-shadow: 0px -1px 12px 1px rgba(145,145,145,1); box-shadow: 0px -1px 12px 1px rgba(145,145,145,1); }
    .shs .controls .button              { width: 48%; clear:none; display: block; margin-bottom: 0em; font-size:1.4em; float:left;  }
    .shs .controls .button  + .button   { margin-left:4%; }
    .shs .prod                          { width: 49%; }

    .shs .prod-banner img           { max-width:90%; margin:0em 0em 4em 0em; }
    .shs .prod-banner img.mobile    { display:inline; }
    .shs .prod-banner img.desktop   { display:none; }

    .shs .banner.mobile { display:block; max-width:100%; width:calc(100% - 4em); margin:0em auto 2em auto; }
}

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

    .shs main h1                        { font-size:2.5em; }
    .shs .top > .cat-mobile > .trigger  { padding-left: 1em; }
    .shs .prod                          { width: 49.5%; }
    .shs .prod img                      { margin-bottom:0em; }
    .shs .prod h3                       { font-size:1.8em; }
    .shs .prod span                     { font-size:1.6em; min-height:2.5em; display:inline-block; }
}

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

    .shs .prod                          { width: 49.5%; }
    .shs .top > .cat-mobile > select    { width: 62%;}
    .shs .top > .cat-mobile > .trigger  { padding-left: 1em; width:35%; }
}

@media screen and (max-width:325px) {
    .shs .prod                          { width: 100%; }
}