Files
praxis-page/static/css/praxis.css
T
Brummel 96eea20c97 fix(carousel): remove flexslider, restore Bootstrap carousel symmetry
Root cause of the home carousel indicator dots drifting apart on slide
change: flexslider.css adds a rule `.carousel li { margin-right: 5px }`
that bleeds into Bootstrap's carousel because both use the `.carousel`
class. With Bootstrap's `.active { margin: 0 }` overriding the active
dot but flexslider's `margin-right: 5px` still applying to the inactive
dot, the gap between the two dots is asymmetric — 1px when active is on
the left, ~9px (1+4+4) when active is on the right.

Live's Grav asset pipeline doesn't bundle that flexslider rule (the
live HTML uses Bootstrap carousel exclusively too), so the bug is
stage-only.

We don't actually use flexslider — testimonialSlider was the only
target in scripts.js and it doesn't exist in our markup. Drop the css
link, the js script tag, and the static assets. Also revert the
previous attempt that forced active dots to inactive geometry; with
flexslider gone, Bootstrap's design (active 12px margin 0 + inactive
10px margin 1 → both outer 12px) keeps positions stable on its own,
which matches the live behavior the user observed.
2026-05-21 11:30:37 +02:00

1927 lines
40 KiB
CSS

body {
font-family : 'Roboto', sans-serif;
font-size : 14px; /* 13px; */
line-height : 24px;
color : #969595;
font-weight : 400;
background: #fff;
}
/* --------------------------------------
Global Typography
------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
margin : 0 0 15px;
color : #313131;
font-weight : 400;
}
h1 {
font-size : 30px;
line-height : 24px;
}
h2 {
font-size : 24px;
line-height : 24px;
}
h3 {
font-size : 20px;
line-height : 24px;
}
h4 {
font-size : 18px;
line-height : 24px;
}
h5 {
font-size : 16px;
line-height : 24px;
font-weight : 600;
}
h6 {
font-size : 14px;
line-height : 24px;
}
/* --------------------------------------
LINK STYLE
------------------------------------------*/
a {
color : #31aae2;
text-decoration : none;
-webkit-transition : all 0.3s ease 0s;
-moz-transition : all 0.3s ease 0s;
-o-transition : all 0.3s ease 0s;
transition : all 0.3s ease 0s;
}
a,
a:active,
a:focus,
a:active {
text-decoration : none;
outline : none
}
a:hover,
a:focus {
text-decoration : none;
}
ul {
margin : 0;
padding : 0;
list-style : none;
}
/* --------------------
Section Background
-------------------*/
.gray-bg {
background-color : #f9f9f9;
}
.white-bg {
background-color : #fff;
}
/* --------------------
main Wrapper
-------------------*/
#main-wrapper{
background: #fff;
}
/*Button Style*/
.btn {
padding : 10px 30px;
margin-bottom : 0;
font-size : 13px;
border-radius : 0;
text-transform : uppercase;
}
/*btn-primary*/
.btn-primary {
background-color : #31aae2;
border-color : #31aae2;
}
.btn-primary.active,
.btn-primary.focus,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover,
.open > .dropdown-toggle.btn-primary {
background-color : #2281ad;
border-color : #2281ad;
}
/*btn-default*/
.btn-default {
color : #313131;
background-color : transparent;
border-color : #313131;
}
.btn-default.active,
.btn-default.focus,
.btn-default:active,
.btn-default:focus,
.btn-default:hover,
.open > .dropdown-toggle.btn-default {
color : #31aae2;
background-color : #ffffff;
border-color : #ffffff;
}
/*btn-black*/
.btn-black {
color : #ffffff;
background-color : #313131;
border-color : #313131;
}
.btn-black:focus,
.btn-black:hover {
color : #313131;
border-color : #313131;
background-color : transparent !important;
}
button:focus,
.btn:focus,
.btn:active:focus {
outline : none;
}
/* -------------------
Section Padding
--------------------*/
.pt-100 {
padding-top : 100px;
}
.ptb-90 {
padding-bottom : 90px;
padding-top : 90px;
}
.ptb-100 {
padding-top : 100px;
padding-bottom : 100px;
}
.ptb-150 {
padding-top : 150px;
padding-bottom : 150px;
}
.ptb-160 {
padding-top : 160px;
padding-bottom : 160px;
}
.ptb-170 {
padding-top : 170px;
padding-bottom : 170px;
}
@media (min-width : 768px) {
/*custom-padding class*/
.pl-30 {
padding-left : 30px;
}
.pr-30 {
padding-right : 30px;
}
}
/* ----------------------------------------------
text-highlights
------------------------------------------------- */
.text-highlights {
color : #ffffff;
padding : 0px 5px;
}
.text-highlights.black {
background : #313131;
}
.text-highlights.blue {
background : #31aae2;
}
/*Common Page Header*/
.page-header {
padding-bottom : 0;
margin : 100px 0;
border-bottom : 0;
}
.page-header h1 {
font-size : 70px;
line-height : 70px;
color : #ffffff;
font-weight : 400;
text-transform : capitalize;
margin-bottom : 30px;
font-family : 'Montserrat', sans-serif;
}
.page-header .sub-title {
display : block;
font-size : 40px;
line-height : 40px;
color : rgba(255, 255, 255, 0.5);
font-weight : 700;
text-transform : uppercase;
font-family : 'Montserrat', sans-serif;
}
@media (max-width : 766px) {
.page-header h1 {
font-size : 44px;
line-height : 44px;
}
.page-header .sub-title {
font-size : 30px;
line-height : 30px;
}
}
/*feature-section*/
.feature-section {
background : url(../../assets/img/feature-bg.jpg) no-repeat;
background-size : cover;
}
/* ------------------------------------------------------------------
BACK TO TOP
--------------------------------------------------------------------- */
#toTop {
position : fixed;
bottom : 30px;
right : 30px;
color : #31aae2;
cursor : pointer;
display : none;
z-index : 9999;
width : 30px;
height : 30px;
border : 2px solid #31aae2;
text-align : center;
font-size : 18px;
line-height : 24px;
}
#toTop:hover {
color : #ffffff;
background-color : #31aae2;
border : 1px solid transparent;
-webkit-transition : all 0.3s ease 0s;
-moz-transition : all 0.3s ease 0s;
-o-transition : all 0.3s ease 0s;
transition : all 0.3s ease 0s;
}
/* ------------------------------------------------------------------
Shortcode Content
--------------------------------------------------------------------- */
.page-title-section {
padding-top : 80px;
background : url(../../assets/img/page-bg/page-bg-1.jpg) no-repeat center center #4795bb;
background-size : cover;
}
/*-----------------------------
NAVIGATION & HEADER STYLE
--------------------------------*/
/*Navigation*/
@media screen and (max-width : 768px) {
.navbar-collapse.collapse {
display : none !important;
}
.navbar-default {
background : #333333 !important;
padding : 10px 0;
border-bottom : none;
}
}
@media (min-width : 768px) {
.navbar-default {
background-color : transparent;
padding : 30px 0;
border-color : transparent;
-webkit-transition : all .5s ease-in-out;
-moz-transition : all .5s ease-in-out;
transition : all .5s ease-in-out;
}
.sticky-nav.navbar-default {
background-color : #333333;
padding : 15px 0;
}
.navbar-right .dropdown-menu {
right : auto;
}
}
.navbar-default {
margin-bottom : 0;
}
.navbar-brand {
padding-top : 0;
padding-bottom : 0;
height : 40px;
}
.navbar-default .navbar-nav > li {
margin-right : 17px;
}
.navbar-default .navbar-nav > li:last-child {
margin-right : 0px;
}
.navbar-default .navbar-nav > li > a {
color : #ffffff;
font-size : 13px;
font-weight : 700;
padding : 8px 17px;
border : 2px solid transparent;
border-radius : 2px;
text-transform : uppercase;
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
color : #ffffff;
background-color : transparent;
border : 2px solid #ffffff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
color : #ffffff;
background-color : transparent;
border : 2px solid #ffffff;
}
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
color : #ffffff;
}
.nav-cta {
float : right;
margin-right : 40px;
margin-left : 20px;
line-height : 40px;
-webkit-transition : all .3s ease-in-out;
-moz-transition : all .3s ease-in-out;
transition : all .3s ease-in-out;
}
.nav-cta > li > a {
display : inline-block;
color : #ffffff;
width : 20px;
height : 34px;
line-height : 34px;
text-align : center;
}
.nav-cta .dropdown-menu {
left : auto;
right : 0;
}
.head-search {
width : 370px;
}
.head-search {
padding : 8px;
}
.head-search .form-control {
height : 40px;
}
.head-search .btn {
padding : 10px 20px;
}
/*Dropdown Menu*/
.dropdown-menu {
display : inherit;
top : 100% !important;
padding : 0;
font-size : 13px;
opacity : 0;
visibility : hidden;
border : 1px solid #f5f5f5;
border-radius : 0;
box-shadow : 0px -2px 0px #000000;
-webkit-transition : all 0.3s ease 0s;
-moz-transition : all 0.3s ease 0s;
-o-transition : all 0.3s ease 0s;
transition : all 0.3s ease 0s;
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
transform: translateY(50px);
}
.dropdown:hover .dropdown-menu {
display : block;
margin-top : 28px !important;
opacity : 1;
visibility : visible;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
.dropdown-menu::before {
top : -30px;
content : "";
position : absolute;
width : 100%;
height : 30px;
display : block;
}
.sticky-nav .dropdown:hover .dropdown-menu {
margin-top : 14px !important;
}
.dropdown-header {
font-size : 11px;
line-height : 30px;
font-weight : 600;
color : #313131;
text-transform : uppercase;
}
.dropdown-menu li a {
display : block;
font-size : 13px;
line-height : 30px;
color : #969595;
padding : 3px 20px;
}
.dropdown-menu li a:hover {
color : #31aae2;
background-color : #f5f5f5;
padding-left : 25px;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
color : #31aae2;
background-color : #f5f5f5;
padding-left : 25px;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
color : #000000;
background-color : transparent;
}
/*Mega Menu*/
.m-menu .nav,
.m-menu .collapse,
.m-menu .dropup,
.m-menu .dropdown {
position : static;
}
.m-menu .container {
position : relative;
}
.m-menu .dropdown-menu {
left : auto;
}
.m-menu .m-menu-content {
}
.m-menu .dropdown.m-menu-fw .dropdown-menu {
left : 15px;
right : 15px;
}
.m-menu-content ul {
border-right : 1px solid #f5f5f5;
padding : 20px;
}
.m-menu-content ul:last-of-type {
border-right : 0;
}
@media (max-width : 768px) {
.navbar-toggle {
display : block;
}
}
.navbar-toggle {
position : absolute;
right : 0;
padding : 5px 10px;
border : 0;
border-radius : 0;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
background-color : transparent;
}
.navbar-toggle .icon-bar {
width : 14px;
height : 3px;
}
.navbar-default .navbar-toggle .icon-bar {
background-color : #ffffff;
}
.navbar-toggle .icon-bar + .icon-bar {
margin-top : 2px;
}
/*uc-mobile-menu*/
.uc-mobile-menu {
}
.uc-mobile-menu-container > div {
visibility : hidden;
}
#menu {
margin : 50px 40px;
}
#menu > li {
text-transform : uppercase;
}
#menu > li:last-child {
border-bottom : 0;
}
#menu > li ul li {
margin-left : 0;
color : #999999;
}
#menu li a {
display : block;
text-decoration : none;
color : #777777;
padding : 10px 0;
font-size: 16px;
border-bottom: 1px dotted #444;
}
#menu li a:hover,
#menu li.active a {
color : #ffffff;
}
/*Mobile Menu Close*/
.uc-mobile-menu .close {
position : absolute;
right : 0;
top : 0;
color : #ffffff;
text-shadow : none;
filter : alpha(opacity=50);
opacity : .5;
width : 44px;
height : 44px;
-webkit-transition : all 0.3s ease 0s;
-moz-transition : all 0.3s ease 0s;
-o-transition : all 0.3s ease 0s;
transition : all 0.3s ease 0s;
}
.uc-mobile-menu .close:hover {
opacity : 1;
}
/*-------------------
HERO SLIDER
--------------------*/
.hero-slide .carousel-caption {
bottom : 17%;
text-shadow : none;
transform : translateY(50%);
}
/*
.hero-slide .carousel-caption h1 {
font-size : 36px;
line-height : 1;
font-weight : bold;
text-transform : uppercase;
color : #ffffff;
}
.hero-slide .carousel-caption p {
font-size : 20px;
color : #ffffff;
font-weight : normal;
}
*/
.hero-slide .carousel-caption p {
margin : 0 0 15px;
font-size : 36px;
line-height : 1;
font-weight : bold;
text-transform : uppercase;
color : #ffffff;
}
.hero-slide .carousel-control.left,
.hero-slide .carousel-control.right {
width : 50px;
height : 50px;
line-height : 46px;
top : 50%;
margin-top : -25px;
background : transparent;
cursor : pointer;
border : 2px solid #ffffff;
text-shadow : none;
}
.hero-slide .carousel-control.left {
left : 1%;
}
.hero-slide .carousel-control.right {
right : 1%;
}
.hero-slide .carousel-indicators {
bottom : 15px;
}
.hero-slide .carousel-indicators li {
border : 2px solid #ffffff;
}
.hero-slide .carousel-caption {
text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.hero-slide .carousel-caption h1 {
text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
.hero-slide .carousel-caption p {
text-shadow: rgb(0, 0, 0) 0px 0px 1px;
}
/*Media Query*/
@media screen and (max-width : 900px) {
.hero-slide {
margin-top : 60px;
}
.hero-slide .carousel-caption p {
font-size : 24px;
}
.hero-slide .carousel-indicators {
bottom : 5px;
}
}
/* -------------------
Section Title Style
--------------------- */
.section-title {
margin-bottom : 50px;
}
.section-title h2 {
font-size : 30px;
text-transform : capitalize;
position : relative;
}
.section-title span.bordered-icon {
color : #dadada;
padding : 0 10px;
font-size : 12px;
line-height : 18px;
position : relative;
display : inline-block;
}
.section-title span.bordered-icon:before,
.section-title span.bordered-icon:after {
content : "";
background : #dadada;
width : 50px;
height : 1px;
top : 8px;
position : absolute;
}
.section-title span.bordered-icon:before {
left : 100%;
}
.section-title span.bordered-icon:after {
right : 100%;
}
/*---------------------------
Service section
---------------------------*/
.x-services .thumbnail {
padding : 0;
line-height : 24px;
border : 1px solid #f1f1f1;
border-radius : 0;
margin-bottom : 30px;
}
@media (min-width : 501px) {
.x-services .thumbnail a > img,
.x-services .thumbnail > img {
float : left;
}
}
@media (max-width : 500px) {
.x-services .thumbnail a > img,
.x-services .thumbnail > img {
width : 100%;
}
}
.x-services .thumbnail .caption {
padding : 30px;
color : #969595;
overflow : hidden;
}
.x-services .thumbnail .caption h3 {
font-size : 15px;
text-transform : capitalize;
margin-bottom : 5px;
}
.x-services .thumbnail .caption h3 a {
color : #313131;
}
.x-services .thumbnail .caption h3 a:hover {
color : #31aae2;
}
.x-services .thumbnail .caption p {
margin : 0;
}
/* --------------------------------------------------
features start
-----------------------------------------------------*/
.x-features {
background : #4d7ecc;
padding : 100px 0 85px;
}
.x-features .section-title h2 {
color : #ffffff;
}
.x-features .img-left {
margin-top : 20px;
}
@media (max-width : 992px) {
.x-features .img-left {
margin-bottom : 40px;
margin-top : 0px;
}
}
.x-features .promo-icon {
float : left;
margin-right : 25px;
font-size : 30px;
color : #9dd1f6;
}
.x-features .promo-content {
color : #9dd1f6;
overflow : hidden;
border-bottom : 1px solid rgba(157, 209, 246, 0.4);
margin-bottom : 20px;
padding-bottom : 10px;
}
.x-features .promo-content.last-type {
border-bottom : 0;
margin-bottom : 0px;
padding-bottom : 0px;
}
.x-features .promo-content h3 {
font-size : 15px;
line-height : 26px;
font-weight : 600;
color : #ffffff;
}
/* ----------------------------------------------
Team
------------------------------------------------- */
.team {
}
.team .thumbnail {
padding : 0;
margin-bottom : 40px;
line-height : 22px;
background-color : #ffffff;
border : 0;
max-width: 350px;
margin-left: auto;
margin-right: auto;
}
@media (max-width : 767px) {
.team .thumbnail {
margin-bottom : 30px;
}
}
.team .thumbnail img {
width : 100%;
}
.team .thumbnail .caption {
padding : 15px 0;
background-color : #f9f9f9;
color : #313131;
}
.team .thumbnail h3 small {
font-size : 11px;
color : #a3a2a2;
text-transform : uppercase;
}
.team .thumbnail h3 {
font-size : 16px;
text-transform : capitalize;
margin : 0;
}
/* --------------------------------------------------
testimonial start
-----------------------------------------------------*/
.testimonial .section-title h2 {
color : #ffffff;
}
.testimonial {
padding : 100px 0px;
color : #ffffff;
/* gradient: #f9f9f9+0,e000e0+100 */
background : #f9f9f9; /* Old browsers */
background : -moz-linear-gradient(-45deg, #f9f9f9 0%, #e000e0 100%); /* FF3.6-15 */
background : -webkit-linear-gradient(-45deg, #f9f9f9 0%, #e000e0 100%); /* Chrome10-25,Safari5.1-6 */
background : linear-gradient(135deg, #f9f9f9 0%, #e000e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e000e0', GradientType=1); /* IE6-9 fallback on horizontal gradient */
}
.testimonial .carousel-control {
text-shadow : none;
}
#testimonialSlider .carousel-inner .item {
text-align : center;
}
#testimonialSlider .carousel-inner .item img {
display : inline-block;
width : 60px;
height : 60px;
border-radius : 3px;
}
#testimonialSlider .carousel-inner .item .name {
text-transform : uppercase;
font-size : 12px;
margin-top : 5px;
color : rgba(255, 255, 255, 0.5);
}
#testimonialSlider .carousel-inner .item blockquote {
border-left : 0px;
}
#testimonialSlider .carousel-inner .item blockquote p {
font-size : 20px;
line-height : 34px;
/*padding: 0px 80px;*/
font-weight : 300;
}
#testimonialSlider .carousel-inner .item blockquote ul {
margin : 30px 0px;
}
#testimonialSlider .carousel-control.right,
#testimonialSlider .carousel-control.left {
background : transparent;
border : 2px solid #ffffff;
width : 34px;
height : 34px;
line-height : 28px;
text-align : center;
top : 50%;
}
@media (min-width : 768px) {
/*custom-padding class*/
#testimonialSlider .carousel-indicators {
bottom : -60px;
}
}
@media (min-width : 992px) and (max-width : 1199px) {
#testimonialSlider .carousel-inner .item blockquote p {
font-size : 18px;
}
}
@media (min-width : 768px) and (max-width : 991px) {
#testimonialSlider .carousel-inner .item blockquote p {
font-size : 13px;
line-height : 24px;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#testimonialSlider .carousel-inner .item blockquote p {
font-size : 13px;
line-height : 24px;
margin-bottom : 20px;
padding : 0;
}
}
@media (max-width : 766px) {
#testimonialSlider .carousel-control.right,
#testimonial-slider .carousel-control.left {
display : none;
}
#testimonialSlider .carousel-inner .item blockquote p {
margin-bottom : 20px;
padding : 0;
}
}
/*testimonial end*/
/* client-logo */
.client-logo {
}
.client-logo a img {
width : 100%;
opacity : 0.5;
-webkit-transition : all 0.8s ease 0s;
-moz-transition : all 0.8s ease 0s;
-o-transition : all 0.8s ease 0s;
transition : all 0.8s ease 0s;
}
.client-logo a:hover img {
opacity : 1;
}
@media (max-width : 992px) {
.client-logo .section-margin {
margin-bottom : 30px;
}
}
/* --------------------------------------------
Page Title
----------------------------------------------- */
.single-page-title {
background-repeat : no-repeat;
background-position : bottom;
background-size : cover;
width : 100%;
background-attachment : fixed;
padding : 15% 0 5%;
position: relative;
}
.single-page-title::before{
position: absolute;
content: "";
top:0;
left:0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.7);
}
.single-page-title h2 {
display : inline-block;
font-size : 72px;
text-transform : uppercase;
font-weight : 700;
margin-bottom : 0;
color : #fff;
position: relative;
z-index: 1;
}
@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (orientation: portrait) {
.single-page-title h2 {
font-size: 30px;
}
.single-page-title {
padding-top: 25%;
}
}
@media only screen
and (min-width: 320px)
and (max-width: 480px)
and (orientation: landscape) {
.single-page-title h2 {
font-size: 35px;
}
.single-page-title {
padding-top: 20%;
}
}
@media only screen
and (min-width: 360px)
and (max-width: 640px)
and (orientation: portrait) {
.single-page-title h2 {
font-size: 35px;
}
}
@media only screen
and (min-width: 360px)
and (max-width: 640px)
and (orientation: landscape) {
.single-page-title h2 {
font-size: 40px;
}
}
@media only screen
and (min-width: 768px)
and (max-width: 1024px)
and (orientation: portrait) {
.single-page-title h2 {
font-size: 40px;
}
.single-page-title {
padding-top: 20%;
}
}
/*-------------------------
Progress Bar
---------------------------*/
.x-progress {}
.x-progress .progress-wrapper {
border: 1px solid #f1f1f1;
margin-bottom: 30px;
}
.x-progress .progress-item {
line-height: 43px;
padding: 0 20px;
border-bottom: 1px solid #f1f1f1;
}
.x-progress .progress-item:last-of-type {
border-bottom: 0;
}
.x-progress .progress-title {
display: inline-block;
float: left;
width: 95px;
}
.x-progress .progress-percent {
display: inline-block;
float: right;
text-align: center;
padding-left: 30px;
}
.x-progress .progress {
width: 70%;
display: inline-block;
height: 8px;
margin-bottom: 0;
background-color: #f9f9f9;
box-shadow: none;
}
@media (min-width : 992px) and (max-width : 1199px) {
.x-progress .progress {
width: 60%;
}
}
@media only screen and (max-width : 767px) {
.x-progress .progress {
width: 60%;
}
}
@media only screen and (max-width : 479px) {
.x-progress .progress-title {
width: 70px;
}
.x-progress .progress {
width: 40%;
}
}
.x-progress .progress-bar {
background-color: #31aae2;
box-shadow: none;
}
/* --------------------------------------------------
service-icon-style
------------------------------------------------- */
.service-icon-style {}
/*promo-block*/
.service-icon-style .promo-block-wrapper {
/*margin-bottom: 80px;*/
}
.service-icon-style .promo-icon {
width: 75px;
height: 80px;
color: #dadada;
font-size: 24px;
line-height: 76px;
text-align: center;
border: 2px solid #dadada;
margin: 0 auto 36px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.service-icon-style .promo-block-wrapper:hover .promo-icon {
background-color: #31aae2;
color: #fff;
border: 2px solid transparent;
}
.service-icon-style .promo-content {
padding: 20px;
}
.service-icon-style .promo-content h3{
font-size: 15px;
text-transform: capitalize;
}
/* ---------------------------------
x-accordion
------------------------------------*/
.x-accordion-section{
background: #f9f9f9;
}
.x-accordion .panel-group .panel+.panel {
margin-top: 0px;
}
.x-accordion .panel-group {
margin-bottom: 0;
}
.x-accordion .panel-default {
border: 0;
}
.x-accordion .panel {
background-color: transparent;
box-shadow: none;
border-bottom: 10px solid transparent;
border-radius: 0;
margin: 0;
}
.x-accordion .panel:last-of-type {
border-bottom: 0;
}
.x-accordion .panel .panel-heading a {
display: block;
padding: 12px 30px;
background: #fff;
color: #31aae2;
}
.x-accordion .panel .panel-heading a.collapsed {
color: #969595;
background-color: #fff;
padding: 12px 30px;
}
.x-accordion .panel-default>.panel-heading {
border-radius: 0px;
padding: 0;
}
.x-accordion .panel-group .panel-heading+.panel-collapse>.panel-body {
border-top: 0;
padding: 10px 30px 30px 30px;
background: #fff;
color: #969595;
}
@media screen and (max-width:768px){
.x-accordion .panel-group{
margin-bottom: 50px ;
}
}
/*----------------------
tabWhy start
-----------------------*/
.tabWhy {}
.tabWhy .nav-tabs {
border: 1px solid #eee;
border-bottom: none;
}
.tabWhy .nav-tabs.nav-justified li {
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.tabWhy .nav-tabs.nav-justified li.active {
border-bottom: 1px solid transparent;
}
.tabWhy .nav-tabs.nav-justified li:last-child {
border-right: 0;
}
.tabWhy .nav-tabs.nav-justified>li>a {
border: 0;
border-radius: 0;
background-color: #f9f9f9;
color: #969595;
height: 50px;
line-height: 50px;
padding: 0 15px;
}
.tabWhy .nav-tabs.nav-justified>.active>a,
.tabWhy .nav-tabs.nav-justified>.active>a:focus,
.tabWhy .nav-tabs.nav-justified>.active>a:hover {
border: 0;
background-color: transparent;
color: #31aae2;
}
/*media query*/
@media (min-width : 768px) {
.tabWhy .tab-content{
border: 1px solid #eee;
padding: 30px;
border-top: 0;
overflow: hidden;
}
}
@media screen and (max-width : 600px) {
.tabWhy .tab-content{
margin-top: 30px;
}
}
.tabWhy .tab-pane img {
margin-top: 8px;
}
.tabWhy .tab-pane img.pull-left {
margin-right: 20px;
}
.tabWhy .tab-pane img.pull-right {
margin-left: 20px;
}
/*collapse in small devices*/
.tabWhy .panel-body img{
margin-top: 8px;
}
.tabWhy .panel-body img.pull-left {
margin-right: 20px;
}
.tabWhy .panel-body img.pull-right {
margin-left: 20px;
}
.tabWhy .tab-pane p {
margin-bottom: 15px;
}
.tabWhy .tab-pane p:last-of-type {
margin-bottom: 0;
}
/* ------------------
Google Map
------------------*/
#googleMap{
height: 500px;
}
/*------------------
FORM STYLE
-------------------- */
.form-group {
margin-bottom: 20px;
}
.form-control {
height: 53px;
padding: 6px 20px 6px 30px;
font-size: 13px;
line-height: 24px;
color: #969595;
border: 2px solid #F1F1F1;
border-radius: 0;
box-shadow: none;
}
.form-control:focus {
border: 2px solid #31aae2 !important;
box-shadow: none;
}
/*---------------
Contact Form
-----------------*/
.contact-form {}
.contact-form h2{
line-height: 36px;
margin-bottom: 45px;
}
.user-message textarea {
min-height: 195px;
padding-top: 12px;
}
.contact-form form button {
margin-top: 10px;
}
.user-name,
.user-email,
.user-phone,
.user-url,
.user-message{
position: relative;
}
.user-name::after,
.user-email::after,
.user-phone::after,
.user-url::after,
.user-message::after {
position: absolute;
left: 15px;
top: 15px;
font-family: "FontAwesome";
color: #dadada;
}
.user-name::after {
content: "\f007";
}
.user-email::after {
content: "\f003";
}
.user-phone::after {
content: "\f095";
}
.user-url::after {
content: "\f0ac";
}
.user-message::after {
content: "\f086";
}
/* --------------------------------------------
Footer
----------------------------------------------- */
.footer {
background : #313131;
}
.footer .footer-block {
border-right : 1px solid #3a3a3a;
padding : 80px 60px;
min-height : 380px;
}
@media (min-width : 992px) and (max-width : 1199px) {
.footer .footer-block {
padding : 60px 50px;
}
}
@media (min-width : 768px) and (max-width : 991px) {
.footer .footer-block {
padding : 50px 15px;
}
}
@media (max-width : 767px) {
.footer .footer-block {
padding : 30px 15px;
min-height : inherit;
}
}
.footer .footer-block.last {
border-right : 0;
}
.footer .footer-widget h3 {
font-size : 16px;
line-height : 22px;
color : #ffffff;
margin-bottom : 25px;
}
.footer .widget_text {
}
.footer .footer-logo {
margin-bottom : 25px;
}
.footer .footer-widget .btn {
font-size : 11px;
padding : 5px 18px;
border-radius : 50px;
color : #6b6b6b;
border : 1px solid #4a4a4a;
margin-top : 40px;
}
.footer .footer-widget .btn:hover {
color : #ffffff;
background-color : #31aae2;
border : 1px solid transparent;
}
.footer .footer-widget address {
line-height : 22px;
}
.footer .footer-widget .social-links {
margin-top : 30px;
}
.footer .footer-widget .social-links li a {
display : block;
font-size : 20px;
width : 42px;
height : 42px;
color : #6b6b6b;
background-color : #4a4a4a;
line-height : 42px;
text-align : center;
border-radius : 50%;
}
.footer .footer-widget .social-links li a:hover {
color : #ffffff;
background-color : #31aae2;
}
.footer .copyright-section {
background-color : #2d2d2d;
color : #6b6b6b;
padding : 20px 0;
}
.footer .copyright-section .copytext {
text-transform : uppercase;
color : #6b6b6b;
font-weight : 600;
}
@media (min-width : 768px) {
.footer .copyright-section .list-inline > li {
padding-right : 10px;
padding-left : 10px;
}
}
.footer .copyright-section li a {
display : block;
font-size : 13px;
color : #6b6b6b;
}
.footer .copyright-section li a:hover,
.footer .copyright-section li.active a {
color : #ffffff;
}
/* ---------------------------------------------- /*
* Preloader
/* ---------------------------------------------- */
#preloader {
background: #706d5d;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 9999;
}
#status,
.status-mes {
background-image: url(../img/preloader.gif);
background-position: center;
background-repeat: no-repeat;
height: 200px;
left: 50%;
margin: -100px 0 0 -100px;
position: absolute;
top: 50%;
width: 200px;
}
.status-mes {
background: none;
left: 0;
margin: 0;
text-align: center;
top: 65%;
}
/* ///////////////////////////////////////////////////
*/
h1, h2, h3, h4, h5, h6 {
margin : 0 0 12px;
padding-top : 15px;
}
p {
margin-left: 2px;
margin-right: 2px;
}
a {
color : #31aae2;
text-decoration : none;
-webkit-transition : all 0.3s ease 0s;
-moz-transition : all 0.3s ease 0s;
-o-transition : all 0.3s ease 0s;
transition : all 0.3s ease 0s;
}
a,
a:active,
a:focus,
a:active {
text-decoration : none;
outline : none
}
a:hover,
a:focus {
text-decoration : underline;
}
ul {
margin-left : 30px;
margin-bottom: 14px;
padding : 0;
list-style : circle;
}
.navbar-brand {
height : 110px;
background : #0074a2;
}
@media screen and (max-width : 768px) {
.about-text {
padding-top : 170px;
}
.navbar-default {
background : #333333 !important;
padding : 5px 0px;
border-bottom : none;
}
}
@media (min-width : 768px) {
.navbar-default {
background-color : transparent;
padding : 30px 0;
border-color : transparent;
}
.sticky-nav.navbar-default {
background-color : #333333;
padding : 0px 0px;
border-bottom : transparent;
}
}
.navbar-default .navbar-nav > li {
margin-top: 30px;
}
.section-title h2 {
text-transform : none;
}
#googleMap{
height: 400px;
}
.testimonial {
padding : 100px 0px;
color : #ffffff;
background : #333333; /* Old browsers */
}
/* Option */
/*
.navbar-brand {
background : transparent;
}
@media screen and (max-width : 768px) {
.navbar-default {
background : #0074a2 !important;
}
}
@media (min-width : 768px) {
.sticky-nav.navbar-default {
background-color : #0074a2;
}
*/
/*
.footer {
background : #0074a2;
}
.footer .footer-block {
border-right : 1px solid #087baa;
}
*/
.anchor:target {
padding-top: 140px;
-webkit-transform: translateZ(0)
z-index: 1000;
}
.float-right {
float : right;
padding-left : 10px;
padding-right : 10px;
}
.float-left {
float : left;
padding-right : 10px;
}
@media (max-width : 500px) {
.float-right {
max-width: 45%;
}
.float-left {
max-width: 45%;
}
}
.stretch {
padding: 10px;
max-width: 100%;
max-height: 100%;
}
.tg {
border-collapse: collapse;
}
.tg td {
border: 1px solid #ddd;
padding: 4px 8px;
}
.x-services .thumbnail .caption {
padding : 15px 20px 0px 15px;
font-size : 13px;
}
/* --------------------------------------------------
employees start
-----------------------------------------------------*/
.employees .section-title h2 {
/* color : #ffffff;
*/
}
.employees {
padding : 50px 0px;
/* color : #ffffff;
*/
/* gradient: #f9f9f9+0,e000e0+100 */
background : #f9f9f9; /* Old browsers */
/* background : -moz-linear-gradient(-45deg, #f9f9f9 0%, #e000e0 100%); /* FF3.6-15 */
*/
/* background : -webkit-linear-gradient(-45deg, #f9f9f9 0%, #e000e0 100%); /* Chrome10-25,Safari5.1-6 */
*/
/* background : linear-gradient(135deg, #f9f9f9 0%, #e000e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
*/
/* filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e000e0', GradientType=1); /* IE6-9 fallback on horizontal gradient */
*/
}
.employees .carousel-control {
text-shadow : none;
}
#employeesSlider .carousel-inner .item {
text-align : center;
}
#employeesSlider .carousel-inner .item img {
display : inline-block;
width : 160px;
height : 200px;
border-radius : 3px;
}
#employeesSlider .carousel-inner .item .name {
text-transform : uppercase;
font-size : 12px;
margin-top : 5px;
color : #313131;
}
#employeesSlider .carousel-inner .item blockquote {
border-left : 0px;
}
#employeesSlider .carousel-inner .item blockquote p {
font-size : 20px;
line-height : 34px;
/*padding: 0px 80px;*/
font-weight : 300;
}
#employeesSlider .carousel-inner .item blockquote ul {
margin : 0px 0px;
list-style : none;
}
#employeesSlider .carousel-control.right,
#employeesSlider .carousel-control.left {
color : #313131;
background : transparent;
border : 2px solid #313131;
width : 34px;
height : 34px;
line-height : 28px;
text-align : center;
top : 30%;
}
@media (min-width : 768px) {
/*custom-padding class*/
#employeesSlider .carousel-indicators {
bottom : -60px;
}
}
@media (min-width : 992px) and (max-width : 1199px) {
#employeesSlider .carousel-inner .item blockquote p {
font-size : 18px;
}
}
@media (min-width : 768px) and (max-width : 991px) {
#employeesSlider .carousel-inner .item blockquote p {
font-size : 13px;
line-height : 24px;
}
}
@media only screen and (min-width : 480px) and (max-width : 767px) {
#employeesSlider .carousel-inner .item blockquote p {
font-size : 13px;
line-height : 24px;
margin-bottom : 20px;
padding : 0;
}
}
@media (max-width : 766px) {
#employeesSlider .carousel-inner .item blockquote p {
margin-bottom : 20px;
padding : 0;
}
}
.ptb-text {
padding-bottom : 50px;
padding-top : 50px;
}