html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body { background-color: #FFFFFF; padding: 0; margin: 0; }
/* FONTELLO */
@font-face {
font-family: 'fontello';
src: url('../fonts/fontello.eot?83526430');
src: url('../fonts/fontello.eot?83526430#iefix') format('embedded-opentype'),
url('../fonts/fontello.woff?83526430') format('woff'),
url('../fonts/fontello.ttf?83526430') format('truetype'),
url('../fonts/fontello.svg?83526430#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
*[class^="fontello-icon-"]:before, [class*=" fontello-icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
color: #727272;
}
.fontello-icon-cancel:before { content: '\e809'; } /* '' */
.fontello-icon-cancel-1:before { content: '\e80a'; } /* '' */
.fontello-icon-thumbs-up:before { content: '\e800'; margin: 0 5px 0 5px; } /* '' */
.fontello-icon-thumbs-down:before { content: '\e803'; margin: 0 5px 0 5px; } /* '' */
.fontello-icon-thumbs-up-alt:before { content: '\f164'; padding: 0 4px 0 5px; cursor: pointer; } /* '' */
.fontello-icon-thumbs-down-alt:before { content: '\f165'; padding: 0 4px 0 5px; cursor: pointer; } /* '' */
.fontello-icon-right-open-mini:before { content: '\e801'; padding: 0 5px; } /* '' */
.fontello-icon-down-open-mini:before { content: '\e802'; } /* '' */
.fontello-icon-users:before { content: '\e804'; padding: 0 10px 0 0 ; } /* '' */
.fontello-icon-export:before { content: '\e805'; padding: 0 15px 0 0; font-size: 20px; } /* '' */
.fontello-icon-export-1:before { float: left; content: '\e806'; margin: -1px 0 0 0; padding: 0 13px 0 2px; font-size: 20px; } /* '' */
.fontello-icon-warning-empty:before { float: left; content: '\e807'; margin: 0 0 0 0; padding: 0 15px 0 0; font-size: 20px; } /* '' */
.fontello-icon-reply:before { content: '\f112'; padding: 0 0 0 7px; display: inline-block;
-moz-transform: rotate(180deg); /* Для Firefox */ -ms-transform: rotate(180deg); /* Для IE */
-webkit-transform: rotate(180deg); /* Для Safari, Chrome, iOS */ -o-transform: rotate(180deg); /* Для Opera */ transform: rotate(180deg);
} /* '' */
.fontello-icon-dot-3:before { content: '\e808'; display: inline-block;
-moz-transform: rotate(90deg); /* Для Firefox */ -ms-transform: rotate(90deg); /* Для IE */
-webkit-transform: rotate(90deg); /* Для Safari, Chrome, iOS */ -o-transform: rotate(90deg); /* Для Opera */ transform: rotate(90deg);
} /* '' */
.fontello-icon-comment:before { content: '\e80b'; padding: 0 4px 0 5px; } /* '' */
.fontello-icon-icon-cog:before { content: '\e80c'; padding: 0 2px 0 5px; font-size: 20px; } /* '' */
@font-face {
font-family: 'fontello2';
src: url('../fonts/fontello2.eot?43170140');
src: url('../fonts/fontello2.eot?43170140#iefix') format('embedded-opentype'),
url('../fonts/fontello2.woff2?43170140') format('woff2'),
url('../fonts/fontello2.woff?43170140') format('woff'),
url('../fonts/fontello2.ttf?43170140') format('truetype'),
url('../fonts/fontello2.svg?43170140#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="fontello2-icon-"]:before, [class*=" fontello2-icon-"]:before {
font-family: "fontello2";
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
/* opacity: .8; */
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
text-transform: none;
/* fix buttons height, for twitter bootstrap */
line-height: 1em;
/* Animation center compensation - margins should be symmetric */
/* remove if not needed */
margin-left: .2em;
/* you can be more comfortable with increased icons size */
/* font-size: 120%; */
/* Font smoothing. That was taken from TWBS */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* Uncomment for 3D effect */
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.fontello2-icon-twitter:before { content: '\f099'; } /* '' */
.fontello2-icon-facebook:before { content: '\f09a'; } /* '' */
.fontello2-icon-vkontakte:before { content: '\f189'; } /* '' */
.fontello2-icon-google:before { content: '\f1a0'; } /* '' */
.fontello2-icon-at:before { content: '\f1fa'; } /* '' */
.fontello2-icon-whatsapp:before { content: '\f232'; } /* '' */
.fontello2-icon-odnoklassniki:before { content: '\f263'; } /* '' */
.fontello2-icon-telegram:before { content: '\f2c6'; } /* '' */
.fontello2-icon-yandex:before { content: '\f305'; } /* '' */
.fontello2-icon-thumbs-up:before { content: '\e800'; } /* '' */
.fontello2-icon-thumbs-down:before { content: '\e801'; } /* '' */
.fontello2-icon-thumbs-up-alt:before { content: '\f164'; } /* '' */
.fontello2-icon-thumbs-down-alt:before { content: '\f165'; } /* '' */
/* FONTELLO */
@font-face {
font-family: "Roboto";
src: url("../fonts/Roboto-Regular.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
.for_reg_link { width: 100%; color: #000000; padding: 20px 0px; box-sizing: border-box; font: 14px/18px 'Roboto', Arial; font-weight: 400; margin: 0 0 20px 0;}
.for_reg_link a { text-decoration: underline; cursor: pointer; color: #000000; }
.comments_container { width: 100%; box-sizing: border-box; padding: 100px 150px 0 250px; font: 12px/14px 'Roboto', Arial; font-weight: 400; color: #000000; }
.comments { background-color: #FFFFFF; padding: 20px; box-sizing: border-box; width: 100%; min-width: 700px; }
.comment_textarea { width: 100%; margin: 20px 0 45px 0; }
.comment_textarea.comment__auth { width: calc(100% - 40px); padding-left: 40px; }
.comment_textarea textarea { width: 100%; padding: 18px 15px; box-sizing: border-box; font: 15px/16px 'Roboto', Arial; font-weight: 400; color: #000000; border: 1px solid #C4C4C4; resize: none; }
.comment_textarea textarea:focus { outline: none; }
.comment_textarea textarea::-webkit-input-placeholder { font-size: 12px; line-height: 14px; }
.comment_btn { font: 12px/14px 'Roboto', Arial; background: #727272; text-align: center; color: #FFFFFF; padding: 5px 30px; float: right; border: 0px none; margin: 10px 0px 30px 0px; }
.comments_header { width: 100%; font: 16px/19px 'Roboto', Arial; font-weight: 700; color: #000000; padding: 0 0 6px 0; }
.comments_header span { font: 14px/14px 'Roboto', Arial; font-weight: 400; color: #727272; padding-left: 5px; }
.comments_header span.readers_online { float: right; font: 12px/14px 'Roboto', Arial; font-weight: 400; color: #000000; }
.comments_header i { font-style: normal; }
.comments_sorting { width: 100%; padding-bottom: 10px; white-space: nowrap; }
.comments_sorting select
{
-webkit-appearance: button; -moz-appearance: button; -webkit-user-select: none; -moz-user-select: none; -webkit-padding-end: 0px; -moz-padding-end: 0; -webkit-padding-start: 2px; -moz-padding-start: 2px;
background-color: #FFFFFF; border: none; font: 12px/14px 'Roboto', Arial; font-weight: 700; color: #000000; margin: 0;
overflow: hidden; padding-top: 2px; padding-bottom: 2px; text-overflow: ellipsis; white-space: nowrap;
}
.comments_sorting select:focus { outline: none; }
.comments_writing_now { position: relative; background-color: #FFFFFF; z-index: 50; left: 50%; margin: -45px 0 0 -95px; padding: 12px 40px; width: 190px; height: 38px; border: 1px solid #DFDFDF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); box-sizing: border-box; font: 12px/14px 'Roboto', Arial; font-weight: 400; text-align: center; color: #000000; }
.comments_writing_now span { color: #727272; }
.comment { width: 100%; box-sizing: border-box; padding: 14px 0 0 42px; font: 14px/18px 'Roboto', Arial; border-top: 1px solid #DFDFDF; }
.comment .comment { border-top: 0px none; }
/* .comment + .comment { border-top: 1px solid #DFDFDF; } */
.comment_author { width: 100%; font: 12px/15px 'Roboto', Arial; position: relative; box-sizing: border-box; padding-right: 30px; }
.comment_author .user_pic { width: 30px; height: 30px; margin-left: -40px; float: left; cursor: pointer; -webkit-filter: grayscale(100%);filter: grayscale(100%);}
.comment_author .user_name { color: #000000; font-weight: 700; display: contents; }
.comment_author .replay_to { color: #727272; }
.comment_author .comment_time { width: 60%; color: #afafaf; }
.share_comment { float: right; width: 29px; height: 29px; text-align: center; line-height: 29px; padding: 0 2px 0 0; margin: -0 -30px 0 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.share_comment:hover { background-color: #DFDFDF; border-radius: 50%; cursor: pointer; }
.share_comment_box
{ display: none; position: absolute; top: 20px; right: 35px; z-index: 50; padding: 12px 15px; font: 12px/34px 'Roboto', Arial; text-align: left;
width: 190px; background-color: #FFFFFF; border: 1px solid #DFDFDF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); box-sizing: border-box;
}
.share_comment_box a { color: #000; }
.share_comment_box a:hover { text-decoration: underline; cursor: pointer; }
.comment_showmore { width: 100%; font: 14px/16px 'Roboto', Arial; color: #727272; padding: 12px 0; }
.comment_showmore a:hover { text-decoration: underline; cursor: pointer; }
.comment_text
{
width: 100%; box-sizing: border-box; margin: 10px 0; font: 14px/18px 'Roboto', Arial; font-weight: 400; color: #000000; padding-right: 30px;
text-overflow: ellipsis; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.comment_text.showmore {
display: block; overflow: visible;
}
.reply_likes { position: relative; width: 100%; font: 14px/16px 'Roboto', Arial; font-weight: 400; color: #afafaf; padding: 0 0 12px 0; }
.reply_likes a { color: #afafaf; text-decoration: none; }
.reply_likes a:hover { text-decoration: underline; cursor: pointer; }
.reply_likes span { margin: 0 5px 0 5px; padding: 5px 5px 4px 5px; }
.reply_likes span:hover { cursor: pointer; background-color: #DFDFDF; }
.reply { padding: 10px 0 0 36px; }
.reply .comment_author .user_pic { width: 25px; height: 25px; margin-left: -35px; float: left; }
.who_like_box { top: 20px; left: 69px; }
.who_unlike_box { top: 20px; left: 130px; }
.who_like_box, .who_unlike_box
{ display: none;
position: absolute; z-index: 50; padding: 0 10px 10px 10px; font: 12px/34px 'Roboto', Arial; text-align: left;
width: 220px; height: 200px; background-color: #FFFFFF; border: 1px solid #DFDFDF; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25); box-sizing: border-box; overflow-y: scroll;
}
.who_like_box::-webkit-scrollbar { width: 5px; height: 25px; }
.who_like_box::-webkit-scrollbar-button { background-color: #FFFFFF; }
.who_like_box::-webkit-scrollbar-track { background-color: #FFFFFF; }
.who_like_box::-webkit-scrollbar-track-piece { background-color: #FFFFFF; }
.who_like_box::-webkit-scrollbar-thumb { background-color: #DFDFDF; }
.who_like_box::-webkit-scrollbar-corner { background-color: #FFFFFF; }
.who_like_box::-webkit-resizer { background-color: #FFFFFF; }
.who_unlike_box::-webkit-scrollbar { width: 5px; height: 25px; }
.who_unlike_box::-webkit-scrollbar-button { background-color: #FFFFFF; }
.who_unlike_box::-webkit-scrollbar-track { background-color: #FFFFFF; }
.who_unlike_box::-webkit-scrollbar-track-piece { background-color: #FFFFFF; }
.who_unlike_box::-webkit-scrollbar-thumb { background-color: #DFDFDF; }
.who_unlike_box::-webkit-scrollbar-corner { background-color: #FFFFFF; }
.who_unlike_box::-webkit-resizer { background-color: #FFFFFF; }
.who_like_box header, .who_unlike_box header
{ width: 100%; padding: 12px 10px 10px 10px; margin: 0 0 14px 0; box-sizing: border-box; border-bottom: 1px solid #DFDFDF; font: 14px/16px 'Roboto', Arial; font-weight: 700; color: #000000; }
.who_like_box .comment_author, .who_unlike_box .comment_author
{ z-index: 55; font: 12px/13px 'Roboto', Arial; padding: 0 0 13px 0; min-height: 40px; }
.who_like_box .comment_author .user_pic, .who_unlike_box .comment_author .user_pic
{ width: 25px; height: 25px; margin: 0px 10px 0px 0px; float: left; }
.who_like_box .comment_author .user_name, .who_unlike_box .comment_author .user_name
{ color: #000000; font-weight: 700; padding: 0; margin: 0; }
.who_like_box .comment_author .comment_time, .who_unlike_box .comment_author .comment_time
{ width: 60%; color: #727272; padding: 0; margin: 0; }
.who_like_box .comment_author .user_name:hover, .who_unlike_box .comment_author .user_name:hover { background-color: inherit; }
.who_like_box .comment_author .comment_time:hover, .who_unlike_box .comment_author .comment_time:hover { background-color: inherit; }
.comments_show_more { position: relative; left: 50%; margin: 0px 0 0 -147px; padding: 9px 42px; width: 280px; box-sizing: border-box; font: 12px/14px 'Roboto', Arial; font-weight: 700; color: #FFFFFF; background-color: #727272; text-align: center; }
.comments_show_more:hover { cursor: pointer; }
@media only screen and (max-device-width : 812px)
{
.comments { min-width: 100%; }
.comments_container { padding: 0; }
.who_like_box .comment_author .user_pic, .who_unlike_box .comment_author .user_pic { display: none; }
.who_like_box { top: 20px; left: 19px; }
.who_unlike_box { top: 20px; left: 50px; }
.who_like_box, .who_unlike_box { width: 170px; }
.site-comments { margin: 0px -20px; }
.comment_textarea.comment__auth { margin-right: 0px; width: 100%;}
}