a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
figcaption,
figure,
footer,
form,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
output,
pre,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline
}

h1,
h2,
q {
    padding: 0;
    border: 0
}

button,
input,
p {
    margin: 0;
    border: 0
}

fieldset,
h1,
h2,
img,
p,
q {
    vertical-align: baseline
}

fieldset,
img {
    margin: 0;
    padding: 0
}

html {
    height: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

a img,
fieldset,
img {
    border: 0
}

.clearfix:after,
.clearfix:before {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

.left {
    float: left
}

.rigth {
    float: right
}

span .m-r {
    margin-right: 24px;
}

input[type=email],
input[type=tel],
input[type=text],
textarea {
    -webkit-appearance: none
}

textarea {
    overflow: auto
}

button,
input {
    padding: 0
}

button,
input[type=submit],
textarea:hover {
    cursor: pointer
}

a,
a:focus,
button,
div,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select,
span,
textarea {
    outline: 0
}

ol,
ul {
    list-style-type: none
}

table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%
}

*,
:after,
:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}

body {
    font-family: "Times New Roman", "Roboto", sans-serif;
    font-size: 16px;
    line-height: 1.375;
    background: #fff;
    position: relative;
    overflow-x: hidden;
    background: url(main-bg.jpg);
}

a,
body {
    color: #010101
}

.prod,
a.color_blue {
    text-decoration: underline;
    color: #0084ff
}

a.color_blue {
    color: #00f
}

a,
a.color_blue:hover {
    text-decoration: none
}

.db {
    display: block;
}

h1 {
    font-size: 35px;
    font-weight: 700;
    color: #000;
    line-height: 40px;
    max-width: 650px;
    margin: 8px 0 0
}

h2 {
    font: 700 16px/22px "Arial", "Roboto", sans-serif;
    margin: 26px 0 10px;
}

.wrap {
    width: 1140px;
    margin: auto
}

.main {
    display: block;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    -webkit-box-shadow: 0 0 40px -13px rgba(0, 0, 0, .39);
    box-shadow: 0 0 40px -13px rgba(0, 0, 0, .39);
    width: 1140px;
    position: relative
}

.bg-body,
.header-left h4:after {
    position: absolute;
    bottom: 0
}

.bg-left {
    left: 50%;
    margin-left: -970px
}

.bg-right {
    right: 50%;
    margin-right: -970px
}

.article,
.header-left {
    width: 76.363636%;
    float: left
}

.aside,
.header-right {
    width: 23.636363%;
    float: right
}

.header {
    height: 261px;
    position: relative;
    color: #000;
    background-image: url(Water-Drop-on-Dandelion.jpg);
    background-size: cover;
}

.header-left {
    text-align: left
}

.header-left__img {
    float: left;
    position: relative;
    top: 15px
}

.header-left h1 {
    margin-left: 210px;
    max-width: 540px;
    min-height: 80px
}

.header-left h4 {
    max-width: 630px;
    margin-left: 52px;
}

.header-left h4 {
    position: relative;
    color: #000;
    margin-top: 8px;
    font: 400 20px/45px "Times New Roman", "Roboto", sans-serif;
    display: inline-block;
    font-style: italic;
}

.header-left h4:after {
    content: '';
    width: 200%;
    height: 1px;
    left: 0;
    background-color: #000
}

.header-right {
    text-align: right;
    padding-top: 10px
}

.header-right form {
    background-color: #fff;
    width: 100%;
    height: 39px;
    border-radius: 20px;
    text-align: left;
    padding-left: 16px;
    max-width: 300px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 12px;
    position: relative
}

.header-right__search-input {
    font: 400 italic 14px/45px "Roboto", sans-serif;
    background-color: #fff;
    color: #b7b7b7;
    height: 100%;
    text-transform: capitalize;
}

.header-right__search-input::-webkit-input-placeholder {
    color: #959595;
    font-family: "Roboto";
    font-style: italic
}

.header-right__search-input:-moz-placeholder,
.header-right__search-input::-moz-placeholder {
    color: #959595;
    font-family: "Roboto";
    font-style: italic
}

.header-right__search-input:-ms-input-placeholder {
    color: #959595;
    font-family: "Roboto";
    font-style: italic
}

.header-right__search-button {
    background-image: url(search_ico.png);
    width: 24px;
    height: 24px;
    position: absolute;
    right: 11px;
    top: 7px
}

.data-text {
    font: 700 12px "Myriad Pro Regular", "Roboto", sans-serif;
    margin-top: 15px;
    color: #000;
    margin-left: 209px;
    text-transform: capitalize
}

.data-text__left {
    display: inline-block;
    margin-right: 5px;
    margin-left: 45px
}

