/*-- 
Name:          Heinrich Recker GmbH & Co. KG, Hameln
Url:           https://recker-hameln.de
Description:   Heinrich Recker GmbH & Co. KG, Hameln | Industriebedarf, Berufsbekleidung, Sicherheitsschuhe, Arbeitssicherheit Hameln
Version:       2.0 (Relaunch Responsive)
______________ Webdesign by elf42 - Hameln Emmerthal */





/*-- img, biga, ref
_________________________ HTML > CSS; [© by elf42] -- */

video { width: 100%; }

figure {     margin:0; padding:0; 
             margin-block-start:0; margin-block-end:0; margin-inline-start:0; margin-inline-end:0; }

figcaption { margin-top: var(--a10); text-align:center; }

.flex figure.col-6, 
figcaption:last-child { padding-bottom: 0; }

figure.fbo { border: 10px solid var(--m255); }


/* --- */
figure.bi2 figure {              margin-bottom: var(--ab); float:left; 
                                 height: 20vh; overflow:hidden; }

figure.bi2 figure:nth-child(1) { width: 50%; display: inline-block; }
figure.bi2 figure:nth-child(2) { width: 50%; display: inline-block;  }


/*  */

/* figures ... (width) verkleinert */
.flex.bi2, .flex.bi3, .flex.bi4, .flex.bi5, .flex.bi6 { 
                         flex-direction: row; flex-wrap: wrap; 
                         align-items: flex-start; align-content: space-between;  }

.flex.bi2 figure {       width: 49%; height:auto; overflow:hidden; }
.flex.bi3 figure {       width: 32%; height:auto; overflow:hidden; }
.flex.bi4 figure {       width: 23%; height:auto; }
.flex.bi5 figure {       width: 18%; height:auto; padding: 0 1%; } /* seite partner logos */
.flex.bi6 figure {       width: 14.66%; height:auto; }

.flex.bi2 figure img, 
.flex.bi3 figure img, 
.flex.bi4 figure img, 
.flex.bi6 figure img { margin-top: var(--am); }
.flex.bi2 figure img:nth-child(1), 
.flex.bi3 figure img:nth-child(1), 
.flex.bi4 figure img:nth-child(1), 
.flex.bi5 figure img:nth-child(1), 
.flex.bi6 figure img:nth-child(1) { margin-top: 0; }

.flex figure a.btn {         margin-bottom: 0; }


/*-- c-mire -- */
.c-mire:nth-child(2) .flex.bi2, 
.c-mire:nth-child(2) .flex.bi3, 
.c-mire:nth-child(2) .flex.bi4, 
.c-mire:nth-child(2) .flex.bi5, 
.c-mire:nth-child(2) .flex.bi6 {        flex-direction: column; }

.c-mire:nth-child(2) .flex.bi2 figure,
.c-mire:nth-child(2) .flex.bi3 figure,
.c-mire:nth-child(2) .flex.bi4 figure, 
.c-mire:nth-child(2) .flex.bi5 figure, 
.c-mire:nth-child(2) .flex.bi6 figure {       width: 100%; }


@media only screen and (max-width: 767px ) { /* MAX ! */

.flex.bi2, .flex.bi3, .flex.bi4, .flex.bi5, .flex.bi6 {       flex-direction: column; }

.flex.bi2 figure,
.flex.bi3 figure,
.flex.bi4 figure, 
.flex.bi5 figure, 
.flex.bi6 figure {       width: 100%; }

} @media only screen and (orientation: landscape) {}



/* --- flx --- */
.flex.flx figure {                          height: auto; overflow: hidden; position:relative; }
.flex.flx figure img  {        width: auto; height: auto;                   position:absolute; z-index:1; top:60%; left:50%; transform: translate(-50%, -60%); }
.flex.flx figure figcaption  { width: 100%;                                 position:absolute; z-index:2; bottom:-5px; left:0; 
                                            background: var(--m242); padding: var(--a10) 0; }

