/*New font*/
@font-face {
	font-family: 'DisplayBold';
	src: url('psmm/css/transfonter/SFUIDisplay-Bold.eot');
	src: url('psmm/css/transfonter/SFUIDisplay-Bold.eot?#iefix') format('embedded-opentype'),
		url('psmm/css/transfonter/SFUIDisplay-Bold.woff2') format('woff2'),
		url('psmm/css/transfonter/SFUIDisplay-Bold.woff') format('woff'),
		url('psmm/css/transfonter/SFUIDisplay-Bold.ttf') format('truetype'),
		url('psmm/css/transfonter/SFUIDisplay-Bold.svg#SFUIDisplay-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'TextMedium';
	src: url('psmm/css/transfonter/SFUIText-Medium.eot');
	src: url('psmm/css/transfonter/SFUIText-Medium.eot?#iefix') format('embedded-opentype'),
		url('psmm/css/transfonter/SFUIText-Medium.woff2') format('woff2'),
		url('psmm/css/transfonter/SFUIText-Medium.woff') format('woff'),
		url('psmm/css/transfonter/SFUIText-Medium.ttf') format('truetype'),
		url('psmm/css/transfonter/SFUIText-Medium.svg#SFUIText-Medium') format('svg');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'DisplayUltralight';
	src: url('psmm/css/transfonter/SFUIDisplay-Ultralight.eot');
	src: url('/psmm/css/transfonter/SFUIDisplay-Ultralight.eot?#iefix') format('embedded-opentype'),
		url('psmm/css/transfonter/SFUIDisplay-Ultralight.woff2') format('woff2'),
		url('psmm/css/transfonter/SFUIDisplay-Ultralight.woff') format('woff'),
		url('psmm/css/transfonter/SFUIDisplay-Ultralight.ttf') format('truetype'),
		url('psmm/css/transfonter/SFUIDisplay-Ultralight.svg#SFUIDisplay-Ultralight') format('svg');
	font-weight: 100;
	font-style: normal;
}

@font-face {
	font-family: 'TextLight';
	src: url('psmm/css/transfonter/SFUIText-Light.eot');
	src: url('psmm/css/transfonter/SFUIText-Light.eot?#iefix') format('embedded-opentype'),
		url('psmm/css/transfonter/SFUIText-Light.woff2') format('woff2'),
		url('psmm/css/transfonter/SFUIText-Light.woff') format('woff'),
		url('psmm/css/transfonter/SFUIText-Light.ttf') format('truetype'),
		url('psmm/css/transfonter/SFUIText-Light.svg#SFUIText-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: 'TextBold';
	src: url('psmm/css/transfonter/SFUIText-Bold.eot');
	src: url('psmm/css/transfonter/SFUIText-Bold.eot?#iefix') format('embedded-opentype'),
		url('psmm/css/transfonter/SFUIText-Bold.woff2') format('woff2'),
		url('psmm/css/transfonter/SFUIText-Bold.woff') format('woff'),
		url('psmm/css/transfonter/SFUIText-Bold.ttf') format('truetype'),
		url('psmm/css/transfonter/SFUIText-Bold.svg#SFUIText-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'DisplayLight';
	src: url('psmm/css/transfonter/SFUIDisplay-Light.eot');
	src: url('psmm/css/transfonter/SFUIDisplay-Light.eot?#iefix') format('embedded-opentype'),
		url('psmm/css/transfonter/SFUIDisplay-Light.woff2') format('woff2'),
		url('psmm/css/transfonter/SFUIDisplay-Light.woff') format('woff'),
		url('psmm/css/transfonter/SFUIDisplay-Light.ttf') format('truetype'),
		url('psmm/css/transfonter/SFUIDisplay-Light.svg#SFUIDisplay-Light') format('svg');
	font-weight: 300;
	font-style: normal;
}

/* --- */

.comment,
#addCommentContainer{
	
	/* Syling the comments and the comment form container */

	padding:12px;
	width:calc(100% - 68px);
    position:relative;
	background-color:#FFF;
	border:1px solid #efefef;
	color:#888;
	margin-bottom:25px;
	left:63px; /* было 63px */
	
	/* CSS3 rounded corners and drop shadows */
	
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}


.comment .avatar{

	/*
	/	The avatar is positioned absolutely,
	/	and offset outside the comment div
	/*/

	height:50px;
	left:-112px;
	margin-left:50px;
	position:absolute;
	width:50px;
	/*	background:url('img/default_avatar.gif') no-repeat #fcfcfc; */

	/* Centering it vertically: */

	margin-top:0px;
	top:0;

	-moz-box-shadow:0px 0px 0px #c2c2c2;
	-webkit-box-shadow:0px 0px 0px #c2c2c2;
	box-shadow:0px 0px 0px #c2c2c2;
}


.comment .avatar img{
    display:block;
    width: 50px;
	height: 50px;
	border-radius:50%;
}


.comment .name{
	font-size:16px;
    font-family: "TextMedium";
	padding-bottom:5px;
	color:#000;
}

.answer_to_user_name {
    font-size:16px;
    font-family: "TextLight";
    padding-bottom:5px;
    color:#666666;
}

.comment .com_dell{
	font-size:14px;
	font-family: "TextLight";
	text-decoration:underline;
	color: #000000;
}

.comment .com_dell_red{
    font-size:14px;
    font-family: "TextLight";
    text-decoration:underline;
    color: #ed1b22;
}

.comment .date{
	font-family: "TextLight";
	font-size:12px;
	padding:0px 0;
	position:absolute;
	right:15px;
	top:16px;
	color:#bbb;
}



.comment p,
#addCommentContainer p{
    font-size: 16px;
    font-family: "TextLight";
    color: #282828;
    line-height: 1.3em;
	overflow-x:hidden;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
}

#addCommentContainer input[type=text],
#addCommentContainer textarea{

	/* Styling the inputs  Цвет ввода текста*/
	display:block;
	border:1px solid #ccc;

    margin-bottom: 10px;
	margin-top: 10px;

	color:#000000;
	font-size: 14px;
	font-family: "TextLight";
	line-height: 18px;
    -webkit-appearance: none;
}

#addCommentContainer textarea{
	width:100%;

}

label{
	font-size: 14px;
	font-family: "TextLight";
	color: #666;	
	line-height: 14px;
}

label span.error{
	color:red;

	right:-10px;
}

#submit{
	
	/* The submit button */
	
  display: inline-block;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  cursor: pointer;
  padding: 10px 20px;
  border: none;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-family: "TextLight";
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #49a300;
  -webkit-appearance: none;
  -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
  transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

#submit:hover{
	background-color:#49a300;
	
}

/* margin:0 auto; The styles below are only necessary for the styling of the demo page: */

#main{
    position:relative;
    width:100%;
}



a img{
	border:none;
}

.ava{  

	/*
	/   Аватар для набора комментари
	/*/

	height:50px;
	width:50px;
	left:-112px;
	margin-left:50px;
	position:absolute;

	/* background:url('img/default_avatar.gif') no-repeat #fcfcfc; */
	border-radius: 50%;
	
	/* Centering it vertically: */
	
	margin-top:0px;
	top:0;
}