@charset "UTF-8";

*, *:before, *:after {
  box-sizing: border-box;
}

/* General
 * ========================================================================== */

.bg-red   {background-color: var(--color-red) !important;}
.bg-white {background-color: var(--color-white) !important;}
.bg-black {background-color: var(--color-black) !important;}
.bg-darkgray  {background-color: var(--color-darkgray) !important;}
.bg-berlingot {background-color: var(--color-berlingot) !important;}
.bg-lightgray {background-color: var(--color-lightgray) !important;}
.bg-goldenrod {background-color: var(--color-goldenrod) !important;}
.bg-ultramarine {background-color: var(--color-ultramarine) !important;}
.bg-darkemerald {background-color: var(--color-darkemerald) !important;}
.bg-rougeorange  {background-color: var(--color-rougeorange) !important;}
.bg-lightsteelblue {background-color: var(--color-lightsteelblue) !important;}
.bg-ultralightgray {background-color: var(--color-ultralightgray) !important;}

.border-color-red   {border-color: var(--color-red) !important;}
.border-color-white {border-color: var(--color-white) !important;}
.border-color-black {border-color: var(--color-black) !important;}
.border-color-darkgray  {border-color: var(--color-darkgray) !important;}
.border-color-berlingot {border-color: var(--color-berlingot) !important;}
.border-color-lightgray {border-color: var(--color-lightgray) !important;}
.border-color-goldenrod {border-color: var(--color-goldenrod) !important;}
.border-color-ultramarine {border-color: var(--color-ultramarine) !important;}
.border-color-darkemerald {border-color: var(--color-darkemerald) !important;}
.border-color-rougeorange  {border-color: var(--color-rougeorange) !important;}
.border-color-lightsteelblue {border-color: var(--color-lightsteelblue) !important;}
.border-color-ultralightgray {border-color: var(--color-ultralightgray) !important;}
.border-color-lightultramarine{border-color: var(--color-lightultramarine) !important;}

.border-style-solid{border-style: solid !important;}
.border-style-dashed{border-style: dashed !important;}
.border-width1{border-width: 1px !important}
.border-width2{border-width: 2px !important}

.border-radius100vh{border-radius: 100vh !important}
.border-none{border:none !important;}

html:not(.mobile) .hover-bg-red:hover   {background-color: var(--color-red) !important;}
html:not(.mobile) .hover-bg-white:hover {background-color: var(--color-white) !important;}
html:not(.mobile) .hover-bg-black:hover {background-color: var(--color-black) !important;}
html:not(.mobile) .hover-bg-darkgray:hover  {background-color: var(--color-darkgray) !important;}
html:not(.mobile) .hover-bg-berlingot:hover {background-color: var(--color-berlingot) !important;}
html:not(.mobile) .hover-bg-lightgray:hover {background-color: var(--color-lightgray) !important;}
html:not(.mobile) .hover-bg-goldenrod:hover {background-color: var(--color-goldenrod) !important;}
html:not(.mobile) .hover-bg-ultramarine:hover {background-color: var(--color-ultramarine) !important;}
html:not(.mobile) .hover-bg-darkemerald:hover {background-color: var(--color-darkemerald) !important;}
html:not(.mobile) .hover-bg-rougeorange:hover  {background-color: var(--color-rougeorange) !important;}
html:not(.mobile) .hover-bg-lightsteelblue:hover {background-color: var(--color-lightsteelblue) !important;}
html:not(.mobile) .hover-bg-ultralightgray:hover {background-color: var(--color-ultralightgray) !important;}

html:not(.mobile) .hover-tx-red:hover   {color: var(--color-red) !important;}
html:not(.mobile) .hover-tx-white:hover {color: var(--color-white) !important;}
html:not(.mobile) .hover-tx-black:hover {color: var(--color-black) !important;}
html:not(.mobile) .hover-tx-darkgray:hover  {color: var(--color-darkgray) !important;}
html:not(.mobile) .hover-tx-berlingot:hover {color: var(--color-berlingot) !important;}
html:not(.mobile) .hover-tx-lightgray:hover {color: var(--color-lightgray) !important;}
html:not(.mobile) .hover-tx-goldenrod:hover {color: var(--color-goldenrod) !important;}
html:not(.mobile) .hover-tx-ultramarine:hover {color: var(--color-ultramarine) !important;}
html:not(.mobile) .hover-tx-darkemerald:hover {color: var(--color-darkemerald) !important;}
html:not(.mobile) .hover-tx-rougeorange:hover  {color: var(--color-rougeorange) !important;}
html:not(.mobile) .hover-tx-lightsteelblue:hover {color: var(--color-lightsteelblue) !important;}
html:not(.mobile) .hover-tx-ultralightgray:hover {color: var(--color-ultralightgray) !important;}

