/**
 * @file
 * The ckeditor components.
 *
 * It includes styles for the ckeditor itself and its
 * components.
 *
 *
 *
 * Global ckeditor rules
 */


/**
*   <hr> design
**/

 hr {
  border: 1px solid #E1E1E1;
  margin: 1rem 0;
}


/**
*  Icon title left
**/

 .title__icon--orange,
 .title__icon--green,
 .title__icon--yellow,
 .title__icon--blue {
  position: relative;
  /* display: flex; */
  /* align-items: center; */
  margin-left: 35px;
}

.title__icon--orange::before,
.title__icon--green::before,
.title__icon--yellow::before,
.title__icon--blue::before {
  content: "";
  background-repeat: no-repeat;
  background-size: 28px 30px;
  display: inline-block;
  width: 28px;
  height: 30px;
  position: absolute;
  left: -35px;
  top: 9px;
}

.title__icon--orange::before {
  background-image: url(../images/header/item-orange.svg);
}
.title__icon--green::before {
  background-image: url(../images/header/item-green.svg);
}
.title__icon--yellow::before {
  background-image: url(../images/header/item-yellow.svg);
}
.title__icon--blue::before {
  background-image: url(../images/header/item-blue.svg);
}

/**
*  Icon title top
**/

.title__icon-top--orange,
.title__icon-top--green,
.title__icon-top--yellow,
.title__icon-top--blue {
  position: relative;
  display: block;
}

.title__icon-top--orange::before,
.title__icon-top--green::before,
.title__icon-top--yellow::before,
.title__icon-top--blue::before {
  content: "";
  background-size: 28px 30px;
  display: inline-block;
  width: 28px;
  height: 30px;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
}

.title__icon-top--orange::before {
 background-image: url(../images/header/item-orange.svg);
}
.title__icon-top--green::before {
 background-image: url(../images/header/item-green.svg);
}
.title__icon-top--yellow::before {
 background-image: url(../images/header/item-yellow.svg);
}
.title__icon-top--blue::before {
 background-image: url(../images/header/item-blue.svg);
}


/**
*  Icon phone
**/

.phone__icon {
  position: relative;
  margin-left: 35px;
}
.phone__icon::after {
  content: "";
  background-image: url(../images/icon/icon-phone.svg);
  background-repeat: no-repeat;
  background-size: 28px 30px;
  display: inline-block;
  width: 28px;
  height: 30px;
  position: absolute;
  left: -35px;
}


/**
 * Icon Facebook
 */

 .facebook__icon {
  height: 40px;
  width: 40px;
  background-color: white;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  text-indent: -999px;
  overflow: hidden;
 }
 .facebook__icon:hover {
  background-color: rgb(216, 203, 203);
}
 .facebook__icon::before {
  background-image: url(../images/footer/facebook-black.svg);
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background-size: contain;
  background-repeat: no-repeat;
  width: 24px;
  height: 24px;
 }


/**
*  Text color
**/

.text__blue {
  color: var(--primary);
  font-size: 1.375rem;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
}