/**
 Colors
 */
/**
 Breakpoints
 */
/**
 Custom spacings
 */
/**
Fonts
 */
/**
 Font weights
 */
/**
 Borders
 */
@-webkit-keyframes bounceLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes bounceLeft {
  0% {
    transform: translateX(0); }
  50% {
    transform: translateX(-10px); }
  100% {
    transform: translateX(0); } }
@keyframes bounceRight {
  0% {
    transform: translateX(0); }
  50% {
    transform: translateX(10px); }
  100% {
    transform: translateX(0); } }
@-webkit-keyframes bounceRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }
@keyframes bounce-icon {
  2% {transform: translateX(8px);}
  90% {transform: translateX(0px);}
  }
@-webkit-keyframes bounce-icon {
  2% {transform: translateX(8px);}
  90% {transform: translateX(0px);}
  }
/*
 *  get-spacer function
 *  Used to access spacer variable values for usage outside of margins and paddings (i.e. top, left, right, bottom)
 *  Usage: get-spacer($size, $bp);
 *  Example: get-spacer(mini, xs);
 *  Params: $size - spacer size needed
 *          $bp - breakpoint for spacer value
 *  Requires: $spacings and $breakpoints variables
 */
/*
 *  Breakpoints generator mixin
 *  Usage: bp($width) {@content;};
 *  Example: bp(xs) {...};
 *  Params: $width - corresponds to label of desired breakpoint from breakpoints var list
 *          @content - block with code to be included in the breakpoint
 *  Requires: $breakpoints variables
 */
/*
 *  Margin generator mixin
 *  Usage: margin($size, $sides);
 *  Example: margin(huge, top bottom left);
 *  Params: $size - corresponds to label of desired margin from margin var list
 *          $sides - single value or list with desired sides to apply margin to
 *  Requires: $margin and $breakpoints variables
 */
/*
 *  Padding generator mixin
 *  Used to fake margins when margin is not possible
 *  Usage: padding($size, $sides);
 *  Example: padding(huge, top bottom left);
 *  Params: $size - corresponds to label of desired margin from margin var list
 *          $sides - single value or list with desired sides to apply padding to
 *  Requires: $margin and $breakpoints variables
 */
/*
 *  Text styles mixin
 *  Usage: text($type);
 *  Example: text(p2);
 *  Params: $type - corresponds to label of desired text from fonts var list
 *  Requires: $fonts and $breakpoints variables
 */
/*
 *  font-awesome mixin
 *  Usage: font-awesome($unicode, $pseudo) {@content;};
 *  Example: font-awesome(f06a, before) {...};
 *  Params: $unicode - defines the font awesome icon
 *          $pseudo - defines after or before pseudo classes
 *  Requires: font awesome implemented
 */
/*
 *  font-awesome mixin
 *  Usage: font-awesome($unicode, $pseudo) {@content;};
 *  Example: font-awesome(f06a, before) {...};
 *  Params: $unicode - defines the font awesome icon
 *          $pseudo - defines after or before pseudo classes
 *  Requires: font awesome implemented
 */
@media only screen and (min-width: 1001px) {
  .paragraph-content-reference {
    padding-left: 20px;
    padding-right: 20px; } }
@media only screen and (min-width: 1600px) {
  .paragraph-content-reference {
    padding-left: 0;
    padding-right: 0; } }

.paragraph-content-reference__field-items {
  display: flex;
  align-items: center;
  flex-flow: column nowrap; }
  @media only screen and (min-width: 701px) {
    .paragraph-content-reference__field-items {
      flex-flow: row nowrap; } }

.paragraph-content-reference__field-item .node-teaser--image {
  padding-bottom: 0px;
}

.paragraph-content-reference__field-item {
  margin-bottom: 30px;
  padding-bottom: 15px;
  /*background-color: #ededed;*/
  display: flex;
  justify-content: flex-end;
  flex: 1;
  align-self: stretch; }
  @media only screen and (min-width: 701px) {
    .paragraph-content-reference__field-item {
      margin-bottom: 0;
      margin-right: 40px; }}
  @media only screen and (min-width: 1001px) {
    .paragraph-content-reference__field-item {
      margin-right: 45px; } }
  @media only screen and (min-width: 1301px) {
    .paragraph-content-reference__field-item {
      margin-right: 50px; } }