html:not(.mobile) .hover-border-color-red:hover   {border-color: var(--color-red) !important;}
html:not(.mobile) .hover-border-color-white:hover {border-color: var(--color-white) !important;}
html:not(.mobile) .hover-border-color-black:hover {border-color: var(--color-black) !important;}
html:not(.mobile) .hover-border-color-darkgray:hover  {border-color: var(--color-darkgray) !important;}
html:not(.mobile) .hover-border-color-berlingot:hover {border-color: var(--color-berlingot) !important;}
html:not(.mobile) .hover-border-color-lightgray:hover {border-color: var(--color-lightgray) !important;}
html:not(.mobile) .hover-border-color-goldenrod:hover {border-color: var(--color-goldenrod) !important;}
html:not(.mobile) .hover-border-color-ultramarine:hover {border-color: var(--color-ultramarine) !important;}
html:not(.mobile) .hover-border-color-darkemerald:hover {border-color: var(--color-darkemerald) !important;}
html:not(.mobile) .hover-border-color-rougeorange:hover  {border-color: var(--color-rougeorange) !important;}
html:not(.mobile) .hover-border-color-lightsteelblue:hover {border-color: var(--color-lightsteelblue) !important;}
html:not(.mobile) .hover-border-color-ultralightgray:hover {border-color: var(--color-ultralightgray) !important;}

.hide{display:none !important}
html.xxs .xs-hide{display:none !important;}
html.xs .xs-hide{display:none !important;}
html.sm .sm-hide{display:none !important;}
html.md .md-hide{display:none !important;}
html.lg .lg-hide{display:none !important;}
html.xlg .lg-hide{display:none !important;}

html.xxs .xs-overflow-hidden{overflow: hidden !important}
html.xs .xs-overflow-hidden{overflow: hidden !important}
html.sm .sm-overflow-hidden{overflow: hidden !important}
html.md .md-overflow-hidden{overflow: hidden !important}
html.lg .lg-overflow-hidden{overflow: hidden !important}
html.xlg .lg-overflow-hidden{overflow: hidden !important}

.min-width100{min-width:10rem !important;}
.min-width200{min-width:20rem !important;}
.max-width100{max-width:10rem !important;}
.max-width200{max-width:20rem !important;}

.display-block{display: block !important;}
.display-flex {display: flex !important;}
.display-inline-block{display: inline-block !important;}
.display-inline-flex {display: inline-flex !important;}

.justify-content-left{justify-content: left !important;}
.justify-content-center{justify-content: center !important;}
.align-items-baseline{align-items: baseline !important;}
.align-items-center{align-items: center !important;}

.position-relative{position:relative !important;}
.position-absolute{position:absolute !important;}

.min-width-auto{min-width:auto !important;}
.min-width100{min-width:10rem !important;}
.min-width200{min-width:20rem !important;}
.max-width100{max-width:10rem !important;}
.max-width200{max-width:20rem !important;}

.min-width-auto{min-width:auto !important;}
.max-width-none{max-width:none !important;}
.min-height-auto{min-height:auto !important;}
.max-height-none{max-height:none !important;}

.mt0  {margin-top:0px !important;}
.mt10 {margin-top:10px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}
.mt70 {margin-top:70px !important;}
.mt80 {margin-top:80px !important;}
.mt90 {margin-top:90px !important;}
.mt100{margin-top:100px !important;}
.mtauto{margin-top:auto !important;}

.mb0  {margin-bottom:0px !important;}
.mb10 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mb30 {margin-bottom:30px !important;}
.mb40 {margin-bottom:40px !important;}
.mb50 {margin-bottom:50px !important;}
.mb60 {margin-bottom:60px !important;}
.mb70 {margin-bottom:70px !important;}
.mb80 {margin-bottom:80px !important;}
.mb90 {margin-bottom:90px !important;}
.mb100{margin-bottom:100px !important;}
.mbauto{margin-bottom:auto !important;}

