@font-face {
  font-family: 'HermesSans-Reg';
  src: url("font/HermesSans-Reg.otf");
}
body, html{
  margin: 0;
  padding: 0;
  background: #DC190A;
  /*background-image:url("/textura.png");*/
  font-size: 24px; font-family: 'HermesSans-Reg';
  color: white;/*black;*/
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
#response{
	display:block;
	margin: auto;
	text-align:center;
}

form{
    display: block;
    max-width: 480px;
    min-width: 480px;
    width: 480px;
    margin: auto;
    text-align:center;
}
#size_cont{
	display: block;
	width: 450px;
	border: 0;
	padding: 0;
	margin:auto;
}
#size_cont div{
  height: 36px;
  width: 36px;
  display: inline-block;
  vertical-align:middle;
  margin-right:10px;
}
#color_cont{
  display: block;
  width: 450px;
  border: 0;
  padding: 0;
  margin:auto;
}
#color_cont div{
  height: 36px;
  width: 36px;
  display: inline-block;
  vertical-align:middle;
  /*margin-right:10px;*/
}

#shape_cont div{
  display:inline-block;
}
#text{
  display:block;
  width: 450px;
  height: 200px;
  border: 3px solid white;/*black;*/
  padding: 0;
  margin:auto;
  font-size: 24px; font-family: 'HermesSans-Reg'; color: black;
  text-align:center;
}
.s{

}
#size_cont div:last-child{
  margin-right:0px;
}
.c{ /* HIDE RADIO */

}
.sh{ /* HIDE RADIO */
height: 100px;
    width: auto;
  display: inline-block;
  vertical-align:middle;
}
label img{
width:100%;
height: auto;
vertical-align:middle;
}
label > input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}
label > input + img{ /* IMAGE STYLES */
  cursor: pointer;
}
label > input[name="size"]:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
  content:url("gfx/size_selector.svg");
}
label > input[name="shape"] + svg{ /* (RADIO CHECKED) IMAGE STYLES */
  fill: #DC190A;
  stroke: #FFFFFF;
  height: 100%;
  width: auto;
  margin: 0px 5px;
}

label > input[name="shape"]:checked + svg{ /* (RADIO CHECKED) IMAGE STYLES */
  fill: currentColor;
  stroke: currentColor;
}

label > input[name="size"]:checked + img:before{ /* (RADIO CHECKED) IMAGE STYLES */
  content:url("gfx/size_selector.svg");
}
.whenchecked{
 display:none;
}
label > input[name="color"]:checked + div svg.whenchecked{ /* (RADIO CHECKED) IMAGE STYLES */
  display:block;
}
label > input[name="color"]:checked + div svg.whenunchecked{ /* (RADIO CHECKED) IMAGE STYLES */
  display:none;
}

label > input[name="shape"]:checked + img:before{ /* (RADIO CHECKED) IMAGE STYLES */
  background-image:url("gfx/wheel_selector.svg");
  background-size: 100% 100%;
}
svg{
    max-width: 100%;
    max-height: 100%;
	fill: currentColor;
	stroke: currentColor;
	stroke-width:0px;
}
#send_button{
display: block;
background: transparent;
width: 450px;
height: 81px;
border: 0;
background-image: url("gfx/send_butt_unactive.svg");
background-size: 100% 100%;
padding: 0;
margin: auto;
margin-top: 24px;
cursor: pointer;
}
#send_button img{

}
span{
  margin-top:24px;
  margin-bottom: 12px;
  display:block;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 3px;
    background: white;/*black;*/
    outline: none;
	border:0;
	border-radius:0;
}
input[type=range]::-moz-range-track {
  -webkit-appearance: none;
    width: 100%;
    height: 3px;
    background: white;/*black;*/
    outline: none;
	border:0;
	border-radius:0;
}
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 36px;
    background: white;/*black;*/
    cursor: pointer;
}

.slider::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 36px;
    background: white;/*black;*/
    cursor: pointer;
	border:0;
	border-radius:0;
}
a, a:visited, a:active{
  color:white;
}