/*
Template Name: Udayon
Template URI: https://themes.crazyenter.com/static/udayon
Description: udayon onepager multipurpose parallax template. Full responsive clean code and easy to use.
Author: crazyEnter
Author URI: https://crazyenter.com
Version: 1.0.0
[ CSS INDEX ]
===============================================
1.0 Reset Code
1.1 Color Codes
1.1.0 Color
1.1.1 Background Color
1.1.2 Border Color
1.2 Section Heading
1.3 Section Space
1.4 Header
1.4.0 Sticky Header
1.4.1 Sticky Logo
1.4.2 Logo
1.4.3 Navigation Menu
1.5 Banner Section
1.6 Banner Background
1.7 About Section
1.9 Services Section
1.10 Common Section Background
1.11 Funfacts Section
1.12 Portfolio Section
1.12.0 Portfolio Navigation
1.12.1 Portfolio List
1.13 Team Section
1.14 Video Section
1.14 Testmonail Section
1.14.0 Best Client List
1.15 Latest Blog Section
1.16 Get Start Section
1.17 Contact Section
1.17.0 Google Map
1.17.1 Address Info
1.18 Footer
1.19 Page Style
1.20 Single Page
1.21 Blog Page
1.21.0 Pagination
1.22 Blog Details
1.23 Sidebar
1.24 Project Details
1.25 Service Details
1.26 404 Page
===============================================
*/
/* =================================
1.0 Reset Code
===================================*/
* {
box-sizing: border-box;
}
html,
body {
font-family: 'Open Sans', sans-serif;
color: #444444;
font-size: 14px;
line-height: 24px;
height: 100%;
position: relative;
}
::-moz-selection {
background: #0078D7;
text-shadow: none;
color: #fff;
}
::selection {
background: #0078D7;
text-shadow: none;
color: #fff;
}
a {
color: #444444;
transition: all 0.3s linear 0s;
-webkit-transition: all 0.3s linear 0s;
text-decoration: none;
font-family: 'Open Sans', sans-serif;
}
button {
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #444444;
font-weight: 600;
font-family: 'Raleway', sans-serif;
}
button,
a,
a:hover,
a:focus,
a:active {
outline: medium none !important;
text-decoration: none;
}
img {
width: 100%;
max-width: 100%;
height: auto;
}
ul {
padding: 0;
margin: 0;
list-style: none;
}
figure {
margin: 0px !important;
}
/* =================================
1.1 Color Codes
===================================*/
/* ---------------------------
1.1.0 Color
----------------------------*/
.color,
a:hover,
.main-btn:hover,
.main-btn:active,
.main-btn:focus,
.bread-crumb li,
.bread-crumb li a:hover,
header .navbar-nav li a:hover,
header .navbar-nav li a:focus,
header .navbar-nav li a.active,
.heading:before,
.banner-content h1 span,
.type-line .type-wrap,
.single-service i,
.single-service a:hover h3,
.single-funfacts i,
.filter-count:before,
.portfolio-nav li:hover,
.portfolio-nav li.is-checked,
.video-btn,
.post-date:after,
.quote-content:before,
.single-navigation div a:hover h4,
.aside-post a h2:hover,
.get-start-content h2 span,
.copyright-text i,
.scroll-top i {
color: #76B947;
}
/* ---------------------------
1.1.1 Background Color
----------------------------*/
.bgc,
.double-bounce2,
.main-btn.main-btn2,
.read-more:hover,
.heading:after,
.heading h2:before,
.heading h2:after,
.border-style:after,
.service-menu li a:after,
.single-funfacts h2,
figure.port-effect:after,
.team-box:after,
.page-banner-content h1:after,
.post-image:after,
.sidebar-box button,
.pagination li.active a.page-link,
.pagination li:hover a,
.social li a:hover,
.owl-dots .owl-dot.active span,
.owl-dots .owl-dot:hover span,
.owl-navigation .owl-nav button.owl-prev,
.owl-navigation .owl-nav button.owl-next {
background-color: #76B947;
}
/* ---------------------------
1.1.2 Border Color
----------------------------*/
.border-color,
.main-btn.main-btn2,
.read-more:hover,
.heading:before,
.single-funfacts,
.single-quote img,
.form-control:focus,
.sidebar-box input[type="search"]:focus,
.pagination li.active a.page-link,
.pagination li:hover a,
.social li a:hover,
.scroll-top:hover,
.owl-dots .owl-dot span {
border-color: #76B947;
}
.grey-bgc {
background-color: #F2F2F2;
}
.dark-bgc {
background-color: #222222;
}
/* =================================
1.2 Section Heading
===================================*/
.heading {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
margin-bottom: 40px;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.heading p {
margin-top: 50px;
text-align: center;
padding: 0px 200px;
}
.heading:before {
position: absolute;
content: '\f007';
font-family: 'Font Awesome 5 Free';
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
top: 50px;
width: 30px;
height: 30px;
z-index: 2;
text-align: center;
font-size: 16px;
line-height: 30px;
border-width: 1px;
border-style: solid;
border-radius: 6px;
background: #fff;
}
.heading:after {
position: absolute;
left: 50%;
width: 200px;
top: 68px;
content: '';
height: 1px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.heading h2 {
position: relative;
margin-bottom: 0px !important;
font-size: 36px;
text-align: center;
}
.heading h2:before {
position: absolute;
content: '';
width: 140px;
height: 1px;
left: 50%;
top: 65px;
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
margin-left: -70px;
}
/* =================================
1.3 Section Space
===================================*/
.space-equal {
padding-top: 80px;
padding-bottom: 80px;
}
.space-top {
padding-top: 80px;
}
.space-bottom {
padding-bottom: 80px;
}
.space-small-top {
margin-top: 40px;
}
.space-small-bottom {
margin-bottom: 40px;
}
/* =================================
Header
===================================*/
header {
background: transparent;
-webkit-transition: all 0.75s cubic-bezier(0.3, 0.1, 0.55, 1) 0s;
transition: all 0.75s cubic-bezier(0.3, 0.1, 0.55, 1) 0s;
position: absolute;
width: 100%;
z-index: 9;
height: 100px;
padding: 10px 0px;
}
/* ---------------------------
1.4.0 Sticky Header
----------------------------*/
header.main-header {
background-color: rgba(255, 255, 255, 1);
position: relative;
}
header.affix {
z-index: 99999;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 0px 4px 0 rgba(120, 120, 120, 0.75);
position: fixed !important;
top: 0;
left: 0;
height: 80px;
padding: 0px;
}
/* ---------------------------
1.4.1 Sticky Logo
----------------------------*/
header.affix .logo-light {
visibility: hidden;
display: none;
}
.main-header .logo-dark {
height: auto;
visibility: visible;
display: block;
}
header.affix .logo-dark {
visibility: visible;
display: block;
height: 60px;
width: auto;
}
/* ---------------------------
1.4.2 Logo
----------------------------*/
.logo-light {
visibility: visible;
display: block;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.logo-dark {
visibility: hidden;
display: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/* ---------------------------
1.4.3 Navigation Menu
----------------------------*/
.navbar.navbar-expand-lg {
padding: 5px 100px;
}
.mainmenu .navbar-nav li a {
color: #ffffff;
position: relative;
padding: 10px !important;
display: block;
font-size: 16px;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.navbar-nav li a:before,
header.affix a.nav-link:before,
header.affix a.nav-link:before {
position: absolute;
bottom: -10px;
left: 50%;
color: transparent;
content: "\2022";
text-shadow: 0 0 transparent;
font-size: 13px;
-webkit-transition: text-shadow 0.3s, color 0.3s;
transition: text-shadow 0.3s, color 0.3s;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
pointer-events: none;
}
.navbar-nav li a:hover:before,
.navbar-nav li a:focus:before,
.navbar-nav li a.active:before {
color: #fff;
text-shadow: 10px 0 #fff, -10px 0 #fff;
}
.affix .navbar-nav li a:hover:before,
.affix .navbar-nav li a:focus:before,
.affix .navbar-nav li a.active:before,
.main-header .navbar-nav li a:hover:before,
.main-header .navbar-nav li a:focus:before,
.main-header .navbar-nav li a.active:before {
color: #000;
text-shadow: 10px 0 #000, -10px 0 #000;
}
.affix .navbar-nav li a,
.main-header .navbar-nav li a {
color: #333333;
}
/* =================================
1.5 Banner Section
===================================*/
.banner-section {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
min-height: 100%;
}
.banner-area {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
}
.banner-content h1 {
color: #fff;
text-transform: uppercase;
font-size: 24px;
line-height: 40px;
}
.banner-content h1 span {
display: block;
}
.type-line.typing {
color: #fff;
font-size: 44px;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
margin: 20px 0px 35px;
line-height: 60px;
display: block;
text-transform: uppercase;
}
.banner-content .main-btn {
margin: 5px;
}
/* =================================
1.6 Banner Background
===================================*/
.banner-background {
width: 100%;
height: 100%;
position: relative;
}
.banner-background:after {
background: #000000;
opacity: 0.7;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
/* =================================
1.7 About Section
===================================*/
.about-section {
overflow: hidden;
}
.about-section .heading:before {
content: '\f007';
}
.about-images img {
border-radius: 15px;
max-width: 100%;
}
.about-text h3 {
font-size: 28px;
margin-bottom: 25px;
font-weight: 400;
}
.about-text h4 {
text-transform: uppercase;
line-height: 30px;
font-size: 18px;
margin: 10px 0px;
font-weight: 300;
}
/* =================================
1.9 Services Section
===================================*/
.services-section {
overflow: hidden;
}
.services-section .heading:before {
content: '\f1ea';
}
.single-service {
border: 1px solid #eaeaea;
padding: 40px 20px;
text-align: center;
overflow: hidden;
}
.overlay-number {
font-size: 112px;
font-weight: 600;
position: absolute;
left: -5px;
top: 15px;
color: #f0f0f0;
}
.single-service i {
font-size: 58px;
margin-bottom: 15px;
}
.single-service h3 {
font-size: 18px;
margin: 10px 0px;
text-transform: uppercase;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/* =================================
1.10 Common Section Background
===================================*/
.bgc-image {
position: relative;
width: 100%;
overflow: hidden;
height: 500px;
}
.bgc-image:after {
position: absolute;
content: '';
background-color: #000;
left: 0;
top: 0;
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
width: 100%;
height: 100%;
}
/* =================================
1.11 Funfacts Section
===================================*/
.funfacts-section {
background: url('assets/img/bgc-1.jpg') 50% 0 no-repeat fixed;
}
.funfacts-list {
position: relative;
z-index: 2;
margin: 0 auto;
}
.single-funfacts {
text-align: center;
color: #ffffff;
border-width: 4px;
border-style: solid;
padding: 30px 0px 0px;
border-radius: 6px;
}
.single-funfacts i {
display: block;
font-size: 54px;
}
.single-funfacts span {
font-size: 40px;
font-weight: 600;
margin: 30px 0px 15px;
display: block;
line-height: 40px;
}
.single-funfacts h2 {
font-size: 20px;
color: #fff;
font-family: 'Open Sans', sans-serif;
padding: 15px 0px;
margin-bottom: 0px;
}
/* =================================
1.12 Portfolio Section
===================================*/
.portfolio-section .heading:before {
content: '\f2d2';
}
/* ---------------------------
1.12.0 Portfolio Navigation
----------------------------*/
.portfolio-nav li {
cursor: pointer;
display: inline-block;
font-size: 14px;
font-weight: 700;
padding: 8px 10px;
position: relative;
text-transform: uppercase;
-webkit-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.portfolio-nav li.is-checked .filter-count {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translateY(0%);
transform: translateY(0%);
visibility: visible;
}
.filter-count {
position: relative;
top: -5px;
text-align: center;
width: 25px;
height: 20px;
left: 50%;
margin-left: -12.5px;
color: #fff;
font-size: 13px;
line-height: 19px;
display: block;
z-index: 1;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: hidden;
-webkit-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.filter-count:before {
border-top-width: 5px;
bottom: 0px;
content: "\f075";
font-family: 'Font Awesome 5 Free';
left: 0;
position: absolute;
font-size: 25px;
z-index: -1;
}
/* ---------------------------
1.12.1 Portfolio List
----------------------------*/
.portfolio-list {
margin-top: 30px;
overflow: hidden;
}
figure.port-effect:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
z-index: 0;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.single-item {
padding-left: 0px;
padding-right: 0px;
}
figure.port-effect:hover:after {
opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
-webkit-transform: scale(1);
transform: scale(1);
}
figure.port-effect figcaption {
padding: 3em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
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;
z-index: 2;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
}
figure.port-effect figcaption:before,
figure.port-effect figcaption:after {
position: absolute;
content: '';
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
figure.port-effect figcaption:before {
top: 50px;
right: 30px;
bottom: 50px;
left: 30px;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
-webkit-transform: scale(0, 1);
transform: scale(0, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
figure.port-effect figcaption:after {
top: 30px;
right: 50px;
bottom: 30px;
left: 50px;
border-right: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
figure.port-effect h2 {
font-weight: 300;
}
figure.port-effect h2 span {
font-weight: 600;
}
figure.port-effect figcaption a {
text-transform: uppercase;
}
figure.port-effect h2,
figure.port-effect p,
figure.port-effect a {
padding: 0.5em 2em;
text-transform: none;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
color: #fff;
}
figure.port-effect:after,
.single-item img,
figure.port-effect figcaption:before,
figure.port-effect figcaption:after,
figure.port-effect p,
figure.port-effect:hover h2,
figure.port-effect:hover a {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
}
.single-item:hover img {
opacity: 0.35;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
}
figure.port-effect:hover figcaption:before,
figure.port-effect:hover figcaption:after {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: scale(1);
transform: scale(1);
}
figure.port-effect:hover h2,
figure.port-effect:hover p,
figure.port-effect:hover a {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
figure.port-effect:hover figcaption:after,
figure.port-effect:hover h2,
figure.port-effect:hover p,
figure.port-effect:hover a {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
/* =================================
1.13 Team Section
===================================*/
.team-section .heading:before {
content: '\f2bd';
}
.team-box {
position: relative;
width: 100%;
height: auto;
overflow: hidden;
}
.team-box:after {
position: absolute;
content: '';
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
visibility: hidden;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
}
.single-member:hover .team-box:after {
opacity: 0.3;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
visibility: visible;
}
.team-box img {
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.single-member:hover .team-box img {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
.team-social {
position: absolute;
top: 0;
right: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
z-index: 2;
width: 80px;
height: 100%;
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;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
-webkit-transform: translate3d(-360px, 0, 0);
transform: translate3d(-360px, 0, 0);
}
.single-member:hover .team-social {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.team-social li a {
color: #fff;
font-size: 24px;
padding: 10px;
display: block;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transform: translate3d(90px, 0, 0);
transform: translate3d(90px, 0, 0);
}
.team-social li a:hover {
color: #444;
}
.single-member:hover .team-social li a {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
.single-member:hover .team-social li:first-child a {
-webkit-transition-delay: 0.025s;
transition-delay: 0.025s;
}
.single-member:hover .team-social li:nth-child(2) a {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
.single-member:hover .team-social li:nth-child(3) a {
-webkit-transition-delay: 0.075s;
transition-delay: 0.075s;
}
.single-member:hover .team-social li:nth-child(4) a {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.single-member:hover .team-social li:nth-child(5) a {
-webkit-transition-delay: 0.125s;
transition-delay: 0.125s;
}
.single-member figcaption {
background: #fff;
padding: 20px;
text-align: center;
border: 1px solid #ddd;
}
.single-member figcaption h2 {
font-size: 18px;
}
/* ---------------------------
1.14 Video Section
----------------------------*/
.video-section {
background: url('assets/img/bgc-2.jpg') 50% 0 no-repeat fixed;
}
.video-content {
position: relative;
z-index: 3;
color: #fff;
}
.video-content h2 {
font-size: 42px;
color: #fff;
}
.video-content p {
margin: 10px 0px;
}
.video-btn {
font-size: 92px;
margin-top: 20px;
display: inline-block;
width: 100px;
height: 100px;
border-radius: 50%;
line-height: 98px;
text-align: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.video-btn:hover {
box-shadow: 0px 0px 20px 2px #d8d8d8;
}
.modal-dialog {
margin: 90px auto 30px;
max-width: 70%;
}
button.close {
width: 50px;
height: 50px;
font-size: 32px;
cursor: pointer;
}
/* =================================
1.14 Testmonail Section
===================================*/
.testimonial-section .heading:before {
content: '\f10e';
font-weight: 900;
}
.single-quote {
border: 1px solid #ddd;
border-radius: 10px;
padding: 20px 0px;
background: #f9f9f9;
box-shadow: inset 0px 0px 100px 0px #eaeaea;
}
.single-quote img {
width: 120px;
max-width: 120px;
margin: 0 auto;
height: 120px;
border-radius: 50%;
border-width: 2px;
border-style: solid;
padding: 5px;
}
.single-quote h3 {
font-size: 16px;
text-transform: uppercase;
margin: 20px 0 5px;
}
.single-quote a:hover {
color: #444444;
}
.quote-content {
position: relative;
margin: 30px 100px 0px;
}
.quote-content:before {
position: absolute;
content: '\f10d';
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
left: -20px;
top: 0;
font-size: 36px;
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
.quote-content p {
margin-left: 20px;
}
/* ---------------------------
1.14.0 Best Client List
----------------------------*/
.best-clients {
padding: 10px 80px;
border: 1px solid rgba(221, 221, 221, 0.75);
border-radius: 10px;
max-height: 120px;
}
.best-clients img {
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-webkit-filter: grayscale(100%);
filter: url('data:image/svg+xml;charset=utf-8,#filter');
filter: grayscale(100%);
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
}
.best-clients img:hover {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-webkit-filter: grayscale(0%);
filter: url('data:image/svg+xml;charset=utf-8,#filter');
filter: grayscale(0%);
}
/* =================================
1.15 Latest Blog Section
===================================*/
.blog-section .heading:before {
content: '\f15c';
}
.post-details>.post-content h2 {
font-size: 28px;
font-weight: 600;
line-height: 36px;
}
.single-post {
box-shadow: 0px 4px 20px #eaeaea;
margin: 0px 10px 10px;
}
.post-image {
position: relative;
overflow: hidden;
}
.post-image img {
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.single-post:hover .post-image img {
-webkit-transform: scale3d(1.1, 1.1, 1);
transform: scale3d(1.1, 1.1, 1);
}
.post-image:after {
position: absolute;
width: 100%;
height: 100%;
content: '';
left: 0;
top: 0;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}
.single-post:hover .post-image:after {
opacity: 0.4;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
.post-content {
padding: 20px 20px 30px;
border: 1px solid #eaeaea;
border-top-width: 0px;
border-top-style: none;
border-top-color: transparent;
}
.post-content h2 {
font-size: 21px;
font-weight: 400;
line-height: 28px;
}
.post-meta {
margin: 15px 0px 30px;
}
.post-meta li {
display: inline-block;
margin-right: 10px;
font-size: 13px;
}
.post-meta li:last-child {
margin-right: 0px;
}
.post-meta li i {
color: #909090;
}
/* =================================
1.16 Get Start Section
===================================*/
.get-start-section {
background: url('assets/img/bgc-3.jpg') 50% 0 no-repeat fixed;
height: 550px;
margin: 0 auto;
padding: 0;
}
.get-start-content {
position: relative;
z-index: 2;
color: #fff;
}
.get-start-content h2 {
color: #ffffff;
font-size: 52px;
text-transform: uppercase;
letter-spacing: 1px;
}
.get-start-content p {
margin: 20px 0px;
}
/* =================================
1.17 Contact Section
===================================*/
.contact-section .heading:before {
content: '\f2a0';
font-weight: 900;
}
.contact-form {
box-shadow: 0px 0px 10px 5px #eaeaea;
padding: 50px 30px;
border-radius: 10px;
}
.contact-form h3 {
text-transform: uppercase;
font-size: 24px;
font-weight: 400;
margin-bottom: 30px;
}
.contact-form .form-group {
margin-bottom: 25px;
}
.contact-form .form-control {
padding: 8px 15px;
color: #444444;
padding: 8px 10px;
}
.form-control:focus {
box-shadow: none;
}
.contact-form textarea.form-control {
height: 130px;
max-width: 100%;
}
.contact-form button {
border-radius: 4px;
}
#form-info {
display: inline-block;
margin-left: 10px;
}
/* ---------------------------
1.17.0 Google Map
----------------------------*/
.our-location {
width: 100%;
height: 240px;
border-radius: 10px;
box-shadow: 0px 0px 10px 5px #eaeaea;
border: 2px solid #eaeaea;
}
#map {
width: 100%;
height: 100%;
}
/* ---------------------------
1.17.1 Address Info
----------------------------*/
.our-address {
box-shadow: 0px 0px 10px 5px #eaeaea;
padding: 30px;
color: #ffffff;
border-radius: 10px;
margin-top: 30px;
}
.single-address {
margin-bottom: 30px;
}
.single-address:last-child,
.single-address p {
margin-bottom: 0px;
}
.single-address h3 {
color: #fff;
font-size: 18px;
text-transform: uppercase;
font-weight: 400;
}
.single-address i {
font-size: 38px;
float: left;
margin-right: 10px;
}
/* =================================
1.18 Footer
===================================*/
.footer-elements {
width: 100%;
color: #ffffff;
}
.footer-logo {
width: 150px;
margin: 0 auto;
}
.social {
margin: 30px 0px;
}
.social li {
display: inline-block;
}
.social li a {
font-size: 22px;
padding: 10px;
display: block;
color: #ccc;
width: 50px;
height: 50px;
border: 2px solid #ccc;
margin: 5px;
text-align: center;
-webkit-transition: all 0.35s;
transition: all 0.35s;
border-radius: 50%;
}
.social li a:hover {
color: #ffffff;
}
.copyright-text p{
margin-bottom: 0px;
}
.copyright-text span {
position: relative;
padding-left: 20px;
}
.copyright-text span:before {
content: '\007C';
left: 2px;
top: -4px;
position: absolute;
font-size: 20px;
}
.copyright-text a:hover {
color: #ffffff;
}
.scroll-top {
position: fixed;
right: 20px;
width: 50px;
height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
bottom: 80px;
border-radius: 50%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
border: 2px solid #444444;
z-index: 99;
cursor: pointer;
}
.scroll-top i {
font-size: 38px;
}
/* =================================
1.19 Page Style
===================================*/
.main-layout {
overflow: hidden;
}
.page-banner {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 300px;
width: 100%;
position: relative;
}
.page-banner:after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
z-index: 0;
}
.page-banner-content {
position: relative;
z-index: 2;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
-ms-grid-row-align: center;
align-items: center;
}
.page-banner-content h1 {
text-align: center;
color: #fff;
font-size: 34px;
letter-spacing: 1px;
text-transform: uppercase;
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.page-banner-content h1:after {
content: '';
position: absolute;
width: 50px;
height: 3px;
left: 50%;
bottom: -2px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
/* breadcrumb */
.bread-crumb {
padding: 12px 0px;
}
.bread-crumb li {
display: inline-block;
position: relative;
padding-right: 30px;
font-size: 16px;
}
.bread-crumb li a {
font-size: 16px;
color: #ffffff;
}
.bread-crumb li:last-child {
padding-right: 0px;
}
.bread-crumb li:last-child:after {
display: none;
}
.bread-crumb li:after {
content: '\f101';
position: absolute;
right: 5px;
top: 0;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
color: #ffffff;
}
.bread-crumb li i {
margin-right: 5px;
color: #ffffff;
}
.border-style {
border-bottom: 1px solid #ced4da;
padding-bottom: 10px;
position: relative;
margin-bottom: 20px;
}
.border-style:after {
content: '';
position: absolute;
left: 0px;
bottom: -2px;
width: 50px;
height: 3px;
}
/* =================================
1.20 Single Page
===================================*/
.single-page-banner {
background-image: url('assets/img/small-bgc-1.jpg');
}
/* =================================
1.21 Blog Page
===================================*/
.blog-banner {
background-image: url('assets/img/small-bgc-2.jpg');
}
.page-body .single-post {
margin-bottom: 40px;
}
.post-date {
color: #fff;
font-size: 22px;
text-align: center;
position: absolute;
top: -20px;
width: 100px;
height: 100px;
left: -15px;
}
.post-date:after {
position: absolute;
content: '\f133';
font-family: 'Font Awesome 5 Free';
font-weight: 900;
left: 0;
top: 0;
width: 100%;
height: 100%;
font-size: 98px;
line-height: 98px;
z-index: 0;
}
.post-date span {
position: relative;
z-index: 2;
font-size: 16px;
top: 40px;
display: block;
margin-bottom: 3px;
font-weight: 600;
}
/* ---------------------------
1.21.0 Pagination
----------------------------*/
.pagination li:hover a {
border-width: 1px;
border-style: solid;
color: #ffffff;
}
.pagination li a {
padding: 10px 15px;
font-size: 14px;
color: #444444;
}
/* =================================
1.22 Blog Details
===================================*/
.single-banner {
background-color: #1c1c1c;
padding: 80px 0px;
}
.post-content blockquote {
padding: 20px 10px;
border-left-width: 2px;
border-left-style: solid;
}
.details-title {
font-size: 22px;
margin-bottom: 25px;
}
/* Share Post */
.share-post {
padding: 30px 20px;
margin: 30px 0px;
}
.share-post h3 {
font-size: 22px;
}
.social-share li {
display: inline-block;
padding: 5px;
font-size: 22px;
}
/* Post Author */
.post-author {
padding: 30px 20px;
}
.post-author img {
width: 100px;
height: 100px;
float: left;
border-radius: 50%;
margin-right: 15px;
}
/* Single Navigation */
.single-navigation {
padding: 30px 20px;
overflow: hidden;
}
.single-prev {
float: left;
}
.single-next {
float: right;
text-align: right;
}
.single-navigation div {
font-size: 20px;
font-weight: 600;
}
.single-navigation div a h4 {
font-size: 16px;
font-weight: 400;
margin-top: 10px;
border-bottom: 1px solid #ced4da;
padding-bottom: 2px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/* More Post */
.more-posts .post-content {
padding: 20px 10px;
}
.more-posts .post-content h2 {
font-size: 16px;
line-height: 24px;
font-weight: 400;
}
/* Comment List */
.single-comment {
margin-bottom: 30px;
}
.single-comment:last-child {
margin-bottom: 0px;
}
.single-comment img {
width: 80px;
height: 80px;
border-radius: 50%;
float: left;
}
.commenter-text {
margin-left: 90px;
border-bottom: 1px solid #ced4da;
padding-bottom: 10px;
}
.single-comment:last-child .commenter-text {
border-bottom: 0px none transparent;
}
.commenter-text h3 {
font-size: 16px;
margin-bottom: 5px;
}
.commenter-text p {
margin-top: 10px;
}
.comment-reply {
font-weight: 600;
}
.comment-reply-box {
margin-left: 100px;
}
/* Comment Box */
.comment-box input.form-control {
padding: 10px;
}
.comment-box textarea {
max-width: 100%;
height: 150px;
}
.comment-box button {
width: 100%;
}
/* =================================
1.23 Sidebar
===================================*/
.single-sidebar {
margin-bottom: 50px;
}
.single-sidebar:last-child {
margin-bottom: 0px;
}
.single-sidebar h2 {
font-size: 22px;
margin-bottom: 25px;
}
.sidebar-box {
position: relative;
}
/* Search */
.sidebar-box input[type="search"] {
width: 100%;
padding: 10px;
border: 1px solid #bbbbbb;
}
.sidebar-box input[type="search"]:focus {
border-width: 1px;
border-style: solid;
}
.sidebar-box button {
position: absolute;
top: 0;
right: 0;
border: 0px none transparent;
font-size: 24px;
height: 46px;
width: 60px;
cursor: pointer;
color: #fff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.sidebar-box button:hover {
opacity: 0.75;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
}
/* Sidebar Post */
.aside-post li a img {
float: left;
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 10px;
}
.aside-post a h2 {
font-size: 14px;
margin-bottom: 3px;
line-height: 21px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.aside-post .post-meta {
margin: 0px;
}
.aside-post li {
margin-bottom: 15px;
}
/* Category */
.aside-cat li {
font-size: 14px;
margin-bottom: 15px;
}
.aside-cat li:last-child {
margin-bottom: 0px;
}
/* Tags */
.aside-tags li {
display: inline-block;
padding: 5px;
}
.aside-tags li:nth-child(2),
.aside-tags li:nth-child(5),
.aside-tags li:nth-child(7) {
font-size: 28px;
}
/* Social */
.aside-social {
margin: 0px;
}
.aside-social li a {
font-size: 16px;
padding: 5px;
color: #444444;
width: 40px;
height: 40px;
}
/* =================================
1.24 Project Details
===================================*/
.content-details h2 {
margin: 30px 0px 20px;
}
.content-list {
margin-top: 30px;
}
.content-group {
list-style: inside;
}
.content-group li {
font-size: 16px;
line-height: 26px;
margin-bottom: 5px;
}
.project-info span {
margin-bottom: 10px;
display: block;
}
.project-info a {
width: 100%;
text-align: center;
}
.client h3 {
font-size: 16px;
text-transform: uppercase;
margin: 20px 0 5px;
}
.contact-info li {
margin-bottom: 10px;
}
.contact-info li:last-child {
margin-bottom: 0px;
}
.contact-info li i {
margin-right: 10px;
font-size: 18px;
}
/* =================================
1.25 Service Details
===================================*/
.service-menu li a {
position: relative;
font-size: 15px;
padding: 10px;
border-bottom: 1px solid #ced4da;
display: block;
z-index: 2;
}
.service-menu li a:after,
.service-menu li.active a:after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 0;
height: 100%;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: -1;
}
.service-menu li a:hover:after,
.service-menu li.active a:after {
width: 100%;
border-left: 2px solid #444444;
}
.service-menu li a:hover,
.service-menu li.active a {
color: #ffffff;
}
/* =================================
1.26 404 Page
===================================*/
.not-found-banner {
background-image: url('assets/img/small-bgc-3.jpg');
}
.not-found-content h2 {
font-size: 128px;
font-family: 'Open Sans', sans-serif;
}
.not-found-content h4 {
font-size: 28px;
margin: 10px 0px 20px;
}