/* useful hacks to avoid glitching effects of elements that get removed by javascript
   while still letting non JS / script load failing users access the contents */
@keyframes delayOpacity { 
  0% { opacity: 0; }
  99% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slideFromRight { 
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes bump {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
  100% { transform: translateX(0); }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg); }
  to { -webkit-transform: rotate(360deg); }
}

.ec-loading-circle {
  position: absolute;
  top: calc(50vh - 50px);
  left: calc(50vw - 50px);
  width: 100px;
  height: 100px;
  margin: 0;
  padding: 0;
  border: solid 10px var(--ec-color-blue);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  -webkit-transition: all 0.5s ease-in;
  -webkit-animation-name: rotate; 
  -webkit-animation-duration:  1.0s; 
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  transition: all 0.5s ease-in;
  animation-name: rotate; 
  animation-duration: 1.0s; 
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

/* TODO maybe not needed: bug appears in local only */
/*@keyframes delayHeaderRealHeight{
  0% { height: 285px; }
  99% { height: 285px; }
  100% { height: auto; }
}*/

:root{
  --ec-color-blue: #004494;
  --ec-color-blue-dark: #013776;
  --ec-color-link-blue: #006fb4;
  --ec-color-blue-lighter: #7fa1c9;
  --ec-color-blue-lightest: #bfd0e4;

  --ec-color-accent-50: #ffe879;
  --ec-color-warning: #ffd617;
  --ec-color-yellow: #ffd617;
  --ec-color-yellow-dark: #f8ae21;
  --ec-color-warning-100: #f29527;
  --ec-color-warning-140: #915917;

  --ec-color-light-gray: #808080;
  --ec-color-lighter-gray: #9f9f9f;
  --ec-color-lightest-gray: #cccccc;

  --ec-color-text: #404040;

  --ec-color-success-120: #38622e;
  --ec-color-success: #467a39;
  --ec-color-success-75: #749b6b;
  --ec-color-success-50: #a3bd9c;
  
  --ec-color-error: #da2131;
  --ec-color-danger-140: #83141d;
  --ec-color-danger-50: #ed9098;

  --ec-color-ooc-purple: #b11365;
  --ec-color-ooc-cyan: #31d8bc;

  --ec-font-base: 14px;
  --ec-font-smaller: calc(var(--ec-font-base) * 0.64);
  --ec-font-small: calc(var(--ec-font-base) * 0.85);
  --ec-font-big: calc(var(--ec-font-base) * 1.15);
  --ec-font-bigger: calc(var(--ec-font-base) * 1.5);
  --ec-font-biggerer: calc(var(--ec-font-base) * 1.7);
  --ec-font-huge: calc(var(--ec-font-base) * 2.9);
  
  --ec-ls-regular: 0.033rem;
  --ec-ls-condensed: 0rem;
  --ec-ls-wide: 0.08rem;

  --ec-border: #cccccc solid 1px;
  --ec-border-blue: var(--ec-color-blue-dark) solid 1px;
  --ec-hr-border: var(--ec-color-blue) solid 1px;

  --ec-margin-page: 50px;
  --ec-internal-margin: 30px;
  --ec-internal-margin-small: calc(var(--ec-internal-margin) / 2);
  --ec-internal-margin-big: 66px;

  --ec-tile-height: 190px;
  --ec-icon-tile-height: calc(var(--ec-tile-height) / 2);

  --ec-hover-shadow: 0px 0px 15px 0px rgba(0,0,0,0.2);




  /* animates the background of interactive elements */
  --ec-bg-L-to-R: linear-gradient(to right, var(--ec-color-yellow) 50%, var(--ec-color-blue-dark) 50%) right bottom;
  --ec-bg-L-to-R-size: 200% 100%;
  --ec-bg-L-to-R-position-hover: left bottom;

  --ec-bg-R-to-L: linear-gradient(to left, var(--ec-color-yellow) 50%, var(--ec-color-blue-dark) 50%) left bottom;
  --ec-bg-R-to-L-size: 200% 100%;
  --ec-bg-R-to-L-position-hover: right bottom;


  --ec-animation-bump: bump 300ms ease-in forwards;
  --ec-transition-time: 250ms;
  --ec-easing: ease-out;
  --ec-transition-all: all var(--ec-transition-time) var(--ec-easing);
}

html,
body,
h1, h2, h3, h4, h5{
  font-family:  Arial, sans-serif;
}

body,
html{
  min-height:       100vh;
}

body > *{
  opacity:          0;
}

body > .ec-loading-circle{
  opacity:          1;
}

body.ec-loaded > *{
  opacity:          initial;
}

.ec-hr{
  display:       block;
  border-bottom: var(--ec-hr-border);
  width:         50%;
  margin:        0 0 2em 0;
}

  .ec-tile .ec-hr{
    margin:  0.5em auto 2em auto;
  }

.portal-content{
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  space-between;
  min-height:       100vh;
}

.ec-hidden{
  display:          none;
}

.ec-small-button{
  border:             0;
  color:              #ffffff;
  width:              24px;
  height:             24px;
  padding:            0;
  letter-spacing:     var(--ec-ls-regular);
  background:         linear-gradient(to left, var(--ec-color-blue-dark) 50%, var(--ec-color-yellow) 50%);
  background-size:    200% 100%;
  background-position:right bottom;
}

.ec-small-button:hover,
.ec-small-button:focus,
.ec-small-button:active{
  background-position:  left bottom;
  color:                #000000;
  transition:           var(--ec-transition-all);
}


/* SUBHEADER
   Global banner from webtools
*/

body{
  --globan-height: 28px;
}

div#globan.globan,
div.globan-invalid-domain{
  position:         absolute;
  width:            100%;
}

div#globan.globan{
  top:              0;
}

div.globan-invalid-domain{
  top:              var(--globan-height);
  margin-left:      0;
  z-index:          999;
}

  div#globan.globan button{
    border-bottom: 0;
  }

/* HEADER(s) */

/* this is the header for contents view
which stucture is based on the homepage header */
.additional-header{
  display:          block;
  position:         relative;
  padding:          0 var(--ec-margin-page);
  z-index:          999;
}

  .additional-header .inner a:link{
    position:         relative;
    top:              -4px;
    display:          flex;
  }

    .additional-header .inner a img{
      height:           64px;
    }

/* portal-header: homepage
site-header: contents */

.site-header .inner,
.portal-header .inner h1{
  animation: delayOpacity 1s forwards;
}

