:root { --cert-gap: calc(var(--mp) * 1); --cert-cols-landscape: 5; --cert-cols-portrait: 3; } .certifications_in_footer { display: flex; flex-wrap: wrap; gap: var(--cert-gap); margin-top: var(--cert-gap); margin-bottom: var(--cert-gap); z-index: 100; } .certifications_in_footer .cert_button { flex: 1 1 calc((100% / var(--cert-cols-landscape)) - var(--cert-gap)); display: flex; align-items: center !important; align-content: center !important; justify-items: center !important; justify-content: center !important; border: 1pt solid var(--elements-border-color-trans); padding: calc(var(--mp) * 1); border-radius: calc(var(--mp) * .5); opacity: .5; cursor: pointer; transition: var(--transition-fast); hyphens: auto !important; overflow: hidden; height: 100%; min-height: 4rem; box-sizing: border-box; } .certifications_in_footer .cert_button:hover { opacity: .75; } .certifications_in_footer .cert_button_active, .certifications_in_footer .cert_button:active { opacity: 1; border: 1pt solid var(--elements-fg-color-flat); } .cert_contents { border-radius: calc(var(--mp) * .5); display: block !important; text-align: left !important; hyphens: auto !important; border: 1pt solid var(--elements-border-color-trans); padding: calc(var(--mp) * 3); font-size: 1rem; max-height: 100vh; opacity: 1; z-index: 1000; box-shadow: var(--box-shadow-inset); box-sizing: border-box !important; overflow-y: visible; overflow-x: hidden; text-align: left; text-indent: 1rem; } .cert_contents, .cert_contents * { transition: var(--transition-fast); } .cert_hide { transition: var(--transition-fast); visibility: hidden !important; max-height: 0px !important; opacity: 0 !important; margin-top: 0px !important; margin-bottom: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; border-width: 0px; overflow-y: visible; overflow-x: hidden; } .cert_hide, .cert_hide p { transform: scale(.9); } .cert_hide * { transform-origin: 0 0; } .cert_contents p { display: inline !important; text-align: left !important; } .cert_contents * { text-align: left !important; } .cert_contents h1, .cert_contents h2 { column-span: all !important; hyphens: none !important; border-bottom: 1px dotted var(--elements-border-color-trans); font-weight: 500; margin: var(--mp) !important; display: flex; align-items: center !important; align-content: center !important; justify-items: center !important; justify-content: flex-start !important; } .cert_contents i { display: block; } @media screen and (min-width:721px) { .cert_contents { columns: 3; column-fill: balance; column-gap: 3em; column-rule-width: 1px; column-rule-style: dotted; column-rule-color: var(--elements-border-color-trans); } } @media screen and (max-width:720px) { .certifications_in_footer .cert_button { flex: 1 1 calc((100% / var(--cert-cols-portrait)) - var(--cert-gap)); padding: calc(var(--mp) * .5); } } .certification_logo_img i { background-color: var(--elements-fg-color-trans); } .certification_logo_img i, .certification_logo_img { display: flex; --cert-logo-size: 10rem !important; width: var(--cert-logo-size); height: var(--cert-logo-size); border: 1pt solid var(--elements-fg-color-trans); border-radius: calc(var(--mp) * .5); } .certification_logo_img * { margin: 0px; padding: 0px; } .certification_logo_img { margin: auto; margin-top: 1rem; float:none; clear:both; } span.actor{ display:none; }