/* - ++resource++collective.enlacesConTexto.static/enlacesConTexto.css - */
/* https://www.once.es/grupo-social-once/portal_css/++resource++collective.enlacesConTexto.static/enlacesConTexto.css?original=1 */
@charset "UTF-8";
.element-invisible {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
/* */
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
height: 1px;
width: 1px; }
.element-oculto {
display: none;
visibility: hidden; }
.hl-bottom-to-top {
color: #333;
background-color: white;
position: relative;
transition: color 300ms ease;
z-index: 1; }
.hl-bottom-to-top span {
z-index: 2;
position: relative; }
.hl-bottom-to-top:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 100%;
background: #007b22;
transition: height 300ms ease;
z-index: 0; }
.alternativa1 .hl-bottom-to-top:after {
background: #284766; }
.hl-bottom-to-top:hover, .hl-bottom-to-top:active, .hl-bottom-to-top:focus {
color: white; }
@media (forced-colors: active) {
.hl-bottom-to-top:hover, .hl-bottom-to-top:active, .hl-bottom-to-top:focus {
outline: 0.15rem solid yellow; } }
.focusOwn.hl-bottom-to-top {
color: white; }
.hl-bottom-to-top:hover:after, .hl-bottom-to-top:focus:after {
height: 100%; }
.focusOwn.hl-bottom-to-top:after {
height: 100%; }
.hl-bottom-to-top-simplelink {
color: #333;
background-color: white;
position: relative;
transition: color 300ms ease;
z-index: 1;
z-index: 1;
background-color: transparent; }
.hl-bottom-to-top-simplelink span {
z-index: 2;
position: relative; }
.hl-bottom-to-top-simplelink:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 100%;
background: #007b22;
transition: height 300ms ease;
z-index: 0; }
.alternativa1 .hl-bottom-to-top-simplelink:after {
background: #284766; }
.hl-bottom-to-top-simplelink:hover, .hl-bottom-to-top-simplelink:active, .hl-bottom-to-top-simplelink:focus {
color: white; }
@media (forced-colors: active) {
.hl-bottom-to-top-simplelink:hover, .hl-bottom-to-top-simplelink:active, .hl-bottom-to-top-simplelink:focus {
outline: 0.15rem solid yellow; } }
.focusOwn.hl-bottom-to-top-simplelink {
color: white; }
.hl-bottom-to-top-simplelink:hover:after, .hl-bottom-to-top-simplelink:focus:after {
height: 100%; }
.focusOwn.hl-bottom-to-top-simplelink:after {
height: 100%; }
.hl-bottom-to-top-simplelink:after {
background-color: #007b22;
z-index: -1; }
.hl-bottom-to-top-simplelink:hover, .hl-bottom-to-top-simplelink:active, .hl-bottom-to-top-simplelink:focus {
text-decoration: none;
background-color: transparent; }
@media (forced-colors: active) {
.hl-bottom-to-top-simplelink:hover, .hl-bottom-to-top-simplelink:active, .hl-bottom-to-top-simplelink:focus {
outline: 0.15rem solid yellow; } }
.hl-bottom-to-top-inverted {
color: #333;
background-color: white;
position: relative;
transition: color 300ms ease;
z-index: 1;
color: white;
background-color: transparent;
z-index: 1; }
.hl-bottom-to-top-inverted span {
z-index: 2;
position: relative; }
.hl-bottom-to-top-inverted:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 0;
width: 100%;
background: #007b22;
transition: height 300ms ease;
z-index: 0; }
.alternativa1 .hl-bottom-to-top-inverted:after {
background: #284766; }
.hl-bottom-to-top-inverted:hover, .hl-bottom-to-top-inverted:active, .hl-bottom-to-top-inverted:focus {
color: white; }
@media (forced-colors: active) {
.hl-bottom-to-top-inverted:hover, .hl-bottom-to-top-inverted:active, .hl-bottom-to-top-inverted:focus {
outline: 0.15rem solid yellow; } }
.focusOwn.hl-bottom-to-top-inverted {
color: white; }
.hl-bottom-to-top-inverted:hover:after, .hl-bottom-to-top-inverted:focus:after {
height: 100%; }
.focusOwn.hl-bottom-to-top-inverted:after {
height: 100%; }
.hl-bottom-to-top-inverted:after {
background-color: white;
z-index: -1; }
.hl-bottom-to-top-inverted:hover, .hl-bottom-to-top-inverted:active, .hl-bottom-to-top-inverted:focus {
color: #007b22;
text-decoration: none; }
@media (forced-colors: active) {
.hl-bottom-to-top-inverted:hover, .hl-bottom-to-top-inverted:active, .hl-bottom-to-top-inverted:focus {
outline: 0.15rem solid yellow; } }
.hl-left-to-right {
color: #333;
position: relative;
transition: color 300ms ease;
z-index: 0; }
.hl-left-to-right span {
z-index: 2;
position: relative; }
.hl-left-to-right:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 0;
background: #007b22;
transition: width 300ms ease;
z-index: -1; }
.alternativa1 .hl-left-to-right:after {
background: #284766; }
.hl-left-to-right:hover, .hl-left-to-right:active, .hl-left-to-right:focus {
color: white;
text-decoration: none; }
@media (forced-colors: active) {
.hl-left-to-right:hover, .hl-left-to-right:active, .hl-left-to-right:focus {
outline: 0.15rem solid yellow;
z-index: 2; } }
.focusOwn.hl-left-to-right {
color: white; }
.hl-left-to-right:hover:after, .hl-left-to-right:focus:after {
width: 100%; }
.focusOwn.hl-left-to-right:after {
width: 100%; }
.hl-right-to-left {
color: #333;
position: relative;
transition: color 300ms ease;
z-index: 0; }
.hl-right-to-left span {
z-index: 2;
position: relative; }
.hl-right-to-left:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 0;
background: #007b22;
transition: width 300ms ease;
z-index: -1; }
.alternativa1 .hl-right-to-left:after {
background: #284766; }
.hl-right-to-left:hover, .hl-right-to-left:active, .hl-right-to-left:focus {
color: white;
text-decoration: none; }
@media (forced-colors: active) {
.hl-right-to-left:hover, .hl-right-to-left:active, .hl-right-to-left:focus {
outline: 0.15rem solid yellow;
z-index: 2; } }
.focusOwn.hl-right-to-left {
color: white; }
.hl-right-to-left:hover:after, .hl-right-to-left:focus:after {
width: 100%; }
.focusOwn.hl-right-to-left:after {
width: 100%; }
.hl-right-to-left:after {
right: 0;
left: auto; }
.hl-border-primary {
transition: all 100ms ease; }
.hl-border-primary:hover, .hl-border-primary:active, .hl-border-primary:focus {
outline: 0.15rem solid white; }
.hl-border-primary:hover img, .hl-border-primary:active img, .hl-border-primary:focus img {
outline: none; }
.hl-border-image-grayscale {
transition: all 100ms ease;
display: flex;
padding: 0.5em; }
.hl-border-image-grayscale img {
width: 100%;
transition: all 300ms ease; }
.hl-border-image-grayscale:hover, .hl-border-image-grayscale:active, .hl-border-image-grayscale:focus {
outline: 0.15rem solid #007b22;
border-color: transparent; }
.hl-border-image-grayscale:hover img, .hl-border-image-grayscale:active img, .hl-border-image-grayscale:focus img {
outline: none;
filter: grayscale(100%); }
.hl-button {
background-color: #007b22;
border-radius: .375rem;
color: white;
border: none;
padding: 0.6em 2em;
transition: all 300ms ease; }
.hl-button:hover, .hl-button:active, .hl-button:focus {
outline: 0.15rem solid #007b22;
background-color: white;
color: #007b22 !important; }
@media (forced-colors: active) {
.hl-button {
border: 0.1rem solid yellow; } }
.hl-inputtext {
background-color: white;
border-radius: 0.375rem;
border: none;
padding: 0.6rem .75rem;
box-shadow: 0 0 0 0.3rem transparent, inset 0 0 0 0.1rem #333;
transition: all 100ms ease; }
.hl-inputtext:hover, .hl-inputtext:active, .hl-inputtext:focus {
outline: 0.15rem solid #007b22;
box-shadow: inset 0 0 0 0.15rem #eee, inset 0 0 0 0.3rem #333; }
@media (forced-colors: active) {
.hl-inputtext {
border: 0.1rem solid yellow; } }
.hl-sg {
transition: all 100ms ease;
display: inline-block;
border-radius: 0.15rem;
padding: 0.2rem 0.5rem; }
.hl-sg label,
.hl-sg input {
vertical-align: middle; }
.hl-sg label:first-child {
margin-left: 0;
margin-right: 0.5em; }
.hl-sg input:last-child {
margin-right: 0; }
.hl-sg:hover, .hl-sg:active, .hl-sg:focus {
outline: 0.15rem solid #007b22; }
.hl-sg input[type="radio"]:hover, .hl-sg input[type="radio"]:active, .hl-sg input[type="radio"]:focus,
.hl-sg input[type="checkbox"]:hover,
.hl-sg input[type="checkbox"]:active,
.hl-sg input[type="checkbox"]:focus {
outline: none; }
/* */
/* */
/* */
#portal-header + #enlacesConTextoViewlet {
margin-top: 1em; }
/* */
#enlacesConTextoViewlet ul {
text-align: center;
max-width: 950px; }
#enlacesConTextoViewlet ul li {
display: inline-block;
text-align: center;
width: 10.5em;
margin: 0 1.8em 1em 1.8em;
vertical-align: top; }
#enlacesConTextoViewlet ul li a {
transition: all 100ms ease;
display: flex;
padding: 0.5em;
display: block;
border-radius: 1em;
padding: 1em 0.5em; }
#enlacesConTextoViewlet ul li a img {
width: 100%;
transition: all 300ms ease; }
#enlacesConTextoViewlet ul li a:hover, #enlacesConTextoViewlet ul li a:active, #enlacesConTextoViewlet ul li a:focus {
outline: 0.15rem solid #007b22;
border-color: transparent; }
#enlacesConTextoViewlet ul li a:hover img, #enlacesConTextoViewlet ul li a:active img, #enlacesConTextoViewlet ul li a:focus img {
outline: none;
filter: grayscale(100%); }
#enlacesConTextoViewlet ul li a img {
width: 52%; }
#enlacesConTextoViewlet ul li img {
width: 5em; }
#enlacesConTextoViewlet ul li > img {
padding: 1em 0.5em 0 0.5em; }
#enlacesConTextoViewlet ul li span.enlaceConTextoItem-title {
color: black;
line-height: 1em;
margin: 1em 0 0;
font-size: 0.95em;
font-weight: bold;
display: block;
letter-spacing: normal; }
#enlacesConTextoViewlet ul li span {
font-size: 0.95em;
display: block; }
/* */
/* */
/* */
@media screen and (max-width: 1024px) {
.escritorio #enlacesConTextoViewlet ul li {
margin: 0 1.2em 1em 1.2em; } }
@media screen and (max-width: 1000px) {
.escritorio #enlacesConTextoViewlet ul li {
margin: 0 1em 1em 1em; } }
@media screen and (max-width: 860px) {
.escritorio #enlacesConTextoViewlet ul li {
margin: 0 0.5em 1em 0.5em; } }
@media screen and (max-width: 767px) {
.escritorio #enlacesConTextoViewlet ul li {
margin: 0 2em 1em 2em; } }
/* */
/* */
/* */
.mobile #enlacesConTextoViewlet ul li {
margin: 0 0.3em 1em 0.3em;
width: 10em; }
.mobile #enlacesConTextoViewlet ul li:nth-child(odd) {
margin-left: 0; }
.mobile #enlacesConTextoViewlet ul li:nth-child(even) {
margin-right: 0; }
@media screen and (max-width: 480px) {
.escritorio #enlacesConTextoViewlet ul li {
margin: 0 1em 1em 1em; } }
/* */
@media screen and (max-width: 320px) {
.mobile #enlacesConTextoViewlet ul li {
width: 8em; } }
/* */