.article-wrap {
    position: relative;
    top: -76px;
    padding-bottom: 12px;
    z-index: 2
}

.article {
    background: #f4f7fc
}

.article img {
    margin: 0 0 6px;
}
.article img.mrtop{
    margin-top: 8px;
    margin-bottom: 10px;
}
.article img.mrtop2{
    margin-top: 24px;
}
.article_img_margin{
    margin-bottom: 10px;
}

.article h2 {
    clear: both;
    text-align: left;
    font-size: 25px;
    font-family: "Arial";
    font-weight: 700;
}

.article h2.article2{
    font-size: 18px;
    font-family: "Arial";
}

.article h2.article3{
    margin-top: 36px;
    margin-bottom: 12px;
}
.article .small-img {
    width: 48%;
    float: left
}

.article .small-img:first-child {
    margin-right: 2%
}

.article-blog {
    background-color: transparent
}

.article-blog__img {
    display: block;
    margin: 20px auto 43px
}

.article-comennts {
    text-align: left;
    background-color: transparent;
    margin-bottom: 100px
}

.article-comennts+h2 {
    font: 700 18px/20px "Arial", "Roboto", sans-serif
}

.article-comennts h5 {
    font: 700 16px/16px "Lato", "Roboto", sans-serif;
    padding-bottom: 8px;
    margin: 100px 0 10px;
    border-bottom: 1px solid #e6e6e6;
    text-transform: capitalize;
}

.article-blog__item,
.article-blog__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.article-blog__list {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: auto
}

.article-blog__item {
    width: 270px;
    height: 200px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    text-align: left;
    color: #fff
}

