@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

body {font-family: "Lato", sans-serif; color: #454545;}
* {margin: 0; padding: 0; box-sizing: border-box;}
a { text-decoration: none; color: inherit;}

/* width */
::-webkit-scrollbar {
  width: 10px; border-radius: 12px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/* For number type remove up/down arrows */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none;
}


.container {width: 90%; margin: 0 auto;}
.container::after {content: ''; display: block; clear: both;}

header {position: fixed; top: 0; left: 0; width: 100%; background: #fff; z-index: 1;}
header.fixed .cats {display: none;}
header.search.fixed .topSearch .search {margin-bottom: 0;}
header.fixed.search {padding: 12px 0; box-shadow: 0 0 8px rgba(0,0,0,.1);}
header.fixed {padding: 12px 0; box-shadow: 0 0 8px rgba(0,0,0,.1);}

header.home {padding: 12px 0; /*box-shadow: 0 0 8px rgba(0,0,0,.1);*/}
header.home .logo {width: calc(300px - 4px); display: inline-block; vertical-align: top; height: 40px;}
header.home .logo img {display: none; width: calc(50px - 4px); vertical-align: middle;}
header.home .logo span {display: none; width: calc(100% - 50px - 4px); vertical-align: middle; padding-left: 12px; color: #76767a;}
.usernav {display: inline-block; width: calc(300px - 4px); vertical-align: middle; padding-left: 12px; color: #76767a; text-align: right; float: right; margin-top: 8px; position: relative; z-index: 2;}
.usernav a {display: inline-block; margin-left: 20px; vertical-align: middle; padding: 8px 0;}
.usernav a.chatBtn {margin-left: 0;}
.usernav img {height: 20px;}
.usernav .user {display: inline-block; vertical-align: middle; padding-top: 2px;}
.usernav .user img {display: inline-block; vertical-align: middle;}
.usernav .user span {display: inline-block; vertical-align: middle; font-size: 15px; margin-left: 4px;}

.midSecAuto {padding-top: 80px;}
.midSec {min-height: calc(100vh); padding-top: 120px;}
.midSec .midSearch {padding: 100px 0 50px; max-width: 660px; margin: 0 auto; text-align: center;}
.midSec .midSearch .logo {margin-bottom: 40px;}
.midSec .midSearch .search {margin-bottom: 20px; position: relative;}
.midSec .midSearch .search input[type=text] {display: block; width: 100%; height: 60px; padding: 0 40px; border: 0; font-size: 20px; border-radius: 30px; background: #eeeeee; transition: all ease-in-out .2s;}
.midSec .midSearch .search input[type=text]:focus {box-shadow: 0 0 8px rgba(0,0,0,.2); background: #fff; outline: 0;}
/*.midSec .midSearch .search input[type=submit] {display: block; width: 60px; height: 100%; position: absolute; top: 0; right: 0; border: 0; border-radius: 30px; background: none; text-indent: 100px; overflow: hidden;}*/
.midSec .midSearch .search button {display: block; width: 60px; height: 60px; position: absolute; top: 0; right: 0; border: 0; border-radius: 30px; background: none;}
.midSec .midSearch .search button::after {content: '\f002'; font-family: "Font Awesome 5 Free"; font-weight: 900; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 24px;}
.midSec .midSearch .cats {font-size: 15px; padding: 0 20px;}
.midSec .midSearch .cats::after {content: ''; display: block; clear: both;}
.midSec .midSearch .cats .trendingLnk {float: right;}
.midSec .midSearch .cats nav {float: left; }
.midSec .midSearch .cats nav a {display: inline-block; margin-right: 24px; color: #76767a; padding: 2px 0;}
.midSec .midSearch .cats nav a.active {color: #000; border-bottom: 2px solid #000;}
.midSec .midSearch .cats .trendingLnk a {display: inline-block; margin-right: 12px; color: #76767a;}
.midSec .midSearch .cats .trendingLnk a::after {content: '\f078'; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; margin-left: 4px; font-size: 13px;}

.midSec .trending {text-align: left; width: 90%; margin: 0 auto; max-width: 660px;}
.midSec .trending .trend {display: inline-block; width: calc((100% / 5) - 4px - 4px); margin: 0 2px 12px;}
.midSec .trending .trend a {display: block; background: #fafafa; padding: 20px 12px; text-decoration: none; color: #76767a; text-align: center; border-radius: 8px;}
.midSec .trending .trend a span {display: block; font-size: 12px;}
.midSec .trending .trend a .icon {margin-bottom: 6px;}
.midSec .trending .trend a .icon img {height: 46px;}
.midSec .trending h2 {font-size: 20px; color: #000; margin-bottom: 20px; text-align: left; font-weight: 400;}

footer {background: #f8f8f8; color: #76767a; font-size: 14px;}
footer a {color: #76767a;}
footer .left {display: inline-block; width: calc(100% - 336px - 4px); vertical-align: top; position: relative;}
footer .right {display: inline-block; width: calc(336px - 4px); vertical-align: top; text-align: right;}
footer .container {padding: 12px 0; padding-left: 75px;}
footer nav .container {padding: 20px 0; padding-left: 75px;}
footer .left span {font-size: 16px;}
footer .left span, footer .left a { display: inline-block; margin-right: 12px;}
footer .right a {margin-left: 12px;}
footer .copy {border-top: 1px solid #efedf1; font-size: 14px; text-align: right;}
footer .left .in {position: absolute; left: -75px; width: 70px; top: -9px;}


header.search {padding: 12px 0 12px 0; /*box-shadow: 0 0 8px rgba(0,0,0,.1);*/ z-index: 2;}
header.search .logo {width: calc(80px - 4px); display: inline-block; vertical-align: top; margin-top: 2px;}
header.search .logo img {display: block; width: calc(50px - 4px); vertical-align: middle;}

header.search .topSearch {width: calc(100% - 80px - 300px - 4px); max-width: 680px; margin: 0 auto; text-align: center; display: inline-block;}
header.search .topSearch .search {margin-bottom: 20px; position: relative;}
header.search .topSearch .search input[type=text] {display: block; width: 100%; height: 50px; padding: 0 40px; border: 0; font-size: 20px; border-radius: 30px; background: #eeeeee; transition: all ease-in-out .2s;}
header.search .topSearch .search input[type=text].err {border: 1px solid red;}
header.search .topSearch .search input[type=text]:focus {box-shadow: 0 0 8px rgba(0,0,0,.2); background: #fff; outline: 0;}
/*header.search .topSearch .search input[type=submit] {display: block; width: 60px; height: 100%; position: absolute; top: 0; right: 0; border: 0; border-radius: 30px; background: none; text-indent: 100px; overflow: hidden;}*/
.topSearchBtn {display: block; width: 60px; height: 100%; position: absolute; top: 0; right: 0; border: 0; border-radius: 30px; background: none; color: #63656a;}
header.search .topSearch .search button::after {content: '\f002'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 24px;}
header.search .topSearch .cats {font-size: 15px; padding: 0 20px;}
header.search .topSearch .cats::after {content: ''; display: block; clear: both;}
header.search .topSearch .cats .trendingLnk {float: right;}
header.search .topSearch .cats nav {float: left; }
header.search .topSearch .cats nav a {display: inline-block; margin-right: 26px; color: #76767a; padding: 2px 0;}
header.search .topSearch .cats nav a.active {color: #000; border-bottom: 2px solid #000;}
header.search .topSearch .cats .trendingLnk a {display: inline-block; margin-right: 12px; color: #76767a;}
header.search .topSearch .cats .trendingLnk a::after {content: '\f078'; font-family: "Font Awesome 5 Free"; font-weight: 900; display: inline-block; margin-left: 4px; font-size: 13px;}


.searchResult {padding-left: calc(80px + 20px); padding-top: 32px; max-width: 800px; margin-bottom: 32px;}
.searchResult .item {display: block; margin-bottom: 32px;}
.searchResult .item::after {content: ''; display: block; clear: both;}
.searchResult .item .icon {display: inline-block; width: calc(60px - 4px); vertical-align: top; padding-top: 12px;}
.searchResult .item .icon img {height: 32px;}
.searchResult .item .text {display: inline-block; width: calc(100% - 60px - 4px); vertical-align: top;}
.searchResult .item .text .link {font-size: 14px; color: rgba(0, 0, 0, 0.52); /*word-wrap: break-word;*/}
.searchResult .item .text h2 {font-size: 20px; line-height: 28px; font-weight: 500; color: #0828bb; margin-bottom: 4px;}
.searchResult .item .text h2:visited {color: #6d14a3;}
.searchResult .item .text p {color: #333; font-size: 14px; line-height: 21px;}

.searchResult .item .result {width: calc(100% - 86px - 20px); float: left; margin-bottom: 12px; border-radius: 12px; overflow: hidden;}
.searchResult .item .relatedOffers {width: 86px; float: right; margin-left: 20px; margin-bottom: 12px; border-radius: 12px; overflow: hidden;}
.searchResult .item .relatedOffers .off {position: relative;}
.searchResult .item .relatedOffers .off:nth-child(1) ~ .off {display: none;}
.searchResult .item .relatedOffers .off .img {width: 100%; height: 100px; position: relative;}
.searchResult .item .relatedOffers .off .img img {max-width: 100%; height: 100%; width: 100%; object-fit: cover;}
.searchResult .item .relatedOffers .off .brandTitle {display: none;}

.popupWrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: rgba(0,0,0,.5); text-align: center; padding: 5vh 5vw;}
.popupWrap img {width: 100%;}
.popupWrap .close {position: absolute; top: 0; right: 0; background: #fff; color: #000; width: 40px; line-height: 40px; text-align: center; cursor: pointer; font-size: 24px; z-index: 1;}
.popupWrap .popupinner {max-width: 400px; width: 90%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 12px; padding-right: 0; background: #fff; border-radius: 12px; overflow: hidden;}
.popupWrap .popupinner h3 {font-size: 18px; margin-bottom: 12px; text-align: left;}
.popupWrap .slider {width: 100%; max-height: 80vh; overflow: auto; padding-right: 12px;}
.popupWrap .slider .slide {display: inline-block; width: 100%; float: left; vertical-align: top; /*padding: 8px; height: 400px;*/ position: relative; border-radius: 6px; margin-bottom: 24px;}
.popupWrap .slider .slide:last-child {margin-bottom: 0;}
.popupWrap .slider .slide .img img {display: block; width: 100%; height: 100%; object-fit: cover; border: 6px solid #f3f3f3; border-radius: 6px;}
.popupWrap .slider .slide .brandTitle {padding-top: 5px; text-align: left;}
.popupWrap .slider .slide .brandTitle .title {color: #515151; font-weight: 600; display: block; font-size: 14px; margin-bottom: 6px;}
.popupWrap .slider .slide .brandTitle .brand {display: block;}
.popupWrap .slider .slide .brandTitle .brand img {display: inline-block; width: calc(32px - 4px); vertical-align: middle; border-radius: 50%;}
.popupWrap .slider .slide .brandTitle .brand .bname {display: inline-block; width: calc(100% - 32px - 4px - 20px); margin-left: 6px; vertical-align: middle; color: #7f7f7f; font-size: 13px; font-weight: 600;}

.searchResult .rimg {margin: 40px 0; font-size: 14px; color: rgba(0, 0, 0, 0.52); padding-left: calc(60px - 4px);}
.searchResult .rimg ul {display: block;}
.searchResult .rimg ul li {display: inline-block; margin: 0 4px;}
.searchResult .rimg ul li a {display: block; background: #ccc; border-radius: 8px; overflow: hidden;}
.searchResult .rimg ul li img {height: 132px;}
.searchResult .rimg .more {float: right; color: #000; font-weight: 600;}
.searchResult .rimg h3 {font-size: 20px; color: #000; margin-bottom: 20px;}


.searchResult .rcat {margin: 40px 0; font-size: 14px; color: rgba(0, 0, 0, 0.52); padding-left: calc(60px - 4px);}
.searchResult .rcat i {display: inline-block; margin-right: 8px;}
.searchResult .rcat ul {display: inline-block; margin-left: 12px;}
.searchResult .rcat ul li {display: inline-block; margin: 0 4px;}
.searchResult .rcat ul li a {display: inline-block; padding: 8px 20px; background: rgba(35, 36, 38, 0.08); color: #000; border-radius: 32px;}

.searchResult {display: inline-block; vertical-align: top; min-height: 300px;}
.rightCol {display: inline-block; width: calc(100% - 800px - 8px - 32px); margin-left: 32px; vertical-align: top; padding: 24px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 5px; color: #333; font-size: 14px; line-height: 22px;}
.rightCol .article .tipshead {font-size: 20px; font-weight: 600; margin-bottom: 20px;}
.rightCol .article .tipshead span {color: #009ae0;}
.rightCol .hr {display: block; height: 1px; background: #ccc; margin: 20px 0;}
.rightCol .points {color: rgba(0, 0, 0, 0.52);}
.rightCol ul {margin-left: 20px;}

.loadMore {text-align: center;}
.loadMore a {display: block; padding: 12px 20px; background: #ffb800; color: #000; font-weight: 800; border-radius: 20px;}
.loadMore a:hover {background: #e0cb0e;}

.catMenu, .userMenu {position: absolute; top: 100%; width: 320px; box-shadow: 0 0 10px rgba(0,0,0,.2); background: #f6f5f5; padding: 20px; text-align: left; border-radius: 0; max-height: calc(100vh - 40px - 20px - 80px); overflow: auto; display: none; z-index: 1;}
.userMenu {padding: 20px;}
.catMenu {padding: 20px;}
.catMenu .catMenuList {background: #fff; border-radius: 16px; position: relative; z-index: 1;}
/*.catMenu::before, .userMenu::before {content: ''; display: block; position: absolute; top: -5px; width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;}*/
.catMenu::before, .userMenu::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 160px; background: #e5e1e6; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px;}
.catMenu {left: 0;}

.catMenu.show, .userMenu.show {display: block;}
.catMenu .catMenuList {}
.catMenu .catMenuList ul {display: block;}
.catMenu .catMenuList ul li {display: inline-block; vertical-align: top; width: calc(33.33% - 4px); text-align: center;}
.catMenu .catMenuList ul li a {display: block;}
.catMenu .catMenuList ul li a span {display: block;}
.catMenu .catMenuList ul li a span.icon img {height: 50px;}
.catMenu .catMenuList ul li a span.name {font-size: 12px;}

.userMenu {right: 0;}
.userMenu h4 {color: #002f87; font-weight: 600; font-size: 16px; margin-bottom: 4px;}
.userMenu .userinfo {text-align: center; padding: 12px; background: #fff; border-radius: 16px; margin-bottom: 20px;}
.userMenu .userinfo .uIcon .icon {display: inline-block; margin-bottom: 4px;}
.userMenu .userinfo .uIcon .icon img {width: 60px; height: 60px;}
.userMenu .umHead {color: #000; display: block; font-size: 14px; margin-bottom: 8px; position: relative; z-index: 1;}

.userMenu .notifications {background: #fff; border-radius: 16px; padding: 12px; margin-bottom: 20px;}
.userMenu .notifications a {display: block; margin: 0;}
.userMenu .notifications .icon {display: inline-block; width: calc(32px - 4px); vertical-align: top;}
.userMenu .notifications .icon img {width: 100%; height: auto; border-radius: 50%; border: 1px solid #00af00;}
.userMenu .notifications .text {display: inline-block; width: calc(100% - 32px - 4px - 8px); margin-left: 8px; vertical-align: top;}
.userMenu .notifications .text h2 {font-weight: 400; color: #3d3d3d; font-size: 15px;}
.userMenu .notifications .text p {font-weight: 400; color: #3d3d3d; font-size: 13px;}
.userMenu .notifications .text .brandCta {padding-top: 8px;}
.userMenu .notifications .text .brandCta::after {content: ''; display: block; clear: both;}
.userMenu .notifications .text .brandCta .bnam {float: left; color: #002f87; font-size: 14px; font-weight: 600;}
.userMenu .notifications .text .brandCta .cta {float: right; display: inline-block; background: #ff6d26; color: #fff; font-size: 14px; padding: 4px 12px; border-radius: 20px;}

.userMenu .headLogout {margin: 20px 0; background: #fff; border-radius: 16px; padding: 6px 12px;}

.offerResult {margin-bottom: 40px;}
.offerResult .offerList .item {width: 250px; transition: all ease-in-out .2s; padding-bottom: 80px; background: #fff;}
.offerResult .offerList .item:hover {transform: scale(1.05,1.05); z-index: 1;}
.offerResult .offerList .item .image {display: block; margin-bottom: 6px;}
.offerResult .offerList .item h2 {font-size: 16px;}
.offerResult .offerList .item .image img {width: 100%; border-radius: 12px;}
.offerResult .offerList .item .text {padding-bottom: 28px;}
.offerResult .offerList .item .brand {display: block; padding: 20px 0;}
.offerResult .offerList .item .brand img {width: 32px; height: 32px; border-radius: 50%; display: inline-block; background: #ccc; vertical-align: middle;}
.offerResult .offerList .item .brand .name {width: calc(100% - 32px - 8px - 12px); display: inline-block; vertical-align: middle; margin-left: 12px; color: #003088; font-size: 14px; font-weight: 600;}

#loginStatus, .loginUser {display: block; text-align: left; padding: 0 0; position: relative; z-index: 1;}
.loginUser h3 {font-size: 16px; color: #003088; font-weight: 600; margin-bottom: 12px;}
.loginUser .step {display: none;}
.loginUser .step .field {}
.loginUser .step .field label {font-size: 13px; color: #000; margin-bottom: 4px; display: block;}
.loginUser .step .field input {display: block; height: 32px; width: 100%; padding: 0 12px; border: 0; background: #f5f4f4; border-top-left-radius: 16px; border-bottom-left-radius: 16px;}
.loginUser .step .submit input {display: block; height: 32px; width: 100%; text-align: center; border: 0; background: #ffb800; color: #fff; cursor: pointer;}
.loginUser .step1 {display: block;}

.loginUser .step1 .submit input {background: #008ee0;}
.loginUser .step2 .submit input {background: #00af00;}
.loginUser .step form {display: block; border-radius: 16px; overflow: hidden; margin-bottom: 12px;}
.loginUser .step form::after {content: ''; display: block; clear: both;}
.loginUser .step form .field {display: inline-block; float: left; width: calc(100% - 72px);}
.loginUser .step form .submit {display: inline-block; float: left; width: 72px;}

.loginMess {padding: 12px 8px 4px; font-size: 12px; color: blue; font-weight: 600;}
.loginMess.error {color: red;}
.loginMess.success {color: green;}

.headLogout a {margin: 0; color: blue;}
.headLogout a i {display: inline-block; margin-left: 4px;}

.greetmess h2 {color: #63656a; font-size: 20px; margin-bottom: 4px;}
.greetmess h3 {color: #63656a; font-size: 17px;}
.greetmess h2 .smi {height: 14px;}

.plus {padding: 40px 0; text-align: center;}
.plus i {cursor: pointer; display: inline-block;}
.plus i img {transition: all ease-in-out .2s; filter: grayscale(100%);}
.plus i img:hover {filter: grayscale(0%);}
.plus .plusDetails {padding: 20px 0; text-align: center; line-height: 24px; display: none;}
.plus .plusDetails .item {display: inline-block; vertical-align: top; width: calc(25% - 20px - 4px); margin: 0 10px; padding-left: 32px; position: relative; margin-bottom: 32px; text-align: left;}
.plus .plusDetails .item .no {display: inline-block; font-size: 20px; font-weight: 600; position: absolute; top: 0; left: 0;}
.plus .plusDetails .item p {display: inline-block;  border-left: 1px solid #000; padding-left: 12px;}



/* ---------------- */
.rearrangedList {margin-bottom: 40px; padding-top: 24px;}
.rearrangedList .cardCol {display: inline-block; vertical-align: top;}
.rearrangedList .cardCol .item {width: 100%; transition: all ease-in-out .2s; background: #fff;}
.rearrangedList .cardCol .item:hover {transform: scale(1.05,1.05); z-index: 1;}
.rearrangedList .cardCol .item .image {display: block; margin-bottom: 6px;}
.rearrangedList .cardCol .item h2 {font-size: 14px; color: #515151;}
.rearrangedList .cardCol .item .image img {width: 100%; border-radius: 12px;}
.rearrangedList .cardCol .item .text {margin-bottom: 20px;}
.rearrangedList .cardCol .item .brand {display: block; padding: 6px 0 10px;}
.rearrangedList .cardCol .item .brand img {width: 28px; height: 28px; border-radius: 50%; display: inline-block; background: #ccc; vertical-align: middle;}
.rearrangedList .cardCol .item .brand .name {width: calc(100% - 28px - 8px - 4px); display: inline-block; vertical-align: middle; margin-left: 4px; color: #7f7f7f; font-size: 13px; font-weight: 600;}

.suggestions {display: none; width: 100%; position: absolute; top: 100%; left: 0; max-height: 200px; overflow: auto; background: #fff; text-align: left; box-shadow: 0 0 8px rgba(0,0,0,.2); z-index: 10;}
.autoSuggestion .suggestions {display: block;}
.suggestions a {display: block; padding: 12px 40px;}
.suggestions a.active {background: #f2f2f2;}


header.search .topSearch .search .autoSuggestion input[type=text], .midSec .midSearch .search .autoSuggestion input[type=text] {border-top-left-radius: 12px; border-top-right-radius: 12px; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
header.search .topSearch .search .autoSuggestion .suggestions, .midSec .midSearch .search .autoSuggestion .suggestions {border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;}

.videoHtml {margin-bottom: 40px;}
.videoHtml h2 {font-size: 24px; margin: 0 0 24px;}
.videoHtml h2 a {font-size: 15px; float: right; margin: 10px 0; color: blue;}
.videoHtml .videoList {display: block;}
.videoHtml .videoList ul {display: block;}
.videoHtml .videoList ul li {display: inline-block; width: calc(20% - 4px - 20px); margin-left: calc(20px + (20px / 4)); margin-bottom: 32px; vertical-align: top;}
.videoHtml .videoList ul li:nth-child(5n+1) {margin-left: 0;}
.videoHtml .videoList ul li .img img {width: 100%; border-radius: 12px; box-shadow: 0 0 8px rgba(0,0,0,.5);}
.videoHtml .videoList ul li .txt {font-size: 14px; color: #515151; font-weight: 700;}

/*.vWrap {display: block; background: rgba(0,0,0,0.02); padding: 32px 0;}
.vWrap .container {max-width: none;}
.vWrap .vWrap {width: calc(100% - 380px); float: left; position: relative;}
.vWrap .vWrap::after {content: ''; display: block; clear: both;}*/
.vWrap {margin-bottom: 80px;}
.vWrap .video {width: 100%; position: relative; margin-bottom: 20px;}
.vWrap .video img {width: 100%;}
.vWrap .video iframe {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.vWrap .info {width: 100%; font-size: 14px;}
.vWrap .info h2 {font-size: 18px; margin: 0 0 12px;}
.vWrap .info .viewsWrap {display: block; margin: 0 0 12px;}
.vWrap .info .viewsWrap > span {display: inline-block; padding: 0 20px 0 24px;}
.vWrap .info .viewsWrap span.likes {background: url(../images/Likes.png) center left no-repeat;}
.vWrap .info .viewsWrap span.dislikes {background: url(../images/Dislikes.png) center left no-repeat;}
.vWrap .info .viewsWrap span.views {background: url(../images/Views.png) center left no-repeat;}

.vWrap .info #vDesc .moreBtn {display: inline-block; margin: 12px 0 0; color: brown; font-weight: 14px; font-weight: 700; cursor: pointer;}
.vWrap .info #vDesc .moreBtn::before {content: '+ Show ';}
.vWrap .info #vDesc.open .moreBtn::before {content: '- Hide ';}

.vidBanner {text-align: center; padding: 32px 0;}
.vidBanner img {max-width: 100%;}

.usernav a.chatBtn, .chatBtn {background: #fc9a05; padding: 6px 12px; font-weight: 700; color: #fff; border-radius: 20px; border-bottom-left-radius: 0; line-height: 14px;}
.chatBtn img {display: inline-block; height: 14px; margin-right: 4px; vertical-align: middle;}

.chatWrap {margin-left: calc(80px);  max-width: 800px; min-height: calc(100vh - 120px); position: relative;}
.chatform {position: fixed; bottom: 0; padding: 20px 0; background: #fff; display: flex; width: calc(100% - 10%); max-width: 800px; }
.chatform .newchat {padding: 12px 12px 0 0;}
.chatform .newchat .chatBtn {width: 100px; display: block;}
.chatform form {width: 100%;}
.chatform input[type=text] { display: block; width: 100%; height: 50px; padding: 0 40px; border: 0; font-size: 20px; border-radius: 30px; /*background: #eeeeee;*/ transition: all ease-in-out .2s; background: #fff; outline: 0; box-shadow: 0 0 8px rgba(0,0,0,.2);}
.chatform input[type=text]:focus { }
.chatform button::after { content: '\f1d8'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 24px;}
.chatWrap .chatResult {width: 100%; padding-bottom: 100px;}

.chatWrap .query {display: block; margin-bottom: 20px; text-align: right;}
.chatWrap .query .que {display: inline-block; max-width: calc(100% - 12px - 100px); vertical-align: top; border: 2px solid #f2f2f2; padding: 20px; border-radius: 12px; border-top-right-radius: 0; margin: 0 7px;}
.chatWrap .query .icon {display: inline-block; width: calc(50px - 4px); vertical-align: top; text-align: center; font-size: 20px; line-height: 42px; border: 2px solid #f3f3f3; border-radius: 50%;}
/*.chatWrap .query.request .icon {background: #f3f3f3; color: #fff;}*/
.chatWrap .query .icon img {height: 20px;}

.chatWrap .query.request .que {background: #fc9a05; border-color: #fc9a05;; color: #fff;}

.chatWrap .query.response {/*display: block; margin-bottom: 20px;*/ text-align: left;}
.chatWrap .query.response .que {border-radius: 12px; border-top-left-radius: 0;}
/*.chatWrap .response .que {display: inline-block; width: calc(100% - 12px - 100px); vertical-align: top;}
.chatWrap .response .icon {display: inline-block; width: calc(50px - 4px); vertical-align: top; text-align: center;}*/
.chatWrap .query .que p {margin: 12px 0;}
.chatWrap .query .que ul {margin: 12px 0; margin-left: 20px;}

.nContent {font-size: 18px; line-height: 28px; max-width: 1024px; margin: 0 auto; padding-top: 60px;}
.nContent h1 {font-size: 60px; margin: 60px 0;}
.nContent h2 {font-size: 28px; margin: 28px 0;}
.nContent p {margin: 20px 0;}
.nContent ul {margin-left: 20px;}
.nContent a {color: #0828bb;}

.rightCol .more {padding-top: 20px;}
.rightCol .more a {display: inline-block; font-weight: 600; color: blue;}
.rightCol .article {max-height: 305px; overflow: hidden;}

@media only screen and (max-width: 1280px) {
    .rightCol {width: calc(300px - 4px);}
    .searchResult {width: calc(100% - 300px - 32px - 4px);}
}
@media only screen and (max-width: 980px) {
    .plus .plusDetails .item {font-size: 13px; line-height: normal;}
    footer .left span {font-size: 13px;}
    .searchResult {padding-left: 0}
    .videoHtml .videoList ul li, .videoHtml .videoList ul li:nth-child(5n+1) {width: calc(33.33% - 4px - 20px); margin-left: calc(20px + (20px / 2));}
    .videoHtml .videoList ul li:nth-child(3n+1) {margin-left: 0;}
    
    .rightCol {width: 100%; margin-left: 0; margin-bottom: 32px;}
    .searchResult {width: 100%;}
    footer .left {width: 100%;}
    footer .right {width: 100%; text-align: left; padding-top: 20px;}
    footer .right a:first-child {margin-left: 0;}

    .chatWrap {margin: 20px 0; min-height: calc(100vh - 150px);}
}
@media only screen and (max-width: 880px) {
    /*.popupWrap .slider .slide {height: 54vw;}*/
    .chatWrap {margin: 20px 0; min-height: calc(100vh - 210px);}
    .midSec {padding-top: 160px;}
}
@media only screen and (max-width: 620px) {
    .videoHtml .videoList ul li, .videoHtml .videoList ul li:nth-child(5n+1), .videoHtml .videoList ul li:nth-child(3n+1) {width: 100%; margin-left: 0;}
    .searchResult .item {margin-bottom: 16px;}
    .searchResult .item .icon img {height: 20px;}
    .searchResult .item .icon {width: calc(36px - 4px);}
    .searchResult .item .text {width: calc(100% - 36px - 4px);}
    .searchResult .item .text .link {font-size: 12px; display: block; }
    .searchResult .item .text h2 {font-size: 15px; margin-bottom: 0; line-height: normal;}
    .searchResult .item .text p {font-size: 11px; line-height: 14px;}
    .searchResult .item .result {width: calc(100% - 100px - 12px);}
    .searchResult .rimg, .searchResult .rcat {padding: 0;}
    .searchResult .rcat ul {margin-top: 12px;}
    .searchResult .item .relatedOffers {width: 80px; margin-left: 8px;}
    .searchResult .item .relatedOffers .off .img {height: 100px;}
    .searchResult .item .result {width: calc(100% - 80px - 8px);}
    
    header.search .topSearch {width: 100%; padding-top: 20px;}
    .usernav {position: absolute; top: 12px; right: 12px; width: calc(90% - 12px);}
    .catMenu, .userMenu {right: 0;}
    .searchResult .rimg ul li img {height: 112px;}
    .searchResult .rimg ul li {margin-bottom: 12px;}
    header.search .topSearch .search input[type="text"], .midSec .midSearch .search input[type="text"] {height: 54px; padding: 0 40px 0 20px; font-size: 14px;}
    header.search .topSearch .search {margin-bottom: 12px;}
    header.search .topSearch .cats nav a, .midSec .midSearch .cats nav a {margin-right: 12px; font-size: 13px;}
    header.search .topSearch .search button::after, .midSec .midSearch .search button::after {font-size: 16px;}
    .topSearchBtn {width: 54px;}
    .midSec .midSearch .search button {height: 54px;}
    .midSec .midSearch .search {margin-bottom: 12px;}
    
    .videoHtml h2 {font-size: 20px;}
    .searchResult .rimg h3 {font-size: 18px;}
    
    .midSec .midSearch .logo img {height: 40px;}
    .midSec .midSearch .logo {margin-bottom: 12px;}
    .midSec .midSearch .search input[type="text"] {height: 54px;}
    .midSec .trending .trend {width: calc((100% / 3) - 4px - 4px);}
    .midSec .trending .trend a {padding: 12px 6px;}
    .plus .plusDetails .item {width: calc(50% - 20px - 4px);}
    footer .right a {margin-left: 8px; font-size: 12px;}

    .popupWrap .slider .slide {width: 100%; height: auto;}

    .chatform input[type=text] {padding: 0 22px;}
    .chatWrap .chatResult {height: calc(100% - 64px);}
    .chatform {bottom: 0;}
    .chatWrap .query {font-size: 13px;}

    .usernav a {margin-left: 10px;}
    .midSec {padding-top: 200px;}
  }