* {margin: 0;padding: 0;}

body,html {margin-left: 0px; margin-right:0px; margin-top:0px; margin-bottom:0px; 
	padding-left: 0px; padding-right:0px; padding-top:0px; padding-bottom:0px; 
	font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.1em; font-style: normal; font-weight: normal;color: #666666; line-height: 1.4;
height: 100%;}


.cycle-slideshow { width: 100%; position: relative; z-index: 0;  }
.cycle-slideshow img { width: 100%; height: auto; }
.cycle-pager { text-align: left; width: 100%; z-index: 500; position: absolute; bottom: 0px; left: 10px; overflow: hidden;}
.cycle-pager span {  font-family: arial; font-size: 50px; width: 16px; height: 16px;  display: inline-block; color: #fff; cursor: pointer; }
.cycle-pager span.cycle-pager-active { color: #CCE6FF;}
.cycle-pager > * { cursor: pointer;}


#headermenu {display: table; margin: 0 0 0 auto;}
#headermenu a {
	width: auto;
	font-size: 1.1em;
	font-weight: bold;
	color: #333333;
	text-decoration: none;
	text-align: center;
	display: table-cell;
	position: relative;
	padding-left: 20px; padding-right: 20px;
   transition: color .5s ease-in-out;
   -moz-transition: color .5s ease-in-out;
   -webkit-transition: color .5s ease-in-out;
}
#headermenu a:hover {
	color: #333333;
	text-shadow: none;
}
#headermenu a.current {
	color: #333333;
}
.sliding-middle-out {
	display: inline-block;
	position: relative;
	padding-bottom: 3px;
}
.sliding-middle-out:after {
	content: '';
	display: block;
	margin: auto;
	height: 2px;
	width: 0px;
	background: transparent;
	transition: width .5s ease, background-color .5s ease;
}
.sliding-middle-out:hover:after {
	width: 100%;
	background: #333333;
}

#headermenumini {margin: 0 auto; width: 100%; padding-left: 10px; padding-right: 10px;display: table; box-sizing: border-box;}
#headermenumini a {
	color: #333333;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	display: table;
	position: relative;
	padding: 6px;
width: 100%; box-sizing: border-box;
border-top: #333333 1px solid;
   transition: background .3s ease-in-out;
   -moz-transition: background .3s ease-in-out;
   -webkit-transition: background .3s ease-in-out;
}
#headermenumini a:hover {
	color: #990000;
}
#headermenumini li {
  list-style: none;
  line-height: 1em;
  margin-left: 30px;
}

.fadeout {
   opacity: 1;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;

   }
   .fadeout:hover {
      opacity: 0.7;
      }

.fadein {
   opacity: 0;
   transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;

   }
   .fadein:hover {
      opacity: 1.0;
      }


.flickout {
   opacity: 1;
   transition: opacity .2s ease-in-out;
   -moz-transition: opacity .2s ease-in-out;
   -webkit-transition: opacity .2s ease-in-out;

   }
   .flickout:hover {
      opacity: 0.5;
      }

