/* -----------------------------------------------------------------------------
  Bootstrap 4 Variables and Mixins
----------------------------------------------------------------------------- */
/* -----------------------------------------------------------------------------

  Paragraph Section CSS.

  Table of Contents:
    Base Paragraph Styling
    Widths
    Colors
    Nesting
    Paragraph Types

      The following classes are available if the different Paragraph types
      need their own individual styling.

      .paragraph.paragraph--type--blank {}
      .paragraph.paragraph--type--columns {} -- Is used below
      .paragraph.paragraph--type--columns-three-uneven {} -- Is used below
      .paragraph.paragraph--type--columns-two-uneven {} -- Is used below
      .paragraph.paragraph--type--image {}
      .paragraph.paragraph--type--modal {} -- Is used below
      .paragraph.paragraph--type--simple {}
      .paragraph.paragraph--type--tabs {} -- Is used below
      .paragraph.paragraph--type--view {}

----------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Base Paragraph Styling.                                                    */
/* -------------------------------------------------------------------------- */
.paragraph {
  margin-bottom: 30px;
  /* nested */ }
  .paragraph.paragraph--color {
    padding: 25px; }
  .paragraph .paragraph {
    margin-bottom: 0px; }

/* type image */
.paragraph--type--image img {
  max-width: 100%;
  height: auto; }

/* Two Uneven Columns Paragraph.
 .paragraph--columns-two-uneven.html.twig */
.paragraph--type--columns-two-uneven.paragraph--style--75-25 .paragraph:nth-of-type(1) {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 768px) {
    .paragraph--type--columns-two-uneven.paragraph--style--75-25 .paragraph:nth-of-type(1) {
      float: left;
      width: 75%; } }

.paragraph--type--columns-two-uneven.paragraph--style--75-25 .paragraph:nth-of-type(2) {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 768px) {
    .paragraph--type--columns-two-uneven.paragraph--style--75-25 .paragraph:nth-of-type(2) {
      float: left;
      width: 25%; } }

.paragraph--type--columns-two-uneven.paragraph--style--66-33 .paragraph:nth-of-type(1) {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 768px) {
    .paragraph--type--columns-two-uneven.paragraph--style--66-33 .paragraph:nth-of-type(1) {
      float: left;
      width: 66.66667%; } }

.paragraph--type--columns-two-uneven.paragraph--style--66-33 .paragraph:nth-of-type(2) {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 768px) {
    .paragraph--type--columns-two-uneven.paragraph--style--66-33 .paragraph:nth-of-type(2) {
      float: left;
      width: 33.33333%; } }

.paragraph--type--columns-two-uneven.paragraph--style--25-75 .paragraph:nth-of-type(1) {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 768px) {
    .paragraph--type--columns-two-uneven.paragraph--style--25-75 .paragraph:nth-of-type(1) {
      float: left;
      width: 25%; } }

.paragraph--type--columns-two-uneven.paragraph--style--25-75 .paragraph:nth-of-type(2) {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 768px) {
    .paragraph--type--columns-two-uneven.paragraph--style--25-75 .paragraph:nth-of-type(2) {
      float: left;
      width: 75%; } }

.paragraph--type--columns-two-uneven.paragraph--style--33-66 .paragraph:nth-of-type(1) {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 768px) {
    .paragraph--type--columns-two-uneven.paragraph--style--33-66 .paragraph:nth-of-type(1) {
      float: left;
      width: 33.33333%; } }

.paragraph--type--columns-two-uneven.paragraph--style--33-66 .paragraph:nth-of-type(2) {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }
  @media (min-width: 768px) {
    .paragraph--type--columns-two-uneven.paragraph--style--33-66 .paragraph:nth-of-type(2) {
      float: left;
      width: 66.66667%; } }