html {
font-size: 16px;
}
body {
font-family: "Heebo", sans-serif;
background-color: #fff;
font-size: 16px;
font-size: 1rem;
color: #797979;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
p {
line-height: 1.7em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
}
ul {
list-style-type: none;
padding-left: 0;
margin: 0;
}
a {
text-decoration: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
text-decoration: none !important;
}
img {
max-width: 100%;
}
.bg-white {
background: #fff !important;
}
/** Button Styles **/
.theme-btn.one {
background: #0099cc;
}
.theme-btn.one:hover {
background: #0099cc;
}
.theme-btn.one:after {
background: #333;
}
.theme-btn {
padding: 12px 20px;
cursor: pointer;
letter-spacing: 1.2px;
background: none;
color: #fff;
font-size: 14px;
position: relative;
overflow: hidden;
z-index: 1;
background: #333;
}
.theme-btn:hover {
color: #fff;
}
.theme-btn::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #0099cc;
border: none;
-webkit-transform-origin: right center;
-moz-transform-origin: right center;
-ms-transform-origin: right center;
transform-origin: right center;
-webkit-transform: scale(0, 1);
-moz-transform: scale(0, 1);
-ms-transform: scale(0, 1);
-o-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-moz-transition: -moz-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-ms-transition: -ms-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-o-transition: -o-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.theme-btn:hover::after {
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-ms-transform-origin: left center;
transform-origin: left center;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
}
.theme-btn:focus {
text-decoration: none;
}
.section-title {
margin-bottom: 15px;
}
.section-title > span {
font-family: "Crimson Text", serif;
font-size: 25px;
font-size: 1.5625rem;
color: #0099cc;
}
.section-title h2 {
font-size: 36px;
font-size: 2.25rem;
margin: 0;
}
.section-title-s2 {
text-align: center;
margin-bottom: 35px;
}
.section-title-s2 > span {
font-family: "Crimson Text", serif;
font-size: 25px;
font-size: 1.5625rem;
color: #0099cc;
display: inline-block;
margin-top: -0.28em;
text-transform: capitalize;
font-weight: 600;
}
.section-title-s2 h2 {
font-size: 42px;
font-size: 2.625rem;
font-weight: bold;
margin: 0 0 0.29em;
text-transform: capitalize;
}
.section-title-s2 p {
font-size: 16px;
font-weight: 300;
margin: 0;
}
.section-title-s3 {
margin-bottom: 48px;
}
.section-title-s3 h2 {
margin: -0.1em 0 0.2em;
}
.section-title-s4 {
text-align: left;
}
.page-wrapper {
position: relative;
overflow: hidden;
}
.wow {
visibility: hidden;
}
.fi:before {
margin: 0;
}
.section-padding {
padding: 110px 0 80px;
}
.pt0 {
padding-top: 0;
}
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotating {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 5s alternate infinite;
animation: rotating 5s alternate infinite;
}
/*** back to top **/
.back-to-top {
background-color: #0099cc;
width: 45px;
height: 45px;
line-height: 45px;
border: 2px solid #0099cc;
border-radius: 45px;
text-align: center;
display: none;
position: fixed;
z-index: 999;
right: 15px;
bottom: 90px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-o-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.back-to-top:hover {
background-color: #0099cc;
}
.back-to-top i {
font-size: 18px;
font-size: 1.125rem;
color: #fff;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*
================================================
3. Loader CSS
================================================
*/
.preloader {
background-color: #fff;
width: 100%;
height: 100%;
position: fixed;
z-index: 1000;
}
.preloader span {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.preloader .sb-cube-grid {
width: 60px;
height: 60px;
position: absolute;
top: calc(50% - 30px);
left: calc(50% - 30px);
}
.preloader .sb-cube-grid .sb-cube {
width: 33%;
height: 33%;
background-color: #0099cc;
float: left;
-webkit-animation: sb-cubeGridScaleDelay 1.3s infinite ease-in-out;
animation: sb-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.preloader .sb-cube-grid .sb-cube1 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.preloader .sb-cube-grid .sb-cube2 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.preloader .sb-cube-grid .sb-cube3 {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
.preloader .sb-cube-grid .sb-cube4 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.preloader .sb-cube-grid .sb-cube5 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.preloader .sb-cube-grid .sb-cube6 {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.preloader .sb-cube-grid .sb-cube7 {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.preloader .sb-cube-grid .sb-cube8 {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.preloader .sb-cube-grid .sb-cube9 {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
@-webkit-keyframes sb-cubeGridScaleDelay {
0%,
70%,
100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
@keyframes sb-cubeGridScaleDelay {
0%,
70%,
100% {
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
}
35% {
-webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1);
}
}
/*--------------------------------------------------------------
4. Header
--------------------------------------------------------------*/
.site-header {
height: 100px;
line-height: 100px;
}
.site-header .navigation {
background-color: #fff;
margin-bottom: 0;
border: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
-ms-border-radius: 0;
border-radius: 0;
}
.site-header .navigation > .container {
position: relative;
}
.site-header #navbar {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
/*** mega-menu style ***/
}
.site-header #navbar > ul li a:hover,
.site-header #navbar > ul li a:focus {
text-decoration: none;
color: #0099cc !important;
}
.site-header #navbar > ul li.active a {
color: #0099cc !important;
background: none;
}
.site-header #navbar > ul > .menu-item-has-children > a {
position: relative;
}
.site-header #navbar > ul > .menu-item-has-children > a:before {
font-family: "themify";
content: "\e64b";
font-size: 8px;
font-size: 0.5rem;
position: absolute;
right: 5px;
top: 41%;
}
@media screen and (min-width: 992px) {
.site-header #navbar {
/*** hover effect ***/
}
.site-header #navbar li {
position: relative;
}
.site-header #navbar > ul > li > a {
font-size: 15px;
font-size: 0.9375rem;
padding: 40px 18px;
}
.site-header #navbar > ul .sub-menu {
background-color: #222328;
width: 220px;
position: absolute;
left: 0;
top: 100%;
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
-webkit-box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.site-header #navbar > ul .sub-menu:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 0 9px 10px 9px;
border-color: transparent transparent #222328 transparent;
margin: 0 0 0 20px;
padding-top: 1px;
position: absolute;
top: -11px;
}
.site-header #navbar > ul .sub-menu .sub-menu:before {
display: none;
}
.site-header #navbar > ul > li .sub-menu li {
border-bottom: 1px solid #35363a;
}
.site-header #navbar > ul > li .sub-menu li:last-child {
border-bottom: 0;
}
.site-header #navbar > ul > li .sub-menu a {
font-size: 13px;
font-size: 0.8125rem;
display: block;
padding: 13px 20px;
color: #c1c1c1;
text-transform: capitalize;
}
.site-header #navbar > ul > li .sub-menu a:hover {
padding-left: 25px;
}
.site-header #navbar > ul > li > .sub-menu .sub-menu {
left: 100%;
top: 0;
}
.site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a {
position: relative;
}
.site-header #navbar > ul > li > .sub-menu > .menu-item-has-children > a:before {
font-family: "themify";
content: "\e649";
font-size: 11px;
font-size: 0.6875rem;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.site-header #navbar > ul > li:hover > .sub-menu {
top: 100%;
visibility: visible;
opacity: 1;
}
.site-header #navbar .sub-menu > li:hover > .sub-menu {
left: 100%;
visibility: visible;
opacity: 1;
}
}
@media (max-width: 991px) {
.site-header #navbar > ul > li a {
display: block;
font-size: 14px;
font-size: 0.875rem;
}
.site-header #navbar > ul > li .sub-menu li {
border-bottom: 1px solid #e6e6e6;
}
.site-header #navbar > ul .sub-menu > li:last-child {
border-bottom: 0;
}
.site-header #navbar > ul > li > .sub-menu a {
padding: 8px 15px 8px 45px;
}
.site-header #navbar > ul > li > .sub-menu .sub-menu a {
padding: 8px 15px 8px 65px;
}
.site-header #navbar > ul .menu-item-has-children > a {
position: relative;
}
.site-header #navbar > ul .menu-item-has-children > a:before {
font-family: "themify";
content: "\e61a";
font-size: 11px;
font-size: 0.6875rem;
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
@media screen and (min-width: 992px) {
.site-header #navbar {
/*** hover effect ***/
}
.site-header #navbar .has-mega-menu {
position: static;
}
.site-header #navbar .mega-menu,
.site-header #navbar .half-mega-menu {
background-color: #fff;
padding: 20px;
border-top: 2px solid #0099cc;
position: absolute;
right: 0;
top: 100%;
z-index: 10;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.site-header #navbar .mega-menu {
width: 1140px;
right: 15px;
}
.site-header #navbar .half-mega-menu {
width: 585px;
}
.site-header #navbar .mega-menu-box-title {
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
font-weight: bold;
display: block;
padding-bottom: 7px;
margin-bottom: 7px;
border-bottom: 1px solid #e6e6e6;
}
.site-header #navbar .mega-menu-list-holder li a {
font-size: 14px;
font-size: 0.875rem;
display: block;
padding: 7px 8px;
margin-left: -8px;
}
.site-header #navbar .has-mega-menu:hover > ul {
top: 100%;
visibility: visible;
opacity: 1;
}
}
@media (max-width: 1199px) {
.site-header #navbar > ul .mega-menu {
width: 950px;
right: 15px;
}
.site-header #navbar > ul .half-mega-menu {
width: 485px;
}
}
@media (max-width: 991px) {
.site-header #navbar > ul .mega-menu,
.site-header #navbar > ul .half-mega-menu {
width: auto;
}
.site-header #navbar > ul .mega-menu .row,
.site-header #navbar > ul .half-mega-menu .row {
margin: 0;
}
.site-header #navbar .mega-menu-content > .row > .col {
margin-bottom: 25px;
}
}
@media (max-width: 991px) {
.site-header #navbar .mega-menu .mega-menu-list-holder a {
padding: 5px 15px 5px 40px;
}
.site-header #navbar .mega-menu .mega-menu-box-title {
font-size: 14px;
font-size: 0.875rem;
text-transform: uppercase;
display: block;
border-bottom: 1px dotted #b3b3b3;
padding: 0 0 4px 5px;
margin: 0 25px 8px 25px;
}
}
@media screen and (min-width: 992px) {
.site-header .navbar-header .open-btn {
display: none;
}
.site-header #navbar .close-navbar {
display: none;
}
}
@media (max-width: 991px) {
.site-header {
/* class for show hide navigation */
}
.site-header .container {
width: 100%;
}
.site-header .navbar-header button {
background-color: #0099cc;
width: 40px;
height: 35px;
border: 0;
padding: 5px 10px;
outline: 0;
position: absolute;
right: 15px;
top: 6px;
z-index: 20;
}
.site-header .navbar-header button span {
background-color: #fff;
display: block;
height: 2px;
margin-bottom: 5px;
}
.site-header .navbar-header button span:last-child {
margin: 0;
}
.site-header #navbar {
background: #fff;
display: block !important;
width: 280px;
height: 100% !important;
margin: 0;
padding: 0;
border-left: 1px solid #cccccc;
border-right: 1px solid #cccccc;
position: fixed;
right: -330px;
top: 0;
z-index: 100;
}
.site-header #navbar ul a {
color: #000;
}
.site-header #navbar ul a:hover,
.site-header #navbar ul li.current a {
color: #0099cc;
}
.site-header #navbar .navbar-nav {
height: 100%;
overflow: auto;
}
.site-header #navbar .close-navbar {
background-color: #fff;
width: 40px;
height: 40px;
color: #000;
border: 0;
outline: none;
position: absolute;
left: -41px;
top: 90px;
z-index: 20;
}
.site-header #navbar .close-navbar .ti-close {
position: relative;
top: 1px;
}
.site-header #navbar > ul > li {
border-bottom: 1px solid #f2f2f2;
}
.site-header #navbar > ul > li > a {
padding: 10px 15px 10px 35px;
}
.site-header .slideInn {
right: 0 !important;
}
}
@media (max-width: 991px) {
.site-header .navbar-collapse.collapse {
display: none;
}
.site-header .navbar-collapse.collapse.in {
display: block;
}
.site-header .navbar-header .collapse,
.site-header .navbar-toggle {
display: block;
}
.site-header .navbar-header {
float: none;
}
.site-header .navbar-right {
float: none;
}
.site-header .navbar-nav {
float: none;
}
.site-header .navbar-nav > li {
float: none;
}
}
@media (max-width: 991px) {
.page-wrapper {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.body-overlay:before {
content: "";
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
position: absolute;
left: 0;
top: 0;
z-index: 10;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
}
/*--------------------------------------------------------------
5. Header Navigation
--------------------------------------------------------------*/
.header-style-3 .navbar-brand img {
max-height: 60px;
}
@media screen and (min-width: 992px) {
.header-style-3 {
width: 100%;
position: absolute;
z-index: 100;
left: 0;
top: 0;
}
.header-style-3 .navigation {
background-color: rgba(0, 0, 0, 0.1);
}
.header-style-3 .navbar-brand {
height: auto;
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.header-style-3 .navbar-brand img {
max-height: 60px;
}
.header-style-3 #navbar > ul > li > a {
font-size: 16px;
color: #fff;
}
}
@media (max-width: 991px) {
.header-style-3 .navigation {
background: #222328;
padding: 20px 0;
}
.header-style-3 .navbar-brand {
padding-top: 3px;
}
}
.header-style-3 .cart-contact {
position: absolute;
right: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 10;
}
.header-style-3 .cart-contact > div {
float: left;
position: relative;
}
.header-style-3 {
position: relative;
}
.header-style-3 .navigation {
background-color: #fff;
}
.header-style-3 .cart-contact .fi {
color: #333;
}
@media screen and (min-width: 992px) {
.header-style-3 #navbar > ul > li > a,
.header-style-3 .cart-contact .fi {
color: #333;
font-weight: bold;
}
}
.header-style-3 .topbar {
border-bottom: 1px solid #f2f2f2;
background: #182333;
color: #fff;
}
.site-header .contact-info {
position: relative;
z-index: 1;
}
.site-header .contact-info:after {
position: absolute;
content: "";
right: 0;
top: 0;
width: 5000px;
height: 100%;
background-color: #0099cc;
z-index: -1;
}
@media (max-width: 767px) {
.header-style-3 .contact-info {
text-align: center;
}
}
.header-style-3 .contact-info ul {
overflow: hidden;
font-size: 15px;
font-size: 0.9375rem;
}
@media (max-width: 767px) {
.header-style-3 .contact-info ul {
display: inline-block;
margin: 0 0 10px;
}
.site-header .contact-info::after {
width: 100%;
}
.header-style-3 .social {
margin: 5px 0 0;
}
}
.header-style-3 .contact-info ul li {
float: left;
padding-top: 15px;
padding-bottom: 15px;
}
@media (max-width: 991px) {
.header-style-3 .contact-info ul li {
font-size: 13px;
font-size: 0.8125rem;
}
}
@media (max-width: 767px) {
.header-style-3 .contact-info ul li {
float: none;
border: 0;
padding-top: 15px;
padding-bottom: 5px;
}
}
.header-style-3 .contact-info ul > li + li {
margin-left: 20px;
padding-left: 20px;
}
@media (max-width: 991px) {
.header-style-3 .contact-info ul > li + li {
margin-left: 15px;
padding-left: 15px;
}
}
@media (max-width: 767px) {
.header-style-3 .contact-info ul > li + li {
margin: 0;
padding: 5px 0 0;
border: 0;
}
}
.header-style-3 .contact-info li i {
display: inline-block;
padding-right: 5px;
position: relative;
top: 2px;
}
@media (max-width: 767px) {
.header-style-3 .social {
text-align: center;
}
}
.header-style-3 .social-links {
float: right;
padding-top: 13px;
}
@media (max-width: 767px) {
.header-style-3 .social-links {
float: none;
display: inline-block;
padding: 5px 0 20px;
}
}
.header-style-3 .social-links ul {
overflow: hidden;
position: relative;
top: 2px;
}
.header-style-3 .social-links li {
float: left;
}
.header-style-3 .social-links ul > li + li {
margin-left: 15px;
}
.header-style-3 .social-links a {
font-size: 14px;
color: #fff;
}
@media (max-width: 991px) {
.header-style-3 .social-links a {
font-size: 13px;
font-size: 0.8125rem;
}
}
.header-style-3 .social-links a:hover {
color: #0099cc;
}
/*--------------------------------------------------------------
6. Header Slider
--------------------------------------------------------------*/
.hero-slider {
width: 100%;
height: 845px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
z-index: 0;
}
@media (max-width: 991px) {
.hero-slider {
height: 600px;
}
}
.hero-slider .swiper-slide {
overflow: hidden;
color: #fff;
}
.hero-slider .swiper-container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.hero-slider .slide-inner {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1;
background-size: cover;
background-position: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: left;
}
.hero-slider .slide-inner:before {
background: #000000;
bottom: 0;
content: "";
left: 0;
opacity: 0.7;
position: absolute;
right: 0;
top: 0;
}
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
background: rgba(255, 255, 255, 0.3);
width: 55px;
height: 55px;
line-height: 55px;
margin-top: -30px;
text-align: center;
border-radius: 55px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.hero-slider .swiper-button-prev:hover,
.hero-slider .swiper-button-next:hover {
background: #4a4d50;
}
@media (max-width: 991px) {
.hero-slider .swiper-button-prev,
.hero-slider .swiper-button-next {
display: none;
}
}
.hero-slider .swiper-button-prev {
left: 25px;
}
.hero-slider .swiper-button-prev:before {
font-family: "Flaticon";
content: "\f106";
font-size: 20px;
color: #fff;
}
.hero-slider .swiper-button-next {
right: 25px;
}
.hero-slider .swiper-button-next:before {
font-family: "Flaticon";
content: "\f103";
font-size: 20px;
color: #fff;
}
.hero-slider .swiper-pagination-bullet {
font-size: 15px;
color: #d9d9d9;
margin: 0 5px;
opacity: 1;
background: transparent;
position: relative;
}
.hero-slider .swiper-pagination-bullet:before {
content: "";
background: #fff;
width: 1px;
height: 15px;
position: absolute;
left: 3px;
top: 0;
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.hero-slider .swiper-pagination-bullet-active {
color: #fff;
}
.hero-slider .swiper-pagination-bullet-active:before {
opacity: 1;
top: -20px;
}
.hero-slider .swiper-container-horizontal > .swiper-pagination-bullets,
.hero-slider .swiper-pagination-custom,
.hero-slider .swiper-pagination-fraction {
bottom: 120px;
}
.hero-slider .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 13px;
}
.hero-style-3 .slide-subtitle h4 {
font-family: "Crimson Text", serif;
font-size: 28px;
font-size: 1.75rem;
color: #fff;
margin: 0;
}
@media (max-width: 991px) {
.hero-style-3 .slide-subtitle h4 {
font-size: 22px;
font-size: 1.375rem;
}
}
.hero-style-3 .slide-title {
max-width: 800px;
}
.hero-style-3 .slide-title h2 {
font-size: 72px;
font-size: 4.5rem;
font-weight: bold;
color: #0099cc;
margin: 0.2em 0 0.38em;
}
@media (max-width: 991px) {
.hero-style-3 .slide-title h2 {
font-size: 55px;
font-size: 3.4375rem;
}
}
@media (max-width: 767px) {
.hero-style-3 .slide-title h2 {
font-size: 35px;
font-size: 2.1875rem;
}
}
.hero-style-3 .slide-text {
max-width: 550px;
}
.hero-style-3 .slide-text p {
font-size: 20px;
font-size: 1.25rem;
color: #fff;
margin: 0 0 2em;
}
@media (max-width: 991px) {
.hero-style-3 .slide-text p {
font-size: 18px;
font-size: 1.125rem;
}
}
@media (max-width: 767px) {
.hero-style-3 .slide-text p {
font-size: 16px;
font-size: 1rem;
}
}
.hero-style-3 .slide-btns > a:first-child {
margin-right: 15px;
}
@media screen and (min-width: 992px) {
.hero-style-3 .container {
margin-top: -100px;
}
}
.hero-style-3 {
height: 745px;
}
@media (max-width: 991px) {
.hero-style-3 {
height: 600px;
}
}
@media (max-width: 767px) {
.hero-style-3 {
height: 500px;
}
}
@media screen and (min-width: 992px) {
.hero-style-3 .container {
margin-top: 0;
}
}
.hero-style-3 .container {
text-align: center;
}
.hero-style-3 .slide-title,
.hero-style-3 .slide-text {
margin-left: auto;
margin-right: auto;
}
/*--------------------------------------------------------------
7. Features Wrapper
--------------------------------------------------------------*/
.features-wrapper {
padding: 50px 0;
}
.box-shadow2 {
-webkit-box-shadow: 0 0 25px 0 rgba(41, 61, 88, .06);
-moz-box-shadow: 0 0 25px 0 rgba(41, 61, 88, .06);
box-shadow: 0 0 25px 0 rgba(41, 61, 88, .06);
}
.featured-icon-box {
padding: 41px 20px 31px;
position: relative;
}
.featured-icon-box .featured-icon:after {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 5px;
background-color: #f1f1f1;
content: '';
z-index: -1;
-ms-transform: scale(0);
/* IE 9 */
-webkit-transform: scale(0);
/* Chrome, Safari, Opera */
transform: scale(0);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.featured-icon-box .featured-icon {
height: 72px;
width: 72px;
line-height: 72px;
color: #0099cc;
margin: 0 auto;
font-size: 25px;
border-radius: 5px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
position: relative;
z-index: 0;
}
.featured-box .featured-icon-box:hover .featured-icon {
color: #0099cc;
}
.featured-box .featured-icon-box:hover .featured-icon:after {
visibility: visible;
opacity: 1;
-ms-transform: scale(1);
/* IE 9 */
-webkit-transform: scale(1);
/* Chrome, Safari, Opera */
transform: scale(1);
}
/*.featured-box .featured-box-item:nth-child(2) {*/
/* box-shadow: 0 0 25px 0 rgba(41, 61, 88, .06);*/
/*}*/
.featured-icon-box .featured-content {
padding-top: 14px;
}
.featured-title h5 {
font-size: 20px;
line-height: 27px;
margin-bottom: 10px;
font-weight: 600;
}
.featured-icon-box .featured-content a {
color: #0099cc;
}
.featured-icon-box .featured-content a i {
margin-left: 5px;
font-size: 10px;
}
/*--------------------------------------------------------------
7. Home About Wrapper
--------------------------------------------------------------*/
@media (min-width: 1200px) {
.about-section .section-title {
padding-top: 75px;
}
}
.about-section .about-text p {
margin-bottom: 3em;
}
.about-section .about-pic-area {
text-align: right;
position: relative;
}
@media (max-width: 991px) {
.about-section .about-pic-area {
text-align: left;
max-width: 500px;
margin-top: 80px;
}
}
@media (max-width: 767px) {
.about-section .about-pic-area {
margin-top: 70px;
}
}
.about-section .about-pic-area:before {
content: "";
width: 480px;
height: 480px;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
.about-section .about-pic-area img {
position: relative;
margin-right: 90px;
margin-top: 40px;
}
@media (max-width: 1199px) {
.about-section .about-pic-area img {
margin-right: 0;
}
}
.about-section .about-pic-area .box {
background: #fff;
width: 143px;
height: 143px;
text-align: center;
padding-top: 20px;
position: absolute;
left: -60px;
top: 45%;
z-index: 1;
-webkit-box-shadow: 0px 9px 15.84px 8.16px rgba(0, 0, 0, 0.08);
box-shadow: 0px 9px 15.84px 8.16px rgba(0, 0, 0, 0.08);
}
@media (max-width: 1199px) {
.about-section .about-pic-area .box {
left: 0;
}
}
@media (max-width: 991px) {
.about-section .about-pic-area .box {
left: 30%;
}
}
.about-section .about-pic-area .box a {
font-size: 16px;
font-size: 1rem;
color: #333;
}
.about-section .about-pic-area .box a:hover,
.about-section .about-pic-area .box a:focus {
text-decoration: none;
}
.about-section .about-pic-area a span {
display: block;
}
.about-section .about-pic-area .fi:before {
font-size: 55px;
font-size: 3.4375rem;
color: #0099cc;
}
.about-section blockquote {
font-family: "Crimson Text", serif;
font-size: 24px;
font-size: 1.5rem;
color: #333;
padding: 0;
border: 0;
position: relative;
top: -15px;
}
@media (max-width: 767px) {
.about-section blockquote {
font-size: 20px;
font-size: 1.25rem;
}
}
.about-section .quoter h5 {
font-size: 14px;
font-size: 0.875rem;
margin: 0 0 0.5em;
}
.about-section .quoter h5 + span {
font-size: 14px;
font-size: 0.875rem;
}
/*--------------------------------------------------------------
9. CTA Section
--------------------------------------------------------------*/
.cta-section .mid-text,
.cta-section-s2 .mid-text {
color: #999;
display: inline-block;
margin: 0 25px;
}
.cta-section::before {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 20px;
content: "";
/* background: url(../images/ruler.png) repeat-x; */
top: -15px;
margin: auto;
}
.cta-section {
background: #f2f2f2;
position: relative;
}
.cta-section::after {
position: absolute;
left: 0;
right: 0;
width: 100%;
height: 20px;
content: "";
/* background: url(../images/ruler.png) repeat-x; */
bottom: -15px;
margin: auto;
}
.cta-section .theme-btn::after {
background: #182333;
}
.cta-section .theme-btn:hover::after {
border: 1px solid #182333;
}
.cta-section .theme-btn:hover {
border: 1px solid #182333;
}
.cta-section h2,
.cta-section-s2 h2 {
font-size: 42px;
font-size: 2.625rem;
color: #666;
margin: 0 0 20px;
text-align: center;
}
@media (max-width: 991px) {
.cta-section h2,
.cta-section-s2 h2 {
font-size: 35px;
font-size: 2.1875rem;
}
}
@media (max-width: 767px) {
.cta-section h2,
.cta-section-s2 h2 {
font-size: 30px;
font-size: 1.875rem;
}
}
.cta-section p {
font-size: 16px;
color: #666;
line-height: 2;
margin-bottom: 16px;
}
}
@media (max-width: 991px) {
.cta-section p,
.cta-section-s2 p {
font-size: 22px;
font-size: 1.375rem;
}
}
@media (max-width: 767px) {
.cta-section p,
.cta-section-s2 p {
font-size: 20px;
font-size: 1.25rem;
}
}
.cta-section span,
.cta-section-s2 span {
font-size: 24px;
font-size: 1.5rem;
color: #fff;
display: inline-block;
}
@media (max-width: 991px) {
.cta-section span,
.cta-section-s2 span {
font-size: 20px;
font-size: 1.25rem;
}
}
@media (max-width: 767px) {
.cta-section span,
.cta-section-s2 span {
font-size: 18px;
font-size: 1.125rem;
margin-bottom: 15px;
}
}
/*--------------------------------------------------------------
10. Portfolio Section
--------------------------------------------------------------*/
.portfolio-section .grid .details {
padding: 25px 28px;
border: 1px solid #eee;
border-bottom: 5px double #eee;
}
.portfolio-section .details h3 {
font-size: 18px;
font-size: 1.75rem;
font-weight: bold;
margin: 0 0 10px;
line-height: 1.5;
}
@media (max-width: 1199px) {
.portfolio-section .details h3 {
font-size: 16px;
font-size: 1rem;
}
}
.portfolio-section .details h3 a {
color: #0099cc;
}
.portfolio-section .details h3 a:hover {
color: #333;
}
.portfolio-section .details p {
font-size: 14px;
font-weight: 300;
color: #949292;
margin: 0;
}
@media (max-width: 1199px) {
.portfolio-section .details p {
font-size: 13px;
}
}
.portfolio-section .grid .img-holder {
overflow: hidden;
position: relative;
padding: 0 25px;
}
.portfolio-section .grid img {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
}
.portfolio-section .grid:hover img,
.portfolio-section-s2 .grid:hover img {
-webkit-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
}
@media screen and (min-width: 992px) {
.portfolio-section .owl-controls,
.portfolio-section-s2 .owl-controls {
width: 100%;
height: 60px;
margin: 0;
position: absolute;
left: 0;
top: 45%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
}
@media (max-width: 991px) {
.portfolio-section .owl-controls,
.portfolio-section-s2 .owl-controls {
margin-top: 45px;
}
}
.portfolio-section .owl-controls .owl-dots,
.portfolio-section-s2 .owl-controls .owl-dots {
display: none !important;
}
.portfolio-section .owl-theme .owl-controls .owl-nav [class*=owl-],
.portfolio-section-s2 .owl-theme .owl-controls .owl-nav [class*=owl-] {
width: 55px;
height: 55px;
line-height: 55px;
padding: 0;
border-radius: 50%;
color: #423f3f;
margin: 5px;
background: #ffffff;
-webkit-box-shadow: 0px 3px 12.96px 3.04px rgba(0, 0, 0, 0.06);
box-shadow: 0px 3px 12.96px 3.04px rgba(0, 0, 0, 0.06);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.portfolio-section .owl-theme .owl-controls .owl-nav [class*=owl-]:hover,
.portfolio-section-s2 .owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
background: #0099cc;
color: #fff;
}
@media screen and (min-width: 992px) {
.portfolio-section .owl-theme .owl-controls .owl-nav [class*=owl-],
.portfolio-section-s2 .owl-theme .owl-controls .owl-nav [class*=owl-] {
position: absolute;
top: 0;
}
}
@media (max-width: 991px) {
.portfolio-section .owl-theme .owl-controls .owl-nav [class*=owl-],
.portfolio-section-s2 .owl-theme .owl-controls .owl-nav [class*=owl-] {
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 0;
}
}
@media screen and (min-width: 992px) {
.portfolio-section .owl-theme .owl-controls .owl-nav .owl-prev,
.portfolio-section-s2 .owl-theme .owl-controls .owl-nav .owl-prev {
left: -32px;
}
}
@media screen and (min-width: 992px) {
.portfolio-section .owl-theme .owl-controls .owl-nav .owl-next,
.portfolio-section-s2 .owl-theme .owl-controls .owl-nav .owl-next {
right: -32px;
}
}
@media screen and (min-width: 992px) {
.portfolio-section-s2 .owl-theme .owl-controls .owl-nav .owl-prev {
left: 20px;
}
}
@media screen and (min-width: 992px) {
.portfolio-section-s2 .owl-theme .owl-controls .owl-nav .owl-next {
right: 20px;
}
}
/*--------------------------------------------------------------
11. Fun Facts
--------------------------------------------------------------*/
.fun-fact-section::before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background-color: #000000;
opacity: 0.75;
z-index: -1;
}
.fun-fact-section {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
position: relative;
z-index: 1;
/* background-image: url("../images/funfact-bg.jpg"); */
text-align: center;
padding: 110px 0;
}
@media (max-width: 767px) {
.fun-fact-section {
padding-bottom: 30px;
}
}
.fun-fact-section h2 {
font-size: 35px;
font-weight: 300;
margin: 0 0 35px;
color: #fff;
}
@media (max-width: 991px) {
.fun-fact-section h2 {
font-size: 30px;
font-size: 1.875rem;
}
}
@media (max-width: 767px) {
.fun-fact-section h2 {
font-size: 25px;
font-size: 1.5625rem;
}
}
.fun-fact-section .fun-fact-grids .grid {
width: 25%;
float: left;
}
@media (max-width: 767px) {
.fun-fact-section .fun-fact-grids .grid {
width: 50%;
margin-bottom: 50px;
}
}
.fun-fact-section .grid h3 {
font-size: 48px;
font-size: 3rem;
font-weight: 300;
color: #0099cc;
margin: 0 0 0.2em;
}
@media (max-width: 991px) {
.fun-fact-section .grid h3 {
font-size: 40px;
font-size: 2.5rem;
}
}
@media (max-width: 767px) {
.fun-fact-section .grid h3 {
font-size: 30px;
font-size: 1.875rem;
}
}
.fun-fact-section .grid h3 + p {
font-size: 18px;
font-size: 1.125rem;
color: #fff;
margin: 0;
}
@media (max-width: 991px) {
.fun-fact-section .grid h3 + p {
font-size: 15px;
font-size: 0.9375rem;
}
}
/*--------------------------------------------------------------
12. Our Team
--------------------------------------------------------------*/
.team-section {
padding: 110px 0;
}
.team-section .grid .inner {
position: relative;
}
.team-section .grid .details {
background: rgba(255, 255, 255, 1);
width: 94%;
padding: 35px;
left: 3%;
bottom: 80px;
opacity: 1;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
box-shadow: 0px 4px 8px 0px rgba(209, 210, 226, 0.3);
position: relative;
text-align: center;
margin: 0 0 -50px;
}
.team-section .grid:hover .details,
.team-section-s2 .grid:hover .details {
bottom: 100px;
opacity: 1;
}
.team-section .social ul,
.team-section-s2 .social ul {
overflow: hidden;
}
.team-section .social ul li {
display: inline-block;
}
.team-section .social ul > li + li {
margin-left: 12px;
}
.team-section .social ul a {
font-size: 14px;
font-size: 0.875rem;
color: #b3b3b3;
}
.team-section .social ul a:hover {
color: #0099cc;
}
.team-section .details h4 {
font-size: 22px;
margin: 0 0 8px;
color: #182333;
}
.team-section .details span {
font-size: 16px;
color: #0099cc;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
.team-section .social {
margin: 15px 0 0;
}
.team-section .owl-controls {
margin-top: 30px;
}
@media (max-width: 991px) {
.team-section .owl-controls,
.team-section-s2 .owl-controls {
margin-top: 45px;
}
}
.team-section .owl-theme .owl-controls .owl-nav [class*=owl-],
.team-section-s2 .owl-theme .owl-controls .owl-nav [class*=owl-] {
width: 50px;
height: 50px;
line-height: 47px;
padding: 0;
border-radius: 0;
color: #c5c5c5;
margin: 5px;
background: #ffffff;
border: 2px solid #e2e2e2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.team-section .owl-theme .owl-controls .owl-nav [class*=owl-]:hover,
.team-section-s2 .owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
background: #0099cc;
border-color: #0099cc;
color: #fff;
}
@media (max-width: 991px) {
.team-section .owl-theme .owl-controls .owl-nav [class*=owl-],
.team-section-s2 .owl-theme .owl-controls .owl-nav [class*=owl-] {
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 0;
}
}
.team-section .owl-theme .owl-controls .owl-nav .owl-prev,
.team-section-s2 .owl-theme .owl-controls .owl-nav .owl-prev {
border-left: 0;
}
@media screen and (min-width: 992px) {
.team-section .owl-theme .owl-controls .owl-nav .owl-prev,
.team-section-s2 .owl-theme .owl-controls .owl-nav .owl-prev {
left: 15px;
}
}
.team-section .owl-theme .owl-controls .owl-nav .owl-next,
.team-section-s2 .owl-theme .owl-controls .owl-nav .owl-next {
border-right: 0;
}
@media screen and (min-width: 992px) {
.team-section .owl-theme .owl-controls .owl-nav .owl-next,
.team-section-s2 .owl-theme .owl-controls .owl-nav .owl-next {
right: 15px;
}
}
.team-section-s2 .grid .details {
background: rgba(255, 255, 255, 0.9);
width: 100%;
padding: 35px;
position: relative;
overflow: hidden;
opacity: 1;
bottom: 0;
visibility: visible;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
transition: all 0.5s;
border: 1px solid #ece9e9;
}
.team-section-s2 .grid:hover .details {
background: #0099cc;
bottom: 0;
opacity: 1;
visibility: visible;
border-color: #0099cc;
}
.team-section-s2 .grid:hover .details .social ul a,
.team-section-s2 .grid:hover .details h4,
.team-section-s2 .grid:hover .details h4 + span {
color: #fff;
}
/*--------------------------------------------------------------
13. Testimonials Section
--------------------------------------------------------------*/
.testimonial-section {
position: relative;
padding: 90px 0px 90px;
/* background: url("../images/pattren.png") center center repeat; */
margin: 15px 0 0;
}
.section-padding.testimonial-section {
margin: 0;
}
.testimonial-section .section-title {
margin-bottom: 15px;
}
/* Testimonial Block */
.testimonial-section.bg-white .testimonials-item {
background: #f8f8f8;
}
.testimonial-section .testimonials-item {
background-color: #fff;
padding: 45px 35px;
text-align: left;
margin-bottom: .5rem;
-webkit-transition: all .4s ease;
transition: all .4s ease;
}
.testimonial-section .testimonials-item h2 {
font-size: 16px;
font-size: 1rem;
display: inline-block;
font-weight: 500;
}
.testimonial-section .testimonials-item .testimonials-stars {
display: inline-block;
margin-left: 25px;
margin-bottom: 25px;
}
.testimonial-section .testimonials-item .testimonials-stars .icon {
font-size: 17px;
font-size: 1.0625rem;
color: #0099cc;
margin: 0 .5px;
}
.testimonial-section .testimonials-item p {
font-size: 15px;
font-size: .9375rem;
color: #a6a6a6;
font-family: Poppins, sans-serif;
letter-spacing: normal;
padding: 0;
text-transform: none;
}
.testimonial-section .testimonials-item img {
width: 60px;
height: 60px;
border-radius: 100%;
margin: 0;
vertical-align: middle;
margin-top: -25px;
margin-right: 15px;
display: inline-block;
}
.testimonial-section .testimonials-item h3 {
font-size: 14.5px;
font-size: .90625rem;
color: #000;
font-weight: 400;
letter-spacing: 1px;
margin-bottom: 0;
line-height: 25px;
display: inline-block;
}
.testimonial-section .testimonials-item h3 span {
font-family: Poppins, sans-serif;
font-size: 13px;
font-size: .8125rem;
color: #0099cc;
}
.testimonial-section .owl-nav {
display: none;
}
/*--------------------------------------------------------------
14. Partners Section
--------------------------------------------------------------*/
.partners-section::before {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
content: "";
background-color: #000000;
opacity: 0.75;
z-index: -1;
}
.partners-section {
background-size: cover;
position: relative;
z-index: 1;
/* background: url(../images/funfact-bg.jpg) center center no-repeat; */
text-align: center;
padding: 110px 0;
}
.partners-section .grid {
text-align: center;
}
.partners-section .grid img {
width: auto;
margin: 0 auto;
display: inline-block;
}
/*--------------------------------------------------------------
15. Blog Section
--------------------------------------------------------------*/
.blog-section {
padding-bottom: 90px;
}
@media (max-width: 991px) {
.blog-section {
padding-bottom: 60px;
}
}
@media (max-width: 767px) {
.blog-section {
padding-bottom: 50px;
}
}
.blog-section .blog-grids {
margin: 0 -15px;
}
.blog-section .blog-grids .grid {
width: calc(33.33% - 30px);
float: left;
margin: 0 15px 30px;
height: 460px;
overflow: hidden;
box-shadow: 0 0 10px #ddd;
}
.grid .img-holder {
position: relative;
background: #323335;
}
.grid .img-holder img {
opacity: 1;
display: block;
transition: all 0.3s ease;
padding: 20px;
}
.grid:hover .img-holder img {
opacity: 0.5;
}
@media (max-width: 991px) {
.blog-section .blog-grids .grid {
width: calc(50% - 30px);
}
}
@media (max-width: 600px) {
.blog-section .blog-grids .grid {
width: calc(100% - 30px);
float: left;
}
}
.blog-section .img-cat {
position: relative;
}
.blog-section .cat {
position: absolute;
left: 25px;
top: 25px;
}
.blog-section .cat a {
background: #0099cc;
display: inline-block;
font-size: 14px;
font-size: 0.875rem;
color: #fff;
padding: 6px 15px;
margin-right: 8px;
}
@media (max-width: 991px) {
.blog-section .cat a {
font-size: 13px;
font-size: 0.8125rem;
}
}
.blog-section .grid .details {
padding: 40px 30px;
border: 1px solid #eee;
border-bottom: 5px double #d5d1d1;
}
@media (max-width: 1199px) {
.blog-section .grid .details {
padding: 35px 20px;
}
}
.blog-section .details h3 {
margin: 0;
font-size: 18px;
color: #333;
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
display: block;
}
@media (max-width: 1199px) {
.blog-section .details h3 {
font-size: 18px;
font-size: 1.125rem;
}
}
@media (max-width: 767px) {
.blog-section .details h3 {
font-size: 17px;
font-size: 1.0625rem;
}
}
.blog-section .details h3 a {
color: #333;
}
.blog-section .details h3 a:hover {
color: #0099cc;
}
.blog-section .meta {
overflow: hidden;
}
.blog-section .grid .details p {
margin: 20px 0;
}
.blog-section .grid .details a {
display: inline-block;
}
.blog-section .grid .details a:hover, .blog-section .details h3:hover {
color: #267db3;
}
.blog-section .meta .author {
float: left;
}
.blog-section .meta .comment {
float: right;
}
.blog-section .author a,
.blog-section .comment a {
color: #797979;
}
@media (max-width: 991px) {
.blog-section .author a,
.blog-section .comment a {
font-size: 14px;
font-size: 0.875rem;
}
}
.blog-section .author a:hover,
.blog-section .comment a:hover {
color: #0099cc;
}
.blog-section .author img {
border-radius: 50%;
display: inline-block;
margin-right: 5px;
}
.blog-section .comment {
padding-top: 5px;
}
.blog-section .comment i {
display: inline-block;
padding-right: 3px;
position: relative;
top: 2px;
}
/*** Blog Single ***/
.blog-single-section .entry-meta {
list-style: none;
overflow: hidden;
margin: 35px 0;
}
.blog-single-section .entry-meta li {
float: left;
font-size: 14px;
font-size: 0.875rem;
}
.blog-single-section .entry-meta > li + li {
margin-left: 20px;
padding-left: 20px;
position: relative;
}
.blog-single-section .entry-meta li a {
color: #797979;
}
.blog-single-section .entry-meta li i {
display: inline-block;
padding-right: 7px;
}
.blog-single-section .post blockquote:before {
content: "";
/* background: url(../images/quote.png) center center/auto no-repeat local; */
width: 62px;
height: 44px;
position: absolute;
left: 45px;
top: 40px;
}
.blog-single-section .post blockquote {
background-color: #0099cc;
color: #fff;
line-height: 1.6em;
padding: 120px 45px 65px;
margin-top: 60px;
border: 0;
position: relative;
}
.blog-single-section .post h3 {
font-size: 24px;
font-size: 1.5rem;
font-weight: 500;
line-height: 1.3em;
margin: 1.8em 0 1em;
}
.blog-single-section .tag-share {
border: 1px solid #f1f1f1;
padding: 25px 25px 35px;
margin: 55px 0 0;
color: #333;
font-weight: 500;
-webkit-box-shadow: 0px 9px 32.8px 7.2px rgba(0, 0, 0, 0.03);
box-shadow: 0px 9px 32.8px 7.2px rgba(0, 0, 0, 0.03);
}
.blog-single-section .tag-share ul {
list-style: none;
display: inline-block;
overflow: hidden;
}
.blog-single-section .tag-share .tag ul {
list-style: none;
position: relative;
top: 8px;
left: 8px;
}
.blog-single-section .tag-share ul li {
float: left;
}
.blog-single-section .tag-share ul > li + li {
margin-left: 10px;
}
.blog-single-section .tag-share .tag a {
font-size: 14px;
font-size: 0.875rem;
font-weight: normal;
color: #627381;
display: block;
}
.blog-single-section .tag-share .share a:hover {
background: #0099cc;
border-color: #0099cc;
color: #fff !important;
}
.blog-single-section .tag-share .share {
margin-top: 15px;
}
.blog-single-section .tag-share .share ul {
position: relative;
top: 15px;
left: 8px;
list-style: none;
display: inline-block;
overflow: hidden;
}
.blog-single-section .tag-share .share a {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border: 1px solid #eae6e6;
border-radius: 50%;
display: inline-block;
font-size: 16px;
font-size: 1rem;
color: #627381;
}
.blog-single-section .author-box {
padding: 35px 40px 25px;
margin: 70px 0;
border: 1px solid #f1f1f1;
-webkit-box-shadow: 0px 9px 32.8px 7.2px rgba(0, 0, 0, 0.03);
box-shadow: 0px 9px 32.8px 7.2px rgba(0, 0, 0, 0.03);
}
@media (max-width: 991px) {
.blog-single-section .author-box {
padding: 35px 40px;
}
}
@media (max-width: 767px) {
.blog-single-section .author-box {
padding: 25px;
}
}
.blog-single-section .author-box .author-avatar {
float: left;
}
@media (max-width: 767px) {
.blog-single-section .author-box .author-avatar {
float: none;
}
}
.blog-single-section .author-box .author-content {
display: block;
overflow: hidden;
padding-left: 25px;
}
@media (max-width: 767px) {
.blog-single-section .author-box .author-content {
padding: 0;
margin: 15px 0 0 0;
}
}
.blog-single-section .author-box .author-content p {
font-size: 15px;
font-size: 0.9375rem;
color: #949494;
margin-bottom: 20px;
}
.blog-single-section .author-box .author-name {
font-size: 18px;
font-size: 1.125rem;
font-weight: 500;
display: inline-block;
margin-bottom: 10px;
color: #333;
}
.blog-single-section .author-box .social-link {
display: inline-block;
list-style: none;
}
.blog-single-section .author-box .social-link li {
float: left;
margin-right: 15px;
}
.blog-single-section .author-box .social-link a {
display: block;
font-size: 15px;
font-size: 0.9375rem;
color: #333;
}
.blog-single-section .author-box .social-link a:hover {
color: #0099cc;
}
.blog-single-section .more-posts {
overflow: hidden;
border: 1px solid #f1f1f1;
-webkit-box-shadow: 0px 9px 32.8px 7.2px rgba(0, 0, 0, 0.03);
box-shadow: 0px 9px 32.8px 7.2px rgba(0, 0, 0, 0.03);
}
.blog-single-section .more-posts > div {
width: 50%;
float: left;
}
.blog-single-section .more-posts > div > a {
display: inline-block;
}
.blog-single-section .more-posts .previous-post,
.blog-single-section .more-posts .next-post {
font-size: 18px;
font-size: 1.125rem;
color: #939ba2;
padding: 30px;
}
@media (max-width: 767px) {
.blog-single-section .more-posts .previous-post,
.blog-single-section .more-posts .next-post {
padding: 20px;
font-size: 16px;
font-size: 1rem;
}
}
@media (max-width: 450px) {
.blog-single-section .more-posts .previous-post,
.blog-single-section .more-posts .next-post {
font-size: 14px;
font-size: 0.875rem;
}
}
.blog-single-section .more-posts .previous-post i,
.blog-single-section .more-posts .next-post i {
position: relative;
top: 2px;
}
@media (max-width: 450px) {
.blog-single-section .more-posts .previous-post i,
.blog-single-section .more-posts .next-post i {
display: none;
}
}
.blog-single-section .more-posts .next-post {
text-align: right;
border-left: 1px solid #e8e8e8;
}
.blog-single-section .more-posts .previous-post > a > span,
.blog-single-section .more-posts .next-post > a > span {
display: block;
}
.blog-single-section .more-posts .post-control-link {
color: #939ba2;
font-weight: 500;
}
.blog-single-section .more-posts .next-post i {
left: 2px;
}
.blog-single-section .more-posts a:hover .post-control-link {
color: #0099cc;
}
.blog-single-section .comments-area {
margin-top: 70px;
}
.blog-single-section .comments-area img {
border-radius: 50%;
background: #eee;
width: 80%;
}
.blog-single-section .comments-area .comments {
-webkit-box-shadow: 0px 9px 32.8px 7.2px rgba(0, 0, 0, 0.03);
box-shadow: 0px 9px 32.8px 7.2px rgba(0, 0, 0, 0.03);
border-bottom: 0;
}
.blog-single-section .comments-area li > div {
border-bottom: 1px solid #f1f1f1;
padding: 35px;
}
@media (max-width: 991px) {
.blog-single-section .comments-area li > div {
padding: 35px 25px;
}
}
.blog-single-section .comments-area ol {
list-style-type: none;
padding-left: 0;
}
.blog-single-section .comments-area ol ul {
padding-left: 30px;
list-style-type: none;
}
.blog-single-section .comments-area ol > li:last-child div {
border-bottom: 0;
}
.blog-single-section .comments-area .comments-title {
font-size: 22px;
font-size: 1.375rem;
font-weight: 500;
margin: 0 0 1.5em;
}
@media (max-width: 991px) {
.blog-single-section .comments-area .comments-title {
font-size: 20px;
font-size: 1.25rem;
}
}
.blog-single-section .comments-area li > div {
position: relative;
}
.blog-single-section .comments-area .comment-theme {
position: absolute;
left: 35px;
}
@media (max-width: 767px) {
.blog-single-section .comments-area .comment-theme {
position: static;
}
}
.blog-single-section .comments-area .comment-main-area {
padding-left: 100px;
}
@media (max-width: 767px) {
.blog-single-section .comments-area .comment-main-area {
padding-left: 0;
margin-top: 25px;
}
}
.blog-single-section .comments-area .comment-main-area p {
font-size: 15px;
font-size: 0.9375rem;
margin-bottom: 20px;
}
.blog-single-section .comments-area .comments-meta h4 {
font-family: "Heebo", sans-serif;
font-size: 16px;
font-size: 1rem;
font-weight: 500;
margin: 0 0 1em;
}
.blog-single-section .comments-area .comments-meta h4 span {
font-weight: normal;
color: #949494;
text-transform: none;
display: inline-block;
padding-left: 5px;
font-size: 14px;
font-size: 0.875rem;
}
@media (max-width: 767px) {
.blog-single-section .comments-area .comments-meta h4 span {
padding-left: 0;
}
}
.blog-single-section .comments-area .comment-reply-link {
background: #0099cc;
font-size: 14px;
font-size: 0.875rem;
font-weight: 600;
color: #fff;
display: inline-block;
padding: 4px 14px;
display: inline-block;
}
.blog-single-section .comments-area .comment-reply-link:hover {
background-color: #333;
}
.blog-single-section .comment-respond {
margin-top: 70px;
}
.blog-single-section .comment-respond .comment-reply-title {
font-size: 22px;
font-size: 1.375rem;
margin: 0 0 15px;
}
@media (max-width: 991px) {
.blog-single-section .comment-respond .comment-reply-title {
font-size: 20px;
font-size: 1.25rem;
}
}
.blog-single-section .comment-respond form input,
.blog-single-section .comment-respond form textarea {
background-color: #fdfdfd;
width: 100%;
height: 50px;
border: 2px solid #f1f1f1;
padding: 6px 15px;
margin-bottom: 15px;
outline: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
font-size: 15px;
font-size: 0.9375rem;
}
.blog-single-section .comment-respond form input:focus,
.blog-single-section .comment-respond form textarea:focus {
-webkit-box-shadow: none;
box-shadow: none;
border-color: #0099cc;
}
@media (max-width: 991px) {
.blog-single-section .comment-respond form input,
.blog-single-section .comment-respond form textarea {
height: 40px;
}
}
.blog-single-section .comment-respond form textarea {
height: 220px;
padding: 15px;
}
@media (max-width: 991px) {
.blog-single-section .comment-respond form textarea {
height: 150px;
}
}
.blog-single-section .comment-respond .form-inputs {
overflow: hidden;
}
.blog-single-section .comment-respond .form-inputs > input:nth-child(2) {
width: 49%;
float: left;
}
@media (max-width: 767px) {
.blog-single-section .comment-respond .form-inputs > input:nth-child(2) {
width: 100%;
float: none;
}
}
.blog-single-section .comment-respond .form-inputs > input:nth-child(3) {
width: 49%;
float: right;
}
@media (max-width: 767px) {
.blog-single-section .comment-respond .form-inputs > input:nth-child(3) {
width: 100%;
float: none;
}
}
.blog-single-section .comment-respond .form-submit input {
max-width: 180px;
background-color: #0099cc;
color: #fff;
font-weight: 500;
margin-bottom: 0;
border: 0;
outline: 0;
text-transform: uppercase;
}
.blog-single-section .comment-respond .form-submit input:hover {
background-color: #313131;
}
@media screen and (min-width: 1200px) {
.blog-single-left-sidebar-section .blog-sidebar {
padding-right: 45px;
padding-left: 0;
}
}
/*** Blog Sidebar ***/
.blog-sidebar {
}
@media (max-width: 991px) {
.blog-sidebar {
margin-top: 80px;
max-width: 350px;
}
}
@media (max-width: 767px) {
.blog-sidebar {
margin-top: 60px;
}
}
.blog-sidebar .widget {
-webkit-box-shadow: 0px 9px 57px 0px rgba(0, 0, 0, 0.13);
box-shadow: 0px 9px 57px 0px rgba(0, 0, 0, 0.13);
padding: 35px 25px;
}
.blog-sidebar .widget h3 {
font-size: 16px;
font-size: 1rem;
border-bottom: 1px solid #f1f1f1;
margin: 0 0 1.3em;
padding-bottom: 0.5em;
position: relative;
text-transform: capitalize;
}
.blog-sidebar > .widget + .widget {
margin-top: 35px;
}
.blog-sidebar .search-widget form div {
position: relative;
}
.blog-sidebar .search-widget input {
background-color: #f8f8f8;
height: 50px;
font-size: 15px;
font-size: 0.9375rem;
padding: 6px 50px 6px 20px;
border: 0;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
}
.blog-sidebar .search-widget input:focus {
background-color: rgba(255, 255, 255, 0.1);
}
.blog-sidebar .search-widget form button {
background: transparent;
font-size: 20px;
font-size: 1.25rem;
color: #0099cc;
border: 0;
outline: 0;
position: absolute;
right: 10px;
top: 55%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.blog-sidebar .category-widget ul {
list-style: none;
}
.blog-sidebar .category-widget ul li {
font-size: 15px;
font-size: 0.9375rem;
padding-left: 20px;
position: relative;
}
@media (max-width: 767px) {
.blog-sidebar .category-widget ul li {
font-size: 14px;
font-size: 0.875rem;
}
.blog-single-section .comments-area img {
width: auto;
}
}
.blog-sidebar .category-widget ul li span {
position: absolute;
right: 0;
}
.blog-sidebar .category-widget ul li:before {
content: "";
background: #797979;
width: 6px;
height: 6px;
border-radius: 6px;
font-size: 10px;
position: absolute;
left: 0;
top: 7px;
}
.blog-sidebar .category-widget ul li:hover:before {
background: #0099cc;
}
.blog-sidebar .category-widget ul > li + li {
margin-top: 15px;
}
.blog-sidebar .category-widget ul a {
display: block;
color: #666;
}
.blog-sidebar .category-widget ul a:hover,
.blog-sidebar .category-widget ul li:hover:before {
color: #0099cc;
}
.blog-sidebar .recent-post-widget .post {
overflow: hidden;
}
.blog-sidebar .recent-post-widget .posts > .post + .post {
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #f1f1f1;
}
.blog-sidebar .recent-post-widget .post .img-holder {
width: 70px;
float: left;
}
.blog-sidebar .recent-post-widget .post .img-holder img {
border-radius: 50%;
background: #eee;
}
.blog-sidebar .recent-post-widget .post .details {
width: calc(100% - 70px);
float: left;
padding-left: 25px;
}
.blog-sidebar .recent-post-widget .post h4 {
font-size: 15px;
font-size: 0.9375rem;
font-weight: normal;
line-height: 1.3em;
margin: 0 0 0.2em;
}
@media (max-width: 1199px) {
.blog-sidebar .recent-post-widget .post h4 {
margin: 0;
}
}
.blog-sidebar .recent-post-widget .post h4 a {
display: inline-block;
color: #333;
}
.blog-sidebar .recent-post-widget .post h4 a:hover {
color: #0099cc;
}
.blog-sidebar .recent-post-widget .post .details .date {
font-size: 13px;
font-size: 0.8125rem;
color: #8e9696;
}
.blog-sidebar .tag-widget ul {
overflow: hidden;
list-style: none;
}
.blog-sidebar .tag-widget ul li {
float: left;
margin: 0 8px 8px 0;
}
.blog-sidebar .tag-widget ul li a {
background: #f3f3f3;
font-size: 13px;
font-size: 0.8125rem;
display: inline-block;
padding: 5px 14px;
color: #8e9696;
border-radius: 0;
}
.blog-sidebar .tag-widget ul li a:hover {
background: #0099cc;
color: #fff;
}
/*--------------------------------------------------------------
16. Service Section
--------------------------------------------------------------*/
.service-section-s2 {
padding-bottom: 60px;
padding-top: 100px;
background-color: #fff;
}
@media (max-width: 991px) {
.service-section-s2 {
padding-bottom: 40px;
}
}
.service-section-s2 .service-grids {
margin: 0 -15px;
margin-top: 25px;
}
.service-section-s2 .service-grids .grid {
width: calc(33.33% - 30px);
float: left;
margin: 0 15px 40px;
padding: 25px 30px 30px;
position: relative;
overflow: hidden;
background: #fff;
-webkit-box-shadow: 0 0 25px 0 rgba(41, 61, 88, .06);
-moz-box-shadow: 0 0 25px 0 rgba(41, 61, 88, .06);
box-shadow: 0 0 25px 0 rgba(41, 61, 88, .06);
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.service-section-s2 .service-grids .grid:hover {
-webkit-box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
-moz-box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
box-shadow: 0px 10px 40px 0px rgba(50, 50, 50, 0.1);
}
@media (max-width: 991px) {
.service-section-s2 .service-grids .grid {
width: calc(50% - 30px);
}
}
@media (max-width: 600px) {
.service-section-s2 .service-grids .grid {
width: calc(100% - 30px);
float: none;
}
}
.service-section-s2 .grid .icon {
position: inherit;
width: 80px;
height: 80px;
border-radius: 5px;
color: #0099cc;
text-align: center;
margin: 0 auto 15px;
font-size: 30px;
line-height: 75px;
color: #0099cc;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
position: relative;
z-index: 0;
}
.service-section-s2 .icon .fi:before {
font-size: 50px;
font-size: 3.125rem;
color: #0099cc;
}
@media (max-width: 991px) {
.service-section-s2 .icon .fi:before {
font-size: 40px;
font-size: 2.5rem;
}
}
.service-section-s2 .grid h3 {
font-size: 20px;
margin: 0 auto 20px;
text-align: center;
}
@media (max-width: 991px) {
.service-section-s2 .grid h3 {
font-size: 18px;
font-size: 1.125rem;
}
}
.service-section-s2 .grid h3 a {
color: #333;
}
.service-section-s2 .grid h3 a:hover {
color: #0099cc;
}
.service-section-s2 .grid p {
font-size: 14px;
margin: 0;
}
/*** Single Services ***/
.services-details-image img {
width: 100%;
}
.services-details-content h3 {
font-size: 36px;
font-weight: 900;
color: #0099cc;
}
.services-faq {
margin: 40px 0;
}
.services-category ul li {
margin-bottom: 5px;
}
.services-category ul li a {
line-height: 50px;
padding: 0 35px;
background-color: #eee;
display: block;
font-size: 14px;
color: #23282d;
-webkit-transition: all 0.4s linear 0s;
-moz-transition: all 0.4s linear 0s;
-ms-transition: all 0.4s linear 0s;
-o-transition: all 0.4s linear 0s;
transition: all 0.4s linear 0s;
}
.services-category ul li a i {
margin-right: 10px;
}
.services-contact {
background-color: #0099cc;
position: relative;
overflow: hidden;
padding: 80px 20px;
margin: 30px 0 0;
}
.services-contact img {
position: relative;
z-index: 9;
}
.services-contact h5 {
font-size: 18px;
color: #fff;
position: relative;
z-index: 9;
margin: 20px 0;
}
.services-contact > a {
font-size: 30px;
color: #fff;
position: relative;
z-index: 9;
font-weight: 600;
}
/*--------------------------------------------------------------
17. Page Heading Section
--------------------------------------------------------------*/
.pagehding-sec {
/* background-image: url("../images/breadcrumb-bg.jpg"); */
background-position: center center;
background-repeat: no-repeat;
padding: 80px 0px;
position: relative;
background-size: cover;
}
.images-overlay {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
position: absolute;
width: 100%;
top: 0;
left: 0;
}
.page-heading h1 {
font-size: 40px;
text-align: left;
text-transform: capitalize;
color: #fff;
margin: 0 0 10px;
}
.breadcrumb-list {
text-align: left;
}
.breadcrumb-list li {
display: inline-block;
position: relative;
padding: 0px 14px;
color: #fff;
}
.breadcrumb-list li:first-child {
padding-left: 0px;
}
.breadcrumb-list li a {
font-weight: 600;
text-transform: capitalize;
color: #fff;
}
.breadcrumb-list li:last-child a {
color: #0099cc;
}
.breadcrumb-list li::before {
content: "";
position: absolute;
right: -4px;
font-size: 16px;
font-weight: 600;
background: #f4f4f4;
height: 10px;
width: 2px;
top: 7px;
transform: rotate(23deg);
}
.breadcrumb-list li:last-child::before {
display: none
}
.breadcrumb-list li:last-child::before {
display: none;
}
/*--------------------------------------------------------------
18. FAQ
--------------------------------------------------------------*/
.accordion-wrapper .card {
border: none;
background-color: transparent;
-webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
border-radius: 3px;
}
.accordion-wrapper .card + .card {
margin-top: 20px;
}
.accordion-wrapper .card .card-header {
background-color: transparent;
border: none;
padding: 0;
}
.accordion-wrapper .card .card-header h5 {
margin: 0;
}
.accordion-wrapper .card .card-header a {
font-size: 18px;
line-height: 28px;
font-weight: 600;
display: block;
position: relative;
z-index: 0;
background-color: #fff;
padding: 20px 45px 20px 30px;
cursor: pointer;
color: #333;
}
.accordion-wrapper .card .card-header a:after {
position: absolute;
right: 20px;
top: 20px;
content: "\f107";
font-family: "fontawesome";
}
.accordion-wrapper .card .card-header a[aria-expanded="true"]:after {
content: "\f106";
}
.accordion-wrapper .card .card-body {
background-color: #fff;
padding: 0 45px 25px 30px;
}
/*--------------------------------------------------------------
19. Gallery
--------------------------------------------------------------*/
.grid_container {
list-style: none;
}
.gutter_small {
margin: 0 -7.5px -15px -7.5px;
}
.gutter_small > li {
padding: 0 7.5px 15px 7.5px;
}
.gutter_medium {
margin: 0 -15px -30px -15px;
}
.gutter_medium > li {
padding: 0px 15px 30px 15px;
}
.grid_col3 > li {
width: 33.33%;
float: left;
}
.grid_col4 > li {
width: 25%;
float: left;
}
.gallery_item {
overflow: hidden;
position: relative;
}
.gallery_item img {
width: 100%;
}
.gallery_item .text_holder h3 {
color: #fff;
font-size: 20px;
margin: 10px 0 0;
}
.gallery_content {
bottom: 0;
display: -webkit-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
-ms-justify-content: center;
justify-content: center;
-webkit-flex-flow: column nowrap;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
position: absolute;
top: 60px;
opacity: 0;
visibility: hidden;
right: 0;
left: 0;
text-align: center;
transition: all 0.3s ease-in-out;
z-index: 2;
}
.gallery_item:hover .gallery_content {
top: 0;
opacity: 1;
visibility: visible;
}
.gallery_item::before {
background-color: rgba(0, 0, 0, 0.60);
content: "";
position: absolute;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
top: 0;
bottom: 0;
transition: all 0.5s ease-in-out;
z-index: 2;
}
.gallery_item:hover:before {
opacity: 1;
visibility: visible;
}
.grid_container .owl-carousel.owl-theme .owl-dots {
margin: 0 !important;
position: absolute;
bottom: 5px;
right: 15px;
z-index: 9;
}
.grid_container .owl-carousel {
z-index: inherit;
}
.grid_container .owl-carousel.owl-theme .owl-dots span {
margin: 5px 2px;
}
.owl-theme .owl-dots .owl-dot span {
background-color: transparent;
border: 1px solid #9a9a9a;
margin: 5px;
}
.dots_white.owl-theme .owl-dots .owl-dot.active span,
.dots_white.owl-theme .owl-dots .owl-dot:hover span {
background-color: #fff;
border-color: #fff;
}
.dots_white.owl-theme .owl-dots .owl-dot span {
border-color: #fff;
}
.gallery_content .ripple {
margin: 0;
}
.text_holder {
margin-top: 25px;
text-transform: capitalize;
}
.ripple {
background-color: #FFFFFF;
border-radius: 100%;
color: #FFBC09;
position: relative;
display: inline-block;
margin-right: 25px;
line-height: 50px;
font-size: 18px !important;
vertical-align: middle;
margin-left: 0;
height: 50px;
width: 50px;
text-align: center;
}
.ripple::before,
.ripple::after {
-webkit-animation: ripple 1.8s infinite;
-moz-animation: ripple 1.8s infinite;
-o-animation: ripple 1.8s infinite;
-ms-transition: ripple 1.8s infinite;
animation: ripple 1.8s infinite;
background-color: #ffffff;
border-radius: 100%;
margin: -20px;
bottom: 0px;
content: "";
display: block;
left: 0px;
opacity: 0;
position: absolute;
right: 0px;
top: 0px;
z-index: -1;
}
.ripple::before {
animation-delay: 0.4s;
-webkit-animation-delay: 0.4s;
}
.ripple::after {
animation-delay: 1s;
-webkit-animation-delay: 1s;
}
@-webkit-keyframes ripple {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0)
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}
@keyframes ripple {
0% {
opacity: 0;
-webkit-transform: scale(0);
transform: scale(0)
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1)
}
}
/*--------------------------------------------------------------
20. 404 Section
--------------------------------------------------------------*/
.oops-wrapper .content-box {
text-align: center;
display: inline-block;
width: 100%;
}
.oops-wrapper .content-box h1 {
font-size: 150px;
font-weight: 700;
color: #0099cc;
margin-top: 0;
}
.oops-wrapper .content-box h2 {
margin-bottom: 16px;
}
.oops-wrapper .content-box p {
margin-bottom: 40px;
color: #848484;
}
.oops-wrapper .content-box .sidebar_search {
max-width: 475px;
margin-bottom: 50px;
position: relative;
height: 54px;
}
.sidebar_search input {
width: 100%;
height: 50px;
border: 1px solid #f1f1f1;
padding: 0 56px 0 12px;
color: #9e9e9e;
}
.sidebar_search button {
border: none;
outline: none;
box-shadow: none;
display: block;
padding: 0;
background: transparent;
}
.sidebar_search button {
width: 54px;
height: 100%;
position: absolute;
top: 0;
right: 0;
color: #0099cc;
}
.oops-wrapper .theme-btn {
border: none;
background: #eee;
color: #333;
}
.oops-wrapper .theme-btn:hover {
color: #fff;
border: none;
}
.oops-wrapper .sidebar_search {
margin: 0 auto;
padding: 0 0 50px;
}
/*--------------------------------------------------------------
21. Contact Us
--------------------------------------------------------------*/
.contact-section .section-title-s2 {
text-align: left;
}
.contact-section .single-input textarea,
.contact-section .single-input input {
width: 100%;
height: 50px;
padding: 0 15px;
font-size: 16px;
border: 1px solid #cbcbcb;
}
.contact-section .single-input textarea {
height: 160px;
padding-top: 10px;
resize: none;
}
.contact-section .theme-btn {
border: 1px solid #2d2d2d;
background: #2d2d2d;
}
.contact-section .theme-btn:hover {
border: 1px solid #0099cc;
}
.contact-section .contact-info ul li + li {
margin-top: 30px;
}
.contact-section .contact-info ul li .single-info {
position: relative;
padding: 15px 0;
}
.contact-info ul li .single-info .info-icon {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
.contact-info ul li .single-info .info-icon i {
font-size: 24px;
color: #fff;
background-color: #0099cc;
border-radius: 5px;
text-align: center;
width: 50px;
line-height: 50px;
}
.contact-info ul li .single-info .info-content {
padding-left: 70px;
}
.contact-info ul li .single-info .info-content p {
margin: 0;
}
.google-map {
width: 100%;
border-radius: 10px;
margin-top: 40px;
}
.google-map iframe {
width: 100%;
border: none;
height: 200px;
}
/*--------------------------------------------------------------
22. Footer
--------------------------------------------------------------*/
.site-footer {
background-color: #222328;
position: relative;
font-size: 15px;
}
.site-footer ul {
list-style: none;
}
.site-footer p,
.site-footer li {
color: #ccc;
font-size: 16px;
}
.site-footer a {
color: #0099cc;
}
.site-footer .upper-footer {
padding: 90px 0;
background: #253139;
}
@media (max-width: 991px) {
.site-footer .upper-footer {
padding: 90px 0 20px;
}
}
@media (max-width: 767px) {
.site-footer .upper-footer {
padding: 80px 0 10px;
}
}
@media (max-width: 991px) {
.site-footer .upper-footer .col {
min-height: 235px;
margin-bottom: 70px;
}
}
@media (max-width: 767px) {
.site-footer .upper-footer .col {
min-height: auto;
margin-bottom: 60px;
}
}
.site-footer .widget-title {
margin-bottom: 30px;
}
@media (max-width: 767px) {
.site-footer .widget-title {
margin-bottom: 20px;
}
}
.site-footer .widget-title h3 {
font-size: 18px;
color: #fff;
margin: 0;
padding-bottom: 12px;
text-transform: capitalize;
position: relative;
}
.site-footer .widget-title h3:after {
position: absolute;
width: 50px;
height: 2px;
background: #0099cc;
content: "";
left: 0;
bottom: 0;
}
.site-footer .about-widget .logo {
max-width: 180px;
}
.site-footer .about-widget p {
margin-bottom: 0.8em;
line-height: 1.9em;
}
.site-footer .about-widget p:last-child {
margin-bottom: 0;
}
.site-footer .link-widget {
overflow: hidden;
}
.site-footer .footer-social-menu li a {
background: #1e282f;
border-radius: 2px;
color: #9fa4af;
display: block;
font-size: 15px;
height: 40px;
line-height: 40px;
text-align: center;
width: 40px;
}
.site-footer .footer-social-menu li a:hover,
.site-footer .footer-social-menu li a:focus {
background: #0099cc;
color: #ffffff;
}
@media screen and (min-width: 1200px) {
.site-footer .link-widget {
padding-left: 20px;
}
}
@media (max-width: 1199px) {
.site-footer .link-widget {
padding-left: 20px;
}
}
@media (max-width: 991px) {
.site-footer .link-widget {
padding-left: 0;
}
}
@media (max-width: 767px) {
.site-footer .link-widget {
max-width: 350px;
}
}
.site-footer .link-widget ul {
width: 50%;
float: left;
}
.site-footer .link-widget ul li {
position: relative;
}
.site-footer .link-widget ul a {
color: #b6b6b6;
}
.site-footer .link-widget ul a:hover,
.site-footer .link-widget ul li:hover:before {
color: #0099cc;
}
.site-footer .link-widget ul > li + li {
margin-top: 15px;
}
@media screen and (min-width: 1200px) {
.site-footer .contact-widget {
padding-left: 25px;
}
}
.site-footer .contact-widget ul {
margin-top: 25px;
}
.site-footer .contact-widget ul li {
position: relative;
}
.site-footer .contact-widget ul > li + li {
margin-top: 12px;
}
.site-footer .newsletter-widget form {
margin-top: 25px;
position: relative;
}
.site-footer .newsletter-widget form input {
background-color: #1e282f;
height: 50px;
color: #fff;
padding: 6px 20px;
border-radius: 0;
border: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.site-footer .newsletter-widget form .submit {
position: absolute;
right: 20px;
top: 55%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.site-footer .newsletter-widget form .submit button {
background: transparent;
border: 0;
outline: 0;
font-size: 20px;
color: #0099cc;
margin-top: -2px;
position: relative;
right: -5px;
}
.site-footer .lower-footer {
text-align: center;
position: relative;
background: #1e282f;
padding-top: 15px;
}
.site-footer .copyright span {
color: #0099cc;
}
.site-footer .lower-footer .row {
padding: 20px 0;
position: relative;
}
.site-footer .lower-footer .row .separator {
background: rgba(255, 255, 255, 0.05);
width: calc(100% - 30px);
height: 1px;
position: absolute;
left: 15px;
top: 0;
}
.site-footer .lower-footer .copyright {
font-size: 14px;
font-size: 0.875rem;
margin: 0;
text-align: center;
}
@media (max-width: 991px) {
.site-footer .lower-footer .copyright {
float: none;
display: block;
margin: 0 0 20px;
}
}
.site-footer .lower-footer .social-icons {
display: inline-block;
float: right;
overflow: hidden;
}
@media (max-width: 991px) {
.site-footer .lower-footer .social-icons {
float: none;
display: block;
text-align: center;
}
}
.site-footer .lower-footer .social-icons ul {
overflow: hidden;
list-style: none;
}
@media (max-width: 991px) {
.site-footer .lower-footer .social-icons ul {
display: inline-block;
}
}
.site-footer .lower-footer .social-icons ul li {
float: left;
}
.site-footer .lower-footer .social-icons ul > li + li {
margin-left: 15px;
}
.site-footer .lower-footer .social-icons ul a {
font-size: 14px;
font-size: 0.875rem;
color: #b6b6b6;
}
.site-footer .lower-footer .social-icons ul a:hover {
color: #0099cc;
}
.sticky-header {
width: 100%;
position: fixed !important;
left: 0;
top: -300px;
z-index: 9999;
opacity: 0;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
-ms-transition: all 0.7s;
transition: all 0.7s;
}
.sticky-on,
.header-style-3 .sticky-on {
opacity: 1;
top: 0;
}
.header-style-3 .sticky-header {
background: #222328;
}
.header-style-3 .sticky-header {
background: #fff;
-webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}
/*--------------------------------------------------------------
23. Responsive CSS
--------------------------------------------------------------*/
@media (min-width: 992px) and (max-width: 1024px) {
/** Header **/
.header-style-3 .cart-contact {
display: none;
}
/** Footer **/
.site-footer .footer-social-menu li a {
width: 30px;
height: 30px;
line-height: 30px;
}
}
@media (min-width: 768px) and (max-width: 991px) {
/** Common Styles **/
.section-padding {
padding: 90px 0;
}
.section-title h2 {
font-size: 32px;
font-size: 2rem;
}
.section-title > span {
font-size: 22px;
font-size: 1.375rem;
}
.section-title-s2 p {
font-size: 15px;
font-size: 0.9375rem;
}
/** back to top **/
.back-to-top {
width: 35px;
height: 35px;
line-height: 35px;
}
/** Navigation **/
.header-style-3 .cart-contact {
right: 85px;
}
/** Testimonials **/
.testimonial-section .owl-nav {
display: none;
}
/** Gallery **/
.grid_col3 > li {
width: 50%;
}
}
@media (max-width: 767px) {
/** Common Styles **/
body {
font-size: 14px;
}
.section-title {
margin-bottom: 25px;
}
.section-title h2 {
font-size: 28px;
font-size: 1.75rem;
}
.section-title-s2 h2 {
font-size: 30px;
font-size: 1.675rem;
}
.section-padding {
padding: 80px 0;
}
/** Header **/
.site-header .navbar-header .navbar-brand {
font-size: 24px;
}
.site-header #navbar .navbar-nav {
margin: 0;
}
/** Hero Slider **/
.hero-slider {
height: 500px;
}
.hero-slider .swiper-container-horizontal > .swiper-pagination-bullets,
.hero-slider .swiper-pagination-custom,
.hero-slider .swiper-pagination-fraction {
bottom: 45px !important;
}
/** About Us **/
.about-section .about-pic-area::before {
display: none;
}
.about-section .about-pic-area img {
margin: 0;
}
/** Services **/
.service-section-s2 .service-grids .grid {
width: calc(100% - 30px);
}
.section-title-s2 {
margin-bottom: 25px;
}
/** Gallery **/
.gutter_medium {
margin: 0 -15px;
}
.grid_col3 > li {
width: 100%;
}
/** Testimonials **/
.testimonials-carousel .owl-controls .owl-nav [class*="owl-"] {
display: none !important;
}
/** Contact Us **/
.contact-section .contact-info {
margin: 40px 0 0;
}
}
/* office-two自定义样式 */
.index-banner-wrap {
position: relative;
height: 60vh;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.index-banner-wrap::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
background: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.index-banner {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
color: #fff;
z-index: 2;
}
.index-banner h2 {
font-size: 46px;
color: #fff;
margin: 20px;
letter-spacing: 6px;
line-height: 1.5;
}
.index-banner-content {
max-width: 90%;
margin: 0 auto 5%;
color: #fff;
font-size: 18px;
}
.index-banner-btn {
padding: 15px 35px;
cursor: pointer;
letter-spacing: 1.2px;
color: #fff !important;
font-size: 14px;
text-transform: uppercase;
font-weight: 800;
position: relative;
overflow: hidden;
z-index: 1;
background: rgba(25, 156, 213, .35);
border-radius: 4px;
}
.index-banner-btn:hover {
background: rgba(25, 156, 213, .75);
}
.hzkh-title {
position: absolute;
top: 20px;
width: 100%;
text-align: center;
color: #fff;
}
.index-news-link {
display: block;
width: 100%;
}
.index-read-more {
width: auto;
margin: auto;
}
.page-category .grid .details p {
height: 92px;
overflow: hidden;
color: #999;
}
.page_navi {
z-index: 20;
margin-top: 40px;
text-align: center;
}
.page_navi a {
margin: 0 2px;
padding: 6px 13px;
background-color: #ddd;
color: #666;
border-radius: 2px;
opacity: 0.88;
}
.page_navi a.current {
background-color: #0099cc;
color: #fff;
cursor: default;
}
.page-single-wrap {
padding: 30px 0;
}
.blog-post-wrap {
background: #fff;
padding: 20px;
box-shadow: 0 0 10px #ddd;
min-height: 100vh;
color: #666;
}
.blog-post-wrap img {
display: block;
max-width: 100%;
margin: 10px auto;
font-size: 16px;
}
.blog-post-wrap p {
line-height: 2;
font-size: 16px;
}
.blog-post-wrap ul li {
margin: 10px 20px;
list-style-type: disc;
}
.sidebar-single-img {
float: left;
width: 70px;
border-radius: 4px;
}
.page-content-wrap {
padding: 25px 0;
font-size: 18px;
}
.page-content-wrap p {
line-height: 2;
}
.site-logo {
height: 100%;
}
.site-logo img {
display: block;
margin: auto;
}
.menu-item.current-menu-item a {
color: #0099cc !important;
}
.featured-box-item {
height: 280px;
}
.index-btn {
border-radius: 5px;
display: block;
width: 140px;
margin: auto;
color: #0099cc;
font-size: 16px;
text-align: center;
padding: 10px 25px;
box-sizing: border-box;
white-space: nowrap;
text-decoration: none;
border: 1px solid #0099cc;
}
.index-product-wrap {
background-color: #f8f8f8;
}
.grid {
height: 320px;
background-color: #fff;
}
.grid .img-holder {
background: transparent;
}
.grid .details {
border: 0 !important;
}
.page-category .grid .details a.cat-title {
width: 100%;
}
@media (max-width: 767px) {
.index-banner h2 {
font-size: 26px;
}
.features-wrapper {
padding: 20px;
}
}
.about-text {
font-size: 16px;
}
.index-news-wrap .img-cat {
display: none;
}
.index-news-wrap .blog-grids .grid {
height: 180px;
box-shadow: 0 0 2px #ddd;
border-radius: 4px;
}
.page-category .blog-grids .grid {
height: 400px;
}
.page-category .grid .details {
padding: 20px;
}