html {
margin: 0;
padding: 0;
display: block;
font-size: 16px;
}
body {
margin: 0;
padding: 0;
display: block;
font-size: 100%;
/* ----------------------------- Global font */
font-family: 'Montserrat', sans-serif;
/*background: white;*/
}
* {
outline: none !important;
}
/* a tag */
a {
display: inline-block;
max-width: 100%;
text-decoration: none;
color: #13a89e;
}
a:hover,
a:active,
a:focus,
a:visited {
color: #f1582d;
text-decoration: none;
}
/* Responsive image */
img {
display: inline-block;
max-width: 100%;
}
span {
display: inline-block;
max-width: 100%;
}
figure {
overflow: hidden;
max-width: 100%;
display: block;
}
/* Input Placeholders */
:-moz-placeholder {
opacity: 1;
}
:-ms-input-placeholder {
opacity: 1;
}
::-webkit-input-placeholder {
opacity: 1;
}
::-moz-placeholder {
opacity: 1;
}
/* I tag for font-awesome icons */
i {
display: inline-block;
}
/* bootstrap colom padding remove */
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
/* Paragraph */
p {
color: #6c6e85;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
font-family: inherit;
text-align: left;
}
/* Horizontal line */
hr {
max-width: 70px;
width: 100%;
display: block;
height: 0;
clear: both;
border: 2px solid #d7d7d7;
margin: 0;
}
/* White section (.site-white-section) class */
.site-white-section,
.site-dark-section {
margin: 0;
padding: 20px 0 10px 0;
width: 100%;
clear: both;
display: block;
text-align: center;
background: white;
}
.site-white-section .address-info {
padding: 26px 0 40px 0 !important;
}
@media screen and (max-width: 767px) {
.site-white-section,
.site-dark-section {
padding: 50px 0;
}
#d .tf_container {
height: 850px !important;
}
.tf_slide img {
width: 100% !important;
float: left;
}
#d .tf_slide p {
width: 100% !important;
}
span.client {
width: 100% !important;
}
.tf_thumb img
{
width: 100px !important;
height: 50px !important;
}
#tf_thumbs .tf_thumb {
margin: 0 -1px !important;
}
}
.site-white-section h1,
.site-dark-section h1 {
/* H1 heading */
color: #fff !important;
font-family: inherit;
font-size: 22px;
line-height: 1;
text-transform: inherit;
font-weight: 600;
position: relative;
display: block;
background: #13a89e;
float: left;
text-align: center;
padding: 10px 18px;
}
.site-white-section h1 a,
.site-dark-section h1 a {
color: #1a1e2a;
}
@media screen and (max-width: 767px) {
.site-white-section h1,
.site-dark-section h1 {
font-size: 19px;
}
h1.contact {
margin-top: -75px;
}
}
.site-white-section h1 strong,
.site-dark-section h1 strong {
font-weight: 700;
}
.site-white-section h1:before,
.site-dark-section h1:before {
/* H1 horizontal line */
/*content: "";
position: absolute;
max-width: 70px;
width: 100%;
display: block;
height: 4px;
background: #d7d7d7;
margin: 0 auto;
left: 0;
right: 0;
top: 100%;*/
}
.site-white-section h2,
.site-dark-section h2 {
/* H2 Heading */
float: left;
width: 100%;
font-family: inherit;
font-size: 35px;
font-weight: 700;
line-height: 1.4;
text-transform: inherit;
color: #1d1f33;
text-align: left;
padding: 0;
margin: 0 0 60px 0;
}
@media screen and (max-width: 767px) {
.site-white-section h2,
.site-dark-section h2 {
font-size: 20px;
}
}
.site-white-section h2 a,
.site-dark-section h2 a {
color: #1a1e2a;
}
.site-white-section h2 span,
.site-dark-section h2 span {
color: #13a89e;
}
.site-white-section h3,
.site-dark-section h3,
.site-white-section h4,
.site-dark-section h4,
.site-white-section h5,
.site-dark-section h5,
.site-white-section h6,
.site-dark-section h6 {
/* a tag color change inside headings */
}
.site-white-section h3 a,
.site-dark-section h3 a,
.site-white-section h4 a,
.site-dark-section h4 a,
.site-white-section h5 a,
.site-dark-section h5 a,
.site-white-section h6 a,
.site-dark-section h6 a {
color: #1a1e2a;
}
/* Dark section (.site-dark-section) class */
.site-dark-section {
margin: 0;
width: 100%;
clear: both;
display: block;
text-align: center;
background: #FFFFFF;
color: white;
}
.site-dark-section h1 {
/* H1 heading */
color: #ffffff;
}
.site-dark-section h2 {
/* H2 heading */
/*color: white;*/
}
.site-dark-section p {
/* Paragraph */
color: white;
}
/* Align center class */
.section-align-center {
display: inline-block;
}
/* Theme button */
a.theme-btn {
/* a tag */
color: white;
background: #3243e3;
font-size: 13px;
font-weight: 700;
line-height: 22px;
text-transform: uppercase;
text-align: center;
padding: 12px 30px 12px 30px;
position: relative;
overflow: hidden;
transition: 400ms ease;
transition-property: color, background;
cursor: pointer;
z-index: 10;
display: inline-block;
letter-spacing: 1px;
-webkit-box-shadow: 0px 8px 12px 0px rgba(24, 50, 184, 0.19);
-moz-box-shadow: 0px 8px 12px 0px rgba(24, 50, 184, 0.19);
box-shadow: 0px 8px 12px 0px rgba(24, 50, 184, 0.19);
}
@media screen and (max-width: 375px) {
a.theme-btn {
padding: 5px 15px 5px 15px;
font-size: 6px;
line-height: 12px;
}
.dwnld-btn {
padding: 12px 30px 12px 30px !important;
font-size: 9px !important;
float: left;
}
}
@media screen and (max-width: 414px) {
a.theme-btn {
/* padding: 5px 15px 5px 15px; */
font-size: 6px;
line-height: 12px;
float: initial;
}
}
media screen and (max-width: 360px) {
a.theme-btn {
padding: 5px 15px 5px 15px;
font-size: 6px;
line-height: 12px;
}
}
@media screen and (max-width: 320px) {
a.theme-btn {
padding: 2px 15px 2px 15px;
font-size: 6px;
line-height: 12px;
}
}
@media(min-width: 640px)and (max-width: 640px) {
.text-field-2 {
height: 40px !important;
}
}
a.theme-btn:hover {
color: #FFFFFF;
background: #4959ea;
}
/* Swiper carousel slider pagination */
.swiper-pagination {
width: 100%;
display: block;
clear: both;
padding: 0;
position: relative;
margin: 40px 0 0;
overflow: hidden;
left: 0;
top: auto;
opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet {
width: 17px;
height: 17px;
background-color: #636e78;
transition: 400ms ease;
transition-property: background-color;
margin: 8px !important;
opacity: 1;
}
.swiper-pagination .swiper-pagination-bullet-active {
background-color: #13a89e;
}
/* Swiper carousel slider navigation */
.swiper-button-prev,
.swiper-button-next {
/* Prev navigation button */
width: 50px;
height: 50px;
line-height: 50px;
display: block;
background: white none;
text-align: center;
transition: 400ms ease;
transition-property: background-color;
top: 0;
bottom: 0;
margin: auto 0;
left: 10px;
overflow: hidden;
border-radius: 2px;
}
@media screen and (max-width: 767px) {
.swiper-button-prev,
.swiper-button-next {
margin: 0;
}
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background-color: #2E3F59;
}
.swiper-button-prev:hover:before,
.swiper-button-next:hover:before {
color: white;
}
.swiper-button-prev:before,
.swiper-button-next:before {
content: "\e902";
font-family: 'icomoon', serif;
display: block;
color: rgba(26, 30, 42, 0.4);
transition: 400ms ease;
transition-property: color;
position: relative;
left: -2px;
}
.swiper-button-next {
/* Next navigation button */
right: 10px;
left: auto;
}
.swiper-button-next:before {
content: "\e903";
left: 2px;
}
/*-----------------------------------------------------------------------------------
Header (section)
# header container
# logo
# navigation
# navigation toggle button
-----------------------------------------------------------------------------------*/
/* Header container */
header.site-header {
margin: 0;
padding: 0px 0 14px;
display: block;
width: 100%;
clear: both;
background: #fff;
position: relative;
height: 85px;
z-index: 100;
box-shadow: -27px -55px 72px 38px rgba(17, 17, 17, 0.63);
top: 0 !important;
z-index: 9 !important;
}
/* Logo */
.site-logo {
position: relative;
float: left;
line-height: 85px;
}
.site-logo a {
position: relative;
padding-left: 0;
}
.site-logo img {
position: relative;
top: 0;
left: 0px;
bottom: 0;
width: 80%;
}
.site-logo h1 {
width: 100%;
display: block;
margin: 0;
padding: 0;
color: #1a1e2a;
font-size: 33px;
font-weight: 500;
line-height: 27px;
}
.site-logo small {
width: 100%;
display: block;
margin: 0;
padding: 0;
text-align: left;
color: #989899;
font-size: 11px;
font-weight: 500;
text-transform: uppercase;
}
/* When header is sticky the sub menu not goes down more then 400ms px */
@media screen and (max-width: 991px) {
.sticky-wrapper.is-sticky .site-nav {
max-height: 400px;
overflow: hidden;
overflow-y: auto;
}
.site-main-banner {
margin-top: -24px !important;
}
header.site-header {
height: 60px;
}
.site-logo {
line-height: 60px;
}
}
.sticky-wrapper {
height: 84px !important;
}
/* Header navigation */
.site-nav {
margin: 0;
padding: 0;
display: block;
float: right;
line-height: 85px;
}
@media screen and (min-width: 992px) {
.site-nav {
display: block !important;
}
}
@media screen and (max-width: 991px) {
.site-nav {
/* mobile menu */
position: relative;
width: 100%;
transition: 400ms ease;
transition-property: transform;
z-index: 100;
border-top: 1px solid #d7d7d7;
/* margin-top: 20px;
padding: 20px 0 0; */
display: none;
background-color: #fff;
}
}
.site-nav ul {
margin: 0;
padding: 0;
display: block;
}
.site-nav li {
margin: 0;
padding: 0 0px;
display: block;
float: left;
list-style: none;
}
@media screen and (max-width: 991px) {
.site-nav li {
width: 100%;
position: relative;
padding: 0 10px;
}
}
.site-nav li.active > a,
.site-nav li:hover > a {
/* Active Item */
color: #f1582d;
}
li.about:active {
color: #f1582d;
}
.site-nav li:last-child > a {
/* Last child padding remove */
padding-right: 0;
}
.site-nav a {
font-size: 12px;
font-weight: 700;
line-height: 29px;
text-transform: uppercase;
color: #000;
padding: 10px 8px;
transition: 400ms ease;
transition-property: color;
}
@media screen and (max-width: 1199px) {
.site-nav a {
padding-left: 10px;
padding-right: 10px;
}
.text-field-2 {
font-size: 12px !important;
}
}
@media screen and (max-width: 991px) {
.site-nav a {
width: auto;
display: inline-block;
padding: 6px 30px 6px 0;
line-height: 18px;
z-index: 1;
position: relative;
}
}
.site-nav a > i.fa {
/* font awesome icon */
margin-left: 5px;
display: inline-block;
}
@media screen and (max-width: 991px) {
.site-nav a > i.fa {
display: none;
}
}
.site-nav .indicator-desktop {
/* sub menu indicator for desktop */
}
@media screen and (max-width: 991px) {
.site-nav .indicator-desktop {
display: none !important;
}
}
.site-nav .indicator-mobile {
/* sub menu indicator for mobile */
display: none;
}
@media screen and (max-width: 991px) {
.site-nav .indicator-mobile {
display: block;
color: #000;
float: right;
font-size: 20px;
line-height: 26px;
width: 100%;
height: 26px;
position: absolute;
top: 16px;
right: 5px;
bottom: 0;
padding-right: 5px;
cursor: pointer;
z-index: 0;
text-align: right;
}
}
.site-nav li:hover > .sub-menu {
/* show the sub menu on mouse hover */
opacity: 1;
visibility: visible;
}
.site-nav ul.sub-menu {
/* sub menu */
margin: 0;
padding: 10px 0 10px;
display: block;
position: absolute;
top: auto;
left: auto;
background: #fff;
min-width: 150px;
visibility: hidden;
opacity: 0;
transition: 400ms ease;
transition-property: opacity, visibility;
}
@media screen and (min-width: 992px) {
.site-nav ul.sub-menu {
display: block !important;
}
}
@media screen and (max-width: 991px) {
.site-nav ul.sub-menu {
position: relative;
top: 0;
left: 0;
opacity: 1;
visibility: visible;
width: 100%;
display: none;
float: left;
clear: both;
padding: 10px 0 10px 20px;
}
}
.site-nav ul.sub-menu .sub-menu {
/* second level sub menu */
left: 100%;
top: -10px;
padding-top: 10px;
}
@media screen and (min-width: 992px) {
.site-nav ul.sub-menu .sub-menu {
display: block !important;
}
}
@media screen and (max-width: 991px) {
.site-nav ul.sub-menu .sub-menu {
position: relative;
top: 0;
left: 0;
opacity: 1;
visibility: visible;
padding-bottom: 10px;
display: none;
}
}
.site-nav ul.sub-menu li {
margin: 0;
padding: 0;
display: block;
width: 100%;
clear: both;
position: relative;
}
.site-nav ul.sub-menu a {
line-height: normal;
width: 100%;
display: block;
padding-left: 20px;
padding-right: 20px;
}
@media screen and (max-width: 1199px) {
.site-nav ul.sub-menu a {
padding-left: 15px;
padding-right: 15px;
}
}
@media screen and (max-width: 991px) {
.site-nav ul.sub-menu a {
line-height: 18px;
display: inline-block;
width: auto;
padding: 6px 30px 6px 0;
}
}
.site-nav ul.sub-menu a i.fa {
margin-left: 6px;
display: inline-block;
position: relative;
top: -1px;
}
/* Navigation toggle button */
.site-nav-toggle {
display: none;
float: right;
margin-top: 30px;
cursor: pointer;
}
@media screen and (max-width: 991px) {
.site-nav-toggle {
display: block;
margin-top: 20px;
}
}
@media screen and (max-width: 767px) {
.site-nav-toggle {
margin-right: 10px;
}
}
.site-nav-toggle span {
width: 40px;
display: block;
clear: both;
margin-bottom: 9px;
height: 4px;
background: #f1582d;
transition: 400ms ease;
transition-property: opacity, transform;
opacity: 1;
transform-origin: top left;
transform: rotate(0deg);
}
.site-nav-toggle span span:nth-child(3) {
transform-origin: bottom left;
}
.site-nav-toggle.active {
/* Active Toggle button */
}
.site-nav-toggle.active span:nth-child(1) {
transform: rotate(40deg);
transition-delay: 200ms;
}
.site-nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.site-nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg);
transition-delay: 200ms;
}
/*-----------------------------------------------------------------------------------
[Main banner (section)]
# Main banner container
# bootstrap container (fluid) for banner
# banner container
# banner background images change css
# banner bullets
# banner content holder (caption)
# h1 heading
# h2 heading
-----------------------------------------------------------------------------------*/
/* Main banner */
.site-main-banner {
float: left;
width: 100%;
/* background:url(../images/static-banner.jpg) no-repeat center center; */
background-attachment: fixed;
background-size: cover;
margin: 0;
padding: 0;
display: block;
clear: both;
position: relative;
text-align: center;
}
.site-main-banner a.theme-btn {
/* slider href buttons */
color: #e51c36;
border: #e51c36 solid 1px;
background: none;
box-shadow: none;
}
.site-main-banner a.theme-btn:hover {
/* slider href buttons hover*/
color: #f1582d;
border: #FFFFFF solid 1px;
background: #FFFFFF;
box-shadow: none;
}
.site-main-banner .caption {
/* slider content holder (caption) */
position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%);
padding: 300px 0;
}
.site-main-banner figure {
float: left;
width: 100%;
text-align: center;
padding: 0 0 15px 0;
}
@media screen and (max-width: 375px) {
.site-main-banner figure {
width: 135px;
width: 100%;
}
}
@media screen and (max-width: 414px) {
.site-main-banner figure {
width: 114px;
width: 100%;
}
}
@media screen and (max-width: 320px) {
.site-main-banner figure img {
width: 115px !important;
margin-top: -11px;
}
}
.banner-text {
position: absolute;
top: 20%;
left: 20%;
}
.site-main-banner h1 {
/* h1 heading */
font-family: inherit;
font-size: 80px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.2;
text-transform: capitalize;
position: relative;
padding: 0;
margin: 0;
width: 800px;
}
.site-main-banner h1 a {
color: #FFFFFF;
}
@media screen and (max-width: 991px) {
.site-main-banner h1 {
font-size: 13px;
}
.site-main-banner figure img {
width: 200px;
}
.site-main-banner h1 {
line-height: 0;
height: 1px;
}
}
@media screen and (max-width: 767px) {
.site-main-banner .caption {
padding: 150px 0;
}
.site-main-banner h1 {
font-size: 11px;
width: 100%;
}
.site-main-banner figure img {
width: 110px;
}
}
.site-main-banner h2 {
/* h1 heading */
font-family: inherit;
font-size: 14px;
font-weight: 700;
color: #fff;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
padding: 25px 0;
margin: 0;
position: relative;
display: inline-block;
}
@media screen and (max-width: 375px) {
.site-main-banner h2 {
font-size: 6px;
padding: 0px 0;
}
}
@media screen and (max-width: 414px) {
.site-main-banner h2 {
font-size: 6px;
padding: 7px 0 !important;
}
}
@media screen and (max-width: 320px) {
.site-main-banner h2 {
font-size: 6px;
padding: 0px 0;
}
}
@media screen and (max-width: 1024px) {
.site-main-banner h2 {
padding: 18px 0px;
}
}
.site-main-banner h2:before {
position: absolute;
content: "";
border-top: 1px solid #FFFFFF;
height: 0;
left: auto;
right: -60px;
top: 50%;
width: 40px;
opacity: .5;
}
.site-main-banner h2:after {
position: absolute;
content: "";
border-top: 1px solid #FFFFFF;
height: 0;
left: -60px;
right: auto;
top: 50%;
width: 50px;
opacity: .5;
}
@media screen and (max-width: 767px) {
.site-main-banner h2:before {
display: none;
}
.site-main-banner h2:after {
display: none;
}
}
/*-----------------------------------------------------------------------------------
parallax-element
-----------------------------------------------------------------------------------*/
.parallax-element {
position: absolute;
z-index: 0 !important;
}
.site-main-banner-ele-1 {
right: 150px;
top: 100px;
}
.site-main-banner-ele-2 {
left: 100px;
bottom: 100px
}
.site-main-banner-ele-3 {
right: 100px;
bottom: 100px
}
@media screen and (max-width: 1199px) {
.parallax-element {
display: none;
}
}
/*-----------------------------------------------------------------------------------
[Main slider (section)]
# Main slider container
# bootstrap container (fluid) for slider
# slider navigation
# Icomoon custom icon for slider navigation
# slider container
# slider background images change css
# slider pagination
# slider bullets
# slider content holder (caption)
# h1 heading
# h2 heading
# paragraph
# slider
-----------------------------------------------------------------------------------*/
/* Main Slider */
.site-main-slider {
margin: 0;
padding: 0;
display: block;
width: 100%;
clear: both;
background: #eaeaea;
min-height: 100px;
position: relative;
}
.site-main-slider .container-fluid {
/* bootstrap fluid container max width set for slider */
max-width: 1200px;
}
.site-main-slider .swiper-button-prev,
.site-main-slider .swiper-button-next {
/* slider navigation next and prev button */
width: 50px;
height: 50px;
background-color: white;
border-radius: 0;
left: 0;
transition: 400ms ease;
transition-property: background-color;
}
@media screen and (max-width: 767px) {
.site-main-slider .swiper-button-prev,
.site-main-slider .swiper-button-next {
top: 20px;
left: 20px;
}
}
.site-main-slider .swiper-button-prev:hover,
.site-main-slider .swiper-button-next:hover {
/* button hover */
background-color: #13a89e;
}
.site-main-slider .swiper-button-prev:hover:before,
.site-main-slider .swiper-button-next:hover:before {
color: white;
opacity: 1;
}
.site-main-slider .swiper-button-prev:before,
.site-main-slider .swiper-button-next:before {
/* Custom font icon */
opacity: 0.4;
color: #1e222e;
transition: 400ms ease;
transition-property: color, opacity;
}
.site-main-slider .swiper-button-next {
/* slider navigation next button */
width: 50px;
height: 50px;
background-color: white;
border-radius: 0;
right: 0;
left: auto;
}
@media screen and (max-width: 767px) {
.site-main-slider .swiper-button-next {
right: 20px;
}
}
.site-main-slider .swiper-container {
/* slider container */
width: 100%;
height: 100%;
background: #E8E8E9;
}
.site-main-slider .swiper-slide {
/* single slide
Here is the code. If you want to change the slider background image css.*/
background-position: center center;
background-size: cover;
padding: 140px 0 160px;
}
@media screen and (max-width: 991px) {
.site-main-slider .swiper-slide {
background-position: center left;
}
}
.site-main-slider .swiper-pagination {
/* slider pagination container */
width: 100%;
clear: both;
padding: 0;
display: block;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 0 47px;
}
.site-main-slider .swiper-pagination-bullet {
/* slider pagination bullet */
width: 16px;
height: 16px;
background-color: #acafb5;
border-radius: 100px;
}
.site-main-slider .swiper-pagination-bullet-active {
/* slider active pagination bullet */
background-color: #13a89e;
}
.site-main-slider .sequence-caption {
/* slider content holder (caption) */
position: relative;
top: 50%;
left: 0;
right: 0;
bottom: auto;
display: block;
width: 100%;
height: auto;
padding-left: 80px;
padding-right: 80px;
transform: translateY(-50%);
}
@media screen and (max-width: 991px) {
.site-main-slider .sequence-caption {
transform: translateY(0);
top: 0;
padding-top: 40px;
}
}
@media screen and (max-width: 767px) {
.site-main-slider .sequence-caption {
padding-left: 0;
padding-right: 0;
text-align: center;
padding-top: 80px;
}
}
.site-main-slider h1 {
/* h1 heading */
color: #1a1e2a;
font-family: inherit;
font-size: 44px;
font-weight: 700;
line-height: 44px;
text-transform: uppercase;
position: relative;
}
@media screen and (max-width: 1199px) {
.site-main-slider h1 {
font-size: 34px;
}
}
@media screen and (max-width: 991px) {
.site-main-slider h1 {
font-size: 32px;
text-align: center;
}
}
@media screen and (max-width: 767px) {
.site-main-slider h1 {
font-size: 22px;
line-height: 28px;
}
}
.site-main-slider h1:before {
/* 4px div show left side the h1 heading */
content: "";
position: absolute;
top: 4px;
left: -30px;
display: block;
width: 4px;
height: 76px;
background-color: #13a89e;
}
@media screen and (max-width: 991px) {
.site-main-slider h1:before {
display: none;
}
}
.site-main-slider h2 {
/* h2 heading */
color: #1a1e2a;
font-family: inherit;
font-size: 8px;
font-weight: 400;
line-height: 40px;
}
@media screen and (max-width: 991px) {
.site-main-slider h2 {
text-align: center;
}
}
@media screen and (max-width: 767px) {
.site-main-slider h2 {
font-size: 22px;
line-height: 28px;
}
}
.site-main-slider h2 u {
/* inside heading text underline */
text-decoration: none;
display: inline-block;
position: relative;
}
.site-main-slider h2 u:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: block;
height: 2px;
background: #1a1e2a;
}
.site-main-slider p {
/* paragraph */
color: #777;
font-family: inherit;
font-size: 13px;
font-weight: 400;
line-height: 27px;
margin-bottom: 40px;
}
@media screen and (max-width: 991px) {
.site-main-slider p {
text-align: center;
}
}
.site-main-slider a.theme-btn {
/* slider href buttons */
border: 2px solid #1a1e2a;
color: #1a1e2a;
font-family: inherit;
font-size: 13px;
font-weight: 700;
line-height: 22px;
text-transform: uppercase;
transition: 400ms ease;
transition-property: background, border-color, color;
margin-right: 24px;
white-space: nowrap;
}
@media screen and (max-width: 991px) {
.site-main-slider a.theme-btn {
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
}
.site-main-slider a.theme-btn:hover {
background: #13a89e;
border-color: #13a89e;
color: white;
}
.site-main-slider .seq-canvas {
/* Sequence slider */
padding: 0;
display: block;
clear: both;
width: 100%;
position: relative;
min-height: 760px;
/* Slider height change */
overflow: hidden;
background: no-repeat center right;
max-width: 1400px;
margin: 0 auto;
}
.site-main-slider .sequence-slide {
/* Slides */
margin: 0;
padding: 0;
display: block;
clear: both;
width: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
}
.site-main-slider .sequence-slide.seq-in {
/*---------------------- Sequence in animation */
}
.site-main-slider .sequence-slide.seq-in .sequence-bg {
/* background image animation */
transform: translateX(0);
}
.site-main-slider .sequence-slide.seq-in .sequence-caption {
/* caption animation */
opacity: 1;
transition-delay: 1500ms;
}
.site-main-slider .sequence-slide.seq-out {
/*---------------------- Sequence out animation */
}
.site-main-slider .sequence-slide.seq-out .sequence-bg {
/* background image animation */
transform: translateX(2000px);
}
.site-main-slider .sequence-slide.seq-out .sequence-caption {
/* caption animation */
opacity: 0;
}
.site-main-slider .sequence-bg {
/* Background image */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
height: 100%;
width: 100%;
clear: both;
transform: translateX(-2000px);
transition: transform 2000ms ease;
background: no-repeat center right 20px;
}
@media screen and (max-width: 1199px) {
.site-main-slider .sequence-bg {
background-size: 40%;
background-position: right bottom;
}
}
@media screen and (max-width: 991px) {
.site-main-slider .sequence-bg {
background-size: 22%;
background-position: center bottom;
}
}
@media screen and (max-width: 767px) {
.site-main-slider .sequence-bg {
background-size: 30%;
}
}
.site-main-slider .sequence-caption {
/* Caption */
opacity: 0;
transition: opacity 600ms ease;
}
@media screen and (max-width: 991px) {
.site-main-slider .sequence-caption {
text-align: center;
}
}
.site-main-slider .seq-pagination {
/* pagination */
margin: 0;
padding: 0;
display: block;
position: absolute;
left: 0;
right: 0;
bottom: 50px;
width: 100%;
z-index: 10;
text-align: center;
}
.site-main-slider .seq-pagination li {
width: 16px;
height: 16px;
background-color: #acafb5;
display: inline-block;
border-radius: 100px;
overflow: hidden;
text-indent: -9999px;
cursor: pointer;
transition: 400ms ease;
transition-property: background-color;
margin: 4px;
}
.site-main-slider .seq-pagination li.seq-current {
background-color: #13a89e;
}
.site-main-slider .seq-prev,
.site-main-slider .seq-next {
/* navigation */
padding: 0;
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50px;
height: 50px;
background-color: white;
z-index: 10;
border: none;
margin: auto 0;
transition: 400ms ease;
transition-property: background-color;
}
@media screen and (max-width: 767px) {
.site-main-slider .seq-prev,
.site-main-slider .seq-next {
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
}
}
.site-main-slider .seq-prev:hover,
.site-main-slider .seq-next:hover {
background: #13a89e;
}
.site-main-slider .seq-prev:hover span,
.site-main-slider .seq-next:hover span {
opacity: 1;
color: white;
}
.site-main-slider .seq-prev span,
.site-main-slider .seq-next span {
opacity: 0.4;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
text-align: center;
width: 100%;
line-height: 50px;
color: #1e222e;
transition: 400ms ease;
transition-property: color, opacity;
}
.site-main-slider .seq-next {
left: auto;
right: 0;
}
.site-main-slider.slider-version-1 {
/* ------------------------ slider version 1 */
background-color: #404040;
}
.site-main-slider.slider-version-1 .seq-canvas {
max-width: 100%;
}
.site-main-slider.slider-version-1 .sequence-slide .sequence-bg {
background: no-repeat center;
background-size: cover;
opacity: 0;
transform: scale(1);
transition: transform 2000ms ease, opacity 2000ms ease;
}
.site-main-slider.slider-version-1 .sequence-caption {
text-align: center;
width: 100%;
opacity: 1;
transition: transform 2000ms ease;
transition-delay: 0ms !important;
top: 50%;
transform: translate(-2000px, -50%);
}
.site-main-slider.slider-version-1 .sequence-caption * {
color: white;
}
.site-main-slider.slider-version-1 .sequence-caption h2 {
text-transform: none;
}
.site-main-slider.slider-version-1 .sequence-caption u:after {
background-color: white;
}
.site-main-slider.slider-version-1 .sequence-caption h1 {
text-transform: none;
}
.site-main-slider.slider-version-1 .sequence-caption h1:before {
display: none;
}
.site-main-slider.slider-version-1 .sequence-caption .theme-btn {
border-color: white;
margin-right: 12px;
margin-left: 12px;
}
.site-main-slider.slider-version-1 .sequence-caption .theme-btn:hover {
border-color: #13a89e;
}
.site-main-slider.slider-version-1 .sequence-slide.seq-in {
/*---------------------- Sequence in animation */
}
.site-main-slider.slider-version-1 .sequence-slide.seq-in .sequence-bg {
/* background image animation */
transform: scale(1.2);
opacity: 1;
}
.site-main-slider.slider-version-1 .sequence-slide.seq-in .sequence-caption {
/* caption animation */
opacity: 1;
transform: translate(0, -50%);
}
.site-main-slider.slider-version-1 .sequence-slide.seq-out {
/*---------------------- Sequence out animation */
}
.site-main-slider.slider-version-1 .sequence-slide.seq-out .sequence-bg {
/* background image animation */
transform: scale(1);
opacity: 0;
}
.site-main-slider.slider-version-1 .sequence-slide.seq-out .sequence-caption {
/* caption animation */
opacity: 1;
transform: translate(2000px, -50%);
}
.site-main-slider.slider-version-2 {
/* ------------------------ slider version 2 */
background-color: rgba(64, 64, 64, 0.6);
}
.site-main-slider.slider-version-2 .seq-canvas {
max-width: 100%;
}
.site-main-slider.slider-version-2 .sequence-slide .sequence-bg {
background: no-repeat center;
background-size: cover;
opacity: 0;
transform: scale(1);
transition: none;
}
.site-main-slider.slider-version-2 .sequence-caption {
text-align: center;
width: 100%;
opacity: 1;
transition: transform 2000ms ease;
transition-delay: 0ms !important;
top: 50%;
transform: translate(-2000px, -50%);
}
.site-main-slider.slider-version-2 .sequence-caption * {
color: white;
}
.site-main-slider.slider-version-2 .sequence-caption h2 {
text-transform: none;
}
.site-main-slider.slider-version-2 .sequence-caption u:after {
background-color: white;
}
.site-main-slider.slider-version-2 .sequence-caption h1 {
text-transform: none;
font-size: 65px;
font-family: inherit;
font-weight: 100;
line-height: 65px;
}
@media screen and (max-width: 767px) {
.site-main-slider.slider-version-2 .sequence-caption h1 {
font-size: 42px;
line-height: 50px;
}
}
.site-main-slider.slider-version-2 .sequence-caption h1:before {
display: none;
}
.site-main-slider.slider-version-2 .sequence-caption .theme-btn {
margin-right: 12px;
margin-left: 12px;
border-color: #13a89e;
background: #13a89e;
}
.site-main-slider.slider-version-2 .sequence-caption .theme-btn:hover {
background: white;
color: rgba(30, 34, 46, 0.6);
border-color: white;
}
.site-main-slider.slider-version-2 .sequence-slide.seq-in {
/*---------------------- Sequence in animation */
}
.site-main-slider.slider-version-2 .sequence-slide.seq-in .sequence-bg {
/* background image animation */
transform: scale(1);
opacity: 1;
}
.site-main-slider.slider-version-2 .sequence-slide.seq-in .sequence-caption {
/* caption animation */
opacity: 1;
transform: translate(0, -50%);
}
.site-main-slider.slider-version-2 .sequence-slide.seq-out {
/*---------------------- Sequence out animation */
}
.site-main-slider.slider-version-2 .sequence-slide.seq-out .sequence-bg {
/* background image animation */
transform: scale(1);
opacity: 0;
}
.site-main-slider.slider-version-2 .sequence-slide.seq-out .sequence-caption {
/* caption animation */
opacity: 1;
transform: translate(2000px, -50%);
}
/*-----------------------------------------------------------------------------------
[About us (section)]
# about us container
# typography
# box (class)
-----------------------------------------------------------------------------------*/
/* About us container */
.site-about {
margin: 0;
padding: 100px 0 50px 0;
display: block;
clear: both;
width: 100%;
text-align: left;
position: relative;
}
.site-about .about-box {
float: left;
width: 100%;
padding: 0;
margin: 0;
-webkit-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
-moz-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
}
.site-about .about-box figure {
float: left;
width: 100%;
position: relative;
}
.site-about .about-box figure img {
float: left;
width: 100%;
}
.site-about h1 {
float: left;
/*position:absolute;
top:45px;
left:-40px;*/
}
.site-about .inner {
float: left;
width: 100%;
padding: 20px 40px;
}
.site-about .hello {
float: left;
font-size: 16px;
font-weight: 700;
text-transform: capitalize;
color: #fff;
line-height: 1.3;
background: #13a89e;
padding: 6px 12px;
position: relative;
}
.site-about .hello:after {
position: absolute;
content: ' ';
border-right: 14px solid rgba(0, 0, 0, 0);
top: 50%;
left: 0;
margin: 13px 0 0 0;
border-top: 15px solid #13a89e;
height: 0;
width: 0;
}
.site-about h2 {
/* h2 heading */
float: left;
width: 100%;
font-size: 20px;
font-weight: 600;
text-transform: inherit;
text-align: left;
color: #1d1f33;
line-height: 1.7;
padding: 25px 0 15px 0;
margin: 0;
position: relative;
}
.site-about p {
/* Paragraph */
float: left;
width: 100%;
font-size: 16px;
font-weight: 400;
text-transform: inherit;
text-align: left;
color: #6c6e85;
line-height: 1.8;
padding: 4px 0;
margin: 0;
position: relative;
}
.site-about .bio-list-main {
float: left;
width: 100%;
padding: 20px 0 30px 0;
}
.bio-list-main .bio-list {
float: left;
width: 100%;
font-size: 16px;
font-weight: 400;
text-transform: inherit;
text-align: left;
color: #41435d;
line-height: 2;
padding: 2px 0;
margin: 0;
position: relative;
}
@media screen and (max-width: 767px) {
.bio-list-main .bio-list {
padding: 0 0 15px 0;
line-height: 1.5;
}
.site-about {
padding: 50px 0 50px 0;
}
.site-about .inner {
padding: 30px 15px;
}
.site-about h2 {
line-height: 1.4;
}
}
/* bg element */
.about-ele-1 {
left: 0px;
bottom: 300px;
}
.about-ele-2 {
right: 0px;
top: 250px;
}
.industry {
margin: -94px 0 0 0;
}
/*-----------------------------------------------------------------------------------
Statistic (section)
# statistic container
# background image
# left side background image (50 % width)
# right side background image (50 % width)
# h2 heading
# paragraph
# section align center (class)
# mission (class)
# number (class) [container h3, p, font icon, image]
# number inline block (class)
-----------------------------------------------------------------------------------*/
/* Statistic container */
.site-statistic {
float: left;
width: 100%;
background: url(../images/statistic-bg.jpg) no-repeat;
/* background-attachment:fixed; */
background-size: cover;
margin: 0;
padding: 50px 0;
width: 100%;
display: block;
clear: both;
text-align: center;
position: relative;
z-index: 1;
}
@media screen and (max-width: 1199px) {
.site-statistic {
padding-top: 60px;
padding-bottom: 20px;
}
}
@media screen and (max-width: 767px) {
.site-statistic .site-section-bg {
display: none;
}
}
.site-statistic h2 {
/* H2 heading */
color: white;
font-family: inherit;
font-size: 40px;
line-height: 66px;
text-transform: uppercase;
font-weight: 400;
margin-bottom: 10px;
margin-top: 0.625rem;
}
.site-statistic h2 strong {
font-weight: 700;
}
.site-statistic p {
/* Paragraph */
color: white;
font-family: inherit;
font-size: 16px;
font-weight: 600;
line-height: 33px;
}
/* Numbers section */
.site-number {
float: left;
width: 100%;
/*margin-right: 2%;
margin-left: 2%;*/
position: relative;
padding: 0;
margin: 0;
display: block;
text-align: center;
white-space: nowrap;
}
@media screen and (max-width: 767px) {
.site-number {
width: 100%;
margin-right: 0;
margin-left: 0;
white-space: normal;
}
}
.site-number h3 {
/* h3 heading */
color: white;
font-family: inherit;
font-size: 40px;
font-weight: 700;
line-height: 1.4;
padding: 0;
margin: 0 0 5px;
display: block;
}
.site-number p {
/* paragraph */
float: left;
width: 100%;
color: white;
text-align: center;
font-family: inherit;
font-size: 18px;
font-weight: 400;
line-height: 1.2;
text-transform: inherit;
margin: 0;
padding: 0;
display: block;
}
.site-number i.fa {
/* font awesome icon */
width: 23px;
height: 21px;
color: #13a89e;
font-size: 20px;
font-weight: 400;
line-height: 14px;
text-transform: uppercase;
}
.site-number figure {
/* image */
position: absolute;
top: 0;
left: 0;
width: 40px;
bottom: 0;
display: block;
height: 52px;
line-height: 52px;
margin: auto 0;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/* Number section inline block */
.site-number-inline {
float: left;
display: block;
text-align: center;
position: relative;
margin: auto;
width: 100%;
width: 100%;
}
@media screen and (max-width: 767px) {
.site-number-inline {
margin-bottom: 40px;
}
}
/*-----------------------------------------------------------------------------------
Services (section)
# services container
# h1 heading
# box (class)
# h3 heading
# paragraph
# image
-----------------------------------------------------------------------------------*/
/* Services container */
.site-services {
margin: 0;
display: block;
width: 100%;
clear: both;
position: relative;
}
@media screen and (max-width: 767px) {
.site-services {}
}
@media screen and (max-width: 767px) {}
.site-services .site-box {
/* Service */
padding: 22px 5px 0px 30px;
display: block;
width: 100%;
text-align: left;
margin: 0 0 30px 0;
/*max-width: 370px;*/
/* min-height: 215px; */
background-color: white;
position: relative;
overflow: hidden;
z-index: 1;
transition: 400ms ease;
transition-property: background;
height: 270px;
-webkit-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
-moz-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
}
@media screen and (max-width: 767px) {
.site-services .site-box {
max-width: 100%;
min-height: 10px;
}
}
.site-services .site-box:hover {
/* mouse hover */
}
.site-services .site-box1:hover {
/* mouse hover */
background: #e0f9f3;
}
.site-services .site-box2:hover {
/* mouse hover */
background: #f1f2fd;
}
.site-services .site-box3:hover {
/* mouse hover */
background: #feeef5;
}
.site-services .site-box4:hover {
/* mouse hover */
background: #fff7e4;
}
.site-services .site-box5:hover {
/* mouse hover */
background: #feeef5;
}
.site-services .site-box6:hover {
/* mouse hover */
background: #e0f9f3;
}
.site-services .site-box figure {
padding: 4px;
border-radius: 4px;
}
.site-services .site-box:hover figure {
padding: 4px;
border-radius: 4px;
}
.site-services h3 {
color: #1d1f33;
font-family: inherit;
font-size: 15px;
font-weight: 700;
line-height: 3.5;
text-transform: inherit;
margin-top: 5px;
margin-bottom: 22px;
padding-left: 70px;
transition: 400ms ease;
transition-property: color;
height: 35px;
}
.site-services h3 a {
transition: 400ms ease;
transition-property: color;
}
.site-services p {
/* Paragraph */
color: #6c6e85;
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
transition: 400ms ease;
transition-property: color;
padding: 0 16px 26px 0px;
margin: 0;
float: left;
width: 100%;
height: 140px;
}
.site-services figure {
/* Image */
/*width: 46px;
height: 46px;*/
display: block;
position: absolute;
left: 30px;
top: 30px;
text-align: center;
transition: 400ms ease;
transition-property: background;
}
/* bg element */
.skill-ele-1 {
left: 0px;
top: 195px;
z-index: 0;
}
.skill-ele-2 {
right: 0px;
top: 0px;
z-index: 0;
}
/*-----------------------------------------------------------------------------------
Education (section)
# education container
# h1 heading
# box (class)
# h3 heading
# paragraph
# image
-----------------------------------------------------------------------------------*/
/* Services container */
.site-education {
margin: 0;
padding-bottom: 0;
display: block;
width: 100%;
clear: both;
position: relative;
}
.site-education .education figure {
float: right;
text-align: right;
margin-top: -50px;
}
@media screen and (max-width: 767px) {
.site-education .education figure {
margin-top: 25px;
}
}
@media screen and (max-width: 767px) {}
.site-education .site-box {
/* Service */
padding: 30px;
display: block;
width: 100%;
text-align: left;
margin: 0 0 30px 0;
background-color: white;
position: relative;
overflow: hidden;
z-index: 1;
transition: 400ms ease;
transition-property: background;
-webkit-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
-moz-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
}
@media screen and (max-width: 767px) {
.site-education .site-box {
max-width: 100%;
min-height: 10px;
}
}
.site-education .year {
float: left;
font-size: 13px;
color: #FFFFFF;
text-transform: uppercase;
background: #f1582d;
line-height: 1.6;
padding: 0 7px;
margin: 0 0 3px 0;
clear: both;
}
.site-education h3 {
/* H3 heading */
color: #1d1f33;
font-family: inherit;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
text-transform: inherit;
margin: 0;
padding: 12px 15px 12px 0;
transition: 400ms ease;
transition-property: color;
clear: both;
}
.site-education h4 {
/* H3 heading */
color: #6c6e85;
font-family: inherit;
font-size: 13px;
font-weight: 400;
line-height: 1.5;
text-transform: uppercase;
margin: 0;
padding: 0;
transition: 400ms ease;
transition-property: color;
clear: both;
}
.site-education p {
/* Paragraph */
color: #6c6e85;
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
transition: 400ms ease;
transition-property: color;
padding: 0;
margin: 0;
}
@media screen and (max-width: 991px) {
.site-education p {
padding: 15px 0 0 0;
}
}
/* bg element */
.edu-ele-1 {
left: 0px;
top: 288px;
z-index: 0;
}
/*-----------------------------------------------------------------------------------
Employement (section)
# employement container
# h1 heading
# box (class)
# h3 heading
# paragraph
# image
-----------------------------------------------------------------------------------*/
/* Employement container */
.site-employement {
margin: 0;
display: block;
width: 100%;
clear: both;
background: #f0f4fd;
position: relative;
}
.site-employement .site-box {
/* Service */
padding: 30px;
display: block;
width: 100%;
text-align: left;
margin: 0 0 30px 0;
/*max-width: 370px;*/
min-height: 215px;
background-color: white;
position: relative;
overflow: hidden;
z-index: 1;
transition: 400ms ease;
transition-property: background;
-webkit-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
-moz-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
}
.site-employement .site-box figure {
float: left;
padding-bottom: 24px;
clear: both;
width: 100%;
}
.site-employement .year {
float: left;
font-size: 13px;
color: #FFFFFF;
text-transform: uppercase;
background: #f1582d;
line-height: 1.6;
padding: 0 7px;
margin: 0 0 3px 0;
}
.site-employement h3 {
/* H3 heading */
float: left;
color: #1d1f33;
font-family: inherit;
font-size: 18px;
font-weight: 700;
line-height: 1.4;
text-transform: inherit;
margin: 0;
padding: 0 0 0 15px;
transition: 400ms ease;
transition-property: color;
}
.site-employement p {
/* Paragraph */
float: left;
width: 100%;
color: #6c6e85;
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1.6;
transition: 400ms ease;
transition-property: color;
padding: 15px 0 0 0;
margin: 0;
}
@media screen and (max-width: 1199px) {
.site-employement h3 {
width: 100%;
padding: 0;
}
}
/* bg element */
.emp-ele-1 {
right: 0px;
top: 230px;
z-index: 0;
}
/*-----------------------------------------------------------------------------------
Tabs (section)
# tabs container
# background image
# h1 heading
# tabs buttons
# tabs content
-----------------------------------------------------------------------------------*/
/* Tabs section container */
.site-tabs {
margin: 0;
padding: 85px 0 90px;
/*display: block;*/
width: 100%;
clear: both;
position: relative;
text-align: left;
min-height: 770px;
}
@media screen and (max-width: 991px) {
.site-tabs {
text-align: center;
min-height: 10px;
}
}
@media screen and (max-width: 767px) {
.site-tabs {
padding-top: 50px;
padding-bottom: 50px;
}
}
.site-tabs .site-tab-bg {
/* tabs section background image */
content: "";
position: absolute;
top: auto;
right: 0;
bottom: -32px;
display: block;
height: 100%;
width: 100%;
max-width: 38%;
background: no-repeat bottom left;
background-size: auto;
opacity: 0;
transition: 200ms opacity ease-in-out;
}
.site-tabs .site-tab-bg.active {
opacity: 1;
}
@media screen and (max-width: 991px) {
.site-tabs .site-tab-bg {
display: none;
}
}
.site-tabs h1 {
/* h1 heading */
margin-bottom: 70px;
}
@media screen and (max-width: 991px) {
.site-tabs h1 {
margin-bottom: 100px;
}
}
@media screen and (max-width: 767px) {
.site-tabs h1 {
margin-bottom: 70px;
}
}
@media screen and (min-width: 992px) {
.site-tabs h1:before {
margin: 0;
}
}
/* Tabs buttons */
.site-tabs-buttons {
padding: 0;
display: block;
list-style: none;
width: 100%;
clear: both;
overflow: hidden;
margin: 0 0 40px;
text-align: left;
}
.site-tabs-buttons li {
display: block;
margin: 0;
list-style: none;
float: left;
padding: 0 5px 0 0;
}
@media screen and (max-width: 767px) {
.site-tabs-buttons li {
display: block;
width: 100%;
padding: 0;
margin-bottom: 5px;
}
}
.site-tabs-buttons li.active a {
/* Active tab */
color: white;
background: #13a89e;
}
.site-tabs-buttons a {
background: #f8f7f7;
font-family: inherit;
font-size: 14px;
font-weight: 700;
line-height: 14px;
text-transform: uppercase;
color: #1a1e2a;
display: block;
padding: 14px 40px;
transition: 400ms ease;
transition-property: color, background;
position: relative;
z-index: 1;
overflow: hidden;
}
.site-tabs-buttons a:hover {
background: #ece9e9;
}
@media screen and (max-width: 767px) {
.site-tabs-buttons a {
padding-left: 20px;
padding-right: 20px;
}
}
/* Tabs content */
.site-tabs-content {
margin: 0;
padding: 0;
display: block;
width: 100%;
clear: both;
color: #959595;
font-family: inherit;
font-size: 13px;
font-weight: 400;
line-height: 28px;
text-align: left;
}
.site-tabs-content p {
color: #959595;
font-family: inherit;
font-size: 13px;
font-weight: 400;
line-height: 28px;
margin-bottom: 40px;
}
.site-tabs-content ul {
margin: 0;
padding: 0;
display: block;
width: 100%;
color: #1a1e2a;
font-family: inherit;
font-size: 13px;
font-weight: 400;
}
.site-tabs-content li {
position: relative;
list-style: none;
width: 100%;
display: block;
margin: 0 0 10px;
padding: 0 0 0 20px;
}
.site-tabs-content li:before {
content: "\f0da";
position: absolute;
top: 0;
left: 0;
bottom: 0;
font-family: "FontAwesome", serif;
}
/*-----------------------------------------------------------------------------------
Portfolio (section)
# portfolio container
# h1 heading
# href button
# tabs (class)
# content
# caption
-----------------------------------------------------------------------------------*/
/* Portfolio Container */
.site-portfolio {
margin: 0;
padding: 50px 0 0 0;
display: block;
width: 100%;
clear: both;
position: relative;
}
@media screen and (max-width: 991px) {}
@media screen and (max-width: 767px) {
.site-portfolio {
padding-top: 0;
}
}
.site-portfolio h1 {
/* H1 heading */
/*margin-bottom: 70px;*/
}
.site-portfolio .theme-btn {
/* button */
margin-top: 70px;
}
/* Portfolio tabs buttons */
.site-portfolio-tabs {
padding: 0;
display: block;
width: 100%;
clear: both;
list-style: none;
font-size: 0;
margin: 0 0 30px 0;
text-align: left;
}
.site-portfolio-tabs li {
display: inline-block;
float: none;
margin: 1px 1px;
padding: 0 20px 0 0;
line-height: normal;
/*min-width: 130px;*/
/*min-height: 41px;*/
/*background: rgba(255, 255, 255, 0.1);*/
color: #6c6e85;
font-family: inherit;
font-size: 13px;
font-weight: 500;
text-transform: uppercase;
cursor: pointer;
position: relative;
z-index: 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
transition: 400ms ease;
transition-property: background;
}
.site-portfolio-tabs li:hover {
/*background: rgba(255, 255, 255, 0.2);*/
color: #3243e3;
}
.site-portfolio-tabs li.active {
/*background: #13a89e;*/
color: #3243e3;
text-decoration: line-through;
}
@media screen and (max-width: 1199px) {
.site-portfolio-tabs li {
/*min-width: 10px;*/
}
}
@media screen and (max-width: 767px) {
.site-portfolio-tabs li {
width: 100%;
display: block;
}
/* Portfolio tabs buttons */
.site-portfolio-tabs {
text-align: center;
}
.site-portfolio-tabs li {
/*min-width: 10px;*/
padding-bottom: 8px;
}
}
/* Portfolio content */
.site-portfolio-tabs-content {
width: 100%;
margin: 0 auto;
padding: 0;
display: block;
clear: both;
max-width: 1170px;
}
.site-portfolio-tabs-content .portfolio-items {
margin-bottom: 20px;
}
.site-portfolio-tabs-content .portfolio-items .site-box {
position: relative;
overflow: hidden;
display: inline-block;
}
.site-portfolio-tabs-content .portfolio-items .site-box:hover:before,
.site-portfolio-tabs-content .portfolio-items .site-box:hover .portfolio-caption {
opacity: 1;
}
.site-portfolio-tabs-content .portfolio-items .site-box img {
min-height: 200px;
}
.site-portfolio-tabs-content .portfolio-items .site-box:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
display: block;
/*border: 10px solid #F8C619;*/
background-color: rgba(21, 33, 51, 0.8);
opacity: 0;
transition: 400ms ease;
transition-property: opacity;
}
.site-portfolio-tabs-content .portfolio-items .venobox {
border: none;
}
.site-portfolio-tabs-content .portfolio-items .venobox:before {
display: none;
}
.site-portfolio-tabs-content .portfolio-caption {
/* Caption */
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
transform: translate3d(0, -50%, 0);
bottom: auto;
display: block;
z-index: 1;
width: auto;
height: auto;
margin: 0;
padding: 0 20px;
opacity: 0;
transition: 400ms ease;
transition-property: opacity;
}
.site-portfolio-tabs-content .portfolio-caption i {
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
display: block;
margin: 0 auto;
color: #000000;
background-color: #13a89e;
/*border: 1px solid #13a89e;*/
border-radius: 100px;
}
.site-portfolio-tabs-content .portfolio-caption h5 {
color: white;
font-family: inherit;
font-size: 17px;
font-weight: 700;
line-height: 20px;
text-transform: uppercase;
display: block;
width: 100%;
margin-top: 20px;
margin-bottom: 15px;
}
@media screen and (max-width: 767px) {
.site-portfolio-tabs-content .portfolio-caption h5 {
font-size: 14px;
}
}
.site-portfolio-tabs-content .portfolio-caption h6 {
color: white;
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 14px;
display: block;
width: 100%;
margin-top: 0;
margin-bottom: 0;
}
/* bg element */
.portfolio-ele-1 {
right: 0px;
top: 0px;
z-index: 0;
}
/*-----------------------------------------------------------------------------------
Clients (section)
# clients container
# image
-----------------------------------------------------------------------------------*/
/* Clients container */
.site-clients {
margin: 0;
padding-bottom: 0;
display: block;
clear: both;
text-align: center;
position: relative;
}
.site-clients figure {
/* Image */
display: inline-block;
float: none;
overflow: hidden;
margin: 0 0 30px 0;
padding: 0;
transition: 400ms ease;
transition-property: opacity;
}
.site-clients .client-logo figure {
/* Image */
display: inline-block;
float: none;
overflow: hidden;
margin: 0 10px;
padding: 0;
opacity: 0.6;
transition: 400ms ease;
transition-property: opacity;
width: 20%;
}
.site-clients .client-logo.clents-img figure {
/* Image */
display: block;
float: left;
overflow: hidden;
margin: 0 10px;
padding: 0;
opacity: 0.6;
transition: 400ms ease;
transition-property: opacity;
width: 23%;
}
.site-clients .client-logo figure img {
-webkit-filter: grayscale(100%);
/* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
@media screen and (max-width: 767px) {
.site-clients .client-logo figure {
width: 100%;
margin: 0;
display: block;
clear: both;
}
.site-clients .client-logo.clents-img figure {
width: 100%;
}
}
.site-clients .client-logo figure img:hover,
.site-clients .client-logo figure:hover {
opacity: 1;
-webkit-filter: grayscale(0%);
/* Safari 6.0 - 9.0 */
filter: grayscale(0%);
}
/* bg element */
.award-ele-1 {
left: 0px;
top: -200px;
}
.privacy-list
{
float: left;
width: 100%;
}
.privacy-list li
{
color: #6c6e85;
line-height: 1.8;
}
/*-----------------------------------------------------------------------------------
Quick support (section)
# quick support container
# h1 heading
# map and form container
# google map container
# contact form [label, input, submit, textarea]
# contact info container
# box (class) [icon, href tag]
# no space (class) remove the bootstrap columns space
# Remove the number input arrow buttons
-----------------------------------------------------------------------------------*/
/* Quick support container */
.site-quick-support {
margin: 0;
display: block;
clear: both;
position: relative;
/* background:url(../images/contact-bg.png) no-repeat; */
background-attachment: scroll;
background-size: contain;
background-position: bottom center;
}
.site-quick-support .map-and-form-container,
.site-contact-info {
/* map nad form container */
padding: 30px 0 30px 0;
background-color: white;
overflow: hidden;
-webkit-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
-moz-box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
box-shadow: 0px 15px 114px -26px rgba(85, 98, 164, 0.29);
}
.site-quick-support .site-google-map {
/* google map container */
background: grey;
min-height: 522px;
position: relative;
}
@media screen and (max-width: 991px) {
.site-quick-support .site-google-map:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
z-index: 1;
background: none;
}
}
.site-quick-support .site-contact-form {
/* contact form */
margin: 0;
display: block;
clear: both;
width: 100%;
padding: 10px 72px 30px 70px;
float: left;
}
@media screen and (max-width: 767px) {
.site-quick-support .site-contact-form {
padding: 30px 20px;
}
}
@media screen and (max-width: 300px) {
.site-quick-support .site-contact-form {}
}
.site-quick-support label {
padding: 0;
display: block;
clear: both;
width: 100%;
margin: 0 0 20px;
}
.site-quick-support input[type=text],
.site-quick-support input[type=tel],
.site-quick-support input[type=number],
.site-quick-support input[type=url],
.site-quick-support input[type=email],
.site-quick-support textarea,
.site-quick-support select {
width: 100%;
margin: 0;
padding: 0 0 0 15px;
display: block;
clear: both;
border: none;
box-shadow: none;
height: 45px;
color: #959595;
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
border: 1px solid #c6cdde;
transition: 400ms ease;
transition-property: border-color;
}
.site-quick-support input[type=text]:focus,
.site-quick-support input[type=tel]:focus,
.site-quick-support input[type=number]:focus,
.site-quick-support input[type=url]:focus,
.site-quick-support input[type=email]:focus,
.site-quick-support textarea:focus,
.site-quick-support select:focus {
border-color: #13a89e;
}
.site-quick-support textarea {
resize: none;
height: 175px;
}
.site-quick-support button[type=submit] {
background-color: #3243e3;
box-shadow: none;
padding: 10px 55px;
/*display: block;
float: left;*/
color: white;
font-family: inherit;
font-size: 13px;
font-weight: 700;
line-height: 29px;
text-transform: uppercase;
margin: 10px 0 0;
transition: 400ms ease;
transition-property: background, color;
border: none;
-webkit-box-shadow: 0px 8px 12px 0px rgba(24, 50, 184, 0.19);
-moz-box-shadow: 0px 8px 12px 0px rgba(24, 50, 184, 0.19);
box-shadow: 0px 8px 12px 0px rgba(24, 50, 184, 0.19);
}
@media screen and (max-width: 767px) {
.site-quick-support button[type=submit] {
display: inline-block;
float: none;
padding-left: 60px;
padding-right: 60px;
}
}
.site-quick-support button[type=submit]:hover {
opacity: 0.8;
transition: all ease .5s;
}
.site-quick-support button[type=submit] i.fa {
display: none;
}
@media screen and (max-width: 767px) {
.site-quick-support .site-contact-info {
padding-left: 0;
padding-right: 0;
}
}
.site-quick-support .site-contact-info table {
width: 100%;
}
.site-quick-support .site-contact-info td {
width: 25%;
}
.site-quick-support .site-box {
/* box */
display: block;
width: 100%;
clear: both;
margin: 0;
padding: 0;
color: white;
position: relative;
z-index: 1;
transition: 400ms ease;
transition-property: background;
}
@media screen and (max-width: 767px) {
.site-quick-support .site-box {
margin-bottom: 40px;
}
}
.site-quick-support .site-box:hover {}
.site-quick-support .site-box i.fa {
/* font awesome icon */
max-width: inherit;
margin: 0 auto;
margin-bottom: 25px;
float: inherit;
width: 60px;
height: 60px;
color: #4B4B4B;
font-size: 28px;
font-weight: 400;
line-height: 2;
padding: 0;
display: block;
border-radius: 100px;
}
.site-quick-support .site-box i.fa.phone {
color: #52d8bb;
border: #52d8bb solid 1px;
}
.site-quick-support .site-box:hover i.fa.phone {
background: #52d8bb;
color: #FFFFFF;
border: #52d8bb solid 1px;
transition: all ease .5s;
}
.site-quick-support .site-box i.fa.location {
color: #3243e3;
border: #3243e3 solid 1px;
}
.site-quick-support .site-box:hover i.fa.location {
background: #3243e3;
color: #FFFFFF;
border: #3243e3 solid 1px;
transition: all ease .5s;
}
.site-quick-support .site-box i.fa.email {
color: #f1582d;
border: #f1582d solid 1px;
}
.site-quick-support .site-box:hover i.fa.email {
background: #f1582d;
color: #FFFFFF;
border: #f1582d solid 1px;
transition: all ease .5s;
}
.site-quick-support .site-box a {
color: #6c6e85;
font-family: inherit;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
display: block;
width: 100%;
}
.site-quick-support .site-box:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
height: 100%;
width: 100%;
z-index: -1;
}
.site-quick-support .site-box.odd:before {
display: block;
opacity: 0.1;
background-color: white;
}
@media screen and (min-width: 768px) {
.site-quick-support .no-space {
/* remove the bootstrap columns space */
padding-left: 0;
padding-right: 0;
}
}
.site-quick-support input[type=number]::-webkit-outer-spin-button,
.site-quick-support input[type=number]::-webkit-inner-spin-button {
/* Remove the number input arrow buttons */
-webkit-appearance: none;
margin: 0;
}
.site-quick-support input[type=number] {
-moz-appearance: textfield;
}
/* bg element */
.contact-ele-1 {
right: 0px;
top: 240px;
}
.site-footer {
width: 100%;
clear: both;
display: block;
margin: 0;
padding: 20px 0 0 0;
}
.site-footer .site-social-icons {
/* social icons */
text-align: center;
}
@media screen and (max-width: 767px) {
.site-footer .site-social-icons {
text-align: center;
}
}
.site-footer .site-social-icons a {
width: 40px;
height: 40px;
line-height: 40px;
border: 1px solid #a9abbe;
border-radius: 100px;
text-align: center;
display: inline-block;
margin: 4px;
transition: 400ms ease;
transition-property: border-color, background;
}
.site-footer .site-social-icons a:hover {
border-color: #f1582d;
background: #f1582d;
}
.site-footer .site-social-icons a:hover i.fa {
color: #FFFFFF;
}
.site-footer .site-social-icons i.fa {
color: #6c6e85;
font-size: 15px;
font-weight: 400;
margin: 0;
padding: 0;
display: block;
line-height: 2.7;
text-align: center;
}
.site-footer .site-copyright {
/* copyright class */
font-family: inherit;
font-size: 15px;
font-weight: 400;
line-height: 1.5;
color: #6c6e85;
text-align: center;
padding: 25px 0 0 0;
}
/*-----------------------------------------------------------------------------------
Scroll top top button
-----------------------------------------------------------------------------------*/
/* Scroll up button */
#ThemeScrollUp {
bottom: 20px;
right: 20px;
color: white;
background: #6c6e85;
width: 45px;
height: 44px;
line-height: 45px;
text-align: center;
display: block;
font-size: 14px;
border-radius: 2px;
transition: 400ms ease;
transition-property: background;
}
#ThemeScrollUp:hover {
background-color: #636e78;
}
/*-----------------------------------------------------------------------------------
Preloader
Pre-loader: This is used to show the full page pre-loader.
As long as the website does not load completely
-----------------------------------------------------------------------------------*/
/* Preloader container */
.site-preloader {
margin: 0;
padding: 0;
display: block;
clear: both;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
background: white;
z-index: 100000;
text-align: center;
}
.site-preloader img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
max-height: 40px;
max-width: 40px;
margin: auto;
}
/* ------ venobox.css --------*/
.vbox-overlay *,
.vbox-overlay *:before,
.vbox-overlay *:after {
-webkit-backface-visibility: hidden;
box-sizing: border-box;
}
/* ------- overlay: change here background color and opacity ----- */
.vbox-overlay {
background: #fdfdfd;
background: rgba(0, 0, 0, 0.85);
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 9999;
opacity: 0;
overflow-x: hidden;
overflow-y: auto;
}
/* ----- preloader - choose between CIRCLE, IOS, DOTS, QUADS ----- */
/* circle preloader */
.vbox-preloader {
position: fixed;
width: 32px;
height: 32px;
left: 50%;
top: 50%;
margin-left: -16px;
margin-top: -16px;
background-image: url(../images/preload-circle.png);
text-indent: -100px;
overflow: hidden;
animation: playload 1.4s steps(18) infinite;
}
@keyframes playload {
from {
background-position: 0;
}
to {
background-position: -576px;
}
}
/* ----- navigation ----- */
.vbox-close {
cursor: pointer;
position: fixed;
top: 100px;
right: 20px;
width: 46px;
height: 40px;
padding: 10px 20px 10px 0;
display: block;
background: #161617 url(../images/close.gif) no-repeat 10px center;
color: #fff;
text-indent: -100px;
overflow: hidden;
}
.vbox-next,
.vbox-prev {
box-sizing: content-box;
cursor: pointer;
position: fixed;
top: 50%;
color: #fff;
width: 30px;
height: 170px;
margin-top: -85px;
text-indent: -100px;
border: solid transparent;
/* Using border instead of padding to keep bg image in place */
overflow: hidden;
}
.vbox-prev {
left: 0;
border-width: 0 30px 0 10px;
background: url(../images/prev.gif) center center no-repeat;
}
.vbox-next {
right: 0;
border-width: 0 10px 0 30px;
background: url(../images/next.gif) center center no-repeat;
}
.vbox-title {
width: 100%;
height: 40px;
float: left;
text-align: center;
line-height: 28px;
font-size: 12px;
color: #fff;
padding: 6px 40px;
overflow: hidden;
background: #161617;
position: fixed;
display: none;
top: -1px;
left: 0;
}
.vbox-num {
cursor: pointer;
position: fixed;
top: -1px;
left: 0;
height: 40px;
color: #fff;
overflow: hidden;
line-height: 28px;
font-size: 12px;
padding: 6px 10px;
background: #161617;
display: none;
}
/* ------- inline window ------ */
.vbox-inline {
width: 420px;
height: 315px;
padding: 10px;
background: #fff;
text-align: left;
margin: 0 auto;
overflow: auto;
}
/* ------- Video & iFrames window ------ */
.venoframe {
border: none;
width: 960px;
height: 720px;
}
@media (max-width: 992px) {
.venoframe {
width: 640px;
height: 480px;
}
.site-logo img {
position: relative;
top: 0;
left: 15px;
bottom: 0;
width: 60%;
}
.vbox-content img {
width: 90% !important;
}
}
@media (max-width: 767px) {
.venoframe {
width: 420px;
height: 315px;
}
}
@media (max-width: 460px) {
.vbox-inline {
width: 100%;
}
.venoframe {
width: 100%;
height: 260px;
}
}
/* ------- PLease do NOT edit this! (or do it at your own risk) ------ */
.vbox-open {
overflow: hidden;
}
.vbox-container {
position: relative;
background: #000;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.vbox-content {
text-align: center;
float: left;
width: 100%;
position: relative;
overflow: hidden;
}
.vbox-container img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 1920px) {
.banner-text {
left: 23%;
}
}
@media screen and (max-width: 1366px) {
.banner-text {
left: 20%;
}
}
@media screen and (max-width: 375px) {
.banner-text {
left: 21%;
top: 2%;
}
}
@media screen and (max-width: 1024px) {
.banner-text {
left: 2%;
top: 11%;
}
}
@media screen and (max-width: 320px) {
.banner-text {
left: 15%!important;
top: 0%!important;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.hospital {
height: 270px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.tech {
padding: 20px 0;
height: 230px !important;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.financial {
padding: 20px 0;
height: 275px !important;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.insurance {
height: 580px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.retail {
height: 600px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.consumer-packaged-goods {
height: 360px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.education {
height: 255px !important;
padding: 20px 0;
}
}
@media(max-width: 360px) and (min-width: 360px) {
.banner-text {
left: 21% !important;
top: 2% !important;
}
}
@media screen and (max-width: 360px) {
/*.banner-text {
left:21% !important;
top:2% !important;
} */
p.col-xs-12.col-sm-10.col-sm-offset-1.hospital {
height: 270px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.tech {
padding: 20px 0;
height: 230px !important;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.financial {
padding: 20px 0;
height: 275px !important;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.insurance {
height: 580px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.retail {
height: 600px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.consumer-packaged-goods {
height: 360px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.education {
height: 230px !important;
padding: 20px 0;
}
}
@media screen and (max-width: 414px) {
.banner-text {
left: 20% !important;
top: 9% !important;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.hospital {
height: 270px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.tech {
padding: 20px 0;
height: 230px !important;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.financial {
padding: 20px 0;
height: 275px !important;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.insurance {
height: 625px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.retail {
height: 600px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.consumer-packaged-goods {
height: 360px !important;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.education {
height: 255px !important;
padding: 20px 0;
}
}
@media screen and (max-width: 768px) {
/*.banner-text {
left: 17% !important;
top: 10% !important;
} */
.col-lg-3.col-md-3.col-sm-12.col-xs-12.pic1 {
margin-top: 15px;
}
.about-box.width {
width: 100% !important;
}
.list-group {
padding-left: 0;
margin-bottom: 20px;
margin-top: -80px;
}
}
@media screen and (max-width: 375px) {
.about-box iframe {
height: auto;
}
}
@media screen and (max-width: 414px) {
.col-lg-3.col-md-3.col-sm-12.col-xs-12.pic1 {
margin-top: 15px;
}
.about-box.width {
width: 100%;
}
}
/* --------------------------------------------------------- */
.modal-dialog {
max-width: 800px;
margin: 30px auto;
}
.modal-body {
position: relative;
padding: 0px;
}
.close {
position: absolute;
right: -30px;
top: 0;
z-index: 999;
font-size: 2rem;
font-weight: normal;
color: #fff;
opacity: 1;
}
.round a {
color: #f1582d;
}
.round .button {
display: inline-block;
width: 110px;
height: 45px;
line-height: 40px;
margin: 20px;
position: relative;
overflow: hidden;
border: 2px solid #f1582d;
transition: color .5s;
padding: 0px 8px 0px 8px;
}
.round .button:before {
content: "";
position: absolute;
z-index: -1;
background: #f1582d;
height: 150px;
width: 200px;
border-radius: 50%;
}
.round .button:hover {
color: #fff;
}
.round .button:nth-child(1):before {
top: 100%;
left: 100%;
transition: all .7s;
}
.round .button:nth-child(1):hover:before {
top: -30px;
left: -30px;
}
.round .button:nth-child(2):before {
left: -30px;
bottom: 100%;
transition: all .7s;
}
.round .button:nth-child(2):hover:before {
bottom: -50px;
}
.round .button:nth-child(3):before {
top: 0;
left: -200%;
transition: all .7s;
}
.round .button:nth-child(3):hover:before {
top: -30px;
left: -30px;
}
.round {
text-align: right;
}
.round1 a {
color: #52d8bb;
}
.round1 .button {
display: inline-block;
width: 180px;
height: 45px;
line-height: 40px;
/* margin: -30px 0 40px 0; */
position: relative;
overflow: hidden;
border: 2px solid #52d8bb;
transition: color .5s;
padding: 0px 8px 0px 8px;
border-radius: 35px;
}
.round1 .button:before {
content: "";
position: absolute;
z-index: -1;
background: #52d8bb;
height: 150px;
width: 200px;
border-radius: 50%;
}
.round1 .button:hover {
color: #52d8bb;
}
.round1 .button:nth-child(1):before {
top: 100%;
left: 100%;
transition: all .7s;
}
.round1 .button:nth-child(1):hover:before {
top: -30px;
left: -30px;
}
.round1 .button:nth-child(2):before {
left: -30px;
bottom: 100%;
transition: all .7s;
}
.round1 .button:nth-child(2):hover:before {
bottom: -50px;
}
.round1 .button:nth-child(3):before {
top: 0;
left: -200%;
transition: all .7s;
}
.round1 .button:nth-child(3):hover:before {
top: -30px;
left: -30px;
}
.round1 {
float: left;
width: 100%;
margin-bottom: 25px;
}
.container.contact {
margin-top: 60px;
}
.address-info {
margin: -48px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.tech {
padding: 20px 0;
height: 137px;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.financial {
padding: 20px 0;
height: 185px;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.hospital {
height: 175px;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.insurance {
height: 330px;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.retail {
height: 335px;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.consumer-packaged-goods {
height: 190px;
padding: 20px 0;
}
p.col-xs-12.col-sm-10.col-sm-offset-1.education {
height: 145px;
padding: 20px 0;
}
p.line-height {
height: 0;
float: left;
width: 100%;
}
.industry {
margin: -85px 0 0 0;
}
h2.technology {
font-size: 20px;
}
h2.technology.financial {
font-size: 30px;
}
.about-box.hover {
transition: 0.3s;
}
.about-box.hover:hover {
box-shadow: 0px -1px 40px -5px rgba(17, 17, 17, 0.63);
}
.row.margin {
margin-top: 30px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* -------------------------------------------------- */
.vbox-content img {
width: 45%;
}
.image {
display: block;
width: 100%;
height: auto;
padding-right: 25px;
padding-bottom: 20px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #008cba96;
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: .3s ease;
transition: .3s ease;
}
.site-box:hover .overlay {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.image1 {
display: block;
width: 100%;
height: auto;
}
.overlay1 {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
/* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity: 0;
color: white;
font-size: 18.5px;
padding: 20px;
text-align: center;
width: 82%;
}
.site-box figure img {
width: 60%;
}
.about-box.width {
width: 61%;
margin-top: -70px;
}
.inner.padding {
padding: 20px 0px;
}
p.col-xs-12.col-sm-10.col-sm-offset-1 {
text-align: justify;
padding-bottom: 15px;
}
i.fa.fa-map-marker.map {
color: #f1582d !important;
font-size: 55px !important;
}
h3.map {
margin-top: -36px;
margin-left: 50px;
}
/* p.address {
height: 65px !important;
} */
.container.video {
margin-top: -90px;
margin-bottom: -90px;
}
.text-field {
background-color: #f1582d;
padding: 20px 10px;
color: #fff;
text-align: center;
}
.text-field-2 {
background-color: #f1582d;
padding: 9px 9px;
color: #fff;
text-align: center;
height: 60px;
font-size: 15px;
}
#nav #about:active {
color: #f1582d;
}
li.list {
font-family: 'Montserrat', sans-serif;
color: #6c6e85;
}
.others ul li {
float: left;
list-style: none;
margin-right: 20px;
margin-top: 10px;
}
.others ul li a {
color: #6c6e85;
}
.site-about h4 {
float: left;
margin: 10px 0 0 0;
}
.zenith_slider:before,
.zenith_slider:after,
.row:before,
.row:after {
display: table;
content: " ";
}
.zenith_slider:after,
.row:after {
clear: both;
}
.zenith_slider {
padding: 3.6% 0;
padding-left: 15px;
padding-right: 15px;
}
.zenith_slider .row {
z-index: 2;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
width: 31.777777%;
margin-right: -15px;
margin-left: -15px;
}
.zenith_slider ul {
list-style: none;
z-index: 2;
}
.highlight h3 {
position: relative;
margin-top: 10px;
display: inline-block;
font-family: "Helvetica", serif;
font-size: 17px;
vertical-align: middle;
font-weight: bold;
max-width: 70%;
}
.highlight h3:after {
content: ' ';
display: block;
position: absolute;
bottom: -50%;
width: 0;
left: 40%;
margin: 0 20%;
height: 2px;
background: crimson;
visibility: hidden;
transition: all 0.45s ease;
-webkit-transition: all 0.45s ease;
-moz-transition: all 0.45s ease;
}
.highlight.active h3:after {
width: 60%;
left: 0;
visibility: visible;
}
.highlight {
cursor: pointer;
margin-bottom: 50px;
}
.highlight p {
text-align: justify;
margin-top: 0;
}
.highlight span {
text-align: center;
display: inline-block;
vertical-align: top;
padding: 10px 12px;
background: rgba(9, 16, 26, 0.85);
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
background-image: linear-gradient(0deg, rgba(92, 92, 92, 0)34%, rgba(92, 92, 92, 0.4)24%);
-moz-background-image: linear-gradient(0deg, rgba(92, 92, 92, 0)34%, rgba(92, 92, 92, 0.4)24%);
-webkit-background-image: linear-gradient(0deg, rgba(92, 92, 92, 0)34%, rgba(92, 92, 92, 0.4)24%);
-o-background-image: linear-gradient(0deg, rgba(92, 92, 92, 0)34%, rgba(92, 92, 92, 0.4)24%);
transition: color 0.5s ease-in;
-webkit-transition: color 0.5s ease-in;
-ms-transition: color 0.5s ease-in;
-moz-transition: color 0.5s ease-in;
-o-transition: color 0.5s ease-in;
}
.highlight-title {
text-align: center;
text-transform: uppercase;
width: 105%
}
.highlights-phone {
width: 40%;
height: 600px;
float: left;
}
.phone-holder {
display: block;
height: 520px;
position: relative;
top: 40px;
left: 19px;
width: 258px;
margin: auto;
overflow: hidden
}
#fon {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../images/phone-black.png) center top no-repeat;
background-position-x: -27px;
z-index: 2;
overflow: hidden;
}
.highlights-phone.wht .phone-holder #fon {
background: url(../images/phone-white.png) center top no-repeat;
background-position-x: -27px;
}
.hgi {
position: absolute;
top: 58px;
left: 12px;
width: 235px;
height: 400px;
visibility: hidden;
}
.hgi img {
width: 100%;
height: 400px;
}
.highlights-phone.wht .hgi {
top: 52px;
}
.hgi.active {
visibility: visible;
}
.right-row {
padding-right: 0;
float: right;
}
.left-row {
float: left;
margin-right: 0;
}
.left-row .highlight-title {
text-align: right;
}
.left-row .highlight-title span {
right: -8px;
}
.right-row .highlight-title span {
left: -8px;
}
.right-row .highlight-title {
text-align: left;
}
.right-row ul {
padding: 0 40px 0 0;
}
.left-row p {
padding-right: 18%;
}
.right-row p {
padding-left: 18%;
}
.highlight-title span {
position: relative;
z-index: 1;
}
.highlight-title .fa {
color: #FFFFF0;
font-size: 40px;
width: 64px;
height: 64px;
text-align: center;
vertical-align: middle;
}
.highlight-title .fa:before {
margin: 3px 0;
display: block
}
.highlight-title span {
background: cornflowerblue;
-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;
-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;
transition: transform ease-out 0.1s, background 0.2s;
}
.highlight-title span:after {
top: 0;
left: 0;
padding: 0;
z-index: -1;
box-shadow: inset 0 0 0 2px rgba(9, 16, 26, 0.76);
opacity: 0;
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
}
.highlight.active .highlight-title span {
background: crimson;
webkit-transform: scale(0.93);
-moz-transform: scale(0.93);
-ms-transform: scale(0.93);
transform: scale(0.93);
}
.highlight:hover .highlight-title span:after {
-webkit-animation: sonarEffect 1.3s ease-out 75ms;
-moz-animation: sonarEffect 1.3s ease-out 75ms;
animation: sonarEffect 1.3s ease-out 75ms;
}
/*==============================================
SECOND LAYOUT
===============================================*/
.zenith_slider.hand .phone-hand {
position: relative;
width: 490px;
height: 704px;
display: inline-block;
background: url(../images/hand-black.png) no-repeat;
background-size: cover;
}
.zenith_slider.hand .highlights,
.zenith_slider.hand .phone-hand {
vertical-align: top
}
.zenith_slider.hand .highlights {
display: inline-block;
width: 40%;
margin-top: -30px;
}
.zenith_slider.hand .highlights ul {
max-width: 370px;
}
.zenith_slider.hand .row {
width: 95%;
margin: auto;
text-align: center;
}
.zenith_slider.hand .highlight-title {
text-align: right;
}
.zenith_slider.hand .highlight-title .fa {
right: -8px;
}
.zenith_slider.hand .highlight p {
padding-right: 18%;
}
.zenith_slider.hand .highlight {
position: relative;
}
.zenith_slider.hand #inner-screen {
position: absolute;
top: 57px;
left: 71px;
width: 190px;
height: 340px;
overflow: hidden;
z-index: 2
}
.zenith_slider.hand .hgi {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.zenith_slider.hand .hgi img {
width: 190px;
height: 340px;
}
/*==============================================
THIRD LAYOUT
===============================================*/
#mac-book {
position: relative;
width: 800px;
max-width: 60%;
background: url(../images/macbook.png) center no-repeat;
background-size: contain;
}
#mac-screen {
position: absolute;
top: 13%;
width: 70.7%;
height: 69.5%;
max-width: 100%;
margin: auto;
left: 14.8%;
overflow: hidden;
}
#mac-screen .hgi {
top: 0;
left: 0;
width: 100%;
height: 100%;
padding-bottom: 2.76%;
}
#mac-screen .hgi img {
width: 100%;
height: 100%;
}
.highlights-cta {
width: 37%;
margin-left: 20px;
}
.highlights-cta,
#mac-book {
display: inline-block;
vertical-align: middle
}
#left,
#right {
position: absolute;
display: block;
top: 50%;
margin-top: -16px;
width: 32px;
height: 32px;
visibility: hidden;
z-index: 99;
}
#left {
background: url(../images/left.png) center no-repeat;
left: 0px;
}
#right {
background: url(../images/right.png) center no-repeat;
right: 0;
}
#mac-screen #left {
visibility: hidden;
left: 0;
}
#mac-screen #right {
visibility: hidden;
right: 0;
}
#left:hover,
#right:hover,
#bullet-navs:hover {
cursor: pointer;
}
.ratio {
padding-bottom: 66.66%;
position: relative;
}
#mac-screen:hover {
cursor: pointer;
}
#mac-screen:hover #left,
#mac-screen:hover #right,
.tf_container:hover #left,
.tf_container:hover #right {
animation: arrows 0.6s ease;
-webkit-animation: arrows 0.6s ease;
visibility: visible;
}
#bullet-navs {
width: 90%;
height: 12px;
position: absolute;
bottom: 6px;
margin: 0 5%;
text-align: center;
}
#bullet-navs ul {
list-style: none;
padding: 0;
margin: 0;
}
#bullet-navs ul li {
display: inline-block;
margin: 0 1.5px;
}
#bullet-navs ul li span {
display: block;
width: 10px;
height: 10px;
background: #e7e7e7;
border-radius: 50%;
-webkit-border-radius: 50%;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 0px 0px 1px;
-webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1) inset, 0px 0px 1px;
transition: background 0.2s;
-webkit-transition: background 0.2s;
}
#bullet-navs ul li.active span {
background: cornflowerblue;
}
#mac-screen.ovrl:after {
width: 100%;
height: 96.5%;
content: ' ';
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.65);
visibility: hidden;
transition: all 0.45s ease;
-webkit-transition: all 0.45s ease;
transform: scale(1, 1);
-webkit-transform: scale(0, 0);
}
#mac-screen:hover {
cursor: move;
}
#mac-screen.ovrl:hover:after {
visibility: visible;
transform: scale(1, 1);
-webkit-transform: scale(1, 1);
}
.tf_slider.vertical #mac-screen {
height: 67.5%;
}
.tf_slider.vertical #mac-screen .hgi {
padding-bottom: 0
}
.tf_slider.vertical #bullet-navs {
height: 90%;
width: 12px;
bottom: 0;
right: 0;
margin: 5% 0;
}
.tf_slider.vertical #bullet-navs ul {
direction: vertical
}
.tf_slider.vertical #bullet-navs ul li {
margin: 1.5px 0;
}
.tf_slider.vertical #right {
bottom: 0px;
top: auto;
background: url(../images/down.png) center no-repeat;
transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 0
}
.tf_slider.vertical #left {
top: 0;
bottom: auto;
background: url(../images/up.png) center no-repeat;
transform: translateY(100%);
-webkit-transform: translateY(100%);
opacity: 0
}
.tf_slider.vertical #left,
.tf_slider.vertical #right {
left: 50%;
margin: 0;
margin-left: -16px;
transition: 0.6s ease;
-webkit-transition: 0.6s ease;
}
.tf_slider.vertical #mac-screen:hover #right,
.tf_slider.vertical #mac-screen:hover #left,
.tf_slider.vertical .tf_container:hover #right,
.tf_slider.vertical .tf_container:hover #left {
animation: none;
-webkit-animation: none;
transform: translateY(0);
-webkit-transform: translateY(0);
opacity: 1
}
/*==============================================
FOURTH LAYOUT
===============================================*/
.tf_slider {
width: 100%;
margin: 45px 0;
position: relative;
}
.tf_slide img {
width: 30%;
float: left;
}
.tf_container {
max-width: 100%;
margin: auto;
position: relative;
height: auto;
overflow: hidden;
height: auto;
text-align: center;
}
.tf_container .tf_slide {
position: absolute;
top: 0;
left: 0;
}
.tf_container:hover {
cursor: move;
}
.tf_slide {
visibility: hidden;
width: 100%;
}
.tf_slide.active {
visibility: visible;
}
#tf_thumbs {
height: auto;
position: absolute;
bottom: 0px;
padding: 0 0.5%;
padding-top: 2px;
width: 100%;
background: rgba(0, 0, 0, 0.43);
line-height: 20px
}
#tf_thumbs.no-bg {
background: transparent
}
blockquote {
position: relative;
color: #444;
font-style: italic;
text-shadow: none;
width: 45%;
margin: auto;
display: block;
}
blockquote:before {
content: "\201C";
position: absolute;
top: 0px;
left: -25px;
color: steelblue;
font-size: 72px;
font-style: normal;
font-family: 'Georgia', 'sans-serif';
}
blockquote span.client {
display: block;
width: 95%;
margin: auto;
text-align: center;
margin-top: 35px;
}
blockquote .client .name,
blockquote .client .title {
color: #999;
font-style: normal;
display: inline-block;
margin: 0 5px;
}
blockquote .client .name {
font-weight: 600;
position: relative;
}
blockquote .client .name:after {
content: ' / ';
position: absolute;
top: 0;
right: -10px;
color: #333;
}
blockquote .client .title {
font-weight: normal;
font-size: 0.9em;
}
#tf_thumbs.center {
text-align: center;
}
#tf_thumbs.left {
text-align: left;
}
#tf_thumbs.right {
text-align: right;
}
#tf_thumbs.show {
visibility: hidden;
}
#tf_thumbs.top {
top: 0;
bottom: auto;
}
#tf_thumbs.nov {
background: transparent;
}
.tf_container:hover #tf_thumbs.show {
animation: arrows 0.6s ease;
-webkit-animation: arrows 0.6s ease;
visibility: visible;
}
#tf_thumbs .tf_thumb {
display: inline-block;
margin: 0 -15px;
opacity: 0.5;
}
#tf_thumbs .tf_thumb.active {
border-color: indianred;
opacity: 1;
}
.tf_thumb {
width: 92px;
height: 92px;
line-height: 1
}
.tf_thumb img {
max-width: 100%;
height: 80%;
}
.tf_thumb:hover {
cursor: pointer;
border-color: indianred;
}
.tf_slider.vertical #tf_thumbs {
width: auto!important;
height: 100%!important;
direction: vertical
}
.tf_slider.vertical #tf_thumbs .tf_thumb {
display: block;
margin: 3px 0;
}
.tf_container .tf_slide {
width: 100%;
height: 100%;
background: #fefefe;
text-align: center;
font-size: 1.89em;
padding-top: 160px;
color: #555;
text-shadow: 1px 2px 1px black;
}
#d .tf_slide {
padding: 0px 0 !important;
font-size: 16px;
}
#d {
margin-top: 50px !important;
margin-bottom: 60px;
float: left;
}
#d .tf_slide p {
float: left;
width: 70%;
padding-left: 30px;
text-align: left !important;
text-shadow: none !important;
margin-top: 40px;
}
.client p
{
float: ;
width: 100% !important;
padding-left: 0px !important;
margin: 0 !important;
}
span.client {
float: left;
width: 40%;
padding-left: 30px;
}
#d #tf_thumbs {
/*height: auto;*/
height: 120px !important;
position: absolute;
bottom: 0px;
padding: 0 0.5%;
padding-top: 2px;
width: 100%;
text-align: right !important;
}
#d .tf_container {
width: 100% !important;
}
.client-logo {
float: left;
width: 100%;
}
.site-box.career ul {
margin: 0 0 0px 0;
padding: 0;
}
.site-box.career ul li {
margin: 0 0 10px 0;
font-size: 12px;
float: left;
width: 100%;
list-style: none;
}
.site-box.career {
height: 400px;
}
.send-resume
{
font-size: 12px !important;
text-align: right;
margin-top: 10px !important;
}
.desp-height {
float: left;
width: 100%;
height: 270px;
}
/*#d #tf_thumbs {
height: auto;
position: absolute;
bottom: 7% !important;
padding: 0 0.5%;
padding-top: 2px;
width: 100%;
right: 1% ;
}*/
#d #tf_thumbs {
/*height: auto;*/
position: absolute;
bottom: 12% !important;
padding: 0 0.5%;
padding-top: 2px;
/*width: 100%;*/
/*right: 1% ;*/
right: 0 ;
width: 69% !important;
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
#d .tf_slide {
height: 100% !important;
}
/*=====================================
SLIDER STYLE
=====================================*/
/*
.tf_container.shadow {
box-shadow: 0 0 3px;
-webkit-box-shadow: 0 0 3px;
} */
.tf_container.border {
border: 7px double #929292;
}
.tf_container.frame {
border: 10px ridge #777;
}
.tf_layer {
opacity: 0;
}
.animated {
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes arrows {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: 0;
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@keyframes arrows {
0% {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
opacity: 0;
}
100% {
-webkit-transform: none;
transform: none;
opacity: 1;
}
}
@media only screen and (max-width: 360px) {
.highlight,
.zenith-small .highlight {
float: none;
width: 100%;
}
}
@media only screen and (max-width: 490px) {
.zenith_slider .row,
.zenith-small .row {
margin: auto;
float: none;
width: 90%;
}
.highlight h3,
.zenith-small .highlight h3 {
max-width: 70%;
}
}
@media only screen and (max-width: 880px) {
.zenith_slider .row,
.zenith-medium .row {
display: block;
width: 90%;
margin: auto;
}
.highlights-phone,
.zenith-medium .highlights-phone {
float: none;
width: 70%;
margin: auto;
}
}
.highlight h3,
.zenith-medium .highlight h3 {
max-width: 60%;
}
.tf_thumb,
.zenith-medium .tf_thumb {
width: 65px;
height: 65px;
}
}
@media only screen and (max-width: 1100px) {
.highlights-phone {
float: none;
width: 70%;
margin: auto;
}
.highlight h3 {
max-width: 67%;
}
}
@media only screen and (min-width: 880px) {
.tf_thumb,
.zenith-medium .tf_thumb {
width: 92px;
height: 92px;
}
}
@media only screen and (min-width: 1200px) {
.zenith_slider {
padding-left: 0;
padding-right: 0;
}
.tf_thumb {
width: 108px;
height: 108px;
}
}
@media only screen and (min-width: 1600px) {
.highlight h3 {
max-width: 89%;
}
}
@media only screen and (min-width: 1660px) and (max-width: 1760px) {
.zenith_slider {
padding-left: 7%;
padding-right: 7%;
}
}
@media only screen and (min-width: 1760px) {
.zenith_slider {
padding-left: 7%;
padding-right: 7%;
}
}
/* .tf_slide:nth-child(1) {
background: palegoldenrod;
}
.tf_slide:nth-child(2) {
background: indianred;
}
.tf_slide:nth-child(3) {
background: olive;
}
.tf_slide:nth-child(4) {
background: aliceblue;
}
.tf_slide:nth-child(5) {
background: darkkhaki;
}
.tf_slide:nth-child(6) {
background: skyblue;
}
.tf_slide:nth-child(7) {
background: orange;
} */
.src {
margin: 60px 0;
}
@keyframes fadeUp {
0% {
transform: translateY(20%);
}
100% {
transform: translateY(0);
visibility: visible
}
}
@-webkit-keyframes fadeUp {
0% {
-webkit-transform: translateY(20%);
}
100% {
-webkit-transform: translateY(0);
visibility: visible
}
}
/* ---------------------------------------------------------------------------------------------------- */
.list-group.help-group {
margin-bottom: 20px;
padding-left: 0;
margin: 0;
.faq-list {
display: block;
top: auto;
margin: 0 0 32px;
border-radius: 2px;
border: 1px solid #ddd;
box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
.list-group-item {
position: relative;
display: block;
margin: 0;
padding: 13px 16px;
background-color: #fff;
border: 0;
border-bottom: 1px solid #ddd;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
color: #616161;
transition: background-color .2s;
i.mdi {
margin-right: 5px;
font-size: 18px;
position: relative;
top: 2px;
}
&:hover {
background-color: #f6f6f6;
}
&.active {
background-color: #f6f6f6;
font-weight: 700;
color: rgba(0, 0, 0, .87);
}
&:last-of-type {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-bottom: 0;
}
}
}
}
.tab-content.panels-faq {
padding: 0;
border: 0;
}
.panel.panel-help {
box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);
padding-bottom: 0;
border-radius: 2px;
overflow: hidden;
background-color: #fff;
margin: 0 0 16px;
a[href^="#"],
a[href^="#"]:hover,
a[href^="#"]:focus {
outline: none;
cursor: pointer;
text-decoration: none;
}
.panel-heading {
background-color: #f6f6f6;
padding: 0 16px;
line-height: 48px;
border-top-right-radius: 2px;
border-top-left-radius: 2px;
color: rgba(0, 0, 0, .87);
h2 {
margin: 0;
padding: 14px 0 14px;
font-size: 18px;
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
text-transform: none;
}
}
.panel-body {
background-color: #fff;
border-top: 1px solid #ddd;
border-radius: 2px;
border-top-right-radius: 0;
border-top-left-radius: 0;
margin-top: 0;
p {
margin: 0 0 16px;
&:last-of-type {
margin: 0;
}
}
/*jssor slider loading skin spin css*/
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*jssor slider bullet skin 032 css*/
.jssorb032 {
position: absolute;
}
.jssorb032 .i {
position: absolute;
cursor: pointer;
}
.jssorb032 .i .b {
fill: #fff;
fill-opacity: 0.7;
stroke: #000;
stroke-width: 1200;
stroke-miterlimit: 10;
stroke-opacity: 0.25;
}
.jssorb032 .i:hover .b {
fill: #000;
fill-opacity: .6;
stroke: #fff;
stroke-opacity: .35;
}
.jssorb032 .iav .b {
fill: #000;
fill-opacity: 1;
stroke: #fff;
stroke-opacity: .35;
}
.jssorb032 .i.idn {
opacity: .3;
}
/*jssor slider arrow skin 051 css*/
.jssora051 {
display: block;
position: absolute;
cursor: pointer;
}
.jssora051 .a {
fill: none;
stroke: #fff;
stroke-width: 360;
stroke-miterlimit: 10;
}
.jssora051:hover {
opacity: .8;
}
.jssora051.jssora051dn {
opacity: .5;
}
.jssora051.jssora051ds {
opacity: .3;
pointer-events: none;
}
/*jssor slider loading skin spin css*/
.jssorl-009-spin img {
animation-name: jssorl-009-spin;
animation-duration: 1.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes jssorl-009-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*jssor slider bullet skin 032 css*/
.jssorb032 {
position: absolute;
}
.jssorb032 .i {
position: absolute;
cursor: pointer;
}
.jssorb032 .i .b {
fill: #fff;
fill-opacity: 0.7;
stroke: #000;
stroke-width: 1200;
stroke-miterlimit: 10;
stroke-opacity: 0.25;
}
.jssorb032 .i:hover .b {
fill: #000;
fill-opacity: .6;
stroke: #fff;
stroke-opacity: .35;
}
.jssorb032 .iav .b {
fill: #000;
fill-opacity: 1;
stroke: #fff;
stroke-opacity: .35;
}
.jssorb032 .i.idn {
opacity: .3;
}
/*jssor slider arrow skin 051 css*/
.jssora051 {
display: block;
position: absolute;
cursor: pointer;
}
.jssora051 .a {
fill: none;
stroke: #fff;
stroke-width: 360;
stroke-miterlimit: 10;
}
.jssora051:hover {
opacity: .8;
}
.jssora051.jssora051dn {
opacity: .5;
}
.jssora051.jssora051ds {
opacity: .3;
pointer-events: none;
}