.ml0  {margin-left:0px !important;}
.ml10 {margin-left:10px !important;}
.ml20 {margin-left:20px !important;}
.ml30 {margin-left:30px !important;}
.ml40 {margin-left:40px !important;}
.ml50 {margin-left:50px !important;}
.ml60 {margin-left:60px !important;}
.ml70 {margin-left:70px !important;}
.ml80 {margin-left:80px !important;}
.ml90 {margin-left:90px !important;}
.ml100{margin-left:100px !important;}
.mlauto{margin-left:auto !important;}

.mr0  {margin-right:0px !important;}
.mr10 {margin-right:10px !important;}
.mr20 {margin-right:20px !important;}
.mr30 {margin-right:30px !important;}
.mr40 {margin-right:40px !important;}
.mr50 {margin-right:50px !important;}
.mr60 {margin-right:60px !important;}
.mr70 {margin-right:70px !important;}
.mr80 {margin-right:80px !important;}
.mr90 {margin-right:90px !important;}
.mr100{margin-right:100px !important;}
.mrauto{margin-right:auto !important;}

.pt0  {padding-top:0px !important;}
.pt10 {padding-top:10px !important;}
.pt20 {padding-top:20px !important;}
.pt30 {padding-top:30px !important;}
.pt40 {padding-top:40px !important;}
.pt50 {padding-top:50px !important;}
.pt60 {padding-top:60px !important;}
.pt70 {padding-top:70px !important;}
.pt80 {padding-top:80px !important;}
.pt90 {padding-top:90px !important;}
.pt100{padding-top:100px !important;}

.pb0  {padding-bottom:0px !important;}
.pb10 {padding-bottom:10px !important;}
.pb20 {padding-bottom:20px !important;}
.pb30 {padding-bottom:30px !important;}
.pb40 {padding-bottom:40px !important;}
.pb50 {padding-bottom:50px !important;}
.pb60 {padding-bottom:60px !important;}
.pb70 {padding-bottom:70px !important;}
.pb80 {padding-bottom:80px !important;}
.pb90 {padding-bottom:90px !important;}
.pb100{padding-bottom:100px !important;}

.pl0  {padding-left:0px !important;}
.pl10 {padding-left:10px !important;}
.pl20 {padding-left:20px !important;}
.pl30 {padding-left:30px !important;}
.pl40 {padding-left:40px !important;}
.pl50 {padding-left:50px !important;}
.pl60 {padding-left:60px !important;}
.pl70 {padding-left:70px !important;}
.pl80 {padding-left:80px !important;}
.pl90 {padding-left:90px !important;}
.pl100{padding-left:100px !important;}

.pr0  {padding-right:0px !important;}
.pr10 {padding-right:10px !important;}
.pr20 {padding-right:20px !important;}
.pr30 {padding-right:30px !important;}
.pr40 {padding-right:40px !important;}
.pr50 {padding-right:50px !important;}
.pr60 {padding-right:60px !important;}
.pr70 {padding-right:70px !important;}
.pr80 {padding-right:80px !important;}
.pr90 {padding-right:90px !important;}
.pr100{padding-right:100px !important;}

.width20{width: 20% !important;}
.width25{width: 25% !important;}
.width30{width: 30% !important;}
.width35{width: 35% !important;}
.width40{width: 40% !important;}
.width45{width: 45% !important;}
.width50{width: 50% !important;}
.width55{width: 55% !important;}
.width60{width: 60% !important;}
.width65{width: 65% !important;}
.width70{width: 70% !important;}
.width75{width: 75% !important;}
.width80{width: 80% !important;}
.width85{width: 85% !important;}
.width90{width: 90% !important;}
.width95{width: 95% !important;}
.width100{width: 100% !important;}
.width-auto{width: auto !important;}

.ico-sm{width: 32px !important;}
.ico-md{width: 64px !important;}
.ico-lg{width: 128px !important;}

.box-shadow-none{box-shadow: none !important;}
.border-none{border:none !important;}
.focusline-none:focus{outline: none !important;}

.font14px{font-size:1.4rem;}
.font0 {font-size:0 !important;}
.font10{font-size:1.0rem !important;}
.font11{font-size:1.1rem !important;}
.font12{font-size:1.2rem !important;}
.font13{font-size:1.3rem !important;}
.font14{font-size:1.4rem !important;}
.font15{font-size:1.5rem !important;}
.font16{font-size:1.6rem !important;}
.font17{font-size:1.7rem !important;}
.font18{font-size:1.8rem !important;}
.font19{font-size:1.9rem !important;}
.font20{font-size:2.0rem !important;}
.font21{font-size:2.1rem !important;}
.font22{font-size:2.2rem !important;}
.font23{font-size:2.3rem !important;}
.font24{font-size:2.4rem !important;}
.font25{font-size:2.5rem !important;}
.font26{font-size:2.6rem !important;}
.font27{font-size:2.7rem !important;}
.font28{font-size:2.8rem !important;}
.font29{font-size:2.8rem !important;}
.font30{font-size:3.0rem !important;}
.font31{font-size:3.0rem !important;}
.font32{font-size:3.0rem !important;}

