/* Table of contents */ /* 1. predefine 2. nav 3. banner 4. modal 5. modal search 6. modal flag 7. offset sidebar 8. offset cart 9. offset info bar 10. domain search 11. why choose us 12. pricing 13. service 14. call to action 15. feature 16. clients 17. hosting information 18. testimonial 19. blog 20. footer 21. pricing feature 22. included feature 23. inner banner 24. contact info 25. form filed 26. intro video 27. office 28. team 29. included feature list 30. domain price 31. blog list 32. side bar 33. post single 34. comments area 35. cart 36. cart check out 37. VPS Slider 38. Dedicated Server ========================== element list start ======================== 1. Element 2. Buttons 3. Social list 4. Select 5. Section title 6. nav tab 7. unorder list 8. breadCumb 9. accordion 10. map 11. custom control 12. pagination 13. prelaoder 14. Order list 15. inheritance */ /* var list */ /* mixing */ /* function */ /*--------------------------------------------------============================================================ 1. predefine =================================================--------------------------------------------------------------*/ /* Author: XpeedStudio Author URI: http://themeforest.net/user/XpeedStudio/portfolio */ /* ========================================================================== Author's custom styles ========================================================================== */ /* karla-regular - latin */ @font-face { font-family: 'Karla'; font-style: normal; font-weight: 400; src: url('https://web-arena.net/en/fonts//karla-v15-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('https://web-arena.net/en/fonts//karla-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://web-arena.net/en/fonts//karla-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://web-arena.net/en/fonts//karla-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ url('https://web-arena.net/en/fonts//karla-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://web-arena.net/en/fonts//karla-v15-latin-regular.svg#Karla') format('svg'); /* Legacy iOS */ } /* karla-700 - latin */ @font-face { font-family: 'Karla'; font-style: normal; font-weight: 700; src: url('https://web-arena.net/en/fonts//karla-v15-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('https://web-arena.net/en/fonts//karla-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://web-arena.net/en/fonts//karla-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('https://web-arena.net/en/fonts//karla-v15-latin-700.woff') format('woff'), /* Modern Browsers */ url('https://web-arena.net/en/fonts//karla-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://web-arena.net/en/fonts//karla-v15-latin-700.svg#Karla') format('svg'); /* Legacy iOS */ } /* karla-700italic - latin */ @font-face { font-family: 'Karla'; font-style: italic; font-weight: 700; src: url('https://web-arena.net/en/fonts//karla-v15-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('https://web-arena.net/en/fonts//karla-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://web-arena.net/en/fonts//karla-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('https://web-arena.net/en/fonts//karla-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('https://web-arena.net/en/fonts//karla-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://web-arena.net/en/fonts//karla-v15-latin-700italic.svg#Karla') format('svg'); /* Legacy iOS */ } /* rubik-300 - latin */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 300; src: url('https://web-arena.net/en/fonts//rubik-v14-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('https://web-arena.net/en/fonts//rubik-v14-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://web-arena.net/en/fonts//rubik-v14-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('https://web-arena.net/en/fonts//rubik-v14-latin-300.woff') format('woff'), /* Modern Browsers */ url('https://web-arena.net/en/fonts//rubik-v14-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://web-arena.net/en/fonts//rubik-v14-latin-300.svg#Rubik') format('svg'); /* Legacy iOS */ } /* rubik-500 - latin */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 500; src: url('https://web-arena.net/en/fonts//rubik-v14-latin-500.eot'); /* IE9 Compat Modes */ src: local(''), url('https://web-arena.net/en/fonts//rubik-v14-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://web-arena.net/en/fonts//rubik-v14-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('https://web-arena.net/en/fonts//rubik-v14-latin-500.woff') format('woff'), /* Modern Browsers */ url('https://web-arena.net/en/fonts//rubik-v14-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://web-arena.net/en/fonts//rubik-v14-latin-500.svg#Rubik') format('svg'); /* Legacy iOS */ } /* rubik-regular - latin */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 400; src: url('https://web-arena.net/en/fonts//rubik-v14-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('https://web-arena.net/en/fonts//rubik-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://web-arena.net/en/fonts//rubik-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('https://web-arena.net/en/fonts//rubik-v14-latin-regular.woff') format('woff'), /* Modern Browsers */ url('https://web-arena.net/en/fonts//rubik-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://web-arena.net/en/fonts//rubik-v14-latin-regular.svg#Rubik') format('svg'); /* Legacy iOS */ } /* rubik-700 - latin */ @font-face { font-family: 'Rubik'; font-style: normal; font-weight: 700; src: url('https://web-arena.net/en/fonts//rubik-v14-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('https://web-arena.net/en/fonts//rubik-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('https://web-arena.net/en/fonts//rubik-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('https://web-arena.net/en/fonts//rubik-v14-latin-700.woff') format('woff'), /* Modern Browsers */ url('https://web-arena.net/en/fonts//rubik-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('https://web-arena.net/en/fonts//rubik-v14-latin-700.svg#Rubik') format('svg'); /* Legacy iOS */ } :root { font-size: 17px; } body { font-family: "Karla", sans-serif; font-weight: 400; line-height: 1.647; color: #70799f; background-color: #FFFFFF; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } iframe { border: none; } a, b, div, ul, li { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -moz-outline-: none; } a:focus, a:active, input, input:hover, input:focus, input:active, textarea, textarea:hover, textarea:focus, textarea:active { -moz-outline: none; outline: none; } img:not([draggable]), embed, object, video { max-width: 100%; height: auto; } a { text-decoration: none; outline: 0; } a:active, a:focus, a:hover, a:visited { text-decoration: none; outline: 0; } img { border: none; max-width: 100%; } ul, li { margin: 0; padding: 0; list-style: none; } .clear-both:before, .clear-both:after { display: table; content: ""; clear: both; } .mobileHide { display: inline; } /* Smartphone Portrait and Landscape */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ .mobileHide { display: none;} } /*--------------------------------------------------============================================================ 2. nav =================================================--------------------------------------------------------------*/ /* top bar */ .header-transparent { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; } .header-transparent .xs-top-bar { background-color: rgba(0, 0, 0, 0.25); } .header-transparent .xs-menus .nav-menu > li > a { color: #FFFFFF; } .header-transparent .xs-header { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .header-transparent .xs-menu-tools > li > a { color: #FFFFFF; } .header-transparent .xs-menus .nav-menu > li > a::before { background-color: #fefefe; } .xs-top-bar { background-color: black; padding: 15px 0; line-height: normal; } .xs-top-bar.topbar-v2 { background-color: rgba(0, 0, 0, 0.102); } .xs-top-bar-info li { display: inline-block; font-size: 0.88235rem; margin-right: 58px; } .xs-top-bar-info li:last-child { margin-right: 0px; } .xs-top-bar-info li p, .xs-top-bar-info li a { color: #FFFFFF; } .xs-top-bar-info li p { margin-bottom: 0px; } .xs-top-bar-info li i { padding-right: 8px; } .top-menu { text-align: right; } .top-menu li { display: inline-block; margin-right: 30px; } .top-menu li:last-child { margin-right: 0px; } .top-menu li a { color: #FFFFFF; font-size: 0.88235rem; } .top-menu li a i { font-size: 0.82353rem; position: relative; top: 2px; padding-right: 5px; } .xs-menus .nav-menu > li { margin-right: 52px; } .xs-menus .nav-menu > li:last-child { margin-right: 0px; } .xs-menus .nav-menu > li > a { color: #1e1e1e; font-size: 1rem; padding: 30px 0px; position: relative; } .xs-menus .nav-menu > li > a::before { position: absolute; content: ""; bottom: -1px; left: 0; width: 100%; height: 3px; background-color: #1e1e1e; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: scale(0, 0); -ms-transform: scale(0, 0); transform: scale(0, 0); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .xs-menus .nav-menu > li > a .submenu-indicator-chevron { border-color: transparent #FFFFFF #FFFFFF transparent; } .xs-menus .nav-menu .xs-icon-menu .single-menu-item a { display: block; color: #141414; font-size: 1rem; } .xs-menus .nav-menu .xs-icon-menu .single-menu-item a:hover { color: #1868dd; } .xs-menus .nav-menu .xs-icon-menu .single-menu-item a i { font-size: 1rem; position: relative; top: 3px; padding-right: 18px; } .xs-menus .nav-menu .xs-icon-menu .single-menu-item:not(:last-child) a { padding-bottom: 20px; border-bottom: 1px solid #f7f7f7; } .xs-menus .nav-menu .xs-icon-menu .single-menu-item:not(:first-child) a { padding-top: 20px; } .xs-menus .nav-menu .xs-service-menu a { -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); display: block; padding: 15px; } .xs-menus .nav-menu .xs-service-menu a:hover { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); border-color: rgba(3, 27, 78, 0.1); -webkit-box-shadow: 0 2px 4px rgba(3, 27, 78, 0.06); box-shadow: 0 2px 4px rgba(3, 27, 78, 0.06); } .xs-menus .nav-menu .xs-service-menu a:hover .media h4 { color: #1868dd; } .xs-menus .nav-menu .xs-service-menu a .media img { margin-right: 30px; } .xs-menus .nav-menu .xs-service-menu a .media h4 { color: #000000; font-size: 1rem; margin-bottom: 6px; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .xs-menus .nav-menu .xs-service-menu a .media p { color: #707070; font-size: 0.82353rem; margin-bottom: 0px; } .xs-menus .nav-menu .xs-service-menu [class*=col-]:first-child::before { position: absolute; content: ""; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 150px; background-color: #f7f7f7; } .xs-menus .nav-menu .home-menu-panel a img { -webkit-box-shadow: 0px 5px 15px 0px rgba(23, 104, 221, 0.1); box-shadow: 0px 5px 15px 0px rgba(23, 104, 221, 0.1); margin-bottom: 10px; } .xs-menus .nav-menu .home-menu-panel a h4 { font-size: 1rem; margin-bottom: 0px; } .xs-menus .nav-menu .home-menu-panel > .row:not(:last-child) { margin-bottom: 20px; } .xs-menus .nav-submenu { -webkit-box-shadow: 0px 10px 30px 0px rgba(23, 104, 221, 0.2); box-shadow: 0px 10px 30px 0px rgba(23, 104, 221, 0.2); } .xs-menus .nav-submenu::before { position: absolute; content: ""; left: 50%; top: 0; -webkit-transform: translateX(-50%) rotate(45deg); -ms-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); width: 30px; height: 30px; } .xs-menus .megamenu-panel.xs-icon-menu { padding: 50px; } .xs-menus .megamenu-panel.xs-service-menu { padding: 35px; } .xs-menus .nav-menu > li > a:hover::before, .xs-menus .nav-menu > li:hover > a::before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .header-style-2 .xs-menus .nav-menu > li > a::before { top: 0px; bottom: inherit; } .xs-header { border-bottom: 1px solid rgba(30, 30, 30, 0.2); } .xs-header .xs-logo { display: block; padding: 20px 0; } .xs-header.header-boxed { border-bottom: 0px; } .xs-header.header-boxed > .container { position: relative; } .xs-header.header-boxed > .container::before { position: absolute; content: ""; top: 0; left: -32px; height: 100%; /* width: */ -webkit-box-shadow: -4px 6.928px 25px 0px rgba(0, 0, 0, 0.1); box-shadow: -4px 6.928px 25px 0px rgba(0, 0, 0, 0.1); border-radius: 0 0 5px 5px; background-color: #FFFFFF; } .xs-header.header-boxed .xs-menu-tools > li > a { color: #141414; } .xs-header.header-boxed .xs-logo { padding: 30px 0; } .xs-header.header-boxed .xs-menu-tools { padding: 36px 0; } .xs-header.header-boxed .xs-menus .nav-menu > li > a { color: #141414; padding: 40px 0px; } .xs-header.header-boxed .xs-menus .nav-menu > li > a .submenu-indicator-chevron { border-color: transparent #777777 #777777 transparent; } .xs-header.header-v3 { background-color: rgba(0, 0, 0, 0.2); -webkit-box-shadow: -4px 6.928px 25px 0px rgba(0, 0, 0, 0.1); box-shadow: -4px 6.928px 25px 0px rgba(0, 0, 0, 0.1); border-bottom: 0px; } .xs-header.header-v3 .xs-logo { padding: 30px 0; } .xs-header.header-v3 .xs-menu-tools { padding: 36px 0; } .xs-header.header-v3 .xs-menus .nav-menu > li > a { padding: 40px 0px; } .xs_nav-landscape .nav-brand { display: none; } .xs-menu-tools { text-align: right; padding: 26px 0; } .xs-menu-tools > li { display: inline-block; margin-right: 25px; } .xs-menu-tools > li:last-child { margin-right: 0px; } .xs-menu-tools > li > a { color: #1e1e1e; display: block; position: relative; } .xs-menu-tools > li > a .item-count { position: absolute; top: 0; right: -5px; display: block; width: 10px; height: 10px; line-height: 10px; background-color: #FFFFFF; color: #4169ff; font-size: 0.47059rem; border-radius: 100%; text-align: center; } .home-menu-panel a { display: block; text-align: center; } .home-menu-panel a img { margin-bottom: 20px; } .home-menu-panel a h4 { font-size: 1rem; margin-bottom: 0px; } .xs-menus.xs_nav-landscape .nav-menu { padding-right: 30px; } .xs-menus.xs_nav-portrait .nav-submenu { -webkit-box-shadow: none; box-shadow: none; } .xs-menus.xs_nav-portrait .nav-menu .xs-icon-menu .single-menu-item:not(:first-child) a { padding-bottom: 20px; border-bottom: 1px solid #f7f7f7; } .xs-menus.xs_nav-portrait .nav-menu .xs-icon-menu .single-menu-item:not(:last-child) a { padding-top: 20px; } .xs-menus.xs_nav-portrait .megamenu-panel.xs-icon-menu { padding: 30px; } .xs-menus.xs_nav-portrait .home-menu-panel a { margin-bottom: 25px; } .xs-menus.xs_nav-portrait .nav-menu .home-menu-panel > .row:not(:last-child) { margin-bottom: 0px; } .xs_nav-portrait .nav-header { margin-top: 3px; } .xs_nav-portrait .nav-brand { line-height: 0; max-width: 158px; max-height: 40px; display: block; padding: 0; } /*--------------------------------------------------============================================================ 3. banner =================================================--------------------------------------------------------------*/ /* banner */ .xs-banner { background: #1045db; background: -webkit-linear-gradient(135deg, #1045db 0%, #15095e 60%, #15095e 99%); background: -o-linear-gradient(135deg, #1045db 0%, #15095e 60%, #15095e 99%); background: linear-gradient(-45deg, #1045db 0%, #15095e 60%, #15095e 99%); min-height: 900px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; overflow: hidden; z-index: 1; } .xs-banner .xs-banner-image { margin-left: -95px; margin-right: -126px; position: relative; } .xs-banner.banner-v2 { background: -webkit-linear-gradient(45deg, #0a9ffe 0%, #0a9ffe 35%, #1124d9 70%, #1124d9 100%); background: -o-linear-gradient(45deg, #0a9ffe 0%, #0a9ffe 35%, #1124d9 70%, #1124d9 100%); background: linear-gradient(45deg, #0a9ffe 0%, #0a9ffe 35%, #1124d9 70%, #1124d9 100%); } .xs-banner.banner-v3 { min-height: 800px; } .xs-banner.banner-404 .xs-banner-image { margin-left: 0px; margin-right: 0px; } .xs-banner .icon-bg { position: absolute; left: 0; top: 30%; width: 100%; height: 532px; background-repeat: no-repeat; background-position: center center; background-size: contain; z-index: -1; } .xs-banner.banner-v4 { background: #1633ff; background: -webkit-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: -webkit-gradient(linear, left bottom, left top, from(#1633ff), to(#0069ff)); background: -o-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: linear-gradient(to top, #1633ff 0%, #0069ff 100%); } .xs-banner.banner-v4::before { position: absolute; content: ""; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center bottom; width: 100%; background-size: cover; pointer-events: none; z-index: 1; } .xs-banner.banner-v4::before { background-image: url(../images/welcome/horizontal-shape-2.png); height: 100%; } .xs-banner.banner-v4 .banner-title { font-size: 3.26588rem; font-weight: 500; margin-bottom: 30px; } .xs-banner.banner-v4 p { font-size: 0.94059rem; } .xs-banner.banner-v5 .xs-banner-content { text-align: center; } .xs-banner.banner-v5 .xs-banner-content .banner-title { font-size: 2.82647rem; margin-bottom: 50px; } .xs-banner .wave_animation_wraper { position: absolute; bottom: 0; left: -70px; width: calc(100% + 200px); z-index: -1; } .xs-banner .wave_animation_wraper img { width: 100%; position: relative; } .xs-banner .wave_animation_wraper .one { bottom: -70px; } .xs-banner .wave_animation_wraper .two { width: 774px; right: -240px; margin-left: auto; margin-top: -400px; } .xs-banner .wave_animation_wraper .three { right: -50px; width: 767px; margin-left: auto; margin-top: -300px; } .xs-banner.banner-v6 { min-height: 1110px; background: none; background-color: #FFFFFF; background-repeat: no-repeat; background-size: cover; background-position: center center; display: block; overflow: visible; } .xs-banner.banner-v6 .xs-banner-image { margin-left: -60px; margin-right: -10px; left: 147px; margin-top: -190px; } .xs-banner.banner-v6 .xs-domain-search { padding-top: 100px; } .xs-banner.banner-v7 { background: none; overflow: visible; min-height: 815px; } .xs-banner.banner-v7 + .pricing-section { margin-top: 90px; } .xs-banner.banner-v7::before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background: #150773; background: -webkit-linear-gradient(340deg, rgba(21, 7, 115, 0.8) 0%, rgba(83, 51, 237, 0.8) 54%, rgba(44, 212, 217, 0.8) 100%); background: -o-linear-gradient(340deg, rgba(21, 7, 115, 0.8) 0%, rgba(83, 51, 237, 0.8) 54%, rgba(44, 212, 217, 0.8) 100%); background: linear-gradient(110deg, rgba(21, 7, 115, 0.8) 0%, rgba(83, 51, 237, 0.8) 54%, rgba(44, 212, 217, 0.8) 100%); } .xs-banner.banner-v7 .welcome-bg { position: absolute; bottom: 0; right: 0; pointer-events: none; } .xs-banner.banner-v7 .welcome-bg { z-index: -1; } .xs-banner.banner-v7 .xs-banner-image { pointer-events: none; bottom: -256px; z-index: 2; } .xs-banner.banner-v7 .banner-6-content { padding-top: 0px; } .xs-banner.banner-v8 { display: block; background: none; background-color: #24146d; min-height: 780px; } .xs-banner.banner-v8 > .container { padding-top: 250px; } .xs-banner.banner-v8 .xs-banner-image { margin-left: 0; margin-right: -136px; margin-top: -100px; left: 20px; } .xs-banner.banner-v8 + .pricing-section { margin-top: -430px; position: relative; z-index: 2; } .xs-banner.banner-v8 + .pricing-section .shuufle-letter-title { color: rgba(255, 255, 255, 0.05); } .xs-banner.banner-v8 .banner-6-content { padding-top: 0px; } .xs-banner.skew-bg { position: relative; } .xs-banner.skew-bg::after { position: absolute; content: ""; bottom: 0; left: 0; height: 200px; width: 100%; border-bottom: 200px solid #FFFFFF; z-index: 1; pointer-events: none; } .xs-banner.curve-bg { position: relative; } .xs-banner.curve-bg::after { position: absolute; content: ""; bottom: 0; left: 0; background-repeat: no-repeat; background-position: center bottom; width: 100%; pointer-events: none; z-index: 1; height: 87px; background-image: url(../images/welcome/main-shape-curve.png); background-size: 100% 100%; } .banner-6-content.xs-banner-content .banner-sub-title { color: #2cd3d9; font-size: 1.05882rem; font-weight: 500; margin-bottom: 5px; } .banner-6-content.xs-banner-content .banner-title { font-size: 2.82353rem; font-weight: 500; margin-bottom: 50px; } .banner-6-content.xs-banner-content .banner-title span { display: inline-block; position: relative; } .banner-6-content.xs-banner-content .banner-title span::before { position: absolute; content: ""; bottom: -10px; left: 0; width: calc(100% + 18px); height: 18px; background-image: url(../images/welcome/text-bottom-border.png); background-repeat: no-repeat; background-position: bottom left; background-size: cover; pointer-events: none; } .banner-6-content.xs-banner-content .list-groups { margin-bottom: 45px; } .banner-6-content.xs-banner-content .xs-list > li:not(:last-child) { margin-bottom: 3px; } .banner-6-content .btn { font-weight: 500; color: #1633ff; } .banner-6-content .btn:hover { color: #FFFFFF; } .banner-title, .banner-sub-title, .xs-banner-content { color: #FFFFFF; } .xs-banner-content p { margin-bottom: 40px; } .banner-sub-title { font-size: 1.41176rem; font-weight: 400; } .banner-title { font-size: 3.76471rem; font-weight: 700; margin-bottom: 15px; } .banner-ico { position: absolute; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-animation: bounce 1s ease-in-out 0s infinite alternate; animation: bounce 1s ease-in-out 0s infinite alternate; } .banner-ico.banner-ico-1 { left: 24.5%; top: 6%; } .banner-ico.banner-ico-2 { left: inherit; right: 39.5%; top: 0px; -webkit-animation-delay: .3s; animation-delay: .3s; } .banner-ico.banner-ico-3 { top: 44%; left: 33%; -webkit-animation-delay: .5s; animation-delay: .5s; } .banner-ico.banner-ico-4 { left: inherit; right: 31.5%; top: 43%; -webkit-animation-delay: .7s; animation-delay: .7s; } @-webkit-keyframes bounce { from { -webkit-transform: translateY(0px); transform: translateY(0px); } to { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes bounce { from { -webkit-transform: translateY(0px); transform: translateY(0px); } to { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } .home5-banner-image { text-align: right; } .banner-6-content { padding-top: 240px; } .tp-caption .banner-6-content .xs-list { line-height: 1.6 !important; } .tp-caption .banner-6-content .xs-list > li { font-size: 1rem !important; } .tp-caption .banner-6-content .btn { -webkit-transition: all 0.6s !important; -o-transition: all 0.6s !important; transition: all 0.6s !important; } #rev_slider_17_1_forcefullwidth + .xs-domain-search { margin-top: -300px; margin-bottom: 79px; } #rev_slider_18_1_wrapper .tp-caption .icon { display: inline-block; width: 8px; height: 8px; border: 1px solid #1868dd; border-radius: 50%; position: relative; top: -1px; margin-right: 7px; } /*--------------------------------------------------============================================================ 4. modal =================================================--------------------------------------------------------------*/ /*--------------------------------------------------------- Boris POPUP HAAHHAAHAHAHAH ---------------------------------------------------------*/ /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 9999999999999999999; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { position: relative; background-color: #fefefe; margin: auto; padding: 0; border: 1px solid #888; width: 80%; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); -webkit-animation-name: animatetop; -webkit-animation-duration: 0.4s; animation-name: animatetop; animation-duration: 0.4s } /* Add Animation */ @-webkit-keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } @keyframes animatetop { from {top:-300px; opacity:0} to {top:0; opacity:1} } /* The Close Button */ .close { color: white; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: white; text-decoration: none; cursor: pointer; } .modal-header { padding: 2px 16px; background-color: #142467; color: white; } .modal-body {padding: 2px 16px;} .modal-footer { padding: 2px 16px; background-color: #142467; color: white; } /*-------------------------------------------------- KRAJ OD BORISA HAHAHAAHAHAHAH --------------------------------------------------*/ /* magnific pop up modal */ .mfp-bg.xs-promo-popup { background-color: rgba(0, 0, 0, 0.87); padding-bottom: 100%; border-radius: 100%; overflow: hidden; -webkit-animation: menu-animation .8s ease-out forwards; animation: menu-animation .8s ease-out forwards; } /* animation keyframes list */ @-webkit-keyframes menu-animation { 0% { opacity: 0; -webkit-transform: scale(0.04) translateY(300%); transform: scale(0.04) translateY(300%); } 40% { -webkit-transform: scale(0.04) translateY(0); transform: scale(0.04) translateY(0); -webkit-transition: ease-out; -o-transition: ease-out; transition: ease-out; } 40% { -webkit-transform: scale(0.04) translateY(0); transform: scale(0.04) translateY(0); } 60% { opacity: 1; -webkit-transform: scale(0.02) translateY(0px); transform: scale(0.02) translateY(0px); } 61% { opacity: 1; -webkit-transform: scale(0.04) translateY(0px); transform: scale(0.04) translateY(0px); } 99.9% { opacity: 1; height: 0; padding-bottom: 100%; border-radius: 100%; } 100% { opacity: 1; -webkit-transform: scale(2) translateY(0px); transform: scale(2) translateY(0px); height: 100%; padding-bottom: 0; border-radius: 0; } } @keyframes menu-animation { 0% { opacity: 0; -webkit-transform: scale(0.04) translateY(300%); transform: scale(0.04) translateY(300%); } 40% { -webkit-transform: scale(0.04) translateY(0); transform: scale(0.04) translateY(0); -webkit-transition: ease-out; -o-transition: ease-out; transition: ease-out; } 40% { -webkit-transform: scale(0.04) translateY(0); transform: scale(0.04) translateY(0); } 60% { opacity: 1; -webkit-transform: scale(0.02) translateY(0px); transform: scale(0.02) translateY(0px); } 61% { opacity: 1; -webkit-transform: scale(0.04) translateY(0px); transform: scale(0.04) translateY(0px); } 99.9% { opacity: 1; height: 0; padding-bottom: 100%; border-radius: 100%; } 100% { opacity: 1; -webkit-transform: scale(2) translateY(0px); transform: scale(2) translateY(0px); height: 100%; padding-bottom: 0; border-radius: 0; } } /* Styles for dialog window */ .xs-promo-popup .modal-content { background-color: transparent; padding: 0px; border: 0px; } .xs-promo-popup .mfp-close { color: #FFFFFF; opacity: 0; -webkit-transition: all 1s ease .8s; -o-transition: all 1s ease .8s; transition: all 1s ease .8s; -webkit-transform: translateY(-500px); -ms-transform: translateY(-500px); transform: translateY(-500px); } .xs-promo-popup.mfp-ready .mfp-close { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* at start */ .xs-promo-popup.my-mfp-slide-bottom .zoom-anim-dialog { opacity: 0; -webkit-transition: all 1s ease .8s; -o-transition: all 1s ease .8s; transition: all 1s ease .8s; -webkit-transform: translateY(-500px); -ms-transform: translateY(-500px); transform: translateY(-500px); } /* animate in */ .xs-promo-popup.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /*--------------------------------------------------============================================================ 5. modal search =================================================--------------------------------------------------------------*/ .modal-searchPanel .xs-search-group { position: relative; } .modal-searchPanel .xs-search-group input:not([type="submit"]) { height: 70px; background-color: transparent; border-radius: 50px; border: 2px solid #FFFFFF; color: #FFFFFF; padding: 0 30px; } .modal-searchPanel .xs-search-group input:not([type="submit"])::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #FFFFFF; } .modal-searchPanel .xs-search-group input:not([type="submit"])::-moz-placeholder { /* Firefox 19+ */ color: #FFFFFF; } .modal-searchPanel .xs-search-group input:not([type="submit"]):-ms-input-placeholder { /* IE 10+ */ color: #FFFFFF; } .modal-searchPanel .xs-search-group input:not([type="submit"]):-moz-placeholder { /* Firefox 18- */ color: #FFFFFF; } .modal-searchPanel .xs-search-group .search-button { background-color: transparent; border: 0px; padding: 0; color: #FFFFFF; position: absolute; right: 0; cursor: pointer; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 100%; width: 70px; border-radius: 0 50px 50px 0; } /*--------------------------------------------------============================================================ 6. modal flag =================================================--------------------------------------------------------------*/ .language-content p { color: #FFFFFF; text-align: center; margin-bottom: 40px; font-size: 1.17647rem; } /* language modal */ .flag-lists { text-align: center; } .flag-lists li { display: inline-block; margin-right: 25px; } .flag-lists li:last-child { margin-right: 0; } .flag-lists li a { display: block; color: #FFFFFF; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flag-lists li a:hover { opacity: .7; } .flag-lists li a img { width: 40px; height: 40px; margin-right: 10px; } /*--------------------------------------------------============================================================ 7. offset sidebar =================================================--------------------------------------------------------------*/ .xs-sidebar-group .xs-overlay { left: 100%; top: 0; position: fixed; z-index: 101; height: 100%; opacity: 0; width: 100%; visibility: hidden; -webkit-transition: all .4s ease-in .8s; -o-transition: all .4s ease-in .8s; transition: all .4s ease-in .8s; cursor: url(../images/cross-out.png), pointer; } .xs-sidebar-widget { position: fixed; right: -100%; top: 0; bottom: 0; width: 100%; max-width: 360px; z-index: 999999; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: #fff; -webkit-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; -o-transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; transition: all 0.5s cubic-bezier(0.9, 0.03, 0, 0.96) 0.6s; visibility: hidden; opacity: 0; } .xs-sidebar-group.isActive .xs-overlay { opacity: .9; visibility: visible; -webkit-transition: all .8s ease-out 0s; -o-transition: all .8s ease-out 0s; transition: all .8s ease-out 0s; left: 0; } .xs-sidebar-group.isActive .xs-sidebar-widget { opacity: 1; visibility: visible; right: 0; -webkit-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; -o-transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; transition: all 0.7s cubic-bezier(0.9, 0.03, 0, 0.96) 0.4s; } .sidebar-textwidget { padding: 40px; padding-top: 120px; } .close-side-widget { color: #1768dd; font-size: 0.88235rem; display: block; } .sidebar-widget-container { position: relative; top: 150px; opacity: 0; visibility: hidden; -webkit-transition: all .3s ease-in .3s; -o-transition: all .3s ease-in .3s; transition: all .3s ease-in .3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .xs-sidebar-group.isActive .sidebar-widget-container { top: 0px; opacity: 1; visibility: visible; -webkit-transition: all 1s ease-out 1.2s; -o-transition: all 1s ease-out 1.2s; transition: all 1s ease-out 1.2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*--------------------------------------------------============================================================ 8. offset cart =================================================--------------------------------------------------------------*/ .widget-heading { position: absolute; top: 0; right: 0; padding: 25px; } .mini_cart_item { margin-bottom: 20px; padding-bottom: 20px; } .xs-empty-content { text-align: center; padding: 120px 30px 30px; } .xs-empty-content .widget-title { font-size: 1.29412rem; } .xs-empty-content .xs-title { margin-bottom: 20px; font-size: 1.05882rem; } .xs-empty-content .woocommerce-mini-cart__empty-message { font-size: 1.17647rem; } .xs-empty-content .empty-cart-icon { font-size: 2.94118rem; } /*--------------------------------------------------============================================================ 9. offset info bar =================================================--------------------------------------------------------------*/ .sidebar-textwidget .sidebar-logo-wraper { margin-bottom: 33px; } .sidebar-textwidget > p { font-size: 0.88235rem; line-height: 1.5; margin-bottom: 40px; } .sidebar-textwidget .social-list { margin-bottom: 30px; } .sideabr-list-widget { margin-bottom: 40px; } .sideabr-list-widget li { margin-bottom: 20px; } .sideabr-list-widget li:last-child { margin-bottom: 0px; } .sideabr-list-widget img { margin-right: 15px; margin-top: 3px; } .sideabr-list-widget p, .sideabr-list-widget a { margin-bottom: 2px; color: #000000; margin-bottom: 8px; display: block; } .sideabr-list-widget span { display: block; font-size: 0.82353rem; color: #1768dd; } .sideabr-list-widget .media-body { line-height: 1; } .subscribe-from { position: relative; margin-bottom: 40px; } .subscribe-from p { font-size: 1.05882rem; font-weight: 700; margin-bottom: 15px; line-height: 1; color: #1768dd; } .subscribe-from label { position: absolute; bottom: -24px; left: 0px; margin-bottom: 0; line-height: 1; } .subscribe-from .form-control { border: 1px solid #f5f5f5; height: 50px; padding-left: 25px; } .subscribe-from .sub-btn { background-color: transparent; border: 0px; position: absolute; top: 0; right: 0; padding-right: 25px; cursor: pointer; color: #1768dd; height: 100%; } .subscribe-from .sub-btn:focus { outline: none; } .subscribe-from .form-group { position: relative; overflow: hidden; -webkit-box-shadow: 0px 10px 30px 0px rgba(23, 104, 221, 0.2); box-shadow: 0px 10px 30px 0px rgba(23, 104, 221, 0.2); border-radius: 25px; margin-bottom: 0px; } /*--------------------------------------------------============================================================ 10. domain search =================================================--------------------------------------------------------------*/ .domain-search-form-group { padding: 50px; background-color: #FFFFFF; -webkit-box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.07); box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.07); } .xs-domain-info { text-align: center; } .xs-domain-info li { display: inline-block; margin-right: 45px; padding-right: 45px; border-right: 1px solid rgba(71, 93, 255, 0.25); } .xs-domain-info li img { margin-right: 14px; } .xs-domain-info li:last-child { margin-right: 0px; border-right: 0px; border-right: 0px; } .domain-search-form { width: calc(100% - 320px); margin: 0 auto; margin-bottom: 50px; position: relative; height: 73px; z-index: 9; } .domain-search-form input:not([type="submit"]) { border-radius: 2.20588rem; width: 100%; height: 100%; border: 0px; padding: 0 32px; -webkit-box-shadow: 0px 10px 45px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 10px 45px 0px rgba(0, 0, 0, 0.06); border: 1px solid #f5f3f3; } .domain-search-form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #7b7b7b; } .domain-search-form ::-moz-placeholder { /* Firefox 19+ */ color: #7b7b7b; } .domain-search-form :-ms-input-placeholder { /* IE 10+ */ color: #7b7b7b; } .domain-search-form :-moz-placeholder { /* Firefox 18- */ color: #7b7b7b; } .domain-search-form .select-group { position: absolute; right: 10px; height: 100%; width: 230px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; top: 0px; } .domain-search-form input[type="submit"] { border: 0px; background-color: #1868dd; border-radius: 1.61765rem; color: #FFFFFF; padding: 14px 37px; cursor: pointer; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .domain-search-form input[type="submit"]:hover { background-color: #1352af; } .domain-search-form .select-styled { width: 75px; } .domain-search-form .select { height: 29px; width: 100%; } .domain-search-form .select .select-styled { padding: 0px; } .domain-search-form .search-btn { background-color: transparent; border: 0px; color: #000000; font-size: 0.88353rem; position: absolute; top: 0; right: 0; padding: 28px 32px 28px 20px; text-align: center; line-height: 1; cursor: pointer; } .domain-search-form.version-2 { width: 100%; max-width: 540px; margin-bottom: 30px; } .domain-search-form.version-2 .select-group { right: inherit; left: 0px; width: 130px; } .domain-search-form.version-2 .select-group::before { position: absolute; content: ''; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; width: 1px; height: 44.06px; background-color: #e7e7e7; border-radius: .5px; } .domain-search-form.version-2 .select { color: #000000; } .domain-search-form.version-2 input:not([type="submit"]) { padding-left: 163px; } .domain-search-form.version-2 .select-styled { width: 115px; } .xs-domain-search { position: relative; z-index: 9; } .xs-banner:not(.inner-banner) + .xs-domain-search { margin-top: -124px; } .xs-banner:not(.inner-banner).banner-v3 + .xs-domain-search { margin-top: 0px; } .xs-domain-search.domainSearch-v2 { background-color: #f8fafe; } .xs-domain-search.domainSearch-v2 .domain-search-form-group { -webkit-box-shadow: none; box-shadow: none; background-color: transparent; } .xs-domain-search.domainSearch-2 .domain-search-form { margin-bottom: 0px; } .domain-box-list li { display: inline-block; border-radius: 5px; background-color: rgba(255, 255, 255, 0.102); padding: 13px 26px; text-align: left; font-size: 1.06rem; color: #fefefe; line-height: 1; } .domain-box-list li:not(:last-child) { margin-right: 12px; } .domain-box-list li hr { margin: 12px 0; background-color: white; opacity: 0.2; width: 16px; height: 3px; display: block; } /*--------------------------------------------------============================================================ 11. why choose us =================================================--------------------------------------------------------------*/ .why-choose-us-block { text-align: center; padding: 0 30px; position: relative; } .why-choose-us-block p { margin-bottom: 0px; } .why-choose-us-block .line-indecator { position: absolute; opacity: 0; background-repeat: no-repeat; background-position: right center; } .why-choose-us-block .line-indecator.indicator-1 { width: 200px; height: 54px; right: -80px; top: 55px; -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-transition: all 1s ease .5s; -o-transition: all 1s ease .5s; transition: all 1s ease .5s; } .why-choose-us-block .line-indecator.indicator-2 { top: 105px; right: -130px; width: 200px; -webkit-transition: all 1s ease 1s; -o-transition: all 1s ease 1s; transition: all 1s ease 1s; } .why-choose-us-block.animated .line-indecator { opacity: 1; } .choose-us-img { min-height: 207px; margin-bottom: 22px; } .choose-us-v2 .choose-us-img { min-height: 108px; margin-bottom: 54px; } .choose-us-v3 .choose-us-img { min-height: 230px; margin-bottom: 20px; } /*--------------------------------------------------============================================================ 12. pricing =================================================--------------------------------------------------------------*/ .xs-pricing-group .nav-tabs { margin-bottom: 60px; } .xs-pricing-group + [class^=col-] .pricing-info { margin-top: 60px; } .pricing-body { margin-bottom: 30px; } .pricing-body > p { margin-bottom: 22px; } .pricing-body .pricing-price > p { font-weight: 700; font-style: italic; margin-bottom: 15px; } .pricing-body h2 { color: #103dbe; font-size: 3.29412rem; font-weight: 700; margin-bottom: 8px; } .pricing-body h2 sup { font-size: 1.41176rem; font-family: "Karla", sans-serif; top: -28px; left: 3px; } .pricing-body1 { margin-bottom: 30px; } .pricing-body1 > p { margin-bottom: 22px; } .pricing-body1 .pricing-price > p { font-weight: 700; font-style: italic; margin-bottom: 15px; } .pricing-body1 h2 { color: #433CC5; font-size: 3.29412rem; font-weight: 700; margin-bottom: 8px; } .pricing-body1 h2 sup { font-size: 1.41176rem; font-family: "Karla", sans-serif; top: -28px; left: 3px; } .discount-price { color: #103dbe; font-weight: 700; margin-bottom: 0px; letter-spacing: -0.4px; } .discount-price del { color: rgba(112, 121, 159, 0.5); padding-left: 5px; } .xs-single-pricing { background-color: #FFFFFF; -webkit-box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.04); box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.04); text-align: center; padding: 40px; } .xs-single-pricing .pricing-img-block { margin-left: 40px; margin-bottom: 18px; } .xs-single-pricing .pricing-header { margin-bottom: 20px; } .xs-single-pricing .pricing-header .xs-title { margin-bottom: 0px; } .xs-single-pricing.active { background: #1045db; background: -webkit-linear-gradient(135deg, #1045db 0%, #15095e 60%, #15095e 99%); background: -o-linear-gradient(135deg, #1045db 0%, #15095e 60%, #15095e 99%); background: linear-gradient(-45deg, #1045db 0%, #15095e 60%, #15095e 99%); -webkit-box-shadow: none; box-shadow: none; } .xs-single-pricing.active .xs-title, .xs-single-pricing.active .pricing-body p, .xs-single-pricing.active .pricing-body h2, .xs-single-pricing.active .discount-price { color: #FFFFFF; } .xs-single-pricing.active .discount-price del { color: rgba(255, 255, 255, 0.5); } .xs-single-pricing.active .btn:not([class*=btn-outline]) { background-color: #FFFFFF; color: #3b75ff; } .xs-single-pricing.active .btn:not([class*=btn-outline]):hover { color: #FFFFFF; background-color: #1868dd; } .xs-single-pricing.active .btn:not([class*=btn-outline]):hover::before { background-color: #1868dd; } .pricing-info { text-align: center; } .pricing-info h5 { font-size: 1.17647rem; font-weight: 400; letter-spacing: -0.4px; margin-bottom: 35px; } .pricing-info h5 a { padding-right: 5px; text-decoration: underline; } .pricing-info .xs-list li { margin-right: 65px; font-size: 1.17647rem; color: #2a549d; } .pricing-info .xs-list li:last-child { margin-right: 0px; } .pricing-info .xs-list li i { padding-right: 5px; position: relative; top: 3px; } /* pricing version 2 */ .pricing-v2 .xs-single-pricing .pricing-img-block { margin-left: 0px; margin-bottom: 43px; } .pricing-v2 .xs-single-pricing.active { background-image: none; background-color: #1868dd; } .pricing-v2 .pricing-body h2 { color: #1868dd; } .pricing-v2 .discount-price { color: #1868dd; } /* pricing version 3 */ .pricing-v3 .xs-single-pricing.active { background: #1633ff; background: -webkit-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: -webkit-gradient(linear, left bottom, left top, from(#1633ff), to(#0069ff)); background: -o-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: linear-gradient(to top, #1633ff 0%, #0069ff 100%); } /*--------------------------------------------------============================================================ 13. service =================================================--------------------------------------------------------------*/ .xs-service-block { text-align: center; padding: 0 30px; background-color: #FFFFFF; margin-bottom: 30px; } .xs-service-block .service-img { min-height: 96px; margin-bottom: 20px; } .xs-service-block p { margin-bottom: 15px; } .style-boxed .xs-service-block { padding: 30px; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; } .style-boxed .xs-service-block:hover, .style-boxed .xs-service-block.active { background-color: white; -webkit-box-shadow: 0px 10px 15px 0px rgba(23, 104, 221, 0.1); box-shadow: 0px 10px 15px 0px rgba(23, 104, 221, 0.1); z-index: 1; } .style-boxed .xs-service-block .service-img { line-height: 1; min-height: 0; margin-bottom: 20px; font-size: 3.23529rem; color: #1868dd; } .style-boxed.version-2 .xs-service-block:hover, .style-boxed.version-2 .xs-service-block.active { -webkit-box-shadow: 0px 19.799px 60px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 19.799px 60px 0px rgba(0, 0, 0, 0.1); } .style-boxed.version-2 .xs-service-block .service-img { color: #5333ed; margin-bottom: 30px; } .style-boxed.version-2 .xs-service-block .xs-title { margin-bottom: 20px; } .style-boxed.version-2 .xs-service-block p { margin-bottom: 20px; } .style-boxed.version-2 .xs-service-block .simple-btn { color: #5333ed; } .xs-service-area { background: #f7f9fb; background: -webkit-gradient(linear, left top, left bottom, from(#f7f9fb), to(rgba(233, 231, 240, 0))); background: -webkit-linear-gradient(top, #f7f9fb 0%, rgba(233, 231, 240, 0) 100%); background: -o-linear-gradient(top, #f7f9fb 0%, rgba(233, 231, 240, 0) 100%); background: linear-gradient(180deg, #f7f9fb 0%, rgba(233, 231, 240, 0) 100%); } .xs-service-area .xs-service-block:hover, .xs-service-area .xs-service-block.active { -webkit-box-shadow: 19.799px 19.799px 40px 0px rgba(0, 0, 0, 0.1); box-shadow: 19.799px 19.799px 40px 0px rgba(0, 0, 0, 0.1); } /*--------------------------------------------------============================================================ 14. call to action =================================================--------------------------------------------------------------*/ .call-to-action-section { background: -webkit-linear-gradient(45deg, #1045db 0%, #1045db 13%, #15095e 52%, #15095e 100%); background: -o-linear-gradient(45deg, #1045db 0%, #1045db 13%, #15095e 52%, #15095e 100%); background: linear-gradient(45deg, #1045db 0%, #1045db 13%, #15095e 52%, #15095e 100%); position: relative; padding-top: 100px; padding-bottom: 200px; text-align: center; z-index: 1; } .call-to-action-section .icon-bg { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/icon-bg.png); background-repeat: no-repeat; background-size: contain; background-position: center center; z-index: -1; } .call-to-action-section.call-to-action-v2 { background: #0a9ffe; background: -webkit-linear-gradient(3deg, #0a9ffe 0%, #0a9ffe 35%, #1124d9 70%, #1124d9 100%); background: -o-linear-gradient(3deg, #0a9ffe 0%, #0a9ffe 35%, #1124d9 70%, #1124d9 100%); background: linear-gradient(87deg, #0a9ffe 0%, #0a9ffe 35%, #1124d9 70%, #1124d9 100%); padding: 100px 0; } .call-to-action-section.call-to-action-v2 .call-to-action-content h2 { margin-bottom: 60px; } .call-to-action-section.call-to-action-v2 .call-to-action-content .xs-btn-wraper .btn-secondary { -webkit-box-shadow: none; box-shadow: none; } .call-to-action-section.call-to-action-v3 { background: #1633ff; background: -webkit-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: -webkit-gradient(linear, left bottom, left top, from(#1633ff), to(#0069ff)); background: -o-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: linear-gradient(to top, #1633ff 0%, #0069ff 100%); } .call-to-action-section.call-to-action-v4 { background-repeat: no-repeat; background-size: cover; background-position: center center; background-attachment: fixed; padding: 100px 0; z-index: 1; } .call-to-action-section.call-to-action-v4:before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background: #150773; background: -webkit-linear-gradient(340deg, #150773 0%, #5333ed 54%, #2cd4d9 100%); background: -o-linear-gradient(340deg, #150773 0%, #5333ed 54%, #2cd4d9 100%); background: linear-gradient(110deg, #150773 0%, #5333ed 54%, #2cd4d9 100%); opacity: .8; z-index: -1; } .call-to-action-section.call-to-action-v4 .icon-bg { background-size: auto; background-position: bottom left; } .call-to-action-section.call-to-action-v4 .call-to-action-content h2 { margin-bottom: 40px; font-weight: 500; } .call-to-action-section.call-to-action-v4.style-2::before { background: #000000; opacity: .5; } .call-to-action-content h2 { color: #FFFFFF; margin-bottom: 0px; font-size: 2.11765rem; font-weight: 700; } /*--------------------------------------------------============================================================ 15. feature =================================================--------------------------------------------------------------*/ .call-to-action-section + .xs-feature-section { margin-top: -120px; position: relative; z-index: 1; } .xs-feature-group { background-color: #1868dd; -webkit-box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.08); padding: 40px 36px 40px 20px; position: relative; overflow: hidden; z-index: 1; } .xs-feature-group .xs-title, .xs-feature-group p { color: #FFFFFF; } .xs-feature-group p { margin-bottom: 25px; } .xs-feature-group .feature-img { min-width: 138px; margin-right: 14px; } .xs-feature-group .xs-btn-wraper { text-align: right; } .xs-feature-group .btn { padding: 10px 30px; } /* feature version 2 */ .feature-v2 .xs-feature-group { -webkit-box-shadow: 0px -10px 25px 0px rgba(0, 0, 0, 0.04); box-shadow: 0px -10px 25px 0px rgba(0, 0, 0, 0.04); background-color: #FFFFFF; } .feature-v2 .xs-feature-group .xs-title { color: #1e1e1e; } .feature-v2 .xs-feature-group p { color: #70799f; } .feature-v2 .xs-feature-group .btn { -webkit-box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1); } /* feature version 3 */ .feature-v3 .xs-feature-group { background: #1633ff; background: -webkit-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: -webkit-gradient(linear, left bottom, left top, from(#1633ff), to(#0069ff)); background: -o-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: linear-gradient(to top, #1633ff 0%, #0069ff 100%); } /*--------------------------------------------------============================================================ 16. clients =================================================--------------------------------------------------------------*/ .xs-client-slider { cursor: e-resize; border-bottom: 1px solid #e5e5e5; } .single-client { min-height: 200px; 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; } .single-client > img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; cursor: pointer; } .single-client > img:hover { -webkit-filter: grayscale(0%); filter: grayscale(0%); } /*--------------------------------------------------============================================================ 17. hosting information =================================================--------------------------------------------------------------*/ .spinner-icon { position: relative; width: 65px; height: 65px; margin-bottom: 25px; } .spinner-icon::before { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; background-image: url(../images/info/round.png); background-repeat: no-repeat; background-size: cover; background-position: center center; -webkit-transition: -webkit-transform 1s ease-in-out; transition: -webkit-transform 1s ease-in-out; -o-transition: transform 1s ease-in-out; transition: transform 1s ease-in-out; transition: transform 1s ease-in-out, -webkit-transform 1s ease-in-out; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .spinner-icon.animated::before { -webkit-transform: rotate(720deg); -ms-transform: rotate(720deg); transform: rotate(720deg); } .hosting-info-img { position: relative; } .hosting-info-img .info-icon { position: absolute; -webkit-animation: bounce 1s ease-in-out 0s infinite alternate; animation: bounce 1s ease-in-out 0s infinite alternate; } .hosting-info-img .info-icon.icon-1 { bottom: 25%; left: 0%; } .hosting-info-img .info-icon.icon-2 { bottom: 50%; left: -5%; -webkit-animation-delay: .3s; animation-delay: .3s; } .hosting-info-img .info-icon.icon-3 { left: 14%; bottom: 70%; -webkit-animation-delay: .5s; animation-delay: .5s; } .hosting-info-img .info-icon.icon-4 { bottom: 59%; left: 35.5%; -webkit-animation-delay: .7s; animation-delay: .7s; } .hosting-info-wraper { padding-left: 30px; } .hosting-info-wraper .content-title { margin-bottom: 30px; } .hosting-info-wraper p { margin-bottom: 30px; } .hosting-info-wraper .xs-list { margin-bottom: 40px; } .hosting-info-wraper .xs-list li { font-weight: 700; margin-bottom: 14px; } .hosting-info-wraper .xs-list li:last-child { margin-bottom: 0px; } .hosting-info-wraper-2 .content-title { margin-bottom: 60px; } .hosting-info-list { padding-left: 10px; margin-bottom: 30px; } .hosting-info-list .info-icon { min-width: 46px; padding-right: 9px; } .hosting-info-list .xs-title { margin-bottom: 15px; } .hosting-info-list p { margin-bottom: 0px; } .xs-hosting-info .row { margin-bottom: 90px; } .xs-hosting-info .row + .row { margin-bottom: 0px; } /*--------------------------------------------------============================================================ 18. testimonial =================================================--------------------------------------------------------------*/ .xs-testimonial-section { background: -webkit-linear-gradient(45deg, #1045db 0%, #1045db 13%, #15095e 52%, #15095e 100%); background: -o-linear-gradient(45deg, #1045db 0%, #1045db 13%, #15095e 52%, #15095e 100%); background: linear-gradient(45deg, #1045db 0%, #1045db 13%, #15095e 52%, #15095e 100%); padding-top: 100px; padding-bottom: 70px; } .xs-testimonial-section.testimonial-v2 { background: #0a9ffe; background: -webkit-gradient(linear, left top, right top, from(#0a9ffe), color-stop(0%, #0a9ffe), color-stop(52%, #1124d9), to(#1124d9)); background: -webkit-linear-gradient(left, #0a9ffe 0%, #0a9ffe 0%, #1124d9 52%, #1124d9 100%); background: -o-linear-gradient(left, #0a9ffe 0%, #0a9ffe 0%, #1124d9 52%, #1124d9 100%); background: linear-gradient(90deg, #0a9ffe 0%, #0a9ffe 0%, #1124d9 52%, #1124d9 100%); } .xs-testimonial-section.testimonial-v2 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item p { color: #2547b5; } .xs-testimonial-section.testimonial-v2 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item, .xs-testimonial-section.testimonial-v2 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item::before, .xs-testimonial-section.testimonial-v2 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item::after { background-color: #889df0; } .xs-testimonial-section.testimonial-v3 { background-image: none; background-color: #FFFFFF; padding-bottom: 0px; } .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item.center .xs-testimonial-item, .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item.center .xs-testimonial-item::before, .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item.center .xs-testimonial-item::after { background: #15095e; background: -webkit-linear-gradient(0deg, #15095e 1%, #13279d 68%, #1045db 100%); background: -webkit-gradient(linear, left top, right top, color-stop(1%, #15095e), color-stop(68%, #13279d), to(#1045db)); background: -webkit-linear-gradient(left, #15095e 1%, #13279d 68%, #1045db 100%); background: -o-linear-gradient(left, #15095e 1%, #13279d 68%, #1045db 100%); background: linear-gradient(90deg, #15095e 1%, #13279d 68%, #1045db 100%); } .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item.center .testimonial-content p, .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item.center .commentor-title { color: #FFFFFF; } .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item.center .commentor-bio i { opacity: .2; } .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item, .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item:before, .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item:after { background: #899fdf; background: -webkit-linear-gradient(45deg, #899fdf 0%, #8a92c7 32%, #8a84ae 99%); background: -o-linear-gradient(45deg, #899fdf 0%, #8a92c7 32%, #8a84ae 99%); background: linear-gradient(45deg, #899fdf 0%, #8a92c7 32%, #8a84ae 99%); } .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item { opacity: 1; } .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item:not(.center) .testimonial-content p, .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item:not(.center) .commentor-title { color: #FFFFFF; } .xs-testimonial-section.testimonial-v3 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item .round-avatar::before { background-color: #f7f7f7; } .xs-testimonial-section.testimonial-v4 { background: #1633ff; background: -webkit-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: -webkit-gradient(linear, left bottom, left top, from(#1633ff), to(#0069ff)); background: -o-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: linear-gradient(to top, #1633ff 0%, #0069ff 100%); } .xs-testimonial-section.testimonial-v5 { background-image: none; background-color: #FFFFFF; padding-bottom: 0px; } .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item.center .xs-testimonial-item, .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item.center .xs-testimonial-item::before, .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item.center .xs-testimonial-item::after { background: #1633ff; background: -webkit-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: -webkit-gradient(linear, left bottom, left top, from(#1633ff), to(#0069ff)); background: -o-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: linear-gradient(to top, #1633ff 0%, #0069ff 100%); } .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item.center .testimonial-content p, .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item.center .commentor-title { color: #FFFFFF; } .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item.center .commentor-bio i { opacity: .2; } .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item, .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item:before, .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item:after { background: #1633ff; background: -webkit-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: -webkit-gradient(linear, left bottom, left top, from(#1633ff), to(#0069ff)); background: -o-linear-gradient(bottom, #1633ff 0%, #0069ff 100%); background: linear-gradient(to top, #1633ff 0%, #0069ff 100%); } .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item { opacity: .5; } .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item:not(.center) .testimonial-content p, .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item:not(.center) .commentor-title { color: #FFFFFF; } .xs-testimonial-section.testimonial-v5 .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item .round-avatar::before { background-color: #f7f7f7; } .xs-testimonial-section .owl-item.cloned { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .xs-testimonial-section .owl-item.active { -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; } .xs-testimonial-section .owl-item.active.center { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .xs-testimonial-item { width: 100%; margin: 0 auto; padding: 30px; border-radius: 5px; position: relative; z-index: 1; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .xs-testimonial-item::before, .xs-testimonial-item::after { position: absolute; content: ""; top: 0; height: 100%; width: 100%; opacity: .2; z-index: -1; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); border-radius: 5px; } .xs-testimonial-slider .owl-item.center .xs-testimonial-item { -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; padding: 40px; } .testimonial-content p { font-size: 0.72941rem; } .testimonial-content > p { margin-bottom: 20px; } .commentor-bio { position: relative; } .commentor-bio i { position: absolute; right: 0; top: 0; font-size: 2.35294rem; opacity: .1; } .commentor-bio .round-avatar { margin-right: 16px; } .commentor-bio .commentor-title { font-size: 0.91176rem; margin-bottom: 0px; } .commentor-bio .commentor-info { margin-bottom: 0px; } .commentor-bio .round-avatar { position: relative; border-radius: 100%; overflow: hidden; } .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item { margin-top: 25px; } .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item .round-avatar { width: 44px; height: 44px; } .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item .round-avatar::before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background-color: #181953; opacity: .5; } .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item p { color: #434483; } .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item .commentor-bio i { color: #7f7eaf; } .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item::before { width: calc(100% - 28px); top: -10px; } .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item::after { width: calc(100% - 56px); top: -20px; } .xs-testimonial-slider .owl-stage-outer { padding: 30px 0; } .xs-testimonial-slider .owl-item.center .round-avatar { width: 55px; height: 55px; } .xs-testimonial-slider .owl-item.center .testimonial-content > p { margin-bottom: 25px; font-size: 1rem; } .xs-testimonial-slider .owl-item.center .commentor-bio .commentor-title { font-size: 1.17647rem; } .xs-testimonial-slider .owl-item.center .testimonial-content .commentor-info { font-size: 0.88235rem; } .xs-testimonial-slider .owl-item.center .commentor-bio i { font-size: 3.52941rem; } .xs-testimonial-slider .owl-item.center .xs-testimonial-item { -webkit-box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3); box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.3); } .xs-testimonial-slider .owl-item.center .xs-testimonial-item::before { width: calc(100% - 20px); top: -14px; } .xs-testimonial-slider .owl-item.center .xs-testimonial-item::after { width: calc(100% - 40px); top: -28px; } .xs-testimonial-slider .owl-item .xs-testimonial-item::before, .xs-testimonial-slider .owl-item .xs-testimonial-item::after, .xs-testimonial-slider .owl-item .xs-testimonial-item { background-color: #FFFFFF; } .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item, .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item::before, .xs-testimonial-slider .owl-item:not(.center) .xs-testimonial-item::after { background-color: #8a84af; } /*--------------------------------------------------============================================================ 19. blog =================================================--------------------------------------------------------------*/ .xs-blog-post .post-image { -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15); } .xs-blog-post .entry-header { -webkit-box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 10px 35px 0px rgba(0, 0, 0, 0.06); width: calc(100% - 40px); margin: 0 auto; background-color: #FFFFFF; padding: 38px 0 30px; margin-top: -30px; position: relative; z-index: 1; } .xs-blog-post .entry-title, .xs-blog-post .entry-meta, .xs-blog-post .post-meta { padding: 0 30px; } .xs-blog-post .post-meta { margin-bottom: 15px; border-left: 4px solid #1868dd; } .xs-blog-post .post-meta > span { font-size: 0.88235rem; } .xs-blog-post .post-meta a { color: #8c8c8c; } .xs-blog-post .entry-meta { line-height: 1; } .xs-blog-post .entry-meta > span { color: #103dbe; font-size: 0.88235rem; } .xs-blog-post .entry-title { font-size: 1.41176rem; line-height: 1.25; margin-bottom: 10px; } .xs-blog-post .entry-title > a { color: #1e1e1e; display: inline-block; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .xs-blog-post .entry-title > a:hover { color: #103dbe; } /*--------------------------------------------------============================================================ 20. footer =================================================--------------------------------------------------------------*/ .footer-group { background-color: #113072; background-repeat: no-repeat; background-size: contain; background-position: center center; } .footer-main { padding-top: 115px; padding-bottom: 60px; } .footer-widget .widget-title { color: #FFFFFF; font-size: 1.41176rem; position: relative; padding-bottom: 20px; margin-bottom: 40px; } .footer-widget .widget-title::before { position: absolute; content: ""; bottom: 0; left: 0; height: 3px; width: 30px; background-color: #1868dd; } .footer-widget .xs-list li { margin-bottom: 14px; } .footer-widget .xs-list li:last-child { margin-bottom: 0px; } .footer-widget .xs-list li a { -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .footer-widget .xs-list li a:hover { color: #FFFFFF; } .footer-widget .xs-list li a, .contact-info-widget li span, .footer-bottom-info p { color: #d7d7d7; } .contact-info-widget li { margin-bottom: 25px; } .contact-info-widget li:last-child { margin-bottom: 0px; } .contact-info-widget li img { margin-right: 18px; } .footer-bottom-info p { margin-bottom: 0px; } .footer-bottom-info p a { color: #1ba3ff; text-decoration: underline; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .footer-bottom-info p a:hover { color: #FFFFFF; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 50px 0; } .footer-bottom .xs-list { padding-top: 10px; text-align: right; } .footer-bottom .xs-list li { margin-right: 40px; } .footer-bottom .xs-list li:last-child { margin-right: 0px; } .footer-copyright { background-color: #0d2352; padding: 38px 0; min-height: 120px; } .copyright-text { padding: 10px 0; } .copyright-text p { margin-bottom: 0px; color: #e7e7e7; font-size: 0.88235rem; } .copyright-text p a { color: #1868dd; } .footer-logo-wraper { text-align: center; } .footer-logo-wraper .footer-logo { display: inline-block; } .social-list-wraper { text-align: right; } .xs-footer-section > .xs-feature-section { margin-bottom: -101px; } .xs-footer-section > .xs-feature-section + .footer-group .footer-main { padding-top: 195px; } /*--------------------------------------------------============================================================ 21. pricing feature =================================================--------------------------------------------------------------*/ .pricing-feature-group { padding: 55px 35px; text-align: center; background-color: #FFFFFF; height: 100%; } .pricing-feature-group .pricing-body { margin-bottom: 0px; } .pricing-image { padding: 55px; background-color: #FFFFFF; } .pricing-matrix { -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); background-color: #FFFFFF; } .pricing-matrix .gap { height: 58px; clear: both; position: relative; display: block; background-color: #f8fafe; border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; } .pricing-expand { position: relative; overflow: hidden; -webkit-box-shadow: 0px -10px 30px 0px rgba(0, 0, 0, 0.05); box-shadow: 0px -10px 30px 0px rgba(0, 0, 0, 0.05); -webkit-transition: -webkit-box-shadow .5s ease 1.5s; transition: -webkit-box-shadow .5s ease 1.5s; -o-transition: box-shadow .5s ease 1.5s; transition: box-shadow .5s ease 1.5s; transition: box-shadow .5s ease 1.5s, -webkit-box-shadow .5s ease 1.5s; } .pricing-expand::before { position: absolute; content: ""; bottom: 0px; left: 0px; width: 100%; height: 312px; z-index: 1; background: #f8fafe; background: -webkit-linear-gradient(90deg, #f8fafe 8%, rgba(248, 250, 254, 0.95) 12%, rgba(252, 253, 255, 0.29) 73%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left bottom, left top, color-stop(8%, #f8fafe), color-stop(12%, rgba(248, 250, 254, 0.95)), color-stop(73%, rgba(252, 253, 255, 0.29)), to(rgba(255, 255, 255, 0))); background: -webkit-linear-gradient(bottom, #f8fafe 8%, rgba(248, 250, 254, 0.95) 12%, rgba(252, 253, 255, 0.29) 73%, rgba(255, 255, 255, 0) 100%); background: -o-linear-gradient(bottom, #f8fafe 8%, rgba(248, 250, 254, 0.95) 12%, rgba(252, 253, 255, 0.29) 73%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(0deg, #f8fafe 8%, rgba(248, 250, 254, 0.95) 12%, rgba(252, 253, 255, 0.29) 73%, rgba(255, 255, 255, 0) 100%); -webkit-transition: background-image .5s ease 1.5s; -o-transition: background-image .5s ease 1.5s; transition: background-image .5s ease 1.5s; opacity: 1; visibility: visible; z-index: 2; } .pricing-expand.expand { -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); } .pricing-expand.expand::before { opacity: 0; visibility: hidden; } .content-collapse-wraper { text-align: center; } .content-collapse-wraper .btn { opacity: 1; visibility: visible; -webkit-transition: all .5s ease .5s; -o-transition: all .5s ease .5s; transition: all .5s ease .5s; } .content-collapse-wraper .btn.hide { opacity: 0; visibility: hidden; } .pricing-feature { display: block; padding: 20px 40px; line-height: 1; background-color: #FFFFFF; height: 57px; } .pricing-feature > i { color: #1868dd; } .pricing-matrix > .row [class^=col-] .pricing-feature { text-align: center; } .pricing-matrix > .row [class^=col-]:first-child .pricing-feature { text-align: center; } .pricing-matrix > .row [class^=col-] .pricing-feature-item, .pricing-matrix > .row [class^=col-] .pricing-feature-group, .pricing-matrix > .row [class^=col-] .pricing-image { border-bottom: 1px solid #eaeaea; border-right: 1px solid #eaeaea; } .pricing-matrix > .row [class^=col-] .pricing-feature-item:last-child, .pricing-matrix > .row [class^=col-] .pricing-feature-group:last-child, .pricing-matrix > .row [class^=col-] .pricing-image:last-child { border-bottom: 0px; } .pricing-matrix-slider { position: relative; } .pricing-matrix-slider .last-child .pricing-matrix-item .pricing-feature-item, .pricing-matrix-slider .last-child .pricing-matrix-item .pricing-feature-group, .pricing-matrix-slider .last-child .pricing-matrix-item .pricing-image { border-right: 0px; } .pricing-matrix-slider .owl-nav .owl-prev, .pricing-matrix-slider .owl-nav .owl-next { position: absolute; top: -40px; font-size: 1.52941rem; color: #1868dd; background-color: transparent; border: 0; } .pricing-matrix-slider .owl-nav .owl-prev { left: 0px; } .pricing-matrix-slider .owl-nav .owl-next { right: 0px; } /*--------------------------------------------------============================================================ 22. included feature =================================================--------------------------------------------------------------*/ .feature-image-content { text-align: center; } .feature-text-content { padding-right: 30px; } .feature-text-content > .content-title, .feature-text-content p { color: #FFFFFF; margin-bottom: 0px; } .feature-text-content .content-title { margin-bottom: 25px; } /*--------------------------------------------------============================================================ 23. inner banner =================================================--------------------------------------------------------------*/ .xs-banner.inner-banner { min-height: 550px; } .xs-banner.service-banner { min-height: 700px; } .xs-banner.service-banner-2 { min-height: 824px; } .xs-banner.service-banner .xs-banner-content p, .xs-banner.service-banner-2 .xs-banner-content p { margin-bottom: 0px; } .xs-banner.inner-banner .banner-title { font-size: 3.05882rem; } .xs-banner.inner-banner .banner-sub-title { font-size: 1.17647rem; } .inner-welcome-image-group { text-align: right; } .inner-welcome-image-group .banner-ico.banner-ico-1 { left: 52.5%; top: 1%; } .inner-welcome-image-group .banner-ico.banner-ico-2 { right: 10%; top: 10%; -webkit-animation-delay: 1s; animation-delay: 1s; } .inner-welcome-image-group.pricing-icon .banner-ico.banner-ico-1 { left: 51.5%; } .inner-welcome-image-group.pricing-icon .banner-ico.banner-ico-2 { right: 11%; } .inner-welcome-image-group.affiliate-icon .banner-ico.banner-ico-1 { left: 43.5%; } .inner-welcome-image-group.affiliate-icon .banner-ico.banner-ico-2 { right: 12%; } .inner-welcome-image-group.faq-icon .banner-ico.banner-ico-1 { left: 42.5%; } .inner-welcome-image-group.faq-icon .banner-ico.banner-ico-2 { right: 12.5%; } .inner-welcome-image-group.cart-icon .banner-ico.banner-ico-1 { left: 53.9%; } .inner-welcome-image-group.cart-icon .banner-ico.banner-ico-2 { right: 11%; } .inner-welcome-image-group.whois-icon .banner-ico.banner-ico-1, .inner-welcome-image-group.signin-icon .banner-ico.banner-ico-1 { left: 53.5%; } .inner-welcome-image-group.whois-icon .banner-ico.banner-ico-2, .inner-welcome-image-group.signin-icon .banner-ico.banner-ico-2 { right: 11.5%; } /*--------------------------------------------------============================================================ 24. contact info =================================================--------------------------------------------------------------*/ .contact-info-group { padding: 27px 35px 35px; min-height: 275px; text-align: center; background-color: #FFFFFF; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .contact-info-group .contact-info-icon { min-height: 110px; margin-bottom: 10px; } .contact-info-group > span, .contact-info-group > a { display: block; color: #70799f; } .contact-info-group:hover, .contact-info-group.active { -webkit-box-shadow: 0px 3px 33.6px 1.4px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 33.6px 1.4px rgba(0, 0, 0, 0.1); } /*--------------------------------------------------============================================================ 25. form filed =================================================--------------------------------------------------------------*/ .xs-form-group { padding: 0 48px; } .xs-form-group.form-style-2 { padding: 0 24px; } .xs-form-group.form-style-2 .xs-form .form-group { margin-bottom: 40px; } .xs-form .form-control, .xs-form .select { background-color: #FFFFFF; border: 1px solid #efefef; border-radius: 0px; padding: 0 30px; margin-bottom: 20px; height: 57px; width: 100%; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .xs-form .form-control:last-child, .xs-form .select:last-child { margin-bottom: 0px; } .xs-form .form-control.invaild, .xs-form .select.invaild { border-color: #1868dd; } .xs-form .form-control::-webkit-input-placeholder, .xs-form .select::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-size: 0.88235rem; color: #a1a9cb; } .xs-form .form-control::-moz-placeholder, .xs-form .select::-moz-placeholder { /* Firefox 19+ */ font-size: 0.88235rem; color: #a1a9cb; } .xs-form .form-control:-ms-input-placeholder, .xs-form .select:-ms-input-placeholder { /* IE 10+ */ font-size: 0.88235rem; color: #a1a9cb; } .xs-form .form-control:-moz-placeholder, .xs-form .select:-moz-placeholder { /* Firefox 18- */ font-size: 0.88235rem; color: #a1a9cb; } .xs-form textarea.form-control { padding: 20px 30px; resize: none; height: 147px; } .xs-form .form-group { margin-bottom: 60px; } .xs-form .xs-btn-wraper { text-align: center; } .xs-form .select-styled { padding: 0 30px; top: 0; color: #a1a9cb; font-size: 0.88235rem; height: 100%; line-height: 52px; } .xs-form .select-styled::after { right: 30px; color: #a1a9cb; font-size: 1.47059rem; top: 2px; } .xs-form .select-options { left: 0; min-width: 100%; } .xs-form .select-options::before { left: inherit; right: 0; -webkit-transform: translateX(30px) rotate(45deg); -ms-transform: translateX(30px) rotate(45deg); transform: translateX(30px) rotate(45deg); } .xs-form .select-options li { padding: 15px 30px; font-size: 0.88235rem; } .xs-form input[type=number]::-webkit-inner-spin-button, .xs-form input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .xs-form > .row > [class^=col-]:first-child .form-group { padding-left: 25px; } .xs-form > .row > [class^=col-]:last-child .form-group { padding-right: 25px; } .xs-form > .row > [class^=col-] .form-group { margin-bottom: 80px; } .xs-form .media + .xs-btn-wraper { margin-top: 40px; } .xs-form .xs-btn-wraper + .form-info { margin-top: 30px; margin-bottom: 0px; } .xs-form .forgot-password-wraper { line-height: 1; } .xs-form .forgot-password-wraper a { color: #a1a9cb; font-size: 0.88235rem; display: block; } .xs-form .form-info { text-align: center; } .xs-form .form-info a { color: #1868dd; display: inline-block; text-decoration: underline; } .xs-form .select.focus, .xs-form .form-control:focus { border-color: #1868dd; -webkit-box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.06); } .xpeedStudio_success_message { margin-bottom: 0; padding: 10px 0; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } /*--------------------------------------------------============================================================ 26. intro video =================================================--------------------------------------------------------------*/ .intro-video { position: relative; -webkit-box-shadow: 0px 10px 30px 0px rgba(16, 61, 190, 0.159); box-shadow: 0px 10px 30px 0px rgba(16, 61, 190, 0.159); overflow: hidden; border-radius: 5px; } .intro-video .xs-overlay { opacity: .6; } .video-pop-up-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; padding: 10px; } /*--------------------------------------------------============================================================ 27. office =================================================--------------------------------------------------------------*/ .office-interface-group-content.content-2 { margin-right: 30px; } .office-interface-group-content.content-1 { margin-top: -75px; } .office-interface-group-content > img { width: 100%; } .office-interface-group-content, .join-with-us-wraper { margin-bottom: 30px; -webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1); } .join-with-us-wraper { min-height: 389px; background-color: #1868dd; margin-top: 45px; position: relative; z-index: 2; text-align: center; padding: 20px 95px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .join-with-us-wraper .join-with-us-content h2 { color: #FFFFFF; font-size: 2.11765rem; font-weight: 700; margin-bottom: 35px; } /*--------------------------------------------------============================================================ 28. team =================================================--------------------------------------------------------------*/ .xs-single-team { position: relative; overflow: hidden; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .xs-single-team::before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background: black; background: -webkit-linear-gradient(90deg, black 0%, rgba(37, 42, 55, 0) 100%); background: -webkit-gradient(linear, left bottom, left top, from(black), to(rgba(37, 42, 55, 0))); background: -webkit-linear-gradient(bottom, black 0%, rgba(37, 42, 55, 0) 100%); background: -o-linear-gradient(bottom, black 0%, rgba(37, 42, 55, 0) 100%); background: linear-gradient(0deg, black 0%, rgba(37, 42, 55, 0) 100%); opacity: .5; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .xs-single-team > .team-bio { position: absolute; z-index: 1; padding: 30px; bottom: 0px; left: 0; width: 100%; opacity: 1; visibility: visible; -webkit-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; } .xs-single-team .team-bio h4 { color: #FFFFFF; font-size: 1.41176rem; margin-bottom: 5px; } .xs-single-team .team-bio p { font-size: 0.88235rem; font-style: italic; color: #FFFFFF; margin-bottom: 0px; } .xs-single-team .team-hover-content { position: absolute; top: 40px; left: 0; height: 100%; width: 100%; z-index: 2; padding: 60px 30px; opacity: 0; visibility: hidden; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; } .xs-single-team .team-hover-content .team-bio { margin-bottom: 25px; } .xs-single-team .team-hover-content .team-description { margin-bottom: 50px; } .xs-single-team .team-hover-content .team-description p { margin-bottom: 0px; } .xs-single-team .team-description p { color: #FFFFFF; } .xs-single-team:hover { -webkit-box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.159); box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.159); } .xs-single-team:hover::before { opacity: 1; } .xs-single-team:hover > .team-bio { opacity: 0; visibility: hidden; bottom: -40px; } .xs-single-team:hover > .team-hover-content { opacity: 1; visibility: visible; top: 0px; } /*--------------------------------------------------============================================================ 29. included feature list =================================================--------------------------------------------------------------*/ .include-feature-list .hosting-info-list { padding-left: 0px; margin-bottom: 70px; } .include-feature-list .hosting-info-list:last-child { margin-bottom: 0px; } .include-feature-list .info-icon { min-width: 52px; padding-right: 25px; } .include-feature-list .xs-title, .include-feature-list p { color: #FFFFFF; } .include-feature-list .xs-title { margin-bottom: 17px; } .included-feature-list.feature-list-v3 { background: #1045db; background: -webkit-linear-gradient(right bottom, #1045db, #1e2aba, #022e9e, #0016b5, #123fbf); background: -webkit-gradient(linear, right bottom, left top, from(#1045db), color-stop(#1e2aba), color-stop(#022e9e), color-stop(#0016b5), to(#123fbf)); background: -o-linear-gradient(right bottom, #1045db, #1e2aba, #022e9e, #0016b5, #123fbf); background: linear-gradient(to left top, #1045db, #1e2aba, #022e9e, #0016b5, #123fbf); } .included-feature-list .wave_animation_wraper .wave.four { width: 434px; margin-left: auto; } /* for domain inner page */ .xs-feature-section + .included-feature-list { margin-top: -120px; padding-top: 200px; } /*--------------------------------------------------============================================================ 30. domain price =================================================--------------------------------------------------------------*/ .xs-table { -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); background-color: #FFFFFF; margin-bottom: 0px; } .xs-table .domain-pricing-header th { width: 25%; background-color: transparent; border: 0px; color: #FFFFFF; padding: 17px 10px; font-size: 1.17647rem; } .xs-table .domain-pricing-header tr { background: #103dbe; background: -webkit-linear-gradient(45deg, #103dbe 0%, #13238e 32%, #15095e 99%); background: -o-linear-gradient(45deg, #103dbe 0%, #13238e 32%, #15095e 99%); background: linear-gradient(45deg, #103dbe 0%, #13238e 32%, #15095e 99%); } .xs-table td, .xs-table th { text-align: center; padding: 15px 10px; } .xs-table tbody tr th, .xs-table tbody tr td { border-right: 1px solid #eaeaea; border-top: 1px solid #eaeaea; } .xs-table tbody tr td:last-child { border-right: 0px; } .xs-table tbody tr:first-child th, .xs-table tbody tr:first-child td { border-top: 0px; } .xs-table tbody tr td { letter-spacing: -.4px; } .xs-table tbody tr td > del { color: #a4afdf; font-size: 0.82353rem; padding-left: 3px; } .xs-table.fixed-column { position: absolute; left: 15px; width: 83px; display: inline-block; z-index: 1; -webkit-box-shadow: none; box-shadow: none; } @media (min-width: 576px) { .xs-table.fixed-column { display: none; } } @media (max-width: 576px) { .xs-table:not(.fixed-column) tr th:first-child { display: none; } .xs-table:not(.fixed-column) { position: relative; left: 83px; } } .domain-price-v2 .xs-table .domain-pricing-header tr { background: #0217af; background: -webkit-linear-gradient(top, #0217af 0%, #0055ce 100%); background: -webkit-gradient(linear, left top, left bottom, from(#0217af), to(#0055ce)); background: -o-linear-gradient(top, #0217af 0%, #0055ce 100%); background: linear-gradient(to bottom, #0217af 0%, #0055ce 100%); } /*--------------------------------------------------============================================================ 31. blog list =================================================--------------------------------------------------------------*/ .xs-blog-list { margin-bottom: 80px; } .xs-blog-list .post { margin-bottom: 40px; } .xs-blog-list .post:last-child { margin-bottom: 0px; } .xs-blog-list.blog-lsit-style-2 .post:not(.post-details) .post-body { -webkit-box-shadow: 19.799px 19.799px 60px 0px rgba(0, 0, 0, 0.1); box-shadow: 19.799px 19.799px 60px 0px rgba(0, 0, 0, 0.1); background-color: #FFFFFF; } .xs-blog-list.blog-lsit-style-2 .post .post-body .post-meta > span, .xs-blog-list.blog-lsit-style-2 .post .post-body .post-meta a { color: #000000; } .xs-blog-list.blog-lsit-style-2 .post .post-body .post-meta > span i { padding-right: 7px; color: #1868dd; } .xs-blog-list.blog-lsit-style-2 .post .post-body .post-meta > span > a:hover { color: #1868dd; } .xs-blog-list.blog-lsit-style-2 .post .post-body .post-footer { text-align: left; } .xs-blog-list.blog-lsit-style-2 .post .post-body .post-footer .simple-btn i { font-size: 1rem; margin-top: 0px; } .post-body .entry-title { font-size: 1.76471rem; font-weight: 700; margin-bottom: 18px; } .post-body .entry-title a { color: #1e1e1e; display: inline-block; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .post-body .entry-title a:hover { color: #1868dd; } .post-body .post-meta { margin-bottom: 22px; } .post-body .post-meta > span { display: inline-block; font-size: 0.88235rem; padding-right: 30px; } .post-body .post-meta > span:last-child { padding-right: 0px; } .post-body .post-meta .post-author img { width: 35px; height: 35px; border-radius: 50%; } .post-body .post-meta .post-author img + a { padding-left: 13px; } .post-body .post-meta .post-author a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .post-body .post-meta > span, .post-body .post-meta a { color: #1868dd; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .post-body .entry-content { margin-bottom: 20px; } .post-body .entry-content p { margin-bottom: 0px; } .post-body .post-footer { text-align: right; } .post-body .post-footer .simple-btn { font-weight: 400; } .post-media .xs-overlay { opacity: .3; } .post-media .gloosy-btn { width: 60px; height: 60px; line-height: 63px; font-size: 0.88235rem; } .post:not(.post-details) .post-body { background-color: #f8fafe; padding: 40px 30px 30px; } .post:not(.format-audio):not(.post-details) .post-media + .post-body { width: calc(100% - 60px); margin: 0 auto; margin-top: -22px; z-index: 1; position: relative; } .post .post-media { position: relative; } .post .post-media iframe { width: 100%; display: block; } .post-gallery-slider { position: relative; } .post-gallery-slider .owl-nav .owl-prev, .post-gallery-slider .owl-nav .owl-next { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .post-gallery-slider .owl-nav .owl-prev { left: 15px; } .post-gallery-slider .owl-nav .owl-next { right: 15px; } .post-gallery-slider .owl-nav i { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; border-radius: 100%; color: #1868dd; background-color: #FFFFFF; font-size: 15px; } .sidebar-widget.sidebar-right { margin-left: 10px; } .sidebar-widget.sidebar-left { margin-right: 10px; } /*--------------------------------------------------============================================================ 32. side bar =================================================--------------------------------------------------------------*/ .xs-serach { position: relative; } .xs-serach input:not([type="submit"]) { height: 53px; padding: 0 30px; border: 1px solid #eaeaea; background-color: #FFFFFF; border-radius: 27.5px; -webkit-box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.08); width: 100%; } .xs-serach .search-btn { width: 62px; background-color: #1868dd; border: 0px; font-size: 1.05882rem; color: #FFFFFF; position: absolute; right: 0px; top: 0px; border-radius: 0 27.5px 27.5px 0; height: 100%; cursor: pointer; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .xs-serach .search-btn:hover { background-color: #103dbe; } .widget:not(:last-child) { margin-bottom: 40px; } .widget .xs-title { margin-bottom: 40px; } .widget:not(.widget-search) { padding: 40px; border: 1px solid #eaeaea; } .widget-posts .widget-post:not(:last-child) { padding-bottom: 15px; margin-bottom: 15px; border-bottom: 1px solid #eaeaea; } .widget-posts .widget-post img { padding-right: 20px; } .widget-posts .widget-post .post-meta-date { color: #626c84; } .widget-posts .widget-post .post-meta-date, .widget-posts .widget-post .post-author { font-size: 0.88235rem; } .widget-posts .widget-post .entry-title { font-size: 1rem; font-weight: 700; margin-bottom: 0px; } .widget-posts .widget-post .entry-title a { color: #1e1e1e; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .widget-posts .widget-post .entry-title a:hover { color: #1868dd; } .list-group li { position: relative; } .list-group li a, .list-group li span { color: #70799f; } .list-group li span { position: absolute; right: 0px; } .list-group li a { -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .list-group li a:hover { color: #1868dd; } .list-group li:not(:last-child) { border-bottom: 1px solid #eaeaea; padding-bottom: 14px; margin-bottom: 14px; } .tag-lists a { display: inline-block; padding: 7px 14px; color: #626c84; border: 1px solid #eaeaea; border-radius: 1.17647rem; font-size: 0.88235rem; margin-right: 6px; margin-bottom: 9px; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .tag-lists a:hover { color: #1868dd; border-color: currentColor; } .tag-lists .title { color: #1e1e1e; padding-right: 15px; font-weight: 700; } /*--------------------------------------------------============================================================ 33. post single =================================================--------------------------------------------------------------*/ .post-details .post-media { margin-bottom: 33px; } .post-details .post-body { margin-bottom: 40px; } .post-details .post-body .entry-content p { margin-bottom: 30px; } .post-details h4 { font-size: 1.17647rem; margin-bottom: 20px; } .post-details .xs-list li { font-weight: 700; margin-bottom: 15px; } .post-details .xs-list li:last-child { margin-bottom: 0px; } .post-details .entry-header { padding-bottom: 35px; margin-bottom: 40px; border-bottom: 1px solid #f1f1f1; } .post-details .post-footer .tag-lists { text-align: left; } .post-details .post-footer .tag-lists a { margin-bottom: 0px; } .post-details .post-footer .simple-social-list { margin-top: 6px; } .post-details .post-footer .simple-social-list .title { font-weight: 700; color: #1e1e1e; padding-right: 15px; } blockquote { background-color: #2a61e5; padding: 40px; color: #FFFFFF; font-size: 1.17647rem; font-style: italic; position: relative; margin-bottom: 35px; } blockquote::before { content: "\e937"; font-family: "iconfont"; display: block; margin-bottom: 10px; font-size: 2.41176rem; font-style: normal; -webkit-transform: rotateY(180deg) rotateX(180deg); transform: rotateY(180deg) rotateX(180deg); text-align: right; } blockquote cite { display: block; text-align: right; margin-top: 30px; font-size: 1rem; font-weight: 700; font-style: normal; } .author-image { margin-right: 25px; } .author-image img { width: 80px; height: 80px; border-radius: 5px; } .author-data h5 { font-size: 1.17647rem; font-family: "Rubik", sans-serif; margin-bottom: 0px; } .author-data a { color: #626c84; font-size: 0.88235rem; } .author-info .simple-social-list li a, .post-details .post-footer .simple-social-list li a { color: #252a37; font-size: 0.82353rem; } .post-details .post-footer .simple-social-list li, .author-info .simple-social-list li { margin-right: 14px; } .author-info .simple-social-list li:last-child, .post-details .post-footer .simple-social-list li:last-child { margin-right: 0px; } .author-info { padding: 40px; background-color: #f8fafe; margin-bottom: 40px; } .author-info .media { margin-bottom: 20px; } .author-info p { margin-bottom: 0px; } .post-navigation { padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #f1f1f1; } .post-navigation .post-navigation-title { display: block; } .post-navigation .post-navigation-title h3 { font-size: 1.17647rem; } .post-navigation .post-navigation-title span { color: #626c84; } .post-navigation .post-navigation-title span i { color: #103dbe; } .post-navigation [class^=col-]:first-child { border-right: 1px solid #f1f1f1; } .post-navigation [class^=col-]:first-child .post-navigation-title { margin-right: 20px; } .post-navigation [class^=col-]:first-child .post-navigation-title i { padding-right: 9px; } .post-navigation [class^=col-]:last-child .post-navigation-title { margin-left: 20px; text-align: right; } .post-navigation [class^=col-]:last-child .post-navigation-title i { padding-left: 9px; } /*--------------------------------------------------============================================================ 34. comments area =================================================--------------------------------------------------------------*/ .xs-comments-area { margin-bottom: 50px; } .xs-comments-area .comments-title { margin-bottom: 30px; } .xs-comments-area .comment-body:before { display: table; content: ""; clear: both; } .xs-comments-area .comment-body img { width: 80px; height: 80px; border-radius: 100%; float: left; } .xs-comments-area .meta-data { margin-left: 100px; } .xs-comments-area .reply { float: right; } .xs-comments-area .reply .comment-reply-link { color: #626c84; font-size: 0.88235rem; } .xs-comments-area .reply .comment-reply-link i { color: #252a37; font-size: 0.94118rem; padding-right: 10px; } .xs-comments-area .comment-author a { font-size: 1.05882rem; color: #1e1e1e; font-family: "Rubik", sans-serif; font-weight: 500; } .xs-comments-area .comment-date { color: #626c84; margin-bottom: 0px; font-size: 0.88235rem; } .xs-comments-area .comment-content { margin-top: 10px; } .xs-comments-area .comment-content p { margin-bottom: 0px; } .xs-comments-area .comment:not(:last-child) .children { margin-left: 100px; } .xs-comments-area .comment:not(:last-child) .children .meta-data { background-color: #f7f9fd; padding: 30px; margin-bottom: 0px; border-bottom: 0px; } .xs-comments-area .comment:not(:last-child) .meta-data, .xs-comments-area .comment:not(:last-child) .children { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #f1f1f1; } .comment-respond .comment-reply-title { margin-bottom: 35px; } .comment-respond .xs-form .form-control:last-child, .comment-respond .xs-form .form-control + .select:last-child, .comment-respond .xs-form .form-control, .comment-respond .xs-form .form-control + .select { margin-bottom: 20px; } .comment-respond .xs-form textarea.form-control { margin-bottom: 40px; } .comment-respond .form-submit { margin-bottom: 0px; text-align: right; } /*--------------------------------------------------============================================================ 35. cart =================================================--------------------------------------------------------------*/ .woo__wraper { -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); background-color: #FFFFFF; } .woo__wraper table.shop_table { border: 0px; margin: 0; border-radius: 0px; border-collapse: collapse; } .woo__wraper table.shop_table.table thead th { border-bottom: 0px; width: 20%; text-align: center; } .woo__wraper table.shop_table.table thead tr { background: #103dbe; background: -webkit-linear-gradient(45deg, #103dbe 0%, #13238e 32%, #15095e 99%); background: -o-linear-gradient(45deg, #103dbe 0%, #13238e 32%, #15095e 99%); background: linear-gradient(45deg, #103dbe 0%, #13238e 32%, #15095e 99%); color: #FFFFFF; } .woo__wraper table.shop_table.table td, .woo__wraper table.shop_table.table th { border-top: 0px; } .woo__wraper table.shop_table.table tbody tr td { padding: 44px 10px; border-top: 0px; border-bottom: 1px solid #eaeaea; } .woo__wraper table.shop_table.table tbody tr td:not(:last-child) { text-align: center; } .woo__wraper table.shop_table.table tbody tr td:last-child { text-align: right; padding-right: 40px; } .woo__wraper table.shop_table.table .product-name { font-weight: 700; color: #1e1e1e; } .woo__wraper table.shop_table.table .product-price, .woo__wraper table.shop_table.table .product-duration, .woo__wraper table.shop_table.table .product-name { letter-spacing: -.4px; } .woo__wraper table.shop_table.table a.remove { display: inline-block; height: auto; width: auto; font-size: 1rem; color: #70799f !important; position: relative; top: 2px; margin-left: 35px; } .woo__wraper table.shop_table.table a.remove:hover { background-color: transparent; } .cart-actios { padding-top: 40px; padding-bottom: 100px; } .coupon { max-width: 330px; margin-left: 50px; } .coupon .form-control { margin-bottom: 0px; } .coupon .btn { border-radius: 0px; padding: 13px 24px; } .cart_table_wraper { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #eaeaea; } .cart_table { max-width: 350px; margin-left: auto; margin-bottom: 0px; } .cart_table td, .cart_table th { border-top: 0px; padding: 0; padding-bottom: 5px; font-weight: 400; } .cart_table strong { font-weight: 700; color: #1e1e1e; } .cart_table .highlight { color: #fe1616; } .cart_table tr:last-child td, .cart_table tr:last-child th { padding-bottom: 0px; } .wc-proceed-to-checkout .xs-btn-wraper { text-align: left; } .wc-proceed-to-checkout .btn { padding: 15px 34px; } .cart_table_wraper, .wc-proceed-to-checkout { width: calc(100% - 40px); margin-left: auto; } /*--------------------------------------------------============================================================ 36. cart check out =================================================--------------------------------------------------------------*/ .cart-checkout-wraper { padding: 80px 60px; -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08); background-color: #FFFFFF; } .checkout-form-group { width: calc(100% - 90px); } .sign_in_form { padding-bottom: 30px; margin-bottom: 60px; border-bottom: 1px solid #eaeaea; } .sign_in_form .simple-btn { color: #70799f; font-weight: 400; text-decoration: underline; margin-top: 16px; } .billing-form .xs-title, .sign_in_form .xs-title { margin-bottom: 30px; } .billing-form .form-group { margin-bottom: 30px; } .billing-form .form-group:last-child { margin-bottom: 0px; } .checkout_info .xs-title { padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #eaeaea; } .checkout_info .gap { height: 35px; } .checkout_info tbody tr td { text-align: right; } .checkout_info .wc-proceed-to-checkout .xs-btn-wraper { text-align: right; } .checkout_info .cart_table_wraper { width: calc(100% - 25px); } .checkout_info .table tbody + tbody { border: 0px; } /*--------------------------------------------------============================================================ 37. VPS Slider =================================================--------------------------------------------------------------*/ .vps-slider-wraper { background-color: #FFFFFF; -webkit-box-shadow: 0px 20px 45px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 20px 45px 0px rgba(0, 0, 0, 0.08); } .vps-slider { background-color: rgba(255, 255, 255, 0.102); height: 7px; border-radius: 0; border: 0; width: calc(100% - 15px); margin: 0 auto; } .vps-slider .ui-widget-header { background-color: #FFFFFF; border-radius: 0px; } .vps-slider .ui-slider-handle { border-radius: 50%; width: 20px; height: 20px; background-color: #FFFFFF; border: 0px; } .vps-slider .ui-slider-handle::before { position: absolute; content: ""; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 100%; background-color: #103dbe; } .slider-group { background-color: #103dbe; padding: 50px; } .slider-range { margin-top: 36px; } .slider-tigger { position: relative; padding-top: 40px; margin: 0 auto; float: left; display: inline-block; width: calc(calc(100% / 5) - 15px); overflow: hidden; cursor: pointer; } .slider-tigger:not(:last-child) { margin-right: 15px; } .slider-tigger::before { position: absolute; content: ""; top: 0; left: 0; height: 100%; width: 100%; background-image: url(../images/vps/range.png); background-repeat: no-repeat; } .slider-tigger h5 { color: #5e73cc; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; font-size: 1.05882rem; font-weight: 500; font-family: "Rubik", sans-serif; margin-bottom: 0px; } .slider-tigger.current h5 { color: #FFFFFF; } .slider-content-group { padding: 80px 60px; background-repeat: no-repeat; background-position: right bottom; } .slider-container .title { font-style: italic; font-weight: 700; margin-bottom: 0px; } .slider-container .price { color: #103dbe; font-size: 3.29412rem; font-weight: 700; margin-bottom: 24px; } .slider-container .desc { font-size: 0.88235rem; margin-bottom: 36px; } .slider-container .btn { border-radius: 0px; padding: 21px 47px; font-size: 18px; font-weight: 500; background-color: #103dbe; font-family: "Rubik", sans-serif; } .slider-container .btn span { position: relative; top: 1px; padding-right: 16px; } .vps-pricing-list > li { max-width: calc(33.33333% - 60px); width: 100%; float: left; display: inline-block; } .vps-pricing-list > li:not(:last-child) { margin-right: 60px; } .vps-pricing-list > li > h4 { font-size: 1.05882rem; margin-bottom: 5px; } .vps-pricing-list > li > p { margin-bottom: 0px; font-size: 0.88235rem; } .vps-pricing-list:not(:last-child) > li { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid #e7e7e7; } /*--------------------------------------------------============================================================ 38. Dedicated Server =================================================--------------------------------------------------------------*/ .server-price-wraper .xs-title { font-size: 1.64706rem; color: #103dbe; margin-bottom: 32px; } .server-price-table thead tr { background-color: #103dbe; color: #FFFFFF; position: relative; background-image: url(../images/dedicated-server/1.png); background-repeat: no-repeat; } .server-price-table thead tr th { border-bottom: 0px; } .server-price-table thead tr th, .server-price-table thead tr td, .server-price-table tbody tr th, .server-price-table tbody tr td { font-size: 0.76471rem; padding: 22px; font-weight: 400; } .server-price-table tbody { border: 1px solid #f7f7f7; } .server-price-table tbody td, .server-price-table tbody th { border-right: 1px solid #f7f7f7; border-top: 0px; vertical-align: middle; color: #000000; } .server-price-table tbody .price { color: #fa6700; } .server-price-table tbody .price del { color: #a3a3a3; padding-right: 6px; } .server-price-table tbody a.featured { color: #fa6700; } .server-price-table tbody a.featured.disabled { pointer-events: none; color: #9d9d9d; } .server-price-table.table-striped tbody tr:nth-of-type(odd) { background-color: #f7f7f7; } .server-price-table .tag { color: #FFFFFF; height: 18px; line-height: 18px; background-color: #fa6700; padding: 0 5px; font-size: 0.64706rem; display: inline-block; margin-right: 15px; } .server-price-table .tag.featured { background-color: #103dbe; } /*--------------------------------------------------============================================================ 1. Element =================================================--------------------------------------------------------------*/ .watermark-icon { position: absolute; right: -48px; top: -30px; color: rgba(255, 255, 255, 0.1); font-size: 10rem; z-index: -1; } /* round avatar */ .round-avatar > img { border-radius: 100%; } /*--------------------------------------------------============================================================ 2. Buttons =================================================--------------------------------------------------------------*/ .btn:not([class*=btn-outline]) { border: 0px; } .btn-primary { background-color: #1868dd; } .btn-primary:hover::before { background-color: #103dbe; } .btn-primary1 { background-color: #5333ed; color: #FFFFFF; } .btn-primary1:hover::before { background-color: #103dbe; color: #FFFFFF; } .btn-secondary { background-color: #433CC5; color: #ffffff; -webkit-box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1); } .btn-secondary:hover::before { background-color: #19097B; } .btn-outline-secondary { border-color: #1868dd; color: #1868dd; } .btn-outline-secondary:hover { border-color: #103dbe; } .btn-outline-secondary:hover::before { background-color: #103dbe; } .btn-third { background-color: #FFFFFF; color: #1868dd; -webkit-box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1); } .btn-third:hover { background-color: #bababa; } .btn-third:hover::before { background-color: #bababa; } .btn-outline-third { border-color: #1868dd; color: #1868dd; } .btn-outline-third:hover { border-color: #103dbe; } .btn-outline-third:hover::before { background-color: #103dbe; } .btn-third1 { background-color: #FFFFFF; color: #5333ed; -webkit-box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 15px 15px 0px rgba(0, 0, 0, 0.1); } .btn-third1:hover { background-color: #bababa; } .btn-third1:hover::before { background-color: #bababa; } .btn-outline-third1 { border-color: #5333ed; color: #5333ed; } .btn-outline-third1:hover { border-color: #103dbe; } .btn-outline-third1:hover::before { background-color: #103dbe; } .btn { border-radius: 1.61765rem; padding: 14px 45px; position: relative; letter-spacing: -.4px; overflow: hidden; -webkit-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; z-index: 1; } .btn::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: all 0.6s; -o-transition: all 0.6s; transition: all 0.6s; -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); transform: scale(0, 1); } .btn:hover::before { -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); transform: scale(1, 1); } .btn .icon-right i { padding-left: 10px; position: relative; top: 2px; } .xs-btn-wraper .btn { margin-right: 15px; } .xs-btn-wraper .btn:last-child { margin-right: 0px; } .btn-outline-primary { color: #FFFFFF; border-color: #FFFFFF; } .btn-outline-primary:hover { border-color: #1868dd; } .btn-outline-primary:hover::before { background-color: #1868dd; } .join-with-us-content .btn:hover::before { background-color: #103dbe; } input.btn-primary:hover { background-color: #103dbe; } input.btn-primary1:hover { background-color: #103dbe; } input.btn-secondary:hover { background-color: #1868dd; } input.btn-outline-secondary:hover { background-color: #1868dd; border-color: #1868dd; } .xs-feature-group .btn-secondary:hover::before { background-color: #103dbe; } .preloader-cancel-btn .btn-secondary:hover::before { background-color: #103dbe; } .simple-btn { font-weight: 700; display: inline-block; line-height: 1; } .simple-btn i { font-size: 0.58824rem; margin-top: 4px; } .simple-btn.icon-right i { float: right; padding-left: 8px; } .simple-btn.icon-left i { float: left; padding-right: 8px; } .expand-btn { min-width: 180px; padding-left: 40px; padding-right: 0px; text-align: left; } .expand-btn > i { position: absolute; right: 8px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; width: 39px; height: 39px; line-height: 38px; background-color: #2379f6; text-align: center; border-radius: 100%; font-size: 15px; } .gloosy-btn { display: block; width: 75px; height: 75px; line-height: 78px; border-radius: 100%; background-color: #FFFFFF; text-align: center; font-size: 1.17647rem; position: relative; z-index: 1; } .gloosy-btn::before { position: absolute; content: ""; top: 0%; left: 0%; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; border-radius: 100%; height: 100%; width: 100%; -webkit-animation: pulse 1.5s linear .5s infinite both; animation: pulse 1.5s linear .5s infinite both; background-color: rgba(255, 255, 255, 0.25); pointer-events: none; z-index: -1; } .gloosy-btn > i { background: #103dbe; background: -webkit-linear-gradient(45deg, #103dbe 0%, #13238e 32%, #15095e 99%); background: -o-linear-gradient(45deg, #103dbe 0%, #13238e 32%, #15095e 99%); background: linear-gradient(45deg, #103dbe 0%, #13238e 32%, #15095e 99%); -webkit-filter: drop-shadow(5px 0px 10px rgba(42, 95, 230, 0.35)); filter: drop-shadow(5px 0px 10px rgba(42, 95, 230, 0.35)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #1868dd; margin-left: 4px; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(2.5); transform: scale(2.5); opacity: 0; } } @keyframes pulse { 0% { -webkit-transform: scale(0); transform: scale(0); opacity: 1; } 100% { -webkit-transform: scale(2.5); transform: scale(2.5); opacity: 0; } } /*--------------------------------------------------============================================================ 3. Social list =================================================--------------------------------------------------------------*/ .social-list li { display: inline-block; margin-right: 10px; } .social-list li:last-child { margin-right: 0px; } .social-list li a { display: block; width: 42px; height: 42px; line-height: 42px; border-radius: 100%; border: 1px solid #6b7499; text-align: center; font-size: 0.82353rem; color: #1e1e1e; } .social-list li a.facebook { color: #4969a8; } .social-list li a.twitter { color: #2aa3ef; } .social-list li a.linkedin { color: #1178b3; } .social-list li a.instagram { color: #e8715c; } .social-list li a.googlePlus { color: #dc4a38; } .social-list li a.vimeo { color: #1ab7ea; } .social-list.version-2 li a { color: #FFFFFF; font-size: 0.70176rem; width: 35px; height: 35px; line-height: 35px; border: 0px; } .social-list.version-2 li a.facebook { background-color: #4969a8; } .social-list.version-2 li a.twitter { background-color: #2aa3ef; } .social-list.version-2 li a.linkedin { background-color: #1178b3; } .social-list.version-2 li a.instagram { background-color: #e8715c; } .social-list.version-2 li a.googlePlus { background-color: #dc4a38; } .social-list.version-2 li a.vimeo { background-color: #1ab7ea; } .simple-social-list li { margin-right: 32px; } .simple-social-list li:last-child { margin-right: 0px; } .simple-social-list li a { color: #FFFFFF; font-size: 1.05882rem; } /*--------------------------------------------------============================================================ 4. Select =================================================--------------------------------------------------------------*/ .select-hidden { display: none; visibility: hidden; padding-right: 10px; } .select { cursor: pointer; display: inline-block; position: relative; font-size: 16px; color: #7b7b7b; width: 220px; height: 40px; } .select-styled { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: transparent; padding: 8px 15px; -webkit-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .select-styled:after { content: "\f107"; position: absolute; top: 0px; right: 10px; font-family: "FontAwesome"; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .select-styled:hover { background-color: rgba(0, 0, 0, 0); } .select-styled:active, .select-styled.active { background-color: rgba(0, 0, 0, 0); } .select-styled:active:after, .select-styled.active:after { -webkit-transform: rotateX(180deg); transform: rotateX(180deg); color: #1868dd; } .select-styled.active { color: #1868dd; } .select-options { display: none; position: absolute; top: calc(100% + 20px); left: -50%; min-width: 200px; z-index: 999; } .select-options::before { position: absolute; content: ""; top: -8px; left: 50%; width: 16px; height: 16px; -webkit-transform: translateX(-50%) rotate(45deg); -ms-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); z-index: -1; } .select-options li { padding: 15px; border-top: 1px solid rgba(0, 0, 0, 0); -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; color: #FFFFFF; } .select-options li:hover { background: #1352af; } .select-options li[rel="hide"] { display: none; } .select-options, .select-options::before { background-color: #1868dd; } /*--------------------------------------------------============================================================ 5. Section title =================================================--------------------------------------------------------------*/ .xs-heading { margin-bottom: 75px; text-align: center; } .xs-heading .heading-sub-title { color: #8c8c8c; font-size: 1.17647rem; font-weight: 400; font-family: "Karla", sans-serif; } .xs-heading .heading-title { font-size: 2.11765rem; font-weight: 700; } .xs-heading .heading-title1 span { color: #5434ED; } .xs-heading .heading-title span { color: #103dbe; } .xs-heading.heading-v2 .heading-title { font-weight: 500; } /* content title */ .content-title { font-size: 1.76471rem; font-weight: 700; } .content-title-wraper { margin-bottom: 40px; } .content-title-wraper .content-title { margin-bottom: 0px; } /*--------------------------------------------------============================================================ 6. nav tab =================================================--------------------------------------------------------------*/ .main-nav-tab { -webkit-box-shadow: 0px 20px 45px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 20px 45px 0px rgba(0, 0, 0, 0.08); border-radius: 1.61765rem; max-width: 260px; margin: 0 auto; background-color: #FFFFFF; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 5px 0; z-index: 1; position: relative; } .main-nav-tab li { display: inline-block; } .main-nav-tab li a { display: block; color: #5f5f5f; min-width: 125px; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; padding: 8px 31px; text-align: center; } .main-nav-tab li a.active { color: #FFFFFF; } .main-nav-tab li a, .tab-swipe .indicator { border-radius: 1.35294rem; } .tab-swipe { position: relative; } .tab-swipe .indicator { background-color: #1868dd; position: absolute; left: 0; z-index: -1; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .6s ease; -o-transition: all .6s ease; transition: all .6s ease; height: calc(100% - 10px); } .main-nav-tab-2 { margin-bottom: 50px; } .main-nav-tab-2.nav-tabs { border-bottom: 1px solid rgba(9, 208, 201, 0.25); } .main-nav-tab-2 li { width: calc(100% / 4); } .main-nav-tab-2 li a { display: block; text-align: center; color: #FFFFFF; font-family: "Rubik", sans-serif; font-size: 1.17647rem; font-weight: 500; padding-bottom: 40px; } .main-nav-tab-2 li a > p { min-height: 46px; display: block; margin-bottom: 15px; } .main-nav-tab-2.tab-swipe .indicator { top: inherit; -webkit-transform: none; -ms-transform: none; transform: none; bottom: -1px; border-radius: 0px; height: 2px; background-color: #09d0c9; } /*--------------------------------------------------============================================================ 7. unorder list =================================================--------------------------------------------------------------*/ .list-inline > li { display: inline-block; } .xs-list li { letter-spacing: -0.4px; } .xs-list li i { padding-right: 5px; } .xs-list.check li { position: relative; } .xs-list.check li::before { padding-right: 16px; content: "\ea71"; font-family: "iconfont"; color: #1868dd; position: relative; top: 3px; font-size: 0.88235rem; } /*--------------------------------------------------============================================================ 8. breadCumb =================================================--------------------------------------------------------------*/ .breadcrumbs > li > a { color: #FFFFFF; } .breadcrumbs > li:not(:first-child) { position: relative; } .breadcrumbs > li:not(:first-child)::before { content: "/"; padding: 0 3px; display: inline-block; } /*--------------------------------------------------============================================================ 9. accordion =================================================--------------------------------------------------------------*/ .xs-accordion { margin-bottom: 75px; } .xs-accordion > .card { border: 0; background-color: #FFFFFF; margin-bottom: 20px; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; border-radius: 0px; } .xs-accordion > .card:last-child { margin-bottom: 0px; } .xs-accordion > .card > .card-header { border-bottom: 0; background-color: transparent; border-radius: 0px; padding: 0; } .xs-accordion > .card > .card-header > a { display: block; color: #292929; font-family: "Rubik", sans-serif; background-color: #f8fafe; font-weight: 500; padding: 19px 0; position: relative; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .xs-accordion > .card > .card-header > a > i { position: absolute; right: 30px; top: 25px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; font-size: 0.70588rem; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; color: #000000; } .xs-accordion > .card > .card-header > a[aria-expanded="true"] { background-color: transparent; } .xs-accordion > .card > .card-header > a[aria-expanded="true"] > i { -webkit-transform: rotateX(-180deg); transform: rotateX(-180deg); } .xs-accordion > .card.isActive { -webkit-box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.06); box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.06); } .xs-accordion > .card.isActive > .card-header > a { color: #103dbe; } .xs-accordion .card-body { padding-top: 0px; padding-bottom: 30px; } .xs-accordion .card-body p { margin-bottom: 0px; } .xs-accordion > .card > .card-header > a, .xs-accordion .card-body { padding-left: 30px; padding-right: 30px; } .xs-accordion > .small { font-weight: 500; margin-bottom: 35px; } .xs-accordion:last-child { margin-bottom: 0px; } .xs-bg-gray .xs-accordion > .card > .card-header > a { background-color: #FFFFFF; } /*--------------------------------------------------============================================================ 10. map =================================================--------------------------------------------------------------*/ .xs-map { height: 500px; } .xs-map + .xs-footer-section { margin-top: -150px; } /*--------------------------------------------------============================================================ 11. custom control =================================================--------------------------------------------------------------*/ /* custom control */ .custom-control { line-height: 1; min-height: 100%; } .custom-control .custom-control-label::after, .custom-control .custom-control-label::before { width: 14px; height: 14px; top: 2px; -webkit-transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1); -o-transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1); transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1); } .custom-control .custom-control-label::after { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .custom-control .custom-control-input:checked ~ .custom-control-label::after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .custom-control .custom-control-input:checked ~ .custom-control-label::before { border-color: #1868dd; background-color: #1868dd; } .custom-control .custom-control-label::before { background-color: #FFFFFF; border: 1px solid #afb6d2; pointer-events: visible; cursor: pointer; border-radius: 0px; } .custom-control .custom-control-input:focus ~ .custom-control-label::before { -webkit-box-shadow: none; box-shadow: none; } .custom-control .custom-control-label { margin-bottom: 0; font-size: 0.88235rem; color: #70799f; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; line-height: 1; } .custom_number { position: relative; height: 37px; width: 162px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin: 0 auto; } .custom_number .sub, .custom_number .add { float: left; width: 50px; height: 100%; 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; cursor: pointer; -webkit-transition: all .4s ease; -o-transition: all .4s ease; transition: all .4s ease; } .custom_number .add { float: right; } .custom_number input[type="number"] { height: 100%; width: auto; background-color: #FFFFFF; text-align: center; pointer-events: none; border: 1px solid #eaeaea; width: 62px; color: #70799f; } .custom_number input[type="number"]::-webkit-inner-spin-button, .custom_number input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /*--------------------------------------------------============================================================ 12. pagination =================================================--------------------------------------------------------------*/ /* xs pagination */ .pagination li { display: inline-block; margin: 0 6px 0 0; } .pagination li:last-child { margin: 0; } .pagination li a { width: 40px; height: 40px; line-height: 38px; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; color: #626c84; border: 1px solid; padding: 0; border-radius: 100%; text-align: center; font-size: 0.94118rem; } .pagination li a:hover, .pagination li a.current { background-color: #1868dd; color: #FFFFFF; border-color: #1868dd; } .pagination .page-item:first-child .page-link, .pagination .page-item:last-child .page-link { border-radius: 100%; } .pagination .page-item:last-child .page-link { font-size: 0.70588rem; } .pagination .page-item.disabled a, .pagination li a { border-color: #f1f1f1; } /*--------------------------------------------------============================================================ 13. prelaoder =================================================--------------------------------------------------------------*/ #preloader { position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 9999999999; background-color: #1868dd; -webkit-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } #preloader .preloader-cancel-btn { position: fixed; bottom: 0; right: 0; padding: 40px; -webkit-transition: all 1s ease-in; -o-transition: all 1s ease-in; transition: all 1s ease-in; } #preloader.loaded { top: -150%; } #preloader.loaded .preloader-cancel-btn { bottom: 150%; } .prelaoder-btn { padding: 10px 30px; } .preloader-wrapper { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; } .spinner { width: 40px; height: 40px; background-color: #FFFFFF; -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out; animation: sk-rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes sk-rotateplane { 0% { -webkit-transform: perspective(120px); } 50% { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } @keyframes sk-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } /*--------------------------------------------------============================================================ 14. Order list =================================================--------------------------------------------------------------*/ .terms-wraper:not(:last-child) { margin-bottom: 30px; } .order-list { padding-left: 0px; margin-bottom: 0px; } .order-list li { list-style: decimal; list-style-position: inside; } .order-list li:not(:last-child) { margin-bottom: 10px; } .nav-sticky { -webkit-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); -o-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); } .nav-sticky.sticky-header { position: fixed; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); background-color: #1868dd; width: 100%; z-index: 100; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); } .nav-sticky.sticky-header .xs-logo { padding: 20px 0; } .nav-sticky.sticky-header .xs-menu-tools { padding: 26px 0; } .nav-sticky.sticky-header .xs-menu-tools > li > a { color: #FFFFFF; } .nav-sticky.sticky-header .xs-menus .nav-menu > li > a { padding: 30px 0px; color: #FFFFFF; } .nav-sticky.sticky-header .xs-menus .nav-menu > li > a .submenu-indicator-chevron { border-color: transparent #FFFFFF #FFFFFF transparent; } .nav-sticky.sticky-header.sticky { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .nav-sticky.sticky-header.nav-light { background-color: #FFFFFF; -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); } .nav-sticky.sticky-header .xs-top-bar { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); margin-top: -50px; } .nav-sticky .xs-top-bar { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); margin-top: 0px; -webkit-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); -o-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); } .nav-sticky .nav-menu > li > a { -webkit-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); -o-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); } .nav-sticky .xs-logo { -webkit-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); -o-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); } .nav-sticky .xs-menu-tools > li > a { -webkit-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); -o-transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); transition: all 0.6s cubic-bezier(0.65, 0.05, 0.36, 1); } .location { display: inline-block; } .location_indicator { position: relative; width: 15px; height: 15px; background-color: #1868dd; border-radius: 50%; } .location_indicator::before, .location_indicator::after { position: absolute; content: ""; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); height: 100%; width: 100%; background-color: #1868dd; border-radius: 50%; -webkit-animation: pulse 3s infinite cubic-bezier(0.4, 0, 1, 1) both; animation: pulse 3s infinite cubic-bezier(0.4, 0, 1, 1) both; } .location_indicator::after { -webkit-animation-delay: .5s; animation-delay: .5s; } @keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(12, 90, 219, 0.2); box-shadow: 0 0 0 0 rgba(12, 90, 219, 0.2); } 70% { -webkit-box-shadow: 0 0 0 30px rgba(12, 90, 219, 0); box-shadow: 0 0 0 30px rgba(12, 90, 219, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(12, 90, 219, 0); box-shadow: 0 0 0 0 rgba(12, 90, 219, 0); } } .tooltip.show { opacity: 1; } .tooltip .tooltip-inner { padding: 15px; width: 100%; max-width: 300px; text-align: left; background-color: #FFFFFF; -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); } .location-name { font-size: 1.05882rem; font-weight: 500; margin-bottom: 10px; } .location-des { margin-bottom: 0; color: #000000; } .tooltip .arrow::before { color: #FFFFFF; } .bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before { border-top-color: currentColor; } .bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before { border-bottom-color: currentColor; } .bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before { border-right-color: currentColor; } .bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before { border-left-color: currentColor; } .location-groups { position: relative; } .location-groups .location { position: absolute; } .location-groups .location.location-1 { top: 31.9%; left: 49.8%; } .location-groups .location.location-2 { top: 33%; left: 46.5%; } .location-groups .location.location-3 { right: 20%; top: 20%; } .location-groups .location.location-4 { top: 10%; left: 35%; } .location-groups .location.location-5 { left: 30%; bottom: 24%; } /*--------------------------------------------------============================================================ 15. inheritance =================================================--------------------------------------------------------------*/ .xs-section-padding { padding: 100px 0; } .xs-section-padding-bottom { padding-bottom: 100px; } .xs-section-padding-top { padding-top: 100px; } .xs-mb-0 { margin-bottom: 0px; } .xs-pb-0 { padding-bottom: 0px; } .xs-mb-1 { margin-bottom: 10px; } .xs-pb-1 { padding-bottom: 10px; } .xs-mb-2 { margin-bottom: 20px; } .xs-pb-2 { padding-bottom: 20px; } .xs-mb-3 { margin-bottom: 30px; } .xs-pb-3 { padding-bottom: 30px; } .xs-mb-4 { margin-bottom: 40px; } .xs-pb-4 { padding-bottom: 40px; } .xs-mb-5 { margin-bottom: 50px; } .xs-pb-5 { padding-bottom: 50px; } .xs-mb-6 { margin-bottom: 60px; } .xs-pb-6 { padding-bottom: 60px; } .xs-mb-7 { margin-bottom: 70px; } .xs-pb-7 { padding-bottom: 70px; } .xs-mb-8 { margin-bottom: 80px; } .xs-pb-8 { padding-bottom: 80px; } .xs-mb-9 { margin-bottom: 90px; } .xs-pb-9 { padding-bottom: 90px; } .xs-mb-10 { margin-bottom: 100px; } .xs-pb-10 { padding-bottom: 100px; } .xs-margin-0 { margin: 0; } .xs-padding-0 { padding: 0; } .xs-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; opacity: .5; z-index: 0; } .parallax-window { background-attachment: fixed; } /* color */ .xs-color-black { color: #000000; } /* background color */ .xs-bg-black { background-color: #000000; } /* color */ .xs-color-white { color: #FFFFFF; } /* background color */ .xs-bg-white { background-color: #FFFFFF; } /* color */ .xs-color-primary { color: #1868dd; } /* background color */ .xs-bg-primary { background-color: #1868dd; } /* color */ .xs-color-secondary { color: #103dbe; } /* background color */ .xs-bg-secondary { background-color: #103dbe; } /* color */ .xs-color-gray { color: #f8fafe; } /* background color */ .xs-bg-gray { background-color: #f8fafe; } /* remove from control focus box shadow */ .form-control:focus { -webkit-box-shadow: none; box-shadow: none; } p, span, small, strong, a { letter-spacing: -0.4px; } h1, h2, h3, h4 { font-family: "Rubik", sans-serif; } h1, h2, h3, h4, h5, h6 { color: #1e1e1e; } a { color: #3482ff; } .xs-title, h4 { font-size: 1.41176rem; font-weight: 500; margin-bottom: 16px; } .xs-title.small, h4.small { font-size: 1.17647rem; } .xs-title a, h4 a { color: #1e1e1e; display: inline-block; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .xs-title a:hover, h4 a:hover { color: #1868dd; } /* bootstrap nav style reset */ .nav-tabs { border-bottom: 0px; } /* owl image preset */ .owl-carousel .owl-item img { width: auto; } /* gradinet bg */ .bg-gradient { background: #1045db; background: -webkit-linear-gradient(135deg, #1045db 0%, #15095e 60%, #15095e 99%); background: -o-linear-gradient(135deg, #1045db 0%, #15095e 60%, #15095e 99%); background: linear-gradient(-45deg, #1045db 0%, #15095e 60%, #15095e 99%); } .bg-gradient .heading-sub-title, .bg-gradient .heading-title, .bg-gradient .heading-title span { color: #FFFFFF; } /* tab pane animation */ .tab-pane.animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } /* remove iframe box shadow and background */ .mfp-iframe-scaler iframe { -webkit-box-shadow: none; box-shadow: none; background: transparent; } img { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; user-select: none; }