@font-face {
    font-family: 'lloyds_bank_jack';
    src: url('../fonts/lloyds_bank_jack-boldWEB.eot');
    src: url('../fonts/lloyds_bank_jack-boldWEBd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lloyds_bank_jack-boldWEB.woff') format('woff'),
         url('../fonts/lloyds_bank_jack-boldWEB.ttf') format('truetype'),
         url('../fonts/lloyds_bank_jack-boldWEB.svg#lloyds_bank_jack-web-bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'lloyds_bank_jack';
    src: url('../fonts/lloyds_bank_jack-bold_italicWEB.eot');
    src: url('../fonts/lloyds_bank_jack-bold_italicWEBd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lloyds_bank_jack-bold_italicWEB.woff') format('woff'),
         url('../fonts/lloyds_bank_jack-bold_italicWEB.ttf') format('truetype'),
         url('../fonts/lloyds_bank_jack-bold_italicWEB.svg#lloyds_bank_jack-web-bold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'lloyds_bank_jack';
    src: url('../fonts/lloyds_bank_jack-italicWEB.eot');
    src: url('../fonts/lloyds_bank_jack-italicWEBd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lloyds_bank_jack-italicWEB.woff') format('woff'),
         url('../fonts/lloyds_bank_jack-italicWEB.ttf') format('truetype'),
         url('../fonts/lloyds_bank_jack-italicWEB.svg#lloyds_bank_jack-web-italic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'lloyds_bank_jack';
    src: url('../fonts/lloyds_bank_jack-lightWEB.eot');
    src: url('../fonts/lloyds_bank_jack-lightWEBd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lloyds_bank_jack-lightWEB.woff') format('woff'),
         url('../fonts/lloyds_bank_jack-lightWEB.ttf') format('truetype'),
         url('../fonts/lloyds_bank_jack-lightWEB.svg#lloyds_bank_jack-web-light') format('svg');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'lloyds_bank_jack';
    src: url('../fonts/lloyds_bank_jack-light_italicWEB.eot');
    src: url('../fonts/lloyds_bank_jack-light_italicWEBd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lloyds_bank_jack-light_italicWEB.woff') format('woff'),
         url('../fonts/lloyds_bank_jack-light_italicWEB.ttf') format('truetype'),
         url('../fonts/lloyds_bank_jack-light_italicWEB.svg#lloyds_bank_jack-web-light_italic') format('svg');
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'lloyds_bank_jack';
    src: url('../fonts/lloyds_bank_jack-mediumWEB.eot');     
    src: url('../fonts/lloyds_bank_jack-mediumWEBd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lloyds_bank_jack-mediumWEB.woff') format('woff'),
         url('../fonts/lloyds_bank_jack-mediumWEB.ttf') format('truetype'),
         url('../fonts/lloyds_bank_jack-mediumWEB.svg#lloyds_bank_jack-web-medium') format('svg');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'lloyds_bank_jack';
    src: url('../fonts/lloyds_bank_jack-medium_italicWEB.eot');
    src: url('../fonts/lloyds_bank_jack-medium_italicWEBd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lloyds_bank_jack-medium_italicWEB.woff') format('woff'),
         url('../fonts/lloyds_bank_jack-medium_italicWEB.ttf') format('truetype'),
         url('../fonts/lloyds_bank_jack-medium_italicWEB.svg#lloyds_bank_jack-web-medium_italic') format('svg');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'lloyds_bank_jack';
    src: url('../fonts/lloyds_bank_jack-regularWEB.eot');
    src: url('../fonts/lloyds_bank_jack-regularWEBd41d.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lloyds_bank_jack-regularWEB.woff') format('woff'),
         url('../fonts/lloyds_bank_jack-regularWEB.ttf') format('truetype'),
         url('../fonts/lloyds_bank_jack-regularWEB.svg#lloyds_bank_jack-web-regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


  .error
  {
    color: #F00;
    background-color: #FFF;
  }

  .button
  {
    background-color: #23ac38;
    border-style: solid;
    border-color: #23ac38;
    color: #ffffff;
    cursor: pointer;
  }

  *.info
  {
    color: #666;
    font-size: 0.9em !important;
  }

  *.smallinfo
  {
    color: #666;
    font-size: 10px !important;
  }


  .alt-button
  {
    color: #23ac38;
    border-style: solid;
    border-color: #23ac38;
    background-color: #ffffff;
    font-weight: bolder;
    cursor: pointer;
  }

  a.button, a.alt-button
  {
    text-decoration: none;
    font-weight: normal;
    display: inline-block;
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    margin-left: 5px;
    margin-right: 5px;
  }

  .loading-button
  {
    background-color: #5ea875;
    border-style: solid;
    border-color: #5ea875;
    color: #aaa;
    font-weight: bolder;
    cursor: wait;
  }

  input[type=image].loading-button { background : transparent; }

  a.brand-bullet, input[type=submit].brand-bullet
  {
    color: #23ac38;
    background-color: #ffffff;
    background-image: url( ../img/decore/brand-bullet.png);
    background-repeat: no-repeat;
    background-position: left center;
    text-decoration: none;
    padding-left: 25px;
    font-size: 20px;
    font-weight: normal;
  }

  a.brand-bullet.app-frame-shown, input[type=submit].brand-bullet.app-frame-shown
  {
     background-image: url( ../img/decore/brand-bullet-down.png);
  }

  a.brand-link  , input[type=submit].brand-link
  {
    color: #23ac38;
    background-color: #ffffff;
    background-image: url( ../img/decore/brand-bullet-alt.png);
    background-repeat: no-repeat;
    background-position: right center;
    padding-right: 18px;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
  }

  a.brand-link:hover
  {
    border-bottom: 1px dotted #23ac38;
  }

  *.brand-color
  {
    color: #23ac38;
  }

  .popup-background
  {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
  }

  div.popup-panel
  {
    background-color: #fff;
    border: 3px outset silver;
    padding: 0.5em;
  }

  .popup-panel *
  {
    -x-padding: auto;
  }

  .popup-panel h3
  {
    margin-top: 0px;
  }

  .center-text
  {
    text-align: center;
  }

  .float-left
  {
    float: left;
  }

  .float-right
  {
    float: right;
  }

  .float-clear
  {
    clear: both;
  }

  .form label
  {
    display: inline-block;
    min-width: 80px;
  }

  ol.terms li
  {
    margin-top: 15px;
  }

  div.popup-iframe
  {
    background-color: #fff;
    padding: 5px;
    border: 2px outset #AAA;
  }

  div.popup-iframe h1
  {
    margin: 2px 0px 2px 0px;
    font-size: 90%;
  }

  div.popup-iframe iframe.inner-iframe
  {
    border: none;
  }

  div.popup-iframe div.button-box
  {
    float: right;
  }


  div.popup-iframe input.close-box
  {
    position: absolute;
    top: 0px;
    right: 0px;
    background-image: url( ../img/decore/brand-close-box.png);
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    color: transparent;
    content: "X";
    text-indent: -2000px;
    text-align: left;
    width: 20px;
    height: 20px;
    display: inline-block;
    border: 3px solid #fff;
    border-bottom-width: 2px;
    z-index: 1;
  }

  div.popup-iframe *.title
  {
    margin-top: 3px;
    margin-bottom: 3px;
  }

  div.choose-info-popup ul
  {
    padding-left: 1em;
  }


  *.check-radio
  {
    position: relative;
  }

  *.check-radio input[type=radio]
  {
    z-index: 0;
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    top: 5px;
  }

  *.check-radio input[type=radio] + label
  {
    z-index: 1;
    display: inline-block;
    vertical-align: middle;
    background: url( ../img/decore/brand-empty-tick.png) left top no-repeat;
    cursor: pointer;
    padding-left: 26px;
    height: 23px;
    left: -23px;
    position: relative;
  }

  *.check-radio input[type=radio]:checked + label
  {
    background: url( ../img/decore/brand-tick.png) left top no-repeat;
  }

  .even2 td
  {
    width: 50%;
  }

  .even3 td
  {
    width: 33%;
  }

  .lower
  {
    text-transform: lowercase;
  }
  .bold
  {
    font-weight : bold;
  }
  .underline
  {
    text-decoration : underline;
  }
  .nowrap
  {
    white-space: nowrap
  }
  .developer
  {
    background-color: #ffffff;
    color: #23ac38;
  }
  .developer fieldset 
  {
    border : none;
  }
  .developer fieldset legend
  {
    padding-left : 0px;
    padding-top : 4px;
  }



  #site-js-AlertDiv
  {
    font-family: "lloyds_bank_jack" , Arial, Sans-Serif;
    left: 40%;
    top: 40%;
    position: absolute;
    width: 400px;
    padding: 12px;
    text-align: left;
    display: none;
    z-index: 100001;
  }
  #site-js-AlertButtons
  {
    position: absolute;
    right: 5%;
    bottom: 5%;
  }

  .modal.bootstrap-frame.show
  {
    display : block;
  }
  div.modal-backdrop.hidden
  {
    display : none;
  }
  .modal.bootstrap-frame.show + div.modal-backdrop.hidden
  {
    display : block;
    opacity: 0.5;
  }

  .h-1 { height : 0.5em }
  .h-2 { height : 0.75em }
  .h-3 { height : 1em }

  .mr-66px { margin-right: 4.125rem; }

  .fs-18px { font-size: 1.125rem; }
  .fs-14px { font-size: 0.875rem; }
  .fs-20px { font-size: 1.25rem; }
  .fs-26px { font-size: 1.625rem; }


  .py-33px 
  { 
    padding-top : 2.0632rem !important; 
    padding-bottom : 2.063rem !important; 
  }

  .py-44px 
  {
    padding-top : 2.75rem !important; 
    padding-bottom : 2.75rem !important; 
  }

  .py-24px 
  {
    padding-top : 1.5rem !important; 
    padding-bottom : 1.5rem !important; 
  }


  .bg-1a795f, div.hr.bg-1a795f 
  { 
    background-color: #23ac38; 
  }

  .fw-medium 
  {
    font-weight: 500;
  }



  /** move to generic classes - a white section panel*/
  .white-panel
  {
    background-color : #fff;
    margin-top : 1rem;
    margin-bottom : 0.5rem;
    padding : 1rem;
  }

  .white-panel a, .white-panel a:hover 
  { 
    color : #23ac38; 
  }

  .fs-2 { font-size : smaller; }


  #page-header .navbar-custom-light .brand-dark 
  {
    background-color: #23ac38;
    color: #ffffff;
  }

  div.hr 
  {
    background-color: #23ac38;
    height: 1px;
    max-height : 1px;
  }

  /* branded lists*/
  div.page-content ul
  {
    padding-left : 1rem;
  }

  div.page-content ul li
  {
    list-style: none;
    margin-left : 0px;
    font-family: lloyds_bank_jack;
    display : block;
    padding-left : 0.3rem;
    text-indent: -0.7rem;
    margin-bottom: 0.25rem;
  }

  div.page-content ul li::before
  {
    font-family: Arial, Helvetica, sans-serif;
    color: #505050;
    font-size: 80%;
    content: "\25CF"; 
    max-height: .8rem;
    position: relative;
    left : -0.3rem;
    top : -0.15rem;
  }

  .page-content a, 
    .page-content a:hover
  {
    color: #23ac38;
  }


  .brand-bold, .brand-bold:hover 
  { 
    color: #23ac38;
    font-weight: bolder; 
  }

  .bg-brand 
  {
	background-color: #23ac38;
  }
  .text-brand, .text-brand a, .text-brand a:hover
  {
    color: #ffffff;
  }
  
  .bg-alt-brand, div.hr.bg-alt-brand
  {
    background-color : #eeede9;
  }
  .text-alt-brand, .text-alt-brand a, .text-alt-brand a:hover,
    a.brand, a.brand:hover
  {
    color: #23ac38;
  }

  div.hr.bg-dark-brand,
    .bg-dark-brand
  {
    background-color: #23ac38;
  }
  text-dark-brand a,
  .text-dark-brand
  {
    color: #ffffff;
  }

  .bg-light-brand, div.hr.bg-light-brand 
  {
    background-color: #23ac38;
  }
  .text-light-brand, .text-light-brand a
  {
    color: #ffffff;
  }

  .btn.brand
  {
      
    background-color: #5ea875;
    background-image: linear-gradient( #72a418, #5a8d00 );
    color: #ffffff;
  
  }

  .btn.brand:hover
  {
    background-image: none;
  }

  .btn.brand-dark 
  {
  
    background-color: #23ac38;
    background-image: linear-gradient( #23ac38, #23ac38 );
    color: #ffffff;
  
  }

  .btn.brand-dark.brand-flat 
  {
    background-image: none;
  } 

  @media screen and (min-width : 576px )
  {
    .btn.brand-dark.brand-sm
    {
      background-color: #5ea875;
      background-image: linear-gradient( #72a418, #5a8d00 );
    }
  }

  .btn.brand-dark:hover 
  {
    background-image: linear-gradient( #1c5a46, #02402c );
  }



  *.oi.oi-info 
  {
     position : relative;
     width: 0.5rem;
  }
  *.oi.oi-info:before
  {
    content : "";
    height : 2em;
    width : 2em;
    display : inline-block;
    background-image: url( ../img/decore/tooltip.png);
    background-position: center, center;
    position : absolute;
    top: -1rem;
    left : -.6rem;
    z-index: 2000;
  }

  *.oi.oi-phone
  {
    position : relative;
    width : 0.7em;
  }
  *.oi.oi-phone:before
  {
    content : "";
    height : 1.2em;
    width : 1.2em;
    display : inline-block;
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 42.52 42.52' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(255, 255, 255, 1)'  d='M24.88,3c1.47.15,1.83.66,2.91,1.64A1.45,1.45,0,0,1,28.1,6a30.81,30.81,0,0,1-3.36,6.83c-.79,1.24-3,.84-4.5,1.1-2,3.81-2,10.89,0,14.66,1.45.26,3.7-.14,4.5,1.1a30.11,30.11,0,0,1,3.37,6.82,1.39,1.39,0,0,1-.31,1.31c-1.07,1-1.44,1.43-2.9,1.65C10.82,41.56,10.79,1.59,24.88,3Z'/></svg>");
    background-size : contain;
    background-position: center, center;
    position : absolute;
    top: -1rem;
    left : -.3rem;
  }
  *.oi.oi-phone.text-brand:before
  {
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 42.52 42.52' xmlns='http://www.w3.org/2000/svg'><path fill='rgba(0, 106, 77, 1)'  d='M24.88,3c1.47.15,1.83.66,2.91,1.64A1.45,1.45,0,0,1,28.1,6a30.81,30.81,0,0,1-3.36,6.83c-.79,1.24-3,.84-4.5,1.1-2,3.81-2,10.89,0,14.66,1.45.26,3.7-.14,4.5,1.1a30.11,30.11,0,0,1,3.37,6.82,1.39,1.39,0,0,1-.31,1.31c-1.07,1-1.44,1.43-2.9,1.65C10.82,41.56,10.79,1.59,24.88,3Z'/></svg>");    
  }

  *.oi.oi-login
  {
    position : relative;
    width : 1em;
  }
  
  .oi.oi-login:before
  {
    content : "";
    height : 1.2em;
    width : 1.2em;
    display : inline-block;
    background-image: url( ../img/decore/login.png);
    background-size : contain;
    background-position: center, center;
    position : absolute;
    top: -1em;
    left : -0.1em;
  }

  *.oi.oi-profile
  {
    width: 2.25rem;
    position : relative;
  }
  
  *.oi.oi-profile::before 
  {
    position: absolute;
    top: -1.5rem;
    left : 0rem;
    display : inline-block;
    content: "";
    width: 2.25rem;
    height: 2.25rem;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url( ../img/decore/profile-icon.png);
  }

  .oi.oi-speech
  {
    width: 2.5rem;
    position : relative;
  }
  
  .oi.oi-speech::before 
  {
    position: absolute;
    top: -1.5rem;
    left : 0rem;
    display : inline-block;
    content: "";
    width: 2.25rem;
    height: 2.25rem;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url( ../img/decore/speech-icon.png);
  }


  #page .form-control,
  #page .input-group-text,
  #page .btn,
  #page .btn-control

  {
    border-radius: 0px;
    font-size: 0.9375rem;
  }

  #page .btn,
  #page .btn-control
  {
    height: initial;
    padding-top : 0.828125rem;  
    padding-bottom : 0.828125rem;
  }

  #page .tooltip-inner
  {
    border-radius: 0px; 
    font-family : inherit;
    color : #5a5a5a;
    background-color: #efedea;
    border-color:  #efedea;
    opacity: 1;
    text-align : left;
    box-shadow : rgba( 0, 0, 0, 0.4 ) 0.3rem .3rem;
  }
    
  #page .bs-tooltip-auto[x-placement^=top] .arrow::before,
  #page .bs-tooltip-top .arrow::before 
  {
    border-top-color : #efedea !important; 
  }

  #page .bs-tooltip-auto[x-placement^=bottom] .arrow::before,
  #page .bs-tooltip-bottom .arrow::before 
  {
    border-bottom-color : #efedea !important; 
  }


  #page .container-fluid > .container,
  #page .container-fluid > div > .container
  {
    padding-left: 0;
    padding-right: 0;
  }

  #page .btn.focus, #page .btn:focus 
  {
    box-shadow : none;
  }

  @media screen and (min-width : 576px ) 
  {
    #page .container-fluid > .container,
    #page .container-fluid > div > .container,
    #page -end-of-list-
    {
      padding-left: 15px;
      padding-right: 15px;
    }
  }


  #page-header button.navbar-toggler span.navbar-toggler-icon
  {
    height : 1.8em;
    background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 2h22M4 10h22M4 18h22'/></svg>");
  }
  #page-header button.navbar-toggler span.navbar-toggler-icon small
  {
    font-size : 0.65rem;
    
    vertical-align : bottom;
    color: #ffffff;
    display : inline-block;
    margin-top : 2.2em;
  }

  #page-header .navbar-custom-dark
  {
    background-color: #23ac38;
    color: #ffffff;
    font-size : 0.875rem;
    padding-top:  10px;
    padding-bottom : 10px;
    font-weight : lighter;
    line-height: 1.125rem;
  }

  #page-header .navbar-custom 
  {
    background-color: #ffffff;
    color: #23ac38;
    padding : 0px;
  }

  #page-header .navbar-custom a 
  {
    color: #23ac38;
  }

  #page-header nav.navbar *.h3 
  { 
    text-transform : uppercase; 
    vertical-align : bottom;
    font-size:  1.5rem;
    margin-bottom : 0px;
  }

  #page-header nav.navbar 
  { 
    padding-left : 0px; 
    padding-right: 0px;
  }

  #page-header *.navbar-custom-light a
  {
    font-weight : 500;
  }

  #page-header *.navbar-custom-light *.nav-item a.active
  {
    background-image : url( ../img/decore/up_triangle.png);
    background-repeat : no-repeat;
    background-position : center bottom;
  }


  div.debug-menu
  {
    position: fixed; 
    top: 0px; 
    right: 2px; 
    z-index: 10000;
  }

  div.debug-menu button.debug-btn
  {
    border: none;
    padding: 0px 4px 4px 4px;
    line-height : 20px;
    background-color : white;
    border-radius : 3px;
    border: solid 1px #FF7;
    cursor : pointer;
  }
  div.debug-menu button.debug-btn::after 
  {
    content : none;
  }
  div.debug-menu *.dropdown-menu
  {
    position : relative;
    right : 0px;
    left: unset;
    padding-left : 4px;
  }


  *.static.invalid-feedback { display : initial; }

  #main-menu ul.navbar-nav li a
  { 
    padding-left : .5rem; 
    padding-right : .5rem;    
  }

  #page-header .navbar-custom-light 
  {
    padding-top : 0px;
    padding-bottom : 0px;
  }

  #page-header .navbar-custom-light
  {
    background-color: #ffffff;
    color: #23ac38;
  }

  #page-header .navbar-custom-light li 
  {
    border-bottom : 1px solid #23ac38;
  }

  #page-header .navbar-custom-light a 
  {
    color: #23ac38;
  }
  #page-header .navbar-custom-light li.nav-item 
  {
    position : relative;
  }
  #page-header .navbar-custom-light li.nav-item a.nav-link:after 
  {
    font-family:"Icons";
    content: "\e036";
    position : absolute;
    right : .25rem;
  }

  #page
  {
    background-color : #eeede9;    
  }

  #page div.footer 
  {
    background-color : #fff;
  }

  #page-header .navbar-custom-light li.nav-item + li.nav-item a.nav-link::before 
  {
    content : none;
  }

  @media screen and (min-width : 576px ) 
  {
    .collapse.show-sm 
    {
      display : block;
    }

    #page-header .navbar-custom 
    {
      padding: 1.25rem 0px 1.125rem 0px;
    }
  }

  @media screen and (min-width : 768px ) 
  {
    #page-header .navbar-custom-light
    {
      background-color: #23ac38;
      color: #ffffff; 
      min-height: 3.3125rem;
    }
    #page-header .navbar-custom-dark
    {
      min-height: 2.375rem;
    }

    #page-header .navbar-custom-light a 
    {
      color: #ffffff;
      line-height :  1.1875rem;
      padding-top: 1.0625rem;
      padding-bottom: 1.0625rem;
    }

    #page-header .navbar-custom-light li 
    {
      border-bottom : none;      
    }

    #page-header .navbar-custom-light li.nav-item a.nav-link::after
    {
      content : none;
    }
    #page-header .navbar-custom-light li.nav-item + li.nav-item a.nav-link::before 
    {
      content : "";
      border-left: 1px solid #0d7151;
      display: inline-block;
      height: 0.85rem;
      width: calc( 1.5rem - 1px );
      position : relative;
      right: unset;
      top: 0.15rem;
      margin-left: 0.5rem;
    }
  }


  .mx-barrier 
  {
    padding-top: 1px;
    margin-top : -1px;
  }

  .no-underline, .no-underline:hover
  {
    text-decoration : none;
  }

  .next-button
  {
    position : relative;
  }


  .next-button::after 
  {
    font-family:"Icons";
    content: "\e036";
    position : absolute;
    right : .35rem;
    top: 0.95rem;
    font-size : 0.8rem;
  }

  .page-footer .next-button::after 
  {
    top: 0.2rem;
  }


  .next-button[aria-expanded=true]::after 
  {
    font-family:"Icons";
    content: "\e034";
    position : absolute;
    right : .25rem;
  }



  #landing-header div.masthead, 
    #welcome-header div.masthead, 
    #choose-confirm-header div.masthead    
  {
    background-image: url( ../img/background/Cabeceras_forInvestors.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top; 
      
    background-color: #23ac38;
  
  }

  #landing-header div.header-box, 
    #welcome-header div.header-box, 
    #choose-confirm-header div.header-box,
    #choose-header div.header-box,
    #faq-page div.header-box,  
    #choose-header div.header-box    
  {
    color: #ffffff;
    background-color: #23ac38;
    padding: 1.1875rem;
  }

   div.header-box h2 
   {
     font-weight : bold;
     font-size : 2rem;
   }

  *.benefit-box-passive,
  *.benefit-box-active
  {
    text-align : center;
   
  }

  *.benefit-box-passive section,
  *.benefit-box-active section {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 300;
  }
  *.benefit-box-active section
  {
    padding-bottom : 6rem;
    position : relative;
  }

  *.benefit-box-passive section > img,
  *.benefit-box-active section > img 
  {
    margin-top : 1.5rem;
  }

  *.benefit-box-passive section h4,
  *.benefit-box-active section h4 
  {
    font-size: 1.25rem;
    font-weight: 500;
    margin-top : 1rem;
    margin-bottom : 1rem;
  }

  *.benefit-box-active section > *.more-button
  {
    position : absolute;
    bottom: 2rem;
    
    width: 100%;
  }

  *.benefit-box-active *.cinema-id 
  {
    background-color : #23ac38;
    color :rgba(255, 255, 255, 0.9);
  }
  *.benefit-box-active *.gourmet-id 
  {
    background-color : #e38815;
    color : rgba(255, 255, 255, 0.9);
  }
  *.benefit-box-active *.magazine-id 
  {
    background-color : #76b82a;
    color : rgba(255, 255, 255, 0.9);
  }


  *.benefit-box-active section > *.more-button *.next-button
  {    
    color: #fff;
    background-color: rgba( 0, 0, 0, 0.25 );
    padding-left: 1rem;
    margin-left : -0.5rem;
    padding-right : 1.5rem;
  }
  *.benefit-box-active section > *.more-button *.next-button:hover 
  {
    background-color: rgba( 0, 0, 0, 0.35 );
    text-decoration: underline;
  }

  div.benefit-badge
  {
    background-color :#fff ;
    padding : 1rem;
    color : #ffffff;  
    margin-bottom : 1.875rem; 
  }

  div.benefit-badge > p 
  {
    margin : 0;
    padding : .5rem;   
  }

  div.benefit-badge.selected > *
  {
    background-color : #76b82a;
  }
  
  div.benefit-badge.selecting > *
  {
    background-color : #7d868b;
  }

  div.benefit-choice section
  {
    background-color : #fff;
    margin-top : 1rem;
    margin-bottom : 0.5rem;
    padding : 1.5rem;
    margin-top : 2.125rem;
    margin-bottom: 2.125rem;
  }
  div.benefit-choice section:first-child { margin-top : 0; }

  div.benefit-choice section *.logo-box 
  {
    display : flex;
    flex-direction : row;
    justify-content: space-between;
  }
  div.benefit-choice section *.logo-box *.product-logos
  {
    display : flex;
    flex-direction : column;
    align-items: center;
    justify-content: space-around;
  }
  div.benefit-choice section *.logo-box *.product-logos *.product-logo
  {
    padding-bottom : 1px;
  }

  div.benefit-choice section *.content-box h4
  {
    font-size: 1.625rem;
  }

  div.benefit-choice section *.content-box a
  {
    font-weight: normal;
  }

  div.benefit-choice section *.content-box p.info
  {
    padding-left: 39px;
    background-image : url( ../img/decore/exclamation-icon.png);
    background-repeat : no-repeat;
    background-position: 0px 0.5rem; 
  }
  div.benefit-choice section *.button-box
  {
    margin-top : 1rem;
    display : flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom : 1rem;
  }

  div.benefit-choice section *.extra-box > span
  {
    display : block;
  }

  div.benefit-choice div.extra-box 
  {
    margin-top : 1rem;
    margin-bottom: -1rem;
  }

  div.benefit-choice div.extra-box div.modal-body div *.btn,
  div.benefit-choice section *.button-box a.btn
  {
    margin-top : 1rem;
    width : 75%;
    background-color: #5ea875;
    background-image: linear-gradient( #72a418, #5a8d00 );
    color: #ffffff;
    position : relative;
  }
  div.benefit-choice section *.button-box a.btn-select,
    div.benefit-choice section *.button-box a.btn-selected
  {
    text-align: left;
  }

  div.benefit-choice div.extra-box div.modal-body div *.btn.brand-dark 
  {
  
    background-color: #23ac38;
    background-image: linear-gradient( #23ac38, #23ac38 );
    color: #ffffff;
  
  }

  div.benefit-choice div.extra-box div.modal-body div *.btn 
  {
    width : 100%;
  }
  @media screen and (min-width : 576px )
  {
    div.benefit-choice div.extra-box div.modal-body div *.btn 
    {
      width : 30%;
    }
  }

  div.benefit-choice section *.button-box a.btn.brand:hover
  {
    background-image: none;
  }


  div.benefit-choice div.extra-box div.modal-body div *.btn,
    div.benefit-choice section *.button-box a.btn-select,
    div.benefit-choice section *.button-box a.btn-selected
  {
    padding-right : 2.5rem;
  }
  div.benefit-choice div.extra-box div.modal-body div *.btn::after,
    div.benefit-choice section *.button-box a.btn-select::after,
    div.benefit-choice section *.button-box a.btn-selected::after
  {
    content: "";           
    background-position: center;
    background-repeat : no-repeat;
    display : block;
    position: absolute;
    right: 0px;
    top: .4rem;
    width : 48px;
    height : 2.25rem;
  }

  div.benefit-choice div.extra-box div.modal-body div *.btn-select::after,
    div.benefit-choice section *.button-box a.btn-select::after
  {
    background-image: url( ../img/decore/white-circle.png);
    opacity: 0.5;
  }
  div.benefit-choice div.extra-box div.modal-body *.btn-selected::after,
    div.benefit-choice section *.button-box a.btn-selected::after
  {
    background-image: url( ../img/decore/white-circle-tick.png);
  }

  div.benefit-choice section *.btn-collapse,
    section div.extra-box *.btn-collapse,
    div.benefit-choice section *.next-button,
    section div.extra-box *.next-button
  {
    display : block;
    text-align : left;
    border-top : 1px solid #efedea;
  }

  *.btn.btn-collapse, #page *.btn.btn-collapse
  {
    background-color: #fff;
    width: 100%;
    position : relative;
    font-size : larger;
    font-weight: 500;
  }
   #page *.btn.brand-bold 
   {
      font-size : larger;
      font-weight: 500;
   }


  *.btn.btn-collapse::after
  {
    content: "";           
    background-position: center;
    background-repeat : no-repeat;
    display : block;
    position: absolute;
    right: 0rem;
    top: 0px;
    width : 25.5px;
    height :2.25rem;
    background-image: url( ../img/decore/expand.png);
  }

  /*
  div.benefit-choice section *[aria-expanded=true].btn.btn-collapse::after,
    section div.extra-box   *[aria-expanded=true].btn.btn-collapse::after
  */
  *[aria-expanded=true].btn.btn-collapse::after
  {
    background-image: url( ../img/decore/collapse.png);
  }


  div.extra-box div.choose-info-popup
  {
    padding: 0.75rem;
  }


  #selection_MAGAZINE_items  div.list-item
  {
    margin-bottom: 2.25rem; 
    text-align : center;
    position : relative;
  }

  #selection_MAGAZINE_items .modal-header 
  {
    border-bottom : none;
  }
  
  #selection_MAGAZINE_items .modal-footer 
  {
    border-top : none;
  }

  #selection_MAGAZINE_items div.benefit-list *.list-item.selected span.benefit-marker
  {
    display: inline-block;
    position: absolute;
    background: url( ../img/decore/white-circle-tick.png) left top no-repeat;
    width: 32px;
    height: 32px;
    right : 0.5rem;
    bottom: 0.25rem;
    z-index: 1;
    opacity: 0.9;
  }
                                                      

  .page-footer 
  {
    padding-top : 2.1875rem;
    font-weight : lighter;
  }

  .page-footer h4 
  {
    font-weight: 500;
    font-size: 1.125rem;
  }

  #mydetails-page div.header-box h3 
  {
    font-weight: normal;
    font-size: 1.625rem;
  }

  #mydetails-page div.date-box
  {
    font-weight: normal;
    font-size: larger;
  }

  #mydetails-page div.header-box 
  {
    padding: 1rem;
  }

  #mydetails-page div.header-box,
    #mydetails-page div.header-box a,
    #mydetails-page div.header-box a:hover
  {
    color: #ffffff;
    background-color: #23ac38;
  }

  #your-details 
  {
    margin-top:2.125rem;
    padding : 1rem;    
  }
  #your-details h4
  {
    border-bottom : 1px solid rgba( 0, 0, 0, 0.25 );
    font-size : 1.25rem;
    font-weight: bolder;
  }
  #your-details h5 
  {
    font-size : 1rem;
    font-weight: bolder;
  }

  #your-details *.item
  {    
    min-width : 7rem;
    margin-left : 0.5rem;
    margin-right: 0.5rem;
    padding-bottom: 0.5rem;
  }

  *.defer-icon img.product-icon 
  {
    opacity : 0.5;
  }


  #welcome-header div.masthead 
  {
    background-image: url( ../img/background/Cabeceras_forInvestors.jpg);
    background-size: 250%;
    background-repeat: no-repeat;
    background-position: 75% top;
    min-height : 67.5vw;
  }

  #choose-header div.masthead 
  {
    background-image: url( ../img/background/choose-banner.png);
    background-size: 250%;
    background-repeat: no-repeat;
    background-position: 75% top;
    min-height : 48.4154929577465vw;
  }

  #faq-header div.masthead
  {
    background-image: url( ../img/background/faq-banner.png);
    background-size: 250%;
    background-repeat: no-repeat;
    background-position: 75% top;
    min-height : 48.4571428571429vw;
  }

  #faq-page .inner-accordion 
  {
    padding-bottom : .25rem; 
  }

  #faq-page .outer-accordion section > *.btn.btn-collapse 
  {
    border-top: 1px solid #efedea;
  }

  #faq-page .outer-accordion section a
  {
    font-weight : bolder;
  }

  #faq-page .outer-accordion h2 
  {
      
    text-align : left; 
    white-space: normal;       
    color: #23ac38;     
  
    font-size : 1.2rem;
  }
  #faq-page .outer-accordion h2 a 
  {
    color: inherit;
  }

  #faq-page .btn.btn-collapse h2
  { 
    font-size : 1.2rem;    
  }
  
  #faq-page .btn.btn-collapse h3
  { 
    font-size : 1rem; 
  }

  #faq-page .btn.btn-collapse h3,  #faq-page .btn.btn-collapse h2  
  { 
      
    text-align : left; 
    white-space: normal;       
    color: #23ac38;     
  

    margin-left : -0.75rem;
    padding-top : 0px;
    margin-top : 0px;
    padding-bottom : 0px;
    margin-bottom : 0px;
  }

  #faq-page section.white-panel
  { 
    padding-top : 0px;
    margin-top : 0px;
    padding-bottom : 0px;
    margin-bottom : 0px;
  }



  @media screen and (min-width : 576px ) 
  {
    #landing-header, 
      #welcome-header, 
      #choose-confirm-header
    {
      margin-top: 1rem;
      background-image: url( ../img/background/welcome-banner.png);
      background-size: 100%;
      background-repeat: no-repeat;
      color: #ffffff;
      min-height : 21.8057142857143vw;
          
    background-color: #23ac38;
  
    }
    #faq-header
    {
      margin-top: 1rem;
      background-image: url( ../img/background/faq-banner.png);
      background-size: 105%;
      background-repeat: no-repeat;
      background-position: center top;
      color: #ffffff;
      min-height : 21.8057142857143vw;
          
    background-color: #23ac38;
  
    }

    #choose-header
    {
      margin-top: 1rem;
      background-image: url( ../img/background/choose-banner.png);
      background-size: 105%;
      background-repeat: no-repeat;
      background-position: center top;
      color: #ffffff;
      min-height : 21.7869718309859vw;
          
    background-color: #23ac38;
  
    }
    
    #faq-header .header-box
    {
      width : 30%;
      min-height : 14.5371428571429vw; 
      margin : 2.42285714285714vw; 
    }
    
    #welcome-header .header-box
    {
      width : 42%;
      min-height : 16.96vw; 
      margin : 2.42285714285714vw; 
    } 

    #choose-header .header-box
    {
      width : 33%;
      min-height : 16.9454225352113vw; 
      margin : 2.42077464788732vw; 
    }  
    
    #landing-header div.masthead, 
      #welcome-header div.masthead, 
      #choose-confirm-header div.masthead,
      #faq-header div.masthead,
      #choose-header div.masthead
    {
       display : none;    
    }

    #landing-header div.header-box
    {
      background-color: transparent;
    }

    #choose-confirm-header div.header-box
    {
      color: #ffffff;
      background-color: #23ac38;
    }
    #choose-confirm-header div.header-box
    {
      color: #ffffff;
      background-color: rgba(54, 46, 113, 0.5);
    }
    *.benefit-box-active section,
      *.benefit-box-passive section 
    {
      width: 31%;
      margin-bottom : 0;
    }
    *.benefit-box-active section > *.more-button
    {
      width : 93%;
    }
    *.benefit-box-active section, 
      *.benefit-box-passive section
    {
       margin-bottom : 0;
    }



  }
  @media screen and (min-width : 768px ) 
  {
    div.benefit-choice section *.logo-box 
    {
      flex-direction : row-reverse;
    }
    div.benefit-choice section *.logo-box,
      div.benefit-choice section *.content-box,
      div.benefit-choice section *.button-box 
    {
      float: right;
      width : 46%;
    }
    div.benefit-choice section *.content-box
    {
      width: 50%;
      float: left;
      margin-right : 4%;
      padding: 0.5rem;
      border-right: 1px solid rgba( 0, 0, 0, 0.25 )
    }
    div.benefit-choice section *.extra-box 
    {
      clear: both;
    }
  }

  @media screen and (min-width : 992px ) 
  {

    div.benefit-choice section *.logo-box,
      div.benefit-choice section *.content-box,
      div.benefit-choice section *.button-box 
    {
      float: right;
      width : 30%;
    }
    div.benefit-choice section *.content-box
    {
      width: 66%;
      float: left;
      margin-right : 4%;
      padding: 0.5rem;
      border-right: 1px solid rgba( 0, 0, 0, 0.25 )
    }
    div.benefit-choice section *.extra-box 
    {
      clear: both;
    }

    div.benefit-choice section *.content-box a, 
     div.benefit-choice section *.content-box a:hover
    {
      color: #23ac38;
    }
  }



  #landing-header *.login-wrapper 
  {
      
    background-color: rgba(0,111,77);
    color: #ffffff;
      
    padding: 0.5rem;
    margin-bottom : 1rem;
    margin-top : 0.5rem;
  }
  #landing-header *.login-wrapper a
  { 
    color: #5ea875;
    font-weight : bolder;    
  }
  #landing-header *.login-wrapper hr 
  {
    border-color: #ffffff;
    margin: 0.5rem;
  }

  #landing-header *.login-wrapper .login-button[aria-expanded=false]
  {
        
    background-color: #5ea875;
    background-image: linear-gradient( #72a418, #5a8d00 );
    color: #ffffff;
          
  }

  #landing-header *.login-wrapper .login-button[aria-expanded=true]
  {
    text-align : left;
    color: #ffffff;
    background-color : transparent;
    position : relative;
    padding-left : 1.2em;
  }
  
  #landing-header *.login-wrapper .login-button[aria-expanded=true]::before
  {
    content : "";
    height : 1.2em;
    width : 1.2em;
    display : inline-block;
    background-image: url( ../img/decore/login.png);
    background-size : contain;
    background-position: center, center;
    position : absolute;
    top: 0.5em;
    left : -0.1em;
  }

  #landing-header *.login-wrapper .login-button[aria-expanded=true]::after
  {
    font-family:"Icons";
    content: "\e037";
    position : absolute;
    right : .25rem;
  }

  @media screen and (min-width : 576px ) 
  {
    #landing-header *.login-wrapper
    {
      background-color: rgba(0,111,77);
      color: #ffffff;
      padding: 1rem;
      margin-bottom : 0px;
      margin-top : 0px;
    }
    #landing-header *.login-wrapper a
    { 
      color: #5ea875;
      font-weight : bolder;    
    }
    #landing-header *.login-wrapper .form-group
    {
      margin-bottom : 0.5rem;
    }
  }
  @media screen and (min-width : 992px ) 
  {
    #landing-header *.login-wrapper
    {
      margin-top : 1rem;
    }
  }


  .login-wrapper .input-group > .form-control 
  {
    border-right : 1px solid #fff;
  }
  .login-wrapper .input-group > .input-group-append > .input-group-text 
  {
    border-left : 0px;
    background-color: #fff;
  }




  #page .benefit-choice .modal-dialog
  {
    max-width : 90vw ;
  }

  @media screen and (min-width : 992px )
  {
    #page .benefit-choice .modal-dialog
    {
      max-width : 60% ;
    }
  }

  @media screen and (max-width: 575px)
  {
    #page .benefit-choice .modal-dialog
    {
      max-width: 100%;
      height: calc(100% - 60px);
    }
    #page .benefit-choice .modal-content
    {
      height:100%;
     }
    #page .benefit-choice .modal-header
    {
      height: 50px;
    }
    #page .benefit-choice .model-footer
    {
      height:75px;
    }
    #page .benefit-choice .popup-modal-body 
    {
      height: calc(101% - 125px);
      overflow-y: scroll;     
    }
  }


  
   @media screen and (min-width : 992px )
   
   {
     *.bs_lg-max-width_50cents { max-width : 50%; }
   }
  
   @media screen and (min-width : 576px )
   
   {
     *.bs_sm-min-width_50cents { min-width : 50%; }
     *.bs_sm-min-height_18rem { min-height : 18rem; }
   }
  
   @media screen and (min-width : 768px )
   
   {
     *.bs_md-min-width_33cents { min-width : 33%; }
     *.bs_md-max-width_50cents { max-width : 50%; }
     *.bs_md-max-width_70cents { max-width : 70%; }
   }
  


  #page
  {
    font-family: "lloyds_bank_jack", Arial, Sans-Serif;
    font-weight: lighter;
    color: #5e5e5e;
    font-size : 15px;
  }
  #page *.normal
  {
    font-family: Arial, Sans-Serif;
  }
  
  html
  {
  }
  body                                       
  {
    margin: 0px;
    
  }
  body *
  {
    
  }