.sm-success{background-color: #4CAF50;} .sm-danger{background-color: #f44336;} .sm-warning{background-color: #ff9800;} .sm-primary{background-color: #2196F3;} .sm-alert {padding: 20px;color: white;} .sm-alert-closebtn {margin-left: 15px;color: white;font-weight: bold;float: right;font-size: 22px;line-height: 20px;cursor: pointer;transition: 0.3s;} .sm-alert-closebtn:hover {color: black;} /* The snackbar - position it at the bottom and in the middle of the screen */ #sm-snackbar { visibility: hidden; /* Hidden by default. Visible on click */ min-width: 250px; /* Set a default minimum width */ margin-left: -125px; /* Divide value of min-width by 2 */ color: #fff; /* White text color */ text-align: center; /* Centered text */ border-radius: 2px; /* Rounded borders */ padding: 16px; /* Padding */ position: fixed; /* Sit on top of the screen */ z-index: 1; /* Add a z-index if needed */ left: 50%; /* Center the snackbar */ bottom: 30px; /* 30px from the bottom */ } /* Show the snackbar when clicking on a button (class added with JavaScript) */ #sm-snackbar.sm-snackbar-show { visibility: visible; /* Show the snackbar */ /* Add animation: Take 0.5 seconds to fade in and out the snackbar.However, delay the fade out process for 2.5 seconds */ -webkit-animation: sm-fadein 0.5s, sm-fadeout 0.5s 2.5s; animation: sm-fadein 0.5s, sm-fadeout 0.5s 2.5s; } /* Animations to fade the snackbar in and out */ @-webkit-keyframes sm-fadein {from {bottom: 0; opacity: 0;}to {bottom: 30px; opacity: 1;}} @keyframes sm-fadein {from {bottom: 0; opacity: 0;}to {bottom: 30px; opacity: 1;}} @-webkit-keyframes sm-fadeout {from {bottom: 30px; opacity: 1;}to {bottom: 0; opacity: 0;}} @keyframes sm-fadeout {from {bottom: 30px; opacity: 1;}to {bottom: 0; opacity: 0;}} /** Favorite Button CSS Start **/ .sm-favorite-1-button { border: 2px solid #c7c7c7; border-radius: 40px; padding: 0.45rem 0.75rem; color: #878787; font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); filter: grayscale(100%); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .sm-favorite-1-button.sm-favorite-1d {color: #ff6e6f;border-color: currentColor;filter: grayscale(0);} .sm-favorite-1-button:hover {border-color: currentColor;} .sm-favorite-1-icon {width: 18px;height: 16px;display: inline-block;position: relative;margin-right: 0.25em;font-size: 1.5rem;background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;background-size: 100%;-webkit-animation: sm-favorite-1-un 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-favorite-1-un 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-favorite-1d .sm-favorite-1-icon {-webkit-animation: sm-favorite-1-un-pulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-favorite-1-un-pulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-favorite-1d .sm-favorite-1-icon [class^=sm-favorite-1-heart-animation-] {background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;background-size: 100%;display: block;position: absolute;top: 0;left: 0;width: 16px;height: 14px;opacity: 0;} .sm-favorite-1d .sm-favorite-1-icon [class^=sm-favorite-1-heart-animation-]::before, .sm-favorite-1d .sm-favorite-1-icon [class^=sm-favorite-1-heart-animation-]::after {content: "";background: inherit;background-size: 100%;width: inherit;height: inherit;display: inherit;position: relative;top: inherit;left: inherit;opacity: 0;} .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-1 {-webkit-animation: sm-favorite-1-heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-favorite-1-heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-1::before, .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-1::after {width: 12px;height: 10px;visibility: hidden;} .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-1::before {opacity: 0.6;-webkit-animation: sm-favorite-1-heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-favorite-1-heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-1::after {-webkit-animation: sm-favorite-1-heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-favorite-1-heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;opacity: 0.75;} .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-2 {-webkit-animation: sm-favorite-1-heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-favorite-1-heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-2::before, .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-2::after {width: 10px;height: 8px;visibility: hidden;} .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-2::before {-webkit-animation: sm-favorite-1-heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-favorite-1-heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;opacity: 0.25;} .sm-favorite-1d .sm-favorite-1-icon .sm-favorite-1-heart-animation-2::after {-webkit-animation: sm-favorite-1-heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-favorite-1-heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;opacity: 0.4;} @-webkit-keyframes sm-favorite-1-un-pulse {0% { transform: scale(1);}50% { transform: scale(1.5);}} @keyframes sm-favorite-1-un-pulse {0% { transform: scale(1);}50% { transform: scale(1.5);}} @-webkit-keyframes sm-favorite-1-un {50% { transform: scale(0.75);}} @keyframes sm-favorite-1-un {50% { transform: scale(0.75);}} @-webkit-keyframes sm-favorite-1-heartFloatMain-1 {0% { opacity: 0; transform: translate(0) rotate(0);}50% { opacity: 1; transform: translate(0, -25px) rotate(-20deg);}} @keyframes sm-favorite-1-heartFloatMain-1 {0% { opacity: 0; transform: translate(0) rotate(0);}50% { opacity: 1; transform: translate(0, -25px) rotate(-20deg);}} @-webkit-keyframes sm-favorite-1-heartFloatMain-2 {0% { opacity: 0; transform: translate(0) rotate(0) scale(0);}50% { opacity: 0.9; transform: translate(-10px, -38px) rotate(25deg) scale(1);}} @keyframes sm-favorite-1-heartFloatMain-2 {0% { opacity: 0; transform: translate(0) rotate(0) scale(0);}50% { opacity: 0.9; transform: translate(-10px, -38px) rotate(25deg) scale(1);}} @-webkit-keyframes sm-favorite-1-heartFloatSub-1 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(13px, -13px) rotate(30deg);}} @keyframes sm-favorite-1-heartFloatSub-1 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(13px, -13px) rotate(30deg);}} @-webkit-keyframes sm-favorite-1-heartFloatSub-2 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(18px, -10px) rotate(55deg);}} @keyframes sm-favorite-1-heartFloatSub-2 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(18px, -10px) rotate(55deg);}} @-webkit-keyframes sm-favorite-1-heartFloatSub-3 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(-10px, -10px) rotate(-40deg);}100% { transform: translate(-50px, 0);}} @keyframes sm-favorite-1-heartFloatSub-3 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(-10px, -10px) rotate(-40deg);}100% { transform: translate(-50px, 0);}} @-webkit-keyframes sm-favorite-1-heartFloatSub-4 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(2px, -18px) rotate(-25deg);}} @keyframes sm-favorite-1-heartFloatSub-4 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(2px, -18px) rotate(-25deg);}} /* Favorite Button CSS Finish */ /** Like Button 1 CSS Start **/ .sm-like-1-button {border: 2px solid #c7c7c7;border-radius: 40px;padding: 0.45rem 0.75rem;color: #878787;font-weight: bold;display: flex;align-items: center;justify-content: center;font-size: 1rem;transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);filter: grayscale(100%);-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} .sm-like-1-button.sm-like-1d {color: #1e87f0;border-color: currentColor;filter: grayscale(0);}.sm-like-1-button:hover {border-color: currentColor;}.sm-like-1-icon {width: 18px;height: 16px;display: inline-block;position: relative;margin-right: 0.25em;font-size: 1.5rem;background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADz0lEQVR4Xu2bXWhURxTH/2fmrlItSYwSAyp775olYnwRokTxwbh3/XwqBIu0WEoeKmIRolKLvimC36ItfSkKQkUffFL8gGwDSiyl+FDSFtPS3fiBIIgFfTHZ3DmyKeqaD9252Y+7mbuve/5n5vzu/87MnmEJhn/I8PoRAggdYDiBsrwCPT1scRQLswqR0bwtgRe1z/C4tZWylXgWJQfQ089zvGnqDoD4ewp8CaYUhHfctSM95QRRcgCpjLeNgR8KLorwY91Tsb1cjig9gLS3mwlHCwbwf+ClhC22EBFr6rTDgwoATNyZtK2z2hVpCgILAMCDhC3sUrsgyAAghGhdE6W7mg9VKzzQAJj5i2TMOq9VkWZwoAGAsMu15QnNmrTCAw2AGHsSMXlMqyLN4BCAJjDt8NSAd4AZ+7WFAKreATcecr01rP4BUG8kgNSAd5oZX/spPqepagfczPAiyaoPBMtIAN0ZdQ3gDX6Lr2oHdGey6wFxfTLFVy2AXPPDs9XvABYbCSCV9nYw4cxki69KB9y+z7MG1ci2N7sYABiUW0du+8lFhCwUP/GE7F1nU2aiHEU9CXZnvFMAdvqZcGk1fAtK7nYX0m+jxykagJ/T3KxI9QFjG5+lLa7g7FkCf5VwrHP5iqIB6E6rqyDeVPB0KhOoALXJdSI3Xg//BkDDzvRcKbMHQbCZ9W6M2uIf1+9Y37i0MjVpj3p/aFg0b4zT4MhC+1re2NV/EcCn2ukAfPvJPLTM/8iPtDIa4s9d2/ppFIC/+wBe4mdG33XaqJvh+8TrZ8hJaQi4kHDkZ6Md8AeAFj+Zv+90UDtD+pFWSMO/uI610mAA+NN15Ijb89cAgxwQAggdEL4C4RoQLoIG7wKMu25Mtpq8DR52HbnXTACMYekJpz1Oj8wEAFx0HbllzM/hxq5+M06CSizP7wwZdRRm5t5kzFo1bkfIBAcwcUfSti6bCmDgmS2aNhN5RgJgoCvpyJMTdoWn+CvwfGhYLNgYp+dGAiDgZMKRXeO1n0zYBTwJ0dTu0ICZAJguuzHRMVHzcco7QAmxam2Ueo0EwOBfk47V9r7W81R2gIISbeNdiJpxDmAccmNy34cuHt46YNe9O2Ba8SHBeN8f3xrF3Nox/4bxk6oYmtx/DPa6jjxSSLJ8AB1gyt2XTStEmB/T3lKDL1c3QAhdZVHj/wNwBUIcdqP0V6GZ37ken/XNv7XTh9R8llnta/Nl8Zl1TQ01c6ZLMbhmcc3DQicw2bhIBEwv8aS9mZ76yaVdqJ9BgqwJAQT56ZRjbqEDykE5yGO8AucuhVCw8XgWAAAAAElFTkSuQmCC") no-repeat center;background-size: 100%;-webkit-animation: sm-like-1-un 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-like-1-un 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-like-1d .sm-like-1-icon {-webkit-animation: sm-like-1-un-pulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-like-1-un-pulse 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-like-1d .sm-like-1-icon [class^=sm-like-1-heart-animation-] {background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADz0lEQVR4Xu2bXWhURxTH/2fmrlItSYwSAyp775olYnwRokTxwbh3/XwqBIu0WEoeKmIRolKLvimC36ItfSkKQkUffFL8gGwDSiyl+FDSFtPS3fiBIIgFfTHZ3DmyKeqaD9252Y+7mbuve/5n5vzu/87MnmEJhn/I8PoRAggdYDiBsrwCPT1scRQLswqR0bwtgRe1z/C4tZWylXgWJQfQ089zvGnqDoD4ewp8CaYUhHfctSM95QRRcgCpjLeNgR8KLorwY91Tsb1cjig9gLS3mwlHCwbwf+ClhC22EBFr6rTDgwoATNyZtK2z2hVpCgILAMCDhC3sUrsgyAAghGhdE6W7mg9VKzzQAJj5i2TMOq9VkWZwoAGAsMu15QnNmrTCAw2AGHsSMXlMqyLN4BCAJjDt8NSAd4AZ+7WFAKreATcecr01rP4BUG8kgNSAd5oZX/spPqepagfczPAiyaoPBMtIAN0ZdQ3gDX6Lr2oHdGey6wFxfTLFVy2AXPPDs9XvABYbCSCV9nYw4cxki69KB9y+z7MG1ci2N7sYABiUW0du+8lFhCwUP/GE7F1nU2aiHEU9CXZnvFMAdvqZcGk1fAtK7nYX0m+jxykagJ/T3KxI9QFjG5+lLa7g7FkCf5VwrHP5iqIB6E6rqyDeVPB0KhOoALXJdSI3Xg//BkDDzvRcKbMHQbCZ9W6M2uIf1+9Y37i0MjVpj3p/aFg0b4zT4MhC+1re2NV/EcCn2ukAfPvJPLTM/8iPtDIa4s9d2/ppFIC/+wBe4mdG33XaqJvh+8TrZ8hJaQi4kHDkZ6Md8AeAFj+Zv+90UDtD+pFWSMO/uI610mAA+NN15Ijb89cAgxwQAggdEL4C4RoQLoIG7wKMu25Mtpq8DR52HbnXTACMYekJpz1Oj8wEAFx0HbllzM/hxq5+M06CSizP7wwZdRRm5t5kzFo1bkfIBAcwcUfSti6bCmDgmS2aNhN5RgJgoCvpyJMTdoWn+CvwfGhYLNgYp+dGAiDgZMKRXeO1n0zYBTwJ0dTu0ICZAJguuzHRMVHzcco7QAmxam2Ueo0EwOBfk47V9r7W81R2gIISbeNdiJpxDmAccmNy34cuHt46YNe9O2Ba8SHBeN8f3xrF3Nox/4bxk6oYmtx/DPa6jjxSSLJ8AB1gyt2XTStEmB/T3lKDL1c3QAhdZVHj/wNwBUIcdqP0V6GZ37ken/XNv7XTh9R8llnta/Nl8Zl1TQ01c6ZLMbhmcc3DQicw2bhIBEwv8aS9mZ76yaVdqJ9BgqwJAQT56ZRjbqEDykE5yGO8AucuhVCw8XgWAAAAAElFTkSuQmCC") no-repeat center;background-size: 100%;display: block;position: absolute;top: 0;left: 0;width: 16px;height: 14px;opacity: 0;} .sm-like-1d .sm-like-1-icon [class^=sm-like-1-heart-animation-]::before, .sm-like-1d .sm-like-1-icon [class^=sm-like-1-heart-animation-]::after {content: "";background: inherit;background-size: 100%;width: inherit;height: inherit;display: inherit;position: relative;top: inherit;left: inherit;opacity: 0;} .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-1 {-webkit-animation: sm-like-1-heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-like-1-heartFloatMain-1 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-1::before, .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-1::after {width: 12px;height: 10px;visibility: hidden;} .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-1::before {opacity: 0.6;-webkit-animation: sm-like-1-heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-like-1-heartFloatSub-1 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-1::after {-webkit-animation: sm-like-1-heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-like-1-heartFloatSub-2 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;opacity: 0.75;} .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-2 {-webkit-animation: sm-like-1-heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-like-1-heartFloatMain-2 1s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;} .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-2::before, .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-2::after {width: 10px;height: 8px;visibility: hidden;} .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-2::before {-webkit-animation: sm-like-1-heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-like-1-heartFloatSub-3 1s 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;opacity: 0.25;} .sm-like-1d .sm-like-1-icon .sm-like-1-heart-animation-2::after {-webkit-animation: sm-like-1-heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;animation: sm-like-1-heartFloatSub-4 1s 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;opacity: 0.4;} @-webkit-keyframes sm-like-1-un-pulse {0% { transform: scale(1);}50% { transform: scale(1.5);}} @keyframes sm-like-1-un-pulse {0% { transform: scale(1);}50% { transform: scale(1.5);}} @-webkit-keyframes sm-like-1-un {50% { transform: scale(0.75);}} @keyframes sm-like-1-un {50% { transform: scale(0.75);}} @-webkit-keyframes sm-like-1-heartFloatMain-1 {0% { opacity: 0; transform: translate(0) rotate(0);}50% { opacity: 1; transform: translate(0, -25px) rotate(-20deg);}} @keyframes sm-like-1-heartFloatMain-1 {0% { opacity: 0; transform: translate(0) rotate(0);}50% { opacity: 1; transform: translate(0, -25px) rotate(-20deg);}} @-webkit-keyframes sm-like-1-heartFloatMain-2 {0% { opacity: 0; transform: translate(0) rotate(0) scale(0);}50% { opacity: 0.9; transform: translate(-10px, -38px) rotate(25deg) scale(1);}} @keyframes sm-like-1-heartFloatMain-2 {0% { opacity: 0; transform: translate(0) rotate(0) scale(0);}50% { opacity: 0.9; transform: translate(-10px, -38px) rotate(25deg) scale(1);}} @-webkit-keyframes sm-like-1-heartFloatSub-1 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(13px, -13px) rotate(30deg);}} @keyframes sm-like-1-heartFloatSub-1 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(13px, -13px) rotate(30deg);}} @-webkit-keyframes sm-like-1-heartFloatSub-2 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(18px, -10px) rotate(55deg);}} @keyframes sm-like-1-heartFloatSub-2 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(18px, -10px) rotate(55deg);}} @-webkit-keyframes sm-like-1-heartFloatSub-3 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(-10px, -10px) rotate(-40deg);}100% { transform: translate(-50px, 0);}} @keyframes sm-like-1-heartFloatSub-3 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(-10px, -10px) rotate(-40deg);}100% { transform: translate(-50px, 0);}} @-webkit-keyframes sm-like-1-heartFloatSub-4 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(2px, -18px) rotate(-25deg);}} @keyframes sm-like-1-heartFloatSub-4 {0% { visibility: hidden; transform: translate(0) rotate(0);}50% { visibility: visible; transform: translate(2px, -18px) rotate(-25deg);}} /* Like Button 1 CSS Finish *//* User Score Panel CSS Start */ .rating {display: flex;width: 100%;justify-content: center;overflow: hidden;flex-direction: row-reverse;height: 150px;position: relative;} .rating-0 {filter: grayscale(100%);} .rating > input {display: none;} .rating > label {cursor: pointer;width: 40px;height: 40px;margin-top: auto;background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");background-repeat: no-repeat;background-position: center;background-size: 76%;transition: 0.3s;} .rating > input:checked ~ label,.rating > input:checked ~ label ~ label {background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");} .rating > input:not(:checked) ~ label:hover,.rating > input:not(:checked) ~ label:hover ~ label {background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");} .emoji-wrapper {width: 100%;text-align: center;height: 100px;overflow: hidden;position: absolute;top: 0;left: 0;} .emoji-wrapper:before,.emoji-wrapper:after {content: "";height: 15px;width: 100%;position: absolute;left: 0;z-index: 1;} .emoji-wrapper:before {top: 0;background: linear-gradient(to bottom, white 0%, white 35%, rgba(255, 255, 255, 0) 100%);} .emoji-wrapper:after {bottom: 0;background: linear-gradient(to top, white 0%, white 35%, rgba(255, 255, 255, 0) 100%);} .emoji {display: flex;flex-direction: column;align-items: center;transition: 0.3s;} .emoji > svg {margin: 15px 0;width: 70px;height: 70px;flex-shrink: 0;} #rating-1:checked ~ .emoji-wrapper > .emoji {transform: translateY(-100px);} #rating-2:checked ~ .emoji-wrapper > .emoji {transform: translateY(-200px);} #rating-3:checked ~ .emoji-wrapper > .emoji {transform: translateY(-300px);} #rating-4:checked ~ .emoji-wrapper > .emoji {transform: translateY(-400px);} #rating-5:checked ~ .emoji-wrapper > .emoji {transform: translateY(-500px);} /* User Score Panel CSS Finish */ /* Language Select CSS Start */ .sm-lang-dropdown-nav {display: inline;} .sm-lang-dropdown-nav ul {margin: 0;padding: 0;list-style: none;position: relative;display: inline-block;} .sm-lang-dropdown-nav li {cursor: pointer;padding-bottom: 10px;} .sm-lang-dropdown-nav li ul {display: none;} .sm-lang-dropdown-nav li:hover ul {position: absolute;top: 29px;right: -15px;display: block;background: #fff;width: 120px;padding-top: 0px;z-index: 1;border-radius: 5px;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);} .sm-lang-dropdown-nav li:hover .triangle {position: absolute;top: 15px;right: -10px;z-index: 10;height: 14px;overflow: hidden;width: 30px;background: transparent;} .sm-lang-dropdown-nav li:hover .triangle:after {content: "";display: block;z-index: 20;width: 15px;transform: rotate(45deg) transm-lang-dropdownateY(0px) transm-lang-dropdownatex(10px);height: 15px;background: #fff;border-radius: 2px 0px 0px 0px;box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);} .sm-lang-dropdown-nav li ul li {position: relative;text-align: left;background: transparent;padding: 15px 15px;padding-bottom: 0;z-index: 2;font-size: 15px;color: #3c3c3c;} .sm-lang-dropdown-nav li ul li:last-of-type {padding-bottom: 15px;} .sm-lang-dropdown-nav li ul li span {padding-left: 5px;} .sm-lang-dropdown-nav li ul li span:hover, .sm-lang-dropdown-nav li ul li span.active {color: #146c78;} .sm-lang-dropdown-flag {display: inline-block;box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);width: 15px;height: 15px;background: #aaa;border-radius: 50%;position: relative;top: 2px;overflow: hidden;} /* Language Select CSS Finish */ /* Default Menu CSS Start */ #sm-default_nav_wrap{margin-top:15px} #sm-default_nav_wrap ul{list-style:none;position:relative;float:left;margin:0;padding:0} #sm-default_nav_wrap ul a{display:block;color:#333;text-decoration:none;font-weight:700;font-size:12px;line-height:32px;padding:0 15px;font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif} #sm-default_nav_wrap ul li{position:relative;float:left;margin:0;padding:0} #sm-default_nav_wrap ul li.current-menu-item{background:#ddd} #sm-default_nav_wrap ul li:hover{background:#f6f6f6} #sm-default_nav_wrap ul ul{display:none;position:absolute;top:100%;left:0;background:#fff;padding:0} #sm-default_nav_wrap ul ul li{float:none;width:200px} #sm-default_nav_wrap ul ul a{line-height:120%;padding:10px 15px} #sm-default_nav_wrap ul ul ul{top:0;left:100%} #sm-default_nav_wrap ul li:hover > ul{display:block} /* Default Menu CSS Finish */ /* Bootstrap 4 Menu Component Start */ @media (min-width: 992px){ .sm-bootstrap-dropdown-menu .dropdown-toggle:after{ border-top: .3em solid transparent; border-right: 0; border-bottom: .3em solid transparent; border-left: .3em solid;} .sm-bootstrap-dropdown-menu .sm-bootstrap-dropdown-menu{ margin-left:0; margin-right: 0;} .sm-bootstrap-dropdown-menu li{ position: relative;} .sm-bootstrap-nav-item .sm-bootstrap-submenu{ display: none; position: absolute; left:100%; top:-7px;} .sm-bootstrap-nav-item .sm-bootstrap-submenu-left{ right:100%; left:auto;} .sm-bootstrap-dropdown-menu > li:hover{ background-color: #f1f1f1 } .sm-bootstrap-dropdown-menu > li:hover > .sm-bootstrap-submenu{ display: block;}} /* Bootstrap 4 Menu Component Finsih*/ /* User Social Buttons */ .sm-user-fa {padding: 10px;font-size: 30px;width: 50px;text-align: center;text-decoration: none;margin: 5px 2px;border-radius: 50%;} .sm-user-fa:hover {opacity: 0.7;} .sm-user-fa-facebook {background: #3B5998;color: white;} .sm-user-fa-twitter {background: #55ACEE;color: white;} .sm-user-fa-google {background: #dd4b39;color: white;} .sm-user-fa-linkedin {background: #007bb5;color: white;} .sm-user-fa-youtube {background: #bb0000;color: white;} .sm-user-fa-instagram {background: #125688;color: white;} .sm-user-fa-pinterest {background: #cb2027;color: white;} .sm-user-fa-snapchat-ghost {background: #fffc00;color: white;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;} .sm-user-fa-skype {background: #00aff0;color: white;} .sm-user-fa-android {background: #a4c639;color: white;} .sm-user-fa-dribbble {background: #ea4c89;color: white;} .sm-user-fa-vimeo {background: #45bbff;color: white;} .sm-user-fa-tumblr {background: #2c4762;color: white;} .sm-user-fa-vine {background: #00b489;color: white;} .sm-user-fa-foursquare {background: #45bbff;color: white;} .sm-user-fa-stumbleupon {background: #eb4924;color: white;} .sm-user-fa-flickr {background: #f40083;color: white;} .sm-user-fa-yahoo {background: #430297;color: white;} .sm-user-fa-soundcloud {background: #ff5500;color: white;} .sm-user-fa-reddit {background: #ff5700;color: white;} .sm-user-fa-rss {background: #ff6600;color: white;}