html { font-size: 16px; /* Global Font Size */ width: 100%; } body { font-size: 100%; margin: 0; padding: 0; display: block; width: 100%; height: 100%; clear: both; font-family: 'Poppins', sans-serif; } * { outline: none !important; } /* Change the a tag color */ a { text-decoration: none; color: #2b8dd9; transition: 300ms linear; transition-property: color; display: inline-block; } a:hover, a:active, a:focus, a:visited { text-decoration: none; color: #ffffff; } /* Responsive image */ img { max-width: 100%; display: inline-block; } /* Clearfix */ .clearfix { clear: both; } /* Make bootstrap container max-width 100% */ .container { max-width: 100%; } /*--- for remove space / gutter betwin 2 colom of boot strap */ .row.no-gutter { margin-left: 0; margin-right: 0; } .row.no-gutter [class*='col-']:not(:first-child), .row.no-gutter [class*='col-']:not(:last-child) { padding-right: 0; padding-left: 0; } .bold-color { color:#9b28a8; } /*--- */ /* Template wrapper */ .wrapper { margin: 0; padding: 0; display: block; width: 100%; height: 100%; clear: both; overflow: hidden; overflow-y: auto; } /* Template white section and blue section */ .section-white, .section-blue { margin: 0; padding: 5rem 0; display: block; width: 100%; clear: both; background: white; text-align: center; overflow: hidden; /* Section h1 heading */ } .section-grey { margin: 0; padding: 5rem 0; display: block; width: 100%; clear: both; background: #f2f4f5; text-align: center; overflow: hidden; /* Section h1 heading */ } .section-white h1, .section-blue h1, .section-grey h1, .two-colom-section h1 { color: #9b28a8; font-size: 2.75rem; line-height: 4.125rem; font-weight: 300; margin-top: 0; position: relative; margin-bottom:10px; } .main-heading-text { float:left; width:100%; padding:0 0 20px 0; } .main-heading-text p{ float:left; width:100%; text-align:center; font-size:16px; color:#708198; line-height:1.5; white-space:pre-line; } .site-testimonial .main-heading-text p{ float:left; width:100%; text-align:center; font-size:16px; color:#708198; line-height:1.5; white-space:pre-line; padding:0 0 30px 0; } @media screen and (max-width: 767px) { .section-white h1, .section-blue h1, .section-grey h1, .two-colom-section h1 { font-size: 2rem; } } .section-white h1 strong, .section-blue h1 strong { font-weight: 700; } .section-white h1:after, .section-blue h1:after, .section-grey h1:after { /* H1 heading icon add */ content: ""; position: relative; background: url("../images/heading-before.png") no-repeat center; background-size: 3.375rem 1.125rem; display: block; width: 40px; height: 4px; margin-left: auto; margin-right: auto; clear: both; top: 0.5rem; } .left-heading h1:after { /* H1 heading icon add */ content: ""; position: relative; background: url("../images/heading-before.png") no-repeat left; background-size: 3.375rem 1.125rem; display: block; width: 40px; height: 4px; margin-left: 0; margin-right: auto; clear: both; top: 0.5rem; } .two-colom-section h1:after { /* H1 heading icon add */ content: ""; position: relative; background: url("../images/heading-before.png") no-repeat left; background-size: 3.375rem 1.125rem; display: block; width: 40px; height: 4px; margin-left: 0; margin-right: auto; clear: both; top: 0.5rem; } .section-blue h1:after { /* H1 heading icon add */ content: ""; position: relative; background: url("../images/heading-before-white.png") no-repeat center; background-size: 3.375rem 1.125rem; display: block; width: 40px; height: 4px; margin-left: auto; margin-right: auto; clear: both; top: 0.5rem; } /* Template section blue */ .section-blue { color: white; background-color: #08223b; } .section-blue h1 { color: white; } .left-heading h1 { text-align:left; line-height:1.3; } .color-gredient { background: rgba(228,93,97,1); /* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(228,93,97,1)), color-stop(100%, rgba(155,40,168,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* IE 10+ */background: linear-gradient(135deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e45d61', endColorstr='#9b28a8', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } /*-----------------------------------------------------------------------------------*/ /* Input fields */ /*-----------------------------------------------------------------------------------*/ input { border: none; box-shadow: none; } /* Submit input field */ input[type=submit], button[type=submit] { min-width: 12.188rem; min-height: 3.125rem; border-radius: 1.5rem; color: white; font-family: inherit; font-size: 0.813rem; font-weight: 700; line-height: 1.813rem; text-transform: uppercase; transition: 300ms linear; transition-property: background, color; border:none; background: rgba(70,200,255,1); /* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 ); /* IE6-9 */ -webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); } input[type=submit]:hover, button[type=submit]:hover { background: white; color: #203e5b; } /* Fluid container with wide class */ .container-fluid.wide { max-width: 1400px; } @media screen and (min-width: 768px) { .container-fluid.wide { padding-left: 5rem; padding-right: 5rem; } } article { width: 100%; clear: both; margin: 0; text-align: center; padding: 0 0 50px; } article figure { max-width: 450px; background-color: #90d23d; width: 100%; padding: 0; display: inline-block; position: relative; background-size: contain; overflow: hidden; margin: 25px 0 0 0; border-radius:8px; -webkit-box-shadow: 0px 5px 17px -5px rgba(105,124,148,1); -moz-box-shadow: 0px 5px 17px -5px rgba(105,124,148,1); box-shadow: 0px 5px 17px -5px rgba(105,124,148,1); } article figure:hover img { transform: scale(1.1); } article img { max-width: 100%; display: inline-block; transform: scale(1); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: 400ms ease; transition-property: transform; border-radius:8px; } h4 { color: #000000; font-size: 16px; margin-top:10px; margin-bottom: 20px; font-weight:500; } #demos { padding:100px 0 0 0; } /*-----------------------------------------------------------------------------------*/ /* Carousel slider CSS */ /*-----------------------------------------------------------------------------------*/ .swiper-container { /* Main container */ margin: 0; padding: 0; display: block; width: 100%; clear: both; list-style: none; box-shadow: none; } /* wrapper */ .swiper-wrapper { margin: 0; padding: 0; box-shadow: none; } /* Single slide */ .swiper-slide { margin: 0; padding:0; display: block; list-style: none; } .swiper-slide-box { padding:50px; background:#FFFFFF; border-radius:6px; border-bottom:#f5f5f9 solid 1px; -webkit-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03); -moz-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03); box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03); } .swiper-slide-back-box { float:left; width:90%; height:15px; margin-left:5%; background:#FFFFFF; border-radius:0 0 6px 6px; -webkit-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03); -moz-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03); box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03); } /* Pagination */ .swiper-pagination { box-shadow: none; text-shadow: none; width: 100%; margin: 0; padding: 0; display: block; clear: both; left: 0; right: 0; } @media screen and (max-width: 991px) { .swiper-pagination { margin-top: 0.625rem; } } @media screen and (max-width: 767px) { .swiper-pagination { margin-top: 1.25rem; } } /* pagination bullet */ .swiper-pagination-bullet { width: 1.0625rem; height: 1.0625rem; background-color:#f2f4f5; opacity: 1; transition: 300ms linear; transition-property: background-color; margin: 0.4375rem; border:#9b28a8 solid 1px; } .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0.4375rem; } /* Active pagination bulet */ .swiper-pagination-bullet-active { background-color: #9b28a8; } /* Navigatin prev button */ .swiper-button-prev, .swiper-button-next { margin: 0; padding: 0; width: 3.125rem; height: 3.125rem; line-height: 3.125rem; text-align: center; background: none; border-radius: 6.25rem; opacity: 0.3; border: 0.125rem solid #515151; font-size: 1.25rem; transition: 300ms linear; transition-property: background, opacity, border-color; left: -2.5rem; } @media screen and (max-width: 767px) { .swiper-button-prev, .swiper-button-next { left: 1.25rem; top: -3.125rem; } } .swiper-button-prev:hover, .swiper-button-next:hover { background: #9c52ea; opacity: 1; border-color: #9c52ea; } .swiper-button-prev span, .swiper-button-next span, .swiper-button-prev i.fa, .swiper-button-next i.fa { position: absolute; top: 0; left: -0.125rem; right: 0; display: block; bottom: 0; line-height: 2.9375rem; width: 100%; height: 100%; text-align: center; } /* Navigation next button */ .swiper-button-next { left: auto; right: -2.5rem; } @media screen and (max-width: 767px) { .swiper-button-next { right: 1.25rem; } } .swiper-button-next span, .swiper-button-next i.fa { left: 0.125rem; } /* Carousel CSS for white section */ .section-white .swiper-pagination { margin-top: 2.5rem; } .section-white .swiper-pagination-bullet { background-color: #d3d3d3; } .section-white .swiper-pagination-bullet-active { background: rgba(228,93,97,1); /* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(228,93,97,1)), color-stop(100%, rgba(155,40,168,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* IE 10+ */background: linear-gradient(135deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e45d61', endColorstr='#9b28a8', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .section-white .swiper-button-prev, .section-white .swiper-button-next { background-color: #f2f4f5; border-color: #f2f4f5; color: #1f3542; opacity: 1; transition: 300ms linear; transition-property: color, background, border-color; } .section-white .swiper-button-prev:hover, .section-white .swiper-button-next:hover { color: white; border: none; background: rgba(228,93,97,1); /* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(228,93,97,1)), color-stop(100%, rgba(155,40,168,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* IE 10+ */background: linear-gradient(135deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e45d61', endColorstr='#9b28a8', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } /*----------------------------------------------------------------------------------- [Header] # Navigation and slider holder # Sticky header # Logo # Sub Menu # Off canvas Mobile menu -----------------------------------------------------------------------------------*/ /* Navigation and slider holder */ .site-holder { margin: 0; display: block; width: 100%; clear: both; /*background: #836aeb;*/ height: 100%; } .site-holder .sticky-header { /* Sticky header */ z-index: 100000 !important; /*background: #203e51;*/ position:absolute; top:0; left:0; right:0; } .site-holder .sticky-wrapper { /* Sticky wrapper */ height: 5.625rem !important; position:absolute; top:0; left:0; right:0; } .site-holder .sticky-wrapper.is-sticky > .sticky-header { /* Make the menu sticky */ } @media screen and (min-width: 992px) { .site-holder .sticky-wrapper.is-sticky > .sticky-header { /*margin-left: -1.25rem;*/ margin-right: -1.25rem; width: 100% !important; transition: 300ms linear; transition-property: transform; transform: translateY(-20px); background:#1d203d; } .site-holder .sticky-wrapper.is-sticky > .sticky-header .site-logo { /* Logo */ transition: 300ms linear; transition-property: transform; transform: translateY(10px); } .site-holder .sticky-wrapper.is-sticky > .sticky-header .site-nav { /* Navigation */ transition: 300ms linear; transition-property: transform; transform: translateY(10px); } .site-holder .sticky-wrapper.is-sticky > .sticky-header .site-sub-menu { /* Sub menu */ transform: translateY(-10px); } } @media screen and (max-width: 991px) { .site-holder .sticky-wrapper.is-sticky > .sticky-header { margin-left:0; margin-right: -1.25rem; width: 100% !important; background:#1d203d; } .site-holder .sticky-wrapper.is-sticky > .sticky-header .site-logo, .site-holder .sticky-wrapper.is-sticky > .sticky-header .site-nav { transition: 300ms linear; transition-property: height; height: 4.375rem; } } /* Header */ .site-header { width: 100%; height: 100%; clear: both; /*background-color: #1f3542;*/ } /* Logo */ .site-logo { display: table; height: 5.625rem; color: white; font-size: 2.1875rem; font-weight: 500; line-height: 1.6875rem; } .site-logo a { color: white; display: table-cell; vertical-align: middle; } .site-logo img { vertical-align: baseline; } /* Navigation */ .site-nav { float: right; position: relative; z-index: 1000; } @media screen and (max-width: 991px) { .site-nav { height: 5.625rem; } } .site-nav ul.nav-off-canvas { /* Off canvas mobile menu */ margin: 0; padding: 0; display: block; background: #122748; } @media screen and (min-width: 992px) { .site-nav ul.nav-off-canvas { height: auto !important; } } @media screen and (max-width: 991px) { .site-nav ul.nav-off-canvas { position: fixed; top: 0; left: -1000px; bottom: auto; height: 130%; width: 100%; max-width: 15.625rem; padding-top: 1.25rem; padding-bottom: 1.25rem; overflow: hidden; overflow-y: auto; box-shadow: 0 0 2.6875rem rgba(2, 3, 3, 0.84); transition: 300ms linear; transition-property: opacity, visibility; cursor: pointer; } .site-nav ul.nav-off-canvas > li:last-child { margin-bottom: 100%; } } @media screen and (max-width: 400px) { .site-nav ul.nav-off-canvas { max-width: 12.5rem; } } .site-nav ul.nav-off-canvas > li { margin: 0; padding: 0; float: left; display: table; height: 5.625rem; position: relative; } @media screen and (max-width: 991px) { .site-nav ul.nav-off-canvas > li { width: 100%; height: auto; display: block; clear: both; line-height:2; } } @media screen and (min-width: 992px) { .site-nav ul.nav-off-canvas > li:hover .site-sub-menu { opacity: 1; visibility: visible; } } .site-nav ul.nav-off-canvas > li.active, .site-nav ul.nav-off-canvas > li:hover { /* Active and hover */ } .site-nav ul.nav-off-canvas > li.active > a, .site-nav ul.nav-off-canvas > li:hover > a { color: #FFFFFF; } .site-nav ul.nav-off-canvas > li.active > a:after, .site-nav ul.nav-off-canvas > li:hover > a:after { width: 100%; } .site-nav ul.nav-off-canvas > li:last-child > a { padding-right: 0; } .site-nav ul.nav-off-canvas > li > a { font-size:13px; font-weight:500; line-height:2; text-transform: capitalize; color: white; display: table-cell; vertical-align: middle; padding: 0 18px; letter-spacing: 0.03125rem; position: relative; } @media screen and (max-width: 1199px) { .site-nav ul.nav-off-canvas > li > a { padding-left: .9rem; padding-right: .9rem; } } @media screen and (max-width: 991px) { .site-nav ul.nav-off-canvas > li > a { display: inline-block; width: auto; padding: 0.125rem 1.875rem; } } .site-nav ul.nav-off-canvas > li > a:after { content: ""; position: relative; display: block; top: -0.3125rem; height: 1px; width: 0; margin: 0 auto; background: #FFFFFF; transition: 300ms linear; transition-property: width; } .site-nav ul.nav-off-canvas .offCanvasClose { /* Off canvas close button */ display: none; } @media screen and (max-width: 991px) { .site-nav ul.nav-off-canvas .offCanvasClose { display: block; position: fixed; bottom: 0; left: auto; color: red; height: 3.125rem; width: 3.125rem; overflow: hidden; text-align: center; line-height: 3.125rem; cursor: pointer; font-size: 1.25rem; transition: 300ms linear; transition-property: background, color; } .site-nav ul.nav-off-canvas .offCanvasClose:before { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 0; height: 0; border-bottom: 100px solid #0A2B4A; border-right: 100px solid transparent; transition: 300ms linear; transition-property: border-bottom-color; } .site-nav ul.nav-off-canvas .offCanvasClose:hover { color: white; background: none; } .site-nav ul.nav-off-canvas .offCanvasClose:hover:before { border-bottom-color: #d4e9ff; } .site-nav ul.nav-off-canvas .offCanvasClose i.fa { display: block; line-height: 3.125rem; position: relative; top: 0.625rem; left: -0.625rem; } } .site-nav .site-sub-menu { /* Sub menu */ position: absolute; top: 100%; left: 0; right: auto; margin: 0; padding: 0.625rem 1.875rem 1.25rem; background: #101124; min-width: 200px; white-space: nowrap; opacity: 0; visibility: hidden; transition: 300ms linear; transition-property: opacity, visibility; transition-delay: 300ms; box-shadow: 0 10px 0.8125rem 0 rgba(2, 3, 3, 0.24); border-radius: 0 0 0.25rem 0.25rem; } @media screen and (min-width: 992px) { .site-nav .site-sub-menu { display: block !important; } } @media screen and (max-width: 991px) { .site-nav .site-sub-menu { white-space: normal; position: relative; opacity: 1; visibility: visible; background: #153464; padding-top: 1.25rem; padding-left: 2.5rem; box-shadow: none; display: none; } } .site-nav .site-sub-menu li { width: 100%; list-style: none; margin: 0; padding: 0; } .site-nav .site-sub-menu li:hover > a { color: #ffffff; } .site-nav .site-sub-menu li:hover > a:after { width: 100%; } .site-nav .site-sub-menu a { width: auto; color: white; font-size:13px; font-weight:500; line-height: 2; text-transform: capitalize; letter-spacing: 0.0625rem; position: relative; padding: 0.125rem 0; } .site-nav .site-sub-menu a:after { content: ""; position: relative; display: block; top: -0.3125rem; height: 1px; width: 0; margin: 0 auto; background: #ffffff; transition: 300ms linear; transition-property: width; } /* MOBILE VIEW NAVIGATION BUTTON */ .nav-mobile { color: white; display: none; } .nav-mobile:hover { color: #48cafe; } @media screen and (max-width: 991px) { .nav-mobile { display: block; position: absolute; top: 0; right: 0; bottom: 0; font-size: 1.875rem; text-align: center; color: white; background: #122748; height: 3.125rem; width: 3.4375rem; line-height: 3.125rem; cursor: pointer; margin-top: auto; margin-bottom: auto; transition: 300ms linear; transition-property: color; border-radius:6px; } .nav-mobile i.fa { line-height: 3.125rem; } } /*----------------------------------------------------------------------------------- [Slider] (Section) # Slider (Wrapper) # Caption # Pagination # Navigation # Typography # Button -----------------------------------------------------------------------------------*/ /* Header slider wrapper */ .header-slider { /* HEADER SLIDER */ padding: 0; display: block; width: 100%; clear: both; min-height: 100px; position: relative; height: 950px; max-width: 100%; margin: 0 auto; font-family: inherit; z-index: 1; } .header-slider ul.seq-canvas, .header-slider ul.seq-canvas > * { /* Reset */ margin: 0; padding: 0; list-style: none; display: block; } .header-slider .seq-canvas { /* Make the canvas the same dimensions as the container and prevent lines from wrapping so each step can sit side-by-side */ position: absolute; height: 100%; width: 100%; overflow: hidden; display: block !important; max-width: 1400px; margin: 0 auto !important; left: 0; right: 0; top: 0; bottom: 0; } .header-slider .seq-canvas > li { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; height: 100%; width: 100%; clear: both; text-align: center; z-index: 1; } .header-slider .seq-canvas > li .bg-img { transform: translateX(-2000px); transition: transform 2000ms ease; max-width: 100%; background: no-repeat 90% bottom; background-size: 558px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 100%; } @media screen and (max-width: 991px) { .header-slider .seq-canvas > li .bg-img { background-size: 300px; background-position: center bottom; } } @media screen and (max-width: 400px) { .header-slider .seq-canvas > li .bg-img { background-size: 80%; } } .header-slider .seq-canvas > li.seq-in .bg-img { transform: translateX(0); } .header-slider .seq-canvas > li.seq-out .bg-img { transform: translateX(2000px); } .header-slider .seq-canvas > li .slide-caption { opacity: 0; transition: opacity 600ms ease; } .header-slider .seq-canvas > li.seq-in .slide-caption { opacity: 1; transition-delay: 1500ms; } .header-slider .seq-canvas > li.seq-out .slide-caption { opacity: 0; } .header-slider .seq-pagination { /* PAGINATION */ width: 100%; padding: 0 0 0 5rem; display: block; z-index: 100; position: absolute; left: 0; bottom: 20%; right: 0; top: auto; max-width: 1400px; margin: 0 auto; } @media screen and (max-width: 991px) { .header-slider .seq-pagination { text-align: center; padding-left: 0; bottom: 1.875rem; } } .header-slider .seq-pagination li { font-weight: 400; color: #FFFFFF; font-size: 0.8125rem; margin: 0; padding: 0 0.5rem; display: inline-block; list-style: none; cursor: pointer; position: relative; } .header-slider .seq-pagination .seq-current { color: #80d37f; font-size: 1.125rem; } .header-slider .seq-pagination .seq-current:after { content: ""; display: block; height: 1px; width: 80%; background: #2b8dd9; position: relative; margin: 0 auto; } .header-slider .seq-prev, .header-slider .seq-next { /* NAVIGATION PREV BUTTON */ position: absolute; z-index: 100; color: #000000; width: 3.125rem; height: 3.125rem; line-height: 3.125rem; background-color: #FFFFFF; border: none; box-shadow: none; border-radius: 12.5rem; transition: 300ms linear; transition-property: background, color; margin: auto 0; top: 0; left: 1rem; bottom: 0; display: block; } .header-slider .seq-prev:hover, .header-slider .seq-next:hover { background: #9b28a8; } .header-slider .seq-prev:hover i.fa, .header-slider .seq-prev:hover span, .header-slider .seq-next:hover i.fa, .header-slider .seq-next:hover span { opacity: 1; } .header-slider .seq-prev i.fa, .header-slider .seq-prev span, .header-slider .seq-next i.fa, .header-slider .seq-next span { opacity: 0.8; font-size: 1.25rem; color: #000000; line-height: 3.125rem; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; text-align: center; transition: 300ms linear; transition-property: opacity; } .header-slider .seq-next { /* NAVIGATION NEXT BUTTON */ color: white; left: auto; right: 1rem; } .header-slider .slide-caption { /* CAPTION */ position: absolute; top: 25%; left: 6%; bottom: 0; display: block; color: white; z-index: 100; text-align: left; padding-left: 0.3125rem; } @media screen and (max-width: 1199px) { .header-slider .slide-caption { font-size: 0.75rem; } } @media screen and (max-width: 991px) { .header-slider .slide-caption { text-align: center; top:6.25rem; left: 0; max-width: 27.5rem; margin-left: auto; margin-right: auto; right: 0; padding-left: 1.25rem; padding-right: 1.25rem; } } @media screen and (max-width: 767px) { .header-slider .slide-caption { max-width: 31.25rem; } } .header-slider h1 { color: white; font-family: inherit; font-size: 160px; font-weight: 600; line-height: 1; white-space: pre-line; margin-bottom:0; } @media screen and (max-width: 991px) { .header-slider h1 { white-space: normal; font-size:100px; text-align:center; } } @media screen and (max-width: 767px) { .header-slider h1 { font-size:100px; } } @media screen and (max-width: 639px) { .header-slider h1 { font-size:50px; } } .header-slider h2 { color: white; font-family: inherit; font-size: 2.125em; font-weight: 400; line-height: 1; margin-bottom: 0.25em; white-space: pre-line; margin-top:0; } @media screen and (max-width: 991px) { .header-slider h2 { white-space: normal; margin-bottom: 1.25rem; } } @media screen and (max-width: 767px) { .header-slider h2 { font-size: 1.875em; } } .header-slider p { color: white; font-family: inherit; font-size: 15px; font-weight: normal; line-height: 2; margin-bottom: 1.875em; white-space: pre-line; } @media screen and (max-width: 1199px) { .header-slider p { font-size:14px; line-height:1.5; font-weight:normal; } } @media screen and (max-width: 991px) { .header-slider p { white-space: normal; } } .header-slider .slide-button { min-width: 15em; padding: 0 2.5em; border: 1px solid white; border-radius: 12.5em; color: white; font-family: inherit; font-size: 0.8125em; font-weight: 700; line-height: 3.75em; text-transform: uppercase; display: inline-block; text-align: center; transition: 300ms linear; transition-property: color, background; margin: 1.875em 1.25em 1.875em 0; } .header-slider .slide-button:hover { background: #80d380; color: #FFFFFF; transition:all ease .5s; border:none; background: rgba(70,200,255,1); /* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 ); /* IE6-9 */ -webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); } .slide-button-active { color: #6a49f2; transition:all ease .5s; border:none !important; background: #ffffff; -webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); } @media screen and (max-width: 767px) { .header-slider .slide-button { margin-bottom: 0; } } /*----------------------------------------------------------------------------------- Static Banner -----------------------------------------------------------------------------------*/ .static-banner { background: rgb(25,23,80); background: linear-gradient(3deg, rgba(25,23,80,1) 0%, rgba(62,41,149,1) 100%); display: block; width: 100%; clear: both; min-height: 100px; position: relative; height: 100%; max-width: 100%; margin: 0 auto; font-family: inherit; z-index: 1; } .screen { width:100%; text-align:center; float:left; margin-top:30px; height: 595px; } .static-content { position:relative; padding:60px 0 0 0; } .banner-caption { float:left; width:100%; position:relative; padding:50px 0 0 0; text-align:center; } .banner-caption h1 { font-size:45px; color:#FFFFFF; font-weight:700; letter-spacing:-2px; line-height:1; padding:0; margin:0; text-align:center; } .banner-caption h2 { font-size:32px; color:#FFFFFF; font-weight:normal; line-height:1; padding:0; margin:0; } .banner-caption p { color: white; font-family: inherit; font-size: 27px; font-weight:normal; line-height: 1; margin-bottom:10px; white-space: pre-line; text-align:center; } .static-banner .slide-button { min-width: 15em; padding: 0 2.5em; background: #ffffff; border-radius: 12.5em; color: #6a49f2; font-family: inherit; font-size: 0.8125em; font-weight: 700; line-height: 3.75em; text-transform: uppercase; display: inline-block; text-align: center; transition: 300ms linear; transition-property: color, background; margin: 1.875em 1.25em 1.875em 0; letter-spacing:1px; } .static-banner .slide-button:hover { background: #6a49f2; color: #FFFFFF; transition:all ease .5s; border:none; -webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); } .static-banner-image { background:url(../images/header-slide-1.html) no-repeat right top; width:470px; height:633px; text-align:right; position:relative; right:0; left:140px; top:0; } @media screen and (max-width: 1199px) { .static-banner { top:20%; } .static-banner-image { left:0; } .banner-caption { padding:90px 0 0 0; } .banner-caption h1 { font-size:50px; } .banner-caption h2{ font-size:22px; } .banner-caption p{ line-height:1.7; white-space:inherit; font-weight:normal; padding-top:20px; } .static-content { top:17%; } } @media screen and (max-width: 991px) { .static-banner { top:10%; } .banner-caption { padding:0; } .banner-caption h1 { font-size:40px; text-align:center; letter-spacing:0; } .banner-caption h2{ font-size:22px; text-align:center; } .banner-caption p{ line-height:1.7; white-space:inherit; font-weight:normal; padding:20px 0 0 0; text-align:center; margin-bottom:0; font-size:18px; } .static-banner-image { width:100%; text-align:center; background-size:300px; background-position:center top; margin:30px 0 0 0; } .static-banner .banner-caption { text-align:center; } .static-content { padding:120px 0 0 0; } } @media screen and (max-width: 767px) { .static-banner { top:15%; } .banner-caption p { font-size:14px; } .banner-caption h1 { font-size:30px; text-align:center; letter-spacing:0; } .static-banner .slide-button { margin:10px 0; } } /*----------------------------------------------------------------------------------- [Store Icons Section] (Section) # Store Icons (wrapper) # .align-center (class) # Images # Icons # Typography (h5, h6) -----------------------------------------------------------------------------------*/ /* STORE ICONS */ .site-store-icons, .site-download-icons { margin: 0; padding: 0; display: block; width: 100%; clear: both; text-align: center; position: relative; height: 0; z-index: 10; } @media screen and (max-width: 991px) { .site-store-icons, .site-download-icons { height: auto; /*background: #E5E8ED;*/ padding: 1.25rem 0; } } .site-store-icons .align-center, .site-download-icons .align-center { /* Align center class */ position: absolute; bottom: 0; left: 0; right: 0; display: block; width: 100%; text-align: center; font-size: 0; } @media screen and (max-width: 991px) { .site-store-icons .align-center, .site-download-icons .align-center { position: relative; } } .site-store-icons a, .site-download-icons a { background-color: #FFFFFF; position: relative; padding: 1.625rem 3.125rem 1.5625rem 3.75rem; transition: 300ms linear; transition-property: background; border-right: 0.25rem solid #1f3542; } .site-store-icons a:last-child, .site-download-icons a:last-child { border-right: none; } .site-store-icons a:hover, .site-download-icons a:hover { transition:all ease .5s; background: #6a49f2; -webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); -moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75); } .app-download-icons:hover h5 { color:#FFFFFF; } .app-download-icons:hover h6 { color:#FFFFFF; } .app-download-icons:hover i.fa { color:#FFFFFF; } @media screen and (max-width: 991px) { .site-store-icons a, .site-download-icons a { border: none; margin: 0.625rem; } } @media screen and (max-width: 767px) { .site-store-icons a, .site-download-icons a { display: block; max-width: 16.875rem; margin: 0 auto 0.125rem; } } .site-store-icons figure, .site-download-icons figure { /* Image */ position: absolute; top: 0; left: 0; bottom: 0; height: 100%; padding-left: 2.8125rem; line-height: 5.625rem; } .site-store-icons i.fa, .site-download-icons i.fa, .site-store-icons span, .site-download-icons span, .site-store-icons img, .site-download-icons img { /* Icons */ color: #59687c; font-family: FontAwesome, serif; font-size: 2.9375rem; display: inline-block; font-weight: 400; line-height: 5.625rem; vertical-align: middle; } .site-store-icons i.fa.adjust, .site-download-icons i.fa.adjust { font-size: 1.875rem; position: relative; right: 0.625rem; } .site-store-icons img, .site-download-icons img { position: relative; right: 0.9375rem; } @media screen and (max-width: 767px) { .site-store-icons img, .site-download-icons img { right: 0.625rem; } } .site-store-icons h5, .site-download-icons h5 { /* Typography */ color: #59687c; font-weight: 400; line-height: 1.375rem; font-size:18px; margin: 0; width: 100%; text-align: center; display: block; padding: 0; } .site-store-icons h6, .site-download-icons h6 { color: #59687c; font-weight: 400; line-height: 0.875rem; font-size:13px; margin: 0; width: 100%; text-align: left; display: block; padding: 0 0 0 1.25rem; } /*----------------------------------------------------------------------------------- [Amazing Features] # Amazing feature (wrapper) # Features (Features holder class) # move (move class) # Images # Icons # Heading # Paragraph # Device -----------------------------------------------------------------------------------*/ /* Amazing Features wrapper */ .site-amazing-features { /*background: url("../images/features-bg.png") no-repeat center 3.4375rem;*/ background-size: cover; padding-bottom: 0; } @media screen and (max-width: 767px) { .site-amazing-features { background: none; } } .site-amazing-features .features { /* Features */ max-width: 19.75rem; display: inline-block; margin-bottom: 3.125rem; position: relative; cursor: pointer; z-index: 10; padding:30px; } .site-amazing-features .features:hover { /* Features mouse hover */ padding:30px; transition:all ease .5s; border-radius:12px; -webkit-box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31); -moz-box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31); box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31); } .site-amazing-features .features:hover h5 { color: #9b28a8; } .site-amazing-features .features:hover figure { /*border-color: #2b8dd9; box-shadow: 0 0 0.938rem rgba(2, 3, 3, 0.19);*/ } .site-amazing-features .features:hover figure:before { /*background: #2b8dd9;*/ } .site-amazing-features .features:hover span, .site-amazing-features .features:hover i.fa { color: white; } .site-amazing-features .features.move { /* Move Class */ /*top: 5.625rem;*/ } @media screen and (max-width: 767px) { .site-amazing-features .features.move { top: 0; } } .site-amazing-features .features figure { /* Image */ width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 2.25rem; background: white; transition: 300ms linear; transition-property: border-color, box-shadow; position: relative; z-index: 1; box-shadow: none; } .site-amazing-features .features figure:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; display: block; height: 100%; background: white; border-radius: 6.25rem; border: 0.5rem solid white; z-index: -1; transition: 300ms linear; transition-property: background; } .site-amazing-features span, .site-amazing-features i.fa { /* Icons */ display: inline-block; font-size: 3rem; line-height: 6.25rem; color: #6f6f6f; transition: 300ms linear; transition-property: color; } .site-amazing-features h5 { /* Heading */ color: #59687c; font-family: inherit; font-size: 1.25rem; font-weight: 600; line-height: 0.875rem; margin: 0 0 1.75rem; padding: 0; display: block; clear: both; width: 100%; transition: 300ms linear; transition-property: color; } .site-amazing-features p { /* Paragraph */ color: #708198; font-family: inherit; font-size: 15px; font-weight: normal; line-height: 1.625rem; margin: 0; padding: 0; display: block; clear: both; width: 100%; } .site-amazing-features .device { /* Device holder */ margin-top: 1rem; } /*----------------------------------------------------------------------------------- [About App] (Section) # About App (wrapper) # Typography (h1, h3, h4, p) # Device image # Section (image, icons) # Carousel Slider # carousel navigation # carousel pagination -----------------------------------------------------------------------------------*/ .about-half-colom-section { float:left; width:100%; margin:0; } .site-about-app p { /* Paragraph */ color: #708198; font-family: inherit; font-size: 15px; font-weight: normal; line-height:2; margin: 0; padding: 0; display: block; clear: both; width: 100%; text-align:left; } .about-half-colom-section-image { width:945px; height:auto; position:absolute; top:0; right:-430px; } /* Download Buttons */ .site-download-icons.about-icon { float:left; width:100%; margin:50px 0 0 0; height:190px; } .site-download-icons.about-icon a { border: none; margin-right: 30px; margin-left: 0; border-radius: 62.5rem; padding: 1.75rem 2.75rem 1.75rem 3.625rem; float:left; border:#9b28a8 solid 2px; } .site-download-icons.about-icon figure { /* Image */ position: absolute; top: 0; left: 0; bottom: 0; height: 100%; padding-left: 1rem; line-height: 5.625rem; } .site-download-icons.about-icon a:hover { border: none; } @media screen and (max-width: 1199px) { .about-half-colom-section { padding:50px 0 0 0; } .about-half-colom-section-image { right:0; position:inherit; width:100%; margin-top:100px; } .site-about-app.section-grey { padding-bottom:0; } } @media screen and (max-width: 991px) { .site-download-icons.about-icon { height:100px; } } /*----------------------------------------------------------------------------------- (2 Colom Section) # How it works (wrapper) # Typography (h1, h3, h4, p) # Device image # Section (image, icons) # Carousel Slider # carousel navigation # carousel pagination -----------------------------------------------------------------------------------*/ .two-colom-section { padding:200px 0; } .half-colom-left-section { float:left; width:100%; } .half-colom-right-section { float:left; width:100%; } .left-heading-icon { float:left; width:100%; text-align:left; } .two-colom-content { float:left; width:100%; text-align:left; } .two-colom-content p{ float:left; width:100%; text-align:left; font-size:15px; color:#708198; line-height:2; font-weight:normal; } .highlited-text { color:#9b28a8; font-weight:700px; letter-spacing:1px; } .half-colom-padding { padding:120px 0 0 0; } @media screen and (min-width: 768px) and (max-width: 1199px) { .two-colom-section { padding:100px 0; } .half-colom-padding { padding:0; } .two-colom-content p { padding-bottom:50px; } } @media screen and (max-width: 767px) { .two-colom-section { padding:100px 0; } .half-colom-padding { padding:0; } } @media screen and (max-width: 639px) { .two-colom-section { padding:100px 0; } .half-colom-padding { padding:0; } } /*----------------------------------------------------------------------------------- [How it works] (Section) # How it works (wrapper) # Typography (h1, h3, h4, p) # Device image # Section (image, icons) # Carousel Slider # carousel navigation # carousel pagination -----------------------------------------------------------------------------------*/ /* How it works section wrapper */ .site-how-it-works { padding-top: 5rem; padding-bottom: 6rem; } @media screen and (max-width: 767px) { .site-how-it-works { padding-bottom: 5rem; } } .site-how-it-works h1 { /* Typography */ margin-bottom: 3.75rem; } .site-how-it-works h3 { color: #9b28a8; font-family: inherit; font-size: 26px; font-weight: 300; margin-bottom: 0.625rem; margin-top: 1.25rem; text-align: left; } .site-how-it-works p { color: #708198; font-family: inherit; font-size: 15px; font-weight: normal; line-height: 1.625rem; margin-top: 0; letter-spacing: 0.03125rem; text-align: left; } .site-how-it-works h4 { color: #59687c; font-family: inherit; font-size: 19px; line-height:1.5; font-weight: 600; margin-top:0; padding:0; margin-bottom: 0.625rem; text-align: left; } .site-how-it-works figure.device { /* device */ text-align: center; position: relative; left:0; } .site-how-it-works .section { /* Section */ position: relative; padding-left: 3.75rem; margin-top: 2rem; } .site-how-it-works .section.first { margin-top: 3rem; } .site-how-it-works .section figure { position: absolute; top: 1rem; left: 0; display: block; } .site-how-it-works .section i.fa, .site-how-it-works .section span { /* Icons */ font-size: 2rem; line-height: 0.9375rem; color:#FFFFFF; border-radius:4px; padding:4px; background: rgba(228,93,97,1); /* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(228,93,97,1)), color-stop(100%, rgba(155,40,168,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* IE 10+ */background: linear-gradient(135deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e45d61', endColorstr='#9b28a8', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } @media screen and (min-width: 768px) { .site-how-it-works .swiper-button-prev, .site-how-it-works .swiper-button-next { /* Carousel slider navigation */ width: 1.3125rem; height: 1.3125rem; line-height: 1.3125rem; opacity: 0.3; left:auto; right: 2.5rem; top: auto; bottom: 22.1875rem; } } @media screen and (min-width: 768px) and (max-width: 1199px) { .site-how-it-works .swiper-button-prev, .site-how-it-works .swiper-button-next { right: 1.875rem; } } @media screen and (min-width: 768px) and (max-width: 991px) { .site-how-it-works .swiper-button-prev, .site-how-it-works .swiper-button-next { left: 1.125rem; } } @media screen and (min-width: 768px) { .site-how-it-works .swiper-button-prev:hover, .site-how-it-works .swiper-button-next:hover { color: white; opacity: 1; } .site-how-it-works .swiper-button-prev span, .site-how-it-works .swiper-button-next span, .site-how-it-works .swiper-button-prev i.fa, .site-how-it-works .swiper-button-next i.fa { line-height: 0.875rem; text-align: center; display: inline-block; left: 0; font-size: 1rem; } .site-how-it-works .swiper-button-next { left:auto; right: 2.5rem; bottom: 4.375rem; } } @media screen and (min-width: 768px) and (max-width: 1199px) { .site-how-it-works .swiper-button-next { right: 1.875rem; } } @media screen and (min-width: 768px) and (max-width: 991px) { .site-how-it-works .swiper-button-next { left: 1.125rem; } } @media screen and (min-width: 768px) { .site-how-it-works .swiper-button-next span, .site-how-it-works .swiper-button-next i.fa { position: relative; top: -1px; } .site-how-it-works .swiper-pagination { /* Pagination */ left: auto; width: auto; right: 2rem; top: auto; bottom: 6.25rem; } } @media screen and (min-width: 768px) and (max-width: 1199px) { .site-how-it-works .swiper-pagination { right: 1.4375rem; } } @media screen and (min-width: 768px) and (max-width: 991px) { .site-how-it-works .swiper-pagination { left:auto; } } @media screen and (min-width: 768px) { .site-how-it-works .swiper-pagination-bullet { float: left; display: block; clear: both; width: 1.375rem; height: 1.375rem; border:#bcbcbc solid 2px; background:none; } .site-how-it-works .swiper-pagination-bullet span { display: none; } .site-how-it-works .swiper-pagination-bullet-active { background: #2b8dd9; margin-top: 2.5rem; margin-bottom: 2.5rem; } .site-how-it-works .swiper-pagination-bullet-active span { display: inline-block; width: 5.25rem; height: 5.25rem; background-color: white; border: 0.125rem solid white; box-shadow: 0 0 21px rgba(255, 255, 255, 0.56); border-radius: 62.5rem; color: #FFFFFF; font-size: 2.375rem; line-height: 5rem; text-transform: uppercase; position: relative; z-index: 1; top: -1.875rem; left: -1.875rem; } .site-how-it-works .swiper-pagination-bullet-active span:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 100%; border-radius: 62.5rem; z-index: -1; color:#FFFFFF; background: rgba(70,200,255,1); /* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 ); /* IE6-9 */ } } @media screen and (max-width: 767px) { .site-how-it-works .swiper-pagination-bullet { /* Hide the icon on mobile view */ } .site-how-it-works .swiper-pagination-bullet span { display: none; } } /*----------------------------------------------------------------------------------- [More Features] (Section) # More Features (wrapper) # Feature Image # Featured Box # Align right (class) # Align left (class) # Move left (class) # Move right (class) # Icons # Typography (h5, p) -----------------------------------------------------------------------------------*/ /* More features wrapper */ .heading-text { float:left; width:100%; margin-bottom:60px; margin-top:-30px; } .heading-text p { float:left; width:100%; text-align:center; font-size:16px !important; line-height:1.5; white-space:pre-line; } .white { color:#FFFFFF; } .site-more-features { margin: 0; display: block; width: 100%; clear: both; padding-bottom: 7.5rem; } @media screen and (max-width: 991px) { .site-more-features { } } .site-more-features .featured-img { /* featured image */ padding: 0; display: block; margin: 0 auto; overflow: hidden; text-align: center; max-width: 18.125rem; } .site-more-features .featured-img img { display: inline-block; vertical-align: middle; } .site-more-features .feature { /* feature box */ text-align: left; position: relative; margin-bottom: 0; margin-top: 0; padding: 0.00625rem 5.625rem 3.125rem 2.5rem; top: 1.875rem; cursor: pointer; } @media screen and (max-width: 1199px) { .site-more-features .feature { padding-left: 0; padding-right: 0; } } @media screen and (max-width: 991px) { .site-more-features .feature { padding-top: 0.3125rem; max-width: 25rem; margin-left: auto; margin-right: auto; } } .site-more-features .feature:hover h5 { color: #FFFFFF; } .site-more-features .feature:hover figure { border-color: #2b8dd9; box-shadow: 0 0 0.938rem rgba(2, 3, 3, 0.19); } .site-more-features .feature:hover figure:before { background: #2b8dd9; } .site-more-features .feature:hover span, .site-more-features .feature:hover i.fa { border-color:none; color: white; box-shadow: 0 0 15px rgba(2, 3, 3, 0.19); background: #80d380; color: #FFFFFF; transition:all ease .5s; border:none !important; background: rgba(70,200,255,1); /* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 ); /* IE6-9 */ } .site-more-features .feature:hover span:after, .site-more-features .feature:hover i.fa:after { background: #2b8dd9; } .site-more-features .feature.align-right { /* Align right class */ text-align: right; padding-right: 5.25rem; } @media screen and (max-width: 1199px) { .site-more-features .feature.align-right { padding-right: 7.5rem; padding-left: 0; } } @media screen and (max-width: 991px) { .site-more-features .feature.align-right { text-align: left; padding-right: 0; padding-left: 7.5rem; } } .site-more-features .feature.align-left { /* Align left class */ text-align: left; padding-right: 2.5rem; padding-left: 5.25rem; } @media screen and (max-width: 1199px) { .site-more-features .feature.align-left { padding-right: 0; padding-left: 7.5rem; } } .site-more-features .feature.align-left.move { /* move left class */ left:0; } @media screen and (max-width: 1199px) { .site-more-features .feature.align-left.move { left: 0; } } .site-more-features .feature.align-left figure { right: auto; left: -1.25rem; } @media screen and (max-width: 1199px) { .site-more-features .feature.align-left figure { left: 0; } } .site-more-features .feature.move { /* move right class */ right:0; } @media screen and (max-width: 1199px) { .site-more-features .feature.move { right: 0; } } .site-more-features .feature figure { /* icons */ position: absolute; top: 0; right: -1.25rem; bottom: 0; display: block; overflow: visible; width: 5.25rem; height: 5.25rem; border: 1px solid rgba(255, 255, 255, .5); border-radius: 62.5rem; transition: 300ms linear; transition-property: border-color, box-shadow; } @media screen and (max-width: 1199px) { .site-more-features .feature figure { right: 0; } } @media screen and (max-width: 991px) { .site-more-features .feature figure { right: auto; left: 0; } } .site-more-features .feature figure:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 100%; border-radius: 62.5rem; /*border: 0.375rem solid white;*/ transition: 300ms linear; transition-property: background; } .site-more-features h5 { /* Typography */ color: #FFFFFF; margin-bottom: 0.9375rem; margin-top: 0.3125rem; transition: 300ms linear; transition-property: color; font-family: inherit; font-size: 19px;; font-weight: 600; } .site-more-features p { color: #FFFFFF; font-family: inherit; font-size: 14px;; font-weight: normal; line-height: 1.625rem; } .site-more-features figure { /* Image */ overflow: hidden; } .site-more-features figure span, .site-more-features figure i.fa { /* Icons */ text-align: center; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; top: 0; overflow: hidden; color: #FFFFFF; font-size: 2.5rem; width: 100%; height: 100%; display: block; border-radius: 62.5rem; line-height: 5.25rem; transition: 300ms linear; transition-property: color; } /*----------------------------------------------------------------------------------- [Download] (Section) # Download Section (wrapper) -----------------------------------------------------------------------------------*/ /* Download section wrapper */ .site-download { margin: 0; display: block; clear: both; background: #2B8DD9 url("../images/download-bg.html") no-repeat center; background-size: cover; } @media screen and (max-width: 991px) { .site-download { padding-bottom: 0; /*background: #2B8DD9;*/ } } /*----------------------------------------------------------------------------------- [Download Icons] (Section) # Download Icons (Wrapper) # Align center (class) # Icons # Icons adjust (class) # Images -----------------------------------------------------------------------------------*/ /* Download Icons Wrapper */ .site-download-icons { margin: 60px 0 60px 0; padding: 0; float:left; width:100%; } @media screen and (max-width: 991px) { .site-download-icons { /*background: #2B8DD9;*/ padding-bottom: 2.5rem; } } .site-download-icons .align-center { /* Align center (class) */ bottom: -2.8125rem; } @media screen and (max-width: 991px) { .site-download-icons .align-center { bottom: 0; } } .site-download-icons a { border: none; margin-right: 0.625rem; margin-left: 0.625rem; border-radius: 62.5rem; padding: 20px 40px; } @media screen and (max-width: 767px) { .site-download-icons a { display: block; width: 100%; max-width: 20rem; margin-left: auto; margin-right: auto; margin-bottom: 0.25rem; } } .site-download-icons i.fa, .site-download-icons span, .site-download-icons img { /* Icons */ line-height: 1; position: relative; left: 1.25rem; top:-5px; font-size:28px; } .site-download-icons i.fa.adjust { /* Icons adjust (class) */ font-size: 1.875rem; right: 0.625rem; } .site-download-icons img { /* Image */ right: 0.9375rem; } /*----------------------------------------------------------------------------------- [Quick View] (Section) # Quick View (wrapper) # Heading (h1) # Carousel pagination -----------------------------------------------------------------------------------*/ /* Quick view wrapper */ .site-quick-view { margin: 0; clear: both; width: 100%; padding-bottom: 6.25rem; padding-top: 8.125rem; } .site-quick-view h1 { /* Heading */ margin-bottom: 5rem; } .site-quick-view .slide { margin: 0; padding: 0 0.9375rem; display: block; } .site-quick-view .swiper-button-prev, .site-quick-view .swiper-button-next { /* Carousel pagination */ } @media screen and (min-width: 768px) { .site-quick-view .swiper-button-prev, .site-quick-view .swiper-button-next { margin-top: 3.75rem; } } @media screen and (max-width: 767px) { .site-quick-view .swiper-button-prev, .site-quick-view .swiper-button-next { margin-top: -3.125rem; } } /*----------------------------------------------------------------------------------- [Accordion] (Section) # Accordion (wrapper) # Accordion image (class) # Bootstrap panel (code) # Custom scroll bar -----------------------------------------------------------------------------------*/ /* Accordion wrapper */ .site-accordion { margin: 0; display: block; width: 100%; clear: both; padding:0; } @media screen and (max-width: 991px) { .site-accordion { } } .site-accordion .accordion-img { /* accordion image */ float:right; width: 100%; text-align:right; } @media screen and (max-width: 991px) { .site-accordion .accordion-img { left: 0; top: 0; position: relative; text-align:center; } } .site-accordion .accordion-img img { height: auto; display: inline-block; vertical-align: middle; } .accordian-main { float:left; width:100%; padding:90px 0 0 0; } .panel-group { /* Bootstrap panel group */ margin: 0; text-align: left; } @media screen and (max-width: 991px) { .panel-group { margin-top: 5rem; } } .panel-group .panel-title { /* Panel title */ color: white; font-family: inherit; display: block; width: 100%; border-radius: 0.25rem; } .panel-group .panel-title a { width: 100%; display: block; padding: 0.75rem 3.125rem 0.625rem 1.25rem; border: none; transition: 300ms linear; transition-property: background-color; position: relative; color: #FFFFFF; font-family: inherit; font-size: 17px; font-weight: 500; border-radius: 0.25rem; } @media screen and (max-width: 1199px) { .panel-group .panel-title a { font-size: 1.2rem; } } @media screen and (max-width: 767px) { .panel-group .panel-title a { font-size: 1rem; padding-top: 0.9375rem; padding-bottom: 0.9375rem; } } .panel-group .panel-title a span { position: absolute; top: 0; right: 1rem; bottom: 0; margin: auto 0; background: white; text-indent: -62.5rem; border-radius: 62.5rem; transition: 300ms linear; transition-property: background; display: block; overflow: visible; width: 1.563rem; height: 1.563rem; } .panel-group .panel-title a span:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("../images/accordion-minus.png") center no-repeat; background-size: 0.625rem 0.125rem; } .panel-group .panel-title a.collapsed { /* Panel collapsed */ background-color: #FFFFFF; color:#516074; } .panel-group .panel-title a.collapsed span { background-color: rgba(222, 225, 229, 0.8); } .panel-group .panel-title a.collapsed span:before { background: url("../images/accordion-plus.png") center no-repeat; background-size: 0.625rem 0.625rem; } .panel-group .panel { /* Panel */ background: none; border: none; margin-bottom: 0.75rem; border-radius: 0.25rem; overflow: hidden; display: block; -webkit-box-shadow: 0px 0px 40px -12px rgba(24,30,110,0.44); -moz-box-shadow: 0px 0px 40px -12px rgba(24,30,110,0.44); box-shadow: 0px 0px 40px -12px rgba(24,30,110,0.44); } .panel-group .panel-heading { /* Panel heading */ background-color: #9b28a8; border: none; padding: 0; margin: 0; border-radius: 0.25rem 0.25rem 0 0; } .panel-group .panel-collapse { /* Panel collapse */ padding: 0; background-color: #FFFFFF; border-radius: 0 0 0.25rem 0.25rem; } .panel-group .panel-body-container { /* panel container */ padding: 0.625rem 1.0625rem 1.5625rem 1.25rem; border-radius: 0 0 0.25rem 0.25rem; } .panel-group .panel-body { /* panel body */ border: none !important; background-color: #FFFFFF; color: #708198; font-family: inherit; border-radius: 0 0 0.25rem 0.25rem; letter-spacing: 0.00625rem; padding: 0; margin: 0; max-height: 150px; min-height: 150px; position: relative; height: 100%; overflow: auto; font-size: 15px; font-weight: normal; line-height: 1.625rem; } .panel-group .panel-body:before { display: none; } .panel-group .mCSB_inside > .mCSB_container { /* ----------------------------- Custom scroll bar for panel */ margin-right: 3.75rem; } .panel-group .mCSB_dragger_bar { /* Scroll drag bar */ background: none; border-radius: 0 !important; opacity: 1 !important; } .panel-group .mCSB_dragger_bar:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 80%; width: 100%; margin: auto 0; display: block; background: #9b28a8; } /*----------------------------------------------------------------------------------- [Team] (Section) # Team section (wrapper) # slide (class) # Box (class) # Images # Typography (h5, h6, p) # Social icons # Carousel slider -----------------------------------------------------------------------------------*/ /* Team section wrapper */ .site-team { margin: 0; display: block; width: 100%; clear: both; background-color: #FFFFFF; padding-bottom:100px; padding-top:100px; } .site-team .main-heading-text p{ float:left; width:100%; text-align:center; font-size:16px; color:#708198; line-height:1.5; white-space:pre-line; padding:0 0 30px 0; } @media screen and (max-width: 991px) { .site-team { padding-top: 6.25rem; } } .site-team .slide { /* Slide (class) */ margin: 0; display: block; padding: 1.25rem 0.9375rem 3.125rem; } @media screen and (max-width: 767px) { .site-team .slide { padding-left: 0.625rem; padding-right: 0.625rem; } } .site-team .site-box { /* box (class) */ max-width: 22rem; width: 100%; margin-left: auto; margin-right: auto; display: block; background-color: white; border-radius: 0.25rem; box-shadow: 0 0 0.438rem rgba(2, 3, 3, 0.09); padding:0; overflow: visible; transition: 300ms linear; transition-property: box-shadow; border:#e6e7ee solid 1px; border-radius:8px; } .site-team .site-box:hover { -webkit-box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31); -moz-box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31); box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31); } .site-team figure { /* Image */ max-width:100%; width: 100%; display: block; clear: both; max-height: 16.938rem; overflow: hidden; border-radius:0; margin-left: auto; margin-right: auto; height: auto; margin-bottom: 1.25rem; position: relative; } .site-team figure img { max-width: 100%; display: inline-block; border-radius:10px 10px 0 0; } .site-team h5 { /* Typography */ color: #9b28a8; font-family: inherit; font-size: 19px; font-weight: 600; display: block; float: left; width: 100%; clear: both; margin-bottom: 0.25rem; margin-top: 1.25rem; } .site-team h6 { color: #708198; font-family: inherit; font-size:14px; font-weight: 400; margin-bottom: 1.25rem; width: 100%; } .site-team p { color: #708198; font-family: inherit; font-size:15px; font-weight: normal; line-height: 1.5; width: 100%; overflow: hidden; margin-bottom: 2.5rem; padding:0 25px; white-space:pre-line; } .site-team .site-social-icons { /* Social icons (class) */ width: 100%; clear: both; display: block; overflow: visible; padding:0; } .site-team .site-social-icons a { width: 2.125rem; height: 2.125rem; border-radius: 6.25rem; background-color: #FFFFFF; position: relative; overflow: hidden; margin-bottom: -1.4375rem; border:#b2bdcc solid 1px; } .site-team .site-social-icons a i.fa:hover { color:#FFFFFF; } .site-team .site-social-icons a i.fa, .site-team .site-social-icons a span { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; height: 100%; width: 100%; color: #8d9aac; font-size: 0.813rem; font-weight: 400; line-height: 2.125rem; } .site-team .swiper-container { /* Carousel slider */ padding-bottom: 3.125rem; } .site-team .swiper-pagination { margin-top: 0.625rem; } /*----------------------------------------------------------------------------------- [Testimonial] (Section) # Testimonial (wrapper) # Quote # Images # Typography (p, h5) # Carousel pagination # Carousel navigation # Carousel container -----------------------------------------------------------------------------------*/ /* Testimonial wrapper */ .site-testimonial { margin: 0; display: block; width: 100%; clear: both; overflow: visible; padding:90px 0 150px 0; position: relative; } @media screen and (max-width: 991px) { .site-testimonial { } } .site-testimonial .testimonial-quote { /* Quote */ color: white; font-family: inherit; font-size: 4.563rem; font-weight: 700; width: 6.125rem; height: 6.125rem; background-color: #55a3e0; border-radius: 12.5rem; margin-left: auto; margin-right: auto; margin-top: -1.875rem; } @media screen and (max-width: 991px) { .site-testimonial .testimonial-quote { background-color: #2b8dd9; } } .site-testimonial .testimonial-quote span { display: inline-block; } .site-testimonial figure { /* Image */ /*display: block;*/ float:left; width:90px; height: 90px; overflow: hidden; border-radius: 12.5rem; padding: 0.313rem; background:#FFFFFF; margin: 0 auto; border:#d8dde4 solid 4px; } .site-testimonial figure img { border-radius: 12.5rem; display: block; margin: 0; padding: 0; width: 100%; height: 100%; } .site-testimonial p { /* Typography */ width:100%; color: #708198; font-family: inherit; font-size:15px; font-weight: normal; line-height:2; padding:30px 0 0 0; display: block; clear:both; text-align:left; } .site-testimonial h5 { color: #9b28a8; font-family: inherit; font-size:17px; font-weight:600; line-height: 1.5; margin:0; padding:20px 0 0 120px; display: block; width: 100%; text-align:left; } .swiper-slide .testimonial-degignation { color: #708198; font-family: inherit; font-size:14px; font-weight:500; line-height: 1.5; margin:0; padding:0 0 0 120px; display: block; width: 100%; text-align:left; } .site-testimonial .swiper-pagination { /* Carousel pagination */ margin-top:20px; } .site-testimonial .swiper-button-prev, .site-testimonial .swiper-button-next { /* Carousel navigation */ margin-top: 2.5rem; } @media screen and (min-width: 768px) { .site-testimonial .swiper-button-prev, .site-testimonial .swiper-button-next { left: 0; } } @media screen and (max-width: 767px) { .site-testimonial .swiper-button-prev, .site-testimonial .swiper-button-next { margin-top: 3.75rem; top: 0; } .site-testimonial figure { text-align:center; clear:both; } .site-testimonial h5 { width:100%; text-align:left; padding-left:0; clear:both; } .swiper-slide .testimonial-degignation { width:100%; text-align:left; padding-left:0; clear:both; } } @media screen and (min-width: 768px) { .site-testimonial .swiper-button-next { left: auto; right: 0; } } .site-testimonial .swiper-container { /* Carousel container */ margin-top:0; } /*----------------------------------------------------------------------------------- [Packages] (Section) # Packages section (wrapper) # Heading (h1) # .box (class) # .price (class) # .heading (class) # .Options (class) # Icons # .active (class) # hover (mouse hover) -----------------------------------------------------------------------------------*/ /* Packages section wrapper */ .site-packages { margin: 0; padding:0 0 140px 0; display: block; width: 100%; clear: both; background-color: #f8f7f7; } .site-packages .color-gredient { width:100%; height:400px; } .site-packages-inner { margin-top:-300px; } .site-packages h1 { /* Heading */ margin-bottom: 4.375rem; } .site-packages .box.left { border-radius:12px 0 0 12px; } .site-packages .box.left .price-box-header { border-radius:12px 0 0 0; } .site-packages .box.right { border-radius:0 12px 12px 0; } .site-packages .box.right .price-box-header { border-radius:0 12px 0 0; } .site-packages .box { /* Box (class) */ background-color: #fcfcfb; text-align: center; margin:40px 0 0 0; width: 100%; display: block; transition: 300ms linear; transition-property: box-shadow; max-width:100%; border-radius:12px; -webkit-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.08); -moz-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.08); box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.08); } @media screen and (max-width: 767px) { .site-packages .box { margin-left: auto; margin-right: auto; } .site-packages .box.left .price-box-header { border-radius:12px 12px 0 0; } .site-packages .box.left { border-radius:12px 12px 0 0; } .site-packages .box.right .price-box-header { border-radius:12px 12px 0 0; } .site-packages .box.right { border-radius:12px 12px 0 0; } } .price-box-header { background:#f2f4f5; padding-bottom:20px; border-radius:12px 12px 0 0; } .site-packages .price { /* price (class) */ color: #9b28a8; font-size:45px; font-weight:700; text-align: center; display: inline-block; margin-top:0; position: relative; top:0; overflow: visible; z-index: 1; transition: 300ms linear; width:100%; height:auto; line-height:1.5; } .site-packages .price span { /* price (class) */ font-size:18px; font-weight:normal; } .site-packages .price:before { /*content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; height: 100%; width: 100%; margin: auto; border-radius: 6.9375rem; background-color: #f8f7f7; z-index: -1; border: 0.375rem solid white; transition: 300ms linear; transition-property: background-color;*/ } .site-packages .heading { /* Heading (class) */ text-align: center; color: #4b535e; margin-top:0; margin-bottom:0; padding:40px 0 0 0; font-family: inherit; font-size:20px; font-weight:700; line-height:1.5; } .site-packages .options { /* Options (Class) */ background-color: white; margin: 0; padding: 0; border-top: 0.0625rem solid #f3f1f1; text-align: left; color: #6c6b6b; font-family: inherit; font-size:15px; font-weight:normal; line-height:1; } .site-packages .options li { border-bottom: 0.0625rem solid #f3f1f1; position: relative; padding: 1.5rem 1.875rem 1.25rem; list-style: none; } .site-packages .options span { position: relative; padding-left: 1.5625rem; padding-right: 1.5625rem; display: block; max-width: 14.375rem; margin-left: auto; margin-right: auto; } .site-packages .options i.fa, .site-packages .options i.fa.fa-close { /* Icons */ width: 0.813rem; height: 0.625rem; font-weight: 400; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; display: block; margin: 0; line-height: 0.875rem; color: #2dc100; font-size: 0.875rem; } .site-packages .options i.fa.fa-close { color: red; line-height: 0.75rem; } .site-packages a { background-color: white; border-radius: 15rem; color: #9b28a8; font-size:13px; font-weight: 700; line-height: 3.125rem; text-transform: uppercase; padding: 0 3.125rem; margin-bottom: -1.875rem; margin-top: 2.1875rem; position: relative; top: 0.625rem; display: inline-block; vertical-align: baseline; transition: 300ms linear; transition-property: color, background; border: 1px solid #9b28a8; } .site-packages .box.active .price-box-header { background: rgba(70,200,255,1); /* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 ); /* IE6-9 */ } .site-packages .box.active .heading{ color:#FFFFFF; } .site-packages .box.active .price{ color:#FFFFFF; } .site-packages .box.active { margin-top:0px; position:relative; z-index:1000; } .site-packages .box.active, .site-packages .box:hover { /* -------------------- active plan */ /*box-shadow: 0 0 1.75rem rgba(2, 3, 3, 0.15);*/ } .site-packages .box.active a, .site-packages .box:hover a { background-color: #9b28a8; color: white; } .site-packages .box.active .price, .site-packages .box:hover .price { /*border-color: #2b8dd9; color: white; box-shadow: 0 0 0.938rem rgba(2, 3, 3, 0.19);*/ } .site-packages .box.active .price:before, .site-packages .box:hover .price:before { /*background-color: #2b8dd9;*/ } .site-packages .box:hover { /* ------------------------ hover plan animation */ } @keyframes bounce { /* ------------------------ plan hover animation */ 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } .site-packages .box:hover { animation: bounce 1s; } /* ------------------------ plan hover animation */ /*----------------------------------------------------------------------------------- [Latest blog] (Section) # latest-blog (wrapper) # Typography (h1, h3, h4, p) # Device image # Section (image, icons) # Carousel Slider # carousel navigation # carousel pagination -----------------------------------------------------------------------------------*/ /* How it works section wrapper */ .latest-blog { padding-top: 5rem; padding-bottom: 6rem; } .latest-blog .blog-post-box { float:left; width:100%; border-radius:12px; background:#FFFFFF; position:relative; z-index:1000; margin-top:35px; -webkit-box-shadow: 0px 0px 22px -7px rgba(24,30,110,0.26); -moz-box-shadow: 0px 0px 22px -7px rgba(24,30,110,0.26); box-shadow: 0px 0px 22px -7px rgba(24,30,110,0.26); } .blog-post-content { float:left; width:100%; padding:30px; } .latest-blog figure { float:left; width:100%; } .latest-blog figure img { float:left; text-align:center; width:100%; border-radius:10px 10px 0 0; } .latest-blog ul { float:left; text-align:left; width:100%; padding:0px; margin:0; } .latest-blog ul li { float:left; text-align:left; padding:0 15px 0 0; margin:0; list-style:none; font-size:13px; color:#a0aec0; } .latest-blog a { display:inherit; } .latest-blog a h4 { float:left; width:100%; font-size:22px; font-weight:600; color:#516074; text-align:left; padding:20px 0 5px 0; margin:0; } .latest-blog span { float:left; width:100%; font-size:12px; font-weight:600; color:#516074; text-align:left; padding:0 0 5px 0; margin:0; } .blog-post-box p { float:left; width:100%; font-size:15px; font-weight:normal; color:#708198; text-align:left; padding:20px 0 5px 0; margin:0; line-height:1.8; } .latest-blog .blog-more-button { float:left; width:100%; font-size:13px; font-weight:700; color:#FFFFFF; text-transform:uppercase; text-align:left; letter-spacing:1px; padding:40px 0 20px 30px; margin:0; line-height:1.8; border-radius:0 0 12px 12px; margin-top:-24px; background: rgba(228,93,97,1); /* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(228,93,97,1)), color-stop(100%, rgba(155,40,168,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* IE 10+ */background: linear-gradient(135deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e45d61', endColorstr='#9b28a8', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } @keyframes bounce { /* ------------------------ blog hover animation */ 0%, 20%, 60%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-20px); transform: translateY(-20px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } } .latest-blog .blog-post-box:hover { animation: bounce 1s; } /* ------------------------ plan hover animation */ /*----------------------------------------------------------------------------------- [Statistic] (Section) # Statistic Section (wrapper) # .site-number (class) # Icons # Typography (h5, p) -----------------------------------------------------------------------------------*/ /* Statistic section wrapper */ .site-statistic { margin: 0; display: block; width: 100%; background:url(../images/statistic-bg.html) no-repeat top center; background-size:cover; background-attachment:fixed; padding:140px 0; } .site-number{ float:left; width:100%; text-align:center; } @media screen and (max-width: 767px) { .site-statistic { padding: 3.125rem 1.25rem; } } .site-number { /* Number (class) */ float:left; width:100%; text-align:center; } @media screen and (max-width: 767px) { .site-number { margin-top: 1.875rem; margin-bottom: 1.875rem; } } .site-number i.fa { /* Icons */ color: #2b8dd9; font-weight: 400; text-transform: uppercase; text-align: center; position: absolute; top: 0; left: 0; bottom: 0; margin: 0; display: block; width: 2.125rem; height: 100%; font-size: 2.375rem; line-height: 2.8125rem; vertical-align: middle; } .site-number h5 { /* Typography */ float:left; width:100%; text-align:center; color: #FFFFFF; font-size:50px; font-weight:700; clear: both; width: 100%; line-height:2; } .site-number p { float:left; width:100%; text-align:center; color: #FFFFFF; font-size:19px; font-weight:500; text-transform: capitalize; margin: 0; padding: 0; clear: both; } /*----------------------------------------------------------------------------------- [Twitter] (Section) # Twitter section (wrapper) # Heading (h1) # .tweet (class for hold tweets) # .date (class for hold tweets date) # Carousel slider -----------------------------------------------------------------------------------*/ /* Twitter section wrapper */ .site-twitter { margin: 0; display: block; width: 100%; clear: both; color: white; padding-bottom: 7.5rem; text-align: center; background: #2b8dd9; } .site-twitter h1 { /* Heading */ margin-bottom: 2.8125rem; } .site-twitter .tweet { /* Tweet (class) */ } .site-twitter .tweet ul, .site-twitter .tweet li { margin: 0; padding: 0; display: block; } .site-twitter .tweet li { font-size: 0.875rem; font-family: inherit; } .site-twitter .tweet li p { font-weight: 400; margin-bottom: 0; font-family: inherit; font-size: 0.813rem; line-height: 1.625rem; color: white; } .site-twitter .tweet li a { font-weight: 400; font-family: inherit; font-size: 0.813rem; color: #1f3542; } .site-twitter .tweet li .date { /* date (class) */ font-weight: 700; font-family: inherit; font-size: 0.875rem; margin-top: 0.125rem; color: white; } .site-twitter .swiper-container { /* carousel container */ margin-bottom: 3.125rem; margin-top: 1.25rem; text-align: center; } .site-twitter .swiper-container span { width: 100%; text-align: center; display: block; } .site-twitter .swiper-pagination { /* Carousel pagination */ margin-top: 1.25rem; } .site-twitter .swiper-button-prev, .site-twitter .swiper-button-next { /* Carousel navigation */ } @media screen and (min-width: 768px) { .site-twitter .swiper-button-prev, .site-twitter .swiper-button-next { left: 0; } } @media screen and (min-width: 1200px) { .site-twitter .swiper-button-prev, .site-twitter .swiper-button-next { left: 2.5rem; } } @media screen and (max-width: 767px) { .site-twitter .swiper-button-prev, .site-twitter .swiper-button-next { top: -3.75rem; } } @media screen and (min-width: 768px) { .site-twitter .swiper-button-next { left: auto; right: 0; } } @media screen and (min-width: 1200px) { .site-twitter .swiper-button-next { right: 2.5rem; } } /*----------------------------------------------------------------------------------- [Quick Support] (Section) # Quick Support (wrapper) # Heading (h1) # .site-info (class) # .site-box (class) # Images # Icons # Typography # Contact form -----------------------------------------------------------------------------------*/ /* Quick support wrapper */ .site-quick-support { padding-bottom:0; overflow: hidden; } .site-quick-support .contact-box { float:left; width:100%; border-radius:12px; height:640px; } @media screen and (max-width: 1199px) { .site-quick-support { padding-bottom: 6.25rem; } } .site-quick-support h1 { /* Heading */ margin-bottom: 4.375rem; } .site-quick-support .site-info { /* info (class) */ float:left; width: 100%; text-align: left; font-size: 0; border-right:rgba(255,255,255,0.4) solid 1px; padding:80px 40px; } .site-quick-support .site-info.form { /* info (class) */ border:none; } .site-quick-support .site-box { /* box (class) */ clear: both; position: relative; z-index: 10; padding: 1.25rem 0; width:100%; } .site-quick-support h5 { font-size:25px; font-weight:600; color:#FFFFFF; } .site-quick-support .site-info p { float:left; width:100%; font-size:15px; font-weight:normal; color:#FFFFFF; line-height:1.7; padding:40px 0 40px 0; } .site-quick-support .site-box-row h6{ float:left; font-size:21px; color:#FFFFFF; font-weight:normal; line-height:1; padding:0; margin:0; } .site-quick-support .site-box-row { float:left; width:100%; padding-bottom:50px; } .site-quick-support .site-box-row p { float:left; font-size:14px; text-align:left; padding:0 0 0 52px; margin:0; line-height:0; } @media screen and (max-width: 1199px) { .site-quick-support .site-box { padding-left: 3.125rem; padding-right: 3.125rem; } } @media screen and (max-width: 991px) { .site-quick-support .site-box { padding-left: 1.25rem; padding-right: 1.25rem; } .site-quick-support .site-info { border-right:none; padding:30px; } .site-quick-support .contact-box { height:auto; } } @media screen and (max-width: 767px) { .site-quick-support .site-box { display: block; width: 100%; } .site-quick-support .site-info { border-right:none; padding:30px; } } @media screen and (max-width: 639px) { .site-quick-support .site-info { border-right:none; padding:30px; } } @media screen and (max-width: 479px) { .site-quick-support .site-info { border-right:none; padding:30px; } } .site-quick-support .site-box.last:after { display: none; } .site-quick-support .site-box:after { /*content: ""; position: absolute; top: 0; right: 0; bottom: 0; display: block; clear: both; width: 0.063rem; height: 3.563rem; opacity: 0.5; background-color: #203e51; margin-top: auto; margin-bottom: auto;*/ } @media screen and (max-width: 767px) { .site-quick-support .site-box:after { display: none; } } .site-quick-support figure { /* Image */ text-align: left; float:left; width:30px; } .site-quick-support i.fa, .site-quick-support span { /* Icons */ float:left; width:38px; height:38px; color: #FFFFFF; font-size:18px; font-weight: 400; line-height:2; text-align: center; border:#FFFFFF solid 1px; border-radius:100%; margin-right:15px; } .site-quick-support p, .site-quick-support address { /* Typography */ float:left; color: #FFFFFF; font-family: inherit; font-size:14px; font-weight: normal; padding: 1.125rem 0; width: 100%; font-style: normal; margin:0; padding:0 0 0 52px; transition: 300ms linear; transition-property: color; line-height:1.5; } .site-quick-support p:hover, .site-quick-support address:hover { color: #FFFFFF; } .site-contact-form { /* CONTACT FORM */ padding:40px 0 0 0; display: block; width: 100%; clear: both; margin:0; } .site-contact-form table { width: 100%; } @media screen and (max-width: 767px) { .site-contact-form { max-width:100%; margin-left: auto; margin-right: auto; padding-left:0; padding-right:0; } .site-contact-form table, .site-contact-form tr, .site-contact-form td, .site-contact-form th, .site-contact-form tbody { display: block; width: 100%; } } .site-contact-form input, .site-contact-form textarea { /* Input fields */ width: 100%; height:45px; background-color:inherit; padding: 0; color: #FFFFFF !important; font-family: inherit; font-size:14px; font-weight:normal; line-height:1.5; border-bottom:#FFFFFF solid 1px; box-sizing: border-box; transition: 300ms linear; transition-property: border-color; display: block; margin: 0; border-top:none; border-left:none; border-right:none; } .site-contact-form input:focus, .site-contact-form textarea:focus { border-color: #80d37f; } .site-contact-form textarea { height:100px; resize: none; position: relative; top: 0.0625rem; } .site-contact-form input[type=submit], .site-contact-form button[type=submit] { /* Input submit field */ } .site-contact-form input[type=submit] i.fa, .site-contact-form button[type=submit] i.fa { display: none; padding: 0; color: white; line-height: normal; font-size: 1rem; transition: 300ms linear; transition-property: color; margin: 0 0 0 0.625rem; } .site-contact-form input[type=submit]:hover i.fa, .site-contact-form button[type=submit]:hover i.fa { color: #2b8dd9; } @media screen and (max-width: 767px) { .site-contact-form input[type=submit], .site-contact-form button[type=submit] { width: 100%; } } .site-contact-form label { margin-bottom: 0.875rem; display: block; margin-right:0; color:#FFFFFF !important; } .site-contact-form label.last { /* last (class) */ margin-right: 0; } .site-contact-form label.move { /* Move (class) */ margin-top: 1.25rem; display: inline-block; margin-right: 0; } @media screen and (max-width: 767px) { .site-contact-form label.move { display: block; margin-top: 1.875rem; } } @media screen and (max-width: 767px) { .site-contact-form label { margin-right: 0; } } /*----------------------------------------------------------------------------------- [Subscribe] (Section) # Subscribe Section (wrapper) # .site-box (class) # Typography # Input Fields # Form (class) # .no-space (class is used to remove the element left or right side padding) -----------------------------------------------------------------------------------*/ /* Subscribe section wrapper */ .site-subscribe { padding:100px 0; display: block; width: 100%; clear: both; color: white; position: relative; margin:0; } .site-subscribe .main-heading-text { margin-top:-30px; } @media screen and (max-width: 1199px) { .site-subscribe { margin-top: 0; } } @media screen and (max-width: 767px) { .site-subscribe { padding-bottom: 0.625rem; } } .site-subscribe .site-box { /* box (class) */ line-height:0; padding: 0 2.1875rem; position: relative; top:30px; } @media screen and (max-width: 1199px) { .site-subscribe .site-box { top: 0; max-width: 37.5rem; text-align: center; margin-left: auto; margin-right: auto; padding-top: 2.5rem; padding-bottom: 1.25rem; } } .site-subscribe p { /* Typography */ /*color: white; font-family: inherit; font-size: 1rem; font-weight: 400; line-height: 2rem; margin: 0; display: inline-block; padding: 0 0 0 1.25rem;*/ } @media screen and (max-width: 1199px) { .site-subscribe p { display: block; margin-bottom: 1.25rem; } } .site-subscribe label { width: 100%; margin: 0; padding: 0; display: inline-block; position: relative; overflow: hidden; vertical-align: middle; } .site-subscribe input[type=email], .site-subscribe input[type=text] { /* Input fields */ width: 100%; height: 2.688rem; line-height: 2.688rem; border: 0.063rem solid white; border-radius: 1.3125rem; background: #f2f4f5; display: block; margin: 0; font-weight: 400; color:#708198; padding: 0 11.25rem 0 1.25rem; border:#e9eaf4 solid 1px; } @media screen and (max-width: 767px) { .site-subscribe input[type=email], .site-subscribe input[type=text] { padding-right: 1.25rem; } } .site-subscribe input[type=submit] { /* Input submit button */ width: 9.375rem; min-width: 0.625rem; height: 2.688rem; min-height: 0.625rem; line-height: 2.688rem; margin: auto 0; border-radius: 1.3125rem; box-shadow: none; color: #FFFFFF; font-family: inherit; font-size: 0.813rem; font-weight: 700; text-transform: uppercase; position: absolute; top: 0; right: 0; bottom: 0; transition: 300ms linear; transition-property: background, color; border: 0.063rem solid white; background: rgba(70,200,255,1); /* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 ); /* IE6-9 */ } .site-subscribe input[type=submit]:hover { background: #9b28a8; color: white; } @media screen and (max-width: 767px) { .site-subscribe input[type=submit] { position: relative; width: 100%; border: none; } } .site-subscribe .site-form { /* Form */ position: relative; margin: 0; padding: 0; display: block; width: 100%; clear: both; } @media screen and (max-width: 767px) { .site-subscribe .site-form { max-width: 25rem; margin-left: auto; margin-right: auto; } } .site-subscribe .no-space { /* no space (class is used to remove the element left or right side padding) */ padding-left: 0; padding-right: 0; } /*----------------------------------------------------------------------------------- [Footer] (Section) # Footer Section (wrapper) # Logo # Social Icons # Copyright -----------------------------------------------------------------------------------*/ /* Footer Section wrapper */ .site-footer { padding: 100px 0 100px 0; display: block; width: 100%; clear: both; text-align: center; background: #18174f; color: white; } .site-footer .site-logo { /* LOGO */ width: 100%; clear: both; height: auto; display: block; margin: 1.875rem 0; } .site-footer .site-logo a { display: inline-block; } .site-social-icons { /* SOCIAL ICONS */ width: 100%; clear: both; padding:50px 0 0 0; } .site-social-icons a { width: 3rem; height: 3rem; background:#505762; border-radius: 12.5rem; overflow: hidden; position: relative; text-align: center; margin: 0.1875rem; transition: 300ms linear; transition-property: background, color, border-color; } .site-social-icons a:hover { color: white; transition:all ease .5s; background: rgba(228,93,97,1); /* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(228,93,97,1)), color-stop(100%, rgba(155,40,168,1))); /* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* IE 10+ */background: linear-gradient(135deg, rgba(228,93,97,1) 0%, rgba(155,40,168,1) 100%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e45d61', endColorstr='#9b28a8', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .site-social-icons i.fa, .site-social-icons span { color: white; font-size: 0.938rem; font-weight: 400; line-height: 3rem; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; height: 100%; width: 100%; } .site-copyright { /* COPYRIGHT */ color: #708198; font-family: inherit; font-size:13px; font-weight: 400; line-height:1.5; width: 100%; clear: both; margin-top:40px; } @media screen and (max-width: 991px) { .site-footer { background: #1F3542; padding:60px 0; margin-top:0; } .site-download-icons { margin:30px 0; padding:0; } } /*----------------------------------------------------------------------------------- [Custom Scroll Bar] # Custom scroll bar (wrapper) -----------------------------------------------------------------------------------*/ /* Custom scroll bar wrapper */ .mCustomScrollBox { /* contains plugin's markup */ position: relative; overflow: hidden; height: 100%; max-width: 100%; outline: none; direction: ltr; } .mCSB_container { /* contains the original content */ overflow: hidden; width: auto; height: auto; } /* VERTICAL SCROLLBAR y-axis */ .mCSB_inside > .mCSB_container { margin-right: 1.5625rem; } .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-right: 0; } /* non-visible scrollbar */ .mCS-dir-rtl > .mCSB_inside > .mCSB_container { /* RTL direction/left-side scrollbar */ margin-right: 0; margin-left: 1.875rem; } .mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden { margin-left: 0; } /* RTL direction/left-side scrollbar */ .mCSB_scrollTools { /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position: absolute; width: 1.5rem; height: auto; left: auto; top: 0; right: 0; bottom: 0; } .mCSB_outside + .mCSB_scrollTools { right: -1.625rem; } /* scrollbar position: outside */ .mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { /* RTL direction/left-side scrollbar */ right: auto; left: 0; } .mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools { left: -1.625rem; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */ .mCSB_scrollTools .mCSB_draggerContainer { /* contains the draggable element and dragger rail markup */ position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: auto; } .mCSB_scrollTools a + .mCSB_draggerContainer { margin: 1.25rem 0; } .mCSB_scrollTools .mCSB_draggerRail { width: 0.125rem; height: 100%; margin: 0 auto; border-radius: 1rem; } .mCSB_scrollTools .mCSB_dragger { /* the draggable element */ cursor: pointer; width: 100%; height: 1.875rem; /* minimum dragger height */ z-index: 1; } .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { /* the dragger element */ position: relative; width: 0.25rem; height: 100%; margin: 0 auto; border-radius: 1rem; text-align: center; } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar { width: 0.75rem; /* auto-expanded scrollbar */ } .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, .mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail { width: 0.5rem; /* auto-expanded scrollbar */ } .mCSB_scrollTools .mCSB_buttonUp, .mCSB_scrollTools .mCSB_buttonDown { display: block; position: absolute; height: 1.25rem; width: 100%; overflow: hidden; margin: 0 auto; cursor: pointer; } .mCSB_scrollTools .mCSB_buttonUp:before, .mCSB_scrollTools .mCSB_buttonDown:before { content: "\f0d8"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; width: 100%; text-align: center; height: 100%; font-family: FontAwesome, serif; color: #2b8dd9; font-size: 1.375rem; line-height: 1.25rem; } .mCSB_scrollTools .mCSB_buttonDown { bottom: 0; } .mCSB_scrollTools .mCSB_buttonDown:before { content: "\f0d7"; } .mCSB_draggerRail { background-color: #e6e9ed; border-radius: 6.25rem !important; opacity: 1 !important; width: 0.75rem !important; } .mCSB_scrollTools { opacity: 1; } .mCSB_dragger_bar { width: 0.375rem !important; background: #2b8dd9; border-radius: 0 !important; opacity: 1 !important; } .mCSB_dragger_bar:before { display: none; } /*----------------------------------------------------------------------------------- [Scroll Back To Top] -----------------------------------------------------------------------------------*/ /* Scroll back to top wrapper */ #scrollUp { margin: 0; padding: 0; bottom: 1.875rem; right: 1.875rem; height: 3.125rem; width: 3.125rem; line-height: 3.125rem; text-align: center; background: #142834; border-radius: 12.5rem; font-size: 1.875rem; box-shadow: 0 0 0.9375rem rgba(2, 3, 3, 0.19); transition: 300ms linear; transition-property: color, background; color: white; } #scrollUp:hover { color: #1f3542; background: #D3D3D3; } /*----------------------------------------------------------------------------------- [Preloader] # Preloader (overlay) # .preloader (class) -----------------------------------------------------------------------------------*/ .loadingoverlay { /* Overlay */ background-size: 40px !important; } .preloader { /* preloader (class) */ opacity: 0; visibility: hidden; } @media only screen and (max-width: 700px) { .screen { height: 745px; } .star-bg { height: 895px !important; } }