.flex.flx figure[class*="col-"] img  {  height: 98%; }

.flex.flx div[class*="col-"] {    order: 1; display:table; }
.flex.flx figure[class*="col-"] { order: 2; display:table; }

  @media only screen and (max-width: 979px) { /* MAX ! */
.flex.flx figure {                          height: auto; overflow: hidden; position:relative; }
.flex.flx figure img  {        width: 100%; height: auto;                   position:relative; z-index:1; top:0; left:0; transform: none; }

.flex.flx div[class*="col-"] {    order: 2; width: 100%; }
.flex.flx figure[class*="col-"] { order: 1; width: 100%; }

} @media only screen and (orientation: landscape) {}


figure {       margin:0; padding:0; }
.flex figure { margin: 0 0 var(--ab) 0; }
  @media only screen and (max-width: 599px) { /* MAX ! */
figure {       margin: 0 0 var(--ab) 0; padding:0; }
} @media only screen and (orientation: landscape) {}





/*-- lesen sie mehr
_________________________ HTML > CSS; [© by elf42] -- */
/* ausserhalb UNTEReinander gestapelt - innerhalb NEBENeinander */


.lsm {     width: 100%; margin:0 auto 0 auto; padding: 0;
             display: flex; justify-content: space-between; flex-wrap : wrap; }

.lsm figure { width: 100%;  margin-bottom: var(--ac); padding: var(--am); 
                              background: var(--m255); border-radius: var(--abora); }

.lsm figure img {          width: 40%; float: left; }
.lsm figure figcaption {   width: 56%; float: right; 
                             text-align:left; margin-top: 0; }

.lsm figure img {                       padding:0; }
.lsm figure figcaption p {              padding: 0 0 var(--ab) 0; text-align: justify; }
.lsm figure figcaption h3 {             padding-top: 0/*var(--ab)*/; }
.lsm figure a.btn {         margin-bottom: 0; }

/*-- c-mire -- */
.c-mire:nth-child(2) .lsm figure img, 
.c-mire:nth-child(2) .lsm figure figcaption {       flex-direction: column;
                                                      width: 100%; float: left; }

  @media only screen and (max-width: 767px ) { /* MAX ! */
.lsm figure {              width: 100%; margin-bottom: var(--ab); padding: var(--am); border-radius: var(--abora); }
.lsm figure img, 
.lsm figure figcaption {   width: 100%; margin:0; padding:0; }

} @media only screen and (orientation: landscape) {}


/*-- seite news/infos -- */

section[data-title="teaser"] p { font-family: "Roboto Bold"; font-weight:500; line-height: 1.8rem; }



/*-- cards
_________________________ HTML > CSS; [© by elf42] -- */
/* ausserhalb 50/50/100 gestapelt - innerhalb UNTEReinander */


.offer {          width: 100%; margin:0; 
                  display: flex; justify-content: space-between; align-items : stretch; 
                  flex-wrap : wrap; 
                  background: var(--tr); }

.offer figure {   margin:0; padding: var(--ab); 
                  margin-block-start:0; margin-block-end:0; margin-inline-start:0; margin-inline-end:0;
                  display: flex; flex-direction: row; flex-wrap: wrap; align-content: space-between; align-items: stretch;
                  overflow:hidden; 
                  background: rgba(var(--f10t),0.3); border: var(--no); }

.offer figure h3 {            width: 100%; padding: var(--ab); 
                              text-align: center; color: var(--f02); font-weight: 700; font-size: 1.8rem; }

.offer figure figcaption {    width: 100%; padding: 0/*var(--ab)*/; 
                              text-align: center;  color: var(--m182); }
.offer figure figcaption p {  text-align: justify; color: var(--m82); }

.offer figure ol { width: 100%; }

.offer figure figcaption p::after { content: "..."; } /*  3 pkt fuer lesen sie mehr  */

