/*
Template Name: Mistiri
Template URL: http://templates.gridbootstrap.com/Mistiri
Author: Grid Bootstrap
Author URI : http://www.gridbootstrap.com/
Version: 1.0
Description: Creative & Unique Architecture Building Agency Template.
Tag: HTML5, CSS3, jQuery, Architecture, Building, Responsive Template.
*/
/* Table of Contents
==========================================================================
# Global
# Header
# Home
# Services
# Features
# Work Process
# Portfolio
# Team
# Testimonial
# Blog
# Clients
# Footer
# About Us Page
# Service Page
# Features Page
# Project Page
# Project Details page
# Blog Page
# Blog Details Page
# Contact Page
# Extras
===========================================================================*/
/* ========================================================================
Global
========================================================================== */
html,
body {
font-family: 'Cabin', sans-serif;
font-weight:400;
font-size:13px;
color:#6f6f6f;
background-color: #fff;
overflow-x:hidden;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Cabin', sans-serif;
font-weight:normal;
letter-spacing:1.5px;
}
ul {
margin:0;
padding:0;
list-style:none;
}
a:hover {
color: #ffd200;
}
a, a:hover, a:active,
a:focus, button:focus, .btn:focus,
.form-control:focus {
outline: none !important;
text-decoration: none !important;
box-shadow: none !important;
}
.image-bg {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
z-index: 1;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.54);
z-index: -1;
}
.no-padding {
padding: 0;
}
.btn.btn-primary {
color: #fff;
font-size:13px;
border: none;
border-radius: 0;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 90px;
padding-left: 30px;
background-color: #f3cc29;
text-transform: uppercase;
position: relative;
font-family: 'Cabin', sans-serif;
}
.btn.btn-primary i {
position: absolute;
right: 0;
top: 0;
width: 60px;
height: 100%;
line-height: 60px;
color: #000;
background-color: #fff;
}
.btn.btn-primary:hover {
background-color:#000000;
color:#fff
}
.btn.btn-primary:hover i {
color: #fff;
background-color: #f3cc29;
}
.section-padding {
padding-top: 75px;
padding-bottom: 100px;
}
.section-title {
margin-bottom: 80px;
}
.section-title h1 {
font-size: 20px;
text-transform: uppercase;
color: #f2cc2b;
letter-spacing:2px;
}
.section-title h2 {
margin-top: 0;
letter-spacing:2px;
text-transform: uppercase;
font-family: 'Cabin', sans-serif;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-default .navbar-toggle {
border-color: #fff;
}
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color:transparent;
}
a, .portfolio-overlay,
.owl-prev, .owl-next,
a:after, a:before, .btn.btn-primary i,
.features-info i {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
/* ==========================================================================
Header
========================================================================== */
.top-bar {
background-image: url(../images/bg/rular.png);
background-color: #fff;
background-repeat: repeat-x;
padding-top: 50px;
padding-bottom: 15px;
background-size: contain;
font-size:15px;
color:#6f6f6f;
}
.info-box a {
font-size: 15px;
color: #6f6f6f;
}
.info-box a:hover,
.info-box:hover a,
.info-box:hover span,
.info-box:hover i {
color: #f2cc2b;
}
.info-box i {
font-size: 18px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
color: #fff;
background-color: #2c3e50;
}
.info-box i,
.info-box span{
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.icon-left {
margin-right: 20px;
}
.icon-right {
margin-left: 20px;
}
.icon-center {
margin-left: 50px;
margin-right: 50px;
}
.icon-left, .icon-right {
position:relative;
display:inline-block;
}
.icon-left:after,
.icon-right:after {
position:absolute;
content:"";
height:5px;
left:0;
bottom:-3px;
width:100%;
background-color:#fff;
}
.icon-left:after {
-moz-transform: skewY(2deg);
-webkit-transform: skewY(2deg);
-o-transform: skewY(2deg);
-ms-transform: skewY(2deg);
transform: skewY(2deg);
}
.icon-right:after {
-moz-transform: skewY(-2deg);
-webkit-transform: skewY(-2deg);
-o-transform: skewY(-2deg);
-ms-transform: skewY(-2deg);
transform: skewY(-2deg);
}
/* main Menu */
.main-menu {
position: relative;
text-align:center;
}
.logo {
position: absolute;
z-index: 9999;
}
.logo2 {
position: absolute;
z-index: 9999;
}
.navbar-default {
background-color:#000000;
border: none;
border-top: 2px solid #f3cc29;
margin-bottom:0;
border-radius:0;
position:relative;
}
.navbar-default:after {
position: absolute;
content: "";
height: 0;
border-left: 650px solid transparent;
border-right: 650px solid transparent;
border-top: 20px solid #000000;
margin: 0 auto;
z-index:10;
top: 100%;
width: 100%;
}
.navbar-default li {
width:13%;
margin-left:15px;
z-index: 22;
}
.navbar-default li:first-child {
margin-left:0;
}
.navbar-default .navbar-nav {
float:none;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
display:block;
font-size: 15px;
padding-top: 57px;
padding-bottom: 20px;
padding-left: 15px;
padding-right: 15px;
letter-spacing:1px;
position: relative;
z-index: 1;
text-transform: uppercase;
font-family: 'Cabin', sans-serif;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color:#fff;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover,
.dropdown-menu, .dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
color: #f2cc2b;
background-color: #25313d;
}
.navbar-default .navbar-nav > li > a:before {
background-color: #25313d;
content: "";
height:20px;
left: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: -1;
opacity:0;
visibility:hidden;
-webkit-transition: all 500ms ease 0s;
-moz-transition: all 500ms ease 0s;
-ms-transition: all 500ms ease 0s;
-o-transition: all 500ms ease 0s;
transition: all 500ms ease 0s;
}
.navbar-default .navbar-nav > li:nth-child(1) > a:before{
margin-top: -6px;
height:10px;
-moz-transform: skewY(2deg);
-webkit-transform: skewY(2deg);
-o-transform: skewY(2deg);
-ms-transform: skewY(2deg);
transform: skewY(2deg);
}
.navbar-default .navbar-nav > li:nth-child(2) > a:before{
height: 13px;
margin-top: -2.6px;
-moz-transform: skewY(1.4deg);
-webkit-transform: skewY(1.4deg);
-o-transform: skewY(1.4deg);
-ms-transform: skewY(1.4deg);
transform: skewY(1.4deg);
}
.navbar-default .navbar-nav > li:nth-child(3) > a:before{
height: 18px;
margin-top: -3px;
-moz-transform: skewY(1.4deg);
-webkit-transform: skewY(1.4deg);
-o-transform: skewY(1.4deg);
-ms-transform: skewY(1.4deg);
transform: skewY(1.4deg);
}
.navbar-default .navbar-nav > li:nth-child(4) > a:before{
height: 22px;
margin-top: -3px;
}
.navbar-default .navbar-nav > li:nth-child(5) > a:before{
height: 22px;
margin-top: -6.8px;
-moz-transform: skewY(-1.6deg);
-webkit-transform: skewY(-1.6deg);
-o-transform: skewY(-1.6deg);
-ms-transform: skewY(-1.6deg);
transform: skewY(-1.6deg);
}
.navbar-default .navbar-nav > li:nth-child(6) > a:before{
height: 14px;
margin-top: -2.6px;
-moz-transform: skewY(-1.4deg);
-webkit-transform: skewY(-1.4deg);
-o-transform: skewY(-1.4deg);
-ms-transform: skewY(-1.4deg);
transform: skewY(-1.4deg);
}
.navbar-default .navbar-nav > li:nth-child(7) > a:before{
height: 9px;
margin-top: -3px;
-moz-transform: skewY(-1.5deg);
-webkit-transform: skewY(-1.5deg);
-o-transform: skewY(-1.5deg);
-ms-transform: skewY(-1.5deg);
transform: skewY(-1.5deg);
}
.navbar-default .navbar-nav>.active>a:before,
.navbar-default .navbar-nav>.active>a:focus:before,
.navbar-default .navbar-nav>.active>a:hover:before,
.navbar-default .navbar-nav>li>a:focus:before,
.navbar-default .navbar-nav>li>a:hover:before,
.navbar-default .navbar-nav>.open>a:focus:before,
.navbar-default .navbar-nav>.open>a:hover:before {
opacity:1;
visibility:visible
}
/*Dropdown CSS*/
.navbar-nav>li>.dropdown-menu {
padding:12px 0;
display:none;
min-width:180px;
}
.navbar-nav>li:hover > ul.dropdown-menu{
display: block;
-webkit-animation: fadeInUp 400ms;
-moz-animation: fadeInUp 400ms;
-ms-animation: fadeInUp 400ms;
-o-animation: fadeInUp 400ms;
animation: fadeInUp 400ms;
}
.dropdown-menu>li {
margin-left:0;
width:initial;
}
.dropdown-menu>li>a {
color:#fff;
padding:5px 20px;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus{
background-color:transparent;
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
/* menu-two */
.main-menu.menu-two .navbar-default:after,
.main-menu.menu-two .navbar-default .navbar-nav > li > a:before {
display:none;
}
.main-menu.menu-two .navbar-default .navbar-nav > li > a {
padding-bottom:28px;
}
/*End Drpdown Menu CSS*/
/* home */
.home-section {
background-image: url(../images/bg/2.jpg);
}
.home-content {
color: #fff;
padding-top: 105px;
padding-bottom: 200px;
}
.home-content h1 {
font-size: 30px;
text-transform: uppercase;
font-family: 'Cabin', sans-serif;
}
.home-content h2 {
font-size: 72px;
margin-bottom: 20px;
text-transform: uppercase;
font-family: 'Cabin', sans-serif;
letter-spacing:7px;
}
.home-content h2 span {
color: #f2cd27;
}
/* Services */
.services {
margin-top: -170px;
background-color: #f4f4f4;
}
.services .service {
padding:15px 24px;
font-size: 13px;
font-family: 'Cabin', sans-serif;
min-height:165px;
}
.crane-lifting,
.house-plans {
margin-top: 25px;
position: relative;
}
.service.home-plumbing {
padding-top: 40px;
min-height:190px;
}
.crane-lifting {
background-image: url(../images/service/5.jpg);
}
.crane-lifting .overlay {
background-color: rgba(252, 216, 70, 0.92);
}
.home-plumbing {
background-image: url(../images/service/6.jpg);
}
.home-plumbing .overlay {
background-color: rgba(243, 204, 41, 0.90);
border-left:1px solid rgba(236, 198, 35, 0.99);
}
.house-plans {
background-image: url(../images/service/3.jpg);
}
.house-plans .overlay {
background-color: rgba(238, 195, 19, 0.90);
}
.house-plans:before,
.crane-lifting:before {
position: absolute;
content: "";
top: -25px;
}
.crane-lifting:before {
right: 0;
border-left: 385px solid transparent;
border-bottom: 25px solid rgba(252, 216, 70, 0.90);
}
.house-plans:before {
left: 0;
border-right: 385px solid transparent;
border-bottom: 25px solid rgba(238, 195, 19, 0.95);
}
.box-title {
overflow: hidden;
}
.box-title h3 {
font-size: 18px;
text-transform: uppercase;
color: #2c3e50;
margin-top: 15px;
margin-bottom: 35px;
position: relative;
}
.box-title h3:after {
position: absolute;
content: "";
left: 0;
top: 35px;
width: 60px;
height: 3px;
background-color:rgba(44,62,80, 0.20);
}
.image-box {
float: left;
margin-top: 20px;
margin-right: 60px;
min-height: 100px;
position: relative;
}
.image-box:before {
position: absolute;
content: "";
right: -30px;
top: -30px;
width: 1px;
height: 135px;
background-color:rgba(51,51,51,0.20);
}
.service-title {
background-color: #333333;
padding:25px;
position: relative;
}
.service-title h4 {
color: #fff;
text-align: center;
display:block;
line-height: 24px;
word-spacing: 5px;
letter-spacing: 3px;
font-family: 'Cabin', sans-serif;
}
.service-title:after,
.service-title:before {
position: absolute;
content: "";
bottom: 89px;
z-index: 1;
}
.service-title:before {
left: 0;
border-right: 390px solid transparent;
border-bottom: 26px solid #333333;
}
.service-title:after {
right: 0;
border-left: 390px solid transparent;
border-bottom: 26px solid #333333;
}
/* Featured Section */
.features-section {
background-color: #f4f4f4;
}
.features-tabs {
margin-right:5px;
}
.features-image {
position: absolute;
background-color: #fcd846;
padding: 15px 25px;
top: 0;
bottom:0;
left: 0;
min-width:115px;
z-index: 10;
}
.features-image img {
display:inline;
}
.features-tabs .nav-tabs {
border-bottom: 0;
}
.features-tabs .nav-tabs>li {
margin-bottom: 30px;
display: block;
width: 100%;
position: relative;
}
.features-tabs .nav-tabs>li a {
display:block;
width:100%;
padding-top: 33px;
padding-bottom: 33px;
padding-left: 155px;
color: #fff;
font-size: 18px;
background-color: #2c3e50;
border-radius: 0;
border: 0;
position: relative;
font-family: 'Cabin', sans-serif;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.features-tabs .nav-tabs>li.active>a,
.features-tabs .nav-tabs>li.active>a:focus,
.features-tabs .nav-tabs>li.active>a:hover {
border: 0;
color: #2c3e50;
background-color: #fff;
}
.features-tabs .nav-tabs>li:hover a,
.features-tabs .nav-tabs>li a:hover {
background-color: #fff;
color: #2c3e50;
}
.features-tabs .features-before{
position: relative;
}
.features-tabs .features-before a:after,
.features-tabs .features-before a:before {
position: absolute;
content: "";
right: 0;
border-left: 455px solid transparent;
z-index: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.features-tabs .features-before a:before {
top: -19px;
border-bottom: 20px solid #2c3e50;
}
.features-tabs .features-before a:after {
bottom: -20px;
border-top: 20px solid #2c3e50;
}
.features-tabs .before-middle a {
position: relative;
}
.features-tabs .before-middle a:before,
.features-tabs .before-middle a:after {
position: absolute;
content: "";
left:2px;
border-right: 480px solid transparent;
z-index: 1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.features-tabs .before-middle a:before {
top: -19px;
border-bottom: 19px solid #2c3e50;
}
.features-tabs .before-middle a:after {
bottom: -19px;
border-top: 19px solid #2c3e50;
}
.features-tabs .nav-tabs>li:hover a:before,
.features-tabs .nav-tabs>li.active a:before {
border-bottom: 20px solid #fff;
}
.features-tabs .nav-tabs>li:hover a:after,
.features-tabs .nav-tabs>li.active a:after {
border-top: 20px solid #fff;
}
.features-image:before,
.features-image:after {
position: absolute;
content: "";
background-color: #fcd846;
height: 25px;
width: 100%;
left: 0px;
z-index:5;
}
.features-image.features:before {
top: -2px;
height:15px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.features-image.features:after {
bottom: -3px;
height:15px;
-moz-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
}
.features-image.image-middle:before {
top: -17.8px;
-moz-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
.features-image.image-middle:after {
bottom: -17.5px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.features-section .right-content {
padding:10px 18px;
background-color: #fff;
position: relative;
}
.features-section .right-content:before {
position: absolute;
content: "";
top: -20px;
left: 0;
border-right: 675px solid transparent;
border-bottom: 20px solid #fff;
}
.features-section .right-content:after {
position: absolute;
content: "";
bottom: -23px;
left: 0;
border-right: 675px solid transparent;
border-top: 23px solid #fff;
}
.features-section .feature-image {
padding-left: 15px;
position:relative;
}
.features-section .feature-image:before,
.features-section .feature-image:after {
position: absolute;
content: "";
width: 100%;
left:0;
border-top: 12px solid #fff;
border-left: 300px solid transparent;
}
.features-section .feature-image:before {
top:-5px;
}
.features-section .feature-image:after {
bottom: -6px;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
.features-section .feature-image img{
border-left:1px solid #e5e5e5;
}
.feature-image.image-right {
padding-right:18px;
}
.feature-image.image-right img {
border-right:1px solid #e5e5e5;
}
.feature-image .image-border {
position:relative;
display:block;
}
.feature-image .image-border:before {
position: absolute;
content: "";
border: 1px solid #fff;
padding: 20px;
z-index: 10;
left: 18px;
top: 18px;
bottom: 18px;
right: 18px;
}
.right-content .features-info {
font-size: 13px;
line-height: 30px;
padding: 25px;
overflow:hidden;
color:#6f6f6f;
}
.right-content .features-info i {
color: #ccc;
width: 20px;
height: 20px;
line-height: 19px;
padding-left: 2px;
font-size: 12px;
text-align: center;
border: 1px solid #cccccc;
border-radius: 50%;
margin-right: 20px;
}
.right-content .features-info li:hover i {
color: #fff;
background-color: #fcd846;
border: 1px solid #fcd846;
}
.right-content .features-list {
margin-top: 20px;
}
.right-content .features-list li {
margin-bottom: 5px;
}
/* Work Process */
.work-process {
background-image: url(../images/bg/3.jpg);
height:725px;
}
.work-process .overlay {
background-color:rgba(44,62,80, 0.90);
}
.work-process .section-title {
margin-bottom: 40px;
}
.process-image {
margin-top: -80px;
text-align:center;
}
.process-image img {
display:inline-block;
}
.work-process .process-info {
color: #fff;
padding-top: 55px;
padding-bottom: 50px;
}
.process-info li {
border-bottom: 2px solid #5b6979;
}
.process-info h4 {
font-family: 'Cabin', sans-serif;
}
.process-accordion .panel {
background-color: transparent;
border: none;
border-bottom: 2px solid #5a6878;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 60px;
}
.process-accordion .active-process.panel {
padding-bottom:15px;
}
.panel-default>.panel-heading {
background-color: transparent;
border-bottom: none;
color: #fff;
}
.panel-group .panel-heading+.panel-collapse>.list-group,
.panel-group .panel-heading+.panel-collapse>.panel-body {
border: none;
}
.process-accordion .panel-title,
.process-accordion .panel-body {
margin-left: 30px;
}
.process-accordion .panel-body {
color: 13px;
line-height: 30px;
z-index: 1;
padding-bottom: 0;
padding-top: 10px;
}
.process-accordion .panel-heading {
position: relative;
}
.process-number {
position: absolute;
top: 0;
left: -60px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.active-process .process-number {
top:10px;
}
.process-bg {
position: absolute;
bottom: -20px;
right: 0;
z-index: -1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.process-bg img {
margin: 0 auto;
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
-ms-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
opacity:0.5;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.panel-default:hover .process-bg img, .active-process .process-bg img {
filter: none; /* IE6-9 */
-webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
-ms-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
filter: url("data:image/svg+xml;utf8,#grayscale");
}
.active-process .process-bg {
bottom:-70px;
}
.process-accordion .panel-title a:hover {
color:#fff;
}
/* Service Section */
.service-section {
background-color: #f9f9f9;
}
.service-tabs {
overflow: hidden;
}
.service-tabs li {
margin-bottom: 45px;
display:inline-block;
float:none;
margin-right:1%;
width:23.98%;
}
.service-tabs li:last-child {
margin-right:0;
}
.service-tabs .nav-tabs {
border-bottom: 0;
}
.service-tabs li a {
color: #fff;
display: block;
background-color: #f3cc29;
padding:20px 48px;
border-radius: 0;
border:none;
position: relative;
}
.service-tabs li a:after {
position: absolute;
content: "";
bottom:0px;
left: 50%;
margin-left: -18px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 10px solid #f3cc29;
}
.service-tabs li:first-child,
.service-tabs li:last-child {
position: relative;
}
.service-tabs li:first-child:before,
.service-tabs li:last-child:before {
position: absolute;
content: "";
top: 0px;
z-index: 1;
border-top: 10px solid #f9f9f9;
}
.service-tabs li:first-child:before {
left: 0;
border-right: 280px solid transparent;
}
.service-tabs li:last-child:before {
right: 0;
border-left: 226px solid transparent;
}
.service-tabs li a:hover:after,
.service-tabs li.active :after {
border-top: 10px solid #000000;
bottom: -8px;
}
.service-tabs li a:hover,
.service-tabs .nav-tabs>li.active>a,
.service-tabs .nav-tabs>li.active>a:focus,
.service-tabs .nav-tabs>li.active>a:hover {
color: #fff;
background-color: #2c3e50;
border:none;
}
.service-content .service-info {
padding: 10px;
font-size: 13px;
line-height: 30px;
color: #6f6f6f;
}
.service-content .service-info h4 {
color: #2c3e50;
margin-top: 0;
margin-bottom: 20px;
text-transform: uppercase;
font-family: 'Cabin', sans-serif;
}
.service-structure {
margin-top: 25px;
}
.service-structure li {
margin-left: 40px;
position: relative;
}
.service-structure li:first-child {
margin-left:0;
}
.service-structure i {
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
font-size: 25px;
color: #999;
background-color: #fff;
border: 2px solid #f1f1f1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.service-structure i:hover {
color: #fff;
background-color: #f3cc29;
}
.service-structure span {
display: block;
text-align: center;
margin-top: 10px;
}
.service-structure li.analysis:after,
.service-structure li.construc:before,
.service-structure li.construc:after {
position: absolute;
content:"";
top: 35%;
left: -45px;
width: 46px;
height: 2px;
background-color: #f1f1f1;
}
.service-structure li.construc:after {
left:99px;
}
.service-structure li:first-child,
.service-structure li:last-child {
position: relative;
border-top:0;
}
.service-structure li.planing:before,
.service-structure li.launch:before {
position: absolute;
content: "";
top: 0px;
width: 0;
height: 0;
}
.service-structure li.planing:before {
border-top:0px solid transparent;
border-left: 90px solid #f9f9f9;
border-bottom: 7px solid transparent;
}
.service-structure li.launch:before {
border-top:0px solid transparent;
border-right: 90px solid #f9f9f9;
border-bottom: 7px solid transparent;
}
.service-structure li.planing:after,
.service-structure li.launch:after {
position: absolute;
content: "";
top: 3px;
left:5px;
width: 90px;
height: 2px;
background: #f1f1f1;
}
.service-structure li.planing:after {
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.service-structure li.launch:after {
-moz-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-o-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.service-info .fa-angle-double-right {
margin-right:10px;
}
/* Portfolio Section */
.portfolio-title {
color: #fff;
padding-top: 55px;
padding-bottom: 60px;
position: relative;
background-image: url(../images/bg/4.jpg);
background-position:center center;
}
.portfolio-section .owl-nav {
position: absolute;
right: 20%;
top: -116px;
}
.portfolio-section .owl-prev,
.portfolio-section .owl-next {
position: absolute;
right: 0;
width: 40px;
height: 40px;
font-size: 25px;
line-height: 40px;
display:block;
text-align: center;
color: #fff;
background-color: #f3cc29;
}
.portfolio-section .owl-prev {
right: 41px;
}
.portfolio-section .owl-prev:hover,
.portfolio-section .owl-next:hover {
background-color: #999999;
}
.portfolio-title .section-title {
margin-bottom: 0;
}
.portfolio-title .overlay {
background-color: rgba(54, 72, 89, 0.92);
}
.portfolio-slider .portfolio {
overflow:hidden;
}
.portfolio-item {
position: relative;
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(54, 72, 89, 0.85);
border: 20px solid rgba(243, 204, 41, 0.76);
opacity: 0;
-moz-transform: scale(0.5);
-webkit-transform: scale(0.5);
-o-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
.portfolio:hover .portfolio-overlay {
opacity: 1;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.portfolio-info {
color: #fff;
font-size: 13px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -104px;
}
.portfolio-info h4 {
font-size: 18px;
}
.portfolio-icons {
position: absolute;
right: 1px;
bottom: 1px;
}
.portfolio-icons a {
float:left;
margin-left:1px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
color: #2c3e50;
background-color: #fcd846;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.portfolio-icons a:hover {
color:#fff;
}
/* Team Section */
.team-section .section-title {
margin-bottom: 0;
}
.team-member {
position:relative;
text-align:center;
display:inline-block;
width:25%;
margin-right:12%;
}
.team-member:last-child {
margin-right:0;
}
.team-member .team-info {
position:absolute;
left:0;
bottom:0;
width:100%;
height:270px;
border-left:5px solid #f3cc29;
border-right:5px solid #f3cc29;
letter-spacing:1.5px;
}
.member-image {
position:relative;
z-index:1;
}
.member-image img {
display:inline-block;
margin-bottom:70px;
}
.member-info {
position: absolute;
bottom: -6px;
width: 100%;
font-size: 13px;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
background-color: #2c3e50;
z-index: 2;
}
.member-info h4 {
font-size: 15px;
text-transform: uppercase;
font-family: 'Cabin', sans-serif;
}
.team-member .team-social {
position: absolute;
left: 9px;
width: 94%;
bottom:78px;
color: #fff;
line-height:45px;
text-align: center;
background-color: #f3cc29;
z-index:3;
}
.team-member .team-social li {
display:inline-block;
margin:0 17px;
}
.team-member .team-social a {
color: #fff;
font-size: 16px;
}
.team-member .team-social a:hover {
color:#2c3e50;
}
.team-member.member-first .team-social,
.team-member.member-last .team-social {
height:225px;
width:45px;
}
.team-member.member-first .team-social {
left:-45px;
}
.team-member.member-last .team-social {
left:100%;
}
.team-member.member-first .team-social li,
.team-member.member-last .team-social li{
display:block;
margin:6px 0;
}
.team-member.member-first,
.team-member.member-last {
border-top: 0;
position: relative;
}
.team-member.member-first:before,
.team-member.member-middle:before,
.team-member.member-last:before {
position: absolute;
content: "";
bottom: 285px;
width: 326px;
height: 5px;
background-color: #f3cc29;
}
.team-member.member-middle:before {
width: 100%;
bottom:270px;
left:0;
}
.team-member.member-first:before {
left: -40px;
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.team-member.member-last:before {
right: -40px;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
-ms-transform: rotate(-6deg);
-o-transform: rotate(-6deg);
transform: rotate(-6deg);
}
/* Testimonial Section */
.testimonial-section {
padding-top: 30px;
padding-bottom:75px;
background-image: url(../images/bg/5.jpg);
}
.testimonial-section .overlay {
background-color:rgba(44,62,80,0.90);
}
.testimonial {
color: #fff;
border: 1px solid #828e9a;
font-size: 13px;
line-height: 30px;
margin-right: 10px;
margin-left: 10px;
position: relative;
border-bottom: none;
position: relative;
margin-top: 50px;
margin-bottom: 50px;
}
.testimonial:before {
position: absolute;
content: "";
bottom: -10px;
left: 0;
width: 100%;
height: 1px;
background-color: #828e9a;
}
.testimonial:after {
position: absolute;
content: "";
bottom: -20px;
right: -1px;
width: 1px;
height: 35px;
background-color: #828e9a;
}
.right-content .testimonial:after {
left: -1px;
}
.left-content .testimonial:before {
-webkit-transform: rotate( 2deg);
-moz-transform: rotate( 2deg);
-ms-transform: rotate( 2deg);
-o-transform: rotate( 2deg);
transform: rotate( 2deg);
}
.right-content .testimonial:before {
-webkit-transform: rotate( -2deg);
-moz-transform: rotate( -2deg);
-ms-transform: rotate( -2deg);
-o-transform: rotate( -2deg);
transform: rotate( -2deg);
}
.testimonial .testimonial-icon {
position: absolute;
top: 32px;
color: #fff;
font-size: 20px;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
background-color: #f3cc29;
}
.testimonial h5 {
color: #f3cc29;
font-size: 13px;
margin-top: 15px;
}
.testimonial-info {
padding: 20px;
}
.left-content .testimonial-info {
margin-left: 70px;
}
.right-content .testimonial-info {
margin-right: 70px;
}
.left-content .testimonial .testimonial-icon {
left: 15px;
}
.right-content .testimonial .testimonial-icon {
right: 15px;
-webkit-transform: rotate( 180deg);
-moz-transform: rotate( 180deg);
-ms-transform: rotate( 180deg);
-o-transform: rotate( 180deg);
transform: rotate( 180deg);
}
.testimonial-slider .owl-dots {
text-align: center;
z-index: 99;
position: absolute;
left: 50%;
bottom: -40px;
margin-left: -30px;
}
.testimonial-slider .owl-dots .owl-dot {
display: inline-block;
zoom: 1;
}
.testimonial-slider .owl-dots .owl-dot span {
width: 12px;
height: 12px;
margin: 5px;
background-color: transparent;
border: 1px solid #fff;
display: block;
border-radius: 50px;
}
.testimonial-slider .owl-dots .owl-dot.active span,
.testimonial-slider .owl-dots .owl-dot:hover span {
background-color: #f3cc29;
border: 1px solid #f3cc29;
}
/* Blog Section */
.blog-image,
.entry-post {
position: relative;
}
.blog-image:before,
.blog-image:after,
.entry-post:before,
.entry-post:after {
position: absolute;
content: "";
z-index: 1;
}
.blog-one .blog-image:before {
top: 0;
left: 0;
border-left: 40px solid #fff;
border-bottom: 360px solid transparent;
}
.blog-two .blog-image:after {
top: 0;
bottom: 0;
right: 0;
border-right: 40px solid #fff;
border-top: 360px solid transparent;
}
.blog-one .entry-post:after {
top:0;
right: 0;
border-right: 25px solid #fff;
border-bottom: 340px solid transparent;
}
.blog-two .entry-post:before {
top:0;
left: 0;
border-left: 25px solid #fff;
border-top: 340px solid transparent;
}
.blog-content {
margin-bottom: 8px;
}
.entry-thumbnail {
position: relative;
}
.blog-content .time {
position: absolute;
top: 30px;
padding: 15px;
max-width: 85px;
text-align: center;
color: #fff;
background-color: #f3cc29;
}
.blog-content.blog-one .time {
left: 65px;
}
.blog-content .time span {
font-size: 18px;
}
.blog-content.blog-one .time span:before {
position: absolute;
content: "";
bottom: 0;
left: -6px;
border-right: 6px solid #f3cc29;
border-top: 82px solid transparent;
z-index: 1;
}
.blog-content.blog-two .time span:before {
position: absolute;
content: "";
bottom: 0;
right: -6px;
border-left: 6px solid #f3cc29;
border-bottom: 82px solid transparent;
z-index: 1;
}
.blog-content .time h2 {
margin: 0;
line-height: 24px;
text-transform: uppercase;
}
.blog-content.blog-two .time {
right: 65px;
}
.entry-title {
margin-bottom: 20px;
text-transform:capitalize;
letter-spacing:1.5px;
font-family: 'Cabin', sans-serif;
}
.entry-title a {
color: #2c3e50;
}
.blog-content .entry-meta {
padding: 10px 20px;
margin-bottom:20px;
border-top: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
}
.blog-content .entry-meta i {
font-size: 14px;
margin-right: 10px;
}
.post-content li{
margin-left: 30px;
}
.post-content li:first-child {
margin-left:0;
}
.blog-content li a {
color: #777;
font-size: 12px;
}
.entry-title a:hover,
.blog-content li a:hover {
color: #f3cc29;
}
.blog-content .entry-post {
padding-top: 25px;
padding-bottom: 35px;
padding-left: 50px;
padding-right: 50px;
color: #6f6f6f;
font-size: 13px;
line-height: 30px;
margin: 16px 0;
background-color: #f2f2f2;
}
.blog-content .btn.btn-primary {
font-size:12px;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 65px;
padding-left: 20px;
color:#2c3e50;
margin-top:7px;
}
.blog-content .btn.btn-primary:hover {
color:#fff;
}
.blog-content .btn.btn-primary:hover i {
background-color:#f3cc29
}
.blog-content .btn.btn-primary i {
width: 40px;
height: 100%;
line-height: 45px;
color: #fff;
background-color: #2c3e50;
}
/* Clients Section */
.clients-section {
background-image: url(../images/bg/brand-bg.jpg);
}
.clients-section .overlay {
background-color: rgba(229, 229, 229, 0.90);
}
.brand-item {
padding: 70px 50px;
}
.brand-image{
background-color:rgba(255,255,255,0.40);
margin:0 35px;
border:1px solid #babfc4;
text-align:center;
}
.brand-image img {
display:inline-block;
}
.coll-to-action {
font-size: 14px;
color: #fff;
padding-top: 45px;
padding-bottom: 55px;
background-color: rgba(44, 62, 80, 0.90);
}
.coll-to-action h3 {
color: #f3cc29;
text-transform: uppercase;
font-family: 'Cabin', sans-serif;
}
.coll-to-action .brand-info {
float:left;
}
.coll-to-action .brand-button {
margin-top: 25px;
float:right;
}
/* ==========================================================================
Footer
========================================================================== */
.contact-section {
background-color: #273747;
padding-bottom: 40px;
}
.contact-info {
font-size: 13px;
padding: 0 20px;
padding-top: 20px;
padding-bottom: 10px;
}
.contact-info.opening-hour {
background-color: #f3cc29;
padding-bottom: 30px;
}
.contact-info.left-contact {
background-color: #fcd846;
position: relative;
}
.contact-info.right-contact {
background-color: #eec313;
position: relative;
}
.contact-info.left-contact:after,
.contact-info.right-contact:after {
position: absolute;
content: "";
bottom: -20px;
}
.contact-info.left-contact:after {
right: 0;
border-left: 385px solid transparent;
border-top: 20px solid #fcd846;
}
.contact-info.right-contact:after {
left: 0;
border-right: 385px solid transparent;
border-top: 20px solid #eec314;
}
.contact-image.image-box {
margin-top:28px;
}
.footer-logo img {
display: inline-block;
margin-top: 40px;
}
.footer-bottom {
background-color: #212f3c;
color: #fff;
font-size: 15px;
padding-top: 35px;
padding-bottom: 25px;
}
.copyright-text a {
color:#fff;
}
.copyright-text a:hover {
color:#f3cc29;
}
.footer-social {
float: right;
}
.footer-social li+li {
margin-left: 15px;
}
.footer-social i {
font-size: 24px;
color: #4a4a4a;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.footer-social i.fa-twitter:hover {
color: #2DAAE2;
}
.footer-social i.fa-linkedin-square:hover {
color: #1E83D5;
}
.footer-social i.fa-facebook-square:hover {
color: #5D73A5;
}
.footer-social i.fa-skype:hover {
color: #00A7E4;
}
.footer-social i.fa-pinterest-square:hover {
color: #E71F28;
}
.footer-social i.fa-apple:hover {
color: #fff;
}
/* ==========================================================================
About Us Page Css
========================================================================== */
.breadcrumb-section {
background-image: url(../images/bg/4.jpg);
background-position:center center;
padding-top: 70px;
padding-bottom: 65px;
margin: 0;
border-radius: 0;
}
.breadcrumb-section .overlay {
background-color:rgba(0,0,0,0.80);
}
.breadcrumb-content {
color: #fff;
font-size: 15px;
}
.breadcrumb-content h1 {
margin-bottom: 15px;
text-transform: uppercase;
font-family: 'Cabin', sans-serif;
letter-spacing:2px;
}
.breadcrumb-content h1 span,
.breadcrumb-content h2 span {
color: #f2cd27;
font-family: 'Cabin', sans-serif;
}
.about-section {
background-color: #f9f9f9;
}
.about-info {
font-size: 13px;
line-height: 30px;
margin-left:30px;
}
.about-content {
overflow: hidden;
}
.about-info h1 {
text-transform: uppercase;
margin-bottom: 20px;
}
.about-info h1 span {
color: #f3cc29;
}
.about-info .info-list {
margin-top: 30px;
margin-bottom: 35px;
font-family: 'Cabin', sans-serif;
font-size:13px;
}
.about-info .info-list li {
margin-bottom: 15px;
}
.about-info .info-list i {
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
margin-right: 20px;
padding-left: 2px;
font-size: 10px;
color: #fff;
background-color: #f3cc29;
}
.about-info .btn.btn-primary {
color: #2c3e50;
}
.about-info .btn.btn-primary:hover {
color:#fff;
}
.about-info .btn.btn-primary i {
background-color: #2c3e50;
color: #fff;
}
.about-info .btn.btn-primary:hover i {
background-color: #f3cc29;
color: #2c3e50;
}
.timline-section {
padding-bottom:0;
}
.timline-panel {
float:right;
border: 5px solid #f5f6f7;
padding: 15px;
font-size: 13px;
line-height: 24px;
color: #6f6f6f;
position: relative;
text-align:center;
max-width:310px;
z-index: 2;
background-image: url(../images/others/timline.jpg);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.timline-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color:#e8e8e8;
z-index:1;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.timline-panel:hover {
color: #fff;
}
.timline-panel:hover .timline-overlay {
opacity: 1;
background-color:rgba(44, 62, 80, 0.90);
}
.timline-panel:after {
position: absolute;
content: "\f063";
bottom: -23px;
margin-left: -6px;
left: 50%;
color: #ccc;
font-family: fontawesome;
}
.timline-bottom .timline-panel:after {
top: -23px;
content: "\f062";
}
.timline-panel:hover:after {
color: #2c3e50;
}
.timline-panel h4 {
text-align: center;
text-transform: uppercase;
color: #2c3e50;
font-family: 'Cabin', sans-serif;
}
.timline-panel:hover h4 {
color: #fff;
}
.timline-panel h4, .timline-panel p {
position:relative;
z-index:2;
}
.posted-date {
margin-top: 30px;
margin-bottom: 30px;
position: relative;
z-index: 9999;
}
.posted-date .posted {
margin:0;
}
.posted-date:before {
position: absolute;
content: "";
top: 20px;
left: -3px;
width: 99%;
height: 7px;
background-color: #fcd846;
z-index: 1;
}
.posted-date:after {
position: absolute;
content: "";
bottom: 15px;
right: 12px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 10px solid #fcd846;
}
.posted-date .posted:after {
position: absolute;
content: "";
width: 40px;
height: 40px;
top: 4px;
right: 0;
border: 5px solid #fcd846;
z-index: -1;
}
.posted-date .posted:before {
position: absolute;
content: "";
width: 20px;
height: 14px;
top: 16px;
right: 20px;
background-color: #fff;
}
.posted-date li+li {
margin-left: 25%;
}
.posted-date li {
position: relative;
z-index: 1;
}
.posted-date .year {
border: 4px solid #d5d8dc;
padding: 2px 30px ;
background-color: #fcd846;
font-size: 24px;
font-family: 'Cabin', sans-serif;
}
.posted-date li:before,
.posted-date li:after {
position: absolute;
content: "";
top: 8px;
width: 20px;
height: 20px;
background: radial-gradient(circle, #f3ad0e, #f3d10d, #f3d10d);
background: -webkit-radial-gradient(circle, #f3ad0e, #f3d10d, #f3d10d);
background: -noz-radial-gradient(circle, #f3ad0e, #f3d10d, #f3d10d);
background: -ms-radial-gradient(circle, #f3ad0e, #f3d10d, #f3d10d);
background: -o-radial-gradient(circle, #f3ad0e, #f3d10d, #f3d10d);
border-radius: 50%;
border: 2px solid #fff;
}
.posted-date li:before {
right: -75px;
}
.posted-date li:first-child:before {
right: -92px;
}
.posted-date li:last-child:before {
right: -55px;
}
.posted-date li:first-child:after {
right: -195px;
}
.posted-date li:after {
right: -172px;
}
.posted-date li:last-child:after {
display: none;
}
/* ==========================================================================
Features Page Css
========================================================================== */
/* Skills Section */
.skills-section {
background-color: #eeeeee;
max-height:620px;
overflow:hidden;
}
.skills-image img {
width:100%;
}
.skills-info .section-title {
font-size: 13px;
line-height: 30px;
margin-bottom: 30px;
}
.skills-info .section-title h2 {
margin-bottom: 25px;
}
.skills-info {
max-width: 600px;
padding: 50px 30px;
}
.skills-info label {
font-size: 15px;
margin-bottom: 20px;
font-family: 'Cabin', sans-serif;
}
.skills-info .progress {
height: 9px;
border-radius: 0;
background-color: #fff;
margin-bottom: 30px;
}
.progress-bar {
background-color: #fcd846;
box-shadow:none;
}
/* ==========================================================================
Services Page Css
========================================================================== */
.services-section.section-padding {
padding-top:90px;
padding-bottom:80px;
}
.services-section .item {
background-color: #2c3e50;
padding: 50px;
}
.services-section .item h4 {
color: #fff;
margin-top: 45px;
text-transform: uppercase;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.services-section .item img {
display: inline-block;
}
.services-section .item.item-middle {
border: 10px solid #415161;
margin-right: 1px;
margin-left: 1px;
margin-top: -10px;
}
.services-section .item:hover h4 {
color: #f3cc29;
}
.services-section .item.item-left,
.services-section .item.item-right {
position: relative;
}
.services-section .item.item-left:before,
.services-section .item.item-left:after,
.services-section .item.item-right:before,
.services-section .item.item-right:after {
position: absolute;
content: "";
}
.services-section .item.item-left:before,
.services-section .item.item-left:after {
border-left: 390px solid transparent;
right: 0;
}
.services-section .item.item-left:before {
top: -10px;
border-bottom: 10px solid #2c3e50;
}
.services-section .item.item-left:after {
bottom: -10px;
border-top: 10px solid #2c3e50;
}
.services-section .item.item-right:before,
.services-section .item.item-right:after {
left: 0;
border-right: 390px solid transparent;
}
.services-section .item.item-right:before {
top: -10px;
border-bottom: 10px solid #2c3e50;
}
.services-section .item.item-right:after {
bottom: -10px;
border-top: 10px solid #2c3e50;
}
/* ==========================================================================
Project Page Css
========================================================================== */
.portfoli-menu {
margin-bottom: 80px;
overflow: hidden;
}
.portfoli-menu li {
float: left;
}
.portfoli-menu li+li {
margin-left: 1px;
}
.portfoli-menu a {
color: #fff;
display: block;
font-size: 15px;
background-color: #f3cc29;
padding: 20px 50px;
text-transform: capitalize;
}
.portfoli-menu a.active,
.portfoli-menu a:hover {
background-color: #2c3e50;
}
.portfoli-menu li:first-child,
.portfoli-menu li:last-child {
position: relative;
}
.portfoli-menu li:first-child:after,
.portfoli-menu li:last-child:after {
position: absolute;
content: "";
bottom: 0;
}
.portfoli-menu li:first-child:after {
left: 0;
border-right: 180px solid transparent;
border-bottom: 10px solid #fff;
}
.portfoli-menu li:last-child:after {
right: 0;
border-left: 180px solid transparent;
border-bottom: 10px solid #fff;
}
.portfolio-two {
margin-bottom: 50px;
}
.portfolio-two .portfolio {
margin-bottom:30px;
}
/* ==========================================================================
Project Details Page Css
========================================================================== */
#product-carousel {
margin-top: 20px;
}
#product-carousel .carousel-controls {
position:relative;
top:100%;
left:0;
width:100%;
margin-top:21px;
}
.carousel-controls .carousel-indicators {
display:block;
left: 0;
margin-left: 0;
text-align: left;
width: 100%;
background-color: #f6f6f6;
padding: 12px;
border: 1px solid #e5e5e5;
bottom:inherit;
}
#product-carousel .carousel-indicators li,
#product-carousel .carousel-indicators li.active {
width: 105px;
height: 100px;
border-radius: 0;
margin: 6px;
}
#product-carousel .carousel-indicators li {
border: 2px solid #f6f6f6;
position: relative;
}
#product-carousel .carousel-indicators li:before {
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(49, 49, 49, 0.6);
opacity: 0;
}
#product-carousel .carousel-indicators li:hover:before,
#product-carousel .carousel-indicators li.active:before {
opacity: 1;
}
#product-carousel .carousel-indicators li:hover,
#product-carousel .carousel-indicators li.active {
border: 2px solid #f3cc29;
}
.carousel-controls .carousel-arrow {
position: absolute;
width: 100%;
bottom: -57px;
z-index: 100;
}
.carousel-controls .carousel-arrow .left,
.carousel-controls .carousel-arrow .right{
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
bottom:inherit;
top:0;
font-size:22px;
color: #374758;
background-color: #cccccc;
color:#374758;
background-image:inherit;
opacity:0.9;
}
.carousel-controls .carousel-arrow .left {
left:0;
}
.carousel-controls .carousel-arrow .right {
right:0;
}
.carousel-controls .carousel-arrow .left:hover,
.carousel-controls .carousel-arrow .right:hover {
background-color: #f3cc29;
}
.details-info {
font-size: 13px;
line-height: 30px;
color:#6f6f6f;
}
.details-info h1 {
font-size: 18px;
margin-bottom:15px;
font-family: 'Cabin', sans-serif;
color:#2c3e50;
}
.details-list {
margin-bottom:20px;
}
.details-list li {
background-color: #f8f8f8;
border-left: 3px solid #f3cc29;
padding:10px 30px;
margin-top: 20px;
font-size: 14px;
font-family: 'Cabin', sans-serif;
color:#2c3e50;
letter-spacing:1px;
}
.details-list>ul > li {
min-height:70px;
}
.details-list li p {
margin-bottom:0;
}
.details-list li span {
display: block;
font-size: 13px;
font-family: 'Cabin', sans-serif;
color:#6f6f6f;
}
.details-list li span.cateagory {
display:inline-block;
margin-right:3px;
}
.details-list li span.cateagory a {
color:#6f6f6f;
}
.details-list li span.cateagory a:hover {
color:#f3cc29;
}
.share-project {
float: left;
margin-right: 25px;
margin-top:10px;
}
.details-social {
margin-top:10px;
}
.details-social li+li {
margin-left: 20px;
}
.details-social li {
border-left: 0;
margin-top:0;
padding: 0;
letter-spacing:0;
}
.details-social i {
color: #999;
font-size: 14px;
}
.details-social i:hover {
color: #69f;
}
.details-info .btn.btn-primary {
color: #2c3e50;
width:100%;
}
.details-info .btn.btn-primary:hover {
color:#fff;
}
.details-info .btn.btn-primary i {
font-size: 24px;
color: #fff;
width: 70px;
background-color: #2c3e50;
}
.details-info .btn.btn-primary:hover i {
color: #2c3e50;
background-color: #f3cc29;
}
.details-slider {
border-top:1px solid #ececec;
margin-top: 50px;
padding-top: 20px;
}
.details-section .owl-prev,
.details-section .owl-next {
position: absolute;
top: 0;
}
.prev-next {
border-top: 2px solid #ececec;
overflow: hidden;
margin-top: 40px;
text-transform:capitalize;
}
.prev-next a {
color: #999;
font-size: 15px;
}
.prev-next a i {
font-size: 14px;
}
.prev-next a:hover {
color: #f3cc29;
}
.prev-next .prev {
display: inline-block;
float: left;
}
.prev-next .next {
float: right;
}
.prev-next .next i {
margin-left: 10px;
}
.prev-next .prev i {
margin-right: 10px;
}
.prev-next {
padding-top: 30px;
}
.indicator-icon i {
border:2px solid #e5e5e5;
color:#ccc;
padding:8px;
font-size:16px;
display:inline-block;
margin-top:-8px;
}
/* ==========================================================================
Blog Page Css
========================================================================== */
.blogNnews .blog-content{
margin-top:100px;
}
.blogNnews .prev-next {
margin-bottom: 100px;
margin-top: 80px;
}
/* ==========================================================================
Blog Details page CSS
========================================================================== */
.blog-details {
padding-top:85px;
padding-bottom:70px;
}
.blog-details .entry-meta {
border-top: 0;
padding-top: 5px;
padding-bottom: 20px;
padding-left: 0;
margin-bottom:30px;
border-bottom:2px solid #e9ebed;
}
.blog-details .entry-meta ul {
overflow:hidden;
}
.blog-details .entry-meta li {
float:left;
padding:0 17px;
font-size:15px;
color:#999;
border-left:1px solid #b0b0b0;
border-right:1px solid #cdcdcd;
}
.blog-details .entry-meta li:first-child {
padding-left:0;
border-left:0;
}
.blog-details .entry-meta li:last-child {
padding-right:0;
border-right:0;
}
.blog-details .entry-meta li a {
font-size:15px;
color:#999;
}
.blog-details .entry-meta li a:hover{
color:#f3cc29;
}
.blog-details .time {
top:20px;
left:25px;
}
.blog-details .time span:before {
position: absolute;
content: "";
bottom: 0;
left: -6px;
border-right: 6px solid #f3cc29;
border-top: 82px solid transparent;
z-index: 1;
}
.blog-details .blog-image:after {
right:0;
top:0;
border-top: 0;
border-right: 60px solid #fff;
border-bottom: 690px solid transparent;
}
.blog-details .entry-title {
margin-top: 45px;
margin-bottom: 20px;
font-family: 'Cabin', sans-serif;
color:#2c3e50;
}
.blog-details .post {
border: 0;
padding: 0;
padding-bottom: 15px;
}
.blog-details .post li+li {
margin-left: 5px;
padding-left: 15px;
border-left: 2px solid #999;
}
.blog-details .post a {
color: #999;
}
.blog-details .post-content {
font-size: 13px;
line-height: 30px;
}
.post-content blockquote {
font-size: 13px;
color: #fff;
border-left: 3px solid #f3cc29;
background-color: #2c3e50;
padding: 25px 0;
padding-left: 60px;
margin: 25px 0;
position: relative;
}
.post-content blockquote i {
font-size: 24px;
color: #f3cc29;
position: absolute;
top: 20px;
left: 20px;
}
.post-content blockquote:after {
position: absolute;
content: "";
bottom: 0;
right: 0;
border-right:15px solid #fff;
border-top: 110px solid transparent;
}
.blog-details .share-social li {
font-size: 15px;
}
.blog-details .share-social {
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
padding: 20px;
margin-top: 40px;
}
.blog-details .post-tags {
display: inline-block;
float: left;
padding-left: 10px;
}
.blog-details .post-tags a {
color:#2c3e50;
}
.blog-details .post-tags a:hover {
color:#f3cc29;
}
.blog-details .share-social a {
font-size: 13px;
color: #2c3e50;
}
.blog-details .share-social i {
margin-right: 10px;
color: #f3cc29;
font-size: 18px;
}
.share-social .social i {
color: #fff;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 50%;
background-color: #fdb251;
}
.share-social .social li {
display: inline-block;
}
.share-social .social li:first-child {
margin-right: 20px;
}
.share-social .social .fa-facebook {
background-color: #617fc0;
}
.share-social .social .fa-tumblr {
background-color: #74bde0;
}
.share-social .social .fa-pinterest-p {
background-color: #cd4951;
}
.share-social .social .fa-flickr {
background-color: #ff0084;
}
.share-social .social .fa-vimeo {
background-color: #70b1bf;
}
.comments-area {
margin-bottom: 75px;
}
.comments-area> h4,
.replay-box> h4{
color:#2c3e50;
margin-bottom:25px;
font-family: 'Cabin', sans-serif;
}
.post-author {
font-size: 13px;
color: #666;
line-height: 24px;
border: 2px solid #f0f0f0;
border-right: 0;
background-color: #f7f7f7;
box-shadow: 0 2px 0 0 #f0f0f0;
padding: 25px;
margin-top: 70px;
margin-bottom: 80px;
position: relative;
}
.post-author:before,
.post-author:after {
position: absolute;
content: "";
top: -2px;
}
.post-author:before {
right: -2px;
border-top: 0;
border-right: 30px solid #fff;
border-bottom: 250px solid transparent;
}
.post-author:after {
right: 17px;
width: 2px;
height: 102%;
background-color: #f0f0f0;
-webkit-transform: rotate( -7deg);
-moz-transform: rotate( -7deg);
-ms-transform: rotate( -7deg);
-o-transform: rotate( -7deg);
transform: rotate( -7deg);
}
.post-author h4 {
font-size: 15px;
}
.post-author h5 {
font-size: 13px;
margin-bottom: 15px;
font-family: 'Cabin', sans-serif;
}
.author-image {
float: left;
margin-right: 40px;
}
.post-comment {
border: 2px solid #f2f2f2;
margin-bottom: 30px;
box-shadow: 0 2px 0 0 #f2f2f2;
}
.post-comment .post-nfo {
padding:0 30px;
padding-top: 30px;
padding-bottom: 40px;
}
.commenter-info {
font-size: 13px;
line-height: 30px;
}
.commenter-avatar {
float: left;
margin-right: 30px;
margin-top: 10px;
}
.media-body .btn.btn-primary {
float: right;
font-size: 12px;
color: #2c3e50;
padding-top: 13px;
padding-bottom: 13px;
padding-right: 70px;
padding-left: 25px;
}
.media-body .btn.btn-primary i {
background-color: #2c3e50;
color: #fff;
}
.media-body .btn.btn-primary:hover i {
color: #2c3e50;
background-color: #f3cc29;
}
.media-inner {
display: inline-block;
margin-top: 10px;
font-size: 14px;
font-family: 'Cabin', sans-serif;
}
.post-comment .post-nfo h5 {
color:#333;
}
.media-inner .date {
color: #999;
font-size: 12px;
font-family: 'Cabin', sans-serif;
}
/* ==========================================================================
Contact Page Css
========================================================================== */
.contact-form-section {
padding: 135px 0;
position: relative;
}
#gmap {
width: 100%;
height: 590px;
}
.contact-form-section .contact-info {
position: absolute;
bottom: -35px;
left: 0;
width: 100%;
padding: 0 30px;
padding-top: 10px;
padding-bottom: 20px;
background-color: #f9f9f9;
border: 1px solid #e5e5e5;
z-index: 999;
}
.contact-form-section .contact-info h2 {
font-size: 24px;
text-align: center;
margin-bottom: 30px;
font-family: 'Cabin', sans-serif;
}
.contact-form-section .btn.btn-primary {
margin-top: 0;
}
.contact-form .btn.btn-primary {
color: #2c3e50;
margin-top: 10px;
box-shadow: 0 2px 0 0 #bfbfbf;
margin-bottom:20px;
padding-right: 70px;
padding-left: 25px;
}
.contact-form .btn.btn-primary:hover {
box-shadow:none;
color:#fff;
}
.contact-form .btn.btn-primary i {
background-color: #2c3e50;
color: #fff;
}
.contact-form .btn.btn-primary:hover i {
background-color: #f3cc29;
color: #2c3e50;
}
.form-control {
height: 55px;
border-radius: 0;
font-size: 15px;
border: 1px solid #dddddd;
border-top: 2px solid #dddddd;
border-left: 2px solid #dddddd;
margin-bottom: 20px;
}
.contact-form input,
.contact-form textarea {
padding:0 50px;
}
.contact-form textarea {
min-height: 238px;
padding-top: 15px;
resize:none;
}
.contact-form input[type="text"],
.contact-form input[type="email"] {
background-repeat: no-repeat;
background-position: left 20px center;
}
.form-group {
position:relative;
}
.form-group i {
position: absolute;
top: 20px;
font-size: 18px;
text-align: center;
line-height: 18px;
left: 20px;
color:#f3cc29;
}
.form-group input:focus, .form-group textarea:focus {
border-color:#f3cc29;
}
/* ==========================================================================
Extra Css
========================================================================== */
#scrollUp {
bottom: 15px;
right: 50px;
padding: 10px;
text-align: center;
color: #f3cc29;
font-size: 22px;
}
@font-face {
font-family: 'Cabin', sans-serif;
src: url('../fonts/montserrat-regular-webfont.eot');
src: url('../fonts/montserrat-regular-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat-regular-webfont.woff2') format('woff2'),
url('../fonts/montserrat-regular-webfont.woff') format('woff'),
url('../fonts/montserrat-regular-webfont.ttf') format('truetype'),
url('../fonts/montserrat-regular-webfont.svg#montserratregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Cabin', sans-serif;
src: url('../fonts/montserrat-semibold-webfont.eot');
src: url('../fonts/montserrat-semibold-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat-semibold-webfont.woff2') format('woff2'),
url('../fonts/montserrat-semibold-webfont.woff') format('woff'),
url('../fonts/montserrat-semibold-webfont.ttf') format('truetype'),
url('http://template.gridbootstrap.com/fonts/montserrat-semibold-webfont.svg#montserratsemi_bold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Cabin', sans-serif;
src: url('../fonts/montserrat-bold-webfont.eot');
src: url('../fonts/montserrat-bold-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat-bold-webfont.woff2') format('woff2'),
url('../fonts/montserrat-bold-webfont.woff') format('woff'),
url('../fonts/montserrat-bold-webfont.ttf') format('truetype'),
url('../fonts/montserrat-bold-webfont.svg#montserratbold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Cabin', sans-serif;
src: url('../fonts/montserrat-extrabold-webfont.eot');
src: url('../fonts/montserrat-extrabold-webfontd41d.eot?#iefix') format('embedded-opentype'),
url('../fonts/montserrat-extrabold-webfont.woff2') format('woff2'),
url('../fonts/montserrat-extrabold-webfont.woff') format('woff'),
url('../fonts/montserrat-extrabold-webfont.ttf') format('truetype'),
url('../fonts/montserrat-extrabold-webfont.svg#montserratextra_bold') format('svg');
font-weight: normal;
font-style: normal;
}
/*Magnific-popup overwrite CSS*/
.mfp-figure {
background-color: #fff;
}
img.mfp-img {
padding:12px;
}
.mfp-image-holder .mfp-close {
top:-35px;
}
.mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor:pointer;
}
.mfp-counter {
right: 50%;
color: #fff;
top: 50px;
margin-right: -20px;
}
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-ms-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
/* End: Recommended Isotope styles */
/*========================
=======demo-chooser======
==========================*/
.demo-chooser {
width: 180px;
left: -180px;
position: fixed;
top: 50%;
margin-top:-70px;
z-index: 99999;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.demo-chooser.opened {
left: 0;
}
.demo-chooser .toggler {
position: absolute;
top: 0;
right: -48px;
display: inline-block;
background-color:#000000;
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
font-size: 24px;
color: #fff;
}
.demo-chooser-inner {
position: relative;
background-color:#000000;
padding: 15px 25px;
}
.demo-chooser-inner h4 {
margin: 0 0 10px;
text-transform: uppercase;
font-size: 13px;
color:#f2cc2b;
padding:10px 0 7px;
}
.demo-chooser-inner ul {
list-style: none;
padding: 0;
margin: -5px;
}
.demo-chooser-inner ul li {
display: block;
padding: 5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.demo-chooser-inner ul li a {
display: block;
color:#fff;
}
.demo-chooser-inner ul li a:hover {
color:#f2cc2b;
}
/* ==========================================================================
THE END OF CSS
========================================================================== */