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;
}
/* Change the a tag color */
a {
text-decoration: none;
color: #2b8dd9;
transition: 300ms linear;
transition-property: color;
display: inline-block;
}
a:hover, a:active, a:focus, a:visited {
text-decoration: none;
color: #315db7;
}
/* Responsive image */
img {
max-width: 100%;
display: inline-block;
}
/* Clearfix */
.clearfix {
clear: both;
}
/* Make bootstrap container max-width 100% */
.container {
max-width: 100%;
}
/*--- for remove space / gutter betwin 2 colom of boot strap */
.row.no-gutter {
margin-left: 0;
margin-right: 0;
}
.row.no-gutter [class*='col-']:not(:first-child),
.row.no-gutter [class*='col-']:not(:last-child) {
padding-right: 0;
padding-left: 0;
}
.bold-color {
color:#315db7;
}
/*--- */
/* Template wrapper */
.wrapper {
margin: 0;
padding: 0;
display: block;
width: 100%;
clear: both;
overflow: hidden;
overflow-y: auto;
}
/* Template white section and blue section */
.section-white, .section-blue {
margin: 0;
padding: 80px 0;
display: block;
width: 100%;
clear: both;
background: white;
text-align: center;
overflow: hidden;
/* Section h1 heading */
}
.section-grey {
margin: 0;
padding: 80px 0;
display: block;
width: 100%;
clear: both;
background: #f2f4f5;
text-align: center;
overflow: hidden;
/* Section h1 heading */
}
.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;
}
.advisorsblock .main-heading-text h4{
float:left;
width:100%;
text-align:center;
font-size:19px;
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-coll-section h1 {
font-size: 2rem;
line-height:1.2;
}
.site-amazing-features .mtt { margin-top:0px}
}
.section-white h1 strong, .section-blue h1 strong {
font-weight: 700;
}
.section-white h1:after, .section-blue h1:after, .section-grey h1:after {
/* H1 heading icon add */
content: "";
position: relative;
background: url("../images/heading-before.png") no-repeat center;
background-size: 3.375rem 1.125rem;
display: block;
width: 40px;
height: 4px;
margin-left: auto;
margin-right: auto;
clear: both;
top: 0.5rem;
}
.left-heading h1:after {
/* H1 heading icon add */
content: "";
position: relative;
background: url("../images/heading-before.png") no-repeat left;
background-size: 3.375rem 1.125rem;
display: block;
width: 40px;
height: 4px;
margin-left: 0;
margin-right: auto;
clear: both;
top: 0.5rem;
}
.two-coll-section h1:after {
/* H1 heading icon add */
content: "";
position: relative;
background: url("../images/heading-before.png") no-repeat left;
background-size: 3.375rem 1.125rem;
display: block;
width: 40px;
height: 4px;
margin-left: 0;
margin-right: auto;
clear: both;
top: 0.5rem;
}
.section-blue h1:after {
/* H1 heading icon add */
content: "";
position: relative;
background: url("../images/heading-before-white.png") no-repeat center;
background-size: 3.375rem 1.125rem;
display: block;
width: 40px;
height: 4px;
margin-left: auto;
margin-right: auto;
clear: both;
top: 0.5rem;
}
/* Template section blue */
.section-blue {
color: white;
background-color: #08223b;
}
.section-blue h1 {
color: white;
}
.left-heading h1 {
text-align:left;
line-height:1.3;
}
.color-gredient {
background: rgba(16,33,139,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(16,33,139,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ccebc', endColorstr='#315db7', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
/*-----------------------------------------------------------------------------------*/
/* Input fields */
/*-----------------------------------------------------------------------------------*/
input {
border: none;
box-shadow: none;
}
/* Submit input field */
input[type=submit], button[type=submit] {
min-width: 12.188rem;
min-height: 3.125rem;
border-radius: 1.5rem;
color: white;
font-family: inherit;
font-size: 0.813rem;
font-weight: 700;
line-height: 1.813rem;
text-transform: uppercase;
transition: 300ms linear;
transition-property: background, color;
border:none;
background: rgba(246,174,0,1);
background: -moz-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(246,174,0,1)), color-stop(100%, rgba(255,126,59,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
-webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
}
input[type=submit]:hover, button[type=submit]:hover {
background: white;
color: #203e5b;
}
/* Fluid container with wide class */
.container-fluid.wide {
max-width: 1400px;
}
@media screen and (min-width: 768px) {
.container-fluid.wide {
padding-left: 5rem;
padding-right: 5rem;
}
}
/*-----------------------------------------------------------------------------------*/
/* 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 0;
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);
}
.advisorsblock .swiper-slide-box { max-height:250px;}
.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);
}
.advisorsblock .swiper-slide-back-box{ margin-bottom:10px;}
/* 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:#315db7 solid 1px;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0.4375rem;
}
/* Active pagination bulet */
.swiper-pagination-bullet-active {
background-color: #315db7;
}
/* 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.5;
border: 0.125rem solid #d7ddeb;
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(16,33,139,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(16,33,139,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ccebc', endColorstr='#315db7', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
.section-white .swiper-button-prev, .section-white .swiper-button-next {
background-color: #f2f4f5;
border-color: #ededed;
color: #000;
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(16,33,139,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(16,33,139,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ccebc', endColorstr='#315db7', 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: rgba(16,33,139,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(16,33,139,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ccebc', endColorstr='#315db7', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
.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: rgba(16,33,139,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(16,33,139,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ccebc', endColorstr='#315db7', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
.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 span { margin-top:5px; margin-left:10px;}*/
.site-logo a {
color: white;
display: table-cell;
vertical-align: middle;
}
.site-logo img {
vertical-align: baseline; margin-top:-10px
}
/* Navigation */
.site-nav {
float: right;
position: relative;
z-index: 1000;
}
@media screen and (max-width: 991px) {
.site-nav {
height: 5.625rem;
}
}
.site-nav ul.nav-off-canvas {
/* Off canvas mobile menu */
margin: 0;
padding: 0;
display: block;
background: #122748;
}
@media screen and (min-width: 992px) {
.site-nav ul.nav-off-canvas {
height: auto !important;
}
}
@media screen and (max-width: 991px) {
.site-nav ul.nav-off-canvas {
position: fixed;
top: 0;
left: -1000px;
bottom: auto;
height: 130%;
width: 100%;
max-width: 15.625rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
overflow: hidden;
overflow-y: auto;
box-shadow: 0 0 2.6875rem rgba(2, 3, 3, 0.84);
transition: 300ms linear;
transition-property: opacity, visibility;
cursor: pointer;
}
.site-nav ul.nav-off-canvas > li:last-child {
margin-bottom: 100%;
}
}
@media screen and (max-width: 400px) {
.site-nav ul.nav-off-canvas {
max-width: 12.5rem;
}
}
.site-nav ul.nav-off-canvas > li {
margin: 0;
padding: 0;
float: left;
display: table;
height: 5.625rem;
position: relative;
}
@media screen and (max-width: 991px) {
.site-nav ul.nav-off-canvas > li {
width: 100%;
height: auto;
display: block;
clear: both;
line-height:2;
}
}
@media screen and (min-width: 992px) {
.site-nav ul.nav-off-canvas > li:hover .site-sub-menu {
opacity: 1;
visibility: visible;
}
}
.site-nav ul.nav-off-canvas > li.active, .site-nav ul.nav-off-canvas > li:hover {
/* Active and hover */
}
.site-nav ul.nav-off-canvas > li.active > a, .site-nav ul.nav-off-canvas > li:hover > a {
color: #FFFFFF;
}
.site-nav ul.nav-off-canvas > li.active > a:after, .site-nav ul.nav-off-canvas > li:hover > a:after {
width: 100%;
}
.site-nav ul.nav-off-canvas > li:last-child > a {
padding-right: 0;
}
.site-nav ul.nav-off-canvas > li > a {
font-size:13px;
font-weight:500;
line-height:2;
text-transform: capitalize;
color: white;
display: table-cell;
vertical-align: middle;
padding: 0 18px;
letter-spacing: 0.03125rem;
position: relative;
}
@media screen and (max-width: 1199px) {
.site-nav ul.nav-off-canvas > li > a {
padding-left: .9rem;
padding-right: .9rem;
}
}
@media screen and (max-width: 991px) {
.site-nav ul.nav-off-canvas > li > a {
display: inline-block;
width: auto;
padding: 0.125rem 1.875rem;
}
}
.site-nav ul.nav-off-canvas > li > a:after {
content: "";
position: relative;
display: block;
top: -0.3125rem;
height: 1px;
width: 0;
margin: 0 auto;
background: #FFFFFF;
transition: 300ms linear;
transition-property: width;
}
.site-nav ul.nav-off-canvas .offCanvasClose {
/* Off canvas close button */
display: none;
}
@media screen and (max-width: 991px) {
.site-nav ul.nav-off-canvas .offCanvasClose {
display: block;
position: fixed;
bottom: 0;
left: auto;
color: red;
height: 3.125rem;
width: 3.125rem;
overflow: hidden;
text-align: center;
line-height: 3.125rem;
cursor: pointer;
font-size: 1.25rem;
transition: 300ms linear;
transition-property: background, color;
}
.site-nav ul.nav-off-canvas .offCanvasClose:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 100px solid #0A2B4A;
border-right: 100px solid transparent;
transition: 300ms linear;
transition-property: border-bottom-color;
}
.site-nav ul.nav-off-canvas .offCanvasClose:hover {
color: white;
background: none;
}
.site-nav ul.nav-off-canvas .offCanvasClose:hover:before {
border-bottom-color: #d4e9ff;
}
.site-nav ul.nav-off-canvas .offCanvasClose i.fa {
display: block;
line-height: 3.125rem;
position: relative;
top: 0.625rem;
left: -0.625rem;
}
}
.site-nav .site-sub-menu {
/* Sub menu */
position: absolute;
top: 100%;
left: 0;
right: auto;
margin: 0;
padding: 0.625rem 1.875rem 1.25rem;
background: #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;
text-transform: capitalize;
letter-spacing: 0.0625rem;
position: relative;
padding: 0.125rem 0;
}
.site-nav .site-sub-menu a:after {
content: "";
position: relative;
display: block;
top: -0.3125rem;
height: 1px;
width: 0;
margin: 0 auto;
background: #2b8dd9;
transition: 300ms linear;
transition-property: width;
}
/* MOBILE VIEW NAVIGATION BUTTON */
.nav-mobile {
color: white;
display: none;
}
.nav-mobile:hover {
color: #48cafe;
}
@media screen and (max-width: 991px) {
.nav-mobile {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 1.875rem;
text-align: center;
color: white;
background: #122748;
height: 3.125rem;
width: 3.4375rem;
line-height: 3.125rem;
cursor: pointer;
margin-top: auto;
margin-bottom: auto;
transition: 300ms linear;
transition-property: color;
border-radius:6px;
}
.nav-mobile i.fa {
line-height: 3.125rem;
}
}
/*-----------------------------------------------------------------------------------
[Slider] (Section)
# Slider (Wrapper)
# Caption
# Pagination
# Navigation
# Typography
# Button
-----------------------------------------------------------------------------------*/
/* Header slider wrapper */
.header-slider {
/* HEADER SLIDER */
padding: 0;
display: block;
width: 100%;
clear: both;
min-height: 100px;
position: relative;
height: 950px;
max-width: 100%;
margin: 0 auto;
font-family: inherit;
z-index: 1;
}
.header-slider ul.seq-canvas,
.header-slider ul.seq-canvas > * {
/* Reset */
margin: 0;
padding: 0;
list-style: none;
display: block;
}
.header-slider .seq-canvas {
/* Make the canvas the same dimensions as the container and prevent lines from
wrapping so each step can sit side-by-side */
position: absolute;
height: 100%;
width: 100%;
overflow: hidden;
display: block !important;
max-width: 1400px;
margin: 0 auto !important;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.header-slider .seq-canvas > li {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
height: 100%;
width: 100%;
clear: both;
text-align: center;
z-index: 1;
}
.header-slider .seq-canvas > li .bg-img {
transform: translateX(-2000px);
transition: transform 2000ms ease;
max-width: 100%;
background: no-repeat 90% bottom;
background-size: 558px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
}
@media screen and (max-width: 991px) {
.header-slider {
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: #315db7;
}
.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;
}
.mtb {margin-top:0px; margin-bottom:0px; float:left;}
}
.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-button1 {
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;
background: rgba(246,174,0,1);
background: -moz-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(246,174,0,1)), color-stop(100%, rgba(255,126,59,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
}
.header-slider .slide-button:hover {
background: #2f94d9;
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(10,61,155,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(10,61,155,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(10,61,155,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);
}
.header-slider .slide-button1:hover {
background: #ff7e3b;
color: #FFFFFF;
transition:all ease .5s;
border:none;
background: rgba(246,174,0,1);
background: -moz-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(246,174,0,1)), color-stop(100%, rgba(255,126,59,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
-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: #2f94d9;
color: #FFFFFF;
transition:all ease .5s;
border:none !important;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(10,61,155,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(10,61,155,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);
}
@media screen and (max-width: 767px) {
.header-slider .slide-button {
margin-bottom: 0;
}
}
/*-----------------------------------------------------------------------------------
Static Banner
-----------------------------------------------------------------------------------*/
.static-bnn {
position:absolute;
top:25%;
}
.bnn-caption {
float:left;
width:100%;
position:relative;
left:-15px;
padding:50px 0 0 0;
}
.bnn-caption h1 {
font-size:160px;
color:#FFFFFF;
font-weight:600;
letter-spacing:-2px;
line-height:1;
padding:0;
margin:0;
}
.bnn-caption h2 {
font-size:28.2px;
color:#FFFFFF;
font-weight:normal;
line-height: 25px;
padding:0;
margin-left:-4px;
}
.bnn-caption p {
color: white;
font-family: inherit;
font-size: 18px;
font-weight: 500;
margin-bottom: 1.875em;
white-space: pre-line; margin-left:-19px;
}
.static-bnn .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-bnn .slide-button1 {
min-width: 15em;
padding: 0 2.5em;
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;
background: rgba(246,174,0,1);
background: -moz-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(246,174,0,1)), color-stop(100%, rgba(255,126,59,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
-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);
margin: 1.875em 1.25em 1.875em 0;
}
.static-bnn .slide-button:hover {
background: #2f94d9;
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(10,61,155,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(10,61,155,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(10,61,155,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);
}
.static-bnn .slide-button1:hover {
background: #2f94d9;
color: #FFFFFF;
transition:all ease .5s;
border:1 px solid #fff;
background: none
-webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
}
.static-bnn-image {
width:470px;
height:633px;
text-align:right;
position:relative;
right:0;
left:140px;
top:0;
}
@media screen and (max-width: 1199px) {
.static-bnn {
top:20%;
}
.static-bnn-image {
left:0;
}
.bnn-caption {
padding:90px 0 0 0;
}
.bnn-caption h1 {
font-size:120px;
}
.bnn-caption h2{
font-size:22px;
}
.bnn-caption p{
line-height:1.7;
white-space:inherit;
font-weight:normal;
padding-top:20px;
}
}
@media screen and (max-width: 991px) {
.static-bnn {
top:10%;
}
.bnn-caption {
padding:0;
}
.bnn-caption h1 {
font-size:100px;
text-align:center;
}
.bnn-caption h2{
font-size:30px;
text-align:center;
}
.bnn-caption p{
line-height:1.7;
white-space:inherit;
font-weight:normal;
padding:10px 0 0 7px;
text-align:center;
margin-bottom:0;
}
.static-bnn-image {
width:100%;
text-align:center;
background-size:300px;
background-position:center top;
margin:30px 0 0 0;
}
.static-bnn .bnn-caption {
text-align:center;
}
#particles-js{ min-height:880px}
}
@media screen and (max-width: 767px) {
.static-bnn {
top:15%;
}
.bnn-caption h1 {
font-size:70px;
text-align:center;
}
.bnn-caption h2{
font-size:17.5px;
text-align:center;
}
.bnn-caption p{
line-height:1.7;
white-space:inherit;
font-weight:normal;
padding:10px 0 0 7px;
text-align:center;
margin-bottom:0; font-size:14px;
}
.static-bnn .slide-button {
margin:10px 0;
}
.static-bnn-image { float:left;}
}
/*-----------------------------------------------------------------------------------
[Store Icons Section] (Section)
# Store Icons (wrapper)
# .align-center (class)
# Images
# Icons
# Typography (h5, h6)
-----------------------------------------------------------------------------------*/
/* STORE ICONS */
.site-store-icons, .site-download-icons {
margin: 0;
padding: 0;
display: block;
width: 100%;
clear: both;
text-align: center;
position: relative;
height: 0;
z-index: 10;
}
@media screen and (max-width: 991px) {
.site-store-icons, .site-download-icons {
height: auto;
/*background: #E5E8ED;*/
padding: 1.25rem 0;
}
}
.site-store-icons .align-center, .site-download-icons .align-center {
/* Align center class */
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
width: 100%;
text-align: center;
font-size: 0;
}
@media screen and (max-width: 991px) {
.site-store-icons .align-center, .site-download-icons .align-center {
position: relative;
}
}
.site-store-icons a, .site-download-icons a {
background-color: #FFFFFF;
position: relative;
padding: 1.625rem 3.125rem 1.5625rem 3.75rem;
transition: 300ms linear;
transition-property: background;
border-right: 0.25rem solid #1f3542;
}
.site-store-icons a:last-child, .site-download-icons a:last-child {
border-right: none;
}
.site-store-icons a:hover, .site-download-icons a:hover {
transition:all ease .5s;
/*background: rgba(70,200,255,1);
background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(10,61,155,1)));
background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 ); */
background: rgba(246,174,0,1);
background: -moz-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(246,174,0,1)), color-stop(100%, rgba(255,126,59,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(246,174,0,1) 0%, rgba(255,126,59,1) 100%);
-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);
}
.white-download-icons:hover h5 {
color:#FFFFFF;
}
.white-download-icons:hover h6 {
color:#FFFFFF;
}
.white-download-icons:hover i.fa {color:#1d2b97; font-size:27px;}
.white-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: 0;
}
@media screen and (max-width: 767px) {
.site-amazing-features {
background: none;
}
}
.site-amazing-features .features {
/* Features */
max-width: 19.75rem;
display: inline-block;
margin-bottom: 2.225rem;
position: relative;
cursor: pointer;
z-index: 10;
padding:20px 30px 0px 30px; border:1px solid #e6f0fd;
margin-top:-15px; max-height:155px;
-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);
border-radius:12px;
}
.site-amazing-features .features:hover {
/* Features mouse hover */
padding:20px 30px 0px 30px;
transition:all ease .5s;
-webkit-box-shadow: 0px rgba(24,30,110,0.31);
-moz-box-shadow: 0px rgba(24,30,110,0.31);
box-shadow: 0px rgba(24,30,110,0.31);
animation: bounce 1s;
}
.site-amazing-features .features h5 { font-size:16px; display:block; width:100%; height:20px; margin-bottom:0px; color:#315db7}
.site-amazing-features .features h5.hfixtop { margin-top:-30px; z-index:10px; padding-bottom:10px;}
.site-amazing-features .features h4 { font-size:20px; color:#315db7}
.site-amazing-features .features:hover h5, .site-amazing-features .features:hover h4 {
color: #315db7;
}
.site-amazing-features .mtt .features { margin-top:45px; max-height:210px;}
.site-amazing-features .mtt .features h4 { margin-top:-30px}
.site-amazing-features .features figure {
/* filter: url(~"data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; */
width:100%; display:block; margin:0px auto;
}
.site-amazing-features .features:hover figure {
/*border-color: #2b8dd9;
box-shadow: 0 0 0.938rem rgba(2, 3, 3, 0.19);*/
/*filter: none;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
cursor: pointer;
*/
filter: url(~"data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray; z-index:1;
}
.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;*/
}
.site-amazing-features .features figure .img-responsivef {width:95px; max-width:95px; height:95px;}
@media screen and (max-width: 767px) {
.site-amazing-features .features.move {
top: 0;
}
}
.site-amazing-features .features figure {
/* Image */
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 2.25rem;
background: white;
transition: 300ms linear;
transition-property: border-color, box-shadow;
position: relative;
z-index: 1;
box-shadow: none;
}
.site-amazing-features .features figure:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: block;
height: 100%;
background: white;
border-radius: 6.25rem;
border: 0.5rem solid white;
z-index: -1;
transition: 300ms linear;
transition-property: background;
}
.site-amazing-features span, .site-amazing-features i.fa {
/* Icons */
display: inline-block;
font-size: 3rem;
line-height: 6.25rem;
color: #6f6f6f;
transition: 300ms linear;
transition-property: color;
}
.site-amazing-features h5 {
/* Heading */
color: #59687c;
font-family: inherit;
font-size: 1.25rem;
font-weight: 600;
line-height: 0.875rem;
margin: 0 0 1.75rem;
padding: 0;
display: block;
clear: both;
width: 100%;
transition: 300ms linear;
transition-property: color;
}
.site-amazing-features p {
/* Paragraph */
color: #708198;
font-family: inherit;
font-size: 15px;
font-weight: normal;
line-height: 1.625rem;
margin: 0;
padding: 0;
display: block;
clear: both;
width: 100%;
}
.site-amazing-features .device {
/* Device holder */
margin-top: 1rem;
}
/*-----------------------------------------------------------------------------------
[About App] (Section)
# About App (wrapper)
# Typography (h1, h3, h4, p)
# Device image
# Section (image, icons)
# Carousel Slider
# carousel navigation
# carousel pagination
-----------------------------------------------------------------------------------*/
.about-half-coll-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-coll-section-image {
width:100%;
height:auto;
position:absolute;
top:110px;
}
/* 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:#315db7 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-coll-section {
}
.about-half-coll-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-coll-section {
padding:80px 0;
}
.half-coll-left-section {
float:left;
width:100%;
}
.half-coll-right-section {
float:left;
width:100%;
}
.left-heading-icon {
float:left;
width:100%;
text-align:left;
}
.two-coll-content {
float:left;
width:100%;
text-align:left;
}
.two-coll-content p{
float:left;
width:100%;
text-align:left;
font-size:15px;
color:#708198;
line-height:2;
font-weight:normal;
}
.highlited-text {
color:#315db7;
font-weight:700px;
letter-spacing:1px;
}
.half-coll-padding {
padding:120px 0 0 0;
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
.two-coll-section {
padding:80px 0;
}
.half-coll-padding {
padding:0;
}
.two-coll-content p {
padding-bottom:50px;
}
}
@media screen and (max-width: 767px) {
.two-coll-section {
padding:80px 0;
}
.half-coll-padding {
padding:0;
}
}
@media screen and (max-width: 639px) {
.two-coll-section {
padding:80px 0 0 0;
}
.half-coll-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: #315db7;
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(16,33,139,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(16,33,139,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ccebc', endColorstr='#315db7', 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(10,61,155,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(10,61,155,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
}
}
@media screen and (max-width: 767px) {
.site-how-it-works .swiper-pagination-bullet {
/* Hide the icon on mobile view */
}
.site-how-it-works .swiper-pagination-bullet span {
display: none;
}
}
/*-----------------------------------------------------------------------------------
[More Features] (Section)
# More Features (wrapper)
# Feature Image
# Featured Box
# Align right (class)
# Align left (class)
# Move left (class)
# Move right (class)
# Icons
# Typography (h5, p)
-----------------------------------------------------------------------------------*/
/* More features wrapper */
.heading-text {
float:left;
width:100%;
margin-bottom:60px;
margin-top:-30px;
}
.heading-text p {
float:left;
width:100%;
text-align:center;
font-size:16px !important;
line-height:1.5;
white-space:pre-line;
}
.white {
color:#FFFFFF;
}
.site-more-features {
margin: 0;
display: block;
width: 100%;
clear: both;
}
@media screen and (max-width: 991px) {
.site-more-features {
}
}
.site-more-features .featured-img {
/* featured image */
padding: 0;
display: block;
margin: 0 auto;
overflow: hidden;
text-align: center;
max-width: 18.125rem;
}
.site-more-features .featured-img img {
display: inline-block;
vertical-align: middle;
}
.containerlaptop {position:relative; display: inline-block;
vertical-align: middle; height: 0px; margin-top:0px;
}
.mapcontaineranim {position:relative; width:300px; height:400px;}
.containerani {}
.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 figure {
background:#fff;
box-shadow: 1px 1px 1px #0c1d69,
2px 2px 1px #0c1d69,
3px 3px 1px #0c1d69,
4px 4px 1px #000;
}
.site-more-features .feature:hover figure {
/* border-color: #2a8bd7;
box-shadow: 0 0 0.938rem rgba(2, 3, 3, 1);*/
}
.site-more-features .feature:hover figure:before {
/*background: url(../images/lohnbg.png) left top no-repeat;*/
}
/*
.site-more-features .feature:hover span, .site-more-features .feature:hover i.fa {
border-color:none;
color: white;
box-shadow: 0 0 15px rgba(2, 3, 3, 0.19);
background: #2f94d9;
color: #FFFFFF;
transition:all ease .5s;
border:none !important;
background: rgba(70,200,255,1);
background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(10,61,155,1)));
background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
}
.site-more-features .feature:hover span:after, .site-more-features .feature:hover i.fa:after {
background: #2b8dd9;
}*/
.site-more-features .feature.align-right {
/* Align right class */
text-align: right;
padding-right: 5.25rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-right {
padding-right: 7.5rem;
padding-left: 0;
}
}
@media screen and (max-width: 991px) {
.site-more-features .feature.align-right {
text-align: left;
padding-right: 0;
padding-left: 7.5rem;
}
}
.site-more-features .feature.align-left {
/* Align left class */
text-align: left;
padding-right: 2.5rem;
padding-left: 5.25rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-left {
padding-right: 0;
padding-left: 7.5rem;
}
}
.site-more-features .feature.align-left.move {
/* move left class */
left:0;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-left.move {
left: 0;
}
}
.site-more-features .feature.align-left figure {
right: auto;
left: -1.25rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-left figure {
left: 0;
}
}
.site-more-features .feature.move {
/* move right class */
right:0;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.move {
right: 0;
}
}
.site-more-features .feature figure {
/* icons */
position: absolute;
top: 0;
right: -1.25rem;
bottom: 0;
display: block;
overflow: visible;
width: 5.25rem;
height: 5.25rem;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 62.5rem;
transition: 300ms linear;
transition-property: border-color, box-shadow;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature figure {
right: 0;
}
}
@media screen and (max-width: 991px) {
.site-more-features .feature figure {
right: auto;
left: 0;
}
}
.site-more-features .feature figure:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 62.5rem;
/*border: 0.375rem solid white;*/
transition: 300ms linear;
transition-property: background;
}
.site-more-features h5 {
/* Typography */
color: #FFFFFF;
margin-bottom: 0.9375rem;
margin-top: 0.3125rem;
transition: 300ms linear;
transition-property: color;
font-family: inherit;
font-size: 19px;;
font-weight: 600;
}
.site-more-features p {
color: #FFFFFF;
font-family: inherit;
font-size: 14px;;
font-weight: normal;
line-height: 1.625rem;
}
.site-more-features figure {
/* Image */
overflow: hidden;
}
.site-more-features figure span, .site-more-features figure i.fa {
/* Icons */
text-align: center;
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: hidden;
color: #FFFFFF;
font-size: 2.5rem;
width: 100%;
height: 100%;
display: block;
border-radius: 62.5rem;
line-height: 5.25rem;
transition: 300ms linear;
transition-property: color;
}
.feature.hfix { min-height:303px;}
/*-----------------------------------------------------------------------------------
[whitepaper] (Section)
-----------------------------------------------------------------------------------*/
/* whitepaper section wrapper */
.site-download {
margin: 0;
display: block;
clear: both;
background: #2B8DD9 url("../images/whitepaper-bg.jpg") no-repeat center;
background-size: cover;
}
@media screen and (max-width: 991px) {
.site-download {
padding-bottom: 0;
/*background: #2B8DD9;*/
}
.featured-img .containerlaptop { margin-top:0px;
}
}
/*-----------------------------------------------------------------------------------
[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: bottom;
}
.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;
box-shadow: 1px 1px 1px #d5d8dc,
2px 2px 1px #d5d8dc,
3px 3px 1px #d5d8dc,
4px 4px 1px #b3b7bd;
}
.panel-group .panel-heading {
/* Panel heading */
background-color: #315db7;
border: none;
padding: 0;
margin: 0;
border-radius: 0.25rem ;
}
.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: 167px;
min-height: 77px;
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 {
margin-right: 3.75rem;
}
.panel-group .mCSB_dragger_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: #315db7;
}
/*-----------------------------------------------------------------------------------
[Team] (Section)
-----------------------------------------------------------------------------------*/
/* Team section wrapper */
.site-team {
margin: 0;
display: block;
width: 100%;
clear: both;
background-color: #FFFFFF;
}
.site-team .main-heading-text h4{
float:left;
width:100%;
text-align:center;
font-size:22px;
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; margin-bottom:27px;
}
.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: 0.25rem;
position: relative;
}
.site-team figure img {
max-width: 100%;
display: inline-block;
border-radius:10px 10px 0 0;
filter: url(~"data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: gray;
border-radius:8px;
}.site-team figure img:hover {
filter: none;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
}
.site-team h5 {
/* Typography */
color: #315db7;
font-family: inherit;
font-size: 19px;
font-weight: 600;
display: block;
float: left;
width: 100%;
clear: both;
margin-bottom: 0.15rem;
margin-top: 0.75rem;
}
.site-team h6 {
color: #708198;
font-family: inherit;
font-size:14px;
font-weight: 400;
margin-bottom: 0.65rem;
width: 100%;
}
.site-team p {
color: #708198;
font-family: inherit;
font-size:15px;
font-weight: normal;
line-height: 1.2;
width: 100%;
overflow: hidden;
margin-bottom: 1.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;
}
.site-box figure { position:relative; overflow:visible;}
.site-box figure .flagteam { position:absolute; top:10px; right:10px; width:21px; height:13px; z-index:100; background-repeat:no-repeat; background-style: cover;}
[info-data-badge] {
position: relative;
z-index: 2;
cursor: default;
}
[info-data-badge]:before,
[info-data-badge]:after {
visibility: hidden;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
pointer-events: none;
}
/* Position tooltip above the element */
[info-data-badge]:before {
position: absolute;
bottom: 115%;
left: 0;
margin-bottom: 5px;
padding: 8px 10px;
white-space: nowrap;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: rgba(30, 58, 157, 1);
color: #fff;
content: attr(info-data-badge);
font-size: 12px;
line-height: 1.2;
text-align:left;
text-transform: none;
font-weight: normal;
}
@media (max-width: 740px) {
.site-box figure .flagteam { position:absolute; top:30px; right:30px; width:31px; height:13px; z-index:10; background-repeat:no-repeat; background-style: cover;}
}
[info-data-badge]:after {
position: absolute;
bottom: 115%;
left: 12px;
width: 0;
margin-top:-5px;
border-top: 5px solid #000;
border-top: 5px solid rgba(30, 58, 157, 1);
border-right: 5px solid transparent;
border-left: 5px solid transparent;
content: " ";
font-size: 0;
line-height: 0;
}
[info-data-badge].blogger_badge:before {
left:-10px;
}
[info-data-badge].blogger_badge:after {
left: 2px;
}
[info-data-badge].blogger_badge_profile:before {
left:-10px;
font-size: 12px;
line-height: 1.2;
font-weight:bold;
text-transform:uppercase;
}
[info-data-badge].blogger_badge_profile:after {
left: 6px;
}
[info-data-badge].bitcoinwiki-no:before {
left:auto;
right:-58px;
background-color:#193297;
}
[info-data-badge].bitcoinwiki-no:after {
left: 2px;
border-top-color:#193297;
}
[info-data-badge]:hover:before,
[info-data-badge]:hover:after {
visibility: visible;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
/*-----------------------------------------------------------------------------------
[Testimonial] (Section)
# Testimonial (wrapper)
# Quote
# Images
# Typography (p, h5)
# Carousel pagination
# Carousel navigation
# Carousel container
-----------------------------------------------------------------------------------*/
/* Testimonial wrapper */
.advisorsblock {
margin: 0;
display: block;
width: 100%;
clear: both;
overflow: visible;
padding-bottom:150px;
position: relative;
}
@media screen and (max-width: 991px) {
.advisorsblock {
}
}
.advisorsblock .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) {
.advisorsblock .testimonial-quote {
background-color: #2b8dd9;
}
}
.advisorsblock .testimonial-quote span {
display: inline-block;
}
.advisorsblock 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;
}
.advisorsblock figure img {
border-radius: 12.5rem;
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.advisorsblock 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;
}
.advisorsblock h5 {
color: #315db7;
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 .addisor-specs {
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;
}
.advisorsblock .swiper-pagination {
/* Carousel pagination */
margin-top:20px;
}
.advisorsblock .swiper-button-prev, .advisorsblock .swiper-button-next {
/* Carousel navigation */
margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
.advisorsblock .swiper-button-prev, .advisorsblock .swiper-button-next {
left: 0;
}
}
@media screen and (max-width: 767px) {
.advisorsblock .swiper-button-prev, .advisorsblock .swiper-button-next {
margin-top: 3.75rem;
top: 0;
}
.advisorsblock figure {
text-align:center;
clear:both;
}
.advisorsblock h5 {
width:100%;
text-align:center;
padding-left:0;
clear:both;
}
.swiper-slide .addisor-specs {
width:100%;
text-align:center;
padding-left:0;
clear:both;
}
}
@media screen and (min-width: 768px) {
.advisorsblock .swiper-button-next {
left: auto;
right: 0;
}
}
.advisorsblock .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: #315db7;
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: #315db7;
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 #315db7;
}
.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(10,61,155,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(10,61,155,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(10,61,155,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: #315db7;
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 */
.site-amazing-features .features:hover {
animation: bounce 1s;
}
.latest-blog .blog-post-box {
float:left;
width:100%;
border-radius:12px;
background:#FFFFFF;
position:relative;
z-index:1000;
margin-top:35px;
-webkit-box-shadow: 0px 0px 22px -7px rgba(24,30,110,0.26);
-moz-box-shadow: 0px 0px 22px -7px rgba(24,30,110,0.26);
box-shadow: 0px 0px 22px -7px rgba(24,30,110,0.26);
}
.blog-post-content {
float:left;
width:100%;
padding:30px;
}
.latest-blog figure {
float:left;
width:100%;
}
.latest-blog figure img {
float:left;
text-align:center;
width:100%;
border-radius:10px 10px 0 0;
}
.latest-blog ul {
float:left;
text-align:left;
width:100%;
padding:0px;
margin:0;
}
.latest-blog ul li {
float:left;
text-align:left;
padding:0 15px 0 0;
margin:0;
list-style:none;
font-size:13px;
color:#a0aec0;
}
.latest-blog a {
display:inherit;
}
.latest-blog a h4 {
float:left;
width:100%;
font-size:22px;
font-weight:600;
color:#516074;
text-align:left;
padding:20px 0 5px 0;
margin:0;
}
.latest-blog span {
float:left;
width:100%;
font-size:12px;
font-weight:600;
color:#516074;
text-align:left;
padding:0 0 5px 0;
margin:0;
}
.blog-post-box p {
float:left;
width:100%;
font-size:15px;
font-weight:normal;
color:#708198;
text-align:left;
padding:20px 0 5px 0;
margin:0;
line-height:1.8;
}
.latest-blog .blog-more-button {
float:left;
width:100%;
font-size:13px;
font-weight:700;
color:#FFFFFF;
text-transform:uppercase;
text-align:left;
letter-spacing:1px;
padding:40px 0 20px 30px;
margin:0;
line-height:1.8;
border-radius:0 0 12px 12px;
margin-top:-24px;
background: rgba(16,33,139,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(16,33,139,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ccebc', endColorstr='#315db7', 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 */
.lohn-funds {
margin: 0;
display: block;
width: 100%;
background:url(../images/statistic-bg.jpg) no-repeat top center;
background-size:cover;
background-attachment:fixed;
padding:50px 0;
}
.site-number{
float:left;
width:100%;
text-align:center;
}
@media screen and (max-width: 767px) {
.lohn-funds {
padding: 3.125rem 1.25rem;
}
}
.site-number {
/* Number (class) */
float:left;
width:100%;
text-align:center;
}
@media screen and (max-width: 767px) {
.site-number {
margin-top: 1.875rem;
margin-bottom: 1.875rem;
}
}
.site-number i.fa {
/* Icons */
color: #2b8dd9;
font-weight: 400;
text-transform: uppercase;
text-align: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: 0;
display: block;
width: 2.125rem;
height: 100%;
font-size: 2.375rem;
line-height: 2.8125rem;
vertical-align: middle;
}
.site-number h5 {
/* Typography */
float:left;
width:100%;
text-align:center;
color: #FFFFFF;
font-size:50px;
font-weight:700;
clear: both;
width: 100%;
line-height:2;
}
.site-number p {
float:left;
width:100%;
text-align:center;
color: #FFFFFF;
font-size:19px;
font-weight:500;
text-transform: capitalize;
margin: 0;
padding: 0;
clear: both;
}
/*-----------------------------------------------------------------------------------
[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:240px; padding-top:-100px;
}
@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:40px 40px 27px 40px;
margin-top:30px;
}
.site-quick-support .site-info.form {
/* info (class) */
border:none;
}
.site-quick-support .site-box {
/* box (class) */
clear: both;
position: relative;
z-index: 10;
padding: 1.25rem 0;
width:100%;
}
.site-quick-support h5 {
font-size:25px;
font-weight:600;
color:#FFFFFF;
}
.site-quick-support .site-info p {
float:left;
width:100%;
font-size:15px;
font-weight:normal;
color:#FFFFFF;
line-height:1.7;
padding:40px 0 40px 0;
}
.site-quick-support .site-box-row h6{
float:left;
font-size:21px;
color:#FFFFFF;
font-weight:normal;
line-height:1;
padding:0;
margin:0;
}
.site-quick-support .site-box-row {
float:left;
width:100%;
padding-bottom:50px;
}
.site-quick-support .site-box-row p {
float:left;
font-size:14px;
text-align:left;
padding:0 0 0 52px;
margin:0;
line-height:0;
}
@media screen and (max-width: 1199px) {
.site-quick-support .site-box {
padding-left: 3.125rem;
padding-right: 3.125rem;
}
}
@media screen and (max-width: 991px) {
.site-quick-support .site-box {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.site-quick-support .site-info {
border-right:none;
padding:30px;
}
.site-quick-support .contact-box {
height:auto;
}
}
@media screen and (max-width: 767px) {
.site-quick-support .site-box {
display: block;
width: 100%;
}
.site-quick-support .site-info {
border-right:none;
padding:30px;
}
}
@media screen and (max-width: 639px) {
.site-quick-support .site-info {
border-right:none;
padding:30px;
}
}
@media screen and (max-width: 479px) {
.site-quick-support .site-info {
border-right:none;
padding:30px 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;
width:38px;
height:38px;
color: #FFFFFF;
font-size:18px;
font-weight: 400;
line-height:2;
text-align: center;
border:#FFFFFF solid 1px;
border-radius:100%;
margin-right:15px;
}
.site-quick-support p, .site-quick-support address {
/* Typography */
float:left;
color: #FFFFFF;
font-family: inherit;
font-size:14px;
font-weight: normal;
padding: 1.125rem 0;
width: 100%;
font-style: normal;
margin:0;
padding:0 0 0 52px;
transition: 300ms linear;
transition-property: color;
line-height:1.5;
}
.site-quick-support p:hover, .site-quick-support address:hover {
color: #FFFFFF;
}
.site-contact-form {
/* CONTACT FORM */
padding:40px 0 0 0;
display: block;
width: 100%;
clear: both;
margin:0;
}
.site-contact-form table {
width: 100%;
}
@media screen and (max-width: 767px) {
.site-contact-form {
max-width:100%;
margin-left: auto;
margin-right: auto;
padding-left:0;
padding-right:0;
}
.site-contact-form table, .site-contact-form tr, .site-contact-form td, .site-contact-form th, .site-contact-form tbody {
display: block;
width: 100%;
}
}
.site-contact-form input, .site-contact-form textarea {
/* Input fields */
width: 100%;
height:45px;
background-color:inherit;
padding: 0;
color: #FFFFFF !important;
font-family: inherit;
font-size:14px;
font-weight:normal;
line-height:1.5;
border-bottom:#FFFFFF solid 1px;
box-sizing: border-box;
transition: 300ms linear;
transition-property: border-color;
display: block;
margin: 0;
border-top:none;
border-left:none;
border-right:none;
}
.site-contact-form input:focus, .site-contact-form textarea:focus {
border-color: #80d37f;
}
.site-contact-form textarea {
height:100px;
resize: none;
position: relative;
top: 0.0625rem;
}
.site-contact-form input[type=submit], .site-contact-form button[type=submit] {
/* Input submit field */
}
.site-contact-form input[type=submit] i.fa, .site-contact-form button[type=submit] i.fa {
display: none;
padding: 0;
color: white;
line-height: normal;
font-size: 1rem;
transition: 300ms linear;
transition-property: color;
margin: 0 0 0 0.625rem;
}
.site-contact-form input[type=submit]:hover i.fa, .site-contact-form button[type=submit]:hover i.fa {
color: #2b8dd9;
}
@media screen and (max-width: 767px) {
.site-contact-form input[type=submit], .site-contact-form button[type=submit] {
width: 100%;
}
}
.site-contact-form label {
margin-bottom: 0.875rem;
display: block;
margin-right:0;
color:#FFFFFF !important;
}
.site-contact-form label.last {
/* last (class) */
margin-right: 0;
}
.site-contact-form label.move {
/* Move (class) */
margin-top: 1.25rem;
display: inline-block;
margin-right: 0;
}
@media screen and (max-width: 767px) {
.site-contact-form label.move {
display: block;
margin-top: 1.875rem;
}
}
@media screen and (max-width: 767px) {
.site-contact-form label {
margin-right: 0;
}
}
/*-----------------------------------------------------------------------------------
[Subscribe] (Section)
# Subscribe Section (wrapper)
# .site-box (class)
# Typography
# Input Fields
# Form (class)
# .no-space (class is used to remove the element left or right side padding)
-----------------------------------------------------------------------------------*/
/* Subscribe section wrapper */
.site-subscribe {
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], .site-subscribe select {
/* 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 0 4px 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], .site-subscribe select {
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;*/
text-align:center;
transition: 300ms linear;
transition-property: background, color;
border: 0.063rem solid white;
margin-top:10px;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(10,61,155,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(10,61,155,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
}
.site-subscribe input[type=submit]:hover {
background: #315db7;
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: 60px 0 40px 0;
display: block;
width: 100%;
clear: both;
text-align: center;
background: #313a47;
color: white;
}
.site-social-icons {
width: 100%;
clear: both;
padding:50px 0 0 0;
}
.site-social-icons ul li { display:inline;}
.site-social-icons a {
width: 3rem;
height: 3rem;
background:#505762;
border-radius: 12.5rem;
position: relative;
text-align: center;
margin: 0.1875rem;
transition: 300ms linear;
transition-property: background, color, border-color;
}
.site-social-icons a:hover {
color: white;
transition:all ease .5s;
background: rgba(16,33,139,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(16,33,139,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(16,33,139,1) 0%, rgba(49,93,183,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0ccebc', endColorstr='#315db7', GradientType=1 );
/* IE6-9 fallback on horizontal gradient */
}
.site-social-icons i.fa {
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 {
color: #708198;
font-family: inherit;
font-size:13px;
font-weight: 400;
line-height:1.5;
width: 100%;
clear: both;
margin-top: 1.25rem;
}
@media screen and (max-width: 991px) {
.site-footer {
background: #1F3542;
padding:20px 0;
margin-top:-90px;
}
.site-download-icons {
margin:30px 0;
padding:0;
}
}
/*-----------------------------------------------------------------------------------
[Custom Scroll Bar]
# Custom scroll bar (wrapper)
-----------------------------------------------------------------------------------*/
/* Custom scroll bar wrapper */
.mCustomScrollBox {
/* contains plugin's markup */
position: relative;
overflow: hidden;
height: 100%;
max-width: 100%;
outline: none;
direction: ltr;
}
.mCSB_container {
/* contains the original content */
overflow: hidden;
width: auto;
height: auto;
}
/* VERTICAL SCROLLBAR
y-axis */
.mCSB_inside > .mCSB_container {
margin-right: 1.5625rem;
}
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
margin-right: 0;
}
/* non-visible scrollbar */
.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
/* RTL direction/left-side scrollbar */
margin-right: 0;
margin-left: 1.875rem;
}
.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
margin-left: 0;
}
/* RTL direction/left-side scrollbar */
.mCSB_scrollTools {
/* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
position: absolute;
width: 1.5rem;
height: auto;
left: auto;
top: 0;
right: 0;
bottom: 0;
}
.mCSB_outside + .mCSB_scrollTools {
right: -1.625rem;
}
/* scrollbar position: outside */
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
/* RTL direction/left-side scrollbar */
right: auto;
left: 0;
}
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
left: -1.625rem;
}
/* RTL direction/left-side scrollbar (scrollbar position: outside) */
.mCSB_scrollTools .mCSB_draggerContainer {
/* contains the draggable element and dragger rail markup */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: auto;
}
.mCSB_scrollTools a + .mCSB_draggerContainer {
margin: 1.25rem 0;
}
.mCSB_scrollTools .mCSB_draggerRail {
width: 0.125rem;
height: 100%;
margin: 0 auto;
border-radius: 1rem;
}
.mCSB_scrollTools .mCSB_dragger {
/* the draggable element */
cursor: pointer;
width: 100%;
height: 1.875rem;
/* minimum dragger height */
z-index: 1;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
/* the dragger element */
position: relative;
width: 0.25rem;
height: 100%;
margin: 0 auto;
border-radius: 1rem;
text-align: center;
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
width: 0.75rem;
/* auto-expanded scrollbar */
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
width: 0.5rem;
/* auto-expanded scrollbar */
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown {
display: block;
position: absolute;
height: 1.25rem;
width: 100%;
overflow: hidden;
margin: 0 auto;
cursor: pointer;
}
.mCSB_scrollTools .mCSB_buttonUp:before,
.mCSB_scrollTools .mCSB_buttonDown:before {
content: "\f0d8";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
text-align: center;
height: 100%;
font-family: FontAwesome, serif;
color: #2b8dd9;
font-size: 1.375rem;
line-height: 1.25rem;
}
.mCSB_scrollTools .mCSB_buttonDown {
bottom: 0;
}
.mCSB_scrollTools .mCSB_buttonDown:before {
content: "\f0d7";
}
.mCSB_draggerRail {
background-color: #e6e9ed;
border-radius: 6.25rem !important;
opacity: 1 !important;
width: 0.75rem !important;
}
.mCSB_scrollTools {
opacity: 1;
}
.mCSB_dragger_bar {
width: 0.375rem !important;
background: #2b8dd9;
border-radius: 0 !important;
opacity: 1 !important;
}
.mCSB_dragger_bar:before {
display: none;
}
/*-----------------------------------------------------------------------------------
[Scroll Back To Top]
-----------------------------------------------------------------------------------*/
/* Scroll back to top wrapper */
#scrollUp {
margin: 0;
padding: 0;
bottom: 1.875rem;
right: 1.875rem;
height: 3.125rem;
width: 3.125rem;
line-height: 3.125rem;
text-align: center;
background: #142834;
border-radius: 12.5rem;
font-size: 1.875rem;
box-shadow: 0 0 0.9375rem rgba(2, 3, 3, 0.19);
transition: 300ms linear;
transition-property: color, background;
color: white;
}
#scrollUp:hover {
color: #1f3542;
background: #D3D3D3;
}
/*-----------------------------------------------------------------------------------
[Preloader]
# Preloader (overlay)
# .preloader (class)
-----------------------------------------------------------------------------------*/
.loadingoverlay {
background-size: 40px !important;
}
/*.preloader {
opacity: 0;
visibility: hidden;
}*/
.lohn-parent {
width: 100%;
height:130px;
margin: 0 0 0 9px; padding:0; position:relative;
padding-bottom: 10%;
}
.lohn-parent {
display: flex;
/*background: #fff;
background: -webkit-radial-gradient(#fff, #eaeaea);
background: -o-radial-gradient(#fff, #eaeaea);
background: -moz-radial-gradient(#fff, #eaeaea);
background: radial-gradient(#fff, #eaeaea); */
}
.lohn {
position: absolute;
height: 100%;
width: 100%;
left: -19px;
top: 1px;
}
#inf .imgg { margin-left:-17px; }
@media screen and (max-width: 640px) {
.lohn-parent {
width: 100%;
height:80px;
margin: 0; padding:0; position:relative;
padding-bottom: 10%;
}
.lohn { left:0;}
#inf img { width:276px; margin-left:-9px;}
.leftsm100 { margin-left:190px;}
}
/* H Animation */
.H-left-stroke {
stroke-dasharray: 124px;
stroke-dashoffset: 124px;
animation: H-left-move 30s ease forwards;
}
.H-mid-stroke {
stroke-dasharray: 37px;
stroke-dashoffset: 37px;
animation: H-mid-move 29s ease forwards;
}
.H-right-stroke {
stroke-dasharray: 124px;
stroke-dashoffset: 124px;
animation: H-right-move 23s ease forwards;
}
.N-right-stroke {
stroke-dasharray: 124px;
stroke-dashoffset: 124px;
animation: H-right-move 33s ease forwards;
}
@keyframes H-left-move {
0% {
stroke-dashoffset: 124px;
}
5% {
stroke-dashoffset: 0px;
}
100% {
stroke-dashoffset: 0px;
}
}
@keyframes H-mid-move {
0% {
stroke-dashoffset: 37px;
}
5% {
stroke-dashoffset: 37px;
}
10% {
stroke-dashoffset: 0px;
}
100% {
stroke-dashoffset: 0px;
}
}
@keyframes H-right-move {
0% {
stroke-dashoffset: 124px;
}
5% {
stroke-dashoffset: 124px;
}
10% {
stroke-dashoffset: 0px;
}
100% {
stroke-dashoffset: 0px;
}
}
/* L One Animation */
.L-one-long-stroke {
stroke-dasharray: 124px;
stroke-dashoffset: 124px;
animation: L-one-long-move 20s ease forwards;
}
.L-one-short-stroke {
stroke-dasharray: 44px;
stroke-dashoffset: 44px;
animation: L-one-short-move 10s ease forwards;
}
@keyframes L-one-long-move {
0% {
stroke-dashoffset: 124px;
}
2% {
stroke-dashoffset: 124px;
}
7% {
stroke-dashoffset: 0px;
}
100% {
stroke-dashoffset: 0px;
}
}
@keyframes L-one-short-move {
0% {
stroke-dashoffset: 44px;
}
13% {
stroke-dashoffset: 44px;
}
18% {
stroke-dashoffset: 0px;
}
100% {
stroke-dashoffset: 0px;
}
}
/* L Two Animation */
.L-two-long-stroke {
stroke-dasharray: 124px;
stroke-dashoffset: 124px;
animation: L-two-long-move 20s ease forwards;
}
.L-two-short-stroke {
stroke-dasharray: 44px;
stroke-dashoffset: 44px;
animation: L-two-short-move 10s ease forwards;
}
@keyframes L-two-long-move {
0% {
stroke-dashoffset: 124px;
}
3% {
stroke-dashoffset: 124px;
}
8% {
stroke-dashoffset: 0px;
}
100% {
stroke-dashoffset: 0px;
}
}
@keyframes L-two-short-move {
0% {
stroke-dashoffset: 44px;
}
15% {
stroke-dashoffset: 44px;
}
20% {
stroke-dashoffset: 0px;
}
100% {
stroke-dashoffset: 0px;
}
}
/* O Animation */
.O-stroke {
stroke-dasharray: 302px;
stroke-dashoffset: 302px;
animation: O-move 20s ease forwards;
}
@keyframes O-move {
0% {
stroke-dashoffset: 302px;
}
4% {
stroke-dashoffset: 302px;
}
9% {
stroke-dashoffset: 0px;
}
100% {
stroke-dashoffset: 0px;
}
}
/* Red Dot Animation */
.red-dot {
stroke-width: 44px;
stroke-linecap: round;
animation: red-dot-grow 8s ease-out forwards;
}
@keyframes red-dot-grow {
0% {
stroke-width: 0px;
}
15% {
stroke-width: 0px;
}
20% {
stroke-width: 44px;
}
100% {
stroke-width: 44px;
}
}
/* animated o */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
}
@keyframes spin {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}
}
@-webkit-keyframes scale {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
90% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@keyframes scale {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 0;
}
90% {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes textOpacity {
0% {
visibility: none;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
@keyframes textOpacity {
0% {
visibility: none;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.displaynone { display:none;}
.lohncircleblock {
opacity: 0;
position: relative;
transition: all 200ms ease;
-webkit-animation: 1250ms ease-out 300ms scale;
animation: 1250ms ease-out 300ms scale;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
animation-delay: 4s;
-webkit-animation-delay: 5s;
}
.lohncircle-svg {
-webkit-animation: 3400ms 400ms spin;
animation: 3400ms 400ms spin;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
animation-delay: 4s;
-webkit-animation-delay: 5s;
}
/* card animated */
.cardcontainer {
margin: 0em auto;
width:350px;
height:330px;
-webkit-perspective: 500px;
perspective: 500px;
}
.card {
display:inline-block;
position:relative;
box-sizing: border-box;
height: 490px;
width: 350px;
margin: -80px 5px 5px 0;
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
-o-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
cursor: pointer;
font-weight: bold;
color: #000;
-webkit-animation: 1750ms ease-out 150ms scale;
animation: 1750ms ease-out 150ms scale;
z-index:10000;
}
.card .front,
.card .back {
height:100%;
width:100%;
position: absolute;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.4);
box-shadow:1px 1px 1px rgba(0,0,0,0.4);
overflow:hidden;
}
.card .front {
background-color: #fff;
text-align:center;
}
.card .back {
background-color: #0a47c1;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flipped {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.card .front::after {
display:block;
font-size: 4em;
margin:31% 0 0 31%;
}
/* Card values */
.card .front::after,
.card .front::before {
display:block;
position:absolute;
}
.card span:first-child {
top:10px;
left:10px;
}
.card span:last-child {
bottom:10px;
right:10px;
}
.card .last::after {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.card span {
display:block;
position:absolute;
}
.card span::before,
.card span::after {
display: block;
line-height: 0.9em;
}
.card[data-value="A"] span:first-child::before,
.card[data-value="A"] span:last-child::after {
content: "A";
}
.card .back::before {
display:block;
content: " ";
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 12px;
background:transparent repeat left top;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPgo8cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI4IiBmaWxsPSIjNDAzYzNmIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDBMOCA4Wk04IDBMMCA4WiIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2U9IiMxZTI5MmQiPjwvcGF0aD4KPC9zdmc+");
}
/* fade */
.card .front .mark {
position: absolute;
top: 16px;
left: 24px;
opacity: 0;
-moz-animation: fadeInMark 4.8s 4.5s forwards;
-webkit-animation: fadeInMark 4.8s 4.5s forwards;
animation: fadeInMark 4.8s 4.5s forwards;
}
.card .front .mark.upside-down {
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
top: auto;
left: auto;
bottom: 16px;
right: 24px;
}
@-moz-keyframes fadeInCard {
from {
top: 40px;
-moz-transform: scale(1.2) rotate(10deg);
transform: scale(1.2) rotate(10deg);
}
to {
top: 0px;
-moz-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
}
@-webkit-keyframes fadeInCard {
from {
top: 40px;
-webkit-transform: scale(1.2) rotate(10deg);
transform: scale(1.2) rotate(10deg);
}
to {
top: 0px;
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
}
@keyframes fadeInCard {
from {
top: 40px;
-moz-transform: scale(1.2) rotate(10deg);
-ms-transform: scale(1.2) rotate(10deg);
-webkit-transform: scale(1.2) rotate(10deg);
transform: scale(1.2) rotate(10deg);
}
to {
top: 0px;
-moz-transform: scale(1) rotate(0deg);
-ms-transform: scale(1) rotate(0deg);
-webkit-transform: scale(1) rotate(0deg);
transform: scale(1) rotate(0deg);
}
}
@-moz-keyframes fadeInDark {
from {
opacity: 0;
-moz-transform: rotate(72deg) translate(120px, 800px);
transform: rotate(72deg) translate(120px, 800px);
}
30% {
opacity: 0.1;
}
to {
opacity: 1;
-moz-transform: rotate(72deg) translate(75px, 20px);
transform: rotate(72deg) translate(75px, 20px);
}
}
@-webkit-keyframes fadeInDark {
from {
opacity: 0;
-webkit-transform: rotate(72deg) translate(120px, 800px);
transform: rotate(72deg) translate(120px, 800px);
}
30% {
opacity: 0.1;
}
to {
opacity: 1;
-webkit-transform: rotate(72deg) translate(75px, 20px);
transform: rotate(72deg) translate(75px, 20px);
}
}
@keyframes fadeInDark {
from {
opacity: 0;
-moz-transform: rotate(72deg) translate(120px, 800px);
-ms-transform: rotate(72deg) translate(120px, 800px);
-webkit-transform: rotate(72deg) translate(120px, 800px);
transform: rotate(72deg) translate(120px, 800px);
}
30% {
opacity: 0.1;
}
to {
opacity: 1;
-moz-transform: rotate(72deg) translate(75px, 20px);
-ms-transform: rotate(72deg) translate(75px, 20px);
-webkit-transform: rotate(72deg) translate(75px, 20px);
transform: rotate(72deg) translate(75px, 20px);
}
}
@-moz-keyframes fadeInRed {
from {
opacity: 0;
-moz-transform: rotate(70deg) translate(7px, 800px);
transform: rotate(70deg) translate(7px, 800px);
}
30% {
opacity: 0.2;
}
to {
opacity: 1;
-moz-transform: rotate(58deg) translate(0px, 0px);
transform: rotate(58deg) translate(0px, 0px);
}
}
@-webkit-keyframes fadeInRed {
from {
opacity: 0;
-webkit-transform: rotate(70deg) translate(7px, 800px);
transform: rotate(70deg) translate(7px, 800px);
}
30% {
opacity: 0.2;
}
to {
opacity: 1;
-webkit-transform: rotate(58deg) translate(0px, 0px);
transform: rotate(58deg) translate(0px, 0px);
}
}
@keyframes fadeInRed {
from {
opacity: 0;
-moz-transform: rotate(70deg) translate(7px, 800px);
-ms-transform: rotate(70deg) translate(7px, 800px);
-webkit-transform: rotate(70deg) translate(7px, 800px);
transform: rotate(70deg) translate(7px, 800px);
}
30% {
opacity: 0.2;
}
to {
opacity: 1;
-moz-transform: rotate(58deg) translate(0px, 0px);
-ms-transform: rotate(58deg) translate(0px, 0px);
-webkit-transform: rotate(58deg) translate(0px, 0px);
transform: rotate(58deg) translate(0px, 0px);
}
}
@-moz-keyframes fadeInText {
from {
opacity: 0;
}
to {
top: 50%;
opacity: 1;
}
}
@-webkit-keyframes fadeInText {
from {
opacity: 0;
}
to {
top: 50%;
opacity: 1;
}
}
@keyframes fadeInText {
from {
opacity: 0;
}
to {
top: 50%;
opacity: 1;
}
}
@-moz-keyframes fadeInMark {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-webkit-keyframes fadeInMark {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInMark {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* fluxing */
.serverStack{
width: 364px;
display: flex;
justify-content: space-between;
position: relative; z-index:9000;
}
.serverStack .errorServer{
width: 112px;
height: 118px;
display: inline-block;
vertical-align: top;
fill: white;
}
.serverStack .goodServer{
width: 112px;
height: 118px;
display: inline-block;
vertical-align: top;
fill:white;
text-align: right;
}
.serverStack .goodServer svg{
position: relative;
left: 4px;
}
.serverStack ul.dots{
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
text-align: center;
list-style-type: none;
flex: none;
margin: auto;
padding: 0;
height: 16px;
font-size: 0;
}
.serverStack ul.dots li{
display: inline-block;
width: 16px;
height: 16px;
margin: 0 5px;
position: relative;
}
.serverStack ul.dots li:after{
content:'';
position: absolute;
height: 10px;
width: 10px;
background: black;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
-webkit-animation: bubble 1s infinite; /* Safari 4+ */
-moz-animation: bubble 1s infinite; /* Fx 5+ */
-o-animation: bubble 1s infinite; /* Opera 12+ */
animation: bubble 1s infinite; /* IE 10+, Fx 29+ */
}
.serverStack ul.dots li:nth-of-type(1):after{
animation-delay: 0.05s;
}
.serverStack ul.dots li:nth-of-type(2):after{
animation-delay: 0.1s;
}
.serverStack ul.dots li:nth-of-type(3):after{
animation-delay: 0.15s;
}
.serverStack ul.dots li:nth-of-type(4):after{
animation-delay: 0.2s;
}
.serverStack ul.dots li:nth-of-type(5):after{
animation-delay: 0.25s;
}
.serverStack ul.dots li:nth-of-type(6):after{
animation-delay: 0.3s;
}
.serverStack ul.dots li:nth-of-type(7):after{
animation-delay: 0.33s;
}
.serverStack ul.dots li:nth-of-type(8):after{
animation-delay: 0.37s;
}
.serverStack ul.dots li:nth-of-type(9):after{
animation-delay: 0.39s;
}
@-webkit-keyframes bubble {
0% { width: 10px; height: 10px; }
20% { width: 10px; height: 10px; }
30% { width: 16px; height: 16px; }
40% { width: 10px; height: 10px; }
100% { width: 10px; height: 10px; }
}
@-moz-keyframes bubble {
0% { width: 10px; height: 10px; }
20% { width: 10px; height: 10px; }
30% { width: 16px; height: 16px; }
40% { width: 10px; height: 10px; }
100% { width: 10px; height: 10px; }
}
@-o-keyframes bubble {
0% { width: 10px; height: 10px; }
20% { width: 10px; height: 10px; }
30% { width: 16px; height: 16px; }
40% { width: 10px; height: 10px; }
100% { width: 10px; height: 10px; }
}
@keyframes bubble {
0% { width: 10px; height: 10px; }
20% { width: 10px; height: 10px; }
30% { width: 16px; height: 16px; }
40% { width: 10px; height: 10px; }
100% { width: 10px; height: 10px; }
}
/** dots responsive **/
.scaling-dots {
position: relative;
height:20px;
width: 100%;
padding: 0;
padding-bottom: 10%;
}
.scaling-svgdots {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 118px;
}
.redfull { position:absolute; z-index:45; height:10px; width:100%;}
@media screen and (max-width: 640px) {
.redfull {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
/* animated phone */
.phone {
margin: 80px auto 50px auto;
box-shadow: 10px 10px 10px #415260;
}
.phone {
height: 428px;
width: 226px;
background: #415260;
border-radius: 5px;
position: relative;
overflow: hidden;
-webkit-transform: rotate(-6deg);
transform: rotate(-6deg);
}
.phone .phone-shade {
position: absolute;
height: 500px;
width: 200px;
left: 50%;
background: #95a2b2;
-webkit-transform: rotate(18deg);
transform: rotate(18deg);
}
.phone .phone-speaker {
height: 8px;
width: 42px;
border-radius: 4px;
background: #3e4752;
position: relative;
top: 23px;
left: 50%;
margin-left: -21px;
}
.phone .phone-button {
height: 40px;
width: 40px;
background: #ff0000;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -20px;
bottom: 10px;
}
.phone .phone-screen {
height: 302px;
width: 208px;
background: #fff;
position: absolute;
left: 9px;
top: 58px;
overflow: hidden;
}
.phone .phone-screen .phone-header {
width: 100%;
height: 30px;
background: #051571;
position: relative;
z-index: 3;
color: white;
}
.phone .phone-screen .phone-header .phone-menu {
position: absolute;
right: 10px;
top: 9px;
background: white;
width: 15px;
height: 2px;
}
.phone .phone-screen .phone-header .phone-menu:before {
content: "";
width: 15px;
height: 2px;
top: 5px;
background: #f5fbff;
position: absolute;
}
.phone .phone-screen .phone-header .phone-menu:after {
content: "";
width: 15px;
height: 2px;
top: 10px;
background: #f5fbff;
position: absolute;
}
.phone .phone-post {
padding: 15px 10px;
border-bottom: 2px solid #62605d;
overflow: hidden;
height: 60px;
position: relative;
-webkit-transform: translateY(-60px);
transform: translateY(-60px);
z-index: 2;
}
.phone .phone-post.active {
-webkit-animation: new-post 1s ease infinite;
animation: new-post 1s ease infinite;
}
.post-thumb {
height: 29px;
width: 27px;
background: url(../images/logo-small.png) center no-repeat;
position: absolute;
margin-right: 5px;
}
.post-title-1 {
height: 4px;
width: 15px;
margin-top: 3px;
background: #dadada;
position: absolute;
left: 44px;
}
.post-title-2 {
height: 4px;
width: 30px;
margin-top: 3px;
background: #dadada;
position: absolute;
left: 65px;
}
.post-line-1 {
height: 4px;
width: 150px;
background: #b0b0b0;
position: absolute;
top: 27px;
left: 44px;
}
.post-line-2 {
height: 4px;
width: 100px;
background: #b0b0b0;
position: absolute;
top: 36px;
left: 44px;
}
#first-post .line {
width: 0;
}
#first-post.active .post-thumb {
-webkit-transform: scale(0);
transform: scale(0);
-webkit-animation: box-grow 500ms ease 500ms forwards;
animation: box-grow 500ms ease 500ms forwards;
}
#first-post.active .line {
transition: width 500ms ease;
transition-delay: 600ms;
}
#first-post.active .post-title-1 {
width: 15px;
}
#first-post.active .post-title-2 {
width: 30px;
}
#first-post.active .post-line-1 {
width: 150px;
}
#first-post.active .post-line-2 {
width: 100px;
}
@-webkit-keyframes new-post {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@keyframes new-post {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
}
@-webkit-keyframes box-grow {
0% {
-webkit-transform: scale(0) rotate(25deg);
transform: scale(0) rotate(25deg);
}
60% {
-webkit-transform: scale(1.2) rotate(-10deg);
transform: scale(1.2) rotate(-10deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
@keyframes box-grow {
0% {
-webkit-transform: scale(0) rotate(25deg);
transform: scale(0) rotate(25deg);
}
60% {
-webkit-transform: scale(1.2) rotate(-10deg);
transform: scale(1.2) rotate(-10deg);
}
100% {
-webkit-transform: scale(1) rotate(0);
transform: scale(1) rotate(0);
}
}
.play-button {
position: absolute;
z-index: 10;
left: 50%;
bottom: 25px;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-sizing: content-box;
display: block;
height: 10px;
width: 10px;
border-radius: 50%;
}
.play-button:before {
content: "";
position: absolute;
z-index: 0;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: block;
width: 60px;
height: 60px;
background: #fff;
border-radius: 50%;
-webkit-animation: pulse-border 1500ms ease-out infinite;
animation: pulse-border 1500ms ease-out infinite;
}
.play-button:after {
content: "";
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
display: block;
width: 60px;
height: 60px;
background: #3c4d5a;
border-radius: 50%;
-webkit-transition: all 200ms;
transition: all 200ms;
}
@-webkit-keyframes pulse-border {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
@keyframes pulse-border {
0% {
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
-webkit-transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
opacity: 0;
}
}
ul.listedlines { float:left; margin:-35px 0 0 0}
.listedlines li { line-height:25px; font-size:16px; list-style:none;}
.listedlines li img { margin-right:5px;}
#chartfundraising{
width: 100%;
height:260px;
font-size:12px; margin-bottom:30px; border:1px solid #ddd; border-radius:6px; padding:3px;
}
/*.listedlines.mtop150 { margin-top:170px; float:left;}*/
.textgreen { color:#01a577}
.textyellow { color:#f06c00 }
.textred { color:#c00000}
.textpink { color:#d99594}
.textpurple { color:#7030a0;}
.textkaki { color:#4a442a}
.textnavy { color:#0099FF }
.textgold { color:#FFCC00}
.textsmall { font-size:13px;}
.mtb {margin-top:143px; margin-bottom:0px; float:left;}
.section-white h1, .section-grey h1, .two-coll-section h1 {
color:#315db7;
font-size: 2.75rem;
line-height: 4.125rem;
font-weight: 300;
margin-top: 0;
position: relative;
margin-bottom: 3.75rem;
}
.section-blue h1 { color:#fff; font-size: 2.75rem;
line-height: 4.125rem;
font-weight: 300;
margin-top: 0;
position: relative;
margin-bottom: 3.75rem;}
h1.bluetext { color:#315db7;}
h1.smallfont { font-size:34px; font-weight:500;}
.col-half-offset{
margin-left:4.166666667%
}
.col-md-offset-2-half {margin-left:20.666666667%}
.subtitle {margin:20px 0 10px 0; text-align:center; font-size:23px; color:#315db7; line-height:30px;}
#gravityico { position: relative;}
#gravityico .i1 { position: absolute; top:10px; left:10px;}
#gravityico .i2 { position: absolute; top:10px; left:220px;}
#gravityico .i3 { position: absolute; top:120px; left:10px;}
#gravityico .i4 { position: absolute; top:120px; left:220px;}
#gravityico .i5 { position: absolute; top:230px; left:10px;}
#gravityico .i6 { position: absolute; top:230px; left:220px;}
#gravityico .i7 { position: absolute; top:340px; left:10px;}
#gravityico .i8 { position: absolute; top:340px; left:220px;}
#gravityico .i9 { position: absolute; top:450px; left:10px;}
#gravityico .i10 { position: absolute; top:450px; left:220px;}
#gravityico .i11 { position: absolute; top:560px; left:10px;}
#gravityico .i12 { position: absolute; top:560px; left:220px;}
#gravityico .i13 { position: absolute; top:670px; left:10px;}
#gravityico .i14 { position: absolute; top:670px; left:220px;}
#gravityico .i15 { position: absolute; top:780px; left:10px;}
#gravityico .i16 { position: absolute; top:780px; left:220px;}
.leftvertical { float:left; }
.rightvertical { float:right; }
@media screen and (max-width: 767px) {
.leftvertical .industryico { float:left; width:20%;}
.rightvertical .industryico { float:left; width:20%;}
.industryicons { margin-top:35px; position:relative; }
.card {
display:inline-block;
position:relative;
box-sizing: border-box;
height: 490px;
width: 350px;
margin: -20px 5px 5px 0;
}
}
@media screen and (max-width: 640px) {
.leftvertical .industryico.i5 { float:left; width:20%; left:0px;}
.leftvertical .industryico.i6 { float:left; width:20%; margin-left:7%;}
.leftvertical .industryico.i7 { float:left; width:20%; margin-left:7%;}
.leftvertical .industryico.i8 { float:right; width:20%;}
.rightvertical .industryico.i9 { float:left; width:20%; left:0px;}
.rightvertical .industryico.i10 { float:left; width:20%; margin-left:7%;}
.rightvertical .industryico.i11 { float:left; width:20%; margin-left:7%;}
.rightvertical .industryico.i12 { float:right; width:20%;}
.leftsm { margin-left:210px;}
}
@media screen and (max-width: 460px) {
.leftvertical .industryico.i5 { float:left; width:18%; left:0px;}
.leftvertical .industryico.i6 { float:left; width:18%; margin-left:9%;}
.leftvertical .industryico.i7 { float:left; width:18%; margin-left:10%;}
.leftvertical .industryico.i8 { float:right; width:18%;}
.rightvertical .industryico.i9 { float:left; width:18%; left:0px;}
.rightvertical .industryico.i10 { float:left; width:18%; margin-left:9%;}
.rightvertical .industryico.i11 { float:left; width:18%; margin-left:10%;}
.rightvertical .industryico.i12 { float:right; width:18%;}
}
@media screen and (max-width: 991px) {
.leftvertical .industryico { float:left; width:25%;}
.rightvertical .industryico { float:left; width:25%;}
}
.industryicons { margin-top:135px; position:relative;}
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
display: inline-block;
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
}
.hvrbox_background {
width: 400px;
height: 250px;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 15px;
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 16px;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-layer_scale {
border-radius: 50%;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.hvrbox:hover .hvrbox-layer_scale,
.hvrbox.active .hvrbox-layer_scale {
border-radius: 20%;
-moz-transform: scale(0.85);
-webkit-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
}
.toplineindustry { margin-bottom:25px; float:left;}
.col-md-2 .box figure { margin-top:7px;}
@media screen and (max-width: 480px) {
.leftsm100 { margin-left:210px; display:block; width:150px; margin-top:-20px;}
}
.text12 { font-size:14px;}
a.ssmsoc span {
background: #fff;
color: #222;
font-size: 14px;
position: absolute;
bottom: 0;
left: -25px;
right: -25px;
padding: 5px 7px;
visibility: hidden;
opacity: 0;
-webkit-transition: all .4s;
-moz-transition: all .4s;
transition: all .4s;
}
a.ssmsoc span:before {
content: '';
/* width: 0;
height: 0; */
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
position: absolute;
bottom: -5px;
left: 40px;
}
a.ssmsoc:hover span {
bottom: 50px;
visibility: visible; font-size:12px; font-family:tahoma; font-weight:normal;
opacity: 1;
}
/* Hover through the icons */
a.facebook:hover {
background-color: #4183d7;
color: #bfbfbf;
}
a.facebook span {
color: #4183d7;
}
a.twitter:hover {
background-color: #19b5fe;
color: #fff;
}
a.twitter span {
color: #19b5fe;
}
a.github:hover {
background-color: #000;
color: #fff;
}
a.github span {
color: #000;
}
a.dribble:hover {
background-color: #f62459;
color: #fff;
}
a.dribble span {
color: #f62459;
}
a.pinterest:hover {
background-color: #f22613;
color: #fff;
}
a.pinterest span {
color: #f22613;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden; margin-top:25px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}