// Colors
//$barColor: $brand-secondary;
//$overlayColor: $brand-grey-light;
//$backColor: $brand-secondary-light;

.txtvaloracion {
  margin-top: 5px;
  strong {
    &:before {
      content: '\A';
    }
  }
}

/* Bloque servicios*/
.header_content {
  margin-top: 30px;
}

/* Nota Destinia hotel */
.puntuacion_resumen {
  padding: 0 0 18px 0;
  border-bottom: 2px solid #e6e6e6;
  clear: both;
}

.tipo_puntuacion_contenedor {
  margin: 20px 0;
}

.puntuacion_line {
  margin-bottom: 6px;
}

.puntuacion {
  font-size: 14px;
  font-weight: $roboto-bold;
  margin: 0 0 0 -10px;
}

.tipo_puntuacion {
  font-size: 12px;
  padding: 0;
}
.progress {
  margin: 7px 0 0 -15px;
  height: 7px;
  border-radius: 0;
  box-shadow: none;
  background: $backColor;
}

.progress-bar {
  background: $barColor;
  box-shadow: none;
}

/* circular rating bar */

/* colocacion en caja opiniones */
.progress-radial {
  float: right;
  margin-right: 13px;
}

/* texto seo */
.info-text {
  margin: 10px 0 30px 0;
}

.info-text.completewidth {
  margin: 10px -15px 30px;
  padding: 20px 15px;
  background: #ededed;
}

/* -------------------------------------
 * Bar container
 * ------------------------------------- */
.progress-radial {
  position: relative;
  width: $progress-radial-diameter;
  height: $progress-radial-diameter;
  border-radius: 50%;
  background-color: $barColor; // default 100%
}

/* -------------------------------------
 * Optional centered circle w/text
 * ------------------------------------- */
.progress-radial .overlay {
  position: absolute;
  width: $progress-radial-overlay-diameter;
  height: $progress-radial-overlay-diameter;
  background-color: $overlayColor;
  border-radius: 50%;
  margin-left: 4px;
  color: $barColor;
  margin-top: 4px;
  text-align: center;
  line-height: $progress-radial-overlay-diameter;
  font-size: $progress-radial-rating;
  @include medium-weight;
}

/* -------------------------------------
 * Mixin for progress-% class
 * ------------------------------------- */

$step: 5;
// step of % for created classes
$loops: round(100 / $step);
$increment: 360 / $loops;
$half: round($loops / 2);
@for $i from 0 through $loops {
  .progress-#{$i*$step} {
    @if $i < $half {
      $nextdeg: 90deg + ($increment * $i);
      background-image: linear-gradient(90deg, $backColor 50%, transparent 50%, transparent), linear-gradient($nextdeg, $barColor 50%, $backColor 50%, $backColor);
    } @else {
      $nextdeg: -90deg + ( $increment * ($i - $half) );
      background-image: linear-gradient($nextdeg, $barColor 50%, transparent 50%, transparent), linear-gradient(270deg, $barColor 50%, $backColor 50%, $backColor);

    }
  }
}
/* Opiniones */
.opinions-list {
  padding: 0;
  list-style: none;
  li {
    margin-bottom: 30px;
  }
}

.notacomentario {
  color: $brand-primary;
  background: transparent;
  padding: 4px 6px;
  border-radius: 50%;
  border: 1px solid $brand-primary;
  font-size: 14px;
  @include medium-weight;
  margin: 5px 15px 0 0;
  min-width: 30px;
  float: left;
  text-align: center;
}

.txtopinion {
  margin-left: 42px;
  .title-opinion {
    text-transform: uppercase;
    font-weight: $roboto-regular;
    color: #535353;
  }
  .datosuser {
    font-size: 14px;
    border-bottom: 2px solid #e6e6e6;
    padding-bottom: 5px;
    margin-bottom: 5px;
    color: #535353;
    strong {
      font-weight: $roboto-light;
      font-style: italic;
    }
  }
  .opinion {
    font-size: 14px;
    font-weight: $roboto-light;
  }
}


/* Mobile */
@media (max-width:$screen-xs-max) {
  /* -------------------------------------
   * Bar container
   * ------------------------------------- */
  .progress-radial {
    width: 46px;
    height: 46px;
  }

  /* -------------------------------------
   * Optional centered circle w/text
   * ------------------------------------- */
  .progress-radial .overlay {
    position: absolute;
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 18px;
  }
}