.tx-red   {color: var(--color-red) !important;}
.tx-white {color: var(--color-white) !important;}
.tx-black {color: var(--color-black) !important;}
.tx-darkgray  {color: var(--color-darkgray) !important;}
.tx-berlingot {color: var(--color-berlingot) !important;}
.tx-lightgray {color: var(--color-lightgray) !important;}
.tx-goldenrod {color: var(--color-goldenrod) !important;}
.tx-ultramarine {color: var(--color-ultramarine) !important;}
.tx-darkemerald {color: var(--color-darkemerald) !important;}
.tx-rougeorange  {color: var(--color-rougeorange) !important;}
.tx-lightsteelblue {color: var(--color-lightsteelblue) !important;}
.tx-ultralightgray {color: var(--color-ultralightgray) !important;}

.tx-bold {font-weight:bold;}
.tx-normal {font-weight:normal;}
.tx-align-left {text-align:left !important;}
.tx-align-center {text-align:center !important;}
.tx-align-right {text-align:right !important;}

.tx-shadow-strong{text-shadow: #000 2px 0px 10px, #000 -2px 0px 10px, #000 0px -2px 10px, #000 0px 2px 10px, #000 2px 2px 10px, #000 -2px 2px 10px, #000 2px -2px 10px, #000 -2px -2px 10px, #000 1px 2px 10px, #000 -1px 2px 10px, #000 1px -2px 10px, #000 -1px -2px 10px, #000 2px 1px 10px, #000 -2px 1px 10px, #000 2px -1px 10px, #000 -2px -1px 10px;}
.tx-shadow-middle{text-shadow: #000 2px 0px 5px, #000 -2px 0px 5px, #000 0px -2px 5px, #000 0px 2px 5px, #000 2px 2px 5px, #000 -2px 2px 5px, #000 2px -2px 5px, #000 -2px -2px 5px, #000 1px 2px 5px, #000 -1px 2px 5px, #000 1px -2px 5px, #000 -1px -2px 10px, #000 2px 1px 5px, #000 -2px 1px 5px, #000 2px -1px 5px, #000 -2px -1px 5px;}
.tx-shadow-weak{text-shadow: #000 2px 0px 2px, #000 -2px 0px 2px, #000 0px -2px 2px, #000 0px 2px 2px, #000 2px 2px 2px, #000 -2px 2px 2px, #000 2px -2px 2px, #000 -2px -2px 2px, #000 1px 2px 2px, #000 -1px 2px 2px, #000 1px -2px 2px, #000 -1px -2px 2px, #000 2px 1px 2px, #000 -2px 1px 2px, #000 2px -1px 2px, #000 -2px -1px 2px;}

.order-0 {order: 0;}
.order-1 {order: 1;}
.order-2 {order: 2;}
.order-3 {order: 3;}
.order-4 {order: 4;}
.order-5 {order: 5;}
.order-6 {order: 6;}
.order-7 {order: 7;}

strong {
  font-weight: bold;
}

/* css-icons
 * ========================================================================== */

:root{
  --ggs: 1;
}
.gg-size-m{
  --ggs: 1.5;
}
.gg-size-l{
  --ggs: 2;
}

.gg-math-plus,
.gg-math-minus,
.gg-math-plus::after {
  background: currentColor;
}
.gg-math-plus::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 16px;
  top: -7px;
  left: 7px
}
.gg-math-plus,
.gg-math-minus {
  position: relative;
  transform: scale(var(--ggs,1));
  width: 16px;
  min-width: 16px;
  height: 2px;
  font-size:0;
}

.gg-close{
  transform: scale(var(--ggs,1));
  width: 16px;
  min-width: 16px;
  height: 16px;
  font-size: 0;
  position: relative;
}
.gg-close, .gg-close::after, .gg-close::before {
  box-sizing: border-box;
  display: block;
}
.gg-close::after, .gg-close::before {
  content: "";
  position: absolute;
  border-left: 2px solid;
  border-bottom: 2px solid;
  transform: rotate(45deg) scaleY(1);
  width: 11px;
  height: 11px;
  border-color: currentColor;
}
.gg-close::before {
  left: 9px;
  top: 3px;
}
.gg-close::after {
  transform: rotate(-45deg) scaleX(-1);
  left: -4px;
  top: 3px;
}

.gg-threeline {
  position: relative;
  transform: scale(var(--ggs,1));
  width: 14px;
  min-width: 14px;
  height: 14px;
  font-size: 0;
}
.gg-threeline, .gg-threeline::before {
  display: block;
  box-sizing: border-box;
}
.gg-threeline::before {
  content: "";
  position: absolute;
  background: currentColor;
  width: 14px;
  height: 2px;
  border-radius: 4px;
  box-shadow: 0 6px 0, 0px 12px 0;
}

.gg-top-arrow-head {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 22px;
  min-width: 22px;
  height: 22px;
  font-size: 0;
}
.gg-top-arrow-head::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-right: 2px solid;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid;
  transform: rotate(-135deg);
  right: 7px;
  top: 8px;
  border-color: currentColor;
}

.gg-bottom-arrow-head {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 22px;
  min-width: 22px;
  height: 22px;
  font-size: 0;
}
.gg-bottom-arrow-head::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-right: 2px solid;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid;
  transform: rotate(45deg);
  right: 7px;
  top: 4px;
  border-color: currentColor;
}

