#feedbacks-container { margin: 0 auto; max-width: 1165px; flex-direction: row; display: flex; flex-wrap: wrap; justify-content: center; } @media (max-width: 720px) { #feedbacks-container { flex-direction: column; } } h1.page-title { font-family: "Roboto", sans-serif; font-size: 24px; font-weight: 500; letter-spacing: 0.29px; line-height: 28px; margin-bottom: 4rem; } .quest-feedbacks { font-family: "Roboto", sans-serif; } .quest-feedbacks .quest-feedbacks__title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .quest-feedbacks .quest-feedbacks__title h2.quest-feedbacks__title_text { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 18px; font-weight: 500; letter-spacing: 0.22px; line-height: 21px; } .quest-feedbacks .quest-feedbacks__title h2.quest-feedbacks__title_text span.quest-feedbacks__quest-name { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: justify; -webkit-align-items: justify; -ms-flex-align: justify; align-items: justify; font-weight: lighter; border: 0 solid #FFFFFF; -webkit-border-radius: 4px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 4px 5px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 4px 5px 0 rgba(0, 0, 0, 0.1); padding: 4px; margin: 0em 0.5em; } .quest-feedbacks .quest-feedbacks__title h2.quest-feedbacks__title_text span.quest-feedbacks__quest-name span.quest-feedbacks__quest-name-arrow { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin: 0 0.3em; width: 8px; background-image: url("data:image/svg+xml;utf8, Created with Sketch. "); background-position: center; background-repeat: no-repeat; } .quest-feedbacks .quest-feedbacks__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .feedback { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; width: 360px; margin: 2em 1em; } @media (max-width: 380px) { .feedback { margin: 20px auto; width: 90%; } } .feedback .feedback__title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; padding-bottom: 1em; } .feedback .feedback__title img.feedback__avatar { width: 63px; height: 63px; margin-right: 1em; border: 3px solid #37FBF6; -webkit-border-radius: 50%; border-radius: 50%; background-color: #D8D8D8; } .feedback .feedback__title .feedback__description { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .feedback .feedback__title .feedback__description h3.feedback__name { font-size: 15px; font-weight: 500; letter-spacing: 0.23px; line-height: 18px; color: #C9CAD9; margin: 0; padding: 0; } .feedback .feedback__title .feedback__description h4.feedback__expert__title { font-size: 13px; font-weight: 500; letter-spacing: 0.23px; line-height: 16px; color: #C9CAD9; margin: 0; padding: 0; } .feedback .feedback__title .feedback__description h4.feedback__games__count { font-size: 13px; font-weight: 500; letter-spacing: 0.23px; line-height: 16px; color: #C9CAD9; margin: 0; padding: 0; } .feedback .feedback__title .feedback__description h4.feedback__date { color: #C9CAD9; font-weight: 200; font-size: 15px; font-style: italic; letter-spacing: 0.23px; line-height: 18px; margin: 0; padding: 0; } .feedback .feedback__title .feedback__description .feedback__rating { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .feedback .feedback__title .feedback__description .feedback__rating .heart { width: 22px; height: 21px; background-image: url("data:image/svg+xml;utf8, Created with Sketch. "); background-repeat: no-repeat; } .feedback .feedback__title .feedback__description .feedback__rating .heart_filled { width: 22px; height: 21px; background-image: url("data:image/svg+xml;utf8, "); background-repeat: no-repeat; } .feedback .feedback__title .feedback__description .feedback__rating .star { visibility: hidden; width: 19px; height: 19px; background-repeat: no-repeat; } .feedback .feedback__title .feedback__description .feedback__rating .star_filled { width: 19px; height: 19px; background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 22.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 15 14.3' style='enable-background:new 0 0 15 14.3;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%23FBAE17;} .st1{fill:%23F49E06;} %3C/style%3E%3Cpath class='st0' d='M14.8,5.9l-4.2,3l1.6,4.9c0,0.2,0,0.3-0.1,0.4c-0.1,0-0.1,0.1-0.2,0.1s-0.2,0-0.2-0.1l-4.2-3l-4.2,3 c-0.1,0.1-0.3,0.1-0.5,0c-0.1-0.1-0.2-0.3-0.1-0.4l1.4-4.3l0.2-0.6l-4.2-3C0,5.8,0,5.6,0,5.4c0-0.2,0.2-0.3,0.4-0.3h5.1l1.6-4.9 C7.2,0.1,7.3,0,7.5,0s0.3,0.1,0.4,0.3l1.6,4.9h5.1c0.2,0,0.3,0.1,0.4,0.3C15,5.6,15,5.8,14.8,5.9z'/%3E%3Cpath class='st1' d='M14.8,5.9l-4.2,3l1.6,4.9c0,0.2,0,0.3-0.1,0.4c-0.1,0-0.1,0.1-0.2,0.1s-0.2,0-0.2-0.1l-4.2-3l-4.2,3 c-0.1,0.1-0.3,0.1-0.5,0c-0.1-0.1-0.2-0.3-0.1-0.4l1.4-4.3C6.4,8.7,9,7.4,11.2,5.2h3.4c0.2,0,0.3,0.1,0.4,0.3 C15,5.6,15,5.8,14.8,5.9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; } /*.feedback .response {*/ /* background-color: rgba(239, 255, 0, 0.27);*/ /*}*/ .feedback .feedback__content { padding: 1em; background-color: rgba(159, 163, 184, 0.27); -webkit-border-radius: 5px; border-radius: 5px; color: #FFFFFF; font-size: 15px; letter-spacing: 0.23px; line-height: 18px; position: relative; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; margin-bottom: 1em; } .feedback .feedback__content:before { display: block; content: ' '; position: absolute; z-index: 99; left: 29.5px; top: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid rgba(159, 163, 184, 0.27); } .feedback .response { background-color: rgba(159, 163, 184, 0.07); } .feedback .response:before { border-bottom: 5px solid rgba(159, 163, 184, 0.07); } .feedback .feedback__content .feedback__text { color: #FFFFFF; font-size: 15px; letter-spacing: 0.23px; line-height: 18px; max-height: 180px; overflow: hidden; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .feedback .feedback__content .feedback__text:hover { max-height: 1000px; } .feedback .response__title { color: #fff; opacity: 60%; font-size: 13px; } .feedback .response__check_mark { color: #98e3e1; font-size: 20px; } .feedback .feedback__content p { margin: 0.5em 0; font-size: 15px; letter-spacing: 0.23px; line-height: 18px; } .feedback .feedback__quest .feedback__quest__caption { font-style: italic; margin-bottom: 0.5em; } .feedback .feedback__quest .feedback__quest__title span.feedback__quest__title-name { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: justify; -webkit-align-items: justify; -ms-flex-align: justify; align-items: justify; border: 0 solid #FFFFFF; -webkit-border-radius: 4px; border-radius: 4px; background-color: rgba(255, 255, 255, 0.1); -webkit-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 4px 5px 0 rgba(0, 0, 0, 0.1); box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 4px 5px 0 rgba(0, 0, 0, 0.1); padding: 0.5em; } .feedback .feedback__quest .feedback__quest__title span.feedback__quest__title-name span.feedback__quest__title-name-arrow { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; margin: 0 0.3em; width: 8px; background-image: url("data:image/svg+xml;utf8, Created with Sketch. "); background-position: center; background-repeat: no-repeat; } .feedbacks-more { display: flex; flex-grow: 1; justify-content: center; width: 100%; } .feedbacks-more__button { text-align: center; padding: 0.5rem 1rem; background-color: #ffd500; border-radius: 6px; font-weight: normal; color: black; transition: all 0.2s ease-in-out; } .feedbacks-more__button:hover, .feedbacks-more__button:active, .feedbacks-more__button:focus { color: black; font-weight: bold; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); }