.paragraph--type--blade.paragraph--view-mode--preview .paragraph--type--action-panel-container.paragraph--view-mode--default.actionpanel,
table.field-multiple-table.responsive-enabled .paragraph--type--action-panel-container.paragraph--view-mode--preview.actionpanel {
  margin-top: 30px;
}

.paragraph--type--blade.paragraph--view-mode--preview .paragraph--type--action-panel-container.paragraph--view-mode--default.actionpanel .actionpanel_list .actionpanel_detail,
table.field-multiple-table.responsive-enabled .paragraph--type--action-panel-container.paragraph--view-mode--default.actionpanel .actionpanel_list .actionpanel_detail {
  padding: 0px !important;
}

.actionpanel_bg {
  margin: 0 auto;
  display: block;
  height: 100%;
  position: relative;
  min-height: 150px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  cursor: pointer;
}

.actionpanel.actionpanel_horizontal {
  min-height: 150px;
}

.actionpanel_list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

a:focus>.actionpanel_bg {
  outline-color: rgb(77, 144, 254);
  outline-offset: -5px;
  outline-style: auto;
  outline-width: 10px;
}

.actionpanel_vertical .actionpanel_icon .action_icon {
  margin: 0 0 0 auto;
}

.actionpanel_vertical .actionpanel_icon .action_icon:before {
  content: "+";
  font-family: serif;
}

