/*
border-bottom: 1px solid #3a4249
background: var(--acte-bgcolor);
*/
:root {
  --top-bg           : #192028;
  --main-bg          : #10151a;
  --bordercol        : #3a4249;
  --dorat            : #e0ca82;
  --hover            : #BF953F;
  --header-height    : 65px;
  --footer-height    : 110px;
  --global-min-width : 400px;
  --global-max-form  : 400px;
}

@font-face {font-family: "RingsideNarrow-Bold"; src: url("THEMES/nea/fonts/ringside/RingsideNarrow-Medium.otf") format("opentype"); font-weight: normal; font-style: normal }
@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-light"; src: url("THEMES/nea/fonts/ringside/RingsideNarrow-Light.otf") format("opentype"); font-weight: normal; font-style: normal }

html {position: relative; min-height: 100%; }
body { margin-bottom: var(--footer-height); min-width: var(--global-min-width) }
body, .formulari-wrapper {font-family: "RingsideNarrow-normal", Arial, Helvetica, sans-serif;}

body, header#top .navbar  {background-color: var(--main-bg); color: #fff}
header#top .navbar { display: flex; min-height: 64px; min-width: var(--global-min-width); background-color: var(--top-bg); border-bottom-color: var(--bordercol);}
header#top .navbar-header {float: none;padding: 8px 0; text-align: center;}
header#top.openb .navbar-header {text-align: left;}
.navbar-header img {height: 45px; width: auto; padding: 5px 18px; }
.openb .navbar-header {background: transparent url(../img/close.png) calc(100% - 20px) 50% no-repeat;}

