?
áEÓê¤ÎïLwebshll2019
/* ===================================
About
====================================== */
/*
Theme Name: MegaOne | Parallax
Theme URI:
Author: Themes Industry
Author URI:
Description: One Page Parallax Template
Tags: one page, multipurpose, parallax, creative, html5
*/
/* ===================================
Table of Content
====================================== */
/* - Fonts
- General
- Social Icon Hover
- Slider
- Header And Navigation
- Services
- Team
- Portfolio
- Contact Us
- Cursor
- Blog Pages
- Footer
- Loader
- Media Queries */
/* ===================================
Google font
====================================== */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,700,800&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
}
.main-font{font-family: 'Open Sans', sans-serif;}
.alt-font{font-family: 'Poppins', sans-serif;}
.leater-space {letter-spacing: 1px;}
.color-black {color: #384141;}
.color-blue {color: #21c2c2;}
/* overlay */
.bg-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.btn {display:inline-block; border:2px solid transparent; letter-spacing: .5px; line-height: inherit; border-radius: 0; text-transform:capitalize; width: auto; font-family: 'Open Sans', sans-serif; font-weight: 400; transition-duration: 0.3s !important; transition-timing-function: ease-in-out!important;}
/* button size */
.btn.btn-very-small {font-size:9px; padding: 1px 17px; line-height: 22px;}
.btn.btn-small {font-size:11px; padding: 4px 24px;}
.btn.btn-medium {font-size:12px; padding: 6px 25px 5px;}
.btn.btn-large {font-size:13px; padding: 9px 34px; line-height: 25px}
.btn.btn-extra-large {font-size:15px; padding: 12px 40px 13px; line-height: 25px}
.btn-dual .btn {margin: 0 10px; }
.btn i {margin-left: 6px; vertical-align: middle; position: relative; top:-1px}
.btn.btn-black {background:#000000; border-color: #000000; color: #fff; font-size: 15px;}
.btn.btn-black:hover, .btn.btn-black:focus {background: transparent; color: #000; font-size: 15px;}
.btn.btn-pak {background-color: #439f76; border-color: #FFFFFF; color:#FFFFFF; font-size: 15px;}
.btn.btn-pak:hover, .btn.btn-pak:focus {background-color: #FFFFFF;border-color: #439f76; color: #439f76;font-size: 15px; }
.btn.btn-sky {background-color: #384141; border-color: #FFFFFF; color:#FFFFFF; font-size: 15px;}
.btn.btn-sky:hover, .btn.btn-sky:focus {background-color: #FFFFFF; border-color: #384141; color: #384141;font-size: 15px; }
.btn.btn-pink {background-color: #e23939; border-color: #FFFFFF; color:#FFFFFF; font-size: 15px;}
.btn.btn-pink:hover, .btn.btn-pink:focus {background-color: #FFFFFF; border-color: #e23939; color: #e23939;font-size: 15px; }
.btn.btn-green {background-color: #53be53; border-color: #53be53; color:#FFFFFF; font-size: 15px;}
.btn.btn-green:hover, .btn.btn-green:focus {background: transparent; color: #53be53;font-size: 15px;}
.btn.btn-blackish {background:#384141; border-color: #384141; color: #fff;font-size: 15px;}
.btn.btn-blackish:hover, .btn.btn-black:focus {background: transparent; color: #384141;font-size: 15px;}
.btn.btn-blue {background:#24c4f4; border-color: #24c4f4; color: #fff;font-size: 15px; transition: .5s !important;}
.btn.btn-blue:hover, .btn.btn-black:focus {background: transparent; color: #24c4f4 !important;font-size: 15px; transition: .5s !important;}
.btn.btn-green-blue {background:#53be53; border-color: #53be53; color: #fff;font-size: 15px;}
.btn.btn-green-blue:hover, .btn.btn-green-blue:focus {background-color: #24c4f4; border-color: #24c4f4; color: #FFFFFF;font-size: 15px;}
/* button rounded */
.btn.btn-rounded {border-radius: 50px}
.btn.btn-rounded.btn-very-small {padding: 2px 23px 1px;}
.btn.btn-rounded.btn-small {padding: 5px 29px;}
.btn.btn-rounded.btn-medium {padding: 6px 32px;}
.btn.btn-rounded.btn-large {padding: 9px 38px;}
.btn.btn-rounded.btn-extra-large {padding: 12px 45px 13px;}
body {
overflow: hidden;
}
#blog,body {overflow: auto;}
.full-screen {height: 100vh;}
.color-white {}
#pp-nav.right
ul {list-style-type: none;}
#page-scroll .section{
height: 100vh;
background-color: #fff;
overflow: hidden;
}
/*-------------
loader
-------------*/
.loader {
background: #fff;
text-align: center;
height: 100vh;
z-index: 999;
position: fixed;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.linear-activity {
overflow: hidden;
width: 100%;
height: 4px;
background-color: transparent;
margin: 20px auto;
}
.determinate {
position: relative;
max-width: 100%;
height: 100%;
-webkit-transition: width 500ms ease-out 1s;
-moz-transition: width 500ms ease-out 1s;
-o-transition: width 500ms ease-out 1s;
transition: width 500ms ease-out 1s;
background-color: #03A9F4;
}
.indeterminate {
position: relative;
width: 100%;
height: 100%;
}
.indeterminate:before {
content: '';
position: absolute;
height: 100%;
background-color: #03A9F4;
animation: indeterminate_first 1.5s infinite ease-out;
}
.indeterminate:after {
content: '';
position: absolute;
height: 100%;
background-color: #4FC3F7;
animation: indeterminate_second 1.5s infinite ease-in;
}
@keyframes indeterminate_first {
0% {
left: -100%;
width: 100%;
}
100% {
left: 100%;
width: 10%;
}
}
@keyframes indeterminate_second {
0% {
left: -150%;
width: 100%;
}
100% {
left: 100%;
width: 10%;
}
}
/*-------------
end loader
-------------*/
.slider-social{
display: inline-block;
position: absolute;
top: 50%;
transform: translateY(-50%);
left:4px;
z-index: 13;
}
.slider-social a{
display: block;
width: 25px;
height: 25px;
text-align: center;
line-height: 30px;
border-radius: 50px;
color: #ffffff;
font-size: 16px;
margin: 9px;
border: 1px solid transparent;
-webkit-transition: background-color .2s ease-in-out;
-moz-transition: background-color .2s ease-in-out;
-ms-transition: background-color .2s ease-in-out;
-o-transition: background-color .2s ease-in-out;
transition: background-color .2s ease-in-out;
}
.slider-social a:hover{
background-color:#ffffff;
}
.slider-social .animated-wrap a:hover{
background-color: transparent;
color: #ffffff;
}
/* center-block */
.center-block {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
}
/*--------------------------------------------------
Header
---------------------------------------------------*/
.navbar-standard{
position: absolute;
top: 0;
z-index: 99;
padding: 33px 0px;
width: 100%;
}
.navbar-standard #menu {
margin: 0;
padding: 0;
}
.logo-dark {max-width: 80%;}
.navbar-standard #menu > li{
display: inline-block;
}
.navbar-standard #menu > li > a{
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
/* Side Menu */
.side-menu {
width: 100%;
opacity: 0;
position: fixed;
/*left: 0;*/
/*top: 0;*/
background: linear-gradient(to right, #212c2c -50%, #24c4f4 93%);
z-index:0;
height: 100%;
/*-webkit-transform: translate3d(-100%, 0, 0);*/
/*transform: translate3d(-100%, 0, 0);*/
-webkit-transition: all .5s ease;
transition: all .5s ease;
-o-transition: all .5s ease;
/*overflow: hidden;*/
visibility: hidden;
}
.whitecolor{
color: #FFFFFF;
}
.side-menu.left {
left: 0; right: auto;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.side-menu.before-side {
width: 280px;
}
.side-menu.side-menu-active,
.side-menu.before-side{
/*-webkit-transform: translate3d(0, 0, 0);*/
/*transform: translate3d(0, 0, 0);*/
-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;
z-index:999;
opacity: 0.9;
visibility: visible;
}
.pul-menu .side-menu.side-menu-active {
visibility: visible; opacity: 1;
}
.side-menu .navbar-brand {
margin: 0 0 2.5rem 0;
}
/*Side overlay*/
#close_side_menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
-webkit-transition: opacity 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
-o-transition: opacity 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
transition: opacity 300ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
display: none;
z-index: 1031;
opacity: 0.4;
}
/*side clode btn*/
.side-menu .btn-close {
height: 33px;
width: 33px;
display: inline-block;
text-align: center;
position: absolute;
top: 29px;
right: 47px;
cursor: pointer;
}
.side-menu.before-side .btn-close{
display: none;
}
.just-sidemenu #sidemenu_toggle {
position: fixed;
z-index: 999;
/*background: #fff;*/
right: 0;
top: 16px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .15);
box-shadow: 0 0 20px rgba(0, 0, 0, .15);
}
.side-menu .btn-close::before, .side-menu .btn-close::after {
position: absolute;
left: 16px;
content: ' ';
height: 24px;
width: 2px;
background: #fff;
top: 5px;
}
.side-menu .btn-close:before {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.side-menu .btn-close:after {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.side-menu.right-btn .btn-close{
right: 47px;
left: auto;
}
.side-nav-btn{
position: absolute;
top: 37px;
right: 22px;
font-size: 18px;
color: #FFFFFF;
transform: rotate(180deg);
transition: all 0.3s ease;
width: 28px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
cursor: pointer;
z-index: 99;
-webkit-transition: all linear 300ms;
}
.side-nav-btn span {
content: "";
display: block;
width: 100%;
height: 2px;
background: #ffffff;
position: relative;
top: 50%;
margin-top: 6px;
right: 0;
-webkit-transition: all linear 300ms;
}
.side-nav-btn:hover span:nth-child(1),.side-nav-btn:hover span:nth-child(3){
width: 60%;
-webkit-transition: all linear 300ms;
}
.side-nav-btn.active{
display: none;
}
.header-appear .side-nav-btn{
left: 40px;
top: 19px;
}
.side-menu .inner-wrapper {
padding: 3.5rem 5rem;
height: 100%;
position: relative;
overflow-y: auto;
overflow: hidden;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: flex-end;
text-align: left;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.pul-menu.pushwrap .side-menu .inner-wrapper{
padding: 3.5rem 2.5rem;
}
.inner-wrapper .navbar-nav{
-ms-flex-direction: inherit;
flex-direction:inherit;
}
.side-menu .side-nav {
margin-bottom: 30px;
display: block;
width:100%
}
.side-nav .navbar-nav .nav-item{
display: block;
margin: 0 auto;
padding: 0 !important;
opacity: 0;
-webkit-transition: all 0.8s ease 500ms;
-o-transition: all 0.8s ease 500ms;
transition: all 0.8s ease 500ms;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
-o-transform: translateY(30px);
transform: translateY(30px);
}
.side-nav .navbar-nav .nav-item:first-child {
-webkit-transition-delay: .1s;
-o-transition-delay: .1s;
transition-delay: .1s;
}
.side-nav .navbar-nav .nav-item:nth-child(2){
-webkit-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay: .2s;
}
.side-nav .navbar-nav .nav-item:nth-child(3) {
-webkit-transition-delay: .3s;
-o-transition-delay: .3s;
transition-delay: .3s;
}
.side-nav .navbar-nav .nav-item:nth-child(4) {
-webkit-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
.side-nav .navbar-nav .nav-item:nth-child(5) {
-webkit-transition-delay: .5s;
-o-transition-delay: .5s;
transition-delay: .5s;
}
.side-nav .navbar-nav .nav-item:nth-child(6) {
-webkit-transition-delay: .6s;
-o-transition-delay: .6s;
transition-delay: .6s;
}
.side-nav .navbar-nav .nav-item:nth-child(7) {
-webkit-transition-delay: .7s;
-o-transition-delay: .7s;
transition-delay: .7s;
}
.side-nav .navbar-nav .nav-item:nth-child(8) {
-webkit-transition-delay: .8s;
-o-transition-delay: .8s;
transition-delay: .8s;
}
.side-nav .navbar-nav .nav-item:nth-child(9) {
-webkit-transition-delay: .9s;
-o-transition-delay: .9s;
transition-delay: .9s;
}
.side-menu.side-menu-active .side-nav .navbar-nav .nav-item {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.nav-item a{
transition: all .3s ease;
}
/*.navbar-collapse .nav-item:hover a.nav-link.scroll, .header-appear .navbar-collapse .nav-item:hover a.nav-link.scroll{*/
/*color: #f5218a !important;*/
/*transition: all .3s ease;*/
/*}*/
.top-center-logo .navbar-nav .text-black:hover,.top-fixed-nav .navbar-nav .whitecolor:hover,
.top-center-logo .navbar-nav .whitecolor:hover{
color: #f5218a !important;
}
.side-nav .navbar-nav .nav-link {
display: inline-table;
color: #fff;
padding: 2px 0 3px 0 !important;
font-family: 'Montserrat' , sans-serif;
font-size: 18px;
font-weight: 500;
line-height: normal;
position: relative;
-webkit-border-radius: 0;
border-radius: 0;
}
.side-logo-nav .navbar-nav .nav-link{
position: relative;
}
.side-logo-nav .navbar-nav .nav-link:hover,.side-logo-nav .navbar-nav .nav-link:focus{
color: #FFFFFF;
}
.side-nav .navbar-nav .nav-link::after{
content: "";
position: absolute;
background: #fff;
display: inline-block;
width: 0;
height: 3px;
bottom: 0; left: 0;
overflow: hidden;
-webkit-transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
-o-transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
transition: all 0.5s cubic-bezier(0, 0, 0.2, 1);
}
.side-nav .navbar-nav .nav-link:hover::after,
.side-nav .navbar-nav .nav-link.active::after {
width: 100%;
}
.side-nav .navbar-nav .nav-link.active {
background: transparent;
}
.side-menu p{
font-size: 13px;
margin-top: .5rem;
margin-bottom: 0;
}
.side-footer{
text-align: center;
}
.social-icons-simple{
margin-bottom: 0;
margin-left: -10px;
padding: 0;
}
.social-icons-simple li{
display: inline-block;
}
.social-icons-simple li a {
display: block;
font-size: 16px;
color: #FFFFFF;
height: 38px;
line-height: 38px;
border: 1px solid transparent;
text-align: center;
width: 38px;
-webkit-border-radius: 50%;
border-radius: 50%;
position: relative;
z-index: 1;
overflow: hidden;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
.social-icons-simple li a:hover{
color: #FFFFFF;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
/* ===================================
Services Section
====================================== */
.bg-services .pp-tableCell {background: url(../img/services-bg.jpg); background-size: cover; background-repeat: no-repeat;}
.services-item{
max-width: 560px;
margin: 0 auto;
text-align: center;
}
.per-slide {
opacity: 0;
-webkit-transition: all .7s ease-in .3s;
-o-transition: all .7s ease-in .3s;
transition: all .7s ease-in .3s;
}
#services_slider .owl-item.active .services-item .per-slide{
opacity: 1;
}
.services-item .services-icon{
font-size: 2.5rem;
color: #ffffff;
width:45px;
height: 45px;
display: inline-block;
-webkit-transition: all .7s ease-in .3s;
-o-transition: all .7s ease-in .3s;
transition: all .7s ease-in .3s;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
margin-bottom: 2rem;
}
.services-item:hover .services-icon {
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#services_slider .owl-item.active .services-item .testimonial-line {
width:140px;
opacity: 1;
}
.services-item .testimonial-line{
width: 5px;
opacity: 0;
height: 3px;
left: 73%;
position: relative;
text-align: right;
margin-bottom: 40px;
background-color: #d00520;
}
.services-item .destination{
font-size: 13px;
font-weight: 400;
color: #9c9c9c;
}
#services_slider .owl-dots{
position: relative;
bottom: 0;
display: block;
text-align: right;
width: 100%;
}
/* owl carousel bullets */
#services_slider .owl-dots .owl-dot {
height: 11px;
width: 11px;
margin: 2px 10px;
position: relative;
display: inline-block;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #e5e5e5 !important;
cursor: pointer;
}
#services_slider .owl-dots .owl-dot.active span,.owl-dots .owl-dot:hover span {
background:#e5e5e5;
}
#services_slider .owl-dots .owl-dot.active {
background: #d00520 !important;
}
/*--------------------------------------------
Ends Services
----------------------------------------------*/
/* ===================================
Team
====================================== */
.bg-team {background: url(../img/team-bg.jpg); background-size: cover; background-repeat: no-repeat;}
.testimonial-line{
width: 5px;
height: 3px;
opacity: 0;
background-color: #d00520;
transition: width .5s ease-in;
}
#testimonial-quote .owl-item.active .testimonial-line{
opacity: 1;
width: 140px;
}
.team-img {
max-width:135px;
min-height: 135px;
transform: scale(.5);
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 70px;
overflow: hidden;
transition: all .5s ease-in;
}
#testimonial-quote .owl-item.active .team-img{
transform: scale(1);
}
.testimonial-quote ,h2 ,p {color: #FFFFFF;}
.testimonial-wrapp,
.testimonial-wrapp .testimonial-text,
.testimonial-wrapp .testimonial-photo,
.testimonial-wrapp .quoted, .testimonial-quote{
position: relative;
-webkit-transition: all .4s ease-in;
-o-transition: all .4s ease-in;
transition: all .4s ease-in;
}
.testimonial-wrapp,
.testimonial-wrapp .testimonial-text {
text-align: center;
}
.testimonial-wrapp .quoted,
.testimonial-wrapp .testimonial-photo {
display: inline-block;
}
.testimonial-wrapp .quoted {
background: #643094;
color: #fff;
font-size: 20px;
line-height: 50px;
height: 50px;
width: 50px;
-webkit-border-radius: 50%;
border-radius: 50%;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
-o-transform: translateY(50%);
transform: translateY(50%);
z-index: 1;
}
.testimonial-wrapp .testimonial-text {
background: #f6f6f6;
padding: 4.25rem 2.5rem;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #f1f1f1;
}
.testimonial-wrapp .testimonial-photo {
height: 100px;
width: 100px;
margin-top: -50px;
}
.testimonial-wrapp .testimonial-photo,
.testimonial-wrapp .testimonial-photo > img{
-webkit-border-radius: 50%;
border-radius: 50%;
}
#testimonial-slider .owl-item:nth-child(2n) .testimonial-wrapp .quoted,
#testimonial-slider .owl-item:nth-child(2n) .testimonial-wrapp:hover .testimonial-text{
background: #00bcd4;
}
.testimonial-wrapp:hover .testimonial-text{
background: #643094;
color: #fff;
}
.testimonial-quote,h1:active {opacity: 1;}
#owl-thumbs.owl-dots{
text-align: left;
}
#owl-thumbs.owl-dots .owl-dot {
background: transparent;
height: 60px;
margin: 0;
padding: 0;
position: relative;
width: 60px;
border: 5px solid rgba(255,255,255,.3);
margin-left: -30px;
border-radius: 50%;
display: inline-block;
opacity: .65;
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
-o-transform: scale(.95);
transform: scale(.95);
}
.testimonial-bg-light #owl-thumbs.owl-dots .owl-dot {
border: 5px solid rgba(0,0,0,.3);
}
#owl-thumbs.owl-dots .owl-dot > img {
width: 100%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
#owl-thumbs.owl-dots .owl-dot:first-child{
margin-left: 0;
}
#owl-thumbs.owl-dots .owl-dot::after{
display: none;
}
#owl-thumbs.owl-dots .owl-dot:hover,
#owl-thumbs.owl-dots .owl-dot.active{
z-index: 5;
opacity: 1;
border: 5px solid rgba(255,255,255,.53);
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.testimonial-bg-light #owl-thumbs.owl-dots .owl-dot.active {
border: 5px solid rgba(0,0,0,.53);
}
/*-------------------------------*/
/*team ends*/
/*-------------------------------*/
/*--------------------------------
progress bar
---------------------------------*/
.team-progress{
padding-bottom: 1rem;
}
.bg-skills {background: url(../img/skils-bg.jpg); background-size: cover; background-repeat: no-repeat;}
.team-progress .progress-item{
margin-bottom: 2rem;
list-style: none;
}
.progress-item {letter-spacing: 2px;}
.team-progress .progress{
height: 12px;
margin-top: 12px;
overflow: hidden;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
background-color: #eaeaea;
}
.team-progress .progress-item .count{
font-weight: 500;
}
.team-progress .progress-bar{
height: 100%;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #21c2c2;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3264f5', endColorstr='#7202bb',GradientType=1 );
}
/*---------------------------
End Progress
-----------------------------*/
/*--------------------------------------------------
Portfolio
---------------------------------------------------*/
#content-scroll {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: visible;
height: 100%;
width: 100%;
}
#showcase-holder {
width: 100%;
height: 100vh;
position: relative;
perspective: 1000px;
}
#showcase-tilt-wrap {
width: 100%;
height: 100vh;
position: absolute;
perspective: 1000px;
overflow: hidden;
}
#showcase-tilt {
width: 100%;
height: 100%;
position: fixed;
overflow: visible;
transform-style: preserve-3d;
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
#showcase-tilt.disabled {
-webkit-transform: translate3d(0, 0, 0) scale(1.05) !important;
transform: translate3d(0, 0, 0) scale(1.05) !important;
-webkit-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
}
#showcase-slider {
height: 100%;
width: 100%;
}
.swiper-slide {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
-webkit-user-select: none;
-webkit-touch-callout: none;
user-select: none;
}
.swiper-slide::after {
content: "";
width: 100%;
height: 60%;
position: absolute;
bottom: 0;
left: 0;
pointer-events: none;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff00000', endColorstr='#a6000000', GradientType=0);
}
.img-mask {
width: 100%;
height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
display: table;
position: relative;
box-sizing: border-box;
-webkit-transition: 1.2s ease-in-out;
transition: 1.2s ease-in-out;
}
.section-image {
position: relative;
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
}
.title {
font-weight: 700;
font-family: 'Poppins', sans-serif;
position: relative;
display: block;
margin-bottom: 0px;
display: inline-block;
vertical-align: top;
width: auto;
font-size: 3.5vw;
line-height: 90px;
}
.swiper-pagination-bullet:first-child .title {
opacity: 0;
-webkit-transform: translateY(15vh) scale(1);
transform: translateY(15vh) scale(1);
}
.title span {
display: block;
float: left;
margin: 0;
min-width: 20px;
width: auto;
line-height: 90px;
height: 90px;
box-sizing: border-box;
opacity: 0;
-webkit-transform: translateX(100px) scale(1.1);
transform: translateX(100px) scale(1.1);
}
.swiper-pagination-bullet:first-child .title span {
opacity: 1;
-webkit-transform: translateX(0px) scale(1);
transform: translateX(0px) scale(1);
}
.subtitle {
margin-bottom: 0;
opacity: 1;
line-height: 20px;
position: relative;
left: 0;
display: block;
font-size: 14px;
font-weight: 600;
font-family: 'Poppins', sans-serif;
opacity: 0;
-webkit-transform: translateX(20px) scale(1);
transform: translateX(20px) scale(1);
}
.swiper-pagination-bullet:first-child .subtitle {
opacity: 0;
-webkit-transform: translateY(15vh) scale(1);
transform: translateY(15vh) scale(1);
}
#showcase-holder .showcase-pagination-wrap {
position: absolute;
right: 0;
left: 0;
margin: 0 auto;
top: -13%;
box-sizing: border-box;
width: 100%;
z-index: 100;
height: 100%;
display: table;
pointer-events: none;
transform: translateY(-30vh);
-webkit-transform: translateY(-30vh);
}
#showcase-holder .showcase-pagination {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: bottom;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: relative;
pointer-events: none;
}
#showcase-holder .swiper-pagination-bullet {
position: absolute;
width: 100%;
height: auto;
display: block;
opacity: 0;
border-radius: 0;
background: transparent;
box-sizing: border-box;
text-align: center;
bottom: 0;
transition: opacity .3s ease-in-out;
}
#showcase-holder .swiper-pagination-bullet-active{
transition: opacity .3s ease-in-out;
opacity: 1;
}
#showcase-holder .swiper-pagination-bullet {
color: #fff;
text-align: center;
}
.light-content #showcase-holder .swiper-pagination-bullet {
color: rgba(255, 255, 255, 1);
text-align: center;
}
.showcase-counter {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
.counter-wrap {
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.counter {
height: 20px;
width: 50px;
position: absolute;
bottom: 38px;
left: 230px;
text-align: center;
opacity: 0;
font-size: 14px;
font-weight: 500;
color: #fff;
line-height: 20px;
-webkit-transform: translateY(20px) scale(1);
transform: translateY(20px) scale(1);
}
.light-content .counter, .light-content .showcase-counter span::after {
color: #fff;
}
.showcase-counter span{
width: 20px;
height: 20px;
font-size: 14px;
line-height: 20px;
position: absolute;
bottom: 38px;
left: 300px;
opacity: 1;
font-weight: 500;
color: #fff;
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.showcase-counter span::after {
content: attr(data-total);
position: relative;
}
.showcase-counter::before {
content: '';
width: 1px;
height: 10px;
position: absolute;
bottom: 44px;
left: 282px;
background-color: rgb(255, 255, 255);
-webkit-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
}
.light-content .showcase-counter::before {
background-color: rgb(255, 255, 255);
}
.scale-up .counter-wrap, .scale-up .showcase-counter::after, .scale-up .showcase-counter::before {
opacity: 0 !important;
}
.swiper-pagination-bullet:first-child .counter {
opacity: 0;
-webkit-transform: translateY(0px) scale(1);
transform: translateY(0px) scale(1);
}
.caption-border {
height: 1px;
background-color: rgba(255, 255, 255, 0.15);
position: absolute;
margin: 0 auto;
bottom: 50px;
transition: width 0.8s cubic-bezier(0.68, 0, 0.265, 1) 0.2s;
-webkit-transition: width 0.8s cubic-bezier(0.68, 0, 0.265, 1) 0.2s;
}
.light-content .caption-border {
background-color: rgba(255, 255, 255, 0.15);
}
.caption-border.left {
left: 400px;
}
.caption-border.right {
right: 400px;
}
.caption-border.left::before {
content: '';
width: 90px;
height: 1px;
position: fixed;
left: 80px;
bottom: 50px;
background-color: rgba(255, 255, 255, 0.4);
}
.caption-border.right::after {
content: '';
width: 90px;
height: 1px;
position: fixed;
right: 80px;
bottom: 50px;
background-color: rgba(255, 255, 255, 0.5);
}
.caption-border.left .btn-hold-progress-bar {
right: 0;
}
.caption-border.right .btn-hold-progress-bar {
left: 0;
}
.arrows-wrap {
width: 160px;
height: 80px;
position: absolute;
right: 200px;
pointer-events: initial;
bottom: 10px;
pointer-events: initial;
opacity: 0;
}
.prev-wrap, .next-wrap {
width: 80px;
height: 80px;
float: left;
display: flex;
position: relative;
justify-content: center;
align-items: center;
}
.arrows-wrap .swiper-button-next, .arrows-wrap .swiper-button-prev {
position: relative;
top: auto;
width: 40px;
height: 40px;
margin-top: 0;
z-index: 10;
cursor: pointer;
background-size: 11px 20px;
background-position: center;
background-repeat: no-repeat;
left: auto;
right: auto;
background-image: none !important;
}
.arrows-wrap .swiper-button-prev::before {
height: 40px;
width: 40px;
position: absolute;
left: 0;
font-size: 30px;
line-height: 40px;
text-align: center;
font-family:LineIcons;
content: "\EA44";
color: #fff;
-webkit-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
}
.arrows-wrap .swiper-button-next::before {
height: 40px;
width: 40px;
position: absolute;
left: 0;
font-size: 30px;
line-height: 40px;
text-align: center;
font-family:LineIcons;
content: "\EA46";
color: #fff;
-webkit-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
}
/*====================================
portfolio
=====================================*/
.swiper-thumbnails {
position: absolute;
left: 29%;
bottom: 10%;
transform: translateX(50%);
}
.bullet {
height: 50px;
width: 50px;
cursor: pointer;
border-radius: 50%;
padding: 0px;
border: 2px solid white;
}
.swiper-thumbnails .bullet img {
width:100%;
border-radius: 50%;
}
.swiper-thumbnails .bullet {
background: transparent;
height: 60px;
margin: 0;
position: relative;
width: 60px;
outline: none;
border: 5px solid rgba(255,255,255,.3);
margin-left: -30px;
opacity: .65;
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
-o-transform: scale(.95);
transform: scale(.95);
}
.swiper-thumbnails .bullet.is-active{
background: transparent;
height: 60px;
margin: 0;
position: relative;
width: 60px;
z-index: 99;
border: 5px solid rgba(255, 255, 255, 1);
margin-left: -30px;
opacity: 1;
-webkit-transform: scale(.95);
-ms-transform: scale(.95);
-o-transform: scale(.95);
transform: scale(.95);
}
.swiper-thumbnails .bullet:hover {
opacity: 0.8;
border: 5px solid rgba(255, 255, 255, 0.66);
-webkit-transition: opacity 0.2s ease-in-out 0.5s;
transition: opacity 0.2s ease-in-out 0.5s;
}
.swiper-thumbnails .bullet.is-active:hover {
opacity: 1;
border: 5px solid rgba(255, 255, 255, 1);
}
div[data-title="THE QUEEN"] {
font-size: 20px;
}
/*====================================
portfolio
=====================================*/
/* ===================================
Contact
====================================== */
.bg-contact .pp-tableCell {background: url(../img/contact-bg.jpg); background-size: cover; background-repeat: no-repeat;}
.contact-body{width: 100%; height: 500px;}
.main-title {
position: relative;
margin-bottom: 4rem;
text-align: center;
}
.main-title h5 {
font-family: "Roboto", sans-serif;
font-weight: 400;
margin-bottom: 1.5rem;
color: #24c1dd;
}
.main-title h2 {
text-transform: capitalize;
font-weight: 300;
color: #ffffff;
letter-spacing: 2px;
line-height: 1.2;
max-width: 650px;
margin-bottom: 1.5rem;
margin-left: auto;
margin-right: auto;
}
.main-title p {
max-width: 720px;
margin: 0 auto;
}
.alert-danger {
border-radius: 36px;
}
.contact-para-setting {
max-width: 480px;
}
.contact-info .icon-box {
display: table;
padding-top: 1.5rem;
}
.contact-info .icon-box:last-child {
padding-bottom: 0.5rem;
}
.contact-info h5 {
margin-bottom: 2rem;
}
.contact-info i {
display: table-cell;
font-size: 30px;
padding-right: 15px;
}
.contact-info p {
transform: translateY(-10px);
}
.form-control {
padding: 1.5rem .75rem;
}
.form-control.message {
padding: 13px 10px 10px;
height: 150px;
}
.contact-form-textfield input,
.contact-form-textfield textarea {
font-size: 14px;
border: 1px solid #dcdbdb;
color: #535353 !important;
border-radius: 30px;
-webkit-transition: 300ms ease-in all;
-o-transition: 300ms ease-in all;
transition: 300ms ease-in all;
}
.contact-form-textfield input::-webkit-input-placeholder, .contact-form-textfield textarea::-webkit-input-placeholder,
.contact-form-textfield input:-moz-placeholder, .contact-form-textfield textarea:-moz-placeholder,
.contact-form-textfield input::-moz-placeholder, .contact-form-textfield textarea::-moz-placeholder,
.contact-form-textfield input:-ms-input-placeholder, .contact-form-textfield textarea:-ms-input-placeholder,
.contact-form-textfield input::placeholder, .contact-form-textfield textarea::placeholder{
color: #ffffff !important;
}
.contact-form-textfield input:focus, .contact-form-textfield textarea:focus {
border-color: #dcdbdb;
-webkit-box-shadow: none;
box-shadow: none;
color: #333333;
}
.contact-form-textfield textarea {
height: 120px;
resize: none;
}
.form-control {
box-shadow: none;
}
.contact-box-shadow {
background: #ffffff;
-webkit-box-shadow: 0px 0px 26px 16px rgba(0,0,0,0.02);
box-shadow: 0px 0px 26px 16px rgba(0,0,0,0.02);
padding: 30px 25px;
}
.contact-form-center {
max-width: 950px;
margin: 0 auto;
}
.company-contact-form .form-control, .company-contact-form .form-control:focus {
background-color: transparent;
}
.contact-form-textfield input, .contact-form-textfield textarea {
color: #ffffff !important;
border-radius: 30px;
border-color: #5d5b5b;
}
.company-contact-form .form-control::placeholder {color: #ffffff;}
.company-contact-form .form-control:-ms-input-placeholder {color: #ffffff;}
.company-contact-form .form-control:-ms-input-placeholder {color: #ffffff;}
/* ===================================
Footer
====================================== */
footer.bg-black2 {
background: #f8f9fa;
}
.footer-icons li {
display: inline-block;
}
.footer-icons li a {
display: block;
height: 55px;
width: 55px;
font-size: 18px;
color: #676767;
line-height: 60px;
text-align: center;
margin: 0 0.1rem;
border-radius: 40px;
background: transparent;
-webkit-transition: all .3s ease !important; -o-transition: all .3s ease !important; transition: all .3s ease !important;
}
.copyrights, .copyrights a {
font-size: 14px;
color: #535353;
}
.copyrights a:hover, .copyrights a:focus {
color: #24c1dd;
}
.footer-icons li a:hover, .footer-icons li a:focus {
color: #ffffff;
}
.footer-icons li a.facebook:hover, .footer-icons li a.facebook:focus {
-webkit-box-shadow: 0 0 15px 30px #4267B2 inset;
box-shadow: 0 0 15px 30px #4267B2 inset;
}
.footer-icons li a.twitter:hover, .footer-icons li a.twitter:focus {
-webkit-box-shadow: 0 0 15px 30px #1DA1F2 inset;
box-shadow: 0 0 15px 30px #1DA1F2 inset;
}
.footer-icons li a.google:hover, .footer-icons li a.google:focus {
-webkit-box-shadow: 0 0 15px 30px #DB4437 inset;
box-shadow: 0 0 15px 30px #DB4437 inset;
}
.footer-icons li a.linkedin:hover, .footer-icons li a.linkedin:focus {
-webkit-box-shadow: 0 0 15px 30px #0077B5 inset;
box-shadow: 0 0 15px 30px #0077B5 inset;
}
.footer-icons li a.instagram:hover, .footer-icons li a.instagram:focus {
-webkit-box-shadow: 0 0 15px 30px #C32AA3 inset;
box-shadow: 0 0 15px 30px #C32AA3 inset;
}
.footer-icons li a.pinterest:hover, .footer-icons li a.pinterest:focus {
-webkit-box-shadow: 0 0 15px 30px #BD081C inset;
box-shadow: 0 0 15px 30px #BD081C inset;
}
.footer-icons li a i:hover {
color: #ffffff;
border-radius: 40px;
}
/* ===================================
Cursor
====================================== */
/* Cursor */
#aimated-cursor {
position: absolute;
left: 0;
display: inline-block;
top: 0;
width: 30px;
height: 30px;
pointer-events: none;
z-index: 10000;
-webkit-transition: opacity 0.2s ease-in-out 0.5s;
transition: opacity 0.2s ease-in-out 0.5s;
}
#cursor {
position: fixed;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border: 2px solid rgb(255, 255, 255);
border-radius: 50%;
pointer-events: none;
opacity: 1;
box-sizing: border-box;
}
#cursor:before {
font-family: FontAwesome;
content: "\f053";
font-size: 6px;
width: 4px;
height: 8px;
line-height: 8px;
text-align: center;
position: absolute;
left: -12px;
top: 9px;
color: #ffffff;
opacity: 0;
transition: all 0.1s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
#hold-event {
width: 26px;
height: 26px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 100%;
background: rgba(255,255,255,0);
}
#cursor-loader {
width: 40px;
height: 40px;
position: absolute;
background-color: transparent;
border-right: 2px solid transparent;
border-bottom: 2px solid #ffffff;
border-left: 2px solid transparent;
border-top: 2px solid transparent;
border-radius: 50px;
box-sizing: border-box;
opacity: 0;
transform: translate(-9px, -9px) rotate(0deg);
-webkit-animation: rotating 0.8s ease-in-out infinite;
animation: rotating 0.8s ease-in-out infinite;
-webkit-transition: opacity 0s ease-in-out 0s;
transition: opacity 0s ease-in-out 0s;
}
#cursor:after {
font-family: FontAwesome;
content: "\f054";
font-size: 6px;
width: 4px;
height: 8px;
line-height: 8px;
text-align: center;
position: absolute;
right: -10px;
top: 9px;
color: #ffffff;
opacity: 0;
transition: all 0.2s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
@keyframes rotating {
0% {
-webkit-transform: translate(-7px, -7px) rotate(0deg);
transform: translate(-7px, -7px) rotate(0deg);
}
95% {
-webkit-transform: translate(-7px, -7px) rotate(350deg);
transform: translate(-7px, -7px) rotate(350deg);
}
100% {
-webkit-transform: translate(-7px, -7px) rotate(360deg);
transform: translate(-7px, -7px) rotate(360deg);
}
}
/* ===================================
Revslider Before After
====================================== */
/* before-after background */
.rs-addon-beforeafter-before{
background: rgba(38,38,38,0.5);
}
.rs-before-after-addon {
overflow: hidden !important;
}
.rs-before-after-addon .tparrows {
z-index: 1000 !important;
}
.rs-addon-beforeafter-btn {
position: absolute;
display: table;
cursor: pointer;
text-align: center;
white-space: nowrap;
z-index: 102;
}
.rs-addon-beforeafter-btn i {
display: table-cell;
vertical-align: middle;
position: relative;
}
.rs-beforeafter-shift-arrows .rs-addon-beforeafter-btn i {
-webkit-transform: translateX(0) !important;
transform: translateX(0) !important;
}
.rs-addon-beforeafter-btn-vertical,
.rs-addon-beforeafter-btn-vertical i {
display: block;
}
.rs-addon-beforeafter-line {
display: block;
position: absolute;
z-index: 102;
}
.rs-addon-beforeafter-line.rs-beforeafter-horizontal {
top: 0;
height: 100%;
}
.rs-addon-beforeafter-line.rs-beforeafter-vertical {
left: 0;
width: 100%;
}
.rs-before-after-element {
opacity: 0;
visibility: hidden;
}
.rs-before-after-element,
.rs-before-after-element:before {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.rs-addon-beforeafter-bg {
opacity: 0;
z-index: 999;
}
.rs-addon-beforeafter-bg,
.rs-addon-beforeafter-revealer,
.rs-addon-beforeafter-revealer .tp-loop-wrap {
width: 100%;
height: 100%;
}
.rs-addon-beforeafter-bg,
.rs-addon-beforeafter-revealer {
position: absolute;
overflow: hidden;
}
.rs-addon-beforeafter-before {
top: 0;
left: 0;
}
.rs-addon-beforeafter-horizontal .rs-addon-beforeafter-bg,
.rs-addon-beforeafter-horizontal .rs-addon-beforeafter-after {
top: 0;
right: 0;
}
.rs-addon-beforeafter-vertical .rs-addon-beforeafter-bg,
.rs-addon-beforeafter-vertical .rs-addon-beforeafter-after {
bottom: 0;
left: 0;
}
.rs-addon-beforeafter-bg,
.rs-addon-beforeafter-after {
opacity: 0;
}
.rs-addon-beforeafter-inner,
.rs-addon-beforeafter-bg-inner {
position: absolute;
width: 100%;
height: 100%;
}
.rs-addon-beforeafter-horizontal .rs-addon-beforeafter-inner,
.rs-addon-beforeafter-horizontal .rs-addon-beforeafter-bg-inner {
right: 0;
top: 0;
}
.rs-addon-beforeafter-vertical .rs-addon-beforeafter-inner,
.rs-addon-beforeafter-vertical .rs-addon-beforeafter-bg-inner {
left: 0;
bottom: 0;
}
.rs-video-beforeafter,
.rs-video-beforeafter .tp-mask-wrap {
width: 100% !important;
height: 100% !important;
}
.rs-before-after-addon:not(.before-after-carousel).dragging,
.rs-before-after-addon:not(.before-after-carousel).dragging *,
.rs-before-after-addon:not(.before-after-carousel).dragging .rs-addon-beforeafter-btn i:before {
-webkit-user-select: none !important;
-moz-user-select: none !important;
user-select: none !important;
}
.rs-beforeafter-pointers,
.rs-beforeafter-pointers .rs-addon-beforeafter-inner {
pointer-events: none;
}
.rs-beforeafter-pointers *:not(.rs-addon-beforeafter-inner) {
pointer-events: auto;
}
.rs-beforeafter-pointers .rs-video-beforeafter,
.rs-beforeafter-pointers .rs-video-beforeafter * {
pointer-events: none;
}
.tparrows.tp-leftarrow:before {
content: '\f104'!important;
font-family: "Font Awesome 5 Free";
font-weight: 600;
}
.tparrows.tp-rightarrow:before {
content: '\f105'!important;
font-family: "Font Awesome 5 Free";
font-weight: 600;
}
/* ===================================
Media Queries
====================================== */
@media screen and (max-width:1199px) {
.swiper-thumbnails { left: 24%;}
.header-appear .side-nav-btn{left: 15px;}
.side-logo-nav .social_icons{display: none}
.top-fixed-nav .collapse .mr-0{margin-right: -30px !important;right: 0 !important;}
.top-fixed-nav .side-nav-btn{left: 15px;}
.slide-text{font-size:60px;font-weight: 700;}
.side-logo-nav .side-nav-btn {
position: inherit;
top: 0px;
color: #000000;
transition: all 0.3s ease;
width: 28px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
cursor: pointer;
z-index: 99;
-webkit-transition: all linear 300ms;
margin-bottom: 5px;
margin-left: 10px;
}
}
/* ===================================
Blog Page
====================================== */
/*Blog*/
.main .side_tags .search-bar form span button {
border-radius: 10px;
border: none;
background-color: #114dba;
color: #FFFFFF;
padding-left: 15px;
padding-right: 15px;
z-index: 11;
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
transition: .8s ease;
border: solid 1px #114dba;
}
.blog-banner{
background: url("../img/bg-img3.jpg");
padding-top: 150px;
padding-bottom: 130px;
background-position: center;
background-size: cover;
}
.blog-banner h1{
margin-bottom: 25px;
font-family: 'Poppins', sans-serif;
font-size: 40px;
font-weight: bold;
color: whitesmoke;
}
.blog-banner p{
font-family: 'Open Sans', sans-serif;
font-size: 15px;
color: whitesmoke;
}
.blog-body{
position: relative;
padding: 7.5rem 0;
overflow: hidden
}
.blog-search{
padding: 40px 48px;
background-color: #f8f9fa;
margin-bottom: 30px;
}
.has-search .form-control {
padding-left: 1.375rem;
border-radius: 20px;
margin-top: 10px;
}
.blog-left .form-control{
padding: 0.5rem .75rem;
}
input[type=text]:focus {
outline: none !important;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
right: 61px;
border-radius: 50px;
background-color: #21c2c2;
width: 38px;
height: 38px;
line-height: 2.4rem;
text-align: center;
pointer-events: none;
color: #ffffff;
transition: .8s ease;
}
.blog-search .has-search:hover .form-control-feedback {
cursor: pointer;
}
.blog-topic{
padding: 40px 48px;
background-color: rgba(225, 225, 225, 0.24);
margin-bottom: 30px;
}
.blog-topic h5{
font-size: 22px;
font-weight: bold;
font-family: 'Poppins', sans-serif;
color: black;
}
.blog-body .blog-topic ul{
padding-left: 0px;
margin-bottom: 0px;
}
.blog-body .blog-topic ul li{
list-style: none;
font-family: "Open Sans", sans-serif;
letter-spacing: 1px;
position: relative;
overflow: hidden;
font-size: 13px;
margin-bottom: 10px;
text-overflow: ellipsis;
}
.blog-body .blog-topic ul li:last-child{
margin-bottom: 0px;
}
.blog-body .blog-topic ul li a{
font-family: "Open Sans", sans-serif;
font-weight:500;
color: #444444;
text-decoration: none;
display: inline-block;
padding-right: 8px;
}
.blog-body .blog-topic ul li .dots{
overflow-wrap: break-word;
white-space: nowrap;
}
.blog-body .blog-topic ul li p{
font-family: "Open Sans", sans-serif;
font-weight:500;
display: inline-block;
float: right;
background-color: #F8F8F8;
padding-left: 7px;
color:#000000;
}
.blog-body .blog-topic ul li:last-child p{
margin-bottom: 0px;
}
.blog-body .blog-topic ul li .dots:before{
content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
white-space: nowrap;
height: 2px;
opacity: 1;
z-index: -99999;
line-height: 1;
box-sizing: border-box;
position: absolute;
width: 100%;
}
.blog-post{
padding: 40px 48px;
background-color: rgba(225, 225, 225, 0.24);
margin-bottom: 30px;
}
.blog-post h5{
font-size: 22px;
font-weight: bold;
font-family: 'Poppins', sans-serif;
color: black;
}
.blog-post .media{
margin-bottom: 10px;
}
.blog-post .media img{
border-radius: 20px;
width: 90px;
height: 90px;
}
.blog-post .media:last-child{
margin-bottom: 0px;
}
.blog-post .media .media-body h5{
font-family: 'Poppins', sans-serif;
color: black;
font-size: 14px;
line-height: 1.4;
margin-bottom: 5px;
display: block;
}
.blog-post .media .media-body p{
font-family: 'Poppins', sans-serif;
font-size: 12px;
color: #0fc0e0;
font-weight: bold;
}
.blog-post .media .media-body p .date{
color: gray;
font-weight: normal;
font-style: italic;
}
.blog-post .media .media-body p a{
color: #0fc0e0;
text-decoration: none;
}
.blog-post .media .media-body p .author{
color: gray;
font-weight: normal;
}
.blog-tags-sec{
padding: 40px 48px;
background-color: rgba(225, 225, 225, 0.24);
margin-bottom: 30px;
}
.blog-tags-sec h5{
font-size: 22px;
font-weight: bold;
font-family: 'Poppins', sans-serif;
color: black;
}
.blog-tags li{
display: inline-block;
margin-bottom: 10px;
}
.blog-tags li a{
padding: 6px 15px;
border:1px solid #838383;
font-size: 13px;
color: #838383;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
text-decoration: none;
}
.blog-tags li a:hover,.blog-tags li a:focus{
border:1px solid #00bcd4;
background-color: #00bcd4;
color: #FFFFFF;
}
.blog-archives{
padding: 40px 48px;
background-color: rgba(225, 225, 225, 0.24);
margin-bottom: 30px;
}
.blog-archives h5{
font-size: 22px;
font-weight: bold;
font-family: 'Poppins', sans-serif;
color: black;
}
.blog-body .blog-archives ul{
padding-left: 0px;
margin-bottom: 0px;
}
.blog-body .blog-archives ul li{
list-style: none;
font-family: "Open Sans", sans-serif;
letter-spacing: 1px;
position: relative;
overflow: hidden;
font-size: 13px;
margin-bottom: 10px;
text-overflow: ellipsis;
}
.blog-body .blog-archives ul li:last-child{
margin-bottom: 0px;
}
.blog-body .blog-archives ul li a{
font-family: "Open Sans", sans-serif;
font-weight:500;
color: #444444;
text-decoration: none;
display: inline-block;
padding-right: 8px;
}
.blog-body .blog-archives ul li .dots{
overflow-wrap: break-word;
white-space: nowrap;
}
.blog-body .blog-archives ul li p{
font-family: "Open Sans", sans-serif;
font-weight:500;
display: inline-block;
float: right;
background-color: #F8F8F8;
padding-left: 7px;
color: #000000;
}
.blog-body .blog-archives ul li:last-child p{
margin-bottom: 0px;
}
.blog-body .blog-archives ul li .dots:before{
content: ". . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
white-space: nowrap;
height: 2px;
opacity: 1;
z-index: -99999;
line-height: 1;
box-sizing: border-box;
position: absolute;
width: 100%;
}
.blog-advertise{
margin-bottom: 30px;
}
.blog-advertise img {
width: 100%;
}
.blog-body article .post-thumbnail{
margin-bottom: 25px;
}
/*Post plus Article*/
.blog-body .blog-classic:first-child {
padding-top: 0;
}
.blog-classic {
padding: 4rem 0;
border-bottom: 1px solid #efefef;
}
.blog-body article .post-thumbnail img{
width: 100%;
}
.blog-body article .post-title {
font-size: 1.4rem;
line-height: 1.3;
margin-top: 0;
margin-bottom: 5px;
}
.blog-body article .post-title a{
text-decoration: none;
color: #232323;
font-family: 'Poppins', sans-serif;
font-weight: bold;
}
.blog-body article .post-details.alt-font {
font-size: 11px;
line-height: 2;
color: #939393;
text-transform: uppercase;
margin-bottom: .8rem;
font-weight: bold;
font-family: 'Poppins', sans-serif;
}
.post-separator {
margin: 0 10px;
}
.post-separator:nth-last-child(1) {
display: none;
}
.blog-body article .post-details .post-author a{
text-decoration: none;
color: #939393;
font-weight: bold;
}
.blog-body article .post-details .post-categories .cat-links a{
text-decoration: none;
color: #939393;
font-weight: bold;
}
.blog-body article .post-content{
margin: 0 0 25px;
}
.blog-body article .post-content p{
font-size: 14px;
font-family: 'Poppins', sans-serif;
color: #AEAEAE;
line-height: 1.8;
}
.blog-body article .post-content .btn-primary {
color: #ffffff;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-transition: 0.5s;
transition: 0.5s;
background-size: 200% auto;
background-image: -webkit-gradient(linear, left top, right top, from(#21c2c2), color-stop(51%, #d00520), to(#21c2c2));
background-image: linear-gradient(to right, #d00520 0%, #21c2c2 51%, #d00520 100%);
background-size: 200% auto;
border: none;
}
.blog-body article .post-content .btn-rounded {
border-radius: 50px;
}
.blog-body article .post-content .btn-large {
font-size: 14px;
padding: 8px 30px;
line-height: 25px;
}
.blog-body article .post-content .btn-primary:hover {
background-position: right center;
color: #fff;
}
.gallery-projects {
list-style: none;
padding: 0;
margin: 0;
margin-bottom: 2rem;
}
.gallery-projects img {
max-width: 100%;
height: auto;
}
.gallery-projects .img-hover {
position: absolute;
top: 0;
width: 100%;
text-align: center;
display: block;
height: 100%;
vertical-align: middle;
opacity: 0;
visibility: hidden;
background: rgba(0,0,0,.3);
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.gallery-projects li {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.gallery-projects .img-hover i {
color: #fff;
font-size: 20px;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.gallery-projects li>a:hover .img-hover {
opacity: 1;
visibility: visible;
}
a {
color: #3264f5;
text-decoration: none;
background-color: transparent;
}
.blog-post-navigation {
padding-top: 4rem;
}
.blog-post-navigation .page-link.current {
z-index: 1;
color: #2b2b2b;
background-color: #e9ecef;
border-color: #dee2e6;
}
.blog-post-navigation .page-link {
position: relative;
display: block;
padding: 0.7rem 1.1rem;
color: #000000;
text-decoration: none;
font-weight: lighter;
}
.blog-post-navigation a {
text-decoration: underline;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
height: 35px;
width: 35px;
line-height: 1.7;
outline: black;
background-size: 100%, 100%;
border-radius: 50%;
background-color: #24c4f4;
background-image: none;
}
.carousel-control-next-icon:after
{
content: '>';
font-size: 22px;
color: whitesmoke;
}
.carousel-control-prev-icon:after {
content: '<';
font-size: 22px;
color: whitesmoke;
}
@media screen and (max-width:991px) {
.swiper-thumbnails { left: 12%;}
.inner-wrapper .navbar-nav {-ms-flex-direction: column;flex-direction: column;}
.side-nav .navbar-nav .nav-item{margin: 9px auto;}
.side-menu.side-btn-style2 .btn-close{left: auto;right: 47px;}
.top-fixed-nav a.logo{position: relative;top: 0px;left: 0px;transform: translateX(0);}
.top-fixed-nav .side-nav-btn{position: relative;top: 0;left: 0;}
header.header-appear .top-center-logo a.logo{top: 0px;position: relative;left: 0;transform: translateX(0);}
.header-appear .side-nav-btn {position: inherit;top: 45px;left: 0;}
.header-appear .side-menu .btn-close{right:47px;left: auto;}
}
@media screen and (max-width:767px) {
.swiper-thumbnails {display: none;}
#services_slider h1{font-size: 1.75rem;}
.logo-dark {margin-left: 20px;}
.services-item .testimonial-line{
width: 5px;
opacity: 0;
height: 3px;
left: auto;
position: relative;
text-align: center;
margin-bottom: 40px;
background-color: #d00520;
}
#services_slider .owl-dots {
position: relative;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
.testimonial-quote {
text-align: center;
}
.testimonial-quote h1 {font-size: 1.75rem}
.team-img {margin: 0 auto;}
.testimonial-line {margin: 0 auto;}
#owl-thumbs.owl-dots {
text-align: center;}
.caption-border.left::before {
background-color: rgba(255, 255, 255, 0);
}
.caption-border.right::after {
background-color: rgba(255, 255, 255, 0);
}
.showcase-counter::after {
display: none;
}
.showcase-counter::before {
display: none;
}
.counter-wrap {
display: none;
}
.arrows-wrap {
right: 38%;
top: 100%;
}
#pp-nav.right {
display: none;
}
.tparrows {top: 95%!important;}
#page-scroll .section{
height: 100%;
}
#aimated-cursor {display: none;}
.max-width {
width:50%;
}
.main-title {
margin-bottom: 2.5rem;}
.form-control.message {
height: 90px;
}
.side-nav-btn {top: 25px;}
.navbar-standard {padding: 18px 0px;}
.title {font-size: 2rem;}
}
@media screen and (max-width:479px) {
.side-nav-btn {
left: auto;
right: 0;
margin-right: 20px;
}
.side-menu .btn-close{right:47px;left: auto;}
.side-logo-nav .logo .logo-dark, .side-logo-nav .logo .logo-light.default{margin-left: 10px}
.arrows-wrap {
right: 27%;
top: 100%;
}
}
@media screen and (max-width:359px) {
.team-progress .progress-item{margin-bottom: 1rem;}
}
.counter,.showcase-counter span{
pointer-events: initial;
}