:root {
}

@font-face {font-family: "RingsideNarrow-normal"; src: url("/THEMES/nea/fonts/ringside/RingsideNarrow-Book.otf") format("opentype"); font-weight: normal; font-style: normal }
@font-face {font-family: "RingsideNarrow-Bold"; src: url("/THEMES/nea/fonts/ringside/RingsideNarrow-Medium.otf") format("opentype"); font-weight: 700; font-style: normal }
@font-face {font-family: "RingsideNarrow-SemiBold"; src: url("/THEMES/nea/fonts/ringside/RingsideNarrow-Semibold.otf") format("opentype"); font-weight: 600; font-style: normal }
@font-face {font-family: "RingsideNarrow-Bolder"; src: url("/THEMES/nea/fonts/ringside/RingsideNarrow-Bold.otf") format("opentype"); font-weight: 700; font-style: normal }
@font-face {font-family: "ChronicleDec-normal"; src: url("/THEMES/nea/fonts/ChronicleDeck/ChronicleDeck-Semibold.otf") format("opentype"); font-weight: normal; font-style: normal }
@font-face {font-family: "ChronicleDec-condensed"; src: url("/THEMES/nea/fonts/ChronicleDeck/ChronicleDeckCond-Semibold.otf") format("opentype"); font-weight: normal; font-style: normal }

.cssanimation { animation-duration: 1s; animation-fill-mode: both; animation-timing-function: ease-in;}
.fadeInBottom { animation-name: fadeInBottom }
@keyframes fadeInBottom {
    from { opacity: 0; transform: translateY(25%); }
    to   { opacity: 1 }
}