.portal-header,
.additional-header,
.site-header{
  height:           auto;
  background:       #ffffff;
  width:            100%;
  padding-top:      3.5em;
  /* TODO maybe not needed: bug appears in local only */
  /*  animation:        delayHeaderRealHeight 1ms forwards;*/
}

  .portal-header .inner,
  .additional-header .inner,
  .site-header .inner{
    display:          flex;
    flex-direction:   row;
    /*flex-direction:   column;*/
    align-items:      center;
    /*justify-content:  space-around;*/
    justify-content:  space-between;
  }

    .portal-header .inner a.logo-link,
    .additional-header .inner a.logo-link,
    .site-header .inner a.logo-link{
      width:            400px;
      position:         relative;
      top:              -10px;
      display:          flex;
      flex-grow:        2;
    }

      .portal-header .inner a.logo-link img,
      .additional-header .inner a.logo-link img,
      .site-header .inner a.logo-link img{
        height:            64px;
      }

    .portal-header .inner h1,
    .additional-header .inner h1,
    .site-header .inner h1{
      display:          flex;
      margin:           1em 0;
      font-size:        24px;
      letter-spacing:   0.025em;
      font-weight:      500;
      color:            var(--ec-color-link-blue);
    }

    .portal-header form,
    .additional-header form,
    .site-header form{
      width:            400px;
      display:          flex;
      justify-content:  space-between;
      border:           var(--ec-color-light-gray) solid 1px;
    }
    .portal-header form::after,
    .additional-header form::after,
    .site-header form::after{
      content:      "🔍";
      line-height:  50px;
      padding-right:20px;
    }

    .portal-header form:focus,
    .additional-header form:focus,
    .site-header form:focus{
      border-color:     #000000;
    }

      .portal-header form input,
      .additional-header form input,
      .site-header form input{
        color:          #000000;
        font-size:      16px;
      }

      .portal-header form input::placeholder,
      .additional-header form input::placeholder,
      .site-header form input::placeholder{
        color:          #aaaaaa;
      }

      .portal-header form button.btn,
      .additional-header form button.btn,
      .site-header form button.btn{
        display:                none;
        background-color:       #ebebeb;
        border-radius:          0;
        width:                  auto;
      }
      
      .portal-header form button.btn:hover,
      .additional-header form button.btn:hover,
      .site-header form button.btn:hover{
        background-color:       #d0d0d0;
      }

        .portal-header form button.btn i::before,
        .additional-header form button.btn i::before,
        .site-header form button.btn i::before{
          font-family:  Arial, sans-serif;
          font-weight:  700;
          color:        var(--ec-color-link-blue);
          content:      "Search";
        }

        .portal-header form button.btn:hover i::before,
        .additional-header form button.btn:hover i::before,
        .site-header form button.btn:hover i::before{
          color:        #000000;
        }

/* PALIGO DEFAULT LANGUAGE SELECTOR */

.portal-header .dropup.languages{
  padding:        0;
  margin-right:   1em;
}

  .portal-header .dropup.languages button.btn{
    border:         0;
    color:          var(--ec-color-blue);
    font-size:      1em;
  }

  .portal-header .dropup.languages button.btn:hover,
  .portal-header .dropup.languages button.btn:focus,
  .portal-header .dropup.languages button.btn:active{
    background:       initial;
    color:            #000000;
  }

    .portal-header .dropup.languages button.btn b.caret{
      display:          none;
    }

/* CUSTOM LANGUAGE SELECTOR */

.ec-language-selector{
  position:           relative;
  top:                2px;
  flex-grow:          1;
  text-align:         right;
}

  .ec-language-selector span.unicode-icon{
    position:           relative;
    top:                -2px;
    /* we want the select to open when the user clicks the icon too
    so we overlay it on the select left padding */
    left:               44px;
    display:            inline-block;
    margin:             0 16px 0 0;
    width:              28px;
    height:             20px;
    border-radius:      3px;
    color:              #ffffff;
    background:         var(--ec-color-blue);
    text-align:         center;
    line-height:        20px;
    font-size:          0.75em;
    text-transform:     uppercase;
  }

    /* speech bubble triangle */
    .ec-language-selector span.unicode-icon::after{
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-top-color: var(--ec-color-blue);
      border-bottom: 0;
      border-left: 0;
      margin-left: -3px;
      margin-bottom: -6px;
    }

  .ec-language-selector select{
    border:             none;
    appearance:         none;
    position:           relative;
    background:         transparent;
    color:              var(--ec-color-blue);
    padding:            8px;
    /* speech bubble click hack
    should be the same as span's left property */
    padding-left:       44px;
    padding-right:      44px;
  }
  
  .ec-language-selector select:hover{
    cursor:             pointer;
  }


.ec-title-bar{
  box-sizing:         content-box;
  background:         var(--ec-color-blue);
  width:              100%;
  /* Paligo padding for header is 50px */
  padding:            0 50px;
  margin-left:        -50px;
  margin-top:         1.5em;
}

  .ec-title-bar h1{
    color:              #ffffff;
    font-size:          1.5em;
    line-height:        1.25em;
    padding-top:        1em;
    padding-bottom:     1em;
    margin:             initial;
    text-align:         left;
  }

    .ec-title-bar h1 a:link,
    .ec-title-bar h1 a:visited{
      color:              #ffffff;
    }

    .ec-title-bar h1 a:hover,
    .ec-title-bar h1 a:focus,
    .ec-title-bar h1 a:active{
      color:              #ffffff;
    }




/*
███    ██  █████  ██    ██ 
████   ██ ██   ██ ██    ██ 
██ ██  ██ ███████ ██    ██ 
██  ██ ██ ██   ██  ██  ██  
██   ████ ██   ██   ████   
*/



/* MOBILE header elements */
.ec-hamburger-menu,
ul.ec-mobile-nav{
  display:      none;
}

.ec-top-menu{
  box-sizing:         content-box;
/*  display:            flex;
  flex-direction:     row;
  flex-align:         flex-start;*/
  background:         var(--ec-color-blue-dark);
  width:              100%;
  /* Paligo padding for header is 50px */
  padding:            0 50px 0 50px;
  margin-left:        -50px;
}
  .ec-top-menu a:link,
  .ec-top-menu a:visited{
    font-weight:      500;
    letter-spacing:   var(--ec-ls-wide);
    color:            #ffffff;
    background:       var(--ec-color-blue-dark);
    padding:          7px 10px;
    transition:       var(--ec-transition-all);
  }

  .ec-top-menu a.current{
    font-weight:      700;
    letter-spacing:   var(--ec-ls-condensed);
  }

  .ec-top-menu a:hover,
  .ec-top-menu a:focus,
  .ec-top-menu a:active,
  .ec-top-menu a.current{
    color:             #000000;
    background:        var(--ec-color-yellow);
  }

  .ec-top-menu > ul{
    width:              100%;
    height:             100%;
    background:         var(--ec-color-blue-dark);
    padding:            0;
    text-align:         left;
    display:            flex;
    justify-content:    flex-start;
  }

    .ec-top-menu > ul > li{
      position:       relative;
      display:        flex;
      font-size:      var(--ec-font-base);
      letter-spacing: 0.025em;
      max-width:      18%;
      margin-right:   0;
      /* border-right:   var(--ec-color-blue) solid 1px; */
    }

      .ec-top-menu > ul li a:link,
      .ec-top-menu > ul li a:visited{
        display:          flex;
        align-self:       stretch;
        align-items:      center;
      }
      
    /* 2nd-level menu */

    .ec-top-menu > ul li > ul{
      display:          none;
      position:         absolute;
      top:              100%;
      left:             0;
      width:            auto;
/*      min-width:        400px;*/
      padding:          0;
    }

      .ec-top-menu > ul li > ul li{
        display:          block;
        width:            100%;
        border-top:       var(--ec-color-blue) solid 1px;
      }

      .ec-top-menu > ul li > ul li a:link,
      .ec-top-menu > ul li > ul li a:visited{
        display:          block;
        width:            100%;
        white-space: nowrap;
      }

      /* we don't want second menu elements selected */
      .ec-top-menu > ul li ul li a.current{
        color:            #ffffff;
        background:       var(--ec-color-blue-dark);
        font-weight:      500;
      }

      .ec-top-menu > ul li ul li a.current:hover,
      .ec-top-menu > ul li ul li a.current:focus,
      .ec-top-menu > ul li ul li a.current:active{
        color:            #000000;
        background:       var(--ec-color-yellow);
      }

    .ec-top-menu > ul li:hover > ul,
    .ec-top-menu > ul li:active > ul{
      display:        block;
    }
    
    /* 🏠 icon in the first nav link */
    .ec-nav-home-icon{
      filter:         saturate(0) brightness(10);
      font-size:      1.5em;
    }

    a:hover .ec-nav-home-icon,
    a:focus .ec-nav-home-icon,
    a:active .ec-nav-home-icon,
    a.current .ec-nav-home-icon{
      filter:         saturate(0) brightness(0);
    }

.breadcrumb-container{
  margin:           var(--ec-internal-margin) 0;
}

