.profileMain { width: 100%; display: grid; grid-template-columns: 0.5fr 1.5fr; grid-gap: 25px; } @media (max-width: 992px) { .profileMain { grid-template-columns: 1fr; } } .profileMainSec { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .profileMainSec.profileMainSecSide { position: relative; } .profileMainSec.profileMainSecBody { } .profileMainSecInside { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .profileMainSecInside.profileMainSecInsideSide { position: sticky; top: 15px; } .profileMainSecInside.profileMainSecInsideBody { width: 100%; display: flex; flex-direction: column; grid-gap: 10px; } .profileMainSecInsideSideBox { width: 100%; border-radius: 10px; display: flex; flex-direction: column; grid-gap: 10px; overflow: hidden; } .profileMainSecInsideSideBox.profileMainSecInsideSideBoxAlt { padding: 15px; border: solid 1px rgba(0,0,0,0.1); } .profileMainSecInsideSideBox.profileMainSecInsideSideBoxAlt2 { padding: 15px; background: white; box-shadow: 0 0 8px 0 rgb(0,0,0,0.1); } .profileMainSecInsideSideBoxProfile { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .profileMainSecInsideSideBoxProfileMedia { width: 100%; display: flex; flex-direction: column; grid-gap: 0px; align-items: center; justify-content: center; } .profileMainSecInsideSideBoxProfileMediaBanner { width: 100%; border-radius: 8px; padding-top: 25%; background: rgba(0,0,0,0.1); position: relative; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 6px 0 rgb(0,0,0,0.2); margin-bottom: -30px; } .profileMainSecInsideSideBoxProfileMediaBannerImg { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; object-fit: cover; } .profileMainSecInsideSideBoxProfileMediaPic { transition: ease 0.3s; min-height: 75px; min-width: 75px; max-height: 75px; max-width: 50%; background: rgba(0,0,0,0.1); border-radius: 100%; border: solid 4px white; box-shadow: 0 0 6px 0 rgb(0,0,0,0.25); display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; position: relative; } .profileMainSecInsideSideBoxProfileMediaPic:hover { transform: scale(1.03); } .profileMainSecInsideSideBoxProfileMediaPicImg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; object-fit: cover; width: 100%; height: 100%; } .profileMainSecInsideSideBoxProfileDetails { width: 100%; display: flex; flex-direction: column; grid-gap: 10px; } .profileMainSecInsideSideBoxProfileDetailsNames { width: 100%; display: flex; flex-direction: column; grid-gap: 5px; } .profileMainSecInsideSideBoxProfileDetailsNamesName { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; } .profileMainSecInsideSideBoxProfileDetailsBio { width: 100%; display: flex; flex-direction: column; grid-gap: 5px; } .profileMainSecInsideSideBoxProfileDetailsBioText { font-size: 14px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 4; } .btnMain.profileMainSecInsideSideBoxProfileDetailsBioBtn { padding: 5px 15px; font-size: 14px; background: rgba(0,0,0,0.1); color: rgba(0,0,0,0.5); } .btnMain.profileMainSecInsideSideBoxProfileDetailsBioBtn:hover { background: #ff9900; color: white; } .profileMainSecInsideSideBoxProfileLinks { width: 100%; display: flex; flex-direction: row; grid-gap: 0px; border: solid 1px rgba(0,0,0,0.1); border-radius: 6px; overflow: hidden; flex-wrap: wrap; } .btnMain.profileMainSecInsideSideBoxProfileLinksLink { padding: 6px; font-size: 14px; border-radius: 0px; display: flex; flex-direction: column; justify-content: center; align-items: center; flex-grow: 1; color: rgba(0,0,0,0.5); background: rgba(255,255,255,0); } .btnMain.profileMainSecInsideSideBoxProfileLinksLink:hover { background: #ff9900; color: white; } .profileMainSecInsideSideBoxProfileAction { width: 100%; display: flex; flex-direction: row; grid-gap: 10px; } .btnMain.profileMainSecInsideSideBoxProfileActionBtn { flex-grow: 1; padding: 8px 15px; background: rgba(0,0,0,0.25); color: rgba(0,0,0,0.5); } .btnMain.profileMainSecInsideSideBoxProfileActionBtn:hover { background: rgb(255,153,0); color: rgb(255,255,255); } .btnMain.profileMainSecInsideSideBoxProfileActionBtn.profileMainSecInsideSideBoxProfileActionBtnActive { background: rgb(255,153,0); color: rgb(255,255,255); } .profileMainSecInsideBodyBox { width: 100%; display: flex; flex-direction: column; grid-gap: 15px; } .profileMainSecInsideBodyBoxInfo { width: 100%; display: flex; flex-direction: row; grid-gap: 15px; } .profileMainSecInsideBodyBoxInfoText { display: flex; flex-direction: column; grid-gap: 5px; } .profileMainSecInsideBodyBoxInfoTextHeading { color: rgba(0,0,0,0.65); font-weight: 600; } .profileMainSecInsideBodyBoxInfoTextPara { } .tabsMainMidElement.tabsMainMidElementAlt { background: unset; box-shadow: unset; padding: 0; } .profileMainSecInsideSideBoxProfileDetailsAddresses { width: 100%; display: flex; flex-direction: column; grid-gap: 10px; } .btnMain.profileMainSecInsideSideBoxBtn { background: rgba(0,0,0,0.1); justify-content: start; color: rgba(0,0,0,0.5); } .btnMain.profileMainSecInsideSideBoxBtn:hover { background: rgba(255,153,0,0.9); color: rgb(255,255,255); grid-gap: 15px; } .btnMain.profileMainSecInsideSideBoxBtn.profileMainSecInsideSideBoxBtnActive { background: rgb(255,153,0); color: rgb(255,255,255); } .createStoreProductCardMain { transition: ease 0.4s; border-radius: 8px; background: rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: center; align-items: center; color: rgba(0,0,0,0.5); border: solid 4px rgba(0,0,0,0.1); grid-gap: 15px; padding: 25px; } .createStoreProductCardMain:hover { transform: scale(0.98); border: solid 4px rgb(255,153,0); background: rgb(255,255,255); color: rgb(255,153,0); grid-gap: 10px; } .btnMainIcon.createStoreProductCardMainIcon { font-size: 42px; } .createStoreProductCardMainText { font-size: 24px; font-weight: 700; text-align: center; }