:root {
  --top-bg           : #fff;
  --main-bg          : #fff;
  --bordercol        : #D8E0E8;
  --dorat            : #e0ca82;
  --hover            : #BF953F;
  --header-height    : 56px;
  --footer-height    : 88px;
  --global-min-width : 400px;
  --global-max-form  : 400px;
  --scrollbarBG      : #fff;
  --thumbBG          : #ccc;
}

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

html {position: relative; min-height: 100%;}
html.apf {overflow: hidden;}
body { padding-top: 0; background-color: var(--main-bg);}
body:not(.alperfil) {margin-bottom: var(--footer-height);}
body, .formulari-wrapper {font-family: "RingsideNarrow-normal", Arial, Helvetica, sans-serif;}

body.alperfil {scrollbar-width: thin; scrollbar-color: var(--thumbBG) var(--scrollbarBG);height: 100vh; overflow-y: auto;}
body.alperfil::-webkit-scrollbar {width: 11px; }
body.alperfil::-webkit-scrollbar-track {background: var(--scrollbarBG); }
body.alperfil::-webkit-scrollbar-thumb {background-color: var(--thumbBG) ; border: 3px solid var(--scrollbarBG); border-radius: 10px; }

.container-fluid {padding-right: 0; padding-left: 0}
#promo-navbar .container-fluid { width:100%; max-width: calc(var(--global-min-width) - 20px); padding-left: 15px}
#promo-navbar {display: flex; justify-content: flex-start;align-items: center; min-height: var(--header-height); background-color: #fff;  border-bottom: 1px solid var(--bordercol);}
#promo-navbar img {height: 24px; width: auto; }
.noheader {margin-top: 23px !important;}

article {margin-top: 0; }
article main section { max-width: calc(var(--global-min-width) - 15px) !important;}
article.strong {font-family: RingsideNarrow-Bold, arial, sans-serif;}
/*article.container, aside.col-xs-12, main.col-xs-12 {padding-left: 0; padding-right: 0;}*/
body:not(.alperfil) main.col-xs-12 { padding:48px 10px 20px; overflow: hidden;}
aside {padding: 48px 0 28px; margin: 0 auto 1em; max-width: calc(var(--global-min-width) - 15px); float: none!important; }



.formulari-wrapper {min-height: initial; padding-bottom: 2em; padding-top: 0; margin: 0 auto; display: block;}
.formulari-wrapper > form > .form-group, .form-group-aportacio {width: 100%;}
.formulari-wrapper .alert {max-width: 100%;margin-top: 1em}
.formulari-wrapper input[type="submit"] {width: 100%;text-transform: uppercase; margin-bottom: 0; padding: 16px; font: 14px/14px "RingsideNarrow-Bold", sans-serif; }
 article.container .alert-warning, article.container .alert-success {padding: 10px 15px}
