/* - tarjetamas.css - */
@media screen {
/* https://tarjeta.once.es/portal_css/tarjetamas.css?original=1 */
body{
background-color:white !important;
color:#333;
}
img{
max-width:100%;
}
#content{
max-width:94%;
margin:0 auto;
}
.template-tarjeta-mas-home-view #content{
max-width:100%;
margin:0 auto;
}
.template-tarjeta-mas-home-view .ventajas{
background-size:cover !important;
padding:2rem 2%;
float:left;
width:96%;
}
#portal-breadcrumbs {
padding: 2.2em 0 2.2em 0;
margin: 0;
max-width: 80%;
}
#portal-column-content{
background: url("banda.png") no-repeat top left;
position:relative;
}
@media (min-width:990px){
#portal-columns .wrap{
position:relative;
}
#portal-column-content::before{
content:"";
background:url("tarjeta.png") no-repeat center center;
border-radius:6px;
box-shadow:0 3px 5px rgba(1,1,1,0.3);
transform: rotate(5deg);
display:block;
height:109px;
width:174px;
position:absolute;
right:1rem;
top:-1rem;
}
}
.mobile #portal-column-content::before{
content:"";
background:url("banda_right.png") no-repeat center center;
display:block;
height:34px;
width:12px;
position:absolute;
right:0;
top:0;
}
#portal-logo {
margin-bottom: 0.5em;
}
#portal-logo a{
width: 14.5em;
}
.mobile #portal-logo {
margin:0 0 1rem 0;
width:100%;
}
.mobile #portal-logo a{
width: 16em;
margin:0 auto;
}
.mobile #portal-personaltools{
padding:0;
}
.template-tarjeta-mas-home-view #portal-column-content{
background-image:none;
}
.template-tarjeta-mas-home-view #portal-column-content::before{
display:none;
}
.ventaja{
width:46%;
margin-right:1%;
margin-left:2%;
background-color:white;
border-radius:10px;
border:2px solid #626165;
float:left;
margin-bottom:2rem;
min-height: 180px;
}
.ventaja:nth-child(4),
.ventaja:nth-child(6),
.ventaja:nth-child(8),
.ventaja:nth-child(10),
.ventaja:nth-child(12),
.ventaja:nth-child(14),
.ventaja:nth-child(16),
.ventaja:nth-child(18){
clear:both;
}
.ventaja .row{
display:flex;
height:100%;
flex-wrap:wrap;
}
.ventaja .ventaja-left{
width:100%;
}
.ventaja .ventaja-right{
width:100%;
}
@media (min-width:600px){
.ventaja .ventaja-left{
width:45%;
}
.ventaja .ventaja-right{
width:55%;
}
}
.ventaja .ventaja-left{
order:1;
}
.ventaja .ventaja-right{
order:2;
}
.ventaja img{
border-radius: 8px;
margin: 2% 0 2% 2%;
max-width:98%;
height:auto;
}
@media (max-width:992px){
.ventaja img{
width: 90%;
margin: 5%;
}
}
@media (max-width:500px){
.ventaja{
width:96%;
margin-right:2%;
margin-left:2%;
float:none;
display:inline-block;
}
}
#content .ventaja p{
padding-left:2rem;
}
#content .ventaja a{
color:#007c0c;
font-size:1rem;
font-weight:300;
text-decoration:none;
display:inline-block;
padding:2px 5px;
font-weight:600;
}
#content .ventaja a:hover, #content .ventaja a:focus{
background-color:#007c0c;
color:white !important;
}
#content .ventaja h2 {
padding:2rem 2rem 0 2rem;
font-size:1.2rem !important;
font-weight:300;
line-height:1.4rem;
}
.ventajas h1 {
text-align: center;
font-size: 2rem !important;
font-weight: 400;
line-height: 1.2em;
margin: 0;
letter-spacing: 0.04em;
text-transform: uppercase;
text-align: center;
color: black !important;
padding: 1.6em 0 1.6em 0 !important;
}
p.mas-ventajas{
text-align:center;
clear:both;
}
div.listingBar{
clear:both;
margin-top:2rem;
padding-top:2rem;
}
#content div.listingBar a:visited{
color:white;
}
#content div.listingBar a:hover,
#content div.listingBar a:focus{
color:#333 ;
}
.altocontraste #content div.listingBar a:hover,
.altocontraste #content div.listingBar a:focus{
color:white;
}
#content p.mas-ventajas a{
color: white !important;
border: 1px solid #626165;
padding: 10px 15px;
background-color: #626165;
font-weight: 300;
font-size: 1rem;
text-decoration:none !important;
text-transform:uppercase;
}
#content  p.mas-ventajas a:hover, #content  p.mas-ventajas a:focus {
text-decoration: none;
background-color: rgba(1, 1, 1, 1);
color: white !important;
}
.ficha{
background:url("back_ficha-desktop.png") no-repeat bottom right;
border-radius:10px;
box-shadow:0 2px 5px rgba(1,1,1,.3);
padding:4%;
border:1px solid #626165;
margin-bottom:2rem;
}
@media (max-width:815px){
.ficha{
background-size:40%;
}
}
.ficha h1{
color:black;
font-weight:600;
}
.ficha img{
max-width:40%;
height:auto;
border:5px solid white;
border-radius:6px;
box-shadow:0 3px 5px rgba(1,1,1,0.5);
transform: rotate(5deg);
float:right;
background-color:white;
}
.ficha .description, .ficha .datos-interes, .ficha h1{
width:55%;
display:inline-block
}
@media (max-width:620px){
.ficha .description, .ficha .datos-interes, .ficha h1{
width:100%;
}
.ficha img{
max-width:80%;
float:none;
margin:0 10% 2rem 10%;
}
.ficha{
background-size:20%;
}
}
.ficha .datos-interes{
border-top:1px dashed #626165;
padding:1rem 0;
border-bottom:1px dashed #626165;
}
.validez{
color:black;
}
.validez::before{
content:"";
height:6px;
width:6px;
float: left;
margin-top: 13px;
margin-right: 10px;
background-color:#FE402B;
}
#portal-header-titleImageSS .titleImageSS-box-image{
background-color:transparent !important;
}
#portal-header-titleImageSS .titleImageSS-box-texts .box-texts-wrapper .wrap-content {
max-width: 32em;
margin-left: 2rem;
}
#buttonMenu{
display:none;
}
.mobile #buttonMenu{
display:inline;
}
.userrole-anonymous.mobile #buttonMenu{
display:none;
}
.mobile #portal-header-titleImageSS .titleImageSS-box-texts .box-texts-wrapper .wrap-content {
max-width: 32em;
margin-left: 0;
margin-top:8rem;
font-size:2rem;
}
.mobile #portal-header-titleImageSS .titleImageSS-box-image img {
width: 100%;
}
.mobile #portal-header-titleImageSS::before {
display:none;
}
.mobile .ficha{
background:url("back_ficha-mobile.png") no-repeat top left;
padding:1rem;
}
.mobile .ficha img{
max-width:90%;
margin:1rem 0 2rem 0;
}
.mobile .ficha .description, .ficha .datos-interes, .ficha h1{
max-width:100%;
}
.mobile .template-tarjeta-mas-home-view #portal-columns #portal-column-content{
padding:0;
}
.mobile .ventaja{
width:90%;
margin:0 5% 1rem 5%;
float:none;
display:inline-block;
}
.mobile .mas-ventajas{
margin-top:3rem;
}
.mobile #content{
width:100%;
}
.altocontraste{
background-color:black !important;
}
.altocontraste .ventaja{
background-color:black;
}
.altocontraste .ficha h1 {
color: white;
}
.altocontraste .validez {
color: white;
}
.altocontraste.template-tarjeta-mas-home-view .ventajas{
background-color:black;
background-image:none !important;
}
.altocontraste.template-tarjeta-mas-home-view .ventajas h1{
color: white !important;
}
.altocontraste .ventajas h1{
color: white;
}
.altocontraste h1{
color:white !important;
}
.altocontraste #portal-column-content {
background: url("banda_altocontraste.png") no-repeat top left;
}
.altocontraste #content .ventaja a:hover, .altocontraste #content .ventaja a:focus {
background-color: black;
color: white !important;
}
.altocontraste .ficha{
background-image:none;
}
#content input[type="text"]:hover, #content input[type="text"]:active, #content input[type="text"]:focus, input[type="text"].sffocus, #content input[type="password"]:hover, #content input[type="password"]:active, #content input[type="password"]:focus, input[type="password"].sffocus, input#userid:hover, input#userid:active, input#userid:focus, input#userid.sffocusSe, #content textarea:hover, #content textarea:active, #content textarea:focus, textarea.sffocus, #content select:hover, #content select:active, #content select:focus, select.sffocusSe {
border:1px solid black;
}
#content textarea {
font-size:100%;
font-family: "Avenir W01", Arial, FreeSans, sans-serif;
}
.tarjetavirtual{
background:url("ic_mancha.png") no-repeat top left, url("ic_mancha_1.png") no-repeat bottom right;
background-size:100%;
display:inline-block;
padding:1rem;
text-align:center;
padding:5rem 2rem 2rem 2rem;
}
.usertarjeta{
background-color:#003f13;
padding:1rem;
border-radius: 1rem;
margin-bottom:1.5rem;
color:white;
text-align:left;
}
.tarjetatitle{
text-align:left;
color:white;
font-weight:bold;
}
.usertarjeta p{
margin-bottom:0 !important;
}
.blackbutton {
background-color: black;
display: inline-block;
color: white !important;
padding: 1rem;
border-radius: 6px;
font-weight: 300 !important;
}
.blackbutton:hover{
background-color: #333;
}
.blackbutton img {
margin-right: 0.5rem;
}

}