/* GearMagic */
html {
font-size: 16px;
width: 100%;
}
body {
font-size: 100%;
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 100%;
clear: both;
font-family: Helvetica,Arial,sans-serif;
background: #313A47;
}
* {
outline: none !important;
}
ul.none li, ol.none li { list-style-type: 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;
}
.help {
padding-right: 17px;
background: url("../images/icon-help.png") no-repeat right 5%;
}
/* Responsive image */
img { max-width: 100%; display: inline-block; }
h1, h2, h3, h4, h5, h6 { font-family: "Roboto Condensed",arial,tahoma,sans-serif; }
h2 { font-size: 30px; }
h3 span { font-size: 1.2em; color: #3B9AB7; }
.color-gradient {
background: rgba(12,206,188,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,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 */
}
.btn.btn-gradient {
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;
border: 1px solid #267EB8;
color: #267EB8;
}
.btn.btn-gradient:hover {
background: #80d380;
color: #FFFFFF;
transition:all ease .5s;
border:none;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
-webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
}
.btn.btn-round { min-width: inherit; padding: 0 1.3em; }
.alert { font-size: 0.9rem; }
/* 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;
background: #fff;
}
/* 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 */
}
.section-white h2, .section-blue h2, .section-grey h2, .two-colom-section h2 {
color: #19A5BA;
font-size: 2.75rem;
line-height: 4.125rem;
font-weight: 300;
margin-top: 0;
position: relative;
margin-bottom: 3.75rem;
}
.main-heading-text {
float:left;
width:100%;
padding:0 0 20px 0;
}
.main-heading-text p{
float:left;
width:100%;
text-align:center;
font-size:16px;
color:#708198;
line-height:1.5;
white-space:pre-line;
}
.site-testimonial .main-heading-text p{
float:left;
width:100%;
text-align:center;
font-size:16px;
color:#708198;
line-height:1.5;
white-space:pre-line;
padding:0 0 30px 0;
}
@media screen and (max-width: 767px) {
.section-white h1, .section-blue h1, .section-grey h1, .two-colom-section h1 {
font-size: 2rem;
line-height:1.2;
}
}
.section-white h2:after, .section-blue h2:after, .section-grey h2:after {
content: "";
position: relative;
background: #267EB8;
background-size: 3.375rem 1.125rem;
display: block;
width: 40px;
height: 2px;
margin-left: auto;
margin-right: auto;
clear: both;
top: 0.5rem;
}
.left-heading h2:after {
content: "";
position: relative;
background: #267EB8;
background-size: 3.375rem 1.125rem;
display: block;
width: 40px;
height: 2px;
margin-left: 0;
margin-right: auto;
clear: both;
top: 0.5rem;
}
.two-colom-section h2:after {
content: "";
position: relative;
background: #267EB8;
background-size: 3.375rem 1.125rem;
display: block;
width: 40px;
height: 2px;
margin-left: 0;
margin-right: auto;
clear: both;
top: 0.5rem;
}
.section-blue h2:after {
content: "";
position: relative;
background: #fff;
background-size: 3.375rem 1.125rem;
display: block;
width: 40px;
height: 2px;
margin-left: auto;
margin-right: auto;
clear: both;
top: 0.5rem;
}
/* Template section blue */
.section-blue {
color: white;
background-color: #08223b;
}
.section-blue h2 { color: white; }
.left-heading h2 { text-align:left; line-height:1.3; }
.color-gredient {
background: rgba(12,206,188,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,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(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
-webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
}
input[type=submit]:hover, button[type=submit]:hover {
background: white;
color: #203e5b;
}
/* Fluid container with wide class */
.container-fluid.wide {
max-width: 1400px;
}
@media screen and (min-width: 768px) {
.container-fluid.wide {
padding-left: 5rem;
padding-right: 5rem;
}
}
/*-----------------------------------------------------------------------------------*/
/* 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 a {
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
color: #6c6b6b;
}
.swiper-slide a:hover { color: #267EB8; }
.swiper-slide figure {
height: 258px;
overflow: hidden;
margin-bottom: 10px;
}
.swiper-slide-title { margin-bottom: 8px; }
.swiper-slide-subtitle { font-size: 0.8rem; display: none; }
.swiper-slide-box {
padding:50px;
background:#FFFFFF;
border-radius:6px;
border-bottom:#f5f5f9 solid 1px;
-webkit-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03);
-moz-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03);
box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03);
}
.swiper-slide-back-box {
float:left;
width:90%;
height:15px;
margin-left:5%;
background:#FFFFFF;
border-radius:0 0 6px 6px;
-webkit-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03);
-moz-box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03);
box-shadow: 0px 0px 22px 6px rgba(24,30,110,0.03);
}
/* Pagination */
.swiper-pagination {
box-shadow: none;
text-shadow: none;
width: 100%;
margin: 0;
padding: 0;
display: block;
clear: both;
left: 0;
right: 0;
}
@media screen and (max-width: 991px) {
.swiper-pagination {
margin-top: 0.625rem;
}
}
@media screen and (max-width: 767px) {
.swiper-pagination {
margin-top: 1.25rem;
}
}
/* pagination bullet */
.swiper-pagination-bullet {
width: 1.0625rem;
height: 1.0625rem;
background-color:#f2f4f5;
opacity: 1;
transition: 300ms linear;
transition-property: background-color;
margin: 0.4375rem;
border:#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.3;
border: 0.125rem solid #515151;
font-size: 1.25rem;
transition: 300ms linear;
transition-property: background, opacity, border-color;
left: -2.5rem;
}
@media screen and (max-width: 767px) {
.swiper-button-prev, .swiper-button-next {
left:0;
/*top: -3.125rem;*/
display:none;
}
}
.swiper-button-prev:hover, .swiper-button-next:hover {
background: #19A5BA;
opacity: 1;
color: #fff;
border-color: #fff;
}
/*.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(12,206,188,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,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: #f2f4f5;
color: #1f3542;
opacity: 1;
transition: 300ms linear;
transition-property: color, background, border-color;
}
.section-white .swiper-button-prev:hover, .section-white .swiper-button-next:hover {
color: white;
border: none;
background: rgba(12,206,188,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,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;
}
.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(12,206,188,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,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(12,206,188,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,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 a {
color: white;
display: table-cell;
vertical-align: middle;
}
.site-logo img {
vertical-align: baseline;
}
/* Navigation */
.nav-submenu {
position: absolute;
left: 0;
top: 50%;
margin-top: -17px;
}
.nav-submenu a {
display: inline-block;
width: 34px;
height: 34px;
/*background-color: rgba(255, 255, 255, 0.7);*/
border-radius: 50%;
}
.nav-submenu a.icon-faq { background: url("../images/icon-faq.png") no-repeat center center; }
.nav-submenu a.icon-guide { background: url("../images/icon-guide.png") no-repeat center center; }
.nav-submenu a.icon-template { background: url("../images/icon-template.png") no-repeat center center; }
.nav-submenu a:hover {
/*background-color: rgba(255, 255, 255, 0.3);*/
background-color: #2878B8;
}
.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*/rgba(18, 39, 72, 0.9);
}
@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:15px;
line-height:2;
text-transform: uppercase;
color: white;
display: table-cell;
vertical-align: middle;
padding: 0 7px;
position: relative;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
}
@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;
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*/rgba(18, 39, 72, 0.3);
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: 863px;
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 {
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 img.full-size { display: none; }
.header-slider .seq-canvas > li .bg-img img.load {
position: absolute;
right: 15%;
top: 15%;
background-color: #fff;
border-radius: 50%;
opacity: 0.5;
}
.header-slider .seq-canvas > li .bg-img {
transform: translateX(-2000px);
transition: transform 2000ms ease;
max-width: 100%;
background: no-repeat right center;
background-size: 40%;
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 {
position: absolute;
top: 25%;
left: 6%;
bottom: 0;
display: block;
color: white;
z-index: 100;
text-align: left;
padding-left: 0.3125rem;
width: 50%;
}
.header-slider h1 {
color: white;
font-size: 2.5rem;
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-size: 2rem;
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 .slide-text {
color: white;
font-size: 20px;
font-weight: normal;
line-height: 1.3;
margin-bottom: 1.875em;
white-space: pre-line;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
}
.header-slider .slide-text b { color: #555; }
@media screen and (max-width: 1199px) {
.header-slider p {
font-size:14px;
line-height:1.5;
font-weight:normal;
}
}
@media screen and (max-width: 991px) {
.header-slider p {
white-space: normal;
}
}
.header-slider .slide-button {
min-width: 15em;
padding: 0 2.5em;
border: 1px solid white;
border-radius: 12.5em;
color: white;
font-family: inherit;
font-size: 0.8125em;
font-weight: 700;
line-height: 3.75em;
text-transform: uppercase;
display: inline-block;
text-align: center;
transition: 300ms linear;
transition-property: color, background;
margin: 1.875em 1.25em 1.875em 0;
}
.header-slider .slide-button:hover {
background: #80d380;
color: #FFFFFF;
transition:all ease .5s;
border:none;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
-webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
}
.slide-button-active {
background: #80d380;
color: #FFFFFF;
transition:all ease .5s;
border:none !important;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
-webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
}
@media screen and (max-width: 767px) {
.header-slider .slide-button {
margin-bottom: 0;
}
}
/*-----------------------------------------------------------------------------------
Static Banner
-----------------------------------------------------------------------------------*/
.static-banner {
position:absolute;
top:25%;
}
.banner-caption {
float:left;
width:100%;
position:relative;
left:-15px;
padding:50px 0 0 0;
}
.banner-caption h1 {
font-size:160px;
color:#FFFFFF;
font-weight:600;
letter-spacing:-2px;
line-height:1;
padding:0;
margin:0;
}
.banner-caption h2 {
font-size:32px;
color:#FFFFFF;
font-weight:normal;
line-height:1;
padding:0;
margin:0;
}
.banner-caption p {
color: white;
font-family: inherit;
font-size: 15px;
font-weight: 500;
line-height: 2;
margin-bottom: 1.875em;
white-space: pre-line;
}
.static-banner .slide-button {
min-width: 15em;
padding: 0 2.5em;
border: 1px solid white;
border-radius: 12.5em;
color: white;
font-family: inherit;
font-size: 0.8125em;
font-weight: 700;
line-height: 3.75em;
text-transform: uppercase;
display: inline-block;
text-align: center;
transition: 300ms linear;
transition-property: color, background;
margin: 1.875em 1.25em 1.875em 0;
}
.static-banner .slide-button:hover {
background: #80d380;
color: #FFFFFF;
transition:all ease .5s;
border:none;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
-webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
}
.static-banner-image {
background:url(../images/header-slide-1.png) no-repeat right top;
width:470px;
height:633px;
text-align:right;
position:relative;
right:0;
left:140px;
top:0;
}
@media screen and (max-width: 1199px) {
.static-banner {
top:20%;
}
.static-banner-image {
left:0;
}
.banner-caption {
padding:90px 0 0 0;
}
.banner-caption h1 {
font-size:120px;
}
.banner-caption h2{
font-size:22px;
}
.banner-caption p{
line-height:1.7;
white-space:inherit;
font-weight:normal;
padding-top:20px;
}
}
@media screen and (max-width: 991px) {
.static-banner {
top:10%;
}
.banner-caption {
padding:0;
}
.banner-caption h1 {
font-size:100px;
text-align:center;
}
.banner-caption h2{
font-size:22px;
text-align:center;
}
.banner-caption p{
line-height:1.7;
white-space:inherit;
font-weight:normal;
padding:20px 0 0 0;
text-align:center;
margin-bottom:0;
}
.static-banner-image {
width:100%;
text-align:center;
background-size:300px;
background-position:center top;
margin:30px 0 0 0;
}
.static-banner .banner-caption {
text-align:center;
}
}
@media screen and (max-width: 767px) {
.static-banner {
top:15%;
}
.banner-caption h1 {
font-size:70px;
text-align:center;
}
.static-banner .slide-button {
margin:10px 0;
}
}
/* Large icons */
.btn-order {
border: none;
margin-top: 1.5rem;
margin-right: 0.625rem;
margin-left: 0.625rem;
border-radius: 62.5rem;
padding: 1.75rem 3.75rem 1.75rem 3.75rem;
text-transform: uppercase;
color: #fff;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
-webkit-box-shadow: 6px 6px 24px -15px rgba(0,0,0,0.75);
-moz-box-shadow: 6px 6px 24px -15px rgba(0,0,0,0.75);
box-shadow: 6px 6px 24px -15px rgba(0,0,0,0.75);
}
.btn-order .fa { font-size: 1.2rem; }
.btn-order:hover { background: #fff; color: #59687c; }
a.btn-large {
border: none;
margin-right: 0.625rem;
margin-left: 0.625rem;
border-radius: 62.5rem;
padding: 1.75rem 3.75rem 1.75rem 5.625rem;
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;
}
a.btn-large:hover {
background-color: #2177ba;
}
@media screen and (max-width: 767px) {
a.btn-large {
display: block;
width: 100%;
max-width: 20rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.25rem;
}
}
a.btn-large:last-child {
border-right: none;
}
a.btn-large a:hover {
transition:all ease .5s;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
-webkit-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
box-shadow: 10px 10px 34px -11px rgba(0,0,0,0.75);
}
a.btn-large i.fa, a.btn-large span, a.btn-large img {
/* Icons */
line-height: 5.625rem;
position: relative;
left: 1.25rem;
top: 0.125rem;
}
a.btn-large i.fa.adjust {
/* Icons adjust (class) */
font-size: 1.875rem;
right: 0.625rem;
}
a.btn-large img {
/* Image */
right: 0.9375rem;
}
/*-----------------------------------------------------------------------------------
[Amazing Features]
# Amazing feature (wrapper)
# Features (Features holder class)
# move (move class)
# Images
# Icons
# Heading
# Paragraph
# Device
-----------------------------------------------------------------------------------*/
/* Amazing Features wrapper */
.site-amazing-features {
background: #fff;
padding-bottom: 0;
}
@media screen and (max-width: 767px) {
.site-amazing-features {
background: none;
}
}
.site-amazing-features .features {
/* Features */
max-width: 19.75rem;
min-height: 30rem;
display: inline-block;
margin-bottom: 3.125rem;
position: relative;
cursor: pointer;
z-index: 10;
padding:30px;
}
.site-amazing-features .features:hover {
/* Features mouse hover */
padding:30px;
transition:all ease .5s;
border-radius:12px;
-webkit-box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31);
-moz-box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31);
box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31);
}
.site-amazing-features .features:hover h5 {
color: #315db7;
}
.site-amazing-features .features:hover figure {
/*border-color: #2b8dd9;
box-shadow: 0 0 0.938rem rgba(2, 3, 3, 0.19);*/
}
.site-amazing-features .features:hover figure:before {
/*background: #2b8dd9;*/
}
.site-amazing-features .features:hover span, .site-amazing-features .features:hover i.fa {
color: white;
}
.site-amazing-features .features.move {
/* Move Class */
/*top: 5.625rem;*/
}
@media screen and (max-width: 767px) {
.site-amazing-features .features.move {
top: 0;
}
}
.site-amazing-features .features figure {
/* Image */
width: 100%;
margin-left: auto;
margin-right: auto;
margin-bottom: 2.25rem;
background: white;
transition: 300ms linear;
transition-property: border-color, box-shadow;
position: relative;
z-index: 1;
box-shadow: none;
}
.site-amazing-features .features figure:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: block;
height: 100%;
background: white;
border-radius: 6.25rem;
border: 0.5rem solid white;
z-index: -1;
transition: 300ms linear;
transition-property: background;
}
.site-amazing-features span, .site-amazing-features i.fa {
/* Icons */
display: inline-block;
font-size: 3rem;
line-height: 6.25rem;
color: #6f6f6f;
transition: 300ms linear;
transition-property: color;
}
.site-amazing-features h3 {
/* Heading */
color: #59687c;
font-family: inherit;
font-size: 1.4rem;
line-height: 1.2rem;
margin: 0 0 1.75rem;
padding: 0;
display: block;
clear: both;
width: 100%;
transition: 300ms linear;
transition-property: color;
}
.site-amazing-features ul li { color: #708198; line-height: 1.2; list-style: disc; text-align: left; }
.site-amazing-features p {
/* Paragraph */
color: #708198;
font-family: inherit;
font-size: 15px;
font-weight: normal;
line-height: 1.3rem;
margin: 0;
padding: 0;
display: block;
clear: both;
width: 100%;
}
.site-amazing-features .device {
/* Device holder */
margin-top: 1rem;
}
/*-----------------------------------------------------------------------------------
[About App] (Section)
# About App (wrapper)
# Typography (h1, h3, h4, p)
# Device image
# Section (image, icons)
# Carousel Slider
# carousel navigation
# carousel pagination
-----------------------------------------------------------------------------------*/
.about-half-colom-section {
float:left;
width:100%;
margin:0;
}
.site-about-app p {
/* Paragraph */
color: #708198;
font-family: inherit;
font-size: 15px;
font-weight: normal;
line-height:2;
margin: 0;
padding: 0;
display: block;
clear: both;
width: 100%;
text-align:left;
}
.about-half-colom-section-image {
width:945px;
height:auto;
position:absolute;
top:0;
right:-430px;
}
/* Download Buttons */
.site-download-icons.about-icon {
float:left;
width:100%;
margin:50px 0 0 0;
height:190px;
}
.site-download-icons.about-icon a {
border: none;
margin-right: 30px;
margin-left: 0;
border-radius: 62.5rem;
padding: 1.75rem 2.75rem 1.75rem 3.625rem;
float:left;
border:#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-colom-section {
}
.about-half-colom-section-image {
right:0;
position:inherit;
width:100%;
margin-top:100px;
}
.site-about-app.section-grey {
padding-bottom:0;
}
}
@media screen and (max-width: 991px) {
.site-download-icons.about-icon {
height:100px;
}
}
/*-----------------------------------------------------------------------------------
(2 Colom Section)
# How it works (wrapper)
# Typography (h1, h3, h4, p)
# Device image
# Section (image, icons)
# Carousel Slider
# carousel navigation
# carousel pagination
-----------------------------------------------------------------------------------*/
.two-colom-section {
padding:80px 0;
}
.half-colom-left-section {
float:left;
width:100%;
}
.half-colom-right-section {
float:left;
width:100%;
}
.left-heading-icon {
float:left;
width:100%;
text-align:left;
}
.two-colom-content {
float:left;
width:100%;
text-align:left;
}
.two-colom-content p {
float:left;
width:100%;
text-align:left;
font-size:16px;
color:#708198;
line-height:2;
font-weight:normal;
}
.two-colom-content b, .two-colom-content strong {
color: #19A5BA;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
}
.highlited-text {
color:#315db7;
font-weight:700px;
letter-spacing:1px;
}
.half-colom-padding {
padding:120px 0 0 0;
}
/*
@media screen and (min-width: 768px) and (max-width: 1199px) {
.two-colom-section {
padding:80px 0;
}
.half-colom-padding {
padding:0;
}
.two-colom-content p {
padding-bottom:50px;
}
}
@media screen and (max-width: 767px) {
.two-colom-section {
padding:80px 0;
}
.half-colom-padding {
padding:0;
}
}
@media screen and (max-width: 639px) {
.two-colom-section {
padding:80px 0 0 0;
}
.half-colom-padding {
padding:0;
}
}
*/
/*-----------------------------------------------------------------------------------
[How it works] (Section)
# How it works (wrapper)
# Typography (h1, h3, h4, p)
# Device image
# Section (image, icons)
# Carousel Slider
# carousel navigation
# carousel pagination
-----------------------------------------------------------------------------------*/
/* How it works section wrapper */
.site-how-it-works {
/*padding-top: 5rem;
padding-bottom: 6rem;*/
}
/*
@media screen and (max-width: 767px) {
.site-how-it-works {
padding-bottom: 5rem;
}
}
*/
.site-how-it-works h1 {
/* Typography */
margin-bottom: 3.75rem;
}
.site-how-it-works h3 {
color: #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(12,206,188,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,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(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
}
}
@media screen and (max-width: 767px) {
.site-how-it-works .swiper-pagination-bullet {
/* Hide the icon on mobile view */
}
.site-how-it-works .swiper-pagination-bullet span {
display: none;
}
}
/*-----------------------------------------------------------------------------------
[More Features] (Section)
# More Features (wrapper)
# Feature Image
# Featured Box
# Align right (class)
# Align left (class)
# Move left (class)
# Move right (class)
# Icons
# Typography (h5, p)
-----------------------------------------------------------------------------------*/
/* More features wrapper */
.heading-text {
/*float:left;*/
width:100%;
margin-bottom:60px;
margin-top:-30px;
}
.heading-text p {
float:left;
width:100%;
text-align:center;
font-size:16px !important;
line-height:1.5;
white-space:pre-line;
}
.white {
color:#FFFFFF;
}
.site-more-features {
margin: 0;
display: block;
width: 100%;
clear: both;
}
@media screen and (max-width: 991px) {
.site-more-features {
}
}
.site-more-features .featured-img {
/* featured image */
padding: 0;
display: block;
margin: 0 auto;
overflow: hidden;
text-align: center;
max-width: 18.125rem;
}
.site-more-features .featured-img img {
display: inline-block;
vertical-align: middle;
}
.site-more-features .feature {
/* feature box */
text-align: left;
position: relative;
margin-bottom: 0;
margin-top: 0;
padding: 0.00625rem 5.625rem 3.125rem 2.5rem;
top: 1.875rem;
cursor: pointer;
margin-right: 1.2rem;
margin-left: 1.2rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature {
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 991px) {
.site-more-features .feature {
padding-top: 0.3125rem;
max-width: 25rem;
margin-left: auto;
margin-right: auto;
}
}
.site-more-features .feature:hover h5 {
color: #FFFFFF;
}
.site-more-features .feature:hover figure {
border-color: #2b8dd9;
box-shadow: 0 0 0.938rem rgba(2, 3, 3, 0.19);
}
.site-more-features .feature:hover figure:before {
background: #2b8dd9;
}
.site-more-features .feature:hover span, .site-more-features .feature:hover i.fa {
border-color:none;
color: white;
box-shadow: 0 0 15px rgba(2, 3, 3, 0.19);
background: #80d380;
color: #FFFFFF;
transition:all ease .5s;
border:none !important;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
}
.site-more-features .feature:hover span:after, .site-more-features .feature:hover i.fa:after {
background: #2b8dd9;
}
.site-more-features .feature.align-right {
/* Align right class */
text-align: right;
padding-right: 5.25rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-right {
padding-right: 7.5rem;
padding-left: 0;
}
}
@media screen and (max-width: 991px) {
.site-more-features .feature.align-right {
text-align: left;
padding-right: 0;
padding-left: 7.5rem;
}
}
.site-more-features .feature.align-left {
/* Align left class */
text-align: left;
padding-right: 2.5rem;
padding-left: 5.25rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-left {
padding-right: 0;
padding-left: 7.5rem;
}
}
.site-more-features .feature.align-left.move {
/* move left class */
left:0;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-left.move {
left: 0;
}
}
.site-more-features .feature.align-left figure {
right: auto;
left: -1.25rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-left figure {
left: 0;
}
}
.site-more-features .feature.move {
/* move right class */
right:0;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.move {
right: 0;
}
}
.site-more-features .feature figure {
/* icons */
position: absolute;
top: 0;
right: -1.25rem;
bottom: 0;
display: block;
overflow: visible;
width: 5.25rem;
height: 5.25rem;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 62.5rem;
transition: 300ms linear;
transition-property: border-color, box-shadow;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature figure {
right: 0;
}
}
@media screen and (max-width: 991px) {
.site-more-features .feature figure {
right: auto;
left: 0;
}
}
.site-more-features .feature figure:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 62.5rem;
/*border: 0.375rem solid white;*/
transition: 300ms linear;
transition-property: background;
}
.site-more-features h3 {
color: #FFFFFF;
margin-bottom: 0.9375rem;
margin-top: 0.3125rem;
transition: 300ms linear;
transition-property: color;
font-weight: bold;
font-size: 20px;
}
.site-more-features p {
color: #FFFFFF;
font-family: inherit;
font-size: 14px;;
font-weight: normal;
line-height: 1.625rem;
}
.site-more-features figure {
/* Image */
overflow: hidden;
}
.site-more-features figure span, .site-more-features figure i.fa {
/* Icons */
text-align: center;
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: hidden;
color: #FFFFFF;
font-size: 2.5rem;
width: 100%;
height: 100%;
display: block;
border-radius: 62.5rem;
line-height: 5.25rem;
transition: 300ms linear;
transition-property: color;
}
/*-----------------------------------------------------------------------------------
[Download] (Section)
# Download Section (wrapper)
-----------------------------------------------------------------------------------*/
/* Download section wrapper */
.site-download {
margin: 0;
display: block;
clear: both;
background: #2B8DD9 url("../images/download-bg.png") no-repeat center;
background-size: cover;
}
@media screen and (max-width: 991px) {
.site-download {
padding-bottom: 0;
/*background: #2B8DD9;*/
}
}
/*-----------------------------------------------------------------------------------
[Download Icons] (Section)
# Download Icons (Wrapper)
# Align center (class)
# Icons
# Icons adjust (class)
# Images
-----------------------------------------------------------------------------------*/
/* Download Icons Wrapper */
.site-download-icons {
margin: 60px 0 60px 0;
padding: 0;
float:left;
width:100%;
}
@media screen and (max-width: 991px) {
.site-download-icons {
/*background: #2B8DD9;*/
padding-bottom: 2.5rem;
}
}
.site-download-icons .align-center {
/* Align center (class) */
bottom: -2.8125rem;
}
@media screen and (max-width: 991px) {
.site-download-icons .align-center {
bottom: 0;
}
}
.site-download-icons a {
border: none;
margin-right: 0.625rem;
margin-left: 0.625rem;
border-radius: 62.5rem;
padding: 1.75rem 3.75rem 1.75rem 5.625rem;
}
.site-download-icons a:hover {
background-color: #2177ba;
}
@media screen and (max-width: 767px) {
.site-download-icons a {
display: block;
width: 100%;
max-width: 20rem;
margin-left: auto;
margin-right: auto;
margin-bottom: 0.25rem;
}
}
.site-download-icons i.fa, .site-download-icons span, .site-download-icons img {
/* Icons */
line-height: 5.625rem;
position: relative;
left: 1.25rem;
top: 0.125rem;
}
.site-download-icons i.fa.adjust {
/* Icons adjust (class) */
font-size: 1.875rem;
right: 0.625rem;
}
.site-download-icons img {
/* Image */
right: 0.9375rem;
}
/*-----------------------------------------------------------------------------------
[Quick View] (Section)
# Quick View (wrapper)
# Heading (h1)
# Carousel pagination
-----------------------------------------------------------------------------------*/
/* Quick view wrapper */
.site-quick-view {
margin: 0;
clear: both;
width: 100%;
}
.site-quick-view h1 {
/* Heading */
margin-bottom: 5rem;
}
.site-quick-view .slide {
margin: 0;
padding: 0 0.9375rem;
display: block;
}
.site-quick-view .swiper-button-prev, .site-quick-view .swiper-button-next {
/* Carousel pagination */
}
@media screen and (min-width: 768px) {
.site-quick-view .swiper-button-prev, .site-quick-view .swiper-button-next {
margin-top: 3.75rem;
}
}
@media screen and (max-width: 767px) {
.site-quick-view .swiper-button-prev, .site-quick-view .swiper-button-next {
margin-top: -3.125rem;
}
}
/*-----------------------------------------------------------------------------------
[Accordion] (Section)
# Accordion (wrapper)
# Accordion image (class)
# Bootstrap panel (code)
# Custom scroll bar
-----------------------------------------------------------------------------------*/
/* Accordion wrapper */
.site-accordion {
margin: 0;
display: block;
width: 100%;
clear: both;
padding:0;
}
@media screen and (max-width: 991px) {
.site-accordion {
}
}
.site-accordion .accordion-img {
/* accordion image */
float:right;
width: 100%;
text-align:right;
}
@media screen and (max-width: 991px) {
.site-accordion .accordion-img {
left: 0;
top: 0;
position: relative;
text-align:center;
}
}
.site-accordion .accordion-img img {
height: auto;
display: inline-block;
vertical-align: middle;
}
.accordian-main {
float:left;
width:100%;
padding:90px 0 0 0;
}
.panel-group {
/* Bootstrap panel group */
margin: 0;
text-align: left;
}
@media screen and (max-width: 991px) {
.panel-group {
margin-top: 5rem;
}
}
.panel-group .panel-title {
/* Panel title */
color: white;
font-family: inherit;
display: block;
width: 100%;
border-radius: 0.25rem;
}
.panel-group .panel-title a {
width: 100%;
display: block;
padding: 0.75rem 3.125rem 0.625rem 1.25rem;
border: none;
transition: 300ms linear;
transition-property: background-color;
position: relative;
color: #FFFFFF;
font-family: inherit;
font-size: 17px;
font-weight: 500;
border-radius: 0.25rem;
}
@media screen and (max-width: 1199px) {
.panel-group .panel-title a {
font-size: 1.2rem;
}
}
@media screen and (max-width: 767px) {
.panel-group .panel-title a {
font-size: 1rem;
padding-top: 0.9375rem;
padding-bottom: 0.9375rem;
}
}
.panel-group .panel-title a span {
position: absolute;
top: 0;
right: 1rem;
bottom: 0;
margin: auto 0;
background: white;
text-indent: -62.5rem;
border-radius: 62.5rem;
transition: 300ms linear;
transition-property: background;
display: block;
overflow: visible;
width: 1.563rem;
height: 1.563rem;
}
.panel-group .panel-title a span:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("../images/accordion-minus.png") center no-repeat;
background-size: 0.625rem 0.125rem;
}
.panel-group .panel-title a.collapsed {
/* Panel collapsed */
background-color: #FFFFFF;
color:#516074;
}
.panel-group .panel-title a.collapsed span {
background-color: rgba(222, 225, 229, 0.8);
}
.panel-group .panel-title a.collapsed span:before {
background: url("../images/accordion-plus.png") center no-repeat;
background-size: 0.625rem 0.625rem;
}
.panel-group .panel {
/* Panel */
background: none;
border: none;
margin-bottom: 0.75rem;
border-radius: 0.25rem;
overflow: hidden;
display: block;
-webkit-box-shadow: 0px 0px 40px -12px rgba(24,30,110,0.44);
-moz-box-shadow: 0px 0px 40px -12px rgba(24,30,110,0.44);
box-shadow: 0px 0px 40px -12px rgba(24,30,110,0.44);
}
.panel-group .panel-heading {
/* Panel heading */
background-color: #315db7;
border: none;
padding: 0;
margin: 0;
border-radius: 0.25rem 0.25rem 0 0;
}
.panel-group .panel-collapse {
/* Panel collapse */
padding: 0;
background-color: #FFFFFF;
border-radius: 0 0 0.25rem 0.25rem;
}
.panel-group .panel-body-container {
/* panel container */
padding: 0.625rem 1.0625rem 1.5625rem 1.25rem;
border-radius: 0 0 0.25rem 0.25rem;
}
.panel-group .panel-body {
/* panel body */
border: none !important;
background-color: #FFFFFF;
color: #708198;
font-family: inherit;
border-radius: 0 0 0.25rem 0.25rem;
letter-spacing: 0.00625rem;
padding: 0;
margin: 0;
max-height: 150px;
min-height: 150px;
position: relative;
height: 100%;
overflow: auto;
font-size: 15px;
font-weight: normal;
line-height: 1.625rem;
}
.panel-group .panel-body:before {
display: none;
}
.panel-group .mCSB_inside > .mCSB_container {
/* ----------------------------- Custom scroll bar for panel */
margin-right: 3.75rem;
}
.panel-group .mCSB_dragger_bar {
/* Scroll drag bar */
background: none;
border-radius: 0 !important;
opacity: 1 !important;
}
.panel-group .mCSB_dragger_bar:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 80%;
width: 100%;
margin: auto 0;
display: block;
background: #315db7;
}
/*-----------------------------------------------------------------------------------
[Team] (Section)
# Team section (wrapper)
# slide (class)
# Box (class)
# Images
# Typography (h5, h6, p)
# Social icons
# Carousel slider
-----------------------------------------------------------------------------------*/
/* Team section wrapper */
.site-team {
margin: 0;
display: block;
width: 100%;
clear: both;
background-color: #FFFFFF;
}
.site-team .main-heading-text p{
float:left;
width:100%;
text-align:center;
font-size:16px;
color:#708198;
line-height:1.5;
white-space:pre-line;
padding:0 0 30px 0;
}
@media screen and (max-width: 991px) {
.site-team {
padding-top: 6.25rem;
}
}
.site-team .slide {
/* Slide (class) */
margin: 0;
display: block;
padding: 1.25rem 0.9375rem 3.125rem;
}
@media screen and (max-width: 767px) {
.site-team .slide {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
}
.site-team .site-box {
/* box (class) */
max-width: 22rem;
width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
background-color: white;
border-radius: 0.25rem;
box-shadow: 0 0 0.438rem rgba(2, 3, 3, 0.09);
padding:0;
overflow: visible;
transition: 300ms linear;
transition-property: box-shadow;
border:#e6e7ee solid 1px;
border-radius:8px;
}
.site-team .site-box:hover {
-webkit-box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31);
-moz-box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31);
box-shadow: -1px 10px 33px -5px rgba(24,30,110,0.31);
}
.site-team figure {
/* Image */
max-width:100%;
width: 100%;
display: block;
clear: both;
max-height: 16.938rem;
overflow: hidden;
border-radius:0;
margin-left: auto;
margin-right: auto;
height: auto;
margin-bottom: 1.25rem;
position: relative;
}
.site-team figure img {
max-width: 100%;
display: inline-block;
border-radius:10px 10px 0 0;
}
.site-team h5 {
/* Typography */
color: #315db7;
font-family: inherit;
font-size: 19px;
font-weight: 600;
display: block;
float: left;
width: 100%;
clear: both;
margin-bottom: 0.25rem;
margin-top: 1.25rem;
}
.site-team h6 {
color: #708198;
font-family: inherit;
font-size:14px;
font-weight: 400;
margin-bottom: 1.25rem;
width: 100%;
}
.site-team p {
color: #708198;
font-family: inherit;
font-size:15px;
font-weight: normal;
line-height: 1.5;
width: 100%;
overflow: hidden;
margin-bottom: 2.5rem;
padding:0 25px;
white-space:pre-line;
}
.site-team .site-social-icons {
/* Social icons (class) */
width: 100%;
clear: both;
display: block;
overflow: visible;
padding:0;
}
.site-team .site-social-icons a {
width: 2.125rem;
height: 2.125rem;
border-radius: 6.25rem;
background-color: #FFFFFF;
position: relative;
overflow: hidden;
margin-bottom: -1.4375rem;
border:#b2bdcc solid 1px;
}
.site-team .site-social-icons a i.fa:hover {
color:#FFFFFF;
}
.site-team .site-social-icons a i.fa, .site-team .site-social-icons a span {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
height: 100%;
width: 100%;
color: #8d9aac;
font-size: 0.813rem;
font-weight: 400;
line-height: 2.125rem;
}
.site-team .swiper-container {
/* Carousel slider */
padding-bottom: 3.125rem;
}
.site-team .swiper-pagination {
margin-top: 0.625rem;
}
/*-----------------------------------------------------------------------------------
[Testimonial] (Section)
# Testimonial (wrapper)
# Quote
# Images
# Typography (p, h5)
# Carousel pagination
# Carousel navigation
# Carousel container
-----------------------------------------------------------------------------------*/
/* Testimonial wrapper */
.site-testimonial {
margin: 0;
display: block;
width: 100%;
clear: both;
overflow: visible;
padding-bottom:150px;
position: relative;
}
@media screen and (max-width: 991px) {
.site-testimonial {
}
}
.site-testimonial .testimonial-quote {
/* Quote */
color: white;
font-family: inherit;
font-size: 4.563rem;
font-weight: 700;
width: 6.125rem;
height: 6.125rem;
background-color: #55a3e0;
border-radius: 12.5rem;
margin-left: auto;
margin-right: auto;
margin-top: -1.875rem;
}
@media screen and (max-width: 991px) {
.site-testimonial .testimonial-quote {
background-color: #2b8dd9;
}
}
.site-testimonial .testimonial-quote span {
display: inline-block;
}
.site-testimonial figure {
/* Image */
display: block;
width:90px;
height: 90px;
overflow: hidden;
border-radius: 12.5rem;
padding: 0.313rem;
background:#FFFFFF;
margin: 0 auto;
border:#d8dde4 solid 4px;
}
.site-testimonial figure img {
border-radius: 12.5rem;
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.site-testimonial p {
/* Typography */
width:100%;
color: #708198;
font-family: inherit;
font-size:15px;
font-weight: normal;
line-height:2;
padding:30px 0 0 0;
display: block;
clear:both;
text-align:center;
}
.site-testimonial h5 {
color: #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 .testimonial-degignation {
color: #708198;
font-family: inherit;
font-size:14px;
font-weight:500;
line-height: 1.5;
margin:0;
padding:0 0 0 0;
display: block;
width: 100%;
text-align:center;
}
.site-testimonial .swiper-pagination {
/* Carousel pagination */
margin-top:20px;
}
.site-testimonial .swiper-button-prev, .site-testimonial .swiper-button-next {
/* Carousel navigation */
margin-top: 2.5rem;
}
@media screen and (min-width: 768px) {
.site-testimonial .swiper-button-prev, .site-testimonial .swiper-button-next {
left: 0;
}
}
@media screen and (max-width: 767px) {
.site-testimonial .swiper-button-prev, .site-testimonial .swiper-button-next {
margin-top: 3.75rem;
top: 0;
}
.site-testimonial figure {
text-align:center;
clear:both;
}
.site-testimonial h5 {
width:100%;
text-align:center;
padding-left:0;
clear:both;
}
.swiper-slide .testimonial-degignation {
width:100%;
text-align:center;
padding-left:0;
clear:both;
}
}
@media screen and (min-width: 768px) {
.site-testimonial .swiper-button-next {
left: auto;
right: 0;
}
}
.site-testimonial .swiper-container {
/* Carousel container */
margin-top:0;
}
/*-----------------------------------------------------------------------------------
[Packages] (Section)
# Packages section (wrapper)
# Heading (h1)
# .box (class)
# .price (class)
# .heading (class)
# .Options (class)
# Icons
# .active (class)
# hover (mouse hover)
-----------------------------------------------------------------------------------*/
/* Packages section wrapper */
.site-packages {
margin: 0;
padding:0 0 140px 0;
display: block;
width: 100%;
clear: both;
background-color: #f8f7f7;
}
.site-packages .color-gredient { width:100%; height:400px; }
.site-packages-inner { margin-top:-300px; }
.site-packages h1 { 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;
}
}
.site-packages-footer { padding: 40px 40px 0 40px; }
.site-packages-footer p {
color: #6c6b6b;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
font-size: 1.7rem;
line-height: 1.9rem;
font-weight: 300;
}
.price-box-header {
background:#f2f4f5;
padding-bottom:20px;
border-radius:12px 12px 0 0;
}
.site-packages .price {
/* price (class) */
color: #267EB8;
font-size:1.6rem;
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 .other { margin-top: 5px; }
.site-packages .other a {
color: #2DC100;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
}
.site-packages .other a span { color: #6c6b6b; }
.site-packages .other a:hover { text-decoration: underline; }
.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: 0.5rem 1rem 0.5rem 1rem;
list-style: none;
}
.site-packages .options span {
position: relative;
padding-left: 1.5625rem;
padding-right: 1.5625rem;
display: block;
max-width: 17rem;
margin-left: auto;
margin-right: auto;
}
.site-packages .options b { font-family: "Roboto Condensed",arial,tahoma,sans-serif; }
.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 .box.active .price-box-header {
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
}
.site-packages .box.active .heading{ color:#FFFFFF; }
.site-packages .box.active .price{ color:#FFFFFF; }
.site-packages .box.active {
margin-top:0px;
position:relative;
z-index:1000;
}
@keyframes bounce {
/* ------------------------ plan hover animation */
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
}
.site-packages .box:hover {
animation: bounce 1s;
}
/* ------------------------ plan hover animation */
/*-----------------------------------------------------------------------------------
[Latest blog] (Section)
# latest-blog (wrapper)
# Typography (h1, h3, h4, p)
# Device image
# Section (image, icons)
# Carousel Slider
# carousel navigation
# carousel pagination
-----------------------------------------------------------------------------------*/
/* latest-blog section wrapper */
.latest-blog .blog-post-box {
float:left;
width:100%;
min-height: 33rem;
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);
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
}
.latest-blog .blog-post-box.faq-box { min-height: inherit; }
.blog-post-content {
float:left;
width:100%;
padding:30px;
}
.latest-blog figure {
float:left;
width:100%;
border-radius:10px 10px 0 0;
overflow: hidden;
height: 16rem;
}
.latest-blog figure img {
float:left;
text-align:center;
height:100%;
max-width: inherit;
}
/*
.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 h3 {
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.35;
}
.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(12,206,188,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,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 */
.site-statistic {
margin: 0;
display: block;
width: 100%;
background:url(../images/statistic-bg.jpg) no-repeat top center;
background-size:cover;
background-attachment:fixed;
padding:140px 0;
}
.site-number{
float:left;
width:100%;
text-align:center;
}
@media screen and (max-width: 767px) {
.site-statistic {
padding: 3.125rem 1.25rem;
}
}
.site-number {
/* Number (class) */
float:left;
width:100%;
text-align:center;
}
@media screen and (max-width: 767px) {
.site-number {
margin-top: 1.875rem;
margin-bottom: 1.875rem;
}
}
.site-number i.fa {
/* Icons */
color: #2b8dd9;
font-weight: 400;
text-transform: uppercase;
text-align: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
margin: 0;
display: block;
width: 2.125rem;
height: 100%;
font-size: 2.375rem;
line-height: 2.8125rem;
vertical-align: middle;
}
.site-number h5 {
/* Typography */
float:left;
width:100%;
text-align:center;
color: #FFFFFF;
font-size:50px;
font-weight:700;
clear: both;
width: 100%;
line-height:2;
}
.site-number p {
float:left;
width:100%;
text-align:center;
color: #FFFFFF;
font-size:19px;
font-weight:500;
text-transform: capitalize;
margin: 0;
padding: 0;
clear: both;
}
/*-----------------------------------------------------------------------------------
[Twitter] (Section)
# Twitter section (wrapper)
# Heading (h1)
# .tweet (class for hold tweets)
# .date (class for hold tweets date)
# Carousel slider
-----------------------------------------------------------------------------------*/
/* Twitter section wrapper */
.site-twitter {
margin: 0;
display: block;
width: 100%;
clear: both;
color: white;
padding-bottom: 7.5rem;
text-align: center;
background: #2b8dd9;
}
.site-twitter h1 {
/* Heading */
margin-bottom: 2.8125rem;
}
.site-twitter .tweet {
/* Tweet (class) */
}
.site-twitter .tweet ul, .site-twitter .tweet li {
margin: 0;
padding: 0;
display: block;
}
.site-twitter .tweet li {
font-size: 0.875rem;
font-family: inherit;
}
.site-twitter .tweet li p {
font-weight: 400;
margin-bottom: 0;
font-family: inherit;
font-size: 0.813rem;
line-height: 1.625rem;
color: white;
}
.site-twitter .tweet li a {
font-weight: 400;
font-family: inherit;
font-size: 0.813rem;
color: #1f3542;
}
.site-twitter .tweet li .date {
/* date (class) */
font-weight: 700;
font-family: inherit;
font-size: 0.875rem;
margin-top: 0.125rem;
color: white;
}
.site-twitter .swiper-container {
/* carousel container */
margin-bottom: 3.125rem;
margin-top: 1.25rem;
text-align: center;
}
.site-twitter .swiper-container span {
width: 100%;
text-align: center;
display: block;
}
.site-twitter .swiper-pagination {
/* Carousel pagination */
margin-top: 1.25rem;
}
.site-twitter .swiper-button-prev, .site-twitter .swiper-button-next {
/* Carousel navigation */
}
@media screen and (min-width: 768px) {
.site-twitter .swiper-button-prev, .site-twitter .swiper-button-next {
left: 0;
}
}
@media screen and (min-width: 1200px) {
.site-twitter .swiper-button-prev, .site-twitter .swiper-button-next {
left: 2.5rem;
}
}
@media screen and (max-width: 767px) {
.site-twitter .swiper-button-prev, .site-twitter .swiper-button-next {
top: -3.75rem;
}
}
@media screen and (min-width: 768px) {
.site-twitter .swiper-button-next {
left: auto;
right: 0;
}
}
@media screen and (min-width: 1200px) {
.site-twitter .swiper-button-next {
right: 2.5rem;
}
}
/*-----------------------------------------------------------------------------------
[Quick Support] (Section)
# Quick Support (wrapper)
# Heading (h1)
# .site-info (class)
# .site-box (class)
# Images
# Icons
# Typography
# Contact form
-----------------------------------------------------------------------------------*/
/* Quick support wrapper */
.site-quick-support {
padding-bottom:0;
overflow: hidden;
}
.site-quick-support .contact-box {
float:left;
width:100%;
border-radius:12px;
height:640px;
}
@media screen and (max-width: 1199px) {
.site-quick-support {
padding-bottom: 6.25rem;
}
}
.site-quick-support h1 {
/* Heading */
margin-bottom: 4.375rem;
}
.site-quick-support .site-info {
/* info (class) */
float:left;
width: 100%;
text-align: left;
font-size: 0;
border-right:rgba(255,255,255,0.4) solid 1px;
padding:80px 40px 27px 40px;
}
.site-quick-support .site-info.form {
/* info (class) */
border:none;
}
.site-quick-support .site-box {
/* box (class) */
clear: both;
position: relative;
z-index: 10;
padding: 1.25rem 0;
width:100%;
}
.site-quick-support h5 {
font-size:25px;
font-weight:600;
color:#FFFFFF;
}
.site-quick-support .site-info p {
float:left;
width:100%;
font-size:15px;
font-weight:normal;
color:#FFFFFF;
line-height:1.5;
padding:30px 0 30px 0;
}
.site-quick-support .site-box-row h6{
float:left;
font-size:21px;
color:rgba(255, 255, 255, 0.7);
font-weight:normal;
line-height:1.4;
padding:0;
margin:0;
}
.site-quick-support .site-box-row {
float:left;
width:100%;
padding-bottom:17px;
}
.site-quick-support .site-box-row a { color: #fff; }
.site-quick-support .site-box-row a:hover { text-decoration: underline; }
.site-quick-support .site-box-row p {
float:left;
font-size: 19px;
text-align:left;
padding:0 0 0 52px;
margin:0;
line-height:1.2rem;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
}
@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] {
/* Input fields */
width: 100%;
height: 2.688rem;
line-height: 2.688rem;
border: 0.063rem solid white;
border-radius: 1.3125rem;
background: #f2f4f5;
display: block;
margin: 0;
font-weight: 400;
color:#708198;
padding: 0 11.25rem 0 1.25rem;
border:#e9eaf4 solid 1px;
}
@media screen and (max-width: 767px) {
.site-subscribe input[type=email], .site-subscribe input[type=text] {
padding-right: 1.25rem;
}
}
.site-subscribe input[type=submit] {
/* Input submit button */
width: 9.375rem;
min-width: 0.625rem;
height: 2.688rem;
min-height: 0.625rem;
line-height: 2.688rem;
margin: auto 0;
border-radius: 1.3125rem;
box-shadow: none;
color: #FFFFFF;
font-family: inherit;
font-size: 0.813rem;
font-weight: 700;
text-transform: uppercase;
position: absolute;
top: 0;
right: 0;
bottom: 0;
transition: 300ms linear;
transition-property: background, color;
border: 0.063rem solid white;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
}
.site-subscribe input[type=submit]:hover {
background: #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: 90px 0 40px 0;
display: block;
width: 100%;
clear: both;
text-align: center;
background: #313a47 ;
color: white;
}
.site-footer .site-logo {
/* LOGO */
width: 100%;
clear: both;
height: auto;
display: block;
margin: 1.875rem 0;
}
.site-footer .site-logo a {
display: inline-block;
}
.site-social-icons {
/* SOCIAL ICONS */
width: 100%;
clear: both;
padding:50px 0 0 0;
}
.site-social-icons a {
width: 3rem;
height: 3rem;
background:#505762;
border-radius: 12.5rem;
overflow: hidden;
position: relative;
text-align: center;
margin: 0.1875rem;
transition: 300ms linear;
transition-property: background, color, border-color;
}
.site-social-icons a:hover {
color: white;
transition:all ease .5s;
background: rgba(12,206,188,1);
/* Old Browsers */background: -moz-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(12,206,188,1)), color-stop(100%, rgba(49,93,183,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(-45deg, rgba(12,206,188,1) 0%, rgba(49,93,183,1) 100%);
/* IE 10+ */background: linear-gradient(135deg, rgba(12,206,188,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, .site-social-icons span {
color: white;
font-size: 1rem;
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:14px;
line-height:1.5;
width: 100%;
clear: both;
margin-top: 1.25rem;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
}
@media screen and (max-width: 991px) {
.site-footer {
background: #1F3542;
padding:60px 0;
margin-top:0;
}
.site-download-icons {
margin:30px 0;
padding:0;
}
}
/*-----------------------------------------------------------------------------------
[Custom Scroll Bar]
# Custom scroll bar (wrapper)
-----------------------------------------------------------------------------------*/
/* Custom scroll bar wrapper */
.mCustomScrollBox {
/* contains plugin's markup */
position: relative;
overflow: hidden;
height: 100%;
max-width: 100%;
outline: none;
direction: ltr;
}
.mCSB_container {
/* contains the original content */
overflow: hidden;
width: auto;
height: auto;
}
/* VERTICAL SCROLLBAR
y-axis */
.mCSB_inside > .mCSB_container {
margin-right: 1.5625rem;
}
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
margin-right: 0;
}
/* non-visible scrollbar */
.mCS-dir-rtl > .mCSB_inside > .mCSB_container {
/* RTL direction/left-side scrollbar */
margin-right: 0;
margin-left: 1.875rem;
}
.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden {
margin-left: 0;
}
/* RTL direction/left-side scrollbar */
.mCSB_scrollTools {
/* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */
position: absolute;
width: 1.5rem;
height: auto;
left: auto;
top: 0;
right: 0;
bottom: 0;
}
.mCSB_outside + .mCSB_scrollTools {
right: -1.625rem;
}
/* scrollbar position: outside */
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
/* RTL direction/left-side scrollbar */
right: auto;
left: 0;
}
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools {
left: -1.625rem;
}
/* RTL direction/left-side scrollbar (scrollbar position: outside) */
.mCSB_scrollTools .mCSB_draggerContainer {
/* contains the draggable element and dragger rail markup */
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: auto;
}
.mCSB_scrollTools a + .mCSB_draggerContainer {
margin: 1.25rem 0;
}
.mCSB_scrollTools .mCSB_draggerRail {
width: 0.125rem;
height: 100%;
margin: 0 auto;
border-radius: 1rem;
}
.mCSB_scrollTools .mCSB_dragger {
/* the draggable element */
cursor: pointer;
width: 100%;
height: 1.875rem;
/* minimum dragger height */
z-index: 1;
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
/* the dragger element */
position: relative;
width: 0.25rem;
height: 100%;
margin: 0 auto;
border-radius: 1rem;
text-align: center;
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar {
width: 0.75rem;
/* auto-expanded scrollbar */
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail {
width: 0.5rem;
/* auto-expanded scrollbar */
}
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown {
display: block;
position: absolute;
height: 1.25rem;
width: 100%;
overflow: hidden;
margin: 0 auto;
cursor: pointer;
}
.mCSB_scrollTools .mCSB_buttonUp:before,
.mCSB_scrollTools .mCSB_buttonDown:before {
content: "\f0d8";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
text-align: center;
height: 100%;
font-family: FontAwesome, serif;
color: #2b8dd9;
font-size: 1.375rem;
line-height: 1.25rem;
}
.mCSB_scrollTools .mCSB_buttonDown {
bottom: 0;
}
.mCSB_scrollTools .mCSB_buttonDown:before {
content: "\f0d7";
}
.mCSB_draggerRail {
background-color: #e6e9ed;
border-radius: 6.25rem !important;
opacity: 1 !important;
width: 0.75rem !important;
}
.mCSB_scrollTools {
opacity: 1;
}
.mCSB_dragger_bar {
width: 0.375rem !important;
background: #2b8dd9;
border-radius: 0 !important;
opacity: 1 !important;
}
.mCSB_dragger_bar:before {
display: none;
}
/*-----------------------------------------------------------------------------------
[Scroll Back To Top]
-----------------------------------------------------------------------------------*/
/* Scroll back to top wrapper */
#scrollUp {
margin: 0;
padding: 0;
bottom: 1.875rem;
right: 1.875rem;
height: 3.125rem;
width: 3.125rem;
line-height: 3.125rem;
text-align: center;
background: #142834;
border-radius: 12.5rem;
font-size: 1.875rem;
box-shadow: 0 0 0.9375rem rgba(2, 3, 3, 0.19);
transition: 300ms linear;
transition-property: color, background;
color: white;
}
#scrollUp:hover {
color: #1f3542;
background: #D3D3D3;
}
/*-----------------------------------------------------------------------------------
[Preloader]
# Preloader (overlay)
# .preloader (class)
-----------------------------------------------------------------------------------*/
.loadingoverlay {
/* Overlay */
background-size: 40px !important;
}
.preloader {
/* preloader (class) */
opacity: 0;
visibility: hidden;
}
/* Override */
.gear-page-public {
text-align: center;
font-size: 1rem;
line-height: 3;
text-transform: uppercase;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
margin-bottom: 2rem;
}
.fa.fa-viber { background: url(../images/icon-fa-viber.png) no-repeat center center; }
.section-full {
padding: 100px 0 0 0;
display: block;
width: 100%;
clear: both;
min-height: 100px;
position: relative;
height: 950px;
max-width: 100%;
margin: 0 auto;
z-index: 1;
}
.section-full.color-gredient { color: #fff; }
.section-title h2 { display: inline-block; }
.section-title a {
font-size: 1.7rem;
line-height: 4.125rem;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
font-weight: 300;
color: #516074;
margin-left: 10px;
}
.section-title a:hover { text-decoration: underline; }
.section-blue .section-title a { color: rgba(255, 255, 255, 0.7); }
.section-title a::before {
content: "/";
display: inline-block;
margin-right: 10px;
}
/* Breadcrumb */
section.breadcrumb { padding-top: 100px; margin-bottom: 0; }
section.breadcrumb h2 { margin-bottom: 10px; color: #fff; }
ol.breadcrumb { background-color: transparent; border-radius: 0; padding: 0; }
ol.breadcrumb a { color: #fff; }
ol.breadcrumb > .active { color: rgba(255, 255, 255, 0.5); }
/* Pagination */
.pagination > li > a:hover {
transition:all ease .5s;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
color: #fff;
}
.pagination > .active > a { background: #313A47; border: 1px solid #313A47; }
.pagination > .active > a:hover { background: #313A47; }
/* Sections - tabs */
.section-tabs .nav-pills { display: inline-block; }
.section-tabs .nav-pills > li > a {
text-transform: uppercase;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
font-size: 20px;
padding: 10px 30px;
color: #3B9AB7;
}
.section-tabs .nav-pills > li.active > a,
.section-tabs .nav-pills > li.active > a:focus,
.section-tabs .nav-pills > li.active > a:hover {
background-color: #3B9AB7;
color: #fff;
}
.section-tabs .tab-content {
text-align: justify;
color: #6c6b6b;
margin-top: 25px;
}
.section-text h3,
.section-tabs .tab-content h3 {
font-size: 1.6rem;
margin: 1rem 0 0.5rem 0;
}
.section-text p,
.section-tabs .tab-content p { line-height: 1.2; }
.section-text ul,
.section-tabs .tab-content ul,
.section-text ol,
.section-tabs .tab-content ol {
margin-left: 1.2rem;
}
.section-text ul li,
.section-tabs .tab-content ul li {
list-style-type: disc;
margin-bottom: 0.5rem;
}
.section-text ol li,
.section-tabs .tab-content ol li {
list-style-type: normal;
margin-bottom: 0.5rem;
}
ul.none li .fa.fa-check,
.section-tabs ul li .fa.fa-check { color: #13B9BB; }
/* Section - text */
.section-text h2 { text-align: center; }
.section-text {
text-align: justify;
color: #6c6b6b;
}
/* Section - price */
.section-price h3 { font-size: 1.4rem; text-decoration: underline; }
.section-price .list {
margin-left: 20px;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
font-size: 1.1rem;
}
.section-price .list .row { margin-bottom: 12px; margin-top: 12px; border-bottom: 1px dashed silver; }
.section-price .list .col-price {
font-size: 1.3em;
color: #3B9AB7
}
.section-price .list p { font-size: 0.9rem; color: silver; }
/* Section - article */
.section-article { margin-top: 2rem; margin-bottom: 120px; background: #fff; }
article { color: #6c6b6b; }
article p { line-height: 1.2; margin-bottom: 0.3rem; }
article ul, article ol { margin-left: 1rem; }
article ul li, article ol li { line-height: 1.3; margin-bottom: 10px; list-style-type: inherit; }
article h3 { font-size: 1.5rem; margin: 1rem 0 0.5rem 0; }
article h2 { margin: 0.7rem 0 0.7rem 0; }
article .share { text-align: right; margin-bottom: 10px; }
/* Section - post */
.section-post { margin-top: 2rem; margin-bottom: 120px; }
.section-post article p { line-height: 1.5; margin-bottom: 0.8rem; text-align: justify; }
.section-post .post-sidebar { color: #6c6b6b; }
.section-post .single-sidebar h2 {
margin: 0.7rem 0 0.7rem 0;
font-size: 1.5rem;
}
.single-post .post-head { overflow: hidden; }
/* Sidebar tags */
.single-sidebar.tags ul li { display: inline-block; }
.single-sidebar.tags ul li a {
background-color: #3B9AB7;
padding: 3px 8px 3px 8px;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
color: #fff;
border-radius: 3px;
margin-bottom: 5px;
}
.single-sidebar.tags ul li a:hover { background-color: #6c6b6b; }
/* Section - posts */
.section-posts { padding-top: 0; padding-bottom: 110px; }
.section-posts .blog-post-content { min-height: 250px; }
.section-posts .blog-more-button {
padding: 15px;
text-align: center;
background: #EFF1F4;
color: #516074;
}
.section-posts .header-tags {
text-align: center;
padding: 20px;
}
.section-posts .header-tags ul li { display: inline-block; }
.section-posts .header-tags ul li a {
background-color: #3B9AB7;
padding: 3px 8px 5px 8px;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
font-size: 1.2rem;
color: #fff;
border-radius: 3px;
line-height: 1;
}
.section-posts .header-tags ul li a:hover { background-color: #6c6b6b; }
/* Section - wtemplate */
.section-wtemplate-header { margin-top: 1.5rem; }
.section-wtemplate-header p { color: #6c6b6b; text-align: justify; font-size: 0.9rem; }
.section-wtemplate-header p.select { color: #333; margin-bottom: 15px; }
.section-wtemplate .single-sidebar { color: #6c6b6b; text-align: left; padding-top: 25px; }
.section-wtemplate-header h3,
.section-wtemplate .single-sidebar h3 {
margin: 0.7rem 0 0.7rem 0;
font-size: 1.5rem;
}
.section-wtemplate .row { margin-left: -20px; margin-right: -20px; }
.section-wtemplate .row > div { padding-left: 7px; padding-right: 7px; }
.single-sidebar.categories ul li { display: inline-block; }
.single-sidebar.categories ul li a {
background-color: #E9EBEF;
padding: 6px 8px 6px 8px;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
font-size: 0.9rem;
line-height: 0.9rem;
color: #fff;
border-radius: 3px;
margin-bottom: 4px;
color: #6c6b6b;
}
.single-sidebar.categories ul li.active a,
.single-sidebar.categories ul li a:hover { background-color: #6c6b6b; color: #fff; }
.wtemplate-box .popular {
position: absolute;
padding: 5px 10px 5px 10px;
border-radius: 0 10px 0 0;
color: #fff;
right: 0;
top: 0;
width: auto;
background: rgba(255, 0, 0, 0.7);
-webkit-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
box-shadow: 1px 1px 3px 0px rgba(0,0,0,0.75);
}
.wtemplate-box figure { height: 23rem; }
.wtemplate-box figure img { height: auto; width: 100%; }
.wtemplate-box a h3 { text-align: center; font-size: 0.9rem; font-weight: bold; }
.wtemplate-box a h3 em { display: block; text-align: center; font-style: normal; font-weight: normal; text-transform: lowercase; }
.wtemplate-box-content {
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
float: left;
width: 100%;
padding: 0 30px 10px 30px;
}
.wtemplate-box-head { min-height: 80px; }
.wtemplate-box-footer {
text-align: center;
background: #EFF1F4;
color: #516074;
float: left;
width: 100%;
border-radius: 0 0 12px 12px;
}
.wtemplate-box-footer a {
display: block;
padding: 15px;
color: #516074;
}
.wtemplate-box-footer a:hover {
background-color: #1D9BBA !important;
color: #fff;
}
.wtemplate-box-footer a.col-details {
border-radius: 0 0 0 12px;
background-color: #EFF1F4;
font-size: 0.9rem;
padding: 16px 10px 16px 10px;
}
.wtemplate-box-footer a.col-view {
border-radius: 0 0 12px 0;
background-color: #DEE3E7;
}
.wtemplate-box-footer a.col-view i { font-size: 0.9rem; }
.article-wtemplate ul.props {
margin-left: 0;
font-family: "Roboto Condensed",arial,tahoma,sans-serif;
}
.article-wtemplate ul.props li .title {
font-size: 2rem;
line-height: 1;
color: #3B9AB7;
font-weight: 300;
}
.article-wtemplate ul.props li .title.small { font-size: 1.5rem; }
.article-wtemplate ul.props li { list-style-type: none; }
.article-wtemplate ul.props li a { font-size: 1rem; color: #267EB8; }
.article-wtemplate ul.props li a.btn { font-size: 1rem; }
.article-wtemplate ul.props li a.btn.btn-order { border: 0; color: #fff; }
/* Override Form Validation */
.fv-form-bootstrap .help-block {
font-size: 0.9rem;
color: #EAB734;
}
/* Order form */
#order-popup { z-index: 100001; }
#order-popup .modal-title {
text-align: center;
color: #fff;
font-weight: bold;
}
#order-popup .btn {
text-align: center;
box-shadow: none;
background: #fff;
color: #516074;
border-radius: 0.5rem;
min-height: 2.7rem;
}
#order-popup .btn:hover { background: #EFF1F4; }
#order-popup .row.row-buttons {
text-align: center;
padding: 10px;
}
/* Section error */
.section-error { background: #fff; }
.section-error article { display: block; padding-top: 7rem; padding-bottom: 7rem; }
/* Section thumbs */
.sections-i-thumbs a { float: left; margin: 7px; }
.sections-i-thumbs::after { display: block; content: " "; clear: both; }
/* Responsive Styles */
@media screen and (max-width:1200px) {
/* Slider */
.header-slider { height: 800px; }
.header-slider h1 { font-size: 2rem; }
.header-slider h2 { font-size: 1.5rem; }
.header-slider .slide-text { font-size: 1rem; }
.header-slider .seq-canvas { width: 90%; }
}
@media screen and (max-width:1024px) {
/* Slider */
.header-slider { height: 100%; }
/* Headers */
.section-white h2, .section-blue h2, .section-grey h2, .two-colom-section h2 { font-size: 2.2rem; }
/* Two columns */
.half-colom-right-section { text-align: center; }
.half-colom-right-section img { max-width: 70%; }
}
@media screen and (max-width:960px) {
/* Slider */
.header-slider .slide-caption { top: 12%; }
.section-white, .section-blue { padding: 40px 0; }
.half-colom-padding { padding: 0; }
}
@media screen and (max-width:766px) {
/* Slider */
.header-slider h1 { font-size: 1.6rem; text-align: left; }
.header-slider h2 { font-size: 1.2rem; margin-bottom: 1rem; }
.header-slider .slide-text { margin-bottom: 0; }
/* Section - news */
.latest-blog figure img { height: auto; width: 100%; }
.latest-blog .blog-post-box { min-height: auto; }
}