.alert-success {display: none; position: absolute; top: 0;left: 0; width: 100%; z-index: 999; margin-top: 0px !important; color: #fff; background: #56A900 url(../img/check_circle.svg) 0.5em center no-repeat; padding: 10px 15px 10px 2.5em!important; font: 14px/15px "RingsideNarrow-Book", sans-serif !important; text-align: left; border: none; border-radius: 0;}

.formulari-wrapper header {margin-top: 1em; padding-bottom: 1em; color: #000; font-family: RingsideNarrow-Bolder; font-size: 16px; line-height: 16px; }
.formulari-wrapper #pagament-options {display: none;}
.formulari-wrapper .nota {margin-bottom: 1.5em; color: #ccc; font-family: RingsideNarrow-normal;font-size: 16px;}
.formulari-wrapper .subpas-titol {display: none;}
.formulari-wrapper #domsepa .nota {font-size: 13px; margin-top: -15px; margin-bottom: 2.5em;}

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

hr { border-color: var(--bordercol); }

.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: #000; 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;}
.formulari-wrapper input, .formulari-wrapper select { font-family: RingsideNarrow-normal;}
.form-control:focus {box-shadow: none}
.compost.swap .form-group-input input:focus-within { border-right-color: var(--bordercol) !important; }
.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: #000; }
.form-group.form-group-redsys_date, .form-group.form-group-redsys_cvv2 {margin-bottom: 0;}
#continua[disabled] {cursor: not-allowed;}

.form-group .form-control:not(:placeholder-shown) + .label {color: #aaa}
.form-group .labelsup {color: #aaa}
.formulari-wrapper .botons-peu {display: block; margin-top: 24px; }
.spinner { /*background-color: transparent!important;*/ width: 100%; height: 100%; display: none; line-height: initial;}
.btn-pensant, .btn-pensant-m, [disabled].btn-pensant, [disabled].btn-pensant-m {background-image: none; color: #0076a8}
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {background-color: #222;}
.formulari-wrapper .opcions .opcio input:checked, .formulari-wrapper .opcions .checked, .formulari-wrapper .opcions:hover .checked {background-color: #c09640;}
#pagseg {display: flex; flex-direction: row; justify-content: space-between; align-content: center; padding-top: 24px;}
#pagseg #segur {display: flex; align-content: center; justify-content: flex-start; width: 51%; font: 12px/28px "RingsideNarrow-Bold", arial, sans-serif;}
#pagseg #segur img {padding-right: 10px; height: 23px; padding-top: 3px;}
#pagseg #cards img {padding-left: 8px;}

.theme-nea #card-data .form-group.form-group-redsys_card, .theme-nea #card-data, article#referencia {width: 100%; max-width: 100%;}
.theme-nea .form-group-redsys_date, .theme-nea .form-group-redsys_cvv2 {width: calc(50% - 10px);}
.minput .control-input input, .minput .control-input input:first-of-type, .minput .control-input input.y2:last-of-type {width: 100%; max-width: 50%;}
.minput .control-input input:first-of-type {text-align: right; padding-right: 12px;}
.minput .control-input input.y2:last-of-type {text-align: left; padding-left: 5px!important;}

#ben_acepta-sublabel {margin-top: 20px; font: 12px/1.2em RingsideNarrow-normal, Arial, sans-serif;color: #555; display: block!important;}

.legal {color: #aaa;}
.legal2 {font-size: 14px!important; color: #ccc;}

#contacte-peu {display: none;}
footer#links {position: absolute; bottom:0; height: var(--footer-height); /*min-width: var(--global-min-width);*/ border-top-color: var(--bordercol); margin-top: 25px; padding-top: 45px; background: var(--main-bg) url(/THEMES/nea/img/logo_ara_blau.png) center 1.3em  no-repeat; background-size: 65px;}
footer#links a, footer#links a:visited {color: #888; font-size: 12px; line-height: 30px; font-family: inherit;}
footer#links a:hover {color: #000;}

aside h5 { font-size: 14px; color: #0076A8; text-transform: uppercase;}
aside h1 { padding:16px 0; font: 36px/120% "ChronicleDec-normal", serif;}
aside h2 { margin-top: 1.5em; max-width: 600px; font: 16px/18px "RingsideNarrow-Bolder", arial, sans-serif; }
aside p  { font-size: 18px; line-height: 20px}
a[href="#perfilanchor"] { width:99%; display:block; margin-top: 48px; padding:16px 32px;text-transform: uppercase; font: 14px/14px "RingsideNarrow-Bold", arial, sans-serif;}
aside dl { margin:48px 0 0; font-size:16px; line-height: 18px; }
aside dt { font-family: "RingsideNarrow-Bolder", arial, sans-serif;font-weight: normal;}
aside dd { margin-bottom: 32px; line-height: 18px; }
aside ul { padding-left:1em; margin-top:16px }
aside li { font-size:16px; line-height:28px; }

aside div dt:before {content: " "; display: block; background: transparent 0 0 no-repeat; width: 36px; height: 36px; margin-bottom: 8px;}
aside div:nth-child(1) dt:before { background-image: url(../img/estalvia.svg)}
aside div:nth-child(2) dt:before { background-image: url(../img/experiencia.svg)}
aside div:nth-child(3) dt:before { background-image: url(../img/comoditat.svg)}
aside div:nth-child(4) dt:before { background-image: url(../img/territori.svg)}
aside div:nth-child(4) dd {margin-bottom: 0}

aside #imgmob { display: none; width: 100%; height: auto;}

article #funciona { display: none; }
article #funciona2 { max-width: var(--global-min-width) !important; float: none; margin: 48px auto; clear: both;}
#funciona2 h2 { padding-top:48px ;font: 16px/18px "RingsideNarrow-Bolder", arial, sans-serif; }
#funciona2 ul { padding-left:1.1em; margin-top:18px }
#funciona2 li { font-size:16px; line-height:1.3em; padding-bottom: 10px}
#funciona2 a[href="#perfilanchor"] {margin-top: 34px}

#contactemob { max-width: var(--global-min-width) !important; float: none; margin: 15px auto 40px; clear: both; text-align: center; line-height: 16px}

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

  #promo-navbar .container {width: 100%;}
}

@media (min-width: 990px) {
  :root {--footer-height    : 56px;}
  body > article {min-width: 768px; max-width: 100%; }

  #promo-navbar .container-fluid { max-width: 100%;padding-left:20px }
  article.formaport {display: flex;flex-direction: row;}
  article.formaport aside {
    display: flex; flex-direction: column; justify-content: center; align-content: center; border-right: 1px solid var(--bordercol);
    max-width: initial; margin: initial;  border-bottom: none;
  }
  article.formaport main {min-height: calc(100vh - var(--footer-height) - var(--header-height)); padding: 24px 20px;}
  aside.col-xs-12, main.col-xs-12 {padding-left: 20px; padding-right: 20px;}

  article aside #funciona {display: block;max-width: 670px;}
  aside > section {max-width: 670px; }
  aside h1 {font-size: 48px; }
  aside .btn-ara { display: none}
  aside dl {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: 30px; margin: 32px 0 48px}
  aside dl div {flex: 0 1 calc(50% - 16px);}
  aside dd {margin-bottom: 0}
  aside #imgmob {display: block;}

  .formulari-wrapper {padding-bottom: 0;}
  #pagament-form {padding-top: 0; border-top: none;}

  footer#links .container-fluid {width: calc(100% - 65px); margin:0 auto;}
  footer#links {text-align: right; height: var(--footer-height); padding-top: 0; display: flex; align-items: center;}
  footer#links ul {background: var(--main-bg) url(/THEMES/nea/img/logo_ara_blau.png) center left no-repeat; background-size: contain; height: 24px; margin-bottom: 0; }
}

@media (min-width: 1441px) {
  aside > section, article aside #funciona {margin: 0 auto}
}