.paragraph-content-reference__field-item .node-article__field-teaser-text:last-child,
.paragraph-content-reference__field-item .node-app__field-teaser-text:last-child,
.paragraph-content-reference__field-item .node-page__field-teaser-text:last-child {
  margin-right: 30px; }

/* refers to the title of the complete paragraph meaning title for all the items */
.paragraph-content-reference__field-title {
  padding-bottom: 20px;
}

.paragraph-content-reference__field-item.no-flex .node-article__field-teaser-text, .paragraph-content-reference__field-item.no-flex .node-app__field-teaser-text {
  padding: 0 0;
  color: #707070;
}
.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item.no-flex .node-article__field-teaser-text,
.paragraph-content-reference__field-item.no-flex .node-app__field-teaser-text {
  padding: 0 0;
  color: #fff;
}

.paragraph-content-reference__field-item .node-teaser--image-text__label:after {
  top: 85%;
}

/*.paragraph-content-reference__field-item .node-teaser--article:after {
  .paragraph-content-reference__field-item .node-teaser:after {
  font-family: "FontAwesome", "sans-serif";
  content: "\";
  position: absolute;
  right: 20px;
  top: 95%;
  transform: translateY(-50%);
  color: #004494;
  font-size: 24px;
}*/

/*.paragraph-content-reference__field-item .node-teaser--article:hover:after {
.paragraph-content-reference__field-item .node-teaser:hover:after {
  animation: bounceRight 0.4s linear;
  animation: bounce-icon;
  animation-duration: 0.8s;
  animation-direction: linear;
}*/

.paragraph-content-reference__field-item .node-teaser--image-text .node-article__field-teaser-text:after,
.paragraph-content-reference__field-item .node-teaser--image-text .node-app__field-teaser-text:after,
.paragraph-content-reference__field-item .node-teaser--image-text .node-page__field-teaser-text:after
{
  font-family: "FontAwesome", "sans_serif";
  content: "\f105";
  color: #004494;
  font-size: 24px;
  /*position: absolute;*/
  padding-left: 20px;
  float: right;
}
.paragraph-background--brand_primary .paragraph-content-reference__field-item .node-teaser--image-text .node-article__field-teaser-text:after,
.paragraph-background--brand_primary .paragraph-content-reference__field-item .node-teaser--image-text .node-app__field-teaser-text:after,
.paragraph-background--brand_primary .paragraph-content-reference__field-item .node-teaser--image-text .node-page__field-teaser-text:after,
.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item .node-teaser--image-text .node-article__field-teaser-text:after,
.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item .node-teaser--image-text .node-app__field-teaser-text:after,
.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item .node-teaser--image-text .node-page__field-teaser-text:after
{
  font-family: "FontAwesome", "sans_serif";
  content: "\f105";
  color: #fff;
  font-size: 24px;
  /*position: absolute;*/
  padding-left: 20px;
  float: right;
}
.paragraph-content-reference__field-item .node-teaser--image .node-teaser-image-text__label:after
{
  font-family: "FontAwesome", "sans_serif";
  content: "\f105";
  color: #004494;
  font-size: 24px;
  /*position: absolute;*/
  padding-left: 20px;
  float: right;
}

.paragraph-content-reference__field-item .node-teaser--image-text .node-article__field-teaser-text:hover:after,
.paragraph-content-reference__field-item .node-teaser--image-text .node-app__field-teaser-text:hover:after,
.paragraph-content-reference__field-item .node-teaser--image-text .node-page__field-teaser-text:hover:after
{
  animation: bounce-icon;
  animation-duration: 0.8s;
}
.paragraph-background--brand_primary .paragraph-content-reference__field-item .node-teaser--image .node-teaser-image-text__label:after,
.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item .node-teaser--image .node-teaser-image-text__label:after
{
  font-family: "FontAwesome", "sans_serif";
  content: "\f105";
  color: #fff;
  font-size: 24px;
  /*position: absolute;*/
  padding-left: 20px;
  float: right;
}
.paragraph-content-reference__field-item .node-teaser--image .node-teaser-image-text__label:hover:after
{
  animation: bounce-icon;
  animation-duration: 0.8s;
}