.offer figure {                margin-bottom: var(--ab); }
.offer figure:last-child {     margin-bottom: 0; }
.offer figure img,
.offer figure figcaption h3 {  margin-bottom: var(--am); padding:0; }

/* betrifft nur das bild, sonst ist auch der button betroffen */
.offer a:link:nth-child(1) { display: table; padding: 0; background:none; text-decoration:none; border:none; } 

/*-- c-mire -- */
.c-mire:nth-child(2) .offer figure {   width: 100%; }



  @media only screen and (max-width: 979px ) { /* MAX ! */
.offer {                 flex-direction: column; align-items: center; }
.offer figure {          width: 100%; padding: var(--am); }

.offer figure img  {     min-height: 100px; }

} @media only screen and (min-width: 980px ) {
.offer {         flex-wrap: wrap;}
.offer figure {                       width: 48%; }
.offer figure:nth-child(3n - 3) {     width: 100%; }

} @media only screen and (min-width: 1260px ) {
.offer figure {                       width: 48%; }
.offer figure:nth-child(4n - 4) {     width: 48%; }
/*-- c-mire -- */
.c-mire:nth-child(1) .offer figure {  width: 48%; }

} @media only screen and (min-width: 1920px ) {
.offer figure {                       width: 32%; }
.offer figure:nth-child(4n - 4) {     width: 32%; }
/*-- c-mire -- */
.c-mire:nth-child(1) .offer figure {  width: 32%; }

} @media only screen and (orientation: landscape) {}



/*-- BildButton
_________________________ HTML > CSS; [© by elf42] -- */
/*
div.bibu ... produkte
div.bibu.bibu2 ... dienstleistung
*/


.bibu {          display: flex; flex-wrap: wrap; 
                 justify-content: space-between; align-items: stretch; 
                 background: var(--tr); }

/*
.c-full .bibu {          width:100%; margin: 0 auto 10px auto; }
.box .bibu {             width:100%; padding-bottom: 0; }
*/
.bibu figure {               position: relative; 
                             overflow:hidden; 
                             margin-block-start:0; margin-block-end:0;
                             border: 1px solid var(--ci02); }

.bibu figure {            margin-bottom: var(--am); }
.bibu figure:last-child { margin-bottom: 0; }

.bibu figure a:link {        padding:0; }

.bibu figure figcaption { position: absolute;
                             width:100%; margin:0; padding: var(--a10);
                             left:0; bottom:0; 
                             color: var(--m255); background: var(--b03); border:0;
                             font-size:1.2rem; font-weight: 500; text-align:center; }

.bibu figure figcaption:hover { color: var(--b02); background: var(--b04); cursor: pointer; }


.bibu figure img { border-radius: var(--abora) var(--abora) 0 0;
-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; 
     -o-transition: all 0.3s ease-in-out;      transition: all 0.3s ease-in-out; }


/*-- c-mire -- */
.c-mire:nth-child(2) .bibu figure { width: 100%; }

@media only screen and (max-width: 979px ) {
div.bibu figure {                   width: 100%; height: 230px; }
} @media only screen and (min-width: 980px ) {
div.bibu figure {                   width: 48%; height: 260px; }
/*-- c-mire -- */
.c-mire:nth-child(2) .bibu figure {             height: 150px; }
} @media only screen and (min-width: 1260px ) {
div.bibu figure {                  width: 32%; height: 200px; }
/*div.bibu figure:nth-child(10) {    width: 66%; height: 200px; }*/
div.bibu.bibu2 figure:nth-child(2), 
/*div.bibu.bibu2 figure:nth-child(3), */
div.bibu.bibu2 figure:last-child { width: 66%; height: 200px; }
} @media only screen and (orientation: landscape) {}




/*-- TextButton
_________________________ HTML > CSS; [© by elf42] -- */

.txbu {              display: flex; flex-wrap: wrap; 
                     justify-content: space-between; align-items: stretch;
                     background: var(--tr); }

