/**
 * @file
 * Cocomore Breakpoints
 *
 * SCSS Breakpoints for Cocomore Drupal Projects
 */
/**
* @file
* Common variables
*
* Common variables for the whole project
*/
/**
* @file
* Susy 3 grid
*
* Allow for grid. Documentation:
* https://oddbird.net/susy/
* https://www.oddbird.net/2017/06/28/susy3/
* https://www.oddbird.net/2017/09/25/susy-use/
* https://www.oddbird.net/susy/docs/
*
* The whole body of the site has a maximum witdh of 1440px, except for some components
* The grid maximum width is fixed on 1110px, lateral paddings included.
*
*/
.paragraph--type--room-solutions-list .paragraph--wraper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 1024px) {
  .paragraph--type--room-solutions-list .paragraph--wraper {
    max-width: 1110px;
  }
}

.paragraph--type--room-solutions-list {
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .paragraph--type--room-solutions-list {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media (min-width: 1024px) {
  .paragraph--type--room-solutions-list {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/*
Basic Usage:

In order to use Susy, you will need to add the extend #grid__container to your wrapper / container. If the latteral paddings are necessary, just add an extra extend #grid__container-padding

The containers could have different default properties according to the breakpoints:

- Mobiles: 6 columns, gutters of 10px, lateral paddings of 15px. (DEFAULT)
- Tablet type A: 12 columns, gutters of 10px, lateral paddings of 25px.
- Tablet type B: 12 columns, gutters of 20px, lateral paddings of 25px.
- Desktop type A: 12 columns, gutters of 18px, lateral paddings of 30px, maximum width of 1100px.
- Desktop type B: 12 columns, gutters of 20px, lateral paddings of 30px, maximum width of 1100px.

Once decided the type of grid that we need for each breackpoint, we'll add them to the container with the function:

  @include susy-at($grid-12-10-tablet) {
    // content, classes...
  }

  @include susy-at($grid-12-18-desktop) {
    // content, classes...
  }

You will need to add the same number of functions as the number of breakpoints to use. It is not necesary to add mobile breakpoint because is the default grid setup.

For any nested breakpoint function, you will need to declare again the properties that you are using
(f.e.: width: span(1); ) in order to force to recalculate the math variables

For the child elements, you will use 4 basic functions:

1) span(columns-number property), that indicates the number of width columns and how to take in consideration the gap. If we place 'narrow', it will only take the columns and the interior gutter / gap. If we place 'wide', it will
take all the columns and all the gutters.

  Examples:
    - width: span(3);
    - width: span(4 wide);
    - width: span(3 of 6 narrow set-gutters 30px); (grid inside a grid and specific gutter)

2) gutter(), that function takes the current value of the gutter. It is useful for example to set margins up. It is possible to do mathematical operations with gutter().

  Examples:
    - margin-left: gutter();
    - margin-left: gutter()/2;

3) push(columns-number property), it works similar to span function. It will add a left margin to the element regarding to the previous element (if there is), and it will take in consideration if the gutter policy is 'wide', 'narrow'...

  Examples:
    - @include push(3);
    - @include push(6 wide);

4) pull(columns-number property), it works similar to push function, but, it will add margin-right instead to the left.

  Examples:
    - @include pull(3);
    - @include pull(6 wide);

For in situ examples, it has been added a demo page "demo.html" isolated from drupal.

*/
@font-face {
  font-family: "Helvetica Neue Medium";
  src: local("Helvetica Neue Medium"), url("../fonts/5597829/1cf69995-b0df-4325-a46c-1e6cbf62945b.woff2") format("woff2"), url("../fonts/5597829/fd6f684c-068e-4f49-a7b1-2b72e4706f82.woff") format("woff"), url("../fonts/5597829/751f4137-79be-43a5-b082-cece8829908a.ttf") format("truetype"), url("../fonts/5597829/532c6ed6-f7d0-4593-8e67-d9b48c0d0d9a.eot?#iefix") format("eot");
  font-display: swap;
  font-weight: normal;
}
@font-face {
  font-family: "Helvetica Neue Regular";
  src: local("Helvetica Neue Regular"), url("../fonts/5597801/92130cb4-d99d-43aa-a0a8-2cf4451f4d6e.woff2") format("woff2"), url("../fonts/5597801/cf9b3e3a-e56a-428a-83f3-9cb745540375.woff") format("woff"), url("../fonts/5597801/8a4e62ee-5417-45df-bb4c-9068cc56ba1e.ttf") format("truetype"), url("../fonts/5597801/7bdc73f2-5ac9-4be2-98ea-e001c305aba5.eot?#iefix") format("eot");
  font-display: swap;
  font-weight: normal;
}
@font-face {
  font-family: "Helvetica Neue Bold";
  src: url("../fonts/5664150/800da3b0-675f-465f-892d-d76cecbdd5b1.woff2") format("woff2"), url("../fonts/5664150/7b415a05-784a-4a4c-8c94-67e9288312f5.woff") format("woff");
  font-display: swap;
  font-weight: normal;
}
.paragraph--type--room-solutions-list {
  width: 100%;
}
@media (min-width: 768px) {
  .paragraph--type--room-solutions-list {
    margin-bottom: 42px;
  }
}
.paragraph--type--room-solutions-list .paragraph--wraper {
  display: flex;
  align-items: flex-start;
}
.paragraph--type--room-solutions-list .paragraph--wraper .field--name-field-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-family: "Helvetica Neue Medium", Helvetica, sans-serif;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .paragraph--type--room-solutions-list .paragraph--wraper .field--name-field-title {
    font-size: 1.5rem;
    line-height: 2.125rem;
    margin-bottom: 30px;
  }
}
.paragraph--type--room-solutions-list .paragraph--wraper .field--name-field-room-solutions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
  width: 100%;
  flex-direction: column;
}
@media (min-width: 768px) {
  .paragraph--type--room-solutions-list .paragraph--wraper .field--name-field-room-solutions {
    flex-direction: row;
  }
}
.paragraph--type--room-solutions-list .paragraph--wraper .field--name-field-room-solutions > .field__item {
  width: 100%;
}
@media (min-width: 768px) {
  .paragraph--type--room-solutions-list .paragraph--wraper .field--name-field-room-solutions > .field__item {
    flex-basis: calc(50% - 18px);
    max-width: calc(50% - 18px);
  }
}
@media (min-width: 1024px) {
  .paragraph--type--room-solutions-list .paragraph--wraper .field--name-field-room-solutions > .field__item {
    flex-basis: calc(33.3333333333% - 18px);
    max-width: calc(33.3333333333% - 18px);
  }
}
.paragraph--type--room-solutions-list .paragraph--wraper .field--name-field-room-solutions:after {
  content: "";
  flex-basis: calc(33.3333333333% - 18px);
}
.paragraph--type--room-solutions-list .paragraph--wraper .container-size--label,
.paragraph--type--room-solutions-list .paragraph--wraper .collapsible-elements {
  display: block;
  color: #6E6E6E;
  font-family: "Helvetica Neue Regular", Helvetica, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  letter-spacing: 0.5px;
}
@media (min-width: 768px) {
  .paragraph--type--room-solutions-list .paragraph--wraper .container-size--label,
.paragraph--type--room-solutions-list .paragraph--wraper .collapsible-elements {
    display: none;
  }
}
.paragraph--type--room-solutions-list .paragraph--wraper .collapsible-elements {
  line-height: 1.5rem;
  clear: both;
  margin-bottom: 25px;
  margin-top: 6px;
  width: 100%;
}
.paragraph--type--room-solutions-list .paragraph--wraper .collapsible-elements--label {
  background-size: auto;
  width: 100%;
  transition: all 0.2s;
  background-position: 0px center;
  background-repeat: no-repeat;
  display: inline-flex;
  justify-content: flex-start;
  -webkit-justify-content: flex-start;
  text-indent: 19px;
  background-size: 13px;
  background-image: url("../../../../themes/ela_theme/images/icons/plus-grey.svg");
}
.paragraph--type--room-solutions-list .paragraph--wraper .collapsible-elements--label.open {
  background-position: 0px center;
  background-size: auto;
  transition: all 0.2s;
  background-size: 13px;
  background-image: url("../../../../themes/ela_theme/images/icons/minus-grey.svg");
}
.paragraph--type--room-solutions-list .paragraph--wraper .collapsible-elements--label.hide {
  display: none;
}

.paragraph--type--room-solution {
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .paragraph--type--room-solution {
    margin-bottom: 18px;
  }
}
.paragraph--type--room-solution .paragraph--wrapper {
  width: 100%;
  height: 62px;
  background-color: #F0F0F0;
  display: flex;
  flex-direction: row;
  position: relative;
}
.paragraph--type--room-solution .paragraph--wrapper .field-link--wrapper {
  position: absolute;
  width: 100%;
  height: 62px;
  display: block;
  max-width: initial;
}
.paragraph--type--room-solution .paragraph--wrapper .field--name-field-link {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  align-self: center;
  font-family: "Helvetica Neue Medium", Helvetica, sans-serif;
  margin-left: 12px;
  width: max-content;
}
.paragraph--type--room-solution .paragraph--wrapper .field--name-field-link span, .paragraph--type--room-solution .paragraph--wrapper .field--name-field-link a {
  max-width: initial;
  color: #1E1E1E;
  flex: 0 1 calc(100% - 6.75px);
}
.paragraph--type--room-solution .paragraph--wrapper .field--name-field-link span:hover, .paragraph--type--room-solution .paragraph--wrapper .field--name-field-link a:hover {
  text-decoration: none;
}
.paragraph--type--room-solution .paragraph--wrapper .field--name-field-link:after {
  display: inline-block;
  position: relative;
  content: "";
  height: 10px;
  width: 6.75px;
  margin-left: 5px;
  margin-right: 5px;
  background-color: #323232;
  background: url(../../../../themes/ela_theme/images/icons/chevron-15px-medium.svg);
  background-size: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  align-self: center;
}
.paragraph--type--room-solution .paragraph--wrapper .icon {
  max-width: 50px;
  max-height: 32px;
  min-height: 32px;
  min-width: 50px;
  width: 50px;
  height: 32px;
  margin-top: 15px;
  margin-left: 15px;
}
.paragraph--type--room-solution.hide {
  display: none;
}
@media (min-width: 768px) {
  .paragraph--type--room-solution.hide {
    display: block;
  }
}