#top {position: fixed; width: 100%; z-index: 10; min-width: var(--global-min-width)}
.infop { background-color: var(--top-bg);padding-top: 30px; padding-bottom: 1em;margin-top: 13px; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.infop.oferta {padding-top: 60px;}
.infop.oferta:before { position: absolute;content: attr(data-oferta); width: 100%; top: 14px; left: 0; padding: 4px 0; text-align: center; background-color: #E7344C;}
.avantatges {position: relative;}
.avantatges h4, .avantatges h5 {font-family: RingsideNarrow-Bold; }
.avantatges h5 { font-size: 16px; font-weight: bold; line-height: 1.4em;}
#top .container {margin: 0 auto;clear: both; width: 100%; overflow: auto;}
.topl { width: 210px;}
.topr { width: 9em; text-align: right;}
.topl h4 {font-size: 23px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; max-width: 240px;}
.topl a {display: block; font-family: RingsideNarrow-light; font-weight: normal; color: #fff; padding-top: 3px; outline: none}
.underline, .underline:visited, .underline:focus {text-decoration: underline; text-decoration-color: var(--dorat); text-underline-offset: 4px; outline: none; color: #fff}
.underline2, .underline2:visited, .underline2:focus {text-decoration: underline; text-decoration-color: var(--dorat); text-underline-offset: 4px; outline: none; color: var(--dorat); font-weight: 700;}
.underline:hover, .underline2:hover {color: var(--hover)!important}
.topr h4 {color: var(--dorat); font-size: 34px; padding-bottom: 4px;}
.topr h4 span {font-size: 11px; display: inline-block; font-family: RingsideNarrow-normal; text-align: left;}
.topr p {font-size: 12px; color: #B7B9BA;}

.beneficis { display: none; padding: 20px 15px 0.5em 15px;background-color: var(--top-bg);border-top: 1px solid var(--bordercol); font-family: RingsideNarrow-light; font-size: 16px; }
header#top.openb .beneficis {display: block; }
.beneficis ul {list-style: none; padding: 1em 0 1.5em 0; }
.beneficis li { padding-left: 2em; padding-bottom: 0.8em;line-height: 1.4em; background: transparent url(../img/check.png) 0 0 no-repeat;}
.beneficis li:last-of-type {padding-bottom: 0}

.default .beneficis {display: block; text-align: left; border: 1px solid var(--dorat); border-radius: 8px;}
.default .beneficis h5 {font-size: 23px; text-align: center;font-family: RingsideNarrow-Bold;}

article.pagina {margin-top: 0}
article main {margin: 0 auto; padding: 4em 0 2em;display: flex; justify-content: space-between; align-items: center;min-height: calc(100vh - var(--footer-height) - var(--header-height)); min-width: var(--global-min-width);}

article.pagina h3 {font-size: 22px; font-family: RingsideNarrow-Bold; margin-bottom: 0.8em;}
/*article.pagina p {font-size: 16px;font-family: RingsideNarrow-light;}*/
article.strong {font-family: RingsideNarrow-Bold;}
.legal {color: #aaa;}
.login .btn {margin: 1.5em auto}
.login .form-group {width: 100%!important;}
.login .formulari-wrapper {padding: 0;}

.lgbox { list-style: none; padding-left: 0; color: #fff; margin: 2em 0}
.lgbox li {width: 100%; padding: 16px 16px; border: 1px solid var(--bordercol); margin-bottom: 15px; background: transparent 15px center no-repeat; line-height: 21px;}
.lgbox a, .lgbox a:visited, .lgbox a:focus {text-transform: uppercase; color: #fff; font-family: RingsideNarrow-Bold; }
.lgbox a:hover {color: var(--hover)}
.lgbox li.fb {background-image: url(../img/facebook.png);}
.lgbox li.gg {background-image: url(../img/google.png);}
.lgbox li.ap {background-image: url(../img/apple.png);}

.login .separador {display: flex; flex-flow: row nowrap; justify-content: center; align-items: center; margin: 30px 0; }
.login .separador span {padding: 0 10px; color:#fff}
.login .separador::before, .login .separador::after {flex: 1; content: " "; height: 1px; width: auto; background: var(--bordercol); }

.btn-golden, .btn-golden:focus, .btn-golden:visited, .formulari-wrapper input.btn-golden { width: 100%!important; max-width: var(--global-max-form)!important; padding: 15px; border-radius: 0!important; font-family: RingsideNarrow-Bold; font-size: 16px; line-height: 22px; text-transform: uppercase; background: linear-gradient(0.25turn, #c09640, #fbf5b9); color: #000!important; border: none;}
.btn.btn-golden:hover, .formulari-wrapper input.btn-golden:hover {background: linear-gradient(0.25turn, #fbf5b9, #c09640)}
.btn-border { width: 100%; max-width: var(--global-max-form); padding: 20px 0; margin-top: 1.5em; border: 1px solid var(--dorat); background-color: transparent; color: var(--dorat); text-transform: uppercase; font-family: RingsideNarrow-Bold; font-size: 16px;}

.formulari-wrapper {min-height: initial; padding-bottom: 2em;min-width: var(--global-min-width); margin: initial; }
.formulari-wrapper .alert {max-width: 100%;margin-top: 1em}
 article.container .alert-warning, article.container .alert-success {padding: 10px 15px}
.formulari-wrapper header {margin-top: 1em; padding-bottom: 0.5em; color: #fff; font-family: RingsideNarrow-Bold; font-size: 20px; line-height: 20px; }
.formulari-wrapper .nota {margin-bottom: 1.5em; color: #ccc; font-family: RingsideNarrow-normal;font-size: 16px;}
.formulari-wrapper .subpas-titol, .formulari-wrapper #domsepa .personals .nota {display: none;}
.formulari-wrapper #domsepa .nota {font-size: 13px; margin-top: -15px; margin-bottom: 1em;}
.formulari-wrapper #domsepa .form-group-pag_nif {margin-bottom: 2.5em;}

.nodisp p {font-size: 16px;}

#pagament-form {padding-top: 4em; }
.form-group .form-control, .compost.swap .form-group-select select, .theme-nea .ccfields .form-control:invalid,
.minput .control-input input:first-of-type, .minput .control-input input:last-of-type {border-color: var(--bordercol)!important; color: #fff; outline-color: var(--dorat); border-radius: 0;}
.form-group select.form-control, .form-group select.form-control option, .form-group select optgroup  {background-color: #10151a}
.form-group label,
.compost.swap .form-group-input input, .compost.swap .form-group-select select,
.formulari-wrapper .triple .form-group:first-child .form-control,
.formulari-wrapper .triple .form-group:last-child .form-control {border-radius: 0;}
.form-control:focus {box-shadow: none}
.compost.swap .form-group-input input:focus-within { border-right-color: var(--bordercol) !important; }
.compost.swap .form-control[readonly] {background-color: var(--main-bg); color: #fff; }
.form-group:focus-within .form-control:focus, .form-group:focus-within .form-control:not(:invalid) {border-color: var(--dorat);}
.form-group input:not(:placeholder-shown) + .label, .labelsup,
.form-control, .form-group .labelsup, .form-group:focus-within .label { background-color: var(--main-bg); color: #fff; }
.form-group .form-control:not(:placeholder-shown) + .label {color: #aaa}
.form-group .labelsup {color: #aaa}
.formulari-wrapper .botons-peu {display: block;}
.spinner { background-color: transparent!important; width: 100%; height: 100%;}
.input-pensant {background: transparent url(/THEMES/nea/img/loading_w.gif) no-repeat; background-position: right 5px center;}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {background-color: #222;}
.formulari-wrapper .opcions .opcio {background: #192028;color: #fff; border-color: var(--dorat);}
.formulari-wrapper .opcions .opcio:last-child, .formulari-wrapper .opcions .opcio input:checked, .formulari-wrapper .opcions .checked, .formulari-wrapper .opcions:hover .checked {border-color: var(--dorat);}
.formulari-wrapper .opcions .opcio:focus, .formulari-wrapper .opcions .opcio:not(.checked):not(.readonly):hover {background-color: var(--dorat); border-color: var(--dorat);}
.formulari-wrapper .opcions .opcio input:checked, .formulari-wrapper .opcions .checked, .formulari-wrapper .opcions:hover .checked {background-color: #c09640;}
.form-group-select label#pag_via-label {background: #10151a; color: #999;}

#reactiva-warning {display: flex; align-items: center; flex-direction: column; margin: 2.5em 1em 0 1em; padding: 10px 15px;background-color: var(--bordercol); }
#reactiva-warning .btn-golden { height: 47px; margin: 1em 0 0.5em;}
.page-member .navbar-fixed-top .container {display: flex; justify-content: space-between; flex-direction: row;}
.page-member header#top .navbar-header {width: auto; text-align: left; display: none;}
.page-member .formulari-wrapper {min-width: initial; padding-bottom: 0;}
.page-member .formulari-wrapper input[type="submit"] { display: none; }
.initsect { margin-bottom: 3em; }

.page-member .infop {justify-content: flex-start; padding: 0 1.6em 0 0; margin: 0; width: 100%; position: relative; background: transparent url(../img/card.png) center right no-repeat; cursor: pointer; }
.page-member .infop.open {background-image: url(../img/close.png)}
.page-member .infop h4 { font-size: 16px; }
.page-member .infop h5 { font-size: 12px; font-family: "RingsideNarrow-light"}
.page-member .infop .topl {order: 2; width: auto; }
.page-member .infop .topm {order:  1;font-size: 22px; color: #fff; background-color: #FCF6BA1A; border-radius: 25px; padding: 6px 15px; margin: 0 15px 0 0}
.page-member .card {display: none; position: absolute; top: calc(var(--header-height) - 1px); right: 0; width: 375px; height: auto; padding: 0; overflow: auto; max-height: 90vh;background-color: var(--top-bg); border-left: 2px solid var(--top-bg); box-shadow: 0px 4px 48px #000000;}
.page-member .open + .card { display: block}
.page-member .card header {padding: 22px 20px;background-color: var(--top-bg); line-height: 24px; font-size: 16px; text-align: center;}

#targetaf { margin:0 auto 1em; padding:0 0 20px 0; box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.7); border-radius: 8px; text-align: center; width:318px; height:480px; }
#targetaf header {background-color: #2E7099;color:#fff;height: 80px; padding: 20px 10px;border-top-left-radius: 10px;border-top-right-radius: 10px; position: relative;}
#targetaf header img { height: 40px;width: auto; }
#targetaf header img:last-of-type {padding-left: 15px; height: 30px; width: auto}
#targetaf header.club-F  {background: #0076aa url(/THEMES/nea/img/generacio-ara-F-bg.jpg) no-repeat;}
#targetaf header.club-P  {background: #000000 url(/THEMES/nea/img/generacio-ara-P-bg.jpg) no-repeat;}
#targetaf header.club-PF {background: #0076aa url(/THEMES/nea/img/generacio-ara-PF-bg.jpg) no-repeat;}
#targetaf header.club-PF:before {content: 'Prèmium'; position: absolute; top: 3px; left: 0; width: 100%; height: 100%; text-align: center; color:#e3d187; font-size: 12px; ;}
#targetaf header.club-PF img:last-of-type, #targetaf header.club-F img:last-of-type, #targetaf header.club-P img:last-of-type {height: 24px; padding-left: 10px;}
#targetaf h1 {margin:0; padding: 20px 0 10px 0;font-size: 19px; font-weight: bold; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000}
#targetaf h2 {margin:0;font-size: 18px;font-weight: normal;color:#000;}
#targetaf main {background-color: #fff;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px; min-height: 319px;width: 100%;overflow: auto; margin: 0; padding-bottom: 3em;}
#targetaf main img {display: inline-block;margin: 25px auto 30px; width: 52%; max-width:300px; height: auto;}
#targetaf main img:last-of-type {margin: 0 auto;width: 80%}

.page-member footer p {padding: 25px 30px 45px;}
.page-member #logout, .page-member #logout:visited {display: block; width: 100%;padding: 20px; margin-top: 1em;background-color: var(--bordercol); color: #fff; text-align: center;}

.page-member main {flex-direction: column; justify-content: flex-start;max-width: 550px; margin: 0 auto; font-family: "RingsideNarrow-light", Arial, Helvetica, sans-serif;}
.page-member article.pagina h3 {margin-bottom: 0.6em;}
.page-member main p, .page-member main li {font-size: 16px;}
.page-member #mesavantatges {display: none; margin-top: 2em;}
.page-member a[rel="mesavantatges"] {margin-top: 3em; display: block;}
.page-member .box {padding-left: 4em; background: transparent left 6px no-repeat; margin-bottom: 2.5em;}
.page-member .box:last-of-type {margin-bottom: 0;}
.box.actes {background-image: url(../img/actes.png)}
.box.regal {background-image: url(../img/regal.png)}
.box.grup {background-image: url(../img/grup.png)}
.box.seient {background-image: url(../img/seient.png)}
.box.visites {background-image: url(../img/visites.png)}
.box.rotativa {background-image: url(../img/rotativa.png)}
.box.promocions {background-image: url(../img/promocions.png)}
.box.trobades {background-image: url(../img/trobades.png)}
.box.sopar {background-image: url(../img/sopar.png)}
.box.insignia {background-image: url(../img/insignia.png)}
.resaltat {padding: 15px 15px 5px; background-color: var(--top-bg); margin: 1em 0;}
.resaltat ul {padding-left: 1em;}
.box.regal .formulari-wrapper, .box.regal .form-group, .box.regal .formulari-wrapper .btn-golden {width: 100%; max-width: 100%!important;}
.resaltinfo {padding-left: 1.7em; background: transparent url(../img/info.png) left 2px no-repeat; margin: 15px 0;}
.legal2 {font-size: 14px!important; color: #ccc;}

aside {display: none; max-width: var(--global-max-form); width: 100%;border-radius: 8px; border: 1px solid var(--dorat); background-color: var(--top-bg);}
.estret {max-width: var(--global-min-width); min-width: var(--global-min-width); text-align: center;margin: 0 auto;}
.estret2 {max-width: var(--global-max-form); min-width: var(--global-min-width);text-align: center;margin: 0 auto;}
#confirmacio {padding-top: 4em; background: transparent url(../img/check-round.png) top center no-repeat;}

#contacte-peu {display: none;}
footer#links {position: absolute; bottom:0; height: var(--footer-height); min-width: var(--global-min-width); background-color: var(--main-bg); border-top-color: var(--bordercol); margin-top: 25px; padding-top: 75px; background: transparent url(../img/ara.png) center 2em  no-repeat; }
footer#links a, footer#links a:visited {color: #888; font-size: 12px; line-height: 30px;}
footer#links a:hover {color: #fff;}

#overlay {display: none;}
#overlay p{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2em; color: var(--dorat); opacity:1; }
#overlay:before {content: " "; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity:0.8; z-index: 100; display: flex; }

@media (max-width: 460px) {
  :root {
    --global-min-width : 350px;
  }
}

@media (min-width: 768px) {
  article.pagina {min-width: 768px; max-width: 900px; width: 100%; }
  article main {margin: 0}
  .page-member article main {height: initial;}
  .page-alta header .infop {display: none;}
  #pagament-form {padding-top: 0; }
  #reactiva-warning {flex-direction: row; margin: 2.5em auto 0 auto; max-width: 970px}
  #reactiva-warning .btn-golden {margin: 0;}
  article main.main-center {justify-content: center;}
  .formulari-wrapper {max-width: var(--global-min-width); }
  aside { max-width: 368px;}
  aside, aside .beneficis {display: block;}
  aside .infop {margin-top: 0; padding-top: 20px; border-top-left-radius: 8px; border-top-right-radius: 8px; justify-content: space-between;}
  aside .infop.oferta {padding-top: 40px;}
  aside .infop.oferta:before { top: 0; left: 0; ;border-top-left-radius:8px;border-top-right-radius: 8px;}
  aside .beneficis {border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding-bottom: 1.5em; }
  .page-member header#top .navbar-header {display: initial;}
  .page-member .formulari-wrapper {min-width: inherit;}
  .page-member .infop {text-align: right; margin-left: auto; width: auto;}
  .page-member .infop .topl {order: 1; }
  .page-member .infop .topm {order: 2; margin: 0 15px}
  .page-member .box {background-position: top left;}

  footer#links {background: none; text-align: right; height: calc(var(--footer-height) - 40px); padding-top: 0; display: flex; align-items: center;}
  footer#links ul {background: transparent url(../img/ara.png) center left  no-repeat; height: 30px; margin-bottom: 0;}
}