.box .txbu {         padding-bottom: 0; }

div.txbu figure {    display: flex; justify-content : center; align-items : center; 
                     background: var(--tr); border-radius: var(--abora); }

div.txbu figure {            margin-bottom: var(--am); }
div.txbu figure:last-child { margin-bottom: 0; }


/*-- c-mire -- */
.c-mire:nth-child(2) .txbu {         width: 100%; }
.c-mire:nth-child(2) .txbu figure {  width: 100%; }

@media only screen and (max-width: 599px) { /* MAX ! */
div.txbu figure {    width: 100%; }
div.txbu figure a {  padding: var(--a20) var(--am); }

} @media only screen and (min-width: 600px ) {
div.txbu figure {                 width: 48%; }

div.txbu figure:nth-last-child(1), 
div.txbu figure:nth-last-child(2) { margin-bottom: 0; }

/*-- c-mire -- */
.c-mire:nth-child(2) .txbu {         width: 100%; }
.c-mire:nth-child(2) .txbu figure {  width: 48%; }

} @media only screen and (min-width: 980px ) {
div.txbu figure {                   width: 30%; }
div.txbu figure:nth-last-child(2), 
div.txbu figure:nth-last-child(1) { width: 47%; }

div.txbu figure:nth-last-child(1), 
div.txbu figure:nth-last-child(2) { margin-bottom: 0; }

/*-- c-mire -- */
.c-mire:nth-child(2) .txbu {         width: 100%; }
.c-mire:nth-child(2) .txbu figure {  width: 100%; }

.c-mire:nth-child(2) div.txbu figure:nth-last-child(2) { margin-bottom: var(--am); }

} @media only screen and (orientation: landscape) {}





/*-- ansprechpartner
_________________________ HTML > CSS; [© by elf42] -- */
/* ausserhalb UNTEReinander gestapelt - innerhalb NEBENeinander */
/* wie lsm */


.opc-1 {     width: 100%; margin:0 auto 0 auto; padding: 0;
             display: flex; justify-content: space-between; flex-wrap : wrap; }

.opc-1 figure { width: 100%;  margin-bottom: var(--ac); padding: var(--ab); 
                              background: rgba(var(--f10t),0.3); border: var(--no); }

.opc-1 figure img {          width: 30%; float: left; }
.opc-1 figure figcaption {   width: 66%; float: right; 
                             text-align:left; margin-top: 0; }

.opc-1 figure img {                      padding:0; margin-bottom: 20px; }
.opc-1 figure figcaption p {             padding: 0 0 var(--am) 0; text-align: justify; }
.opc-1 figure figcaption p.xs {          padding: 0 0 var(--am) 0; text-align: left; }
.opc-1 figure figcaption h3 {            padding-top: 0/*var(--ab)*/; }
.opc-1 figure a.btn {                    margin-bottom: 0; }

/*-- c-mire -- */
.c-mire:nth-child(2) .opc-1 figure img, 
.c-mire:nth-child(2) .opc-1 figure figcaption {       flex-direction: column;
                                                      width: 100%; float: left; }

  @media only screen and (max-width: 767px ) { /* MAX ! */
.opc-1 figure {              width: 100%; margin-bottom: var(--ab); padding: var(--am); border-radius: var(--abora); }
.opc-1 figure img, 
.opc-1 figure figcaption {   width: 100%; margin:0; padding:0; }
.opc-1 figure img {                      padding:0; margin-bottom: 20px; }

} @media only screen and (min-width: 768px ) {
.opc-1 figure {              width: 48%; }
.opc-1 figure img, 
.opc-1 figure figcaption {   width: 100%; }
.opc-1 figure img {                      padding:0; margin-bottom: 20px; }

} @media only screen and (orientation: landscape) {}


/*-- seite news/infos -- */

section[data-title="teaser"] p { font-family: "Roboto Bold"; font-weight:500; line-height: 1.8rem; }






