/* -------------------------------------------------------------------------- */
/* jas acf note (notes shown internally, when editing a page that has reusable content for example)
/* -------------------------------------------------------------------------- */

.jas-acf-note { border: 2px dotted #333; padding: 5px; }
.jas-acf-note__inner { text-align: left; font-style: italic; color: #333; }

.jas-acf-note__p { text-align: center; color: rgb(255 165 0 / 60%); }






/* -------------------------------------------------------------------------- */
/* both homepages
/* -------------------------------------------------------------------------- */


.jas-homepage-text-image-grid__left-text-container { align-items: flex-end !important; }.
.jas-homepage-text-image-grid__right-text-container { align-items: flex-start !important; }
.jas-homepage-text-image-grid__left-text-container .gb-inside-container,
.jas-homepage-text-image-grid__right-text-container .gb-inside-container { max-width: 696px; }








/* -------------------------------------------------------------------------- */
/* jas vessel category cards
/* -------------------------------------------------------------------------- */

:root {
  --vessel-category-card-items-per-row: 3;
  --vessel-category-card-gap: 16px;
}


.jas-vessel-category-cards-container { display: flex; gap: var(--vessel-category-card-gap); justify-content: center; flex-wrap: wrap; }

.jas-vessel-category-card { flex-basis: calc( ( 100% / var(--vessel-category-card-items-per-row) ) - ( (var(--vessel-category-card-items-per-row) - 1) * var(--vessel-category-card-gap) ) / var(--vessel-category-card-items-per-row) ); /* this fixes the problem with "flex basis doesn't account for gap" [https://stackoverflow.com/questions/49174998/] */ position: relative; width: 100%; display: flex; justify-content: stretch; border-radius: 16px; min-height: clamp(440px, 33vw, 460px); box-shadow: 0px 0px 4px rgba(0 0 0 / 30%); overflow: hidden; }

.jas-vessel-category-card__image-container { flex-basis: 100%; display: flex; justify-content: stretch; }
.jas-vessel-category-card__image { flex-basis: 100%; background-size: cover; background-position: center; transition: transform .5s; }
.jas-vessel-category-card__text { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto 32px auto; padding: 0 12px; text-align: center; text-transform: uppercase !important; color: white !important; text-shadow: 0 0 2px black; }

.jas-vessel-category-card:hover .jas-vessel-category-card__image { transform: scale(1.15); }

@media only screen and (max-width: 1099px)
{
  :root {
    --vessel-category-card-items-per-row: 2;
  }

  .jas-vessel-category-card { min-height: clamp(320px, 50vw, 420px); }
}
@media only screen and (max-width: 500px)
{
  :root {
    --vessel-category-card-items-per-row: 1;
  }
}




/* -------------------------------------------------------------------------- */
/* jel services/parts items
/* -------------------------------------------------------------------------- */

:root {
  --jel-services-parts-card-items-per-row: 4;
  --jel-services-parts-card-gap: 24px;
}


.jel-services-parts-cards-container {
  display: flex;
  gap: var(--jel-services-parts-card-gap);
  justify-content: center;
  flex-wrap: wrap;
}


.jel-services-parts-card {
  flex-basis: calc( ( 100% / var(--jel-services-parts-card-items-per-row) ) - ( (var(--jel-services-parts-card-items-per-row) - 1) * var(--jel-services-parts-card-gap) ) / var(--jel-services-parts-card-items-per-row) ); /* this fixes the problem with "flex basis doesn't account for gap" [https://stackoverflow.com/questions/49174998/] */
  position: relative;
  width: 100%;
  display: flex;
  justify-content: stretch;
  border-radius: 8px;
  /*min-height: auto;*/
  box-shadow: 0px 0px 4px rgba(0 0 0 / 30%);
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
}

.jel-services-parts-card:link,
.jel-services-parts-card:hover,
.jel-services-parts-card:active,
.jel-services-parts-card:target,
.jel-services-parts-card:focus,
.jel-services-parts-card:visited { text-decoration: none !important; }


.jel-services-parts-card__image-container {
  min-height: 220px;
  flex-basis: 50%;
  display: flex;
  justify-content: stretch;
  overflow: hidden;
}
.jel-services-parts-card__image { flex-basis: 100%; background-size: cover; background-position: top center; background-repeat: no-repeat; transition: transform .5s; }
.jel-services-parts-card:hover .jel-services-parts-card__image { transform: scale(1.15); }

.jel-services-parts-card__text-container { padding: 32px 16px; background-color: var(--accent); transition: background-color .5s; flex-basis: 100%; display: flex;
    flex-flow: column nowrap; }
.jel-services-parts-card:hover .jel-services-parts-card__text-container { background: var(--jastram-blue-9); }

.jel-services-parts-card__heading,
.jel-services-parts-card__subheading,
.jel-services-parts-card__text { text-align: center; color: white !important; opacity: .9; margin-bottom: 16px; }

.jel-services-parts-card__heading { text-transform: uppercase !important; opacity: 1; /*min-height: 70px;*/ display: flex; flex-direction: row; /*align-items: center;*/ justify-content: center; borders:solid 1px red; flex: 0 1 50%; line-height: 1.4; }

.jel-services-parts-card__subheading { /*min-height: 86px;*/ display: flex; flex-direction: row; /*align-items: center;*/ justify-content: center; borders:solid 1px red; flex-grow: 1; }

.jel-services-parts-card__text { margin-bottom: 0; }

.jel-services-parts-card__arrow { display: inline-block; transition: transform .5s; transform: translateX(0px); }
.jel-services-parts-card:hover .jel-services-parts-card__arrow { transform: translateX(8px); }

@media only screen and (max-width: 1023px)
{
  :root {
    --jel-services-parts-card-items-per-row: 2;
  }
  .jel-services-parts { max-width: 728px; margin: auto; }
  /*.jel-services-parts-card__image-container {min-height: 220px; }*/
}

@media only screen and (max-width: 600px)
{
  :root {
    --jel-services-parts-card-items-per-row: 1;
  }
  .jel-services-parts { max-width: 400px; }
}




/* -------------------------------------------------------------------------- */
/* jel classification (on About page)
/* -------------------------------------------------------------------------- */

:root {
  --jel-classification-items-per-row: 4;
  --jel-classification-gap: 24px;
}


.jel-classification-cards-container {
  display: flex;
  gap: var(--jel-classification-gap);
  justify-content: center;
  flex-wrap: wrap;
}


.jel-classification-card {
  flex-basis: calc( ( 100% / var(--jel-classification-items-per-row) ) - ( (var(--jel-classification-items-per-row) - 1) * var(--jel-classification-gap) ) / var(--jel-classification-items-per-row) ); /* this fixes the problem with "flex basis doesn't account for gap" [https://stackoverflow.com/questions/49174998/] */
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 8px;
  /*min-height: auto;*/
  /*box-shadow: 0px 0px 4px rgba(0 0 0 / 30%);*/
  overflow: hidden;
  background-color: var(--accent);
  display: flex;
  flex-flow: column nowrap;


  background:  white;
  min-height:  200px;

  text-align: center;

  padding: 16px;

}

.jel-classification-card__image-container { flex: 1; display: flex; align-items: center; justify-content: center; margin-bottom: 1em; }
.jel-classification-card__image { max-height: 124px; }

.jel-classification-card__text { flex-basis: auto; font-weight: bold; margin-bottom: 0; }


@media only screen and (max-width: 1023px)
{
  :root {
    --jel-classification-items-per-row: 3;
  }

  .jel-classification-cards-container { max-width: 800px; margin: auto; }
}

@media only screen and (max-width: 767px)
{
  :root {
    --jel-classification-items-per-row: 2;
  }

  .jel-classification-cards-container { max-width: calc( 260px * 2 + var(--jel-classification-gap) ); margin: auto; }
}

@media only screen and (max-width: 600px)
{
  :root {
    --jel-classification-items-per-row: 1;
  }

  .jel-classification-cards-container { max-width: 260px; }
}



/* -------------------------------------------------------------------------- */
/* jtl and jel vessel cards (individual vessels, not vessel categories like "Ferries")
/* -------------------------------------------------------------------------- */



:root {
  --jas-vessel-card-items-per-row: 2;
  --jas-vessel-card-gap: 32px;
}


.jas-vessel-cards-container {
  display: flex;
  gap: var(--jas-vessel-card-gap);
  justify-content: center;
  flex-wrap: wrap;
}


.jas-vessel-card {
  flex-basis: calc( ( 100% / var(--jas-vessel-card-items-per-row) ) - ( (var(--jas-vessel-card-items-per-row) - 1) * var(--jas-vessel-card-gap) ) / var(--jas-vessel-card-items-per-row) ); /* this fixes the problem with "flex basis doesn't account for gap" [https://stackoverflow.com/questions/49174998/] */
  position: relative;
  width: 100%;
  display: flex;
  justify-content: stretch;
  border-radius: 8px;
  /*min-height: auto;*/
  /*box-shadow: 0px 0px 4px rgba(0 0 0 / 30%);*/
  box-shadow: 0px 0px 3px rgb(0 0 0 / 30%);
  overflow: hidden;
  background-color: #ffffff;
  display: flex;
  flex-flow: column nowrap;
  transition: background-color .5s;
}

.jas-vessel-card:link,
.jas-vessel-card:hover,
.jas-vessel-card:active,
.jas-vessel-card:target,
.jas-vessel-card:focus,
.jas-vessel-card:visited { text-decoration: none !important; }

.jas-vessel-card__image-container {
  position: relative;
  min-height: 360px;
  flex-basis: 50%;
  display: flex;
  justify-content: stretch;
  overflow: hidden;
  background: #ffffff; /* might see a hint of blue in top left/right corner otherwise because of the rounded edges */
  
}
.jas-vessel-card__image { flex-basis: 100%; background-size: cover; background-position: bottom; background-repeat: no-repeat; transition: transform .5s; }

.jas-vessel-card__vessel-name-and-photo-by { width: 100%; padding-left: 16px; padding-right: 16px; position: absolute; bottom: 16px; borders:solid 1px red;  }
.jas-vessel-card__under-construction,
.jas-vessel-card__vessel-name,
.jas-vessel-card__photo-by { color: #ffffff !important; text-align: center; }
.jas-vessel-card__under-construction,
.jas-vessel-card__vessel-name { font-family: 'Oswald', sans-serif !important; font-size: 26px !important; font-weight: bold; text-transform: uppercase; margin-bottom: 0 !important; text-shadow: 0 0 3px rgba(0, 0, 0, .6); }
.jas-vessel-card__under-construction { font-size: 18px !important; /*text-shadow: none;*/ }
.jas-vessel-card__photo-by { font-size: 12px !important; margin-bottom: 0; }


.jas-vessel-card__text-container { padding: 0; }
.jtl-vessels .jas-vessel-card__text-container { padding: 8px 0 16px; }

.jas-vessel-card__row { display: flex; flex-flow: row wrap; justify-content: space-between; gap: 16px; padding: 8px 16px; color: var(--contrast); margin-bottom: 0; }
.jas-vessel-card__row--grey { background: #F5F5F5; }
.jtl-vessels .jas-vessel-card__row { padding: 12px 16px; border-bottom: 1px dashed var(--gray-200); }
.jtl-vessels .jas-vessel-card__row:first-child { border-bottom: none; }
.jtl-vessels .jas-vessel-card__row:last-child { border-bottom: none; }
.jas-vessel-card__row:last-child { margin-bottom: 0; }

.jas-vessel-card__label { flex: 0 0 130px; font-weight: bold; text-align: right; }
.jas-vessel-card__info { flex: 1; }

.jas-vessel-card__p { margin-bottom: 0; }
.jas-vessel-card__supplier-paragraph { margin-bottom: 0; display: flex; flex-flow: row wrap; align-items: center; }
.jtl-vessels .jas-vessel-card__supplier-paragraph { justify-content: space-between; width: 100%; }
.jas-vessel-card__supplied-by { flex: 1; }
.jas-vessel-card__supplier-logo { flex: 0 0 auto; max-width: 100px; max-height: 60px; margin-left: 8px; }



@media only screen and (max-width: 767px)
{
  :root {
    --jas-vessel-card-items-per-row: 1;
  }

  .jas-vessel-card { max-width: 600px; margin: auto; }

  .jas-vessel-card__image-container {min-height: 320px; }

}






/* -------------------------------------------------------------------------- */
/* jas faq
/* -------------------------------------------------------------------------- */

:root {
}

.jas-faq-cards-container {
  max-width: 768px;
  margin: auto;
}


.jas-faq-card {
  
}

.jas-faq-card__question { font-weight: 600; color: var(--text-color-dark); margin-bottom: 1em; }
.jas-faq-card__answer { color: var(--text-color-light); margin-bottom: 1em; displays: none; }
.jas-faq-card__divider { margin: 1em 0; border-bottom: 1px solid #EAECF0; }
.jas-faq-card__divider:last-of-type { display: none; }





/* -------------------------------------------------------------------------- */
/* jtl product items
/* -------------------------------------------------------------------------- */

:root {
  --jtl-product-card-items-per-row: 3;
  --jtl-product-card-gap: 24px;
}


.jtl-product-cards-container {
  display: flex;
  gap: var(--jtl-product-card-gap);
  justify-content: center;
  flex-wrap: wrap;
}


.jtl-product-card {
  flex-basis: calc( ( 100% / var(--jtl-product-card-items-per-row) ) - ( (var(--jtl-product-card-items-per-row) - 1) * var(--jtl-product-card-gap) ) / var(--jtl-product-card-items-per-row) ); /* this fixes the problem with "flex basis doesn't account for gap" [https://stackoverflow.com/questions/49174998/] */
  position: relative;
  width: 100%;
  display: flex;
  justify-content: stretch;
  border-radius: 8px;
  /*min-height: auto;*/
  box-shadow: 0px 0px 4px rgba(0 0 0 / 30%);
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
}


.jtl-product-card__image-container {
  min-height: 230px;
  flex-basis: auto;
  display: flex;
  justify-content: stretch;
  overflow: hidden;
  flex-shrink: 0;
}
.jtl-product-card__image { flex-basis: 100%; background-size: 90%; background-position: center; background-repeat: no-repeat; transition: transform .5s; }
.jtl-product-card:hover .jtl-product-card__image { /*transform: scale(1.075);*/ }

.jtl-product-card__text-container { flex-grow: 1; padding: 32px 32px; background-color: var(--accent); transition: background-color .5s; display: flex; flex-flow: column nowrap; }
.jtl-product-card:hover .jtl-product-card__text-container { /*background: var(--jastram-blue-9);*/ }

.jtl-product-card__heading,
.jtl-product-card__subheading,
.jtl-product-card__link-container { text-align: center; color: white !important; opacity: .9; margin-bottom: 16px; flex-basis: 100%; }

.jtl-product-card__heading { opacity: 1; flex: 0 1 auto; display: flex; flex-direction: row; align-items: center; justify-content: center; borders:solid 1px red; }

.jtl-product-card__subheading { margin-bottom: 1.5em; flex-grow: 1; }

.jtl-product-card__link-container { margin-bottom: 0; display: flex; flex-basis: auto; }

.jtl-product-card__link { display: flex; flex-flow: row nowrap; margin: auto; /*display: flex; justify-content: center; align-items: center;*/ color: #ffffff; border: 1px solid #ffffff; padding: 8px 24px; border-radius: 8px; text-decoration: none; }
.jtl-product-card__link:link,
.jtl-product-card__link:active,
.jtl-product-card__link:hover,
.jtl-product-card__link:target,
.jtl-product-card__link:focus,
.jtl-product-card__link:visited { color: #ffffff !important; text-decoration: none !important; }
.jtl-product-card__link:hover { background: rgb(255 255 255 / 20%); }

.jtl-product-card__arrow { display: flex; transition: transform .5s; transform: translateX(0px); }
.jtl-product-card:hover .jtl-product-card__arrow { /*transform: translateX(8px);*/ }

@media only screen and (max-width: 1023px)
{
  :root {
    --jtl-product-card-items-per-row: 2;
  }

  .jtl-product-cards-container { max-width: 840px; margin-left: auto; margin-right: auto; }
  .jtl-product-card__image-container { min-height: 220px; }
  .jtl-product-card__heading { min-height: auto; }
  .jtl-product-card__subheading { min-height: auto; }

}
@media only screen and (max-width: 720px)
{
  :root {
    --jtl-product-card-items-per-row: 1;
  }
  .jtl-product-cards-container { max-width: 392px; margin-left: auto; margin-right: auto; }
}






/* -------------------------------------------------------------------------- */
/* jas jobs items / jastram jobs items
/* -------------------------------------------------------------------------- */

:root {
  --jtl-job-card-items-per-row: 3;
  --jtl-job-card-gap: 24px;
}


.jas-job-cards-container {
  /*display: flex;
  gap: var(--jtl-product-card-gap);
  justify-content: center;
  flex-wrap: wrap;*/
}

.jas-job-card { display: block; border-radius: 8px; border: 1px solid #EAECF0; padding: 16px; text-decoration: none; margin-bottom: 32px; }

.jas-job-card:hover { background: rgb(234 236 240 / 17%); border-colors: #daf0ff; }

.jas-job-card__top { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; margin-bottom: .8em; }
.jas-job-card__category { flex: 1; margin-right: 16px; color: var(--text-color-light); font-size: 16px; }
.jas-job-card__view-job { flex: 0 0 auto; color: var(--jastram-link-color); font-size: 16px; }
.jas-job-card:hover .jas-job-card__view-job { text-decoration: underline; }

.jas-job-card__bottom {  }
.jas-job-card__name { color: var(--text-color-dark); font-size: 18px; font-weight: 600; margin-bottom: .5em; }
.jas-job-card__description { color: var(--text-color-dark); font-size: 16px; margin-bottom: 1em; }
.jas-job-card__full-or-part-time { display: flex; flex-flow: row wrap; align-items: center; gap: 4px; color: var(--text-color-light); font-size: 16px; margin-bottom: 0; }

body.wp-admin .jas-job-card__material-icon { display: none; }





/* -------------------------------------------------------------------------- */
/* jel/jtl portal
/* -------------------------------------------------------------------------- */

:root {
  --jel-jtl-portal-card-items-per-row: 2;
  --jel-jtl-portal-card-gap: 24px;
}

body.home.one-container .site-content,
body.home.full-width-content.one-container .site-content { padding-top: 0; }

body.home .entry-content:not(:first-child),
body.home .entry-summary:not(:first-child),
body.home .page-content:not(:first-child) { margin-top: 0 !important; }

.jel-jtl-portal__page-content { max-width: 1392px; padding-top: 0; padding-left: var(--inner-section-horizontal-padding) !important; padding-right: var(--inner-section-horizontal-padding) !important; margin: auto; }

.jel-jtl-portal__jastram-group-heading { text-align: center; margin-bottom: 24px; }
.jel-jtl-portal__jastram-group-heading-inner { width: auto; padding: 24px 12px; background: #ffffff; display: inline-block; z-index: 2; position: relative; }


.jel-jtl-portal__circle { max-width: 820px; height: 600px; margin: 0 auto -600px auto; border-radius: 50%; border: 4px solid var(--jastram-blue); transform: translateY(-120px); z-index: 1; }
/*.jel-jtl-portal__circle-inner { width: 720px; height: 600px; margin: 0 auto -600px auto; border-radius: 50%; border: 3px solid var(--jastram-blue); transform: translateY(-86px); z-index: 1; }*/

.jel-jtl-portal-cards-container {
  display: flex;
  gap: var(--jel-jtl-portal-card-gap);
  justify-content: center;
  flex-wrap: wrap;
  background: #ffffff; /* this rule and the next two are to hide the bottom of the circle from showing between the cards */
  z-index: 2;
  position: relative;
}


.jel-jtl-portal-card {
  flex-basis: calc( ( 100% / var(--jel-jtl-portal-card-items-per-row) ) - ( (var(--jel-jtl-portal-card-items-per-row) - 1) * var(--jel-jtl-portal-card-gap) ) / var(--jel-jtl-portal-card-items-per-row) ); /* this fixes the problem with "flex basis doesn't account for gap" [https://stackoverflow.com/questions/49174998/] */
  position: relative;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  border-radius: 16px;
  min-height: 660px;
  box-shadow: 0px 0px 4px rgba(0 0 0 / 30%);
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.jel-jtl-portal-card__image-container { flex-basis: 100%; display: flex; justify-content: stretch; transition: filter .5s; overflow: hidden; }
.jel-jtl-portal-card__image { flex-basis: 100%; background-size: cover; background-position: center; transition: transform .5s; }
.jel-jtl-portal-card__image--2 { background-size: cover; background-position: 24% 100%; }

.jel-jtl-portal-card__text-container { position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto 32px auto; padding: 0 36px; max-width: 500px; }

.jel-jtl-portal-card:link,
.jel-jtl-portal-card:active,
.jel-jtl-portal-card:hover,
.jel-jtl-portal-card:target,
.jel-jtl-portal-card:focus,
.jel-jtl-portal-card:visited { color: #ffffff !important; text-decoration: none !important; }

.jel-jtl-portal-card__heading,
.jel-jtl-portal-card__region,
.jel-jtl-portal-card__subheading,
.jel-jtl-portal-card__button { color: #ffffff !important; font-size: 20px !important; font-family: 'Lato', sans-serif !important; line-height: 1.4em; font-weight: 500 !important; }

.jel-jtl-portal-card__heading { font-family: 'Oswald', sans-serif !important; font-size: 36px !important; letter-spacing: 2px; margin-bottom: 8px; }
.jel-jtl-portal-card__region { opacity: .7; margin-bottom: 16px; }
.jel-jtl-portal-card__subheading { max-width: 500px; margin-left: auto; margin-right: auto; font-weight: normal;  margin-bottom: 16px; }
.jel-jtl-portal-card__enter { margin-bottom: 0; }
.jel-jtl-portal-card__enter-button { display: inline-block; border: 1px solid #ffffff; padding: 12px 24px; border-radius: 8px; transition: background-color .5s; }


/* hover stuff */

.jel-jtl-portal-card:hover .jel-jtl-portal-card__image-container { /*filter: blur(4px);*/ }
.jel-jtl-portal-card:hover .jel-jtl-portal-card__image { transform: scale(1.10); }

.jel-jtl-portal-card:hover .jel-jtl-portal-card__enter-button { background: rgb(255 255 255 / 20%); }

@media only screen and (max-width: 1300px)
{
  /* here's where it becomes fluid-width */
  .jel-jtl-portal__circle { max-width: clamp(680px, 64vw, 820px); }
}


@media only screen and (max-width: 1140px)
{
  /*.jel-jtl-portal-card__image--2 { background-size: cover; background-position: 24% 100%; }*/
  
  .jel-jtl-portal-card__heading { font-size: 32px; }
  .jel-jtl-portal-card__region,
  .jel-jtl-portal-card__subheading
  .jel-jtl-portal-card__enter { font-size: 18px; }

  .jel-jtl-portal-card { min-height: clamp(592px, 64vw, 660px); }
}

@media only screen and (max-width: 1000px)
{
}

@media only screen and (max-width: 984px)
{
  /*.jel-jtl-portal-card__subheading { font-size: 18px; }*/
}

@media only screen and (max-width: 959px)
{
  .jel-jtl-portal-card__text-container { padding: 0 16px; }
/*  .jel-jtl-portal-cards-container { transform: translateY( -2vw ); }*/
/*  .jel-jtl-portal__jastram-group-heading { margin-bottom: clamp(32px, 3vw, 56px); }*/
}

@media only screen and (max-width: 984px)
{
/*  .jel-jtl-portal-card__subheading { font-size: 18px; }*/
}


@media only screen and (max-width: 767px)
{
  :root {
    --jel-jtl-portal-card-items-per-row: 1;
    /*--jel-jtl-portal-card-gap: 24px;*/
  }

  .jel-jtl-portal__jastram-group-heading { margin-bottom: 8px; }
  .jel-jtl-portal__jastram-group-heading-inner { padding-top: 8px; }

  .jel-jtl-portal__circle { display: none; }

  .jel-jtl-portal-cards-container { max-width: 480px; margin: auto; }

  .jel-jtl-portal-card { min-height: 540px; }
}

@media only screen and (max-width: 600px)
{
  .jel-jtl-portal-card__heading { font-size: 28px; }
  .jel-jtl-portal-card__region, 
  .jel-jtl-portal-card__subheading,
  .jel-jtl-portal-card__enter { font-size: 17px; }
}