.breadcrumb-container .breadcrumb-link,
.breadcrumb-container .breadcrumb-node{
  font-size:        var(--ec-font-base);
  letter-spacing:   var(--ec-ls-regular);
}



/*
   ██████  ██████  ███    ██ ████████ ███████ ███    ██ ████████ 
  ██      ██    ██ ████   ██    ██    ██      ████   ██    ██    
  ██      ██    ██ ██ ██  ██    ██    █████   ██ ██  ██    ██    
  ██      ██    ██ ██  ██ ██    ██    ██      ██  ██ ██    ██    
   ██████  ██████  ██   ████    ██    ███████ ██   ████    ██    
*/


.site-content{
  min-height:       100vh;
  position:         relative;
  width:            calc(100% - calc(var(--ec-margin-page) * 2));
  padding:          0 var(--ec-margin-page);
}

  .site-content article#content-wrapper.topic.content-container{
    width:            100%;
    margin:           0;
    padding:          0;
    float:            none;
  }
  
.ec-article-header{
  position:           relative;
  display:            flex;
  flex-direction:     row;
  align-items:        center;
  padding:            var(--ec-internal-margin) 0 var(--ec-internal-margin) 0;
  border-top:         var(--ec-color-blue-dark) solid 1px;
  border-bottom:      var(--ec-color-blue-dark) solid 1px;
  margin-bottom:      var(--ec-internal-margin-big);
}

  .ec-article-header h1{
    flex-grow:          0;
    flex-shrink:        0;
    flex-basis:         45%;
    margin:             0 5% 0 0;
    padding:            0;
    font-weight:        700;
    font-size:          var(--ec-font-huge);
    color:              var(--ec-color-blue-dark);
  }

  p.ec-page-description{
    margin:             0;
    padding:            0;
    flex-basis:         50%;
    font-size:          var(--ec-font-base);
    letter-spacing:     var(--ec-ls-regular);
    text-align:         justify;
  }

  .ec-article-header button.ec-back-button{
    position:           absolute;
    left:               0;
    bottom:             -1.25em;
    border:             0;
    color:              #ffffff;
    padding:            0.5em 2em 0.5em 1.5em;
    letter-spacing:     var(--ec-ls-regular);
    background:         var(--ec-bg-R-to-L);
    background-size:    var(--ec-bg-R-to-L-size);
  }

  .ec-article-header button.ec-back-button:hover,
  .ec-article-header button.ec-back-button:focus,
  .ec-article-header button.ec-back-button:active{
    background-position:  var(--ec-bg-R-to-L-position-hover);
    color:                #000000;
    transition:           var(--ec-transition-all);
  }

h4.featured-title span.toc-count{
  background-color:     var(--ec-color-blue);
}

.featured-content-label,
.featured-content{
  display:      none;
}

.portal-body{
  width:            960px!important;
}

  p.ec-home-description{
    width:            clamp(0px, 100%, 960px);
    color:            var(--ec-color-text);
    font-size:        1.1em;
    letter-spacing:   0.04em;
  }

  p.ec-home-description:last-child{
    margin-bottom:    3em;
  }

.portal-publications .inner .inner-row{
  display:           flex;
  justify-content:    flex-start;
}

  .portal-single-publication{
    height:             320px;
    width:              320px;
    padding:            15px;
    margin-bottom:      0;
  }

    .portal-single-publication a:link,
    .portal-single-publication a:visited{
      /*background:           #ebebeb;*/
      padding:              20px;
      width:                100%;
      font-size:            20px;
      display:              flex;
      justify-content:      center;
      align-items:          center;
      background:           #e1ecf9;
      border:               #cccccc solid 1px;
      box-shadow:           none;
      transition:           all 300ms ease-out;
    }
    .portal-single-publication a:hover,
    .portal-single-publication a:focus,
    .portal-single-publication a:active{
      background:           var(--ec-color-link-blue);
      border-color:         var(--ec-color-link-blue);
    }
    

      .portal-single-publication a .publication-icon{
/*        width:                28px;
        height:               28px;
        font-size:            28px;
        line-height:          50px;
        background:           transparent;*/
        display:              none;
      }

        .portal-single-publication a .publication-icon i.fa{
          color:                #303030;
        }

      .portal-single-publication a:link h3,
      .portal-single-publication a:visited h3{
        /*color:                var(--ec-color-link-blue);*/
        color:                #404040;
        font-size:            1em;
        font-weight:          700;
        /*margin:               10px 0 0 0;*/
        width:                100%;
        margin:               0 0 0 0;
        padding-bottom:       20px;
        position:             relative;
      }

      .portal-single-publication a:hover h3,
      .portal-single-publication a:focus h3,
      .portal-single-publication a:active h3{
        color:                #ffffff;
      }

        /* hack to create an hr below links */
        .portal-single-publication a:link h3::after {
          content: '';
          display: block;
          position: absolute;
          bottom: 0;
          width: 30%;
          left: 35%;
          border-top: 2px solid #404040;
        }
        .portal-single-publication a:hover h3::after {
          border-color: #ffffff;
        }

/* avoid sidebar glitching (loaded then removed in favor of the nav)
   while still making it visible for non JS users */

.site-body aside.site-sidebar{
  animation: delayOpacity 1s forwards;
}

.site-sidebar{
  background:             var(--ec-color-blue);
}

  .site-sidebar .site-sidebar-header a{
    width:                  100%;
    display:                flex;
    align-items:            stretch;
    justify-content:        center;
  }

  .site-sidebar .site-sidebar-header a > img#logotype-pageheader{
    flex-grow:              1;
    width:                  100%;
    height:                 auto;
  }


/*.breadcrumb .breadcrumb-link:first-child span{
  cursor:     pointer;
  color:      var(--ec-color-link-blue);
}
*/
.breadcrumb-link a:link,
.breadcrumb-link a:visited{
  text-decoration:  none;
  color:            var(--ec-color-link-blue);
}

.breadcrumb-link a:hover,
.breadcrumb-link a:focus,
.breadcrumb-link a:active{
  text-decoration:  underline;
  color:            var(--ec-color-link-blue);
}



/* make sure the content takes almost all the screen length
Way too much margin in the original CSS */
article.topic.content-container,
ul.pager,
.site-footer{
  margin-left:          30px;
  width:                calc(100% - 90px);
}

  article.content-container{
  }


.ec-sub{
  font-size:        0.75em!important;
  font-style:       italic;
}

ul.pager li a{
  color:        var(--ec-color-blue);
  transition:   all 200ms ease-out;
}

  ul.pager li a:hover{
    background:       var(--ec-color-blue);
  }


/* click to zoom on an image > avoid black background
/* won't work because it is set inline */
.image-thumbnail .material-placeholder .materialboxed-overlay{
  opacity:        0.3!important;
}

.topic-content p.infog-title{
  display:        inline-block;
  padding-top:    12px;
  padding-right:  12px;
  border-top:     var(--ec-color-blue) solid 1px;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-weight:    700;
  line-height:    1.5em;
  color:          var(--ec-color-blue);
}

/* make footer stick to the bottom for short pages */
.site-content{
  position:         relative;
  /* remove big Paligo margin for the old side panel */
  margin-left:      auto;
  width:            100%;
}
  
  .site-content .toolbar{
    animation: delayOpacity 1s forwards;
  }

  .site-footer{
    position:       absolute;
    bottom:         16px;
  }


/* PROCEDURES */