/*-- cards
_________________________ HTML > CSS; [© by elf42] -- */
/* ausserhalb 50/50/100 gestapelt - innerhalb UNTEReinander */


.opc-2 {          width: 100%; margin:0; 
                  display: flex; justify-content: space-between; align-items : stretch; 
                  flex-wrap : wrap; 
                  background: var(--tr); }

.opc-2 figure {   margin:0; padding: var(--ab); 
                  margin-block-start:0; margin-block-end:0; margin-inline-start:0; margin-inline-end:0;
                  display: flex; flex-direction: row; flex-wrap: wrap; align-content: stretch;
                  overflow:hidden; 
                  background: rgba(var(--f10t),0.3); border: var(--no); }

.opc-2 figure h3 {           width: 100%; padding: var(--ab)  var(--am); 
                             text-align: center; /*color: var(--f02); */font-weight: 600; font-size: 1.4rem; }
.opc-2 figure p.xs {         text-align: center;  }

.opc-2 figure figcaption {    width: 100%; padding: 0/*var(--ab)*/; 
                              text-align: center;  color: var(--ci01); }
.opc-2 figure figcaption p {  text-align: justify; color: var(--m182); }

.opc-2 figure figcaption .btn {               margin-bottom: var(--am); }
.opc-2 figure figcaption .btn::after {        content: " "; } /*  umbruch  */


.opc-2 figure {                margin-bottom: var(--ab); }
/*.opc-2 figure:last-child {     margin-bottom: 0; }*/
.opc-2 figure img,
.opc-2 figure figcaption h3 {  margin-bottom: var(--am); padding:0; }

/*-- c-mire -- */
.c-mire:nth-child(2) .opc-2 figure {   width: 100%; }



  @media only screen and (max-width: 599px ) { /* MAX ! */
.opc-2 {                 flex-direction: column; align-items: center; }
.opc-2 figure {          width: 100%; padding: 0 /*var(--am)*/; }

.opc-2 figure img  {     min-height: 100px; }
} @media only screen and (min-width: 600px ) {
.opc-2 {                 flex-direction: row; flex-wrap: wrap;}
.opc-2 figure {                       width: 48%; }


} @media only screen and (max-width: 979px ) { /* MAX ! */

} @media only screen and (min-width: 980px ) {


} @media only screen and (min-width: 1260px ) {
.opc-2 figure {                       width: 48%; /* width: 32%; */ }
.opc-2 {          justify-content: space-around; }

/*-- c-mire -- */
.c-mire:nth-child(1) .opc-2 figure {  width: 48%; }

} @media only screen and (min-width: 1920px ) {
.opc-2 figure {                       width: 32%; }
/*-- c-mire -- */
.c-mire:nth-child(1) .opc-2 figure {  width: 32%; }

} @media only screen and (orientation: landscape) {}





/*-- profil
_________________________ HTML > CSS; [© by elf42] -- */


.profil {              display: flex; justify-content: space-between; 
                       align-items: stretch; flex-wrap: wrap; 
                       width: 100%; }

.profil div:nth-child(odd) {  width: 25%; margin-bottom: var(--ab); padding: var(--am) var(--am) 0 0; text-align:right; font-weight:700; }
.profil div:nth-child(even) { width: 75%; margin-bottom: var(--ab); padding: var(--am) 0 var(--am) var(--ab); 
                              border-left: 2px solid var(--m212); border-radius:0; align-content: stretch; }

  @media only screen and (max-width: 599px) { /* MAX ! */
.profil {              flex-direction: column; }
} @media only screen and (min-width: 600px) { 
.profil {              flex-direction: row; }
} @media only screen and (orientation: landscape) {}






/*-- accordeon
_________________________ HTML > CSS; [© by elf42] -- */


input[name="acco"] { display:none; }

