/*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- >>> TABLE OF CONTENTS: # Common # Animations # Main Menu # Banner # Service # Call to Action # Main Footer # Contact # Blog ## Blog Details # Page Header # Sidemenu # Sidebar # FAQ # Brand # Testimonials # App Screens # Pricing # Funfact # Video --------------------------------------------------------------*/ /*-------------------------------------------------------------- # Common --------------------------------------------------------------*/ /*font-family: 'Barlow', sans-serif;*/ :root { --thm-font: 'Barlow', sans-serif; --thm-base: #ff3399; --thm-base-rgb: 238, 70, 75; --thm-black: #ff3399; --thm-black-rgb: 39, 40, 57; --thm-gray: #f4f4f8; } body { font-family: var(--thm-font); color: #7c7d8a; font-size: 18px; font-weight: 500; } a:active, a:hover, a:focus, a:visited { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--thm-font); } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; } @media (min-width: 1200px) { .container { max-width: 1200px; } } .block-title { margin-bottom: 50px; } .block-title__bubbles { position: relative; display: block; width: 19px; height: 27px; padding-bottom: 8px; margin-bottom: 15px; } .text-center .block-title__bubbles { margin-left: auto; margin-right: auto; } .block-title__bubbles::after, .block-title__bubbles::before { content: ''; width: 19px; height: 19px; border-radius: 50%; background-color: #30283d; opacity: 0.05; display: block; } .block-title__bubbles::after { position: absolute; bottom: 0; left: calc(50% - 9.5px); } .block-title p { margin: 0; line-height: 1em; color: #ff3399; font-weight: 500; font-size: 18px; } .block-title h3 { margin: 0; color: var(--thm-black); font-weight: 800; font-size: 46px; } .thm-btn { display: inline-block; vertical-align: middle; border: none; outline: none; background-image: linear-gradient(90deg, #e41256 0%, #ffa337 51%, #e41256 100%); text-align: center; background-size: 200% auto; border-radius: 5px; color: #fff; padding: 18px 50px; font-size: 18px; font-weight: 600; -webkit-transition: all .4s ease; transition: all .4s ease; } .thm-btn:hover { color: #fff; background-position: right center; } .bootstrap-select .btn-light:not(:disabled):not(.disabled).active, .bootstrap-select .btn-light:not(:disabled):not(.disabled):active, .bootstrap-select .show>.btn-light.dropdown-toggle { background-color: transparent !important; box-shadow: none !important; outline: none !important; } .bootstrap-select>.dropdown-toggle { box-shadow: none !important; } .bootstrap-select .dropdown-toggle:focus, .bootstrap-select>select.mobile-device:focus+.dropdown-toggle { outline: none !important; } .bootstrap-select .dropdown-menu { padding-top: 0; padding-bottom: 0; margin-top: 0; z-index: 991; border-radius: 0; } .bootstrap-select .dropdown-menu>li+li>a { border-top: 1px solid var(--thm-gray); } .bootstrap-select .dropdown-menu>li.selected>a { background: var(--thm-base); color: #fff; } .bootstrap-select .dropdown-menu>li>a { font-size: 16px; font-weight: 500; padding: 4px 20px; color: var(--thm-black); -webkit-transition: all .4s ease; transition: all .4s ease; } .bootstrap-select .dropdown-menu>li>a:hover { background: var(--thm-base); color: #fff; cursor: pointer; } /* datepicker */ .datepicker.dropdown-menu { min-width: 17rem; } .datepicker table { width: 100%; } .post-pagination { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; flex-wrap: wrap; } .post-pagination a { border-radius: 50%; background-color: #fff; color: var(--thm-black); font-size: 18px; font-weight: 600; text-align: center; padding: 0; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; width: 57px; height: 57px; -webkit-transition: all .4s ease; transition: all .4s ease; } @media(max-width: 480px) { .post-pagination a { width: 40px; height: 40px; font-size: 16px; } } .post-pagination a:hover { background-color: var(--thm-black); color: #fff; } .post-pagination a.active { background-color: var(--thm-base); color: #fff; cursor: auto; } .post-pagination a+a { margin-left: 15px; } .scroll-to-top { display: inline-block; width: 45px; height: 45px; background: var(--thm-base); position: fixed; bottom: 40px; right: 40px; z-index: 99; text-align: center; -webkit-transition: all .4s ease; transition: all .4s ease; display: none; border-radius: 50%; transition: all .4s ease; } .scroll-to-top i { color: #ffffff; font-size: 18px; line-height: 45px; } .scroll-to-top:hover { background-color: var(--thm-black); } .scroll-to-top:hover i { color: #fff; } .thm-base-bg { background-color: var(--thm-base); } .thm-base-bg-2 { background-color: var(--thm-base); } .thm-gray-bg { background-color: var(--thm-gray); } /* Cursor Style */ .cursor { position: absolute; background-color: #fff; width: 6px; height: 6px; border-radius: 100%; z-index: 1; -webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 10000; -webkit-transform: scale(1); transform: scale(1); visibility: hidden; } .cursor { visibility: visible; } .cursor.active { opacity: 0.5; -webkit-transform: scale(0); transform: scale(0); } .cursor.hovered { opacity: 0.08; } .cursor-follower { position: absolute; background-color: RGBA(255, 255, 255, 0.3); width: 50px; height: 50px; border-radius: 100%; z-index: 1; -webkit-transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity, 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) -webkit-transform; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; pointer-events: none; z-index: 10000; visibility: hidden; } .cursor-follower { visibility: visible; } .cursor-follower.active { opacity: 0.7; -webkit-transform: scale(1); transform: scale(1); } .cursor-follower.hovered { opacity: 0.08; } .cursor-follower.close-cursor:before { position: absolute; content: ''; height: 25px; width: 2px; background: #fff; left: 48%; top: 12px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); display: inline-block; } .cursor-follower.close-cursor:after { position: absolute; content: ''; height: 25px; width: 2px; background: #fff; right: 48%; top: 12px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } /*preloader*/ .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 999; background-color: #fff; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } .lds-ripple { display: inline-block; position: relative; width: 80px; height: 80px; } .lds-ripple div { position: absolute; border: 4px solid #e41256; opacity: 1; border-radius: 50%; -webkit-animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; } .lds-ripple div:nth-child(2) { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } @-webkit-keyframes lds-ripple { 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } } @keyframes lds-ripple { 0% { top: 36px; left: 36px; width: 0; height: 0; opacity: 1; } 100% { top: 0px; left: 0px; width: 72px; height: 72px; opacity: 0; } } /*-------------------------------------------------------------- # Animations --------------------------------------------------------------*/ @keyframes ImgBounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes shapeMover { 0%, 100% { transform: perspective(400px) translateY(0) rotate(0deg) translateZ(0px) translateX(0); } 50% { transform: perspective(400px) rotate(-45deg) translateZ(20px) translateY(20px) translateX(20px); } } @keyframes bubbleMover { 0% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); } 30% { -webkit-transform: translateY(30px) translateX(50px) rotate(15deg); transform: translateY(30px) translateX(50px) rotate(15deg); -webkit-transform-origin: center center; transform-origin: center center; } 50% { -webkit-transform: translateY(50px) translateX(100px) rotate(45deg); transform: translateY(50px) translateX(100px) rotate(45deg); -webkit-transform-origin: right bottom; transform-origin: right bottom; } 80% { -webkit-transform: translateY(30px) translateX(50px) rotate(15deg); transform: translateY(30px) translateX(50px) rotate(15deg); -webkit-transform-origin: left top; transform-origin: left top; } 100% { -webkit-transform: translateY(0px) translateX(0) rotate(0); transform: translateY(0px) translateX(0) rotate(0); -webkit-transform-origin: center center; transform-origin: center center; } } @keyframes banner3Shake { 0% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } 30% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 60% { -webkit-transform: rotate3d(1, 0, 0, 0deg); transform: rotate3d(1, 0, 0, 0deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 100% { -webkit-transform: rotate3d(0, 1, 0, 0deg); transform: rotate3d(0, 1, 0, 0deg); } } /*-------------------------------------------------------------- # Main Menu --------------------------------------------------------------*/ .main-nav__header-one { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .08); position: absolute; top: 0; left: 0; z-index: 91; } .main-nav__header-one .container { position: relative; display: flex; justify-content: space-between; align-items: center; } .main-nav__logo-box .side-menu__toggler { font-size: 20px; color: #fff; display: none; } .main-nav__main-navigation .main-nav__navigation-box { margin: 0; padding: 0; list-style: none; display: -moz-flex; display: -ms-flex; display: -o-flex; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .main-nav__main-navigation .main-nav__navigation-box, .main-nav__main-navigation .main-nav__navigation-box ul { margin: 0; padding: 0; list-style: none; } .main-nav__main-navigation .main-nav__navigation-box>li+li { margin-left: 45px; } .main-nav__main-navigation .main-nav__navigation-box>li { position: relative; padding: 38.75px 0px; } .main-nav__main-navigation .main-nav__navigation-box>li>a { color: #ffffff; font-size: 16px; font-weight: 500; font-family: var(--thm-font); position: relative; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-nav__main-navigation .main-nav__navigation-box>li>a::before { content: ''; width: 100%; height: 1px; background-color: #fff; position: absolute; top: calc(100% + 3px); left: 0; transform: scale(0, 1); transform-origin: right center; transition: transform 500ms ease; } .main-nav__main-navigation .main-nav__navigation-box>li:hover>a, .main-nav__main-navigation .main-nav__navigation-box>li.current>a, .main-nav__main-navigation .main-nav__navigation-box>li.current-menu-item>a { color: #fff; } .main-nav__main-navigation .main-nav__navigation-box>li:hover>a::before, .main-nav__main-navigation .main-nav__navigation-box>li.current>a::before, .main-nav__main-navigation .main-nav__navigation-box>li.current-menu-item>a::before { transform: scale(1, 1); transform-origin: left center; } /* Dropdown menu */ .main-nav__main-navigation .dropdown-btn { display: none; } .main-nav__main-navigation .main-nav__navigation-box>li ul { position: absolute; width: 230px; background-color: #fff; border-top: 2px solid var(--thm-black); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05); -webkit-transform-origin: top; transform-origin: top; visibility: hidden; opacity: 0; z-index: 991; -webkit-transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; transition: opacity 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; transition: transform 500ms ease, opacity 500ms ease, visibility 500ms ease; transition: transform 500ms ease, opacity 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; } .main-nav__main-navigation .main-nav__navigation-box>li ul>li { position: relative; } .main-nav__main-navigation .main-nav__navigation-box>li ul>li+li { border-top: 1px solid rgba(var(--thm-black-rgb), .3); } .main-nav__main-navigation .main-nav__navigation-box>li ul>li>a { display: block; color: var(--thm-black); font-size: 14px; font-family: var(--thm-font); word-break: break-all; padding-top: 9.5px; padding-bottom: 9.5px; padding-left: 20px; padding-right: 20px; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .main-nav__main-navigation .main-nav__navigation-box>li ul>li:hover>a { color: #fff; background-color: var(--thm-black); } /* Second level menu */ .main-nav__main-navigation .main-nav__navigation-box>li>ul { top: 100%; left: 0; -webkit-transform: translateY(30px); transform: translateY(30px); visibility: hidden; opacity: 0; } .main-nav__main-navigation .main-nav__navigation-box>li:hover>ul { -webkit-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } /* Third level menu */ .main-nav__main-navigation .main-nav__navigation-box>li>ul>li>ul { top: 0; left: 100%; -webkit-transform: translateX(30px); transform: translateX(30px); visibility: hidden; opacity: 0; } .main-nav__main-navigation .main-nav__navigation-box>li>ul>li:hover>ul { -webkit-transform: translateX(0px); transform: translateX(0px); visibility: visible; opacity: 1; } /* After Third level menu */ .main-nav__main-navigation .main-nav__navigation-box>li>ul>li>ul>li ul { display: none; } .header__btn { background-image: none; border: 2px solid #fff; padding: 9px 45.25px; } .header__btn:hover { background-color: #fff; color: var(--thm-black); } .stricked-menu { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; background-color: var(--thm-black); box-shadow: 0px 6px 13px 0px rgba(0, 0, 0, 0.06); opacity: 0; -webkit-transform: translateY(-110%); transform: translateY(-110%); -webkit-transition: all .4s ease; transition: all .4s ease; } .stricked-menu.stricky-fixed { opacity: 1; -webkit-transform: translateY(0%); transform: translateY(0%); } .stricked-menu .main-nav__navigation-box>li { padding-top: 25px; padding-bottom: 25px; } /*-------------------------------------------------------------- # Banner --------------------------------------------------------------*/ .banner-one { background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative; } .banner-one::before { content: ''; width: 100%; height: 200px; position: absolute; bottom: 0; left: 0; background-color: #fff; clip-path: polygon(71.5% 0, 0% 100%, 100% 100%); } @media(max-width: 991px) { .banner-one::before { height: 80px; } } .banner-one .container { position: relative; padding-top: 320px; padding-bottom: 275px; } .banner-one__moc { position: absolute; bottom: 45px; right: -30px; animation: ImgBounce 5s ease-in-out 0s infinite alternate; } .banner-one__content h3 { margin: 0; font-size: 70px; text-transform: uppercase; line-height: 80px; font-weight: 300; color: #fff; margin-top: 10px; margin-bottom: 25px; } .banner-one__content p { margin: 0; font-size: 18px; line-height: 32px; font-weight: 300; color: #ffffff; } .banner-one__btn { padding: 16px 56px; background-image: none; border: 2px solid #fff; margin-top: 40px; } .banner-one__btn:hover { background-color: #fff; color: var(--thm-black); } .banner-one__content .banner-one__tag-line { display: inline-block; background-color: rgba(0, 0, 0, .1); text-transform: uppercase; font-size: 11px; font-weight: 600; color: #ffffff; letter-spacing: .2em; border-radius: 5px; overflow: hidden; padding-left: 30px; line-height: 40px; } .banner-one__content .banner-one__tag-line a { display: inline-block; vertical-align: middle; background-color: #feec66; color: #23242b; padding-left: 30px; padding-right: 30px; margin-left: 25px; transition: all 500ms ease; } .banner-one__content .banner-one__tag-line a:hover { background-color: var(--thm-black); color: #fff; } [class*=banner-one__shape-] { position: absolute; } .banner-one__shape-moc-1 { top: 15%; right: -9%; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: bounce; animation-name: bounce; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .banner-one__shape-1 { top: 3%; left: 0; } .banner-one__shape-2 { top: 17%; left: 7%; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: banner3Shake; animation-name: banner3Shake; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .banner-one__shape-3 { bottom: 19%; left: 6%; } .banner-one__shape-4 { top: 19%; right: 45%; -webkit-animation-name: bubbleMover; animation-name: bubbleMover; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-duration: 8s; } .banner-one__shape-5 { bottom: 19%; left: 6%; -webkit-animation-name: bubbleMover; animation-name: bubbleMover; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-duration: 10s; } .banner-one__shape-6 { bottom: 29%; right: 30%; -webkit-animation-name: shapeMover; animation-name: shapeMover; -webkit-animation-duration: 9s; animation-duration: 9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .banner-one__shape-7 { bottom: 19%; right: 6%; -webkit-animation-name: shapeMover; animation-name: shapeMover; -webkit-animation-duration: 9s; animation-duration: 9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-delay: 2s; } /*-------------------------------------------------------------- # Service --------------------------------------------------------------*/ .service-one { padding-bottom: 90px; } .service-one__col { padding-left: 15px; padding-right: 15px; flex: 1 1 20%; text-align: center; } .service-one__single { margin-bottom: 30px; padding-top: 40px; padding-bottom: 40px; border-style: solid; border-width: 1px; border-color: rgb(232, 232, 239); background-color: rgb(255, 255, 255); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.04); } .service-one__single h3 { color: var(--thm-black); font-size: 18px; font-weight: 600; margin: 0; } .service-one__single i { width: 111px; height: 111px; border-radius: 50%; background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); font-size: 64px; color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; margin-left: auto; margin-right: auto; margin-bottom: 15px; background-size: 200% auto; transition: all 500ms ease; } .service-one__single:hover i { background-position: right center; } .service-one__col:nth-child(1) .service-one__single i { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); } .service-one__col:nth-child(2) .service-one__single i { background-image: linear-gradient(90deg, #4453ac 0%, #03a9db 51%, #4453ac 100%); } .service-one__col:nth-child(3) .service-one__single i { background-image: linear-gradient(90deg, #0349a6 0%, #15c27b 51%, #0349a6 100%); } .service-one__col:nth-child(4) .service-one__single i { background-image: linear-gradient(90deg, #e41256 0%, #ffa337 51%, #e41256 100%); } .service-one__col:nth-child(5) .service-one__single i { background-image: linear-gradient(90deg, #03a631 0%, #d6c10f 51%, #03a631 100%); } /*-------------------------------------------------------------- # Call to Action --------------------------------------------------------------*/ .cta-one { position: relative; background-color: #fff; z-index: 10; padding-top: 65px; } [class*=cta-one__circle-] { position: absolute; opacity: 0.03; border-radius: 50%; background-color: var(--thm-black); } .cta-one__circle-1 { width: 999px; height: 999px; left: calc(50% - 499.5px); bottom: calc(0% - 499.5px); } .cta-one__circle-2 { width: 792px; height: 792px; left: calc(50% - 396px); bottom: calc(0% - 396px); } .cta-one__circle-3 { width: 613px; height: 613px; left: calc(50% - 306.5px); bottom: calc(0% - 306.5px); } .cta-one .container { position: relative; padding-top: 80px; padding-bottom: 120px; } .cta-one__content { position: relative; } .cta-one__content h3 { margin: 0; color: var(--thm-black); font-weight: 800; font-size: 46px; } .cta-one__content p { margin: 0; color: #7c7d8a; font-weight: 300; font-size: 24px; margin-top: 25px; } .cta-one__btn { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); margin-top: 55px; } .cta-two { background-color: var(--thm-gray); padding-top: 120px; padding-bottom: 360px; position: relative; margin-bottom: -240px; } .cta-two .container { position: relative; } [class*=cta-two__shape-] { position: absolute; } .cta-two__shape-1 { top: -8%; left: 7%; -webkit-animation-name: bubbleMover; animation-name: bubbleMover; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-duration: 12s; } .cta-two__shape-2 { bottom: -6%; right: 9%; -webkit-animation-name: bubbleMover; animation-name: bubbleMover; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-duration: 8s; } .cta-two__shape-3 { top: 5%; right: 3%; -webkit-animation-name: bubbleMover; animation-name: bubbleMover; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-duration: 8s; } .cta-two__moc { position: absolute; top: 30px; right: -30px; animation: ImgBounce 10s ease-in-out 0s infinite alternate; } .cta-two__content .block-title { margin-bottom: 40px; } .cta-two__content>p { margin: 0; font-size: 18px; font-weight: 500; line-height: 34px; color: #7c7d8a; margin-bottom: 50px; } .cta-three { position: relative; padding-bottom: 120px; } .cta-three .container { position: relative; } [class*=cta-three__shape-] { position: absolute; } .cta-three__shape-1 { top: -14%; left: -1%; } .cta-three__shape-2 { top: -8%; right: 0; } .cta-three__shape-3 { bottom: 15%; right: 0; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: banner3Shake; animation-name: banner3Shake; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .cta-three__moc { position: absolute; top: -45px; left: -47px; animation: ImgBounce 10s ease-in-out 0s infinite alternate; } .cta-three__content { padding-left: 70px; } .cta-three__box { display: flex; position: relative; } .cta-three__box+.cta-three__box { margin-top: 40px; } .cta-three__box::before { content: ''; width: 1px; height: 110%; background-color: #e8e8ef; position: absolute; left: 37.5px; top: 75px; } .cta-three__box:last-child::before { display: none; } .cta-three__box-icon i { width: 75px; background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); height: 75px; border-radius: 50%; font-size: 44px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; position: relative; top: 5px; background-size: 200% auto; transition: all 500ms ease; } .cta-three__box:hover .cta-three__box-icon i { background-position: right center; } .cta-three__box:nth-child(1) .cta-three__box-icon i { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); } .cta-three__box:nth-child(2) .cta-three__box-icon i { background-image: linear-gradient(90deg, #4453ac 0%, #03a9db 51%, #4453ac 100%); } .cta-three__box-content { padding-left: 25px; } .cta-three__box-content h3 { margin: 0; font-size: 22px; font-weight: 600; margin-bottom: 15px; color: var(--thm-black); } .cta-three__box-content p { margin: 0; font-size: 18px; line-height: 34px; font-weight: 500; } .cta-three__btn { margin-top: 50px; } /*-------------------------------------------------------------- # Main Footer --------------------------------------------------------------*/ .site-footer { background-color: #272727; position: relative; overflow: hidden; } [class*=site-footer__shape-] { position: absolute; } .site-footer__shape-1 { top: -2.5%; left: 3%; -webkit-animation-name: shapeMover; animation-name: shapeMover; -webkit-animation-duration: 9s; animation-duration: 9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-delay: 0s; } .site-footer__shape-2 { bottom: 15%; right: 4%; -webkit-animation-name: shapeMover; animation-name: shapeMover; -webkit-animation-duration: 9s; animation-duration: 9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-delay: 2s; } .site-footer__shape-3 { position: absolute; left: calc(50% - 231.5px); bottom: calc(0% - 231px); opacity: 0.15; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: bounce; animation-name: bounce; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .site-footer .container { position: relative; z-index: 20; } .site-footer__upper { padding-bottom: 100px; padding-top: 140px; } /*footer widgets*/ .footer-widget__title { margin: 0; font-weight: 600; font-size: 20px; color: #fff; margin-bottom: 40px; } .footer-widget p { margin: 0; font-size: 16px; line-height: 32px; font-weight: 500; color: #a3a4b3; } .footer-widget p+p { margin-top: 25px; } .footer-widget p a { color: var(--thm-base); transition: all 500ms ease; } .footer-widget p a:hover { color: #fff; } .footer-widget__logo { display: inline-block; margin-top: -5px; margin-bottom: 20px; } .footer-widget__links-wrap { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; justify-content: space-between; } @media(min-width: 992px) { .footer-widget__links-wrap { padding-right: 70px; } .footer-widget__about { padding-right: 44px; } } .footer-widget__links ul { margin-bottom: 0; } .footer-widget__links ul li { line-height: 1em; font-size: 16px; font-weight: 500; } .footer-widget__links ul li+li { margin-top: 23px; } .footer-widget__links ul li a { color: #a3a4b3; display: block; position: relative; transition: all 500ms ease; } .footer-widget__links ul li a:hover { color: var(--thm-base); transform: translateX(20px); } .footer-widget__links ul li a::before { content: '\f101'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 14px; color: var(--thm-base); position: absolute; top: 50%; left: 0; transform: translateY(-40%) translateX(-20px); opacity: 0; transition: all 500ms ease; } .footer-widget__links ul li a:hover::before { opacity: 1; } .footer-widget__mc-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { display: block; width: 100%; border: none; outline: none; background-color: #fff; font-size: 16px; font-weight: 500; text-align: center; border-radius: 5px; height: 70px; } .footer-widget__mc-form ::placeholder { color: #7c7d8a; opacity: 1; } .footer-widget__mc-btn { width: 100%; padding-left: 0; padding-right: 0; margin-top: 10px; } /* footer bottom */ .site-footer__bottom .inner-container { border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; justify-content: space-between; padding-top: 39.5px; padding-bottom: 39.5px; } .site-footer__bottom .inner-container>p { margin: 0; font-size: 16px; font-weight: 500; color: #a3a4b3; } .site-footer__social { display: flex; align-items: center; justify-content: center; } .site-footer__social a { width: 44px; height: 44px; border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(90deg, #0349a6 0%, #15c27b 51%, #0349a6 100%); color: #fff; font-size: 16px; background-size: 200% auto; transition: all 500ms ease; } .site-footer__social a:hover { background-position: right center; } .site-footer__social a+a { margin-left: 10px; } .site-footer__social .fa-facebook-f { background-image: linear-gradient(90deg, #0349a6 0%, #15c27b 51%, #0349a6 100%); } .site-footer__social .fa-twitter { background-image: linear-gradient(90deg, #4453ac 0%, #03a9db 51%, #4453ac 100%); } .site-footer__social .fa-instagram { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); } .site-footer__social .fa-pinterest-p { background-image: linear-gradient(90deg, #e41256 0%, #ffa337 51%, #e41256 100%); } /*-------------------------------------------------------------- # Contact --------------------------------------------------------------*/ .contact-one { padding-top: 120px; position: relative; } .contact-one .container { position: relative; z-index: 11; } [class*=contact-one__shape-] { position: absolute; } .contact-one__shape-1 { bottom: -241px; left: 0; z-index: 11; } .contact-one__shape-2 { right: 2%; top: -62px; -webkit-animation-name: bubbleMover; animation-name: bubbleMover; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-duration: 8s; } .contact-one__shape-3 { right: -231.5px; bottom: -90px; z-index: 11; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: bounce; animation-name: bounce; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @media(min-width: 992px) { .contact-one__content { padding-right: 30px; } } .contact-one__images { display: flex; align-items: center; justify-content: space-between; } .contact-one__infos { margin-top: 55px; } .contact-one__infos-single { display: flex; align-items: center; } .contact-one__infos-single+.contact-one__infos-single { margin-top: 35px; } .contact-one__infos-icon i { width: 70px; height: 70px; border-radius: 50%; text-align: center; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 18px; background-image: linear-gradient(90deg, #0349a6 0%, #15c27b 100%); margin-right: 20px; } .contact-one__infos-single:nth-child(2) .contact-one__infos-icon i { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 100%); } .contact-one__infos-single:nth-child(3) .contact-one__infos-icon i { background-image: linear-gradient(90deg, #e41256 0%, #ffa337 100%); } .contact-one__infos-single h3 { margin: 0; color: var(--thm-black); font-size: 18px; font-weight: 500; line-height: 1em; } .contact-one__infos-single p { font-weight: 300; font-size: 22px; line-height: 36px; margin: 0; margin-top: 5px; } .contact-one__infos-single p a { color: inherit; transition: all 500ms ease; } .contact-one__infos-single p a:hover { color: var(--thm-base); } .contact-one__form .row { margin-left: -5px; margin-right: -5px; } .contact-one__form .row>[class*=col-] { padding-left: 5px; padding-right: 5px; } .contact-one__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), .contact-one__form textarea { display: block; border: none; width: 100%; margin-bottom: 10px; background-color: var(--thm-gray); font-size: 16px; font-weight: 500; color: #7c7d8a; padding-left: 30px; height: 68px; } .contact-one__form textarea { height: 188px; padding-top: 20px; } .contact-one__form ::placeholder { opacity: 1; color: #7c7d8a; } .contact-one__form .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100%; } .contact-one__form .bootstrap-select>.dropdown-toggle { border-radius: 0; padding-left: 30px; margin-bottom: 10px; background-color: var(--thm-gray); font-size: 16px; font-weight: 500; color: #7c7d8a; padding-left: 30px; height: 68px; padding-right: 30px; } .contact-one__form .bootstrap-select .dropdown-toggle .filter-option { display: flex; align-items: center; } .contact-one__form label.error { display: block; } /*-------------------------------------------------------------- # Blog --------------------------------------------------------------*/ .blog-one__home { padding-top: 120px; padding-bottom: 60px; background-color: var(--thm-gray); position: relative; } .blog-one__grid { padding-bottom: 120px; } .blog-one__shape-1 { position: absolute; top: 6%; right: 8%; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: banner3Shake; animation-name: banner3Shake; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .blog-one .container { position: relative; } .blog-one__single { margin-bottom: 90px; } .blog-one__image { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); padding: 10px; position: relative; background-size: 200% auto; overflow: hidden; } .blog-one__image>img { width: 100%; transform: scale(1); transition: all 500ms ease; } .blog-one__single:hover .blog-one__image { background-position: right center; } .blog-one__single:hover .blog-one__image>img { opacity: 0.5; transform: scale(1.1); } .blog-one__content { padding-top: 35px; padding-bottom: 45px; padding-left: 50px; padding-right: 50px; position: relative; box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.05); background-color: #fff; } @media(max-width: 375px) { .blog-one__content { padding-top: 30px; padding-bottom: 30px; padding-left: 25px; padding-right: 25px; } } .blog-one__meta { display: flex; margin: 0; align-items: center; } .blog-one__meta li a { color: #7c7d8a; font-size: 14px; display: flex; align-items: center; transition: all 500ms ease; } .blog-one__meta li a i { color: #ff3399; margin-right: 3px; } .blog-one__meta li+li { margin-left: 10px; } .blog-one__meta li a:hover { color: var(--thm-black); } .blog-one__link { display: block; width: 68px; height: 68px; background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); display: flex; text-align: center; font-size: 18px; align-items: center; justify-content: center; color: #fff; position: absolute; bottom: -34px; right: 10px; transition: all 500ms ease; background-size: 200% auto; } .blog-one__link:hover { color: #fff; background-position: right center; } @media(max-width: 375px) { .blog-one__link { width: 50px; height: 50px; bottom: -25px; font-size: 14px; } } .blog-one__content h3 { color: var(--thm-black); margin: 0; font-size: 26px; line-height: 40px; font-weight: 600; } @media(max-width: 375px) { .blog-one__content h3 { font-size: 22px; line-height: 1.3em; } } .blog-one__content h3 a { transition: all 500ms ease; color: inherit; } .blog-one__content h3 a:hover { color: var(--thm-base); } .blog-one [class*=col-]:nth-child(1) .blog-one__image, .blog-one [class*=col-]:nth-child(1) .blog-one__link { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); } .blog-one [class*=col-]:nth-child(2) .blog-one__image, .blog-one [class*=col-]:nth-child(2) .blog-one__link { background-image: linear-gradient(90deg, #e41256 0%, #ffa337 51%, #e41256 100%); } .blog-one [class*=col-]:nth-child(3) .blog-one__image, .blog-one [class*=col-]:nth-child(3) .blog-one__link { background-image: linear-gradient(90deg, #4453ac 0%, #03a9db 51%, #4453ac 100%); } .blog-one [class*=col-]:nth-child(4) .blog-one__image, .blog-one [class*=col-]:nth-child(4) .blog-one__link { background-image: linear-gradient(90deg, #0349a6 0%, #15c27b 51%, #0349a6 100%); } .blog-one [class*=col-]:nth-child(5) .blog-one__image, .blog-one [class*=col-]:nth-child(5) .blog-one__link { background-image: linear-gradient(90deg, #ff3399 0%, #717284 51%, #ff3399 100%); } .blog-one [class*=col-]:nth-child(6) .blog-one__image, .blog-one [class*=col-]:nth-child(6) .blog-one__link { background-image: linear-gradient(90deg, #03a631 0%, #d6c10f 51%, #03a631 100%); } /*-------------------------------------------------------------- ## Blog Details --------------------------------------------------------------*/ .blog-details { padding-top: 120px; padding-bottom: 120px; } .blog-details__content h3 { margin: 0; color: var(--thm-black); font-size: 40px; font-weight: 600; margin-bottom: 35px; } .blog-details__image { margin-bottom: 20px; padding: 10px; background-image: linear-gradient(90deg, #e41256 0%, #ffa337 51%, #e41256 100%); } .blog-details__image>img { width: 100%; } .blog-details__content p { margin: 0; } .blog-details__content p+p { margin-top: 40px; } .blog-details__content .blog-one__meta li a { font-size: 18px; } .blog-details__bottom { border-top: 1px solid #e8e8ef; padding-top: 30px; padding-bottom: 30px; margin-top: 50px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .blog-details__tags { margin: 0; display: flex; align-items: center; } .blog-details__tags span { font-size: 20px; font-weight: 600; color: var(--thm-black); } .blog-details__tags a { color: #7c7d8a; font-size: 16px; margin-left: 5px; transition: all 500ms ease; } .blog-details__tags a:hover { color: var(--thm-base); } .author-one { padding: 60px; background-color: var(--thm-gray); position: relative; margin-bottom: 60px; } .author-one__image, .author-one__content { display: table-cell; vertical-align: middle; } .author-one__image { width: 170px; } .author-one__content { padding-left: 40px; } .author-one__content h3 { margin: 0; color: var(--thm-black); font-weight: 600; font-size: 20px; } .author-one__content p { margin: 0; font-size: 18px; line-height: 34px; font-weight: 500; color: #7c7d8a; margin-top: 40px; } .comment-one__title, .comment-form__title { margin: 0; color: var(--thm-black); font-size: 26px; font-weight: 800; margin-bottom: 55px; } .comment-one__single { position: relative; border-bottom: 1px solid #e8e8ef; margin-bottom: 60px; padding-bottom: 50px; } .comment-one__image, .comment-one__content { display: table-cell; vertical-align: top; } .comment-one__image { width: 90px; } .comment-one__image>img { width: 100%; border-radius: 50%; } .comment-one__content { padding-left: 40px; padding-right: 105px; } .comment-one__date { display: flex; color: var(--thm-base); font-size: 16px; font-weight: 500; margin-bottom: 25px; } .comment-one__date span { margin-left: 10px; margin-right: 10px; } .comment-one__content h3 { margin: 0; font-size: 20px; color: var(--thm-black); font-weight: 600; } .comment-one__content p { margin: 0; font-size: 18px; line-height: 34px; color: #7c7d8a; font-weight: 500; } .comment-one__btn { padding: 8px 29.5px; position: absolute; top: 0; right: 0; } /*-------------------------------------------------------------- # Page Header --------------------------------------------------------------*/ .page-header { background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; padding-top: 245px; padding-bottom: 190px; } @media(max-width: 991px) { .page-header { padding-top: 180px; padding-bottom: 120px; } } .page-header::before { content: ''; width: 100%; height: 200px; position: absolute; bottom: 0; left: 0; background-color: var(--thm-gray); clip-path: polygon(71.5% 0, 0% 100%, 100% 100%); } @media(max-width: 991px) { .page-header::before { height: 80px; } } .page-header__white-curv::before { background-color: #fff; } .page-header .container { position: relative; } .page-header h2 { margin: 0; color: #fff; text-transform: uppercase; font-size: 70px; font-weight: 300; line-height: 1em; } /*-------------------------------------------------------------- # Sidemenu --------------------------------------------------------------*/ .side-menu__block { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1000; -webkit-transform: scale(0, 1); transform: scale(0, 1); -webkit-transform-origin: left center; transform-origin: left center; -webkit-transition: -webkit-transform .7s ease; transition: -webkit-transform .7s ease; transition: transform .7s ease; transition: transform .7s ease, -webkit-transform .7s ease; } .side-menu__block.active { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .side-menu__block-overlay { width: 100%; height: 100%; background-color: var(--thm-black); position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 999; opacity: .7; } .side-menu__block-overlay .cursor-follower { background-color: rgba(var(--thm-black-rgb), 0.3); } .side-menu__block-inner { position: relative; max-width: 532px; width: 100%; margin-right: auto; height: 100vh; background-color: var(--thm-gray); z-index: 999999; overflow-y: auto; padding: 40px 0; padding-top: 20px; position: relative; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; align-content: space-between; } @media(max-width: 575px) { .side-menu__block-inner { max-width: 480px; } } @media(max-width: 480px) { .side-menu__block-inner { max-width: 400px; } } @media(max-width: 375px) { .side-menu__block-inner { max-width: 300px; } } .side-menu__block-inner .mCustomScrollBox { width: 100%; } .side-menu__top { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: justify; justify-content: space-between; padding-left: 100px; padding-right: 40px; } .mobile-nav__container { padding-left: 100px; padding-right: 100px; padding-top: 50px; } .mobile-nav__container ul { margin: 0; padding: 0; list-style: none; } .mobile-nav__container li.dropdown ul { display: none; padding-left: 0.5em; } .mobile-nav__container li.dropdown { position: relative; } .mobile-nav__container li.dropdown .dropdown-btn { border: none; outline: none; background-color: transparent; color: #9ca3a9; font-size: 14px; padding-left: 10px; padding-right: 10px; width: auto; -webkit-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: transfrom 500ms ease; transition: transfrom 500ms ease; } .mobile-nav__container li.dropdown .dropdown-btn.open { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .mobile-nav__container li+li { margin-top: 10px; } .mobile-nav__container li a { text-transform: uppercase; color: #9ca3a9; font-size: 18px; font-weight: 500; display: block; font-family: var(--thm-font); -webkit-transition: all 500ms ease; transition: all 500ms ease; position: relative; } .mobile-nav__container li a:hover { color: var(--thm-base); } .mobile-nav__container li.current-menu-item>a, .mobile-nav__container li.current>a { color: var(--thm-base); } .side-menu__social { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; margin-top: 80px; margin-bottom: 40px; } .side-menu__social a { width: 44px; height: 44px; border-radius: 50%; text-align: center; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(90deg, #0349a6 0%, #15c27b 51%, #0349a6 100%); color: #fff; font-size: 16px; background-size: 200% auto; transition: all 500ms ease; } .side-menu__social a:hover { background-position: right center; } .side-menu__social a+a { margin-left: 10px; } .side-menu__social .fa-facebook-f { background-image: linear-gradient(90deg, #0349a6 0%, #15c27b 51%, #0349a6 100%); } .side-menu__social .fa-twitter { background-image: linear-gradient(90deg, #4453ac 0%, #03a9db 51%, #4453ac 100%); } .side-menu__social .fa-instagram { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 51%, #4a0e8f 100%); } .side-menu__social .fa-pinterest-p { background-image: linear-gradient(90deg, #e41256 0%, #ffa337 51%, #e41256 100%); } .side-menu__content { padding-left: 100px; padding-right: 100px; } .side-menu__content p { margin: 0; font-size: 18px; line-height: 30px; font-weight: 500; color: #7c7d8a; letter-spacing: .02em; } .side-menu__content p+p { margin-top: 30px; } .side-menu__content p a { color: var(--thm-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .side-menu__content p a:hover { color: var(--thm-base); } .side-menu__sep { width: calc(100% - 200px); margin-left: auto; margin-right: auto; height: 1px; background-color: #fff; margin-top: 70px; margin-bottom: 70px; } .side-menu__text p { font-size: 16px; line-height: 32px; font-weight: 500; color: #7c7d8a; margin: 0; margin-bottom: 25px; } .side-menu__text a { color: var(--thm-base); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .side-menu__text a:hover { color: var(--thm-black); } .side-menu__block__copy { font-size: 16px; font-weight: 500; color: #7c7d8a; margin: 0; } @media(max-width: 575px) { .side-menu__top, .side-menu__content, .mobile-nav__container { padding-left: 50px; padding-right: 50px; } .side-menu__sep { margin-top: 40px; margin-bottom: 40px; width: calc(100% - 100px); } } @media(max-width: 480px) { .side-menu__top, .side-menu__content, .mobile-nav__container { padding-left: 25px; padding-right: 25px; } .side-menu__sep { width: calc(100% - 50px); } .side-menu__social { margin-top: 40px; } .side-menu__social a { width: 45px; height: 45px; } } /*-------------------------------------------------------------- # Sidebar --------------------------------------------------------------*/ .sidebar-single:not(.sidebar__search) { background-color: var(--thm-gray); padding: 50px; } .sidebar-single+.sidebar-single { margin-top: 30px; } .sidebar__title { margin: 0; color: var(--thm-black); font-weight: 600; font-size: 24px; margin-bottom: 25px; line-height: 1em; } .sidebar__search-form { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 100%); display: block; width: 100%; position: relative; } .sidebar__search-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) { display: block; width: 100%; border: none; outline: none; background-color: transparent; color: #fff; font-size: 16px; padding-left: 50px; height: 83px; } .sidebar__search-form ::placeholder { opacity: 1; color: #fff; } .sidebar__search-form button[type=submit] { position: absolute; top: 50%; transform: translateY(-50%); width: auto; right: 50px; color: #fff; border: none; outline: none; background-color: transparent; } .sidebar__post-single { position: relative; padding-left: 80px; } .sidebar__post-single+.sidebar__post-single { margin-top: 30px; } .sidebar__post-single>img { border-radius: 50%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } .sidebar__post-single h3 { font-size: 16px; line-height: 28px; color: #7c7d8a; margin: 0; } .sidebar__post-single h3 a { color: inherit; } .sidebar__post-single h3 a:hover { color: var(--thm-base); } .sidebar__cat-list { margin: 0; } .sidebar__cat-list li { line-height: 1em; } .sidebar__cat-list li+li { margin-top: 20px; } .sidebar__cat-list li a { color: #7c7d8a; font-size: 16px; font-weight: 500; transition: all 500ms ease; } .sidebar__cat-list li a:hover { color: var(--thm-base); } .sidebar__tags-list { margin-top: -10px; } .sidebar__tags-list a { font-size: 16px; line-height: 34px; color: #7c7d8a; font-weight: 500; transition: all 500ms ease; } .sidebar__tags-list a:hover { color: var(--thm-base); } /*-------------------------------------------------------------- # FAQ --------------------------------------------------------------*/ .faq-one { padding: 120px 0; position: relative; counter-reset: faqNumber; } [class*=faq-one__shape-] { position: absolute; } .faq-one__shape-1 { top: -145.5px; left: 4%; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: banner3Shake; animation-name: banner3Shake; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .faq-one__shape-3 { left: 4%; bottom: -4%; z-index: 11; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: banner3Shake; animation-name: banner3Shake; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .faq-one__shape-2 { top: 0; right: 0; } .faq-one .container { position: relative; } @media (min-width: 992px) { .faq-one .container { max-width: 1000px; } } .faq-accrodion .accrodion { position: relative; -webkit-transition: all .4s ease; transition: all .4s ease; counter-increment: faqNumber; } .faq-accrodion .accrodion:before { content: ''; position: absolute; top: -1px; bottom: -1px; left: 0px; right: 0px; border-radius: 0px; -webkit-transform: scaleX(0); transform: scaleX(0); background-image: linear-gradient(90deg, #4a0e8f 0%, #b330a7 100%); -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } .faq-accrodion .accrodion::after { font-family: var(--thm-font); font-size: 60px; line-height: 1em; color: #e8e8ef; font-weight: 300; content: counters(faqNumber, ".", decimal-leading-zero); position: absolute; top: 11px; left: 0; transform: translateX(-50%); z-index: 11; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .faq-accrodion .accrodion+.accrodion { margin-top: 20px; } .faq-accrodion .accrodion.active { box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.04); } .faq-accrodion .accrodion.active .accrodion-inner { margin: 0 1px; } .faq-accrodion .accrodion.active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .faq-accrodion .accrodion.active .accrodion-title { padding-bottom: 0; } .faq-accrodion .accrodion.active .accrodion-title h4 { color: #ff3399; } .faq-accrodion .accrodion .accrodion-inner { background-color: #fff; padding: 30.5px 0; border-style: solid; border-width: 1px; border-color: #e8e8ef; border-radius: 0px; position: relative; -webkit-transition: all .4s ease; transition: all .4s ease; } .faq-accrodion .accrodion .accrodion-title { padding: 0px 60px; cursor: pointer; position: relative; -webkit-transition: all .4s ease; transition: all .4s ease; } @media (max-width: 375px) { .faq-accrodion .accrodion .accrodion-title { padding-right: 50px; } } .faq-accrodion .accrodion .accrodion-title:before { content: '\f067'; font-family: "Font Awesome 5 Free"; font-weight: 900; width: 57px; height: 57px; border-radius: 50%; font-size: 14px; color: #ffffff; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 50%; right: 60px; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 1; background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 100%); transition: all 500ms ease; } .faq-accrodion .accrodion .accrodion-title::after { content: '\f068'; font-family: "Font Awesome 5 Free"; font-weight: 900; width: 57px; height: 57px; border-radius: 50%; font-size: 14px; color: #ffffff; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 50%; right: 60px; -webkit-transform: translateY(-50%); transform: translateY(-50%); opacity: 0; background-image: linear-gradient(90deg, #e41256 0%, #ffa337 100%); transition: all 500ms ease; } .faq-accrodion .accrodion.active .accrodion-title::before { opacity: 0; } .faq-accrodion .accrodion.active .accrodion-title::after { opacity: 1; } .faq-accrodion .accrodion .accrodion-title h4 { margin: 0; color: #30283d; font-size: 20px; font-weight: 500; } @media (max-width: 375px) { .faq-accrodion .accrodion .accrodion-title h4 { line-height: 1.4em; } } .faq-accrodion .accrodion .accrodion-content .inner { padding: 0 60px; padding-right: 155px; padding-top: 35px; padding-bottom: 0px; } .faq-accrodion .accrodion .accrodion-content p { margin: 0; color: #7c7d8a; font-size: 18px; line-height: 34px; font-weight: 500; } /*-------------------------------------------------------------- # Brand --------------------------------------------------------------*/ .brand-one { position: relative; z-index: 11; padding-top: 93.5px; padding-bottom: 93.5px; background-image: linear-gradient(90deg, #4453ac 0%, #03a9db 100%); } .brand-one img { opacity: 0.6; transition: all 500ms ease; } .brand-one img:hover { opacity: 1; } /*-------------------------------------------------------------- # Testimonials --------------------------------------------------------------*/ .testimonials__one { background-color: #f4f4f8; padding: 120px 0; position: relative; } [class*=testimonials__one-shape-] { position: absolute; } .testimonials__one-shape-1 { top: -43px; left: 2%; -webkit-animation-name: bubbleMover; animation-name: bubbleMover; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-duration: 8s; } .testimonials__one-shape-2 { top: 6%; right: 6%; -webkit-animation-name: shapeMover; animation-name: shapeMover; -webkit-animation-duration: 9s; animation-duration: 9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .testimonials__one .map-img { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); animation-name: mapMover; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; transition: all .4s ease; transform-origin: center center; } @keyframes mapMover { 0% { transform: translateY(-50%) translateX(0); } 50% { transform: translateY(-55%) translateX(-20px); } 100% { transform: translateY(-50%) translateX(0); } } .testimonials__one .block-title { margin-bottom: 40px; } .testimonials__one .testimonials__one__single p { margin: 0; color: #7c7d8a; font-weight: 300; } .testimonials__one .testimonials__one__single h3 { color: #7c7d8a; font-weight: 600; font-size: 20px; margin: 0; margin-top: 40px; } .testimonials__one .testi-carousel-one .owl-nav { margin: 0; position: absolute; bottom: -10px; right: 0; background-color: #F2FFF8; } .testimonials__one .testi-carousel-one .owl-nav [class*=owl-] { margin: 0px 5px; padding: 0; background-color: transparent; opacity: .3; color: var(--thm-black); font-size: 32px; transition: all .4s ease; } .testimonials__one .testi-carousel-one .owl-nav [class*=owl-]:hover { opacity: 1; } .testimonials__one .bx-wrapper { border: none; box-shadow: none; background-color: transparent; margin-bottom: 0; } .testimonials__one .bx-wrapper ul.slider { padding: 0; margin: 0; } .testimonials__one .bx-wrapper .bx-controls-direction { position: absolute; bottom: -10px; /* background-color: #f4f4f8; */ right: 0; } .testimonials__one .bx-wrapper .bx-controls-direction a { text-indent: 0; background-image: none; font-size: 32px; position: relative; top: 0px; opacity: .3; color: var(--thm-black); transition: all .4s ease; } .testimonials__one .bx-wrapper .bx-controls-direction a:hover { opacity: 1; } .testimonials__one .bx-wrapper .bx-prev { left: 0px; margin-right: 25px; } .testimonials__one .bx-wrapper .bx-next { right: 0px; } #testimonials-slider-pager { width: 474px; height: 474px; border-radius: 50%; position: relative; background-image: url(../images/shapes/testi-circle.png); background-position: center center; background-repeat: no-repeat; animation-name: tesiMove; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; transition: all .4s ease; transform-origin: center center; } @keyframes tesiMove { 0% { transform: rotate(0deg); } 15% { transform: rotate(2deg); } 33% { transform: rotate(4deg); } 66% { transform: rotate(2deg); } 100% { transform: rotate(0deg); } } #testimonials-slider-pager .testimonials-slider-pager-one .pager-item { width: 71px; height: 71px; display: inline-block; vertical-align: middle; position: absolute; } #testimonials-slider-pager .testimonials-slider-pager-one .pager-item:nth-child(1) { top: 70px; left: 10px; } #testimonials-slider-pager .testimonials-slider-pager-one .pager-item:nth-child(2) { top: 70px; right: 10px; } #testimonials-slider-pager .testimonials-slider-pager-one .pager-item:nth-child(3) { bottom: 70px; left: 10px; } #testimonials-slider-pager .testimonials-slider-pager-one .pager-item:nth-child(4) { bottom: 70px; right: 10px; } #testimonials-slider-pager .testimonials-slider-pager-one .pager-item:nth-child(5) { bottom: -35px; left: 50%; transform: translateX(-50%); } #testimonials-slider-pager .testimonials-slider-pager-one .pager-item:nth-child(6) { top: -35px; left: 50%; transform: translateX(-50%); } #testimonials-slider-pager .testimonials-slider-pager-one .pager-item>img { width: 100%; border-radius: 50%; transition: all .4s ease; } #testimonials-slider-pager .testimonials-slider-pager-one .pager-item.active img { opacity: .75; transform: scale(0.95); } #testimonials-slider-pager .testimonials-slider-pager-two .pager-item { width: 163px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition: all .4s ease; } #testimonials-slider-pager .testimonials-slider-pager-two .pager-item.active { opacity: 1; transform: translate(-50%, -50%) scale(0.95); } #testimonials-slider-pager .testimonials-slider-pager-two .pager-item>img { width: 100%; border-radius: 50%; } /*-------------------------------------------------------------- # App Screens --------------------------------------------------------------*/ .app-shot-one { padding-top: 120px; padding-bottom: 170px; position: relative; } [class*=app-shot__shape-] { position: absolute; } .app-shot__shape-2 { top: 3%; left: 12%; -webkit-animation-name: bubbleMover; animation-name: bubbleMover; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; animation-duration: 8s; } .app-shot__shape-1 { right: -231.5px; top: -90px; z-index: 11; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: bounce; animation-name: bounce; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .app-shot-one__bg { position: absolute; bottom: 25%; left: 0; } .app-shot-one .container-fluid { max-width: 1595px; width: 100%; position: relative; } .app-shot-one .app-shot-one__carousel { padding-top: 100.5px; padding-bottom: 100.5px; margin-top: -20px; } .app-shot-one .app-shot-one__carousel:before { content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -49%) scaleY(1); transform: translate(-50%, -49%) scaleY(1); background-image: url(../images/app-shots/app-screen-moc.png); background-position: center center; background-repeat: no-repeat; width: 423px; height: 739px; } @media (max-width: 1440px) { .app-shot-one .app-shot-one__carousel:before { -webkit-transform: translate(-50%, -49%) scaleY(0.95); transform: translate(-50%, -49%) scaleY(0.95); } } @media (max-width: 1280px) { .app-shot-one .app-shot-one__carousel:before { -webkit-transform: translate(-50%, -49%) scale(0.8); transform: translate(-50%, -49%) scale(0.8); } } .app-shot-one .app-shot-one__carousel .owl-dots { position: absolute; bottom: -60px; left: 0; text-align: center; z-index: 10; width: 100%; } .app-shot-one .app-shot-one__carousel .owl-dots .owl-dot span { width: 7px; height: 7px; background-color: #30283d; -webkit-transform: scale(1); transform: scale(1); opacity: 0.2; margin: 0 3px; -webkit-transition: opacity .4s ease, background .4s ease, -webkit-transform .4s ease; transition: opacity .4s ease, background .4s ease, -webkit-transform .4s ease; transition: transform .4s ease, opacity .4s ease, background .4s ease; transition: transform .4s ease, opacity .4s ease, background .4s ease, -webkit-transform .4s ease; } .app-shot-one .app-shot-one__carousel .owl-dots .owl-dot:hover span, .app-shot-one .app-shot-one__carousel .owl-dots .owl-dot.active span { opacity: 1; background-color: #ff3399; -webkit-transform: scale(1.285); transform: scale(1.285); } .app-shot-one .owl-item img { -webkit-transition: -webkit-transform .4s ease; transition: -webkit-transform .4s ease; transition: transform .4s ease; transition: transform .4s ease, -webkit-transform .4s ease; } /*-------------------------------------------------------------- # Pricing --------------------------------------------------------------*/ .pricing-one { position: relative; } .pricing-one__sep { width: 100%; height: 1px; background-color: #e8e8ef; display: block; margin-bottom: 120px; } .pricing-one__single { text-align: center; border-style: solid; border-width: 1px; border-color: rgb(232, 232, 239); background-color: rgb(255, 255, 255); box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.05); } .pricing-one__inner { position: relative; background-color: #fff; overflow: hidden; padding-top: 60px; padding-bottom: 60px; } .pricing-one__icon { position: relative; } .pricing-one__single h3 { margin: 0; color: var(--thm-black); font-size: 46px; font-weight: 500; position: relative; line-height: 1em; margin-top: 20px; margin-bottom: 20px; } .pricing-one__single p { margin: 0; font-size: 18px; font-weight: 500; color: #7c7d8a; position: relative; line-height: 1em; } .pricing-one__line { position: absolute; top: -145.5px; left: calc(50% - 147.5px); } .pricing-one__list { margin-bottom: 0; position: relative; border-top: 1px solid #e8e8ef; padding-bottom: 55px; padding-top: 55px; margin-top: 50px; } .pricing-one__list li { line-height: 1em; font-size: 18px; font-weight: 500; color: #7c7d8a; } .pricing-one__list li i { color: #ff3399; font-size: 14px; margin-right: 5px; } .pricing-one__list li+li { margin-top: 20px; } .pricing-one__single span { display: block; text-transform: uppercase; line-height: 1em; color: #7c7d8a; font-weight: 500; position: relative; font-size: 12px; letter-spacing: .2em; margin-top: 20px; } .pricing-one__btn { position: relative; } .pricing-one .block-title { margin-bottom: 30px; } .pricing-one .switch { position: relative; display: inline-block; width: 79px; height: 36px; vertical-align: middle; margin: 0; } .pricing-one .switch input { display: none; } .pricing-one .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; -webkit-transition: .4s; transition: .4s; background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 100%); box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.03); } .pricing-one .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 6px; bottom: 6px; -webkit-transform: translateX(0px); transform: translateX(0px); background-color: #fff; -webkit-transition: .4s; transition: .4s; } .pricing-one input:focus+.slider { -webkit-box-shadow: 0 0 1px #2196F3; box-shadow: 0 0 1px #2196F3; } .pricing-one .switch.off .slider:before { -webkit-transform: translateX(42px); transform: translateX(42px); } .pricing-one .slider.round { border-radius: 34px; } .pricing-one .slider.round:before { border-radius: 50%; } .pricing-one ul.switch-toggler-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 60px; } .pricing-one ul.switch-toggler-list li a { font-size: 18px; font-weight: 500; color: #7c7d8a; padding-left: 10px; padding-right: 10px; display: block; } .pricing-one ul.switch-toggler-list li.active a { color: var(--thm-black); } /*-------------------------------------------------------------- # Funfact --------------------------------------------------------------*/ .funfact-one { padding-top: 110px; padding-bottom: 120px; position: relative; } [class*=funfact-one__shape-] { position: absolute; } .funfact-one__shape-1 { top: 20px; left: 0; } .funfact-one__shape-2 { bottom: -10%; left: 14%; z-index: 11; -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: banner3Shake; animation-name: banner3Shake; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-delay: 1s; animation-delay: 1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .funfact-one__shape-3 { bottom: -100%; right: 4%; -webkit-animation-name: shapeMover; animation-name: shapeMover; -webkit-animation-duration: 9s; animation-duration: 9s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .funfact-one__single { text-align: center; } .funfact-one__single h3 { margin: 0; font-size: 60px; color: var(--thm-black); font-weight: 300; line-height: 1em; margin-bottom: 15px; } .funfact-one__single p { margin: 0; font-size: 18px; font-weight: 500; line-height: 1em; color: #7c7d8a; } .funfact-one__single p::before { content: ''; width: 12px; height: 12px; display: inline-block; border-radius: 50%; margin-right: 10px; background-image: linear-gradient(90deg, #4453ac 0%, #03a9db 100%); } .funfact-one [class*=col-]:nth-child(1) .funfact-one__single p::before { background-image: linear-gradient(90deg, #4453ac 0%, #03a9db 100%); } .funfact-one [class*=col-]:nth-child(2) .funfact-one__single p::before { background-image: linear-gradient(90deg, #e41256 0%, #ffa337 100%); } .funfact-one [class*=col-]:nth-child(3) .funfact-one__single p::before { background-image: linear-gradient(90deg, #4a0e8f 0%, #b430a7 100%); } .funfact-one [class*=col-]:nth-child(4) .funfact-one__single p::before { background-image: linear-gradient(90deg, #0349a6 0%, #15c27b 100%); } /*-------------------------------------------------------------- # Video --------------------------------------------------------------*/ .video-one__box { background-image: linear-gradient(90deg, rgb(74, 14, 143) 0%, rgb(180, 48, 167) 100%); position: relative; } .video-one__box>img { width: 100%; opacity: 0.4; } .video-one__content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; } .video-one__content::before { position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(90deg, rgb(74, 14, 143) 0%, rgb(180, 48, 167) 100%); opacity: 0.4; } .video-one__content h3 { font-weight: 800; color: #fff; font-size: 65px; margin: 0; position: relative; } .video-one__content .video-popup { width: 80px; height: 80px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--thm-black); font-size: 18px; position: relative; margin-bottom: 40px; } .video-one__content .video-popup::before { content: ''; position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 2px solid #fff; opacity: .4; top: calc(50% - 60px); left: calc(50% - 60px); -webkit-animation: videoBtnAnim 3s ease-in infinite; animation: videoBtnAnim 3s ease-in infinite; } .video-one__content .video-popup::after { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; border: 2px solid #fff; opacity: .15; top: calc(50% - 80px); left: calc(50% - 80px); -webkit-animation: videoBtnAnim 5s ease-in-out infinite; animation: videoBtnAnim 5s ease-in-out infinite; } @keyframes videoBtnAnim { 0% { -webkit-transform: scale(0.8); transform: scale(0.8); } 25% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.2); transform: scale(1.2); } 75% { -webkit-transform: scale(1); transform: scale(1); } 100% { -webkit-transform: scale(0.8); transform: scale(0.8); } }