.article-blog__item div {
    padding: 15px 40px 10px 15px;
    height: 90px;
    background-color: rgba(255, 255, 255, .7);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.article-blog__item.item-1 {
    background: url(item1.jpg) no-repeat
}

.article-blog__item.item-2 {
    background: url(item2.jpg) no-repeat
}

.article-blog__item.item-3 {
    background: url(item3.jpg) no-repeat;
    background-size: cover
}

.article-blog__item .abold {
    font: 700 16px/22px "Arial", "Roboto", sans-serif;
    font-weight: 700;
    color: #000
}

.comments-list li {
    padding: 13px 20px;
    border: 1px solid #d4ddeb;
    margin: 10px 5px 185px;
    background: #fff
}

.comments-list li:first-child {
    background: #cad1dd
}

.comments-list a {
    color: gray
}

.commetn_wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.content_comments {
    width: 840px;
    min-height: 191px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #e6e6e6;
    padding-top: 30px;
    padding-bottom: 20px
}

.content_comments .user {
    text-align: center;
    width: 66px;
    height: 66px;
    margin-bottom: 15px;
    margin-right: 15px
}

.content_comments .user p {
    font: 13px "Roboto", sans-serif;
    max-width: 115px;
    width: 100%;
    margin-bottom: 5px
}

.content_comments .user .rdate {
    max-width: inherit;
    color: #7f8182;
    font-size: 11px;
    text-align: center;
    margin-top: 7px
}
span .rdate{
    font-family: "MyriadPro-Regular";
}

.content_comments .user>a i {
    margin-bottom: 5px
}

.content_comments .comments {
    max-width: 746px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.content_comments .comments>div .answer-button {
    color: #fff;
    font: 14px "MyriadReg", sans-serif;
    text-align: center;
    padding: 10px 0;
    background-color: #ffd3d3;
    text-decoration: none;
    max-width: 130px;
    width: 100%;
    text-transform: capitalize;
    border-radius: 5px;
    border: 1px solid transparent
}

.content_comments .comments>div .answer-button:hover {
    border: 1px solid #78c478;
    background-color: #fff;
    color: #78c478
}

.answer:before,
{
    position: absolute;
    top: 0
}

.answer:before {
    content: '';
    display: none;
    background-image: url(arrow.png);
    left: -40px;
    width: 25px;
    height: 22px
}

.answer .comments {
    max-width: 520px
}

.aside {
    background-color: #fff;
    height: 100%;
    bottom: 0;
    right: 0;
    text-align: left;
    padding: 0 14px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.aside-post {
}

.aside-post:first-child {
    margin-bottom: 60px;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.aside-post h2 {
    font-size: 25px;
    line-height: 31px;
    margin-bottom: 10px
}

.aside-post h2 a {
    max-width: 240px
}

.aside-post__link {
    font: 400 18px/31px "MyriadPro-Regular", "Roboto", sans-serif;
    color: #00bff3;
    display: block;
    text-transform: capitalize;
}

.aside-post__link {
    text-decoration: underline
}

.aside-post__link:hover {
    text-decoration: none
}

.aside-post img {
    margin-top: 5px;
    margin-bottom: 3px;
    width: 100%
}

.footer {
    background-color: #36a6cf;
    text-align: center;
    color: #e6e6e6;
    padding: 40px 0 90px;
    position: absolute;
    bottom: -24px;
    width: 100%;
    z-index: 2
}

.article {
    padding: 0px 15px 50px;
    text-align: left
}

.article_txt {
    color: #010101;
    font: 400 16px/22px "Arial", "Roboto", sans-serif;
    margin-bottom: 13px;
}

.article_txt a,
.user_msg a {
    color: blue;
    text-decoration: underline
}

.article_txt a:hover,
.user_msg a:hover {
    text-decoration: none
}

.article__img,
.article_title2 {
    margin-bottom: 5px
}

.article__blog_date {
    font: 400 13px/22px "MyriadPro-Regular", "Roboto", sans-serif;
    color: #818181
}

.bottom_comment_panel {
    height: 40px
}

.user_date,
.user_name {
    font: 700 16px/24px "Arial", "Roboto", sans-serif;
    margin-bottom: 7px
}

.user_date {
    margin-bottom: 22px
}

.user_msg {
    font: 400 14px/24px "Arial", "Roboto", sans-serif;
    color: #606060;
    margin-bottom: 15px
}

.msg_title {
    font: 700 16px/16px "Arial", "Roboto", sans-serif;
    font-weight: 700;
    color: #1f1f1f
}

.apruv,
.reply,
.report {
    font: 700 14px/24px "Lato", "Roboto", sans-serif;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    color: #a8a8a8
}

.reply,
.apruv {
    padding: 5px 15px;
    border: 1px solid #bababa;
    background: -webkit-gradient(linear, left bottom, left top, from(#d1d0d0), to(#fff));
    background: linear-gradient(to top, #d1d0d0, #fff)
}

.apruv:before,
.reply:before,
.report:before {
    display: inline-block;
    background-image: url(comment-panel.png);
    background-repeat: no-repeat;
    margin-right: 5px
}

.reply {
    margin-right: 24px;
}

.reply:before {
    content: "";
    background-position: 0 0;
    height: 21px;
    width: 25px
}

.apruv:before {
    content: "";
    background-position: -25px 0;
    height: 21px;
    width: 22px
}

.report {
    position: absolute;
    top: 10px;
    right: 28px
}

.report:before {
    content: "";
    background-position: 0 -21px;
    height: 21px;
    width: 19px
}

.apruv:hover,
.reply:hover,
.report:hover {
    background: #fff;
    opacity: .8
}

.comment_panel {
    margin-top: 19px;
    position: relative
}

.dates {
    font-weight: 400;
    color: #848484
}

.content_comments__answer {
    width: 807px;
    margin-left: 33px
}

.comments__answer {
    width: 693px!important
}

.user__answer {
    position: relative;
    margin-left: 15px
}

.user__answer::before {
    content: '';
    display: block;
    position: absolute;
    height: 66px;
    width: 1px;
    background: #e6e6e6;
    left: -17px
}

.report__answer {
    right: 24px
}

.textarea {
    border-radius: 5px;
    border: 1px solid #bababa;
    margin: 15px 0;
    width: 100%;
    resize: vertical;
    max-height: 350px;
    min-height: 60px
}

.comments-list {
    position: relative;
    margin-top: 22px
}
.mr-top{
    margin-top: 200px;
}

.msg_btn {
    float: right;
    background: -webkit-gradient(linear, left bottom, left top, from(#d1d0d0), to(#fff));
    background: linear-gradient(to top, #d1d0d0, #fff);
    text-align: center;
    color: #000;
    border: 1px solid #bababa;
    font: 700 16px "Lato", "Roboto", sans-serif;
    padding: 15px 40px
}

.msg_btn:hover {
    background: #fff;
    -webkit-transition: background .5s;
    transition: background .5s
}
.ul_list{
    font-family: "Arial";
    font-weight: 700;
    line-height: 32px;
    font-size: 16px;
    margin-bottom: 6px;
    margin-top: -10px;
}

@media only screen and (min-device-width:320px) and (max-device-width:480px) {
    * {
        -webkit-text-size-adjust: none
    }
    .content_comments {
        padding: 15px 10px 20px 12px
    }
}

@media only screen and (max-width:1200px) {
    .bg-body {
        display: none
    }
    .wrap {
        width: 950px
    }
    .comennt-right img,
    .main {
        width: 100%
    }
    .aside-post__link {
        font-size: 18px
    }
    .header-left h1 {
        line-height: 1;
        font-size: 30px;
        margin-top: 14px;
    }
    .content_comments {
        width: auto
    }
    .content_comments__answer {
        width: auto!important;
        max-width: 800px;
        margin-left: 0!important
    }
}

@media only screen and (max-width:970px) {
    .header-left h1 {
        min-height: inherit;
    }
    .content_comments {
        width: 100%!important
    }
    h1 {
        font-size: 25px;
        padding-left: 15px;
        padding-right: 15px
    }
    h2 {
        font-size: 20px
    }
    .wrap {
        width: 750px
    }
    .header {
        height: auto;
        background-position-y: top
    }
    .header .wrap {
        overflow: hidden
    }
    .header-left {
        width: 100%;
        margin-top: 120px;
        text-align: center;
        padding-bottom: 85px
    }
    .header-left__img {
        float: none;
        top: 0
    }
    .header-left h4:after {
        bottom: 6px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%)
    }
    .header-left h1,
    .header-left h4 {
        margin: auto;
        font-size: 20px
    }
    .header-right {
        width: 300px;
        float: none;
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -150px;
        text-align: center
    }
    .header-right form {
        margin-top: 10px
    }
    .article-blog__list {
        display: block
    }
    .article-blog__item {
        margin: 10px auto
    }
    .article__left-img img,
    .article__right-img img {
        float: none;
        padding: 0 0 20px
    }
    .comennt {
        min-height: 250px
    }
    .article-comennts+h2,
    .comennt-right p,
    .comments-list {
        text-align: center
    }
    .comennt-left {
        width: 100%
    }
    .comennt__ico {
        margin: auto
    }
    .comennt-right {
        display: block;
        position: static;
        padding-right: 0;
        padding-bottom: 50px
    }
    .comennt-right p {
        padding-left: 0
    }
    .aside-post {
        width: 100%
    }
    .data-text__left {
        margin-left: 0
    }
    .article-comennts {
        padding: 0
    }
    .coment__like {
        margin-left: 20px
    }
    .coment__button {
        margin-right: 20px
    }
    .data-text {
        margin-left: 0
    }
}

@media only screen and (max-width:770px) {
    .article-blog__list {
        width: 100%
    }
    .article__img {
        width: 100%!important
    }
    .content_comments {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }
    .answer {
        margin-left: 0
    }
    .answer:before {
        left: 2px
    }
    .d_img {
        -webkit-box-orient: vertical;
        -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse
    }
    .article img{
        max-width: 100%;
    }
    h3 {
        min-height: 60px
    }
    .wrap {
        width: 520px
    }
    .article,
    .article-blog img,
    .aside {
        width: 100%
    }
    .article {
        padding-bottom: 60px
    }
    .aside {
        height: auto;
        position: static;
        font-size: 0;
        text-align: center
    }
    .aside-post:not(:first-child) {
        display: block;
        width: 60%;
        margin: 0 auto 40px;
    }
    .first-post {
        width: 100%;
        margin-bottom: 0
    }
    .aside-post__link {
        display: inline-block;
        padding: 0 10px
    }
    .aside-post img {
        max-width: 300px
    }
    .content_comments .comments {
        max-width: 495px
    }
    .user {
        position: relative;
        left: 43%
    }
    .user_name {
        text-align: center;
    }
    .user_date {
        text-align: center;
    }
}

@media only screen and (max-width:600px) {
    body {
        font-size: 16px
    }
    body,
    h1 {
        line-height: 1.2
    }
    .article-blog__img,
    .main,
    .wrap {
        width: 100%
    }
    .article-button {
        font-size: 24px
    }
    .comments-list li {
        margin: 20px 0 30px
    }
    .aside-post {
        width: 100%;
        margin: 30px 0 0
    }
    .data-text {
        font-size: 11px;
        padding: 0 2px
    }
    .user {
        left: 38%
    }
}

@media only screen and (max-width:480px) {
    .product_img {
        margin-left: 28%!important
    }
    .comment_panel {
        height: 100px
    }
    .content_comments .comments {
        max-width: 360px
    }
    .aside-post:not(:first-child) {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
    .apruv,
    .reply,
    .report {
        font-size: 0
    }
    .apruv:before,
    .reply:before,
    .report:before {
        margin: 0
    }
}

@media only screen and (max-width:320px) {
    .product_img {
        margin-left: 15%!important
    }
    .comment_panel {
        height: 100px
    }
    .content_comments .comments {
        max-width: 280px!important
    }
    textarea {
        max-width: 270px
    }
}
img.product-img {
    display: block;
    margin: 8px auto 0;
}