.gg-right-arrow-head {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 22px;
  min-width: 22px;
  height: 22px;
  font-size: 0;
}
.gg-right-arrow-head::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-right: 2px solid;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid;
  transform: rotate(-45deg);
  right: 8px;
  top: 6px;
  border-color: currentColor;
}

.gg-arrow-left-o {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 19px;
  min-width: 19px;
  height: 19px;
  border: 1px solid;
  transform: scale(var(--ggs,1));
  border-radius: 50%;
  font-size:0;
}
.gg-arrow-left-o::after, .gg-arrow-left-o::before {
  content: "";
  display: block;
  box-sizing: content-box;
  position: absolute;
  left: 4px;
}
.gg-arrow-left-o::before {
  width: 10px;
  height: 1px;
  top: 0;
  bottom: 0;
  background: currentColor;
  margin: auto;
}
.gg-arrow-left-o::after {
  width: 4px;
  height: 4px;
  border-bottom: 1px solid;
  border-left: 1px solid;
  transform: rotate(45deg);
  top: 0px;
  bottom: 0;
  margin: auto;
}

.gg-arrow-right-o {
  box-sizing: border-box;
  position: relative;
  display: block;
  width: 19px;
  min-width: 19px;
  height: 19px;
  border: 1px solid currentColor;
  transform: scale(var(--ggs,1));
  border-radius: 50%;
  font-size: 0;
}
.gg-arrow-right-o::after, .gg-arrow-right-o::before {
  content: "";
  display: block;
  box-sizing: content-box;
  position: absolute;
  right: 4px;
}
.gg-arrow-right-o::before {
  width: 10px;
  height: 1px;
  top: 0;
  bottom: 0;
  background: currentColor;
  margin: auto;
}
.gg-arrow-right-o::after {
  width: 4px;
  height: 4px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(45deg);
  top: 0px;
  bottom: 0;
  margin: auto;
  border-color: currentColor;
}

.gg-chevron-up-o {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 19px;
  min-width: 19px;
  height: 19px;
  border: 1px solid;
  border-radius: 50%;
  font-size: 0;
}
.gg-chevron-up-o::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 5px;
  height: 5px;
  border-top: 1px solid;
  border-right: 1px solid;
  transform: rotate(-45deg);
  left: 6px;
  bottom: 5px;
  border-color: currentColor;
}

.gg-chevron-down-o {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 19px;
  min-width: 19px;
  height: 19px;
  border: 1px solid;
  border-radius: 50%;
  font-size:0;
}
.gg-chevron-down-o::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  width: 5px;
  height: 5px;
  border-bottom: 1px solid;
  border-right: 1px solid;
  transform: rotate(45deg);
  left: 6px;
  top: 5px;
  border-color: currentColor;
}

.gg-danger {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 20px;
  min-width: 20px;
  height: 20px;
  border: 2px solid;
  border-radius: 40px;
  color: #212121;
  background: currentColor;
  font-size:0;
}
.gg-danger::after, .gg-danger::before {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  border-radius: 3px;
  width: 2px;
  background: #fff;
  left: 7px;
}
.gg-danger::before {
  height: 2px;
  bottom: 2px;
}
.gg-danger::after {
  top: 2px;
  height: 8px;
}

