@import url("https://fonts.googleapis.com/css2?family=Monoton&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); body {background-color: #F9FAFC; padding: 0; margin: 0; font-family: 'Rubik', sans-serif; letter-spacing: 0.03em; font-size: 14px; color: #6F6F87; } *:focus {outline: inherit !important; } a {text-decoration: none; color: inherit; } a:hover {text-decoration: none; color: inherit; } hr {margin-top: 40px; margin-bottom: 30px; } ul {padding: 0; margin: 0; } ul li {list-style-type: none; } .sb-text {color: #6F6F87; margin: 0; font-size: 15px; } .sb-text.sb-text-xs {font-size: 12px; } .sb-text.sb-text-sm {font-size: 14px; } .sb-text.sb-text-lg {font-size: 16px; } .sb-suptitle {display: inline-block; padding: 10px 25px; background-color: #F2F3F5; font-size: 15px; border-radius: 0.3rem; font-weight: 600; color: #8b789d; } .sb-h1, .sb-h2, .sb-h3, .sb-h4, .sb-h5, .sb-h6, h1, h2, h3, h4, h5, h6 {font-weight: 600; margin: 0; padding: 0; } .sb-h1, h1 {line-height: 100%; font-size: 40px; letter-spacing: -3px; } .sb-h1 span, h1 span {background-color: #F9FAFC; } .sb-h2, h2 {line-height: 110%; font-size: 35px; text-transform: uppercase; letter-spacing: -2px; color: #231e41; } .sb-h2 span, h2 span {background-color: #F9FAFC; padding: 0 10px; color: #8b789d; font-weight: 300; } .sb-h3, h3 {line-height: 120%; font-size: 17px; letter-spacing: -1px; } .sb-h4, h4 {line-height: 120%; font-size: 16px; text-transform: uppercase; letter-spacing: 0; } .sb-h5, h5 {font-size: 14px; letter-spacing: 0; } .sb-title-lg {font-size: 100px; } .sb-ib-title-frame {display: flex; justify-content: space-between; align-items: center; } .sb-ib-title-frame i {color: #6F6F87; font-size: 10px; opacity: 0.5; } @media (max-width: 768px) {.sb-h1, h1 {font-size: 54px; letter-spacing: -2px; } .sb-h2, h2 {font-size: 36px; letter-spacing: -1px; } .sb-h3, h3 {font-size: 20px; letter-spacing: -1px; } .sb-title-lg {font-size: 68px; } } @media (max-width: 450px) {.sb-h1, h1 {font-size: 30px; } .sb-h2, h2 {font-size: 26px; text-align: center; margin-bottom: 5vw; } .sb-h3, h3 {font-size: 18px; } } .sb-cate-title {font-size: 28px; letter-spacing: -1px; } .sb-signature {width: 160px; } .sb-404 {display: block; color: #8b789d; font-size: 56px; font-family: 'Monoton', cursive; margin-bottom: 10px; } /*************************** group title ***************************/ .sb-group-title {position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; } .sb-group-title .sb-left {width: 65%; } .sb-group-title .sb-right {width: 50%; display: flex; justify-content: flex-end; } @media (max-width: 768px) {.sb-group-title {flex-direction: column; } .sb-group-title .sb-left {width: 100%; } .sb-group-title .sb-right {width: 100%; justify-content: space-between; } } /*************************** list ***************************/ .sb-list li {display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: 15px 0; border-bottom: solid 1px #F2F3F5; } .sb-list li b {cursor: pointer; font-weight: 400; } .sb-list li b a {display: block; text-decoration: none; color: inherit; transition: 0.3s ease-in-out; } .sb-list li b a:hover {transform: translateX(10px); } .sb-list li span {font-size: 12px; color: #6F6F87; } .sb-list li span.sb-number {background-color: #F2F3F5; padding: 2px 5px; color: #231E41; } .sb-list li:first-child {border-top: solid 1px #F2F3F5; } /*************************** instagram ***************************/ .sb-instagram {display: flex; flex-wrap: wrap; margin-left: -5px; margin-right: -5px; } .sb-instagram li {padding: 5px; width: 33.33%; } .sb-instagram li a {position: relative; overflow: hidden; display: block; width: 100%; padding-bottom: 100%; } .sb-instagram li a img {position: absolute; object-fit: cover; object-position: center; top: 0; left: 0; width: 100%; height: 100%; } /*************************** keywords ***************************/ .sb-keywords {display: flex; flex-wrap: wrap; } .sb-keywords li {padding-right: 5px; padding-bottom: 5px; } .sb-keywords li a {display: block; font-size: 14px; background-color: #8b789d; padding: 2px 5px; color: #231E41; transition: 0.3s ease-in-out; } .sb-keywords li a:hover {position: relative; filter: brightness(110%); } /*************************** slider navigation ***************************/ .sb-slider-nav {height: 55px; display: flex; justify-content: space-between; align-items: center; width: 115px; margin-right: 15px; } .sb-slider-nav .sb-next-btn, .sb-slider-nav .sb-prev-btn {height: 50px; width: 50px; font-size: 12px; border-radius: 50%; border: solid 2px #231E41; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.3s ease-in-out; } .sb-slider-nav .sb-next-btn.swiper-button-disabled, .sb-slider-nav .sb-prev-btn.swiper-button-disabled {opacity: 0.2; } .sb-slider-nav .sb-next-btn:focus, .sb-slider-nav .sb-prev-btn:focus {outline: inherit; } /*************************** breadcrumbs ***************************/ .sb-breadcrumbs {border: solid 2px #FFFFFF; position: relative; overflow: hidden; max-width: 100%; background-color: #8b789d; display: inline-flex; align-items: center; font-weight: 500; font-size: 14px; padding: 0 20px; height: 55px; transition: 0.3s ease-in-out; } .sb-breadcrumbs li {white-space: nowrap; display: flex; letter-spacing: 0; } .sb-breadcrumbs li:after {content: "/"; } .sb-breadcrumbs li:last-child:after {display: none; } .sb-breadcrumbs li:last-child a {cursor: not-allowed; opacity: 1; } .sb-breadcrumbs li a {padding: 0 10px; opacity: 0.4; transition: 0.3s ease-in-out; } .sb-breadcrumbs li a:hover {opacity: 1; } /*************************** badge ***************************/ .sb-badge {position: absolute; z-index: 2; top: 15px; left: 15px; background-color: #8b789d; padding: 3px 10px; font-size: 14px; display: flex; align-items: center; } .sb-badge i {font-size: 11px; margin-right: 5px; } .sb-badge.sb-vegan {background-color: #bf38bb; color: #ffff; border-radius: 0.3rem; } .sb-badge.sb-hot {background-color: #FF5252; } /*************************** stars ***************************/ .sb-stars {padding: 0; display: flex; } .sb-stars li {margin-right: 5px; color: #8b789d; font-size: 14px; } .sb-stars li.sb-empty {color: #F2F3F5; filter: brightness(95%); } .sb-stars li span {font-size: 12px; color: #6F6F87; white-space: nowrap; } .sb-stars.sb-unrated li {color: #FFFFFF !important; text-shadow: 0 0 1px #6F6F87; } .sb-stars.sb-unrated li span {text-shadow: none; } /*************************** social icons ***************************/ .sb-social {width: 33.333%; display: flex; justify-content: center; } .sb-social li {margin-right: 15px; cursor: pointer; } .sb-social li a {transition: 0.3s ease-in-out; font-size: 14px; color: #231e41; cursor: pointer; } .sb-social li a:hover {color: #8b789d; } .sb-social li:last-child {margin-right: 0; } /*************************** buttons ***************************/ .sb-btn {opacity: 1; border: none; padding: 0 5px; cursor: pointer; position: relative; display: inline-flex; align-items: center; transform: scale(1); height: 55px; letter-spacing: 0; font-size: 14px; margin-right: 10px; color: #fff; border-radius: 3rem; margin-bottom: 10px; background-color: #8b789d; transition: 0.3s ease-in-out; } .sb-btn:hove {background-color: #231e41; } .sb-btn .sb-icon {border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; position: relative; padding: 0 !important; margin: 0; width: 55px; height: 55px; } .sb-btn .sb-icon img {width: 22px; } .sb-btn span {white-space: nowrap; line-height: 55px; display: inline-block; padding: 0 20px 0 0; font-weight: 500; } .sb-btn:hover {color: #fff; filter: brightness(110%); } .sb-btn.sb-btn-#6F6F87 {background-color: #F9FAFC; box-shadow: 0 0 0 2px #FFFFFF; } .sb-btn.sb-btn-#6F6F87:hover {filter: brightness(102%); } .sb-btn.sb-btn-2 {padding: 0; background-color: #231e41; padding-right: 2vw; box-shadow: none; } .sb-btn.sb-btn-2:hover {background-color: #8b789d; } .sb-btn.sb-btn-2 .sb-icon {transform: scale(0.95); background-color: #F2F3F5; box-shadow: 0 0 0 2px #ffffff; } .sb-btn.sb-btn-2 span {padding: 0 0 0 15px; } .sb-btn.sb-btn-2.sb-btn-#6F6F87 {background-color: #231e41; padding-right: 21px; } .sb-btn.sb-btn-2.sb-btn-#6F6F87 .sb-icon {background-color: #F2F3F5; box-shadow: 0 0 0 2px #FFFFFF; } .sb-btn.sb-btn-2.sb-btn-#6F6F87:hover {filter: brightness(102%); } .sb-btn.sb-btn-icon .sb-icon {background-color: #8b789d; transform: scale(0.95); } .sb-btn.sb-btn-icon.sb-btn-#6F6F87 {background-color: transparent; } .sb-btn.sb-btn-icon.sb-btn-#6F6F87 .sb-icon {background-color: #F2F3F5; } .sb-btn.sb-btn-icon.sb-btn-#6F6F87:hover {filter: brightness(102%); } .sb-btn.sb-btn-text {background-color: #8b789d; } .sb-btn.sb-btn-text .sb-icon {background-color: #8b789d; transform: scale(0.95); } .sb-btn.sb-btn-text span {padding: 0 20px; } .sb-btn.sb-btn-text.sb-btn-#6F6F87 {background-color: #F2F3F5; } .sb-btn.sb-btn-text.sb-btn-#6F6F87 .sb-icon {background-color: #F2F3F5; } .sb-btn.sb-btn-text.sb-btn-#6F6F87:hover {filter: brightness(102%); } .sb-btn:focus {outline: inherit; } @media (max-width: 340px) {.sb-btn {margin-right: 0; margin-bottom: 10px; } } /*************************** mobile menu button ***************************/ .sb-info-btn, .sb-menu-btn {margin-left: 15px; padding-top: 20px; width: 30px; height: 55px; cursor: pointer; display: none; justify-content: center; text-align: center; transition: 0.3s ease-in-out; } .sb-info-btn span, .sb-info-btn span:after, .sb-info-btn span:before, .sb-menu-btn span, .sb-menu-btn span:after, .sb-menu-btn span:before {content: ""; display: block; width: 20px; height: 2px; border-radius: 1px; background: #844060; backface-visibility: hidden; transition: 0.3s ease-in-out; } .sb-info-btn span, .sb-menu-btn span {position: relative; margin: 7px 0 0; } .sb-info-btn span:after, .sb-info-btn span:before, .sb-menu-btn span:after, .sb-menu-btn span:before {position: absolute; } .sb-info-btn span:before, .sb-menu-btn span:before {top: -7px; } .sb-info-btn span:after, .sb-menu-btn span:after {top: 7px; } .sb-info-btn.sb-active span, .sb-menu-btn.sb-active span {transform: rotate(45deg); } .sb-info-btn.sb-active span:before, .sb-menu-btn.sb-active span:before {transform: translate(0px, 7px) rotate(-90deg); } .sb-info-btn.sb-active span:after, .sb-menu-btn.sb-active span:after {transform: translate(0px, -7px) rotate(-90deg); } .sb-info-btn {margin-left: 10px; width: 20px; display: flex !important; } .sb-info-btn span, .sb-info-btn span:after, .sb-info-btn span:before {width: 3px; height: 3px; border-radius: 50%; } .sb-info-btn.sb-active span, .sb-info-btn.sb-active span:after, .sb-info-btn.sb-active span:before {width: 20px; height: 2px; border-radius: 1px; } @media (max-width: 992px) {.sb-menu-btn {display: flex; } } /*************************** click effect ***************************/ .sb-click-effect {opacity: 0; pointer-events: none; position: absolute; margin-top: -2px; margin-left: -2px; z-index: 999999999; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #FFFFFF; } .sb-click-effect:after {opacity: 0; content: ""; position: absolute; width: 40px; height: 40px; top: -1px; left: -1px; border-radius: 50%; border: 10px solid #FFFFFF; mix-blend-mode: difference; } .sb-click-effect.sb-click {animation: ce-1 0.6s alternate; } .sb-click-effect.sb-click:after {opacity: 1; animation: ce-2 0.6s alternate; } /*************************** page transitions ***************************/ .sb-load {border-radius: 50%; background-color: #8b789d; width: 80vw; height: 80vw; left: 50%; bottom: 0; margin-bottom: -40vw; pointer-events: none; position: fixed; margin-left: -40vw; transform: scale(0); z-index: 9; opacity: 0.9; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.05); transition: 0.6s ease-in-out; } html.is-animating .sb-load {top: 0; left: 50%; margin-top: -40vw; bottom: auto; transform: scale(2); pointer-events: all; } .sb-transition-fade {transition: 0.6s ease-in-out; background: #fbe7ff; opacity: 1; } html.is-animating .sb-transition-fade {opacity: 0; } .sb-menu-transition {opacity: 1; transition: 0.1s ease-in-out; } html.is-animating .sb-menu-transition {opacity: 0.999; } html.is-animating .sb-menu-transition .sb-navigation li a:before {transform: scale(0); } html.is-animating .sb-menu-transition .sb-navigation li ul {opacity: 0; transform: translateY(10px); } @media (max-width: 992px) {html.is-animating .sb-load {transform: scale(3); } html.is-animating .sb-menu-transition .sb-navigation {transform: translateY(30px); opacity: 0; } } @media (max-width: 768px) {html.is-animating .sb-load {transform: scale(6.5); } } /*************************** settings ***************************/ .container {position: relative; z-index: 2; } @media (max-width: 768px) {.container {padding: 0 30px; } .swiper-container {overflow: visible; } } ::-webkit-scrollbar {width: 5px; } ::-webkit-scrollbar-track {background: #F2F3F5; } ::-webkit-scrollbar-thumb {background: #8b789d; border-radius: 2px; } ::-webkit-scrollbar-thumb:hover {-webkit-filter: brightness(110%); filter: brightness(110%); } .sb-about-text, .sb-blog-list, .sb-features, .sb-popular, .sb-reviews, .sb-short-menu, .sb-team {position: relative; } /*************************** animations ***************************/ @keyframes addToCart {0% {transform: scale(1); } 50% {transform: scale(0); } 0% {transform: scale(1); } } @keyframes anima1 {0% {transform: translateY(0) scale(1); } 50% {transform: translateY(-5px) scale(1.05); } 0% {transform: translateY(0) scale(1); } } @keyframes anima2 {0% {transform: translateY(0) scale(1) rotate(0); } 25% {transform: translateY(-5px) scale(1.1) rotate(-5deg); } 75% {transform: translateY(-5px) scale(1.1) rotate(5deg); } 0% {transform: translateY(0) scale(1) rotate(0); } } @keyframes anima3 {0% {transform: translateY(0); } 25% {transform: translateY(-5px); } 75% {transform: translateY(5px); } 0% {transform: translateY(0); } } @keyframes anima4 {0% {margin-top: 0; } 50% {margin-top: -5px; } 0% {margin-top: 0; } } @keyframes ce-1 {0% {transform: scale(1); opacity: 0; } 50% {transform: scale(1.7); opacity: 0.8; } 100% {transform: scale(1); opacity: 0; } } @keyframes ce-2 {0% {transform: scale(1); opacity: 0; } 50% {transform: scale(0.4); opacity: 0.8; } 100% {transform: scale(1); opacity: 0; } } @keyframes zoom {0% {transform: scale(1); } 50% {transform: scale(1.2); } 100% {transform: scale(1); } } @keyframes message {0% {opacity: 0; transform: translateX(30px); } 100% {opacity: 1; transform: translateX(0); } } @keyframes marker {0% {transform: scale(1.4) translateY(0); } 50% {transform: scale(1.4) translateY(-10px); } 0% {transform: scale(1.4) translateY(0); } } /*************************** spaces ***************************/ .sb-mb-90 {margin-bottom: 90px !important; } .sb-mb-60 {margin-bottom: 30px !important; } .sb-mb-40 {margin-bottom: 40px !important; } .sb-mb-30 {margin-bottom: 30px !important; } .sb-mb-25 {margin-bottom: 25px !important; } .sb-mb-15 {margin-bottom: 15px !important; } .sb-mb-10 {margin-bottom: 10px !important; } .sb-mb-5 {margin-bottom: 5px !important; } .sb-p-210-90 {padding-top: 210px; padding-bottom: 90px; } .sb-p-90-90 {padding-top: 90px !important; padding-bottom: 90px !important; } .sb-p-90-60 {padding-top: 90px !important; padding-bottom: 60px !important; } .sb-p-90-0 {padding-top: 40px !important; } .sb-p-0-90 {padding-bottom: 90px !important; } .sb-p-60-60 {padding-top: 90px !important; padding-bottom: 90px !important; } .sb-p-90-30 {padding-top: 90px !important; padding-bottom: 30px !important; } .sb-p-30-30 {padding-top: 30px !important; padding-bottom: 30px !important; } .sb-p-0-30 {padding-bottom: 30px; } .sb-p-60-0 {padding-top: 60px !important; } .sb-p-0-60 {padding-bottom: 60px !important; } .sb-p-60-30 {padding-top: 60px; padding-bottom: 30px; } .sb-m-0 {margin: 0 !important; } /*************************** grid ***************************/ .sb-masonry-grid {width: calc(100% + 30px); display: flex; flex-wrap: wrap; justify-content: flex-start; margin-left: -15px; margin-right: -15px; } .sb-masonry-grid .sb-grid-item {padding: 0 15px; width: 100%; } .sb-masonry-grid .sb-grid-item.sb-item-25 {width: 25%; padding: 0 15px; } .sb-masonry-grid .sb-grid-item.sb-item-33 {width: 33.333%; padding: 0 15px; } .sb-masonry-grid .sb-grid-item.sb-item-50 {width: 50%; padding: 0 15px; } .grid-sizer {width: 100%; } @media (max-width: 992px) {.sb-masonry-grid .sb-grid-item.sb-item-25 {width: 33.333%; } .sb-masonry-grid .sb-grid-item.sb-item-33 {width: 50%; } .sb-masonry-grid .sb-grid-item.sb-item-50 {width: 50%; } } @media (max-width: 768px) {.sb-masonry-grid .sb-grid-item.sb-item-25 {width: 100%; } .sb-masonry-grid .sb-grid-item.sb-item-33 {width: 100%; } .sb-masonry-grid .sb-grid-item.sb-item-50 {width: 100%; } } /*************************** wrapper ***************************/ .sb-app {position: relative; overflow: hidden; background-color: #FFFFFF; } /*************************** top bar ***************************/ .sb-top-bar-frame {width: 100%; position: fixed; z-index: 9999; top: 0; left: 0; right: 0; border-bottom: solid 1px #F2F3F5; border-top: solid 1px #F2F3F5; } .sb-top-bar-frame .container {padding: 0 !important; position: static !important; } .sb-top-bar-frame .sb-top-bar-bg {position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .sb-top-bar-frame .sb-top-bar {padding: 0 15px; position: relative; height: 120px; width: 100%; display: flex; justify-content: space-between; align-items: center; transition: 0.3s ease-in-out; } .sb-top-bar-frame .sb-top-bar .sb-logo-frame {display: flex; align-items: center; padding: 16px 15px 13px 16px; margin-left: -2vw; width: 136px; transition: 0.3s ease-in-out; } .sb-top-bar-frame .sb-top-bar .sb-logo-frame img {width: 100%; } .sb-top-bar-frame .sb-top-bar .sb-logo-frame:hover {filter: brightness(110%); } .sb-top-bar-frame .sb-top-bar .sb-right-side {width: 71%; display: flex; justify-content: flex-end; } .sb-top-bar-frame .sb-top-bar .sb-right-side .sb-buttons-frame {display: flex; justify-content: flex-end; } .sb-top-bar-frame.sb-scroll {box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); } .sb-top-bar-frame.sb-scroll .sb-top-bar {height: 90px; } @media (max-width: 992px) {.sb-top-bar-frame .sb-top-bar {height: 90px; } } @media (max-width: 768px) {.sb-top-bar-frame .sb-top-bar {padding: 0 30px; } } /*************************** navigation ***************************/ nav {width: 100%; margin-right: 15px; display: flex; justify-content: space-between; align-items: center; } nav .sb-navigation {display: flex; justify-content: center; align-items: center; } nav .sb-navigation::-webkit-scrollbar {display: none; } nav .sb-navigation li {display: flex; align-items: center; position: relative; } nav .sb-navigation li a {position: relative; padding: 0 30px; display: inline-block; font-weight: 600; text-transform: uppercase; height: 100%; color: #8b789d; font-size: 14px; transition: 0.3s ease-in-out; cursor: pointer; } nav .sb-navigation li a:hover {color: #231e41!important; } nav .sb-navigation li a:after, nav .sb-navigation li a:before {content: ''; position: absolute; top: 50%; left: 15px; margin-top: -4px; height: 8px; width: 8px; border-radius: 50%; background-color: #8b789d; transform: scale(0); } nav .sb-navigation li a:after {left: auto; right: 15px; } nav .sb-navigation li a:hover {color: #8b789d; } nav .sb-navigation li.sb-active>a:before {transform: scale(1); transition: 0.3s ease-in-out; } nav .sb-navigation li ul {min-width: 120px; transform: translateY(10px); opacity: 0; pointer-events: none; padding: 30px 0 10px; position: absolute; top: 70.5px; left: 0; border: solid 1px #F2F3F5; background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: 0.3s ease-in-out; display: grid; grid-template-columns: repeat(2, 1pr); grid-template-rows: repeat(4, auto); grid-auto-flow: column; } nav .sb-navigation li ul li {display: block; position: relative; white-space: nowrap; width: 100%; margin-bottom: 30px; height: 20px; } nav .sb-navigation li ul li a {width: 100%; line-height: 20px; } nav .sb-navigation li ul:before {content: ''; height: 50px; width: 100%; top: -50px; position: absolute; } nav .sb-navigation li:hover ul {transform: translateY(0); opacity: 1; pointer-events: all; } .sb-top-bar-frame.sb-scroll nav .sb-navigation li ul {box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); top: 55.5px; } .sb-top-bar-frame.sb-scroll nav .sb-navigation li ul:before {height: 35px; top: -35px; } @media (max-width: 992px) {nav .sb-navigation {padding-top: 30px; box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.05); border-top: solid 1px #F2F3F5; position: absolute; top: 90px; opacity: 0; transform: translateY(30px); pointer-events: none; left: 0; width: 100%; display: block; height: calc(100vh - 80px); overflow: scroll; background-color: rgba(255, 255, 255, 0.92); transition: 0.3s ease-in-out; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } nav .sb-navigation li {text-align: center; width: 100%; height: auto; display: block; } nav .sb-navigation li a {line-height: 20px; margin-bottom: 30px; } nav .sb-navigation li a:hover {color: #231E41; } nav .sb-navigation li.sb-active>a:after {transform: scale(1); } nav .sb-navigation li ul {box-shadow: none !important; border: none; background-color: #8b789d; opacity: 0; max-height: 0; overflow: hidden; padding: 0; transform: none; opacity: 1; pointer-events: all; position: relative; top: 0 !important; left: 0; display: block; } nav .sb-navigation li ul li {text-align: center; } nav .sb-navigation li ul li a {line-height: 20px; height: 20px; } nav .sb-navigation li:hover ul {padding-top: 30px; opacity: 1; max-height: 750px; margin-bottom: 30px; } nav .sb-navigation.sb-active {opacity: 1; transform: translateY(0); pointer-events: all; } } /*************************** footer ***************************/ footer {position: relative; background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } footer .sb-footer-frame {display: flex; justify-content: space-between; align-items: center; padding: 30px 0; } footer .sb-footer-frame .sb-logo-frame {width: 33.333%; display: flex; margin-left: -2vw; padding: 0px 15px 13px 16px; align-items: center; transition: 0.3s ease-in-out; } footer .sb-footer-frame .sb-logo-frame img {width: 115px; } footer .sb-footer-frame .sb-copy {text-align: right; width: 33.333%; font-size: 12px; color: #6F6F87; } @media (max-width: 992px) {footer .sb-footer-frame {padding: 30px 0; height: auto; flex-direction: column; } footer .sb-footer-frame .sb-logo-frame {width: 100%; justify-content: center; margin-bottom: 30px; } footer .sb-footer-frame .sb-social {width: 100%; margin-bottom: 30px; } footer .sb-footer-frame .sb-copy {width: 100%; text-align: center; } } /*************************** info bar ***************************/ .sb-info-bar {border-top: solid 1px #F2F3F5; top: 121px; right: 0; height: calc(100vh - 120px); width: 100%; max-width: 403px; position: absolute; transform: translateX(100%); background-color: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: -1px 1px 3px 0 rgba(0, 0, 0, 0.05); border-left: solid 1px #F2F3F5; transition: 0.4s ease-in-out; } .sb-info-bar.sb-active {transform: translateX(0); } .sb-info-bar.sb-scroll {top: 91px; height: calc(100vh - 91px); } .sb-info-bar .sb-infobar-content {position: relative; padding: 60px 60px 120px; height: 100%; overflow: scroll; } .sb-info-bar .sb-infobar-content::-webkit-scrollbar {display: none; } .sb-info-bar .sb-info-bar-footer {border-top: solid 1px #F2F3F5; background-color: #FFFFFF; position: absolute; bottom: 0; left: 0; width: 100%; padding: 30px; display: flex; justify-content: center; } @media (max-width: 992px) {.sb-info-bar {top: 90px; height: calc(100vh - 90px); } .sb-info-bar .sb-infobar-content {padding: 30px 30px 120px; } } /*************************** banner ***************************/ .sb-banner.sb-banner-with-bg {position: relative; overflow: hidden; } .sb-banner.sb-banner-with-bg .sb-bg-banner {position: absolute; top: 0; height: 100vh; width: 100%; } .sb-banner.sb-banner-with-bg .sb-bg-banner img {position: absolute; top: 0; right: 0; width: 70%; height: 100%; object-fit: cover; object-position: left; animation: zoom 40s infinite ease-in-out; } .sb-banner .sb-main-title-frame {padding-top: 7vh; display: flex; align-items: center; height: 100%; } .sb-banner .sb-main-title-frame .sb-main-title {width: 100%; } .sb-banner.sb-banner-sm .sb-main-title-frame {height: auto; padding: 210px 0 90px; } .sb-banner.sb-banner-xs .sb-main-title-frame {height: auto; padding: 210px 0 90px; } .sb-banner.sb-banner-xs .sb-main-title-frame .sb-main-title {display: flex; justify-content: space-between; align-items: center; } .sb-banner.sb-banner-color {background-color: #F9FAFC; border-left: solid 30px #FFFFFF; border-right: solid 30px #FFFFFF; } @media (max-width: 992px) {.sb-banner.sb-banner-with-bg {position: relative; overflow: hidden; padding-bottom: 30vh; } .sb-banner.sb-banner-with-bg .sb-bg-banner {position: absolute; top: auto; bottom: 0; left: 0; right: 0; height: 100vh; width: 100vw; } .sb-banner.sb-banner-with-bg .sb-bg-banner img {transform: rotate(90deg); position: absolute; right: 0; left: 0; right: auto; top: 0; height: 150%; width: 100vh; object-fit: cover; object-position: left; } .sb-banner .sb-main-title-frame {height: auto; padding: 110px 0 30px; } .sb-banner .sb-main-title-frame .sb-main-title {text-align: center; } .sb-banner.sb-banner-sm .sb-main-title-frame {height: auto; padding: 150px 0 60px; } .sb-banner.sb-banner-xs .sb-main-title-frame {height: auto; padding: 150px 0 60px; } .sb-banner.sb-banner-xs .sb-main-title-frame .sb-main-title {flex-direction: column; } .sb-banner.sb-banner-xs .sb-main-title-frame .sb-main-title h1 {margin-bottom: 30px; } .sb-banner.sb-banner-color {background-color: #F9FAFC; border: none; } } @media (max-width: 500px) {.sb-banner.sb-banner-with-bg .sb-bg-banner img {height: 110%; } } /*************************** features ***************************/ .sb-features-item {display: flex; position: relative; z-index: 2; } .sb-features-item .sb-number {min-width: 62px; margin-right: 30px; font-family: 'Monoton', cursive; color: #8b789d; font-size: 42px; line-height: 36px; } .sb-features-item.sb-features-item-sm {flex-direction: column; } .sb-features-item.sb-features-item-sm .sb-number {min-width: 30px; margin-right: 15px; font-size: 22px; line-height: 22px; margin-bottom: 15px; } @media (max-width: 768px) {.sb-features-item {flex-direction: column; justify-content: flex-start; } .sb-features-item .sb-number {margin: 0; padding: 0; margin-bottom: 20px; } } /*************************** menu ***************************/ .sb-menu-item {width: 100%; display: block; } .sb-menu-item .sb-cover-frame {display: block; background-color: #F2F3F5; overflow: hidden; position: relative; padding-bottom: 100%; transition: 0.3s ease-in-out; } .sb-menu-item .sb-cover-frame img {width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: center; z-index: 1; top: 0; left: 0; right: 0; transform: scale(1.001); transition: 0.3s ease-in-out; } .sb-menu-item .sb-card-tp {margin-bottom: 15px; padding-left: 15px; min-height: 60px; background-color: #F2F3F5; display: flex; justify-content: space-between; align-items: center; } .sb-menu-item .sb-card-tp .sb-card-title {width: calc(100% - 90px); overflow: hidden; text-overflow: ellipsis; color: #231e41; display: -moz-box; -moz-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; line-clamp: 1; box-orient: vertical; } .sb-menu-item .sb-card-tp .sb-price {width: 100px; color: #fff; height: 60px; letter-spacing: -2px; font-weight: 500; background-color: #8b789d; font-size: 22px; display: flex; justify-content: center; align-items: center; } .sb-menu-item .sb-card-tp .sb-price sub {font-size: 18px; font-weight: 400; margin-right: 10px; bottom: 0px; } .sb-menu-item .sb-card-buttons-frame {display: flex; justify-content: space-between; } .sb-menu-item .sb-card-buttons-frame .sb-btn {margin: 0; } .sb-menu-item.sb-menu-item-sm {display: flex; justify-content: space-between; } .sb-menu-item.sb-menu-item-sm .sb-cover-frame {width: 60px; height: 60px; padding-bottom: 0; } .sb-menu-item.sb-menu-item-sm .sb-card-tp {width: calc(100% - 60px); box-shadow: none; } .sb-menu-item.sb-menu-item-sm .sb-card-tp .sb-card-title {font-size: 14px; -webkit-line-clamp: 2; line-clamp: 2; } .sb-menu-item.sb-menu-item-sm .sb-card-tp .sb-price {font-size: 18px; } .sb-menu-item.sb-menu-item-sm .sb-card-tp .sb-price sub {font-size: 9px; } .sb-menu-item:hover .sb-cover-frame img {transform: scale(1.05); } .sb-menu-item:focus {outline: inherit; } /*************************** call to action ***************************/ .sb-call-to-action {position: relative; padding: 30px 0; } .sb-download-btn {background-color: #231E41; border-radius: 11px; display: inline-block; margin-right: 15px; height: 55px; transform: scale(1.001); transition: 0.3s ease-in-out; } .sb-download-btn img {height: 100%; } .sb-download-btn:last-child {margin-bottom: 0; } .sb-download-btn:hover {transform: scale(1.05); } @media (max-width: 992px) {.sb-call-to-action {position: relative; padding: 60px 0; } .sb-download-btn {margin-bottom: 10px; } .sb-download-btn:last-child {margin-bottom: 0; } .sb-call-to-action {position: relative; } .sb-call-to-action .sb-cta-text {text-align: center; margin-bottom: 60px; } } /*************************** /*************************** contact ***************************/ .sb-contact-form-frame {width: 100%; margin-top: 120px; position: relative; background-color: #FFFFFF; padding: 30px; text-align: center; box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.1); } .sb-contact-form-frame .sb-form-content {position: relative; border: dotted 3px #F2F3F5; } .sb-group-input {position: relative; margin-bottom: 30px; } .sb-group-input.sb-group-with-btn button {position: absolute; top: 0; right: 0; height: 100%; width: 50px; border: none; background-color: #8b789d; transition: 0.3s ease-in-out; } .sb-group-input.sb-group-with-btn button img {width: 20px; } .sb-group-input.sb-group-with-btn button:hover {filter: brightness(110%); } .sb-group-input input, .sb-group-input textarea {height: 50px; position: relative; padding: 0 20px; font-size: 14px; background-color: #F9FAFC; display: block; width: 100%; border: none; border-bottom: solid 1px #F2F3F5; } .sb-group-input input:focus~.sb-bar:before, .sb-group-input textarea:focus~.sb-bar:before {width: 100%; } .sb-group-input textarea {padding-top: 15px; height: 100px; } .sb-group-input input:focus, .sb-group-input textarea:focus {outline: none; } .sb-group-input label {font-size: 14px; color: #6F6F87; font-weight: normal; position: absolute; pointer-events: none; left: 20px; top: 15px; transition: 0.3s ease-in-out; } .sb-group-input input:focus~label, .sb-group-input input:valid~label, .sb-group-input textarea:focus~label, .sb-group-input textarea:valid~label {top: -25px; left: 0; font-size: 12px; color: #231E41; } .sb-group-input input:valid~label:after {margin-left: 5px; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f058"; color: #8b789d; } .sb-group-input input:valid~.sb-bar:before {width: 100%; } .sb-group-input input:invalid~label:after {transform: scale(0); } .sb-group-input .sb-bar {position: relative; display: block; width: 100%; } .sb-group-input .sb-bar:before {content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #8b789d; transition: 0.2s ease all; } .sb-group-input .sb-bar:before {left: 0; } .sb-main-content {width: 100%; padding: 30px; } .sb-success-result {pointer-events: none; opacity: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px; background-color: #FFFFFF; position: absolute; top: 0; left: 0; height: 100%; transition: 0.4s ease-in-out; } .sb-success-result img {width: 80%; } .sb-success-result .sb-success-title {font-size: 32px; letter-spacing: -1px; font-weight: 600; margin: 0; } .sb-success-result.sb-active {pointer-events: all; opacity: 1; } @media (max-width: 992px) {.sb-contact-form-frame {margin-top: 60px; margin-bottom: 90px; } } @media (max-width: 768px) {.sb-contact-form-frame {padding: 0; } .sb-contact-form-frame .sb-form-content {border: none; } } /*************************** sidebar ***************************/ .sb-sidebar-frame {width: 100%; padding: 30px; background-color: #FFFFFF; box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.1); } .sb-sidebar-frame .sb-sidebar {border: dotted 3px #F2F3F5; padding: 30px; } @media (max-width: 992px) {.sb-sidebar-frame.sb-pad-type-1 {margin-top: 60px; margin-bottom: 60px; } .sb-sidebar-frame.sb-pad-type-2 {margin-top: 90px; margin-bottom: 0; } } @media (max-width: 768px) {.sb-sidebar-frame .sb-sidebar {border: none; padding: 0; } } /*************************** filter ***************************/ .sb-filter {margin-bottom: 60px; } .sb-filter .sb-filter-link {padding: 0 20px; font-weight: 500; line-height: 55px; cursor: pointer; position: relative; display: inline-block; text-align: center; height: 55px; font-size: 14px; margin-right: 10px; background-color: #F2F3F5; transition: 0.3s ease-in-out; color: #6F6F87; } .sb-filter .sb-filter-link:last-child {margin-right: 0; } .sb-filter .sb-filter-link.sb-active {background-color: #8b789d; color: #231E41; } .sb-filter .sb-filter-link:hover {filter: brightness(102%); color: #231E41; } @media (max-width: 768px) {.sb-filter {margin-bottom: 60px; } .sb-filter .sb-filter-link {display: block; margin-right: 0; } } /*************************** tabs ***************************/ .sb-tab {width: 100%; margin-bottom: 90px; } .sb-tab .sb-list {display: grid; grid-template-columns: repeat(2, 50%); grid-template-rows: repeat(4, auto); grid-auto-flow: column; grid-column-gap: 30px; } @media (max-width: 768px) {.sb-tab {width: 100%; margin-bottom: 90px; } .sb-tab .sb-list {grid-template-columns: repeat(1, 100%); grid-template-rows: repeat(100, auto); grid-column-gap: 0; } } /*************************** background ***************************/ .sb-bg-1 {border-left: solid 30px #FFFFFF; border-right: solid 30px #FFFFFF; position: absolute; width: 100%; height: 300%; overflow: hidden; } .sb-bg-1 div {width: 100%; position: relative; } .sb-bg-1 div:after {content: ''; height: 40vw; width: 300%; background-color: #F9FAFC; position: absolute; top: 500px; left: -100%; transform: rotate(-30deg); } .sb-bg-2 {position: absolute; top: 0; width: 100%; height: 250%; overflow: hidden; } .sb-bg-2 div {width: 100%; position: relative; } .sb-bg-2 div:after {content: ''; height: 100%; width: 100%; position: absolute; z-index: 0; top: 0; right: -20%; border-radius: 50%; border: solid 200px #F9FAFC; } .sb-bg-3 {background-color: #F9FAFC; width: 63%; height: 100%; position: absolute; border-left: solid 30px #FFFFFF; top: 0; left: 0; } @media (max-width: 768px) {.sb-bg-1 {border-left: solid 15px #FFFFFF; border-right: solid 15px #FFFFFF; } .sb-bg-1 div:after {height: 50vh; top: 450px; } .sb-bg-3 {width: 100%; border: none; } } /*************************** illustration 1 ***************************/ .sb-illustration-1 {position: relative; overflow: hidden; height: 40vw; margin-top: 140px; width: 88%; float: right; border-radius: 50%; box-shadow: 0 8px 8px -9px rgba(0, 0, 0, 0.4); } .sb-illustration-1 .sb-girl {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: top; bottom: 0; right: 0; } .sb-illustration-1 .sb-cirkle-1 {position: absolute; height: 140px; width: 140px; border-radius: 50%; border: solid 25px #FFFFFF; right: 10%; bottom: 15%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-1 .sb-cirkle-2 {position: absolute; top: 40%; right: 20%; height: 25px; width: 25px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 3s infinite ease-in-out; } .sb-illustration-1 .sb-cirkle-3 {position: absolute; bottom: 10%; left: 8%; width: 55px; height: 55px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s infinite ease-in-out; } .sb-illustration-1 .sb-cirkle-4 {position: absolute; top: 15%; right: 30%; width: 15px; height: 15px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 4s infinite ease-in-out; } .sb-illustration-1 .sb-cirkle-5 {position: absolute; height: 40px; width: 40px; border-radius: 50%; border: solid 10px #FFFFFF; left: 28%; bottom: 45%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1.5s infinite ease-in-out; } .sb-illustration-1 .sb-pik-1, .sb-illustration-1 .sb-pik-2, .sb-illustration-1 .sb-pik-3 {position: absolute; width: 8%; opacity: 0.07; } .sb-illustration-1 .sb-pik-1 {bottom: 45%; left: 2%; animation: anima2 3s 2s infinite ease-in-out; } .sb-illustration-1 .sb-pik-2 {right: 2%; bottom: 38%; animation: anima2 3s 1s infinite ease-in-out; } .sb-illustration-1 .sb-pik-3 {top: 24%; right: 18%; animation: anima2 3s infinite ease-in-out; } @media (max-width: 992px) {.sb-illustration-1 {margin-top: 0; height: auto; padding-bottom: 105%; } } @media (max-width: 768px) {.sb-illustration-1 .sb-cirkle-1 {height: 60px; width: 60px; border: solid 15px #FFFFFF; } .sb-illustration-1 .sb-cirkle-5 {position: absolute; height: 30px; width: 30px; left: 25%; bottom: 30%; border: solid 10px #FFFFFF; } } /*************************** illustration 1 (2) ***************************/ .sb-ilustration-fix {padding-top: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .sb-illustration-1-2 {position: relative; padding-bottom: 110%; width: 100%; float: right; } .sb-illustration-1-2 .sb-food-1, .sb-illustration-1-2 .sb-food-2, .sb-illustration-1-2 .sb-food-3 {position: absolute; width: 60%; } .sb-illustration-1-2 .sb-food-1 {top: 18%; left: -5%; animation: anima1 3s infinite ease-in-out; } .sb-illustration-1-2 .sb-food-2 {top: -2%; right: -5%; animation: anima1 2s infinite ease-in-out; } .sb-illustration-1-2 .sb-food-3 {bottom: -3%; right: 0; animation: anima1 4s infinite ease-in-out; } .sb-illustration-1-2 .sb-illu-dialog-1 {top: 10%; right: 20%; margin-right: -30px; animation: message 0.4s ease-in-out; animation-fill-mode: forwards; animation-delay: 2s; } .sb-illustration-1-2 .sb-illu-dialog-2 {bottom: 35%; left: 25%; margin-right: 30px; animation: message 0.4s ease-in-out; animation-fill-mode: forwards; animation-delay: 1s; } .sb-illustration-1-2 .sb-illu-dialog-1, .sb-illustration-1-2 .sb-illu-dialog-2 {white-space: nowrap; opacity: 0; background-color: #FFFFFF; display: block; padding: 5px 30px 10px; position: absolute; font-weight: 500; font-size: 16px; letter-spacing: 0; border-radius: 20px; box-shadow: 0 2px 46px 0 rgba(0, 0, 0, 0.36); } .sb-illustration-1-2 .sb-illu-dialog-1 span, .sb-illustration-1-2 .sb-illu-dialog-2 span {display: inline-block; margin-right: 15px; font-size: 26px; transform: translateY(5px); } .sb-illustration-1-2 .sb-illu-dialog-1:after, .sb-illustration-1-2 .sb-illu-dialog-2:after {transform: rotate(45deg); content: ''; position: absolute; z-index: 9; bottom: -5px; right: 30px; background-color: #FFFFFF; height: 10px; width: 10px; } .sb-illustration-1-2 .sb-cirkle-1 {position: absolute; height: 100px; width: 100px; border-radius: 50%; border: solid 22px #FFFFFF; right: 0; top: 35%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-1-2 .sb-cirkle-2 {position: absolute; top: 20%; left: 20%; height: 25px; width: 25px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 3s infinite ease-in-out; } .sb-illustration-1-2 .sb-cirkle-3 {position: absolute; bottom: 15%; right: 52%; width: 55px; height: 55px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s infinite ease-in-out; } .sb-illustration-1-2 .sb-cirkle-4 {position: absolute; bottom: 35%; right: 0; width: 15px; height: 15px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 4s infinite ease-in-out; } .sb-illustration-1-2 .sb-cirkle-5 {position: absolute; height: 40px; width: 40px; border-radius: 50%; border: solid 10px #FFFFFF; left: 15%; bottom: 30%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1.5s infinite ease-in-out; } .sb-illustration-1-2 .sb-pik-1, .sb-illustration-1-2 .sb-pik-2, .sb-illustration-1-2 .sb-pik-3 {position: absolute; width: 8%; opacity: 0.07; } .sb-illustration-1-2 .sb-pik-1 {top: 5%; left: 25%; animation: anima2 3s 2s infinite ease-in-out; } .sb-illustration-1-2 .sb-pik-2 {right: 0; bottom: 0; animation: anima2 3s 1s infinite ease-in-out; } .sb-illustration-1-2 .sb-pik-3 {left: 22%; bottom: 18%; animation: anima2 3s infinite ease-in-out; } @media (max-width: 992px) {.sb-ilustration-fix {padding: 0; height: auto; } } @media (max-width: 768px) {.sb-illustration-1-2 .sb-illu-dialog-2 {bottom: 15%; } .sb-illustration-1-2 .sb-illu-dialog-1 {top: 15%; } .sb-illustration-1-2 .sb-cirkle-1 {height: 60px; width: 60px; border: solid 12px #FFFFFF; } .sb-illustration-1-2 .sb-cirkle-2 {top: 5%; left: 5%; } .sb-illustration-1-2 .sb-cirkle-3 {bottom: 5%; left: 15%; width: 30px; height: 30px; } .sb-illustration-1-2 .sb-pik-3 {left: 0; bottom: 18%; animation: anima2 3s infinite ease-in-out; } } /*************************** illustration 1 (404) ***************************/ .sb-illustration-1-404 {position: relative; overflow: hidden; height: calc(100vh - 150px); margin-top: 120px; width: 100%; float: right; border-bottom-right-radius: 400px; border-bottom-left-radius: 400px; box-shadow: 0 8px 8px -9px rgba(0, 0, 0, 0.4); } .sb-illustration-1-404 .sb-man {position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: top; bottom: 0; right: 0; } .sb-illustration-1-404 .sb-cirkle-1 {position: absolute; height: 140px; width: 140px; border-radius: 50%; border: solid 25px #FFFFFF; right: 15%; bottom: 15%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-1-404 .sb-cirkle-2 {position: absolute; top: 40%; right: 20%; height: 25px; width: 25px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 3s infinite ease-in-out; } .sb-illustration-1-404 .sb-cirkle-3 {position: absolute; bottom: 10%; left: 8%; width: 55px; height: 55px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s infinite ease-in-out; } .sb-illustration-1-404 .sb-cirkle-4 {position: absolute; top: 15%; left: 20%; width: 15px; height: 15px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 4s infinite ease-in-out; } .sb-illustration-1-404 .sb-cirkle-5 {position: absolute; height: 40px; width: 40px; border-radius: 50%; border: solid 10px #FFFFFF; left: 24%; bottom: 55%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1.5s infinite ease-in-out; } .sb-illustration-1-404 .sb-pik-1, .sb-illustration-1-404 .sb-pik-2, .sb-illustration-1-404 .sb-pik-3 {position: absolute; width: 8%; opacity: 0.07; } .sb-illustration-1-404 .sb-pik-1 {bottom: 50%; left: 9%; animation: anima2 3s 2s infinite ease-in-out; } .sb-illustration-1-404 .sb-pik-2 {right: 2%; bottom: 38%; animation: anima2 3s 1s infinite ease-in-out; } .sb-illustration-1-404 .sb-pik-3 {top: 24%; right: 18%; animation: anima2 3s infinite ease-in-out; } @media (max-width: 992px) {.sb-illustration-1-404 {margin-top: 0; height: auto; padding-bottom: 105%; margin-bottom: 60px; } } @media (max-width: 768px) {.sb-illustration-1-404 .sb-cirkle-1 {height: 60px; width: 60px; border: solid 15px #FFFFFF; } .sb-illustration-1-404 .sb-cirkle-5 {position: absolute; height: 30px; width: 30px; left: 25%; bottom: 30%; border: solid 10px #FFFFFF; } } /*************************** illustration 2 ***************************/ .sb-illustration-2 {position: relative; padding-bottom: 120%; width: 100%; } .sb-illustration-2 .sb-interior-frame {position: absolute; overflow: hidden; z-index: 2; width: 80%; height: 90%; bottom: 10%; left: 0; box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.1); } .sb-illustration-2 .sb-interior-frame .sb-interior {width: 100%; height: 100%; object-fit: cover; object-position: bottom; animation: zoom 30s infinite ease-in-out; } .sb-illustration-2 .sb-square {right: 0; bottom: 0; position: absolute; z-index: 1; width: 70%; height: 80%; background-color: #F9FAFC; } .sb-illustration-2 .sb-cirkle-1 {position: absolute; z-index: 4; height: 100px; width: 100px; border-radius: 50%; border: solid 20px #FFFFFF; left: 15%; bottom: 2%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-2 .sb-cirkle-2 {position: absolute; z-index: 4; top: 35%; right: 18%; height: 20px; width: 20px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 3s infinite ease-in-out; } .sb-illustration-2 .sb-cirkle-3 {position: absolute; z-index: 4; bottom: 15%; left: -5%; width: 55px; height: 55px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s infinite ease-in-out; } .sb-illustration-2 .sb-cirkle-4 {position: absolute; z-index: 4; height: 35px; width: 35px; border-radius: 50%; border: solid 7px #FFFFFF; left: 15%; top: -2%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-2 .sb-experience {background-color: #FFFFFF; position: absolute; z-index: 3; bottom: 0; right: 10%; width: 40%; padding: 30px; box-shadow: 6px 6px 8px -6px rgba(0, 0, 0, 0.1); } .sb-illustration-2 .sb-experience .sb-exp-content {padding: 15px; text-align: center; border: dotted 3px #F2F3F5; } .sb-illustration-2 .sb-experience .sb-exp-content .sb-h1 {font-weight: 500; font-family: 'Monoton', cursive; } @media (max-width: 1200px) {.sb-illustration-2 .sb-experience {width: 50%; } } @media (max-width: 992px) {.sb-illustration-2 {padding-bottom: 65%; } .sb-illustration-2 .sb-interior-frame {width: 100%; } .sb-illustration-2 .sb-cirkle-1 {left: 5%; width: 80px; height: 80px; } .sb-illustration-2 .sb-cirkle-2 {right: -2%; } .sb-illustration-2 .sb-cirkle-3 {width: 30px; height: 30px; bottom: 40%; } .sb-illustration-2 .sb-experience {width: 40%; right: 0; } } @media (max-width: 768px) {.sb-illustration-2 {padding-bottom: 110%; } .sb-illustration-2 .sb-experience {width: 60%; } } /*************************** illustration 3 ***************************/ .sb-illustration-3 {position: relative; padding-bottom: 90%; } .sb-illustration-3 .sb-phones {position: absolute; width: 113%; height: 105%; object-fit: cover; object-position: center; top: 0; right: -13%; animation: anima3 3s infinite ease-in-out; } .sb-illustration-3 .sb-cirkle-1 {position: absolute; height: 80px; width: 80px; border-radius: 50%; border: solid 20px #FFFFFF; left: 23%; bottom: 30%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-3 .sb-cirkle-2 {position: absolute; bottom: 45%; left: 2%; width: 35px; height: 35px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 2s infinite ease-in-out; } .sb-illustration-3 .sb-cirkle-3 {position: absolute; top: 20%; right: 20%; width: 15px; height: 15px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 3s infinite ease-in-out; } .sb-illustration-3 .sb-cirkle-4 {position: absolute; bottom: 5%; left: 35%; width: 10px; height: 10px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 4s infinite ease-in-out; } .sb-illustration-3 .sb-pik-1, .sb-illustration-3 .sb-pik-2, .sb-illustration-3 .sb-pik-3 {position: absolute; width: 8%; opacity: 0.07; } .sb-illustration-3 .sb-pik-1 {bottom: 10%; left: 15%; animation: anima2 3s 2s infinite ease-in-out; } .sb-illustration-3 .sb-pik-2 {right: 32%; top: 5%; animation: anima2 3s 1s infinite ease-in-out; } .sb-illustration-3 .sb-pik-3 {top: 20%; left: 5%; animation: anima2 3s infinite ease-in-out; } @media (max-width: 768px) {.sb-illustration-3 .sb-cirkle-1 {height: 60px; width: 60px; border: solid 15px #FFFFFF; } } /*************************** illustration 4 ***************************/ .sb-illustration-4 {width: 100%; position: relative; z-index: 1; padding-bottom: 60%; animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-4 .sb-burger {position: absolute; width: 95%; height: 100%; object-fit: cover; object-position: center; top: 0; right: 0; animation: anima2 3s infinite ease-in-out; } .sb-illustration-4 .sb-cirkle-1 {position: absolute; height: 60px; width: 60px; border-radius: 50%; border: solid 15px #FFFFFF; right: 15%; bottom: 0; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-4 .sb-cirkle-2 {position: absolute; top: 0; left: 12%; width: 15px; height: 15px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 2s infinite ease-in-out; } .sb-illustration-4 .sb-cirkle-3 {position: absolute; bottom: -5%; right: 50%; width: 10px; height: 10px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 3s infinite ease-in-out; } @media (max-width: 580px) {.sb-illustration-4 {margin-top: 30px; } } /*************************** illustration 5 ***************************/ .sb-illustration-5 {width: 100%; position: relative; z-index: 1; padding-bottom: 60%; animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-5 .sb-cup {position: absolute; width: 55%; bottom: -12%; right: 20%; transform: rotate(-5deg); } .sb-illustration-5 .sb-cirkle-1 {position: absolute; height: 60px; width: 60px; border-radius: 50%; border: solid 15px #FFFFFF; left: 30%; bottom: 0; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-5 .sb-cirkle-2 {position: absolute; bottom: 20%; left: 12%; width: 20px; height: 20px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 2s infinite ease-in-out; } .sb-illustration-5 .sb-cirkle-3 {position: absolute; top: 30%; right: 10%; width: 10px; height: 10px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 3s infinite ease-in-out; } @media (max-width: 580px) {.sb-illustration-5 {margin-top: 30px; margin-bottom: 30px; } .sb-illustration-5 .sb-cup {width: 50%; right: 25%; } } /*************************** illustration 6 ***************************/ .sb-illustration-6 {position: relative; padding-bottom: 75%; } .sb-illustration-6 .sb-burger {position: absolute; width: 100%; top: 1%; animation: anima3 3s infinite ease-in-out; } .sb-illustration-6 .sb-cirkle-1 {position: absolute; height: 110px; width: 110px; border-radius: 50%; border: solid 25px #FFFFFF; right: 3%; bottom: 10%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-6 .sb-cirkle-2 {position: absolute; bottom: 30%; left: 0; width: 35px; height: 35px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 2s infinite ease-in-out; } .sb-illustration-6 .sb-cirkle-3 {position: absolute; top: 20%; right: 0; width: 15px; height: 15px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 3s infinite ease-in-out; } .sb-illustration-6 .sb-cirkle-4 {position: absolute; bottom: 5%; left: 15%; width: 10px; height: 10px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 4s infinite ease-in-out; } .sb-illustration-6 .sb-cirkle-5 {position: absolute; height: 40px; width: 40px; border-radius: 50%; border: solid 10px #FFFFFF; left: 25%; top: 30%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-6 .sb-pik-2, .sb-illustration-6 .sb-pik-3 {position: absolute; width: 8%; opacity: 0.07; } .sb-illustration-6 .sb-pik-2 {right: 12%; top: 0; animation: anima2 3s 1s infinite ease-in-out; } .sb-illustration-6 .sb-pik-3 {top: 10%; left: 2%; animation: anima2 3s infinite ease-in-out; } /*************************** illustration 7 ***************************/ .sb-illustration-7 {position: relative; padding-bottom: 65%; width: 100%; } .sb-illustration-7 .sb-interior-frame {position: absolute; overflow: hidden; z-index: 2; width: 100%; height: 100%; top: 0; left: 0; box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.1); } .sb-illustration-7 .sb-interior-frame .sb-interior {width: 100%; height: 100%; object-fit: cover; object-position: bottom; animation: zoom 30s infinite ease-in-out; } .sb-illustration-7 .sb-interior-frame .sb-video-play {border: solid 3px #FFFFFF; border-radius: 50%; position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; font-size: 24px; margin-left: -45px; margin-top: -45px; display: flex; justify-content: center; align-items: center; color: #FFFFFF; padding-left: 3px; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); text-shadow: 0 3px 6px rgba(0, 0, 0, 0.09); transition: 0.3s ease-in-out; } .sb-illustration-7 .sb-interior-frame .sb-video-play:hover {transform: scale(1.05); } .sb-illustration-7 .sb-cirkle-1 {position: absolute; z-index: 4; height: 70px; width: 70px; border-radius: 50%; border: solid 15px #FFFFFF; right: 5%; bottom: -4%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-7 .sb-cirkle-2 {position: absolute; z-index: 4; top: 35%; right: -2%; height: 20px; width: 20px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 3s infinite ease-in-out; } .sb-illustration-7 .sb-cirkle-3 {position: absolute; z-index: 4; bottom: 15%; left: -4%; width: 55px; height: 55px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s infinite ease-in-out; } .sb-illustration-7 .sb-cirkle-4 {position: absolute; z-index: 4; height: 35px; width: 35px; border-radius: 50%; border: solid 7px #FFFFFF; left: 15%; top: -4%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } @media (max-width: 1200px) {.sb-illustration-2 .sb-experience {width: 50%; } } @media (max-width: 992px) {.sb-illustration-2 {padding-bottom: 65%; } .sb-illustration-2 .sb-interior-frame {width: 100%; } .sb-illustration-2 .sb-cirkle-1 {left: 5%; width: 80px; height: 80px; } .sb-illustration-2 .sb-cirkle-2 {right: -2%; } .sb-illustration-2 .sb-cirkle-3 {width: 30px; height: 30px; bottom: 40%; } .sb-illustration-2 .sb-experience {width: 40%; right: 0; } } @media (max-width: 768px) {.sb-illustration-2 {padding-bottom: 110%; } .sb-illustration-2 .sb-experience {width: 60%; } } /*************************** illustration 8 ***************************/ .sb-illustration-8 {position: relative; padding-bottom: 80%; } .sb-illustration-8 .sb-reserved {position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; right: 0; } .sb-illustration-8 .sb-cirkle-1 {position: absolute; height: 110px; width: 110px; border-radius: 50%; border: solid 25px #FFFFFF; left: -3%; bottom: 10%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-8 .sb-cirkle-2 {position: absolute; bottom: 50%; right: 0; width: 35px; height: 35px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 2s infinite ease-in-out; } .sb-illustration-8 .sb-cirkle-3 {position: absolute; top: 20%; left: 45%; width: 15px; height: 15px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 3s infinite ease-in-out; } .sb-illustration-8 .sb-cirkle-4 {position: absolute; top: 5%; left: 15%; width: 10px; height: 10px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 4s infinite ease-in-out; } .sb-illustration-8 .sb-cirkle-5 {position: absolute; height: 40px; width: 40px; border-radius: 50%; border: solid 10px #FFFFFF; right: 33%; bottom: 0; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-8 .sb-pik-2, .sb-illustration-8 .sb-pik-3 {position: absolute; width: 8%; opacity: 0.07; } .sb-illustration-8 .sb-pik-2 {right: 12%; top: 25%; animation: anima2 3s 1s infinite ease-in-out; } .sb-illustration-8 .sb-pik-3 {top: 40%; left: -2%; animation: anima2 3s infinite ease-in-out; } /*************************** illustration 9 ***************************/ .sb-illustration-9 .sb-envelope-1 {position: absolute; z-index: 2; width: 65%; left: -43%; bottom: -5%; animation: anima3 3s 1s infinite ease-in-out; } .sb-illustration-9 .sb-envelope-2 {position: absolute; z-index: 2; width: 25%; right: -5%; bottom: 0; animation: anima2 3s 1s infinite ease-in-out; } .sb-illustration-9 .sb-cirkle-1 {position: absolute; z-index: 1; height: 60px; width: 60px; border-radius: 50%; border: solid 15px #FFFFFF; left: -10%; bottom: 45%; box-shadow: inset 0 3px 6px 0 rgba(0, 0, 0, 0.09), 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima3 3s 0.5s infinite ease-in-out; } .sb-illustration-9 .sb-cirkle-2 {position: absolute; bottom: 50%; right: -4%; width: 35px; height: 35px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 2s 2s infinite ease-in-out; } .sb-illustration-9 .sb-cirkle-3 {position: absolute; top: -1.5%; left: 25%; width: 15px; height: 15px; background-color: #8b789d; border-radius: 50%; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.09); animation: anima1 3s 3s infinite ease-in-out; } .font70 {font-size: 65px; color: #231e41; } .display-mv {display: none; } .mm100 {margin-top: 10px; } .link {color: #bf38bb; } .link:hover {color: #231E41; } @media(max-width: 480px) {.display-mv {display: block; } .-mm3 {margin-top: -11vw; } .sb-illustration-1 {position: relative; overflow: hidden; width: 100%; float: right; border-radius: 50%; box-shadow: 0 8px 8px -9px rgba(0, 0, 0, 0.4); } .font70 {font-size: 25px; } .sb-suptitle {padding: 10px 20px; font-size: 15px; } .sb-mb-30 {margin-bottom: 10px !important; } .sb-menu-btn {margin-right: 10px; } .sb-mb-60 {margin-bottom: 20px !important; } .sb-h2 span, h2 span {background-color: transparent; } .sb-top-bar-frame .sb-top-bar .sb-logo-frame {margin-left: -8vw; width: 121px; } .sb-top-bar-frame .sb-top-bar .sb-right-side {margin-right: -6vw; } .sb-call-to-action {padding: 60px 0 10px 0; } .-m12 {margin-top: -12vw; } .mm14 {margin-top: 14vw; } .sb-p-0-90 {padding-bottom: 20px !important; } } @font-face {font-weight: 400; font-style: normal; font-family: 'Circular-Loom'; src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Book-cd7d2bcec649b1243839a15d5eb8f0a3.woff2') format('woff2'); } @font-face {font-weight: 500; font-style: normal; font-family: 'Circular-Loom'; src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Medium-d74eac43c78bd5852478998ce63dceb3.woff2') format('woff2'); } @font-face {font-weight: 700; font-style: normal; font-family: 'Circular-Loom'; src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Bold-83b8ceaf77f49c7cffa44107561909e4.woff2') format('woff2'); } @font-face {font-weight: 900; font-style: normal; font-family: 'Circular-Loom'; src: url('https://cdn.loom.com/assets/fonts/circular/CircularXXWeb-Black-bf067ecb8aa777ceb6df7d72226febca.woff2') format('woff2'); } .section-6 {padding: 5vw 0vw; background: #dfc5ea; margin-bottom: 4vw; } .register-form {width: 97%; display: flex; clear: both; float: right; position: relative; background: #fff; border-radius: 3rem; padding: .35vw; margin-bottom: 2vw; margin-top: 2vw } .register-form input[type=email] {border-top-left-radius: 3rem; border-bottom-left-radius: 3rem; padding: 1vw 1.5vw; border: none; height: 3.5vw; margin: 0; background: transparent!important; border: 1px solid #fff!important; box-shadow: none!important; color: #6F6F87; float: left; width: 70% } .register-form input[type="email"]::-webkit-input-placeholder {color: #6F6F87!important } .register-form input[type="email"]:-ms-input-placeholder {color: #6F6F87!important } .register-form input[type="email"]::placeholder {color: #6F6F87!important } .register-form button {font-size: 1vw; display: inline-block; background: #8b789d; border: 2px solid #8b789d; color: #fff; padding: .3vw .8vw; width: 30%; border-radius: 3rem; -webkit-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s } .register-form button:hover {background: #231e41; border: 2px solid #231e41 } @media(max-width:980px) {.register-form input[type=email] {height: 4.5vw } } @media(max-width: 490px) {.register-form {width: 90vw; left: 3.5vw; } .register-form input[type=email] {padding: 1vw 3.5vw; height: 12.5vw; font-size: 14px; } .register-form button {font-size: 2.8vw } .section-6 {padding: 24vw 0vw; text-align: center; margin-bottom: 23vw; margin-top: 10vw; } } .tw-latest-post {background: #fff; padding-bottom: 6.5vw; border-radius: 1.3rem; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; margin-bottom: 2vw; -webkit-box-shadow: 0 5px 3vw 0 rgb(221 206 206 / 40%); box-shadow: 0 5px 3vw 0 rgb(221 206 206 / 40%); cursor: pointer } .latest-post-media {margin-bottom: 1vw; position: relative; overflow: hidden; border-top-left-radius: 1.3rem; border-top-right-radius: 1.3rem } .latest-post-media img {width: 100%; height: 15vw; border-top-left-radius: 1.3rem; border-top-right-radius: 1.3rem; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear } .latest-post-media img:hover {border-top-left-radius: 1.3rem; border-top-right-radius: 1.3rem; -webkit-transform: scale(1.3); transform: scale(1.3) } .latest-post-media-1 img {width: 100%; height: 19vw; border-top-left-radius: 1.3rem; border-top-right-radius: 1.3rem; -webkit-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear } .latest-post-media .sb-price {width: 100px; color: #fff; height: 45px; letter-spacing: -2px; font-weight: 500; background-color: #231e41; font-size: 18px; display: flex; position: absolute; justify-content: center; align-items: center; z-index: 9999; right: 10px; top: 10px; } .latest-post-media .sb-price sub {font-size: 18px; font-weight: 400; margin-right: 10px; bottom: 0px; } .post-body {position: relative; z-index: 2; padding: 0.3vw 1vw; height: 12vw; } .post-body .btn-read, .w-featured-desc .btn-read {border: 2px solid #8b789d; text-align: center; color: #8b789d!important; background: transparent; font-family: 'Rubik', sans-serif; font-size: 1vw; line-height: 1.4vw!important; border-radius: 3rem; padding: .5vw 1.5vw; float: right; margin-right: 0.5vw; margin-top: -1.5vw; transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out } .post-body .btn-read-1 {margin-right: 0.5vw; margin-top: -.2vw; } .post-body .btn-read-2 {margin-right: 0.5vw; margin-top: -1.5vw; } .post-body .btn-read:hover, .w-featured-desc .btn-read:hover {color: #fff!important; background: #8b789d } .post-item-date {position: absolute; height: 100%; top: 1vw; left: 1vw } .post-item-date:before {position: absolute; top: 0; left: 50%; content: ""; background: #DCDCDC; width: 1px; height: 7vw } .post-item-date:after {position: absolute; top: 7vw; width: 14px; height: 14px; content: ""; background: #8b789d; left: 50%; margin-left: -7px; border-radius: 50%; border: 2px solid #DCDCDC } .post-date {width: 4.5vw; height: 4.5vw; background: #8b789d; border-radius: 50%; border: 2px solid #DCDCDC; text-align: center; color: #fff; position: relative; z-index: 3; font-weight: 800; font-size: 1.2vw; padding-top: .5vw } .post-date .month {display: block; font-weight: 300; font-size: 1vw; margin-top: -.7vw } .post-info .post-title {padding-bottom: 0.6vw; font-size: 1.3vw; min-height: 4vw; font-family: 'Rubik', sans-serif; } .post-info .post-title a {color: #231e41; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s } .post-info .entry-content p {height: 8.5vw; font-size: .9vw; line-height: 1.5vw; font-family: 'Rubik', sans-serif; padding-right: .2vw; color: #6F6F87 } .post-meta {padding-top: .2vw; padding-bottom: .2vw; color: #8b789d; font-family: 'Rubik', sans-serif; } @media(max-width:762px) {.post-body {position: relative; z-index: 2; padding: 4.3vw 5vw; height: auto } .post-info .post-title {font-size: 4.2vw; } .post-info .entry-content p {height: 23vw; font-size: 3.5vw; line-height: 6.5vw; } .post-body .btn-read, .w-featured-desc .btn-read {font-size: 3.1vw; line-height: 2.5vw!important; border-radius: 3rem; padding: 2.3vw 3vw; } .latest-post-media img, .latest-post-media-1 img {width: 100%; height: auto; } .tw-latest-post {padding-bottom: 12vw; margin-bottom: 6vw; } } @media(max-width:490px) {.post-body {position: relative; z-index: 2; padding: 4.3vw 5vw; height: auto } .post-info .post-title {font-size: 4.2vw; } .post-info .entry-content p {font-size: 3.5vw; line-height: 6.5vw; height: auto; } .post-body .btn-read, .w-featured-desc .btn-read {font-size: 3.1vw; line-height: 3.6vw!important; border-radius: 3rem; padding: 2.3vw 3vw; } .latest-post-media img {width: 100%; height: auto; } .tw-latest-post {padding-bottom: 12vw; margin-bottom: 6vw; } } @media (max-width: 480px) {.sb-btn.sb-btn-2 {padding-right: 7vw; } } .modal-open .modal {z-index: 9999; } .modal-content {background: #8b789d; border-radius: 0.7rem; padding: 1vw 1vw; box-shadow: none; border: none; } .img-modal-1 {width: 100%; border-radius: 0.7rem; } .modal-header {padding: 4px; text-align: right; min-height: 16.43px; border-bottom: none; position: relative; } .modal-header button {background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; font-weight: 400; position: absolute; right: 0; z-index: 999; } .btn-close {font-size: 2vw; color: #fff; } .video-content {padding: 0px 2vw; } @media(max-width: 480px) {.btn-close {font-size: 9vw!important; } .img-modal-1 {width: 100%; } } .modal-open .modal {z-index: 9999; background: rgb(35 30 65 / 86%); } .ttm_single_image-wrapper {position: relative; } .ttm-play-icon-btn .ttm-play-icon-animation {position: relative; display: inline-block; } .ttm-play-icon-btn .ttm-play-icon-animation .ttm-icon {margin-bottom: 0; } .ttm-play-icon-btn .ttm-play-icon-animation:after, .ttm-play-icon-btn .ttm-play-icon-animation:before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .ttm-play-icon-btn .ttm-play-icon-animation:after {z-index: 1; width: calc(100% * 1.3); height: calc(100% * 1.3); opacity: .3; background-color: #fff; } .ttm-play-icon-btn .ttm-play-icon-animation:before {width: calc(100% * 1.6); height: calc(100% * 1.6); opacity: .5; background-color: #fff; } .ttm-bgcolor-skincolor .ttm-play-icon-btn .ttm-play-icon-animation:after {opacity: .1; } .ttm-bgcolor-skincolor .ttm-play-icon-btn .ttm-play-icon-animation:before {opacity: .3; } .ttm-play-icon-btn:hover .ttm-play-icon-animation:after, .ttm-play-icon-btn:hover .ttm-play-icon-animation:before {-webkit-animation: sep-anim 1.05s infinite; -moz-animation: sep-anim 1.05s infinite; -ms-animation: sep-anim 1.05s infinite; -o-animation: sep-anim 1.05s infinite; animation: sep-anim 1.05s infinite; } @-webkit-keyframes sep-anim {100% {width: 200%; height: 200%; opacity: 0 } } @keyframes sep-anim {100% {width: 200%; height: 200%; opacity: 0 } } .ttm_single_image-wrapper.ttm_single_image_hover {overflow: hidden; } .ttm_single_image-wrapper .ttm-play-icon-btn {position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 0; left: 0; right: 0; bottom: 0; } .ttm-play-icon-btn .ttm-play-icon-animation {position: relative; display: inline-block; } .ttm-play-icon-btn .ttm-play-icon-animation:after {z-index: 1; width: calc(100% * 1.3); height: calc(100% * 1.3); opacity: .3; background-color: #231E41; } .ttm-play-icon-btn .ttm-play-icon-animation:before {width: calc(100% * 1.6); height: calc(100% * 1.6); opacity: .5; background-color: #231E41; } .ttm-play-icon-btn .ttm-play-icon-animation .ttm-icon {margin-bottom: 0; } .ttm-play-icon-btn .ttm-icon.ttm-icon_element-size-sm {display: block; height: 60px; width: 60px; line-height: 60px; margin: 0; background-color: #231E41; border-radius: 50%; z-index: 2; } @media(min-width: 2460px) {.ttm-play-icon-btn .ttm-icon.ttm-icon_element-size-sm {display: block; height: 5vw; width: 5vw; line-height: 5vw; margin: 0; background-color: #231E41; border-radius: 50%; z-index: 2; } } .ttm-play-icon-btn .ttm-icon.ttm-icon_element-size-sm i.fa-play {padding-left: 5px; font-size: 20px; color: #fff; display: inline-block; vertical-align: middle; line-height: 0; } @media(min-width: 2460px) {.ttm-play-icon-btn .ttm-icon.ttm-icon_element-size-sm i.fa-play {padding-left: 5px; font-size: 2.5vw; display: inline-block; vertical-align: middle; line-height: 0; } } .ttm-play-icon-btn .ttm-play-icon-animation:after, .ttm-play-icon-btn .ttm-play-icon-animation:before {content: ''; position: absolute; z-index: 9999; cursor: pointer; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .title-section-3 {margin-bottom: 15px; color: #231e41; } p>strong {color: #231e41; } .modal-title {text-transform: unset; color: #231e41!important; } .form-control {display: block; width: 100%; height: 40px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; box-shadow: none!important; background: #f3f3f3; color: #6F6F87; border: 1px solid hsl(240deg 21% 82% / 43%); border-radius: 4px; } .modal-video {max-width: 650px; } .featured-icon-box {cursor: pointer; background-color: #f7f1ff; padding: 15px 20px; border-bottom: 1px solid #ecf3fa; border-top-left-radius: 15px; border-top-right-radius: 15px; position: relative; transition: all 0.3s ease; letter-spacing: 0.5px; border-radius: 15px; box-shadow: 0 0 37px rgb(65 53 76 / 15%); border: none !important; display: flex; } .w-featured-desc {padding: 20px; text-align: right; } .w-featured-title h3{min-height: 40px; color: #000; font-size: 15px; } .w-featured-icon .ttm-icon {border-radius: 50%; } .w-featured-content {float: left; width: 70%; } .w-featured-icon {float: left; width: 30%; } @media(max-width: 480px) {.w-featured-title h3{min-height: auto; font-size: 15px; } } .btn-ws{width: 60px; height: 60px; position: fixed; z-index: 9999; bottom: 7vw; right: 10px; border-radius: 50%; line-height: 60px; text-align: center; background: #25D366; box-shadow: 6px 6px 35px 0 rgb(137 125 125 / 5%); } .btn-ws img{width: 50%;     margin-left: 2px; } @media (max-width: 480px) {.btn-ws{bottom: 24vw; } }