/* DESKTOP SCREEN */
@media screen and (min-width: 1281px) {
  .actionpanel.actionpanel_horizontal .actionpanel_list {
    min-height: 300px;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list {
    height: 75vh;
    max-height: 720px;
  }

  .actionpanel .actionpanel_list .actionpanel_item {
    display: block;
    flex: 1;
    margin-bottom: 0px;
  }



  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_detail .actionpanel_caption {
    display: flex;
    grid-gap: 0;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_detail .actionpanel_caption {
    align-items: flex-end;
    -webkit-align-items: flex-end;
    display: flex;
    display: -webkit-flex;
    -webkit-flex: 1;
    min-width: 1px;
    min-height: 1px;
    flex: 1;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_detail .actionpanel_caption {
    /* grid-template-columns: minmax(20px, max-content) 1fr; */
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_title {
    word-wrap: break-word;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_title,
  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_subtitle {
    transform: rotate(180deg);
    writing-mode: vertical-rl;
  }

  .actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_title {
    font-size: 2.8rem;
    margin: auto auto auto auto;
    text-align: center;
  }

  .actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_subtitle {
    opacity: 0;
    margin: auto auto auto auto;
    font-size: 1.4rem;
    text-align: center;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_title {
    font-size: 5.3rem;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_subtitle {
    opacity: 0;
    margin: 0 auto 0 0;
    font-size: 2.1rem;
  }

  .actionpanel .actionpanel_list .actionpanel_item:hover .actionpanel_subtitle,
  .actionpanel .actionpanel_list .actionpanel_item:focus .actionpanel_subtitle {
    opacity: 1;
  }

}

/* TABLET SCREEN */
@media screen and (max-width: 1280px) {
  .actionpanel .actionpanel_list {
    display: block;
  }

  .actionpanel .actionpanel_list .actionpanel_item {
    display: block;
    margin-bottom: 0px;
    height: 300px;
  }

  .actionpanel.actionpanel .actionpanel_list .actionpanel_detail .actionpanel_caption {
    grid-template-rows: 1fr;
  }

  .actionpanel .actionpanel_list .actionpanel_title {
    margin: auto auto 0px 0px;
    font-size: 5.3rem;
  }

  .actionpanel .actionpanel_list .actionpanel_subtitle {
    opacity: 1;
    font-size: 2.1rem;
  }

  .actionpanel .actionpanel_list .actionpanel_title,
  .actionpanel .actionpanel_list .actionpanel_subtitle {
    writing-mode: horizontal-tb;
  }
  
  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_detail .actionpanel_caption {
    display: grid;
    grid-gap: 0;
  }

  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_title,
  .actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_subtitle {
    display: grid;
  }

}

/* MOBILE SCREEN */
@media screen and (max-width: 640px) {
  .actionpanel .actionpanel_list .actionpanel_item {
    height: 150px;
  }

  .actionpanel .actionpanel_list .actionpanel_title {
    font-size: 2.4rem;
  }

  .actionpanel .actionpanel_list .actionpanel_subtitle {
    font-size: 1.4rem;
    line-height: 1.4;
  }

  .actionpanel_icon .action_icon:before {
    font-size: 2.4rem;
  }

}


.actionpanel .actionpanel_list .actionpanel_item:hover .actionpanel_bg,
.actionpanel .actionpanel_list .actionpanel_item:focus .actionpanel_bg {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.actionpanel .actionpanel_list .actionpanel_item:hover .actionpanel_overlay,
.actionpanel .actionpanel_list .actionpanel_item:focus .actionpanel_overlay {
  background: linear-gradient(transparent 25%, black);
  background-color: transparent !important;
}

.actionpanel .actionpanel_list .actionpanel_item:hover .actionpanel_icon,
.actionpanel .actionpanel_list .actionpanel_item:focus .actionpanel_icon {
  transform: rotate(180deg);
}

.actionpanel .actionpanel_list .actionpanel_link {
  display: block;
  height: 100%;
  position: relative;
  text-decoration: none;
  border-bottom: none !important;
}

.actionpanel .actionpanel_list .actionpanel_bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  transition: .25s;
  width: 100%;
  z-index: 1;
}

.actionpanel .actionpanel_list .actionpanel_overlay {
  background: rgba(0, 51, 102, 0.75);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: .25s;
  z-index: 2;
}

.actionpanel .actionpanel_list .actionpanel_detail {
  padding: 24px;
  width: 100%;
  height: 100%;
  bottom: 0px;
  position: absolute;
  z-index: 3;
  display: grid;
  grid-gap: 0;
}

.actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_detail {
  align-items: center;
  grid-template-columns: 1fr 0px;
}

.actionpanel.actionpanel_vertical .actionpanel_list .actionpanel_detail {
  grid-template-columns: 1fr;
}

.actionpanel.actionpanel_list .actionpanel_detail .actionpanel_caption {
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_detail .actionpanel_caption {
  display: block;
}

.actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_title,
.actionpanel.actionpanel_horizontal .actionpanel_list .actionpanel_subtitle {
  display: block;
}

.actionpanel .actionpanel_list .actionpanel_title {
  color: white;
  font-family: Produkt, serif;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.actionpanel .actionpanel_list .actionpanel_subtitle {
  color: white;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  transition: .25s;
  line-height: 1.75;
  text-transform: uppercase;
}

.actionpanel .actionpanel_list .actionpanel_icon {
  color: white;
  font-size: 48px;
  opacity: 1;
  margin: auto 0 0 auto;
  transition: .25s;
  align-items: end;
  width: 29px;
  height: 29px;
}

.actionpanel_link:focus .actionpanel_overlay {
  opacity: 0 !important;
}


.actionpanel_link:focus .actionpanel_subtitle {
  opacity: 1 !important;
}



div.background-color-ffffff {
  background-color: #ffffff;
}

div.background-color-ffffff div.month,
div.background-color-ffffff div.day {
  color: #3d4952;
}

div.background-color-eef0f2 {
  background-color: #eef0f2;
}

div.background-color-eef0f2 div.month,
div.background-color-eef0f2 div.day {
  color: #3d4952;
}

div.background-color-dce1e5 {
  background-color: #dce1e5;
}

div.background-color-dce1e5 div.month,
div.background-color-dce1e5 div.day {
  color: #3d4952;
}

div.background-color-9cbebe {
  background-color: #9cbebe;
}

div.background-color-9cbebe div.month,
div.background-color-9cbebe div.day {
  color: #3d4952;
}

div.background-color-dae6e6 {
  background-color: #dae6e6;
}

div.background-color-dae6e6 div.month,
div.background-color-dae6e6 div.day {
  color: #3d4952;
}

div.background-color-dcd6cc {
  background-color: #dcd6cc;
}

div.background-color-dcd6cc div.month,
div.background-color-dcd6cc div.day {
  color: #3d4952;
}

div.background-color-f1eeea {
  background-color: #f1eeea;
}

div.background-color-f1eeea div.month,
div.background-color-f1eeea div.day {
  color: #3d4952;
}

div.background-color-c9bf9d {
  background-color: #c9bf9d;
}

div.background-color-c9bf9d div.month,
div.background-color-c9bf9d div.day {
  color: #3d4952;
}

div.background-color-edeadf {
  background-color: #edeadf;
}

div.background-color-edeadf div.month,
div.background-color-edeadf div.day {
  color: #3d4952;
}

div.background-color-febc11 {
  background-color: #febc11;
}

div.background-color-febc11 div.month,
div.background-color-febc11 div.day {
  color: #3d4952;
}

div.background-color-003660 {
  background-color: #003660;
}

div.background-color-003660 div.month,
div.background-color-003660 div.day {
  color: #ffffff;
}

div.background-color-6d7d33 {
  background-color: #6d7d33;
}

div.background-color-6d7d33 div.month,
div.background-color-6d7d33 div.day {
  color: #ffffff;
}

div.background-color-09847a {
  background-color: #09847a;
}

div.background-color-09847a div.month,
div.background-color-09847a div.day {
  color: #ffffff;
}

div.background-color-047c91 {
  background-color: #047c91;
}

div.background-color-047c91 div.month,
div.background-color-047c91 div.day {
  color: #ffffff;
}

div.background-color-ef5645 {
  background-color: #ef5645;
}

div.background-color-ef5645 div.month,
div.background-color-ef5645 div.day {
  color: #111517;
}

div.background-color-c43424 {
  background-color: #c43424;
}

div.background-color-c43424 div.month,
div.background-color-c43424 div.day {
  color: #ffffff;
}

div.background-color-000000 {
  background-color: #000000;
}

div.background-color-000000 div.month,
div.background-color-000000 div.day {
  color: #ffffff;
}