/* ---------------------------------------------------------------- Canvas: Hosting -----------------------------------------------------------------*/ /* Slider Section */ .slider-element { height: 600px; overflow: visible; background-color: #44AAAC; } .slider-title h2 { font-size: 2.7rem; letter-spacing: -1px; line-height: 1.25 !important; } .slider-title p { opacity: .9; font-size: 1.1rem; line-height: 1.8 !important; font-weight: 300; } .slider-bottom-box { display: block; padding: 40px; background: #FFF; box-shadow: 0px 10px 40px 0px rgba(47,47,47,0.1); border-radius: 3px; } .slider-bottom-box li { font-size: 16px; font-weight: 500; } /* mega-menu */ .mega-menu-column .btn-link { font-size: 14px; } .section-domain .dropdown-toggle::after { vertical-align: middle } .section-domain .custom-select:focus, .section-domain .form-control:focus { border-color: #ced4da; box-shadow: none } .section-domain .custom-select { height: 50px; border-radius: 0; padding-left: 1.1rem; background-color: #F9F9F9; } .section-domain .input-group-lg > .form-control, .section-domain .input-group-lg > .input-group-append > .btn { font-size: 1rem; } .before-heading { font-style: normal; font-size: 13px; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #CCC; } .cpu-price, .ram-price, .storage-price { font-size: 44px; } .font-normal { font-style: normal !important; } #top-bar { height: 52px; line-height: 52px; } .dark #header-wrap:not(.not-dark) .primary-menu > ul > li > a { color: #FFF !important; } .slider-element { height: 700px; } .menu-link { letter-spacing: 0; } .content-wrap { overflow: visible; } .slider-box-wrap { position: relative; top: -50px; margin-bottom: -50px; z-index: 2; } .heading-block p { margin-top: 10px; font-size: 17px; font-weight: 300; line-height: 1.7 !important; } /* Clouds */ .cloud-wrap { bottom: 0; left: 0; padding-top: 50px; position: absolute; right: 0; top: 0; overflow: hidden; opacity: .09; /* Set Cloud Opacity */ } /* KEYFRAMES */ @-webkit-keyframes animateCloud { 0% { margin-left: -1000px; } 100% { margin-left: 100%; } } @-moz-keyframes animateCloud { 0% { margin-left: -1000px; } 100% { margin-left: 100%; } } @keyframes animateCloud { 0% { margin-left: -1000px; } 100% { margin-left: 100%; } } /* ANIMATIONS */ .c1 { -webkit-animation: animateCloud 35s linear infinite; -moz-animation: animateCloud 35s linear infinite; animation: animateCloud 35s linear infinite; -webkit-transform: scale(0.65); -moz-transform: scale(0.65); transform: scale(0.65); } .c2 { -webkit-animation: animateCloud 20s linear infinite; -moz-animation: animateCloud 20s linear infinite; animation: animateCloud 20s linear infinite; -webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3); } .c3 { -webkit-animation: animateCloud 30s linear infinite; -moz-animation: animateCloud 30s linear infinite; animation: animateCloud 30s linear infinite; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5); } .c4 { -webkit-animation: animateCloud 18s linear infinite; -moz-animation: animateCloud 18s linear infinite; animation: animateCloud 18s linear infinite; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4); } .c5 { -webkit-animation: animateCloud 25s linear infinite; -moz-animation: animateCloud 25s linear infinite; animation: animateCloud 25s linear infinite; -webkit-transform: scale(0.55); -moz-transform: scale(0.55); transform: scale(0.55); } .cloud { background: #FFF; background: -moz-linear-gradient(top, #FFF 5%, #F1F1F1 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#FFF), color-stop(100%,#F1F1F1)); background: -webkit-linear-gradient(top, #FFF 5%,#F1F1F1 100%); background: -o-linear-gradient(top, #FFF 5%,#F1F1F1 100%); background: -ms-linear-gradient(top, #FFF 5%,#F1F1F1 100%); background: linear-gradient(top, #FFF 5%,#F1F1F1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFF', endColorstr='#F1F1F1',GradientType=0 ); -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); height: 120px; position: relative; width: 350px; } .cloud::after, .cloud::before { background: #FFF; content: ''; position: absolute; z-indeX: -1; } .cloud::after { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; height: 100px; left: 50px; top: -50px; width: 100px; } .cloud::before { -webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; width: 180px; height: 180px; right: 50px; top: -90px; } .mega-menu-content .feature-box h3 a { color: #222; } .dark .primary-menu ul li .mega-menu-content ul.mega-menu-column:not(:first-child) { border-left-color: #F2F2F2 !important; } /* Hotspot */ .hotspot-img { position: relative; } .hotspot-img img { opacity: .6; } .hotspot-img .hot-spot { position: absolute; width: 12px; height: 12px; top: 5px; left: 5px; text-align: center; background-color: rgba(68, 170, 172, 0.8); border: 1px solid #FFF; border-radius: 100%; cursor: pointer; transition: transform .3s ease; } .hotspot-img .hot-spot .circle { display: block; position: absolute; top: 47%; left: 47%; width: 2em; height: 2em; margin: -1em auto auto -1em; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; border-radius: 50%; background: #44aaac; opacity: 0; z-index: -1; -webkit-animation: pulsate 3.5s ease-out infinite; animation: pulsate 3.5s ease-out infinite; } .hotspot-img .hot-spot:nth-child(2) .circle { animation-delay: 2s; } .hotspot-img .hot-spot:nth-child(3) .circle { animation-delay: 3.5s; } .hotspot-img .hot-spot:nth-child(4) .circle { animation-delay: 5.2s; } .hotspot-img .hot-spot:nth-child(5) .circle { animation-delay: 6.4s; } .hotspot-img .hot-spot:nth-child(6) .circle { animation-delay: 8s; } .hotspot-img .hot-spot:nth-child(7) .circle { animation-delay: 9.2s; } .hotspot-img .hot-spot:nth-child(8) .circle { animation-delay: 11s; } .hotspot-img .hot-spot:nth-child(9) .circle { animation-delay: 13s; } .hotspot-img .hot-spot:nth-child(10) .circle { animation-delay: 15s; } .hotspot-img .hot-spot .tooltip { background-color: rgba(255, 255, 255, 0.9); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-size: 14px; opacity: 0; display: none; left: 0; padding: 8px 10px; position: absolute; top: 20px; width: auto; z-index: 999; box-shadow: 0 10px 80px rgba(0,0,0,0.1), 0 10px 50px rgba(0,0,0,0.1); -webkit-transform: translateY(3px); -ms-transform: translateY(3px); -o-transform: translateY(3px); transform: translateY(3px); -webkit-transition: all .3s linear; -o-transition: all .3s linear; transition: all .3s linear; } .hotspot-img .hot-spot.hotspot-tooltip-open .tooltip { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .hotspot-img .hot-spot .tooltip.ontop { top: auto; bottom: 35px; } .hotspot-img .hot-spot .tooltip p { font-size: 13px; line-height: 1.3rem !important; margin-bottom: 0; white-space: nowrap; color: #666 !important; text-transform: capitalize; } @-webkit-keyframes pulsate { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.8; } 45% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity: 0; } } @keyframes pulsate { 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.8; } 45% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity: 0; } } .iconlist li:not(:first-child) { margin-top: 8px; } .iconlist li img { position: relative; margin-top: -2px; width: 16px; margin-right: 5px; } .iconlist a { font-size: 15px; color: #444; } .iconlist a:hover { text-decoration: underline !important; } .text-muted { opacity: 0.5; } .pricing-price::after { content: none } .irs-single { top: -12px; } .irs-slider { background: #44aaac; border-radius: 50%; width: 28px; height: 28px; top: 13px; } .irs-slider::after { content: "\e733"; font-family: 'font-icons'; color: #FFF; text-align: center; position: absolute; top: 50%; left: 50%; font-size: 11px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .price-compare { list-style-type: disc; } .price-compare.iconlist li:not(:first-child) { font-weight: 300; margin-top: 15px; } .testimonials-carousel .owl-item { opacity: 0.25; transform: scale(.9); -webkit-transition: all .5s linear; -o-transition: all .5s linear; transition: all .5s linear; } .testimonials-carousel .owl-item.active.center { opacity: 1; transform: scale(1); } .testi-content p { font-size: 16px; } .clients { max-height: 50px; } .owl-stage-outer::before, .owl-stage-outer::after { position: absolute; content: ''; top: 0; left: 0; width: 300px; height: 100%; z-index: 1; background: -moz-linear-gradient(left, rgba(249,249,249,1) 52%, rgba(249,249,249,0.06) 90%, rgba(249,249,249,0) 100%); background: -webkit-linear-gradient(left, rgba(249,249,249,1) 52%,rgba(249,249,249,0.06) 90%,rgba(249,249,249,0) 100%); background: linear-gradient(to right, rgba(249,249,249,1) 52%,rgba(249,249,249,0.06) 90%,rgba(249,249,249,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#00f9f9f9',GradientType=1 ); } .owl-stage-outer::after { left: auto; right: 0; background: -moz-linear-gradient(right, rgba(249,249,249,1) 52%, rgba(249,249,249,0.06) 90%, rgba(249,249,249,0) 100%); background: -webkit-linear-gradient(right, rgba(249,249,249,1) 52%,rgba(249,249,249,0.06) 90%,rgba(249,249,249,0) 100%); background: linear-gradient(to left, rgba(249,249,249,1) 52%,rgba(249,249,249,0.06) 90%,rgba(249,249,249,0) 100%); } .bg-angle::after, .section.bg-angle::before { content: ''; height: 100%; overflow: hidden; width: 100%; position: absolute; height: 70px; bottom: -70px; left: 0; transform-origin: 0; -webkit-transform-origin: 0; -webkit-transform: skewY(-1.5deg); -moz-transform: skewY(-1.5deg); -ms-transform: skewY(-1.5deg); -o-transform: skewY(-1.5deg); transform: skewY(-1.5deg); background-color: #44aaac; z-index: 1; } .section.bg-angle::before { top: -30px; } .section.bg-angle::after, .section.bg-angle::before { background-color: #FFF; } .dark .primary-menu ul li, .dark .primary-menu ul li .mega-menu-content ul.mega-menu-column:not(:first-child) { border-top-color: rgba(255, 255, 255, 0.1) } /* Devices Under 991 Width */ @media (max-width: 991px) { #top-bar { height: 44px } #top-bar p { margin-bottom: 0px; line-height: 44px; } #header.transparent-header { z-index: 1 !important; } .vertical-middle { z-index: 0; } .cpu-price, .ram-price, .storage-price { font-size: 34px; } .pricing-price { font-size: 52px; } .mega-menu-content .btn.btn-link { display: none; } .primary-menu ul li .mega-menu-content.style-2 ul.mega-menu-column { padding: 10px 0; } .owl-stage-outer::before, .owl-stage-outer::after { display: none; } .slider-bottom-box { padding: 15px; } .img-map { opacity: 0.2; } }