/* https://snipp.ru/html-css/rating-css */

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i');

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,500,500i,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');
html, body {
	margin:0;
	padding:0px;
    font-size: 18px;
    font-family:'Roboto Condensed', 'Roboto', Verdana, Geneva, sans-serif;
	line-height:1.5;
}
.page {
	font-size:18px;
	padding:10px 10px;
	height:100%;
	max-width:330px;
	margin:auto;
	text-align:center;
}
.center {
	text-align:center;
}
.t {
	margin:10px auto;
	background:#ff0099;
	width:30%;
	height:2px;
}
input[type=submit], button{
    font-family:'Roboto Condensed', 'Roboto', Verdana, Geneva, sans-serif;
    font-size: 24px;
	margin-top:7px;
}
textarea {
    font-family:'Roboto Condensed', 'Roboto', Verdana, Geneva, sans-serif;
    font-size: 20px;
	padding:2% 3%;
	margin:10px auto;
	width:94%;
	height:100px;
}
span {
    font-size: 16px;
	color:#ff0099;
}
.smile1 {
	margin-top:30px;
	background: url(../i/smile1.png) top center no-repeat;
	background-size:contain;
	width:100%;
	height:230px;
}


.ya, .vk, .avito, .twogis, .in {
	margin:20px auto;
	text-align:center;
}

.ya a, .vk a, .avito a, .twogis a, .in a {
	display:inline-block;
	width:250px;
	height:50px;
	padding:4px 13px 4px 30px;
	border-radius:15px;
	text-decoration:none;
	border:#ede9e9 1px solid;	
    box-shadow: 1px 1px 3px #CCC;
}
.ya a:hover, .vk a:hover, .avito a:hover, .twogis a:hover, .in a:hover {
    box-shadow: 1px 1px 4px #999;
}
.ya a {
	background:#FFF url(../i/icon-ya.png) center no-repeat;
	background-size:180px;
}
.vk a {
	background:#FFF url(../i/icon-vk.png) center no-repeat;
	background-size:210px;
}
.avito a {
	background:#FFF url(../i/icon-avito.png) center no-repeat;
	background-size:120px;
}
.twogis a {
	background:#FFF url(../i/icon-2gis.png) center no-repeat;
	background-size:80px;
}
.in a {
	background:#FFF url(../i/icon-in.png) center no-repeat;
	background-size:150px;
}



.rating-area {
	overflow: hidden;
	width: 315px;
	margin: 5px auto 10px auto;
}
.rating-area:not(:checked) > input {
	display: none;
}
.rating-area:not(:checked) > label {
	float: right;
	width: 62px;
	padding: 0;
	cursor: pointer;
	font-size: 72px;
	line-height: 72px;
	color: lightgrey;
    text-shadow: 1px 1px 4px #666;
}
.rating-area:not(:checked) > label:before {
	content: '★';
}
.rating-area > input:checked ~ label {
	color: gold;
    text-shadow: 1px 1px 4px #666;
}
.rating-area:not(:checked) > label:hover,
.rating-area:not(:checked) > label:hover ~ label {
	color: gold;
    text-shadow: 1px 1px 4px #666;
}
.rating-area > input:checked + label:hover,
.rating-area > input:checked + label:hover ~ label,
.rating-area > input:checked ~ label:hover,
.rating-area > input:checked ~ label:hover ~ label,
.rating-area > label:hover ~ input:checked ~ label {
	color: gold;
    text-shadow: 1px 1px 4px #666;
}
.rate-area > label:active {
	position: relative;
}