.ec-procedure{
  display:          flex;
  flex-direction:   row;
  width:            100%;
  align-items:      stretch;
  justify-content:  flex-start;
  margin-bottom:    var(--ec-margin-page);
}

  .ec-procedure-main-panel{
    padding:          var(--ec-internal-margin) var(--ec-internal-margin-small) var(--ec-internal-margin) 0;
    display:          flex;
    flex-direction:   column;
    flex-grow:        0;
    width:            38%;
  }

    h2.ec-procedure-title{
      margin:           0 0 var(--ec-internal-margin) 0;
      padding:          0;
      font-size:        var(--ec-font-bigger);
      color:            var(--ec-color-blue-dark);
      font-weight:      700;
    }

    ol.ec-procedure-steps{
      list-style:       none;
      counter-reset:    item;
      padding:          0;
    }

      ol.ec-procedure-steps li{
        counter-increment:item;
        margin-bottom:    var(--ec-internal-margin-small);
      }

        ol.ec-procedure-steps li a:before{
          content:          counter(item);
          display:          inline-block;
          width:            2em;
          height:           2em;
          background:       var(--ec-bg-L-to-R);
          background-size:  var(--ec-bg-L-to-R-size);
          color:            white;
          line-height:      2em;
          text-align:       center;
          margin-right:     var(--ec-internal-margin-small);
        }

        ol.ec-procedure-steps li.ec-current a:before{
          color:            var(--ec-color-text);
          background-position: var(--ec-bg-L-to-R-position-hover);
        }

        ol.ec-procedure-steps li:hover a:before,
        ol.ec-procedure-steps li:focus a:before,
        ol.ec-procedure-steps li:active a:before{
          color:            var(--ec-color-text);
          background-position: left bottom;
          transition:       var(--ec-transition-all);
        }

        ol.ec-procedure-steps li.ec-current a:link,
        ol.ec-procedure-steps li.ec-current a:visited,
        ol.ec-procedure-steps li.ec-current a:hover,
        ol.ec-procedure-steps li.ec-current a:focus,
        ol.ec-procedure-steps li.ec-current a:active{
          color:            var(--ec-color-text);
          cursor:           not-allowed;
          text-decoration:  none;
        }

        ol.ec-procedure-steps li a:link,
        ol.ec-procedure-steps li a:visited{
          display:          block;
          color:            var(--ec-color-blue-dark);
          text-decoration:  none;
          white-space:      nowrap;
          overflow:         hidden;
          text-overflow:    ellipsis;
        }

        ol.ec-procedure-steps li a:hover,
        ol.ec-procedure-steps li a:focus,
        ol.ec-procedure-steps li a:active{
          text-decoration:  underline;
        }


  .ec-procedure-details-panel{
    padding:          var(--ec-internal-margin) 0 var(--ec-internal-margin) var(--ec-internal-margin-small);
    border-left:      var(--ec-border-blue);
    flex-grow:        0;
    width:            62%;
  }

    p.ec-procedure-details-default{
      margin-top:       var(--ec-internal-margin);
      text-align:       center;
      align-self:       center;
      font-size:        var(--ec-font-biggerer);
      color:            var(--ec-color-lighter-gray);
    }



/* FAQs */

.ec-faq{
  display:         flex;
  flex-direction:  row;
  flex-wrap:       wrap;
  align-items:     flex-start;
  justify-content: space-between;
}

  .ec-faq > div{
    position:        relative;
    width:           calc(48% - var(--ec-internal-margin));
    padding-left:    var(--ec-internal-margin);
    border-left:     var(--ec-border-blue);
    margin-bottom:   var(--ec-margin-page);
  }
    
    .ec-faq > div h2{ /* the question */
      margin:         10px 0;
      font-size:      var(--ec-font-biggerer);
      color:          var(--ec-color-blue-dark);
      font-weight:    700;
      cursor:         pointer;
    }

    .ec-faq > div p{ /* the answer */
      margin-top:     var(--ec-internal-margin);
    }

    .ec-faq > div button{
      position:        absolute;
      left:            -12px;
    }
    
    .ec-faq > div button.ec-copy-button{
      top:              12px;
      background: linear-gradient(to top, var(--ec-color-blue-dark) 50%, var(--ec-color-yellow) 50%);
      background-size: 100% 200%;
      background-position: left bottom;
    }

    .ec-faq > div button.ec-copy-button:hover,
    .ec-faq > div button.ec-copy-button:focus,
    .ec-faq > div button.ec-copy-button:active{
      background-position: left top;
    }

    .ec-faq > div button.ec-copy-button:hover img,
    .ec-faq > div button.ec-copy-button:focus img,
    .ec-faq > div button.ec-copy-button:active img{
      filter: brightness(0);
    }

    .ec-faq > div button.ec-show-answer-button{
      background: linear-gradient(to top, var(--ec-color-blue-dark) 50%, var(--ec-color-yellow) 50%);
      background-size: 100% 200%;
      background-position: left bottom;
    }
    
    .ec-faq > div button.ec-show-answer-button:hover,
    .ec-faq > div button.ec-show-answer-button:focus,
    .ec-faq > div button.ec-show-answer-button:active{
      background-position: left top;
    }

    

/* ENTITIES */

.ec-entity{
  display:          inline-block;
  background:       var(--ec-color-blue-dark);
  padding:          7px 9px 5px 9px;
  margin-right:     5px;
  margin-bottom:    5px;
  border-radius:    var(--ec-font-small);
  line-height:      var(--ec-font-small);
  font-size:        var(--ec-font-small);
  letter-spacing:   var(--ec-ls-regular);
  text-align:       center;
  color:            #ffffff;
  font-style:       normal;
  transition:       filter var(--ec-transition-time) var(--ec-easing);
}

.ec-entity:hover,
.ec-entity:focus,
.ec-entity:active{
  cursor:           pointer;
  filter:           brightness(133%);
  /* animation:        var(--ec-animation-bump); */
}

