.subinfo { display: none; width: 360px; bottom: 0; z-index: 15; background: #f1f6f8; padding: 20px; transition: all 300ms; min-height: 0; position: fixed; right: 0; max-height: 100%; border: 2px solid #0574a0;}
.subinfo dl {margin-bottom: 0}
.subinfo .titolet-m { display: none; color: #333 }
.subinfo .titolp-b { font: normal 28px/30px "Soho Gothic W01 Bold" }
.subinfo .titolp-b { margin-top: 0; margin-bottom: 5px }
.subinfo .titolp-b.desc2 { font: normal 18px/22px "Soho Gothic W01 Bold" }
.subinfo .imatge { display: none; width: 100%; margin: 50px auto 20px }
.subinfo .preu-wrapper { display: flex; flex-flow: row wrap; align-items: baseline; margin-bottom: 15px }
.subinfo .preu { font: normal 24px/24px "Soho Gothic W01 Bold"; color: #0074a1 }
.subinfo .preu-periode { color: #0074a1; font: normal 14px/20px "Soho Gothic W01 Bold"; margin-left: 5px }
.subinfo .preu-mes {display: none;color: #0074a1; font-size: 0.9em; margin-top: -1em; margin-bottom: 1em;}
.subinfo .nota * { font: normal 13px/18px "Soho Gothic W01 Regular"; color: #333 }
.subinfo .nota strong {font-family: "Soho Gothic W01 Bold"}
.subinfo .desplega,
.subinfo .plega { display: none }
.subinfo.desplegat { position: fixed; overflow-y: auto; min-height: 100%; bottom: 0; top:50px; z-index: 10;}
.subinfo.desplegat .contingut { max-height: 700px }
.subinfo.desplegat .preu-mes {display: block;}
.subinfo .icon-close {background: url(/THEMES/nea/img/icons/close.svg) no-repeat center; text-decoration: none; position: absolute; right: 20px; top: 20px; width: 24px; height: 24px; }
.subinfo ul { padding: 20px; border-top: 1px solid #a4a4a4; padding-left: 30px; list-style: none; margin-bottom:0 }
.subinfo ul li { position: relative; margin-bottom: 10px }
.subinfo ul li::before {content: " "; background-image: url("/THEMES/nea/img/icons/check.svg"); background-repeat: no-repeat; line-height: 20px; padding-left: 30px; background-size: contain; position: absolute; display: block; height: 23px; width: 23px; left: -33px; top: -3px; background-position: left center; }
.subinfo ul li.n::before {content: " "; background-image: url("/THEMES/nea/img/icons/not.svg"); background-repeat: no-repeat; line-height: 30px; padding-left: 30px; background-size: contain; position: absolute; display: block; height: 18px; width: 18px; left: -30px; top: 1px;background-position: left center; }
.subinfo ul li.avantatge {margin-bottom: 2em}
.subinfo ul li.avantatge::before {display: none;}

.fixed-footer { display:flex; padding: 20px; display: flex; justify-content: center; align-items: center; width: 100%; position: fixed; bottom: 0; left: 0; right: 0; z-index: 10 }
.fixed-footer .button { font: normal 14px/20px "Soho Gothic W01 Bold", Arial, sans-serif; color: #fff; background-color: #0074a1; border-radius: 4px; padding: 15px; text-decoration: none; border: 2px solid #0074a1; cursor: pointer }
.fixed-footer .button:first-child { border-radius: 4px 0 0 4px; color: #0074a1; padding-left: 45px;background: #fff url(/THEMES/nea/img/icons/basket.svg) no-repeat 12px center; }
.fixed-footer .button:not(:first-child) { flex: 1; border-radius: 0 4px 4px 0 }
.fixed-footer .spinner {flex: 1;position: initial;}

.fixed-footer.up { padding-bottom: 70px; transition-duration: 0.5s  }
.fixed-footer.down { padding-bottom: inherit; transition-duration: 0.5s  }

@media only screen and (max-width:740px) {
  .subinfo.desplegat {width: 100%; border-width: 12px}
}

@media only screen and (min-width:741px) {
  .subinfo { border-top-left-radius: 8px;}
}

@media only screen and (max-width:899px) {
  .subinfo.desplegat { display:block; position: fixed; overflow-y: auto; min-height: calc(100% - 50px); bottom: 0; top:50px; z-index: 10;}
  .subinfo.desplegat .contingut { max-height: 700px }
}

@media only screen and (min-width:900px) {
  #subsinfo { width: 365px; position: relative }
  .fixed-footer { display: none; }
  .subinfo { display:block; padding: 25px;}
  .subinfo * { font: normal 14px/22px "Soho Gothic W01 Regular" }
  .subinfo .titolp-b { margin-top: 10px; margin-bottom: 20px }
  .subinfo .titolp-b.desc2 {margin-bottom: 0}
  .subinfo .titolet-m { display: block; font: normal 14px/30px "Soho Gothic W01 Bold" }
  .subinfo .imatge { display: block; width: 100%; margin: 50px auto 20px }
  .subinfo .icon-close { display: none }
  .subinfo .contingut { max-height: 0; overflow: hidden; transition: all 300ms ease }
  .subinfo .desplega { display: block }
  .subinfo .desplega,
  .subinfo .plega { text-decoration: none; float: right }
  .subinfo .plega { display: none }
  .subinfo.desplegat { min-height: 85%; }
  .subinfo.desplegat .desplega { display: none }
  .subinfo.desplegat .plega { display: block }
  .subinfo.desplegat .contingut { max-height: 700px }
  .subinfo.desplegat .titolet-m:first-of-type {margin-bottom: 30px}
}