.gg-check {
  box-sizing: border-box;
  position: relative;
  display: block;
  transform: scale(var(--ggs,1));
  width: 22px;
  min-width: 22px;
  height: 22px;
  border: 2px solid transparent;
  border-radius: 100px;
  font-size:0;
}
.gg-check::after {
  content: "";
  display: block;
  box-sizing: border-box;
  position: absolute;
  left: 3px;
  top: -1px;
  width: 6px;
  height: 10px;
  border-width: 0 2px 2px 0;
  border-style: solid;
  transform-origin: bottom left;
  transform: rotate(45deg)
}

.gg-blank {
  position: relative;
  transform: scale(var(--ggs,1));
  width: 22px;
  height: 22px;
  border: 2px solid transparent;
  font-size: 0;
}
.gg-blank:before,
.gg-blank:after{
  content: "";
  box-sizing: border-box;
  position: absolute;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-color: currentColor;
}
.gg-blank:before{
  top: 1px;
  left: 1px;
  border-width: 2px;
}
.gg-blank:after{
  top: 5px;
  left: 5px;
  border-width: 0 2px 2px 0;
}



/* ranking-stars
 * ========================================================================== */

.ranking-stars{
  --percent: calc(var(--rating) / 5 * 100%);
  --star-size: 1.6rem;
  --star-background-color: #ccc;
  --star-rating-color: #088;
  position: relative;
  display: inline-block;
  color: var(--star-background-color);
  font-size: 0;
}
.ranking-stars:before, .ranking-stars:after{
  content:'★★★★★';
  font-size: var(--star-size);
  font-style: normal;
}
.ranking-stars:after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: var(--star-rating-color);
  width: var(--percent);
}

/* bs modal
 * ========================================================================== */


.modal {
  --bs-modal-zindex: 2000;
  --bs-modal-width: 1100px;
  --bs-modal-padding: 1rem;
  --bs-modal-color: var(--color-white);
  --bs-modal-bg: var(--color-white);
  --bs-modal-border-color: var(--color-lightgray);
  --bs-modal-border-width: 1px;
  --bs-modal-border-radius: 0;
  --bs-modal-box-shadow: 0 0 15px rgba(0,0,0,0.15);
  --bs-modal-inner-border-radius: 0;
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--color-lightgray);
  --bs-modal-header-border-width: 1px;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: var(--color-white);
  --bs-modal-footer-border-color: var(--color-lightgray);
  --bs-modal-footer-border-width: 1px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: var(--bs-modal-width);
  max-width: 90%;
  margin: 5% auto 0;
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1900;
  --bs-backdrop-bg: var(--color-black);
  --bs-backdrop-opacity: 0.9;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}

.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}

/* VIDEO MODAL */

.video-btn-wrap {
  padding: 15px 20px 20px;
  border: 1px solid var(--color-darkgray);
  border-radius: 5px;
}

.video-btn-wrap + * {
  margin-top: 20px;
}

.btn-video {
  padding: 10px 30px;
  width: 200px;
  max-width: calc(100% - 40px);
  border-radius: 5px;
  font-weight: bold;
  line-height: 1;
  font-size: 1.4rem;
  border: none;
  cursor: pointer;
}

.btn-video:hover {
  opacity: 0.7;
}

* + .btn-video {
  margin-top: 10px;
}

.modal-video .modal-dialog {
  margin-top: 5%;
}

.modal-video .modal-header .btn-close {
  position: absolute;
  right: -34px;
  top: -34px;
  width: 44px;
  height: 44px;
  padding: 0;
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
}

.modal-video .modal-header .btn-close:hover {
  opacity: 0.6;
}

.modal-video .modal-header .btn-close svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.modal-video .modal-header .btn-close svg path {
  fill: var(--color-white);
}

.modal-video .modal-content,
.modal-video .modal-header {
  position: relative;
  border: none;
}

.modal-video .modal-content {
  background-color: transparent;
}

.modal-video .modal-header {
  padding: 0;
  z-index: 90;
}

.modal-video .modal-body {
  padding: 0;
}

.modal-video .video-box {
  position: relative;
  width: 100%;
  height: auto;
  padding-bottom: 57.25%;
}

.modal-video .video-box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 768px) {

  .modal .modal-dialog {
    margin: 50px auto 0;
  }

  .modal-video .modal-header .btn-close {
    position: relative;
    right: -5px;
    top: 0;
  }

}