html, body{position:relative; width:100%; height:100%; padding:0; margin:0; font-size:16px; font-family: "Roboto", sans-serif; color:var(--darkgreytext);}
:root {
	--star-size: 1.455em;
	--star-background: #fc0;
	--white: #fff;
	--lightgrey: #ececeb;
	--middlegrey: #ccc;
	--darkgrey: #757575;
	--darkgreytext: #4D4D4D;
	--black: #000;
	--b-radius: .3rem;
}

/* GLOBAL */
a{color:var(--darkgreytext); text-decoration:none; transition: all .2s linear;}
	a:hover{color:var(--	);}

.google-review-widget{position:relative; display:inline-block;}

svg.google-favicon{position:relative; height:1.2em; width:auto;}

.stars { --percent: calc(var(--rating) / 5 * 100%); display: inline-block; font-size: var(--star-size); font-family: Times;line-height: 1; &::before {content: '★★★★★'; letter-spacing:0.1875em; background: linear-gradient(90deg, var(--star-background) var(--percent), var(--lightgrey) var(--percent)); -webkit-background-clip: text;-webkit-text-fill-color: transparent;}}

.reviews{position:relative; width:100%;}
.review {position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); border:1px solid var(--lightgrey); border-radius:var(--b-radius); padding:1rem; margin-bottom:1rem; opacity: 0; transition: opacity 1s ease-in-out; margin:0 auto; display:flex;flex-direction:column; justify-content:space-between; width:100%; min-height:150px; background:var(--white);}
	.review.active {opacity: 1;}
	@keyframes fadeInOut {
			0%, 100% {opacity:0;}
			10%, 90% {opacity:1;}
	}
.review .stars{font-size:1.25em; line-height: 1;}
.review .review-date{font-size:.9em; color:var(--middlegrey); margin-top:.25em;}
.review p {font-size:.9em; margin:.5em 0; line-height:1.25rem; color:var(--darkgreytext);}
.review .author-link{font-weight:bold; font-size:.9em;}
.review .author-link a{color:var(--darkgreytext); text-decoration:none;}
.rated-x-of-5{position:relative; width:100%;}
.rated-x-of-5 svg{transform: translateY(20%);}

/* CUSTOM SIZE */
#global-note-large{text-align:center; display:block;}
#global-note-large > div{gap:.5em; display:flex; justify-content:center; align-items:center; position:relative; margin-bottom:.5em;}
	#global-note-large a{font-size:.9em;}

#global-compact{font-size:.7em; gap:.3em; display:flex; align-items: center; justify-content: center;color:#ececeb}

#review-and-global{height:100%; width:100%;}
	#review-and-global .review{max-width:500px; }
	#review-and-global svg.google-favicon{padding:0 .3em;}
	.review{width:80%;}
	.rated-x-of-5{position:absolute; top:calc(50% + 75px + 2.5em); left:50%; transform: translateX(-50%); text-align:center; width:80%;}