#category1 {padding: 10px; width: 235px; margin-left: auto; margin-right: auto; box-sizing: border-box; font-size: 0.8em; color: #ffffff;
		background: #660000;
		background:
		linear-gradient(135deg, transparent 10px, #ffffff 0) top left,
		linear-gradient(225deg, transparent 10px, #ffffff 0) top right,
		linear-gradient(315deg, transparent 10px, #ffffff 0) bottom right,
		linear-gradient(45deg,  transparent 10px, #ffffff 0) bottom left;
		background-size: 51% 51%; background-repeat: no-repeat;
		background-image:
		radial-gradient(circle at 0 0, rgba(204,230,255,0) 0px, #660000 0px),
		radial-gradient(circle at 100% 0, rgba(204,230,255,0) 0px, #660000 0px),
		radial-gradient(circle at 100% 100%, rgba(204,230,255,0) 19px, #660000 20px),
		radial-gradient(circle at 0 100%, rgba(204,230,255,0) 19px, #660000 20px);
}

img {  border-style: none; display: inline-block;}
input { height: 26px; font-family: "Verdana","Meiryo","ＭＳ Pゴシック";}
select { height: 26px; font-family: "Verdana","Meiryo","ＭＳ Pゴシック";}
textarea { font-family: "Verdana","Meiryo","ＭＳ Pゴシック";}
ul { margin-left: 10px; padding-left: 10px; }
ol { margin-left: 20px; padding-left: 20px; }

a:link {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #990000; text-decoration: none;}
a:visited {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #990000; text-decoration: none}
a:hover {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #990000; text-decoration: none; text-shadow: 0px 0px 5px #990000;}
a:active {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #990000; text-decoration: none;}

a.footer:link {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #333333; text-decoration: none}
a.footer:visited {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #333333; text-decoration: none}
a.footer:hover {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #990000; text-decoration: underline}
a.footer:active {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #333333; text-decoration: none}

a.menu:link {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.1em; font-style: normal; font-weight: normal; color: #660000; text-decoration: none}
a.menu:visited {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.1em; font-style: normal; font-weight: normal; color: #660000; text-decoration: none}
a.menu:hover {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.1em; font-style: normal; font-weight: normal; color: #660000; text-decoration: none; text-shadow: 0px 0px 5px #660000;}
a.menu:active {  font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.1em; font-style: normal; font-weight: normal; color: #660000; text-decoration: none}


table.GREY { border-style: solid; border-width: 1px; border-color: #999999}
td.GREY { border-style: solid; border-width: 1px; border-color: #999999}

table.GREYcolour { border-style: solid; border-width: 1px; border-color: #cccccc}
td.GREYcolour { border-style: solid; border-width: 1px; border-color: #cccccc; padding: 3px;}

table.white { border-style: solid; border-width: 1px; border-color: #ffffff}
td.white { border-style: solid; border-width: 1px; border-color: #ffffff}

table.sizechart {display: inline-block; vertical-align: top; border-collapse: collapse; margin-bottom: 20px;}

a.BLUEring, a.BLUEring:link, a.BLUEring:visited, a.BLUEring:active{ display:block;border:1px solid #e8e8e8;}
a.BLUEring:hover { display:block; border:1px solid #990000;}

hr {color: #ccc; background-color: #ccc; border: 0px; height: 1px; width: 100%;}

input.big {font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 20px; width: 200px; height: 50px; background:#660000; border-radius: 10px; border: 0; height: 50px; color: white; 
   opacity: 1;
   transition: opacity .2s ease-in-out;
   -moz-transition: opacity .2s ease-in-out;
   -webkit-transition: opacity .2s ease-in-out;

   }
   input.big:hover {
      opacity: 0.5;
      }

h1 { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.8em; font-style: normal; font-weight: normal; color: #ffffff; margin-bottom: 30px; text-align: center; padding: 8px;
	background: -moz-linear-gradient(left, #b27f7f, #ffffff);
 	background: -webkit-linear-gradient(left, #b27f7f, #ffffff);
 	background: -ms-linear-gradient(left, #b27f7f, #ffffff);
 	background: -o-linear-gradient(left, #b27f7f, #ffffff);}
h2 { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.8em; font-style: normal; font-weight: normal; color: #990000; text-decoration: none; border-bottom: #990000 3px solid; margin-bottom: 20px;}
h3 { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.4em; font-style: normal; font-weight: normal; color: #000000; text-decoration: none}
b,strong { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1.1em; font-style: normal; font-weight: bold; color: #000000; text-decoration: none}
p,td,li { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #666666; text-decoration: none; line-height: 1.4;}
p.footer { font-family: "Verdana","Meiryo","ＭＳ Pゴシック"; font-size: 1em; font-style: normal; font-weight: normal; color: #333333; text-decoration: none}


/* LAYOUT DEFINITIONS */
#bikemephotoframe {width: 504px;}
#bikemephotoleft {display: table-cell; vertical-align: top; padding-bottom: 20px;}
#bikemephotoright {display: table-cell; vertical-align: top; padding-left: 20px;}

#center {width: 80%; margin: 0 auto; display: table;}

header {width: 100%; height: 120px; background: url(../images/background-header.jpg); box-shadow: 0 2px 5px rgba(0,0,0,0.2); display: table; position: fixed; z-index: 999;
	-webkit-transition: height 0.3s;
    	-moz-transition: height 0.3s;
    	-ms-transition: height 0.3s;
    	-o-transition: height 0.3s;
    	transition: height 0.3s;}
	#header1 {display: table-cell; box-sizing: border-box; height: 120px; vertical-align: middle; text-align: center; width: 285px; color: #333333; font-size: 0.75em;}
	#header2 {display: table-cell; box-sizing: border-box; vertical-align: middle; text-align: right;}
header #logo {display: block; height: 74px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}
header.smaller { height: 70px;}
header.smaller #logo { height: 60px;}
header.smaller #header1 { height: 70px;}
header.smaller span { display: none;}
.menutext {font-weight: normal;}
#bodywrapper {width: 100%; padding: 3px; box-sizing: border-box; margin-top: 170px; margin-bottom: 50px;
		background: #666666;
		background:
		linear-gradient(135deg, transparent 25px, #666666 0) top left,
		linear-gradient(225deg, transparent 25px, #666666 0) top right,
		linear-gradient(315deg, transparent 25px, #666666 0) bottom right,
		linear-gradient(45deg,  transparent 25px, #666666 0) bottom left;
		background-size: 51% 51%; background-repeat: no-repeat;
		background-image:
		radial-gradient(circle at 0 0, rgba(102,102,102,0) 49px, #666666 50px),
		radial-gradient(circle at 100% 0, rgba(102,102,102,0) 49px, #666666 50px),
		radial-gradient(circle at 100% 100%, rgba(102,102,102,0) 49px, #666666 50px),
		radial-gradient(circle at 0 100%, rgba(102,102,102,0) 49px, #666666 50px);
}
	 #bodywrapperinner { padding: 50px; display: table; width: 100%; box-sizing: border-box;
		background: #ffffff;
		background:
		linear-gradient(135deg, transparent 25px, #ffffff 0) top left,
		linear-gradient(225deg, transparent 25px, #ffffff 0) top right,
		linear-gradient(315deg, transparent 25px, #ffffff 0) bottom right,
		linear-gradient(45deg,  transparent 25px, #ffffff 0) bottom left;
		background-size: 51% 51%; background-repeat: no-repeat;
		background-image:
		radial-gradient(circle at 0 0, rgba(255,255,255,0) 48px, #ffffff 49px),
		radial-gradient(circle at 100% 0, rgba(255,255,255,0) 48px, #ffffff 49px),
		radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 48px, #ffffff 49px),
		radial-gradient(circle at 0 100%, rgba(255,255,255,0) 48px, #ffffff 49px);
}
#wrapper {display: table;}


#marginleft {display: table-cell; width: 250px; vertical-align: top; box-sizing: border-box;}
#marginleftinner { padding: 25px; width: 250px; box-sizing: border-box;
	background: -moz-linear-gradient(top, #e0b2b2, #ffffff);
 	background: -webkit-linear-gradient(top, #e0b2b2, #ffffff);
 	background: -ms-linear-gradient(top, #e0b2b2, #ffffff);
 	background: -o-linear-gradient(top, #e0b2b2, #ffffff);
}
#marginright {display: table-cell; width: 250px; vertical-align: top; box-sizing: border-box;}
#marginrightinner { padding: 25px; width: 250px; box-sizing: border-box; text-align: center; font-size: 90%;
	background: -moz-linear-gradient(top, #e0b2b2, #ffffff);
 	background: -webkit-linear-gradient(top, #e0b2b2, #ffffff);
 	background: -ms-linear-gradient(top, #e0b2b2, #ffffff);
 	background: -o-linear-gradient(top, #e0b2b2, #ffffff);
}

#marginpapertop {display: block; width: 250px; height: 30px; background: url(../images/margintop.png);}
#marginpaperwrapper {width: 250px; padding: 0 5px; box-sizing: border-box; background: url(../images/background-margin.jpg);}
#marginpaperwrapperinner { padding: 4px; border-left: #333333 2px solid; border-right: #333333 2px solid; display: table; width: 100%; box-sizing: border-box; font-size: 0.8em; text-align: center;}
#marginpaperbottom {display: block; width: 250px; height: 30px; background: url(../images/marginbottom.png);}

#bodygap {display: table-cell; width: 50px; vertical-align: top; }
#bodygap2 {display: table-cell; width: 50px; vertical-align: top; }
#body {display: table-cell; vertical-align: top; width: 100%;}
#marginmobile {display: none;}

#footer {width: 100%; background: url(../images/background-footer.jpg); clear:both; font-size: 0.9em; color: #333333; padding: 30px 0px; box-sizing: border-box;}
#footerwrapper {display: table; width: 100%;}
#footercolumn {  border: blue  0px solid; padding: 0 30px 20px 0; display: inline-block; vertical-align: top;}
#footercolumn2 { border: green 0px solid; width: 410px; padding: 0 30px 20px 0; display: inline-block; vertical-align: top;}
img.footerstretch {float:left; border: white 5px solid; margin-right: 20px; width: 200px;}
#snsicons {position: absolute; z-index: 999; top: 15px; right: 0;}
#mobilemargin {display: none;  width: 100%;}
#headermenumini {display: none;}
#mobilecart {display: none;}
textarea { width: 400px; }
input { width: 400px; }

#mobilebuttons {display: none; width: 100%; position: fixed; bottom: 0;
	background: -moz-linear-gradient(top, #ffffff, #cccccc);
 	background: -webkit-linear-gradient(top, #ffffff, #cccccc);
 	background: -ms-linear-gradient(top, #ffffff, #cccccc);
 	background: -o-linear-gradient(top, #ffffff, #cccccc);}
#mobilebuttons a {
	padding: 5px 0px;
	width: 25%;
	font-size: 0.8em;
	font-weight: normal;
	border: #cccccc 1px solid;
	color: #333333;
	text-decoration: none;
	text-align: center;
	display: table-cell;
	position: relative;
	text-shadow: none;
}
#mobilecats {display: none;}


/* TINYMCE IMAGE & VIDEO RESIZING*/
.youtube {width: 100%; height: auto; border: #cccccc 0px solid; box-sizing: border-box; }
@media screen and (max-width:1300px) { img.image1000 {width: 100%; height: auto;} object.image1000 {width: 100%; height: 100%;}}
@media screen and (max-width:1200px) { img.image900 {width: 100%; height: auto;} object.image900 {width: 100%; height: 100%;}}
@media screen and (max-width:1100px) { img.image800 {width: 100%; height: auto;} object.image800 {width: 100%; height: 100%;} }
@media screen and (max-width:1000px) { img.image700 {width: 100%; height: auto;} object.image700 {width: 100%; height: 100%;}}
@media screen and (max-width:900px) { img.image600 {width: 100%; height: auto;} object.image600 {width: 100%; height: 100%;} .youtube {width: 80vw; height: 45vw; }}

@media screen and (max-width:500px) { img.image500 {width: 100%; height: auto;} object.image500 {width: 100%; height: 100%;}}
@media screen and (max-width:400px) { img.image400 {width: 100%; height: auto;} object.image400 {width: 100%; height: 100%;}}


/* MEDIUM VERSION REFINEMENTS */
@media screen and (max-width:1800px) { 
#center{width: 90%;}
}
@media screen and (max-width:1500px) { 
#headermenu a { padding-left: 15px; padding-right: 15px;}
#bodygap {width: 30px;}
img.bodygap {width: 30px;}
}
@media screen and (max-width:1400px) { 
#center{width: 94%;}
#headermenu a { font-size: 1em;}
}
@media screen and (max-width:1300px) { 
#headermenu a { padding-left: 10px; padding-right: 10px; box-sizing: border-box;}
#bodywrapper {
		background-image:
		radial-gradient(circle at 0 0, rgba(102,102,102,0) 39px, #666666 40px),
		radial-gradient(circle at 100% 0, rgba(102,102,102,0) 39px, #666666 40px),
		radial-gradient(circle at 100% 100%, rgba(102,102,102,0) 39px, #666666 40px),
		radial-gradient(circle at 0 100%, rgba(102,102,102,0) 39px, #666666 40px);
}
	 #bodywrapperinner { padding: 30px; 
		background-image:
		radial-gradient(circle at 0 0, rgba(255,255,255,0) 38px, #ffffff 39px),
		radial-gradient(circle at 100% 0, rgba(255,255,255,0) 38px, #ffffff 39px),
		radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 38px, #ffffff 39px),
		radial-gradient(circle at 0 100%, rgba(255,255,255,0) 38px, #ffffff 39px);
}
}
@media screen and (max-width:1200px) { 
header {background: url(../images/background-footer.jpg);}
#header1 {padding-left: 20px;}
#header2 {padding-right: 20px;}
#headermenu {display:none;}
#headermenumini {display: block; box-sizing: border-box;}
#bodygap2 {display: none;}
#marginleftads {display: none;}
#marginright {display: none;}
#marginmobile {display: block;}
}

@media screen and (max-width:1000px) { 
#bodywrapper {
		background-image:
		radial-gradient(circle at 0 0, rgba(102,102,102,0) 29px, #666666 30px),
		radial-gradient(circle at 100% 0, rgba(102,102,102,0) 29px, #666666 30px),
		radial-gradient(circle at 100% 100%, rgba(102,102,102,0) 29px, #666666 30px),
		radial-gradient(circle at 0 100%, rgba(102,102,102,0) 29px, #666666 30px);
}
	 #bodywrapperinner { padding: 30px; 
		background-image:
		radial-gradient(circle at 0 0, rgba(255,255,255,0) 28px, #ffffff 29px),
		radial-gradient(circle at 100% 0, rgba(255,255,255,0) 28px, #ffffff 29px),
		radial-gradient(circle at 100% 100%, rgba(255,255,255,0) 28px, #ffffff 29px),
		radial-gradient(circle at 0 100%, rgba(255,255,255,0) 28px, #ffffff 29px);
}
#bodygap {width: 30px;}
img.bodygap {width: 30px;}
}


/* SMALL VERSION REFINEMENTS */
@media screen and (max-width:900px) { 
#bodygap {width: 20px;}
img.bodygap {width: 20px;}
#headermenu a { padding-left: 10px; padding-right: 10px; box-sizing: border-box;}
#snsicons {display: none;}
}

@media screen and (max-width:800px) { 
#mobilecart {display: block;position: fixed; top: 10px; left: 0; z-index: 99;}
#marginleft {display: block; width: 100%;}
#bodygap {display: none;}
#body {display: table; box-sizing: border-box;}
#mobilemargin {display: table; box-sizing: border-box;}
#marginleftinner {margin: 0 auto;}
#headermenu {display:none;}
#headermenumini {display: block; box-sizing: border-box;}
}

@media screen and (max-width:700px) { 
#header1 {padding-left: 0px;}
#header2 {padding-right: 0px;}
#bikemephotoleft {display: table; width: 100%;}
#bikemephotoright {display: table; padding-left: 0; width: 100%;}
.menutext {display: none;}
}


/* VERY SMALL VERSION REFINEMENTS */
@media screen and (max-width:600px) { 
#MinimenuDiv { position: absolute; margin-top: 25px; width: 90%; left: 5%; box-sizing: border-box;}
#headermenumini a {text-align: center; color: white; background: #660000;border-top: #ffffff 1px solid; box-sizing: border-box;}
textarea { width: 300px; }
input { width: 300px; }
img.blogstretch {width: 100%; height: auto;}
#footercolumn2 { width: 100%; box-sizing: border-box;}
}

@media screen and (max-width:480px) { 
#bikemephotoframe {width: 100%; display: block;}
#bikemephotoframereal {width: 100%;}
#bikemephotoframedisc {width: 100%;}
#bikemephotoframesold {width: 100%;}
#bikemephotospacer{width: 100%;}
#bikemephotomain {width: 100%;}
#bikemephotodisc {width: 100%;}
#bikemephotosold {width: 100%;}
#header1 {width: 255px;font-size: 0.65em;}
header #logo {margin: 0 auto; position: relative; z-index: 5; height: 64px;}
header.smaller #header2 {   top: -5px;}
h1 {font-size: 2em;}
#bodywrapperinner { padding-left: 15px; padding-right: 15px; }
#footercolumn {display: block;}
img.footerstretch {float:none; margin-right: 0px; margin-bottom: 10px; width: 100%;}
.cycle-pager { display:none;}
h1 { font-size: 1.4em;}
h2 { font-size: 1.4em; }
h3 { font-size: 1.2em; }
b,strong { font-size: 1em;}
p,td,li { font-size: 0.9em; }
textarea { width: 100%; }
input { width: 100%; }
#mobilebuttons {display: table;}
#buybutton {display: none;}
#leftcats {display: none;}
#mobilecats {display: block;}
}


/* PRINT VERSION REFINEMENTS */
@media print { 
header { display:none; width: 0; height: 0; }
#header1 { display:none; }
#header2 { display:none; }
#marginleft { display:none; }
#center { width: 100%; }
#bodywrapper {width: 100%; margin:0;}
#bodywrapperinner { padding: 0px; display: table; width: 100%; }
#wrapper {display: table;}
#bodygap {display: none; width: 0px;}
#body {display: table; width: 100%;}
}


.star-rating {
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 150px;
  height: 30px;
  overflow: hidden;
  position: relative;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
.star-rating input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}
.star-rating input:hover + i,
.star-rating input:checked + i {
  opacity: 1;
}
.star-rating i ~ i {
  width: 40%;
}
.star-rating i ~ i ~ i {
  width: 60%;
}
.star-rating i ~ i ~ i ~ i {
  width: 80%;
}
.star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}
.choice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 20px;
  display: block;
}
*,
::after,
::before {}
body {}
body::before {}