html {
font-size: 16px;
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;
}
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: #EB2227;
}
img {
max-width: 100%;
display: inline-block;
}
.clearfix {
clear: both;
}
.container {
max-width: 100%;
}
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.mockup{
-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 10px; width: 70%
}
.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:#EB2227;
}
.left-heading-pad{
padding-top: 100px;
}
.wrapper {
margin: 0;
padding: 0;
display: block;
width: 100%;
clear: both;
overflow: hidden;
overflow-y: auto;
}
.section-white, .section-blue {
margin: 0;
padding: 80px 0;
display: block;
width: 100%;
clear: both;
background: white;
text-align: center;
overflow: hidden;
}
.section-grey {
margin: 0;
padding: 80px 0;
display: block;
width: 100%;
clear: both;
background: #f2f4f5;
text-align: center;
overflow: hidden;
}
.section-white h1, .section-blue h1, .section-grey h1, .two-colom-section h1, .two-colom-section-privacy h1 {
color: #352A26;
font-size: 2.75rem;
line-height: 4.125rem;
font-weight: 300;
margin-top: 0;
position: relative;
margin-bottom: 2.00rem;
}
.site-info h1 {
color: #FFF;
font-size: 2.75rem;
line-height: 4.125rem;
font-weight: 300;
margin-top: 0;text-align:center;
position: relative;
margin-bottom: 3.75rem;
}
.dldfirstbtn{
float: left; padding-right: 20px;
}
.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, .two-colom-section-privacy h1 {
font-size: 2rem;
line-height:1.2;
}
}
.section-white h1 strong, .section-blue h1 strong {
font-weight: 700;
}
.section-white h1:after, .section-blue h1:after, .section-grey h1:after {
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 {
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, .two-colom-section-privacy h1:after {
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 {
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;
}
.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: #323232;
}
/*-----------------------------------------------------------------------------------*/
/* 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: 1.2rem;
font-weight: 600;
line-height: 1.813rem;
text-transform: uppercase;
transition: 300ms linear;
transition-property: background, color;
border:none;
background: #EB2227;
-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: #9D0D24;
color: #FFF;
}
/* 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;
}
}
/*-----------------------------------------------------------------------------------*/
/* 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:#EB2227 solid 1px;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0.4375rem;
}
/* Active pagination bulet */
.swiper-pagination-bullet-active {
background-color: #EB2227;
}
/* 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:0;
/*top: -3.125rem;*/
display:none;
}
}
.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(252,133,84,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(252,133,84,1)), color-stop(100%, rgba(248,62,101,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8554', endColorstr='#EB2227', 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(252,133,84,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(252,133,84,1)), color-stop(100%, rgba(248,62,101,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8554', endColorstr='#EB2227', 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;*/
}
.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: #000;
}
.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: #000;
}
.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%;
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 {
position: relative;
top: -2px;
vertical-align: middle;
}
/* 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: #211A18;
}
@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: #EB2227;
}
.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:16px;
font-weight:500;
line-height:2;
color: white;
display: table-cell;
vertical-align: middle;
padding: 0 18px;
letter-spacing: 0.03125rem;
position: relative;
}
.site-nav ul.nav-off-canvas > li > a:hover {
color: #EB2227;
}
@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;
color: #EB2227;
width: 0;
margin: 0 auto;
background: none;
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 {
}
.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: #203e51;
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: #d4e9ff;
}
.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;
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: #FFF;
transition: 300ms linear;
transition-property: width;
}
.messages{ display:none; text-align: center;}
/* MOBILE VIEW NAVIGATION BUTTON */
.nav-mobile {
color: white;
display: none;
}
.nav-mobile:hover {
color: #FFF;
}
@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: #EB2227;
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 {
height:850px;
}
.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;
display:none;
}
}
.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: #EB2227;
}
.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;
margin-top:0;
}
}
@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 {
background: #80d380;
color: #FFFFFF;
transition:all ease .5s;
border:none !important;
background: #EB2227;
-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: #000;
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;
padding: 60px 0;
}
.static-content {
/*position:absolute;*/
top: 8%;
}
.banner-caption {
float:left;
width:100%;
position:relative;
left:-15px;
padding:100px 0 0 0;
margin-right: 20px;
}
.banner-caption h1 {
font-size:140px;
color:#FFFFFF;
font-weight:600;
letter-spacing:-2px;
line-height:1;
padding:0;
margin:0;
}
.banner-caption h2 {
font-size:26px;
color:#FFFFFF;
font-weight:normal;
line-height:1;
padding:0;
margin:0;
}
.languages{
text-align:center;
}
.languages a{
padding-right: 20px;
font-size:14px;
color: #FFF
}
.languages a:hover{
color: #9D0D24
}
.languages a.active{
color:#EB2227 !important;
}
.banner-caption p {
color: white;
font-family: inherit;
font-size: 18px;
font-weight: 400;
line-height: 2;
margin-bottom: 1.875em;
white-space: pre-line;
}
.static-banner .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;
}
.static-banner .slide-button:hover {
background: #80d380;
color: #FFFFFF;
transition:all ease .5s;
border:none;
background: rgba(70,200,255,1);
-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.png) no-repeat right top;
height:745px;*/
/*text-align:right;*/
margin: 0 auto;
position:relative;
left: 0px;
right:0px;
top:0;
}
@media screen and (max-width: 1199px) {
.static-banner {
top:15%;
}
.static-banner-image {
/* left:0;*/
}
.banner-caption {
padding:90px 0 0 0;
}
.banner-caption h1 {
font-size:120px;
}
.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:15%;*/
/*height: 1450px;*/
}
.banner-caption {
padding:0;
}
.banner-caption h1 {
font-size:100px;
text-align:center;
}
.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;
}
.static-banner-image {/*
width:100%;
text-align:center;
background-size:270px;
background-position:center top;
margin:30px 0 0 0;
*/
/*height: 550px;*/
}
.static-banner .banner-caption {
text-align:center;
}
.static-content {
top:10%;
}
}
@media screen and (max-width: 767px) {
.static-banner {
/*top:15%;*/
}
.banner-caption h1 {
font-size:70px;
text-align:center;
}
.static-banner .slide-button {
margin:10px 0;
}
}
/*-----------------------------------------------------------------------------------
Wave - Graph move on mouse move
-----------------------------------------------------------------------------------*/
.background {
position: absolute; top: -10%; left: -10%;
width: 120%; height:1000px;
z-index: 1;
}
.cloud {
position: absolute;
bottom:-38px;
left:-5%;
height: auto;
z-index: 2;
opacity:10;
min-width:110%;
width: 100%;
/*width: auto; */
}
.cloud img{
width: 140% !important;
}
/*-----------------------------------------------------------------------------------
[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;
}
.static-banner-image {/*
width:84%;
text-align:center;
background-size:270px;
background-position:center top;
margin:30px 0 0 0;
position: relative;
margin: 0 auto;*/
}
.static-banner {
/*height: 1200px;*/
}
}
.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: 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);
}
.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: left;
display: block;
padding: 0 0 0 1.25rem;
}
.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: 80px;
}
@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: #EB2227;
}
.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: 1.375rem;
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:#EB2227 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 {
}
.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, .two-colom-section-privacy {
padding:80px 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:24px;
color:#708198;
line-height:1.6;
font-weight:normal;
}
.highlited-text {
color:#EB2227;
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, .two-colom-section-privacy {
padding:80px 0;
}
.half-colom-padding {
padding:0;
}
.two-colom-content p {
padding-bottom:50px;
}
}
@media screen and (max-width: 767px) {
.two-colom-section, .two-colom-section-privacy {
padding:80px 0;
}
.half-colom-padding {
padding:0;
}
}
@media screen and (max-width: 639px) {
.two-colom-section, .two-colom-section-privacy {
padding:80px 0 0 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: #EB2227;
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(252,133,84,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(252,133,84,1)), color-stop(100%, rgba(248,62,101,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8554', endColorstr='#EB2227', 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:22px !important;
line-height:1.5;
white-space:pre-line;
}
.white {
color:#FFFFFF;
}
.site-more-features {
margin: 0;
margin-bottom: 80px;
display: block;
width: 100%;
clear: both;
}
@media screen and (max-width: 991px) {
.site-more-features {
margin-bottom: 0px;
}
}
.site-more-features .featured-img {
/* featured image */
padding: 0;
display: block;
margin: 0 auto;
overflow: hidden;
text-align: center;
max-width: 100%;
}
.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: #EB2227;
box-shadow: 0 0 0.938rem rgba(2, 3, 3, 0.19);
}
.site-more-features .feature:hover figure:before {
background: #EB2227;
}
.site-more-features .feature:hover span, .site-more-features .feature:hover i.fa {
border-color:#EB2227;
color: white;
box-shadow: 0 0 15px rgba(2, 3, 3, 0.19);
background: #EB2227;
color: #FFFFFF;
transition:all ease .5s;
border:none !important;
}
.site-more-features .feature:hover span:after, .site-more-features .feature:hover i.fa:after {
background: #EB2227;
}
.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.png") 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: 1.75rem 3.75rem 1.75rem 5.625rem;
}
.site-download-icons a:hover {
background-color: #2177ba;
}
@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: 5.625rem;
position: relative;
left: 1.25rem;
top: 0.125rem;
}
.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%;
}
.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: #EB2227;
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: #EB2227;
}
/*-----------------------------------------------------------------------------------
[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;
}
.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: #EB2227;
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-bottom:150px;
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;
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:center;
}
.site-testimonial h5 {
color: #EB2227;
font-family: inherit;
font-size:17px;
font-weight:600;
line-height: 1.5;
margin:0;
padding:20px 0 0 0;
display: block;
width: 100%;
text-align:center;
}
.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 0;
display: block;
width: 100%;
text-align:center;
}
.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:center;
padding-left:0;
clear:both;
}
.swiper-slide .testimonial-degignation {
width:100%;
text-align:center;
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: #EB2227;
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: #EB2227;
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 #EB2227;
}
.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: #EB2227;
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
-----------------------------------------------------------------------------------*/
/* latest-blog section wrapper */
.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: 10px 30px 30px 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(252,133,84,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(252,133,84,1)), color-stop(100%, rgba(248,62,101,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(252,133,84,1) 0%, rgba(248,62,101,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8554', endColorstr='#EB2227', 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.jpg) 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;
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;*/
height:auto;
}
@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{
loat: left;
font-size: 21px;
color: #FFFFFF;
font-weight: normal;
line-height: 28px;
padding: 0;
margin: 0;
padding-bottom: 10px;
}
.site-quick-support .site-box-row a{
color:#EB2227;
font-weight: 300;
}
.site-quick-support .site-box-row a:hover{
color:#9D0D24;
}
.site-quick-support .site-box-row {
float:left;
width:100%;
padding-bottom:50px;
}
.site-quick-support .site-box-row p {
font-size:26px;
/*padding:10px 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 0;
}
}
.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;
color: #FFFFFF;
font-weight: 400;
line-height:2;
text-align: center;
border:#FFFFFF solid 1px;
border-radius:100%;
margin-right:15px;
width: 60px;
height: 60px;
font-size: 28px;
}
.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:18px;
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: #EB2227;
}
.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 {
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: #EB2227;
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 {
margin-top:-80px;;
padding: 100px 0 100px 0;
display: block;
width: 100%;
clear: both;
text-align: center;
background: #000 ;
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:20px 0 0 0;
}
.site-social-icons a {
width: 3rem;
height: 3rem;
background:#EB2227;
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: #9D0D24;
}
.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: #FFF;
font-family: inherit;
font-size:16px;
font-weight: 400;
line-height:1.5;
width: 100%;
clear: both;
margin-top: 1.25rem;
}
@media screen and (max-width: 991px) {
.site-footer {
background: #000;
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: #EB2227;
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: #FFF;
background: #9D0D24;
}
/*-----------------------------------------------------------------------------------
[Preloader]
# Preloader (overlay)
# .preloader (class)
-----------------------------------------------------------------------------------*/
.loadingoverlay {
/* Overlay */
background-size: 40px !important;
}
.preloader {
/* preloader (class) */
opacity: 0;
visibility: hidden;
}
@media screen and (max-width: 991px) {
.dldfirstbtn{
float: none; padding-right: 0px;
padding-top: 20px;
padding-bottom: 20px;
}
.left-heading-pad{
padding-top: 10px;
}
.site-amazing-features .features {
max-width: 19.75rem;
padding: 0px;
}
.site-quick-support .site-box-row p{
font-size: 18px;
}
.two-colom-section {
padding: 0px 0 0 0;
}
.two-colom-section-privacy {
padding:120px 0;
}
}
a.telestored{
color: #EB2227;
}
a.telestored:hover{
color: #9D0D24;
}
.appstorebtn{
width: 220px;
}
.h1thankyou{
margin-bottom: 2.375rem;
}
.terms{
font-weight: 300; font-size: 12px; color: #5A5A5A;
}
.two-colom-content p{
padding-bottom: 30px;
}
.two-colom-content h2{
padding-bottom: 14px;
}
.two-colom-content ul li{
font-size: 18px;
color: #708198;
line-height: 2;
font-weight: normal;
}
.two-colom-content ul{
padding-bottom: 14px;
}
.h1_big1{
font-size: 100px !important;
}
.h1_big2{
font-size: 70px !important;
}
.h2_header{
display: inline-block;
padding-top: 28px !important;
line-height: 1.3 !important;
}
.ss{
z-index: 30; position: absolute; top: 84px; left: 20px; width: 310px;
}
.rightimage{
width: 360px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/*border: 1px solid #AAAAAA;*/
position: relative;
}
@media screen and (max-width: 400px) {
.static-banner-image{
}
.ss{
z-index: 30; position: absolute; top: 62px; left: 14px; width: 232px;
}
.banner-caption{
left: 0px;
}
.h1_big1{
font-size: 70px !important;
}
.h1_big2{
font-size: 50px !important;
}
}
@media (min-width: 320px){
.static-content {
top: 2%;
}
.h2_header{
line-height: 1.2 !important;
}
.two-colom-section h1:after, .two-colom-section-privacy h1:after{
margin: 0 auto;
}
.left-heading h1{
text-align:center;
}
.two-colom-content{
float: none;
text-align: center;
}
.two-colom-section{
text-align:center;
}
.two-colom-content p{
text-align:center;
}
}
.privacy .two-colom-content{
text-align: left;
}
.privacy .two-colom-content p{
text-align: left;
color: #5A5A5A;
}
@media (max-width: 1200px) {
.mobile-center {
margin: 0 auto;
text-align: center;
}
}
/* iPhone Container */
.iphone-container {
display: flex;
gap: 60px;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
/* iPhone Mockup */
.iphone-mockup {
position: relative;
width: 360px;
height: 780px;
border-radius: 45px;
padding: 12px;
box-shadow:
0 0 0 12px rgba(0, 0, 0, 0.1),
0 20px 40px rgba(0, 0, 0, 0.3),
0 40px 80px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}
/* Frame colors */
.iphone-mockup.white-frame {
background: linear-gradient(135deg, #f5f5f7 0%, #e1e1e3 100%);
}
.iphone-mockup.black-frame {
background: linear-gradient(135deg, #1c1c1e 0%, #000000 100%);
}
.iphone-mockup.silver-frame {
background: linear-gradient(135deg, #e3e4e8 0%, #c8c9cd 100%);
}
.iphone-mockup.gold-frame {
background: linear-gradient(135deg, #fceabb 0%, #f8b500 100%);
}
/* Notch */
.notch {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
width: 140px;
height: 25px;
background: #000;
border-radius: 0 0 15px 15px;
z-index: 10;
}
/* Dynamic Island (for newer models) - optional */
.dynamic-island {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 90px;
height: 28px;
background: #000;
border-radius: 20px;
z-index: 10;
display: none; /* Hidden by default, can be enabled */
}
/* Screen */
.screen {
position: relative;
width: 100%;
height: 100%;
background: #000;
border-radius: 35px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* Screenshot */
.screenshot {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder when no image */
.placeholder {
color: #666;
text-align: center;
padding: 20px;
font-size: 14px;
}
/* Side buttons */
.power-button {
position: absolute;
right: -3px;
top: 180px;
width: 3px;
height: 80px;
background: inherit;
border-radius: 0 2px 2px 0;
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.2);
}
.volume-up {
position: absolute;
left: -3px;
top: 140px;
width: 3px;
height: 50px;
background: inherit;
border-radius: 2px 0 0 2px;
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
}
.volume-down {
position: absolute;
left: -3px;
top: 200px;
width: 3px;
height: 50px;
background: inherit;
border-radius: 2px 0 0 2px;
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
}
.mute-switch {
position: absolute;
left: -3px;
top: 90px;
width: 3px;
height: 30px;
background: inherit;
border-radius: 2px 0 0 2px;
box-shadow: -2px 0 4px rgba(0, 0, 0, 0.2);
}
/* Upload area */
.upload-area {
margin-top: 40px;
padding: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 12px;
backdrop-filter: blur(10px);
}
.upload-label {
display: inline-block;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.2);
color: white;
border-radius: 8px;
cursor: pointer;
margin: 0 10px;
transition: all 0.3s ease;
}
.upload-label:hover {
background: rgba(255, 255, 255, 0.3);
}
input[type="file"] {
display: none;
}
/* Responsive */
@media (max-width: 768px) {
.iphone-container {
gap: 40px;
}
.iphone-mockup {
width: 300px;
height: 590px;
justify-self: center;
align-self: center;
position: relative;
margin: 0 auto;
}
.notch {
width: 120px;
height: 22px;
}
}
@media screen and (max-width: 991px) {
.iphone-container {
gap: 40px;
}
.iphone-mockup {
width: 300px;
height: 590px;
justify-self: center;
align-self: center;
position: relative;
margin: 0 auto;
}
.notch {
width: 120px;
height: 22px;
}
}
/* Animation on hover */
.iphone-mockup:hover {
transform: rotateY(5deg) rotateX(5deg);
box-shadow:
0 0 0 12px rgba(0, 0, 0, 0.1),
0 30px 60px rgba(0, 0, 0, 0.4),
0 50px 100px rgba(0, 0, 0, 0.3);
}