div.acco {                        position:relative; }
div.acco span {                         z-index:10; }
div.acco label.zu {                     z-index:20; }
div.acco label.auf {                    z-index:30; }
div.acco input.auf:checked ~ label.zu { z-index:30; }
div.acco input.zu:checked ~ label.auf { z-index:30; }

div.acco {             height: auto;
                       margin:0; padding:0; 
                       display: inline-block; cursor: pointer; 
                       text-align:left; color: var(--m82); 
                       background: var(--tr); border: var(--no);
                       transition: 3s all; overflow:hidden; }

span.btn {             width: 99%; margin-bottom: var(--am);  text-align:left; }
div.acco input.auf:checked ~ span.btn {         color: var(--m255); 
                                                background: var(--ci01); border: var(--no); }

span.btn::before, span.btn:visited::before { 
                                                color: var(--ci01); content: "\f107"; font-size: 1.7rem; 
                                                background: var(--tr); border: var(--no); }
div.acco input.auf:checked ~ span.btn::before { color: var(--m255); content: "\f106"; 
                                                background: var(--tr); border: var(--no); }

div.acco label.auf, 
div.acco label.zu {     margin:0; padding:0; 
                        width: 100%; height: 100%; 
                        position:absolute; top: 0; left: 0; 
                        display: block; text-decoration: none; cursor: pointer; }

/* -- */
div.acc {                            max-height: 0;     transition: 2s all; }      /* max-height */
div.acco input.auf:checked~.acc {    max-height: 400px; transition: 2s all; } /* open */






/*-- biga
_________________________ HTML > CSS; [© by elf42] */



/* biga - vor/zurueck */
figure.biga {            display: flex; flex-wrap: nowrap; 
                         justify-content : space-between; align-items : flex-start; 
                         margin:0 0 var(--ab) 0; padding:0; width: 100%;
                         position: relative; display: inline-block;
                         margin-block-start:0; margin-block-end:var(--ab); }


figure.biga a.biga-li {         left:0; }
figure.biga a.biga-re {         right:0; text-align:right; }
figure.biga a.biga-li::before { content: "\f104"; }
figure.biga a.biga-re::after {  content: "\f105"; }

figure.biga a {       position: absolute; z-index:3; width: 47%; margin:0; 
                           font-size: 6rem; font-family: 'FontAwesome'; font-weight:bold; text-decoration:none; 
                           color: rgba(var(--m255t),0.4); background: var(--no); border: var(--no); }
figure.biga a:hover {      color: rgba(var(--m255t),0.8); background: var(--no); border: var(--no); }


  @media only screen and (max-width: 425px ) { 
figure.biga a {           height: 78%; padding: 17% 0.5em; font-size: 3.5rem; }
} @media only screen and (min-width: 426px ) {
figure.biga a {           height: 87%; padding: 20% 0.5em; font-size: 4.5rem; }
} @media only screen and (min-width: 600px ) {
figure.biga a {                        padding: 20% 0.5em; }
} @media only screen and (min-width: 980px ) {
figure.biga a {           height: 89%; padding: 23% 0.5em; font-size: 10rem; }
} @media only screen and (orientation: landscape) {}

span#biga { display:block; }

  @media only screen and (max-width: 1023px ) { /* MAX ! */  /* 979px */
body[id="iza5"] .c-mire:nth-child(1) {  order: 2; }
body[id="iza5"] .c-mire:nth-child(2) {  order: 1; }
} @media only screen and (orientation: landscape) {}


/* biga - kl */

div.biga-kl {          display: flex; justify-content : space-between; align-items : flex-start; flex-wrap: wrap; 
                       margin: 0; padding: 0; background: var(--m255); }

div.biga-kl figure {   position: relative; margin-bottom: var(--a10); padding:0; }
div.biga-kl figure a { position: absolute; z-index:3; width: 100%; height: 98%; margin:0; padding:0; 
                       background: var(--tr); border: var(--no) }