/*.paragraph-content-reference__field-item.no-flex .node-teaser--article:after {*/
.paragraph-content-reference__field-item.no-flex .node-teaser:after {
  display: none;
}

.paragraph-content-reference__field-item .node-teaser-image-text__label
{
  padding: 20px 10px 10px;
  color: #004494;
  font-family: "Source Sans Pro Light";
  font-size: 20px;
  }
  @media only screen and (min-width: 701px) {
    .paragraph-content-reference__field-item .node-teaser-image-text__label
     {
      font-size: 18px; } }
  @media only screen and (min-width: 1001px) {
    .paragraph-content-reference__field-item .node-teaser-image-text__label
     {
      font-size: 19px; } }

.paragraph-content-reference__field-item .node-teaser-image-text__link {
  display: flex;
  justify-content: flex-end;
}
.paragraph-background--brand_primary .paragraph-content-reference__field-item .node-teaser-image-text__label,
.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item .node-teaser-image-text__label {
color: #fff;
}

.paragraph-content-reference--single-reference .paragraph-content-reference__field-items {
  justify-content: center; }

.paragraph-content-reference--teaser-text .paragraph-content-reference__field-items {
  flex-flow: column nowrap; }

.paragraph-content-reference--teaser-text .paragraph-content-reference__field-item {
  width: 100%;
  /*background-color: #ededed;*/
  margin-right: 10px;
  border-bottom: 1px solid rgba(88, 88, 90, 0.3);
  padding-top: 10px;
  padding-bottom: 10px; }
  @media screen and (min-width: 701px) {
    .paragraph-content-reference--teaser-text .paragraph-content-reference__field-item {
      padding-top: 15px;
      padding-bottom: 15px; } }
  @media screen and (min-width: 1001px) {
    .paragraph-content-reference--teaser-text .paragraph-content-reference__field-item {
      padding-top: 20px;
      padding-bottom: 20px; } }
  .paragraph-content-reference--teaser-text .paragraph-content-reference__field-item:first-child {
    border-top: 1px solid rgba(88, 88, 90, 0.3); }


.paragraph-content-reference__field-item .node-article__field-teaser-text,
.paragraph-content-reference__field-item .node-app__field-teaser-text,
.paragraph-content-reference__field-item .node-page__field-teaser-text {
      padding: 0 10px;
      color: #58585a;
    }
    
.paragraph-background--grey .paragraph-background-teaser--white .paragraph-content-reference__field-item .node-article__field-teaser-text,
.paragraph-background--grey .paragraph-background-teaser--white .paragraph-content-reference__field-item .node-app__field-teaser-text,
.paragraph-background--grey .paragraph-background-teaser--white .paragraph-content-reference__field-item .node-page__field-teaser-text,
.paragraph-background-teaser--white .paragraph-content-reference__field-item {
      padding: 0 0 15px 0;
      background: #fff;
    }
    
.paragraph-background--brand_primary .paragraph-content-reference__field-item .node-article__field-teaser-text,
.paragraph-background--brand_primary .paragraph-content-reference__field-item .node-app__field-teaser-text,
.paragraph-background--brand_primary .paragraph-content-reference__field-item .node-page__field-teaser-text,
.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item .node-article__field-teaser-text,
.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item .node-app__field-teaser-text,
.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item .node-page__field-teaser-text {
      padding: 0 10px;
      color: #fff;
    }

.paragraph-background-teaser--brand_primary .paragraph-content-reference__field-item {
      background: #004494; }

.paragraph-background-teaser--light_grey .paragraph-content-reference__field-item {
      background: #eee; }

.paragraph-background-teaser--grey .paragraph-content-reference__field-item {
        background: #ddd; }

/*# sourceMappingURL=content-reference.css.map */