.ec-color-0{ background:       var(--ec-color-blue); }
.ec-color-1{ background:       var(--ec-color-success-120); }
.ec-color-2{ background:       var(--ec-color-yellow);
             color:            #000000; }
.ec-color-3{ background:       var(--ec-color-error); }
.ec-color-4{ background:       var(--ec-color-danger-50);
             color:            #000000; }
.ec-color-5{ background:       var(--ec-color-ooc-purple); }
.ec-color-6{ background:       var(--ec-color-blue-lighter);
             color:            #000000; }
.ec-color-7{ background:       var(--ec-color-lighter-gray);
             color:            #000000; }
.ec-color-8{ background:       var(--ec-color-link-blue); }
.ec-color-9{ background:       var(--ec-color-ooc-cyan);
             color:            #000000; }
.ec-color-10{ background:      #000000; }
.ec-color-11{ background:      var(--ec-color-accent-50);
              color:           #000000 }
.ec-color-12{ background:      var(--ec-color-success-50);
              color:           #000000 }
.ec-color-13{ background:      var(--ec-color-warning-100); }
.ec-color-14{ background:      var(--ec-color-warning-140); }
.ec-color-15{ background:      var(--ec-color-link-blue); }

.ec-entity.ec-filtered-out{
  filter:     saturate(0) opacity(25%);
}





/* Back to top (direct child of body) */

a.back-to-top-button{
  box-sizing:       content-box;
  width:            15px;
  height:           15px;
  position:         fixed;
  bottom:           60px;
  right:            15px;
  padding:          15px;
  color:            #ffffff;
  text-decoration:  none;
  text-align:       center;
  font-weight:      700;
  font-size:        1em;
  line-height:      15px;
  background-color: var(--ec-color-blue);
  opacity:          0.3;
  transition:       opacity 300ms ease-out;
  border-radius:    5px;
  z-index:          99;
  user-select:      none;
}

a.back-to-top-button:hover,
a.back-to-top-button:focus,
a.back-to-top-button:active{
  cursor:           pointer;
  text-decoration:  none;
  opacity:          1;
}

/* redundant title for info frames
"admonitions" */
.caution h3.title,
.important h3.title,
.note h3.title,
.warning h3.title{
  display: none;
}

section .note p{
  margin:0.8em 0 1em 0;
}

/* columns */

section.ec-columns{
  width:          33%;
  min-height:     300px;
  padding:        var(--ec-internal-margin);
  margin:         0 0 var(--ec-internal-margin) 0;
  float:          left;
  border-left:    var(--ec-color-blue-dark) solid 1px;
  overflow:       hidden;
}

  section.ec-columns h2{
    font-size:      var(--ec-font-bigger);
    font-weight:    700;
    color:          var(--ec-color-blue-dark);
    margin:         0 0 var(--ec-internal-margin) 0;
  }

  section.ec-columns p{
    font-size:      var(--ec-font-big);
    margin-bottom:  0.5em;
  }
  


/*
████████ ██ ██      ███████ ███████ 
   ██    ██ ██      ██      ██      
   ██    ██ ██      █████   ███████ 
   ██    ██ ██      ██           ██ 
   ██    ██ ███████ ███████ ███████ 
 */                                 
                                    


div.ec-tiles-container,
div.ec-link-buttons-container{
  clear:         both;
  overflow:      hidden;
}

div.ec-link-buttons-container{
  display:        flex;
  justify-content:flex-start;
  flex-wrap:      wrap;
}

/* section element in the original markup
  but transformed into links (a element) with the script */

/* NB link-button are similar to ec-tiles
   but only with an h2 and smaller in height */
a.ec-link-button:link,
a.ec-link-button:visited,
a.ec-tile:link,
a.ec-tile:visited{
  width:          calc(25% - var(--ec-internal-margin-small));
  margin:         0 var(--ec-internal-margin-small) var(--ec-internal-margin-small) 0;
  float:          left;
  border:         none;
  padding:        30px;
  text-align:     left;
  background:     var(--ec-bg-L-to-R);
  background-size:var(--ec-bg-L-to-R-size);
}

a.ec-tile{
  height:         var(--ec-tile-height);
  display:        block;
}

a.ec-link-button,
a.ec-link-button{
  display:            flex;
  flex-direction:     column;
  justify-content:    center;
  min-height:         80px;
}

a.ec-link-button:hover,
a.ec-link-button:focus,
a.ec-link-button:active,
a.ec-tile:hover,
a.ec-tile:focus,
a.ec-tile:active{
  background-position: var(--ec-bg-L-to-R-position-hover);
  transition:     var(--ec-transition-all);
}

a.ec-link-button:hover h2,
a.ec-link-button:focus h2,
a.ec-link-button:active h2,
a.ec-tile:hover h2,
a.ec-tile:focus h2,
a.ec-tile:active h2,
a.ec-tile:hover p,
a.ec-tile:focus p,
a.ec-tile:active p{
  color:               #000000;
}

/* removes the margin right for end of the line elements */
a.ec-link-button:nth-child(4n),
a.ec-tile:nth-child(4n){
  margin-right:         0;
  width:                25%;
}

  a.ec-link-button h2,
  a.ec-tile h2{
    color:          #ffffff;
    font-size:      var(--ec-font-bigger);
    font-weight:    500;
  }

  a.ec-tile h2{
    margin:         0 0 1em 0;
  }

  a.ec-link-button h2{
    margin:         0 0 0 0;
  }

  a.ec-tile p{
    color:          #ffffff;
    font-size:      var(--ec-font-big);
  }

  a.ec-tile.ec-icon-tile{
    height:           var(--ec-icon-tile-height);
    display:          flex;
    flex-direction:   row;
    align-items:      center;
  }

  a.ec-tile.ec-icon-tile h2{
    margin-left:      var(--ec-internal-margin-small);
    margin-bottom:    0;
  }

  a.ec-tile.ec-icon-tile img{
    height:           30px;
    width:            30px;
    /* original is black, we want white */
    filter:           invert(100%);
  }

  a.ec-tile.ec-icon-tile:hover img,
  a.ec-tile.ec-icon-tile:focus img,
  a.ec-tile.ec-icon-tile:active img {
    filter:           none;
    animation:        var(--ec-animation-bump);
  }

  div.ec-zoomable-container{
    position:           relative;
    display:            flex;
  }

  div.ec-zoomable-container.ec-zoomed{
    position:           fixed;
    align-items:        center;
    justify-content:    center;
    top:                0;
    left:               0;
    width:              100%;
    height:             100%;
    background:         rgba(0,0,0,0.3);
    z-index:            99999;
  }

    img.ec-zoomable{
      cursor:           zoom-in;
      transition:       transform 200ms ease-out, box-shadow 200ms ease-out;
    }

    img.ec-zoomable:hover,
    img.ec-zoomable:active,
    img.ec-zoomable:focus,
    img.ec-zoomable:target{
      transform:        matrix(1.025, 0, 0, 1.025, 0, 0);
      -webkit-box-shadow:var(--ec-hover-shadow);
      -moz-box-shadow:  var(--ec-hover-shadow);
      box-shadow:       var(--ec-hover-shadow);
    }

    /* when zoomed in */

    .ec-zoomed img.ec-zoomable{
      cursor:           zoom-out;
      height:           auto;
    }

    .ec-zoomed img.ec-zoomable:hover,
    .ec-zoomed img.ec-zoomable:active,
    .ec-zoomed img.ec-zoomable:focus,
    .ec-zoomed img.ec-zoomable:target{
      transform:        none;
      -webkit-box-shadow:none;
      -moz-box-shadow:  none;
      box-shadow:       none;
    }

    




.footer-content{
  clear:            both;
  padding-top:      2em;
}

div.copyright{
  display:          block;
  width:            100%;
  float:            none;
  padding:          0 var(--ec-margin-page);
  font-size:        0.75em;
}

a.contact-us-link:link,
a.contact-us-link:visited{
  display:          inline-block;
  text-decoration:  none;
  color:            #ffffff;
  background:       var(--ec-color-link-blue);
  padding:          6px 12px;
  margin-left:      0;
  border:           var(--ec-color-link-blue) solid 1px;
  border-radius:    3px;
  transition:       all ease-out 300ms;
}

a.contact-us-link:hover,
a.contact-us-link:focus,
a.contact-us-link:active{
  background:       #4093c7;
}

a.ec-contact-email:link,
a.ec-contact-email:visited{
  color:            #ffffff;
}

a.ec-contact-email:hover,
a.ec-contact-email:focus,
a.ec-contact-email:active{
  text-decoration:  underline;
}

/* if there is no footer, it gets directly appended to the body
so we need to change position and colors for visibility */
body > a.ec-contact-email:link,
body > a.ec-contact-email:visited{
  position:         relative;
  top:              -2.5em;
  width:            150px;
  margin:           0 auto;
  display:          block;
  text-align:       center;
  color:            var(--ec-color-link-blue);
}


#search-result-wrapper{
  margin-top: 0;
}


#bottom-pager{

}

  #bottom-pager ul li.previous,
  #bottom-pager ul li.next{
    display:          none;
  }

.informalfigure .flex-container .flex-item{
  align-self:     center;
}


a.header-link{
  display:          none!important;
}


/*
███████  ██████ ██          ███████  ██████   ██████  ████████ ███████ ██████  
██      ██      ██          ██      ██    ██ ██    ██    ██    ██      ██   ██ 
█████   ██      ██          █████   ██    ██ ██    ██    ██    █████   ██████  
██      ██      ██          ██      ██    ██ ██    ██    ██    ██      ██   ██ 
███████  ██████ ███████     ██       ██████   ██████     ██    ███████ ██   ██
*/

/* These are the official ECL Footer class names */

.ecl-site-footer {
  background-color: var(--ec-color-blue);
  color: #ffffff;
  display: flex;
  margin: 2rem 0 0 0;
  padding: 0 0 0 0;
}

  .ecl-container {
    box-sizing:         border-box;
    margin-inline-end:  auto;
    margin-inline-start:auto;
    position:           relative;
    padding:            0 var(--ec-margin-page) 16px var(--ec-margin-page);
    max-width:          100%;
    margin:             auto;
  }

    .ecl-site-footer__row {
      border-bottom:  2px solid var(--ec-color-blue-lighter);
      display:        grid;
      grid-gap:       0 2rem;
      column-gap:     2rem;
      grid-template-columns: repeat(3, 1fr);
      padding:        0 0 2rem 0;
    }

    .ecl-site-footer__row:last-child{
      border:         none;
    }

      .ecl-site-footer__column {
      }

        .ecl-site-footer__section{
          padding-top:     2rem;
        }

          ul.ecl-site-footer__list{
            list-style:       none;
            padding:          1em 0 0 0;
          }

            ul.ecl-site-footer__list li{
              font-size:        0.9em;
              margin-bottom:    1em;
            }

          h2.ecl-site-footer__title {
            color:      #ffffff;
            margin:       0;
            font-size:    1em;
            font-weight:  bold;
            border-bottom: var(--ec-color-blue-lighter) solid 2px;
            padding-bottom: 1em;
          }

            .ecl-site-footer a {
              color:        #ffffff;
            }

            .ecl-site-footer a:hover,
            .ecl-site-footer a:focus,
            .ecl-site-footer a:active{
              color:        #ffffff;
              text-decoration: underline;
            }

            .ecl-site-footer a.contact-us-link:hover,
            .ecl-site-footer a.contact-us-link:focus,
            .ecl-site-footer a.contact-us-link:active{
              text-decoration: none;
            }

          .ecl-site-footer__description {
            color: var(--ec-color-blue-lightest);
            font-size:        0.9em;
            padding-top:      1em;
          }

          img.ecl-site-footer__logo-image-desktop{
            margin-top: 1em;
          }

/* MODALS */

.ec-modal-overlay{
  position:           fixed;
  top:                0;
  left:               0;
  display:            none;
  justify-content:    center;
  align-items:        center;
  width:              100%;
  height:             100%;
  margin:             0;
  padding:            0;
  background:         rgba(0, 0, 0, 0.5);
  z-index:            9999;
}

.ec-modal-overlay.visible{
  display:            flex;
}

.ec-modal-container{
  position:       relative;
  display:        none;
  width:          600px;
  padding:        20px;
  margin:         0 auto;
  background:     #ffffff;
  border-radius:  5px;
  box-shadow:     0px 0px 20px 10px rgba(0,0,0,0.3);
}

.ec-modal-container.visible{
  display:            block;
}

  .ec-modal-container a.ec-close-button{
    position:         absolute;
    top:              -15px;
    right:            -15px;
    display:          block;
    border:           #ffffff solid 1px;
    color:            #ffffff;
    border-radius:    50%;
    font-size:        24px;
    line-height:      24px;
    width:            30px;
    height:           30px;
    margin:           0 auto;
    text-align:       center;
    background:       var(--ec-color-link-blue);
    padding:          3px;
    transition:       all ease-out 300ms;
  }

  .ec-modal-container a.ec-close-button:hover,
  .ec-modal-container a.ec-close-button:focus,
  .ec-modal-container a.ec-close-button:active{
    background:       #4093c7;
  }

  .ec-modal-container h2{
    margin:           0.25em 0;
    font-weight:      700;
  }

  .ec-contact-form{
    width:              100%;
  }

    .ec-contact-form label{
      display:            block;
      width:              100%;
      font-size:          12px;
      text-transform:     uppercase;
      letter-spacing:     0.025em;
      margin:             1em 0 0 0;
    }

    label span.ec-mandatory-star{
      color:              #f00000;
      font-weight:        bold;
    }

    .ec-contact-form input,
    .ec-contact-form select,
    .ec-contact-form textarea{
      width:              100%;
      border:             #999999 solid 1px;
      font-size:          var(--ec-font-base);
      color:              #555555;
      border-radius:      3px;
      padding:            5px 5px;
    }

    .ec-contact-form button{
      width:            100%;
      color:            #ffffff;
      background:       var(--ec-color-link-blue);
      padding:          6px 12px;
      margin-top:       0.5em;
      border:           var(--ec-color-link-blue) solid 1px;
      border-radius:    3px;
      transition:       all ease-out 300ms;
    }
      .ec-contact-form button:hover,
      .ec-contact-form button:focus,
      .ec-contact-form button:active{
        background:       #4093c7;
      }

      .ec-contact-form input:focus,
      .ec-contact-form select:focus,
      .ec-contact-form textarea:focus{
        border-color:       #000000;
        color:              #000000;
      }

/*      .ec-contact-form input:required:invalid,
      .ec-contact-form input:focus:invalid,
      .ec-contact-form select:required:invalid,
      .ec-contact-form select:focus:invalid,
      .ec-contact-form textarea:required:invalid,
      .ec-contact-form textarea:focus:invalid{
        border-color:         #f00000;
      }*/

    .ec-contact-form em{
      display:          block;
      margin-top:       1em;
      font-size:        12px;
      font-style:       normal;
      text-align:       justify;
    }




/* GROWLER */

.ec-growler{
  position:           fixed;
  bottom:             var(--ec-margin-page);
  right:              var(--ec-margin-page);
  padding:            var(--ec-internal-margin);
  max-width:          300px;
  box-shadow:         0px 0px 10px 5px rgba(0,0,0,0.2);
  animation:          fadeIn 300ms ease-in forwards;
  z-index:            999999;
}

.ec-growler.ec-error,
.ec-growler.ec-error a{
  background:         var(--ec-color-error);
  color:              #ffffff;
}

.ec-growler.ec-info,
.ec-growler.ec-info a{
  background:         var(--ec-color-blue);
  color:              #ffffff;
}

.ec-growler.ec-success,
.ec-growler.ec-success a{
  background:         var(--ec-color-success);
  color:              #ffffff;
}

.ec-growler.ec-warning,
.ec-growler.ec-warning a{
  background:         var(--ec-color-warning);
  color:              #000000;
}

  .ec-growler h3{
    margin:           0 0 0.5em 0;
    font-size:        var(--ec-font-bigger);
    font-weight:      700;
    /* text-transform:   uppercase; */
  }

  .ec-growler p{
    margin:           0;
    font-size:        var(--ec-font-base);
    letter-spacing:   var(--ec-ls-regular);
    font-weight:      500;
  }

  .ec-growler a{
    position:         absolute;
    display:          block;
    margin:           0;
    padding:          0;
    line-height:      32px;
    width:            32px;
    height:           32px;
    right:            -16px;
    top:              -16px;
    font-size:        20px;
    color:            #ffffff;
    text-align:       center;
    border:           #ffffff solid 1px;
    cursor:           pointer;
  }




/* LOCAL / DEBUGGING */



/* PROJECT SELECTOR FOR LOCAL TESTING */

.ec-project-selector{
  position:           absolute;
  top:                75px;
  z-index:            9999;
  left:               calc(50% - 100px);
  width:              180px;
  display:            block;
  padding:            10px;
  border:             none;
  background:         var(--ec-color-yellow);
  color:              #000000;
}

.ec-project-selector:hover,
.ec-project-selector:focus{
  background:         var(--ec-color-yellow);
}

/* DEPRECATED ELEMENTS */

.ec-deprecated{
  border:             var(--ec-color-light-gray) solid 3px;
  position:           relative;
  cursor:             pointer;
}

  .ec-deprecated:hover .ec-tooltip,
  .ec-deprecated:focus .ec-tooltip,
  .ec-deprecated:active .ec-tooltip{
    display:            inline-block;
  }

.ec-deprecated.ec-warning{
  border-color:       var(--ec-color-warning);
}

.ec-deprecated.ec-error{
  border-color:       var(--ec-color-error);
}

  .ec-tooltip{
    position:          absolute;
    left:              calc(50% - 150px);
    top:               0;
    display:           none;
    width:             300px;
    padding:           var(--ec-internal-margin-small);
    background:        var(--ec-color-text);
    color:           #ffffff;
    z-index:           99;
    /* box-shadow:        0 0 15px rgba(0, 0, 0, 0.3); */
  }

    .ec-tooltip em{
      font-size:         var(--ec-font-small);
    }

  .ec-tooltip.ec-error{
    background-color:  var(--ec-color-error);
  }

  .ec-tooltip.ec-warning{
    background-color:  var(--ec-color-warning);
    color:             #000000;
  }

  .ec-tooltip.ec-notice{
    background-color:  var(--ec-color-blue-dark);
  }

    .ec-tooltip p{
      font-size:       var(--ec-font-base);
      margin:          0;
    }

    .ec-tooltip p.ec-tooltip-title{
      font-size:       var(--ec-font-big);
      font-weight:     700;
      margin-bottom:   0.5em;
    }


  .ec-notice-icon{
    position:       relative;
    display:        inline-block;
    width:          30px;
    height:         30px;
    padding:        10px;
    background:     var(--ec-color-text);
    cursor:         pointer;
  }

  .ec-notice-icon:hover .ec-tooltip,
  .ec-notice-icon:focus .ec-tooltip,
  .ec-notice-icon:active .ec-tooltip{
    display:            inline-block;
  }
  
  .ec-notice-icon.ec-error{
    background-color: var(--ec-color-error);
  }
  
  .ec-notice-icon.ec-warning{
    background-color: var(--ec-color-warning);
  }

  .ec-notice-icon.ec-notice{
    background-color: var(--ec-color-blue-dark);
  }

  .ec-notice-icon::before{
    position:     absolute;
    top:          0;
    left:         0;
    content:      "⚠";
    color:        #ffffff;
    width:        30px;
    line-height:  30px;
    text-align:   center;
    font-size:    var(--ec-font-bigger);
  }

  .ec-notice-icon.ec-error::before{
    content:      "🛇";
  }

  .ec-notice-icon.ec-warning::before{
    content:      "⚠";
    color:        #000000;
  }

  .ec-notice-icon.ec-notice::before{
    content:      "ℹ️";
  }



/*
███    ███ ███████ ██████  ██  █████  
████  ████ ██      ██   ██ ██ ██   ██ 
██ ████ ██ █████   ██   ██ ██ ███████ 
██  ██  ██ ██      ██   ██ ██ ██   ██ 
██      ██ ███████ ██████  ██ ██   ██ 
*/



@media screen and (max-width: 1440px){
  a.ec-tile:link{
    height:         calc(var(--ec-tile-height) * 1.25);
  }

  a.ec-tile.ec-icon-tile{
    height:         calc(var(--ec-icon-tile-height) * 1.5);
  }
}


@media screen and (max-width: 1200px){
  a.ec-link-button:link,
  a.ec-tile:link{
    width:          calc(33.333% - var(--ec-internal-margin-small));
  }

  /* reset all tiles to normal tile style */
  a.ec-link-button:nth-child(4n),
  a.ec-tile:nth-child(4n){
    width:                calc(33.333% - var(--ec-internal-margin-small));
    margin-right:         var(--ec-internal-margin-small);
  }

  a.ec-link-button:nth-child(3n),
  a.ec-tile:nth-child(3n){
    width:                33%;
    margin-right:         0;
  }

  

  /* HEADER */

  /* primary nav */
  .ec-top-menu{
    display:  none;
  }

  .ec-title-bar{
    display:        flex;
    justify-content:space-between;
    align-items:    center;
  }

  .ec-hamburger-menu{
    flex:           none;
    display:        inline-block;
    color:          #ffffff;
    line-height:    64px;
    height:         64px;
    width:          64px;
    padding:        0;
    border-radius:  50%;
    font-size:      24px;
    text-transform: uppercase;
    text-align:     center;
    box-sizing:     content-box;
  }

  .ec-hamburger-menu:hover,
  .ec-hamburger-menu:focus,
  .ec-hamburger-menu:active{
    color:          #ffffff;
    background:     var(--ec-color-blue-dark);
    cursor:         pointer;
  }

  .ec-hamburger-menu.ec-open{
    display:        none;
  }

  .ec-close-mobile-nav{
    position:       absolute;
    top:            15px;
    right:          15px;
    padding:        10px;
    width:          40px;
    height:         40px;
    line-height:    40px;
    text-align:     center;
    border-radius:  50%;
    font-size:      2em;
    color:          #ffffff;
    box-sizing:     content-box;
  }

  .ec-close-mobile-nav:hover,
  .ec-close-mobile-nav:focus,
  .ec-close-mobile-nav:active{
    color:          #ffffff;
    background:     var(--ec-color-blue-dark);
  }


  ul.ec-mobile-nav.ec-open{
    list-style:     none;
    display:        flex;
    flex-direction: column;
    justify-content:center;
    align-items:    flex-start;
    position:       fixed;
    top:            0;
    right:          0;
    height:         100%;
    width:          360px;
    padding:        0;
    box-sizing:     border-box;
    background-color:var(--ec-color-blue-dark);
    animation:      slideFromRight 200ms ease-in;
    -webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.3);
    z-index:        9999;
  }
    ul.ec-mobile-nav li{
      width:          100%;
    }

      ul.ec-mobile-nav li a:link,
      ul.ec-mobile-nav li a:visited{
        display:        block;
        font-size:      1.15em;
        text-align:     left;
        padding:        10px 30px;
        color:          #ffffff;
        border-bottom:  #002565 solid 1px;
        letter-spacing: var(--ec-ls-regular);
        transition:     var(--ec-transition-all);
      }

      ul.ec-mobile-nav li a:hover,
      ul.ec-mobile-nav li a:focus,
      ul.ec-mobile-nav li a:active,
      ul.ec-mobile-nav li a.current{
        background:     var(--ec-color-yellow);
        color:          #000000;
      }

        /* we don't display 2nd-level menu items on mobile */
        ul.ec-mobile-nav li > ul{
          display:            none;
        }
  
  .breadcrumb-container{
    margin-top:         0.5em;
  }

  /* PROCEDURES */
  
  .ec-procedure {
    flex-direction:  column;
  }

    .ec-procedure-main-panel{
      width:            100%;
      padding:          0;
    }

    .ec-procedure-details-panel{
      width:            100%;
      padding:          var(--ec-internal-margin) 0 0 0;
      border-left:      none;
      border-top:       var(--ec-border-blue);
    }

    img.ec-zoomable{
      width:            100%;
    }
  


  /* FAQs */
  
  .ec-faq{
    flex-direction:  column;
  }

    .ec-faq > div{
      width:           calc(100% - var(--ec-internal-margin));
    }
      
      .ec-faq > div h2{ /* the question */
        margin:         var(--ec-internal-margin) 0 10px 0;
      }

      .ec-faq > div button.ec-copy-button{
        top:            var(--ec-internal-margin);
      }

}

/*
████████  █████  ██████  ██      ███████ ████████ 
   ██    ██   ██ ██   ██ ██      ██         ██    
   ██    ███████ ██████  ██      █████      ██    
   ██    ██   ██ ██   ██ ██      ██         ██    
   ██    ██   ██ ██████  ███████ ███████    ██    
*/

@media screen and (max-width: 991px){

  /* HOMEPAGE */

  .ec-home-intro{
    width:          100%;
  }

  .portal-body{
    width:          100%!important;
  }

  .portal-publications{
    margin-top:       0px;
  }

    .portal-publications .inner h2{
      margin-top: 30px;
    }

    .portal-publications .inner .inner-row{
      justify-content: center;
    }

    /* CONTENTS */

    .ec-article-header{
      flex-direction:     column;
    }
    .ec-article-header h1{
      margin:             0;
      padding-bottom:     var(--ec-internal-margin);
      text-align:         center;
    }
  
    p.ec-page-description{
    }
  
    section.ec-columns{
      width:          50%;
    }

    a.ec-link-button:link,
    a.ec-tile:link{
      width:          calc(50% - var(--ec-internal-margin-small));
    }
    
    /* reset all tiles to normal tile style */
    a.ec-link-button:nth-child(3n),
    a.ec-link-button:nth-child(4n),
    a.ec-tile:nth-child(3n),
    a.ec-tile:nth-child(4n){
      width:                calc(50% - var(--ec-internal-margin-small));
      margin-right:         var(--ec-internal-margin-small);
    }

    a.ec-link-button:nth-child(2n),
    a.ec-tile:nth-child(2n){
      margin-right:         0;
      width:                50%;
    }
  
    .ec-language-selector{
      top: 5px;
    }

      .ec-language-selector select{
        padding-left:   0;
        padding-right:  10px;
      }
    
      .ec-language-selector span.unicode-icon{
        left:           0;
        top:            0;
      }
}

/*
██████  ██   ██  ██████  ███    ██ ███████ 
██   ██ ██   ██ ██    ██ ████   ██ ██      
██████  ███████ ██    ██ ██ ██  ██ █████   
██      ██   ██ ██    ██ ██  ██ ██ ██      
██      ██   ██  ██████  ██   ████ ███████
*/

@media screen and (max-width: 767px){

  .ec-hr{
    margin-left:    auto;
    margin-right:   auto;
  }

  /* HEADER */
  .portal-header,
  .additional-header{
    padding-top:      2em;
  }

  .portal-header .inner,
  .additional-header .inner{
    display:    flex;
    justify-content: space-between;
    align-items: center;
  }

    .portal-header .inner a.logo-link,
    .additional-header .inner a{
      top:            -8px;
    }

    .portal-header .inner a.logo-link img,
    .additional-header .inner a img{
      display:        block;
      width:          180px;
      height:         auto;
      margin:         0 auto;
    }

  .portal-header .portal-search,
  .additional-header .site-sidebar-search{
    width:          100%;
    display:        block;
    margin:         0 auto 0 5px;
    height:         30px;
  }
    .portal-header .portal-search .search-field,
    .additional-header .site-sidebar-search .search-field{
      display:      block;
      width:        100%;
      height:       30px;
      padding:      3px 5px;
    }

  /* we remove the search field icon */
  .portal-header form::after,
  .additional-header form::after,
  .site-header form::after{
    display:    none;
  }


  /* BREADCRUMB */

  .breadcrumb-container{
    margin-top:         1em;
  }

    .breadcrumb-container .breadcrumb-link,
    .breadcrumb-container .breadcrumb-link a,
    .breadcrumb-container .breadcrumb-node{
      text-align:       center;
      display:          block;
    }

      .breadcrumb-container .breadcrumb-link a,
      .breadcrumb-container .breadcrumb-node{
        padding:           0 0 0 0;
      }

      .breadcrumb-container .breadcrumb-link::before,
      .breadcrumb-container .breadcrumb-node::before{
        display:          block;
        content:          "↓";
      }

      .breadcrumb-container .breadcrumb-link:first-child::before{
        display:          none;
      }

  .ec-small-button{
    width:              36px;
    height:             36px;
  }
      
  /* FAQs */

  .ec-faq{
    margin-bottom:   var(--ec-margin-page);
  }

    .ec-faq > div{
      width:           100%;
      padding-left:    0;
      border-left:     none;
      padding-bottom:  18px;
      border-bottom:   var(--ec-border-blue);
    }
      
      .ec-faq > div button.ec-show-answer-button{
        bottom:          -18px;
        left:            auto;
        right:           0;
      }
      
      .ec-faq > div button.ec-copy-button{
        top:              auto;
        bottom:           -18px;
        left:             0px;
      }


  /* HOMEPAGE main title */

  .portal-publications .inner h2{
    margin-top: 0;
  }

  h1.title,
  h2.title,
  h3.title,
  .procedure-title{
    text-align:      center;
  }

  h1.title{
    font-size:       2em;
  }

  h2.title{
    font-size:       1.75em;
  }

  h3.title{
    font-size:       1.5em;
  }

  .procedure-title{
    margin-top:      3em;
  }

  /* CONTENTS */

  .site-content{
    min-height:       100vh;
    position:         relative;
  }

    .site-content article#content-wrapper.topic.content-container{
      width:            100%;
      margin:           0 0 32px 0;
      align-self:       center;
    }

      .topic-content{

      }

        .topic-content p{
          font-size:      0.9em;
          text-align:     justify;
        }

        p.ec-home-description{
          font-size:      1.1em;
        }

        ol.procedure{
          margin-bottom:     3em;
        }

          ol.procedure .mediaobject{
            width:            calc(100% + 54px);
            max-width:        calc(100% + 54px);
            margin-left:      -54px;
            overflow:         hidden;
          }
            ol.procedure .mediaobject table.image-viewport{
              width:            100%!important; /* width is defined inline */
              max-width:        calc(100% + 54px);
            }
              
              ol.procedure .mediaobject table.image-viewport img{
                max-width:        calc(100% + 54px)!important; /* max-width is defined inline */
              }

    .site-footer{
      position:       relative;
      bottom:         0;
    }

      .site-footer .inner{
        position:       absolute;
        top:            30px;
      }
    
  section.ec-columns{
    width:          100%;
    border-left:    none;
    padding:        var(--ec-internal-margin) 0;
  }

    section.ec-columns h2{
      text-align:     left;
    }
  
  div.ec-link-buttons-container{
    display:  block;
  }

  a.ec-tile:link,
  a.ec-tile:nth-child(2n+1),
  a.ec-tile:nth-child(3n+1),
  a.ec-tile:nth-child(4n+1){
    width:                100%;
    margin:               0 0 var(--ec-internal-margin) 0;
    height:               auto;
  }
  
  a.ec-link-button:link,
  a.ec-link-button:nth-child(2n+1),
  a.ec-link-button:nth-child(3n+1),
  a.ec-link-button:nth-child(4n+1){
    width:                100%;
  }

  a.ec-link-button:link h2{
    margin-bottom:        0;
  }

  .ec-modal-container{
    width:          360px;
  }


  /* MOBILE NAV */

    ul.ec-mobile-nav.ec-open{
      width:          100%;

    }

      ul.ec-mobile-nav li a:link,
      ul.ec-mobile-nav li a:visited{
        text-align: center;
      }

  /* ECL FOOTER */
  .ecl-site-footer{
    display:block;
  }
  
    .ecl-container{
      padding: 0 16px 16px 16px;
    }

      .ecl-site-footer__row {  
        grid-template-columns: repeat(1, 1fr);
      }

  body > a.ec-contact-email:link,
  body > a.ec-contact-email:visited{
    top: 0;
    text-align: left;
    margin: 0 0 0 var(--ec-margin-page);
    padding-bottom: 2em;
  }
}

/*
████████ ██ ███    ██ ██    ██ 
   ██    ██ ████   ██  ██  ██  
   ██    ██ ██ ██  ██   ████   
   ██    ██ ██  ██ ██    ██    
   ██    ██ ██   ████    ██    
*/

@media screen and (max-width: 359px){

  .portal-header .inner a.logo-link,
  .additional-header .inner a{
    top:            -5px;
  }

  .ec-modal-container{
    position:       absolute;
    top:            0;
    left:           0;
    width:          calc(100% - 20px);
    min-height:     100%;
    padding:        10px;
    background:     #ffffff;
    border-radius:  0;
    box-shadow:     none;
  }

  .ec-modal-container a.ec-close-button{
    right:          25px;
    top:            25px;
  }

  /* ECL FOOTER */
  
    .ecl-site-footer__row {  
      text-align:center;
    }
}