div.biga-kl figure a:hover, div.biga-kl figure a:focus, div.biga-kl figure a:active
                  {    background: var(--tr); border: var(--no) }

body[id$="001"] a[href$="001.htm#biga"], body[id$="002"] a[href$="002.htm#biga"], body[id$="003"] a[href$="003.htm#biga"], body[id$="004"] a[href$="004.htm#biga"], 
body[id$="005"] a[href$="005.htm#biga"], body[id$="006"] a[href$="006.htm#biga"], body[id$="007"] a[href$="007.htm#biga"], body[id$="008"] a[href$="008.htm#biga"], 
body[id$="009"] a[href$="009.htm#biga"], body[id$="010"] a[href$="010.htm#biga"], body[id$="011"] a[href$="011.htm#biga"], body[id$="012"] a[href$="012.htm#biga"] 
                  {    background: rgba(var(--m255t),0.7); border: var(--no); cursor:default; }

@media only screen and (max-width: 425px) {
div.biga-kl figure {               width: 48%; }
div.biga-kl {           padding: var(--am) var(--am) 0 var(--am); }
} @media only screen and (min-width: 426px) {
div.biga-kl figure {               width: 31%; }
div.biga-kl {           padding: var(--am) var(--am) 0 var(--am); }
} @media only screen and (min-width: 600px) {
div.biga-kl figure {               width: 31%; }
div.biga-kl {           padding: 0; }
} @media only screen and (min-width: 768px) {
} @media only screen and (min-width: 980px) {
div.biga-kl figure {               width: 100%; }
} @media only screen and (min-width: 1024px) {
div.biga-kl {           padding: 0; }
} @media only screen and (min-width: 1260px) {
div.biga-kl figure {    width: 48%; }
} @media only screen and (orientation: landscape) {}


/* biga - kl  MITTE */

.c-mi div.biga-kl {          display: flex; justify-content : space-between; align-items : flex-start; flex-wrap: wrap; 
                             margin-bottom: var(--a30); }

.c-mi div.biga-kl figure {   position: relative; margin-bottom: var(--a10); padding:0; }
.c-mi div.biga-kl figure a { position: absolute; z-index:3; width: 100%; height: 100%; margin:0; padding:0; 
                             background: var(--tr); border-bottom: 10px solid var(--tr); }
.c-mi div.biga-kl figure a:hover, div.biga-kl figure a:focus, div.biga-kl figure a:active 
{                           background: var(--tr); border-bottom: 10px solid var(--ci01); }

body[id$="001"] .c-mi a[href$="001.htm#biga"], body[id$="002"] .c-mi a[href$="002.htm#biga"], body[id$="003"] .c-mi a[href$="003.htm#biga"], body[id$="004"] .c-mi a[href$="004.htm#biga"], 
body[id$="005"] .c-mi a[href$="005.htm#biga"], body[id$="006"] .c-mi a[href$="006.htm#biga"], body[id$="007"] .c-mi a[href$="007.htm#biga"], body[id$="008"] .c-mi a[href$="008.htm#biga"], 
body[id$="009"] .c-mi a[href$="009.htm#biga"], body[id$="010"] .c-mi a[href$="010.htm#biga"], body[id$="011"] .c-mi a[href$="011.htm#biga"], body[id$="012"] .c-mi a[href$="012.htm#biga"] 
{                            background: rgba(var(--m255t),0.7); border-bottom: 10px solid var(--ci02); }

@media only screen and (max-width: 599px) {
.c-mi div.biga-kl figure {    width: 31%; }
} @media only screen and (min-width: 600px) {
.c-mi div.biga-kl figure {    width: 16%; }
} @media only screen and (min-width: 768px) {
} @media only screen and (min-width: 980px) {
.c-mi div.biga-kl figure {    width: 16%; }
.c-mi div.biga-kl {    padding: var(--ab) 0 0 0; }
} @media only screen and (orientation: landscape) {}