body { font: 16px/1.4em "RingsideNarrow-normal", Arial, Helvetica, sans-serif; }
body > header {position: fixed; width: 100%; padding: 17px 10px; gap: 10px; z-index: 2; height: 57px;}
body > header:before {content: " "; width: 100%; height: 100%; position: absolute; top: 0; left: 0;box-shadow: inset 0px -1px 0px #D8E0E8; background-color: #fff; }
body > header .container:before, body > header .container:after {content: initial;}
body > header .container {display: flex; flex-direction: row; justify-content: space-between; align-items: center; }
body > header img { height: 20px; z-index: 2;}
body > header ul {margin-bottom: 0; list-style: none;z-index: 2;}
body > header li { display: inline-block; font-size: 17px;}
body > header li.rm { font-family: "RingsideNarrow-Bold"; padding-right: 1.5em; display: none;}
body > header li.rm a {color: #000;}

body > header:before, body > header .container {transition: all .5s ease-out;}
body > header.slideup:before {top: -200%;}
body > header.slideup .container {margin-top: -200px; }

a.btn-tar,
a.btn-tar:visited,
a.btn-tar:focus,
a.btn-tar:hover { padding: 7px 16px 3px; text-decoration: none; color: #fff; background-color: #0076A8; font-size: 14px; line-height: 1em; text-transform: uppercase; border-radius: 2px; }

hr { border: 1px solid #e8f0f8; }
dt { font-family: "RingsideNarrow-SemiBold", sans-serif; }

.error {color: red;}
.especial { width: fit-content; margin:  0 auto; padding: 6px 10px 6px; color: #fff; background-color: #ED4600; font: 12px/12px "RingsideNarrow-Bold", sans-serif; letter-spacing: -0.01em; text-transform: uppercase; border-radius: 50px;}

.btn-ara,
.btn-ara:visited,
.btn-ara:focus,
.btn-ara:hover,
.btn-m { width: fit-content; color: #fff; background-color: #0076A8; text-transform: uppercase; font-size: 14px; padding: 16px 32px; text-decoration: none; font-family: "RingsideNarrow-SemiBold", sans-serif;}
.btn-m { padding: initial; vertical-align: initial;}
.btn-ara.btn-inv,
.btn-ara.btn-inv:visited,
.btn-ara.btn-inv:focus,
.btn-ara.btn-inv:hover { color: #0076A8; background-color: #fff; border: 1.5px solid #0076A8; font-weight: 350;}
.btn-ara.btn-inv:hover { background-color: #0076A8!important; color: #fff;}

.btn-hover {transition-property: color; transition-duration: .3s; position: relative;color: transparent!important;}
.btn-hover:hover::before {-webkit-transform: scaleX(1); transform: scaleX(1); }
.btn-hover::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00648e;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition-property: transform;
  transition-duration: .3s;
  transition-timing-function: ease-out;
}
.btn-hover::after {
  content: attr(title);
  position: absolute;
  z-index: 2;
  left: 0;
  top: 50%;
  width: 100%;
  height: 100%;
  background-color: transparent;
  color: #fff;
  transform: translate(0, -50%);
  display: flex; align-items: center; justify-content: center;
}

section:not(.oferta, #paper) {min-height: 100vh;}
section:not(#inici) {padding: 3em 0;}

section#inici { background-color: #E9F1F8; text-align: center; height: 100vh;}
section#inici .container {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%;}
section#inici .container:before, section#inici .container:after {content: initial;}
section#inici #itop { height: 80%; display: flex; flex-direction: column; justify-content: center;}
section#inici .especial {margin-top: 5em;}
section#inici h1 { font: 55px/55px "ChronicleDec-condensed", serif; max-width: 10.3em; margin-bottom: 0.4em;}
section#inici .ofertatxt { font-size: 22px; font-family: "RingsideNarrow-Bold", sans-serif;}
section#inici .btn-ara {margin: 0.8em auto 0;}
section#inici #descobreix a {color: #000; font: 14px/14px "RingsideNarrow-Bold", sans-serif; padding: 2.5em 0 3em ; position: relative;}
section#inici #descobreix a:before {
  content: " "; background: transparent url(../img/nou/arrow-d.svg) center 4em no-repeat; position: absolute; top: 0;left: 0; width: 100%; height: 100%;
  animation: slidebottom 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite both;
}
@keyframes slidebottom {
  0% {transform: translateY(0); }
  100% {transform: translateY(8px); }
}

section#digital {padding-top: 6em;}
.pretitol {font-size: 14px; color: #888888; text-transform: uppercase; font-weight: 375;}
.titol {font: 38px/45.6px "ChronicleDec-normal", serif; margin-bottom: 0.4em;}
.postitol {font-size: 18px; line-height: 22px; margin-bottom: 2em;}
.secimg { width: 100%; max-width: 500px; }

section#digital dl { margin: 3em 0 2.5em;}
section#digital dt { font-size: 20px; line-height: 24px; padding-bottom: 0.7em;}
section#digital dd { font-size: 16px; line-height: 19px; padding-bottom: 2.5em;}
section#digital dt:before { content: " "; display: block; width: 100%; height: 2em; background: transparent url(../img/nou/ull.svg) 0 0 no-repeat;}
section#digital div:nth-child(2) dt:before { background-image: url(../img/nou/user.svg);}
section#digital div:nth-child(3) dt:before { background-image: url(../img/nou/mail.svg);}
section#digital div:nth-child(4) dt:before { background-image: url(../img/nou/tag.svg);}
section#digital div:nth-child(4) dd {padding-bottom: 0;}

section#digital ul {list-style: none; padding: 0; margin-top: 2em; }
section#digital ul h4 {font-family: "RingsideNarrow-SemiBold", sans-serif;}
section#digital ul p { padding-right: 1em; }
section#digital ul a.btn-ara { width: 100%; margin-top: 2em; display: block; text-align: center; white-space: nowrap;}

section#interaccio dl { margin: 3em 0 0; }
section#interaccio dl div { margin-bottom: 2em; }
section#interaccio dl div:nth-child(4) {margin-bottom: 0;}
section#interaccio dt, section#interaccio dd { font-size: 16px; line-height: 19px; display: inline;}

section#hemeroteca dl { margin: 3em 0 1em;}
section#hemeroteca dt { font-size: 20px; line-height: 24px; padding-bottom: 0.7em;}
section#hemeroteca dd { font-size: 18px; line-height: 21.6px; }
section#hemeroteca dt:before { content: " "; display: block; width: 100%; height: 2em; background: transparent url(../img/nou/calendar.svg) 0 0 no-repeat;}
section#hemeroteca dl div:nth-child(2) dt:before { background-image: url(../img/nou/clock.svg);}
section#hemeroteca dl div { background-color: #F4F6F8; padding: 26px 24px; border-radius: 8px;}
section#hemeroteca dl div:nth-child(1) {margin-bottom: 2.5em;}

.oferta { background-color: #0076A8; padding: 2em 15px;}
.oferta .container {padding: 24px; margin: 0 auto; background-color: #fff; border-radius: 8px; max-width: 350px;}
.oferta .especial {margin-left: 0;}
.oferta h1, .oferta h2 { font-family: "RingsideNarrow-Bolder" }
.oferta h1 {font-size: 28px; line-height: 32px; }
.oferta h2 {font-size: 41.9px; line-height: 120%; margin-top: 0;}
.oferta a { display: block; margin: 1.5em auto 0em; width: 100%; text-align: center;}

#oferta-btn { visibility: hidden; opacity: 0;
  position: fixed; width: 95%; top: calc(100% - 75px); right: 50%; transform: translateX(50%); max-width: 350px; min-width: 328px;
  transition: opacity 0.5s, visibility 0.5s;  border-radius: 50px; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.25); color: #fff; background-color: #0076A8;
}
#oferta-btn.showb { visibility: visible; opacity: 1; }
#oferta-btn.btn-hover::before, #oferta-btn.btn-hover::after {border-radius: 50px;}
#oferta-btn a {display: flex; flex-direction: row; justify-content: space-between; align-items: center;
  padding: 6px 5px 0 16px; z-index: 4;border-radius: 50px; text-decoration: none; color: #fff
}
#oferta-btn a, #oferta-btn a:visited, #oferta-btn a:focus, #oferta-btn a:hover { }
#oferta-btn a:hover {background-color: #00648e;}
#oferta-btn span {margin-top: -8px; font: 22px/22px "RingsideNarrow-SemiBold", sans-serif; }
#oferta-btn img {height: 50px;}

section#paper .container { padding: 26px 24px; margin: 1em 15px; background-color: #F4F6F8; border-radius: 8px;}
section#paper #cos { max-width: 22em; }
section#paper .postitol {margin-bottom: 1em;}
section#paper dl {margin: 2em 0 0.5em ;}
section#paper dt, section#paper dd { font-size: 16px; line-height: 19.2px; }
section#paper dt { padding-bottom: 0.7em; }
section#paper dd { padding-bottom: 2.5em; }
section#paper dt:before { content: " "; display: block; width: 100%; height: 2em; background: transparent url(../img/nou/suplement.svg) 0 0 no-repeat;}
section#paper dl div:nth-child(2) dt:before { background-image: url(../img/nou/targeta.svg);}
section#paper a.btn-ara { width: 100%; margin-bottom: 0.5em; display: block; text-align: center; white-space: nowrap; background-color: transparent;}

footer#contacte-peu { text-align: center; padding: 0 15px; }
footer#contacte-peu > p.text2-b {max-width: 350px; margin: 0 auto 1em;}
footer#contacte-peu h2 {font: 28px/32px "RingsideNarrow-Bold", sans-serif; }
footer#contacte-peu .text2-b strong { font-weight: normal; }
footer#contacte-peu #ftrucada {max-width: 970px; margin: 0 auto 2em; }
footer#contacte-peu #ftrucada h2 { font-size: 16px; margin: 0 0 1em 0; }
footer#contacte-peu #ftrucada input { display: inline-block; width: 90%; max-width: 350px; margin-bottom: 15px; border-radius: 0; height: 47px; }
footer#contacte-peu #ftrucada input:last-of-type {margin-right: 0;}
footer#contacte-peu #ftrucada input:last-of-type:hover { background-color: #00648e; color: #fff; }
footer#contacte-peu #ftrucada p.legal { margin: 1em auto 0; max-width: 350px; font-size: 12px; line-height: 1.3em;}
footer#contacte-peu .destacat { width: 100%; margin-bottom: 0.5em; display: block;}
footer#contacte-peu .destacat:after {padding-bottom: 1em; content: " "; display: block;}

footer#recomanador {text-align: center; margin-bottom: 4em; }
footer#recomanador p {margin: 0.5em auto 0; padding: 1.8em 0 1em 0; max-width: 350px; border-top: 1px solid #D8E0E8;}
footer#recomanador .btn-ara {width: 90%; max-width: 350px; height: 47px; padding: 12px;display: inline-block;}

footer.oferta {text-align: center; color: #fff; }
footer.oferta .container {max-width: 370px;}
footer.oferta > h1 { font-family: "RingsideNarrow-Bold"; }
footer.oferta .container { display: flex; flex-direction: column; margin-top: 1.8em; text-align: left; color: #000;}
footer.oferta .especial {margin: 0;}
footer.oferta.col2 div { border-bottom: 1px solid #D8E0E8; padding-bottom: 1.7em;}
footer.oferta .container ul { display: flex; flex-direction: column; justify-content: space-between; list-style:none; min-height: 285px; margin-top: 1.5em; margin-bottom: 0;padding: 0 5px;}
footer.oferta .container li {margin-left: 30px}
footer.oferta .container li:before { content: " "; margin-left: -40px;padding-left: 30px; padding-right: 10px; background: transparent url("/THEMES/nea/img/icons/check.svg") left center no-repeat; background-size: 30px; }
footer.oferta .btn-ara {width: 100%; height: 47px; padding: 12px}

footer#peup {margin-bottom: 1em; border-top: 1px solid #D8E0E8; text-align: center; }
footer#peup img {margin: 24px auto 30px; height: 16px; width: auto;}
footer#peup ul {list-style: none; padding: 0;}
footer#peup li { display: inline-block; padding-right: 1em; }
footer#peup li:last-of-type {padding-right: 0;}
footer#peup li a, footer#peup li a:visited, footer#peup li a:focus {text-decoration: none; color: #000;}
footer#peup li a:hover {text-decoration: underline;}
footer#peup #links {font-weight: bold;font-size: 16px;}
footer#peup #peu {font-size: 12px; color: #888;}
footer#peup #peu li a, footer#peup #peu li a:visited, footer#peup #peu li a:focus {color: #888;}

@media (min-width: 540px) {
  body > header {height: 76px;}
  section#inici .especial {margin-top: 0;}
  section#inici h1 { font: 70px/70px "ChronicleDec-condensed", serif;}

  section#digital dl {display: flex; flex-direction: row; justify-content: space-between; gap: 1em; margin: 3em 0 2.5em; flex-wrap: wrap;}
  section#digital dl div { width: 45%; }
  section#digital dd { padding-bottom: 0;}
  section#digital ul {display: flex; flex-direction: row; justify-content: space-between; align-items: center;}
  section#digital ul a.btn-ara {margin-top: 0;}

  section#interaccio dl {display: flex; flex-direction: row; justify-content: space-between; gap: 1em; margin: 3em 0 1em; flex-wrap: wrap;}
  section#interaccio dl div { width: 45%; }

  section#hemeroteca dl {display: flex; flex-direction: row; justify-content: space-between; gap: 2em; margin: 3em 0 1em; }
  section#hemeroteca dl div { width: 50%; }
  section#hemeroteca dl div:nth-child(1) {margin-bottom: 0}

  .oferta { padding: 3em 15px; }
  .oferta .container {padding: 48px; text-align: center; max-width: 100%; margin: 0 15px;}
  .oferta .especial {margin-left: auto;}
  .oferta a { width: fit-content; }

  #oferta-btn { max-width: 360px; top: calc(100% - 100px);}
  #oferta-btn a {padding: 9px 8px 0 25px; }
  #oferta-btn img {height: 60px;}

  footer#contacte-peu #ftrucada {max-width: 660px;}
  footer#contacte-peu #ftrucada input { width: 30%; margin-right: 0.7em; max-width: initial; margin-bottom: 0;}
  footer#contacte-peu #ftrucada p.legal {max-width: initial;}
  footer#contacte-peu > p.text2-b {max-width: initial; margin-bottom: 0.5em;}
  footer#recomanador p {max-width: initial;}
  footer#recomanador .btn-ara {max-width: 215px;}
  footer#peup img {height: 19px;}
}

@media (min-width: 768px) {
  body > header {padding: 24px;}
  body > header img { height: 28px; }
  body > header li.rm {display: initial;}

  section:not(#inici) {padding: 5em 0;}

  section:not(#paper) header {text-align: center;}
  section:not(#paper) .titol {font: 60px/72px "ChronicleDec-normal", serif; margin-bottom: 0.4em;}

  section#digital dl {gap: 1em; flex-wrap: nowrap;}
  section#digital dl div { width: 25%; }

  section#interaccio dl {gap: 2em; flex-wrap: nowrap;}
  section#interaccio dl div { width: 25%; }

  section#paper .container { margin: 15px auto; background: #F4F6F8 url(../img/nou/paper_gran.png) 0 center no-repeat; background-size: 48%;}
  section#paper #cos {float: right; }
  section#paper .secimg {display: none;}

  .oferta .container {margin: 0 auto;}
  #oferta-btn { right: 1.5%; transform: none;}

  footer#contacte-peu #ftrucada {max-width: 750px;}
  footer#contacte-peu #ftrucada input { width: 32%; }

  footer.oferta.col1 .container { max-width: 90%; text-align: center;}
  footer.oferta.col1 .especial {margin:  0 auto}
  footer.oferta.col1 .btn-ara {display: block; margin: 1.5em auto 0em; width: fit-content; padding: 16px 32px;}

  footer.oferta.col2 .container { flex-direction: row; max-width: initial; }
  footer.oferta.col2 .container div, footer.oferta.col2 .container ul {width: 50%; }
  footer.oferta.col2 .container div { padding-right: 48px; border-right: 1px solid #D8E0E8; border-bottom: none; padding-bottom: 0;}
  footer.oferta.col2 .container ul { padding: 0 0 0 48px; min-height: initial; margin-top: initial;}

  footer#peup {text-align: left; border-top: none;}
  footer#peup img {margin: 24px 0 22px 0;}
  footer#peup #peu {border-top: 1px solid #D8E0E8; padding-top: 15px;}
}

@media (min-width: 992px) {
  section#digital dl {gap: 5em; }
  section#interaccio dl {gap: 4em; }
  section#hemeroteca dl { max-width: 90%; margin: 3em auto 1em;}
  section#paper .container { padding: 48px; background-size: initial; background-position: 5% center;}
  section#paper #cos {max-width: 25em;}
  footer#contacte-peu #ftrucada { max-width: 970px; }
}

@media (min-width: 1200px) {
  section#paper .container {background-position: 10% center;}
}


.balears section#hemeroteca dl {display: flex; flex-direction: row; justify-content: center; gap: 2em; margin: 3em auto 1em; }